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

package/dist/collection/components/gov-badge/constants.js

@@ -1,10 +1,13 @@
-var NativeType;
+export var NativeType;
 (function (NativeType) {
+  NativeType["A"] = "a";
   NativeType["SPAN"] = "span";
   NativeType["BUTTON"] = "button";
 })(NativeType || (NativeType = {}));
 export const BadgeClass = {
   root: 'gov-badge',
   inner: 'gov-badge__inner',
+  hasRight: 'gov-badge--has-right',
+  hasLeft: 'gov-badge--has-left',
 };
 //# sourceMappingURL=constants.js.map

package/dist/collection/components/gov-badge/constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../../../../src/components/gov-badge/constants.ts"],"names":[],"mappings":"AAEA,IAAK,UAGJ;AAHD,WAAK,UAAU;EACd,2BAAa,CAAA;EACb,+BAAiB,CAAA;AAClB,CAAC,EAHI,UAAU,KAAV,UAAU,QAGd;AAID,MAAM,CAAC,MAAM,UAAU,GAAG;EACzB,IAAI,EAAE,WAAW;EACjB,KAAK,EAAE,kBAAkB;CACzB,CAAA","sourcesContent":["import { ValueOf } from '../../types/interfaces'\n\nenum NativeType {\n\tSPAN = 'span',\n\tBUTTON = 'button',\n}\n\nexport type NativeTypesType = `${ValueOf<typeof NativeType>}`\n\nexport const BadgeClass = {\n\troot: 'gov-badge',\n\tinner: 'gov-badge__inner',\n}\n"]}
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../../../../src/components/gov-badge/constants.ts"],"names":[],"mappings":"AAEA,MAAM,CAAN,IAAY,UAIX;AAJD,WAAY,UAAU;EACrB,qBAAO,CAAA;EACP,2BAAa,CAAA;EACb,+BAAiB,CAAA;AAClB,CAAC,EAJW,UAAU,KAAV,UAAU,QAIrB;AAID,MAAM,CAAC,MAAM,UAAU,GAAG;EACzB,IAAI,EAAE,WAAW;EACjB,KAAK,EAAE,kBAAkB;EACzB,QAAQ,EAAE,sBAAsB;EAChC,OAAO,EAAE,qBAAqB;CAC9B,CAAA","sourcesContent":["import { ValueOf } from '../../types/interfaces'\n\nexport enum NativeType {\n\tA = 'a',\n\tSPAN = 'span',\n\tBUTTON = 'button',\n}\n\nexport type NativeTypesType = `${ValueOf<typeof NativeType>}`\n\nexport const BadgeClass = {\n\troot: 'gov-badge',\n\tinner: 'gov-badge__inner',\n\thasRight: 'gov-badge--has-right',\n\thasLeft: 'gov-badge--has-left',\n}\n"]}

package/dist/collection/components/gov-badge/gov-badge.css

@@ -148,6 +148,9 @@
 /*
  -	Variables - Form multiselect
  */
+/*
+ -	Variables - Form password power
+ */
 /*
  -	Variables - Form checkbox & radio
  */
@@ -379,6 +382,41 @@
     color: var(--gov-button-primary-base-inverse-active-color, var(--gov-color-neutral-white));
   }
 }
+[type=link][variant=primary].gov-badge .element {
+  color: var(--gov-button-primary-link-color, var(--gov-color-primary));
+  border-width: 0;
+}
+[type=link][variant=primary][inverse=""].gov-badge .element, [type=link][variant=primary][inverse=true i].gov-badge .element, [type=link][variant=primary][inverse="1"].gov-badge .element {
+  color: var(--gov-button-primary-link-inverse-color, var(--gov-color-neutral-white));
+  background-color: var(--gov-button-primary-link-inverse-bg, transparent);
+}
+[type=link][variant=primary][disabled=""].gov-badge .element, [type=link][variant=primary][disabled=true i].gov-badge .element, [type=link][variant=primary][disabled="1"].gov-badge .element {
+  color: var(--gov-button-primary-link-disabled-color, var(--gov-color-primary-400));
+}
+[type=link][variant=primary][disabled=""][inverse=""].gov-badge .element, [type=link][variant=primary][disabled=""][inverse=true i].gov-badge .element, [type=link][variant=primary][disabled=""][inverse="1"].gov-badge .element, [type=link][variant=primary][disabled=true i][inverse=""].gov-badge .element, [type=link][variant=primary][disabled=true i][inverse=true i].gov-badge .element, [type=link][variant=primary][disabled=true i][inverse="1"].gov-badge .element, [type=link][variant=primary][disabled="1"][inverse=""].gov-badge .element, [type=link][variant=primary][disabled="1"][inverse=true i].gov-badge .element, [type=link][variant=primary][disabled="1"][inverse="1"].gov-badge .element {
+  background-color: var(--gov-button-primary-link-inverse-disabled-bg, transparent);
+  color: var(--gov-button-primary-link-inverse-disabled-color, var(--gov-color-primary-400));
+}
+@media not all and (pointer: coarse) {
+  [type=link][variant=primary][hoverable].gov-badge .element:hover {
+    background-color: var(--gov-button-primary-link-hover-bg, transparent);
+    color: var(--gov-button-primary-link-hover-color, var(--gov-color-primary));
+  }
+  [type=link][variant=primary][hoverable].gov-badge .element:hover:active {
+    background-color: var(--gov-button-primary-link-active-bg, transparent);
+    color: var(--gov-button-primary-link-active-color, var(--gov-color-primary-700));
+  }
+}
+@media not all and (pointer: coarse) {
+  [type=link][variant=primary][hoverable][inverse=""].gov-badge .element:hover, [type=link][variant=primary][hoverable][inverse=true i].gov-badge .element:hover, [type=link][variant=primary][hoverable][inverse="1"].gov-badge .element:hover {
+    background-color: var(--gov-button-primary-link-inverse-hover-bg, transparent);
+    color: var(--gov-button-primary-link-inverse-hover-color, var(--gov-color-neutral-white));
+  }
+  [type=link][variant=primary][hoverable][inverse=""].gov-badge .element:hover:active, [type=link][variant=primary][hoverable][inverse=true i].gov-badge .element:hover:active, [type=link][variant=primary][hoverable][inverse="1"].gov-badge .element:hover:active {
+    background-color: var(--gov-button-primary-link-inverse-active-bg, transparent);
+    color: var(--gov-button-primary-link-inverse-active-color, var(--gov-color-primary-200));
+  }
+}
 [type=solid][variant=secondary].gov-badge .element {
   background-color: var(--gov-button-secondary-solid-bg, var(--gov-color-secondary));
   color: var(--gov-button-secondary-solid-color, var(--gov-color-neutral-white));
@@ -493,6 +531,41 @@
     color: var(--gov-button-secondary-base-inverse-active-color, var(--gov-color-secondary));
   }
 }
