@six-group/ui-library 0.0.0-insider.1a260b6 → 0.0.0-insider.1c3fe8c

package/dist/cjs/six-header-menu-button.cjs.entry.js

@@ -1,27 +1,30 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-417a06c8.js');
+var index = require('./index-C8rK7OAe.js');
 
 const sixHeaderMenuButtonCss = ":host{display:block}six-button::part(base){border:none;padding-right:0}six-button[disabled]::part(base){color:var(--six-color-web-rock-600);background-color:transparent}six-button::part(label){border:none;font-weight:var(--six-font-weight-bold);font-size:var(--six-font-size-small);padding-left:0}six-button:focus::part(base),six-button:hover::part(base),six-button:active::part(base){background-color:initial;border-color:initial}six-button:hover::part(base),six-button:active::part(base){color:var(--six-header-selected-app-color-hover)}";
-const SixHeaderMenuButtonStyle0 = sixHeaderMenuButtonCss;
 
 const SixHeaderMenuButton = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        /** Set to true to draw the button with a caret for use with dropdowns, popovers, etc. */
         this.caret = false;
+        /** Set to true to disable the button. */
         this.disabled = false;
+        /** Set to true to draw the button in a loading state. */
         this.loading = false;
+        /** Indicates if activating the button should submit the form. Ignored when `href` is set. */
         this.submit = false;
+        /** Indicates if activating the button should reset the form. */
         this.reset = false;
     }
     render() {
-        return (index.h("six-button", { key: '0e49fce5af4f896cf6bc921535b4d6c9c9099135', type: "secondary", caret: this.caret, disabled: this.disabled, loading: this.loading, submit: this.submit, reset: this.reset }, index.h("slot", { key: 'd25b06f7eaecb9543b90ec1e431b851e31696ed5', name: "suffix", slot: "suffix" }), index.h("slot", { key: '71e3403e71239885fbebf529cdfa8bf597c45912', name: "prefix", slot: "prefix" }), index.h("slot", { key: '4c94d3c70fb10ba34999f72ccb4f0196ff5f0186' })));
+        return (index.h("six-button", { key: '8f16a33fa8b582d5ec3d149d01bbfd8cc99816f7', type: "secondary", caret: this.caret, disabled: this.disabled, loading: this.loading, submit: this.submit, reset: this.reset }, index.h("slot", { key: '52e7d5689dd7134a5a95f5ec065eb6ebfe274dc4', name: "suffix", slot: "suffix" }), index.h("slot", { key: '6170bff5e2846774d293a9eee5e1b94149b609cf', name: "prefix", slot: "prefix" }), index.h("slot", { key: '6506ee3f4d7bd48e6b0f67f0a5ac9911d74786f1' })));
     }
 };
-SixHeaderMenuButton.style = SixHeaderMenuButtonStyle0;
+SixHeaderMenuButton.style = sixHeaderMenuButtonCss;
 
 exports.six_header_menu_button = SixHeaderMenuButton;
+//# sourceMappingURL=six-header-menu-button.entry.cjs.js.map
 
 //# sourceMappingURL=six-header-menu-button.cjs.entry.js.map

