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

package/dist/rating/rating.template.js

@@ -0,0 +1,43 @@
+import { html } from '@oddkin/core/template';
+import { externalDescriptionTemplate } from '../form-control/description.js';
+import { radioFlag, radioInput } from '../form-control/radio-input.js';
+import { starGlyph } from '../styles/glyphs.js';
+/**
+ * Anatomy: the shared field as a `role="radiogroup"` named by its `label` part and described by
+ * the `description` and `error` parts, around a row (`control`) of stars and the chosen value
+ * (`value`). Each star (`option`) is a label holding its native radio, drawn as the star's
+ * target, under the star glyph and the option's label for assistive technology; stars up to the
+ * chosen one are `data-state="on"`.
+ */
+export const ratingTemplate = (rating) => {
+    const position = rating._position.value;
+    return html `<div
+    part="field"
+    class="field"
+    role="radiogroup"
+    aria-disabled=${rating.disabled || rating._formDisabled.value ? 'true' : null}
+    aria-readonly=${rating.readonly ? 'true' : null}
+    aria-labelledby=${rating.label ? 'label' : null}
+    aria-describedby=${rating._describedBy}
+    @focusout=${rating._onFocusOut}
+    @click=${rating._onClick}
+  >
+    <div part="label" id="label" class="label" ?hidden=${!rating.label}>${rating.label}</div>
+    <div part="description" id="description" class="description" ?hidden=${!rating.description}>
+      ${rating.description}
+    </div>
+    <div part="control" class="row">
+      <span class="stars">
+        ${rating._options.value.map((option, index) => html `<label part="option" class="star" data-state=${index < position ? 'on' : 'off'}>
+              ${radioInput(rating, option, 'star-box', { title: option.description })}
+              ${starGlyph}<span class="visually-hidden">${option.label}</span>
+            </label>`)}
+        ${radioFlag(rating)}
+      </span>
+      <span part="value" class="value">${rating._summary.value}</span>
+    </div>
+    <div part="error" id="error" class="error" ?hidden=${!rating.error}>${rating.error}</div>
+    ${externalDescriptionTemplate(rating._externalDescription)}
+  </div>`;
+};
+//# sourceMappingURL=rating.template.js.map

package/dist/rating/rating.template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rating.template.js","sourceRoot":"","sources":["../../src/rating/rating.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,2BAA2B,EAAE,MAAM,gCAAgC,CAAC;AAC7E,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AACvE,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAGhD;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,MAAoB,EAAE,EAAE;IACrD,MAAM,QAAQ,GAAG,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC;IACxC,OAAO,IAAI,CAAA;;;;oBAIO,MAAM,CAAC,QAAQ,IAAI,MAAM,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI;oBAC7D,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI;sBAC7B,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI;uBAC5B,MAAM,CAAC,YAAY;gBAC1B,MAAM,CAAC,WAAW;aACrB,MAAM,CAAC,QAAQ;;yDAE6B,CAAC,MAAM,CAAC,KAAK,IAAI,MAAM,CAAC,KAAK;2EACX,CAAC,MAAM,CAAC,WAAW;QACtF,MAAM,CAAC,WAAW;;;;UAIhB,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,CACzB,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAChB,IAAI,CAAA,gDAAgD,KAAK,GAAG,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK;gBAC/E,UAAU,CAAC,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,EAAE,KAAK,EAAE,MAAM,CAAC,WAAW,EAAE,CAAC;gBACrE,SAAS,iCAAiC,MAAM,CAAC,KAAK;qBACjD,CACZ;UACC,SAAS,CAAC,MAAM,CAAC;;yCAEc,MAAM,CAAC,QAAQ,CAAC,KAAK;;yDAEL,CAAC,MAAM,CAAC,KAAK,IAAI,MAAM,CAAC,KAAK;MAChF,2BAA2B,CAAC,MAAM,CAAC,oBAAoB,CAAC;SACrD,CAAC;AACV,CAAC,CAAC"}

package/dist/relative-time/foundation.d.ts

@@ -0,0 +1,6 @@
+export { hostStyles } from '../styles/host.styles.js';
+export { glyphStyles } from '../styles/glyphs.js';
+export { OddkinRelativeTime } from './relative-time.js';
+export { relativeTimeTemplate } from './relative-time.template.js';
+export { relativeTimeStructuralStyles } from './relative-time.structural.styles.js';
+//# sourceMappingURL=foundation.d.ts.map