+[type=link][variant=secondary].gov-badge .element {
+  color: var(--gov-button-secondary-link-color, var(--gov-color-secondary));
+  border-width: 0;
+}
+[type=link][variant=secondary][inverse=""].gov-badge .element, [type=link][variant=secondary][inverse=true i].gov-badge .element, [type=link][variant=secondary][inverse="1"].gov-badge .element {
+  color: var(--gov-button-secondary-link-inverse-color, var(--gov-color-neutral-white));
+  background-color: var(--gov-button-secondary-link-inverse-bg, transparent);
+}
+[type=link][variant=secondary][disabled=""].gov-badge .element, [type=link][variant=secondary][disabled=true i].gov-badge .element, [type=link][variant=secondary][disabled="1"].gov-badge .element {
+  color: var(--gov-button-secondary-link-disabled-color, var(--gov-color-secondary-600));
+}
+[type=link][variant=secondary][disabled=""][inverse=""].gov-badge .element, [type=link][variant=secondary][disabled=""][inverse=true i].gov-badge .element, [type=link][variant=secondary][disabled=""][inverse="1"].gov-badge .element, [type=link][variant=secondary][disabled=true i][inverse=""].gov-badge .element, [type=link][variant=secondary][disabled=true i][inverse=true i].gov-badge .element, [type=link][variant=secondary][disabled=true i][inverse="1"].gov-badge .element, [type=link][variant=secondary][disabled="1"][inverse=""].gov-badge .element, [type=link][variant=secondary][disabled="1"][inverse=true i].gov-badge .element, [type=link][variant=secondary][disabled="1"][inverse="1"].gov-badge .element {
+  background-color: var(--gov-button-secondary-link-inverse-disabled-bg, transparent);
+  color: var(--gov-button-secondary-link-inverse-disabled-color, var(--gov-color-secondary-600));
+}
+@media not all and (pointer: coarse) {
+  [type=link][variant=secondary][hoverable].gov-badge .element:hover {
+    background-color: var(--gov-button-secondary-link-hover-bg, transparent);
+    color: var(--gov-button-secondary-link-hover-color, var(--gov-color-secondary));
+  }
+  [type=link][variant=secondary][hoverable].gov-badge .element:hover:active {
+    background-color: var(--gov-button-secondary-link-active-bg, transparent);
+    color: var(--gov-button-primary-link-active-color, var(--gov-color-secondary));
+  }
+}
+@media not all and (pointer: coarse) {
+  [type=link][variant=secondary][hoverable][inverse=""].gov-badge .element:hover, [type=link][variant=secondary][hoverable][inverse=true i].gov-badge .element:hover, [type=link][variant=secondary][hoverable][inverse="1"].gov-badge .element:hover {
+    background-color: var(--gov-button-secondary-link-inverse-hover-bg, transparent);
+    color: var(--gov-button-secondary-link-inverse-hover-color, var(--gov-color-neutral-white));
+  }
+  [type=link][variant=secondary][hoverable][inverse=""].gov-badge .element:hover:active, [type=link][variant=secondary][hoverable][inverse=true i].gov-badge .element:hover:active, [type=link][variant=secondary][hoverable][inverse="1"].gov-badge .element:hover:active {
+    background-color: var(--gov-button-secondary-link-inverse-active-bg, transparent);
+    color: var(--gov-button-secondary-link-inverse-active-color, var(--gov-color-secondary-500));
+  }
+}
 [type=solid][variant=error].gov-badge .element {
   background-color: var(--gov-button-error-solid-bg, var(--gov-color-error));
   color: var(--gov-button-error-solid-color, var(--gov-color-neutral-white));
@@ -605,6 +678,41 @@
     color: var(--gov-button-error-base-inverse-active-color, var(--gov-color-neutral-white));
   }
 }
+[type=link][variant=error].gov-badge .element {
+  color: var(--gov-button-error-link-color, var(--gov-color-error));
+  border-width: 0;
+}
+[type=link][variant=error][inverse=""].gov-badge .element, [type=link][variant=error][inverse=true i].gov-badge .element, [type=link][variant=error][inverse="1"].gov-badge .element {
+  color: var(--gov-button-error-link-inverse-color, var(--gov-color-neutral-white));
+  background-color: var(--gov-button-error-link-inverse-bg, transparent);
+}
+[type=link][variant=error][disabled=""].gov-badge .element, [type=link][variant=error][disabled=true i].gov-badge .element, [type=link][variant=error][disabled="1"].gov-badge .element {
+  color: var(--gov-button-error-link-disabled-color, var(--gov-color-error-200));
+}
+[type=link][variant=error][disabled=""][inverse=""].gov-badge .element, [type=link][variant=error][disabled=""][inverse=true i].gov-badge .element, [type=link][variant=error][disabled=""][inverse="1"].gov-badge .element, [type=link][variant=error][disabled=true i][inverse=""].gov-badge .element, [type=link][variant=error][disabled=true i][inverse=true i].gov-badge .element, [type=link][variant=error][disabled=true i][inverse="1"].gov-badge .element, [type=link][variant=error][disabled="1"][inverse=""].gov-badge .element, [type=link][variant=error][disabled="1"][inverse=true i].gov-badge .element, [type=link][variant=error][disabled="1"][inverse="1"].gov-badge .element {
+  background-color: var(--gov-button-error-link-inverse-disabled-bg, transparent);
+  color: var(--gov-button-error-link-inverse-disabled-color, var(--gov-color-error-200));
+}
+@media not all and (pointer: coarse) {
+  [type=link][variant=error][hoverable].gov-badge .element:hover {
+    background-color: var(--gov-button-error-link-hover-bg, transparent);
+    color: var(--gov-button-error-link-hover-color, var(--gov-color-error));
+  }
+  [type=link][variant=error][hoverable].gov-badge .element:hover:active {
+    background-color: var(--gov-button-error-link-active-bg, transparent);
+    color: var(--gov-button-primary-link-active-color, var(--gov-color-error-500));
+  }
+}
+@media not all and (pointer: coarse) {
+  [type=link][variant=error][hoverable][inverse=""].gov-badge .element:hover, [type=link][variant=error][hoverable][inverse=true i].gov-badge .element:hover, [type=link][variant=error][hoverable][inverse="1"].gov-badge .element:hover {
+    background-color: var(--gov-button-error-link-inverse-hover-bg, transparent);
+    color: var(--gov-button-error-link-inverse-hover-color, var(--gov-color-neutral-white));
+  }
+  [type=link][variant=error][hoverable][inverse=""].gov-badge .element:hover:active, [type=link][variant=error][hoverable][inverse=true i].gov-badge .element:hover:active, [type=link][variant=error][hoverable][inverse="1"].gov-badge .element:hover:active {
+    background-color: var(--gov-button-error-link-inverse-active-bg, transparent);
+    color: var(--gov-button-error-link-inverse-active-color, var(--gov-color-neutral-white));
+  }
+}
 [type=solid][variant=success].gov-badge .element {
   background-color: var(--gov-button-success-solid-bg, var(--gov-color-success-500));
   color: var(--gov-button-success-solid-color, var(--gov-color-neutral-white));
@@ -717,6 +825,41 @@
     color: var(--gov-button-success-base-inverse-active-color, var(--gov-color-neutral-white));
   }
 }
