@gov-design-system-ce/components 4.0.8-rc22 → 4.1.0-rc02

package/dist/esm/gov-spacer.entry.js

@@ -1,10 +1,10 @@
-import { r as registerInstance, h, a as Host, g as getElement } from './index-b44c6c92.js';
-import { v as validateProp } from './props-ec3beb91.js';
+import { r as registerInstance, h, a as Host, g as getElement } from './index-d8b4eb6c.js';
+import { v as validateProp } from './props-c82e1abf.js';
 import { S as Sizes } from './sizes-5b9e579f.js';
-import { p as pick } from './utils-e10e994d.js';
-import { g as govHost } from './template-94812ab3.js';
-import './gov.log-431da6b2.js';
-import './win-b64cd8a6.js';
+import { a as pick } from './utils-2b4ef320.js';
+import { g as govHost } from './template-3d84d705.js';
+import './gov.log-6e9faad2.js';
+import './win-cec370ad.js';
 
 const SpacerSize = pick(Sizes, ['_2XS', '_XS', '_S', '_M', '_L', '_XL', '_2XL', '_3XL', '_4XL']);
 var SpacerBreakpoints;
@@ -19,9 +19,6 @@ const SpacerClass = {
     root: 'gov-spacer',
 };
 
-const govSpacerCss = ".gov-spin-animation,.gov-pseudo-spin-animation::before{animation:spin 4s linear infinite}@keyframes spin{100%{transform:rotate(360deg)}}@keyframes countdown{to{transform:scaleX(0)}}@keyframes progress{0%{background-position:-200px 0}100%{background-position:calc(200px + 100%) 0}}@keyframes pulse{0%{opacity:1}50%{opacity:0.4}100%{opacity:1}}.gov-spacer{position:relative;display:block;width:100%}.gov-spacer[size=unset]{height:0}.gov-spacer[size=\"2xs\"]{height:0.25rem}.gov-spacer[size=xs]{height:0.5rem}.gov-spacer[size=s]{height:0.75rem}.gov-spacer[size=m]{height:1rem}.gov-spacer[size=l]{height:1.25rem}.gov-spacer[size=xl]{height:1.75rem}.gov-spacer[size=\"2xl\"]{height:2rem}.gov-spacer[size=\"3xl\"]{height:3rem}.gov-spacer[size=\"4xl\"]{height:4.5rem}.gov-spacer[breakpoint=none]{display:none}.gov-spacer[breakpoint=sm]{display:none}@media (min-width: 30em){.gov-spacer[breakpoint=sm]{display:block}}.gov-spacer[breakpoint=md]{display:none}@media (min-width: 48em){.gov-spacer[breakpoint=md]{display:block}}.gov-spacer[breakpoint=lg]{display:none}@media (min-width: 64em){.gov-spacer[breakpoint=lg]{display:block}}.gov-spacer[breakpoint=xl]{display:none}@media (min-width: 75em){.gov-spacer[breakpoint=xl]{display:block}}";
-const GovSpacerStyle0 = govSpacerCss;
-
 const GovSpacer = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -40,7 +37,7 @@ const GovSpacer = class {
         this.validateBreakpoint(this.breakpoint);
     }
     render() {
-        return h(Host, { key: 'e33645cb98a3f4e5b37df3d65e930b2b3c7a51a8', class: this.h.classes(SpacerClass.root), size: this.size, breakpoint: this.breakpoint });
+        return h(Host, { key: '57fc29956be744a9eaec0361e4175b7e29dbef13', class: this.h.classes(SpacerClass.root), size: this.size, breakpoint: this.breakpoint });
     }
     get host() { return getElement(this); }
     static get watchers() { return {
@@ -48,7 +45,6 @@ const GovSpacer = class {
         "breakpoint": ["validateBreakpoint"]
     }; }
 };
-GovSpacer.style = GovSpacerStyle0;
 
 export { GovSpacer as gov_spacer };
 

package/dist/esm/gov-spacer.entry.js.map

@@ -1 +1 @@
-{"file":"gov-spacer.entry.js","mappings":";;;;;;;;AAIO,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC,CAAA;AAGvG,IAAY,iBAMX;AAND,WAAY,iBAAiB;IAC5B,kCAAa,CAAA;IACb,8BAAS,CAAA;IACT,8BAAS,CAAA;IACT,8BAAS,CAAA;IACT,8BAAS,CAAA;AACV,CAAC,EANW,iBAAiB,KAAjB,iBAAiB,QAM5B;AAGM,MAAM,WAAW,GAAG;IAC1B,IAAI,EAAE,YAAY;CAClB;;AClBD,MAAM,YAAY,GAAG,gtCAAgtC,CAAC;AACtuC,wBAAe,YAAY;;MCSd,SAAS;IAErB;;;0BAWsD,SAAS;QAV9D,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;KAC3B;IAYD,YAAY,CAAC,QAAgB;QAC5B,YAAY,CAAC,UAAU,EAAE,QAAQ,EAAE,WAAW,CAAC,IAAI,CAAC,CAAA;KACpD;IAGD,kBAAkB,CAAC,QAAgB;QAClC,YAAY,CAAC,iBAAiB,EAAE,QAAQ,EAAE,WAAW,CAAC,IAAI,CAAC,CAAA;KAC3D;IAED,iBAAiB;QAChB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QAC5B,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAA;KACxC;IAED,MAAM;QACL,OAAO,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,UAAU,EAAE,IAAI,CAAC,UAAU,GAAS,CAAA;KAC3G;;;;;;;;;;;","names":[],"sources":["../../../packages/core/src/components/gov-spacer/constants.tsx","../../../packages/core/src/components/gov-spacer/gov-spacer.scss?tag=gov-spacer","../../../packages/core/src/components/gov-spacer/gov-spacer.tsx"],"sourcesContent":["import { Sizes } from '../../core/constants/sizes'\nimport { pick } from '../../utils/utils'\nimport { ValueOf } from '../../types/interfaces'\n\nexport const SpacerSize = pick(Sizes, ['_2XS', '_XS', '_S', '_M', '_L', '_XL', '_2XL', '_3XL', '_4XL'])\nexport type SpacerSizeType = `${ValueOf<typeof SpacerSize>}`\n\nexport enum SpacerBreakpoints {\n\tNONE = 'none',\n\tSM = 'sm',\n\tMD = 'md',\n\tLG = 'lg',\n\tXL = 'xl',\n}\nexport type SpacerBreakpointsType = `${ValueOf<typeof SpacerBreakpoints>}`\n\nexport const SpacerClass = {\n\troot: 'gov-spacer',\n}\n","/*\n *   Spacer\n */\n\n$class: \".gov-spacer\";\n\n#{$class} {\n\t@include base();\n\n\t// VARIANTS\n\t@each $name, $value in $sizes {\n\t\t&[size=\"#{$name}\"] {\n\t\t\theight: #{$value};\n\t\t}\n\t}\n\t@each $name, $value in $mq-breakpoints {\n\t\t&[breakpoint=\"#{$name}\"] {\n\t\t\tdisplay: none;\n\n\t\t\t@if #{$value} != \"0\" {\n\t\t\t\t@include mq($from: #{$name}) {\n\t\t\t\t\tdisplay: block;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}\n","import { Component, Element, h, Host, Prop, Watch } from '@stencil/core'\nimport { validateProp } from '../../helpers/Validate/props'\nimport { SpacerBreakpoints, SpacerBreakpointsType, SpacerClass, SpacerSize, SpacerSizeType } from './constants'\nimport { GovHost } from '../../helpers/Dom/template.types'\nimport { govHost } from '../../helpers/Dom/template'\n\n@Component({\n\ttag: 'gov-spacer',\n\tstyleUrl: 'gov-spacer.scss',\n})\nexport class GovSpacer {\n\tprivate h: GovHost\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\t@Element() host: HTMLGovSpacerElement\n\t/**\n\t * Spacer’s size\n\t */\n\t@Prop() readonly size?: SpacerSizeType\n\t/**\n\t * Breakpoint\n\t */\n\t@Prop() readonly breakpoint?: SpacerBreakpointsType = undefined\n\n\t@Watch('size')\n\tvalidateSize(newValue: string): void {\n\t\tvalidateProp(SpacerSize, newValue, SpacerClass.root)\n\t}\n\n\t@Watch('breakpoint')\n\tvalidateBreakpoint(newValue: string): void {\n\t\tvalidateProp(SpacerBreakpoints, newValue, SpacerClass.root)\n\t}\n\n\tcomponentWillLoad(): void {\n\t\tthis.validateSize(this.size)\n\t\tthis.validateBreakpoint(this.breakpoint)\n\t}\n\n\trender() {\n\t\treturn <Host class={this.h.classes(SpacerClass.root)} size={this.size} breakpoint={this.breakpoint}></Host>\n\t}\n}\n"],"version":3}
+{"file":"gov-spacer.entry.js","mappings":";;;;;;;;AAIO,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC,CAAA;AAGvG,IAAY,iBAMX;AAND,WAAY,iBAAiB;IAC5B,kCAAa,CAAA;IACb,8BAAS,CAAA;IACT,8BAAS,CAAA;IACT,8BAAS,CAAA;IACT,8BAAS,CAAA;AACV,CAAC,EANW,iBAAiB,KAAjB,iBAAiB,QAM5B;AAGM,MAAM,WAAW,GAAG;IAC1B,IAAI,EAAE,YAAY;CAClB;;MCTY,SAAS;IAErB;;;0BAWsD,SAAS;QAV9D,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;KAC3B;IAYD,YAAY,CAAC,QAAgB;QAC5B,YAAY,CAAC,UAAU,EAAE,QAAQ,EAAE,WAAW,CAAC,IAAI,CAAC,CAAA;KACpD;IAGD,kBAAkB,CAAC,QAAgB;QAClC,YAAY,CAAC,iBAAiB,EAAE,QAAQ,EAAE,WAAW,CAAC,IAAI,CAAC,CAAA;KAC3D;IAED,iBAAiB;QAChB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QAC5B,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAA;KACxC;IAED,MAAM;QACL,OAAO,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,UAAU,EAAE,IAAI,CAAC,UAAU,GAAS,CAAA;KAC3G;;;;;;;;;;","names":[],"sources":["../../../packages/core/src/components/gov-spacer/constants.tsx","../../../packages/core/src/components/gov-spacer/gov-spacer.tsx"],"sourcesContent":["import { Sizes } from '../../core/constants/sizes'\nimport { pick } from '../../utils/utils'\nimport { ValueOf } from '../../types/interfaces'\n\nexport const SpacerSize = pick(Sizes, ['_2XS', '_XS', '_S', '_M', '_L', '_XL', '_2XL', '_3XL', '_4XL'])\nexport type SpacerSizeType = `${ValueOf<typeof SpacerSize>}`\n\nexport enum SpacerBreakpoints {\n\tNONE = 'none',\n\tSM = 'sm',\n\tMD = 'md',\n\tLG = 'lg',\n\tXL = 'xl',\n}\nexport type SpacerBreakpointsType = `${ValueOf<typeof SpacerBreakpoints>}`\n\nexport const SpacerClass = {\n\troot: 'gov-spacer',\n}\n","import { Component, Element, h, Host, Prop, Watch } from '@stencil/core'\nimport { validateProp } from '../../helpers/Validate/props'\nimport { SpacerBreakpoints, SpacerBreakpointsType, SpacerClass, SpacerSize, SpacerSizeType } from './constants'\nimport { GovHost } from '../../helpers/Dom/template.types'\nimport { govHost } from '../../helpers/Dom/template'\n\n@Component({\n\ttag: 'gov-spacer',\n})\nexport class GovSpacer {\n\tprivate h: GovHost\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\t@Element() host: HTMLGovSpacerElement\n\t/**\n\t * Spacer’s size\n\t */\n\t@Prop() readonly size?: SpacerSizeType\n\t/**\n\t * Breakpoint\n\t */\n\t@Prop() readonly breakpoint?: SpacerBreakpointsType = undefined\n\n\t@Watch('size')\n\tvalidateSize(newValue: string): void {\n\t\tvalidateProp(SpacerSize, newValue, SpacerClass.root)\n\t}\n\n\t@Watch('breakpoint')\n\tvalidateBreakpoint(newValue: string): void {\n\t\tvalidateProp(SpacerBreakpoints, newValue, SpacerClass.root)\n\t}\n\n\tcomponentWillLoad(): void {\n\t\tthis.validateSize(this.size)\n\t\tthis.validateBreakpoint(this.breakpoint)\n\t}\n\n\trender() {\n\t\treturn <Host class={this.h.classes(SpacerClass.root)} size={this.size} breakpoint={this.breakpoint}></Host>\n\t}\n}\n"],"version":3}

