@sankhyatronics/sankhya-cms 0.0.0-stage → 0.1.0

package/dist/chunk-IMACP7HN.js

@@ -0,0 +1,156 @@
+import {
+  sectionHeaderStyles,
+  sectionSubtitleStyles,
+  sectionTitleStyles
+} from "./chunk-3VE6VFJ4.js";
+import {
+  controlBaseStyles,
+  fontFamilyStyles
+} from "./chunk-RHAOQ6K4.js";
+import {
+  __decorateClass
+} from "./chunk-EUXUH3YW.js";
+
+// src/content-block/ContentBlock.ts
+import { LitElement, css, html, nothing } from "lit";
+import { customElement, property } from "lit/decorators.js";
+var ContentBlock = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.title = "";
+    this.subtitle = "";
+    this.contentSrc = "";
+    this.content = "";
+    this.imageSrc = "";
+    this.imageAlt = "";
+    this.imageCaption = "";
+    this.inverted = false;
+  }
+  render() {
+    return html`
+      <section class="container" part="container">
+        <div class="header" part="header">
+          ${this.title ? html`<div class="title" part="title">${this.title}</div>` : nothing}
+          ${this.subtitle ? html`<div class="subtitle" part="subtitle">${this.subtitle}</div>` : nothing}
+        </div>
+        ${this.imageSrc ? html`
+              <figure class="featured-image" part="image">
+                <img src=${this.imageSrc} alt=${this.imageAlt || this.title} />
+                ${this.imageCaption ? html`<figcaption>${this.imageCaption}</figcaption>` : nothing}
+              </figure>
+            ` : nothing}
+        <st-markdown part="body" .src=${this.contentSrc} .content=${this.content}></st-markdown>
+      </section>
+    `;
+  }
+};
+ContentBlock.styles = css`
+    ${controlBaseStyles}
+
+    :host {
+      display: block;
+      ${fontFamilyStyles}
+      padding: var(--st-space-24);
+      background: var(--st-color-surface);
+      color: var(--st-color-text-strong);
+    }
+
+    :host([inverted]) {
+      background: var(--st-color-text-strong);
+      color: var(--st-color-on-solid);
+    }
+
+    .container {
+      max-width: var(--st-cms-container-max);
+      padding: 0 var(--st-space-48);
+      margin: 0 auto;
+    }
+
+    .header {
+      ${sectionHeaderStyles}
+    }
+
+    .title {
+      ${sectionTitleStyles}
+      line-height: 1.1;
+    }
+
+    .subtitle {
+      ${sectionSubtitleStyles}
+    }
+
+    :host([inverted]) .title,
+    :host([inverted]) .subtitle {
+      color: inherit;
+    }
+
+    .featured-image {
+      margin: 0 0 var(--st-space-48);
+      border-radius: var(--st-radius-lg);
+      overflow: hidden;
+    }
+
+    .featured-image img {
+      width: 100%;
+      height: auto;
+      display: block;
+    }
+
+    figcaption {
+      padding: var(--st-space-12);
+      text-align: center;
+      color: var(--st-color-text-muted);
+      font-size: var(--st-text-xs);
+    }
+
+    st-markdown {
+      color: var(--st-color-text);
+      font-size: var(--st-text-xl);
+    }
+
+    :host([inverted]) st-markdown {
+      color: inherit;
+    }
+
+    @media (max-width: 768px) {
+      :host {
+        padding: var(--st-space-48) var(--st-space-24);
+      }
+
+      .container {
+        padding: 0;
+      }
+    }
+  `;
+__decorateClass([
+  property({ type: String })
+], ContentBlock.prototype, "title", 2);
+__decorateClass([
+  property({ type: String })
+], ContentBlock.prototype, "subtitle", 2);
+__decorateClass([
+  property({ type: String, attribute: "content-src" })
+], ContentBlock.prototype, "contentSrc", 2);
+__decorateClass([
+  property({ type: String })
+], ContentBlock.prototype, "content", 2);
+__decorateClass([
+  property({ type: String, attribute: "image-src" })
+], ContentBlock.prototype, "imageSrc", 2);
+__decorateClass([
+  property({ type: String, attribute: "image-alt" })
+], ContentBlock.prototype, "imageAlt", 2);
+__decorateClass([
+  property({ type: String, attribute: "image-caption" })
+], ContentBlock.prototype, "imageCaption", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], ContentBlock.prototype, "inverted", 2);
+ContentBlock = __decorateClass([
+  customElement("st-content-block")
+], ContentBlock);
+
+export {
+  ContentBlock
+};
+//# sourceMappingURL=chunk-IMACP7HN.js.map

