@sankhyatronics/sankhya-cms 0.0.0-stage → 0.0.9

package/dist/chunk-E52WO7R7.js

@@ -0,0 +1,279 @@
+import {
+  cardDescriptionStyles,
+  cardTitleStyles,
+  sectionHeaderStyles,
+  sectionSubtitleStyles,
+  sectionTitleStyles
+} from "./chunk-3VE6VFJ4.js";
+import {
+  controlBaseStyles,
+  fontFamilyStyles
+} from "./chunk-RHAOQ6K4.js";
+import {
+  __decorateClass
+} from "./chunk-EUXUH3YW.js";
+
+// src/features-section/FeaturesSection.ts
+import { LitElement as LitElement2, css as css2, html as html2, nothing as nothing2 } from "lit";
+import { customElement as customElement2, property as property2 } from "lit/decorators.js";
+
+// src/features-section/FeatureItem.ts
+import { LitElement, css, html, nothing } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import "iconify-icon";
+var FeatureItem = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.icon = "";
+    this.title = "";
+    this.description = "";
+    this.href = "";
+    this.actionLabel = "Learn more";
+    this.inverted = false;
+  }
+  render() {
+    const external = this.href.startsWith("http");
+    return html`
+      <st-card hoverable elevation="sm" ?inverted=${this.inverted} part="card">
+        <div class="content" part="content">
+          ${this.icon ? html`<div class="icon" part="icon"><iconify-icon icon=${this.icon}></iconify-icon></div>` : nothing}
+          <h3 class="title" part="title">${this.title}</h3>
+          <st-markdown class="description" part="description" .content=${this.description}></st-markdown>
+          ${this.href ? html`
+                <a
+                  class="link"
+                  part="link"
+                  href=${this.href}
+                  target=${external ? "_blank" : "_self"}
+                  rel=${external ? "noopener noreferrer" : nothing}
+                >
+                  ${this.actionLabel} <span>&rarr;</span>
+                </a>
+              ` : nothing}
+        </div>
+      </st-card>
+    `;
+  }
+};
+FeatureItem.styles = css`
+    ${controlBaseStyles}
+
+    :host {
+      display: block;
+      ${fontFamilyStyles}
+    }
+
+    st-card {
+      height: 100%;
+    }
+
+    .content {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      gap: var(--st-space-16);
+      height: 100%;
+    }
+
+    .icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 48px;
+      height: 48px;
+      border-radius: var(--st-radius-lg);
+      background: var(--st-color-subtle);
+      color: var(--st-color-text-strong);
+      margin-bottom: var(--st-space-8);
+      font-size: 24px;
+    }
+
+    :host([inverted]) .icon {
+      background: var(--st-color-text-muted);
+      color: var(--st-color-on-solid);
+    }
+
+    .title {
+      ${cardTitleStyles}
+      margin: 0;
+    }
+
+    .description {
+      ${cardDescriptionStyles}
+      margin: 0;
+    }
+
+    :host([inverted]) .title,
+    :host([inverted]) .description {
+      color: inherit;
+    }
+
+    .link {
+      display: flex;
+      align-items: center;
+      gap: var(--st-space-4);
+      margin-top: auto;
+      color: var(--st-color-text-muted);
+      font-weight: var(--st-font-weight-medium);
+      font-size: var(--st-text-md);
+      text-decoration: none;
+      transition: color 0.2s ease;
+    }
+
+    .link:hover {
+      color: var(--st-color-text-strong);
+      text-decoration: underline;
+    }
+
+    :host([inverted]) .link,
+    :host([inverted]) .link:hover {
+      color: inherit;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .link {
+        transition: none;
+      }
+    }
+  `;
+__decorateClass([
+  property({ type: String })
+], FeatureItem.prototype, "icon", 2);
+__decorateClass([
+  property({ type: String })
+], FeatureItem.prototype, "title", 2);
+__decorateClass([
+  property({ type: String })
+], FeatureItem.prototype, "description", 2);
+__decorateClass([
+  property({ type: String })
+], FeatureItem.prototype, "href", 2);
+__decorateClass([
+  property({ type: String, attribute: "action-label" })
+], FeatureItem.prototype, "actionLabel", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], FeatureItem.prototype, "inverted", 2);
+FeatureItem = __decorateClass([
+  customElement("st-feature-item")
+], FeatureItem);
+
+// src/features-section/FeaturesSection.ts
+var FeaturesSection = class extends LitElement2 {
+  constructor() {
+    super(...arguments);
+    this.title = "";
+    this.subtitle = "";
+    this.actionLabel = "Learn more";
+    this.columns = 0;
+    this.inverted = false;
+    this.items = [];
+  }
+  render() {
+    const gridStyle = this.columns ? `--features-columns: ${this.columns}` : nothing2;
+    return html2`
+      <section class="container" part="container">
+        <div class="header" part="header">
+          <div class="title" part="title">${this.title}</div>
+          ${this.subtitle ? html2`<div class="subtitle" part="subtitle">${this.subtitle}</div>` : nothing2}
+        </div>
+        <div class="grid" part="grid" style=${gridStyle}>
+          <slot></slot>
+          ${this.items.map(
+      (item) => html2`
+              <st-feature-item
+                .icon=${item.icon ?? ""}
+                .title=${item.title}
+                .description=${item.description}
+                .href=${item.href ?? ""}
+                .actionLabel=${this.actionLabel}
+                ?inverted=${this.inverted}
+              ></st-feature-item>
+            `
+    )}
+        </div>
+      </section>
+    `;
+  }
+};
+FeaturesSection.styles = css2`
+    ${controlBaseStyles}
+
+    :host {
+      display: block;
+      ${fontFamilyStyles}
+      padding: var(--st-cms-section-padding) var(--st-space-24);
+      background: var(--st-color-surface);
+    }
+
+    :host([inverted]) {
+      background: var(--st-color-text-strong);
+    }
+
+    .container {
+      max-width: var(--st-cms-container-max);
+      margin: 0 auto;
+    }
+
+    .header {
+      ${sectionHeaderStyles}
+    }
+
+    .title {
+      ${sectionTitleStyles}
+      margin: 0;
+    }
+
+    .subtitle {
+      ${sectionSubtitleStyles}
+      margin: 0 auto;
+    }
+
+    :host([inverted]) .title,
+    :host([inverted]) .subtitle {
+      color: var(--st-color-on-solid);
+    }
+
+    .grid {
+      display: grid;
+      grid-template-columns: repeat(var(--features-columns, 2), 1fr);
+      gap: var(--st-space-32);
+    }
+
+    @media (max-width: 768px) {
+      :host {
+        padding: var(--st-space-48) var(--st-space-16);
+      }
+
+      .grid {
+        grid-template-columns: 1fr;
+      }
+    }
+  `;
+__decorateClass([
+  property2({ type: String })
+], FeaturesSection.prototype, "title", 2);
+__decorateClass([
+  property2({ type: String })
+], FeaturesSection.prototype, "subtitle", 2);
+__decorateClass([
+  property2({ type: String, attribute: "action-label" })
+], FeaturesSection.prototype, "actionLabel", 2);
+__decorateClass([
+  property2({ type: Number })
+], FeaturesSection.prototype, "columns", 2);
+__decorateClass([
+  property2({ type: Boolean, reflect: true })
+], FeaturesSection.prototype, "inverted", 2);
+__decorateClass([
+  property2({ attribute: false })
+], FeaturesSection.prototype, "items", 2);
+FeaturesSection = __decorateClass([
+  customElement2("st-features-section")
+], FeaturesSection);
+
+export {
+  FeatureItem,
+  FeaturesSection
+};
+//# sourceMappingURL=chunk-E52WO7R7.js.map

