@ukic/canary-web-components 2.0.0-canary.9 → 3.0.0-canary.2

package/dist/components/ic-switch.js.map

@@ -1 +1 @@
-{"file":"ic-switch.js","mappings":"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","names":[],"sources":["../web-components/dist/collection/components/ic-switch/ic-switch.css?tag=ic-switch&encapsulation=shadow","../web-components/dist/collection/components/ic-switch/ic-switch.js"],"sourcesContent":["/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */\n\n/* Document\n   ========================================================================== */\n\n/**\n * 1. Correct the line height in all browsers.\n * 2. Prevent adjustments of font size after orientation changes in iOS.\n */\n\nhtml {\n  line-height: 1.15; /* 1 */\n  -webkit-text-size-adjust: 100%; /* 2 */\n}\n\n/* Sections\n     ========================================================================== */\n\n/**\n   * Remove the margin in all browsers.\n   */\n\nbody {\n  margin: 0;\n}\n\n/**\n   * Render the `main` element consistently in IE.\n   */\n\nmain {\n  display: block;\n}\n\n/**\n   * Correct the font size and margin on `h1` elements within `section` and\n   * `article` contexts in Chrome, Firefox, and Safari.\n   */\n\nh1 {\n  font-size: 2em;\n  margin: 0.67em 0;\n}\n\n/* Grouping content\n     ========================================================================== */\n\n/**\n   * 1. Add the correct box sizing in Firefox.\n   * 2. Show the overflow in Edge and IE.\n   */\n\nhr {\n  box-sizing: content-box; /* 1 */\n  height: 0; /* 1 */\n  overflow: visible; /* 2 */\n}\n\n/**\n   * 1. Correct the inheritance and scaling of font size in all browsers.\n   * 2. Correct the odd `em` font sizing in all browsers.\n   */\n\npre {\n  font-family: monospace, monospace; /* 1 */\n  font-size: 1em; /* 2 */\n}\n\n/* Text-level semantics\n     ========================================================================== */\n\n/**\n   * Remove the gray background on active links in IE 10.\n   */\n\na {\n  background-color: transparent;\n}\n\n/**\n   * 1. Remove the bottom border in Chrome 57-\n   * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.\n   */\n\nabbr[title] {\n  border-bottom: none; /* 1 */\n  text-decoration: underline; /* 2 */\n  -webkit-text-decoration: underline dotted;\n          text-decoration: underline dotted; /* 2 */\n}\n\n/**\n   * Add the correct font weight in Chrome, Edge, and Safari.\n   */\n\nb,\nstrong {\n  font-weight: bolder;\n}\n\n/**\n   * 1. Correct the inheritance and scaling of font size in all browsers.\n   * 2. Correct the odd `em` font sizing in all browsers.\n   */\n\ncode,\nkbd,\nsamp {\n  font-family: monospace, monospace; /* 1 */\n  font-size: 1em; /* 2 */\n}\n\n/**\n   * Add the correct font size in all browsers.\n   */\n\nsmall {\n  font-size: 80%;\n}\n\n/**\n   * Prevent `sub` and `sup` elements from affecting the line height in\n   * all browsers.\n   */\n\nsub,\nsup {\n  font-size: 75%;\n  line-height: 0;\n  position: relative;\n  vertical-align: baseline;\n}\n\nsub {\n  bottom: -0.25em;\n}\n\nsup {\n  top: -0.5em;\n}\n\n/* Embedded content\n     ========================================================================== */\n\n/**\n   * Remove the border on images inside links in IE 10.\n   */\n\nimg {\n  border-style: none;\n}\n\n/* Forms\n     ========================================================================== */\n\n/**\n   * 1. Change the font styles in all browsers.\n   * 2. Remove the margin in Firefox and Safari.\n   */\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n  font-family: inherit; /* 1 */\n  font-size: 100%; /* 1 */\n  line-height: 1.15; /* 1 */\n  margin: 0; /* 2 */\n}\n\n/**\n   * Show the overflow in IE.\n   * 1. Show the overflow in Edge.\n   */\n\nbutton,\ninput {\n  /* 1 */\n  overflow: visible;\n}\n\n/**\n   * Remove the inheritance of text transform in Edge, Firefox, and IE.\n   * 1. Remove the inheritance of text transform in Firefox.\n   */\n\nbutton,\nselect {\n  /* 1 */\n  text-transform: none;\n}\n\n/**\n   * Correct the inability to style clickable types in iOS and Safari.\n   */\n\nbutton,\n[type=\"button\"],\n[type=\"reset\"],\n[type=\"submit\"] {\n  -webkit-appearance: button;\n}\n\n/**\n   * Remove the inner border and padding in Firefox.\n   */\n\nbutton::-moz-focus-inner,\n[type=\"button\"]::-moz-focus-inner,\n[type=\"reset\"]::-moz-focus-inner,\n[type=\"submit\"]::-moz-focus-inner {\n  border-style: none;\n  padding: 0;\n}\n\n/**\n   * Restore the focus styles unset by the previous rule.\n   */\n\nbutton:-moz-focusring,\n[type=\"button\"]:-moz-focusring,\n[type=\"reset\"]:-moz-focusring,\n[type=\"submit\"]:-moz-focusring {\n  outline: 1px dotted ButtonText;\n}\n\n/**\n   * Correct the padding in Firefox.\n   */\n\nfieldset {\n  padding: 0.35em 0.75em 0.625em;\n}\n\n/**\n   * 1. Correct the text wrapping in Edge and IE.\n   * 2. Correct the color inheritance from `fieldset` elements in IE.\n   * 3. Remove the padding so developers are not caught out when they zero out\n   *    `fieldset` elements in all browsers.\n   */\n\nlegend {\n  box-sizing: border-box; /* 1 */\n  color: inherit; /* 2 */\n  display: table; /* 1 */\n  max-width: 100%; /* 1 */\n  padding: 0; /* 3 */\n  white-space: normal; /* 1 */\n}\n\n/**\n   * Add the correct vertical alignment in Chrome, Firefox, and Opera.\n   */\n\nprogress {\n  vertical-align: baseline;\n}\n\n/**\n   * Remove the default vertical scrollbar in IE 10+.\n   */\n\ntextarea {\n  overflow: auto;\n}\n\n/**\n   * 1. Add the correct box sizing in IE 10.\n   * 2. Remove the padding in IE 10.\n   */\n\n[type=\"checkbox\"],\n[type=\"radio\"] {\n  box-sizing: border-box; /* 1 */\n  padding: 0; /* 2 */\n}\n\n/**\n   * Correct the cursor style of increment and decrement buttons in Chrome.\n   */\n\n[type=\"number\"]::-webkit-inner-spin-button,\n[type=\"number\"]::-webkit-outer-spin-button {\n  height: auto;\n}\n\n/**\n   * 1. Correct the odd appearance in Chrome and Safari.\n   * 2. Correct the outline style in Safari.\n   */\n\n[type=\"search\"] {\n  -webkit-appearance: textfield; /* 1 */\n  outline-offset: -2px; /* 2 */\n}\n\n/**\n   * Remove the inner padding in Chrome and Safari on macOS.\n   */\n\n[type=\"search\"]::-webkit-search-decoration {\n  -webkit-appearance: none;\n}\n\n/**\n   * 1. Correct the inability to style clickable types in iOS and Safari.\n   * 2. Change font properties to `inherit` in Safari.\n   */\n\n::-webkit-file-upload-button {\n  -webkit-appearance: button; /* 1 */\n  font: inherit; /* 2 */\n}\n\n/* Interactive\n     ========================================================================== */\n\n/*\n   * Add the correct display in Edge, IE 10+, and Firefox.\n   */\n\ndetails {\n  display: block;\n}\n\n/*\n   * Add the correct display in all browsers.\n   */\n\nsummary {\n  display: list-item;\n}\n\n/* Misc\n     ========================================================================== */\n\n/**\n   * Add the correct display in IE 10+.\n   */\n\ntemplate {\n  display: none;\n}\n\n/**\n   * Add the correct display in IE 10.\n   */\n\n[hidden] {\n  display: none;\n}\n\nhtml,\nbody,\ndiv,\nspan,\napplet,\nobject,\niframe,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\np,\nblockquote,\npre,\na,\nabbr,\nacronym,\naddress,\nbig,\ncite,\ncode,\ndel,\ndfn,\nem,\nimg,\nins,\nkbd,\nq,\ns,\nsamp,\nsmall,\nstrike,\nstrong,\nsub,\nsup,\ntt,\nvar,\nb,\nu,\ni,\ncenter,\ndl,\ndt,\ndd,\nol,\nul,\nli,\nfieldset,\nform,\nlabel,\nlegend,\ntable,\ncaption,\ntbody,\ntfoot,\nthead,\ntr,\nth,\ntd,\narticle,\naside,\ncanvas,\ndetails,\nembed,\nfigure,\nfigcaption,\nfooter,\nheader,\nhgroup,\nmenu,\nnav,\noutput,\nruby,\nsection,\nsummary,\ntime,\nmark,\naudio,\nvideo {\n  margin: 0;\n  padding: 0;\n  border: 0;\n  font-size: 100%;\n  font-style: inherit;\n  vertical-align: baseline;\n}\n\n\n:host {\n  display: inline-block;\n}\n\ninput {\n  overflow: hidden;\n  -webkit-appearance: none;\n     -moz-appearance: none;\n          appearance: none;\n}\n\n.ic-switch-container {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--ic-space-xxs);\n  cursor: pointer;\n}\n\n.ic-switch-label {\n  margin-left: var(--ic-space-xxs);\n  margin-bottom: var(--ic-space-sm);\n}\n\n.ic-switch-label-small {\n  margin-bottom: 0.625rem;\n}\n\n.ic-switch-toggle {\n  display: flex;\n  align-items: center;\n  justify-content: space-around;\n  width: 4rem;\n  height: var(--ic-space-xl);\n  position: relative;\n  border-radius: 100vw;\n  background-color: var(--ic-architectural-200);\n  border: var(--ic-border-width) solid var(--ic-architectural-700);\n  box-sizing: border-box;\n  transition: var(--ic-transition-duration-fast);\n}\n\n.ic-switch-line-break {\n  flex: 1 0 100%;\n}\n\n.ic-switch-checked-status {\n  padding-left: var(--ic-space-xxs);\n  width: var(--ic-space-lg);\n}\n\n.ic-switch-toggle::before {\n  content: \"\";\n  width: 1.333rem;\n  height: 1.333rem;\n  border-radius: 50%;\n  position: absolute;\n  z-index: 2;\n  top: 50%;\n  left: 0.333rem;\n  transform: translate(0, -50%);\n  background-color: var(--ic-architectural-700);\n  transition: var(--ic-transition-duration-slow);\n}\n\n.ic-switch-icon {\n  display: inline-block;\n  vertical-align: middle;\n  width: 0.625rem;\n  height: 0.625rem;\n}\n\n.ic-switch-icon-circle,\n.ic-switch-icon-line {\n  stroke-width: 1;\n}\n\n.ic-switch-icon-circle {\n  stroke: var(--ic-architectural-700);\n}\n\n.ic-switch-icon-line {\n  stroke: var(--ic-architectural-white);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .ic-switch-toggle::before {\n    transition-duration: 0ms;\n  }\n}\n\n.ic-switch-input:checked + .ic-switch-toggle {\n  background-color: var(--ic-action-default);\n  border: none;\n}\n\n.ic-switch-input:checked + .ic-switch-toggle::before {\n  transform: translate(var(--ic-space-xl), -50%);\n  background-color: var(--ic-architectural-white);\n}\n\n.ic-switch-input:not([disabled]) + .ic-switch-toggle:hover::before {\n  box-shadow: 0 0 0 0.75rem var(--ic-action-dark-bg-hover);\n}\n\n.ic-switch-input:not([disabled]) + .ic-switch-toggle:active::before {\n  box-shadow: 0 0 0 0.75rem var(--ic-action-dark-bg-active);\n}\n\n.ic-switch-input:not([disabled]):checked + .ic-switch-toggle:hover::before {\n  box-shadow: 0 0 0 0.75rem var(--ic-action-default-bg-hover);\n}\n\n.ic-switch-input:not([disabled]):checked + .ic-switch-toggle:active::before {\n  box-shadow: 0 0 0 0.75rem var(--ic-action-default-bg-active);\n}\n\n.ic-switch-input:focus:not([disabled]) + .ic-switch-toggle,\n.ic-switch-input:focus-visible:not([disabled]) + .ic-switch-toggle {\n  box-shadow: 0 0 0 var(--ic-space-1px) var(--ic-architectural-white),\n    0 0 0 0.188rem var(--ic-action-default),\n    0 0 0 0.5rem var(--ic-action-default-active-alpha);\n}\n\n.ic-switch-disabled {\n  cursor: default;\n}\n\n.ic-switch-disabled .ic-switch-icon-circle {\n  stroke: var(--ic-architectural-300);\n}\n\n.ic-switch-disabled .ic-switch-icon-line {\n  stroke: var(--ic-action-default-bg-active);\n}\n\n.ic-switch-input:disabled + .ic-switch-toggle {\n  background-color: var(--ic-architectural-80);\n  border: var(--ic-border-disabled);\n}\n\n.ic-switch-input:disabled ~ .ic-switch-checked-status {\n  color: var(--ic-architectural-300);\n}\n\n.ic-switch-input:disabled + .ic-switch-toggle::before {\n  background-color: var(--ic-architectural-300);\n}\n\n.ic-switch-input:disabled:checked + .ic-switch-toggle {\n  background-color: var(--ic-status-info-light);\n  border: var(--ic-border-width) dashed #98c9f5;\n}\n\n.ic-switch-input:disabled:checked + .ic-switch-toggle::before {\n  background-color: var(--ic-architectural-white);\n}\n\n.ic-switch-small {\n  gap: var(--ic-space-xxxs);\n}\n\n.ic-switch-small .ic-switch-checked-status {\n  padding-left: 0.375rem;\n}\n\n.ic-switch-small .ic-switch-toggle {\n  width: var(--ic-space-xxl);\n  height: var(--ic-space-lg);\n}\n\n.ic-switch-small .ic-switch-toggle::before {\n  width: var(--ic-space-md);\n  height: var(--ic-space-md);\n  left: var(--ic-space-xxs);\n}\n\n.ic-switch-small .ic-switch-input:checked + .ic-switch-toggle::before {\n  transform: translate(var(--ic-space-lg), -50%);\n}\n\n::slotted(*) {\n  margin-left: var(--ic-space-sm);\n}\n\n::slotted(svg) {\n  fill: currentcolor;\n}\n\n@media (forced-colors: active) {\n  .ic-switch-toggle::before,\n  .ic-switch-input:checked + .ic-switch-toggle {\n    border: var(--ic-hc-border);\n  }\n\n  .ic-switch-input:checked + .ic-switch-toggle::before {\n    transform: translate(calc(var(--ic-space-xl) - 0.125rem), -50%);\n  }\n\n  .ic-switch-input:disabled + .ic-switch-toggle,\n  .ic-switch-input:disabled:checked + .ic-switch-toggle,\n  .ic-switch-input:disabled + .ic-switch-toggle::before {\n    border-color: GrayText;\n  }\n\n  .ic-switch-input:disabled ~ .ic-switch-checked-status {\n    color: GrayText;\n  }\n\n  .ic-switch-disabled .ic-switch-icon-circle,\n  .ic-switch-disabled .ic-switch-icon-line {\n    stroke: GrayText;\n  }\n}\n","import { Host, h, } from \"@stencil/core\";\nimport { getInputDescribedByText, onComponentRequiredPropUndefined, renderHiddenInput, addFormResetListener, removeFormResetListener, removeDisabledFalse, } from \"../../utils/helpers\";\nlet inputIds = 0;\n/**\n * @slot right-adornment - Content is placed to the right of switch before state label.\n */\nexport class Switch {\n    constructor() {\n        this.inputId = `ic-switch-input-${inputIds++}`;\n        this.handleChange = () => {\n            this.checkedState = !this.checkedState;\n            this.icChange.emit({\n                checked: this.checkedState,\n                value: this.value,\n            });\n        };\n        this.onFocus = () => {\n            this.icFocus.emit();\n        };\n        this.onBlur = () => {\n            this.icBlur.emit();\n        };\n        this.handleFormReset = () => {\n            this.checkedState = this.initiallyChecked;\n        };\n        this.checkedState = false;\n        this.initiallyChecked = this.checked;\n        this.checked = false;\n        this.disabled = false;\n        this.helperText = \"\";\n        this.hideLabel = false;\n        this.label = undefined;\n        this.name = this.inputId;\n        this.showState = false;\n        this.size = \"default\";\n        this.small = false;\n        this.value = \"on\";\n    }\n    checkedChangeHandler() {\n        this.checkedState = this.checked;\n    }\n    disconnectedCallback() {\n        removeFormResetListener(this.el, this.handleFormReset);\n    }\n    componentWillLoad() {\n        this.checkedState = this.checked;\n        addFormResetListener(this.el, this.handleFormReset);\n        removeDisabledFalse(this.disabled, this.el);\n    }\n    componentDidLoad() {\n        onComponentRequiredPropUndefined([{ prop: this.label, propName: \"label\" }], \"Switch\");\n    }\n    /**\n     * Sets focus on the switch.\n     */\n    async setFocus() {\n        if (this.el.shadowRoot.querySelector(\"input\")) {\n            this.el.shadowRoot.querySelector(\"input\").focus();\n        }\n    }\n    render() {\n        const { label, checkedState, small, size, disabled, name, showState, value, hideLabel, helperText, inputId, } = this;\n        renderHiddenInput(true, this.el, name, checkedState ? value : \"\", disabled);\n        const describedBy = getInputDescribedByText(inputId, helperText !== \"\", false);\n        return (h(Host, null, h(\"label\", { class: {\n                [\"ic-switch-container\"]: true,\n                [\"ic-switch-disabled\"]: disabled,\n                [\"ic-switch-small\"]: small || size === \"small\",\n            }, htmlFor: inputId }, !hideLabel && (h(\"ic-input-label\", { for: inputId, label: label, helperText: helperText, readonly: true, disabled: disabled, class: {\n                [\"ic-switch-label\"]: true,\n                [\"ic-switch-label-small\"]: small || size === \"small\",\n            } })), !hideLabel && h(\"span\", { class: \"ic-switch-line-break\" }), h(\"input\", { checked: checkedState, disabled: disabled, \"aria-label\": label, \"aria-checked\": checkedState ? \"true\" : \"false\", \"aria-describedby\": describedBy, role: \"switch\", class: \"ic-switch-input\", type: \"checkbox\", name: \"toggle\", id: inputId, onFocus: this.onFocus, onBlur: this.onBlur, onChange: this.handleChange }), h(\"span\", { class: \"ic-switch-toggle\" }, h(\"svg\", { class: \"ic-switch-icon\", \"aria-hidden\": \"true\", focusable: \"false\", viewBox: \"0 0 10 10\", xmlns: \"http://www.w3.org/2000/svg\" }, h(\"line\", { class: \"ic-switch-icon-line\", x1: \"9\", y1: small || size === \"small\" ? \"2\" : \"1\", x2: \"9\", y2: small || size === \"small\" ? \"8\" : \"9\" })), h(\"svg\", { class: \"ic-switch-icon\", \"aria-hidden\": \"true\", focusable: \"false\", viewBox: \"0 0 10 10\", xmlns: \"http://www.w3.org/2000/svg\" }, h(\"circle\", { class: \"ic-switch-icon-circle\", fill: \"none\", cx: \"5\", cy: \"5\", r: small || size === \"small\" ? \"3.335\" : \"4.445\" }))), h(\"slot\", { name: \"right-adornment\" }), showState && (h(\"ic-typography\", { \"aria-hidden\": \"true\", variant: \"label\", class: \"ic-switch-checked-status\" }, checkedState ? \"On\" : \"Off\")))));\n    }\n    static get is() { return \"ic-switch\"; }\n    static get encapsulation() { return \"shadow\"; }\n    static get delegatesFocus() { return true; }\n    static get originalStyleUrls() {\n        return {\n            \"$\": [\"ic-switch.css\"]\n        };\n    }\n    static get styleUrls() {\n        return {\n            \"$\": [\"ic-switch.css\"]\n        };\n    }\n    static get properties() {\n        return {\n            \"checked\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"If `true`, the switch will display as checked.\"\n                },\n                \"attribute\": \"checked\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            },\n            \"disabled\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"If `true`, the disabled state will be set.\"\n                },\n                \"attribute\": \"disabled\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            },\n            \"helperText\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"string\",\n                    \"resolved\": \"string\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The helper text that will be displayed for additional field guidance.\"\n                },\n                \"attribute\": \"helper-text\",\n                \"reflect\": false,\n                \"defaultValue\": \"\\\"\\\"\"\n            },\n            \"hideLabel\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"If `true`, the label will be hidden and the required label value will be applied as an aria-label.\"\n                },\n                \"attribute\": \"hide-label\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            },\n            \"label\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"string\",\n                    \"resolved\": \"string\",\n                    \"references\": {}\n                },\n                \"required\": true,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The aria-label applied to the switch when no visual 'name' is provided.\"\n                },\n                \"attribute\": \"label\",\n                \"reflect\": false\n            },\n            \"name\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"string\",\n                    \"resolved\": \"string\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The name of the control, which is submitted with the form data.\"\n                },\n                \"attribute\": \"name\",\n                \"reflect\": false,\n                \"defaultValue\": \"this.inputId\"\n            },\n            \"showState\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"If `true`, the switch will render the On/Off state text.\"\n                },\n                \"attribute\": \"show-state\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            },\n            \"size\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"IcSizesNoLarge\",\n                    \"resolved\": \"\\\"default\\\" | \\\"small\\\"\",\n                    \"references\": {\n                        \"IcSizesNoLarge\": {\n                            \"location\": \"import\",\n                            \"path\": \"../../utils/types\",\n                            \"id\": \"src/utils/types.ts::IcSizesNoLarge\"\n                        }\n                    }\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The size of the switch component.\"\n                },\n                \"attribute\": \"size\",\n                \"reflect\": false,\n                \"defaultValue\": \"\\\"default\\\"\"\n            },\n            \"small\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [{\n                            \"name\": \"deprecated\",\n                            \"text\": \"This prop should not be used anymore. Set prop `size` to \\\"small\\\" instead.\"\n                        }],\n                    \"text\": \"\"\n                },\n                \"attribute\": \"small\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            },\n            \"value\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"string | null\",\n                    \"resolved\": \"string\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The value of the toggle does not mean if it's checked or not, use the `checked`\\nproperty for that.\\n\\nThe value of a toggle is analogous to the value of a `<input type=\\\"checkbox\\\">`,\\nit's only used when the toggle participates in a native `<form>`.\"\n                },\n                \"attribute\": \"value\",\n                \"reflect\": false,\n                \"defaultValue\": \"\\\"on\\\"\"\n            }\n        };\n    }\n    static get states() {\n        return {\n            \"checkedState\": {},\n            \"initiallyChecked\": {}\n        };\n    }\n    static get events() {\n        return [{\n                \"method\": \"icBlur\",\n                \"name\": \"icBlur\",\n                \"bubbles\": true,\n                \"cancelable\": true,\n                \"composed\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Emitted when the toggle loses focus.\"\n                },\n                \"complexType\": {\n                    \"original\": \"void\",\n                    \"resolved\": \"void\",\n                    \"references\": {}\n                }\n            }, {\n                \"method\": \"icChange\",\n                \"name\": \"icChange\",\n                \"bubbles\": true,\n                \"cancelable\": true,\n                \"composed\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Emitted when the value property has changed.\"\n                },\n                \"complexType\": {\n                    \"original\": \"IcSwitchChangeEventDetail\",\n                    \"resolved\": \"IcSwitchChangeEventDetail\",\n                    \"references\": {\n                        \"IcSwitchChangeEventDetail\": {\n                            \"location\": \"import\",\n                            \"path\": \"./ic-switch.types\",\n                            \"id\": \"src/components/ic-switch/ic-switch.types.ts::IcSwitchChangeEventDetail\"\n                        }\n                    }\n                }\n            }, {\n                \"method\": \"icFocus\",\n                \"name\": \"icFocus\",\n                \"bubbles\": true,\n                \"cancelable\": true,\n                \"composed\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Emitted when the toggle has focus.\"\n                },\n                \"complexType\": {\n                    \"original\": \"void\",\n                    \"resolved\": \"void\",\n                    \"references\": {}\n                }\n            }];\n    }\n    static get methods() {\n        return {\n            \"setFocus\": {\n                \"complexType\": {\n                    \"signature\": \"() => Promise<void>\",\n                    \"parameters\": [],\n                    \"references\": {\n                        \"Promise\": {\n                            \"location\": \"global\",\n                            \"id\": \"global::Promise\"\n                        }\n                    },\n                    \"return\": \"Promise<void>\"\n                },\n                \"docs\": {\n                    \"text\": \"Sets focus on the switch.\",\n                    \"tags\": []\n                }\n            }\n        };\n    }\n    static get elementRef() { return \"el\"; }\n    static get watchers() {\n        return [{\n                \"propName\": \"checked\",\n                \"methodName\": \"checkedChangeHandler\"\n            }];\n    }\n}\n//# sourceMappingURL=ic-switch.js.map\n"],"version":3}
+{"file":"ic-switch.js","mappings":"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","names":[],"sources":["../web-components/dist/collection/components/ic-switch/ic-switch.css?tag=ic-switch&encapsulation=shadow","../web-components/dist/collection/components/ic-switch/ic-switch.js"],"sourcesContent":["/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */\n\n/* Document\n   ========================================================================== */\n\n/**\n * 1. Correct the line height in all browsers.\n * 2. Prevent adjustments of font size after orientation changes in iOS.\n */\n\nhtml {\n  line-height: 1.15; /* 1 */\n  -webkit-text-size-adjust: 100%; /* 2 */\n}\n\n/* Sections\n     ========================================================================== */\n\n/**\n   * Remove the margin in all browsers.\n   */\n\nbody {\n  margin: 0;\n}\n\n/**\n   * Render the `main` element consistently in IE.\n   */\n\nmain {\n  display: block;\n}\n\n/**\n   * Correct the font size and margin on `h1` elements within `section` and\n   * `article` contexts in Chrome, Firefox, and Safari.\n   */\n\nh1 {\n  font-size: 2em;\n  margin: 0.67em 0;\n}\n\n/* Grouping content\n     ========================================================================== */\n\n/**\n   * 1. Add the correct box sizing in Firefox.\n   * 2. Show the overflow in Edge and IE.\n   */\n\nhr {\n  box-sizing: content-box; /* 1 */\n  height: 0; /* 1 */\n  overflow: visible; /* 2 */\n}\n\n/**\n   * 1. Correct the inheritance and scaling of font size in all browsers.\n   * 2. Correct the odd `em` font sizing in all browsers.\n   */\n\npre {\n  font-family: monospace, monospace; /* 1 */\n  font-size: 1em; /* 2 */\n}\n\n/* Text-level semantics\n     ========================================================================== */\n\n/**\n   * Remove the gray background on active links in IE 10.\n   */\n\na {\n  background-color: transparent;\n}\n\n/**\n   * 1. Remove the bottom border in Chrome 57-\n   * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.\n   */\n\nabbr[title] {\n  border-bottom: none; /* 1 */\n  text-decoration: underline; /* 2 */\n  -webkit-text-decoration: underline dotted;\n          text-decoration: underline dotted; /* 2 */\n}\n\n/**\n   * Add the correct font weight in Chrome, Edge, and Safari.\n   */\n\nb,\nstrong {\n  font-weight: bolder;\n}\n\n/**\n   * 1. Correct the inheritance and scaling of font size in all browsers.\n   * 2. Correct the odd `em` font sizing in all browsers.\n   */\n\ncode,\nkbd,\nsamp {\n  font-family: monospace, monospace; /* 1 */\n  font-size: 1em; /* 2 */\n}\n\n/**\n   * Add the correct font size in all browsers.\n   */\n\nsmall {\n  font-size: 80%;\n}\n\n/**\n   * Prevent `sub` and `sup` elements from affecting the line height in\n   * all browsers.\n   */\n\nsub,\nsup {\n  font-size: 75%;\n  line-height: 0;\n  position: relative;\n  vertical-align: baseline;\n}\n\nsub {\n  bottom: -0.25em;\n}\n\nsup {\n  top: -0.5em;\n}\n\n/* Embedded content\n     ========================================================================== */\n\n/**\n   * Remove the border on images inside links in IE 10.\n   */\n\nimg {\n  border-style: none;\n}\n\n/* Forms\n     ========================================================================== */\n\n/**\n   * 1. Change the font styles in all browsers.\n   * 2. Remove the margin in Firefox and Safari.\n   */\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n  font-family: inherit; /* 1 */\n  font-size: 100%; /* 1 */\n  line-height: 1.15; /* 1 */\n  margin: 0; /* 2 */\n}\n\n/**\n   * Show the overflow in IE.\n   * 1. Show the overflow in Edge.\n   */\n\nbutton,\ninput {\n  /* 1 */\n  overflow: visible;\n}\n\n/**\n   * Remove the inheritance of text transform in Edge, Firefox, and IE.\n   * 1. Remove the inheritance of text transform in Firefox.\n   */\n\nbutton,\nselect {\n  /* 1 */\n  text-transform: none;\n}\n\n/**\n   * Correct the inability to style clickable types in iOS and Safari.\n   */\n\nbutton,\n[type=\"button\"],\n[type=\"reset\"],\n[type=\"submit\"] {\n  -webkit-appearance: button;\n}\n\n/**\n   * Remove the inner border and padding in Firefox.\n   */\n\nbutton::-moz-focus-inner,\n[type=\"button\"]::-moz-focus-inner,\n[type=\"reset\"]::-moz-focus-inner,\n[type=\"submit\"]::-moz-focus-inner {\n  border-style: none;\n  padding: 0;\n}\n\n/**\n   * Restore the focus styles unset by the previous rule.\n   */\n\nbutton:-moz-focusring,\n[type=\"button\"]:-moz-focusring,\n[type=\"reset\"]:-moz-focusring,\n[type=\"submit\"]:-moz-focusring {\n  outline: 1px dotted ButtonText;\n}\n\n/**\n   * Correct the padding in Firefox.\n   */\n\nfieldset {\n  padding: 0.35em 0.75em 0.625em;\n}\n\n/**\n   * 1. Correct the text wrapping in Edge and IE.\n   * 2. Correct the color inheritance from `fieldset` elements in IE.\n   * 3. Remove the padding so developers are not caught out when they zero out\n   *    `fieldset` elements in all browsers.\n   */\n\nlegend {\n  box-sizing: border-box; /* 1 */\n  color: inherit; /* 2 */\n  display: table; /* 1 */\n  max-width: 100%; /* 1 */\n  padding: 0; /* 3 */\n  white-space: normal; /* 1 */\n}\n\n/**\n   * Add the correct vertical alignment in Chrome, Firefox, and Opera.\n   */\n\nprogress {\n  vertical-align: baseline;\n}\n\n/**\n   * Remove the default vertical scrollbar in IE 10+.\n   */\n\ntextarea {\n  overflow: auto;\n}\n\n/**\n   * 1. Add the correct box sizing in IE 10.\n   * 2. Remove the padding in IE 10.\n   */\n\n[type=\"checkbox\"],\n[type=\"radio\"] {\n  box-sizing: border-box; /* 1 */\n  padding: 0; /* 2 */\n}\n\n/**\n   * Correct the cursor style of increment and decrement buttons in Chrome.\n   */\n\n[type=\"number\"]::-webkit-inner-spin-button,\n[type=\"number\"]::-webkit-outer-spin-button {\n  height: auto;\n}\n\n/**\n   * 1. Correct the odd appearance in Chrome and Safari.\n   * 2. Correct the outline style in Safari.\n   */\n\n[type=\"search\"] {\n  -webkit-appearance: textfield; /* 1 */\n  outline-offset: -2px; /* 2 */\n}\n\n/**\n   * Remove the inner padding in Chrome and Safari on macOS.\n   */\n\n[type=\"search\"]::-webkit-search-decoration {\n  -webkit-appearance: none;\n}\n\n/**\n   * 1. Correct the inability to style clickable types in iOS and Safari.\n   * 2. Change font properties to `inherit` in Safari.\n   */\n\n::-webkit-file-upload-button {\n  -webkit-appearance: button; /* 1 */\n  font: inherit; /* 2 */\n}\n\n/* Interactive\n     ========================================================================== */\n\n/*\n   * Add the correct display in Edge, IE 10+, and Firefox.\n   */\n\ndetails {\n  display: block;\n}\n\n/*\n   * Add the correct display in all browsers.\n   */\n\nsummary {\n  display: list-item;\n}\n\n/* Misc\n     ========================================================================== */\n\n/**\n   * Add the correct display in IE 10+.\n   */\n\ntemplate {\n  display: none;\n}\n\n/**\n   * Add the correct display in IE 10.\n   */\n\n[hidden] {\n  display: none;\n}\n\nhtml,\nbody,\ndiv,\nspan,\napplet,\nobject,\niframe,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\np,\nblockquote,\npre,\na,\nabbr,\nacronym,\naddress,\nbig,\ncite,\ncode,\ndel,\ndfn,\nem,\nimg,\nins,\nkbd,\nq,\ns,\nsamp,\nsmall,\nstrike,\nstrong,\nsub,\nsup,\ntt,\nvar,\nb,\nu,\ni,\ncenter,\ndl,\ndt,\ndd,\nol,\nul,\nli,\nfieldset,\nform,\nlabel,\nlegend,\ntable,\ncaption,\ntbody,\ntfoot,\nthead,\ntr,\nth,\ntd,\narticle,\naside,\ncanvas,\ndetails,\nembed,\nfigure,\nfigcaption,\nfooter,\nheader,\nhgroup,\nmenu,\nnav,\noutput,\nruby,\nsection,\nsummary,\ntime,\nmark,\naudio,\nvideo {\n  margin: 0;\n  padding: 0;\n  border: 0;\n  font-size: 100%;\n  font-style: inherit;\n  vertical-align: baseline;\n}\n\n\n:host {\n  display: inline-block;\n}\n\ninput {\n  overflow: hidden;\n  -webkit-appearance: none;\n     -moz-appearance: none;\n          appearance: none;\n}\n\n.ic-switch-container {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--ic-space-xxs);\n  cursor: pointer;\n}\n\n.ic-switch-label {\n  margin-left: var(--ic-space-xxs);\n  margin-bottom: var(--ic-space-sm);\n}\n\n.ic-switch-label-small {\n  margin-bottom: 0.625rem;\n}\n\n.ic-switch-toggle {\n  display: flex;\n  align-items: center;\n  justify-content: space-around;\n  width: 4rem;\n  height: var(--ic-space-xl);\n  position: relative;\n  border-radius: 100vw;\n  background-color: var(--ic-architectural-200);\n  border: var(--ic-border-width) solid var(--ic-architectural-700);\n  box-sizing: border-box;\n  transition: var(--ic-transition-duration-fast);\n}\n\n.ic-switch-line-break {\n  flex: 1 0 100%;\n}\n\n.ic-switch-checked-status {\n  padding-left: var(--ic-space-xxs);\n  width: var(--ic-space-lg);\n}\n\n.ic-switch-toggle::before {\n  content: \"\";\n  width: 1.333rem;\n  height: 1.333rem;\n  border-radius: 50%;\n  position: absolute;\n  z-index: 2;\n  top: 50%;\n  left: 0.333rem;\n  transform: translate(0, -50%);\n  background-color: var(--ic-architectural-700);\n  transition: var(--ic-transition-duration-slow);\n}\n\n.ic-switch-icon {\n  display: inline-block;\n  vertical-align: middle;\n  width: 0.625rem;\n  height: 0.625rem;\n}\n\n.ic-switch-icon-circle,\n.ic-switch-icon-line {\n  stroke-width: 1;\n}\n\n.ic-switch-icon-circle {\n  stroke: var(--ic-architectural-700);\n}\n\n.ic-switch-icon-line {\n  stroke: var(--ic-architectural-white);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .ic-switch-toggle::before {\n    transition-duration: 0ms;\n  }\n}\n\n.ic-switch-input:checked + .ic-switch-toggle {\n  background-color: var(--ic-action-default);\n  border: none;\n}\n\n.ic-switch-input:checked + .ic-switch-toggle::before {\n  transform: translate(var(--ic-space-xl), -50%);\n  background-color: var(--ic-architectural-white);\n}\n\n.ic-switch-input:not([disabled]) + .ic-switch-toggle:hover::before {\n  box-shadow: 0 0 0 0.75rem var(--ic-action-dark-bg-hover);\n}\n\n.ic-switch-input:not([disabled]) + .ic-switch-toggle:active::before {\n  box-shadow: 0 0 0 0.75rem var(--ic-action-dark-bg-pressed);\n}\n\n.ic-switch-input:not([disabled]):checked + .ic-switch-toggle:hover::before {\n  box-shadow: 0 0 0 0.75rem var(--ic-action-default-bg-hover);\n}\n\n.ic-switch-input:not([disabled]):checked + .ic-switch-toggle:active::before {\n  box-shadow: 0 0 0 0.75rem var(--ic-action-default-bg-active);\n}\n\n.ic-switch-input:focus:not([disabled]) + .ic-switch-toggle,\n.ic-switch-input:focus-visible:not([disabled]) + .ic-switch-toggle {\n  box-shadow: var(--ic-border-focus);\n}\n\n.ic-switch-disabled {\n  cursor: default;\n}\n\n.ic-switch-disabled .ic-switch-icon-circle {\n  stroke: var(--ic-architectural-300);\n}\n\n.ic-switch-disabled .ic-switch-icon-line {\n  stroke: var(--ic-action-default-bg-active);\n}\n\n.ic-switch-input:disabled + .ic-switch-toggle {\n  background-color: var(--ic-architectural-80);\n  border: var(--ic-border-disabled);\n}\n\n.ic-switch-input:disabled ~ .ic-switch-checked-status {\n  color: var(--ic-architectural-300);\n}\n\n.ic-switch-input:disabled + .ic-switch-toggle::before {\n  background-color: var(--ic-architectural-300);\n}\n\n.ic-switch-input:disabled:checked + .ic-switch-toggle {\n  background-color: var(--ic-status-info-light);\n  border: var(--ic-border-width) dashed #98c9f5;\n}\n\n.ic-switch-input:disabled:checked + .ic-switch-toggle::before {\n  background-color: var(--ic-architectural-white);\n}\n\n.ic-switch-small {\n  gap: var(--ic-space-xxxs);\n}\n\n.ic-switch-small .ic-switch-checked-status {\n  padding-left: 0.375rem;\n}\n\n.ic-switch-small .ic-switch-toggle {\n  width: var(--ic-space-xxl);\n  height: var(--ic-space-lg);\n}\n\n.ic-switch-small .ic-switch-toggle::before {\n  width: var(--ic-space-md);\n  height: var(--ic-space-md);\n  left: var(--ic-space-xxs);\n}\n\n.ic-switch-small .ic-switch-input:checked + .ic-switch-toggle::before {\n  transform: translate(var(--ic-space-lg), -50%);\n}\n\n::slotted(*) {\n  margin-left: var(--ic-space-sm);\n}\n\n::slotted(svg) {\n  fill: currentcolor;\n}\n\n@media (forced-colors: active) {\n  .ic-switch-toggle::before,\n  .ic-switch-input:checked + .ic-switch-toggle {\n    border: var(--ic-border-hc);\n  }\n\n  .ic-switch-input:checked + .ic-switch-toggle::before {\n    transform: translate(calc(var(--ic-space-xl) - 0.125rem), -50%);\n  }\n\n  .ic-switch-input:disabled + .ic-switch-toggle,\n  .ic-switch-input:disabled:checked + .ic-switch-toggle,\n  .ic-switch-input:disabled + .ic-switch-toggle::before {\n    border-color: GrayText;\n  }\n\n  .ic-switch-input:disabled ~ .ic-switch-checked-status {\n    color: GrayText;\n  }\n\n  .ic-switch-disabled .ic-switch-icon-circle,\n  .ic-switch-disabled .ic-switch-icon-line {\n    stroke: GrayText;\n  }\n}\n\n/* Add back in after storybook has the `color-scheme: light dark` code */\n\n/* @media (prefers-color-scheme: dark) and (not (forced-colors: active)) {\n  .ic-switch-label .ic-typography-label,\n  ic-input-label .helpertext,\n  .ic-switch-checked-status {\n    color: var(--ic-architectural-white);\n  }\n} */\n","import { Host, h, } from \"@stencil/core\";\nimport { getInputDescribedByText, onComponentRequiredPropUndefined, renderHiddenInput, addFormResetListener, removeFormResetListener, removeDisabledFalse, } from \"../../utils/helpers\";\nlet inputIds = 0;\n/**\n * @slot right-adornment - Content is placed to the right of switch before state label.\n */\nexport class Switch {\n    constructor() {\n        this.inputId = `ic-switch-input-${inputIds++}`;\n        this.handleChange = () => {\n            this.checkedState = !this.checkedState;\n            this.icChange.emit({\n                checked: this.checkedState,\n                value: this.value,\n            });\n        };\n        this.onFocus = () => {\n            this.icFocus.emit();\n        };\n        this.onBlur = () => {\n            this.icBlur.emit();\n        };\n        this.handleFormReset = () => {\n            this.checkedState = this.initiallyChecked;\n        };\n        this.checkedState = false;\n        this.initiallyChecked = this.checked;\n        this.checked = false;\n        this.disabled = false;\n        this.helperText = \"\";\n        this.hideLabel = false;\n        this.label = undefined;\n        this.name = this.inputId;\n        this.showState = false;\n        this.size = \"medium\";\n        this.value = \"on\";\n    }\n    checkedChangeHandler() {\n        this.checkedState = this.checked;\n    }\n    disconnectedCallback() {\n        removeFormResetListener(this.el, this.handleFormReset);\n    }\n    componentWillLoad() {\n        this.checkedState = this.checked;\n        addFormResetListener(this.el, this.handleFormReset);\n        removeDisabledFalse(this.disabled, this.el);\n    }\n    componentDidLoad() {\n        onComponentRequiredPropUndefined([{ prop: this.label, propName: \"label\" }], \"Switch\");\n    }\n    /**\n     * Sets focus on the switch.\n     */\n    async setFocus() {\n        if (this.el.shadowRoot.querySelector(\"input\")) {\n            this.el.shadowRoot.querySelector(\"input\").focus();\n        }\n    }\n    render() {\n        const { label, checkedState, size, disabled, name, showState, value, hideLabel, helperText, inputId, } = this;\n        renderHiddenInput(true, this.el, name, checkedState ? value : \"\", disabled);\n        const describedBy = getInputDescribedByText(inputId, helperText !== \"\", false);\n        return (h(Host, null, h(\"label\", { class: {\n                [\"ic-switch-container\"]: true,\n                [\"ic-switch-disabled\"]: disabled,\n                [\"ic-switch-small\"]: size === \"small\",\n            }, htmlFor: inputId }, !hideLabel && (h(\"ic-input-label\", { for: inputId, label: label, helperText: helperText, readonly: true, disabled: disabled, class: {\n                [\"ic-switch-label\"]: true,\n                [\"ic-switch-label-small\"]: size === \"small\",\n            } })), !hideLabel && h(\"span\", { class: \"ic-switch-line-break\" }), h(\"input\", { checked: checkedState, disabled: disabled, \"aria-label\": label, \"aria-checked\": checkedState ? \"true\" : \"false\", \"aria-describedby\": describedBy, role: \"switch\", class: \"ic-switch-input\", type: \"checkbox\", name: \"toggle\", id: inputId, onFocus: this.onFocus, onBlur: this.onBlur, onChange: this.handleChange }), h(\"span\", { class: \"ic-switch-toggle\" }, h(\"svg\", { class: \"ic-switch-icon\", \"aria-hidden\": \"true\", focusable: \"false\", viewBox: \"0 0 10 10\", xmlns: \"http://www.w3.org/2000/svg\" }, h(\"line\", { class: \"ic-switch-icon-line\", x1: \"9\", y1: size === \"small\" ? \"2\" : \"1\", x2: \"9\", y2: size === \"small\" ? \"8\" : \"9\" })), h(\"svg\", { class: \"ic-switch-icon\", \"aria-hidden\": \"true\", focusable: \"false\", viewBox: \"0 0 10 10\", xmlns: \"http://www.w3.org/2000/svg\" }, h(\"circle\", { class: \"ic-switch-icon-circle\", fill: \"none\", cx: \"5\", cy: \"5\", r: size === \"small\" ? \"3.335\" : \"4.445\" }))), h(\"slot\", { name: \"right-adornment\" }), showState && (h(\"ic-typography\", { \"aria-hidden\": \"true\", variant: \"label\", class: \"ic-switch-checked-status\" }, checkedState ? \"On\" : \"Off\")))));\n    }\n    static get is() { return \"ic-switch\"; }\n    static get encapsulation() { return \"shadow\"; }\n    static get delegatesFocus() { return true; }\n    static get originalStyleUrls() {\n        return {\n            \"$\": [\"ic-switch.css\"]\n        };\n    }\n    static get styleUrls() {\n        return {\n            \"$\": [\"ic-switch.css\"]\n        };\n    }\n    static get properties() {\n        return {\n            \"checked\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"If `true`, the switch will display as checked.\"\n                },\n                \"attribute\": \"checked\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            },\n            \"disabled\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"If `true`, the disabled state will be set.\"\n                },\n                \"attribute\": \"disabled\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            },\n            \"helperText\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"string\",\n                    \"resolved\": \"string\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The helper text that will be displayed for additional field guidance.\"\n                },\n                \"attribute\": \"helper-text\",\n                \"reflect\": false,\n                \"defaultValue\": \"\\\"\\\"\"\n            },\n            \"hideLabel\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"If `true`, the label will be hidden and the required label value will be applied as an aria-label.\"\n                },\n                \"attribute\": \"hide-label\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            },\n            \"label\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"string\",\n                    \"resolved\": \"string\",\n                    \"references\": {}\n                },\n                \"required\": true,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The aria-label applied to the switch when no visual 'name' is provided.\"\n                },\n                \"attribute\": \"label\",\n                \"reflect\": false\n            },\n            \"name\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"string\",\n                    \"resolved\": \"string\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The name of the control, which is submitted with the form data.\"\n                },\n                \"attribute\": \"name\",\n                \"reflect\": false,\n                \"defaultValue\": \"this.inputId\"\n            },\n            \"showState\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"If `true`, the switch will render the On/Off state text.\"\n                },\n                \"attribute\": \"show-state\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            },\n            \"size\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"IcSizesNoLarge\",\n                    \"resolved\": \"\\\"medium\\\" | \\\"small\\\"\",\n                    \"references\": {\n                        \"IcSizesNoLarge\": {\n                            \"location\": \"import\",\n                            \"path\": \"../../utils/types\",\n                            \"id\": \"src/utils/types.ts::IcSizesNoLarge\"\n                        }\n                    }\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The size of the switch component.\"\n                },\n                \"attribute\": \"size\",\n                \"reflect\": false,\n                \"defaultValue\": \"\\\"medium\\\"\"\n            },\n            \"value\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"string | null\",\n                    \"resolved\": \"string\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The value of the toggle does not mean if it's checked or not, use the `checked`\\nproperty for that.\\n\\nThe value of a toggle is analogous to the value of a `<input type=\\\"checkbox\\\">`,\\nit's only used when the toggle participates in a native `<form>`.\"\n                },\n                \"attribute\": \"value\",\n                \"reflect\": false,\n                \"defaultValue\": \"\\\"on\\\"\"\n            }\n        };\n    }\n    static get states() {\n        return {\n            \"checkedState\": {},\n            \"initiallyChecked\": {}\n        };\n    }\n    static get events() {\n        return [{\n                \"method\": \"icBlur\",\n                \"name\": \"icBlur\",\n                \"bubbles\": true,\n                \"cancelable\": true,\n                \"composed\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Emitted when the toggle loses focus.\"\n                },\n                \"complexType\": {\n                    \"original\": \"void\",\n                    \"resolved\": \"void\",\n                    \"references\": {}\n                }\n            }, {\n                \"method\": \"icChange\",\n                \"name\": \"icChange\",\n                \"bubbles\": true,\n                \"cancelable\": true,\n                \"composed\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Emitted when the value property has changed.\"\n                },\n                \"complexType\": {\n                    \"original\": \"IcSwitchChangeEventDetail\",\n                    \"resolved\": \"IcSwitchChangeEventDetail\",\n                    \"references\": {\n                        \"IcSwitchChangeEventDetail\": {\n                            \"location\": \"import\",\n                            \"path\": \"./ic-switch.types\",\n                            \"id\": \"src/components/ic-switch/ic-switch.types.ts::IcSwitchChangeEventDetail\"\n                        }\n                    }\n                }\n            }, {\n                \"method\": \"icFocus\",\n                \"name\": \"icFocus\",\n                \"bubbles\": true,\n                \"cancelable\": true,\n                \"composed\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Emitted when the toggle has focus.\"\n                },\n                \"complexType\": {\n                    \"original\": \"void\",\n                    \"resolved\": \"void\",\n                    \"references\": {}\n                }\n            }];\n    }\n    static get methods() {\n        return {\n            \"setFocus\": {\n                \"complexType\": {\n                    \"signature\": \"() => Promise<void>\",\n                    \"parameters\": [],\n                    \"references\": {\n                        \"Promise\": {\n                            \"location\": \"global\",\n                            \"id\": \"global::Promise\"\n                        }\n                    },\n                    \"return\": \"Promise<void>\"\n                },\n                \"docs\": {\n                    \"text\": \"Sets focus on the switch.\",\n                    \"tags\": []\n                }\n            }\n        };\n    }\n    static get elementRef() { return \"el\"; }\n    static get watchers() {\n        return [{\n                \"propName\": \"checked\",\n                \"methodName\": \"checkedChangeHandler\"\n            }];\n    }\n}\n//# sourceMappingURL=ic-switch.js.map\n"],"version":3}

