@sveltia/ui 0.41.5 → 0.42.0

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

@@ -131,21 +131,28 @@
   </Toast>
 {/if}
 
-<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>
+<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>

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

@@ -34,41 +34,48 @@
   </Toolbar>
 </div>
 
-<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 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;
+      }
+    }
   }
-}
-.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>
+</style>

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>