@sveltia/ui 0.26.2 → 0.26.3

package/dist/components/button/button.svelte

@@ -124,23 +124,20 @@
   cursor: pointer;
   transition: all 200ms;
 }
-button > :global(*) {
-  pointer-events: none;
-}
-button:global(:not(:disabled):focus-visible) {
-  z-index: 1;
-}
 button[hidden] {
   display: none !important;
 }
-button:global(.primary), button:global(.secondary), button:global(.tertiary), button:global(.ghost) {
+button:not(:disabled):focus-visible {
+  z-index: 1;
+}
+button:is(.primary, .secondary, .tertiary, .ghost) {
   justify-content: center;
   border-width: 1px;
 }
-button:global(.primary) :global(.label:only-child), button:global(.secondary) :global(.label:only-child), button:global(.tertiary) :global(.label:only-child), button:global(.ghost) :global(.label:only-child) {
+button:is(.primary, .secondary, .tertiary, .ghost) .label:only-child {
   padding: 0 4px;
 }
-button:global(.primary) {
+button.primary {
   border-width: var(--sui-button-primary-border-width, 1px);
   border-style: var(--sui-button-primary-border-style, solid);
   border-color: var(--sui-button-primary-border-color, var(--sui-primary-accent-color));
@@ -148,15 +145,15 @@ button:global(.primary) {
   background-color: var(--sui-button-primary-background-color, var(--sui-primary-accent-color));
   font-weight: var(--sui-button-primary-font-weight, var(--sui-font-weight-normal, normal));
 }
-button:global(.primary):hover, button:global(.primary):focus-visible, button:global(.primary)[aria-expanded=true] {
+button.primary:is(:hover, :focus-visible, [aria-expanded=true]) {
   color: var(--sui-button-primary-foreground-color-focus, var(--sui-button-primary-foreground-color, var(--sui-primary-accent-color-inverted)));
   background-color: var(--sui-button-primary-background-color-focus, var(--sui-primary-accent-color-light));
 }
-button:global(.primary):active {
+button.primary:active {
   color: var(--sui-button-primary-foreground-color-active, var(--sui-button-primary-foreground-color, var(--sui-primary-accent-color-inverted)));
   background-color: var(--sui-button-primary-background-color-active, var(--sui-primary-accent-color-dark));
 }
-button:global(.secondary) {
+button.secondary {
   border-width: var(--sui-button-secondary-border-width, 1px);
   border-style: var(--sui-button-secondary-border-style, solid);
   border-color: var(--sui-button-secondary-border-color, var(--sui-primary-accent-color));
@@ -164,19 +161,19 @@ button:global(.secondary) {
   background-color: var(--sui-button-secondary-background-color, var(--sui-button-background-color));
   font-weight: var(--sui-button-secondary-font-weight, var(--sui-font-weight-normal, normal));
 }
-button:global(.secondary):hover, button:global(.secondary):focus-visible, button:global(.secondary)[aria-expanded=true] {
+button.secondary:is(:hover, :focus-visible, [aria-expanded=true]) {
   color: var(--sui-button-secondary-foreground-color-focus, var(--sui-button-secondary-foreground-color, var(--sui-primary-accent-color-text)));
   background-color: var(--sui-button-secondary-background-color-focus, var(--sui-hover-background-color));
 }
-button:global(.secondary):active {
+button.secondary:active {
   color: var(--sui-button-secondary-foreground-color-active, var(--sui-button-secondary-foreground-color, var(--sui-primary-accent-color-text)));
   background-color: var(--sui-button-secondary-background-color-active, var(--sui-active-background-color));
 }
-button:global(.secondary)[aria-pressed=true] {
+button.secondary[aria-pressed=true] {
   color: var(--sui-button-secondary-foreground-color-pressed);
   background-color: var(--sui-button-secondary-background-color-pressed, var(--sui-primary-accent-color));
 }
-button:global(.tertiary) {
+button.tertiary {
   border-width: var(--sui-button-tertiary-border-width, 1px);
   border-style: var(--sui-button-tertiary-border-style, solid);
   border-color: var(--sui-button-tertiary-border-color, var(--sui-button-border-color));
@@ -184,34 +181,34 @@ button:global(.tertiary) {
   background-color: var(--sui-button-tertiary-background-color, var(--sui-button-background-color));
   font-weight: var(--sui-button-tertiary-font-weight, var(--sui-font-weight-normal, normal));
 }
-button:global(.tertiary):hover, button:global(.tertiary):focus-visible, button:global(.tertiary)[aria-expanded=true] {
+button.tertiary:is(:hover, :focus-visible, [aria-expanded=true]) {
   color: var(--sui-button-tertiary-foreground-color-focus, var(--sui-button-tertiary-foreground-color, var(--sui-highlight-foreground-color)));
   background-color: var(--sui-button-tertiary-background-color-focus, var(--sui-hover-background-color));
 }
-button:global(.tertiary):active {
+button.tertiary:active {
   color: var(--sui-button-tertiary-foreground-color-active, var(--sui-button-tertiary-foreground-color, var(--sui-highlight-foreground-color)));
   background-color: var(--sui-button-tertiary-background-color-active, var(--sui-active-background-color));
 }
-button:global(.tertiary)[aria-pressed=true] {
+button.tertiary[aria-pressed=true] {
   color: var(--sui-button-tertiary-foreground-color-pressed);
   background-color: var(--sui-button-tertiary-background-color-pressed, var(--sui-selected-background-color));
 }
-button:global(.ghost) {
+button.ghost {
   font-weight: var(--sui-button-ghost-font-weight, var(--sui-font-weight-normal, normal));
 }
-button:global(.ghost):hover, button:global(.ghost):focus-visible, button:global(.ghost)[aria-expanded=true] {
+button.ghost:is(:hover, :focus-visible, [aria-expanded=true]) {
   color: var(--sui-button-ghost-foreground-color-focus);
   background-color: var(--sui-button-ghost-background-color-focus, var(--sui-hover-background-color));
 }
-button:global(.ghost):active {
+button.ghost:active {
   color: var(--sui-button-ghost-foreground-color-active);
   background-color: var(--sui-button-ghost-background-color-active, var(--sui-active-background-color));
 }
-button:global(.ghost)[aria-pressed=true] {
+button.ghost[aria-pressed=true] {
   color: var(--sui-button-ghost-foreground-color-pressed);
   background-color: var(--sui-button-ghost-background-color-pressed, var(--sui-selected-background-color));
 }
-button:global(.link) {
+button.link {
   outline: 0;
   margin: 0;
   border-radius: 0 !important;
@@ -219,61 +216,64 @@ button:global(.link) {
   height: auto !important;
   color: var(--sui-button-link-foreground-color, var(--sui-primary-accent-color-text));
 }
-button:global(.link) :global(.label) {
+button.link .label {
   padding: 0;
   line-height: var(--sui-line-height-compact);
   text-decoration: var(--sui-button-link-text-decoration, none);
   text-underline-offset: 2px;
   white-space: normal;
 }
-:global(:root[data-underline-links="true"]) button:global(.link) :global(.label), :global(:host[data-underline-links="true"]) button:global(.link) :global(.label) {
+:global(:is(:root, :host)[data-underline-links="true"]) button.link .label {
   text-decoration: underline;
 }
-button:global(.link):hover :global(.label), button:global(.link):focus :global(.label), button:global(.link):active :global(.label) {
+button.link:is(:hover, :focus, :active) .label {
   text-decoration: var(--sui-button-link-text-decoration-focus, underline);
 }
-button:global(.small) {
+button.small {
   border-radius: var(--sui-button-small-border-radius);
   padding: var(--sui-button-small-padding);
   height: var(--sui-button-small-height);
   font-size: var(--sui-button-small-font-size, var(--sui-font-size-small));
 }
-button:global(.small) :global(.icon) {
+button.small :global(.icon) {
   font-size: var(--sui-font-size-large);
 }
-button:global(.medium) {
+button.medium {
   border-radius: var(--sui-button-medium-border-radius);
   padding: var(--sui-button-medium-padding);
   height: var(--sui-button-medium-height);
   font-size: var(--sui-button-medium-font-size, var(--sui-font-size-default));
 }
-button:global(.large) {
+button.large {
   border-radius: var(--sui-button-large-border-radius);
   padding: var(--sui-button-large-padding);
   height: var(--sui-button-large-height);
   font-size: var(--sui-button-large-font-size, var(--sui-font-size-large));
 }
-button:global(.pill) {
+button.pill {
   border-radius: 80px;
   padding: var(--sui-button-medium-pill-padding, 0 12px);
 }
-button:global(.flex) {
+button.flex {
   flex: auto;
   width: -moz-available;
   width: -webkit-fill-available;
   width: stretch;
 }
-button:global(.iconic) {
+button.iconic {
   justify-content: center;
   padding: 0;
   aspect-ratio: 1/1;
 }
-button:global(.danger) {
+button.danger {
   background-color: var(--sui-error-background-color);
 }
-button :global(.label) {
+button .label {
   padding: 0 4px;
 }
-button:global(:has([slot="start-icon"] + [slot="end-icon"])) {
+button > :global(*) {
+  pointer-events: none;
+}
+button :global(:has([slot=start-icon] + [slot=end-icon])) {
   gap: 0;
 }</style>

package/dist/components/button/select-button-group.svelte

@@ -76,28 +76,28 @@
   border-radius: 0 !important;
   color: var(--sui-primary-foreground-color);
 }
-.select-button-group :global(button):first-child {
+.select-button-group :global(button:first-child) {
   border-top-left-radius: 4px !important;
   border-bottom-left-radius: 4px !important;
 }
-.select-button-group :global(button):not(:first-child) {
+.select-button-group :global(button:not(:first-child)) {
   border-left-width: 0;
 }
-.select-button-group :global(button):last-child {
+.select-button-group :global(button:last-child) {
   border-top-right-radius: 4px !important;
   border-bottom-right-radius: 4px !important;
 }
-.select-button-group[aria-invalid=true] :global(button) {
-  border-color: var(--sui-error-border-color);
-}
-.select-button-group :global(button[aria-checked="true"]) {
+.select-button-group :global(button[aria-checked=true]) {
   color: var(--sui-highlight-foreground-color);
   background-color: var(--sui-selected-background-color);
 }
-.select-button-group[aria-disabled=false] :global(button[aria-disabled="true"]) {
+.select-button-group :global([aria-invalid=true]) :global(button) {
+  border-color: var(--sui-error-border-color);
+}
+.select-button-group :global([aria-disabled=false]) :global(button[aria-disabled=true]) {
   filter: grayscale(0) opacity(1);
 }
-.select-button-group[aria-disabled=false] :global(button[aria-disabled="true"]) :global(*) {
+.select-button-group :global([aria-disabled=false]) :global(button[aria-disabled=true]) :global(*) {
   filter: grayscale(1) opacity(0.35);
 }
 

package/dist/components/button/split-button.svelte

@@ -90,13 +90,13 @@
 .split-button :global(button) {
   margin: 0;
 }
-.split-button :global(button:not(.menu-button)) {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
 .split-button :global(button.menu-button) {
   border-left-width: 0;
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
   aspect-ratio: 3/4;
+}
+.split-button :global(button:not(.menu-button)) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
 }</style>

package/dist/components/calendar/calendar.svelte

@@ -202,15 +202,13 @@
   flex: none;
 }
 
-.header,
-.footer {
+:is(.header, .footer) {
   display: flex;
   gap: 8px;
   height: 24px;
   align-items: center;
 }
-.header :global(button.secondary),
-.footer :global(button.secondary) {
+:is(.header, .footer) :global(button.secondary) {
   width: 100px;
   flex: auto;
 }
@@ -235,7 +233,7 @@
 .grid div.other-month {
   color: var(--sui-tertiary-foreground-color);
 }
-.grid div.today :global(button) {
+.grid div :global(.today) :global(button) {
   color: var(--sui-highlight-foreground-color);
   background-color: var(--sui-primary-accent-color);
 }
@@ -246,10 +244,10 @@
   height: 24px;
   border-radius: 50%;
 }
-.grid div :global(button):hover {
+.grid div :global(button:hover) {
   background-color: var(--sui-hover-background-color);
 }
-.grid div :global(button):focus {
+.grid div :global(button:focus) {
   border-width: 1px;
   border-color: var(--sui-primary-accent-color-light);
 }

package/dist/components/checkbox/checkbox.svelte

@@ -143,13 +143,13 @@
 .checkbox:hover :global(button) {
   background-color: var(--sui-hover-background-color);
 }
-.checkbox:hover :global(button[aria-checked="true"]) {
+.checkbox:hover :global(button[aria-checked=true]) {
   background-color: var(--sui-primary-accent-color-light);
 }
 .checkbox:active :global(button) {
   background-color: var(--sui-active-background-color);
 }
-.checkbox:active :global(button[aria-checked="true"]) {
+.checkbox:active :global(button[aria-checked=true]) {
   background-color: var(--sui-primary-accent-color-dark);
 }
 .checkbox :global(button) {
@@ -168,21 +168,21 @@
   background-color: var(--sui-checkbox-background-color);
   transition: all 200ms;
 }
-.checkbox :global(button) :global(.icon) {
-  font-size: calc(var(--sui-checkbox-height) - 2px);
-}
-.checkbox :global(button[aria-checked="true"]) {
+.checkbox :global(button[aria-checked=true]) {
   border-color: var(--sui-checkbox-border-color-checked, var(--sui-primary-accent-color));
   color: var(--sui-checkbox-foreground-color-checked, var(--sui-primary-accent-color-inverted));
   background-color: var(--sui-checkbox-background-color-checked, var(--sui-primary-accent-color));
 }
-.checkbox :global(button[aria-invalid="true"]) {
+.checkbox :global(button[aria-invalid=true]) {
   border-color: var(--sui-error-border-color);
   color: var(--sui-error-foreground-color);
 }
-.checkbox :global(button[aria-checked="true"][aria-invalid="true"]) {
+.checkbox :global(button[aria-checked=true][aria-invalid=true]) {
   background-color: var(--sui-checkbox-background-color);
 }
+.checkbox :global(button) :global(.icon) {
+  font-size: calc(var(--sui-checkbox-height) - 2px);
+}
 .checkbox label {
   cursor: inherit;
 }

package/dist/components/dialog/dialog.svelte

@@ -212,8 +212,7 @@
   }
 }
 
-.header,
-.footer {
+:is(.header, .footer) {
   display: flex;
   align-items: center;
   gap: 4px;

package/dist/components/disclosure/disclosure.svelte

@@ -89,10 +89,10 @@
   display: flex;
   width: 100%;
 }
-.disclosure :global(button .icon) {
+.disclosure :global(button) :global(.icon) {
   transition: all 200ms;
 }
-.disclosure :global(button[aria-expanded="false"] .icon) {
+.disclosure :global(button[aria-expanded=false]) :global(.icon) {
   transform: rotate(-90deg);
 }
 

package/dist/components/drawer/drawer.svelte

@@ -272,8 +272,7 @@
   max-height: 100dvh;
 }
 
-.header,
-.footer {
+:is(.header, .footer) {
   display: flex;
   align-items: center;
   gap: 8px;

package/dist/components/grid/grid-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/grid/grid.svelte

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

package/dist/components/listbox/listbox.svelte

@@ -108,19 +108,19 @@
     gap: 8px 0;
   }
 }
-[role=listbox] :global([role="separator"]) {
+[role=listbox] :global([role=separator]) {
   margin: 4px 0;
   background-color: var(--sui-control-border-color);
 }
 [role=listbox][aria-invalid=true] {
   border-color: var(--sui-error-border-color);
 }
-[role=listbox]:global(.tabs) {
+[role=listbox].tabs {
   padding: 0;
   border-width: 0 1px 0 0;
   border-color: var(--sui-control-border-color);
 }
-[role=listbox]:global(.tabs) :global(.option button) {
+[role=listbox].tabs :global(.option) :global(button) {
   justify-content: flex-start;
   border-width: 0 2px 0 0;
   border-color: transparent;
@@ -129,16 +129,16 @@
   border-bottom-right-radius: 0;
   height: var(--sui-tab-medium-height);
 }
-[role=listbox]:global(.tabs) :global(.option button) :global(.icon) {
-  display: none;
-}
-[role=listbox]:global(.tabs) :global(.option button[aria-selected="true"]) {
+[role=listbox].tabs :global(.option) :global(button[aria-selected=true]) {
   border-color: var(--sui-primary-accent-color-light);
 }
+[role=listbox].tabs :global(.option) :global(button) :global(.icon) {
+  display: none;
+}
 [role=listbox].in-combobox:focus-visible {
   outline-color: transparent;
 }
-[role=listbox].filtered :global([role="separator"]) {
+[role=listbox].filtered :global([role=separator]) {
   display: none;
 }
 

package/dist/components/listbox/option.svelte

@@ -90,6 +90,9 @@
 .option:focus-visible {
   outline-width: 0 !important;
 }
+.option :global(.wrap) :global(button) {
+  white-space: normal;
+}
 .option :global(button) {
   flex: none;
   display: flex;
@@ -101,26 +104,22 @@
   height: auto;
   min-height: var(--sui-option-height);
 }
+.option :global(button:active) {
+  background-color: var(--sui-active-background-color);
+}
+.option :global(button[aria-selected=true]) :global(.icon.check) {
+  color: var(--sui-primary-accent-color-text);
+}
 .option :global(button) :global(*) {
   flex: none;
 }
 .option :global(button) :global(.label) {
   flex: auto;
 }
-.option.wrap :global(button) {
-  white-space: normal;
-}
-.option :global(.focused),
-.option :global(button:hover) {
+.option :global(:is(.focused, button:hover)) {
   color: var(--sui-highlight-foreground-color);
   background-color: var(--sui-hover-background-color);
 }
-.option :global(button:active) {
-  background-color: var(--sui-active-background-color);
-}
 .option :global(.icon.check) {
   margin: -2px;
-}
-.option :global(button[aria-selected="true"]) :global(.icon.check) {
-  color: var(--sui-primary-accent-color-text);
 }</style>

package/dist/components/menu/menu-item.svelte

@@ -170,7 +170,7 @@
   font-size: var(--sui-menuitem-font-size, var(--sui-option-font-size));
   font-weight: var(--sui-menuitem-font-weight, var(--sui-option-font-weight, var(--sui-font-weight-normal, normal)));
 }
-.menuitem :global(button[aria-checked="true"]) :global(.icon) {
+.menuitem :global(button[aria-checked=true]) :global(.icon) {
   color: var(--sui-primary-accent-color-text);
 }
 .menuitem :global(button:hover) {
@@ -180,14 +180,14 @@
 .menuitem :global(button:active) {
   background-color: var(--sui-active-background-color);
 }
-.menuitem:hover > :global([role="menu"]) {
+.menuitem :global(:hover) > :global([role=menu]) {
   opacity: 1;
 }
-.menuitem > :global([role="menu"]) {
+.menuitem > :global([role=menu]) {
   position: absolute;
   inset: 2px auto auto calc(100% + 4px);
 }
-.menuitem > :global([role="menu"]):hover {
+.menuitem > :global([role=menu]:hover) {
   opacity: 1;
 }
 

package/dist/components/menu/menu.svelte

@@ -67,7 +67,7 @@
     gap: 8px 0;
   }
 }
-.menu :global([role="separator"]) {
+.menu :global([role=separator]) {
   margin: var(--sui-menu-divider-margin, 4px);
   background-color: var(--sui-menu-divider-color, var(--sui-control-border-color));
 }</style>

package/dist/components/radio/radio-group.svelte

@@ -90,13 +90,13 @@
     gap: 8px;
   }
 }
-.radio-group[aria-invalid=true] :global(button) {
+.radio-group :global([aria-invalid=true]) :global(button) {
   border-color: var(--sui-error-border-color);
 }
-.radio-group[aria-invalid=true] :global(button[aria-checked="true"]) {
+.radio-group :global([aria-invalid=true]) :global(button[aria-checked=true]) {
   border-color: var(--sui-error-border-color);
 }
-.radio-group[aria-invalid=true] :global(button[aria-checked="true"]::before) {
+.radio-group :global([aria-invalid=true]) :global(button[aria-checked=true]::before) {
   background-color: var(--sui-error-border-color);
 }
 

package/dist/components/radio/radio.svelte

@@ -110,20 +110,20 @@
   -webkit-user-select: none;
   user-select: none;
 }
-.radio:hover :global(button) {
+.radio :global(:hover) :global(button) {
   background-color: var(--sui-hover-background-color);
 }
-.radio:hover :global(button[aria-checked="true"]) {
+.radio :global(:hover) :global(button[aria-checked=true]) {
   border-color: var(--sui-primary-accent-color-light);
   color: var(--sui-primary-accent-color-text);
 }
-.radio:hover :global(button[aria-checked="true"]::before) {
+.radio :global(:hover) :global(button[aria-checked=true]::before) {
   background-color: var(--sui-primary-accent-color-light);
 }
-.radio:active :global(button) {
+.radio :global(:active) :global(button) {
   background-color: var(--sui-active-background-color);
 }
-.radio:active :global(button[aria-checked="true"]) {
+.radio :global(:active) :global(button[aria-checked=true]) {
   border-color: var(--sui-primary-accent-color-dark);
   color: var(--sui-primary-accent-color-dark);
 }
@@ -147,14 +147,15 @@
   width: calc(var(--sui-checkbox-height) - 7px);
   height: calc(var(--sui-checkbox-height) - 7px);
   background-color: var(--sui-primary-accent-color);
+  opacity: 0;
   transition: all 200ms;
   will-change: opacity;
 }
-.radio :global(button[aria-checked="true"]) {
+.radio :global(button[aria-checked=true]) {
   border-color: var(--sui-primary-accent-color);
 }
-.radio :global(button[aria-checked="false"]::before) {
-  opacity: 0;
+.radio :global(button[aria-checked=true]::before) {
+  opacity: 1;
 }
 .radio label {
   cursor: inherit;