@sankhyatronics/sankhya-cms 0.0.0-stage → 0.1.0

package/dist/chunk-5UFRGZWG.js

@@ -0,0 +1,268 @@
+import {
+  chevronIcon,
+  externalLinkIcon
+} from "./chunk-3TCP25JG.js";
+import {
+  controlBaseStyles,
+  eyebrowLabelStyles,
+  fontFamilyStyles
+} from "./chunk-RHAOQ6K4.js";
+import {
+  __decorateClass
+} from "./chunk-EUXUH3YW.js";
+
+// src/select/Select.ts
+import { LitElement, css, html, nothing } from "lit";
+import { customElement, property, query } from "lit/decorators.js";
+var instanceCounter = 0;
+var Select = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.options = [];
+    this.value = "";
+    this.placeholder = "Select\u2026";
+    this.fieldLabel = "";
+    this.linkHref = "";
+    this.linkLabel = "Open";
+    this.selectLabel = "";
+    this.disabled = false;
+    this.ghost = false;
+    this.instanceId = ++instanceCounter;
+    this.fieldLabelId = `st-select-label-${this.instanceId}`;
+    this.onChange = (event) => {
+      const newValue = event.target.value;
+      if (newValue === this.value) return;
+      this.value = newValue;
+      this.dispatchEvent(new CustomEvent("select-change", { detail: { value: newValue }, bubbles: true, composed: true }));
+    };
+  }
+  updated(changed) {
+    if (changed.has("value") || changed.has("options")) {
+      const hasValue = this.options.some((option) => option.value === this.value);
+      const nextValue = hasValue ? this.value : "";
+      if (this.selectEl.value !== nextValue) this.selectEl.value = nextValue;
+    }
+  }
+  render() {
+    const hasValue = this.options.some((option) => option.value === this.value);
+    return html`
+      ${this.fieldLabel ? html`
+            <span class="field-label-row">
+              ${this.linkHref ? html`
+                    <a
+                      part="field-label-link"
+                      class="field-label-link"
+                      href=${this.linkHref}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      title=${this.linkLabel}
+                      aria-label=${this.linkLabel}
+                    >
+                      ${externalLinkIcon(11)}
+                    </a>
+                  ` : nothing}
+              <span part="field-label" id=${this.fieldLabelId} class="field-label">${this.fieldLabel}</span>
+            </span>
+          ` : nothing}
+      <select
+        part="select"
+        aria-label=${!this.fieldLabel && this.selectLabel ? this.selectLabel : nothing}
+        aria-labelledby=${this.fieldLabel ? this.fieldLabelId : nothing}
+        ?disabled=${this.disabled}
+        @change=${this.onChange}
+      >
+        <button part="trigger" class="trigger" type="button">
+          <selectedcontent></selectedcontent>
+          <span class="caret">${chevronIcon("down", 10)}</span>
+        </button>
+        <option value="" ?selected=${!hasValue} disabled hidden>${this.placeholder}</option>
+        ${this.options.map(
+      (option) => html`<option part="option" value=${option.value} ?selected=${option.value === this.value}>${option.label}</option>`
+    )}
+      </select>
+    `;
+  }
+};
+Select.styles = css`
+    ${controlBaseStyles}
+
+    :host {
+      display: inline-flex;
+      flex-direction: column;
+      gap: var(--st-space-4);
+      min-width: 0;
+      ${fontFamilyStyles}
+    }
+
+    .field-label-row {
+      display: flex;
+      align-items: center;
+      gap: var(--st-space-6);
+      min-width: 0;
+    }
+
+    .field-label {
+      font-size: var(--st-text-xs);
+      ${eyebrowLabelStyles}
+    }
+
+    .field-label-link {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex: none;
+      color: var(--st-color-text-faint);
+    }
+
+    .field-label-link:hover {
+      color: var(--st-color-text-strong);
+    }
+
+    select {
+      appearance: base-select;
+      width: 100%;
+      min-width: 0;
+      border: 0;
+      padding: 0;
+      background: transparent;
+      font: inherit;
+      color: inherit;
+    }
+
+    select::picker(select) {
+      appearance: base-select;
+      margin-top: var(--st-space-4);
+      background: var(--st-color-surface);
+      border: 1px solid var(--st-color-border);
+      border-radius: var(--st-radius-sm);
+      box-shadow: 0 4px 16px var(--st-shadow-color-sm);
+      padding: var(--st-space-4) 0;
+    }
+
+    .trigger {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: var(--st-space-8);
+      width: 100%;
+      padding: var(--st-space-8) var(--st-space-10);
+      border-radius: var(--st-radius-sm);
+      border: 1px solid var(--st-color-border);
+      background: var(--st-color-surface);
+      color: var(--st-color-text-strong);
+      font: inherit;
+      font-size: var(--st-text-base);
+      box-sizing: border-box;
+      text-align: left;
+      cursor: pointer;
+    }
+
+    .trigger:hover,
+    .trigger:focus-visible {
+      background: var(--st-color-hover);
+    }
+
+    /* Borderless variant for a header/toolbar utility slot, so it reads as the same kind of
+     * hover-only control as st-icon-button and st-header's own language trigger (same fixed
+     * height, no permanent visible border) instead of a form-field box. */
+    :host([ghost]) .trigger {
+      height: var(--st-size-32);
+      padding: 0 var(--st-space-8);
+      border: none;
+      background: transparent;
+    }
+
+    :host([ghost]) .trigger:hover,
+    :host([ghost]) .trigger:focus-visible {
+      background: var(--st-color-hover);
+    }
+
+    select:disabled .trigger {
+      color: var(--st-color-text-muted);
+      cursor: not-allowed;
+    }
+
+    selectedcontent {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    select:has(option[value='']:checked) selectedcontent {
+      color: var(--st-color-text-muted);
+    }
+
+    select::picker-icon {
+      display: none;
+    }
+
+    .caret {
+      display: flex;
+      flex: none;
+      color: var(--st-color-text-muted);
+    }
+
+    option {
+      display: block;
+      padding: var(--st-space-8) var(--st-space-10);
+      font-size: var(--st-text-base);
+      color: var(--st-color-text);
+      cursor: pointer;
+    }
+
+    option[hidden] {
+      display: none;
+    }
+
+    option:hover,
+    option:focus {
+      background: var(--st-color-hover);
+    }
+
+    option:checked {
+      color: var(--st-color-text-strong);
+      font-weight: var(--st-font-weight-semibold);
+    }
+
+    option::checkmark {
+      display: none;
+    }
+  `;
+__decorateClass([
+  property({ attribute: false })
+], Select.prototype, "options", 2);
+__decorateClass([
+  property({ type: String })
+], Select.prototype, "value", 2);
+__decorateClass([
+  property({ type: String })
+], Select.prototype, "placeholder", 2);
+__decorateClass([
+  property({ type: String, attribute: "field-label" })
+], Select.prototype, "fieldLabel", 2);
+__decorateClass([
+  property({ type: String, attribute: "link-href" })
+], Select.prototype, "linkHref", 2);
+__decorateClass([
+  property({ type: String, attribute: "link-label" })
+], Select.prototype, "linkLabel", 2);
+__decorateClass([
+  property({ type: String, attribute: "select-label" })
+], Select.prototype, "selectLabel", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], Select.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], Select.prototype, "ghost", 2);
+__decorateClass([
+  query("select")
+], Select.prototype, "selectEl", 2);
+Select = __decorateClass([
+  customElement("st-select")
+], Select);
+
+export {
+  Select
+};
+//# sourceMappingURL=chunk-5UFRGZWG.js.map

