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

package/dist/checkbox-group/checkbox-group.js

@@ -0,0 +1,94 @@
+import { prop } from '@oddkin/core/element';
+import { signal } from '@oddkin/core/reactive';
+import { OddkinFormControl } from '../form-control/form-control.js';
+/**
+ * A named group of `odd-checkbox` choices with one legend, description, and error. Each choice
+ * keeps its own name, value, and checkedness; the group adds `required` (at least one checked)
+ * and `disabled` for all of them.
+ *
+ * @slot - The `odd-checkbox` choices.
+ * @csspart field - The group: legend, description, choices, and error.
+ * @csspart label - The visible legend.
+ * @csspart description - Help text, referenced by `aria-describedby`.
+ * @csspart control - The choices.
+ * @csspart error - The error message, referenced by `aria-describedby`.
+ * @cssstate user-invalid - The group shows its error: `error` is set, or no choice is checked in a required group after focus left it or a validity check failed.
+ * @a11y A `role="group"` in the shadow root, named by the legend and described by the description and error, holds the slotted checkboxes, as a `<fieldset>` would. Each checkbox keeps its own name and state.
+ * @keyboard Tab moves through the checkboxes; Space toggles the focused one.
+ * @previewRole checkboxGroup
+ * @useFor Several independent choices under one question, such as notification channels.
+ * @notFor One choice among several (use odd-radio-group); a single yes-or-no choice (use odd-checkbox).
+ * @limitation `disabled` sets `disabled` on the choices that were enabled and clears it from those again when the group is enabled; a `<fieldset disabled>` around the group disables everything natively.
+ * @limitation A required group reports the browser's own message for an unselected set ("Please select one of these options." in English) at its first enabled choice; set `error` for your own wording.
+ * @category Forms
+ * @customization 1 2 3
+ */
+export class OddkinCheckboxGroup extends OddkinFormControl.with({
+    label: prop.string({ default: '', description: 'Visible legend; names the group.' }),
+    required: prop.boolean({
+        reflect: true,
+        description: 'At least one choice must be checked to submit.',
+    }),
+    orientation: prop.enum(['vertical', 'horizontal'], {
+        default: 'vertical',
+        reflect: true,
+        description: 'Stacks the choices, or lines them up and wraps them.',
+    }),
+}) {
+    /** @internal The slotted checkboxes, in order. */
+    _choices = signal([]);
+    // Choices this group disabled, so enabling the group leaves the author's disabled ones alone.
+    #disabledHere = new WeakSet();
+    // A hidden radio in the shadow root supplies the browser's flag and message for "none chosen".
+    #flag() {
+        return this.shadowRoot?.querySelector('.flag');
+    }
+    _formOptions() {
+        return {
+            value: () => null,
+            control: () => this.#flag(),
+            anchor: () => this._choices.value.find((choice) => !choice.disabled)?.shadowRoot?.querySelector('input'),
+            watch: () => {
+                const required = this.required;
+                const choices = this._choices.value;
+                const checked = choices.some((choice) => choice.checked);
+                // The anchor is the first enabled choice.
+                for (const choice of choices)
+                    void choice.disabled;
+                const flag = this.#flag();
+                if (flag)
+                    Object.assign(flag, { required, checked });
+            },
+        };
+    }
+    mounted(scope) {
+        super.mounted(scope);
+        scope.effect(() => {
+            const disabled = this.disabled;
+            for (const choice of this._choices.value) {
+                if (disabled && !choice.disabled) {
+                    choice.disabled = true;
+                    this.#disabledHere.add(choice);
+                }
+                else if (!disabled && this.#disabledHere.delete(choice))
+                    choice.disabled = false;
+            }
+        });
+    }
+    /** @internal Template handler: the slotted choices changed. */
+    _onSlotChange = (event) => {
+        const next = event.target
+            .assignedElements()
+            .filter((el) => el.localName === 'odd-checkbox');
+        for (const choice of this._choices.value)
+            if (!next.includes(choice) && this.#disabledHere.delete(choice))
+                choice.disabled = false;
+        this._choices.value = next;
+    };
+    /** @internal Template handler: focus left the group, not just moved between its choices. */
+    _onFocusOut = (event) => {
+        if (!this.contains(event.relatedTarget))
+            this._onBlur();
+    };
+}
+//# sourceMappingURL=checkbox-group.js.map

package/dist/checkbox-group/checkbox-group.js.map

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

package/dist/checkbox-group/checkbox-group.recipe.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Arrangement of the checkbox group (layout-recipes.md §14): the options in a column, or with
+ * `orientation="horizontal"` in a row that wraps.
+ */
+export declare const checkboxGroupRecipe: import("../layout/index.js").LayoutRecipe;
+//# sourceMappingURL=checkbox-group.recipe.d.ts.map

package/dist/checkbox-group/checkbox-group.recipe.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-group.recipe.d.ts","sourceRoot":"","sources":["../../src/checkbox-group/checkbox-group.recipe.ts"],"names":[],"mappings":"AAGA;;;GAGG;AACH,eAAO,MAAM,mBAAmB,2CAQ9B,CAAC"}

package/dist/checkbox-group/checkbox-group.recipe.js

@@ -0,0 +1,16 @@
+import { token } from '@oddkin/tokens/refs';
+import { defineLayoutRecipe, row, stack } from '../layout/index.js';
+/**
+ * Arrangement of the checkbox group (layout-recipes.md §14): the options in a column, or with
+ * `orientation="horizontal"` in a row that wraps.
+ */
+export const checkboxGroupRecipe = defineLayoutRecipe({
+    name: 'checkbox-group',
+    regions: { options: stack({ gap: token('space.lg'), align: 'start' }) },
+    variants: {
+        orientation: {
+            horizontal: { options: row({ gap: token('space.lg'), align: 'start', wrap: true }) },
+        },
+    },
+});
+//# sourceMappingURL=checkbox-group.recipe.js.map

package/dist/checkbox-group/checkbox-group.recipe.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-group.recipe.js","sourceRoot":"","sources":["../../src/checkbox-group/checkbox-group.recipe.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAC5C,OAAO,EAAE,kBAAkB,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAEpE;;;GAGG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,kBAAkB,CAAC;IACpD,IAAI,EAAE,gBAAgB;IACtB,OAAO,EAAE,EAAE,OAAO,EAAE,KAAK,CAAC,EAAE,GAAG,EAAE,KAAK,CAAC,UAAU,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC,EAAE;IACvE,QAAQ,EAAE;QACR,WAAW,EAAE;YACX,UAAU,EAAE,EAAE,OAAO,EAAE,GAAG,CAAC,EAAE,GAAG,EAAE,KAAK,CAAC,UAAU,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE;SACrF;KACF;CACF,CAAC,CAAC"}

package/dist/checkbox-group/checkbox-group.recipe.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const checkboxGroupRecipeStyles: import("@oddkin/core/styles").CSSResult;
+//# sourceMappingURL=checkbox-group.recipe.styles.d.ts.map

package/dist/checkbox-group/checkbox-group.recipe.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-group.recipe.styles.d.ts","sourceRoot":"","sources":["../../src/checkbox-group/checkbox-group.recipe.styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,yBAAyB,yCAErC,CAAC"}

package/dist/checkbox-group/checkbox-group.recipe.styles.js

@@ -0,0 +1,5 @@
+// Generated from ./checkbox-group.recipe.ts by packages/components/test/recipes.test.ts (UPDATE_FIXTURES=1).
+// Do not edit: change the recipe and regenerate.
+import { unsafeCSS } from '@oddkin/core/styles';
+export const checkboxGroupRecipeStyles = unsafeCSS('@layer odd.layout.base, odd.layout.variant, odd.layout.condition;\n@layer odd.layout.base {\n  .options {\n    display: flex;\n    flex-direction: column;\n    gap: var(--odd-space-lg);\n    min-inline-size: 0;\n    align-items: start;\n  }\n}\n@layer odd.layout.variant {\n  :host(:where([orientation="horizontal"])) .options {\n    flex-direction: row;\n    flex-wrap: wrap;\n  }\n}\n');
+//# sourceMappingURL=checkbox-group.recipe.styles.js.map

package/dist/checkbox-group/checkbox-group.recipe.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-group.recipe.styles.js","sourceRoot":"","sources":["../../src/checkbox-group/checkbox-group.recipe.styles.ts"],"names":[],"mappings":"AAAA,6GAA6G;AAC7G,iDAAiD;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAEhD,MAAM,CAAC,MAAM,yBAAyB,GAAG,SAAS,CAChD,oYAAoY,CACrY,CAAC"}

package/dist/checkbox-group/checkbox-group.structural.styles.d.ts

@@ -0,0 +1,7 @@
+/**
+ * The group is a block; its legend, description, and error use the shared field layout. The
+ * choices stack, or line up and wrap (`orientation="horizontal"`): the layout recipe in
+ * `checkbox-group.recipe.ts`. No brand tokens.
+ */
+export declare const checkboxGroupStructuralStyles: import("@oddkin/core/styles").CSSResult;
+//# sourceMappingURL=checkbox-group.structural.styles.d.ts.map

package/dist/checkbox-group/checkbox-group.structural.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-group.structural.styles.d.ts","sourceRoot":"","sources":["../../src/checkbox-group/checkbox-group.structural.styles.ts"],"names":[],"mappings":"AAGA;;;;GAIG;AACH,eAAO,MAAM,6BAA6B,yCAKzC,CAAC"}

package/dist/checkbox-group/checkbox-group.structural.styles.js

@@ -0,0 +1,14 @@
+import { css } from '@oddkin/core/styles';
+import { checkboxGroupRecipeStyles } from './checkbox-group.recipe.styles.js';
+/**
+ * The group is a block; its legend, description, and error use the shared field layout. The
+ * choices stack, or line up and wrap (`orientation="horizontal"`): the layout recipe in
+ * `checkbox-group.recipe.ts`. No brand tokens.
+ */
+export const checkboxGroupStructuralStyles = css `
+  ${checkboxGroupRecipeStyles}
+  :host {
+    display: block;
+  }
+`;
+//# sourceMappingURL=checkbox-group.structural.styles.js.map

package/dist/checkbox-group/checkbox-group.structural.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-group.structural.styles.js","sourceRoot":"","sources":["../../src/checkbox-group/checkbox-group.structural.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAC1C,OAAO,EAAE,yBAAyB,EAAE,MAAM,mCAAmC,CAAC;AAE9E;;;;GAIG;AACH,MAAM,CAAC,MAAM,6BAA6B,GAAG,GAAG,CAAA;IAC5C,yBAAyB;;;;CAI5B,CAAC"}

package/dist/checkbox-group/checkbox-group.styles.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Oddkin's default checkbox group (Figma `CheckboxGroup`): the legend, description, and error
+ * are the shared control look; the choices sit one target height apart, as Figma's 48 px rows.
+ */
+export declare const checkboxGroupStyles: import("@oddkin/core/styles").CSSResult;
+//# sourceMappingURL=checkbox-group.styles.d.ts.map

package/dist/checkbox-group/checkbox-group.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-group.styles.d.ts","sourceRoot":"","sources":["../../src/checkbox-group/checkbox-group.styles.ts"],"names":[],"mappings":"AAGA;;;GAGG;AACH,eAAO,MAAM,mBAAmB,yCAI/B,CAAC"}

package/dist/checkbox-group/checkbox-group.styles.js

@@ -0,0 +1,12 @@
+import { css } from '@oddkin/core/styles';
+import { token } from '@oddkin/tokens/refs';
+/**
+ * Oddkin's default checkbox group (Figma `CheckboxGroup`): the legend, description, and error
+ * are the shared control look; the choices sit one target height apart, as Figma's 48 px rows.
+ */
+export const checkboxGroupStyles = css `
+  .options {
+    padding-block: ${token('space.sm')};
+  }
+`;
+//# sourceMappingURL=checkbox-group.styles.js.map

package/dist/checkbox-group/checkbox-group.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-group.styles.js","sourceRoot":"","sources":["../../src/checkbox-group/checkbox-group.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,mBAAmB,GAAG,GAAG,CAAA;;qBAEjB,KAAK,CAAC,UAAU,CAAC;;CAErC,CAAC"}

package/dist/checkbox-group/checkbox-group.template.d.ts

@@ -0,0 +1,7 @@
+import type { OddkinCheckboxGroup } from './checkbox-group.js';
+/**
+ * Anatomy: the shared field as a `role="group"` named by its legend (`label` part) and
+ * described by the `description` and `error` parts, around the slotted choices (`control`).
+ */
+export declare const checkboxGroupTemplate: (group: OddkinCheckboxGroup) => import("@oddkin/core/template").TemplateResult;
+//# sourceMappingURL=checkbox-group.template.d.ts.map

package/dist/checkbox-group/checkbox-group.template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-group.template.d.ts","sourceRoot":"","sources":["../../src/checkbox-group/checkbox-group.template.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAE/D;;;GAGG;AACH,eAAO,MAAM,qBAAqB,UAAW,mBAAmB,mDAkBvD,CAAC"}

package/dist/checkbox-group/checkbox-group.template.js

@@ -0,0 +1,25 @@
+import { html } from '@oddkin/core/template';
+import { externalDescriptionTemplate } from '../form-control/description.js';
+/**
+ * Anatomy: the shared field as a `role="group"` named by its legend (`label` part) and
+ * described by the `description` and `error` parts, around the slotted choices (`control`).
+ */
+export const checkboxGroupTemplate = (group) => html `<div
+    part="field"
+    class="field"
+    role="group"
+    aria-labelledby=${group.label ? 'label' : null}
+    aria-describedby=${group._describedBy}
+    aria-invalid=${group._userInvalid.value ? 'true' : null}
+    @focusout=${group._onFocusOut}
+  >
+    <div part="label" id="label" class="label" ?hidden=${!group.label}>${group.label}</div>
+    <div part="description" id="description" class="description" ?hidden=${!group.description}>
+      ${group.description}
+    </div>
+    <div part="control" class="options"><slot @slotchange=${group._onSlotChange}></slot></div>
+    <div part="error" id="error" class="error" ?hidden=${!group.error}>${group.error}</div>
+    <input class="flag" type="radio" name="flag" hidden />
+    ${externalDescriptionTemplate(group._externalDescription)}
+  </div>`;
+//# sourceMappingURL=checkbox-group.template.js.map

package/dist/checkbox-group/checkbox-group.template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-group.template.js","sourceRoot":"","sources":["../../src/checkbox-group/checkbox-group.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,2BAA2B,EAAE,MAAM,gCAAgC,CAAC;AAG7E;;;GAGG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,KAA0B,EAAE,EAAE,CAClE,IAAI,CAAA;;;;sBAIgB,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI;uBAC3B,KAAK,CAAC,YAAY;mBACtB,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI;gBAC3C,KAAK,CAAC,WAAW;;yDAEwB,CAAC,KAAK,CAAC,KAAK,IAAI,KAAK,CAAC,KAAK;2EACT,CAAC,KAAK,CAAC,WAAW;QACrF,KAAK,CAAC,WAAW;;4DAEmC,KAAK,CAAC,aAAa;yDACtB,CAAC,KAAK,CAAC,KAAK,IAAI,KAAK,CAAC,KAAK;;MAE9E,2BAA2B,CAAC,KAAK,CAAC,oBAAoB,CAAC;SACpD,CAAC"}

package/dist/checkbox-group/foundation.d.ts

@@ -0,0 +1,6 @@
+export { hostStyles } from '../styles/host.styles.js';
+export { fieldStructuralStyles } from '../styles/field.structural.styles.js';
+export { OddkinCheckboxGroup } from './checkbox-group.js';
+export { checkboxGroupTemplate } from './checkbox-group.template.js';
+export { checkboxGroupStructuralStyles } from './checkbox-group.structural.styles.js';
+//# sourceMappingURL=foundation.d.ts.map

package/dist/checkbox-group/foundation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"foundation.d.ts","sourceRoot":"","sources":["../../src/checkbox-group/foundation.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,EAAE,qBAAqB,EAAE,MAAM,sCAAsC,CAAC;AAC7E,OAAO,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAC1D,OAAO,EAAE,qBAAqB,EAAE,MAAM,8BAA8B,CAAC;AACrE,OAAO,EAAE,6BAA6B,EAAE,MAAM,uCAAuC,CAAC"}

package/dist/checkbox-group/foundation.js

@@ -0,0 +1,8 @@
+// Skin-free foundation: behavior, anatomy, and structural styles (shared host defaults first).
+// Loads no default visual styles and registers nothing (multi-product.md §4).
+export { hostStyles } from '../styles/host.styles.js';
+export { fieldStructuralStyles } from '../styles/field.structural.styles.js';
+export { OddkinCheckboxGroup } from './checkbox-group.js';
+export { checkboxGroupTemplate } from './checkbox-group.template.js';
+export { checkboxGroupStructuralStyles } from './checkbox-group.structural.styles.js';
+//# sourceMappingURL=foundation.js.map

package/dist/checkbox-group/foundation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"foundation.js","sourceRoot":"","sources":["../../src/checkbox-group/foundation.ts"],"names":[],"mappings":"AAAA,+FAA+F;AAC/F,8EAA8E;AAC9E,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,EAAE,qBAAqB,EAAE,MAAM,sCAAsC,CAAC;AAC7E,OAAO,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAC1D,OAAO,EAAE,qBAAqB,EAAE,MAAM,8BAA8B,CAAC;AACrE,OAAO,EAAE,6BAA6B,EAAE,MAAM,uCAAuC,CAAC"}

