@cognivo/components 0.8.0 → 0.8.2

package/dist/components/cg-definition-list/cg-definition-list.js

@@ -1,332 +0,0 @@
-import { css as h, LitElement as g, html as a, nothing as p } from "lit";
-import { property as d, state as f, customElement as u } from "lit/decorators.js";
-import { h as m, r as v } from "../../chunks/premium.css-9I4kHrsl.js";
-import "../cg-icon/cg-icon.js";
-import "../cg-tooltip/cg-tooltip.js";
-var b = Object.defineProperty, y = Object.getOwnPropertyDescriptor, r = (t, e, i, n) => {
-  for (var s = n > 1 ? void 0 : n ? y(e, i) : e, c = t.length - 1, l; c >= 0; c--)
-    (l = t[c]) && (s = (n ? l(e, i, s) : l(s)) || s);
-  return n && s && b(e, i, s), s;
-};
-let o = class extends g {
-  constructor() {
-    super(...arguments), this.direction = "horizontal", this.align = "start", this.size = "md", this.bordered = !1, this.striped = !1, this.compact = !1, this.label = "", this.items = [], this._copiedIndex = -1;
-  }
-  async _copy(t, e) {
-    if (e)
-      try {
-        await navigator.clipboard.writeText(e), this._copiedIndex = t, this.dispatchEvent(new CustomEvent("cg-definition-copy", {
-          bubbles: !0,
-          composed: !0,
-          detail: { term: this.items[t]?.term, value: e }
-        })), setTimeout(() => {
-          this._copiedIndex = -1;
-        }, 1500);
-      } catch {
-      }
-  }
-  _renderItem(t, e) {
-    const i = t.definition == null ? "" : String(t.definition), n = t.tooltip ? a`<cg-tooltip content=${t.tooltip} position="top"><span>${t.term}</span></cg-tooltip>` : t.term;
-    return a`
-      <div class="row">
-        <dt part="term">${n}</dt>
-        <dd part="value">
-          <span class="dd-content">
-            <span class="dd-value ${i ? "" : "dd-empty"}">${i || "—"}</span>
-            ${t.copyable && i ? a`
-              <button
-                type="button"
-                class="copy-btn ${this._copiedIndex === e ? "copied" : ""}"
-                part="copy-button"
-                aria-label="Copy ${t.term}"
-                @click=${() => this._copy(e, i)}
-              >
-                <cg-icon name=${this._copiedIndex === e ? "check" : "copy"} size="xs"></cg-icon>
-              </button>
-            ` : p}
-          </span>
-        </dd>
-      </div>
-    `;
-  }
-  render() {
-    return a`
-      <dl part="list" aria-label=${this.label || p}>
-        ${this.items.map((t, e) => this._renderItem(t, e))}
-        <slot></slot>
-      </dl>
-    `;
-  }
-};
-o.styles = [m, v, h`
-    :host { display: block; }
-
-    dl {
-      display: grid;
-      /* Term column: minimum 128px so short labels (MRR, Plan) get the
-         same breathing room as long labels (Account ID, Member since).
-         Caps at max-content so a really long label can still expand the
-         column. Gives a consistent visual rail between term and value. */
-      grid-template-columns: minmax(var(--cg-component-definition-list-term-width, var(--cg-spacing-128)), max-content) 1fr;
-      column-gap: var(--cg-spacing-24);
-      row-gap: var(--cg-spacing-8);
-      margin: 0;
-      padding: 0;
-    }
-
-    :host([direction="vertical"]) dl {
-      grid-template-columns: 1fr;
-      row-gap: var(--cg-spacing-4);
-    }
-
-    /* Density via size — controls row gap + column-gap + font-size.
-       compact is a legacy alias for size="sm" gaps but keeps font-size. */
-    :host([size="sm"]) dl { row-gap: var(--cg-spacing-4);  column-gap: var(--cg-spacing-16); }
-    :host([size="lg"]) dl { row-gap: var(--cg-spacing-12); column-gap: var(--cg-spacing-32); }
-    :host([compact]) dl   { row-gap: var(--cg-spacing-4);  column-gap: var(--cg-spacing-16); }
-
-    /* Bordered variant — wraps the dl in a card-like container with
-       24px padding and row dividers. */
-    :host([bordered]) dl {
-      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
-      border-radius: var(--cg-component-card-radius);
-      background: var(--cg-color-surface-cards-background);
-      padding: var(--cg-component-definition-list-padding, var(--cg-spacing-24));
-      row-gap: 0;
-      /* CRITICAL: column-gap must be 0 so the row dividers (border-top
-         on each dt and each dd) touch in the middle and form ONE
-         continuous line across the row. The horizontal space between
-         term and value comes from per-cell padding instead. */
-      column-gap: 0;
-    }
-
-    /* Per-cell padding takes over from grid gap. dt gets right padding
-       (the visual gap between term and value, matching the non-bordered
-       column-gap of 24px); both get vertical padding for breathing room
-       around the divider line.
-       Note: items[] path now wraps each pair in <div class="row">, so
-       :first-of-type / :nth-of-type selectors on dt/dd no longer
-       distinguish rows (every dt is the only-of-type inside its row).
-       For the items[] path we target .row:first-child / :last-child /
-       :not(:first-child) instead. Slotted path has no wrapper, so the
-       original :first-of-type rules still work for it. */
-    :host([bordered]) dt,
-    :host([bordered]) ::slotted(dt) {
-      padding: var(--cg-spacing-12) var(--cg-spacing-24) var(--cg-spacing-12) 0;
-    }
-    :host([bordered]) dd,
-    :host([bordered]) ::slotted(dd) {
-      padding: var(--cg-spacing-12) 0;
-    }
-    /* First row sits flush with the card's top padding. Use
-       :first-of-type/:last-of-type on .row (matches first/last <div>
-       sibling regardless of the trailing <slot>). */
-    :host([bordered]) .row:first-of-type > dt,
-    :host([bordered]) .row:first-of-type > dd,
-    :host([bordered]) ::slotted(dt:first-of-type),
-    :host([bordered]) ::slotted(dd:first-of-type) {
-      padding-top: 0;
-    }
-    /* Last row sits flush with the card's bottom padding. */
-    :host([bordered]) .row:last-of-type > dt,
-    :host([bordered]) .row:last-of-type > dd,
-    :host([bordered]) ::slotted(dt:last-of-type),
-    :host([bordered]) ::slotted(dd:last-of-type) {
-      padding-bottom: 0;
-    }
-    /* The divider — drawn on every dt + dd EXCEPT the first row.
-       With column-gap:0 the two cell borders meet exactly, reading as
-       one continuous hairline spanning the full row. */
-    :host([bordered]) .row:not(:first-of-type) > dt,
-    :host([bordered]) .row:not(:first-of-type) > dd,
-    :host([bordered]) ::slotted(dt:not(:first-of-type)),
-    :host([bordered]) ::slotted(dd:not(:first-of-type)) {
-      border-top: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
-    }
-
-    /* align="between" — term hard-left, value hard-right (price-list).
-       MUST use max-content for both columns: plain "auto" tracks grow
-       to fill available space (auto = minmax(min-content, max-content)
-       with stretching), defeating justify-content:space-between.
-       max-content locks each column to its content's natural width, so
-       leftover container space distributes between them.
-       The visual right-alignment of the value comes from text-align:
-       right on dd (works regardless of how the column resolves). */
-    :host([align="between"][direction="horizontal"]) dl {
-      grid-template-columns: max-content max-content;
-      justify-content: space-between;
-    }
-    :host([align="between"][direction="horizontal"]) dd,
-    :host([align="between"][direction="horizontal"]) ::slotted(dd) {
-      text-align: right;
-    }
-    :host([align="between"][direction="horizontal"]) .dd-content {
-      justify-content: flex-end;
-    }
-
-    /* Striped — alternating row backgrounds. Both render paths target
-       even-indexed rows (rows 2, 4, 6 in 1-indexed = rows 1, 3, 5 in
-       0-indexed) so they stay consistent.
-       Items[] path: .row:nth-child(even) > dt/dd (the .row wrapper is
-       a direct child of dl, so :nth-child(even) IS row 2/4/6).
-       Slotted path: ::slotted(dt:nth-of-type(even)) — among slotted dt
-       siblings, the even-position ones (2nd/4th/6th dt) = rows 2/4/6. */
-    :host([striped]:not([bordered])) .row:nth-of-type(even) > dt,
-    :host([striped]:not([bordered])) .row:nth-of-type(even) > dd,
-    :host([striped]:not([bordered])) ::slotted(dt:nth-of-type(even)),
-    :host([striped]:not([bordered])) ::slotted(dd:nth-of-type(even)) {
-      background: var(--cg-color-surface-cards-emphasis);
-    }
-    :host([striped]:not([bordered])) ::slotted(dt),
-    :host([striped]:not([bordered])) ::slotted(dd),
-    :host([striped]:not([bordered])) dt,
-    :host([striped]:not([bordered])) dd {
-      padding: var(--cg-spacing-6) var(--cg-spacing-8);
-      border-radius: var(--cg-border-radius-50);
-    }
-    /* When both bordered + striped, keep bordered's padding (already
-       set above) and only paint the alternating background. The dividers
-       still work because we're not overriding the border-top rules. */
-    :host([bordered][striped]) .row:nth-of-type(even) > dt,
-    :host([bordered][striped]) .row:nth-of-type(even) > dd,
-    :host([bordered][striped]) ::slotted(dt:nth-of-type(even)),
-    :host([bordered][striped]) ::slotted(dd:nth-of-type(even)) {
-      background: var(--cg-color-surface-cards-emphasis);
-    }
-
-    /* Term + value typography — applies to both slotted dt/dd AND
-       internally rendered dt/dd from the items[] prop. */
-    ::slotted(dt),
-    dt {
-      color: var(--cg-color-input-text-placeholder);
-      font-size: var(--cg-font-size-sm);
-      font-weight: var(--cg-font-weight-medium);
-      line-height: var(--cg-line-height-snug);
-      margin: 0;
-      width: var(--cg-component-definition-list-term-width, auto);
-    }
-
-    ::slotted(dd),
-    dd {
-      color: var(--cg-color-surface-cards-text);
-      font-size: var(--cg-font-size-sm);
-      line-height: var(--cg-line-height-snug);
-      margin: 0;
-      min-width: 0;
-      word-break: break-word;
-    }
-
-    :host([size="sm"]) ::slotted(dt),
-    :host([size="sm"]) dt,
-    :host([size="sm"]) ::slotted(dd),
-    :host([size="sm"]) dd { font-size: var(--cg-font-size-xs); }
-
-    :host([size="lg"]) ::slotted(dt),
-    :host([size="lg"]) dt,
-    :host([size="lg"]) ::slotted(dd),
-    :host([size="lg"]) dd { font-size: var(--cg-font-size-md); }
-
-    /* Vertical layout: extra spacing between pairs. Uses gap from grid
-       row-gap PLUS a margin-top on every dt that isn't the first one,
-       so each pair is visually grouped (dt right above its dd) with a
-       larger gap before the next dt. Applies to both render paths. */
-    :host([direction="vertical"]) dt:not(:first-of-type),
-    :host([direction="vertical"]) ::slotted(dt:not(:first-child)) {
-      margin-top: var(--cg-spacing-8);
-    }
-
-    /* Row wrapper — used by the items[] render path to group each
-       term+value pair into one logical row. display:contents keeps it
-       invisible to grid layout (dt and dd act as direct grid children),
-       while still giving us a sibling element to target for first/last
-       row treatment via .row:first-of-type / :last-of-type / :nth-of-
-       type(even). HTML5 allows <div> wrapping <dt><dd> pairs inside
-       <dl> since 2020. */
-    .row {
-      display: contents;
-    }
-
-    /* dd in items[] path may contain a copy button + the value */
-    .dd-content {
-      display: inline-flex;
-      align-items: center;
-      gap: var(--cg-spacing-6);
-      max-width: 100%;
-    }
-    .dd-value {
-      flex: 1 1 auto;
-      min-width: 0;
-    }
-    .dd-empty {
-      color: var(--cg-color-input-text-placeholder);
-    }
-
-    /* Copy button — visible on the SAME row's hover or focus (clean by
-       default). Per-row reveal via .dd-content:hover scoping; previously
-       used dl:hover which lit up every button when any part of the dl
-       was hovered. */
-    .copy-btn {
-      flex: 0 0 auto;
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      width: var(--cg-spacing-20);
-      height: var(--cg-spacing-20);
-      padding: 0;
-      border: none;
-      background: transparent;
-      color: var(--cg-color-input-text-placeholder);
-      border-radius: var(--cg-border-radius-50);
-      cursor: pointer;
-      opacity: 0;
-      transition:
-        opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
-        color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
-        background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
-    }
-    dd:hover .copy-btn,
-    .copy-btn:focus-visible { opacity: 1; }
-    .copy-btn:hover {
-      color: var(--cg-color-surface-cards-text);
-      background: var(--cg-color-action-tertiary-background-hover);
-    }
-    .copy-btn:focus-visible {
-      outline: none;
-      box-shadow: 0 0 0 var(--cg-border-width-300) var(--cg-color-focus-ring);
-    }
-    .copy-btn.copied { color: var(--cg-color-status-success-text-default); opacity: 1; }
-  `];
-r([
-  d({ reflect: !0 })
-], o.prototype, "direction", 2);
-r([
-  d({ reflect: !0 })
-], o.prototype, "align", 2);
-r([
-  d({ reflect: !0 })
-], o.prototype, "size", 2);
-r([
-  d({ type: Boolean, reflect: !0 })
-], o.prototype, "bordered", 2);
-r([
-  d({ type: Boolean, reflect: !0 })
-], o.prototype, "striped", 2);
-r([
-  d({ type: Boolean, reflect: !0 })
-], o.prototype, "compact", 2);
-r([
-  d()
-], o.prototype, "label", 2);
-r([
-  d({ type: Array })
-], o.prototype, "items", 2);
-r([
-  f()
-], o.prototype, "_copiedIndex", 2);
-o = r([
-  u("cg-definition-list")
-], o);
-export {
-  o as CgDefinitionList
-};
-//# sourceMappingURL=cg-definition-list.js.map

