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

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

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

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

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

@@ -0,0 +1,3 @@
+/** Oddkin's default visual styles for the card, authored as plain CSS. */
+export declare const cardStyles: import("@oddkin/core/styles").CSSResult;
+//# sourceMappingURL=card.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"card.styles.d.ts","sourceRoot":"","sources":["../../src/card/card.styles.ts"],"names":[],"mappings":"AAKA,0EAA0E;AAC1E,eAAO,MAAM,UAAU,yCAwCtB,CAAC"}

package/dist/card/card.styles.js

@@ -0,0 +1,47 @@
+// Generated from card.styles.css by packages/components/test/css-sources.test.ts (UPDATE_FIXTURES=1).
+// Do not edit: change card.styles.css and regenerate.
+import { css } from '@oddkin/core/styles';
+import { token } from '@oddkin/tokens/refs';
+/** Oddkin's default visual styles for the card, authored as plain CSS. */
+export const cardStyles = css `
+  .card {
+    gap: var(--odd-card-gap, ${token('space.sm')});
+    padding: ${token('card.padding')};
+    border: ${token('border.width.default')} solid
+      var(--odd-card-border-color, ${token('color.border.default')});
+    border-radius: ${token('card.radius')};
+    background: var(--odd-card-background, ${token('color.surface.default')});
+    color: ${token('color.text.primary')};
+    font-family: ${token('type.body.family')};
+    font-size: ${token('type.body.size')};
+    line-height: ${token('type.body.line-height')};
+  }
+  /* A default for slotted headings; page styles for the heading still win. */
+  .header ::slotted(:is(h1, h2, h3, h4, h5, h6)) {
+    margin: 0;
+    font-family: ${token('type.title.family')};
+    font-size: ${token('type.title.size')};
+    font-weight: ${token('type.title.weight')};
+    line-height: ${token('type.title.line-height')};
+    letter-spacing: ${token('type.title.letter-spacing')};
+  }
+  :host([padding='none']) .card {
+    padding: 0;
+  }
+  :host([padding='sm']) .card {
+    padding: ${token('space.sm')};
+  }
+  :host([padding='lg']) .card {
+    padding: ${token('space.lg')};
+  }
+  :host([appearance='filled']) .card {
+    border-color: var(--odd-card-border-color, transparent);
+    background: var(--odd-card-background, ${token('color.surface.sunken')});
+  }
+  :host([appearance='elevated']) .card {
+    border-color: var(--odd-card-border-color, transparent);
+    background: var(--odd-card-background, ${token('color.surface.raised')});
+    box-shadow: var(--odd-card-shadow, ${token('elevation.md')});
+  }
+`;
+//# sourceMappingURL=card.styles.js.map

package/dist/card/card.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.styles.js","sourceRoot":"","sources":["../../src/card/card.styles.ts"],"names":[],"mappings":"AAAA,sGAAsG;AACtG,sDAAsD;AACtD,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAE5C,0EAA0E;AAC1E,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA;;+BAEE,KAAK,CAAC,UAAU,CAAC;eACjC,KAAK,CAAC,cAAc,CAAC;cACtB,KAAK,CAAC,sBAAsB,CAAC;qCACN,KAAK,CAAC,sBAAsB,CAAC;qBAC7C,KAAK,CAAC,aAAa,CAAC;6CACI,KAAK,CAAC,uBAAuB,CAAC;aAC9D,KAAK,CAAC,oBAAoB,CAAC;mBACrB,KAAK,CAAC,kBAAkB,CAAC;iBAC3B,KAAK,CAAC,gBAAgB,CAAC;mBACrB,KAAK,CAAC,uBAAuB,CAAC;;;;;mBAK9B,KAAK,CAAC,mBAAmB,CAAC;iBAC5B,KAAK,CAAC,iBAAiB,CAAC;mBACtB,KAAK,CAAC,mBAAmB,CAAC;mBAC1B,KAAK,CAAC,wBAAwB,CAAC;sBAC5B,KAAK,CAAC,2BAA2B,CAAC;;;;;;eAMzC,KAAK,CAAC,UAAU,CAAC;;;eAGjB,KAAK,CAAC,UAAU,CAAC;;;;6CAIa,KAAK,CAAC,sBAAsB,CAAC;;;;6CAI7B,KAAK,CAAC,sBAAsB,CAAC;yCACjC,KAAK,CAAC,cAAc,CAAC;;CAE7D,CAAC"}

