@sveltia/ui 0.41.3 → 0.42.0

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

@@ -39,7 +39,7 @@
     readonly = false,
     required = false,
     invalid = false,
-    'aria-label': ariaLabel,
+    ariaLabel = undefined,
     children,
     oninput,
     ...restProps
@@ -127,109 +127,141 @@
   {/if}
 </div>
 
-<style>.text-input {
-  display: inline-flex;
-  align-items: center;
-  position: relative;
-  margin: var(--sui-focus-ring-width);
-  min-width: var(--sui-textbox-singleline-min-width);
-}
-.text-input.flex:not([hidden]) {
-  display: inline-flex;
-  width: -moz-available;
-  width: -webkit-fill-available;
-  width: stretch;
-  min-width: 0;
-}
-.text-input.monospace {
-  --sui-textbox-font-family: var(--sui-font-family-monospace, monospace);
-}
-
-input:is(:-webkit-autofill, :-webkit-autofill:focus) {
-  transition: background-color 0s 600000s, color 0s 600000s;
-}
-
-input {
-  display: inline-block;
-  flex: auto;
-  border-width: var(--sui-textbox-border-width, 1px);
-  border-color: var(--sui-textbox-border-color);
-  border-radius: var(--sui-textbox-border-radius);
-  padding: var(--sui-textbox-singleline-padding);
-  min-width: 0;
-  height: var(--sui-textbox-height);
-  color: var(--sui-textbox-foreground-color);
-  background-color: var(--sui-textbox-background-color);
-  font-family: var(--sui-textbox-font-family);
-  font-size: var(--sui-textbox-font-size);
-  line-height: var(--sui-textbox-singleline-line-height);
-  font-weight: var(--sui-textbox-font-weight, var(--sui-font-weight-normal, normal));
-  text-align: var(--sui-textbox-text-align, start);
-  text-indent: var(--sui-textbox-text-indent, 0);
-  text-transform: var(--sui-textbox-text-transform, none);
-  letter-spacing: var(--sui-textbox-letter-spacing, normal);
-  word-spacing: var(--sui-word-spacing-normal, normal);
-  transition: all 200ms;
-}
-input: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));
-}
-input:read-only {
-  color: var(--sui-tertiary-foreground-color);
-  border-color: var(--sui-textbox-border-color) !important;
-}
-input:is(:disabled, :read-only) {
-  background-color: var(--sui-disabled-background-color);
-}
-input[aria-invalid=true] {
-  border-color: var(--sui-error-border-color);
-}
-input ~ :global(button) {
-  flex: none;
-  margin-inline-start: -1px;
-  border-width: 1px;
-  border-color: var(--sui-textbox-border-color);
-  height: var(--sui-textbox-height);
-  aspect-ratio: 1/1;
-}
-input ~ :global(button:last-child) {
-  border-start-start-radius: 0;
-  border-start-end-radius: 4px;
-  border-end-end-radius: 4px;
-  border-end-start-radius: 0;
-}
-input ~ :global(button) :global(.icon) {
-  font-size: var(--sui-font-size-xx-large);
-}
-
-.label {
-  position: absolute;
-  inset: var(--sui-textbox-singleline-padding);
-  z-index: 2;
-  display: flex;
-  align-items: center;
-  justify-content: var(--sui-textbox-placeholder-text-align, var(--sui-textbox-text-align, start));
-  pointer-events: none;
-}
-.label.hidden {
-  opacity: 0;
-}
-
-input:focus + .label {
-  opacity: 0;
-}
-
-input::placeholder,
-.label {
-  color: var(--sui-textbox-placeholder-foreground-color, var(--sui-textbox-foreground-color));
-  opacity: var(--sui-textbox-placeholder-opacity, 0.5);
-  font-family: var(--sui-textbox-placeholder-font-family, var(--sui-textbox-font-family));
-  font-size: var(--sui-textbox-placeholder-font-size, var(--sui-textbox-font-size));
-  line-height: var(--sui-textbox-placeholder-singleline-line-height, var(--sui-textbox-singleline-line-height));
-  font-weight: var(--sui-textbox-placeholder-font-weight, var(--sui-textbox-font-weight, var(--sui-font-weight-normal, normal)));
-  text-align: var(--sui-textbox-placeholder-text-align, var(--sui-textbox-text-align, start));
-  text-indent: var(--sui-textbox-placeholder-text-indent, var(--sui-textbox-text-indent, 0));
-  letter-spacing: var(--sui-textbox-placeholder-letter-spacing, var(--sui-textbox-letter-spacing, normal));
-}</style>
+<style lang="scss">
+  .text-input {
+    display: inline-flex;
+    align-items: center;
+    position: relative;
+    margin: var(--sui-focus-ring-width);
+    min-width: var(--sui-textbox-singleline-min-width);
+
+    &.flex:not([hidden]) {
+      display: inline-flex; // Avoid Tailwind .flex class collisions
+      width: -moz-available;
+      width: -webkit-fill-available;
+      width: stretch;
+      min-width: 0;
+    }
+
+    &.monospace {
+      --sui-textbox-font-family: var(--sui-font-family-monospace, monospace);
+    }
+  }
+
+  // https://stackoverflow.com/a/68240841
+  input:is(:-webkit-autofill, :-webkit-autofill:focus) {
+    transition:
+      background-color 0s 600000s,
+      color 0s 600000s;
+  }
+
+  input {
+    display: inline-block;
+    flex: auto;
+    border-width: var(--sui-textbox-border-width, 1px);
+    border-color: var(--sui-textbox-border-color);
+    border-radius: var(--sui-textbox-border-radius);
+    padding: var(--sui-textbox-singleline-padding);
+    min-width: 0;
+    height: var(--sui-textbox-height);
+    color: var(--sui-textbox-foreground-color);
+    background-color: var(--sui-textbox-background-color);
+    font-family: var(--sui-textbox-font-family);
+    font-size: var(--sui-textbox-font-size);
+    line-height: var(--sui-textbox-singleline-line-height);
+    font-weight: var(--sui-textbox-font-weight, var(--sui-font-weight-normal, normal));
+    text-align: var(--sui-textbox-text-align, start);
+    text-indent: var(--sui-textbox-text-indent, 0);
+    text-transform: var(--sui-textbox-text-transform, none);
+    letter-spacing: var(--sui-textbox-letter-spacing, normal);
+    word-spacing: var(--sui-word-spacing-normal, normal);
+    transition: all 200ms;
+
+    &: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)
+      );
+    }
+
+    &:read-only {
+      color: var(--sui-tertiary-foreground-color);
+      border-color: var(--sui-textbox-border-color) !important;
+    }
+
+    &:is(:disabled, :read-only) {
+      background-color: var(--sui-disabled-background-color);
+    }
+
+    &[aria-invalid='true'] {
+      border-color: var(--sui-error-border-color);
+    }
+
+    :global {
+      & ~ button {
+        flex: none;
+        margin-inline-start: -1px;
+        border-width: 1px;
+        border-color: var(--sui-textbox-border-color);
+        height: var(--sui-textbox-height);
+        aspect-ratio: 1 / 1;
+
+        &:last-child {
+          border-start-start-radius: 0;
+          border-start-end-radius: 4px;
+          border-end-end-radius: 4px;
+          border-end-start-radius: 0;
+        }
+
+        .icon {
+          font-size: var(--sui-font-size-xx-large);
+        }
+      }
+    }
+  }
+
+  .label {
+    position: absolute;
+    inset: var(--sui-textbox-singleline-padding);
+    z-index: 2;
+    display: flex;
+    align-items: center;
+    justify-content: var(
+      --sui-textbox-placeholder-text-align,
+      var(--sui-textbox-text-align, start)
+    );
+    pointer-events: none;
+
+    &.hidden {
+      opacity: 0;
+    }
+  }
+
+  input:focus + .label {
+    opacity: 0;
+  }
+
+  input::placeholder,
+  .label {
+    color: var(--sui-textbox-placeholder-foreground-color, var(--sui-textbox-foreground-color));
+    opacity: var(--sui-textbox-placeholder-opacity, 0.5);
+    font-family: var(--sui-textbox-placeholder-font-family, var(--sui-textbox-font-family));
+    font-size: var(--sui-textbox-placeholder-font-size, var(--sui-textbox-font-size));
+    line-height: var(
+      --sui-textbox-placeholder-singleline-line-height,
+      var(--sui-textbox-singleline-line-height)
+    );
+    font-weight: var(
+      --sui-textbox-placeholder-font-weight,
+      var(--sui-textbox-font-weight, var(--sui-font-weight-normal, normal))
+    );
+    text-align: var(--sui-textbox-placeholder-text-align, var(--sui-textbox-text-align, start));
+    text-indent: var(--sui-textbox-placeholder-text-indent, var(--sui-textbox-text-indent, 0));
+    letter-spacing: var(
+      --sui-textbox-placeholder-letter-spacing,
+      var(--sui-textbox-letter-spacing, normal)
+    );
+  }
+</style>

