@vielzeug/refine 1.1.1

package/dist/content/carousel/carousel.d.ts

@@ -0,0 +1,110 @@
+import type { ThemeColor } from '../../types';
+import '../../content/icon/icon';
+import '../../feedback/progress/progress';
+import './carousel-slide';
+export { CAROUSEL_SLIDE_TAG } from './carousel-slide';
+export type CarouselOrientation = 'horizontal' | 'vertical';
+export type CarouselVariant = 'default' | 'fade' | 'filmstrip' | 'gallery' | 'marquee';
+export type OreCarouselEvents = {
+    /** Fired when the active slide changes. */
+    change: {
+        index: number;
+    };
+};
+export type OreCarouselProps = {
+    /**
+     * Whether to advance slides automatically. Defaults to `false`.
+     * Opt in explicitly — autoplay on by default is a WCAG 2.1 SC 2.2.2 violation for many use cases.
+     */
+    autoplay?: boolean;
+    /** Interval in milliseconds between automatic slide advances. Defaults to `5000`. */
+    'autoplay-interval'?: number;
+    /** Theme color passed to the prev/next navigation buttons. */
+    color?: ThemeColor;
+    /** Accessible label for the carousel region. */
+    label?: string;
+    /**
+     * Whether the carousel loops from the last slide back to the first. Defaults to `true`.
+     *
+     * > **Note for `marquee` variant:** `loop="false"` runs the scroll animation once then stops,
+     * > rather than controlling navigation wrap-around (marquee navigation always loops).
+     * > If you intend to stop wrapping navigation in another variant, use `loop` there as expected.
+     */
+    loop?: boolean;
+    /**
+     * Duration in seconds for one full marquee loop cycle. Defaults to `10`.
+     * Shorter values = faster scroll; longer values = slower scroll.
+     */
+    'marquee-duration'?: number;
+    /** Carousel orientation. Defaults to `'horizontal'`. */
+    orientation?: CarouselOrientation;
+    /** Show next/prev navigation buttons. Defaults to `true`. */
+    'show-controls'?: boolean;
+    /** Show dot/indicator navigation. Defaults to `true`. */
+    'show-indicators'?: boolean;
+    /** Index of the currently active slide (zero-based). Defaults to `0`. */
+    'slide-index'?: number;
+    /**
+     * Layout variant.
+     * - `'default'`   — slides translate in/out (default)
+     * - `'fade'`      — slides crossfade; no movement
+     * - `'filmstrip'` — all slides visible side-by-side; active expands
+     * - `'gallery'`   — active slide fills the majority; adjacent slides show as thumbnails
+     * - `'marquee'`   — continuous auto-scroll ticker; `loop` controls whether it repeats
+     */
+    variant?: CarouselVariant;
+};
+/**
+ * An accessible, keyboard-navigable carousel / slideshow with optional
+ * autoplay, swipe support, and indicator dots.
+ *
+ * Place `<ore-carousel-slide>` elements as direct children.
+ *
+ * @element ore-carousel
+ * @element ore-carousel-slide - Child element for individual slides
+ *
+ * @attr {string}  color             - Theme color for navigation buttons: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'
+ * @attr {boolean} autoplay          - Advance slides automatically (default false)
+ * @attr {number}  autoplay-interval - Milliseconds between automatic advances (default 5000)
+ * @attr {string}  label             - Accessible label for the carousel region
+ * @attr {boolean} loop              - Loop from last slide to first (default true); in marquee mode: repeat vs run-once
+ * @attr {string}  orientation       - 'horizontal' (default) | 'vertical'
+ * @attr {string}  variant           - 'default' | 'fade' | 'filmstrip' | 'gallery' | 'marquee'
+ * @attr {boolean} show-controls     - Show prev/next buttons (default true)
+ * @attr {boolean} show-indicators   - Show indicator dots (default true)
+ * @attr {number}  slide-index       - Active slide index (zero-based, default 0)
+ * @attr {number}  marquee-duration  - Loop cycle duration in seconds for marquee variant (default 10)
+ *
+ * @fires change - Fires when the active slide changes. detail: { index: number }
+ *
+ * @slot - Place `<ore-carousel-slide>` elements here
+ *
+ * @cssprop --carousel-bg                  - Slide area background
+ * @cssprop --carousel-radius              - Border radius of the carousel
+ * @cssprop --carousel-dot-bg              - Inactive indicator color (default: var(--color-contrast-300))
+ * @cssprop --carousel-dot-active-bg       - Active indicator / fill color (default: var(--color-contrast-700))
+ * @cssprop --carousel-transition-duration - Slide transition duration (default 0.35s; 0s under prefers-reduced-motion). Also controls marquee seek animation duration.
+ * @cssprop --carousel-min-height          - Minimum height when no explicit height is set (default 240px)
+ * @cssprop --carousel-filmstrip-inactive  - Width (horizontal) or height (vertical) of inactive slides in filmstrip mode
+ * @cssprop --carousel-filmstrip-gap       - Gap between slides in filmstrip mode
+ * @cssprop --carousel-gallery-thumbnail   - Width (horizontal) or height (vertical) of thumbnail slides in gallery mode (default var(--size-24))
+ * @cssprop --carousel-gallery-gap         - Gap between slides in gallery mode (default var(--size-2))
+ * @cssprop --carousel-marquee-gap         - Gap between slides in marquee mode (default var(--size-4))
+ *
+ * @part track      - The scrolling slide track element
+ * @part controls   - The prev/next button container
+ * @part indicators - The indicator dots container
+ * @part prev-btn   - The previous-slide button
+ * @part next-btn   - The next-slide button
+ *
+ * @example
+ * ```html
+ * <ore-carousel label="Product highlights" loop>
+ *   <ore-carousel-slide>Slide 1</ore-carousel-slide>
+ *   <ore-carousel-slide>Slide 2</ore-carousel-slide>
+ *   <ore-carousel-slide>Slide 3</ore-carousel-slide>
+ * </ore-carousel>
+ * ```
+ */
+export declare const CAROUSEL_TAG: "ore-carousel";
+//# sourceMappingURL=carousel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"carousel.d.ts","sourceRoot":"","sources":["../../../src/content/carousel/carousel.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAG9C,OAAO,yBAAyB,CAAC;AACjC,OAAO,kCAAkC,CAAC;AAG1C,OAAO,kBAAkB,CAAC;AAE1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAItD,MAAM,MAAM,mBAAmB,GAAG,YAAY,GAAG,UAAU,CAAC;AAC5D,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,MAAM,GAAG,WAAW,GAAG,SAAS,GAAG,SAAS,CAAC;AAEvF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,2CAA2C;IAC3C,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qFAAqF;IACrF,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,8DAA8D;IAC9D,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,gDAAgD;IAChD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,wDAAwD;IACxD,WAAW,CAAC,EAAE,mBAAmB,CAAC;IAClC,6DAA6D;IAC7D,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,yDAAyD;IACzD,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,yEAAyE;IACzE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC;CAC3B,CAAC;AASF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmDG;AACH,eAAO,MAAM,YAAY,EAAG,cAAuB,CAAC"}

package/dist/content/carousel/index.d.ts

@@ -0,0 +1,3 @@
+export { CAROUSEL_SLIDE_TAG } from './carousel-slide';
+export { CAROUSEL_TAG, type OreCarouselEvents, type OreCarouselProps, type CarouselOrientation, type CarouselVariant, } from './carousel';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/content/carousel/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EACL,YAAY,EACZ,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,EACrB,KAAK,mBAAmB,EACxB,KAAK,eAAe,GACrB,MAAM,YAAY,CAAC"}

package/dist/content/code-window/code-window.css?inline.cjs

@@ -0,0 +1,2 @@
+var e=`@layer refine.base{:host{--_bg:var(--code-window-bg,var(--color-canvas));--_header-bg:var(--code-window-header-bg,var(--color-contrast-100));--_border-color:var(--code-window-border-color,var(--color-contrast-300));--_radius:var(--code-window-radius,var(--rounded-lg));--_shadow:var(--code-window-shadow,var(--shadow-sm));--_body-padding:var(--code-window-body-padding,var(--size-5) var(--size-6));display:block}.window{background:var(--_bg);border:var(--border) solid var(--_border-color);border-radius:var(--_radius);box-shadow:var(--_shadow);transition:border-color var(--transition-normal), box-shadow var(--transition-normal);overflow:hidden}.header{gap:var(--size-1-5);padding:var(--size-3) var(--size-5);background:var(--_header-bg);border-bottom:var(--border) solid var(--_border-color);transition:background var(--transition-normal);align-items:center;display:flex;overflow:hidden}.lang{padding:2px var(--size-1-5);font-family:var(--font-mono);font-size:var(--text-2xs);font-weight:var(--font-semibold);color:var(--color-primary);letter-spacing:.03em;background:var(--color-primary-backdrop);border:var(--border) solid #a18fe233;border-radius:var(--rounded-sm);flex-shrink:0}@supports (color:lab(0% 0 0)){.lang{border:var(--border) solid lab(63.6951% 20.4189 -39.9919/.2)}}.filename{text-overflow:ellipsis;min-width:0;font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-color-secondary);white-space:nowrap;overflow:hidden}.filename:not(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){margin-left:var(--size-2)}.filename:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){margin-right:var(--size-2)}.dots{gap:var(--size-1-5);flex-shrink:0;align-items:center;display:flex}.dots:not(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){border-right:var(--border) solid var(--_border-color);margin-right:var(--size-1-5);padding-right:var(--size-3)}.dots:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){border-left:var(--border) solid var(--_border-color);margin-left:var(--size-1-5);padding-left:var(--size-3)}.dots span{width:var(--size-3);height:var(--size-3);border-radius:var(--rounded-full);display:block}.dots span:first-child{background:lab(57.6104% 56.6725 33.4484)}.dots span:nth-child(2){background:lab(67.409% 21.2366 110.235)}.dots span:nth-child(3){background:lab(58.0445% -50.6808 43.5643)}.title{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-color-secondary);letter-spacing:.02em}.header-spacer{flex:1}::slotted([slot=header-end]){flex-shrink:0}.body{padding:var(--_body-padding);overflow-x:auto}}`;exports.default=e;
+//# sourceMappingURL=code-window.css?inline.cjs.map