package/dist/checkbox-group/index.d.ts

@@ -0,0 +1,6 @@
+export { OddkinCheckboxGroup } from './checkbox-group.js';
+export { checkboxGroupTemplate } from './checkbox-group.template.js';
+export { checkboxGroupStructuralStyles } from './checkbox-group.structural.styles.js';
+export { checkboxGroupStyles } from './checkbox-group.styles.js';
+export { checkboxGroupDefinition } from './checkbox-group.definition.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/checkbox-group/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/checkbox-group/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAC1D,OAAO,EAAE,qBAAqB,EAAE,MAAM,8BAA8B,CAAC;AACrE,OAAO,EAAE,6BAA6B,EAAE,MAAM,uCAAuC,CAAC;AACtF,OAAO,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,EAAE,uBAAuB,EAAE,MAAM,gCAAgC,CAAC"}

package/dist/checkbox-group/index.js

@@ -0,0 +1,7 @@
+// Side-effect free. Register with `@oddkin/components/define/checkbox-group`.
+export { OddkinCheckboxGroup } from './checkbox-group.js';
+export { checkboxGroupTemplate } from './checkbox-group.template.js';
+export { checkboxGroupStructuralStyles } from './checkbox-group.structural.styles.js';
+export { checkboxGroupStyles } from './checkbox-group.styles.js';
+export { checkboxGroupDefinition } from './checkbox-group.definition.js';
+//# sourceMappingURL=index.js.map

