@vielzeug/refine 1.1.1

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

@@ -0,0 +1,2 @@
+var e=`@layer refine.base{:host{--_color:var(--separator-color,var(--color-contrast-300));--_size:var(--separator-size,var(--border));--_spacing:var(--separator-spacing,0);display:block}.separator{all:unset;box-sizing:border-box;margin:var(--_spacing) 0;display:block}:host([orientation=horizontal]),:host(:not([orientation=vertical])){width:100%}:host([orientation=horizontal]) .separator,:host(:not([orientation=vertical])) .separator{border-top:var(--_size) solid var(--_color);width:100%}:host([orientation=vertical]){align-self:stretch;display:inline-block}:host([orientation=vertical]) .separator{height:100%}:host([orientation=vertical]) .separator: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(--_size) solid var(--_color)}:host([orientation=vertical]) .separator: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(--_size) solid var(--_color)}:host([color]){--_color:var(--_theme-base)}.separator-wrapper{gap:var(--size-3);align-items:center;display:flex}.separator-wrapper .separator{flex:1}:host([orientation=vertical]) .separator-wrapper{flex-direction:column;align-self:stretch;height:100%}:host([orientation=vertical]) .separator-wrapper .separator{border-top:none;flex:1;width:auto;height:auto}:host([orientation=vertical]) .separator-wrapper .separator: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(--_size) solid var(--_color)}:host([orientation=vertical]) .separator-wrapper .separator: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(--_size) solid var(--_color)}.separator-label{font-size:var(--text-xs);font-weight:var(--font-medium);color:var(--_color);white-space:nowrap}}`;exports.default=e;
+//# sourceMappingURL=separator.css?inline.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"separator.css?inline.cjs","names":[],"sources":["../../../src/content/separator/separator.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_color: var(--separator-color, var(--color-contrast-300));\n    --_size: var(--separator-size, var(--border));\n    --_spacing: var(--separator-spacing, 0);\n\n    display: block;\n  }\n\n  .separator {\n    all: unset;\n    box-sizing: border-box;\n    display: block;\n    margin: var(--_spacing) 0;\n  }\n\n  :host([orientation='horizontal']),\n  :host(:not([orientation='vertical'])) {\n    width: 100%;\n  }\n\n  :host([orientation='horizontal']) .separator,\n  :host(:not([orientation='vertical'])) .separator {\n    width: 100%;\n    border-top: var(--_size) solid var(--_color);\n  }\n\n  :host([orientation='vertical']) {\n    display: inline-block;\n    align-self: stretch;\n  }\n\n  :host([orientation='vertical']) .separator {\n    height: 100%;\n    border-inline-start: var(--_size) solid var(--_color);\n  }\n\n  :host([color]) {\n    --_color: var(--_theme-base);\n  }\n\n  /* Labelled separator */\n  .separator-wrapper {\n    display: flex;\n    gap: var(--size-3);\n    align-items: center;\n  }\n\n  .separator-wrapper .separator {\n    flex: 1;\n  }\n\n  :host([orientation='vertical']) .separator-wrapper {\n    flex-direction: column;\n    align-self: stretch;\n    height: 100%;\n  }\n\n  :host([orientation='vertical']) .separator-wrapper .separator {\n    flex: 1;\n    width: auto;\n    height: auto;\n    border-inline-start: var(--_size) solid var(--_color);\n    border-top: none;\n  }\n\n  .separator-label {\n    font-size: var(--text-xs);\n    font-weight: var(--font-medium);\n    color: var(--_color);\n    white-space: nowrap;\n  }\n}\n"],"mappings":""}

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

@@ -0,0 +1,6 @@
+//#region src/content/separator/separator.css?inline
+var e = "@layer refine.base{:host{--_color:var(--separator-color,var(--color-contrast-300));--_size:var(--separator-size,var(--border));--_spacing:var(--separator-spacing,0);display:block}.separator{all:unset;box-sizing:border-box;margin:var(--_spacing) 0;display:block}:host([orientation=horizontal]),:host(:not([orientation=vertical])){width:100%}:host([orientation=horizontal]) .separator,:host(:not([orientation=vertical])) .separator{border-top:var(--_size) solid var(--_color);width:100%}:host([orientation=vertical]){align-self:stretch;display:inline-block}:host([orientation=vertical]) .separator{height:100%}:host([orientation=vertical]) .separator: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(--_size) solid var(--_color)}:host([orientation=vertical]) .separator: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(--_size) solid var(--_color)}:host([color]){--_color:var(--_theme-base)}.separator-wrapper{gap:var(--size-3);align-items:center;display:flex}.separator-wrapper .separator{flex:1}:host([orientation=vertical]) .separator-wrapper{flex-direction:column;align-self:stretch;height:100%}:host([orientation=vertical]) .separator-wrapper .separator{border-top:none;flex:1;width:auto;height:auto}:host([orientation=vertical]) .separator-wrapper .separator: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(--_size) solid var(--_color)}:host([orientation=vertical]) .separator-wrapper .separator: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(--_size) solid var(--_color)}.separator-label{font-size:var(--text-xs);font-weight:var(--font-medium);color:var(--_color);white-space:nowrap}}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=separator.css?inline.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"separator.css?inline.js","names":[],"sources":["../../../src/content/separator/separator.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_color: var(--separator-color, var(--color-contrast-300));\n    --_size: var(--separator-size, var(--border));\n    --_spacing: var(--separator-spacing, 0);\n\n    display: block;\n  }\n\n  .separator {\n    all: unset;\n    box-sizing: border-box;\n    display: block;\n    margin: var(--_spacing) 0;\n  }\n\n  :host([orientation='horizontal']),\n  :host(:not([orientation='vertical'])) {\n    width: 100%;\n  }\n\n  :host([orientation='horizontal']) .separator,\n  :host(:not([orientation='vertical'])) .separator {\n    width: 100%;\n    border-top: var(--_size) solid var(--_color);\n  }\n\n  :host([orientation='vertical']) {\n    display: inline-block;\n    align-self: stretch;\n  }\n\n  :host([orientation='vertical']) .separator {\n    height: 100%;\n    border-inline-start: var(--_size) solid var(--_color);\n  }\n\n  :host([color]) {\n    --_color: var(--_theme-base);\n  }\n\n  /* Labelled separator */\n  .separator-wrapper {\n    display: flex;\n    gap: var(--size-3);\n    align-items: center;\n  }\n\n  .separator-wrapper .separator {\n    flex: 1;\n  }\n\n  :host([orientation='vertical']) .separator-wrapper {\n    flex-direction: column;\n    align-self: stretch;\n    height: 100%;\n  }\n\n  :host([orientation='vertical']) .separator-wrapper .separator {\n    flex: 1;\n    width: auto;\n    height: auto;\n    border-inline-start: var(--_size) solid var(--_color);\n    border-top: none;\n  }\n\n  .separator-label {\n    font-size: var(--text-xs);\n    font-weight: var(--font-medium);\n    color: var(--_color);\n    white-space: nowrap;\n  }\n}\n"],"mappings":""}

package/dist/content/separator/separator.d.ts

@@ -0,0 +1,38 @@
+import type { ThemeColor } from '../../types';
+/** Separator component properties */
+export type OreSeparatorProps = {
+    /** Theme color tint */
+    color?: ThemeColor;
+    /** Decorative only (default true) — set to false for semantic separators */
+    decorative?: boolean;
+    /** Optional label text centered on the separator */
+    label?: string;
+    /** Orientation of the separator */
+    orientation?: 'horizontal' | 'vertical';
+};
+/**
+ * A simple visual divider between sections of content.
+ *
+ * @element ore-separator
+ *
+ * @attr {string} orientation - 'horizontal' (default) | 'vertical'
+ * @attr {boolean} decorative - When true (default), aria-hidden is applied
+ * @attr {string} label - Optional centered label text
+ * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'
+ *
+ * @cssprop --separator-color - Line color
+ * @cssprop --separator-size - Line thickness
+ * @cssprop --separator-spacing - Vertical margin
+ *
+ * @part wrapper - Root wrapper container.
+ * @part separator - Separator element.
+ * @part label - Label element.
+ * @example
+ * ```html
+ * <ore-separator></ore-separator>
+ * <ore-separator label="or"></ore-separator>
+ * <ore-separator orientation="vertical"></ore-separator>
+ * ```
+ */
+export declare const SEPARATOR_TAG: "ore-separator";
+//# sourceMappingURL=separator.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"separator.d.ts","sourceRoot":"","sources":["../../../src/content/separator/separator.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAK9C,qCAAqC;AACrC,MAAM,MAAM,iBAAiB,GAAG;IAC9B,uBAAuB;IACvB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,4EAA4E;IAC5E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,oDAAoD;IACpD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mCAAmC;IACnC,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;CACzC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,aAAa,EAAG,eAAwB,CAAC"}

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

