@0001-labs/design-system-1 0.3.0-alpha.14 → 0.3.0-alpha.15

package/DS1/0-face/component-visibility.ts

@@ -4,6 +4,7 @@ export type ComponentVisibility = "public" | "internal";
 export const COMPONENT_VISIBILITY: Readonly<Record<string, ComponentVisibility>> = {
   "spacing-handle": "internal",
   "loading": "internal",
+  "kbd": "internal",
 };
 export function componentVisibility(name: string): ComponentVisibility {
   return COMPONENT_VISIBILITY[name.replace(/^ds-/, "")] ?? "public";

package/DS1/0-face/toast-queue.ts

@@ -62,7 +62,7 @@ export type ToastSignal = { toast: ToastData } | { dismiss: ToastId | undefined
 type Listener = (signal: ToastSignal) => void;
 
 /** Sonner's constants, shared by both toasters; its gap and offset are rounded to squares in the stylesheet. */
-export const TOAST_DURATION = 4000;
+export const TOAST_DURATION = Infinity;
 export const VISIBLE_TOASTS = 3;
 export const TIME_BEFORE_UNMOUNT = 200;
 export const SWIPE_THRESHOLD = 45;

package/DS1/0-face/toaster.ts

@@ -47,7 +47,7 @@ export interface ToasterOptions {
   expand?: boolean;
   /** How many show at once; three by default. */
   visibleToasts?: number;
-  /** Milliseconds each toast stays; 4000 by default. */
+  /** Milliseconds each toast stays; Infinity by default, until dismissed. */
   duration?: number;
   /** A close button on every toast. */
   closeButton?: boolean;
@@ -234,7 +234,7 @@ class PageToaster {
   private draw(item: Item) {
     const { data } = item;
     const dismissible = data.dismissible !== false;
-    const closeButton = (data.closeButton ?? settings.closeButton ?? false) && dismissible;
+    const closeButton = (data.closeButton ?? settings.closeButton ?? true) && dismissible;
     const closeLabel = settings.closeLabel ?? feedbackWord("Close");
     const key = JSON.stringify([data.title, data.description, data.type, data.icon, data.action?.label, data.action?.href, data.cancel?.label, data.cancel?.href, closeButton, closeLabel]);
     const previous = item.element?.querySelector<HTMLElement>(".body");

package/DS1/1-root/cjk.css

@@ -1,4 +1,4 @@
-/* version 0.3.0-alpha.14 */
+/* version 0.3.0-alpha.15 */
 
 /* Noto Sans for Japanese and Chinese, for a product that shows them. Opt in:
    link it beside one.css or fonts.css, or ask Sync 1 for "cjk": true. Without

package/DS1/1-root/controls.css

@@ -3,7 +3,6 @@
 @import "./text.css";
 @import "./empty.css";
 @import "./notice.css";
-@import "./kbd.css";
 @import "./dialog-placement.css";
 @import "./header.css";
 @import "./footer.css";
@@ -140,6 +139,11 @@ a.ds-button[aria-disabled="true"] {
   text-decoration-color: var(--ds-link-hover-line-color, currentColor);
 }
 
+/* Quiet navigation and related-component lists: no underline in any state. */
+.ds-link.ds-link--plain {
+  text-decoration: none;
+}
+
 .ds-link:focus-visible {
   outline: 2px solid var(--ds-focus-ring);
   outline-offset: 1px;

package/DS1/1-root/fonts.css

@@ -1,4 +1,4 @@
-/* version 0.3.0-alpha.14 */
+/* version 0.3.0-alpha.15 */
 
 /* Design system 1's faces and the typeface tokens that name them, on their
    own: a page that does not load one.css links this sheet (one.css imports

package/DS1/1-root/one.css

@@ -1,4 +1,4 @@
-/* version 0.3.0-alpha.14 */
+/* version 0.3.0-alpha.15 */
 
 @import "./grid.css";
 @import "./component-tokens.css";

package/DS1/1-root/one.semantic.css

@@ -1,4 +1,4 @@
-/* DS1 — version 0.3.0-alpha.14 */
+/* DS1 — version 0.3.0-alpha.15 */
 /* A classless stylesheet for native HTML. No JavaScript is required. */
 
 /* It draws on Design system 1's measures: the 20px square, 14px type on

package/DS1/1-root/row.css

@@ -89,10 +89,13 @@ button.ds-row,
   -webkit-tap-highlight-color: transparent;
 }
 
+/* The font inherited above would bring the page's line into the row: the words go back on the
+   sixteen, as every row's (a stacked tile keeps its square lines below). */
 a.ds-row,
 button.ds-row {
   position: relative;
   width: 100%;
+  line-height: var(--ds-type-lineheight-default);
   padding: 0 var(--ds-row-padding, calc(4px * var(--ds-sf)));
   border-radius: var(--ds-row-radius, 0);
 }

package/DS1/2-core/ds-cycle.ts

@@ -74,7 +74,7 @@ export class Cycle extends LitElement {
   static get properties() {
     return {
       type: { type: String, reflect: true },
-      // The language picker as a chip, the cycle's button, instead of an item.
+      // Compatibility attribute; every language picker now uses the normal button.
       chip: { type: Boolean, reflect: true },
       values: { type: Array },
       value: { type: String },
@@ -607,8 +607,8 @@ export class Cycle extends LitElement {
 
   /**
    * The language picker: a native button carrying the language's code as
-   * `lang`, so each name is set in its own typeface. An item on its own, eight
-   * squares wide (four with `compact`); with `chip`, the cycle's button around it.
+   * `lang`, so each name is set in its own typeface. Always uses the normal
+   * label-sized button; legacy `chip` and `compact` attributes do not change its width.
    */
   private renderLanguagePicker() {
     const code = this.currentValue || currentLanguage.value;
@@ -621,9 +621,9 @@ export class Cycle extends LitElement {
     >
       ${nativeLanguageName(code)}
     </button>`;
-    return this.chip ? html`<ds-button fit control="slotted"
+    return html`<ds-button fit control="slotted"
       ?primary=${this.primary && !this.secondary} ?secondary=${this.secondary}
-      ?disabled=${this.disabled || this._fieldsetDisabled}>${button}</ds-button>` : button;
+      ?disabled=${this.disabled || this._fieldsetDisabled}>${button}</ds-button>`;
   }
 
   render() {

package/DS1/2-core/ds-message.ts

@@ -0,0 +1,218 @@
+// ds-message.ts
+// An inline notice in the flow of the page: a tone, a title and/or text,
+// actions and an optional dismiss; with `banner`, a strip across the top of
+// its positioning context instead. Drawn by 1-root/notice.css, the same
+// classes a page without scripts writes.
+
+import { LitElement, html, nothing, unsafeCSS, type PropertyValues } from "lit";
+import { getText } from "../0-face/i18n";
+import { define } from "../0-face/define";
+import "./ds-icon";
+import "./ds-toast";
+import type { ToastPosition } from "../0-face/toast-queue";
+export { toast as message } from "../0-face/toast-queue";
+export type { ToastOptions as MessageOptions, ToastId as MessageId } from "../0-face/toast-queue";
+export type MessageForm = "inline" | "banner" | "toast" | "assistant";
+import metrics from "../1-root/component-metrics.css?inline";
+import controls from "../1-root/controls.css?inline";
+import styles from "./styles/ds-notice.css?inline";
+
+export type MessageTone = "neutral" | "success" | "warning" | "danger";
+const TONES: readonly MessageTone[] = ["neutral", "success", "warning", "danger"];
+/** The icon each tone's mark carries unless `icon` names another. */
+export const MESSAGE_ICONS: Readonly<Record<MessageTone, string>> = {
+  neutral: "info",
+  success: "check",
+  warning: "warning",
+  danger: "warning",
+};
+
+/** Detail of `ds-message-dismiss`. Cancel the event to keep the notice and remove it yourself. */
+export interface MessageDismissDetail { tone: MessageTone }
+
+/**
+ * @element ds-message
+ * @prop {"neutral" | "success" | "warning" | "danger"} tone - The mark's colour
+ *   and icon; danger also turns the words into the danger colour. Neutral by default.
+ * @prop {string} heading - A title: a translation key, or literal words.
+ * @prop {string} text - The text: a translation key, or literal words.
+ * @prop {boolean} literal - Show `heading` and `text` as written, never looked up.
+ * @prop {string} icon - An icon from the library in place of the tone's own.
+ * @prop {boolean} dismissible - Show a close button at the end of the first line.
+ * @prop {boolean} banner - A strip one square high across the top of its
+ *   positioning context, filled in the tone's colour, its words, actions and
+ *   close button on one line; it reserves no room in the flow.
+ *
+ * @slot - The text, when it needs more than words: a link, a strong word.
+ * @slot heading - The title, as inline content.
+ * @slot icon - An icon of the page's own inside the mark.
+ * @slot actions - Buttons or links on the row under the words.
+ *
+ * @fires ds-message-dismiss - The close button was pressed. Cancelable: unless
+ *   it is cancelled, the notice hides itself.
+ *
+ * The element is a live region: `role="status"`, or `role="alert"` for danger,
+ * unless the page gives it a role of its own.
+ *
+ * @example
+ * <ds-message tone="danger" heading="Couldn't save" dismissible>
+ *   Your changes are kept on this device.
+ *   <ds-button slot="actions" secondary>Try again</ds-button>
+ * </ds-message>
+ */
+export class Message extends LitElement {
+  static properties = {
+    expand: { type: Boolean },
+    visibleToasts: { type: Number, attribute: "visible-toasts" },
+    richColors: { type: Boolean, attribute: "rich-colors" },
+    contained: { type: Boolean },
+    label: { type: String },
+    closeLabel: { type: String, attribute: "close-label" },
+    form: { type: String, reflect: true },
+    position: { type: String },
+    duration: { type: Number },
+    closeButton: { type: Boolean, attribute: "close-button" },
+    tone: { type: String, reflect: true },
+    heading: { type: String },
+    text: { type: String },
+    literal: { type: Boolean, reflect: true },
+    icon: { type: String },
+    dismissible: { type: Boolean, reflect: true },
+    banner: { type: Boolean, reflect: true },
+  };
+
+  static styles = [unsafeCSS(metrics), unsafeCSS(controls), unsafeCSS(styles)];
+
+  declare expand: boolean;
+  declare visibleToasts: number;
+  declare richColors: boolean;
+  declare contained: boolean;
+  declare label: string;
+  declare closeLabel: string;
+  declare form: MessageForm;
+  declare position: ToastPosition;
+  declare duration: number;
+  declare closeButton: boolean;
+  protected dismissEvent = "ds-message-dismiss";
+
+  declare tone: MessageTone;
+  declare heading: string | undefined;
+  declare text: string | undefined;
+  declare literal: boolean;
+  declare icon: string | undefined;
+  declare dismissible: boolean;
+  declare banner: boolean;
+
+  /** The role this element last set, so a role the page wrote is left alone. */
+  private ownRole: string | null = null;
+  private readonly relabel = () => this.requestUpdate();
+
+  constructor() {
+    super();
+    this.expand = false;
+    this.visibleToasts = 3;
+    this.richColors = false;
+    this.contained = false;
+    this.label = "Messages";
+    this.closeLabel = "Close";
+    this.form = "inline";
+    this.position = "bottom-right";
+    this.duration = Infinity;
+    this.closeButton = true;
+    this.tone = "neutral";
+    this.literal = false;
+    this.dismissible = false;
+    this.banner = false;
+  }
+
+  /** The tone in effect: an unknown value reads as neutral. */
+  get resolvedTone(): MessageTone {
+    return TONES.includes(this.tone) ? this.tone : "neutral";
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    window.addEventListener("language-changed", this.relabel);
+    window.addEventListener("translations-loaded", this.relabel);
+    this.syncRole();
+  }
+
+  disconnectedCallback() {
+    window.removeEventListener("language-changed", this.relabel);
+    window.removeEventListener("translations-loaded", this.relabel);
+    super.disconnectedCallback();
+  }
+
+  protected willUpdate(changed: PropertyValues<this>) {
+    super.willUpdate(changed);
+    if (changed.has("tone") || changed.has("form")) this.syncRole();
+  }
+
+  private syncRole() {
+    if (!this.isConnected) return;
+    const current = this.getAttribute("role");
+    if (current !== null && current !== this.ownRole) return;
+    this.ownRole = this.form === "toast" ? "presentation" : this.resolvedTone === "danger" ? "alert" : "status";
+    if (current !== this.ownRole) this.setAttribute("role", this.ownRole);
+  }
+
+  private words(value: string | undefined): string {
+    if (!value) return "";
+    return this.literal ? value : getText(value) || value;
+  }
+
+  /**
+   * Whether light-DOM content fills a slot: elements, or text that is not
+   * blank. The blank text between slotted children still counts as assigned
+   * to the default slot and hides its fallback, so `text` is drawn beside the
+   * slot rather than inside it.
+   */
+  private slotted(name: string): boolean {
+    return [...this.childNodes].some(node => name
+      ? node instanceof Element && node.getAttribute("slot") === name
+      : node instanceof Element ? !node.hasAttribute("slot") : node.nodeType === Node.TEXT_NODE && Boolean(node.textContent?.trim()));
+  }
+
+  /** Ask to close: hides the notice unless a listener cancels `ds-message-dismiss`. */
+  dismiss(): boolean {
+    const event = new CustomEvent<MessageDismissDetail>(this.dismissEvent, {
+      bubbles: true, composed: true, cancelable: true, detail: { tone: this.resolvedTone },
+    });
+    if (!this.dispatchEvent(event)) return false;
+    this.hidden = true;
+    return true;
+  }
+
+  render() {
+    if (this.form === "toast") return html`<ds-toast .expand=${this.expand} .visibleToasts=${this.visibleToasts} .richColors=${this.richColors} .contained=${this.contained} .label=${this.label} .closeLabel=${this.closeLabel} .position=${this.position} .duration=${this.duration} .closeButton=${this.closeButton}></ds-toast>`;
+    const tone = this.resolvedTone;
+    const heading = this.words(this.heading);
+    const text = this.words(this.text);
+    const hasHeading = Boolean(heading) || this.slotted("heading");
+    const slottedText = this.slotted("");
+    const hasText = Boolean(text) || slottedText;
+    const hasActions = this.slotted("actions");
+    const changed = () => this.requestUpdate();
+    return html`<div class="ds-notice${tone === "neutral" ? "" : ` ds-notice--${tone}`}${(this.banner || this.form === "banner") ? " ds-notice--banner" : ""}" part="message notice">
+      <span class="ds-notice__mark" part="mark" aria-hidden="true">
+        <slot name="icon" @slotchange=${changed}><ds-icon size="large" .type=${this.icon || MESSAGE_ICONS[tone]}></ds-icon></slot>
+      </span>
+      <div class="ds-notice__title" part="title" ?hidden=${!hasHeading}><slot name="heading" @slotchange=${changed}>${heading}</slot></div>
+      <div class="ds-notice__text" part="text" ?hidden=${!hasText}><slot @slotchange=${changed}></slot>${slottedText ? nothing : text}</div>
+      <div class="ds-notice__actions" part="actions" ?hidden=${!hasActions}><slot name="actions" @slotchange=${changed}></slot></div>
+      ${this.dismissible
+        ? html`<button class="ds-button ds-button--icon ds-notice__dismiss" part="dismiss" type="button" aria-label=${getText("Close") || "Close"} @click=${() => this.dismiss()}>
+            <ds-icon type="close" aria-hidden="true"></ds-icon>
+          </button>`
+        : nothing}
+    </div>`;
+  }
+}
+
+define("ds-message", Message);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-message": Message;
+  }
+}

package/DS1/2-core/ds-notice.ts

@@ -1,180 +1,10 @@
-// ds-notice.ts
-// An inline notice in the flow of the page: a tone, a title and/or text,
-// actions and an optional dismiss; with `banner`, a strip across the top of
-// its positioning context instead. Drawn by 1-root/notice.css, the same
-// classes a page without scripts writes.
-
-import { LitElement, html, nothing, unsafeCSS, type PropertyValues } from "lit";
-import { getText } from "../0-face/i18n";
+/** Compatibility name. New surfaces use Message. */
+import { Message, MESSAGE_ICONS } from "./ds-message";
 import { define } from "../0-face/define";
-import "./ds-icon";
-import metrics from "../1-root/component-metrics.css?inline";
-import controls from "../1-root/controls.css?inline";
-import styles from "./styles/ds-notice.css?inline";
-
-export type NoticeTone = "neutral" | "success" | "warning" | "danger";
-const TONES: readonly NoticeTone[] = ["neutral", "success", "warning", "danger"];
-/** The icon each tone's mark carries unless `icon` names another. */
-export const NOTICE_ICONS: Readonly<Record<NoticeTone, string>> = {
-  neutral: "info",
-  success: "check",
-  warning: "warning",
-  danger: "warning",
-};
-
-/** Detail of `ds-notice-dismiss`. Cancel the event to keep the notice and remove it yourself. */
-export interface NoticeDismissDetail { tone: NoticeTone }
-
-/**
- * @element ds-notice
- * @prop {"neutral" | "success" | "warning" | "danger"} tone - The mark's colour
- *   and icon; danger also turns the words into the danger colour. Neutral by default.
- * @prop {string} heading - A title: a translation key, or literal words.
- * @prop {string} text - The text: a translation key, or literal words.
- * @prop {boolean} literal - Show `heading` and `text` as written, never looked up.
- * @prop {string} icon - An icon from the library in place of the tone's own.
- * @prop {boolean} dismissible - Show a close button at the end of the first line.
- * @prop {boolean} banner - A strip one square high across the top of its
- *   positioning context, filled in the tone's colour, its words, actions and
- *   close button on one line; it reserves no room in the flow.
- *
- * @slot - The text, when it needs more than words: a link, a strong word.
- * @slot heading - The title, as inline content.
- * @slot icon - An icon of the page's own inside the mark.
- * @slot actions - Buttons or links on the row under the words.
- *
- * @fires ds-notice-dismiss - The close button was pressed. Cancelable: unless
- *   it is cancelled, the notice hides itself.
- *
- * The element is a live region: `role="status"`, or `role="alert"` for danger,
- * unless the page gives it a role of its own.
- *
- * @example
- * <ds-notice tone="danger" heading="Couldn't save" dismissible>
- *   Your changes are kept on this device.
- *   <ds-button slot="actions" secondary>Try again</ds-button>
- * </ds-notice>
- */
-export class Notice extends LitElement {
-  static properties = {
-    tone: { type: String, reflect: true },
-    heading: { type: String },
-    text: { type: String },
-    literal: { type: Boolean, reflect: true },
-    icon: { type: String },
-    dismissible: { type: Boolean, reflect: true },
-    banner: { type: Boolean, reflect: true },
-  };
-
-  static styles = [unsafeCSS(metrics), unsafeCSS(controls), unsafeCSS(styles)];
-
-  declare tone: NoticeTone;
-  declare heading: string | undefined;
-  declare text: string | undefined;
-  declare literal: boolean;
-  declare icon: string | undefined;
-  declare dismissible: boolean;
-  declare banner: boolean;
-
-  /** The role this element last set, so a role the page wrote is left alone. */
-  private ownRole: string | null = null;
-  private readonly relabel = () => this.requestUpdate();
-
-  constructor() {
-    super();
-    this.tone = "neutral";
-    this.literal = false;
-    this.dismissible = false;
-    this.banner = false;
-  }
-
-  /** The tone in effect: an unknown value reads as neutral. */
-  get resolvedTone(): NoticeTone {
-    return TONES.includes(this.tone) ? this.tone : "neutral";
-  }
-
-  connectedCallback() {
-    super.connectedCallback();
-    window.addEventListener("language-changed", this.relabel);
-    window.addEventListener("translations-loaded", this.relabel);
-    this.syncRole();
-  }
-
-  disconnectedCallback() {
-    window.removeEventListener("language-changed", this.relabel);
-    window.removeEventListener("translations-loaded", this.relabel);
-    super.disconnectedCallback();
-  }
-
-  protected willUpdate(changed: PropertyValues<this>) {
-    super.willUpdate(changed);
-    if (changed.has("tone")) this.syncRole();
-  }
-
-  private syncRole() {
-    if (!this.isConnected) return;
-    const current = this.getAttribute("role");
-    if (current !== null && current !== this.ownRole) return;
-    this.ownRole = this.resolvedTone === "danger" ? "alert" : "status";
-    if (current !== this.ownRole) this.setAttribute("role", this.ownRole);
-  }
-
-  private words(value: string | undefined): string {
-    if (!value) return "";
-    return this.literal ? value : getText(value) || value;
-  }
-
-  /**
-   * Whether light-DOM content fills a slot: elements, or text that is not
-   * blank. The blank text between slotted children still counts as assigned
-   * to the default slot and hides its fallback, so `text` is drawn beside the
-   * slot rather than inside it.
-   */
-  private slotted(name: string): boolean {
-    return [...this.childNodes].some(node => name
-      ? node instanceof Element && node.getAttribute("slot") === name
-      : node instanceof Element ? !node.hasAttribute("slot") : node.nodeType === Node.TEXT_NODE && Boolean(node.textContent?.trim()));
-  }
-
-  /** Ask to close: hides the notice unless a listener cancels `ds-notice-dismiss`. */
-  dismiss(): boolean {
-    const event = new CustomEvent<NoticeDismissDetail>("ds-notice-dismiss", {
-      bubbles: true, composed: true, cancelable: true, detail: { tone: this.resolvedTone },
-    });
-    if (!this.dispatchEvent(event)) return false;
-    this.hidden = true;
-    return true;
-  }
-
-  render() {
-    const tone = this.resolvedTone;
-    const heading = this.words(this.heading);
-    const text = this.words(this.text);
-    const hasHeading = Boolean(heading) || this.slotted("heading");
-    const slottedText = this.slotted("");
-    const hasText = Boolean(text) || slottedText;
-    const hasActions = this.slotted("actions");
-    const changed = () => this.requestUpdate();
-    return html`<div class="ds-notice${tone === "neutral" ? "" : ` ds-notice--${tone}`}${this.banner ? " ds-notice--banner" : ""}" part="notice">
-      <span class="ds-notice__mark" part="mark" aria-hidden="true">
-        <slot name="icon" @slotchange=${changed}><ds-icon size="large" .type=${this.icon || NOTICE_ICONS[tone]}></ds-icon></slot>
-      </span>
-      <div class="ds-notice__title" part="title" ?hidden=${!hasHeading}><slot name="heading" @slotchange=${changed}>${heading}</slot></div>
-      <div class="ds-notice__text" part="text" ?hidden=${!hasText}><slot @slotchange=${changed}></slot>${slottedText ? nothing : text}</div>
-      <div class="ds-notice__actions" part="actions" ?hidden=${!hasActions}><slot name="actions" @slotchange=${changed}></slot></div>
-      ${this.dismissible
-        ? html`<button class="ds-button ds-button--icon ds-notice__dismiss" part="dismiss" type="button" aria-label=${getText("Close") || "Close"} @click=${() => this.dismiss()}>
-            <ds-icon type="close" aria-hidden="true"></ds-icon>
-          </button>`
-        : nothing}
-    </div>`;
-  }
+export type { MessageTone as NoticeTone, MessageDismissDetail as NoticeDismissDetail } from "./ds-message";
+export const NOTICE_ICONS = MESSAGE_ICONS;
+export class Notice extends Message {
+  protected dismissEvent = "ds-notice-dismiss";
 }
-
 define("ds-notice", Notice);
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ds-notice": Notice;
-  }
-}
+declare global { interface HTMLElementTagNameMap { "ds-notice": Notice } }

package/DS1/2-core/ds-toast.ts

@@ -13,7 +13,7 @@
  * - `<ds-toast>` is Sonner's `<Toaster />`, with its `position`, `expand`,
  *   `visible-toasts`, `duration`, `close-button` and `rich-colors`;
  *   `contained` draws it inside its positioned parent instead of the window.
- * - A toast stays 4 seconds; its timer pauses while the stack is hovered,
+ * - A toast stays until dismissed; an explicitly timed toast pauses while the stack is hovered,
  *   focused, held or the tab is hidden. Three show at once, stacked behind
  *   one another and spread out on hover. A swipe towards the edge dismisses one,
  *   Alt+T reaches them from the keyboard, and they come and go with Sonner's
@@ -101,7 +101,7 @@ export class Toaster extends LitElement {
     this.expand = false;
     this.visibleToasts = VISIBLE_TOASTS;
     this.duration = DURATION;
-    this.closeButton = false;
+    this.closeButton = true;
     this.richColors = false;
     this.contained = false;
     this.label = "Notifications";

package/DS1/2-core/generated/ds-icon-map.ts

@@ -108,8 +108,10 @@ export const iconNameToSvgMap = {
   "categories": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<g filter=\"url(#filter0_f_1265_1849)\">\n<circle cx=\"8\" cy=\"8\" r=\"3.00244\" fill=\"currentColor\"/>\n</g>\n<defs>\n<filter id=\"filter0_f_1265_1849\" x=\"3.99756\" y=\"3.99756\" width=\"8.00488\" height=\"8.00488\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n<feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/>\n<feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"BackgroundImageFix\" result=\"shape\"/>\n<feGaussianBlur stdDeviation=\"0.5\" result=\"effect1_foregroundBlur_1265_1849\"/>\n</filter>\n</defs>\n</svg>",
   "check": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M6.68649 11.884L12.443 6.13601L11.736 5.42715L6.68835 10.4827L4.26399 8.0501L3.55696 8.74525L6.68649 11.884Z\" fill=\"currentColor\"/>\n</svg>",
   "check-alt": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M6.68647 11.884L12.443 6.13601L11.736 5.42715L6.68834 10.4827L4.26398 8.0501L3.55695 8.74525L6.68647 11.884Z\" fill=\"currentColor\"/>\n</svg>",
+  "chevron-down": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M4.25 6.25L8 10L11.75 6.25\" stroke=\"currentColor\"/>\n</svg>",
   "chevron-left": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M9.75 4.25L6 8L9.75 11.75\" stroke=\"currentColor\"/>\n</svg>",
   "chevron-right": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M6.25 4.25L10 8L6.25 11.75\" stroke=\"currentColor\"/>\n</svg>",
+  "chevron-up": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M4.25 9.75L8 6L11.75 9.75\" stroke=\"currentColor\"/>\n</svg>",
   "close": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M12.1215 4.58087L8.70453 7.99397L12.1176 11.4169L11.4106 12.112L7.99847 8.69108L4.58636 12.112L3.87836 11.4031L7.29535 7.99005L3.88226 4.56716L4.58929 3.87201L8.0014 7.29294L11.4145 3.87201L12.1215 4.58087Z\" fill=\"currentColor\"/>\n</svg>",
   "cloud": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<g stroke=\"currentColor\" stroke-width=\"0.92\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4.75 12.25C3.09 12.25 1.75 10.91 1.75 9.25C1.75 7.75 2.85 6.5 4.29 6.29C4.86 4.36 6.65 3 8.75 3C11.35 3 13.25 5.06 13.25 7.5V7.6C13.84 8.1 14.25 8.8 14.25 9.75C14.25 11.13 13.13 12.25 11.75 12.25Z\"/></g>\n</svg>",
   "code": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M6.5 4.5L3 8L6.5 11.5M9.5 4.5L13 8L9.5 11.5\" stroke=\"currentColor\" stroke-width=\"1.1\"/>\n</svg>",
@@ -451,8 +453,10 @@ export const iconNames = [
   "categories",
   "check",
   "check-alt",
+  "chevron-down",
   "chevron-left",
   "chevron-right",
+  "chevron-up",
   "close",
   "cloud",
   "code",

package/DS1/2-core/generated/icons-extra.ts

@@ -96,8 +96,10 @@ export const icons: Readonly<Record<string, string>> = {
   "cart": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<g stroke=\"currentColor\" stroke-width=\"0.92\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M1.75 2.75H3.25L4.75 10.25H12.25L13.5 5H4\"/><circle cx=\"5.5\" cy=\"12.75\" r=\"0.75\"/><circle cx=\"11.25\" cy=\"12.75\" r=\"0.75\"/></g>\n</svg>",
   "categories": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<g filter=\"url(#filter0_f_1265_1849)\">\n<circle cx=\"8\" cy=\"8\" r=\"3.00244\" fill=\"currentColor\"/>\n</g>\n<defs>\n<filter id=\"filter0_f_1265_1849\" x=\"3.99756\" y=\"3.99756\" width=\"8.00488\" height=\"8.00488\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n<feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/>\n<feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"BackgroundImageFix\" result=\"shape\"/>\n<feGaussianBlur stdDeviation=\"0.5\" result=\"effect1_foregroundBlur_1265_1849\"/>\n</filter>\n</defs>\n</svg>",
   "check-alt": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M6.68647 11.884L12.443 6.13601L11.736 5.42715L6.68834 10.4827L4.26398 8.0501L3.55695 8.74525L6.68647 11.884Z\" fill=\"currentColor\"/>\n</svg>",
+  "chevron-down": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M4.25 6.25L8 10L11.75 6.25\" stroke=\"currentColor\"/>\n</svg>",
   "chevron-left": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M9.75 4.25L6 8L9.75 11.75\" stroke=\"currentColor\"/>\n</svg>",
   "chevron-right": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M6.25 4.25L10 8L6.25 11.75\" stroke=\"currentColor\"/>\n</svg>",
+  "chevron-up": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M4.25 9.75L8 6L11.75 9.75\" stroke=\"currentColor\"/>\n</svg>",
   "cloud": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<g stroke=\"currentColor\" stroke-width=\"0.92\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4.75 12.25C3.09 12.25 1.75 10.91 1.75 9.25C1.75 7.75 2.85 6.5 4.29 6.29C4.86 4.36 6.65 3 8.75 3C11.35 3 13.25 5.06 13.25 7.5V7.6C13.84 8.1 14.25 8.8 14.25 9.75C14.25 11.13 13.13 12.25 11.75 12.25Z\"/></g>\n</svg>",
   "code": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M6.5 4.5L3 8L6.5 11.5M9.5 4.5L13 8L9.5 11.5\" stroke=\"currentColor\" stroke-width=\"1.1\"/>\n</svg>",
   "code-block": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M2.5 3H13.5V13H2.5Z\" stroke=\"currentColor\" stroke-width=\"1.1\"/>\n<path d=\"M6.5 6L4.5 8L6.5 10M9.5 6L11.5 8L9.5 10\" stroke=\"currentColor\" stroke-width=\"1.1\"/>\n</svg>",

package/DS1/2-core/generated/icons-immediate.ts

@@ -46,4 +46,4 @@ export const icons: Readonly<Record<string, string>> = {
   "up": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M7.49645 3.48222V16H8.50702L8.50841 3.48259L11.4156 6.38982L12.1095 5.68299L8.00173 1.57524L3.8905 5.68647L4.59784 6.39381L7.49645 3.48222Z\" fill=\"currentColor\"/>\n</svg>",
   "views": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<circle cx=\"7\" cy=\"7\" r=\"4.5\" stroke=\"currentColor\" stroke-width=\"0.92\"/>\n<path d=\"M10.2 10.2L13.5 13.5\" stroke=\"currentColor\" stroke-width=\"0.92\"/>\n</svg>"
 }
-export const deferredIconNames = ["1x","1xdots","1xgrid","1xlines","2x","2xdots","2xgrid","2xgrid-alt","2xgrid-alt-2","2xgrid-alt-3","2xlines","4x4","airtable","archive-alt","arrange-archive","arrange-check","arrange-chevron","arrange-connect","arrange-draft","arrange-dropdown","arrange-home","arrange-link","arrange-menu","arrange-more","arrange-page","arrange-plus","arrange-site","attach","audio","avatar","badge-bands","badge-bands-3d","badge-blue-fan","badge-blue-fan-3d","badge-bricks","badge-bricks-3d","badge-broken-stripes","badge-broken-stripes-3d","badge-checker","badge-checker-3d","badge-diamond","badge-diamond-3d","badge-fan","badge-fan-3d","badge-fan-dark","badge-fan-dark-3d","badge-halves","badge-halves-3d","badge-halves-green","badge-halves-green-3d","badge-red","badge-red-3d","badge-red-blue-bricks","badge-red-blue-bricks-3d","badge-round-fan","badge-round-fan-3d","badge-shard","badge-shard-3d","badge-split-circle","badge-split-circle-3d","badge-tall-bricks","badge-tall-bricks-3d","badge-weave","badge-weave-3d","bag-alt","bank","banknote","block-accordion","block-banner","block-breadcrumbs","block-button","block-divider","block-forms","block-group","block-heading","block-image","block-logo-marquee","block-page-progress","block-section","block-table","block-tabs","block-text","bold","bolt","book","book-alt","box","briefcase","building","bullet","callout","car","card","cart","categories","check-alt","chevron-left","chevron-right","cloud","code","code-block","coffee","coins","color","column","comment","connect","content","cursor","curve","default","dictate","dislike","divider","dot-bank","dot-banknote","dot-banknotes","dot-card","dot-coin","dot-coins","dot-receipt","dot-safe","dot-transfer","dot-wallet","download","drive","drop","dropbox","dumbbell","equation","exercise","eye","eye-off","facebook","figma","flame","flip","food","form","fuel","gallery","game","gift","github","globe","group","group-alt","group-alt-2","h1","h2","h3","handle","head","heart","help","help-alt","history","home-alt","icon","image","in","income","indent","info","instagram","italic","item","jpbank","key","keyboard","life","like","link","linkedin","list-line","lock-filled","logo-marquee","loom","map","medical","mention","menu","minimize","minimize-alt","minus","money","moon","move","music","music-alt","navigation-check","note-alt","note-alt-2","note-lines","notifications","notion","numbered","offline","open-alt","open-source","outdent","page","page-18","page-alt","page-note","panel","password-see","password-unsee","pattern-call-to-action","pattern-card","pattern-feature","pattern-hero","pause","paw","pdf","people","percent","phone","pill","plane","play-alt","postal","present","quote","reaction","receipt","redo","refresh","refund","relationships","repeat","rewind","rewind-30","rewind-30-alt","rotate","row","safe","school","school-alt","search-30","see-30","settings","shield","shield-alt","shirt","shop","sign-in","sign-out","slack","slash","sparkle","star-alt","star-alt-2","start","status","status-alt","status-filled","stop","strike","sun","system","table","tag","templates","text","ticket","title","title-struck","titlestyle","todo","toggle","train","transfer","triangle","tv","underline","undo","ungroup","unhead","unicon","untitle","up-right","upload","video","vimeo","wallet","warning","wifi","window","work","wrench","x-brand","youtube"] as const
+export const deferredIconNames = ["1x","1xdots","1xgrid","1xlines","2x","2xdots","2xgrid","2xgrid-alt","2xgrid-alt-2","2xgrid-alt-3","2xlines","4x4","airtable","archive-alt","arrange-archive","arrange-check","arrange-chevron","arrange-connect","arrange-draft","arrange-dropdown","arrange-home","arrange-link","arrange-menu","arrange-more","arrange-page","arrange-plus","arrange-site","attach","audio","avatar","badge-bands","badge-bands-3d","badge-blue-fan","badge-blue-fan-3d","badge-bricks","badge-bricks-3d","badge-broken-stripes","badge-broken-stripes-3d","badge-checker","badge-checker-3d","badge-diamond","badge-diamond-3d","badge-fan","badge-fan-3d","badge-fan-dark","badge-fan-dark-3d","badge-halves","badge-halves-3d","badge-halves-green","badge-halves-green-3d","badge-red","badge-red-3d","badge-red-blue-bricks","badge-red-blue-bricks-3d","badge-round-fan","badge-round-fan-3d","badge-shard","badge-shard-3d","badge-split-circle","badge-split-circle-3d","badge-tall-bricks","badge-tall-bricks-3d","badge-weave","badge-weave-3d","bag-alt","bank","banknote","block-accordion","block-banner","block-breadcrumbs","block-button","block-divider","block-forms","block-group","block-heading","block-image","block-logo-marquee","block-page-progress","block-section","block-table","block-tabs","block-text","bold","bolt","book","book-alt","box","briefcase","building","bullet","callout","car","card","cart","categories","check-alt","chevron-down","chevron-left","chevron-right","chevron-up","cloud","code","code-block","coffee","coins","color","column","comment","connect","content","cursor","curve","default","dictate","dislike","divider","dot-bank","dot-banknote","dot-banknotes","dot-card","dot-coin","dot-coins","dot-receipt","dot-safe","dot-transfer","dot-wallet","download","drive","drop","dropbox","dumbbell","equation","exercise","eye","eye-off","facebook","figma","flame","flip","food","form","fuel","gallery","game","gift","github","globe","group","group-alt","group-alt-2","h1","h2","h3","handle","head","heart","help","help-alt","history","home-alt","icon","image","in","income","indent","info","instagram","italic","item","jpbank","key","keyboard","life","like","link","linkedin","list-line","lock-filled","logo-marquee","loom","map","medical","mention","menu","minimize","minimize-alt","minus","money","moon","move","music","music-alt","navigation-check","note-alt","note-alt-2","note-lines","notifications","notion","numbered","offline","open-alt","open-source","outdent","page","page-18","page-alt","page-note","panel","password-see","password-unsee","pattern-call-to-action","pattern-card","pattern-feature","pattern-hero","pause","paw","pdf","people","percent","phone","pill","plane","play-alt","postal","present","quote","reaction","receipt","redo","refresh","refund","relationships","repeat","rewind","rewind-30","rewind-30-alt","rotate","row","safe","school","school-alt","search-30","see-30","settings","shield","shield-alt","shirt","shop","sign-in","sign-out","slack","slash","sparkle","star-alt","star-alt-2","start","status","status-alt","status-filled","stop","strike","sun","system","table","tag","templates","text","ticket","title","title-struck","titlestyle","todo","toggle","train","transfer","triangle","tv","underline","undo","ungroup","unhead","unicon","untitle","up-right","upload","video","vimeo","wallet","warning","wifi","window","work","wrench","x-brand","youtube"] as const