package/dist/components/ic-tab-context.js

@@ -1,43 +1,35 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { I as IcThemeForegroundEnum } from './types.js';
 
+const CONTEXT_ID_ATTR = "context-id";
 const TabContext = /*@__PURE__*/ proxyCustomElement(class TabContext extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
         this.icTabSelect = createEvent(this, "icTabSelect", 3);
-        this.tabSelect = createEvent(this, "tabSelect", 3);
         this.newTabPanels = [];
         this.newTabs = [];
-        // Sets attributes to link tab-group, tabs and tab-panels
+        /** Sets attributes to link tab-group, tabs and tab-panels */
         this.linkTabs = () => {
             this.tabs.forEach((tab, index) => {
                 const tabId = `ic-tab-${index}-context-${this.contextId}`;
                 const tabPanelId = `ic-tab-panel-${index}-context-${this.contextId}`;
-                const shared = `ic-tab--${index}-context-${this.contextId}`;
-                const contextIdAttr = "context-id";
                 tab.setAttribute("id", tabId);
-                tab.tabId = shared;
+                tab.tabId = `ic-tab--${index}-context-${this.contextId}`;
                 tab.tabPosition = index;
                 tab.setAttribute("aria-controls", tabPanelId);
-                tab.setAttribute(contextIdAttr, this.contextId);
-                this.tabGroup.setAttribute(contextIdAttr, this.contextId);
+                tab.setAttribute(CONTEXT_ID_ATTR, this.contextId);
+                this.tabGroup.setAttribute(CONTEXT_ID_ATTR, this.contextId);
                 this.tabPanels[index].setAttribute("id", tabPanelId);
-                this.tabPanels[index].panelId = shared;
-                this.tabPanels[index].tabPosition = index;
                 this.tabPanels[index].setAttribute("aria-labelledby", tabId);
-                this.tabPanels[index].setAttribute(contextIdAttr, this.contextId);
-                if (this.appearance === IcThemeForegroundEnum.Light) {
-                    tab.appearance = this.appearance;
-                    this.tabPanels[index].appearance = this.appearance;
-                }
+                this.tabPanels[index].setAttribute(CONTEXT_ID_ATTR, this.contextId);
+                tab.theme = this.theme;
+                this.tabPanels[index].theme = this.theme;
+                this.tabGroup.theme = this.theme;
             });
-            if (this.appearance === IcThemeForegroundEnum.Light) {
-                this.tabGroup.appearance = this.appearance;
-            }
         };
-        // Gets tabs and tabpanels with the same context ID
-        // Using querySelector to selector the children in relation to the host
+        /**
+         * Gets tabs and tabpanels with the same context ID using querySelector to selector the children in relation to the host
+         */
         this.getChildren = () => {
             this.tabGroup = this.el.querySelector("ic-tab-group");
             this.tabs = Array.from(this.tabGroup.querySelectorAll("ic-tab"));
@@ -45,28 +37,42 @@ const TabContext = /*@__PURE__*/ proxyCustomElement(class TabContext extends HTM
             this.enabledTabs = this.getEnabledTabs();
         };
         this.keydownHandler = (event) => {
-            if (this.activationType === "automatic") {
-                this.handleKeyBoardNavAutomatic(event);
-            }
-            else {
-                this.handleKeyBoardNavManual(event);
-            }
-        };
-        // Determines how keyboard navigation is to be handled based on the activation type
-        this.attatchEventListeners = () => {
-            this.tabGroup.addEventListener("keydown", this.keydownHandler);
-        };
-        // Determines whether the selected tab is being controlled within the component
-        // or by the user (via selectedTabIndex and onIcTabSelect)
-        this.setControlledMode = () => {
-            if (this.selectedTabIndex !== undefined) {
-                this.controlledMode = true;
-                this.selectedTab = this.selectedTabIndex;
+            const isManual = this.activationType === "manual";
+            const enabledTabIndex = this.enabledTabs.findIndex((tab) => tab.tabId ===
+                this.tabs[isManual ? this.focusedTabIndex : this.selectedTab].tabId);
+            const keyboardFunction = isManual
+                ? this.keyboardFocusTab
+                : this.keyboardSelectTab;
+            let preventDefault = true;
+            switch (event.key) {
+                case "Home":
+                    keyboardFunction(0);
+                    break;
+                case "End":
+                    keyboardFunction(this.enabledTabs.length - 1);
+                    break;
+                case "ArrowRight":
+                    keyboardFunction(enabledTabIndex < this.enabledTabs.length - 1
+                        ? enabledTabIndex + 1
+                        : 0);
+                    break;
+                case "ArrowLeft":
+                    keyboardFunction((enabledTabIndex > 0 ? enabledTabIndex : this.enabledTabs.length) - 1);
+                    break;
+                default:
+                    if (isManual && (event.key === "Enter" || event.key === " ")) {
+                        this.keyboardSelectTab(this.focusedTabIndex);
+                    }
+                    else {
+                        preventDefault = false;
+                    }
             }
+            if (preventDefault)
+                event.preventDefault();
         };
-        // Sets the tab that is selected on initial render
+        /** Sets the tab that is selected on initial render */
         this.setInitialTab = () => {
-            if (this.controlledMode) {
+            if (this.selectedTabIndex !== undefined) {
                 this.selectedTab = this.selectedTabIndex;
                 this.focusedTabIndex = this.selectedTabIndex;
             }
@@ -76,125 +82,68 @@ const TabContext = /*@__PURE__*/ proxyCustomElement(class TabContext extends HTM
                 this.focusedTabIndex = firstEnabledTabIndex;
             }
         };
-        // Passes the selected tab to the tab and tab panel components
+        /** Passes the selected tab to the tab and tab panel components */
         this.configureTabs = () => {
             this.enabledTabs.forEach((tab) => {
                 tab.selected = tab.tabPosition === this.selectedTab;
             });
-            this.tabPanels.forEach((tabPanel) => {
-                tabPanel.selectedTab = this.tabs[this.selectedTab].tabId;
+            this.tabPanels.forEach((tabPanel, index) => {
+                tabPanel.hidden = index !== this.selectedTab;
             });
         };
-        this.getEnabledTabs = () => {
-            return Array.from(this.tabs).filter((child) => !child.disabled);
-        };
-        this.getIndexOfEnabledTab = (allTabsIndex) => {
-            return this.enabledTabs.findIndex((tab) => tab.tabId === this.tabs[allTabsIndex].tabId);
-        };
-        // Sets focus on tab and selects it
+        this.getEnabledTabs = () => Array.from(this.tabs).filter((child) => !child.disabled);
+        /** Sets focus on tab and selects it */
         this.keyboardSelectTab = (enabledTabIndex) => {
             const newIndex = this.tabs.findIndex((tab) => tab.tabId === this.enabledTabs[enabledTabIndex].tabId);
             this.enabledTabs[enabledTabIndex].focus();
-            if (!this.controlledMode) {
+            if (this.selectedTabIndex === undefined) {
                 this.selectedTab = newIndex;
             }
             else {
-                this.icTabSelect.emit({ tabIndex: newIndex });
-                this.tabSelect.emit({ tabIndex: newIndex });
+                /* eslint-disable no-unexpected-multiline */
+                this.icTabSelect.emit({
+                    tabIndex: newIndex,
+                    tabLabel: this.el
+                        .querySelectorAll("ic-tab")[newIndex].textContent.trim(),
+                });
             }
         };
-        // Sets focus on tab without selecting it (for manual activation)
+        /** Sets focus on tab without selecting it (for manual activation) */
         this.keyboardFocusTab = (enabledTabIndex) => {
-            const newIndex = this.tabs.findIndex((tab) => tab.tabId === this.enabledTabs[enabledTabIndex].tabId);
             this.enabledTabs[enabledTabIndex].focus();
-            this.focusedTabIndex = newIndex;
-        };
-        this.handleKeyBoardNavAutomatic = (event) => {
-            const key = event.key;
-            const enabledTabIndex = this.getIndexOfEnabledTab(this.selectedTab);
-            let preventDefault = true;
-            switch (key) {
-                case "Home":
-                    this.keyboardSelectTab(0);
-                    break;
-                case "End":
-                    this.keyboardSelectTab(this.enabledTabs.length - 1);
-                    break;
-                case "ArrowRight":
-                    if (enabledTabIndex < this.enabledTabs.length - 1) {
-                        this.keyboardSelectTab(enabledTabIndex + 1);
-                    }
-                    else {
-                        this.keyboardSelectTab(0);
-                    }
-                    break;
-                case "ArrowLeft":
-                    if (enabledTabIndex > 0) {
-                        this.keyboardSelectTab(enabledTabIndex - 1);
-                    }
-                    else {
-                        this.keyboardSelectTab(this.enabledTabs.length - 1);
-                    }
-                    break;
-                default:
-                    preventDefault = false;
-            }
-            if (preventDefault)
-                event.preventDefault();
-        };
-        this.handleKeyBoardNavManual = (event) => {
-            const key = event.key;
-            const enabledTabIndex = this.getIndexOfEnabledTab(this.focusedTabIndex);
-            let preventDefault = true;
-            switch (key) {
-                case "Home":
-                    this.keyboardFocusTab(0);
-                    break;
-                case "End":
-                    this.keyboardFocusTab(this.enabledTabs.length - 1);
-                    break;
-                case "ArrowRight":
-                    if (enabledTabIndex < this.enabledTabs.length - 1) {
-                        this.keyboardFocusTab(enabledTabIndex + 1);
-                    }
-                    else {
-                        this.keyboardFocusTab(0);
-                    }
-                    break;
-                case "ArrowLeft":
-                    if (enabledTabIndex > 0) {
-                        this.keyboardFocusTab(enabledTabIndex - 1);
-                    }
-                    else {
-                        this.keyboardFocusTab(this.enabledTabs.length - 1);
-                    }
-                    break;
-                case "Enter":
-                    this.keyboardSelectTab(this.focusedTabIndex);
-                    break;
-                case " ":
-                    this.keyboardSelectTab(this.focusedTabIndex);
-                    break;
-                default:
-                    preventDefault = false;
-            }
-            if (preventDefault)
-                event.preventDefault();
+            this.focusedTabIndex = this.tabs.findIndex((tab) => tab.tabId === this.enabledTabs[enabledTabIndex].tabId);
         };
         this.selectedTab = undefined;
         this.activationType = "automatic";
-        this.appearance = "dark";
         this.contextId = "default";
         this.selectedTabIndex = undefined;
+        this.monochrome = false;
+        this.theme = "inherit";
     }
     updateSelectedTab(newValue) {
         this.selectedTab = newValue;
     }
+    watchMonochromeHandler() {
+        this.tabs.forEach((tab, index) => {
+            tab.monochrome = this.monochrome;
+            this.tabPanels[index].monochrome = this.monochrome;
+        });
+        this.tabGroup.monochrome = this.monochrome;
+    }
+    watchThemeHandler() {
+        this.tabs.forEach((tab, index) => {
+            tab.theme = this.theme;
+            this.tabPanels[index].theme = this.theme;
+        });
+        this.tabGroup.theme = this.theme;
+    }
     componentDidLoad() {
-        this.setControlledMode();
+        if (this.selectedTabIndex !== undefined) {
+            this.selectedTab = this.selectedTabIndex;
+        }
         this.getChildren();
         this.linkTabs();
-        this.attatchEventListeners();
+        this.tabGroup.addEventListener("keydown", this.keydownHandler);
         this.setInitialTab();
         this.configureTabs();
     }
@@ -209,12 +158,13 @@ const TabContext = /*@__PURE__*/ proxyCustomElement(class TabContext extends HTM
             event.detail.contextId === this.contextId) {
             this.selectedTab = event.detail.position;
         }
+        /* eslint-disable no-unexpected-multiline */
         this.icTabSelect.emit({
             tabIndex: event.detail.position,
+            tabLabel: this.el
+                .querySelectorAll("ic-tab")[event.detail.position].textContent.trim(),
         });
-        this.tabSelect.emit({
-            tabIndex: event.detail.position,
-        });
+        /* eslint-enable no-unexpected-multiline */
         event.stopImmediatePropagation();
     }
     tabCreatedHandler(ev) {
@@ -225,6 +175,9 @@ const TabContext = /*@__PURE__*/ proxyCustomElement(class TabContext extends HTM
                 this.tabPanels.push(...this.newTabPanels);
                 this.enabledTabs = this.getEnabledTabs();
                 this.linkTabs();
+                if (!this.tabs[this.selectedTab] || !this.tabPanels[this.selectedTab])
+                    this.setInitialTab();
+                this.configureTabs();
                 this.newTabs = [];
                 this.newTabPanels = [];
             }
@@ -238,12 +191,10 @@ const TabContext = /*@__PURE__*/ proxyCustomElement(class TabContext extends HTM
      */
     async tabRemovedHandler(hadFocus) {
         this.getChildren();
-        this.enabledTabs = this.getEnabledTabs();
         this.linkTabs();
         if (this.tabs[this.selectedTab] && this.tabPanels[this.selectedTab]) {
             this.tabs[this.selectedTab].selected = true;
-            this.tabPanels[this.selectedTab].selectedTab =
-                this.tabs[this.selectedTab].tabId;
+            this.tabPanels[this.selectedTab].hidden = false;
         }
         else {
             this.setInitialTab();
@@ -257,17 +208,22 @@ const TabContext = /*@__PURE__*/ proxyCustomElement(class TabContext extends HTM
     }
     get el() { return this; }
     static get watchers() { return {
-        "selectedTabIndex": ["updateSelectedTab"]
+        "selectedTabIndex": ["updateSelectedTab"],
+        "monochrome": ["watchMonochromeHandler"],
+        "theme": ["watchThemeHandler"]
     }; }
 }, [4, "ic-tab-context", {
         "activationType": [1, "activation-type"],
-        "appearance": [1],
         "contextId": [513, "context-id"],
         "selectedTabIndex": [2, "selected-tab-index"],
+        "monochrome": [4],
+        "theme": [1],
         "selectedTab": [32],
         "tabRemovedHandler": [64]
     }, [[0, "tabClick", "tabClickHandler"], [0, "tabCreated", "tabCreatedHandler"], [0, "tabPanelCreated", "tabCreatedHandler"], [0, "tabEnabled", "tabEnabledHandler"]], {
-        "selectedTabIndex": ["updateSelectedTab"]
+        "selectedTabIndex": ["updateSelectedTab"],
+        "monochrome": ["watchMonochromeHandler"],
+        "theme": ["watchThemeHandler"]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {