@gov-design-system-ce/components 4.1.1 → 4.1.2

package/dist/collection/components/gov-theme-switch/gov-theme-switch.js

@@ -16,10 +16,11 @@ export class GovThemeSwitch {
             });
         };
         this.size = "m";
-        this.ariaLabelLight = undefined;
-        this.ariaLabelDark = undefined;
-        this.labelLight = undefined;
-        this.labelDark = undefined;
+        this.displayLabel = false;
+        this.ariaLabelLight = "Přenout na tmavý mód";
+        this.ariaLabelDark = "Přepnout na světlý mód";
+        this.labelLight = "Světlý mód";
+        this.labelDark = "Tmavý mód";
         this.theme = ThemeList.auto;
         this.h = govHost(this.host);
     }
@@ -64,7 +65,7 @@ export class GovThemeSwitch {
         if (this.theme === ThemeList.auto) {
             isDark = this.isSystemPrefersColorDark;
         }
-        return (h(Host, { key: 'a83f030f54527f8e8a2d23c3769f3f1b41c4af4f', class: this.h.classes(ThemeSwitchClass.root), theme: isDark ? ThemeList.dark : ThemeList.light, size: this.size }, h("button", { key: '54f8337d911cf64f24c8db089b9092b806c3a926', onClick: () => this.setThemeState(isDark ? ThemeList.light : ThemeList.dark), "aria-label": isDark ? this.ariaLabelLight : this.ariaLabelDark }, h("span", { key: '483310b54df8e8de42c087f04b7e0758067c22b8' }, h("span", { key: '88b822cac4b5dc3897fa19252b5b1e1a559b8d6d', class: ThemeSwitchClass.indicator }, ThemeList.light && h("gov-icon", { key: 'f6f162cda66facba8940ba55f7f3283e7796d157', name: "sun", class: ThemeSwitchClass.iconLight, type: "components" }), ThemeList.dark && h("gov-icon", { key: 'b36b009c1787e37a3fd5108618c6bb5993f97a23', name: "moon", class: ThemeSwitchClass.iconDark, type: "components" })), h("gov-form-label", { key: 'dff2b2b454a87faa1d7e471d2a271c333c983aad', class: ThemeSwitchClass.labelLight, size: this.size }, this.labelLight), h("gov-form-label", { key: '1b682ccaff92cc4cfe8462ff2a59507fd61b114b', class: ThemeSwitchClass.labelDark, size: this.size }, this.labelDark)))));
+        return (h(Host, { key: '784ed0513ea1436bb754dc82691646422789783b', class: this.h.classes(ThemeSwitchClass.root), theme: isDark ? ThemeList.dark : ThemeList.light, size: this.size }, h("button", { key: 'd4abc155a8ae8f07d0a49c378e295c3ab57318d4', onClick: () => this.setThemeState(isDark ? ThemeList.light : ThemeList.dark), "aria-current": this.theme, "aria-label": isDark ? this.ariaLabelDark : this.ariaLabelLight }, h("span", { key: '7f713875d5618acc919702cdc60e9db58dfb9db5' }, h("span", { key: '0b57c0153047ef292b6bdc43b49e5a1a9cdc17e1', class: ThemeSwitchClass.indicator }, ThemeList.light && h("gov-icon", { key: 'ae2c751435a2bc9c1e9f8dfa4ca52e13943ada9b', name: "sun", class: ThemeSwitchClass.iconLight, type: "components" }), ThemeList.dark && h("gov-icon", { key: '7a4ee602a37742ab94dcee47a7c4970d5dce5bb6', name: "moon", class: ThemeSwitchClass.iconDark, type: "components" })), this.displayLabel && (isDark ? this.labelDark : this.labelLight)))));
     }
     static get is() { return "gov-theme-switch"; }
     static get properties() {
@@ -93,6 +94,24 @@ export class GovThemeSwitch {
                 "reflect": false,
                 "defaultValue": "\"m\""
             },
+            "displayLabel": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "false",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Display switch label"
+                },
+                "attribute": "display-label",
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "ariaLabelLight": {
                 "type": "string",
                 "mutable": false,
@@ -108,7 +127,8 @@ export class GovThemeSwitch {
                     "text": "Label in light mode"
                 },
                 "attribute": "aria-label-light",
-                "reflect": false
+                "reflect": false,
+                "defaultValue": "\"P\u0159enout na tmav\u00FD m\u00F3d\""
             },
             "ariaLabelDark": {
                 "type": "string",
@@ -125,7 +145,8 @@ export class GovThemeSwitch {
                     "text": "Label in dark mode"
                 },
                 "attribute": "aria-label-dark",
-                "reflect": false
+                "reflect": false,
+                "defaultValue": "\"P\u0159epnout na sv\u011Btl\u00FD m\u00F3d\""
             },
             "labelLight": {
                 "type": "string",
@@ -142,7 +163,8 @@ export class GovThemeSwitch {
                     "text": "Label in light mode"
                 },
                 "attribute": "label-light",
-                "reflect": false
+                "reflect": false,
+                "defaultValue": "\"Sv\u011Btl\u00FD m\u00F3d\""
             },
             "labelDark": {
                 "type": "string",
@@ -159,7 +181,8 @@ export class GovThemeSwitch {
                     "text": "Label in dark mode"
                 },
                 "attribute": "label-dark",
-                "reflect": false
+                "reflect": false,
+                "defaultValue": "\"Tmav\u00FD m\u00F3d\""
             }
         };
     }

