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

package/dist/calendar/calendar.structural.styles.js

@@ -0,0 +1,69 @@
+import { css } from '@oddkin/core/styles';
+/**
+ * The calendar under the field label: the month row (buttons at the ends, the month centred), the
+ * date table, a divider, and the actions row. Cells keep a transparent border, so today's outline
+ * moves nothing. Forced colours paint every border in CanvasText, so dates other than today take
+ * Canvas; the chosen date takes the system selection colours, and dates that cannot be chosen
+ * GrayText (`.grid` outranks the skin's states). No brand or visual tokens.
+ */
+export const calendarStructuralStyles = css `
+  :host {
+    display: block;
+  }
+  .calendar {
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    inline-size: fit-content;
+    max-inline-size: 100%;
+  }
+  .header,
+  .actions {
+    display: flex;
+    align-items: center;
+  }
+  .heading {
+    flex: 1 1 auto;
+    text-align: center;
+  }
+  .actions {
+    justify-content: space-between;
+  }
+  .odd-button {
+    flex: none;
+  }
+  .grid {
+    border-collapse: separate;
+  }
+  .weekday,
+  .day {
+    box-sizing: border-box;
+    padding: 0;
+    text-align: center;
+    vertical-align: middle;
+  }
+  .weekday {
+    font-weight: inherit;
+  }
+  .day {
+    border: 1px solid transparent;
+    cursor: pointer;
+  }
+  .day[aria-disabled='true'] {
+    cursor: not-allowed;
+  }
+  @media (forced-colors: active) {
+    .grid .day:not([aria-current='date']) {
+      border-color: Canvas;
+    }
+    .grid .day[aria-selected='true'] {
+      border-color: SelectedItem;
+      background: SelectedItem;
+      color: SelectedItemText;
+    }
+    .grid .day[aria-disabled='true'] {
+      color: GrayText;
+    }
+  }
+`;
+//# sourceMappingURL=calendar.structural.styles.js.map

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

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

package/dist/calendar/calendar.styles.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Oddkin's default calendar: Figma `calendar` and `calendar/Day`. The raised surface with
+ * `space.md` padding and `space.sm` between rows; the month in the UI style between small ghost
+ * buttons; weekday names in Small and secondary text; `control.height.md` square date cells
+ * `space.2xs` apart in the UI style, with `radius.sm`: dates of other months in secondary text,
+ * dates that cannot be chosen in the disabled colour, today outlined and the chosen date filled
+ * in the action colour. A divider in the default border colour over the Today and Clear buttons.
+ */
+export declare const calendarStyles: import("@oddkin/core/styles").CSSResult;
+//# sourceMappingURL=calendar.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"calendar.styles.d.ts","sourceRoot":"","sources":["../../src/calendar/calendar.styles.ts"],"names":[],"mappings":"AAGA;;;;;;;GAOG;AACH,eAAO,MAAM,cAAc,yCA0E1B,CAAC"}

package/dist/calendar/calendar.styles.js