package/dist/components/cg-definition-list/cg-definition-list.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"cg-definition-list.js","sources":["../../../src/components/cg-definition-list/cg-definition-list.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\nimport '../cg-icon/cg-icon.js';\nimport '../cg-tooltip/cg-tooltip.js';\n\ninterface DefinitionItem {\n  /** Term (label) shown on the left / above. */\n  term: string;\n  /** Definition value. Strings render as text; consumers wanting markup should use the slot API instead. */\n  definition?: unknown;\n  /** Show a copy-to-clipboard button next to the value. Visible on row hover. */\n  copyable?: boolean;\n  /** Optional tooltip on the term (helpful for shorthand specs like SLA, MAU). */\n  tooltip?: string;\n}\n\n/**\n * @element cg-definition-list\n * Semantic key/value list rendered as a real `<dl>` so screen readers\n * expose proper term/definition pairing. Supports two render paths:\n *\n *   1. Slot in `<dt>` and `<dd>` directly (rich values, full control):\n *      ```html\n *      <cg-definition-list bordered>\n *        <dt>Plan</dt>\n *        <dd><cg-badge variant=\"accent\">Pro</cg-badge></dd>\n *        <dt>Status</dt>\n *        <dd><cg-badge variant=\"success\">Active</cg-badge></dd>\n *      </cg-definition-list>\n *      ```\n *\n *   2. Pass `.items=[...]` for quick data-driven render with built-in\n *      copy buttons + label tooltips:\n *      ```html\n *      <cg-definition-list bordered .items=${[\n *        { term: 'Plan',   definition: 'Pro' },\n *        { term: 'Email',  definition: 'alice@example.com', copyable: true },\n *        { term: 'API key', definition: 'sk_live_abc', copyable: true, tooltip: 'Read-write key' },\n *      ]}></cg-definition-list>\n *      ```\n *\n * Two layouts (`direction`):\n *   - `horizontal` (default) — term : value side-by-side (spec sheet)\n *   - `vertical`              — term above value (form / detail view)\n *\n * For tag-chip / metadata-line use cases (e.g. \"CPU: 8 cores · RAM: 32 GB\"),\n * compose <cg-chip> or <cg-text> directly — they give finer control than\n * a description list pretending to be a chip strip.\n *\n * Two alignments (`align`, horizontal mode only):\n *   - `start` (default) — term and value sit adjacent on the left\n *   - `between`         — term hard-left, value hard-right (price-list)\n *\n * Variants: `bordered` (outer card + 24px padding + row dividers),\n * `striped` (alternating row backgrounds for long lists), `size`\n * (sm/md/lg density).\n *\n * @slot - `<dt>` and `<dd>` pairs.\n *\n * @csspart list - The inner `<dl>` element\n * @csspart term - Each `<dt>` rendered from items[] (slotted dt/dd cannot be parted from outside the shadow boundary; use ::slotted() or wrap them)\n * @csspart value - Each `<dd>` rendered from items[]\n * @csspart copy-button - The copy-to-clipboard button on copyable items\n *\n * @fires {CustomEvent<{term, value}>} cg-definition-copy - Fired when a copyable item is copied.\n *\n * @cssprop --cg-component-definition-list-padding - Wrapper padding when bordered (default 24px)\n * @cssprop --cg-component-definition-list-term-width - Term column width in horizontal mode (default auto)\n */\n@customElement('cg-definition-list')\nexport class CgDefinitionList extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    :host { display: block; }\n\n    dl {\n      display: grid;\n      /* Term column: minimum 128px so short labels (MRR, Plan) get the\n         same breathing room as long labels (Account ID, Member since).\n         Caps at max-content so a really long label can still expand the\n         column. Gives a consistent visual rail between term and value. */\n      grid-template-columns: minmax(var(--cg-component-definition-list-term-width, var(--cg-spacing-128)), max-content) 1fr;\n      column-gap: var(--cg-spacing-24);\n      row-gap: var(--cg-spacing-8);\n      margin: 0;\n      padding: 0;\n    }\n\n    :host([direction=\"vertical\"]) dl {\n      grid-template-columns: 1fr;\n      row-gap: var(--cg-spacing-4);\n    }\n\n    /* Density via size — controls row gap + column-gap + font-size.\n       compact is a legacy alias for size=\"sm\" gaps but keeps font-size. */\n    :host([size=\"sm\"]) dl { row-gap: var(--cg-spacing-4);  column-gap: var(--cg-spacing-16); }\n    :host([size=\"lg\"]) dl { row-gap: var(--cg-spacing-12); column-gap: var(--cg-spacing-32); }\n    :host([compact]) dl   { row-gap: var(--cg-spacing-4);  column-gap: var(--cg-spacing-16); }\n\n    /* Bordered variant — wraps the dl in a card-like container with\n       24px padding and row dividers. */\n    :host([bordered]) dl {\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-component-card-radius);\n      background: var(--cg-color-surface-cards-background);\n      padding: var(--cg-component-definition-list-padding, var(--cg-spacing-24));\n      row-gap: 0;\n      /* CRITICAL: column-gap must be 0 so the row dividers (border-top\n         on each dt and each dd) touch in the middle and form ONE\n         continuous line across the row. The horizontal space between\n         term and value comes from per-cell padding instead. */\n      column-gap: 0;\n    }\n\n    /* Per-cell padding takes over from grid gap. dt gets right padding\n       (the visual gap between term and value, matching the non-bordered\n       column-gap of 24px); both get vertical padding for breathing room\n       around the divider line.\n       Note: items[] path now wraps each pair in <div class=\"row\">, so\n       :first-of-type / :nth-of-type selectors on dt/dd no longer\n       distinguish rows (every dt is the only-of-type inside its row).\n       For the items[] path we target .row:first-child / :last-child /\n       :not(:first-child) instead. Slotted path has no wrapper, so the\n       original :first-of-type rules still work for it. */\n    :host([bordered]) dt,\n    :host([bordered]) ::slotted(dt) {\n      padding: var(--cg-spacing-12) var(--cg-spacing-24) var(--cg-spacing-12) 0;\n    }\n    :host([bordered]) dd,\n    :host([bordered]) ::slotted(dd) {\n      padding: var(--cg-spacing-12) 0;\n    }\n    /* First row sits flush with the card's top padding. Use\n       :first-of-type/:last-of-type on .row (matches first/last <div>\n       sibling regardless of the trailing <slot>). */\n    :host([bordered]) .row:first-of-type > dt,\n    :host([bordered]) .row:first-of-type > dd,\n    :host([bordered]) ::slotted(dt:first-of-type),\n    :host([bordered]) ::slotted(dd:first-of-type) {\n      padding-top: 0;\n    }\n    /* Last row sits flush with the card's bottom padding. */\n    :host([bordered]) .row:last-of-type > dt,\n    :host([bordered]) .row:last-of-type > dd,\n    :host([bordered]) ::slotted(dt:last-of-type),\n    :host([bordered]) ::slotted(dd:last-of-type) {\n      padding-bottom: 0;\n    }\n    /* The divider — drawn on every dt + dd EXCEPT the first row.\n       With column-gap:0 the two cell borders meet exactly, reading as\n       one continuous hairline spanning the full row. */\n    :host([bordered]) .row:not(:first-of-type) > dt,\n    :host([bordered]) .row:not(:first-of-type) > dd,\n    :host([bordered]) ::slotted(dt:not(:first-of-type)),\n    :host([bordered]) ::slotted(dd:not(:first-of-type)) {\n      border-top: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n    }\n\n    /* align=\"between\" — term hard-left, value hard-right (price-list).\n       MUST use max-content for both columns: plain \"auto\" tracks grow\n       to fill available space (auto = minmax(min-content, max-content)\n       with stretching), defeating justify-content:space-between.\n       max-content locks each column to its content's natural width, so\n       leftover container space distributes between them.\n       The visual right-alignment of the value comes from text-align:\n       right on dd (works regardless of how the column resolves). */\n    :host([align=\"between\"][direction=\"horizontal\"]) dl {\n      grid-template-columns: max-content max-content;\n      justify-content: space-between;\n    }\n    :host([align=\"between\"][direction=\"horizontal\"]) dd,\n    :host([align=\"between\"][direction=\"horizontal\"]) ::slotted(dd) {\n      text-align: right;\n    }\n    :host([align=\"between\"][direction=\"horizontal\"]) .dd-content {\n      justify-content: flex-end;\n    }\n\n    /* Striped — alternating row backgrounds. Both render paths target\n       even-indexed rows (rows 2, 4, 6 in 1-indexed = rows 1, 3, 5 in\n       0-indexed) so they stay consistent.\n       Items[] path: .row:nth-child(even) > dt/dd (the .row wrapper is\n       a direct child of dl, so :nth-child(even) IS row 2/4/6).\n       Slotted path: ::slotted(dt:nth-of-type(even)) — among slotted dt\n       siblings, the even-position ones (2nd/4th/6th dt) = rows 2/4/6. */\n    :host([striped]:not([bordered])) .row:nth-of-type(even) > dt,\n    :host([striped]:not([bordered])) .row:nth-of-type(even) > dd,\n    :host([striped]:not([bordered])) ::slotted(dt:nth-of-type(even)),\n    :host([striped]:not([bordered])) ::slotted(dd:nth-of-type(even)) {\n      background: var(--cg-color-surface-cards-emphasis);\n    }\n    :host([striped]:not([bordered])) ::slotted(dt),\n    :host([striped]:not([bordered])) ::slotted(dd),\n    :host([striped]:not([bordered])) dt,\n    :host([striped]:not([bordered])) dd {\n      padding: var(--cg-spacing-6) var(--cg-spacing-8);\n      border-radius: var(--cg-border-radius-50);\n    }\n    /* When both bordered + striped, keep bordered's padding (already\n       set above) and only paint the alternating background. The dividers\n       still work because we're not overriding the border-top rules. */\n    :host([bordered][striped]) .row:nth-of-type(even) > dt,\n    :host([bordered][striped]) .row:nth-of-type(even) > dd,\n    :host([bordered][striped]) ::slotted(dt:nth-of-type(even)),\n    :host([bordered][striped]) ::slotted(dd:nth-of-type(even)) {\n      background: var(--cg-color-surface-cards-emphasis);\n    }\n\n    /* Term + value typography — applies to both slotted dt/dd AND\n       internally rendered dt/dd from the items[] prop. */\n    ::slotted(dt),\n    dt {\n      color: var(--cg-color-input-text-placeholder);\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-medium);\n      line-height: var(--cg-line-height-snug);\n      margin: 0;\n      width: var(--cg-component-definition-list-term-width, auto);\n    }\n\n    ::slotted(dd),\n    dd {\n      color: var(--cg-color-surface-cards-text);\n      font-size: var(--cg-font-size-sm);\n      line-height: var(--cg-line-height-snug);\n      margin: 0;\n      min-width: 0;\n      word-break: break-word;\n    }\n\n    :host([size=\"sm\"]) ::slotted(dt),\n    :host([size=\"sm\"]) dt,\n    :host([size=\"sm\"]) ::slotted(dd),\n    :host([size=\"sm\"]) dd { font-size: var(--cg-font-size-xs); }\n\n    :host([size=\"lg\"]) ::slotted(dt),\n    :host([size=\"lg\"]) dt,\n    :host([size=\"lg\"]) ::slotted(dd),\n    :host([size=\"lg\"]) dd { font-size: var(--cg-font-size-md); }\n\n    /* Vertical layout: extra spacing between pairs. Uses gap from grid\n       row-gap PLUS a margin-top on every dt that isn't the first one,\n       so each pair is visually grouped (dt right above its dd) with a\n       larger gap before the next dt. Applies to both render paths. */\n    :host([direction=\"vertical\"]) dt:not(:first-of-type),\n    :host([direction=\"vertical\"]) ::slotted(dt:not(:first-child)) {\n      margin-top: var(--cg-spacing-8);\n    }\n\n    /* Row wrapper — used by the items[] render path to group each\n       term+value pair into one logical row. display:contents keeps it\n       invisible to grid layout (dt and dd act as direct grid children),\n       while still giving us a sibling element to target for first/last\n       row treatment via .row:first-of-type / :last-of-type / :nth-of-\n       type(even). HTML5 allows <div> wrapping <dt><dd> pairs inside\n       <dl> since 2020. */\n    .row {\n      display: contents;\n    }\n\n    /* dd in items[] path may contain a copy button + the value */\n    .dd-content {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--cg-spacing-6);\n      max-width: 100%;\n    }\n    .dd-value {\n      flex: 1 1 auto;\n      min-width: 0;\n    }\n    .dd-empty {\n      color: var(--cg-color-input-text-placeholder);\n    }\n\n    /* Copy button — visible on the SAME row's hover or focus (clean by\n       default). Per-row reveal via .dd-content:hover scoping; previously\n       used dl:hover which lit up every button when any part of the dl\n       was hovered. */\n    .copy-btn {\n      flex: 0 0 auto;\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      width: var(--cg-spacing-20);\n      height: var(--cg-spacing-20);\n      padding: 0;\n      border: none;\n      background: transparent;\n      color: var(--cg-color-input-text-placeholder);\n      border-radius: var(--cg-border-radius-50);\n      cursor: pointer;\n      opacity: 0;\n      transition:\n        opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    dd:hover .copy-btn,\n    .copy-btn:focus-visible { opacity: 1; }\n    .copy-btn:hover {\n      color: var(--cg-color-surface-cards-text);\n      background: var(--cg-color-action-tertiary-background-hover);\n    }\n    .copy-btn:focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 var(--cg-border-width-300) var(--cg-color-focus-ring);\n    }\n    .copy-btn.copied { color: var(--cg-color-status-success-text-default); opacity: 1; }\n  `];\n\n  /** Layout direction. */\n  @property({ reflect: true }) direction: 'horizontal' | 'vertical' = 'horizontal';\n\n  /**\n   * Term/value alignment in horizontal mode:\n   *   start (default) — term and value sit adjacent on the left (spec sheet)\n   *   between         — term on the far left, value pushed to the far right (price-list)\n   * No-op outside horizontal direction.\n   */\n  @property({ reflect: true }) align: 'start' | 'between' = 'start';\n\n  /** Density. */\n  @property({ reflect: true }) size: 'sm' | 'md' | 'lg' = 'md';\n\n  /** Show outer card border + 24px wrapper padding + row dividers. */\n  @property({ type: Boolean, reflect: true }) bordered = false;\n\n  /** Alternating row backgrounds for long lists. */\n  @property({ type: Boolean, reflect: true }) striped = false;\n\n  /** Legacy: tighter gaps. Prefer `size=\"sm\"`. */\n  @property({ type: Boolean, reflect: true }) compact = false;\n\n  /** Accessible label announced on the <dl>. */\n  @property() label = '';\n\n  /** Optional data-driven items. Slotted dt/dd still render after these. */\n  @property({ type: Array }) items: DefinitionItem[] = [];\n\n  @state() private _copiedIndex = -1;\n\n  private async _copy(index: number, value: string) {\n    if (!value) return;\n    try {\n      await navigator.clipboard.writeText(value);\n      this._copiedIndex = index;\n      this.dispatchEvent(new CustomEvent('cg-definition-copy', {\n        bubbles: true, composed: true,\n        detail: { term: this.items[index]?.term, value },\n      }));\n      setTimeout(() => { this._copiedIndex = -1; }, 1500);\n    } catch {\n      // Clipboard blocked — silent fail.\n    }\n  }\n\n  private _renderItem(it: DefinitionItem, i: number) {\n    const valueText = it.definition == null ? '' : String(it.definition);\n    const term = it.tooltip\n      ? html`<cg-tooltip content=${it.tooltip} position=\"top\"><span>${it.term}</span></cg-tooltip>`\n      : it.term;\n    /* Wrapper div is display:contents in grid modes (transparent to the\n       grid; dt/dd act as direct grid children), and inline-flex chip in\n       inline mode. HTML5 allows <div> wrapping dt/dd pairs inside <dl>.\n       Striped + bordered styling targets .row:nth-child() since each\n       .row is a direct child of dl. */\n    return html`\n      <div class=\"row\">\n        <dt part=\"term\">${term}</dt>\n        <dd part=\"value\">\n          <span class=\"dd-content\">\n            <span class=\"dd-value ${valueText ? '' : 'dd-empty'}\">${valueText || '—'}</span>\n            ${it.copyable && valueText ? html`\n              <button\n                type=\"button\"\n                class=\"copy-btn ${this._copiedIndex === i ? 'copied' : ''}\"\n                part=\"copy-button\"\n                aria-label=\"Copy ${it.term}\"\n                @click=${() => this._copy(i, valueText)}\n              >\n                <cg-icon name=${this._copiedIndex === i ? 'check' : 'copy'} size=\"xs\"></cg-icon>\n              </button>\n            ` : nothing}\n          </span>\n        </dd>\n      </div>\n    `;\n  }\n\n  override render() {\n    return html`\n      <dl part=\"list\" aria-label=${this.label || nothing}>\n        ${this.items.map((it, i) => this._renderItem(it, i))}\n        <slot></slot>\n      </dl>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-definition-list': CgDefinitionList;\n  }\n}\n"],"names":["CgDefinitionList","LitElement","index","value","it","i","valueText","term","html","nothing","hostBlock","reducedMotion","css","__decorateClass","property","state","customElement"],"mappings":";;;;;;;;;;AAuEO,IAAMA,IAAN,cAA+BC,EAAW;AAAA,EAA1C,cAAA;AAAA,UAAA,GAAA,SAAA,GAiPwB,KAAA,YAAuC,cAQvC,KAAA,QAA6B,SAG7B,KAAA,OAA2B,MAGZ,KAAA,WAAW,IAGX,KAAA,UAAU,IAGV,KAAA,UAAU,IAG1C,KAAA,QAAQ,IAGO,KAAA,QAA0B,CAAA,GAE5C,KAAQ,eAAe;AAAA,EAAA;AAAA,EAEhC,MAAc,MAAMC,GAAeC,GAAe;AAChD,QAAKA;AACL,UAAI;AACF,cAAM,UAAU,UAAU,UAAUA,CAAK,GACzC,KAAK,eAAeD,GACpB,KAAK,cAAc,IAAI,YAAY,sBAAsB;AAAA,UACvD,SAAS;AAAA,UAAM,UAAU;AAAA,UACzB,QAAQ,EAAE,MAAM,KAAK,MAAMA,CAAK,GAAG,MAAM,OAAAC,EAAA;AAAA,QAAM,CAChD,CAAC,GACF,WAAW,MAAM;AAAE,eAAK,eAAe;AAAA,QAAI,GAAG,IAAI;AAAA,MACpD,QAAQ;AAAA,MAER;AAAA,EACF;AAAA,EAEQ,YAAYC,GAAoBC,GAAW;AACjD,UAAMC,IAAYF,EAAG,cAAc,OAAO,KAAK,OAAOA,EAAG,UAAU,GAC7DG,IAAOH,EAAG,UACZI,wBAA2BJ,EAAG,OAAO,yBAAyBA,EAAG,IAAI,yBACrEA,EAAG;AAMP,WAAOI;AAAA;AAAA,0BAEeD,CAAI;AAAA;AAAA;AAAA,oCAGMD,IAAY,KAAK,UAAU,KAAKA,KAAa,GAAG;AAAA,cACtEF,EAAG,YAAYE,IAAYE;AAAA;AAAA;AAAA,kCAGP,KAAK,iBAAiBH,IAAI,WAAW,EAAE;AAAA;AAAA,mCAEtCD,EAAG,IAAI;AAAA,yBACjB,MAAM,KAAK,MAAMC,GAAGC,CAAS,CAAC;AAAA;AAAA,gCAEvB,KAAK,iBAAiBD,IAAI,UAAU,MAAM;AAAA;AAAA,gBAE1DI,CAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EAKrB;AAAA,EAES,SAAS;AAChB,WAAOD;AAAA,mCACwB,KAAK,SAASC,CAAO;AAAA,UAC9C,KAAK,MAAM,IAAI,CAACL,GAAIC,MAAM,KAAK,YAAYD,GAAIC,CAAC,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA,EAI1D;AACF;AAvUaL,EACK,SAAS,CAACU,GAAWC,GAAeC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GA6OnD;AAG4BC,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GAjPhBd,EAiPkB,WAAA,aAAA,CAAA;AAQAa,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GAzPhBd,EAyPkB,WAAA,SAAA,CAAA;AAGAa,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GA5PhBd,EA4PkB,WAAA,QAAA,CAAA;AAGea,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GA/P/Bd,EA+PiC,WAAA,YAAA,CAAA;AAGAa,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAlQ/Bd,EAkQiC,WAAA,WAAA,CAAA;AAGAa,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GArQ/Bd,EAqQiC,WAAA,WAAA,CAAA;AAGhCa,EAAA;AAAA,EAAXC,EAAA;AAAS,GAxQCd,EAwQC,WAAA,SAAA,CAAA;AAGea,EAAA;AAAA,EAA1BC,EAAS,EAAE,MAAM,MAAA,CAAO;AAAA,GA3Qdd,EA2QgB,WAAA,SAAA,CAAA;AAEVa,EAAA;AAAA,EAAhBE,EAAA;AAAM,GA7QIf,EA6QM,WAAA,gBAAA,CAAA;AA7QNA,IAANa,EAAA;AAAA,EADNG,EAAc,oBAAoB;AAAA,GACtBhB,CAAA;"}