package/dist/esm/gov-stepper-item.entry.js

@@ -1,74 +1,45 @@
-import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-b44c6c92.js';
-import { a as govErrorLog } from './gov.log-431da6b2.js';
-import { v as validateProp } from './props-ec3beb91.js';
-import { S as StepperItemClass, c as StepperVariants } from './constants-122ac484.js';
+import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-d8b4eb6c.js';
+import { v as validateProp } from './props-c82e1abf.js';
+import { S as StepperItemClass, c as StepperColors } from './constants-990365f1.js';
 import { c as createID } from './string.utils-5ce3f551.js';
-import { g as govHost, p as prepareClasses } from './template-94812ab3.js';
-import './win-b64cd8a6.js';
-import './utils-e10e994d.js';
-import './variants-69f013c1.js';
+import { g as govHost } from './template-3d84d705.js';
+import './gov.log-6e9faad2.js';
+import './win-cec370ad.js';
+import './utils-2b4ef320.js';
+import './colors-02c1ea96.js';
 import './sizes-5b9e579f.js';
 
-const govStepperItemCss = ".gov-spin-animation,.gov-pseudo-spin-animation::before{animation:spin 4s linear infinite}@keyframes spin{100%{transform:rotate(360deg)}}@keyframes countdown{to{transform:scaleX(0)}}@keyframes progress{0%{background-position:-200px 0}100%{background-position:calc(200px + 100%) 0}}@keyframes pulse{0%{opacity:1}50%{opacity:0.4}100%{opacity:1}}.gov-stepper-item{position:relative;display:block;width:100%}.gov-stepper-item__header{position:relative;width:100%}.gov-stepper-item__arrow{flex:0 0 auto;width:0.75rem;height:0.75rem}.gov-stepper-item__title{margin:0;padding:0;font-family:var(--gov-font-family, \"Roboto\", sans-serif);font-weight:400;box-sizing:border-box;display:flex;gap:1rem;align-items:baseline}.gov-stepper-item__prefix{display:flex;flex:0 0 auto;justify-content:center;align-items:center;border-radius:50%;text-align:center}.gov-stepper-item__prefix .gov-icon{width:45%;height:45%}.gov-stepper-item__prefix span[slot=prefix]{display:flex;justify-content:center;align-items:center;width:100%;height:100%}.gov-stepper-item__name{display:flex;flex-direction:column}.gov-stepper-item__label{display:flex;gap:0.5rem;align-items:center;font-weight:var(--gov-wizard-title-font-weight, 700)}.gov-stepper-item__annot{color:var(--gov-color-secondary)}.gov-stepper-item__content>*:last-child{margin-bottom:0}.gov-stepper-item[variant=primary] .gov-stepper-item__header{color:var(--gov-wizard-primary-color, var(--gov-color-primary-800))}.gov-stepper-item[variant=primary] .gov-stepper-item__prefix{background:var(--gov-wizard-primary-indicator-bg, var(--gov-color-primary-300));color:var(--gov-wizard-primary-indicator-color, var(--gov-color-primary-800))}.gov-stepper-item[variant=secondary] .gov-stepper-item__header{color:var(--gov-wizard-secondary-color, var(--gov-color-secondary-700))}.gov-stepper-item[variant=secondary] .gov-stepper-item__prefix{background:var(--gov-wizard-secondary-indicator-bg, var(--gov-color-secondary-400));color:var(--gov-wizard-secondary-indicator-color, var(--gov-color-secondary-700))}.gov-stepper-item[variant=success] .gov-stepper-item__header{color:var(--gov-wizard-success-color, var(--gov-color-success-500))}.gov-stepper-item[variant=success] .gov-stepper-item__prefix{background:var(--gov-wizard-success-indicator-bg, var(--gov-color-success));color:var(--gov-wizard-success-indicator-color, var(--gov-color-neutral-white))}.gov-stepper-item[variant=error] .gov-stepper-item__header{color:var(--gov-wizard-error-color, var(--gov-color-error-500))}.gov-stepper-item[variant=error] .gov-stepper-item__prefix{background:var(--gov-wizard-error-indicator-bg, var(--gov-color-error));color:var(--gov-wizard-error-indicator-color, var(--gov-color-neutral-white))}.gov-stepper-item[variant=warning] .gov-stepper-item__header{color:var(--gov-wizard-warning-color, var(--gov-color-warning-500))}.gov-stepper-item[variant=warning] .gov-stepper-item__prefix{background:var(--gov-wizard-warning-indicator-bg, var(--gov-color-warning));color:var(--gov-wizard-warning-indicator-color, var(--gov-color-neutral-white))}.gov-stepper-item::before{content:\"\";position:absolute;display:block;width:0.125rem}.gov-stepper-item:last-child::before{content:none}.gov-stepper-item[variant=primary]::before{background:var(--gov-wizard-primary-indicator-bg, var(--gov-color-primary-300))}.gov-stepper-item[variant=secondary]::before{background:var(--gov-wizard-secondary-indicator-bg, var(--gov-color-secondary-400))}.gov-stepper-item[variant=success]::before{background:var(--gov-wizard-success-indicator-bg, var(--gov-color-success))}.gov-stepper-item[variant=error]::before{background:var(--gov-wizard-error-indicator-bg, var(--gov-color-error))}.gov-stepper-item[variant=warning]::before{background:var(--gov-wizard-warning-indicator-bg, var(--gov-color-warning))}.gov-stepper-item[size=xs]{min-height:calc(var(--gov-stepper-xs-indicator-size, 1.5rem) + 3 * var(--gov-stepper-xs-connect-gap, 0.5rem))}.gov-stepper-item[size=xs]::before{top:calc(var(--gov-stepper-xs-indicator-size, 1.5rem) + var(--gov-stepper-xs-connect-gap, 0.5rem));bottom:var(--gov-stepper-xs-connect-gap, 0.5rem);left:calc((var(--gov-stepper-xs-indicator-size, 1.5rem) - 0.125rem) / 2)}.gov-stepper-item[size=xs]:last-child{min-height:0}.gov-stepper-item[size=xs] .gov-stepper-item__title{font-weight:var(--gov-text-m-font-weight);font-size:var(--gov-text-m-font-size);line-height:var(--gov-text-m-line-height);letter-spacing:var(--gov-text-m-letter-spacing)}.gov-stepper-item[size=xs] .gov-stepper-item__annot{font-weight:var(--gov-text-s-font-weight);font-size:var(--gov-text-s-font-size);line-height:var(--gov-text-s-line-height);letter-spacing:var(--gov-text-s-letter-spacing)}.gov-stepper-item[size=xs] .gov-stepper-item__prefix{font-weight:var(--gov-text-m-font-weight);font-size:var(--gov-text-m-font-size);line-height:var(--gov-text-m-line-height);letter-spacing:var(--gov-text-m-letter-spacing);width:var(--gov-stepper-xs-indicator-size, 1.5rem);height:var(--gov-stepper-xs-indicator-size, 1.5rem);box-shadow:0 0 0 var(--gov-stepper-xs-connect-gap, 0.5rem) var(--gov-color-neutral-white)}.gov-stepper-item[size=xs] .gov-stepper-item__content{padding:var(--gov-stepper-xs-content-padding, 1rem 1rem 2rem 2.5rem)}.gov-stepper-item--w-annot[size=xs]{min-height:calc(var(--gov-stepper-xs-indicator-size, 1.5rem) * 1.5 + 3 * var(--gov-stepper-xs-connect-gap, 0.5rem))}.gov-stepper-item[size=s]{min-height:calc(var(--gov-stepper-s-indicator-size, 2rem) + 3 * var(--gov-stepper-s-connect-gap, 1rem))}.gov-stepper-item[size=s]::before{top:calc(var(--gov-stepper-s-indicator-size, 2rem) + var(--gov-stepper-s-connect-gap, 1rem));bottom:var(--gov-stepper-s-connect-gap, 1rem);left:calc((var(--gov-stepper-s-indicator-size, 2rem) - 0.125rem) / 2)}.gov-stepper-item[size=s]:last-child{min-height:0}.gov-stepper-item[size=s] .gov-stepper-item__title{font-weight:var(--gov-text-l-font-weight);font-size:var(--gov-text-l-font-size);line-height:var(--gov-text-l-line-height);letter-spacing:var(--gov-text-l-letter-spacing)}.gov-stepper-item[size=s] .gov-stepper-item__annot{font-weight:var(--gov-text-m-font-weight);font-size:var(--gov-text-m-font-size);line-height:var(--gov-text-m-line-height);letter-spacing:var(--gov-text-m-letter-spacing)}.gov-stepper-item[size=s] .gov-stepper-item__prefix{font-weight:var(--gov-text-xl-font-weight);font-size:var(--gov-text-xl-font-size);line-height:var(--gov-text-xl-line-height);letter-spacing:var(--gov-text-xl-letter-spacing);width:var(--gov-stepper-s-indicator-size, 2rem);height:var(--gov-stepper-s-indicator-size, 2rem);box-shadow:0 0 0 var(--gov-stepper-s-connect-gap, 1rem) var(--gov-color-neutral-white)}.gov-stepper-item[size=s] .gov-stepper-item__content{padding:var(--gov-stepper-s-content-padding, 1rem 1rem 2rem 3rem)}.gov-stepper-item--w-annot[size=s]{min-height:calc(var(--gov-stepper-s-indicator-size, 2rem) * 1.5 + 3 * var(--gov-stepper-s-connect-gap, 1rem))}.gov-stepper-item[size=m]{min-height:calc(var(--gov-stepper-m-indicator-size, 2.5rem) + 3 * var(--gov-stepper-m-connect-gap, 1rem))}.gov-stepper-item[size=m]::before{top:calc(var(--gov-stepper-m-indicator-size, 2.5rem) + var(--gov-stepper-m-connect-gap, 1rem));bottom:var(--gov-stepper-m-connect-gap, 1rem);left:calc((var(--gov-stepper-m-indicator-size, 2.5rem) - 0.125rem) / 2)}.gov-stepper-item[size=m]:last-child{min-height:0}.gov-stepper-item[size=m] .gov-stepper-item__title{font-weight:var(--gov-text-xl-font-weight);font-size:var(--gov-text-xl-font-size);line-height:var(--gov-text-xl-line-height);letter-spacing:var(--gov-text-xl-letter-spacing)}.gov-stepper-item[size=m] .gov-stepper-item__annot{font-weight:var(--gov-text-m-font-weight);font-size:var(--gov-text-m-font-size);line-height:var(--gov-text-m-line-height);letter-spacing:var(--gov-text-m-letter-spacing)}.gov-stepper-item[size=m] .gov-stepper-item__prefix{font-weight:var(--gov-text-xl-font-weight);font-size:var(--gov-text-xl-font-size);line-height:var(--gov-text-xl-line-height);letter-spacing:var(--gov-text-xl-letter-spacing);width:var(--gov-stepper-m-indicator-size, 2.5rem);height:var(--gov-stepper-m-indicator-size, 2.5rem);box-shadow:0 0 0 var(--gov-stepper-m-connect-gap, 1rem) var(--gov-color-neutral-white)}.gov-stepper-item[size=m] .gov-stepper-item__content{padding:var(--gov-stepper-m-content-padding, 1rem 1rem 2rem 3.5rem)}.gov-stepper-item--w-annot[size=m]{min-height:calc(var(--gov-stepper-m-indicator-size, 2.5rem) * 1.5 + 3 * var(--gov-stepper-m-connect-gap, 1rem))}";
-const GovStepperItemStyle0 = govStepperItemCss;
-
 const GovStepperItem = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.govChange = createEvent(this, "gov-change", 7);
