@sondor-technology/sondor-components 1.0.0 → 1.0.1-develop.3

package/dist/components/checkbox/checkbox.js

@@ -0,0 +1,247 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, css } from "lit";
+import { customElement, property, query } from "lit/decorators.js";
+import { resetStyles } from "../../styles/reset.js";
+let StCheckbox = class StCheckbox extends LitElement {
+    constructor() {
+        super();
+        this.size = "md";
+        this.name = "";
+        // Checkboxes default to 'on' natively if no value is provided
+        this.value = "on";
+        this.checked = false;
+        this.indeterminate = false;
+        this.disabled = false;
+        this.invalid = false;
+        this.required = false;
+        this.ariaLabel = "";
+        this._internals = this.attachInternals();
+        // 1. Trigger error state if the user clicks away and the field is invalid
+        this.addEventListener('focusout', () => {
+            this.invalid = !this._inputEl.validity.valid;
+        });
+        // 2. Trigger error state if the st-form tries to submit and fails
+        this.addEventListener('invalid', () => {
+            this.invalid = true;
+        });
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has("checked") || changedProperties.has("value")) {
+            // Form API: If checked, submit the value. If unchecked, submit null to remove it from FormData.
+            this._internals.setFormValue(this.checked ? this.value : null);
+            this._syncValidity();
+        }
+        if (changedProperties.has("required")) {
+            this._syncValidity();
+        }
+    }
+    _syncValidity() {
+        if (!this._inputEl)
+            return;
+        this._internals.setValidity(this._inputEl.validity, this._inputEl.validationMessage, this._inputEl);
+    }
+    formResetCallback() {
+        this.checked = false;
+        this.indeterminate = false;
+        this._internals.setFormValue(null);
+        this.updateComplete.then(() => this._syncValidity());
+    }
+    _handleChange(e) {
+        e.stopPropagation();
+        if (this.disabled)
+            return;
+        // Standard native behavior: clicking an indeterminate checkbox unsets the indeterminate state
+        if (this.indeterminate) {
+            this.indeterminate = false;
+        }
+        this.checked = this._inputEl.checked;
+        this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
+    }
+    render() {
+        return html `
+      <label>
+        <input
+          type="checkbox"
+          aria-label=${this.ariaLabel || ""}
+          .name=${this.name}
+          .value=${this.value}
+          .checked=${this.checked}
+          .indeterminate=${this.indeterminate}
+          ?disabled=${this.disabled}
+          ?required=${this.required}
+          @change=${this._handleChange}
+        />
+        <div class="control">
+          <!-- Render both SVGs and use CSS to conditionally reveal them based on host attributes -->
+          ${this.indeterminate
+            ? html `<svg class="icon-minus" viewBox="0 0 24 24"><path d="M5 12h14"></path></svg>`
+            : html `<svg class="icon-check" viewBox="0 0 24 24">
+                <path d="M20 6L9 17l-5-5"></path>
+              </svg>`}
+        </div>
+        <span class="label"><slot></slot></span>
+      </label>
+    `;
+    }
+};
+StCheckbox.formAssociated = true;
+StCheckbox.styles = [
+    resetStyles,
+    css `
+      :host {
+        display: inline-block;
+        outline: none;
+        user-select: none;
+        --checkbox-size: 1.25rem;
+        --checkbox-icon-size: 0.875rem;
+      }
+
+      :host([size="sm"]) {
+        --checkbox-size: 1rem;
+        --checkbox-icon-size: 0.75rem;
+      }
+      :host([size="lg"]) {
+        --checkbox-size: 1.5rem;
+        --checkbox-icon-size: 1rem;
+      }
+
+      label {
+        display: inline-flex;
+        align-items: flex-start;
+        gap: var(--st-spacing-sm);
+        cursor: pointer;
+        color: var(--st-color-text);
+        font-size: var(--st-font-size-base);
+      }
+
+      /* Visually hide the native input but keep it in the DOM for focus/screen readers */
+      input {
+        position: absolute;
+        width: var(--checkbox-size);
+        height: var(--checkbox-size);
+        padding: 0;
+        margin: -1px;
+        overflow: hidden;
+        clip: rect(0, 0, 0, 0);
+        white-space: nowrap;
+        border-width: 0;
+      }
+
+      /* Custom Checkbox Box */
+      .control {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: var(--checkbox-size);
+        height: var(--checkbox-size);
+        border: 1px solid var(--st-color-border);
+        border-radius: 4px;
+        background-color: var(--st-color-bg);
+        transition: all 0.2s ease;
+        flex-shrink: 0;
+        /* Aligns the box nicely with standard text line-height */
+        margin-top: 0.125rem;
+      }
+
+      /* Hover State */
+      label:hover .control {
+        border-color: var(--st-color-primary-hover);
+      }
+
+      /* Focus State */
+      input:focus-visible + .control {
+        box-shadow:
+          0 0 0 2px var(--st-color-bg),
+          0 0 0 4px var(--st-color-primary);
+      }
+
+      /* Checked & Indeterminate States */
+      :host([checked]) .control,
+      :host([indeterminate]) .control {
+        border-color: var(--st-color-primary);
+        background-color: var(--st-color-primary);
+      }
+
+      /* SVG Icons */
+      svg {
+        width: var(--checkbox-icon-size);
+        height: var(--checkbox-icon-size);
+        stroke: var(--st-white);
+        stroke-width: 3;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+        fill: none;
+        opacity: 0;
+        transform: scale(0.5);
+        transition:
+          transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275),
+          opacity 0.2s ease;
+      }
+
+      /* Reveal Icons */
+      :host([checked]) svg.icon-check,
+      :host([indeterminate]) svg.icon-minus {
+        opacity: 1;
+        transform: scale(1);
+      }
+
+      /* Disabled State */
+      :host([disabled]) {
+        pointer-events: none;
+      }
+      :host([disabled]) label {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+
+      /* Invalid State */
+      :host([invalid]) .control {
+        border-color: var(--st-color-error);
+      }
+      :host([invalid]) input:focus-visible + .control {
+        box-shadow:
+          0 0 0 2px var(--st-color-bg),
+          0 0 0 4px var(--st-color-error);
+      }
+    `,
+];
+__decorate([
+    query("input")
+], StCheckbox.prototype, "_inputEl", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], StCheckbox.prototype, "size", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], StCheckbox.prototype, "name", void 0);
+__decorate([
+    property({ type: String })
+], StCheckbox.prototype, "value", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], StCheckbox.prototype, "checked", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], StCheckbox.prototype, "indeterminate", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], StCheckbox.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], StCheckbox.prototype, "invalid", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], StCheckbox.prototype, "required", void 0);
+__decorate([
+    property({ attribute: "aria-label" })
+], StCheckbox.prototype, "ariaLabel", void 0);
+StCheckbox = __decorate([
+    customElement("st-checkbox")
+], StCheckbox);
+export { StCheckbox };

