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

package/dist/toast/toast.js

@@ -0,0 +1,201 @@
+var _a;
+import { OddkinElement, prop } from '@oddkin/core/element';
+import { strings } from '@oddkin/core/i18n';
+import { computed, signal } from '@oddkin/core/reactive';
+import { Overlay } from '../overlay/overlay.js';
+import { TONES } from '../styles/tone.styles.js';
+export const TOAST_STRINGS = {
+    close: 'Dismiss',
+};
+/** A live region shown with its text in it may go unannounced, so the text joins it just after. */
+const REVEAL_DELAY = 100;
+/** Open toasts in document order: the last sits at the corner. */
+const stack = [];
+/** Toasts with the pointer or focus on them: while there is one, no toast's time runs. */
+const held = new Set();
+/**
+ * A short message about something that just happened, at the block-end and inline-end corner of
+ * the viewport: a tone glyph, a title, the message, an optional action, and a close button. It
+ * closes by itself after `duration` unless it has an action; no toast's time runs while the
+ * pointer or focus is on any open toast, or while the page is hidden (WCAG 2.2.1). Open toasts
+ * stack in document order, the last at the corner, so reading and Tab order follow the screen.
+ *
+ * @slot - The message.
+ * @slot end - One action, such as "Undo". A toast with an action stays until it is closed.
+ * @csspart base - The glyph, the title, the message, the action, and the close button.
+ * @csspart marker - The tone glyph.
+ * @csspart label - The title.
+ * @csspart close - The close button.
+ * @cssprop --odd-toast-inline-size - Its width, within the viewport.
+ * @a11y A `status` live region, or an `alert` for `danger`, announced when it opens: its title and message join the region just after it shows. Opening it never moves focus; keep toasts after the controls that raise them, so Tab reaches an action. The close button is named by `strings.close`.
+ * @keyboard Tab reaches its action and its close button in document order. Focus in any open toast pauses them all.
+ * @previewRole toast
+ * @useFor A passing result of the user's action: saved, sent, copied, with Undo or Retry.
+ * @notFor A message that must stay with its region (use odd-alert); a decision (use odd-dialog); a field error (use the field's `error`).
+ * @category Overlays
+ * @customization 1 2 3
+ */
+export class OddkinToast extends OddkinElement.with({
+    tone: prop.enum(TONES, {
+        default: 'neutral',
+        reflect: true,
+        description: 'Meaning colour and glyph; `danger` is an `alert`, announced at once.',
+    }),
+    label: prop.string({ default: '', description: 'The title, shown above the message.' }),
+    duration: prop.number({
+        default: 5000,
+        description: 'Milliseconds it stays open, counted only while no open toast has the pointer or focus and the page is visible; read at each opening. 0, or an action in the `end` slot, keeps it open until it is closed.',
+    }),
+    open: prop.boolean({ reflect: true, description: 'Whether it is shown.' }),
+    strings: prop.object({
+        description: 'Localized string overrides.',
+    }),
+}) {
+    #overlay = this.#createOverlay();
+    #scope;
+    #size = 0;
+    #hovered = false;
+    #focused = false;
+    #timer;
+    #reveal;
+    #remaining = Infinity;
+    #deadline = 0;
+    /** @internal Whether the title and message are in the live region yet. */
+    _revealed = signal(false);
+    /** @internal The built-in text with the author's overrides. */
+    _strings = computed(() => strings(TOAST_STRINGS, this.strings));
+    /** Shows it and starts its time. */
+    show() {
+        this.#overlay.show();
+    }
+    /** Closes it; focus inside returns to where it was before it opened. */
+    close() {
+        this.#overlay.hide();
+    }
+    #createOverlay() {
+        const host = this;
+        return new Overlay({
+            host,
+            surface: () => host,
+            mode: 'manual',
+            onToggle: (open) => {
+                host.open = open;
+                if (open)
+                    host.#opened();
+                else
+                    host.#closed();
+            },
+        });
+    }
+    connected(scope) {
+        this.#scope = scope;
+        scope.use(this.#overlay);
+        const observer = new ResizeObserver(([entry]) => {
+            this.#size = entry?.borderBoxSize[0]?.blockSize ?? 0;
+            if (stack.includes(this))
+                _a.#restack();
+        });
+        observer.observe(this);
+        scope.add(() => observer.disconnect(), 'toast size');
+        const hold = () => _a.#hold(this, this.#hovered || this.#focused);
+        scope.listen(this, 'pointerenter', () => {
+            this.#hovered = true;
+            hold();
+        });
+        scope.listen(this, 'pointerleave', () => {
+            this.#hovered = false;
+            hold();
+        });
+        scope.listen(this, 'focusin', () => {
+            this.#focused = true;
+            hold();
+        });
+        scope.listen(this, 'focusout', () => {
+            this.#focused = false;
+            hold();
+        });
+        scope.listen(document, 'visibilitychange', () => document.hidden ? this.#pause() : this.#resume());
+        scope.add(() => {
+            this.#hovered = this.#focused = false;
+            this.#closed();
+            this.#scope = undefined;
+            // Removing a popover hides it without a toggle the wiring would hear.
+            this.open = false;
+        }, 'toast');
+    }
+    mounted(scope) {
+        scope.effect(() => {
+            this.internals.role = this.tone === 'danger' ? 'alert' : 'status';
+        });
+    }
+    updated(changes) {
+        if (changes.has('open'))
+            this.#overlay.toggle(this.open);
+    }
+    /** Positions the open toasts from the corner: each above the ones after it in the document. */
+    static #restack() {
+        stack.sort((a, b) => a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1);
+        let offset = 0;
+        for (let i = stack.length - 1; i >= 0; i--) {
+            const toast = stack[i];
+            toast.style.setProperty('--_toast-offset', `${offset}px`);
+            toast.style.setProperty('--_toast-index', String(stack.length - 1 - i));
+            offset += toast.#size;
+        }
+    }
+    static #hold(toast, on) {
+        if (on)
+            held.add(toast);
+        else
+            held.delete(toast);
+        for (const open of stack) {
+            if (held.size)
+                open.#pause();
+            else
+                open.#resume();
+        }
+    }
+    #opened() {
+        // A close and an open in one task arrive as a single toggle: start over.
+        this.#pause();
+        this.#reveal?.();
+        this._revealed.value = false;
+        if (!stack.includes(this))
+            stack.push(this);
+        _a.#restack();
+        const action = this.querySelector(':scope > [slot="end"]');
+        this.#remaining = action || !(this.duration > 0) ? Infinity : this.duration;
+        this.#resume();
+        this.#reveal = this.#scope?.timeout(() => (this._revealed.value = true), REVEAL_DELAY);
+    }
+    #closed() {
+        this.#pause();
+        this.#remaining = Infinity;
+        this.#reveal?.();
+        this.#reveal = undefined;
+        this._revealed.value = false;
+        const index = stack.indexOf(this);
+        if (index >= 0)
+            stack.splice(index, 1);
+        _a.#hold(this, false);
+        _a.#restack();
+    }
+    #pause() {
+        if (!this.#timer)
+            return;
+        this.#timer();
+        this.#timer = undefined;
+        this.#remaining = Math.max(0, this.#deadline - performance.now());
+    }
+    #resume() {
+        const scope = this.#scope;
+        if (!scope || this.#timer || this.#remaining === Infinity)
+            return;
+        if (held.size || document.hidden)
+            return;
+        this.#deadline = performance.now() + this.#remaining;
+        this.#timer = scope.timeout(() => this.close(), this.#remaining);
+    }
+}
+_a = OddkinToast;
+//# sourceMappingURL=toast.js.map