package/dist/checkbox-group/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/checkbox-group/index.ts"],"names":[],"mappings":"AAAA,8EAA8E;AAC9E,OAAO,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAC1D,OAAO,EAAE,qBAAqB,EAAE,MAAM,8BAA8B,CAAC;AACrE,OAAO,EAAE,6BAA6B,EAAE,MAAM,uCAAuC,CAAC;AACtF,OAAO,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,EAAE,uBAAuB,EAAE,MAAM,gCAAgC,CAAC"}

package/dist/chip/chip.d.ts

@@ -0,0 +1,56 @@
+import { OddkinElement, type ElementEvents } from '@oddkin/core/element';
+import type { Scope } from '@oddkin/core/scope';
+export declare const CHIP_STRINGS: {
+    remove: string;
+};
+/** The user asked to remove the chip; the application removes it (or its value). */
+export declare const chipRemoveEvent: import("@oddkin/core/element").EventDefinition<Record<string, never>>;
+declare const OddkinChip_base: import("@oddkin/core/element").WithProps<typeof OddkinElement, {
+    readonly removable: import("@oddkin/core/element").PropDefinition<boolean>;
+    readonly selected: import("@oddkin/core/element").PropDefinition<boolean>;
+    readonly disabled: import("@oddkin/core/element").PropDefinition<boolean>;
+    readonly strings: import("@oddkin/core/element").PropDefinition<Partial<{
+        remove: string;
+    }> | undefined>;
+}>;
+/**
+ * A compact token for a value, filter, or tag, with an explicit remove button when `removable`.
+ * The chip itself is not focusable; only its remove button is.
+ *
+ * @slot - The label.
+ * @csspart base - The chip.
+ * @csspart remove - The remove button.
+ * @cssprop --odd-chip-radius - Corner radius.
+ * @a11y The remove button is named "Remove {label}" from the chip's text (`strings.remove`). Backspace or Delete on it also removes. Move focus to a sensible place after removing the chip.
+ * @keyboard Tab reaches the remove button; Enter, Space, Backspace, or Delete removes.
+ * @previewRole chip
+ * @useFor Selected values, applied filters, and tags that can be removed.
+ * @notFor Actions (use a button); status (use a badge).
+ * @category Display
+ * @customization 1 2 3
+ */
+export declare class OddkinChip extends OddkinChip_base {
+    static events: {
+        'odd-chip-remove': import("@oddkin/core/element").EventDefinition<Record<string, never>>;
+    };
+    readonly _events?: ElementEvents<typeof OddkinChip>;
+    /** @internal The chip's text, kept current for the remove button's name. */
+    readonly _text: import("@oddkin/core/reactive").Signal<string>;
+    /** @internal The remove button's name, from the chip's text. */
+    get _removeLabel(): string;
+    /** @internal Activation of the remove button (a disabled button cannot be activated). */
+    readonly _onRemove: () => void;
+    /** @internal Backspace and Delete on the remove button remove too. */
+    readonly _onKeydown: (event: KeyboardEvent) => void;
+    protected mounted(scope: Scope): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'odd-chip': OddkinChip;
+    }
+    interface GlobalEventHandlersEventMap {
+        'odd-chip-remove': CustomEvent<Record<string, never>>;
+    }
+}
+export {};
+//# sourceMappingURL=chip.d.ts.map

