@sky.ui/core 0.0.1

package/dist/sky-switch/sky-switch.d.ts

@@ -0,0 +1,116 @@
+import { LitElement } from "lit";
+export type SkySwitchValueChangedDetail = {
+    value: string | boolean | undefined;
+};
+export type SkySwitchValidationErrorDetail = {
+    errors: string[];
+};
+export type SkySwitchValueClearedDetail = {
+    value: string | boolean | undefined;
+    state: boolean;
+};
+/**
+ * @element sky-switch
+ *
+ * @summary Themeable toggle switch with icon/label states and validation support.
+ *
+ * @status stable
+ * @since 1.0.0
+ * @documentation https://library.sky-ui.com/components/switch
+ * @dependency sky-icon
+ *
+ * @uiVModel state value-changed
+ *
+ * @slot - Default slot for additional content (not typically used).
+ *
+ * @csspart switch - The clickable wrapper around the toggle.
+ * @csspart toggle - The rounded track/background of the switch.
+ * @csspart thumb - The circular thumb/handle that slides.
+ * @csspart content - The inner flex container holding icon/label.
+ * @csspart label - The text node used when no icon is supplied.
+ * @csspart icon - The icon node when an icon is supplied.
+ *
+ * @property {string} activeIcon - Icon name for the ON state (Iconify). Default: ""
+ * @property {string} inactiveIcon - Icon name for the OFF state (Iconify). Default: ""
+ * @property {string} activeLabel - Text label for the ON state (fallback if no icon). Default: "ON"
+ * @property {string} inactiveLabel - Text label for the OFF state (fallback if no icon). Default: "OFF"
+ * @property {boolean} state - Current boolean value of the switch (reflected). Default: false
+ * @property {string} value - Optional string payload emitted when ON (like checkbox.value). Default: ""
+ * @property {string} toggleWidth - Track width (e.g., "58px"). Auto-computed if text changes. Default: "40px"
+ * @property {string} activeColor - Icon/text color when ON. Default: "#fff"
+ * @property {string} inactiveColor - Icon/text color when OFF. Default: "dark"
+ * @property {string} activeBgColor - Track background when ON. Default: "primary"
+ * @property {string} inactiveBgColor - Track background when OFF. Default: "light"
+ * @property {boolean} disabled - Whether the switch is disabled. Default: false
+ * @property {boolean} required - Whether the switch must be ON to pass validation. Default: false
+ * @property {string} requiredMessage - Error message when required is not satisfied. Default: "This switch is required."
+ * @property {boolean} showErrors - Whether to render the error message block. Default: false
+ *
+ * @fires {CustomEvent<SkySwitchValueChangedDetail>} value-changed - Dispatched on toggle.
+ * @fires {CustomEvent<SkySwitchValidationErrorDetail>} validation-error - Dispatched when validation runs.
+ * @fires {CustomEvent<SkySwitchValueClearedDetail>} value-cleared - Dispatched when `reset()` is called.
+ * @method check Turns switch ON.
+ * @method uncheck Turns switch OFF.
+ * @method toggle Flips switch state.
+ *
+ * @Behavior
+ * - Toggles between ON/OFF states with icon or text rendering.
+ * - Emits checkbox-like value semantics for form integrations.
+ * - Supports required validation and optional error display.
+ *
+ * @example
+ * ```html
+ * <sky-switch active-icon="mdi:check" inactive-icon="ion:close" active-label="Enabled" inactive-label="Disabled" required show-errors></sky-switch>
+ * ```
+ * ```vue
+ * <template>
+ *   <sky-switch active-icon="mdi:check" inactive-icon="ion:close" active-label="Enabled" inactive-label="Disabled" required show-errors></sky-switch>
+ * </template>
+ * ```
+ * ```jsx
+ * export default function Demo() {
+ *   return <sky-switch active-icon="mdi:check" inactive-icon="ion:close" active-label="Enabled" inactive-label="Disabled" required show-errors></sky-switch>;
+ * }
+ * ```
+ */
+export declare class SkySwitch extends LitElement {
+    static dependencies: Record<string, CustomElementConstructor>;
+    activeIcon: string;
+    inactiveIcon: string;
+    activeLabel: string;
+    inactiveLabel: string;
+    state: boolean;
+    /** like checkbox.value (optional string payload when ON) */
+    value: string;
+    toggleWidth: string;
+    activeColor: string;
+    inactiveColor: string;
+    activeBgColor: string;
+    inactiveBgColor: string;
+    disabled: boolean;
+    validationActive: boolean;
+    invalid: boolean;
+    /** === checkbox-style validation contract === */
+    private validationErrors;
+    showErrors: boolean;
+    required: boolean;
+    requiredMessage: string;
+    private defaultState;
+    /** lets <sky-form> aggregate without special-casing */
+    get formValue(): string | boolean | undefined;
+    static styles: import("lit").CSSResult;
+    willUpdate(changed: Map<string, unknown>): void;
+    private computeAndSetWidth;
+    private measureTextWidth;
+    private emitValueChanged;
+    private toggleState;
+    check(): void;
+    uncheck(): void;
+    toggle(): void;
+    private onKeyDown;
+    /** checkbox-like validation */
+    validateInput(): boolean;
+    /** restore to defaultState and clear validation */
+    reset(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/sky-switch/sky-switch.js

@@ -0,0 +1,191 @@
+import{__decorate as t,__metadata as e}from"tslib";import{LitElement as i,css as o,html as s}from"lit";import{property as a,state as n,customElement as r}from"lit/decorators.js";import{when as l}from"lit/directives/when.js";import{classMap as c}from"lit/directives/class-map.js";import{resolveColor as d}from"../helper/utils/color-resolver.js";import{SkyIcon as h}from"../sky-icon/sky-icon.js";let p=class extends i{constructor(){super(...arguments),this.activeIcon="",this.inactiveIcon="",this.activeLabel="ON",this.inactiveLabel="OFF",this.state=!1,this.value="",this.toggleWidth="40px",this.activeColor="#fff",this.inactiveColor="dark",this.activeBgColor="primary",this.inactiveBgColor="light",this.disabled=!1,this.validationActive=!1,this.invalid=!1,this.validationErrors=[],this.showErrors=!1,this.required=!1,this.requiredMessage="This switch is required.",this.defaultState=!1,this.onKeyDown=t=>{" "!==t.key&&"Enter"!==t.key||(t.preventDefault(),this.toggleState(t))}}static{this.dependencies={"sky-icon":h}}get formValue(){return"string"==typeof this.value&&""!==this.value.trim()?this.state?this.value:void 0:this.state}static{this.styles=o`
+    :host {
+      display: inline-block;
+      outline: none;
+    }
+
+    :host([disabled]) {
+      opacity: 0.6;
+      pointer-events: none;
+    }
+
+    :host([disabled]) .switch {
+      pointer-events: none;
+    }
+
+    .switch {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      cursor: pointer;
+      position: relative;
+      user-select: none;
+    }
+
+    .toggle {
+      position: relative;
+      display: inline-flex;
+      flex-shrink: 0;
+      width: var(--toggle-width, 40px);
+      height: 30px;
+      background: var(--off-bg-color);
+      border-radius: var(--sky-radius-full);
+      border: var(--sky-border-primary);
+      box-shadow: var(--sky-box-shadow-inset);
+      transition: background 0.4s ease-in-out;
+      font-size: 12px;
+      color: var(--label-color);
+      overflow: hidden;
+    }
+    .toggle.on {
+      background: var(--on-bg-color);
+    }
+
+    .content {
+      position: relative;
+      inline-size: 100%;
+      block-size: 100%;
+    }
+
+    .state-layer {
+      position: absolute;
+      inset: 0;
+      display: flex;
+      align-items: center;
+      padding-inline: 8px;
+      pointer-events: none;
+      transition: opacity 0.25s ease, transform 0.25s ease,
+        color 0.4s ease-in-out;
+      will-change: opacity, transform;
+    }
+
+    .state-off {
+      justify-content: flex-end;
+      opacity: 1;
+      transform: translateY(0);
+    }
+
+    .state-on {
+      justify-content: flex-start;
+      opacity: 0;
+      transition: opacity 0.4s ease-in-out;
+    }
+    .state-off {
+      justify-content: flex-end;
+      opacity: 1;
+      transition: opacity 0.4s ease-in-out;
+    }
+    .toggle.on .state-on {
+      opacity: 1;
+    }
+    .toggle.on .state-off {
+      opacity: 0;
+    }
+
+    .thumb {
+      position: absolute;
+      inset-block-start: 3px;
+      inset-inline-start: 4px;
+      inline-size: 24px;
+      block-size: 24px;
+      background: var(--sky-text-white);
+      box-sizing: border-box;
+      border: var(--sky-border-primary);
+      border-radius: var(--sky-radius-full);
+      transition: transform 0.4s ease-in-out, background 0.4s ease-in-out;
+      transform: translateX(0);
+      box-shadow: var(--sky-box-shadow-tertiary);
+      pointer-events: none;
+    }
+    :host(:dir(ltr)) .toggle.on .thumb {
+      transform: translateX(calc(var(--toggle-width) - 31px));
+    }
+    :host(:dir(rtl)) .thumb {
+      inset-inline-start: auto;
+      inset-inline-end: 4px;
+      transform: translateX(0);
+    }
+    :host(:dir(rtl)) .toggle.on .thumb {
+      transform: translateX(calc(31px - var(--toggle-width)));
+    }
+
+    sky-icon {
+      display: inline-block;
+      width: 1em;
+      height: 1em;
+    }
+    .iconify {
+      font-size: 14px;
+      transition: color 0.4s ease-in-out;
+    }
+
+    .iconify-on,
+    .text-on {
+      color: var(--on-icon-color);
+      font-weight: 600;
+    }
+    .iconify-off,
+    .text-off {
+      color: var(--off-icon-color);
+      font-weight: 600;
+    }
+
+    .label {
+      font-size: 12px;
+      font-weight: 600;
+      transition: color 0.4s ease-in-out;
+    }
+
+    .toggle:focus-visible {
+      outline: 2px solid var(--sky-focus-ring, rgba(59, 130, 246, 0.6));
+      outline-offset: 2px;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .state-layer {
+        transition: none;
+      }
+      .thumb {
+        transition: none;
+      }
+      .toggle {
+        transition: none;
+      }
+    }
+  `}willUpdate(t){t.has("activeColor")&&this.style.setProperty("--on-icon-color",d(this.activeColor)),t.has("inactiveColor")&&this.style.setProperty("--off-icon-color",d(this.inactiveColor)),t.has("inactiveBgColor")&&this.style.setProperty("--off-bg-color",d(this.inactiveBgColor)),t.has("activeBgColor")&&this.style.setProperty("--on-bg-color",d(this.activeBgColor)),(t.has("activeLabel")||t.has("inactiveLabel")||t.has("activeIcon")||t.has("inactiveIcon"))&&this.computeAndSetWidth(),(t.has("state")||t.has("required"))&&this.validateInput()}computeAndSetWidth(){if(this.activeIcon&&this.inactiveIcon)return void("60px"!==this.toggleWidth&&(this.toggleWidth="60px"));const t=(this.activeLabel?.length||0)>=(this.inactiveLabel?.length||0)?this.activeLabel:this.inactiveLabel,e=this.measureTextWidth(t,"12px","var(--sky-font, sans-serif)"),i=`${Math.max(40,Math.ceil(e+46))}px`;this.toggleWidth!==i&&(this.toggleWidth=i)}measureTextWidth(t,e="12px",i="sans-serif"){const o=(this.__twc??(this.__twc=document.createElement("canvas"))).getContext("2d");return o.font=`${e} ${i}`,o.measureText(t??"").width}emitValueChanged(){const t=this.value&&""!==this.value.trim()?this.state?this.value:void 0:this.state;this.dispatchEvent(new CustomEvent("value-changed",{detail:{value:t},bubbles:!0,composed:!0}))}toggleState(t){t?.preventDefault?.(),this.disabled||(this.state=!this.state,this.emitValueChanged(),this.validateInput())}check(){this.disabled||this.state||this.toggleState()}uncheck(){!this.disabled&&this.state&&this.toggleState()}toggle(){this.disabled||this.toggleState()}validateInput(){if(!this.validationActive)return!0;this.validationErrors=[],this.required&&!this.state&&(this.validationErrors=[this.requiredMessage]),this.dispatchEvent(new CustomEvent("validation-error",{detail:{errors:[...this.validationErrors]},bubbles:!0,composed:!0}));const t=0===this.validationErrors.length;return this.invalid=!t,t}reset(){this.state=!!this.defaultState,this.validationErrors=[],this.validationActive=!1,this.invalid=!1;const t=this.value&&""!==this.value.trim()?this.state?this.value:void 0:this.state;this.dispatchEvent(new CustomEvent("value-cleared",{detail:{value:t,state:this.state},bubbles:!0,composed:!0}))}render(){const t=this.state;return s`
+      <div
+        class="switch"
+        part="switch"
+        @click=${this.toggleState}
+        role="presentation"
+      >
+        <div
+          class=${c({toggle:!0,on:t})}
+          part="toggle"
+          style="--toggle-width:${this.toggleWidth};"
+          role="switch"
+          aria-checked=${t}
+          tabindex="0"
+          @keydown=${this.onKeyDown}
+        >
+          <span class="thumb" part="thumb"></span>
+          <div class="content" part="content">
+            <div class="state-layer state-on">
+              ${l(this.activeIcon,()=>s`<sky-icon
+                  class="iconify iconify-on"
+                  part="icon"
+                  icon="${this.activeIcon}"
+                ></sky-icon>`,()=>s`<span class="label text-on" part="label">${this.activeLabel}</span>`)}
+            </div>
+            <div class="state-layer state-off">
+              ${l(this.inactiveIcon,()=>s`<sky-icon
+                  class="iconify iconify-off"
+                  part="icon"
+                  icon="${this.inactiveIcon}"
+                ></sky-icon>`,()=>s`<span class="label text-off" part="label">${this.inactiveLabel}</span>`)}
+            </div>
+          </div>
+        </div>
+      </div>
+    `}};t([a({type:String}),e("design:type",Object)],p.prototype,"activeIcon",void 0),t([a({type:String}),e("design:type",Object)],p.prototype,"inactiveIcon",void 0),t([a({type:String}),e("design:type",Object)],p.prototype,"activeLabel",void 0),t([a({type:String}),e("design:type",Object)],p.prototype,"inactiveLabel",void 0),t([a({type:Boolean,reflect:!0}),e("design:type",Object)],p.prototype,"state",void 0),t([a({type:String}),e("design:type",String)],p.prototype,"value",void 0),t([a({type:String}),e("design:type",Object)],p.prototype,"toggleWidth",void 0),t([a({type:String}),e("design:type",Object)],p.prototype,"activeColor",void 0),t([a({type:String}),e("design:type",Object)],p.prototype,"inactiveColor",void 0),t([a({type:String}),e("design:type",Object)],p.prototype,"activeBgColor",void 0),t([a({type:String}),e("design:type",Object)],p.prototype,"inactiveBgColor",void 0),t([a({type:Boolean,reflect:!0}),e("design:type",Object)],p.prototype,"disabled",void 0),t([a({type:Boolean,reflect:!0}),e("design:type",Boolean)],p.prototype,"validationActive",void 0),t([a({type:Boolean,reflect:!0}),e("design:type",Boolean)],p.prototype,"invalid",void 0),t([n(),e("design:type",Array)],p.prototype,"validationErrors",void 0),t([a({type:Boolean}),e("design:type",Object)],p.prototype,"showErrors",void 0),t([a({type:Boolean}),e("design:type",Object)],p.prototype,"required",void 0),t([a({type:String}),e("design:type",Object)],p.prototype,"requiredMessage",void 0),t([n(),e("design:type",Object)],p.prototype,"defaultState",void 0),p=t([r("sky-switch")],p);export{p as SkySwitch};
+//# sourceMappingURL=sky-switch.js.map

package/dist/sky-switch/sky-switch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sky-switch.js","sources":["../../src/sky-switch/sky-switch.ts"],"sourcesContent":[null],"names":["SkySwitch","LitElement","constructor","this","activeIcon","inactiveIcon","activeLabel","inactiveLabel","state","value","toggleWidth","activeColor","inactiveColor","activeBgColor","inactiveBgColor","disabled","validationActive","invalid","validationErrors","showErrors","required","requiredMessage","defaultState","onKeyDown","ev","key","preventDefault","toggleState","dependencies","SkyIcon","formValue","trim","undefined","styles","css","willUpdate","changed","has","style","setProperty","resolveColor","computeAndSetWidth","validateInput","text","length","px","measureTextWidth","next","Math","max","ceil","fontSize","fontFamily","ctx","__twc","document","createElement","getContext","font","measureText","width","emitValueChanged","emitted","dispatchEvent","CustomEvent","detail","bubbles","composed","e","check","uncheck","toggle","errors","isValid","reset","render","isOn","html","classMap","on","when","__decorate","property","type","String","prototype","Boolean","reflect","customElement"],"mappings":"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"}

package/dist/sky-tab/index.d.ts

@@ -0,0 +1 @@
+export * from "./sky-tab";

package/dist/sky-tab/index.js

@@ -0,0 +1 @@
+export * from './sky-tab.js';

package/dist/sky-tab/sky-tab.d.ts

@@ -0,0 +1,188 @@
+import { LitElement } from "lit";
+export type SkyTabBarPosition = "top" | "bottom" | "left" | "right";
+export type SkyTabMountStrategy = "eager" | "lazy" | "unmount";
+export type SkyTabScrollMode = "tab" | "page" | "px";
+export type SkyTabChangeDetail = {
+    activeIndex: number;
+};
+/**
+ * @element sky-tab
+ *
+ * @summary Tab system with animated indicator, keyboard navigation, and flexible panel mounting.
+ *
+ * @status stable
+ * @since 1.0.0
+ * @documentation https://library.sky-ui.com/components/tab
+ * @dependency sky-icon
+ *
+ * @uiVModel selectedIndex tab-change detail=activeIndex
+ *
+ * @slot tab - Label/button for each tab (one per index).
+ * @slot tab-content - Panel content for each tab (one per index).
+ *
+ * @csspart wrapper - Root flex wrapper (tabs + content).
+ * @csspart rails - Rail container for overflow navigation + tray.
+ * @csspart tray - Scrollable area containing the tabs.
+ * @csspart tabs - The tabs strip (role="tablist").
+ * @csspart indicator - The animated thumb under the active tab.
+ * @csspart tab - Each individual tab button.
+ * @csspart tab--selected - The currently selected tab button.
+ * @csspart content - Container for tab panels.
+ *
+ * @property {number} selectedIndex - Index of the currently selected tab. Default: 0
+ * @property {SkyTabBarPosition} tabBarPosition - Position of the tab bar.
+ * @property {string} panelHeight - Explicit height for the tab content container (e.g., "auto", "400px", "100%"). Default: "auto"
+ * @property {string} panelWidth - Explicit width for the tab content container (e.g., "auto", "600px", "100%"). Default: "auto"
+ * @property {string} gutter - Spacing (gap) between the tab bar and the content area. Default: "0"
+ * @property {SkyTabMountStrategy} mountStrategy - Content mount strategy.
+ * @property {boolean} keepAlive - If mountStrategy="unmount", retain DOM in cache for quick re-attachment. Default: true
+ * @property {boolean} overflowButton - Show chevron nav buttons & hide native scrollbars when true. Default: false
+ * @property {SkyTabScrollMode} scrollMode - Rail scroll mode for nav buttons.
+ * @property {number} scrollPx - Pixel amount for scrollMode="px". Default: 120
+ * @property {number} edgePad - Edge padding used in internal scroll calculations. Default: 12
+ * @property {number} holdDelay - Press-and-hold delay (ms) before auto-repeat scroll starts. Default: 250
+ * @property {number} holdInterval - Press-and-hold repeat interval (ms). Default: 120
+ * @property {number} neighbors - Neighbor look-ahead used for internal scroll alignment. Default: 1
+ * @property {number} neighborPad - Minimum space to preserve around the active tab when auto-scrolling rails. Default: 8
+ * @property {number} keyNavDebounce - Min time (ms) between key-repeat navigations. Default: 140
+ * @property {boolean} navSelectOnButtons - If true, chevron buttons select next/prev tab (not just scroll). Default: false
+ * @property {string} color - Base color for the active tab indicator. Supports CSS tokens. Default: "primary"
+ *
+ * @fires {CustomEvent<SkyTabChangeDetail>} tab-change - Fired when the active tab changes.
+ * @method activate Activates the provided tab index (or current index when omitted).
+ *
+ * @Behavior
+ * - Supports horizontal and vertical tab rails with optional overflow controls.
+ * - Uses animated thumb positioning and keyboard navigation across tabs.
+ * - Supports eager, lazy, and unmount panel mounting strategies.
+ *
+ * @example
+ * ```html
+ * <sky-tab selected-index="1" tab-bar-position="top" overflow-button mount-strategy="lazy" color="primary">
+ *   <button slot="tab">Overview</button>
+ *   <button slot="tab">Activity</button>
+ *   <button slot="tab">Settings</button>
+ *   <section slot="tab-content">Overview content</section>
+ *   <section slot="tab-content">Activity content</section>
+ *   <section slot="tab-content">Settings content</section>
+ * </sky-tab>
+ * ```
+ * ```vue
+ * <template>
+ *   <sky-tab :selected-index="1" tab-bar-position="top" overflow-button mount-strategy="lazy" color="primary">
+ *     <button slot="tab">Overview</button>
+ *     <button slot="tab">Activity</button>
+ *     <button slot="tab">Settings</button>
+ *     <section slot="tab-content">Overview content</section>
+ *     <section slot="tab-content">Activity content</section>
+ *     <section slot="tab-content">Settings content</section>
+ *   </sky-tab>
+ * </template>
+ * ```
+ * ```jsx
+ * export default function Demo() {
+ *   return (
+ *     <sky-tab selected-index={1} tab-bar-position="top" overflow-button mount-strategy="lazy" color="primary">
+ *       <button slot="tab">Overview</button>
+ *       <button slot="tab">Activity</button>
+ *       <button slot="tab">Settings</button>
+ *       <section slot="tab-content">Overview content</section>
+ *       <section slot="tab-content">Activity content</section>
+ *       <section slot="tab-content">Settings content</section>
+ *     </sky-tab>
+ *   );
+ * }
+ * ```
+ */
+export declare class SkyTab extends LitElement {
+    #private;
+    static dependencies: Record<string, CustomElementConstructor>;
+    /** Index of the currently selected tab. */
+    selectedIndex: number;
+    /** Position of the tab bar (`top` | `bottom` | `left` | `right`). */
+    tabBarPosition: SkyTabBarPosition;
+    /** Explicit height for the tab content container (e.g., `auto`, `400px`, `100%`). */
+    panelHeight: string;
+    /** Explicit width for the tab content container (e.g., `auto`, `600px`, `100%`). */
+    panelWidth: string;
+    /** Spacing (gap) between the tab bar and the content area. */
+    gutter: string;
+    /**
+     * Content mount strategy:
+     * - "eager": panels are present immediately.
+     * - "lazy": panels render but rely on `content-visibility` for perf (default).
+     * - "unmount": only the active panel stays in the DOM; others are removed (and optionally cached via `keepAlive`).
+     */
+    mountStrategy: SkyTabMountStrategy;
+    /** If `mountStrategy="unmount"`, retain DOM in an internal cache for quick re-attachment on revisit. */
+    keepAlive: boolean;
+    /**
+     * Show chevron nav buttons & hide native scrollbars when true.
+     * When false, hide chevrons and use native scrollbars on the tray.
+     */
+    overflowButton: boolean;
+    /**
+     * Rail scroll mode used by nav buttons:
+     * - "tab": scrolls to the next/previous tab boundary
+     * - "page": scrolls by ~80% of the visible rail
+     * - "px": scrolls by a fixed `scrollPx` amount
+     */
+    scrollMode: SkyTabScrollMode;
+    /** Pixel amount for `scrollMode="px"`. */
+    scrollPx: number;
+    /** Reserved: Edge padding used in internal scroll calculations. */
+    edgePad: number;
+    /** Press-and-hold delay (ms) before auto-repeat scroll starts. */
+    holdDelay: number;
+    /** Press-and-hold repeat interval (ms). */
+    holdInterval: number;
+    /** Reserved: neighbor look-ahead used for internal scroll alignment. */
+    neighbors: number;
+    /** Minimum space to preserve around the active tab when auto-scrolling rails. */
+    neighborPad: number;
+    /** Min time (ms) between key-repeat navigations to let the thumb animate. */
+    keyNavDebounce: number;
+    /** If true, chevron buttons select next/prev tab (not just scroll). */
+    navSelectOnButtons: boolean;
+    /** Internal: enable thumb transitions only after first layout. */
+    private _ready;
+    color: string;
+    /** Tracks layout changes to keep the thumb and vertical widths in sync. */
+    private _resizeObs?;
+    /** Internal cache used when `mountStrategy="unmount"` and `keepAlive=true`. */
+    private _cache;
+    /** The scrollable rail container element. */
+    private _tray?;
+    /** The tabs strip element (inside the rail). */
+    private _tabsEl?;
+    /** WAAPI animation for thumb indicator. */
+    private _thumbAnimation?;
+    /** Whether a backward nav action is possible (rail overflow & left/up space). */
+    private _canBack;
+    /** Whether a forward nav action is possible (rail overflow & right/down space). */
+    private _canFwd;
+    /** Hold-to-scroll timers & state. */
+    private _holdTimer;
+    private _holdStartTimer;
+    private _held;
+    private _holdSign?;
+    private _keyNavLocked;
+    private _keyNavTimer;
+    private _keyNavDebouncing;
+    /** Last queued direction during debounce: +1 (forward) | -1 (back) | null */
+    private _keyQueuedDir;
+    private _btnPrev?;
+    private _btnNext?;
+    private _contentSlot?;
+    /** Component styles. */
+    static styles: import("lit").CSSResult;
+    firstUpdated(): void;
+    disconnectedCallback(): void;
+    updated(changed: Map<string, unknown>): void;
+    private selectTab;
+    activate(index?: number): void;
+    private _labelSlot?;
+    private renderTabs;
+    private renderContent;
+    render(): import("lit-html").TemplateResult<1>;
+}