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

package/dist/copy-button/copy-button.template.js

@@ -0,0 +1,38 @@
+import { html } from '@oddkin/core/template';
+import { checkGlyph, copyGlyph } from '../styles/glyphs.js';
+/**
+ * Anatomy: `part="base"` holding `part="button"` (a native button with the button look), the
+ * outcome `part="status"`, `part="fallback"` (shown after a failure without a source element;
+ * both hidden while unused), and two empty live regions for the announcements.
+ */
+export const copyButtonTemplate = (el) => {
+    const status = el._status.value;
+    const message = el._message;
+    const fallback = el._fallback.value;
+    return html `<span part="base" class="base"
+    ><button
+      part="button"
+      class="odd-button"
+      data-size="sm"
+      type="button"
+      ?disabled=${el.disabled}
+      @click=${el._onClick}
+    >
+      ${status === 'copied' ? checkGlyph : copyGlyph}<span>${el._label}</span></button
+    ><span part="status" class="status" data-status=${status} ?hidden=${!message}>${message}</span
+    ><input
+      part="fallback"
+      class="fallback"
+      readonly
+      aria-label=${el._label}
+      ?hidden=${!fallback}
+      .value=${fallback} /><span
+      class="visually-hidden polite"
+      role="status"
+      aria-live="polite"
+      aria-atomic="true"
+    ></span
+    ><span class="visually-hidden assertive" aria-live="assertive" aria-atomic="true"></span
+  ></span>`;
+};
+//# sourceMappingURL=copy-button.template.js.map

package/dist/copy-button/copy-button.template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"copy-button.template.js","sourceRoot":"","sources":["../../src/copy-button/copy-button.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAG5D;;;;GAIG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,EAAoB,EAAE,EAAE;IACzD,MAAM,MAAM,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC;IAChC,MAAM,OAAO,GAAG,EAAE,CAAC,QAAQ,CAAC;IAC5B,MAAM,QAAQ,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC;IACpC,OAAO,IAAI,CAAA;;;;;;kBAMK,EAAE,CAAC,QAAQ;eACd,EAAE,CAAC,QAAQ;;QAElB,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,SAAS,EAAE,CAAC,MAAM;sDAChB,MAAM,YAAY,CAAC,OAAO,IAAI,OAAO;;;;;mBAKxE,EAAE,CAAC,MAAM;gBACZ,CAAC,QAAQ;eACV,QAAQ;;;;;;;WAOZ,CAAC;AACZ,CAAC,CAAC"}

package/dist/copy-button/foundation.d.ts

@@ -0,0 +1,7 @@
+export { hostStyles } from '../styles/host.styles.js';
+export { glyphStyles } from '../styles/glyphs.js';
+export { visuallyHiddenStyles } from '../styles/visually-hidden.styles.js';
+export { OddkinCopyButton } from './copy-button.js';
+export { copyButtonTemplate } from './copy-button.template.js';
+export { copyButtonStructuralStyles } from './copy-button.structural.styles.js';
+//# sourceMappingURL=foundation.d.ts.map

package/dist/copy-button/foundation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"foundation.d.ts","sourceRoot":"","sources":["../../src/copy-button/foundation.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,OAAO,EAAE,oBAAoB,EAAE,MAAM,qCAAqC,CAAC;AAC3E,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAC/D,OAAO,EAAE,0BAA0B,EAAE,MAAM,oCAAoC,CAAC"}

package/dist/copy-button/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 { glyphStyles } from '../styles/glyphs.js';
+export { visuallyHiddenStyles } from '../styles/visually-hidden.styles.js';
+export { OddkinCopyButton } from './copy-button.js';
+export { copyButtonTemplate } from './copy-button.template.js';
+export { copyButtonStructuralStyles } from './copy-button.structural.styles.js';
+//# sourceMappingURL=foundation.js.map