-        this.isExpandedState = undefined;
-        this.variant = 'primary';
+        this.hydrated = false;
+        this.color = 'primary';
         this.size = 'm';
         this.identifier = undefined;
-        this.label = undefined;
-        this.annotation = undefined;
-        this.triggerTag = 'h3';
         this.h = govHost(this.host);
         this.triggerId = createID('GovStepperItem');
         this.contentId = createID('GovStepperContent');
     }
-    validateLabel(newValue) {
-        if (!newValue) {
-            govErrorLog(`[${StepperItemClass.root}]: Parameter label is required.`);
-        }
-    }
-    validateTriggerTag(newValue) {
-        const validTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'span'];
-        if (newValue) {
-            if (!validTags.includes(newValue)) {
-                govErrorLog(`[${StepperItemClass.root}]: Tag ${newValue} is not allowed.`);
-            }
-        }
-    }
-    validateVariant(newValue) {
-        validateProp(StepperVariants, newValue, StepperItemClass.root);
+    validateColor(newValue) {
+        validateProp(StepperColors, newValue, StepperItemClass.root);
     }
     componentWillLoad() {
-        this.validateLabel(this.label);
-        this.validateVariant(this.variant);
-        this.validateTriggerTag(this.triggerTag);
+        this.validateColor(this.color);
+    }
+    connectedCallback() {
+        this.hydrated = true;
     }
     render() {
         const triggerId = this.identifier || this.triggerId;
         const contentId = this.contentId;
-        const { label } = this;
-        const TriggerTag = this.triggerTag;
-        return (h(Host, { key: '23d79b1dd92ae9f0ab7452a07a8e85380cefff0e', class: prepareClasses([StepperItemClass.root, this.annotation && StepperItemClass.rootWithAnnot]), variant: this.variant }, h("div", { key: '945a190cfcf519f09a89a77b27bcd90ae4f7c05b', id: triggerId, class: StepperItemClass.header, role: "listitem" }, h(TriggerTag, { key: '9806afdbcc5929c7d2ee2a0b31fb898a3d138996', class: StepperItemClass.title }, this.h.hasSlot('prefix') && (h("span", { key: '689480217dbd2db27d5069ebeb2ee4d266a397a8', class: StepperItemClass.prefix }, h("slot", { key: 'a63e14fd09e872bee67cb3bd2b2a5fd94a015a30', name: "prefix" }))), h("span", { key: 'af957100e33572449a76ff4dcd7ef9898a7ded5e', class: StepperItemClass.name }, h("span", { key: '2212aaba29debc180617fffff58338f237b47c4e', class: StepperItemClass.label }, label), this.annotation && h("span", { key: 'ba654d89d874548b5d7a91544329a6a931de1302', class: StepperItemClass.annot }, this.annotation)))), this.h.hasSlot('content') && (h("div", { key: '9fcfd57f2c09df66a983643c451e6ce7d4edf66c', class: StepperItemClass.content, id: contentId, "aria-labelledby": triggerId, role: "tabpanel" }, h("slot", { key: 'b60ff8bc25e39b4ca5d4c97b6bd13ef30e7ce8c7', name: "content" })))));
-    }
-    /**
-     * Returns the current state of the component
-     */
-    async currentState() {
-        return this.isExpandedState;
+        return (h(Host, { key: 'fe5a23be1c8e2dea7794420155d95e8096e53a90', id: triggerId, class: this.h.classes(StepperItemClass.root), color: this.color, role: "listitem", hydrated: this.hydrated }, this.h.hasSlot('prefix') && (h("span", { key: '1c74503c6c9b56bfb11efd87a2ad354444fc9e82', class: StepperItemClass.prefix }, h("slot", { key: 'eeb00dec4c4ad1d6f1a6abf57de77fe3b9a621a8', name: "prefix" }))), h("div", { key: 'f92fa51133c7e8c68be8d276cf85dbbd421b72c0' }, h("span", { key: '926cea6da5632f3830507f6208ac68445d2f6ec3', class: StepperItemClass.headline }, h("slot", { key: '13cdd8dc084e58e56564b6f90bf29a825ce5b139', name: "headline" })), h("slot", { key: '5dfc2f7d62aea9c422022a41c6c9b7f1755ed837', name: "annotation" }), this.h.hasSlot('content') && (h("div", { key: 'db6097ae5f61b0cc73f0115c68f45d187fb9dc65', class: StepperItemClass.content, id: contentId, "aria-labelledby": triggerId, role: "tabpanel" }, h("slot", { key: '275ca8b1bb64e8c02551b0b874db8c2c865d0e3a', name: "content" }))))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
-        "label": ["validateLabel"],
-        "triggerTag": ["validateTriggerTag"],
-        "variant": ["validateVariant"]
+        "color": ["validateColor"]
     }; }
 };
-GovStepperItem.style = GovStepperItemStyle0;
 
 export { GovStepperItem as gov_stepper_item };
 

package/dist/esm/gov-stepper-item.entry.js.map

@@ -1 +1 @@
-{"file":"gov-stepper-item.entry.js","mappings":";;;;;;;;;;;AAAA,MAAM,iBAAiB,GAAG,kxQAAkxQ,CAAC;AAC7yQ,6BAAe,iBAAiB;;MCYnB,cAAc;IAK1B;;;;uBAYgD,SAAS;oBAId,GAAG;;;;0BAgBoB,IAAI;QA/BrE,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QAC3B,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC,gBAAgB,CAAC,CAAA;QAC3C,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC,mBAAmB,CAAC,CAAA;KAC9C;IAmCD,aAAa,CAAC,QAAgB;QAC7B,IAAI,CAAC,QAAQ,EAAE;YACd,WAAW,CAAC,IAAI,gBAAgB,CAAC,IAAI,iCAAiC,CAAC,CAAA;SACvE;KACD;IAGD,kBAAkB,CAAC,QAAgB;QAClC,MAAM,SAAS,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,CAAC,CAAA;QAC9D,IAAI,QAAQ,EAAE;YACb,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE;gBAClC,WAAW,CAAC,IAAI,gBAAgB,CAAC,IAAI,UAAU,QAAQ,kBAAkB,CAAC,CAAA;aAC1E;SACD;KACD;IAGD,eAAe,CAAC,QAAgB;QAC/B,YAAY,CAAC,eAAe,EAAE,QAAQ,EAAE,gBAAgB,CAAC,IAAI,CAAC,CAAA;KAC9D;IAED,iBAAiB;QAChB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;QAC9B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;QAClC,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAA;KACxC;IAED,MAAM;QACL,MAAM,SAAS,GAAG,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,SAAS,CAAA;QACnD,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,CAAA;QAChC,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAA;QACtB,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,CAAA;QAElC,QACC,EAAC,IAAI,qDAAC,KAAK,EAAE,cAAc,CAAC,CAAC,gBAAgB,CAAC,IAAI,EAAE,IAAI,CAAC,UAAU,IAAI,gBAAgB,CAAC,aAAa,CAAC,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,IAC7H,4DAAK,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE,gBAAgB,CAAC,MAAM,EAAE,IAAI,EAAC,UAAU,IAClE,EAAC,UAAU,qDAAC,KAAK,EAAE,gBAAgB,CAAC,KAAK,IACvC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,KACxB,6DAAM,KAAK,EAAE,gBAAgB,CAAC,MAAM,IACnC,6DAAM,IAAI,EAAC,QAAQ,GAAG,CAChB,CACP,EACD,6DAAM,KAAK,EAAE,gBAAgB,CAAC,IAAI,IACjC,6DAAM,KAAK,EAAE,gBAAgB,CAAC,KAAK,IAAG,KAAK,CAAQ,EAClD,IAAI,CAAC,UAAU,IAAI,6DAAM,KAAK,EAAE,gBAAgB,CAAC,KAAK,IAAG,IAAI,CAAC,UAAU,CAAQ,CAC3E,CACK,CACR,EAEL,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,SAAS,CAAC,KACzB,4DAAK,KAAK,EAAE,gBAAgB,CAAC,OAAO,EAAE,EAAE,EAAE,SAAS,qBAAmB,SAAS,EAAE,IAAI,EAAC,UAAU,IAC/F,6DAAM,IAAI,EAAC,SAAS,GAAG,CAClB,CACN,CACK,EACP;KACD;;;;IAMD,MAAM,YAAY;QACjB,OAAO,IAAI,CAAC,eAAe,CAAA;KAC3B;;;;;;;;;;;;","names":[],"sources":["../../../packages/core/src/components/gov-stepper/gov-stepper-item.scss?tag=gov-stepper-item","../../../packages/core/src/components/gov-stepper/gov-stepper-item.tsx"],"sourcesContent":["/*\n *   Stepper - Item\n */\n\n@import \"../gov-wizard/gov-wizard-item-core.scss\";\n$class: \".gov-stepper-item\";\n\n#{$class} {\n\t@include wizard-item-core;\n\t&::before {\n\t\t@include pseudo();\n\t\twidth: rem-calc(2);\n\t}\n\t&:last-child::before {\n\t\tcontent: none;\n\t}\n\n\t// VARIANTS\n\t@each $variant, $definitions in $wizard-core-variants {\n\t\t&[variant=\"#{$variant}\"] {\n\t\t\t&::before {\n\t\t\t\tbackground: get(\"indicator-bg\", $definitions);\n\t\t\t}\n\t\t}\n\t}\n\t@each $size, $definitions in $stepper-sizes {\n\t\t$connect-gap: get(\"connect-gap\", $definitions);\n\t\t&[size=\"#{$size}\"] {\n\t\t\tmin-height: calc(get(\"indicator-size\", $definitions) + 3 * $connect-gap);\n\t\t\t&::before {\n\t\t\t\ttop: calc(get(\"indicator-size\", $definitions) + $connect-gap);\n\t\t\t\tbottom: $connect-gap;\n\t\t\t\tleft: calc((get(\"indicator-size\", $definitions) - rem-calc(2)) / 2);\n\t\t\t}\n\t\t\t&:last-child {\n\t\t\t\tmin-height: 0;\n\t\t\t}\n\t\t\t#{$class} {\n\t\t\t\t&__title {\n\t\t\t\t\t@include typography(get(\"font-size\", $definitions));\n\t\t\t\t}\n\t\t\t\t&__annot {\n\t\t\t\t\t@include typography(get(\"font-size-annot\", $definitions));\n\t\t\t\t}\n\t\t\t\t&__prefix {\n\t\t\t\t\t@include typography(get(\"font-size-indicator\", $definitions));\n\t\t\t\t\twidth: get(\"indicator-size\", $definitions);\n\t\t\t\t\theight: get(\"indicator-size\", $definitions);\n\t\t\t\t\tbox-shadow: 0 0 0 $connect-gap color(\"neutral.white\");\n\t\t\t\t}\n\t\t\t\t&__content {\n\t\t\t\t\tpadding: get(\"content-padding\", $definitions);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\t&--w-annot[size=\"#{$size}\"] {\n\t\t\tmin-height: calc(get(\"indicator-size\", $definitions) * 1.5 + 3 * $connect-gap);\n\t\t}\n\t}\n}\n","import { Component, Element, h, Prop, State, Watch, Host, Method, Event, EventEmitter } from '@stencil/core'\nimport { govErrorLog } from '../../helpers/Log/gov.log'\nimport { validateProp } from '../../helpers/Validate/props'\nimport { StepperSizesType, StepperItemClass, StepperVariantType, StepperVariants } from './constants'\nimport { createID } from '../../utils/string.utils'\nimport { govHost, prepareClasses } from '../../helpers/Dom/template'\nimport { GovStepperItemChangeEvent } from './gov-stepper-item.d'\nimport { GovHost } from '../../helpers/Dom/template.types'\n\n@Component({\n\ttag: 'gov-stepper-item',\n\tstyleUrl: 'gov-stepper-item.scss',\n})\nexport class GovStepperItem {\n\tprivate h: GovHost\n\tprivate readonly triggerId: string\n\tprivate readonly contentId: string\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t\tthis.triggerId = createID('GovStepperItem')\n\t\tthis.contentId = createID('GovStepperContent')\n\t}\n\n\t@Element() readonly host: HTMLGovStepperItemElement\n\t@State() isExpandedState: boolean\n\n\t/**\n\t * Style variation of the button.\n\t */\n\t@Prop() readonly variant?: StepperVariantType = 'primary'\n\t/**\n\t * Size of stepper\n\t */\n\t@Prop() readonly size?: StepperSizesType = 'm'\n\t/**\n\t * Custom stepper item identifier. Otherwise, it will be generated\n\t */\n\t@Prop() readonly identifier: string\n\t/**\n\t * Item name of the stepper\n\t */\n\t@Prop() readonly label: string\n\t/**\n\t * Item annotation of the stepper\n\t */\n\t@Prop() readonly annotation: string\n\t/**\n\t * Used to change the HMTL tag in the stepper trigger for correct semantic structure\n\t */\n\t@Prop({ attribute: 'trigger-tag' }) readonly triggerTag: string = 'h3'\n\t/**\n\t * Called when the accordion state changes\n\t */\n\t@Event({ eventName: 'gov-change' }) govChange: EventEmitter<GovStepperItemChangeEvent>\n\n\t@Watch('label')\n\tvalidateLabel(newValue: string): void {\n\t\tif (!newValue) {\n\t\t\tgovErrorLog(`[${StepperItemClass.root}]: Parameter label is required.`)\n\t\t}\n\t}\n\n\t@Watch('triggerTag')\n\tvalidateTriggerTag(newValue: string): void {\n\t\tconst validTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'span']\n\t\tif (newValue) {\n\t\t\tif (!validTags.includes(newValue)) {\n\t\t\t\tgovErrorLog(`[${StepperItemClass.root}]: Tag ${newValue} is not allowed.`)\n\t\t\t}\n\t\t}\n\t}\n\n\t@Watch('variant')\n\tvalidateVariant(newValue: string): void {\n\t\tvalidateProp(StepperVariants, newValue, StepperItemClass.root)\n\t}\n\n\tcomponentWillLoad(): void {\n\t\tthis.validateLabel(this.label)\n\t\tthis.validateVariant(this.variant)\n\t\tthis.validateTriggerTag(this.triggerTag)\n\t}\n\n\trender() {\n\t\tconst triggerId = this.identifier || this.triggerId\n\t\tconst contentId = this.contentId\n\t\tconst { label } = this\n\t\tconst TriggerTag = this.triggerTag\n\n\t\treturn (\n\t\t\t<Host class={prepareClasses([StepperItemClass.root, this.annotation && StepperItemClass.rootWithAnnot])} variant={this.variant}>\n\t\t\t\t<div id={triggerId} class={StepperItemClass.header} role=\"listitem\">\n\t\t\t\t\t<TriggerTag class={StepperItemClass.title}>\n\t\t\t\t\t\t{this.h.hasSlot('prefix') && (\n\t\t\t\t\t\t\t<span class={StepperItemClass.prefix}>\n\t\t\t\t\t\t\t\t<slot name=\"prefix\" />\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<span class={StepperItemClass.name}>\n\t\t\t\t\t\t\t<span class={StepperItemClass.label}>{label}</span>\n\t\t\t\t\t\t\t{this.annotation && <span class={StepperItemClass.annot}>{this.annotation}</span>}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</TriggerTag>\n\t\t\t\t</div>\n\n\t\t\t\t{this.h.hasSlot('content') && (\n\t\t\t\t\t<div class={StepperItemClass.content} id={contentId} aria-labelledby={triggerId} role=\"tabpanel\">\n\t\t\t\t\t\t<slot name=\"content\" />\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t)\n\t}\n\n\t/**\n\t * Returns the current state of the component\n\t */\n\t@Method()\n\tasync currentState(): Promise<boolean> {\n\t\treturn this.isExpandedState\n\t}\n}\n"],"version":3}
+{"file":"gov-stepper-item.entry.js","mappings":";;;;;;;;;;;MAWa,cAAc;IAM1B;;;QAFQ,aAAQ,GAAG,KAAK,CAAA;qBAaoB,SAAS;oBAIV,GAAG;;QAd7C,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QAC3B,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC,gBAAgB,CAAC,CAAA;QAC3C,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC,mBAAmB,CAAC,CAAA;KAC9C;IAsBD,aAAa,CAAC,QAAgB;QAC7B,YAAY,CAAC,aAAa,EAAE,QAAQ,EAAE,gBAAgB,CAAC,IAAI,CAAC,CAAA;KAC5D;IAED,iBAAiB;QAChB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;KAC9B;IAED,iBAAiB;QAChB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAA;KACpB;IAED,MAAM;QACL,MAAM,SAAS,GAAG,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,SAAS,CAAA;QACnD,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,CAAA;QAEhC,QACC,EAAC,IAAI,qDAAC,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,gBAAgB,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAC,UAAU,EAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAC3H,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,KACxB,6DAAM,KAAK,EAAE,gBAAgB,CAAC,MAAM,IACnC,6DAAM,IAAI,EAAC,QAAQ,GAAG,CAChB,CACP,EACD,8DACC,6DAAM,KAAK,EAAE,gBAAgB,CAAC,QAAQ,IACrC,6DAAM,IAAI,EAAC,UAAU,GAAG,CAClB,EACP,6DAAM,IAAI,EAAC,YAAY,GAAG,EAEzB,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,SAAS,CAAC,KACzB,4DAAK,KAAK,EAAE,gBAAgB,CAAC,OAAO,EAAE,EAAE,EAAE,SAAS,qBAAmB,SAAS,EAAE,IAAI,EAAC,UAAU,IAC/F,6DAAM,IAAI,EAAC,SAAS,GAAG,CAClB,CACN,CACI,CACA,EACP;KACD;;;;;;;;;","names":[],"sources":["../../../packages/core/src/components/gov-stepper/gov-stepper-item.tsx"],"sourcesContent":["import { Component, Element, h, Prop, Watch, Host, Event, EventEmitter } from '@stencil/core'\nimport { validateProp } from '../../helpers/Validate/props'\nimport { StepperSizesType, StepperItemClass, StepperColorType, StepperColors } from './constants'\nimport { createID } from '../../utils/string.utils'\nimport { govHost } from '../../helpers/Dom/template'\nimport { GovStepperItemChangeEvent } from './gov-stepper-item.d'\nimport { GovHost } from '../../helpers/Dom/template.types'\n\n@Component({\n\ttag: 'gov-stepper-item',\n})\nexport class GovStepperItem {\n\tprivate h: GovHost\n\tprivate readonly triggerId: string\n\tprivate readonly contentId: string\n\tprivate hydrated = false\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t\tthis.triggerId = createID('GovStepperItem')\n\t\tthis.contentId = createID('GovStepperContent')\n\t}\n\n\t@Element() readonly host: HTMLGovStepperItemElement\n\n\t/**\n\t * Style variation of the button.\n\t */\n\t@Prop() readonly color?: StepperColorType = 'primary'\n\t/**\n\t * Size of stepper\n\t */\n\t@Prop() readonly size?: StepperSizesType = 'm'\n\t/**\n\t * Custom stepper item identifier. Otherwise, it will be generated\n\t */\n\t@Prop() readonly identifier: string\n\t/**\n\t * Called when the accordion state changes\n\t */\n\t@Event({ eventName: 'gov-change' }) govChange: EventEmitter<GovStepperItemChangeEvent>\n\n\t@Watch('color')\n\tvalidateColor(newValue: string): void {\n\t\tvalidateProp(StepperColors, newValue, StepperItemClass.root)\n\t}\n\n\tcomponentWillLoad(): void {\n\t\tthis.validateColor(this.color)\n\t}\n\n\tconnectedCallback() {\n\t\tthis.hydrated = true\n\t}\n\n\trender() {\n\t\tconst triggerId = this.identifier || this.triggerId\n\t\tconst contentId = this.contentId\n\n\t\treturn (\n\t\t\t<Host id={triggerId} class={this.h.classes(StepperItemClass.root)} color={this.color} role=\"listitem\" hydrated={this.hydrated}>\n\t\t\t\t{this.h.hasSlot('prefix') && (\n\t\t\t\t\t<span class={StepperItemClass.prefix}>\n\t\t\t\t\t\t<slot name=\"prefix\" />\n\t\t\t\t\t</span>\n\t\t\t\t)}\n\t\t\t\t<div>\n\t\t\t\t\t<span class={StepperItemClass.headline}>\n\t\t\t\t\t\t<slot name=\"headline\" />\n\t\t\t\t\t</span>\n\t\t\t\t\t<slot name=\"annotation\" />\n\n\t\t\t\t\t{this.h.hasSlot('content') && (\n\t\t\t\t\t\t<div class={StepperItemClass.content} id={contentId} aria-labelledby={triggerId} role=\"tabpanel\">\n\t\t\t\t\t\t\t<slot name=\"content\" />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"],"version":3}

package/dist/esm/gov-stepper.entry.js

@@ -1,20 +1,18 @@
-import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-b44c6c92.js';
-import { v as validateProp } from './props-ec3beb91.js';
-import { S as StepperItemClass, a as StepperClass, b as StepperSizes } from './constants-122ac484.js';
-import { g as govHost } from './template-94812ab3.js';
-import './gov.log-431da6b2.js';
-import './win-b64cd8a6.js';
-import './utils-e10e994d.js';
-import './variants-69f013c1.js';
+import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-d8b4eb6c.js';
+import { v as validateProp } from './props-c82e1abf.js';
+import { S as StepperItemClass, a as StepperClass, b as StepperSizes } from './constants-990365f1.js';
+import { g as govHost } from './template-3d84d705.js';
+import './gov.log-6e9faad2.js';
+import './win-cec370ad.js';
+import './utils-2b4ef320.js';
+import './colors-02c1ea96.js';
 import './sizes-5b9e579f.js';
 
-const govStepperCss = ".gov-spin-animation,.gov-pseudo-spin-animation::before{animation:spin 4s linear infinite}@keyframes spin{100%{transform:rotate(360deg)}}@keyframes countdown{to{transform:scaleX(0)}}@keyframes progress{0%{background-position:-200px 0}100%{background-position:calc(200px + 100%) 0}}@keyframes pulse{0%{opacity:1}50%{opacity:0.4}100%{opacity:1}}.gov-stepper{position:relative;display:block;width:100%}";
-const GovStepperStyle0 = govStepperCss;
-
 const GovStepper = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.govChange = createEvent(this, "gov-change", 7);
+        this.hydrated = false;
         this.size = 'm';
         this.h = govHost(this.host);
     }
