@sveltia/ui 0.41.3 → 0.42.0

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

@@ -31,6 +31,10 @@ declare const TabList: import("svelte").Component<{
      * The `data-name` attribute on the wrapper element.
      */
     name?: string | undefined;
+    /**
+     * The `aria-label` attribute on the wrapper element.
+     */
+    ariaLabel?: string | undefined;
     /**
      * Primary slot content.
      */
@@ -63,6 +67,10 @@ type Props = {
      * The `data-name` attribute on the wrapper element.
      */
     name?: string | undefined;
+    /**
+     * The `aria-label` attribute on the wrapper element.
+     */
+    ariaLabel?: string | undefined;
     /**
      * Primary slot content.
      */

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

@@ -3,6 +3,8 @@
 import 'prismjs';
 
 import {
+  CodeHighlightNode,
+  CodeNode,
   $createCodeNode as createCodeNode,
   $isCodeHighlightNode as isCodeHighlightNode,
   $isCodeNode as isCodeNode,
@@ -208,6 +210,7 @@ export const initEditor = ({
           .filter(([button]) => enabledButtons.includes(/** @type {TextEditorNodeType} */ (button)))
           .flatMap(([, nodes]) => nodes),
       ),
+      ...(isCodeEditor ? [CodeNode, CodeHighlightNode] : []),
       HorizontalRuleNode,
       TableNode,
       TableCellNode,

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>

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/insert-link-button.svelte

@@ -220,7 +220,7 @@
       id="{id}-url"
       bind:value={anchorURL}
       flex
-      aria-label="URL"
+      aria-label={_('_sui.text_editor.url')}
       onkeydown={(event) => {
         onInputKeyDown(event);
       }}
@@ -234,6 +234,7 @@
         id="{id}-text"
         bind:value={anchorText}
         flex
+        aria-label={_('_sui.text_editor.text')}
         onkeydown={(event) => {
           onInputKeyDown(event);
         }}

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>