npm - @ukic/web-components - Versions diffs - 2.29.1 → 3.0.0-alpha.2 - Mend

@ukic/web-components 2.29.1 → 3.0.0-alpha.2

Files changed (955) hide show

package/dist/components/ic-status-tag.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ic-status-tag.js","mappings":";;;;AAAA,MAAM,cAAc,GAAG,~~wkIAAwkI~~;;~~MCallI~~,SAAS;;;;;yBAKU,KAAK~~;;;oBAeV~~,~~SAAS~~;~~qBAKR~~,~~KAAK~~;~~sBAKQ~~,SAAS;~~uBAKb~~,QAAQ;;IAE3C,~~iBAAiB;QACf,IAAI,IAAI,CAAC,UAAU,KAAK,UAAU,EAAE;YAClC,IAAI,CAAC,OAAO,GAAG,UAAU,CAAC;SAC3B;KACF;IAED,~~gBAAgB;QACd,gCAAgC,CAC9B,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EACzC,YAAY,CACb,CAAC;KACH;IAED,MAAM;QACJ,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,~~UAAU,EAAE,~~OAAO,EAAE,~~KAAK~~,EAAE,~~IAAI~~,EAAE,~~SAAS~~,EAAE,GAAG,IAAI,CAAC;~~QAC5E~~,QACE,EAAC,IAAI,~~IAAC~~,IAAI,EAAE,SAAS,GAAG,QAAQ,GAAG,IAAI,~~gBAAa~~,QAAQ,~~IAC1D~~,cACE,KAAK,EAAE;gBACL,CAAC,KAAK,GAAG,IAAI;gBACb,CAAC,GAAG,~~UAAU,IAAI,MAAM,EAAE,GAAG,UAAU,KAAK,SAAS;gBACrD,CAAC,GAAG,~~OAAO,IAAI,MAAM,EAAE,GAAG,IAAI;gBAC9B,CAAC,UAAU,GAAG,OAAO,KAAK,UAAU;gBACpC,CAAC,~~OAAO,~~GAAG,~~KAAK,~~IAAI,~~IAAI,KAAK,OAAO;gBACpC,CAAC,GAAG,IAAI,~~EAAE,GAAG,IAAI;aAClB,IAED,qBACE,OAAO,EAAC,iBAAiB,4BACD,KAAK,IAE7B,gBAAO,KAAK,CAAQ,CACN,CACT,CACJ,EACP;KACH~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","names":[],"sources":["src/components/ic-status-tag/ic-status-tag.css?tag=ic-status-tag&encapsulation=shadow","src/components/ic-status-tag/ic-status-tag.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n.tag {\n padding: var(--ic-space-xxs) var(--ic-space-sm);\n font-size: 0.875rem;\n border-radius: var(--ic-space-md);\n display: inline-block;\n min-width: 2.5rem;\n text-align: center;\n color: var(--ic-~~color~~-~~primary~~-text);\n}\n\n.small {\n padding: var(--ic-space-xxxs) var(--ic-space-sm);\n border-radius: calc(var(--ic-space-md) - var(--ic-space-xxxs));\n}\n\n.large {\n padding: var(--ic-space-xs) var(--ic-space-sm);\n border-radius: calc(var(--ic-space-md) + var(--ic-space-xxs));\n}\n\n.filled-neutral {\n background-color: var(--ic-~~architectural~~-~~700);\n color: var(--ic~~-~~architectural-white~~);\n}\n\n.filled-success {\n background-color: var(--ic-status-success);\n ~~color: var(--ic-architectural-white);\n~~}\n\n.filled-warning {\n background-color: var(--ic-status-warning-~~contrast~~);\n}\n\n.filled-danger {\n background-color: var(--ic-status-error);\n ~~color: var(--ic-architectural-white);\n~~}\n\n.outlined {\n padding: calc(var(--ic-space-xxxs) + var(--ic-space-1px))\n calc(var(--ic-space-sm) - var(--ic-space-1px));\n}\n\n.outlined.small {\n padding: var(--ic-space-1px) calc(var(--ic-space-sm) - var(--ic-space-1px));\n}\n\n.outlined.large {\n padding: calc(var(--ic-space-xs) - var(--ic-space-1px))\n calc(var(--ic-space-sm) - var(--ic-space-1px));\n}\n\n.outlined-neutral {\n background-color: var(--ic-~~architectural~~-~~200~~);\n border: var(--ic-border-width) solid var(--ic-~~architectural~~-~~400~~);\n}\n\n.outlined-success {\n background-color: var(--ic-status-success~~-light~~);\n border: var(--ic-border-width) solid var(--ic-status-success);\n}\n\n.outlined-warning {\n background-color: var(--ic-status-warning~~-light~~);\n border: var(--ic-border-width) solid var(--ic-status-warning-~~dark~~);\n}\n\n.outlined-danger {\n background-color: var(--ic-status-error~~-light~~);\n border: var(--ic-border-width) solid var(--ic-status-error);\n}\n\n@media (forced-colors: active) {\n .tag {\n border: var(--ic-hc~~-border~~);\n -ms-high-contrast-adjust: none;\n forced-color-adjust: none;\n }\n}\n","import { Component, Host, h, Prop } from \"@stencil/core\";\nimport { onComponentRequiredPropUndefined } from \"../../utils/helpers\";\nimport {\n IcStatusTagStatuses~~,\n IcStatusTagAppearance,\n~~} from \"./ic-status-tag.types\";\nimport { IcEmphasisType, IcSizes } from \"../../utils/types\";\n\n@Component({\n tag: \"ic-status-tag\",\n styleUrl: \"ic-status-tag.css\",\n shadow: true,\n})\nexport class StatusTag {\n /*\n If `true`, role='status' is added to the component and it will act as an 'aria-live' region.\n * Screen readers will announce changes to the `label`, but not the initial value.\n /\n @Prop() announced?: boolean = false;\n\n /\n ~~@deprecated~~ ~~This~~ ~~prop~~ ~~should~~ ~~not~~ be ~~used anymore. Use variant prop instead~~.\n /\n @Prop() ~~appearance?:~~ ~~IcStatusTagAppearance~~;\n\n /\n The ~~content~~ ~~rendered~~ ~~within~~ the status tag.\n /\n @Prop() ~~label!:~~ ~~string~~;\n\n /\n The ~~size~~ of the status tag ~~component~~.\n /\n @Prop() ~~size~~?: ~~IcSizes~~ = \"~~default~~\";\n\n /\n ~~@deprecated~~ ~~This~~ ~~prop~~ ~~should~~ ~~not~~ be ~~used~~ ~~anymore.~~ ~~Set~~ ~~prop~~ ~~`size`~~ to \"~~small~~\" ~~instead.\n /\n @Prop()~~ ~~small?:~~ ~~boolean~~ = false;\n\n /\n ~~The~~ ~~colour~~ of ~~the~~ ~~status~~ ~~tag~~.\n /\n @Prop() ~~status~~?: ~~IcStatusTagStatuses~~ = \"~~neutral~~\";\n\n /\n The emphasis of the status tag.\n */\n @Prop() variant?: IcEmphasisType = \"filled\";\n\n ~~componentWillLoad(): void {\n if (this.appearance === \"outlined\") {\n this.variant = \"outlined\";\n }\n }\n\n~~ componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [{ prop: this.label, propName: \"label\" }],\n \"Status Tag\"\n );\n }\n\n render() {\n const { label, status, ~~appearance,~~ variant, ~~small,~~ size, announced } = this;\n return (\n <Host role={announced ? \"status\" : null} aria-label=\"Status\">\n <strong\n class={{\n [\"tag\"]: true,\n [`${~~appearance}-${status}`]: appearance !== undefined,\n [`${~~variant}-${status}`]: true,\n [\"outlined\"]: variant === \"outlined\",\n [~~\"small\"]: small \|\| size === \"small\",\n [~~`${size}`]: true,\n }}\n >\n <ic-typography\n variant=\"label-uppercase\"\n apply-vertical-margins={false}\n >\n <span>{label}</span>\n </ic-typography>\n </strong>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ic-status-tag.js","mappings":";;;;AAAA,MAAM,cAAc,GAAG,i4IAAi4I;;MCU34I,SAAS;;;;;yBAKU,KAAK;;oBAUV,QAAQ;sBAKM,SAAS;qBAKD,SAAS;uBAKrB,QAAQ;;IAE3C,gBAAgB;QACd,gCAAgC,CAC9B,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EACzC,YAAY,CACb,CAAC;KACH;IAED,MAAM;QACJ,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;QAChE,QACE,EAAC,IAAI,IACH,KAAK,EAAE,EAAE,CAAC,YAAY,KAAK,EAAE,GAAG,KAAK,KAAK,SAAS,EAAE,EACrD,IAAI,EAAE,SAAS,GAAG,QAAQ,GAAG,IAAI,gBACtB,QAAQ,IAEnB,cACE,KAAK,EAAE;gBACL,CAAC,KAAK,GAAG,IAAI;gBACb,CAAC,GAAG,OAAO,IAAI,MAAM,EAAE,GAAG,IAAI;gBAC9B,CAAC,UAAU,GAAG,OAAO,KAAK,UAAU;gBACpC,CAAC,GAAG,IAAI,EAAE,GAAG,IAAI;aAClB,IAED,qBACE,OAAO,EAAC,iBAAiB,4BACD,KAAK,IAE7B,gBAAO,KAAK,CAAQ,CACN,CACT,CACJ,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/ic-status-tag/ic-status-tag.css?tag=ic-status-tag&encapsulation=shadow","src/components/ic-status-tag/ic-status-tag.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n.tag {\n padding: var(--ic-space-xxs) var(--ic-space-sm);\n font-size: 0.875rem;\n border-radius: var(--ic-space-md);\n display: inline-block;\n min-width: 2.5rem;\n text-align: center;\n\n --ic-typography-color: var(--ic-status-tag-text);\n}\n\n.small {\n padding: var(--ic-space-xxxs) var(--ic-space-sm);\n border-radius: calc(var(--ic-space-md) - var(--ic-space-xxxs));\n}\n\n.large {\n padding: var(--ic-space-xs) var(--ic-space-sm);\n border-radius: calc(var(--ic-space-md) + var(--ic-space-xxs));\n}\n\n.filled-neutral {\n background-color: var(--ic-status-tag-neutral);\n}\n\n.filled-success {\n background-color: var(--ic-status-tag-success);\n}\n\n.filled-warning {\n background-color: var(--ic-status-tag-warning);\n --ic-typography-color: var(--ic-status-tag-outlined-text);\n}\n\n.filled-danger {\n background-color: var(--ic-status-tag-error);\n}\n\n.outlined {\n padding: calc(var(--ic-space-xxxs) + var(--ic-space-1px))\n calc(var(--ic-space-sm) - var(--ic-space-1px));\n}\n\n.outlined.small {\n padding: var(--ic-space-1px) calc(var(--ic-space-sm) - var(--ic-space-1px));\n}\n\n.outlined.large {\n padding: calc(var(--ic-space-xs) - var(--ic-space-1px))\n calc(var(--ic-space-sm) - var(--ic-space-1px));\n}\n\n.outlined-neutral {\n background-color: var(--ic-status-tag-outlined-background-neutral);\n border: var(--ic-border-width) solid var(--ic-status-tag-outlined-neutral);\n --ic-typography-color: var(--ic-status-tag-outlined-text);\n}\n\n.outlined-success {\n background-color: var(--ic-status-tag-outlined-background-success);\n border: var(--ic-border-width) solid var(--ic-status-tag-outlined-success);\n --ic-typography-color: var(--ic-status-tag-outlined-text);\n}\n\n.outlined-warning {\n background-color: var(--ic-status-tag-outlined-background-warning);\n border: var(--ic-border-width) solid var(--ic-status-tag-outlined-warning);\n --ic-typography-color: var(--ic-status-tag-outlined-text);\n}\n\n.outlined-danger {\n background-color: var(--ic-status-tag-outlined-background-error);\n border: var(--ic-border-width) solid var(--ic-status-tag-outlined-error);\n --ic-typography-color: var(--ic-status-tag-outlined-text);\n}\n\n@media (forced-colors: active) {\n .tag {\n border: var(--ic-border-hc);\n -ms-high-contrast-adjust: none;\n forced-color-adjust: none;\n }\n}\n","import { Component, Host, h, Prop } from \"@stencil/core\";\nimport { onComponentRequiredPropUndefined } from \"../../utils/helpers\";\nimport { IcStatusTagStatuses } from \"./ic-status-tag.types\";\nimport { IcEmphasisType, IcSizes } from \"../../utils/types\";\n\n@Component({\n tag: \"ic-status-tag\",\n styleUrl: \"ic-status-tag.css\",\n shadow: true,\n})\nexport class StatusTag {\n /*\n If `true`, role='status' is added to the component and it will act as an 'aria-live' region.\n * Screen readers will announce changes to the `label`, but not the initial value.\n /\n @Prop() announced?: boolean = false;\n\n /\n The content rendered within the status tag.\n /\n @Prop() label!: string;\n\n /\n The size of the status tag component.\n /\n @Prop() size?: IcSizes = \"medium\";\n\n /\n The colour of the status tag.\n /\n @Prop() status?: IcStatusTagStatuses = \"neutral\";\n\n /\n Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n /\n @Prop() theme?: \"dark\" \| \"light\" \| \"inherit\" = \"inherit\";\n\n /\n The emphasis of the status tag.\n */\n @Prop() variant?: IcEmphasisType = \"filled\";\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [{ prop: this.label, propName: \"label\" }],\n \"Status Tag\"\n );\n }\n\n render() {\n const { label, status, variant, size, announced, theme } = this;\n return (\n <Host\n class={{ [`ic-theme-${theme}`]: theme !== \"inherit\" }}\n role={announced ? \"status\" : null}\n aria-label=\"Status\"\n >\n <strong\n class={{\n [\"tag\"]: true,\n [`${variant}-${status}`]: true,\n [\"outlined\"]: variant === \"outlined\",\n [`${size}`]: true,\n }}\n >\n <ic-typography\n variant=\"label-uppercase\"\n apply-vertical-margins={false}\n >\n <span>{label}</span>\n </ic-typography>\n </strong>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/ic-step.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { c as checkIcon } from './check-icon.js';
-import { e as isPropDefined } from './helpers.js';
+import { l as isPropDefined } from './helpers.js';
 import { d as defineCustomElement$3 } from './ic-loading-indicator2.js';
 import { d as defineCustomElement$2 } from './ic-typography2.js';