package/dist/content/code-window/code-window.css?inline.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-window.css?inline.cjs","names":[],"sources":["../../../src/content/code-window/code-window.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_bg: var(--code-window-bg, var(--color-canvas));\n    --_header-bg: var(--code-window-header-bg, var(--color-contrast-100));\n    --_border-color: var(--code-window-border-color, var(--color-contrast-300));\n    --_radius: var(--code-window-radius, var(--rounded-lg));\n    --_shadow: var(--code-window-shadow, var(--shadow-sm));\n    --_body-padding: var(--code-window-body-padding, var(--size-5) var(--size-6));\n\n    display: block;\n  }\n\n  .window {\n    overflow: hidden;\n    background: var(--_bg);\n    border: var(--border) solid var(--_border-color);\n    border-radius: var(--_radius);\n    box-shadow: var(--_shadow);\n    transition:\n      border-color var(--transition-normal),\n      box-shadow var(--transition-normal);\n  }\n\n  .header {\n    display: flex;\n    gap: var(--size-1-5);\n    align-items: center;\n    padding: var(--size-3) var(--size-5);\n    overflow: hidden;\n    background: var(--_header-bg);\n    border-bottom: var(--border) solid var(--_border-color);\n    transition: background var(--transition-normal);\n  }\n\n  /* ── code variant ─────────────────────────────────────────── */\n\n  .lang {\n    flex-shrink: 0;\n    padding: 2px var(--size-1-5);\n    font-family: var(--font-mono);\n    font-size: var(--text-2xs);\n    font-weight: var(--font-semibold);\n    color: var(--color-primary);\n    letter-spacing: 0.03em;\n    background: var(--color-primary-backdrop);\n    border: var(--border) solid oklch(70% 0.12 293deg / 20%);\n    border-radius: var(--rounded-sm);\n  }\n\n  .filename {\n    min-width: 0;\n    margin-inline-start: var(--size-2);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-family: var(--font-mono);\n    font-size: var(--text-xs);\n    color: var(--text-color-secondary);\n    white-space: nowrap;\n  }\n\n  /* ── chat variant ─────────────────────────────────────────── */\n\n  .dots {\n    display: flex;\n    flex-shrink: 0;\n    gap: var(--size-1-5);\n    align-items: center;\n    padding-inline-end: var(--size-3);\n    margin-inline-end: var(--size-1-5);\n    border-inline-end: var(--border) solid var(--_border-color);\n  }\n\n  /* Authentic macOS traffic-light palette — muted so they don't fight the content */\n  .dots span {\n    display: block;\n    width: var(--size-3);\n    height: var(--size-3);\n    border-radius: var(--rounded-full);\n  }\n\n  .dots span:nth-child(1) {\n    background: oklch(65% 0.18 25deg);\n  }\n\n  .dots span:nth-child(2) {\n    background: oklch(72% 0.18 80deg);\n  }\n\n  .dots span:nth-child(3) {\n    background: oklch(62% 0.18 145deg);\n  }\n\n  .title {\n    font-family: var(--font-mono);\n    font-size: var(--text-xs);\n    color: var(--text-color-secondary);\n    letter-spacing: 0.02em;\n  }\n\n  /* ── header-end spacer ────────────────────────────────────── */\n\n  .header-spacer {\n    flex: 1;\n  }\n\n  ::slotted([slot='header-end']) {\n    flex-shrink: 0;\n  }\n\n  /* ── body ─────────────────────────────────────────────────── */\n\n  .body {\n    padding: var(--_body-padding);\n    overflow-x: auto;\n  }\n}\n"],"mappings":""}

package/dist/content/code-window/code-window.css?inline.js

@@ -0,0 +1,6 @@
+//#region src/content/code-window/code-window.css?inline
+var e = "@layer refine.base{:host{--_bg:var(--code-window-bg,var(--color-canvas));--_header-bg:var(--code-window-header-bg,var(--color-contrast-100));--_border-color:var(--code-window-border-color,var(--color-contrast-300));--_radius:var(--code-window-radius,var(--rounded-lg));--_shadow:var(--code-window-shadow,var(--shadow-sm));--_body-padding:var(--code-window-body-padding,var(--size-5) var(--size-6));display:block}.window{background:var(--_bg);border:var(--border) solid var(--_border-color);border-radius:var(--_radius);box-shadow:var(--_shadow);transition:border-color var(--transition-normal), box-shadow var(--transition-normal);overflow:hidden}.header{gap:var(--size-1-5);padding:var(--size-3) var(--size-5);background:var(--_header-bg);border-bottom:var(--border) solid var(--_border-color);transition:background var(--transition-normal);align-items:center;display:flex;overflow:hidden}.lang{padding:2px var(--size-1-5);font-family:var(--font-mono);font-size:var(--text-2xs);font-weight:var(--font-semibold);color:var(--color-primary);letter-spacing:.03em;background:var(--color-primary-backdrop);border:var(--border) solid #a18fe233;border-radius:var(--rounded-sm);flex-shrink:0}@supports (color:lab(0% 0 0)){.lang{border:var(--border) solid lab(63.6951% 20.4189 -39.9919/.2)}}.filename{text-overflow:ellipsis;min-width:0;font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-color-secondary);white-space:nowrap;overflow:hidden}.filename:not(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){margin-left:var(--size-2)}.filename:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){margin-right:var(--size-2)}.dots{gap:var(--size-1-5);flex-shrink:0;align-items:center;display:flex}.dots:not(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){border-right:var(--border) solid var(--_border-color);margin-right:var(--size-1-5);padding-right:var(--size-3)}.dots:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){border-left:var(--border) solid var(--_border-color);margin-left:var(--size-1-5);padding-left:var(--size-3)}.dots span{width:var(--size-3);height:var(--size-3);border-radius:var(--rounded-full);display:block}.dots span:first-child{background:lab(57.6104% 56.6725 33.4484)}.dots span:nth-child(2){background:lab(67.409% 21.2366 110.235)}.dots span:nth-child(3){background:lab(58.0445% -50.6808 43.5643)}.title{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-color-secondary);letter-spacing:.02em}.header-spacer{flex:1}::slotted([slot=header-end]){flex-shrink:0}.body{padding:var(--_body-padding);overflow-x:auto}}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=code-window.css?inline.js.map

package/dist/content/code-window/code-window.css?inline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-window.css?inline.js","names":[],"sources":["../../../src/content/code-window/code-window.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_bg: var(--code-window-bg, var(--color-canvas));\n    --_header-bg: var(--code-window-header-bg, var(--color-contrast-100));\n    --_border-color: var(--code-window-border-color, var(--color-contrast-300));\n    --_radius: var(--code-window-radius, var(--rounded-lg));\n    --_shadow: var(--code-window-shadow, var(--shadow-sm));\n    --_body-padding: var(--code-window-body-padding, var(--size-5) var(--size-6));\n\n    display: block;\n  }\n\n  .window {\n    overflow: hidden;\n    background: var(--_bg);\n    border: var(--border) solid var(--_border-color);\n    border-radius: var(--_radius);\n    box-shadow: var(--_shadow);\n    transition:\n      border-color var(--transition-normal),\n      box-shadow var(--transition-normal);\n  }\n\n  .header {\n    display: flex;\n    gap: var(--size-1-5);\n    align-items: center;\n    padding: var(--size-3) var(--size-5);\n    overflow: hidden;\n    background: var(--_header-bg);\n    border-bottom: var(--border) solid var(--_border-color);\n    transition: background var(--transition-normal);\n  }\n\n  /* ── code variant ─────────────────────────────────────────── */\n\n  .lang {\n    flex-shrink: 0;\n    padding: 2px var(--size-1-5);\n    font-family: var(--font-mono);\n    font-size: var(--text-2xs);\n    font-weight: var(--font-semibold);\n    color: var(--color-primary);\n    letter-spacing: 0.03em;\n    background: var(--color-primary-backdrop);\n    border: var(--border) solid oklch(70% 0.12 293deg / 20%);\n    border-radius: var(--rounded-sm);\n  }\n\n  .filename {\n    min-width: 0;\n    margin-inline-start: var(--size-2);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-family: var(--font-mono);\n    font-size: var(--text-xs);\n    color: var(--text-color-secondary);\n    white-space: nowrap;\n  }\n\n  /* ── chat variant ─────────────────────────────────────────── */\n\n  .dots {\n    display: flex;\n    flex-shrink: 0;\n    gap: var(--size-1-5);\n    align-items: center;\n    padding-inline-end: var(--size-3);\n    margin-inline-end: var(--size-1-5);\n    border-inline-end: var(--border) solid var(--_border-color);\n  }\n\n  /* Authentic macOS traffic-light palette — muted so they don't fight the content */\n  .dots span {\n    display: block;\n    width: var(--size-3);\n    height: var(--size-3);\n    border-radius: var(--rounded-full);\n  }\n\n  .dots span:nth-child(1) {\n    background: oklch(65% 0.18 25deg);\n  }\n\n  .dots span:nth-child(2) {\n    background: oklch(72% 0.18 80deg);\n  }\n\n  .dots span:nth-child(3) {\n    background: oklch(62% 0.18 145deg);\n  }\n\n  .title {\n    font-family: var(--font-mono);\n    font-size: var(--text-xs);\n    color: var(--text-color-secondary);\n    letter-spacing: 0.02em;\n  }\n\n  /* ── header-end spacer ────────────────────────────────────── */\n\n  .header-spacer {\n    flex: 1;\n  }\n\n  ::slotted([slot='header-end']) {\n    flex-shrink: 0;\n  }\n\n  /* ── body ─────────────────────────────────────────────────── */\n\n  .body {\n    padding: var(--_body-padding);\n    overflow-x: auto;\n  }\n}\n"],"mappings":""}

package/dist/content/code-window/code-window.d.ts