package/dist/components/code-block/code-block.d.ts

@@ -0,0 +1,20 @@
+import { LitElement } from 'lit';
+import 'prismjs/components/prism-typescript.js';
+import 'prismjs/components/prism-javascript.js';
+import 'prismjs/components/prism-css.js';
+import 'prismjs/components/prism-json.js';
+import 'prismjs/components/prism-bash.js';
+import 'prismjs/components/prism-csharp.js';
+export declare class StCodeBlock extends LitElement {
+    language: string;
+    private _snippets;
+    private _activeIndex;
+    private _copied;
+    private _slot;
+    static styles: import("lit").CSSResult[];
+    private _handleSlotChange;
+    private _dedent;
+    private _copyToClipboard;
+    render(): import("lit-html").TemplateResult<1>;
+}
+//# sourceMappingURL=code-block.d.ts.map

package/dist/components/code-block/code-block.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-block.d.ts","sourceRoot":"","sources":["../../../src/components/code-block/code-block.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAM5C,OAAO,wCAAwC,CAAC;AAChD,OAAO,wCAAwC,CAAC;AAChD,OAAO,iCAAiC,CAAC;AACzC,OAAO,kCAAkC,CAAC;AAC1C,OAAO,kCAAkC,CAAC;AAC1C,OAAO,oCAAoC,CAAC;AAS5C,qBACa,WAAY,SAAQ,UAAU;IAEb,QAAQ,SAAgB;IAE3C,OAAO,CAAC,SAAS,CAAqB;IACtC,OAAO,CAAC,YAAY,CAAK;IACzB,OAAO,CAAC,OAAO,CAAS;IAEN,OAAO,CAAC,KAAK,CAAmB;IAE3D,MAAM,CAAC,MAAM,4BAyHX;IAEF,OAAO,CAAC,iBAAiB;IAkCzB,OAAO,CAAC,OAAO;YAaD,gBAAgB;IAc9B,MAAM,yCAwCL;CACF"}

