@gov-design-system-ce/components 4.2.5 → 4.2.7

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

@@ -1 +1 @@
-{"version":3,"file":"gov-wizard.js","sourceRoot":"","sources":["../../../../../../src/components/gov-wizard/gov-wizard.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AACrG,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAA;AAC3D,OAAO,EAAE,WAAW,EAAmB,WAAW,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAExF,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAA;AAEpD,OAAO,EAAE,uBAAuB,EAAE,MAAM,6BAA6B,CAAA;AACrE,OAAO,EAAE,uBAAuB,EAAE,MAAM,uBAAuB,CAAA;AAC/D,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAKzC,MAAM,OAAO,SAAS;IAMrB;QAJQ,aAAQ,GAAG,KAAK,CAAA;oBAWkB,GAAG;;;QAN5C,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;KAC3B;IAoBO,YAAY,CAAC,QAAgB;QACpC,YAAY,CAAC,WAAW,EAAE,QAAQ,EAAE,WAAW,CAAC,IAAI,CAAC,CAAA;IACtD,CAAC;IAED,iBAAiB;QAChB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;IAC7B,CAAC;IAED,gBAAgB;QACf,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,KAA+B,EAAE,EAAE;YAC5F,KAAK,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,CAAA;YACrC;;;;;cAKE;QACH,CAAC,CAAC,CAAA;IACH,CAAC;IAED,KAAK,CAAC,kBAAkB;QACvB,IAAI,uBAAuB,EAAE,EAAE,CAAC;YAC/B,MAAM,KAAK,CAAC,GAAG,CAAC,CAAA;YAChB,MAAM,IAAI,CAAC,YAAY,EAAE,CAAA;QAC1B,CAAC;IACF,CAAC;IAED,iBAAiB;QAChB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAA;IACrB,CAAC;IAED,MAAM;QACL,OAAO,CACN,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,IAAI,EAAC,MAAM,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ;YAClG,8DAAQ,CACF,CACP,CAAA;IACF,CAAC;IAED;;OAEG;IAEI,KAAK,CAAC,YAAY;QACxB,uBAAuB,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,cAAc,EAAE,WAAW,CAAC,IAAI,CAAC,CAAA;IAC/E,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, Watch } from \"@stencil/core\"\nimport { validateProp } from \"../../helpers/Validate/props\"\nimport { WizardSizes, WizardSizesType, WizardClass, WizardItemClass } from \"./constants\"\nimport { GovWizardItemChangeEvent } from \"./gov-wizard-item.d\"\nimport { govHost } from \"../../helpers/Dom/template\"\nimport { GovHost } from \"../../helpers/Dom/template.types\"\nimport { validateAccessibleLabel } from \"../../helpers/Validate/wcag\"\nimport { canValidateWcagOnRender } from \"../../helpers/Dom/win\"\nimport { delay } from \"../../utils/utils\"\n\n@Component({\n\ttag: \"gov-wizard\",\n})\nexport class GovWizard {\n\tprivate h: GovHost\n\tprivate hydrated = false\n\n\t@Element() readonly host: HTMLGovWizardElement\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\n\t/**\n\t * Size of wizard\n\t */\n\t@Prop() readonly size?: WizardSizesType = \"m\"\n\t/**\n\t * Adds accessible label for the wizard 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 wizard children state changes\n\t */\n\t@Event({ eventName: \"gov-change\" }) govChange: EventEmitter<GovWizardItemChangeEvent>\n\n\t@Watch(\"size\")\n\tprivate validateSize(newValue: string): void {\n\t\tvalidateProp(WizardSizes, newValue, WizardClass.root)\n\t}\n\n\tcomponentWillLoad(): void {\n\t\tthis.validateSize(this.size)\n\t}\n\n\tcomponentDidLoad() {\n\t\tthis.host.querySelectorAll(WizardItemClass.root).forEach((child: HTMLGovWizardItemElement) => {\n\t\t\tchild.setAttribute(\"size\", this.size)\n\t\t\t/*\n\t\t\tchild.addEventListener('gov-change', (e: GovWizardItemCustomEvent<GovWizardItemChangeEvent>) => {\n\t\t\t\te.stopPropagation()\n\t\t\t\tthis.govChange.emit(e.detail)\n\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\tconnectedCallback() {\n\t\tthis.hydrated = true\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={this.h.classes(WizardClass.root)} role=\"list\" size={this.size} hydrated={this.hydrated}>\n\t\t\t\t<slot />\n\t\t\t</Host>\n\t\t)\n\t}\n\n\t/**\n\t * Validate the WCAG attributes of the component\n\t */\n\t@Method()\n\tpublic async validateWcag(): Promise<void> {\n\t\tvalidateAccessibleLabel(this.wcagLabel, this.wcagLabelledBy, WizardClass.root)\n\t}\n}\n"]}
+{"version":3,"file":"gov-wizard.js","sourceRoot":"","sources":["../../../../../../src/components/gov-wizard/gov-wizard.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AACrG,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAA;AAC3D,OAAO,EAAE,WAAW,EAAmB,WAAW,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAExF,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAA;AAEpD,OAAO,EAAE,uBAAuB,EAAE,MAAM,6BAA6B,CAAA;AACrE,OAAO,EAAE,uBAAuB,EAAE,MAAM,uBAAuB,CAAA;AAC/D,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAKzC,MAAM,OAAO,SAAS;IAMrB;QAJQ,aAAQ,GAAG,KAAK,CAAA;QAQxB;;WAEG;QACc,SAAI,GAAqB,GAAG,CAAA;QAN5C,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;KAC3B;IAoBO,YAAY,CAAC,QAAgB;QACpC,YAAY,CAAC,WAAW,EAAE,QAAQ,EAAE,WAAW,CAAC,IAAI,CAAC,CAAA;IACtD,CAAC;IAED,iBAAiB;QAChB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;IAC7B,CAAC;IAED,gBAAgB;QACf,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,KAA+B,EAAE,EAAE;YAC5F,KAAK,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,CAAA;YACrC;;;;;cAKE;QACH,CAAC,CAAC,CAAA;IACH,CAAC;IAED,KAAK,CAAC,kBAAkB;QACvB,IAAI,uBAAuB,EAAE,EAAE,CAAC;YAC/B,MAAM,KAAK,CAAC,GAAG,CAAC,CAAA;YAChB,MAAM,IAAI,CAAC,YAAY,EAAE,CAAA;QAC1B,CAAC;IACF,CAAC;IAED,iBAAiB;QAChB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAA;IACrB,CAAC;IAED,MAAM;QACL,OAAO,CACN,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,IAAI,EAAC,MAAM,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ;YAClG,8DAAQ,CACF,CACP,CAAA;IACF,CAAC;IAED;;OAEG;IAEI,KAAK,CAAC,YAAY;QACxB,uBAAuB,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,cAAc,EAAE,WAAW,CAAC,IAAI,CAAC,CAAA;IAC/E,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, Watch } from \"@stencil/core\"\nimport { validateProp } from \"../../helpers/Validate/props\"\nimport { WizardSizes, WizardSizesType, WizardClass, WizardItemClass } from \"./constants\"\nimport { GovWizardItemChangeEvent } from \"./gov-wizard-item.d\"\nimport { govHost } from \"../../helpers/Dom/template\"\nimport { GovHost } from \"../../helpers/Dom/template.types\"\nimport { validateAccessibleLabel } from \"../../helpers/Validate/wcag\"\nimport { canValidateWcagOnRender } from \"../../helpers/Dom/win\"\nimport { delay } from \"../../utils/utils\"\n\n@Component({\n\ttag: \"gov-wizard\",\n})\nexport class GovWizard {\n\tprivate h: GovHost\n\tprivate hydrated = false\n\n\t@Element() readonly host: HTMLGovWizardElement\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\n\t/**\n\t * Size of wizard\n\t */\n\t@Prop() readonly size?: WizardSizesType = \"m\"\n\t/**\n\t * Adds accessible label for the wizard 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 wizard children state changes\n\t */\n\t@Event({ eventName: \"gov-change\" }) govChange: EventEmitter<GovWizardItemChangeEvent>\n\n\t@Watch(\"size\")\n\tprivate validateSize(newValue: string): void {\n\t\tvalidateProp(WizardSizes, newValue, WizardClass.root)\n\t}\n\n\tcomponentWillLoad(): void {\n\t\tthis.validateSize(this.size)\n\t}\n\n\tcomponentDidLoad() {\n\t\tthis.host.querySelectorAll(WizardItemClass.root).forEach((child: HTMLGovWizardItemElement) => {\n\t\t\tchild.setAttribute(\"size\", this.size)\n\t\t\t/*\n\t\t\tchild.addEventListener('gov-change', (e: GovWizardItemCustomEvent<GovWizardItemChangeEvent>) => {\n\t\t\t\te.stopPropagation()\n\t\t\t\tthis.govChange.emit(e.detail)\n\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\tconnectedCallback() {\n\t\tthis.hydrated = true\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={this.h.classes(WizardClass.root)} role=\"list\" size={this.size} hydrated={this.hydrated}>\n\t\t\t\t<slot />\n\t\t\t</Host>\n\t\t)\n\t}\n\n\t/**\n\t * Validate the WCAG attributes of the component\n\t */\n\t@Method()\n\tpublic async validateWcag(): Promise<void> {\n\t\tvalidateAccessibleLabel(this.wcagLabel, this.wcagLabelledBy, WizardClass.root)\n\t}\n}\n"]}