package/dist/chunk-5UFRGZWG.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/select/Select.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\r\nimport type { PropertyValues } from 'lit';\r\nimport { customElement, property, query } from 'lit/decorators.js';\r\n\r\nimport { chevronIcon, externalLinkIcon } from '../shared/icons';\r\nimport { controlBaseStyles, eyebrowLabelStyles, fontFamilyStyles } from '../shared/styles';\r\nimport type { SelectOption } from './SelectEvents';\r\nimport type { SelectChangedEventDetail } from './SelectEvents';\r\n\r\nlet instanceCounter = 0;\r\n\r\n/**\r\n * A fully custom-styled replacement for native `<select>`, used everywhere\r\n * the wizard needs a single-choice dropdown (template source, list, document\r\n * library, admin roles, ...).\r\n *\r\n * Built on the CSS Customizable Select API (`appearance: base-select`) —\r\n * still a real `<select>`/`<option>` element tree, so focus, keyboard\r\n * (arrows/Home/End/typeahead), and ARIA all come from the browser for free,\r\n * but the trigger (`<button>`/`<selectedcontent>`) and popup\r\n * (`::picker(select)`) are fully styleable instead of OS-rendered. Chromium\r\n * only for now (Firefox/Safari fall back to an unstyled native `<select>` —\r\n * the extra `<button>`/`<selectedcontent>` markup is simply not rendered by\r\n * browsers that don't support the parsing/CSS additions, so the control\r\n * still works there, just without the custom look).\r\n *\r\n * `options` intentionally has no \"unselected\" placeholder entry — set\r\n * `value=\"\"` (or any value with no matching option) and it falls back to\r\n * showing `placeholder` in the trigger instead, letting callers swap the\r\n * placeholder text dynamically (e.g. \"Select a list\" vs \"Select a list\r\n * first\") without needing a synthetic option in the list. Internally this is\r\n * a real hidden/disabled `<option value=\"\">`, since a native `<select>`\r\n * always has *some* option selected.\r\n *\r\n * Fires `select-change` (detail: `{ value }`) only when the value actually\r\n * changes, matching native `<select>`'s `change` event semantics.\r\n *\r\n * `link-href` optionally renders an external-link button in front of\r\n * `field-label` — the same glyph/placement as the \"open library\" links\r\n * placed next to the Templates/Save-location breadcrumbs — for callers that\r\n * want a one-click way to open whatever the current selection points at\r\n * (e.g. the SharePoint site or library) in a new tab.\r\n */\r\n@customElement('st-select')\r\nexport class Select extends LitElement {\r\n  static styles = css`\r\n    ${controlBaseStyles}\r\n\r\n    :host {\r\n      display: inline-flex;\r\n      flex-direction: column;\r\n      gap: var(--st-space-4);\r\n      min-width: 0;\r\n      ${fontFamilyStyles}\r\n    }\r\n\r\n    .field-label-row {\r\n      display: flex;\r\n      align-items: center;\r\n      gap: var(--st-space-6);\r\n      min-width: 0;\r\n    }\r\n\r\n    .field-label {\r\n      font-size: var(--st-text-xs);\r\n      ${eyebrowLabelStyles}\r\n    }\r\n\r\n    .field-label-link {\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      flex: none;\r\n      color: var(--st-color-text-faint);\r\n    }\r\n\r\n    .field-label-link:hover {\r\n      color: var(--st-color-text-strong);\r\n    }\r\n\r\n    select {\r\n      appearance: base-select;\r\n      width: 100%;\r\n      min-width: 0;\r\n      border: 0;\r\n      padding: 0;\r\n      background: transparent;\r\n      font: inherit;\r\n      color: inherit;\r\n    }\r\n\r\n    select::picker(select) {\r\n      appearance: base-select;\r\n      margin-top: var(--st-space-4);\r\n      background: var(--st-color-surface);\r\n      border: 1px solid var(--st-color-border);\r\n      border-radius: var(--st-radius-sm);\r\n      box-shadow: 0 4px 16px var(--st-shadow-color-sm);\r\n      padding: var(--st-space-4) 0;\r\n    }\r\n\r\n    .trigger {\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: space-between;\r\n      gap: var(--st-space-8);\r\n      width: 100%;\r\n      padding: var(--st-space-8) var(--st-space-10);\r\n      border-radius: var(--st-radius-sm);\r\n      border: 1px solid var(--st-color-border);\r\n      background: var(--st-color-surface);\r\n      color: var(--st-color-text-strong);\r\n      font: inherit;\r\n      font-size: var(--st-text-base);\r\n      box-sizing: border-box;\r\n      text-align: left;\r\n      cursor: pointer;\r\n    }\r\n\r\n    .trigger:hover,\r\n    .trigger:focus-visible {\r\n      background: var(--st-color-hover);\r\n    }\r\n\r\n    /* Borderless variant for a header/toolbar utility slot, so it reads as the same kind of\r\n     * hover-only control as st-icon-button and st-header's own language trigger (same fixed\r\n     * height, no permanent visible border) instead of a form-field box. */\r\n    :host([ghost]) .trigger {\r\n      height: var(--st-size-32);\r\n      padding: 0 var(--st-space-8);\r\n      border: none;\r\n      background: transparent;\r\n    }\r\n\r\n    :host([ghost]) .trigger:hover,\r\n    :host([ghost]) .trigger:focus-visible {\r\n      background: var(--st-color-hover);\r\n    }\r\n\r\n    select:disabled .trigger {\r\n      color: var(--st-color-text-muted);\r\n      cursor: not-allowed;\r\n    }\r\n\r\n    selectedcontent {\r\n      overflow: hidden;\r\n      text-overflow: ellipsis;\r\n      white-space: nowrap;\r\n    }\r\n\r\n    select:has(option[value='']:checked) selectedcontent {\r\n      color: var(--st-color-text-muted);\r\n    }\r\n\r\n    select::picker-icon {\r\n      display: none;\r\n    }\r\n\r\n    .caret {\r\n      display: flex;\r\n      flex: none;\r\n      color: var(--st-color-text-muted);\r\n    }\r\n\r\n    option {\r\n      display: block;\r\n      padding: var(--st-space-8) var(--st-space-10);\r\n      font-size: var(--st-text-base);\r\n      color: var(--st-color-text);\r\n      cursor: pointer;\r\n    }\r\n\r\n    option[hidden] {\r\n      display: none;\r\n    }\r\n\r\n    option:hover,\r\n    option:focus {\r\n      background: var(--st-color-hover);\r\n    }\r\n\r\n    option:checked {\r\n      color: var(--st-color-text-strong);\r\n      font-weight: var(--st-font-weight-semibold);\r\n    }\r\n\r\n    option::checkmark {\r\n      display: none;\r\n    }\r\n  `;\r\n\r\n  @property({ attribute: false })\r\n  options: SelectOption[] = [];\r\n\r\n  @property({ type: String })\r\n  value = '';\r\n\r\n  @property({ type: String })\r\n  placeholder = 'Select…';\r\n\r\n  /** Renders an internal `<label>` above the trigger, associated via `aria-labelledby`. Leave empty when the field is labeled some other way (e.g. context alone). */\r\n  @property({ type: String, attribute: 'field-label' })\r\n  fieldLabel = '';\r\n\r\n  /**\r\n   * Optional URL for an external-link button rendered in front of\r\n   * `field-label` (same glyph/placement as the \"open library\" links next to\r\n   * the Templates/Save-location breadcrumbs) — e.g. a link to the\r\n   * SharePoint site or library the current selection points at. Ignored\r\n   * when `field-label` is empty, since there'd be nothing to place it in\r\n   * front of.\r\n   */\r\n  @property({ type: String, attribute: 'link-href' })\r\n  linkHref = '';\r\n\r\n  /** Accessible name/title for the `link-href` button. */\r\n  @property({ type: String, attribute: 'link-label' })\r\n  linkLabel = 'Open';\r\n\r\n  /** Accessible name for the trigger when there's no visible `field-label` (e.g. a filter-row select). Ignored when `field-label` is set. */\r\n  @property({ type: String, attribute: 'select-label' })\r\n  selectLabel = '';\r\n\r\n  @property({ type: Boolean, reflect: true })\r\n  disabled = false;\r\n\r\n  /** Borderless variant for a header/toolbar utility slot — see the `:host([ghost])` styles. */\r\n  @property({ type: Boolean, reflect: true })\r\n  ghost = false;\r\n\r\n  @query('select')\r\n  private readonly selectEl!: HTMLSelectElement;\r\n\r\n  private readonly instanceId = ++instanceCounter;\r\n  private readonly fieldLabelId = `st-select-label-${this.instanceId}`;\r\n\r\n  protected updated(changed: PropertyValues): void {\r\n    if (changed.has('value') || changed.has('options')) {\r\n      const hasValue = this.options.some((option) => option.value === this.value);\r\n      const nextValue = hasValue ? this.value : '';\r\n      if (this.selectEl.value !== nextValue) this.selectEl.value = nextValue;\r\n    }\r\n  }\r\n\r\n  render() {\r\n    const hasValue = this.options.some((option) => option.value === this.value);\r\n\r\n    return html`\r\n      ${this.fieldLabel\r\n        ? html`\r\n            <span class=\"field-label-row\">\r\n              ${this.linkHref\r\n                ? html`\r\n                    <a\r\n                      part=\"field-label-link\"\r\n                      class=\"field-label-link\"\r\n                      href=${this.linkHref}\r\n                      target=\"_blank\"\r\n                      rel=\"noopener noreferrer\"\r\n                      title=${this.linkLabel}\r\n                      aria-label=${this.linkLabel}\r\n                    >\r\n                      ${externalLinkIcon(11)}\r\n                    </a>\r\n                  `\r\n                : nothing}\r\n              <span part=\"field-label\" id=${this.fieldLabelId} class=\"field-label\">${this.fieldLabel}</span>\r\n            </span>\r\n          `\r\n        : nothing}\r\n      <select\r\n        part=\"select\"\r\n        aria-label=${!this.fieldLabel && this.selectLabel ? this.selectLabel : nothing}\r\n        aria-labelledby=${this.fieldLabel ? this.fieldLabelId : nothing}\r\n        ?disabled=${this.disabled}\r\n        @change=${this.onChange}\r\n      >\r\n        <button part=\"trigger\" class=\"trigger\" type=\"button\">\r\n          <selectedcontent></selectedcontent>\r\n          <span class=\"caret\">${chevronIcon('down', 10)}</span>\r\n        </button>\r\n        <option value=\"\" ?selected=${!hasValue} disabled hidden>${this.placeholder}</option>\r\n        ${this.options.map(\r\n          (option) => html`<option part=\"option\" value=${option.value} ?selected=${option.value === this.value}>${option.label}</option>`\r\n        )}\r\n      </select>\r\n    `;\r\n  }\r\n\r\n  private onChange = (event: Event): void => {\r\n    const newValue = (event.target as HTMLSelectElement).value;\r\n    if (newValue === this.value) return;\r\n\r\n    this.value = newValue;\r\n    this.dispatchEvent(new CustomEvent<SelectChangedEventDetail>('select-change', { detail: { value: newValue }, bubbles: true, composed: true }));\r\n  };\r\n}\r\n"],"mappings":";;;;;;;;;;;;;;AAAA,SAAS,YAAY,KAAK,MAAM,eAAe;AAE/C,SAAS,eAAe,UAAU,aAAa;AAO/C,IAAI,kBAAkB;AAmCf,IAAM,SAAN,cAAqB,WAAW;AAAA,EAAhC;AAAA;AAoJL,mBAA0B,CAAC;AAG3B,iBAAQ;AAGR,uBAAc;AAId,sBAAa;AAWb,oBAAW;AAIX,qBAAY;AAIZ,uBAAc;AAGd,oBAAW;AAIX,iBAAQ;AAKR,SAAiB,aAAa,EAAE;AAChC,SAAiB,eAAe,mBAAmB,KAAK,UAAU;AAuDlE,SAAQ,WAAW,CAAC,UAAuB;AACzC,YAAM,WAAY,MAAM,OAA6B;AACrD,UAAI,aAAa,KAAK,MAAO;AAE7B,WAAK,QAAQ;AACb,WAAK,cAAc,IAAI,YAAsC,iBAAiB,EAAE,QAAQ,EAAE,OAAO,SAAS,GAAG,SAAS,MAAM,UAAU,KAAK,CAAC,CAAC;AAAA,IAC/I;AAAA;AAAA,EA3DU,QAAQ,SAA+B;AAC/C,QAAI,QAAQ,IAAI,OAAO,KAAK,QAAQ,IAAI,SAAS,GAAG;AAClD,YAAM,WAAW,KAAK,QAAQ,KAAK,CAAC,WAAW,OAAO,UAAU,KAAK,KAAK;AAC1E,YAAM,YAAY,WAAW,KAAK,QAAQ;AAC1C,UAAI,KAAK,SAAS,UAAU,UAAW,MAAK,SAAS,QAAQ;AAAA,IAC/D;AAAA,EACF;AAAA,EAEA,SAAS;AACP,UAAM,WAAW,KAAK,QAAQ,KAAK,CAAC,WAAW,OAAO,UAAU,KAAK,KAAK;AAE1E,WAAO;AAAA,QACH,KAAK,aACH;AAAA;AAAA,gBAEM,KAAK,WACH;AAAA;AAAA;AAAA;AAAA,6BAIW,KAAK,QAAQ;AAAA;AAAA;AAAA,8BAGZ,KAAK,SAAS;AAAA,mCACT,KAAK,SAAS;AAAA;AAAA,wBAEzB,iBAAiB,EAAE,CAAC;AAAA;AAAA,sBAG1B,OAAO;AAAA,4CACmB,KAAK,YAAY,wBAAwB,KAAK,UAAU;AAAA;AAAA,cAG1F,OAAO;AAAA;AAAA;AAAA,qBAGI,CAAC,KAAK,cAAc,KAAK,cAAc,KAAK,cAAc,OAAO;AAAA,0BAC5D,KAAK,aAAa,KAAK,eAAe,OAAO;AAAA,oBACnD,KAAK,QAAQ;AAAA,kBACf,KAAK,QAAQ;AAAA;AAAA;AAAA;AAAA,gCAIC,YAAY,QAAQ,EAAE,CAAC;AAAA;AAAA,qCAElB,CAAC,QAAQ,oBAAoB,KAAK,WAAW;AAAA,UACxE,KAAK,QAAQ;AAAA,MACb,CAAC,WAAW,mCAAmC,OAAO,KAAK,cAAc,OAAO,UAAU,KAAK,KAAK,IAAI,OAAO,KAAK;AAAA,IACtH,CAAC;AAAA;AAAA;AAAA,EAGP;AASF;AA5Pa,OACJ,SAAS;AAAA,MACZ,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAOf,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAYhB,kBAAkB;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;AA+HxB;AAAA,EADC,SAAS,EAAE,WAAW,MAAM,CAAC;AAAA,GAnJnB,OAoJX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAtJf,OAuJX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAzJf,OA0JX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,cAAc,CAAC;AAAA,GA7JzC,OA8JX;AAWA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,YAAY,CAAC;AAAA,GAxKvC,OAyKX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,aAAa,CAAC;AAAA,GA5KxC,OA6KX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,eAAe,CAAC;AAAA,GAhL1C,OAiLX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAnL/B,OAoLX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAvL/B,OAwLX;AAGiB;AAAA,EADhB,MAAM,QAAQ;AAAA,GA1LJ,OA2LM;AA3LN,SAAN;AAAA,EADN,cAAc,WAAW;AAAA,GACb;","names":[]}