@@ -0,0 +1,86 @@
+import { css } from '@oddkin/core/styles';
+import { token } from '@oddkin/tokens/refs';
+/**
+ * Oddkin's default calendar: Figma `calendar` and `calendar/Day`. The raised surface with
+ * `space.md` padding and `space.sm` between rows; the month in the UI style between small ghost
+ * buttons; weekday names in Small and secondary text; `control.height.md` square date cells
+ * `space.2xs` apart in the UI style, with `radius.sm`: dates of other months in secondary text,
+ * dates that cannot be chosen in the disabled colour, today outlined and the chosen date filled
+ * in the action colour. A divider in the default border colour over the Today and Clear buttons.
+ */
+export const calendarStyles = css `
+  :host(:disabled) .label {
+    color: ${token('color.text.disabled')};
+  }
+  .calendar {
+    gap: ${token('space.sm')};
+    padding: ${token('space.md')};
+    background: ${token('color.surface.raised')};
+  }
+  .header {
+    gap: ${token('space.xs')};
+  }
+  .heading,
+  .day {
+    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')};
+  }
+  .heading {
+    color: ${token('color.text.primary')};
+  }
+  .nav {
+    --odd-button-padding-inline: ${token('space.none')};
+    min-inline-size: max(${token('control.height.sm')}, ${token('target.min')});
+    font-size: ${token('icon.size.md')};
+  }
+  @media (hover: hover) {
+    .day:not([aria-disabled='true']):not([aria-selected='true']):hover {
+      background: ${token('color.surface.hover')};
+    }
+  }
+  .grid {
+    margin: calc(-1 * ${token('space.2xs')});
+    border-spacing: ${token('space.2xs')};
+  }
+  .weekday {
+    block-size: ${token('space.lg')};
+    color: ${token('color.text.secondary')};
+    font-family: ${token('type.small.family')};
+    font-size: ${token('type.small.size')};
+    line-height: ${token('type.small.line-height')};
+  }
+  .day {
+    inline-size: ${token('control.height.md')};
+    block-size: ${token('control.height.md')};
+    border-width: ${token('border.width.default')};
+    border-radius: ${token('radius.sm')};
+    color: ${token('color.text.primary')};
+    transition-property: background-color, border-color, color;
+    transition-duration: ${token('motion.duration.fast')};
+    transition-timing-function: ${token('motion.easing.standard')};
+  }
+  .day[part~='day-outside'] {
+    color: ${token('color.text.secondary')};
+  }
+  .day[aria-current='date'] {
+    border-color: ${token('color.action.default')};
+  }
+  .day[aria-disabled='true'] {
+    color: ${token('color.text.disabled')};
+  }
+  .day[aria-selected='true'] {
+    background: ${token('color.action.default')};
+    color: ${token('color.text.on-action')};
+  }
+  .divider {
+    block-size: ${token('border.width.default')};
+    background: ${token('color.border.default')};
+  }
+  .actions {
+    gap: ${token('space.xs')};
+  }
+`;
+//# sourceMappingURL=calendar.styles.js.map

package/dist/calendar/calendar.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"calendar.styles.js","sourceRoot":"","sources":["../../src/calendar/calendar.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAE5C;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAA;;aAEpB,KAAK,CAAC,qBAAqB,CAAC;;;WAG9B,KAAK,CAAC,UAAU,CAAC;eACb,KAAK,CAAC,UAAU,CAAC;kBACd,KAAK,CAAC,sBAAsB,CAAC;;;WAGpC,KAAK,CAAC,UAAU,CAAC;;;;mBAIT,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,oBAAoB,CAAC;;;mCAGL,KAAK,CAAC,YAAY,CAAC;2BAC3B,KAAK,CAAC,mBAAmB,CAAC,KAAK,KAAK,CAAC,YAAY,CAAC;iBAC5D,KAAK,CAAC,cAAc,CAAC;;;;oBAIlB,KAAK,CAAC,qBAAqB,CAAC;;;;wBAIxB,KAAK,CAAC,WAAW,CAAC;sBACpB,KAAK,CAAC,WAAW,CAAC;;;kBAGtB,KAAK,CAAC,UAAU,CAAC;aACtB,KAAK,CAAC,sBAAsB,CAAC;mBACvB,KAAK,CAAC,mBAAmB,CAAC;iBAC5B,KAAK,CAAC,iBAAiB,CAAC;mBACtB,KAAK,CAAC,wBAAwB,CAAC;;;mBAG/B,KAAK,CAAC,mBAAmB,CAAC;kBAC3B,KAAK,CAAC,mBAAmB,CAAC;oBACxB,KAAK,CAAC,sBAAsB,CAAC;qBAC5B,KAAK,CAAC,WAAW,CAAC;aAC1B,KAAK,CAAC,oBAAoB,CAAC;;2BAEb,KAAK,CAAC,sBAAsB,CAAC;kCACtB,KAAK,CAAC,wBAAwB,CAAC;;;aAGpD,KAAK,CAAC,sBAAsB,CAAC;;;oBAGtB,KAAK,CAAC,sBAAsB,CAAC;;;aAGpC,KAAK,CAAC,qBAAqB,CAAC;;;kBAGvB,KAAK,CAAC,sBAAsB,CAAC;aAClC,KAAK,CAAC,sBAAsB,CAAC;;;kBAGxB,KAAK,CAAC,sBAAsB,CAAC;kBAC7B,KAAK,CAAC,sBAAsB,CAAC;;;WAGpC,KAAK,CAAC,UAAU,CAAC;;CAE3B,CAAC"}

