@oddkin/components 0.0.0-stage → 1.0.0-beta.0

package/dist/validation-summary/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/validation-summary/index.ts"],"names":[],"mappings":"AACA,OAAO,EACL,uBAAuB,EACvB,0BAA0B,EAC1B,KAAK,eAAe,GACrB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,yBAAyB,EAAE,MAAM,kCAAkC,CAAC;AAC7E,OAAO,EAAE,iCAAiC,EAAE,MAAM,2CAA2C,CAAC;AAC9F,OAAO,EAAE,uBAAuB,EAAE,MAAM,gCAAgC,CAAC;AACzE,OAAO,EAAE,2BAA2B,EAAE,MAAM,oCAAoC,CAAC"}

package/dist/validation-summary/index.js

@@ -0,0 +1,7 @@
+// Side-effect free. Register with `@oddkin/components/define/validation-summary`.
+export { OddkinValidationSummary, VALIDATION_SUMMARY_STRINGS, } from './validation-summary.js';
+export { validationSummaryTemplate } from './validation-summary.template.js';
+export { validationSummaryStructuralStyles } from './validation-summary.structural.styles.js';
+export { validationSummaryStyles } from './validation-summary.styles.js';
+export { validationSummaryDefinition } from './validation-summary.definition.js';
+//# sourceMappingURL=index.js.map

package/dist/validation-summary/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/validation-summary/index.ts"],"names":[],"mappings":"AAAA,kFAAkF;AAClF,OAAO,EACL,uBAAuB,EACvB,0BAA0B,GAE3B,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,yBAAyB,EAAE,MAAM,kCAAkC,CAAC;AAC7E,OAAO,EAAE,iCAAiC,EAAE,MAAM,2CAA2C,CAAC;AAC9F,OAAO,EAAE,uBAAuB,EAAE,MAAM,gCAAgC,CAAC;AACzE,OAAO,EAAE,2BAA2B,EAAE,MAAM,oCAAoC,CAAC"}

package/dist/validation-summary/validation-summary.d.ts

@@ -0,0 +1,66 @@
+import { OddkinElement } from '@oddkin/core/element';
+import { type Readable } from '@oddkin/core/reactive';
+import type { Scope } from '@oddkin/core/scope';
+export declare const VALIDATION_SUMMARY_STRINGS: {
+    title: string;
+    titleOne: string;
+    entry: string;
+};
+/** One invalid control as the summary lists it. */
+export interface ValidationEntry {
+    readonly control: HTMLElement;
+    readonly label: string;
+    readonly message: string;
+}
+declare const OddkinValidationSummary_base: import("@oddkin/core/element").WithProps<typeof OddkinElement, {
+    readonly label: import("@oddkin/core/element").PropDefinition<string>;
+    readonly form: import("@oddkin/core/element").PropDefinition<string>;
+    readonly strings: import("@oddkin/core/element").PropDefinition<Partial<{
+        title: string;
+        titleOne: string;
+        entry: string;
+    }> | undefined>;
+}>;
+/**
+ * Lists a form's problems after a submission that validation blocked: a heading with the count,
+ * then each invalid control's label and message as a link that moves focus to the control. It
+ * takes focus when it appears, shrinks as fields are fixed, and hides once the form is valid.
+ * Entered values are never cleared.
+ *
+ * @csspart base - The surface; takes focus when the summary appears.
+ * @csspart marker - The danger glyph.
+ * @csspart label - The heading.
+ * @csspart list - The list of problems.
+ * @csspart link - A problem: the control's label and message, linking to the control.
+ * @a11y A `role="group"` named by its heading. After a blocked submission it receives focus (`tabindex="-1"`), so the heading and the problems are read first; each link moves focus to its control. The browser's own validation bubbles are not shown while the summary reports the problems.
+ * @keyboard Tab moves through the links; Enter on a link moves focus to that control.
+ * @previewRole validationSummary
+ * @useFor Forms with several fields, where a failed submission should say what to fix in one place.
+ * @notFor One field's error (use the field's `error`); a failed save after a valid submission (use odd-alert).
+ * @limitation It reports submissions the user starts inside the form (a click on a submit button there, or Enter in a field). `form.requestSubmit()` and `form.checkValidity()` called by a script, and a submit button outside the form (its `form` attribute), leave it hidden. A form with `novalidate` is never blocked, so the summary never shows.
+ * @limitation The form is found when the summary connects or its `form` attribute changes: the ancestor form, or the form with that ID in the same document or shadow root.
+ * @category Forms
+ * @customization 1 2 3
+ */
+export declare class OddkinValidationSummary extends OddkinValidationSummary_base {
+    #private;
+    /** @internal The problems shown, in form order (empty while hidden). */
+    readonly _entries: import("@oddkin/core/reactive").Signal<readonly ValidationEntry[]>;
+    /** @internal The built-in text with the author's overrides. */
+    readonly _strings: Readable<typeof VALIDATION_SUMMARY_STRINGS>;
+    /** @internal The heading: `label`, or the count in the page language. */
+    readonly _heading: Readable<string>;
+    /** @internal What a link says. */
+    _text(entry: ValidationEntry): string;
+    /** @internal Link handler: focus the control (or its first focusable part) instead of navigating. */
+    _focus(event: Event, control: HTMLElement): void;
+    protected connected(scope: Scope): void;
+    protected mounted(scope: Scope): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'odd-validation-summary': OddkinValidationSummary;
+    }
+}
+export {};
+//# sourceMappingURL=validation-summary.d.ts.map