@@ -0,0 +1,2 @@
+var e=`@layer refine.base{:host{box-shadow:var(--table-shadow,none);border:none;border-radius:0}caption{padding:var(--size-3);font-size:var(--text-xs);font-weight:var(--font-semibold);color:var(--color-contrast-500);text-align:start;text-transform:uppercase;letter-spacing:.05em;caption-side:top;background:var(--_header-bg)}thead,tfoot{background:var(--_header-bg)}thead{border-bottom:var(--border) solid var(--_border-color)}tfoot{border-top:var(--border) solid var(--_border-color)}tbody tr{border-bottom:var(--border) solid var(--_border-color);transition:background var(--transition-fast)}tbody tr:hover{background:var(--_row-hover-bg)}th,td{padding:var(--_cell-padding-y) var(--_cell-padding-x);font-size:var(--_font-size);vertical-align:middle;color:var(--color-contrast-800);text-align:start;font-weight:400}thead th,thead td,tfoot th,tfoot td{font-size:var(--text-xs);font-weight:var(--font-semibold);color:var(--color-contrast-500);text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;-webkit-user-select:none;user-select:none}}@layer refine.variants{:host([bordered]) th: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)),:host([bordered]) td: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)}:host([bordered]) th: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)}:host([bordered]) td: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)}:host([bordered]) th:last-child: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)),:host([bordered]) td:last-child: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:none}:host([bordered]) th:last-child: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:none}:host([bordered]) td:last-child: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:none}:host([striped]) tbody tr:nth-child(2n){background:var(--_stripe-bg)}:host([sticky]) thead{z-index:2;background:var(--table-sticky-header-bg,color-mix(in oklch, var(--_header-bg) 94%, transparent));box-shadow:inset 0 calc(var(--border) * -1) 0 var(--_border-color);-webkit-backdrop-filter:blur(var(--table-sticky-blur,var(--blur-md))) saturate(140%);backdrop-filter:blur(var(--table-sticky-blur,var(--blur-md))) saturate(140%);position:sticky;top:0}}`;exports.default=e;
+//# sourceMappingURL=table.css?inline.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"table.css?inline.cjs","names":[],"sources":["../../../src/content/table/table.css?inline"],"sourcesContent":["/* ore-table — shadow DOM (proxy/mirror).\n *\n * Shadow tree (managed by table.ts):\n *   :host                  display:block   — token host (tableBaseMixin)\n *   └─ .scroll-container   overflow:auto   — sticky / max-height context\n *       └─ table           display:table   — native table semantics\n *           ├─ caption                     — optional caption bar\n *           ├─ thead                       — rows built from ore-tr[head]\n *           ├─ tbody                       — rows built from plain ore-tr\n *           └─ tfoot                       — rows built from ore-tr[foot]\n *               └─ tr > th / td            — mirrored from ore-th / ore-td\n *\n * Light DOM (consumer):\n *   <ore-tr head><ore-th>…</ore-th></ore-tr>\n *   <ore-tr><ore-td>…</ore-td></ore-tr>\n *   <ore-tr foot><ore-td>…</ore-td></ore-tr>\n *\n * tableBaseMixin('table') handles: :host tokens, .scroll-container,\n * table width/collapse, loading state, size variants, fullwidth, bordered,\n * and sticky scroll-container activation.\n * This file handles: caption, section backgrounds, body tr/th/td, and variants.\n * No ::slotted() needed — the shadow tree owns all rendered th/td elements.\n */\n\n@layer refine.base {\n  :host {\n    border: none;\n    border-radius: 0;\n    box-shadow: var(--table-shadow, none);\n  }\n\n  /* ── Caption ─────────────────────────────────────────────────────────── */\n\n  caption {\n    padding: var(--size-3);\n    font-size: var(--text-xs);\n    font-weight: var(--font-semibold);\n    color: var(--color-contrast-500);\n    text-align: start;\n    text-transform: uppercase;\n    letter-spacing: 0.05em;\n    caption-side: top;\n    background: var(--_header-bg);\n  }\n\n  /* ── Section backgrounds ─────────────────────────────────────────────── */\n\n  thead,\n  tfoot {\n    background: var(--_header-bg);\n  }\n\n  thead {\n    border-block-end: var(--border) solid var(--_border-color);\n  }\n\n  tfoot {\n    border-block-start: var(--border) solid var(--_border-color);\n  }\n\n  /* ── Body rows ───────────────────────────────────────────────────────── */\n\n  tbody tr {\n    border-block-end: var(--border) solid var(--_border-color);\n    transition: background var(--transition-fast);\n  }\n\n  tbody tr:hover {\n    background: var(--_row-hover-bg);\n  }\n\n  /* ── Cells ───────────────────────────────────────────────────────────── */\n\n  th,\n  td {\n    padding: var(--_cell-padding-y) var(--_cell-padding-x);\n    font-size: var(--_font-size);\n    font-weight: normal;\n    vertical-align: middle;\n    color: var(--color-contrast-800);\n    text-align: start;\n  }\n\n  /* ── Header cells ────────────────────────────────────────────────────── */\n\n  thead th,\n  thead td,\n  tfoot th,\n  tfoot td {\n    font-size: var(--text-xs);\n    font-weight: var(--font-semibold);\n    color: var(--color-contrast-500);\n    text-transform: uppercase;\n    letter-spacing: 0.04em;\n    white-space: nowrap;\n    user-select: none;\n  }\n}\n\n@layer refine.variants {\n  /* ── Bordered: vertical cell separators ─────────────────────────────── */\n\n  :host([bordered]) th,\n  :host([bordered]) td {\n    border-inline-end: var(--border) solid var(--_border-color);\n  }\n\n  :host([bordered]) th:last-child,\n  :host([bordered]) td:last-child {\n    border-inline-end: none;\n  }\n\n  /* ── Striped ─────────────────────────────────────────────────────────── */\n\n  :host([striped]) tbody tr:nth-child(even) {\n    background: var(--_stripe-bg);\n  }\n\n  /* ── Sticky header ───────────────────────────────────────────────────── */\n\n  /* tableBaseMixin activates overflow-y:auto on .scroll-container when\n     [sticky] is present. position:sticky on thead is relative to that context. */\n\n  :host([sticky]) thead {\n    position: sticky;\n    top: 0;\n    z-index: 2;\n    background: var(--table-sticky-header-bg, color-mix(in oklch, var(--_header-bg) 94%, transparent));\n\n    /* border-collapse merges the bottom border into the cell below, which\n       scrolls away under the sticky header. Use box-shadow instead — it\n       travels with the element regardless of border-collapse. */\n    box-shadow: inset 0 calc(var(--border) * -1) 0 var(--_border-color);\n    backdrop-filter: blur(var(--table-sticky-blur, var(--blur-md))) saturate(140%);\n  }\n}\n"],"mappings":""}

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

@@ -0,0 +1,6 @@
+//#region src/content/table/table.css?inline
+var e = "@layer refine.base{:host{box-shadow:var(--table-shadow,none);border:none;border-radius:0}caption{padding:var(--size-3);font-size:var(--text-xs);font-weight:var(--font-semibold);color:var(--color-contrast-500);text-align:start;text-transform:uppercase;letter-spacing:.05em;caption-side:top;background:var(--_header-bg)}thead,tfoot{background:var(--_header-bg)}thead{border-bottom:var(--border) solid var(--_border-color)}tfoot{border-top:var(--border) solid var(--_border-color)}tbody tr{border-bottom:var(--border) solid var(--_border-color);transition:background var(--transition-fast)}tbody tr:hover{background:var(--_row-hover-bg)}th,td{padding:var(--_cell-padding-y) var(--_cell-padding-x);font-size:var(--_font-size);vertical-align:middle;color:var(--color-contrast-800);text-align:start;font-weight:400}thead th,thead td,tfoot th,tfoot td{font-size:var(--text-xs);font-weight:var(--font-semibold);color:var(--color-contrast-500);text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;-webkit-user-select:none;user-select:none}}@layer refine.variants{:host([bordered]) th: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)),:host([bordered]) td: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)}:host([bordered]) th: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)}:host([bordered]) td: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)}:host([bordered]) th:last-child: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)),:host([bordered]) td:last-child: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:none}:host([bordered]) th:last-child: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:none}:host([bordered]) td:last-child: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:none}:host([striped]) tbody tr:nth-child(2n){background:var(--_stripe-bg)}:host([sticky]) thead{z-index:2;background:var(--table-sticky-header-bg,color-mix(in oklch, var(--_header-bg) 94%, transparent));box-shadow:inset 0 calc(var(--border) * -1) 0 var(--_border-color);-webkit-backdrop-filter:blur(var(--table-sticky-blur,var(--blur-md))) saturate(140%);backdrop-filter:blur(var(--table-sticky-blur,var(--blur-md))) saturate(140%);position:sticky;top:0}}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=table.css?inline.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"table.css?inline.js","names":[],"sources":["../../../src/content/table/table.css?inline"],"sourcesContent":["/* ore-table — shadow DOM (proxy/mirror).\n *\n * Shadow tree (managed by table.ts):\n *   :host                  display:block   — token host (tableBaseMixin)\n *   └─ .scroll-container   overflow:auto   — sticky / max-height context\n *       └─ table           display:table   — native table semantics\n *           ├─ caption                     — optional caption bar\n *           ├─ thead                       — rows built from ore-tr[head]\n *           ├─ tbody                       — rows built from plain ore-tr\n *           └─ tfoot                       — rows built from ore-tr[foot]\n *               └─ tr > th / td            — mirrored from ore-th / ore-td\n *\n * Light DOM (consumer):\n *   <ore-tr head><ore-th>…</ore-th></ore-tr>\n *   <ore-tr><ore-td>…</ore-td></ore-tr>\n *   <ore-tr foot><ore-td>…</ore-td></ore-tr>\n *\n * tableBaseMixin('table') handles: :host tokens, .scroll-container,\n * table width/collapse, loading state, size variants, fullwidth, bordered,\n * and sticky scroll-container activation.\n * This file handles: caption, section backgrounds, body tr/th/td, and variants.\n * No ::slotted() needed — the shadow tree owns all rendered th/td elements.\n */\n\n@layer refine.base {\n  :host {\n    border: none;\n    border-radius: 0;\n    box-shadow: var(--table-shadow, none);\n  }\n\n  /* ── Caption ─────────────────────────────────────────────────────────── */\n\n  caption {\n    padding: var(--size-3);\n    font-size: var(--text-xs);\n    font-weight: var(--font-semibold);\n    color: var(--color-contrast-500);\n    text-align: start;\n    text-transform: uppercase;\n    letter-spacing: 0.05em;\n    caption-side: top;\n    background: var(--_header-bg);\n  }\n\n  /* ── Section backgrounds ─────────────────────────────────────────────── */\n\n  thead,\n  tfoot {\n    background: var(--_header-bg);\n  }\n\n  thead {\n    border-block-end: var(--border) solid var(--_border-color);\n  }\n\n  tfoot {\n    border-block-start: var(--border) solid var(--_border-color);\n  }\n\n  /* ── Body rows ───────────────────────────────────────────────────────── */\n\n  tbody tr {\n    border-block-end: var(--border) solid var(--_border-color);\n    transition: background var(--transition-fast);\n  }\n\n  tbody tr:hover {\n    background: var(--_row-hover-bg);\n  }\n\n  /* ── Cells ───────────────────────────────────────────────────────────── */\n\n  th,\n  td {\n    padding: var(--_cell-padding-y) var(--_cell-padding-x);\n    font-size: var(--_font-size);\n    font-weight: normal;\n    vertical-align: middle;\n    color: var(--color-contrast-800);\n    text-align: start;\n  }\n\n  /* ── Header cells ────────────────────────────────────────────────────── */\n\n  thead th,\n  thead td,\n  tfoot th,\n  tfoot td {\n    font-size: var(--text-xs);\n    font-weight: var(--font-semibold);\n    color: var(--color-contrast-500);\n    text-transform: uppercase;\n    letter-spacing: 0.04em;\n    white-space: nowrap;\n    user-select: none;\n  }\n}\n\n@layer refine.variants {\n  /* ── Bordered: vertical cell separators ─────────────────────────────── */\n\n  :host([bordered]) th,\n  :host([bordered]) td {\n    border-inline-end: var(--border) solid var(--_border-color);\n  }\n\n  :host([bordered]) th:last-child,\n  :host([bordered]) td:last-child {\n    border-inline-end: none;\n  }\n\n  /* ── Striped ─────────────────────────────────────────────────────────── */\n\n  :host([striped]) tbody tr:nth-child(even) {\n    background: var(--_stripe-bg);\n  }\n\n  /* ── Sticky header ───────────────────────────────────────────────────── */\n\n  /* tableBaseMixin activates overflow-y:auto on .scroll-container when\n     [sticky] is present. position:sticky on thead is relative to that context. */\n\n  :host([sticky]) thead {\n    position: sticky;\n    top: 0;\n    z-index: 2;\n    background: var(--table-sticky-header-bg, color-mix(in oklch, var(--_header-bg) 94%, transparent));\n\n    /* border-collapse merges the bottom border into the cell below, which\n       scrolls away under the sticky header. Use box-shadow instead — it\n       travels with the element regardless of border-collapse. */\n    box-shadow: inset 0 calc(var(--border) * -1) 0 var(--_border-color);\n    backdrop-filter: blur(var(--table-sticky-blur, var(--blur-md))) saturate(140%);\n  }\n}\n"],"mappings":""}