package/dist/card/card.template.d.ts

@@ -0,0 +1,8 @@
+import type { OddkinCard } from './card.js';
+/**
+ * Anatomy: `part="base"` surface containing `header`, `body`, and `footer` parts with the
+ * `header`, default, and `footer` slots. Empty header and footer are hidden. Slot changes
+ * must call `_onSlotChange` so naming and visibility stay correct.
+ */
+export declare const cardTemplate: (card: OddkinCard) => import("@oddkin/core/template").TemplateResult;
+//# sourceMappingURL=card.template.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"card.template.d.ts","sourceRoot":"","sources":["../../src/card/card.template.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAE5C;;;;GAIG;AACH,eAAO,MAAM,YAAY,SAAU,UAAU,mDASpC,CAAC"}

package/dist/card/card.template.js

@@ -0,0 +1,16 @@
+import { html } from '@oddkin/core/template';
+/**
+ * Anatomy: `part="base"` surface containing `header`, `body`, and `footer` parts with the
+ * `header`, default, and `footer` slots. Empty header and footer are hidden. Slot changes
+ * must call `_onSlotChange` so naming and visibility stay correct.
+ */
+export const cardTemplate = (card) => html `<div part="base" class="card">
+    <div part="header" class="header" ?hidden=${!card._hasHeader.value}>
+      <slot name="header" @slotchange=${card._onSlotChange}></slot>
+    </div>
+    <div part="body" class="body"><slot></slot></div>
+    <div part="footer" class="footer" ?hidden=${!card._hasFooter.value}>
+      <slot name="footer" @slotchange=${card._onSlotChange}></slot>
+    </div>
+  </div>`;
+//# sourceMappingURL=card.template.js.map

package/dist/card/card.template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.template.js","sourceRoot":"","sources":["../../src/card/card.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAG7C;;;;GAIG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,IAAgB,EAAE,EAAE,CAC/C,IAAI,CAAA;gDAC0C,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK;wCAC9B,IAAI,CAAC,aAAa;;;gDAGV,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK;wCAC9B,IAAI,CAAC,aAAa;;SAEjD,CAAC"}

package/dist/card/foundation.d.ts

@@ -0,0 +1,5 @@
+export { hostStyles } from '../styles/host.styles.js';
+export { OddkinCard } from './card.js';
+export { cardTemplate } from './card.template.js';
+export { cardStructuralStyles } from './card.structural.styles.js';
+//# sourceMappingURL=foundation.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"foundation.d.ts","sourceRoot":"","sources":["../../src/card/foundation.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC"}

package/dist/card/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 { OddkinCard } from './card.js';
+export { cardTemplate } from './card.template.js';
+export { cardStructuralStyles } from './card.structural.styles.js';
+//# sourceMappingURL=foundation.js.map

package/dist/card/foundation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"foundation.js","sourceRoot":"","sources":["../../src/card/foundation.ts"],"names":[],"mappings":"AAAA,+FAA+F;AAC/F,8EAA8E;AAC9E,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC"}

package/dist/card/index.d.ts

@@ -0,0 +1,6 @@
+export { OddkinCard } from './card.js';
+export { cardTemplate } from './card.template.js';
+export { cardStructuralStyles } from './card.structural.styles.js';
+export { cardStyles } from './card.styles.js';
+export { cardDefinition } from './card.definition.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/card/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AACnE,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/card/index.js

@@ -0,0 +1,7 @@
+// Side-effect free. Register with `@oddkin/components/define/card`.
+export { OddkinCard } from './card.js';
+export { cardTemplate } from './card.template.js';
+export { cardStructuralStyles } from './card.structural.styles.js';
+export { cardStyles } from './card.styles.js';
+export { cardDefinition } from './card.definition.js';
+//# sourceMappingURL=index.js.map

package/dist/card/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/card/index.ts"],"names":[],"mappings":"AAAA,oEAAoE;AACpE,OAAO,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AACnE,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/carousel/carousel.d.ts

