@krollins/blueprint 0.1.11 → 0.1.13

package/dist/components/stepper.js

@@ -0,0 +1,812 @@
+import { css as v, LitElement as f, html as a, nothing as c } from "lit";
+import { property as n, state as h, customElement as g } from "lit/decorators.js";
+import { classMap as b } from "lit/directives/class-map.js";
+import { b as u } from "../shared/boolean-converter-XDGfS9LC.js";
+const m = v`
+  /* ─────────────────────────────────────────────────────────────────────────────
+   * Base Styles
+   * ───────────────────────────────────────────────────────────────────────────── */
+
+  :host {
+    display: block;
+    font-family: var(--bp-font-family);
+  }
+
+  :host([disabled]) {
+    opacity: var(--bp-opacity-disabled);
+    pointer-events: none;
+  }
+
+  .stepper {
+    display: flex;
+    flex-direction: column;
+    gap: var(--bp-spacing-lg);
+  }
+
+  /* ─────────────────────────────────────────────────────────────────────────────
+   * Step List
+   * ───────────────────────────────────────────────────────────────────────────── */
+
+  .step-list {
+    display: flex;
+    gap: var(--bp-spacing-xs);
+  }
+
+  /* ─────────────────────────────────────────────────────────────────────────────
+   * Individual Step
+   * ───────────────────────────────────────────────────────────────────────────── */
+
+  .step {
+    display: flex;
+    align-items: flex-start;
+    flex: 1;
+    position: relative;
+    outline: none;
+  }
+
+  .step--clickable {
+    cursor: pointer;
+  }
+
+  .step--clickable:focus-visible .step-indicator {
+    outline: var(--bp-focus-width) var(--bp-focus-style) var(--bp-color-focus);
+    outline-offset: var(--bp-focus-offset);
+  }
+
+  .step--disabled {
+    cursor: not-allowed;
+  }
+
+  /* ─────────────────────────────────────────────────────────────────────────────
+   * Step Indicator (Number Circle)
+   * ───────────────────────────────────────────────────────────────────────────── */
+
+  .step-indicator {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: var(--bp-spacing-xl);
+    height: var(--bp-spacing-xl);
+    border-radius: 50%;
+    border: var(--bp-border-width) solid var(--bp-color-border);
+    background-color: var(--bp-color-surface);
+    color: var(--bp-color-text-muted);
+    font-size: var(--bp-font-size-sm);
+    font-weight: var(--bp-font-weight-medium);
+    position: relative;
+    transition:
+      background-color var(--bp-transition-fast),
+      border-color var(--bp-transition-fast),
+      color var(--bp-transition-fast);
+  }
+
+  /* Expand touch target to 44×44px for WCAG 2.2 AA compliance */
+  .step--clickable .step-indicator::after {
+    content: '';
+    position: absolute;
+    inset: calc((var(--bp-spacing-11) - var(--bp-spacing-xl)) / -2);
+  }
+
+  .step-indicator--current {
+    background-color: var(--bp-color-primary);
+    border-color: var(--bp-color-primary);
+    color: var(--bp-color-text-inverse);
+  }
+
+  .step-indicator--complete {
+    background-color: var(--bp-color-success);
+    border-color: var(--bp-color-success);
+    color: var(--bp-color-text-inverse);
+  }
+
+  .step-indicator--error {
+    background-color: var(--bp-color-error);
+    border-color: var(--bp-color-error);
+    color: var(--bp-color-text-inverse);
+  }
+
+  .step-number {
+    line-height: 1;
+  }
+
+  .step-icon {
+    width: var(--bp-spacing-md);
+    height: var(--bp-spacing-md);
+  }
+
+  /* ─────────────────────────────────────────────────────────────────────────────
+   * Step Content (Label & Description)
+   * ───────────────────────────────────────────────────────────────────────────── */
+
+  .step-content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--bp-spacing-2xs);
+    padding-left: var(--bp-spacing-sm);
+    padding-right: var(--bp-spacing-md);
+  }
+
+  .step-label {
+    font-size: var(--bp-font-size-sm);
+    font-weight: var(--bp-font-weight-medium);
+    color: var(--bp-color-text);
+    line-height: var(--bp-line-height-tight);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .step--current .step-label {
+    color: var(--bp-color-primary);
+  }
+
+  .step--complete .step-label {
+    color: var(--bp-color-text);
+  }
+
+  .step--error .step-label {
+    color: var(--bp-color-error);
+  }
+
+  .step--disabled .step-label {
+    color: var(--bp-color-text-muted);
+  }
+
+  .step--pending .step-label {
+    color: var(--bp-color-text-muted);
+  }
+
+  .step-description {
+    font-size: var(--bp-font-size-xs);
+    color: var(--bp-color-text-muted);
+    line-height: var(--bp-line-height-normal);
+  }
+
+  .step-error {
+    font-size: var(--bp-font-size-xs);
+    color: var(--bp-color-error);
+    line-height: var(--bp-line-height-normal);
+  }
+
+  /* ─────────────────────────────────────────────────────────────────────────────
+   * Connector Lines
+   * ───────────────────────────────────────────────────────────────────────────── */
+
+  .connector {
+    flex: 1;
+    height: calc(var(--bp-border-width) * 2);
+    background-color: var(--bp-color-border);
+    margin-top: calc(var(--bp-spacing-xl) / 2);
+    margin-left: var(--bp-spacing-sm);
+    margin-right: var(--bp-spacing-sm);
+    transition: background-color var(--bp-transition-fast);
+  }
+
+  .step--complete .connector {
+    background-color: var(--bp-color-success);
+  }
+
+  .step--error .connector {
+    background-color: var(--bp-color-error);
+  }
+
+  /* ─────────────────────────────────────────────────────────────────────────────
+   * Horizontal Orientation (Default)
+   * ───────────────────────────────────────────────────────────────────────────── */
+
+  .stepper--horizontal .step-list {
+    flex-direction: row;
+  }
+
+  .stepper--horizontal .step {
+    flex-direction: row;
+    align-items: flex-start;
+  }
+
+  .stepper--horizontal .step-content {
+    max-width: var(--bp-spacing-24);
+  }
+
+  /* ─────────────────────────────────────────────────────────────────────────────
+   * Vertical Orientation
+   * ───────────────────────────────────────────────────────────────────────────── */
+
+  .stepper--vertical .step-list {
+    flex-direction: column;
+    gap: 0;
+  }
+
+  .stepper--vertical .step {
+    flex-direction: row;
+    padding-bottom: var(--bp-spacing-lg);
+  }
+
+  .stepper--vertical .step:last-child {
+    padding-bottom: 0;
+  }
+
+  .stepper--vertical .step-content {
+    flex: 1;
+    padding-right: 0;
+  }
+
+  .stepper--vertical .connector {
+    position: absolute;
+    left: calc(var(--bp-spacing-xl) / 2);
+    top: calc(var(--bp-spacing-xl) + var(--bp-spacing-xs));
+    bottom: 0;
+    width: calc(var(--bp-border-width) * 2);
+    height: auto;
+    margin: 0;
+  }
+
+  /* ─────────────────────────────────────────────────────────────────────────────
+   * Size Variants
+   * ───────────────────────────────────────────────────────────────────────────── */
+
+  /* Small */
+  .stepper--sm .step-indicator {
+    width: var(--bp-spacing-lg);
+    height: var(--bp-spacing-lg);
+    font-size: var(--bp-font-size-xs);
+  }
+
+  .stepper--sm .step--clickable .step-indicator::after {
+    inset: calc((var(--bp-spacing-11) - var(--bp-spacing-lg)) / -2);
+  }
+
+  .stepper--sm .step-icon {
+    width: var(--bp-spacing-sm);
+    height: var(--bp-spacing-sm);
+  }
+
+  .stepper--sm .step-label {
+    font-size: var(--bp-font-size-xs);
+  }
+
+  .stepper--sm .step-description {
+    font-size: var(--bp-font-size-xs);
+  }
+
+  .stepper--sm .connector {
+    margin-top: calc(var(--bp-spacing-lg) / 2);
+  }
+
+  .stepper--sm.stepper--vertical .connector {
+    left: calc(var(--bp-spacing-lg) / 2);
+    top: calc(var(--bp-spacing-lg) + var(--bp-spacing-xs));
+  }
+
+  /* Large */
+  .stepper--lg .step-indicator {
+    width: var(--bp-spacing-2xl);
+    height: var(--bp-spacing-2xl);
+    font-size: var(--bp-font-size-base);
+  }
+
+  .stepper--lg .step--clickable .step-indicator::after {
+    inset: calc((var(--bp-spacing-11) - var(--bp-spacing-2xl)) / -2);
+  }
+
+  .stepper--lg .step-icon {
+    width: var(--bp-spacing-lg);
+    height: var(--bp-spacing-lg);
+  }
+
+  .stepper--lg .step-label {
+    font-size: var(--bp-font-size-base);
+  }
+
+  .stepper--lg .step-description {
+    font-size: var(--bp-font-size-sm);
+  }
+
+  .stepper--lg .connector {
+    margin-top: calc(var(--bp-spacing-2xl) / 2);
+  }
+
+  .stepper--lg.stepper--vertical .connector {
+    left: calc(var(--bp-spacing-2xl) / 2);
+    top: calc(var(--bp-spacing-2xl) + var(--bp-spacing-xs));
+  }
+
+  /* ─────────────────────────────────────────────────────────────────────────────
+   * Panel
+   * ───────────────────────────────────────────────────────────────────────────── */
+
+  .panel {
+    padding: var(--bp-spacing-md);
+    background-color: var(--bp-color-surface);
+    border: var(--bp-border-width) solid var(--bp-color-border);
+    border-radius: var(--bp-border-radius-md);
+  }
+
+  .panel:not(.panel--has-content) {
+    display: none;
+  }
+
+  /* ─────────────────────────────────────────────────────────────────────────────
+   * Actions
+   * ───────────────────────────────────────────────────────────────────────────── */
+
+  .actions {
+    display: flex;
+    gap: var(--bp-spacing-sm);
+    justify-content: flex-end;
+  }
+
+  .actions:empty {
+    display: none;
+  }
+
+  /* ─────────────────────────────────────────────────────────────────────────────
+   * Navigation Buttons
+   * ───────────────────────────────────────────────────────────────────────────── */
+
+  .nav-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--bp-spacing-sm) var(--bp-spacing-md);
+    font-family: var(--bp-font-family);
+    font-size: var(--bp-font-size-sm);
+    font-weight: var(--bp-font-weight-medium);
+    line-height: var(--bp-line-height-tight);
+    border-radius: var(--bp-border-radius-md);
+    cursor: pointer;
+    transition:
+      background-color var(--bp-transition-fast),
+      border-color var(--bp-transition-fast),
+      color var(--bp-transition-fast);
+  }
+
+  .nav-button--previous {
+    background-color: var(--bp-color-surface);
+    border: var(--bp-border-width) solid var(--bp-color-border);
+    color: var(--bp-color-text);
+  }
+
+  .nav-button--previous:hover:not(:disabled) {
+    background-color: var(--bp-color-surface-hover);
+    border-color: var(--bp-color-border-strong);
+  }
+
+  .nav-button--next {
+    background-color: var(--bp-color-primary);
+    border: var(--bp-border-width) solid var(--bp-color-primary);
+    color: var(--bp-color-text-inverse);
+  }
+
+  .nav-button--next:hover:not(:disabled) {
+    background-color: var(--bp-color-primary-hover);
+    border-color: var(--bp-color-primary-hover);
+  }
+
+  .nav-button:disabled {
+    opacity: var(--bp-opacity-disabled);
+    cursor: not-allowed;
+  }
+
+  .nav-button:focus-visible {
+    outline: var(--bp-focus-width) var(--bp-focus-style) var(--bp-color-focus);
+    outline-offset: var(--bp-focus-offset);
+  }
+
+  /* ─────────────────────────────────────────────────────────────────────────────
+   * Hover States
+   * ───────────────────────────────────────────────────────────────────────────── */
+
+  .step--clickable:hover .step-indicator--pending {
+    border-color: var(--bp-color-border-strong);
+  }
+
+  .step--clickable:hover .step-indicator--complete {
+    background-color: var(--bp-color-success-hover);
+    border-color: var(--bp-color-success-hover);
+  }
+
+  .step--clickable:hover .step-indicator--current {
+    background-color: var(--bp-color-primary-hover);
+    border-color: var(--bp-color-primary-hover);
+  }
+
+  /* ─────────────────────────────────────────────────────────────────────────────
+   * Reduced Motion
+   * ───────────────────────────────────────────────────────────────────────────── */
+
+  @media (prefers-reduced-motion: reduce) {
+    .step-indicator,
+    .connector {
+      transition: none;
+    }
+  }
+`;
+var S = Object.defineProperty, y = Object.getOwnPropertyDescriptor, p = (t, e, r, s) => {
+  for (var o = s > 1 ? void 0 : s ? y(e, r) : e, l = t.length - 1, d; l >= 0; l--)
+    (d = t[l]) && (o = (s ? d(e, r, o) : d(o)) || o);
+  return s && o && S(e, r, o), o;
+};
+let i = class extends f {
+  constructor() {
+    super(), this.completedSteps = /* @__PURE__ */ new Set(), this.errorSteps = /* @__PURE__ */ new Set(), this.panelHasContent = !1, this.steps = [], this.currentStep = 0, this.orientation = "horizontal", this.size = "md", this.linear = !0, this.disabled = !1, this.hideLabels = !1, this.clickable = !0, this.showNavigation = !0;
+  }
+  willUpdate(t) {
+    if (super.willUpdate(t), t.has("steps")) {
+      const e = /* @__PURE__ */ new Set();
+      this.steps.forEach((r, s) => {
+        r.error && e.add(s);
+      }), this.errorSteps = e;
+    }
+    if (t.has("currentStep")) {
+      const e = t.get("currentStep");
+      if (e !== void 0 && this.currentStep > e) {
+        const r = new Set(this.completedSteps);
+        for (let s = 0; s < this.currentStep; s++)
+          this.errorSteps.has(s) || r.add(s);
+        this.completedSteps = r;
+      }
+    }
+  }
+  /**
+   * Get the status of a step based on index
+   * @param index Zero-based step index
+   * @returns Step status (pending, current, complete, or error)
+   */
+  _getStepStatus(t) {
+    return this.errorSteps.has(t) ? "error" : this.completedSteps.has(t) ? "complete" : t === this.currentStep ? "current" : t < this.currentStep ? "complete" : "pending";
+  }
+  /**
+   * Check if a step is clickable based on linear mode and step state
+   * @param index Zero-based step index
+   * @param step Step configuration
+   * @returns True if the step can be clicked to navigate
+   */
+  _isStepClickable(t, e) {
+    if (this.disabled || e.disabled || !this.clickable) return !1;
+    const r = this._getStepStatus(t);
+    return this.linear ? r === "complete" || t === this.currentStep : !0;
+  }
+  /**
+   * Handle click events on step indicators
+   * Validates clickability and emits bp-step-click event before navigating
+   * @param index Zero-based step index that was clicked
+   * @param step Step configuration
+   */
+  _handleStepClick(t, e) {
+    if (!this._isStepClickable(t, e)) return;
+    const r = {
+      step: t,
+      stepId: e.id,
+      previousStep: this.currentStep
+    }, s = new CustomEvent("bp-step-click", {
+      detail: r,
+      bubbles: !0,
+      composed: !0
+    });
+    if (this.dispatchEvent(s), t !== this.currentStep) {
+      if (t < this.currentStep)
+        for (let o = t; o < this.steps.length; o++)
+          this.completedSteps.delete(o);
+      this.currentStep = t, this._emitStepChange(t, e);
+    }
+  }
+  /**
+   * Handle keyboard navigation on step indicators
+   * Supports Enter/Space for activation and Arrow keys for focus movement
+   * @param event Keyboard event
+   * @param index Zero-based step index
+   * @param step Step configuration
+   */
+  _handleStepKeydown(t, e, r) {
+    (t.key === "Enter" || t.key === " ") && (t.preventDefault(), this._handleStepClick(e, r));
+    const s = this.orientation === "horizontal", o = s ? "ArrowLeft" : "ArrowUp", l = s ? "ArrowRight" : "ArrowDown";
+    t.key === o && e > 0 ? (t.preventDefault(), this._focusStep(e - 1)) : t.key === l && e < this.steps.length - 1 && (t.preventDefault(), this._focusStep(e + 1));
+  }
+  /**
+   * Focus a specific step indicator element
+   * @param index Zero-based step index to focus
+   */
+  _focusStep(t) {
+    this.shadowRoot?.querySelector(
+      `[data-step-index="${t}"]`
+    )?.focus();
+  }
+  /**
+   * Emit bp-step-change event when navigating between steps
+   * @param index Zero-based step index navigated to
+   * @param step Step configuration
+   */
+  _emitStepChange(t, e) {
+    const r = new CustomEvent("bp-step-change", {
+      detail: { step: t, stepId: e.id },
+      bubbles: !0,
+      composed: !0
+    });
+    this.dispatchEvent(r);
+  }
+  /**
+   * Navigate to the next step
+   */
+  next() {
+    if (this.currentStep >= this.steps.length - 1 || this.disabled) return !1;
+    const t = this.steps[this.currentStep];
+    if (this.errorSteps.has(this.currentStep)) return !1;
+    this.completedSteps.add(this.currentStep), this.currentStep++, this._emitStepChange(this.currentStep, this.steps[this.currentStep]);
+    const e = new CustomEvent("bp-step-complete", {
+      detail: { step: this.currentStep - 1, stepId: t.id },
+      bubbles: !0,
+      composed: !0
+    });
+    return this.dispatchEvent(e), !0;
+  }
+  /**
+   * Navigate to the previous step
+   */
+  previous() {
+    if (this.currentStep <= 0 || this.disabled) return !1;
+    for (let t = this.currentStep - 1; t < this.steps.length; t++)
+      this.completedSteps.delete(t);
+    return this.currentStep--, this._emitStepChange(this.currentStep, this.steps[this.currentStep]), !0;
+  }
+  /**
+   * Go to a specific step
+   */
+  goToStep(t) {
+    if (t < 0 || t >= this.steps.length || this.disabled) return !1;
+    const e = this.steps[t];
+    if (e.disabled || this.linear && t > this.currentStep)
+      return !1;
+    if (t < this.currentStep)
+      for (let r = t; r < this.steps.length; r++)
+        this.completedSteps.delete(r);
+    return this.currentStep = t, this._emitStepChange(t, e), !0;
+  }
+  /**
+   * Mark a step as having an error
+   */
+  setStepError(t, e) {
+    e ? (this.errorSteps.add(t), this.completedSteps.delete(t)) : this.errorSteps.delete(t), this.requestUpdate();
+  }
+  /**
+   * Mark a step as complete
+   */
+  setStepComplete(t, e) {
+    e ? (this.completedSteps.add(t), this.errorSteps.delete(t)) : this.completedSteps.delete(t), this.requestUpdate();
+  }
+  /**
+   * Reset the stepper to the first step
+   */
+  reset() {
+    this.currentStep = 0, this.completedSteps.clear(), this.errorSteps.clear(), this.requestUpdate();
+  }
+  /**
+   * Check if we're on the first step
+   */
+  get isFirstStep() {
+    return this.currentStep === 0;
+  }
+  /**
+   * Check if we're on the last step
+   */
+  get isLastStep() {
+    return this.currentStep === this.steps.length - 1;
+  }
+  /**
+   * Get the current step configuration
+   */
+  get currentStepConfig() {
+    return this.steps[this.currentStep];
+  }
+  /**
+   * Render the step indicator (number circle with optional icon)
+   * Shows checkmark for complete, X for error, or step number for other states
+   * @param index Zero-based step index
+   * @param status Current step status
+   * @returns TemplateResult for step indicator
+   */
+  _renderStepIndicator(t, e) {
+    const r = e === "complete", s = e === "error";
+    return a`
+      <div
+        class=${b({
+      "step-indicator": !0,
+      [`step-indicator--${e}`]: !0
+    })}
+        part="step-indicator"
+      >
+        ${r ? a`<svg
+              class="step-icon"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="3"
+              aria-hidden="true"
+            >
+              <polyline points="20 6 9 17 4 12"></polyline>
+            </svg>` : s ? a`<svg
+                class="step-icon"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                aria-hidden="true"
+              >
+                <line x1="18" y1="6" x2="6" y2="18"></line>
+                <line x1="6" y1="6" x2="18" y2="18"></line>
+              </svg>` : a`<span class="step-number">${t + 1}</span>`}
+      </div>
+    `;
+  }
+  /**
+   * Render a complete step with indicator, label, description, and connector
+   * @param step Step configuration
+   * @param index Zero-based step index
+   * @returns TemplateResult for step
+   */
+  _renderStep(t, e) {
+    const r = this._getStepStatus(e), s = this._isStepClickable(e, t), o = e === this.steps.length - 1;
+    return a`
+      <div
+        class=${b({
+      step: !0,
+      [`step--${r}`]: !0,
+      "step--disabled": t.disabled || this.disabled,
+      "step--clickable": s
+    })}
+        part="step"
+        role="listitem"
+        data-step-index=${e}
+        tabindex=${s ? 0 : -1}
+        aria-current=${r === "current" ? "step" : "false"}
+        aria-disabled=${t.disabled || this.disabled ? "true" : "false"}
+        @click=${() => this._handleStepClick(e, t)}
+        @keydown=${(l) => this._handleStepKeydown(l, e, t)}
+      >
+        ${this._renderStepIndicator(e, r)}
+        ${this.hideLabels ? c : a`
+              <div class="step-content" part="step-content">
+                <span class="step-label" part="step-label" title=${t.label}
+                  >${t.label}</span
+                >
+                ${t.description ? a`<span class="step-description" part="step-description"
+                      >${t.description}</span
+                    >` : c}
+                ${r === "error" && t.error ? a`<span class="step-error">${t.error}</span>` : c}
+              </div>
+            `}
+        ${o ? c : a`<div class="connector" part="connector"></div>`}
+      </div>
+    `;
+  }
+  /**
+   * Handle slotchange on the panel slot to track whether content is provided
+   */
+  _handlePanelSlotChange(t) {
+    const e = t.target;
+    this.panelHasContent = e.assignedNodes({ flatten: !0 }).length > 0;
+  }
+  /**
+   * Render the content panel for the current step
+   * Shows slotted content via step-{id} slot
+   * @returns TemplateResult for panel or nothing if no current step
+   */
+  _renderPanel() {
+    const t = this.steps[this.currentStep];
+    return t ? a`
+      <div
+        class=${b({
+      panel: !0,
+      "panel--has-content": this.panelHasContent
+    })}
+        part="panel"
+        role="tabpanel"
+      >
+        <slot
+          name="step-${t.id}"
+          @slotchange=${this._handlePanelSlotChange}
+        ></slot>
+      </div>
+    ` : c;
+  }
+  render() {
+    return a`
+      <div
+        class=${b({
+      stepper: !0,
+      [`stepper--${this.orientation}`]: !0,
+      [`stepper--${this.size}`]: !0,
+      "stepper--disabled": this.disabled
+    })}
+        part="stepper"
+      >
+        <div
+          class="step-list"
+          part="step-list"
+          role="list"
+          aria-label="Progress steps"
+        >
+          ${this.steps.map((t, e) => this._renderStep(t, e))}
+        </div>
+        ${this._renderPanel()}
+        <div class="actions" part="actions">
+          <slot name="actions">
+            ${this.showNavigation ? this._renderDefaultNavigation() : c}
+          </slot>
+        </div>
+      </div>
+    `;
+  }
+  /**
+   * Render default navigation buttons (Previous/Next)
+   * Only shown when showNavigation is true and no custom actions are slotted
+   */
+  _renderDefaultNavigation() {
+    return a`
+      <button
+        class="nav-button nav-button--previous"
+        part="nav-button-previous"
+        ?disabled=${this.isFirstStep || this.disabled}
+        @click=${() => this.previous()}
+      >
+        Previous
+      </button>
+      <button
+        class="nav-button nav-button--next"
+        part="nav-button-next"
+        ?disabled=${this.isLastStep || this.disabled}
+        @click=${() => this.next()}
+      >
+        ${this.isLastStep ? "Finish" : "Next"}
+      </button>
+    `;
+  }
+};
+i.styles = [m];
+p([
+  n({ type: Array })
+], i.prototype, "steps", 2);
+p([
+  n({ type: Number, reflect: !0, attribute: "current-step" })
+], i.prototype, "currentStep", 2);
+p([
+  n({ type: String, reflect: !0 })
+], i.prototype, "orientation", 2);
+p([
+  n({ type: String, reflect: !0 })
+], i.prototype, "size", 2);
+p([
+  n({ converter: u, reflect: !0 })
+], i.prototype, "linear", 2);
+p([
+  n({ type: Boolean, reflect: !0 })
+], i.prototype, "disabled", 2);
+p([
+  n({ type: Boolean, reflect: !0, attribute: "hide-labels" })
+], i.prototype, "hideLabels", 2);
+p([
+  n({ converter: u, reflect: !0 })
+], i.prototype, "clickable", 2);
+p([
+  n({
+    converter: u,
+    reflect: !0,
+    attribute: "show-navigation"
+  })
+], i.prototype, "showNavigation", 2);
+p([
+  h()
+], i.prototype, "completedSteps", 2);
+p([
+  h()
+], i.prototype, "errorSteps", 2);
+p([
+  h()
+], i.prototype, "panelHasContent", 2);
+i = p([
+  g("bp-stepper")
+], i);
+export {
+  i as BpStepper
+};
+//# sourceMappingURL=stepper.js.map