@sveltia/ui 0.41.3 → 0.42.0

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

@@ -199,72 +199,91 @@
   />
 </div>
 
-<style>.number-input {
-  display: inline-flex;
-  align-items: center;
-  margin: var(--sui-focus-ring-width);
-  min-width: var(--sui-textbox-singleline-min-width);
-}
-.number-input.flex:not([hidden]) {
-  display: inline-flex;
-  width: -moz-available;
-  width: -webkit-fill-available;
-  width: stretch;
-  min-width: 0;
-}
-.number-input :global(:not(:first-child)) :global(input) {
-  border-start-start-radius: 0;
-  border-end-start-radius: 0;
-}
-.number-input :global(:not(:last-child)) :global(input) {
-  border-start-end-radius: 0;
-  border-end-end-radius: 0;
-}
-.number-input :global(:not(.disabled)) :global(button[aria-disabled=true]) {
-  filter: grayscale(0) opacity(1);
-}
-.number-input :global(:not(.disabled)) :global(button[aria-disabled=true]) :global(*) {
-  filter: grayscale(1) opacity(0.35);
-}
-.number-input :global(.text-input) {
-  flex: auto;
-  margin: 0 !important;
-  width: 0;
-  min-width: 0 !important;
-}
+<style lang="scss">
+  .number-input {
+    display: inline-flex;
+    align-items: center;
+    margin: var(--sui-focus-ring-width);
+    min-width: var(--sui-textbox-singleline-min-width);
 
-.buttons {
-  display: flex;
-  flex-direction: column;
-  width: 24px;
-  height: var(--sui-textbox-height);
-}
-.buttons :global(button) {
-  flex: none;
-  margin: 0 !important;
-  border-width: 1px;
-  border-color: var(--sui-textbox-border-color);
-  width: 100%;
-  height: 50%;
-}
-.buttons :global(button:first-of-type) {
-  border-block-start-width: 1px;
-  border-block-end-width: 0;
-  border-inline-end-width: 0;
-  border-inline-start-width: 1px;
-  border-start-end-radius: 0;
-  border-end-end-radius: 0;
-  border-end-start-radius: 0;
-}
-.buttons :global(button:last-of-type) {
-  border-block-start-width: 0;
-  border-block-end-width: 1px;
-  border-inline-end-width: 0;
-  border-inline-start-width: 1px;
-  border-start-start-radius: 0;
-  border-start-end-radius: 0;
-  border-end-end-radius: 0;
-}
-.buttons :global(button) :global(.icon) {
-  font-size: 20px;
-}</style>
+    &.flex:not([hidden]) {
+      display: inline-flex; // Avoid Tailwind .flex class collisions
+      width: -moz-available;
+      width: -webkit-fill-available;
+      width: stretch;
+      min-width: 0;
+    }
+
+    :global {
+      :not(:first-child) input {
+        border-start-start-radius: 0;
+        border-end-start-radius: 0;
+      }
+
+      :not(:last-child) input {
+        border-start-end-radius: 0;
+        border-end-end-radius: 0;
+      }
+
+      // Maintain the border opacity
+      &:not(.disabled) {
+        button[aria-disabled='true'] {
+          filter: grayscale(0) opacity(1);
+
+          * {
+            filter: grayscale(1) opacity(0.35);
+          }
+        }
+      }
+
+      .text-input {
+        flex: auto;
+        margin: 0 !important;
+        width: 0; // = auto
+        min-width: 0 !important;
+      }
+    }
+  }
+
+  .buttons {
+    display: flex;
+    flex-direction: column;
+    width: 24px;
+    height: var(--sui-textbox-height);
+
+    :global {
+      button {
+        flex: none;
+        margin: 0 !important;
+        border-width: 1px;
+        border-color: var(--sui-textbox-border-color);
+        width: 100%;
+        height: 50%;
+
+        &:first-of-type {
+          border-block-start-width: 1px;
+          border-block-end-width: 0;
+          border-inline-end-width: 0;
+          border-inline-start-width: 1px;
+          border-start-end-radius: 0;
+          border-end-end-radius: 0;
+          border-end-start-radius: 0;
+        }
+
+        &:last-of-type {
+          border-block-start-width: 0;
+          border-block-end-width: 1px;
+          border-inline-end-width: 0;
+          border-inline-start-width: 1px;
+          border-start-start-radius: 0;
+          border-start-end-radius: 0;
+          border-end-end-radius: 0;
+        }
+
+        .icon {
+          font-size: 20px;
+        }
+      }
+    }
+  }
+</style>

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

@@ -102,45 +102,55 @@
   </Button>
 </div>
 
-<style>.password-input {
-  display: inline-flex;
-  align-items: center;
-  margin: var(--sui-focus-ring-width);
-  min-width: var(--sui-textbox-singleline-min-width);
-}
-.password-input.flex:not([hidden]) {
-  display: inline-flex;
-  width: -moz-available;
-  width: -webkit-fill-available;
-  width: stretch;
-  min-width: 0;
-}
-.password-input :global(.text-input) {
-  flex: auto;
-  margin: 0 !important;
-  width: 0;
-  min-width: 0 !important;
-}
-.password-input :global(input) {
-  border-start-end-radius: 0;
-  border-end-end-radius: 0;
-}
-.password-input :global(button) {
-  flex: none;
-  margin-block: 0;
-  margin-inline-start: -1px;
-  margin-inline-end: 0;
-  border-width: 1px;
-  border-color: var(--sui-textbox-border-color);
-  width: var(--sui-textbox-height);
-  aspect-ratio: 1/1;
-}
-.password-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;
-}
-.password-input :global(button) :global(.icon) {
-  font-size: var(--sui-font-size-xx-large);
-}</style>
+<style lang="scss">
+  .password-input {
+    display: inline-flex;
+    align-items: center;
+    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;
+    }
+
+    :global {
+      .text-input {
+        flex: auto;
+        margin: 0 !important;
+        width: 0; // = auto
+        min-width: 0 !important;
+      }
+
+      input {
+        border-start-end-radius: 0;
+        border-end-end-radius: 0;
+      }
+
+      button {
+        flex: none;
+        margin-block: 0;
+        margin-inline-start: -1px;
+        margin-inline-end: 0;
+        border-width: 1px;
+        border-color: var(--sui-textbox-border-color);
+        width: 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);
+        }
+      }
+    }
+  }
+</style>

