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

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

@@ -0,0 +1,27 @@
+import { LitElement } from "lit";
+/**
+ * Vertical space on the unit scale.
+ *
+ * @element ds-gap
+ * @attr size - "025", "05", "08", "1" (the default) or "2" units.
+ *
+ * @example
+ * <ds-gap size="05"></ds-gap>
+ */
+export declare class Gap extends LitElement {
+    static properties: {
+        size: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+    };
+    size: "025" | "05" | "08" | "1" | "2" | undefined;
+    static styles: import("lit").CSSResult;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ds-gap": Gap;
+    }
+}
+//# sourceMappingURL=ds-gap.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-gap.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-gap.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAIlD;;;;;;;;GAQG;AACH,qBAAa,GAAI,SAAQ,UAAU;IACjC,MAAM,CAAC,UAAU;;;;;MAEf;IAEM,IAAI,EAAE,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,SAAS,CAAC;IAE1D,MAAM,CAAC,MAAM,0BAAqB;IAElC,MAAM;CAGP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,QAAQ,EAAE,GAAG,CAAC;KACf;CACF"}

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

@@ -0,0 +1,22 @@
+import { LitElement, html, unsafeCSS } from "lit";
+import styles from "./styles/ds-gap.css?inline";
+import { define } from "../0-face/define";
+/**
+ * Vertical space on the unit scale.
+ *
+ * @element ds-gap
+ * @attr size - "025", "05", "08", "1" (the default) or "2" units.
+ *
+ * @example
+ * <ds-gap size="05"></ds-gap>
+ */
+export class Gap extends LitElement {
+    render() {
+        return html ``;
+    }
+}
+Gap.properties = {
+    size: { type: String, reflect: true },
+};
+Gap.styles = unsafeCSS(styles);
+define("ds-gap", Gap);

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

@@ -0,0 +1,58 @@
+import { LitElement } from "lit";
+import type { IconName } from "./generated/ds-icon-map";
+export declare function themeIconSvg(svg: string): string;
+export type IconVariant = "glyph" | "primary" | "secondary";
+/**
+ * Icon component that renders SVG icons from the design system icon set.
+ *
+ * Usage:
+ *   <ds-icon type="close"></ds-icon>
+ *   <ds-icon type="home" variant="primary"></ds-icon>
+ *
+ * Variants:
+ *   - glyph (default): No background, inherits text color. Like text.
+ *   - primary: Accent color background with contrasting icon color.
+ *   - secondary: Subtle background with icon color.
+ *
+ * An icon that is not in the set can be given as content instead:
+ *   <ds-icon><svg>…</svg></ds-icon>
+ *
+ * Size is `--ds-icon-size` (14px by default) times `--ds-sf`; `size="small"`
+ * draws it at 12px and `size="large"` at 16px. Colour is `--ds-icon-color`,
+ * which follows the text.
+ */
+export declare class Icon extends LitElement {
+    static properties: {
+        type: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        variant: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        size: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+    };
+    private _type;
+    private _iconsReady;
+    private _failedType;
+    variant: IconVariant;
+    size: "small" | "large" | undefined;
+    constructor();
+    get type(): IconName | "";
+    set type(val: IconName | "");
+    /** Awaiting an icon also waits for its requested artwork and final render. */
+    protected getUpdateComplete(): Promise<boolean>;
+    static styles: import("lit").CSSResult;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ds-icon": Icon;
+    }
+}
+export type { IconName };
+//# sourceMappingURL=ds-icon.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-icon.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-icon.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAGlD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAgDxD,wBAAgB,YAAY,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAMhD;AAED,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,SAAS,GAAG,WAAW,CAAC;AAE5D;;;;;;;;;;;;;;;;;;GAkBG;AACH,qBAAa,IAAK,SAAQ,UAAU;IAClC,MAAM,CAAC,UAAU;;;;;;;;;;;;;MAIf;IAEF,OAAO,CAAC,KAAK,CAAqB;IAClC,OAAO,CAAC,WAAW,CAA4B;IAC/C,OAAO,CAAC,WAAW,CAAqB;IAChC,OAAO,EAAE,WAAW,CAAC;IACrB,IAAI,EAAE,OAAO,GAAG,OAAO,GAAG,SAAS,CAAC;;IAO5C,IAAI,IAAI,IAAI,QAAQ,GAAG,EAAE,CAExB;IAED,IAAI,IAAI,CAAC,GAAG,EAAE,QAAQ,GAAG,EAAE,EAI1B;IAED,8EAA8E;cAC9D,iBAAiB,IAAI,OAAO,CAAC,OAAO,CAAC;IAMrD,MAAM,CAAC,MAAM,0BAAqB;IAElC,MAAM;CAiCP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,IAAI,CAAC;KACjB;CACF;AAED,YAAY,EAAE,QAAQ,EAAE,CAAC"}

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