package/dist/content/table/table.d.ts

@@ -0,0 +1,76 @@
+/** Table component properties */
+export type OreTableProps = {
+    /** Adds a thicker outer border */
+    bordered?: boolean;
+    /** Visible caption text — also used as the accessible table label via `aria-label` */
+    caption?: string;
+    /** Cell density: `'compact'` | `'cozy'` (default) | `'comfortable'` */
+    density?: 'compact' | 'cozy' | 'comfortable';
+    /** Expands the table to 100% of its container width */
+    fullwidth?: boolean;
+    /** Applies a busy/disabled state with reduced opacity */
+    loading?: boolean;
+    /** Enables sticky column headers with a vertical scroll container */
+    sticky?: boolean;
+    /** Alternating row stripe backgrounds */
+    striped?: boolean;
+};
+/**
+ * Data table component.
+ *
+ * Reads light-DOM `<ore-tr>`/`<ore-th>`/`<ore-td>` markers and projects them
+ * into a fully-native shadow `<table>`. Cell attributes (`colspan`, `rowspan`,
+ * `scope`, etc.) are mirrored. Changes are observed and synced incrementally.
+ *
+ * Native table features — sticky headers, colspan/rowspan, the table layout
+ * algorithm — all work because the shadow tree contains real table elements.
+ *
+ * @element ore-table
+ *
+ * @attr {boolean} bordered  - Thicker outer border
+ * @attr {string}  caption   - Caption text shown above the table
+ * @attr {boolean} fullwidth - Expands to 100% container width
+ * @attr {boolean} loading   - Busy state: reduced opacity, no pointer events
+ * @attr {string}  density   - Cell density: 'compact' | 'cozy' | 'comfortable' (default: 'cozy')
+ * @attr {boolean} sticky    - Sticky `<thead>` with scroll container
+ * @attr {boolean} striped   - Alternating row backgrounds
+ *
+ * @part scroll       - Scroll container that hosts the generated native table
+ * @part table        - Generated native `<table>` element
+ * @part head         - Generated native `<thead>` section
+ * @part body         - Generated native `<tbody>` section
+ * @part foot         - Generated native `<tfoot>` section
+ * @part cell         - Every native `<td>` in `<tbody>` rows
+ * @part header-cell  - Every native `<th>` / `<td>` in `<thead>` and `<tfoot>` rows
+ *
+ * @cssprop --table-bg                - Table background color
+ * @cssprop --table-border-color      - Cell separator and outer border color
+ * @cssprop --table-radius            - Corner radius of the table container
+ * @cssprop --table-shadow            - Box shadow of the table container
+ * @cssprop --table-header-bg         - Background of header and footer rows
+ * @cssprop --table-accent            - Accent color for interactive states
+ * @cssprop --table-row-hover-bg      - Row hover background
+ * @cssprop --table-stripe-bg         - Even-row stripe background
+ * @cssprop --table-cell-padding-x    - Cell horizontal padding
+ * @cssprop --table-cell-padding-y    - Cell vertical padding
+ * @cssprop --table-font-size         - Base font size for cells
+ * @cssprop --table-sticky-max-height - Max height of the sticky scroll container
+ * @cssprop --table-sticky-header-bg  - Background of sticky header cells
+ * @cssprop --table-sticky-blur       - Backdrop blur applied to sticky headers
+ *
+ * @example
+ * ```html
+ * <ore-table caption="Top repositories" striped bordered sticky>
+ *   <ore-tr head>
+ *     <ore-th>Repository</ore-th>
+ *     <ore-th>Stars</ore-th>
+ *   </ore-tr>
+ *   <ore-tr>
+ *     <ore-td>vielzeug/refine</ore-td>
+ *     <ore-td>1 200</ore-td>
+ *   </ore-tr>
+ * </ore-table>
+ * ```
+ */
+export declare const TABLE_TAG: "ore-table";
+//# sourceMappingURL=table.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../../src/content/table/table.ts"],"names":[],"mappings":"AAOA,iCAAiC;AACjC,MAAM,MAAM,aAAa,GAAG;IAC1B,kCAAkC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sFAAsF;IACtF,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,uEAAuE;IACvE,OAAO,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,aAAa,CAAC;IAC7C,uDAAuD;IACvD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,yDAAyD;IACzD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,qEAAqE;IACrE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,yCAAyC;IACzC,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAkKF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwDG;AACH,eAAO,MAAM,SAAS,EAAG,WAAoB,CAAC"}

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