package/dist/validation-summary/validation-summary.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"validation-summary.d.ts","sourceRoot":"","sources":["../../src/validation-summary/validation-summary.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAQ,MAAM,sBAAsB,CAAC;AAE3D,OAAO,EAA+B,KAAK,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACnF,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAIhD,eAAO,MAAM,0BAA0B;IACrC,KAAK;IACL,QAAQ;IACR,KAAK;CACN,CAAC;AAEF,mDAAmD;AACnD,MAAM,WAAW,eAAe;IAC9B,QAAQ,CAAC,OAAO,EAAE,WAAW,CAAC;IAC9B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;CAC1B;;;;;;;;;;AAwCD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,qBAAa,uBAAwB,SAAQ,4BAY3C;;IACA,wEAAwE;IACxE,QAAQ,CAAC,QAAQ,qEAA0C;IAO3D,+DAA+D;IAC/D,QAAQ,CAAC,QAAQ,EAAE,QAAQ,CAAC,OAAO,0BAA0B,CAAC,CAE5D;IAEF,yEAAyE;IACzE,QAAQ,CAAC,QAAQ,EAAE,QAAQ,CAAC,MAAM,CAAC,CAIhC;IAEH,kCAAkC;IAClC,KAAK,CAAC,KAAK,EAAE,eAAe,GAAG,MAAM,CAGpC;IAED,qGAAqG;IACrG,MAAM,CAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,WAAW,GAAG,IAAI,CAI/C;IAsCD,UAAmB,SAAS,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI,CA6D/C;IAED,UAAmB,OAAO,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI,CAS7C;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,wBAAwB,EAAE,uBAAuB,CAAC;KACnD;CACF"}

package/dist/validation-summary/validation-summary.define.d.ts

@@ -0,0 +1,3 @@
+/// <reference path="validation-summary.d.ts" preserve="true" />
+export {};
+//# sourceMappingURL=validation-summary.define.d.ts.map

package/dist/validation-summary/validation-summary.define.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"validation-summary.define.d.ts","sourceRoot":"","sources":["../../src/validation-summary/validation-summary.define.ts"],"names":[],"mappings":""}

package/dist/validation-summary/validation-summary.define.js

@@ -0,0 +1,5 @@
+/// <reference path="./validation-summary.ts" preserve="true" />
+import { define } from '@oddkin/core/element';
+import { validationSummaryDefinition } from './validation-summary.definition.js';
+define(validationSummaryDefinition);
+//# sourceMappingURL=validation-summary.define.js.map

package/dist/validation-summary/validation-summary.define.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"validation-summary.define.js","sourceRoot":"","sources":["../../src/validation-summary/validation-summary.define.ts"],"names":[],"mappings":"AAAA,gEAAgE;AAChE,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAC9C,OAAO,EAAE,2BAA2B,EAAE,MAAM,oCAAoC,CAAC;AAEjF,MAAM,CAAC,2BAA2B,CAAC,CAAC"}

