@editora/ui-core 0.1.8 → 0.1.10

package/dist/tabs.cjs.js

@@ -0,0 +1,515 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const m=require("./ElementBase-1b301e7f.js"),u=require("./roving-focus-group-5c059bf9.js"),y=`
+  :host {
+    --ui-tabs-nav-bg: var(--ui-color-surface, #ffffff);
+    --ui-tabs-panel-bg: var(--ui-color-surface, #ffffff);
+    --ui-tabs-border: var(--ui-color-border, #cbd5e1);
+    --ui-tabs-text: var(--ui-color-text, #0f172a);
+    --ui-tabs-muted: var(--ui-color-muted, #64748b);
+    --ui-tabs-accent: var(--ui-tabs-active-bg, var(--ui-color-primary, #2563eb));
+    --ui-tabs-active-text: color-mix(in srgb, var(--ui-tabs-accent) 82%, #0f172a 18%);
+    --ui-tabs-focus: var(--ui-color-focus-ring, #2563eb);
+    --ui-tabs-indicator-bg: color-mix(in srgb, var(--ui-tabs-accent) 16%, transparent);
+    --ui-tabs-indicator-border: color-mix(in srgb, var(--ui-tabs-accent) 32%, transparent);
+    --ui-tabs-indicator-shadow: none;
+    --ui-tabs-indicator-transition: 220ms cubic-bezier(0.2, 0.9, 0.2, 1);
+
+    --ui-tabs-shell-gap: 12px;
+    --ui-tabs-nav-padding: 8px;
+    --ui-tabs-nav-gap: 8px;
+    --ui-tabs-tab-radius: 10px;
+    --ui-tabs-tab-min-h: 38px;
+    --ui-tabs-tab-pad-x: 14px;
+    --ui-tabs-tab-font-size: 13px;
+    --ui-tabs-radius: 12px;
+    --ui-tabs-panel-padding: 14px;
+
+    --ui-tabs-shadow: none;
+    --ui-tabs-elevation: none;
+    --ui-tabs-transition: 170ms cubic-bezier(0.22, 0.8, 0.2, 1);
+
+    color-scheme: light dark;
+    display: block;
+    min-inline-size: 0;
+    font-family: "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  }
+
+  .shell {
+    min-inline-size: 0;
+    display: grid;
+    gap: var(--ui-tabs-shell-gap);
+    color: var(--ui-tabs-text);
+  }
+
+  .nav {
+    min-inline-size: 0;
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+    gap: var(--ui-tabs-nav-gap);
+    padding: var(--ui-tabs-nav-padding);
+    border: 1px solid var(--ui-tabs-border);
+    border-radius: var(--ui-tabs-radius);
+    background: var(--ui-tabs-nav-bg);
+    box-shadow: var(--ui-tabs-elevation);
+    position: relative;
+    isolation: isolate;
+    overflow-x: auto;
+    scrollbar-width: thin;
+    overscroll-behavior-x: contain;
+  }
+
+  .nav::-webkit-scrollbar {
+    block-size: 6px;
+  }
+
+  .nav::-webkit-scrollbar-thumb {
+    background: color-mix(in srgb, var(--ui-tabs-border) 70%, transparent);
+    border-radius: 999px;
+  }
+
+  .tab {
+    border: 1px solid transparent;
+    background: transparent;
+    color: var(--ui-tabs-muted);
+    border-radius: var(--ui-tabs-tab-radius);
+    min-block-size: var(--ui-tabs-tab-min-h);
+    padding-inline: var(--ui-tabs-tab-pad-x);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    font: 600 var(--ui-tabs-tab-font-size)/1.25 "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    letter-spacing: 0.005em;
+    cursor: pointer;
+    white-space: nowrap;
+    flex: 0 0 auto;
+    position: relative;
+    z-index: 1;
+    transition:
+      background-color var(--ui-tabs-transition),
+      border-color var(--ui-tabs-transition),
+      color var(--ui-tabs-transition),
+      box-shadow var(--ui-tabs-transition),
+      transform var(--ui-tabs-transition);
+  }
+
+  .tab:hover {
+    background: color-mix(in srgb, var(--ui-tabs-accent) 10%, transparent);
+    color: color-mix(in srgb, var(--ui-tabs-accent) 82%, #0f172a 18%);
+  }
+
+  .tab[aria-selected="true"] {
+    color: var(--ui-tabs-active-text);
+    background: color-mix(in srgb, var(--ui-tabs-accent) 14%, transparent);
+    border-color: color-mix(in srgb, var(--ui-tabs-accent) 34%, transparent);
+  }
+
+  .tab:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-tabs-focus) 28%, transparent);
+  }
+
+  .tab:active {
+    transform: translateY(0.5px);
+  }
+
+  .tab[disabled] {
+    opacity: 0.48;
+    cursor: not-allowed;
+    transform: none;
+  }
+
+  .tab[disabled]:hover {
+    background: transparent;
+    color: var(--ui-tabs-muted);
+  }
+
+  .tab-icon {
+    font-size: 13px;
+    line-height: 1;
+  }
+
+  .indicator {
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+    inline-size: var(--ui-tabs-indicator-w, 0px);
+    block-size: var(--ui-tabs-indicator-h, 0px);
+    transform: translate(var(--ui-tabs-indicator-x, 0px), var(--ui-tabs-indicator-y, 0px));
+    border-radius: max(4px, calc(var(--ui-tabs-tab-radius) - 2px));
+    background: var(--ui-tabs-indicator-bg);
+    border: 1px solid var(--ui-tabs-indicator-border);
+    box-shadow: var(--ui-tabs-indicator-shadow);
+    opacity: 0;
+    pointer-events: none;
+    z-index: 0;
+    transition:
+      transform var(--ui-tabs-indicator-transition),
+      inline-size var(--ui-tabs-indicator-transition),
+      block-size var(--ui-tabs-indicator-transition),
+      opacity 120ms ease;
+  }
+
+  :host([variant="indicator"]) .tab[aria-selected="true"],
+  :host([variant="indicator-line"]) .tab[aria-selected="true"] {
+    background: transparent;
+    border-color: transparent;
+    color: var(--ui-tabs-active-text);
+  }
+
+  :host([variant="indicator"]) .tab:hover,
+  :host([variant="indicator-line"]) .tab:hover {
+    background: transparent;
+  }
+
+  :host([variant="indicator"]) .nav[data-indicator-ready="true"] .indicator,
+  :host([variant="indicator-line"]) .nav[data-indicator-ready="true"] .indicator {
+    opacity: 1;
+  }
+
+  :host([variant="indicator-line"]) .indicator {
+    background: var(--ui-tabs-accent);
+    border: none;
+    box-shadow: none;
+    border-radius: 999px;
+  }
+
+  .panel-wrap {
+    min-inline-size: 0;
+    border: 1px solid var(--ui-tabs-border);
+    border-radius: var(--ui-tabs-radius);
+    background: var(--ui-tabs-panel-bg);
+    box-shadow: var(--ui-tabs-elevation);
+    padding: var(--ui-tabs-panel-padding);
+  }
+
+  .panel-wrap[hidden] {
+    display: none;
+  }
+
+  .source-tabs {
+    display: none;
+  }
+
+  :host([orientation="vertical"]) .shell {
+    grid-template-columns: minmax(200px, 280px) minmax(0, 1fr);
+    align-items: start;
+  }
+
+  :host([orientation="vertical"]) .nav {
+    flex-direction: column;
+    overflow-x: visible;
+    overflow-y: auto;
+    max-block-size: min(70vh, 520px);
+  }
+
+  :host([orientation="vertical"][stretched]) .tab {
+    inline-size: 100%;
+    justify-content: flex-start;
+  }
+
+  :host([stretched]:not([orientation="vertical"])) .tab {
+    flex: 1;
+  }
+
+  :host([size="sm"]) {
+    --ui-tabs-nav-padding: 6px;
+    --ui-tabs-nav-gap: 6px;
+    --ui-tabs-tab-min-h: 32px;
+    --ui-tabs-tab-pad-x: 11px;
+    --ui-tabs-tab-font-size: 12px;
+    --ui-tabs-tab-radius: 8px;
+    --ui-tabs-radius: 10px;
+    --ui-tabs-panel-padding: 10px;
+  }
+
+  :host([size="lg"]) {
+    --ui-tabs-nav-padding: 10px;
+    --ui-tabs-nav-gap: 10px;
+    --ui-tabs-tab-min-h: 42px;
+    --ui-tabs-tab-pad-x: 16px;
+    --ui-tabs-tab-font-size: 14px;
+    --ui-tabs-tab-radius: 12px;
+    --ui-tabs-radius: 14px;
+    --ui-tabs-panel-padding: 16px;
+  }
+
+  :host([density="compact"]) {
+    --ui-tabs-shell-gap: 8px;
+    --ui-tabs-nav-padding: 4px;
+    --ui-tabs-nav-gap: 4px;
+    --ui-tabs-tab-min-h: 30px;
+    --ui-tabs-tab-pad-x: 10px;
+    --ui-tabs-tab-font-size: 12px;
+    --ui-tabs-panel-padding: 10px;
+  }
+
+  :host([density="comfortable"]) {
+    --ui-tabs-shell-gap: 14px;
+    --ui-tabs-nav-padding: 10px;
+    --ui-tabs-nav-gap: 10px;
+    --ui-tabs-tab-min-h: 42px;
+    --ui-tabs-tab-pad-x: 16px;
+    --ui-tabs-tab-font-size: 14px;
+    --ui-tabs-panel-padding: 16px;
+  }
+
+  :host([shape="square"]) {
+    --ui-tabs-tab-radius: 6px;
+    --ui-tabs-radius: 8px;
+  }
+
+  :host([shape="rounded"]) {
+    --ui-tabs-tab-radius: 8px;
+    --ui-tabs-radius: 10px;
+  }
+
+  :host([shape="pill"]) {
+    --ui-tabs-tab-radius: 999px;
+  }
+
+  :host([elevation="none"]) {
+    --ui-tabs-elevation: none;
+  }
+
+  :host([elevation="high"]) {
+    --ui-tabs-elevation: 0 2px 4px rgba(15, 23, 42, 0.1), 0 18px 36px rgba(15, 23, 42, 0.14);
+  }
+
+  :host([variant="soft"]) {
+    --ui-tabs-nav-bg: color-mix(in srgb, var(--ui-tabs-accent) 8%, var(--ui-color-surface, #ffffff));
+    --ui-tabs-panel-bg: color-mix(in srgb, var(--ui-tabs-accent) 4%, var(--ui-color-surface, #ffffff));
+    --ui-tabs-border: color-mix(in srgb, var(--ui-tabs-accent) 22%, var(--ui-color-border, #cbd5e1));
+  }
+
+  :host([variant="outline"]) {
+    --ui-tabs-nav-bg: transparent;
+    --ui-tabs-panel-bg: var(--ui-color-surface, #ffffff);
+    --ui-tabs-border: color-mix(in srgb, var(--ui-tabs-accent) 42%, var(--ui-color-border, #cbd5e1));
+    --ui-tabs-elevation: none;
+  }
+
+  :host([variant="outline"]) .tab[aria-selected="true"] {
+    background: color-mix(in srgb, var(--ui-tabs-accent) 12%, transparent);
+    border-color: color-mix(in srgb, var(--ui-tabs-accent) 56%, var(--ui-tabs-border));
+  }
+
+  :host([variant="solid"]) {
+    --ui-tabs-nav-bg: var(--ui-tabs-accent);
+    --ui-tabs-panel-bg: var(--ui-color-surface, #ffffff);
+    --ui-tabs-border: color-mix(in srgb, var(--ui-tabs-accent) 76%, #0f172a 24%);
+    --ui-tabs-muted: color-mix(in srgb, var(--ui-color-primary-foreground, #ffffff) 80%, transparent);
+    --ui-tabs-active-text: color-mix(in srgb, var(--ui-tabs-accent) 78%, #0f172a 22%);
+    --ui-tabs-focus: color-mix(in srgb, var(--ui-color-primary-foreground, #ffffff) 72%, var(--ui-tabs-accent));
+  }
+
+  :host([variant="solid"]) .tab:hover {
+    background: color-mix(in srgb, var(--ui-color-primary-foreground, #ffffff) 14%, transparent);
+    color: var(--ui-color-primary-foreground, #ffffff);
+  }
+
+  :host([variant="solid"]) .tab[aria-selected="true"] {
+    background: var(--ui-color-primary-foreground, #ffffff);
+    border-color: color-mix(in srgb, var(--ui-tabs-accent) 44%, var(--ui-tabs-border));
+    color: var(--ui-tabs-active-text);
+  }
+
+  :host([variant="ghost"]) .nav,
+  :host([variant="ghost"]) .panel-wrap {
+    border-color: transparent;
+    box-shadow: none;
+    background: transparent;
+  }
+
+  :host([variant="ghost"]) .nav {
+    padding-inline: 0;
+  }
+
+  :host([variant="ghost"]) .tab {
+    border-color: transparent;
+  }
+
+  :host([variant="ghost"]) .tab[aria-selected="true"] {
+    background: color-mix(in srgb, var(--ui-tabs-accent) 14%, transparent);
+    border-color: transparent;
+  }
+
+  :host([variant="glass"]) .nav,
+  :host([variant="glass"]) .panel-wrap {
+    background: color-mix(in srgb, var(--ui-color-surface, #ffffff) 72%, transparent);
+    border-color: color-mix(in srgb, var(--ui-tabs-border) 70%, transparent);
+    -webkit-backdrop-filter: blur(10px);
+    backdrop-filter: blur(10px);
+  }
+
+  :host([variant="underline"]) .nav,
+  :host([variant="line"]) .nav {
+    border-radius: 0;
+    border-top: 0;
+    border-left: 0;
+    border-right: 0;
+    box-shadow: none;
+    padding-inline: 0;
+    background: transparent;
+  }
+
+  :host([variant="underline"]) .tab,
+  :host([variant="line"]) .tab {
+    border-radius: 0;
+    border-top: 0;
+    border-left: 0;
+    border-right: 0;
+    border-bottom: 2px solid transparent;
+  }
+
+  :host([variant="underline"]) .tab[aria-selected="true"],
+  :host([variant="line"]) .tab[aria-selected="true"] {
+    background: transparent;
+    border-bottom-color: var(--ui-tabs-accent);
+  }
+
+  :host([variant="segmented"]) .nav {
+    background: color-mix(in srgb, var(--ui-color-surface-alt, #e2e8f0) 72%, var(--ui-color-surface, #ffffff));
+    border-color: transparent;
+    box-shadow: none;
+  }
+
+  :host([variant="segmented"]) .tab[aria-selected="true"] {
+    background: var(--ui-color-surface, #ffffff);
+    border-color: color-mix(in srgb, var(--ui-tabs-accent) 28%, var(--ui-color-border, #cbd5e1));
+    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
+  }
+
+  :host([variant="cards"]) .nav,
+  :host([variant="cards"]) .panel-wrap {
+    border: none;
+    box-shadow: none;
+    background: transparent;
+    padding: 0;
+  }
+
+  :host([variant="cards"]) .nav {
+    gap: 10px;
+  }
+
+  :host([variant="cards"]) .tab {
+    border-color: color-mix(in srgb, var(--ui-tabs-border) 80%, transparent);
+    background: var(--ui-tabs-nav-bg);
+    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
+  }
+
+  :host([variant="cards"]) .tab[aria-selected="true"] {
+    border-color: color-mix(in srgb, var(--ui-tabs-accent) 38%, var(--ui-tabs-border));
+    box-shadow: 0 10px 24px color-mix(in srgb, var(--ui-tabs-accent) 18%, transparent);
+  }
+
+  :host([variant="minimal"]) .nav,
+  :host([variant="minimal"]) .panel-wrap,
+  :host([bare]) .nav,
+  :host([bare]) .panel-wrap {
+    border-color: transparent;
+    box-shadow: none;
+    background: transparent;
+  }
+
+  :host([bare]) .nav,
+  :host([variant="minimal"]) .nav {
+    padding-inline: 0;
+  }
+
+  :host([variant="contrast"]) {
+    --ui-tabs-nav-bg: #111827;
+    --ui-tabs-panel-bg: #0f172a;
+    --ui-tabs-border: #334155;
+    --ui-tabs-text: #e2e8f0;
+    --ui-tabs-muted: #94a3b8;
+    --ui-tabs-accent: var(--ui-tabs-active-bg, #93c5fd);
+    --ui-tabs-active-text: #dbeafe;
+    --ui-tabs-focus: #93c5fd;
+    --ui-tabs-indicator-bg: color-mix(in srgb, #93c5fd 24%, transparent);
+    --ui-tabs-indicator-border: color-mix(in srgb, #93c5fd 46%, transparent);
+    --ui-tabs-indicator-shadow: 0 0 0 1px rgba(147, 197, 253, 0.24);
+    --ui-tabs-shadow: 0 16px 34px rgba(2, 6, 23, 0.42), 0 32px 54px rgba(2, 6, 23, 0.4);
+  }
+
+  :host([tone="success"]) {
+    --ui-tabs-accent: var(--ui-color-success, #16a34a);
+  }
+
+  :host([tone="warning"]) {
+    --ui-tabs-accent: var(--ui-color-warning, #d97706);
+  }
+
+  :host([tone="danger"]) {
+    --ui-tabs-accent: var(--ui-color-danger, #dc2626);
+  }
+
+  :host([headless]) .nav,
+  :host([headless]) .panel-wrap {
+    display: none;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .tab,
+    .nav {
+      transition: none !important;
+      scroll-behavior: auto !important;
+    }
+  }
+
+  @media (prefers-contrast: more) {
+    .nav,
+    .panel-wrap {
+      border-width: 2px;
+      box-shadow: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    :host {
+      --ui-tabs-nav-bg: Canvas;
+      --ui-tabs-panel-bg: Canvas;
+      --ui-tabs-border: CanvasText;
+      --ui-tabs-text: CanvasText;
+      --ui-tabs-muted: CanvasText;
+      --ui-tabs-accent: Highlight;
+      --ui-tabs-focus: Highlight;
+      --ui-tabs-elevation: none;
+    }
+
+    .tab[aria-selected="true"] {
+      background: Highlight;
+      color: HighlightText;
+      border-color: Highlight;
+    }
+  }
+`;function p(v){return String(v).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}function f(v){if(v==null)return!1;const t=String(v).toLowerCase();return t!=="false"&&t!=="0"&&t!=="off"}const _=new Set(["orientation","activation","headless","variant","size","density","tone","stretched","shape","elevation","bare"]);class g extends m.ElementBase{constructor(){super(),this._uid=`ui-tabs-${Math.random().toString(36).slice(2,9)}`,this._observer=null,this._resizeObserver=null,this._isSyncing=!1,this._isSyncingSelectionAttributes=!1,this._focusIndex=-1,this._onClick=this._onClick.bind(this),this._onKeyDown=this._onKeyDown.bind(this),this._onWindowResize=this._onWindowResize.bind(this)}static get observedAttributes(){return["selected","value","orientation","activation","headless","variant","size","density","tone","stretched","shape","elevation","loop","bare"]}connectedCallback(){super.connectedCallback(),this.root.addEventListener("click",this._onClick),this.root.addEventListener("keydown",this._onKeyDown),this._observer=new MutationObserver(()=>{this._isSyncing||this.requestRender()}),this._observer.observe(this,{childList:!0,subtree:!0,characterData:!0,attributes:!0,attributeFilter:["slot","data-label","data-value","data-icon","data-disabled","disabled","data-active"]}),typeof ResizeObserver<"u"?(this._resizeObserver=new ResizeObserver(()=>this._syncSelectionUi()),this._resizeObserver.observe(this)):window.addEventListener("resize",this._onWindowResize),this._syncSelectionUi()}disconnectedCallback(){this.root.removeEventListener("click",this._onClick),this.root.removeEventListener("keydown",this._onKeyDown),this._observer&&(this._observer.disconnect(),this._observer=null),this._resizeObserver?(this._resizeObserver.disconnect(),this._resizeObserver=null):window.removeEventListener("resize",this._onWindowResize),super.disconnectedCallback()}attributeChangedCallback(t,e,i){if(e!==i){if(t==="selected"||t==="value"){this._isSyncingSelectionAttributes||this._syncSelectionUi();return}_.has(t)&&this.isConnected&&this.requestRender()}}get selected(){return this.getAttribute("selected")||"0"}set selected(t){const e=String(t);e?this.setAttribute("selected",e):this.removeAttribute("selected")}_sourceTabs(){return Array.from(this.querySelectorAll('[slot="tab"]'))}_sourcePanels(){return Array.from(this.querySelectorAll('[slot="panel"]'))}_tabsModel(){return this._sourceTabs().map((t,e)=>{var b;const i=t.getAttribute("data-value")||t.getAttribute("value")||String(e),a=t.getAttribute("data-label")||((b=t.textContent)==null?void 0:b.trim())||`Tab ${e+1}`,r=t.getAttribute("data-icon")||"",s=t.hasAttribute("disabled")||f(t.getAttribute("data-disabled")),n=`${this._uid}-tab-${e}`,o=`${this._uid}-panel-${e}`;return{index:e,value:i,label:a,icon:r,disabled:s,tabId:n,panelId:o}})}_resolveSelectedIndex(t){if(!t.length)return-1;const e=this.getAttribute("selected"),i=this.getAttribute("value"),a=this._sourceTabs();let r=-1;if(e!=null&&e!==""){const s=Number(e);Number.isFinite(s)?r=Math.trunc(s):r=t.findIndex(n=>n.value===e)}return r<0&&i&&(r=t.findIndex(s=>s.value===i)),r<0&&(r=t.findIndex((s,n)=>{var o;return!!((o=a[n])!=null&&o.hasAttribute("data-active"))&&!s.disabled})),(r<0||!t[r]||t[r].disabled)&&(r=t.findIndex(s=>!s.disabled)),r}_syncSelectedAttributes(t,e){const i=t[e];this._isSyncingSelectionAttributes=!0;try{if(!i){this.removeAttribute("selected"),this.removeAttribute("value");return}this.getAttribute("selected")!==String(e)&&this.setAttribute("selected",String(e)),this.getAttribute("value")!==i.value&&this.setAttribute("value",i.value)}finally{this._isSyncingSelectionAttributes=!1}}_emit(t,e,i){const a=e[i];if(!a)return;const r={selected:i,index:i,value:a.value,label:a.label,tabId:a.tabId,panelId:a.panelId};this.dispatchEvent(new CustomEvent(t,{detail:r,bubbles:!0,composed:!0}))}_setSelectedByIndex(t,e,i){const a=t[e];if(!a||a.disabled)return;if(this._resolveSelectedIndex(t)===e){this._focusTab(e);return}this._focusIndex=e,this.setAttribute("selected",String(e)),this.setAttribute("value",a.value),i&&(this._emit("change",t,e),this._emit("select",t,e))}_syncSelectionUi(){if(!this.isConnected)return;if(!this.root.querySelector(".nav")){this.requestRender();return}const t=this._tabsModel();if(!t.length)return;const e=this._resolveSelectedIndex(t),i=this._resolveFocusIndex(t,e);this._syncSelectedAttributes(t,e);const a=Array.from(this.root.querySelectorAll(".tab"));a.forEach((s,n)=>{const o=t[n];if(!o)return;const b=n===e;s.setAttribute("aria-selected",b?"true":"false"),s.setAttribute("aria-controls",o.panelId),s.setAttribute("aria-disabled",o.disabled?"true":"false"),o.disabled?s.setAttribute("disabled",""):s.removeAttribute("disabled")}),u.syncRovingTabStops(a,a[i]||null,{activeAttribute:null});const r=t[e];this._syncIndicator(e),r?(this.setAttribute("aria-activedescendant",r.tabId),this.setAttribute("aria-controls",r.panelId),this._scrollSelectedTabIntoView(e)):(this.removeAttribute("aria-activedescendant"),this.removeAttribute("aria-controls")),this._syncPanels(t,e)}_syncIndicator(t){const e=this.root.querySelector(".nav");if(!e)return;const i=this.getAttribute("variant")||"default",a=i==="indicator";if(!a&&!(i==="indicator-line")){e.removeAttribute("data-indicator-ready"),e.style.removeProperty("--ui-tabs-indicator-x"),e.style.removeProperty("--ui-tabs-indicator-y"),e.style.removeProperty("--ui-tabs-indicator-w"),e.style.removeProperty("--ui-tabs-indicator-h");return}const s=this.root.querySelector(`.tab[data-index="${t}"]`);if(!s){e.removeAttribute("data-indicator-ready");return}const n=this.getAttribute("orientation")==="vertical"?"vertical":"horizontal",o=getComputedStyle(this).direction==="rtl";let b=s.offsetLeft,d=s.offsetTop,c=s.offsetWidth,l=s.offsetHeight;a?(b+=2,d+=2,c=Math.max(0,c-2*2),l=Math.max(0,l-2*2)):n==="vertical"?(d+=5,l=Math.max(8,l-5*2),c=3,b+=o?s.offsetWidth-3-2:2):(b+=8,c=Math.max(12,c-8*2),l=2,d+=s.offsetHeight-2-2),e.style.setProperty("--ui-tabs-indicator-x",`${b}px`),e.style.setProperty("--ui-tabs-indicator-y",`${d}px`),e.style.setProperty("--ui-tabs-indicator-w",`${c}px`),e.style.setProperty("--ui-tabs-indicator-h",`${l}px`),e.setAttribute("data-indicator-ready","true")}_syncPanels(t,e){const i=this._sourcePanels(),a=this.root.querySelector(".panel-wrap");a&&(i.length?a.removeAttribute("hidden"):a.setAttribute("hidden","")),this._isSyncing=!0;try{i.forEach((r,s)=>{const n=t[s],o=s===e;r.id=(n==null?void 0:n.panelId)||`${this._uid}-panel-${s}`,r.setAttribute("role","tabpanel"),r.setAttribute("tabindex",o?"0":"-1"),r.setAttribute("aria-hidden",o?"false":"true"),n&&r.setAttribute("aria-labelledby",n.tabId),o?r.removeAttribute("hidden"):r.setAttribute("hidden","")})}finally{this._isSyncing=!1}}_enabledIndices(t){return t.filter(e=>!e.disabled).map(e=>e.index)}_resolveFocusIndex(t,e){const i=u.resolveRovingFocusIndex(t,{activeIndex:this._focusIndex,selectedIndex:e,getDisabled:a=>a.disabled});return this._focusIndex=i,i}_onWindowResize(){this._syncSelectionUi()}_focusTab(t){this._focusIndex=t;const e=this.root.querySelector(`.tab[data-index="${t}"]`),i=Array.from(this.root.querySelectorAll(".tab"));u.syncRovingTabStops(i,e,{activeAttribute:null}),u.focusRovingItem(e)}_scrollSelectedTabIntoView(t){const e=this.root.querySelector(".nav"),i=this.root.querySelector(`.tab[data-index="${t}"]`);if(!e||!i)return;const a=this.getAttribute("orientation")!=="vertical",r=typeof window<"u"&&typeof window.matchMedia=="function"&&window.matchMedia("(prefers-reduced-motion: reduce)").matches;typeof i.scrollIntoView=="function"&&i.scrollIntoView({behavior:r?"auto":"smooth",block:"nearest",inline:a?"center":"nearest"})}_onClick(t){const e=t.target,i=e==null?void 0:e.closest(".tab");if(!i||i.disabled)return;const a=Number(i.getAttribute("data-index"));if(!Number.isFinite(a))return;const r=this._tabsModel();this._setSelectedByIndex(r,a,!0)}_onKeyDown(t){const e=t.target,i=e==null?void 0:e.closest(".tab");if(!i)return;const a=this._tabsModel();if(!a.length)return;const r=this.getAttribute("orientation")==="vertical"?"vertical":"horizontal",s=this.getAttribute("activation")==="manual"?"manual":"auto",n=!this.hasAttribute("loop")||f(this.getAttribute("loop")),o=getComputedStyle(this).direction==="rtl",b=Number(i.getAttribute("data-index"));if(!Number.isFinite(b))return;const d=c=>{const l=u.moveRovingFocusIndex(a,b,c,{wrap:n,fallbackIndex:this._resolveFocusIndex(a,this._resolveSelectedIndex(a)),getDisabled:h=>h.disabled});l!=null&&(this._focusTab(l),s==="auto"?this._setSelectedByIndex(a,l,!0):this._emit("focus",a,l))};if(r==="horizontal"&&(t.key==="ArrowRight"&&!o||t.key==="ArrowLeft"&&o)||r==="vertical"&&t.key==="ArrowDown"){t.preventDefault(),d(1);return}if(r==="horizontal"&&(t.key==="ArrowLeft"&&!o||t.key==="ArrowRight"&&o)||r==="vertical"&&t.key==="ArrowUp"){t.preventDefault(),d(-1);return}if(t.key==="Home"){t.preventDefault();const c=u.getRovingFocusBoundaryIndex(a,"first",l=>l.disabled);if(c<0)return;this._focusTab(c),s==="auto"?this._setSelectedByIndex(a,c,!0):this._emit("focus",a,c);return}if(t.key==="End"){t.preventDefault();const c=u.getRovingFocusBoundaryIndex(a,"last",l=>l.disabled);if(c<0)return;this._focusTab(c),s==="auto"?this._setSelectedByIndex(a,c,!0):this._emit("focus",a,c);return}(t.key==="Enter"||t.key===" ")&&(t.preventDefault(),this._setSelectedByIndex(a,b,!0))}render(){const t=this._tabsModel(),e=this._resolveSelectedIndex(t),i=this._resolveFocusIndex(t,e);this._syncSelectedAttributes(t,e);const a=this.getAttribute("orientation")==="vertical"?"vertical":"horizontal",r=t.map(n=>{const o=n.index===e,b=n.icon?`<span class="tab-icon" aria-hidden="true">${p(n.icon)}</span>`:"";return`
+          <button
+            type="button"
+            class="tab"
+            part="tab"
+            id="${n.tabId}"
+            role="tab"
+            data-index="${n.index}"
+            aria-selected="${o?"true":"false"}"
+            aria-controls="${n.panelId}"
+            aria-disabled="${n.disabled?"true":"false"}"
+            tabindex="${n.index===i&&!n.disabled?"0":"-1"}"
+            ${n.disabled?"disabled":""}
+          >
+            ${b}
+            <span class="tab-label">${p(n.label)}</span>
+          </button>
+        `}).join("");this.setContent(`
+      <style>${y}</style>
+      <section class="shell" part="shell">
+        <div class="nav" role="tablist" aria-orientation="${a}" part="nav">
+          <span class="indicator" part="indicator" aria-hidden="true"></span>
+          ${r}
+        </div>
+        <div class="panel-wrap" part="panel-wrap" aria-live="polite">
+          <slot name="panel"></slot>
+        </div>
+      </section>
+      <slot class="source-tabs" name="tab"></slot>
+    `);const s=t[e];s?(this.setAttribute("aria-activedescendant",s.tabId),this.setAttribute("aria-controls",s.panelId)):(this.removeAttribute("aria-activedescendant"),this.removeAttribute("aria-controls")),this._syncIndicator(e),this._syncPanels(t,e)}}typeof customElements<"u"&&!customElements.get("ui-tabs")&&customElements.define("ui-tabs",g);exports.UITabs=g;