@sveltia/ui 0.41.3 → 0.42.0

package/dist/components/button/button.svelte

@@ -109,178 +109,277 @@
   </Popup>
 {/if}
 
-<style>button {
-  flex: none;
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  margin: var(--sui-focus-ring-width);
-  border-width: 0;
-  border-style: solid;
-  border-color: transparent;
-  padding: 0;
-  color: var(--sui-control-foreground-color, inherit);
-  background-color: transparent;
-  box-shadow: none;
-  font-family: var(--sui-control-font-family);
-  font-size: var(--sui-control-font-size);
-  line-height: var(--sui-control-line-height);
-  font-weight: var(--sui-font-weight-normal, normal);
-  text-align: start;
-  cursor: pointer;
-  transition: all 200ms;
-}
-button[hidden] {
-  display: none !important;
-}
-button:not(:disabled):focus-visible {
-  z-index: 1;
-}
-button:is(.primary, .secondary, .tertiary, .ghost) {
-  justify-content: center;
-  border-width: 1px;
-}
-button:is(.primary, .secondary, .tertiary, .ghost) .label:only-child {
-  padding: 0 4px;
-}
-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));
-  color: var(--sui-button-primary-foreground-color, var(--sui-primary-accent-color-inverted));
-  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.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.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.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));
-  color: var(--sui-button-secondary-foreground-color, var(--sui-primary-accent-color-text));
-  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.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.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.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.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));
-  color: var(--sui-button-tertiary-foreground-color, var(--sui-highlight-foreground-color));
-  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.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.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.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.ghost {
-  font-weight: var(--sui-button-ghost-font-weight, var(--sui-font-weight-normal, normal));
-}
-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.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.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.link {
-  outline: 0;
-  margin: 0;
-  border-radius: 0 !important;
-  padding: 0 !important;
-  height: auto !important;
-  color: var(--sui-button-link-foreground-color, var(--sui-primary-accent-color-text));
-}
-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(:is(:root, :host)[data-underline-links='true']) button.link .label {
-  text-decoration: underline;
-}
-button.link:is(:hover, :focus, :active) .label {
-  text-decoration: var(--sui-button-link-text-decoration-focus, underline);
-}
-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.small :global(.icon) {
-  font-size: var(--sui-font-size-large);
-}
-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.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.pill {
-  border-radius: 80px;
-  padding: var(--sui-button-medium-pill-padding, 0 12px);
-}
-button.flex:not([hidden]) {
-  display: inline-flex;
-  flex: auto;
-  width: -moz-available;
-  width: -webkit-fill-available;
-  width: stretch;
-}
-button.iconic {
-  justify-content: center;
-  padding: 0;
-  aspect-ratio: 1/1;
-}
-button.danger {
-  background-color: var(--sui-error-background-color);
-}
-button .label {
-  padding: 0 4px;
-}
-button > :global(*) {
-  pointer-events: none;
-}
-button :global(:has([slot=start-icon] + [slot=end-icon])) {
-  gap: 0;
-}</style>
+<style lang="scss">
+  button {
+    flex: none;
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    margin: var(--sui-focus-ring-width);
+    border-width: 0;
+    border-style: solid;
+    border-color: transparent;
+    padding: 0;
+    color: var(--sui-control-foreground-color, inherit);
+    background-color: transparent;
+    box-shadow: none;
+    font-family: var(--sui-control-font-family);
+    font-size: var(--sui-control-font-size);
+    line-height: var(--sui-control-line-height);
+    font-weight: var(--sui-font-weight-normal, normal);
+    text-align: start;
+    cursor: pointer;
+    transition: all 200ms;
+
+    &[hidden] {
+      display: none !important;
+    }
+
+    &:not(:disabled):focus-visible {
+      z-index: 1;
+    }
+
+    &:is(.primary, .secondary, .tertiary, .ghost) {
+      justify-content: center;
+      border-width: 1px;
+
+      .label:only-child {
+        padding: 0 4px;
+      }
+    }
+
+    &.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));
+      color: var(--sui-button-primary-foreground-color, var(--sui-primary-accent-color-inverted));
+      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));
+
+      &: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)
+        );
+      }
+
+      &: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)
+        );
+      }
+    }
+
+    &.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));
+      color: var(--sui-button-secondary-foreground-color, var(--sui-primary-accent-color-text));
+      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));
+
+      &: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)
+        );
+      }
+
+      &: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)
+        );
+      }
+
+      &[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)
+        );
+      }
+    }
+
+    &.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));
+      color: var(--sui-button-tertiary-foreground-color, var(--sui-highlight-foreground-color));
+      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));
+
+      &: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)
+        );
+      }
+
+      &: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)
+        );
+      }
+
+      &[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)
+        );
+      }
+    }
+
+    &.ghost {
+      font-weight: var(--sui-button-ghost-font-weight, var(--sui-font-weight-normal, normal));
+
+      &: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)
+        );
+      }
+
+      &:active {
+        color: var(--sui-button-ghost-foreground-color-active);
+        background-color: var(
+          --sui-button-ghost-background-color-active,
+          var(--sui-active-background-color)
+        );
+      }
+
+      &[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)
+        );
+      }
+    }
+
+    &.link {
+      outline: 0;
+      margin: 0;
+      border-radius: 0 !important;
+      padding: 0 !important;
+      height: auto !important;
+      color: var(--sui-button-link-foreground-color, var(--sui-primary-accent-color-text));
+
+      .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(:is(:root, :host)[data-underline-links='true']) & {
+          text-decoration: underline;
+        }
+      }
+
+      &:is(:hover, :focus, :active) {
+        .label {
+          text-decoration: var(--sui-button-link-text-decoration-focus, underline);
+        }
+      }
+    }
+
+    &.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));
+
+      :global {
+        .icon {
+          font-size: var(--sui-font-size-large);
+        }
+      }
+    }
+
+    &.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));
+    }
+
+    &.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));
+    }
+
+    &.pill {
+      border-radius: 80px;
+      padding: var(--sui-button-medium-pill-padding, 0 12px);
+    }
+
+    &.flex:not([hidden]) {
+      display: inline-flex; // Avoid Tailwind .flex class collisions
+      flex: auto;
+      width: -moz-available;
+      width: -webkit-fill-available;
+      width: stretch;
+    }
+
+    &.iconic {
+      justify-content: center;
+      padding: 0;
+      aspect-ratio: 1 / 1;
+    }
+
+    &.danger {
+      background-color: var(--sui-error-background-color);
+    }
+
+    .label {
+      padding: 0 4px;
+    }
+
+    :global {
+      & > * {
+        pointer-events: none;
+      }
+
+      &:has([slot='start-icon'] + [slot='end-icon']) {
+        gap: 0;
+      }
+    }
+  }
+</style>

