@krollins/blueprint 0.2.3 → 0.3.0

package/dist/shared/stepper-B42LunTc.js

@@ -0,0 +1,713 @@
+import { t as e } from "./decorate-BJVyhdRd.js";
+import { t } from "./boolean-converter-saxBDLhA.js";
+import { LitElement as n, css as r, html as i, nothing as a } from "lit";
+import { customElement as o, property as s, state as c } from "lit/decorators.js";
+import { classMap as l } from "lit/directives/class-map.js";
+//#region source/components/stepper/stepper.style.ts
+var u = r`
+  /* ─────────────────────────────────────────────────────────────────────────────
+   * 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);
+    background-image: linear-gradient(
+      var(--bp-color-hover-overlay),
+      var(--bp-color-hover-overlay)
+    );
+    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;
+    }
+  }
+`, d = class extends n {
+	static {
+		this.styles = [u];
+	}
+	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(e) {
+		if (super.willUpdate(e), e.has("steps")) {
+			let e = /* @__PURE__ */ new Set();
+			this.steps.forEach((t, n) => {
+				t.error && e.add(n);
+			}), this.errorSteps = e;
+		}
+		if (e.has("currentStep")) {
+			let t = e.get("currentStep");
+			if (t !== void 0 && this.currentStep > t) {
+				let e = new Set(this.completedSteps);
+				for (let t = 0; t < this.currentStep; t++) this.errorSteps.has(t) || e.add(t);
+				this.completedSteps = e;
+			}
+		}
+	}
+	_getStepStatus(e) {
+		return this.errorSteps.has(e) ? "error" : this.completedSteps.has(e) ? "complete" : e === this.currentStep ? "current" : e < this.currentStep ? "complete" : "pending";
+	}
+	_isStepClickable(e, t) {
+		if (this.disabled || t.disabled || !this.clickable) return !1;
+		let n = this._getStepStatus(e);
+		return !this.linear || n === "complete" || e === this.currentStep;
+	}
+	_handleStepClick(e, t) {
+		if (!this._isStepClickable(e, t)) return;
+		let n = {
+			step: e,
+			stepId: t.id,
+			previousStep: this.currentStep
+		}, r = new CustomEvent("bp-step-click", {
+			detail: n,
+			bubbles: !0,
+			composed: !0
+		});
+		if (this.dispatchEvent(r), e !== this.currentStep) {
+			if (e < this.currentStep) for (let t = e; t < this.steps.length; t++) this.completedSteps.delete(t);
+			this.currentStep = e, this._emitStepChange(e, t);
+		}
+	}
+	_handleStepKeydown(e, t, n) {
+		(e.key === "Enter" || e.key === " ") && (e.preventDefault(), this._handleStepClick(t, n));
+		let r = this.orientation === "horizontal", i = r ? "ArrowLeft" : "ArrowUp", a = r ? "ArrowRight" : "ArrowDown";
+		e.key === i && t > 0 ? (e.preventDefault(), this._focusStep(t - 1)) : e.key === a && t < this.steps.length - 1 && (e.preventDefault(), this._focusStep(t + 1));
+	}
+	_focusStep(e) {
+		(this.shadowRoot?.querySelector(`[data-step-index="${e}"]`))?.focus();
+	}
+	_emitStepChange(e, t) {
+		let n = new CustomEvent("bp-step-change", {
+			detail: {
+				step: e,
+				stepId: t.id
+			},
+			bubbles: !0,
+			composed: !0
+		});
+		this.dispatchEvent(n);
+	}
+	next() {
+		if (this.currentStep >= this.steps.length - 1 || this.disabled) return !1;
+		let e = 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]);
+		let t = new CustomEvent("bp-step-complete", {
+			detail: {
+				step: this.currentStep - 1,
+				stepId: e.id
+			},
+			bubbles: !0,
+			composed: !0
+		});
+		return this.dispatchEvent(t), !0;
+	}
+	previous() {
+		if (this.currentStep <= 0 || this.disabled) return !1;
+		for (let e = this.currentStep - 1; e < this.steps.length; e++) this.completedSteps.delete(e);
+		return this.currentStep--, this._emitStepChange(this.currentStep, this.steps[this.currentStep]), !0;
+	}
+	goToStep(e) {
+		if (e < 0 || e >= this.steps.length || this.disabled) return !1;
+		let t = this.steps[e];
+		if (t.disabled || this.linear && e > this.currentStep) return !1;
+		if (e < this.currentStep) for (let t = e; t < this.steps.length; t++) this.completedSteps.delete(t);
+		return this.currentStep = e, this._emitStepChange(e, t), !0;
+	}
+	setStepError(e, t) {
+		t ? (this.errorSteps.add(e), this.completedSteps.delete(e)) : this.errorSteps.delete(e), this.requestUpdate();
+	}
+	setStepComplete(e, t) {
+		t ? (this.completedSteps.add(e), this.errorSteps.delete(e)) : this.completedSteps.delete(e), this.requestUpdate();
+	}
+	reset() {
+		this.currentStep = 0, this.completedSteps.clear(), this.errorSteps.clear(), this.requestUpdate();
+	}
+	get isFirstStep() {
+		return this.currentStep === 0;
+	}
+	get isLastStep() {
+		return this.currentStep === this.steps.length - 1;
+	}
+	get currentStepConfig() {
+		return this.steps[this.currentStep];
+	}
+	_renderStepIndicator(e, t) {
+		let n = t === "complete", r = t === "error";
+		return i`
+      <div
+        class=${l({
+			"step-indicator": !0,
+			[`step-indicator--${t}`]: !0
+		})}
+        part="step-indicator"
+      >
+        ${n ? i`<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>` : r ? i`<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>` : i`<span class="step-number">${e + 1}</span>`}
+      </div>
+    `;
+	}
+	_renderStep(e, t) {
+		let n = this._getStepStatus(t), r = this._isStepClickable(t, e), o = t === this.steps.length - 1;
+		return i`
+      <div
+        class=${l({
+			step: !0,
+			[`step--${n}`]: !0,
+			"step--disabled": e.disabled || this.disabled,
+			"step--clickable": r
+		})}
+        part="step"
+        role="listitem"
+        data-step-index=${t}
+        tabindex=${r ? 0 : -1}
+        aria-current=${n === "current" ? "step" : "false"}
+        aria-disabled=${e.disabled || this.disabled ? "true" : "false"}
+        @click=${() => this._handleStepClick(t, e)}
+        @keydown=${(n) => this._handleStepKeydown(n, t, e)}
+      >
+        ${this._renderStepIndicator(t, n)}
+        ${this.hideLabels ? a : i`
+                <div class="step-content" part="step-content">
+                  <span class="step-label" part="step-label" title=${e.label}
+                    >${e.label}</span
+                  >
+                  ${e.description ? i`<span
+                          class="step-description"
+                          part="step-description"
+                          >${e.description}</span
+                        >` : a}
+                  ${n === "error" && e.error ? i`<span class="step-error">${e.error}</span>` : a}
+                </div>
+              `}
+        ${o ? a : i`<div class="connector" part="connector"></div>`}
+      </div>
+    `;
+	}
+	_handlePanelSlotChange(e) {
+		let t = e.target;
+		this.panelHasContent = t.assignedNodes({ flatten: !0 }).length > 0;
+	}
+	_renderPanel() {
+		let e = this.steps[this.currentStep];
+		return e ? i`
+      <div
+        class=${l({
+			panel: !0,
+			"panel--has-content": this.panelHasContent
+		})}
+        part="panel"
+        role="tabpanel"
+      >
+        <slot
+          name="step-${e.id}"
+          @slotchange=${this._handlePanelSlotChange}
+        ></slot>
+      </div>
+    ` : a;
+	}
+	render() {
+		return i`
+      <div
+        class=${l({
+			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((e, t) => this._renderStep(e, t))}
+        </div>
+        ${this._renderPanel()}
+        <div class="actions" part="actions">
+          <slot name="actions">
+            ${this.showNavigation ? this._renderDefaultNavigation() : a}
+          </slot>
+        </div>
+      </div>
+    `;
+	}
+	_renderDefaultNavigation() {
+		return i`
+      <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>
+    `;
+	}
+};
+e([s({ type: Array })], d.prototype, "steps", void 0), e([s({
+	type: Number,
+	reflect: !0,
+	attribute: "current-step"
+})], d.prototype, "currentStep", void 0), e([s({
+	type: String,
+	reflect: !0
+})], d.prototype, "orientation", void 0), e([s({
+	type: String,
+	reflect: !0
+})], d.prototype, "size", void 0), e([s({
+	converter: t,
+	reflect: !0
+})], d.prototype, "linear", void 0), e([s({
+	type: Boolean,
+	reflect: !0
+})], d.prototype, "disabled", void 0), e([s({
+	type: Boolean,
+	reflect: !0,
+	attribute: "hide-labels"
+})], d.prototype, "hideLabels", void 0), e([s({
+	converter: t,
+	reflect: !0
+})], d.prototype, "clickable", void 0), e([s({
+	converter: t,
+	reflect: !0,
+	attribute: "show-navigation"
+})], d.prototype, "showNavigation", void 0), e([c()], d.prototype, "completedSteps", void 0), e([c()], d.prototype, "errorSteps", void 0), e([c()], d.prototype, "panelHasContent", void 0), d = e([o("bp-stepper")], d);
+//#endregion
+export { d as t };
+
+//# sourceMappingURL=stepper-B42LunTc.js.map