@fabric-msft/fabric-web 4.0.0-beta.1 → 5.0.0

package/dist/esm/components/wizard-step/wizard-step.styles.js

@@ -1,193 +1,13 @@
-import { colorBrandForeground2, colorNeutralForegroundOnBrand, colorPaletteRedForeground3, display, fontFamilyBase, fontSizeBase200, fontSizeBase300, fontWeightRegular, fontWeightSemibold, lineHeightBase200, lineHeightBase300, spacingHorizontalM, spacingHorizontalXXL, spacingVerticalL, spacingVerticalXXS } from "@fluentui/web-components";
-import { css } from "@microsoft/fast-element";
+import { display, colorNeutralForeground1, fontFamilyBase, spacingHorizontalM, colorNeutralForegroundDisabled, colorNeutralStrokeDisabled, colorNeutralBackground4, spacingHorizontalXXL, spacingVerticalXXS, strokeWidthThick, spacingVerticalM, spacingHorizontalS, fontWeightRegular, fontSizeBase300, lineHeightBase300, fontSizeBase200, lineHeightBase200, colorNeutralForegroundOnBrand, fontWeightSemibold, colorBrandForeground2, colorPaletteRedForeground3, spacingVerticalL, strokeWidthThin } from '@fluentui/web-components';
+import { sizeHorizontalXXL, sizeVerticalXXL, sizeHorizontalXL, sizeVerticalXL, sizeHorizontalM, sizeVerticalM } from '@fabric-msft/theme';
+import { css } from '@microsoft/fast-element';
+
 /** Wizard Step styles
  * @public
  */
-export const styles = css `
+const styles = css`
   ${display("block")}
 