@@ -0,0 +1,61 @@
+/** `ore-code-window` variant */
+export type CodeWindowVariant = 'code' | 'chat';
+/** `ore-code-window` component properties */
+export type OreCodeWindowProps = {
+    /** Filename label shown after the language badge (`variant="code"` only) */
+    filename?: string;
+    /** Language badge text, e.g. `"ts"`, `"sh"` (`variant="code"` only) */
+    lang?: string;
+    /** Title string shown beside the traffic-light dots (`variant="chat"` only) */
+    title?: string;
+    /**
+     * `"code"` (default) — header shows a language badge + filename.
+     * `"chat"` — header shows traffic-light dots + a title.
+     */
+    variant?: CodeWindowVariant;
+};
+/**
+ * A styled window chrome for code blocks and AI/MCP conversation flows.
+ *
+ * Two variants:
+ * - `variant="code"` (default) — language badge + optional filename header.
+ * - `variant="chat"` — traffic-light dots + title header.
+ *
+ * @element ore-code-window
+ *
+ * @attr {'code'|'chat'} variant - Window style variant
+ * @attr {string} lang - Language badge label (variant="code" only)
+ * @attr {string} filename - Filename shown next to the badge (variant="code" only)
+ * @attr {string} title - Label beside the dots (variant="chat" only)
+ *
+ * @slot - Main body content (code, conversation turns, or any markup)
+ * @slot header-end - Optional content appended to the trailing edge of the header
+ *
+ * @cssprop --code-window-bg - Window background color
+ * @cssprop --code-window-header-bg - Header background color
+ * @cssprop --code-window-border-color - Border color
+ * @cssprop --code-window-radius - Border radius
+ * @cssprop --code-window-shadow - Box shadow
+ * @cssprop --code-window-body-padding - Body slot padding
+ *
+ * @part window - The root window element
+ * @part header - The header bar
+ * @part lang - The language badge (`variant="code"`)
+ * @part filename - The filename label (`variant="code"`)
+ * @part dots - The traffic-light dot container (`variant="chat"`)
+ * @part title - The title label (`variant="chat"`)
+ * @part body - The body container wrapping the default slot
+ *
+ * @example
+ * ```html
+ * <ore-code-window lang="ts" filename="app.ts">
+ *   <pre>const x = 1;</pre>
+ * </ore-code-window>
+ *
+ * <ore-code-window variant="chat" title="MCP tool call">
+ *   <!-- conversation turns go here -->
+ * </ore-code-window>
+ * ```
+ */
+export declare const CODE_WINDOW_TAG: "ore-code-window";
+//# sourceMappingURL=code-window.d.ts.map

package/dist/content/code-window/code-window.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-window.d.ts","sourceRoot":"","sources":["../../../src/content/code-window/code-window.ts"],"names":[],"mappings":"AAMA,gCAAgC;AAChC,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,MAAM,CAAC;AAEhD,6CAA6C;AAC7C,MAAM,MAAM,kBAAkB,GAAG;IAC/B,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,uEAAuE;IACvE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,+EAA+E;IAC/E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC;CAC7B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,eAAO,MAAM,eAAe,EAAG,iBAA0B,CAAC"}

package/dist/content/copy-command/copy-command.css?inline.cjs

@@ -0,0 +1,2 @@
+var e=`@layer refine.base{:host{--_bg:var(--copy-command-bg,var(--color-contrast-100));--_color:var(--copy-command-color,var(--text-color-body));--_border-color:var(--copy-command-border-color,var(--color-contrast-300));--_radius:var(--copy-command-radius,var(--rounded-md));--_padding:var(--copy-command-padding,var(--size-2) var(--size-3));--_font-size:var(--copy-command-font-size,var(--text-sm));--_icon-color:var(--copy-command-icon-color,var(--text-color-secondary));--_hover-bg:var(--copy-command-hover-bg,var(--color-contrast-200));display:inline-block}:host([hidden]){display:none}:host([rounded=none]){--_radius:var(--rounded-none,0)}:host([rounded=sm]){--_radius:var(--rounded-sm)}:host([rounded=md]){--_radius:var(--rounded-md)}:host([rounded=lg]){--_radius:var(--rounded-lg)}:host([rounded=xl]){--_radius:var(--rounded-xl)}:host([rounded="2xl"]){--_radius:var(--rounded-2xl)}:host([rounded="3xl"]){--_radius:var(--rounded-3xl)}:host([rounded=full]){--_radius:var(--rounded-full)}:host([size=sm]){--_padding:var(--copy-command-padding,var(--size-1) var(--size-2));--_font-size:var(--copy-command-font-size,var(--text-xs))}:host([size=lg]){--_padding:var(--copy-command-padding,var(--size-2-5) var(--size-4));--_font-size:var(--copy-command-font-size,var(--text-base))}:host([variant=bordered]){--_bg:var(--copy-command-bg,transparent);--_border-color:var(--copy-command-border-color,var(--color-contrast-400))}:host([variant=ghost]){--_bg:var(--copy-command-bg,transparent);--_border-color:var(--copy-command-border-color,transparent);--_hover-bg:var(--copy-command-hover-bg,var(--color-contrast-100))}.wrapper{background:var(--_bg);border:var(--border) solid var(--_border-color);border-radius:var(--_radius);transition:border-color var(--transition-normal), background var(--transition-normal);align-items:stretch;display:inline-flex;overflow:hidden}.command{gap:var(--size-2);padding:var(--_padding);font-family:var(--font-mono);font-size:var(--_font-size);color:var(--_color);text-align:start;cursor:pointer;transition:background var(--transition-normal);background:0 0;border:none;flex:1;align-items:center;display:inline-flex}.command:hover{background:var(--_hover-bg)}.command:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px;border-radius:calc(var(--_radius) - 1px)}.command-text{text-overflow:ellipsis;font-family:inherit;font-size:inherit;color:inherit;white-space:nowrap;background:0 0;flex:1;overflow:hidden}.copy-icon{color:var(--_icon-color);transition:color var(--transition-normal);flex-shrink:0;align-items:center;display:inline-flex}.icon-copied{color:var(--color-success,#44a53b)}@supports (color:lab(0% 0 0)){.icon-copied{color:var(--color-success,lab(60.204% -45.248 44.171))}}.icon-failed{color:var(--color-danger,#ed4042)}@supports (color:lab(0% 0 0)){.icon-failed{color:var(--color-danger,lab(54.9593% 66.408 40.8869))}}.suffix{align-items:stretch;display:flex}.suffix:not(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){border-left:var(--border) solid var(--_border-color)}.suffix:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){border-right:var(--border) solid var(--_border-color)}.suffix[hidden]{display:none}::slotted([slot=suffix]){align-items:center;display:flex}}`;exports.default=e;
+//# sourceMappingURL=copy-command.css?inline.cjs.map

package/dist/content/copy-command/copy-command.css?inline.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"copy-command.css?inline.cjs","names":[],"sources":["../../../src/content/copy-command/copy-command.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_bg: var(--copy-command-bg, var(--color-contrast-100));\n    --_color: var(--copy-command-color, var(--text-color-body));\n    --_border-color: var(--copy-command-border-color, var(--color-contrast-300));\n    --_radius: var(--copy-command-radius, var(--rounded-md));\n    --_padding: var(--copy-command-padding, var(--size-2) var(--size-3));\n    --_font-size: var(--copy-command-font-size, var(--text-sm));\n    --_icon-color: var(--copy-command-icon-color, var(--text-color-secondary));\n    --_hover-bg: var(--copy-command-hover-bg, var(--color-contrast-200));\n\n    display: inline-block;\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  /* ── rounded attribute → CSS variable ───────────────────── */\n\n  :host([rounded='none']) {\n    --_radius: var(--rounded-none, 0);\n  }\n\n  :host([rounded='sm']) {\n    --_radius: var(--rounded-sm);\n  }\n\n  :host([rounded='md']) {\n    --_radius: var(--rounded-md);\n  }\n\n  :host([rounded='lg']) {\n    --_radius: var(--rounded-lg);\n  }\n\n  :host([rounded='xl']) {\n    --_radius: var(--rounded-xl);\n  }\n\n  :host([rounded='2xl']) {\n    --_radius: var(--rounded-2xl);\n  }\n\n  :host([rounded='3xl']) {\n    --_radius: var(--rounded-3xl);\n  }\n\n  :host([rounded='full']) {\n    --_radius: var(--rounded-full);\n  }\n\n  /* ── size variants ───────────────────────────────────────── */\n\n  :host([size='sm']) {\n    --_padding: var(--copy-command-padding, var(--size-1) var(--size-2));\n    --_font-size: var(--copy-command-font-size, var(--text-xs));\n  }\n\n  :host([size='lg']) {\n    --_padding: var(--copy-command-padding, var(--size-2-5) var(--size-4));\n    --_font-size: var(--copy-command-font-size, var(--text-base));\n  }\n\n  /* ── visual variants ─────────────────────────────────────── */\n\n  :host([variant='bordered']) {\n    --_bg: var(--copy-command-bg, transparent);\n    --_border-color: var(--copy-command-border-color, var(--color-contrast-400));\n  }\n\n  :host([variant='ghost']) {\n    --_bg: var(--copy-command-bg, transparent);\n    --_border-color: var(--copy-command-border-color, transparent);\n    --_hover-bg: var(--copy-command-hover-bg, var(--color-contrast-100));\n  }\n\n  /* ── layout ──────────────────────────────────────────────── */\n\n  .wrapper {\n    display: inline-flex;\n    align-items: stretch;\n    overflow: hidden;\n    background: var(--_bg);\n    border: var(--border) solid var(--_border-color);\n    border-radius: var(--_radius);\n    transition:\n      border-color var(--transition-normal),\n      background var(--transition-normal);\n  }\n\n  /* ── command button ──────────────────────────────────────── */\n\n  .command {\n    display: inline-flex;\n    flex: 1;\n    gap: var(--size-2);\n    align-items: center;\n    padding: var(--_padding);\n    font-family: var(--font-mono);\n    font-size: var(--_font-size);\n    color: var(--_color);\n    text-align: start;\n    cursor: pointer;\n    background: transparent;\n    border: none;\n    transition: background var(--transition-normal);\n  }\n\n  .command:hover {\n    background: var(--_hover-bg);\n  }\n\n  .command:focus-visible {\n    outline: 2px solid var(--color-primary);\n    outline-offset: -2px;\n    border-radius: calc(var(--_radius) - 1px);\n  }\n\n  /* ── command text ────────────────────────────────────────── */\n\n  .command-text {\n    flex: 1;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-family: inherit;\n    font-size: inherit;\n    color: inherit;\n    white-space: nowrap;\n    background: transparent;\n  }\n\n  /* ── copy icon ───────────────────────────────────────────── */\n\n  .copy-icon {\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    color: var(--_icon-color);\n    transition: color var(--transition-normal);\n  }\n\n  .icon-copied {\n    color: var(--color-success, oklch(64% 0.17 142deg));\n  }\n\n  .icon-failed {\n    color: var(--color-danger, oklch(63% 0.21 25deg));\n  }\n\n  /* ── suffix slot ─────────────────────────────────────────── */\n\n  .suffix {\n    display: flex;\n    align-items: stretch;\n    border-inline-start: var(--border) solid var(--_border-color);\n  }\n\n  .suffix[hidden] {\n    display: none;\n  }\n\n  ::slotted([slot='suffix']) {\n    display: flex;\n    align-items: center;\n  }\n\n  /* .sr-only is provided by the shared srOnlyMixin (see styles: [...] in copy-command.ts) */\n}\n"],"mappings":""}