package/dist/calendar/calendar.template.d.ts

@@ -0,0 +1,10 @@
+import type { OddkinCalendar } from './calendar.js';
+/**
+ * Anatomy: the `label` and `description`, then the `calendar` surface: a `header` with the
+ * `previous` and `next` month buttons around the `heading` (month and year, a polite live region),
+ * the `grid` table of `weekday` column headers over six weeks of `day` cells (with `day-outside`,
+ * `day-today`, `day-selected`, `day-disabled`), a divider, and the `actions` row with the `today`
+ * and `clear` buttons; then the `error`. The cell on the active date is the grid's one Tab stop.
+ */
+export declare const calendarTemplate: (calendar: OddkinCalendar) => import("@oddkin/core/template").TemplateResult;
+//# sourceMappingURL=calendar.template.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"calendar.template.d.ts","sourceRoot":"","sources":["../../src/calendar/calendar.template.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAe,cAAc,EAAE,MAAM,eAAe,CAAC;AAEjE;;;;;;GAMG;AACH,eAAO,MAAM,gBAAgB,aAAc,cAAc,mDA2GxD,CAAC"}

package/dist/calendar/calendar.template.js

@@ -0,0 +1,140 @@
+import { html } from '@oddkin/core/template';
+import { externalDescriptionTemplate } from '../form-control/description.js';
+import { chevronEndGlyph, chevronStartGlyph } from '../styles/glyphs.js';
+/**
+ * Anatomy: the `label` and `description`, then the `calendar` surface: a `header` with the
+ * `previous` and `next` month buttons around the `heading` (month and year, a polite live region),
+ * the `grid` table of `weekday` column headers over six weeks of `day` cells (with `day-outside`,
+ * `day-today`, `day-selected`, `day-disabled`), a divider, and the `actions` row with the `today`
+ * and `clear` buttons; then the `error`. The cell on the active date is the grid's one Tab stop.
+ */
+export const calendarTemplate = (calendar) => {
+    const text = calendar._strings.value;
+    const inactive = calendar._inactive;
+    const active = calendar._active.value;
+    const value = calendar.value;
+    const today = calendar._today;
+    // `aria-disabled` on the field marks its texts as part of a disabled control, as odd-slider does.
+    return html `<div part="field" class="field" aria-disabled=${inactive ? 'true' : null}>
+    <div part="label" id="label" class="label" ?hidden=${!calendar.label}>${calendar.label}</div>
+    <div part="description" id="description" class="description" ?hidden=${!calendar.description}>
+      ${calendar.description}
+    </div>
+    <div
+      part="calendar"
+      class="calendar"
+      role="group"
+      aria-labelledby=${calendar.label ? 'label' : 'heading'}
+      aria-describedby=${calendar._describedBy}
+      aria-invalid=${calendar._userInvalid.value ? 'true' : null}
+      @focusout=${calendar._onFocusOut}
+    >
+      <div part="header" class="header">
+        <button
+          part="previous"
+          class="odd-button nav"
+          data-appearance="ghost"
+          data-size="sm"
+          type="button"
+          aria-label=${text.previousMonth}
+          ?disabled=${inactive || !calendar._canMove(-1)}
+          @click=${() => calendar._onMonth(-1)}
+        >
+          ${chevronStartGlyph}
+        </button>
+        <div part="heading" id="heading" class="heading" aria-live="polite">
+          ${calendar._format(active, 'month')}
+        </div>
+        <button
+          part="next"
+          class="odd-button nav"
+          data-appearance="ghost"
+          data-size="sm"
+          type="button"
+          aria-label=${text.nextMonth}
+          ?disabled=${inactive || !calendar._canMove(1)}
+          @click=${() => calendar._onMonth(1)}
+        >
+          ${chevronEndGlyph}
+        </button>
+      </div>
+      <table
+        part="grid"
+        class="grid"
+        role="grid"
+        aria-labelledby="heading"
+        aria-disabled=${inactive ? 'true' : null}
+        aria-readonly=${calendar.readonly ? 'true' : null}
+        @keydown=${calendar._onKeydown}
+      >
+        <thead>
+          <tr>
+            ${calendar._weekdays.map((weekday) => html `<th part="weekday" class="weekday" scope="col" abbr=${weekday.long}>
+                  ${weekday.short}
+                </th>`)}
+          </tr>
+        </thead>
+        <tbody>
+          ${calendar._weeks.map((week) => html `<tr>
+                ${week.map((day) => dayCell(calendar, day, { active, today, value, inactive }))}
+              </tr>`)}
+        </tbody>
+      </table>
+      <div class="divider"></div>
+      <div part="actions" class="actions">
+        <button
+          part="today"
+          class="odd-button"
+          data-appearance="ghost"
+          data-size="sm"
+          type="button"
+          ?disabled=${inactive || calendar.readonly || !calendar._selectable(today)}
+          @click=${calendar._onToday}
+        >
+          ${text.today}
+        </button>
+        <button
+          part="clear"
+          class="odd-button"
+          data-appearance="ghost"
+          data-size="sm"
+          type="button"
+          ?disabled=${inactive || calendar.readonly || !value}
+          @click=${calendar._onClear}
+        >
+          ${text.clear}
+        </button>
+      </div>
+    </div>
+    <div part="error" id="error" class="error" ?hidden=${!calendar.error}>${calendar.error}</div>
+    ${externalDescriptionTemplate(calendar._externalDescription)}
+  </div>`;
+};
+/** A date cell; its state parts (`day-outside`, `day-today`, …) follow the date. */
+const dayCell = (calendar, day, at) => {
+    const { active, today, value, inactive } = at;
+    const selected = day.iso === value;
+    const parts = [
+        'day',
+        day.outside && 'day-outside',
+        day.day === today && 'day-today',
+        selected && 'day-selected',
+        day.disabled && 'day-disabled',
+    ];
+    const part = parts.filter(Boolean).join(' ');
+    return html `<td
+    part=${part}
+    class="day"
+    role="gridcell"
+    data-date=${day.iso}
+    tabindex=${inactive ? null : day.day === active ? '0' : '-1'}
+    aria-label=${calendar._format(day.day, 'full')}
+    aria-selected=${selected ? 'true' : 'false'}
+    aria-current=${day.day === today ? 'date' : null}
+    aria-disabled=${day.disabled || inactive ? 'true' : null}
+    @click=${() => calendar._onDay(day.day)}
+  >
+    ${calendar._format(day.day, 'numeric')}
+  </td>`;
+};
+//# sourceMappingURL=calendar.template.js.map

package/dist/calendar/calendar.template.js.map

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

package/dist/calendar/foundation.d.ts

@@ -0,0 +1,8 @@
+export { hostStyles } from '../styles/host.styles.js';
+export { fieldStructuralStyles } from '../styles/field.structural.styles.js';
+export { glyphStyles } from '../styles/glyphs.js';
+export { OddkinCalendar, CALENDAR_STRINGS } from './calendar.js';
+export type { CalendarDateFilter } from './calendar.js';
+export { calendarTemplate } from './calendar.template.js';
+export { calendarStructuralStyles } from './calendar.structural.styles.js';
+//# sourceMappingURL=foundation.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"foundation.d.ts","sourceRoot":"","sources":["../../src/calendar/foundation.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,EAAE,qBAAqB,EAAE,MAAM,sCAAsC,CAAC;AAC7E,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACjE,YAAY,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AACxD,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC1D,OAAO,EAAE,wBAAwB,EAAE,MAAM,iCAAiC,CAAC"}

package/dist/calendar/foundation.js

@@ -0,0 +1,9 @@
+// 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 { glyphStyles } from '../styles/glyphs.js';
+export { OddkinCalendar, CALENDAR_STRINGS } from './calendar.js';
+export { calendarTemplate } from './calendar.template.js';
+export { calendarStructuralStyles } from './calendar.structural.styles.js';
+//# sourceMappingURL=foundation.js.map