+[type=link][variant=success].gov-badge .element {
+  color: var(--gov-button-success-link-color, var(--gov-color-success-500));
+  border-width: 0;
+}
+[type=link][variant=success][inverse=""].gov-badge .element, [type=link][variant=success][inverse=true i].gov-badge .element, [type=link][variant=success][inverse="1"].gov-badge .element {
+  color: var(--gov-button-success-link-inverse-color, var(--gov-color-neutral-white));
+  background-color: var(--gov-button-success-link-inverse-bg, transparent);
+}
+[type=link][variant=success][disabled=""].gov-badge .element, [type=link][variant=success][disabled=true i].gov-badge .element, [type=link][variant=success][disabled="1"].gov-badge .element {
+  color: var(--gov-button-success-link-disabled-color, var(--gov-color-success-300));
+}
+[type=link][variant=success][disabled=""][inverse=""].gov-badge .element, [type=link][variant=success][disabled=""][inverse=true i].gov-badge .element, [type=link][variant=success][disabled=""][inverse="1"].gov-badge .element, [type=link][variant=success][disabled=true i][inverse=""].gov-badge .element, [type=link][variant=success][disabled=true i][inverse=true i].gov-badge .element, [type=link][variant=success][disabled=true i][inverse="1"].gov-badge .element, [type=link][variant=success][disabled="1"][inverse=""].gov-badge .element, [type=link][variant=success][disabled="1"][inverse=true i].gov-badge .element, [type=link][variant=success][disabled="1"][inverse="1"].gov-badge .element {
+  background-color: var(--gov-button-success-link-inverse-disabled-bg, transparent);
+  color: var(--gov-button-success-link-inverse-disabled-color, var(--gov-color-success-400));
+}
+@media not all and (pointer: coarse) {
+  [type=link][variant=success][hoverable].gov-badge .element:hover {
+    background-color: var(--gov-button-success-link-hover-bg, transparent);
+    color: var(--gov-button-success-link-hover-color, var(--gov-color-success-500));
+  }
+  [type=link][variant=success][hoverable].gov-badge .element:hover:active {
+    background-color: var(--gov-button-success-link-active-bg, transparent);
+    color: var(--gov-button-primary-link-active-color, var(--gov-color-success-600));
+  }
+}
+@media not all and (pointer: coarse) {
+  [type=link][variant=success][hoverable][inverse=""].gov-badge .element:hover, [type=link][variant=success][hoverable][inverse=true i].gov-badge .element:hover, [type=link][variant=success][hoverable][inverse="1"].gov-badge .element:hover {
+    background-color: var(--gov-button-success-link-inverse-hover-bg, transparent);
+    color: var(--gov-button-success-link-inverse-hover-color, var(--gov-color-neutral-white));
+  }
+  [type=link][variant=success][hoverable][inverse=""].gov-badge .element:hover:active, [type=link][variant=success][hoverable][inverse=true i].gov-badge .element:hover:active, [type=link][variant=success][hoverable][inverse="1"].gov-badge .element:hover:active {
+    background-color: var(--gov-button-success-link-inverse-active-bg, transparent);
+    color: var(--gov-button-success-link-inverse-active-color, var(--gov-color-neutral-white));
+  }
+}
 [type=solid][variant=warning].gov-badge .element {
   background-color: var(--gov-button-warning-solid-bg, var(--gov-color-warning-500));
   color: var(--gov-button-warning-solid-color, var(--gov-color-neutral-white));
@@ -829,6 +972,41 @@
     color: var(--gov-button-warning-base-inverse-active-color, var(--gov-color-neutral-white));
   }
 }
