@sankhyatronics/sankhya-cms 0.0.0-stage → 0.1.0

package/dist/chunk-OEX5FDMR.js

@@ -0,0 +1,250 @@
+import {
+  cardTitleStyles,
+  iconTileStyles,
+  invertedSectionTextStyles,
+  reducedMotionStyles,
+  sectionHeaderStyles,
+  sectionSubtitleStyles,
+  sectionTitleStyles
+} from "./chunk-3VE6VFJ4.js";
+import {
+  controlBaseStyles,
+  fontFamilyStyles
+} from "./chunk-RHAOQ6K4.js";
+import {
+  __decorateClass
+} from "./chunk-EUXUH3YW.js";
+
+// src/bento-grid/BentoGrid.ts
+import { LitElement, css, html, nothing } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import "iconify-icon";
+var BentoGrid = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.inverted = false;
+    this.title = "";
+    this.subtitle = "";
+    this.items = [];
+  }
+  renderCard(item) {
+    const classes = `card col-${item.colSpan ?? 1} row-${item.rowSpan ?? 1} ${item.imageSrc ? "has-image" : ""}`;
+    const body = html`
+      ${item.imageSrc ? html`<div class="image-wrapper" part="image-wrapper">
+            <img class="image" part="image" src=${item.imageSrc} alt=${item.imageAlt ?? item.title} />
+          </div>` : nothing}
+      <div class="content" part="content">
+        ${item.icon ? html`<div class="icon" part="icon"><iconify-icon icon=${item.icon}></iconify-icon></div>` : nothing}
+        <div class="text">
+          <h3 class="card-title" part="card-title">${item.title}</h3>
+          ${item.description ? html`<p class="card-description" part="card-description">${item.description}</p>` : nothing}
+        </div>
+      </div>
+    `;
+    return item.href ? html`<a part="card" class=${classes} href=${item.href}>${body}</a>` : html`<div part="card" class=${classes}>${body}</div>`;
+  }
+  render() {
+    return html`
+      <div class="container" part="container">
+        ${this.title || this.subtitle ? html`<div class="header" part="header">
+              ${this.title ? html`<h2 class="title" part="title">${this.title}</h2>` : nothing}
+              ${this.subtitle ? html`<p class="subtitle" part="subtitle">${this.subtitle}</p>` : nothing}
+            </div>` : nothing}
+        <div class="grid" part="grid">${this.items.map((item) => this.renderCard(item))}</div>
+      </div>
+    `;
+  }
+};
+BentoGrid.styles = css`
+    ${controlBaseStyles}
+
+    :host {
+      display: block;
+      padding: var(--st-cms-section-padding) var(--st-space-24);
+      background: var(--st-color-page);
+      ${fontFamilyStyles}
+    }
+
+    :host([inverted]) {
+      background: var(--st-color-text-strong);
+    }
+
+    .container {
+      max-width: var(--st-cms-container-max);
+      margin: 0 auto;
+    }
+
+    .header {
+      ${sectionHeaderStyles}
+    }
+
+    .title {
+      ${sectionTitleStyles}
+    }
+
+    .subtitle {
+      ${sectionSubtitleStyles}
+      margin-bottom: 0;
+    }
+
+    ${invertedSectionTextStyles}
+
+    .grid {
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      grid-auto-rows: minmax(240px, auto);
+      gap: var(--st-space-24);
+    }
+
+    .card {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      border: 1px solid var(--st-color-border);
+      border-radius: var(--st-space-24);
+      background: var(--st-color-surface);
+      color: inherit;
+      text-decoration: none;
+      transition:
+        transform 0.3s ease,
+        box-shadow 0.3s ease;
+    }
+
+    :host([inverted]) .card {
+      background: var(--st-color-text-strong);
+      border-color: var(--st-color-text);
+    }
+
+    .card:hover {
+      transform: translateY(-4px);
+      box-shadow: 0 12px 24px -10px var(--st-shadow-color-lg);
+      z-index: 1;
+    }
+
+    .image-wrapper {
+      position: absolute;
+      inset: 0;
+    }
+
+    .image-wrapper::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background: linear-gradient(to bottom, transparent 0%, var(--st-shadow-color-xl) 100%);
+    }
+
+    .image {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      transition: transform 0.5s ease;
+    }
+
+    .card:hover .image {
+      transform: scale(1.05);
+    }
+
+    .content {
+      position: relative;
+      z-index: 1;
+      margin-top: auto;
+      padding: var(--st-space-24);
+      display: flex;
+      flex-direction: column;
+      gap: var(--st-space-16);
+    }
+
+    .icon {
+      ${iconTileStyles}
+      width: var(--st-size-40);
+      height: var(--st-size-40);
+      font-size: 24px;
+    }
+
+    .text {
+      padding: var(--st-space-16);
+      border-radius: var(--st-radius-md);
+    }
+
+    .card-title {
+      ${cardTitleStyles}
+      font-size: var(--st-text-lg);
+    }
+
+    .card-description {
+      margin: 0;
+      font-size: var(--st-text-md);
+      color: var(--st-color-text-muted);
+    }
+
+    :host([inverted]) .card-title {
+      color: var(--st-color-on-solid);
+    }
+
+    :host([inverted]) .card-description {
+      color: var(--st-color-border);
+    }
+
+    .card.has-image .card-title,
+    .card.has-image .card-description {
+      color: var(--st-color-on-solid);
+    }
+
+    .card.has-image .icon {
+      background: var(--st-shadow-color-lg);
+      color: var(--st-color-on-solid);
+      backdrop-filter: blur(4px);
+    }
+
+    .col-1 { grid-column: span 1; }
+    .col-2 { grid-column: span 2; }
+    .col-3 { grid-column: span 3; }
+    .col-4 { grid-column: span 4; }
+    .row-1 { grid-row: span 1; }
+    .row-2 { grid-row: span 2; }
+
+    @media (max-width: 1024px) {
+      .grid {
+        grid-template-columns: repeat(2, 1fr);
+      }
+      .col-3,
+      .col-4 {
+        grid-column: span 2;
+      }
+    }
+
+    @media (max-width: 640px) {
+      .grid {
+        grid-template-columns: 1fr;
+      }
+      .col-1,
+      .col-2,
+      .col-3,
+      .col-4 {
+        grid-column: span 1;
+      }
+    }
+
+    ${reducedMotionStyles}
+  `;
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], BentoGrid.prototype, "inverted", 2);
+__decorateClass([
+  property({ type: String })
+], BentoGrid.prototype, "title", 2);
+__decorateClass([
+  property({ type: String })
+], BentoGrid.prototype, "subtitle", 2);
+__decorateClass([
+  property({ attribute: false })
+], BentoGrid.prototype, "items", 2);
+BentoGrid = __decorateClass([
+  customElement("st-bento-grid")
+], BentoGrid);
+
+export {
+  BentoGrid
+};
+//# sourceMappingURL=chunk-OEX5FDMR.js.map