package/dist/components/toast/toast.svelte

@@ -137,92 +137,107 @@
   {@render children?.()}
 </div>
 
-<style>.toast-base {
-  position: fixed;
-  inset: 16px;
-  z-index: 99999;
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-end;
-  align-items: flex-end;
-  gap: 8px;
-  margin: 0;
-  border: 0;
-  padding: 0;
-  width: auto;
-  height: auto;
-  background-color: transparent;
-  font-family: var(--sui-font-family-default);
-  font-size: var(--sui-font-size-default);
-  font-weight: var(--sui-font-weight-normal, normal);
-  text-align: center;
-  pointer-events: none;
-  -webkit-user-select: none;
-  user-select: none;
-}
-
-:global(body:has(.sui.bottom-navigation:not([inert]:not([hidden])))) :global(.toast-base) {
-  bottom: calc(var(--sui-bottom-navigation-height) + 16px);
-}
-
-.toast {
-  position: absolute;
-  width: max-content;
-  max-width: 80dvw;
-  box-shadow: 0 8px 16px var(--sui-popup-shadow-color);
-  opacity: 1;
-  transition-duration: 250ms;
-  will-change: opacity;
-}
-.toast[aria-hidden=true] {
-  display: block;
-  opacity: 0;
-}
-.toast.top-left {
-  inset-block-start: 0;
-  inset-block-end: auto;
-  inset-inline-start: 0;
-  inset-inline-end: auto;
-}
-.toast.top-center {
-  inset-block-start: 0;
-  inset-block-end: auto;
-  inset-inline-start: 50%;
-  inset-inline-end: auto;
-}
-.toast.top-center:dir(ltr) {
-  transform: translateX(-50%);
-}
-.toast.top-center:dir(rtl) {
-  transform: translateX(50%);
-}
-.toast.top-right {
-  inset-block-start: 0;
-  inset-block-end: auto;
-  inset-inline-start: auto;
-  inset-inline-end: 0;
-}
-.toast.bottom-left {
-  inset-block-start: auto;
-  inset-block-end: 0;
-  inset-inline-start: 0;
-  inset-inline-end: auto;
-}
-.toast.bottom-center {
-  inset-block-start: auto;
-  inset-block-end: 0;
-  inset-inline-start: 50%;
-  inset-inline-end: auto;
-}
-.toast.bottom-center:dir(ltr) {
-  transform: translateX(-50%);
-}
-.toast.bottom-center:dir(rtl) {
-  transform: translateX(50%);
-}
-.toast.bottom-right {
-  inset-block-start: auto;
-  inset-block-end: 0;
-  inset-inline-start: auto;
-  inset-inline-end: 0;
-}</style>
+<style lang="scss">
+  .toast-base {
+    position: fixed;
+    inset: 16px;
+    z-index: 99999;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    align-items: flex-end;
+    gap: 8px;
+    margin: 0;
+    border: 0;
+    padding: 0;
+    width: auto;
+    height: auto;
+    background-color: transparent;
+    font-family: var(--sui-font-family-default);
+    font-size: var(--sui-font-size-default);
+    font-weight: var(--sui-font-weight-normal, normal);
+    text-align: center;
+    pointer-events: none;
+    -webkit-user-select: none;
+    user-select: none;
+  }
+
+  :global {
+    body:has(.sui.bottom-navigation:not([inert]:not([hidden]))) .toast-base {
+      bottom: calc(var(--sui-bottom-navigation-height) + 16px);
+    }
+  }
+
+  .toast {
+    position: absolute;
+    width: max-content;
+    max-width: 80dvw;
+    box-shadow: 0 8px 16px var(--sui-popup-shadow-color);
+    opacity: 1;
+    transition-duration: 250ms;
+    will-change: opacity;
+
+    &[aria-hidden='true'] {
+      display: block;
+      opacity: 0;
+    }
+
+    &.top-left {
+      inset-block-start: 0;
+      inset-block-end: auto;
+      inset-inline-start: 0;
+      inset-inline-end: auto;
+    }
+
+    &.top-center {
+      inset-block-start: 0;
+      inset-block-end: auto;
+      inset-inline-start: 50%;
+      inset-inline-end: auto;
+
+      &:dir(ltr) {
+        transform: translateX(-50%);
+      }
+
+      &:dir(rtl) {
+        transform: translateX(50%);
+      }
+    }
+
+    &.top-right {
+      inset-block-start: 0;
+      inset-block-end: auto;
+      inset-inline-start: auto;
+      inset-inline-end: 0;
+    }
+
+    &.bottom-left {
+      inset-block-start: auto;
+      inset-block-end: 0;
+      inset-inline-start: 0;
+      inset-inline-end: auto;
+    }
+
+    &.bottom-center {
+      inset-block-start: auto;
+      inset-block-end: 0;
+      inset-inline-start: 50%;
+      inset-inline-end: auto;
+
+      &:dir(ltr) {
+        transform: translateX(-50%);
+      }
+
+      &:dir(rtl) {
+        transform: translateX(50%);
+      }
+    }
+
+    &.bottom-right {
+      inset-block-start: auto;
+      inset-block-end: 0;
+      inset-inline-start: auto;
+      inset-inline-end: 0;
+    }
+  }
+</style>