package/dist/validation-summary/validation-summary.definition.d.ts

@@ -0,0 +1,3 @@
+import { OddkinValidationSummary } from './validation-summary.js';
+export declare const validationSummaryDefinition: import("@oddkin/core/element").ElementDefinition<OddkinValidationSummary>;
+//# sourceMappingURL=validation-summary.definition.d.ts.map

package/dist/validation-summary/validation-summary.definition.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"validation-summary.definition.d.ts","sourceRoot":"","sources":["../../src/validation-summary/validation-summary.definition.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,uBAAuB,EAAE,MAAM,yBAAyB,CAAC;AAKlE,eAAO,MAAM,2BAA2B,2EAYtC,CAAC"}

package/dist/validation-summary/validation-summary.definition.js

@@ -0,0 +1,23 @@
+import { compose } from '@oddkin/core/element';
+import { focusRingStyles } from '../styles/focus-ring.styles.js';
+import { glyphStyles } from '../styles/glyphs.js';
+import { hostStyles } from '../styles/host.styles.js';
+import { toneStyles } from '../styles/tone.styles.js';
+import { OddkinValidationSummary } from './validation-summary.js';
+import { validationSummaryStructuralStyles } from './validation-summary.structural.styles.js';
+import { validationSummaryStyles } from './validation-summary.styles.js';
+import { validationSummaryTemplate } from './validation-summary.template.js';
+export const validationSummaryDefinition = compose({
+    name: 'odd-validation-summary',
+    element: OddkinValidationSummary,
+    template: validationSummaryTemplate,
+    styles: [
+        hostStyles,
+        validationSummaryStructuralStyles,
+        glyphStyles,
+        toneStyles,
+        focusRingStyles,
+        validationSummaryStyles,
+    ],
+});
+//# sourceMappingURL=validation-summary.definition.js.map

package/dist/validation-summary/validation-summary.definition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"validation-summary.definition.js","sourceRoot":"","sources":["../../src/validation-summary/validation-summary.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AACjE,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,EAAE,uBAAuB,EAAE,MAAM,yBAAyB,CAAC;AAClE,OAAO,EAAE,iCAAiC,EAAE,MAAM,2CAA2C,CAAC;AAC9F,OAAO,EAAE,uBAAuB,EAAE,MAAM,gCAAgC,CAAC;AACzE,OAAO,EAAE,yBAAyB,EAAE,MAAM,kCAAkC,CAAC;AAE7E,MAAM,CAAC,MAAM,2BAA2B,GAAG,OAAO,CAAC;IACjD,IAAI,EAAE,wBAAwB;IAC9B,OAAO,EAAE,uBAAuB;IAChC,QAAQ,EAAE,yBAAyB;IACnC,MAAM,EAAE;QACN,UAAU;QACV,iCAAiC;QACjC,WAAW;QACX,UAAU;QACV,eAAe;QACf,uBAAuB;KACxB;CACF,CAAC,CAAC"}

package/dist/validation-summary/validation-summary.js