package/dist/components/text-field/search-bar.svelte

@@ -115,56 +115,67 @@
   {/if}
 </div>
 
-<style>.search-bar {
-  display: inline-flex;
-  align-items: center;
-  position: relative;
-  margin: var(--sui-focus-ring-width);
-  min-width: var(--sui-textbox-singleline-min-width);
-}
-.search-bar.flex:not([hidden]) {
-  display: inline-flex;
-  width: -moz-available;
-  width: -webkit-fill-available;
-  width: stretch;
-  min-width: 0;
-}
-.search-bar > span {
-  position: absolute;
-  inset-block: 0;
-  inset-inline-start: 0;
-  inset-inline-end: auto;
-  z-index: 2;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--sui-button-medium-height);
-  height: var(--sui-button-medium-height);
-}
-.search-bar :global(.icon) {
-  font-size: calc(var(--sui-textbox-height) * 0.6);
-  opacity: 0.5;
-}
-.search-bar > :global(button) {
-  position: absolute;
-  inset-block: 0;
-  inset-inline-start: auto;
-  inset-inline-end: 0;
-  z-index: 2;
-  margin: 0 !important;
-  height: var(--sui-button-medium-height);
-}
-.search-bar :global(.label) {
-  --sui-textbox-singleline-padding: 0 36px;
-}
-.search-bar :global(.text-input) {
-  flex: auto;
-  margin: 0 !important;
-  width: 0;
-  min-width: 0 !important;
-}
-.search-bar :global(input) {
-  z-index: 1;
-  padding: 0 var(--sui-button-medium-height) !important;
-  width: 100%;
-}</style>
+<style lang="scss">
+  .search-bar {
+    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;
+    }
+
+    & > span {
+      position: absolute;
+      inset-block: 0;
+      inset-inline-start: 0;
+      inset-inline-end: auto;
+      z-index: 2;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: var(--sui-button-medium-height);
+      height: var(--sui-button-medium-height);
+    }
+
+    :global {
+      .icon {
+        font-size: calc(var(--sui-textbox-height) * 0.6);
+        opacity: 0.5;
+      }
+
+      & > button {
+        position: absolute;
+        inset-block: 0;
+        inset-inline-start: auto;
+        inset-inline-end: 0;
+        z-index: 2;
+        margin: 0 !important;
+        height: var(--sui-button-medium-height);
+      }
+
+      .label {
+        --sui-textbox-singleline-padding: 0 36px;
+      }
+
+      .text-input {
+        flex: auto;
+        margin: 0 !important;
+        width: 0; // = auto
+        min-width: 0 !important;
+      }
+
+      input {
+        z-index: 1;
+        padding: 0 var(--sui-button-medium-height) !important;
+        width: 100%;
+      }
+    }
+  }
+</style>

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

@@ -96,49 +96,64 @@
   </Button>
 </div>
 
-<style>.secret-input {
-  display: inline-flex;
-  align-items: center;
-  margin: var(--sui-focus-ring-width);
-  min-width: var(--sui-textbox-singleline-min-width);
-}
-.secret-input.flex:not([hidden]) {
-  display: inline-flex;
-  width: -moz-available;
-  width: -webkit-fill-available;
-  width: stretch;
-  min-width: 0;
-}
-.secret-input.show :global(input) {
-  -webkit-text-security: none;
-}
-.secret-input :global(.text-input) {
-  flex: auto;
-  margin: 0 !important;
-  width: 0;
-  min-width: 0 !important;
-}
-.secret-input :global(input) {
-  border-start-end-radius: 0;
-  border-end-end-radius: 0;
-  -webkit-text-security: disc;
-}
-.secret-input :global(button) {
-  flex: none;
-  margin-block: 0;
-  margin-inline-start: -1px;
-  margin-inline-end: 0;
-  border-width: 1px;
-  border-color: var(--sui-textbox-border-color);
-  width: var(--sui-textbox-height);
-  aspect-ratio: 1/1;
-}
-.secret-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;
-}
-.secret-input :global(button) :global(.icon) {
-  font-size: var(--sui-font-size-xx-large);
-}</style>
+<style lang="scss">
+  .secret-input {
+    display: inline-flex;
+    align-items: center;
+    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;
+    }
+
+    &.show {
+      :global {
+        input {
+          -webkit-text-security: none;
+        }
+      }
+    }
+
+    :global {
+      .text-input {
+        flex: auto;
+        margin: 0 !important;
+        width: 0; // = auto
+        min-width: 0 !important;
+      }
+
+      input {
+        border-start-end-radius: 0;
+        border-end-end-radius: 0;
+        -webkit-text-security: disc;
+      }
+
+      button {
+        flex: none;
+        margin-block: 0;
+        margin-inline-start: -1px;
+        margin-inline-end: 0;
+        border-width: 1px;
+        border-color: var(--sui-textbox-border-color);
+        width: 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);
+        }
+      }
+    }
+  }
+</style>

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>