package/dist/content/copy-command/copy-command.css?inline.js

@@ -0,0 +1,6 @@
+//#region src/content/copy-command/copy-command.css?inline
+var e = "@layer refine.base{:host{--_bg:var(--copy-command-bg,var(--color-contrast-100));--_color:var(--copy-command-color,var(--text-color-body));--_border-color:var(--copy-command-border-color,var(--color-contrast-300));--_radius:var(--copy-command-radius,var(--rounded-md));--_padding:var(--copy-command-padding,var(--size-2) var(--size-3));--_font-size:var(--copy-command-font-size,var(--text-sm));--_icon-color:var(--copy-command-icon-color,var(--text-color-secondary));--_hover-bg:var(--copy-command-hover-bg,var(--color-contrast-200));display:inline-block}:host([hidden]){display:none}:host([rounded=none]){--_radius:var(--rounded-none,0)}:host([rounded=sm]){--_radius:var(--rounded-sm)}:host([rounded=md]){--_radius:var(--rounded-md)}:host([rounded=lg]){--_radius:var(--rounded-lg)}:host([rounded=xl]){--_radius:var(--rounded-xl)}:host([rounded=\"2xl\"]){--_radius:var(--rounded-2xl)}:host([rounded=\"3xl\"]){--_radius:var(--rounded-3xl)}:host([rounded=full]){--_radius:var(--rounded-full)}:host([size=sm]){--_padding:var(--copy-command-padding,var(--size-1) var(--size-2));--_font-size:var(--copy-command-font-size,var(--text-xs))}:host([size=lg]){--_padding:var(--copy-command-padding,var(--size-2-5) var(--size-4));--_font-size:var(--copy-command-font-size,var(--text-base))}:host([variant=bordered]){--_bg:var(--copy-command-bg,transparent);--_border-color:var(--copy-command-border-color,var(--color-contrast-400))}:host([variant=ghost]){--_bg:var(--copy-command-bg,transparent);--_border-color:var(--copy-command-border-color,transparent);--_hover-bg:var(--copy-command-hover-bg,var(--color-contrast-100))}.wrapper{background:var(--_bg);border:var(--border) solid var(--_border-color);border-radius:var(--_radius);transition:border-color var(--transition-normal), background var(--transition-normal);align-items:stretch;display:inline-flex;overflow:hidden}.command{gap:var(--size-2);padding:var(--_padding);font-family:var(--font-mono);font-size:var(--_font-size);color:var(--_color);text-align:start;cursor:pointer;transition:background var(--transition-normal);background:0 0;border:none;flex:1;align-items:center;display:inline-flex}.command:hover{background:var(--_hover-bg)}.command:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px;border-radius:calc(var(--_radius) - 1px)}.command-text{text-overflow:ellipsis;font-family:inherit;font-size:inherit;color:inherit;white-space:nowrap;background:0 0;flex:1;overflow:hidden}.copy-icon{color:var(--_icon-color);transition:color var(--transition-normal);flex-shrink:0;align-items:center;display:inline-flex}.icon-copied{color:var(--color-success,#44a53b)}@supports (color:lab(0% 0 0)){.icon-copied{color:var(--color-success,lab(60.204% -45.248 44.171))}}.icon-failed{color:var(--color-danger,#ed4042)}@supports (color:lab(0% 0 0)){.icon-failed{color:var(--color-danger,lab(54.9593% 66.408 40.8869))}}.suffix{align-items:stretch;display:flex}.suffix:not(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){border-left:var(--border) solid var(--_border-color)}.suffix:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){border-right:var(--border) solid var(--_border-color)}.suffix[hidden]{display:none}::slotted([slot=suffix]){align-items:center;display:flex}}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=copy-command.css?inline.js.map

package/dist/content/copy-command/copy-command.css?inline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"copy-command.css?inline.js","names":[],"sources":["../../../src/content/copy-command/copy-command.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_bg: var(--copy-command-bg, var(--color-contrast-100));\n    --_color: var(--copy-command-color, var(--text-color-body));\n    --_border-color: var(--copy-command-border-color, var(--color-contrast-300));\n    --_radius: var(--copy-command-radius, var(--rounded-md));\n    --_padding: var(--copy-command-padding, var(--size-2) var(--size-3));\n    --_font-size: var(--copy-command-font-size, var(--text-sm));\n    --_icon-color: var(--copy-command-icon-color, var(--text-color-secondary));\n    --_hover-bg: var(--copy-command-hover-bg, var(--color-contrast-200));\n\n    display: inline-block;\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  /* ── rounded attribute → CSS variable ───────────────────── */\n\n  :host([rounded='none']) {\n    --_radius: var(--rounded-none, 0);\n  }\n\n  :host([rounded='sm']) {\n    --_radius: var(--rounded-sm);\n  }\n\n  :host([rounded='md']) {\n    --_radius: var(--rounded-md);\n  }\n\n  :host([rounded='lg']) {\n    --_radius: var(--rounded-lg);\n  }\n\n  :host([rounded='xl']) {\n    --_radius: var(--rounded-xl);\n  }\n\n  :host([rounded='2xl']) {\n    --_radius: var(--rounded-2xl);\n  }\n\n  :host([rounded='3xl']) {\n    --_radius: var(--rounded-3xl);\n  }\n\n  :host([rounded='full']) {\n    --_radius: var(--rounded-full);\n  }\n\n  /* ── size variants ───────────────────────────────────────── */\n\n  :host([size='sm']) {\n    --_padding: var(--copy-command-padding, var(--size-1) var(--size-2));\n    --_font-size: var(--copy-command-font-size, var(--text-xs));\n  }\n\n  :host([size='lg']) {\n    --_padding: var(--copy-command-padding, var(--size-2-5) var(--size-4));\n    --_font-size: var(--copy-command-font-size, var(--text-base));\n  }\n\n  /* ── visual variants ─────────────────────────────────────── */\n\n  :host([variant='bordered']) {\n    --_bg: var(--copy-command-bg, transparent);\n    --_border-color: var(--copy-command-border-color, var(--color-contrast-400));\n  }\n\n  :host([variant='ghost']) {\n    --_bg: var(--copy-command-bg, transparent);\n    --_border-color: var(--copy-command-border-color, transparent);\n    --_hover-bg: var(--copy-command-hover-bg, var(--color-contrast-100));\n  }\n\n  /* ── layout ──────────────────────────────────────────────── */\n\n  .wrapper {\n    display: inline-flex;\n    align-items: stretch;\n    overflow: hidden;\n    background: var(--_bg);\n    border: var(--border) solid var(--_border-color);\n    border-radius: var(--_radius);\n    transition:\n      border-color var(--transition-normal),\n      background var(--transition-normal);\n  }\n\n  /* ── command button ──────────────────────────────────────── */\n\n  .command {\n    display: inline-flex;\n    flex: 1;\n    gap: var(--size-2);\n    align-items: center;\n    padding: var(--_padding);\n    font-family: var(--font-mono);\n    font-size: var(--_font-size);\n    color: var(--_color);\n    text-align: start;\n    cursor: pointer;\n    background: transparent;\n    border: none;\n    transition: background var(--transition-normal);\n  }\n\n  .command:hover {\n    background: var(--_hover-bg);\n  }\n\n  .command:focus-visible {\n    outline: 2px solid var(--color-primary);\n    outline-offset: -2px;\n    border-radius: calc(var(--_radius) - 1px);\n  }\n\n  /* ── command text ────────────────────────────────────────── */\n\n  .command-text {\n    flex: 1;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-family: inherit;\n    font-size: inherit;\n    color: inherit;\n    white-space: nowrap;\n    background: transparent;\n  }\n\n  /* ── copy icon ───────────────────────────────────────────── */\n\n  .copy-icon {\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    color: var(--_icon-color);\n    transition: color var(--transition-normal);\n  }\n\n  .icon-copied {\n    color: var(--color-success, oklch(64% 0.17 142deg));\n  }\n\n  .icon-failed {\n    color: var(--color-danger, oklch(63% 0.21 25deg));\n  }\n\n  /* ── suffix slot ─────────────────────────────────────────── */\n\n  .suffix {\n    display: flex;\n    align-items: stretch;\n    border-inline-start: var(--border) solid var(--_border-color);\n  }\n\n  .suffix[hidden] {\n    display: none;\n  }\n\n  ::slotted([slot='suffix']) {\n    display: flex;\n    align-items: center;\n  }\n\n  /* .sr-only is provided by the shared srOnlyMixin (see styles: [...] in copy-command.ts) */\n}\n"],"mappings":""}

package/dist/content/copy-command/copy-command.d.ts

