@editora/ui-core 0.1.9 → 0.1.10

package/dist/app-header.esm.js

@@ -0,0 +1,398 @@
+import { E as i } from "./ElementBase-909688f3.mjs";
+const t = `
+  :host {
+    display: block;
+    --ui-app-header-height: var(--base-app-header-height, 64px);
+    --ui-app-header-height-dense: var(--base-app-header-height-dense, 52px);
+    --ui-app-header-height-large: 76px;
+    --ui-app-header-bg-base: var(--base-app-header-bg, var(--color-panel, var(--ui-color-surface, #ffffff)));
+    --ui-app-header-bg: var(--ui-app-header-bg-base);
+    --ui-app-header-color: var(--ui-color-text, var(--ui-text, #202020));
+    --ui-app-header-muted: color-mix(in srgb, var(--ui-app-header-color) 56%, var(--ui-color-muted, var(--ui-muted, #646464)) 44%);
+    --ui-app-header-accent: var(--ui-color-primary, var(--ui-primary, #2563eb));
+    --ui-app-header-border-color: color-mix(in srgb, var(--ui-color-border, var(--ui-border, rgba(15, 23, 42, 0.14))) 84%, transparent);
+    --ui-app-header-border: var(--base-app-header-border, 1px solid var(--ui-app-header-border-color));
+    --ui-app-header-control-bg: color-mix(in srgb, var(--ui-app-header-bg-base) 90%, transparent);
+    --ui-app-header-control-bg-hover: color-mix(in srgb, var(--ui-app-header-accent) 8%, var(--ui-app-header-bg-base));
+    --ui-app-header-control-color: var(--ui-app-header-color);
+    --ui-app-header-focus-ring: var(--ui-color-focus-ring, var(--ui-focus-ring, #2563eb));
+    --ui-app-header-gap: var(--base-app-header-gap, var(--ui-default-gap, 8px));
+    --ui-app-header-padding-x: var(--base-app-header-padding, 16px);
+    --ui-app-header-radius: var(--base-app-header-radius, var(--ui-radius, 4px));
+    --ui-app-header-z: 60;
+    --ui-app-header-shadow: var(--base-app-header-shadow, none);
+    --ui-app-header-title-size: var(--ui-default-font-size, 14px);
+    --ui-app-header-title-line-height: var(--ui-default-line-height, 20px);
+    --ui-app-header-title-weight: 600;
+    --ui-app-header-subtitle-size: 12px;
+    --ui-app-header-subtitle-line-height: 16px;
+    --ui-app-header-subtitle-weight: 500;
+    --ui-app-header-control-radius: var(--base-app-header-control-radius, var(--ui-radius, 4px));
+    --ui-app-header-duration: var(--ui-motion-base, 170ms);
+    --ui-app-header-easing: var(--ui-motion-easing, cubic-bezier(0.2, 0.8, 0.2, 1));
+    color-scheme: light dark;
+  }
+
+  :host([size='1']),
+  :host([size='sm']),
+  :host([dense]) {
+    --ui-app-header-height: var(--ui-app-header-height-dense);
+    --ui-app-header-gap: 10px;
+    --ui-app-header-padding-x: 12px;
+    --ui-app-header-title-size: 13px;
+    --ui-app-header-title-line-height: 18px;
+    --ui-app-header-subtitle-size: 11px;
+    --ui-app-header-subtitle-line-height: 14px;
+  }
+
+  :host([size='2']),
+  :host([size='md']) {
+    --ui-app-header-height: var(--base-app-header-height, 64px);
+  }
+
+  :host([size='3']),
+  :host([size='lg']) {
+    --ui-app-header-height: var(--ui-app-header-height-large);
+    --ui-app-header-gap: 14px;
+    --ui-app-header-padding-x: 20px;
+    --ui-app-header-title-size: 16px;
+    --ui-app-header-title-line-height: 22px;
+    --ui-app-header-subtitle-size: 13px;
+    --ui-app-header-subtitle-line-height: 18px;
+  }
+
+  :host([variant='outline']) {
+    --ui-app-header-bg: color-mix(in srgb, var(--ui-app-header-bg-base) 88%, transparent);
+    --ui-app-header-shadow: none;
+    --ui-app-header-border: 1px solid color-mix(in srgb, var(--ui-app-header-accent) 18%, var(--ui-app-header-border-color));
+  }
+
+  :host([variant='soft']) {
+    --ui-app-header-bg: color-mix(in srgb, var(--ui-app-header-accent) 8%, var(--ui-app-header-bg-base));
+    --ui-app-header-border: 1px solid color-mix(in srgb, var(--ui-app-header-accent) 14%, var(--ui-app-header-border-color));
+  }
+
+  :host([variant='solid']) {
+    --ui-app-header-bg: var(--ui-app-header-accent);
+    --ui-app-header-color: #ffffff;
+    --ui-app-header-muted: color-mix(in srgb, #ffffff 76%, transparent);
+    --ui-app-header-border: 1px solid color-mix(in srgb, #000000 16%, transparent);
+    --ui-app-header-control-bg: color-mix(in srgb, #ffffff 14%, transparent);
+    --ui-app-header-control-bg-hover: color-mix(in srgb, #ffffff 24%, transparent);
+    --ui-app-header-control-color: #ffffff;
+    --ui-app-header-focus-ring: color-mix(in srgb, #ffffff 72%, var(--ui-app-header-accent) 28%);
+  }
+
+  :host([elevation='none']) {
+    --ui-app-header-shadow: none;
+  }
+
+  :host([elevation='low']) {
+    --ui-app-header-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 10px 22px rgba(15, 23, 42, 0.09);
+  }
+
+  :host([elevation='high']) {
+    --ui-app-header-shadow: 0 2px 10px rgba(15, 23, 42, 0.08), 0 18px 36px rgba(15, 23, 42, 0.16);
+  }
+
+  :host([tone='info']) {
+    --ui-app-header-accent: var(--ui-color-primary, var(--ui-primary, #2563eb));
+  }
+
+  :host([tone='success']) {
+    --ui-app-header-accent: var(--ui-color-success, #16a34a);
+  }
+
+  :host([tone='warning']) {
+    --ui-app-header-accent: var(--ui-color-warning, #d97706);
+  }
+
+  :host([tone='danger']) {
+    --ui-app-header-accent: var(--ui-color-danger, #dc2626);
+  }
+
+  :host([sticky]) {
+    position: sticky;
+    top: 0;
+    z-index: var(--ui-app-header-z);
+  }
+
+  header {
+    position: relative;
+    min-height: var(--ui-app-header-height);
+    display: grid;
+    grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, auto);
+    align-items: center;
+    gap: var(--ui-app-header-gap);
+    background: var(--ui-app-header-bg);
+    color: var(--ui-app-header-color);
+    border: var(--ui-app-header-border);
+    padding: 0 var(--ui-app-header-padding-x);
+    box-sizing: border-box;
+    border-radius: var(--ui-app-header-radius);
+    box-shadow: var(--ui-app-header-shadow);
+    backdrop-filter: blur(6px) saturate(1.05);
+    transition:
+      background var(--ui-app-header-duration) var(--ui-app-header-easing),
+      border-color var(--ui-app-header-duration) var(--ui-app-header-easing),
+      box-shadow var(--ui-app-header-duration) var(--ui-app-header-easing);
+  }
+
+  header::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    pointer-events: none;
+    box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 72%, transparent);
+  }
+
+  :host(:not([bordered])) header {
+    border-color: transparent;
+  }
+
+  .start,
+  .center,
+  .end {
+    min-width: 0;
+    display: inline-flex;
+    align-items: center;
+    gap: 10px;
+  }
+
+  .start {
+    justify-content: flex-start;
+  }
+
+  .center {
+    justify-content: flex-start;
+    overflow: hidden;
+    gap: 12px;
+  }
+
+  .center-left {
+    min-width: 0;
+    display: inline-flex;
+    align-items: center;
+    gap: 10px;
+    flex: 1;
+    overflow: hidden;
+  }
+
+  .title-wrap {
+    min-width: 0;
+    display: grid;
+    gap: 1px;
+  }
+
+  .title-slot {
+    min-width: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-size: var(--ui-app-header-title-size);
+    line-height: var(--ui-app-header-title-line-height);
+    font-weight: var(--ui-app-header-title-weight);
+    letter-spacing: var(--ui-default-letter-spacing, 0em);
+  }
+
+  .subtitle-slot {
+    min-width: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-size: var(--ui-app-header-subtitle-size);
+    line-height: var(--ui-app-header-subtitle-line-height);
+    font-weight: var(--ui-app-header-subtitle-weight);
+    color: var(--ui-app-header-muted);
+  }
+
+  .title-slot:empty {
+    display: none;
+  }
+
+  .title-slot:empty + .subtitle-slot,
+  .subtitle-slot:empty {
+    display: none;
+  }
+
+  .end {
+    justify-content: flex-end;
+    gap: 8px;
+  }
+
+  .menu-btn {
+    width: 36px;
+    height: 36px;
+    border-radius: var(--ui-app-header-control-radius);
+    border: 1px solid color-mix(in srgb, var(--ui-app-header-border-color) 92%, transparent);
+    background: var(--ui-app-header-control-bg);
+    color: var(--ui-app-header-control-color);
+    display: none;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    line-height: 1;
+    box-sizing: border-box;
+    transition:
+      background var(--ui-app-header-duration) var(--ui-app-header-easing),
+      border-color var(--ui-app-header-duration) var(--ui-app-header-easing),
+      transform 120ms ease;
+  }
+
+  :host([show-menu-button]) .menu-btn {
+    display: inline-flex;
+  }
+
+  .menu-btn svg {
+    width: 16px;
+    height: 16px;
+    pointer-events: none;
+  }
+
+  .menu-btn:hover {
+    background: var(--ui-app-header-control-bg-hover);
+    border-color: color-mix(in srgb, var(--ui-app-header-accent) 40%, var(--ui-app-header-border-color));
+  }
+
+  .menu-btn:active {
+    transform: translateY(1px);
+  }
+
+  .menu-btn:focus-visible {
+    outline: 2px solid var(--ui-app-header-focus-ring);
+    outline-offset: 1px;
+  }
+
+  :host([headless]) header {
+    display: none;
+  }
+
+  @media (max-width: 900px) {
+    :host {
+      --ui-app-header-padding-x: 12px;
+      --ui-app-header-gap: 10px;
+    }
+  }
+
+  @media (max-width: 720px) {
+    .center {
+      gap: 8px;
+    }
+
+    .subtitle-slot {
+      display: none;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    header,
+    .menu-btn {
+      transition: none !important;
+    }
+  }
+
+  @media (prefers-contrast: more) {
+    :host {
+      --ui-app-header-border: 2px solid var(--ui-app-header-border-color);
+      --ui-app-header-shadow: none;
+      --ui-app-header-control-bg-hover: color-mix(in srgb, var(--ui-app-header-accent) 18%, transparent);
+    }
+  }
+
+  @media (forced-colors: active) {
+    :host {
+      --ui-app-header-bg: Canvas;
+      --ui-app-header-color: CanvasText;
+      --ui-app-header-border-color: CanvasText;
+      --ui-app-header-shadow: none;
+      --ui-app-header-control-bg: Canvas;
+      --ui-app-header-control-bg-hover: Highlight;
+      --ui-app-header-control-color: CanvasText;
+      --ui-app-header-focus-ring: Highlight;
+      --ui-app-header-muted: CanvasText;
+    }
+  }
+`;
+class p extends i {
+  static get observedAttributes() {
+    return [
+      "sticky",
+      "bordered",
+      "dense",
+      "headless",
+      "show-menu-button",
+      "variant",
+      "tone",
+      "size",
+      "radius",
+      "elevation"
+    ];
+  }
+  constructor() {
+    super(), this._onRootClick = this._onRootClick.bind(this);
+  }
+  _normalizeRadius(a) {
+    if (a == null)
+      return "var(--base-app-header-radius, var(--ui-radius, 4px))";
+    const e = a.trim().toLowerCase();
+    return e ? e === "full" || e === "pill" ? "999px" : /^-?\d+(\.\d+)?$/.test(e) ? `${e}px` : a : "var(--base-app-header-radius, var(--ui-radius, 4px))";
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.root.addEventListener("click", this._onRootClick), this.style.setProperty("--ui-app-header-radius", this._normalizeRadius(this.getAttribute("radius")));
+  }
+  disconnectedCallback() {
+    this.root.removeEventListener("click", this._onRootClick), super.disconnectedCallback();
+  }
+  _onRootClick(a) {
+    const e = a.target;
+    e != null && e.closest(".menu-btn") && this.dispatchEvent(
+      new CustomEvent("menu-trigger", {
+        bubbles: !0
+      })
+    );
+  }
+  attributeChangedCallback(a, e, r) {
+    e !== r && (a === "radius" && this.style.setProperty("--ui-app-header-radius", this._normalizeRadius(r)), super.attributeChangedCallback(a, e, r));
+  }
+  render() {
+    this.setContent(`
+      <style>${t}</style>
+      <header role="banner">
+        <div class="start">
+          <button
+            type="button"
+            class="menu-btn"
+            aria-label="Open navigation"
+          >
+            <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round">
+              <path d="M4 5.5h12M4 10h12M4 14.5h12"></path>
+            </svg>
+          </button>
+          <slot name="start"></slot>
+        </div>
+
+        <div class="center">
+          <div class="center-left">
+            <slot name="center"></slot>
+            <div class="title-wrap">
+              <span class="title-slot"><slot name="title"></slot></span>
+              <span class="subtitle-slot"><slot name="subtitle"></slot></span>
+            </div>
+          </div>
+        </div>
+
+        <div class="end">
+          <slot name="end"></slot>
+        </div>
+      </header>
+    `);
+  }
+  shouldRenderOnAttributeChange(a, e, r) {
+    return a === "show-menu-button";
+  }
+}
+typeof customElements < "u" && !customElements.get("ui-app-header") && customElements.define("ui-app-header", p);
+export {
+  p as UIAppHeader
+};