@@ -0,0 +1,2 @@
+var e=`:host{--_size:var(--text-size,var(--text-base));--_weight:var(--text-weight,var(--font-normal));--_color:var(--text-color,var(--text-color-body));--_line-height:var(--text-line-height,var(--leading-normal));--_letter-spacing:var(--text-letter-spacing,normal);font-size:var(--_size);font-weight:var(--_weight);line-height:var(--_line-height);color:var(--_color);letter-spacing:var(--_letter-spacing);display:block}:host([hidden]){display:none}:host([lines]){-webkit-line-clamp:var(--_lines);-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}:host(:is([as=span],[as=label],[as=code]):not([align],[truncate])){display:inline}:host([variant=heading]){--_size:var(--text-size,var(--heading-md));--_weight:var(--text-weight,var(--font-semibold));--_color:var(--text-color,var(--text-color-heading));--_line-height:var(--text-line-height,var(--leading-tight));--_letter-spacing:var(--text-letter-spacing,var(--tracking-header))}:host([variant=label]){--_size:var(--text-size,var(--text-sm));--_weight:var(--text-weight,var(--font-medium));--_color:var(--text-color,var(--text-color-heading));--_line-height:var(--text-line-height,var(--leading-snug))}:host([variant=caption]){--_size:var(--text-size,var(--text-sm));--_color:var(--text-color,var(--text-color-secondary))}:host([variant=overline]){--_size:var(--text-size,var(--text-xs));--_weight:var(--text-weight,var(--font-semibold));--_line-height:var(--text-line-height,var(--leading-none));--_letter-spacing:var(--text-letter-spacing,.08em);text-transform:uppercase}:host([variant=code]){--_size:var(--text-size,var(--text-sm));font-family:var(--font-mono,monospace)}:host([size=xs]){--_size:var(--text-size,var(--text-xs))}:host([size=sm]){--_size:var(--text-size,var(--text-sm))}:host([size=md]){--_size:var(--text-size,var(--text-base))}:host([size=lg]){--_size:var(--text-size,var(--text-lg))}:host([size=xl]){--_size:var(--text-size,var(--text-xl))}:host([size="2xl"]){--_size:var(--text-size,var(--text-2xl))}:host([variant=heading][size=xs]){--_size:var(--text-size,var(--heading-xs))}:host([variant=heading][size=sm]){--_size:var(--text-size,var(--heading-sm))}:host([variant=heading][size=md]){--_size:var(--text-size,var(--heading-md))}:host([variant=heading][size=lg]){--_size:var(--text-size,var(--heading-lg))}:host([variant=heading][size=xl]){--_size:var(--text-size,var(--heading-xl))}:host([variant=heading][size="2xl"]){--_size:var(--text-size,var(--heading-2xl))}:host([weight=normal]){--_weight:var(--text-weight,var(--font-normal))}:host([weight=medium]){--_weight:var(--text-weight,var(--font-medium))}:host([weight=semibold]){--_weight:var(--text-weight,var(--font-semibold))}:host([weight=bold]){--_weight:var(--text-weight,var(--font-bold))}:host([color=primary]){--_color:var(--text-color,var(--color-primary))}:host([color=secondary]){--_color:var(--text-color,var(--color-secondary))}:host([color=info]){--_color:var(--text-color,var(--color-info))}:host([color=success]){--_color:var(--text-color,var(--color-success))}:host([color=warning]){--_color:var(--text-color,var(--color-warning))}:host([color=error]){--_color:var(--text-color,var(--color-error))}:host([color=heading]){--_color:var(--text-color,var(--text-color-heading))}:host([color=body]){--_color:var(--text-color,var(--text-color-body))}:host([color=muted]){--_color:var(--text-color,var(--text-color-secondary))}:host([color=tertiary]){--_color:var(--text-color,var(--text-color-tertiary))}:host([color=disabled]){--_color:var(--text-color,var(--text-color-disabled))}:host([color=contrast]){--_color:var(--text-color,var(--text-color-contrast))}@layer refine.utilities{:host([align]){display:block}:host([align=left]){text-align:start}:host([align=center]){text-align:center}:host([align=right]){text-align:end}:host([align=justify]){text-align:justify}:host([truncate]){text-overflow:ellipsis;white-space:nowrap;display:block;overflow:hidden}:host([italic]){font-style:italic}:host([as=p]),:host([as=div]),:host(:is([as=h1],[as=h2],[as=h3],[as=h4],[as=h5],[as=h6])){display:block}}`;exports.default=e;
+//# sourceMappingURL=text.css?inline.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"text.css?inline.cjs","names":[],"sources":["../../../src/content/text/text.css?inline"],"sourcesContent":["/* ========================================\n     Base Styles & Defaults\n     ======================================== */\n\n:host {\n  /* Internal variables with CSS custom property fallbacks */\n  --_size: var(--text-size, var(--text-base));\n  --_weight: var(--text-weight, var(--font-normal));\n  --_color: var(--text-color, var(--text-color-body));\n  --_line-height: var(--text-line-height, var(--leading-normal));\n  --_letter-spacing: var(--text-letter-spacing, normal);\n\n  display: block;\n  font-size: var(--_size);\n  font-weight: var(--_weight);\n  line-height: var(--_line-height);\n  color: var(--_color);\n  letter-spacing: var(--_letter-spacing);\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n/* ========================================\n     Unlayered display overrides\n     These must live outside any @layer so they can beat the unlayered\n     display: block on :host. Same cascade rule that was fixed for [lines].\n     ======================================== */\n\n/* Multi-line truncation */\n:host([lines]) {\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  -webkit-line-clamp: var(--_lines);\n}\n\n/* Inline semantic tags — but not when align/truncate force block layout */\n:host(:is([as='span'], [as='label'], [as='code']):not([align], [truncate])) {\n  display: inline;\n}\n\n/* ========================================\n     Variant Styles\n     ======================================== */\n\n/* Body (default) — uses base defaults above */\n\n/* Heading\n   Default size: --heading-md (24px)\n   Letter-spacing: --tracking-header (-0.05em) per theme guidelines\n   Line-height: --leading-tight (1.15) for display headings */\n:host([variant='heading']) {\n  --_size: var(--text-size, var(--heading-md));\n  --_weight: var(--text-weight, var(--font-semibold));\n  --_color: var(--text-color, var(--text-color-heading));\n  --_line-height: var(--text-line-height, var(--leading-tight));\n  --_letter-spacing: var(--text-letter-spacing, var(--tracking-header));\n}\n\n/* Label — slightly tighter line-height for UI labels */\n:host([variant='label']) {\n  --_size: var(--text-size, var(--text-sm));\n  --_weight: var(--text-weight, var(--font-medium));\n  --_color: var(--text-color, var(--text-color-heading));\n  --_line-height: var(--text-line-height, var(--leading-snug));\n}\n\n/* Caption */\n:host([variant='caption']) {\n  --_size: var(--text-size, var(--text-sm));\n  --_color: var(--text-color, var(--text-color-secondary));\n}\n\n/* Overline */\n:host([variant='overline']) {\n  --_size: var(--text-size, var(--text-xs));\n  --_weight: var(--text-weight, var(--font-semibold));\n  --_line-height: var(--text-line-height, var(--leading-none));\n  --_letter-spacing: var(--text-letter-spacing, 0.08em);\n\n  text-transform: uppercase;\n}\n\n/* Code */\n:host([variant='code']) {\n  --_size: var(--text-size, var(--text-sm));\n\n  font-family: var(--font-mono, monospace);\n}\n\n/* ========================================\n     Size Variants — body scale (--text-*)\n     Used by all variants except heading.\n     ======================================== */\n\n:host([size='xs']) {\n  --_size: var(--text-size, var(--text-xs));\n}\n\n:host([size='sm']) {\n  --_size: var(--text-size, var(--text-sm));\n}\n\n:host([size='md']) {\n  --_size: var(--text-size, var(--text-base));\n}\n\n:host([size='lg']) {\n  --_size: var(--text-size, var(--text-lg));\n}\n\n:host([size='xl']) {\n  --_size: var(--text-size, var(--text-xl));\n}\n\n:host([size='2xl']) {\n  --_size: var(--text-size, var(--text-2xl));\n}\n\n/* ========================================\n     Size Variants — heading scale (--heading-*)\n     Compound selectors override the body-scale rules above when\n     variant=\"heading\" and a size is also provided.\n     ======================================== */\n\n:host([variant='heading'][size='xs']) {\n  --_size: var(--text-size, var(--heading-xs));\n}\n\n:host([variant='heading'][size='sm']) {\n  --_size: var(--text-size, var(--heading-sm));\n}\n\n:host([variant='heading'][size='md']) {\n  --_size: var(--text-size, var(--heading-md));\n}\n\n:host([variant='heading'][size='lg']) {\n  --_size: var(--text-size, var(--heading-lg));\n}\n\n:host([variant='heading'][size='xl']) {\n  --_size: var(--text-size, var(--heading-xl));\n}\n\n:host([variant='heading'][size='2xl']) {\n  --_size: var(--text-size, var(--heading-2xl));\n}\n\n/* ========================================\n     Weight Variants\n     ======================================== */\n\n:host([weight='normal']) {\n  --_weight: var(--text-weight, var(--font-normal));\n}\n\n:host([weight='medium']) {\n  --_weight: var(--text-weight, var(--font-medium));\n}\n\n:host([weight='semibold']) {\n  --_weight: var(--text-weight, var(--font-semibold));\n}\n\n:host([weight='bold']) {\n  --_weight: var(--text-weight, var(--font-bold));\n}\n\n/* ========================================\n     Color Variants\n     Semantic colors map to --text-color-* tokens.\n     Theme colors map to --color-* base tokens.\n     ======================================== */\n\n:host([color='primary']) {\n  --_color: var(--text-color, var(--color-primary));\n}\n\n:host([color='secondary']) {\n  --_color: var(--text-color, var(--color-secondary));\n}\n\n:host([color='info']) {\n  --_color: var(--text-color, var(--color-info));\n}\n\n:host([color='success']) {\n  --_color: var(--text-color, var(--color-success));\n}\n\n:host([color='warning']) {\n  --_color: var(--text-color, var(--color-warning));\n}\n\n:host([color='error']) {\n  --_color: var(--text-color, var(--color-error));\n}\n\n/* Semantic text colors */\n:host([color='heading']) {\n  --_color: var(--text-color, var(--text-color-heading)); /* --color-contrast-900 */\n}\n\n:host([color='body']) {\n  --_color: var(--text-color, var(--text-color-body)); /* --color-contrast-800 */\n}\n\n:host([color='muted']) {\n  --_color: var(--text-color, var(--text-color-secondary)); /* --color-contrast-600 — AA compliant */\n}\n\n:host([color='tertiary']) {\n  --_color: var(--text-color, var(--text-color-tertiary)); /* --color-contrast-500 — AA for large text */\n}\n\n:host([color='disabled']) {\n  --_color: var(--text-color, var(--text-color-disabled)); /* --color-contrast-400 */\n}\n\n:host([color='contrast']) {\n  --_color: var(--text-color, var(--text-color-contrast)); /* --color-contrast-100 */\n}\n\n@layer refine.utilities {\n  /* ========================================\n     Alignment\n     ======================================== */\n\n  :host([align]) {\n    display: block;\n  }\n\n  :host([align='left']) {\n    text-align: start;\n  }\n\n  :host([align='center']) {\n    text-align: center;\n  }\n\n  :host([align='right']) {\n    text-align: end;\n  }\n\n  :host([align='justify']) {\n    text-align: justify;\n  }\n\n  /* ========================================\n     Truncate (single-line)\n     ======================================== */\n\n  :host([truncate]) {\n    display: block;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  /* ========================================\n     Italic\n     ======================================== */\n\n  :host([italic]) {\n    font-style: italic;\n  }\n\n  /* ========================================\n     Block Display for Certain Tags\n     ======================================== */\n\n  :host([as='p']),\n  :host([as='div']),\n  :host(:is([as='h1'], [as='h2'], [as='h3'], [as='h4'], [as='h5'], [as='h6'])) {\n    display: block;\n  }\n\n  /* Note: display: inline for span/label/code is handled outside this @layer\n     (above) so it can override the unlayered :host { display: block }. */\n}\n"],"mappings":""}

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