package/dist/toast/toast.js.map

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

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

@@ -0,0 +1,8 @@
+/**
+ * The toast at the block-end and inline-end corner of the viewport, each open toast above the open
+ * ones after it in the document (`--_toast-offset` and `--_toast-index`, written by the element);
+ * logical, so right-to-left text mirrors the corner. A grid: the glyph, the title, and the close
+ * button on the first row; the message and the action under the title. No brand or visual tokens.
+ */
+export declare const toastStructuralStyles: import("@oddkin/core/styles").CSSResult;
+//# sourceMappingURL=toast.structural.styles.d.ts.map

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

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

package/dist/toast/toast.structural.styles.js

@@ -0,0 +1,46 @@
+import { css } from '@oddkin/core/styles';
+/**
+ * The toast at the block-end and inline-end corner of the viewport, each open toast above the open
+ * ones after it in the document (`--_toast-offset` and `--_toast-index`, written by the element);
+ * logical, so right-to-left text mirrors the corner. A grid: the glyph, the title, and the close
+ * button on the first row; the message and the action under the title. No brand or visual tokens.
+ */
+export const toastStructuralStyles = css `
+  :host([popover]) {
+    inset: auto;
+    inset-block-end: calc(
+      var(--_toast-inset, 0px) + var(--_toast-offset, 0px) + var(--_toast-index, 0) *
+        var(--_toast-gap, 0px)
+    );
+    inset-inline-end: var(--_toast-inset, 0px);
+    inline-size: min(var(--odd-toast-inline-size, 24rem), 100% - 2 * var(--_toast-inset, 0px));
+  }
+  .toast {
+    display: grid;
+    grid-template-columns: auto 1fr auto auto;
+    grid-template-areas:
+      'marker label label close'
+      '. message end .';
+    align-items: center;
+    overflow-wrap: anywhere;
+  }
+  .marker {
+    display: inline-flex;
+    grid-area: marker;
+  }
+  .label {
+    grid-area: label;
+    margin: 0;
+  }
+  .message {
+    grid-area: message;
+  }
+  .end {
+    display: flex;
+    grid-area: end;
+  }
+  .overlay-close {
+    grid-area: close;
+  }
+`;
+//# sourceMappingURL=toast.structural.styles.js.map

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

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

