@sky.ui/core 0.0.1

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

@@ -0,0 +1,170 @@
+import { LitElement, TemplateResult } from "lit";
+/**
+ * Step item interface for configuring individual steps
+ */
+export type StepItem = {
+    label: string;
+    subtitle?: string;
+    disabled?: boolean;
+    icon?: string;
+    checkedIcon?: string;
+};
+export type SkyStepsLayout = "horizontal" | "vertical";
+export type SkyStepsChangeDetail = {
+    step: number;
+    previous: number;
+};
+/**
+ * @element sky-steps
+ *
+ * @summary Multi-step progress component with horizontal/vertical layouts and panel content.
+ *
+ * @status stable
+ * @since 1.0.0
+ * @documentation https://library.sky-ui.com/components/steps
+ * @dependency sky-icon
+ *
+ * @uiVModel currentStep step-change detail=step
+ *
+ * @slot before - Content displayed before the steps navigation
+ * @slot after - Content displayed after the steps navigation
+ * @slot panel-{n} - Content for each step panel (e.g., panel-1, panel-2)
+ * @slot - Default slot for additional content
+ *
+ * @csspart steps - The container for step navigation buttons
+ * @csspart panels - The container for step panels
+ * @csspart panel - Individual step panel
+ * @csspart node - The circular step indicator (number/icon)
+ * @csspart labels - Container for step label and subtitle
+ *
+ * @property {StepItem[]} steps - Array of step configuration objects. Default: []
+ * @property {number} currentStep - Current active step (1-indexed). Default: 1
+ * @property {SkyStepsLayout} layout - Layout direction.
+ * @property {boolean} allowStepJump - Whether clicking any step is allowed (not just sequential). Default: true
+ * @property {boolean} hideNumbers - Hide step numbers, show bullets instead. Default: false
+ * @property {boolean} showLabels - Show/hide step labels. Default: true
+ * @property {boolean} compact - Compact mode with reduced spacing. Default: false
+ * @property {number[]|null} completedSteps - Array of completed step indices (overrides default logic). Default: null
+ * @property {string} stepIcon - Global icon for all steps (can be overridden per-step). Default: undefined
+ * @property {string} checkedIcon - Global checked icon for completed steps (can be overridden per-step). Default: undefined
+ * @property {boolean} allExpanded - When `true` with `layout="vertical"`, every panel stays open with neutral chrome only (no current-step highlight or completed styling — documentation-style list). Default: false
+ *
+ * @fires {CustomEvent<SkyStepsChangeDetail>} step-change - Dispatched when current step changes.
+ * @method previous Moves to previous enabled step.
+ * @method next Moves to next enabled step.
+ * @method prevStep Alias for `previous()`.
+ * @method nextStep Alias for `next()`.
+ * @method goToStep Navigates directly to a target step if allowed.
+ * @method getCurrentStep Returns current step index (1-based).
+ *
+ * @Behavior
+ * - Supports linear or free step navigation via `allowStepJump`.
+ * - Renders slot-based panel content for each step index.
+ * - Handles keyboard navigation across step headers.
+ *
+ * @example
+ * ```html
+ * <sky-steps current-step="2" layout="horizontal">
+ *   <button slot="after" data-sky-steps="back">Back</button>
+ *   <button slot="after" data-sky-steps="next">Next</button>
+ *   <div slot="panel-1">Step 1: Account details</div>
+ *   <div slot="panel-2">Step 2: Permissions</div>
+ *   <div slot="panel-3">Step 3: Review</div>
+ * </sky-steps>
+ * ```
+ * ```vue
+ * <template>
+ *   <sky-steps :steps="steps" :current-step="2" layout="horizontal">
+ *     <button slot="after" data-sky-steps="back">Back</button>
+ *     <button slot="after" data-sky-steps="next">Next</button>
+ *     <div slot="panel-1">Step 1: Account details</div>
+ *     <div slot="panel-2">Step 2: Permissions</div>
+ *     <div slot="panel-3">Step 3: Review</div>
+ *   </sky-steps>
+ * </template>
+ * ```
+ * ```jsx
+ * export default function Demo() {
+ *   return (
+ *     <sky-steps steps={[{ label: "Account" }, { label: "Permissions" }, { label: "Review" }]} current-step={2} layout="horizontal">
+ *       <button slot="after" data-sky-steps="back">Back</button>
+ *       <button slot="after" data-sky-steps="next">Next</button>
+ *       <div slot="panel-1">Step 1: Account details</div>
+ *       <div slot="panel-2">Step 2: Permissions</div>
+ *       <div slot="panel-3">Step 3: Review</div>
+ *     </sky-steps>
+ *   );
+ * }
+ * ```
+ */
+export declare class SkySteps extends LitElement {
+    static dependencies: Record<string, CustomElementConstructor>;
+    steps: StepItem[];
+    currentStep: number;
+    layout: SkyStepsLayout;
+    allowStepJump: boolean;
+    hideNumbers: boolean;
+    showLabels: boolean;
+    compact: boolean;
+    /** Completed step indices. From HTML pass JSON array, e.g. completedsteps='[1,2,3]'. */
+    completedSteps: number[] | null;
+    /** Global defaults (can be overridden per-step) */
+    stepIcon?: string;
+    checkedIcon?: string;
+    /** Vertical layout only: expand every step panel at once (e.g. documentation flows). */
+    allExpanded: boolean;
+    private _prevStep;
+    static styles: import("lit").CSSResult;
+    /** Get total number of steps */
+    private get _count();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** Handle click events on navigation triggers */
+    private _onTriggerClick;
+    /** Handle keyboard events on navigation triggers */
+    private _onTriggerKey;
+    /** Find first element in composed path that marks itself as a back/next trigger */
+    private _findTrigger;
+    /** Activate the found trigger (back/next) */
+    private _activateTrigger;
+    /** Check if a step is completed */
+    private isCompleted;
+    /** Check if jumping to a step is allowed */
+    private canJump;
+    /** Handle keyboard navigation */
+    private onKeyDown;
+    /** Handle step button click */
+    private onStepClick;
+    /** Get previous enabled step index */
+    private prevIndex;
+    /** Get next enabled step index */
+    private nextIndex;
+    /** Navigate to previous step */
+    private goPrev;
+    /** Navigate to next step */
+    private goNext;
+    /** Public API: Navigate to previous step */
+    previous(): void;
+    /** Public API: Navigate to next step */
+    next(): void;
+    /** Public API: Navigate to target step */
+    goToStep(step: number): boolean;
+    getCurrentStep(): number;
+    prevStep(): void;
+    nextStep(): void;
+    /** Set current step with animation and events */
+    private _setCurrent;
+    /** Apply direction classes for animation */
+    private _applyDirectionAndLeaving;
+    /** Focus a specific step button */
+    private focusStep;
+    /** Render node contents: checked icon, regular icon, number, or bullet */
+    private renderNodeInner;
+    /** Render step indicator node */
+    private renderNode;
+    /** Render a horizontal step */
+    private renderHStep;
+    /** Render a vertical step item */
+    private renderVerticalItem;
+    protected render(): TemplateResult<1>;
+}

