@editora/ui-core 0.1.8 → 0.1.10

package/dist/calendar.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./calendar-a8735e40.js");require("./ElementBase-1b301e7f.js");exports.UICalendar=e.UICalendar;exports.addDaysISO=e.addDaysISO;exports.addMonthsISO=e.addMonthsISO;exports.compareISO=e.compareISO;exports.endOfMonth=e.endOfMonth;exports.parseISO=e.parseISO;exports.startOfMonth=e.startOfMonth;

package/dist/calendar.esm.js

@@ -0,0 +1,11 @@
+import { U as r, a as t, b as d, c as e, e as O, p as n, s as p } from "./calendar-2c11b824.mjs";
+import "./ElementBase-909688f3.mjs";
+export {
+  r as UICalendar,
+  t as addDaysISO,
+  d as addMonthsISO,
+  e as compareISO,
+  O as endOfMonth,
+  n as parseISO,
+  p as startOfMonth
+};

package/dist/card.cjs.js

@@ -0,0 +1,306 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("./ElementBase-1b301e7f.js"),c=`
+  :host {
+    --ui-card-radius: var(--base-card-radius, var(--ui-radius, 4px));
+    --ui-card-bg: var(--base-card-bg, var(--color-panel-solid, var(--ui-color-surface, #ffffff)));
+    --ui-card-color: var(--ui-color-text, var(--ui-text, #202020));
+    --ui-card-border-color: color-mix(in srgb, var(--ui-color-border, rgba(15, 23, 42, 0.16)) 82%, transparent);
+    --ui-card-border: var(--base-card-border, 1px solid var(--ui-card-border-color));
+    --ui-card-shadow: var(--base-card-shadow, var(--shadow-2, none));
+    --ui-card-padding: 16px;
+    --ui-card-gap: var(--ui-default-gap, 8px);
+    --ui-card-header-gap: 4px;
+    --ui-card-title-size: 18px;
+    --ui-card-title-line-height: 24px;
+    --ui-card-description-size: 14px;
+    --ui-card-description-line-height: 20px;
+    --ui-card-footer-size: 13px;
+    --ui-card-footer-line-height: 18px;
+    --ui-card-media-min-height: 148px;
+    --ui-card-backdrop: none;
+    --ui-card-accent: var(--ui-color-primary, var(--ui-primary, #2563eb));
+    display: block;
+    min-inline-size: 0;
+    box-sizing: border-box;
+    color-scheme: light dark;
+  }
+
+  :host([size="sm"]),
+  :host([size="1"]) {
+    --ui-card-padding: 12px;
+    --ui-card-gap: 8px;
+    --ui-card-header-gap: 3px;
+    --ui-card-title-size: 16px;
+    --ui-card-title-line-height: 22px;
+    --ui-card-description-size: 13px;
+    --ui-card-description-line-height: 18px;
+    --ui-card-footer-size: 12px;
+    --ui-card-footer-line-height: 16px;
+    --ui-card-media-min-height: 112px;
+  }
+
+  :host([size="md"]),
+  :host([size="2"]) {
+    --ui-card-padding: 16px;
+    --ui-card-gap: var(--ui-default-gap, 8px);
+    --ui-card-header-gap: 4px;
+    --ui-card-title-size: 18px;
+    --ui-card-title-line-height: 24px;
+    --ui-card-description-size: 14px;
+    --ui-card-description-line-height: 20px;
+    --ui-card-footer-size: 13px;
+    --ui-card-footer-line-height: 18px;
+    --ui-card-media-min-height: 148px;
+  }
+
+  :host([size="lg"]),
+  :host([size="3"]) {
+    --ui-card-padding: 24px;
+    --ui-card-gap: 12px;
+    --ui-card-header-gap: 6px;
+    --ui-card-title-size: 22px;
+    --ui-card-title-line-height: 30px;
+    --ui-card-description-size: 16px;
+    --ui-card-description-line-height: 24px;
+    --ui-card-footer-size: 14px;
+    --ui-card-footer-line-height: 20px;
+    --ui-card-media-min-height: 196px;
+  }
+
+  :host([tone="brand"]),
+  :host([tone="info"]) {
+    --ui-card-accent: var(--ui-color-primary, var(--ui-primary, #2563eb));
+  }
+
+  :host([tone="success"]) {
+    --ui-card-accent: var(--ui-color-success, #16a34a);
+  }
+
+  :host([tone="warning"]) {
+    --ui-card-accent: var(--ui-color-warning, #d97706);
+  }
+
+  :host([tone="danger"]) {
+    --ui-card-accent: var(--ui-color-danger, #dc2626);
+  }
+
+  :host([variant="outline"]) {
+    --ui-card-shadow: none;
+    --ui-card-bg: color-mix(in srgb, var(--color-panel-solid, var(--ui-color-surface, #ffffff)) 96%, transparent);
+    --ui-card-border-color: color-mix(in srgb, var(--ui-card-accent) 18%, var(--ui-color-border, rgba(15, 23, 42, 0.16)));
+  }
+
+  :host([variant="soft"]) {
+    --ui-card-bg: color-mix(in srgb, var(--ui-card-accent) 6%, var(--color-panel-solid, var(--ui-color-surface, #ffffff)));
+    --ui-card-shadow: none;
+    --ui-card-border-color: color-mix(in srgb, var(--ui-card-accent) 12%, var(--ui-color-border, rgba(15, 23, 42, 0.16)));
+  }
+
+  :host([variant="ghost"]) {
+    --ui-card-bg: transparent;
+    --ui-card-shadow: none;
+    --ui-card-border-color: color-mix(in srgb, var(--ui-card-accent) 10%, transparent);
+  }
+
+  :host([variant="solid"]) {
+    --ui-card-bg: color-mix(in srgb, var(--ui-card-accent) 14%, var(--color-panel-solid, var(--ui-color-surface, #ffffff)));
+    --ui-card-border-color: color-mix(in srgb, var(--ui-card-accent) 24%, var(--ui-color-border, rgba(15, 23, 42, 0.16)));
+    --ui-card-shadow:
+      0 1px 3px rgba(15, 23, 42, 0.06),
+      0 18px 36px color-mix(in srgb, var(--ui-card-accent) 10%, rgba(15, 23, 42, 0.08));
+  }
+
+  :host([variant="glass"]) {
+    --ui-card-bg:
+      linear-gradient(
+        180deg,
+        color-mix(in srgb, var(--color-panel-solid, var(--ui-color-surface, #ffffff)) 88%, #ffffff 12%),
+        color-mix(in srgb, var(--color-panel-solid, var(--ui-color-surface, #ffffff)) 94%, transparent)
+      );
+    --ui-card-backdrop: var(--base-panel-backdrop, var(--backdrop-filter-panel, blur(16px)));
+  }
+
+  :host([variant="contrast"]) {
+    --ui-card-bg:
+      linear-gradient(
+        180deg,
+        color-mix(in srgb, var(--ui-card-accent) 20%, #0f172a 80%),
+        color-mix(in srgb, var(--ui-card-accent) 10%, #020617 90%)
+      );
+    --ui-card-color: #f8fafc;
+    --ui-card-border-color: color-mix(in srgb, var(--ui-card-accent) 28%, rgba(248, 250, 252, 0.28));
+    --ui-card-shadow: 0 20px 40px rgba(2, 6, 23, 0.34);
+  }
+
+  :host([elevation="none"]) {
+    --ui-card-shadow: none;
+  }
+
+  :host([elevation="low"]) {
+    --ui-card-shadow:
+      0 1px 2px rgba(15, 23, 42, 0.05),
+      0 8px 18px rgba(15, 23, 42, 0.08);
+  }
+
+  :host([elevation="high"]) {
+    --ui-card-shadow:
+      0 2px 8px rgba(15, 23, 42, 0.08),
+      0 26px 54px rgba(15, 23, 42, 0.16);
+  }
+
+  :host([interactive]) {
+    cursor: pointer;
+  }
+
+  :host([interactive]) .card {
+    transition:
+      transform 180ms cubic-bezier(0.2, 0.9, 0.24, 1),
+      box-shadow 180ms cubic-bezier(0.2, 0.9, 0.24, 1),
+      border-color 180ms cubic-bezier(0.2, 0.9, 0.24, 1);
+  }
+
+  :host([interactive]:not([disabled])):hover .card {
+    transform: translateY(-1px);
+    box-shadow:
+      0 2px 8px rgba(15, 23, 42, 0.08),
+      0 28px 56px rgba(15, 23, 42, 0.14);
+    border-color: color-mix(in srgb, var(--ui-card-accent) 18%, var(--ui-card-border-color));
+  }
+
+  :host([interactive]:not([disabled])):focus-visible {
+    outline: none;
+  }
+
+  :host([interactive]:not([disabled])):focus-visible .card {
+    border-color: color-mix(in srgb, var(--ui-card-accent) 24%, var(--ui-card-border-color));
+    box-shadow:
+      0 0 0 3px color-mix(in srgb, var(--ui-card-accent) 20%, transparent),
+      var(--ui-card-shadow);
+  }
+
+  :host([interactive]:not([disabled])):active .card {
+    transform: translateY(0);
+  }
+
+  :host([disabled]) {
+    opacity: 0.64;
+    pointer-events: none;
+  }
+
+  .card {
+    display: grid;
+    gap: var(--ui-card-gap);
+    min-inline-size: 0;
+    box-sizing: border-box;
+    border-radius: var(--ui-card-radius);
+    border: var(--ui-card-border);
+    background: var(--ui-card-bg);
+    color: var(--ui-card-color);
+    box-shadow: var(--ui-card-shadow);
+    backdrop-filter: var(--ui-card-backdrop);
+    overflow: hidden;
+  }
+
+  .section {
+    min-inline-size: 0;
+    box-sizing: border-box;
+  }
+
+  .header,
+  .body,
+  .footer {
+    padding-inline: var(--ui-card-padding);
+  }
+
+  .header {
+    padding-top: var(--ui-card-padding);
+  }
+
+  .body {
+    display: grid;
+    gap: var(--ui-card-gap);
+  }
+
+  .footer {
+    padding-bottom: var(--ui-card-padding);
+  }
+
+  .header[hidden],
+  .footer[hidden],
+  .media[hidden],
+  .inset[hidden] {
+    display: none;
+  }
+
+  .body:first-child {
+    padding-top: var(--ui-card-padding);
+  }
+
+  .body:last-child {
+    padding-bottom: var(--ui-card-padding);
+  }
+
+  .media {
+    inline-size: 100%;
+    min-inline-size: 0;
+    min-block-size: var(--ui-card-media-min-height);
+    line-height: 0;
+  }
+
+  .media ::slotted(*) {
+    display: block;
+    inline-size: 100%;
+    max-inline-size: 100%;
+  }
+
+  .inset {
+    min-inline-size: 0;
+  }
+
+  .inset ::slotted(*) {
+    display: block;
+    inline-size: 100%;
+    max-inline-size: 100%;
+  }
+
+  @media (prefers-contrast: more) {
+    :host {
+      --ui-card-border: 2px solid var(--ui-card-border-color);
+      --ui-card-shadow: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    :host {
+      --ui-card-bg: Canvas;
+      --ui-card-color: CanvasText;
+      --ui-card-border-color: CanvasText;
+      --ui-card-shadow: none;
+    }
+
+    .card {
+      forced-color-adjust: none;
+      background: Canvas;
+      color: CanvasText;
+      box-shadow: none;
+    }
+  }
+`;function l(a){if(!a||!a.trim())return"var(--base-card-radius, var(--ui-radius, 4px))";const i=a.trim().toLowerCase();return i==="full"?"999px":/^-?\d+(\.\d+)?$/.test(i)?`${i}px`:a}class s extends n.ElementBase{constructor(){super(...arguments),this._slotCleanup=[],this._onKeyDownBound=this._onKeyDown.bind(this)}static get observedAttributes(){return["variant","size","radius","tone","elevation","interactive","disabled","tabindex","role"]}connectedCallback(){super.connectedCallback(),this._syncHostStyles(),this.addEventListener("keydown",this._onKeyDownBound),this._syncAccessibilityState()}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("keydown",this._onKeyDownBound),this._cleanupSlotListeners()}attributeChangedCallback(i,r,e){super.attributeChangedCallback(i,r,e),r!==e&&(i==="radius"&&this._syncHostStyles(),(i==="interactive"||i==="disabled"||i==="tabindex"||i==="role")&&this._syncAccessibilityState())}shouldRenderOnAttributeChange(){return!1}render(){this.setContent(`
+      <style>${c}</style>
+      <article class="card" part="card" role="group">
+        <div class="section media" part="media" hidden>
+          <slot name="media"></slot>
+        </div>
+        <div class="section inset" part="inset" hidden>
+          <slot name="inset"></slot>
+        </div>
+        <div class="section header" part="header" hidden>
+          <slot name="header"></slot>
+        </div>
+        <div class="section body" part="body">
+          <slot></slot>
+        </div>
+        <div class="section footer" part="footer" hidden>
+          <slot name="footer"></slot>
+        </div>
+      </article>
+    `),this._syncHostStyles(),this._bindSlotListeners(),this._syncSlotState()}_syncHostStyles(){this.style.setProperty("--ui-card-radius",l(this.getAttribute("radius")))}_syncAccessibilityState(){const i=this.hasAttribute("interactive"),r=this.hasAttribute("disabled");if(!i){this.getAttribute("role")==="button"&&this.removeAttribute("role"),this.removeAttribute("aria-disabled"),(this.getAttribute("tabindex")==="0"||this.getAttribute("tabindex")==="-1")&&this.removeAttribute("tabindex");return}this.hasAttribute("role")||this.setAttribute("role","button"),this.setAttribute("aria-disabled",r?"true":"false"),this.hasAttribute("tabindex")?r&&this.getAttribute("tabindex")!=="-1"&&this.setAttribute("tabindex","-1"):this.setAttribute("tabindex",r?"-1":"0")}_cleanupSlotListeners(){for(const i of this._slotCleanup)i();this._slotCleanup=[]}_bindSlotListeners(){this._cleanupSlotListeners(),this.root.querySelectorAll("slot").forEach(r=>{const e=()=>this._syncSlotState();r.addEventListener("slotchange",e),this._slotCleanup.push(()=>r.removeEventListener("slotchange",e))})}_syncSlotState(){this._toggleSection("media"),this._toggleSection("inset"),this._toggleSection("header"),this._toggleSection("footer")}_toggleSection(i){const r=this.root.querySelector(`slot[name="${i}"]`),e=this.root.querySelector(`.${i}`);if(!r||!e)return;const d=r.assignedNodes({flatten:!0}).some(t=>{var o;return t.nodeType===Node.TEXT_NODE?!!((o=t.textContent)!=null&&o.trim()):!0});e.hidden=!d}_onKeyDown(i){!this.hasAttribute("interactive")||this.hasAttribute("disabled")||i.defaultPrevented||i.target===this&&(i.key==="Enter"||i.key===" ")&&(i.preventDefault(),this.click())}}typeof customElements<"u"&&!customElements.get("ui-card")&&customElements.define("ui-card",s);exports.UICard=s;

