@gov-design-system-ce/components 0.0.37 → 0.0.39

package/dist/components/gov-accordion.js.map

@@ -1 +1 @@
-{"file":"gov-accordion.js","mappings":";;;;;;;;;AAAA,MAAM,eAAe,GAAG,wfAAwf;;MCengBA,cAAY;EAGxB;;;;gBAQ4C,GAAG;mBAIG,SAAS;oBAII,KAAK;;;IAfnE,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;GAC3B;EA6BD,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,gBAAgB,CAAC,YAAY,EAAE,CAAC,CAAkC;QACvE,CAAC,CAAC,eAAe,EAAE,CAAA;QACnB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;UACnB,SAAS,EAAE,cAAc,CAAC,IAAI;UAC9B,IAAI,EAAE,CAAC,CAAC,MAAM,CAAC,IAAI;UACnB,GAAG,EAAE,CAAC,CAAC,MAAM,CAAC,GAAG;SACjB,CAAC,CAAA;OACF,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":["GovAccordion"],"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\t&[no-border] {\n\t\t.gov-accordion-item__header::before {\n\t\t\tbackground-color: transparent !important;\n\t\t}\n\t}\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 { 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'\nimport { AccordionEvent, AccordionItemEvent } from \"./gov-accordion.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 * Accordion item underline\n\t */\n\t@Prop({ attribute: 'no-border' }) readonly noBorder: boolean = false\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<AccordionEvent>\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.addEventListener('gov-change', (e: CustomEvent<AccordionItemEvent>) => {\n\t\t\t\te.stopPropagation()\n\t\t\t\tthis.govChange.emit({\n\t\t\t\t\tcomponent: AccordionClass.root,\n\t\t\t\t\topen: e.detail.open,\n\t\t\t\t\tref: e.detail.ref\n\t\t\t\t})\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.js","mappings":";;;;;;;;;AAAA,MAAM,eAAe,GAAG,wfAAwf;;MCengBA,cAAY;EAGxB;;;;gBAQ4C,GAAG;mBAIG,SAAS;oBAII,KAAK;;;IAfnE,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;GAC3B;EA6BD,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,gBAAgB,CAAC,YAAY,EAAE,CAAC,CAAkC;QACvE,CAAC,CAAC,eAAe,EAAE,CAAA;QACnB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;UACnB,SAAS,EAAE,cAAc,CAAC,IAAI;UAC9B,IAAI,EAAE,CAAC,CAAC,MAAM,CAAC,IAAI;UACnB,GAAG,EAAE,CAAC,CAAC,MAAM,CAAC,GAAG;SACjB,CAAC,CAAA;OACF,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":["GovAccordion"],"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\t&[no-border] {\n\t\t.gov-accordion-item__header::before {\n\t\t\tbackground-color: transparent !important;\n\t\t}\n\t}\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 { 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'\nimport { AccordionEvent, AccordionItemEvent } from \"./gov-accordion.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 * Accordion item underline\n\t */\n\t@Prop({ attribute: 'no-border' }) readonly noBorder: boolean = false\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<AccordionEvent>\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.addEventListener('gov-change', (e: CustomEvent<AccordionItemEvent>) => {\n\t\t\t\te.stopPropagation()\n\t\t\t\tthis.govChange.emit({\n\t\t\t\t\tcomponent: AccordionClass.root,\n\t\t\t\t\topen: e.detail.open,\n\t\t\t\t\tref: e.detail.ref\n\t\t\t\t})\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/components/gov-alert.js

@@ -113,6 +113,7 @@ function defineCustomElement$1() {
       break;
   } });
 }
+defineCustomElement$1();
 
 const GovAlert = GovAlert$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/gov-alert.js.map

