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

package/dist/2-core/ds-banner.d.ts

@@ -1,11 +1,11 @@
 import { LitElement } from "lit";
-import "./ds-text.js";
-import "./ds-button.js";
-declare global {
-    interface CustomElementRegistry {
-        define(name: string, constructor: typeof LitElement): void;
-    }
-    var customElements: CustomElementRegistry;
+import "./ds-text";
+import "./ds-button";
+import "./ds-icon";
+/** Detail of `ds-banner-action`: the destination the action follows, if it has one. */
+export interface BannerActionDetail {
+    action: string;
+    href: string | null;
 }
 export declare class Banner extends LitElement {
     static properties: {
@@ -37,6 +37,10 @@ export declare class Banner extends LitElement {
         version: {
             type: StringConstructor;
         };
+        dismissible: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
         _showVersion: {
             type: BooleanConstructor;
             state: boolean;
@@ -49,15 +53,27 @@ export declare class Banner extends LitElement {
     subject: string;
     describe: string;
     appVersion: string;
+    /** warning, info, success or error. */
     variant: string;
     version: string;
+    /** Show a close button at the end. Pressing it fires `ds-banner-dismiss`. */
+    dismissible: boolean;
     _showVersion: boolean;
+    constructor();
     private _boundUpdate;
     connectedCallback(): void;
     disconnectedCallback(): void;
     static styles: import("lit").CSSResult;
     private _toggleVersion;
     private _getMailtoHref;
+    /**
+     * The action was pressed. `ds-banner-action` bubbles and is cancelable:
+     * cancelling it keeps a link from being followed. An action with no
+     * destination is a button, and the event is all it does.
+     */
+    private _onAction;
+    /** Ask to close: hides the banner unless a listener cancels `ds-banner-dismiss`. */
+    dismiss(): boolean;
     render(): import("lit").TemplateResult<1>;
 }
 declare global {

package/dist/2-core/ds-banner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ds-banner.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-banner.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAElD,OAAO,cAAc,CAAC;AACtB,OAAO,gBAAgB,CAAC;AAGxB,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,WAAW,EAAE,OAAO,UAAU,GAAG,IAAI,CAAC;KAC5D;IACD,IAAI,cAAc,EAAE,qBAAqB,CAAC;CAC3C;AAED,qBAAa,MAAO,SAAQ,UAAU;IACpC,MAAM,CAAC,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAWf;IAEF,IAAI,EAAE,MAAM,CAAM;IAClB,MAAM,EAAE,MAAM,CAAM;IACpB,IAAI,EAAE,MAAM,CAAM;IAClB,MAAM,EAAE,MAAM,CAAM;IACpB,OAAO,EAAE,MAAM,CAAM;IACrB,QAAQ,EAAE,MAAM,CAAM;IACtB,UAAU,EAAE,MAAM,CAAM;IACxB,OAAO,EAAE,MAAM,CAAa;IAC5B,OAAO,EAAE,MAAM,CAAM;IACrB,YAAY,EAAE,OAAO,CAAS;IAE9B,OAAO,CAAC,YAAY,CAA8B;IAElD,iBAAiB;IAOjB,oBAAoB;IAMpB,MAAM,CAAC,MAAM,0BAAqB;IAElC,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,cAAc;IA6BtB,MAAM;CAoBP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,MAAM,CAAC;KACrB;CACF"}
+{"version":3,"file":"ds-banner.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-banner.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,UAAU,EAA4B,MAAM,KAAK,CAAC;AAG3D,OAAO,WAAW,CAAC;AACnB,OAAO,aAAa,CAAC;AACrB,OAAO,WAAW,CAAC;AAGnB,uFAAuF;AACvF,MAAM,WAAW,kBAAkB;IAAG,MAAM,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAAA;CAAE;AAE3E,qBAAa,MAAO,SAAQ,UAAU;IACpC,MAAM,CAAC,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAYf;IAGM,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IAC3B,uCAAuC;IAC/B,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IACxB,6EAA6E;IACrE,WAAW,EAAE,OAAO,CAAC;IACrB,YAAY,EAAE,OAAO,CAAC;;IAiB9B,OAAO,CAAC,YAAY,CAA8B;IAElD,iBAAiB;IAOjB,oBAAoB;IAMpB,MAAM,CAAC,MAAM,0BAAqB;IAElC,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,cAAc;IA6BtB;;;;OAIG;IACH,OAAO,CAAC,SAAS;IAOjB,oFAAoF;IACpF,OAAO,IAAI,OAAO;IAOlB,MAAM;CA8BP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,MAAM,CAAC;KACrB;CACF"}

package/dist/2-core/ds-banner.js

@@ -1,13 +1,18 @@
 // ds-banner.ts
-// Fixed banner component for notifications/alerts
-import { LitElement, html, unsafeCSS } from "lit";
-import { getText } from "../0-face/i18n.js";
-import "./ds-text.js";
-import "./ds-button.js";
+// A banner across the top of its positioning context, with an optional
+// action and an optional dismiss. For a message in the flow of the page, use
+// ds-notice.
+import { LitElement, html, nothing, unsafeCSS } from "lit";
+import { getText } from "../0-face/i18n";
+import { define } from "../0-face/define";
+import "./ds-text";
+import "./ds-button";
+import "./ds-icon";
 import styles from "./styles/ds-banner.css?inline";
 export class Banner extends LitElement {
     constructor() {
-        super(...arguments);
+        super();
+        this._boundUpdate = () => this.requestUpdate();
         this.text = "";
         this.action = "";
         this.href = "";
@@ -15,10 +20,10 @@ export class Banner extends LitElement {
         this.subject = "";
         this.describe = "";
         this.appVersion = "";
-        this.variant = "warning"; // warning, info, success, error
+        this.variant = "warning";
         this.version = "";
+        this.dismissible = false;
         this._showVersion = false;
-        this._boundUpdate = () => this.requestUpdate();
     }
     connectedCallback() {
         super.connectedCallback();
@@ -62,8 +67,29 @@ export class Banner extends LitElement {
         }
         return "#";
     }
+    /**
+     * The action was pressed. `ds-banner-action` bubbles and is cancelable:
+     * cancelling it keeps a link from being followed. An action with no
+     * destination is a button, and the event is all it does.
+     */
+    _onAction(event, href) {
+        const action = new CustomEvent("ds-banner-action", {
+            bubbles: true, composed: true, cancelable: true, detail: { action: this.action, href },
+        });
+        if (!this.dispatchEvent(action))
+            event.preventDefault();
+    }
+    /** Ask to close: hides the banner unless a listener cancels `ds-banner-dismiss`. */
+    dismiss() {
+        const event = new CustomEvent("ds-banner-dismiss", { bubbles: true, composed: true, cancelable: true });
+        if (!this.dispatchEvent(event))
+            return false;
+        this.hidden = true;
+        return true;
+    }
     render() {
         const mailtoHref = this._getMailtoHref();
+        const destination = mailtoHref !== "#" ? mailtoHref : null;
         return html `
       <div class="text-wrapper" @click=${this._toggleVersion}>
         ${this._showVersion && this.version
@@ -73,12 +99,21 @@ export class Banner extends LitElement {
       ${this.action
             ? html `
             <div class="action-wrapper">
-              <a href=${mailtoHref}>
-                <ds-text text=${this.action}></ds-text>
-              </a>
+              ${destination
+                ? html `<a href=${destination} @click=${(event) => this._onAction(event, destination)}>
+                    <ds-text text=${this.action}></ds-text>
+                  </a>`
+                : html `<button type="button" @click=${(event) => this._onAction(event, null)}>
+                    <ds-text text=${this.action}></ds-text>
+                  </button>`}
             </div>
           `
             : ""}
+      ${this.dismissible
+            ? html `<button class="dismiss" type="button" aria-label=${getText("Close") || "Close"} @click=${() => this.dismiss()}>
+            <ds-icon type="close" aria-hidden="true"></ds-icon>
+          </button>`
+            : nothing}
     `;
     }
 }
@@ -92,7 +127,8 @@ Banner.properties = {
     appVersion: { type: String, attribute: "app-version" },
     variant: { type: String },
     version: { type: String },
+    dismissible: { type: Boolean, reflect: true },
     _showVersion: { type: Boolean, state: true },
 };
 Banner.styles = unsafeCSS(styles);
-customElements.define("ds-banner", Banner);
+define("ds-banner", Banner);

package/dist/2-core/ds-button.d.ts

@@ -1,7 +1,39 @@
 import "./ds-text";
 import { Control } from "../0-face/control";
+import { type SplitSegment } from "./button-split";
+export type { SplitSegment } from "./button-split";
 export declare class Button extends Control {
+    static formAssociated: boolean;
     static properties: {
+        split: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        options: {
+            type: StringConstructor;
+        };
+        segments: {
+            attribute: boolean;
+        };
+        value: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        actions: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        literal: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        compact: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        _fieldsetDisabled: {
+            state: boolean;
+        };
         primary: {
             type: BooleanConstructor;
             reflect: boolean;
@@ -31,6 +63,10 @@ export declare class Button extends Control {
             type: BooleanConstructor;
             reflect: boolean;
         };
+        fixed: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
         fit: {
             type: BooleanConstructor;
             reflect: boolean;
@@ -54,20 +90,41 @@ export declare class Button extends Control {
         text: {
             type: StringConstructor;
         };
+        label: {
+            type: StringConstructor;
+        };
         href: {
             type: StringConstructor;
         };
+        target: {
+            type: StringConstructor;
+        };
+        rel: {
+            type: StringConstructor;
+        };
         _loading: {
             type: BooleanConstructor;
             state: boolean;
         };
     };
+    split: boolean;
+    options: string;
+    segments: ReadonlyArray<SplitSegment> | undefined;
+    value: string;
+    actions: boolean;
+    literal: boolean;
+    compact: boolean;
+    private _fieldsetDisabled;
+    private splitRole;
+    get splitDisabled(): boolean;
+    private splitLanguageChanged;
     primary: boolean;
     secondary: boolean;
     active: boolean;
     choice: boolean;
     icon: boolean;
     wide: boolean;
+    fixed: boolean;
     fit: boolean;
     danger: boolean;
     menuItem: boolean;
@@ -78,7 +135,22 @@ export declare class Button extends Control {
     blank: boolean;
     language: string;
     text: string;
+    /**
+     * The control's accessible name, as given, for a face that does not say
+     * what the button does on its own: a value, a number or an icon. Pass words
+     * already in the page's language.
+     */
+    label: string;
+    /**
+     * With `href` the face is a real link (`<a part="control">`): the browser
+     * navigates, so middle-click, ⌘- or Ctrl-click, Copy link and Enter work as
+     * on any link. `target` and `rel` go on the link; `blank` is `target="_blank"`,
+     * which gets `rel="noopener noreferrer"` unless `rel` says otherwise. A
+     * disabled link has no `href`, so it cannot navigate.
+     */
     href: string;
+    target: string;
+    rel: string;
     _loading: boolean;
     constructor();
     static styles: import("lit").CSSResult[];
@@ -88,9 +160,13 @@ export declare class Button extends Control {
      */
     _reflectIcon(): void;
     private syncSlottedControl;
+    /** A split is a named group from the moment it is in the document, before its first render. */
+    private syncSplitRole;
     updated(): void;
     focus(options?: FocusOptions): void;
     connectedCallback(): void;
+    disconnectedCallback(): void;
+    formDisabledCallback(disabled: boolean): void;
     render(): import("lit").TemplateResult<1>;
     private _handleClick;
 }

package/dist/2-core/ds-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ds-button.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-button.ts"],"names":[],"mappings":"AAIA,OAAO,WAAW,CAAC;AACnB,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAK5C,qBAAa,MAAO,SAAQ,OAAO;IACjC,MAAM,CAAC,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAgBf;IAGM,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,OAAO,CAAC;IACnB,MAAM,EAAE,OAAO,CAAC;IAChB,MAAM,EAAE,OAAO,CAAC;IAChB,IAAI,EAAE,OAAO,CAAC;IACd,IAAI,EAAE,OAAO,CAAC;IACd,GAAG,EAAE,OAAO,CAAC;IACb,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAC1B,OAAO,CAAC,QAAQ,CAAY;IAC5B,IAAI,OAAO,IAAI,MAAM,CAA0B;IAC/C,IAAI,OAAO,CAAC,KAAK,EAAE,MAAM,EAKxB;IACD,SAAS,KAAK,WAAW,IAAI,OAAO,CAAoC;IAChE,KAAK,EAAE,OAAO,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IAGb,QAAQ,EAAE,OAAO,CAAC;;IAqB1B,MAAM,CAAC,MAAM,4BAA8C;IAE3D;;;OAGG;IACH,YAAY;IAOZ,OAAO,CAAC,kBAAkB;IAM1B,OAAO;IAIP,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY;IAM5B,iBAAiB;IAMjB,MAAM;IAoBN,OAAO,CAAC,YAAY;CAwBrB;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,MAAM,CAAC;KACrB;CACF"}
+{"version":3,"file":"ds-button.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-button.ts"],"names":[],"mappings":"AAKA,OAAO,WAAW,CAAC;AACnB,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAK5C,OAAO,EAA2B,KAAK,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE5E,YAAY,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAEnD,qBAAa,MAAO,SAAQ,OAAO;IACjC,MAAM,CAAC,cAAc,UAAQ;IAC7B,MAAM,CAAC,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MA4Bf;IAEM,KAAK,EAAE,OAAO,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,aAAa,CAAC,YAAY,CAAC,GAAG,SAAS,CAAC;IAClD,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;IACzB,QAAgB,iBAAiB,CAAU;IAC3C,OAAO,CAAC,SAAS,CAAS;IAC1B,IAAI,aAAa,IAAI,OAAO,CAAoD;IAChF,OAAO,CAAC,oBAAoB,CAAmD;IAGvE,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,OAAO,CAAC;IACnB,MAAM,EAAE,OAAO,CAAC;IAChB,MAAM,EAAE,OAAO,CAAC;IAChB,IAAI,EAAE,OAAO,CAAC;IACd,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,OAAO,CAAC;IACf,GAAG,EAAE,OAAO,CAAC;IACb,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAC1B,OAAO,CAAC,QAAQ,CAAY;IAC5B,IAAI,OAAO,IAAI,MAAM,CAA0B;IAC/C,IAAI,OAAO,CAAC,KAAK,EAAE,MAAM,EAKxB;IACD,SAAS,KAAK,WAAW,IAAI,OAAO,CAAmD;IAC/E,KAAK,EAAE,OAAO,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACK,KAAK,EAAE,MAAM,CAAC;IACtB;;;;;;OAMG;IACK,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,GAAG,EAAE,MAAM,CAAC;IAGZ,QAAQ,EAAE,OAAO,CAAC;;IA+B1B,MAAM,CAAC,MAAM,4BAAsE;IAEnF;;;OAGG;IACH,YAAY;IAOZ,OAAO,CAAC,kBAAkB;IAM1B,+FAA+F;IAC/F,OAAO,CAAC,aAAa;IAKrB,OAAO;IAKP,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY;IAO5B,iBAAiB;IASjB,oBAAoB;IAKpB,oBAAoB,CAAC,QAAQ,EAAE,OAAO;IAEtC,MAAM;IA2CN,OAAO,CAAC,YAAY;CAYrB;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,MAAM,CAAC;KACrB;CACF"}

package/dist/2-core/ds-button.js

@@ -1,12 +1,16 @@
 // ds-button.ts
 // Core button component
 import { html, unsafeCSS } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
 import "./ds-text";
 import { Control } from "../0-face/control";
 import { define } from "../0-face/define";
 import hostStyles from "./styles/ds-button-host.css?inline";
 import styles from "./styles/ds-button.css?inline";
+import { renderSplit, focusSplit } from "./button-split";
+import splitStyles from "./styles/ds-button-split.css?inline";
 export class Button extends Control {
+    get splitDisabled() { return this.disabled || this._fieldsetDisabled; }
     get control() { return this._control; }
     set control(value) {
         const old = this._control;
@@ -14,14 +18,33 @@ export class Button extends Control {
         this.syncControl();
         this.requestUpdate("control", old);
     }
-    get hostControl() { return this.control === "host"; }
+    get hostControl() { return this.control === "host" && !this.split; }
     constructor() {
         super();
+        this.splitRole = false;
+        this.splitLanguageChanged = () => { if (this.split)
+            this.requestUpdate(); };
         this._control = "native";
+        if (typeof this.attachInternals === "function")
+            this.attachInternals();
+        this.split = false;
+        this.options = "";
+        this.value = "";
+        this.actions = false;
+        this.literal = false;
+        this.compact = false;
+        this._fieldsetDisabled = false;
+        this.addEventListener("click", event => {
+            if (this._fieldsetDisabled) {
+                event.preventDefault();
+                event.stopImmediatePropagation();
+            }
+        }, { capture: true });
         this.active = false;
         this.choice = false;
         this.icon = false;
         this.wide = false;
+        this.fixed = false;
         this.fit = false;
         this.danger = false;
         this.menuItem = false;
@@ -31,7 +54,10 @@ export class Button extends Control {
         this.blank = false;
         this.language = "en-US";
         this.text = "";
+        this.label = "";
         this.href = "";
+        this.target = "";
+        this.rel = "";
         this._loading = false;
     }
     /**
@@ -39,80 +65,125 @@ export class Button extends Control {
      * so its styles can make it a 16-unit square with the icon filling it.
      */
     _reflectIcon() {
-        if (this.control !== "native")
+        if (this.control !== "native" || this.split)
             return;
         const only = this.firstElementChild;
         const icon = !this.text && this.childElementCount === 1 && only?.localName === 'ds-icon' && !(this.textContent ?? '').trim();
         this.toggleAttribute('icon', !!icon);
     }
     syncSlottedControl() {
-        if (this.control !== "slotted")
+        if (this.control !== "slotted" || this.split)
             return;
         const button = this.querySelector(":scope > button");
         if (button)
-            button.disabled = this.disabled;
+            button.disabled = this.splitDisabled;
+    }
+    /** A split is a named group from the moment it is in the document, before its first render. */
+    syncSplitRole() {
+        if (this.split && !this.hasAttribute("role")) {
+            this.setAttribute("role", "group");
+            this.splitRole = true;
+        }
+        else if (!this.split && this.splitRole) {
+            this.removeAttribute("role");
+            this.splitRole = false;
+            this.syncControl();
+        }
     }
     updated() {
+        this.syncSplitRole();
         this.syncSlottedControl();
     }
     focus(options) {
+        if (this.split) {
+            focusSplit(this, options);
+            return;
+        }
         if (this.control === "slotted")
             this.querySelector(":scope > :is(button, a)")?.focus(options);
         else if (this.hostControl)
             super.focus(options);
         else
-            this.shadowRoot?.querySelector("button")?.focus(options);
+            this.shadowRoot?.querySelector('[part="control"]')?.focus(options);
     }
     connectedCallback() {
         super.connectedCallback();
+        this.syncSplitRole();
         this._reflectIcon();
         this.syncSlottedControl();
+        window.addEventListener("language-changed", this.splitLanguageChanged);
+        window.addEventListener("translations-loaded", this.splitLanguageChanged);
     }
+    disconnectedCallback() {
+        window.removeEventListener("language-changed", this.splitLanguageChanged);
+        window.removeEventListener("translations-loaded", this.splitLanguageChanged);
+        super.disconnectedCallback();
+    }
+    formDisabledCallback(disabled) { this._fieldsetDisabled = disabled; this.syncSlottedControl(); }
     render() {
+        if (this.split)
+            return renderSplit(this);
         const hasTextProps = this.text;
         if (this.control === "slotted")
             return html `<slot @slotchange=${this.syncSlottedControl}></slot>`;
         if (this.hostControl)
             return html `<slot name="icon"></slot><slot></slot><slot name="trailing"></slot>`;
+        const content = hasTextProps
+            ? html `<ds-text .text=${this.text}></ds-text>`
+            : html `<slot @slotchange=${this._reflectIcon}></slot>`;
+        if (this.href) {
+            const disabled = this.splitDisabled;
+            const target = this.target || (this.blank ? "_blank" : "");
+            const rel = this.rel || (target === "_blank" ? "noopener noreferrer" : "");
+            return html `<a
+        part="control"
+        ?primary=${this.primary}
+        ?secondary=${this.secondary}
+        href=${ifDefined(disabled ? undefined : this.href)}
+        target=${ifDefined(disabled || !target ? undefined : target)}
+        rel=${ifDefined(disabled || !rel ? undefined : rel)}
+        role=${ifDefined(disabled ? "link" : undefined)}
+        aria-disabled=${ifDefined(disabled ? "true" : undefined)}
+        aria-label=${ifDefined(this.label || undefined)}
+        @click=${this._handleClick}
+      >${content}</a>`;
+        }
         return html `
       <button
+        part="control"
         type="button"
         ?primary=${this.primary}
         ?secondary=${this.secondary}
-        ?disabled=${this.disabled}
+        ?disabled=${this.splitDisabled}
+        aria-label=${ifDefined(this.label || undefined)}
         @click=${this._handleClick}
       >
-        ${hasTextProps
-            ? html `<ds-text .text=${this.text}></ds-text>`
-            : html `<slot @slotchange=${this._reflectIcon}></slot>`}
+        ${content}
       </button>
     `;
     }
     _handleClick(e) {
         // Prevent any action if disabled and stop event propagation
-        if (this.disabled) {
-            e.preventDefault();
-            e.stopPropagation();
-            return;
-        }
-        // If href is provided, navigate to the URL and do not bubble further
-        if (this.href) {
+        if (this.splitDisabled) {
             e.preventDefault();
             e.stopPropagation();
-            if (this.blank) {
-                window.open(this.href, "_blank", "noopener,noreferrer");
-            }
-            else {
-                window.location.href = this.href;
-            }
             return;
         }
-        // Otherwise, rely on the native 'click' event bubbling from the inner
-        // <button> through the shadow boundary to consumers of <ds-button>.
-        // Do not re-dispatch a synthetic 'click' here to avoid duplicate events.
+        // Otherwise the native click bubbles from the inner <button> or <a>
+        // through the shadow boundary to consumers of <ds-button>, and a link
+        // navigates as the browser does. Nothing is re-dispatched or redirected.
     }
 }
+Button.formAssociated = true;
 Button.properties = {
+    split: { type: Boolean, reflect: true },
+    options: { type: String },
+    segments: { attribute: false },
+    value: { type: String, reflect: true },
+    actions: { type: Boolean, reflect: true },
+    literal: { type: Boolean, reflect: true },
+    compact: { type: Boolean, reflect: true },
+    _fieldsetDisabled: { state: true },
     primary: { type: Boolean, reflect: true },
     secondary: { type: Boolean, reflect: true },
     control: { type: String, reflect: true, noAccessor: true },
@@ -120,14 +191,18 @@ Button.properties = {
     choice: { type: Boolean, reflect: true },
     icon: { type: Boolean, reflect: true },
     wide: { type: Boolean, reflect: true },
+    fixed: { type: Boolean, reflect: true },
     fit: { type: Boolean, reflect: true },
     danger: { type: Boolean, reflect: true },
     menuItem: { type: Boolean, reflect: true, attribute: "menu-item" },
     blank: { type: Boolean, reflect: true },
     language: { type: String },
     text: { type: String },
+    label: { type: String },
     href: { type: String },
+    target: { type: String },
+    rel: { type: String },
     _loading: { type: Boolean, state: true },
 };
-Button.styles = [unsafeCSS(styles), unsafeCSS(hostStyles)];
+Button.styles = [unsafeCSS(styles), unsafeCSS(hostStyles), unsafeCSS(splitStyles)];
 define("ds-button", Button);

package/dist/2-core/ds-card.d.ts

@@ -1,34 +1,98 @@
-import { LitElement } from "lit";
+import { LitElement, type PropertyValues } from "lit";
+type Slot = "label" | "title" | "media";
+/**
+ * @element ds-card
+ * @prop {string} href - A destination: the whole card becomes one link.
+ * @prop {boolean} interactive - The whole card is one button-like press
+ *   target that fires `ds-card-press`; use `href` for a destination.
+ * @prop {string} tone - A palette colour for the fill (`sharp-blue`,
+ *   `apple-green`, `pink`…), drawn as its pastel and dim in dark mode, or
+ *   `ink` for the ink with the paper's words. The quiet fill by default.
+ * @prop {string} variant - `filled` (the default) or `outlined`, a 1px line
+ *   and no fill.
+ * @prop {number} width - The card's width in whole squares.
+ * @prop {number} height - The card's height in whole squares.
+ * @prop {string} padding - `none`, `small` (half a square), `medium` (one,
+ *   the default) or `large` (two).
+ * @prop {string} media - Where the picture stands: `start` (the default),
+ *   `center`, or `bleed` to run on past the padding to the end edge.
+ * @prop {boolean} disabled - Neither pressed nor followed.
+ *
+ * @slot label - The thing's name, muted, on one square.
+ * @slot title - The title, display size, a square and a half a line.
+ * @slot - Writing, one square a line.
+ * @slot media - A picture of it, a square below the words; it may run off
+ *   the card's foot and end edge and is cut there.
+ *
+ * @fires ds-card-press - An `interactive` card was pressed (click, Enter or Space).
+ *
+ * @example
+ * <ds-card href="/lists" tone="sharp-blue" width="14" height="22" media="center">
+ *   <span slot="label">Lists</span>
+ *   <span slot="title">Lists on one grid</span>
+ *   <img slot="media" src="lists.webp" alt="A list on a phone" />
+ * </ds-card>
+ */
 export declare class Card extends LitElement {
     static properties: {
+        href: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        interactive: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        tone: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
         variant: {
             type: StringConstructor;
             reflect: boolean;
         };
-        elevation: {
+        width: {
             type: NumberConstructor;
             reflect: boolean;
         };
-        interactive: {
-            type: BooleanConstructor;
+        height: {
+            type: NumberConstructor;
             reflect: boolean;
         };
-        disabled: {
-            type: BooleanConstructor;
+        padding: {
+            type: StringConstructor;
             reflect: boolean;
         };
-        padding: {
+        media: {
             type: StringConstructor;
             reflect: boolean;
         };
+        disabled: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        filled: {
+            state: boolean;
+        };
     };
-    variant: "default" | "outlined" | "elevated" | "filled";
-    elevation: number;
+    static styles: import("lit").CSSResult[];
+    href: string | undefined;
     interactive: boolean;
-    disabled: boolean;
+    tone: string | undefined;
+    variant: "filled" | "outlined";
+    width: number | undefined;
+    height: number | undefined;
     padding: "none" | "small" | "medium" | "large";
+    media: "start" | "center" | "bleed";
+    disabled: boolean;
+    /** The named slots that hold something. */
+    filled: Set<Slot>;
     constructor();
-    static styles: import("lit").CSSResult;
+    protected willUpdate(changed: PropertyValues<this>): void;
+    /** The named slots the card's children fill, read from the children so the first paint already has them. */
+    private read;
+    private readonly changed;
+    private press;
     render(): import("lit").TemplateResult<1>;
 }
 declare global {
@@ -36,4 +100,5 @@ declare global {
         "ds-card": Card;
     }
 }
+export {};
 //# sourceMappingURL=ds-card.d.ts.map

package/dist/2-core/ds-card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ds-card.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-card.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAE5C,qBAAa,IAAK,SAAQ,UAAU;IAClC,MAAM,CAAC,UAAU;;;;;;;;;;;;;;;;;;;;;MAMf;IAEM,OAAO,EAAE,SAAS,GAAG,UAAU,GAAG,UAAU,GAAG,QAAQ,CAAC;IACxD,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;;IAWvD,MAAM,CAAC,MAAM,0BA0FX;IAEF,MAAM;CAOP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,IAAI,CAAC;KACjB;CACF"}
+{"version":3,"file":"ds-card.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-card.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,UAAU,EAA4B,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAiBhF,KAAK,IAAI,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,CAAC;AAExC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,qBAAa,IAAK,SAAQ,UAAU;IAClC,MAAM,CAAC,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAWf;IAEF,MAAM,CAAC,MAAM,4BAA4D;IAEjE,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IACzB,WAAW,EAAE,OAAO,CAAC;IACrB,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IACzB,OAAO,EAAE,QAAQ,GAAG,UAAU,CAAC;IAC/B,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,OAAO,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IAC/C,KAAK,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,QAAQ,EAAE,OAAO,CAAC;IAC1B,2CAA2C;IACnC,MAAM,EAAE,GAAG,CAAC,IAAI,CAAC,CAAC;;IAY1B,SAAS,CAAC,UAAU,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC;IAYlD,4GAA4G;IAC5G,OAAO,CAAC,IAAI;IASZ,OAAO,CAAC,QAAQ,CAAC,OAAO,CAGtB;IAEF,OAAO,CAAC,KAAK;IASb,MAAM;CA2BP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,IAAI,CAAC;KACjB;CACF"}