package/dist/cjs/six-header-menu-button.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"six-header-menu-button.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,sBAAsB,GAAG,6hBAA6hB,CAAC;AAC7jB,kCAAe,sBAAsB;;MCWxB,mBAAmB;;;qBAEd,KAAK;wBAGe,KAAK;uBAGN,KAAK;sBAGN,KAAK;qBAGN,KAAK;;IAEtC,MAAM;QACJ,QACEA,yEACE,IAAI,EAAC,WAAW,EAChB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,KAAK,EAAE,IAAI,CAAC,KAAK,IAEjBA,mEAAM,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,GAAQ,EACzCA,mEAAM,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,GAAQ,EACzCA,oEAAQ,CACG,EACb;KACH;;;;;;","names":["h"],"sources":["src/components/six-header-menu-button/six-header-menu-button.scss?tag=six-header-menu-button&encapsulation=shadow","src/components/six-header-menu-button/six-header-menu-button.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\nsix-button::part(base) {\n  border: none;\n  padding-right: 0;\n}\n\nsix-button[disabled]::part(base) {\n  color: var(--six-color-web-rock-600);\n  background-color: transparent;\n}\n\nsix-button::part(label) {\n  border: none;\n  font-weight: var(--six-font-weight-bold);\n  font-size: var(--six-font-size-small);\n  padding-left: 0;\n}\n\nsix-button:focus::part(base),\nsix-button:hover::part(base),\nsix-button:active::part(base) {\n  background-color: initial;\n  border-color: initial;\n}\n\nsix-button:hover::part(base),\nsix-button:active::part(base) {\n  color: var(--six-header-selected-app-color-hover);\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n/**\n * @since 4.2.7\n * @status stable\n */\n\n@Component({\n  tag: 'six-header-menu-button',\n  styleUrl: 'six-header-menu-button.scss',\n  shadow: true,\n})\nexport class SixHeaderMenuButton {\n  /** Set to true to draw the button with a caret for use with dropdowns, popovers, etc. */\n  @Prop() caret = false;\n\n  /** Set to true to disable the button. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Set to true to draw the button in a loading state. */\n  @Prop({ reflect: true }) loading = false;\n\n  /** Indicates if activating the button should submit the form. Ignored when `href` is set. */\n  @Prop({ reflect: true }) submit = false;\n\n  /** Indicates if activating the button should reset the form. */\n  @Prop({ reflect: true }) reset = false;\n\n  render() {\n    return (\n      <six-button\n        type=\"secondary\"\n        caret={this.caret}\n        disabled={this.disabled}\n        loading={this.loading}\n        submit={this.submit}\n        reset={this.reset}\n      >\n        <slot name=\"suffix\" slot=\"suffix\"></slot>\n        <slot name=\"prefix\" slot=\"prefix\"></slot>\n        <slot />\n      </six-button>\n    );\n  }\n}\n"],"version":3}
+{"file":"six-header-menu-button.entry.cjs.js","mappings":";;;;AAAA,MAAM,sBAAsB,GAAG,6hBAA6hB;;MCY/iB,mBAAmB,GAAA,MAAA;AALhC,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAOU,QAAA,IAAK,CAAA,KAAA,GAAG,KAAK;;AAGI,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;;AAGhB,QAAA,IAAO,CAAA,OAAA,GAAG,KAAK;;AAGf,QAAA,IAAM,CAAA,MAAA,GAAG,KAAK;;AAGd,QAAA,IAAK,CAAA,KAAA,GAAG,KAAK;AAkBvC;IAhBC,MAAM,GAAA;QACJ,QACEA,OAAA,CAAA,YAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,WAAW,EAChB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,KAAK,EAAE,IAAI,CAAC,KAAK,EAAA,EAEjBA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,EAAQ,CAAA,EACzCA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,EAAQ,CAAA,EACzCA,OAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACG;;;;;;;","names":["h"],"sources":["src/components/six-header-menu-button/six-header-menu-button.scss?tag=six-header-menu-button&encapsulation=shadow","src/components/six-header-menu-button/six-header-menu-button.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\nsix-button::part(base) {\n  border: none;\n  padding-right: 0;\n}\n\nsix-button[disabled]::part(base) {\n  color: var(--six-color-web-rock-600);\n  background-color: transparent;\n}\n\nsix-button::part(label) {\n  border: none;\n  font-weight: var(--six-font-weight-bold);\n  font-size: var(--six-font-size-small);\n  padding-left: 0;\n}\n\nsix-button:focus::part(base),\nsix-button:hover::part(base),\nsix-button:active::part(base) {\n  background-color: initial;\n  border-color: initial;\n}\n\nsix-button:hover::part(base),\nsix-button:active::part(base) {\n  color: var(--six-header-selected-app-color-hover);\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n/**\n * @since 4.2.7\n * @status stable\n */\n\n@Component({\n  tag: 'six-header-menu-button',\n  styleUrl: 'six-header-menu-button.scss',\n  shadow: true,\n})\nexport class SixHeaderMenuButton {\n  /** Set to true to draw the button with a caret for use with dropdowns, popovers, etc. */\n  @Prop() caret = false;\n\n  /** Set to true to disable the button. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Set to true to draw the button in a loading state. */\n  @Prop({ reflect: true }) loading = false;\n\n  /** Indicates if activating the button should submit the form. Ignored when `href` is set. */\n  @Prop({ reflect: true }) submit = false;\n\n  /** Indicates if activating the button should reset the form. */\n  @Prop({ reflect: true }) reset = false;\n\n  render() {\n    return (\n      <six-button\n        type=\"secondary\"\n        caret={this.caret}\n        disabled={this.disabled}\n        loading={this.loading}\n        submit={this.submit}\n        reset={this.reset}\n      >\n        <slot name=\"suffix\" slot=\"suffix\"></slot>\n        <slot name=\"prefix\" slot=\"prefix\"></slot>\n        <slot />\n      </six-button>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/six-header-menu-button.entry.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"six-header-menu-button.entry.cjs.js","sources":["src/components/six-header-menu-button/six-header-menu-button.scss?tag=six-header-menu-button&encapsulation=shadow","src/components/six-header-menu-button/six-header-menu-button.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\nsix-button::part(base) {\n  border: none;\n  padding-right: 0;\n}\n\nsix-button[disabled]::part(base) {\n  color: var(--six-color-web-rock-600);\n  background-color: transparent;\n}\n\nsix-button::part(label) {\n  border: none;\n  font-weight: var(--six-font-weight-bold);\n  font-size: var(--six-font-size-small);\n  padding-left: 0;\n}\n\nsix-button:focus::part(base),\nsix-button:hover::part(base),\nsix-button:active::part(base) {\n  background-color: initial;\n  border-color: initial;\n}\n\nsix-button:hover::part(base),\nsix-button:active::part(base) {\n  color: var(--six-header-selected-app-color-hover);\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n/**\n * @since 4.2.7\n * @status stable\n */\n\n@Component({\n  tag: 'six-header-menu-button',\n  styleUrl: 'six-header-menu-button.scss',\n  shadow: true,\n})\nexport class SixHeaderMenuButton {\n  /** Set to true to draw the button with a caret for use with dropdowns, popovers, etc. */\n  @Prop() caret = false;\n\n  /** Set to true to disable the button. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Set to true to draw the button in a loading state. */\n  @Prop({ reflect: true }) loading = false;\n\n  /** Indicates if activating the button should submit the form. Ignored when `href` is set. */\n  @Prop({ reflect: true }) submit = false;\n\n  /** Indicates if activating the button should reset the form. */\n  @Prop({ reflect: true }) reset = false;\n\n  render() {\n    return (\n      <six-button\n        type=\"secondary\"\n        caret={this.caret}\n        disabled={this.disabled}\n        loading={this.loading}\n        submit={this.submit}\n        reset={this.reset}\n      >\n        <slot name=\"suffix\" slot=\"suffix\"></slot>\n        <slot name=\"prefix\" slot=\"prefix\"></slot>\n        <slot />\n      </six-button>\n    );\n  }\n}\n"],"names":["h"],"mappings":";;;;AAAA,MAAM,sBAAsB,GAAG,6hBAA6hB;;MCY/iB,mBAAmB,GAAA,MAAA;AALhC,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAOU,QAAA,IAAK,CAAA,KAAA,GAAG,KAAK;;AAGI,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;;AAGhB,QAAA,IAAO,CAAA,OAAA,GAAG,KAAK;;AAGf,QAAA,IAAM,CAAA,MAAA,GAAG,KAAK;;AAGd,QAAA,IAAK,CAAA,KAAA,GAAG,KAAK;AAkBvC;IAhBC,MAAM,GAAA;QACJ,QACEA,OAAA,CAAA,YAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,WAAW,EAChB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,KAAK,EAAE,IAAI,CAAC,KAAK,EAAA,EAEjBA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,EAAQ,CAAA,EACzCA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,EAAQ,CAAA,EACzCA,OAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACG;;;;;;;"}

package/dist/cjs/six-header.cjs.entry.js

@@ -1,20 +1,23 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-C8rK7OAe.js');
+var eventListeners = require('./event-listeners-BrSR7arL.js');
+var slot = require('./slot-DBK7c7jH.js');
 
-const index = require('./index-417a06c8.js');
-const eventListeners = require('./event-listeners-9fb878f1.js');
-const slot = require('./slot-1b1232a1.js');
-
-const sixHeaderCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}:host{display:block;user-select:none;--search-border-width:1px}::slotted(six-search-field){position:absolute;margin-left:var(--search-border-width);width:calc(100% - 2 * var(--search-border-width))}.six-header{display:flex;width:100%;height:var(--six-header-height);background-color:var(--six-header-background-color);align-items:stretch;box-shadow:var(--six-shadow-medium);border-bottom:var(--six-header-border-with) solid var(--six-header-border-color)}.six-header__search-field{opacity:0;transform:scale(0.9);transition:var(--six-transition-fast) opacity, var(--six-transition-fast) transform;display:none}.six-header__search-field--visible{opacity:1;transform:none;display:block}.six-header__search-field--shift-content.six-header__search-field--visible{height:2.65rem;transition:var(--six-transition-fast) height}.six-header__search-field--shift-content:not(.six-header__search-field--visible){height:0;transition:var(--six-transition-fast) height}";
-const SixHeaderStyle0 = sixHeaderCss;
+const sixHeaderCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host{display:block;user-select:none;--search-border-width:1px}::slotted(six-search-field){position:absolute;margin-left:var(--search-border-width);width:calc(100% - 2 * var(--search-border-width))}.six-header{display:flex;width:100%;height:var(--six-header-height);background-color:var(--six-header-background-color);align-items:stretch;box-shadow:var(--six-shadow-medium);border-bottom:var(--six-header-border-with) solid var(--six-header-border-color)}.six-header__search-field{opacity:0;transform:scale(0.9);transition:var(--six-transition-fast) opacity, var(--six-transition-fast) transform;display:none}.six-header__search-field--visible{opacity:1;transform:none;display:block}.six-header__search-field--shift-content.six-header__search-field--visible{height:2.65rem;transition:var(--six-transition-fast) height}.six-header__search-field--shift-content:not(.six-header__search-field--visible){height:0;transition:var(--six-transition-fast) height}";
 
 const SixHeader = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.eventListeners = new eventListeners.EventListeners();
+        /** Indicates if content should be shifted down when search field is visible. */
         this.shiftContent = false;
+        /**
+         * Set the header search input to be in an open or closed state.
+         *
+         * Focuses the first `six-input` found in the search slot.
+         */
         this.openSearch = false;
+        this.eventListeners = new eventListeners.EventListeners();
     }
     handleOpenSearchChange() {
         if (this.openSearch) {
@@ -26,12 +29,11 @@ const SixHeader = class {
         this.eventListeners.removeAll();
     }
     render() {
-        console.log('render', this.openSearch);
-        return (index.h(index.Host, { key: '52af99894d875dcaab9e43584e3f85a032ee5297' }, index.h("header", { key: '0de37377a1ec6137940c9dc06d6db2be650473c4', part: "header", class: "six-header" }, index.h("slot", { key: '5a236e823be39bbf26073ac7ff5413ef09c25bda' })), index.h("div", { key: '77182a4e207a72ba9400a2d13d3cfddfdb98668c', class: {
+        return (index.h(index.Host, { key: '0a956c7cad628545be41c926565852f8b9489013' }, index.h("header", { key: '86ef3e269cdd9ee040c36189e886afca8024f0bd', part: "header", class: "six-header" }, index.h("slot", { key: 'c1f6c06a72dcbb8518ec4b66d047461d10b6dab9' })), index.h("div", { key: '875e7f2dae91404374e8481a303b0bc0ed72b24a', class: {
                 'six-header__search-field': true,
                 'six-header__search-field--visible': this.openSearch,
                 'six-header__search-field--shift-content': this.shiftContent,
-            } }, index.h("slot", { key: '27cfb931af55b164761a22c11c320874ddac3e3a', name: 'search-field' }))));
+            } }, index.h("slot", { key: '366b4b035f3b5a480cdd980cd6271fe181fca2c5', name: 'search-field' }))));
     }
     static get assetsDirs() { return ["assets"]; }
     get host() { return index.getElement(this); }
@@ -39,8 +41,9 @@ const SixHeader = class {
         "openSearch": ["handleOpenSearchChange"]
     }; }
 };
-SixHeader.style = SixHeaderStyle0;
+SixHeader.style = sixHeaderCss;
 
 exports.six_header = SixHeader;
+//# sourceMappingURL=six-header.entry.cjs.js.map
 
 //# sourceMappingURL=six-header.cjs.entry.js.map

package/dist/cjs/six-header.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"six-header.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,YAAY,GAAG,oiCAAoiC,CAAC;AAC1jC,wBAAe,YAAY;;MCcd,SAAS;;;QAwBZ,mBAAc,GAAG,IAAIA,6BAAc,EAAE,CAAC;4BAtBvB,KAAK;0BAOP,KAAK;;IAG1B,sBAAsB;QACpB,IAAI,IAAI,CAAC,UAAU,EAAE;;YAEnB,UAAU,CACR,8BAAY,OAAA,MAAA,MAAA,MAAAC,YAAO,CAAC,IAAI,CAAC,IAAI,EAAE,cAAc,CAAC,0CAAE,UAAU,0CAAE,aAAa,CAAC,WAAW,CAAC,0CAAE,QAAQ,EAAE,CAAA,EAAA,EAClG,EAAE,CACH,CAAC;SACH;KACF;IAMD,oBAAoB;QAClB,IAAI,CAAC,cAAc,CAAC,SAAS,EAAE,CAAC;KACjC;IAED,MAAM;QACJ,OAAO,CAAC,GAAG,CAAC,QAAQ,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;QACvC,QACEC,QAACC,UAAI,uDACHD,qEAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,YAAY,IACtCA,oEAAQ,CACD,EACTA,kEACE,KAAK,EAAE;gBACL,0BAA0B,EAAE,IAAI;gBAChC,mCAAmC,EAAE,IAAI,CAAC,UAAU;gBACpD,yCAAyC,EAAE,IAAI,CAAC,YAAY;aAC7D,IAEDA,mEAAM,IAAI,EAAE,cAAc,GAAI,CAC1B,CACD,EACP;KACH;;;;;;;;;;;","names":["EventListeners","getSlot","h","Host"],"sources":["src/components/six-header/six-header.scss?tag=six-header&encapsulation=shadow","src/components/six-header/six-header.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n  display: block;\n  user-select: none;\n  --search-border-width: 1px;\n}\n\n::slotted(six-search-field) {\n  position: absolute;\n  margin-left: var(--search-border-width);\n  width: calc(100% - 2 * var(--search-border-width));\n}\n\n.six-header {\n  display: flex;\n  width: 100%;\n  height: var(--six-header-height);\n  background-color: var(--six-header-background-color);\n  align-items: stretch;\n  box-shadow: var(--six-shadow-medium);\n  border-bottom: var(--six-header-border-with) solid var(--six-header-border-color);\n\n  &__search-field {\n    opacity: 0;\n    transform: scale(0.9);\n    transition: var(--six-transition-fast) opacity, var(--six-transition-fast) transform;\n    display: none;\n\n    &--visible {\n      opacity: 1;\n      transform: none;\n      display: block;\n    }\n\n    &--shift-content.six-header__search-field--visible {\n      height: 2.65rem;\n      transition: var(--six-transition-fast) height;\n    }\n\n    &--shift-content:not(.six-header__search-field--visible) {\n      height: 0;\n      transition: var(--six-transition-fast) height;\n    }\n  }\n}\n","import { Component, Element, h, Host, Prop, Watch } from '@stencil/core';\nimport { EventListeners } from '../../utils/event-listeners';\nimport { getSlot } from '../../utils/slot';\n\n/**\n * @since 1.0\n * @status stable\n * @slot search-field - Used to define the search field component in the header.\n */\n@Component({\n  tag: 'six-header',\n  styleUrl: 'six-header.scss',\n  shadow: true,\n  assetsDirs: ['assets'],\n})\nexport class SixHeader {\n  /** Indicates if content should be shifted down when search field is visible. */\n  @Prop() shiftContent = false;\n\n  /**\n   * Set the header search input to be in an open or closed state.\n   *\n   * Focuses the first `six-input` found in the search slot.\n   */\n  @Prop() openSearch = false;\n\n  @Watch('openSearch')\n  handleOpenSearchChange() {\n    if (this.openSearch) {\n      // deferred due to https://github.com/ionic-team/stencil/issues/3772\n      setTimeout(\n        async () => getSlot(this.host, 'search-field')?.shadowRoot?.querySelector('six-input')?.setFocus(),\n        50\n      );\n    }\n  }\n\n  @Element() host!: HTMLSixHeaderElement;\n\n  private eventListeners = new EventListeners();\n\n  disconnectedCallback() {\n    this.eventListeners.removeAll();\n  }\n\n  render() {\n    console.log('render', this.openSearch);\n    return (\n      <Host>\n        <header part=\"header\" class=\"six-header\">\n          <slot />\n        </header>\n        <div\n          class={{\n            'six-header__search-field': true,\n            'six-header__search-field--visible': this.openSearch,\n            'six-header__search-field--shift-content': this.shiftContent,\n          }}\n        >\n          <slot name={'search-field'} />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"six-header.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,YAAY,GAAG,+pCAA+pC;;MCevqC,SAAS,GAAA,MAAA;AANtB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAQU,QAAA,IAAY,CAAA,YAAA,GAAG,KAAK;AAE5B;;;;AAIG;AACK,QAAA,IAAU,CAAA,UAAA,GAAG,KAAK;AAelB,QAAA,IAAA,CAAA,cAAc,GAAG,IAAIA,6BAAc,EAAE;AAwB9C;IApCC,sBAAsB,GAAA;AACpB,QAAA,IAAI,IAAI,CAAC,UAAU,EAAE;;YAEnB,UAAU,CACR,8BAAY,OAAA,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,CAAA,EAAA,GAAAC,YAAO,CAAC,IAAI,CAAC,IAAI,EAAE,cAAc,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,UAAU,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,aAAa,CAAC,WAAW,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,QAAQ,EAAE,CAAA,EAAA,EAClG,EAAE,CACH;;;IAQL,oBAAoB,GAAA;AAClB,QAAA,IAAI,CAAC,cAAc,CAAC,SAAS,EAAE;;IAGjC,MAAM,GAAA;QACJ,QACEC,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,YAAY,EAAA,EACtCA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACD,EACTA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,0BAA0B,EAAE,IAAI;gBAChC,mCAAmC,EAAE,IAAI,CAAC,UAAU;gBACpD,yCAAyC,EAAE,IAAI,CAAC,YAAY;AAC7D,aAAA,EAAA,EAEDA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAE,cAAc,GAAI,CAC1B,CACD;;;;;;;;;;;;","names":["EventListeners","getSlot","h","Host"],"sources":["src/components/six-header/six-header.scss?tag=six-header&encapsulation=shadow","src/components/six-header/six-header.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n  display: block;\n  user-select: none;\n  --search-border-width: 1px;\n}\n\n::slotted(six-search-field) {\n  position: absolute;\n  margin-left: var(--search-border-width);\n  width: calc(100% - 2 * var(--search-border-width));\n}\n\n.six-header {\n  display: flex;\n  width: 100%;\n  height: var(--six-header-height);\n  background-color: var(--six-header-background-color);\n  align-items: stretch;\n  box-shadow: var(--six-shadow-medium);\n  border-bottom: var(--six-header-border-with) solid var(--six-header-border-color);\n\n  &__search-field {\n    opacity: 0;\n    transform: scale(0.9);\n    transition:\n      var(--six-transition-fast) opacity,\n      var(--six-transition-fast) transform;\n    display: none;\n\n    &--visible {\n      opacity: 1;\n      transform: none;\n      display: block;\n    }\n\n    &--shift-content.six-header__search-field--visible {\n      height: 2.65rem;\n      transition: var(--six-transition-fast) height;\n    }\n\n    &--shift-content:not(.six-header__search-field--visible) {\n      height: 0;\n      transition: var(--six-transition-fast) height;\n    }\n  }\n}\n","import { Component, Element, h, Host, Prop, Watch } from '@stencil/core';\nimport { EventListeners } from '../../utils/event-listeners';\nimport { getSlot } from '../../utils/slot';\n\n/**\n * @since 1.0\n * @status stable\n * @slot search-field - Used to define the search field component in the header.\n */\n@Component({\n  tag: 'six-header',\n  styleUrl: 'six-header.scss',\n  shadow: true,\n  assetsDirs: ['assets'],\n})\nexport class SixHeader {\n  /** Indicates if content should be shifted down when search field is visible. */\n  @Prop() shiftContent = false;\n\n  /**\n   * Set the header search input to be in an open or closed state.\n   *\n   * Focuses the first `six-input` found in the search slot.\n   */\n  @Prop() openSearch = false;\n\n  @Watch('openSearch')\n  handleOpenSearchChange() {\n    if (this.openSearch) {\n      // deferred due to https://github.com/ionic-team/stencil/issues/3772\n      setTimeout(\n        async () => getSlot(this.host, 'search-field')?.shadowRoot?.querySelector('six-input')?.setFocus(),\n        50\n      );\n    }\n  }\n\n  @Element() host!: HTMLSixHeaderElement;\n\n  private eventListeners = new EventListeners();\n\n  disconnectedCallback() {\n    this.eventListeners.removeAll();\n  }\n\n  render() {\n    return (\n      <Host>\n        <header part=\"header\" class=\"six-header\">\n          <slot />\n        </header>\n        <div\n          class={{\n            'six-header__search-field': true,\n            'six-header__search-field--visible': this.openSearch,\n            'six-header__search-field--shift-content': this.shiftContent,\n          }}\n        >\n          <slot name={'search-field'} />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/six-header.entry.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"six-header.entry.cjs.js","sources":["src/components/six-header/six-header.scss?tag=six-header&encapsulation=shadow","src/components/six-header/six-header.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n  display: block;\n  user-select: none;\n  --search-border-width: 1px;\n}\n\n::slotted(six-search-field) {\n  position: absolute;\n  margin-left: var(--search-border-width);\n  width: calc(100% - 2 * var(--search-border-width));\n}\n\n.six-header {\n  display: flex;\n  width: 100%;\n  height: var(--six-header-height);\n  background-color: var(--six-header-background-color);\n  align-items: stretch;\n  box-shadow: var(--six-shadow-medium);\n  border-bottom: var(--six-header-border-with) solid var(--six-header-border-color);\n\n  &__search-field {\n    opacity: 0;\n    transform: scale(0.9);\n    transition:\n      var(--six-transition-fast) opacity,\n      var(--six-transition-fast) transform;\n    display: none;\n\n    &--visible {\n      opacity: 1;\n      transform: none;\n      display: block;\n    }\n\n    &--shift-content.six-header__search-field--visible {\n      height: 2.65rem;\n      transition: var(--six-transition-fast) height;\n    }\n\n    &--shift-content:not(.six-header__search-field--visible) {\n      height: 0;\n      transition: var(--six-transition-fast) height;\n    }\n  }\n}\n","import { Component, Element, h, Host, Prop, Watch } from '@stencil/core';\nimport { EventListeners } from '../../utils/event-listeners';\nimport { getSlot } from '../../utils/slot';\n\n/**\n * @since 1.0\n * @status stable\n * @slot search-field - Used to define the search field component in the header.\n */\n@Component({\n  tag: 'six-header',\n  styleUrl: 'six-header.scss',\n  shadow: true,\n  assetsDirs: ['assets'],\n})\nexport class SixHeader {\n  /** Indicates if content should be shifted down when search field is visible. */\n  @Prop() shiftContent = false;\n\n  /**\n   * Set the header search input to be in an open or closed state.\n   *\n   * Focuses the first `six-input` found in the search slot.\n   */\n  @Prop() openSearch = false;\n\n  @Watch('openSearch')\n  handleOpenSearchChange() {\n    if (this.openSearch) {\n      // deferred due to https://github.com/ionic-team/stencil/issues/3772\n      setTimeout(\n        async () => getSlot(this.host, 'search-field')?.shadowRoot?.querySelector('six-input')?.setFocus(),\n        50\n      );\n    }\n  }\n\n  @Element() host!: HTMLSixHeaderElement;\n\n  private eventListeners = new EventListeners();\n\n  disconnectedCallback() {\n    this.eventListeners.removeAll();\n  }\n\n  render() {\n    return (\n      <Host>\n        <header part=\"header\" class=\"six-header\">\n          <slot />\n        </header>\n        <div\n          class={{\n            'six-header__search-field': true,\n            'six-header__search-field--visible': this.openSearch,\n            'six-header__search-field--shift-content': this.shiftContent,\n          }}\n        >\n          <slot name={'search-field'} />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":["EventListeners","getSlot","h","Host"],"mappings":";;;;;;AAAA,MAAM,YAAY,GAAG,+pCAA+pC;;MCevqC,SAAS,GAAA,MAAA;AANtB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAQU,QAAA,IAAY,CAAA,YAAA,GAAG,KAAK;AAE5B;;;;AAIG;AACK,QAAA,IAAU,CAAA,UAAA,GAAG,KAAK;AAelB,QAAA,IAAA,CAAA,cAAc,GAAG,IAAIA,6BAAc,EAAE;AAwB9C;IApCC,sBAAsB,GAAA;AACpB,QAAA,IAAI,IAAI,CAAC,UAAU,EAAE;;YAEnB,UAAU,CACR,8BAAY,OAAA,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,CAAA,EAAA,GAAAC,YAAO,CAAC,IAAI,CAAC,IAAI,EAAE,cAAc,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,UAAU,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,aAAa,CAAC,WAAW,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,QAAQ,EAAE,CAAA,EAAA,EAClG,EAAE,CACH;;;IAQL,oBAAoB,GAAA;AAClB,QAAA,IAAI,CAAC,cAAc,CAAC,SAAS,EAAE;;IAGjC,MAAM,GAAA;QACJ,QACEC,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,YAAY,EAAA,EACtCA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACD,EACTA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,0BAA0B,EAAE,IAAI;gBAChC,mCAAmC,EAAE,IAAI,CAAC,UAAU;gBACpD,yCAAyC,EAAE,IAAI,CAAC,YAAY;AAC7D,aAAA,EAAA,EAEDA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAE,cAAc,GAAI,CAC1B,CACD;;;;;;;;;;;;"}

package/dist/cjs/six-icon-button.cjs.entry.js

@@ -1,30 +1,23 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-C8rK7OAe.js');
+var focusVisible = require('./focus-visible-CMftNtQ2.js');
 
-const index = require('./index-417a06c8.js');
-const focusVisible = require('./focus-visible-e2c9255a.js');
-
-const sixIconButtonCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}:host{display:inline-block}.icon-button{flex:0 0 auto;display:flex;align-items:center;background:none;border:none;border-radius:var(--six-border-radius-medium);font-size:inherit;text-decoration:none;color:var(--six-input-icon-color);padding:var(--six-spacing-x-small);cursor:pointer;transition:var(--six-transition-medium) color;-webkit-appearance:none}.icon-button:hover:not(.icon-button--disabled){color:var(--six-input-icon-color-hover)}.icon-button:active:not(.icon-button--disabled){color:var(--six-input-icon-color)}.icon-button:focus{outline:none}.icon-button:focus-visible{outline:var(--six-focus-ring);outline-offset:var(--six-focus-ring-offset)}.icon-button--disabled{opacity:0.5;pointer-events:none}.icon-button-wrapper--disabled{cursor:not-allowed}.icon-button ::slotted(six-badge){position:absolute;top:0;right:0;pointer-events:none}.icon-button six-icon[size=xLarge]+::slotted(six-badge){transform:translateY(40%) translateX(-35%)}.icon-button six-icon[size=large]+::slotted(six-badge){transform:translateY(20%) translateX(-20%)}.icon-button six-icon[size=medium]+::slotted(six-badge){transform:translateY(10%) translateX(50%)}.icon-button six-icon[size=xSmall]+::slotted(six-badge){transform:translateY(-25%) translateX(25%)}";
-const SixIconButtonStyle0 = sixIconButtonCss;
+const sixIconButtonCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host{display:inline-block}.icon-button{flex:0 0 auto;display:flex;align-items:center;background:none;border:none;border-radius:var(--six-border-radius-medium);font-size:inherit;text-decoration:none;color:var(--six-input-icon-color);padding:var(--six-spacing-x-small);cursor:pointer;transition:var(--six-transition-medium) color;-webkit-appearance:none}.icon-button:hover:not(.icon-button--disabled){color:var(--six-input-icon-color-hover)}.icon-button:active:not(.icon-button--disabled){color:var(--six-input-icon-color)}.icon-button:focus{outline:none}.icon-button:focus-visible{outline:var(--six-focus-ring);outline-offset:var(--six-focus-ring-offset)}.icon-button--disabled{opacity:0.5;pointer-events:none}.icon-button-wrapper--disabled{cursor:not-allowed}.icon-button ::slotted(six-badge){position:absolute;top:0;right:0;pointer-events:none}.icon-button six-icon[size=xLarge]+::slotted(six-badge){transform:translateY(40%) translateX(-35%)}.icon-button six-icon[size=large]+::slotted(six-badge){transform:translateY(20%) translateX(-20%)}.icon-button six-icon[size=medium]+::slotted(six-badge){transform:translateY(10%) translateX(50%)}.icon-button six-icon[size=xSmall]+::slotted(six-badge){transform:translateY(-25%) translateX(25%)}";
 
 const SixIconButton = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        /** The icon's size. */
+        this.size = 'medium';
+        /** Set to true to disable the button. */
+        this.disabled = false;
         this.handleClickEvent = (event) => {
             if (this.disabled) {
                 event.preventDefault();
                 event.stopPropagation();
             }
         };
-        this.name = undefined;
-        this.size = 'medium';
-        this.label = undefined;
-        this.disabled = false;
-        this.html = undefined;
-        this.href = undefined;
-        this.target = undefined;
-        this.download = undefined;
     }
     componentDidLoad() {
         if (this.button != null) {
@@ -40,15 +33,16 @@ const SixIconButton = class {
         const isLink = this.href != null;
         const isButton = !isLink;
         const Button = isLink ? 'a' : 'button';
-        const html = this.html && index.h("span", { key: 'e4d2865734ec84d8ef4d2ed302ecb0376cd16c8c', innerHTML: this.html });
-        return (index.h("div", { key: 'ec94a7e81ac636a5c72c17d4c18e37a089765d70', onClick: this.handleClickEvent, class: { 'icon-button-wrapper--disabled': this.disabled } }, index.h(Button, { key: '6d59906ca43e55780e233875132cca469ce470ab', ref: (el) => (this.button = el), part: "base", disabled: isButton ? this.disabled : undefined, tabindex: this.disabled ? '-1' : undefined, class: {
+        const html = this.html && index.h("span", { key: '3a8510f8bb2afb5170f10c74be60ba75b8a5337c', innerHTML: this.html });
+        return (index.h("div", { key: '2f7bbfa76220fdcb6f761564fc0f1cd2d9965016', onClick: this.handleClickEvent, class: { 'icon-button-wrapper--disabled': this.disabled } }, index.h(Button, { key: '7453dadfdd7eafadae8c08c187d2aed60ac32031', ref: (el) => (this.button = el), part: "base", disabled: isButton ? this.disabled : undefined, tabindex: this.disabled ? '-1' : undefined, class: {
                 'icon-button': true,
                 'icon-button--disabled': this.disabled,
-            }, type: isButton ? 'button' : undefined, "aria-label": this.label, href: isLink ? this.href : undefined, target: isLink && this.target != null ? this.target : undefined, download: isLink && this.download != null ? this.download : undefined, rel: isLink && this.target != null ? 'noreferrer noopener' : undefined }, index.h("six-icon", { key: 'c806b6219195a29376322f35094178497e16d4eb', "aria-hidden": "true", size: this.size }, this.name), index.h("slot", { key: '52715c3b32fe592bddab75ff3378bce2448d24bd' }), html)));
+            }, type: isButton ? 'button' : undefined, "aria-label": this.label, href: isLink ? this.href : undefined, target: isLink && this.target != null ? this.target : undefined, download: isLink && this.download != null ? this.download : undefined, rel: isLink && this.target != null ? 'noreferrer noopener' : undefined }, index.h("six-icon", { key: 'ed51d0979fb1ecce548b342ee324bab5d2cf6dfd', "aria-hidden": "true", size: this.size }, this.name), index.h("slot", { key: '12bbdce6ac15e198adf8afd6c17cba7aadf20376' }), html)));
     }
 };
-SixIconButton.style = SixIconButtonStyle0;
+SixIconButton.style = sixIconButtonCss;
 
 exports.six_icon_button = SixIconButton;
+//# sourceMappingURL=six-icon-button.entry.cjs.js.map
 
 //# sourceMappingURL=six-icon-button.cjs.entry.js.map

package/dist/cjs/six-icon-button.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"six-icon-button.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,gBAAgB,GAAG,m0CAAm0C,CAAC;AAC71C,4BAAe,gBAAgB;;MCgBlB,aAAa;;;QA4EhB,qBAAgB,GAAG,CAAC,KAAY;YACtC,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACjB,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,KAAK,CAAC,eAAe,EAAE,CAAC;aACzB;SACF,CAAC;;oBA1E2G,QAAQ;;wBASjF,KAAK;;;;;;IAczC,gBAAgB;QACd,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,EAAE;YACvBA,yBAAY,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;SACnC;KACF;IAED,oBAAoB;QAClB,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,EAAE;YACvBA,yBAAY,CAAC,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;SACrC;KACF;IAED,MAAM;QACJ,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC;QACjC,MAAM,QAAQ,GAAG,CAAC,MAAM,CAAC;QACzB,MAAM,MAAM,GAAG,MAAM,GAAG,GAAG,GAAG,QAAQ,CAAC;QACvC,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,IAAIC,mEAAM,SAAS,EAAE,IAAI,CAAC,IAAI,GAAI,CAAC;QAEzD,QACEA,kEAAK,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAAE,KAAK,EAAE,EAAE,+BAA+B,EAAE,IAAI,CAAC,QAAQ,EAAE,IAC5FA,QAAC,MAAM,qDACL,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC,EAC/B,IAAI,EAAC,MAAM,EACX,QAAQ,EAAE,QAAQ,GAAG,IAAI,CAAC,QAAQ,GAAG,SAAS,EAC9C,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,SAAS,EAC1C,KAAK,EAAE;gBACL,aAAa,EAAE,IAAI;gBACnB,uBAAuB,EAAE,IAAI,CAAC,QAAQ;aACvC,EACD,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,SAAS,gBACzB,IAAI,CAAC,KAAK,EACtB,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC,IAAI,GAAG,SAAS,EACpC,MAAM,EAAE,MAAM,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,GAAG,IAAI,CAAC,MAAM,GAAG,SAAS,EAC/D,QAAQ,EAAE,MAAM,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,GAAG,IAAI,CAAC,QAAQ,GAAG,SAAS,EACrE,GAAG,EAAE,MAAM,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,GAAG,qBAAqB,GAAG,SAAS,IAEtEA,sFAAsB,MAAM,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,IACzC,IAAI,CAAC,IAAI,CACD,EACXA,oEAAQ,EACP,IAAI,CACE,CACL,EACN;KACH;;;;;;","names":["focusVisible","h"],"sources":["src/components/six-icon-button/six-icon-button.scss?tag=six-icon-button&encapsulation=shadow","src/components/six-icon-button/six-icon-button.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n  display: inline-block;\n}\n\n.icon-button {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  background: none;\n  border: none;\n  border-radius: var(--six-border-radius-medium);\n  font-size: inherit;\n  text-decoration: none;\n  color: var(--six-input-icon-color);\n  padding: var(--six-spacing-x-small);\n  cursor: pointer;\n  transition: var(--six-transition-medium) color;\n  -webkit-appearance: none;\n\n  &:hover:not(.icon-button--disabled) {\n    color: var(--six-input-icon-color-hover);\n  }\n\n  &:active:not(.icon-button--disabled) {\n    color: var(--six-input-icon-color);\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  &:focus-visible {\n    outline: var(--six-focus-ring);\n    outline-offset: var(--six-focus-ring-offset);\n  }\n}\n\n.icon-button--disabled {\n  opacity: 0.5;\n  pointer-events: none;\n}\n\n.icon-button-wrapper--disabled {\n  cursor: not-allowed;\n}\n\n.icon-button ::slotted(six-badge) {\n  position: absolute;\n  top: 0;\n  right: 0;\n  pointer-events: none;\n}\n\n.icon-button six-icon[size='xLarge'] + ::slotted(six-badge) {\n  transform: translateY(40%) translateX(-35%);\n}\n\n.icon-button six-icon[size='large'] + ::slotted(six-badge) {\n  transform: translateY(20%) translateX(-20%);\n}\n\n// TODO: tx4u9 should be adjusted for all sizes after design team\n.icon-button six-icon[size='medium'] + ::slotted(six-badge) {\n  transform: translateY(10%) translateX(50%);\n}\n\n.icon-button six-icon[size='small'] + ::slotted(six-badge) {\n  //  no translation necessary\n}\n\n.icon-button six-icon[size='xSmall'] + ::slotted(six-badge) {\n  transform: translateY(-25%) translateX(25%);\n}\n","import { Component, h, Prop } from '@stencil/core';\nimport { focusVisible } from '../../utils/focus-visible';\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @part base - The component's base wrapper.\n */\n\n@Component({\n  tag: 'six-icon-button',\n  styleUrl: 'six-icon-button.scss',\n  shadow: true,\n})\nexport class SixIconButton {\n  private button?: HTMLButtonElement | HTMLAnchorElement;\n\n  /** The name of the icon to draw. */\n  @Prop({ reflect: true }) name?: string;\n\n  /** The icon's size. */\n  @Prop({ reflect: true }) size: 'xSmall' | 'small' | 'medium' | 'large' | 'xLarge' | 'xxLarge' | 'xxxLarge' = 'medium';\n\n  /**\n   * A description that gets read by screen readers and other assistive devices. For optimal accessibility, you should\n   * always include a label that describes what the icon button does.\n   */\n  @Prop({ reflect: true }) label?: string;\n\n  /** Set to true to disable the button. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** HTML symbol code or entity. */\n  @Prop({ reflect: true }) html?: string;\n\n  /** When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`. */\n  @Prop() href?: string;\n\n  /** Tells the browser where to open the link. Only used when `href` is set. */\n  @Prop() target?: '_blank' | '_parent' | '_self' | '_top';\n\n  /** Tells the browser to download the linked file as this filename. Only used when `href` is set. */\n  @Prop() download?: string;\n\n  componentDidLoad() {\n    if (this.button != null) {\n      focusVisible.observe(this.button);\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.button != null) {\n      focusVisible.unobserve(this.button);\n    }\n  }\n\n  render() {\n    const isLink = this.href != null;\n    const isButton = !isLink;\n    const Button = isLink ? 'a' : 'button';\n    const html = this.html && <span innerHTML={this.html} />;\n\n    return (\n      <div onClick={this.handleClickEvent} class={{ 'icon-button-wrapper--disabled': this.disabled }}>\n        <Button\n          ref={(el) => (this.button = el)}\n          part=\"base\"\n          disabled={isButton ? this.disabled : undefined}\n          tabindex={this.disabled ? '-1' : undefined}\n          class={{\n            'icon-button': true,\n            'icon-button--disabled': this.disabled,\n          }}\n          type={isButton ? 'button' : undefined}\n          aria-label={this.label}\n          href={isLink ? this.href : undefined}\n          target={isLink && this.target != null ? this.target : undefined}\n          download={isLink && this.download != null ? this.download : undefined}\n          rel={isLink && this.target != null ? 'noreferrer noopener' : undefined}\n        >\n          <six-icon aria-hidden=\"true\" size={this.size}>\n            {this.name}\n          </six-icon>\n          <slot />\n          {html}\n        </Button>\n      </div>\n    );\n  }\n\n  private handleClickEvent = (event: Event) => {\n    if (this.disabled) {\n      event.preventDefault();\n      event.stopPropagation();\n    }\n  };\n}\n"],"version":3}
+{"file":"six-icon-button.entry.cjs.js","mappings":";;;;;AAAA,MAAM,gBAAgB,GAAG,87CAA87C;;MCiB18C,aAAa,GAAA,MAAA;AAL1B,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAY2B,QAAA,IAAI,CAAA,IAAA,GAAgF,QAAQ;;AAS5F,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AA4DjC,QAAA,IAAA,CAAA,gBAAgB,GAAG,CAAC,KAAY,KAAI;AAC1C,YAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACjB,KAAK,CAAC,cAAc,EAAE;gBACtB,KAAK,CAAC,eAAe,EAAE;;AAE3B,SAAC;AACF;IApDC,gBAAgB,GAAA;AACd,QAAA,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,EAAE;AACvB,YAAAA,yBAAY,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC;;;IAIrC,oBAAoB,GAAA;AAClB,QAAA,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,EAAE;AACvB,YAAAA,yBAAY,CAAC,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC;;;IAIvC,MAAM,GAAA;AACJ,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI;AAChC,QAAA,MAAM,QAAQ,GAAG,CAAC,MAAM;QACxB,MAAM,MAAM,GAAG,MAAM,GAAG,GAAG,GAAG,QAAQ;QACtC,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,IAAIC,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,SAAS,EAAE,IAAI,CAAC,IAAI,GAAI;AAExD,QAAA,QACEA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAAE,KAAK,EAAE,EAAE,+BAA+B,EAAE,IAAI,CAAC,QAAQ,EAAE,EAAA,EAC5FA,OAAC,CAAA,MAAM,qDACL,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC,EAC/B,IAAI,EAAC,MAAM,EACX,QAAQ,EAAE,QAAQ,GAAG,IAAI,CAAC,QAAQ,GAAG,SAAS,EAC9C,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,SAAS,EAC1C,KAAK,EAAE;AACL,gBAAA,aAAa,EAAE,IAAI;gBACnB,uBAAuB,EAAE,IAAI,CAAC,QAAQ;AACvC,aAAA,EACD,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,SAAS,gBACzB,IAAI,CAAC,KAAK,EACtB,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC,IAAI,GAAG,SAAS,EACpC,MAAM,EAAE,MAAM,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,GAAG,IAAI,CAAC,MAAM,GAAG,SAAS,EAC/D,QAAQ,EAAE,MAAM,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,GAAG,IAAI,CAAC,QAAQ,GAAG,SAAS,EACrE,GAAG,EAAE,MAAM,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,GAAG,qBAAqB,GAAG,SAAS,EAAA,EAEtEA,OAAsB,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,aAAA,EAAA,MAAM,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EACzC,EAAA,IAAI,CAAC,IAAI,CACD,EACXA,OAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EACP,IAAI,CACE,CACL;;;;;;;","names":["focusVisible","h"],"sources":["src/components/six-icon-button/six-icon-button.scss?tag=six-icon-button&encapsulation=shadow","src/components/six-icon-button/six-icon-button.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n  display: inline-block;\n}\n\n.icon-button {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  background: none;\n  border: none;\n  border-radius: var(--six-border-radius-medium);\n  font-size: inherit;\n  text-decoration: none;\n  color: var(--six-input-icon-color);\n  padding: var(--six-spacing-x-small);\n  cursor: pointer;\n  transition: var(--six-transition-medium) color;\n  -webkit-appearance: none;\n\n  &:hover:not(.icon-button--disabled) {\n    color: var(--six-input-icon-color-hover);\n  }\n\n  &:active:not(.icon-button--disabled) {\n    color: var(--six-input-icon-color);\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  &:focus-visible {\n    outline: var(--six-focus-ring);\n    outline-offset: var(--six-focus-ring-offset);\n  }\n}\n\n.icon-button--disabled {\n  opacity: 0.5;\n  pointer-events: none;\n}\n\n.icon-button-wrapper--disabled {\n  cursor: not-allowed;\n}\n\n.icon-button ::slotted(six-badge) {\n  position: absolute;\n  top: 0;\n  right: 0;\n  pointer-events: none;\n}\n\n.icon-button six-icon[size='xLarge'] + ::slotted(six-badge) {\n  transform: translateY(40%) translateX(-35%);\n}\n\n.icon-button six-icon[size='large'] + ::slotted(six-badge) {\n  transform: translateY(20%) translateX(-20%);\n}\n\n// TODO: tx4u9 should be adjusted for all sizes after design team\n.icon-button six-icon[size='medium'] + ::slotted(six-badge) {\n  transform: translateY(10%) translateX(50%);\n}\n\n.icon-button six-icon[size='small'] + ::slotted(six-badge) {\n  //  no translation necessary\n}\n\n.icon-button six-icon[size='xSmall'] + ::slotted(six-badge) {\n  transform: translateY(-25%) translateX(25%);\n}\n","import { Component, h, Prop } from '@stencil/core';\nimport { focusVisible } from '../../utils/focus-visible';\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @part base - The component's base wrapper.\n */\n\n@Component({\n  tag: 'six-icon-button',\n  styleUrl: 'six-icon-button.scss',\n  shadow: true,\n})\nexport class SixIconButton {\n  private button?: HTMLButtonElement | HTMLAnchorElement;\n\n  /** The name of the icon to draw. */\n  @Prop({ reflect: true }) name?: string;\n\n  /** The icon's size. */\n  @Prop({ reflect: true }) size: 'xSmall' | 'small' | 'medium' | 'large' | 'xLarge' | 'xxLarge' | 'xxxLarge' = 'medium';\n\n  /**\n   * A description that gets read by screen readers and other assistive devices. For optimal accessibility, you should\n   * always include a label that describes what the icon button does.\n   */\n  @Prop({ reflect: true }) label?: string;\n\n  /** Set to true to disable the button. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** HTML symbol code or entity. */\n  @Prop({ reflect: true }) html?: string;\n\n  /** When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`. */\n  @Prop() href?: string;\n\n  /** Tells the browser where to open the link. Only used when `href` is set. */\n  @Prop() target?: '_blank' | '_parent' | '_self' | '_top';\n\n  /** Tells the browser to download the linked file as this filename. Only used when `href` is set. */\n  @Prop() download?: string;\n\n  componentDidLoad() {\n    if (this.button != null) {\n      focusVisible.observe(this.button);\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.button != null) {\n      focusVisible.unobserve(this.button);\n    }\n  }\n\n  render() {\n    const isLink = this.href != null;\n    const isButton = !isLink;\n    const Button = isLink ? 'a' : 'button';\n    const html = this.html && <span innerHTML={this.html} />;\n\n    return (\n      <div onClick={this.handleClickEvent} class={{ 'icon-button-wrapper--disabled': this.disabled }}>\n        <Button\n          ref={(el) => (this.button = el)}\n          part=\"base\"\n          disabled={isButton ? this.disabled : undefined}\n          tabindex={this.disabled ? '-1' : undefined}\n          class={{\n            'icon-button': true,\n            'icon-button--disabled': this.disabled,\n          }}\n          type={isButton ? 'button' : undefined}\n          aria-label={this.label}\n          href={isLink ? this.href : undefined}\n          target={isLink && this.target != null ? this.target : undefined}\n          download={isLink && this.download != null ? this.download : undefined}\n          rel={isLink && this.target != null ? 'noreferrer noopener' : undefined}\n        >\n          <six-icon aria-hidden=\"true\" size={this.size}>\n            {this.name}\n          </six-icon>\n          <slot />\n          {html}\n        </Button>\n      </div>\n    );\n  }\n\n  private handleClickEvent = (event: Event) => {\n    if (this.disabled) {\n      event.preventDefault();\n      event.stopPropagation();\n    }\n  };\n}\n"],"version":3}

package/dist/cjs/six-icon-button.entry.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"six-icon-button.entry.cjs.js","sources":["src/components/six-icon-button/six-icon-button.scss?tag=six-icon-button&encapsulation=shadow","src/components/six-icon-button/six-icon-button.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n  display: inline-block;\n}\n\n.icon-button {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  background: none;\n  border: none;\n  border-radius: var(--six-border-radius-medium);\n  font-size: inherit;\n  text-decoration: none;\n  color: var(--six-input-icon-color);\n  padding: var(--six-spacing-x-small);\n  cursor: pointer;\n  transition: var(--six-transition-medium) color;\n  -webkit-appearance: none;\n\n  &:hover:not(.icon-button--disabled) {\n    color: var(--six-input-icon-color-hover);\n  }\n\n  &:active:not(.icon-button--disabled) {\n    color: var(--six-input-icon-color);\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  &:focus-visible {\n    outline: var(--six-focus-ring);\n    outline-offset: var(--six-focus-ring-offset);\n  }\n}\n\n.icon-button--disabled {\n  opacity: 0.5;\n  pointer-events: none;\n}\n\n.icon-button-wrapper--disabled {\n  cursor: not-allowed;\n}\n\n.icon-button ::slotted(six-badge) {\n  position: absolute;\n  top: 0;\n  right: 0;\n  pointer-events: none;\n}\n\n.icon-button six-icon[size='xLarge'] + ::slotted(six-badge) {\n  transform: translateY(40%) translateX(-35%);\n}\n\n.icon-button six-icon[size='large'] + ::slotted(six-badge) {\n  transform: translateY(20%) translateX(-20%);\n}\n\n// TODO: tx4u9 should be adjusted for all sizes after design team\n.icon-button six-icon[size='medium'] + ::slotted(six-badge) {\n  transform: translateY(10%) translateX(50%);\n}\n\n.icon-button six-icon[size='small'] + ::slotted(six-badge) {\n  //  no translation necessary\n}\n\n.icon-button six-icon[size='xSmall'] + ::slotted(six-badge) {\n  transform: translateY(-25%) translateX(25%);\n}\n","import { Component, h, Prop } from '@stencil/core';\nimport { focusVisible } from '../../utils/focus-visible';\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @part base - The component's base wrapper.\n */\n\n@Component({\n  tag: 'six-icon-button',\n  styleUrl: 'six-icon-button.scss',\n  shadow: true,\n})\nexport class SixIconButton {\n  private button?: HTMLButtonElement | HTMLAnchorElement;\n\n  /** The name of the icon to draw. */\n  @Prop({ reflect: true }) name?: string;\n\n  /** The icon's size. */\n  @Prop({ reflect: true }) size: 'xSmall' | 'small' | 'medium' | 'large' | 'xLarge' | 'xxLarge' | 'xxxLarge' = 'medium';\n\n  /**\n   * A description that gets read by screen readers and other assistive devices. For optimal accessibility, you should\n   * always include a label that describes what the icon button does.\n   */\n  @Prop({ reflect: true }) label?: string;\n\n  /** Set to true to disable the button. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** HTML symbol code or entity. */\n  @Prop({ reflect: true }) html?: string;\n\n  /** When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`. */\n  @Prop() href?: string;\n\n  /** Tells the browser where to open the link. Only used when `href` is set. */\n  @Prop() target?: '_blank' | '_parent' | '_self' | '_top';\n\n  /** Tells the browser to download the linked file as this filename. Only used when `href` is set. */\n  @Prop() download?: string;\n\n  componentDidLoad() {\n    if (this.button != null) {\n      focusVisible.observe(this.button);\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.button != null) {\n      focusVisible.unobserve(this.button);\n    }\n  }\n\n  render() {\n    const isLink = this.href != null;\n    const isButton = !isLink;\n    const Button = isLink ? 'a' : 'button';\n    const html = this.html && <span innerHTML={this.html} />;\n\n    return (\n      <div onClick={this.handleClickEvent} class={{ 'icon-button-wrapper--disabled': this.disabled }}>\n        <Button\n          ref={(el) => (this.button = el)}\n          part=\"base\"\n          disabled={isButton ? this.disabled : undefined}\n          tabindex={this.disabled ? '-1' : undefined}\n          class={{\n            'icon-button': true,\n            'icon-button--disabled': this.disabled,\n          }}\n          type={isButton ? 'button' : undefined}\n          aria-label={this.label}\n          href={isLink ? this.href : undefined}\n          target={isLink && this.target != null ? this.target : undefined}\n          download={isLink && this.download != null ? this.download : undefined}\n          rel={isLink && this.target != null ? 'noreferrer noopener' : undefined}\n        >\n          <six-icon aria-hidden=\"true\" size={this.size}>\n            {this.name}\n          </six-icon>\n          <slot />\n          {html}\n        </Button>\n      </div>\n    );\n  }\n\n  private handleClickEvent = (event: Event) => {\n    if (this.disabled) {\n      event.preventDefault();\n      event.stopPropagation();\n    }\n  };\n}\n"],"names":["focusVisible","h"],"mappings":";;;;;AAAA,MAAM,gBAAgB,GAAG,87CAA87C;;MCiB18C,aAAa,GAAA,MAAA;AAL1B,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAY2B,QAAA,IAAI,CAAA,IAAA,GAAgF,QAAQ;;AAS5F,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AA4DjC,QAAA,IAAA,CAAA,gBAAgB,GAAG,CAAC,KAAY,KAAI;AAC1C,YAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACjB,KAAK,CAAC,cAAc,EAAE;gBACtB,KAAK,CAAC,eAAe,EAAE;;AAE3B,SAAC;AACF;IApDC,gBAAgB,GAAA;AACd,QAAA,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,EAAE;AACvB,YAAAA,yBAAY,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC;;;IAIrC,oBAAoB,GAAA;AAClB,QAAA,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,EAAE;AACvB,YAAAA,yBAAY,CAAC,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC;;;IAIvC,MAAM,GAAA;AACJ,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI;AAChC,QAAA,MAAM,QAAQ,GAAG,CAAC,MAAM;QACxB,MAAM,MAAM,GAAG,MAAM,GAAG,GAAG,GAAG,QAAQ;QACtC,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,IAAIC,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,SAAS,EAAE,IAAI,CAAC,IAAI,GAAI;AAExD,QAAA,QACEA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAAE,KAAK,EAAE,EAAE,+BAA+B,EAAE,IAAI,CAAC,QAAQ,EAAE,EAAA,EAC5FA,OAAC,CAAA,MAAM,qDACL,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC,EAC/B,IAAI,EAAC,MAAM,EACX,QAAQ,EAAE,QAAQ,GAAG,IAAI,CAAC,QAAQ,GAAG,SAAS,EAC9C,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,SAAS,EAC1C,KAAK,EAAE;AACL,gBAAA,aAAa,EAAE,IAAI;gBACnB,uBAAuB,EAAE,IAAI,CAAC,QAAQ;AACvC,aAAA,EACD,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,SAAS,gBACzB,IAAI,CAAC,KAAK,EACtB,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC,IAAI,GAAG,SAAS,EACpC,MAAM,EAAE,MAAM,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,GAAG,IAAI,CAAC,MAAM,GAAG,SAAS,EAC/D,QAAQ,EAAE,MAAM,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,GAAG,IAAI,CAAC,QAAQ,GAAG,SAAS,EACrE,GAAG,EAAE,MAAM,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,GAAG,qBAAqB,GAAG,SAAS,EAAA,EAEtEA,OAAsB,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,aAAA,EAAA,MAAM,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EACzC,EAAA,IAAI,CAAC,IAAI,CACD,EACXA,OAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EACP,IAAI,CACE,CACL;;;;;;;"}

package/dist/cjs/six-icon.cjs.entry.js

@@ -1,23 +1,31 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-C8rK7OAe.js');
+var icon = require('./icon-4irykc7V.js');
 
-const index = require('./index-417a06c8.js');
-
-const sixIconCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}:host{display:inline-flex;vertical-align:middle}.material-icons{vertical-align:middle;font-weight:normal;font-style:normal;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;font-feature-settings:\"liga\";user-select:none}.material-icons-filled{font-family:\"Material Icons\"}.material-icons-outlined{font-family:\"Material Icons Outlined\"}.icon--xsmall{font-size:12px}.icon--small{font-size:18px}.icon--medium{font-size:24px}.icon--large{font-size:36px}.icon--xlarge{font-size:48px}.icon--xxlarge{font-size:72px}.icon--xxxlarge{font-size:96px}.icon--inherit{font-size:1.5em}";
-const SixIconStyle0 = sixIconCss;
+const sixIconCss = "@charset \"UTF-8\";.material-icons,.material-icons-outlined,.material-icons-filled,.material-symbols-outlined,.material-symbols{display:inline-block;vertical-align:middle;line-height:1;letter-spacing:normal;text-transform:none;word-wrap:normal;white-space:nowrap;direction:ltr;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-feature-settings:\"liga\";font-style:normal;font-weight:normal;font-synthesis-weight:none;user-select:none}.material-icons-filled{font-family:\"Material Icons\"}.material-icons-outlined{font-family:\"Material Icons Outlined\"}.material-symbols-outlined,.material-symbols{font-family:\"Material Symbols Outlined Variable\";font-variation-settings:\"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.material-symbols-outlined{font-variation-settings:\"FILL\" 0, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.material-symbols{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.icon{}.icon--xsmall{font-size:12px}.icon--small{font-size:18px}.icon--medium{font-size:24px}.icon--large{font-size:36px}.icon--xlarge{font-size:48px}.icon--xxlarge{font-size:72px}.icon--xxxlarge{font-size:96px}.icon--inherit{font-size:1.5em}";
 
 const SixIcon = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        /** The icon's size. */
         this.size = 'inherit';
+        /** If set to true the default material outlined icons are not used. */
         this.filled = false;
     }
+    isSymbols() {
+        var _a;
+        const lib = (_a = this.library) !== null && _a !== void 0 ? _a : icon.getDefaultIconLibrary();
+        return lib === 'material-symbols';
+    }
     render() {
-        return (index.h("i", { key: 'e3bdaae941279f36be341a6bbf74a16841dbf5c6', class: {
-                'material-icons': true,
-                'material-icons-outlined': !this.filled,
-                'material-icons-filled': this.filled,
+        const isSymbols = this.isSymbols();
+        return (index.h("i", { key: '16e77cf0c2d44ff84165fdf28bc353c09ac6d36a', class: {
+                'material-icons': !isSymbols,
+                'material-icons-outlined': !isSymbols && !this.filled,
+                'material-icons-filled': !isSymbols && this.filled,
+                'material-symbols-outlined': isSymbols && !this.filled,
+                'material-symbols': isSymbols && this.filled,
                 'icon--xsmall': this.size === 'xSmall',
                 'icon--small': this.size === 'small',
                 'icon--medium': this.size === 'medium',
@@ -26,11 +34,12 @@ const SixIcon = class {
                 'icon--xxlarge': this.size === 'xxLarge',
                 'icon--xxxlarge': this.size === 'xxxLarge',
                 'icon--inherit': this.size === 'inherit',
-            } }, index.h("slot", { key: 'bd0a678f75920a57c6a15ff29d8e97ba31d12bf1' })));
+            } }, index.h("slot", { key: '5f25e9413be4ec300c0b42cfb24115548dd331e1' })));
     }
 };
-SixIcon.style = SixIconStyle0;
+SixIcon.style = sixIconCss;
 
 exports.six_icon = SixIcon;
+//# sourceMappingURL=six-icon.entry.cjs.js.map
 
 //# sourceMappingURL=six-icon.cjs.entry.js.map

package/dist/cjs/six-icon.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"six-icon.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,UAAU,GAAG,2zBAA2zB,CAAC;AAC/0B,sBAAe,UAAU;;MCaZ,OAAO;;;oBAUD,SAAS;sBAGT,KAAK;;IAEtB,MAAM;QACJ,QACEA,gEACE,KAAK,EAAE;gBACL,gBAAgB,EAAE,IAAI;gBACtB,yBAAyB,EAAE,CAAC,IAAI,CAAC,MAAM;gBACvC,uBAAuB,EAAE,IAAI,CAAC,MAAM;gBACpC,cAAc,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;gBACtC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;gBACpC,cAAc,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;gBACtC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;gBACpC,cAAc,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;gBACtC,eAAe,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;gBACxC,gBAAgB,EAAE,IAAI,CAAC,IAAI,KAAK,UAAU;gBAC1C,eAAe,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;aACzC,IAEDA,oEAAa,CACX,EACJ;KACH;;;;;;","names":["h"],"sources":["src/components/six-icon/six-icon.scss?tag=six-icon&encapsulation=shadow","src/components/six-icon/six-icon.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n  display: inline-flex;\n  vertical-align: middle;\n}\n\n.material-icons {\n  vertical-align: middle;\n  font-weight: normal;\n  font-style: normal;\n  text-transform: none;\n  letter-spacing: normal;\n  word-wrap: normal;\n  white-space: nowrap;\n  direction: ltr;\n\n  /* Support for all WebKit browsers. */\n  -webkit-font-smoothing: antialiased;\n  /* Support for Safari and Chrome. */\n  text-rendering: optimizeLegibility;\n\n  /* Support for Firefox. */\n  -moz-osx-font-smoothing: grayscale;\n\n  /* Support for IE. */\n  font-feature-settings: 'liga';\n\n  /* Icon name should not be selectable. */\n  user-select: none;\n}\n\n.material-icons-filled {\n  font-family: 'Material Icons';\n}\n\n.material-icons-outlined {\n  font-family: 'Material Icons Outlined';\n}\n\n.icon {\n  &--xsmall {\n    font-size: 12px;\n  }\n\n  &--small {\n    font-size: 18px;\n  }\n\n  &--medium {\n    font-size: 24px;\n  }\n\n  &--large {\n    font-size: 36px;\n  }\n\n  &--xlarge {\n    font-size: 48px;\n  }\n\n  &--xxlarge {\n    font-size: 72px;\n  }\n\n  &--xxxlarge {\n    font-size: 96px;\n  }\n\n  &--inherit {\n    font-size: 1.5em;\n  }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n/**\n * @since 1.0\n * @status stable\n *\n * @slot - Used to define the material icon name.\n */\n\n@Component({\n  tag: 'six-icon',\n  styleUrls: ['six-icon.scss'],\n  shadow: true,\n})\nexport class SixIcon {\n  /** The icon's size. */\n  @Prop({ reflect: true }) size:\n    | 'inherit'\n    | 'xSmall'\n    | 'small'\n    | 'medium'\n    | 'large'\n    | 'xLarge'\n    | 'xxLarge'\n    | 'xxxLarge' = 'inherit';\n\n  /** If set to true the default material outlined icons are not used. */\n  @Prop() filled = false;\n\n  render() {\n    return (\n      <i\n        class={{\n          'material-icons': true,\n          'material-icons-outlined': !this.filled,\n          'material-icons-filled': this.filled,\n          'icon--xsmall': this.size === 'xSmall',\n          'icon--small': this.size === 'small',\n          'icon--medium': this.size === 'medium',\n          'icon--large': this.size === 'large',\n          'icon--xlarge': this.size === 'xLarge',\n          'icon--xxlarge': this.size === 'xxLarge',\n          'icon--xxxlarge': this.size === 'xxxLarge',\n          'icon--inherit': this.size === 'inherit',\n        }}\n      >\n        <slot></slot>\n      </i>\n    );\n  }\n}\n"],"version":3}
+{"file":"six-icon.entry.cjs.js","mappings":";;;;;AAAA,MAAM,UAAU,GAAG,srCAAsrC;;MCe5rC,OAAO,GAAA,MAAA;AALpB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAO2B,QAAA,IAAI,CAAA,IAAA,GAQZ,SAAS;;AAGlB,QAAA,IAAM,CAAA,MAAA,GAAG,KAAK;AAkDvB;IA/BS,SAAS,GAAA;;QACf,MAAM,GAAG,GAAG,CAAA,EAAA,GAAA,IAAI,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAIA,0BAAqB,EAAE;QACnD,OAAO,GAAG,KAAK,kBAAkB;;IAGnC,MAAM,GAAA;AACJ,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,EAAE;QAClC,QACEC,OACE,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE;gBACL,gBAAgB,EAAE,CAAC,SAAS;AAC5B,gBAAA,yBAAyB,EAAE,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,MAAM;AACrD,gBAAA,uBAAuB,EAAE,CAAC,SAAS,IAAI,IAAI,CAAC,MAAM;AAElD,gBAAA,2BAA2B,EAAE,SAAS,IAAI,CAAC,IAAI,CAAC,MAAM;AACtD,gBAAA,kBAAkB,EAAE,SAAS,IAAI,IAAI,CAAC,MAAM;AAE5C,gBAAA,cAAc,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;AACtC,gBAAA,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;AACpC,gBAAA,cAAc,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;AACtC,gBAAA,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;AACpC,gBAAA,cAAc,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;AACtC,gBAAA,eAAe,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;AACxC,gBAAA,gBAAgB,EAAE,IAAI,CAAC,IAAI,KAAK,UAAU;AAC1C,gBAAA,eAAe,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;AACzC,aAAA,EAAA,EAEDA,OAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACX;;;;;;;","names":["getDefaultIconLibrary","h"],"sources":["src/components/six-icon/six-icon.scss?tag=six-icon&encapsulation=shadow","src/components/six-icon/six-icon.tsx"],"sourcesContent":["/* ==========================================================================\n   Common icon text baseline\n   ========================================================================== */\n\n.material-icons,\n.material-icons-outlined,\n.material-icons-filled,\n.material-symbols-outlined,\n.material-symbols {\n  display: inline-block;\n  vertical-align: middle;\n  line-height: 1;\n  letter-spacing: normal;\n  text-transform: none;\n  word-wrap: normal;\n  white-space: nowrap;\n  direction: ltr;\n\n  /* rendering */\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  text-rendering: optimizeLegibility;\n  font-feature-settings: 'liga';\n  font-style: normal;\n  font-weight: normal;\n  font-synthesis-weight: none;\n  user-select: none;\n}\n\n/* ==========================================================================\n   Material Icons (classic)\n   ========================================================================== */\n\n.material-icons-filled {\n  font-family: 'Material Icons';\n}\n\n.material-icons-outlined {\n  font-family: 'Material Icons Outlined';\n}\n\n/* ==========================================================================\n   Material Symbols (variable font)\n   We always use the \"Outlined Variable\" family and drive style via axes.\n   (One font for both outlined/filled via FILL axis.)\n   ========================================================================== */\n\n.material-symbols-outlined,\n.material-symbols {\n  font-family: 'Material Symbols Outlined Variable';\n\n  /* Base variations shared by both */\n  font-variation-settings:\n    'wght' 400,\n    'GRAD' 0,\n    'opsz' 24;\n}\n\n/* Outlined → FILL 0 */\n.material-symbols-outlined {\n  font-variation-settings:\n    'FILL' 0,\n    'wght' 400,\n    'GRAD' 0,\n    'opsz' 24;\n}\n\n/* Filled → FILL 1 */\n.material-symbols {\n  font-variation-settings:\n    'FILL' 1,\n    'wght' 400,\n    'GRAD' 0,\n    'opsz' 24;\n}\n\n/* ==========================================================================\n   Size helpers (unchanged API, a bit more explicit)\n   ========================================================================== */\n\n.icon {\n  &--xsmall {\n    font-size: 12px;\n  }\n  &--small {\n    font-size: 18px;\n  }\n  &--medium {\n    font-size: 24px;\n  } /* default in Google’s docs */\n  &--large {\n    font-size: 36px;\n  }\n  &--xlarge {\n    font-size: 48px;\n  }\n  &--xxlarge {\n    font-size: 72px;\n  }\n  &--xxxlarge {\n    font-size: 96px;\n  }\n  &--inherit {\n    font-size: 1.5em;\n  }\n}\n","import { Component, h, Prop } from '@stencil/core';\nimport { getDefaultIconLibrary, IconLibrary } from '../../utils/icon';\n\n/**\n * @since 1.0\n * @status stable\n *\n * @slot - Used to define the material icon name.\n */\n\n@Component({\n  tag: 'six-icon',\n  styleUrls: ['six-icon.scss'],\n  shadow: true,\n})\nexport class SixIcon {\n  /** The icon's size. */\n  @Prop({ reflect: true }) size:\n    | 'inherit'\n    | 'xSmall'\n    | 'small'\n    | 'medium'\n    | 'large'\n    | 'xLarge'\n    | 'xxLarge'\n    | 'xxxLarge' = 'inherit';\n\n  /** If set to true the default material outlined icons are not used. */\n  @Prop() filled = false;\n\n  /**\n   * Icon library to use when no `library` prop is provided.\n   * By default, all `<six-icon>` instances fall back to the globally configured\n   * default library (via `setDefaultIconLibrary()` / `getDefaultIconLibrary()`),\n   * which is `\"material-icons\"` unless changed at runtime.\n   *\n   * This allows teams to switch the default across an entire project without\n   * having to set the `library` prop on every `<six-icon>` instance.\n   */\n\n  /**\n   * Icon library for this instance. Overrides the global default.\n   * - \"material-icons\"  → Material Icons\n   * - \"material-symbols\"  → Material Symbols\n   */\n  @Prop({ reflect: true }) library?: IconLibrary;\n\n  private isSymbols(): boolean {\n    const lib = this.library ?? getDefaultIconLibrary();\n    return lib === 'material-symbols';\n  }\n\n  render() {\n    const isSymbols = this.isSymbols();\n    return (\n      <i\n        class={{\n          'material-icons': !isSymbols,\n          'material-icons-outlined': !isSymbols && !this.filled,\n          'material-icons-filled': !isSymbols && this.filled,\n\n          'material-symbols-outlined': isSymbols && !this.filled,\n          'material-symbols': isSymbols && this.filled,\n\n          'icon--xsmall': this.size === 'xSmall',\n          'icon--small': this.size === 'small',\n          'icon--medium': this.size === 'medium',\n          'icon--large': this.size === 'large',\n          'icon--xlarge': this.size === 'xLarge',\n          'icon--xxlarge': this.size === 'xxLarge',\n          'icon--xxxlarge': this.size === 'xxxLarge',\n          'icon--inherit': this.size === 'inherit',\n        }}\n      >\n        <slot></slot>\n      </i>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/six-icon.entry.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"six-icon.entry.cjs.js","sources":["src/components/six-icon/six-icon.scss?tag=six-icon&encapsulation=shadow","src/components/six-icon/six-icon.tsx"],"sourcesContent":["/* ==========================================================================\n   Common icon text baseline\n   ========================================================================== */\n\n.material-icons,\n.material-icons-outlined,\n.material-icons-filled,\n.material-symbols-outlined,\n.material-symbols {\n  display: inline-block;\n  vertical-align: middle;\n  line-height: 1;\n  letter-spacing: normal;\n  text-transform: none;\n  word-wrap: normal;\n  white-space: nowrap;\n  direction: ltr;\n\n  /* rendering */\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  text-rendering: optimizeLegibility;\n  font-feature-settings: 'liga';\n  font-style: normal;\n  font-weight: normal;\n  font-synthesis-weight: none;\n  user-select: none;\n}\n\n/* ==========================================================================\n   Material Icons (classic)\n   ========================================================================== */\n\n.material-icons-filled {\n  font-family: 'Material Icons';\n}\n\n.material-icons-outlined {\n  font-family: 'Material Icons Outlined';\n}\n\n/* ==========================================================================\n   Material Symbols (variable font)\n   We always use the \"Outlined Variable\" family and drive style via axes.\n   (One font for both outlined/filled via FILL axis.)\n   ========================================================================== */\n\n.material-symbols-outlined,\n.material-symbols {\n  font-family: 'Material Symbols Outlined Variable';\n\n  /* Base variations shared by both */\n  font-variation-settings:\n    'wght' 400,\n    'GRAD' 0,\n    'opsz' 24;\n}\n\n/* Outlined → FILL 0 */\n.material-symbols-outlined {\n  font-variation-settings:\n    'FILL' 0,\n    'wght' 400,\n    'GRAD' 0,\n    'opsz' 24;\n}\n\n/* Filled → FILL 1 */\n.material-symbols {\n  font-variation-settings:\n    'FILL' 1,\n    'wght' 400,\n    'GRAD' 0,\n    'opsz' 24;\n}\n\n/* ==========================================================================\n   Size helpers (unchanged API, a bit more explicit)\n   ========================================================================== */\n\n.icon {\n  &--xsmall {\n    font-size: 12px;\n  }\n  &--small {\n    font-size: 18px;\n  }\n  &--medium {\n    font-size: 24px;\n  } /* default in Google’s docs */\n  &--large {\n    font-size: 36px;\n  }\n  &--xlarge {\n    font-size: 48px;\n  }\n  &--xxlarge {\n    font-size: 72px;\n  }\n  &--xxxlarge {\n    font-size: 96px;\n  }\n  &--inherit {\n    font-size: 1.5em;\n  }\n}\n","import { Component, h, Prop } from '@stencil/core';\nimport { getDefaultIconLibrary, IconLibrary } from '../../utils/icon';\n\n/**\n * @since 1.0\n * @status stable\n *\n * @slot - Used to define the material icon name.\n */\n\n@Component({\n  tag: 'six-icon',\n  styleUrls: ['six-icon.scss'],\n  shadow: true,\n})\nexport class SixIcon {\n  /** The icon's size. */\n  @Prop({ reflect: true }) size:\n    | 'inherit'\n    | 'xSmall'\n    | 'small'\n    | 'medium'\n    | 'large'\n    | 'xLarge'\n    | 'xxLarge'\n    | 'xxxLarge' = 'inherit';\n\n  /** If set to true the default material outlined icons are not used. */\n  @Prop() filled = false;\n\n  /**\n   * Icon library to use when no `library` prop is provided.\n   * By default, all `<six-icon>` instances fall back to the globally configured\n   * default library (via `setDefaultIconLibrary()` / `getDefaultIconLibrary()`),\n   * which is `\"material-icons\"` unless changed at runtime.\n   *\n   * This allows teams to switch the default across an entire project without\n   * having to set the `library` prop on every `<six-icon>` instance.\n   */\n\n  /**\n   * Icon library for this instance. Overrides the global default.\n   * - \"material-icons\"  → Material Icons\n   * - \"material-symbols\"  → Material Symbols\n   */\n  @Prop({ reflect: true }) library?: IconLibrary;\n\n  private isSymbols(): boolean {\n    const lib = this.library ?? getDefaultIconLibrary();\n    return lib === 'material-symbols';\n  }\n\n  render() {\n    const isSymbols = this.isSymbols();\n    return (\n      <i\n        class={{\n          'material-icons': !isSymbols,\n          'material-icons-outlined': !isSymbols && !this.filled,\n          'material-icons-filled': !isSymbols && this.filled,\n\n          'material-symbols-outlined': isSymbols && !this.filled,\n          'material-symbols': isSymbols && this.filled,\n\n          'icon--xsmall': this.size === 'xSmall',\n          'icon--small': this.size === 'small',\n          'icon--medium': this.size === 'medium',\n          'icon--large': this.size === 'large',\n          'icon--xlarge': this.size === 'xLarge',\n          'icon--xxlarge': this.size === 'xxLarge',\n          'icon--xxxlarge': this.size === 'xxxLarge',\n          'icon--inherit': this.size === 'inherit',\n        }}\n      >\n        <slot></slot>\n      </i>\n    );\n  }\n}\n"],"names":["getDefaultIconLibrary","h"],"mappings":";;;;;AAAA,MAAM,UAAU,GAAG,srCAAsrC;;MCe5rC,OAAO,GAAA,MAAA;AALpB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAO2B,QAAA,IAAI,CAAA,IAAA,GAQZ,SAAS;;AAGlB,QAAA,IAAM,CAAA,MAAA,GAAG,KAAK;AAkDvB;IA/BS,SAAS,GAAA;;QACf,MAAM,GAAG,GAAG,CAAA,EAAA,GAAA,IAAI,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAIA,0BAAqB,EAAE;QACnD,OAAO,GAAG,KAAK,kBAAkB;;IAGnC,MAAM,GAAA;AACJ,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,EAAE;QAClC,QACEC,OACE,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE;gBACL,gBAAgB,EAAE,CAAC,SAAS;AAC5B,gBAAA,yBAAyB,EAAE,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,MAAM;AACrD,gBAAA,uBAAuB,EAAE,CAAC,SAAS,IAAI,IAAI,CAAC,MAAM;AAElD,gBAAA,2BAA2B,EAAE,SAAS,IAAI,CAAC,IAAI,CAAC,MAAM;AACtD,gBAAA,kBAAkB,EAAE,SAAS,IAAI,IAAI,CAAC,MAAM;AAE5C,gBAAA,cAAc,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;AACtC,gBAAA,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;AACpC,gBAAA,cAAc,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;AACtC,gBAAA,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;AACpC,gBAAA,cAAc,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;AACtC,gBAAA,eAAe,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;AACxC,gBAAA,gBAAgB,EAAE,IAAI,CAAC,IAAI,KAAK,UAAU;AAC1C,gBAAA,eAAe,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;AACzC,aAAA,EAAA,EAEDA,OAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACX;;;;;;;"}