package/dist/relative-time/foundation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"foundation.d.ts","sourceRoot":"","sources":["../../src/relative-time/foundation.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AACxD,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AACnE,OAAO,EAAE,4BAA4B,EAAE,MAAM,sCAAsC,CAAC"}

package/dist/relative-time/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 { glyphStyles } from '../styles/glyphs.js';
+export { OddkinRelativeTime } from './relative-time.js';
+export { relativeTimeTemplate } from './relative-time.template.js';
+export { relativeTimeStructuralStyles } from './relative-time.structural.styles.js';
+//# sourceMappingURL=foundation.js.map

package/dist/relative-time/foundation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"foundation.js","sourceRoot":"","sources":["../../src/relative-time/foundation.ts"],"names":[],"mappings":"AAAA,+FAA+F;AAC/F,8EAA8E;AAC9E,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AACxD,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AACnE,OAAO,EAAE,4BAA4B,EAAE,MAAM,sCAAsC,CAAC"}

package/dist/relative-time/index.d.ts

@@ -0,0 +1,6 @@
+export { OddkinRelativeTime } from './relative-time.js';
+export { relativeTimeTemplate } from './relative-time.template.js';
+export { relativeTimeStructuralStyles } from './relative-time.structural.styles.js';
+export { relativeTimeStyles } from './relative-time.styles.js';
+export { relativeTimeDefinition } from './relative-time.definition.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/relative-time/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/relative-time/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AACxD,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AACnE,OAAO,EAAE,4BAA4B,EAAE,MAAM,sCAAsC,CAAC;AACpF,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAC/D,OAAO,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC"}

package/dist/relative-time/index.js

@@ -0,0 +1,7 @@
+// Side-effect free. Register with `@oddkin/components/define/relative-time`.
+export { OddkinRelativeTime } from './relative-time.js';
+export { relativeTimeTemplate } from './relative-time.template.js';
+export { relativeTimeStructuralStyles } from './relative-time.structural.styles.js';
+export { relativeTimeStyles } from './relative-time.styles.js';
+export { relativeTimeDefinition } from './relative-time.definition.js';
+//# sourceMappingURL=index.js.map

package/dist/relative-time/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/relative-time/index.ts"],"names":[],"mappings":"AAAA,6EAA6E;AAC7E,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AACxD,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AACnE,OAAO,EAAE,4BAA4B,EAAE,MAAM,sCAAsC,CAAC;AACpF,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAC/D,OAAO,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC"}

package/dist/relative-time/relative-time.d.ts

@@ -0,0 +1,49 @@
+import { OddkinElement } from '@oddkin/core/element';
+export declare const RELATIVE_TIME_STRINGS: {
+    unavailable: string;
+};
+/**
+ * The value and unit that say how far `date` is from `now`, both in milliseconds: under 45 s is
+ * "now" (`0 second`), then minutes, hours, days, weeks, months, and years, each rounded.
+ */
+export declare function relativeUnit(date: number, now: number): [number, Intl.RelativeTimeFormatUnit];
+declare const OddkinRelativeTime_base: import("@oddkin/core/element").WithProps<typeof OddkinElement, {
+    readonly datetime: import("@oddkin/core/element").PropDefinition<string>;
+    readonly detail: import("@oddkin/core/element").PropDefinition<boolean>;
+    readonly strings: import("@oddkin/core/element").PropDefinition<Partial<{
+        unavailable: string;
+    }> | undefined>;
+}>;
+/**
+ * A date and time said relative to now ("3 hours ago", "in 2 days", "now") in the page's language,
+ * as a `<time>` that keeps the exact value; the absolute date and time is its tooltip, and with
+ * `detail` it is shown as well. An empty or unparseable `datetime` says so in words.
+ *
+ * @csspart base - The element's box.
+ * @csspart time - The relative text: a `<time>`, or the unavailable text.
+ * @csspart detail - The absolute date and time (with `detail`).
+ * @a11y Assistive technology reads the relative text; the absolute date and time is the native tooltip of the `<time>` (hover only), so show it with `detail` where it matters, as Figma's Absolute detail does.
+ * @limitation It does not update itself: the text is computed when it renders (Figma: not a live clock). Set `datetime` again to refresh it, or show the absolute date.
+ * @previewRole relativeTime
+ * @useFor When something happened or will happen, where closeness matters more than the exact time: activity, comments, updates.
+ * @notFor Exact times that people compare or copy (show the absolute date); a running countdown.
+ * @category Display
+ * @customization 1 2 3
+ */
+export declare class OddkinRelativeTime extends OddkinRelativeTime_base {
+    /** @internal The parsed date, or undefined when `datetime` is empty or unparseable. */
+    get _date(): Date | undefined;
+    /** @internal The relative text. */
+    _relative(date: Date): string;
+    /** @internal The absolute date and time. */
+    _absolute(date: Date): string;
+    /** @internal The text for a missing or unparseable `datetime`. */
+    get _unavailable(): string;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'odd-relative-time': OddkinRelativeTime;
+    }
+}
+export {};
+//# sourceMappingURL=relative-time.d.ts.map