+[type=link][variant=warning].gov-badge .element {
+  color: var(--gov-button-warning-link-color, var(--gov-color-warning-500));
+  border-width: 0;
+}
+[type=link][variant=warning][inverse=""].gov-badge .element, [type=link][variant=warning][inverse=true i].gov-badge .element, [type=link][variant=warning][inverse="1"].gov-badge .element {
+  color: var(--gov-button-warning-link-inverse-color, var(--gov-color-neutral-white));
+  background-color: var(--gov-button-warning-link-inverse-bg, transparent);
+}
+[type=link][variant=warning][disabled=""].gov-badge .element, [type=link][variant=warning][disabled=true i].gov-badge .element, [type=link][variant=warning][disabled="1"].gov-badge .element {
+  color: var(--gov-button-warning-link-disabled-color, var(--gov-color-warning));
+}
+[type=link][variant=warning][disabled=""][inverse=""].gov-badge .element, [type=link][variant=warning][disabled=""][inverse=true i].gov-badge .element, [type=link][variant=warning][disabled=""][inverse="1"].gov-badge .element, [type=link][variant=warning][disabled=true i][inverse=""].gov-badge .element, [type=link][variant=warning][disabled=true i][inverse=true i].gov-badge .element, [type=link][variant=warning][disabled=true i][inverse="1"].gov-badge .element, [type=link][variant=warning][disabled="1"][inverse=""].gov-badge .element, [type=link][variant=warning][disabled="1"][inverse=true i].gov-badge .element, [type=link][variant=warning][disabled="1"][inverse="1"].gov-badge .element {
+  background-color: var(--gov-button-warning-link-inverse-disabled-bg, transparent);
+  color: var(--gov-button-warning-link-inverse-disabled-color, var(--gov-color-warning-400));
+}
+@media not all and (pointer: coarse) {
+  [type=link][variant=warning][hoverable].gov-badge .element:hover {
+    background-color: var(--gov-button-warning-link-hover-bg, transparent);
+    color: var(--gov-button-warning-link-hover-color, var(--gov-color-warning-500));
+  }
+  [type=link][variant=warning][hoverable].gov-badge .element:hover:active {
+    background-color: var(--gov-button-warning-link-active-bg, transparent);
+    color: var(--gov-button-primary-link-active-color, var(--gov-color-warning-600));
+  }
+}
+@media not all and (pointer: coarse) {
+  [type=link][variant=warning][hoverable][inverse=""].gov-badge .element:hover, [type=link][variant=warning][hoverable][inverse=true i].gov-badge .element:hover, [type=link][variant=warning][hoverable][inverse="1"].gov-badge .element:hover {
+    background-color: var(--gov-button-warning-link-inverse-hover-bg, transparent);
+    color: var(--gov-button-warning-link-inverse-hover-color, var(--gov-color-neutral-white));
+  }
+  [type=link][variant=warning][hoverable][inverse=""].gov-badge .element:hover:active, [type=link][variant=warning][hoverable][inverse=true i].gov-badge .element:hover:active, [type=link][variant=warning][hoverable][inverse="1"].gov-badge .element:hover:active {
+    background-color: var(--gov-button-warning-link-inverse-active-bg, transparent);
+    color: var(--gov-button-warning-link-inverse-active-color, var(--gov-color-neutral-white));
+  }
+}
 [size=xs].gov-badge .element {
   font-weight: var(--gov-button-text-xs-font-weight, var(--gov-text-xs-font-weight));
   font-size: var(--gov-button-text-xs-font-size, var(--gov-text-xs-font-size));
@@ -843,22 +1021,6 @@
   width: var(--gov-button-xs-icon-size, 1rem);
   height: var(--gov-button-xs-icon-size, 1rem);
 }
-@media (min-width: 48em) {
-  [size=xs].gov-badge .element {
-    font-weight: var(--gov-button-text-xs-font-weight, var(--gov-text-xs-font-weight));
-    font-size: var(--gov-button-text-xs-font-size, var(--gov-text-xs-font-size));
-    line-height: var(--gov-button-text-xs-line-height, var(--gov-text-xs-line-height));
-    letter-spacing: var(--gov-button-text-xs-letter-spacing, var(--gov-text-xs-letter-spacing));
-    -moz-column-gap: var(--gov-button-xs-padding-x, 0.625rem);
-         column-gap: var(--gov-button-xs-padding-x, 0.625rem);
-    min-height: var(--gov-button-xs-min-height, 1.5rem);
-    padding: var(--gov-button-xs-padding-y, 0.125rem) var(--gov-button-xs-padding-x, 0.625rem);
-  }
-  [size=xs].gov-badge .element .gov-icon {
-    width: var(--gov-button-xs-icon-size, 1rem);
-    height: var(--gov-button-xs-icon-size, 1rem);
-  }
-}
 [size=s].gov-badge .element {
   font-weight: var(--gov-button-text-s-font-weight, var(--gov-text-s-font-weight));
   font-size: var(--gov-button-text-s-font-size, var(--gov-text-s-font-size));
@@ -873,53 +1035,7 @@
   width: var(--gov-button-s-icon-size, 1rem);
   height: var(--gov-button-s-icon-size, 1rem);
 }
-@media (min-width: 48em) {
-  [size=s].gov-badge .element {
-    font-weight: var(--gov-button-text-s-font-weight, var(--gov-text-s-font-weight));
-    font-size: var(--gov-button-text-s-font-size, var(--gov-text-s-font-size));
-    line-height: var(--gov-button-text-s-line-height, var(--gov-text-s-line-height));
-    letter-spacing: var(--gov-button-text-s-letter-spacing, var(--gov-text-s-letter-spacing));
-    -moz-column-gap: var(--gov-button-s-padding-x, 0.75rem);
-         column-gap: var(--gov-button-s-padding-x, 0.75rem);
-    min-height: var(--gov-button-s-min-height, 2rem);
-    padding: var(--gov-button-s-padding-y, 0.25rem) var(--gov-button-s-padding-x, 0.75rem);
-  }
-  [size=s].gov-badge .element .gov-icon {
-    width: var(--gov-button-s-icon-size, 1rem);
-    height: var(--gov-button-s-icon-size, 1rem);
-  }
-}
 [size=m].gov-badge .element {
-  font-weight: var(--gov-button-text-s-font-weight, var(--gov-text-s-font-weight));
-  font-size: var(--gov-button-text-s-font-size, var(--gov-text-s-font-size));
-  line-height: var(--gov-button-text-s-line-height, var(--gov-text-s-line-height));
-  letter-spacing: var(--gov-button-text-s-letter-spacing, var(--gov-text-s-letter-spacing));
-  -moz-column-gap: var(--gov-button-s-padding-x, 0.75rem);
-       column-gap: var(--gov-button-s-padding-x, 0.75rem);
-  min-height: var(--gov-button-s-min-height, 2rem);
-  padding: var(--gov-button-s-padding-y, 0.25rem) var(--gov-button-s-padding-x, 0.75rem);
-}
-[size=m].gov-badge .element .gov-icon {
-  width: var(--gov-button-s-icon-size, 1rem);
-  height: var(--gov-button-s-icon-size, 1rem);
-}
-@media (min-width: 48em) {
-  [size=m].gov-badge .element {
-    font-weight: var(--gov-button-text-m-font-weight, var(--gov-text-m-font-weight));
-    font-size: var(--gov-button-text-m-font-size, var(--gov-text-m-font-size));
-    line-height: var(--gov-button-text-m-line-height, var(--gov-text-m-line-height));
-    letter-spacing: var(--gov-button-text-m-letter-spacing, var(--gov-text-m-letter-spacing));
-    -moz-column-gap: var(--gov-button-m-padding-x, 0.75rem);
-         column-gap: var(--gov-button-m-padding-x, 0.75rem);
-    min-height: var(--gov-button-m-min-height, 2.5rem);
-    padding: var(--gov-button-m-padding-y, 0.375rem) var(--gov-button-m-padding-x, 0.75rem);
-  }
-  [size=m].gov-badge .element .gov-icon {
-    width: var(--gov-button-m-icon-size, 1.25rem);
-    height: var(--gov-button-m-icon-size, 1.25rem);
-  }
-}
-[size=l].gov-badge .element {
   font-weight: var(--gov-button-text-m-font-weight, var(--gov-text-m-font-weight));
   font-size: var(--gov-button-text-m-font-size, var(--gov-text-m-font-size));
   line-height: var(--gov-button-text-m-line-height, var(--gov-text-m-line-height));
@@ -929,27 +1045,11 @@
   min-height: var(--gov-button-m-min-height, 2.5rem);
   padding: var(--gov-button-m-padding-y, 0.375rem) var(--gov-button-m-padding-x, 0.75rem);
 }