@@ -0,0 +1,84 @@
+import { OddkinElement, type ElementEvents } from '@oddkin/core/element';
+import { type Readable } from '@oddkin/core/reactive';
+import type { Scope } from '@oddkin/core/scope';
+export declare const CAROUSEL_STRINGS: {
+    carousel: string;
+    slide: string;
+    position: string;
+    previous: string;
+    next: string;
+    picker: string;
+    goTo: string;
+};
+/** The user showed another slide. */
+export declare const carouselInputEvent: import("@oddkin/core/element").EventDefinition<void>;
+/** The user showed another slide (committed at once). */
+export declare const carouselChangeEvent: import("@oddkin/core/element").EventDefinition<void>;
+declare const OddkinCarousel_base: import("@oddkin/core/element").WithProps<typeof OddkinElement, {
+    readonly label: import("@oddkin/core/element").PropDefinition<string>;
+    readonly current: import("@oddkin/core/element").PropDefinition<string>;
+    readonly strings: import("@oddkin/core/element").PropDefinition<Partial<{
+        carousel: string;
+        slide: string;
+        position: string;
+        previous: string;
+        next: string;
+        picker: string;
+        goTo: string;
+    }> | undefined>;
+}>;
+/**
+ * A carousel (APG carousel, manual only): one slide at a time, with previous and next, the
+ * position, and a button per slide. It never moves by itself. Each element child is a slide; the
+ * element assigns each to a slide group inside its own shadow root (manual slot assignment), so the
+ * content stays in the light DOM.
+ *
+ * @slot - The slides, one per element child.
+ * @csspart base - The carousel.
+ * @csspart slides - The live region around the slides.
+ * @csspart slide - Each slide group, around its child.
+ * @csspart controls - The row of controls.
+ * @csspart previous - The previous-slide button.
+ * @csspart next - The next-slide button.
+ * @csspart position - The position text ("2 of 3").
+ * @csspart picker - The group of slide buttons.
+ * @csspart pick - Each slide button; the shown slide's has `aria-current="true"`.
+ * @a11y A `region` with the role description "carousel", named by `label` (a `group` without one). Each slide is a `group` with the role description "slide", named by its position ("2 of 3"). The slides are a polite live region: a change the user makes is announced while focus stays on the control they used. At the ends, previous or next is `aria-disabled`, so focus stays on it. Slide buttons are named "Go to slide 2" (`strings.goTo`), their number being the visible text.
+ * @keyboard Tab moves through previous, the slide buttons, and next, then into the shown slide; Enter and Space activate. There are no arrow keys and no rotation to stop.
+ * @previewRole carousel
+ * @useFor A few related highlights in one place, one at a time: onboarding steps, featured items.
+ * @notFor Content everyone must see (show it all); switching views (use odd-tabs); paging a long list (use odd-pagination).
+ * @category Navigation
+ * @customization 1 2 3
+ */
+export declare class OddkinCarousel extends OddkinCarousel_base {
+    static shadowRootOptions: ShadowRootInit;
+    static events: {
+        input: import("@oddkin/core/element").EventDefinition<void>;
+        change: import("@oddkin/core/element").EventDefinition<void>;
+    };
+    readonly _events?: ElementEvents<typeof OddkinCarousel>;
+    /** @internal The element children, in order. */
+    readonly _slides: import("@oddkin/core/reactive").Signal<readonly Element[]>;
+    /** @internal The index of the slide shown, or -1 without slides. */
+    readonly _shown: Readable<number>;
+    /** @internal The built-in text with the author's overrides. */
+    readonly _strings: Readable<typeof CAROUSEL_STRINGS>;
+    /** @internal The number of the slide at `index`, in the page language. */
+    _number(index: number): string;
+    /** @internal "2 of 3" for the slide at `index`. */
+    _position(index: number): string;
+    /** @internal The name of the button for the slide at `index`. */
+    _goToLabel(index: number): string;
+    /** @internal The user showed the slide at `index`. */
+    _go(index: number): void;
+    protected connected(scope: Scope): void;
+    protected mounted(scope: Scope): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'odd-carousel': OddkinCarousel;
+    }
+}
+export {};
+//# sourceMappingURL=carousel.d.ts.map