package/dist/chunk-74MILER4.js

@@ -0,0 +1,215 @@
+import {
+  reducedMotionStyles,
+  sectionHeaderStyles,
+  sectionSubtitleStyles,
+  sectionTitleStyles
+} from "./chunk-3VE6VFJ4.js";
+import {
+  buttonResetStyles,
+  controlBaseStyles,
+  fontFamilyStyles
+} from "./chunk-RHAOQ6K4.js";
+import {
+  __decorateClass
+} from "./chunk-EUXUH3YW.js";
+
+// src/items-accordion/ItemsAccordion.ts
+import { LitElement, css, html, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import "iconify-icon";
+var ItemsAccordion = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.title = "";
+    this.subtitle = "";
+    this.items = [];
+    this.allowMultiple = false;
+    this.openIds = /* @__PURE__ */ new Set();
+  }
+  toggle(id) {
+    const wasOpen = this.openIds.has(id);
+    const next = new Set(this.allowMultiple ? this.openIds : []);
+    if (wasOpen) next.delete(id);
+    else next.add(id);
+    this.openIds = next;
+    this.dispatchEvent(
+      new CustomEvent("accordion-toggle", {
+        detail: { id, open: !wasOpen },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  render() {
+    return html`
+      <div class="container" part="container">
+        ${this.title || this.subtitle ? html`<div class="header" part="header">
+              ${this.title ? html`<h2 class="title" part="title">${this.title}</h2>` : nothing}
+              ${this.subtitle ? html`<p class="subtitle" part="subtitle">${this.subtitle}</p>` : nothing}
+            </div>` : nothing}
+        <div class="list" part="list">
+          ${this.items.map((item) => {
+      const open = this.openIds.has(item.id);
+      return html`
+              <div class="item ${open ? "open" : ""}" part="item">
+                <button
+                  class="trigger"
+                  part="trigger"
+                  type="button"
+                  aria-expanded=${open ? "true" : "false"}
+                  aria-controls="content-${item.id}"
+                  @click=${() => this.toggle(item.id)}
+                >
+                  <span>${item.title}</span>
+                  <iconify-icon class="chevron" icon="mdi:chevron-down"></iconify-icon>
+                </button>
+                <div class="content" id="content-${item.id}" part="content" role="region" ?inert=${!open}>
+                  <div class="content-clip">
+                    <div class="content-inner">${item.content}</div>
+                  </div>
+                </div>
+              </div>
+            `;
+    })}
+        </div>
+      </div>
+    `;
+  }
+};
+ItemsAccordion.styles = css`
+    ${controlBaseStyles}
+
+    :host {
+      display: block;
+      padding: var(--st-cms-section-padding) var(--st-space-24);
+      background: var(--st-color-page);
+      ${fontFamilyStyles}
+    }
+
+    .container {
+      max-width: 800px;
+      margin: 0 auto;
+    }
+
+    .header {
+      ${sectionHeaderStyles}
+    }
+
+    .title {
+      ${sectionTitleStyles}
+      font-size: var(--st-text-2xl);
+      margin-bottom: var(--st-space-12);
+    }
+
+    .subtitle {
+      ${sectionSubtitleStyles}
+      font-size: var(--st-text-base);
+      margin: 0;
+    }
+
+    .list {
+      display: flex;
+      flex-direction: column;
+      gap: var(--st-space-16);
+    }
+
+    .item {
+      border: 1px solid var(--st-color-border);
+      border-radius: var(--st-radius-lg);
+      background: var(--st-color-surface);
+      overflow: hidden;
+      transition:
+        border-color 0.2s ease,
+        box-shadow 0.2s ease;
+    }
+
+    .item.open {
+      border-color: var(--st-color-border-strong);
+      box-shadow: 0 4px 6px -1px var(--st-shadow-color-sm);
+    }
+
+    .trigger {
+      ${buttonResetStyles}
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: var(--st-space-24);
+      text-align: left;
+      font-size: var(--st-text-lg);
+      font-weight: var(--st-font-weight-semibold);
+      color: var(--st-color-text-strong);
+    }
+
+    .trigger:hover {
+      background: var(--st-color-hover);
+    }
+
+    .chevron {
+      flex-shrink: 0;
+      margin-left: var(--st-space-16);
+      font-size: 24px;
+      color: var(--st-color-text-faint);
+      transition: transform 0.3s ease;
+    }
+
+    .open .chevron {
+      transform: rotate(180deg);
+    }
+
+    .content {
+      display: grid;
+      grid-template-rows: 0fr;
+      transition: grid-template-rows 0.3s ease;
+    }
+
+    .open .content {
+      grid-template-rows: 1fr;
+    }
+
+    .content-clip {
+      overflow: hidden;
+      min-height: 0;
+    }
+
+    .content-inner {
+      padding: 0 var(--st-space-24) var(--st-space-24);
+      color: var(--st-color-text);
+      line-height: 1.6;
+    }
+
+    @media (max-width: 768px) {
+      :host {
+        padding: var(--st-space-48) var(--st-space-20);
+      }
+
+      .title {
+        font-size: var(--st-text-xl);
+      }
+    }
+
+    ${reducedMotionStyles}
+  `;
+__decorateClass([
+  property({ type: String })
+], ItemsAccordion.prototype, "title", 2);
+__decorateClass([
+  property({ type: String })
+], ItemsAccordion.prototype, "subtitle", 2);
+__decorateClass([
+  property({ attribute: false })
+], ItemsAccordion.prototype, "items", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "allow-multiple" })
+], ItemsAccordion.prototype, "allowMultiple", 2);
+__decorateClass([
+  state()
+], ItemsAccordion.prototype, "openIds", 2);
+ItemsAccordion = __decorateClass([
+  customElement("st-items-accordion")
+], ItemsAccordion);
+
+export {
+  ItemsAccordion
+};
+//# sourceMappingURL=chunk-74MILER4.js.map

