@editora/ui-core 0.1.9 → 0.1.10

package/README.md

@@ -37,6 +37,40 @@ Then use components directly:
 <ui-button variant="primary">Save</ui-button>
 ```
 
+## Standalone Component Imports
+
+If you only want a specific custom element instead of registering the full catalog, import its standalone subpath:
+
+```ts
+import '@editora/ui-core/button';
+import '@editora/ui-core/input';
+import '@editora/ui-core/date-picker';
+```
+
+That registers only those elements and keeps the rest of the catalog out of the import path. The dedicated sortable entry remains:
+
+```ts
+import '@editora/ui-core/sortable';
+```
+
+The standalone wrappers live in `src/standalone` and are checked into the package. The build reads from that folder directly, so there is no generator step in the normal build or publish flow.
+
+## Framework Direct Usage
+
+`@editora/ui-core` can be used directly in Vue, Svelte, and Angular because the package ships standards-based custom elements.
+
+- Vue and Svelte work well directly for attribute/event-driven components, and can also handle richer elements like `ui-sortable` through refs.
+- Angular also works directly, but you should add `CUSTOM_ELEMENTS_SCHEMA` and use `@ViewChild` for array or object-valued properties.
+- Production wrappers are optional DX improvements, not a requirement for using `ui-core`.
+
+Examples:
+
+- Vue direct example: [`examples/ui-core-vue-direct`](/Users/etelligens/Documents/Rich-Text-Editor/examples/ui-core-vue-direct)
+- Svelte direct example: [`examples/ui-core-svelte-direct`](/Users/etelligens/Documents/Rich-Text-Editor/examples/ui-core-svelte-direct)
+- Angular direct example: [`examples/ui-core-angular-direct`](/Users/etelligens/Documents/Rich-Text-Editor/examples/ui-core-angular-direct)
+
+More guidance lives in [`docs/FRAMEWORK_DIRECT_USAGE.md`](/Users/etelligens/Documents/Rich-Text-Editor/packages/ui-core/docs/FRAMEWORK_DIRECT_USAGE.md).
+
 ## What You Get
 
 ### Core utilities
@@ -197,6 +231,7 @@ applyTheme({
 
 ## Docs
 
+- `docs/FRAMEWORK_DIRECT_USAGE.md` for Vue, Svelte, and Angular direct-use guidance
 - `docs/ATTRIBUTE_RENDER_MATRIX.md` for component render strategy coverage
 - `docs/PRIMITIVE_GAP_MATRIX.md` for the missing primitive roadmap
 - `docs/PRIMITIVE_IMPLEMENTATION_PLAN.md` for proposed APIs and rollout order

package/dist/ElementBase-1b301e7f.js

@@ -0,0 +1 @@
+"use strict";class s extends HTMLElement{constructor(){super(),this._isRendering=!1,this._renderRequested=!1,this._renderScheduled=!1,this._hasRendered=!1,this._visibilityGuardApplied=!1,this._lastRenderedContent=null,this.root=this.attachShadow({mode:"open"})}connectedCallback(){if(!this._hasRendered&&!this._visibilityGuardApplied&&(this.style.getPropertyValue("visibility").trim()||(this.style.setProperty("visibility","hidden"),this._visibilityGuardApplied=!0)),!this._hasRendered){this._requestRender();return}this._scheduleRender()}disconnectedCallback(){try{if(typeof this.close=="function")try{this.close()}catch{}if(typeof this._cleanup=="function"){try{this._cleanup()}catch{}this._cleanup=void 0}if(typeof this.__menuCleanup=="function"){try{this.__menuCleanup()}catch{}this.__menuCleanup=null}const e=this._portalEl;if(e&&e.parentElement)try{e.parentElement.removeChild(e)}catch{}}catch{}}attributeChangedCallback(e,t,i){t!==i&&this.isConnected&&(e&&!this.shouldRenderOnAttributeChange(e,t??null,i??null)||this._scheduleRender())}shouldRenderOnAttributeChange(e,t,i){return!0}setContent(e,t){!(t!=null&&t.force)&&this._lastRenderedContent===e||(this.root.innerHTML=e,this._lastRenderedContent=e)}invalidateContentCache(){this._lastRenderedContent=null}requestRender(){this._scheduleRender()}_scheduleRender(){this._renderScheduled||(this._renderScheduled=!0,queueMicrotask(()=>{this._renderScheduled=!1,this._requestRender()}))}_requestRender(){if(this._isRendering){this._renderRequested=!0;return}this._isRendering=!0;try{this.render()}finally{this._isRendering=!1,this._hasRendered||(this._hasRendered=!0,this._visibilityGuardApplied&&(this.style.removeProperty("visibility"),this._visibilityGuardApplied=!1))}this._renderRequested&&(this._renderRequested=!1,this._scheduleRender())}}exports.ElementBase=s;

package/dist/ElementBase-909688f3.mjs

@@ -0,0 +1,79 @@
+class r extends HTMLElement {
+  constructor() {
+    super(), this._isRendering = !1, this._renderRequested = !1, this._renderScheduled = !1, this._hasRendered = !1, this._visibilityGuardApplied = !1, this._lastRenderedContent = null, this.root = this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    if (!this._hasRendered && !this._visibilityGuardApplied && (this.style.getPropertyValue("visibility").trim() || (this.style.setProperty("visibility", "hidden"), this._visibilityGuardApplied = !0)), !this._hasRendered) {
+      this._requestRender();
+      return;
+    }
+    this._scheduleRender();
+  }
+  disconnectedCallback() {
+    try {
+      if (typeof this.close == "function")
+        try {
+          this.close();
+        } catch {
+        }
+      if (typeof this._cleanup == "function") {
+        try {
+          this._cleanup();
+        } catch {
+        }
+        this._cleanup = void 0;
+      }
+      if (typeof this.__menuCleanup == "function") {
+        try {
+          this.__menuCleanup();
+        } catch {
+        }
+        this.__menuCleanup = null;
+      }
+      const e = this._portalEl;
+      if (e && e.parentElement)
+        try {
+          e.parentElement.removeChild(e);
+        } catch {
+        }
+    } catch {
+    }
+  }
+  attributeChangedCallback(e, t, i) {
+    t !== i && this.isConnected && (e && !this.shouldRenderOnAttributeChange(e, t ?? null, i ?? null) || this._scheduleRender());
+  }
+  // Override in components to avoid full shadow rerenders for non-template attributes.
+  shouldRenderOnAttributeChange(e, t, i) {
+    return !0;
+  }
+  setContent(e, t) {
+    !(t != null && t.force) && this._lastRenderedContent === e || (this.root.innerHTML = e, this._lastRenderedContent = e);
+  }
+  invalidateContentCache() {
+    this._lastRenderedContent = null;
+  }
+  requestRender() {
+    this._scheduleRender();
+  }
+  _scheduleRender() {
+    this._renderScheduled || (this._renderScheduled = !0, queueMicrotask(() => {
+      this._renderScheduled = !1, this._requestRender();
+    }));
+  }
+  _requestRender() {
+    if (this._isRendering) {
+      this._renderRequested = !0;
+      return;
+    }
+    this._isRendering = !0;
+    try {
+      this.render();
+    } finally {
+      this._isRendering = !1, this._hasRendered || (this._hasRendered = !0, this._visibilityGuardApplied && (this.style.removeProperty("visibility"), this._visibilityGuardApplied = !1));
+    }
+    this._renderRequested && (this._renderRequested = !1, this._scheduleRender());
+  }
+}
+export {
+  r as E
+};

package/dist/accordion.cjs.js

@@ -0,0 +1,360 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const b=require("./ElementBase-1b301e7f.js"),p=`
+  ui-accordion[data-ui-accordion-root="true"] {
+    display: block;
+    overflow-anchor: none;
+    --ui-accordion-radius: var(--base-card-radius, var(--ui-radius, 4px));
+    --ui-accordion-accent: var(--ui-color-primary, var(--ui-primary, #2563eb));
+    --ui-accordion-border-color: color-mix(in srgb, var(--ui-color-border, rgba(15, 23, 42, 0.16)) 82%, transparent);
+    --ui-accordion-border: 1px solid var(--ui-accordion-border-color);
+    --ui-accordion-divider: color-mix(in srgb, var(--ui-accordion-border-color) 78%, transparent);
+    --ui-accordion-surface-base: var(--base-card-bg, var(--color-panel-solid, var(--ui-color-surface, #ffffff)));
+    --ui-accordion-surface-alt-base: var(--color-surface, var(--ui-color-surface-alt, #f8fafc));
+    --ui-accordion-surface: var(--ui-accordion-surface-base);
+    --ui-accordion-surface-alt: var(--ui-accordion-surface-alt-base);
+    --ui-accordion-hover-surface: color-mix(in srgb, var(--ui-accordion-accent) 6%, var(--ui-accordion-surface-alt));
+    --ui-accordion-open-surface: color-mix(in srgb, var(--ui-accordion-accent) 5%, var(--ui-accordion-surface));
+    --ui-accordion-text: var(--ui-color-text, var(--ui-text, #202020));
+    --ui-accordion-muted: var(--ui-color-muted, var(--ui-muted, #646464));
+    --ui-accordion-focus-ring: var(--ui-color-focus-ring, var(--ui-focus-ring, #2563eb));
+    --ui-accordion-shadow: var(--base-card-shadow, var(--shadow-2, none));
+    --ui-accordion-duration: 190ms;
+    --ui-accordion-easing: cubic-bezier(0.2, 0.8, 0.2, 1);
+    --ui-accordion-padding-x: 16px;
+    --ui-accordion-padding-y: 14px;
+    --ui-accordion-gap: var(--ui-default-gap, 8px);
+    --ui-accordion-title-size: var(--ui-default-font-size, 14px);
+    --ui-accordion-title-line-height: var(--ui-default-line-height, 20px);
+    --ui-accordion-title-weight: 600;
+    --ui-accordion-description-size: 12px;
+    --ui-accordion-description-line-height: 16px;
+    --ui-accordion-panel-size: 14px;
+    --ui-accordion-panel-line-height: 20px;
+    --ui-accordion-badge-radius: 999px;
+    --ui-accordion-indicator-size: 3px;
+    color-scheme: light dark;
+  }
+
+  ui-accordion[data-ui-accordion-root="true"][size="sm"],
+  ui-accordion[data-ui-accordion-root="true"][size="1"] {
+    --ui-accordion-padding-x: 12px;
+    --ui-accordion-padding-y: 10px;
+    --ui-accordion-gap: 6px;
+    --ui-accordion-title-size: 13px;
+    --ui-accordion-title-line-height: 18px;
+    --ui-accordion-description-size: 11px;
+    --ui-accordion-description-line-height: 14px;
+    --ui-accordion-panel-size: 13px;
+    --ui-accordion-panel-line-height: 18px;
+  }
+
+  ui-accordion[data-ui-accordion-root="true"][size="lg"],
+  ui-accordion[data-ui-accordion-root="true"][size="3"] {
+    --ui-accordion-padding-x: 20px;
+    --ui-accordion-padding-y: 18px;
+    --ui-accordion-gap: 10px;
+    --ui-accordion-title-size: 16px;
+    --ui-accordion-title-line-height: 24px;
+    --ui-accordion-description-size: 13px;
+    --ui-accordion-description-line-height: 18px;
+    --ui-accordion-panel-size: 15px;
+    --ui-accordion-panel-line-height: 24px;
+  }
+
+  ui-accordion[data-ui-accordion-root="true"][tone="success"] {
+    --ui-accordion-accent: var(--ui-color-success, #16a34a);
+  }
+
+  ui-accordion[data-ui-accordion-root="true"][tone="warning"] {
+    --ui-accordion-accent: var(--ui-color-warning, #d97706);
+  }
+
+  ui-accordion[data-ui-accordion-root="true"][tone="danger"] {
+    --ui-accordion-accent: var(--ui-color-danger, #dc2626);
+  }
+
+  ui-accordion[data-ui-accordion-root="true"][variant="outline"] {
+    --ui-accordion-shadow: none;
+    --ui-accordion-border-color: color-mix(in srgb, var(--ui-accordion-accent) 18%, var(--ui-color-border, rgba(15, 23, 42, 0.16)));
+    --ui-accordion-open-surface: color-mix(in srgb, var(--ui-accordion-accent) 4%, var(--ui-accordion-surface));
+    --ui-accordion-hover-surface: color-mix(in srgb, var(--ui-accordion-accent) 8%, var(--ui-accordion-surface-alt));
+  }
+
+  ui-accordion[data-ui-accordion-root="true"][variant="soft"] {
+    --ui-accordion-shadow: none;
+    --ui-accordion-surface: color-mix(in srgb, var(--ui-accordion-accent) 4%, var(--ui-accordion-surface-base));
+    --ui-accordion-open-surface: color-mix(in srgb, var(--ui-accordion-accent) 8%, var(--ui-accordion-surface-base));
+    --ui-accordion-hover-surface: color-mix(in srgb, var(--ui-accordion-accent) 10%, var(--ui-accordion-surface-alt-base));
+    --ui-accordion-border-color: color-mix(in srgb, var(--ui-accordion-accent) 12%, var(--ui-color-border, rgba(15, 23, 42, 0.16)));
+  }
+
+  ui-accordion[data-ui-accordion-root="true"][variant="solid"] {
+    --ui-accordion-surface: color-mix(in srgb, var(--ui-accordion-accent) 10%, var(--ui-accordion-surface-base));
+    --ui-accordion-open-surface: color-mix(in srgb, var(--ui-accordion-accent) 16%, var(--ui-accordion-surface-base));
+    --ui-accordion-hover-surface: color-mix(in srgb, var(--ui-accordion-accent) 13%, var(--ui-accordion-surface-alt-base));
+    --ui-accordion-border-color: color-mix(in srgb, var(--ui-accordion-accent) 22%, var(--ui-color-border, rgba(15, 23, 42, 0.16)));
+    --ui-accordion-shadow: 0 1px 3px rgba(15, 23, 42, 0.05), 0 18px 36px color-mix(in srgb, var(--ui-accordion-accent) 10%, rgba(15, 23, 42, 0.08));
+  }
+
+  ui-accordion[data-ui-accordion-root="true"][variant="ghost"] {
+    --ui-accordion-surface: transparent;
+    --ui-accordion-surface-alt: transparent;
+    --ui-accordion-open-surface: color-mix(in srgb, var(--ui-accordion-accent) 8%, transparent);
+    --ui-accordion-hover-surface: color-mix(in srgb, var(--ui-accordion-accent) 10%, transparent);
+    --ui-accordion-shadow: none;
+    --ui-accordion-border-color: color-mix(in srgb, var(--ui-accordion-accent) 12%, transparent);
+  }
+
+  ui-accordion[data-ui-accordion-root="true"][variant="glass"] {
+    --ui-accordion-surface: 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-accordion-shadow: var(--base-panel-shadow, var(--shadow-4, none));
+  }
+
+  ui-accordion[data-ui-accordion-root="true"][elevation="none"] {
+    --ui-accordion-shadow: none;
+  }
+
+  ui-accordion[data-ui-accordion-root="true"][elevation="low"] {
+    --ui-accordion-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 10px 22px rgba(15, 23, 42, 0.09);
+  }
+
+  ui-accordion[data-ui-accordion-root="true"][elevation="high"] {
+    --ui-accordion-shadow: 0 2px 10px rgba(15, 23, 42, 0.08), 0 30px 58px rgba(15, 23, 42, 0.16);
+  }
+
+  ui-accordion[data-ui-accordion-root="true"] > [data-ui-accordion-item] {
+    margin: 0;
+    position: relative;
+    background: var(--ui-accordion-surface);
+    color: var(--ui-accordion-text);
+    border-inline: var(--ui-accordion-border);
+    overflow: clip;
+    transition: background var(--ui-accordion-duration) var(--ui-accordion-easing);
+  }
+
+  ui-accordion[data-ui-accordion-root="true"] > [data-ui-accordion-item]:first-of-type {
+    border-block-start: var(--ui-accordion-border);
+    border-start-start-radius: var(--ui-accordion-radius);
+    border-start-end-radius: var(--ui-accordion-radius);
+  }
+
+  ui-accordion[data-ui-accordion-root="true"] > [data-ui-accordion-item]:last-of-type {
+    border-block-end: var(--ui-accordion-border);
+    border-end-start-radius: var(--ui-accordion-radius);
+    border-end-end-radius: var(--ui-accordion-radius);
+  }
+
+  ui-accordion[data-ui-accordion-root="true"] > [data-ui-accordion-item] + [data-ui-accordion-item] {
+    border-block-start: 1px solid var(--ui-accordion-divider);
+  }
+
+  ui-accordion[data-ui-accordion-root="true"] > [data-ui-accordion-item]::before {
+    content: '';
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 0;
+    inline-size: 0;
+    background: linear-gradient(180deg, var(--ui-accordion-accent) 0%, color-mix(in srgb, var(--ui-accordion-accent) 70%, #0f172a 30%) 100%);
+    transition: inline-size var(--ui-accordion-duration) var(--ui-accordion-easing);
+    pointer-events: none;
+  }
+
+  ui-accordion[data-ui-accordion-root="true"] > [data-ui-accordion-item][open] {
+    background: var(--ui-accordion-open-surface);
+  }
+
+  ui-accordion[data-ui-accordion-root="true"] > [data-ui-accordion-item][open]::before {
+    inline-size: var(--ui-accordion-indicator-size);
+  }
+
+  ui-accordion[data-ui-accordion-root="true"][indicator="none"] > [data-ui-accordion-item]::before {
+    display: none;
+  }
+
+  ui-accordion[data-ui-accordion-root="true"] > [data-ui-accordion-item][data-disabled="true"] {
+    opacity: 0.62;
+  }
+
+  ui-accordion[data-ui-accordion-root="true"] [data-ui-accordion-trigger] {
+    inline-size: 100%;
+    border: none;
+    background: transparent;
+    color: inherit;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--ui-accordion-gap);
+    font: inherit;
+    font-size: var(--ui-accordion-title-size);
+    font-weight: var(--ui-accordion-title-weight);
+    letter-spacing: var(--ui-default-letter-spacing, 0em);
+    line-height: var(--ui-accordion-title-line-height);
+    padding: var(--ui-accordion-padding-y) var(--ui-accordion-padding-x);
+    cursor: pointer;
+    text-align: left;
+    transition: background var(--ui-accordion-duration) var(--ui-accordion-easing), color var(--ui-accordion-duration) var(--ui-accordion-easing);
+  }
+
+  ui-accordion[data-ui-accordion-root="true"] [data-ui-accordion-trigger]:not([disabled]):hover {
+    background: var(--ui-accordion-hover-surface);
+  }
+
+  ui-accordion[data-ui-accordion-root="true"] > [data-ui-accordion-item][open] [data-ui-accordion-trigger] {
+    color: color-mix(in srgb, var(--ui-accordion-text) 82%, var(--ui-accordion-accent) 18%);
+  }
+
+  ui-accordion[data-ui-accordion-root="true"] [data-ui-accordion-trigger]:focus-visible {
+    outline: 2px solid var(--ui-accordion-focus-ring);
+    outline-offset: -2px;
+    position: relative;
+    z-index: 1;
+  }
+
+  ui-accordion[data-ui-accordion-root="true"] [data-ui-accordion-trigger][disabled] {
+    opacity: 0.56;
+    cursor: not-allowed;
+  }
+
+  ui-accordion[data-ui-accordion-root="true"] [data-ui-accordion-item-body] {
+    flex: 1;
+    min-inline-size: 0;
+    display: grid;
+    gap: 2px;
+  }
+
+  ui-accordion[data-ui-accordion-root="true"] [data-ui-accordion-trailing] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 8px;
+    flex: 0 0 auto;
+    min-inline-size: 0;
+  }
+
+  ui-accordion[data-ui-accordion-root="true"] [data-ui-accordion-generated-badge] {
+    border-radius: var(--ui-accordion-badge-radius);
+    padding: 3px 8px;
+    font-size: 10px;
+    font-weight: 700;
+    letter-spacing: 0.02em;
+    text-transform: uppercase;
+    line-height: 1.2;
+    background: color-mix(in srgb, var(--ui-accordion-accent) 14%, transparent);
+    color: color-mix(in srgb, var(--ui-accordion-accent) 84%, var(--ui-accordion-text) 16%);
+  }
+
+  ui-accordion[data-ui-accordion-root="true"] [data-ui-accordion-chevron] {
+    inline-size: 18px;
+    block-size: 18px;
+    min-inline-size: 18px;
+    color: var(--ui-accordion-muted);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    pointer-events: none;
+    transition: transform var(--ui-accordion-duration) var(--ui-accordion-easing), color var(--ui-accordion-duration) var(--ui-accordion-easing);
+  }
+
+  ui-accordion[data-ui-accordion-root="true"] > [data-ui-accordion-item][open] [data-ui-accordion-chevron] {
+    transform: rotate(180deg);
+    color: var(--ui-accordion-accent);
+  }
+
+  ui-accordion[data-ui-accordion-root="true"] [data-ui-accordion-generated-description] {
+    display: block;
+    padding: 0 var(--ui-accordion-padding-x) 10px;
+    font-size: var(--ui-accordion-description-size);
+    line-height: var(--ui-accordion-description-line-height);
+    color: color-mix(in srgb, var(--ui-accordion-text) 62%, var(--ui-accordion-muted) 38%);
+  }
+
+  ui-accordion[data-ui-accordion-root="true"] [data-ui-accordion-generated-description][hidden] {
+    display: none;
+  }
+
+  ui-accordion[data-ui-accordion-root="true"] [data-ui-accordion-panel] {
+    max-height: 0;
+    overflow: hidden;
+    opacity: 0;
+    font-size: var(--ui-accordion-panel-size);
+    line-height: var(--ui-accordion-panel-line-height);
+    color: color-mix(in srgb, var(--ui-accordion-text) 88%, var(--ui-accordion-muted) 12%);
+    padding: 0 var(--ui-accordion-padding-x);
+    border-top: 1px solid transparent;
+    transform: translateY(-4px);
+    transition:
+      max-height var(--ui-accordion-duration) var(--ui-accordion-easing),
+      opacity var(--ui-accordion-duration) var(--ui-accordion-easing),
+      transform var(--ui-accordion-duration) var(--ui-accordion-easing),
+      padding var(--ui-accordion-duration) var(--ui-accordion-easing),
+      border-color var(--ui-accordion-duration) var(--ui-accordion-easing);
+    will-change: max-height;
+  }
+
+  ui-accordion[data-ui-accordion-root="true"] > [data-ui-accordion-item][open] [data-ui-accordion-panel] {
+    max-height: var(--ui-accordion-panel-height, 0px);
+    opacity: 1;
+    transform: translateY(0);
+    padding: 0 var(--ui-accordion-padding-x) 14px;
+    border-top-color: color-mix(in srgb, var(--ui-accordion-accent) 24%, transparent);
+  }
+
+  ui-accordion[data-ui-accordion-root="true"] [data-ui-accordion-panel] > :first-child {
+    margin-top: 12px;
+  }
+
+  ui-accordion[data-ui-accordion-root="true"] [data-ui-accordion-panel] > :last-child {
+    margin-bottom: 0;
+  }
+
+  @media (max-width: 720px) {
+    ui-accordion[data-ui-accordion-root="true"] {
+      --ui-accordion-padding-x: 12px;
+      --ui-accordion-padding-y: 12px;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    ui-accordion[data-ui-accordion-root="true"] > [data-ui-accordion-item],
+    ui-accordion[data-ui-accordion-root="true"] [data-ui-accordion-trigger],
+    ui-accordion[data-ui-accordion-root="true"] [data-ui-accordion-chevron],
+    ui-accordion[data-ui-accordion-root="true"] [data-ui-accordion-panel] {
+      transition: none !important;
+    }
+  }
+
+  @media (prefers-contrast: more) {
+    ui-accordion[data-ui-accordion-root="true"] {
+      --ui-accordion-border: 2px solid var(--ui-color-border, currentColor);
+      --ui-accordion-divider: currentColor;
+      --ui-accordion-focus-ring: currentColor;
+      --ui-accordion-shadow: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    ui-accordion[data-ui-accordion-root="true"] {
+      --ui-accordion-surface: Canvas;
+      --ui-accordion-surface-alt: Canvas;
+      --ui-accordion-text: CanvasText;
+      --ui-accordion-muted: CanvasText;
+      --ui-accordion-accent: Highlight;
+      --ui-accordion-border: 1px solid CanvasText;
+      --ui-accordion-divider: CanvasText;
+      --ui-accordion-focus-ring: Highlight;
+      --ui-accordion-shadow: none;
+    }
+
+    ui-accordion[data-ui-accordion-root="true"] > [data-ui-accordion-item][open] [data-ui-accordion-trigger] {
+      background: Highlight;
+      color: HighlightText;
+    }
+
+    ui-accordion[data-ui-accordion-root="true"] > [data-ui-accordion-item][open] [data-ui-accordion-chevron] {
+      color: HighlightText;
+    }
+  }
+`;function u(c){const i=Number(c);if(!Number.isFinite(i))return-1;const r=Math.trunc(i);return r>=0?r:-1}function m(c,i){if(c==null)return i;const r=c.toLowerCase();return r!=="false"&&r!=="0"&&r!=="no"}function v(c,i){if(!c)return[];if(!i){const o=u(c);return o>=0?[o]:[]}try{const o=JSON.parse(c);if(Array.isArray(o))return o.map(u).filter(e=>e>=0)}catch{}const r=u(c);return r>=0?[r]:[]}function h(c,i){return i?JSON.stringify(c):String(c[0]??-1)}function x(c,i="var(--base-card-radius, var(--ui-radius, 4px))"){if(!c||!c.trim())return i;const r=c.trim().toLowerCase();return r==="full"||r==="pill"?"999px":r==="square"||r==="none"?"0px":/^-?\d+(\.\d+)?$/.test(r)?`${r}px`:c.trim()}function y(c){return c instanceof HTMLElement&&c.hasAttribute("data-ui-accordion-item")}class g extends b.ElementBase{constructor(){super(),this._uid=`ui-accordion-${Math.random().toString(36).slice(2,8)}`,this._observer=null,this._panelResizeObserver=null,this._heightSyncRaf=0,this._syncingOpenAttr=!1,this._syncingDom=!1,this._syncingDomResetTimer=null,this._onClick=this._onClick.bind(this),this._onKeyDown=this._onKeyDown.bind(this),this._onMutations=this._onMutations.bind(this)}static get observedAttributes(){return["open","multiple","collapsible","headless","shape","elevation","variant","size","tone","radius","indicator"]}connectedCallback(){super.connectedCallback(),this.setAttribute("data-ui-accordion-root","true"),this._syncHostStyles(),this.addEventListener("click",this._onClick),this.addEventListener("keydown",this._onKeyDown),this._observer=new MutationObserver(this._onMutations),this._observer.observe(this,{childList:!0,subtree:!0,characterData:!0,attributes:!0}),typeof ResizeObserver<"u"&&(this._panelResizeObserver=new ResizeObserver(()=>{this._syncPanelHeights()}))}disconnectedCallback(){this.removeEventListener("click",this._onClick),this.removeEventListener("keydown",this._onKeyDown),this._observer&&(this._observer.disconnect(),this._observer=null),this._panelResizeObserver&&(this._panelResizeObserver.disconnect(),this._panelResizeObserver=null),this._heightSyncRaf&&(cancelAnimationFrame(this._heightSyncRaf),this._heightSyncRaf=0),this._syncingDomResetTimer!=null&&(clearTimeout(this._syncingDomResetTimer),this._syncingDomResetTimer=null),super.disconnectedCallback()}attributeChangedCallback(i,r,o){if(r!==o){if(i==="radius"||i==="shape"){this._syncHostStyles();return}if(this.isConnected){if(i==="open"){this._applyOpenState();return}this.requestRender()}}}get multiple(){return this.hasAttribute("multiple")}set multiple(i){i!==this.multiple&&(i?this.setAttribute("multiple",""):this.removeAttribute("multiple"))}get collapsible(){return m(this.getAttribute("collapsible"),!0)}set collapsible(i){this.setAttribute("collapsible",String(!!i))}get open(){const i=this._normalizeOpen(this._sourceItems());return this.multiple?i:i[0]??-1}set open(i){const r=Array.isArray(i)?i:[i];this._commitOpen(r.map(u).filter(o=>o>=0),!1)}_sourceItems(){return Array.from(this.children).filter(y).map((r,o)=>{const e=Array.from(r.children),t=e.find(n=>n.hasAttribute("data-ui-accordion-trigger"))||null,a=e.find(n=>n.hasAttribute("data-ui-accordion-panel"))||null;return{index:o,itemNode:r,trigger:t,panel:a,disabled:r.hasAttribute("disabled")||(t==null?void 0:t.hasAttribute("disabled"))||!1,description:r.getAttribute("description")||r.getAttribute("data-description")||"",badge:r.getAttribute("badge")||r.getAttribute("data-badge")||""}})}_normalizeOpen(i){const r=v(this.getAttribute("open"),this.multiple),o=Array.from(new Set(r.map(u).filter(t=>{var a;return t>=0&&t<i.length&&!((a=i[t])!=null&&a.disabled)}))).sort((t,a)=>t-a),e=i.findIndex(t=>!t.disabled);return this.multiple?this.collapsible||i.length===0||o.length>0?o:e>=0?[e]:[]:o.length>0?[o[0]]:this.collapsible||i.length===0?[]:e>=0?[e]:[]}_normalizeNext(i,r){const o=Array.from(new Set(i.map(u).filter(t=>{var a;return t>=0&&t<r.length&&!((a=r[t])!=null&&a.disabled)}))).sort((t,a)=>t-a),e=r.findIndex(t=>!t.disabled);return this.multiple?this.collapsible||r.length===0||o.length>0?o:e>=0?[e]:[]:o.length>0?[o[0]]:this.collapsible||r.length===0?[]:e>=0?[e]:[]}_commitOpen(i,r){const o=this._sourceItems(),e=this._normalizeNext(i,o),t=h(e,this.multiple),a=this.getAttribute("open")??(this.multiple?"[]":"-1");if(t!==a&&(this._syncingOpenAttr=!0,this.setAttribute("open",t),this._syncingOpenAttr=!1,this._applyOpenState()),!r)return;const n=this.multiple?e:e[0]??-1;this.dispatchEvent(new CustomEvent("toggle",{detail:{open:n},bubbles:!0})),this.dispatchEvent(new CustomEvent("change",{detail:{open:n},bubbles:!0}))}_ensureStyleNode(){let i=this.querySelector(":scope > style[data-ui-accordion-style]");if(!i){i=document.createElement("style"),i.setAttribute("data-ui-accordion-style",""),i.textContent=p,this.prepend(i);return}i.textContent!==p&&(i.textContent=p)}_markSyncingDom(){this._syncingDom=!0,this._syncingDomResetTimer!=null&&clearTimeout(this._syncingDomResetTimer),this._syncingDomResetTimer=window.setTimeout(()=>{this._syncingDom=!1,this._syncingDomResetTimer=null},0)}_syncHostStyles(){const i=this.getAttribute("radius"),r=this.getAttribute("shape");if(i&&i.trim()){this.style.setProperty("--ui-accordion-radius",x(i));return}if(r==="square"){this.style.setProperty("--ui-accordion-radius","4px");return}if(r==="pill"){this.style.setProperty("--ui-accordion-radius","999px");return}this.style.removeProperty("--ui-accordion-radius")}_ensureGeneratedNodes(i){const{trigger:r,itemNode:o,description:e,badge:t}=i;if(!r)return;let a=r.querySelector("[data-ui-accordion-trailing]");a||(a=document.createElement("span"),a.setAttribute("data-ui-accordion-trailing",""),r.appendChild(a));let n=a.querySelector("[data-ui-accordion-generated-badge]");t?(n||(n=document.createElement("span"),n.setAttribute("data-ui-accordion-generated-badge",""),a.appendChild(n)),n.textContent=t):n&&n.remove();let d=a.querySelector("[data-ui-accordion-chevron]");d||(d=document.createElement("span"),d.setAttribute("data-ui-accordion-chevron",""),d.setAttribute("aria-hidden","true"),d.innerHTML=`
+        <svg width="16" height="16" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M5 7.5 10 12.5 15 7.5"></path>
+        </svg>
+      `,a.appendChild(d));let s=o.querySelector(":scope > [data-ui-accordion-generated-description]");if(e){if(!s){s=document.createElement("div"),s.setAttribute("data-ui-accordion-generated-description","");const l=i.panel;l?o.insertBefore(s,l):o.appendChild(s)}s.textContent=e,s.hidden=!1}else s&&(s.hidden=!0)}_applyOpenState(){this._markSyncingDom();const i=this._sourceItems(),r=this._normalizeOpen(i),o=h(r,this.multiple),e=this.getAttribute("open")??(this.multiple?"[]":"-1");o!==e&&!this._syncingOpenAttr&&(this._syncingOpenAttr=!0,this.setAttribute("open",o),this._syncingOpenAttr=!1);const t=new Set(r);i.forEach(a=>{const{itemNode:n,trigger:d,panel:s}=a,l=t.has(a.index);if(n.setAttribute("data-disabled",a.disabled?"true":"false"),l?n.setAttribute("open",""):n.removeAttribute("open"),d&&(d.setAttribute("aria-expanded",l?"true":"false"),d.disabled=a.disabled),s){const f=l?32:0;s.style.setProperty("--ui-accordion-panel-height",`${s.scrollHeight+f}px`),s.setAttribute("aria-hidden",l?"false":"true")}}),this._queuePanelHeightSync()}_observePanels(i){this._panelResizeObserver&&(this._panelResizeObserver.disconnect(),i.forEach(r=>{var o;r.panel&&((o=this._panelResizeObserver)==null||o.observe(r.panel))}))}_syncPanelHeights(){this._sourceItems().forEach(i=>{if(!i.panel)return;const o=i.itemNode.hasAttribute("open")?32:0;i.panel.style.setProperty("--ui-accordion-panel-height",`${i.panel.scrollHeight+o}px`)})}_queuePanelHeightSync(){this._heightSyncRaf&&cancelAnimationFrame(this._heightSyncRaf),this._heightSyncRaf=requestAnimationFrame(()=>{this._syncPanelHeights(),this._heightSyncRaf=requestAnimationFrame(()=>{this._syncPanelHeights(),this._heightSyncRaf=0})})}_syncLightDom(){if(this.hasAttribute("headless"))return;const i=this._sourceItems();this._markSyncingDom(),this.setAttribute("data-ui-accordion-root","true"),this._syncHostStyles(),this._ensureStyleNode(),i.forEach(r=>{const{itemNode:o,trigger:e,panel:t,index:a,disabled:n}=r;if(o.setAttribute("data-disabled",n?"true":"false"),e){const d=`${this._uid}-trigger-${a}`,s=`${this._uid}-panel-${a}`;e.id||(e.id=d),e.setAttribute("type","button"),e.setAttribute("aria-controls",s),e.setAttribute("data-index",String(a)),n?e.setAttribute("disabled",""):e.removeAttribute("disabled"),this._ensureGeneratedNodes(r)}if(t){const d=`${this._uid}-panel-${a}`;t.id=d,t.setAttribute("role","region"),e&&t.setAttribute("aria-labelledby",e.id)}}),this._observePanels(i),this._applyOpenState()}_onMutations(i){this._syncingDom||!i.some(o=>{if(o.target===this&&o.type==="attributes"){const e=o.attributeName||"";return!["open","multiple","collapsible","headless","shape","elevation","variant","size","tone","radius","indicator","data-ui-accordion-root","style"].includes(e)}return!(o.target instanceof HTMLStyleElement&&o.target.hasAttribute("data-ui-accordion-style"))})||this.requestRender()}_toggleIndex(i){const r=this._sourceItems();if(i<0||i>=r.length||r[i].disabled)return;const o=this._normalizeOpen(r),e=o.includes(i);let t=[...o];this.multiple?e?t=o.filter(a=>a!==i):t.push(i):t=e?[]:[i],this._commitOpen(t,!0)}_onClick(i){const o=i.target.closest("[data-ui-accordion-trigger]");if(!o||o.disabled||!this.contains(o))return;const e=u(o.getAttribute("data-index"));this._toggleIndex(e)}_onKeyDown(i){var n;const o=i.target.closest("[data-ui-accordion-trigger]");if(!o||!this.contains(o))return;const e=this._sourceItems().map(d=>d.trigger).filter(d=>!!d&&!d.disabled),t=e.indexOf(o);if(t<0)return;if(i.key==="Enter"||i.key===" "){i.preventDefault();const d=u(o.getAttribute("data-index"));this._toggleIndex(d);return}if(!["ArrowDown","ArrowUp","Home","End"].includes(i.key))return;let a=t;i.key==="ArrowDown"&&(a=(t+1)%e.length),i.key==="ArrowUp"&&(a=(t-1+e.length)%e.length),i.key==="Home"&&(a=0),i.key==="End"&&(a=e.length-1),i.preventDefault(),(n=e[a])==null||n.focus({preventScroll:!0})}render(){this.setContent("<slot></slot>"),this.hasAttribute("headless")||this._syncLightDom()}}typeof customElements<"u"&&!customElements.get("ui-accordion")&&customElements.define("ui-accordion",g);exports.UIAccordion=g;