package/dist/carousel/carousel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"carousel.d.ts","sourceRoot":"","sources":["../../src/carousel/carousel.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAe,KAAK,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAEtF,OAAO,EAAoB,KAAK,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACxE,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAEhD,eAAO,MAAM,gBAAgB;IAC3B,QAAQ;IACR,KAAK;IACL,QAAQ;IACR,QAAQ;IACR,IAAI;IACJ,MAAM;IACN,IAAI;CACL,CAAC;AAEF,qCAAqC;AACrC,eAAO,MAAM,kBAAkB,sDAM7B,CAAC;AACH,yDAAyD;AACzD,eAAO,MAAM,mBAAmB,sDAK9B,CAAC;;;;;;;;;;;;;;AAEH;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,qBAAa,cAAe,SAAQ,mBAUlC;IACA,OAAgB,iBAAiB,EAAE,cAAc,CAA8C;IAC/F,OAAgB,MAAM;QAAK,KAAK;QAAsB,MAAM;MAAwB;IACpF,SAAiB,OAAO,CAAC,EAAE,aAAa,CAAC,OAAO,cAAc,CAAC,CAAC;IAEhE,gDAAgD;IAChD,QAAQ,CAAC,OAAO,6DAAkC;IAClD,oEAAoE;IACpE,QAAQ,CAAC,MAAM,EAAE,QAAQ,CAAC,MAAM,CAAC,CAI9B;IACH,+DAA+D;IAC/D,QAAQ,CAAC,QAAQ,EAAE,QAAQ,CAAC,OAAO,gBAAgB,CAAC,CAElD;IAEF,0EAA0E;IAC1E,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAE7B;IAED,mDAAmD;IACnD,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAK/B;IAED,iEAAiE;IACjE,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAEhC;IAED,sDAAsD;IACtD,GAAG,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAKvB;IAED,UAAmB,SAAS,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI,CAM/C;IAED,UAAmB,OAAO,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI,CAe7C;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,cAAc,CAAC;KAChC;CACF"}

package/dist/carousel/carousel.define.d.ts

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

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

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

package/dist/carousel/carousel.define.js

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

package/dist/carousel/carousel.define.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"carousel.define.js","sourceRoot":"","sources":["../../src/carousel/carousel.define.ts"],"names":[],"mappings":"AAAA,sDAAsD;AACtD,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAC9C,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAE9D,MAAM,CAAC,kBAAkB,CAAC,CAAC"}

package/dist/carousel/carousel.definition.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"carousel.definition.d.ts","sourceRoot":"","sources":["../../src/carousel/carousel.definition.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAK/C,eAAO,MAAM,kBAAkB,kEAY7B,CAAC"}

package/dist/carousel/carousel.definition.js

@@ -0,0 +1,23 @@
+import { compose } from '@oddkin/core/element';
+import { nativeButtonStyles } from '../button/button.native.styles.js';
+import { focusRingStyles } from '../styles/focus-ring.styles.js';
+import { glyphStyles } from '../styles/glyphs.js';
+import { hostStyles } from '../styles/host.styles.js';
+import { OddkinCarousel } from './carousel.js';
+import { carouselStructuralStyles } from './carousel.structural.styles.js';
+import { carouselStyles } from './carousel.styles.js';
+import { carouselTemplate } from './carousel.template.js';
+export const carouselDefinition = compose({
+    name: 'odd-carousel',
+    element: OddkinCarousel,
+    template: carouselTemplate,
+    styles: [
+        hostStyles,
+        carouselStructuralStyles,
+        glyphStyles,
+        focusRingStyles,
+        nativeButtonStyles,
+        carouselStyles,
+    ],
+});
+//# sourceMappingURL=carousel.definition.js.map

package/dist/carousel/carousel.definition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"carousel.definition.js","sourceRoot":"","sources":["../../src/carousel/carousel.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,kBAAkB,EAAE,MAAM,mCAAmC,CAAC;AACvE,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AACjE,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,EAAE,wBAAwB,EAAE,MAAM,iCAAiC,CAAC;AAC3E,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAE1D,MAAM,CAAC,MAAM,kBAAkB,GAAG,OAAO,CAAC;IACxC,IAAI,EAAE,cAAc;IACpB,OAAO,EAAE,cAAc;IACvB,QAAQ,EAAE,gBAAgB;IAC1B,MAAM,EAAE;QACN,UAAU;QACV,wBAAwB;QACxB,WAAW;QACX,eAAe;QACf,kBAAkB;QAClB,cAAc;KACf;CACF,CAAC,CAAC"}

