@sankhyatronics/sankhya-cms 0.1.3 → 0.1.5

package/dist/chunk-HGTC3LCW.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/mega-menu/MegaMenu.ts","../src/mega-menu/MegaMenuColumn.ts","../src/mega-menu/MegaMenuFeature.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\n\nimport { controlBaseStyles, fontFamilyStyles } from '../shared/styles';\n\n/**\n * The rich layout of a mega-menu panel, after okta.com: an optional intro column on the left (a\n * large `heading`, a `description` and, under a divider, quick links in `slot=\"intro\"`), then the\n * link columns side by side (`st-mega-menu-column`s in the default slot), then an optional\n * featured column on the right (`featured-heading` over the `st-mega-menu-feature` cards in\n * `slot=\"featured\"`). Slot it into an `st-dropdown` with `mega` set.\n *\n * The layout follows the width it is given, not the viewport (a container query): side by side\n * when there is room; intro and featured column above/below two link columns on a medium panel;\n * everything stacked in the narrow drill-down panel `st-header` shows on a phone (where the intro\n * heading is left out — the drill-down already shows the section's name).\n *\n * @slot - The link columns (`st-mega-menu-column`s, or any blocks).\n * @slot intro - Quick links under the intro text, e.g. `st-menu-item`s with an icon.\n * @slot featured - Promo cards (`st-mega-menu-feature`s), stacked.\n * @csspart inner - The grid holding every area.\n * @csspart intro - The intro column.\n * @csspart columns - The grid holding the link columns.\n * @csspart featured - The featured column.\n */\n@customElement('st-mega-menu')\nexport class MegaMenu extends LitElement {\n  static styles = css`\n    ${controlBaseStyles}\n\n    :host {\n      display: block;\n      container-type: inline-size;\n      ${fontFamilyStyles}\n    }\n\n    .inner {\n      display: grid;\n      gap: 3rem;\n      padding: 3rem 3.5rem;\n      box-sizing: border-box;\n    }\n\n    .columns {\n      display: grid;\n      grid-template-columns: repeat(var(--st-mega-menu-columns, 3), minmax(0, 1fr));\n      gap: 3rem;\n      align-items: stretch;\n    }\n\n    .intro,\n    .featured {\n      display: flex;\n      flex-direction: column;\n      min-width: 0;\n    }\n\n    .intro-heading {\n      margin: 0 0 1rem;\n      font-size: 2rem;\n      font-weight: 400;\n      line-height: 1.15;\n      color: var(--st-color-text-strong);\n    }\n\n    .intro-description {\n      margin: 0;\n      font-size: 1rem;\n      line-height: 1.55;\n      color: var(--st-color-text);\n    }\n\n    .intro-links {\n      display: flex;\n      flex-direction: column;\n      gap: 2px;\n      margin-top: 2.5rem;\n      padding-top: 2rem;\n      border-top: 1px solid var(--st-color-border);\n    }\n\n    .intro-links.no-text {\n      margin-top: 0;\n      padding-top: 0;\n      border-top: 0;\n    }\n\n    .featured-heading {\n      margin: 0 0 1rem;\n      font-size: 1.125rem;\n      font-weight: 500;\n      line-height: 1.35;\n      color: var(--st-color-text-strong);\n    }\n\n    .featured-items {\n      display: flex;\n      flex-direction: column;\n      gap: 0.75rem;\n    }\n\n    [hidden] {\n      display: none !important;\n    }\n\n    /* Medium panel: intro on top, two link columns, featured cards side by side underneath. */\n    @container (max-width: 960px) {\n      .inner {\n        grid-template-columns: minmax(0, 1fr) !important;\n        gap: 2rem;\n        padding: 2rem;\n      }\n\n      .columns {\n        grid-template-columns: repeat(var(--st-mega-menu-columns-md, 2), minmax(0, 1fr));\n        gap: 2rem;\n      }\n\n      .intro-links {\n        margin-top: 1.5rem;\n        padding-top: 1.5rem;\n      }\n\n      .featured-items {\n        display: grid;\n        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));\n      }\n    }\n\n    /* Narrow panel (the phone drill-down): everything stacked. */\n    @container (max-width: 560px) {\n      .inner {\n        gap: 1.75rem;\n        padding: 0.5rem 0 1.5rem;\n      }\n\n      .columns {\n        grid-template-columns: minmax(0, 1fr);\n        gap: 1.75rem;\n      }\n\n      .intro-heading {\n        display: none;\n      }\n    }\n  `;\n\n  /** Large title of the intro column. */\n  @property({ type: String })\n  heading = '';\n\n  /** Text under the intro title. */\n  @property({ type: String })\n  description = '';\n\n  /** Heading over the featured cards. */\n  @property({ type: String, attribute: 'featured-heading' })\n  featuredHeading = '';\n\n  /** Number of link columns side by side at full width. `0` (the default) uses one per slotted column. */\n  @property({ type: Number })\n  columns = 0;\n\n  @state() private columnCount = 1;\n  @state() private hasIntroLinks = false;\n  @state() private hasFeatured = false;\n\n  private onColumnsSlotChange = (event: Event): void => {\n    this.columnCount = Math.max(1, (event.target as HTMLSlotElement).assignedElements({ flatten: true }).length);\n  };\n\n  private onIntroSlotChange = (event: Event): void => {\n    this.hasIntroLinks = (event.target as HTMLSlotElement).assignedElements({ flatten: true }).length > 0;\n  };\n\n  private onFeaturedSlotChange = (event: Event): void => {\n    this.hasFeatured = (event.target as HTMLSlotElement).assignedElements({ flatten: true }).length > 0;\n  };\n\n  render() {\n    const columns = Math.min(6, Math.max(1, Math.round(this.columns) || this.columnCount));\n    const hasIntroText = !!(this.heading || this.description);\n    const hasIntro = hasIntroText || this.hasIntroLinks;\n    const hasFeatured = this.hasFeatured || !!this.featuredHeading;\n    // Every column — intro, each link column, featured — gets the same share of the width.\n    const tracks = [hasIntro ? 'minmax(0, 1fr)' : '', `minmax(0, ${columns}fr)`, hasFeatured ? 'minmax(0, 1fr)' : '']\n      .filter(Boolean)\n      .join(' ');\n    return html`\n      <div\n        part=\"inner\"\n        class=\"inner\"\n        style=\"grid-template-columns:${tracks};--st-mega-menu-columns:${columns};--st-mega-menu-columns-md:${Math.min(2, columns)}\"\n      >\n        <div part=\"intro\" class=\"intro\" ?hidden=${!hasIntro}>\n          ${this.heading ? html`<p part=\"heading\" class=\"intro-heading\">${this.heading}</p>` : nothing}\n          ${this.description ? html`<p part=\"description\" class=\"intro-description\">${this.description}</p>` : nothing}\n          <div part=\"intro-links\" class=\"intro-links ${hasIntroText ? '' : 'no-text'}\" ?hidden=${!this.hasIntroLinks}>\n            <slot name=\"intro\" @slotchange=${this.onIntroSlotChange}></slot>\n          </div>\n        </div>\n        <div part=\"columns\" class=\"columns\"><slot @slotchange=${this.onColumnsSlotChange}></slot></div>\n        <div part=\"featured\" class=\"featured\" ?hidden=${!hasFeatured}>\n          ${this.featuredHeading ? html`<p part=\"featured-heading\" class=\"featured-heading\">${this.featuredHeading}</p>` : nothing}\n          <div class=\"featured-items\"><slot name=\"featured\" @slotchange=${this.onFeaturedSlotChange}></slot></div>\n        </div>\n      </div>\n    `;\n  }\n}\n","import { LitElement, css, html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { arrowUpRightIcon } from '../shared/icons';\nimport { controlBaseStyles, fontFamilyStyles } from '../shared/styles';\nimport type { MegaMenuSelectEventDetail } from './MegaMenuEvents';\n\n/**\n * One column (or one group within a column) of an `st-mega-menu`: a heading, an optional line of\n * description, then its links stacked — usually `st-menu-item`s with `variant=\"link\"`. Nest\n * columns to stack several headed groups in one column, as okta.com does.\n *\n * `variant=\"card\"` puts the column on a tinted rounded tile and `variant=\"accent\"` on a solid\n * accent tile with light text; both suit a row of equal columns without intro or featured area.\n * `cta-label` + `cta-href` add a pill button at the bottom of the column.\n *\n * The heading (when `href` is set) and the button fire a *cancelable* `mega-menu-select` event\n * (detail: `{ href }`) before navigating; a host doing client-side routing calls\n * `event.preventDefault()` on it.\n *\n * @slot - The column's links, or nested `st-mega-menu-column` groups.\n * @fires mega-menu-select - The heading link or the button was clicked (cancelable; detail `{ href }`).\n * @csspart heading - The heading text or link.\n * @csspart description - The line under the heading.\n * @csspart items - The box holding the links.\n * @csspart cta - The pill button.\n * @cssprop --st-mega-menu-column-padding - Overrides the padding of a `card`/`accent` column.\n */\n@customElement('st-mega-menu-column')\nexport class MegaMenuColumn extends LitElement {\n  static styles = css`\n    ${controlBaseStyles}\n\n    :host {\n      display: flex;\n      flex-direction: column;\n      min-width: 0;\n      box-sizing: border-box;\n      ${fontFamilyStyles}\n    }\n\n    :host([variant='card']),\n    :host([variant='accent']) {\n      /* !important: a page-level reset (e.g. Tailwind Preflight) otherwise zeroes a shadow host's\n         padding; override with --st-mega-menu-column-padding instead. */\n      padding: var(--st-mega-menu-column-padding, 2rem 1.75rem 1.75rem) !important;\n      border-radius: 20px;\n      background: color-mix(in oklch, var(--st-color-text-strong) 5%, var(--st-color-surface));\n    }\n\n    :host([variant='accent']) {\n      background: var(--st-color-accent);\n      color: var(--st-color-on-solid);\n      /* Read by the st-menu-item links inside. */\n      --st-nav-color: var(--st-color-on-solid);\n      --st-nav-hover-bg: transparent;\n    }\n\n    .heading {\n      display: inline-flex;\n      align-items: center;\n      gap: 6px;\n      margin: 0 0 0.75rem;\n      font-size: 1.125rem;\n      font-weight: 500;\n      line-height: 1.35;\n      color: var(--st-color-text-strong);\n      text-decoration: none;\n    }\n\n    :host([variant='card']) .heading,\n    :host([variant='accent']) .heading {\n      font-size: 1.375rem;\n    }\n\n    :host([variant='accent']) .heading {\n      color: inherit;\n    }\n\n    a.heading:hover,\n    a.heading:focus-visible {\n      text-decoration: underline;\n      text-underline-offset: 4px;\n    }\n\n    .description {\n      margin: -0.25rem 0 0.75rem;\n      font-size: 0.875rem;\n      line-height: 1.5;\n      color: var(--st-color-text-muted);\n    }\n\n    :host([variant='accent']) .description {\n      color: inherit;\n      opacity: 0.85;\n    }\n\n    .items {\n      display: flex;\n      flex-direction: column;\n      gap: 2px;\n    }\n\n    /* Nested groups stack with room between them (!important for the same page-reset reason). */\n    ::slotted(st-mega-menu-column:not(:first-child)) {\n      margin-top: 2rem !important;\n    }\n\n    .cta {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      gap: 6px;\n      padding: 0.875rem 1.5rem;\n      border-radius: 9999px;\n      background: var(--st-color-surface);\n      color: var(--st-color-text-strong);\n      font-size: 1rem;\n      font-weight: 500;\n      text-align: center;\n      text-decoration: none;\n      transition: box-shadow 0.2s ease;\n    }\n\n    .cta-spacer {\n      flex: 1;\n      min-height: 1.75rem;\n    }\n\n    .cta:hover,\n    .cta:focus-visible {\n      box-shadow: 0 0 0 2px currentColor;\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      .cta {\n        transition: none;\n      }\n    }\n  `;\n\n  @property({ type: String })\n  heading = '';\n\n  /** Makes the heading a link (e.g. to the section's overview page). */\n  @property({ type: String })\n  href = '';\n\n  @property({ type: String })\n  description = '';\n\n  /** `plain` (default), `card` (tinted tile) or `accent` (solid accent tile, light text). */\n  @property({ type: String, reflect: true })\n  variant: 'plain' | 'card' | 'accent' = 'plain';\n\n  /** Text of a pill button at the bottom of the column; needs `cta-href`. */\n  @property({ type: String, attribute: 'cta-label' })\n  ctaLabel = '';\n\n  @property({ type: String, attribute: 'cta-href' })\n  ctaHref = '';\n\n  private select(event: MouseEvent, href: string): void {\n    if (href.startsWith('http')) return;\n    const selectEvent = new CustomEvent<MegaMenuSelectEventDetail>('mega-menu-select', {\n      detail: { href },\n      bubbles: true,\n      composed: true,\n      cancelable: true\n    });\n    this.dispatchEvent(selectEvent);\n    if (selectEvent.defaultPrevented) event.preventDefault();\n  }\n\n  private renderHeading() {\n    if (!this.heading) return nothing;\n    return this.href\n      ? html`<a part=\"heading\" class=\"heading\" href=${this.href} @click=${(event: MouseEvent) => this.select(event, this.href)}\n          >${this.heading}</a\n        >`\n      : html`<p part=\"heading\" class=\"heading\">${this.heading}</p>`;\n  }\n\n  private renderCta() {\n    if (!this.ctaLabel || !this.ctaHref) return nothing;\n    const external = this.ctaHref.startsWith('http');\n    return html`\n      <span class=\"cta-spacer\"></span>\n      <a\n        part=\"cta\"\n        class=\"cta\"\n        href=${this.ctaHref}\n        target=${external ? '_blank' : '_self'}\n        rel=${external ? 'noopener noreferrer' : nothing}\n        @click=${(event: MouseEvent) => this.select(event, this.ctaHref)}\n        >${this.ctaLabel} ${external ? arrowUpRightIcon(14) : nothing}</a\n      >\n    `;\n  }\n\n  render() {\n    return html`\n      ${this.renderHeading()}\n      ${this.description ? html`<p part=\"description\" class=\"description\">${this.description}</p>` : nothing}\n      <div part=\"items\" class=\"items\" role=\"group\" aria-label=${this.heading || nothing}><slot></slot></div>\n      ${this.renderCta()}\n    `;\n  }\n}\n","import { LitElement, css, html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { controlBaseStyles, fontFamilyStyles } from '../shared/styles';\nimport type { MegaMenuSelectEventDetail } from './MegaMenuEvents';\n\n/**\n * A promo card for the featured column of an `st-mega-menu` (`slot=\"featured\"`). The whole card\n * is one link. Two looks, after okta.com:\n *\n * - `story` (default): a rounded image on top, then the description and an underlined\n *   call-to-action line — a customer story or announcement.\n * - `overlay`: a tile with light text over `image-url` (darkened), or over an accent gradient when\n *   there is no image — an optional `logo-url` top left, the title and description at the bottom.\n *\n * An `http(s)` `href` opens in a new tab unless `target` says otherwise. Any other `href` fires a\n * *cancelable* `mega-menu-select` event (detail: `{ href }`) first; a host doing client-side\n * routing calls `event.preventDefault()` on it.\n *\n * @fires mega-menu-select - The card was clicked (cancelable; detail `{ href }`).\n * @csspart card - The card link.\n * @csspart image - The image (`story`).\n * @csspart logo - The logo (`overlay`).\n * @csspart eyebrow - The small label above the title.\n * @csspart title - The title.\n * @csspart description - The description.\n * @csspart cta - The call-to-action line.\n * @cssprop --st-mega-menu-feature-from - Start colour of the `overlay` gradient (default: the accent colour).\n * @cssprop --st-mega-menu-feature-to - End colour of the `overlay` gradient.\n */\n@customElement('st-mega-menu-feature')\nexport class MegaMenuFeature extends LitElement {\n  /** `focus()` on the element focuses its link, so `st-dropdown` can arrow-key to it. */\n  static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };\n\n  static styles = css`\n    ${controlBaseStyles}\n\n    :host {\n      display: block;\n      ${fontFamilyStyles}\n    }\n\n    .card {\n      display: flex;\n      flex-direction: column;\n      gap: 0.75rem;\n      box-sizing: border-box;\n      color: var(--st-color-text-strong);\n      text-decoration: none;\n    }\n\n    .image {\n      display: block;\n      width: 100%;\n      aspect-ratio: 9 / 8;\n      object-fit: cover;\n      border-radius: 20px;\n      transition: transform 0.3s ease;\n    }\n\n    .card:hover .image {\n      transform: scale(1.015);\n    }\n\n    .eyebrow {\n      font-size: 0.75rem;\n      font-weight: 600;\n      letter-spacing: 0.06em;\n      text-transform: uppercase;\n      color: var(--st-color-accent-text);\n    }\n\n    .title {\n      margin: 0;\n      font-size: 1.125rem;\n      font-weight: 500;\n      line-height: 1.3;\n    }\n\n    .description {\n      margin: 0;\n      font-size: 0.9375rem;\n      line-height: 1.5;\n    }\n\n    .cta {\n      align-self: flex-start;\n      margin-top: 0.75rem;\n      font-size: 0.9375rem;\n      font-weight: 500;\n      text-decoration: underline;\n      text-underline-offset: 5px;\n      text-decoration-thickness: 1px;\n    }\n\n    .card:hover .cta,\n    .card:focus-visible .cta {\n      text-decoration-thickness: 2px;\n    }\n\n    /* overlay */\n    :host([variant='overlay']) .card {\n      justify-content: flex-end;\n      gap: 0.5rem;\n      min-height: 15rem;\n      padding: 1.75rem;\n      border-radius: 20px;\n      color: #fff;\n      background-color: var(--st-color-accent);\n      background-image:\n        linear-gradient(to top, rgb(0 0 0 / 0.55), rgb(0 0 0 / 0.05)),\n        var(--st-mega-menu-feature-image, linear-gradient(160deg, var(--st-mega-menu-feature-from, var(--st-color-accent)), var(--st-mega-menu-feature-to, oklch(0.25 0.12 280))));\n      background-size: cover;\n      background-position: center;\n      transition: transform 0.2s ease;\n    }\n\n    :host([variant='overlay']) .card:hover {\n      transform: translateY(-2px);\n    }\n\n    :host([variant='overlay']) .logo {\n      height: 2.25rem;\n      width: auto;\n      max-width: 70%;\n      margin-bottom: auto;\n      align-self: flex-start;\n      object-fit: contain;\n    }\n\n    :host([variant='overlay']) .title {\n      font-size: 1.75rem;\n      font-weight: 400;\n    }\n\n    :host([variant='overlay']) .eyebrow,\n    :host([variant='overlay']) .cta {\n      color: inherit;\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      .image,\n      :host([variant='overlay']) .card {\n        transition: none;\n      }\n    }\n  `;\n\n  /** `story` (default) or `overlay` — see the element description. */\n  @property({ type: String, reflect: true })\n  variant: 'story' | 'overlay' = 'story';\n\n  @property({ type: String })\n  title = '';\n\n  @property({ type: String })\n  description = '';\n\n  /** Small label above the title, e.g. \"New\" or \"Report\". */\n  @property({ type: String })\n  eyebrow = '';\n\n  @property({ type: String })\n  href = '';\n\n  /** `target` for the link. Defaults to `_blank` for an `http(s)` `href`, `_self` otherwise. */\n  @property({ type: String })\n  target = '';\n\n  /** Image on top (`story`) or behind the text (`overlay`). */\n  @property({ type: String, attribute: 'image-url' })\n  imageUrl = '';\n\n  @property({ type: String, attribute: 'image-alt' })\n  imageAlt = '';\n\n  /** Logo at the top of an `overlay` card. */\n  @property({ type: String, attribute: 'logo-url' })\n  logoUrl = '';\n\n  @property({ type: String, attribute: 'logo-alt' })\n  logoAlt = '';\n\n  /** Call-to-action text at the bottom of the card; empty hides it. */\n  @property({ type: String, attribute: 'cta-label' })\n  ctaLabel = '';\n\n  private get isExternal(): boolean {\n    return this.href.startsWith('http');\n  }\n\n  private onClick = (event: MouseEvent): void => {\n    if (this.isExternal) return;\n    const selectEvent = new CustomEvent<MegaMenuSelectEventDetail>('mega-menu-select', {\n      detail: { href: this.href },\n      bubbles: true,\n      composed: true,\n      cancelable: true\n    });\n    this.dispatchEvent(selectEvent);\n    if (selectEvent.defaultPrevented) event.preventDefault();\n  };\n\n  render() {\n    const target = this.target || (this.isExternal ? '_blank' : '_self');\n    const overlay = this.variant === 'overlay';\n    const style = overlay && this.imageUrl ? `--st-mega-menu-feature-image:url(${JSON.stringify(this.imageUrl)})` : '';\n    return html`\n      <a\n        part=\"card\"\n        class=\"card\"\n        style=${style}\n        href=${this.href || nothing}\n        target=${target}\n        rel=${target === '_blank' ? 'noopener noreferrer' : nothing}\n        @click=${this.onClick}\n      >\n        ${overlay && this.logoUrl ? html`<img part=\"logo\" class=\"logo\" src=${this.logoUrl} alt=${this.logoAlt} />` : nothing}\n        ${!overlay && this.imageUrl\n          ? html`<img part=\"image\" class=\"image\" src=${this.imageUrl} alt=${this.imageAlt} loading=\"lazy\" />`\n          : nothing}\n        ${this.eyebrow ? html`<span part=\"eyebrow\" class=\"eyebrow\">${this.eyebrow}</span>` : nothing}\n        ${this.title ? html`<p part=\"title\" class=\"title\">${this.title}</p>` : nothing}\n        ${this.description ? html`<p part=\"description\" class=\"description\">${this.description}</p>` : nothing}\n        ${this.ctaLabel ? html`<span part=\"cta\" class=\"cta\">${this.ctaLabel}</span>` : nothing}\n      </a>\n    `;\n  }\n}\n"],"mappings":"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","names":["LitElement","css","html","nothing","customElement","property","LitElement","nothing","html","css","property","customElement","LitElement","css","html","nothing","customElement","property","LitElement","html","nothing","css","property","customElement"]}

package/dist/{chunk-5DNVCMOO.js → chunk-IDBEZY2O.js}

@@ -1,6 +1,3 @@
-import {
-  chevronIcon
-} from "./chunk-3TCP25JG.js";
 import {
   invertedSectionTextStyles,
   reducedMotionStyles,
@@ -8,6 +5,9 @@ import {
   sectionSubtitleStyles,
   sectionTitleStyles
 } from "./chunk-3VE6VFJ4.js";
+import {
+  chevronIcon
+} from "./chunk-PB7ZPPLP.js";
 import {
   buttonResetStyles,
   cardShellStyles,
@@ -145,7 +145,9 @@ Testimonials.styles = css`
     :host {
       display: block;
       box-sizing: border-box;
-      padding: var(--st-space-48) var(--st-space-24);
+      /* !important: a page-level reset (e.g. Tailwind Preflight) otherwise zeroes a shadow host's
+         padding; override with --st-testimonials-padding instead. */
+      padding: var(--st-testimonials-padding, var(--st-space-48) var(--st-space-24)) !important;
       background-color: var(--st-color-subtle);
       ${rootFontFamilyStyles}
     }
@@ -444,7 +446,7 @@ Testimonials.styles = css`
 
     @media (max-width: 768px) {
       :host {
-        padding: var(--st-space-40) var(--st-space-20);
+        padding: var(--st-testimonials-padding, var(--st-space-40) var(--st-space-20)) !important;
       }
       .grid {
         grid-template-columns: 1fr;
@@ -506,4 +508,4 @@ Testimonials = __decorateClass([
 export {
   Testimonials
 };
-//# sourceMappingURL=chunk-5DNVCMOO.js.map
+//# sourceMappingURL=chunk-IDBEZY2O.js.map

package/dist/chunk-IDBEZY2O.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/testimonials/Testimonials.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport 'iconify-icon';\n\nimport { chevronIcon } from '../shared/icons';\nimport { buttonResetStyles, cardShellStyles, controlBaseStyles, rootFontFamilyStyles } from '../shared/styles';\nimport { sectionSubtitleStyles, sectionTitleStyles, invertedSectionTextStyles, sectionHeaderStyles, reducedMotionStyles } from '../shared/section-styles';\nimport type { TestimonialsLinkEventDetail } from './TestimonialsEvents';\n\nexport interface TestimonialMetric {\n  /** The figure, e.g. `100M` or `85%`. */\n  value: string;\n  label: string;\n}\n\nexport interface TestimonialItem {\n  id?: string;\n  name?: string;\n  role?: string;\n  company?: string;\n  /** Author photo. */\n  imageSrc?: string;\n  quote?: string;\n  /** Number of stars. Default: 5 for a plain quote card; no stars on a story card (one with a `headline` or `logoSrc`). `0` hides them. */\n  rating?: number;\n  /** Customer logo, shown at the top of the card body. */\n  logoSrc?: string;\n  /** Wide image across the top of the card. */\n  mediaSrc?: string;\n  /** Story headline, e.g. \"Acme gives 100 million users a seamless sign-in\". */\n  headline?: string;\n  /** Key results, shown as large figures. */\n  metrics?: TestimonialMetric[];\n  /** Link to the full story. */\n  href?: string;\n  /** Text of the story link; defaults to the section's `link-label`. */\n  linkLabel?: string;\n}\n\n/**\n * Section heading plus customer quotes or stories. Port of React `Testimonials`.\n *\n * Each card shows whatever its item has: a cover image, the customer logo, a story headline, a\n * quote with star rating, result metrics, the author and a \"See full story\" link. `layout=\"grid\"`\n * (default) lays the cards out in a grid; `layout=\"carousel\"` puts them on one horizontally\n * scrolling, snapping row with previous/next buttons next to the heading — the customer-story\n * carousel of enterprise marketing pages. `action-label`/`action-href` add a section-level link\n * (e.g. \"Explore customer stories\").\n *\n * @fires testimonials-link - Cancelable, before following a story or section link. Detail `{ href }`.\n * @cssprop --st-testimonials-padding - Overrides the section's padding.\n */\n@customElement('st-testimonials')\nexport class Testimonials extends LitElement {\n  static styles = css`\n    ${controlBaseStyles}\n\n    :host {\n      display: block;\n      box-sizing: border-box;\n      /* !important: a page-level reset (e.g. Tailwind Preflight) otherwise zeroes a shadow host's\n         padding; override with --st-testimonials-padding instead. */\n      padding: var(--st-testimonials-padding, var(--st-space-48) var(--st-space-24)) !important;\n      background-color: var(--st-color-subtle);\n      ${rootFontFamilyStyles}\n    }\n\n    :host([inverted]) {\n      background-color: var(--st-color-text-strong);\n    }\n\n    .container {\n      max-width: var(--st-cms-container-max);\n      margin: 0 auto;\n    }\n\n    .header {\n      ${sectionHeaderStyles}\n    }\n\n    .title {\n      ${sectionTitleStyles}\n      margin-bottom: var(--st-space-16);\n      letter-spacing: -0.02em;\n    }\n\n    .subtitle {\n      ${sectionSubtitleStyles}\n      margin: 0 auto;\n    }\n\n    ${invertedSectionTextStyles}\n\n    .grid {\n      display: grid;\n      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));\n      gap: var(--st-space-32);\n    }\n\n    .card {\n      ${cardShellStyles}\n      display: flex;\n      flex-direction: column;\n      margin: 0;\n      overflow: hidden;\n      box-shadow: 0 1px 3px var(--st-shadow-color-sm);\n    }\n\n    .media {\n      aspect-ratio: 16 / 9;\n      background: var(--st-color-divider);\n    }\n\n    .media img {\n      display: block;\n      width: 100%;\n      height: 100%;\n      object-fit: cover;\n      transition: transform 0.4s ease;\n    }\n\n    .card:hover .media img {\n      transform: scale(1.03);\n    }\n\n    .body {\n      flex: 1;\n      display: flex;\n      flex-direction: column;\n      gap: var(--st-space-24);\n      padding: var(--st-space-24);\n    }\n\n    .logo {\n      display: block;\n      height: 32px;\n      width: auto;\n      max-width: 60%;\n      object-fit: contain;\n      object-position: left center;\n    }\n\n    .headline {\n      margin: 0;\n      font-size: var(--st-text-xl);\n      font-weight: var(--st-font-weight-semibold);\n      line-height: 1.35;\n      color: var(--st-color-text-strong);\n    }\n\n    .stars {\n      display: flex;\n      gap: var(--st-space-4);\n      color: var(--st-favorite-accent);\n      font-size: var(--st-size-20);\n    }\n\n    .quote {\n      font-size: var(--st-text-md);\n      line-height: 1.6;\n      color: var(--st-color-text);\n      font-style: italic;\n      margin: 0;\n    }\n\n    .metrics {\n      display: flex;\n      flex-wrap: wrap;\n      gap: var(--st-space-16) var(--st-space-32);\n      margin: 0;\n      padding-top: var(--st-space-16);\n      border-top: 1px solid var(--st-color-border);\n    }\n\n    .metric {\n      display: flex;\n      flex-direction: column-reverse;\n      min-width: 6rem;\n    }\n\n    .metric dt {\n      font-size: var(--st-text-sm);\n      color: var(--st-color-text-muted);\n      line-height: 1.4;\n    }\n\n    .metric dd {\n      margin: 0;\n      font-size: var(--st-cms-text-4xl);\n      font-weight: var(--st-font-weight-bold);\n      letter-spacing: -0.02em;\n      line-height: 1.1;\n      color: var(--st-color-text-strong);\n    }\n\n    .author {\n      display: flex;\n      align-items: center;\n      gap: var(--st-space-12);\n      margin-top: auto;\n    }\n\n    .avatar {\n      width: var(--st-space-48);\n      height: var(--st-space-48);\n      border-radius: var(--st-radius-circle);\n      object-fit: cover;\n      background-color: var(--st-color-divider);\n      flex-shrink: 0;\n    }\n\n    .avatar-placeholder {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      color: var(--st-color-text-muted);\n      font-weight: var(--st-font-weight-semibold);\n      font-size: var(--st-text-xl);\n    }\n\n    .author-info {\n      display: flex;\n      flex-direction: column;\n    }\n\n    .name {\n      font-weight: var(--st-font-weight-semibold);\n      color: var(--st-color-text-strong);\n      font-size: var(--st-text-xl);\n    }\n\n    .role {\n      font-size: var(--st-text-sm);\n      color: var(--st-color-text-faint);\n    }\n\n    .link {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--st-space-8);\n      margin-top: auto;\n      font-weight: var(--st-font-weight-semibold);\n      color: var(--st-color-text-strong);\n      text-decoration: none;\n    }\n\n    .author + .link {\n      margin-top: 0;\n    }\n\n    .link:hover {\n      text-decoration: underline;\n      text-underline-offset: 3px;\n    }\n\n    .link svg {\n      transition: transform 0.2s ease;\n    }\n\n    .link:hover svg {\n      transform: translateX(3px);\n    }\n\n    /* ---- layout=\"carousel\" ---- */\n\n    :host([layout='carousel']) .header {\n      display: flex;\n      align-items: flex-end;\n      justify-content: space-between;\n      gap: var(--st-space-24);\n      text-align: left;\n      margin-bottom: var(--st-space-32);\n    }\n\n    :host([layout='carousel']) .subtitle {\n      margin: 0;\n    }\n\n    .controls {\n      display: flex;\n      align-items: center;\n      gap: var(--st-space-12);\n      flex: none;\n    }\n\n    .section-link {\n      margin-right: var(--st-space-12);\n    }\n\n    :host([inverted]) .section-link {\n      color: var(--st-color-on-solid);\n    }\n\n    .arrow {\n      ${buttonResetStyles}\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      width: var(--st-size-40);\n      height: var(--st-size-40);\n      border-radius: var(--st-radius-circle);\n      border: 1px solid var(--st-color-border-strong);\n      color: var(--st-color-text-strong);\n      background: var(--st-color-surface);\n      transition:\n        background 0.2s ease,\n        opacity 0.2s ease;\n    }\n\n    .arrow:hover:not(:disabled) {\n      background: var(--st-color-hover);\n    }\n\n    .arrow:disabled {\n      opacity: 0.4;\n      cursor: default;\n    }\n\n    .track {\n      display: flex;\n      gap: var(--st-space-24);\n      overflow-x: auto;\n      scroll-snap-type: x mandatory;\n      scroll-behavior: smooth;\n      scrollbar-width: none;\n      /* Room for the cards' shadow and focus rings. */\n      padding: var(--st-space-4) var(--st-space-4) var(--st-space-12);\n      margin: calc(-1 * var(--st-space-4));\n    }\n\n    .track::-webkit-scrollbar {\n      display: none;\n    }\n\n    .track > .card {\n      flex: 0 0 min(380px, 85%);\n      scroll-snap-align: start;\n    }\n\n    /* The section link sits under the grid; in the carousel it is next to the arrows instead, and\n       only drops below the row on a narrow screen. */\n    .section-footer {\n      margin-top: var(--st-space-32);\n      text-align: center;\n    }\n\n    :host([inverted]) .section-footer .link {\n      color: var(--st-color-on-solid);\n    }\n\n    :host([layout='carousel']) .section-footer {\n      margin-top: 0;\n      text-align: left;\n    }\n\n    .footer-link {\n      display: none;\n    }\n\n    @media (max-width: 768px) {\n      :host {\n        padding: var(--st-testimonials-padding, var(--st-space-40) var(--st-space-20)) !important;\n      }\n      .grid {\n        grid-template-columns: 1fr;\n      }\n      :host([layout='carousel']) .header {\n        flex-direction: column;\n        align-items: flex-start;\n      }\n      .section-link {\n        display: none;\n      }\n      .footer-link {\n        display: inline-flex;\n        margin-top: var(--st-space-24);\n      }\n    }\n\n    ${reducedMotionStyles}\n    @media (prefers-reduced-motion: reduce) {\n      .track {\n        scroll-behavior: auto;\n      }\n    }\n  `;\n\n  @property({ type: String })\n  title = '';\n\n  @property({ type: String })\n  subtitle = '';\n\n  @property({ attribute: false })\n  items: TestimonialItem[] = [];\n\n  @property({ type: Boolean, reflect: true })\n  inverted = false;\n\n  /** `grid` (default) or `carousel`: one scrolling row with previous/next buttons. */\n  @property({ type: String, reflect: true })\n  layout: 'grid' | 'carousel' = 'grid';\n\n  /** Default text of each card's story link. */\n  @property({ type: String, attribute: 'link-label' })\n  linkLabel = 'See full story';\n\n  /** Section-level link text, e.g. \"Explore customer stories\". */\n  @property({ type: String, attribute: 'action-label' })\n  actionLabel = '';\n\n  @property({ type: String, attribute: 'action-href' })\n  actionHref = '';\n\n  @state() private atStart = true;\n  @state() private atEnd = false;\n\n  private get track(): HTMLElement | null {\n    return this.renderRoot.querySelector('.track');\n  }\n\n  private resizeObserver?: ResizeObserver;\n\n  protected updated(changed: Map<string, unknown>): void {\n    if (changed.has('layout') || changed.has('items')) {\n      this.resizeObserver?.disconnect();\n      const track = this.track;\n      if (track) {\n        this.resizeObserver = new ResizeObserver(this.syncArrows);\n        this.resizeObserver.observe(track);\n      }\n      this.syncArrows();\n    }\n  }\n\n  disconnectedCallback(): void {\n    this.resizeObserver?.disconnect();\n    super.disconnectedCallback();\n  }\n\n  private syncArrows = (): void => {\n    const track = this.track;\n    if (!track) return;\n    this.atStart = track.scrollLeft <= 1;\n    this.atEnd = track.scrollLeft + track.clientWidth >= track.scrollWidth - 1;\n  };\n\n  private scrollByCard(direction: 1 | -1): void {\n    const track = this.track;\n    const card = track?.querySelector<HTMLElement>('.card');\n    if (!track || !card) return;\n    const gap = parseFloat(getComputedStyle(track).columnGap) || 0;\n    track.scrollBy({ left: direction * (card.offsetWidth + gap) });\n  }\n\n  private onLinkClick(event: MouseEvent, href: string): void {\n    const link = new CustomEvent<TestimonialsLinkEventDetail>('testimonials-link', {\n      detail: { href },\n      bubbles: true,\n      composed: true,\n      cancelable: true\n    });\n    this.dispatchEvent(link);\n    if (link.defaultPrevented) event.preventDefault();\n  }\n\n  private renderLink(label: string, href: string, className: string, part: string) {\n    return html`<a class=\"link ${className}\" part=${part} href=${href} @click=${(event: MouseEvent) => this.onLinkClick(event, href)}>\n      ${label} ${chevronIcon('right', 14)}\n    </a>`;\n  }\n\n  private renderItem(item: TestimonialItem) {\n    const story = !!(item.headline || item.logoSrc);\n    const rating = item.rating ?? (item.quote && !story ? 5 : 0);\n    const metrics = item.metrics ?? [];\n    return html`\n      <article class=\"card\" part=\"card\">\n        ${item.mediaSrc ? html`<div class=\"media\" part=\"media\"><img src=${item.mediaSrc} alt=\"\" loading=\"lazy\" /></div>` : nothing}\n        <div class=\"body\" part=\"body\">\n          ${item.logoSrc ? html`<img class=\"logo\" part=\"logo\" src=${item.logoSrc} alt=${item.company || item.name || ''} />` : nothing}\n          ${item.headline ? html`<h3 class=\"headline\" part=\"headline\">${item.headline}</h3>` : nothing}\n          ${rating > 0\n            ? html`<div class=\"stars\" part=\"stars\" role=\"img\" aria-label=\"${rating} / 5\">\n                ${Array.from({ length: rating }, () => html`<iconify-icon icon=\"mdi:star\"></iconify-icon>`)}\n              </div>`\n            : nothing}\n          ${item.quote ? html`<blockquote class=\"quote\" part=\"quote\">\"${item.quote}\"</blockquote>` : nothing}\n          ${metrics.length\n            ? html`<dl class=\"metrics\" part=\"metrics\">\n                ${metrics.map(metric => html`<div class=\"metric\"><dt>${metric.label}</dt><dd>${metric.value}</dd></div>`)}\n              </dl>`\n            : nothing}\n          ${item.name\n            ? html`<div class=\"author\" part=\"author\">\n                ${item.imageSrc\n                  ? html`<img class=\"avatar\" part=\"avatar\" src=${item.imageSrc} alt=${item.name} />`\n                  : html`<div class=\"avatar avatar-placeholder\" part=\"avatar\">${item.name.charAt(0)}</div>`}\n                <span class=\"author-info\">\n                  <span class=\"name\" part=\"name\">${item.name}</span>\n                  ${item.role || item.company\n                    ? html`<span class=\"role\" part=\"role\">${[item.role, item.company].filter(Boolean).join(' at ')}</span>`\n                    : nothing}\n                </span>\n              </div>`\n            : nothing}\n          ${item.href ? this.renderLink(item.linkLabel || this.linkLabel, item.href, '', 'link') : nothing}\n        </div>\n      </article>\n    `;\n  }\n\n  render() {\n    const carousel = this.layout === 'carousel';\n    const sectionLink = this.actionLabel && this.actionHref;\n    return html`\n      <div class=\"container\" part=\"container\">\n        <div class=\"header\" part=\"header\">\n          <div>\n            <h2 class=\"title\" part=\"title\">${this.title}</h2>\n            ${this.subtitle ? html`<p class=\"subtitle\" part=\"subtitle\">${this.subtitle}</p>` : nothing}\n          </div>\n          ${carousel\n            ? html`<div class=\"controls\" part=\"controls\">\n                ${sectionLink ? this.renderLink(this.actionLabel, this.actionHref, 'section-link', 'action') : nothing}\n                <button class=\"arrow\" part=\"arrow prev\" type=\"button\" aria-label=\"Previous\" ?disabled=${this.atStart} @click=${() => this.scrollByCard(-1)}>\n                  ${chevronIcon('left', 16)}\n                </button>\n                <button class=\"arrow\" part=\"arrow next\" type=\"button\" aria-label=\"Next\" ?disabled=${this.atEnd} @click=${() => this.scrollByCard(1)}>\n                  ${chevronIcon('right', 16)}\n                </button>\n              </div>`\n            : nothing}\n        </div>\n        ${carousel\n          ? html`<div class=\"track\" part=\"track\" role=\"region\" aria-label=${this.title || 'Stories'} tabindex=\"0\" @scroll=${this.syncArrows}>\n              ${this.items.map(item => this.renderItem(item))}\n            </div>`\n          : html`<div class=\"grid\" part=\"grid\">${this.items.map(item => this.renderItem(item))}</div>`}\n        ${sectionLink\n          ? html`<div class=\"section-footer\">${this.renderLink(this.actionLabel, this.actionHref, carousel ? 'footer-link' : '', 'action')}</div>`\n          : nothing}\n      </div>\n    `;\n  }\n}\n"],"mappings":"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AAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAkMf,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAqFnB,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASvB;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GA9Uf,aA+UX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAjVf,aAkVX;AAGA;AAAA,EADC,SAAS,EAAE,WAAW,MAAM,CAAC;AAAA,GApVnB,aAqVX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAvV/B,aAwVX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GA3V9B,aA4VX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,aAAa,CAAC;AAAA,GA/VxC,aAgWX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,eAAe,CAAC;AAAA,GAnW1C,aAoWX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,cAAc,CAAC;AAAA,GAtWzC,aAuWX;AAEiB;AAAA,EAAhB,MAAM;AAAA,GAzWI,aAyWM;AACA;AAAA,EAAhB,MAAM;AAAA,GA1WI,aA0WM;AA1WN,eAAN;AAAA,EADN,cAAc,iBAAiB;AAAA,GACnB;","names":[]}

package/dist/{chunk-TH5NZXA7.js → chunk-KHPJ5FAJ.js}

@@ -1,3 +1,6 @@
+import {
+  arrowUpRightIcon
+} from "./chunk-PB7ZPPLP.js";
 import {
   controlBaseStyles,
   fontFamilyStyles
@@ -20,6 +23,7 @@ var MenuItem = class extends LitElement {
     this.compact = false;
     this.showDescription = true;
     this.target = "_self";
+    this.variant = "default";
     this.hasIcon = false;
     this.onIconSlotChange = (event) => {
       this.hasIcon = event.target.assignedNodes({ flatten: true }).length > 0;
@@ -37,13 +41,30 @@ var MenuItem = class extends LitElement {
   }
   render() {
     const showDescription = !!this.description && this.showDescription;
-    const classes = ["menu-item", this.active ? "active" : "", this.compact ? "compact" : "", showDescription ? "" : "no-description"].filter(Boolean).join(" ");
+    const link = this.variant === "link";
+    const classes = [
+      "menu-item",
+      link ? "link" : "",
+      this.active ? "active" : "",
+      this.compact ? "compact" : "",
+      showDescription ? "" : "no-description"
+    ].filter(Boolean).join(" ");
+    const external = link && this.target === "_blank";
     return html`
-      <a part="item" class=${classes} href=${this.href} target=${this.target} @click=${this.onClick}>
+      <a
+        part="item"
+        class=${classes}
+        href=${this.href}
+        target=${this.target}
+        rel=${this.target === "_blank" ? "noopener noreferrer" : nothing}
+        @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>
+            <span part="title" class="menu-item-title"
+              >${this.title}${external ? html`<span class="external">${arrowUpRightIcon(11)}</span>` : nothing}</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}
@@ -212,6 +233,58 @@ MenuItem.styles = css`
       font-size: 0.75rem;
     }
 
+    /* link: a plain text link (okta.com mega-menu columns) — no box, no nudge, the badge right
+       after the title, long titles wrap. */
+    .menu-item.link {
+      padding: 7px 0;
+      gap: 10px;
+      font-size: 0.9375rem;
+      color: var(--st-nav-color, var(--st-color-text));
+    }
+
+    .menu-item.link:hover,
+    .menu-item.link:focus-visible {
+      padding-left: 0;
+      background: transparent;
+      color: var(--st-nav-color, var(--st-color-text-strong));
+    }
+
+    .menu-item.link:hover .menu-item-title,
+    .menu-item.link:focus-visible .menu-item-title {
+      text-decoration: underline;
+      text-underline-offset: 4px;
+    }
+
+    .menu-item.link:active {
+      transform: none;
+    }
+
+    .menu-item.link.active {
+      border-left: 0;
+      background: transparent;
+      font-weight: 600;
+    }
+
+    .menu-item.link .menu-item-header {
+      justify-content: flex-start;
+    }
+
+    .menu-item.link .menu-item-title {
+      white-space: normal;
+      font-weight: 400;
+    }
+
+    .menu-item.link .menu-item-description {
+      margin-top: 2px;
+      font-size: 0.8125rem;
+    }
+
+    .external {
+      display: inline-flex;
+      margin-left: 3px;
+      vertical-align: 0.05em;
+    }
+
     .menu-item.no-description {
       align-items: center;
     }
@@ -261,6 +334,9 @@ __decorateClass([
 __decorateClass([
   property({ type: String })
 ], MenuItem.prototype, "target", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], MenuItem.prototype, "variant", 2);
 __decorateClass([
   state()
 ], MenuItem.prototype, "hasIcon", 2);
@@ -271,4 +347,4 @@ MenuItem = __decorateClass([
 export {
   MenuItem
 };
-//# sourceMappingURL=chunk-TH5NZXA7.js.map
+//# sourceMappingURL=chunk-KHPJ5FAJ.js.map

package/dist/chunk-KHPJ5FAJ.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 { arrowUpRightIcon } from '../shared/icons';\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      /* --st-nav-*: set by a host bar (st-header's transparent state) to recolour its nav items. */\r\n      color: var(--st-nav-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-nav-hover-bg, var(--st-color-hover));\r\n      color: var(--st-nav-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    /* link: a plain text link (okta.com mega-menu columns) — no box, no nudge, the badge right\r\n       after the title, long titles wrap. */\r\n    .menu-item.link {\r\n      padding: 7px 0;\r\n      gap: 10px;\r\n      font-size: 0.9375rem;\r\n      color: var(--st-nav-color, var(--st-color-text));\r\n    }\r\n\r\n    .menu-item.link:hover,\r\n    .menu-item.link:focus-visible {\r\n      padding-left: 0;\r\n      background: transparent;\r\n      color: var(--st-nav-color, var(--st-color-text-strong));\r\n    }\r\n\r\n    .menu-item.link:hover .menu-item-title,\r\n    .menu-item.link:focus-visible .menu-item-title {\r\n      text-decoration: underline;\r\n      text-underline-offset: 4px;\r\n    }\r\n\r\n    .menu-item.link:active {\r\n      transform: none;\r\n    }\r\n\r\n    .menu-item.link.active {\r\n      border-left: 0;\r\n      background: transparent;\r\n      font-weight: 600;\r\n    }\r\n\r\n    .menu-item.link .menu-item-header {\r\n      justify-content: flex-start;\r\n    }\r\n\r\n    .menu-item.link .menu-item-title {\r\n      white-space: normal;\r\n      font-weight: 400;\r\n    }\r\n\r\n    .menu-item.link .menu-item-description {\r\n      margin-top: 2px;\r\n      font-size: 0.8125rem;\r\n    }\r\n\r\n    .external {\r\n      display: inline-flex;\r\n      margin-left: 3px;\r\n      vertical-align: 0.05em;\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  /** `default` (a row with a hover box) or `link` (a plain text link, as in `st-mega-menu-column`;\r\n   * marked with an arrow when it opens a new tab). */\r\n  @property({ type: String, reflect: true })\r\n  variant: 'default' | 'link' = 'default';\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 link = this.variant === 'link';\r\n    const classes = [\r\n      'menu-item',\r\n      link ? 'link' : '',\r\n      this.active ? 'active' : '',\r\n      this.compact ? 'compact' : '',\r\n      showDescription ? '' : 'no-description'\r\n    ]\r\n      .filter(Boolean)\r\n      .join(' ');\r\n    const external = link && this.target === '_blank';\r\n    return html`\r\n      <a\r\n        part=\"item\"\r\n        class=${classes}\r\n        href=${this.href}\r\n        target=${this.target}\r\n        rel=${this.target === '_blank' ? 'noopener noreferrer' : nothing}\r\n        @click=${this.onClick}\r\n      >\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\"\r\n              >${this.title}${external ? html`<span class=\"external\">${arrowUpRightIcon(11)}</span>` : nothing}</span\r\n            >\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":"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","names":[]}

package/dist/{chunk-2VZFHTBC.js → chunk-MW43OS47.js}

@@ -88,7 +88,9 @@ CookieConsent.styles = css`
       display: flex;
       flex-direction: column;
       gap: var(--st-space-16);
-      padding: var(--st-space-24);
+      /* !important: a page-level reset (e.g. Tailwind Preflight) otherwise zeroes a shadow host's
+         padding; override with --st-cookie-consent-padding instead. */
+      padding: var(--st-cookie-consent-padding, var(--st-space-24)) !important;
       background: var(--st-color-surface);
       color: var(--st-color-text);
       border-top: 1px solid var(--st-color-border);
@@ -159,7 +161,7 @@ CookieConsent.styles = css`
         flex-direction: row;
         align-items: center;
         justify-content: space-between;
-        padding: var(--st-space-16) var(--st-space-32);
+        padding: var(--st-cookie-consent-padding, var(--st-space-16) var(--st-space-32)) !important;
       }
     }
 
@@ -200,4 +202,4 @@ CookieConsent = __decorateClass([
 export {
   CookieConsent
 };
-//# sourceMappingURL=chunk-2VZFHTBC.js.map
+//# sourceMappingURL=chunk-MW43OS47.js.map

package/dist/chunk-MW43OS47.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/cookie-consent/CookieConsent.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\r\nimport { customElement, property, state } from 'lit/decorators.js';\r\n\r\nimport { buttonResetStyles, controlBaseStyles, rootFontFamilyStyles } from '../shared/styles';\r\nimport type { CookieConsentEventDetail, CookieConsentStatus } from './CookieConsentEvents';\r\n\r\nconst DEFAULT_STORAGE_KEY = 'sankhya_ui_cookie_consent';\r\n\r\n/**\r\n * Fixed bottom consent bar. The source read/wrote consent through a React `UserContext`; here the\r\n * element persists the choice itself in localStorage (`storage-key`, default the source's\r\n * `sankhya_ui_cookie_consent`; storage errors are ignored) and renders nothing once a choice\r\n * exists. Fires `cookie-consent-accept` / `cookie-consent-refuse` (detail `{ status }`). The\r\n * default slot replaces the message text.\r\n *\r\n * @cssprop --st-cookie-consent-padding - Overrides the bar's padding.\r\n */\r\n@customElement('st-cookie-consent')\r\nexport class CookieConsent extends LitElement {\r\n  static styles = css`\r\n    ${controlBaseStyles}\r\n\r\n    @keyframes st-cookie-slide-up {\r\n      from {\r\n        transform: translateY(100%);\r\n      }\r\n      to {\r\n        transform: translateY(0);\r\n      }\r\n    }\r\n\r\n    :host {\r\n      position: fixed;\r\n      bottom: 0;\r\n      left: 0;\r\n      width: 100%;\r\n      box-sizing: border-box;\r\n      z-index: 9999;\r\n      display: flex;\r\n      flex-direction: column;\r\n      gap: var(--st-space-16);\r\n      /* !important: a page-level reset (e.g. Tailwind Preflight) otherwise zeroes a shadow host's\r\n         padding; override with --st-cookie-consent-padding instead. */\r\n      padding: var(--st-cookie-consent-padding, var(--st-space-24)) !important;\r\n      background: var(--st-color-surface);\r\n      color: var(--st-color-text);\r\n      border-top: 1px solid var(--st-color-border);\r\n      box-shadow: 0 -4px 10px var(--st-shadow-color-sm);\r\n      animation: st-cookie-slide-up 0.3s ease-out;\r\n      ${rootFontFamilyStyles}\r\n    }\r\n\r\n    .content {\r\n      flex: 1;\r\n    }\r\n\r\n    .message {\r\n      margin: 0;\r\n      font-size: var(--st-text-md);\r\n      line-height: 1.5;\r\n    }\r\n\r\n    .link {\r\n      color: var(--st-color-accent-text);\r\n      text-decoration: underline;\r\n      margin-left: var(--st-space-4);\r\n    }\r\n\r\n    .link:hover {\r\n      text-decoration: none;\r\n    }\r\n\r\n    .actions {\r\n      display: flex;\r\n      gap: var(--st-space-12);\r\n      flex-shrink: 0;\r\n    }\r\n\r\n    .btn {\r\n      ${buttonResetStyles}\r\n      padding: var(--st-space-8) var(--st-space-16);\r\n      border: 1px solid transparent;\r\n      border-radius: var(--st-radius-xs);\r\n      font-weight: var(--st-font-weight-medium);\r\n      font-size: var(--st-text-md);\r\n      transition:\r\n        background-color 0.2s ease,\r\n        color 0.2s ease;\r\n    }\r\n\r\n    .accept {\r\n      background: var(--st-button-primary-bg);\r\n      color: var(--st-button-primary-color);\r\n    }\r\n\r\n    .accept:hover {\r\n      opacity: 0.9;\r\n    }\r\n\r\n    .refuse {\r\n      border-color: var(--st-color-border);\r\n      color: var(--st-color-text-muted);\r\n    }\r\n\r\n    .refuse:hover {\r\n      background: var(--st-color-hover);\r\n      color: var(--st-color-text-strong);\r\n    }\r\n\r\n    @media (min-width: 768px) {\r\n      :host {\r\n        flex-direction: row;\r\n        align-items: center;\r\n        justify-content: space-between;\r\n        padding: var(--st-cookie-consent-padding, var(--st-space-16) var(--st-space-32)) !important;\r\n      }\r\n    }\r\n\r\n    @media (prefers-reduced-motion: reduce) {\r\n      :host {\r\n        animation: none;\r\n      }\r\n      .btn {\r\n        transition: none;\r\n      }\r\n    }\r\n  `;\r\n\r\n  @property({ type: String })\r\n  message = '';\r\n\r\n  @property({ type: String, attribute: 'accept-button-text' })\r\n  acceptButtonText = 'Accept';\r\n\r\n  @property({ type: String, attribute: 'refuse-button-text' })\r\n  refuseButtonText = 'Refuse';\r\n\r\n  @property({ type: String, attribute: 'privacy-policy-link' })\r\n  privacyPolicyLink = '';\r\n\r\n  @property({ type: String, attribute: 'privacy-policy-text' })\r\n  privacyPolicyText = 'Privacy Policy';\r\n\r\n  @property({ type: String, attribute: 'storage-key' })\r\n  storageKey = DEFAULT_STORAGE_KEY;\r\n\r\n  /** The stored choice, or `null` while undecided (the bar is only shown then). */\r\n  @state() private consent: CookieConsentStatus | null = null;\r\n\r\n  connectedCallback(): void {\r\n    super.connectedCallback();\r\n    this.consent = this.readStored();\r\n  }\r\n\r\n  private readStored(): CookieConsentStatus | null {\r\n    try {\r\n      const saved = localStorage.getItem(this.storageKey);\r\n      return saved === 'accepted' || saved === 'refused' ? saved : null;\r\n    } catch {\r\n      return null;\r\n    }\r\n  }\r\n\r\n  private choose(status: CookieConsentStatus): void {\r\n    this.consent = status;\r\n    try {\r\n      localStorage.setItem(this.storageKey, status);\r\n    } catch {\r\n      // Storage unavailable (private mode, blocked): the choice just doesn't persist.\r\n    }\r\n    this.dispatchEvent(\r\n      new CustomEvent<CookieConsentEventDetail>(status === 'accepted' ? 'cookie-consent-accept' : 'cookie-consent-refuse', {\r\n        detail: { status },\r\n        bubbles: true,\r\n        composed: true\r\n      })\r\n    );\r\n  }\r\n\r\n  render() {\r\n    if (this.consent !== null) return nothing;\r\n    return html`\r\n      <div class=\"content\" part=\"content\">\r\n        <p class=\"message\" part=\"message\">\r\n          <slot>\r\n            ${this.message || 'We use cookies to enhance your experience. By continuing to visit this site you agree to our use of cookies.'}\r\n            ${this.privacyPolicyLink\r\n              ? html`<a class=\"link\" part=\"link\" href=${this.privacyPolicyLink} target=\"_blank\" rel=\"noopener noreferrer\">${this.privacyPolicyText}</a>`\r\n              : nothing}\r\n          </slot>\r\n        </p>\r\n      </div>\r\n      <div class=\"actions\" part=\"actions\">\r\n        <button class=\"btn refuse\" part=\"refuse\" type=\"button\" @click=${() => this.choose('refused')}>${this.refuseButtonText}</button>\r\n        <button class=\"btn accept\" part=\"accept\" type=\"button\" @click=${() => this.choose('accepted')}>${this.acceptButtonText}</button>\r\n      </div>\r\n    `;\r\n  }\r\n}\r\n"],"mappings":"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","names":[]}

package/dist/{chunk-N63TVWK3.js → chunk-NN3OCPDV.js}

@@ -53,7 +53,9 @@ Section.styles = css`
       display: block;
       box-sizing: border-box;
       width: 100%;
-      padding: var(--st-section-space-m) var(--st-space-24);
+      /* !important on every padding rule: a page-level reset (e.g. Tailwind Preflight) otherwise
+         zeroes a shadow host's padding. Rescale it with the --st-section-space-* tokens. */
+      padding: var(--st-section-space-m) var(--st-section-padding-inline, var(--st-space-24)) !important;
       background: var(--st-section-bg, var(--st-color-surface));
       color: var(--st-color-text-strong);
       ${rootFontFamilyStyles}
@@ -64,8 +66,8 @@ Section.styles = css`
     }
 
     :host([background='dark']) {
-      background: var(--st-section-bg, var(--st-color-text-strong));
-      color: var(--st-color-on-solid);
+      background: var(--st-section-bg, var(--st-cms-band-dark-bg));
+      color: var(--st-cms-band-dark-color);
     }
 
     :host([background='accent']) {
@@ -77,21 +79,21 @@ Section.styles = css`
       background: var(--st-section-bg, transparent);
     }
 
-    :host([spacing-above='none']) { padding-top: var(--st-section-space-none); }
-    :host([spacing-above='s']) { padding-top: var(--st-section-space-s); }
-    :host([spacing-above='l']) { padding-top: var(--st-section-space-l); }
-    :host([spacing-above='xl']) { padding-top: var(--st-section-space-xl); }
-    :host([spacing-above='xxl']) { padding-top: var(--st-section-space-xxl); }
+    :host([spacing-above='none']) { padding-top: var(--st-section-space-none) !important; }
+    :host([spacing-above='s']) { padding-top: var(--st-section-space-s) !important; }
+    :host([spacing-above='l']) { padding-top: var(--st-section-space-l) !important; }
+    :host([spacing-above='xl']) { padding-top: var(--st-section-space-xl) !important; }
+    :host([spacing-above='xxl']) { padding-top: var(--st-section-space-xxl) !important; }
 
-    :host([spacing-below='none']) { padding-bottom: var(--st-section-space-none); }
-    :host([spacing-below='s']) { padding-bottom: var(--st-section-space-s); }
-    :host([spacing-below='l']) { padding-bottom: var(--st-section-space-l); }
-    :host([spacing-below='xl']) { padding-bottom: var(--st-section-space-xl); }
-    :host([spacing-below='xxl']) { padding-bottom: var(--st-section-space-xxl); }
+    :host([spacing-below='none']) { padding-bottom: var(--st-section-space-none) !important; }
+    :host([spacing-below='s']) { padding-bottom: var(--st-section-space-s) !important; }
+    :host([spacing-below='l']) { padding-bottom: var(--st-section-space-l) !important; }
+    :host([spacing-below='xl']) { padding-bottom: var(--st-section-space-xl) !important; }
+    :host([spacing-below='xxl']) { padding-bottom: var(--st-section-space-xxl) !important; }
 
     :host([width='full']) {
-      padding-left: 0;
-      padding-right: 0;
+      padding-left: 0 !important;
+      padding-right: 0 !important;
     }
 
     .inner {
@@ -153,7 +155,10 @@ Section.styles = css`
     }
 
     :host([background='dark']) .eyebrow,
-    :host([background='dark']) .subtitle,
+    :host([background='dark']) .subtitle {
+      color: color-mix(in oklch, var(--st-cms-band-dark-color) 80%, transparent);
+    }
+
     :host([background='accent']) .eyebrow,
     :host([background='accent']) .subtitle {
       color: color-mix(in oklch, var(--st-color-on-solid) 80%, transparent);
@@ -164,8 +169,7 @@ Section.styles = css`
         --st-section-space-l: 3.5rem;
         --st-section-space-xl: 4.5rem;
         --st-section-space-xxl: 5.5rem;
-        padding-left: var(--st-space-20);
-        padding-right: var(--st-space-20);
+        --st-section-padding-inline: var(--st-space-20);
       }
     }
   `;
@@ -200,4 +204,4 @@ Section = __decorateClass([
 export {
   Section
 };
-//# sourceMappingURL=chunk-N63TVWK3.js.map
+//# sourceMappingURL=chunk-NN3OCPDV.js.map

package/dist/chunk-NN3OCPDV.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/section/Section.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { controlBaseStyles, rootFontFamilyStyles } from '../shared/styles';\nimport { sectionSubtitleStyles, sectionTitleStyles } from '../shared/section-styles';\n\n/**\n * A page band that holds other content: sets the background, the spacing above and below, and\n * the content width, with an optional eyebrow/title/subtitle heading over its slotted children.\n * Use it to give a run of components one dark or tinted backdrop and a consistent vertical rhythm,\n * the way enterprise marketing pages stack full-width sections.\n *\n * @slot - The section's content.\n * @cssprop --st-section-bg - Overrides the background colour picked by `background`.\n * @cssprop --st-section-padding-inline - Overrides the left/right padding (not with `width=\"full\"`).\n * @csspart inner - The width-limited content box.\n * @csspart header - The heading block.\n */\n@customElement('st-section')\nexport class Section extends LitElement {\n  static styles = css`\n    ${controlBaseStyles}\n\n    :host {\n      --st-section-space-none: 0;\n      --st-section-space-s: var(--st-space-24);\n      --st-section-space-m: var(--st-space-48);\n      --st-section-space-l: 4.5rem;\n      --st-section-space-xl: 6rem;\n      --st-section-space-xxl: 8rem;\n\n      display: block;\n      box-sizing: border-box;\n      width: 100%;\n      /* !important on every padding rule: a page-level reset (e.g. Tailwind Preflight) otherwise\n         zeroes a shadow host's padding. Rescale it with the --st-section-space-* tokens. */\n      padding: var(--st-section-space-m) var(--st-section-padding-inline, var(--st-space-24)) !important;\n      background: var(--st-section-bg, var(--st-color-surface));\n      color: var(--st-color-text-strong);\n      ${rootFontFamilyStyles}\n    }\n\n    :host([background='subtle']) {\n      background: var(--st-section-bg, var(--st-color-subtle));\n    }\n\n    :host([background='dark']) {\n      background: var(--st-section-bg, var(--st-cms-band-dark-bg));\n      color: var(--st-cms-band-dark-color);\n    }\n\n    :host([background='accent']) {\n      background: var(--st-section-bg, var(--st-color-accent));\n      color: var(--st-color-on-solid);\n    }\n\n    :host([background='transparent']) {\n      background: var(--st-section-bg, transparent);\n    }\n\n    :host([spacing-above='none']) { padding-top: var(--st-section-space-none) !important; }\n    :host([spacing-above='s']) { padding-top: var(--st-section-space-s) !important; }\n    :host([spacing-above='l']) { padding-top: var(--st-section-space-l) !important; }\n    :host([spacing-above='xl']) { padding-top: var(--st-section-space-xl) !important; }\n    :host([spacing-above='xxl']) { padding-top: var(--st-section-space-xxl) !important; }\n\n    :host([spacing-below='none']) { padding-bottom: var(--st-section-space-none) !important; }\n    :host([spacing-below='s']) { padding-bottom: var(--st-section-space-s) !important; }\n    :host([spacing-below='l']) { padding-bottom: var(--st-section-space-l) !important; }\n    :host([spacing-below='xl']) { padding-bottom: var(--st-section-space-xl) !important; }\n    :host([spacing-below='xxl']) { padding-bottom: var(--st-section-space-xxl) !important; }\n\n    :host([width='full']) {\n      padding-left: 0 !important;\n      padding-right: 0 !important;\n    }\n\n    .inner {\n      max-width: var(--st-cms-container-max);\n      margin: 0 auto;\n    }\n\n    :host([width='narrow']) .inner {\n      max-width: 800px;\n    }\n\n    :host([width='full']) .inner {\n      max-width: none;\n    }\n\n    .header {\n      margin-bottom: var(--st-space-48);\n    }\n\n    :host([text-alignment='center']) .header {\n      text-align: center;\n    }\n\n    :host([text-alignment='center']) .subtitle {\n      margin-inline: auto;\n    }\n\n    :host([width='full']) .header {\n      max-width: var(--st-cms-container-max);\n      margin-inline: auto;\n      padding-inline: var(--st-space-24);\n      box-sizing: border-box;\n    }\n\n    .eyebrow {\n      margin: 0 0 var(--st-space-12);\n      font-size: var(--st-text-sm);\n      font-weight: var(--st-font-weight-bold);\n      letter-spacing: 0.12em;\n      text-transform: uppercase;\n      color: var(--st-color-text-muted);\n    }\n\n    .title {\n      ${sectionTitleStyles}\n      color: inherit;\n      letter-spacing: -0.02em;\n      max-width: 24ch;\n    }\n\n    :host([text-alignment='center']) .title {\n      margin-inline: auto;\n    }\n\n    .subtitle {\n      ${sectionSubtitleStyles}\n      max-width: 60ch;\n      margin-bottom: 0;\n    }\n\n    :host([background='dark']) .eyebrow,\n    :host([background='dark']) .subtitle {\n      color: color-mix(in oklch, var(--st-cms-band-dark-color) 80%, transparent);\n    }\n\n    :host([background='accent']) .eyebrow,\n    :host([background='accent']) .subtitle {\n      color: color-mix(in oklch, var(--st-color-on-solid) 80%, transparent);\n    }\n\n    @media (max-width: 768px) {\n      :host {\n        --st-section-space-l: 3.5rem;\n        --st-section-space-xl: 4.5rem;\n        --st-section-space-xxl: 5.5rem;\n        --st-section-padding-inline: var(--st-space-20);\n      }\n    }\n  `;\n\n  @property({ type: String })\n  eyebrow = '';\n\n  @property({ type: String })\n  title = '';\n\n  @property({ type: String })\n  subtitle = '';\n\n  /** `default` (page surface), `subtle`, `dark`, `accent` or `transparent`. */\n  @property({ type: String, reflect: true })\n  background: 'default' | 'subtle' | 'dark' | 'accent' | 'transparent' = 'default';\n\n  /** Space above the content: `none`, `s`, `m` (default), `l`, `xl` or `xxl`. */\n  @property({ type: String, reflect: true, attribute: 'spacing-above' })\n  spacingAbove: 'none' | 's' | 'm' | 'l' | 'xl' | 'xxl' = 'm';\n\n  /** Space below the content: `none`, `s`, `m` (default), `l`, `xl` or `xxl`. */\n  @property({ type: String, reflect: true, attribute: 'spacing-below' })\n  spacingBelow: 'none' | 's' | 'm' | 'l' | 'xl' | 'xxl' = 'm';\n\n  /** `contained` (default, the page container width), `narrow` (reading width) or `full` (edge to edge). */\n  @property({ type: String, reflect: true })\n  width: 'contained' | 'narrow' | 'full' = 'contained';\n\n  /** Alignment of the heading. */\n  @property({ type: String, reflect: true, attribute: 'text-alignment' })\n  textAlignment: 'left' | 'center' = 'left';\n\n  render() {\n    const heading = this.eyebrow || this.title || this.subtitle;\n    return html`\n      <div class=\"inner\" part=\"inner\">\n        ${heading\n          ? html`<div class=\"header\" part=\"header\">\n              ${this.eyebrow ? html`<p class=\"eyebrow\" part=\"eyebrow\">${this.eyebrow}</p>` : nothing}\n              ${this.title ? html`<h2 class=\"title\" part=\"title\">${this.title}</h2>` : nothing}\n              ${this.subtitle ? html`<p class=\"subtitle\" part=\"subtitle\">${this.subtitle}</p>` : nothing}\n            </div>`\n          : nothing}\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;AAAA,SAAS,YAAY,KAAK,MAAM,eAAe;AAC/C,SAAS,eAAe,gBAAgB;AAkBjC,IAAM,UAAN,cAAsB,WAAW;AAAA,EAAjC;AAAA;AAyIL,mBAAU;AAGV,iBAAQ;AAGR,oBAAW;AAIX,sBAAuE;AAIvE,wBAAwD;AAIxD,wBAAwD;AAIxD,iBAAyC;AAIzC,yBAAmC;AAAA;AAAA,EAEnC,SAAS;AACP,UAAM,UAAU,KAAK,WAAW,KAAK,SAAS,KAAK;AACnD,WAAO;AAAA;AAAA,UAED,UACE;AAAA,gBACI,KAAK,UAAU,yCAAyC,KAAK,OAAO,SAAS,OAAO;AAAA,gBACpF,KAAK,QAAQ,sCAAsC,KAAK,KAAK,UAAU,OAAO;AAAA,gBAC9E,KAAK,WAAW,2CAA2C,KAAK,QAAQ,SAAS,OAAO;AAAA,sBAE5F,OAAO;AAAA;AAAA;AAAA;AAAA,EAIjB;AACF;AApLa,QACJ,SAAS;AAAA,MACZ,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAkBf,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAgFpB,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAWlB,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA0B3B;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAxIf,QAyIX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GA3If,QA4IX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GA9If,QA+IX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAlJ9B,QAmJX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM,WAAW,gBAAgB,CAAC;AAAA,GAtJ1D,QAuJX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM,WAAW,gBAAgB,CAAC;AAAA,GA1J1D,QA2JX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GA9J9B,QA+JX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM,WAAW,iBAAiB,CAAC;AAAA,GAlK3D,QAmKX;AAnKW,UAAN;AAAA,EADN,cAAc,YAAY;AAAA,GACd;","names":[]}

package/dist/{chunk-3TCP25JG.js → chunk-PB7ZPPLP.js}

@@ -75,6 +75,13 @@ function chevronIcon(direction, size = 14) {
     </svg>
   `;
 }
+function arrowUpRightIcon(size = 12) {
+  return html`
+    <svg width=${size} height=${size} viewBox="0 0 24 24" fill="none" aria-hidden="true">
+      <path d="M7 17L17 7M8 7h9v9" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" />
+    </svg>
+  `;
+}
 function plusIcon(size = 13) {
   return html`
     <svg width=${size} height=${size} viewBox="0 0 24 24" fill="none" aria-hidden="true">
@@ -321,6 +328,7 @@ export {
   historyIcon,
   trashIcon,
   chevronIcon,
+  arrowUpRightIcon,
   plusIcon,
   cardsViewIcon,
   checkIcon,
@@ -344,4 +352,4 @@ export {
   gearIcon,
   paletteIcon
 };
-//# sourceMappingURL=chunk-3TCP25JG.js.map
+//# sourceMappingURL=chunk-PB7ZPPLP.js.map

package/dist/chunk-PB7ZPPLP.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/shared/icons.ts"],"sourcesContent":["import { html } from 'lit';\r\nimport type { TemplateResult } from 'lit';\r\n\r\n/**\r\n * Every inline SVG icon used across components, centralized so a glyph's\r\n * path data lives in exactly one place instead of being copy-pasted at each\r\n * call site. Each icon is a small function returning a Lit `TemplateResult`\r\n * (not a `css`-style fragment) so callers can size — and, where noted, class\r\n * — the icon per context while sharing the same markup.\r\n */\r\n\r\nconst FOLDER_ICON_COLOR = 'oklch(0.72 0.09 75)';\r\n\r\n/** Filled folder glyph (browse rows/tiles). Fixed 20x16 — folders don't resize per usage. */\r\nexport function folderIcon(): TemplateResult {\r\n  return html`\r\n    <svg width=\"20\" height=\"16\" viewBox=\"0 0 20 16\" fill=\"none\" aria-hidden=\"true\">\r\n      <path d=\"M0 2a2 2 0 012-2h5l2 2h9a2 2 0 012 2v10a2 2 0 01-2 2H2a2 2 0 01-2-2V2z\" fill=${FOLDER_ICON_COLOR} />\r\n    </svg>\r\n  `;\r\n}\r\n\r\n/** Outlined folder glyph (breadcrumb crumb icon). `className` lets the caller hook its own layout class. */\r\nexport function folderOutlineIcon(size = 11, className = ''): TemplateResult {\r\n  return html`\r\n    <svg class=${className} width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n      <path\r\n        d=\"M4 4h5l2 2h9v12H4V4z\"\r\n        stroke=\"currentColor\"\r\n        stroke-width=\"2\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n    </svg>\r\n  `;\r\n}\r\n\r\n/** External-link/\"open\" glyph (open site/library actions in the Templates/Data/Save-location pickers). */\r\nexport function externalLinkIcon(size = 15): TemplateResult {\r\n  return html`\r\n    <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n      <path\r\n        d=\"M18 13v5a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h5M15 4h5v5M20 4l-9 9\"\r\n        stroke=\"currentColor\"\r\n        stroke-width=\"1.8\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n    </svg>\r\n  `;\r\n}\r\n\r\n/** Refresh/reload glyph (Templates/Data picker refresh buttons). */\r\nexport function refreshIcon(size = 15): TemplateResult {\r\n  return html`\r\n    <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n      <path\r\n        d=\"M17.65 6.35A7.958 7.958 0 0 0 12 4a8 8 0 1 0 8 8h-2a6 6 0 1 1-6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\"\r\n        fill=\"currentColor\"\r\n      />\r\n    </svg>\r\n  `;\r\n}\r\n\r\n/** Clock glyph (the wizard's \"Recent activity\" history trigger button, Steps 1-3). */\r\nexport function historyIcon(size = 15): TemplateResult {\r\n  return html`\r\n    <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n      <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" stroke-width=\"2\" />\r\n      <path d=\"M12 7v5l3.5 2\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n    </svg>\r\n  `;\r\n}\r\n\r\n/** Trash/delete glyph (clear-all button in the selected-chips summary badge). */\r\nexport function trashIcon(size = 15): TemplateResult {\r\n  return html`\r\n    <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n      <path\r\n        d=\"M4 4h2l1.2 12.4A2 2 0 0 0 9.2 18.2h8.1a2 2 0 0 0 1.98-1.7L20.5 8H6.5\"\r\n        stroke=\"currentColor\"\r\n        stroke-width=\"2\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n      <circle cx=\"10\" cy=\"21\" r=\"1.4\" fill=\"currentColor\" />\r\n      <circle cx=\"17\" cy=\"21\" r=\"1.4\" fill=\"currentColor\" />\r\n    </svg>\r\n  `;\r\n}\r\n\r\n/** Chevron glyph (pager prev/next buttons, the select trigger's caret). */\r\nexport function chevronIcon(direction: 'left' | 'right' | 'down', size = 14): TemplateResult {\r\n  const d = { left: 'M15 18l-6-6 6-6', right: 'M9 6l6 6-6 6', down: 'M6 9l6 6 6-6' }[direction];\r\n\r\n  return html`\r\n    <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n      <path d=${d} stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n    </svg>\r\n  `;\r\n}\r\n\r\n/** Up-right arrow glyph (marks a link that leaves the site — mega-menu links and buttons). */\r\nexport function arrowUpRightIcon(size = 12): TemplateResult {\r\n  return html`\r\n    <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n      <path d=\"M7 17L17 7M8 7h9v9\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n    </svg>\r\n  `;\r\n}\r\n\r\n/** Plus glyph (\"New folder\" action button). */\r\nexport function plusIcon(size = 13): TemplateResult {\r\n  return html`\r\n    <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n      <path d=\"M12 4v16M4 12h16\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" />\r\n    </svg>\r\n  `;\r\n}\r\n\r\n/** Cards-view glyph (2x2 grid — view-toggle button). */\r\nexport function cardsViewIcon(size = 15): TemplateResult {\r\n  return html`\r\n    <svg width=${size} height=${size} viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\">\r\n      <rect x=\"1\" y=\"1\" width=\"6\" height=\"6\" rx=\"1\" fill=\"currentColor\" />\r\n      <rect x=\"9\" y=\"1\" width=\"6\" height=\"6\" rx=\"1\" fill=\"currentColor\" />\r\n      <rect x=\"1\" y=\"9\" width=\"6\" height=\"6\" rx=\"1\" fill=\"currentColor\" />\r\n      <rect x=\"9\" y=\"9\" width=\"6\" height=\"6\" rx=\"1\" fill=\"currentColor\" />\r\n    </svg>\r\n  `;\r\n}\r\n\r\n/** Checkmark glyph (completed-step marker in the step indicator). */\r\nexport function checkIcon(size = 14): TemplateResult {\r\n  return html`\r\n    <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n      <path d=\"M4 12l5 5L20 6\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n    </svg>\r\n  `;\r\n}\r\n\r\n/** SharePoint site glyph (globe — root \"All sites\" browser rows). */\r\nexport function siteIcon(size = 18): TemplateResult {\r\n  return html`\r\n    <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n      <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" stroke-width=\"1.6\" />\r\n      <path d=\"M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18\" stroke=\"currentColor\" stroke-width=\"1.6\" />\r\n    </svg>\r\n  `;\r\n}\r\n\r\n/** 3x3 dot-grid glyph (bento-menu app-switcher trigger). */\r\nexport function bentoGridIcon(size = 18): TemplateResult {\r\n  return html`\r\n    <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\">\r\n      <path\r\n        d=\"M16 20h4v-4h-4m0-2h4v-4h-4m-6-2h4V4h-4m6 4h4V4h-4m-6 10h4v-4h-4m-6 4h4v-4H4m0 10h4v-4H4m6 4h4v-4h-4M4 8h4V4H4z\"\r\n      />\r\n    </svg>\r\n  `;\r\n}\r\n\r\n/** List-view glyph (stacked rows — view-toggle button). */\r\nexport function listViewIcon(size = 15): TemplateResult {\r\n  return html`\r\n    <svg width=${size} height=${size} viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\">\r\n      <rect x=\"1\" y=\"2\" width=\"3\" height=\"3\" rx=\"0.5\" fill=\"currentColor\" />\r\n      <rect x=\"6\" y=\"2.5\" width=\"9\" height=\"2\" rx=\"1\" fill=\"currentColor\" />\r\n      <rect x=\"1\" y=\"6.5\" width=\"3\" height=\"3\" rx=\"0.5\" fill=\"currentColor\" />\r\n      <rect x=\"6\" y=\"7\" width=\"9\" height=\"2\" rx=\"1\" fill=\"currentColor\" />\r\n      <rect x=\"1\" y=\"11\" width=\"3\" height=\"3\" rx=\"0.5\" fill=\"currentColor\" />\r\n      <rect x=\"6\" y=\"11.5\" width=\"9\" height=\"2\" rx=\"1\" fill=\"currentColor\" />\r\n    </svg>\r\n  `;\r\n}\r\n\r\n/**\r\n * A small set of generic domain icons for `st-menu-grid-item`'s icon slot (nav \"mega menu\"\r\n * entries — sales/purchase/accounting/settings items) — deliberately simple line glyphs rather\r\n * than pixel-perfect illustrations, same fidelity level as the icons above.\r\n */\r\n\r\n/** Shopping-cart glyph (sales/orders). */\r\nexport function cartIcon(size = 18): TemplateResult {\r\n  return html`\r\n    <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n      <path\r\n        d=\"M3 4h2l2.4 12.4A2 2 0 0 0 9.36 18h8.2a2 2 0 0 0 1.96-1.6L21 8H6\"\r\n        stroke=\"currentColor\"\r\n        stroke-width=\"2\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n      <circle cx=\"10\" cy=\"21\" r=\"1.4\" fill=\"currentColor\" />\r\n      <circle cx=\"17\" cy=\"21\" r=\"1.4\" fill=\"currentColor\" />\r\n    </svg>\r\n  `;\r\n}\r\n\r\n/** Delivery-truck glyph (purchase orders / receiving). */\r\nexport function truckIcon(size = 18): TemplateResult {\r\n  return html`\r\n    <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n      <path d=\"M2 6h11v10H2z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linejoin=\"round\" />\r\n      <path d=\"M13 10h4l4 3.5V16h-8z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linejoin=\"round\" />\r\n      <circle cx=\"6.5\" cy=\"18\" r=\"1.8\" stroke=\"currentColor\" stroke-width=\"2\" />\r\n      <circle cx=\"16.5\" cy=\"18\" r=\"1.8\" stroke=\"currentColor\" stroke-width=\"2\" />\r\n    </svg>\r\n  `;\r\n}\r\n\r\n/** Package/box glyph (products, inventory). */\r\nexport function boxIcon(size = 18): TemplateResult {\r\n  return html`\r\n    <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n      <path\r\n        d=\"M12 3l8 4.2v9.6L12 21l-8-4.2V7.2L12 3z\"\r\n        stroke=\"currentColor\"\r\n        stroke-width=\"2\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n      <path d=\"M4.2 7.2L12 11l7.8-3.8M12 11v10\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linejoin=\"round\" />\r\n    </svg>\r\n  `;\r\n}\r\n\r\n/** Map-pin glyph (stock locations). */\r\nexport function mapPinIcon(size = 18): TemplateResult {\r\n  return html`\r\n    <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n      <path\r\n        d=\"M12 21s7-6.1 7-11.5A7 7 0 0 0 5 9.5C5 14.9 12 21 12 21z\"\r\n        stroke=\"currentColor\"\r\n        stroke-width=\"2\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n      <circle cx=\"12\" cy=\"9.5\" r=\"2.4\" stroke=\"currentColor\" stroke-width=\"2\" />\r\n    </svg>\r\n  `;\r\n}\r\n\r\n/** Two-person glyph (partners — customers/vendors/employees). */\r\nexport function usersIcon(size = 18): TemplateResult {\r\n  return html`\r\n    <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n      <circle cx=\"9\" cy=\"8\" r=\"3.2\" stroke=\"currentColor\" stroke-width=\"2\" />\r\n      <path d=\"M3 20c0-3.3 2.7-6 6-6s6 2.7 6 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\r\n      <path\r\n        d=\"M16 5.3a3.2 3.2 0 0 1 0 6.2M19 20c0-2.8-2-5.1-4.6-5.8\"\r\n        stroke=\"currentColor\"\r\n        stroke-width=\"2\"\r\n        stroke-linecap=\"round\"\r\n      />\r\n    </svg>\r\n  `;\r\n}\r\n\r\n/** Open-book glyph (journals). */\r\nexport function bookIcon(size = 18): TemplateResult {\r\n  return html`\r\n    <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n      <path\r\n        d=\"M12 5.5c-1.6-1-4-1.5-6-1.5-1 0-2 .1-3 .4v13.6c1-.3 2-.4 3-.4 2 0 4.4.5 6 1.5m0-13.6c1.6-1 4-1.5 6-1.5 1 0 2 .1 3 .4v13.6c-1-.3-2-.4-3-.4-2 0-4.4.5-6 1.5m0-13.6v13.6\"\r\n        stroke=\"currentColor\"\r\n        stroke-width=\"1.8\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n    </svg>\r\n  `;\r\n}\r\n\r\n/** Document/invoice glyph. */\r\nexport function documentIcon(size = 18): TemplateResult {\r\n  return html`\r\n    <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n      <path d=\"M6 2h9l5 5v15H6V2z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linejoin=\"round\" />\r\n      <path d=\"M15 2v5h5\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linejoin=\"round\" />\r\n      <path d=\"M9 12h6M9 16h6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\r\n    </svg>\r\n  `;\r\n}\r\n\r\n/** Receipt glyph, zig-zag bottom edge (credit/debit notes). */\r\nexport function receiptIcon(size = 18): TemplateResult {\r\n  return html`\r\n    <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n      <path\r\n        d=\"M5 2h14v19l-2.5-1.6L14 21l-2.5-1.6L9 21l-2.5-1.6L5 21V2z\"\r\n        stroke=\"currentColor\"\r\n        stroke-width=\"2\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n      <path d=\"M8 8h8M8 12h8\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\r\n    </svg>\r\n  `;\r\n}\r\n\r\n/** Percent glyph (taxes). */\r\nexport function percentIcon(size = 18): TemplateResult {\r\n  return html`\r\n    <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n      <path d=\"M19 5L5 19\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\r\n      <circle cx=\"7\" cy=\"7\" r=\"2.5\" stroke=\"currentColor\" stroke-width=\"2\" />\r\n      <circle cx=\"17\" cy=\"17\" r=\"2.5\" stroke=\"currentColor\" stroke-width=\"2\" />\r\n    </svg>\r\n  `;\r\n}\r\n\r\n/** Stacked-coins glyph (payment terms). */\r\nexport function coinsIcon(size = 18): TemplateResult {\r\n  return html`\r\n    <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n      <ellipse cx=\"8\" cy=\"7\" rx=\"5.5\" ry=\"3\" stroke=\"currentColor\" stroke-width=\"2\" />\r\n      <path d=\"M2.5 7v10c0 1.7 2.5 3 5.5 3s5.5-1.3 5.5-3V7\" stroke=\"currentColor\" stroke-width=\"2\" />\r\n      <path d=\"M2.5 12c0 1.7 2.5 3 5.5 3s5.5-1.3 5.5-3\" stroke=\"currentColor\" stroke-width=\"2\" />\r\n      <ellipse cx=\"16.5\" cy=\"12\" rx=\"5\" ry=\"2.7\" stroke=\"currentColor\" stroke-width=\"2\" />\r\n      <path d=\"M11.5 12v5c0 1.5 2.2 2.7 5 2.7s5-1.2 5-2.7v-5\" stroke=\"currentColor\" stroke-width=\"2\" />\r\n    </svg>\r\n  `;\r\n}\r\n\r\n/** Padlock glyph (fiscal year closing / lock dates). */\r\nexport function lockIcon(size = 18): TemplateResult {\r\n  return html`\r\n    <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n      <rect x=\"4\" y=\"11\" width=\"16\" height=\"10\" rx=\"2\" stroke=\"currentColor\" stroke-width=\"2\" />\r\n      <path d=\"M7 11V7a5 5 0 0 1 10 0v4\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\r\n      <circle cx=\"12\" cy=\"16\" r=\"1.6\" fill=\"currentColor\" />\r\n    </svg>\r\n  `;\r\n}\r\n\r\n/**\r\n * Office file-type glyphs, ported from `PennyIcons` in `@sankhyatronics/sankhya-icons`\r\n * (FileWordIcon/FileExcelIcon/FilePowerPointIcon) — this package is Lit, so it can't import\r\n * the React components and carries the same path data instead. Filled, `currentColor`.\r\n */\r\nconst FILE_TYPE_ICON_PATHS = {\r\n  word: 'm19.95 5.54-3.48-3.49A6.96 6.96 0 0 0 11.52 0H7C4.24 0 2 2.24 2 5v14c0 2.76 2.24 5 5 5h10c2.76 0 5-2.24 5-5v-8.51c0-1.87-.73-3.63-2.05-4.95Zm-1.41 1.41c.32.32.59.67.81 1.05h-4.34c-.55 0-1-.45-1-1V2.66c.38.22.73.49 1.05.81l3.48 3.49ZM20 19c0 1.65-1.35 3-3 3H7c-1.65 0-3-1.35-3-3V5c0-1.65 1.35-3 3-3h4.51c.16 0 .33 0 .49.02V7c0 1.65 1.35 3 3 3h4.98c.02.16.02.32.02.49V19Zm-3.28-5.76L15.3 18.9c-.15.61-.68 1.05-1.31 1.09-.63.04-1.21-.32-1.44-.91L12 17.7l-.55 1.38c-.22.56-.75.91-1.34.91h-.1c-.63-.04-1.15-.48-1.31-1.1l-1.41-5.66a1 1 0 0 1 1.94-.48l1 4 .85-2.13a1 1 0 0 1 1.86 0l.84 2.13 1.01-4a1 1 0 0 1 1.94.48Z',\r\n  excel:\r\n    'M15.27 13.64 13.3 16l1.97 2.36a1.001 1.001 0 1 1-1.54 1.28L12 17.56l-1.73 2.08a.99.99 0 0 1-.77.36c-.23 0-.45-.08-.64-.23-.42-.35-.48-.98-.13-1.41L10.7 16l-1.97-2.36a1.001 1.001 0 1 1 1.54-1.28L12 14.44l1.73-2.08c.35-.42.98-.48 1.41-.13.42.35.48.98.13 1.41ZM22 10.49V19c0 2.76-2.24 5-5 5H7c-2.76 0-5-2.24-5-5V5c0-2.76 2.24-5 5-5h4.51c1.87 0 3.63.73 4.95 2.05l3.48 3.49a6.96 6.96 0 0 1 2.05 4.95Zm-6.95-7.03c-.32-.32-.67-.59-1.05-.81V7c0 .55.45 1 1 1h4.34c-.22-.38-.49-.73-.81-1.05l-3.48-3.49ZM20 10.48c0-.16 0-.33-.02-.49H15c-1.65 0-3-1.35-3-3V2.02C11.84 2 11.68 2 11.51 2H7C5.35 2 4 3.35 4 5v14c0 1.65 1.35 3 3 3h10c1.65 0 3-1.35 3-3v-8.51Z',\r\n  powerpoint:\r\n    'm19.95 5.54-3.49-3.49A6.96 6.96 0 0 0 11.51 0H7C4.24 0 2 2.24 2 5v14c0 2.76 2.24 5 5 5h10c2.76 0 5-2.24 5-5v-8.51c0-1.87-.73-3.63-2.05-4.95Zm-1.41 1.41c.32.32.59.67.81 1.05h-4.34c-.55 0-1-.45-1-1V2.66c.38.22.73.49 1.05.81l3.49 3.49ZM20 19c0 1.65-1.35 3-3 3H7c-1.65 0-3-1.35-3-3V5c0-1.65 1.35-3 3-3h4.51c.16 0 .33 0 .49.02V7c0 1.65 1.35 3 3 3h4.98c.02.16.02.32.02.49V19Zm-10 1c-.55 0-1-.45-1-1v-5c0-1.1.9-2 2-2h1c1.65 0 3 1.35 3 3s-1.35 3-3 3h-1v1c0 .55-.45 1-1 1Zm1-4h1c.55 0 1-.45 1-1s-.45-1-1-1h-1v2Z'\r\n} as const;\r\n\r\n/** Word/Excel/PowerPoint file glyph (the document icon in front of template/file rows). */\r\nexport function fileTypeIcon(type: keyof typeof FILE_TYPE_ICON_PATHS, size = 24): TemplateResult {\r\n  return html`\r\n    <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\">\r\n      <path d=${FILE_TYPE_ICON_PATHS[type]} />\r\n    </svg>\r\n  `;\r\n}\r\n\r\n/** Hamburger glyph (`st-header`'s mobile nav toggle, closed state). */\r\nexport function menuIcon(size = 20): TemplateResult {\r\n  return html`\r\n    <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n      <path d=\"M4 6h16M4 12h16M4 18h16\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\r\n    </svg>\r\n  `;\r\n}\r\n\r\n/** X/close glyph (`st-header`'s mobile nav toggle, open state). */\r\nexport function closeIcon(size = 20): TemplateResult {\r\n  return html`\r\n    <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n      <path d=\"M5 5l14 14M19 5L5 19\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\r\n    </svg>\r\n  `;\r\n}\r\n\r\n/** Gear/cog glyph (company settings). */\r\nexport function gearIcon(size = 18): TemplateResult {\r\n  return html`\r\n    <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n      <circle cx=\"12\" cy=\"12\" r=\"3\" stroke=\"currentColor\" stroke-width=\"2\" />\r\n      <path\r\n        d=\"M12 3v2.2M12 18.8V21M21 12h-2.2M5.2 12H3M18 6l-1.6 1.6M7.6 16.4L6 18M18 18l-1.6-1.6M7.6 7.6L6 6\"\r\n        stroke=\"currentColor\"\r\n        stroke-width=\"2\"\r\n        stroke-linecap=\"round\"\r\n      />\r\n    </svg>\r\n  `;\r\n}\r\n\r\n/** Paint-palette glyph (theme/color-scheme switcher). */\r\nexport function paletteIcon(size = 18): TemplateResult {\r\n  return html`\r\n    <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n      <path\r\n        d=\"M12 3a9 9 0 1 0 0 18c1.1 0 2-.9 2-2 0-.5-.2-1-.5-1.3-.3-.4-.5-.8-.5-1.2 0-1.1.9-2 2-2h2a4 4 0 0 0 4-4c0-4.4-4-7.5-9-7.5z\"\r\n        stroke=\"currentColor\"\r\n        stroke-width=\"1.6\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n      <circle cx=\"7.5\" cy=\"10.5\" r=\"1.2\" fill=\"currentColor\" />\r\n      <circle cx=\"11\" cy=\"7\" r=\"1.2\" fill=\"currentColor\" />\r\n      <circle cx=\"15.5\" cy=\"7.5\" r=\"1.2\" fill=\"currentColor\" />\r\n      <circle cx=\"17.5\" cy=\"11.5\" r=\"1.2\" fill=\"currentColor\" />\r\n    </svg>\r\n  `;\r\n}\r\n"],"mappings":"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","names":[]}

package/dist/{chunk-5UFRGZWG.js → chunk-TLHG33MM.js}

@@ -1,7 +1,7 @@
 import {
   chevronIcon,
   externalLinkIcon
-} from "./chunk-3TCP25JG.js";
+} from "./chunk-PB7ZPPLP.js";
 import {
   controlBaseStyles,
   eyebrowLabelStyles,
@@ -265,4 +265,4 @@ Select = __decorateClass([
 export {
   Select
 };
-//# sourceMappingURL=chunk-5UFRGZWG.js.map
+//# sourceMappingURL=chunk-TLHG33MM.js.map

package/dist/{chunk-IMACP7HN.js → chunk-UVNBZD7R.js}

@@ -50,7 +50,9 @@ ContentBlock.styles = css`
     :host {
       display: block;
       ${fontFamilyStyles}
-      padding: var(--st-space-24);
+      /* !important: a page-level reset (e.g. Tailwind Preflight) otherwise zeroes a shadow host's
+         padding; override with --st-content-block-padding instead. */
+      padding: var(--st-content-block-padding, var(--st-space-24)) !important;
       background: var(--st-color-surface);
       color: var(--st-color-text-strong);
     }
@@ -114,7 +116,7 @@ ContentBlock.styles = css`
 
     @media (max-width: 768px) {
       :host {
-        padding: var(--st-space-48) var(--st-space-24);
+        padding: var(--st-content-block-padding, var(--st-space-48) var(--st-space-24)) !important;
       }
 
       .container {
@@ -153,4 +155,4 @@ ContentBlock = __decorateClass([
 export {
   ContentBlock
 };
-//# sourceMappingURL=chunk-IMACP7HN.js.map
+//# sourceMappingURL=chunk-UVNBZD7R.js.map