package/dist/components/toolbar/toolbar.svelte

@@ -18,6 +18,7 @@
    * @property {'horizontal' | 'vertical'} [orientation] Orientation of the widget. An alias of the
    * `aria-orientation` attribute.
    * @property {'primary' | 'secondary'} [variant] The style variant of the toolbar.
+   * @property {string} [ariaLabel] The `aria-label` attribute on the wrapper element.
    * @property {Snippet} [children] Primary slot content.
    */
 
@@ -31,6 +32,7 @@
     disabled = false,
     orientation = 'horizontal',
     variant = undefined,
+    ariaLabel = undefined,
     children,
     ...restProps
     /* eslint-enable prefer-const */
@@ -45,65 +47,82 @@
   aria-hidden={hidden}
   aria-disabled={disabled}
   aria-orientation={orientation}
+  aria-label={ariaLabel}
 >
   <div role="none" class="inner" inert={disabled}>
     {@render children?.()}
   </div>
 </div>
 
-<style>[role=toolbar] {
-  --toolbar-size: var(--sui-secondary-toolbar-size);
-  flex: none !important;
-  display: flex;
-  align-items: center;
-  padding-inline: 8px;
-  background-color: var(--toolbar-background-color, transparent);
-}
-[role=toolbar].primary {
-  --toolbar-size: var(--sui-primary-toolbar-size);
-}
-@media (width < 768px) {
-  [role=toolbar].secondary {
-    padding-inline: 0;
+<style lang="scss">
+  [role='toolbar'] {
+    --toolbar-size: var(--sui-secondary-toolbar-size);
+    flex: none !important;
+    display: flex;
+    align-items: center;
+    padding-inline: 8px;
+    background-color: var(--toolbar-background-color, transparent);
+
+    &.primary {
+      --toolbar-size: var(--sui-primary-toolbar-size);
+    }
+
+    &.secondary {
+      @media (width < 768px) {
+        padding-inline: 0;
+      }
+    }
+
+    &[aria-orientation='horizontal'] {
+      height: var(--toolbar-size);
+    }
+
+    &[aria-orientation='vertical'] {
+      flex-direction: column;
+      width: var(--toolbar-size);
+    }
+
+    :global {
+      button[role='button']:is([aria-pressed='true'], [aria-checked='true']) {
+        background-color: var(--sui-selected-background-color);
+      }
+
+      h2 {
+        flex: auto;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        margin: 0;
+        padding-inline-end: 12px;
+        min-width: 0;
+        font-size: var(--sui-font-size-x-large);
+
+        &:first-child {
+          padding-inline-start: 12px;
+        }
+
+        span:not(.sui.truncated-text) {
+          font-size: var(--sui-font-size-small);
+          font-weight: var(--sui-font-weight-normal, normal);
+          opacity: 0.8;
+        }
+      }
+
+      .divider {
+        &[aria-orientation='horizontal'] {
+          margin: 0 4px;
+          width: calc(100% - 8px);
+        }
+
+        &[aria-orientation='vertical'] {
+          margin: 4px 0;
+          height: calc(100% - 8px);
+        }
+      }
+    }
   }
-}
-[role=toolbar][aria-orientation=horizontal] {
-  height: var(--toolbar-size);
-}
-[role=toolbar][aria-orientation=vertical] {
-  flex-direction: column;
-  width: var(--toolbar-size);
-}
-[role=toolbar] :global(button[role=button]:is([aria-pressed=true], [aria-checked=true])) {
-  background-color: var(--sui-selected-background-color);
-}
-[role=toolbar] :global(h2) {
-  flex: auto;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin: 0;
-  padding-inline-end: 12px;
-  min-width: 0;
-  font-size: var(--sui-font-size-x-large);
-}
-[role=toolbar] :global(h2:first-child) {
-  padding-inline-start: 12px;
-}
-[role=toolbar] :global(h2) :global(span:not(.sui.truncated-text)) {
-  font-size: var(--sui-font-size-small);
-  font-weight: var(--sui-font-weight-normal, normal);
-  opacity: 0.8;
-}
-[role=toolbar] :global(.divider[aria-orientation=horizontal]) {
-  margin: 0 4px;
-  width: calc(100% - 8px);
-}
-[role=toolbar] :global(.divider[aria-orientation=vertical]) {
-  margin: 4px 0;
-  height: calc(100% - 8px);
-}
 
-.inner {
-  display: contents;
-}</style>
+  .inner {
+    display: contents;
+  }
+</style>

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

@@ -31,6 +31,10 @@ declare const Toolbar: import("svelte").Component<{
      * The style variant of the toolbar.
      */
     variant?: "primary" | "secondary" | undefined;
+    /**
+     * The `aria-label` attribute on the wrapper element.
+     */
+    ariaLabel?: string | undefined;
     /**
      * Primary slot content.
      */
@@ -59,6 +63,10 @@ type Props = {
      * The style variant of the toolbar.
      */
     variant?: "primary" | "secondary" | undefined;
+    /**
+     * The `aria-label` attribute on the wrapper element.
+     */
+    ariaLabel?: string | undefined;
     /**
      * Primary slot content.
      */

package/dist/components/typography/truncated-text.svelte

@@ -26,10 +26,12 @@
   {@render children?.()}
 </span>
 
-<style>.truncated-text {
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  white-space: normal;
-  overflow-wrap: anywhere;
-}</style>
+<style lang="scss">
+  .truncated-text {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    white-space: normal;
+    overflow-wrap: anywhere;
+  }
+</style>