package/dist/chip/chip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chip.d.ts","sourceRoot":"","sources":["../../src/chip/chip.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAe,KAAK,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAGtF,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAEhD,eAAO,MAAM,YAAY;IAAK,MAAM;CAAoB,CAAC;AAEzD,oFAAoF;AACpF,eAAO,MAAM,eAAe,uEAM1B,CAAC;;;;;;;;;AAEH;;;;;;;;;;;;;;;GAeG;AACH,qBAAa,UAAW,SAAQ,eAO9B;IACA,OAAgB,MAAM;QAAK,iBAAiB;MAAoB;IAChE,SAAiB,OAAO,CAAC,EAAE,aAAa,CAAC,OAAO,UAAU,CAAC,CAAC;IAE5D,4EAA4E;IAC5E,QAAQ,CAAC,KAAK,iDAAc;IAE5B,gEAAgE;IAChE,IAAI,YAAY,IAAI,MAAM,CAEzB;IAED,yFAAyF;IACzF,QAAQ,CAAC,SAAS,QAAO,IAAI,CAE3B;IACF,sEAAsE;IACtE,QAAQ,CAAC,UAAU,UAAW,aAAa,KAAG,IAAI,CAIhD;IAEF,UAAmB,OAAO,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI,CAQ7C;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,UAAU,CAAC;KACxB;IACD,UAAU,2BAA2B;QACnC,iBAAiB,EAAE,WAAW,CAAC,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC;KACvD;CACF"}