package/dist/chunk-IMACP7HN.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/content-block/ContentBlock.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\r\nimport { customElement, property } from 'lit/decorators.js';\r\n\r\nimport { controlBaseStyles, fontFamilyStyles } from '../shared/styles';\r\nimport { sectionSubtitleStyles, sectionTitleStyles, sectionHeaderStyles } from '../shared/section-styles';\r\nimport '../markdown';\r\n\r\n/**\r\n * A long-form article section: centered title/subtitle, an optional featured image with caption,\r\n * then Markdown body text. Ports `SankhyaUI`'s React `ContentBlock`. The body comes from\r\n * `content-src` (a Markdown URL, as in the source) or an inline `content` string (added so the\r\n * block works without a fetch); `content-src` wins when both are set.\r\n */\r\n@customElement('st-content-block')\r\nexport class ContentBlock extends LitElement {\r\n  static styles = css`\r\n    ${controlBaseStyles}\r\n\r\n    :host {\r\n      display: block;\r\n      ${fontFamilyStyles}\r\n      padding: var(--st-space-24);\r\n      background: var(--st-color-surface);\r\n      color: var(--st-color-text-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    }\r\n\r\n    .container {\r\n      max-width: var(--st-cms-container-max);\r\n      padding: 0 var(--st-space-48);\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      line-height: 1.1;\r\n    }\r\n\r\n    .subtitle {\r\n      ${sectionSubtitleStyles}\r\n    }\r\n\r\n    :host([inverted]) .title,\r\n    :host([inverted]) .subtitle {\r\n      color: inherit;\r\n    }\r\n\r\n    .featured-image {\r\n      margin: 0 0 var(--st-space-48);\r\n      border-radius: var(--st-radius-lg);\r\n      overflow: hidden;\r\n    }\r\n\r\n    .featured-image img {\r\n      width: 100%;\r\n      height: auto;\r\n      display: block;\r\n    }\r\n\r\n    figcaption {\r\n      padding: var(--st-space-12);\r\n      text-align: center;\r\n      color: var(--st-color-text-muted);\r\n      font-size: var(--st-text-xs);\r\n    }\r\n\r\n    st-markdown {\r\n      color: var(--st-color-text);\r\n      font-size: var(--st-text-xl);\r\n    }\r\n\r\n    :host([inverted]) st-markdown {\r\n      color: inherit;\r\n    }\r\n\r\n    @media (max-width: 768px) {\r\n      :host {\r\n        padding: var(--st-space-48) var(--st-space-24);\r\n      }\r\n\r\n      .container {\r\n        padding: 0;\r\n      }\r\n    }\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  /** URL of a Markdown file. */\r\n  @property({ type: String, attribute: 'content-src' })\r\n  contentSrc = '';\r\n\r\n  /** Inline Markdown, used when `content-src` is not set. */\r\n  @property({ type: String })\r\n  content = '';\r\n\r\n  @property({ type: String, attribute: 'image-src' })\r\n  imageSrc = '';\r\n\r\n  @property({ type: String, attribute: 'image-alt' })\r\n  imageAlt = '';\r\n\r\n  @property({ type: String, attribute: 'image-caption' })\r\n  imageCaption = '';\r\n\r\n  @property({ type: Boolean, reflect: true })\r\n  inverted = false;\r\n\r\n  render() {\r\n    return html`\r\n      <section class=\"container\" part=\"container\">\r\n        <div class=\"header\" part=\"header\">\r\n          ${this.title ? html`<div class=\"title\" part=\"title\">${this.title}</div>` : nothing}\r\n          ${this.subtitle ? html`<div class=\"subtitle\" part=\"subtitle\">${this.subtitle}</div>` : nothing}\r\n        </div>\r\n        ${this.imageSrc\r\n          ? html`\r\n              <figure class=\"featured-image\" part=\"image\">\r\n                <img src=${this.imageSrc} alt=${this.imageAlt || this.title} />\r\n                ${this.imageCaption ? html`<figcaption>${this.imageCaption}</figcaption>` : nothing}\r\n              </figure>\r\n            `\r\n          : nothing}\r\n        <st-markdown part=\"body\" .src=${this.contentSrc} .content=${this.content}></st-markdown>\r\n      </section>\r\n    `;\r\n  }\r\n}\r\n"],"mappings":";;;;;;;;;;;;;;AAAA,SAAS,YAAY,KAAK,MAAM,eAAe;AAC/C,SAAS,eAAe,gBAAgB;AAajC,IAAM,eAAN,cAA2B,WAAW;AAAA,EAAtC;AAAA;AAiFL,iBAAQ;AAGR,oBAAW;AAIX,sBAAa;AAIb,mBAAU;AAGV,oBAAW;AAGX,oBAAW;AAGX,wBAAe;AAGf,oBAAW;AAAA;AAAA,EAEX,SAAS;AACP,WAAO;AAAA;AAAA;AAAA,YAGC,KAAK,QAAQ,uCAAuC,KAAK,KAAK,WAAW,OAAO;AAAA,YAChF,KAAK,WAAW,6CAA6C,KAAK,QAAQ,WAAW,OAAO;AAAA;AAAA,UAE9F,KAAK,WACH;AAAA;AAAA,2BAEe,KAAK,QAAQ,QAAQ,KAAK,YAAY,KAAK,KAAK;AAAA,kBACzD,KAAK,eAAe,mBAAmB,KAAK,YAAY,kBAAkB,OAAO;AAAA;AAAA,gBAGvF,OAAO;AAAA,wCACqB,KAAK,UAAU,aAAa,KAAK,OAAO;AAAA;AAAA;AAAA,EAG9E;AACF;AA7Ha,aACJ,SAAS;AAAA,MACZ,iBAAiB;AAAA;AAAA;AAAA;AAAA,QAIf,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAkBhB,mBAAmB;AAAA;AAAA;AAAA;AAAA,QAInB,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA,QAKlB,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgD3B;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAhFf,aAiFX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAnFf,aAoFX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,cAAc,CAAC;AAAA,GAvFzC,aAwFX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GA3Ff,aA4FX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,YAAY,CAAC;AAAA,GA9FvC,aA+FX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,YAAY,CAAC;AAAA,GAjGvC,aAkGX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,gBAAgB,CAAC;AAAA,GApG3C,aAqGX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAvG/B,aAwGX;AAxGW,eAAN;AAAA,EADN,cAAc,kBAAkB;AAAA,GACpB;","names":[]}