package/dist/collection/components/gov-theme-switch/gov-theme-switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"gov-theme-switch.js","sourceRoot":"","sources":["../../../../../../src/components/gov-theme-switch/gov-theme-switch.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Element, Event, EventEmitter, h, Host, Prop, State, Watch} from \"@stencil/core\"\nimport {GovHost} from \"../../helpers/Dom/template.types\";\nimport {govHost} from \"../../helpers/Dom/template\";\nimport {ATTRIBUTE_THEME_NAME, ThemeSwitchClass, ThemeSwitchSizes, ThemeSwitchSizesType} from \"./constants\";\nimport {isWindow} from \"../../helpers/Dom/win\";\nimport {ThemeList, ThemeSwitchEvent} from \"./gov-theme-switch.types\";\nimport {validateProp} from \"../../helpers/Validate/props\";\nimport {getCookie, setCookie} from \"../../helpers/Dom/document\";\n\n@Component({\n\ttag: \"gov-theme-switch\",\n})\nexport class GovThemeSwitch {\n\tprivate h: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\n\t@Element() host: HTMLGovThemeSwitchElement\n\n\t/**\n\t * Switch's size.\n\t */\n\t@Prop() readonly size?: ThemeSwitchSizesType = \"m\"\n\t/**\n\t * Label in light mode\n\t */\n\t@Prop({attribute: \"aria-label-light\"}) readonly ariaLabelLight?: \"Přenout na tmavý mód\"\n\t/**\n\t * Label in dark mode\n\t */\n\t@Prop({attribute: \"aria-label-dark\"}) readonly ariaLabelDark?: \"Přepnout na světlý mód\"\n\t/**\n\t * Label in light mode\n\t */\n\t@Prop({attribute: \"label-light\"}) readonly labelLight?: \"Světlý mód\"\n\t/**\n\t * Label in dark mode\n\t */\n\t@Prop({attribute: \"label-dark\"}) readonly labelDark?: \"Tmavý mód\"\n\t/**\n\t * Called when the theme is changed by the user\n\t */\n\t@Event({eventName: \"gov-change\"}) govChange: EventEmitter<ThemeSwitchEvent>\n\n\t@Watch(\"size\")\n\tvalidateSize(newValue: string): void {\n\t\tvalidateProp(ThemeSwitchSizes, newValue, ThemeSwitchClass.root)\n\t}\n\n\t@Watch(\"theme\")\n\twatchTheme(newValue: ThemeList): void {\n\t\tthis.htmlElement.setAttribute(ATTRIBUTE_THEME_NAME, newValue);\n\t\tthis.htmlElement.classList.remove(...Object.keys(ThemeList));\n\t\tthis.htmlElement.classList.add(newValue);\n\t\tsetCookie(ATTRIBUTE_THEME_NAME, newValue);\n\t}\n\n\t@State() theme: ThemeList = ThemeList.auto\n\n\tprivate get storageValue() {\n\t\treturn getCookie(ATTRIBUTE_THEME_NAME)\n\t}\n\n\tprivate get htmlElement(): HTMLElement {\n\t\treturn document.documentElement\n\t}\n\n\tprivate get isSystemPrefersColorDark(): boolean {\n\t\treturn isWindow && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.initDefaultState()\n\t\tthis.validateSize(this.size)\n\t}\n\n\tprivate initDefaultState() {\n\t\tconst options = Object.keys(ThemeList);\n\t\tlet currentState = this.storageValue;\n\t\tconst htmlState = this.htmlElement.getAttribute(ATTRIBUTE_THEME_NAME)\n\n\t\tif (currentState && options.includes(currentState)) {\n\t\t\tthis.theme = currentState as ThemeList;\n\t\t} else if (htmlState && options.includes(htmlState)) {\n\t\t\tthis.theme = htmlState as ThemeList;\n\t\t} else {\n\t\t\tthis.theme = ThemeList.auto;\n\t\t}\n\t}\n\n\tprivate setThemeState = (state: ThemeList) => {\n\t\tthis.theme = state;\n\n\t\tthis.govChange.emit({\n\t\t\tcomponent: ThemeSwitchClass.root,\n\t\t\tstate: this.theme,\n\t\t\tref: this.host\n\t\t})\n\t}\n\n\trender() {\n\t\tlet isDark = this.theme === ThemeList.dark;\n\t\tif (this.theme === ThemeList.auto) {\n\t\t\tisDark = this.isSystemPrefersColorDark;\n\t\t}\n\t\treturn (\n\t\t\t<Host class={this.h.classes(ThemeSwitchClass.root)}\n\t\t\t\t  theme={isDark ? ThemeList.dark : ThemeList.light}\n\t\t\t\t  size={this.size}>\n\t\t\t\t<button onClick={() => this.setThemeState(isDark ? ThemeList.light : ThemeList.dark)}\n\t\t\t\t\t\taria-label={isDark ? this.ariaLabelLight : this.ariaLabelDark}>\n\t\t\t\t\t<span>\n\t\t\t\t\t\t<span class={ThemeSwitchClass.indicator}>\n\t\t\t\t\t\t\t{ThemeList.light && <gov-icon name=\"sun\" class={ThemeSwitchClass.iconLight} type=\"components\"></gov-icon>}\n\t\t\t\t\t\t\t{ThemeList.dark && <gov-icon name=\"moon\" class={ThemeSwitchClass.iconDark} type=\"components\"></gov-icon>}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t<gov-form-label class={ThemeSwitchClass.labelLight} size={this.size}>\n\t\t\t\t\t\t\t{this.labelLight}\n\t\t\t\t\t\t</gov-form-label>\n\t\t\t\t\t\t<gov-form-label class={ThemeSwitchClass.labelDark} size={this.size}>\n\t\t\t\t\t\t\t{this.labelDark}\n\t\t\t\t\t\t</gov-form-label>\n\t\t\t\t\t</span>\n\t\t\t\t</button>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}
+{"version":3,"file":"gov-theme-switch.js","sourceRoot":"","sources":["../../../../../../src/components/gov-theme-switch/gov-theme-switch.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAC,MAAM,eAAe,CAAA;AAElG,OAAO,EAAC,OAAO,EAAC,MAAM,4BAA4B,CAAC;AACnD,OAAO,EAAC,oBAAoB,EAAE,gBAAgB,EAAE,gBAAgB,EAAuB,MAAM,aAAa,CAAC;AAC3G,OAAO,EAAC,QAAQ,EAAC,MAAM,uBAAuB,CAAC;AAC/C,OAAO,EAAC,SAAS,EAAmB,MAAM,0BAA0B,CAAC;AACrE,OAAO,EAAC,YAAY,EAAC,MAAM,8BAA8B,CAAC;AAC1D,OAAO,EAAC,SAAS,EAAE,SAAS,EAAC,MAAM,4BAA4B,CAAC;AAKhE,MAAM,OAAO,cAAc;IAG1B;QAiFQ,kBAAa,GAAG,CAAC,KAAgB,EAAE,EAAE;YAC5C,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;YAEnB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;gBACnB,SAAS,EAAE,gBAAgB,CAAC,IAAI;gBAChC,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,GAAG,EAAE,IAAI,CAAC,IAAI;aACd,CAAC,CAAA;QACH,CAAC,CAAA;oBAhF8C,GAAG;4BAIW,KAAK;8BAIA,sBAAsB;6BAIxB,wBAAwB;0BAI9B,YAAY;yBAIf,WAAW;qBAmBtC,SAAS,CAAC,IAAI;QA/CzC,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;KAC3B;IAkCD,YAAY,CAAC,QAAgB;QAC5B,YAAY,CAAC,gBAAgB,EAAE,QAAQ,EAAE,gBAAgB,CAAC,IAAI,CAAC,CAAA;IAChE,CAAC;IAGD,UAAU,CAAC,QAAmB;QAC7B,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,oBAAoB,EAAE,QAAQ,CAAC,CAAC;QAC9D,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,MAAM,CAAC,GAAG,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC;QAC7D,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;QACzC,SAAS,CAAC,oBAAoB,EAAE,QAAQ,CAAC,CAAC;IAC3C,CAAC;IAID,IAAY,YAAY;QACvB,OAAO,SAAS,CAAC,oBAAoB,CAAC,CAAA;IACvC,CAAC;IAED,IAAY,WAAW;QACtB,OAAO,QAAQ,CAAC,eAAe,CAAA;IAChC,CAAC;IAED,IAAY,wBAAwB;QACnC,OAAO,QAAQ,IAAI,MAAM,CAAC,UAAU,IAAI,MAAM,CAAC,UAAU,CAAC,8BAA8B,CAAC,CAAC,OAAO,CAAC;IACnG,CAAC;IAED,iBAAiB;QAChB,IAAI,CAAC,gBAAgB,EAAE,CAAA;QACvB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;IAC7B,CAAC;IAEO,gBAAgB;QACvB,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QACvC,IAAI,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC;QACrC,MAAM,SAAS,GAAG,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,oBAAoB,CAAC,CAAA;QAErE,IAAI,YAAY,IAAI,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAC,EAAE,CAAC;YACpD,IAAI,CAAC,KAAK,GAAG,YAAyB,CAAC;QACxC,CAAC;aAAM,IAAI,SAAS,IAAI,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAC,EAAE,CAAC;YACrD,IAAI,CAAC,KAAK,GAAG,SAAsB,CAAC;QACrC,CAAC;aAAM,CAAC;YACP,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC,IAAI,CAAC;QAC7B,CAAC;IACF,CAAC;IAYD,MAAM;QACL,IAAI,MAAM,GAAG,IAAI,CAAC,KAAK,KAAK,SAAS,CAAC,IAAI,CAAC;QAC3C,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,CAAC,IAAI,EAAE,CAAC;YACnC,MAAM,GAAG,IAAI,CAAC,wBAAwB,CAAC;QACxC,CAAC;QACD,OAAO,CACN,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,gBAAgB,CAAC,IAAI,CAAC,EAC/C,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,KAAK,EAChD,IAAI,EAAE,IAAI,CAAC,IAAI;YACjB,+DAAQ,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC,kBACpE,IAAI,CAAC,KAAK,gBACZ,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc;gBAC9D;oBACC,6DAAM,KAAK,EAAE,gBAAgB,CAAC,SAAS;wBACrC,SAAS,CAAC,KAAK,IAAI,iEAAU,IAAI,EAAC,KAAK,EAAC,KAAK,EAAE,gBAAgB,CAAC,SAAS,EAAE,IAAI,EAAC,YAAY,GAAY;wBACxG,SAAS,CAAC,IAAI,IAAI,iEAAU,IAAI,EAAC,MAAM,EAAC,KAAK,EAAE,gBAAgB,CAAC,QAAQ,EAAE,IAAI,EAAC,YAAY,GAAY,CAClG;oBACN,IAAI,CAAC,YAAY,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,CAC3D,CACC,CACH,CACP,CAAA;IACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import {Component, Element, Event, EventEmitter, h, Host, Prop, State, Watch} from \"@stencil/core\"\nimport {GovHost} from \"../../helpers/Dom/template.types\";\nimport {govHost} from \"../../helpers/Dom/template\";\nimport {ATTRIBUTE_THEME_NAME, ThemeSwitchClass, ThemeSwitchSizes, ThemeSwitchSizesType} from \"./constants\";\nimport {isWindow} from \"../../helpers/Dom/win\";\nimport {ThemeList, ThemeSwitchEvent} from \"./gov-theme-switch.types\";\nimport {validateProp} from \"../../helpers/Validate/props\";\nimport {getCookie, setCookie} from \"../../helpers/Dom/document\";\n\n@Component({\n\ttag: \"gov-theme-switch\",\n})\nexport class GovThemeSwitch {\n\tprivate h: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\n\t@Element() host: HTMLGovThemeSwitchElement\n\n\t/**\n\t * Switch's size.\n\t */\n\t@Prop() readonly size?: ThemeSwitchSizesType = \"m\"\n\t/**\n\t * Display switch label\n\t */\n\t@Prop({attribute: \"display-label\"}) readonly displayLabel? = false\n\t/**\n\t * Label in light mode\n\t */\n\t@Prop({attribute: \"aria-label-light\"}) readonly ariaLabelLight? = \"Přenout na tmavý mód\"\n\t/**\n\t * Label in dark mode\n\t */\n\t@Prop({attribute: \"aria-label-dark\"}) readonly ariaLabelDark? = \"Přepnout na světlý mód\"\n\t/**\n\t * Label in light mode\n\t */\n\t@Prop({attribute: \"label-light\"}) readonly labelLight? =  \"Světlý mód\"\n\t/**\n\t * Label in dark mode\n\t */\n\t@Prop({attribute: \"label-dark\"}) readonly labelDark? = \"Tmavý mód\"\n\t/**\n\t * Called when the theme is changed by the user\n\t */\n\t@Event({eventName: \"gov-change\"}) govChange: EventEmitter<ThemeSwitchEvent>\n\n\t@Watch(\"size\")\n\tvalidateSize(newValue: string): void {\n\t\tvalidateProp(ThemeSwitchSizes, newValue, ThemeSwitchClass.root)\n\t}\n\n\t@Watch(\"theme\")\n\twatchTheme(newValue: ThemeList): void {\n\t\tthis.htmlElement.setAttribute(ATTRIBUTE_THEME_NAME, newValue);\n\t\tthis.htmlElement.classList.remove(...Object.keys(ThemeList));\n\t\tthis.htmlElement.classList.add(newValue);\n\t\tsetCookie(ATTRIBUTE_THEME_NAME, newValue);\n\t}\n\n\t@State() theme: ThemeList = ThemeList.auto\n\n\tprivate get storageValue() {\n\t\treturn getCookie(ATTRIBUTE_THEME_NAME)\n\t}\n\n\tprivate get htmlElement(): HTMLElement {\n\t\treturn document.documentElement\n\t}\n\n\tprivate get isSystemPrefersColorDark(): boolean {\n\t\treturn isWindow && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.initDefaultState()\n\t\tthis.validateSize(this.size)\n\t}\n\n\tprivate initDefaultState() {\n\t\tconst options = Object.keys(ThemeList);\n\t\tlet currentState = this.storageValue;\n\t\tconst htmlState = this.htmlElement.getAttribute(ATTRIBUTE_THEME_NAME)\n\n\t\tif (currentState && options.includes(currentState)) {\n\t\t\tthis.theme = currentState as ThemeList;\n\t\t} else if (htmlState && options.includes(htmlState)) {\n\t\t\tthis.theme = htmlState as ThemeList;\n\t\t} else {\n\t\t\tthis.theme = ThemeList.auto;\n\t\t}\n\t}\n\n\tprivate setThemeState = (state: ThemeList) => {\n\t\tthis.theme = state;\n\n\t\tthis.govChange.emit({\n\t\t\tcomponent: ThemeSwitchClass.root,\n\t\t\tstate: this.theme,\n\t\t\tref: this.host\n\t\t})\n\t}\n\n\trender() {\n\t\tlet isDark = this.theme === ThemeList.dark;\n\t\tif (this.theme === ThemeList.auto) {\n\t\t\tisDark = this.isSystemPrefersColorDark;\n\t\t}\n\t\treturn (\n\t\t\t<Host class={this.h.classes(ThemeSwitchClass.root)}\n\t\t\t\t  theme={isDark ? ThemeList.dark : ThemeList.light}\n\t\t\t\t  size={this.size}>\n\t\t\t\t<button onClick={() => this.setThemeState(isDark ? ThemeList.light : ThemeList.dark)}\n\t\t\t\t\t\taria-current={this.theme}\n\t\t\t\t\t\taria-label={isDark ? this.ariaLabelDark : this.ariaLabelLight}>\n\t\t\t\t\t<span>\n\t\t\t\t\t\t<span class={ThemeSwitchClass.indicator}>\n\t\t\t\t\t\t\t{ThemeList.light && <gov-icon name=\"sun\" class={ThemeSwitchClass.iconLight} type=\"components\"></gov-icon>}\n\t\t\t\t\t\t\t{ThemeList.dark && <gov-icon name=\"moon\" class={ThemeSwitchClass.iconDark} type=\"components\"></gov-icon>}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t{this.displayLabel && (isDark ? this.labelDark : this.labelLight)}\n\t\t\t\t\t</span>\n\t\t\t\t</button>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}

package/dist/collection/components/gov-tile/container/gov-tiles.js

@@ -7,7 +7,7 @@ export class GovTiles {
         this.h = govHost(this.host);
     }
     render() {
-        return (h(Host, { key: 'edb08ecaceb976d51978baf7ba3779d7e4e333cc', class: this.h.classes(TilesClass.root) }, h("slot", { key: 'a4aa065a8e108b9ceb692c264dec8c4fc559f80e' })));
+        return (h(Host, { key: '18eb380e2fe62b54a90c5c758c62c985107c98d4', class: this.h.classes(TilesClass.root) }, h("slot", { key: '9746ede80d0daa8776208afb5cef44b7adb0d7fc' })));
     }
     static get is() { return "gov-tiles"; }
     static get properties() {

package/dist/collection/components/gov-tile/gov-tile.js

@@ -11,7 +11,7 @@ export class GovTile {
         this.h = govHost(this.host);
     }
     render() {
-        return (h(Host, { key: '3fd4f5bb8f7cdcdb5a6bbed610ed4ab6ec2837f5', class: this.h.classes(TileClass.root), size: this.size, orientation: this.orientation, clickable: this.href ? true : null }, h("slot", { key: '97179af17c8f8b16de49ca36a7c548d20e53cbdf', name: "icon" }), h("div", { key: 'a60a8e60effd1337cc11c5afb347ab395673d724', class: TileClass.content }, h("div", { key: 'b27682c73305417442d9ebfd27e02cc80d10034c', class: TileClass.text }, h("div", { key: '0c891f670607dde529d5ef6b1c86a843b7600a30', class: TileClass.title }, this.href ? (h(Fragment, null, h("a", { href: this.href, target: this.target, class: TileClass.link, ref: el => (this.triggerRef = el) }, h("slot", { name: "title" })), h("span", { class: TileClass.icon }, h("gov-icon", { name: "chevron-right", type: "components" })))) : (h("slot", { name: "title" }))), h("div", { key: 'dcb5f3be57fa6ebaa507c12c9394f1b12837856e', class: `${TileClass.annotation} ${this.href ? `${TileClass.annotation}--padding` : ''}` }, h("slot", { key: 'c3b7fe9ef111769219f1d915929112fe083927c8' }))), h("slot", { key: '98173ea276fedd176720b79e5a55b3b2d5272536', name: "button" }))));
+        return (h(Host, { key: 'c766f3d54f15e5a49a877fa2e67593d084f487f7', class: this.h.classes(TileClass.root), size: this.size, orientation: this.orientation, clickable: this.href ? true : null }, h("slot", { key: 'd07b106d781fead65a124c82d11ebe991fddfece', name: "icon" }), h("div", { key: 'eeee0397b4384a473f3782750d1e04f0c8c7894d', class: TileClass.content }, h("div", { key: 'f4081902e55b964b1ebbdd43f7b189f83dce8690', class: TileClass.text }, h("div", { key: '3bf8cf35db6f667de7c278786787e38b1392a5b2', class: TileClass.title }, this.href ? (h(Fragment, null, h("a", { href: this.href, target: this.target, class: TileClass.link, ref: el => (this.triggerRef = el) }, h("slot", { name: "title" })), h("span", { class: TileClass.icon }, h("gov-icon", { name: "chevron-right", type: "components" })))) : (h("slot", { name: "title" }))), h("div", { key: '088f60531285a1457277352a011766f809d9280d', class: `${TileClass.annotation} ${this.href ? `${TileClass.annotation}--padding` : ''}` }, h("slot", { key: '8d4a612e3aff054a60ec1030eb5a28903595ea6a' }))), h("slot", { key: 'f7610d06a6d951b3a24f2e129342bb82c5e9d767', name: "button" }))));
     }
     /**
      * Returns a clickable element instance

package/dist/collection/components/gov-toast/gov-toast.js

@@ -53,7 +53,7 @@ export class GovToast {
         }
     }
     render() {
-        return (h(Host, { key: '897da92a579e5854078657783d54c4fcca1f0311', class: this.h.classes(ToastClass.root), "data-toast-id": this.toastId, gravity: this.gravity, position: this.position, color: this.color, type: this.type, style: { "--toast-duration": this.time + "ms" } }, this.h.hasSlot("icon") && (h("span", { key: '50b2dde54f6e566f95c81bbd5dd6c27870338a70', class: ToastClass.icon }, h("slot", { key: 'f47d01268f3098f56b064fc41dc18bab64771073', name: "icon" }))), h("div", Object.assign({ key: '4e508603bd41bc5375ecf2d84e5a1df239fcc6c4', class: ToastClass.content }, this.inheritedAttributes, { "aria-live": "polite", role: "status" }), h("slot", { key: 'ff7e107c1486319621a1832bdcc0387f56dc56db' })), h("gov-button", { key: 'dfe2964f40d66df0335219b9bc66f5a316ecf8ca', size: "s", "aria-label": this.accessibleCloseLabel, color: this.isBold ? this.color : "neutral", type: "base", "on-gov-click": this.onCloseHandler.bind(this), class: ToastClass.close }, this.closeLabel ? this.closeLabel : h("gov-icon", { name: "x-lg", type: "components" })), h("div", { key: '5f0c872a74f8cac07431903519ecc191322d4397', class: ToastClass.timer })));
+        return (h(Host, { key: '632972ed59aac0d696428d6f32e6c99615ccf687', class: this.h.classes(ToastClass.root), "data-toast-id": this.toastId, gravity: this.gravity, position: this.position, color: this.color, type: this.type, style: { "--toast-duration": this.time + "ms" } }, this.h.hasSlot("icon") && (h("span", { key: 'da93a05f1976eeb4e356160fd0daea409b836a05', class: ToastClass.icon }, h("slot", { key: 'd374f5dea570b27643d960e65d0d5b2c710cb2b4', name: "icon" }))), h("div", Object.assign({ key: '1680aff627c809348ae7812ab72a34dbad33a368', class: ToastClass.content }, this.inheritedAttributes, { "aria-live": "polite", role: "status" }), h("slot", { key: '8208b697e9fbefd964a17c6bfdb06d3a5ff9d2f2' })), h("gov-button", { key: '9f05e19a672f66c2203a5556370e12e2ce7819f7', size: "s", "aria-label": this.accessibleCloseLabel, color: this.isBold ? this.color : "neutral", type: "base", "on-gov-click": this.onCloseHandler.bind(this), class: ToastClass.close }, this.closeLabel ? this.closeLabel : h("gov-icon", { name: "x-lg", type: "components" })), h("div", { key: 'a954d22ce3a0e06e2d17aa14903dae7264d9e03c', class: ToastClass.timer })));
     }
     onCloseHandler() {
         this.govClose.emit(this.toastId);

package/dist/collection/components/gov-tooltip/gov-tooltip-content.js

@@ -29,7 +29,7 @@ export class GovTooltipContent {
         }
     }
     render() {
-        return (h(Host, { key: '9775080ab420c435e879ee1516f16bd7fb35f18d', class: TooltipContentClass.root, role: "tooltip", hidden: !this.isVisible, "aria-hidden": !toBoolAttr(this.isVisible), "is-visible": this.isVisible }, h("slot", { key: 'b5a4adc4ff5ce735d2c1d3688a031e08cb8a97a1' }), this.persist ? (h("gov-button", { "on-gov-click": this.hideContent.bind(this), color: this.color, size: this.size, type: "base" }, h("gov-icon", { slot: "icon-start", name: "x-lg", type: "components" }))) : null));
+        return (h(Host, { key: '965998f4788ddd5dffd01b53073a001023cd9037', class: TooltipContentClass.root, role: "tooltip", hidden: !this.isVisible, "aria-hidden": !toBoolAttr(this.isVisible), "is-visible": this.isVisible }, h("slot", { key: 'fe9d1ee13a11077947492341836f8f25c1f8881f' }), this.persist ? (h("gov-button", { "on-gov-click": this.hideContent.bind(this), color: this.color, size: this.size, type: "base" }, h("gov-icon", { slot: "icon-start", name: "x-lg", type: "components" }))) : null));
     }
     static get is() { return "gov-tooltip-content"; }
     static get properties() {

package/dist/collection/components/gov-tooltip/gov-tooltip.js

@@ -196,11 +196,11 @@ export class GovTooltip {
     }
     render() {
         var _a;
-        return (h(Host, { key: 'bc4cfa206b2e4060ca6070f0d4796df1a5df1bfc', id: this.tooltipId, class: this.h.classes(TooltipClass.root), position: this.position }, h("span", { key: '8ce3bf37e9ab13190c476db7cf47b7d0319719fe', role: 'button', tabindex: 0, onKeyPress: () => this.showTooltip(), onBlur: () => {
+        return (h(Host, { key: '2e96da1a9d7afd70abb4ffd2e979210cc179680e', id: this.tooltipId, class: this.h.classes(TooltipClass.root), position: this.position }, h("span", { key: '9c9c06d716556faa56f5ba9a952ea867c5533b2b', role: 'button', tabindex: 0, onKeyPress: () => this.showTooltip(), onBlur: () => {
                 if (this.persist === false) {
                     this.hideTooltip();
                 }
-            }, "aria-describedby": (_a = this.identifier) !== null && _a !== void 0 ? _a : this.tooltipContentId }, h("slot", { key: 'c622fcd797a2c0dd303395d2d6391fbc747e4d18' }))));
+            }, "aria-describedby": (_a = this.identifier) !== null && _a !== void 0 ? _a : this.tooltipContentId }, h("slot", { key: '29549049c0bfbe311980aa6a630ff9eff8e35f40' }))));
     }
     /**
      * Showing the modal

package/dist/collection/components/gov-wizard/gov-wizard-item.js

@@ -36,8 +36,8 @@ export class GovWizardItem {
     render() {
         const triggerId = this.identifier || this.triggerId;
         const Tag = this.collapsible ? Tags.BUTTON : Tags.DIV;
-        const prefixSlot = this.h.hasSlot("prefix") && (h("span", { key: '5b4e2b9c66285827959d4df9801cef2b8de29764', class: WizardItemClass.prefix }, h("slot", { key: '6ffa576fe3be8febb899186208d8aa7ae1fecd96', name: "prefix" })));
-        return (h(Host, { key: '60fd0ec72cb212f73dddeec698c2003117b1fc02', class: this.h.classes(WizardItemClass.root), "is-expanded": this.isExpanded, color: this.color, size: this.size, role: "listitem", collapsible: this.collapsible, hydrated: this.hydrated }, h("div", { key: '02e7e16d0d559a3fd3f88a85b23d6263dfb3eeb8', class: WizardItemClass.header }, prefixSlot, this.collapsible ? (h(Tag, { id: triggerId, class: this.h.classes(WizardItemClass.label), "aria-expanded": booleanString(this.isExpanded), "aria-controls": this.contentId, disabled: this.disabled, "aria-disabled": toBoolAttrIfDefined(this.disabled), onClick: (e) => {
+        const prefixSlot = this.h.hasSlot("prefix") && (h("span", { key: 'abdd15cfa834f393b29335ea2bda28cd1dfeef46', class: WizardItemClass.prefix }, h("slot", { key: '123c495809091879ab3d985b9bcb4a22005e4b75', name: "prefix" })));
+        return (h(Host, { key: '463384ea408a20992bf6f30f142fce7146fabf53', class: this.h.classes(WizardItemClass.root), "is-expanded": this.isExpanded, color: this.color, size: this.size, role: "listitem", collapsible: this.collapsible, hydrated: this.hydrated }, h("div", { key: '0b60621607cd8c48fe05fd1755f9f7b8514d425d', class: WizardItemClass.header }, prefixSlot, this.collapsible ? (h(Tag, { id: triggerId, class: this.h.classes(WizardItemClass.label), "aria-expanded": booleanString(this.isExpanded), "aria-controls": this.contentId, disabled: this.disabled, "aria-disabled": toBoolAttrIfDefined(this.disabled), onClick: (e) => {
                 e.preventDefault();
                 e.stopPropagation();
                 this.toggle();

package/dist/collection/components/gov-wizard/gov-wizard.js

@@ -40,7 +40,7 @@ export class GovWizard {
         this.hydrated = true;
     }
     render() {
-        return (h(Host, { key: '3aa896212e044cc3952da66a72b1ca7a708ea0b3', class: this.h.classes(WizardClass.root), role: "list", size: this.size, hydrated: this.hydrated }, h("slot", { key: 'aeb21d97bb87dd3c9b5cd01abe2482c39e2ba8cf' })));
+        return (h(Host, { key: 'd75ce2d5499cef41ac6b316f313b0c5c446d0b55', class: this.h.classes(WizardClass.root), role: "list", size: this.size, hydrated: this.hydrated }, h("slot", { key: 'ea151639d058fa4e50427a893fa167969a453d39' })));
     }
     /**
      * Validate the WCAG attributes of the component

package/dist/collection/pages/Card.js

@@ -2,34 +2,12 @@ class CardPage extends HTMLElement {
     connectedCallback() {
         this.innerHTML = `
 
-		<gov-container style="width: 800px;">
+		<gov-container style="max-width: 800px;">
 			<h2>Card</h2>
 
-			<gov-card collapsible open="true">
-				<h3 slot="headline">Fusce tellus odio, dapibus id fermentum quis</h3>
-				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ipsum vitae etiam dui eget lectus vulputate ornare.</p>
-			</gov-card>
-			<br>
-			<gov-card collapsible>
-				<h3 slot="headline">Fusce tellus odio, dapibus id fermentum quis</h3>
-				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ipsum vitae etiam dui eget lectus vulputate ornare.</p>
-				<gov-button color="primary" size="s" type="solid" href="http://localhost:3333/button">
-					Button
-				</gov-button>
-				<p slot="footer">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ipsum vitae etiam dui eget lectus vulputate ornare.</p>
-			</gov-card>
-			<br>
+			<h3>Vertical</h3>
 			<gov-card>
-				<h3 slot="headline">Fusce tellus odio, dapibus id fermentum quis</h3>
-				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ipsum vitae etiam dui eget lectus vulputate ornare.</p>
-				<gov-button color="primary" size="s" type="solid" href="http://localhost:3333/button">
-					Button
-				</gov-button>
-				<p slot="footer">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ipsum vitae etiam dui eget lectus vulputate ornare.</p>
-			</gov-card>
-			<br>
-			<gov-card expanded>
-				<img slot="img" src="https://picsum.photos/536/354" src="" alt="Obárzek" width="536" height="354">
+				<img slot="img" src="https://picsum.photos/536/354" alt="Obárzek" width="536" height="354">
 				<p><b>Commodo consequat.</b></p>
 				<p>Commodo consequat. Nullam rhoncus aliquam metus.</p>
 				<gov-button color="primary" size="s" type="solid" href="http://localhost:3333/button">
@@ -41,33 +19,40 @@ class CardPage extends HTMLElement {
 			</gov-card>
 			<br>
 			<gov-card>
-				<h3 slot="headline">Fusce tellus odio, dapibus id fermentum quis</h3>
-				<gov-icon name="car" type="complex"></gov-icon>
+				<gov-icon slot="icon" name="car" type="complex" color="primary"></gov-icon>
+				<h4>Fusce tellus odio, dapibus id fermentum quis</h4>
 				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras elementum. Fusce tellus odio, dapibus id fermentum quis, suscipit id erat. Fusce tellus.</p>
 				<gov-button color="primary" size="s" type="outlined" href="http://localhost:3333/button">
 					Learn more
 				</gov-button>
 			</gov-card>
 			<br>
-			<h3>Promotion</h3>
-			<gov-card promotion>
-				<gov-icon slot="icon" name="car" type="complex"></gov-icon>
+			<gov-card collapsible>
+				<h3 slot="headline">Fusce tellus odio, dapibus id fermentum quis</h3>
+				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ipsum vitae etiam dui eget lectus vulputate ornare.</p>
+				<gov-button color="primary" size="s" type="solid" href="http://localhost:3333/button">
+					Button
+				</gov-button>
+				<p slot="footer">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ipsum vitae etiam dui eget lectus vulputate ornare.</p>
+			</gov-card>
+			<br>
+			<h3>Horizontal</h3>
+			<gov-card direction="horizontal">
+				<img slot="img" src="https://picsum.photos/536/354" alt="Obárzek" width="536" height="354">
 				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras elementum. Fusce tellus odio, dapibus id fermentum quis, suscipit id erat. Fusce tellus.</p>
-				<gov-button slot="btn" color="primary" size="s" type="outlined" href="http://localhost:3333/button">
+				<gov-button color="primary" size="s" type="outlined" href="http://localhost:3333/button">
 					Learn more
 				</gov-button>
 			</gov-card>
-			<gov-container style="width: 350px; margin-top: 16px;">
-			<gov-card promotion>
+			<br>
+			<gov-card direction="horizontal">
 				<gov-icon slot="icon" name="car" type="complex"></gov-icon>
 				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras elementum. Fusce tellus odio, dapibus id fermentum quis, suscipit id erat. Fusce tellus.</p>
-				<gov-button slot="btn" color="primary" size="s" type="outlined" href="http://localhost:3333/button">
+				<gov-button color="primary" size="s" type="outlined" href="http://localhost:3333/button">
 					Learn more
 				</gov-button>
 			</gov-card>
-			</div>
-		</div>
-
+		</gov-container>
 		`;
     }
 }

package/dist/collection/pages/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../../../src/pages/Card.ts"],"names":[],"mappings":"AAAA,MAAM,QAAS,SAAQ,WAAW;IACjC,iBAAiB;QAChB,IAAI,CAAC,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoEhB,CAAA;IACF,CAAC;CACD;AAED,IAAI,cAAc,CAAC,GAAG,CAAC,WAAW,CAAC,KAAK,SAAS,EAAE,CAAC;IACnD,cAAc,CAAC,MAAM,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAA;AAC7C,CAAC","sourcesContent":["class CardPage extends HTMLElement {\n\tconnectedCallback() {\n\t\tthis.innerHTML = `\n\n\t\t<gov-container style=\"width: 800px;\">\n\t\t\t<h2>Card</h2>\n\n\t\t\t<gov-card collapsible open=\"true\">\n\t\t\t\t<h3 slot=\"headline\">Fusce tellus odio, dapibus id fermentum quis</h3>\n\t\t\t\t<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ipsum vitae etiam dui eget lectus vulputate ornare.</p>\n\t\t\t</gov-card>\n\t\t\t<br>\n\t\t\t<gov-card collapsible>\n\t\t\t\t<h3 slot=\"headline\">Fusce tellus odio, dapibus id fermentum quis</h3>\n\t\t\t\t<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ipsum vitae etiam dui eget lectus vulputate ornare.</p>\n\t\t\t\t<gov-button color=\"primary\" size=\"s\" type=\"solid\" href=\"http://localhost:3333/button\">\n\t\t\t\t\tButton\n\t\t\t\t</gov-button>\n\t\t\t\t<p slot=\"footer\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ipsum vitae etiam dui eget lectus vulputate ornare.</p>\n\t\t\t</gov-card>\n\t\t\t<br>\n\t\t\t<gov-card>\n\t\t\t\t<h3 slot=\"headline\">Fusce tellus odio, dapibus id fermentum quis</h3>\n\t\t\t\t<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ipsum vitae etiam dui eget lectus vulputate ornare.</p>\n\t\t\t\t<gov-button color=\"primary\" size=\"s\" type=\"solid\" href=\"http://localhost:3333/button\">\n\t\t\t\t\tButton\n\t\t\t\t</gov-button>\n\t\t\t\t<p slot=\"footer\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ipsum vitae etiam dui eget lectus vulputate ornare.</p>\n\t\t\t</gov-card>\n\t\t\t<br>\n\t\t\t<gov-card expanded>\n\t\t\t\t<img slot=\"img\" src=\"https://picsum.photos/536/354\" src=\"\" alt=\"Obárzek\" width=\"536\" height=\"354\">\n\t\t\t\t<p><b>Commodo consequat.</b></p>\n\t\t\t\t<p>Commodo consequat. Nullam rhoncus aliquam metus.</p>\n\t\t\t\t<gov-button color=\"primary\" size=\"s\" type=\"solid\" href=\"http://localhost:3333/button\">\n\t\t\t\t\tJak založit\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color=\"primary\" size=\"s\" type=\"outlined\" href=\"http://localhost:3333/button\">\n\t\t\t\t\tZjistit více\n\t\t\t\t</gov-button>\n\t\t\t</gov-card>\n\t\t\t<br>\n\t\t\t<gov-card>\n\t\t\t\t<h3 slot=\"headline\">Fusce tellus odio, dapibus id fermentum quis</h3>\n\t\t\t\t<gov-icon name=\"car\" type=\"complex\"></gov-icon>\n\t\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras elementum. Fusce tellus odio, dapibus id fermentum quis, suscipit id erat. Fusce tellus.</p>\n\t\t\t\t<gov-button color=\"primary\" size=\"s\" type=\"outlined\" href=\"http://localhost:3333/button\">\n\t\t\t\t\tLearn more\n\t\t\t\t</gov-button>\n\t\t\t</gov-card>\n\t\t\t<br>\n\t\t\t<h3>Promotion</h3>\n\t\t\t<gov-card promotion>\n\t\t\t\t<gov-icon slot=\"icon\" name=\"car\" type=\"complex\"></gov-icon>\n\t\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras elementum. Fusce tellus odio, dapibus id fermentum quis, suscipit id erat. Fusce tellus.</p>\n\t\t\t\t<gov-button slot=\"btn\" color=\"primary\" size=\"s\" type=\"outlined\" href=\"http://localhost:3333/button\">\n\t\t\t\t\tLearn more\n\t\t\t\t</gov-button>\n\t\t\t</gov-card>\n\t\t\t<gov-container style=\"width: 350px; margin-top: 16px;\">\n\t\t\t<gov-card promotion>\n\t\t\t\t<gov-icon slot=\"icon\" name=\"car\" type=\"complex\"></gov-icon>\n\t\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras elementum. Fusce tellus odio, dapibus id fermentum quis, suscipit id erat. Fusce tellus.</p>\n\t\t\t\t<gov-button slot=\"btn\" color=\"primary\" size=\"s\" type=\"outlined\" href=\"http://localhost:3333/button\">\n\t\t\t\t\tLearn more\n\t\t\t\t</gov-button>\n\t\t\t</gov-card>\n\t\t\t</div>\n\t\t</div>\n\n\t\t`\n\t}\n}\n\nif (customElements.get('card-page') === undefined) {\n\tcustomElements.define('card-page', CardPage)\n}\n"]}
+{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../../../src/pages/Card.ts"],"names":[],"mappings":"AAAA,MAAM,QAAS,SAAQ,WAAW;IACjC,iBAAiB;QAChB,IAAI,CAAC,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqDhB,CAAA;IACF,CAAC;CACD;AAED,IAAI,cAAc,CAAC,GAAG,CAAC,WAAW,CAAC,KAAK,SAAS,EAAE,CAAC;IACnD,cAAc,CAAC,MAAM,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAA;AAC7C,CAAC","sourcesContent":["class CardPage extends HTMLElement {\n\tconnectedCallback() {\n\t\tthis.innerHTML = `\n\n\t\t<gov-container style=\"max-width: 800px;\">\n\t\t\t<h2>Card</h2>\n\n\t\t\t<h3>Vertical</h3>\n\t\t\t<gov-card>\n\t\t\t\t<img slot=\"img\" src=\"https://picsum.photos/536/354\" alt=\"Obárzek\" width=\"536\" height=\"354\">\n\t\t\t\t<p><b>Commodo consequat.</b></p>\n\t\t\t\t<p>Commodo consequat. Nullam rhoncus aliquam metus.</p>\n\t\t\t\t<gov-button color=\"primary\" size=\"s\" type=\"solid\" href=\"http://localhost:3333/button\">\n\t\t\t\t\tJak založit\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color=\"primary\" size=\"s\" type=\"outlined\" href=\"http://localhost:3333/button\">\n\t\t\t\t\tZjistit více\n\t\t\t\t</gov-button>\n\t\t\t</gov-card>\n\t\t\t<br>\n\t\t\t<gov-card>\n\t\t\t\t<gov-icon slot=\"icon\" name=\"car\" type=\"complex\" color=\"primary\"></gov-icon>\n\t\t\t\t<h4>Fusce tellus odio, dapibus id fermentum quis</h4>\n\t\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras elementum. Fusce tellus odio, dapibus id fermentum quis, suscipit id erat. Fusce tellus.</p>\n\t\t\t\t<gov-button color=\"primary\" size=\"s\" type=\"outlined\" href=\"http://localhost:3333/button\">\n\t\t\t\t\tLearn more\n\t\t\t\t</gov-button>\n\t\t\t</gov-card>\n\t\t\t<br>\n\t\t\t<gov-card collapsible>\n\t\t\t\t<h3 slot=\"headline\">Fusce tellus odio, dapibus id fermentum quis</h3>\n\t\t\t\t<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ipsum vitae etiam dui eget lectus vulputate ornare.</p>\n\t\t\t\t<gov-button color=\"primary\" size=\"s\" type=\"solid\" href=\"http://localhost:3333/button\">\n\t\t\t\t\tButton\n\t\t\t\t</gov-button>\n\t\t\t\t<p slot=\"footer\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ipsum vitae etiam dui eget lectus vulputate ornare.</p>\n\t\t\t</gov-card>\n\t\t\t<br>\n\t\t\t<h3>Horizontal</h3>\n\t\t\t<gov-card direction=\"horizontal\">\n\t\t\t\t<img slot=\"img\" src=\"https://picsum.photos/536/354\" alt=\"Obárzek\" width=\"536\" height=\"354\">\n\t\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras elementum. Fusce tellus odio, dapibus id fermentum quis, suscipit id erat. Fusce tellus.</p>\n\t\t\t\t<gov-button color=\"primary\" size=\"s\" type=\"outlined\" href=\"http://localhost:3333/button\">\n\t\t\t\t\tLearn more\n\t\t\t\t</gov-button>\n\t\t\t</gov-card>\n\t\t\t<br>\n\t\t\t<gov-card direction=\"horizontal\">\n\t\t\t\t<gov-icon slot=\"icon\" name=\"car\" type=\"complex\"></gov-icon>\n\t\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras elementum. Fusce tellus odio, dapibus id fermentum quis, suscipit id erat. Fusce tellus.</p>\n\t\t\t\t<gov-button color=\"primary\" size=\"s\" type=\"outlined\" href=\"http://localhost:3333/button\">\n\t\t\t\t\tLearn more\n\t\t\t\t</gov-button>\n\t\t\t</gov-card>\n\t\t</gov-container>\n\t\t`\n\t}\n}\n\nif (customElements.get('card-page') === undefined) {\n\tcustomElements.define('card-page', CardPage)\n}\n"]}

package/dist/collection/pages/Flex.js

@@ -0,0 +1,62 @@
+class FlexPage extends HTMLElement {
+    connectedCallback() {
+        this.innerHTML = `
+		<style>
+			gov-flex { min-height: 100px; border: 1px solid var(--color-neutral-200); }
+			p { margin-bottom: 0; background-color: var(--color-neutral-100); }
+		</style>
+		<h2>Flex</h2>
+		<gov-flex justify-content="space-between" align-items="center">
+			<p>Text vlevo</p>
+			<p>Text uprostřed</p>
+			<p>Text vpravo</p>
+		</gov-flex>
+		<br>
+		<gov-flex gap="xl">
+			<p>Text vlevo</p>
+			<p>Text uprostřed</p>
+			<p>Text vpravo</p>
+		</gov-flex>
+		<br>
+		<gov-flex align-items="flex-end">
+			<p>Text vlevo</p>
+			<p>Text uprostřed</p>
+			<p>Text vpravo</p>
+		</gov-flex>
+		<br>
+		<gov-flex direction="column">
+			<p>Text vlevo</p>
+			<p>Text uprostřed</p>
+			<p>Text vpravo</p>
+		</gov-flex>
+		<br>
+		<gov-flex wrap="wrap" align-content="space-around">
+			<p>Text vlevo Text vlevo Text vlevo Text vlevo Text vlevo Text vlevo Text vlevo</p>
+			<p>Text uprostřed Text uprostřed Text uprostřed Text uprostřed Text uprostřed Text uprostřed Text uprostřed</p>
+			<p>Text vpravo Text vpravo Text vpravo Text vpravo Text vpravo Text vpravo Text vpravo</p>
+		</gov-flex>
+		<br>
+		<gov-flex>
+			<gov-flex style="min-height: 50px;" align-self="center">
+				<p>Text vlevo</p>
+				<p>Text uprostřed</p>
+				<p>Text vpravo</p>
+			</gov-flex>
+			<gov-flex style="min-height: 50px;">
+				<p>Text vlevo</p>
+				<p>Text uprostřed</p>
+				<p>Text vpravo</p>
+			</gov-flex>
+			<gov-flex style="min-height: 50px;">
+				<p>Text vlevo</p>
+				<p>Text uprostřed</p>
+				<p>Text vpravo</p>
+			</gov-flex>
+		</gov-flex>
+		`;
+    }
+}
+if (customElements.get('flex-page') === undefined) {
+    customElements.define('flex-page', FlexPage);
+}
+//# sourceMappingURL=Flex.js.map

package/dist/collection/pages/Flex.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Flex.js","sourceRoot":"","sources":["../../../../../src/pages/Flex.ts"],"names":[],"mappings":"AAAA,MAAM,QAAS,SAAQ,WAAW;IACjC,iBAAiB;QAChB,IAAI,CAAC,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqDhB,CAAA;IACF,CAAC;CACD;AAED,IAAI,cAAc,CAAC,GAAG,CAAC,WAAW,CAAC,KAAK,SAAS,EAAE,CAAC;IACnD,cAAc,CAAC,MAAM,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAA;AAC7C,CAAC","sourcesContent":["class FlexPage extends HTMLElement {\n\tconnectedCallback() {\n\t\tthis.innerHTML = `\n\t\t<style>\n\t\t\tgov-flex { min-height: 100px; border: 1px solid var(--color-neutral-200); }\n\t\t\tp { margin-bottom: 0; background-color: var(--color-neutral-100); }\n\t\t</style>\n\t\t<h2>Flex</h2>\n\t\t<gov-flex justify-content=\"space-between\" align-items=\"center\">\n\t\t\t<p>Text vlevo</p>\n\t\t\t<p>Text uprostřed</p>\n\t\t\t<p>Text vpravo</p>\n\t\t</gov-flex>\n\t\t<br>\n\t\t<gov-flex gap=\"xl\">\n\t\t\t<p>Text vlevo</p>\n\t\t\t<p>Text uprostřed</p>\n\t\t\t<p>Text vpravo</p>\n\t\t</gov-flex>\n\t\t<br>\n\t\t<gov-flex align-items=\"flex-end\">\n\t\t\t<p>Text vlevo</p>\n\t\t\t<p>Text uprostřed</p>\n\t\t\t<p>Text vpravo</p>\n\t\t</gov-flex>\n\t\t<br>\n\t\t<gov-flex direction=\"column\">\n\t\t\t<p>Text vlevo</p>\n\t\t\t<p>Text uprostřed</p>\n\t\t\t<p>Text vpravo</p>\n\t\t</gov-flex>\n\t\t<br>\n\t\t<gov-flex wrap=\"wrap\" align-content=\"space-around\">\n\t\t\t<p>Text vlevo Text vlevo Text vlevo Text vlevo Text vlevo Text vlevo Text vlevo</p>\n\t\t\t<p>Text uprostřed Text uprostřed Text uprostřed Text uprostřed Text uprostřed Text uprostřed Text uprostřed</p>\n\t\t\t<p>Text vpravo Text vpravo Text vpravo Text vpravo Text vpravo Text vpravo Text vpravo</p>\n\t\t</gov-flex>\n\t\t<br>\n\t\t<gov-flex>\n\t\t\t<gov-flex style=\"min-height: 50px;\" align-self=\"center\">\n\t\t\t\t<p>Text vlevo</p>\n\t\t\t\t<p>Text uprostřed</p>\n\t\t\t\t<p>Text vpravo</p>\n\t\t\t</gov-flex>\n\t\t\t<gov-flex style=\"min-height: 50px;\">\n\t\t\t\t<p>Text vlevo</p>\n\t\t\t\t<p>Text uprostřed</p>\n\t\t\t\t<p>Text vpravo</p>\n\t\t\t</gov-flex>\n\t\t\t<gov-flex style=\"min-height: 50px;\">\n\t\t\t\t<p>Text vlevo</p>\n\t\t\t\t<p>Text uprostřed</p>\n\t\t\t\t<p>Text vpravo</p>\n\t\t\t</gov-flex>\n\t\t</gov-flex>\n\t\t`\n\t}\n}\n\nif (customElements.get('flex-page') === undefined) {\n\tcustomElements.define('flex-page', FlexPage)\n}\n"]}

package/dist/collection/pages/Forms.js

@@ -2068,15 +2068,15 @@ class FormsPage extends HTMLElement {
 	</gov-form-message>
 </gov-form-control>
 <h2 id="switch">Theme switch</h2>
-<gov-theme-switch size="xs" label-light="Světlý mód" label-dark="Tmavý mód"></gov-theme-switch>
+<gov-theme-switch size="xs" label-light="Světloulinký" label-dark="Tmavoulinký" display-label="true"></gov-theme-switch>
 <br>
-<gov-theme-switch size="s" label-light="Světlý mód" label-dark="Tmavý mód"></gov-theme-switch>
+<gov-theme-switch size="s" label-light="Světloučký" label-dark="Tmavoučký" display-label="true"></gov-theme-switch>
 <br>
-<gov-theme-switch size="m" label-light="Světlý mód" label-dark="Tmavý mód"></gov-theme-switch>
+<gov-theme-switch size="m" label-light="Light" label-dark="Dark" display-label="true"></gov-theme-switch>
 <br>
-<gov-theme-switch size="l" label-light="Světlý mód" label-dark="Tmavý mód"></gov-theme-switch>
+<gov-theme-switch size="l" display-label="true"></gov-theme-switch>
 <br>
-<gov-theme-switch size="xl" label-light="Světlý mód" label-dark="Tmavý mód"></gov-theme-switch>
+<gov-theme-switch size="xl" display-label="true"></gov-theme-switch>
 		`;
     }
 }