package/dist/calendar/foundation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"foundation.js","sourceRoot":"","sources":["../../src/calendar/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,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEjE,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC1D,OAAO,EAAE,wBAAwB,EAAE,MAAM,iCAAiC,CAAC"}

package/dist/calendar/index.d.ts

@@ -0,0 +1,7 @@
+export { OddkinCalendar, CALENDAR_STRINGS } from './calendar.js';
+export type { CalendarDateFilter } from './calendar.js';
+export { calendarTemplate } from './calendar.template.js';
+export { calendarStructuralStyles } from './calendar.structural.styles.js';
+export { calendarStyles } from './calendar.styles.js';
+export { calendarDefinition } from './calendar.definition.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/calendar/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACjE,YAAY,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AACxD,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC1D,OAAO,EAAE,wBAAwB,EAAE,MAAM,iCAAiC,CAAC;AAC3E,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC"}

package/dist/calendar/index.js

@@ -0,0 +1,7 @@
+// Side-effect free. Register with `@oddkin/components/define/calendar`.
+export { OddkinCalendar, CALENDAR_STRINGS } from './calendar.js';
+export { calendarTemplate } from './calendar.template.js';
+export { calendarStructuralStyles } from './calendar.structural.styles.js';
+export { calendarStyles } from './calendar.styles.js';
+export { calendarDefinition } from './calendar.definition.js';
+//# sourceMappingURL=index.js.map

package/dist/calendar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/calendar/index.ts"],"names":[],"mappings":"AAAA,wEAAwE;AACxE,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEjE,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC1D,OAAO,EAAE,wBAAwB,EAAE,MAAM,iCAAiC,CAAC;AAC3E,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC"}

package/dist/card/card.d.ts

@@ -0,0 +1,51 @@
+import { OddkinElement } from '@oddkin/core/element';
+import type { Scope } from '@oddkin/core/scope';
+declare const OddkinCard_base: import("@oddkin/core/element").WithProps<typeof OddkinElement, {
+    readonly appearance: import("@oddkin/core/element").PropDefinition<"elevated" | "filled" | "outlined">;
+    readonly padding: import("@oddkin/core/element").PropDefinition<"lg" | "md" | "none" | "sm">;
+    readonly label: import("@oddkin/core/element").PropDefinition<string>;
+}>;
+/**
+ * A surface that groups related content, with optional header and footer.
+ *
+ * It is a plain container unless it has an accessible name: `label`, or (where the browser
+ * supports ARIA element reflection) a heading in the `header` slot. Then it is a named `region`.
+ *
+ * @slot - The body.
+ * @slot header - Heading and supporting content; a heading here names the card.
+ * @slot footer - Actions or supplementary content.
+ * @csspart base - The surface.
+ * @csspart header - The header region (hidden when empty).
+ * @csspart body - The body region.
+ * @csspart footer - The footer region (hidden when empty).
+ * @cssprop --odd-card-padding - Inner padding with `padding="md"` (the default). Also the theme's `card.padding` role, so the theme sets it (density and profiles adjust it); `padding="none"`, `"sm"`, and `"lg"` replace it.
+ * @cssprop --odd-card-gap - Space between header, body, and footer.
+ * @cssprop --odd-card-radius - Corner radius. Also the theme's `card.radius` role, so the theme sets it.
+ * @cssprop --odd-card-background - Background colour.
+ * @cssprop --odd-card-border-color - Border colour.
+ * @cssprop --odd-card-shadow - Shadow for `appearance="elevated"` (default `elevation.md`).
+ * @a11y Becomes a named region only with `label` or a slotted heading; otherwise it adds no landmark.
+ * @previewRole surface
+ * @useFor Grouping related content and actions into one visual unit.
+ * @notFor Page layout; use layout recipes. A whole clickable card; put a link or button inside.
+ * @limitation Naming the region from a slotted heading needs `ElementInternals.ariaLabelledByElements` (newer than the browser baseline); without it, use `label`.
+ * @category Containers
+ * @customization 1 2 3
+ */
+export declare class OddkinCard extends OddkinCard_base {
+    #private;
+    /** @internal True while the header slot has content; read by the template. */
+    readonly _hasHeader: import("@oddkin/core/reactive").Signal<boolean>;
+    /** @internal True while the footer slot has content; read by the template. */
+    readonly _hasFooter: import("@oddkin/core/reactive").Signal<boolean>;
+    /** @internal Slot change handler used by the template. */
+    readonly _onSlotChange: () => void;
+    protected mounted(scope: Scope): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'odd-card': OddkinCard;
+    }
+}
+export {};
+//# sourceMappingURL=card.d.ts.map