package/dist/card.esm.js

@@ -0,0 +1,378 @@
+import { E as d } from "./ElementBase-909688f3.mjs";
+const n = `
+  :host {
+    --ui-card-radius: var(--base-card-radius, var(--ui-radius, 4px));
+    --ui-card-bg: var(--base-card-bg, var(--color-panel-solid, var(--ui-color-surface, #ffffff)));
+    --ui-card-color: var(--ui-color-text, var(--ui-text, #202020));
+    --ui-card-border-color: color-mix(in srgb, var(--ui-color-border, rgba(15, 23, 42, 0.16)) 82%, transparent);
+    --ui-card-border: var(--base-card-border, 1px solid var(--ui-card-border-color));
+    --ui-card-shadow: var(--base-card-shadow, var(--shadow-2, none));
+    --ui-card-padding: 16px;
+    --ui-card-gap: var(--ui-default-gap, 8px);
+    --ui-card-header-gap: 4px;
+    --ui-card-title-size: 18px;
+    --ui-card-title-line-height: 24px;
+    --ui-card-description-size: 14px;
+    --ui-card-description-line-height: 20px;
+    --ui-card-footer-size: 13px;
+    --ui-card-footer-line-height: 18px;
+    --ui-card-media-min-height: 148px;
+    --ui-card-backdrop: none;
+    --ui-card-accent: var(--ui-color-primary, var(--ui-primary, #2563eb));
+    display: block;
+    min-inline-size: 0;
+    box-sizing: border-box;
+    color-scheme: light dark;
+  }
+
+  :host([size="sm"]),
+  :host([size="1"]) {
+    --ui-card-padding: 12px;
+    --ui-card-gap: 8px;
+    --ui-card-header-gap: 3px;
+    --ui-card-title-size: 16px;
+    --ui-card-title-line-height: 22px;
+    --ui-card-description-size: 13px;
+    --ui-card-description-line-height: 18px;
+    --ui-card-footer-size: 12px;
+    --ui-card-footer-line-height: 16px;
+    --ui-card-media-min-height: 112px;
+  }
+
+  :host([size="md"]),
+  :host([size="2"]) {
+    --ui-card-padding: 16px;
+    --ui-card-gap: var(--ui-default-gap, 8px);
+    --ui-card-header-gap: 4px;
+    --ui-card-title-size: 18px;
+    --ui-card-title-line-height: 24px;
+    --ui-card-description-size: 14px;
+    --ui-card-description-line-height: 20px;
+    --ui-card-footer-size: 13px;
+    --ui-card-footer-line-height: 18px;
+    --ui-card-media-min-height: 148px;
+  }
+
+  :host([size="lg"]),
+  :host([size="3"]) {
+    --ui-card-padding: 24px;
+    --ui-card-gap: 12px;
+    --ui-card-header-gap: 6px;
+    --ui-card-title-size: 22px;
+    --ui-card-title-line-height: 30px;
+    --ui-card-description-size: 16px;
+    --ui-card-description-line-height: 24px;
+    --ui-card-footer-size: 14px;
+    --ui-card-footer-line-height: 20px;
+    --ui-card-media-min-height: 196px;
+  }
+
+  :host([tone="brand"]),
+  :host([tone="info"]) {
+    --ui-card-accent: var(--ui-color-primary, var(--ui-primary, #2563eb));
+  }
+
+  :host([tone="success"]) {
+    --ui-card-accent: var(--ui-color-success, #16a34a);
+  }
+
+  :host([tone="warning"]) {
+    --ui-card-accent: var(--ui-color-warning, #d97706);
+  }
+
+  :host([tone="danger"]) {
+    --ui-card-accent: var(--ui-color-danger, #dc2626);
+  }
+
+  :host([variant="outline"]) {
+    --ui-card-shadow: none;
+    --ui-card-bg: color-mix(in srgb, var(--color-panel-solid, var(--ui-color-surface, #ffffff)) 96%, transparent);
+    --ui-card-border-color: color-mix(in srgb, var(--ui-card-accent) 18%, var(--ui-color-border, rgba(15, 23, 42, 0.16)));
+  }
+
+  :host([variant="soft"]) {
+    --ui-card-bg: color-mix(in srgb, var(--ui-card-accent) 6%, var(--color-panel-solid, var(--ui-color-surface, #ffffff)));
+    --ui-card-shadow: none;
+    --ui-card-border-color: color-mix(in srgb, var(--ui-card-accent) 12%, var(--ui-color-border, rgba(15, 23, 42, 0.16)));
+  }
+
+  :host([variant="ghost"]) {
+    --ui-card-bg: transparent;
+    --ui-card-shadow: none;
+    --ui-card-border-color: color-mix(in srgb, var(--ui-card-accent) 10%, transparent);
+  }
+
+  :host([variant="solid"]) {
+    --ui-card-bg: color-mix(in srgb, var(--ui-card-accent) 14%, var(--color-panel-solid, var(--ui-color-surface, #ffffff)));
+    --ui-card-border-color: color-mix(in srgb, var(--ui-card-accent) 24%, var(--ui-color-border, rgba(15, 23, 42, 0.16)));
+    --ui-card-shadow:
+      0 1px 3px rgba(15, 23, 42, 0.06),
+      0 18px 36px color-mix(in srgb, var(--ui-card-accent) 10%, rgba(15, 23, 42, 0.08));
+  }
+
+  :host([variant="glass"]) {
+    --ui-card-bg:
+      linear-gradient(
+        180deg,
+        color-mix(in srgb, var(--color-panel-solid, var(--ui-color-surface, #ffffff)) 88%, #ffffff 12%),
+        color-mix(in srgb, var(--color-panel-solid, var(--ui-color-surface, #ffffff)) 94%, transparent)
+      );
+    --ui-card-backdrop: var(--base-panel-backdrop, var(--backdrop-filter-panel, blur(16px)));
+  }
+
+  :host([variant="contrast"]) {
+    --ui-card-bg:
+      linear-gradient(
+        180deg,
+        color-mix(in srgb, var(--ui-card-accent) 20%, #0f172a 80%),
+        color-mix(in srgb, var(--ui-card-accent) 10%, #020617 90%)
+      );
+    --ui-card-color: #f8fafc;
+    --ui-card-border-color: color-mix(in srgb, var(--ui-card-accent) 28%, rgba(248, 250, 252, 0.28));
+    --ui-card-shadow: 0 20px 40px rgba(2, 6, 23, 0.34);
+  }
+
+  :host([elevation="none"]) {
+    --ui-card-shadow: none;
+  }
+
+  :host([elevation="low"]) {
+    --ui-card-shadow:
+      0 1px 2px rgba(15, 23, 42, 0.05),
+      0 8px 18px rgba(15, 23, 42, 0.08);
+  }
+
+  :host([elevation="high"]) {
+    --ui-card-shadow:
+      0 2px 8px rgba(15, 23, 42, 0.08),
+      0 26px 54px rgba(15, 23, 42, 0.16);
+  }
+
+  :host([interactive]) {
+    cursor: pointer;
+  }
+
+  :host([interactive]) .card {
+    transition:
+      transform 180ms cubic-bezier(0.2, 0.9, 0.24, 1),
+      box-shadow 180ms cubic-bezier(0.2, 0.9, 0.24, 1),
+      border-color 180ms cubic-bezier(0.2, 0.9, 0.24, 1);
+  }
+
+  :host([interactive]:not([disabled])):hover .card {
+    transform: translateY(-1px);
+    box-shadow:
+      0 2px 8px rgba(15, 23, 42, 0.08),
+      0 28px 56px rgba(15, 23, 42, 0.14);
+    border-color: color-mix(in srgb, var(--ui-card-accent) 18%, var(--ui-card-border-color));
+  }
+
+  :host([interactive]:not([disabled])):focus-visible {
+    outline: none;
+  }
+
+  :host([interactive]:not([disabled])):focus-visible .card {
+    border-color: color-mix(in srgb, var(--ui-card-accent) 24%, var(--ui-card-border-color));
+    box-shadow:
+      0 0 0 3px color-mix(in srgb, var(--ui-card-accent) 20%, transparent),
+      var(--ui-card-shadow);
+  }
+
+  :host([interactive]:not([disabled])):active .card {
+    transform: translateY(0);
+  }
+
+  :host([disabled]) {
+    opacity: 0.64;
+    pointer-events: none;
+  }
+
+  .card {
+    display: grid;
+    gap: var(--ui-card-gap);
+    min-inline-size: 0;
+    box-sizing: border-box;
+    border-radius: var(--ui-card-radius);
+    border: var(--ui-card-border);
+    background: var(--ui-card-bg);
+    color: var(--ui-card-color);
+    box-shadow: var(--ui-card-shadow);
+    backdrop-filter: var(--ui-card-backdrop);
+    overflow: hidden;
+  }
+
+  .section {
+    min-inline-size: 0;
+    box-sizing: border-box;
+  }
+
+  .header,
+  .body,
+  .footer {
+    padding-inline: var(--ui-card-padding);
+  }
+
+  .header {
+    padding-top: var(--ui-card-padding);
+  }
+
+  .body {
+    display: grid;
+    gap: var(--ui-card-gap);
+  }
+
+  .footer {
+    padding-bottom: var(--ui-card-padding);
+  }
+
+  .header[hidden],
+  .footer[hidden],
+  .media[hidden],
+  .inset[hidden] {
+    display: none;
+  }
+
+  .body:first-child {
+    padding-top: var(--ui-card-padding);
+  }
+
+  .body:last-child {
+    padding-bottom: var(--ui-card-padding);
+  }
+
+  .media {
+    inline-size: 100%;
+    min-inline-size: 0;
+    min-block-size: var(--ui-card-media-min-height);
+    line-height: 0;
+  }
+
+  .media ::slotted(*) {
+    display: block;
+    inline-size: 100%;
+    max-inline-size: 100%;
+  }
+
+  .inset {
+    min-inline-size: 0;
+  }
+
+  .inset ::slotted(*) {
+    display: block;
+    inline-size: 100%;
+    max-inline-size: 100%;
+  }
+
+  @media (prefers-contrast: more) {
+    :host {
+      --ui-card-border: 2px solid var(--ui-card-border-color);
+      --ui-card-shadow: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    :host {
+      --ui-card-bg: Canvas;
+      --ui-card-color: CanvasText;
+      --ui-card-border-color: CanvasText;
+      --ui-card-shadow: none;
+    }
+
+    .card {
+      forced-color-adjust: none;
+      background: Canvas;
+      color: CanvasText;
+      box-shadow: none;
+    }
+  }
+`;
+function c(a) {
+  if (!a || !a.trim())
+    return "var(--base-card-radius, var(--ui-radius, 4px))";
+  const i = a.trim().toLowerCase();
+  return i === "full" ? "999px" : /^-?\d+(\.\d+)?$/.test(i) ? `${i}px` : a;
+}
+class l extends d {
+  constructor() {
+    super(...arguments), this._slotCleanup = [], this._onKeyDownBound = this._onKeyDown.bind(this);
+  }
+  static get observedAttributes() {
+    return ["variant", "size", "radius", "tone", "elevation", "interactive", "disabled", "tabindex", "role"];
+  }
+  connectedCallback() {
+    super.connectedCallback(), this._syncHostStyles(), this.addEventListener("keydown", this._onKeyDownBound), this._syncAccessibilityState();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.removeEventListener("keydown", this._onKeyDownBound), this._cleanupSlotListeners();
+  }
+  attributeChangedCallback(i, r, e) {
+    super.attributeChangedCallback(i, r, e), r !== e && (i === "radius" && this._syncHostStyles(), (i === "interactive" || i === "disabled" || i === "tabindex" || i === "role") && this._syncAccessibilityState());
+  }
+  shouldRenderOnAttributeChange() {
+    return !1;
+  }
+  render() {
+    this.setContent(`
+      <style>${n}</style>
+      <article class="card" part="card" role="group">
+        <div class="section media" part="media" hidden>
+          <slot name="media"></slot>
+        </div>
+        <div class="section inset" part="inset" hidden>
+          <slot name="inset"></slot>
+        </div>
+        <div class="section header" part="header" hidden>
+          <slot name="header"></slot>
+        </div>
+        <div class="section body" part="body">
+          <slot></slot>
+        </div>
+        <div class="section footer" part="footer" hidden>
+          <slot name="footer"></slot>
+        </div>
+      </article>
+    `), this._syncHostStyles(), this._bindSlotListeners(), this._syncSlotState();
+  }
+  _syncHostStyles() {
+    this.style.setProperty("--ui-card-radius", c(this.getAttribute("radius")));
+  }
+  _syncAccessibilityState() {
+    const i = this.hasAttribute("interactive"), r = this.hasAttribute("disabled");
+    if (!i) {
+      this.getAttribute("role") === "button" && this.removeAttribute("role"), this.removeAttribute("aria-disabled"), (this.getAttribute("tabindex") === "0" || this.getAttribute("tabindex") === "-1") && this.removeAttribute("tabindex");
+      return;
+    }
+    this.hasAttribute("role") || this.setAttribute("role", "button"), this.setAttribute("aria-disabled", r ? "true" : "false"), this.hasAttribute("tabindex") ? r && this.getAttribute("tabindex") !== "-1" && this.setAttribute("tabindex", "-1") : this.setAttribute("tabindex", r ? "-1" : "0");
+  }
+  _cleanupSlotListeners() {
+    for (const i of this._slotCleanup)
+      i();
+    this._slotCleanup = [];
+  }
+  _bindSlotListeners() {
+    this._cleanupSlotListeners(), this.root.querySelectorAll("slot").forEach((r) => {
+      const e = () => this._syncSlotState();
+      r.addEventListener("slotchange", e), this._slotCleanup.push(() => r.removeEventListener("slotchange", e));
+    });
+  }
+  _syncSlotState() {
+    this._toggleSection("media"), this._toggleSection("inset"), this._toggleSection("header"), this._toggleSection("footer");
+  }
+  _toggleSection(i) {
+    const r = this.root.querySelector(`slot[name="${i}"]`), e = this.root.querySelector(`.${i}`);
+    if (!r || !e)
+      return;
+    const s = r.assignedNodes({ flatten: !0 }).some((t) => {
+      var o;
+      return t.nodeType === Node.TEXT_NODE ? !!((o = t.textContent) != null && o.trim()) : !0;
+    });
+    e.hidden = !s;
+  }
+  _onKeyDown(i) {
+    !this.hasAttribute("interactive") || this.hasAttribute("disabled") || i.defaultPrevented || i.target === this && (i.key === "Enter" || i.key === " ") && (i.preventDefault(), this.click());
+  }
+}
+typeof customElements < "u" && !customElements.get("ui-card") && customElements.define("ui-card", l);
+export {
+  l as UICard
+};