package/dist/sky-steps/sky-steps.js

@@ -0,0 +1,455 @@
+import{__decorate as t,__metadata as e}from"tslib";import{LitElement as s,css as i,html as a}from"lit";import{property as o,customElement as n}from"lit/decorators.js";import{when as r}from"lit/directives/when.js";import{classMap as l}from"lit/directives/class-map.js";import{SkyIcon as p}from"../sky-icon/sky-icon.js";let c=class extends s{constructor(){super(...arguments),this.steps=[],this.currentStep=1,this.layout="horizontal",this.allowStepJump=!0,this.hideNumbers=!1,this.showLabels=!0,this.compact=!1,this.completedSteps=null,this.allExpanded=!1,this._prevStep=this.currentStep,this._onTriggerClick=t=>{const e=this._findTrigger(t.composedPath());e&&(t.preventDefault(),this._activateTrigger(e))},this._onTriggerKey=t=>{if("Enter"!==t.key&&" "!==t.key)return;const e=this._findTrigger(t.composedPath());e&&(t.preventDefault(),this._activateTrigger(e))}}static{this.dependencies={"sky-icon":p}}static{this.styles=i`
+    :host {
+      display: block;
+      width: 100%;
+      color: var(--sky-text-primary);
+      font-family: var(--sky-font);
+      user-select: none;
+      --sky-step-size: 28px;
+      --sky-step-border: 2px;
+      --sky-step-leftpad: 5px;
+    }
+    .node {
+      position: relative;
+      display: inline-grid;
+      place-items: center;
+      width: var(--sky-step-size);
+      height: var(--sky-step-size);
+      border: var(--sky-step-border) solid var(--sky-text-quinary);
+      border-radius: var(--sky-radius-full);
+      font-weight: 600;
+      line-height: 1;
+      font-size: 14px;
+      background: var(--sky-glass-primary);
+      transition:
+        border-color 160ms,
+        background-color 160ms,
+        color 160ms;
+      flex: 0 0 auto;
+    }
+    .node.completed {
+      border-color: var(--sky-active-primary);
+      color: #fff;
+      background: var(--sky-active-primary);
+    }
+    .icon {
+      display: inline-grid;
+      place-items: center;
+      width: 18px;
+      height: 18px;
+      line-height: 0;
+    }
+    sky-icon {
+      display: inline-block;
+      width: 1em;
+      height: 1em;
+    }
+    .node .number,
+    .node .bullet,
+    .node .regular-icon,
+    .node .checked-icon {
+      display: none;
+    }
+    .node.show-number .number,
+    .node.show-bullet .bullet,
+    .node.show-regular-icon .regular-icon,
+    .node.show-checked-icon .checked-icon {
+      display: inline-grid;
+    }
+
+    .labels {
+      display: flex;
+      flex-direction: column;
+      min-inline-size: 0;
+      font-family: var(--sky-font);
+    }
+    .label {
+      font-size: 14px;
+      font-weight: 600;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    .sub {
+      font-size: 12px;
+      color: var(--sky-text-secondary);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .step-btn {
+      display: inline-flex;
+      align-items: center;
+      gap: 10px;
+      padding: 2px 4px;
+      border: 0;
+      background: transparent;
+      color: inherit;
+      cursor: pointer;
+      width: max-content;
+      text-align: left;
+    }
+    .step-btn[aria-disabled="true"] {
+      cursor: not-allowed;
+      opacity: 0.6;
+    }
+    .step-btn:focus-visible .node {
+      outline: 3px solid
+        color-mix(in oklch, var(--sky-active-primary) 35%, transparent);
+      outline-offset: 2px;
+    }
+
+    .h-wrap {
+      position: relative;
+      overflow-x: auto;
+      padding: 12px 0;
+    }
+    .h-steps {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+    }
+    .connector {
+      position: relative;
+      background: var(--sky-text-quinary);
+      border-radius: var(--sky-radius-full);
+      flex: 1 1 24px;
+      height: 2px;
+    }
+    .connector::after {
+      content: "";
+      position: absolute;
+      inset: 0;
+      transform-origin: left;
+      transform: scaleX(0);
+      background: var(--sky-active-primary);
+      border-radius: inherit;
+      transition: transform 280ms ease;
+    }
+    .connector.active::after {
+      transform: scaleX(1);
+    }
+
+    :host([layout="vertical"]) .v-list {
+      position: relative;
+      overflow: visible;
+    }
+    :host([layout="vertical"]) .v-item {
+      position: relative;
+      overflow: visible;
+      margin-bottom: 12px;
+    }
+    :host([layout="vertical"]) .v-header {
+      display: flex;
+      align-items: flex-start;
+      gap: 12px;
+    }
+    :host([layout="vertical"]) .v-item:last-child {
+      margin-bottom: 0;
+    }
+
+    :host([layout="vertical"]) .v-panel {
+      display: grid;
+      grid-template-rows: 0fr;
+      opacity: 0;
+      transition:
+        grid-template-rows 260ms ease,
+        opacity 220ms ease;
+      overflow: visible;
+    }
+    :host([layout="vertical"]) .v-inner {
+      min-height: 0;
+      overflow: hidden;
+    }
+    :host([layout="vertical"]) .v-content {
+      margin-left: calc(var(--sky-step-size) / 2 + var(--sky-step-leftpad));
+      border-left: 2px solid var(--sky-text-quinary);
+      padding: 5px 0 0 calc(var(--sky-step-size)/2 + 12px);
+      transition: border-color 260ms ease;
+    }
+
+    /* Only non-last items get the thin dashed border when collapsed */
+    :host([layout="vertical"])
+      .v-item:not(:last-child)
+      .v-panel:not([data-open="true"])
+      .v-content {
+      border-left: 1px dashed var(--sky-text-quinary);
+      opacity: 0.6;
+    }
+
+    /* Only non-last items get the solid active border when open */
+    :host([layout="vertical"])
+      .v-item:not(:last-child)
+      .v-panel[data-open="true"]
+      .v-content {
+      border-left: 2px solid var(--sky-active-primary);
+    }
+
+    /* Ensure last item never shows a left border (safety override) */
+    :host([layout="vertical"]) .v-item:last-child .v-content {
+      border-left: none !important;
+    }
+
+    :host([layout="vertical"]) .v-item:not(:last-child)::after {
+      content: "";
+      position: absolute;
+      left: calc(var(--sky-step-size) / 2 + var(--sky-step-leftpad));
+      top: calc(var(--sky-step-size) + 8px);
+      bottom: -12px;
+      width: 2px;
+      background: var(--sky-text-quinary);
+      z-index: 0;
+      transition: background-color 260ms ease;
+    }
+
+    :host([layout="horizontal"]) .panels {
+      position: relative;
+    }
+
+    /* Base: panels are not absolute anymore */
+    :host([layout="horizontal"]) .panel {
+      display: none;
+      position: static;
+      opacity: 0;
+      width: 100%;
+    }
+
+    /* Active panel takes normal flow and sets host height naturally */
+    :host([layout="horizontal"]) .panel[data-active="true"] {
+      display: block;
+      position: static;
+      opacity: 1;
+      z-index: 1;
+    }
+
+    /* Only the leaving panel is absolute so it can animate away on top */
+    :host([layout="horizontal"]) .panel[data-leaving="true"] {
+      display: block;
+      position: absolute;
+      inset: 0;
+      z-index: 0;
+    }
+
+    /* Directional animations still work */
+    @keyframes slideInFromRight {
+      from {
+        transform: translateX(12px);
+        opacity: 0;
+      }
+      to {
+        transform: translateX(0);
+        opacity: 1;
+      }
+    }
+    @keyframes slideOutToLeft {
+      from {
+        transform: translateX(0);
+      }
+      to {
+        transform: translateX(-12px);
+        opacity: 0;
+      }
+    }
+    @keyframes slideInFromLeft {
+      from {
+        transform: translateX(-12px);
+        opacity: 0;
+      }
+      to {
+        transform: translateX(0);
+        opacity: 1;
+      }
+    }
+    @keyframes slideOutToRight {
+      from {
+        transform: translateX(0);
+      }
+      to {
+        transform: translateX(12px);
+        opacity: 0;
+      }
+    }
+
+    /* Apply based on container direction + panel state */
+    :host([layout="horizontal"])
+      .panels[data-dir="fwd"]
+      .panel[data-active="true"] {
+      animation: slideInFromRight 220ms ease both;
+    }
+    :host([layout="horizontal"])
+      .panels[data-dir="fwd"]
+      .panel[data-leaving="true"] {
+      animation: slideOutToLeft 220ms ease both;
+    }
+
+    :host([layout="horizontal"])
+      .panels[data-dir="back"]
+      .panel[data-active="true"] {
+      animation: slideInFromLeft 220ms ease both;
+    }
+    :host([layout="horizontal"])
+      .panels[data-dir="back"]
+      .panel[data-leaving="true"] {
+      animation: slideOutToRight 220ms ease both;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      :host([layout="horizontal"]) .panels {
+        transition: none;
+      }
+      :host([layout="horizontal"]) .panel {
+        transition: none;
+        transform: none;
+      }
+    }
+
+    :host([layout="vertical"]) .v-item.completed:not(:last-child)::after {
+      background: var(--sky-active-primary);
+    }
+    :host([layout="vertical"]) .v-item:last-child::after {
+      display: none;
+    }
+    :host([layout="vertical"]) .v-header .node {
+      position: relative;
+      z-index: 1;
+    }
+    :host([layout="vertical"]) .v-panel[data-open="true"] {
+      grid-template-rows: 1fr;
+      opacity: 1;
+    }
+
+    :host([layout="vertical"][all-expanded]) .v-panel {
+      grid-template-rows: 1fr;
+      opacity: 1;
+    }
+
+    /* All-expanded: docs-style — no content rail border, no “progress” chroming */
+    :host([layout="vertical"][all-expanded]) .v-content {
+      border-left: none !important;
+      opacity: 1 !important;
+    }
+    :host([layout="vertical"][all-expanded]) .step-btn {
+      cursor: default;
+      pointer-events: none;
+    }
+    :host([layout="vertical"][all-expanded]) .step-btn .node {
+      border-color: var(--sky-text-quinary);
+      color: inherit;
+      background: var(--sky-glass-primary);
+    }
+
+    .step-btn[aria-current="step"] .node {
+      border-color: var(--sky-active-primary);
+      color: var(--sky-active-primary);
+    }
+
+    :host([compact]) .h-steps {
+      gap: 8px;
+    }
+    :host([compact]) .connector {
+      flex-basis: 16px;
+    }
+    :host([compact]) .label {
+      font-size: 13px;
+    }
+    :host([compact]) .sub {
+      font-size: 11px;
+    }
+
+    ::slotted([slot^="panel-"]) {
+      display: block;
+      box-sizing: border-box;
+    }
+
+    .panel-content {
+      padding: 12px 0;
+    }
+  `}get _count(){return this.steps?.length??0}connectedCallback(){super.connectedCallback(),this.addEventListener("click",this._onTriggerClick,{capture:!0}),this.addEventListener("keydown",this._onTriggerKey,{capture:!0})}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",this._onTriggerClick,{capture:!0}),this.removeEventListener("keydown",this._onTriggerKey,{capture:!0})}_findTrigger(t){for(const e of t){if(!(e instanceof HTMLElement))continue;const t=e.getAttribute("data-sky-steps")||e.slot;if("back"===t||"next"===t)return e}return null}_activateTrigger(t){const e=t.getAttribute("data-sky-steps")||t.slot;"back"===e?this.goPrev():"next"===e&&this.goNext()}isCompleted(t){return this.completedSteps?this.completedSteps.includes(t):t<this.currentStep}canJump(t){return t===this.currentStep||(!!this.allowStepJump||1===Math.abs(t-this.currentStep))}onKeyDown(t){if(this.allExpanded&&"vertical"===this.layout)return;const e=t.key,s="horizontal"===this.layout;let i=this.currentStep;if(s&&"ArrowRight"===e||!s&&"ArrowDown"===e)i++;else if(s&&"ArrowLeft"===e||!s&&"ArrowUp"===e)i--;else if("Home"===e)i=1;else{if("End"!==e)return;i=this._count}t.preventDefault(),i=Math.min(Math.max(1,i),this._count);const a=this.steps[i-1];a?.disabled||this.canJump(i)&&this._setCurrent(i,!0)}onStepClick(t){const e=t+1,s=this.steps[t];s&&!s.disabled&&this.canJump(e)&&this._setCurrent(e)}prevIndex(){const t=this.currentStep-1;if(!this.allowStepJump)return t>=1&&!this.steps[t-1]?.disabled?t:null;for(let e=t;e>=1;e--)if(!this.steps[e-1]?.disabled)return e;return null}nextIndex(){const t=this.currentStep+1;if(!this.allowStepJump)return t<=this._count&&!this.steps[t-1]?.disabled?t:null;for(let e=t;e<=this._count;e++)if(!this.steps[e-1]?.disabled)return e;return null}goPrev(){const t=this.prevIndex();t&&this.canJump(t)&&this._setCurrent(t)}goNext(){const t=this.nextIndex();t&&this.canJump(t)&&this._setCurrent(t)}previous(){this.goPrev()}next(){this.goNext()}goToStep(t){const e=Math.min(Math.max(1,Math.floor(t)),this._count);return!!this.canJump(e)&&(this._setCurrent(e,!0),!0)}getCurrentStep(){return this.currentStep}prevStep(){this.previous()}nextStep(){this.next()}_setCurrent(t,e=!1){if(t===this.currentStep)return;const s=this.currentStep;this._prevStep=s,this.focusStep(t),this.currentStep=t,this.dispatchEvent(new CustomEvent("step-change",{detail:{step:t,previous:s},bubbles:!0,composed:!0})),this.updateComplete.then(()=>{this._applyDirectionAndLeaving(s,t)})}_applyDirectionAndLeaving(t,e){if("horizontal"!==this.layout)return;const s=this.renderRoot?.querySelector(".panels");if(!s)return;s.setAttribute("data-dir",e>t?"fwd":"back");const i=s.querySelector(`.panel[data-step="${t}"]`);if(i){i.setAttribute("data-leaving","true");const t=()=>{i.removeAttribute("data-leaving"),i.removeEventListener("animationend",t)};i.addEventListener("animationend",t),setTimeout(t,260)}}focusStep(t){const e=this.renderRoot?.querySelector(`.step-btn[data-index="${t}"]`);e?.focus()}renderNodeInner(t,e,s){const i=s?.icon??this.stepIcon,o=s?.checkedIcon??this.checkedIcon;return e&&o?a`<span class="icon checked-icon" aria-hidden="true"
+        ><sky-icon icon=${o}></sky-icon
+      ></span>`:i?a`<span class="icon regular-icon" aria-hidden="true"
+        ><sky-icon icon=${i}></sky-icon
+      ></span>`:this.hideNumbers&&!e?a`<span class="bullet index" aria-hidden="true">•</span>`:a`<span class="number index" aria-hidden="true">${t}</span>`}renderNode(t,e,s){const i=!!(s?.checkedIcon??this.checkedIcon),o=!!(s?.icon??this.stepIcon),n=e&&i?"show-checked-icon":o?"show-regular-icon":this.hideNumbers?"show-bullet":"show-number",r=l({node:!0,completed:!!e,[n]:!0});return a`<span class=${r} part="node">
+      ${this.renderNodeInner(t,e,s)}
+    </span>`}renderHStep(t){const e=t+1,s=this.steps[t],i=!!s?.disabled,o=this.isCompleted(e),n=this.currentStep===e,p=this.renderNode(e,o,s),c=this.showLabels?a`<span class="labels" part="labels">
+          <span class="label">${s?.label??`Step ${e}`}</span>
+          ${r(s?.subtitle,()=>a`<span class="sub">${s.subtitle}</span>`)}
+        </span>`:null,d=a`<button
+      class="step-btn"
+      data-index="${e}"
+      role="button"
+      aria-current=${n?"step":"false"}
+      aria-disabled=${i?"true":"false"}
+      @click=${()=>this.onStepClick(t)}
+    >
+      ${p}${c}
+    </button>`,h=t<this._count-1,u=this.isCompleted(e)&&(this.isCompleted(e+1)||this.currentStep>e),y=l({connector:!0,active:!!u});return[d,r(h,()=>a`<div class=${y} aria-hidden="true"></div>`,()=>a``)]}renderVerticalItem(t){const e=t+1,s=this.steps[t],i=!!s?.disabled,o=!this.allExpanded&&this.isCompleted(e),n=this.allExpanded||this.currentStep===e,p=this.renderNode(e,o,s),c=this.showLabels?a`<span class="labels" part="labels">
+          <span class="label">${s?.label??`Step ${e}`}</span>
+          ${r(s?.subtitle,()=>a`<span class="sub">${s.subtitle}</span>`)}
+        </span>`:null,d=`panel-${e}-content`,h=l({"v-item":!0,completed:!!o}),u=this.allExpanded?"false":this.currentStep===e?"step":"false";return a`
+      <div class=${h}>
+        <div class="v-header">
+          <button
+            class="step-btn"
+            type="button"
+            tabindex=${this.allExpanded?"-1":"0"}
+            data-index="${e}"
+            aria-current=${u}
+            aria-disabled=${i?"true":"false"}
+            aria-expanded=${n?"true":"false"}
+            aria-controls=${d}
+            @click=${()=>this.onStepClick(t)}
+          >
+            ${p}${c}
+          </button>
+        </div>
+
+        <div
+          id=${d}
+          class="v-panel"
+          role="region"
+          data-open=${String(n)}
+        >
+          <div class="v-inner">
+            <div class="v-content">
+              <slot name=${`panel-${e}`}></slot>
+            </div>
+          </div>
+        </div>
+      </div>
+    `}render(){const t=this._count;return t?"vertical"===this.layout?a`
+        <slot name="before"></slot>
+        <div class="v-list" part="panels" @keydown=${this.onKeyDown}>
+          ${this.steps.map((t,e)=>this.renderVerticalItem(e))}
+        </div>
+        <slot></slot>
+        <slot name="after"></slot>
+      `:a`
+      <slot name="before"></slot>
+
+      <div class="h-wrap" @keydown=${this.onKeyDown}>
+        <div class="h-steps" part="steps">
+          ${this.steps.map((t,e)=>this.renderHStep(e))}
+        </div>
+      </div>
+
+      <div class="panels" part="panels">
+        ${Array.from({length:t},(t,e)=>{const s=e+1,i=s===this.currentStep;return a`
+            <div
+              class="panel"
+              part="panel"
+              data-step=${s}
+              data-active=${String(i)}
+              ?inert=${!i}
+            >
+              <div class="panel-content">
+                <slot name=${`panel-${s}`}></slot>
+              </div>
+            </div>
+          `})}
+      </div>
+
+      <slot></slot>
+      <slot name="after"></slot>
+    `:a``}};t([o({type:Array}),e("design:type",Array)],c.prototype,"steps",void 0),t([o({type:Number}),e("design:type",Object)],c.prototype,"currentStep",void 0),t([o({type:String,reflect:!0}),e("design:type",String)],c.prototype,"layout",void 0),t([o({type:Boolean}),e("design:type",Object)],c.prototype,"allowStepJump",void 0),t([o({type:Boolean}),e("design:type",Object)],c.prototype,"hideNumbers",void 0),t([o({type:Boolean}),e("design:type",Object)],c.prototype,"showLabels",void 0),t([o({type:Boolean,reflect:!0}),e("design:type",Object)],c.prototype,"compact",void 0),t([o({type:Array}),e("design:type",Object)],c.prototype,"completedSteps",void 0),t([o({type:String}),e("design:type",String)],c.prototype,"stepIcon",void 0),t([o({type:String}),e("design:type",String)],c.prototype,"checkedIcon",void 0),t([o({type:Boolean,reflect:!0}),e("design:type",Object)],c.prototype,"allExpanded",void 0),c=t([n("sky-steps")],c);export{c as SkySteps};
+//# sourceMappingURL=sky-steps.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sky-steps.js","sources":["../../src/sky-steps/sky-steps.ts"],"sourcesContent":[null],"names":["SkySteps","LitElement","constructor","this","steps","currentStep","layout","allowStepJump","hideNumbers","showLabels","compact","completedSteps","allExpanded","_prevStep","_onTriggerClick","ev","el","_findTrigger","composedPath","preventDefault","_activateTrigger","_onTriggerKey","key","dependencies","SkyIcon","styles","css","_count","length","connectedCallback","super","addEventListener","capture","disconnectedCallback","removeEventListener","path","t","HTMLElement","val","getAttribute","slot","goPrev","goNext","isCompleted","idx1","includes","canJump","toIndex1","Math","abs","onKeyDown","horizontal","next","min","max","target","disabled","_setCurrent","onStepClick","idx0","item","prevIndex","want","i","nextIndex","idx","previous","goToStep","step","floor","getCurrentStep","prevStep","nextStep","focus","focusStep","dispatchEvent","CustomEvent","detail","bubbles","composed","updateComplete","then","_applyDirectionAndLeaving","prev","wrap","renderRoot","querySelector","setAttribute","leaving","cleanup","removeAttribute","setTimeout","btn","renderNodeInner","completed","stepIcon","icon","checkedIcon","html","renderNode","hasChecked","hasRegular","showClass","nodeClasses","classMap","node","renderHStep","isCurrent","labels","label","when","subtitle","showConnector","connectorActive","connectorClasses","connector","active","renderVerticalItem","isOpen","panelId","vItemClasses","ariaCurrent","String","render","count","map","_","Array","from","__decorate","property","type","prototype","Number","reflect","Boolean","customElement"],"mappings":"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"}

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

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

package/dist/sky-switch/index.js

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