package/dist/aspect-ratio.cjs.js

@@ -0,0 +1,294 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("./ElementBase-1b301e7f.js"),p=`
+  :host {
+    display: block;
+    width: 100%;
+    --ui-aspect-radius: var(--base-aspect-ratio-radius, var(--ui-radius, 4px));
+    --ui-aspect-border: var(--base-aspect-ratio-border, 1px solid color-mix(in srgb, var(--ui-color-border, rgba(15, 23, 42, 0.14)) 84%, transparent));
+    --ui-aspect-bg-base: var(--base-aspect-ratio-bg, var(--color-panel-solid, var(--ui-color-surface, #ffffff)));
+    --ui-aspect-bg: var(--ui-aspect-bg-base);
+    --ui-aspect-color: var(--ui-color-text, #0f172a);
+    --ui-aspect-muted: var(--ui-color-muted, #64748b);
+    --ui-aspect-accent: var(--ui-color-primary, #2563eb);
+    --ui-aspect-empty-bg: var(--base-aspect-ratio-empty-bg, color-mix(in srgb, var(--ui-aspect-accent) 9%, transparent));
+    --ui-aspect-shadow: var(--base-aspect-ratio-shadow, none);
+    --ui-aspect-fit: cover;
+    --ui-aspect-transition: var(--ui-motion-base, 180ms) var(--ui-motion-easing, cubic-bezier(0.2, 0.8, 0.2, 1));
+    --ui-aspect-highlight: color-mix(in srgb, var(--ui-aspect-accent) 28%, transparent);
+    --ui-aspect-badge-radius: var(--base-aspect-ratio-badge-radius, 999px);
+    --ui-aspect-title-size: var(--ui-default-font-size, 14px);
+    --ui-aspect-title-line-height: var(--ui-default-line-height, 20px);
+    --ui-aspect-empty-icon-size: 32px;
+    color-scheme: light dark;
+  }
+
+  :host([size='1']),
+  :host([size='sm']) {
+    --ui-aspect-radius: max(0px, calc(var(--base-aspect-ratio-radius, var(--ui-radius, 4px)) - 1px));
+    --ui-aspect-title-size: 13px;
+    --ui-aspect-title-line-height: 18px;
+    --ui-aspect-empty-icon-size: 28px;
+  }
+
+  :host([size='2']),
+  :host([size='md']) {
+    --ui-aspect-title-size: var(--ui-default-font-size, 14px);
+  }
+
+  :host([size='3']),
+  :host([size='lg']) {
+    --ui-aspect-radius: max(0px, calc(var(--base-aspect-ratio-radius, var(--ui-radius, 4px)) + 4px));
+    --ui-aspect-title-size: 15px;
+    --ui-aspect-title-line-height: 22px;
+    --ui-aspect-empty-icon-size: 36px;
+  }
+
+  :host([variant='outline']) {
+    --ui-aspect-bg: color-mix(in srgb, var(--ui-aspect-bg-base) 88%, transparent);
+    --ui-aspect-shadow: none;
+    --ui-aspect-border: 1px solid color-mix(in srgb, var(--ui-aspect-accent) 20%, var(--ui-color-border, rgba(15, 23, 42, 0.14)));
+  }
+
+  :host([variant='soft']) {
+    --ui-aspect-bg: color-mix(in srgb, var(--ui-aspect-accent) 7%, var(--ui-aspect-bg-base));
+    --ui-aspect-border: 1px solid color-mix(in srgb, var(--ui-aspect-accent) 14%, var(--ui-color-border, rgba(15, 23, 42, 0.14)));
+  }
+
+  :host([variant='solid']) {
+    --ui-aspect-bg: color-mix(in srgb, var(--ui-aspect-accent) 24%, var(--ui-aspect-bg-base));
+    --ui-aspect-border: 1px solid color-mix(in srgb, var(--ui-aspect-accent) 28%, transparent);
+  }
+
+  :host([elevation='none']) {
+    --ui-aspect-shadow: none;
+  }
+
+  :host([elevation='low']) {
+    --ui-aspect-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 10px 22px rgba(15, 23, 42, 0.09);
+  }
+
+  :host([elevation='high']) {
+    --ui-aspect-shadow: 0 2px 10px rgba(15, 23, 42, 0.08), 0 18px 36px rgba(15, 23, 42, 0.16);
+  }
+
+  :host([tone='info']) {
+    --ui-aspect-accent: var(--ui-color-primary, #2563eb);
+  }
+
+  :host([tone='success']) {
+    --ui-aspect-accent: var(--ui-color-success, #16a34a);
+  }
+
+  :host([tone='warning']) {
+    --ui-aspect-accent: var(--ui-color-warning, #d97706);
+  }
+
+  :host([tone='danger']) {
+    --ui-aspect-accent: var(--ui-color-danger, #dc2626);
+  }
+
+  .frame {
+    position: relative;
+    width: 100%;
+    height: 0;
+    padding-bottom: var(--ui-aspect-padding, 56.25%);
+    border-radius: var(--ui-aspect-radius);
+    border: var(--ui-aspect-border);
+    background: var(--ui-aspect-bg);
+    box-shadow: var(--ui-aspect-shadow);
+    overflow: hidden;
+    transition:
+      padding-bottom var(--ui-aspect-transition),
+      border-color var(--ui-aspect-transition),
+      box-shadow var(--ui-aspect-transition),
+      transform var(--ui-aspect-transition);
+  }
+
+  .surface {
+    position: absolute;
+    inset: 0;
+  }
+
+  .surface::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    background:
+      radial-gradient(120% 80% at 100% 0%, color-mix(in srgb, var(--ui-aspect-highlight) 70%, transparent), transparent 58%),
+      linear-gradient(180deg, color-mix(in srgb, #ffffff 36%, transparent), transparent 28%);
+    opacity: 0.9;
+  }
+
+  .surface::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 70%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--ui-aspect-accent) 10%, transparent);
+  }
+
+  .content {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    display: grid;
+    place-items: center;
+  }
+
+  .empty {
+    position: absolute;
+    inset: 0;
+    display: grid;
+    place-items: center;
+    pointer-events: none;
+    background:
+      linear-gradient(145deg, color-mix(in srgb, var(--ui-aspect-empty-bg) 72%, transparent), transparent 58%),
+      repeating-linear-gradient(
+        45deg,
+        color-mix(in srgb, var(--ui-aspect-accent) 6%, transparent) 0px,
+        color-mix(in srgb, var(--ui-aspect-accent) 6%, transparent) 8px,
+        transparent 8px,
+        transparent 16px
+      );
+  }
+
+  .empty-shell {
+    display: grid;
+    gap: 8px;
+    justify-items: center;
+    text-align: center;
+    color: var(--ui-aspect-color);
+    padding: 14px;
+  }
+
+  .empty-icon {
+    width: var(--ui-aspect-empty-icon-size);
+    height: var(--ui-aspect-empty-icon-size);
+    border-radius: calc(var(--ui-aspect-radius) - 2px);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background: color-mix(in srgb, var(--ui-aspect-accent) 14%, transparent);
+    color: color-mix(in srgb, var(--ui-aspect-accent) 80%, var(--ui-aspect-color) 20%);
+    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ui-aspect-accent) 24%, transparent);
+  }
+
+  .empty-icon svg {
+    width: 16px;
+    height: 16px;
+  }
+
+  .empty-title {
+    font-size: var(--ui-aspect-title-size);
+    line-height: var(--ui-aspect-title-line-height);
+    font-weight: 600;
+    letter-spacing: var(--ui-default-letter-spacing, 0em);
+  }
+
+  .empty-subtitle {
+    font-size: 12px;
+    color: var(--ui-aspect-muted);
+    line-height: 1.35;
+  }
+
+  .badge {
+    position: absolute;
+    top: 10px;
+    inset-inline-end: 10px;
+    border-radius: var(--ui-aspect-badge-radius);
+    padding: 3px 8px;
+    font-size: 10px;
+    font-weight: 700;
+    letter-spacing: 0.02em;
+    text-transform: uppercase;
+    line-height: 1.2;
+    color: color-mix(in srgb, var(--ui-aspect-accent) 82%, var(--ui-aspect-color) 18%);
+    background: color-mix(in srgb, var(--ui-aspect-accent) 14%, var(--ui-color-surface, #ffffff));
+    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ui-aspect-accent) 24%, transparent);
+    pointer-events: none;
+  }
+
+  .badge[hidden] {
+    display: none;
+  }
+
+  ::slotted(img),
+  ::slotted(video),
+  ::slotted(iframe),
+  ::slotted(canvas),
+  ::slotted(svg) {
+    width: 100%;
+    height: 100%;
+    object-fit: var(--ui-aspect-fit);
+    display: block;
+  }
+
+  :host([interactive]) .frame {
+    cursor: pointer;
+  }
+
+  :host([interactive]):hover .frame {
+    transform: translateY(-2px);
+    box-shadow: 0 3px 6px rgba(15, 23, 42, 0.08), 0 22px 42px rgba(15, 23, 42, 0.14);
+    border-color: color-mix(in srgb, var(--ui-aspect-accent) 34%, var(--ui-color-border, rgba(15, 23, 42, 0.14)));
+  }
+
+  :host([headless]) .frame {
+    display: none;
+  }
+
+  @media (max-width: 720px) {
+    .badge {
+      top: 8px;
+      inset-inline-end: 8px;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .frame {
+      transition: none !important;
+    }
+  }
+
+  @media (prefers-contrast: more) {
+    :host {
+      --ui-aspect-border: 2px solid var(--ui-color-border, currentColor);
+      --ui-aspect-shadow: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    :host {
+      --ui-aspect-bg: Canvas;
+      --ui-aspect-border: 1px solid CanvasText;
+    }
+    .badge {
+      background: Canvas;
+      color: CanvasText;
+      border: 1px solid CanvasText;
+    }
+  }
+`;function u(n){const e={width:16,height:9,ratio:1.7777777777777777,padding:56.25,text:"16/9"};if(!n)return e;const t=n.trim();if(!t)return e;const i=t.includes("/")?t.split("/"):t.includes(":")?t.split(":"):[];if(i.length===2){const r=Number(i[0]),a=Number(i[1]);return Number.isFinite(r)&&Number.isFinite(a)&&r>0&&a>0?{width:r,height:a,ratio:r/a,padding:a/r*100,text:`${r}/${a}`}:e}const s=Number(t);return!Number.isFinite(s)||s<=0?e:{width:s,height:1,ratio:s,padding:1/s*100,text:`${s}/1`}}function d(n){const e=(n||"").trim().toLowerCase();return e==="contain"?"contain":e==="fill"?"fill":e==="none"?"none":e==="scale-down"?"scale-down":"cover"}class o extends c.ElementBase{constructor(){super(),this._resizeObserver=null,this._contentObserver=null,this._lastSignature="",this._onResize=this._onResize.bind(this)}static get observedAttributes(){return["ratio","fit","tone","interactive","show-ratio-badge","headless","variant","size","radius","elevation"]}_normalizeRadius(e){if(e==null)return"var(--base-aspect-ratio-radius, var(--ui-radius, 4px))";const t=e.trim().toLowerCase();return t?t==="full"||t==="pill"?"999px":/^-?\d+(\.\d+)?$/.test(t)?`${t}px`:e:"var(--base-aspect-ratio-radius, var(--ui-radius, 4px))"}connectedCallback(){super.connectedCallback(),this.style.setProperty("--ui-aspect-radius",this._normalizeRadius(this.getAttribute("radius"))),this._observeResize(),this._observeContent()}disconnectedCallback(){this._unobserveResize(),this._unobserveContent(),super.disconnectedCallback()}_observeResize(){typeof window>"u"||this._resizeObserver||!window.ResizeObserver||(this._resizeObserver=new ResizeObserver(this._onResize),this._resizeObserver.observe(this))}_unobserveResize(){this._resizeObserver&&(this._resizeObserver.disconnect(),this._resizeObserver=null)}_onResize(){const e=this.getBoundingClientRect();this.dispatchEvent(new CustomEvent("resize",{detail:{width:e.width,height:e.height},bubbles:!0}))}_observeContent(){this._contentObserver||typeof MutationObserver>"u"||(this._contentObserver=new MutationObserver(()=>this.requestRender()),this._contentObserver.observe(this,{childList:!0,subtree:!1}))}_unobserveContent(){this._contentObserver&&(this._contentObserver.disconnect(),this._contentObserver=null)}attributeChangedCallback(e,t,i){t!==i&&(e==="radius"&&this.style.setProperty("--ui-aspect-radius",this._normalizeRadius(i)),super.attributeChangedCallback(e,t,i))}get headless(){return this.hasAttribute("headless")}set headless(e){e!==this.headless&&(e?this.setAttribute("headless",""):this.removeAttribute("headless"))}render(){const e=u(this.getAttribute("ratio")),t=d(this.getAttribute("fit")),i=this.hasAttribute("show-ratio-badge"),s=this.children.length>0;this.setContent(`
+      <style>${p}</style>
+      <div class="frame" part="frame" style="--ui-aspect-padding:${e.padding}%;--ui-aspect-fit:${t};">
+        <div class="surface" part="surface">
+          <div class="content" part="content">
+            <slot></slot>
+          </div>
+          ${s?"":`<div class="empty" part="empty" aria-hidden="true">
+                <div class="empty-shell">
+                  <span class="empty-icon">
+                    <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
+                      <rect x="3.8" y="5.4" width="12.4" height="9.2" rx="1.8"></rect>
+                      <path d="m7.1 11.2 2.2-2.3 3.5 3.8"></path>
+                    </svg>
+                  </span>
+                  <span class="empty-title">Aspect Ratio Surface</span>
+                  <span class="empty-subtitle">${e.text} / fit: ${t}</span>
+                </div>
+              </div>`}
+          <span class="badge" part="badge" ${i?"":"hidden"}>${e.text}</span>
+        </div>
+      </div>
+    `);const r=`${e.text}|${t}|${s?"1":"0"}|${i?"1":"0"}`;r!==this._lastSignature&&(this._lastSignature=r,this.dispatchEvent(new CustomEvent("change",{detail:{ratio:e.ratio,ratioText:e.text,width:e.width,height:e.height,padding:e.padding,fit:t,hasContent:s},bubbles:!0})))}shouldRenderOnAttributeChange(e,t,i){return e==="ratio"||e==="fit"||e==="show-ratio-badge"||e==="headless"}}typeof customElements<"u"&&!customElements.get("ui-aspect-ratio")&&customElements.define("ui-aspect-ratio",o);exports.UIAspectRatio=o;