@sveltia/ui 0.42.0 → 0.42.1

package/dist/components/tabs/tab-box.svelte

@@ -33,12 +33,9 @@
   {@render children?.()}
 </div>
 
-<style lang="scss">
-  .tab-box {
-    display: flex;
-
-    &.vertical {
-      flex-direction: column;
-    }
-  }
-</style>
+<style>.tab-box {
+  display: flex;
+}
+.tab-box.vertical {
+  flex-direction: column;
+}</style>

package/dist/components/tabs/tab-list.svelte

@@ -119,94 +119,76 @@
   <div role="none" class="indicator" style={indicatorStyle}></div>
 </div>
 
-<style lang="scss">
-  .tab-list {
-    flex: none;
-    position: relative;
-    display: flex;
-    align-items: center;
-    margin: var(--sui-tab-list-margin, var(--sui-focus-ring-width));
-    border-color: var(--sui-tab-list-border-color, var(--sui-control-border-color));
-    border-radius: var(--sui-tab-list-border-radius, 0);
-    background-color: var(--sui-tab-list-background-color, transparent);
-
-    &[aria-orientation='horizontal'] {
-      gap: var(--sui-horizontal-tab-list-gap, var(--sui-tab-list-gap, 8px));
-      margin-block: var(--sui-horizontal-tab-list-margin-block, 0 32px);
-      margin-inline: var(--sui-horizontal-tab-list-margin-inline, 0);
-      border-block-width: var(--sui-horizontal-tab-list-border-block-width, 0 1px);
-      border-inline-width: var(--sui-horizontal-tab-list-border-inline-width, 0 0);
-      padding: var(--sui-horizontal-tab-list-padding, var(--sui-tab-list-padding, 0 16px));
-
-      :global {
-        button {
-          width: var(--sui-horizontal-tab-width, var(--sui-tab-width, auto));
-          height: var(--sui-horizontal-tab-height, var(--sui-tab-height, 100%));
-          justify-content: var(--sui-horizontal-tab-justify-content, center);
-        }
-      }
-
-      .indicator {
-        border-block-width: var(--sui-horizontal-tab-list-indicator-border-block-width, 0 2px);
-        border-inline-width: var(--sui-horizontal-tab-list-indicator-border-inline-width, 0 0);
-      }
-    }
-
-    &[aria-orientation='vertical'] {
-      gap: var(--sui-vertical-tab-list-gap, var(--sui-tab-list-gap, 8px));
-      flex-direction: column;
-      margin-block: var(--sui-vertical-tab-list-margin-block, 0);
-      margin-inline: var(--sui-vertical-tab-list-margin-inline, 0 32px);
-      border-block-width: var(--sui-vertical-tab-list-border-block-width, 0 0);
-      border-inline-width: var(--sui-vertical-tab-list-border-inline-width, 0 1px);
-      padding: var(--sui-vertical-tab-list-padding, var(--sui-tab-list-padding, 8px 0));
-      width: var(--sui-vertical-tab-list-width, auto);
-
-      :global {
-        button {
-          justify-content: var(--sui-vertical-tab-justify-content, flex-start);
-          padding-inline-end: 32px;
-          width: var(--sui-vertical-tab-width, var(--sui-tab-width, 100%));
-          height: var(--sui-vertical-tab-height, var(--sui-tab-height, auto));
-        }
-      }
-
-      .indicator {
-        border-block-width: var(--sui-vertical-tab-list-indicator-border-block-width, 0 0);
-        border-inline-width: var(--sui-vertical-tab-list-indicator-border-inline-width, 0 2px);
-      }
-    }
-
-    :global {
-      button {
-        position: relative;
-        z-index: 1;
-        border-color: transparent;
-        margin: 0 !important;
-        border-radius: var(--sui-tab-border-radius, 0);
-        font-family: var(--sui-tab-font-family, var(--sui-control-font-family, inherit));
-        font-size: var(--sui-tab-font-size, var(--sui-control-font-size, inherit));
-        font-weight: var(
-          --sui-tab-font-weight,
-          var(--sui-control-font-weight, var(--sui-font-weight-normal, normal))
-        );
-      }
-    }
-  }
-
-  .inner {
-    display: contents;
-  }
-
-  .indicator {
-    position: absolute;
-    z-index: 0;
-    inset: auto;
-    border-radius: var(--sui-tab-list-indicator-border-radius, 0);
-    border-color: var(--sui-tab-list-indicator-border-color, var(--sui-primary-accent-color-light));
-    background-color: var(--sui-tab-list-indicator-background-color, transparent);
-    box-shadow: var(--sui-tab-list-indicator-box-shadow, none);
-    pointer-events: none;
-    transition: var(--sui-tab-list-indicator-transition, all 200ms);
-  }
-</style>
+<style>.tab-list {
+  flex: none;
+  position: relative;
+  display: flex;
+  align-items: center;
+  margin: var(--sui-tab-list-margin, var(--sui-focus-ring-width));
+  border-color: var(--sui-tab-list-border-color, var(--sui-control-border-color));
+  border-radius: var(--sui-tab-list-border-radius, 0);
+  background-color: var(--sui-tab-list-background-color, transparent);
+}
+.tab-list[aria-orientation=horizontal] {
+  gap: var(--sui-horizontal-tab-list-gap, var(--sui-tab-list-gap, 8px));
+  margin-block: var(--sui-horizontal-tab-list-margin-block, 0 32px);
+  margin-inline: var(--sui-horizontal-tab-list-margin-inline, 0);
+  border-block-width: var(--sui-horizontal-tab-list-border-block-width, 0 1px);
+  border-inline-width: var(--sui-horizontal-tab-list-border-inline-width, 0 0);
+  padding: var(--sui-horizontal-tab-list-padding, var(--sui-tab-list-padding, 0 16px));
+}
+.tab-list[aria-orientation=horizontal] :global(button) {
+  width: var(--sui-horizontal-tab-width, var(--sui-tab-width, auto));
+  height: var(--sui-horizontal-tab-height, var(--sui-tab-height, 100%));
+  justify-content: var(--sui-horizontal-tab-justify-content, center);
+}
+.tab-list[aria-orientation=horizontal] .indicator {
+  border-block-width: var(--sui-horizontal-tab-list-indicator-border-block-width, 0 2px);
+  border-inline-width: var(--sui-horizontal-tab-list-indicator-border-inline-width, 0 0);
+}
+.tab-list[aria-orientation=vertical] {
+  gap: var(--sui-vertical-tab-list-gap, var(--sui-tab-list-gap, 8px));
+  flex-direction: column;
+  margin-block: var(--sui-vertical-tab-list-margin-block, 0);
+  margin-inline: var(--sui-vertical-tab-list-margin-inline, 0 32px);
+  border-block-width: var(--sui-vertical-tab-list-border-block-width, 0 0);
+  border-inline-width: var(--sui-vertical-tab-list-border-inline-width, 0 1px);
+  padding: var(--sui-vertical-tab-list-padding, var(--sui-tab-list-padding, 8px 0));
+  width: var(--sui-vertical-tab-list-width, auto);
+}
+.tab-list[aria-orientation=vertical] :global(button) {
+  justify-content: var(--sui-vertical-tab-justify-content, flex-start);
+  padding-inline-end: 32px;
+  width: var(--sui-vertical-tab-width, var(--sui-tab-width, 100%));
+  height: var(--sui-vertical-tab-height, var(--sui-tab-height, auto));
+}
+.tab-list[aria-orientation=vertical] .indicator {
+  border-block-width: var(--sui-vertical-tab-list-indicator-border-block-width, 0 0);
+  border-inline-width: var(--sui-vertical-tab-list-indicator-border-inline-width, 0 2px);
+}
+.tab-list :global(button) {
+  position: relative;
+  z-index: 1;
+  border-color: transparent;
+  margin: 0 !important;
+  border-radius: var(--sui-tab-border-radius, 0);
+  font-family: var(--sui-tab-font-family, var(--sui-control-font-family, inherit));
+  font-size: var(--sui-tab-font-size, var(--sui-control-font-size, inherit));
+  font-weight: var(--sui-tab-font-weight, var(--sui-control-font-weight, var(--sui-font-weight-normal, normal)));
+}
+
+.inner {
+  display: contents;
+}
+
+.indicator {
+  position: absolute;
+  z-index: 0;
+  inset: auto;
+  border-radius: var(--sui-tab-list-indicator-border-radius, 0);
+  border-color: var(--sui-tab-list-indicator-border-color, var(--sui-primary-accent-color-light));
+  background-color: var(--sui-tab-list-indicator-background-color, transparent);
+  box-shadow: var(--sui-tab-list-indicator-box-shadow, none);
+  pointer-events: none;
+  transition: var(--sui-tab-list-indicator-transition, all 200ms);
+}</style>