package/dist/chip/chip.define.d.ts

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

package/dist/chip/chip.define.d.ts.map

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

package/dist/chip/chip.define.js

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

package/dist/chip/chip.define.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chip.define.js","sourceRoot":"","sources":["../../src/chip/chip.define.ts"],"names":[],"mappings":"AAAA,kDAAkD;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAC9C,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAEtD,MAAM,CAAC,cAAc,CAAC,CAAC"}

package/dist/chip/chip.definition.d.ts

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

package/dist/chip/chip.definition.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chip.definition.d.ts","sourceRoot":"","sources":["../../src/chip/chip.definition.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAKvC,eAAO,MAAM,cAAc,8DAKzB,CAAC"}

package/dist/chip/chip.definition.js

@@ -0,0 +1,15 @@
+import { compose } from '@oddkin/core/element';
+import { glyphStyles } from '../styles/glyphs.js';
+import { focusRingStyles } from '../styles/focus-ring.styles.js';
+import { hostStyles } from '../styles/host.styles.js';
+import { OddkinChip } from './chip.js';
+import { chipStructuralStyles } from './chip.structural.styles.js';
+import { chipStyles } from './chip.styles.js';
+import { chipTemplate } from './chip.template.js';
+export const chipDefinition = compose({
+    name: 'odd-chip',
+    element: OddkinChip,
+    template: chipTemplate,
+    styles: [hostStyles, chipStructuralStyles, glyphStyles, focusRingStyles, chipStyles],
+});
+//# sourceMappingURL=chip.definition.js.map