package/dist/relative-time/relative-time.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"relative-time.d.ts","sourceRoot":"","sources":["../../src/relative-time/relative-time.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAQ,MAAM,sBAAsB,CAAC;AAG3D,eAAO,MAAM,qBAAqB;IAAK,WAAW;CAAsB,CAAC;AAYzE;;;GAGG;AACH,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE,IAAI,CAAC,sBAAsB,CAAC,CAY7F;;;;;;;;AAED;;;;;;;;;;;;;;;GAeG;AACH,qBAAa,kBAAmB,SAAQ,uBAStC;IACA,uFAAuF;IACvF,IAAI,KAAK,IAAI,IAAI,GAAG,SAAS,CAI5B;IAED,mCAAmC;IACnC,SAAS,CAAC,IAAI,EAAE,IAAI,GAAG,MAAM,CAG5B;IAED,4CAA4C;IAC5C,SAAS,CAAC,IAAI,EAAE,IAAI,GAAG,MAAM,CAE5B;IAED,kEAAkE;IAClE,IAAI,YAAY,IAAI,MAAM,CAEzB;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,kBAAkB,CAAC;KACzC;CACF"}

package/dist/relative-time/relative-time.define.d.ts

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

package/dist/relative-time/relative-time.define.d.ts.map

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

package/dist/relative-time/relative-time.define.js

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

package/dist/relative-time/relative-time.define.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"relative-time.define.js","sourceRoot":"","sources":["../../src/relative-time/relative-time.define.ts"],"names":[],"mappings":"AAAA,2DAA2D;AAC3D,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAC9C,OAAO,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AAEvE,MAAM,CAAC,sBAAsB,CAAC,CAAC"}

package/dist/relative-time/relative-time.definition.d.ts

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

package/dist/relative-time/relative-time.definition.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"relative-time.definition.d.ts","sourceRoot":"","sources":["../../src/relative-time/relative-time.definition.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAKxD,eAAO,MAAM,sBAAsB,sEAKjC,CAAC"}

package/dist/relative-time/relative-time.definition.js

@@ -0,0 +1,14 @@
+import { compose } from '@oddkin/core/element';
+import { glyphStyles } from '../styles/glyphs.js';
+import { hostStyles } from '../styles/host.styles.js';
+import { OddkinRelativeTime } from './relative-time.js';
+import { relativeTimeStructuralStyles } from './relative-time.structural.styles.js';
+import { relativeTimeStyles } from './relative-time.styles.js';
+import { relativeTimeTemplate } from './relative-time.template.js';
+export const relativeTimeDefinition = compose({
+    name: 'odd-relative-time',
+    element: OddkinRelativeTime,
+    template: relativeTimeTemplate,
+    styles: [hostStyles, relativeTimeStructuralStyles, glyphStyles, relativeTimeStyles],
+});
+//# sourceMappingURL=relative-time.definition.js.map

package/dist/relative-time/relative-time.definition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"relative-time.definition.js","sourceRoot":"","sources":["../../src/relative-time/relative-time.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AACxD,OAAO,EAAE,4BAA4B,EAAE,MAAM,sCAAsC,CAAC;AACpF,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAC/D,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAEnE,MAAM,CAAC,MAAM,sBAAsB,GAAG,OAAO,CAAC;IAC5C,IAAI,EAAE,mBAAmB;IACzB,OAAO,EAAE,kBAAkB;IAC3B,QAAQ,EAAE,oBAAoB;IAC9B,MAAM,EAAE,CAAC,UAAU,EAAE,4BAA4B,EAAE,WAAW,EAAE,kBAAkB,CAAC;CACpF,CAAC,CAAC"}