package/dist/components/button/floating-action-button-wrapper.svelte

@@ -20,23 +20,28 @@
   {@render children?.()}
 </div>
 
-<style>.floating-action-button-wrapper {
-  display: contents;
-}
-@media (width < 768px) {
+<style lang="scss">
   .floating-action-button-wrapper {
-    display: block;
-    position: fixed;
-    inset-inline-end: 16px;
-    inset-block-end: 72px;
-    z-index: 100;
-  }
-  .floating-action-button-wrapper :global(button) {
-    border-radius: 50%;
-    height: 56px;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
-  }
-  .floating-action-button-wrapper :global(button) :global(.icon) {
-    font-size: 32px;
+    display: contents;
+
+    @media (width < 768px) {
+      display: block;
+      position: fixed;
+      inset-inline-end: 16px;
+      inset-block-end: 72px;
+      z-index: 100;
+
+      :global {
+        button {
+          border-radius: 50%;
+          height: 56px;
+          box-shadow: 0 4px 8px #0006;
+
+          .icon {
+            font-size: 32px;
+          }
+        }
+      }
+    }
   }
-}</style>
+</style>

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

@@ -23,6 +23,7 @@
    * `aria-required` attribute.
    * @property {boolean} [invalid] Whether to mark the widget invalid. An alias of the
    * `aria-invalid` 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.
    */
@@ -38,6 +39,7 @@
     readonly = false,
     required = false,
     invalid = false,
+    ariaLabel = undefined,
     children,
     ...restProps
     /* eslint-enable prefer-const */
@@ -55,6 +57,7 @@
   aria-readonly={readonly}
   aria-required={required}
   aria-invalid={invalid}
+  aria-label={ariaLabel}
   {@attach activateGroup()}
 >
   <div role="none" class="inner" inert={disabled}>
@@ -62,45 +65,61 @@
   </div>
 </div>
 
-<style>.select-button-group {
-  flex: none;
-  display: inline-flex;
-  align-items: center;
-  margin: var(--sui-focus-ring-width);
-}
-.select-button-group:focus-visible {
-  outline-width: 0 !important;
-}
-.select-button-group :global(button) {
-  margin: 0 !important;
-  border-radius: 0 !important;
-  color: var(--sui-primary-foreground-color);
-}
-.select-button-group :global(button:first-child) {
-  border-start-start-radius: 4px !important;
-  border-end-start-radius: 4px !important;
-}
-.select-button-group :global(button:not(:first-child)) {
-  border-inline-start-width: 0;
-}
-.select-button-group :global(button:last-child) {
-  border-start-end-radius: 4px !important;
-  border-end-end-radius: 4px !important;
-}
-.select-button-group :global(button[aria-checked=true]) {
-  color: var(--sui-highlight-foreground-color);
-  background-color: var(--sui-selected-background-color);
-}
-.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 :global([aria-disabled=false]) :global(button[aria-disabled=true]) :global(*) {
-  filter: grayscale(1) opacity(0.35);
-}
+<style lang="scss">
+  .select-button-group {
+    flex: none;
+    display: inline-flex;
+    align-items: center;
+    margin: var(--sui-focus-ring-width);
 
-.inner {
-  display: contents;
-}</style>
+    &:focus-visible {
+      outline-width: 0 !important;
+    }
+
+    :global {
+      button {
+        margin: 0 !important;
+        border-radius: 0 !important;
+        color: var(--sui-primary-foreground-color);
+
+        &:first-child {
+          border-start-start-radius: 4px !important;
+          border-end-start-radius: 4px !important;
+        }
+
+        &:not(:first-child) {
+          border-inline-start-width: 0;
+        }
+
+        &:last-child {
+          border-start-end-radius: 4px !important;
+          border-end-end-radius: 4px !important;
+        }
+
+        &[aria-checked='true'] {
+          color: var(--sui-highlight-foreground-color);
+          background-color: var(--sui-selected-background-color);
+        }
+      }
+
+      &[aria-invalid='true'] button {
+        border-color: var(--sui-error-border-color);
+      }
+
+      // Maintain the border opacity
+      &[aria-disabled='false'] {
+        button[aria-disabled='true'] {
+          filter: grayscale(0) opacity(1);
+
+          * {
+            filter: grayscale(1) opacity(0.35);
+          }
+        }
+      }
+    }
+  }
+
+  .inner {
+    display: contents;
+  }
+</style>

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

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