package/dist/chip/chip.definition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chip.definition.js","sourceRoot":"","sources":["../../src/chip/chip.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AACjE,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AACvC,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AACnE,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAElD,MAAM,CAAC,MAAM,cAAc,GAAG,OAAO,CAAC;IACpC,IAAI,EAAE,UAAU;IAChB,OAAO,EAAE,UAAU;IACnB,QAAQ,EAAE,YAAY;IACtB,MAAM,EAAE,CAAC,UAAU,EAAE,oBAAoB,EAAE,WAAW,EAAE,eAAe,EAAE,UAAU,CAAC;CACrF,CAAC,CAAC"}

package/dist/chip/chip.js

@@ -0,0 +1,65 @@
+import { OddkinElement, event, prop } from '@oddkin/core/element';
+import { format, strings } from '@oddkin/core/i18n';
+import { signal } from '@oddkin/core/reactive';
+export const CHIP_STRINGS = { remove: 'Remove {label}' };
+/** The user asked to remove the chip; the application removes it (or its value). */
+export const chipRemoveEvent = event('odd-chip-remove', {
+    bubbles: true,
+    composed: true,
+    cancelable: false,
+    intent: 'user',
+    description: 'The remove button was activated; the application removes the chip or its value.',
+});
+/**
+ * A compact token for a value, filter, or tag, with an explicit remove button when `removable`.
+ * The chip itself is not focusable; only its remove button is.
+ *
+ * @slot - The label.
+ * @csspart base - The chip.
+ * @csspart remove - The remove button.
+ * @cssprop --odd-chip-radius - Corner radius.
+ * @a11y The remove button is named "Remove {label}" from the chip's text (`strings.remove`). Backspace or Delete on it also removes. Move focus to a sensible place after removing the chip.
+ * @keyboard Tab reaches the remove button; Enter, Space, Backspace, or Delete removes.
+ * @previewRole chip
+ * @useFor Selected values, applied filters, and tags that can be removed.
+ * @notFor Actions (use a button); status (use a badge).
+ * @category Display
+ * @customization 1 2 3
+ */
+export class OddkinChip extends OddkinElement.with({
+    removable: prop.boolean({ reflect: true, description: 'Shows a remove button.' }),
+    selected: prop.boolean({ reflect: true, description: 'Selection look, as for a chosen value.' }),
+    disabled: prop.boolean({ reflect: true, description: 'Dims the chip and disables its button.' }),
+    strings: prop.object({
+        description: 'Localized string overrides.',
+    }),
+}) {
+    static events = { 'odd-chip-remove': chipRemoveEvent };
+    /** @internal The chip's text, kept current for the remove button's name. */
+    _text = signal('');
+    /** @internal The remove button's name, from the chip's text. */
+    get _removeLabel() {
+        return format(strings(CHIP_STRINGS, this.strings).remove, { label: this._text.value });
+    }
+    /** @internal Activation of the remove button (a disabled button cannot be activated). */
+    _onRemove = () => {
+        this.emit(chipRemoveEvent, {});
+    };
+    /** @internal Backspace and Delete on the remove button remove too. */
+    _onKeydown = (event) => {
+        if (event.key !== 'Backspace' && event.key !== 'Delete')
+            return;
+        event.preventDefault();
+        this._onRemove();
+    };
+    mounted(scope) {
+        const read = () => {
+            this._text.value = this.textContent?.trim() ?? '';
+        };
+        read();
+        const observer = new MutationObserver(read);
+        observer.observe(this, { characterData: true, childList: true, subtree: true });
+        scope.add(() => observer.disconnect(), 'chip text');
+    }
+}
+//# sourceMappingURL=chip.js.map