package/dist/card/card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../src/card/card.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAQ,MAAM,sBAAsB,CAAC;AAE3D,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;;;;;;AAIhD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,qBAAa,UAAW,SAAQ,eAY9B;;IACA,8EAA8E;IAC9E,QAAQ,CAAC,UAAU,kDAAiB;IACpC,8EAA8E;IAC9E,QAAQ,CAAC,UAAU,kDAAiB;IAEpC,0DAA0D;IAC1D,QAAQ,CAAC,aAAa,QAAO,IAAI,CAAoB;IAErD,UAAmB,OAAO,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI,CAM7C;CAoCF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,UAAU,CAAC;KACxB;CACF"}

package/dist/card/card.define.d.ts

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

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

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

package/dist/card/card.define.js

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

package/dist/card/card.define.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.define.js","sourceRoot":"","sources":["../../src/card/card.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/card/card.definition.d.ts

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

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

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

package/dist/card/card.definition.js

@@ -0,0 +1,13 @@
+import { compose } from '@oddkin/core/element';
+import { hostStyles } from '../styles/host.styles.js';
+import { OddkinCard } from './card.js';
+import { cardStructuralStyles } from './card.structural.styles.js';
+import { cardStyles } from './card.styles.js';
+import { cardTemplate } from './card.template.js';
+export const cardDefinition = compose({
+    name: 'odd-card',
+    element: OddkinCard,
+    template: cardTemplate,
+    styles: [hostStyles, cardStructuralStyles, cardStyles],
+});
+//# sourceMappingURL=card.definition.js.map

package/dist/card/card.definition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.definition.js","sourceRoot":"","sources":["../../src/card/card.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,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,UAAU,CAAC;CACvD,CAAC,CAAC"}

package/dist/card/card.js