package/dist/copy-button/foundation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"foundation.js","sourceRoot":"","sources":["../../src/copy-button/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,oBAAoB,EAAE,MAAM,qCAAqC,CAAC;AAC3E,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAC/D,OAAO,EAAE,0BAA0B,EAAE,MAAM,oCAAoC,CAAC"}

package/dist/copy-button/index.d.ts

@@ -0,0 +1,6 @@
+export { OddkinCopyButton } from './copy-button.js';
+export { copyButtonTemplate } from './copy-button.template.js';
+export { copyButtonStructuralStyles } from './copy-button.structural.styles.js';
+export { copyButtonStyles } from './copy-button.styles.js';
+export { copyButtonDefinition } from './copy-button.definition.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/copy-button/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/copy-button/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAC/D,OAAO,EAAE,0BAA0B,EAAE,MAAM,oCAAoC,CAAC;AAChF,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC"}

package/dist/copy-button/index.js

@@ -0,0 +1,7 @@
+// Side-effect free. Register with `@oddkin/components/define/copy-button`.
+export { OddkinCopyButton } from './copy-button.js';
+export { copyButtonTemplate } from './copy-button.template.js';
+export { copyButtonStructuralStyles } from './copy-button.structural.styles.js';
+export { copyButtonStyles } from './copy-button.styles.js';
+export { copyButtonDefinition } from './copy-button.definition.js';
+//# sourceMappingURL=index.js.map

package/dist/copy-button/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/copy-button/index.ts"],"names":[],"mappings":"AAAA,2EAA2E;AAC3E,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAC/D,OAAO,EAAE,0BAA0B,EAAE,MAAM,oCAAoC,CAAC;AAChF,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC"}

package/dist/css/avatar-group.css

@@ -0,0 +1,18 @@
+@layer odd.reset, odd.tokens, odd.base, odd.layout, odd.components, odd.utilities;
+
+@layer odd.components {
+  .odd-avatar-group {
+    display: inline-flex;
+    align-items: center;
+  }
+  .odd-avatar-group > * + * {
+    margin-inline-start: calc(-1 * var(--odd-space-xs));
+  }
+  .odd-avatar-group > odd-avatar::part(base) {
+    box-shadow: 0 0 0 var(--odd-border-width-strong) var(--odd-color-canvas);
+  }
+  .odd-avatar-group > .odd-avatar-group-more::part(base) {
+    background: var(--odd-color-action-default);
+    color: var(--odd-color-text-on-action);
+  }
+}

package/dist/css/base.css

@@ -0,0 +1,26 @@
+@layer odd.reset, odd.tokens, odd.base, odd.layout, odd.components, odd.utilities;
+
+@layer odd.base {
+  body {
+    background-color: var(--odd-color-canvas);
+    color: var(--odd-color-text-primary);
+    font-family: var(--odd-type-body-family);
+    font-size: var(--odd-type-body-size);
+    font-weight: var(--odd-type-body-weight);
+    line-height: var(--odd-type-body-line-height);
+    letter-spacing: var(--odd-type-body-letter-spacing);
+  }
+  a {
+    color: var(--odd-color-link);
+  }
+  code,
+  kbd,
+  pre,
+  samp {
+    font-family: var(--odd-font-family-mono);
+  }
+  :focus-visible {
+    outline: var(--odd-focus-width) solid var(--odd-color-focus-ring);
+    outline-offset: var(--odd-focus-offset);
+  }
+}

package/dist/css/button.css