package/dist/carousel/carousel.js

@@ -0,0 +1,119 @@
+import { OddkinElement, event, prop } from '@oddkin/core/element';
+import { format, formatNumber, langOf, strings } from '@oddkin/core/i18n';
+import { computed, signal } from '@oddkin/core/reactive';
+export const CAROUSEL_STRINGS = {
+    carousel: 'carousel',
+    slide: 'slide',
+    position: '{index} of {count}',
+    previous: 'Previous slide',
+    next: 'Next slide',
+    picker: 'Slides',
+    goTo: 'Go to slide {index}',
+};
+/** The user showed another slide. */
+export const carouselInputEvent = event('input', {
+    bubbles: true,
+    composed: true,
+    cancelable: false,
+    syncs: 'current',
+    intent: 'user',
+});
+/** The user showed another slide (committed at once). */
+export const carouselChangeEvent = event('change', {
+    bubbles: true,
+    composed: false,
+    cancelable: false,
+    intent: 'user',
+});
+/**
+ * A carousel (APG carousel, manual only): one slide at a time, with previous and next, the
+ * position, and a button per slide. It never moves by itself. Each element child is a slide; the
+ * element assigns each to a slide group inside its own shadow root (manual slot assignment), so the
+ * content stays in the light DOM.
+ *
+ * @slot - The slides, one per element child.
+ * @csspart base - The carousel.
+ * @csspart slides - The live region around the slides.
+ * @csspart slide - Each slide group, around its child.
+ * @csspart controls - The row of controls.
+ * @csspart previous - The previous-slide button.
+ * @csspart next - The next-slide button.
+ * @csspart position - The position text ("2 of 3").
+ * @csspart picker - The group of slide buttons.
+ * @csspart pick - Each slide button; the shown slide's has `aria-current="true"`.
+ * @a11y A `region` with the role description "carousel", named by `label` (a `group` without one). Each slide is a `group` with the role description "slide", named by its position ("2 of 3"). The slides are a polite live region: a change the user makes is announced while focus stays on the control they used. At the ends, previous or next is `aria-disabled`, so focus stays on it. Slide buttons are named "Go to slide 2" (`strings.goTo`), their number being the visible text.
+ * @keyboard Tab moves through previous, the slide buttons, and next, then into the shown slide; Enter and Space activate. There are no arrow keys and no rotation to stop.
+ * @previewRole carousel
+ * @useFor A few related highlights in one place, one at a time: onboarding steps, featured items.
+ * @notFor Content everyone must see (show it all); switching views (use odd-tabs); paging a long list (use odd-pagination).
+ * @category Navigation
+ * @customization 1 2 3
+ */
+export class OddkinCarousel extends OddkinElement.with({
+    label: prop.string({ default: '', description: 'Names the carousel.' }),
+    current: prop.string({
+        default: '1',
+        description: "The shown slide's number, from 1 (as odd-pagination's `current`); out of range, the nearest slide shows.",
+    }),
+    strings: prop.object({
+        description: 'Localized string overrides.',
+    }),
+}) {
+    static shadowRootOptions = { mode: 'open', slotAssignment: 'manual' };
+    static events = { input: carouselInputEvent, change: carouselChangeEvent };
+    /** @internal The element children, in order. */
+    _slides = signal([]);
+    /** @internal The index of the slide shown, or -1 without slides. */
+    _shown = computed(() => {
+        const count = this._slides.value.length;
+        if (!count)
+            return -1;
+        return Math.min(count, Math.max(1, Math.floor(Number(this.current)) || 1)) - 1;
+    });
+    /** @internal The built-in text with the author's overrides. */
+    _strings = computed(() => strings(CAROUSEL_STRINGS, this.strings));
+    /** @internal The number of the slide at `index`, in the page language. */
+    _number(index) {
+        return formatNumber(index + 1, langOf(this));
+    }
+    /** @internal "2 of 3" for the slide at `index`. */
+    _position(index) {
+        return format(this._strings.value.position, {
+            index: this._number(index),
+            count: formatNumber(this._slides.value.length, langOf(this)),
+        });
+    }
+    /** @internal The name of the button for the slide at `index`. */
+    _goToLabel(index) {
+        return format(this._strings.value.goTo, { index: this._number(index) });
+    }
+    /** @internal The user showed the slide at `index`. */
+    _go(index) {
+        if (index < 0 || index >= this._slides.value.length || index === this._shown.value)
+            return;
+        this.current = String(index + 1);
+        this.emit(carouselInputEvent);
+        this.emit(carouselChangeEvent);
+    }
+    connected(scope) {
+        const read = () => (this._slides.value = [...this.children]);
+        read();
+        const observer = new MutationObserver(read);
+        observer.observe(this, { childList: true });
+        scope.add(() => observer.disconnect(), 'carousel slides');
+    }
+    mounted(scope) {
+        scope.effect(() => {
+            const slides = this._slides.value;
+            const slots = this.shadowRoot.querySelectorAll('[part~="slide"] > slot');
+            slides.forEach((slide, i) => slots[i]?.assign(slide));
+        }, { phase: 'post', name: '<odd-carousel> slide slots' });
+        scope.effect(() => {
+            const label = this.label;
+            this.internals.role = label ? 'region' : 'group';
+            this.internals.ariaRoleDescription = this._strings.value.carousel;
+            this.internals.ariaLabel = label || null;
+        });
+    }
+}
+//# sourceMappingURL=carousel.js.map