package/dist/chunk-LHU23TF6.js

@@ -0,0 +1,273 @@
+import {
+  controlBaseStyles,
+  fontFamilyStyles
+} from "./chunk-RHAOQ6K4.js";
+import {
+  __decorateClass
+} from "./chunk-EUXUH3YW.js";
+
+// src/menu-item/MenuItem.ts
+import { LitElement, css, html, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+var MenuItem = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.title = "";
+    this.href = "";
+    this.description = "";
+    this.badge = "";
+    this.active = false;
+    this.compact = false;
+    this.showDescription = true;
+    this.target = "_self";
+    this.hasIcon = false;
+    this.onIconSlotChange = (event) => {
+      this.hasIcon = event.target.assignedNodes({ flatten: true }).length > 0;
+    };
+    this.onClick = (event) => {
+      const selectEvent = new CustomEvent("menu-item-select", {
+        detail: { href: this.href },
+        bubbles: true,
+        composed: true,
+        cancelable: true
+      });
+      this.dispatchEvent(selectEvent);
+      if (selectEvent.defaultPrevented) event.preventDefault();
+    };
+  }
+  render() {
+    const showDescription = !!this.description && this.showDescription;
+    const classes = ["menu-item", this.active ? "active" : "", this.compact ? "compact" : "", showDescription ? "" : "no-description"].filter(Boolean).join(" ");
+    return html`
+      <a part="item" class=${classes} href=${this.href} target=${this.target} @click=${this.onClick}>
+        <span class="menu-item-icon" part="icon" ?hidden=${!this.hasIcon}><slot name="icon" @slotchange=${this.onIconSlotChange}></slot></span>
+        <span class="menu-item-content" part="content">
+          <span class="menu-item-header" part="header">
+            <span part="title" class="menu-item-title">${this.title}</span>
+            ${this.badge ? html`<span part="badge" class="menu-item-badge">${this.badge}</span>` : nothing}
+          </span>
+          ${showDescription ? html`<p part="description" class="menu-item-description">${this.description}</p>` : nothing}
+        </span>
+      </a>
+    `;
+  }
+};
+/** `focus()` on the element focuses its link, so `st-dropdown` can arrow-key between items. */
+MenuItem.shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };
+MenuItem.styles = css`
+    ${controlBaseStyles}
+
+    :host {
+      display: block;
+      ${fontFamilyStyles}
+    }
+
+    @keyframes st-menu-item-badge-pop {
+      from {
+        transform: scale(0);
+      }
+      70% {
+        transform: scale(1.12);
+      }
+      to {
+        transform: scale(1);
+      }
+    }
+
+    @keyframes st-menu-item-fade-in {
+      from {
+        opacity: 0;
+      }
+      to {
+        opacity: 1;
+      }
+    }
+
+    .menu-item {
+      display: flex;
+      align-items: flex-start;
+      gap: 12px;
+      padding: 12px 16px;
+      font-size: 0.875rem;
+      text-decoration: none;
+      color: var(--st-color-text);
+      border-radius: 6px;
+      /* The source's 'all 0.15s', minus visibility: animating the visibility this link inherits
+         from a dropdown panel kept it unfocusable for a frame after the panel opened. */
+      transition-property: background-color, color, padding, transform, border-color;
+      transition-duration: 0.15s;
+      transition-timing-function: ease;
+      box-sizing: border-box;
+    }
+
+    /* The source's hover nudge (x: 4px) is done with padding, not a transform: a transform would
+       spill past a scrolling panel's edge (st-source-bar's menus) and show a horizontal scrollbar.
+       Keyboard focus gets the same treatment as hover. */
+    .menu-item:hover,
+    .menu-item:focus-visible {
+      background: var(--st-color-hover);
+      color: var(--st-color-text-strong);
+      padding-left: 20px;
+      transition-duration: 0.1s;
+    }
+
+    .menu-item.compact:hover,
+    .menu-item.compact:focus-visible {
+      padding-left: 16px;
+    }
+
+    .menu-item:active {
+      transform: scale(0.99);
+      transition-duration: 0.1s;
+    }
+
+    .menu-item.active {
+      background-color: var(--st-color-accent-subtle);
+      color: var(--st-color-accent-text);
+      border-left: 4px solid var(--st-color-accent);
+    }
+
+    .menu-item-icon {
+      display: flex;
+      flex-shrink: 0;
+      margin-top: 2px;
+      transition: transform 0.2s ease;
+    }
+
+    .menu-item-icon:hover {
+      transform: rotate(5deg);
+    }
+
+    .menu-item-icon[hidden] {
+      display: none;
+    }
+
+    .menu-item-icon ::slotted(*) {
+      width: 16px;
+      height: 16px;
+    }
+
+    .menu-item-content {
+      flex: 1;
+      min-width: 0;
+    }
+
+    .menu-item-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 8px;
+    }
+
+    .menu-item-title {
+      font-weight: 500;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .menu-item-badge {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      min-width: 20px;
+      height: 20px;
+      padding: 0 6px;
+      font-size: 0.75rem;
+      font-weight: 500;
+      border-radius: 9999px;
+      flex-shrink: 0;
+      background: var(--st-color-accent-subtle);
+      color: var(--st-color-accent-text);
+      animation: st-menu-item-badge-pop 0.35s ease-out;
+    }
+
+    .menu-item-description {
+      display: -webkit-box;
+      margin: 4px 0 0;
+      font-size: 0.75rem;
+      color: var(--st-color-text-muted);
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      line-height: 1.4;
+      animation: st-menu-item-fade-in 0.2s ease;
+    }
+
+    .menu-item.compact {
+      padding: 8px 12px;
+      gap: 8px;
+    }
+
+    .menu-item.compact .menu-item-icon ::slotted(*) {
+      width: 14px;
+      height: 14px;
+    }
+
+    .menu-item.compact .menu-item-title {
+      font-size: 0.75rem;
+    }
+
+    .menu-item.compact .menu-item-description {
+      font-size: 0.75rem;
+    }
+
+    .menu-item.no-description {
+      align-items: center;
+    }
+
+    .menu-item.no-description .menu-item-icon {
+      margin-top: 0;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .menu-item,
+      .menu-item-icon {
+        transition: none;
+      }
+
+      .menu-item:active,
+      .menu-item-icon:hover {
+        transform: none;
+      }
+
+      .menu-item-badge,
+      .menu-item-description {
+        animation: none;
+      }
+    }
+  `;
+__decorateClass([
+  property({ type: String })
+], MenuItem.prototype, "title", 2);
+__decorateClass([
+  property({ type: String })
+], MenuItem.prototype, "href", 2);
+__decorateClass([
+  property({ type: String })
+], MenuItem.prototype, "description", 2);
+__decorateClass([
+  property({ type: String })
+], MenuItem.prototype, "badge", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], MenuItem.prototype, "active", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], MenuItem.prototype, "compact", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "show-description" })
+], MenuItem.prototype, "showDescription", 2);
+__decorateClass([
+  property({ type: String })
+], MenuItem.prototype, "target", 2);
+__decorateClass([
+  state()
+], MenuItem.prototype, "hasIcon", 2);
+MenuItem = __decorateClass([
+  customElement("st-menu-item")
+], MenuItem);
+
+export {
+  MenuItem
+};
+//# sourceMappingURL=chunk-LHU23TF6.js.map