package/dist/toast/toast.styles.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Oddkin's default toast: Figma `toast` (the default surface, `card.radius`, `elevation.lg`; the
+ * title in the UI style and primary text, the message in Small and secondary text), the glyph in
+ * the tone's colour, `space.md` from the viewport's edges and `space.sm` between toasts. The
+ * close button's target sets the first line's height, so the block-start and inline-end padding
+ * is smaller.
+ */
+export declare const toastStyles: import("@oddkin/core/styles").CSSResult;
+//# sourceMappingURL=toast.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"toast.styles.d.ts","sourceRoot":"","sources":["../../src/toast/toast.styles.ts"],"names":[],"mappings":"AAGA;;;;;;GAMG;AACH,eAAO,MAAM,WAAW,yCAiCvB,CAAC"}

package/dist/toast/toast.styles.js

@@ -0,0 +1,44 @@
+import { css } from '@oddkin/core/styles';
+import { token } from '@oddkin/tokens/refs';
+/**
+ * Oddkin's default toast: Figma `toast` (the default surface, `card.radius`, `elevation.lg`; the
+ * title in the UI style and primary text, the message in Small and secondary text), the glyph in
+ * the tone's colour, `space.md` from the viewport's edges and `space.sm` between toasts. The
+ * close button's target sets the first line's height, so the block-start and inline-end padding
+ * is smaller.
+ */
+export const toastStyles = css `
+  :host([popover]) {
+    --_toast-inset: ${token('space.md')};
+    --_toast-gap: ${token('space.sm')};
+    border-radius: ${token('card.radius')};
+    background: ${token('color.surface.default')};
+    box-shadow: ${token('elevation.lg')};
+  }
+  .toast {
+    column-gap: ${token('space.sm')};
+    padding-block: ${token('space.sm')} ${token('space.md')};
+    padding-inline: ${token('space.md')} ${token('space.sm')};
+  }
+  .marker {
+    color: var(--_tone-foreground);
+    font-size: ${token('icon.size.md')};
+  }
+  .label {
+    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')};
+    letter-spacing: ${token('type.ui.letter-spacing')};
+  }
+  .message {
+    color: ${token('color.text.secondary')};
+    font-family: ${token('type.small.family')};
+    font-size: ${token('type.small.size')};
+    font-weight: ${token('type.small.weight')};
+    line-height: ${token('type.small.line-height')};
+    letter-spacing: ${token('type.small.letter-spacing')};
+  }
+`;
+//# sourceMappingURL=toast.styles.js.map