@@ -0,0 +1,128 @@
+import { LitElement, html, unsafeCSS } from "lit";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import styles from "./styles/ds-icon.css?inline";
+import { icons as immediateIcons, deferredIconNames } from "./generated/icons-immediate";
+import { define } from "../0-face/define";
+const iconNameToSvgMap = { ...immediateIcons };
+const deferred = new Set(deferredIconNames);
+let extraReady = false;
+let extraLoading;
+function loadExtraIcons() {
+    return (extraLoading ?? (extraLoading = import('./generated/icons-extra')
+        .then(({ icons }) => {
+        Object.assign(iconNameToSvgMap, icons);
+        extraReady = true;
+    })
+        .catch((error) => {
+        extraLoading = undefined;
+        throw error;
+    })));
+}
+/**
+ * The ink an icon was drawn in, whatever the file happens to say.
+ *
+ * DS one's icons are exported with the design's own dark ink baked into every
+ * path — #1E1E1E, #2A2A2A, plain black — so on dark paper they disappear. A
+ * one-colour icon is turned over to `currentColor` here, where the component
+ * puts it on the page, so it takes the colour of the text around it.
+ *
+ * An icon with colours of its own is left exactly as drawn. Consistency's block
+ * and pattern tiles set dark ink on a coloured ground, and a brand mark keeps
+ * the colours that make it that brand. `white` never counts as a colour: in
+ * this set it is the rectangle inside a `<clipPath>`.
+ */
+const INK = /(fill|stroke)=("|')(#1E1E1E|#2A2A2A|#000000|#000|black)\2/gi;
+const PAINT = /(?:fill|stroke)=("|')([^"']+)\1/gi;
+const NOT_A_COLOUR = /^(none|currentColor|white|#fff|#ffffff|url\(.*\))$/i;
+const INK_VALUE = /^(#1E1E1E|#2A2A2A|#000000|#000|black)$/i;
+const themed = new Map();
+function hasOwnColours(svg) {
+    for (const [, , value] of svg.matchAll(PAINT)) {
+        if (!NOT_A_COLOUR.test(value) && !INK_VALUE.test(value))
+            return true;
+    }
+    return false;
+}
+export function themeIconSvg(svg) {
+    const known = themed.get(svg);
+    if (known !== undefined)
+        return known;
+    const next = hasOwnColours(svg) ? svg : svg.replace(INK, '$1="currentColor"');
+    themed.set(svg, next);
+    return next;
+}
+/**
+ * Icon component that renders SVG icons from the design system icon set.
+ *
+ * Usage:
+ *   <ds-icon type="close"></ds-icon>
+ *   <ds-icon type="home" variant="primary"></ds-icon>
+ *
+ * Variants:
+ *   - glyph (default): No background, inherits text color. Like text.
+ *   - primary: Accent color background with contrasting icon color.
+ *   - secondary: Subtle background with icon color.
+ *
+ * An icon that is not in the set can be given as content instead:
+ *   <ds-icon><svg>…</svg></ds-icon>
+ *
+ * Size is `--ds-icon-size` (14px by default) times `--ds-sf`; `size="small"`
+ * draws it at 12px and `size="large"` at 16px. Colour is `--ds-icon-color`,
+ * which follows the text.
+ */
+export class Icon extends LitElement {
+    constructor() {
+        super();
+        this._type = "";
+        this.variant = "glyph";
+    }
+    get type() {
+        return this._type;
+    }
+    set type(val) {
+        const oldVal = this._type;
+        this._type = val;
+        this.requestUpdate("type", oldVal);
+    }
+    /** Awaiting an icon also waits for its requested artwork and final render. */
+    async getUpdateComplete() {
+        await super.getUpdateComplete();
+        await this._iconsReady;
+        return super.getUpdateComplete();
+    }
+    render() {
+        if (!this._type) {
+            return html `<slot></slot>`;
+        }
+        const svg = iconNameToSvgMap[this._type.toLowerCase()];
+        if (svg) {
+            return html `${unsafeHTML(themeIconSvg(svg))}`;
+        }
+        if (!extraReady &&
+            deferred.has(this._type.toLowerCase()) &&
+            !this._iconsReady &&
+            this._failedType !== this._type) {
+            const requested = this._type;
+            this._iconsReady = loadExtraIcons()
+                .then(() => {
+                this._failedType = undefined;
+                this.requestUpdate();
+            })
+                .catch(() => {
+                this._failedType = requested;
+            })
+                .finally(() => {
+                this._iconsReady = undefined;
+            });
+        }
+        // Fallback to slot if icon not found
+        return html `<slot></slot>`;
+    }
+}
+Icon.properties = {
+    type: { type: String, reflect: true },
+    variant: { type: String, reflect: true },
+    size: { type: String, reflect: true },
+};
+Icon.styles = unsafeCSS(styles);
+define("ds-icon", Icon);

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

@@ -0,0 +1,97 @@
+import { LitElement, type CSSResultGroup, type PropertyDeclarations } from "lit";
+import "./ds-text";
+export declare class Input extends LitElement {
+    static formAssociated: boolean;
+    private readonly focusFromLabel;
+    private internals;
+    private initialValue;
+    static properties: PropertyDeclarations;
+    type: "text" | "password" | "email" | "number" | "tel" | "url" | "search" | "date" | "time" | "datetime-local";
+    inputMode: string;
+    ariaLabel: string;
+    ariaLabelledBy: string;
+    ariaDescribedBy: string;
+    spellcheckHint: string;
+    ariaInvalid: string;
+    revealable: boolean;
+    quietFocus: boolean;
+    _passwordVisible: boolean;
+    _formDisabled: boolean;
+    name: string;
+    value: string;
+    placeholder: string;
+    placeholderKey: string;
+    label: string;
+    labelText: string;
+    disabled: boolean;
+    readonly: boolean;
+    required: boolean;
+    autofocus: boolean;
+    autocomplete: string;
+    pattern: string;
+    minlength: number;
+    maxlength: number;
+    min: string;
+    max: string;
+    step: string;
+    variant: "default" | "filled" | "outlined" | "row" | "field" | "plain";
+    error: string;
+    errorText: string;
+    _focused: boolean;
+    _placeholder: string;
+    _currentLanguage: string;
+    private boundHandlers;
+    constructor();
+    static styles: CSSResultGroup;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    firstUpdated(): void;
+    updated(changedProperties: Map<string, unknown>): void;
+    protected get input(): HTMLInputElement | HTMLTextAreaElement | null;
+    protected get isMultiline(): boolean;
+    get selectionStart(): number | null;
+    get selectionEnd(): number | null;
+    setSelectionRange(start: number, end: number, direction?: "forward" | "backward" | "none"): void;
+    get valueAsNumber(): number;
+    get labels(): NodeList | undefined;
+    get form(): HTMLFormElement | null;
+    get validity(): ValidityState | undefined;
+    get validationMessage(): string;
+    get willValidate(): boolean;
+    private syncForm;
+    checkValidity(): boolean;
+    reportValidity(): boolean;
+    formDisabledCallback(disabled: boolean): void;
+    formResetCallback(): void;
+    formStateRestoreCallback(state: string | File | FormData): void;
+    protected accessibleLabel(): string | undefined;
+    private togglePassword;
+    private handleKeyDown;
+    protected handleChange(event: Event): void;
+    private _loadPlaceholder;
+    protected _handleInput(e: Event): void;
+    protected _handleFocus(): void;
+    protected _handleBlur(): void;
+    /**
+     * Focus the input element
+     */
+    /** Render the native field within the tap that opens a phone keyboard. */
+    renderNow(): void;
+    focus(options?: FocusOptions): void;
+    /**
+     * Blur the input element
+     */
+    blur(): void;
+    /**
+     * Select all text in the input
+     */
+    select(): void;
+    protected renderControl(hasError: boolean, description: string): import("lit").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ds-input": Input;
+    }
+}
+//# sourceMappingURL=ds-input.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-input.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-input.ts"],"names":[],"mappings":"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"}