@sveltia/ui 0.42.0 → 0.42.1

package/dist/components/text-editor/text-editor.svelte

@@ -131,28 +131,21 @@
   </Toast>
 {/if}
 
-<style lang="scss">
-  .text-editor {
-    margin: var(--sui-focus-ring-width);
-    width: calc(100% - var(--sui-focus-ring-width) * 2);
-
-    &.flex:not([hidden]) {
-      display: block; // Avoid Tailwind .flex class collisions
-    }
-
-    :global {
-      .sui.text-area {
-        margin: 0 !important;
-        width: 100% !important;
-        min-width: auto;
-
-        textarea {
-          border-start-start-radius: 0 !important;
-          border-start-end-radius: 0 !important;
-          border-end-start-radius: var(--sui-textbox-border-radius) !important;
-          border-end-end-radius: var(--sui-textbox-border-radius) !important;
-        }
-      }
-    }
-  }
-</style>
+<style>.text-editor {
+  margin: var(--sui-focus-ring-width);
+  width: calc(100% - var(--sui-focus-ring-width) * 2);
+}
+.text-editor.flex:not([hidden]) {
+  display: block;
+}
+.text-editor :global(.sui.text-area) {
+  margin: 0 !important;
+  width: 100% !important;
+  min-width: auto;
+}
+.text-editor :global(.sui.text-area) :global(textarea) {
+  border-start-start-radius: 0 !important;
+  border-start-end-radius: 0 !important;
+  border-end-start-radius: var(--sui-textbox-border-radius) !important;
+  border-end-end-radius: var(--sui-textbox-border-radius) !important;
+}</style>

package/dist/components/text-editor/toolbar/toolbar-wrapper.svelte

@@ -34,48 +34,41 @@
   </Toolbar>
 </div>
 
-<style lang="scss">
-  .wrapper {
-    display: contents;
-
-    :global {
-      [role='toolbar'] {
-        position: sticky;
-        top: 0;
-        z-index: 100;
-        display: flex;
-        flex-wrap: wrap;
-        gap: 4px;
-        border-width: 1px 1px 0;
-        border-style: solid;
-        border-color: var(--sui-textbox-border-color);
-        border-start-start-radius: var(--sui-textbox-border-radius);
-        border-start-end-radius: var(--sui-textbox-border-radius);
-        border-end-start-radius: 0;
-        border-end-end-radius: 0;
-        padding: 0 4px;
-        height: auto;
-        min-height: 40px;
-        background-color: var(--sui-tertiary-background-color);
-
-        @media (width < 768px) {
-          flex-wrap: wrap;
-          height: auto;
-        }
-      }
-
-      .sui.menu-button {
-        padding: 0 4px;
-      }
-
-      .sui.button {
-        flex: none;
-        margin: 0 !important;
-      }
-
-      .sui.button-group {
-        gap: 4px;
-      }
-    }
+<style>.wrapper {
+  display: contents;
+}
+.wrapper :global([role=toolbar]) {
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  border-width: 1px 1px 0;
+  border-style: solid;
+  border-color: var(--sui-textbox-border-color);
+  border-start-start-radius: var(--sui-textbox-border-radius);
+  border-start-end-radius: var(--sui-textbox-border-radius);
+  border-end-start-radius: 0;
+  border-end-end-radius: 0;
+  padding: 0 4px;
+  height: auto;
+  min-height: 40px;
+  background-color: var(--sui-tertiary-background-color);
+}
+@media (width < 768px) {
+  .wrapper :global([role=toolbar]) {
+    flex-wrap: wrap;
+    height: auto;
   }
-</style>
+}
+.wrapper :global(.sui.menu-button) {
+  padding: 0 4px;
+}
+.wrapper :global(.sui.button) {
+  flex: none;
+  margin: 0 !important;
+}
+.wrapper :global(.sui.button-group) {
+  gap: 4px;
+}</style>

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>