package/dist/components/tabs/tab-panel.svelte

@@ -31,14 +31,10 @@
   {@render children?.()}
 </div>
 
-<style lang="scss">
-  .tab-panel {
-    flex: auto;
-    transition: all 200ms;
-
-    &[aria-hidden='true'],
-    &:not([aria-hidden]) {
-      display: none;
-    }
-  }
-</style>
+<style>.tab-panel {
+  flex: auto;
+  transition: all 200ms;
+}
+.tab-panel[aria-hidden=true], .tab-panel:not([aria-hidden]) {
+  display: none;
+}</style>

package/dist/components/tabs/tab-panels.svelte

@@ -30,22 +30,17 @@
   {@render children?.()}
 </div>
 
-<style lang="scss">
-  .tab-panels {
-    flex: auto;
-    display: flex;
-    gap: var(--sui-tab-panels-gap, 16px);
-    overflow: hidden;
-    scroll-snap-type: x mandatory;
-
-    :global {
-      & > .tab-panel {
-        flex: none;
-        display: block !important;
-        width: 100%;
-        overflow: auto;
-        scroll-snap-align: center;
-      }
-    }
-  }
-</style>
+<style>.tab-panels {
+  flex: auto;
+  display: flex;
+  gap: var(--sui-tab-panels-gap, 16px);
+  overflow: hidden;
+  scroll-snap-type: x mandatory;
+}
+.tab-panels > :global(.tab-panel) {
+  flex: none;
+  display: block !important;
+  width: 100%;
+  overflow: auto;
+  scroll-snap-align: center;
+}</style>

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