@@ -0,0 +1,113 @@
+@layer odd.reset, odd.tokens, odd.base, odd.layout, odd.components, odd.utilities;
+
+@layer odd.components {
+  .odd-button {
+    box-sizing: border-box;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    vertical-align: middle;
+    min-block-size: max(
+      var(--odd-button-height, var(--odd-control-height-md)),
+      var(--odd-target-min)
+    );
+    margin: 0;
+    padding-block: var(--odd-space-none);
+    padding-inline: var(--odd-button-padding-inline, var(--odd-control-padding-inline-md));
+    gap: var(--odd-control-gap);
+    border: var(--odd-border-width-default) solid
+      var(--odd-button-border-color, var(--odd-color-border-strong));
+    border-radius: var(--odd-button-radius, var(--odd-control-radius));
+    background: var(--odd-button-background, var(--odd-color-surface-default));
+    color: var(--odd-button-color, var(--odd-color-text-primary));
+    font: inherit;
+    font-family: var(--odd-type-ui-family);
+    font-size: var(--odd-type-ui-size);
+    font-weight: var(--odd-type-ui-weight);
+    line-height: var(--odd-type-ui-line-height);
+    letter-spacing: var(--odd-type-ui-letter-spacing);
+    text-align: center;
+    overflow-wrap: anywhere;
+    cursor: pointer;
+    transition-property: background-color, border-color, color;
+    transition-duration: var(--odd-motion-duration-fast);
+    transition-timing-function: var(--odd-motion-easing-standard);
+  }
+  .odd-button[data-size='sm'] {
+    min-block-size: max(
+      var(--odd-button-height, var(--odd-control-height-sm)),
+      var(--odd-target-min)
+    );
+    padding-inline: var(--odd-button-padding-inline, var(--odd-control-padding-inline-sm));
+  }
+  .odd-button[data-size='lg'] {
+    min-block-size: max(
+      var(--odd-button-height, var(--odd-control-height-lg)),
+      var(--odd-target-min)
+    );
+    padding-inline: var(--odd-button-padding-inline, var(--odd-control-padding-inline-lg));
+    font-size: var(--odd-type-body-size);
+  }
+  .odd-button[data-full-width] {
+    inline-size: 100%;
+  }
+  .odd-button[data-appearance='primary'] {
+    border-color: var(--odd-button-border-color, transparent);
+    background: var(--odd-button-background, var(--odd-color-action-default));
+    color: var(--odd-button-color, var(--odd-color-text-on-action));
+  }
+  .odd-button[data-appearance='ghost'] {
+    border-color: var(--odd-button-border-color, transparent);
+    background: var(--odd-button-background, transparent);
+  }
+  @media (hover: hover) {
+    .odd-button[data-appearance='primary']:hover:enabled:not([aria-disabled='true']) {
+      background: var(--odd-button-background, var(--odd-color-action-hover));
+    }
+    .odd-button:not([data-appearance='primary']):hover:enabled:not([aria-disabled='true']) {
+      background: var(--odd-button-background, var(--odd-color-surface-hover));
+    }
+  }
+  .odd-button[data-appearance='primary']:active:enabled:not([aria-disabled='true']) {
+    background: var(--odd-button-background, var(--odd-color-action-pressed));
+  }
+  .odd-button:not([data-appearance='primary']):active:enabled:not([aria-disabled='true']) {
+    background: var(--odd-button-background, var(--odd-color-surface-sunken));
+  }
+  .odd-button:disabled {
+    border-color: transparent;
+    background: var(--odd-color-surface-sunken);
+    color: var(--odd-color-text-disabled);
+  }
+  .odd-button:disabled,
+  .odd-button[aria-disabled='true'] {
+    cursor: not-allowed;
+  }
+  /* The pressed state twice: as specific as the hover and active rules, and later. */
+  .odd-button[aria-pressed='true'][aria-pressed='true']:enabled:not([aria-disabled='true']) {
+    border-color: transparent;
+    background: var(--odd-color-selection-background);
+    color: var(--odd-color-selection-foreground);
+  }
+  .odd-button[aria-pressed='true']:disabled {
+    background: var(--odd-color-selection-background);
+  }
+  .odd-button:focus-visible {
+    outline: var(--odd-focus-width) solid var(--odd-color-focus-ring);
+    outline-offset: var(--odd-focus-offset);
+  }
+  @media (forced-colors: active) {
+    .odd-button {
+      border: 1px solid ButtonText;
+    }
+    .odd-button:disabled {
+      color: GrayText;
+      border-color: GrayText;
+    }
+    .odd-button[aria-pressed='true'][aria-pressed='true']:enabled:not([aria-disabled='true']) {
+      border-color: Highlight;
+      background: Highlight;
+      color: HighlightText;
+    }
+  }
+}