-[size=l].gov-badge .element .gov-icon {
+[size=m].gov-badge .element .gov-icon {
   width: var(--gov-button-m-icon-size, 1.25rem);
   height: var(--gov-button-m-icon-size, 1.25rem);
 }
-@media (min-width: 48em) {
-  [size=l].gov-badge .element {
-    font-weight: var(--gov-button-text-l-font-weight, var(--gov-text-l-font-weight));
-    font-size: var(--gov-button-text-l-font-size, var(--gov-text-l-font-size));
-    line-height: var(--gov-button-text-l-line-height, var(--gov-text-l-line-height));
-    letter-spacing: var(--gov-button-text-l-letter-spacing, var(--gov-text-l-letter-spacing));
-    -moz-column-gap: var(--gov-button-l-padding-x, 1rem);
-         column-gap: var(--gov-button-l-padding-x, 1rem);
-    min-height: var(--gov-button-l-min-height, 3rem);
-    padding: var(--gov-button-l-padding-y, 0.5rem) var(--gov-button-l-padding-x, 1rem);
-  }
-  [size=l].gov-badge .element .gov-icon {
-    width: var(--gov-button-l-icon-size, 1.5rem);
-    height: var(--gov-button-l-icon-size, 1.5rem);
-  }
-}
-[size=xl].gov-badge .element {
+[size=l].gov-badge .element {
   font-weight: var(--gov-button-text-l-font-weight, var(--gov-text-l-font-weight));
   font-size: var(--gov-button-text-l-font-size, var(--gov-text-l-font-size));
   line-height: var(--gov-button-text-l-line-height, var(--gov-text-l-line-height));
@@ -959,25 +1059,23 @@
   min-height: var(--gov-button-l-min-height, 3rem);
   padding: var(--gov-button-l-padding-y, 0.5rem) var(--gov-button-l-padding-x, 1rem);
 }
-[size=xl].gov-badge .element .gov-icon {
+[size=l].gov-badge .element .gov-icon {
   width: var(--gov-button-l-icon-size, 1.5rem);
   height: var(--gov-button-l-icon-size, 1.5rem);
 }
-@media (min-width: 48em) {
-  [size=xl].gov-badge .element {
-    font-weight: var(--gov-button-text-xl-font-weight, var(--gov-text-xl-font-weight));
-    font-size: var(--gov-button-text-xl-font-size, var(--gov-text-xl-font-size));
-    line-height: var(--gov-button-text-xl-line-height, var(--gov-text-xl-line-height));
-    letter-spacing: var(--gov-button-text-xl-letter-spacing, var(--gov-text-xl-letter-spacing));
-    -moz-column-gap: var(--gov-button-xl-padding-x, 1.25rem);
-         column-gap: var(--gov-button-xl-padding-x, 1.25rem);
-    min-height: var(--gov-button-xl-min-height, 3.5rem);
-    padding: var(--gov-button-xl-padding-y, 0.75rem) var(--gov-button-xl-padding-x, 1.25rem);
-  }
-  [size=xl].gov-badge .element .gov-icon {
-    width: var(--gov-button-xl-icon-size, 1.75rem);
-    height: var(--gov-button-xl-icon-size, 1.75rem);
-  }
+[size=xl].gov-badge .element {
+  font-weight: var(--gov-button-text-xl-font-weight, var(--gov-text-xl-font-weight));
+  font-size: var(--gov-button-text-xl-font-size, var(--gov-text-xl-font-size));
+  line-height: var(--gov-button-text-xl-line-height, var(--gov-text-xl-line-height));
+  letter-spacing: var(--gov-button-text-xl-letter-spacing, var(--gov-text-xl-letter-spacing));
+  -moz-column-gap: var(--gov-button-xl-padding-x, 1.25rem);
+       column-gap: var(--gov-button-xl-padding-x, 1.25rem);
+  min-height: var(--gov-button-xl-min-height, 3.5rem);
+  padding: var(--gov-button-xl-padding-y, 0.75rem) var(--gov-button-xl-padding-x, 1.25rem);
+}
+[size=xl].gov-badge .element .gov-icon {
+  width: var(--gov-button-xl-icon-size, 1.75rem);
+  height: var(--gov-button-xl-icon-size, 1.75rem);
 }
 
 .gov-badge a .gov-icon {
@@ -1073,4 +1171,14 @@
   border-color: var(--gov-badge-inverse-error-border-color, var(--gov-color-error-200));
   background-color: var(--gov-badge-inverse-error-bg, var(--gov-color-error-100));
   color: var(--gov-badge-inverse-error-color, var(--gov-color-error-500));
+}
+.gov-badge--has-right > .element {
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+  padding-right: 0 !important;
+}
+.gov-badge--has-left > .element {
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+  padding-left: 0 !important;
 }

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

@@ -1,25 +1,18 @@
-import { h, Host } from '@stencil/core';
-import { validateProp } from '../../helpers/Validate/props';
-import { govHost } from '../../helpers/Dom/template';
-import { BadgeClass } from './constants';
-import { Type, ButtonVariants, ButtonSizes } from '../gov-button/constants';
-var Tags;
-(function (Tags) {
-  Tags["A"] = "a";
-  Tags["SPAN"] = "span";
-  Tags["BUTTON"] = "button";
-})(Tags || (Tags = {}));
+import { h, Host } from "@stencil/core";
+import { validateProp } from "../../helpers/Validate/props";
+import { govHost } from "../../helpers/Dom/template";
+import { BadgeClass, NativeType } from "./constants";
+import { Type, ButtonVariants, ButtonSizes, } from "../gov-button/constants";
 export class GovBadge {
   constructor() {
     this.inverse = false;
     this.disabled = false;
     this.href = undefined;
     this.target = undefined;
-    this.size = 'm';
-    this.type = 'solid';
-    this.tag = 'span';
-    this.nativeType = 'span';
-    this.variant = 'primary';
+    this.size = "m";
+    this.type = "solid";
+    this.tag = "span";
+    this.variant = "primary";
     this.wcagLabel = undefined;
     this.h = govHost(this.host);
   }
@@ -38,13 +31,17 @@ export class GovBadge {
     this.validateType(this.type);
   }
   render() {
-    const Tag = this.href ? Tags.A : this.nativeType == 'button' ? Tags.BUTTON : this.tag;
-    const nativeType = Tag == Tags.BUTTON ? this.nativeType : undefined;
-    return (h(Host, { class: this.h.classes(BadgeClass.root), disabled: this.disabled, href: this.href, variant: this.variant, size: this.size, type: this.type, inverse: this.inverse, hoverable: Tag == Tags.A || Tag == Tags.BUTTON }, h(Tag, { class: "element", href: this.href, target: this.target, "aria-label": this.wcagLabel, onClick: this.onClickHandler.bind(this), type: nativeType }, this.h.hasSlot('left-icon') && h("slot", { name: "left-icon" }), h("slot", null), this.h.hasSlot('right-icon') && h("slot", { name: "right-icon" }))));
+    const Tag = this.href ? NativeType.A : this.tag;
+    const nativeType = Tag == NativeType.BUTTON ? NativeType.BUTTON : undefined;
+    return (h(Host, { class: this.h.classes([
+        BadgeClass.root,
+        this.h.hasSlot("right") ? BadgeClass.hasRight : undefined,
+        this.h.hasSlot("left") ? BadgeClass.hasLeft : undefined,
+      ]), disabled: this.disabled, href: this.href, variant: this.variant, size: this.size, type: this.type, inverse: this.inverse, hoverable: Tag == NativeType.A || Tag == NativeType.BUTTON }, h(Tag, { class: "element", href: this.href, target: this.target, "aria-label": this.wcagLabel, onClick: this.onClickHandler.bind(this), type: nativeType }, this.h.hasSlot("left") && h("slot", { name: "left" }), this.h.hasSlot("left-icon") && h("slot", { name: "left-icon" }), h("slot", null), this.h.hasSlot("right-icon") && h("slot", { name: "right-icon" }), this.h.hasSlot("right") && h("slot", { name: "right" }))));
   }
   onClickHandler(e) {
     e.stopPropagation();
-    if (this.disabled === false) {
+    if (this.disabled === false && this.tag === NativeType.BUTTON) {
       this.govClick.emit(e);
     }
   }
@@ -142,7 +139,7 @@ export class GovBadge {
         "mutable": false,
         "complexType": {
           "original": "ButtonSizesType",
-          "resolved": "\"l\" | \"m\" | \"s\" | \"xl\"",
+          "resolved": "\"l\" | \"m\" | \"s\" | \"xl\" | \"xs\"",
           "references": {
             "ButtonSizesType": {
               "location": "import",
@@ -158,14 +155,14 @@ export class GovBadge {
         },
         "attribute": "size",
         "reflect": false,
-        "defaultValue": "'m'"
+        "defaultValue": "\"m\""
       },
       "type": {
         "type": "string",
         "mutable": false,
         "complexType": {
           "original": "TypesType",
-          "resolved": "\"base\" | \"outlined\" | \"solid\"",
+          "resolved": "\"base\" | \"link\" | \"outlined\" | \"solid\"",
           "references": {
             "TypesType": {
               "location": "import",
@@ -181,32 +178,14 @@ export class GovBadge {
         },
         "attribute": "type",
         "reflect": false,
-        "defaultValue": "'solid'"
+        "defaultValue": "\"solid\""
       },
       "tag": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Used to change the HMTL tag in the badge"
-        },
-        "attribute": "tag",
-        "reflect": false,
-        "defaultValue": "'span'"
-      },
-      "nativeType": {
         "type": "string",
         "mutable": false,
         "complexType": {
           "original": "NativeTypesType",
-          "resolved": "\"button\" | \"span\"",
+          "resolved": "\"a\" | \"button\" | \"span\"",
           "references": {
             "NativeTypesType": {
               "location": "import",
@@ -218,11 +197,11 @@ export class GovBadge {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Same as original parameter\nhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type"
+          "text": "Used to change the HMTL tag in the badge"
         },
-        "attribute": "native-type",
+        "attribute": "tag",
         "reflect": false,
-        "defaultValue": "'span'"
+        "defaultValue": "\"span\""
       },
       "variant": {
         "type": "string",
@@ -245,7 +224,7 @@ export class GovBadge {
         },
         "attribute": "variant",
         "reflect": false,
-        "defaultValue": "'primary'"
+        "defaultValue": "\"primary\""
       },
       "wcagLabel": {
         "type": "string",

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

@@ -1 +1 @@
-{"version":3,"file":"gov-badge.js","sourceRoot":"","sources":["../../../../../../src/components/gov-badge/gov-badge.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Host, Prop, Watch, Event, EventEmitter } from '@stencil/core'\nimport { GovHost } from '../../helpers/Dom/template.types'\nimport { validateProp } from '../../helpers/Validate/props'\nimport { govHost } from '../../helpers/Dom/template'\nimport { BadgeClass, NativeTypesType } from './constants'\nimport { ButtonSizesType, TypesType, Type, ButtonVariantType, ButtonVariants, ButtonSizes } from '../gov-button/constants'\n\nenum Tags {\n\tA = 'a',\n\tSPAN = 'span',\n\tBUTTON = 'button',\n}\n\n@Component({\n\ttag: 'gov-badge',\n\tstyleUrl: 'gov-badge.scss',\n})\nexport class GovBadge {\n\tprivate h: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\n\t@Element() host: HTMLGovBadgeElement\n\n\t/**\n\t * Determide if component should have inversed colors to be used on dark background\n\t */\n\t@Prop() readonly inverse: boolean = false\n\t/**\n\t * Makes the badge component disabled.\n\t * This prevents users from being able to interact with the button, and conveys its inactive state to assistive technologies.\n\t */\n\t@Prop() readonly disabled: boolean = false\n\t/**\n\t * Same as original parameter\n\t * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-href\n\t */\n\t@Prop() readonly href: string\n\t/**\n\t * Same as original parameter\n\t * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target\n\t */\n\t@Prop() readonly target: string\n\t/**\n\t * Badge’s size.\n\t */\n\t@Prop() readonly size: ButtonSizesType = 'm'\n\t/**\n\t * Badges's type\n\t */\n\t@Prop() readonly type: TypesType = 'solid'\n\t/**\n\t * Used to change the HMTL tag in the badge\n\t */\n\t@Prop() readonly tag: string = 'span'\n\t/**\n\t * Same as original parameter\n\t * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type\n\t */\n\t@Prop() readonly nativeType: NativeTypesType = 'span'\n\t/**\n\t * Style variation of the badge.\n\t */\n\t@Prop() readonly variant: ButtonVariantType = 'primary'\n\t/**\n\t * Adds accessible label for the button that is only shown for screen readers.\n\t * Typically, this label text replaces the visible text on the button for users who use assistive technology.\n\t */\n\t@Prop({ attribute: 'wcag-label' }) readonly wcagLabel: string\n\t/**\n\t * Emitted when the button click.\n\t */\n\t@Event({ eventName: 'gov-click' }) govClick: EventEmitter<PointerEvent>\n\n\t@Watch('variant')\n\tvalidateVariant(newValue: string): void {\n\t\tvalidateProp(ButtonVariants, newValue, BadgeClass.root)\n\t}\n\n\t@Watch('size')\n\tvalidateSize(newValue: string): void {\n\t\tvalidateProp(ButtonSizes, newValue, BadgeClass.root)\n\t}\n\n\t@Watch('type')\n\tvalidateType(newValue: string): void {\n\t\tvalidateProp(Type, newValue, BadgeClass.root)\n\t}\n\n\tcomponentWillLoad(): void {\n\t\tthis.validateVariant(this.variant)\n\t\tthis.validateSize(this.size)\n\t\tthis.validateType(this.type)\n\t}\n\n\trender() {\n\t\tconst Tag = this.href ? Tags.A : this.nativeType == 'button' ? Tags.BUTTON : this.tag\n\t\tconst nativeType = Tag == Tags.BUTTON ? this.nativeType : undefined\n\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={this.h.classes(BadgeClass.root)}\n\t\t\t\tdisabled={this.disabled}\n\t\t\t\thref={this.href}\n\t\t\t\tvariant={this.variant}\n\t\t\t\tsize={this.size}\n\t\t\t\ttype={this.type}\n\t\t\t\tinverse={this.inverse}\n\t\t\t\thoverable={Tag == Tags.A || Tag == Tags.BUTTON}\n\t\t\t>\n\t\t\t\t<Tag class=\"element\" href={this.href} target={this.target} aria-label={this.wcagLabel} onClick={this.onClickHandler.bind(this)} type={nativeType}>\n\t\t\t\t\t{this.h.hasSlot('left-icon') && <slot name=\"left-icon\"></slot>}\n\t\t\t\t\t<slot />\n\t\t\t\t\t{this.h.hasSlot('right-icon') && <slot name=\"right-icon\"></slot>}\n\t\t\t\t</Tag>\n\t\t\t</Host>\n\t\t)\n\t}\n\n\tprivate onClickHandler(e: PointerEvent): void {\n\t\te.stopPropagation()\n\t\tif (this.disabled === false) {\n\t\t\tthis.govClick.emit(e)\n\t\t}\n\t}\n}\n"]}
+{"version":3,"file":"gov-badge.js","sourceRoot":"","sources":["../../../../../../src/components/gov-badge/gov-badge.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Host, Prop, Watch, Event, EventEmitter } from \"@stencil/core\"\nimport { GovHost } from \"../../helpers/Dom/template.types\"\nimport { validateProp } from \"../../helpers/Validate/props\"\nimport { govHost } from \"../../helpers/Dom/template\"\nimport { BadgeClass, NativeTypesType, NativeType } from \"./constants\"\nimport {\n\tButtonSizesType,\n\tTypesType,\n\tType,\n\tButtonVariantType,\n\tButtonVariants,\n\tButtonSizes,\n} from \"../gov-button/constants\"\n\n@Component({\n\ttag: \"gov-badge\",\n\tstyleUrl: \"gov-badge.scss\",\n})\nexport class GovBadge {\n\tprivate h: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\n\t@Element() host: HTMLGovBadgeElement\n\n\t/**\n\t * Determide if component should have inversed colors to be used on dark background\n\t */\n\t@Prop() readonly inverse: boolean = false\n\t/**\n\t * Makes the badge component disabled.\n\t * This prevents users from being able to interact with the button, and conveys its inactive state to assistive technologies.\n\t */\n\t@Prop() readonly disabled: boolean = false\n\t/**\n\t * Same as original parameter\n\t * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-href\n\t */\n\t@Prop() readonly href: string\n\t/**\n\t * Same as original parameter\n\t * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target\n\t */\n\t@Prop() readonly target: string\n\t/**\n\t * Badge’s size.\n\t */\n\t@Prop() readonly size: ButtonSizesType = \"m\"\n\t/**\n\t * Badges's type\n\t */\n\t@Prop() readonly type: TypesType = \"solid\"\n\t/**\n\t * Used to change the HMTL tag in the badge\n\t */\n\t@Prop() readonly tag: NativeTypesType = \"span\"\n\t/**\n\t * Style variation of the badge.\n\t */\n\t@Prop() readonly variant: ButtonVariantType = \"primary\"\n\t/**\n\t * Adds accessible label for the button that is only shown for screen readers.\n\t * Typically, this label text replaces the visible text on the button for users who use assistive technology.\n\t */\n\t@Prop({ attribute: \"wcag-label\" }) readonly wcagLabel: string\n\t/**\n\t * Emitted when the button click.\n\t */\n\t@Event({ eventName: \"gov-click\" }) govClick: EventEmitter<PointerEvent>\n\n\t@Watch(\"variant\")\n\tvalidateVariant(newValue: string): void {\n\t\tvalidateProp(ButtonVariants, newValue, BadgeClass.root)\n\t}\n\n\t@Watch(\"size\")\n\tvalidateSize(newValue: string): void {\n\t\tvalidateProp(ButtonSizes, newValue, BadgeClass.root)\n\t}\n\n\t@Watch(\"type\")\n\tvalidateType(newValue: string): void {\n\t\tvalidateProp(Type, newValue, BadgeClass.root)\n\t}\n\n\tcomponentWillLoad(): void {\n\t\tthis.validateVariant(this.variant)\n\t\tthis.validateSize(this.size)\n\t\tthis.validateType(this.type)\n\t}\n\n\trender() {\n\t\tconst Tag = this.href ? NativeType.A : this.tag\n\t\tconst nativeType = Tag == NativeType.BUTTON ? NativeType.BUTTON : undefined\n\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={this.h.classes([\n\t\t\t\t\tBadgeClass.root,\n\t\t\t\t\tthis.h.hasSlot(\"right\") ? BadgeClass.hasRight : undefined,\n\t\t\t\t\tthis.h.hasSlot(\"left\") ? BadgeClass.hasLeft : undefined,\n\t\t\t\t])}\n\t\t\t\tdisabled={this.disabled}\n\t\t\t\thref={this.href}\n\t\t\t\tvariant={this.variant}\n\t\t\t\tsize={this.size}\n\t\t\t\ttype={this.type}\n\t\t\t\tinverse={this.inverse}\n\t\t\t\thoverable={Tag == NativeType.A || Tag == NativeType.BUTTON}\n\t\t\t>\n\t\t\t\t<Tag\n\t\t\t\t\tclass=\"element\"\n\t\t\t\t\thref={this.href}\n\t\t\t\t\ttarget={this.target}\n\t\t\t\t\taria-label={this.wcagLabel}\n\t\t\t\t\tonClick={this.onClickHandler.bind(this)}\n\t\t\t\t\ttype={nativeType}>\n\t\t\t\t\t{this.h.hasSlot(\"left\") && <slot name=\"left\"></slot>}\n\t\t\t\t\t{this.h.hasSlot(\"left-icon\") && <slot name=\"left-icon\"></slot>}\n\t\t\t\t\t<slot />\n\t\t\t\t\t{this.h.hasSlot(\"right-icon\") && <slot name=\"right-icon\"></slot>}\n\t\t\t\t\t{this.h.hasSlot(\"right\") && <slot name=\"right\"></slot>}\n\t\t\t\t</Tag>\n\t\t\t</Host>\n\t\t)\n\t}\n\n\tprivate onClickHandler(e: PointerEvent): void {\n\t\te.stopPropagation()\n\t\tif (this.disabled === false && this.tag === NativeType.BUTTON) {\n\t\t\tthis.govClick.emit(e)\n\t\t}\n\t}\n}\n"]}

package/dist/collection/components/gov-breadcrumbs/gov-breadcrumbs.css

@@ -162,6 +162,9 @@
 /*
  -	Variables - Form multiselect
  */
+/*
+ -	Variables - Form password power
+ */
 /*
  -	Variables - Form checkbox & radio
  */

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

@@ -24,7 +24,7 @@ export class GovBreadcrumbs {
   }
   render() {
     const { isExpandedState } = this;
-    return (h(Host, { class: this.h.classes(BreadcrumbsClass.root), collapsible: this.collapsible }, h("nav", { "aria-label": this.wcagLabel, "aria-labelledby": this.wcagLabelledBy }, h("ul", { class: BreadcrumbsClass.list }, h("li", { class: BreadcrumbsClass.item }, h("a", { href: "#", class: "gov-link" }, "Dom\u016F"), h("gov-icon", { class: BreadcrumbsClass.arrow, name: "arrow-right" })), h("li", { class: BreadcrumbsClass.item }, h("a", { href: "#", class: "gov-link" }, "Kam d\u00E1l"), h("gov-icon", { class: BreadcrumbsClass.arrow, name: "arrow-right" })), h("li", { class: BreadcrumbsClass.item }, h("a", { href: "#", class: "gov-link" }, "\u010Cesk\u00FD eGovernment"), h("gov-icon", { class: BreadcrumbsClass.arrow, name: "arrow-right" })), h("li", { class: BreadcrumbsClass.item }, h("strong", null, "Czech POINT")))), this.collapsible && (h("gov-button", { "aria-expanded": booleanString(isExpandedState), class: BreadcrumbsClass.button, variant: "primary", size: "s", inverse: true }, h("gov-icon", { slot: "left-icon", name: "arrow-down", onClick: () => this.toggle() })))));
+    return (h(Host, { class: this.h.classes(BreadcrumbsClass.root), collapsible: this.collapsible }, h("nav", { "aria-label": this.wcagLabel, "aria-labelledby": this.wcagLabelledBy }, h("ul", { class: BreadcrumbsClass.list }, h("li", { class: BreadcrumbsClass.item }, h("a", { href: "#", class: "gov-link" }, "Dom\u016F"), h("gov-icon", { class: BreadcrumbsClass.arrow, name: "chevron-right" })), h("li", { class: BreadcrumbsClass.item }, h("a", { href: "#", class: "gov-link" }, "Kam d\u00E1l"), h("gov-icon", { class: BreadcrumbsClass.arrow, name: "chevron-right" })), h("li", { class: BreadcrumbsClass.item }, h("a", { href: "#", class: "gov-link" }, "\u010Cesk\u00FD eGovernment"), h("gov-icon", { class: BreadcrumbsClass.arrow, name: "chevron-right" })), h("li", { class: BreadcrumbsClass.item }, h("strong", null, "Czech POINT")))), this.collapsible && (h("gov-button", { "aria-expanded": booleanString(isExpandedState), class: BreadcrumbsClass.button, variant: "primary", size: "s", inverse: true }, h("gov-icon", { slot: "left-icon", name: "chevron-down", onClick: () => this.toggle() })))));
   }
   /**
    * Opening the Breadcrumbs