@@ -1 +1 @@
-{"file":"gov-alert.js","mappings":"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","names":["GovAlert"],"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\theadline: 'gov-alert__headline',\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&__headline {\n\t\tdisplay: flex;\n\t\tgap: rem-calc(16);\n\n\t\t+ div {\n\t\t\tmargin-top: rem-calc(8);\n\t\t}\n\n\t\tp {\n\t\t\tmargin-bottom: 0;\n\t\t}\n\n\t\tgov-button {\n\t\t\tmargin-top: rem-calc(-4);\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, Method, Prop, State, Watch } from \"@stencil/core\"\nimport { validateProp } from \"../../helpers/Validate/props\"\nimport { AlertClass, AlertVariants, VariantType } from \"./constants\"\nimport { govHost, toBoolAttr } from \"../../helpers/Dom/template\"\nimport { GovHost } from \"../../helpers/Dom/template.types\"\nimport { AlertEvent } from \"./gov-alert.types\"\nimport { ButtonEvent } from \"../gov-button/gov-button.types\"\nimport Fragment from \"../../helpers/Fragment\"\nimport { validateWcagProp } from \"../../helpers/Validate/wcag\"\nimport { canValidateWcagOnRender } from \"../../helpers/Dom/win\"\nimport { delay } from \"../../utils/utils\"\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 headline: string\n\t/**\n\t * Style variation of the button.\n\t */\n\t@Prop() readonly variant: VariantType = \"primary\"\n\t/**\n\t * Determine if component should have inverse 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 * Aria label for the toggle button. It is mandatory if the alert has headline\n\t */\n\t@Prop({ attribute: \"wcag-toggle-label\" }) readonly wcagToggleLabel: string\n\t/**\n\t * Called when the close button is clicked\n\t */\n\t@Event({ eventName: \"gov-close\" }) govClose: EventEmitter<AlertEvent>\n\t/**\n\t * Displays the option to close the alert\n\t */\n\t@Prop() readonly closable?: boolean = false\n\n\t@State() toggleContent = 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\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\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\ton-gov-click={this.onCloseHandler.bind(this)}\n\t\t\t\t>\n\t\t\t\t\t<gov-icon name=\"x-lg\"></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\t\t\t\t\t<div class={AlertClass.content}>\n\t\t\t\t\t\t{this.headline ? (\n\t\t\t\t\t\t\t<Fragment>\n\t\t\t\t\t\t\t\t<div class={AlertClass.headline}>\n\t\t\t\t\t\t\t\t\t<p>{this.headline}</p>\n\t\t\t\t\t\t\t\t\t<gov-button\n\t\t\t\t\t\t\t\t\t\tsize=\"s\"\n\t\t\t\t\t\t\t\t\t\taria-label={this.wcagToggleLabel}\n\t\t\t\t\t\t\t\t\t\ttype=\"base\"\n\t\t\t\t\t\t\t\t\t\tvariant={variant}\n\t\t\t\t\t\t\t\t\t\tinverse={inverse}\n\t\t\t\t\t\t\t\t\t\ton-gov-click={() => this.toggleContent = !this.toggleContent}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<gov-icon name={this.toggleContent ? 'chevron-up' : 'chevron-down'}></gov-icon>\n\t\t\t\t\t\t\t\t\t</gov-button>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div hidden={!this.toggleContent} aria-hidden={toBoolAttr(this.toggleContent)}>\n\t\t\t\t\t\t\t\t\t<slot />\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</Fragment>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<slot />\n\t\t\t\t\t\t)}\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\tonCloseHandler(e: CustomEvent<ButtonEvent>) {\n\t\tthis.govClose.emit({\n\t\t\tcomponent: AlertClass.root,\n\t\t\tref: this.host,\n\t\t\toriginalEvent: e,\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\tif (this.closable) {\n\t\t\tvalidateWcagProp(this.wcagCloseLabel, 'wcag-close-label', AlertClass.root)\n\t\t}\n\t\tif (this.headline) {\n\t\t\tvalidateWcagProp(this.wcagToggleLabel, 'wcag-toggle-label', AlertClass.root)\n\t\t}\n\t}\n}\n"],"version":3}
+{"file":"gov-alert.js","mappings":"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","names":["GovAlert"],"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\theadline: 'gov-alert__headline',\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&__headline {\n\t\tdisplay: flex;\n\t\tgap: rem-calc(16);\n\n\t\t+ div {\n\t\t\tmargin-top: rem-calc(8);\n\t\t}\n\n\t\tp {\n\t\t\tmargin-bottom: 0;\n\t\t}\n\n\t\tgov-button {\n\t\t\tmargin-top: rem-calc(-4);\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, Method, Prop, State, Watch } from \"@stencil/core\"\nimport { validateProp } from \"../../helpers/Validate/props\"\nimport { AlertClass, AlertVariants, VariantType } from \"./constants\"\nimport { govHost, toBoolAttr } from \"../../helpers/Dom/template\"\nimport { GovHost } from \"../../helpers/Dom/template.types\"\nimport { AlertEvent } from \"./gov-alert.types\"\nimport { ButtonEvent } from \"../gov-button/default/gov-button.types\"\nimport Fragment from \"../../helpers/Fragment\"\nimport { validateWcagProp } from \"../../helpers/Validate/wcag\"\nimport { canValidateWcagOnRender } from \"../../helpers/Dom/win\"\nimport { delay } from \"../../utils/utils\"\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 headline: string\n\t/**\n\t * Style variation of the button.\n\t */\n\t@Prop() readonly variant: VariantType = \"primary\"\n\t/**\n\t * Determine if component should have inverse 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 * Aria label for the toggle button. It is mandatory if the alert has headline\n\t */\n\t@Prop({ attribute: \"wcag-toggle-label\" }) readonly wcagToggleLabel: string\n\t/**\n\t * Called when the close button is clicked\n\t */\n\t@Event({ eventName: \"gov-close\" }) govClose: EventEmitter<AlertEvent>\n\t/**\n\t * Displays the option to close the alert\n\t */\n\t@Prop() readonly closable?: boolean = false\n\n\t@State() toggleContent = 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\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\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\ton-gov-click={this.onCloseHandler.bind(this)}\n\t\t\t\t>\n\t\t\t\t\t<gov-icon name=\"x-lg\"></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\t\t\t\t\t<div class={AlertClass.content}>\n\t\t\t\t\t\t{this.headline ? (\n\t\t\t\t\t\t\t<Fragment>\n\t\t\t\t\t\t\t\t<div class={AlertClass.headline}>\n\t\t\t\t\t\t\t\t\t<p>{this.headline}</p>\n\t\t\t\t\t\t\t\t\t<gov-button\n\t\t\t\t\t\t\t\t\t\tsize=\"s\"\n\t\t\t\t\t\t\t\t\t\taria-label={this.wcagToggleLabel}\n\t\t\t\t\t\t\t\t\t\ttype=\"base\"\n\t\t\t\t\t\t\t\t\t\tvariant={variant}\n\t\t\t\t\t\t\t\t\t\tinverse={inverse}\n\t\t\t\t\t\t\t\t\t\ton-gov-click={() => this.toggleContent = !this.toggleContent}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<gov-icon name={this.toggleContent ? 'chevron-up' : 'chevron-down'}></gov-icon>\n\t\t\t\t\t\t\t\t\t</gov-button>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div hidden={!this.toggleContent} aria-hidden={toBoolAttr(this.toggleContent)}>\n\t\t\t\t\t\t\t\t\t<slot />\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</Fragment>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<slot />\n\t\t\t\t\t\t)}\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\tonCloseHandler(e: CustomEvent<ButtonEvent>) {\n\t\tthis.govClose.emit({\n\t\t\tcomponent: AlertClass.root,\n\t\t\tref: this.host,\n\t\t\toriginalEvent: e,\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\tif (this.closable) {\n\t\t\tvalidateWcagProp(this.wcagCloseLabel, 'wcag-close-label', AlertClass.root)\n\t\t}\n\t\tif (this.headline) {\n\t\t\tvalidateWcagProp(this.wcagToggleLabel, 'wcag-toggle-label', AlertClass.root)\n\t\t}\n\t}\n}\n"],"version":3}