-  :host {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-    font-family: ${fontFamilyBase};
-    position: relative;
-    align-items: flex-start;
-    column-gap: ${spacingHorizontalM};
-    flex-shrink: 0;
-    flex-grow: 1;
-  }
-
-  :host([hide-connector]) .state-connector,
-  .summary,
-  .title,
-  .details {
-    display: none;
-  }
-
-  :host(.overflow) {
-    flex-shrink: 0;
-    flex-grow: 0;
-    width: 36px;
-  }
-
-  :host(.first) {
-    padding-left: ${spacingHorizontalXXL};
-  }
-
-  :host(.first) .state-connector {
-    left: 28px;
-  }
-
-  :host(.last) {
-    padding-right: ${spacingHorizontalXXL};
-  }
-
-  .state-indicator {
-    width: 24px;
-    height: 24px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: 2px;
-    box-sizing: border-box;
-  }
-
-  .icon {
-    position: relative;
-    z-index: 9;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 20px;
-    height: 20px;
-    font-weight: var(--fontWeightRegular);
-    line-height: var(--lineHeightBase100);
-    font-size: var(--fontSizeBase200);
-    border-radius: var(--borderRadiusCircular);
-    border: 2px solid var(--colorNeutralForeground2);
-    background: var(--colorNeutralBackground4);
-    flex-shrink: 0;
-    box-sizing: border-box;
-  }
-
-  .order {
-    font-size: var(--fontSizeBase200);
-    font-weight: var(--fontWeightSemibold);
-    line-height: var(--lineHeightBase200);
-    margin-bottom: 1px;
-  }
-
-  .state-connector {
-    position: absolute;
-    top: 12px;
-    left: 4px;
-    height: 2px;
-    width: 100%;
-    background: var(--colorNeutralForegroundDisabled);
-  }
-
-  .title {
-    font-weight: ${fontWeightRegular};
-    font-size: ${fontSizeBase300};
-    line-height: ${lineHeightBase300};
-  }
-
-  .details {
-    font-weight: ${fontWeightRegular};
-    font-size: ${fontSizeBase200};
-    line-height: ${lineHeightBase200};
-  }
-
-  .icon svg {
-    color: ${colorNeutralForegroundOnBrand};
-    fill: ${colorNeutralForegroundOnBrand};
-    width: 12px;
-    height: 12px;
-    box-sizing: border-box;
-    vertical-align: middle;
-  }
-
-  :host([hide-connector]) {
-    width: fit-content;
-    flex-grow: 0;
-    min-width: unset;
-  }
-
-  :host([aria-current="step"]) .title {
-    font-weight: ${fontWeightSemibold};
-  }
-
-  :host([state="complete"]) .icon,
-  :host([state="complete"]) .state-connector,
-  :host([state="complete"].first) .state-connector,
-  :host([active]) .icon {
-    background: ${colorBrandForeground2};
-    border-color: ${colorBrandForeground2};
-    color: ${colorNeutralForegroundOnBrand};
-  }
-
-  :host([state="complete"]) .icon svg {
-    margin-top: 2px;
-  }
-
-  :host([state="error"]) .icon {
-    background: ${colorPaletteRedForeground3};
-    border-color: ${colorPaletteRedForeground3};
-  }
-
-  @media (min-width: 480px) {
-    :host(.overflow),
-    :host,
-    :host(.first) {
-      display: flex;
-      align-items: flex-start;
-      width: fit-content;
-      height: fit-content;
-      max-width: 268px;
-      padding: 0 0 ${spacingVerticalL} 0;
-      column-gap: ${spacingHorizontalM};
-      flex-grow: 0;
-    }
-    :host(.first) .state-connector,
-    .state-connector {
-      position: absolute;
-      width: 2px;
-      left: 11px;
-      height: 100%;
-      background: var(--colorNeutralForegroundDisabled);
-      min-height: 22px;
-    }
-  }
+  .step{unset:all;background:transparent;color:${colorNeutralForeground1};text-align:start;border:0 none;box-sizing:border-box;display:flex;justify-content:center;align-items:center;flex-direction:column;font-family:${fontFamilyBase};position:relative;align-items:flex-start;column-gap:${spacingHorizontalM};flex-shrink:0;flex-grow:1}:host([hide-connector]) .step-connector,.summary,.title,.details{display:none}:host([disabled]) .step{cursor:not-allowed;pointer-events:none;color:${colorNeutralForegroundDisabled}}:host([disabled]) .step-connector{background:${colorNeutralStrokeDisabled}}:host([disabled]) .icon{background:${colorNeutralBackground4};border-color:${colorNeutralStrokeDisabled}}:host(.overflow){flex-shrink:0;flex-grow:0;width:36px;}:host(.first){padding-inline-start:${spacingHorizontalXXL}}:host(.first) .step-connector{inset-inline-start:28px;}:host(.last){padding-inline-end:${spacingHorizontalXXL}}.state-indicator{width:${sizeHorizontalXXL};height:${sizeVerticalXXL};display:flex;justify-content:center;align-items:center;padding:${spacingVerticalXXS};box-sizing:border-box}.icon{position:relative;z-index:9;display:flex;justify-content:center;align-items:center;width:${sizeHorizontalXL};height:${sizeVerticalXL};font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase100);font-size:var(--fontSizeBase200);border-radius:var(--borderRadiusCircular);border:${strokeWidthThick} solid var(--colorNeutralForeground2);background:var(--colorNeutralBackground4);flex-shrink:0;box-sizing:border-box}.order{font-size:var(--fontSizeBase200);font-weight:var(--fontWeightSemibold);line-height:var(--lineHeightBase200);margin-bottom:1px;}.step-connector{position:absolute;top:${spacingVerticalM};inset-inline-start:${spacingHorizontalS};height:${strokeWidthThick};width:100%;background:var(--colorNeutralForegroundDisabled)}.title{font-weight:${fontWeightRegular};font-size:${fontSizeBase300};line-height:${lineHeightBase300}}.details{font-weight:${fontWeightRegular};font-size:${fontSizeBase200};line-height:${lineHeightBase200}}.icon svg{color:${colorNeutralForegroundOnBrand};fill:${colorNeutralForegroundOnBrand};width:${sizeHorizontalM};height:${sizeVerticalM};box-sizing:border-box;vertical-align:middle}:host([hide-connector]) .step{width:fit-content;flex-grow:0;min-width:unset}:host([aria-current="step"]) .title{font-weight:${fontWeightSemibold}}:host([state="complete"]) .icon,:host([state="complete"]) .step-connector,:host([state="complete"].first) .step-connector,:host([active]) .icon{background:${colorBrandForeground2};border-color:${colorBrandForeground2};color:${colorNeutralForegroundOnBrand}}:host([state="complete"]) .icon svg{margin-top:${spacingVerticalXXS}}:host([state="error"]) .icon{background:${colorPaletteRedForeground3};border-color:${colorPaletteRedForeground3}}@media (min-width:32.5rem){:host(.overflow) .step,:host .step,:host(.first) .step{display:flex;align-items:flex-start;width:fit-content;height:fit-content;max-width:268px;padding:0 0 ${spacingVerticalL} 0;column-gap:${spacingHorizontalM};flex-grow:0}:host(.first) .step-connector,.step-connector{position:absolute;width:${strokeWidthThick};inset-inline-start:11px;height:100%;background:var(--colorNeutralForegroundDisabled);min-height:22px;}}@media (min-width:calc(${spacingHorizontalXXL} * 43 - ${spacingHorizontalS} - ${strokeWidthThin})){:host .step,:host(.first) .step{flex-direction:row}.step-connector{inset-inline-start:11px;}:host([aria-current="step"]) .details,.title{display:block}.order{display:none}.summary{display:flex;flex-direction:column;width:fit-content;gap:${spacingVerticalXXS}}}:host(:hover) .step{cursor:pointer}:host([disabled]) .step{cursor:not-allowed}`;
 
-  @media (min-width: 1023px) {
-    :host {
-      flex-direction: row;
-    }
-    .state-connector {
-      left: 11px;
-    }
-    :host([aria-current="step"]) .details,
-    .title {
-      display: block;
-    }
-    .order {
-      display: none;
-    }
-    .summary {
-      display: flex;
-      flex-direction: column;
-      width: fit-content;
-      min-width: 174px;
-      gap: ${spacingVerticalXXS};
-    }
-  }
-  :host(:hover) {
-    cursor: pointer;
-  }
-  :host([disabled]) {
-    cursor: not-allowed;
-  }
-`;
-//# sourceMappingURL=wizard-step.styles.js.map
+export { styles };

