@gov-design-system-ce/components 0.0.5 → 0.0.6

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

@@ -1 +1 @@
-{"file":"gov-accordion-item.entry.js","mappings":";;;;;;;;;AAAA,MAAM,mBAAmB,GAAG,4sQAA4sQ;;MCe3tQ,gBAAgB;EAK5B;;;;mBAYwC,QAAQ,CAAC,OAAO;;gBAQtB,SAAS;;;oBAaN,KAAK;sBAIyB,KAAK;sBAIN,IAAI;IAxCrE,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;IAC3B,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC,kBAAkB,CAAC,CAAA;IAC7C,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC,qBAAqB,CAAC,CAAA;GAChD;EA6CD,aAAa,CAAC,QAAgB;IAC7B,IAAI,CAAC,QAAQ,EAAE;MACd,WAAW,CAAC,IAAI,kBAAkB,CAAC,IAAI,iCAAiC,CAAC,CAAA;KACzE;GACD;EAGD,kBAAkB,CAAC,QAAgB;IAClC,MAAM,SAAS,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,CAAC,CAAA;IAC9D,IAAI,QAAQ,EAAE;MACb,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE;QAClC,WAAW,CAAC,IAAI,kBAAkB,CAAC,IAAI,UAAU,QAAQ,kBAAkB,CAAC,CAAA;OAC5E;KACD;GACD;EAGD,YAAY,CAAC,QAAgB;IAC5B,YAAY,CAAC,KAAK,EAAE,QAAQ,EAAE,kBAAkB,CAAC,IAAI,CAAC,CAAA;GACtD;EAGD,eAAe,CAAC,QAAgB;IAC/B,YAAY,CAAC,QAAQ,EAAE,QAAQ,EAAE,kBAAkB,CAAC,IAAI,CAAC,CAAA;GACzD;EAEO,WAAW;IAClB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,eAAe,EAAE,OAAO,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,CAAA;GACvE;EAED,iBAAiB;IAChB,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,UAAU,CAAA;IACtC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;IAC5B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;IAC9B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;IAClC,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAA;GACxC;EAED,MAAM;IACL,MAAM,SAAS,GAAG,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,SAAS,CAAA;IACnD,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,CAAA;IAChC,MAAM,EAAE,eAAe,EAAE,KAAK,EAAE,GAAG,IAAI,CAAA;IACvC,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,CAAA;IAElC,QACC,EAAC,IAAI,IAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,kBAAkB,CAAC,IAAI,CAAC,EAAE,IAAI,EAAC,UAAU,IACpE,cACC,EAAE,EAAE,SAAS,EACb,KAAK,EAAE,kBAAkB,CAAC,MAAM,mBACjB,aAAa,CAAC,eAAe,CAAC,mBAC9B,SAAS,EACxB,QAAQ,EAAE,IAAI,CAAC,QAAQ,mBACR,mBAAmB,CAAC,IAAI,CAAC,QAAQ,CAAC,EACjD,OAAO,EAAE,MAAM,IAAI,CAAC,MAAM,EAAE,IAE5B,EAAC,UAAU,IAAC,KAAK,EAAE,kBAAkB,CAAC,KAAK,IACzC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,KACtB,YAAM,KAAK,EAAE,kBAAkB,CAAC,IAAI,IACnC,YAAM,IAAI,EAAC,MAAM,GAAG,CACd,CACP,EAED,YAAM,KAAK,EAAE,kBAAkB,CAAC,IAAI,IACnC,YAAM,KAAK,EAAE,kBAAkB,CAAC,KAAK,IAAG,KAAK,CAAQ,EACpD,IAAI,CAAC,UAAU;MACf,YAAM,KAAK,EAAE,kBAAkB,CAAC,KAAK,IAAG,IAAI,CAAC,UAAU,CAAQ,CAG1D,EAEN,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,KACxB,YAAM,KAAK,EAAE,kBAAkB,CAAC,MAAM,IACrC,YAAM,IAAI,EAAC,QAAQ,GAAG,CAChB,CACP,CACW,EAEb,gBAAU,KAAK,EAAE,kBAAkB,CAAC,KAAK,EAAE,IAAI,EAAC,YAAY,GAAY,CAChE,EACT,WACC,KAAK,EAAE,kBAAkB,CAAC,OAAO,EACjC,EAAE,EAAE,SAAS,iBACA,aAAa,CAAC,CAAC,eAAe,CAAC,EAC5C,MAAM,EAAE,CAAC,eAAe,qBACP,SAAS,IAE1B,eAAQ,CACH,CACA,EACP;GACD;;;;EAMD,MAAM,IAAI;IACT,IAAI,CAAC,eAAe,GAAG,IAAI,CAAA;IAC3B,IAAI,CAAC,WAAW,EAAE,CAAA;GAClB;;;;EAMD,MAAM,KAAK;IACV,IAAI,CAAC,eAAe,GAAG,KAAK,CAAA;IAC5B,IAAI,CAAC,WAAW,EAAE,CAAA;GAClB;;;;EAMD,MAAM,MAAM;IACX,IAAI,CAAC,eAAe,GAAG,CAAC,IAAI,CAAC,eAAe,CAAA;IAC5C,IAAI,CAAC,WAAW,EAAE,CAAA;GAClB;;;;EAMD,MAAM,YAAY;IACjB,OAAO,IAAI,CAAC,eAAe,CAAA;GAC3B;;;;;;;;;;;;;","names":[],"sources":["../../../packages/core/src/components/gov-accordion/gov-accordion-item.scss?tag=gov-accordion-item","../../../packages/core/src/components/gov-accordion/gov-accordion-item.tsx"],"sourcesContent":["/*\n *   Accordion - Item\n */\n\n$class: \".gov-accordion-item\";\n\n#{$class} {\n\t@include base();\n\t&__header {\n\t\t@include button-core();\n\t\t@include focus-outline();\n\t\tposition: relative;\n\t\tdisplay: flex;\n\t\tjustify-content: space-between;\n\t\talign-items: center;\n\t\twidth: 100%;\n\t\tborder-radius: 0;\n\t\ttext-align: left;\n\t\ttext-transform: none;\n\t\ttransition: background-color $t ease-in-out;\n\t\t&::before {\n\t\t\t@include pseudo();\n\t\t\tright: 0;\n\t\t\tbottom: -1px;\n\t\t\tleft: 0;\n\t\t\theight: 1px;\n\t\t}\n\n\t\t// STATES\n\t\t&:focus-visible {\n\t\t\t&::before {\n\t\t\t\tdisplay: none;\n\t\t\t}\n\t\t}\n\t\t@include parameter(\"aria-expanded\") {\n\t\t\t#{$class} {\n\t\t\t\t&__arrow {\n\t\t\t\t\ttransform: scale(-1);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\t&__arrow {\n\t\tflex: 0 0 auto;\n\t\talign-self: center;\n\t}\n\t&__icon {\n\t\tdisplay: inline-flex;\n\t\tvertical-align: middle;\n\t\tflex: 0 0 auto;\n\t}\n\t&__suffix {\n\t\tdisplay: inline-flex;\n\t\tvertical-align: middle;\n\t\tflex: 0 0 auto;\n\t\talign-self: start;\n\t\tmargin-left: auto;\n\t\tline-height: initial;\n\t}\n\t&__title {\n\t\t@include general;\n\t\tdisplay: flex;\n\t\tflex: 1 1 auto;\n\t\talign-items: flex-start;\n\t}\n\t&__name {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t}\n\t&__annot {\n\t\tcolor: color(\"secondary\");\n\t}\n\t&__content {\n\t\t@include reset-last-margin();\n\t}\n\n\t// VARIANTS\n\t@each $size, $definitions in $accordion-sizes {\n\t\t&[size=\"#{$size}\"] {\n\t\t\t#{$class} {\n\t\t\t\t&__header {\n\t\t\t\t\tgap: get(\"headline-gap\", $definitions);\n\t\t\t\t\tmin-height: get(\"min-height\", $definitions);\n\t\t\t\t\tpadding: get(\"padding-y\", $definitions) get(\"padding-x\", $definitions);\n\t\t\t\t}\n\t\t\t\t&__arrow {\n\t\t\t\t\twidth: get(\"icon-size\", $definitions);\n\t\t\t\t\theight: get(\"icon-size\", $definitions);\n\t\t\t\t}\n\t\t\t\t&__icon {\n\t\t\t\t\twidth: calc(get-font-size(get(\"font\", $definitions)) * 1.2);\n\t\t\t\t\theight: calc(get-font-size(get(\"font\", $definitions)) * 1.2);\n\t\t\t\t\ttransform: translateY(get(\"icon-position\", $definitions));\n\t\t\t\t}\n\t\t\t\t&__title {\n\t\t\t\t\t@include typography(get(\"font\", $definitions));\n\t\t\t\t\tgap: get(\"headline-gap\", $definitions);\n\t\t\t\t}\n\t\t\t\t&__annot {\n\t\t\t\t\t@include typography(get(\"font-annot\", $definitions));\n\t\t\t\t}\n\t\t\t\t&__content {\n\t\t\t\t\tpadding: get(\"padding-inner\", $definitions);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\t@each $variant, $definitions in $accordion-variants {\n\t\t&[variant=\"#{$variant}\"] {\n\t\t\t#{$class} {\n\t\t\t\t&__header {\n\t\t\t\t\tbackground-color: get(\"background\", $definitions);\n\t\t\t\t\tcolor: get(\"color\", $definitions);\n\t\t\t\t\t&::before {\n\t\t\t\t\t\tbackground-color: get(\"separator\", $definitions);\n\t\t\t\t\t}\n\t\t\t\t\t@include hover() {\n\t\t\t\t\t\tbackground-color: get(\"background-hover\", $definitions);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// STATES\n\t\t\t@include parameter(\"disabled\") {\n\t\t\t\t#{$class} {\n\t\t\t\t\t&__header {\n\t\t\t\t\t\tcolor: get(\"disabled-color\", $definitions);\n\t\t\t\t\t\t@include hover() {\n\t\t\t\t\t\t\tbackground: transparent;\n\t\t\t\t\t\t\tcursor: not-allowed;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t// MQ\n\t@include mq($until: md) {\n\t\t&__title {\n\t\t\tflex-wrap: wrap;\n\t\t}\n\t\t&__label {\n\t\t\tflex: 0 0 auto;\n\t\t\tmax-width: calc(100% - 50px);\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 { SizeType, Sizes, AccordionItemClass, VariantType } from './constants'\nimport { createID } from '../../utils/string.utils'\nimport { booleanString, toBoolAttrIfDefined } from '../../helpers/Dom/template'\nimport { GovAccordionItemChangeEvent } from './gov-accordion-item.d'\nimport { Variants } from '../../core/constants/variants'\nimport { govHost } from '../../helpers/Dom/template'\nimport { GovHost } from '../../helpers/Dom/template.d'\n\n@Component({\n\ttag: 'gov-accordion-item',\n\tstyleUrl: 'gov-accordion-item.scss',\n})\nexport class GovAccordionItem {\n\tprivate readonly triggerId: string\n\tprivate readonly contentId: string\n\tprivate h: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t\tthis.triggerId = createID('GovAccordionItem')\n\t\tthis.contentId = createID('GovAccordionContent')\n\t}\n\n\t@Element() readonly host: HTMLGovAccordionItemElement\n\t@State() isExpandedState: boolean\n\n\t/**\n\t * Style variation of the button.\n\t */\n\t@Prop() readonly variant: VariantType = Variants.PRIMARY\n\t/**\n\t * Custom accordion item identifier. Otherwise, it will be generated\n\t */\n\t@Prop() readonly identifier: string\n\t/**\n\t * Accordion’s size.\n\t */\n\t@Prop() readonly size: SizeType = undefined\n\t/**\n\t * Item name of the accordion\n\t */\n\t@Prop() readonly label: string\n\t/**\n\t * Item annotation of the accordion\n\t */\n\t@Prop() readonly annotation: string\n\t/**\n\t * Makes the button component disabled.\n\t * This prevents users from being able to interact with the button, and conveys its inactive state to assistive technologies.\n\t */\n\t@Prop() readonly disabled: boolean = false\n\t/**\n\t * Defines whether the accordion is open or closed by default\n\t */\n\t@Prop({ attribute: 'is-expanded' }) readonly isExpanded: boolean = false\n\t/**\n\t * Used to change the HMTL tag in the accordion trigger for correct semantic structure\n\t */\n\t@Prop({ attribute: 'trigger-tag' }) readonly triggerTag: string = 'h3'\n\n\t/**\n\t * Called when the accordion state changes\n\t */\n\t@Event({ eventName: 'gov-change' }) govChange: EventEmitter<GovAccordionItemChangeEvent>\n\n\t@Watch('label')\n\tvalidateLabel(newValue: string): void {\n\t\tif (!newValue) {\n\t\t\tgovErrorLog(`[${AccordionItemClass.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(`[${AccordionItemClass.root}]: Tag ${newValue} is not allowed.`)\n\t\t\t}\n\t\t}\n\t}\n\n\t@Watch('size')\n\tvalidateSize(newValue: string): void {\n\t\tvalidateProp(Sizes, newValue, AccordionItemClass.root)\n\t}\n\n\t@Watch('variant')\n\tvalidateVariant(newValue: string): void {\n\t\tvalidateProp(Variants, newValue, AccordionItemClass.root)\n\t}\n\n\tprivate emmitChange(): void {\n\t\tthis.govChange.emit({ open: this.isExpandedState, element: this.host })\n\t}\n\n\tcomponentWillLoad(): void {\n\t\tthis.isExpandedState = this.isExpanded\n\t\tthis.validateSize(this.size)\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 { isExpandedState, label } = this\n\t\tconst TriggerTag = this.triggerTag\n\n\t\treturn (\n\t\t\t<Host class={this.h.classes(AccordionItemClass.root)} role=\"listitem\">\n\t\t\t\t<button\n\t\t\t\t\tid={triggerId}\n\t\t\t\t\tclass={AccordionItemClass.header}\n\t\t\t\t\taria-expanded={booleanString(isExpandedState)}\n\t\t\t\t\taria-controls={contentId}\n\t\t\t\t\tdisabled={this.disabled}\n\t\t\t\t\taria-disabled={toBoolAttrIfDefined(this.disabled)}\n\t\t\t\t\tonClick={() => this.toggle()}\n\t\t\t\t>\n\t\t\t\t\t<TriggerTag class={AccordionItemClass.title}>\n\t\t\t\t\t\t{this.h.hasSlot('icon') && (\n\t\t\t\t\t\t\t<span class={AccordionItemClass.icon}>\n\t\t\t\t\t\t\t\t<slot name=\"icon\" />\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t<span class={AccordionItemClass.name}>\n\t\t\t\t\t\t\t<span class={AccordionItemClass.label}>{label}</span>\n\t\t\t\t\t\t\t{this.annotation &&\n\t\t\t\t\t\t\t\t<span class={AccordionItemClass.annot}>{this.annotation}</span>\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t</span>\n\n\t\t\t\t\t\t{this.h.hasSlot('suffix') && (\n\t\t\t\t\t\t\t<span class={AccordionItemClass.suffix}>\n\t\t\t\t\t\t\t\t<slot name=\"suffix\" />\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</TriggerTag>\n\n\t\t\t\t\t<gov-icon class={AccordionItemClass.arrow} name=\"arrow-down\"></gov-icon>\n\t\t\t\t</button>\n\t\t\t\t<div\n\t\t\t\t\tclass={AccordionItemClass.content}\n\t\t\t\t\tid={contentId}\n\t\t\t\t\taria-hidden={booleanString(!isExpandedState)}\n\t\t\t\t\thidden={!isExpandedState}\n\t\t\t\t\taria-labelledby={triggerId}\n\t\t\t\t>\n\t\t\t\t\t<slot />\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t)\n\t}\n\n\t/**\n\t * Opening the accordion\n\t */\n\t@Method()\n\tasync open(): Promise<void> {\n\t\tthis.isExpandedState = true\n\t\tthis.emmitChange()\n\t}\n\n\t/**\n\t * Closing the accordion\n\t */\n\t@Method()\n\tasync close(): Promise<void> {\n\t\tthis.isExpandedState = false\n\t\tthis.emmitChange()\n\t}\n\n\t/**\n\t * Accordion switch\n\t */\n\t@Method()\n\tasync toggle(): Promise<void> {\n\t\tthis.isExpandedState = !this.isExpandedState\n\t\tthis.emmitChange()\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-accordion-item.entry.js","mappings":"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","names":[],"sources":["../../../packages/core/src/components/gov-accordion/gov-accordion-item.scss?tag=gov-accordion-item","../../../packages/core/src/components/gov-accordion/gov-accordion-item.tsx"],"sourcesContent":["/*\n *   Accordion - Item\n */\n\n$class: \".gov-accordion-item\";\n\n#{$class} {\n\t@include base();\n\t&__header {\n\t\t@include button-core();\n\t\t@include focus-outline();\n\t\tposition: relative;\n\t\tdisplay: flex;\n\t\tjustify-content: space-between;\n\t\talign-items: center;\n\t\twidth: 100%;\n\t\tborder-radius: 0;\n\t\ttext-align: left;\n\t\ttext-transform: none;\n\t\ttransition: background-color $t ease-in-out;\n\t\t&::before {\n\t\t\t@include pseudo();\n\t\t\tright: 0;\n\t\t\tbottom: -1px;\n\t\t\tleft: 0;\n\t\t\theight: 1px;\n\t\t}\n\n\t\t// STATES\n\t\t&:focus-visible {\n\t\t\t&::before {\n\t\t\t\tdisplay: none;\n\t\t\t}\n\t\t}\n\t\t@include parameter(\"aria-expanded\") {\n\t\t\t#{$class} {\n\t\t\t\t&__arrow {\n\t\t\t\t\ttransform: scale(-1);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\t&__arrow {\n\t\tflex: 0 0 auto;\n\t\talign-self: center;\n\t}\n\t&__icon {\n\t\tdisplay: inline-flex;\n\t\tvertical-align: middle;\n\t\tflex: 0 0 auto;\n\t}\n\t&__suffix {\n\t\tdisplay: inline-flex;\n\t\tvertical-align: middle;\n\t\tflex: 0 0 auto;\n\t\talign-self: start;\n\t\tmargin-left: auto;\n\t\tline-height: initial;\n\t}\n\t&__title {\n\t\t@include general;\n\t\tdisplay: flex;\n\t\tflex: 1 1 auto;\n\t\talign-items: flex-start;\n\t}\n\t&__name {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t}\n\t&__annot {\n\t\tcolor: color(\"secondary\");\n\t}\n\t&__content {\n\t\t@include reset-last-margin();\n\t}\n\n\t// VARIANTS\n\t@each $size, $definitions in $accordion-sizes {\n\t\t&[size=\"#{$size}\"] {\n\t\t\t#{$class} {\n\t\t\t\t&__header {\n\t\t\t\t\tgap: get(\"headline-gap\", $definitions);\n\t\t\t\t\tmin-height: get(\"min-height\", $definitions);\n\t\t\t\t\tpadding: get(\"padding-y\", $definitions) get(\"padding-x\", $definitions);\n\t\t\t\t}\n\t\t\t\t&__arrow {\n\t\t\t\t\twidth: get(\"icon-size\", $definitions);\n\t\t\t\t\theight: get(\"icon-size\", $definitions);\n\t\t\t\t}\n\t\t\t\t&__icon {\n\t\t\t\t\twidth: calc(get-font-size(get(\"font\", $definitions)) * 1.2);\n\t\t\t\t\theight: calc(get-font-size(get(\"font\", $definitions)) * 1.2);\n\t\t\t\t\ttransform: translateY(get(\"icon-position\", $definitions));\n\t\t\t\t}\n\t\t\t\t&__title {\n\t\t\t\t\t@include typography(get(\"font\", $definitions));\n\t\t\t\t\tgap: get(\"headline-gap\", $definitions);\n\t\t\t\t}\n\t\t\t\t&__annot {\n\t\t\t\t\t@include typography(get(\"font-annot\", $definitions));\n\t\t\t\t}\n\t\t\t\t&__content {\n\t\t\t\t\tpadding: get(\"padding-inner\", $definitions);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\t@each $variant, $definitions in $accordion-variants {\n\t\t&[variant=\"#{$variant}\"] {\n\t\t\t#{$class} {\n\t\t\t\t&__header {\n\t\t\t\t\tbackground-color: get(\"background\", $definitions);\n\t\t\t\t\tcolor: get(\"color\", $definitions);\n\t\t\t\t\t&::before {\n\t\t\t\t\t\tbackground-color: get(\"separator\", $definitions);\n\t\t\t\t\t}\n\t\t\t\t\t@include hover() {\n\t\t\t\t\t\tbackground-color: get(\"background-hover\", $definitions);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// STATES\n\t\t\t@include parameter(\"disabled\") {\n\t\t\t\t#{$class} {\n\t\t\t\t\t&__header {\n\t\t\t\t\t\tcolor: get(\"disabled-color\", $definitions);\n\t\t\t\t\t\t@include hover() {\n\t\t\t\t\t\t\tbackground: transparent;\n\t\t\t\t\t\t\tcursor: not-allowed;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t// MQ\n\t@include mq($until: md) {\n\t\t&__title {\n\t\t\tflex-wrap: wrap;\n\t\t}\n\t\t&__label {\n\t\t\tflex: 0 0 auto;\n\t\t\tmax-width: calc(100% - 50px);\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 { AccordionSizeType, AccordionSizes, AccordionItemClass, AccordionVariantType, AccordionVariants } from './constants'\nimport { createID } from '../../utils/string.utils'\nimport { booleanString, toBoolAttrIfDefined } from '../../helpers/Dom/template'\nimport { GovAccordionItemChangeEvent } from './gov-accordion-item.d'\nimport { govHost } from '../../helpers/Dom/template'\nimport { GovHost } from '../../helpers/Dom/template.types'\n\n@Component({\n\ttag: 'gov-accordion-item',\n\tstyleUrl: 'gov-accordion-item.scss',\n})\nexport class GovAccordionItem {\n\tprivate readonly triggerId: string\n\tprivate readonly contentId: string\n\tprivate h: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t\tthis.triggerId = createID('GovAccordionItem')\n\t\tthis.contentId = createID('GovAccordionContent')\n\t}\n\n\t@Element() readonly host: HTMLGovAccordionItemElement\n\t@State() isExpandedState: boolean\n\n\t/**\n\t * Style variation of the button.\n\t */\n\t@Prop() readonly variant?: AccordionVariantType = 'primary'\n\t/**\n\t * Custom accordion item identifier. Otherwise, it will be generated\n\t */\n\t@Prop() readonly identifier: string\n\t/**\n\t * Accordion’s size.\n\t */\n\t@Prop() readonly size?: AccordionSizeType\n\t/**\n\t * Item name of the accordion\n\t */\n\t@Prop() readonly label: string\n\t/**\n\t * Item annotation of the accordion\n\t */\n\t@Prop() readonly annotation: string\n\t/**\n\t * Makes the button component disabled.\n\t * This prevents users from being able to interact with the button, and conveys its inactive state to assistive technologies.\n\t */\n\t@Prop() readonly disabled: boolean = false\n\t/**\n\t * Defines whether the accordion is open or closed by default\n\t */\n\t@Prop({ attribute: 'is-expanded' }) readonly isExpanded: boolean = false\n\t/**\n\t * Used to change the HMTL tag in the accordion trigger for correct semantic structure\n\t */\n\t@Prop({ attribute: 'trigger-tag' }) readonly triggerTag: string = 'h3'\n\n\t/**\n\t * Called when the accordion state changes\n\t */\n\t@Event({ eventName: 'gov-change' }) govChange: EventEmitter<GovAccordionItemChangeEvent>\n\n\t@Watch('label')\n\tvalidateLabel(newValue: string): void {\n\t\tif (!newValue) {\n\t\t\tgovErrorLog(`[${AccordionItemClass.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(`[${AccordionItemClass.root}]: Tag ${newValue} is not allowed.`)\n\t\t\t}\n\t\t}\n\t}\n\n\t@Watch('size')\n\tvalidateSize(newValue: string): void {\n\t\tvalidateProp(AccordionSizes, newValue, AccordionItemClass.root)\n\t}\n\n\t@Watch('variant')\n\tvalidateVariant(newValue: string): void {\n\t\tvalidateProp(AccordionVariants, newValue, AccordionItemClass.root)\n\t}\n\n\tprivate emmitChange(): void {\n\t\tthis.govChange.emit({ open: this.isExpandedState, element: this.host })\n\t}\n\n\tcomponentWillLoad(): void {\n\t\tthis.isExpandedState = this.isExpanded\n\t\tthis.validateSize(this.size)\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 { isExpandedState, label } = this\n\t\tconst TriggerTag = this.triggerTag\n\n\t\treturn (\n\t\t\t<Host class={this.h.classes(AccordionItemClass.root)} role=\"listitem\">\n\t\t\t\t<button\n\t\t\t\t\tid={triggerId}\n\t\t\t\t\tclass={AccordionItemClass.header}\n\t\t\t\t\taria-expanded={booleanString(isExpandedState)}\n\t\t\t\t\taria-controls={contentId}\n\t\t\t\t\tdisabled={this.disabled}\n\t\t\t\t\taria-disabled={toBoolAttrIfDefined(this.disabled)}\n\t\t\t\t\tonClick={() => this.toggle()}\n\t\t\t\t>\n\t\t\t\t\t<TriggerTag class={AccordionItemClass.title}>\n\t\t\t\t\t\t{this.h.hasSlot('icon') && (\n\t\t\t\t\t\t\t<span class={AccordionItemClass.icon}>\n\t\t\t\t\t\t\t\t<slot name=\"icon\" />\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t<span class={AccordionItemClass.name}>\n\t\t\t\t\t\t\t<span class={AccordionItemClass.label}>{label}</span>\n\t\t\t\t\t\t\t{this.annotation && <span class={AccordionItemClass.annot}>{this.annotation}</span>}\n\t\t\t\t\t\t</span>\n\n\t\t\t\t\t\t{this.h.hasSlot('suffix') && (\n\t\t\t\t\t\t\t<span class={AccordionItemClass.suffix}>\n\t\t\t\t\t\t\t\t<slot name=\"suffix\" />\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</TriggerTag>\n\n\t\t\t\t\t<gov-icon class={AccordionItemClass.arrow} name=\"arrow-down\"></gov-icon>\n\t\t\t\t</button>\n\t\t\t\t<div\n\t\t\t\t\tclass={AccordionItemClass.content}\n\t\t\t\t\tid={contentId}\n\t\t\t\t\taria-hidden={booleanString(!isExpandedState)}\n\t\t\t\t\thidden={!isExpandedState}\n\t\t\t\t\taria-labelledby={triggerId}\n\t\t\t\t>\n\t\t\t\t\t<slot />\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t)\n\t}\n\n\t/**\n\t * Opening the accordion\n\t */\n\t@Method()\n\tasync open(): Promise<void> {\n\t\tthis.isExpandedState = true\n\t\tthis.emmitChange()\n\t}\n\n\t/**\n\t * Closing the accordion\n\t */\n\t@Method()\n\tasync close(): Promise<void> {\n\t\tthis.isExpandedState = false\n\t\tthis.emmitChange()\n\t}\n\n\t/**\n\t * Accordion switch\n\t */\n\t@Method()\n\tasync toggle(): Promise<void> {\n\t\tthis.isExpandedState = !this.isExpandedState\n\t\tthis.emmitChange()\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}

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

@@ -1,13 +1,13 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-00e9a0d5.js';
-import { v as validateProp } from './props-cb992af5.js';
-import { A as AccordionItemClass, a as AccordionClass, S as Sizes$1 } from './constants-4d4cc5e1.js';
-import { S as Sizes } from './sizes-6c5943b4.js';
-import { V as Variants } from './variants-b5641e3d.js';
-import { v as validateWcagLabel } from './wcag-af732bfe.js';
-import { c as canValidateWcagOnRender } from './win-cb090c11.js';
-import { d as delay } from './utils-3a968bb9.js';
+import { v as validateProp } from './props-789f7529.js';
+import { A as AccordionItemClass, a as AccordionClass, b as AccordionSizes } from './constants-14a7ba8e.js';
+import { V as Variants } from './variants-2b936d58.js';
+import { v as validateWcagLabel } from './wcag-3792d4bb.js';
+import { c as canValidateWcagOnRender } from './win-9c8460bb.js';
+import { d as delay } from './utils-c057a3fa.js';
 import { g as govHost } from './template-10332292.js';
 import './gov.log-af905420.js';
+import './sizes-6c5943b4.js';
 import './string.utils-f268fc6b.js';
 
 const govAccordionCss = ".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)}}.gov-accordion{position:relative;display:block;width:100%}";
@@ -16,14 +16,14 @@ const GovAccordion = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.govChange = createEvent(this, "gov-change", 7);
-    this.size = Sizes._M;
-    this.variant = Variants.PRIMARY;
+    this.size = 'm';
+    this.variant = 'primary';
     this.wcagLabel = undefined;
     this.wcagLabelledBy = undefined;
     this.h = govHost(this.host);
   }
   validateSize(newValue) {
-    validateProp(Sizes$1, newValue, AccordionClass.root);
+    validateProp(AccordionSizes, newValue, AccordionClass.root);
   }
   validateVariant(newValue) {
     validateProp(Variants, newValue, AccordionClass.root);

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

@@ -1 +1 @@
-{"file":"gov-accordion.entry.js","mappings":";;;;;;;;;;;;AAAA,MAAM,eAAe,GAAG,iPAAiP;;MCiB5P,YAAY;EAGxB;;;gBAQkCA,KAAW,CAAC,EAAE;mBAIR,QAAQ,CAAC,OAAO;;;IAXvD,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;GAC3B;EAyBD,YAAY,CAAC,QAAgB;IAC5B,YAAY,CAACC,OAAK,EAAE,QAAQ,EAAE,cAAc,CAAC,IAAI,CAAC,CAAA;GAClD;EAGD,eAAe,CAAC,QAAgB;IAC/B,YAAY,CAAC,QAAQ,EAAE,QAAQ,EAAE,cAAc,CAAC,IAAI,CAAC,CAAA;GACrD;EAED,iBAAiB;IAChB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;IAC5B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;GAClC;EAED,gBAAgB;IACf,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,KAAkC;MAC9F,KAAK,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,CAAA;MACrC,KAAK,CAAC,YAAY,CAAC,SAAS,EAAE,IAAI,CAAC,OAAO,CAAC,CAAA;MAC3C,KAAK,CAAC,gBAAgB,CAAC,YAAY,EAAE,CAAC,CAA2D;QAChG,CAAC,CAAC,eAAe,EAAE,CAAA;QACnB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAA;OAC7B,CAAC,CAAA;KACF,CAAC,CAAA;GACF;EAED,MAAM,kBAAkB;IACvB,IAAI,uBAAuB,EAAE,EAAE;MAC9B,MAAM,KAAK,CAAC,GAAG,CAAC,CAAA;MAChB,MAAM,IAAI,CAAC,YAAY,EAAE,CAAA;KACzB;GACD;EAED,MAAM;IACL,QACC,EAAC,IAAI,IAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,IACvF,WAAK,IAAI,EAAE,MAAM,iBAAe,IAAI,CAAC,SAAS,sBAAoB,IAAI,CAAC,cAAc,IACpF,eAAQ,CACH,CACA,EACP;GACD;;;;EAMD,MAAM,YAAY;IACjB,iBAAiB,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,cAAc,EAAE,cAAc,CAAC,IAAI,CAAC,CAAA;GAC3E;;;;;;;;;;;","names":["GlobalSizes","Sizes"],"sources":["../../../packages/core/src/components/gov-accordion/gov-accordion.scss?tag=gov-accordion","../../../packages/core/src/components/gov-accordion/gov-accordion.tsx"],"sourcesContent":["/*\n *   Accordion\n */\n\n$class: \".gov-accordion\";\n\n#{$class} {\n\t@include base();\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, Watch } from '@stencil/core'\nimport { validateProp } from '../../helpers/Validate/props'\nimport { AccordionClass, Sizes, SizeType, AccordionItemClass, VariantType } from './constants'\nimport { Sizes as GlobalSizes } from '../../core/constants/sizes'\nimport { GovAccordionItemCustomEvent } from '../../components'\nimport { GovAccordionItemChangeEvent } from './gov-accordion-item.d'\nimport { Variants } from '../../core/constants/variants'\nimport { validateWcagLabel } from '../../helpers/Validate/wcag'\nimport { canValidateWcagOnRender } from '../../helpers/Dom/win'\nimport { delay } from '../../utils/utils'\nimport { govHost } from \"../../helpers/Dom/template\"\nimport { GovHost } from \"../../helpers/Dom/template.d\"\n\n@Component({\n\ttag: 'gov-accordion',\n\tstyleUrl: 'gov-accordion.scss',\n})\nexport class GovAccordion {\n\tprivate h: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\n\t@Element() readonly host: HTMLGovAccordionElement\n\t/**\n\t * Accordion’s size.\n\t */\n\t@Prop() readonly size: SizeType = GlobalSizes._M\n\t/**\n\t * Style variation of the button.\n\t */\n\t@Prop() readonly variant: VariantType = Variants.PRIMARY\n\t/**\n\t * Adds accessible label for the accordion that is only shown for screen readers.\n\t */\n\t@Prop({ attribute: 'wcag-label' }) readonly wcagLabel: string\n\t/**\n\t * String of id's that indicate alternative labels elements\n\t */\n\t@Prop({ attribute: 'wcag-labelled-by' }) readonly wcagLabelledBy: string\n\t/**\n\t * Called when the accordion state changes\n\t */\n\t@Event({ eventName: 'gov-change' }) govChange: EventEmitter<GovAccordionItemChangeEvent>\n\n\t@Watch('size')\n\tvalidateSize(newValue: string): void {\n\t\tvalidateProp(Sizes, newValue, AccordionClass.root)\n\t}\n\n\t@Watch('variant')\n\tvalidateVariant(newValue: string): void {\n\t\tvalidateProp(Variants, newValue, AccordionClass.root)\n\t}\n\n\tcomponentWillLoad(): void {\n\t\tthis.validateSize(this.size)\n\t\tthis.validateVariant(this.variant)\n\t}\n\n\tcomponentDidLoad() {\n\t\tthis.host.querySelectorAll(AccordionItemClass.root).forEach((child: HTMLGovAccordionItemElement) => {\n\t\t\tchild.setAttribute('size', this.size)\n\t\t\tchild.setAttribute('variant', this.variant)\n\t\t\tchild.addEventListener('gov-change', (e: GovAccordionItemCustomEvent<GovAccordionItemChangeEvent>) => {\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\tasync componentDidRender() {\n\t\tif (canValidateWcagOnRender()) {\n\t\t\tawait delay(500)\n\t\t\tawait this.validateWcag()\n\t\t}\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={this.h.classes(AccordionClass.root)} size={this.size} variant={this.variant}>\n\t\t\t\t<div role={'list'} arial-label={this.wcagLabel} arial-labelledby={this.wcagLabelledBy}>\n\t\t\t\t\t<slot />\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t)\n\t}\n\n\t/**\n\t * Validate the WCAG attributes of the component\n\t */\n\t@Method()\n\tasync validateWcag(): Promise<void> {\n\t\tvalidateWcagLabel(this.wcagLabel, this.wcagLabelledBy, AccordionClass.root)\n\t}\n}\n"],"version":3}
+{"file":"gov-accordion.entry.js","mappings":";;;;;;;;;;;;AAAA,MAAM,eAAe,GAAG,iPAAiP;;MCgB5P,YAAY;EAGxB;;;gBAQ4C,GAAG;mBAIG,SAAS;;;IAX1D,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;GAC3B;EAyBD,YAAY,CAAC,QAAgB;IAC5B,YAAY,CAAC,cAAc,EAAE,QAAQ,EAAE,cAAc,CAAC,IAAI,CAAC,CAAA;GAC3D;EAGD,eAAe,CAAC,QAAgB;IAC/B,YAAY,CAAC,QAAQ,EAAE,QAAQ,EAAE,cAAc,CAAC,IAAI,CAAC,CAAA;GACrD;EAED,iBAAiB;IAChB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;IAC5B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;GAClC;EAED,gBAAgB;IACf,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,KAAkC;MAC9F,KAAK,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,CAAA;MACrC,KAAK,CAAC,YAAY,CAAC,SAAS,EAAE,IAAI,CAAC,OAAO,CAAC,CAAA;MAC3C,KAAK,CAAC,gBAAgB,CAAC,YAAY,EAAE,CAAC,CAA2D;QAChG,CAAC,CAAC,eAAe,EAAE,CAAA;QACnB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAA;OAC7B,CAAC,CAAA;KACF,CAAC,CAAA;GACF;EAED,MAAM,kBAAkB;IACvB,IAAI,uBAAuB,EAAE,EAAE;MAC9B,MAAM,KAAK,CAAC,GAAG,CAAC,CAAA;MAChB,MAAM,IAAI,CAAC,YAAY,EAAE,CAAA;KACzB;GACD;EAED,MAAM;IACL,QACC,EAAC,IAAI,IAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,IACvF,WAAK,IAAI,EAAE,MAAM,iBAAe,IAAI,CAAC,SAAS,sBAAoB,IAAI,CAAC,cAAc,IACpF,eAAQ,CACH,CACA,EACP;GACD;;;;EAMD,MAAM,YAAY;IACjB,iBAAiB,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,cAAc,EAAE,cAAc,CAAC,IAAI,CAAC,CAAA;GAC3E;;;;;;;;;;;","names":[],"sources":["../../../packages/core/src/components/gov-accordion/gov-accordion.scss?tag=gov-accordion","../../../packages/core/src/components/gov-accordion/gov-accordion.tsx"],"sourcesContent":["/*\n *   Accordion\n */\n\n$class: \".gov-accordion\";\n\n#{$class} {\n\t@include base();\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, Watch } from '@stencil/core'\nimport { validateProp } from '../../helpers/Validate/props'\nimport { AccordionClass, AccordionSizes, AccordionSizeType, AccordionItemClass, AccordionVariantType } from './constants'\nimport { GovAccordionItemCustomEvent } from '../../components'\nimport { GovAccordionItemChangeEvent } from './gov-accordion-item.d'\nimport { Variants } from '../../core/constants/variants'\nimport { validateWcagLabel } from '../../helpers/Validate/wcag'\nimport { canValidateWcagOnRender } from '../../helpers/Dom/win'\nimport { delay } from '../../utils/utils'\nimport { govHost } from '../../helpers/Dom/template'\nimport { GovHost } from '../../helpers/Dom/template.types'\n\n@Component({\n\ttag: 'gov-accordion',\n\tstyleUrl: 'gov-accordion.scss',\n})\nexport class GovAccordion {\n\tprivate h: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\n\t@Element() readonly host: HTMLGovAccordionElement\n\t/**\n\t * Accordion’s size.\n\t */\n\t@Prop() readonly size?: AccordionSizeType = 'm'\n\t/**\n\t * Style variation of the button.\n\t */\n\t@Prop() readonly variant?: AccordionVariantType = 'primary'\n\t/**\n\t * Adds accessible label for the accordion that is only shown for screen readers.\n\t */\n\t@Prop({ attribute: 'wcag-label' }) readonly wcagLabel: string\n\t/**\n\t * String of id's that indicate alternative labels elements\n\t */\n\t@Prop({ attribute: 'wcag-labelled-by' }) readonly wcagLabelledBy: string\n\t/**\n\t * Called when the accordion state changes\n\t */\n\t@Event({ eventName: 'gov-change' }) govChange: EventEmitter<GovAccordionItemChangeEvent>\n\n\t@Watch('size')\n\tvalidateSize(newValue: string): void {\n\t\tvalidateProp(AccordionSizes, newValue, AccordionClass.root)\n\t}\n\n\t@Watch('variant')\n\tvalidateVariant(newValue: string): void {\n\t\tvalidateProp(Variants, newValue, AccordionClass.root)\n\t}\n\n\tcomponentWillLoad(): void {\n\t\tthis.validateSize(this.size)\n\t\tthis.validateVariant(this.variant)\n\t}\n\n\tcomponentDidLoad() {\n\t\tthis.host.querySelectorAll(AccordionItemClass.root).forEach((child: HTMLGovAccordionItemElement) => {\n\t\t\tchild.setAttribute('size', this.size)\n\t\t\tchild.setAttribute('variant', this.variant)\n\t\t\tchild.addEventListener('gov-change', (e: GovAccordionItemCustomEvent<GovAccordionItemChangeEvent>) => {\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\tasync componentDidRender() {\n\t\tif (canValidateWcagOnRender()) {\n\t\t\tawait delay(500)\n\t\t\tawait this.validateWcag()\n\t\t}\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={this.h.classes(AccordionClass.root)} size={this.size} variant={this.variant}>\n\t\t\t\t<div role={'list'} arial-label={this.wcagLabel} arial-labelledby={this.wcagLabelledBy}>\n\t\t\t\t\t<slot />\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t)\n\t}\n\n\t/**\n\t * Validate the WCAG attributes of the component\n\t */\n\t@Method()\n\tasync validateWcag(): Promise<void> {\n\t\tvalidateWcagLabel(this.wcagLabel, this.wcagLabelledBy, AccordionClass.root)\n\t}\n}\n"],"version":3}

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

@@ -1,9 +1,11 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-00e9a0d5.js';
-import { v as validateProp } from './props-cb992af5.js';
-import { V as Variants } from './variants-b5641e3d.js';
+import { v as validateProp } from './props-789f7529.js';
+import { V as Variants } from './variants-2b936d58.js';
+import { p as pick } from './utils-c057a3fa.js';
 import { g as govHost } from './template-10332292.js';
 import './gov.log-af905420.js';
 
+const AlertVariants = pick(Variants, ['PRIMARY', 'SECONDARY', 'WARNING', 'ERROR', 'SUCCESS']);
 const AlertClass = {
   root: 'gov-alert',
   section: 'gov-alert__section',
@@ -18,14 +20,14 @@ const GovAlert = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.govClose = createEvent(this, "gov-close", 7);
-    this.variant = Variants.PRIMARY;
+    this.variant = 'primary';
     this.inverse = false;
     this.wcagCloseLabel = undefined;
     this.closable = false;
     this.h = govHost(this.host);
   }
   validateVariant(newValue) {
-    validateProp(Variants, newValue, AlertClass.root);
+    validateProp(AlertVariants, newValue, AlertClass.root);
   }
   componentWillLoad() {
     this.validateVariant(this.variant);

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

@@ -1 +1 @@
-{"file":"gov-alert.entry.js","mappings":";;;;;;AAYO,MAAM,UAAU,GAAG;EACzB,IAAI,EAAE,WAAW;EACjB,OAAO,EAAE,oBAAoB;EAC7B,IAAI,EAAE,iBAAiB;EACvB,OAAO,EAAE,oBAAoB;EAC7B,KAAK,EAAE,kBAAkB;CACzB;;AClBD,MAAM,WAAW,GAAG,y4NAAy4N;;MCYh5N,QAAQ;EAGpB;;;mBASwC,QAAQ,CAAC,OAAO;mBAIpB,KAAK;;oBAYH,KAAK;IAxB1C,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;GAC3B;EA0BD,eAAe,CAAC,QAAgB;IAC/B,YAAY,CAAC,QAAQ,EAAE,QAAQ,EAAE,UAAU,CAAC,IAAI,CAAC,CAAA;GACjD;EAED,iBAAiB;IAChB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;GAClC;EAED,MAAM;IACL,IAAI,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAA;IAC3B,IAAI,OAAO,GAAG,IAAI,CAAC,OAAO,GAAG,WAAW,GAAG,IAAI,CAAC,OAAO,CAAA;IAEvD,IAAI,IAAI,CAAC,OAAO,IAAI,SAAS,EAAE;MAC9B,OAAO,GAAG,KAAK,CAAC;MAChB,OAAO,GAAG,WAAW,CAAC;KACtB;IAED,MAAM,WAAW,IAChB,WAAK,KAAK,EAAE,UAAU,CAAC,KAAK,IAC3B,kBACC,IAAI,EAAC,GAAG,gBACI,IAAI,CAAC,cAAc,EAC/B,IAAI,EAAC,MAAM,EACX,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,CAAC,CAAe,KAAK,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,IAEnD,gBAAU,IAAI,EAAC,OAAO,GAAY,CACtB,CACR,CACN,CAAA;IAED,QACC,EAAC,IAAI,IAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,IAClE,eAAS,KAAK,EAAE,UAAU,CAAC,OAAO,EAAE,IAAI,EAAC,OAAO,IAC9C,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,KACtB,WAAK,KAAK,EAAE,UAAU,CAAC,IAAI,IAC1B,YAAM,IAAI,EAAC,MAAM,GAAG,CACf,CACN,EAED,WAAK,KAAK,EAAE,UAAU,CAAC,OAAO,IAC7B,eAAQ,CACH,CACG,EACT,IAAI,CAAC,QAAQ,IAAI,WAAW,CACvB,EACP;GACD;;;;;;;;;;","names":[],"sources":["../../../packages/core/src/components/gov-alert/constants.ts","../../../packages/core/src/components/gov-alert/gov-alert.scss?tag=gov-alert","../../../packages/core/src/components/gov-alert/gov-alert.tsx"],"sourcesContent":["import { Variants as GlobalVariants } from '../../core/constants/variants'\n\nexport const Variants = [\n\tundefined,\n\tGlobalVariants.PRIMARY,\n\tGlobalVariants.SECONDARY,\n\tGlobalVariants.WARNING,\n\tGlobalVariants.ERROR,\n\tGlobalVariants.SUCCESS,\n] as const\nexport type VariantType = (typeof Variants)[number]\n\nexport const AlertClass = {\n\troot: 'gov-alert',\n\tsection: 'gov-alert__section',\n\ticon: 'gov-alert__icon',\n\tcontent: 'gov-alert__content',\n\tclose: 'gov-alert__close',\n}\n","/*\n *   Alert\n */\n\n$class: \".gov-alert\";\n\n#{$class} {\n\t@include base();\n\t&__section {\n\t\t@include container();\n\t\tdisplay: flex;\n\t\tgap: rem-calc(16);\n\t\tpadding-top: rem-calc(16);\n\t\tpadding-bottom: rem-calc(16);\n\t}\n\t&__icon {\n\t\tflex: 0 0 auto;\n\t\t& > * {\n\t\t\twidth: rem-calc(20);\n\t\t\theight: rem-calc(20);\n\t\t}\n\t}\n\t&__content {\n\t\t@include reset-last-margin();\n\t\tpadding-right: rem-calc(52);\n\t\tp {\n\t\t\t@include typography($font-size-m);\n\t\t}\n\t\ta {\n\t\t\tcolor: inherit;\n\t\t\t@include hover() {\n\t\t\t\tcolor: inherit;\n\t\t\t}\n\t\t}\n\t}\n\t&__close {\n\t\tposition: absolute;\n\t\ttop: rem-calc(10);\n\t\tright: rem-calc(16);\n\t}\n\n\t// VARIANTS\n\t@each $variant, $definitions in $alert-variants {\n\t\t&[variant=\"#{$variant}\"] {\n\t\t\tbackground-color: get(\"bg-color\", $definitions);\n\t\t\t#{$class} {\n\t\t\t\t&__icon {\n\t\t\t\t\tcolor: get(\"icon-color\", $definitions);\n\t\t\t\t}\n\t\t\t\t&__content {\n\t\t\t\t\tcolor: get(\"text-color\", $definitions);\n\t\t\t\t}\n\t\t\t}\n\t\t\t@if deep-map-check($definitions, \"border\") {\n\t\t\t\tborder-bottom: $alert-border;\n\t\t\t}\n\n\t\t\t// STATES\n\t\t\t@include parameter(\"inverse\") {\n\t\t\t\tborder-bottom: $alert-border;\n\t\t\t\tbackground-color: $alert-inverse-bg;\n\t\t\t\t#{$class} {\n\t\t\t\t\t&__icon {\n\t\t\t\t\t\tcolor: get(\"bg-color\", $definitions);\n\t\t\t\t\t}\n\t\t\t\t\t&__content {\n\t\t\t\t\t\tcolor: $alert-inverse-color;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t// MQ\n\t@include mq($from: xl) {\n\t\t&__content {\n\t\t\tpadding-right: rem-calc(32);\n\t\t}\n\t}\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Prop, Watch } from '@stencil/core'\nimport { validateProp } from '../../helpers/Validate/props'\nimport { AlertClass } from './constants'\nimport { govHost } from '../../helpers/Dom/template'\nimport { GovHost } from '../../helpers/Dom/template.d'\nimport { Variants } from '../../core/constants/variants'\nimport { VariantType } from './constants'\n\n@Component({\n\ttag: 'gov-alert',\n\tstyleUrl: 'gov-alert.scss',\n})\nexport class GovAlert {\n\tprivate h: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\n\t@Element() host: HTMLGovAlertElement\n\n\t/**\n\t * Style variation of the button.\n\t */\n\t@Prop() readonly variant: VariantType = Variants.PRIMARY\n\t/**\n\t * Determide if component should have inversed colors to be used on dark background\n\t */\n\t@Prop() readonly inverse: boolean = false\n\t/**\n\t * Aria label for the closing button. It is mandatory if the alert is closable\n\t */\n\t@Prop({ attribute: 'wcag-close-label' }) readonly wcagCloseLabel: string\n\t/**\n\t * Called when the close button is clicked\n\t */\n\t@Event({ eventName: 'gov-close' }) govClose: EventEmitter<PointerEvent>\n\t/**\n\t * Displays the option to close the alert\n\t */\n\t@Prop() readonly closable?: boolean = false\n\n\t@Watch('variant')\n\tvalidateVariant(newValue: string): void {\n\t\tvalidateProp(Variants, newValue, AlertClass.root)\n\t}\n\n\tcomponentWillLoad(): void {\n\t\tthis.validateVariant(this.variant)\n\t}\n\n\trender() {\n\t\tlet inverse = !this.inverse\n\t\tlet variant = this.inverse ? 'secondary' : this.variant\n\n\t\tif (this.variant == 'warning') {\n\t\t\tinverse = false;\n\t\t\tvariant = 'secondary';\n\t\t}\n\n\t\tconst closeButton = (\n\t\t\t<div class={AlertClass.close}>\n\t\t\t\t<gov-button\n\t\t\t\t\tsize=\"s\"\n\t\t\t\t\taria-label={this.wcagCloseLabel}\n\t\t\t\t\ttype=\"base\"\n\t\t\t\t\tvariant={variant}\n\t\t\t\t\tinverse={inverse}\n\t\t\t\t\tonClick={(e: PointerEvent) => this.govClose.emit(e)}\n\t\t\t\t>\n\t\t\t\t\t<gov-icon name=\"cross\"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t</div>\n\t\t)\n\n\t\treturn (\n\t\t\t<Host class={this.h.classes(AlertClass.root)} variant={this.variant}>\n\t\t\t\t<section class={AlertClass.section} role=\"alert\">\n\t\t\t\t\t{this.h.hasSlot('icon') && (\n\t\t\t\t\t\t<div class={AlertClass.icon}>\n\t\t\t\t\t\t\t<slot name=\"icon\" />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\n\t\t\t\t\t<div class={AlertClass.content}>\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\t\t\t\t{this.closable && closeButton}\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"],"version":3}
+{"file":"gov-alert.entry.js","mappings":";;;;;;;AAIO,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC,SAAS,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,CAAC,CAAC,CAAA;AAG7F,MAAM,UAAU,GAAG;EACzB,IAAI,EAAE,WAAW;EACjB,OAAO,EAAE,oBAAoB;EAC7B,IAAI,EAAE,iBAAiB;EACvB,OAAO,EAAE,oBAAoB;EAC7B,KAAK,EAAE,kBAAkB;CACzB;;ACbD,MAAM,WAAW,GAAG,y4NAAy4N;;MCUh5N,QAAQ;EAGpB;;;mBASwC,SAAS;mBAIb,KAAK;;oBAYH,KAAK;IAxB1C,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;GAC3B;EA0BD,eAAe,CAAC,QAAgB;IAC/B,YAAY,CAAC,aAAa,EAAE,QAAQ,EAAE,UAAU,CAAC,IAAI,CAAC,CAAA;GACtD;EAED,iBAAiB;IAChB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;GAClC;EAED,MAAM;IACL,IAAI,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAA;IAC3B,IAAI,OAAO,GAAG,IAAI,CAAC,OAAO,GAAG,WAAW,GAAG,IAAI,CAAC,OAAO,CAAA;IAEvD,IAAI,IAAI,CAAC,OAAO,IAAI,SAAS,EAAE;MAC9B,OAAO,GAAG,KAAK,CAAA;MACf,OAAO,GAAG,WAAW,CAAA;KACrB;IAED,MAAM,WAAW,IAChB,WAAK,KAAK,EAAE,UAAU,CAAC,KAAK,IAC3B,kBACC,IAAI,EAAC,GAAG,gBACI,IAAI,CAAC,cAAc,EAC/B,IAAI,EAAC,MAAM,EACX,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,CAAC,CAAe,KAAK,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,IAEnD,gBAAU,IAAI,EAAC,OAAO,GAAY,CACtB,CACR,CACN,CAAA;IAED,QACC,EAAC,IAAI,IAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,IAClE,eAAS,KAAK,EAAE,UAAU,CAAC,OAAO,EAAE,IAAI,EAAC,OAAO,IAC9C,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,KACtB,WAAK,KAAK,EAAE,UAAU,CAAC,IAAI,IAC1B,YAAM,IAAI,EAAC,MAAM,GAAG,CACf,CACN,EAED,WAAK,KAAK,EAAE,UAAU,CAAC,OAAO,IAC7B,eAAQ,CACH,CACG,EACT,IAAI,CAAC,QAAQ,IAAI,WAAW,CACvB,EACP;GACD;;;;;;;;;;","names":[],"sources":["../../../packages/core/src/components/gov-alert/constants.ts","../../../packages/core/src/components/gov-alert/gov-alert.scss?tag=gov-alert","../../../packages/core/src/components/gov-alert/gov-alert.tsx"],"sourcesContent":["import { Variants } from '../../core/constants/variants'\nimport { pick } from '../../utils/utils'\nimport { ValueOf } from '../../types/interfaces'\n\nexport const AlertVariants = pick(Variants, ['PRIMARY', 'SECONDARY', 'WARNING', 'ERROR', 'SUCCESS'])\nexport type VariantType = `${ValueOf<typeof AlertVariants>}`\n\nexport const AlertClass = {\n\troot: 'gov-alert',\n\tsection: 'gov-alert__section',\n\ticon: 'gov-alert__icon',\n\tcontent: 'gov-alert__content',\n\tclose: 'gov-alert__close',\n}\n","/*\n *   Alert\n */\n\n$class: \".gov-alert\";\n\n#{$class} {\n\t@include base();\n\t&__section {\n\t\t@include container();\n\t\tdisplay: flex;\n\t\tgap: rem-calc(16);\n\t\tpadding-top: rem-calc(16);\n\t\tpadding-bottom: rem-calc(16);\n\t}\n\t&__icon {\n\t\tflex: 0 0 auto;\n\t\t& > * {\n\t\t\twidth: rem-calc(20);\n\t\t\theight: rem-calc(20);\n\t\t}\n\t}\n\t&__content {\n\t\t@include reset-last-margin();\n\t\tpadding-right: rem-calc(52);\n\t\tp {\n\t\t\t@include typography($font-size-m);\n\t\t}\n\t\ta {\n\t\t\tcolor: inherit;\n\t\t\t@include hover() {\n\t\t\t\tcolor: inherit;\n\t\t\t}\n\t\t}\n\t}\n\t&__close {\n\t\tposition: absolute;\n\t\ttop: rem-calc(10);\n\t\tright: rem-calc(16);\n\t}\n\n\t// VARIANTS\n\t@each $variant, $definitions in $alert-variants {\n\t\t&[variant=\"#{$variant}\"] {\n\t\t\tbackground-color: get(\"bg-color\", $definitions);\n\t\t\t#{$class} {\n\t\t\t\t&__icon {\n\t\t\t\t\tcolor: get(\"icon-color\", $definitions);\n\t\t\t\t}\n\t\t\t\t&__content {\n\t\t\t\t\tcolor: get(\"text-color\", $definitions);\n\t\t\t\t}\n\t\t\t}\n\t\t\t@if deep-map-check($definitions, \"border\") {\n\t\t\t\tborder-bottom: $alert-border;\n\t\t\t}\n\n\t\t\t// STATES\n\t\t\t@include parameter(\"inverse\") {\n\t\t\t\tborder-bottom: $alert-border;\n\t\t\t\tbackground-color: $alert-inverse-bg;\n\t\t\t\t#{$class} {\n\t\t\t\t\t&__icon {\n\t\t\t\t\t\tcolor: get(\"bg-color\", $definitions);\n\t\t\t\t\t}\n\t\t\t\t\t&__content {\n\t\t\t\t\t\tcolor: $alert-inverse-color;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t// MQ\n\t@include mq($from: xl) {\n\t\t&__content {\n\t\t\tpadding-right: rem-calc(32);\n\t\t}\n\t}\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Prop, Watch } from '@stencil/core'\nimport { validateProp } from '../../helpers/Validate/props'\nimport { AlertClass, AlertVariants, VariantType } from './constants'\nimport { govHost } from '../../helpers/Dom/template'\nimport { GovHost } from '../../helpers/Dom/template.types'\n\n@Component({\n\ttag: 'gov-alert',\n\tstyleUrl: 'gov-alert.scss',\n})\nexport class GovAlert {\n\tprivate h: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\n\t@Element() host: HTMLGovAlertElement\n\n\t/**\n\t * Style variation of the button.\n\t */\n\t@Prop() readonly variant: VariantType = 'primary'\n\t/**\n\t * Determide if component should have inversed colors to be used on dark background\n\t */\n\t@Prop() readonly inverse: boolean = false\n\t/**\n\t * Aria label for the closing button. It is mandatory if the alert is closable\n\t */\n\t@Prop({ attribute: 'wcag-close-label' }) readonly wcagCloseLabel: string\n\t/**\n\t * Called when the close button is clicked\n\t */\n\t@Event({ eventName: 'gov-close' }) govClose: EventEmitter<PointerEvent>\n\t/**\n\t * Displays the option to close the alert\n\t */\n\t@Prop() readonly closable?: boolean = false\n\n\t@Watch('variant')\n\tvalidateVariant(newValue: string): void {\n\t\tvalidateProp(AlertVariants, newValue, AlertClass.root)\n\t}\n\n\tcomponentWillLoad(): void {\n\t\tthis.validateVariant(this.variant)\n\t}\n\n\trender() {\n\t\tlet inverse = !this.inverse\n\t\tlet variant = this.inverse ? 'secondary' : this.variant\n\n\t\tif (this.variant == 'warning') {\n\t\t\tinverse = false\n\t\t\tvariant = 'secondary'\n\t\t}\n\n\t\tconst closeButton = (\n\t\t\t<div class={AlertClass.close}>\n\t\t\t\t<gov-button\n\t\t\t\t\tsize=\"s\"\n\t\t\t\t\taria-label={this.wcagCloseLabel}\n\t\t\t\t\ttype=\"base\"\n\t\t\t\t\tvariant={variant}\n\t\t\t\t\tinverse={inverse}\n\t\t\t\t\tonClick={(e: PointerEvent) => this.govClose.emit(e)}\n\t\t\t\t>\n\t\t\t\t\t<gov-icon name=\"cross\"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t</div>\n\t\t)\n\n\t\treturn (\n\t\t\t<Host class={this.h.classes(AlertClass.root)} variant={this.variant}>\n\t\t\t\t<section class={AlertClass.section} role=\"alert\">\n\t\t\t\t\t{this.h.hasSlot('icon') && (\n\t\t\t\t\t\t<div class={AlertClass.icon}>\n\t\t\t\t\t\t\t<slot name=\"icon\" />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\n\t\t\t\t\t<div class={AlertClass.content}>\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\t\t\t\t{this.closable && closeButton}\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"],"version":3}

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

@@ -5615,6 +5615,7 @@ class FormsPage extends HTMLElement {
 				<gov-form-label size="s" slot="top">Label of input</gov-form-label>
 				<gov-form-group>
 					<gov-form-input id="kapr" name="test-me" placeholder="Placeholder">
+						<gov-icon slot="right-icon" name="info"></gov-icon>
 					</gov-form-input>
 				</gov-form-group>
 			</gov-form-control>
@@ -5749,7 +5750,6 @@ class FormsPage extends HTMLElement {
 					</gov-form-switch>
 				</gov-form-group>
 			</gov-form-control>
-			
 			<gov-form-control size="l">
 				<gov-form-group>
 					<gov-form-switch name="test-me" value="me" checked>
@@ -6115,55 +6115,85 @@ class LayoutPage extends HTMLElement {
 		<h2>Layout</h2>
 
 		<gov-container>
-			<gov-layout>
-				<gov-layout-content>
-					<p><b>Content</b> Ut sollicitudin risus sit amet placerat fermentum. Sed libero mauris, maximus cursus magna tincidunt, efficitur congue enim. Suspendisse potenti. Sed ac eleifend leo. Nullam a sapien in diam semper faucibus sit amet vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu faucibus mi. Morbi leo ipsum, tempus vel vulputate non, varius et lectus. Donec justo lacus, congue hendrerit felis sit amet, commodo lobortis neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla vulputate urna sapien. Proin imperdiet rhoncus dictum. Pellentesque tempor ultrices tortor, ac mollis lorem mollis non. Phasellus sit amet maximus ex, id scelerisque nulla. Etiam eu orci a nulla semper maximus et at quam.</p>
-				</gov-layout-content>
-				<gov-layout-aside position="right">
-					<p><b>Aside</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla malesuada ut urna sit amet egestas. Ut hendrerit tellus non purus porta, sit amet convallis lacus pellentesque. Sed ultricies metus in tempor viverra. Sed vehicula libero ipsum, non fringilla nulla dapibus ac. Etiam a feugiat mauris. Aenean ultrices at nisi nec dapibus. In hac habitasse platea dictumst. Pellentesque sit amet aliquet nibh.</p>
-				</gov-layout-aside>
+			<gov-layout type="stretch">
+				<gov-layout-column>
+					<p><b>Stretch</b> Ut sollicitudin risus sit amet placerat fermentum. Sed libero mauris, maximus cursus magna tincidunt, efficitur congue enim. Suspendisse potenti. Sed ac eleifend leo. Nullam a sapien in diam semper faucibus sit amet vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu faucibus mi. Morbi leo ipsum, tempus vel vulputate non, varius et lectus. Donec justo lacus, congue hendrerit felis sit amet, commodo lobortis neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla vulputate urna sapien. Proin imperdiet rhoncus dictum. Pellentesque tempor ultrices tortor, ac mollis lorem mollis non. Phasellus sit amet maximus ex, id scelerisque nulla. Etiam eu orci a nulla semper maximus et at quam.</p>
+				</gov-layout-column>
 			</gov-layout>
 			<br>
 			<gov-layout>
-				<gov-layout-aside position="left">
-					<p><b>Aside</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla malesuada ut urna sit amet egestas. Ut hendrerit tellus non purus porta, sit amet convallis lacus pellentesque. Sed ultricies metus in tempor viverra. Sed vehicula libero ipsum, non fringilla nulla dapibus ac. Etiam a feugiat mauris. Aenean ultrices at nisi nec dapibus. In hac habitasse platea dictumst. Pellentesque sit amet aliquet nibh.</p>
-				</gov-layout-aside>
-				<gov-layout-content>
-					<p><b>Content</b> Ut sollicitudin risus sit amet placerat fermentum. Sed libero mauris, maximus cursus magna tincidunt, efficitur congue enim. Suspendisse potenti. Sed ac eleifend leo. Nullam a sapien in diam semper faucibus sit amet vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu faucibus mi. Morbi leo ipsum, tempus vel vulputate non, varius et lectus. Donec justo lacus, congue hendrerit felis sit amet, commodo lobortis neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla vulputate urna sapien. Proin imperdiet rhoncus dictum. Pellentesque tempor ultrices tortor, ac mollis lorem mollis non. Phasellus sit amet maximus ex, id scelerisque nulla. Etiam eu orci a nulla semper maximus et at quam.</p>
-				</gov-layout-content>
+				<gov-layout-column>
+					<p><b>Stretch</b> Ut sollicitudin risus sit amet placerat fermentum. Sed libero mauris, maximus cursus magna tincidunt, efficitur congue enim. Suspendisse potenti. Sed ac eleifend leo. Nullam a sapien in diam semper faucibus sit amet vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu faucibus mi. Morbi leo ipsum, tempus vel vulputate non, varius et lectus. Donec justo lacus, congue hendrerit felis sit amet, commodo lobortis neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla vulputate urna sapien. Proin imperdiet rhoncus dictum. Pellentesque tempor ultrices tortor, ac mollis lorem mollis non. Phasellus sit amet maximus ex, id scelerisque nulla. Etiam eu orci a nulla semper maximus et at quam.</p>
+				</gov-layout-column>
+				<gov-layout-column>
+					<p><b>Stretch</b> Ut sollicitudin risus sit amet placerat fermentum. Sed libero mauris, maximus cursus magna tincidunt, efficitur congue enim. Suspendisse potenti. Sed ac eleifend leo. Nullam a sapien in diam semper faucibus sit amet vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu faucibus mi. Morbi leo ipsum, tempus vel vulputate non, varius et lectus. Donec justo lacus, congue hendrerit felis sit amet, commodo lobortis neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla vulputate urna sapien. Proin imperdiet rhoncus dictum. Pellentesque tempor ultrices tortor, ac mollis lorem mollis non. Phasellus sit amet maximus ex, id scelerisque nulla. Etiam eu orci a nulla semper maximus et at quam.</p>
+				</gov-layout-column>
 			</gov-layout>
 			<br>
 			<gov-layout>
-				<gov-layout-aside position="right">
-					<p><b>Aside</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla malesuada ut urna sit amet egestas. Ut hendrerit tellus non purus porta, sit amet convallis lacus pellentesque. Sed ultricies metus in tempor viverra. Sed vehicula libero ipsum, non fringilla nulla dapibus ac. Etiam a feugiat mauris. Aenean ultrices at nisi nec dapibus. In hac habitasse platea dictumst. Pellentesque sit amet aliquet nibh.</p>
-				</gov-layout-aside>
-				<gov-layout-content>
-					<p><b>Content</b> Ut sollicitudin risus sit amet placerat fermentum. Sed libero mauris, maximus cursus magna tincidunt, efficitur congue enim. Suspendisse potenti. Sed ac eleifend leo. Nullam a sapien in diam semper faucibus sit amet vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu faucibus mi. Morbi leo ipsum, tempus vel vulputate non, varius et lectus. Donec justo lacus, congue hendrerit felis sit amet, commodo lobortis neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla vulputate urna sapien. Proin imperdiet rhoncus dictum. Pellentesque tempor ultrices tortor, ac mollis lorem mollis non. Phasellus sit amet maximus ex, id scelerisque nulla. Etiam eu orci a nulla semper maximus et at quam.</p>
-				</gov-layout-content>
+				<gov-layout-column>
+					<p><b>Stretch</b> Ut sollicitudin risus sit amet placerat fermentum. Sed libero mauris, maximus cursus magna tincidunt, efficitur congue enim. Suspendisse potenti. Sed ac eleifend leo. Nullam a sapien in diam semper faucibus sit amet vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu faucibus mi. Morbi leo ipsum, tempus vel vulputate non, varius et lectus. Donec justo lacus, congue hendrerit felis sit amet, commodo lobortis neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla vulputate urna sapien. Proin imperdiet rhoncus dictum. Pellentesque tempor ultrices tortor, ac mollis lorem mollis non. Phasellus sit amet maximus ex, id scelerisque nulla. Etiam eu orci a nulla semper maximus et at quam.</p>
+				</gov-layout-column>
+				<gov-layout-column>
+					<p><b>Stretch</b> Ut sollicitudin risus sit amet placerat fermentum. Sed libero mauris, maximus cursus magna tincidunt, efficitur congue enim. Suspendisse potenti. Sed ac eleifend leo. Nullam a sapien in diam semper faucibus sit amet vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu faucibus mi. Morbi leo ipsum, tempus vel vulputate non, varius et lectus. Donec justo lacus, congue hendrerit felis sit amet, commodo lobortis neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla vulputate urna sapien. Proin imperdiet rhoncus dictum. Pellentesque tempor ultrices tortor, ac mollis lorem mollis non. Phasellus sit amet maximus ex, id scelerisque nulla. Etiam eu orci a nulla semper maximus et at quam.</p>
+				</gov-layout-column>
+				<gov-layout-column>
+					<p><b>Stretch</b> Ut sollicitudin risus sit amet placerat fermentum. Sed libero mauris, maximus cursus magna tincidunt, efficitur congue enim. Suspendisse potenti. Sed ac eleifend leo. Nullam a sapien in diam semper faucibus sit amet vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu faucibus mi. Morbi leo ipsum, tempus vel vulputate non, varius et lectus. Donec justo lacus, congue hendrerit felis sit amet, commodo lobortis neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla vulputate urna sapien. Proin imperdiet rhoncus dictum. Pellentesque tempor ultrices tortor, ac mollis lorem mollis non. Phasellus sit amet maximus ex, id scelerisque nulla. Etiam eu orci a nulla semper maximus et at quam.</p>
+				</gov-layout-column>
 			</gov-layout>
 			<br>
-			<gov-layout>
-				<gov-layout-content>
-					<p><b>Content</b> Ut sollicitudin risus sit amet placerat fermentum. Sed libero mauris, maximus cursus magna tincidunt, efficitur congue enim. Suspendisse potenti. Sed ac eleifend leo. Nullam a sapien in diam semper faucibus sit amet vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu faucibus mi. Morbi leo ipsum, tempus vel vulputate non, varius et lectus. Donec justo lacus, congue hendrerit felis sit amet, commodo lobortis neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla vulputate urna sapien. Proin imperdiet rhoncus dictum. Pellentesque tempor ultrices tortor, ac mollis lorem mollis non. Phasellus sit amet maximus ex, id scelerisque nulla. Etiam eu orci a nulla semper maximus et at quam.</p>
-				</gov-layout-content>
+			<gov-layout type="aside" variant="right">
+				<gov-layout-column>
+					<p><b>Aside right</b> Ut sollicitudin risus sit amet placerat fermentum. Sed libero mauris, maximus cursus magna tincidunt, efficitur congue enim. Suspendisse potenti. Sed ac eleifend leo. Nullam a sapien in diam semper faucibus sit amet vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu faucibus mi. Morbi leo ipsum, tempus vel vulputate non, varius et lectus. Donec justo lacus, congue hendrerit felis sit amet, commodo lobortis neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla vulputate urna sapien. Proin imperdiet rhoncus dictum. Pellentesque tempor ultrices tortor, ac mollis lorem mollis non. Phasellus sit amet maximus ex, id scelerisque nulla. Etiam eu orci a nulla semper maximus et at quam.</p>
+				</gov-layout-column>
+				<gov-layout-column>
+					<p><b>Aside right</b> Ut sollicitudin risus sit amet placerat fermentum. Sed libero mauris, maximus cursus magna tincidunt, efficitur congue enim. Suspendisse potenti. Sed ac eleifend leo. Nullam a sapien in diam semper faucibus sit amet vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu faucibus mi. Morbi leo ipsum, tempus vel vulputate non, varius et lectus.</p>
+				</gov-layout-column>
 			</gov-layout>
 			<br>
-			<gov-layout>
-				<gov-layout-content align="left">
-					<p><b>Content</b> Ut sollicitudin risus sit amet placerat fermentum. Sed libero mauris, maximus cursus magna tincidunt, efficitur congue enim. Suspendisse potenti. Sed ac eleifend leo. Nullam a sapien in diam semper faucibus sit amet vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu faucibus mi. Morbi leo ipsum, tempus vel vulputate non, varius et lectus. Donec justo lacus, congue hendrerit felis sit amet, commodo lobortis neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla vulputate urna sapien. Proin imperdiet rhoncus dictum. Pellentesque tempor ultrices tortor, ac mollis lorem mollis non. Phasellus sit amet maximus ex, id scelerisque nulla. Etiam eu orci a nulla semper maximus et at quam.</p>
-				</gov-layout-content>
+			<gov-layout type="aside" variant="left">
+				<gov-layout-column>
+					<p><b>Aside left</b> Ut sollicitudin risus sit amet placerat fermentum. Sed libero mauris, maximus cursus magna tincidunt, efficitur congue enim. Suspendisse potenti. Sed ac eleifend leo. Nullam a sapien in diam semper faucibus sit amet vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu faucibus mi. Morbi leo ipsum, tempus vel vulputate non, varius et lectus.</p>
+				</gov-layout-column>
+				<gov-layout-column>
+					<p><b>Aside left</b> Ut sollicitudin risus sit amet placerat fermentum. Sed libero mauris, maximus cursus magna tincidunt, efficitur congue enim. Suspendisse potenti. Sed ac eleifend leo. Nullam a sapien in diam semper faucibus sit amet vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu faucibus mi. Morbi leo ipsum, tempus vel vulputate non, varius et lectus. Donec justo lacus, congue hendrerit felis sit amet, commodo lobortis neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla vulputate urna sapien. Proin imperdiet rhoncus dictum. Pellentesque tempor ultrices tortor, ac mollis lorem mollis non. Phasellus sit amet maximus ex, id scelerisque nulla. Etiam eu orci a nulla semper maximus et at quam.</p>
+				</gov-layout-column>
 			</gov-layout>
 			<br>
-			<gov-layout>
-				<gov-layout-content align="center">
-					<p><b>Content</b> Ut sollicitudin risus sit amet placerat fermentum. Sed libero mauris, maximus cursus magna tincidunt, efficitur congue enim. Suspendisse potenti. Sed ac eleifend leo. Nullam a sapien in diam semper faucibus sit amet vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu faucibus mi. Morbi leo ipsum, tempus vel vulputate non, varius et lectus. Donec justo lacus, congue hendrerit felis sit amet, commodo lobortis neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla vulputate urna sapien. Proin imperdiet rhoncus dictum. Pellentesque tempor ultrices tortor, ac mollis lorem mollis non. Phasellus sit amet maximus ex, id scelerisque nulla. Etiam eu orci a nulla semper maximus et at quam.</p>
-				</gov-layout-content>
+			<gov-layout type="aside" variant="right" inverse>
+				<gov-layout-column>
+					<p><b>Aside right inverse</b> Ut sollicitudin risus sit amet placerat fermentum. Sed libero mauris, maximus cursus magna tincidunt, efficitur congue enim. Suspendisse potenti. Sed ac eleifend leo. Nullam a sapien in diam semper faucibus sit amet vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu faucibus mi. Morbi leo ipsum, tempus vel vulputate non, varius et lectus. Donec justo lacus, congue hendrerit felis sit amet, commodo lobortis neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla vulputate urna sapien. Proin imperdiet rhoncus dictum. Pellentesque tempor ultrices tortor, ac mollis lorem mollis non. Phasellus sit amet maximus ex, id scelerisque nulla. Etiam eu orci a nulla semper maximus et at quam.</p>
+				</gov-layout-column>
+				<gov-layout-column>
+					<p><b>Aside right inverse</b> Ut sollicitudin risus sit amet placerat fermentum. Sed libero mauris, maximus cursus magna tincidunt, efficitur congue enim. Suspendisse potenti. Sed ac eleifend leo. Nullam a sapien in diam semper faucibus sit amet vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu faucibus mi. Morbi leo ipsum, tempus vel vulputate non, varius et lectus.</p>
+				</gov-layout-column>
 			</gov-layout>
 			<br>
-			<gov-layout>
-				<gov-layout-content align="right">
-					<p><b>Content</b> Ut sollicitudin risus sit amet placerat fermentum. Sed libero mauris, maximus cursus magna tincidunt, efficitur congue enim. Suspendisse potenti. Sed ac eleifend leo. Nullam a sapien in diam semper faucibus sit amet vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu faucibus mi. Morbi leo ipsum, tempus vel vulputate non, varius et lectus. Donec justo lacus, congue hendrerit felis sit amet, commodo lobortis neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla vulputate urna sapien. Proin imperdiet rhoncus dictum. Pellentesque tempor ultrices tortor, ac mollis lorem mollis non. Phasellus sit amet maximus ex, id scelerisque nulla. Etiam eu orci a nulla semper maximus et at quam.</p>
-				</gov-layout-content>
+			<gov-layout type="aside" variant="left" inverse>
+				<gov-layout-column>
+					<p><b>Aside left inverse</b> Ut sollicitudin risus sit amet placerat fermentum. Sed libero mauris, maximus cursus magna tincidunt, efficitur congue enim. Suspendisse potenti. Sed ac eleifend leo. Nullam a sapien in diam semper faucibus sit amet vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu faucibus mi. Morbi leo ipsum, tempus vel vulputate non, varius et lectus.</p>
+				</gov-layout-column>
+				<gov-layout-column>
+					<p><b>Aside left inverse</b> Ut sollicitudin risus sit amet placerat fermentum. Sed libero mauris, maximus cursus magna tincidunt, efficitur congue enim. Suspendisse potenti. Sed ac eleifend leo. Nullam a sapien in diam semper faucibus sit amet vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu faucibus mi. Morbi leo ipsum, tempus vel vulputate non, varius et lectus. Donec justo lacus, congue hendrerit felis sit amet, commodo lobortis neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla vulputate urna sapien. Proin imperdiet rhoncus dictum. Pellentesque tempor ultrices tortor, ac mollis lorem mollis non. Phasellus sit amet maximus ex, id scelerisque nulla. Etiam eu orci a nulla semper maximus et at quam.</p>
+				</gov-layout-column>
+			</gov-layout>
+			<br>
+			<gov-layout type="text" variant="left">
+				<gov-layout-column>
+					<p><b>Text left</b> Ut sollicitudin risus sit amet placerat fermentum. Sed libero mauris, maximus cursus magna tincidunt, efficitur congue enim. Suspendisse potenti. Sed ac eleifend leo. Nullam a sapien in diam semper faucibus sit amet vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu faucibus mi. Morbi leo ipsum, tempus vel vulputate non, varius et lectus. Donec justo lacus, congue hendrerit felis sit amet, commodo lobortis neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla vulputate urna sapien. Proin imperdiet rhoncus dictum. Pellentesque tempor ultrices tortor, ac mollis lorem mollis non. Phasellus sit amet maximus ex, id scelerisque nulla. Etiam eu orci a nulla semper maximus et at quam.</p>
+				</gov-layout-column>
+			</gov-layout>
+			<br>
+			<gov-layout type="text">
+				<gov-layout-column>
+					<p><b>Text</b> Ut sollicitudin risus sit amet placerat fermentum. Sed libero mauris, maximus cursus magna tincidunt, efficitur congue enim. Suspendisse potenti. Sed ac eleifend leo. Nullam a sapien in diam semper faucibus sit amet vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu faucibus mi. Morbi leo ipsum, tempus vel vulputate non, varius et lectus. Donec justo lacus, congue hendrerit felis sit amet, commodo lobortis neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla vulputate urna sapien. Proin imperdiet rhoncus dictum. Pellentesque tempor ultrices tortor, ac mollis lorem mollis non. Phasellus sit amet maximus ex, id scelerisque nulla. Etiam eu orci a nulla semper maximus et at quam.</p>
+				</gov-layout-column>
+			</gov-layout>
+			<br>
+			<gov-layout type="text" variant="right">
+				<gov-layout-column>
+					<p><b>Text right</b> Ut sollicitudin risus sit amet placerat fermentum. Sed libero mauris, maximus cursus magna tincidunt, efficitur congue enim. Suspendisse potenti. Sed ac eleifend leo. Nullam a sapien in diam semper faucibus sit amet vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu faucibus mi. Morbi leo ipsum, tempus vel vulputate non, varius et lectus. Donec justo lacus, congue hendrerit felis sit amet, commodo lobortis neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla vulputate urna sapien. Proin imperdiet rhoncus dictum. Pellentesque tempor ultrices tortor, ac mollis lorem mollis non. Phasellus sit amet maximus ex, id scelerisque nulla. Etiam eu orci a nulla semper maximus et at quam.</p>
+				</gov-layout-column>
 			</gov-layout>
 			<br>
 		</gov-container>
@@ -6343,7 +6373,7 @@ class LoadingPage extends HTMLElement {
 			<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
 			<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
 			<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
-			<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>		
+			<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
 			<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
 			<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
 			<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
@@ -6366,8 +6396,8 @@ class LoadingPage extends HTMLElement {
 		`;
   }
 }
-if (customElements.get("loading-page") === undefined) {
-  customElements.define("loading-page", LoadingPage);
+if (customElements.get('loading-page') === undefined) {
+  customElements.define('loading-page', LoadingPage);
 }
 
 class NavPage extends HTMLElement {
@@ -7125,6 +7155,96 @@ class TabsPage extends HTMLElement {
 						(např. opakování „asdf asdf asdf…“).</p>
 				</gov-tabs-item>
 			</gov-tabs>
+
+			<h2>Vertical tabs</h2>
+			<gov-tabs id="po" wcag-label="Důležitý tabs" wcag-select-label="Výběr možnosti" orientation="vertical">
+				<gov-tabs-item label="TAB #1">
+					<p>Muj super tab - Lorem ipsum (zkráceně lipsum) je označení pro standardní pseudolatinský text užívaný v grafickém
+						designu a navrhování jako demonstrativní výplňový text při vytváření pracovních ukázek grafických
+						návrhů (např. internetových stránek, rozvržení časopisů či všech druhů reklamních materiálů). Lipsum
+						tak pracovně znázorňuje text v ukázkových maketách (tzv. mock-up) předtím, než bude do hotového
+						návrhu vložen smysluplný obsah.</p>
+				</gov-tabs-item>
+				<gov-tabs-item label="TAB #2" default>
+					<p>Dalsi super tab - Pokud by se pro stejný účel použil smysluplný text, bylo by těžké hodnotit pouze vzhled, aniž by se
+						pozorovatel nechal svést ke čtení obsahu. Pokud by byl naopak použit nesmyslný, ale pravidelný text
+						(např. opakování „asdf asdf asdf…“), oko by při posuzování vzhledu bylo vyrušováno pravidelnou
+						strukturou textu, která se od běžného textu liší. Text lorem ipsum na první pohled připomíná běžný
+						text, slova jsou různě dlouhá, frekvence písmen je podobná běžné řeči, interpunkce vypadá přirozeně
+						atd.</p>
+				</gov-tabs-item>
+				<gov-tabs-item label="TAB #3">
+					<p>Dalsi super tab - Pokud by se pro stejný účel použil smysluplný text, bylo by těžké hodnotit pouze vzhled, aniž by se
+						pozorovatel nechal svést ke čtení obsahu. Pokud by byl naopak použit nesmyslný, ale pravidelný text
+						(např. opakování „asdf asdf asdf…“).</p>
+				</gov-tabs-item>
+			</gov-tabs>
+			<gov-tabs id="po" wcag-label="Důležitý tabs" wcag-select-label="Výběr možnosti" orientation="vertical">
+				<gov-tabs-item label="Muj super tab">
+					<p>Muj super tab - Lorem ipsum (zkráceně lipsum) je označení pro standardní pseudolatinský text užívaný v grafickém
+						designu a navrhování jako demonstrativní výplňový text při vytváření pracovních ukázek grafických
+						návrhů (např. internetových stránek, rozvržení časopisů či všech druhů reklamních materiálů). Lipsum
+						tak pracovně znázorňuje text v ukázkových maketách (tzv. mock-up) předtím, než bude do hotového
+						návrhu vložen smysluplný obsah.</p>
+				</gov-tabs-item>
+				<gov-tabs-item label="Dalsi super tab s dlouhým popisem" default>
+					<p>Dalsi suepr tab - Pokud by se pro stejný účel použil smysluplný text, bylo by těžké hodnotit pouze vzhled, aniž by se
+						pozorovatel nechal svést ke čtení obsahu. Pokud by byl naopak použit nesmyslný, ale pravidelný text
+						(např. opakování „asdf asdf asdf…“), oko by při posuzování vzhledu bylo vyrušováno pravidelnou
+						strukturou textu, která se od běžného textu liší. Text lorem ipsum na první pohled připomíná běžný
+						text, slova jsou různě dlouhá, frekvence písmen je podobná běžné řeči, interpunkce vypadá přirozeně
+						atd.</p>
+				</gov-tabs-item>
+				<gov-tabs-item label="Další super tab s naprosto nesmyslně dlouhým popisem, který se doufám nevyužije">
+					<p>Dalsi suepr tab - Pokud by se pro stejný účel použil smysluplný text, bylo by těžké hodnotit pouze vzhled, aniž by se
+						pozorovatel nechal svést ke čtení obsahu. Pokud by byl naopak použit nesmyslný, ale pravidelný text
+						(např. opakování „asdf asdf asdf…“).</p>
+				</gov-tabs-item>
+			</gov-tabs>
+			<gov-tabs id="po" type="badge" wcag-label="Důležitý tabs" wcag-select-label="Výběr možnosti" orientation="vertical">
+				<gov-tabs-item label="TAB #1">
+					<p>Muj super tab - Lorem ipsum (zkráceně lipsum) je označení pro standardní pseudolatinský text užívaný v grafickém
+						designu a navrhování jako demonstrativní výplňový text při vytváření pracovních ukázek grafických
+						návrhů (např. internetových stránek, rozvržení časopisů či všech druhů reklamních materiálů). Lipsum
+						tak pracovně znázorňuje text v ukázkových maketách (tzv. mock-up) předtím, než bude do hotového
+						návrhu vložen smysluplný obsah.</p>
+				</gov-tabs-item>
+				<gov-tabs-item label="TAB #2" default>
+					<p>Dalsi suepr tab - Pokud by se pro stejný účel použil smysluplný text, bylo by těžké hodnotit pouze vzhled, aniž by se
+						pozorovatel nechal svést ke čtení obsahu. Pokud by byl naopak použit nesmyslný, ale pravidelný text
+						(např. opakování „asdf asdf asdf…“), oko by při posuzování vzhledu bylo vyrušováno pravidelnou
+						strukturou textu, která se od běžného textu liší. Text lorem ipsum na první pohled připomíná běžný
+						text, slova jsou různě dlouhá, frekvence písmen je podobná běžné řeči, interpunkce vypadá přirozeně
+						atd.</p>
+				</gov-tabs-item>
+				<gov-tabs-item label="TAB #3">
+					<p>Dalsi suepr tab - Pokud by se pro stejný účel použil smysluplný text, bylo by těžké hodnotit pouze vzhled, aniž by se
+						pozorovatel nechal svést ke čtení obsahu. Pokud by byl naopak použit nesmyslný, ale pravidelný text
+						(např. opakování „asdf asdf asdf…“).</p>
+				</gov-tabs-item>
+			</gov-tabs>
+			<gov-tabs id="po" type="badge" wcag-label="Důležitý tabs" wcag-select-label="Výběr možnosti" orientation="vertical">
+				<gov-tabs-item label="Muj super tab">
+					<p>Muj super tab - Lorem ipsum (zkráceně lipsum) je označení pro standardní pseudolatinský text užívaný v grafickém
+						designu a navrhování jako demonstrativní výplňový text při vytváření pracovních ukázek grafických
+						návrhů (např. internetových stránek, rozvržení časopisů či všech druhů reklamních materiálů). Lipsum
+						tak pracovně znázorňuje text v ukázkových maketách (tzv. mock-up) předtím, než bude do hotového
+						návrhu vložen smysluplný obsah.</p>
+				</gov-tabs-item>
+				<gov-tabs-item label="Dalsi super tab s dlouhým popisem" default>
+					<p>Dalsi suepr tab - Pokud by se pro stejný účel použil smysluplný text, bylo by těžké hodnotit pouze vzhled, aniž by se
+						pozorovatel nechal svést ke čtení obsahu. Pokud by byl naopak použit nesmyslný, ale pravidelný text
+						(např. opakování „asdf asdf asdf…“), oko by při posuzování vzhledu bylo vyrušováno pravidelnou
+						strukturou textu, která se od běžného textu liší. Text lorem ipsum na první pohled připomíná běžný
+						text, slova jsou různě dlouhá, frekvence písmen je podobná běžné řeči, interpunkce vypadá přirozeně
+						atd.</p>
+				</gov-tabs-item>
+				<gov-tabs-item label="Další super tab s naprosto nesmyslně dlouhým popisem, který se doufám nevyužije">
+					<p>Dalsi suepr tab - Pokud by se pro stejný účel použil smysluplný text, bylo by těžké hodnotit pouze vzhled, aniž by se
+						pozorovatel nechal svést ke čtení obsahu. Pokud by byl naopak použit nesmyslný, ale pravidelný text
+						(např. opakování „asdf asdf asdf…“).</p>
+				</gov-tabs-item>
+			</gov-tabs>
 		`;
   }
 }
@@ -7542,7 +7662,7 @@ class WizzardPage extends HTMLElement {
 						<span slot="prefix">4</span>
 						<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>
 					</gov-wizzard-item>
-					<gov-wizzard-item label="Zřizované organizace" variant="warning" collapsible="false">
+					<gov-wizzard-item label="Zřizované organizace" variant="warning" is-expanded>
 						<span slot="prefix">5</span>
 						<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>
 					</gov-wizzard-item>
@@ -7551,12 +7671,12 @@ class WizzardPage extends HTMLElement {
 				<br><br>
 
 				<gov-wizzard size="s">
-					<gov-wizzard-item label-tag="h1" label="Font Awesome Icon" variant="success" annotation="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus.">
+					<gov-wizzard-item label-tag="h1" label="Font Awesome Icon" variant="success" annotation="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus." collapsible>
 						<gov-icon slot="prefix" name="check"></gov-icon>
 						<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>
 							<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>
 					</gov-wizzard-item>
-					<gov-wizzard-item label="Kontaktní osoby" variant="primary">
+					<gov-wizzard-item label="Kontaktní osoby" variant="primary" is-expanded>
 						<span slot="prefix">2</span>
 						<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>
 					</gov-wizzard-item>
@@ -7576,12 +7696,12 @@ class WizzardPage extends HTMLElement {
 				<br><br>
 	
 				<gov-wizzard size="xs">
-					<gov-wizzard-item label-tag="h1" label="Font Awesome Icon" variant="success" annotation="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus.">
+					<gov-wizzard-item label-tag="h1" label="Font Awesome Icon" variant="success" annotation="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus." collapsible>
 						<gov-icon slot="prefix" name="check"></gov-icon>
 						<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>
 							<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>
 					</gov-wizzard-item>
-					<gov-wizzard-item label="Kontaktní osoby" variant="primary">
+					<gov-wizzard-item label="Kontaktní osoby" variant="primary" is-expanded>
 						<span slot="prefix">2</span>
 						<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>
 					</gov-wizzard-item>
@@ -7634,7 +7754,7 @@ const GovApp = class {
       { path: '/form-message', component: 'form-message-page' },
       { path: '/form-label', component: 'form-label-page' },
       { path: '/grid', component: 'grid-page' },
-      { path: "/loading", component: "loading-page" },
+      { path: '/loading', component: 'loading-page' },
       { path: '/modal', component: 'modal-page' },
       { path: '/nav', component: 'nav-page' },
       { path: '/spacer', component: 'spacer-page' },