@@ -0,0 +1,195 @@
+import { OddkinElement, prop } from '@oddkin/core/element';
+import { format, langOf, plural, strings } from '@oddkin/core/i18n';
+import { computed, signal, untracked } from '@oddkin/core/reactive';
+import { firstFocusable } from '../overlay/dialog.js';
+import { composedContains, deepActiveElement } from '../overlay/overlay.js';
+export const VALIDATION_SUMMARY_STRINGS = {
+    title: 'Please fix {count} fields',
+    titleOne: 'Please fix {count} field',
+    entry: '{label} — {message}',
+};
+const clean = (text) => (text ?? '').replace(/\s+/g, ' ').trim();
+/** The control's visible name: its `label`, its `<label>`s, its ARIA name, its text, or its name. */
+function labelOf(control) {
+    if (typeof control.label === 'string' && clean(control.label))
+        return clean(control.label);
+    if (control instanceof HTMLInputElement && control.type === 'radio') {
+        const legend = control.closest('fieldset')?.querySelector(':scope > legend');
+        if (legend)
+            return clean(legend.textContent);
+    }
+    if (control.labels?.length)
+        return clean([...control.labels].map((label) => label.textContent).join(' '));
+    const root = control.getRootNode();
+    const labelledBy = clean((control.getAttribute('aria-labelledby') ?? '')
+        .split(/\s+/)
+        .map((id) => (id ? root.getElementById(id)?.textContent : ''))
+        .join(' '));
+    if (labelledBy)
+        return labelledBy;
+    const aria = clean(control.getAttribute('aria-label'));
+    if (aria)
+        return aria;
+    const text = control.localName.includes('-') ? clean(control.textContent) : '';
+    return text || clean(control.getAttribute('name'));
+}
+const invalid = (control) => !!control.willValidate && control.validity?.valid === false;
+/**
+ * Lists a form's problems after a submission that validation blocked: a heading with the count,
+ * then each invalid control's label and message as a link that moves focus to the control. It
+ * takes focus when it appears, shrinks as fields are fixed, and hides once the form is valid.
+ * Entered values are never cleared.
+ *
+ * @csspart base - The surface; takes focus when the summary appears.
+ * @csspart marker - The danger glyph.
+ * @csspart label - The heading.
+ * @csspart list - The list of problems.
+ * @csspart link - A problem: the control's label and message, linking to the control.
+ * @a11y A `role="group"` named by its heading. After a blocked submission it receives focus (`tabindex="-1"`), so the heading and the problems are read first; each link moves focus to its control. The browser's own validation bubbles are not shown while the summary reports the problems.
+ * @keyboard Tab moves through the links; Enter on a link moves focus to that control.
+ * @previewRole validationSummary
+ * @useFor Forms with several fields, where a failed submission should say what to fix in one place.
+ * @notFor One field's error (use the field's `error`); a failed save after a valid submission (use odd-alert).
+ * @limitation It reports submissions the user starts inside the form (a click on a submit button there, or Enter in a field). `form.requestSubmit()` and `form.checkValidity()` called by a script, and a submit button outside the form (its `form` attribute), leave it hidden. A form with `novalidate` is never blocked, so the summary never shows.
+ * @limitation The form is found when the summary connects or its `form` attribute changes: the ancestor form, or the form with that ID in the same document or shadow root.
+ * @category Forms
+ * @customization 1 2 3
+ */
+export class OddkinValidationSummary extends OddkinElement.with({
+    label: prop.string({
+        default: '',
+        description: 'The heading; default `strings.title`, "Please fix {count} fields".',
+    }),
+    form: prop.string({
+        default: '',
+        description: 'ID of the form it reports on; default: the ancestor form.',
+    }),
+    strings: prop.object({
+        description: 'Localized string overrides: `title`, `titleOne` (one problem), `entry`.',
+    }),
+}) {
+    /** @internal The problems shown, in form order (empty while hidden). */
+    _entries = signal([]);
+    // A submission the user started is running; `#reported` once its problems were read.
+    #attempt = false;
+    #reported = false;
+    #focusPending = false;
+    #refreshQueued = false;
+    /** @internal The built-in text with the author's overrides. */
+    _strings = computed(() => strings(VALIDATION_SUMMARY_STRINGS, this.strings));
+    /** @internal The heading: `label`, or the count in the page language. */
+    _heading = computed(() => {
+        if (this.label)
+            return this.label;
+        const s = this._strings.value;
+        return plural(this._entries.value.length, { one: s.titleOne, other: s.title }, langOf(this));
+    });
+    /** @internal What a link says. */
+    _text(entry) {
+        if (!entry.label)
+            return entry.message;
+        return format(this._strings.value.entry, { label: entry.label, message: entry.message });
+    }
+    /** @internal Link handler: focus the control (or its first focusable part) instead of navigating. */
+    _focus(event, control) {
+        event.preventDefault();
+        control.focus();
+        if (!composedContains(control, deepActiveElement()))
+            firstFocusable(control)?.focus();
+    }
+    #formElement() {
+        const id = this.form;
+        if (!id)
+            return this.closest('form');
+        const root = this.getRootNode();
+        const form = root.getElementById?.(id);
+        return form instanceof HTMLFormElement ? form : null;
+    }
+    #read(form) {
+        const radios = new Set();
+        const entries = [];
+        for (const element of form.elements) {
+            const control = element;
+            if (!invalid(control))
+                continue;
+            if (control instanceof HTMLInputElement && control.type === 'radio' && control.name) {
+                if (radios.has(control.name))
+                    continue;
+                radios.add(control.name);
+            }
+            entries.push({
+                control,
+                label: labelOf(control),
+                message: clean(control.validationMessage),
+            });
+        }
+        return entries;
+    }
+    #refresh() {
+        const kept = this._entries.value.filter((entry) => invalid(entry.control));
+        this._entries.value = kept.map((entry) => ({
+            control: entry.control,
+            label: labelOf(entry.control),
+            message: clean(entry.control.validationMessage),
+        }));
+    }
+    connected(scope) {
+        scope.effect((run) => {
+            const form = this.#formElement();
+            if (!form)
+                return;
+            // A submission the user starts: activation of a submit button or Enter in a field. The
+            // browser validates in the same task, so the flag ends with it.
+            const start = () => {
+                this.#attempt = true;
+                run.timeout(() => (this.#attempt = this.#reported = false), 0);
+            };
+            run.listen(form, 'click', (event) => {
+                const submitter = event
+                    .composedPath()
+                    .some((node) => (node instanceof HTMLButtonElement || node instanceof HTMLInputElement) &&
+                    (node.type === 'submit' || node.type === 'image'));
+                if (submitter)
+                    start();
+            }, true);
+            run.listen(form, 'keydown', (event) => {
+                if (event.key === 'Enter')
+                    start();
+            }, true);
+            run.listen(form, 'invalid', (event) => {
+                if (!this.#attempt)
+                    return;
+                // The summary reports the problems, so the browser's bubble and focus move stay away.
+                event.preventDefault();
+                if (this.#reported)
+                    return;
+                this.#reported = this.#focusPending = true;
+                this._entries.value = this.#read(form);
+            }, true);
+            const queueRefresh = () => {
+                if (this.#refreshQueued || !this._entries.value.length)
+                    return;
+                this.#refreshQueued = true;
+                // After the controls' own validity updates for this edit.
+                run.timeout(() => {
+                    this.#refreshQueued = false;
+                    this.#refresh();
+                }, 0);
+            };
+            run.listen(form, 'input', queueRefresh);
+            run.listen(form, 'change', queueRefresh);
+            const clear = () => (this._entries.value = []);
+            run.listen(form, 'reset', clear);
+            run.listen(form, 'submit', clear);
+        });
+    }
+    mounted(scope) {
+        scope.effect(() => {
+            if (!this._entries.value.length || !this.#focusPending)
+                return;
+            this.#focusPending = false;
+            untracked(() => this.shadowRoot.querySelector('[part~="base"]')?.focus());
+        }, { phase: 'post', name: '<odd-validation-summary> focus' });
+    }
+}
+//# sourceMappingURL=validation-summary.js.map

package/dist/validation-summary/validation-summary.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"validation-summary.js","sourceRoot":"","sources":["../../src/validation-summary/validation-summary.ts"],"names":[],"mappings":"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"}

package/dist/validation-summary/validation-summary.structural.styles.d.ts

@@ -0,0 +1,6 @@
+/**
+ * The heading row (glyph and heading) above the list, in one column that wraps long text. No
+ * brand or visual tokens.
+ */
+export declare const validationSummaryStructuralStyles: import("@oddkin/core/styles").CSSResult;
+//# sourceMappingURL=validation-summary.structural.styles.d.ts.map

package/dist/validation-summary/validation-summary.structural.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"validation-summary.structural.styles.d.ts","sourceRoot":"","sources":["../../src/validation-summary/validation-summary.structural.styles.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,eAAO,MAAM,iCAAiC,yCA4B7C,CAAC"}

package/dist/validation-summary/validation-summary.structural.styles.js

@@ -0,0 +1,35 @@
+import { css } from '@oddkin/core/styles';
+/**
+ * The heading row (glyph and heading) above the list, in one column that wraps long text. No
+ * brand or visual tokens.
+ */
+export const validationSummaryStructuralStyles = css `
+  :host {
+    display: block;
+  }
+  .summary {
+    display: flex;
+    flex-direction: column;
+    min-inline-size: 0;
+    overflow-wrap: anywhere;
+  }
+  .header {
+    display: flex;
+    align-items: flex-start;
+  }
+  .marker {
+    display: inline-flex;
+    flex: none;
+  }
+  .label {
+    margin: 0;
+  }
+  .list {
+    display: flex;
+    flex-direction: column;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+`;
+//# sourceMappingURL=validation-summary.structural.styles.js.map

package/dist/validation-summary/validation-summary.structural.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"validation-summary.structural.styles.js","sourceRoot":"","sources":["../../src/validation-summary/validation-summary.structural.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAE1C;;;GAGG;AACH,MAAM,CAAC,MAAM,iCAAiC,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4BnD,CAAC"}

package/dist/validation-summary/validation-summary.styles.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Oddkin's default validation summary: Figma `ValidationSummary` (danger surface with a danger
+ * border, `control/radius`, UI heading in the danger colour, Body links in the link colour).
+ */
+export declare const validationSummaryStyles: import("@oddkin/core/styles").CSSResult;
+//# sourceMappingURL=validation-summary.styles.d.ts.map

package/dist/validation-summary/validation-summary.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"validation-summary.styles.d.ts","sourceRoot":"","sources":["../../src/validation-summary/validation-summary.styles.ts"],"names":[],"mappings":"AAGA;;;GAGG;AACH,eAAO,MAAM,uBAAuB,yCAqCnC,CAAC"}

package/dist/validation-summary/validation-summary.styles.js

@@ -0,0 +1,45 @@
+import { css } from '@oddkin/core/styles';
+import { token } from '@oddkin/tokens/refs';
+/**
+ * Oddkin's default validation summary: Figma `ValidationSummary` (danger surface with a danger
+ * border, `control/radius`, UI heading in the danger colour, Body links in the link colour).
+ */
+export const validationSummaryStyles = css `
+  .summary {
+    gap: ${token('space.sm')};
+    padding: ${token('space.md')};
+    border: ${token('border.width.default')} solid var(--_tone-foreground);
+    border-radius: ${token('control.radius')};
+    background: var(--_tone-surface);
+    color: ${token('color.text.primary')};
+  }
+  .header {
+    gap: ${token('space.xs')};
+  }
+  .marker,
+  .label {
+    color: var(--_tone-foreground);
+  }
+  .marker {
+    font-size: ${token('icon.size.md')};
+  }
+  .label {
+    font-family: ${token('type.ui.family')};
+    font-size: ${token('type.ui.size')};
+    font-weight: ${token('type.ui.weight')};
+    line-height: ${token('type.ui.line-height')};
+  }
+  .list {
+    gap: ${token('space.sm')};
+  }
+  .link {
+    color: ${token('color.link')};
+    font-family: ${token('type.body.family')};
+    font-size: ${token('type.body.size')};
+    font-weight: ${token('type.body.weight')};
+    line-height: ${token('type.body.line-height')};
+    text-decoration-line: underline;
+    text-underline-offset: 0.2em;
+  }
+`;
+//# sourceMappingURL=validation-summary.styles.js.map

package/dist/validation-summary/validation-summary.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"validation-summary.styles.js","sourceRoot":"","sources":["../../src/validation-summary/validation-summary.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAE5C;;;GAGG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG,GAAG,CAAA;;WAE/B,KAAK,CAAC,UAAU,CAAC;eACb,KAAK,CAAC,UAAU,CAAC;cAClB,KAAK,CAAC,sBAAsB,CAAC;qBACtB,KAAK,CAAC,gBAAgB,CAAC;;aAE/B,KAAK,CAAC,oBAAoB,CAAC;;;WAG7B,KAAK,CAAC,UAAU,CAAC;;;;;;;iBAOX,KAAK,CAAC,cAAc,CAAC;;;mBAGnB,KAAK,CAAC,gBAAgB,CAAC;iBACzB,KAAK,CAAC,cAAc,CAAC;mBACnB,KAAK,CAAC,gBAAgB,CAAC;mBACvB,KAAK,CAAC,qBAAqB,CAAC;;;WAGpC,KAAK,CAAC,UAAU,CAAC;;;aAGf,KAAK,CAAC,YAAY,CAAC;mBACb,KAAK,CAAC,kBAAkB,CAAC;iBAC3B,KAAK,CAAC,gBAAgB,CAAC;mBACrB,KAAK,CAAC,kBAAkB,CAAC;mBACzB,KAAK,CAAC,uBAAuB,CAAC;;;;CAIhD,CAAC"}

package/dist/validation-summary/validation-summary.template.d.ts

@@ -0,0 +1,8 @@
+import type { OddkinValidationSummary } from './validation-summary.js';
+/**
+ * Anatomy: `part="base"` (the focus target, a group named by the heading) with the danger
+ * `marker` glyph, the `label` heading, and the `list` of `link`s, one per problem. Hidden while
+ * there is nothing to fix.
+ */
+export declare const validationSummaryTemplate: (summary: OddkinValidationSummary) => import("@oddkin/core/template").TemplateResult;
+//# sourceMappingURL=validation-summary.template.d.ts.map

package/dist/validation-summary/validation-summary.template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"validation-summary.template.d.ts","sourceRoot":"","sources":["../../src/validation-summary/validation-summary.template.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,yBAAyB,CAAC;AAEvE;;;;GAIG;AACH,eAAO,MAAM,yBAAyB,YAAa,uBAAuB,mDAgCzE,CAAC"}

package/dist/validation-summary/validation-summary.template.js

@@ -0,0 +1,36 @@
+import { html, repeat } from '@oddkin/core/template';
+import { toneGlyph } from '../styles/tone.styles.js';
+/**
+ * Anatomy: `part="base"` (the focus target, a group named by the heading) with the danger
+ * `marker` glyph, the `label` heading, and the `list` of `link`s, one per problem. Hidden while
+ * there is nothing to fix.
+ */
+export const validationSummaryTemplate = (summary) => {
+    const entries = summary._entries.value;
+    return html `<div
+    part="base"
+    class="summary"
+    data-tone="danger"
+    role="group"
+    aria-labelledby="label"
+    tabindex="-1"
+    ?hidden=${!entries.length}
+  >
+    <div class="header">
+      <span part="marker" class="marker" aria-hidden="true">${toneGlyph('danger')}</span>
+      <h2 part="label" id="label" class="label">${summary._heading.value}</h2>
+    </div>
+    <ul part="list" class="list" role="list">
+      ${repeat(entries, (entry) => entry.control, (entry) => html `<li class="item">
+            <a
+              part="link"
+              class="link"
+              href=${entry.control.id ? `#${entry.control.id}` : '#'}
+              @click=${(event) => summary._focus(event, entry.control)}
+              >${summary._text(entry)}</a
+            >
+          </li>`)}
+    </ul>
+  </div>`;
+};
+//# sourceMappingURL=validation-summary.template.js.map

package/dist/validation-summary/validation-summary.template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"validation-summary.template.js","sourceRoot":"","sources":["../../src/validation-summary/validation-summary.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AACrD,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAGrD;;;;GAIG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAG,CAAC,OAAgC,EAAE,EAAE;IAC5E,MAAM,OAAO,GAAG,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC;IACvC,OAAO,IAAI,CAAA;;;;;;;cAOC,CAAC,OAAO,CAAC,MAAM;;;8DAGiC,SAAS,CAAC,QAAQ,CAAC;kDAC/B,OAAO,CAAC,QAAQ,CAAC,KAAK;;;QAGhE,MAAM,CACN,OAAO,EACP,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,OAAO,EACxB,CAAC,KAAK,EAAE,EAAE,CACR,IAAI,CAAA;;;;qBAIO,KAAK,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,CAAC,OAAO,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,GAAG;uBAC7C,CAAC,KAAY,EAAE,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC;iBAC5D,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC;;gBAErB,CACT;;SAEE,CAAC;AACV,CAAC,CAAC"}