package/dist/chip/chip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chip.js","sourceRoot":"","sources":["../../src/chip/chip.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,IAAI,EAAsB,MAAM,sBAAsB,CAAC;AACtF,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAG/C,MAAM,CAAC,MAAM,YAAY,GAAG,EAAE,MAAM,EAAE,gBAAgB,EAAE,CAAC;AAEzD,oFAAoF;AACpF,MAAM,CAAC,MAAM,eAAe,GAAG,KAAK,CAAwB,iBAAiB,EAAE;IAC7E,OAAO,EAAE,IAAI;IACb,QAAQ,EAAE,IAAI;IACd,UAAU,EAAE,KAAK;IACjB,MAAM,EAAE,MAAM;IACd,WAAW,EAAE,iFAAiF;CAC/F,CAAC,CAAC;AAEH;;;;;;;;;;;;;;;GAeG;AACH,MAAM,OAAO,UAAW,SAAQ,aAAa,CAAC,IAAI,CAAC;IACjD,SAAS,EAAE,IAAI,CAAC,OAAO,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,wBAAwB,EAAE,CAAC;IACjF,QAAQ,EAAE,IAAI,CAAC,OAAO,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,wCAAwC,EAAE,CAAC;IAChG,QAAQ,EAAE,IAAI,CAAC,OAAO,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,wCAAwC,EAAE,CAAC;IAChG,OAAO,EAAE,IAAI,CAAC,MAAM,CAA+B;QACjD,WAAW,EAAE,6BAA6B;KAC3C,CAAC;CACH,CAAC;IACA,MAAM,CAAU,MAAM,GAAG,EAAE,iBAAiB,EAAE,eAAe,EAAE,CAAC;IAGhE,4EAA4E;IACnE,KAAK,GAAG,MAAM,CAAC,EAAE,CAAC,CAAC;IAE5B,gEAAgE;IAChE,IAAI,YAAY;QACd,OAAO,MAAM,CAAC,OAAO,CAAC,YAAY,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC,CAAC;IACzF,CAAC;IAED,yFAAyF;IAChF,SAAS,GAAG,GAAS,EAAE;QAC9B,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE,EAAE,CAAC,CAAC;IACjC,CAAC,CAAC;IACF,sEAAsE;IAC7D,UAAU,GAAG,CAAC,KAAoB,EAAQ,EAAE;QACnD,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ;YAAE,OAAO;QAChE,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,IAAI,CAAC,SAAS,EAAE,CAAC;IACnB,CAAC,CAAC;IAEiB,OAAO,CAAC,KAAY;QACrC,MAAM,IAAI,GAAG,GAAG,EAAE;YAChB,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,WAAW,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;QACpD,CAAC,CAAC;QACF,IAAI,EAAE,CAAC;QACP,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,CAAC;QAC5C,QAAQ,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,aAAa,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;QAChF,KAAK,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,UAAU,EAAE,EAAE,WAAW,CAAC,CAAC;IACtD,CAAC;CACF"}

package/dist/chip/chip.structural.styles.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Inline chip with its remove button; the focus ring of the remove button is drawn around the
+ * whole chip, as Figma shows it. No brand or visual tokens.
+ */
+export declare const chipStructuralStyles: import("@oddkin/core/styles").CSSResult;
+//# sourceMappingURL=chip.structural.styles.d.ts.map

package/dist/chip/chip.structural.styles.d.ts.map

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

package/dist/chip/chip.structural.styles.js