package/dist/collection/core/constants/sizes.js

@@ -9,7 +9,7 @@ export var Sizes;
     Sizes["_2XL"] = "2xl";
     Sizes["_3XL"] = "3xl";
     Sizes["_4XL"] = "4xl";
-    Sizes["_5XL"] = "6xl";
+    Sizes["_5XL"] = "5xl";
     Sizes["_6XL"] = "6xl";
 })(Sizes || (Sizes = {}));
 //# sourceMappingURL=sizes.js.map

package/dist/collection/core/constants/sizes.js.map

@@ -1 +1 @@
-{"version":3,"file":"sizes.js","sourceRoot":"","sources":["../../../../../../src/core/constants/sizes.ts"],"names":[],"mappings":"AAAA,MAAM,CAAN,IAAY,KAYX;AAZD,WAAY,KAAK;IAChB,qBAAY,CAAA;IACZ,mBAAU,CAAA;IACV,iBAAQ,CAAA;IACR,iBAAQ,CAAA;IACR,iBAAQ,CAAA;IACR,mBAAU,CAAA;IACV,qBAAY,CAAA;IACZ,qBAAY,CAAA;IACZ,qBAAY,CAAA;IACZ,qBAAY,CAAA;IACZ,qBAAY,CAAA;AACb,CAAC,EAZW,KAAK,KAAL,KAAK,QAYhB","sourcesContent":["export enum Sizes {\n\t_2XS = '2xs',\n\t_XS = 'xs',\n\t_S = 's',\n\t_M = 'm',\n\t_L = 'l',\n\t_XL = 'xl',\n\t_2XL = '2xl',\n\t_3XL = '3xl',\n\t_4XL = '4xl',\n\t_5XL = '6xl',\n\t_6XL = '6xl',\n}\n"]}
+{"version":3,"file":"sizes.js","sourceRoot":"","sources":["../../../../../../src/core/constants/sizes.ts"],"names":[],"mappings":"AAAA,MAAM,CAAN,IAAY,KAYX;AAZD,WAAY,KAAK;IAChB,qBAAY,CAAA;IACZ,mBAAU,CAAA;IACV,iBAAQ,CAAA;IACR,iBAAQ,CAAA;IACR,iBAAQ,CAAA;IACR,mBAAU,CAAA;IACV,qBAAY,CAAA;IACZ,qBAAY,CAAA;IACZ,qBAAY,CAAA;IACZ,qBAAY,CAAA;IACZ,qBAAY,CAAA;AACb,CAAC,EAZW,KAAK,KAAL,KAAK,QAYhB","sourcesContent":["export enum Sizes {\n\t_2XS = '2xs',\n\t_XS = 'xs',\n\t_S = 's',\n\t_M = 'm',\n\t_L = 'l',\n\t_XL = 'xl',\n\t_2XL = '2xl',\n\t_3XL = '3xl',\n\t_4XL = '4xl',\n\t_5XL = '5xl',\n\t_6XL = '6xl',\n}\n"]}

package/dist/collection/helpers/Validate/wcag.js