package/dist/chunk-74MILER4.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/items-accordion/ItemsAccordion.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\r\nimport { customElement, property, state } from 'lit/decorators.js';\r\nimport 'iconify-icon';\r\n\r\nimport { buttonResetStyles, controlBaseStyles, fontFamilyStyles } from '../shared/styles';\r\nimport {\r\n  reducedMotionStyles,\r\n  sectionHeaderStyles,\r\n  sectionSubtitleStyles,\r\n  sectionTitleStyles,\r\n} from '../shared/section-styles';\r\nimport type { AccordionToggleEventDetail } from './ItemsAccordionEvents';\r\n\r\nexport interface AccordionItem {\r\n  id: string;\r\n  title: string;\r\n  content: string;\r\n}\r\n\r\n/** A vertical list of collapsible title/content rows; one open at a time unless `allow-multiple`. */\r\n@customElement('st-items-accordion')\r\nexport class ItemsAccordion extends LitElement {\r\n  static styles = css`\r\n    ${controlBaseStyles}\r\n\r\n    :host {\r\n      display: block;\r\n      padding: var(--st-cms-section-padding) var(--st-space-24);\r\n      background: var(--st-color-page);\r\n      ${fontFamilyStyles}\r\n    }\r\n\r\n    .container {\r\n      max-width: 800px;\r\n      margin: 0 auto;\r\n    }\r\n\r\n    .header {\r\n      ${sectionHeaderStyles}\r\n    }\r\n\r\n    .title {\r\n      ${sectionTitleStyles}\r\n      font-size: var(--st-text-2xl);\r\n      margin-bottom: var(--st-space-12);\r\n    }\r\n\r\n    .subtitle {\r\n      ${sectionSubtitleStyles}\r\n      font-size: var(--st-text-base);\r\n      margin: 0;\r\n    }\r\n\r\n    .list {\r\n      display: flex;\r\n      flex-direction: column;\r\n      gap: var(--st-space-16);\r\n    }\r\n\r\n    .item {\r\n      border: 1px solid var(--st-color-border);\r\n      border-radius: var(--st-radius-lg);\r\n      background: var(--st-color-surface);\r\n      overflow: hidden;\r\n      transition:\r\n        border-color 0.2s ease,\r\n        box-shadow 0.2s ease;\r\n    }\r\n\r\n    .item.open {\r\n      border-color: var(--st-color-border-strong);\r\n      box-shadow: 0 4px 6px -1px var(--st-shadow-color-sm);\r\n    }\r\n\r\n    .trigger {\r\n      ${buttonResetStyles}\r\n      width: 100%;\r\n      display: flex;\r\n      justify-content: space-between;\r\n      align-items: center;\r\n      padding: var(--st-space-24);\r\n      text-align: left;\r\n      font-size: var(--st-text-lg);\r\n      font-weight: var(--st-font-weight-semibold);\r\n      color: var(--st-color-text-strong);\r\n    }\r\n\r\n    .trigger:hover {\r\n      background: var(--st-color-hover);\r\n    }\r\n\r\n    .chevron {\r\n      flex-shrink: 0;\r\n      margin-left: var(--st-space-16);\r\n      font-size: 24px;\r\n      color: var(--st-color-text-faint);\r\n      transition: transform 0.3s ease;\r\n    }\r\n\r\n    .open .chevron {\r\n      transform: rotate(180deg);\r\n    }\r\n\r\n    .content {\r\n      display: grid;\r\n      grid-template-rows: 0fr;\r\n      transition: grid-template-rows 0.3s ease;\r\n    }\r\n\r\n    .open .content {\r\n      grid-template-rows: 1fr;\r\n    }\r\n\r\n    .content-clip {\r\n      overflow: hidden;\r\n      min-height: 0;\r\n    }\r\n\r\n    .content-inner {\r\n      padding: 0 var(--st-space-24) var(--st-space-24);\r\n      color: var(--st-color-text);\r\n      line-height: 1.6;\r\n    }\r\n\r\n    @media (max-width: 768px) {\r\n      :host {\r\n        padding: var(--st-space-48) var(--st-space-20);\r\n      }\r\n\r\n      .title {\r\n        font-size: var(--st-text-xl);\r\n      }\r\n    }\r\n\r\n    ${reducedMotionStyles}\r\n  `;\r\n\r\n  @property({ type: String })\r\n  title = '';\r\n\r\n  @property({ type: String })\r\n  subtitle = '';\r\n\r\n  @property({ attribute: false })\r\n  items: AccordionItem[] = [];\r\n\r\n  @property({ type: Boolean, attribute: 'allow-multiple' })\r\n  allowMultiple = false;\r\n\r\n  @state() private openIds = new Set<string>();\r\n\r\n  private toggle(id: string) {\r\n    const wasOpen = this.openIds.has(id);\r\n    const next = new Set(this.allowMultiple ? this.openIds : []);\r\n    if (wasOpen) next.delete(id);\r\n    else next.add(id);\r\n    this.openIds = next;\r\n    this.dispatchEvent(\r\n      new CustomEvent<AccordionToggleEventDetail>('accordion-toggle', {\r\n        detail: { id, open: !wasOpen },\r\n        bubbles: true,\r\n        composed: true,\r\n      }),\r\n    );\r\n  }\r\n\r\n  render() {\r\n    return html`\r\n      <div class=\"container\" part=\"container\">\r\n        ${this.title || this.subtitle\r\n          ? html`<div class=\"header\" part=\"header\">\r\n              ${this.title ? html`<h2 class=\"title\" part=\"title\">${this.title}</h2>` : nothing}\r\n              ${this.subtitle ? html`<p class=\"subtitle\" part=\"subtitle\">${this.subtitle}</p>` : nothing}\r\n            </div>`\r\n          : nothing}\r\n        <div class=\"list\" part=\"list\">\r\n          ${this.items.map((item) => {\r\n            const open = this.openIds.has(item.id);\r\n            return html`\r\n              <div class=\"item ${open ? 'open' : ''}\" part=\"item\">\r\n                <button\r\n                  class=\"trigger\"\r\n                  part=\"trigger\"\r\n                  type=\"button\"\r\n                  aria-expanded=${open ? 'true' : 'false'}\r\n                  aria-controls=\"content-${item.id}\"\r\n                  @click=${() => this.toggle(item.id)}\r\n                >\r\n                  <span>${item.title}</span>\r\n                  <iconify-icon class=\"chevron\" icon=\"mdi:chevron-down\"></iconify-icon>\r\n                </button>\r\n                <div class=\"content\" id=\"content-${item.id}\" part=\"content\" role=\"region\" ?inert=${!open}>\r\n                  <div class=\"content-clip\">\r\n                    <div class=\"content-inner\">${item.content}</div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            `;\r\n          })}\r\n        </div>\r\n      </div>\r\n    `;\r\n  }\r\n}\r\n"],"mappings":"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","names":[]}