package/dist/carousel/carousel.js.map

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

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

@@ -0,0 +1,7 @@
+/**
+ * The slides above a wrapping row of controls; a slide and the controls never overflow the
+ * carousel, and the controls wrap on a narrow carousel rather than drop any. No brand or visual
+ * tokens.
+ */
+export declare const carouselStructuralStyles: import("@oddkin/core/styles").CSSResult;
+//# sourceMappingURL=carousel.structural.styles.d.ts.map

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

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

package/dist/carousel/carousel.structural.styles.js

@@ -0,0 +1,54 @@
+import { css } from '@oddkin/core/styles';
+/**
+ * The slides above a wrapping row of controls; a slide and the controls never overflow the
+ * carousel, and the controls wrap on a narrow carousel rather than drop any. No brand or visual
+ * tokens.
+ */
+export const carouselStructuralStyles = css `
+  :host {
+    display: block;
+  }
+  .carousel {
+    display: flex;
+    flex-direction: column;
+    min-inline-size: 0;
+  }
+  .slide {
+    min-inline-size: 0;
+    overflow-wrap: anywhere;
+  }
+  .controls,
+  .picker {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    min-inline-size: 0;
+  }
+  .odd-button {
+    flex: none;
+  }
+  .pick {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    margin: 0;
+    font: inherit;
+    cursor: pointer;
+  }
+  @media (forced-colors: active) {
+    .pick {
+      border: 1px solid ButtonText;
+    }
+    .pick[aria-current='true'] {
+      border-color: Highlight;
+      background: Highlight;
+      color: HighlightText;
+    }
+    .step[aria-disabled='true'] {
+      border-color: GrayText;
+      color: GrayText;
+    }
+  }
+`;
+//# sourceMappingURL=carousel.structural.styles.js.map

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

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

package/dist/carousel/carousel.styles.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Oddkin's default carousel look (Figma `carousel`): the slide on the sunken surface with the
+ * default border, previous and next as small icon buttons that look disabled at the ends, the
+ * position in UI type, and each slide button as a small framed number, the shown one on the
+ * selection surface in the link colour.
+ */
+export declare const carouselStyles: import("@oddkin/core/styles").CSSResult;
+//# sourceMappingURL=carousel.styles.d.ts.map

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

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

package/dist/carousel/carousel.styles.js