@@ -33,15 +31,17 @@ const GovStepper = class {
             });
         });
     }
+    connectedCallback() {
+        this.hydrated = true;
+    }
     render() {
-        return (h(Host, { key: 'a8fc7443be71de97628ae6ae123278ead5247be1', class: this.h.classes(StepperClass.root), role: "list", size: this.size }, h("slot", { key: '3df3b746ce8a628e888802f558315590d22dc00e' })));
+        return (h(Host, { key: 'a77086e0c93fa0073676207ca73d61a323d7765e', class: this.h.classes(StepperClass.root), role: "list", size: this.size, hydrated: this.hydrated }, h("slot", { key: '6b092ae2e03444afe4cf13d848bf7eb08f15845e' })));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
         "size": ["validateSize"]
     }; }
 };
-GovStepper.style = GovStepperStyle0;
 
 export { GovStepper as gov_stepper };
 

package/dist/esm/gov-stepper.entry.js.map

@@ -1 +1 @@
-{"file":"gov-stepper.entry.js","mappings":";;;;;;;;;;AAAA,MAAM,aAAa,GAAG,gZAAgZ,CAAC;AACva,yBAAe,aAAa;;MCWf,UAAU;IAGtB;;;oBAQ2C,GAAG;QAP7C,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;KAC3B;IAaD,YAAY,CAAC,QAAgB;QAC5B,YAAY,CAAC,YAAY,EAAE,QAAQ,EAAE,YAAY,CAAC,IAAI,CAAC,CAAA;KACvD;IAED,iBAAiB;QAChB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;KAC5B;IAED,gBAAgB;QACf,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,KAAgC;YAC1F,KAAK,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,CAAA;YACrC,KAAK,CAAC,gBAAgB,CAAC,YAAY,EAAE,CAAC,CAAuD;gBAC5F,CAAC,CAAC,eAAe,EAAE,CAAA;gBACnB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAA;aAC7B,CAAC,CAAA;SACF,CAAC,CAAA;KACF;IAED,MAAM;QACL,QACC,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,IAAI,EAAC,MAAM,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,IAC1E,8DAAQ,CACF,EACP;KACD;;;;;;;;;;","names":[],"sources":["../../../packages/core/src/components/gov-stepper/gov-stepper.scss?tag=gov-stepper","../../../packages/core/src/components/gov-stepper/gov-stepper.tsx"],"sourcesContent":["/*\n *   Stepper\n */\n\n$class: \".gov-stepper\";\n\n#{$class} {\n\t@include base();\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Prop, Watch } from '@stencil/core'\nimport { validateProp } from '../../helpers/Validate/props'\nimport { StepperClass, StepperItemClass, StepperSizes, StepperSizesType } from './constants'\nimport { GovStepperItemCustomEvent } from '../../components'\nimport { GovStepperItemChangeEvent } from './gov-stepper-item.d'\nimport { GovHost } from '../../helpers/Dom/template.types'\nimport { govHost } from '../../helpers/Dom/template'\n\n@Component({\n\ttag: 'gov-stepper',\n\tstyleUrl: 'gov-stepper.scss',\n})\nexport class GovStepper {\n\tprivate h: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\n\t@Element() readonly host: HTMLGovStepperElement\n\t/**\n\t * Size of stepper\n\t */\n\t@Prop() readonly size?: StepperSizesType = 'm'\n\t/**\n\t * Called when the Stepper state changes\n\t */\n\t@Event({ eventName: 'gov-change' }) govChange: EventEmitter<GovStepperItemChangeEvent>\n\n\t@Watch('size')\n\tvalidateSize(newValue: string): void {\n\t\tvalidateProp(StepperSizes, newValue, StepperClass.root)\n\t}\n\n\tcomponentWillLoad(): void {\n\t\tthis.validateSize(this.size)\n\t}\n\n\tcomponentDidLoad() {\n\t\tthis.host.querySelectorAll(StepperItemClass.root).forEach((child: HTMLGovStepperItemElement) => {\n\t\t\tchild.setAttribute('size', this.size)\n\t\t\tchild.addEventListener('gov-change', (e: GovStepperItemCustomEvent<GovStepperItemChangeEvent>) => {\n\t\t\t\te.stopPropagation()\n\t\t\t\tthis.govChange.emit(e.detail)\n\t\t\t})\n\t\t})\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={this.h.classes(StepperClass.root)} role=\"list\" size={this.size}>\n\t\t\t\t<slot />\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"],"version":3}
+{"file":"gov-stepper.entry.js","mappings":";;;;;;;;;;MAWa,UAAU;IAItB;;;QAFQ,aAAQ,GAAG,KAAK,CAAA;oBAUmB,GAAG;QAP7C,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;KAC3B;IAaD,YAAY,CAAC,QAAgB;QAC5B,YAAY,CAAC,YAAY,EAAE,QAAQ,EAAE,YAAY,CAAC,IAAI,CAAC,CAAA;KACvD;IAED,iBAAiB;QAChB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;KAC5B;IAED,gBAAgB;QACf,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,KAAgC;YAC1F,KAAK,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,CAAA;YACrC,KAAK,CAAC,gBAAgB,CAAC,YAAY,EAAE,CAAC,CAAuD;gBAC5F,CAAC,CAAC,eAAe,EAAE,CAAA;gBACnB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAA;aAC7B,CAAC,CAAA;SACF,CAAC,CAAA;KACF;IAED,iBAAiB;QAChB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAA;KACpB;IAED,MAAM;QACL,QACC,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,IAAI,EAAC,MAAM,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,IACnG,8DAAQ,CACF,EACP;KACD;;;;;;;;;","names":[],"sources":["../../../packages/core/src/components/gov-stepper/gov-stepper.tsx"],"sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Prop, Watch } from '@stencil/core'\nimport { validateProp } from '../../helpers/Validate/props'\nimport { StepperClass, StepperItemClass, StepperSizes, StepperSizesType } from './constants'\nimport { GovStepperItemCustomEvent } from '../../components'\nimport { GovStepperItemChangeEvent } from './gov-stepper-item.d'\nimport { GovHost } from '../../helpers/Dom/template.types'\nimport { govHost } from '../../helpers/Dom/template'\n\n@Component({\n\ttag: 'gov-stepper',\n})\nexport class GovStepper {\n\tprivate h: GovHost\n\tprivate hydrated = false\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\n\t@Element() readonly host: HTMLGovStepperElement\n\t/**\n\t * Size of stepper\n\t */\n\t@Prop() readonly size?: StepperSizesType = 'm'\n\t/**\n\t * Called when the Stepper state changes\n\t */\n\t@Event({ eventName: 'gov-change' }) govChange: EventEmitter<GovStepperItemChangeEvent>\n\n\t@Watch('size')\n\tvalidateSize(newValue: string): void {\n\t\tvalidateProp(StepperSizes, newValue, StepperClass.root)\n\t}\n\n\tcomponentWillLoad(): void {\n\t\tthis.validateSize(this.size)\n\t}\n\n\tcomponentDidLoad() {\n\t\tthis.host.querySelectorAll(StepperItemClass.root).forEach((child: HTMLGovStepperItemElement) => {\n\t\t\tchild.setAttribute('size', this.size)\n\t\t\tchild.addEventListener('gov-change', (e: GovStepperItemCustomEvent<GovStepperItemChangeEvent>) => {\n\t\t\t\te.stopPropagation()\n\t\t\t\tthis.govChange.emit(e.detail)\n\t\t\t})\n\t\t})\n\t}\n\n\tconnectedCallback() {\n\t\tthis.hydrated = true\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={this.h.classes(StepperClass.root)} role=\"list\" size={this.size} hydrated={this.hydrated}>\n\t\t\t\t<slot />\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"],"version":3}