package/dist/css/description-list.css

@@ -0,0 +1,48 @@
+@layer odd.reset, odd.tokens, odd.base, odd.layout, odd.components, odd.utilities;
+
+@layer odd.components {
+  .odd-description-list {
+    container: odd-description-list / inline-size;
+    display: grid;
+    grid-template-columns:
+      fit-content(var(--odd-description-list-term-width, 33%))
+      minmax(0, 1fr);
+    gap: var(--odd-space-md) var(--odd-space-xs);
+    margin: 0;
+    color: var(--odd-color-text-primary);
+    font-family: var(--odd-type-body-family);
+    font-size: var(--odd-type-body-size);
+    font-weight: var(--odd-type-body-weight);
+    line-height: var(--odd-type-body-line-height);
+    letter-spacing: var(--odd-type-body-letter-spacing);
+  }
+  .odd-description-list > div {
+    display: grid;
+    grid-column: 1 / -1;
+    grid-template-columns: subgrid;
+  }
+  .odd-description-list > div + div {
+    padding-block-start: var(--odd-space-md);
+    border-block-start: var(--odd-border-width-default) solid var(--odd-color-border-default);
+  }
+  .odd-description-list dt {
+    color: var(--odd-color-text-secondary);
+    font-family: var(--odd-type-ui-family);
+    font-size: var(--odd-type-ui-size);
+    font-weight: var(--odd-type-ui-weight);
+    line-height: var(--odd-type-ui-line-height);
+    letter-spacing: var(--odd-type-ui-letter-spacing);
+  }
+  .odd-description-list dd {
+    margin: 0;
+    min-inline-size: 0;
+    overflow-wrap: anywhere;
+  }
+  @container odd-description-list (max-inline-size: 36rem) {
+    .odd-description-list > div {
+      display: flex;
+      flex-direction: column;
+      gap: var(--odd-space-xs);
+    }
+  }
+}

package/dist/css/divider.css

@@ -0,0 +1,27 @@
+@layer odd.reset, odd.tokens, odd.base, odd.layout, odd.components, odd.utilities;
+
+@layer odd.components {
+  hr.odd-divider {
+    block-size: 0;
+    margin-block: var(--odd-space-md);
+    border: 0;
+    border-block-start: var(--odd-border-width-default) solid var(--odd-color-border-default);
+  }
+  .odd-divider:not(hr) {
+    display: flex;
+    align-items: center;
+    gap: var(--odd-space-sm);
+    margin-block: var(--odd-space-md);
+    color: var(--odd-color-text-secondary);
+    font-family: var(--odd-type-small-family);
+    font-size: var(--odd-type-small-size);
+    font-weight: var(--odd-type-small-weight);
+    line-height: var(--odd-type-small-line-height);
+  }
+  .odd-divider:not(hr)::before,
+  .odd-divider:not(hr)::after {
+    content: '';
+    flex: 1;
+    border-block-start: var(--odd-border-width-default) solid var(--odd-color-border-default);
+  }
+}

package/dist/css/field.css

