From 9f416cbdc9457ded0b7d57f13079d6665520a056 Mon Sep 17 00:00:00 2001
From: Ahmed Yasin Koculu <koculu@gmail.com>
Date: Thu, 8 Oct 2026 21:42:17 +0200
Subject: [PATCH 1/2] =?UTF-8?q?Make=20Tabs=E2=80=99=20mobile=20select=20op?=
 =?UTF-8?q?tional=20and=20reactive.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/layout/tabs/playground.ts      |  8 +-
 .../components/layout/tabs/tabs.mdx           | 31 ++++++--
 .../src/standard/tabs/tabs.test.ts            | 75 +++++++++++++++++++
 .../ts-components/src/standard/tabs/tabs.ts   |  4 +-
 .../src/standard/tabs/tabsStyle.test.ts       | 74 ++++++++++++++++++
 .../src/standard/tabs/tabsStyle.ts            | 14 ++--
 .../ts-page-scripts/src/embed/tabs.embed.ts   |  2 +-
 packages/ts-page-scripts/src/tabs.ts          |  9 ++-
 8 files changed, 202 insertions(+), 15 deletions(-)
 create mode 100644 packages/ts-components/src/standard/tabs/tabsStyle.test.ts

diff --git a/frontend/purestack.studio/components/layout/tabs/playground.ts b/frontend/purestack.studio/components/layout/tabs/playground.ts
index b9129161..946fcf62 100644
--- a/frontend/purestack.studio/components/layout/tabs/playground.ts
+++ b/frontend/purestack.studio/components/layout/tabs/playground.ts
@@ -39,6 +39,7 @@ export interface TabsPlayground {
   icons: Ref<boolean>
   header: Ref<boolean>
   teamDisabled: Ref<boolean>
+  mobileSelect: Ref<boolean>
   tones: FormSelectOption[]
   variants: FormSelectOption[]
   modes: FormSelectOption[]
@@ -54,7 +55,7 @@ const tabsPlaygroundTemplate = html`<Flex direction="column">
     <Badge tone="accent" variant="surface">Live playground</Badge>
   </Flex>
   <Tabs id="tabs-playground-preview" group="tabs-playground-views" :selectedTab="selected"
-    :tone="tone" :variant="shell" :tabVariant="controls" :variantMode="mode" ariaLabel="Project workspace">
+    :tone="tone" :variant="shell" :tabVariant="controls" :variantMode="mode" :mobileSelect="mobileSelect" ariaLabel="Project workspace">
     <template #header>
       <Flex r-if="header" class="tabs__header" justify="between" align="center" wrap="true">
         <div><p class="text-eyebrow m-0">PureStack Studio</p><h3 class="mt-1 mb-0">Project workspace</h3></div>
@@ -94,6 +95,7 @@ const tabsPlaygroundTemplate = html`<Flex direction="column">
       <FormCheck id="tabs-disabled" label="Disable Team" :checked="teamDisabled"/>
     </Flex>
   </div>
+  <FormCheck id="tabs-mobile-select" label="Use a select on mobile" :checked="mobileSelect"/>
   <Flex justify="between" align="center" wrap="true">
     <p class="text-muted m-0" role="status">Selected: <code id="tabs-selected">{{ selected }}</code></p>
     <Btn variant="outline" size="sm" @click="reset">Reset playground</Btn>
@@ -115,6 +117,7 @@ const tabsPlayground = defineComponent<TabsPlayground>(tabsPlaygroundTemplate, {
     const icons = ref(true)
     const header = ref(true)
     const teamDisabled = ref(true)
+    const mobileSelect = ref(false)
     const refresh = () => {
       if (teamDisabled() && selected() === 'tabs-lab-team')
         selected('tabs-lab-overview')
@@ -132,6 +135,7 @@ const tabsPlayground = defineComponent<TabsPlayground>(tabsPlaygroundTemplate, {
       icons,
       header,
       teamDisabled,
+      mobileSelect,
       refresh,
       tones: [
         'neutral',
@@ -180,6 +184,7 @@ const tabsPlayground = defineComponent<TabsPlayground>(tabsPlaygroundTemplate, {
             Tabs: {
               group: 'tabs-playground-views',
               selectedTab: selected(),
+              mobileSelect: mobileSelect(),
               tone: tone(),
               variant: shell(),
               tabVariant: controls(),
@@ -204,6 +209,7 @@ const tabsPlayground = defineComponent<TabsPlayground>(tabsPlaygroundTemplate, {
         icons(true)
         header(true)
         teamDisabled(true)
+        mobileSelect(false)
         refresh()
       },
     }
diff --git a/frontend/purestack.studio/components/layout/tabs/tabs.mdx b/frontend/purestack.studio/components/layout/tabs/tabs.mdx
index 354a882b..0f02d537 100644
--- a/frontend/purestack.studio/components/layout/tabs/tabs.mdx
+++ b/frontend/purestack.studio/components/layout/tabs/tabs.mdx
@@ -18,7 +18,7 @@ nav:
 <Grid columns="1" columnsMd="3">
   <Panel variant="outline" bodyClass="p-3"><p class="text-eyebrow mt-0">Selection</p><strong>One shared ref</strong><p class="text-muted mb-0">Connect the active pane to forms, buttons and the rest of your app.</p></Panel>
   <Panel variant="outline" bodyClass="p-3"><p class="text-eyebrow mt-0">State</p><strong>Panels stay mounted</strong><p class="text-muted mb-0">Switch views without discarding a draft or resetting an input.</p></Panel>
-  <Panel variant="outline" bodyClass="p-3"><p class="text-eyebrow mt-0">Space</p><strong>Controls adapt</strong><p class="text-muted mb-0">Overflow on narrow containers. A native selector on mobile.</p></Panel>
+  <Panel variant="outline" bodyClass="p-3"><p class="text-eyebrow mt-0">Space</p><strong>Controls adapt</strong><p class="text-muted mb-0">Overflow on narrow containers. An optional native selector on mobile.</p></Panel>
 </Grid>
 
 ## In context
@@ -127,7 +127,7 @@ const select = (id: string) => {
 }
 ```
 
-`refresh()` rebuilds the generated buttons and selector; it keeps the existing panel content. Scope it to the root you changed. Also refresh after inserting or removing panes. A ref assignment updates the underlying radio binding, but the current runtime does not watch every component prop automatically.
+`refresh()` rebuilds the generated buttons and selector; it keeps the existing panel content. Scope it to the root you changed. Also refresh after inserting or removing panes. A ref assignment updates the underlying radio binding, but the current runtime does not watch every component prop automatically. Changes to `mobileSelect` update the layout automatically and do not require a refresh.
 
 Choose an enabled pane explicitly when disabling or removing the selected pane. This keeps the model and visible view aligned. The playground demonstrates that policy in its `refresh` action.
 
@@ -157,9 +157,23 @@ Change the example's width without resizing the page. On desktop, the More tabs
 | --- | --- | --- |
 | Wide viewport, enough container space | Horizontal buttons | Choose Full available width |
 | Wide viewport, narrow container | Buttons plus More tabs | Choose 280px or 360px |
-| Viewport at or below the framework's `sm` breakpoint (640px) | Native select | Open the page on a phone or resize the browser |
+| Viewport at or below the framework's `sm` breakpoint (640px), with `mobileSelect` enabled | Native select | Enable Use a select on mobile in the playground, then resize the browser |
+| Mobile viewport with `mobileSelect` disabled (default) | Buttons plus More tabs when needed | Leave Use a select on mobile unchecked in the playground |
 
-Container width determines overflow. **Viewport width** determines compact mode. A 280px component inside a desktop page still uses the overflow menu. Selection and panel state survive either transition.
+Container width determines overflow. When `mobileSelect` is enabled, **viewport width** determines compact mode. A 280px component inside a desktop page still uses the overflow menu. Selection and panel state survive either transition.
+
+### Use a select on mobile
+
+Tabs keep their buttons and overflow menu at every viewport width by default. Set `:mobileSelect="true"` on an individual Tabs to use a native select on mobile:
+
+```html
+<Tabs :mobileSelect="true" selectedTab="mobile-overview">
+  <TabPane id="mobile-overview" label="Overview">Overview content</TabPane>
+  <TabPane id="mobile-details" label="Details">Details content</TabPane>
+</Tabs>
+```
+
+The default is `false`. In a Regor app, bind a boolean ref with `:mobileSelect="mobileSelect"`; changing it switches between the mobile select and tab buttons without rebuilding the component or resetting its selected pane. The playground's Use a select on mobile checkbox demonstrates this.
 
 ## Header slots, overrides and nested groups
 
@@ -206,7 +220,7 @@ All variant values are available in the playground: `none`, `solid`, `surface`,
 </div>
 
 <nav class="api-index" aria-label="Tabs API">
-  <a href="#tabs-group-api">group</a><a href="#tabs-selected-api">selectedTab</a><a href="#tabs-label-api">ariaLabel</a><a href="#tabs-tone-api">tone</a><a href="#tabs-variant-api">variants</a><a href="#pane-id-api">pane identity</a><a href="#pane-disabled-api">disabled</a><a href="#pane-style-api">pane styling</a><a href="#tabs-slots-api">slots</a><a href="#tabs-runtime-api">runtime</a>
+  <a href="#tabs-group-api">group</a><a href="#tabs-selected-api">selectedTab</a><a href="#tabs-mobile-select-api">mobileSelect</a><a href="#tabs-label-api">ariaLabel</a><a href="#tabs-tone-api">tone</a><a href="#tabs-variant-api">variants</a><a href="#pane-id-api">pane identity</a><a href="#pane-disabled-api">disabled</a><a href="#pane-style-api">pane styling</a><a href="#tabs-slots-api">slots</a><a href="#tabs-runtime-api">runtime</a>
 </nav>
 
 ### Tabs properties
@@ -220,6 +234,11 @@ All variant values are available in the playground: `none`, `solid`, `surface`,
   <p>Set an enabled pane explicitly for predictable initial state. Without a valid checked pane, the enhanced runtime chooses the first enabled pane; the CSS-only fallback displays the first pane.</p>
 </ApiProperty>
 
+<ApiProperty anchor="tabs-mobile-select-api" name="mobileSelect" valueType="RefOrValue&lt;boolean&gt;" defaultValue="false">
+  <p>Set true to use a native select at viewport widths up to 640px. By default, Tabs retain their buttons and overflow menu on mobile.</p>
+  <p>Bind a boolean ref to change this per instance. The browser runtime updates the layout automatically and preserves the selected pane; no refresh is needed for this prop.</p>
+</ApiProperty>
+
 <ApiProperty anchor="tabs-label-api" name="ariaLabel" valueType="RefOrValue&lt;string&gt;" defaultValue="Tabs">
   <p>Accessible group name for the tab list and compact selector. Describe the views, such as Release workspace or Deployment environment.</p>
 </ApiProperty>
@@ -484,7 +503,7 @@ A text label, an optional icon, a disabled view, and label fallback to the ID ar
 | Selecting one group clears another | Give each Tabs instance a different group |
 | The wrong panel opens or labels target another example | Make every TabPane id document-unique |
 | The model changes but enhanced controls look stale | Refresh the affected root after the DOM update |
-| A narrow desktop demo does not use a select | Compact mode follows viewport width, not container width |
+| A narrow desktop demo does not use a select | Enable mobileSelect; compact mode follows viewport width, not container width |
 | A header appears below the generated controls | Add tabs__header to the header-slot wrapper |
 | A selected pane becomes disabled | Move selection to an enabled pane before refreshing |
 
diff --git a/packages/ts-components/src/standard/tabs/tabs.test.ts b/packages/ts-components/src/standard/tabs/tabs.test.ts
index 95b0acca..ca658c4e 100644
--- a/packages/ts-components/src/standard/tabs/tabs.test.ts
+++ b/packages/ts-components/src/standard/tabs/tabs.test.ts
@@ -8,6 +8,81 @@ import { defineIconComponents } from '../icon/icon'
 import { defineTabsComponents } from './tabs'
 
 describe('Tabs rendering', () => {
+  it.each([
+    [undefined, 'false'],
+    [true, 'true'],
+    [false, 'false'],
+  ])(
+    'renders the mobile select setting %s as %s',
+    async (mobileSelect, expected) => {
+      const cleanup = ensureDomGlobals()
+      try {
+        const binding =
+          mobileSelect === undefined ? '' : `:mobileSelect="${mobileSelect}"`
+        const html = await renderApp(
+          `<Tabs ${binding}><TabPane id="overview" label="Overview">Content</TabPane></Tabs>`,
+          {
+            components: {
+              ...defineIconComponents(getSvgIcon),
+              ...defineTabsComponents(),
+            },
+            context: createTestContext({
+              pageInfo: { relPath: 'tabs.mdx', urlPath: '/tabs/' },
+            }),
+          },
+        )
+        expect(html).toContain(`data-mobile-select="${expected}"`)
+      } finally {
+        cleanup()
+      }
+    },
+  )
+
+  it('updates mobileSelect reactively per instance without changing selection', () => {
+    const cleanupDom = createDom(
+      '<html><body><div id="app"></div></body></html>',
+    )
+    const mobileSelect = ref(false)
+    const selectedTab = ref('details')
+    const app = createApp(
+      {
+        components: {
+          ...defineIconComponents(getSvgIcon),
+          ...defineTabsComponents(),
+        },
+        mobileSelect,
+        selectedTab,
+      },
+      {
+        selector: '#app',
+        template: `<Tabs id="configurable-tabs" group="configurable" :mobileSelect="mobileSelect" :selectedTab="selectedTab">
+          <TabPane id="overview" label="Overview">Overview</TabPane>
+          <TabPane id="details" label="Details">Details</TabPane>
+        </Tabs>
+        <Tabs id="default-tabs" group="default"><TabPane id="other" label="Other">Other</TabPane></Tabs>`,
+      },
+    )
+    try {
+      const root = document.querySelector('#configurable-tabs')
+      const other = document.querySelector('#default-tabs')
+      expect(root?.getAttribute('data-mobile-select')).toBe('false')
+      expect(other?.getAttribute('data-mobile-select')).toBe('false')
+
+      mobileSelect(true)
+      expect(root?.getAttribute('data-mobile-select')).toBe('true')
+      mobileSelect(false)
+      expect(root?.getAttribute('data-mobile-select')).toBe('false')
+      expect(other?.getAttribute('data-mobile-select')).toBe('false')
+      expect(selectedTab()).toBe('details')
+      expect(
+        document.querySelector<HTMLInputElement>('#details')?.checked,
+      ).toBe(true)
+    } finally {
+      app.unbind()
+      cleanupDom()
+    }
+  })
+
   it('renders slotted tab content and active tab state', async () => {
     const cleanup = ensureDomGlobals()
     const components = {
diff --git a/packages/ts-components/src/standard/tabs/tabs.ts b/packages/ts-components/src/standard/tabs/tabs.ts
index e19d16b5..b7498324 100644
--- a/packages/ts-components/src/standard/tabs/tabs.ts
+++ b/packages/ts-components/src/standard/tabs/tabs.ts
@@ -27,6 +27,7 @@ export class Tabs {
   group: string = defaultGroup
   ariaLabel?: RefOrValue<string>
   selectedTab?: RefOrValue<string>
+  mobileSelect?: RefOrValue<boolean>
   tone?: RefOrValue<SemanticTone>
   variant?: RefOrValue<ComponentVariant>
   variantMode?: RefOrValue<ComponentVariantMode>
@@ -48,7 +49,7 @@ export interface TabPane {
   tabClasses?: ComputedRef<string>
 }
 
-const tabsTemplate = html`<section class="tabs" :class="classes">
+const tabsTemplate = html`<section class="tabs" :class="classes" :data-mobile-select="mobileSelect === true ? 'true' : 'false'">
   <slot name="header"></slot>
   <div class="tabs__list" role="tablist" :aria-label="ariaLabel || 'Tabs'">
     <slot></slot>
@@ -96,6 +97,7 @@ function defineTabsComponent() {
       'ariaLabel',
       'group',
       'selectedTab',
+      'mobileSelect',
       'tone',
       'variant',
       'variantMode',
diff --git a/packages/ts-components/src/standard/tabs/tabsStyle.test.ts b/packages/ts-components/src/standard/tabs/tabsStyle.test.ts
new file mode 100644
index 00000000..2544ae8f
--- /dev/null
+++ b/packages/ts-components/src/standard/tabs/tabsStyle.test.ts
@@ -0,0 +1,74 @@
+import { createDom } from '@purestack/ts-minidom'
+import { styleBuilder } from '@purestack/ts-style'
+import { beforeEach, describe, expect, it } from 'vitest'
+import { registerTabsStyles } from './tabsStyle'
+
+function tabsOwnerId(control: Element) {
+  let parent = control.parentElement
+  while (parent) {
+    if (parent.classList.contains('tabs')) return parent.id
+    parent = parent.parentElement
+  }
+}
+
+describe('nested Tabs responsive styles', () => {
+  beforeEach(() => {
+    styleBuilder.reset()
+  })
+
+  it.each(['light', 'dark'] as const)(
+    'keeps a compact parent from changing its nested controls in the %s theme',
+    (theme) => {
+      const cleanup = createDom(`<html><body>
+        <section id="outer" class="tabs tabs--enhanced tabs--compact">
+          <div class="tabs__tabs-row"></div>
+          <div class="tabs__select-wrap"></div>
+          <div class="tabs__list"><div class="tabs__item">
+            <label class="tabs__tab">Outer tab</label>
+            <section class="tabs__panel">
+              <section id="inner" class="tabs tabs--enhanced" data-mobile-select="false">
+                <div class="tabs__tabs-row"></div>
+                <div class="tabs__select-wrap"></div>
+                <div class="tabs__list"><div class="tabs__item">
+                  <label class="tabs__tab">Inner tab</label>
+                </div></div>
+              </section>
+              <section id="static" class="tabs">
+                <div class="tabs__list"><div class="tabs__item">
+                  <label class="tabs__tab">Static fallback tab</label>
+                </div></div>
+              </section>
+            </section>
+          </div></div>
+        </section>
+      </body></html>`)
+      try {
+        registerTabsStyles()
+        const rules = [...styleBuilder.get(theme).children.values()]
+        const compactRules = rules.filter((rule) =>
+          rule.selector.includes('.tabs--compact'),
+        )
+        expect(compactRules.length).toBeGreaterThan(0)
+        for (const rule of compactRules) {
+          const matched = [...document.querySelectorAll(rule.selector)]
+          expect(matched.length).toBeGreaterThan(0)
+          for (const control of matched) {
+            expect(tabsOwnerId(control)).toBe('outer')
+          }
+        }
+
+        const labelRule = rules.find(
+          (rule) =>
+            rule.selector.includes('.tabs--enhanced') &&
+            rule.selector.endsWith('.tabs__tab'),
+        )
+        expect(labelRule).toBeDefined()
+        const labels = [...document.querySelectorAll(labelRule?.selector ?? '')]
+        expect(labels).toHaveLength(2)
+        expect(labels.map(tabsOwnerId)).toEqual(['outer', 'inner'])
+      } finally {
+        cleanup()
+      }
+    },
+  )
+})
diff --git a/packages/ts-components/src/standard/tabs/tabsStyle.ts b/packages/ts-components/src/standard/tabs/tabsStyle.ts
index 4193529f..1566ee98 100644
--- a/packages/ts-components/src/standard/tabs/tabsStyle.ts
+++ b/packages/ts-components/src/standard/tabs/tabsStyle.ts
@@ -215,17 +215,21 @@ function registerTabsPanelStyles(theme: ThemeMode) {
 }
 
 function registerTabsResponsiveStyles(theme: ThemeMode) {
-  styleBuilder.select('.tabs--enhanced .tabs__tabs-row', theme).display('flex')
+  styleBuilder
+    .select('.tabs--enhanced > .tabs__tabs-row', theme)
+    .display('flex')
 
   styleBuilder
-    .select('.tabs--compact .tabs__select-wrap', theme)
+    .select('.tabs--compact > .tabs__select-wrap', theme)
     .display('block')
 
-  styleBuilder.select('.tabs--enhanced .tabs__tab', theme).display('none')
+  styleBuilder
+    .select('.tabs--enhanced > .tabs__list > .tabs__item > .tabs__tab', theme)
+    .display('none')
 
-  styleBuilder.select('.tabs--compact .tabs__tabs-row', theme).display('none')
+  styleBuilder.select('.tabs--compact > .tabs__tabs-row', theme).display('none')
 
   styleBuilder
-    .select('.tabs--compact .tabs__list', theme)
+    .select('.tabs--compact > .tabs__list', theme)
     .gridTemplateColumns('1fr')
 }
diff --git a/packages/ts-page-scripts/src/embed/tabs.embed.ts b/packages/ts-page-scripts/src/embed/tabs.embed.ts
index 7b7c328b..fbc7e1e4 100644
--- a/packages/ts-page-scripts/src/embed/tabs.embed.ts
+++ b/packages/ts-page-scripts/src/embed/tabs.embed.ts
@@ -2,5 +2,5 @@
 /** biome-ignore-all lint/suspicious/noTemplateCurlyInString: 'auto-generated' */
 
 export function buildTabsScript() {
-  return '"use strict";(()=>{function S(e,r){return{name:e,value:r}}var J={sm:S("sm","640px"),md:S("md","768px"),lg:S("lg","1024px"),xl:S("xl","1280px"),toc:S("toc","1320px"),wide:S("wide","1400px")};function ae(e){return e.value}function ce(e){return`max-width: ${ae(e)}`}function Q(e){return`(${ce(e)})`}var X=1,z=new WeakMap;function le(e){if(document.readyState==="loading"){document.addEventListener("DOMContentLoaded",()=>e(),{once:!0});return}e()}function de(e){return[...document.querySelectorAll(e!=null?e:".tabs")]}function Z(e){for(let r of de(e))ue(r)}function ue(e){var r;(r=z.get(e))==null||r(),fe(e)}function fe(e){var D;let r=e.querySelector(":scope > .tabs__list");if(!(r instanceof HTMLElement))return;let f=he(e),E=Array.from(r.querySelectorAll(":scope > .tabs__item")),o=[];for(let t of E){let n=t.querySelector(":scope > .tabs__control"),i=t.querySelector(":scope > .tabs__tab");n instanceof HTMLInputElement&&i instanceof HTMLLabelElement&&o.push({item:t,control:n,label:i,text:(i.textContent||"").trim()||"Tab",iconMarkup:me(i),tabClassName:be(i)})}if(o.length===0)return;let y=((D=o[0])==null?void 0:D.tabClassName)||"",L=document.createElement("div");L.className="tabs__tabs-row";let h=document.createElement("div");h.className="tabs__overflow";let b=document.createElement("button");b.type="button",b.className="btn tabs__overflow-toggle",N(b,y),b.setAttribute("aria-label","More tabs"),b.setAttribute("title","More tabs"),b.setAttribute("aria-haspopup","true"),b.setAttribute("aria-expanded","false"),b.innerHTML=\'<span aria-hidden="true">&#8942;</span>\';let C=document.createElement("div");C.className="tabs__overflow-menu",N(C,f),h.appendChild(b),h.appendChild(C);let T=document.createElement("div");T.className="tabs__tab-buttons";let H=new Map;for(let t=0;t<o.length;t+=1){let n=document.createElement("button");n.type="button",n.className="btn",N(n,o[t].tabClassName),Y(n,o[t].text,o[t].iconMarkup),n.disabled=o[t].control.disabled,n.setAttribute("aria-label",o[t].text),n.addEventListener("click",()=>O(t,"button")),T.appendChild(n),H.set(t,n)}L.appendChild(T),L.appendChild(h);let v=e.querySelector(":scope > .tabs__select-wrap"),w=v==null?void 0:v.querySelector(":scope > .tabs__select");if((!(v instanceof HTMLElement)||!(w instanceof HTMLSelectElement))&&(v=document.createElement("div"),v.className="tabs__select-wrap",w=document.createElement("select"),w.className="tabs__select",N(w,f),v.appendChild(w)),!w)return;let g=w;N(g,f),g.id||(g.id=pe(e)),g.setAttribute("aria-label",r.getAttribute("aria-label")||"Tabs");let M=e.querySelector(":scope > .tabs__header");if(!(M instanceof HTMLElement)){let t=e.querySelector(".tabs__header");t instanceof HTMLElement&&(M=t,M.parentNode!==e&&e.insertBefore(M,r))}M instanceof HTMLElement&&M.parentNode===e?(e.insertBefore(L,M.nextSibling),e.insertBefore(v,L.nextSibling)):(e.insertBefore(L,r),e.insertBefore(v,L.nextSibling)),e.classList.add("tabs--enhanced");let B=window.matchMedia(Q(J.sm)),A=[],k=0,_=null,p=0,d=null,K=new Map;function P(){for(let t=0;t<o.length;t+=1)if(o[t].control.checked)return t;return-1}function I(){let t=P();if(t!==-1&&!o[t].control.disabled)return t;for(let n=0;n<o.length;n+=1)if(!o[n].control.disabled)return o[n].control.checked=!0,n;return-1}function O(t,n){let i=o[t];!i||i.control.disabled||(d={source:n,index:t},i.control.checked=!0,i.control.dispatchEvent(new Event("change",{bubbles:!0})))}function te(){g.innerHTML="";for(let n=0;n<o.length;n+=1){let i=document.createElement("option");i.value=String(n),i.textContent=o[n].text,i.disabled=o[n].control.disabled,g.appendChild(i)}let t=I();t!==-1&&(g.value=String(t))}function ne(){C.innerHTML="";let t=I();for(let n of A){let i=document.createElement("button");i.type="button",i.className="btn tabs__overflow-option",N(i,o[n].tabClassName),Y(i,o[n].text,o[n].iconMarkup),i.disabled=o[n].control.disabled,i.setAttribute("aria-pressed",n===t?"true":"false"),i.addEventListener("click",()=>{O(n,"overflow"),q()}),C.appendChild(i)}h.classList.toggle("tabs__overflow--visible",A.length>0)}function q(){h.classList.remove("tabs__overflow--open"),b.setAttribute("aria-expanded","false")}function oe(){h.classList.add("tabs__overflow--open"),b.setAttribute("aria-expanded","true")}function se(){return B.matches}function ie(){A=[];for(let[s,l]of H)l.hidden=!1,l.style.order=String(s);h.classList.remove("tabs__overflow--visible");let t=I();if(T.scrollWidth<=T.clientWidth)return;h.classList.add("tabs__overflow--visible");let n=T.getBoundingClientRect().width,i=Number.parseFloat(getComputedStyle(T).columnGap)||0,re=o.map((s,l)=>{var c,u;return(u=(c=H.get(l))==null?void 0:c.getBoundingClientRect().width)!=null?u:0}),$=s=>{let l=0,c=s-1;for(let u=s;u<o.length;u+=1){let m=re[u]||0,V=m+(l>0?i:0);if(l>0&&l+V>n)break;if(l===0&&m>n){c=u,l=m;break}l+=V,c=u}return c<s&&(c=s),{start:s,end:c}},G=s=>{let l=s.end,c=s.start,u=s;for(;c<o.length-1;){c+=1;let m=$(c);if(u=m,m.end>l||m.end===o.length-1)return p=c,m}return p=c,u},U=s=>{let l=s.start,c=s.start,u=s;for(;c>0;){c-=1;let m=$(c);if(u=m,m.start<l||m.start===0)return p=c,m}return p=c,u},x=t!==-1?t:o.length-1;p=Math.max(0,Math.min(p,o.length-1));let a=$(p);if(x<a.start)p=x,a=$(p);else if(x>a.end)for(;x>a.end&&p<o.length-1;)p+=1,a=$(p);if((d==null?void 0:d.source)==="button"&&d.index===a.end&&a.end<o.length-1){let s=G(a);x>=s.start&&x<=s.end&&(a=s)}if((d==null?void 0:d.source)==="button"&&d.index===a.start&&a.start>0&&(a=U(a)),(d==null?void 0:d.source)==="select"||(d==null?void 0:d.source)==="overflow")if(x===a.end&&a.end<o.length-1){let s=G(a);x>=s.start&&x<=s.end&&(a=s)}else x===a.start&&a.start>0&&(a=U(a));for(let s=0;s<o.length;s+=1)s>=a.start&&s<=a.end||A.push(s);for(let s of A){let l=H.get(s);l&&(l.hidden=!0,l.style.order=String(s+o.length))}d=null}function j(){let t=I();for(let[n,i]of H)i.classList.toggle("active",n===t),i.setAttribute("aria-selected",n===t?"true":"false");t!==-1&&(g.value=String(t)),ne()}function R(){if(e.classList.toggle("tabs--compact",se()),e.classList.contains("tabs--compact")){q(),j();return}ie(),j()}g.addEventListener("change",()=>{let t=Number.parseInt(g.value,10);Number.isFinite(t)&&O(t,"select")}),b.addEventListener("click",()=>{if(h.classList.contains("tabs__overflow--open")){q();return}oe()});let W=t=>{let n=t.target;n instanceof Node&&(h.contains(n)||q())};document.addEventListener("click",W);for(let t=0;t<o.length;t+=1){let n=()=>{let i=P();!d&&i!==-1&&(d={source:"external",index:i}),R()};o[t].control.addEventListener("change",n),K.set(o[t].control,n)}let F=()=>{k||(k=window.requestAnimationFrame(()=>{k=0,R()}))};window.addEventListener("resize",F,{passive:!0}),typeof B.addEventListener=="function"&&B.addEventListener("change",R),typeof ResizeObserver!="undefined"&&(_=new ResizeObserver(()=>{F()}),_.observe(e),_.observe(L),_.observe(T)),te(),R(),z.set(e,()=>{k&&(window.cancelAnimationFrame(k),k=0),window.removeEventListener("resize",F),typeof B.removeEventListener=="function"&&B.removeEventListener("change",R),_==null||_.disconnect(),document.removeEventListener("click",W);for(let[t,n]of K)t.removeEventListener("change",n);L.remove(),v.parentNode===e&&v.remove(),e.classList.remove("tabs--enhanced","tabs--compact"),z.delete(e)})}function me(e){let r=e.querySelector(".tabs__tab-icon");return r instanceof HTMLElement?r.outerHTML.trim():""}function be(e){return ee(e,["tabs__tab","tabs__tab--disabled"])}function Y(e,r,f){if(!f){e.textContent=r;return}e.innerHTML="";let E=document.createElement("template");E.innerHTML=f;let o=E.content.firstElementChild;o instanceof HTMLElement&&(o.setAttribute("aria-hidden","true"),o.classList.add("btn__icon"),e.appendChild(o));let y=document.createElement("span");y.className="btn__label tabs__tab-label",y.textContent=r,e.appendChild(y)}function pe(e){var E;let r=(E=e.id)==null?void 0:E.trim();if(r)return`${r}-select`;let f=`tabs-select-${X}`;return X+=1,f}function N(e,r){let f=r.split(/\\s+/).filter(Boolean);f.length!==0&&e.classList.add(...f)}function he(e){return ee(e,["tabs","tabs--enhanced","tabs--compact"])}function ee(e,r){let f=new Set(r);return[...e.classList].filter(E=>!f.has(E)).join(" ")}le(Z);globalThis.window.tsSsgTabs={refresh(e){Z(e)}};})();'
+  return '"use strict";(()=>{function N(e,r){return{name:e,value:r}}var Q={sm:N("sm","640px"),md:N("md","768px"),lg:N("lg","1024px"),xl:N("xl","1280px"),toc:N("toc","1320px"),wide:N("wide","1400px")};function ce(e){return e.value}function le(e){return`max-width: ${ce(e)}`}function X(e){return`(${le(e)})`}var Y=1,z=new WeakMap;function de(e){if(document.readyState==="loading"){document.addEventListener("DOMContentLoaded",()=>e(),{once:!0});return}e()}function ue(e){return[...document.querySelectorAll(e!=null?e:".tabs")]}function ee(e){for(let r of ue(e))fe(r)}function fe(e){var r;(r=z.get(e))==null||r(),be(e)}function be(e){var G;let r=e.querySelector(":scope > .tabs__list");if(!(r instanceof HTMLElement))return;let f=ve(e),E=Array.from(r.querySelectorAll(":scope > .tabs__item")),o=[];for(let t of E){let n=t.querySelector(":scope > .tabs__control"),i=t.querySelector(":scope > .tabs__tab");n instanceof HTMLInputElement&&i instanceof HTMLLabelElement&&o.push({item:t,control:n,label:i,text:(i.textContent||"").trim()||"Tab",iconMarkup:me(i),tabClassName:pe(i)})}if(o.length===0)return;let C=((G=o[0])==null?void 0:G.tabClassName)||"",L=document.createElement("div");L.className="tabs__tabs-row";let h=document.createElement("div");h.className="tabs__overflow";let m=document.createElement("button");m.type="button",m.className="btn tabs__overflow-toggle",y(m,C),m.setAttribute("aria-label","More tabs"),m.setAttribute("title","More tabs"),m.setAttribute("aria-haspopup","true"),m.setAttribute("aria-expanded","false"),m.innerHTML=\'<span aria-hidden="true">&#8942;</span>\';let H=document.createElement("div");H.className="tabs__overflow-menu",y(H,f),h.appendChild(m),h.appendChild(H);let T=document.createElement("div");T.className="tabs__tab-buttons";let B=new Map;for(let t=0;t<o.length;t+=1){let n=document.createElement("button");n.type="button",n.className="btn",y(n,o[t].tabClassName),Z(n,o[t].text,o[t].iconMarkup),n.disabled=o[t].control.disabled,n.setAttribute("aria-label",o[t].text),n.addEventListener("click",()=>q(t,"button")),T.appendChild(n),B.set(t,n)}L.appendChild(T),L.appendChild(h);let v=e.querySelector(":scope > .tabs__select-wrap"),w=v==null?void 0:v.querySelector(":scope > .tabs__select");if((!(v instanceof HTMLElement)||!(w instanceof HTMLSelectElement))&&(v=document.createElement("div"),v.className="tabs__select-wrap",w=document.createElement("select"),w.className="tabs__select",y(w,f),v.appendChild(w)),!w)return;let g=w;y(g,f),g.id||(g.id=he(e)),g.setAttribute("aria-label",r.getAttribute("aria-label")||"Tabs");let M=e.querySelector(":scope > .tabs__header");if(!(M instanceof HTMLElement)){let t=e.querySelector(".tabs__header");t instanceof HTMLElement&&(M=t,M.parentNode!==e&&e.insertBefore(M,r))}M instanceof HTMLElement&&M.parentNode===e?(e.insertBefore(L,M.nextSibling),e.insertBefore(v,L.nextSibling)):(e.insertBefore(L,r),e.insertBefore(v,L.nextSibling)),e.classList.add("tabs--enhanced");let A=window.matchMedia(X(Q.sm)),R=[],k=0,_=null,p=0,d=null,K=new Map;function P(){for(let t=0;t<o.length;t+=1)if(o[t].control.checked)return t;return-1}function I(){let t=P();if(t!==-1&&!o[t].control.disabled)return t;for(let n=0;n<o.length;n+=1)if(!o[n].control.disabled)return o[n].control.checked=!0,n;return-1}function q(t,n){let i=o[t];!i||i.control.disabled||(d={source:n,index:t},i.control.checked=!0,i.control.dispatchEvent(new Event("change",{bubbles:!0})))}function ne(){g.innerHTML="";for(let n=0;n<o.length;n+=1){let i=document.createElement("option");i.value=String(n),i.textContent=o[n].text,i.disabled=o[n].control.disabled,g.appendChild(i)}let t=I();t!==-1&&(g.value=String(t))}function oe(){H.innerHTML="";let t=I();for(let n of R){let i=document.createElement("button");i.type="button",i.className="btn tabs__overflow-option",y(i,o[n].tabClassName),Z(i,o[n].text,o[n].iconMarkup),i.disabled=o[n].control.disabled,i.setAttribute("aria-pressed",n===t?"true":"false"),i.addEventListener("click",()=>{q(n,"overflow"),O()}),H.appendChild(i)}h.classList.toggle("tabs__overflow--visible",R.length>0)}function O(){h.classList.remove("tabs__overflow--open"),m.setAttribute("aria-expanded","false")}function se(){h.classList.add("tabs__overflow--open"),m.setAttribute("aria-expanded","true")}function ie(){return e.getAttribute("data-mobile-select")==="true"&&A.matches}function re(){R=[];for(let[s,l]of B)l.hidden=!1,l.style.order=String(s);h.classList.remove("tabs__overflow--visible");let t=I();if(T.scrollWidth<=T.clientWidth)return;h.classList.add("tabs__overflow--visible");let n=T.getBoundingClientRect().width,i=Number.parseFloat(getComputedStyle(T).columnGap)||0,ae=o.map((s,l)=>{var c,u;return(u=(c=B.get(l))==null?void 0:c.getBoundingClientRect().width)!=null?u:0}),$=s=>{let l=0,c=s-1;for(let u=s;u<o.length;u+=1){let b=ae[u]||0,J=b+(l>0?i:0);if(l>0&&l+J>n)break;if(l===0&&b>n){c=u,l=b;break}l+=J,c=u}return c<s&&(c=s),{start:s,end:c}},U=s=>{let l=s.end,c=s.start,u=s;for(;c<o.length-1;){c+=1;let b=$(c);if(u=b,b.end>l||b.end===o.length-1)return p=c,b}return p=c,u},V=s=>{let l=s.start,c=s.start,u=s;for(;c>0;){c-=1;let b=$(c);if(u=b,b.start<l||b.start===0)return p=c,b}return p=c,u},x=t!==-1?t:o.length-1;p=Math.max(0,Math.min(p,o.length-1));let a=$(p);if(x<a.start)p=x,a=$(p);else if(x>a.end)for(;x>a.end&&p<o.length-1;)p+=1,a=$(p);if((d==null?void 0:d.source)==="button"&&d.index===a.end&&a.end<o.length-1){let s=U(a);x>=s.start&&x<=s.end&&(a=s)}if((d==null?void 0:d.source)==="button"&&d.index===a.start&&a.start>0&&(a=V(a)),(d==null?void 0:d.source)==="select"||(d==null?void 0:d.source)==="overflow")if(x===a.end&&a.end<o.length-1){let s=U(a);x>=s.start&&x<=s.end&&(a=s)}else x===a.start&&a.start>0&&(a=V(a));for(let s=0;s<o.length;s+=1)s>=a.start&&s<=a.end||R.push(s);for(let s of R){let l=B.get(s);l&&(l.hidden=!0,l.style.order=String(s+o.length))}d=null}function j(){let t=I();for(let[n,i]of B)i.classList.toggle("active",n===t),i.setAttribute("aria-selected",n===t?"true":"false");t!==-1&&(g.value=String(t)),oe()}function S(){if(e.classList.toggle("tabs--compact",ie()),e.classList.contains("tabs--compact")){O(),j();return}re(),j()}g.addEventListener("change",()=>{let t=Number.parseInt(g.value,10);Number.isFinite(t)&&q(t,"select")}),m.addEventListener("click",()=>{if(h.classList.contains("tabs__overflow--open")){O();return}se()});let W=t=>{let n=t.target;n instanceof Node&&(h.contains(n)||O())};document.addEventListener("click",W);for(let t=0;t<o.length;t+=1){let n=()=>{let i=P();!d&&i!==-1&&(d={source:"external",index:i}),S()};o[t].control.addEventListener("change",n),K.set(o[t].control,n)}let F=()=>{k||(k=window.requestAnimationFrame(()=>{k=0,S()}))};window.addEventListener("resize",F,{passive:!0}),typeof A.addEventListener=="function"&&A.addEventListener("change",S),typeof ResizeObserver!="undefined"&&(_=new ResizeObserver(()=>{F()}),_.observe(e),_.observe(L),_.observe(T));let D=new MutationObserver(S);D.observe(e,{attributes:!0,attributeFilter:["data-mobile-select"]}),ne(),S(),z.set(e,()=>{k&&(window.cancelAnimationFrame(k),k=0),window.removeEventListener("resize",F),typeof A.removeEventListener=="function"&&A.removeEventListener("change",S),_==null||_.disconnect(),D.disconnect(),document.removeEventListener("click",W);for(let[t,n]of K)t.removeEventListener("change",n);L.remove(),v.parentNode===e&&v.remove(),e.classList.remove("tabs--enhanced","tabs--compact"),z.delete(e)})}function me(e){let r=e.querySelector(".tabs__tab-icon");return r instanceof HTMLElement?r.outerHTML.trim():""}function pe(e){return te(e,["tabs__tab","tabs__tab--disabled"])}function Z(e,r,f){if(!f){e.textContent=r;return}e.innerHTML="";let E=document.createElement("template");E.innerHTML=f;let o=E.content.firstElementChild;o instanceof HTMLElement&&(o.setAttribute("aria-hidden","true"),o.classList.add("btn__icon"),e.appendChild(o));let C=document.createElement("span");C.className="btn__label tabs__tab-label",C.textContent=r,e.appendChild(C)}function he(e){var E;let r=(E=e.id)==null?void 0:E.trim();if(r)return`${r}-select`;let f=`tabs-select-${Y}`;return Y+=1,f}function y(e,r){let f=r.split(/\\s+/).filter(Boolean);f.length!==0&&e.classList.add(...f)}function ve(e){return te(e,["tabs","tabs--enhanced","tabs--compact"])}function te(e,r){let f=new Set(r);return[...e.classList].filter(E=>!f.has(E)).join(" ")}de(ee);globalThis.window.tsSsgTabs={refresh(e){ee(e)}};})();'
 }
diff --git a/packages/ts-page-scripts/src/tabs.ts b/packages/ts-page-scripts/src/tabs.ts
index 81063528..9281361c 100644
--- a/packages/ts-page-scripts/src/tabs.ts
+++ b/packages/ts-page-scripts/src/tabs.ts
@@ -232,7 +232,7 @@ function enhanceTabs(root: HTMLElement) {
   }
 
   function shouldUseCompact() {
-    return media.matches
+    return root.getAttribute('data-mobile-select') === 'true' && media.matches
   }
 
   function computeHiddenIndexes() {
@@ -446,6 +446,12 @@ function enhanceTabs(root: HTMLElement) {
     resizeObserver.observe(buttonWrap)
   }
 
+  const mobileSelectObserver = new MutationObserver(applyLayout)
+  mobileSelectObserver.observe(root, {
+    attributes: true,
+    attributeFilter: ['data-mobile-select'],
+  })
+
   syncSelect()
   applyLayout()
 
@@ -459,6 +465,7 @@ function enhanceTabs(root: HTMLElement) {
       media.removeEventListener('change', applyLayout)
     }
     resizeObserver?.disconnect()
+    mobileSelectObserver.disconnect()
     document.removeEventListener('click', onDocumentClick)
     for (const [control, onControlChange] of controlChangeHandlers) {
       control.removeEventListener('change', onControlChange)

From 115d5758368b7eb6bee48ffffc4c7b895294f804 Mon Sep 17 00:00:00 2001
From: Ahmed Yasin Koculu <koculu@gmail.com>
Date: Thu, 8 Oct 2026 21:54:56 +0200
Subject: [PATCH 2/2] Simplify expression.

---
 .../ts-components/src/standard/tabs/tabs.test.ts     | 12 ++++++++----
 packages/ts-components/src/standard/tabs/tabs.ts     |  2 +-
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/packages/ts-components/src/standard/tabs/tabs.test.ts b/packages/ts-components/src/standard/tabs/tabs.test.ts
index ca658c4e..39127486 100644
--- a/packages/ts-components/src/standard/tabs/tabs.test.ts
+++ b/packages/ts-components/src/standard/tabs/tabs.test.ts
@@ -9,7 +9,7 @@ import { defineTabsComponents } from './tabs'
 
 describe('Tabs rendering', () => {
   it.each([
-    [undefined, 'false'],
+    [undefined, null],
     [true, 'true'],
     [false, 'false'],
   ])(
@@ -31,7 +31,11 @@ describe('Tabs rendering', () => {
             }),
           },
         )
-        expect(html).toContain(`data-mobile-select="${expected}"`)
+        if (expected === null) {
+          expect(html).not.toContain('data-mobile-select=')
+        } else {
+          expect(html).toContain(`data-mobile-select="${expected}"`)
+        }
       } finally {
         cleanup()
       }
@@ -66,13 +70,13 @@ describe('Tabs rendering', () => {
       const root = document.querySelector('#configurable-tabs')
       const other = document.querySelector('#default-tabs')
       expect(root?.getAttribute('data-mobile-select')).toBe('false')
-      expect(other?.getAttribute('data-mobile-select')).toBe('false')
+      expect(other?.getAttribute('data-mobile-select')).toBeNull()
 
       mobileSelect(true)
       expect(root?.getAttribute('data-mobile-select')).toBe('true')
       mobileSelect(false)
       expect(root?.getAttribute('data-mobile-select')).toBe('false')
-      expect(other?.getAttribute('data-mobile-select')).toBe('false')
+      expect(other?.getAttribute('data-mobile-select')).toBeNull()
       expect(selectedTab()).toBe('details')
       expect(
         document.querySelector<HTMLInputElement>('#details')?.checked,
diff --git a/packages/ts-components/src/standard/tabs/tabs.ts b/packages/ts-components/src/standard/tabs/tabs.ts
index b7498324..fea83549 100644
--- a/packages/ts-components/src/standard/tabs/tabs.ts
+++ b/packages/ts-components/src/standard/tabs/tabs.ts
@@ -49,7 +49,7 @@ export interface TabPane {
   tabClasses?: ComputedRef<string>
 }
 
-const tabsTemplate = html`<section class="tabs" :class="classes" :data-mobile-select="mobileSelect === true ? 'true' : 'false'">
+const tabsTemplate = html`<section class="tabs" :class="classes" :data-mobile-select="mobileSelect">
   <slot name="header"></slot>
   <div class="tabs__list" role="tablist" :aria-label="ariaLabel || 'Tabs'">
     <slot></slot>