@@ -117,13 +117,10 @@
   </Toast>
 {/if}
 
-<style lang="scss">
-  .code-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
-    }
-  }
-</style>
+<style>.code-editor {
+  margin: var(--sui-focus-ring-width);
+  width: calc(100% - var(--sui-focus-ring-width) * 2);
+}
+.code-editor.flex:not([hidden]) {
+  display: block;
+}</style>

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

@@ -131,224 +131,163 @@
   {hidden}
 ></div>
 
-<style lang="scss">
-  .lexical-root {
-    overflow: hidden;
-    border: 1px solid var(--sui-textbox-border-color);
-    border-radius: var(--sui-textbox-border-radius) !important;
-    padding: var(--sui-textbox-multiline-padding);
-    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);
-
-    &:not(:first-child) {
-      border-start-start-radius: 0 !important;
-      border-start-end-radius: 0 !important;
-    }
-
-    &.code {
-      padding: 0;
-
-      :global {
-        .code-block {
-          border-radius: 0 !important;
-          min-height: 120px;
-        }
-      }
-    }
-
-    &:focus-visible {
-      outline: 0;
-    }
-
-    &[aria-invalid='true'] {
-      border-color: var(--sui-error-border-color);
-    }
-
-    :global {
-      // Remove the default margin on the first and last child elements of block nodes, including
-      // paragraphs, headings, lists, and code blocks, but keep the default margin on other items,
-      // including UI widgets like radio buttons, checkboxes, and select menus
-      [dir] {
-        &:first-child {
-          margin-top: 0;
-        }
-
-        &:last-child {
-          margin-bottom: 0;
-        }
-      }
-
-      strong.italic {
-        font-style: italic;
-      }
-
-      .strikethrough {
-        text-decoration: line-through;
-      }
-
-      li.nested {
-        list-style-type: none;
-      }
-
-      .code-block {
-        position: relative;
-        display: block;
-        padding-block: 8px;
-        padding-inline-start: 56px;
-        padding-inline-end: 8px;
-        background-color: var(--sui-code-background-color);
-        overflow-x: auto;
-        white-space: pre;
-
-        &:not(:first-child) {
-          margin-top: 1em;
-        }
-
-        &:not(:last-child) {
-          margin-bottom: 1em;
-        }
-
-        &::before {
-          position: absolute;
-          inset-block: 0;
-          inset-inline-start: 0;
-          inset-inline-end: auto;
-          content: attr(data-gutter);
-          padding: 8px;
-          min-width: 40px;
-          color: var(--sui-tertiary-foreground-color);
-          background-color: var(--sui-tertiary-background-color);
-          text-align: end;
-        }
-      }
-
-      [data-lexical-text='true'] {
-        cursor: text;
-      }
-
-      :is(th, td) > p {
-        margin: 0;
-        white-space: normal;
-        word-break: normal;
-      }
-
-      hr {
-        margin: var(--sui-paragraph-margin) 0;
-        border: none;
-        padding: 0;
-
-        &::after {
-          display: block;
-          height: 2px;
-          background-color: var(--sui-control-border-color);
-          line-height: 2px;
-          content: '';
-        }
-      }
-    }
-  }
-
-  // Part of the Default Prism theme
-  :root[data-theme='light'] .lexical-root {
-    :global {
-      .token:is(.comment, .prolog, .doctype, .cdata) {
-        color: slategray;
-      }
-
-      .token.punctuation {
-        color: #999;
-      }
-
-      .token.namespace {
-        opacity: 0.7;
-      }
-
-      .token:is(.property, .tag, .boolean, .number, .constant, .symbol, .deleted) {
-        color: #905;
-      }
-
-      .token:is(.selector, .attr-name, .string, .char, .builtin, .inserted) {
-        color: #690;
-      }
-
-      .token:is(.operator, .entity, .url),
-      .language-css .token.string,
-      .style .token.string {
-        color: #9a6e3a;
-      }
-
-      .token:is(.atrule, .attr-value, .keyword) {
-        color: #07a;
-      }
-
-      .token:is(.function, .class-name) {
-        color: #dd4a68;
-      }
-
-      .token:is(.regex, .important, .variable) {
-        color: #e90;
-      }
-    }
-  }
-
-  // Part of the Tomorrow Night Prism theme
-  :root[data-theme='dark'] .lexical-root {
-    :global {
-      .token:is(.comment, .block-comment, .prolog, .doctype, .cdata) {
-        color: #999;
-      }
-
-      .token.punctuation {
-        color: #ccc;
-      }
-
-      .token:is(.tag, .attr-name, .namespace, .deleted) {
-        color: #e2777a;
-      }
-
-      .token.function-name {
-        color: #6196cc;
-      }
-
-      .token:is(.boolean, .number, .function) {
-        color: #f08d49;
-      }
-
-      .token:is(.property, .class-name, .constant, .symbol) {
-        color: #f8c555;
-      }
-
-      .token:is(.selector, .important, .atrule, .keyword, .builtin) {
-        color: #cc99cd;
-      }
-
-      .token:is(.string, .char, .attr-value, .regex, .variable) {
-        color: #7ec699;
-      }
-
-      .token:is(.operator, .entity, .url) {
-        color: #67cdcc;
-      }
-
-      .token:is(.important, .bold) {
-        font-weight: bold;
-      }
-
-      .token.italic {
-        font-style: italic;
-      }
-
-      .token.entity {
-        cursor: help;
-      }
-
-      .token.inserted {
-        color: green;
-      }
-    }
-  }
-</style>
+<style>.lexical-root {
+  overflow: hidden;
+  border: 1px solid var(--sui-textbox-border-color);
+  border-radius: var(--sui-textbox-border-radius) !important;
+  padding: var(--sui-textbox-multiline-padding);
+  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);
+}
+.lexical-root:not(:first-child) {
+  border-start-start-radius: 0 !important;
+  border-start-end-radius: 0 !important;
+}
+.lexical-root.code {
+  padding: 0;
+}
+.lexical-root.code :global(.code-block) {
+  border-radius: 0 !important;
+  min-height: 120px;
+}
+.lexical-root:focus-visible {
+  outline: 0;
+}
+.lexical-root[aria-invalid=true] {
+  border-color: var(--sui-error-border-color);
+}
+.lexical-root :global([dir]:first-child) {
+  margin-top: 0;
+}
+.lexical-root :global([dir]:last-child) {
+  margin-bottom: 0;
+}
+.lexical-root :global(strong.italic) {
+  font-style: italic;
+}
+.lexical-root :global(.strikethrough) {
+  text-decoration: line-through;
+}
+.lexical-root :global(li.nested) {
+  list-style-type: none;
+}
+.lexical-root :global(.code-block) {
+  position: relative;
+  display: block;
+  padding-block: 8px;
+  padding-inline-start: 56px;
+  padding-inline-end: 8px;
+  background-color: var(--sui-code-background-color);
+  overflow-x: auto;
+  white-space: pre;
+}
+.lexical-root :global(.code-block:not(:first-child)) {
+  margin-top: 1em;
+}
+.lexical-root :global(.code-block:not(:last-child)) {
+  margin-bottom: 1em;
+}
+.lexical-root :global(.code-block::before) {
+  position: absolute;
+  inset-block: 0;
+  inset-inline-start: 0;
+  inset-inline-end: auto;
+  content: attr(data-gutter);
+  padding: 8px;
+  min-width: 40px;
+  color: var(--sui-tertiary-foreground-color);
+  background-color: var(--sui-tertiary-background-color);
+  text-align: end;
+}
+.lexical-root :global([data-lexical-text=true]) {
+  cursor: text;
+}
+.lexical-root :global(:is(th, td)) > :global(p) {
+  margin: 0;
+  white-space: normal;
+  word-break: normal;
+}
+.lexical-root :global(hr) {
+  margin: var(--sui-paragraph-margin) 0;
+  border: none;
+  padding: 0;
+}
+.lexical-root :global(hr::after) {
+  display: block;
+  height: 2px;
+  background-color: var(--sui-control-border-color);
+  line-height: 2px;
+  content: "";
+}
+
+:root[data-theme=light] .lexical-root :global(.token:is(.comment, .prolog, .doctype, .cdata)) {
+  color: slategray;
+}
+:root[data-theme=light] .lexical-root :global(.token.punctuation) {
+  color: #999;
+}
+:root[data-theme=light] .lexical-root :global(.token.namespace) {
+  opacity: 0.7;
+}
+:root[data-theme=light] .lexical-root :global(.token:is(.property, .tag, .boolean, .number, .constant, .symbol, .deleted)) {
+  color: #905;
+}
+:root[data-theme=light] .lexical-root :global(.token:is(.selector, .attr-name, .string, .char, .builtin, .inserted)) {
+  color: #690;
+}
+:root[data-theme=light] .lexical-root :global(.token:is(.operator, .entity, .url)), :root[data-theme=light] .lexical-root :global(.language-css) :global(.token.string), :root[data-theme=light] .lexical-root :global(.style) :global(.token.string) {
+  color: #9a6e3a;
+}
+:root[data-theme=light] .lexical-root :global(.token:is(.atrule, .attr-value, .keyword)) {
+  color: #07a;
+}
+:root[data-theme=light] .lexical-root :global(.token:is(.function, .class-name)) {
+  color: #dd4a68;
+}
+:root[data-theme=light] .lexical-root :global(.token:is(.regex, .important, .variable)) {
+  color: #e90;
+}
+
+:root[data-theme=dark] .lexical-root :global(.token:is(.comment, .block-comment, .prolog, .doctype, .cdata)) {
+  color: #999;
+}
+:root[data-theme=dark] .lexical-root :global(.token.punctuation) {
+  color: #ccc;
+}
+:root[data-theme=dark] .lexical-root :global(.token:is(.tag, .attr-name, .namespace, .deleted)) {
+  color: #e2777a;
+}
+:root[data-theme=dark] .lexical-root :global(.token.function-name) {
+  color: #6196cc;
+}
+:root[data-theme=dark] .lexical-root :global(.token:is(.boolean, .number, .function)) {
+  color: #f08d49;
+}
+:root[data-theme=dark] .lexical-root :global(.token:is(.property, .class-name, .constant, .symbol)) {
+  color: #f8c555;
+}
+:root[data-theme=dark] .lexical-root :global(.token:is(.selector, .important, .atrule, .keyword, .builtin)) {
+  color: #cc99cd;
+}
+:root[data-theme=dark] .lexical-root :global(.token:is(.string, .char, .attr-value, .regex, .variable)) {
+  color: #7ec699;
+}
+:root[data-theme=dark] .lexical-root :global(.token:is(.operator, .entity, .url)) {
+  color: #67cdcc;
+}
+:root[data-theme=dark] .lexical-root :global(.token:is(.important, .bold)) {
+  font-weight: bold;
+}
+:root[data-theme=dark] .lexical-root :global(.token.italic) {
+  font-style: italic;
+}
+:root[data-theme=dark] .lexical-root :global(.token.entity) {
+  cursor: help;
+}
+:root[data-theme=dark] .lexical-root :global(.token.inserted) {
+  color: green;
+}</style>