@@ -0,0 +1,47 @@
+import { css } from '@oddkin/core/styles';
+/**
+ * Inline chip with its remove button; the focus ring of the remove button is drawn around the
+ * whole chip, as Figma shows it. No brand or visual tokens.
+ */
+export const chipStructuralStyles = css `
+  :host {
+    display: inline-block;
+    vertical-align: middle;
+    max-inline-size: 100%;
+  }
+  .chip {
+    display: inline-flex;
+    align-items: center;
+    max-inline-size: 100%;
+  }
+  .label {
+    min-inline-size: 0;
+    overflow-wrap: anywhere;
+  }
+  .remove {
+    display: inline-grid;
+    place-items: center;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    background: none;
+    color: inherit;
+    font: inherit;
+    cursor: pointer;
+  }
+  .remove:disabled {
+    cursor: not-allowed;
+  }
+  .remove:focus-visible {
+    outline: none;
+  }
+  @media (forced-colors: active) {
+    .chip {
+      border: 1px solid CanvasText;
+    }
+    .remove {
+      color: ButtonText;
+    }
+  }
+`;
+//# sourceMappingURL=chip.structural.styles.js.map

package/dist/chip/chip.structural.styles.js.map

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

package/dist/chip/chip.styles.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Oddkin's default chip: Figma `chip` (sunken surface, `control/height/sm`, `control/radius`,
+ * selection colours when selected, the focus ring around the chip).
+ */
+export declare const chipStyles: import("@oddkin/core/styles").CSSResult;
+//# sourceMappingURL=chip.styles.d.ts.map

package/dist/chip/chip.styles.d.ts.map

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

package/dist/chip/chip.styles.js

@@ -0,0 +1,45 @@
+import { css } from '@oddkin/core/styles';
+import { token } from '@oddkin/tokens/refs';
+/**
+ * Oddkin's default chip: Figma `chip` (sunken surface, `control/height/sm`, `control/radius`,
+ * selection colours when selected, the focus ring around the chip).
+ */
+export const chipStyles = css `
+  .chip {
+    box-sizing: border-box;
+    gap: ${token('control.gap')};
+    min-block-size: ${token('control.height.sm')};
+    padding-inline: ${token('control.padding.inline.sm')};
+    border: ${token('border.width.default')} solid transparent;
+    border-radius: var(--odd-chip-radius, ${token('control.radius')});
+    background: ${token('color.surface.sunken')};
+    color: ${token('color.text.primary')};
+    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')};
+  }
+  .chip:has(.remove:focus-visible) {
+    outline: ${token('focus.width')} solid ${token('color.focus.ring')};
+    outline-offset: ${token('focus.offset')};
+  }
+  .remove {
+    min-inline-size: ${token('icon.size.md')};
+    min-block-size: ${token('icon.size.md')};
+    border-radius: ${token('radius.sm')};
+    font-size: ${token('icon.size.sm')};
+  }
+  :host([selected]) .chip {
+    background: ${token('color.selection.background')};
+    color: ${token('color.selection.foreground')};
+  }
+  :host([disabled]) .chip {
+    color: ${token('color.text.disabled')};
+  }
+  @media (hover: hover) {
+    :host(:not([disabled])) .remove:hover {
+      background: ${token('color.surface.hover')};
+    }
+  }
+`;
+//# sourceMappingURL=chip.styles.js.map

package/dist/chip/chip.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chip.styles.js","sourceRoot":"","sources":["../../src/chip/chip.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,UAAU,GAAG,GAAG,CAAA;;;WAGlB,KAAK,CAAC,aAAa,CAAC;sBACT,KAAK,CAAC,mBAAmB,CAAC;sBAC1B,KAAK,CAAC,2BAA2B,CAAC;cAC1C,KAAK,CAAC,sBAAsB,CAAC;4CACC,KAAK,CAAC,gBAAgB,CAAC;kBACjD,KAAK,CAAC,sBAAsB,CAAC;aAClC,KAAK,CAAC,oBAAoB,CAAC;mBACrB,KAAK,CAAC,gBAAgB,CAAC;iBACzB,KAAK,CAAC,cAAc,CAAC;mBACnB,KAAK,CAAC,gBAAgB,CAAC;mBACvB,KAAK,CAAC,qBAAqB,CAAC;;;eAGhC,KAAK,CAAC,aAAa,CAAC,UAAU,KAAK,CAAC,kBAAkB,CAAC;sBAChD,KAAK,CAAC,cAAc,CAAC;;;uBAGpB,KAAK,CAAC,cAAc,CAAC;sBACtB,KAAK,CAAC,cAAc,CAAC;qBACtB,KAAK,CAAC,WAAW,CAAC;iBACtB,KAAK,CAAC,cAAc,CAAC;;;kBAGpB,KAAK,CAAC,4BAA4B,CAAC;aACxC,KAAK,CAAC,4BAA4B,CAAC;;;aAGnC,KAAK,CAAC,qBAAqB,CAAC;;;;oBAIrB,KAAK,CAAC,qBAAqB,CAAC;;;CAG/C,CAAC"}