package/dist/toast/toast.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast.styles.js","sourceRoot":"","sources":["../../src/toast/toast.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAE5C;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAA;;sBAER,KAAK,CAAC,UAAU,CAAC;oBACnB,KAAK,CAAC,UAAU,CAAC;qBAChB,KAAK,CAAC,aAAa,CAAC;kBACvB,KAAK,CAAC,uBAAuB,CAAC;kBAC9B,KAAK,CAAC,cAAc,CAAC;;;kBAGrB,KAAK,CAAC,UAAU,CAAC;qBACd,KAAK,CAAC,UAAU,CAAC,IAAI,KAAK,CAAC,UAAU,CAAC;sBACrC,KAAK,CAAC,UAAU,CAAC,IAAI,KAAK,CAAC,UAAU,CAAC;;;;iBAI3C,KAAK,CAAC,cAAc,CAAC;;;aAGzB,KAAK,CAAC,oBAAoB,CAAC;mBACrB,KAAK,CAAC,gBAAgB,CAAC;iBACzB,KAAK,CAAC,cAAc,CAAC;mBACnB,KAAK,CAAC,gBAAgB,CAAC;mBACvB,KAAK,CAAC,qBAAqB,CAAC;sBACzB,KAAK,CAAC,wBAAwB,CAAC;;;aAGxC,KAAK,CAAC,sBAAsB,CAAC;mBACvB,KAAK,CAAC,mBAAmB,CAAC;iBAC5B,KAAK,CAAC,iBAAiB,CAAC;mBACtB,KAAK,CAAC,mBAAmB,CAAC;mBAC1B,KAAK,CAAC,wBAAwB,CAAC;sBAC5B,KAAK,CAAC,2BAA2B,CAAC;;CAEvD,CAAC"}

package/dist/toast/toast.template.d.ts

@@ -0,0 +1,9 @@
+import type { OddkinToast } from './toast.js';
+/**
+ * Anatomy: the host is the surface (`popover="manual"`) and the live region; `part="base"` lays
+ * out the `marker` glyph, the `label` title, the `close` button, and under the title the default
+ * slot and the `end` slot for the action, as Figma `toast` does. The title and the message stay
+ * out of the accessibility tree until just after it shows, so they are announced.
+ */
+export declare const toastTemplate: (toast: OddkinToast) => import("@oddkin/core/template").TemplateResult;
+//# sourceMappingURL=toast.template.d.ts.map

package/dist/toast/toast.template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast.template.d.ts","sourceRoot":"","sources":["../../src/toast/toast.template.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAE9C;;;;;GAKG;AACH,eAAO,MAAM,aAAa,UAAW,WAAW,mDAS/C,CAAC"}

package/dist/toast/toast.template.js

@@ -0,0 +1,20 @@
+import { html } from '@oddkin/core/template';
+import { closeButton } from '../overlay/overlay.js';
+import { toneGlyph } from '../styles/tone.styles.js';
+/**
+ * Anatomy: the host is the surface (`popover="manual"`) and the live region; `part="base"` lays
+ * out the `marker` glyph, the `label` title, the `close` button, and under the title the default
+ * slot and the `end` slot for the action, as Figma `toast` does. The title and the message stay
+ * out of the accessibility tree until just after it shows, so they are announced.
+ */
+export const toastTemplate = (toast) => {
+    const hidden = toast._revealed.value ? null : 'true';
+    return html `<div part="base" class="toast">
+    <span part="marker" class="marker">${toneGlyph(toast.tone)}</span>
+    <p part="label" class="label" aria-hidden=${hidden} ?hidden=${!toast.label}>${toast.label}</p>
+    <div class="message" aria-hidden=${hidden}><slot></slot></div>
+    <div class="end"><slot name="end"></slot></div>
+    ${closeButton(toast._strings.value.close, () => toast.close())}
+  </div>`;
+};
+//# sourceMappingURL=toast.template.js.map

package/dist/toast/toast.template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast.template.js","sourceRoot":"","sources":["../../src/toast/toast.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAGrD;;;;;GAKG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,KAAkB,EAAE,EAAE;IAClD,MAAM,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC;IACrD,OAAO,IAAI,CAAA;yCAC4B,SAAS,CAAC,KAAK,CAAC,IAAI,CAAC;gDACd,MAAM,YAAY,CAAC,KAAK,CAAC,KAAK,IAAI,KAAK,CAAC,KAAK;uCACtD,MAAM;;MAEvC,WAAW,CAAC,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;SACzD,CAAC;AACV,CAAC,CAAC"}