@@ -0,0 +1,62 @@
+import { css } from '@oddkin/core/styles';
+import { token } from '@oddkin/tokens/refs';
+/**
+ * Oddkin's default carousel look (Figma `carousel`): the slide on the sunken surface with the
+ * default border, previous and next as small icon buttons that look disabled at the ends, the
+ * position in UI type, and each slide button as a small framed number, the shown one on the
+ * selection surface in the link colour.
+ */
+export const carouselStyles = css `
+  .carousel,
+  .controls,
+  .picker {
+    gap: ${token('space.sm')};
+  }
+  .slide {
+    padding: ${token('space.lg')};
+    border: ${token('border.width.default')} solid ${token('color.border.default')};
+    border-radius: ${token('control.radius')};
+    background: ${token('color.surface.sunken')};
+    color: ${token('color.text.primary')};
+  }
+  .step {
+    --odd-button-padding-inline: ${token('space.none')};
+    min-inline-size: max(${token('control.height.sm')}, ${token('target.min')});
+    font-size: ${token('icon.size.md')};
+  }
+  .step[aria-disabled='true'] {
+    border-color: transparent;
+    background: ${token('color.surface.sunken')};
+    color: ${token('color.text.disabled')};
+  }
+  .position,
+  .pick {
+    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')};
+  }
+  .position {
+    color: ${token('color.text.primary')};
+  }
+  .pick {
+    min-inline-size: ${token('target.min')};
+    min-block-size: ${token('target.min')};
+    padding: ${token('space.2xs')};
+    border: ${token('border.width.default')} solid ${token('color.border.default')};
+    border-radius: ${token('control.radius')};
+    background: ${token('color.surface.default')};
+    color: ${token('color.text.secondary')};
+  }
+  @media (hover: hover) {
+    .pick:not([aria-current='true']):hover {
+      background: ${token('color.surface.hover')};
+    }
+  }
+  .pick[aria-current='true'] {
+    background: ${token('color.selection.surface')};
+    color: ${token('color.link')};
+  }
+`;
+//# sourceMappingURL=carousel.styles.js.map

package/dist/carousel/carousel.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"carousel.styles.js","sourceRoot":"","sources":["../../src/carousel/carousel.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAE5C;;;;;GAKG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAA;;;;WAItB,KAAK,CAAC,UAAU,CAAC;;;eAGb,KAAK,CAAC,UAAU,CAAC;cAClB,KAAK,CAAC,sBAAsB,CAAC,UAAU,KAAK,CAAC,sBAAsB,CAAC;qBAC7D,KAAK,CAAC,gBAAgB,CAAC;kBAC1B,KAAK,CAAC,sBAAsB,CAAC;aAClC,KAAK,CAAC,oBAAoB,CAAC;;;mCAGL,KAAK,CAAC,YAAY,CAAC;2BAC3B,KAAK,CAAC,mBAAmB,CAAC,KAAK,KAAK,CAAC,YAAY,CAAC;iBAC5D,KAAK,CAAC,cAAc,CAAC;;;;kBAIpB,KAAK,CAAC,sBAAsB,CAAC;aAClC,KAAK,CAAC,qBAAqB,CAAC;;;;mBAItB,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;;;uBAGjB,KAAK,CAAC,YAAY,CAAC;sBACpB,KAAK,CAAC,YAAY,CAAC;eAC1B,KAAK,CAAC,WAAW,CAAC;cACnB,KAAK,CAAC,sBAAsB,CAAC,UAAU,KAAK,CAAC,sBAAsB,CAAC;qBAC7D,KAAK,CAAC,gBAAgB,CAAC;kBAC1B,KAAK,CAAC,uBAAuB,CAAC;aACnC,KAAK,CAAC,sBAAsB,CAAC;;;;oBAItB,KAAK,CAAC,qBAAqB,CAAC;;;;kBAI9B,KAAK,CAAC,yBAAyB,CAAC;aACrC,KAAK,CAAC,YAAY,CAAC;;CAE/B,CAAC"}

package/dist/carousel/carousel.template.d.ts

@@ -0,0 +1,8 @@
+import type { OddkinCarousel } from './carousel.js';
+/**
+ * Anatomy: `part="base"` with the `slides` live region (one `slide` group per element child, each
+ * holding a slot the element assigns that child to; only the shown one is not `hidden`) and the
+ * `controls` row: `previous`, the `position` text, the `picker` of `pick` buttons, and `next`.
+ */
+export declare const carouselTemplate: (carousel: OddkinCarousel) => import("@oddkin/core/template").TemplateResult;
+//# sourceMappingURL=carousel.template.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"carousel.template.d.ts","sourceRoot":"","sources":["../../src/carousel/carousel.template.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAEpD;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,aAAc,cAAc,mDAmExD,CAAC"}