@@ -0,0 +1,128 @@
+@layer odd.reset, odd.tokens, odd.base, odd.layout, odd.components, odd.utilities;
+
+@layer odd.components {
+  .odd-field {
+    display: flex;
+    flex-direction: column;
+    min-inline-size: 0;
+    /* Long labels, help, and errors wrap instead of widening the field. */
+    overflow-wrap: anywhere;
+  }
+  .odd-field-control {
+    box-sizing: border-box;
+    inline-size: 100%;
+    margin: 0;
+    font: inherit;
+  }
+  /* A control with an adornment (a select's chevron) shares one grid cell with it. */
+  .odd-field-control-box {
+    display: grid;
+    align-items: center;
+  }
+  .odd-field-control-box > * {
+    grid-area: 1 / 1;
+  }
+  .odd-field-control-start,
+  .odd-field-control-end {
+    display: flex;
+    position: relative;
+    pointer-events: none;
+  }
+  .odd-field-control-start {
+    justify-self: start;
+  }
+  .odd-field-control-end {
+    justify-self: end;
+  }
+  /* The chevron replaces the engine's arrow, so every engine draws the same select. */
+  .odd-field-control-box > select.odd-field-control {
+    appearance: none;
+  }
+  @media (forced-colors: active) {
+    .odd-field-control {
+      border: 1px solid FieldText;
+    }
+    .odd-field-control[aria-invalid='true'] {
+      border-width: 2px;
+    }
+  }
+
+  .odd-field {
+    gap: var(--odd-space-xs);
+    font-family: var(--odd-type-body-family);
+    color: var(--odd-color-text-primary);
+  }
+  .odd-field-label {
+    font-size: var(--odd-type-ui-size);
+    font-weight: var(--odd-type-ui-weight);
+    line-height: var(--odd-type-ui-line-height);
+    letter-spacing: var(--odd-type-ui-letter-spacing);
+  }
+  .odd-field:has(.odd-field-control:disabled) .odd-field-label {
+    color: var(--odd-color-text-disabled);
+  }
+  .odd-field-description,
+  .odd-field-error {
+    font-size: var(--odd-type-small-size);
+    line-height: var(--odd-type-small-line-height);
+  }
+  .odd-field-description {
+    color: var(--odd-color-text-secondary);
+  }
+  .odd-field-control {
+    min-block-size: max(
+      var(--odd-field-height, var(--odd-control-height-md)),
+      var(--odd-target-min)
+    );
+    padding-block: var(--odd-space-none);
+    padding-inline: var(--odd-control-padding-inline-md);
+    border: var(--odd-border-width-default) solid
+      var(--odd-field-border-color, var(--odd-color-border-strong));
+    border-radius: var(--odd-field-radius, var(--odd-control-radius));
+    background: var(--odd-field-background, var(--odd-color-surface-default));
+    color: var(--odd-color-text-primary);
+    /* Body size: below 16px, iOS Safari zooms the page when the field takes focus. */
+    font-size: var(--odd-type-body-size);
+    line-height: var(--odd-type-body-line-height);
+    transition-property: border-color, background-color;
+    transition-duration: var(--odd-motion-duration-fast);
+    transition-timing-function: var(--odd-motion-easing-standard);
+  }
+  .odd-field-control::placeholder {
+    color: var(--odd-color-text-secondary);
+    opacity: 1;
+  }
+  @media (hover: hover) {
+    .odd-field-control:read-write:hover {
+      background: var(--odd-field-background, var(--odd-color-surface-hover));
+    }
+  }
+  .odd-field-control[aria-invalid='true'] {
+    border-color: var(--odd-color-danger-foreground);
+  }
+  .odd-field-control:disabled {
+    background: var(--odd-color-surface-sunken);
+    color: var(--odd-color-text-disabled);
+  }
+  .odd-field-control-box > select.odd-field-control {
+    padding-inline-end: calc(var(--odd-control-padding-inline-md) + 1em + var(--odd-control-gap));
+  }
+  .odd-field-control-box:has(> .odd-field-control-start) > .odd-field-control {
+    padding-inline-start: calc(
+      var(--odd-control-padding-inline-md) + 1em + var(--odd-control-gap)
+    );
+  }
+  .odd-field-control-box:has(> .odd-field-control-end) > input.odd-field-control {
+    padding-inline-end: calc(var(--odd-control-padding-inline-md) + 1em + var(--odd-control-gap));
+  }
+  .odd-field-control-start,
+  .odd-field-control-end {
+    margin-inline: var(--odd-control-padding-inline-md);
+  }
+  .odd-field-control-box > .odd-field-control:disabled ~ * {
+    color: var(--odd-color-text-disabled);
+  }
+  .odd-field-error {
+    color: var(--odd-color-danger-foreground);
+  }
+}