package/dist/chunk-7PSYCTEN.js

@@ -0,0 +1,118 @@
+import {
+  cardShellStyles,
+  controlBaseStyles,
+  fontFamilyStyles
+} from "./chunk-RHAOQ6K4.js";
+import {
+  __decorateClass
+} from "./chunk-EUXUH3YW.js";
+
+// src/card/Card.ts
+import { LitElement, css, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+var Card = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.variant = "default";
+    this.padding = "medium";
+    this.elevation = "sm";
+    this.hoverable = false;
+    this.inverted = false;
+  }
+  render() {
+    return html`<div class="body" part="body"><slot></slot></div>`;
+  }
+};
+Card.styles = css`
+    ${controlBaseStyles}
+
+    :host {
+      display: block;
+      ${fontFamilyStyles}
+      ${cardShellStyles}
+      border-radius: var(--st-radius-lg);
+      overflow: hidden;
+      position: relative;
+      transition:
+        transform 0.3s ease,
+        box-shadow 0.3s ease,
+        border-color 0.3s ease;
+    }
+
+    :host([variant='bordered']) {
+      border-color: var(--st-color-border-strong);
+    }
+
+    :host([elevation='sm']) {
+      box-shadow: 0 1px 2px var(--st-shadow-color-sm);
+    }
+
+    :host([elevation='md']) {
+      box-shadow: 0 4px 6px -1px var(--st-shadow-color-md);
+    }
+
+    :host([elevation='lg']) {
+      box-shadow: 0 10px 15px -3px var(--st-shadow-color-lg);
+    }
+
+    :host([hoverable]:hover) {
+      transform: translateY(-4px);
+      box-shadow: 0 20px 25px -5px var(--st-shadow-color-xl);
+      border-color: var(--st-color-border-strong);
+    }
+
+    :host([inverted]) {
+      background: var(--st-color-text-strong);
+      color: var(--st-color-on-solid);
+      border-color: var(--st-color-text-strong);
+    }
+
+    .body {
+      padding: var(--st-space-24);
+    }
+
+    :host([padding='none']) .body {
+      padding: 0;
+    }
+
+    :host([padding='small']) .body {
+      padding: var(--st-space-16);
+    }
+
+    :host([padding='large']) .body {
+      padding: var(--st-space-32);
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      :host {
+        transition: none;
+      }
+
+      :host([hoverable]:hover) {
+        transform: none;
+      }
+    }
+  `;
+__decorateClass([
+  property({ type: String, reflect: true })
+], Card.prototype, "variant", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], Card.prototype, "padding", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], Card.prototype, "elevation", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], Card.prototype, "hoverable", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], Card.prototype, "inverted", 2);
+Card = __decorateClass([
+  customElement("st-card")
+], Card);
+
+export {
+  Card
+};
+//# sourceMappingURL=chunk-7PSYCTEN.js.map

