@sveltia/ui 0.41.3 → 0.42.0

package/dist/components/alert/alert.svelte

@@ -14,6 +14,7 @@
   /**
    * @typedef {object} Props
    * @property {'error' | 'warning' | 'info' | 'success'} status Alert status.
+   * @property {'off' | 'polite' | 'assertive'} [ariaLive] ARIA live region politeness.
    * @property {Snippet} [children] Primary slot content.
    * @property {Snippet} [icon] Icon slot content.
    */
@@ -24,6 +25,7 @@
   let {
     /* eslint-disable prefer-const */
     status,
+    ariaLive = 'assertive',
     children,
     icon,
     ...restProps
@@ -31,7 +33,7 @@
   } = $props();
 </script>
 
-<div {...restProps} role="alert" class="sui alert {status}">
+<div {...restProps} role="alert" class="sui alert {status}" aria-live={ariaLive}>
   {#if icon}
     {@render icon()}
   {:else}
@@ -40,33 +42,39 @@
   {@render children?.()}
 </div>
 
-<style>.alert {
-  display: flex;
-  align-items: center;
-  gap: var(--gap, 8px);
-  padding: var(--padding, 8px);
-  border-width: var(--border-width, var(--sui-control-medium-border-width));
-  border-style: var(--border-style, solid);
-  border-radius: var(--border-radius, var(--sui-control-medium-border-radius));
-  font-size: var(--font-size, var(--sui-font-size-default));
-}
-.alert.error {
-  border-color: var(--sui-error-border-color);
-  color: var(--sui-error-foreground-color);
-  background-color: var(--sui-error-background-color);
-}
-.alert.warning {
-  border-color: var(--sui-warning-border-color);
-  color: var(--sui-warning-foreground-color);
-  background-color: var(--sui-warning-background-color);
-}
-.alert.info {
-  border-color: var(--sui-info-border-color);
-  color: var(--sui-info-foreground-color);
-  background-color: var(--sui-info-background-color);
-}
-.alert.success {
-  border-color: var(--sui-success-border-color);
-  color: var(--sui-success-foreground-color);
-  background-color: var(--sui-success-background-color);
-}</style>
+<style lang="scss">
+  .alert {
+    display: flex;
+    align-items: center;
+    gap: var(--gap, 8px);
+    padding: var(--padding, 8px);
+    border-width: var(--border-width, var(--sui-control-medium-border-width));
+    border-style: var(--border-style, solid);
+    border-radius: var(--border-radius, var(--sui-control-medium-border-radius));
+    font-size: var(--font-size, var(--sui-font-size-default));
+
+    &.error {
+      border-color: var(--sui-error-border-color);
+      color: var(--sui-error-foreground-color);
+      background-color: var(--sui-error-background-color);
+    }
+
+    &.warning {
+      border-color: var(--sui-warning-border-color);
+      color: var(--sui-warning-foreground-color);
+      background-color: var(--sui-warning-background-color);
+    }
+
+    &.info {
+      border-color: var(--sui-info-border-color);
+      color: var(--sui-info-foreground-color);
+      background-color: var(--sui-info-background-color);
+    }
+
+    &.success {
+      border-color: var(--sui-success-border-color);
+      color: var(--sui-success-foreground-color);
+      background-color: var(--sui-success-background-color);
+    }
+  }
+</style>

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

@@ -13,6 +13,10 @@ declare const Alert: import("svelte").Component<{
      * Alert status.
      */
     status: "error" | "warning" | "info" | "success";
+    /**
+     * ARIA live region politeness.
+     */
+    ariaLive?: "off" | "polite" | "assertive" | undefined;
     /**
      * Primary slot content.
      */
@@ -27,6 +31,10 @@ type Props = {
      * Alert status.
      */
     status: "error" | "warning" | "info" | "success";
+    /**
+     * ARIA live region politeness.
+     */
+    ariaLive?: "off" | "polite" | "assertive" | undefined;
     /**
      * Primary slot content.
      */

package/dist/components/alert/infobar.svelte

@@ -12,6 +12,7 @@
    * @property {boolean} [show] Whether to show the toast.
    * @property {boolean} [dismissible] Whether to show the close button.
    * @property {'error' | 'warning' | 'info' | 'success'} [status] Information status.
+   * @property {'off' | 'polite' | 'assertive'} [ariaLive] ARIA live region politeness.
    * @property {Snippet} [children] Primary slot content.
    * @property {Snippet} [icon] Icon slot content.
    */
@@ -22,6 +23,7 @@
     show = $bindable(true),
     dismissible = true,
     status = 'info',
+    ariaLive = 'polite',
     children = undefined,
     icon = undefined,
     /* eslint-enable prefer-const */
@@ -30,7 +32,7 @@
 
 {#if show}
   <div role="none" class="infobar {status}">
-    <div role="alert" class="message">
+    <div role="alert" class="message" aria-live={ariaLive}>
       {#if icon}
         {@render icon()}
       {:else}
@@ -56,49 +58,59 @@
   </div>
 {/if}
 
-<style>.infobar {
-  flex: none;
-  display: flex;
-  align-items: center;
-  gap: var(--sui-infobar-gap, 8px);
-  border-width: var(--sui-infobar-border-width, 0 0 1px);
-  border-style: var(--sui-infobar-border-style, solid);
-  padding: var(--sui-infobar-padding, 0);
-  min-height: var(--sui-infobar-min-height, 32px);
-  font-size: var(--sui-infobar-font-size, var(--sui-font-size-small));
-}
-.infobar.info {
-  border-color: var(--sui-info-border-color);
-  color: var(--sui-info-foreground-color);
-  background-color: var(--sui-info-background-color);
-}
-.infobar.warning {
-  border-color: var(--sui-warning-border-color);
-  color: var(--sui-warning-foreground-color);
-  background-color: var(--sui-warning-background-color);
-}
-.infobar.error {
-  border-color: var(--sui-error-border-color);
-  color: var(--sui-error-foreground-color);
-  background-color: var(--sui-error-background-color);
-}
-.infobar.success {
-  border-color: var(--sui-success-border-color);
-  color: var(--sui-success-foreground-color);
-  background-color: var(--sui-success-background-color);
-}
+<style lang="scss">
+  .infobar {
+    flex: none;
+    display: flex;
+    align-items: center;
+    gap: var(--sui-infobar-gap, 8px);
+    border-width: var(--sui-infobar-border-width, 0 0 1px);
+    border-style: var(--sui-infobar-border-style, solid);
+    padding: var(--sui-infobar-padding, 0);
+    min-height: var(--sui-infobar-min-height, 32px);
+    font-size: var(--sui-infobar-font-size, var(--sui-font-size-small));
 
-.message {
-  flex: auto;
-  display: flex;
-  align-items: center;
-  justify-content: var(--sui-infobar-message-justify-content, start);
-  gap: var(--sui-infobar-message-gap, 6px);
-  padding: var(--sui-infobar-message-padding, 6px);
-}
-.message :global(button) {
-  font-size: inherit !important;
-}
-.message :global(.icon) {
-  font-size: 16px; /* !hardcoded */
-}</style>
+    &.info {
+      border-color: var(--sui-info-border-color);
+      color: var(--sui-info-foreground-color);
+      background-color: var(--sui-info-background-color);
+    }
+
+    &.warning {
+      border-color: var(--sui-warning-border-color);
+      color: var(--sui-warning-foreground-color);
+      background-color: var(--sui-warning-background-color);
+    }
+
+    &.error {
+      border-color: var(--sui-error-border-color);
+      color: var(--sui-error-foreground-color);
+      background-color: var(--sui-error-background-color);
+    }
+
+    &.success {
+      border-color: var(--sui-success-border-color);
+      color: var(--sui-success-foreground-color);
+      background-color: var(--sui-success-background-color);
+    }
+  }
+
+  .message {
+    flex: auto;
+    display: flex;
+    align-items: center;
+    justify-content: var(--sui-infobar-message-justify-content, start);
+    gap: var(--sui-infobar-message-gap, 6px);
+    padding: var(--sui-infobar-message-padding, 6px);
+
+    :global {
+      button {
+        font-size: inherit !important;
+      }
+
+      .icon {
+        font-size: 16px; /* !hardcoded */
+      }
+    }
+  }
+</style>

package/dist/components/alert/infobar.svelte.d.ts

@@ -16,6 +16,10 @@ declare const Infobar: import("svelte").Component<{
      * Information status.
      */
     status?: "error" | "warning" | "info" | "success" | undefined;
+    /**
+     * ARIA live region politeness.
+     */
+    ariaLive?: "off" | "polite" | "assertive" | undefined;
     /**
      * Primary slot content.
      */
@@ -38,6 +42,10 @@ type Props = {
      * Information status.
      */
     status?: "error" | "warning" | "info" | "success" | undefined;
+    /**
+     * ARIA live region politeness.
+     */
+    ariaLive?: "off" | "polite" | "assertive" | undefined;
     /**
      * Primary slot content.
      */

package/dist/components/bottom-navigation/bottom-navigation.svelte

@@ -30,18 +30,24 @@
   {@render children?.()}
 </div>
 
-<style>.bottom-navigation {
-  height: var(--sui-bottom-navigation-height, var(--sui-primary-toolbar-size));
-  border-top-width: var(--sui-bottom-navigation-border-color, 1px);
-  border-top-style: var(--sui-bottom-navigation-border-style, solid);
-  border-top-color: var(--sui-bottom-navigation-border-color, var(--sui-secondary-border-color));
-}
-.bottom-navigation:is([inert], [hidden]) {
-  display: none;
-}
-.bottom-navigation :global(.buttons) {
-  flex: auto;
-  display: flex;
-  align-items: center;
-  justify-content: space-evenly;
-}</style>
+<style lang="scss">
+  .bottom-navigation {
+    height: var(--sui-bottom-navigation-height, var(--sui-primary-toolbar-size));
+    border-top-width: var(--sui-bottom-navigation-border-color, 1px);
+    border-top-style: var(--sui-bottom-navigation-border-style, solid);
+    border-top-color: var(--sui-bottom-navigation-border-color, var(--sui-secondary-border-color));
+
+    &:is([inert], [hidden]) {
+      display: none;
+    }
+
+    :global {
+      .buttons {
+        flex: auto;
+        display: flex;
+        align-items: center;
+        justify-content: space-evenly;
+      }
+    }
+  }
+</style>

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

@@ -6,6 +6,7 @@
   /**
    * @typedef {object} Props
    * @property {string} [class] The `class` attribute on the wrapper element.
+   * @property {string} [ariaLabel] The `aria-label` attribute on the wrapper element.
    * @property {Snippet} [children] Primary slot content.
    */
 
@@ -15,18 +16,21 @@
   let {
     /* eslint-disable prefer-const */
     class: className,
+    ariaLabel = undefined,
     children,
     ...restProps
     /* eslint-enable prefer-const */
   } = $props();
 </script>
 
-<div {...restProps} role="group" class="sui button-group {className}">
+<div {...restProps} role="group" class="sui button-group {className}" aria-label={ariaLabel}>
   {@render children?.()}
 </div>
 
-<style>.button-group {
-  flex: none;
-  display: inline-flex;
-  align-items: center;
-}</style>
+<style lang="scss">
+  .button-group {
+    flex: none;
+    display: inline-flex;
+    align-items: center;
+  }
+</style>

package/dist/components/button/button-group.svelte.d.ts

@@ -8,6 +8,10 @@ declare const ButtonGroup: import("svelte").Component<{
      * The `class` attribute on the wrapper element.
      */
     class?: string | undefined;
+    /**
+     * The `aria-label` attribute on the wrapper element.
+     */
+    ariaLabel?: string | undefined;
     /**
      * Primary slot content.
      */
@@ -18,6 +22,10 @@ type Props = {
      * The `class` attribute on the wrapper element.
      */
     class?: string | undefined;
+    /**
+     * The `aria-label` attribute on the wrapper element.
+     */
+    ariaLabel?: string | undefined;
     /**
      * Primary slot content.
      */