package/dist/components/cg-draggable/cg-draggable.d.ts

@@ -1,53 +0,0 @@
-import { LitElement } from 'lit';
-/**
- * @element cg-draggable
- * Wraps content that can be picked up with a pointer and dropped on a
- * matching `<cg-droppable>`. Pointer-event-based — works on mouse, touch,
- * and stylus.
- *
- * Carries an opaque `payload` (object reference is preserved across the
- * drag) and a `type` tag that the droppable filters on. The dragged
- * element is visually translated under the pointer; a `dragging` attribute
- * on the host lets consumers style the source state.
- *
- * @example
- * ```html
- * <cg-draggable type="card" .payload=${cardData}>
- *   <cg-card>…</cg-card>
- * </cg-draggable>
- * ```
- *
- * @slot - The draggable content.
- *
- * @fires {CustomEvent<{type: string, payload: unknown}>} cg-drag-start - Drag begins
- * @fires {CustomEvent<{type: string, payload: unknown, dropped: boolean}>} cg-drag-end - Drag ends (with or without a successful drop)
- */
-export declare class CgDraggable extends LitElement {
-    static styles: import('lit').CSSResult[];
-    /** Identifier matched against cg-droppable.accepts. */
-    type: string;
-    /** Application payload passed to the droppable on drop. */
-    payload: unknown;
-    /** Disable picking up. */
-    disabled: boolean;
-    /** Reflects while a drag from this element is active. */
-    dragging: boolean;
-    private _origin;
-    private _pointerId;
-    private _onPointerDown;
-    private _onPointerMove;
-    private _onPointerUp;
-    private _onPointerCancel;
-    private _onKeyDown;
-    private _finishDrag;
-    private _cleanupAfterDrag;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    render(): import('lit').TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'cg-draggable': CgDraggable;
-    }
-}
-//# sourceMappingURL=cg-draggable.d.ts.map