@@ -0,0 +1,66 @@
+import type { ComponentSize, RoundedSize } from '../../types';
+import '../icon/icon';
+/** Copy command component properties */
+export type OreCopyCommandProps = {
+    /** Border radius size */
+    rounded?: RoundedSize;
+    /** Component size */
+    size?: ComponentSize;
+    /** The command string to display and copy to clipboard */
+    value?: string;
+    /** Visual style variant */
+    variant?: 'flat' | 'bordered' | 'ghost';
+};
+/** Copy command component events */
+export type OreCopyCommandEvents = {
+    /** Emitted when the command is successfully copied to the clipboard */
+    copy: {
+        value: string;
+    };
+};
+/**
+ * A styled, copy-to-clipboard command display component.
+ * Shows a command string in a monospace code block with a copy button.
+ * Clicking the component copies the value to the clipboard, shows a transient
+ * check-mark confirmation, and emits a `copy` event.
+ *
+ * @element ore-copy-command
+ *
+ * @attr {string} value - The command string to display and copy
+ * @attr {string} size - Component size: 'sm' | 'md' | 'lg'
+ * @attr {string} variant - Visual style: 'flat' | 'bordered' | 'ghost'
+ * @attr {string} rounded - Border radius: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'
+ *
+ * @fires copy - Emitted on successful clipboard write. detail: { value: string }
+ *
+ * @slot suffix - Optional controls appended after the copy button (e.g. a cycle button)
+ *
+ * @cssprop --copy-command-bg - Background color of the command block
+ * @cssprop --copy-command-color - Text color of the command string
+ * @cssprop --copy-command-border-color - Border color
+ * @cssprop --copy-command-radius - Border radius (overrides the `rounded` attribute)
+ * @cssprop --copy-command-padding - Inner padding of the command button
+ * @cssprop --copy-command-font-size - Font size of the command string
+ * @cssprop --copy-command-icon-color - Color of the copy/check icon
+ * @cssprop --copy-command-hover-bg - Background on hover
+ *
+ * @part wrapper - Outer flex container
+ * @part command - The copy button element
+ * @part command-text - The `<code>` element displaying the command string
+ * @part copy-icon - The icon wrapper span
+ * @part suffix - Suffix slot container
+ *
+ * @example
+ * ```html
+ * <ore-copy-command value="npm install @vielzeug/ripple"></ore-copy-command>
+ *
+ * <ore-copy-command value="npx -y @vielzeug/codex" size="sm" variant="bordered"></ore-copy-command>
+ *
+ * <!-- With a suffix slot (e.g. a cycle button) -->
+ * <ore-copy-command value="npm install @vielzeug/ripple">
+ *   <button slot="suffix" type="button" aria-label="Next package">›</button>
+ * </ore-copy-command>
+ * ```
+ */
+export declare const COPY_COMMAND_TAG: "ore-copy-command";
+//# sourceMappingURL=copy-command.d.ts.map

package/dist/content/copy-command/copy-command.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"copy-command.d.ts","sourceRoot":"","sources":["../../../src/content/copy-command/copy-command.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAG9D,OAAO,cAAc,CAAC;AAGtB,wCAAwC;AACxC,MAAM,MAAM,mBAAmB,GAAG;IAChC,yBAAyB;IACzB,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,qBAAqB;IACrB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,0DAA0D;IAC1D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2BAA2B;IAC3B,OAAO,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,OAAO,CAAC;CACzC,CAAC;AAEF,oCAAoC;AACpC,MAAM,MAAM,oBAAoB,GAAG;IACjC,uEAAuE;IACvE,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;CACzB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AACH,eAAO,MAAM,gBAAgB,EAAG,kBAA2B,CAAC"}

package/dist/content/icon/icon.css?inline.cjs

@@ -0,0 +1,2 @@
+var e=`@layer refine.base{:host{vertical-align:middle;color:inherit;line-height:0;display:inline-flex}:host([hidden]){display:none}svg{width:100%;height:100%;display:block}}:host{width:var(--ore-icon-size,var(--_size-px));height:var(--ore-icon-size,var(--_size-px))}`;exports.default=e;
+//# sourceMappingURL=icon.css?inline.cjs.map

package/dist/content/icon/icon.css?inline.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon.css?inline.cjs","names":[],"sources":["../../../src/content/icon/icon.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    display: inline-flex;\n    line-height: 0;\n    vertical-align: middle;\n    color: inherit;\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  svg {\n    display: block;\n    width: 100%;\n    height: 100%;\n  }\n}\n\n/* Unlayered: always wins over any @layer rule, including refine.overrides */\n:host {\n  width: var(--ore-icon-size, var(--_size-px));\n  height: var(--ore-icon-size, var(--_size-px));\n}\n"],"mappings":""}

package/dist/content/icon/icon.css?inline.js

@@ -0,0 +1,6 @@
+//#region src/content/icon/icon.css?inline
+var e = "@layer refine.base{:host{vertical-align:middle;color:inherit;line-height:0;display:inline-flex}:host([hidden]){display:none}svg{width:100%;height:100%;display:block}}:host{width:var(--ore-icon-size,var(--_size-px));height:var(--ore-icon-size,var(--_size-px))}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=icon.css?inline.js.map

package/dist/content/icon/icon.css?inline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon.css?inline.js","names":[],"sources":["../../../src/content/icon/icon.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    display: inline-flex;\n    line-height: 0;\n    vertical-align: middle;\n    color: inherit;\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  svg {\n    display: block;\n    width: 100%;\n    height: 100%;\n  }\n}\n\n/* Unlayered: always wins over any @layer rule, including refine.overrides */\n:host {\n  width: var(--ore-icon-size, var(--_size-px));\n  height: var(--ore-icon-size, var(--_size-px));\n}\n"],"mappings":""}

package/dist/content/icon/icon.d.ts

@@ -0,0 +1,45 @@
+export type IconNode = Array<[string, Record<string, string | number | undefined>]>;
+/**
+ * Register additional icons (or override existing ones) by name.
+ * Keys may be kebab-case or PascalCase — both are accepted by `ore-icon`.
+ */
+export declare function registerIcons(icons: Record<string, IconNode>): void;
+/** Icon component properties */
+export type OreIconProps = {
+    /** Keep stroke width visually consistent when icon size changes */
+    absoluteStrokeWidth?: boolean;
+    /** Accessible text label. Decorative icons should omit this. */
+    label?: string;
+    /** Lucide icon name, e.g. `search` or `chevron-right` */
+    name?: string;
+    /** Icon width/height in px by default. Accepts CSS lengths. */
+    size?: number | string;
+    /** Render as a filled/solid shape instead of a stroked outline */
+    solid?: boolean;
+    /** SVG stroke width */
+    strokeWidth?: number;
+};
+/**
+ * Icon wrapper for consistent Lucide rendering across Block.
+ *
+ * @element ore-icon
+ *
+ * @attr {string} name - Lucide icon name, e.g. `search` or `chevron-right`
+ * @attr {number|string} size - Width/height (default: 16)
+ * @attr {number} stroke-width - SVG stroke width (default: 2)
+ * @attr {boolean} absolute-stroke-width - Keep stroke width visually stable across icon sizes
+ * @attr {boolean} solid - Render as filled shape instead of stroked outline
+ * @attr {string} label - Accessible label; when omitted the icon is decorative
+ *
+ * @csspart svg - Internal SVG element
+ *
+ * @example
+ * ```html
+ * <ore-icon name="search"></ore-icon>
+ * <ore-icon name="chevron-right" size="18"></ore-icon>
+ * <ore-icon name="trash-2" label="Delete"></ore-icon>
+ * <ore-icon name="star" solid></ore-icon>
+ * ```
+ */
+export declare const ICON_TAG: "ore-icon";
+//# sourceMappingURL=icon.d.ts.map

package/dist/content/icon/icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../../src/content/icon/icon.ts"],"names":[],"mappings":"AAQA,MAAM,MAAM,QAAQ,GAAG,KAAK,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC;AA0CpF;;;GAGG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAC,GAAG,IAAI,CAInE;AA2BD,gCAAgC;AAChC,MAAM,MAAM,YAAY,GAAG;IACzB,mEAAmE;IACnE,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,gEAAgE;IAChE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yDAAyD;IACzD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,+DAA+D;IAC/D,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,kEAAkE;IAClE,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,QAAQ,EAAG,UAAmB,CAAC"}

package/dist/content/index.d.ts

@@ -0,0 +1,23 @@
+export { CODE_WINDOW_TAG } from './code-window/code-window';
+export type { CodeWindowVariant, OreCodeWindowProps } from './code-window/code-window';
+export { COPY_COMMAND_TAG } from './copy-command/copy-command';
+export type { OreCopyCommandEvents, OreCopyCommandProps } from './copy-command/copy-command';
+export { CAROUSEL_SLIDE_TAG, CAROUSEL_TAG } from './carousel/carousel';
+export type { OreCarouselEvents, OreCarouselProps, CarouselOrientation, CarouselVariant } from './carousel/carousel';
+export { AVATAR_GROUP_TAG, AVATAR_TAG } from './avatar/avatar';
+export type { AvatarStatus, OreAvatarGroupProps, OreAvatarProps } from './avatar/avatar';
+export { BREADCRUMB_ITEM_TAG, BREADCRUMB_TAG } from './breadcrumb/breadcrumb';
+export type { OreBreadcrumbItemProps, OreBreadcrumbProps } from './breadcrumb/breadcrumb';
+export { CARD_TAG } from './card/card';
+export type { OreCardEvents, OreCardProps } from './card/card';
+export { ICON_TAG, registerIcons } from './icon/icon';
+export type { OreIconProps, IconNode } from './icon/icon';
+export { PAGINATION_TAG } from './pagination/pagination';
+export type { OrePaginationEvents, OrePaginationProps } from './pagination/pagination';
+export { SEPARATOR_TAG } from './separator/separator';
+export type { OreSeparatorProps } from './separator/separator';
+export { TABLE_TAG } from './table/table';
+export type { OreTableProps } from './table/table';
+export { TEXT_TAG } from './text/text';
+export type { OreTextProps } from './text/text';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/content/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAC5D,YAAY,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AACvF,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAC/D,YAAY,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAC7F,OAAO,EAAE,kBAAkB,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACvE,YAAY,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACrH,OAAO,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC/D,YAAY,EAAE,YAAY,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACzF,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAC9E,YAAY,EAAE,sBAAsB,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAC1F,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,YAAY,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC/D,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AACtD,YAAY,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAC1D,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACzD,YAAY,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AACvF,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,YAAY,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAC/D,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,YAAY,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,YAAY,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC"}

package/dist/content/pagination/pagination.css?inline.cjs

