@sveltia/ui 0.26.2 → 0.26.4

package/dist/components/select/combobox.svelte

@@ -194,7 +194,6 @@
   class="combobox"
   {anchor}
   {position}
-  showBackdrop={true}
   touchOptimized={true}
   bind:open={isPopupOpen}
   onOpen={() => {
@@ -252,29 +251,6 @@
   position: relative;
   min-width: var(--sui-combobox-min-width, calc(var(--sui-option-height) * 5));
 }
-.combobox :global(.icon) {
-  font-size: var(--sui-font-size-xx-large);
-  opacity: 0.5;
-}
-.combobox > :global(.icon) {
-  position: absolute;
-  inset: 8px auto auto 8px;
-  z-index: 1;
-}
-.combobox > :global(button) {
-  position: absolute;
-  inset: 0 0 auto auto;
-  z-index: 1;
-  margin: 0 !important;
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-}
-.combobox:not(.editable) > :global(button) {
-  background-color: transparent !important;
-}
-.combobox > :global(button[tabindex="-1"]) {
-  pointer-events: none;
-}
 .combobox div[role=combobox] {
   display: flex;
   align-items: center;
@@ -297,7 +273,7 @@
 .combobox div[role=combobox]:not(.selected) {
   font-style: italic;
 }
-.combobox div[role=combobox]:hover, .combobox div[role=combobox]:focus {
+.combobox div[role=combobox]:is(:hover, :focus) {
   background-color: var(--sui-hover-background-color);
 }
 .combobox div[role=combobox][aria-invalid=true] {
@@ -306,6 +282,29 @@
 .combobox div[role=combobox] .label {
   width: 100%;
 }
+.combobox :global(.icon) {
+  font-size: var(--sui-font-size-xx-large);
+  opacity: 0.5;
+}
+.combobox > :global(.icon) {
+  position: absolute;
+  inset: 8px auto auto 8px;
+  z-index: 1;
+}
+.combobox > :global(button) {
+  position: absolute;
+  inset: 0 0 auto auto;
+  z-index: 1;
+  margin: 0 !important;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+.combobox > :global(button[tabindex="-1"]) {
+  pointer-events: none;
+}
+.combobox :global(:not(.editable)) > :global(button) {
+  background-color: transparent !important;
+}
 .combobox :global(.text-input) {
   margin: 0 !important;
   width: 100% !important;
@@ -314,7 +313,7 @@
   padding: 0 32px 0 8px;
   width: 0;
 }
-.combobox + :global([role="listbox"]) {
+.combobox + :global([role=listbox]) {
   position: fixed;
   z-index: 100;
   border-radius: var(--sui-control-medium-border-radius);
@@ -326,7 +325,7 @@
   /* Add .1s delay before the position can be determined */
   transition: opacity 100ms 100ms;
 }
-.combobox + :global([role="listbox"]:not(.open)) {
+.combobox + :global([role=listbox]:not(.open)) {
   opacity: 0;
   pointer-events: none;
 }

package/dist/components/table/table-body.svelte

@@ -41,7 +41,7 @@
   {#if label}
     <div role="row" class="row-group-caption">
       <!-- We need `colspan` here but cannot place `<th>` under `<div>`, so use a hack -->
-      <svelte:element this={'th'} role="rowheader" id="{id}-label" colspan="9999">
+      <svelte:element this={'th'} role="columnheader" id="{id}-label" colspan="9999">
         {label}
       </svelte:element>
     </div>
@@ -57,7 +57,7 @@
   display: table-row;
 }
 
-[role=rowheader] {
+[role=columnheader] {
   display: table-cell;
   padding: 8px;
   color: var(--sui-secondary-foreground-color);

package/dist/components/table/table.svelte

@@ -36,12 +36,10 @@
   margin: var(--sui-focus-ring-width);
   width: calc(100% - var(--sui-focus-ring-width) * 2);
 }
-.table:global(.data) {
+.table.data {
   border-collapse: collapse;
 }
-.table:global(.data) :global(.table-col-header),
-.table:global(.data) :global(.table-row-header),
-.table:global(.data) :global(.table-cell) {
+.table.data :global(:is(.table-col-header, .table-row-header, .table-cell)) {
   border: 1px solid var(--sui-secondary-border-color);
   padding: 8px 8px;
 }</style>

package/dist/components/text-editor/lexical-root.svelte

@@ -192,17 +192,13 @@
 .lexical-root :global([data-lexical-text=true]) {
   cursor: text;
 }
-.lexical-root :global(th) > :global(p),
-.lexical-root :global(td) > :global(p) {
+.lexical-root :global(:is(th, td)) > :global(p) {
   margin: 0;
   white-space: normal;
   word-break: normal;
 }
 
-:root[data-theme=light] .lexical-root :global(.token.comment),
-:root[data-theme=light] .lexical-root :global(.token.prolog),
-:root[data-theme=light] .lexical-root :global(.token.doctype),
-:root[data-theme=light] .lexical-root :global(.token.cdata) {
+:root[data-theme=light] .lexical-root :global(.token:is(.comment, .prolog, .doctype, .cdata)) {
   color: slategray;
 }
 :root[data-theme=light] .lexical-root :global(.token.punctuation) {
@@ -211,96 +207,53 @@
 :root[data-theme=light] .lexical-root :global(.token.namespace) {
   opacity: 0.7;
 }
-:root[data-theme=light] .lexical-root :global(.token.property),
-:root[data-theme=light] .lexical-root :global(.token.tag),
-:root[data-theme=light] .lexical-root :global(.token.boolean),
-:root[data-theme=light] .lexical-root :global(.token.number),
-:root[data-theme=light] .lexical-root :global(.token.constant),
-:root[data-theme=light] .lexical-root :global(.token.symbol),
-:root[data-theme=light] .lexical-root :global(.token.deleted) {
+:root[data-theme=light] .lexical-root :global(.token:is(.property, .tag, .boolean, .number, .constant, .symbol, .deleted)) {
   color: #905;
 }
-:root[data-theme=light] .lexical-root :global(.token.selector),
-:root[data-theme=light] .lexical-root :global(.token.attr-name),
-:root[data-theme=light] .lexical-root :global(.token.string),
-:root[data-theme=light] .lexical-root :global(.token.char),
-:root[data-theme=light] .lexical-root :global(.token.builtin),
-:root[data-theme=light] .lexical-root :global(.token.inserted) {
+:root[data-theme=light] .lexical-root :global(.token:is(.selector, .attr-name, .string, .char, .builtin, .inserted)) {
   color: #690;
 }
-:root[data-theme=light] .lexical-root :global(.token.operator),
-:root[data-theme=light] .lexical-root :global(.token.entity),
-:root[data-theme=light] .lexical-root :global(.token.url),
-:root[data-theme=light] .lexical-root :global(.language-css) :global(.token.string),
-:root[data-theme=light] .lexical-root :global(.style) :global(.token.string) {
+:root[data-theme=light] .lexical-root :global(.token:is(.operator, .entity, .url)), :root[data-theme=light] .lexical-root :global(.language-css) :global(.token.string), :root[data-theme=light] .lexical-root :global(.style) :global(.token.string) {
   color: #9a6e3a;
 }
-:root[data-theme=light] .lexical-root :global(.token.atrule),
-:root[data-theme=light] .lexical-root :global(.token.attr-value),
-:root[data-theme=light] .lexical-root :global(.token.keyword) {
+:root[data-theme=light] .lexical-root :global(.token:is(.atrule, .attr-value, .keyword)) {
   color: #07a;
 }
-:root[data-theme=light] .lexical-root :global(.token.function),
-:root[data-theme=light] .lexical-root :global(.token.class-name) {
+:root[data-theme=light] .lexical-root :global(.token:is(.function, .class-name)) {
   color: #dd4a68;
 }
-:root[data-theme=light] .lexical-root :global(.token.regex),
-:root[data-theme=light] .lexical-root :global(.token.important),
-:root[data-theme=light] .lexical-root :global(.token.variable) {
+:root[data-theme=light] .lexical-root :global(.token:is(.regex, .important, .variable)) {
   color: #e90;
 }
 
-:root[data-theme=dark] .lexical-root :global(.token.comment),
-:root[data-theme=dark] .lexical-root :global(.token.block-comment),
-:root[data-theme=dark] .lexical-root :global(.token.prolog),
-:root[data-theme=dark] .lexical-root :global(.token.doctype),
-:root[data-theme=dark] .lexical-root :global(.token.cdata) {
+:root[data-theme=dark] .lexical-root :global(.token:is(.comment, .block-comment, .prolog, .doctype, .cdata)) {
   color: #999;
 }
 :root[data-theme=dark] .lexical-root :global(.token.punctuation) {
   color: #ccc;
 }
-:root[data-theme=dark] .lexical-root :global(.token.tag),
-:root[data-theme=dark] .lexical-root :global(.token.attr-name),
-:root[data-theme=dark] .lexical-root :global(.token.namespace),
-:root[data-theme=dark] .lexical-root :global(.token.deleted) {
+:root[data-theme=dark] .lexical-root :global(.token:is(.tag, .attr-name, .namespace, .deleted)) {
   color: #e2777a;
 }
 :root[data-theme=dark] .lexical-root :global(.token.function-name) {
   color: #6196cc;
 }
-:root[data-theme=dark] .lexical-root :global(.token.boolean),
-:root[data-theme=dark] .lexical-root :global(.token.number),
-:root[data-theme=dark] .lexical-root :global(.token.function) {
+:root[data-theme=dark] .lexical-root :global(.token:is(.boolean, .number, .function)) {
   color: #f08d49;
 }
-:root[data-theme=dark] .lexical-root :global(.token.property),
-:root[data-theme=dark] .lexical-root :global(.token.class-name),
-:root[data-theme=dark] .lexical-root :global(.token.constant),
-:root[data-theme=dark] .lexical-root :global(.token.symbol) {
+:root[data-theme=dark] .lexical-root :global(.token:is(.property, .class-name, .constant, .symbol)) {
   color: #f8c555;
 }
-:root[data-theme=dark] .lexical-root :global(.token.selector),
-:root[data-theme=dark] .lexical-root :global(.token.important),
-:root[data-theme=dark] .lexical-root :global(.token.atrule),
-:root[data-theme=dark] .lexical-root :global(.token.keyword),
-:root[data-theme=dark] .lexical-root :global(.token.builtin) {
+:root[data-theme=dark] .lexical-root :global(.token:is(.selector, .important, .atrule, .keyword, .builtin)) {
   color: #cc99cd;
 }
-:root[data-theme=dark] .lexical-root :global(.token.string),
-:root[data-theme=dark] .lexical-root :global(.token.char),
-:root[data-theme=dark] .lexical-root :global(.token.attr-value),
-:root[data-theme=dark] .lexical-root :global(.token.regex),
-:root[data-theme=dark] .lexical-root :global(.token.variable) {
+:root[data-theme=dark] .lexical-root :global(.token:is(.string, .char, .attr-value, .regex, .variable)) {
   color: #7ec699;
 }
-:root[data-theme=dark] .lexical-root :global(.token.operator),
-:root[data-theme=dark] .lexical-root :global(.token.entity),
-:root[data-theme=dark] .lexical-root :global(.token.url) {
+:root[data-theme=dark] .lexical-root :global(.token:is(.operator, .entity, .url)) {
   color: #67cdcc;
 }
-:root[data-theme=dark] .lexical-root :global(.token.important),
-:root[data-theme=dark] .lexical-root :global(.token.bold) {
+:root[data-theme=dark] .lexical-root :global(.token:is(.important, .bold)) {
   font-weight: bold;
 }
 :root[data-theme=dark] .lexical-root :global(.token.italic) {

package/dist/components/text-editor/toolbar/toolbar-wrapper.svelte

@@ -37,7 +37,7 @@
 <style>.wrapper {
   display: contents;
 }
-.wrapper :global([role="toolbar"]) {
+.wrapper :global([role=toolbar]) {
   position: sticky;
   top: 0;
   z-index: 1;
@@ -51,7 +51,7 @@
   background-color: var(--sui-tertiary-background-color);
 }
 @media (width < 768px) {
-  .wrapper :global([role="toolbar"]) {
+  .wrapper :global([role=toolbar]) {
     flex-wrap: wrap;
     height: auto;
   }

package/dist/components/text-field/number-input.svelte

@@ -210,18 +210,18 @@
   width: stretch;
   min-width: 0;
 }
-.number-input :global(:not(:first-child) input) {
+.number-input :global(:not(:first-child)) :global(input) {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
-.number-input :global(:not(:last-child) input) {
+.number-input :global(:not(:last-child)) :global(input) {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
-.number-input:not(.disabled) :global(button[aria-disabled="true"]) {
+.number-input :global(:not(.disabled)) :global(button[aria-disabled=true]) {
   filter: grayscale(0) opacity(1);
 }
-.number-input:not(.disabled) :global(button[aria-disabled="true"]) :global(*) {
+.number-input :global(:not(.disabled)) :global(button[aria-disabled=true]) :global(*) {
   filter: grayscale(1) opacity(0.35);
 }
 .number-input :global(.text-input) {
@@ -245,13 +245,13 @@
   width: 100%;
   height: 50%;
 }
-.buttons :global(button):first-of-type {
+.buttons :global(button:first-of-type) {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
   border-bottom-left-radius: 0;
   border-width: 1px 0 0 1px;
 }
-.buttons :global(button):last-of-type {
+.buttons :global(button:last-of-type) {
   border-top-left-radius: 0;
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;

package/dist/components/text-field/password-input.svelte

@@ -129,7 +129,7 @@
   width: var(--sui-textbox-height);
   aspect-ratio: 1/1;
 }
-.password-input :global(button):last-child {
+.password-input :global(button:last-child) {
   border-radius: 0 4px 4px 0;
 }
 .password-input :global(button) :global(.icon) {

package/dist/components/text-field/search-bar.svelte

@@ -129,10 +129,6 @@
   width: stretch;
   min-width: 0;
 }
-.search-bar :global(.icon) {
-  font-size: calc(var(--sui-textbox-height) * 0.6);
-  opacity: 0.5;
-}
 .search-bar > span {
   position: absolute;
   inset: 0 auto 0 0;
@@ -143,6 +139,10 @@
   width: var(--sui-button-medium-height);
   height: var(--sui-button-medium-height);
 }
+.search-bar :global(.icon) {
+  font-size: calc(var(--sui-textbox-height) * 0.6);
+  opacity: 0.5;
+}
 .search-bar > :global(button) {
   position: absolute;
   inset: 0 0 auto auto;

package/dist/components/text-field/text-area.svelte

@@ -94,8 +94,7 @@
   min-width: 0;
 }
 
-textarea,
-.clone {
+:is(textarea, .clone) {
   grid-area: 1/1/2/2;
   display: block;
   margin: 0;
@@ -118,19 +117,15 @@ textarea,
   word-spacing: var(--sui-word-spacing-normal, normal);
   transition: all 200ms;
 }
-textarea.resizing,
-.clone.resizing {
+:is(textarea, .clone).resizing {
   transition-duration: 0ms;
 }
-textarea:focus,
-.clone:focus {
+:is(textarea, .clone):focus {
   border-color: var(--sui-textbox-border-color-focus, var(--sui-primary-accent-color));
   color: var(--sui-textbox-foreground-color-focus, var(--sui-textbox-foreground-color));
   background-color: var(--sui-textbox-background-color-focus, var(--sui-textbox-background-color));
 }
-textarea:disabled, textarea:read-only,
-.clone:disabled,
-.clone:read-only {
+:is(textarea, .clone):is(:disabled, :read-only) {
   background-color: var(--sui-disabled-background-color);
 }
 

package/dist/components/text-field/text-input.svelte

@@ -97,8 +97,7 @@
   min-width: 0;
 }
 
-input:-webkit-autofill,
-input:-webkit-autofill:focus {
+input:is(:-webkit-autofill, :-webkit-autofill:focus) {
   transition: background-color 0s 600000s, color 0s 600000s;
 }
 
@@ -133,7 +132,7 @@ input:read-only {
   color: var(--sui-tertiary-foreground-color);
   border-color: var(--sui-textbox-border-color) !important;
 }
-input:disabled, input:read-only {
+input:is(:disabled, :read-only) {
   background-color: var(--sui-disabled-background-color);
 }
 input[aria-invalid=true] {
@@ -147,7 +146,7 @@ input ~ :global(button) {
   height: var(--sui-textbox-height);
   aspect-ratio: 1/1;
 }
-input ~ :global(button):last-child {
+input ~ :global(button:last-child) {
   border-radius: 0 4px 4px 0;
 }
 input ~ :global(button) :global(.icon) {

package/dist/components/toast/toast.svelte

@@ -167,22 +167,22 @@
   opacity: 0;
 }
 .toast.top-left {
-  inset: 16px auto auto 16px;
+  inset: 0 auto auto 0;
 }
 .toast.top-center {
-  inset: 16px auto auto 50%;
+  inset: 0 auto auto 50%;
   transform: translateX(-50%);
 }
 .toast.top-right {
-  inset: 16px 16px auto auto;
+  inset: 0 0 auto auto;
 }
 .toast.bottom-left {
-  inset: auto auto 16px 16px;
+  inset: auto auto 0 0;
 }
 .toast.bottom-center {
-  inset: auto auto 16px 50%;
+  inset: auto auto 0 50%;
   transform: translateX(-50%);
 }
 .toast.bottom-right {
-  inset: auto 16px 16px auto;
+  inset: auto 0 0 auto;
 }</style>

package/dist/components/toolbar/toolbar.svelte

@@ -74,8 +74,7 @@
   flex-direction: column;
   width: var(--toolbar-size);
 }
-[role=toolbar] :global(button[role="button"][aria-pressed="true"]),
-[role=toolbar] :global(button[role="button"][aria-checked="true"]) {
+[role=toolbar] :global(button[role=button]:is([aria-pressed=true], [aria-checked=true])) {
   background-color: var(--sui-selected-background-color);
 }
 [role=toolbar] :global(h2) {
@@ -88,7 +87,7 @@
   min-width: 0;
   font-size: var(--sui-font-size-x-large);
 }
-[role=toolbar] :global(h2):first-child {
+[role=toolbar] :global(h2:first-child) {
   padding-inline-start: 12px;
 }
 [role=toolbar] :global(h2) :global(span:not(.sui.truncated-text)) {
@@ -96,11 +95,11 @@
   font-weight: var(--sui-font-weight-normal, normal);
   opacity: 0.8;
 }
-[role=toolbar] :global(.divider[aria-orientation="horizontal"]) {
+[role=toolbar] :global(.divider[aria-orientation=horizontal]) {
   margin: 0 4px;
   width: calc(100% - 8px);
 }
-[role=toolbar] :global(.divider[aria-orientation="vertical"]) {
+[role=toolbar] :global(.divider[aria-orientation=vertical]) {
   margin: 4px 0;
   height: calc(100% - 8px);
 }

package/dist/components/util/app-shell.svelte

@@ -453,12 +453,7 @@
   outline-color: var(--sui-primary-accent-color-translucent);
   z-index: 2;
 }
-:global(h1),
-:global(h2),
-:global(h3),
-:global(h4),
-:global(h5),
-:global(h6) {
+:global(:is(h1, h2, h3, h4, h5, h6)) {
   margin: 0;
   font-weight: var(--sui-font-weight-bold, bold);
   line-height: var(--sui-line-height-default);
@@ -489,25 +484,20 @@
   text-decoration: none;
   text-underline-offset: 2px;
 }
-:global(a:hover), :global(a:focus), :global(a:active) {
+:global(a:is(:hover, :focus, :active)) {
   text-decoration: underline;
 }
-:global(:root[data-underline-links="true"]) :global(a), :global(:host[data-underline-links="true"]) :global(a) {
+:is(:root, :host)[data-underline-links=true] :global(a) {
   text-decoration: underline;
 }
-:global(p),
-:global(ul),
-:global(ol),
-:global(dl) {
+:global(:is(p, ul, ol, dl)) {
   margin: var(--sui-paragraph-margin) 0;
   line-height: var(--sui-line-height-comfortable);
 }
-:global(ul),
-:global(ol) {
+:global(:is(ul, ol)) {
   padding-inline: 2em;
 }
-:global(code),
-:global(pre) {
+:global(:is(code, pre)) {
   border-radius: 4px;
   background-color: var(--sui-code-background-color);
   font-family: var(--sui-font-family-monospace);
@@ -526,8 +516,7 @@
 :global(table) {
   border-collapse: collapse;
 }
-:global(th),
-:global(td) {
+:global(:is(th, td)) {
   border: 1px solid var(--sui-textbox-border-color);
   padding: 8px;
 }
@@ -536,29 +525,17 @@
   border-inline-start: 4px solid var(--sui-textbox-border-color);
   padding-inline-start: 12px;
 }
-:global(.disabled),
-:global(.readonly),
-:global([aria-disabled=true]),
-:global([aria-readonly=true]),
-:global([inert]:not(body)) {
+:global(:is(.disabled, .readonly, [aria-disabled=true], [aria-readonly=true], [inert]):not(body)) {
   cursor: default;
   pointer-events: none;
   -webkit-user-select: none;
   user-select: none;
   filter: grayscale(1) opacity(0.35);
 }
-:global(.disabled) :global(*),
-:global(.readonly) :global(*),
-:global([aria-disabled=true]) :global(*),
-:global([aria-readonly=true]) :global(*),
-:global([inert]:not(body)) :global(*) {
+:global(:is(.disabled, .readonly, [aria-disabled=true], [aria-readonly=true], [inert]):not(body)) :global(*) {
   filter: grayscale(0) opacity(1);
 }
-:global(.disabled) :global(*),
-:global(.readonly) :global(*),
-:global([aria-disabled=true]) :global(*),
-:global([aria-readonly=true]) :global(*),
-:global([inert]) :global(*) {
+:global(:is(.disabled, .readonly, [aria-disabled=true], [aria-readonly=true], [inert])) :global(*) {
   cursor: default;
   pointer-events: none;
   -webkit-user-select: none;

package/dist/components/util/modal.svelte

@@ -36,12 +36,15 @@
     /* eslint-enable prefer-const */
   } = $props();
 
+  let opening = false;
+  let closing = false;
+
   /**
    * Close the modal.
    * @param {string} returnValue Return value to be used for `<dialog>`.
    */
   export const close = (returnValue) => {
-    if (!dialog) {
+    if (!dialog || !dialog.open || opening || closing) {
       return;
     }
 
@@ -77,10 +80,15 @@
    * Show the modal.
    */
   const openDialog = async () => {
-    if (!dialog || dialog?.open) {
+    if (!dialog || dialog?.open || opening || closing) {
+      if (closing) {
+        open = false;
+      }
+
       return;
     }
 
+    opening = true;
     onOpening?.(new CustomEvent('Opening'));
     showContent = true;
     dialog.showModal();
@@ -89,18 +97,24 @@
     setOpenClass = true;
     await waitForTransition();
     setActiveClass = true;
+    opening = false;
   };
 
   /**
    * Hide the modal.
    */
   const closeDialog = async () => {
-    if (!dialog || !dialog.open) {
+    if (!dialog || !dialog.open || opening || closing) {
+      if (opening) {
+        open = false;
+      }
+
       return;
     }
 
     const { returnValue } = dialog;
 
+    closing = true;
     onClosing?.(new CustomEvent('Closing'));
     // Prevent a button behind the `<dialog>` from being clicked erroneously (Svelte bug)
     document.body.inert = true;
@@ -121,6 +135,7 @@
 
     onClose?.(new CustomEvent('Close', { detail: { returnValue } }));
     dialog.returnValue = '';
+    closing = false;
   };
 
   $effect(() => {
@@ -162,8 +177,7 @@
         lightDismiss &&
         /** @type {HTMLElement | undefined} */ (target)?.matches('dialog')
       ) {
-        dialog.returnValue = 'cancel';
-        open = false;
+        close('cancel');
       }
     }}
     oncancel={(event) => {
@@ -171,8 +185,7 @@
 
       // Escape key is pressed
       if (dialog && escapeDismiss) {
-        dialog.returnValue = 'cancel';
-        open = false;
+        close('cancel');
       }
     }}
   >

package/dist/components/util/popup.svelte

@@ -44,7 +44,7 @@
     hovered = $bindable(false),
     content = $bindable(undefined),
     class: className,
-    showBackdrop = false,
+    showBackdrop = undefined,
     anchor,
     position = 'bottom-left',
     positionBaseElement = undefined,

package/dist/services/group.svelte.js

@@ -109,9 +109,9 @@ class Group {
 
     allMembers.forEach((element, index) => {
       // Select the first one if no member has the `selected` attribute
-      const isSelected = defaultSelected
-        ? element === defaultSelected
-        : this.selectFirst && index === 0;
+      const isSelected =
+        element.getAttribute(this.childSelectedAttr) === 'true' ||
+        (defaultSelected ? element === defaultSelected : this.selectFirst && index === 0);
 
       const controlTarget = /** @type {HTMLElement | null} */ (
         document.querySelector(`#${element.getAttribute('aria-controls')}`)