package/dist/toolbar/foundation.d.ts

@@ -0,0 +1,5 @@
+export { hostStyles } from '../styles/host.styles.js';
+export { OddkinToolbar } from './toolbar.js';
+export { toolbarTemplate } from './toolbar.template.js';
+export { toolbarStructuralStyles } from './toolbar.structural.styles.js';
+//# sourceMappingURL=foundation.d.ts.map

package/dist/toolbar/foundation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"foundation.d.ts","sourceRoot":"","sources":["../../src/toolbar/foundation.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAC7C,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAE,uBAAuB,EAAE,MAAM,gCAAgC,CAAC"}

package/dist/toolbar/foundation.js

@@ -0,0 +1,7 @@
+// 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 { OddkinToolbar } from './toolbar.js';
+export { toolbarTemplate } from './toolbar.template.js';
+export { toolbarStructuralStyles } from './toolbar.structural.styles.js';
+//# sourceMappingURL=foundation.js.map

package/dist/toolbar/foundation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"foundation.js","sourceRoot":"","sources":["../../src/toolbar/foundation.ts"],"names":[],"mappings":"AAAA,+FAA+F;AAC/F,8EAA8E;AAC9E,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAC7C,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAE,uBAAuB,EAAE,MAAM,gCAAgC,CAAC"}

package/dist/toolbar/index.d.ts

@@ -0,0 +1,6 @@
+export { OddkinToolbar } from './toolbar.js';
+export { toolbarTemplate } from './toolbar.template.js';
+export { toolbarStructuralStyles } from './toolbar.structural.styles.js';
+export { toolbarStyles } from './toolbar.styles.js';
+export { toolbarDefinition } from './toolbar.definition.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/toolbar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/toolbar/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAC7C,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAE,uBAAuB,EAAE,MAAM,gCAAgC,CAAC;AACzE,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC"}

package/dist/toolbar/index.js

@@ -0,0 +1,7 @@
+// Side-effect free. Register with `@oddkin/components/define/toolbar`.
+export { OddkinToolbar } from './toolbar.js';
+export { toolbarTemplate } from './toolbar.template.js';
+export { toolbarStructuralStyles } from './toolbar.structural.styles.js';
+export { toolbarStyles } from './toolbar.styles.js';
+export { toolbarDefinition } from './toolbar.definition.js';
+//# sourceMappingURL=index.js.map

package/dist/toolbar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/toolbar/index.ts"],"names":[],"mappings":"AAAA,uEAAuE;AACvE,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAC7C,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAE,uBAAuB,EAAE,MAAM,gCAAgC,CAAC;AACzE,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC"}

package/dist/toolbar/toolbar.d.ts

@@ -0,0 +1,37 @@
+import { OddkinElement } from '@oddkin/core/element';
+import type { Scope } from '@oddkin/core/scope';
+declare const OddkinToolbar_base: import("@oddkin/core/element").WithProps<typeof OddkinElement, {
+    readonly label: import("@oddkin/core/element").PropDefinition<string>;
+    readonly orientation: import("@oddkin/core/element").PropDefinition<"horizontal" | "vertical">;
+}>;
+/**
+ * A named group of controls with one Tab stop (APG toolbar): arrow keys move focus among the
+ * slotted controls, which stay the author's own elements. An `<hr>` child is drawn as a separator.
+ *
+ * @slot - Controls (buttons, odd-button, inputs, links), text, and `<hr>` separators.
+ * @csspart base - The surface.
+ * @cssprop --odd-toolbar-radius - Corner radius of the surface.
+ * @cssprop --odd-toolbar-background - Background of the surface.
+ * @a11y The host is a `toolbar` named by `label`, with `aria-orientation`. Only one control is in the Tab order; disabled and hidden controls are skipped. Text fields and sliders keep their own arrow keys. Give an `<hr>` separator `aria-orientation="vertical"` in a horizontal toolbar.
+ * @keyboard Tab reaches the last focused control. Left and Right (Up and Down when vertical; mirrored right to left) move between controls, wrapping; Home and End go to the first and last. In a text field or a slider, these keys move the caret or change the value.
+ * @previewRole toolbar
+ * @useFor Several related actions or formatting controls used together, such as above a table or an editor.
+ * @notFor A single action or two (place buttons directly); navigation (use links or odd-side-nav); a menu of commands (use odd-menu).
+ * @category Actions
+ * @customization 1 2 3
+ */
+export declare class OddkinToolbar extends OddkinToolbar_base {
+    #private;
+    /** @internal The slotted controls that take part in the roving focus. */
+    get _items(): HTMLElement[];
+    /** @internal Controls added or removed: one of them keeps the Tab stop. */
+    readonly _onSlotChange: () => void;
+    protected mounted(scope: Scope): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'odd-toolbar': OddkinToolbar;
+    }
+}
+export {};
+//# sourceMappingURL=toolbar.d.ts.map