package/dist/components/code-block/code-block.js

@@ -0,0 +1,260 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, css } from 'lit';
+import { customElement, property, state, query } from 'lit/decorators.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import { resetStyles } from '../../styles/reset.js';
+import Prism from 'prismjs';
+import 'prismjs/components/prism-typescript.js';
+import 'prismjs/components/prism-javascript.js';
+import 'prismjs/components/prism-css.js';
+import 'prismjs/components/prism-json.js';
+import 'prismjs/components/prism-bash.js';
+import 'prismjs/components/prism-csharp.js';
+let StCodeBlock = class StCodeBlock extends LitElement {
+    constructor() {
+        super(...arguments);
+        // Fallback language if a template doesn't provide one
+        this.language = 'typescript';
+        this._snippets = [];
+        this._activeIndex = 0;
+        this._copied = false;
+    }
+    _handleSlotChange() {
+        const nodes = this._slot.assignedNodes({ flatten: true });
+        // Find ALL template tags passed into the slot
+        const templates = nodes.filter(n => n instanceof HTMLTemplateElement);
+        if (templates.length > 0) {
+            // Map over every template and parse its code and attributes
+            this._snippets = templates.map(template => {
+                const lang = template.getAttribute('data-lang') || this.language;
+                const label = template.getAttribute('data-label') || lang; // Fallback to lang if no label provided
+                const rawCode = this._dedent(template.innerHTML);
+                const grammar = Prism.languages[lang] || Prism.languages.javascript;
+                const highlightedCode = Prism.highlight(rawCode, grammar, lang);
+                return { lang, label, rawCode, highlightedCode };
+            });
+        }
+        else {
+            // Fallback: If no template is used, process raw text just like before
+            const rawText = nodes.map(n => n.textContent).join('');
+            const rawCode = this._dedent(rawText);
+            if (rawCode) {
+                const grammar = Prism.languages[this.language] || Prism.languages.javascript;
+                const highlightedCode = Prism.highlight(rawCode, grammar, this.language);
+                this._snippets = [{ lang: this.language, label: this.language, rawCode, highlightedCode }];
+            }
+        }
+        // Reset to the first tab whenever new code is injected
+        this._activeIndex = 0;
+    }
+    _dedent(text) {
+        const lines = text.split('\n');
+        const minIndent = lines
+            .filter(line => line.trim().length > 0)
+            .reduce((min, line) => {
+            const indent = line.match(/^\s*/)?.[0].length || 0;
+            return Math.min(min, indent);
+        }, Infinity);
+        if (minIndent === Infinity || minIndent === 0)
+            return text.trim();
+        return lines.map(line => line.slice(minIndent)).join('\n').trim();
+    }
+    async _copyToClipboard() {
+        // Copy the code from the currently active tab
+        const activeSnippet = this._snippets[this._activeIndex];
+        if (!activeSnippet)
+            return;
+        try {
+            await navigator.clipboard.writeText(activeSnippet.rawCode);
+            this._copied = true;
+            setTimeout(() => { this._copied = false; }, 2000);
+        }
+        catch (err) {
+            console.error('Failed to copy text: ', err);
+        }
+    }
+    render() {
+        const activeSnippet = this._snippets[this._activeIndex];
+        return html `
+      <div class="header">
+        ${this._snippets.length > 1
+            ? html `
+              <div class="tabs">
+                ${this._snippets.map((snippet, index) => html `
+                  <button 
+                    class="tab ${index === this._activeIndex ? 'active' : ''}" 
+                    @click=${() => this._activeIndex = index}
+                  >
+                    ${snippet.label}
+                  </button>
+                `)}
+              </div>
+            `
+            : html `
+              <span class="language-label">${activeSnippet?.label || this.language}</span>
+            `}
+        
+        <button class="copy-button ${this._copied ? 'copied' : ''}" @click=${this._copyToClipboard}>
+          ${this._copied
+            ? html `<svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"></polyline></svg> Copied!`
+            : html `<svg viewBox="0 0 24 24"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg> Copy`}
+        </button>
+      </div>
+      
+      <!-- Render the currently active snippet -->
+      ${activeSnippet ? html `
+        <pre><code class="language-${activeSnippet.lang}">${unsafeHTML(activeSnippet.highlightedCode)}</code></pre>
+      ` : ''}
+      
+      <div class="raw-content">
+        <slot name="raw" @slotchange=${this._handleSlotChange}></slot>
+      </div>
+    `;
+    }
+};
+StCodeBlock.styles = [
+    resetStyles,
+    css `
+      :host {
+        display: block;
+        margin: var(--st-spacing-md) 0;
+        border-radius: 8px;
+        background-color: var(--st-color-surface);
+        border: 1px solid var(--st-color-border);
+        overflow: hidden;
+      }
+
+      .header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        background-color: rgba(0, 0, 0, 0.2);
+        border-bottom: 1px solid var(--st-color-border);
+        padding: 0 var(--st-spacing-md);
+        min-height: 2.5rem; /* 40px */
+      }
+
+      /* Single language label */
+      .language-label {
+        font-size: var(--st-font-size-xs);
+        color: var(--st-color-text-muted);
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        font-weight: var(--st-font-weight-bold);
+      }
+
+      /* Multi-language Tabs */
+      .tabs {
+        display: flex;
+        gap: var(--st-spacing-md);
+        height: 100%;
+      }
+
+      .tab {
+        background: transparent;
+        border: none;
+        border-bottom: 2px solid transparent;
+        color: var(--st-color-text-muted);
+        font-size: var(--st-font-size-xs);
+        font-weight: var(--st-font-weight-medium);
+        padding: var(--st-spacing-xs) 0;
+        cursor: pointer;
+        transition: all 0.2s ease;
+      }
+
+      .tab:hover {
+        color: var(--st-color-text);
+      }
+
+      .tab.active {
+        color: var(--st-color-primary);
+        border-bottom-color: var(--st-color-primary);
+      }
+
+      /* Copy Button */
+      .copy-button {
+        background: transparent;
+        border: 1px solid transparent;
+        color: var(--st-color-text-muted);
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        gap: var(--st-spacing-xs);
+        padding: 4px 8px;
+        border-radius: 4px;
+        font-size: var(--st-font-size-xs);
+        transition: all 0.2s ease;
+        margin-left: auto; /* Pushes it to the right */
+      }
+
+      .copy-button:hover {
+        color: var(--st-color-text);
+        background-color: rgba(255, 255, 255, 0.05);
+      }
+
+      .copy-button svg {
+        width: 14px;
+        height: 14px;
+        fill: none;
+        stroke: currentColor;
+        stroke-width: 2;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+      }
+
+      .copy-button.copied {
+        color: var(--st-color-success);
+      }
+
+      pre {
+        margin: 0;
+        padding: var(--st-spacing-md);
+        overflow-x: auto;
+        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+        font-size: 0.875rem;
+        line-height: 1.5;
+        color: var(--st-color-text);
+      }
+
+      .raw-content {
+        display: none;
+      }
+
+      /* ==========================================================
+         Prism.js Theme Mapping (Space Grey / Purple Aesthetic)
+         ========================================================== */
+      .token.comment, .token.prolog, .token.doctype, .token.cdata { color: var(--st-color-text-muted); font-style: italic; }
+      .token.punctuation { color: #8b949e; }
+      .token.namespace { opacity: .7; }
+      .token.property, .token.tag, .token.boolean, .token.number, .token.constant, .token.symbol, .token.deleted { color: #79c0ff; }
+      .token.selector, .token.attr-name, .token.string, .token.char, .token.builtin, .token.inserted { color: #a5d6ff; }
+      .token.operator, .token.entity, .token.url, .language-css .token.string, .style .token.string { color: var(--st-color-text); }
+      .token.atrule, .token.attr-value, .token.keyword { color: var(--st-color-primary); }
+      .token.function, .token.class-name { color: #d2a8ff; }
+      .token.regex, .token.important, .token.variable { color: #ffa657; }
+    `
+];
+__decorate([
+    property({ type: String })
+], StCodeBlock.prototype, "language", void 0);
+__decorate([
+    state()
+], StCodeBlock.prototype, "_snippets", void 0);
+__decorate([
+    state()
+], StCodeBlock.prototype, "_activeIndex", void 0);
+__decorate([
+    state()
+], StCodeBlock.prototype, "_copied", void 0);
+__decorate([
+    query('slot[name="raw"]')
+], StCodeBlock.prototype, "_slot", void 0);
+StCodeBlock = __decorate([
+    customElement('st-code-block')
+], StCodeBlock);
+export { StCodeBlock };

package/dist/components/content-card/content-card.d.ts

@@ -0,0 +1,13 @@
+import { LitElement } from 'lit';
+export declare class StContentCard extends LitElement {
+    href?: string;
+    target: '_blank' | '_self';
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'st-content-card': StContentCard;
+    }
+}
+//# sourceMappingURL=content-card.d.ts.map

package/dist/components/content-card/content-card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"content-card.d.ts","sourceRoot":"","sources":["../../../src/components/content-card/content-card.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,qBACa,aAAc,SAAQ,UAAU;IAEf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,QAAQ,GAAG,OAAO,CAAW;IAEjE,MAAM,CAAC,MAAM,4BA8FX;IAEF,MAAM,yCAoBL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}

package/dist/components/content-card/content-card.js

@@ -0,0 +1,140 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { resetStyles } from '../../styles/reset.js';
+let StContentCard = class StContentCard extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.target = '_self';
+    }
+    render() {
+        // 1. Define the inner content once to avoid duplication
+        const innerContent = html `
+      <div class="media">
+        <slot name="media"></slot>
+      </div>
+      <div class="content">
+        <div class="title">
+          <slot name="title"></slot>
+        </div>
+        <div class="body">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+        // 2. Conditionally wrap it in an anchor or a div
+        return this.href
+            ? html `<a href="${this.href}" target="${this.target}" class="card">${innerContent}</a>`
+            : html `<div class="card">${innerContent}</div>`;
+    }
+};
+StContentCard.styles = [
+    resetStyles,
+    css `
+      :host {
+        display: block;
+        /* Ensures cards stretch to equal heights if placed in a flex/grid container */
+        height: 100%; 
+      }
+
+      .card {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        background-color: var(--st-color-surface);
+        border: 1px solid var(--st-color-border);
+        border-radius: var(--st-radius-md, 0.5rem);
+        overflow: hidden;
+        text-decoration: none;
+        color: inherit;
+        
+        /* Smooth transitions for the hover effects */
+        transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
+      }
+
+      /* ==========================================================
+         Hover Effects (Only applied if it is a link)
+         ========================================================== */
+      a.card {
+        cursor: pointer;
+      }
+
+      a.card:hover,
+      a.card:focus-visible {
+        outline: none;
+        border-color: var(--st-color-primary);
+        transform: translateY(-2px);
+        /* Subtle shadow to lift the card off the background */
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); 
+      }
+
+      /* Dark mode specific shadow adjustment */
+      :host-context([data-theme="dark"]) a.card:hover {
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+      }
+
+      /* ==========================================================
+         Internal Layout
+         ========================================================== */
+      .media {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        aspect-ratio: 16 / 9;
+        background-color: var(--st-color-bg);
+        border-bottom: 1px solid var(--st-color-border);
+        overflow: hidden;
+      }
+
+      /* Image formatting */
+      ::slotted(img[slot="media"]) {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+
+      /* SVG formatting (for the icons we just created) */
+      ::slotted(svg[slot="media"]) {
+        width: 3rem;
+        height: 3rem;
+        color: var(--st-color-primary);
+      }
+
+      .content {
+        display: flex;
+        flex-direction: column;
+        padding: var(--st-spacing-md, 1.25rem);
+        gap: var(--st-spacing-sm, 0.5rem);
+        flex: 1;
+      }
+
+      .title {
+        font-weight: 600;
+        font-size: 1.125rem;
+        color: var(--st-color-text);
+        margin: 0;
+      }
+
+      .body {
+        color: var(--st-color-text-muted);
+        font-size: 0.875rem;
+        margin: 0;
+        line-height: 1.5;
+      }
+    `
+];
+__decorate([
+    property({ type: String })
+], StContentCard.prototype, "href", void 0);
+__decorate([
+    property({ type: String })
+], StContentCard.prototype, "target", void 0);
+StContentCard = __decorate([
+    customElement('st-content-card')
+], StContentCard);
+export { StContentCard };