@sveltia/ui 0.42.0 → 0.43.0

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

@@ -199,91 +199,72 @@
   />
 </div>
 
-<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);
+<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;
+}
 
-    &.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>
+.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>

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

@@ -102,55 +102,45 @@
   </Button>
 </div>
 
-<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>
+<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>

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

@@ -115,67 +115,56 @@
   {/if}
 </div>
 
-<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>
+<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>

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

@@ -96,64 +96,49 @@
   </Button>
 </div>
 
-<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>
+<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>

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>