@@ -8,7 +8,7 @@ const warningIcon = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none"
 <path d="M7.99935 4.32666L13.0193 13H2.97935L7.99935 4.32666ZM7.99935 1.66666L0.666016 14.3333H15.3327L7.99935 1.66666ZM8.66602 11H7.33268V12.3333H8.66602V11ZM8.66602 6.99999H7.33268V9.66666H8.66602V6.99999Z" fill="currentColor"/>
 </svg>`;
-const icStepCss = ":host{display:flex;flex:auto}.step{display:flex;flex:1 1 0}.step-icon{display:flex;justify-content:center}.step-title,.step-subtitle,.step-status,.next-step{white-space:pre-line}.visually-hidden{position:absolute;left:-625rem;top:auto;width:1px;height:1px;overflow:hidden}:host(.compact){-moz-column-gap:var(--ic-space-sm);column-gap:var(--ic-space-sm);--compact-step-inner-color:var(--ic-status-info);--compact-step-circular-line-width:var(--ic-space-xxs)}:host(.compact.light){--compact-step-inner-color:var(--ic-status-info-contrast);--compact-step-outer-color:var(--ic-architectural-600)}:host(.compact) .step{-moz-column-gap:var(--ic-space-sm);column-gap:var(--ic-space-sm)}:host(.compact) .step:not(.current){display:none;opacity:0;visibility:hidden}.compact-step-progress-indicator{margin:var(--ic-space-xs) 0 0}:host ic-loading-indicator::part(ic-loading-container){border-radius:50%}:host(:not(.light)) ic-loading-indicator::part(ic-loading-container){background-color:var(--ic-architectural-white)}:host(.compact) .step-title-area{display:flex;flex-direction:column;width:14.25rem}:host(.compact.light) .disabled .step-title-area{color:var(--ic-architectural-400)}.info-line{display:flex;-moz-column-gap:var(--ic-space-xs);column-gap:var(--ic-space-xs)}.step-status{display:flex;color:var(--ic-color-secondary-text);-moz-column-gap:var(--ic-space-xxxs);column-gap:var(--ic-space-xxxs)}.compact-step-completed .step-status{color:var(--ic-status-success)}:host(.light) .compact-step-completed .step-status{color:var(--ic-status-success-contrast)}.compact-step-disabled :is(.step-title,.step-status){color:var(--ic-color-tertiary-text)}:host(.light) .compact-step-disabled :is(.step-status){color:var(--ic-architectural-white)}.step-num{color:var(--ic-color-secondary-text);white-space:nowrap}:host(.light) .step-num{color:var(--ic-architectural-white)}:host(.compact) .step-icon{margin:var(--ic-space-xxxs)}:host(.compact) .step-icon svg{width:var(--ic-space-md);height:var(--ic-space-md)}:host(.default) .step{flex-direction:column}:host(.default.last-step){flex-grow:initial}.step-top{display:flex;width:100%;align-items:center;align-self:flex-start;height:2.5rem}:host(.default) .step-icon{border-radius:50%}:host(.default:not(.light)) .step-icon{background-color:var(--ic-architectural-white)}.step-icon-inner{width:var(--ic-space-xl);height:var(--ic-space-xl);display:flex;justify-content:center;align-items:center;border-radius:50%}:host(.default) .current{color:var(--ic-status-info)}:host(.default.light) .current,:host(.default.light) .current .step-title-area{color:var(--ic-status-info-contrast)}:host(.default) .step-title-area{margin:var(--ic-space-xs) 0;padding-right:var(--ic-space-xs);width:100%}:host(.light) .step-title-area{color:var(--ic-architectural-200)}:host(.compact.light) .step-title-area{color:var(--ic-architectural-white)}:host(.default) .step-title,.step-subtitle{width:-moz-fit-content;width:fit-content}.step-subtitle{color:var(--ic-color-tertiary-text)}:host(.light) .step-subtitle{color:var(--ic-architectural-white)}.current .step-subtitle{color:var(--ic-color-primary-text)}:host(.default) .completed{color:var(--ic-status-success)}:host(.default.light) .completed,:host(.default.light) .completed .step-title-area{color:var(--ic-status-success-contrast)}.active .step-icon-inner{box-shadow:inset var(--ic-architectural-200) 0 0 0 0.125rem}:host(.light) .active .step-icon-inner{color:var(--ic-architectural-white)}.current .step-icon-inner{background-color:var(--ic-status-info);color:white}:host(.light) .current .step-icon-inner{background-color:var(--ic-status-info-contrast)}.disabled{color:var(--ic-architectural-200)}:host(.default.light) .disabled,:host(.default.light) .disabled .step-title-area{color:var(--ic-architectural-400)}.disabled .step-icon-inner{border:var(--ic-border-width) dashed var(--ic-architectural-200);width:calc(var(--ic-space-xl) - var(--ic-space-xxxs));height:calc(var(--ic-space-xl) - var(--ic-space-xxxs))}:host(.light) .disabled .step-icon-inner{border:var(--ic-border-width) dashed var(--ic-architectural-400)}.disabled .step-title-area,:host(.default.light) .disabled .step-subtitle{color:var(--ic-color-tertiary-text)}.completed .step-icon-inner{background:var(--ic-status-success);box-shadow:inset var(--ic-status-success) 0 0 0 var(--ic-space-xxxs);border-radius:100%}:host(.light) .completed .step-icon-inner{background:var(--ic-status-success-contrast);box-shadow:inset var(--ic-status-success-contrast) 0 0 0 var(--ic-space-xxxs)}:host(.default) .current .step-icon{border:var(--ic-space-xxxs) solid var(--ic-status-info);padding:var(--ic-space-xxxs);margin:0 calc(-1 * var(--ic-space-xxxs));}:host(.default.light) .current .step-icon{border:var(--ic-space-xxxs) solid var(--ic-status-info-contrast)}.step-connect{height:var(--ic-space-xxxs);background-color:var(--ic-architectural-200);margin:0 var(--ic-space-xs);border-radius:var(--ic-space-xxs);width:100%}:host(.light) .step-connect{background-color:var(--ic-architectural-600)}.aligned-full-width.step-connect{min-width:6.25rem;width:100%}.disabled .step-connect{height:0;background-color:rgb(0 0 0 / 0%);border-top:0.125rem dashed var(--ic-architectural-200);border-radius:0}:host(.light) .disabled .step-connect{border-top:0.125rem dashed var(--ic-architectural-600)}.completed .step-connect{background-color:var(--ic-status-success)}:host(.light) .completed .step-connect{background-color:var(--ic-status-success-contrast)}.step-connect-inner{width:70%;display:flex;flex:auto;height:var(--ic-space-xxxs);border-radius:var(--ic-space-xxs);background-color:var(--ic-status-info)}:host(.light) .step-connect-inner{background-color:var(--ic-status-info-contrast)}.step-icon-inner .check-icon{padding-top:var(--ic-space-xxs)}.step-icon-inner .check-icon svg{width:var(--ic-space-md);height:auto}.step-icon-inner .check-icon>svg>path{fill:var(--ic-color-white-text)}@media (forced-colors: active){.compact-step-disabled :is(.step-title,.step-status){color:GrayText}.step-connect:not(.disabled .step-connect){border:var(--ic-hc-border)}.active .step-icon-inner,.completed .step-icon-inner,.current .step-icon-inner{forced-color-adjust:none;box-shadow:inset canvastext 0 0 0 0.125rem;background-color:transparent;color:canvastext}:host(.default) .current .step-icon{padding:0;border:none}.disabled,.disabled .step-title-area{color:GrayText}.step-connect-inner,.completed .step-connect{background-color:canvastext}.step-icon-inner .check-icon>svg>path{fill:canvastext}}";
+const icStepCss = ":host{display:flex;flex:auto;--ic-typography-color:currentcolor}.step{display:flex;flex:1 1 0}.step-icon{display:flex;justify-content:center}.heading,.subheading,.step-status,.next-step{white-space:pre-line}.next-step{color:var(--ic-stepper-compact-step-next-text)}.visually-hidden{position:absolute;left:-625rem;top:auto;width:1px;height:1px;overflow:hidden}:host(.ic-step-compact){-moz-column-gap:var(--ic-space-sm);column-gap:var(--ic-space-sm);--compact-step-inner-color:var(--ic-step-indicator-status-current);--compact-step-outer-color:var(--ic-step-indicator-status-remaining);--compact-step-circular-line-width:var(--ic-space-xxs)}:host(.ic-step-compact) .step{-moz-column-gap:var(--ic-space-sm);column-gap:var(--ic-space-sm)}:host(.ic-step-compact) .step:not(.current){display:none;opacity:0;visibility:hidden}.compact-step-progress-indicator{margin:var(--ic-space-xs) 0 0}:host ic-loading-indicator::part(ic-loading-container){border-radius:50%}:host() ic-loading-indicator::part(ic-loading-container){background-color:var(--ic-step-indicator-background)}:host(.ic-step-compact) .heading-area{display:flex;flex-direction:column;width:14.25rem}:host(.ic-step-compact) .heading{color:var(--ic-stepper-compact-step-title)}:host(.ic-step-compact) .disabled .heading{color:var(--ic-stepper-compact-step-title)}.info-line{display:flex;-moz-column-gap:var(--ic-space-xs);column-gap:var(--ic-space-xs)}.step-status{display:flex;color:var(--ic-stepper-compact-step-requirement-text);-moz-column-gap:var(--ic-space-xxxs);column-gap:var(--ic-space-xxxs)}.compact-step-completed .step-status{color:var(--ic-stepper-compact-step-completed-text)}.compact-step-disabled :is(.heading,.step-status){color:var(--ic-stepper-compact-step-requirement-text-disabled)}.step-num{color:var(--ic-stepper-compact-step-stage-text);white-space:nowrap}:host(.ic-step-compact) .step-icon{margin:var(--ic-space-xxxs)}:host(.ic-step-compact) .step-icon svg{width:var(--ic-space-md);height:var(--ic-space-md)}:host(.ic-step-default) .step{flex-direction:column}:host(.ic-step-default.last-step){flex-grow:initial}.step-top{display:flex;width:100%;align-items:center;align-self:flex-start;height:2.5rem}:host(.ic-step-default) .step-icon{border-radius:50%}:host(.ic-step-default) .step-icon{background-color:var(--ic-step-number-inactive)}.step-icon-inner{width:var(--ic-space-xl);height:var(--ic-space-xl);display:flex;justify-content:center;align-items:center;border-radius:50%;color:var(--ic-step-number-text-inactive)}:host(.ic-step-default) .current{color:var(--ic-status-info-default)}:host(.ic-step-default.ic-step-light) .current,:host(.ic-step-default.ic-step-light) .current .heading-area{color:var(--ic-status-info-contrast)}:host(.ic-step-default) .heading-area{margin:var(--ic-space-xs) 0;padding-right:var(--ic-space-xs);width:100%}:host(.ic-step-light) .heading-area{color:var(--ic-architectural-200)}:host(.ic-step-compact.ic-step-light) .heading-area{color:var(--ic-architectural-white)}:host(.ic-step-default) .heading,.subheading{width:-moz-fit-content;width:fit-content}.heading{color:var(--ic-step-title)}.current .heading{color:var(--ic-step-title-current)}.completed .heading{color:var(--ic-step-title-success)}.disabled .heading{color:var(--ic-step-title-disabled)}.subheading{color:var(--ic-step-title-status-text-inactive)}.current .subheading{color:var(--ic-step-title-status-text-current)}.disabled .subheading{color:var(--ic-step-title-status-text-disabled)}:host(.ic-step-default) .completed{color:var(--ic-status-success-default)}:host(.ic-step-default.ic-step-light) .completed,:host(.ic-step-default.ic-step-light) .completed .heading-area{color:var(--ic-status-success-contrast)}.active .step-icon-inner{box-shadow:inset var(--ic-step-number-inactive-outline) 0 0 0 0.125rem}:host(.ic-step-light) .active .step-icon-inner{color:var(--ic-architectural-white)}.current .step-icon-inner{background-color:var(--ic-step-number-background-active);color:var(--ic-step-number-text)}.disabled{color:var(--ic-architectural-200)}:host(.ic-step-default.ic-step-light) .disabled,:host(.ic-step-default.ic-step-light) .disabled .heading-area{color:var(--ic-architectural-400)}.disabled .step-icon-inner{border:var(--ic-border-width) dashed var(--ic-step-number-disabled);width:calc(var(--ic-space-xl) - var(--ic-space-xxxs));height:calc(var(--ic-space-xl) - var(--ic-space-xxxs));color:var(--ic-step-number-text-disabled)}.disabled .step-icon{background-color:transparent !important}.completed .step-icon-inner{background:var(--ic-step-number-background-success);box-shadow:inset var(--ic-step-number-background-success) 0 0 0\n    var(--ic-space-xxxs);border-radius:100%}:host(.ic-step-default) .current .step-icon{border:var(--ic-space-xxxs) solid var(--ic-step-number-current-outline);padding:var(--ic-space-xxxs);margin:0 calc(-1 * var(--ic-space-xxxs));background-color:var(--ic-step-number-current-outer-fill);}.step-connect{height:var(--ic-space-xxxs);background-color:var(--ic-stepper-connector-remaining-status);margin:0 var(--ic-space-xs);border-radius:var(--ic-space-xxs);width:100%}.aligned-full-width.step-connect{min-width:6.25rem;width:100%}.disabled .step-connect{height:0;background-color:rgb(0 0 0 / 0%);border-top:0.125rem dashed var(--ic-stepper-connector-disabled);border-radius:0}.completed .step-connect{background-color:var(--ic-stepper-connector-success)}.step-connect-inner{width:70%;display:flex;flex:auto;height:var(--ic-space-xxxs);border-radius:var(--ic-space-xxs);background-color:var(--ic-stepper-connector-current-status)}.step-icon-inner .check-icon{padding-top:var(--ic-space-xxs)}.step-icon-inner .check-icon svg{width:var(--ic-space-md);height:auto}.step-icon-inner .check-icon>svg>path{fill:var(--ic-step-number-icon-success)}@media (forced-colors: active){.compact-step-disabled :is(.heading,.step-status){color:GrayText}.step-connect:not(.disabled .step-connect){border:var(--ic-border-hc)}.active .step-icon-inner,.completed .step-icon-inner,.current .step-icon-inner{forced-color-adjust:none;box-shadow:inset canvastext 0 0 0 0.125rem;background-color:transparent;color:canvastext}:host(.ic-step-default) .current .step-icon{padding:0;border:none}.disabled,.disabled .heading-area,.disabled .step-icon-inner,.disabled .heading{color:GrayText}.step-connect-inner,.completed .step-connect{background-color:canvastext}.step-icon-inner .check-icon>svg>path{fill:canvastext}}";
 const Step = /*@__PURE__*/ proxyCustomElement(class Step extends HTMLElement {
     constructor() {
@@ -19,17 +19,18 @@ const Step = /*@__PURE__*/ proxyCustomElement(class Step extends HTMLElement {
         this.current = false;
         this.lastStep = undefined;
         this.lastStepNum = undefined;
-        this.nextStepTitle = undefined;
+        this.nextStepHeading = undefined;
         this.progress = undefined;
         this.stepNum = undefined;
-        this.stepStatus = undefined;
-        this.stepSubtitle = undefined;
-        this.stepTitle = undefined;
+        this.status = undefined;
+        this.subheading = undefined;
+        this.heading = undefined;
+        this.theme = "inherit";
         this.variant = undefined;
-        this.stepType = "active";
+        this.type = "active";
     }
-    stepTypeChangeHandler() {
-        if (this.variant === "compact" && this.stepType === "current") {
+    typeChangeHandler() {
+        if (this.variant === "compact" && this.type === "current") {
             this.current = true;
         }
         else {
@@ -37,30 +38,28 @@ const Step = /*@__PURE__*/ proxyCustomElement(class Step extends HTMLElement {
         }
     }
     render() {
-        var _a;
         // ARIA LABEL
         let ariaLabel = "";
-        if (this.stepType === "completed") {
+        if (this.type === "completed") {
             ariaLabel = ". Completed step";
         }
-        else if (this.stepType === "disabled") {
+        else if (this.type === "disabled") {
             ariaLabel = ". Non-required step";
         }
-        else if (this.stepStatus === "required") {
+        else if (this.status === "required") {
             ariaLabel = ". Required step";
         }
-        else if (this.stepStatus === "optional") {
+        else if (this.status === "optional") {
             ariaLabel = ". Optional step";
         }
         // STEP STATUS
         let stepStatus;
-        if (isPropDefined(this.stepStatus)) {
-            stepStatus = this.stepStatus[0].toUpperCase() + this.stepStatus.slice(1);
+        if (isPropDefined(this.status)) {
+            stepStatus = this.status[0].toUpperCase() + this.status.slice(1);
         }
         // STEP TYPE
         let stepType;
-        if (this.stepType === "disabled" ||
-            this.compactStepStyling === "disabled") {
+        if (this.type === "disabled" || this.compactStepStyling === "disabled") {
             stepType = "Not required";
         }
         else if (this.compactStepStyling === "completed") {
@@ -68,11 +67,10 @@ const Step = /*@__PURE__*/ proxyCustomElement(class Step extends HTMLElement {
         }
         // STATUS ICON FOR COMPACT STEP
         let statusIcon;
-        if (this.stepType === "completed" ||
-            this.compactStepStyling === "completed") {
+        if (this.type === "completed" || this.compactStepStyling === "completed") {
             statusIcon = (h("span", { class: "check-icon step-icon", "aria-hidden": "true", innerHTML: checkIcon }));
         }
-        else if (this.stepType === "disabled" ||
+        else if (this.type === "disabled" ||
             this.compactStepStyling === "disabled") {
             statusIcon = (h("span", { class: "warning-icon step-icon", "aria-hidden": "true", innerHTML: warningIcon }));
         }
@@ -83,58 +81,56 @@ const Step = /*@__PURE__*/ proxyCustomElement(class Step extends HTMLElement {
                 [`compact-step-${this.compactStepStyling}`]: !!this.compactStepStyling,
             } }, h("ic-loading-indicator", { class: {
                 "compact-step-progress-indicator": true,
-                "not-required": this.stepType === "disabled" ||
+                "not-required": this.type === "disabled" ||
                     this.compactStepStyling === "disabled",
-            }, "aria-hidden": "true", size: "small", "inner-label": this.stepNum, progress: this.progress }), h("div", { class: "step-title-area" }, h("ic-typography", { variant: "h4", class: "step-title" }, this.stepTitle), h("div", { class: "info-line" }, h("ic-typography", { variant: "caption", class: "step-num" }, `${this.stepNum} of ${this.lastStepNum}`, h("span", { class: "visually-hidden" }, " steps")), (this.stepSubtitle ||
-            this.stepType === "completed" ||
-            this.stepType === "disabled" ||
+            }, "aria-hidden": "true", size: "small", "inner-label": this.stepNum, progress: this.progress }), h("div", { class: "heading-area" }, h("ic-typography", { variant: "h4", class: "heading" }, this.heading), h("div", { class: "info-line" }, h("ic-typography", { variant: "caption", class: "step-num" }, `${this.stepNum} of ${this.lastStepNum}`, h("span", { class: "visually-hidden" }, " steps")), (this.subheading ||
+            this.type === "completed" ||
+            this.type === "disabled" ||
             (this.variant === "compact" &&
                 !!this.compactStepStyling &&
                 this.compactStepStyling !== "active") ||
-            !!this.stepStatus) && (h("div", { class: "step-status" }, statusIcon !== undefined && statusIcon, (this.stepSubtitle || stepType) && (h("ic-typography", { variant: "caption" }, this.stepSubtitle !== null &&
-            isPropDefined(this.stepSubtitle)
-            ? this.stepSubtitle
-            : this.stepType === "disabled" ||
+            !!this.status) && (h("div", { class: "step-status" }, statusIcon !== undefined && statusIcon, (this.subheading || stepType) && (h("ic-typography", { variant: "caption" }, this.subheading !== null && isPropDefined(this.subheading)
+            ? this.subheading
+            : this.type === "disabled" ||
                 (this.variant === "compact" &&
                     this.compactStepStyling === "disabled") ||
-                this.stepType === "completed" ||
+                this.type === "completed" ||
                 (this.variant === "compact" &&
                     this.compactStepStyling === "completed")
                 ? stepType
-                : this.stepStatus && stepStatus))))), this.lastStep ? (h("ic-typography", { variant: "subtitle-small", class: "next-step" }, "Last step")) : (isPropDefined(this.nextStepTitle) && (h("ic-typography", { variant: "subtitle-small", class: "next-step" }, "Next", h("span", { class: "visually-hidden" }, " step is"), ":", " ", this.nextStepTitle))))));
+                : this.status && stepStatus))))), this.lastStep ? (h("ic-typography", { variant: "subtitle-small", class: "next-step" }, "Last step")) : (isPropDefined(this.nextStepHeading) && (h("ic-typography", { variant: "subtitle-small", class: "next-step" }, "Next", h("span", { class: "visually-hidden" }, " step is"), ":", " ", this.nextStepHeading))))));
         // ICON FOR DEFAULT STEP
         let icon;
-        if (this.stepType !== "completed") {
+        if (this.type !== "completed") {
             icon = (h("ic-typography", { variant: "subtitle-small" }, h("span", { class: "step-icon-inner", "aria-hidden": "true" }, this.stepNum)));
         }
         else {
             icon = (h("div", { class: "step-icon-inner", "aria-hidden": "true" }, h("span", { class: "check-icon", innerHTML: checkIcon })));
         }
         // STEP CONNECT FOR DEFAULT STEP
-        const partialBar = this.stepType === "current" && (h("div", { class: "step-connect-inner" }));
+        const partialBar = this.type === "current" && (h("div", { class: "step-connect-inner" }));
         const finalStep = !this.lastStep && (h("div", { class: {
                 ["step-connect"]: true,
-                ["aligned-full-width"]: this.el.parentElement.classList.contains("default") &&
-                    !this.el.parentElement.classList.contains("aligned-left"),
+                ["aligned-full-width"]: this.el.parentElement.classList.contains("ic-stepper-default") &&
+                    !this.el.parentElement.classList.contains("ic-stepper-aligned-left"),
             } }, partialBar));
         // DEFAULT STEP COMPONENT
         const defaultStep = (h("div", { class: {
                 ["step"]: true,
-                [`${this.stepType}`]: true,
-            } }, h("div", { class: "step-top" }, h("div", { class: "step-icon" }, icon), finalStep), (this.stepTitle || this.stepSubtitle || this.stepStatus) && (h("div", { class: "step-title-area" }, this.stepTitle && (h("ic-typography", { variant: "subtitle-large", class: "step-title" }, this.stepTitle)), this.stepTitle && (this.stepSubtitle || this.stepStatus) && (h("ic-typography", { variant: "caption", class: "step-subtitle" }, this.stepSubtitle !== null && isPropDefined(this.stepSubtitle)
-            ? this.stepSubtitle
+                [`${this.type}`]: true,
+            } }, h("div", { class: "step-top" }, h("div", { class: "step-icon" }, icon), finalStep), (this.heading || this.subheading || this.status) && (h("div", { class: "heading-area" }, this.heading && (h("ic-typography", { variant: "subtitle-large", class: "heading" }, this.heading)), this.heading && (this.subheading || this.status) && (h("ic-typography", { variant: "caption", class: "subheading" }, this.subheading !== null && isPropDefined(this.subheading)
+            ? this.subheading
             : stepStatus))))));
-        return (h(Host, { role: "listitem", "aria-label": `Step ${this.stepNum}${ariaLabel}`, "aria-current": (this.current || this.stepType === "current") && "step", class: {
-                ["aligned-full-width"]: this.el.parentElement.classList.contains("default") &&
-                    !this.el.parentElement.classList.contains("aligned-left"),
-                [`${this.variant}`]: true,
-                ["light"]: ((_a = this.el.parentElement) === null || _a === void 0 ? void 0 : _a.appearance) ===
-                    "light",
+        return (h(Host, { role: "listitem", "aria-label": `Step ${this.stepNum}${ariaLabel}`, "aria-current": (this.current || this.type === "current") && "step", class: {
+                ["aligned-full-width"]: this.el.parentElement.classList.contains("ic-stepper-default") &&
+                    !this.el.parentElement.classList.contains("ic-stepper-aligned-left"),
+                [`ic-step-${this.variant}`]: true,
+                [`ic-theme-${this.theme}`]: this.theme !== "inherit",
             } }, this.variant === "compact" ? compactStep : defaultStep));
     }
     get el() { return this; }
     static get watchers() { return {
-        "stepType": ["stepTypeChangeHandler"]
+        "type": ["typeChangeHandler"]
     }; }
     static get style() { return icStepCss; }
 }, [1, "ic-step", {
@@ -142,16 +138,17 @@ const Step = /*@__PURE__*/ proxyCustomElement(class Step extends HTMLElement {
         "current": [1028],
         "lastStep": [4, "last-step"],
         "lastStepNum": [2, "last-step-num"],
-        "nextStepTitle": [1, "next-step-title"],
+        "nextStepHeading": [1, "next-step-heading"],
         "progress": [2],
         "stepNum": [2, "step-num"],
-        "stepStatus": [1, "step-status"],
-        "stepSubtitle": [1, "step-subtitle"],
-        "stepTitle": [1, "step-title"],
+        "status": [1],
+        "subheading": [1],
+        "heading": [1],
+        "theme": [1],
         "variant": [1],
-        "stepType": [1, "step-type"]
+        "type": [1]
     }, undefined, {
-        "stepType": ["stepTypeChangeHandler"]
+        "type": ["typeChangeHandler"]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

package/dist/components/ic-step.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ic-step.js","mappings":";;;;;;;;;;AAAA,MAAM,SAAS,GAAG,62MAA62M;;MCWl3M,IAAI;;;;;;uBAW8B,KAAK;;;;;;;;;;wBAkDjB,QAAQ;;IAGzC,qBAAqB;QACnB,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,KAAK,SAAS,EAAE;YAC7D,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;SACrB;aAAM;YACL,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;SACtB;KACF;IAED,MAAM;;;QAEJ,IAAI,SAAS,GAAG,EAAE,CAAC;QAEnB,IAAI,IAAI,CAAC,QAAQ,KAAK,WAAW,EAAE;YACjC,SAAS,GAAG,kBAAkB,CAAC;SAChC;aAAM,IAAI,IAAI,CAAC,QAAQ,KAAK,UAAU,EAAE;YACvC,SAAS,GAAG,qBAAqB,CAAC;SACnC;aAAM,IAAI,IAAI,CAAC,UAAU,KAAK,UAAU,EAAE;YACzC,SAAS,GAAG,iBAAiB,CAAC;SAC/B;aAAM,IAAI,IAAI,CAAC,UAAU,KAAK,UAAU,EAAE;YACzC,SAAS,GAAG,iBAAiB,CAAC;SAC/B;;QAGD,IAAI,UAAU,CAAC;QACf,IAAI,aAAa,CAAC,IAAI,CAAC,UAAU,CAAC,EAAE;YAClC,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;SAC1E;;QAGD,IAAI,QAAQ,CAAC;QACb,IACE,IAAI,CAAC,QAAQ,KAAK,UAAU;YAC5B,IAAI,CAAC,kBAAkB,KAAK,UAAU,EACtC;YACA,QAAQ,GAAG,cAAc,CAAC;SAC3B;aAAM,IAAI,IAAI,CAAC,kBAAkB,KAAK,WAAW,EAAE;YAClD,QAAQ,GAAG,WAAW,CAAC;SACxB;;QAGD,IAAI,UAAU,CAAC;QACf,IACE,IAAI,CAAC,QAAQ,KAAK,WAAW;YAC7B,IAAI,CAAC,kBAAkB,KAAK,WAAW,EACvC;YACA,UAAU,IACR,YACE,KAAK,EAAC,sBAAsB,iBAChB,MAAM,EAClB,SAAS,EAAE,SAAS,GACd,CACT,CAAC;SACH;aAAM,IACL,IAAI,CAAC,QAAQ,KAAK,UAAU;YAC5B,IAAI,CAAC,kBAAkB,KAAK,UAAU,EACtC;YACA,UAAU,IACR,YACE,KAAK,EAAC,wBAAwB,iBAClB,MAAM,EAClB,SAAS,EAAE,WAAW,GAChB,CACT,CAAC;SACH;;QAGD,MAAM,WAAW,IACf,WACE,KAAK,EAAE;gBACL,CAAC,MAAM,GAAG,IAAI;gBACd,CAAC,SAAS,GAAG,IAAI,CAAC,OAAO;gBACzB,CAAC,gBAAgB,IAAI,CAAC,kBAAkB,EAAE,GACxC,CAAC,CAAC,IAAI,CAAC,kBAAkB;aAC5B,IAED,4BACE,KAAK,EAAE;gBACL,iCAAiC,EAAE,IAAI;gBACvC,cAAc,EACZ,IAAI,CAAC,QAAQ,KAAK,UAAU;oBAC5B,IAAI,CAAC,kBAAkB,KAAK,UAAU;aACzC,iBACW,MAAM,EAClB,IAAI,EAAC,OAAO,iBACC,IAAI,CAAC,OAAO,EACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GACD,EACxB,WAAK,KAAK,EAAC,iBAAiB,IAC1B,qBAAe,OAAO,EAAC,IAAI,EAAC,KAAK,EAAC,YAAY,IAC3C,IAAI,CAAC,SAAS,CACD,EAChB,WAAK,KAAK,EAAC,WAAW,IACpB,qBAAe,OAAO,EAAC,SAAS,EAAC,KAAK,EAAC,UAAU,IAC9C,GAAG,IAAI,CAAC,OAAO,OAAO,IAAI,CAAC,WAAW,EAAE,EACzC,YAAM,KAAK,EAAC,iBAAiB,aAAc,CAC7B,EACf,CAAC,IAAI,CAAC,YAAY;YACjB,IAAI,CAAC,QAAQ,KAAK,WAAW;YAC7B,IAAI,CAAC,QAAQ,KAAK,UAAU;aAC3B,IAAI,CAAC,OAAO,KAAK,SAAS;gBACzB,CAAC,CAAC,IAAI,CAAC,kBAAkB;gBACzB,IAAI,CAAC,kBAAkB,KAAK,QAAQ,CAAC;YACvC,CAAC,CAAC,IAAI,CAAC,UAAU,MACjB,WAAK,KAAK,EAAC,aAAa,IACrB,UAAU,KAAK,SAAS,IAAI,UAAU,EACtC,CAAC,IAAI,CAAC,YAAY,IAAI,QAAQ,MAC7B,qBAAe,OAAO,EAAC,SAAS,IAC7B,IAAI,CAAC,YAAY,KAAK,IAAI;YAC3B,aAAa,CAAC,IAAI,CAAC,YAAY,CAAC;cAC5B,IAAI,CAAC,YAAY;cACjB,IAAI,CAAC,QAAQ,KAAK,UAAU;iBAC3B,IAAI,CAAC,OAAO,KAAK,SAAS;oBACzB,IAAI,CAAC,kBAAkB,KAAK,UAAU,CAAC;gBACzC,IAAI,CAAC,QAAQ,KAAK,WAAW;iBAC5B,IAAI,CAAC,OAAO,KAAK,SAAS;oBACzB,IAAI,CAAC,kBAAkB,KAAK,WAAW,CAAC;kBAC1C,QAAQ;kBACR,IAAI,CAAC,UAAU,IAAI,UAAU,CACnB,CACjB,CACG,CACP,CACG,EACL,IAAI,CAAC,QAAQ,IACZ,qBAAe,OAAO,EAAC,gBAAgB,EAAC,KAAK,EAAC,WAAW,gBAEzC,KAEhB,aAAa,CAAC,IAAI,CAAC,aAAa,CAAC,KAC/B,qBAAe,OAAO,EAAC,gBAAgB,EAAC,KAAK,EAAC,WAAW,YACnD,YAAM,KAAK,EAAC,iBAAiB,eAAgB,OAAE,GAAG,EACrD,IAAI,CAAC,aAAa,CACL,CACjB,CACF,CACG,CACF,CACP,CAAC;;QAGF,IAAI,IAAI,CAAC;QACT,IAAI,IAAI,CAAC,QAAQ,KAAK,WAAW,EAAE;YACjC,IAAI,IACF,qBAAe,OAAO,EAAC,gBAAgB,IACrC,YAAM,KAAK,EAAC,iBAAiB,iBAAa,MAAM,IAC7C,IAAI,CAAC,OAAO,CACR,CACO,CACjB,CAAC;SACH;aAAM;YACL,IAAI,IACF,WAAK,KAAK,EAAC,iBAAiB,iBAAa,MAAM,IAC7C,YAAM,KAAK,EAAC,YAAY,EAAC,SAAS,EAAE,SAAS,GAAS,CAClD,CACP,CAAC;SACH;;QAGD,MAAM,UAAU,GAAG,IAAI,CAAC,QAAQ,KAAK,SAAS,KAC5C,WAAK,KAAK,EAAC,oBAAoB,GAAO,CACvC,CAAC;QAEF,MAAM,SAAS,GAAG,CAAC,IAAI,CAAC,QAAQ,KAC9B,WACE,KAAK,EAAE;gBACL,CAAC,cAAc,GAAG,IAAI;gBACtB,CAAC,oBAAoB,GACnB,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,SAAS,CAAC,QAAQ,CAAC,SAAS,CAAC;oBACnD,CAAC,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,SAAS,CAAC,QAAQ,CAAC,cAAc,CAAC;aAC5D,IAEA,UAAU,CACP,CACP,CAAC;;QAGF,MAAM,WAAW,IACf,WACE,KAAK,EAAE;gBACL,CAAC,MAAM,GAAG,IAAI;gBACd,CAAC,GAAG,IAAI,CAAC,QAAQ,EAAE,GAAG,IAAI;aAC3B,IAED,WAAK,KAAK,EAAC,UAAU,IACnB,WAAK,KAAK,EAAC,WAAW,IAAE,IAAI,CAAO,EAClC,SAAS,CACN,EACL,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,UAAU,MACtD,WAAK,KAAK,EAAC,iBAAiB,IACzB,IAAI,CAAC,SAAS,KACb,qBAAe,OAAO,EAAC,gBAAgB,EAAC,KAAK,EAAC,YAAY,IACvD,IAAI,CAAC,SAAS,CACD,CACjB,EACA,IAAI,CAAC,SAAS,KAAK,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,UAAU,CAAC,KACvD,qBAAe,OAAO,EAAC,SAAS,EAAC,KAAK,EAAC,eAAe,IACnD,IAAI,CAAC,YAAY,KAAK,IAAI,IAAI,aAAa,CAAC,IAAI,CAAC,YAAY,CAAC;cAC3D,IAAI,CAAC,YAAY;cACjB,UAAU,CACA,CACjB,CACG,CACP,CACG,CACP,CAAC;QAEF,QACE,EAAC,IAAI,IACH,IAAI,EAAC,UAAU,gBACH,QAAQ,IAAI,CAAC,OAAO,GAAG,SAAS,EAAE,kBAChC,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,QAAQ,KAAK,SAAS,KAAK,MAAM,EACrE,KAAK,EAAE;gBACL,CAAC,oBAAoB,GACnB,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,SAAS,CAAC,QAAQ,CAAC,SAAS,CAAC;oBACnD,CAAC,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,SAAS,CAAC,QAAQ,CAAC,cAAc,CAAC;gBAC3D,CAAC,GAAG,IAAI,CAAC,OAAO,EAAE,GAAG,IAAI;gBACzB,CAAC,OAAO,GACN,CAAA,MAAC,IAAI,CAAC,EAAE,CAAC,aAAsC,0CAAE,UAAU;oBAC3D,OAAO;aACV,IAEA,IAAI,CAAC,OAAO,KAAK,SAAS,GAAG,WAAW,GAAG,WAAW,CAClD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/ic-step/ic-step.css?tag=ic-step&encapsulation=shadow","src/components/ic-step/ic-step.tsx"],"sourcesContent":["/* SHARED STYLING /\n:host {\n display: flex;\n flex: auto;\n}\n\n.step {\n display: flex;\n flex: 1 1 0;\n}\n\n.step-icon {\n display: flex;\n justify-content: center;\n}\n\n.step-title,\n.step-subtitle,\n.step-status,\n.next-step {\n white-space: pre-line;\n}\n\n.visually-hidden {\n position: absolute;\n left: -625rem;\n top: auto;\n width: 1px;\n height: 1px;\n overflow: hidden;\n}\n\n/ COMPACT STEP STYLING /\n:host(.compact) {\n column-gap: var(--ic-space-sm);\n\n --compact-step-inner-color: var(--ic-status-info);\n --compact-step-circular-line-width: var(--ic-space-xxs);\n}\n\n:host(.compact.light) {\n --compact-step-inner-color: var(--ic-status-info-contrast);\n --compact-step-outer-color: var(--ic-architectural-600);\n}\n\n:host(.compact) .step {\n column-gap: var(--ic-space-sm);\n}\n\n:host(.compact) .step:not(.current) {\n display: none;\n opacity: 0;\n visibility: hidden;\n}\n\n.compact-step-progress-indicator {\n margin: var(--ic-space-xs) 0 0;\n}\n\n:host ic-loading-indicator::part(ic-loading-container) {\n border-radius: 50%;\n}\n\n:host(:not(.light)) ic-loading-indicator::part(ic-loading-container) {\n background-color: var(--ic-architectural-white);\n}\n\n:host(.compact) .step-title-area {\n display: flex;\n flex-direction: column;\n width: 14.25rem;\n}\n\n:host(.compact.light) .disabled .step-title-area {\n color: var(--ic-architectural-400);\n}\n\n.info-line {\n display: flex;\n column-gap: var(--ic-space-xs);\n}\n\n.step-status {\n display: flex;\n color: var(--ic-color-secondary-text);\n column-gap: var(--ic-space-xxxs);\n}\n\n.compact-step-completed .step-status {\n color: var(--ic-status-success);\n}\n\n:host(.light) .compact-step-completed .step-status {\n color: var(--ic-status-success-contrast);\n}\n\n.compact-step-disabled :is(.step-title, .step-status) {\n color: var(--ic-color-tertiary-text);\n}\n\n:host(.light) .compact-step-disabled :is(.step-status) {\n color: var(--ic-architectural-white);\n}\n\n.step-num {\n color: var(--ic-color-secondary-text);\n white-space: nowrap;\n}\n\n:host(.light) .step-num {\n color: var(--ic-architectural-white);\n}\n\n:host(.compact) .step-icon {\n margin: var(--ic-space-xxxs);\n}\n\n:host(.compact) .step-icon svg {\n width: var(--ic-space-md);\n height: var(--ic-space-md);\n}\n\n/ DEFAULT STEP STYLING /\n:host(.default) .step {\n flex-direction: column;\n}\n\n:host(.default.last-step) {\n flex-grow: initial;\n}\n\n.step-top {\n display: flex;\n width: 100%;\n align-items: center;\n align-self: flex-start;\n height: 2.5rem;\n}\n\n:host(.default) .step-icon {\n border-radius: 50%;\n}\n\n:host(.default:not(.light)) .step-icon {\n background-color: var(--ic-architectural-white);\n}\n\n.step-icon-inner {\n width: var(--ic-space-xl);\n height: var(--ic-space-xl);\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 50%;\n}\n\n:host(.default) .current {\n color: var(--ic-status-info);\n}\n\n:host(.default.light) .current,\n:host(.default.light) .current .step-title-area {\n color: var(--ic-status-info-contrast);\n}\n\n:host(.default) .step-title-area {\n margin: var(--ic-space-xs) 0;\n padding-right: var(--ic-space-xs);\n width: 100%;\n}\n\n:host(.light) .step-title-area {\n color: var(--ic-architectural-200);\n}\n\n:host(.compact.light) .step-title-area {\n color: var(--ic-architectural-white);\n}\n\n:host(.default) .step-title,\n.step-subtitle {\n width: fit-content;\n}\n\n.step-subtitle {\n color: var(--ic-color-tertiary-text);\n}\n\n:host(.light) .step-subtitle {\n color: var(--ic-architectural-white);\n}\n\n.current .step-subtitle {\n color: var(--ic-color-primary-text);\n}\n\n:host(.default) .completed {\n color: var(--ic-status-success);\n}\n\n:host(.default.light) .completed,\n:host(.default.light) .completed .step-title-area {\n color: var(--ic-status-success-contrast);\n}\n\n.active .step-icon-inner {\n box-shadow: inset var(--ic-architectural-200) 0 0 0 0.125rem;\n}\n\n:host(.light) .active .step-icon-inner {\n color: var(--ic-architectural-white);\n}\n\n.current .step-icon-inner {\n background-color: var(--ic-status-info);\n color: white;\n}\n\n:host(.light) .current .step-icon-inner {\n background-color: var(--ic-status-info-contrast);\n}\n\n.disabled {\n color: var(--ic-architectural-200);\n}\n\n:host(.default.light) .disabled,\n:host(.default.light) .disabled .step-title-area {\n color: var(--ic-architectural-400);\n}\n\n.disabled .step-icon-inner {\n border: var(--ic-border-width) dashed var(--ic-architectural-200);\n width: calc(var(--ic-space-xl) - var(--ic-space-xxxs));\n height: calc(var(--ic-space-xl) - var(--ic-space-xxxs));\n}\n\n:host(.light) .disabled .step-icon-inner {\n border: var(--ic-border-width) dashed var(--ic-architectural-400);\n}\n\n.disabled .step-title-area,\n:host(.default.light) .disabled .step-subtitle {\n color: var(--ic-color-tertiary-text);\n}\n\n.completed .step-icon-inner {\n background: var(--ic-status-success);\n box-shadow: inset var(--ic-status-success) 0 0 0 var(--ic-space-xxxs);\n border-radius: 100%;\n}\n\n:host(.light) .completed .step-icon-inner {\n background: var(--ic-status-success-contrast);\n box-shadow: inset var(--ic-status-success-contrast) 0 0 0 var(--ic-space-xxxs);\n}\n\n:host(.default) .current .step-icon {\n border: var(--ic-space-xxxs) solid var(--ic-status-info);\n padding: var(--ic-space-xxxs);\n margin: 0 calc(-1 var(--ic-space-xxxs));\n\n /* compensating for the circle being bigger than other steps /\n}\n\n:host(.default.light) .current .step-icon {\n border: var(--ic-space-xxxs) solid var(--ic-status-info-contrast);\n}\n\n.step-connect {\n height: var(--ic-space-xxxs);\n background-color: var(--ic-architectural-200);\n margin: 0 var(--ic-space-xs);\n border-radius: var(--ic-space-xxs);\n width: 100%;\n}\n\n:host(.light) .step-connect {\n background-color: var(--ic-architectural-600);\n}\n\n.aligned-full-width.step-connect {\n min-width: 6.25rem;\n width: 100%;\n}\n\n.disabled .step-connect {\n height: 0;\n background-color: rgb(0 0 0 / 0%);\n border-top: 0.125rem dashed var(--ic-architectural-200);\n border-radius: 0;\n}\n\n:host(.light) .disabled .step-connect {\n border-top: 0.125rem dashed var(--ic-architectural-600);\n}\n\n.completed .step-connect {\n background-color: var(--ic-status-success);\n}\n\n:host(.light) .completed .step-connect {\n background-color: var(--ic-status-success-contrast);\n}\n\n.step-connect-inner {\n width: 70%;\n display: flex;\n flex: auto;\n height: var(--ic-space-xxxs);\n border-radius: var(--ic-space-xxs);\n background-color: var(--ic-status-info);\n}\n\n:host(.light) .step-connect-inner {\n background-color: var(--ic-status-info-contrast);\n}\n\n.step-icon-inner .check-icon {\n padding-top: var(--ic-space-xxs);\n}\n\n.step-icon-inner .check-icon svg {\n width: var(--ic-space-md);\n height: auto;\n}\n\n.step-icon-inner .check-icon > svg > path {\n fill: var(--ic-color-white-text);\n}\n\n/* High Contrast */\n@media (forced-colors: active) {\n / COMPACT STEP /\n .compact-step-disabled :is(.step-title, .step-status) {\n color: GrayText;\n }\n\n / DEFAULT STEP /\n .step-connect:not(.disabled .step-connect) {\n border: var(--ic-hc-border);\n }\n\n .active .step-icon-inner,\n .completed .step-icon-inner,\n .current .step-icon-inner {\n forced-color-adjust: none;\n box-shadow: inset canvastext 0 0 0 0.125rem;\n background-color: transparent;\n color: canvastext;\n }\n\n :host(.default) .current .step-icon {\n padding: 0;\n border: none;\n }\n\n .disabled,\n .disabled .step-title-area {\n color: GrayText;\n }\n\n .step-connect-inner,\n .completed .step-connect {\n background-color: canvastext;\n }\n\n .step-icon-inner .check-icon > svg > path {\n fill: canvastext;\n }\n}\n\n/ Add back in after storybook has the `color-scheme: light dark` code /\n\n/ @media (prefers-color-scheme: dark) and (not (forced-colors: active)) {\n :host(:not(.light)) .step-icon-inner {\n color: var(--ic-architectural-black);\n }\n\n .step-num,\n .step-subtitle {\n color: var(--ic-architectural-white) !important;\n }\n} /\n","import { Component, Host, h, Prop, Element, Watch } from \"@stencil/core\";\nimport checkIcon from \"../../assets/check-icon.svg\";\nimport warningIcon from \"../../assets/warning-icon-outline.svg\";\nimport { IcStepVariants, IcStepStatuses, IcStepTypes } from \"./ic-step.types\";\nimport { isPropDefined } from \"../../utils/helpers\";\n\n@Component({\n tag: \"ic-step\",\n styleUrl: \"ic-step.css\",\n shadow: true,\n})\nexport class Step {\n @Element() el: HTMLIcStepElement;\n\n /\n @internal If a compact stepper is being used, this sets the styling of the step.\n /\n @Prop() compactStepStyling?: IcStepTypes;\n\n /\n @internal If `true`, and a compact stepper is being used, the current step will be the only step in view.\n /\n @Prop({ mutable: true }) current?: boolean = false;\n\n /\n @internal If `true`, the step will be marked as being the last one in the series. This is managed by ic-stepper.\n /\n @Prop() lastStep!: boolean;\n\n /\n @internal The step number of the final step. This is managed by ic-stepper.\n /\n @Prop() lastStepNum?: number;\n\n /\n @internal The name of the next step. This is managed by ic-stepper.\n /\n @Prop() nextStepTitle?: string;\n\n /\n @internal The progress of the next step, calculated by dividing the current step number by the total number of steps. This is managed by ic-stepper.\n /\n @Prop() progress?: number;\n\n /\n @internal The step number, managed by ic-stepper.\n /\n @Prop() stepNum?: number;\n\n /\n The status of the step. Use this prop to display a status message on the step if it is required or optional.\n /\n @Prop() stepStatus?: IcStepStatuses;\n\n /\n Additional information about the step. Use this prop to override the default step status messaging displayed when selecting a step type or step status.\n /\n @Prop() stepSubtitle?: string;\n\n /\n The title of the step within the stepper.\n /\n @Prop() stepTitle?: string;\n\n /\n @internal The variant of the step. This is managed by ic-stepper.\n /\n @Prop() variant!: IcStepVariants;\n\n /\n The state of the step within the stepper.\n */\n @Prop() stepType?: IcStepTypes = \"active\";\n\n @Watch(\"stepType\")\n stepTypeChangeHandler(): void {\n if (this.variant === \"compact\" && this.stepType === \"current\") {\n this.current = true;\n } else {\n this.current = false;\n }\n }\n\n render() {\n // ARIA LABEL\n let ariaLabel = \"\";\n\n if (this.stepType === \"completed\") {\n ariaLabel = \". Completed step\";\n } else if (this.stepType === \"disabled\") {\n ariaLabel = \". Non-required step\";\n } else if (this.stepStatus === \"required\") {\n ariaLabel = \". Required step\";\n } else if (this.stepStatus === \"optional\") {\n ariaLabel = \". Optional step\";\n }\n\n // STEP STATUS\n let stepStatus;\n if (isPropDefined(this.stepStatus)) {\n stepStatus = this.stepStatus[0].toUpperCase() + this.stepStatus.slice(1);\n }\n\n // STEP TYPE\n let stepType;\n if (\n this.stepType === \"disabled\" \|\|\n this.compactStepStyling === \"disabled\"\n ) {\n stepType = \"Not required\";\n } else if (this.compactStepStyling === \"completed\") {\n stepType = \"Completed\";\n }\n\n // STATUS ICON FOR COMPACT STEP\n let statusIcon;\n if (\n this.stepType === \"completed\" \|\|\n this.compactStepStyling === \"completed\"\n ) {\n statusIcon = (\n <span\n class=\"check-icon step-icon\"\n aria-hidden=\"true\"\n innerHTML={checkIcon}\n ></span>\n );\n } else if (\n this.stepType === \"disabled\" \|\|\n this.compactStepStyling === \"disabled\"\n ) {\n statusIcon = (\n <span\n class=\"warning-icon step-icon\"\n aria-hidden=\"true\"\n innerHTML={warningIcon}\n ></span>\n );\n }\n\n // COMPACT STEP COMPONENT\n const compactStep = (\n <div\n class={{\n [\"step\"]: true,\n [\"current\"]: this.current,\n [`compact-step-${this.compactStepStyling}`]:\n !!this.compactStepStyling,\n }}\n >\n <ic-loading-indicator\n class={{\n \"compact-step-progress-indicator\": true,\n \"not-required\":\n this.stepType === \"disabled\" \|\|\n this.compactStepStyling === \"disabled\",\n }}\n aria-hidden=\"true\"\n size=\"small\"\n inner-label={this.stepNum}\n progress={this.progress}\n ></ic-loading-indicator>\n <div class=\"step-title-area\">\n <ic-typography variant=\"h4\" class=\"step-title\">\n {this.stepTitle}\n </ic-typography>\n <div class=\"info-line\">\n <ic-typography variant=\"caption\" class=\"step-num\">\n {`${this.stepNum} of ${this.lastStepNum}`}\n <span class=\"visually-hidden\"> steps</span>\n </ic-typography>\n {(this.stepSubtitle \|\|\n this.stepType === \"completed\" \|\|\n this.stepType === \"disabled\" \|\|\n (this.variant === \"compact\" &&\n !!this.compactStepStyling &&\n this.compactStepStyling !== \"active\") \|\|\n !!this.stepStatus) && (\n <div class=\"step-status\">\n {statusIcon !== undefined && statusIcon}\n {(this.stepSubtitle \|\| stepType) && (\n <ic-typography variant=\"caption\">\n {this.stepSubtitle !== null &&\n isPropDefined(this.stepSubtitle)\n ? this.stepSubtitle\n : this.stepType === \"disabled\" \|\|\n (this.variant === \"compact\" &&\n this.compactStepStyling === \"disabled\") \|\|\n this.stepType === \"completed\" \|\|\n (this.variant === \"compact\" &&\n this.compactStepStyling === \"completed\")\n ? stepType\n : this.stepStatus && stepStatus}\n </ic-typography>\n )}\n </div>\n )}\n </div>\n {this.lastStep ? (\n <ic-typography variant=\"subtitle-small\" class=\"next-step\">\n Last step\n </ic-typography>\n ) : (\n isPropDefined(this.nextStepTitle) && (\n <ic-typography variant=\"subtitle-small\" class=\"next-step\">\n Next<span class=\"visually-hidden\"> step is</span>:{\" \"}\n {this.nextStepTitle}\n </ic-typography>\n )\n )}\n </div>\n </div>\n );\n\n // ICON FOR DEFAULT STEP\n let icon;\n if (this.stepType !== \"completed\") {\n icon = (\n <ic-typography variant=\"subtitle-small\">\n <span class=\"step-icon-inner\" aria-hidden=\"true\">\n {this.stepNum}\n </span>\n </ic-typography>\n );\n } else {\n icon = (\n <div class=\"step-icon-inner\" aria-hidden=\"true\">\n <span class=\"check-icon\" innerHTML={checkIcon}></span>\n </div>\n );\n }\n\n // STEP CONNECT FOR DEFAULT STEP\n const partialBar = this.stepType === \"current\" && (\n <div class=\"step-connect-inner\"></div>\n );\n\n const finalStep = !this.lastStep && (\n <div\n class={{\n [\"step-connect\"]: true,\n [\"aligned-full-width\"]:\n this.el.parentElement.classList.contains(\"default\") &&\n !this.el.parentElement.classList.contains(\"aligned-left\"),\n }}\n >\n {partialBar}\n </div>\n );\n\n // DEFAULT STEP COMPONENT\n const defaultStep = (\n <div\n class={{\n [\"step\"]: true,\n [`${this.stepType}`]: true,\n }}\n >\n <div class=\"step-top\">\n <div class=\"step-icon\">{icon}</div>\n {finalStep}\n </div>\n {(this.stepTitle \|\| this.stepSubtitle \|\| this.stepStatus) && (\n <div class=\"step-title-area\">\n {this.stepTitle && (\n <ic-typography variant=\"subtitle-large\" class=\"step-title\">\n {this.stepTitle}\n </ic-typography>\n )}\n {this.stepTitle && (this.stepSubtitle \|\| this.stepStatus) && (\n <ic-typography variant=\"caption\" class=\"step-subtitle\">\n {this.stepSubtitle !== null && isPropDefined(this.stepSubtitle)\n ? this.stepSubtitle\n : stepStatus}\n </ic-typography>\n )}\n </div>\n )}\n </div>\n );\n\n return (\n <Host\n role=\"listitem\"\n aria-label={`Step ${this.stepNum}${ariaLabel}`}\n aria-current={(this.current \|\| this.stepType === \"current\") && \"step\"}\n class={{\n [\"aligned-full-width\"]:\n this.el.parentElement.classList.contains(\"default\") &&\n !this.el.parentElement.classList.contains(\"aligned-left\"),\n [`${this.variant}`]: true,\n [\"light\"]:\n (this.el.parentElement as HTMLIcStepperElement)?.appearance ===\n \"light\",\n }}\n >\n {this.variant === \"compact\" ? compactStep : defaultStep}\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ic-step.js","mappings":"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","names":[],"sources":["src/components/ic-step/ic-step.css?tag=ic-step&encapsulation=shadow","src/components/ic-step/ic-step.tsx"],"sourcesContent":["/* SHARED STYLING /\n:host {\n display: flex;\n flex: auto;\n\n --ic-typography-color: currentcolor;\n}\n\n.step {\n display: flex;\n flex: 1 1 0;\n}\n\n.step-icon {\n display: flex;\n justify-content: center;\n}\n\n.heading,\n.subheading,\n.step-status,\n.next-step {\n white-space: pre-line;\n}\n\n.next-step {\n color: var(--ic-stepper-compact-step-next-text);\n}\n\n.visually-hidden {\n position: absolute;\n left: -625rem;\n top: auto;\n width: 1px;\n height: 1px;\n overflow: hidden;\n}\n\n/ COMPACT STEP STYLING /\n:host(.ic-step-compact) {\n column-gap: var(--ic-space-sm);\n\n --compact-step-inner-color: var(--ic-step-indicator-status-current);\n --compact-step-outer-color: var(--ic-step-indicator-status-remaining);\n --compact-step-circular-line-width: var(--ic-space-xxs);\n}\n\n:host(.ic-step-compact) .step {\n column-gap: var(--ic-space-sm);\n}\n\n:host(.ic-step-compact) .step:not(.current) {\n display: none;\n opacity: 0;\n visibility: hidden;\n}\n\n.compact-step-progress-indicator {\n margin: var(--ic-space-xs) 0 0;\n}\n\n:host ic-loading-indicator::part(ic-loading-container) {\n border-radius: 50%;\n}\n\n:host() ic-loading-indicator::part(ic-loading-container) {\n background-color: var(--ic-step-indicator-background);\n}\n\n:host(.ic-step-compact) .heading-area {\n display: flex;\n flex-direction: column;\n width: 14.25rem;\n}\n\n:host(.ic-step-compact) .heading {\n color: var(--ic-stepper-compact-step-title);\n}\n\n:host(.ic-step-compact) .disabled .heading {\n color: var(--ic-stepper-compact-step-title);\n}\n\n.info-line {\n display: flex;\n column-gap: var(--ic-space-xs);\n}\n\n.step-status {\n display: flex;\n color: var(--ic-stepper-compact-step-requirement-text);\n column-gap: var(--ic-space-xxxs);\n}\n\n.compact-step-completed .step-status {\n color: var(--ic-stepper-compact-step-completed-text);\n}\n\n.compact-step-disabled :is(.heading, .step-status) {\n color: var(--ic-stepper-compact-step-requirement-text-disabled);\n}\n\n.step-num {\n color: var(--ic-stepper-compact-step-stage-text);\n white-space: nowrap;\n}\n\n:host(.ic-step-compact) .step-icon {\n margin: var(--ic-space-xxxs);\n}\n\n:host(.ic-step-compact) .step-icon svg {\n width: var(--ic-space-md);\n height: var(--ic-space-md);\n}\n\n/ DEFAULT STEP STYLING /\n:host(.ic-step-default) .step {\n flex-direction: column;\n}\n\n:host(.ic-step-default.last-step) {\n flex-grow: initial;\n}\n\n.step-top {\n display: flex;\n width: 100%;\n align-items: center;\n align-self: flex-start;\n height: 2.5rem;\n}\n\n:host(.ic-step-default) .step-icon {\n border-radius: 50%;\n}\n\n:host(.ic-step-default) .step-icon {\n background-color: var(--ic-step-number-inactive);\n}\n\n.step-icon-inner {\n width: var(--ic-space-xl);\n height: var(--ic-space-xl);\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 50%;\n color: var(--ic-step-number-text-inactive);\n}\n\n:host(.ic-step-default) .current {\n color: var(--ic-status-info-default);\n}\n\n:host(.ic-step-default.ic-step-light) .current,\n:host(.ic-step-default.ic-step-light) .current .heading-area {\n color: var(--ic-status-info-contrast);\n}\n\n:host(.ic-step-default) .heading-area {\n margin: var(--ic-space-xs) 0;\n padding-right: var(--ic-space-xs);\n width: 100%;\n}\n\n:host(.ic-step-light) .heading-area {\n color: var(--ic-architectural-200);\n}\n\n:host(.ic-step-compact.ic-step-light) .heading-area {\n color: var(--ic-architectural-white);\n}\n\n:host(.ic-step-default) .heading,\n.subheading {\n width: fit-content;\n}\n\n.heading {\n color: var(--ic-step-title);\n}\n\n.current .heading {\n color: var(--ic-step-title-current);\n}\n\n.completed .heading {\n color: var(--ic-step-title-success);\n}\n\n.disabled .heading {\n color: var(--ic-step-title-disabled);\n}\n\n.subheading {\n color: var(--ic-step-title-status-text-inactive);\n}\n\n.current .subheading {\n color: var(--ic-step-title-status-text-current);\n}\n\n.disabled .subheading {\n color: var(--ic-step-title-status-text-disabled);\n}\n\n:host(.ic-step-default) .completed {\n color: var(--ic-status-success-default);\n}\n\n:host(.ic-step-default.ic-step-light) .completed,\n:host(.ic-step-default.ic-step-light) .completed .heading-area {\n color: var(--ic-status-success-contrast);\n}\n\n.active .step-icon-inner {\n box-shadow: inset var(--ic-step-number-inactive-outline) 0 0 0 0.125rem;\n}\n\n:host(.ic-step-light) .active .step-icon-inner {\n color: var(--ic-architectural-white);\n}\n\n.current .step-icon-inner {\n background-color: var(--ic-step-number-background-active);\n color: var(--ic-step-number-text);\n}\n\n.disabled {\n color: var(--ic-architectural-200);\n}\n\n:host(.ic-step-default.ic-step-light) .disabled,\n:host(.ic-step-default.ic-step-light) .disabled .heading-area {\n color: var(--ic-architectural-400);\n}\n\n.disabled .step-icon-inner {\n border: var(--ic-border-width) dashed var(--ic-step-number-disabled);\n width: calc(var(--ic-space-xl) - var(--ic-space-xxxs));\n height: calc(var(--ic-space-xl) - var(--ic-space-xxxs));\n color: var(--ic-step-number-text-disabled);\n}\n\n.disabled .step-icon {\n background-color: transparent !important;\n}\n\n.completed .step-icon-inner {\n background: var(--ic-step-number-background-success);\n box-shadow: inset var(--ic-step-number-background-success) 0 0 0\n var(--ic-space-xxxs);\n border-radius: 100%;\n}\n\n:host(.ic-step-default) .current .step-icon {\n border: var(--ic-space-xxxs) solid var(--ic-step-number-current-outline);\n padding: var(--ic-space-xxxs);\n margin: 0 calc(-1 var(--ic-space-xxxs));\n background-color: var(--ic-step-number-current-outer-fill);\n\n /* compensating for the circle being bigger than other steps /\n}\n\n.step-connect {\n height: var(--ic-space-xxxs);\n background-color: var(--ic-stepper-connector-remaining-status);\n margin: 0 var(--ic-space-xs);\n border-radius: var(--ic-space-xxs);\n width: 100%;\n}\n\n.aligned-full-width.step-connect {\n min-width: 6.25rem;\n width: 100%;\n}\n\n.disabled .step-connect {\n height: 0;\n background-color: rgb(0 0 0 / 0%);\n border-top: 0.125rem dashed var(--ic-stepper-connector-disabled);\n border-radius: 0;\n}\n\n.completed .step-connect {\n background-color: var(--ic-stepper-connector-success);\n}\n\n.step-connect-inner {\n width: 70%;\n display: flex;\n flex: auto;\n height: var(--ic-space-xxxs);\n border-radius: var(--ic-space-xxs);\n background-color: var(--ic-stepper-connector-current-status);\n}\n\n.step-icon-inner .check-icon {\n padding-top: var(--ic-space-xxs);\n}\n\n.step-icon-inner .check-icon svg {\n width: var(--ic-space-md);\n height: auto;\n}\n\n.step-icon-inner .check-icon > svg > path {\n fill: var(--ic-step-number-icon-success);\n}\n\n/* High Contrast */\n@media (forced-colors: active) {\n / COMPACT STEP /\n .compact-step-disabled :is(.heading, .step-status) {\n color: GrayText;\n }\n\n / DEFAULT STEP /\n .step-connect:not(.disabled .step-connect) {\n border: var(--ic-border-hc);\n }\n\n .active .step-icon-inner,\n .completed .step-icon-inner,\n .current .step-icon-inner {\n forced-color-adjust: none;\n box-shadow: inset canvastext 0 0 0 0.125rem;\n background-color: transparent;\n color: canvastext;\n }\n\n :host(.ic-step-default) .current .step-icon {\n padding: 0;\n border: none;\n }\n\n .disabled,\n .disabled .heading-area,\n .disabled .step-icon-inner,\n .disabled .heading {\n color: GrayText;\n }\n\n .step-connect-inner,\n .completed .step-connect {\n background-color: canvastext;\n }\n\n .step-icon-inner .check-icon > svg > path {\n fill: canvastext;\n }\n}\n","import { Component, Host, h, Prop, Element, Watch } from \"@stencil/core\";\nimport checkIcon from \"../../assets/check-icon.svg\";\nimport warningIcon from \"../../assets/warning-icon-outline.svg\";\nimport { IcStepVariants, IcStepStatuses, IcStepTypes } from \"./ic-step.types\";\nimport { isPropDefined } from \"../../utils/helpers\";\nimport { IcThemeMode } from \"../../utils/types\";\n\n@Component({\n tag: \"ic-step\",\n styleUrl: \"ic-step.css\",\n shadow: true,\n})\nexport class Step {\n @Element() el: HTMLIcStepElement;\n\n /\n @internal If a compact stepper is being used, this sets the styling of the step.\n /\n @Prop() compactStepStyling?: IcStepTypes;\n\n /\n @internal If `true`, and a compact stepper is being used, the current step will be the only step in view.\n /\n @Prop({ mutable: true }) current?: boolean = false;\n\n /\n @internal If `true`, the step will be marked as being the last one in the series. This is managed by ic-stepper.\n /\n @Prop() lastStep!: boolean;\n\n /\n @internal The step number of the final step. This is managed by ic-stepper.\n /\n @Prop() lastStepNum?: number;\n\n /\n @internal The name of the next step. This is managed by ic-stepper.\n /\n @Prop() nextStepHeading?: string;\n\n /\n @internal The progress of the next step, calculated by dividing the current step number by the total number of steps. This is managed by ic-stepper.\n /\n @Prop() progress?: number;\n\n /\n @internal The step number, managed by ic-stepper.\n /\n @Prop() stepNum?: number;\n\n /\n The status of the step. Use this prop to display a status message on the step if it is required or optional.\n /\n @Prop() status?: IcStepStatuses;\n\n /\n Additional information about the step. Use this prop to override the default step status messaging displayed when selecting a step type or step status.\n /\n @Prop() subheading?: string;\n\n /\n The title of the step within the stepper.\n /\n @Prop() heading?: string;\n\n /\n @internal Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n /\n @Prop() theme?: IcThemeMode = \"inherit\";\n\n /\n @internal The variant of the step. This is managed by ic-stepper.\n /\n @Prop() variant!: IcStepVariants;\n\n /\n The state of the step within the stepper.\n */\n @Prop() type?: IcStepTypes = \"active\";\n\n @Watch(\"type\")\n typeChangeHandler(): void {\n if (this.variant === \"compact\" && this.type === \"current\") {\n this.current = true;\n } else {\n this.current = false;\n }\n }\n\n render() {\n // ARIA LABEL\n let ariaLabel = \"\";\n\n if (this.type === \"completed\") {\n ariaLabel = \". Completed step\";\n } else if (this.type === \"disabled\") {\n ariaLabel = \". Non-required step\";\n } else if (this.status === \"required\") {\n ariaLabel = \". Required step\";\n } else if (this.status === \"optional\") {\n ariaLabel = \". Optional step\";\n }\n\n // STEP STATUS\n let stepStatus;\n if (isPropDefined(this.status)) {\n stepStatus = this.status[0].toUpperCase() + this.status.slice(1);\n }\n\n // STEP TYPE\n let stepType;\n if (this.type === \"disabled\" \|\| this.compactStepStyling === \"disabled\") {\n stepType = \"Not required\";\n } else if (this.compactStepStyling === \"completed\") {\n stepType = \"Completed\";\n }\n\n // STATUS ICON FOR COMPACT STEP\n let statusIcon;\n if (this.type === \"completed\" \|\| this.compactStepStyling === \"completed\") {\n statusIcon = (\n <span\n class=\"check-icon step-icon\"\n aria-hidden=\"true\"\n innerHTML={checkIcon}\n ></span>\n );\n } else if (\n this.type === \"disabled\" \|\|\n this.compactStepStyling === \"disabled\"\n ) {\n statusIcon = (\n <span\n class=\"warning-icon step-icon\"\n aria-hidden=\"true\"\n innerHTML={warningIcon}\n ></span>\n );\n }\n\n // COMPACT STEP COMPONENT\n const compactStep = (\n <div\n class={{\n [\"step\"]: true,\n [\"current\"]: this.current,\n [`compact-step-${this.compactStepStyling}`]:\n !!this.compactStepStyling,\n }}\n >\n <ic-loading-indicator\n class={{\n \"compact-step-progress-indicator\": true,\n \"not-required\":\n this.type === \"disabled\" \|\|\n this.compactStepStyling === \"disabled\",\n }}\n aria-hidden=\"true\"\n size=\"small\"\n inner-label={this.stepNum}\n progress={this.progress}\n ></ic-loading-indicator>\n <div class=\"heading-area\">\n <ic-typography variant=\"h4\" class=\"heading\">\n {this.heading}\n </ic-typography>\n <div class=\"info-line\">\n <ic-typography variant=\"caption\" class=\"step-num\">\n {`${this.stepNum} of ${this.lastStepNum}`}\n <span class=\"visually-hidden\"> steps</span>\n </ic-typography>\n {(this.subheading \|\|\n this.type === \"completed\" \|\|\n this.type === \"disabled\" \|\|\n (this.variant === \"compact\" &&\n !!this.compactStepStyling &&\n this.compactStepStyling !== \"active\") \|\|\n !!this.status) && (\n <div class=\"step-status\">\n {statusIcon !== undefined && statusIcon}\n {(this.subheading \|\| stepType) && (\n <ic-typography variant=\"caption\">\n {this.subheading !== null && isPropDefined(this.subheading)\n ? this.subheading\n : this.type === \"disabled\" \|\|\n (this.variant === \"compact\" &&\n this.compactStepStyling === \"disabled\") \|\|\n this.type === \"completed\" \|\|\n (this.variant === \"compact\" &&\n this.compactStepStyling === \"completed\")\n ? stepType\n : this.status && stepStatus}\n </ic-typography>\n )}\n </div>\n )}\n </div>\n {this.lastStep ? (\n <ic-typography variant=\"subtitle-small\" class=\"next-step\">\n Last step\n </ic-typography>\n ) : (\n isPropDefined(this.nextStepHeading) && (\n <ic-typography variant=\"subtitle-small\" class=\"next-step\">\n Next<span class=\"visually-hidden\"> step is</span>:{\" \"}\n {this.nextStepHeading}\n </ic-typography>\n )\n )}\n </div>\n </div>\n );\n\n // ICON FOR DEFAULT STEP\n let icon;\n if (this.type !== \"completed\") {\n icon = (\n <ic-typography variant=\"subtitle-small\">\n <span class=\"step-icon-inner\" aria-hidden=\"true\">\n {this.stepNum}\n </span>\n </ic-typography>\n );\n } else {\n icon = (\n <div class=\"step-icon-inner\" aria-hidden=\"true\">\n <span class=\"check-icon\" innerHTML={checkIcon}></span>\n </div>\n );\n }\n\n // STEP CONNECT FOR DEFAULT STEP\n const partialBar = this.type === \"current\" && (\n <div class=\"step-connect-inner\"></div>\n );\n\n const finalStep = !this.lastStep && (\n <div\n class={{\n [\"step-connect\"]: true,\n [\"aligned-full-width\"]:\n this.el.parentElement.classList.contains(\"ic-stepper-default\") &&\n !this.el.parentElement.classList.contains(\n \"ic-stepper-aligned-left\"\n ),\n }}\n >\n {partialBar}\n </div>\n );\n\n // DEFAULT STEP COMPONENT\n const defaultStep = (\n <div\n class={{\n [\"step\"]: true,\n [`${this.type}`]: true,\n }}\n >\n <div class=\"step-top\">\n <div class=\"step-icon\">{icon}</div>\n {finalStep}\n </div>\n {(this.heading \|\| this.subheading \|\| this.status) && (\n <div class=\"heading-area\">\n {this.heading && (\n <ic-typography variant=\"subtitle-large\" class=\"heading\">\n {this.heading}\n </ic-typography>\n )}\n {this.heading && (this.subheading \|\| this.status) && (\n <ic-typography variant=\"caption\" class=\"subheading\">\n {this.subheading !== null && isPropDefined(this.subheading)\n ? this.subheading\n : stepStatus}\n </ic-typography>\n )}\n </div>\n )}\n </div>\n );\n\n return (\n <Host\n role=\"listitem\"\n aria-label={`Step ${this.stepNum}${ariaLabel}`}\n aria-current={(this.current \|\| this.type === \"current\") && \"step\"}\n class={{\n [\"aligned-full-width\"]:\n this.el.parentElement.classList.contains(\"ic-stepper-default\") &&\n !this.el.parentElement.classList.contains(\n \"ic-stepper-aligned-left\"\n ),\n [`ic-step-${this.variant}`]: true,\n [`ic-theme-${this.theme}`]: this.theme !== \"inherit\",\n }}\n >\n {this.variant === \"compact\" ? compactStep : defaultStep}\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/ic-stepper.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { T as pxToRem, c as checkResizeObserver } from './helpers.js';
-const icStepperCss = ":host{display:flex;width:100%}.step-item-list{display:flex;margin:0;padding:0}:host(.default:not(.aligned-left)) .step-item-list{flex:auto}:host(.compact) ul ::slotted(ic-step){display:none}:host(.compact) ul ::slotted(ic-step.show){display:flex}:host(.compact) ul ::slotted(ic-step.hide){display:none;opacity:0;visibility:hidden}";
+const icStepperCss = ":host{display:flex;width:100%}.step-item-list{display:flex;margin:0;padding:0}:host(.ic-stepper-default:not(.ic-stepper-aligned-left)) .step-item-list{flex:auto}:host(.ic-stepper-compact) ul ::slotted(ic-step){display:none}:host(.ic-stepper-compact) ul ::slotted(ic-step.show){display:flex}:host(.ic-stepper-compact) ul ::slotted(ic-step.hide){display:none;opacity:0;visibility:hidden}";
 const Stepper = /*@__PURE__*/ proxyCustomElement(class Stepper extends HTMLElement {
     constructor() {
@@ -13,7 +13,7 @@ const Stepper = /*@__PURE__*/ proxyCustomElement(class Stepper extends HTMLEleme
         // Get all steps currently within this stepper
         this.getChildren = () => {
             this.steps = Array.from(this.el.querySelectorAll("ic-step"));
-            this.stepsWithStepTitles = Array.from(this.el.querySelectorAll("ic-step[step-title]"));
+            this.stepsWithStepTitles = Array.from(this.el.querySelectorAll("ic-step[heading]"));
         };
         // Inform the user that stepTitles are required on all steps in a compact stepper
         this.checkStepTitles = () => {
@@ -22,7 +22,7 @@ const Stepper = /*@__PURE__*/ proxyCustomElement(class Stepper extends HTMLEleme
                 this.variant === "compact") {
                 this.noOfResizes = this.noOfResizes + 1;
                 if (this.noOfResizes === 1) {
-                    console.error(`The prop 'step-title' (web components) / 'stepTitle' (react) is required for all steps of the Stepper component (compact variant)`);
+                    console.error(`The prop 'heading' is required for all steps of the Stepper component (compact variant)`);
                 }
             }
         };
@@ -53,39 +53,39 @@ const Stepper = /*@__PURE__*/ proxyCustomElement(class Stepper extends HTMLEleme
                 // Assign lastStep to final step
                 step.lastStep = index === this.steps.length - 1;
                 step.lastStepNum = this.steps.length;
-                if (step.stepType !== "current") {
+                if (step.type !== "current") {
                     step.current = false;
-                    this.stepTypes[index] = step.stepType;
+                    this.stepTypes[index] = step.type;
                 }
                 else {
                     step.current = true;
                 }
                 const stepTitleArea = step.shadowRoot &&
-                    step.shadowRoot.querySelector(".step > .step-title-area");
+                    step.shadowRoot.querySelector(".step > .heading-area");
                 if (this.stepsWithStepTitles.length == 0 && this.variantOverride) {
                     if (this.variant === "compact") {
                         this.autoSetStepTitles = true;
                         if (this.autoSetStepTitles) {
-                            step.stepTitle = "Step " + step.stepNum;
+                            step.heading = "Step " + step.stepNum;
                             stepTitleArea &&
                                 stepTitleArea
-                                    .querySelector(".step-title")
+                                    .querySelector(".heading")
                                     .setAttribute("aria-hidden", "true");
                         }
                     }
                     if (this.variant === "default") {
                         this.autoSetStepTitles = false;
                         if (!this.autoSetStepTitles) {
-                            step.stepTitle = undefined;
+                            step.heading = undefined;
                             stepTitleArea &&
                                 stepTitleArea
-                                    .querySelector(".step-title")
+                                    .querySelector(".heading")
                                     .removeAttribute("aria-hidden");
                         }
                     }
                 }
                 if (this.variant === "compact") {
-                    if (step.current === true || step.stepType === "current") {
+                    if (step.current === true || step.type === "current") {
                         step.classList.remove("hide");
                         step.classList.add("show");
                     }
@@ -94,7 +94,7 @@ const Stepper = /*@__PURE__*/ proxyCustomElement(class Stepper extends HTMLEleme
                         step.classList.add("hide");
                     }
                     if (!step.lastStep) {
-                        step.nextStepTitle = this.steps[index + 1].stepTitle;
+                        step.nextStepHeading = this.steps[index + 1].heading;
                         step.progress = (step.stepNum / this.steps.length) * 100;
                     }
                     else if (step.lastStep && this.stepTypes[index] !== "completed") {
@@ -150,7 +150,7 @@ const Stepper = /*@__PURE__*/ proxyCustomElement(class Stepper extends HTMLEleme
         this.setHideStepInfo = () => {
             this.steps.forEach((step) => {
                 var _a, _b;
-                const stepTitleArea = step.shadowRoot.querySelector(".step > .step-title-area");
+                const stepTitleArea = step.shadowRoot.querySelector(".step > .heading-area");
                 if (stepTitleArea !== null) {
                     if (this.hideStepInfo) {
                         (_a = stepTitleArea.classList) === null || _a === void 0 ? void 0 : _a.add(this.visuallyHidden);
@@ -181,6 +181,7 @@ const Stepper = /*@__PURE__*/ proxyCustomElement(class Stepper extends HTMLEleme
             this.overrideVariant();
             this.setStepperWidth();
             this.initialiseStepStates();
+            this.handleThemeChange();
         };
         this.runResizeObserver = () => {
             this.resizeObserver = new ResizeObserver(() => {
@@ -198,11 +199,17 @@ const Stepper = /*@__PURE__*/ proxyCustomElement(class Stepper extends HTMLEleme
         this.stepTypes = [];
         this.variantOverride = this.variant !== "compact";
         this.aligned = "full-width";
-        this.appearance = "default";
         this.connectorWidth = 100;
         this.hideStepInfo = false;
+        this.theme = "inherit";
         this.variant = "default";
     }
+    handleThemeChange() {
+        this.getChildren();
+        this.steps.forEach((step) => {
+            step.theme = this.theme;
+        });
+    }
     handlePropChange() {
         this.setHideStepInfo();
         this.getChildren();
@@ -214,6 +221,7 @@ const Stepper = /*@__PURE__*/ proxyCustomElement(class Stepper extends HTMLEleme
     }
     componentWillLoad() {
         this.setStepTypes();
+        this.handleThemeChange();
         if (this.variant === "compact") {
             this.variantOverride = false;
         }
@@ -226,21 +234,23 @@ const Stepper = /*@__PURE__*/ proxyCustomElement(class Stepper extends HTMLEleme
     }
     render() {
         return (h(Host, { class: {
-                [`${this.variant}`]: true,
-                ["aligned-left"]: this.variant === "default" && this.aligned === "left",
+                [`ic-stepper-${this.variant}`]: true,
+                ["ic-stepper-aligned-left"]: this.variant === "default" && this.aligned === "left",
+                [`ic-theme-${this.theme}`]: this.theme !== "inherit",
             } }, h("ul", { class: "step-item-list" }, h("slot", null))));
     }
     get el() { return this; }
     static get watchers() { return {
+        "theme": ["handleThemeChange"],
         "hideStepInfo": ["handlePropChange"],
         "variant": ["handlePropChange"]
     }; }
     static get style() { return icStepperCss; }
 }, [1, "ic-stepper", {
         "aligned": [1],
-        "appearance": [1],
         "connectorWidth": [2, "connector-width"],
         "hideStepInfo": [4, "hide-step-info"],
+        "theme": [1],
         "variant": [1025],
         "alignedFullWidth": [32],
         "autoSetStepTitles": [32],
@@ -250,6 +260,7 @@ const Stepper = /*@__PURE__*/ proxyCustomElement(class Stepper extends HTMLEleme
         "stepTypes": [32],
         "variantOverride": [32]
     }, undefined, {
+        "theme": ["handleThemeChange"],
         "hideStepInfo": ["handlePropChange"],
         "variant": ["handlePropChange"]
     }]);