@oiz/stzh-components 2.4.0 → 2.5.0-alpha

package/dist/components/stzh-chart.js

@@ -26912,7 +26912,7 @@ const topojson = /*#__PURE__*/Object.freeze({
   untransform: untransform
 });
 
-const stzhChartCss = "@charset \"UTF-8\";:host{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}:host[hidden]{display:none}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sszvis-outer-container{clear:both;position:relative}.sszvis-svg-layer{position:relative}.sszvis-html-layer{position:absolute}.sszvis-fallback-image{display:block;margin:0 auto;max-width:32.25rem;width:100%}.sszvis-interactive{cursor:default;user-select:none;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);-webkit-touch-callout:none}.sszvis-interactive.sszvis-interactive--draggable{cursor:pointer;cursor:grab;cursor:-webkit-grab}.sszvis-interactive.sszvis-interactive--draggable:active{cursor:grabbing;cursor:-webkit-grabbing}:root{--stzh-font:var(--stzh-font-family-regular, \"Helvetica Neue\", Helvetica, Arial, sans-serif)}.sszvis-axis text{color:#737373;fill:#737373;font-family:\"Helvetica Neue\", Helvetica, Arial, sans-serif;font-family:var(--stzh-font);font-size:0.625rem;font-style:normal;font-weight:normal}.sszvis-axis path,.sszvis-axis line{fill:none;stroke:#b8b8b8;shape-rendering:crispEdges}.sszvis-axis .tick text.active{fill:#545454}.sszvis-axis .tick text.hidden{display:none}.sszvis-axis .tick line.hidden{display:none}.sszvis-axis.sszvis-axis--top path{display:none}.sszvis-axis.sszvis-axis--vertical path{display:none}.sszvis-axis.sszvis-axis--slider path{stroke:none}.sszvis-axis__label-contour{fill:#ffffff;opacity:0.8;stroke:#ffffff;stroke-width:3}.sszvis-bar--missing{stroke:#a4a4a4}.sszvis-line{fill:none;stroke-width:1.1}.sszvis-pyramid__referenceline{fill:none;stroke:#aaa;stroke-width:2;stroke-dasharray:3 3}.sszvis-sankey-label{alignment-baseline:central;dominant-baseline:central;font-family:\"Helvetica Neue\", Helvetica, Arial, sans-serif;font-family:var(--stzh-font);font-size:0.625rem;font-style:normal;font-weight:normal}.sszvis-sankey-strong-label{fill:#545454}.sszvis-sankey-weak-label{fill:#767676}.sszvis-sankey-column-label{text-anchor:middle}.sszvis-sankey-column-label-tick{stroke:#b8b8b8}.sszvis-sankey-link-source-label{text-anchor:start}.sszvis-sankey-link-target-label{text-anchor:end}.sszvis-map__area{stroke:none}.sszvis-map__border{fill:none;pointer-events:none;stroke-linejoin:round;user-select:none;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none}.sszvis-map__highlight{fill:none;pointer-events:none;stroke-linejoin:round;user-select:none;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none}.sszvis-map__lakezurich{pointer-events:none;stroke:none;user-select:none;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none}.sszvis-map__lakepath{fill:none;pointer-events:none;stroke:#d3d3d3;stroke-width:1.25;stroke-dasharray:3 3;user-select:none;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none}.sszvis-map__geojsonelement{pointer-events:none;user-select:none;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none}.sszvis-map__image{display:block;position:absolute;pointer-events:none;user-select:none;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none}.sszvis-map__rasterimage{display:block;position:absolute;pointer-events:none;user-select:none;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none}.sszvis-control-buttonGroup{display:inline-block;position:absolute;user-select:none;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none}.sszvis-control-buttonGroup__item{background-color:#ffffff;border:0.0625rem solid #0f05a0;border-left:none;-webkit-box-sizing:border-box;box-sizing:border-box;color:#0f05a0;cursor:pointer;display:table-cell;font-family:\"Helvetica Neue\", Helvetica, Arial, sans-serif;font-family:var(--stzh-font);font-size:0.75rem;line-height:normal;padding:0.5625rem 0.75rem;text-align:center;vertical-align:middle;-webkit-transition:all 0.3s;transition:all 0.3s}.sszvis-control-buttonGroup__item:hover,.sszvis-control-buttonGroup__item.selected:hover{background-color:#070250;color:#fff}.sszvis-control-buttonGroup__item.selected{background-color:#0f05a0;color:#ffffff}.sszvis-control-buttonGroup__item:first-child{border-left:0.0625rem solid #0f05a0}.sszvis-control-select{border:0.0625rem solid #0f05a0;border-radius:0.125rem;background-color:#ffffff;background-image:url(\"data:image/png;base64,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\");background-position:96% 51%;background-repeat:no-repeat;background-size:0.75rem 0.75rem;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer;height:2.125rem;overflow:hidden;color:#0f05a0;-webkit-transition:all 0.3s;transition:all 0.3s}.sszvis-control-select:hover{border-color:#070250}.sszvis-control-select__element:hover{color:#070250;cursor:pointer}.sszvis-control-select__element{background:transparent;border:0.0625rem solid #ffffff;color:#0f05a0;font-family:\"Helvetica Neue\", Helvetica, Arial, sans-serif;font-family:var(--stzh-font);font-size:1rem;height:2.125rem;outline:0;-webkit-transition:all 0.3s;transition:all 0.3s;padding-left:0.3125rem}.sszvis-control-select__element:-moz-focusring{color:transparent;text-shadow:0 0 0 #000}.sszvis-control-select__metrics{font-family:\"Helvetica Neue\", Helvetica, Arial, sans-serif;font-family:var(--stzh-font);font-size:0.75rem;height:auto;position:absolute;visibility:hidden;width:auto;white-space:nowrap}.sszvis-control-slider__handle{cursor:pointer}.sszvis-control-slider--label{fill:#545454;font-family:\"Helvetica Neue\", Helvetica, Arial, sans-serif;font-family:var(--stzh-font);font-size:0.625rem;text-anchor:middle}.sszvis-control-slider__handlebox{fill:#fff;stroke:#545454}.sszvis-control-slider__handleline{stroke:#545454}.sszvis-handleRuler__handle{fill:#ffffff;stroke:#808184}.sszvis-handleRuler__handle-mark{stroke:#a6a8ab}.sszvis-ruler__rule{shape-rendering:crispEdges;stroke:#cccccc}.sszvis-ruler__dot{stroke:#ffffff;stroke-width:1.5}.sszvis-ruler__label,.sszvis-ruler__label-outline{font-family:\"Helvetica Neue\", Helvetica, Arial, sans-serif;font-family:var(--stzh-font);font-size:0.75rem;font-style:normal;font-weight:normal}.sszvis-ruler__label{fill:#545454}.sszvis-ruler__label-outline{stroke:#ffffff;stroke-width:3}.sszvis-rangeFlag__mark{fill:#efefef;stroke:#7c7c7c;stroke-width:1.5}.sszvis-rangeRuler__rule{opacity:0.25;shape-rendering:crispEdges;stroke:#000000}.sszvis-rangeRuler__p1,.sszvis-rangeRuler__p2{fill:#000000;opacity:0.25}.sszvis-rangeRuler__label,.sszvis-rangeRuler__total{stroke:none;font-size:0.625rem;fill:#737373;color:#737373;font-family:\"Helvetica Neue\", Helvetica, Arial, sans-serif;font-family:var(--stzh-font);font-style:normal}.sszvis-rangeRuler__label-contour,.sszvis-rangeRuler__total-contour{font-size:0.625rem;fill:#737373;color:#737373;font-family:\"Helvetica Neue\", Helvetica, Arial, sans-serif;font-family:var(--stzh-font);font-style:normal;stroke:#ffffff;stroke-width:3;stroke-opacity:0.8}.sszvis-tooltip{min-width:3.75rem;position:absolute}.sszvis-tooltip__background{position:absolute}.sszvis-tooltip__background path{fill:rgba(255, 255, 255, 0.9)}.sszvis-tooltip__background.sszvis-tooltip__background--fallback path{stroke:#ddd;stroke-width:1}.sszvis-tooltip__content{font-family:Arial;padding:0.625rem 0.625rem 0.4375rem 0.625rem;position:relative;white-space:nowrap;z-index:1}.sszvis-tooltip__content strong{font-weight:bold}.sszvis-tooltip__content em{font-weight:bold}.sszvis-tooltip__header{color:#545454;font-size:0.75rem;line-height:1.3333;vertical-align:middle}.sszvis-tooltip__body{color:#7c7c7c;font-size:0.6875rem;line-height:1.4545;vertical-align:middle}.sszvis-tooltip--small .sszvis-tooltip__content{padding:0.375rem 0.625rem 0.25rem 0.625rem;text-align:center}.sszvis-tooltip__body__table,.sszvis-tooltip__body__table td{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:top}.sszvis-tooltip__body__table{border:none !important;border-collapse:collapse;border-spacing:0;min-width:7.5rem;margin-top:0.375rem;width:100%}.sszvis-tooltip__body__table tr{border-top:0.0625rem solid #e5e6e7}.sszvis-tooltip__body__table td{border:none !important;padding:0.4375rem 0.5em 0.4375rem 0 !important;text-align:left;vertical-align:top}.sszvis-tooltip__body__table tr:last-child td{padding-bottom:0.1875rem}.sszvis-tooltip__body__table td:last-child{color:#545454;font-weight:bold;padding-right:0;text-align:right}.sszvis-tooltipAnchor{pointer-events:none;user-select:none;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none}.sszvis-referenceline{stroke-width:1.5;stroke:#aaa;stroke-dasharray:3 3}.sszvis-referenceline__caption{fill:#7c7c7c;font-family:\"Helvetica Neue\", Helvetica, Arial, sans-serif;font-family:var(--stzh-font);font-size:0.6875rem;text-anchor:middle;-webkit-backface-visibility:hidden}.sszvis-dataareacircle__caption{fill:#7c7c7c;font-family:\"Helvetica Neue\", Helvetica, Arial, sans-serif;font-family:var(--stzh-font);font-size:0.6875rem;text-anchor:middle}.sszvis-dataarearectangle__caption{fill:#7c7c7c;font-family:\"Helvetica Neue\", Helvetica, Arial, sans-serif;font-family:var(--stzh-font);font-size:0.6875rem;text-anchor:middle}.sszvis-legend__label{fill:#767676;font-family:\"Helvetica Neue\", Helvetica, Arial, sans-serif;font-family:var(--stzh-font);font-size:0.75rem;font-style:normal;font-weight:normal;text-anchor:start}.sszvis-legend__label--small{fill:#767676;font-size:0.625rem}.sszvis-legend__axislabel{fill:#767676;font-family:\"Helvetica Neue\", Helvetica, Arial, sans-serif;font-family:var(--stzh-font);font-size:0.625rem;font-style:normal;font-weight:normal}.sszvis-legend__crispmark{shape-rendering:crispEdges}.sszvis-legend__greyline{fill:none;stroke:#b8b8b8;stroke-width:1.1}.sszvis-legend__dashedline{stroke:#cccccc;stroke-dasharray:2 3;stroke-width:1}stzh-chart{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}stzh-chart[hidden]{display:none}stzh-chart *,stzh-chart *::before,stzh-chart *::after{-webkit-box-sizing:border-box;box-sizing:border-box}";
+const stzhChartCss = "@charset \"UTF-8\";:host{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}:host[hidden]{display:none}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}.sszvis-outer-container{clear:both;position:relative}.sszvis-svg-layer{position:relative}.sszvis-html-layer{position:absolute}.sszvis-fallback-image{display:block;margin:0 auto;max-width:32.25rem;width:100%}.sszvis-interactive{cursor:default;user-select:none;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);-webkit-touch-callout:none}.sszvis-interactive.sszvis-interactive--draggable{cursor:pointer;cursor:grab;cursor:-webkit-grab}.sszvis-interactive.sszvis-interactive--draggable:active{cursor:grabbing;cursor:-webkit-grabbing}:root{--stzh-font:var(--stzh-font-family-regular, \"Helvetica Neue\", Helvetica, Arial, sans-serif)}.sszvis-axis text{color:#737373;fill:#737373;font-family:\"Helvetica Neue\", Helvetica, Arial, sans-serif;font-family:var(--stzh-font);font-size:0.625rem;font-style:normal;font-weight:normal}.sszvis-axis path,.sszvis-axis line{fill:none;stroke:#b8b8b8;shape-rendering:crispEdges}.sszvis-axis .tick text.active{fill:#545454}.sszvis-axis .tick text.hidden{display:none}.sszvis-axis .tick line.hidden{display:none}.sszvis-axis.sszvis-axis--top path{display:none}.sszvis-axis.sszvis-axis--vertical path{display:none}.sszvis-axis.sszvis-axis--slider path{stroke:none}.sszvis-axis__label-contour{fill:#ffffff;opacity:0.8;stroke:#ffffff;stroke-width:3}.sszvis-bar--missing{stroke:#a4a4a4}.sszvis-line{fill:none;stroke-width:1.1}.sszvis-pyramid__referenceline{fill:none;stroke:#aaa;stroke-width:2;stroke-dasharray:3 3}.sszvis-sankey-label{alignment-baseline:central;dominant-baseline:central;font-family:\"Helvetica Neue\", Helvetica, Arial, sans-serif;font-family:var(--stzh-font);font-size:0.625rem;font-style:normal;font-weight:normal}.sszvis-sankey-strong-label{fill:#545454}.sszvis-sankey-weak-label{fill:#767676}.sszvis-sankey-column-label{text-anchor:middle}.sszvis-sankey-column-label-tick{stroke:#b8b8b8}.sszvis-sankey-link-source-label{text-anchor:start}.sszvis-sankey-link-target-label{text-anchor:end}.sszvis-map__area{stroke:none}.sszvis-map__border{fill:none;pointer-events:none;stroke-linejoin:round;user-select:none;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none}.sszvis-map__highlight{fill:none;pointer-events:none;stroke-linejoin:round;user-select:none;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none}.sszvis-map__lakezurich{pointer-events:none;stroke:none;user-select:none;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none}.sszvis-map__lakepath{fill:none;pointer-events:none;stroke:#d3d3d3;stroke-width:1.25;stroke-dasharray:3 3;user-select:none;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none}.sszvis-map__geojsonelement{pointer-events:none;user-select:none;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none}.sszvis-map__image{display:block;position:absolute;pointer-events:none;user-select:none;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none}.sszvis-map__rasterimage{display:block;position:absolute;pointer-events:none;user-select:none;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none}.sszvis-control-buttonGroup{display:inline-block;position:absolute;user-select:none;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none}.sszvis-control-buttonGroup__item{background-color:#ffffff;border:0.0625rem solid #0f05a0;border-left:none;-webkit-box-sizing:border-box;box-sizing:border-box;color:#0f05a0;cursor:pointer;display:table-cell;font-family:\"Helvetica Neue\", Helvetica, Arial, sans-serif;font-family:var(--stzh-font);font-size:0.75rem;line-height:normal;padding:0.5625rem 0.75rem;text-align:center;vertical-align:middle;-webkit-transition:all 0.3s;transition:all 0.3s}.sszvis-control-buttonGroup__item:hover,.sszvis-control-buttonGroup__item.selected:hover{background-color:#070250;color:#fff}.sszvis-control-buttonGroup__item.selected{background-color:#0f05a0;color:#ffffff}.sszvis-control-buttonGroup__item:first-child{border-left:0.0625rem solid #0f05a0}.sszvis-control-select{border:0.0625rem solid #0f05a0;border-radius:0.125rem;background-color:#ffffff;background-image:url(\"data:image/png;base64,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\");background-position:96% 51%;background-repeat:no-repeat;background-size:0.75rem 0.75rem;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer;height:2.125rem;overflow:hidden;color:#0f05a0;-webkit-transition:all 0.3s;transition:all 0.3s}.sszvis-control-select:hover{border-color:#070250}.sszvis-control-select__element:hover{color:#070250;cursor:pointer}.sszvis-control-select__element{background:transparent;border:0.0625rem solid #ffffff;color:#0f05a0;font-family:\"Helvetica Neue\", Helvetica, Arial, sans-serif;font-family:var(--stzh-font);font-size:1rem;height:2.125rem;outline:0;-webkit-transition:all 0.3s;transition:all 0.3s;padding-left:0.3125rem}.sszvis-control-select__element:-moz-focusring{color:transparent;text-shadow:0 0 0 #000}.sszvis-control-select__metrics{font-family:\"Helvetica Neue\", Helvetica, Arial, sans-serif;font-family:var(--stzh-font);font-size:0.75rem;height:auto;position:absolute;visibility:hidden;width:auto;white-space:nowrap}.sszvis-control-slider__handle{cursor:pointer}.sszvis-control-slider--label{fill:#545454;font-family:\"Helvetica Neue\", Helvetica, Arial, sans-serif;font-family:var(--stzh-font);font-size:0.625rem;text-anchor:middle}.sszvis-control-slider__handlebox{fill:#fff;stroke:#545454}.sszvis-control-slider__handleline{stroke:#545454}.sszvis-handleRuler__handle{fill:#ffffff;stroke:#808184}.sszvis-handleRuler__handle-mark{stroke:#a6a8ab}.sszvis-ruler__rule{shape-rendering:crispEdges;stroke:#cccccc}.sszvis-ruler__dot{stroke:#ffffff;stroke-width:1.5}.sszvis-ruler__label,.sszvis-ruler__label-outline{font-family:\"Helvetica Neue\", Helvetica, Arial, sans-serif;font-family:var(--stzh-font);font-size:0.75rem;font-style:normal;font-weight:normal}.sszvis-ruler__label{fill:#545454}.sszvis-ruler__label-outline{stroke:#ffffff;stroke-width:3}.sszvis-rangeFlag__mark{fill:#efefef;stroke:#7c7c7c;stroke-width:1.5}.sszvis-rangeRuler__rule{opacity:0.25;shape-rendering:crispEdges;stroke:#000000}.sszvis-rangeRuler__p1,.sszvis-rangeRuler__p2{fill:#000000;opacity:0.25}.sszvis-rangeRuler__label,.sszvis-rangeRuler__total{stroke:none;font-size:0.625rem;fill:#737373;color:#737373;font-family:\"Helvetica Neue\", Helvetica, Arial, sans-serif;font-family:var(--stzh-font);font-style:normal}.sszvis-rangeRuler__label-contour,.sszvis-rangeRuler__total-contour{font-size:0.625rem;fill:#737373;color:#737373;font-family:\"Helvetica Neue\", Helvetica, Arial, sans-serif;font-family:var(--stzh-font);font-style:normal;stroke:#ffffff;stroke-width:3;stroke-opacity:0.8}.sszvis-tooltip{min-width:3.75rem;position:absolute}.sszvis-tooltip__background{position:absolute}.sszvis-tooltip__background path{fill:rgba(255, 255, 255, 0.9)}.sszvis-tooltip__background.sszvis-tooltip__background--fallback path{stroke:#ddd;stroke-width:1}.sszvis-tooltip__content{font-family:Arial;padding:0.625rem 0.625rem 0.4375rem 0.625rem;position:relative;white-space:nowrap;z-index:1}.sszvis-tooltip__content strong{font-weight:bold}.sszvis-tooltip__content em{font-weight:bold}.sszvis-tooltip__header{color:#545454;font-size:0.75rem;line-height:1.3333;vertical-align:middle}.sszvis-tooltip__body{color:#7c7c7c;font-size:0.6875rem;line-height:1.4545;vertical-align:middle}.sszvis-tooltip--small .sszvis-tooltip__content{padding:0.375rem 0.625rem 0.25rem 0.625rem;text-align:center}.sszvis-tooltip__body__table,.sszvis-tooltip__body__table td{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:top}.sszvis-tooltip__body__table{border:none !important;border-collapse:collapse;border-spacing:0;min-width:7.5rem;margin-top:0.375rem;width:100%}.sszvis-tooltip__body__table tr{border-top:0.0625rem solid #e5e6e7}.sszvis-tooltip__body__table td{border:none !important;padding:0.4375rem 0.5em 0.4375rem 0 !important;text-align:left;vertical-align:top}.sszvis-tooltip__body__table tr:last-child td{padding-bottom:0.1875rem}.sszvis-tooltip__body__table td:last-child{color:#545454;font-weight:bold;padding-right:0;text-align:right}.sszvis-tooltipAnchor{pointer-events:none;user-select:none;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none}.sszvis-referenceline{stroke-width:1.5;stroke:#aaa;stroke-dasharray:3 3}.sszvis-referenceline__caption{fill:#7c7c7c;font-family:\"Helvetica Neue\", Helvetica, Arial, sans-serif;font-family:var(--stzh-font);font-size:0.6875rem;text-anchor:middle;-webkit-backface-visibility:hidden}.sszvis-dataareacircle__caption{fill:#7c7c7c;font-family:\"Helvetica Neue\", Helvetica, Arial, sans-serif;font-family:var(--stzh-font);font-size:0.6875rem;text-anchor:middle}.sszvis-dataarearectangle__caption{fill:#7c7c7c;font-family:\"Helvetica Neue\", Helvetica, Arial, sans-serif;font-family:var(--stzh-font);font-size:0.6875rem;text-anchor:middle}.sszvis-legend__label{fill:#767676;font-family:\"Helvetica Neue\", Helvetica, Arial, sans-serif;font-family:var(--stzh-font);font-size:0.75rem;font-style:normal;font-weight:normal;text-anchor:start}.sszvis-legend__label--small{fill:#767676;font-size:0.625rem}.sszvis-legend__axislabel{fill:#767676;font-family:\"Helvetica Neue\", Helvetica, Arial, sans-serif;font-family:var(--stzh-font);font-size:0.625rem;font-style:normal;font-weight:normal}.sszvis-legend__crispmark{shape-rendering:crispEdges}.sszvis-legend__greyline{fill:none;stroke:#b8b8b8;stroke-width:1.1}.sszvis-legend__dashedline{stroke:#cccccc;stroke-dasharray:2 3;stroke-width:1}stzh-chart{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}stzh-chart[hidden]{display:none}stzh-chart *,stzh-chart *::before,stzh-chart *::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}";
 
 const StzhChart$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/stzh-checkbox.js

