tosijs-ui 1.5.21 → 1.5.23

package/dist/menu.js

@@ -995,8 +995,8 @@ export const createMenuAction = (item, options) => {
     if (item.tooltip) {
         menuItem.dataset.tooltip = item.tooltip;
     }
-    if (options.role === 'listbox' && checked) {
-        menuItem.setAttribute('aria-selected', 'true');
+    if (options.role === 'listbox') {
+        menuItem.toggleAttribute('aria-selected', checked !== false);
     }
     if (item?.enabled && !item.enabled()) {
         menuItem.setAttribute('disabled', '');

package/dist/segmented.d.ts

@@ -47,11 +47,11 @@ export declare class TosiSegmented extends WebComponent {
             boxShadow: string;
             borderRadius: string;
         };
-        ':host label:has(:checked)': {
+        ':host label.current': {
             color: string;
             background: string;
         };
-        ':host label:has(:checked):focus': {
+        ':host label.current:focus': {
             boxShadow: string;
         };
         ':host svg': {
@@ -86,6 +86,7 @@ export declare class TosiSegmented extends WebComponent {
             opacity: string;
         };
     };
+    private syncCurrent;
     private valueChanged;
     handleChange: () => void;
     handleKey: (event: KeyboardEvent) => void;

package/dist/segmented.js

@@ -218,11 +218,15 @@ export class TosiSegmented extends WebComponent {
             boxShadow: varDefault.segmentedFocusShadow(`inset 0 0 0 2px ${varDefault.segmentedOptionCurrentBackground('#44a')}`),
             borderRadius: varDefault.segmentedOptionsBorderRadius('8px'),
         },
-        ':host label:has(:checked)': {
+        // Selection highlight is driven by an explicit `.current` class rather than
+        // `label:has(:checked)`. Firefox does not reliably re-evaluate `:has(:checked)`
+        // when a descendant radio's checked state changes via interaction, leaving the
+        // previously-selected segment highlighted (works in Chrome/Safari).
+        ':host label.current': {
             color: varDefault.segmentedOptionCurrentColor('#eee'),
             background: varDefault.segmentedOptionCurrentBackground('#44a'),
         },
-        ':host label:has(:checked):focus': {
+        ':host label.current:focus': {
             boxShadow: varDefault.segmentedCurrentFocusShadow(`inset 0 0 0 2px ${varDefault.segmentedOptionCurrentColor('#eee')}`),
         },
         ':host svg': {
@@ -257,6 +261,16 @@ export class TosiSegmented extends WebComponent {
             opacity: varDefault.segmentedPlaceholderOpacity(0.75),
         },
     };
+    // Reflects each radio/checkbox's checked state onto its containing label as a
+    // `.current` class so the selection highlight updates reliably (see note on the
+    // `.current` style rule).
+    syncCurrent() {
+        const { options } = this.parts;
+        options.querySelectorAll('label').forEach((label) => {
+            const input = label.querySelector('input');
+            label.classList.toggle('current', Boolean(input && input.checked));
+        });
+    }
     valueChanged = false;
     handleChange = () => {
         const { options, custom } = this.parts;
@@ -282,6 +296,7 @@ export class TosiSegmented extends WebComponent {
                 this.value = custom.value;
             }
         }
+        this.syncCurrent();
         this.valueChanged = true;
     };
     handleKey = (event) => {
@@ -386,6 +401,7 @@ export class TosiSegmented extends WebComponent {
             custom.placeholder = this.placeholder;
             options.append(custom);
         }
+        this.syncCurrent();
     }
 }
 /** @deprecated Use TosiSegmented instead */

package/dist/tab-selector.d.ts

@@ -50,7 +50,7 @@ export declare class TosiTabs extends WebComponent {
             display: string;
             alignItems: string;
         };
-        ':host .tabs > [aria-selected="true"]': {
+        ':host .tabs > [aria-selected]': {
             '--text-color': string;
             color: string;
         };

package/dist/tab-selector.js

@@ -209,7 +209,7 @@ export class TosiTabs extends WebComponent {
             display: 'flex',
             alignItems: 'baseline',
         },
-        ':host .tabs > [aria-selected="true"]': {
+        ':host .tabs > [aria-selected]': {
             '--text-color': vars.tosiTabsSelectedColor,
             color: vars.textColor,
         },
@@ -342,15 +342,12 @@ export class TosiTabs extends WebComponent {
         for (let i = 0; i < tabBodies.length; i++) {
             const tabBody = tabBodies[i];
             const tab = tabs.children[i];
-            if (this.value === Number(i)) {
-                tab.setAttribute('aria-selected', 'true');
+            const isSelected = this.value === Number(i);
+            tab.toggleAttribute('aria-selected', isSelected);
+            tabBody.toggleAttribute('hidden', !isSelected);
+            if (isSelected) {
                 selected.style.marginLeft = `${tab.offsetLeft - tabs.offsetLeft}px`;
                 selected.style.width = `${tab.offsetWidth}px`;
-                tabBody.toggleAttribute('hidden', false);
-            }
-            else {
-                tab.toggleAttribute('aria-selected', false);
-                tabBody.toggleAttribute('hidden', true);
             }
         }
     }