@@ -0,0 +1,92 @@
+import { OddkinElement, prop } from '@oddkin/core/element';
+import { signal } from '@oddkin/core/reactive';
+const HEADING = 'h1, h2, h3, h4, h5, h6, [role="heading"]';
+/**
+ * A surface that groups related content, with optional header and footer.
+ *
+ * It is a plain container unless it has an accessible name: `label`, or (where the browser
+ * supports ARIA element reflection) a heading in the `header` slot. Then it is a named `region`.
+ *
+ * @slot - The body.
+ * @slot header - Heading and supporting content; a heading here names the card.
+ * @slot footer - Actions or supplementary content.
+ * @csspart base - The surface.
+ * @csspart header - The header region (hidden when empty).
+ * @csspart body - The body region.
+ * @csspart footer - The footer region (hidden when empty).
+ * @cssprop --odd-card-padding - Inner padding with `padding="md"` (the default). Also the theme's `card.padding` role, so the theme sets it (density and profiles adjust it); `padding="none"`, `"sm"`, and `"lg"` replace it.
+ * @cssprop --odd-card-gap - Space between header, body, and footer.
+ * @cssprop --odd-card-radius - Corner radius. Also the theme's `card.radius` role, so the theme sets it.
+ * @cssprop --odd-card-background - Background colour.
+ * @cssprop --odd-card-border-color - Border colour.
+ * @cssprop --odd-card-shadow - Shadow for `appearance="elevated"` (default `elevation.md`).
+ * @a11y Becomes a named region only with `label` or a slotted heading; otherwise it adds no landmark.
+ * @previewRole surface
+ * @useFor Grouping related content and actions into one visual unit.
+ * @notFor Page layout; use layout recipes. A whole clickable card; put a link or button inside.
+ * @limitation Naming the region from a slotted heading needs `ElementInternals.ariaLabelledByElements` (newer than the browser baseline); without it, use `label`.
+ * @category Containers
+ * @customization 1 2 3
+ */
+export class OddkinCard extends OddkinElement.with({
+    appearance: prop.enum(['outlined', 'filled', 'elevated'], {
+        default: 'outlined',
+        reflect: true,
+        description: 'Surface treatment.',
+    }),
+    padding: prop.enum(['none', 'sm', 'md', 'lg'], {
+        default: 'md',
+        reflect: true,
+        description: 'Inner padding step.',
+    }),
+    label: prop.string({ default: '', description: 'Accessible name; makes the card a region.' }),
+}) {
+    /** @internal True while the header slot has content; read by the template. */
+    _hasHeader = signal(false);
+    /** @internal True while the footer slot has content; read by the template. */
+    _hasFooter = signal(false);
+    /** @internal Slot change handler used by the template. */
+    _onSlotChange = () => this.#refresh();
+    mounted(scope) {
+        // After the first commit, so the slots exist; re-runs when `label` changes.
+        scope.effect(() => {
+            this.label;
+            this.#refresh();
+        });
+    }
+    #refresh() {
+        const filled = (name) => this.shadowRoot
+            ?.querySelector(`slot[name="${name}"]`)
+            ?.assignedNodes({ flatten: true })
+            .some((node) => node.nodeType === Node.ELEMENT_NODE || !!node.textContent?.trim()) ?? false;
+        this._hasHeader.value = filled('header');
+        this._hasFooter.value = filled('footer');
+        this.#syncSemantics();
+    }
+    #syncSemantics() {
+        const internals = this.internals;
+        const header = this.shadowRoot?.querySelector('slot[name="header"]');
+        const heading = header
+            ?.assignedElements({ flatten: true })
+            .map((el) => (el.matches(HEADING) ? el : el.querySelector(HEADING)))
+            .find((el) => el !== null);
+        if (this.label) {
+            internals.role = 'region';
+            internals.ariaLabel = this.label;
+            if ('ariaLabelledByElements' in internals)
+                internals.ariaLabelledByElements = null;
+        }
+        else if (heading && 'ariaLabelledByElements' in internals) {
+            internals.role = 'region';
+            internals.ariaLabel = null;
+            internals.ariaLabelledByElements = [heading];
+        }
+        else {
+            internals.role = null;
+            internals.ariaLabel = null;
+            if ('ariaLabelledByElements' in internals)
+                internals.ariaLabelledByElements = null;
+        }
+    }
+}
+//# sourceMappingURL=card.js.map

package/dist/card/card.js.map

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

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

@@ -0,0 +1,6 @@
+/**
+ * Layout the card depends on: a column of header, body, and footer that fills the host, and
+ * hidden empty regions. No brand or visual tokens.
+ */
+export declare const cardStructuralStyles: import("@oddkin/core/styles").CSSResult;
+//# sourceMappingURL=card.structural.styles.d.ts.map

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

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

package/dist/card/card.structural.styles.js

@@ -0,0 +1,29 @@
+import { css } from '@oddkin/core/styles';
+/**
+ * Layout the card depends on: a column of header, body, and footer that fills the host, and
+ * hidden empty regions. No brand or visual tokens.
+ */
+export const cardStructuralStyles = css `
+  :host {
+    display: block;
+  }
+  .card {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    block-size: 100%;
+    min-inline-size: 0;
+    /* Inherited by slotted content: long URLs and words wrap inside narrow cards. */
+    overflow-wrap: anywhere;
+  }
+  .body {
+    flex: 1 1 auto;
+    min-block-size: 0;
+  }
+  @media (forced-colors: active) {
+    .card {
+      border: 1px solid CanvasText;
+    }
+  }
+`;
+//# sourceMappingURL=card.structural.styles.js.map