package/dist/relative-time/relative-time.js

@@ -0,0 +1,83 @@
+import { OddkinElement, prop } from '@oddkin/core/element';
+import { dateTimeFormat, langOf, relativeTimeFormat, strings } from '@oddkin/core/i18n';
+export const RELATIVE_TIME_STRINGS = { unavailable: 'Time unavailable' };
+/** The absolute date and time beside a relative one: "October 24, 2026 at 9:30 AM PDT". */
+const ABSOLUTE = {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+    hour: 'numeric',
+    minute: '2-digit',
+    timeZoneName: 'short',
+};
+/**
+ * The value and unit that say how far `date` is from `now`, both in milliseconds: under 45 s is
+ * "now" (`0 second`), then minutes, hours, days, weeks, months, and years, each rounded.
+ */
+export function relativeUnit(date, now) {
+    const seconds = (date - now) / 1000;
+    const abs = Math.abs(seconds);
+    // Each threshold keeps the rounded value at 1 or more.
+    const round = (divisor) => Math.round(seconds / divisor);
+    if (abs < 45)
+        return [0, 'second'];
+    if (abs < 45 * 60)
+        return [round(60), 'minute'];
+    if (abs < 22 * 3600)
+        return [round(3600), 'hour'];
+    if (abs < 6.5 * 86400)
+        return [round(86400), 'day'];
+    if (abs < 26 * 86400)
+        return [round(7 * 86400), 'week'];
+    if (abs < 320 * 86400)
+        return [round(30.4375 * 86400), 'month'];
+    return [round(365.25 * 86400), 'year'];
+}
+/**
+ * A date and time said relative to now ("3 hours ago", "in 2 days", "now") in the page's language,
+ * as a `<time>` that keeps the exact value; the absolute date and time is its tooltip, and with
+ * `detail` it is shown as well. An empty or unparseable `datetime` says so in words.
+ *
+ * @csspart base - The element's box.
+ * @csspart time - The relative text: a `<time>`, or the unavailable text.
+ * @csspart detail - The absolute date and time (with `detail`).
+ * @a11y Assistive technology reads the relative text; the absolute date and time is the native tooltip of the `<time>` (hover only), so show it with `detail` where it matters, as Figma's Absolute detail does.
+ * @limitation It does not update itself: the text is computed when it renders (Figma: not a live clock). Set `datetime` again to refresh it, or show the absolute date.
+ * @previewRole relativeTime
+ * @useFor When something happened or will happen, where closeness matters more than the exact time: activity, comments, updates.
+ * @notFor Exact times that people compare or copy (show the absolute date); a running countdown.
+ * @category Display
+ * @customization 1 2 3
+ */
+export class OddkinRelativeTime extends OddkinElement.with({
+    datetime: prop.string({
+        default: '',
+        description: 'When: an ISO 8601 date and time, as on `<time datetime>`.',
+    }),
+    detail: prop.boolean({ reflect: true, description: 'Also shows the absolute date and time.' }),
+    strings: prop.object({
+        description: 'Localized string overrides.',
+    }),
+}) {
+    /** @internal The parsed date, or undefined when `datetime` is empty or unparseable. */
+    get _date() {
+        if (!this.datetime)
+            return undefined;
+        const date = new Date(this.datetime);
+        return Number.isNaN(date.getTime()) ? undefined : date;
+    }
+    /** @internal The relative text. */
+    _relative(date) {
+        const [value, unit] = relativeUnit(date.getTime(), Date.now());
+        return relativeTimeFormat(langOf(this), { numeric: 'auto' }).format(value, unit);
+    }
+    /** @internal The absolute date and time. */
+    _absolute(date) {
+        return dateTimeFormat(langOf(this), ABSOLUTE).format(date);
+    }
+    /** @internal The text for a missing or unparseable `datetime`. */
+    get _unavailable() {
+        return strings(RELATIVE_TIME_STRINGS, this.strings).unavailable;
+    }
+}
+//# sourceMappingURL=relative-time.js.map

package/dist/relative-time/relative-time.js.map

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

package/dist/relative-time/relative-time.structural.styles.d.ts

@@ -0,0 +1,3 @@
+/** The glyph beside the relative text; the absolute date and time below. No tokens. */
+export declare const relativeTimeStructuralStyles: import("@oddkin/core/styles").CSSResult;
+//# sourceMappingURL=relative-time.structural.styles.d.ts.map

