@sveltia/ui 0.41.5 → 0.42.0

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

@@ -80,75 +80,87 @@
   {/if}
 </div>
 
-<style>.text-area {
-  display: inline-grid;
-  margin: var(--sui-focus-ring-width);
-  min-width: var(--sui-textbox-multiline-min-width);
-}
-.text-area[hidden] {
-  display: none;
-}
-.text-area.flex:not([hidden]) {
-  display: inline-grid;
-  width: -moz-available;
-  width: -webkit-fill-available;
-  width: stretch;
-  min-width: 0;
-}
+<style lang="scss">
+  .text-area {
+    display: inline-grid;
+    margin: var(--sui-focus-ring-width);
+    min-width: var(--sui-textbox-multiline-min-width);
 
-:is(textarea, .clone) {
-  grid-area: 1/1/2/2;
-  display: block;
-  margin: 0;
-  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-multiline-padding);
-  width: 100%;
-  min-height: 8em;
-  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-multiline-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;
-}
-:is(textarea, .clone).resizing {
-  transition-duration: 0ms;
-}
-:is(textarea, .clone):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));
-}
-:is(textarea, .clone):is(:disabled, :read-only) {
-  background-color: var(--sui-disabled-background-color);
-}
+    &[hidden] {
+      display: none;
+    }
 
-textarea {
-  resize: vertical;
-}
-textarea.auto-resize {
-  overflow: hidden;
-  resize: none;
-}
-textarea[aria-invalid=true] {
-  border-color: var(--sui-error-border-color);
-}
+    &.flex:not([hidden]) {
+      display: inline-grid; // Avoid Tailwind .flex class collisions
+      width: -moz-available;
+      width: -webkit-fill-available;
+      width: stretch;
+      min-width: 0;
+    }
+  }
 
-.clone {
-  overflow: hidden;
-  visibility: hidden;
-}
+  :is(textarea, .clone) {
+    grid-area: 1 / 1 / 2 / 2;
+    display: block;
+    margin: 0;
+    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-multiline-padding);
+    width: 100%;
+    min-height: 8em;
+    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-multiline-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;
 
-textarea,
-.clone {
-  white-space: pre-wrap;
-  word-break: break-all;
-}</style>
+    &.resizing {
+      transition-duration: 0ms;
+    }
+
+    &: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)
+      );
+    }
+
+    &:is(:disabled, :read-only) {
+      background-color: var(--sui-disabled-background-color);
+    }
+  }
+
+  textarea {
+    resize: vertical;
+
+    &.auto-resize {
+      overflow: hidden;
+      resize: none;
+    }
+
+    &[aria-invalid='true'] {
+      border-color: var(--sui-error-border-color);
+    }
+  }
+
+  .clone {
+    overflow: hidden;
+    visibility: hidden;
+  }
+
+  textarea,
+  .clone {
+    white-space: pre-wrap;
+    word-break: break-all;
+  }
+</style>

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

@@ -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>