@@ -0,0 +1,6 @@
+//#region src/content/text/text.css?inline
+var e = ":host{--_size:var(--text-size,var(--text-base));--_weight:var(--text-weight,var(--font-normal));--_color:var(--text-color,var(--text-color-body));--_line-height:var(--text-line-height,var(--leading-normal));--_letter-spacing:var(--text-letter-spacing,normal);font-size:var(--_size);font-weight:var(--_weight);line-height:var(--_line-height);color:var(--_color);letter-spacing:var(--_letter-spacing);display:block}:host([hidden]){display:none}:host([lines]){-webkit-line-clamp:var(--_lines);-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}:host(:is([as=span],[as=label],[as=code]):not([align],[truncate])){display:inline}:host([variant=heading]){--_size:var(--text-size,var(--heading-md));--_weight:var(--text-weight,var(--font-semibold));--_color:var(--text-color,var(--text-color-heading));--_line-height:var(--text-line-height,var(--leading-tight));--_letter-spacing:var(--text-letter-spacing,var(--tracking-header))}:host([variant=label]){--_size:var(--text-size,var(--text-sm));--_weight:var(--text-weight,var(--font-medium));--_color:var(--text-color,var(--text-color-heading));--_line-height:var(--text-line-height,var(--leading-snug))}:host([variant=caption]){--_size:var(--text-size,var(--text-sm));--_color:var(--text-color,var(--text-color-secondary))}:host([variant=overline]){--_size:var(--text-size,var(--text-xs));--_weight:var(--text-weight,var(--font-semibold));--_line-height:var(--text-line-height,var(--leading-none));--_letter-spacing:var(--text-letter-spacing,.08em);text-transform:uppercase}:host([variant=code]){--_size:var(--text-size,var(--text-sm));font-family:var(--font-mono,monospace)}:host([size=xs]){--_size:var(--text-size,var(--text-xs))}:host([size=sm]){--_size:var(--text-size,var(--text-sm))}:host([size=md]){--_size:var(--text-size,var(--text-base))}:host([size=lg]){--_size:var(--text-size,var(--text-lg))}:host([size=xl]){--_size:var(--text-size,var(--text-xl))}:host([size=\"2xl\"]){--_size:var(--text-size,var(--text-2xl))}:host([variant=heading][size=xs]){--_size:var(--text-size,var(--heading-xs))}:host([variant=heading][size=sm]){--_size:var(--text-size,var(--heading-sm))}:host([variant=heading][size=md]){--_size:var(--text-size,var(--heading-md))}:host([variant=heading][size=lg]){--_size:var(--text-size,var(--heading-lg))}:host([variant=heading][size=xl]){--_size:var(--text-size,var(--heading-xl))}:host([variant=heading][size=\"2xl\"]){--_size:var(--text-size,var(--heading-2xl))}:host([weight=normal]){--_weight:var(--text-weight,var(--font-normal))}:host([weight=medium]){--_weight:var(--text-weight,var(--font-medium))}:host([weight=semibold]){--_weight:var(--text-weight,var(--font-semibold))}:host([weight=bold]){--_weight:var(--text-weight,var(--font-bold))}:host([color=primary]){--_color:var(--text-color,var(--color-primary))}:host([color=secondary]){--_color:var(--text-color,var(--color-secondary))}:host([color=info]){--_color:var(--text-color,var(--color-info))}:host([color=success]){--_color:var(--text-color,var(--color-success))}:host([color=warning]){--_color:var(--text-color,var(--color-warning))}:host([color=error]){--_color:var(--text-color,var(--color-error))}:host([color=heading]){--_color:var(--text-color,var(--text-color-heading))}:host([color=body]){--_color:var(--text-color,var(--text-color-body))}:host([color=muted]){--_color:var(--text-color,var(--text-color-secondary))}:host([color=tertiary]){--_color:var(--text-color,var(--text-color-tertiary))}:host([color=disabled]){--_color:var(--text-color,var(--text-color-disabled))}:host([color=contrast]){--_color:var(--text-color,var(--text-color-contrast))}@layer refine.utilities{:host([align]){display:block}:host([align=left]){text-align:start}:host([align=center]){text-align:center}:host([align=right]){text-align:end}:host([align=justify]){text-align:justify}:host([truncate]){text-overflow:ellipsis;white-space:nowrap;display:block;overflow:hidden}:host([italic]){font-style:italic}:host([as=p]),:host([as=div]),:host(:is([as=h1],[as=h2],[as=h3],[as=h4],[as=h5],[as=h6])){display:block}}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=text.css?inline.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"text.css?inline.js","names":[],"sources":["../../../src/content/text/text.css?inline"],"sourcesContent":["/* ========================================\n     Base Styles & Defaults\n     ======================================== */\n\n:host {\n  /* Internal variables with CSS custom property fallbacks */\n  --_size: var(--text-size, var(--text-base));\n  --_weight: var(--text-weight, var(--font-normal));\n  --_color: var(--text-color, var(--text-color-body));\n  --_line-height: var(--text-line-height, var(--leading-normal));\n  --_letter-spacing: var(--text-letter-spacing, normal);\n\n  display: block;\n  font-size: var(--_size);\n  font-weight: var(--_weight);\n  line-height: var(--_line-height);\n  color: var(--_color);\n  letter-spacing: var(--_letter-spacing);\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n/* ========================================\n     Unlayered display overrides\n     These must live outside any @layer so they can beat the unlayered\n     display: block on :host. Same cascade rule that was fixed for [lines].\n     ======================================== */\n\n/* Multi-line truncation */\n:host([lines]) {\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  -webkit-line-clamp: var(--_lines);\n}\n\n/* Inline semantic tags — but not when align/truncate force block layout */\n:host(:is([as='span'], [as='label'], [as='code']):not([align], [truncate])) {\n  display: inline;\n}\n\n/* ========================================\n     Variant Styles\n     ======================================== */\n\n/* Body (default) — uses base defaults above */\n\n/* Heading\n   Default size: --heading-md (24px)\n   Letter-spacing: --tracking-header (-0.05em) per theme guidelines\n   Line-height: --leading-tight (1.15) for display headings */\n:host([variant='heading']) {\n  --_size: var(--text-size, var(--heading-md));\n  --_weight: var(--text-weight, var(--font-semibold));\n  --_color: var(--text-color, var(--text-color-heading));\n  --_line-height: var(--text-line-height, var(--leading-tight));\n  --_letter-spacing: var(--text-letter-spacing, var(--tracking-header));\n}\n\n/* Label — slightly tighter line-height for UI labels */\n:host([variant='label']) {\n  --_size: var(--text-size, var(--text-sm));\n  --_weight: var(--text-weight, var(--font-medium));\n  --_color: var(--text-color, var(--text-color-heading));\n  --_line-height: var(--text-line-height, var(--leading-snug));\n}\n\n/* Caption */\n:host([variant='caption']) {\n  --_size: var(--text-size, var(--text-sm));\n  --_color: var(--text-color, var(--text-color-secondary));\n}\n\n/* Overline */\n:host([variant='overline']) {\n  --_size: var(--text-size, var(--text-xs));\n  --_weight: var(--text-weight, var(--font-semibold));\n  --_line-height: var(--text-line-height, var(--leading-none));\n  --_letter-spacing: var(--text-letter-spacing, 0.08em);\n\n  text-transform: uppercase;\n}\n\n/* Code */\n:host([variant='code']) {\n  --_size: var(--text-size, var(--text-sm));\n\n  font-family: var(--font-mono, monospace);\n}\n\n/* ========================================\n     Size Variants — body scale (--text-*)\n     Used by all variants except heading.\n     ======================================== */\n\n:host([size='xs']) {\n  --_size: var(--text-size, var(--text-xs));\n}\n\n:host([size='sm']) {\n  --_size: var(--text-size, var(--text-sm));\n}\n\n:host([size='md']) {\n  --_size: var(--text-size, var(--text-base));\n}\n\n:host([size='lg']) {\n  --_size: var(--text-size, var(--text-lg));\n}\n\n:host([size='xl']) {\n  --_size: var(--text-size, var(--text-xl));\n}\n\n:host([size='2xl']) {\n  --_size: var(--text-size, var(--text-2xl));\n}\n\n/* ========================================\n     Size Variants — heading scale (--heading-*)\n     Compound selectors override the body-scale rules above when\n     variant=\"heading\" and a size is also provided.\n     ======================================== */\n\n:host([variant='heading'][size='xs']) {\n  --_size: var(--text-size, var(--heading-xs));\n}\n\n:host([variant='heading'][size='sm']) {\n  --_size: var(--text-size, var(--heading-sm));\n}\n\n:host([variant='heading'][size='md']) {\n  --_size: var(--text-size, var(--heading-md));\n}\n\n:host([variant='heading'][size='lg']) {\n  --_size: var(--text-size, var(--heading-lg));\n}\n\n:host([variant='heading'][size='xl']) {\n  --_size: var(--text-size, var(--heading-xl));\n}\n\n:host([variant='heading'][size='2xl']) {\n  --_size: var(--text-size, var(--heading-2xl));\n}\n\n/* ========================================\n     Weight Variants\n     ======================================== */\n\n:host([weight='normal']) {\n  --_weight: var(--text-weight, var(--font-normal));\n}\n\n:host([weight='medium']) {\n  --_weight: var(--text-weight, var(--font-medium));\n}\n\n:host([weight='semibold']) {\n  --_weight: var(--text-weight, var(--font-semibold));\n}\n\n:host([weight='bold']) {\n  --_weight: var(--text-weight, var(--font-bold));\n}\n\n/* ========================================\n     Color Variants\n     Semantic colors map to --text-color-* tokens.\n     Theme colors map to --color-* base tokens.\n     ======================================== */\n\n:host([color='primary']) {\n  --_color: var(--text-color, var(--color-primary));\n}\n\n:host([color='secondary']) {\n  --_color: var(--text-color, var(--color-secondary));\n}\n\n:host([color='info']) {\n  --_color: var(--text-color, var(--color-info));\n}\n\n:host([color='success']) {\n  --_color: var(--text-color, var(--color-success));\n}\n\n:host([color='warning']) {\n  --_color: var(--text-color, var(--color-warning));\n}\n\n:host([color='error']) {\n  --_color: var(--text-color, var(--color-error));\n}\n\n/* Semantic text colors */\n:host([color='heading']) {\n  --_color: var(--text-color, var(--text-color-heading)); /* --color-contrast-900 */\n}\n\n:host([color='body']) {\n  --_color: var(--text-color, var(--text-color-body)); /* --color-contrast-800 */\n}\n\n:host([color='muted']) {\n  --_color: var(--text-color, var(--text-color-secondary)); /* --color-contrast-600 — AA compliant */\n}\n\n:host([color='tertiary']) {\n  --_color: var(--text-color, var(--text-color-tertiary)); /* --color-contrast-500 — AA for large text */\n}\n\n:host([color='disabled']) {\n  --_color: var(--text-color, var(--text-color-disabled)); /* --color-contrast-400 */\n}\n\n:host([color='contrast']) {\n  --_color: var(--text-color, var(--text-color-contrast)); /* --color-contrast-100 */\n}\n\n@layer refine.utilities {\n  /* ========================================\n     Alignment\n     ======================================== */\n\n  :host([align]) {\n    display: block;\n  }\n\n  :host([align='left']) {\n    text-align: start;\n  }\n\n  :host([align='center']) {\n    text-align: center;\n  }\n\n  :host([align='right']) {\n    text-align: end;\n  }\n\n  :host([align='justify']) {\n    text-align: justify;\n  }\n\n  /* ========================================\n     Truncate (single-line)\n     ======================================== */\n\n  :host([truncate]) {\n    display: block;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  /* ========================================\n     Italic\n     ======================================== */\n\n  :host([italic]) {\n    font-style: italic;\n  }\n\n  /* ========================================\n     Block Display for Certain Tags\n     ======================================== */\n\n  :host([as='p']),\n  :host([as='div']),\n  :host(:is([as='h1'], [as='h2'], [as='h3'], [as='h4'], [as='h5'], [as='h6'])) {\n    display: block;\n  }\n\n  /* Note: display: inline for span/label/code is handled outside this @layer\n     (above) so it can override the unlayered :host { display: block }. */\n}\n"],"mappings":""}

package/dist/content/text/text.d.ts

@@ -0,0 +1,55 @@
+/** Text component properties */
+export type OreTextProps = {
+    /** Text alignment */
+    align?: 'left' | 'center' | 'right' | 'justify';
+    /** Semantic HTML element to render as — sets the correct ARIA role/level on the host */
+    as?: 'span' | 'p' | 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'label' | 'code';
+    /** Text color (semantic + theme colors) */
+    color?: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error' | 'heading' | 'body' | 'muted' | 'tertiary' | 'disabled' | 'contrast';
+    /** Italic text style */
+    italic?: boolean;
+    /** Clamp text to N lines with an ellipsis (multi-line truncation) */
+    lines?: number;
+    /** Text size — maps to --text-* tokens for body variants and --heading-* tokens for the heading variant */
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+    /** Enable single-line text truncation with ellipsis */
+    truncate?: boolean;
+    /** Text semantic variant */
+    variant?: 'body' | 'heading' | 'label' | 'caption' | 'overline' | 'code';
+    /** Font weight */
+    weight?: 'normal' | 'medium' | 'semibold' | 'bold';
+};
+/**
+ * A typography component with semantic variants and responsive sizing.
+ *
+ * @element ore-text
+ *
+ * @attr {string} variant - Text variant: 'body' | 'heading' | 'label' | 'caption' | 'overline' | 'code'
+ * @attr {string} size - Font size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'. Maps to --text-* tokens for body variants and --heading-* tokens for the heading variant.
+ * @attr {string} weight - Font weight: 'normal' | 'medium' | 'semibold' | 'bold'
+ * @attr {string} color - Text color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error' | 'heading' | 'body' | 'muted' | 'tertiary' | 'disabled' | 'contrast'
+ * @attr {string} align - Text alignment: 'left' | 'center' | 'right' | 'justify'
+ * @attr {boolean} truncate - Truncate text with ellipsis when it overflows (single-line)
+ * @attr {number} lines - Clamp to N lines with ellipsis (multi-line truncation)
+ * @attr {boolean} italic - Italic text style
+ * @attr {string} as - Semantic HTML element: 'span' | 'p' | 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'label' | 'code'
+ *
+ * @slot - Text content
+ *
+ * @cssprop --text-size - Font size
+ * @cssprop --text-weight - Font weight
+ * @cssprop --text-color - Text color
+ * @cssprop --text-line-height - Line height
+ * @cssprop --text-letter-spacing - Letter spacing
+ *
+ * @example
+ * ```html
+ * <ore-text variant="heading" size="2xl" weight="bold">Welcome</ore-text>
+ * <ore-text as="h2" variant="heading" size="xl">Section title</ore-text>
+ * <ore-text color="primary" weight="semibold">Important notice</ore-text>
+ * <ore-text variant="code">npm install</ore-text>
+ * <ore-text lines="2">Long paragraph that clamps at two lines…</ore-text>
+ * ```
+ */
+export declare const TEXT_TAG: "ore-text";
+//# sourceMappingURL=text.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../../src/content/text/text.ts"],"names":[],"mappings":"AAIA,gCAAgC;AAChC,MAAM,MAAM,YAAY,GAAG;IACzB,qBAAqB;IACrB,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAC;IAChD,wFAAwF;IACxF,EAAE,CAAC,EAAE,MAAM,GAAG,GAAG,GAAG,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,OAAO,GAAG,MAAM,CAAC;IACvF,2CAA2C;IAC3C,KAAK,CAAC,EACF,SAAS,GACT,WAAW,GACX,MAAM,GACN,SAAS,GACT,SAAS,GACT,OAAO,GACP,SAAS,GACT,MAAM,GACN,OAAO,GACP,UAAU,GACV,UAAU,GACV,UAAU,CAAC;IACf,wBAAwB;IACxB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,qEAAqE;IACrE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2GAA2G;IAC3G,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;IAChD,uDAAuD;IACvD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4BAA4B;IAC5B,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,UAAU,GAAG,MAAM,CAAC;IACzE,kBAAkB;IAClB,MAAM,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,UAAU,GAAG,MAAM,CAAC;CACpD,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAEH,eAAO,MAAM,QAAQ,EAAG,UAAmB,CAAC"}

package/dist/copy-command.cjs

@@ -0,0 +1,17 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/accessibility.css.cjs"),t=require("./content/copy-command/copy-command.css?inline.cjs");let n=require("@vielzeug/ore"),r=require("@vielzeug/ripple");var i=`ore-copy-command`;(0,n.define)(i,{props:{rounded:n.prop.string(`md`),size:n.prop.string(`md`),value:n.prop.string(``),variant:n.prop.string(`flat`)},setup(e,{emit:t,onCleanup:i,slots:a}){let o=(0,r.signal)(!1),s=(0,r.signal)(!1),c=null;i(()=>{c!==null&&clearTimeout(c)});let l=async()=>{let n=e.value.value??``;if(n){c!==null&&clearTimeout(c);try{await navigator.clipboard.writeText(n),o.value=!0,s.value=!1,t(`copy`,{value:n})}catch{o.value=!1,s.value=!0}c=setTimeout(()=>{o.value=!1,s.value=!1,c=null},2e3)}},u=(0,r.computed)(()=>a.has(`suffix`).value);return n.html`
+      <div class="wrapper" part="wrapper">
+        <button class="command" part="command" type="button" :aria-label="${(0,r.computed)(()=>o.value?`Copied!`:s.value?`Copy failed — press to try again`:`Copy: ${e.value.value??``}`)}" @click=${l}>
+          <code class="command-text" part="command-text">${e.value}</code>
+          <span class="copy-icon" part="copy-icon" aria-hidden="true">
+            ${()=>o.value?n.html`<ore-icon name="check" size="14" class="icon-copied" aria-hidden="true"></ore-icon>`:s.value?n.html`<ore-icon name="circle-alert" size="14" class="icon-failed" aria-hidden="true"></ore-icon>`:n.html`<ore-icon name="copy" size="14" aria-hidden="true"></ore-icon>`}
+          </span>
+        </button>
+        <div class="suffix" part="suffix" ?hidden="${()=>!u.value}">
+          <slot name="suffix"></slot>
+        </div>
+      </div>
+      <div role="status" class="sr-only">
+        ${()=>o.value?`Copied to clipboard.`:s.value?`Copy failed. Select the command text and copy it manually.`:``}
+      </div>
+    `},styles:[e.srOnlyMixin,t.default]}),exports.COPY_COMMAND_TAG=i;
+//# sourceMappingURL=copy-command.cjs.map

package/dist/copy-command.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"copy-command.cjs","names":[],"sources":["../src/content/copy-command/copy-command.ts"],"sourcesContent":["import { define, html, prop } from '@vielzeug/ore';\nimport { computed, signal } from '@vielzeug/ripple';\n\nimport type { ComponentSize, RoundedSize } from '../../types';\n\nimport { srOnlyMixin } from '../../styles';\nimport '../icon/icon';\nimport componentStyles from './copy-command.css?inline';\n\n/** Copy command component properties */\nexport type OreCopyCommandProps = {\n  /** Border radius size */\n  rounded?: RoundedSize;\n  /** Component size */\n  size?: ComponentSize;\n  /** The command string to display and copy to clipboard */\n  value?: string;\n  /** Visual style variant */\n  variant?: 'flat' | 'bordered' | 'ghost';\n};\n\n/** Copy command component events */\nexport type OreCopyCommandEvents = {\n  /** Emitted when the command is successfully copied to the clipboard */\n  copy: { value: string };\n};\n\n/**\n * A styled, copy-to-clipboard command display component.\n * Shows a command string in a monospace code block with a copy button.\n * Clicking the component copies the value to the clipboard, shows a transient\n * check-mark confirmation, and emits a `copy` event.\n *\n * @element ore-copy-command\n *\n * @attr {string} value - The command string to display and copy\n * @attr {string} size - Component size: 'sm' | 'md' | 'lg'\n * @attr {string} variant - Visual style: 'flat' | 'bordered' | 'ghost'\n * @attr {string} rounded - Border radius: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\n *\n * @fires copy - Emitted on successful clipboard write. detail: { value: string }\n *\n * @slot suffix - Optional controls appended after the copy button (e.g. a cycle button)\n *\n * @cssprop --copy-command-bg - Background color of the command block\n * @cssprop --copy-command-color - Text color of the command string\n * @cssprop --copy-command-border-color - Border color\n * @cssprop --copy-command-radius - Border radius (overrides the `rounded` attribute)\n * @cssprop --copy-command-padding - Inner padding of the command button\n * @cssprop --copy-command-font-size - Font size of the command string\n * @cssprop --copy-command-icon-color - Color of the copy/check icon\n * @cssprop --copy-command-hover-bg - Background on hover\n *\n * @part wrapper - Outer flex container\n * @part command - The copy button element\n * @part command-text - The `<code>` element displaying the command string\n * @part copy-icon - The icon wrapper span\n * @part suffix - Suffix slot container\n *\n * @example\n * ```html\n * <ore-copy-command value=\"npm install @vielzeug/ripple\"></ore-copy-command>\n *\n * <ore-copy-command value=\"npx -y @vielzeug/codex\" size=\"sm\" variant=\"bordered\"></ore-copy-command>\n *\n * <!-- With a suffix slot (e.g. a cycle button) -->\n * <ore-copy-command value=\"npm install @vielzeug/ripple\">\n *   <button slot=\"suffix\" type=\"button\" aria-label=\"Next package\">›</button>\n * </ore-copy-command>\n * ```\n */\nexport const COPY_COMMAND_TAG = 'ore-copy-command' as const;\n\ndefine<OreCopyCommandProps, OreCopyCommandEvents>(COPY_COMMAND_TAG, {\n  props: {\n    rounded: prop.string<RoundedSize>('md'),\n    size: prop.string<ComponentSize>('md'),\n    value: prop.string(''),\n    variant: prop.string<'flat' | 'bordered' | 'ghost'>('flat'),\n  },\n\n  setup(props, { emit, onCleanup, slots }) {\n    const copied = signal(false);\n    const copyFailed = signal(false);\n    let resetTimer: ReturnType<typeof setTimeout> | null = null;\n\n    onCleanup(() => {\n      if (resetTimer !== null) clearTimeout(resetTimer);\n    });\n\n    const handleCopy = async () => {\n      const text = props.value.value ?? '';\n\n      if (!text) return;\n\n      if (resetTimer !== null) clearTimeout(resetTimer);\n\n      try {\n        await navigator.clipboard.writeText(text);\n        copied.value = true;\n        copyFailed.value = false;\n        emit('copy', { value: text });\n      } catch {\n        // Clipboard access denied or unavailable (e.g. insecure context) — surface it instead of failing silently\n        copied.value = false;\n        copyFailed.value = true;\n      }\n\n      resetTimer = setTimeout(() => {\n        copied.value = false;\n        copyFailed.value = false;\n        resetTimer = null;\n      }, 2000);\n    };\n\n    const hasSuffix = computed(() => slots.has('suffix').value);\n    const btnLabel = computed(() => {\n      if (copied.value) return 'Copied!';\n\n      if (copyFailed.value) return 'Copy failed — press to try again';\n\n      return `Copy: ${props.value.value ?? ''}`;\n    });\n\n    return html`\n      <div class=\"wrapper\" part=\"wrapper\">\n        <button class=\"command\" part=\"command\" type=\"button\" :aria-label=\"${btnLabel}\" @click=${handleCopy}>\n          <code class=\"command-text\" part=\"command-text\">${props.value}</code>\n          <span class=\"copy-icon\" part=\"copy-icon\" aria-hidden=\"true\">\n            ${() => {\n              if (copied.value)\n                return html`<ore-icon name=\"check\" size=\"14\" class=\"icon-copied\" aria-hidden=\"true\"></ore-icon>`;\n\n              if (copyFailed.value)\n                return html`<ore-icon name=\"circle-alert\" size=\"14\" class=\"icon-failed\" aria-hidden=\"true\"></ore-icon>`;\n\n              return html`<ore-icon name=\"copy\" size=\"14\" aria-hidden=\"true\"></ore-icon>`;\n            }}\n          </span>\n        </button>\n        <div class=\"suffix\" part=\"suffix\" ?hidden=\"${() => !hasSuffix.value}\">\n          <slot name=\"suffix\"></slot>\n        </div>\n      </div>\n      <div role=\"status\" class=\"sr-only\">\n        ${() => {\n          if (copied.value) return 'Copied to clipboard.';\n\n          if (copyFailed.value) return 'Copy failed. Select the command text and copy it manually.';\n\n          return '';\n        }}\n      </div>\n    `;\n  },\n\n  styles: [srOnlyMixin, componentStyles],\n});\n"],"mappings":"yPAuEA,IAAa,EAAmB,gCAEkB,EAAkB,CAClE,MAAO,CACL,QAAS,EAAA,KAAK,OAAoB,IAAI,EACtC,KAAM,EAAA,KAAK,OAAsB,IAAI,EACrC,MAAO,EAAA,KAAK,OAAO,EAAE,EACrB,QAAS,EAAA,KAAK,OAAsC,MAAM,CAC5D,EAEA,MAAM,EAAO,CAAE,OAAM,YAAW,SAAS,CACvC,IAAM,GAAA,EAAA,EAAA,OAAA,CAAgB,EAAK,EACrB,GAAA,EAAA,EAAA,OAAA,CAAoB,EAAK,EAC3B,EAAmD,KAEvD,MAAgB,CACV,IAAe,MAAM,aAAa,CAAU,CAClD,CAAC,EAED,IAAM,EAAa,SAAY,CAC7B,IAAM,EAAO,EAAM,MAAM,OAAS,GAE7B,KAEL,CAAI,IAAe,MAAM,aAAa,CAAU,EAEhD,GAAI,CACF,MAAM,UAAU,UAAU,UAAU,CAAI,EACxC,EAAO,MAAQ,GACf,EAAW,MAAQ,GACnB,EAAK,OAAQ,CAAE,MAAO,CAAK,CAAC,CAC9B,MAAQ,CAEN,EAAO,MAAQ,GACf,EAAW,MAAQ,EACrB,CAEA,EAAa,eAAiB,CAC5B,EAAO,MAAQ,GACf,EAAW,MAAQ,GACnB,EAAa,IACf,EAAG,GAAI,CAjByC,CAkBlD,EAEM,GAAA,EAAA,EAAA,SAAA,KAA2B,EAAM,IAAI,QAAQ,CAAC,CAAC,KAAK,EAS1D,MAAO,GAAA,IAAI;;+FAPL,EAAO,MAAc,UAErB,EAAW,MAAc,mCAEtB,SAAS,EAAM,MAAM,OAAS,IAKiC,EAAS,WAAW,EAAW;2DAChD,EAAM,MAAM;;kBAGrD,EAAO,MACF,EAAA,IAAI,sFAET,EAAW,MACN,EAAA,IAAI,6FAEN,EAAA,IAAI,iEACX;;;yDAG6C,CAAC,EAAU,MAAM;;;;;cAM9D,EAAO,MAAc,uBAErB,EAAW,MAAc,6DAEtB,GACP;;KAGR,EAEA,OAAQ,CAAC,EAAA,YAAa,EAAA,OAAe,CACvC,CAAC"}