package/dist/relative-time/relative-time.structural.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"relative-time.structural.styles.d.ts","sourceRoot":"","sources":["../../src/relative-time/relative-time.structural.styles.ts"],"names":[],"mappings":"AAEA,uFAAuF;AACvF,eAAO,MAAM,4BAA4B,yCAYxC,CAAC"}

package/dist/relative-time/relative-time.structural.styles.js

@@ -0,0 +1,16 @@
+import { css } from '@oddkin/core/styles';
+/** The glyph beside the relative text; the absolute date and time below. No tokens. */
+export const relativeTimeStructuralStyles = css `
+  :host {
+    display: inline-block;
+  }
+  .base {
+    display: inline-flex;
+    flex-direction: column;
+  }
+  .relative {
+    display: inline-flex;
+    align-items: center;
+  }
+`;
+//# sourceMappingURL=relative-time.structural.styles.js.map

package/dist/relative-time/relative-time.structural.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"relative-time.structural.styles.js","sourceRoot":"","sources":["../../src/relative-time/relative-time.structural.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAE1C,uFAAuF;AACvF,MAAM,CAAC,MAAM,4BAA4B,GAAG,GAAG,CAAA;;;;;;;;;;;;CAY9C,CAAC"}

package/dist/relative-time/relative-time.styles.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Oddkin's default relative time: Figma `relativeTime` (the small type role; the relative text in
+ * the secondary colour, the absolute one in the primary colour; `space.xs` apart).
+ */
+export declare const relativeTimeStyles: import("@oddkin/core/styles").CSSResult;
+//# sourceMappingURL=relative-time.styles.d.ts.map

package/dist/relative-time/relative-time.styles.d.ts.map

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

package/dist/relative-time/relative-time.styles.js

@@ -0,0 +1,27 @@
+import { css } from '@oddkin/core/styles';
+import { token } from '@oddkin/tokens/refs';
+/**
+ * Oddkin's default relative time: Figma `relativeTime` (the small type role; the relative text in
+ * the secondary colour, the absolute one in the primary colour; `space.xs` apart).
+ */
+export const relativeTimeStyles = css `
+  .base {
+    gap: ${token('space.xs')};
+    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')};
+  }
+  .relative {
+    gap: ${token('space.xs')};
+    color: ${token('color.text.secondary')};
+  }
+  .glyph {
+    font-size: ${token('icon.size.sm')};
+  }
+  .detail {
+    color: ${token('color.text.primary')};
+  }
+`;
+//# sourceMappingURL=relative-time.styles.js.map

package/dist/relative-time/relative-time.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"relative-time.styles.js","sourceRoot":"","sources":["../../src/relative-time/relative-time.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,kBAAkB,GAAG,GAAG,CAAA;;WAE1B,KAAK,CAAC,UAAU,CAAC;mBACT,KAAK,CAAC,mBAAmB,CAAC;iBAC5B,KAAK,CAAC,iBAAiB,CAAC;mBACtB,KAAK,CAAC,mBAAmB,CAAC;mBAC1B,KAAK,CAAC,wBAAwB,CAAC;sBAC5B,KAAK,CAAC,2BAA2B,CAAC;;;WAG7C,KAAK,CAAC,UAAU,CAAC;aACf,KAAK,CAAC,sBAAsB,CAAC;;;iBAGzB,KAAK,CAAC,cAAc,CAAC;;;aAGzB,KAAK,CAAC,oBAAoB,CAAC;;CAEvC,CAAC"}

package/dist/relative-time/relative-time.template.d.ts

@@ -0,0 +1,7 @@
+import type { OddkinRelativeTime } from './relative-time.js';
+/**
+ * Anatomy: `part="base"` holding the clock glyph and `part="time"` (a `<time>`, or the unavailable
+ * text), and, with `detail`, `part="detail"`.
+ */
+export declare const relativeTimeTemplate: (el: OddkinRelativeTime) => import("@oddkin/core/template").TemplateResult;
+//# sourceMappingURL=relative-time.template.d.ts.map

package/dist/relative-time/relative-time.template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"relative-time.template.d.ts","sourceRoot":"","sources":["../../src/relative-time/relative-time.template.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAE7D;;;GAGG;AACH,eAAO,MAAM,oBAAoB,OAAQ,kBAAkB,mDAc1D,CAAC"}