package/dist/esm/gov-tabs-item.entry.js

@@ -1,12 +1,10 @@
-import { r as registerInstance, h, a as Host, g as getElement } from './index-b44c6c92.js';
-import { g as govHost, t as toBoolAttrIfDefined } from './template-94812ab3.js';
+import { r as registerInstance, h, a as Host, g as getElement } from './index-d8b4eb6c.js';
 import { c as createID } from './string.utils-5ce3f551.js';
-import { a as TabsClass, T as TabsItemClass } from './constants-a5fadb10.js';
-import './variants-69f013c1.js';
-import './utils-e10e994d.js';
-
-const govTabsItemCss = ".gov-spin-animation,.gov-pseudo-spin-animation::before{animation:spin 4s linear infinite}@keyframes spin{100%{transform:rotate(360deg)}}@keyframes countdown{to{transform:scaleX(0)}}@keyframes progress{0%{background-position:-200px 0}100%{background-position:calc(200px + 100%) 0}}@keyframes pulse{0%{opacity:1}50%{opacity:0.4}100%{opacity:1}}.gov-tabs-item{color:var(--gov-tabs-text-color, var(--gov-color-secondary-700))}.gov-tabs-item__inner>*:last-child{margin-bottom:0}";
-const GovTabsItemStyle0 = govTabsItemCss;
+import { g as govHost, t as toBoolAttrIfDefined } from './template-3d84d705.js';
+import { a as TabsClass, T as TabsItemClass } from './constants-47e20524.js';
+import './utils-2b4ef320.js';
+import './sizes-5b9e579f.js';
+import './colors-02c1ea96.js';
 
 const GovTabsItem = class {
     constructor(hostRef) {
@@ -15,6 +13,8 @@ const GovTabsItem = class {
         this.triggerIdentifier = undefined;
         this.label = undefined;
         this.disabled = false;
+        this.iconStart = undefined;
+        this.iconEnd = undefined;
         this.default = false;
         this.isActive = false;
         this.h = govHost(this.host);
@@ -28,7 +28,7 @@ const GovTabsItem = class {
         }
     }
     render() {
-        return (h(Host, { key: 'b032a1e0fe87bcf0648a5a0056b94a426aef8480', class: this.h.classes(TabsItemClass.root), default: this.default }, h("div", { key: '56d17e372058ee7239e008688dce4c41440879f7', class: TabsItemClass.inner, role: "tabpanel", id: this.identifier || this.contentId, hidden: !this.isActive, "aria-labelledby": this.triggerIdentifier || this.triggerId, "aria-hidden": toBoolAttrIfDefined(!this.isActive) }, h("slot", { key: 'ecc6972f9500d619b856865cfd3d264fd222d3d1' }))));
+        return (h(Host, { key: '3d080973fda9ffe029ac3837711c221eaf880843', class: this.h.classes(TabsItemClass.root), default: this.default }, h("div", { key: 'c92a076a96938e033b3586a765c80c06b2cc80ba', class: TabsItemClass.inner, role: "tabpanel", id: this.identifier || this.contentId, hidden: !this.isActive, "aria-labelledby": this.triggerIdentifier || this.triggerId, "aria-hidden": toBoolAttrIfDefined(!this.isActive) }, h("slot", { key: 'ac0f79bce4bc4d6d8947bfd935592c88711e5059' }))));
     }
     /**
      * Returns a unique tab content identifier
@@ -60,7 +60,6 @@ const GovTabsItem = class {
         "disabled": ["rerenderParent"]
     }; }
 };
-GovTabsItem.style = GovTabsItemStyle0;
 
 export { GovTabsItem as gov_tabs_item };
 

package/dist/esm/gov-tabs-item.entry.js.map

@@ -1 +1 @@
-{"file":"gov-tabs-item.entry.js","mappings":";;;;;;;AAAA,MAAM,cAAc,GAAG,2dAA2d,CAAC;AACnf,0BAAe,cAAc;;MCUhB,WAAW;IAKvB;;;;;wBAsBoD,KAAK;uBAIrB,KAAK;wBACrB,KAAK;QA1BxB,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QAC3B,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC,eAAe,CAAC,CAAA;QAC1C,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC,eAAe,CAAC,CAAA;KAC1C;IA2BD,cAAc;QACb,MAAM,OAAO,GAAG,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,SAAS,CAAC,IAAI,CAAuB,CAAC;QACvE,IAAI,OAAO,EAAE;YACZ,OAAO,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAA;SAC1B;KACD;IAED,MAAM;QACL,QACC,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,IACrE,4DACC,KAAK,EAAE,aAAa,CAAC,KAAK,EAC1B,IAAI,EAAC,UAAU,EACf,EAAE,EAAE,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,SAAS,EACrC,MAAM,EAAE,CAAC,IAAI,CAAC,QAAQ,qBACL,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,SAAS,iBAC5C,mBAAmB,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,IAEhD,8DAAa,CACR,CACA,EACP;KACD;;;;IAMD,MAAM,aAAa;QAClB,OAAO,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,SAAS,CAAA;KACxC;;;;IAMD,MAAM,oBAAoB;QACzB,OAAO,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,SAAS,CAAA;KAC/C;;;;IAMD,MAAM,eAAe;QACpB,OAAO,IAAI,CAAC,QAAQ,CAAA;KACpB;;;;IAMD,MAAM,eAAe,CAAC,MAAe;QACpC,IAAI,CAAC,QAAQ,GAAG,MAAM,CAAA;KACtB;;;;;;;;;;;","names":[],"sources":["../../../packages/core/src/components/gov-tabs/gov-tabs-item.scss?tag=gov-tabs-item","../../../packages/core/src/components/gov-tabs/gov-tabs-item.tsx"],"sourcesContent":["/*\n *   Tabs - Item\n */\n\n$class: \".gov-tabs-item\";\n\n#{$class} {\n\tcolor: $tabs-text-color;\n\t&__inner {\n\t\t@include reset-last-margin();\n\t}\n}\n","import {Component, Element, h, Host, Method, Prop, State, Watch} from \"@stencil/core\"\n\nimport {govHost, toBoolAttrIfDefined} from \"../../helpers/Dom/template\"\nimport {GovHost} from \"../../helpers/Dom/template.types\"\nimport {createID} from \"../../utils/string.utils\"\nimport {TabsClass, TabsItemClass} from \"./constants\"\n\n@Component({\n\ttag: 'gov-tabs-item',\n\tstyleUrl: 'gov-tabs-item.scss',\n})\nexport class GovTabsItem {\n\tprivate h: GovHost\n\tprivate readonly contentId: string\n\tprivate readonly triggerId: string\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t\tthis.contentId = createID('GovTabContent')\n\t\tthis.triggerId = createID('GovTabTrigger')\n\t}\n\n\t@Element() host: HTMLGovTabsItemElement\n\t/**\n\t * Custom tab item identifier. Otherwise, it will be generated\n\t */\n\t@Prop() readonly identifier: string\n\t/**\n\t * Custom tab trigger item identifier. Otherwise, it will be generated\n\t */\n\t@Prop() readonly triggerIdentifier: string\n\t/**\n\t * Item name of the tab\n\t */\n\t@Prop({reflect: true}) readonly label: string\n\t/**\n\t * Item disable state\n\t */\n\t@Prop({reflect: true}) readonly disabled: boolean = false\n\t/**\n\t * Default selected tab\n\t */\n\t@Prop() readonly default: boolean = false\n\t@State() isActive = false\n\n\t@Watch('label')\n\t@Watch('disabled')\n\trerenderParent() {\n\t\tconst element = this.h.getParent(TabsClass.root) as HTMLGovTabsElement;\n\t\tif (element) {\n\t\t\telement.rerender().catch()\n\t\t}\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={this.h.classes(TabsItemClass.root)} default={this.default}>\n\t\t\t\t<div\n\t\t\t\t\tclass={TabsItemClass.inner}\n\t\t\t\t\trole=\"tabpanel\"\n\t\t\t\t\tid={this.identifier || this.contentId}\n\t\t\t\t\thidden={!this.isActive}\n\t\t\t\t\taria-labelledby={this.triggerIdentifier || this.triggerId}\n\t\t\t\t\taria-hidden={toBoolAttrIfDefined(!this.isActive)}\n\t\t\t\t>\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t)\n\t}\n\n\t/**\n\t * Returns a unique tab content identifier\n\t */\n\t@Method()\n\tasync getIdentifier(): Promise<string> {\n\t\treturn this.identifier || this.contentId\n\t}\n\n\t/**\n\t * Returns a unique tab trigger identifier\n\t */\n\t@Method()\n\tasync getTriggerIdentifier(): Promise<string> {\n\t\treturn this.triggerIdentifier || this.triggerId\n\t}\n\n\t/**\n\t * Returns a unique tab trigger identifier\n\t */\n\t@Method()\n\tasync getDisableState(): Promise<boolean> {\n\t\treturn this.disabled\n\t}\n\n\t/**\n\t * Set status of tab-item\n\t */\n\t@Method()\n\tasync setActiveStatus(status: boolean): Promise<void> {\n\t\tthis.isActive = status\n\t}\n}\n"],"version":3}
+{"file":"gov-tabs-item.entry.js","mappings":";;;;;;;;MASa,WAAW;IAKvB;;;;;wBAsBoD,KAAK;;;uBAYrB,KAAK;wBACrB,KAAK;QAlCxB,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QAC3B,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC,eAAe,CAAC,CAAA;QAC1C,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC,eAAe,CAAC,CAAA;KAC1C;IAmCD,cAAc;QACb,MAAM,OAAO,GAAG,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,SAAS,CAAC,IAAI,CAAuB,CAAC;QACvE,IAAI,OAAO,EAAE;YACZ,OAAO,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAA;SAC1B;KACD;IAED,MAAM;QACL,QACC,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,IACrE,4DACC,KAAK,EAAE,aAAa,CAAC,KAAK,EAC1B,IAAI,EAAC,UAAU,EACf,EAAE,EAAE,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,SAAS,EACrC,MAAM,EAAE,CAAC,IAAI,CAAC,QAAQ,qBACL,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,SAAS,iBAC5C,mBAAmB,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,IAEhD,8DAAa,CACR,CACA,EACP;KACD;;;;IAMD,MAAM,aAAa;QAClB,OAAO,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,SAAS,CAAA;KACxC;;;;IAMD,MAAM,oBAAoB;QACzB,OAAO,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,SAAS,CAAA;KAC/C;;;;IAMD,MAAM,eAAe;QACpB,OAAO,IAAI,CAAC,QAAQ,CAAA;KACpB;;;;IAMD,MAAM,eAAe,CAAC,MAAe;QACpC,IAAI,CAAC,QAAQ,GAAG,MAAM,CAAA;KACtB;;;;;;;;;;","names":[],"sources":["../../../packages/core/src/components/gov-tabs/gov-tabs-item.tsx"],"sourcesContent":["import {Component, Element, h, Host, Method, Prop, State, Watch} from '@stencil/core'\nimport {createID} from '../../utils/string.utils'\nimport {govHost, toBoolAttrIfDefined} from '../../helpers/Dom/template'\nimport {GovHost} from '../../helpers/Dom/template.types'\nimport {TabsClass, TabsItemClass} from './constants'\n\n@Component({\n\ttag: 'gov-tabs-item',\n})\nexport class GovTabsItem {\n\tprivate h: GovHost\n\tprivate readonly contentId: string\n\tprivate readonly triggerId: string\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t\tthis.contentId = createID('GovTabContent')\n\t\tthis.triggerId = createID('GovTabTrigger')\n\t}\n\n\t@Element() host: HTMLGovTabsItemElement\n\t/**\n\t * Custom tab item identifier. Otherwise, it will be generated\n\t */\n\t@Prop() readonly identifier: string\n\t/**\n\t * Custom tab trigger item identifier. Otherwise, it will be generated\n\t */\n\t@Prop() readonly triggerIdentifier: string\n\t/**\n\t * Item name of the tab\n\t */\n\t@Prop({reflect: true}) readonly label: string\n\t/**\n\t * Item disable state\n\t */\n\t@Prop({reflect: true}) readonly disabled: boolean = false\n\t/**\n\t * Icon definition at the stat. Use the type/name notation\n\t */\n\t@Prop({reflect: true, attribute: 'icon-start'}) readonly iconStart: string\n\t/**\n\t * Icon definition at the end. Use the type/name notation\n\t */\n\t@Prop({reflect: true, attribute: 'icon-end'}) readonly iconEnd: string\n\t/**\n\t * Default selected tab\n\t */\n\t@Prop() readonly default: boolean = false\n\t@State() isActive = false\n\n\t@Watch('label')\n\t@Watch('disabled')\n\trerenderParent() {\n\t\tconst element = this.h.getParent(TabsClass.root) as HTMLGovTabsElement;\n\t\tif (element) {\n\t\t\telement.rerender().catch()\n\t\t}\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={this.h.classes(TabsItemClass.root)} default={this.default}>\n\t\t\t\t<div\n\t\t\t\t\tclass={TabsItemClass.inner}\n\t\t\t\t\trole=\"tabpanel\"\n\t\t\t\t\tid={this.identifier || this.contentId}\n\t\t\t\t\thidden={!this.isActive}\n\t\t\t\t\taria-labelledby={this.triggerIdentifier || this.triggerId}\n\t\t\t\t\taria-hidden={toBoolAttrIfDefined(!this.isActive)}\n\t\t\t\t>\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t)\n\t}\n\n\t/**\n\t * Returns a unique tab content identifier\n\t */\n\t@Method()\n\tasync getIdentifier(): Promise<string> {\n\t\treturn this.identifier || this.contentId\n\t}\n\n\t/**\n\t * Returns a unique tab trigger identifier\n\t */\n\t@Method()\n\tasync getTriggerIdentifier(): Promise<string> {\n\t\treturn this.triggerIdentifier || this.triggerId\n\t}\n\n\t/**\n\t * Returns a unique tab trigger identifier\n\t */\n\t@Method()\n\tasync getDisableState(): Promise<boolean> {\n\t\treturn this.disabled\n\t}\n\n\t/**\n\t * Set status of tab-item\n\t */\n\t@Method()\n\tasync setActiveStatus(status: boolean): Promise<void> {\n\t\tthis.isActive = status\n\t}\n}\n"],"version":3}