@@ -0,0 +1,2 @@
+var e=`@layer refine.base{:host{gap:var(--size-1);align-items:center;display:flex}.pagination{gap:var(--pagination-gap,var(--size-1));align-items:center;margin:0;padding:0;list-style:none;display:flex}li{display:contents}button{all:unset;box-sizing:border-box;min-width:var(--pagination-item-size,var(--size-9));height:var(--pagination-item-size,var(--size-9));min-height:var(--_touch-target);padding:0 var(--size-2);font-size:var(--_font-size,var(--text-sm));font-weight:var(--font-medium);color:var(--color-contrast-700);cursor:pointer;-webkit-user-select:none;user-select:none;border:var(--border) solid transparent;border-radius:var(--pagination-radius,var(--rounded-lg));transition:background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);justify-content:center;align-items:center;display:inline-flex}:host(:not([variant])) button,:host([variant=ghost]) button{color:var(--color-contrast-700);background:0 0;border-width:0;border-color:#0000}:host(:not([variant])) button:hover:not(:disabled,[aria-current=page]),:host([variant=ghost]) button:hover:not(:disabled,[aria-current=page]){background:var(--_theme-backdrop)}:host([variant=solid]) button{color:var(--_theme-contrast);background:var(--_theme-base);border-color:var(--_theme-base)}:host([variant=solid]) button:hover:not(:disabled,[aria-current=page]){background:var(--_theme-focus)}:host([variant=flat]) button{color:var(--_theme-base);background:color-mix(in oklch, var(--_theme-backdrop) 8%, var(--color-contrast-100));border-color:color-mix(in oklch, var(--_theme-focus) 20%, transparent);box-shadow:var(--inset-shadow-2xs)}:host([variant=flat]) button:hover:not(:disabled,[aria-current=page]){color:var(--_theme-contrast);background:var(--_theme-focus)}:host([variant=bordered]) button{color:var(--_theme-base);background:var(--_theme-backdrop);border-color:var(--_theme-border);box-shadow:var(--inset-shadow-xs)}:host([variant=bordered]) button:hover:not(:disabled,[aria-current=page]){color:var(--_theme-contrast);background:var(--_theme-focus);border-color:var(--_theme-focus)}:host([variant=outline]) button{color:var(--_theme-base);border-color:var(--_theme-base);background:0 0}:host([variant=outline]) button:hover:not(:disabled,[aria-current=page]){background:var(--_theme-backdrop);border-color:var(--_theme-focus)}:host([variant=text]) button{color:var(--_theme-base);background:0 0;border-width:0;border-color:#0000}:host([variant=text]) button:hover:not(:disabled,[aria-current=page]){color:var(--_theme-focus);background:0 0}:host([variant=frost]) button{color:var(--_theme-content);background:color-mix(in oklch, var(--_theme-backdrop) 45%, transparent);border-color:color-mix(in oklch, var(--_theme-border) 45%, transparent);-webkit-backdrop-filter:blur(var(--blur-xl)) saturate(200%);backdrop-filter:blur(var(--blur-xl)) saturate(200%)}:host([variant=frost]) button:hover:not(:disabled,[aria-current=page]){background:color-mix(in oklch, var(--_theme-backdrop) 65%, transparent);border-color:color-mix(in oklch, var(--_theme-focus) 55%, transparent)}:host([variant=glass]) button{color:var(--_theme-content);background:color-mix(in oklch, var(--color-canvas) 70%, transparent);border-color:color-mix(in oklch, var(--_theme-border) 40%, transparent);-webkit-backdrop-filter:blur(var(--blur-md)) saturate(140%);backdrop-filter:blur(var(--blur-md)) saturate(140%)}:host([variant=glass]) button:hover:not(:disabled,[aria-current=page]){background:color-mix(in oklch, var(--color-canvas) 55%, transparent);border-color:color-mix(in oklch, var(--_theme-border) 45%, transparent)}button:hover:not(:disabled,[aria-current=page]){background:var(--color-contrast-100)}button:focus-visible{outline:var(--border-2) solid var(--_theme-base,var(--color-contrast-500));outline-offset:var(--border-2)}button[aria-current=page]{font-weight:var(--font-bold);color:var(--_theme-contrast,var(--color-canvas));cursor:default;background:var(--_theme-base,var(--color-contrast-800));border-color:var(--_theme-base,var(--color-contrast-800))}:host([variant=ghost]) button[aria-current=page],:host(:not([variant])) button[aria-current=page]{color:var(--_theme-contrast);background:var(--_theme-focus);border-color:var(--_theme-focus)}:host([variant=solid]) button[aria-current=page]{background:var(--_theme-focus);border-color:var(--_theme-focus)}:host([variant=flat]) button[aria-current=page]{color:var(--_theme-contrast);background:var(--_theme-base);border-color:var(--_theme-base)}:host([variant=bordered]) button[aria-current=page]{color:var(--_theme-contrast);background:var(--_theme-focus);border-color:var(--_theme-focus)}:host([variant=outline]) button[aria-current=page]{color:var(--_theme-contrast);background:var(--_theme-base);border-color:var(--_theme-base)}:host([variant=text]) button[aria-current=page]{color:var(--_theme-focus);text-underline-offset:4px;text-decoration-line:underline;text-decoration-thickness:2px}:host([variant=frost]) button[aria-current=page]{color:var(--_theme-contrast);background:color-mix(in oklch, var(--_theme-base) 70%, transparent);border-color:var(--_theme-base)}:host([variant=glass]) button[aria-current=page]{color:var(--_theme-contrast);background:color-mix(in oklch, var(--color-canvas) 90%, transparent);border-color:var(--_theme-base)}button:disabled{cursor:not-allowed;opacity:.4}.ellipsis{min-width:var(--pagination-item-size,var(--size-9));height:var(--pagination-item-size,var(--size-9));font-size:var(--_font-size,var(--text-sm));color:var(--color-contrast-400);cursor:default;justify-content:center;align-items:center;display:inline-flex}}@layer refine.utilities{:host([size=sm]){--pagination-item-size:var(--size-7);--pagination-gap:var(--size-0_5);--_font-size:var(--text-xs)}:host([size=lg]){--pagination-item-size:var(--size-11);--_font-size:var(--text-base)}}`;exports.default=e;
+//# sourceMappingURL=pagination.css?inline.cjs.map

package/dist/content/pagination/pagination.css?inline.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.css?inline.cjs","names":[],"sources":["../../../src/content/pagination/pagination.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    display: flex;\n    gap: var(--size-1);\n    align-items: center;\n  }\n\n  .pagination {\n    display: flex;\n    gap: var(--pagination-gap, var(--size-1));\n    align-items: center;\n    padding: 0;\n    margin: 0;\n    list-style: none;\n  }\n\n  li {\n    display: contents;\n  }\n\n  button {\n    all: unset;\n    box-sizing: border-box;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    min-width: var(--pagination-item-size, var(--size-9));\n    height: var(--pagination-item-size, var(--size-9));\n    min-height: var(--_touch-target);\n    padding: 0 var(--size-2);\n    font-size: var(--_font-size, var(--text-sm));\n    font-weight: var(--font-medium);\n    color: var(--color-contrast-700);\n    cursor: pointer;\n    user-select: none;\n    border: var(--border) solid transparent;\n    border-radius: var(--pagination-radius, var(--rounded-lg));\n    transition:\n      background var(--transition-fast),\n      color var(--transition-fast),\n      border-color var(--transition-fast);\n  }\n\n  /* Default (ghost-like) behavior unless variant is specified */\n  :host(:not([variant])) button,\n  :host([variant='ghost']) button {\n    color: var(--color-contrast-700);\n    background: transparent;\n    border-color: transparent;\n    border-width: 0;\n  }\n\n  :host(:not([variant])) button:hover:not(:disabled, [aria-current='page']),\n  :host([variant='ghost']) button:hover:not(:disabled, [aria-current='page']) {\n    background: var(--_theme-backdrop);\n  }\n\n  :host([variant='solid']) button {\n    color: var(--_theme-contrast);\n    background: var(--_theme-base);\n    border-color: var(--_theme-base);\n  }\n\n  :host([variant='solid']) button:hover:not(:disabled, [aria-current='page']) {\n    background: var(--_theme-focus);\n  }\n\n  :host([variant='flat']) button {\n    color: var(--_theme-base);\n    background: color-mix(in oklch, var(--_theme-backdrop) 8%, var(--color-contrast-100));\n    border-color: color-mix(in oklch, var(--_theme-focus) 20%, transparent);\n    box-shadow: var(--inset-shadow-2xs);\n  }\n\n  :host([variant='flat']) button:hover:not(:disabled, [aria-current='page']) {\n    color: var(--_theme-contrast);\n    background: var(--_theme-focus);\n  }\n\n  :host([variant='bordered']) button {\n    color: var(--_theme-base);\n    background: var(--_theme-backdrop);\n    border-color: var(--_theme-border);\n    box-shadow: var(--inset-shadow-xs);\n  }\n\n  :host([variant='bordered']) button:hover:not(:disabled, [aria-current='page']) {\n    color: var(--_theme-contrast);\n    background: var(--_theme-focus);\n    border-color: var(--_theme-focus);\n  }\n\n  :host([variant='outline']) button {\n    color: var(--_theme-base);\n    background: transparent;\n    border-color: var(--_theme-base);\n  }\n\n  :host([variant='outline']) button:hover:not(:disabled, [aria-current='page']) {\n    background: var(--_theme-backdrop);\n    border-color: var(--_theme-focus);\n  }\n\n  :host([variant='text']) button {\n    color: var(--_theme-base);\n    background: transparent;\n    border-color: transparent;\n    border-width: 0;\n  }\n\n  :host([variant='text']) button:hover:not(:disabled, [aria-current='page']) {\n    color: var(--_theme-focus);\n    background: transparent;\n  }\n\n  :host([variant='frost']) button {\n    color: var(--_theme-content);\n    background: color-mix(in oklch, var(--_theme-backdrop) 45%, transparent);\n    border-color: color-mix(in oklch, var(--_theme-border) 45%, transparent);\n    backdrop-filter: blur(var(--blur-xl)) saturate(200%);\n  }\n\n  :host([variant='frost']) button:hover:not(:disabled, [aria-current='page']) {\n    background: color-mix(in oklch, var(--_theme-backdrop) 65%, transparent);\n    border-color: color-mix(in oklch, var(--_theme-focus) 55%, transparent);\n  }\n\n  :host([variant='glass']) button {\n    color: var(--_theme-content);\n    background: color-mix(in oklch, var(--color-canvas) 70%, transparent);\n    border-color: color-mix(in oklch, var(--_theme-border) 40%, transparent);\n    backdrop-filter: blur(var(--blur-md)) saturate(140%);\n  }\n\n  :host([variant='glass']) button:hover:not(:disabled, [aria-current='page']) {\n    background: color-mix(in oklch, var(--color-canvas) 55%, transparent);\n    border-color: color-mix(in oklch, var(--_theme-border) 45%, transparent);\n  }\n\n  button:hover:not(:disabled, [aria-current='page']) {\n    background: var(--color-contrast-100);\n  }\n\n  button:focus-visible {\n    outline: var(--border-2) solid var(--_theme-base, var(--color-contrast-500));\n    outline-offset: var(--border-2);\n  }\n\n  /* Selected page styling - applies to all variants */\n  button[aria-current='page'] {\n    font-weight: var(--font-bold);\n    color: var(--_theme-contrast, var(--color-canvas));\n    cursor: default;\n    background: var(--_theme-base, var(--color-contrast-800));\n    border-color: var(--_theme-base, var(--color-contrast-800));\n  }\n\n  :host([variant='ghost']) button[aria-current='page'],\n  :host(:not([variant])) button[aria-current='page'] {\n    color: var(--_theme-contrast);\n    background: var(--_theme-focus);\n    border-color: var(--_theme-focus);\n  }\n\n  :host([variant='solid']) button[aria-current='page'] {\n    background: var(--_theme-focus);\n    border-color: var(--_theme-focus);\n  }\n\n  :host([variant='flat']) button[aria-current='page'] {\n    color: var(--_theme-contrast);\n    background: var(--_theme-base);\n    border-color: var(--_theme-base);\n  }\n\n  :host([variant='bordered']) button[aria-current='page'] {\n    color: var(--_theme-contrast);\n    background: var(--_theme-focus);\n    border-color: var(--_theme-focus);\n  }\n\n  :host([variant='outline']) button[aria-current='page'] {\n    color: var(--_theme-contrast);\n    background: var(--_theme-base);\n    border-color: var(--_theme-base);\n  }\n\n  :host([variant='text']) button[aria-current='page'] {\n    color: var(--_theme-focus);\n    text-decoration-line: underline;\n    text-decoration-thickness: 2px;\n    text-underline-offset: 4px;\n  }\n\n  :host([variant='frost']) button[aria-current='page'] {\n    color: var(--_theme-contrast);\n    background: color-mix(in oklch, var(--_theme-base) 70%, transparent);\n    border-color: var(--_theme-base);\n  }\n\n  :host([variant='glass']) button[aria-current='page'] {\n    color: var(--_theme-contrast);\n    background: color-mix(in oklch, var(--color-canvas) 90%, transparent);\n    border-color: var(--_theme-base);\n  }\n\n  button:disabled {\n    cursor: not-allowed;\n    opacity: 0.4;\n  }\n\n  .ellipsis {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    min-width: var(--pagination-item-size, var(--size-9));\n    height: var(--pagination-item-size, var(--size-9));\n    font-size: var(--_font-size, var(--text-sm));\n    color: var(--color-contrast-400);\n    cursor: default;\n  }\n}\n\n@layer refine.utilities {\n  :host([size='sm']) {\n    --pagination-item-size: var(--size-7);\n    --pagination-gap: var(--size-0_5);\n    --_font-size: var(--text-xs);\n  }\n\n  :host([size='lg']) {\n    --pagination-item-size: var(--size-11);\n    --_font-size: var(--text-base);\n  }\n}\n"],"mappings":""}