@@ -1,4 +1,4 @@
-import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { h as hasSlot } from './utils.js';
 import { f as fetchTranslations } from './translation-utils.js';
 import { S as StzhInputDescription } from './stzh-input-description.js';
@@ -10,7 +10,7 @@ const Check = `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns
 </svg>
 `;
 
-const stzhCheckboxCss = ".sc-stzh-checkbox-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-checkbox-h{display:none}.sc-stzh-checkbox-h *.sc-stzh-checkbox,.sc-stzh-checkbox-h *.sc-stzh-checkbox::before,.sc-stzh-checkbox-h *.sc-stzh-checkbox::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-stzh-checkbox-h{display:inline-block;border-radius:var(--stzh-form-input-border-radius)}.sc-stzh-checkbox-h .sc-stzh-checkbox-s>stzh-text{--color:inherit}.stzh-checkbox__marker-symbol.sc-stzh-checkbox{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal}.stzh-checkbox__marker-text.sc-stzh-checkbox{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-checkbox__description-wrapper.sc-stzh-checkbox{display:-ms-flexbox;display:flex;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.stzh-checkbox__error.sc-stzh-checkbox,.stzh-checkbox__description.sc-stzh-checkbox{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);color:var(--stzh-base-color)}.stzh-checkbox__error.sc-stzh-checkbox{color:var(--stzh-color-error)}.stzh-checkbox__error-list.sc-stzh-checkbox{list-style:none;margin:0;padding:0}.stzh-checkbox__description.sc-stzh-checkbox{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start}.stzh-checkbox__description-long.sc-stzh-checkbox{margin-left:var(--stzh-space-xxsmall);margin-top:0.1875rem}.stzh-checkbox__description-long-popover.sc-stzh-checkbox{--width:auto;--max-width:27.3125rem}.stzh-checkbox__description-long-popover[open].sc-stzh-checkbox:not([open=false]) .stzh-checkbox__description-long-button.sc-stzh-checkbox{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-checkbox__description-long-button.sc-stzh-checkbox{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;padding:0;border:none;background-color:transparent;border-radius:0.5rem;cursor:pointer;-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed);color:var(--stzh-base-lead-color)}.stzh-checkbox__description-long-button.sc-stzh-checkbox:hover{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-checkbox.sc-stzh-checkbox stzh-icon.stzh-checkbox__description-long-icon.sc-stzh-checkbox{--size:var(--stzh-icon-size-xsmall)}.stzh-checkbox--has-error.sc-stzh-checkbox .stzh-checkbox__error.sc-stzh-checkbox,.stzh-checkbox--has-description.sc-stzh-checkbox .stzh-checkbox__description.sc-stzh-checkbox{margin-top:var(--stzh-space-xxsmall)}.stzh-checkbox__field-wrapper.sc-stzh-checkbox{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);position:relative;display:-ms-flexbox;display:flex;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}.stzh-checkbox__input.sc-stzh-checkbox{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;z-index:-1;opacity:0;pointer-events:none}.stzh-checkbox__mark.sc-stzh-checkbox{border:0.0625rem solid var(--stzh-color-grey61);background-color:var(--stzh-color-white);width:1.5rem;height:1.5rem;-ms-flex-negative:0;flex-shrink:0;border-radius:var(--stzh-form-input-border-radius);display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;-webkit-transition:border-color var(--stzh-base-transition-animation-speed);transition:border-color var(--stzh-base-transition-animation-speed)}.stzh-checkbox__check.sc-stzh-checkbox{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;opacity:0;color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-checkbox__label.sc-stzh-checkbox{display:inline-block;color:var(--stzh-base-color);-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed);margin-left:var(--stzh-space-small);line-height:1.5rem}.stzh-checkbox__label.sc-stzh-checkbox:empty{display:none}.stzh-checkbox__marker-symbol.sc-stzh-checkbox{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height)}.stzh-checkbox.sc-stzh-checkbox:hover .stzh-checkbox__label.sc-stzh-checkbox,.stzh-checkbox__input.sc-stzh-checkbox:checked:hover~.stzh-checkbox__label.sc-stzh-checkbox,.stzh-checkbox__input.sc-stzh-checkbox:checked:hover~.stzh-checkbox__mark.sc-stzh-checkbox .stzh-checkbox__check.sc-stzh-checkbox,.stzh-checkbox__input.sc-stzh-checkbox:checked:focus~.stzh-checkbox__mark.sc-stzh-checkbox .stzh-checkbox__check.sc-stzh-checkbox{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-checkbox__input.sc-stzh-checkbox:checked~.stzh-checkbox__label.sc-stzh-checkbox{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-checkbox.sc-stzh-checkbox:hover .stzh-checkbox__mark.sc-stzh-checkbox,.stzh-checkbox__input.sc-stzh-checkbox:focus:hover~.stzh-checkbox__mark.sc-stzh-checkbox,.stzh-checkbox__input.sc-stzh-checkbox:checked:hover~.stzh-checkbox__mark.sc-stzh-checkbox,.stzh-checkbox__input.sc-stzh-checkbox:checked:focus~.stzh-checkbox__mark.sc-stzh-checkbox{border-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-checkbox__input.sc-stzh-checkbox:focus~.stzh-checkbox__mark.sc-stzh-checkbox,.stzh-checkbox__input.sc-stzh-checkbox:checked~.stzh-checkbox__mark.sc-stzh-checkbox{border-color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-checkbox__input.sc-stzh-checkbox:checked~.stzh-checkbox__mark.sc-stzh-checkbox .stzh-checkbox__check.sc-stzh-checkbox{opacity:1}.stzh-checkbox--is-invalid.sc-stzh-checkbox .stzh-checkbox__input.sc-stzh-checkbox~.stzh-checkbox__label.sc-stzh-checkbox,.stzh-checkbox--is-invalid.sc-stzh-checkbox .stzh-checkbox__input.sc-stzh-checkbox~.stzh-checkbox__mark.sc-stzh-checkbox .stzh-checkbox__check.sc-stzh-checkbox{color:var(--stzh-color-error)}.stzh-checkbox--is-invalid.sc-stzh-checkbox .stzh-checkbox__input.sc-stzh-checkbox~.stzh-checkbox__mark.sc-stzh-checkbox{border-color:var(--stzh-color-error)}.stzh-checkbox--is-disabled.sc-stzh-checkbox .stzh-checkbox__field-wrapper.sc-stzh-checkbox{cursor:not-allowed}.stzh-checkbox--is-disabled.sc-stzh-checkbox .stzh-checkbox__input.sc-stzh-checkbox~.stzh-checkbox__label.sc-stzh-checkbox{color:var(--stzh-color-grey61)}.stzh-checkbox--is-disabled.sc-stzh-checkbox .stzh-checkbox__input.sc-stzh-checkbox~.stzh-checkbox__mark.sc-stzh-checkbox .stzh-checkbox__check.sc-stzh-checkbox{color:var(--stzh-color-grey70)}.stzh-checkbox--is-disabled.sc-stzh-checkbox .stzh-checkbox__input.sc-stzh-checkbox~.stzh-checkbox__mark.sc-stzh-checkbox{border-color:transparent}.stzh-checkbox--is-disabled.sc-stzh-checkbox .stzh-checkbox__mark.sc-stzh-checkbox{background-color:var(--stzh-color-black8)}";
+const stzhCheckboxCss = ".sc-stzh-checkbox-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-checkbox-h{display:none}.sc-stzh-checkbox-h *.sc-stzh-checkbox,.sc-stzh-checkbox-h *.sc-stzh-checkbox::before,.sc-stzh-checkbox-h *.sc-stzh-checkbox::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}.sc-stzh-checkbox-h{display:inline-block}.sc-stzh-checkbox-h .sc-stzh-checkbox-s>stzh-text{--color:inherit}.stzh-checkbox__marker-symbol.sc-stzh-checkbox{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal}.stzh-checkbox__marker-text.sc-stzh-checkbox{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-checkbox__description-wrapper.sc-stzh-checkbox{display:-ms-flexbox;display:flex;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.stzh-checkbox__error.sc-stzh-checkbox,.stzh-checkbox__description.sc-stzh-checkbox{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);color:var(--stzh-base-color)}.stzh-checkbox__error.sc-stzh-checkbox{color:var(--stzh-color-error)}.stzh-checkbox__error-list.sc-stzh-checkbox{list-style:none;margin:0;padding:0}.stzh-checkbox__description.sc-stzh-checkbox{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start}.stzh-checkbox__description-long.sc-stzh-checkbox{margin-left:var(--stzh-space-xxsmall);margin-top:0.1875rem}.stzh-checkbox__description-long-popover.sc-stzh-checkbox{--width:auto;--max-width:27.3125rem}.stzh-checkbox__description-long-popover[open].sc-stzh-checkbox:not([open=false]) .stzh-checkbox__description-long-button.sc-stzh-checkbox{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-checkbox__description-long-button.sc-stzh-checkbox{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;padding:0;border:none;background-color:transparent;border-radius:0.5rem;cursor:pointer;-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed);color:var(--stzh-base-lead-color)}.stzh-checkbox__description-long-button.sc-stzh-checkbox:hover{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-checkbox.sc-stzh-checkbox stzh-icon.stzh-checkbox__description-long-icon.sc-stzh-checkbox{--size:var(--stzh-icon-size-xsmall)}.stzh-checkbox--has-error.sc-stzh-checkbox .stzh-checkbox__error.sc-stzh-checkbox,.stzh-checkbox--has-description.sc-stzh-checkbox .stzh-checkbox__description.sc-stzh-checkbox{margin-top:var(--stzh-space-xxsmall)}.stzh-checkbox__field-wrapper.sc-stzh-checkbox{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);position:relative;display:-ms-flexbox;display:flex;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}.stzh-checkbox__input.sc-stzh-checkbox{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;z-index:-1;opacity:0;pointer-events:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:var(--stzh-form-input-border-radius)}.stzh-checkbox__mark.sc-stzh-checkbox{border:0.0625rem solid var(--stzh-color-grey61);background-color:var(--stzh-color-white);width:1.5rem;height:1.5rem;-ms-flex-negative:0;flex-shrink:0;border-radius:var(--stzh-form-input-border-radius);display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;-webkit-transition:border-color var(--stzh-base-transition-animation-speed);transition:border-color var(--stzh-base-transition-animation-speed)}.stzh-checkbox__check.sc-stzh-checkbox{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;opacity:0;color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-checkbox__label.sc-stzh-checkbox{display:inline-block;color:var(--stzh-base-color);-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed);margin-left:var(--stzh-space-small);line-height:1.5rem}.stzh-checkbox__label.sc-stzh-checkbox:empty{display:none}.stzh-checkbox__marker-symbol.sc-stzh-checkbox{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height)}.stzh-checkbox.sc-stzh-checkbox:hover .stzh-checkbox__label.sc-stzh-checkbox,.stzh-checkbox__input.sc-stzh-checkbox:checked:hover~.stzh-checkbox__label.sc-stzh-checkbox,.stzh-checkbox__input.sc-stzh-checkbox:checked:hover~.stzh-checkbox__mark.sc-stzh-checkbox .stzh-checkbox__check.sc-stzh-checkbox,.stzh-checkbox__input.sc-stzh-checkbox:checked:focus~.stzh-checkbox__mark.sc-stzh-checkbox .stzh-checkbox__check.sc-stzh-checkbox{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-checkbox__input.sc-stzh-checkbox:checked~.stzh-checkbox__label.sc-stzh-checkbox{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-checkbox.sc-stzh-checkbox:hover .stzh-checkbox__mark.sc-stzh-checkbox,.stzh-checkbox__input.sc-stzh-checkbox:focus:hover~.stzh-checkbox__mark.sc-stzh-checkbox,.stzh-checkbox__input.sc-stzh-checkbox:checked:hover~.stzh-checkbox__mark.sc-stzh-checkbox,.stzh-checkbox__input.sc-stzh-checkbox:checked:focus~.stzh-checkbox__mark.sc-stzh-checkbox{border-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-checkbox__input.sc-stzh-checkbox:focus~.stzh-checkbox__mark.sc-stzh-checkbox,.stzh-checkbox__input.sc-stzh-checkbox:checked~.stzh-checkbox__mark.sc-stzh-checkbox{border-color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-checkbox__input.sc-stzh-checkbox:checked~.stzh-checkbox__mark.sc-stzh-checkbox .stzh-checkbox__check.sc-stzh-checkbox{opacity:1}.stzh-checkbox--is-invalid.sc-stzh-checkbox .stzh-checkbox__input.sc-stzh-checkbox~.stzh-checkbox__label.sc-stzh-checkbox,.stzh-checkbox--is-invalid.sc-stzh-checkbox .stzh-checkbox__input.sc-stzh-checkbox~.stzh-checkbox__mark.sc-stzh-checkbox .stzh-checkbox__check.sc-stzh-checkbox{color:var(--stzh-color-error)}.stzh-checkbox--is-invalid.sc-stzh-checkbox .stzh-checkbox__input.sc-stzh-checkbox~.stzh-checkbox__mark.sc-stzh-checkbox{border-color:var(--stzh-color-error)}.stzh-checkbox--is-disabled.sc-stzh-checkbox .stzh-checkbox__field-wrapper.sc-stzh-checkbox{cursor:not-allowed}.stzh-checkbox--is-disabled.sc-stzh-checkbox .stzh-checkbox__input.sc-stzh-checkbox~.stzh-checkbox__label.sc-stzh-checkbox{color:var(--stzh-color-grey61)}.stzh-checkbox--is-disabled.sc-stzh-checkbox .stzh-checkbox__input.sc-stzh-checkbox~.stzh-checkbox__mark.sc-stzh-checkbox .stzh-checkbox__check.sc-stzh-checkbox{color:var(--stzh-color-grey70)}.stzh-checkbox--is-disabled.sc-stzh-checkbox .stzh-checkbox__input.sc-stzh-checkbox~.stzh-checkbox__mark.sc-stzh-checkbox{border-color:transparent}.stzh-checkbox--is-disabled.sc-stzh-checkbox .stzh-checkbox__mark.sc-stzh-checkbox{background-color:var(--stzh-color-black8)}";
 
 let checkboxCounter = 0;
 const StzhCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