package/dist/esm/gov-tabs.entry.js

@@ -1,49 +1,58 @@
-import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-b44c6c92.js';
-import { g as govHost, a as toBoolAttr } from './template-94812ab3.js';
-import { c as canValidateWcagOnRender } from './win-b64cd8a6.js';
-import { v as validateProp } from './props-ec3beb91.js';
-import { c as validateWcagProp, v as validateWcagLabel } from './wcag-6ad92279.js';
-import { c as createID } from './string.utils-5ce3f551.js';
-import { d as delay } from './utils-e10e994d.js';
-import { T as TabsItemClass, a as TabsClass, b as TabTypes, c as TabVariants } from './constants-a5fadb10.js';
+import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-d8b4eb6c.js';
+import { v as validateProp } from './props-c82e1abf.js';
+import { T as TabsItemClass, a as TabsClass, b as TabTypes, c as TabColors, d as TabSizes } from './constants-47e20524.js';
+import { g as govHost, c as toBoolAttr, b as booleanString } from './template-3d84d705.js';
 import { h as hasOwnProperty } from './helpers.types-43ddbdb8.js';
-import './gov.log-431da6b2.js';
-import './variants-69f013c1.js';
-
-const govTabsCss = ".gov-tabs__list{margin:0;padding:0}.gov-tabs__list>.gov-tabs__item{margin:0;padding:0;background:none}.gov-tabs__list>.gov-tabs__item::before{display:none}.gov-spin-animation,.gov-pseudo-spin-animation::before{animation:spin 4s linear infinite}@keyframes spin{100%{transform:rotate(360deg)}}@keyframes countdown{to{transform:scaleX(0)}}@keyframes progress{0%{background-position:-200px 0}100%{background-position:calc(200px + 100%) 0}}@keyframes pulse{0%{opacity:1}50%{opacity:0.4}100%{opacity:1}}.gov-tabs{position:relative;display:block;width:100%}.gov-tabs__list{display:flex;flex-wrap:wrap;margin:0rem 0rem 1.25rem}.gov-tabs__list>.gov-tabs__item{display:flex;margin:0}.gov-tabs__btn{font-weight:var(--gov-text-s-font-weight);font-size:var(--gov-text-s-font-size);line-height:var(--gov-text-s-line-height);letter-spacing:var(--gov-text-s-letter-spacing);display:inline-flex;vertical-align:middle;justify-content:center;align-items:center;border:0;background-color:transparent;text-align:center;text-decoration:none;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;padding:0.75rem 0rem 0.625rem;border-bottom:0.125rem solid transparent;font-weight:700;text-align:center;transition:150ms linear color, 150ms linear border-color}.gov-tabs__btn:focus{outline:none}.gov-tabs__btn:focus{outline:none}.gov-tabs__btn:focus-visible{border-radius:var(--gov-border-radius, 0.1875rem);outline:var(--gov-outline-width, 0.125rem) solid var(--gov-color-focus-base);outline-offset:0}.gov-tabs__btn[disabled]{cursor:not-allowed}.gov-tabs[type=text] .gov-tabs__list{gap:0.5rem 2rem;border-bottom:var(--gov-tabs-list-border-width, 0.0625rem solid var(--gov-color-secondary-500))}.gov-tabs[type=chip] .gov-tabs__list{gap:0.5rem 1rem}.gov-tabs[variant=primary][type=text] .gov-tabs__btn:not([disabled]){color:var(--gov-tabs-primary-color, var(--gov-color-primary))}@media not all and (pointer: coarse){.gov-tabs[variant=primary][type=text] .gov-tabs__btn:not([disabled]):hover{color:var(--gov-tabs-primary-color-hover, var(--gov-color-primary-800))}}.gov-tabs[variant=primary][type=text] .gov-tabs__btn[aria-selected=true]{border-bottom-color:var(--gov-tabs-primary-color-active, var(--gov-color-primary-800));color:var(--gov-tabs-primary-color-active, var(--gov-color-primary-800))}.gov-tabs[variant=secondary][type=text] .gov-tabs__btn:not([disabled]){color:var(--gov-tabs-secondary-color, var(--gov-color-secondary-700))}@media not all and (pointer: coarse){.gov-tabs[variant=secondary][type=text] .gov-tabs__btn:not([disabled]):hover{color:var(--gov-tabs-secondary-color-hover, var(--gov-color-secondary-900))}}.gov-tabs[variant=secondary][type=text] .gov-tabs__btn[aria-selected=true]{border-bottom-color:var(--gov-tabs-secondary-color-active, var(--gov-color-secondary-900));color:var(--gov-tabs-secondary-color-active, var(--gov-color-secondary-900))}.gov-tabs[variant=success][type=text] .gov-tabs__btn:not([disabled]){color:var(--gov-tabs-success-color, var(--gov-color-success-500))}@media not all and (pointer: coarse){.gov-tabs[variant=success][type=text] .gov-tabs__btn:not([disabled]):hover{color:var(--gov-tabs-success-color-hover, var(--gov-color-success-700))}}.gov-tabs[variant=success][type=text] .gov-tabs__btn[aria-selected=true]{border-bottom-color:var(--gov-tabs-success-color-active, var(--gov-color-success-700));color:var(--gov-tabs-success-color-active, var(--gov-color-success-700))}.gov-tabs[variant=warning][type=text] .gov-tabs__btn:not([disabled]){color:var(--gov-tabs-warning-color, var(--gov-color-warning-500))}@media not all and (pointer: coarse){.gov-tabs[variant=warning][type=text] .gov-tabs__btn:not([disabled]):hover{color:var(--gov-tabs-warning-color-hover, var(--gov-color-warning-700))}}.gov-tabs[variant=warning][type=text] .gov-tabs__btn[aria-selected=true]{border-bottom-color:var(--gov-tabs-warning-color-active, var(--gov-color-warning-700));color:var(--gov-tabs-warning-color-active, var(--gov-color-warning-700))}.gov-tabs[variant=error][type=text] .gov-tabs__btn:not([disabled]){color:var(--gov-tabs-error-color, var(--gov-color-error-400))}@media not all and (pointer: coarse){.gov-tabs[variant=error][type=text] .gov-tabs__btn:not([disabled]):hover{color:var(--gov-tabs-error-color-hover, var(--gov-color-error-600))}}.gov-tabs[variant=error][type=text] .gov-tabs__btn[aria-selected=true]{border-bottom-color:var(--gov-tabs-error-color-active, var(--gov-color-error-600));color:var(--gov-tabs-error-color-active, var(--gov-color-error-600))}.gov-tabs[orientation=vertical] .gov-tabs__btn{text-align:left}@media (min-width: 75em){.gov-tabs[orientation=vertical]{display:flex;flex-direction:row}.gov-tabs[orientation=vertical] .gov-tabs__list{flex-wrap:nowrap;flex-direction:column;width:-moz-max-content;width:max-content;max-width:30vw;margin-right:1.25rem;padding:0rem 0.5rem;border-bottom:none;border-right:var(--gov-tabs-list-border-width, 0.0625rem solid var(--gov-color-secondary-500))}.gov-tabs[orientation=vertical] .gov-tabs__item{justify-content:flex-end}.gov-tabs[orientation=vertical] .gov-tabs__btn{padding:0.5rem 0.75rem;text-align:right}}";
-const GovTabsStyle0 = govTabsCss;
+import { p as prepareIconFormat } from './helpers-5d179d4b.js';
+import { A as AttributeObserver, a as ariaAttributes } from './attribute-5561aca4.js';
+import { i as inheritAriaAttributes } from './accessibility-f83c991a.js';
+import './gov.log-6e9faad2.js';
+import './win-cec370ad.js';
+import './utils-2b4ef320.js';
+import './sizes-5b9e579f.js';
+import './colors-02c1ea96.js';
 
 const GovTabs = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.govChange = createEvent(this, "gov-change", 7);
         this.triggerRefs = {};