package/dist/content/pagination/pagination.css?inline.js

@@ -0,0 +1,6 @@
+//#region src/content/pagination/pagination.css?inline
+var e = "@layer refine.base{:host{gap:var(--size-1);align-items:center;display:flex}.pagination{gap:var(--pagination-gap,var(--size-1));align-items:center;margin:0;padding:0;list-style:none;display:flex}li{display:contents}button{all:unset;box-sizing:border-box;min-width:var(--pagination-item-size,var(--size-9));height:var(--pagination-item-size,var(--size-9));min-height:var(--_touch-target);padding:0 var(--size-2);font-size:var(--_font-size,var(--text-sm));font-weight:var(--font-medium);color:var(--color-contrast-700);cursor:pointer;-webkit-user-select:none;user-select:none;border:var(--border) solid transparent;border-radius:var(--pagination-radius,var(--rounded-lg));transition:background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);justify-content:center;align-items:center;display:inline-flex}:host(:not([variant])) button,:host([variant=ghost]) button{color:var(--color-contrast-700);background:0 0;border-width:0;border-color:#0000}:host(:not([variant])) button:hover:not(:disabled,[aria-current=page]),:host([variant=ghost]) button:hover:not(:disabled,[aria-current=page]){background:var(--_theme-backdrop)}:host([variant=solid]) button{color:var(--_theme-contrast);background:var(--_theme-base);border-color:var(--_theme-base)}:host([variant=solid]) button:hover:not(:disabled,[aria-current=page]){background:var(--_theme-focus)}:host([variant=flat]) button{color:var(--_theme-base);background:color-mix(in oklch, var(--_theme-backdrop) 8%, var(--color-contrast-100));border-color:color-mix(in oklch, var(--_theme-focus) 20%, transparent);box-shadow:var(--inset-shadow-2xs)}:host([variant=flat]) button:hover:not(:disabled,[aria-current=page]){color:var(--_theme-contrast);background:var(--_theme-focus)}:host([variant=bordered]) button{color:var(--_theme-base);background:var(--_theme-backdrop);border-color:var(--_theme-border);box-shadow:var(--inset-shadow-xs)}:host([variant=bordered]) button:hover:not(:disabled,[aria-current=page]){color:var(--_theme-contrast);background:var(--_theme-focus);border-color:var(--_theme-focus)}:host([variant=outline]) button{color:var(--_theme-base);border-color:var(--_theme-base);background:0 0}:host([variant=outline]) button:hover:not(:disabled,[aria-current=page]){background:var(--_theme-backdrop);border-color:var(--_theme-focus)}:host([variant=text]) button{color:var(--_theme-base);background:0 0;border-width:0;border-color:#0000}:host([variant=text]) button:hover:not(:disabled,[aria-current=page]){color:var(--_theme-focus);background:0 0}:host([variant=frost]) button{color:var(--_theme-content);background:color-mix(in oklch, var(--_theme-backdrop) 45%, transparent);border-color:color-mix(in oklch, var(--_theme-border) 45%, transparent);-webkit-backdrop-filter:blur(var(--blur-xl)) saturate(200%);backdrop-filter:blur(var(--blur-xl)) saturate(200%)}:host([variant=frost]) button:hover:not(:disabled,[aria-current=page]){background:color-mix(in oklch, var(--_theme-backdrop) 65%, transparent);border-color:color-mix(in oklch, var(--_theme-focus) 55%, transparent)}:host([variant=glass]) button{color:var(--_theme-content);background:color-mix(in oklch, var(--color-canvas) 70%, transparent);border-color:color-mix(in oklch, var(--_theme-border) 40%, transparent);-webkit-backdrop-filter:blur(var(--blur-md)) saturate(140%);backdrop-filter:blur(var(--blur-md)) saturate(140%)}:host([variant=glass]) button:hover:not(:disabled,[aria-current=page]){background:color-mix(in oklch, var(--color-canvas) 55%, transparent);border-color:color-mix(in oklch, var(--_theme-border) 45%, transparent)}button:hover:not(:disabled,[aria-current=page]){background:var(--color-contrast-100)}button:focus-visible{outline:var(--border-2) solid var(--_theme-base,var(--color-contrast-500));outline-offset:var(--border-2)}button[aria-current=page]{font-weight:var(--font-bold);color:var(--_theme-contrast,var(--color-canvas));cursor:default;background:var(--_theme-base,var(--color-contrast-800));border-color:var(--_theme-base,var(--color-contrast-800))}:host([variant=ghost]) button[aria-current=page],:host(:not([variant])) button[aria-current=page]{color:var(--_theme-contrast);background:var(--_theme-focus);border-color:var(--_theme-focus)}:host([variant=solid]) button[aria-current=page]{background:var(--_theme-focus);border-color:var(--_theme-focus)}:host([variant=flat]) button[aria-current=page]{color:var(--_theme-contrast);background:var(--_theme-base);border-color:var(--_theme-base)}:host([variant=bordered]) button[aria-current=page]{color:var(--_theme-contrast);background:var(--_theme-focus);border-color:var(--_theme-focus)}:host([variant=outline]) button[aria-current=page]{color:var(--_theme-contrast);background:var(--_theme-base);border-color:var(--_theme-base)}:host([variant=text]) button[aria-current=page]{color:var(--_theme-focus);text-underline-offset:4px;text-decoration-line:underline;text-decoration-thickness:2px}:host([variant=frost]) button[aria-current=page]{color:var(--_theme-contrast);background:color-mix(in oklch, var(--_theme-base) 70%, transparent);border-color:var(--_theme-base)}:host([variant=glass]) button[aria-current=page]{color:var(--_theme-contrast);background:color-mix(in oklch, var(--color-canvas) 90%, transparent);border-color:var(--_theme-base)}button:disabled{cursor:not-allowed;opacity:.4}.ellipsis{min-width:var(--pagination-item-size,var(--size-9));height:var(--pagination-item-size,var(--size-9));font-size:var(--_font-size,var(--text-sm));color:var(--color-contrast-400);cursor:default;justify-content:center;align-items:center;display:inline-flex}}@layer refine.utilities{:host([size=sm]){--pagination-item-size:var(--size-7);--pagination-gap:var(--size-0_5);--_font-size:var(--text-xs)}:host([size=lg]){--pagination-item-size:var(--size-11);--_font-size:var(--text-base)}}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=pagination.css?inline.js.map