package/dist/toolbar/toolbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toolbar.d.ts","sourceRoot":"","sources":["../../src/toolbar/toolbar.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAQ,MAAM,sBAAsB,CAAC;AAC3D,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;;;;;AAwBhD;;;;;;;;;;;;;;;GAeG;AACH,qBAAa,aAAc,SAAQ,kBAOjC;;IAKA,yEAAyE;IACzE,IAAI,MAAM,IAAI,WAAW,EAAE,CAE1B;IAED,2EAA2E;IAC3E,QAAQ,CAAC,aAAa,QAAO,IAAI,CAAwB;IAazD,UAAmB,OAAO,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI,CAa7C;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,aAAa,CAAC;KAC9B;CACF"}

package/dist/toolbar/toolbar.define.d.ts

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

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

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

package/dist/toolbar/toolbar.define.js

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

package/dist/toolbar/toolbar.define.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toolbar.define.js","sourceRoot":"","sources":["../../src/toolbar/toolbar.define.ts"],"names":[],"mappings":"AAAA,qDAAqD;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAC9C,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAE5D,MAAM,CAAC,iBAAiB,CAAC,CAAC"}

package/dist/toolbar/toolbar.definition.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"toolbar.definition.d.ts","sourceRoot":"","sources":["../../src/toolbar/toolbar.definition.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAK7C,eAAO,MAAM,iBAAiB,iEAK5B,CAAC"}

package/dist/toolbar/toolbar.definition.js

@@ -0,0 +1,14 @@
+import { compose } from '@oddkin/core/element';
+import { focusRingStyles } from '../styles/focus-ring.styles.js';
+import { hostStyles } from '../styles/host.styles.js';
+import { OddkinToolbar } from './toolbar.js';
+import { toolbarStructuralStyles } from './toolbar.structural.styles.js';
+import { toolbarStyles } from './toolbar.styles.js';
+import { toolbarTemplate } from './toolbar.template.js';
+export const toolbarDefinition = compose({
+    name: 'odd-toolbar',
+    element: OddkinToolbar,
+    template: toolbarTemplate,
+    styles: [hostStyles, toolbarStructuralStyles, focusRingStyles, toolbarStyles],
+});
+//# sourceMappingURL=toolbar.definition.js.map

package/dist/toolbar/toolbar.definition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toolbar.definition.js","sourceRoot":"","sources":["../../src/toolbar/toolbar.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AACjE,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAC7C,OAAO,EAAE,uBAAuB,EAAE,MAAM,gCAAgC,CAAC;AACzE,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAExD,MAAM,CAAC,MAAM,iBAAiB,GAAG,OAAO,CAAC;IACvC,IAAI,EAAE,aAAa;IACnB,OAAO,EAAE,aAAa;IACtB,QAAQ,EAAE,eAAe;IACzB,MAAM,EAAE,CAAC,UAAU,EAAE,uBAAuB,EAAE,eAAe,EAAE,aAAa,CAAC;CAC9E,CAAC,CAAC"}

package/dist/toolbar/toolbar.js