package/dist/components/cg-draggable/cg-draggable.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"cg-draggable.d.ts","sourceRoot":"","sources":["../../../src/components/cg-draggable/cg-draggable.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAK5C;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,qBACa,WAAY,SAAQ,UAAU;IACzC,OAAgB,MAAM,4BAenB;IAEH,uDAAuD;IAC3C,IAAI,SAAM;IAEtB,2DAA2D;IAC3B,OAAO,EAAE,OAAO,CAAQ;IAExD,0BAA0B;IACkB,QAAQ,UAAS;IAE7D,yDAAyD;IACb,QAAQ,UAAS;IAEpD,OAAO,CAAC,OAAO,CAAyC;IAEjE,OAAO,CAAC,UAAU,CAAuB;IAEzC,OAAO,CAAC,cAAc,CAepB;IAEF,OAAO,CAAC,cAAc,CAMpB;IAEF,OAAO,CAAC,YAAY,CAGlB;IAEF,OAAO,CAAC,gBAAgB,CAGtB;IAEF,OAAO,CAAC,UAAU,CAMhB;IAEF,OAAO,CAAC,WAAW;IAanB,OAAO,CAAC,iBAAiB;IAehB,iBAAiB,IAAI,IAAI;IASzB,oBAAoB,IAAI,IAAI;IAS5B,MAAM;CAGhB;AAmBD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAC;KAC7B;CACF"}

