@duskmoon-dev/el-stepper 0.4.0

package/dist/esm/index.js

@@ -0,0 +1,435 @@
+// src/el-dm-stepper.ts
+import { BaseElement, css } from "@duskmoon-dev/el-core";
+var COLOR_MAP = {
+  primary: "var(--color-primary)",
+  secondary: "var(--color-secondary)",
+  tertiary: "var(--color-tertiary)",
+  success: "var(--color-success)",
+  warning: "var(--color-warning)",
+  error: "var(--color-error)",
+  info: "var(--color-info)"
+};
+var styles = css`
+  :host {
+    display: block;
+    font-family: var(--font-family-sans, system-ui, sans-serif);
+  }
+
+  :host([hidden]) {
+    display: none !important;
+  }
+
+  .stepper {
+    display: flex;
+    gap: 0;
+  }
+
+  .stepper--horizontal {
+    flex-direction: row;
+    align-items: flex-start;
+  }
+
+  .stepper--vertical {
+    flex-direction: column;
+  }
+
+  .step {
+    display: flex;
+    position: relative;
+    flex: 1;
+  }
+
+  .stepper--horizontal .step {
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+  }
+
+  .stepper--vertical .step {
+    flex-direction: row;
+    align-items: flex-start;
+  }
+
+  .step-header {
+    display: flex;
+    align-items: center;
+    position: relative;
+    z-index: 1;
+  }
+
+  .stepper--horizontal .step-header {
+    flex-direction: column;
+    width: 100%;
+  }
+
+  .stepper--vertical .step-header {
+    flex-direction: row;
+    min-height: 4rem;
+  }
+
+  .step-indicator-wrapper {
+    display: flex;
+    align-items: center;
+    position: relative;
+  }
+
+  .stepper--horizontal .step-indicator-wrapper {
+    width: 100%;
+    justify-content: center;
+  }
+
+  .step-indicator {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 2rem;
+    height: 2rem;
+    border-radius: 50%;
+    font-size: 0.875rem;
+    font-weight: 600;
+    flex-shrink: 0;
+    transition: all 0.2s ease;
+    background-color: var(--color-surface-variant, #e0e0e0);
+    color: var(--color-on-surface-variant, #666);
+    border: 2px solid transparent;
+  }
+
+  .step--clickable .step-indicator {
+    cursor: pointer;
+  }
+
+  .step--clickable .step-indicator:hover {
+    transform: scale(1.1);
+  }
+
+  .step--completed .step-indicator {
+    background-color: var(--stepper-color, var(--color-primary));
+    color: var(--color-on-primary, #fff);
+  }
+
+  .step--current .step-indicator {
+    background-color: var(--color-surface, #fff);
+    color: var(--stepper-color, var(--color-primary));
+    border-color: var(--stepper-color, var(--color-primary));
+  }
+
+  .step--upcoming .step-indicator {
+    background-color: var(--color-surface-variant, #e0e0e0);
+    color: var(--color-on-surface-variant, #666);
+  }
+
+  .step-content {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    padding: 0.5rem 0;
+  }
+
+  .stepper--horizontal .step-content {
+    align-items: center;
+    padding: 0.5rem 0.5rem 0;
+  }
+
+  .stepper--vertical .step-content {
+    padding-left: 0.75rem;
+    padding-top: 0.25rem;
+  }
+
+  .step-label {
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: var(--color-on-surface, #1a1a1a);
+    transition: color 0.2s ease;
+  }
+
+  .step--clickable .step-label {
+    cursor: pointer;
+  }
+
+  .step--upcoming .step-label {
+    color: var(--color-on-surface-variant, #666);
+  }
+
+  .step--current .step-label {
+    color: var(--stepper-color, var(--color-primary));
+    font-weight: 600;
+  }
+
+  .step-description {
+    font-size: 0.75rem;
+    color: var(--color-on-surface-variant, #666);
+  }
+
+  /* Connector lines */
+  .connector {
+    position: absolute;
+    background-color: var(--color-surface-variant, #e0e0e0);
+    transition: background-color 0.2s ease;
+  }
+
+  .step--completed .connector {
+    background-color: var(--stepper-color, var(--color-primary));
+  }
+
+  .stepper--horizontal .connector {
+    height: 2px;
+    top: 1rem;
+    left: calc(50% + 1rem + 0.25rem);
+    right: calc(-50% + 1rem + 0.25rem);
+  }
+
+  .stepper--horizontal .step:last-child .connector {
+    display: none;
+  }
+
+  .stepper--vertical .connector {
+    width: 2px;
+    left: calc(1rem - 1px);
+    top: 2.5rem;
+    bottom: 0.5rem;
+  }
+
+  .stepper--vertical .step:last-child .connector {
+    display: none;
+  }
+
+  /* Icon support */
+  .step-icon {
+    font-size: 1rem;
+    line-height: 1;
+  }
+
+  /* Completed checkmark */
+  .step--completed .step-indicator::after {
+    content: '';
+  }
+`;
+
+class ElDmStepper extends BaseElement {
+  static properties = {
+    steps: { type: Array, reflect: false, default: [] },
+    current: { type: Number, reflect: true, default: 0 },
+    orientation: { type: String, reflect: true, default: "horizontal" },
+    color: { type: String, reflect: true, default: "primary" },
+    clickable: { type: Boolean, reflect: true, default: false }
+  };
+  constructor() {
+    super();
+    this.attachStyles(styles);
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("click", this._handleClick.bind(this));
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("click", this._handleClick.bind(this));
+  }
+  _handleClick(e) {
+    if (!this.clickable)
+      return;
+    const target = e.target;
+    const stepEl = target.closest("[data-step-index]");
+    if (!stepEl)
+      return;
+    const index = parseInt(stepEl.dataset.stepIndex || "0", 10);
+    if (index !== this.current) {
+      const oldValue = this.current;
+      this.current = index;
+      this.emit("change", { current: index, previous: oldValue });
+    }
+  }
+  _getStepState(index) {
+    if (index < this.current)
+      return "completed";
+    if (index === this.current)
+      return "current";
+    return "upcoming";
+  }
+  _renderStepIndicator(step, index, state) {
+    if (state === "completed") {
+      return step.icon ? `<span class="step-icon">${step.icon}</span>` : `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>`;
+    }
+    if (step.icon) {
+      return `<span class="step-icon">${step.icon}</span>`;
+    }
+    return `${index + 1}`;
+  }
+  render() {
+    const stepsArray = Array.isArray(this.steps) ? this.steps : [];
+    const colorValue = COLOR_MAP[this.color] || COLOR_MAP.primary;
+    const stepsHtml = stepsArray.map((step, index) => {
+      const state = this._getStepState(index);
+      const stateClass = `step--${state}`;
+      const clickableClass = this.clickable ? "step--clickable" : "";
+      return `
+          <div
+            class="step ${stateClass} ${clickableClass}"
+            data-step-index="${index}"
+            part="step"
+          >
+            <div class="step-header">
+              <div class="step-indicator-wrapper">
+                <div class="step-indicator" part="indicator">
+                  ${this._renderStepIndicator(step, index, state)}
+                </div>
+                <div class="connector" part="connector"></div>
+              </div>
+              <div class="step-content" part="content">
+                <span class="step-label" part="label">${step.label}</span>
+                ${step.description ? `<span class="step-description" part="description">${step.description}</span>` : ""}
+              </div>
+            </div>
+          </div>
+        `;
+    }).join("");
+    return `
+      <div
+        class="stepper stepper--${this.orientation}"
+        style="--stepper-color: ${colorValue}"
+        role="navigation"
+        aria-label="Progress steps"
+        part="stepper"
+      >
+        ${stepsHtml}
+      </div>
+    `;
+  }
+}
+var stepStyles = css`
+  :host {
+    display: flex;
+    position: relative;
+    flex: 1;
+    font-family: var(--font-family-sans, system-ui, sans-serif);
+  }
+
+  :host([hidden]) {
+    display: none !important;
+  }
+
+  :host([orientation='horizontal']) {
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+  }
+
+  :host([orientation='vertical']) {
+    flex-direction: row;
+    align-items: flex-start;
+  }
+
+  .step-indicator {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 2rem;
+    height: 2rem;
+    border-radius: 50%;
+    font-size: 0.875rem;
+    font-weight: 600;
+    flex-shrink: 0;
+    transition: all 0.2s ease;
+    background-color: var(--color-surface-variant, #e0e0e0);
+    color: var(--color-on-surface-variant, #666);
+    border: 2px solid transparent;
+  }
+
+  :host([status='completed']) .step-indicator {
+    background-color: var(--step-color, var(--color-primary));
+    color: var(--color-on-primary, #fff);
+  }
+
+  :host([status='current']) .step-indicator {
+    background-color: var(--color-surface, #fff);
+    color: var(--step-color, var(--color-primary));
+    border-color: var(--step-color, var(--color-primary));
+  }
+
+  .step-content {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    padding: 0.5rem;
+  }
+
+  .step-label {
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: var(--color-on-surface, #1a1a1a);
+  }
+
+  :host([status='current']) .step-label {
+    color: var(--step-color, var(--color-primary));
+    font-weight: 600;
+  }
+
+  :host([status='upcoming']) .step-label {
+    color: var(--color-on-surface-variant, #666);
+  }
+
+  .step-description {
+    font-size: 0.75rem;
+    color: var(--color-on-surface-variant, #666);
+  }
+
+  ::slotted(*) {
+    margin-top: 0.5rem;
+  }
+`;
+
+class ElDmStep extends BaseElement {
+  static properties = {
+    label: { type: String, reflect: true },
+    description: { type: String, reflect: true },
+    icon: { type: String, reflect: true },
+    status: { type: String, reflect: true, default: "upcoming" },
+    orientation: { type: String, reflect: true, default: "horizontal" },
+    color: { type: String, reflect: true, default: "primary" },
+    stepNumber: { type: Number, reflect: true, attribute: "step-number", default: 1 }
+  };
+  constructor() {
+    super();
+    this.attachStyles(stepStyles);
+  }
+  _renderIndicator() {
+    if (this.status === "completed" && !this.icon) {
+      return `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>`;
+    }
+    if (this.icon) {
+      return this.icon;
+    }
+    return `${this.stepNumber}`;
+  }
+  render() {
+    const colorValue = COLOR_MAP[this.color] || COLOR_MAP.primary;
+    return `
+      <div class="step-indicator" style="--step-color: ${colorValue}" part="indicator">
+        <slot name="icon">${this._renderIndicator()}</slot>
+      </div>
+      <div class="step-content" part="content">
+        ${this.label ? `<span class="step-label" part="label">${this.label}</span>` : ""}
+        ${this.description ? `<span class="step-description" part="description">${this.description}</span>` : ""}
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+
+// src/index.ts
+function register() {
+  if (!customElements.get("el-dm-stepper")) {
+    customElements.define("el-dm-stepper", ElDmStepper);
+  }
+  if (!customElements.get("el-dm-step")) {
+    customElements.define("el-dm-step", ElDmStep);
+  }
+}
+export {
+  register,
+  ElDmStepper,
+  ElDmStep
+};
+
+//# debugId=F2367279F56CA2B564756E2164756E21
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1,11 @@
+{
+  "version": 3,
+  "sources": ["../../src/el-dm-stepper.ts", "../../src/index.ts"],
+  "sourcesContent": [
+    "/**\n * DuskMoon Stepper Element\n *\n * A multi-step progress indicator/wizard component.\n * Uses custom CSS with theme variables for consistent theming.\n *\n * @element el-dm-stepper\n *\n * @attr {string} steps - JSON array of step objects [{label, description?, icon?}]\n * @attr {number} current - Current step index (0-based)\n * @attr {string} orientation - Layout orientation: horizontal, vertical\n * @attr {string} color - Stepper color: primary, secondary, tertiary, success, warning, error, info\n * @attr {boolean} clickable - Whether steps are clickable for navigation\n *\n * @fires change - Fired when step changes via click\n *\n * @csspart stepper - The stepper container\n * @csspart step - Individual step wrapper\n * @csspart indicator - The step number/icon circle\n * @csspart content - The step label and description wrapper\n * @csspart label - The step label text\n * @csspart description - The step description text\n * @csspart connector - The connector line between steps\n */\n\nimport { BaseElement, css } from '@duskmoon-dev/el-core';\n\nexport interface StepData {\n  label: string;\n  description?: string;\n  icon?: string;\n}\n\nexport type StepperOrientation = 'horizontal' | 'vertical';\nexport type StepperColor =\n  | 'primary'\n  | 'secondary'\n  | 'tertiary'\n  | 'success'\n  | 'warning'\n  | 'error'\n  | 'info';\n\nconst COLOR_MAP: Record<string, string> = {\n  primary: 'var(--color-primary)',\n  secondary: 'var(--color-secondary)',\n  tertiary: 'var(--color-tertiary)',\n  success: 'var(--color-success)',\n  warning: 'var(--color-warning)',\n  error: 'var(--color-error)',\n  info: 'var(--color-info)',\n};\n\nconst styles = css`\n  :host {\n    display: block;\n    font-family: var(--font-family-sans, system-ui, sans-serif);\n  }\n\n  :host([hidden]) {\n    display: none !important;\n  }\n\n  .stepper {\n    display: flex;\n    gap: 0;\n  }\n\n  .stepper--horizontal {\n    flex-direction: row;\n    align-items: flex-start;\n  }\n\n  .stepper--vertical {\n    flex-direction: column;\n  }\n\n  .step {\n    display: flex;\n    position: relative;\n    flex: 1;\n  }\n\n  .stepper--horizontal .step {\n    flex-direction: column;\n    align-items: center;\n    text-align: center;\n  }\n\n  .stepper--vertical .step {\n    flex-direction: row;\n    align-items: flex-start;\n  }\n\n  .step-header {\n    display: flex;\n    align-items: center;\n    position: relative;\n    z-index: 1;\n  }\n\n  .stepper--horizontal .step-header {\n    flex-direction: column;\n    width: 100%;\n  }\n\n  .stepper--vertical .step-header {\n    flex-direction: row;\n    min-height: 4rem;\n  }\n\n  .step-indicator-wrapper {\n    display: flex;\n    align-items: center;\n    position: relative;\n  }\n\n  .stepper--horizontal .step-indicator-wrapper {\n    width: 100%;\n    justify-content: center;\n  }\n\n  .step-indicator {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 2rem;\n    height: 2rem;\n    border-radius: 50%;\n    font-size: 0.875rem;\n    font-weight: 600;\n    flex-shrink: 0;\n    transition: all 0.2s ease;\n    background-color: var(--color-surface-variant, #e0e0e0);\n    color: var(--color-on-surface-variant, #666);\n    border: 2px solid transparent;\n  }\n\n  .step--clickable .step-indicator {\n    cursor: pointer;\n  }\n\n  .step--clickable .step-indicator:hover {\n    transform: scale(1.1);\n  }\n\n  .step--completed .step-indicator {\n    background-color: var(--stepper-color, var(--color-primary));\n    color: var(--color-on-primary, #fff);\n  }\n\n  .step--current .step-indicator {\n    background-color: var(--color-surface, #fff);\n    color: var(--stepper-color, var(--color-primary));\n    border-color: var(--stepper-color, var(--color-primary));\n  }\n\n  .step--upcoming .step-indicator {\n    background-color: var(--color-surface-variant, #e0e0e0);\n    color: var(--color-on-surface-variant, #666);\n  }\n\n  .step-content {\n    display: flex;\n    flex-direction: column;\n    gap: 0.25rem;\n    padding: 0.5rem 0;\n  }\n\n  .stepper--horizontal .step-content {\n    align-items: center;\n    padding: 0.5rem 0.5rem 0;\n  }\n\n  .stepper--vertical .step-content {\n    padding-left: 0.75rem;\n    padding-top: 0.25rem;\n  }\n\n  .step-label {\n    font-size: 0.875rem;\n    font-weight: 500;\n    color: var(--color-on-surface, #1a1a1a);\n    transition: color 0.2s ease;\n  }\n\n  .step--clickable .step-label {\n    cursor: pointer;\n  }\n\n  .step--upcoming .step-label {\n    color: var(--color-on-surface-variant, #666);\n  }\n\n  .step--current .step-label {\n    color: var(--stepper-color, var(--color-primary));\n    font-weight: 600;\n  }\n\n  .step-description {\n    font-size: 0.75rem;\n    color: var(--color-on-surface-variant, #666);\n  }\n\n  /* Connector lines */\n  .connector {\n    position: absolute;\n    background-color: var(--color-surface-variant, #e0e0e0);\n    transition: background-color 0.2s ease;\n  }\n\n  .step--completed .connector {\n    background-color: var(--stepper-color, var(--color-primary));\n  }\n\n  .stepper--horizontal .connector {\n    height: 2px;\n    top: 1rem;\n    left: calc(50% + 1rem + 0.25rem);\n    right: calc(-50% + 1rem + 0.25rem);\n  }\n\n  .stepper--horizontal .step:last-child .connector {\n    display: none;\n  }\n\n  .stepper--vertical .connector {\n    width: 2px;\n    left: calc(1rem - 1px);\n    top: 2.5rem;\n    bottom: 0.5rem;\n  }\n\n  .stepper--vertical .step:last-child .connector {\n    display: none;\n  }\n\n  /* Icon support */\n  .step-icon {\n    font-size: 1rem;\n    line-height: 1;\n  }\n\n  /* Completed checkmark */\n  .step--completed .step-indicator::after {\n    content: '';\n  }\n`;\n\nexport class ElDmStepper extends BaseElement {\n  static properties = {\n    steps: { type: Array, reflect: false, default: [] },\n    current: { type: Number, reflect: true, default: 0 },\n    orientation: { type: String, reflect: true, default: 'horizontal' },\n    color: { type: String, reflect: true, default: 'primary' },\n    clickable: { type: Boolean, reflect: true, default: false },\n  };\n\n  declare steps: StepData[];\n  declare current: number;\n  declare orientation: StepperOrientation;\n  declare color: StepperColor;\n  declare clickable: boolean;\n\n  constructor() {\n    super();\n    this.attachStyles(styles);\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener('click', this._handleClick.bind(this));\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener('click', this._handleClick.bind(this));\n  }\n\n  private _handleClick(e: Event): void {\n    if (!this.clickable) return;\n\n    const target = e.target as HTMLElement;\n    const stepEl = target.closest('[data-step-index]') as HTMLElement;\n    if (!stepEl) return;\n\n    const index = parseInt(stepEl.dataset.stepIndex || '0', 10);\n    if (index !== this.current) {\n      const oldValue = this.current;\n      this.current = index;\n      this.emit('change', { current: index, previous: oldValue });\n    }\n  }\n\n  private _getStepState(index: number): 'completed' | 'current' | 'upcoming' {\n    if (index < this.current) return 'completed';\n    if (index === this.current) return 'current';\n    return 'upcoming';\n  }\n\n  private _renderStepIndicator(step: StepData, index: number, state: string): string {\n    if (state === 'completed') {\n      return step.icon\n        ? `<span class=\"step-icon\">${step.icon}</span>`\n        : `<svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"></polyline></svg>`;\n    }\n    if (step.icon) {\n      return `<span class=\"step-icon\">${step.icon}</span>`;\n    }\n    return `${index + 1}`;\n  }\n\n  render(): string {\n    const stepsArray = Array.isArray(this.steps) ? this.steps : [];\n    const colorValue = COLOR_MAP[this.color] || COLOR_MAP.primary;\n\n    const stepsHtml = stepsArray\n      .map((step, index) => {\n        const state = this._getStepState(index);\n        const stateClass = `step--${state}`;\n        const clickableClass = this.clickable ? 'step--clickable' : '';\n\n        return `\n          <div\n            class=\"step ${stateClass} ${clickableClass}\"\n            data-step-index=\"${index}\"\n            part=\"step\"\n          >\n            <div class=\"step-header\">\n              <div class=\"step-indicator-wrapper\">\n                <div class=\"step-indicator\" part=\"indicator\">\n                  ${this._renderStepIndicator(step, index, state)}\n                </div>\n                <div class=\"connector\" part=\"connector\"></div>\n              </div>\n              <div class=\"step-content\" part=\"content\">\n                <span class=\"step-label\" part=\"label\">${step.label}</span>\n                ${step.description ? `<span class=\"step-description\" part=\"description\">${step.description}</span>` : ''}\n              </div>\n            </div>\n          </div>\n        `;\n      })\n      .join('');\n\n    return `\n      <div\n        class=\"stepper stepper--${this.orientation}\"\n        style=\"--stepper-color: ${colorValue}\"\n        role=\"navigation\"\n        aria-label=\"Progress steps\"\n        part=\"stepper\"\n      >\n        ${stepsHtml}\n      </div>\n    `;\n  }\n}\n\n/**\n * DuskMoon Step Element\n *\n * Individual step element for use within el-dm-stepper.\n * Allows for custom content and styling of individual steps.\n *\n * @element el-dm-step\n *\n * @attr {string} label - Step label text\n * @attr {string} description - Optional description text\n * @attr {string} icon - Optional icon (text/emoji/html)\n * @attr {string} status - Step status: completed, current, upcoming\n *\n * @slot - Default slot for custom step content\n * @slot icon - Slot for custom icon content\n *\n * @csspart step - The step container\n * @csspart indicator - The step indicator circle\n * @csspart content - The content wrapper\n * @csspart label - The label text\n * @csspart description - The description text\n */\n\nconst stepStyles = css`\n  :host {\n    display: flex;\n    position: relative;\n    flex: 1;\n    font-family: var(--font-family-sans, system-ui, sans-serif);\n  }\n\n  :host([hidden]) {\n    display: none !important;\n  }\n\n  :host([orientation='horizontal']) {\n    flex-direction: column;\n    align-items: center;\n    text-align: center;\n  }\n\n  :host([orientation='vertical']) {\n    flex-direction: row;\n    align-items: flex-start;\n  }\n\n  .step-indicator {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 2rem;\n    height: 2rem;\n    border-radius: 50%;\n    font-size: 0.875rem;\n    font-weight: 600;\n    flex-shrink: 0;\n    transition: all 0.2s ease;\n    background-color: var(--color-surface-variant, #e0e0e0);\n    color: var(--color-on-surface-variant, #666);\n    border: 2px solid transparent;\n  }\n\n  :host([status='completed']) .step-indicator {\n    background-color: var(--step-color, var(--color-primary));\n    color: var(--color-on-primary, #fff);\n  }\n\n  :host([status='current']) .step-indicator {\n    background-color: var(--color-surface, #fff);\n    color: var(--step-color, var(--color-primary));\n    border-color: var(--step-color, var(--color-primary));\n  }\n\n  .step-content {\n    display: flex;\n    flex-direction: column;\n    gap: 0.25rem;\n    padding: 0.5rem;\n  }\n\n  .step-label {\n    font-size: 0.875rem;\n    font-weight: 500;\n    color: var(--color-on-surface, #1a1a1a);\n  }\n\n  :host([status='current']) .step-label {\n    color: var(--step-color, var(--color-primary));\n    font-weight: 600;\n  }\n\n  :host([status='upcoming']) .step-label {\n    color: var(--color-on-surface-variant, #666);\n  }\n\n  .step-description {\n    font-size: 0.75rem;\n    color: var(--color-on-surface-variant, #666);\n  }\n\n  ::slotted(*) {\n    margin-top: 0.5rem;\n  }\n`;\n\nexport class ElDmStep extends BaseElement {\n  static properties = {\n    label: { type: String, reflect: true },\n    description: { type: String, reflect: true },\n    icon: { type: String, reflect: true },\n    status: { type: String, reflect: true, default: 'upcoming' },\n    orientation: { type: String, reflect: true, default: 'horizontal' },\n    color: { type: String, reflect: true, default: 'primary' },\n    stepNumber: { type: Number, reflect: true, attribute: 'step-number', default: 1 },\n  };\n\n  declare label: string;\n  declare description: string;\n  declare icon: string;\n  declare status: 'completed' | 'current' | 'upcoming';\n  declare orientation: 'horizontal' | 'vertical';\n  declare color: string;\n  declare stepNumber: number;\n\n  constructor() {\n    super();\n    this.attachStyles(stepStyles);\n  }\n\n  private _renderIndicator(): string {\n    if (this.status === 'completed' && !this.icon) {\n      return `<svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"></polyline></svg>`;\n    }\n    if (this.icon) {\n      return this.icon;\n    }\n    return `${this.stepNumber}`;\n  }\n\n  render(): string {\n    const colorValue = COLOR_MAP[this.color] || COLOR_MAP.primary;\n\n    return `\n      <div class=\"step-indicator\" style=\"--step-color: ${colorValue}\" part=\"indicator\">\n        <slot name=\"icon\">${this._renderIndicator()}</slot>\n      </div>\n      <div class=\"step-content\" part=\"content\">\n        ${this.label ? `<span class=\"step-label\" part=\"label\">${this.label}</span>` : ''}\n        ${this.description ? `<span class=\"step-description\" part=\"description\">${this.description}</span>` : ''}\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n",
+    "/**\n * @duskmoon-dev/el-stepper\n *\n * DuskMoon Stepper custom elements for multi-step progress indicators\n */\n\nimport { ElDmStepper, ElDmStep } from './el-dm-stepper.js';\n\nexport { ElDmStepper, ElDmStep };\nexport type { StepData, StepperOrientation, StepperColor } from './el-dm-stepper.js';\n\n/**\n * Register the el-dm-stepper and el-dm-step custom elements\n *\n * @example\n * ```ts\n * import { register } from '@duskmoon-dev/el-stepper';\n * register();\n * ```\n */\nexport function register(): void {\n  if (!customElements.get('el-dm-stepper')) {\n    customElements.define('el-dm-stepper', ElDmStepper);\n  }\n  if (!customElements.get('el-dm-step')) {\n    customElements.define('el-dm-step', ElDmStep);\n  }\n}\n"
+  ],
+  "mappings": "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",
+  "debugId": "F2367279F56CA2B564756E2164756E21",
+  "names": []
+}