package/dist/chunk-OEX5FDMR.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/bento-grid/BentoGrid.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\r\nimport { customElement, property } from 'lit/decorators.js';\r\nimport 'iconify-icon';\r\n\r\nimport { controlBaseStyles, fontFamilyStyles } from '../shared/styles';\r\nimport {\r\n  cardTitleStyles,\r\n  iconTileStyles,\r\n  reducedMotionStyles,\r\n  sectionHeaderStyles,\r\n  sectionSubtitleStyles,\r\n  sectionTitleStyles, invertedSectionTextStyles } from '../shared/section-styles';\r\n\r\nexport interface BentoGridItem {\r\n  title: string;\r\n  description?: string;\r\n  /** Iconify icon name, e.g. `mdi:home`. */\r\n  icon?: string;\r\n  imageSrc?: string;\r\n  imageAlt?: string;\r\n  colSpan?: 1 | 2 | 3 | 4;\r\n  rowSpan?: 1 | 2;\r\n  /** Turns the card into a link. */\r\n  href?: string;\r\n}\r\n\r\n/** A responsive 4-column bento grid of icon/image cards. Items are set via the `items` property. */\r\n@customElement('st-bento-grid')\r\nexport class BentoGrid extends LitElement {\r\n  static styles = css`\r\n    ${controlBaseStyles}\r\n\r\n    :host {\r\n      display: block;\r\n      padding: var(--st-cms-section-padding) var(--st-space-24);\r\n      background: var(--st-color-page);\r\n      ${fontFamilyStyles}\r\n    }\r\n\r\n    :host([inverted]) {\r\n      background: var(--st-color-text-strong);\r\n    }\r\n\r\n    .container {\r\n      max-width: var(--st-cms-container-max);\r\n      margin: 0 auto;\r\n    }\r\n\r\n    .header {\r\n      ${sectionHeaderStyles}\r\n    }\r\n\r\n    .title {\r\n      ${sectionTitleStyles}\r\n    }\r\n\r\n    .subtitle {\r\n      ${sectionSubtitleStyles}\r\n      margin-bottom: 0;\r\n    }\r\n\r\n    ${invertedSectionTextStyles}\r\n\r\n    .grid {\r\n      display: grid;\r\n      grid-template-columns: repeat(4, 1fr);\r\n      grid-auto-rows: minmax(240px, auto);\r\n      gap: var(--st-space-24);\r\n    }\r\n\r\n    .card {\r\n      position: relative;\r\n      display: flex;\r\n      flex-direction: column;\r\n      overflow: hidden;\r\n      border: 1px solid var(--st-color-border);\r\n      border-radius: var(--st-space-24);\r\n      background: var(--st-color-surface);\r\n      color: inherit;\r\n      text-decoration: none;\r\n      transition:\r\n        transform 0.3s ease,\r\n        box-shadow 0.3s ease;\r\n    }\r\n\r\n    :host([inverted]) .card {\r\n      background: var(--st-color-text-strong);\r\n      border-color: var(--st-color-text);\r\n    }\r\n\r\n    .card:hover {\r\n      transform: translateY(-4px);\r\n      box-shadow: 0 12px 24px -10px var(--st-shadow-color-lg);\r\n      z-index: 1;\r\n    }\r\n\r\n    .image-wrapper {\r\n      position: absolute;\r\n      inset: 0;\r\n    }\r\n\r\n    .image-wrapper::after {\r\n      content: '';\r\n      position: absolute;\r\n      inset: 0;\r\n      background: linear-gradient(to bottom, transparent 0%, var(--st-shadow-color-xl) 100%);\r\n    }\r\n\r\n    .image {\r\n      width: 100%;\r\n      height: 100%;\r\n      object-fit: cover;\r\n      transition: transform 0.5s ease;\r\n    }\r\n\r\n    .card:hover .image {\r\n      transform: scale(1.05);\r\n    }\r\n\r\n    .content {\r\n      position: relative;\r\n      z-index: 1;\r\n      margin-top: auto;\r\n      padding: var(--st-space-24);\r\n      display: flex;\r\n      flex-direction: column;\r\n      gap: var(--st-space-16);\r\n    }\r\n\r\n    .icon {\r\n      ${iconTileStyles}\r\n      width: var(--st-size-40);\r\n      height: var(--st-size-40);\r\n      font-size: 24px;\r\n    }\r\n\r\n    .text {\r\n      padding: var(--st-space-16);\r\n      border-radius: var(--st-radius-md);\r\n    }\r\n\r\n    .card-title {\r\n      ${cardTitleStyles}\r\n      font-size: var(--st-text-lg);\r\n    }\r\n\r\n    .card-description {\r\n      margin: 0;\r\n      font-size: var(--st-text-md);\r\n      color: var(--st-color-text-muted);\r\n    }\r\n\r\n    :host([inverted]) .card-title {\r\n      color: var(--st-color-on-solid);\r\n    }\r\n\r\n    :host([inverted]) .card-description {\r\n      color: var(--st-color-border);\r\n    }\r\n\r\n    .card.has-image .card-title,\r\n    .card.has-image .card-description {\r\n      color: var(--st-color-on-solid);\r\n    }\r\n\r\n    .card.has-image .icon {\r\n      background: var(--st-shadow-color-lg);\r\n      color: var(--st-color-on-solid);\r\n      backdrop-filter: blur(4px);\r\n    }\r\n\r\n    .col-1 { grid-column: span 1; }\r\n    .col-2 { grid-column: span 2; }\r\n    .col-3 { grid-column: span 3; }\r\n    .col-4 { grid-column: span 4; }\r\n    .row-1 { grid-row: span 1; }\r\n    .row-2 { grid-row: span 2; }\r\n\r\n    @media (max-width: 1024px) {\r\n      .grid {\r\n        grid-template-columns: repeat(2, 1fr);\r\n      }\r\n      .col-3,\r\n      .col-4 {\r\n        grid-column: span 2;\r\n      }\r\n    }\r\n\r\n    @media (max-width: 640px) {\r\n      .grid {\r\n        grid-template-columns: 1fr;\r\n      }\r\n      .col-1,\r\n      .col-2,\r\n      .col-3,\r\n      .col-4 {\r\n        grid-column: span 1;\r\n      }\r\n    }\r\n\r\n    ${reducedMotionStyles}\r\n  `;\r\n\r\n  @property({ type: Boolean, reflect: true })\r\n  inverted = false;\r\n\r\n  @property({ type: String })\r\n  title = '';\r\n\r\n  @property({ type: String })\r\n  subtitle = '';\r\n\r\n  @property({ attribute: false })\r\n  items: BentoGridItem[] = [];\r\n\r\n  private renderCard(item: BentoGridItem) {\r\n    const classes = `card col-${item.colSpan ?? 1} row-${item.rowSpan ?? 1} ${item.imageSrc ? 'has-image' : ''}`;\r\n    const body = html`\r\n      ${item.imageSrc\r\n        ? html`<div class=\"image-wrapper\" part=\"image-wrapper\">\r\n            <img class=\"image\" part=\"image\" src=${item.imageSrc} alt=${item.imageAlt ?? item.title} />\r\n          </div>`\r\n        : nothing}\r\n      <div class=\"content\" part=\"content\">\r\n        ${item.icon ? html`<div class=\"icon\" part=\"icon\"><iconify-icon icon=${item.icon}></iconify-icon></div>` : nothing}\r\n        <div class=\"text\">\r\n          <h3 class=\"card-title\" part=\"card-title\">${item.title}</h3>\r\n          ${item.description ? html`<p class=\"card-description\" part=\"card-description\">${item.description}</p>` : nothing}\r\n        </div>\r\n      </div>\r\n    `;\r\n    return item.href\r\n      ? html`<a part=\"card\" class=${classes} href=${item.href}>${body}</a>`\r\n      : html`<div part=\"card\" class=${classes}>${body}</div>`;\r\n  }\r\n\r\n  render() {\r\n    return html`\r\n      <div class=\"container\" part=\"container\">\r\n        ${this.title || this.subtitle\r\n          ? html`<div class=\"header\" part=\"header\">\r\n              ${this.title ? html`<h2 class=\"title\" part=\"title\">${this.title}</h2>` : nothing}\r\n              ${this.subtitle ? html`<p class=\"subtitle\" part=\"subtitle\">${this.subtitle}</p>` : nothing}\r\n            </div>`\r\n          : nothing}\r\n        <div class=\"grid\" part=\"grid\">${this.items.map((item) => this.renderCard(item))}</div>\r\n      </div>\r\n    `;\r\n  }\r\n}\r\n"],"mappings":"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","names":[]}