package/dist/components/cg-draggable/cg-draggable.js

@@ -1,136 +0,0 @@
-import { css as h, LitElement as u, html as g } from "lit";
-import { property as l, state as f, customElement as v } from "lit/decorators.js";
-import { h as _, r as y } from "../../chunks/premium.css-9I4kHrsl.js";
-let r = null;
-function m() {
-  return r !== null;
-}
-function E(t, e, n) {
-  r || (r = t, document.dispatchEvent(new CustomEvent("cg-drag-start", {
-    detail: { ...t, clientX: e, clientY: n }
-  })));
-}
-function b(t, e) {
-  r && document.dispatchEvent(new CustomEvent("cg-drag-move", {
-    detail: { ...r, clientX: t, clientY: e }
-  }));
-}
-function D(t, e, n) {
-  if (!r) return null;
-  const i = r;
-  return document.dispatchEvent(new CustomEvent("cg-drag-end", {
-    detail: { ...i, clientX: t, clientY: e, dropped: n }
-  })), r = null, i;
-}
-function p() {
-  r && (document.dispatchEvent(new CustomEvent("cg-drag-end", {
-    detail: { ...r, clientX: -1, clientY: -1, dropped: !1 }
-  })), r = null);
-}
-var w = Object.defineProperty, P = Object.getOwnPropertyDescriptor, a = (t, e, n, i) => {
-  for (var s = i > 1 ? void 0 : i ? P(e, n) : e, c = t.length - 1, d; c >= 0; c--)
-    (d = t[c]) && (s = (i ? d(e, n, s) : d(s)) || s);
-  return i && s && w(e, n, s), s;
-};
-let o = class extends u {
-  constructor() {
-    super(...arguments), this.type = "", this.payload = null, this.disabled = !1, this.dragging = !1, this._origin = null, this._pointerId = null, this._onPointerDown = (t) => {
-      if (!(this.disabled || m()) && !(t.button !== void 0 && t.button !== 0)) {
-        this._pointerId = t.pointerId, this._origin = { x: t.clientX, y: t.clientY }, this.dragging = !0;
-        try {
-          this.setPointerCapture(t.pointerId);
-        } catch {
-        }
-        E({ payload: this.payload, type: this.type, source: this }, t.clientX, t.clientY), this.dispatchEvent(new CustomEvent("cg-drag-start", {
-          detail: { type: this.type, payload: this.payload },
-          bubbles: !0,
-          composed: !0
-        }));
-      }
-    }, this._onPointerMove = (t) => {
-      if (!this.dragging || t.pointerId !== this._pointerId || !this._origin) return;
-      const e = t.clientX - this._origin.x, n = t.clientY - this._origin.y;
-      this.style.transform = `translate(${e}px, ${n}px)`, b(t.clientX, t.clientY);
-    }, this._onPointerUp = (t) => {
-      !this.dragging || t.pointerId !== this._pointerId || this._finishDrag(t.clientX, t.clientY, !1);
-    }, this._onPointerCancel = (t) => {
-      !this.dragging || t.pointerId !== this._pointerId || this._finishDrag(t.clientX, t.clientY, !0);
-    }, this._onKeyDown = (t) => {
-      t.key === "Escape" && this.dragging && (t.preventDefault(), p(), this._cleanupAfterDrag(!1));
-    };
-  }
-  _finishDrag(t, e, n) {
-    if (n) {
-      p(), this._cleanupAfterDrag(!1);
-      return;
-    }
-    const i = C(t, e);
-    this._cleanupAfterDrag(i);
-  }
-  _cleanupAfterDrag(t) {
-    if (this.style.transform = "", this._pointerId !== null)
-      try {
-        this.releasePointerCapture(this._pointerId);
-      } catch {
-      }
-    this.dragging = !1, this._pointerId = null, this._origin = null, this.dispatchEvent(new CustomEvent("cg-drag-end", {
-      detail: { type: this.type, payload: this.payload, dropped: t },
-      bubbles: !0,
-      composed: !0
-    }));
-  }
-  connectedCallback() {
-    super.connectedCallback(), this.addEventListener("pointerdown", this._onPointerDown), this.addEventListener("pointermove", this._onPointerMove), this.addEventListener("pointerup", this._onPointerUp), this.addEventListener("pointercancel", this._onPointerCancel), this.addEventListener("keydown", this._onKeyDown);
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback(), this.removeEventListener("pointerdown", this._onPointerDown), this.removeEventListener("pointermove", this._onPointerMove), this.removeEventListener("pointerup", this._onPointerUp), this.removeEventListener("pointercancel", this._onPointerCancel), this.removeEventListener("keydown", this._onKeyDown);
-  }
-  render() {
-    return g`<slot></slot>`;
-  }
-};
-o.styles = [_, y, h`
-    :host {
-      display: block;
-      touch-action: none;
-      cursor: grab;
-    }
-    :host([disabled]) {
-      cursor: default;
-      touch-action: auto;
-    }
-    :host([dragging]) {
-      cursor: grabbing;
-      opacity: var(--cg-component-draggable-opacity, 0.6);
-      z-index: 1;
-    }
-  `];
-a([
-  l()
-], o.prototype, "type", 2);
-a([
-  l({ attribute: !1 })
-], o.prototype, "payload", 2);
-a([
-  l({ type: Boolean, reflect: !0 })
-], o.prototype, "disabled", 2);
-a([
-  l({ type: Boolean, reflect: !0 })
-], o.prototype, "dragging", 2);
-a([
-  f()
-], o.prototype, "_origin", 2);
-o = a([
-  v("cg-draggable")
-], o);
-function C(t, e) {
-  let n = !1;
-  const i = () => {
-    n = !0;
-  };
-  return document.addEventListener("cg-drop", i, { once: !0 }), D(t, e, !1), document.removeEventListener("cg-drop", i), n;
-}
-export {
-  o as CgDraggable
-};
-//# sourceMappingURL=cg-draggable.js.map

