@sveltia/ui 0.41.3 → 0.42.0

package/dist/components/grid/grid.svelte

@@ -18,6 +18,7 @@
    * `<GridCell>`. An alias of the `aria-multiselectable` attribute.
    * @property {boolean} [clickToSelect] Whether to select a row by clicking on it.
    * @property {HTMLElement} [element] A reference to the wrapper element.
+   * @property {string} [ariaLabel] The `aria-label` attribute on the wrapper element.
    * @property {Snippet} [children] Primary slot content.
    * @property {(event: CustomEvent) => void} [onChange] Custom `Change` event handler.
    */
@@ -31,6 +32,7 @@
     class: className,
     multiple = false,
     clickToSelect = true,
+    ariaLabel = undefined,
     children,
     onChange,
     ...restProps
@@ -44,6 +46,7 @@
   role="grid"
   class="sui grid {className}"
   aria-multiselectable={multiple}
+  aria-label={ariaLabel}
   onChange={(/** @type {CustomEvent} */ event) => {
     onChange?.(event);
   }}
@@ -52,15 +55,21 @@
   {@render children?.()}
 </div>
 
-<style>.grid {
-  display: table;
-  margin: var(--sui-focus-ring-width);
-  width: calc(100% - var(--sui-focus-ring-width) * 2);
-}
-.grid.data {
-  border-collapse: collapse;
-}
-.grid.data :global(:is(.grid-col-header, .grid-row-header, .grid-cell)) {
-  border: 1px solid var(--sui-secondary-border-color);
-  padding: 8px 8px;
-}</style>
+<style lang="scss">
+  .grid {
+    display: table;
+    margin: var(--sui-focus-ring-width);
+    width: calc(100% - var(--sui-focus-ring-width) * 2);
+
+    &.data {
+      border-collapse: collapse;
+
+      :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/grid/grid.svelte.d.ts

@@ -26,6 +26,10 @@ declare const Grid: import("svelte").Component<{
      * A reference to the wrapper element.
      */
     element?: HTMLElement | undefined;
+    /**
+     * The `aria-label` attribute on the wrapper element.
+     */
+    ariaLabel?: string | undefined;
     /**
      * Primary slot content.
      */
@@ -53,6 +57,10 @@ type Props = {
      * A reference to the wrapper element.
      */
     element?: HTMLElement | undefined;
+    /**
+     * The `aria-label` attribute on the wrapper element.
+     */
+    ariaLabel?: string | undefined;
     /**
      * Primary slot content.
      */

package/dist/components/icon/icon.svelte

@@ -30,8 +30,10 @@
   {name}
 </span>
 
-<style>.icon.small-arrow {
-  overflow: hidden;
-  width: 12px;
-  text-indent: -6px;
-}</style>
+<style lang="scss">
+  .icon.small-arrow {
+    overflow: hidden;
+    width: 12px;
+    text-indent: -6px;
+  }
+</style>

package/dist/components/listbox/listbox.svelte

@@ -29,6 +29,7 @@
    * @property {boolean} [multiple] Whether to allow selecting more than one `<Option>`. An alias of
    * the `aria-multiselectable` attribute.
    * @property {string} [searchTerms] Search terms to be used to filter the items.
+   * @property {string} [ariaLabel] The `aria-label` attribute on the wrapper element.
    * @property {Snippet} [children] Primary slot content.
    * @property {(event: CustomEvent) => void} [onChange] Custom `Change` event handler.
    * @property {(event: CustomEvent) => void} [onFilter] Custom `Filter` event handler.
@@ -47,6 +48,7 @@
     invalid = false,
     multiple = false,
     searchTerms = '',
+    ariaLabel = undefined,
     children,
     onFilter,
     ...restProps
@@ -72,6 +74,7 @@
   aria-required={required}
   aria-invalid={invalid}
   aria-multiselectable={multiple}
+  aria-label={ariaLabel}
   onFilter={(/** @type {CustomEvent} */ event) => {
     const {
       detail: { matched, total },
@@ -87,65 +90,82 @@
   </div>
 </div>
 
-<style>[role=listbox] {
-  display: flex;
-  flex-direction: column;
-  margin: var(--sui-focus-ring-width);
-  border-width: var(--sui-listbox-border-width, 1px);
-  border-style: var(--sui-listbox-border-style, solid);
-  border-color: var(--sui-listbox-border-width, var(--sui-secondary-border-color));
-  border-radius: var(--sui-listbox-border-radius, 4px);
-  padding: var(--sui-listbox-padding, 4px);
-  min-width: var(--sui-listbox-min-width, calc(var(--sui-option-height) * 5));
-  color: var(--sui-listbox-foreground-color);
-  background-color: var(--sui-listbox-background-color);
-  font-family: var(--sui-control-font-family);
-  font-size: var(--sui-control-font-size);
-  line-height: var(--sui-control-line-height);
-}
-@media (pointer: coarse) {
-  [role=listbox] {
-    gap: 8px 0;
+<style lang="scss">
+  [role='listbox'] {
+    display: flex;
+    flex-direction: column;
+    margin: var(--sui-focus-ring-width);
+    border-width: var(--sui-listbox-border-width, 1px);
+    border-style: var(--sui-listbox-border-style, solid);
+    border-color: var(--sui-listbox-border-width, var(--sui-secondary-border-color));
+    border-radius: var(--sui-listbox-border-radius, 4px);
+    padding: var(--sui-listbox-padding, 4px);
+    min-width: var(--sui-listbox-min-width, calc(var(--sui-option-height) * 5));
+    color: var(--sui-listbox-foreground-color);
+    background-color: var(--sui-listbox-background-color);
+    font-family: var(--sui-control-font-family);
+    font-size: var(--sui-control-font-size);
+    line-height: var(--sui-control-line-height);
+
+    @media (pointer: coarse) {
+      gap: 8px 0;
+    }
+
+    :global {
+      [role='separator'] {
+        margin: 4px 0;
+        background-color: var(--sui-control-border-color);
+      }
+    }
+
+    &[aria-invalid='true'] {
+      border-color: var(--sui-error-border-color);
+    }
+
+    &.tabs {
+      padding: 0;
+      border-block-start-width: 0;
+      border-block-end-width: 0;
+      border-inline-end-width: 1px;
+      border-inline-start-width: 0;
+      border-color: var(--sui-control-border-color);
+
+      :global {
+        .option button {
+          justify-content: flex-start;
+          border-width: 0;
+          border-inline-end-width: 2px;
+          border-color: transparent;
+          padding: 0 12px;
+          border-start-end-radius: 0;
+          border-end-end-radius: 0;
+          height: var(--sui-tab-medium-height);
+
+          &[aria-selected='true'] {
+            border-color: var(--sui-primary-accent-color-light);
+          }
+
+          .icon {
+            display: none;
+          }
+        }
+      }
+    }
+
+    &.in-combobox:focus-visible {
+      outline-color: transparent;
+    }
+
+    &.filtered {
+      :global {
+        [role='separator'] {
+          display: none;
+        }
+      }
+    }
+  }
+
+  .inner {
+    display: contents;
   }
-}
-[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].tabs {
-  padding: 0;
-  border-block-start-width: 0;
-  border-block-end-width: 0;
-  border-inline-end-width: 1px;
-  border-inline-start-width: 0;
-  border-color: var(--sui-control-border-color);
-}
-[role=listbox].tabs :global(.option) :global(button) {
-  justify-content: flex-start;
-  border-width: 0;
-  border-inline-end-width: 2px;
-  border-color: transparent;
-  padding: 0 12px;
-  border-start-end-radius: 0;
-  border-end-end-radius: 0;
-  height: var(--sui-tab-medium-height);
-}
-[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]) {
-  display: none;
-}
-
-.inner {
-  display: contents;
-}</style>
+</style>

package/dist/components/listbox/listbox.svelte.d.ts

@@ -48,6 +48,10 @@ declare const Listbox: import("svelte").Component<import("../../typedefs").Keybo
      * Search terms to be used to filter the items.
      */
     searchTerms?: string | undefined;
+    /**
+     * The `aria-label` attribute on the wrapper element.
+     */
+    ariaLabel?: string | undefined;
     /**
      * Primary slot content.
      */
@@ -100,6 +104,10 @@ type Props = {
      * Search terms to be used to filter the items.
      */
     searchTerms?: string | undefined;
+    /**
+     * The `aria-label` attribute on the wrapper element.
+     */
+    ariaLabel?: string | undefined;
     /**
      * Primary slot content.
      */

package/dist/components/listbox/option-group.svelte

@@ -62,16 +62,20 @@
   </div>
 </div>
 
-<style>.option-group:not(:first-child) {
-  margin: 12px 0 0;
-}
+<style lang="scss">
+  .option-group {
+    &:not(:first-child) {
+      margin: 12px 0 0;
+    }
+  }
 
-.label {
-  margin: 8px;
-  color: var(--sui-secondary-foreground-color);
-  font-size: var(--sui-font-size-small);
-}
+  .label {
+    margin: 8px;
+    color: var(--sui-secondary-foreground-color);
+    font-size: var(--sui-font-size-small);
+  }
 
-.inner {
-  display: contents;
-}</style>
+  .inner {
+    display: contents;
+  }
+</style>

package/dist/components/listbox/option.svelte

@@ -84,42 +84,57 @@
   </Button>
 </div>
 
-<style>.option {
-  display: contents;
-}
-.option:focus-visible {
-  outline-width: 0 !important;
-}
-.option :global(.wrap) :global(button) {
-  white-space: normal;
-}
-.option :global(button) {
-  flex: none;
-  display: flex;
-  gap: 4px;
-  margin: 0 !important;
-  border-radius: var(--sui-option-border-radius);
-  padding: var(--sui-option-padding);
-  width: 100%;
-  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 :global(:is(.focused, button:hover)) {
-  color: var(--sui-highlight-foreground-color);
-  background-color: var(--sui-hover-background-color);
-}
-.option :global(.icon.check) {
-  margin: -2px;
-}</style>
+<style lang="scss">
+  .option {
+    display: contents;
+
+    &:focus-visible {
+      outline-width: 0 !important;
+    }
+
+    :global {
+      &.wrap button {
+        white-space: normal;
+      }
+
+      button {
+        flex: none;
+        display: flex;
+        gap: 4px;
+        margin: 0 !important;
+        border-radius: var(--sui-option-border-radius);
+        padding: var(--sui-option-padding);
+        width: 100%;
+        height: auto;
+        min-height: var(--sui-option-height);
+
+        &:active {
+          background-color: var(--sui-active-background-color);
+        }
+
+        &[aria-selected='true'] {
+          .icon.check {
+            color: var(--sui-primary-accent-color-text);
+          }
+        }
+
+        * {
+          flex: none;
+        }
+
+        .label {
+          flex: auto;
+        }
+      }
+
+      :is(.focused, button:hover) {
+        color: var(--sui-highlight-foreground-color);
+        background-color: var(--sui-hover-background-color);
+      }
+
+      .icon.check {
+        margin: -2px;
+      }
+    }
+  }
+</style>

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

@@ -53,6 +53,8 @@
   </div>
 </div>
 
-<style>.inner {
-  display: contents;
-}</style>
+<style lang="scss">
+  .inner {
+    display: contents;
+  }
+</style>

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

@@ -154,54 +154,70 @@
   {/if}
 </div>
 
-<style>.menuitem {
-  position: relative;
-}
-.menuitem :global(button) {
-  display: flex;
-  gap: var(--sui-menuitem-gap, 4px);
-  align-items: var(--sui-menuitem-align-items, center);
-  border-radius: var(--sui-menuitem-border-radius, var(--sui-option-border-radius, 4px));
-  margin: 0 !important;
-  padding: var(--sui-menuitem-padding, 0 16px);
-  width: 100%;
-  min-width: var(--sui-menuitem-min-width, 160px);
-  height: var(--sui-menuitem-height, var(--sui-option-height));
-  color: var(--sui-menuitem-foreground-color, var(--sui-control-foreground-color, inherit));
-  background-color: var(--sui-menuitem-background-color, transparent);
-  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) {
-  color: var(--sui-primary-accent-color-text);
-}
-.menuitem :global(button:hover) {
-  color: var(--sui-highlight-foreground-color);
-  background-color: var(--sui-hover-background-color);
-}
-.menuitem :global(button:active) {
-  background-color: var(--sui-active-background-color);
-}
-.menuitem :global(:hover) > :global([role=menu]) {
-  opacity: 1;
-}
-.menuitem > :global([role=menu]) {
-  position: absolute;
-  inset-block-start: 2px;
-  inset-block-end: auto;
-  inset-inline-start: calc(100% + 4px);
-  inset-inline-end: auto;
-}
-.menuitem > :global([role=menu]:hover) {
-  opacity: 1;
-}
-
-.content {
-  flex: auto;
-}
-
-.icon-outer {
-  flex: none;
-  width: 24px;
-  height: 24px;
-}</style>
+<style lang="scss">
+  .menuitem {
+    position: relative;
+
+    :global {
+      button {
+        display: flex;
+        gap: var(--sui-menuitem-gap, 4px);
+        align-items: var(--sui-menuitem-align-items, center);
+        border-radius: var(--sui-menuitem-border-radius, var(--sui-option-border-radius, 4px));
+        margin: 0 !important;
+        padding: var(--sui-menuitem-padding, 0 16px);
+        width: 100%;
+        min-width: var(--sui-menuitem-min-width, 160px);
+        height: var(--sui-menuitem-height, var(--sui-option-height));
+        color: var(--sui-menuitem-foreground-color, var(--sui-control-foreground-color, inherit));
+        background-color: var(--sui-menuitem-background-color, transparent);
+        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))
+        );
+
+        &[aria-checked='true'] {
+          .icon {
+            color: var(--sui-primary-accent-color-text);
+          }
+        }
+
+        &:hover {
+          color: var(--sui-highlight-foreground-color);
+          background-color: var(--sui-hover-background-color);
+        }
+
+        &:active {
+          background-color: var(--sui-active-background-color);
+        }
+      }
+
+      &:hover > [role='menu'] {
+        opacity: 1;
+      }
+
+      & > [role='menu'] {
+        position: absolute;
+        inset-block-start: 2px;
+        inset-block-end: auto;
+        inset-inline-start: calc(100% + 4px);
+        inset-inline-end: auto;
+
+        &:hover {
+          opacity: 1;
+        }
+      }
+    }
+  }
+
+  .content {
+    flex: auto;
+  }
+
+  .icon-outer {
+    flex: none;
+    width: 24px;
+    height: 24px;
+  }
+</style>

package/dist/components/menu/menu.svelte

@@ -18,6 +18,7 @@
    * attribute.
    * @property {boolean} [disabled] Whether to disable the widget. An alias of the `aria-disabled`
    * attribute.
+   * @property {string} [ariaLabel] The `aria-label` attribute on the wrapper element.
    * @property {Snippet} [children] Primary slot content.
    * @property {(event: CustomEvent) => void} [onChange] Custom `Change` event handler.
    */
@@ -30,6 +31,7 @@
     class: className,
     hidden = false,
     disabled = false,
+    ariaLabel = undefined,
     children,
     onChange,
     ...restProps
@@ -44,6 +46,7 @@
   {hidden}
   aria-hidden={hidden}
   aria-disabled={disabled}
+  aria-label={ariaLabel}
   onChange={(/** @type {CustomEvent} */ event) => {
     onChange?.(event);
   }}
@@ -52,22 +55,26 @@
   {@render children?.()}
 </div>
 
-<style>.menu {
-  display: flex;
-  flex-direction: column;
-  margin: 0;
-  border-width: var(--sui-menu-border-width, 1px);
-  border-style: var(--sui-menu-border-style, solid);
-  border-color: var(--sui-menu-border-width, var(--sui-secondary-border-color));
-  border-radius: var(--sui-menu-border-radius, 4px);
-  padding: var(--sui-menu-padding, 4px);
-}
-@media (pointer: coarse) {
+<style lang="scss">
   .menu {
-    gap: 8px 0;
+    display: flex;
+    flex-direction: column;
+    margin: 0;
+    border-width: var(--sui-menu-border-width, 1px);
+    border-style: var(--sui-menu-border-style, solid);
+    border-color: var(--sui-menu-border-width, var(--sui-secondary-border-color));
+    border-radius: var(--sui-menu-border-radius, 4px);
+    padding: var(--sui-menu-padding, 4px);
+
+    @media (pointer: coarse) {
+      gap: 8px 0;
+    }
+
+    :global {
+      [role='separator'] {
+        margin: var(--sui-menu-divider-margin, 4px);
+        background-color: var(--sui-menu-divider-color, var(--sui-control-border-color));
+      }
+    }
   }
-}
-.menu :global([role=separator]) {
-  margin: var(--sui-menu-divider-margin, 4px);
-  background-color: var(--sui-menu-divider-color, var(--sui-control-border-color));
-}</style>
+</style>

package/dist/components/menu/menu.svelte.d.ts

@@ -23,6 +23,10 @@ declare const Menu: import("svelte").Component<{
      * attribute.
      */
     disabled?: boolean | undefined;
+    /**
+     * The `aria-label` attribute on the wrapper element.
+     */
+    ariaLabel?: string | undefined;
     /**
      * Primary slot content.
      */
@@ -47,6 +51,10 @@ type Props = {
      * attribute.
      */
     disabled?: boolean | undefined;
+    /**
+     * The `aria-label` attribute on the wrapper element.
+     */
+    ariaLabel?: string | undefined;
     /**
      * Primary slot content.
      */