package/dist/chunk-RHAOQ6K4.js

@@ -0,0 +1,138 @@
+// src/shared/styles.ts
+import { css } from "lit";
+var truncateStyles = css`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+var buttonResetStyles = css`
+  border: 0;
+  background: transparent;
+  font: inherit;
+  cursor: pointer;
+`;
+var ctaButtonStyles = css`
+  border: 0;
+  border-radius: var(--st-button-radius);
+  background: var(--st-button-primary-bg);
+  color: var(--st-button-primary-color);
+  font-weight: var(--st-button-font-weight);
+  cursor: pointer;
+`;
+var ctaButtonDisabledStyles = css`
+  background: var(--st-color-subtle);
+  cursor: not-allowed;
+`;
+var ctaButtonFillStyles = css`
+  background: var(--st-button-primary-bg);
+  color: var(--st-button-primary-color);
+`;
+var dropdownPanelStyles = css`
+  position: absolute;
+  top: 38px;
+  right: 0;
+  background: var(--st-color-surface);
+  border: 1px solid var(--st-color-border);
+  border-radius: var(--st-radius-sm);
+  box-shadow: 0 4px 16px var(--st-shadow-color-sm);
+  z-index: 30;
+  overflow: hidden;
+`;
+var emptyStateStyles = css`
+  text-align: center;
+  color: var(--st-color-text-muted);
+  font-size: var(--st-text-base);
+`;
+var tableShellStyles = css`
+  background: var(--st-color-surface);
+  border: 1px solid var(--st-color-border);
+  border-radius: var(--st-radius-md);
+  overflow: hidden;
+`;
+var resultRowStyles = css`
+  display: flex;
+  align-items: center;
+  gap: var(--st-space-12);
+  padding: var(--st-space-12) var(--st-space-14);
+  border: 1px solid var(--st-color-border);
+  border-radius: var(--st-radius-sm);
+`;
+var resultNameStyles = css`
+  flex: 1;
+  min-width: 120px;
+  font-size: var(--st-text-base);
+  font-weight: var(--st-font-weight-medium);
+  ${truncateStyles}
+`;
+var resultLinkStyles = css`
+  font-size: var(--st-text-sm);
+  font-weight: var(--st-font-weight-semibold);
+  color: var(--st-color-accent-text);
+`;
+var eyebrowLabelStyles = css`
+  font-weight: var(--st-font-weight-bold);
+  color: var(--st-color-text-muted);
+  text-transform: uppercase;
+  letter-spacing: var(--st-tracking-wide);
+`;
+var rowDividerStyles = css`
+  border-top: 1px solid var(--st-color-divider);
+`;
+var cardShellStyles = css`
+  background: var(--st-color-surface);
+  border: 1px solid var(--st-color-border);
+  border-radius: var(--st-radius-md);
+`;
+var itemNameStyles = css`
+  font-size: var(--st-text-base);
+  font-weight: var(--st-font-weight-semibold);
+  color: var(--st-color-text-strong);
+`;
+var itemCaptionStyles = css`
+  font-size: var(--st-text-xs);
+  color: var(--st-color-text-muted);
+`;
+var controlBaseStyles = css`
+  :is(button, a, input, select, textarea, [tabindex]):focus-visible {
+    outline: var(--st-focus-ring);
+    outline-offset: var(--st-focus-ring-offset);
+  }
+
+  input[type='checkbox'],
+  input[type='radio'] {
+    accent-color: var(--st-checkbox-color);
+  }
+`;
+var fontFamilyStyles = css`
+  font-family: var(--st-font-family);
+`;
+var rootFontFamilyStyles = css`
+  font-family: var(--st-font-family);
+`;
+var BREAKPOINT_TABLET = 900;
+var BREAKPOINT_MOBILE = 500;
+
+export {
+  truncateStyles,
+  buttonResetStyles,
+  ctaButtonStyles,
+  ctaButtonDisabledStyles,
+  ctaButtonFillStyles,
+  dropdownPanelStyles,
+  emptyStateStyles,
+  tableShellStyles,
+  resultRowStyles,
+  resultNameStyles,
+  resultLinkStyles,
+  eyebrowLabelStyles,
+  rowDividerStyles,
+  cardShellStyles,
+  itemNameStyles,
+  itemCaptionStyles,
+  controlBaseStyles,
+  fontFamilyStyles,
+  rootFontFamilyStyles,
+  BREAKPOINT_TABLET,
+  BREAKPOINT_MOBILE
+};
+//# sourceMappingURL=chunk-RHAOQ6K4.js.map

package/dist/chunk-RHAOQ6K4.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/shared/styles.ts"],"sourcesContent":["import { css } from 'lit';\r\n\r\n/**\r\n * Reusable `css` fragments shared across component `static styles` blocks.\r\n *\r\n * Lit's `css` tag allows interpolating another `CSSResult` anywhere inside a\r\n * template, including mid-rule — `${fragment}` below expands to raw CSS\r\n * text, so these compose into a component's own selectors without forcing a\r\n * shared class name or touching `render()`. Each component keeps its own\r\n * selectors; only the duplicated property lists move here. Layout details\r\n * that genuinely vary per component (padding, gap, font-size, ...) stay\r\n * local, declared after a fragment so the cascade lets them override it.\r\n *\r\n * Add a fragment here only once a pattern is byte-identical (or near enough\r\n * that the deltas are better expressed as local overrides) across 3+\r\n * components — see `packages/suite-components/README.md#shared-style-fragments`.\r\n */\r\n\r\n/** Truncates overflowing text to a single line with an ellipsis. */\r\nexport const truncateStyles = css`\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n`;\r\n\r\n/**\r\n * Base for an unstyled, click-through interactive element (icon buttons,\r\n * menu triggers, link-like buttons) before component-specific padding,\r\n * font-size, and color are layered on.\r\n */\r\nexport const buttonResetStyles = css`\r\n  border: 0;\r\n  background: transparent;\r\n  font: inherit;\r\n  cursor: pointer;\r\n`;\r\n\r\n/**\r\n * The dark-filled primary-action button look (wizard Next/Generate/Run/Save,\r\n * active toggle buttons, ...). Pair with `ctaButtonDisabledStyles` on the\r\n * same selector's `:disabled` state.\r\n */\r\nexport const ctaButtonStyles = css`\r\n  border: 0;\r\n  border-radius: var(--st-button-radius);\r\n  background: var(--st-button-primary-bg);\r\n  color: var(--st-button-primary-color);\r\n  font-weight: var(--st-button-font-weight);\r\n  cursor: pointer;\r\n`;\r\n\r\nexport const ctaButtonDisabledStyles = css`\r\n  background: var(--st-color-subtle);\r\n  cursor: not-allowed;\r\n`;\r\n\r\n/**\r\n * Just the fill (background + color) from `ctaButtonStyles`, for selectors\r\n * that only need to swap an already-bordered/sized button into the CTA look\r\n * on an active/pressed/selected state (`[aria-pressed='true']`, `.active`,\r\n * ...) rather than defining the button from scratch.\r\n */\r\nexport const ctaButtonFillStyles = css`\r\n  background: var(--st-button-primary-bg);\r\n  color: var(--st-button-primary-color);\r\n`;\r\n\r\n/** Floating menu/dropdown panel chrome (user menu, language menu, ...). */\r\nexport const dropdownPanelStyles = css`\r\n  position: absolute;\r\n  top: 38px;\r\n  right: 0;\r\n  background: var(--st-color-surface);\r\n  border: 1px solid var(--st-color-border);\r\n  border-radius: var(--st-radius-sm);\r\n  box-shadow: 0 4px 16px var(--st-shadow-color-sm);\r\n  z-index: 30;\r\n  overflow: hidden;\r\n`;\r\n\r\n/** \"No results\" / \"Nothing here.\" empty-state text. Padding stays local. */\r\nexport const emptyStateStyles = css`\r\n  text-align: center;\r\n  color: var(--st-color-text-muted);\r\n  font-size: var(--st-text-base);\r\n`;\r\n\r\n/** Bordered, rounded shell wrapping a data table (browse/list views). */\r\nexport const tableShellStyles = css`\r\n  background: var(--st-color-surface);\r\n  border: 1px solid var(--st-color-border);\r\n  border-radius: var(--st-radius-md);\r\n  overflow: hidden;\r\n`;\r\n\r\n/** A single bordered result row with a name (truncated) + trailing link. */\r\nexport const resultRowStyles = css`\r\n  display: flex;\r\n  align-items: center;\r\n  gap: var(--st-space-12);\r\n  padding: var(--st-space-12) var(--st-space-14);\r\n  border: 1px solid var(--st-color-border);\r\n  border-radius: var(--st-radius-sm);\r\n`;\r\n\r\nexport const resultNameStyles = css`\r\n  flex: 1;\r\n  min-width: 120px;\r\n  font-size: var(--st-text-base);\r\n  font-weight: var(--st-font-weight-medium);\r\n  ${truncateStyles}\r\n`;\r\n\r\nexport const resultLinkStyles = css`\r\n  font-size: var(--st-text-sm);\r\n  font-weight: var(--st-font-weight-semibold);\r\n  color: var(--st-color-accent-text);\r\n`;\r\n\r\n/**\r\n * Uppercase, letter-spaced section/field \"eyebrow\" label (card headings,\r\n * table headers, field labels, ...). Font-size stays local since it varies\r\n * (11–12px) by context.\r\n */\r\nexport const eyebrowLabelStyles = css`\r\n  font-weight: var(--st-font-weight-bold);\r\n  color: var(--st-color-text-muted);\r\n  text-transform: uppercase;\r\n  letter-spacing: var(--st-tracking-wide);\r\n`;\r\n\r\n/** Top border separating stacked rows in a list/table (folder rows, data rows, table rows, ...). */\r\nexport const rowDividerStyles = css`\r\n  border-top: 1px solid var(--st-color-divider);\r\n`;\r\n\r\n/**\r\n * Bordered, rounded surface shell for a card/tile/panel (as opposed to\r\n * `tableShellStyles`, which additionally clips overflow for tabular content).\r\n * Padding, gap, and cursor stay local since they vary by component.\r\n */\r\nexport const cardShellStyles = css`\r\n  background: var(--st-color-surface);\r\n  border: 1px solid var(--st-color-border);\r\n  border-radius: var(--st-radius-md);\r\n`;\r\n\r\n/** A card/tile/row's bold primary name line (folder tiles/rows, template cards, ...). */\r\nexport const itemNameStyles = css`\r\n  font-size: var(--st-text-base);\r\n  font-weight: var(--st-font-weight-semibold);\r\n  color: var(--st-color-text-strong);\r\n`;\r\n\r\n/** A card/tile/row's muted secondary caption line, paired with `itemNameStyles`. */\r\nexport const itemCaptionStyles = css`\r\n  font-size: var(--st-text-xs);\r\n  color: var(--st-color-text-muted);\r\n`;\r\n\r\n/**\r\n * Whole rules (not a property list) every component's stylesheet starts\r\n * with: routes keyboard focus rings and native checkbox/radio tint through\r\n * `--st-focus-ring` / `--st-checkbox-color`, whose defaults (`auto`) keep\r\n * the browser's own look until a host app themes them.\r\n */\r\nexport const controlBaseStyles = css`\r\n  :is(button, a, input, select, textarea, [tabindex]):focus-visible {\r\n    outline: var(--st-focus-ring);\r\n    outline-offset: var(--st-focus-ring-offset);\r\n  }\r\n\r\n  input[type='checkbox'],\r\n  input[type='radio'] {\r\n    accent-color: var(--st-checkbox-color);\r\n  }\r\n`;\r\n\r\n/** Default font stack, used by nearly every component. */\r\nexport const fontFamilyStyles = css`\r\n  font-family: var(--st-font-family);\r\n`;\r\n\r\n/**\r\n * Font stack for page-root/chrome components (`st-template-hub`, the admin\r\n * and configuration pages, `st-app-header`, ...). Identical to\r\n * `fontFamilyStyles` now that `--st-font-family` always resolves via\r\n * `theme.css` (no per-usage fallback) — kept as a separate export so those\r\n * call sites stay semantically distinct if the two ever need to diverge\r\n * again.\r\n */\r\nexport const rootFontFamilyStyles = css`\r\n  font-family: var(--st-font-family);\r\n`;\r\n\r\n/** Canonical responsive breakpoints (px). Interpolate as `${BREAKPOINT_TABLET}px`. */\r\nexport const BREAKPOINT_TABLET = 900;\r\nexport const BREAKPOINT_MOBILE = 500;\r\n"],"mappings":";AAAA,SAAS,WAAW;AAmBb,IAAM,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAWvB,IAAM,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAY1B,IAAM,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASxB,IAAM,0BAA0B;AAAA;AAAA;AAAA;AAWhC,IAAM,sBAAsB;AAAA;AAAA;AAAA;AAM5B,IAAM,sBAAsB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAa5B,IAAM,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAOzB,IAAM,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAQzB,IAAM,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASxB,IAAM,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA,IAK5B,cAAc;AAAA;AAGX,IAAM,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAWzB,IAAM,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAQ3B,IAAM,mBAAmB;AAAA;AAAA;AASzB,IAAM,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAOxB,IAAM,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAOvB,IAAM,oBAAoB;AAAA;AAAA;AAAA;AAW1B,IAAM,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAa1B,IAAM,mBAAmB;AAAA;AAAA;AAYzB,IAAM,uBAAuB;AAAA;AAAA;AAK7B,IAAM,oBAAoB;AAC1B,IAAM,oBAAoB;","names":[]}