package/dist/components/cg-draggable/cg-draggable.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"cg-draggable.js","sources":["../../../src/utils/drag-manager.ts","../../../src/components/cg-draggable/cg-draggable.ts"],"sourcesContent":["/**\n * Module-scope drag coordinator shared between cg-draggable and cg-droppable.\n *\n * Pointer-event-based drag/drop works uniformly across mouse, touch, and\n * stylus and survives modern bundling. Each active drag broadcasts on the\n * document so any cg-droppable in any subtree can opt in.\n */\n\nexport type DragType = string;\n\nexport interface DragSession {\n  /** Application-defined payload. cg-droppable receives this on cg-drop. */\n  payload: unknown;\n  /** Type tag — cg-droppable.accepts is matched against this. */\n  type: DragType;\n  /** Source element that initiated the drag. */\n  source: HTMLElement;\n}\n\nexport interface DragMoveDetail extends DragSession {\n  clientX: number;\n  clientY: number;\n}\n\nexport interface DragEndDetail extends DragMoveDetail {\n  /** If true, the drop landed on a registered droppable. */\n  dropped: boolean;\n}\n\nlet active: DragSession | null = null;\n\n/** True while a drag is in progress. */\nexport function isDragging(): boolean {\n  return active !== null;\n}\n\n/** Start a drag session. Idempotent: a second start while active is ignored. */\nexport function startDrag(session: DragSession, x: number, y: number): void {\n  if (active) return;\n  active = session;\n  document.dispatchEvent(new CustomEvent<DragMoveDetail>('cg-drag-start', {\n    detail: { ...session, clientX: x, clientY: y },\n  }));\n}\n\n/** Broadcast a move during the current drag. */\nexport function moveDrag(x: number, y: number): void {\n  if (!active) return;\n  document.dispatchEvent(new CustomEvent<DragMoveDetail>('cg-drag-move', {\n    detail: { ...active, clientX: x, clientY: y },\n  }));\n}\n\n/**\n * End the current drag session. Returns the session that was active so\n * cg-draggable can fire its own end event with the same payload.\n */\nexport function endDrag(x: number, y: number, dropped: boolean): DragSession | null {\n  if (!active) return null;\n  const finished = active;\n  document.dispatchEvent(new CustomEvent<DragEndDetail>('cg-drag-end', {\n    detail: { ...finished, clientX: x, clientY: y, dropped },\n  }));\n  active = null;\n  return finished;\n}\n\n/** Cancel any in-progress drag without firing a drop. Useful for Escape key handling. */\nexport function cancelDrag(): void {\n  if (!active) return;\n  document.dispatchEvent(new CustomEvent<DragEndDetail>('cg-drag-end', {\n    detail: { ...active, clientX: -1, clientY: -1, dropped: false },\n  }));\n  active = null;\n}\n\n/** Inspect the current session without ending it. Returns null when no drag is active. */\nexport function currentSession(): DragSession | null {\n  return active;\n}\n","import { LitElement, html, css } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\nimport { startDrag, moveDrag, endDrag, cancelDrag, isDragging } from '../../utils/drag-manager.js';\n\n/**\n * @element cg-draggable\n * Wraps content that can be picked up with a pointer and dropped on a\n * matching `<cg-droppable>`. Pointer-event-based — works on mouse, touch,\n * and stylus.\n *\n * Carries an opaque `payload` (object reference is preserved across the\n * drag) and a `type` tag that the droppable filters on. The dragged\n * element is visually translated under the pointer; a `dragging` attribute\n * on the host lets consumers style the source state.\n *\n * @example\n * ```html\n * <cg-draggable type=\"card\" .payload=${cardData}>\n *   <cg-card>…</cg-card>\n * </cg-draggable>\n * ```\n *\n * @slot - The draggable content.\n *\n * @fires {CustomEvent<{type: string, payload: unknown}>} cg-drag-start - Drag begins\n * @fires {CustomEvent<{type: string, payload: unknown, dropped: boolean}>} cg-drag-end - Drag ends (with or without a successful drop)\n */\n@customElement('cg-draggable')\nexport class CgDraggable extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    :host {\n      display: block;\n      touch-action: none;\n      cursor: grab;\n    }\n    :host([disabled]) {\n      cursor: default;\n      touch-action: auto;\n    }\n    :host([dragging]) {\n      cursor: grabbing;\n      opacity: var(--cg-component-draggable-opacity, 0.6);\n      z-index: 1;\n    }\n  `];\n\n  /** Identifier matched against cg-droppable.accepts. */\n  @property() type = '';\n\n  /** Application payload passed to the droppable on drop. */\n  @property({ attribute: false }) payload: unknown = null;\n\n  /** Disable picking up. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** Reflects while a drag from this element is active. */\n  @property({ type: Boolean, reflect: true }) dragging = false;\n\n  @state() private _origin: { x: number; y: number } | null = null;\n\n  private _pointerId: number | null = null;\n\n  private _onPointerDown = (e: PointerEvent): void => {\n    if (this.disabled || isDragging()) return;\n    if (e.button !== undefined && e.button !== 0) return;\n\n    this._pointerId = e.pointerId;\n    this._origin = { x: e.clientX, y: e.clientY };\n    this.dragging = true;\n    try { this.setPointerCapture(e.pointerId); } catch { /* happy-dom */ }\n\n    startDrag({ payload: this.payload, type: this.type, source: this }, e.clientX, e.clientY);\n\n    this.dispatchEvent(new CustomEvent('cg-drag-start', {\n      detail: { type: this.type, payload: this.payload },\n      bubbles: true, composed: true,\n    }));\n  };\n\n  private _onPointerMove = (e: PointerEvent): void => {\n    if (!this.dragging || e.pointerId !== this._pointerId || !this._origin) return;\n    const dx = e.clientX - this._origin.x;\n    const dy = e.clientY - this._origin.y;\n    this.style.transform = `translate(${dx}px, ${dy}px)`;\n    moveDrag(e.clientX, e.clientY);\n  };\n\n  private _onPointerUp = (e: PointerEvent): void => {\n    if (!this.dragging || e.pointerId !== this._pointerId) return;\n    this._finishDrag(e.clientX, e.clientY, false);\n  };\n\n  private _onPointerCancel = (e: PointerEvent): void => {\n    if (!this.dragging || e.pointerId !== this._pointerId) return;\n    this._finishDrag(e.clientX, e.clientY, true);\n  };\n\n  private _onKeyDown = (e: KeyboardEvent): void => {\n    if (e.key === 'Escape' && this.dragging) {\n      e.preventDefault();\n      cancelDrag();\n      this._cleanupAfterDrag(false);\n    }\n  };\n\n  private _finishDrag(x: number, y: number, cancelled: boolean): void {\n    if (cancelled) {\n      cancelDrag();\n      this._cleanupAfterDrag(false);\n      return;\n    }\n    // The droppable hit-test happens inside the drag-manager event flow:\n    // listening cg-droppables snapshot whether they were under (x,y) when\n    // cg-drag-end fires. We expose `dropped: true` if any droppable accepted.\n    const dropped = endDragAndDetectDrop(x, y);\n    this._cleanupAfterDrag(dropped);\n  }\n\n  private _cleanupAfterDrag(dropped: boolean): void {\n    this.style.transform = '';\n    if (this._pointerId !== null) {\n      try { this.releasePointerCapture(this._pointerId); } catch { /* ignore */ }\n    }\n    this.dragging = false;\n    this._pointerId = null;\n    this._origin = null;\n\n    this.dispatchEvent(new CustomEvent('cg-drag-end', {\n      detail: { type: this.type, payload: this.payload, dropped },\n      bubbles: true, composed: true,\n    }));\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener('pointerdown', this._onPointerDown);\n    this.addEventListener('pointermove', this._onPointerMove);\n    this.addEventListener('pointerup', this._onPointerUp);\n    this.addEventListener('pointercancel', this._onPointerCancel);\n    this.addEventListener('keydown', this._onKeyDown);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener('pointerdown', this._onPointerDown);\n    this.removeEventListener('pointermove', this._onPointerMove);\n    this.removeEventListener('pointerup', this._onPointerUp);\n    this.removeEventListener('pointercancel', this._onPointerCancel);\n    this.removeEventListener('keydown', this._onKeyDown);\n  }\n\n  override render() {\n    return html`<slot></slot>`;\n  }\n}\n\n/**\n * Hit-test against registered droppables at (x, y). Walks up from the\n * topmost element under the point looking for the closest cg-droppable\n * with a matching `accepts` type. Returns true if a drop is dispatched.\n */\nfunction endDragAndDetectDrop(x: number, y: number): boolean {\n  // The drag-manager's endDrag broadcasts cg-drag-end with the coords; each\n  // cg-droppable listens and decides for itself. We just call endDrag and\n  // observe the dropped flag through a shared mutable cell.\n  let dropped = false;\n  const onDrop = () => { dropped = true; };\n  document.addEventListener('cg-drop', onDrop, { once: true });\n  endDrag(x, y, false);\n  document.removeEventListener('cg-drop', onDrop);\n  return dropped;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-draggable': CgDraggable;\n  }\n}\n"],"names":["active","isDragging","startDrag","session","x","y","moveDrag","endDrag","dropped","finished","cancelDrag","CgDraggable","LitElement","e","dx","dy","cancelled","endDragAndDetectDrop","html","hostBlock","reducedMotion","css","__decorateClass","property","state","customElement","onDrop"],"mappings":"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"}

