@sveltia/ui 0.41.5 → 0.42.0

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

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

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

@@ -119,76 +119,94 @@
   <div role="none" class="indicator" style={indicatorStyle}></div>
 </div>
 
-<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>
+<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>

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

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

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

@@ -30,17 +30,22 @@
   {@render children?.()}
 </div>
 
-<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>
+<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>

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

@@ -117,10 +117,13 @@
   </Toast>
 {/if}
 
-<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>
+<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>

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

@@ -131,163 +131,224 @@
   {hidden}
 ></div>
 
-<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>
+<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>