-        this.controllers = [];
-        this.focusIndex = 0;
-        this.compactControls = false;
         this.type = "text";
-        this.variant = "primary";
+        this.size = 'm';
+        this.color = "primary";
         this.orientation = "horizontal";
-        this.wcagLabel = undefined;
-        this.wcagSelectLabel = undefined;
-        this.wcagLabelledBy = undefined;
+        this.direction = 'row';
+        this.controllers = [];
+        this.focusIndex = 0;
+        this.inheritedAttributes = {};
         this.h = govHost(this.host);
-        this.formSelectId = createID("GovFormSelect");
     }
     validateType(newValue) {
         validateProp(TabTypes, newValue, TabsClass.root);
     }
-    validateVariant(newValue) {
-        validateProp(TabVariants, newValue, TabsClass.root);
+    validateColor(newValue) {
+        validateProp(TabColors, newValue, TabsClass.root);
+    }
+    validateSize(newValue) {
+        validateProp(TabSizes, newValue, TabsClass.root);
+    }
+    componentDidLoad() {
+        this.attributeObserver = new AttributeObserver(this.host, (attributeName, newValue) => {
+            this.onAriaAttributeChange(attributeName, newValue);
+        });
+        this.attributeObserver.startObserving(ariaAttributes);
     }
     componentWillLoad() {
         this.prepareControllers();
+        this.validateSize(this.size);
+        this.inheritedAttributes = inheritAriaAttributes(this.host);
     }
-    async componentDidRender() {
-        if (canValidateWcagOnRender()) {
-            await delay(500);
-            await this.validateWcag();
-        }
+    disconnectedCallback() {
+        this.attributeObserver.stopObserving();
+    }
+    onAriaAttributeChange(attributeName, newValue) {
+        this.host.removeAttribute(attributeName);
+        this.inheritedAttributes = Object.assign(Object.assign({}, this.inheritedAttributes), { [attributeName]: newValue });
     }
     prepareControllers(skipDefault = false) {
         this.controllers = [];
@@ -55,14 +64,19 @@ const GovTabs = class {
                 tab.getDisableState()
             ]).then(([identifier, triggerIdentifier, disabled]) => {
                 const isDefault = typeof tab.getAttribute("default") === "string";
+                const iconStart = prepareIconFormat(tab.getAttribute('icon-start'));
+                const iconEnd = prepareIconFormat(tab.getAttribute('icon-end'));
                 return {
                     label: tab.getAttribute("label"),
+                    direction: tab.getAttribute("direction"),
                     contentIdentifier: identifier,
                     disabled: disabled,
                     triggerIdentifier: triggerIdentifier,
                     element: tab,
                     active: false,
                     default: isDefault,
+                    iconStart,
+                    iconEnd
                 };
             });
             promises.push(controlItem);
@@ -105,7 +119,7 @@ const GovTabs = class {
         });
     }
     render() {
-        return (h(Host, { key: 'c9268edb140ab2f89a200e24fb82489ac643bb5b', class: this.h.classes(TabsClass.root), variant: this.variant, type: this.type, role: "tablist", "aria-label": this.wcagLabel, "aria-labelledby": this.wcagLabelledBy, onKeyDown: this.onKeydownHandler.bind(this) }, h("div", { key: '41848142996bf01dc71ec80d396feb28d1d361d3', class: TabsClass.tabs, "aria-hidden": toBoolAttr(this.compactControls) }, h("ul", { key: 'dcbc258c22c0200a96b74aba9b50088484cc9d36', class: TabsClass.list }, this.controllers.map(control => (h("li", { class: TabsClass.item }, this.type == "text" ? (h("button", { class: TabsClass.btn, id: control.triggerIdentifier, role: "tab", onClick: () => this.onSelectHandler(control), disabled: control.disabled, "aria-disabled": toBoolAttr(control.disabled), "aria-selected": toBoolAttr(control.active), "aria-controls": control.contentIdentifier, tabindex: control.active && !control.disabled ? 0 : -1, ref: el => (this.triggerRefs[control.triggerIdentifier] = el) }, control.label)) : (h("gov-chip", { role: "tab", tag: 'button', identifier: control.triggerIdentifier, "wcag-selected": control.active, "wcag-controls": control.contentIdentifier, focusable: control.active, disabled: control.disabled, variant: this.variant, inverse: !control.active, ref: el => (this.triggerRefs[control.triggerIdentifier] = el), "on-gov-click": () => this.onSelectHandler(control) }, control.label))))))), h("span", { key: 'a7d9ec6aa331b24ba759f25cbfaefab3ffb3aa22', id: this.formSelectId, hidden: true }, this.wcagSelectLabel), this.compactControls ? (h("gov-form-select", { "wcag-labelled-by": this.formSelectId, "onGov-change": this.onChangeHandler.bind(this) }, this.controllers.map(control => (h("option", { value: control.triggerIdentifier, selected: control.active }, control.label))))) : null, h("slot", { key: '0b67266e6e5ef507c45202e92575d82be6946278' })));
+        return (h(Host, { key: 'bc7d4a5046998b050c1ca29aef432e27d7a420a1', class: this.h.classes(TabsClass.root), size: this.size, color: this.color, type: this.type, direction: this.direction, onKeyDown: this.onKeydownHandler.bind(this) }, h("div", Object.assign({ key: '560b7509d6219931dc2c60eac48d0038c751bd0c', class: TabsClass.tabs, role: "tablist" }, this.inheritedAttributes), h("ul", { key: '3fb683c97ede9bb6f8dd795b4e45ea439e611283', class: TabsClass.list }, this.controllers.map(control => (h("li", { class: TabsClass.item }, this.type == "text" ? (h("button", { class: TabsClass.btn, id: control.triggerIdentifier, role: "tab", onClick: () => this.onSelectHandler(control), disabled: control.disabled, "aria-disabled": toBoolAttr(control.disabled), "aria-selected": toBoolAttr(control.active), "aria-controls": control.contentIdentifier, tabindex: control.active && !control.disabled ? 0 : -1, ref: el => (this.triggerRefs[control.triggerIdentifier] = el) }, control.iconStart ? (h("gov-icon", { name: control.iconStart.name, type: control.iconStart.type })) : null, control.label, control.iconEnd ? (h("gov-icon", { name: control.iconEnd.name, type: control.iconEnd.type })) : null)) : (h("gov-chip", { role: "tab", tag: 'button', identifier: control.triggerIdentifier, "aria-selected": booleanString(control.active), "aria-controls": control.contentIdentifier, focusable: control.active, disabled: control.disabled, color: this.color, size: this.size === "xs" ? "xs" : (this.size === "s" ? "s" : "m"), type: control.active ? "solid" : "outlined", ref: el => (this.triggerRefs[control.triggerIdentifier] = el), "on-gov-click": () => this.onSelectHandler(control) }, control.iconStart ? (h("gov-icon", { name: control.iconStart.name, type: control.iconStart.type, slot: "left-icon" })) : null, control.label, control.iconEnd ? (h("gov-icon", { name: control.iconEnd.name, type: control.iconEnd.type, slot: "right-icon" })) : null))))))), h("slot", { key: '90cbf1a2c703360a182b754e79a6ff7f5c7823e1' })));
     }
     getCurrentTab() {
         return this.controllers.find(control => control.active) || null;
@@ -117,13 +131,6 @@ const GovTabs = class {
         this.reRender();
         this.govChange.emit(this.getCurrentTab().element);
     }
-    onChangeHandler(e) {
-        const triggerId = e.target.value;
-        e.stopPropagation();
-        this.setActiveByIdentifier(triggerId);
-        this.reRender();
-        this.govChange.emit(this.getCurrentTab().element);
-    }
     onKeydownHandler(e) {
         const keyCode = e.keyCode;
         e.stopPropagation();
@@ -194,20 +201,13 @@ const GovTabs = class {
     async rerender() {
         this.prepareControllers(true);
     }
-    /**
-     * Validate the WCAG attributes of the component
-     */
-    async validateWcag() {
-        validateWcagProp(this.wcagSelectLabel, "wcag-select-label", TabsClass.root);
-        validateWcagLabel(this.wcagLabel, this.wcagLabelledBy, TabsClass.root);
-    }
     get host() { return getElement(this); }
     static get watchers() { return {
         "type": ["validateType"],
-        "variant": ["validateVariant"]
+        "color": ["validateColor"],
+        "size": ["validateSize"]
     }; }
 };
-GovTabs.style = GovTabsStyle0;
 
 export { GovTabs as gov_tabs };