@sveltia/ui 0.42.0 → 0.42.1

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

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

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

@@ -127,141 +127,109 @@
   {/if}
 </div>
 
-<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>
+<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>

package/dist/components/toast/toast.svelte

@@ -137,107 +137,92 @@
   {@render children?.()}
 </div>
 
-<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>
+<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>