package/dist/content/pagination/pagination.css?inline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.css?inline.js","names":[],"sources":["../../../src/content/pagination/pagination.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    display: flex;\n    gap: var(--size-1);\n    align-items: center;\n  }\n\n  .pagination {\n    display: flex;\n    gap: var(--pagination-gap, var(--size-1));\n    align-items: center;\n    padding: 0;\n    margin: 0;\n    list-style: none;\n  }\n\n  li {\n    display: contents;\n  }\n\n  button {\n    all: unset;\n    box-sizing: border-box;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    min-width: var(--pagination-item-size, var(--size-9));\n    height: var(--pagination-item-size, var(--size-9));\n    min-height: var(--_touch-target);\n    padding: 0 var(--size-2);\n    font-size: var(--_font-size, var(--text-sm));\n    font-weight: var(--font-medium);\n    color: var(--color-contrast-700);\n    cursor: pointer;\n    user-select: none;\n    border: var(--border) solid transparent;\n    border-radius: var(--pagination-radius, var(--rounded-lg));\n    transition:\n      background var(--transition-fast),\n      color var(--transition-fast),\n      border-color var(--transition-fast);\n  }\n\n  /* Default (ghost-like) behavior unless variant is specified */\n  :host(:not([variant])) button,\n  :host([variant='ghost']) button {\n    color: var(--color-contrast-700);\n    background: transparent;\n    border-color: transparent;\n    border-width: 0;\n  }\n\n  :host(:not([variant])) button:hover:not(:disabled, [aria-current='page']),\n  :host([variant='ghost']) button:hover:not(:disabled, [aria-current='page']) {\n    background: var(--_theme-backdrop);\n  }\n\n  :host([variant='solid']) button {\n    color: var(--_theme-contrast);\n    background: var(--_theme-base);\n    border-color: var(--_theme-base);\n  }\n\n  :host([variant='solid']) button:hover:not(:disabled, [aria-current='page']) {\n    background: var(--_theme-focus);\n  }\n\n  :host([variant='flat']) button {\n    color: var(--_theme-base);\n    background: color-mix(in oklch, var(--_theme-backdrop) 8%, var(--color-contrast-100));\n    border-color: color-mix(in oklch, var(--_theme-focus) 20%, transparent);\n    box-shadow: var(--inset-shadow-2xs);\n  }\n\n  :host([variant='flat']) button:hover:not(:disabled, [aria-current='page']) {\n    color: var(--_theme-contrast);\n    background: var(--_theme-focus);\n  }\n\n  :host([variant='bordered']) button {\n    color: var(--_theme-base);\n    background: var(--_theme-backdrop);\n    border-color: var(--_theme-border);\n    box-shadow: var(--inset-shadow-xs);\n  }\n\n  :host([variant='bordered']) button:hover:not(:disabled, [aria-current='page']) {\n    color: var(--_theme-contrast);\n    background: var(--_theme-focus);\n    border-color: var(--_theme-focus);\n  }\n\n  :host([variant='outline']) button {\n    color: var(--_theme-base);\n    background: transparent;\n    border-color: var(--_theme-base);\n  }\n\n  :host([variant='outline']) button:hover:not(:disabled, [aria-current='page']) {\n    background: var(--_theme-backdrop);\n    border-color: var(--_theme-focus);\n  }\n\n  :host([variant='text']) button {\n    color: var(--_theme-base);\n    background: transparent;\n    border-color: transparent;\n    border-width: 0;\n  }\n\n  :host([variant='text']) button:hover:not(:disabled, [aria-current='page']) {\n    color: var(--_theme-focus);\n    background: transparent;\n  }\n\n  :host([variant='frost']) button {\n    color: var(--_theme-content);\n    background: color-mix(in oklch, var(--_theme-backdrop) 45%, transparent);\n    border-color: color-mix(in oklch, var(--_theme-border) 45%, transparent);\n    backdrop-filter: blur(var(--blur-xl)) saturate(200%);\n  }\n\n  :host([variant='frost']) button:hover:not(:disabled, [aria-current='page']) {\n    background: color-mix(in oklch, var(--_theme-backdrop) 65%, transparent);\n    border-color: color-mix(in oklch, var(--_theme-focus) 55%, transparent);\n  }\n\n  :host([variant='glass']) button {\n    color: var(--_theme-content);\n    background: color-mix(in oklch, var(--color-canvas) 70%, transparent);\n    border-color: color-mix(in oklch, var(--_theme-border) 40%, transparent);\n    backdrop-filter: blur(var(--blur-md)) saturate(140%);\n  }\n\n  :host([variant='glass']) button:hover:not(:disabled, [aria-current='page']) {\n    background: color-mix(in oklch, var(--color-canvas) 55%, transparent);\n    border-color: color-mix(in oklch, var(--_theme-border) 45%, transparent);\n  }\n\n  button:hover:not(:disabled, [aria-current='page']) {\n    background: var(--color-contrast-100);\n  }\n\n  button:focus-visible {\n    outline: var(--border-2) solid var(--_theme-base, var(--color-contrast-500));\n    outline-offset: var(--border-2);\n  }\n\n  /* Selected page styling - applies to all variants */\n  button[aria-current='page'] {\n    font-weight: var(--font-bold);\n    color: var(--_theme-contrast, var(--color-canvas));\n    cursor: default;\n    background: var(--_theme-base, var(--color-contrast-800));\n    border-color: var(--_theme-base, var(--color-contrast-800));\n  }\n\n  :host([variant='ghost']) button[aria-current='page'],\n  :host(:not([variant])) button[aria-current='page'] {\n    color: var(--_theme-contrast);\n    background: var(--_theme-focus);\n    border-color: var(--_theme-focus);\n  }\n\n  :host([variant='solid']) button[aria-current='page'] {\n    background: var(--_theme-focus);\n    border-color: var(--_theme-focus);\n  }\n\n  :host([variant='flat']) button[aria-current='page'] {\n    color: var(--_theme-contrast);\n    background: var(--_theme-base);\n    border-color: var(--_theme-base);\n  }\n\n  :host([variant='bordered']) button[aria-current='page'] {\n    color: var(--_theme-contrast);\n    background: var(--_theme-focus);\n    border-color: var(--_theme-focus);\n  }\n\n  :host([variant='outline']) button[aria-current='page'] {\n    color: var(--_theme-contrast);\n    background: var(--_theme-base);\n    border-color: var(--_theme-base);\n  }\n\n  :host([variant='text']) button[aria-current='page'] {\n    color: var(--_theme-focus);\n    text-decoration-line: underline;\n    text-decoration-thickness: 2px;\n    text-underline-offset: 4px;\n  }\n\n  :host([variant='frost']) button[aria-current='page'] {\n    color: var(--_theme-contrast);\n    background: color-mix(in oklch, var(--_theme-base) 70%, transparent);\n    border-color: var(--_theme-base);\n  }\n\n  :host([variant='glass']) button[aria-current='page'] {\n    color: var(--_theme-contrast);\n    background: color-mix(in oklch, var(--color-canvas) 90%, transparent);\n    border-color: var(--_theme-base);\n  }\n\n  button:disabled {\n    cursor: not-allowed;\n    opacity: 0.4;\n  }\n\n  .ellipsis {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    min-width: var(--pagination-item-size, var(--size-9));\n    height: var(--pagination-item-size, var(--size-9));\n    font-size: var(--_font-size, var(--text-sm));\n    color: var(--color-contrast-400);\n    cursor: default;\n  }\n}\n\n@layer refine.utilities {\n  :host([size='sm']) {\n    --pagination-item-size: var(--size-7);\n    --pagination-gap: var(--size-0_5);\n    --_font-size: var(--text-xs);\n  }\n\n  :host([size='lg']) {\n    --pagination-item-size: var(--size-11);\n    --_font-size: var(--text-base);\n  }\n}\n"],"mappings":""}

package/dist/content/pagination/pagination.d.ts

@@ -0,0 +1,61 @@
+import '../icon/icon';
+import '../../inputs/button/button';
+import type { ComponentSize, ThemeColor, VisualVariant } from '../../types';
+export type OrePaginationEvents = {
+    change: {
+        page: number;
+    };
+};
+export type OrePaginationProps = {
+    color?: ThemeColor;
+    label?: string;
+    page?: number;
+    'show-first-last'?: boolean;
+    'show-prev-next'?: boolean;
+    siblings?: number;
+    size?: ComponentSize;
+    'total-pages'?: number;
+    variant?: VisualVariant;
+};
+/**
+ * Page-based navigation control.
+ *
+ * @element ore-pagination
+ *
+ * @attr {number} page - Current page (1-indexed, default: 1)
+ * @attr {number} total-pages - Total number of pages (required)
+ * @attr {number} siblings - Sibling pages around current (default: 1)
+ * @attr {boolean} show-first-last - Show first/last page buttons (default: false)
+ * @attr {boolean} show-prev-next - Show prev/next buttons (default: false)
+ * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'
+ * @attr {string} variant - Visual variant for nav buttons: 'solid' | 'flat' | 'bordered' | 'outline' | 'ghost' | 'text' | 'frost' (default: 'ghost')
+ * @attr {string} size - 'sm' | 'md' | 'lg'
+ * @attr {string} label - Accessible nav label (default: 'Pagination')
+ *
+ * @fires change - Emitted when the page changes, with { page: number }
+ *
+ * @cssprop --pagination-item-size - Width/height of each item
+ * @cssprop --pagination-gap - Gap between items
+ * @cssprop --pagination-radius - Border radius of items
+ *
+ * @part page-btn - Page button.
+ * @part nav - Navigation container.
+ * @part list - List container.
+ * @part first-btn - First page button.
+ * @part prev-btn - Previous page button.
+ * @part next-btn - Next page button.
+ * @part last-btn - Last page button.
+ * @example
+ * ```html
+ * <!-- Basic -->
+ * <ore-pagination page="3" total-pages="10" color="primary"></ore-pagination>
+ *
+ * <!-- With prev/next and first/last buttons -->
+ * <ore-pagination page="5" total-pages="20" show-prev-next show-first-last siblings="2"></ore-pagination>
+ *
+ * <!-- Compact size -->
+ * <ore-pagination page="1" total-pages="5" size="sm" variant="ghost"></ore-pagination>
+ * ```
+ */
+export declare const PAGINATION_TAG: "ore-pagination";
+//# sourceMappingURL=pagination.d.ts.map

package/dist/content/pagination/pagination.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.d.ts","sourceRoot":"","sources":["../../../src/content/pagination/pagination.ts"],"names":[],"mappings":"AAGA,OAAO,cAAc,CAAC;AACtB,OAAO,4BAA4B,CAAC;AACpC,OAAO,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAM5E,MAAM,MAAM,mBAAmB,GAAG;IAChC,MAAM,EAAE;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;CAC1B,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,OAAO,CAAC,EAAE,aAAa,CAAC;CACzB,CAAC;AAkCF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,eAAO,MAAM,cAAc,EAAG,gBAAyB,CAAC"}