package/dist/copy-command.js

@@ -0,0 +1,55 @@
+import { srOnlyMixin as e } from "./styles/mixins/accessibility.css.js";
+import t from "./content/copy-command/copy-command.css?inline.js";
+import { define as n, html as r, prop as i } from "@vielzeug/ore";
+import { computed as a, signal as o } from "@vielzeug/ripple";
+//#region src/content/copy-command/copy-command.ts
+var s = "ore-copy-command";
+n(s, {
+	props: {
+		rounded: i.string("md"),
+		size: i.string("md"),
+		value: i.string(""),
+		variant: i.string("flat")
+	},
+	setup(e, { emit: t, onCleanup: n, slots: i }) {
+		let s = o(!1), c = o(!1), l = null;
+		n(() => {
+			l !== null && clearTimeout(l);
+		});
+		let u = async () => {
+			let n = e.value.value ?? "";
+			if (n) {
+				l !== null && clearTimeout(l);
+				try {
+					await navigator.clipboard.writeText(n), s.value = !0, c.value = !1, t("copy", { value: n });
+				} catch {
+					s.value = !1, c.value = !0;
+				}
+				l = setTimeout(() => {
+					s.value = !1, c.value = !1, l = null;
+				}, 2e3);
+			}
+		}, d = a(() => i.has("suffix").value);
+		return r`
+      <div class="wrapper" part="wrapper">
+        <button class="command" part="command" type="button" :aria-label="${a(() => s.value ? "Copied!" : c.value ? "Copy failed — press to try again" : `Copy: ${e.value.value ?? ""}`)}" @click=${u}>
+          <code class="command-text" part="command-text">${e.value}</code>
+          <span class="copy-icon" part="copy-icon" aria-hidden="true">
+            ${() => s.value ? r`<ore-icon name="check" size="14" class="icon-copied" aria-hidden="true"></ore-icon>` : c.value ? r`<ore-icon name="circle-alert" size="14" class="icon-failed" aria-hidden="true"></ore-icon>` : r`<ore-icon name="copy" size="14" aria-hidden="true"></ore-icon>`}
+          </span>
+        </button>
+        <div class="suffix" part="suffix" ?hidden="${() => !d.value}">
+          <slot name="suffix"></slot>
+        </div>
+      </div>
+      <div role="status" class="sr-only">
+        ${() => s.value ? "Copied to clipboard." : c.value ? "Copy failed. Select the command text and copy it manually." : ""}
+      </div>
+    `;
+	},
+	styles: [e, t]
+});
+//#endregion
+export { s as COPY_COMMAND_TAG };
+
+//# sourceMappingURL=copy-command.js.map