@@ -0,0 +1,79 @@
+import { RovingFocus } from '@oddkin/core/controllers/focus';
+import { OddkinElement, prop } from '@oddkin/core/element';
+const NOT_TEXT = new Set([
+    'button',
+    'checkbox',
+    'color',
+    'file',
+    'image',
+    'radio',
+    'reset',
+    'submit',
+]);
+/** Text entry and sliders keep their own arrow keys, Home, and End (caret and value). */
+const keepsKeys = (target) => target instanceof HTMLTextAreaElement ||
+    (target instanceof HTMLInputElement && !NOT_TEXT.has(target.type)) ||
+    (target instanceof HTMLElement && target.isContentEditable);
+/** A child that takes part in the roving focus: a control, a link, or a focus-delegating host. */
+const isItem = (el) => el instanceof HTMLElement &&
+    (el.matches('button, input, select, textarea, a[href], [tabindex], [contenteditable]') ||
+        !!el.shadowRoot?.delegatesFocus);
+/**
+ * A named group of controls with one Tab stop (APG toolbar): arrow keys move focus among the
+ * slotted controls, which stay the author's own elements. An `<hr>` child is drawn as a separator.
+ *
+ * @slot - Controls (buttons, odd-button, inputs, links), text, and `<hr>` separators.
+ * @csspart base - The surface.
+ * @cssprop --odd-toolbar-radius - Corner radius of the surface.
+ * @cssprop --odd-toolbar-background - Background of the surface.
+ * @a11y The host is a `toolbar` named by `label`, with `aria-orientation`. Only one control is in the Tab order; disabled and hidden controls are skipped. Text fields and sliders keep their own arrow keys. Give an `<hr>` separator `aria-orientation="vertical"` in a horizontal toolbar.
+ * @keyboard Tab reaches the last focused control. Left and Right (Up and Down when vertical; mirrored right to left) move between controls, wrapping; Home and End go to the first and last. In a text field or a slider, these keys move the caret or change the value.
+ * @previewRole toolbar
+ * @useFor Several related actions or formatting controls used together, such as above a table or an editor.
+ * @notFor A single action or two (place buttons directly); navigation (use links or odd-side-nav); a menu of commands (use odd-menu).
+ * @category Actions
+ * @customization 1 2 3
+ */
+export class OddkinToolbar extends OddkinElement.with({
+    label: prop.string({ default: '', description: 'Names the toolbar.' }),
+    orientation: prop.enum(['horizontal', 'vertical'], {
+        default: 'horizontal',
+        reflect: true,
+        description: 'Controls in a row or a column; sets the arrow keys that move between them.',
+    }),
+}) {
+    /** Set while a key press comes from a text field or slider, so the roving focus leaves it alone. */
+    #typing = false;
+    #roving = new RovingFocus(this.#focusOptions());
+    /** @internal The slotted controls that take part in the roving focus. */
+    get _items() {
+        return [...this.children].filter(isItem);
+    }
+    /** @internal Controls added or removed: one of them keeps the Tab stop. */
+    _onSlotChange = () => this.#roving.sync();
+    #focusOptions() {
+        const host = this;
+        return {
+            target: () => this.shadowRoot?.querySelector('[part~="base"]'),
+            items: () => (this.#typing ? [] : this._items),
+            get orientation() {
+                return host.orientation;
+            },
+        };
+    }
+    mounted(scope) {
+        const base = this.shadowRoot.querySelector('[part~="base"]');
+        // Registered around the roving focus's own listener, so it sees the flag for this key press.
+        scope.listen(base, 'keydown', (event) => {
+            this.#typing = keepsKeys(event.composedPath()[0]);
+        });
+        scope.use(this.#roving);
+        scope.listen(base, 'keydown', () => (this.#typing = false));
+        scope.effect(() => {
+            this.internals.role = 'toolbar';
+            this.internals.ariaLabel = this.label || null;
+            this.internals.ariaOrientation = this.orientation;
+        });
+    }
+}
+//# sourceMappingURL=toolbar.js.map

package/dist/toolbar/toolbar.js.map

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

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

@@ -0,0 +1,6 @@
+/**
+ * Controls in a wrapping row (a column when vertical); an `<hr>` child is a line across the row.
+ * No brand or visual tokens.
+ */
+export declare const toolbarStructuralStyles: import("@oddkin/core/styles").CSSResult;
+//# sourceMappingURL=toolbar.structural.styles.d.ts.map

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

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