package/dist/css/index.d.ts

@@ -0,0 +1,106 @@
+import { type CSSResult } from '@oddkin/core/styles';
+/**
+ * Opt-in document stylesheets, written to `dist/css/<name>.css` by
+ * `scripts/build-component-css.mjs` inside their cascade layer after the canonical layer order
+ * (ADR 0039). Nothing loads them implicitly; unlayered application CSS overrides all of them.
+ */
+export interface DocumentStylesheet {
+    readonly layer: 'odd.reset' | 'odd.base' | 'odd.layout' | 'odd.components' | 'odd.utilities';
+    readonly styles: CSSResult;
+}
+/** A focused reset that keeps inherited typography, direction, and user preferences. */
+export declare const reset: DocumentStylesheet;
+/** Page defaults from the theme: text, surface, links, code, and the keyboard focus ring. */
+export declare const base: DocumentStylesheet;
+/**
+ * Page-author layout classes generated from the same helpers as recipes, with an override
+ * property per option (`--odd-stack-gap`, `--odd-split-side-width`, …) defaulting to the
+ * theme's layout roles: `.odd-stack` (`-tight`, `-loose`), `.odd-row` (`-between`),
+ * `.odd-cluster`, `.odd-grid`, `.odd-auto-grid` (`-fit`), `.odd-grid-stretch` (on either grid),
+ * `.odd-split` (`-end`), `.odd-box`
+ * (`-none`, `-roomy`), `.odd-center`, and `.odd-aspect-ratio`.
+ */
+export declare const layout: DocumentStylesheet;
+/**
+ * `<button class="odd-button">`: native buttons that look like `odd-button`, for forms that need
+ * native submit-button semantics. Indented one level, as the stylesheet writer expects of
+ * templates nested in this module.
+ */
+export declare const button: DocumentStylesheet;
+/**
+ * `.odd-type-<role>`: the eight type roles (`display`, `title`, `section`, `body`, `ui`, `small`,
+ * `eyebrow`, `code`) on any element; native `h1`–`h6` and `p` keep their semantics.
+ */
+export declare const typography: DocumentStylesheet;
+/** `a.odd-link`: link colour, an underline on hover, and the shared keyboard focus ring. */
+export declare const link: DocumentStylesheet;
+/** `hr.odd-divider`, or a labelled `.odd-divider` ("or") the author gives `role="separator"`. */
+export declare const divider: DocumentStylesheet;
+/** `kbd.odd-kbd`: a key cap that does not look clickable; sequences are adjacent keys. */
+export declare const kbd: DocumentStylesheet;
+/**
+ * `ul.odd-list` / `ol.odd-list`: rows on a bordered surface, divided by rules; `.odd-list-meta`
+ * for secondary text; the item with `aria-current` takes the selection colours.
+ */
+export declare const list: DocumentStylesheet;
+/**
+ * `table.odd-table`: a native table on a bordered surface; header cells on the sunken surface,
+ * rows divided by rules, `aria-sort` headers in the primary colour, and a row holding a checked
+ * checkbox in the selection colours.
+ */
+export declare const table: DocumentStylesheet;
+/**
+ * `.odd-field`: the field anatomy for native and third-party controls (`.odd-field-label`,
+ * `.odd-field-description`, `.odd-field-control`, `.odd-field-error`), generated from the rules
+ * of Oddkin's form controls, with the same `--odd-field-*` variables. The author wires
+ * `<label for>`, `aria-describedby`, and `aria-invalid`.
+ */
+export declare const field: DocumentStylesheet;
+/**
+ * `.odd-avatar-group`: overlapping `odd-avatar` children, each ringed in the page colour;
+ * `.odd-avatar-group-more` on the last one for an overflow count ("+3").
+ */
+export declare const avatarGroup: DocumentStylesheet;
+/**
+ * `dl.odd-description-list`: term and value pairs, each pair a `div` row (`<div><dt>…</dt>
+ * <dd>…</dd></div>`) divided by rules, with one stable term column for every row (at most
+ * `--odd-description-list-term-width`). The list is an inline-size container: below 36rem of its
+ * own width each term stacks above its value. A missing value is author text ("Not provided").
+ */
+export declare const descriptionList: DocumentStylesheet;
+/**
+ * `ol.odd-timeline`: events newest first, each an `li` holding an `odd-status-marker` and its
+ * content (`<li><odd-status-marker status="complete"></odd-status-marker><div>title, time,
+ * detail</div></li>`). Markers sit on a rail joined by a connector; the title takes the UI role
+ * (the danger colour when the event failed), the time and detail the small secondary role.
+ */
+export declare const timeline: DocumentStylesheet;
+/**
+ * `ol.odd-stepper`: the steps of a task, each an `li` holding an `odd-status-marker` (a number,
+ * or complete or failed) and its words (`<div><a href>Name</a><span>Complete</span></div>`). The
+ * current step has `aria-current="step"` (on the `li` or its link) and the action colours; a
+ * failed step's words take the danger colour. Step links keep the text colour and their underline.
+ * Steps sit in a row and stack at 36rem of the list.
+ */
+export declare const stepper: DocumentStylesheet;
+/** Page-level utilities with the same rules as the shadow-root primitives. */
+export declare const utilities: DocumentStylesheet;
+export declare const documentStylesheets: {
+    readonly reset: DocumentStylesheet;
+    readonly base: DocumentStylesheet;
+    readonly layout: DocumentStylesheet;
+    readonly button: DocumentStylesheet;
+    readonly typography: DocumentStylesheet;
+    readonly link: DocumentStylesheet;
+    readonly divider: DocumentStylesheet;
+    readonly kbd: DocumentStylesheet;
+    readonly list: DocumentStylesheet;
+    readonly table: DocumentStylesheet;
+    readonly field: DocumentStylesheet;
+    readonly 'avatar-group': DocumentStylesheet;
+    readonly 'description-list': DocumentStylesheet;
+    readonly timeline: DocumentStylesheet;
+    readonly stepper: DocumentStylesheet;
+    readonly utilities: DocumentStylesheet;
+};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/css/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAkB,KAAK,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAMrE;;;;GAIG;AACH,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,KAAK,EAAE,WAAW,GAAG,UAAU,GAAG,YAAY,GAAG,gBAAgB,GAAG,eAAe,CAAC;IAC7F,QAAQ,CAAC,MAAM,EAAE,SAAS,CAAC;CAC5B;AAED,wFAAwF;AACxF,eAAO,MAAM,KAAK,EAAE,kBA4CnB,CAAC;AAEF,6FAA6F;AAC7F,eAAO,MAAM,IAAI,EAAE,kBA0BlB,CAAC;AAoGF;;;;;;;GAOG;AACH,eAAO,MAAM,MAAM,EAAE,kBAAqE,CAAC;AAE3F;;;;GAIG;AACH,eAAO,MAAM,MAAM,EAAE,kBAGpB,CAAC;AAOF;;;GAGG;AACH,eAAO,MAAM,UAAU,EAAE,kBAuBxB,CAAC;AAEF,4FAA4F;AAC5F,eAAO,MAAM,IAAI,EAAE,kBA2BlB,CAAC;AAEF,iGAAiG;AACjG,eAAO,MAAM,OAAO,EAAE,kBA2BrB,CAAC;AAEF,0FAA0F;AAC1F,eAAO,MAAM,GAAG,EAAE,kBAwBjB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,IAAI,EAAE,kBA6ClB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,KAAK,EAAE,kBA2CnB,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,KAAK,EAAE,kBAYnB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,WAAW,EAAE,kBAkBzB,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,eAAe,EAAE,kBAgD7B,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,QAAQ,EAAE,kBA6EtB,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,OAAO,EAAE,kBAyDrB,CAAC;AAEF,8EAA8E;AAC9E,eAAO,MAAM,SAAS,EAAE,kBAmBvB,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;CAiBtB,CAAC"}