package/dist/chunk-LHU23TF6.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/menu-item/MenuItem.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\r\nimport { customElement, property, state } from 'lit/decorators.js';\r\n\r\nimport { controlBaseStyles, fontFamilyStyles } from '../shared/styles';\r\nimport type { MenuItemSelectEventDetail } from './MenuItemEvents';\r\n\r\n/**\r\n * A single flat nav row — icon (`slot=\"icon\"`) + title + badge on one line, an optional\r\n * description below — as opposed to `st-menu-grid-item`'s card for a multi-column grid. A 1:1\r\n * port of `SankhyaUI`'s React `MenuItem` (`SankhyaCMS/SankhyaUI/src/components/Menu`): same\r\n * markup and CSS, with its `motion` effects redone in CSS — nudges right and scales to 1.01 on\r\n * hover / 0.99 while pressed, the icon tilts on hover, the badge pops in, the description fades\r\n * in. Colors come from the suite theme rather than per-item utility classes.\r\n *\r\n * Renders a real `<a href>` but fires a *cancelable* `menu-item-select` event (detail: `{ href }`)\r\n * before navigating — a host doing client-side routing calls `event.preventDefault()` on it (the\r\n * source used react-router's `Link` here; the suite apps have no router).\r\n */\r\n@customElement('st-menu-item')\r\nexport class MenuItem extends LitElement {\r\n  /** `focus()` on the element focuses its link, so `st-dropdown` can arrow-key between items. */\r\n  static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };\r\n\r\n  static styles = css`\r\n    ${controlBaseStyles}\r\n\r\n    :host {\r\n      display: block;\r\n      ${fontFamilyStyles}\r\n    }\r\n\r\n    @keyframes st-menu-item-badge-pop {\r\n      from {\r\n        transform: scale(0);\r\n      }\r\n      70% {\r\n        transform: scale(1.12);\r\n      }\r\n      to {\r\n        transform: scale(1);\r\n      }\r\n    }\r\n\r\n    @keyframes st-menu-item-fade-in {\r\n      from {\r\n        opacity: 0;\r\n      }\r\n      to {\r\n        opacity: 1;\r\n      }\r\n    }\r\n\r\n    .menu-item {\r\n      display: flex;\r\n      align-items: flex-start;\r\n      gap: 12px;\r\n      padding: 12px 16px;\r\n      font-size: 0.875rem;\r\n      text-decoration: none;\r\n      color: var(--st-color-text);\r\n      border-radius: 6px;\r\n      /* The source's 'all 0.15s', minus visibility: animating the visibility this link inherits\r\n         from a dropdown panel kept it unfocusable for a frame after the panel opened. */\r\n      transition-property: background-color, color, padding, transform, border-color;\r\n      transition-duration: 0.15s;\r\n      transition-timing-function: ease;\r\n      box-sizing: border-box;\r\n    }\r\n\r\n    /* The source's hover nudge (x: 4px) is done with padding, not a transform: a transform would\r\n       spill past a scrolling panel's edge (st-source-bar's menus) and show a horizontal scrollbar.\r\n       Keyboard focus gets the same treatment as hover. */\r\n    .menu-item:hover,\r\n    .menu-item:focus-visible {\r\n      background: var(--st-color-hover);\r\n      color: var(--st-color-text-strong);\r\n      padding-left: 20px;\r\n      transition-duration: 0.1s;\r\n    }\r\n\r\n    .menu-item.compact:hover,\r\n    .menu-item.compact:focus-visible {\r\n      padding-left: 16px;\r\n    }\r\n\r\n    .menu-item:active {\r\n      transform: scale(0.99);\r\n      transition-duration: 0.1s;\r\n    }\r\n\r\n    .menu-item.active {\r\n      background-color: var(--st-color-accent-subtle);\r\n      color: var(--st-color-accent-text);\r\n      border-left: 4px solid var(--st-color-accent);\r\n    }\r\n\r\n    .menu-item-icon {\r\n      display: flex;\r\n      flex-shrink: 0;\r\n      margin-top: 2px;\r\n      transition: transform 0.2s ease;\r\n    }\r\n\r\n    .menu-item-icon:hover {\r\n      transform: rotate(5deg);\r\n    }\r\n\r\n    .menu-item-icon[hidden] {\r\n      display: none;\r\n    }\r\n\r\n    .menu-item-icon ::slotted(*) {\r\n      width: 16px;\r\n      height: 16px;\r\n    }\r\n\r\n    .menu-item-content {\r\n      flex: 1;\r\n      min-width: 0;\r\n    }\r\n\r\n    .menu-item-header {\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: space-between;\r\n      gap: 8px;\r\n    }\r\n\r\n    .menu-item-title {\r\n      font-weight: 500;\r\n      overflow: hidden;\r\n      text-overflow: ellipsis;\r\n      white-space: nowrap;\r\n    }\r\n\r\n    .menu-item-badge {\r\n      display: inline-flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      min-width: 20px;\r\n      height: 20px;\r\n      padding: 0 6px;\r\n      font-size: 0.75rem;\r\n      font-weight: 500;\r\n      border-radius: 9999px;\r\n      flex-shrink: 0;\r\n      background: var(--st-color-accent-subtle);\r\n      color: var(--st-color-accent-text);\r\n      animation: st-menu-item-badge-pop 0.35s ease-out;\r\n    }\r\n\r\n    .menu-item-description {\r\n      display: -webkit-box;\r\n      margin: 4px 0 0;\r\n      font-size: 0.75rem;\r\n      color: var(--st-color-text-muted);\r\n      -webkit-box-orient: vertical;\r\n      overflow: hidden;\r\n      line-height: 1.4;\r\n      animation: st-menu-item-fade-in 0.2s ease;\r\n    }\r\n\r\n    .menu-item.compact {\r\n      padding: 8px 12px;\r\n      gap: 8px;\r\n    }\r\n\r\n    .menu-item.compact .menu-item-icon ::slotted(*) {\r\n      width: 14px;\r\n      height: 14px;\r\n    }\r\n\r\n    .menu-item.compact .menu-item-title {\r\n      font-size: 0.75rem;\r\n    }\r\n\r\n    .menu-item.compact .menu-item-description {\r\n      font-size: 0.75rem;\r\n    }\r\n\r\n    .menu-item.no-description {\r\n      align-items: center;\r\n    }\r\n\r\n    .menu-item.no-description .menu-item-icon {\r\n      margin-top: 0;\r\n    }\r\n\r\n    @media (prefers-reduced-motion: reduce) {\r\n      .menu-item,\r\n      .menu-item-icon {\r\n        transition: none;\r\n      }\r\n\r\n      .menu-item:active,\r\n      .menu-item-icon:hover {\r\n        transform: none;\r\n      }\r\n\r\n      .menu-item-badge,\r\n      .menu-item-description {\r\n        animation: none;\r\n      }\r\n    }\r\n  `;\r\n\r\n  @property({ type: String })\r\n  title = '';\r\n\r\n  @property({ type: String })\r\n  href = '';\r\n\r\n  @property({ type: String })\r\n  description = '';\r\n\r\n  /** Small trailing label, e.g. a count or \"New\"/\"Beta\" — omit for none. */\r\n  @property({ type: String })\r\n  badge = '';\r\n\r\n  /** Highlights this row as the current page (source: `isActive`). */\r\n  @property({ type: Boolean, reflect: true })\r\n  active = false;\r\n\r\n  @property({ type: Boolean, reflect: true })\r\n  compact = false;\r\n\r\n  /** Suppresses the description even when `description` is set (source: `showDescription`, default `true`). */\r\n  @property({ type: Boolean, attribute: 'show-description' })\r\n  showDescription = true;\r\n\r\n  /** `target` for the `<a>` (source default `_self`). */\r\n  @property({ type: String })\r\n  target = '_self';\r\n\r\n  /** Whether `slot=\"icon\"` has content, so an omitted icon leaves no empty box. */\r\n  @state() private hasIcon = false;\r\n\r\n  private onIconSlotChange = (event: Event): void => {\r\n    this.hasIcon = (event.target as HTMLSlotElement).assignedNodes({ flatten: true }).length > 0;\r\n  };\r\n\r\n  private onClick = (event: MouseEvent): void => {\r\n    const selectEvent = new CustomEvent<MenuItemSelectEventDetail>('menu-item-select', {\r\n      detail: { href: this.href },\r\n      bubbles: true,\r\n      composed: true,\r\n      cancelable: true\r\n    });\r\n    this.dispatchEvent(selectEvent);\r\n    if (selectEvent.defaultPrevented) event.preventDefault();\r\n  };\r\n\r\n  render() {\r\n    const showDescription = !!this.description && this.showDescription;\r\n    const classes = ['menu-item', this.active ? 'active' : '', this.compact ? 'compact' : '', showDescription ? '' : 'no-description']\r\n      .filter(Boolean)\r\n      .join(' ');\r\n    return html`\r\n      <a part=\"item\" class=${classes} href=${this.href} target=${this.target} @click=${this.onClick}>\r\n        <span class=\"menu-item-icon\" part=\"icon\" ?hidden=${!this.hasIcon}><slot name=\"icon\" @slotchange=${this.onIconSlotChange}></slot></span>\r\n        <span class=\"menu-item-content\" part=\"content\">\r\n          <span class=\"menu-item-header\" part=\"header\">\r\n            <span part=\"title\" class=\"menu-item-title\">${this.title}</span>\r\n            ${this.badge ? html`<span part=\"badge\" class=\"menu-item-badge\">${this.badge}</span>` : nothing}\r\n          </span>\r\n          ${showDescription ? html`<p part=\"description\" class=\"menu-item-description\">${this.description}</p>` : nothing}\r\n        </span>\r\n      </a>\r\n    `;\r\n  }\r\n}\r\n"],"mappings":";;;;;;;;;AAAA,SAAS,YAAY,KAAK,MAAM,eAAe;AAC/C,SAAS,eAAe,UAAU,aAAa;AAkBxC,IAAM,WAAN,cAAuB,WAAW;AAAA,EAAlC;AAAA;AA4LL,iBAAQ;AAGR,gBAAO;AAGP,uBAAc;AAId,iBAAQ;AAIR,kBAAS;AAGT,mBAAU;AAIV,2BAAkB;AAIlB,kBAAS;AAGA,SAAQ,UAAU;AAE3B,SAAQ,mBAAmB,CAAC,UAAuB;AACjD,WAAK,UAAW,MAAM,OAA2B,cAAc,EAAE,SAAS,KAAK,CAAC,EAAE,SAAS;AAAA,IAC7F;AAEA,SAAQ,UAAU,CAAC,UAA4B;AAC7C,YAAM,cAAc,IAAI,YAAuC,oBAAoB;AAAA,QACjF,QAAQ,EAAE,MAAM,KAAK,KAAK;AAAA,QAC1B,SAAS;AAAA,QACT,UAAU;AAAA,QACV,YAAY;AAAA,MACd,CAAC;AACD,WAAK,cAAc,WAAW;AAC9B,UAAI,YAAY,iBAAkB,OAAM,eAAe;AAAA,IACzD;AAAA;AAAA,EAEA,SAAS;AACP,UAAM,kBAAkB,CAAC,CAAC,KAAK,eAAe,KAAK;AACnD,UAAM,UAAU,CAAC,aAAa,KAAK,SAAS,WAAW,IAAI,KAAK,UAAU,YAAY,IAAI,kBAAkB,KAAK,gBAAgB,EAC9H,OAAO,OAAO,EACd,KAAK,GAAG;AACX,WAAO;AAAA,6BACkB,OAAO,SAAS,KAAK,IAAI,WAAW,KAAK,MAAM,WAAW,KAAK,OAAO;AAAA,2DACxC,CAAC,KAAK,OAAO,kCAAkC,KAAK,gBAAgB;AAAA;AAAA;AAAA,yDAGtE,KAAK,KAAK;AAAA,cACrD,KAAK,QAAQ,kDAAkD,KAAK,KAAK,YAAY,OAAO;AAAA;AAAA,YAE9F,kBAAkB,2DAA2D,KAAK,WAAW,SAAS,OAAO;AAAA;AAAA;AAAA;AAAA,EAIvH;AACF;AAAA;AA3Pa,SAEJ,oBAAoB,EAAE,GAAG,WAAW,mBAAmB,gBAAgB,KAAK;AAFxE,SAIJ,SAAS;AAAA,MACZ,iBAAiB;AAAA;AAAA;AAAA;AAAA,QAIf,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAmLtB;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GA3Lf,SA4LX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GA9Lf,SA+LX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAjMf,SAkMX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GArMf,SAsMX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAzM/B,SA0MX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GA5M/B,SA6MX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,WAAW,mBAAmB,CAAC;AAAA,GAhN/C,SAiNX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GApNf,SAqNX;AAGiB;AAAA,EAAhB,MAAM;AAAA,GAxNI,SAwNM;AAxNN,WAAN;AAAA,EADN,cAAc,cAAc;AAAA,GAChB;","names":[]}