package/dist/copy-command.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"copy-command.js","names":[],"sources":["../src/content/copy-command/copy-command.ts"],"sourcesContent":["import { define, html, prop } from '@vielzeug/ore';\nimport { computed, signal } from '@vielzeug/ripple';\n\nimport type { ComponentSize, RoundedSize } from '../../types';\n\nimport { srOnlyMixin } from '../../styles';\nimport '../icon/icon';\nimport componentStyles from './copy-command.css?inline';\n\n/** Copy command component properties */\nexport type OreCopyCommandProps = {\n  /** Border radius size */\n  rounded?: RoundedSize;\n  /** Component size */\n  size?: ComponentSize;\n  /** The command string to display and copy to clipboard */\n  value?: string;\n  /** Visual style variant */\n  variant?: 'flat' | 'bordered' | 'ghost';\n};\n\n/** Copy command component events */\nexport type OreCopyCommandEvents = {\n  /** Emitted when the command is successfully copied to the clipboard */\n  copy: { value: string };\n};\n\n/**\n * A styled, copy-to-clipboard command display component.\n * Shows a command string in a monospace code block with a copy button.\n * Clicking the component copies the value to the clipboard, shows a transient\n * check-mark confirmation, and emits a `copy` event.\n *\n * @element ore-copy-command\n *\n * @attr {string} value - The command string to display and copy\n * @attr {string} size - Component size: 'sm' | 'md' | 'lg'\n * @attr {string} variant - Visual style: 'flat' | 'bordered' | 'ghost'\n * @attr {string} rounded - Border radius: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\n *\n * @fires copy - Emitted on successful clipboard write. detail: { value: string }\n *\n * @slot suffix - Optional controls appended after the copy button (e.g. a cycle button)\n *\n * @cssprop --copy-command-bg - Background color of the command block\n * @cssprop --copy-command-color - Text color of the command string\n * @cssprop --copy-command-border-color - Border color\n * @cssprop --copy-command-radius - Border radius (overrides the `rounded` attribute)\n * @cssprop --copy-command-padding - Inner padding of the command button\n * @cssprop --copy-command-font-size - Font size of the command string\n * @cssprop --copy-command-icon-color - Color of the copy/check icon\n * @cssprop --copy-command-hover-bg - Background on hover\n *\n * @part wrapper - Outer flex container\n * @part command - The copy button element\n * @part command-text - The `<code>` element displaying the command string\n * @part copy-icon - The icon wrapper span\n * @part suffix - Suffix slot container\n *\n * @example\n * ```html\n * <ore-copy-command value=\"npm install @vielzeug/ripple\"></ore-copy-command>\n *\n * <ore-copy-command value=\"npx -y @vielzeug/codex\" size=\"sm\" variant=\"bordered\"></ore-copy-command>\n *\n * <!-- With a suffix slot (e.g. a cycle button) -->\n * <ore-copy-command value=\"npm install @vielzeug/ripple\">\n *   <button slot=\"suffix\" type=\"button\" aria-label=\"Next package\">›</button>\n * </ore-copy-command>\n * ```\n */\nexport const COPY_COMMAND_TAG = 'ore-copy-command' as const;\n\ndefine<OreCopyCommandProps, OreCopyCommandEvents>(COPY_COMMAND_TAG, {\n  props: {\n    rounded: prop.string<RoundedSize>('md'),\n    size: prop.string<ComponentSize>('md'),\n    value: prop.string(''),\n    variant: prop.string<'flat' | 'bordered' | 'ghost'>('flat'),\n  },\n\n  setup(props, { emit, onCleanup, slots }) {\n    const copied = signal(false);\n    const copyFailed = signal(false);\n    let resetTimer: ReturnType<typeof setTimeout> | null = null;\n\n    onCleanup(() => {\n      if (resetTimer !== null) clearTimeout(resetTimer);\n    });\n\n    const handleCopy = async () => {\n      const text = props.value.value ?? '';\n\n      if (!text) return;\n\n      if (resetTimer !== null) clearTimeout(resetTimer);\n\n      try {\n        await navigator.clipboard.writeText(text);\n        copied.value = true;\n        copyFailed.value = false;\n        emit('copy', { value: text });\n      } catch {\n        // Clipboard access denied or unavailable (e.g. insecure context) — surface it instead of failing silently\n        copied.value = false;\n        copyFailed.value = true;\n      }\n\n      resetTimer = setTimeout(() => {\n        copied.value = false;\n        copyFailed.value = false;\n        resetTimer = null;\n      }, 2000);\n    };\n\n    const hasSuffix = computed(() => slots.has('suffix').value);\n    const btnLabel = computed(() => {\n      if (copied.value) return 'Copied!';\n\n      if (copyFailed.value) return 'Copy failed — press to try again';\n\n      return `Copy: ${props.value.value ?? ''}`;\n    });\n\n    return html`\n      <div class=\"wrapper\" part=\"wrapper\">\n        <button class=\"command\" part=\"command\" type=\"button\" :aria-label=\"${btnLabel}\" @click=${handleCopy}>\n          <code class=\"command-text\" part=\"command-text\">${props.value}</code>\n          <span class=\"copy-icon\" part=\"copy-icon\" aria-hidden=\"true\">\n            ${() => {\n              if (copied.value)\n                return html`<ore-icon name=\"check\" size=\"14\" class=\"icon-copied\" aria-hidden=\"true\"></ore-icon>`;\n\n              if (copyFailed.value)\n                return html`<ore-icon name=\"circle-alert\" size=\"14\" class=\"icon-failed\" aria-hidden=\"true\"></ore-icon>`;\n\n              return html`<ore-icon name=\"copy\" size=\"14\" aria-hidden=\"true\"></ore-icon>`;\n            }}\n          </span>\n        </button>\n        <div class=\"suffix\" part=\"suffix\" ?hidden=\"${() => !hasSuffix.value}\">\n          <slot name=\"suffix\"></slot>\n        </div>\n      </div>\n      <div role=\"status\" class=\"sr-only\">\n        ${() => {\n          if (copied.value) return 'Copied to clipboard.';\n\n          if (copyFailed.value) return 'Copy failed. Select the command text and copy it manually.';\n\n          return '';\n        }}\n      </div>\n    `;\n  },\n\n  styles: [srOnlyMixin, componentStyles],\n});\n"],"mappings":";;;;;AAuEA,IAAa,IAAmB;AAEhC,EAAkD,GAAkB;CAClE,OAAO;EACL,SAAS,EAAK,OAAoB,IAAI;EACtC,MAAM,EAAK,OAAsB,IAAI;EACrC,OAAO,EAAK,OAAO,EAAE;EACrB,SAAS,EAAK,OAAsC,MAAM;CAC5D;CAEA,MAAM,GAAO,EAAE,SAAM,cAAW,YAAS;EACvC,IAAM,IAAS,EAAO,EAAK,GACrB,IAAa,EAAO,EAAK,GAC3B,IAAmD;EAEvD,QAAgB;GACd,AAAI,MAAe,QAAM,aAAa,CAAU;EAClD,CAAC;EAED,IAAM,IAAa,YAAY;GAC7B,IAAM,IAAO,EAAM,MAAM,SAAS;GAE7B,OAEL;IAAI,MAAe,QAAM,aAAa,CAAU;IAEhD,IAAI;KAIF,AAHA,MAAM,UAAU,UAAU,UAAU,CAAI,GACxC,EAAO,QAAQ,IACf,EAAW,QAAQ,IACnB,EAAK,QAAQ,EAAE,OAAO,EAAK,CAAC;IAC9B,QAAQ;KAGN,AADA,EAAO,QAAQ,IACf,EAAW,QAAQ;IACrB;IAEA,IAAa,iBAAiB;KAG5B,AAFA,EAAO,QAAQ,IACf,EAAW,QAAQ,IACnB,IAAa;IACf,GAAG,GAAI;GAjByC;EAkBlD,GAEM,IAAY,QAAe,EAAM,IAAI,QAAQ,CAAC,CAAC,KAAK;EAS1D,OAAO,CAAI;;4EARM,QACX,EAAO,QAAc,YAErB,EAAW,QAAc,qCAEtB,SAAS,EAAM,MAAM,SAAS,IAKiC,EAAS,WAAW,EAAW;2DAChD,EAAM,MAAM;;oBAGrD,EAAO,QACF,CAAI,wFAET,EAAW,QACN,CAAI,+FAEN,CAAI,iEACX;;;2DAG6C,CAAC,EAAU,MAAM;;;;;gBAM9D,EAAO,QAAc,yBAErB,EAAW,QAAc,+DAEtB,GACP;;;CAGR;CAEA,QAAQ,CAAC,GAAa,CAAe;AACvC,CAAC"}