package/dist/relative-time/relative-time.template.js

@@ -0,0 +1,20 @@
+import { html } from '@oddkin/core/template';
+import { clockGlyph } from '../styles/glyphs.js';
+/**
+ * Anatomy: `part="base"` holding the clock glyph and `part="time"` (a `<time>`, or the unavailable
+ * text), and, with `detail`, `part="detail"`.
+ */
+export const relativeTimeTemplate = (el) => {
+    const date = el._date;
+    const absolute = date ? el._absolute(date) : '';
+    return html `<span part="base" class="base"
+    ><span class="relative"
+      >${clockGlyph}${date
+        ? html `<time part="time" class="time" datetime=${el.datetime} title=${absolute}
+              >${el._relative(date)}</time
+            >`
+        : html `<span part="time" class="time">${el._unavailable}</span>`}</span
+    >${el.detail && date ? html `<span part="detail" class="detail">${absolute}</span>` : null}</span
+  >`;
+};
+//# sourceMappingURL=relative-time.template.js.map

package/dist/relative-time/relative-time.template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"relative-time.template.js","sourceRoot":"","sources":["../../src/relative-time/relative-time.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAGjD;;;GAGG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,EAAsB,EAAE,EAAE;IAC7D,MAAM,IAAI,GAAG,EAAE,CAAC,KAAK,CAAC;IACtB,MAAM,QAAQ,GAAG,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IAChD,OAAO,IAAI,CAAA;;SAEJ,UAAU,GACX,IAAI;QACF,CAAC,CAAC,IAAI,CAAA,2CAA2C,EAAE,CAAC,QAAQ,UAAU,QAAQ;iBACvE,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC;cACrB;QACJ,CAAC,CAAC,IAAI,CAAA,kCAAkC,EAAE,CAAC,YAAY,SAC3D;OACC,EAAE,CAAC,MAAM,IAAI,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA,sCAAsC,QAAQ,SAAS,CAAC,CAAC,CAAC,IAAI;IACzF,CAAC;AACL,CAAC,CAAC"}

package/dist/scroll-region/foundation.d.ts

@@ -0,0 +1,5 @@
+export { hostStyles } from '../styles/host.styles.js';
+export { OddkinScrollRegion } from './scroll-region.js';
+export { scrollRegionTemplate } from './scroll-region.template.js';
+export { scrollRegionStructuralStyles } from './scroll-region.structural.styles.js';
+//# sourceMappingURL=foundation.d.ts.map

package/dist/scroll-region/foundation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"foundation.d.ts","sourceRoot":"","sources":["../../src/scroll-region/foundation.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AACxD,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AACnE,OAAO,EAAE,4BAA4B,EAAE,MAAM,sCAAsC,CAAC"}

package/dist/scroll-region/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 { OddkinScrollRegion } from './scroll-region.js';
+export { scrollRegionTemplate } from './scroll-region.template.js';
+export { scrollRegionStructuralStyles } from './scroll-region.structural.styles.js';
+//# sourceMappingURL=foundation.js.map

package/dist/scroll-region/foundation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"foundation.js","sourceRoot":"","sources":["../../src/scroll-region/foundation.ts"],"names":[],"mappings":"AAAA,+FAA+F;AAC/F,8EAA8E;AAC9E,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AACxD,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AACnE,OAAO,EAAE,4BAA4B,EAAE,MAAM,sCAAsC,CAAC"}

package/dist/scroll-region/index.d.ts

@@ -0,0 +1,6 @@
+export { OddkinScrollRegion } from './scroll-region.js';
+export { scrollRegionTemplate } from './scroll-region.template.js';
+export { scrollRegionStructuralStyles } from './scroll-region.structural.styles.js';
+export { scrollRegionStyles } from './scroll-region.styles.js';
+export { scrollRegionDefinition } from './scroll-region.definition.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/scroll-region/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/scroll-region/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AACxD,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AACnE,OAAO,EAAE,4BAA4B,EAAE,MAAM,sCAAsC,CAAC;AACpF,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAC/D,OAAO,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC"}

package/dist/scroll-region/index.js