package/dist/components/cg-droppable/cg-droppable.d.ts

@@ -1,57 +0,0 @@
-import { LitElement } from 'lit';
-/**
- * @element cg-droppable
- * Drop zone that pairs with `<cg-draggable>`. Listens to the active drag
- * session (broadcast on `document` by the drag-manager) and fires
- * `cg-drop` when a draggable of an accepted type is released over its
- * bounding box.
- *
- * The `over` boolean attribute reflects while a valid drag hovers, so
- * consumers can style the hover state via attribute selectors. The
- * `invalid-over` attribute reflects when an out-of-type drag hovers.
- *
- * @example
- * ```html
- * <cg-droppable accepts="card" @cg-drop=${onDrop}>
- *   <div class="column">Drop cards here</div>
- * </cg-droppable>
- * ```
- *
- * @example Multiple accepted types
- * ```html
- * <cg-droppable accepts="card task" @cg-drop=${onDrop}>…</cg-droppable>
- * ```
- *
- * @slot - The drop-zone content.
- *
- * @fires {CustomEvent<{type: string, payload: unknown, clientX: number, clientY: number}>} cg-drop - A draggable of an accepted type was dropped over this zone.
- * @fires {CustomEvent<{type: string, payload: unknown}>} cg-drop-enter - A valid drag entered the zone
- * @fires {CustomEvent<{type: string, payload: unknown}>} cg-drop-leave - A valid drag left the zone
- */
-export declare class CgDroppable extends LitElement {
-    static styles: import('lit').CSSResult[];
-    /** Space-separated list of accepted draggable types. Empty = accept any. */
-    accepts: string;
-    /** Disable the drop zone (still listens but never accepts). */
-    disabled: boolean;
-    /** Reflects while a valid drag hovers. */
-    over: boolean;
-    /** Reflects while an out-of-type drag hovers. */
-    invalidOver: boolean;
-    private _wasOver;
-    private _onDragStart;
-    private _onDragMove;
-    private _onDragEnd;
-    private _evaluateHover;
-    private _pointInside;
-    private _accepts;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    render(): import('lit').TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'cg-droppable': CgDroppable;
-    }
-}
-//# sourceMappingURL=cg-droppable.d.ts.map