package/dist/esm/components/wizard-step/wizard-step.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"wizard-step.styles.js","sourceRoot":"","sources":["../../../../../../../src/components/wizard-step/wizard-step.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,qBAAqB,EACrB,6BAA6B,EAC7B,0BAA0B,EAC1B,OAAO,EACP,cAAc,EACd,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,oBAAoB,EACpB,gBAAgB,EAChB,kBAAkB,EACnB,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAE9C;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,OAAO,CAAC;;;;;;;mBAOD,cAAc;;;kBAGf,kBAAkB;;;;;;;;;;;;;;;;;;;oBAmBhB,oBAAoB;;;;;;;;qBAQnB,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mBAgDtB,iBAAiB;iBACnB,eAAe;mBACb,iBAAiB;;;;mBAIjB,iBAAiB;iBACnB,eAAe;mBACb,iBAAiB;;;;aAIvB,6BAA6B;YAC9B,6BAA6B;;;;;;;;;;;;;;mBActB,kBAAkB;;;;;;;kBAOnB,qBAAqB;oBACnB,qBAAqB;aAC5B,6BAA6B;;;;;;;;kBAQxB,0BAA0B;oBACxB,0BAA0B;;;;;;;;;;;;qBAYzB,gBAAgB;oBACjB,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;aAiCzB,kBAAkB;;;;;;;;;CAS9B,CAAC"}
+{"version":3,"file":"wizard-step.styles.js","sourceRoot":"","sources":["../../../../../../../src/components/wizard-step/wizard-step.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,qBAAqB,EACrB,uBAAuB,EACvB,uBAAuB,EACvB,8BAA8B,EAC9B,6BAA6B,EAC7B,0BAA0B,EAC1B,0BAA0B,EAC1B,OAAO,EACP,cAAc,EACd,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,kBAAkB,EAClB,oBAAoB,EACpB,kBAAkB,EAClB,gBAAgB,EAChB,gBAAgB,EAChB,eAAe,EACf,gBAAgB,EACjB,MAAM,0BAA0B,CAAC;AAClC,OAAO,EACL,eAAe,EACf,gBAAgB,EAChB,iBAAiB,EACjB,aAAa,EACb,cAAc,EACd,eAAe,EAChB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAE9C;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,OAAO,CAAC;;;;;aAKP,uBAAuB;;;;;;;;mBAQjB,cAAc;;;kBAGf,kBAAkB;;;;;;;;;;;;;;;aAevB,8BAA8B;;;;kBAIzB,0BAA0B;;;;kBAI1B,uBAAuB;oBACrB,0BAA0B;;;;;;;;;;4BAUlB,oBAAoB;;;;;;;;0BAQtB,oBAAoB;;;;aAIjC,iBAAiB;cAChB,eAAe;;;;eAId,kBAAkB;;;;;;;;;;aAUpB,gBAAgB;cACf,cAAc;;;;;cAKd,gBAAgB;;;;;;;;;;;;;;;WAenB,gBAAgB;0BACD,kBAAkB;cAC9B,gBAAgB;;;;;;mBAMX,iBAAiB;iBACnB,eAAe;mBACb,iBAAiB;;;;mBAIjB,iBAAiB;iBACnB,eAAe;mBACb,iBAAiB;;;;aAIvB,6BAA6B;YAC9B,6BAA6B;aAC5B,eAAe;cACd,aAAa;;;;;;;;;;;;mBAYR,kBAAkB;;;;;;;kBAOnB,qBAAqB;oBACnB,qBAAqB;aAC5B,6BAA6B;;;;kBAIxB,kBAAkB;;;;kBAIlB,0BAA0B;oBACxB,0BAA0B;;;;;;;;;;;;qBAYzB,gBAAgB;oBACjB,kBAAkB;;;;;;eAMvB,gBAAgB;;;;;;;;4BAQH,oBAAoB,WAAW,kBAAkB,MAAM,eAAe;;;;;;;;;;;;;;;;;;;aAmBrF,kBAAkB;;;;;;;;;CAS9B,CAAC"}

package/dist/esm/components/wizard-step/wizard-step.template.js

@@ -1,89 +1,15 @@
-import { html } from "@microsoft/fast-element";
-const Checkmark16Regular = html `
-  <svg
-    fill="currentColor"
-    aria-hidden="true"
-    width="16"
-    height="16"
-    viewBox="0 0 16 16"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M13.86 3.66a.5.5 0 0 1-.02.7l-7.93 7.48a.6.6 0 0 1-.84-.02L2.4 9.1a.5.5 0 0 1 .72-.7l2.4 2.44 7.65-7.2a.5.5 0 0 1 .7.02Z"
-      fill="currentColor"
-    ></path>
-  </svg>
-`;
-const Dismiss16Regular = html `
-  <svg
-    fill="currentColor"
-    aria-hidden="true"
-    width="12"
-    height="12"
-    viewBox="0 0 16 16"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="m2.4 2.55.07-.08a.75.75 0 0 1 .98-.07l.08.07L8 6.94l4.47-4.47a.75.75 0 1 1 1.06 1.06L9.06 8l4.47 4.47c.27.27.3.68.07.98l-.07.08a.75.75 0 0 1-.98.07l-.08-.07L8 9.06l-4.47 4.47a.75.75 0 0 1-1.06-1.06L6.94 8 2.47 3.53a.75.75 0 0 1-.07-.98l.07-.08-.07.08Z"
-      fill="currentColor"
-    ></path>
-  </svg>
-`;
+import { html } from '@microsoft/fast-element';
+import './wizard-step.js';
+
+const Checkmark16Regular = html`<svg fill="currentColor" aria-hidden="true" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M13.86 3.66a.5.5 0 0 1-.02.7l-7.93 7.48a.6.6 0 0 1-.84-.02L2.4 9.1a.5.5 0 0 1 .72-.7l2.4 2.44 7.65-7.2a.5.5 0 0 1 .7.02Z" fill="currentColor"></path></svg>`;
+const Dismiss16Regular = html`<svg fill="currentColor" aria-hidden="true" width="12" height="12" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="m2.4 2.55.07-.08a.75.75 0 0 1 .98-.07l.08.07L8 6.94l4.47-4.47a.75.75 0 1 1 1.06 1.06L9.06 8l4.47 4.47c.27.27.3.68.07.98l-.07.08a.75.75 0 0 1-.98.07l-.08-.07L8 9.06l-4.47 4.47a.75.75 0 0 1-1.06-1.06L6.94 8 2.47 3.53a.75.75 0 0 1-.07-.98l.07-.08-.07.08Z" fill="currentColor"></path></svg>`;
 /**
  * The template for the {@link @fabric-msft/fabric-web#(Step:class)} component.
  * @public
  */
-export function baseStepTemplate() {
-    return html `
-    <template
-      class="step"
-      state="${(x) => x.state}"
-      ?hide-connector="${(x) => x.hideConnector}"
-      ?active="${(x) => x.active}"
-      ?disabled="${(x) => x.disabled}"
-      ?ordered="${(x) => x.ordered}"
-      aria-label="${(x) => x.ariaLabel}"
-      aria-describedby="${(x) => x.ariaDescribedby}"
-      aria-labelledby="${(x) => x.ariaLabelledby}"
-      aria-current="${(x) => (x.active ? "step" : null)}"
-    >
-      <slot name="start"></slot>
-      <div class="state-indicator">
-        <div class="icon" part="icon">
-          ${(x) => x.state === "incomplete"
-        ? html `
-                  <slot name="incomplete">
-                    <span class="order" part="order">
-                      ${(x) => (x.ordered ? x.index + 1 : "")}
-                    </span>
-                  </slot>
-                `
-        : ""}
-          ${(x) => x.state === "complete"
-        ? html `
-                  <slot name="complete">${Checkmark16Regular}</slot>
-                `
-        : ""}
-          ${(x) => x.state === "error"
-        ? html `
-                  <slot name="error">${Dismiss16Regular}</slot>
-                `
-        : ""}
-        </div>
-      </div>
-      <div class="summary" part="summary">
-        <div class="title" part="title">
-          <slot name="title">${(x) => x.title}</slot>
-        </div>
-        <div class="details" part="details">
-          <slot name="details">${(x) => x.details}</slot>
-        </div>
-      </div>
-
-      <div part="state-connector" class="state-connector"></div>
-      <slot name="end"></slot>
-    </template>
-  `;
+function baseStepTemplate() {
+  return html`<button ?hide-connector="${x => x.hideConnector}" ?active="${x => x.active}" ?disabled="${x => x.disabled}" ?numbered="${x => x.numbered}" slot="step" class="step" part="step" role="tab" aria-label="${x => x.ariaLabel}" aria-current="${x => x.active ? "step" : null}" @click="${(x, c) => x.clickHandler(c.event)}"><slot name="start"></slot><div class="state-indicator" part="state-indicator"><div class="icon" part="icon">${x => x.state === "incomplete" ? html`<slot name="incomplete"><span class="order" part="order">${x => x.numbered ? x.index + 1 : ""}</span></slot>` : ""} ${x => x.state === "complete" ? html`<slot name="complete">${Checkmark16Regular}</slot>` : ""} ${x => x.state === "error" ? html`<slot name="error">${Dismiss16Regular}</slot>` : ""}</div></div><div class="summary" part="summary"><div class="title" part="title"><slot name="title">${x => x.title}</slot></div><div class="details" part="details"><slot name="details"></slot></div></div><div part="step-connector" class="step-connector"></div><slot name="end"></slot></button>`;
 }
-export const template = baseStepTemplate();
-//# sourceMappingURL=wizard-step.template.js.map
+const template = baseStepTemplate();
+
+export { baseStepTemplate, template };

package/dist/esm/components/wizard-step/wizard-step.template.js.map

@@ -1 +1 @@
-{"version":3,"file":"wizard-step.template.js","sourceRoot":"","sources":["../../../../../../../src/components/wizard-step/wizard-step.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAGpE,MAAM,kBAAkB,GAAG,IAAI,CAAA;;;;;;;;;;;;;;CAc9B,CAAC;AAEF,MAAM,gBAAgB,GAAG,IAAI,CAAA;;;;;;;;;;;;;;CAc5B,CAAC;AAEF;;;GAGG;AACH,MAAM,UAAU,gBAAgB;IAG9B,OAAO,IAAI,CAAA;;;eAGE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK;yBACJ,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,aAAa;iBAC9B,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM;mBACb,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ;kBAClB,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,OAAO;oBACd,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,SAAS;0BACZ,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe;yBACzB,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc;sBAC1B,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC;;;;;YAK3C,CAAC,CAAC,EAAE,EAAE,CACN,CAAC,CAAC,KAAK,KAAK,YAAY;QACtB,CAAC,CAAC,IAAI,CAAA;;;wBAGI,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;;;iBAG5C;QACH,CAAC,CAAC,EAAE;YACN,CAAC,CAAC,EAAE,EAAE,CACN,CAAC,CAAC,KAAK,KAAK,UAAU;QACpB,CAAC,CAAC,IAAI,CAAA;0CACsB,kBAAkB;iBAC3C;QACH,CAAC,CAAC,EAAE;YACN,CAAC,CAAC,EAAE,EAAE,CACN,CAAC,CAAC,KAAK,KAAK,OAAO;QACjB,CAAC,CAAC,IAAI,CAAA;uCACmB,gBAAgB;iBACtC;QACH,CAAC,CAAC,EAAE;;;;;+BAKa,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK;;;iCAGZ,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,OAAO;;;;;;;GAO9C,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,QAAQ,GAAoC,gBAAgB,EAAE,CAAC"}
+{"version":3,"file":"wizard-step.template.js","sourceRoot":"","sources":["../../../../../../../src/components/wizard-step/wizard-step.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAE/C,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C,MAAM,kBAAkB,GAAG,IAAI,CAAA;;;;;;;;;;;;;;CAc9B,CAAC;AAEF,MAAM,gBAAgB,GAAG,IAAI,CAAA;;;;;;;;;;;;;;CAc5B,CAAC;AAEF;;;GAGG;AACH,MAAM,UAAU,gBAAgB;IAG9B,OAAO,IAAI,CAAA;;yBAEY,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,aAAa;iBAC9B,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM;mBACb,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ;mBACjB,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ;;;;;oBAKhB,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,SAAS;sBAChB,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC;gBACvC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAmB,CAAC;;;;;YAKnD,CAAC,CAAC,EAAE,EAAE,CACN,CAAC,CAAC,KAAK,KAAK,YAAY;QACtB,CAAC,CAAC,IAAI,CAAA;;;wBAGI,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;;;iBAG7C;QACH,CAAC,CAAC,EAAE;YACN,CAAC,CAAC,EAAE,EAAE,CACN,CAAC,CAAC,KAAK,KAAK,UAAU;QACpB,CAAC,CAAC,IAAI,CAAA;0CACsB,kBAAkB;iBAC3C;QACH,CAAC,CAAC,EAAE;YACN,CAAC,CAAC,EAAE,EAAE,CACN,CAAC,CAAC,KAAK,KAAK,OAAO;QACjB,CAAC,CAAC,IAAI,CAAA;uCACmB,gBAAgB;iBACtC;QACH,CAAC,CAAC,EAAE;;;;;+BAKa,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK;;;;;;;;;GAS1C,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,QAAQ,GAAoC,gBAAgB,EAAE,CAAC"}

package/dist/esm/components/wizard-step/wizard-step.unit.component.js

@@ -0,0 +1,45 @@
+import { expect, describe, it, beforeEach, vi } from "vitest";
+import { WizardStep } from "./wizard-step.js";
+import "./define.js";
+describe("WizardStep", () => {
+    let element;
+    beforeEach(() => {
+        element = document.createElement("fabric-wizard-step");
+        document.body.appendChild(element);
+    });
+    // Test @attr active
+    it("should handle active state", async () => {
+        await vi.waitFor(() => {
+            element.active = true;
+            expect(element.active).toBe(true);
+            expect(element.hasAttribute("active")).toBe(true);
+        });
+    });
+    // Test @attr state
+    it("should handle state changes", async () => {
+        await vi.waitFor(() => {
+            element.state = "complete";
+            expect(element.state).toBe("complete");
+            const state = element.getAttribute("state");
+            expect(state).toBe("complete");
+        });
+    });
+    // Test @attr ordered
+    it("should handle numbered state", async () => {
+        await vi.waitFor(() => {
+            element.numbered = true;
+            expect(element.numbered).toBe(true);
+            expect(element.hasAttribute("numbered")).toBe(true);
+        });
+    });
+    // Test click handling
+    it("should emit click event when clicked", async () => {
+        const clickHandler = vi.fn();
+        element.addEventListener("click", clickHandler);
+        element.click();
+        await vi.waitFor(() => {
+            expect(clickHandler).toHaveBeenCalled();
+        });
+    });
+});
+//# sourceMappingURL=wizard-step.unit.component.js.map

package/dist/esm/components/wizard-step/wizard-step.unit.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"wizard-step.unit.component.js","sourceRoot":"","sources":["../../../../../../../src/components/wizard-step/wizard-step.unit.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE,EAAE,EAAE,MAAM,QAAQ,CAAC;AAC9D,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,aAAa,CAAC;AAErB,QAAQ,CAAC,YAAY,EAAE,GAAG,EAAE;IAC1B,IAAI,OAAmB,CAAC;IAExB,UAAU,CAAC,GAAG,EAAE;QACd,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,oBAAoB,CAAe,CAAC;QACrE,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;IACrC,CAAC,CAAC,CAAC;IAEH,oBAAoB;IACpB,EAAE,CAAC,4BAA4B,EAAE,KAAK,IAAI,EAAE;QAC1C,MAAM,EAAE,CAAC,OAAO,CAAC,GAAG,EAAE;YACpB,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC;YACtB,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YAClC,MAAM,CAAC,OAAO,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACpD,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,mBAAmB;IACnB,EAAE,CAAC,6BAA6B,EAAE,KAAK,IAAI,EAAE;QAC3C,MAAM,EAAE,CAAC,OAAO,CAAC,GAAG,EAAE;YACpB,OAAO,CAAC,KAAK,GAAG,UAAU,CAAC;YAC3B,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;YACvC,MAAM,KAAK,GAAG,OAAO,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;YAC5C,MAAM,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QACjC,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,qBAAqB;IACrB,EAAE,CAAC,8BAA8B,EAAE,KAAK,IAAI,EAAE;QAC5C,MAAM,EAAE,CAAC,OAAO,CAAC,GAAG,EAAE;YACpB,OAAO,CAAC,QAAQ,GAAG,IAAI,CAAC;YACxB,MAAM,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YACpC,MAAM,CAAC,OAAO,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACtD,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,sBAAsB;IACtB,EAAE,CAAC,sCAAsC,EAAE,KAAK,IAAI,EAAE;QACpD,MAAM,YAAY,GAAG,EAAE,CAAC,EAAE,EAAE,CAAC;QAC7B,OAAO,CAAC,gBAAgB,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC;QAEhD,OAAO,CAAC,KAAK,EAAE,CAAC;QAEhB,MAAM,EAAE,CAAC,OAAO,CAAC,GAAG,EAAE;YACpB,MAAM,CAAC,YAAY,CAAC,CAAC,gBAAgB,EAAE,CAAC;QAC1C,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}