@@ -0,0 +1,7 @@
+// Side-effect free. Register with `@oddkin/components/define/scroll-region`.
+export { OddkinScrollRegion } from './scroll-region.js';
+export { scrollRegionTemplate } from './scroll-region.template.js';
+export { scrollRegionStructuralStyles } from './scroll-region.structural.styles.js';
+export { scrollRegionStyles } from './scroll-region.styles.js';
+export { scrollRegionDefinition } from './scroll-region.definition.js';
+//# sourceMappingURL=index.js.map

package/dist/scroll-region/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/scroll-region/index.ts"],"names":[],"mappings":"AAAA,6EAA6E;AAC7E,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AACxD,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AACnE,OAAO,EAAE,4BAA4B,EAAE,MAAM,sCAAsC,CAAC;AACpF,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAC/D,OAAO,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC"}

package/dist/scroll-region/scroll-region.d.ts

@@ -0,0 +1,43 @@
+import { OddkinElement } from '@oddkin/core/element';
+import type { Scope } from '@oddkin/core/scope';
+export declare const SCROLL_REGION_STRINGS: {
+    label: string;
+};
+declare const OddkinScrollRegion_base: import("@oddkin/core/element").WithProps<typeof OddkinElement, {
+    readonly label: import("@oddkin/core/element").PropDefinition<string>;
+    readonly strings: import("@oddkin/core/element").PropDefinition<Partial<{
+        label: string;
+    }> | undefined>;
+}>;
+/**
+ * Content that scrolls on its own inside a page, reachable and scrollable from the keyboard
+ * (WCAG 2.1.1). Bound it with `block-size` or `max-block-size`; while its content overflows, the
+ * scroller is focusable and a region named by `label`. When the content fits it is neither, so it
+ * adds no tab stop.
+ *
+ * @slot - The content, stacked with the layout gap.
+ * @csspart base - The scroller.
+ * @cssprop --odd-scroll-region-gap - Space between children (default the theme's `layout.gap`).
+ * @a11y While the content overflows, the scroller is in the tab order as a `region` named by `label` (default `strings.label`, "Scrollable content"); name it after its content. When the content fits, it is not focusable and has no role.
+ * @keyboard While it overflows: Tab reaches it; arrow keys, Page Up, Page Down, Home, End, and Space scroll it.
+ * @previewRole scrollRegion
+ * @useFor A bounded area that scrolls inside a page: a long list in a panel, a log, a preview pane.
+ * @notFor The page itself (let the document scroll); a set of choices (use a listbox, which manages focus itself).
+ * @category Layout
+ * @customization 1 2 3
+ */
+export declare class OddkinScrollRegion extends OddkinScrollRegion_base {
+    #private;
+    /** @internal True while the content is larger than the scroller; read by the template. */
+    readonly _overflowing: import("@oddkin/core/reactive").Signal<boolean>;
+    /** @internal The region's name. */
+    get _label(): string;
+    protected mounted(scope: Scope): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'odd-scroll-region': OddkinScrollRegion;
+    }
+}
+export {};
+//# sourceMappingURL=scroll-region.d.ts.map

package/dist/scroll-region/scroll-region.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-region.d.ts","sourceRoot":"","sources":["../../src/scroll-region/scroll-region.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAQ,MAAM,sBAAsB,CAAC;AAG3D,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAEhD,eAAO,MAAM,qBAAqB;IAAK,KAAK;CAAwB,CAAC;;;;;;;AAErE;;;;;;;;;;;;;;;;GAgBG;AACH,qBAAa,kBAAmB,SAAQ,uBAKtC;;IACA,0FAA0F;IAC1F,QAAQ,CAAC,YAAY,kDAAiB;IAEtC,mCAAmC;IACnC,IAAI,MAAM,IAAI,MAAM,CAEnB;IAOD,UAAmB,OAAO,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI,CAI7C;CAQF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,kBAAkB,CAAC;KACzC;CACF"}

package/dist/scroll-region/scroll-region.define.d.ts

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

package/dist/scroll-region/scroll-region.define.d.ts.map

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

package/dist/scroll-region/scroll-region.define.js

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

package/dist/scroll-region/scroll-region.define.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-region.define.js","sourceRoot":"","sources":["../../src/scroll-region/scroll-region.define.ts"],"names":[],"mappings":"AAAA,2DAA2D;AAC3D,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAC9C,OAAO,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AAEvE,MAAM,CAAC,sBAAsB,CAAC,CAAC"}

package/dist/scroll-region/scroll-region.definition.d.ts

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