@@ -19,7 +19,7 @@ export const validateWcagRef = (referenceId, name, component) => {
     const referenceIds = splitByWhitespace(referenceId);
     if (Array.isArray(referenceIds)) {
         strings = referenceIds.filter(function (e) {
-            return e.trim().length > 0;
+            return isString(e) ? e.trim().length > 0 : false;
         });
     }
     return !!strings.filter(referenceId => {

package/dist/collection/helpers/Validate/wcag.js.map

@@ -1 +1 @@
-{"version":3,"file":"wcag.js","sourceRoot":"","sources":["../../../../../../src/helpers/Validate/wcag.ts"],"names":[],"mappings":"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","sourcesContent":["import {govWarningLog} from '../Log/gov.log'\nimport {splitByWhitespace} from '../../utils/string.utils'\nimport {documentNode} from '../Dom/win'\nimport {isString} from \"../../utils/helpers.types\";\n\nexport const validateWcagProp = (value: string | undefined, propName: string, component: string): void => {\n\tif (value === undefined || String(value).length === 0) {\n\t\tgovWarningLog(`[${component}]: The (${propName}) attribute is important for correct accessibility.`)\n\t}\n}\n\nexport const validateWcagRef = (referenceId: string, name: string, component: string): boolean => {\n\tif (typeof referenceId === 'undefined' || referenceId === undefined) {\n\t\treturn true\n\t}\n\tif (String(referenceId).length === 0) {\n\t\tgovWarningLog(`[${component}]: Attribute (${name}) is defined with an empty value.`)\n\t\treturn false\n\t}\n\tlet strings = []\n\tconst referenceIds = splitByWhitespace(referenceId)\n\tif (Array.isArray(referenceIds)) {\n\t\tstrings = referenceIds.filter(function (e) {\n\t\t\treturn e.trim().length > 0\n\t\t})\n\t}\n\n\treturn !!strings.filter(referenceId => {\n\t\tif (documentNode().getElementById(referenceId) === null) {\n\t\t\t//govWarningLog(`[${component}][${name}]: Reference to element with id (${referenceId}) does not exist.`)\n\t\t\treturn false\n\t\t} else {\n\t\t\treturn true\n\t\t}\n\t}).length\n}\n\nexport const validateWcagLabelFor = (inputId: string, labelledBy: string | undefined, component: string): boolean => {\n\tconst labelEl = documentNode().querySelector(`[for=${inputId}]`)\n\tif (labelEl === null) {\n\t\tconst labelledByEl = documentNode().getElementById(labelledBy)\n\t\tif (labelledByEl === null) {\n\t\t\tgovWarningLog(`[${component}]: The form element has no defined wcag-label or wcag-labelled-by attribute.`)\n\t\t\treturn false\n\t\t}\n\t}\n\treturn true\n}\n\nexport const validateAccessibleLabel = (label: string | undefined, labelledBy: string | undefined, component: string, el: HTMLElement = undefined): boolean => {\n\tif (isString(label) && label.length > 0) {\n\t\treturn true\n\t}\n\tif (typeof labelledBy === 'string' && labelledBy.length > 0) {\n\t\tconst labelledByEl = documentNode().getElementById(labelledBy)\n\t\tif (labelledByEl) {\n\t\t\treturn true\n\t\t}\n\t}\n\tgovWarningLog(`[${component}]: The element has no defined aria-label or aria-labelledby attribute.`, el)\n\treturn false\n}\n"]}
+{"version":3,"file":"wcag.js","sourceRoot":"","sources":["../../../../../../src/helpers/Validate/wcag.ts"],"names":[],"mappings":"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","sourcesContent":["import {govWarningLog} from '../Log/gov.log'\nimport {splitByWhitespace} from '../../utils/string.utils'\nimport {documentNode} from '../Dom/win'\nimport {isString} from \"../../utils/helpers.types\";\n\nexport const validateWcagProp = (value: string | undefined, propName: string, component: string): void => {\n\tif (value === undefined || String(value).length === 0) {\n\t\tgovWarningLog(`[${component}]: The (${propName}) attribute is important for correct accessibility.`)\n\t}\n}\n\nexport const validateWcagRef = (referenceId: string, name: string, component: string): boolean => {\n\tif (typeof referenceId === 'undefined' || referenceId === undefined) {\n\t\treturn true\n\t}\n\tif (String(referenceId).length === 0) {\n\t\tgovWarningLog(`[${component}]: Attribute (${name}) is defined with an empty value.`)\n\t\treturn false\n\t}\n\tlet strings = []\n\tconst referenceIds = splitByWhitespace(referenceId)\n\tif (Array.isArray(referenceIds)) {\n\t\tstrings = referenceIds.filter(function (e) {\n\t\t\treturn isString(e) ? e.trim().length > 0 : false\n\t\t})\n\t}\n\n\treturn !!strings.filter(referenceId => {\n\t\tif (documentNode().getElementById(referenceId) === null) {\n\t\t\t//govWarningLog(`[${component}][${name}]: Reference to element with id (${referenceId}) does not exist.`)\n\t\t\treturn false\n\t\t} else {\n\t\t\treturn true\n\t\t}\n\t}).length\n}\n\nexport const validateWcagLabelFor = (inputId: string, labelledBy: string | undefined, component: string): boolean => {\n\tconst labelEl = documentNode().querySelector(`[for=${inputId}]`)\n\tif (labelEl === null) {\n\t\tconst labelledByEl = documentNode().getElementById(labelledBy)\n\t\tif (labelledByEl === null) {\n\t\t\tgovWarningLog(`[${component}]: The form element has no defined wcag-label or wcag-labelled-by attribute.`)\n\t\t\treturn false\n\t\t}\n\t}\n\treturn true\n}\n\nexport const validateAccessibleLabel = (label: string | undefined, labelledBy: string | undefined, component: string, el: HTMLElement = undefined): boolean => {\n\tif (isString(label) && label.length > 0) {\n\t\treturn true\n\t}\n\tif (typeof labelledBy === 'string' && labelledBy.length > 0) {\n\t\tconst labelledByEl = documentNode().getElementById(labelledBy)\n\t\tif (labelledByEl) {\n\t\t\treturn true\n\t\t}\n\t}\n\tgovWarningLog(`[${component}]: The element has no defined aria-label or aria-labelledby attribute.`, el)\n\treturn false\n}\n"]}

package/dist/collection/pages/AttributeSection.js

@@ -0,0 +1,59 @@
+class AttributeSectionPage extends HTMLElement {
+    connectedCallback() {
+        this.innerHTML = `
+			<h1>Attribute Section</h1>
+			<h2>XS</h2>
+			<section class="gov-attribute-section" data-size="xs">
+				<h4>Nadpis</h4>
+				<dl>
+					<dt>Attribute:</dt>
+					<dd>Hodnota atributu</dd>
+					<dt>Attribute:</dt>
+					<dd>Hodnota atributu Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dui dui, dapibus eget urna vel, porttitor varius mauris. Vestibulum metus tellus, facilisis et massa sed, egestas rutrum tellus. Pellentesque fringilla gravida venenatis. Integer lacinia, lorem sed egestas accumsan, nunc lorem volutpat erat, vitae tincidunt urna ipsum sit amet orci. Duis porttitor viverra justo, vel pharetra magna blandit sit amet. </dd>
+					<dt>Attribute:</dt>
+					<dd>Hodnota atributu</dd>
+				</dl>
+			</section>
+			<h2>S</h2>
+			<section class="gov-attribute-section" data-size="s">
+				<h4>Nadpis</h4>
+				<dl>
+					<dt>Attribute:</dt>
+					<dd>Hodnota atributu</dd>
+					<dt>Attribute:</dt>
+					<dd>Hodnota atributu Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dui dui, dapibus eget urna vel, porttitor varius mauris. Vestibulum metus tellus, facilisis et massa sed, egestas rutrum tellus. Pellentesque fringilla gravida venenatis. Integer lacinia, lorem sed egestas accumsan, nunc lorem volutpat erat, vitae tincidunt urna ipsum sit amet orci. Duis porttitor viverra justo, vel pharetra magna blandit sit amet. </dd>
+					<dt>Attribute:</dt>
+					<dd>Hodnota atributu</dd>
+				</dl>
+			</section>
+			<h2>M</h2>
+			<section class="gov-attribute-section" data-size="m">
+				<h4>Nadpis</h4>
+				<dl>
+					<dt>Attribute:</dt>
+					<dd>Hodnota atributu</dd>
+					<dt>Attribute:</dt>
+					<dd>Hodnota atributu Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dui dui, dapibus eget urna vel, porttitor varius mauris. Vestibulum metus tellus, facilisis et massa sed, egestas rutrum tellus. Pellentesque fringilla gravida venenatis. Integer lacinia, lorem sed egestas accumsan, nunc lorem volutpat erat, vitae tincidunt urna ipsum sit amet orci. Duis porttitor viverra justo, vel pharetra magna blandit sit amet. </dd>
+					<dt>Attribute:</dt>
+					<dd>Hodnota atributu</dd>
+				</dl>
+			</section>
+			<h2>L</h2>
+			<section class="gov-attribute-section" data-size="l">
+				<h4>Nadpis</h4>
+				<dl>
+					<dt>Attribute:</dt>
+					<dd>Hodnota atributu</dd>
+					<dt>Attribute:</dt>
+					<dd>Hodnota atributu Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dui dui, dapibus eget urna vel, porttitor varius mauris. Vestibulum metus tellus, facilisis et massa sed, egestas rutrum tellus. Pellentesque fringilla gravida venenatis. Integer lacinia, lorem sed egestas accumsan, nunc lorem volutpat erat, vitae tincidunt urna ipsum sit amet orci. Duis porttitor viverra justo, vel pharetra magna blandit sit amet. </dd>
+					<dt>Attribute:</dt>
+					<dd>Hodnota atributu</dd>
+				</dl>
+			</section>
+		`;
+    }
+}
+if (customElements.get('attribute-section-page') === undefined) {
+    customElements.define('attribute-section-page', AttributeSectionPage);
+}
+//# sourceMappingURL=AttributeSection.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AttributeSection.js","sourceRoot":"","sources":["../../../../../src/pages/AttributeSection.ts"],"names":[],"mappings":"AAAA,MAAM,oBAAqB,SAAQ,WAAW;IAC7C,iBAAiB;QAChB,IAAI,CAAC,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDhB,CAAA;IACF,CAAC;CACD;AAED,IAAI,cAAc,CAAC,GAAG,CAAC,wBAAwB,CAAC,KAAK,SAAS,EAAE,CAAC;IAChE,cAAc,CAAC,MAAM,CAAC,wBAAwB,EAAE,oBAAoB,CAAC,CAAA;AACtE,CAAC","sourcesContent":["class AttributeSectionPage extends HTMLElement {\n\tconnectedCallback() {\n\t\tthis.innerHTML = `\n\t\t\t<h1>Attribute Section</h1>\n\t\t\t<h2>XS</h2>\n\t\t\t<section class=\"gov-attribute-section\" data-size=\"xs\">\n\t\t\t\t<h4>Nadpis</h4>\n\t\t\t\t<dl>\n\t\t\t\t\t<dt>Attribute:</dt>\n\t\t\t\t\t<dd>Hodnota atributu</dd>\n\t\t\t\t\t<dt>Attribute:</dt>\n\t\t\t\t\t<dd>Hodnota atributu Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dui dui, dapibus eget urna vel, porttitor varius mauris. Vestibulum metus tellus, facilisis et massa sed, egestas rutrum tellus. Pellentesque fringilla gravida venenatis. Integer lacinia, lorem sed egestas accumsan, nunc lorem volutpat erat, vitae tincidunt urna ipsum sit amet orci. Duis porttitor viverra justo, vel pharetra magna blandit sit amet. </dd>\n\t\t\t\t\t<dt>Attribute:</dt>\n\t\t\t\t\t<dd>Hodnota atributu</dd>\n\t\t\t\t</dl>\n\t\t\t</section>\n\t\t\t<h2>S</h2>\n\t\t\t<section class=\"gov-attribute-section\" data-size=\"s\">\n\t\t\t\t<h4>Nadpis</h4>\n\t\t\t\t<dl>\n\t\t\t\t\t<dt>Attribute:</dt>\n\t\t\t\t\t<dd>Hodnota atributu</dd>\n\t\t\t\t\t<dt>Attribute:</dt>\n\t\t\t\t\t<dd>Hodnota atributu Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dui dui, dapibus eget urna vel, porttitor varius mauris. Vestibulum metus tellus, facilisis et massa sed, egestas rutrum tellus. Pellentesque fringilla gravida venenatis. Integer lacinia, lorem sed egestas accumsan, nunc lorem volutpat erat, vitae tincidunt urna ipsum sit amet orci. Duis porttitor viverra justo, vel pharetra magna blandit sit amet. </dd>\n\t\t\t\t\t<dt>Attribute:</dt>\n\t\t\t\t\t<dd>Hodnota atributu</dd>\n\t\t\t\t</dl>\n\t\t\t</section>\n\t\t\t<h2>M</h2>\n\t\t\t<section class=\"gov-attribute-section\" data-size=\"m\">\n\t\t\t\t<h4>Nadpis</h4>\n\t\t\t\t<dl>\n\t\t\t\t\t<dt>Attribute:</dt>\n\t\t\t\t\t<dd>Hodnota atributu</dd>\n\t\t\t\t\t<dt>Attribute:</dt>\n\t\t\t\t\t<dd>Hodnota atributu Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dui dui, dapibus eget urna vel, porttitor varius mauris. Vestibulum metus tellus, facilisis et massa sed, egestas rutrum tellus. Pellentesque fringilla gravida venenatis. Integer lacinia, lorem sed egestas accumsan, nunc lorem volutpat erat, vitae tincidunt urna ipsum sit amet orci. Duis porttitor viverra justo, vel pharetra magna blandit sit amet. </dd>\n\t\t\t\t\t<dt>Attribute:</dt>\n\t\t\t\t\t<dd>Hodnota atributu</dd>\n\t\t\t\t</dl>\n\t\t\t</section>\n\t\t\t<h2>L</h2>\n\t\t\t<section class=\"gov-attribute-section\" data-size=\"l\">\n\t\t\t\t<h4>Nadpis</h4>\n\t\t\t\t<dl>\n\t\t\t\t\t<dt>Attribute:</dt>\n\t\t\t\t\t<dd>Hodnota atributu</dd>\n\t\t\t\t\t<dt>Attribute:</dt>\n\t\t\t\t\t<dd>Hodnota atributu Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dui dui, dapibus eget urna vel, porttitor varius mauris. Vestibulum metus tellus, facilisis et massa sed, egestas rutrum tellus. Pellentesque fringilla gravida venenatis. Integer lacinia, lorem sed egestas accumsan, nunc lorem volutpat erat, vitae tincidunt urna ipsum sit amet orci. Duis porttitor viverra justo, vel pharetra magna blandit sit amet. </dd>\n\t\t\t\t\t<dt>Attribute:</dt>\n\t\t\t\t\t<dd>Hodnota atributu</dd>\n\t\t\t\t</dl>\n\t\t\t</section>\n\t\t`\n\t}\n}\n\nif (customElements.get('attribute-section-page') === undefined) {\n\tcustomElements.define('attribute-section-page', AttributeSectionPage)\n}\n"]}

package/dist/collection/pages/Avatar.js

@@ -0,0 +1,47 @@
+class AvatarPage extends HTMLElement {
+    connectedCallback() {
+        this.innerHTML = `
+			<h1>Avatar</h1>
+			<div class="gov-avatar" data-type="icon">
+				<gov-icon type="components" name="person-fill"></gov-icon>
+			</div>
+			<br />
+			<span class="gov-avatar" data-type="icon-initials">
+				<gov-icon type="components" name="person-fill"></gov-icon>
+				<h3>MM</h3>
+			</span>
+			<br />
+			<a href="#" class="gov-avatar" data-type="initials" data-badge-position="top">
+				<span>KN</span>
+				<gov-badge type="number" size="s">3</gov-badge>
+			</a>
+			<br />
+			<button class="gov-avatar" data-type="photo" data-badge-position="bottom">
+				<img src="./assets/person.jpg" alt="Avatar" />
+				<gov-badge type="number" size="s">3</gov-badge>
+			</button>
+			<br />
+			<h2>Disabled</h2>
+			<div class="gov-avatar" data-type="icon" disabled>
+				<gov-icon type="components" name="person-fill"></gov-icon>
+			</div>
+			<br />
+			<span class="gov-avatar" data-type="icon-initials" disabled="true">
+				<gov-icon type="components" name="person-fill"></gov-icon>
+				<h3>MM</h3>
+			</span>
+			<br />
+			<a href="#" class="gov-avatar" data-type="initials" disabled="1">
+				<span>KN</span>
+			</a>
+			<br />
+			<button class="gov-avatar" data-type="photo" disabled="TRUE">
+				<img src="./assets/person.jpg" alt="Avatar" />
+			</button>
+		`;
+    }
+}
+if (customElements.get('avatar-page') === undefined) {
+    customElements.define('avatar-page', AvatarPage);
+}
+//# sourceMappingURL=Avatar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../../../../../src/pages/Avatar.ts"],"names":[],"mappings":"AAAA,MAAM,UAAW,SAAQ,WAAW;IACnC,iBAAiB;QAChB,IAAI,CAAC,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsChB,CAAA;IACF,CAAC;CACD;AAED,IAAI,cAAc,CAAC,GAAG,CAAC,aAAa,CAAC,KAAK,SAAS,EAAE,CAAC;IACrD,cAAc,CAAC,MAAM,CAAC,aAAa,EAAE,UAAU,CAAC,CAAA;AACjD,CAAC","sourcesContent":["class AvatarPage extends HTMLElement {\n\tconnectedCallback() {\n\t\tthis.innerHTML = `\n\t\t\t<h1>Avatar</h1>\n\t\t\t<div class=\"gov-avatar\" data-type=\"icon\">\n\t\t\t\t<gov-icon type=\"components\" name=\"person-fill\"></gov-icon>\n\t\t\t</div>\n\t\t\t<br />\n\t\t\t<span class=\"gov-avatar\" data-type=\"icon-initials\">\n\t\t\t\t<gov-icon type=\"components\" name=\"person-fill\"></gov-icon>\n\t\t\t\t<h3>MM</h3>\n\t\t\t</span>\n\t\t\t<br />\n\t\t\t<a href=\"#\" class=\"gov-avatar\" data-type=\"initials\" data-badge-position=\"top\">\n\t\t\t\t<span>KN</span>\n\t\t\t\t<gov-badge type=\"number\" size=\"s\">3</gov-badge>\n\t\t\t</a>\n\t\t\t<br />\n\t\t\t<button class=\"gov-avatar\" data-type=\"photo\" data-badge-position=\"bottom\">\n\t\t\t\t<img src=\"./assets/person.jpg\" alt=\"Avatar\" />\n\t\t\t\t<gov-badge type=\"number\" size=\"s\">3</gov-badge>\n\t\t\t</button>\n\t\t\t<br />\n\t\t\t<h2>Disabled</h2>\n\t\t\t<div class=\"gov-avatar\" data-type=\"icon\" disabled>\n\t\t\t\t<gov-icon type=\"components\" name=\"person-fill\"></gov-icon>\n\t\t\t</div>\n\t\t\t<br />\n\t\t\t<span class=\"gov-avatar\" data-type=\"icon-initials\" disabled=\"true\">\n\t\t\t\t<gov-icon type=\"components\" name=\"person-fill\"></gov-icon>\n\t\t\t\t<h3>MM</h3>\n\t\t\t</span>\n\t\t\t<br />\n\t\t\t<a href=\"#\" class=\"gov-avatar\" data-type=\"initials\" disabled=\"1\">\n\t\t\t\t<span>KN</span>\n\t\t\t</a>\n\t\t\t<br />\n\t\t\t<button class=\"gov-avatar\" data-type=\"photo\" disabled=\"TRUE\">\n\t\t\t\t<img src=\"./assets/person.jpg\" alt=\"Avatar\" />\n\t\t\t</button>\n\t\t`\n\t}\n}\n\nif (customElements.get('avatar-page') === undefined) {\n\tcustomElements.define('avatar-page', AvatarPage)\n}\n"]}

package/dist/collection/pages/Badge.js

@@ -0,0 +1,29 @@
+class BadgePage extends HTMLElement {
+    connectedCallback() {
+        this.innerHTML = `
+			<h1>Badge</h1>
+			<h2>Number</h2>
+			<gov-badge size="s" content="number">3</gov-badge>
+			<gov-badge size="s" content="number">1</gov-badge>
+			<gov-badge size="s" content="number">99+</gov-badge>
+			<gov-badge size="m" content="number">3</gov-badge>
+			<gov-badge size="m" content="number">1</gov-badge>
+			<gov-badge size="m" content="number">99+</gov-badge>
+			<h2>Icon</h2>
+			<gov-badge size="s" content="icon">
+				<gov-icon type="components" name="plus-lg" />
+			</gov-badge>
+			<gov-badge size="m" content="icon">
+				<gov-icon type="components" name="plus-lg" />
+			</gov-badge>
+			<h2>Empty</h2>
+			<gov-badge content="empty"></gov-badge>
+			<gov-badge size="s" content="empty"></gov-badge>
+			<gov-badge size="m" content="empty"></gov-badge>
+		`;
+    }
+}
+if (customElements.get('badge-page') === undefined) {
+    customElements.define('badge-page', BadgePage);
+}
+//# sourceMappingURL=Badge.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../../../../src/pages/Badge.ts"],"names":[],"mappings":"AAAA,MAAM,SAAU,SAAQ,WAAW;IAClC,iBAAiB;QAChB,IAAI,CAAC,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;GAoBhB,CAAA;IACF,CAAC;CACD;AAED,IAAI,cAAc,CAAC,GAAG,CAAC,YAAY,CAAC,KAAK,SAAS,EAAE,CAAC;IACpD,cAAc,CAAC,MAAM,CAAC,YAAY,EAAE,SAAS,CAAC,CAAA;AAC/C,CAAC","sourcesContent":["class BadgePage extends HTMLElement {\n\tconnectedCallback() {\n\t\tthis.innerHTML = `\n\t\t\t<h1>Badge</h1>\n\t\t\t<h2>Number</h2>\n\t\t\t<gov-badge size=\"s\" content=\"number\">3</gov-badge>\n\t\t\t<gov-badge size=\"s\" content=\"number\">1</gov-badge>\n\t\t\t<gov-badge size=\"s\" content=\"number\">99+</gov-badge>\n\t\t\t<gov-badge size=\"m\" content=\"number\">3</gov-badge>\n\t\t\t<gov-badge size=\"m\" content=\"number\">1</gov-badge>\n\t\t\t<gov-badge size=\"m\" content=\"number\">99+</gov-badge>\n\t\t\t<h2>Icon</h2>\n\t\t\t<gov-badge size=\"s\" content=\"icon\">\n\t\t\t\t<gov-icon type=\"components\" name=\"plus-lg\" />\n\t\t\t</gov-badge>\n\t\t\t<gov-badge size=\"m\" content=\"icon\">\n\t\t\t\t<gov-icon type=\"components\" name=\"plus-lg\" />\n\t\t\t</gov-badge>\n\t\t\t<h2>Empty</h2>\n\t\t\t<gov-badge content=\"empty\"></gov-badge>\n\t\t\t<gov-badge size=\"s\" content=\"empty\"></gov-badge>\n\t\t\t<gov-badge size=\"m\" content=\"empty\"></gov-badge>\n\t\t`\n\t}\n}\n\nif (customElements.get('badge-page') === undefined) {\n\tcustomElements.define('badge-page', BadgePage)\n}\n"]}

package/dist/collection/pages/Card.js

@@ -28,10 +28,16 @@ class CardPage extends HTMLElement {
 			<br>
 			<gov-card href="http://localhost:3333/button">
 				<gov-icon slot="icon" name="car" type="complex" color="primary"></gov-icon>
-				<h4>Fusce tellus odio, dapibus id fermentum quis</h4>
+				<h4>Href - 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-card>
 			<br>
+			<gov-card onclick="alert('Card clicked!')" clickable>
+				<gov-icon slot="icon" name="car" type="complex" color="primary"></gov-icon>
+				<h4>Onclick - 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-card>
+			<br />
 			<gov-card  href="http://localhost:3333/button" 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>

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+DhB,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<div style=\"max-width: 350px;\">\n\t\t\t\t<gov-card>\n\t\t\t\t\t<img slot=\"img\" src=\"./assets/documents.jpg\" alt=\"Obrázek\" width=\"350\" height=\"234\">\n\t\t\t\t\t<p><b>Commodo consequat.</b></p>\n\t\t\t\t\t<p>Commodo consequat. Nullam rhoncus aliquam metus. Cras elementum <a href=\"#\">tellus@quis.id</a>.</p>\n\t\t\t\t\t<gov-button color=\"primary\" size=\"s\" type=\"solid\" href=\"http://localhost:3333/button\">\n\t\t\t\t\t\tJak založit\n\t\t\t\t\t</gov-button>\n\t\t\t\t\t<gov-button color=\"primary\" size=\"s\" type=\"outlined\" href=\"http://localhost:3333/button\">\n\t\t\t\t\t\tZjistit více\n\t\t\t\t\t</gov-button>\n\t\t\t\t</gov-card>\n\t\t\t\t<br>\n\t\t\t\t<gov-card href=\"http://localhost:3333/button\">\n\t\t\t\t\t<img slot=\"img\" src=\"./assets/documents.jpg\" alt=\"Obrázek\" width=\"350\" height=\"234\">\n\t\t\t\t\t<p><b>Commodo consequat.</b></p>\n\t\t\t\t\t<p>Commodo consequat. Nullam rhoncus aliquam metus. Cras elementum <a href=\"#\">tellus@quis.id</a>.</p>\n\t\t\t\t</gov-card>\n\t\t\t</div>\n\t\t\t<br>\n\t\t\t<gov-card href=\"http://localhost:3333/button\">\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</gov-card>\n\t\t\t<br>\n\t\t\t<gov-card  href=\"http://localhost:3333/button\" 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\" href=\"http://localhost:3333/button\">\n\t\t\t\t<img slot=\"img\" src=\"./assets/documents.jpg\" alt=\"Obrázek\" width=\"235\" height=\"144\">\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</gov-card>\n\t\t\t<br>\n\t\t\t<gov-card direction=\"horizontal\">\n\t\t\t\t<img slot=\"img\" src=\"./assets/documents.jpg\" alt=\"Obrázek\" width=\"235\" height=\"144\">\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"]}
+{"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqEhB,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<div style=\"max-width: 350px;\">\n\t\t\t\t<gov-card>\n\t\t\t\t\t<img slot=\"img\" src=\"./assets/documents.jpg\" alt=\"Obrázek\" width=\"350\" height=\"234\">\n\t\t\t\t\t<p><b>Commodo consequat.</b></p>\n\t\t\t\t\t<p>Commodo consequat. Nullam rhoncus aliquam metus. Cras elementum <a href=\"#\">tellus@quis.id</a>.</p>\n\t\t\t\t\t<gov-button color=\"primary\" size=\"s\" type=\"solid\" href=\"http://localhost:3333/button\">\n\t\t\t\t\t\tJak založit\n\t\t\t\t\t</gov-button>\n\t\t\t\t\t<gov-button color=\"primary\" size=\"s\" type=\"outlined\" href=\"http://localhost:3333/button\">\n\t\t\t\t\t\tZjistit více\n\t\t\t\t\t</gov-button>\n\t\t\t\t</gov-card>\n\t\t\t\t<br>\n\t\t\t\t<gov-card href=\"http://localhost:3333/button\">\n\t\t\t\t\t<img slot=\"img\" src=\"./assets/documents.jpg\" alt=\"Obrázek\" width=\"350\" height=\"234\">\n\t\t\t\t\t<p><b>Commodo consequat.</b></p>\n\t\t\t\t\t<p>Commodo consequat. Nullam rhoncus aliquam metus. Cras elementum <a href=\"#\">tellus@quis.id</a>.</p>\n\t\t\t\t</gov-card>\n\t\t\t</div>\n\t\t\t<br>\n\t\t\t<gov-card href=\"http://localhost:3333/button\">\n\t\t\t\t<gov-icon slot=\"icon\" name=\"car\" type=\"complex\" color=\"primary\"></gov-icon>\n\t\t\t\t<h4>Href - 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</gov-card>\n\t\t\t<br>\n\t\t\t<gov-card onclick=\"alert('Card clicked!')\" clickable>\n\t\t\t\t<gov-icon slot=\"icon\" name=\"car\" type=\"complex\" color=\"primary\"></gov-icon>\n\t\t\t\t<h4>Onclick - 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</gov-card>\n\t\t\t<br />\n\t\t\t<gov-card  href=\"http://localhost:3333/button\" 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\" href=\"http://localhost:3333/button\">\n\t\t\t\t<img slot=\"img\" src=\"./assets/documents.jpg\" alt=\"Obrázek\" width=\"235\" height=\"144\">\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</gov-card>\n\t\t\t<br>\n\t\t\t<gov-card direction=\"horizontal\">\n\t\t\t\t<img slot=\"img\" src=\"./assets/documents.jpg\" alt=\"Obrázek\" width=\"235\" height=\"144\">\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/Collapsible.js

@@ -0,0 +1,43 @@
+class CollapsiblePage extends HTMLElement {
+    connectedCallback() {
+        this.innerHTML = `
+			<h1>Collapsible</h1>
+			<h2>Open down</h2>
+			<gov-collapsible size="xs" direction="down" label="Collapsible" aria-label="Collapsible section">
+				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+			</gov-collapsible>
+			<gov-collapsible size="s" direction="down" label="Collapsible" aria-label="Collapsible section">
+				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+			</gov-collapsible>
+			<gov-collapsible size="m" direction="down" open label="Collapsible" aria-label="Collapsible section">
+				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+			</gov-collapsible>
+			<gov-collapsible size="l" direction="down" label="Collapsible" aria-label="Collapsible section">
+				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+			</gov-collapsible>
+			<gov-collapsible size="xl" direction="down" disabled label="Collapsible" aria-label="Collapsible section">
+				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+			</gov-collapsible>
+			<h2>Open up</h2>
+			<gov-collapsible size="xs" direction="up" open label="Collapsible" aria-label="Collapsible section">
+				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+			</gov-collapsible>
+			<gov-collapsible size="s" direction="up" label="Collapsible" aria-label="Collapsible section">
+				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+			</gov-collapsible>
+			<gov-collapsible size="m" direction="up" disabled label="Collapsible" aria-label="Collapsible section">
+				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+			</gov-collapsible>
+			<gov-collapsible size="l" direction="up" label="Collapsible" aria-label="Collapsible section">
+				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+			</gov-collapsible>
+			<gov-collapsible size="xl" direction="up" label="Collapsible" aria-label="Collapsible section">
+				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+			</gov-collapsible>
+		`;
+    }
+}
+if (customElements.get('collapsible-page') === undefined) {
+    customElements.define('collapsible-page', CollapsiblePage);
+}
+//# sourceMappingURL=Collapsible.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Collapsible.js","sourceRoot":"","sources":["../../../../../src/pages/Collapsible.ts"],"names":[],"mappings":"AAAA,MAAM,eAAgB,SAAQ,WAAW;IACxC,iBAAiB;QAChB,IAAI,CAAC,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkChB,CAAA;IACF,CAAC;CACD;AAED,IAAI,cAAc,CAAC,GAAG,CAAC,kBAAkB,CAAC,KAAK,SAAS,EAAE,CAAC;IAC1D,cAAc,CAAC,MAAM,CAAC,kBAAkB,EAAE,eAAe,CAAC,CAAA;AAC3D,CAAC","sourcesContent":["class CollapsiblePage extends HTMLElement {\n\tconnectedCallback() {\n\t\tthis.innerHTML = `\n\t\t\t<h1>Collapsible</h1>\n\t\t\t<h2>Open down</h2>\n\t\t\t<gov-collapsible size=\"xs\" direction=\"down\" label=\"Collapsible\" aria-label=\"Collapsible section\">\n\t\t\t\t<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>\n\t\t\t</gov-collapsible>\n\t\t\t<gov-collapsible size=\"s\" direction=\"down\" label=\"Collapsible\" aria-label=\"Collapsible section\">\n\t\t\t\t<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>\n\t\t\t</gov-collapsible>\n\t\t\t<gov-collapsible size=\"m\" direction=\"down\" open label=\"Collapsible\" aria-label=\"Collapsible section\">\n\t\t\t\t<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>\n\t\t\t</gov-collapsible>\n\t\t\t<gov-collapsible size=\"l\" direction=\"down\" label=\"Collapsible\" aria-label=\"Collapsible section\">\n\t\t\t\t<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>\n\t\t\t</gov-collapsible>\n\t\t\t<gov-collapsible size=\"xl\" direction=\"down\" disabled label=\"Collapsible\" aria-label=\"Collapsible section\">\n\t\t\t\t<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>\n\t\t\t</gov-collapsible>\n\t\t\t<h2>Open up</h2>\n\t\t\t<gov-collapsible size=\"xs\" direction=\"up\" open label=\"Collapsible\" aria-label=\"Collapsible section\">\n\t\t\t\t<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>\n\t\t\t</gov-collapsible>\n\t\t\t<gov-collapsible size=\"s\" direction=\"up\" label=\"Collapsible\" aria-label=\"Collapsible section\">\n\t\t\t\t<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>\n\t\t\t</gov-collapsible>\n\t\t\t<gov-collapsible size=\"m\" direction=\"up\" disabled label=\"Collapsible\" aria-label=\"Collapsible section\">\n\t\t\t\t<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>\n\t\t\t</gov-collapsible>\n\t\t\t<gov-collapsible size=\"l\" direction=\"up\" label=\"Collapsible\" aria-label=\"Collapsible section\">\n\t\t\t\t<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>\n\t\t\t</gov-collapsible>\n\t\t\t<gov-collapsible size=\"xl\" direction=\"up\" label=\"Collapsible\" aria-label=\"Collapsible section\">\n\t\t\t\t<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>\n\t\t\t</gov-collapsible>\n\t\t`\n\t}\n}\n\nif (customElements.get('collapsible-page') === undefined) {\n\tcustomElements.define('collapsible-page', CollapsiblePage)\n}\n"]}

package/dist/collection/pages/Empty.js

@@ -4,7 +4,7 @@ class EmptyPage extends HTMLElement {
 		<h2>Empty</h2>
 
 		<gov-container>
-			<gov-empty size="s">
+			<gov-empty align="left" size="s">
 				<gov-icon slot="icon" name="id-card" type="complex"></gov-icon>
 				<p slot="headline">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ipsum vitae etiam dui eget lectus vulputate ornare.</p>
 				<p>Informace o tom, že je potřeba upřesnit vyhledávání</p>

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

@@ -1 +1 @@
-{"version":3,"file":"Empty.js","sourceRoot":"","sources":["../../../../../src/pages/Empty.ts"],"names":[],"mappings":"AAAA,MAAM,SAAU,SAAQ,WAAW;IAClC,iBAAiB;QAChB,IAAI,CAAC,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuDhB,CAAA;IACF,CAAC;CACD;AAED,IAAI,cAAc,CAAC,GAAG,CAAC,YAAY,CAAC,KAAK,SAAS,EAAE,CAAC;IACpD,cAAc,CAAC,MAAM,CAAC,YAAY,EAAE,SAAS,CAAC,CAAA;AAC/C,CAAC","sourcesContent":["class EmptyPage extends HTMLElement {\n\tconnectedCallback() {\n\t\tthis.innerHTML = `\n\t\t<h2>Empty</h2>\n\n\t\t<gov-container>\n\t\t\t<gov-empty size=\"s\">\n\t\t\t\t<gov-icon slot=\"icon\" name=\"id-card\" type=\"complex\"></gov-icon>\n\t\t\t\t<p slot=\"headline\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ipsum vitae etiam dui eget lectus vulputate ornare.</p>\n\t\t\t\t<p>Informace o tom, že je potřeba upřesnit vyhledávání</p>\n\t\t\t\t<gov-button size=\"s\" color=\"primary\" type=\"solid\">\n\t\t\t\t\tPřejít na jinou stránku\n\t\t\t\t</gov-button>\n\t\t\t</gov-empty>\n\t\t\t<gov-empty align=\"right\" size=\"m\">\n\t\t\t\t<gov-icon slot=\"icon\" name=\"envelope\" type=\"complex\"></gov-icon>\n\t\t\t\t<p slot=\"headline\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ipsum vitae etiam dui eget lectus vulputate ornare.</p>\n\t\t\t\t<p>Informace o tom, že je potřeba upřesnit vyhledávání</p>\n\t\t\t\t<gov-button size=\"m\" color=\"primary\" type=\"solid\">\n\t\t\t\t\tVíce\n\t\t\t\t</gov-button>\n\t\t\t</gov-empty>\n\t\t\t<gov-empty align=\"center\" size=\"l\">\n\t\t\t\t<gov-icon slot=\"icon\" name=\"car\" type=\"complex\"></gov-icon>\n\t\t\t\t<p slot=\"headline\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ipsum vitae etiam dui eget lectus vulputate ornare.</p>\n\t\t\t\t<p>Informace o tom, že je potřeba upřesnit vyhledávání</p>\n\t\t\t\t<gov-button size=\"l\" color=\"primary\" type=\"solid\">\n\t\t\t\t\tVíce informací\n\t\t\t\t</gov-button>\n\t\t\t</gov-empty>\n\t\t\t<br>\n\t\t\t<h3>Horizontal</h3>\n\t\t\t<gov-empty size=\"s\" direction=\"horizontal\">\n\t\t\t\t<gov-icon slot=\"icon\" name=\"id-card\" type=\"complex\"></gov-icon>\n\t\t\t\t<p slot=\"headline\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ipsum vitae etiam dui eget lectus vulputate ornare.</p>\n\t\t\t\t<p>Informace o tom, že je potřeba upřesnit vyhledávání</p>\n\t\t\t\t<gov-button size=\"s\" color=\"primary\" type=\"solid\">\n\t\t\t\t\tPřejít na jinou stránku\n\t\t\t\t</gov-button>\n\t\t\t</gov-empty>\n\t\t\t<gov-empty size=\"m\" direction=\"horizontal\">\n\t\t\t\t<gov-icon slot=\"icon\" name=\"envelope\" type=\"complex\"></gov-icon>\n\t\t\t\t<p slot=\"headline\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ipsum vitae etiam dui eget lectus vulputate ornare.</p>\n\t\t\t\t<p>Informace o tom, že je potřeba upřesnit vyhledávání</p>\n\t\t\t\t<gov-button size=\"m\" color=\"primary\" type=\"solid\">\n\t\t\t\t\tVíce\n\t\t\t\t</gov-button>\n\t\t\t</gov-empty>\n\t\t\t<gov-empty size=\"l\" direction=\"horizontal\">\n\t\t\t\t<gov-icon slot=\"icon\" name=\"car\" type=\"complex\"></gov-icon>\n\t\t\t\t<p slot=\"headline\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ipsum vitae etiam dui eget lectus vulputate ornare.</p>\n\t\t\t\t<p>Informace o tom, že je potřeba upřesnit vyhledávání</p>\n\t\t\t\t<gov-button size=\"l\" color=\"primary\" type=\"solid\">\n\t\t\t\t\tVíce informací\n\t\t\t\t</gov-button>\n\t\t\t</gov-empty>\n\t\t</gov-container>\n\t\t`\n\t}\n}\n\nif (customElements.get('empty-page') === undefined) {\n\tcustomElements.define('empty-page', EmptyPage)\n}\n"]}
+{"version":3,"file":"Empty.js","sourceRoot":"","sources":["../../../../../src/pages/Empty.ts"],"names":[],"mappings":"AAAA,MAAM,SAAU,SAAQ,WAAW;IAClC,iBAAiB;QAChB,IAAI,CAAC,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuDhB,CAAA;IACF,CAAC;CACD;AAED,IAAI,cAAc,CAAC,GAAG,CAAC,YAAY,CAAC,KAAK,SAAS,EAAE,CAAC;IACpD,cAAc,CAAC,MAAM,CAAC,YAAY,EAAE,SAAS,CAAC,CAAA;AAC/C,CAAC","sourcesContent":["class EmptyPage extends HTMLElement {\n\tconnectedCallback() {\n\t\tthis.innerHTML = `\n\t\t<h2>Empty</h2>\n\n\t\t<gov-container>\n\t\t\t<gov-empty align=\"left\" size=\"s\">\n\t\t\t\t<gov-icon slot=\"icon\" name=\"id-card\" type=\"complex\"></gov-icon>\n\t\t\t\t<p slot=\"headline\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ipsum vitae etiam dui eget lectus vulputate ornare.</p>\n\t\t\t\t<p>Informace o tom, že je potřeba upřesnit vyhledávání</p>\n\t\t\t\t<gov-button size=\"s\" color=\"primary\" type=\"solid\">\n\t\t\t\t\tPřejít na jinou stránku\n\t\t\t\t</gov-button>\n\t\t\t</gov-empty>\n\t\t\t<gov-empty align=\"right\" size=\"m\">\n\t\t\t\t<gov-icon slot=\"icon\" name=\"envelope\" type=\"complex\"></gov-icon>\n\t\t\t\t<p slot=\"headline\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ipsum vitae etiam dui eget lectus vulputate ornare.</p>\n\t\t\t\t<p>Informace o tom, že je potřeba upřesnit vyhledávání</p>\n\t\t\t\t<gov-button size=\"m\" color=\"primary\" type=\"solid\">\n\t\t\t\t\tVíce\n\t\t\t\t</gov-button>\n\t\t\t</gov-empty>\n\t\t\t<gov-empty align=\"center\" size=\"l\">\n\t\t\t\t<gov-icon slot=\"icon\" name=\"car\" type=\"complex\"></gov-icon>\n\t\t\t\t<p slot=\"headline\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ipsum vitae etiam dui eget lectus vulputate ornare.</p>\n\t\t\t\t<p>Informace o tom, že je potřeba upřesnit vyhledávání</p>\n\t\t\t\t<gov-button size=\"l\" color=\"primary\" type=\"solid\">\n\t\t\t\t\tVíce informací\n\t\t\t\t</gov-button>\n\t\t\t</gov-empty>\n\t\t\t<br>\n\t\t\t<h3>Horizontal</h3>\n\t\t\t<gov-empty size=\"s\" direction=\"horizontal\">\n\t\t\t\t<gov-icon slot=\"icon\" name=\"id-card\" type=\"complex\"></gov-icon>\n\t\t\t\t<p slot=\"headline\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ipsum vitae etiam dui eget lectus vulputate ornare.</p>\n\t\t\t\t<p>Informace o tom, že je potřeba upřesnit vyhledávání</p>\n\t\t\t\t<gov-button size=\"s\" color=\"primary\" type=\"solid\">\n\t\t\t\t\tPřejít na jinou stránku\n\t\t\t\t</gov-button>\n\t\t\t</gov-empty>\n\t\t\t<gov-empty size=\"m\" direction=\"horizontal\">\n\t\t\t\t<gov-icon slot=\"icon\" name=\"envelope\" type=\"complex\"></gov-icon>\n\t\t\t\t<p slot=\"headline\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ipsum vitae etiam dui eget lectus vulputate ornare.</p>\n\t\t\t\t<p>Informace o tom, že je potřeba upřesnit vyhledávání</p>\n\t\t\t\t<gov-button size=\"m\" color=\"primary\" type=\"solid\">\n\t\t\t\t\tVíce\n\t\t\t\t</gov-button>\n\t\t\t</gov-empty>\n\t\t\t<gov-empty size=\"l\" direction=\"horizontal\">\n\t\t\t\t<gov-icon slot=\"icon\" name=\"car\" type=\"complex\"></gov-icon>\n\t\t\t\t<p slot=\"headline\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ipsum vitae etiam dui eget lectus vulputate ornare.</p>\n\t\t\t\t<p>Informace o tom, že je potřeba upřesnit vyhledávání</p>\n\t\t\t\t<gov-button size=\"l\" color=\"primary\" type=\"solid\">\n\t\t\t\t\tVíce informací\n\t\t\t\t</gov-button>\n\t\t\t</gov-empty>\n\t\t</gov-container>\n\t\t`\n\t}\n}\n\nif (customElements.get('empty-page') === undefined) {\n\tcustomElements.define('empty-page', EmptyPage)\n}\n"]}

package/dist/collection/pages/Forms.js

@@ -733,7 +733,7 @@ class FormsPage extends HTMLElement {
 		<gov-form-file size="m" id="test-me-ujo" display-attachments="false" multiple accept=".pdf,.jpg,.png,.jpeg" max-file-size="616448" required="true">
 			<p>
 				<gov-button color="primary" type="outlined" size="m" tabindex="-1">
-					<gov-icon type="basic" name="search"></gov-icon>
+					<gov-icon type="components" name="search"></gov-icon>
 					Nahrát soubor ze zařízení
 				</gov-button>
 			</p>
@@ -749,7 +749,7 @@ class FormsPage extends HTMLElement {
 	<gov-form-group>
 		<gov-form-file name="test-me-c" disabled required="true">
 			<p aria-hidden="true">
-				<gov-button color="primary" type="outlined" size="s" disabled>
+				<gov-button color="primary" type="outlined" size="s" tabindex="-1" disabled>
 					<gov-icon slot="icon-start" name="upload"></gov-icon>
 					Nahrát soubor ze zařízení
 				</gov-button>
@@ -766,15 +766,15 @@ class FormsPage extends HTMLElement {
 	<gov-form-group>
 		<gov-form-file name="test-me-c" invalid required="true">
 			<p>
-				<gov-button color="error" type="outlined" size="m">
+				<gov-button color="error" type="outlined" size="m" tabindex="-1">
 					<gov-icon slot="icon-start" name="upload"></gov-icon>
 					Nahrát soubor ze zařízení
 				</gov-button>
 			</p>
-			<p class="gov-form-file__note">
-				Podporované formáty XML, PDF, DOC
-			</p>
 		</gov-form-file>
+		<p style="margin-top: 6px;">
+			Podporované formáty XML, PDF, DOC
+		</p>
 	</gov-form-group>
 	<gov-form-message slot="bottom" color="error" size="m">
 		<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
@@ -792,7 +792,7 @@ class FormsPage extends HTMLElement {
 				Přetáhněte soubor nebo
 			</p>
 			<p>
-				<gov-button color="primary" type="outlined" size="m">
+				<gov-button color="primary" type="outlined" size="m" tabindex="-1">
 					Nahrát ze zařízení
 				</gov-button>
 			</p>
@@ -811,7 +811,7 @@ class FormsPage extends HTMLElement {
 				Přetáhněte soubor nebo
 			</p>
 			<p>
-				<gov-button disabled color="primary" type="outlined" size="m">
+				<gov-button disabled color="primary" type="outlined" size="m" tabindex="-1">
 					Nahrát ze zařízení
 				</gov-button>
 			</p>
@@ -830,7 +830,7 @@ class FormsPage extends HTMLElement {
 				Přetáhněte soubor nebo
 			</p>
 			<p>
-				<gov-button color="error" type="outlined" size="m">
+				<gov-button color="error" type="outlined" size="m" tabindex="-1">
 					Nahrát ze zařízení
 				</gov-button>
 			</p>
@@ -1975,6 +1975,33 @@ class FormsPage extends HTMLElement {
 	</gov-form-group>
 </gov-form-control>
 
+<h3>Without label</h3>
+<gov-form-control>
+	<gov-form-group>
+		<gov-form-switch name="test-me" value="me" size="xs" checked></gov-form-switch>
+	</gov-form-group>
+</gov-form-control>
+<gov-form-control>
+	<gov-form-group>
+		<gov-form-switch name="test-me" value="me" size="s" checked></gov-form-switch>
+	</gov-form-group>
+</gov-form-control>
+<gov-form-control>
+	<gov-form-group>
+		<gov-form-switch name="test-me" value="me" size="m" checked></gov-form-switch>
+	</gov-form-group>
+</gov-form-control>
+<gov-form-control>
+	<gov-form-group>
+		<gov-form-switch name="test-me" value="me" size="l" checked></gov-form-switch>
+	</gov-form-group>
+</gov-form-control>
+<gov-form-control>
+	<gov-form-group>
+		<gov-form-switch name="test-me" value="me" size="xl" checked></gov-form-switch>
+	</gov-form-group>
+</gov-form-control>
+
 <h3>Disabled</h3>
 <gov-form-control type="switch">
 	<gov-form-group>