package/dist/chunk-7PSYCTEN.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/card/Card.ts"],"sourcesContent":["import { LitElement, css, html } from 'lit';\r\nimport { customElement, property } from 'lit/decorators.js';\r\n\r\nimport { controlBaseStyles, cardShellStyles, fontFamilyStyles } from '../shared/styles';\r\n\r\n/**\r\n * A surfaced container — content goes in the default slot. Ports `SankhyaUI`'s React `Card`\r\n * (`variant`, `padding`, `elevation`, `hoverable`, `inverted`); `onClick` is just a native `click`\r\n * listener on the element. `padding` takes `none | small | medium | large` (the source's\r\n * `sm|md|lg`, spelled like `paddingScaleStyles`); `elevation` takes `none | sm | md | lg`.\r\n */\r\n@customElement('st-card')\r\nexport class Card extends LitElement {\r\n  static styles = css`\r\n    ${controlBaseStyles}\r\n\r\n    :host {\r\n      display: block;\r\n      ${fontFamilyStyles}\r\n      ${cardShellStyles}\r\n      border-radius: var(--st-radius-lg);\r\n      overflow: hidden;\r\n      position: relative;\r\n      transition:\r\n        transform 0.3s ease,\r\n        box-shadow 0.3s ease,\r\n        border-color 0.3s ease;\r\n    }\r\n\r\n    :host([variant='bordered']) {\r\n      border-color: var(--st-color-border-strong);\r\n    }\r\n\r\n    :host([elevation='sm']) {\r\n      box-shadow: 0 1px 2px var(--st-shadow-color-sm);\r\n    }\r\n\r\n    :host([elevation='md']) {\r\n      box-shadow: 0 4px 6px -1px var(--st-shadow-color-md);\r\n    }\r\n\r\n    :host([elevation='lg']) {\r\n      box-shadow: 0 10px 15px -3px var(--st-shadow-color-lg);\r\n    }\r\n\r\n    :host([hoverable]:hover) {\r\n      transform: translateY(-4px);\r\n      box-shadow: 0 20px 25px -5px var(--st-shadow-color-xl);\r\n      border-color: var(--st-color-border-strong);\r\n    }\r\n\r\n    :host([inverted]) {\r\n      background: var(--st-color-text-strong);\r\n      color: var(--st-color-on-solid);\r\n      border-color: var(--st-color-text-strong);\r\n    }\r\n\r\n    .body {\r\n      padding: var(--st-space-24);\r\n    }\r\n\r\n    :host([padding='none']) .body {\r\n      padding: 0;\r\n    }\r\n\r\n    :host([padding='small']) .body {\r\n      padding: var(--st-space-16);\r\n    }\r\n\r\n    :host([padding='large']) .body {\r\n      padding: var(--st-space-32);\r\n    }\r\n\r\n    @media (prefers-reduced-motion: reduce) {\r\n      :host {\r\n        transition: none;\r\n      }\r\n\r\n      :host([hoverable]:hover) {\r\n        transform: none;\r\n      }\r\n    }\r\n  `;\r\n\r\n  @property({ type: String, reflect: true })\r\n  variant: 'default' | 'bordered' = 'default';\r\n\r\n  @property({ type: String, reflect: true })\r\n  padding: 'none' | 'small' | 'medium' | 'large' = 'medium';\r\n\r\n  @property({ type: String, reflect: true })\r\n  elevation: 'none' | 'sm' | 'md' | 'lg' = 'sm';\r\n\r\n  @property({ type: Boolean, reflect: true })\r\n  hoverable = false;\r\n\r\n  @property({ type: Boolean, reflect: true })\r\n  inverted = false;\r\n\r\n  render() {\r\n    return html`<div class=\"body\" part=\"body\"><slot></slot></div>`;\r\n  }\r\n}\r\n"],"mappings":";;;;;;;;;;AAAA,SAAS,YAAY,KAAK,YAAY;AACtC,SAAS,eAAe,gBAAgB;AAWjC,IAAM,OAAN,cAAmB,WAAW;AAAA,EAA9B;AAAA;AAyEL,mBAAkC;AAGlC,mBAAiD;AAGjD,qBAAyC;AAGzC,qBAAY;AAGZ,oBAAW;AAAA;AAAA,EAEX,SAAS;AACP,WAAO;AAAA,EACT;AACF;AA1Fa,KACJ,SAAS;AAAA,MACZ,iBAAiB;AAAA;AAAA;AAAA;AAAA,QAIf,gBAAgB;AAAA,QAChB,eAAe;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;AAkErB;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAxE9B,KAyEX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GA3E9B,KA4EX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GA9E9B,KA+EX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAjF/B,KAkFX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GApF/B,KAqFX;AArFW,OAAN;AAAA,EADN,cAAc,SAAS;AAAA,GACX;","names":[]}