package/dist/scroll-region/scroll-region.definition.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-region.definition.d.ts","sourceRoot":"","sources":["../../src/scroll-region/scroll-region.definition.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAKxD,eAAO,MAAM,sBAAsB,sEAKjC,CAAC"}

package/dist/scroll-region/scroll-region.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 { OddkinScrollRegion } from './scroll-region.js';
+import { scrollRegionStructuralStyles } from './scroll-region.structural.styles.js';
+import { scrollRegionStyles } from './scroll-region.styles.js';
+import { scrollRegionTemplate } from './scroll-region.template.js';
+export const scrollRegionDefinition = compose({
+    name: 'odd-scroll-region',
+    element: OddkinScrollRegion,
+    template: scrollRegionTemplate,
+    styles: [hostStyles, scrollRegionStructuralStyles, focusRingStyles, scrollRegionStyles],
+});
+//# sourceMappingURL=scroll-region.definition.js.map

package/dist/scroll-region/scroll-region.definition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-region.definition.js","sourceRoot":"","sources":["../../src/scroll-region/scroll-region.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,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AACxD,OAAO,EAAE,4BAA4B,EAAE,MAAM,sCAAsC,CAAC;AACpF,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAC/D,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAEnE,MAAM,CAAC,MAAM,sBAAsB,GAAG,OAAO,CAAC;IAC5C,IAAI,EAAE,mBAAmB;IACzB,OAAO,EAAE,kBAAkB;IAC3B,QAAQ,EAAE,oBAAoB;IAC9B,MAAM,EAAE,CAAC,UAAU,EAAE,4BAA4B,EAAE,eAAe,EAAE,kBAAkB,CAAC;CACxF,CAAC,CAAC"}

package/dist/scroll-region/scroll-region.js

@@ -0,0 +1,52 @@
+import { ResizeController } from '@oddkin/core/controllers/observe';
+import { OddkinElement, prop } from '@oddkin/core/element';
+import { strings } from '@oddkin/core/i18n';
+import { signal } from '@oddkin/core/reactive';
+export const SCROLL_REGION_STRINGS = { label: 'Scrollable content' };
+/**
+ * Content that scrolls on its own inside a page, reachable and scrollable from the keyboard
+ * (WCAG 2.1.1). Bound it with `block-size` or `max-block-size`; while its content overflows, the
+ * scroller is focusable and a region named by `label`. When the content fits it is neither, so it
+ * adds no tab stop.
+ *
+ * @slot - The content, stacked with the layout gap.
+ * @csspart base - The scroller.
+ * @cssprop --odd-scroll-region-gap - Space between children (default the theme's `layout.gap`).
+ * @a11y While the content overflows, the scroller is in the tab order as a `region` named by `label` (default `strings.label`, "Scrollable content"); name it after its content. When the content fits, it is not focusable and has no role.
+ * @keyboard While it overflows: Tab reaches it; arrow keys, Page Up, Page Down, Home, End, and Space scroll it.
+ * @previewRole scrollRegion
+ * @useFor A bounded area that scrolls inside a page: a long list in a panel, a log, a preview pane.
+ * @notFor The page itself (let the document scroll); a set of choices (use a listbox, which manages focus itself).
+ * @category Layout
+ * @customization 1 2 3
+ */
+export class OddkinScrollRegion extends OddkinElement.with({
+    label: prop.string({ default: '', description: 'Names the region while it scrolls.' }),
+    strings: prop.object({
+        description: 'Localized string overrides.',
+    }),
+}) {
+    /** @internal True while the content is larger than the scroller; read by the template. */
+    _overflowing = signal(false);
+    /** @internal The region's name. */
+    get _label() {
+        return this.label || strings(SCROLL_REGION_STRINGS, this.strings).label;
+    }
+    // The scroller resizes with the element; the content wrapper resizes with the content.
+    #resize = new ResizeController(() => this.#measure(), {
+        targets: () => [...(this.shadowRoot?.querySelectorAll('.base, .content') ?? [])],
+    });
+    mounted(scope) {
+        scope.use(this.#resize);
+        // Right after the first render, before the observer's first delivery (the next frame).
+        this.#measure();
+    }
+    #measure() {
+        const base = this.shadowRoot?.querySelector('.base');
+        if (!base)
+            return;
+        this._overflowing.value =
+            base.scrollHeight > base.clientHeight || base.scrollWidth > base.clientWidth;
+    }
+}
+//# sourceMappingURL=scroll-region.js.map