@sveltia/ui 0.42.0 → 0.43.0

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/core.js

@@ -28,6 +28,7 @@ import {
   ListNode,
 } from '@lexical/list';
 import {
+  CODE,
   $convertFromMarkdownString as convertFromMarkdownString,
   $convertToMarkdownString as convertToMarkdownString,
   registerMarkdownShortcuts,
@@ -210,11 +211,11 @@ export const initEditor = ({
           .filter(([button]) => enabledButtons.includes(/** @type {TextEditorNodeType} */ (button)))
           .flatMap(([, nodes]) => nodes),
       ),
-      ...(isCodeEditor ? [CodeNode, CodeHighlightNode] : []),
-      HorizontalRuleNode,
-      TableNode,
-      TableCellNode,
-      TableRowNode,
+      ...(isCodeEditor
+        ? [CodeNode, CodeHighlightNode]
+        : // We haven’t implemented buttons for horizontal rules and tables yet, but we still want
+          // to support them in Markdown, so always include them in the node list
+          [HorizontalRuleNode, TableNode, TableCellNode, TableRowNode]),
     ],
     theme: EDITOR_THEME,
   };
@@ -227,8 +228,10 @@ export const initEditor = ({
         .filter(([button]) => enabledButtons.includes(/** @type {TextEditorNodeType} */ (button)))
         .flatMap(([, transformers]) => transformers),
     ),
-    HR,
-    TABLE,
+    ...(isCodeEditor
+      ? [CODE]
+      : // See the comment above for why we always include horizontal rules and tables
+        [HR, TABLE]),
   ];
 
   const editor = createEditor(editorConfig);