package/dist/components/gov-app.js

@@ -3263,7 +3263,7 @@ class AlertPage extends HTMLElement {
   connectedCallback() {
     this.innerHTML = `
 		<h2>Alert</h2>
-		
+
 		<gov-alert variant="secondary" headline="Tohle bude super nadpis pro všechno" closable>
 			<gov-icon name="info" slot="icon"></gov-icon>
 			<p>
@@ -3764,48 +3764,72 @@ class ButtonPage extends HTMLElement {
   connectedCallback() {
     this.innerHTML = `
 			<h1>Buttons</h1>
+
+			<h4>Dropdown</h4>
+
+			<gov-layout>
+				<gov-layout-column>
+					<div class="container-view">
+						<gov-dropdown>
+							<gov-button variant="primary" size="s">
+								Více
+							</gov-button>
+							<ul slot="list">
+								<li>
+									<gov-button variant="primary" type="base" size="s">
+										A další nabídka
+										<gov-icon slot="right-icon" name="info"></gov-icon>
+									</gov-button>
+								</li>
+								<li>
+									<gov-button variant="primary" type="base" size="s">
+										A další dlouhá nabídka
+										<gov-icon slot="right-icon" name="info"></gov-icon>
+									</gov-button>
+								</li>
+								<li>
+									<gov-button variant="primary" type="base" size="s">
+										A další
+										<gov-icon slot="right-icon" name="info"></gov-icon>
+									</gov-button>
+								</li>
+							</ul>
+						</gov-dropdown>
+					</div>
+				</gov-layout-column>
+				<gov-layout-column>
+					<div class="container-view">
+						<gov-dropdown position="right">
+							<gov-button variant="primary" size="s">
+								Více
+							</gov-button>
+							<ul slot="list">
+								<li>
+									<gov-button variant="secondary" type="base" size="s">
+										A další nabídka
+										<gov-icon slot="right-icon" name="info"></gov-icon>
+									</gov-button>
+								</li>
+								<li>
+									<gov-button variant="secondary" type="base" size="s">
+										A další dlouhá nabídka
+										<gov-icon slot="right-icon" name="info"></gov-icon>
+									</gov-button>
+								</li>
+								<li>
+									<gov-button variant="secondary" type="base" size="s">
+										A další
+										<gov-icon slot="right-icon" name="info"></gov-icon>
+									</gov-button>
+								</li>
+							</ul>
+						</gov-dropdown>
+					</div>
+				</gov-layout-column>
+			</gov-layout>
+
 			<h4>Buttons - primary (default)</h4>
-			
-			
-			<gov-button-test type="solid" variant="primary" size="s" href="http://localhost:3333/button">
-				Small Primary
-				<gov-icon slot="left-icon" name="info"></gov-icon>
-			</gov-button-test>
-			
-			<gov-form-input size="m" placeholder="Co hledáte" input-type="datetime-local"></gov-form-input>
-			
-			
-			
-			<br/>
-			<br/>
-			<br/>
-			<br/>
-			<br/>
-			<hr/>
-			<br/>
-			<br/>
-			<br/>
-			<br/>
-			
-			<gov-control-group>
-				<gov-button variant="primary" size="s" href="http://localhost:3333/button">
-				Small Primary
-				</gov-button>
-				<gov-button variant="primary" size="s" href="http://localhost:3333/button">
-				Small Primary
-				</gov-button>
-				<gov-form-input multiline rows="3" name="test-me" disabled value="Value of textarea"></gov-form-input>
-				<gov-form-select size="l" name="test-me">
-					<option value="" selected>Placeholder</option>
-					<option value="b">Value B</option>
-					<option value="c">Value C</option>
-					<option value="d">Value D</option>
-				</gov-form-select>
-				<gov-button variant="primary" size="s" href="http://localhost:3333/button">
-				Small Primary
-				</gov-button>
-			</gov-control-group>
-			
+
 			<div class="container-view">
 				<gov-button variant="primary" size="s" href="http://localhost:3333/button">
 					<gov-icon slot="left-icon" name="info"></gov-icon>
@@ -5200,7 +5224,7 @@ class ControlGroupPage extends HTMLElement {
     this.innerHTML = `
 		<h2>Control Group</h2>
 
-		<gov-control-group bordered>
+		<gov-control-group>
 			<gov-form-input type="number" id="kapr" name="test-me" placeholder="Placeholder" size="s"></gov-form-input>
 			<gov-button variant="primary" type="outlined" size="s">
 				<gov-icon slot="left-icon" name="chevron-up"></gov-icon>
@@ -5211,9 +5235,31 @@ class ControlGroupPage extends HTMLElement {
 			<gov-button variant="primary" type="outlined" size="s">
 				<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 			</gov-button>
+			<gov-dropdown position="right">
+				<gov-button variant="primary" size="s">
+					Více
+				</gov-button>
+				<ul slot="list">
+					<li>
+						<gov-button variant="primary" type="base" size="s">
+							A další nabídka
+						</gov-button>
+					</li>
+					<li>
+						<gov-button variant="primary" type="base" size="s">
+							A další nabídka
+						</gov-button>
+					</li>
+					<li>
+						<gov-button variant="primary" type="base" size="s">
+							A další nabídka
+						</gov-button>
+					</li>
+				</ul>
+			</gov-dropdown>
 		</gov-control-group>
 		<br />
-		<gov-control-group variant="primary" bordered>
+		<gov-control-group variant="primary">
 			<gov-form-select name="test-me" size="m">
 				<option value="" selected>Placeholder</option>
 				<option value="b">Value B</option>
@@ -5225,7 +5271,7 @@ class ControlGroupPage extends HTMLElement {
 			</gov-button>
 		</gov-control-group>
 		<br />
-		<gov-control-group bordered>
+		<gov-control-group>
 			<gov-button variant="primary" type="outlined" size="l">
 				<gov-icon slot="left-icon" name="gear"></gov-icon>
 			</gov-button>
@@ -5239,7 +5285,7 @@ class ControlGroupPage extends HTMLElement {
 			</gov-button>
 		</gov-control-group>
 		<br />
-		<gov-control-group variant="primary" bordered>
+		<gov-control-group variant="primary" no-border>
 		<gov-button variant="primary" type="outlined" size="xl">
 				<gov-icon slot="left-icon" name="chevron-up"></gov-icon>
 			</gov-button>
@@ -5258,7 +5304,7 @@ class ControlGroupPage extends HTMLElement {
 		</gov-control-group>
 		<br><br>
 
-		<gov-control-group variant="secondary" bordered>
+		<gov-control-group variant="secondary" no-border>
 			<gov-form-input type="number" id="kapr" name="test-me" placeholder="Placeholder" variant="primary" size="s"></gov-form-input>
 			<gov-button variant="primary" type="outlined" size="s">
 				<gov-icon slot="left-icon" name="chevron-up"></gov-icon>
@@ -5283,7 +5329,7 @@ class ControlGroupPage extends HTMLElement {
 			</gov-button>
 		</gov-control-group>
 		<br />
-		<gov-control-group variant="secondary" bordered>
+		<gov-control-group variant="secondary">
 			<gov-button variant="primary" type="outlined" size="l">
 				<gov-icon slot="left-icon" name="gear"></gov-icon>
 			</gov-button>
@@ -5297,7 +5343,7 @@ class ControlGroupPage extends HTMLElement {
 			</gov-button>
 		</gov-control-group>
 		<br />
-		<gov-control-group variant="secondary" bordered>
+		<gov-control-group variant="secondary">
 		<gov-button variant="primary" type="outlined" size="xl">
 				<gov-icon slot="left-icon" name="chevron-up"></gov-icon>
 			</gov-button>
@@ -5316,7 +5362,7 @@ class ControlGroupPage extends HTMLElement {
 		</gov-control-group>
 		<br><br>
 
-		<gov-control-group variant="secondary" bordered>
+		<gov-control-group variant="secondary">
 			<gov-form-input type="number" id="kapr" name="test-me" placeholder="Placeholder" variant="secondary" size="s"></gov-form-input>
 			<gov-button variant="secondary" type="outlined" size="s">
 				<gov-icon slot="left-icon" name="chevron-up"></gov-icon>
@@ -5329,7 +5375,7 @@ class ControlGroupPage extends HTMLElement {
 			</gov-button>
 		</gov-control-group>
 		<br />
-		<gov-control-group variant="secondary">
+		<gov-control-group variant="secondary" no-border>
 			<gov-form-select name="test-me" size="m">
 				<option value="" selected>Placeholder</option>
 				<option value="b">Value B</option>
@@ -5341,7 +5387,7 @@ class ControlGroupPage extends HTMLElement {
 			</gov-button>
 		</gov-control-group>
 		<br />
-		<gov-control-group variant="secondary" bordered>
+		<gov-control-group variant="secondary">
 			<gov-button variant="secondary" type="outlined" size="l">
 				<gov-icon slot="left-icon" name="gear"></gov-icon>
 			</gov-button>
@@ -5355,7 +5401,7 @@ class ControlGroupPage extends HTMLElement {
 			</gov-button>
 		</gov-control-group>
 		<br />
-		<gov-control-group variant="secondary" bordered>
+		<gov-control-group variant="secondary">
 		<gov-button variant="secondary" type="outlined" size="xl">
 				<gov-icon slot="left-icon" name="chevron-up"></gov-icon>
 			</gov-button>
@@ -5372,146 +5418,6 @@ class ControlGroupPage extends HTMLElement {
 				<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 			</gov-button>
 		</gov-control-group>
-
-		<h2>Invalid</h2>
-		<gov-form-control type="input" id="metro2">
-			<gov-control-group bordered invalid="true">
-				<gov-form-input type="number" id="kapr" name="test-me" placeholder="Placeholder" size="s"></gov-form-input>
-				<gov-button variant="primary" type="outlined" size="s">
-					<gov-icon slot="left-icon" name="chevron-up"></gov-icon>
-				</gov-button>
-				<gov-button variant="primary" type="outlined" size="s">
-					<gov-icon slot="left-icon" name="chevron-down"></gov-icon>
-				</gov-button>
-				<gov-button variant="primary" type="outlined" size="s">
-					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
-				</gov-button>
-			</gov-control-group>
-			<gov-form-message slot="bottom" variant="error">
-				<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
-				Required
-			</gov-form-message>
-		</gov-form-control>
-		<br />
-		<gov-form-control type="input" id="metro2">
-			<gov-control-group invalid="true">
-				<gov-form-select name="test-me" size="m">
-					<option value="" selected>Placeholder</option>
-					<option value="b">Value B</option>
-					<option value="c">Value C</option>
-					<option value="d">Value D</option>
-				</gov-form-select>
-				<gov-button variant="primary" type="outlined" size="m">
-					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
-				</gov-button>
-			</gov-control-group>
-			<gov-form-message slot="bottom" variant="error">
-				<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
-				Required
-			</gov-form-message>
-		</gov-form-control>
-		<br />
-		<gov-form-control type="input" id="metro2">
-			<gov-control-group bordered invalid="true">
-				<gov-button variant="primary" type="outlined" size="l">
-					<gov-icon slot="left-icon" name="gear"></gov-icon>
-				</gov-button>
-				<gov-form-file name="test-me-c" accept="image/*" max-file-size="1024">
-					<gov-button variant="primary" type="outlined" size="l" tabindex="-1">
-						Nahrát soubor ze zařízení
-					</gov-button>
-				</gov-form-file>
-				<gov-button variant="primary" type="outlined" size="l">
-					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
-				</gov-button>
-			</gov-control-group>
-			<gov-form-message slot="bottom" variant="error">
-				<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
-				Required
-			</gov-form-message>
-		</gov-form-control>
-		<br />
-		<gov-form-control type="input" id="metro2">
-			<gov-control-group bordered invalid="true">
-				<gov-button variant="primary" type="outlined" size="xl">
-					<gov-icon slot="left-icon" name="chevron-up"></gov-icon>
-				</gov-button>
-				<gov-button variant="primary" type="outlined" size="xl">
-					<gov-icon slot="left-icon" name="chevron-down"></gov-icon>
-				</gov-button>
-				<gov-form-select name="test-me" size="xl">
-					<option value="" selected>Placeholder</option>
-					<option value="b">Value B</option>
-					<option value="c">Value C</option>
-					<option value="d">Value D</option>
-				</gov-form-select>
-				<gov-button variant="primary" type="outlined" size="xl">
-					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
-				</gov-button>
-			</gov-control-group>
-			<gov-form-message slot="bottom" variant="error">
-				<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
-				Required
-			</gov-form-message>
-		</gov-form-control>
-
-		<h2>Disabled</h2>
-		<gov-control-group bordered disabled="true">
-			<gov-form-input type="number" id="kapr" name="test-me" placeholder="Placeholder" size="s"></gov-form-input>
-			<gov-button variant="primary" type="outlined" size="s">
-				<gov-icon slot="left-icon" name="chevron-up"></gov-icon>
-			</gov-button>
-			<gov-button variant="primary" type="outlined" size="s">
-				<gov-icon slot="left-icon" name="chevron-down"></gov-icon>
-			</gov-button>
-			<gov-button variant="primary" type="outlined" size="s">
-				<gov-icon slot="left-icon" name="x-lg"></gov-icon>
-			</gov-button>
-		</gov-control-group>
-		<br />
-		<gov-control-group disabled="true">
-			<gov-form-select name="test-me" size="m">
-				<option value="" selected>Placeholder</option>
-				<option value="b">Value B</option>
-				<option value="c">Value C</option>
-				<option value="d">Value D</option>
-			</gov-form-select>
-			<gov-button variant="primary" type="outlined" size="m">
-				<gov-icon slot="left-icon" name="x-lg"></gov-icon>
-			</gov-button>
-		</gov-control-group>
-		<br />
-		<gov-control-group bordered disabled="true">
-			<gov-button variant="primary" type="outlined" size="l">
-				<gov-icon slot="left-icon" name="gear"></gov-icon>
-			</gov-button>
-			<gov-form-file name="test-me-c" accept="image/*" max-file-size="1024">
-				<gov-button variant="primary" type="outlined" size="l" tabindex="-1">
-					Nahrát soubor ze zařízení
-				</gov-button>
-			</gov-form-file>
-			<gov-button variant="primary" type="outlined" size="l">
-				<gov-icon slot="left-icon" name="x-lg"></gov-icon>
-			</gov-button>
-		</gov-control-group>
-		<br />
-		<gov-control-group bordered disabled="true">
-		<gov-button variant="primary" type="outlined" size="xl">
-				<gov-icon slot="left-icon" name="chevron-up"></gov-icon>
-			</gov-button>
-			<gov-button variant="primary" type="outlined" size="xl">
-				<gov-icon slot="left-icon" name="chevron-down"></gov-icon>
-			</gov-button>
-			<gov-form-select name="test-me" size="xl">
-				<option value="" selected>Placeholder</option>
-				<option value="b">Value B</option>
-				<option value="c">Value C</option>
-				<option value="d">Value D</option>
-			</gov-form-select>
-			<gov-button variant="primary" type="outlined" size="xl">
-				<gov-icon slot="left-icon" name="x-lg"></gov-icon>
-			</gov-button>
-		</gov-control-group>
 		`;
   }
 }
@@ -7765,15 +7671,21 @@ if (customElements.get('side-nav-page') === undefined) {
 class SpacerPage extends HTMLElement {
   connectedCallback() {
     this.innerHTML = `
-			<gov-spacer size="2xs"></gov-spacer>
-			<gov-spacer size="xs"></gov-spacer>
-			<gov-spacer size="s"></gov-spacer>
-			<gov-spacer size="m"></gov-spacer>
+			<style>
+			 gov-spacer {
+				background: lightgray;
+				margin-bottom: 10px;
+			 }
+			</style>
+			<gov-spacer size="2xs" breakpoint="sm"></gov-spacer>
+			<gov-spacer size="xs" breakpoint="sm"></gov-spacer>
+			<gov-spacer size="s" breakpoint="sm"></gov-spacer>
+			<gov-spacer size="m" breakpoint="sm"></gov-spacer>
 			<gov-spacer size="l" breakpoint="sm"></gov-spacer>
-			<gov-spacer size="xl"></gov-spacer>
-			<gov-spacer size="2xl"></gov-spacer>
-			<gov-spacer size="3xl"></gov-spacer>
-			<gov-spacer size="4xl"></gov-spacer>
+			<gov-spacer size="xl" breakpoint="sm"></gov-spacer>
+			<gov-spacer size="2xl" breakpoint="sm"></gov-spacer>
+			<gov-spacer size="3xl" breakpoint="sm"></gov-spacer>
+			<gov-spacer size="4xl" breakpoint="sm"></gov-spacer>
 		`;
   }
 }
@@ -8996,6 +8908,7 @@ function defineCustomElement$1() {
       break;
   } });
 }
+defineCustomElement$1();
 
 const GovApp = GovApp$1;
 const defineCustomElement = defineCustomElement$1;