@@ -20,6 +20,7 @@ const StzhCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     this.stzhChange = createEvent(this, "stzhChange", 7);
     this.stzhFocus = createEvent(this, "stzhFocus", 7);
     this.stzhBlur = createEvent(this, "stzhBlur", 7);
+    this.focusedByInput = false;
     this.onInput = (event) => {
       this.checked = this.input.checked;
       this.stzhChange.emit({
@@ -29,7 +30,14 @@ const StzhCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
         checked: this.checked
       });
     };
+    this.onRootFocus = () => {
+      if (!this.focusedByInput) {
+        this.setFocus();
+      }
+      this.focusedByInput = false;
+    };
     this.onFocus = (event) => {
+      this.focusedByInput = true;
       const focusEvent = new FocusEvent('focus', {
         view: window,
         bubbles: false,
@@ -113,12 +121,12 @@ const StzhCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
       "stzh-checkbox--is-invalid": this.invalid,
       "stzh-checkbox--is-disabled": this.disabled
     };
-    return (h("div", { class: classes }, h("label", { class: "stzh-checkbox__field-wrapper" }, h("input", { class: "stzh-checkbox__input", ref: (el) => (this.input = el), type: "checkbox", id: this.inputId, name: this.name, value: this.value, disabled: this.disabled, "aria-describedby": `${this.inputId}-description ${this.a11yDescribedby}`, "aria-required": this.required ? "true" : "false", "aria-invalid": this.invalid ? "true" : "false", checked: this.checked, onInput: this.onInput, onFocus: this.onFocus, onBlur: this.onBlur }), h("div", { class: "stzh-checkbox__mark" }, h("div", { class: "stzh-checkbox__check", innerHTML: Check })), h("div", { class: "stzh-checkbox__label" }, this.label ? this.label : h("slot", null), this.showMarker &&
+    return (h(Host, { tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, h("div", { class: classes }, h("label", { class: "stzh-checkbox__field-wrapper" }, h("input", { class: "stzh-checkbox__input", ref: (el) => (this.input = el), type: "checkbox", id: this.inputId, name: this.name, value: this.value, disabled: this.disabled, "aria-describedby": `${this.inputId}-description ${this.a11yDescribedby}`, "aria-required": this.required ? "true" : "false", "aria-invalid": this.invalid ? "true" : "false", checked: this.checked, onInput: this.onInput, onFocus: this.onFocus, onBlur: this.onBlur }), h("div", { class: "stzh-checkbox__mark" }, h("div", { class: "stzh-checkbox__check", innerHTML: Check })), h("div", { class: "stzh-checkbox__label" }, this.label ? this.label : h("slot", null), this.showMarker &&
       h("span", { class: "stzh-checkbox__marker" }, h("span", { class: "stzh-checkbox__marker-symbol", "aria-hidden": "true" }, this.required
         ? this.localization.$globals.requiredFieldMarker
         : this.localization.$globals.optionalFieldMarker), h("span", { class: "stzh-checkbox__marker-text" }, this.required
         ? this.localization.$globals.requiredFieldText
-        : this.localization.$globals.optionalFieldText)))), h(StzhInputDescription, { classPrefix: "stzh-checkbox", id: `${this.inputId}-description`, error: this._error, description: this.description, descriptionLong: this.descriptionLong, descriptionLongUsed: descriptionLongUsed, moreInfoButtonLabel: this.localization.$globals.moreInfoButtonLabel })));
+        : this.localization.$globals.optionalFieldText)))), h(StzhInputDescription, { classPrefix: "stzh-checkbox", id: `${this.inputId}-description`, error: this._error, description: this.description, descriptionLong: this.descriptionLong, descriptionLongUsed: descriptionLongUsed, moreInfoButtonLabel: this.localization.$globals.moreInfoButtonLabel }))));
   }
   get element() { return this; }
   static get watchers() { return {

package/dist/components/stzh-checkboxgroup.js

@@ -6,7 +6,7 @@ import { S as StzhInputDescription } from './stzh-input-description.js';
 import { d as defineCustomElement$3 } from './stzh-icon2.js';
 import { d as defineCustomElement$2 } from './stzh-popover2.js';
 
-const stzhCheckboxgroupCss = ".sc-stzh-checkboxgroup-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-checkboxgroup-h{display:none}.sc-stzh-checkboxgroup-h *.sc-stzh-checkboxgroup,.sc-stzh-checkboxgroup-h *.sc-stzh-checkboxgroup::before,.sc-stzh-checkboxgroup-h *.sc-stzh-checkboxgroup::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-stzh-checkboxgroup-h[direction=vertical] .sc-stzh-checkboxgroup-s>stzh-checkbox:not(:last-child){margin-bottom:var(--stzh-space-medium)}.sc-stzh-checkboxgroup-h[direction=horizontal] .sc-stzh-checkboxgroup-s>stzh-checkbox:not(:last-child){margin-right:var(--stzh-space-large)}.stzh-checkboxgroup.sc-stzh-checkboxgroup{margin:0;padding:0;border:none}.stzh-checkboxgroup__marker-symbol.sc-stzh-checkboxgroup{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal}.stzh-checkboxgroup__marker-text.sc-stzh-checkboxgroup{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-checkboxgroup__description-wrapper.sc-stzh-checkboxgroup{display:-ms-flexbox;display:flex;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.stzh-checkboxgroup__error.sc-stzh-checkboxgroup,.stzh-checkboxgroup__description.sc-stzh-checkboxgroup{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);color:var(--stzh-base-color)}.stzh-checkboxgroup__error.sc-stzh-checkboxgroup{color:var(--stzh-color-error)}.stzh-checkboxgroup__error-list.sc-stzh-checkboxgroup{list-style:none;margin:0;padding:0}.stzh-checkboxgroup__description.sc-stzh-checkboxgroup{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start}.stzh-checkboxgroup__description-long.sc-stzh-checkboxgroup{margin-left:var(--stzh-space-xxsmall);margin-top:0.1875rem}.stzh-checkboxgroup__description-long-popover.sc-stzh-checkboxgroup{--width:auto;--max-width:27.3125rem}.stzh-checkboxgroup__description-long-popover[open].sc-stzh-checkboxgroup:not([open=false]) .stzh-checkboxgroup__description-long-button.sc-stzh-checkboxgroup{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-checkboxgroup__description-long-button.sc-stzh-checkboxgroup{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;padding:0;border:none;background-color:transparent;border-radius:0.5rem;cursor:pointer;-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed);color:var(--stzh-base-lead-color)}.stzh-checkboxgroup__description-long-button.sc-stzh-checkboxgroup:hover{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-checkboxgroup.sc-stzh-checkboxgroup stzh-icon.stzh-checkboxgroup__description-long-icon.sc-stzh-checkboxgroup{--size:var(--stzh-icon-size-xsmall)}.stzh-checkboxgroup--has-error.sc-stzh-checkboxgroup .stzh-checkboxgroup__error.sc-stzh-checkboxgroup,.stzh-checkboxgroup--has-description.sc-stzh-checkboxgroup .stzh-checkboxgroup__description.sc-stzh-checkboxgroup{margin-top:var(--stzh-space-xxsmall)}.stzh-checkboxgroup__fields.sc-stzh-checkboxgroup{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start;-ms-flex-direction:column;flex-direction:column}.stzh-checkboxgroup__legend.sc-stzh-checkboxgroup{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:normal;font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height);padding:0;margin-bottom:var(--stzh-space-xsmall)}.stzh-checkboxgroup--hide-legend.sc-stzh-checkboxgroup .stzh-checkboxgroup__legend.sc-stzh-checkboxgroup{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-checkboxgroup--direction-horizontal.sc-stzh-checkboxgroup .stzh-checkboxgroup__fields.sc-stzh-checkboxgroup{-ms-flex-direction:row;flex-direction:row}";
+const stzhCheckboxgroupCss = ".sc-stzh-checkboxgroup-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-checkboxgroup-h{display:none}.sc-stzh-checkboxgroup-h *.sc-stzh-checkboxgroup,.sc-stzh-checkboxgroup-h *.sc-stzh-checkboxgroup::before,.sc-stzh-checkboxgroup-h *.sc-stzh-checkboxgroup::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}.sc-stzh-checkboxgroup-h[direction=vertical] .sc-stzh-checkboxgroup-s>stzh-checkbox:not(:last-child){margin-bottom:var(--stzh-space-medium)}.sc-stzh-checkboxgroup-h[direction=horizontal] .sc-stzh-checkboxgroup-s>stzh-checkbox:not(:last-child){margin-right:var(--stzh-space-large)}.stzh-checkboxgroup.sc-stzh-checkboxgroup{margin:0;padding:0;border:none}.stzh-checkboxgroup__marker-symbol.sc-stzh-checkboxgroup{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal}.stzh-checkboxgroup__marker-text.sc-stzh-checkboxgroup{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-checkboxgroup__description-wrapper.sc-stzh-checkboxgroup{display:-ms-flexbox;display:flex;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.stzh-checkboxgroup__error.sc-stzh-checkboxgroup,.stzh-checkboxgroup__description.sc-stzh-checkboxgroup{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);color:var(--stzh-base-color)}.stzh-checkboxgroup__error.sc-stzh-checkboxgroup{color:var(--stzh-color-error)}.stzh-checkboxgroup__error-list.sc-stzh-checkboxgroup{list-style:none;margin:0;padding:0}.stzh-checkboxgroup__description.sc-stzh-checkboxgroup{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start}.stzh-checkboxgroup__description-long.sc-stzh-checkboxgroup{margin-left:var(--stzh-space-xxsmall);margin-top:0.1875rem}.stzh-checkboxgroup__description-long-popover.sc-stzh-checkboxgroup{--width:auto;--max-width:27.3125rem}.stzh-checkboxgroup__description-long-popover[open].sc-stzh-checkboxgroup:not([open=false]) .stzh-checkboxgroup__description-long-button.sc-stzh-checkboxgroup{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-checkboxgroup__description-long-button.sc-stzh-checkboxgroup{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;padding:0;border:none;background-color:transparent;border-radius:0.5rem;cursor:pointer;-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed);color:var(--stzh-base-lead-color)}.stzh-checkboxgroup__description-long-button.sc-stzh-checkboxgroup:hover{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-checkboxgroup.sc-stzh-checkboxgroup stzh-icon.stzh-checkboxgroup__description-long-icon.sc-stzh-checkboxgroup{--size:var(--stzh-icon-size-xsmall)}.stzh-checkboxgroup--has-error.sc-stzh-checkboxgroup .stzh-checkboxgroup__error.sc-stzh-checkboxgroup,.stzh-checkboxgroup--has-description.sc-stzh-checkboxgroup .stzh-checkboxgroup__description.sc-stzh-checkboxgroup{margin-top:var(--stzh-space-xxsmall)}.stzh-checkboxgroup__fields.sc-stzh-checkboxgroup{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start;-ms-flex-direction:column;flex-direction:column}.stzh-checkboxgroup__legend.sc-stzh-checkboxgroup{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:normal;font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height);padding:0;margin-bottom:var(--stzh-space-xsmall)}.stzh-checkboxgroup--hide-legend.sc-stzh-checkboxgroup .stzh-checkboxgroup__legend.sc-stzh-checkboxgroup{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-checkboxgroup--direction-horizontal.sc-stzh-checkboxgroup .stzh-checkboxgroup__fields.sc-stzh-checkboxgroup{-ms-flex-direction:row;flex-direction:row}";
 
 let checkboxgroupCounter = 0;
 const StzhCheckboxgroup$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
@@ -139,7 +139,9 @@ const StzhCheckboxgroup$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLE
     });
   }
   disconnectedCallback() {
-    this.observer.disconnect();
+    if (this.observer) {
+      this.observer.disconnect();
+    }
   }
   render() {
     const descriptionUsed = hasSlot(this.element, 'description') || !!this.description;

package/dist/components/stzh-chip-select2.js

@@ -1,13 +1,15 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { S as StzhInputDescription } from './stzh-input-description.js';
 import { f as fetchTranslations } from './translation-utils.js';
-import { d as defineCustomElement$5 } from './stzh-chip2.js';
-import { d as defineCustomElement$4 } from './stzh-clamp2.js';
-import { d as defineCustomElement$3 } from './stzh-dropdown2.js';
-import { d as defineCustomElement$2 } from './stzh-icon2.js';
+import { d as defineCustomElement$7 } from './stzh-badge2.js';
+import { d as defineCustomElement$6 } from './stzh-chip2.js';
+import { d as defineCustomElement$5 } from './stzh-clamp2.js';
+import { d as defineCustomElement$4 } from './stzh-dropdown2.js';
+import { d as defineCustomElement$3 } from './stzh-icon2.js';
+import { d as defineCustomElement$2 } from './stzh-link2.js';
 import { d as defineCustomElement$1 } from './stzh-popover2.js';
 
-const stzhChipSelectCss = ".sc-stzh-chip-select-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-chip-select-h{display:none}.sc-stzh-chip-select-h *.sc-stzh-chip-select,.sc-stzh-chip-select-h *.sc-stzh-chip-select::before,.sc-stzh-chip-select-h *.sc-stzh-chip-select::after{-webkit-box-sizing:border-box;box-sizing:border-box}.stzh-chip-select__marker-symbol.sc-stzh-chip-select{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal}.stzh-chip-select__marker-text.sc-stzh-chip-select{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-chip-select__description-wrapper.sc-stzh-chip-select{display:-ms-flexbox;display:flex;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.stzh-chip-select__error.sc-stzh-chip-select,.stzh-chip-select__description.sc-stzh-chip-select{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);color:var(--stzh-base-color)}.stzh-chip-select__error.sc-stzh-chip-select{color:var(--stzh-color-error)}.stzh-chip-select__error-list.sc-stzh-chip-select{list-style:none;margin:0;padding:0}.stzh-chip-select__description.sc-stzh-chip-select{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start}.stzh-chip-select__description-long.sc-stzh-chip-select{margin-left:var(--stzh-space-xxsmall);margin-top:0.1875rem}.stzh-chip-select__description-long-popover.sc-stzh-chip-select{--width:auto;--max-width:27.3125rem}.stzh-chip-select__description-long-popover[open].sc-stzh-chip-select:not([open=false]) .stzh-chip-select__description-long-button.sc-stzh-chip-select{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-chip-select__description-long-button.sc-stzh-chip-select{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;padding:0;border:none;background-color:transparent;border-radius:0.5rem;cursor:pointer;-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed);color:var(--stzh-base-lead-color)}.stzh-chip-select__description-long-button.sc-stzh-chip-select:hover{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-chip-select.sc-stzh-chip-select stzh-icon.stzh-chip-select__description-long-icon.sc-stzh-chip-select{--size:var(--stzh-icon-size-xsmall)}.stzh-chip-select--has-error.sc-stzh-chip-select .stzh-chip-select__error.sc-stzh-chip-select,.stzh-chip-select--has-description.sc-stzh-chip-select .stzh-chip-select__description.sc-stzh-chip-select{margin-top:var(--stzh-space-xxsmall)}.stzh-chip-select__chips.sc-stzh-chip-select{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:calc(var(--stzh-space-small) / -2) calc(var(--stzh-space-xsmall) / -2);border-radius:var(--stzh-button-border-radius)}@media screen and (max-width: 1023px){.stzh-chip-select__chips.sc-stzh-chip-select{display:none}}.stzh-chip-select__chip.sc-stzh-chip-select{margin:calc(var(--stzh-space-small) / 2) calc(var(--stzh-space-xsmall) / 2)}.stzh-chip-select__chip.is-focused.sc-stzh-chip-select,.stzh-chip-select__chip.is-focused[active].sc-stzh-chip-select:not([active=false]){--border:0.0625rem solid var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-chip-select__chip.is-focused[active].sc-stzh-chip-select:not([active=false]){--background-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}@media screen and (min-width: 1024px){.stzh-chip-select__dropdown.sc-stzh-chip-select{display:none}}@media screen and (max-width: 1023px){.stzh-chip-select__description-wrapper.sc-stzh-chip-select{display:none}}.stzh-chip-select--has-error.sc-stzh-chip-select .stzh-chip-select__error.sc-stzh-chip-select,.stzh-chip-select--has-description.sc-stzh-chip-select .stzh-chip-select__description.sc-stzh-chip-select{margin-top:var(--stzh-space-xsmall)}";
+const stzhChipSelectCss = ".sc-stzh-chip-select-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-chip-select-h{display:none}.sc-stzh-chip-select-h *.sc-stzh-chip-select,.sc-stzh-chip-select-h *.sc-stzh-chip-select::before,.sc-stzh-chip-select-h *.sc-stzh-chip-select::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}.stzh-chip-select__marker-symbol.sc-stzh-chip-select{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal}.stzh-chip-select__marker-text.sc-stzh-chip-select{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-chip-select__description-wrapper.sc-stzh-chip-select{display:-ms-flexbox;display:flex;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.stzh-chip-select__error.sc-stzh-chip-select,.stzh-chip-select__description.sc-stzh-chip-select{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);color:var(--stzh-base-color)}.stzh-chip-select__error.sc-stzh-chip-select{color:var(--stzh-color-error)}.stzh-chip-select__error-list.sc-stzh-chip-select{list-style:none;margin:0;padding:0}.stzh-chip-select__description.sc-stzh-chip-select{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start}.stzh-chip-select__description-long.sc-stzh-chip-select{margin-left:var(--stzh-space-xxsmall);margin-top:0.1875rem}.stzh-chip-select__description-long-popover.sc-stzh-chip-select{--width:auto;--max-width:27.3125rem}.stzh-chip-select__description-long-popover[open].sc-stzh-chip-select:not([open=false]) .stzh-chip-select__description-long-button.sc-stzh-chip-select{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-chip-select__description-long-button.sc-stzh-chip-select{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;padding:0;border:none;background-color:transparent;border-radius:0.5rem;cursor:pointer;-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed);color:var(--stzh-base-lead-color)}.stzh-chip-select__description-long-button.sc-stzh-chip-select:hover{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-chip-select.sc-stzh-chip-select stzh-icon.stzh-chip-select__description-long-icon.sc-stzh-chip-select{--size:var(--stzh-icon-size-xsmall)}.stzh-chip-select--has-error.sc-stzh-chip-select .stzh-chip-select__error.sc-stzh-chip-select,.stzh-chip-select--has-description.sc-stzh-chip-select .stzh-chip-select__description.sc-stzh-chip-select{margin-top:var(--stzh-space-xxsmall)}.stzh-chip-select__chips.sc-stzh-chip-select{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:calc(var(--stzh-space-small) / -2) calc(var(--stzh-space-xsmall) / -2);border-radius:var(--stzh-button-border-radius)}@media screen and (max-width: 1023px){.stzh-chip-select__chips.sc-stzh-chip-select{display:none}}.stzh-chip-select__chip.sc-stzh-chip-select{margin:calc(var(--stzh-space-small) / 2) calc(var(--stzh-space-xsmall) / 2)}.stzh-chip-select__chip.is-focused.sc-stzh-chip-select,.stzh-chip-select__chip.is-focused[active].sc-stzh-chip-select:not([active=false]){--border-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-chip-select__chip.is-focused[active].sc-stzh-chip-select:not([active=false]){--background-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}@media screen and (min-width: 1024px){.stzh-chip-select__dropdown.sc-stzh-chip-select{display:none}}@media screen and (max-width: 1023px){.stzh-chip-select__description-wrapper.sc-stzh-chip-select{display:none}}.stzh-chip-select--has-error.sc-stzh-chip-select .stzh-chip-select__error.sc-stzh-chip-select,.stzh-chip-select--has-description.sc-stzh-chip-select .stzh-chip-select__description.sc-stzh-chip-select{margin-top:var(--stzh-space-xsmall)}";
 
 let chipSelectCounter = 0;
 const StzhChipSelect = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
@@ -17,8 +19,9 @@ const StzhChipSelect = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     this.stzhChange = createEvent(this, "stzhChange", 7);
     this._data = [];
     this._dataDropdown = [];
-    this.handleChipClick = (data) => {
+    this.handleChipClick = (data, index) => {
       this.value = data.value;
+      this.activeFocusOptionIndex = index;
       this.stzhChange.emit({
         component: "stzh-chip-select",
         value: this.value
@@ -26,6 +29,9 @@ const StzhChipSelect = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     };
     this.handleDropdownChange = (event) => {
       this.value = event.detail.value;
+      this.activeFocusOptionIndex = this._data.findIndex(data => {
+        return data.value === this.value;
+      });
       this.stzhChange.emit({
         component: "stzh-chip-select",
         value: this.value
@@ -33,23 +39,21 @@ const StzhChipSelect = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     };
     this.handleKeydown = (event) => {
       let newActiveIndex = null;
+      const activeOptionIndex = this.activeFocusOptionIndex;
       if (event.key === "ArrowUp" || event.key === "ArrowLeft") {
         event.preventDefault();
-        const activeOptionIndex = this.activeFocusOptionIndex;
         if (activeOptionIndex > 0) {
           newActiveIndex = activeOptionIndex - 1;
         }
       }
       else if (event.key === "ArrowDown" || event.key === "ArrowRight") {
         event.preventDefault();
-        const activeOptionIndex = this.activeFocusOptionIndex;
         if (activeOptionIndex < this._data.length - 1) {
           newActiveIndex = activeOptionIndex + 1;
         }
       }
       else if (event.key === " " || event.key === "Enter") {
         event.preventDefault();
-        const activeOptionIndex = this.activeFocusOptionIndex;
         this.value = this._data[activeOptionIndex].value;
         this.stzhChange.emit({
           component: "stzh-chip-select",
@@ -131,10 +135,10 @@ const StzhChipSelect = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
       "stzh-chip-select--is-disabled": this.disabled,
       "stzh-chip-select--is-required": this.required
     };
-    return (h(Host, null, h("div", { class: classes }, h("input", { type: "hidden", name: this.name, value: this.value }), h("div", { class: "stzh-chip-select__chips", role: "listbox", tabindex: "0", "aria-multiselectable": "false", "aria-activedescendant": `${this.id}-option-${this.activeFocusOptionIndex}`, "aria-describedby": `${this.id}-description ${this.a11yDescribedby}`, onKeyDown: this.handleKeydown }, this._data.map((data, i) => (h("stzh-chip", { role: "option", class: {
+    return (h(Host, null, h("div", { class: classes }, h("input", { type: "hidden", name: this.name, value: this.value }), h("div", { class: "stzh-chip-select__chips", role: "listbox", tabindex: "0", "aria-multiselectable": "false", "aria-activedescendant": `${this.id}-option-${this.activeFocusOptionIndex}`, "aria-describedby": `${this.id}-description ${this.a11yDescribedby}`, onKeyDown: this.handleKeydown }, this._data.map((data, index) => (h("stzh-chip", { role: "option", class: {
         "stzh-chip-select__chip": true,
-        "is-focused": this.activeFocusOptionIndex === i
-      }, label: data.label, counter: data.counter, icon: data.icon, type: data.type, variant: data.variant, size: data.size, disabled: this.disabled || data.disabled, active: this.value === data.value, "aria-selected": this.value === data.value ? "true" : "false", id: `${this.id}-option-${i}`, a11yTabindex: "-1", onClick: () => this.handleChipClick(data) })))), h(StzhInputDescription, { classPrefix: "stzh-chip-select", id: `${this.id}-description`, error: this._error, description: this.description, descriptionLong: this.descriptionLong, descriptionLongUsed: descriptionLongUsed, moreInfoButtonLabel: this.localization.$globals.moreInfoButtonLabel }), h("stzh-dropdown", { class: "stzh-chip-select__dropdown", disabled: this.disabled, error: this._error, description: this.description, descriptionLong: this.descriptionLong, required: this.required, invalid: this.invalid, items: [this.value], label: this.label, options: this._dataDropdown, onStzhChange: this.handleDropdownChange }))));
+        "is-focused": this.activeFocusOptionIndex === index
+      }, label: data.label, counter: data.counter, icon: data.icon, type: data.type, variant: data.variant, size: data.size, disabled: this.disabled || data.disabled, active: this.value === data.value, "aria-selected": this.value === data.value ? "true" : "false", id: `${this.id}-option-${index}`, a11yTabindex: "-1", onClick: () => this.handleChipClick(data, index) })))), h(StzhInputDescription, { classPrefix: "stzh-chip-select", id: `${this.id}-description`, error: this._error, description: this.description, descriptionLong: this.descriptionLong, descriptionLongUsed: descriptionLongUsed, moreInfoButtonLabel: this.localization.$globals.moreInfoButtonLabel }), h("stzh-dropdown", { class: "stzh-chip-select__dropdown", disabled: this.disabled, error: this._error, description: this.description, descriptionLong: this.descriptionLong, required: this.required, invalid: this.invalid, items: [this.value], label: this.label, options: this._dataDropdown, onStzhChange: this.handleDropdownChange }))));
   }
   get element() { return this; }
   static get watchers() { return {
@@ -161,29 +165,39 @@ function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["stzh-chip-select", "stzh-chip", "stzh-clamp", "stzh-dropdown", "stzh-icon", "stzh-popover"];
+  const components = ["stzh-chip-select", "stzh-badge", "stzh-chip", "stzh-clamp", "stzh-dropdown", "stzh-icon", "stzh-link", "stzh-popover"];
   components.forEach(tagName => { switch (tagName) {
     case "stzh-chip-select":
       if (!customElements.get(tagName)) {
         customElements.define(tagName, StzhChipSelect);
       }
       break;
+    case "stzh-badge":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$7();
+      }
+      break;
     case "stzh-chip":
       if (!customElements.get(tagName)) {
-        defineCustomElement$5();
+        defineCustomElement$6();
       }
       break;
     case "stzh-clamp":
       if (!customElements.get(tagName)) {
-        defineCustomElement$4();
+        defineCustomElement$5();
       }
       break;
     case "stzh-dropdown":
       if (!customElements.get(tagName)) {
-        defineCustomElement$3();
+        defineCustomElement$4();
       }
       break;
     case "stzh-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "stzh-link":
       if (!customElements.get(tagName)) {
         defineCustomElement$2();
       }

package/dist/components/stzh-chip2.js

@@ -1,8 +1,10 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Fragment, Host } from '@stencil/core/internal/client';
-import { d as defineCustomElement$2 } from './stzh-clamp2.js';
-import { d as defineCustomElement$1 } from './stzh-icon2.js';
+import { d as defineCustomElement$4 } from './stzh-badge2.js';
+import { d as defineCustomElement$3 } from './stzh-clamp2.js';
+import { d as defineCustomElement$2 } from './stzh-icon2.js';
+import { d as defineCustomElement$1 } from './stzh-link2.js';
 
-const stzhChipCss = ".sc-stzh-chip-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-chip-h{display:none}.sc-stzh-chip-h *.sc-stzh-chip,.sc-stzh-chip-h *.sc-stzh-chip::before,.sc-stzh-chip-h *.sc-stzh-chip::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-stzh-chip-h{--color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--height:2rem;--padding:0 var(--stzh-space-medium);--border:0.0625rem solid var(--stzh-color-grey13);--border-radius:1rem;--remove-color:var(--stzh-base-lead-color);--remove-border-radius:1.5rem;--background-color:var(--stzh-color-white);--icon-size:var(--stzh-icon-size-small);--icon-color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--counter-color:var(--stzh-color-primary60op);--hover-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-border:var(--border);--hover-background-color:var(--stzh-color-primary8);--hover-remove-color:var(--hover-color);--hover-remove-background-color:var(--hover-background-color);--hover-icon-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-counter-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));display:-ms-inline-flexbox;display:inline-flex;border-radius:var(--border-radius)}@media (forced-colors: active), (-ms-high-contrast: active){.sc-stzh-chip-h{--hover-color:Highlight;--hover-border:0.0625rem solid Highlight;--hover-background-color:Canvas;--hover-remove-color:Highlight;--hover-remove-background-color:Canvas;--hover-icon-color:Highlight;--hover-counter-color:Highlight}}[size=large].sc-stzh-chip-h{--height:2.5rem;--border-radius:1.25rem;--padding:0 var(--stzh-space-xlarge)}[size=small].sc-stzh-chip-h{--height:1.5rem;--icon-size:var(--stzh-icon-size-xsmall)}[variant=input].sc-stzh-chip-h{--border:0.0625rem solid transparent;--background-color:var(--stzh-color-grey5);--hover-border:0.0625rem solid transparent}[variant=tag].sc-stzh-chip-h{--color:var(--stzh-base-color);--icon-color:var(--stzh-base-color);--counter-color:var(--stzh-base-color);--border:0.0625rem solid transparent;--background-color:var(--stzh-color-black8);--hover-color:var(--stzh-base-color);--hover-border:0.0625rem solid transparent;--hover-background-color:var(--stzh-color-black8);--hover-icon-color:var(--stzh-base-color);--hover-counter-color:var(--stzh-base-color)}[type=secondary].sc-stzh-chip-h{--color:var(--stzh-base-lead-color);--counter-color:var(--stzh-color-grey40)}[type=important].sc-stzh-chip-h{--color:var(--stzh-color-error);--icon-color:var(--stzh-color-error);--counter-color:var(--stzh-color-error);--hover-color:var(--stzh-color-error);--hover-icon-color:var(--stzh-color-error);--hover-counter-color:var(--stzh-color-error)}@media (forced-colors: active), (-ms-high-contrast: active){[type=important].sc-stzh-chip-h{--hover-color:Highlight;--hover-icon-color:Highlight;--hover-counter-color:Highlight}}[active].sc-stzh-chip-h:not([active=false]){--color:var(--stzh-color-white);--border:0.0625rem solid transparent;--remove-color:var(--stzh-color-white);--background-color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--icon-color:var(--stzh-color-white);--counter-color:var(--stzh-color-white56);--hover-color:var(--stzh-color-white);--hover-border:0.0625rem solid transparent;--hover-background-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-remove-color:var(--stzh-color-white);--hover-remove-background-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-icon-color:var(--stzh-color-white);--hover-counter-color:var(--stzh-color-white56)}@media (forced-colors: active), (-ms-high-contrast: active){[active].sc-stzh-chip-h:not([active=false]){--color:SelectedItem;--border:0.0625rem solid SelectedItem;--remove-color:SelectedItem;--background-color:Canvas;--icon-color:SelectedItem;--counter-color:SelectedItem;--hover-color:Highlight;--hover-border:0.0625rem solid Highlight;--hover-background-color:Canvas;--hover-remove-color:Highlight;--hover-remove-background-color:Canvas;--hover-icon-color:Highlight;--hover-counter-color:Highlight}}[non-interactive].sc-stzh-chip-h:not([non-interactive=false]){--hover-color:var(--color);--hover-border:var(--border);--hover-background-color:var(--background-color);--hover-icon-color:var(--icon-color);--hover-counter-color:var(--counter-color)}[disabled].sc-stzh-chip-h:not([disabled=false]){--color:var(--stzh-color-grey25);--border:0.0625rem solid var(--stzh-base-border-color);--remove-color:var(--stzh-color-grey13);--background-color:var(--stzh-color-white);--icon-color:var(--stzh-color-grey25);--counter-color:var(--stzh-color-grey25);--hover-color:var(--stzh-color-grey25);--hover-border:0.0625rem solid var(--stzh-base-border-color);--hover-background-color:var(--stzh-color-white);--hover-remove-color:var(--stzh-color-grey13);--hover-remove-background-color:transparent;--hover-icon-color:var(--stzh-color-grey25);--hover-counter-color:var(--stzh-color-grey25)}.sc-stzh-chip-h .sc-stzh-chip-s>stzh-icon,.stzh-chip__icon.sc-stzh-chip{--size:var(--icon-size)}.stzh-chip.sc-stzh-chip{position:relative}.stzh-chip__vhidden.sc-stzh-chip{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-chip__button.sc-stzh-chip{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);font-family:inherit;height:var(--height);display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;border-radius:var(--border-radius);padding:var(--padding);color:var(--color);-webkit-appearance:none;-moz-appearance:none;appearance:none;border:var(--border);background-color:var(--background-color);-webkit-transition:all var(--stzh-base-transition-animation-speed);transition:all var(--stzh-base-transition-animation-speed);text-decoration:none}.stzh-chip__button.is-button.sc-stzh-chip,.stzh-chip__button.is-link.sc-stzh-chip{cursor:pointer}.stzh-chip__label.sc-stzh-chip{text-align:left}.stzh-chip__icon-wrapper.sc-stzh-chip{display:-ms-flexbox;display:flex;color:var(--icon-color);-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed);-ms-flex-negative:0;flex-shrink:0}.stzh-chip__icon-wrapper.sc-stzh-chip:not(:empty){margin-right:var(--stzh-space-xsmall)}.stzh-chip__counter.sc-stzh-chip{display:-ms-flexbox;display:flex;font-variant-numeric:tabular-nums;margin-left:var(--stzh-space-xsmall);color:var(--counter-color);-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed)}.stzh-chip__remove.sc-stzh-chip{position:absolute;top:0;right:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;border:none;background:none;padding:0;width:var(--height);height:var(--height);border-radius:var(--remove-border-radius);display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;margin-left:var(--stzh-space-xxsmall);color:var(--remove-color);-webkit-transition:all var(--stzh-base-transition-animation-speed);transition:all var(--stzh-base-transition-animation-speed);cursor:pointer}.stzh-chip__remove.sc-stzh-chip:hover{color:var(--hover-remove-color);background-color:var(--hover-remove-background-color)}.stzh-chip__remove-icon.sc-stzh-chip{--size:var(--stzh-icon-size-xxsmall)}.stzh-chip__button.sc-stzh-chip:hover,.stzh-chip__remove.sc-stzh-chip:hover+.stzh-chip__button.sc-stzh-chip{color:var(--hover-color);background-color:var(--hover-background-color);border:var(--hover-border)}.stzh-chip__button.sc-stzh-chip:hover .stzh-chip__counter.sc-stzh-chip{color:var(--hover-counter-color)}.stzh-chip__button.sc-stzh-chip:hover .stzh-chip__icon-wrapper.sc-stzh-chip{color:var(--hover-icon-color)}.stzh-chip--size-small.sc-stzh-chip .stzh-chip__button.sc-stzh-chip{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height)}.stzh-chip--size-small.sc-stzh-chip .stzh-chip__icon-wrapper.sc-stzh-chip:not(:empty){margin-right:var(--stzh-space-xxsmall)}.stzh-chip--size-small.sc-stzh-chip .stzh-chip__counter.sc-stzh-chip{margin-left:var(--stzh-space-xxsmall)}.stzh-chip--is-removable.sc-stzh-chip .stzh-chip__button.sc-stzh-chip{padding-right:calc(var(--height) + var(--stzh-space-xxsmall))}.stzh-chip--is-disabled.sc-stzh-chip .stzh-chip__button.sc-stzh-chip,.stzh-chip--is-disabled.sc-stzh-chip .stzh-chip__remove.sc-stzh-chip{cursor:not-allowed}";
+const stzhChipCss = ".sc-stzh-chip-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-chip-h{display:none}.sc-stzh-chip-h *.sc-stzh-chip,.sc-stzh-chip-h *.sc-stzh-chip::before,.sc-stzh-chip-h *.sc-stzh-chip::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}.sc-stzh-chip-h{--color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--height:2rem;--padding:0 var(--stzh-space-medium);--border-color:var(--stzh-color-grey13);--border-radius:1rem;--remove-color:var(--stzh-base-lead-color);--remove-border-radius:1.5rem;--background-color:var(--stzh-color-white);--icon-size:var(--stzh-icon-size-small);--icon-color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--counter-color:var(--stzh-color-primary60op);--hover-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-border-color:var(--border-color);--hover-background-color:var(--stzh-color-primary8);--hover-remove-color:var(--hover-color);--hover-remove-background-color:var(--hover-background-color);--hover-icon-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-counter-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));display:-ms-inline-flexbox;display:inline-flex}@media (forced-colors: active), (-ms-high-contrast: active){.sc-stzh-chip-h{--hover-color:Highlight;--hover-border:0.0625rem solid Highlight;--hover-background-color:Canvas;--hover-remove-color:Highlight;--hover-remove-background-color:Canvas;--hover-icon-color:Highlight;--hover-counter-color:Highlight}}[size=large].sc-stzh-chip-h{--height:2.5rem;--border-radius:1.25rem;--padding:0 var(--stzh-space-xlarge)}[size=small].sc-stzh-chip-h{--height:1.5rem;--icon-size:var(--stzh-icon-size-xsmall)}[variant=input].sc-stzh-chip-h{--border-color:transparent;--background-color:var(--stzh-color-grey5);--hover-border-color:transparent}[variant=tag].sc-stzh-chip-h{--color:var(--stzh-base-color);--icon-color:var(--stzh-base-color);--counter-color:var(--stzh-base-color);--border-color:transparent;--background-color:var(--stzh-color-black8);--hover-color:var(--stzh-base-color);--hover-border-color:transparent;--hover-background-color:var(--stzh-color-black8);--hover-icon-color:var(--stzh-base-color);--hover-counter-color:var(--stzh-base-color)}[type=secondary].sc-stzh-chip-h{--color:var(--stzh-base-lead-color);--counter-color:var(--stzh-color-grey40)}[type=important].sc-stzh-chip-h{--color:var(--stzh-color-error);--icon-color:var(--stzh-color-error);--counter-color:var(--stzh-color-error);--hover-color:var(--stzh-color-error);--hover-icon-color:var(--stzh-color-error);--hover-counter-color:var(--stzh-color-error)}@media (forced-colors: active), (-ms-high-contrast: active){[type=important].sc-stzh-chip-h{--hover-color:Highlight;--hover-icon-color:Highlight;--hover-counter-color:Highlight}}[active].sc-stzh-chip-h:not([active=false]){--color:var(--stzh-color-white);--border-color:transparent;--remove-color:var(--stzh-color-white);--background-color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--icon-color:var(--stzh-color-white);--counter-color:var(--stzh-color-white56);--hover-color:var(--stzh-color-white);--hover-border-color:transparent;--hover-background-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-remove-color:var(--stzh-color-white);--hover-remove-background-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-icon-color:var(--stzh-color-white);--hover-counter-color:var(--stzh-color-white56)}@media (forced-colors: active), (-ms-high-contrast: active){[active].sc-stzh-chip-h:not([active=false]){--color:SelectedItem;--border-color:SelectedItem;--remove-color:SelectedItem;--background-color:Canvas;--icon-color:SelectedItem;--counter-color:SelectedItem;--hover-color:Highlight;--hover-border-color:Highlight;--hover-background-color:Canvas;--hover-remove-color:Highlight;--hover-remove-background-color:Canvas;--hover-icon-color:Highlight;--hover-counter-color:Highlight}}[non-interactive].sc-stzh-chip-h:not([non-interactive=false]){--hover-color:var(--color);--hover-border:var(--border-color);--hover-background-color:var(--background-color);--hover-icon-color:var(--icon-color);--hover-counter-color:var(--counter-color)}[disabled].sc-stzh-chip-h:not([disabled=false]){--color:var(--stzh-color-grey25);--border-color:var(--stzh-base-border-color);--remove-color:var(--stzh-color-grey13);--background-color:var(--stzh-color-white);--icon-color:var(--stzh-color-grey25);--counter-color:var(--stzh-color-grey25);--hover-color:var(--stzh-color-grey25);--hover-border-color:var(--stzh-base-border-color);--hover-background-color:var(--stzh-color-white);--hover-remove-color:var(--stzh-color-grey13);--hover-remove-background-color:transparent;--hover-icon-color:var(--stzh-color-grey25);--hover-counter-color:var(--stzh-color-grey25)}.sc-stzh-chip-h .sc-stzh-chip-s>stzh-icon,.stzh-chip__icon.sc-stzh-chip{--size:var(--icon-size)}.stzh-chip.sc-stzh-chip{position:relative}.stzh-chip__vhidden.sc-stzh-chip{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-chip__button.sc-stzh-chip{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);font-family:inherit;height:var(--height);display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;border-radius:var(--border-radius);padding:var(--padding);color:var(--color);-webkit-appearance:none;-moz-appearance:none;appearance:none;border-width:0.0625rem;border-style:solid;border-color:var(--border-color);background-color:var(--background-color);-webkit-transition-duration:var(--stzh-base-transition-animation-speed);transition-duration:var(--stzh-base-transition-animation-speed);-webkit-transition-property:color, background-color, border-color;transition-property:color, background-color, border-color;-webkit-text-decoration-line:none;text-decoration-line:none}.stzh-chip__button.is-button.sc-stzh-chip,.stzh-chip__button.is-link.sc-stzh-chip{cursor:pointer}.stzh-chip__label.sc-stzh-chip{text-align:left}.stzh-chip__icon-wrapper.sc-stzh-chip{display:-ms-flexbox;display:flex;color:var(--icon-color);-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed);-ms-flex-negative:0;flex-shrink:0}.stzh-chip__icon-wrapper.sc-stzh-chip:not(:empty){margin-right:var(--stzh-space-xsmall)}.stzh-chip__counter.sc-stzh-chip{display:-ms-flexbox;display:flex;font-variant-numeric:tabular-nums;margin-left:var(--stzh-space-xsmall);color:var(--counter-color);-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed)}.stzh-chip__remove.sc-stzh-chip{position:absolute;top:0;right:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;border:none;background:none;padding:0;width:var(--height);height:var(--height);border-radius:var(--remove-border-radius);display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;margin-left:var(--stzh-space-xxsmall);color:var(--remove-color);-webkit-transition-duration:var(--stzh-base-transition-animation-speed);transition-duration:var(--stzh-base-transition-animation-speed);-webkit-transition-property:color, background-color, border-color;transition-property:color, background-color, border-color;cursor:pointer}.stzh-chip__remove.sc-stzh-chip:hover{color:var(--hover-remove-color);background-color:var(--hover-remove-background-color)}.stzh-chip__remove-icon.sc-stzh-chip{--size:var(--stzh-icon-size-xxsmall)}.stzh-chip__button.sc-stzh-chip:hover,.stzh-chip__remove.sc-stzh-chip:hover+.stzh-chip__button.sc-stzh-chip{color:var(--hover-color);background-color:var(--hover-background-color);border-color:var(--hover-border-color)}.stzh-chip__button.sc-stzh-chip:hover .stzh-chip__counter.sc-stzh-chip,.stzh-chip__remove.sc-stzh-chip:hover+.stzh-chip__button.sc-stzh-chip .stzh-chip__counter.sc-stzh-chip{color:var(--hover-counter-color)}.stzh-chip__button.sc-stzh-chip:hover .stzh-chip__icon-wrapper.sc-stzh-chip,.stzh-chip__remove.sc-stzh-chip:hover+.stzh-chip__button.sc-stzh-chip .stzh-chip__icon-wrapper.sc-stzh-chip{color:var(--hover-icon-color)}.stzh-chip--size-small.sc-stzh-chip .stzh-chip__button.sc-stzh-chip{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height)}.stzh-chip--size-small.sc-stzh-chip .stzh-chip__icon-wrapper.sc-stzh-chip:not(:empty){margin-right:var(--stzh-space-xxsmall)}.stzh-chip--size-small.sc-stzh-chip .stzh-chip__counter.sc-stzh-chip{margin-left:var(--stzh-space-xxsmall)}.stzh-chip--is-removable.sc-stzh-chip .stzh-chip__button.sc-stzh-chip{padding-right:calc(var(--height) + var(--stzh-space-xxsmall))}.stzh-chip--is-disabled.sc-stzh-chip .stzh-chip__button.sc-stzh-chip,.stzh-chip--is-disabled.sc-stzh-chip .stzh-chip__remove.sc-stzh-chip{cursor:not-allowed}";
 
 const StzhChip = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -12,7 +14,15 @@ const StzhChip = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.stzhRemove = createEvent(this, "stzhRemove", 7);
     this.stzhFocus = createEvent(this, "stzhFocus", 7);
     this.stzhBlur = createEvent(this, "stzhBlur", 7);
+    this.focusedByInput = false;
+    this.onRootFocus = () => {
+      if (!this.focusedByInput) {
+        this.setFocus();
+      }
+      this.focusedByInput = false;
+    };
     this.onFocus = (event) => {
+      this.focusedByInput = true;
       const focusEvent = new FocusEvent("focus", {
         view: window,
         bubbles: false,
@@ -73,7 +83,8 @@ const StzhChip = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     return (h(Fragment, null, h("div", { class: "stzh-chip__icon-wrapper" }, this.icon ?
       h("stzh-icon", { class: "stzh-chip__icon", name: this.icon })
       :
-        h("slot", { name: "icon" })), h("stzh-clamp", { lines: 1, class: "stzh-chip__label" }, this.label ? this.label : h("slot", null), h("span", { class: "stzh-chip__vhidden" }, "\u00A0(", this.counter, ")")), this.counter &&
+        h("slot", { name: "icon" })), h("stzh-clamp", { lines: 1, class: "stzh-chip__label" }, this.label ? this.label : h("slot", null), this.counter &&
+      h("span", { class: "stzh-chip__vhidden" }, "\u00A0(", this.counter, ")")), this.counter &&
       h("div", { class: "stzh-chip__counter", "aria-hidden": "true" }, this.counter)));
   }
   render() {
@@ -89,7 +100,7 @@ const StzhChip = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     };
     const Chip = this.nonInteractive ? "div" :
       this.href ? "a" : "button";
-    return (h(Host, null, h("div", { class: classes }, this.removable &&
+    return (h(Host, { tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, h("div", { class: classes }, this.removable &&
       h("button", { class: "stzh-chip__remove", onClick: this.onRemoveClick, disabled: this.disabled, "aria-label": this.removeLabel, type: "button" }, h("stzh-icon", { class: "stzh-chip__remove-icon", name: "close" })), this.href ?
       h(Chip, { ref: (el) => (this.chip = el), class: {
           "stzh-chip__button": true,
@@ -128,19 +139,29 @@ function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["stzh-chip", "stzh-clamp", "stzh-icon"];
+  const components = ["stzh-chip", "stzh-badge", "stzh-clamp", "stzh-icon", "stzh-link"];
   components.forEach(tagName => { switch (tagName) {
     case "stzh-chip":
       if (!customElements.get(tagName)) {
         customElements.define(tagName, StzhChip);
       }
       break;
+    case "stzh-badge":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
     case "stzh-clamp":
       if (!customElements.get(tagName)) {
-        defineCustomElement$2();
+        defineCustomElement$3();
       }
       break;
     case "stzh-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "stzh-link":
       if (!customElements.get(tagName)) {
         defineCustomElement$1();
       }