package/dist/chunk-E52WO7R7.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/features-section/FeaturesSection.ts","../src/features-section/FeatureItem.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\r\nimport { customElement, property } from 'lit/decorators.js';\r\n\r\nimport { controlBaseStyles, fontFamilyStyles } from '../shared/styles';\r\nimport { sectionSubtitleStyles, sectionTitleStyles, sectionHeaderStyles } from '../shared/section-styles';\r\nimport './FeatureItem';\r\n\r\n/** Data for one tile when using the `items` property (mirrors `st-feature-item`'s properties). */\r\nexport interface FeatureItemData {\r\n  icon?: string;\r\n  title: string;\r\n  description: string;\r\n  href?: string;\r\n}\r\n\r\n/**\r\n * A titled grid of feature tiles. Ports `SankhyaUI`'s React `FeaturesSection`: tiles come from the\r\n * `items` property, from slotted `st-feature-item` elements (the source's `children`), or both\r\n * (slotted first). `columns` sets the grid width (default 2; one column below 768px). `inverted`\r\n * is passed on to the `items` tiles; slotted tiles need their own `inverted` attribute.\r\n */\r\n@customElement('st-features-section')\r\nexport class FeaturesSection extends LitElement {\r\n  static styles = css`\r\n    ${controlBaseStyles}\r\n\r\n    :host {\r\n      display: block;\r\n      ${fontFamilyStyles}\r\n      padding: var(--st-cms-section-padding) var(--st-space-24);\r\n      background: var(--st-color-surface);\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      margin: 0;\r\n    }\r\n\r\n    .subtitle {\r\n      ${sectionSubtitleStyles}\r\n      margin: 0 auto;\r\n    }\r\n\r\n    :host([inverted]) .title,\r\n    :host([inverted]) .subtitle {\r\n      color: var(--st-color-on-solid);\r\n    }\r\n\r\n    .grid {\r\n      display: grid;\r\n      grid-template-columns: repeat(var(--features-columns, 2), 1fr);\r\n      gap: var(--st-space-32);\r\n    }\r\n\r\n    @media (max-width: 768px) {\r\n      :host {\r\n        padding: var(--st-space-48) var(--st-space-16);\r\n      }\r\n\r\n      .grid {\r\n        grid-template-columns: 1fr;\r\n      }\r\n    }\r\n  `;\r\n\r\n  @property({ type: String })\r\n  title = '';\r\n\r\n  @property({ type: String })\r\n  subtitle = '';\r\n\r\n  /** Applied to every tile built from `items`. */\r\n  @property({ type: String, attribute: 'action-label' })\r\n  actionLabel = 'Learn more';\r\n\r\n  @property({ type: Number })\r\n  columns = 0;\r\n\r\n  @property({ type: Boolean, reflect: true })\r\n  inverted = false;\r\n\r\n  /** Tiles to render (property only). */\r\n  @property({ attribute: false })\r\n  items: FeatureItemData[] = [];\r\n\r\n  render() {\r\n    const gridStyle = this.columns ? `--features-columns: ${this.columns}` : nothing;\r\n    return html`\r\n      <section class=\"container\" part=\"container\">\r\n        <div class=\"header\" part=\"header\">\r\n          <div class=\"title\" part=\"title\">${this.title}</div>\r\n          ${this.subtitle ? html`<div class=\"subtitle\" part=\"subtitle\">${this.subtitle}</div>` : nothing}\r\n        </div>\r\n        <div class=\"grid\" part=\"grid\" style=${gridStyle}>\r\n          <slot></slot>\r\n          ${this.items.map(\r\n            (item) => html`\r\n              <st-feature-item\r\n                .icon=${item.icon ?? ''}\r\n                .title=${item.title}\r\n                .description=${item.description}\r\n                .href=${item.href ?? ''}\r\n                .actionLabel=${this.actionLabel}\r\n                ?inverted=${this.inverted}\r\n              ></st-feature-item>\r\n            `\r\n          )}\r\n        </div>\r\n      </section>\r\n    `;\r\n  }\r\n}\r\n","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 { cardDescriptionStyles, cardTitleStyles } from '../shared/section-styles';\r\nimport '../card';\r\nimport '../markdown';\r\n\r\n/**\r\n * One feature tile for `st-features-section`: optional icon, title, Markdown description and an\r\n * optional \"Learn more\" link, rendered on an `st-card`. `icon` is an Iconify name (e.g.\r\n * `mdi:rocket`). The link is a plain `<a>` (the source used react-router's `Link` for non-http\r\n * hrefs; there is no Lit equivalent). The click is composed, so an SPA router can intercept it\r\n * (e.g. via `event.composedPath()`) and navigate client-side; `http(s)` links open in a new tab.\r\n */\r\n@customElement('st-feature-item')\r\nexport class FeatureItem extends LitElement {\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    st-card {\r\n      height: 100%;\r\n    }\r\n\r\n    .content {\r\n      display: flex;\r\n      flex-direction: column;\r\n      align-items: flex-start;\r\n      gap: var(--st-space-16);\r\n      height: 100%;\r\n    }\r\n\r\n    .icon {\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      width: 48px;\r\n      height: 48px;\r\n      border-radius: var(--st-radius-lg);\r\n      background: var(--st-color-subtle);\r\n      color: var(--st-color-text-strong);\r\n      margin-bottom: var(--st-space-8);\r\n      font-size: 24px;\r\n    }\r\n\r\n    :host([inverted]) .icon {\r\n      background: var(--st-color-text-muted);\r\n      color: var(--st-color-on-solid);\r\n    }\r\n\r\n    .title {\r\n      ${cardTitleStyles}\r\n      margin: 0;\r\n    }\r\n\r\n    .description {\r\n      ${cardDescriptionStyles}\r\n      margin: 0;\r\n    }\r\n\r\n    :host([inverted]) .title,\r\n    :host([inverted]) .description {\r\n      color: inherit;\r\n    }\r\n\r\n    .link {\r\n      display: flex;\r\n      align-items: center;\r\n      gap: var(--st-space-4);\r\n      margin-top: auto;\r\n      color: var(--st-color-text-muted);\r\n      font-weight: var(--st-font-weight-medium);\r\n      font-size: var(--st-text-md);\r\n      text-decoration: none;\r\n      transition: color 0.2s ease;\r\n    }\r\n\r\n    .link:hover {\r\n      color: var(--st-color-text-strong);\r\n      text-decoration: underline;\r\n    }\r\n\r\n    :host([inverted]) .link,\r\n    :host([inverted]) .link:hover {\r\n      color: inherit;\r\n    }\r\n\r\n    @media (prefers-reduced-motion: reduce) {\r\n      .link {\r\n        transition: none;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** Iconify icon name, e.g. `mdi:rocket`. */\r\n  @property({ type: String })\r\n  icon = '';\r\n\r\n  @property({ type: String })\r\n  title = '';\r\n\r\n  /** Markdown. */\r\n  @property({ type: String })\r\n  description = '';\r\n\r\n  @property({ type: String })\r\n  href = '';\r\n\r\n  @property({ type: String, attribute: 'action-label' })\r\n  actionLabel = 'Learn more';\r\n\r\n  @property({ type: Boolean, reflect: true })\r\n  inverted = false;\r\n\r\n  render() {\r\n    const external = this.href.startsWith('http');\r\n    return html`\r\n      <st-card hoverable elevation=\"sm\" ?inverted=${this.inverted} part=\"card\">\r\n        <div class=\"content\" part=\"content\">\r\n          ${this.icon\r\n            ? html`<div class=\"icon\" part=\"icon\"><iconify-icon icon=${this.icon}></iconify-icon></div>`\r\n            : nothing}\r\n          <h3 class=\"title\" part=\"title\">${this.title}</h3>\r\n          <st-markdown class=\"description\" part=\"description\" .content=${this.description}></st-markdown>\r\n          ${this.href\r\n            ? html`\r\n                <a\r\n                  class=\"link\"\r\n                  part=\"link\"\r\n                  href=${this.href}\r\n                  target=${external ? '_blank' : '_self'}\r\n                  rel=${external ? 'noopener noreferrer' : nothing}\r\n                >\r\n                  ${this.actionLabel} <span>&rarr;</span>\r\n                </a>\r\n              `\r\n            : nothing}\r\n        </div>\r\n      </st-card>\r\n    `;\r\n  }\r\n}\r\n"],"mappings":"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","names":["LitElement","css","html","nothing","customElement","property","LitElement","nothing","html","css","property","customElement"]}

package/dist/chunk-EUXUH3YW.js

@@ -0,0 +1,15 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+
+export {
+  __decorateClass
+};
+//# sourceMappingURL=chunk-EUXUH3YW.js.map

package/dist/chunk-EUXUH3YW.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/chunk-IMACP7HN.js

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

package/dist/chunk-IMACP7HN.js.map

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