@ukic/web-components 3.20.0 → 3.21.0

package/dist/cjs/ic-checkbox.cjs.entry.js

@@ -6,7 +6,7 @@ const index = require('./index-d337cd8a.js');
 const helpers = require('./helpers-3a796e7a.js');
 require('./constants-4d389abc.js');
 
-const icCheckboxCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host(.ic-checkbox-disabled){pointer-events:none}.container{display:flex;width:-moz-fit-content;width:fit-content;padding:var(--ic-space-xxs) 0 var(--ic-space-xxs) var(--ic-space-xxs);margin-bottom:var(--ic-space-xxs);align-items:center}:host(.ic-data-table-checkbox) .container{padding:0;margin-bottom:0}:host(.ic-checkbox-small) .container{margin-bottom:var(--ic-space-xxxs)}.checkbox{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:block;position:relative;top:0;left:0;height:var(--ic-space-lg);width:var(--ic-space-lg);background-color:var(--ic-checkbox-background-unselected);border:var(--ic-border-width) solid var(--ic-checkbox-border-unselected);border-radius:var(--ic-border-radius);outline:none;cursor:pointer;transition:var(--ic-easing-transition-fast);flex-shrink:0}:host .container svg{width:var(--ic-space-lg);height:var(--ic-space-lg)}:host(.ic-checkbox-small) .checkbox,:host(.ic-checkbox-small) .container svg{width:var(--ic-space-md);height:var(--ic-space-md)}:host(.ic-checkbox-large) .checkbox,:host(.ic-checkbox-large) .container svg{width:var(--ic-space-xl);height:var(--ic-space-xl)}.checkbox:checked{background-color:var(--ic-checkbox-background-selected);border:var(--ic-border-width) solid var(--ic-checkbox-background-selected);transition:var(--ic-easing-transition-slow)}.checkbox:checked:disabled{background-color:var(--ic-checkbox-background-selected-disabled);border:var(--ic-border-width) solid\n    var(--ic-checkbox-background-selected-disabled)}.checkbox:indeterminate,.checkbox.indeterminate:checked{background-color:var(--ic-checkbox-background-indeterminate);border:0.125rem solid var(--ic-checkbox-background-indeterminate)}.checkbox:indeterminate:disabled,.checkbox.indeterminate:checked:disabled{background-color:var(--ic-checkbox-background-indeterminate-disabled);border:0.125rem solid var(--ic-checkbox-background-indeterminate-disabled)}.checkbox:checked:hover{background-color:var(--ic-checkbox-background-selected-hover)}.checkbox:indeterminate:hover,.checkbox.indeterminate:checked:hover{background-color:var(--ic-checkbox-background-indeterminate-hover);border:0.125rem solid var(--ic-checkbox-background-indeterminate-hover)}.checkbox:checked:active{background-color:var(--ic-checkbox-background-selected-pressed)}.checkbox:indeterminate:active,.checkbox.indeterminate:checked:active{background-color:var(--ic-checkbox-background-indeterminate-pressed);border:0.125rem solid var(--ic-checkbox-background-indeterminate-pressed)}.checkbox:hover{box-shadow:0 0 0 0.25rem var(--ic-checkbox-action-background-hover);border:var(--ic-border-width) solid\n    var(--ic-checkbox-border-unselected-hover)}.checkbox:active{box-shadow:0 0 0 0.25rem var(--ic-checkbox-action-background-pressed);border:var(--ic-border-width) solid\n    var(--ic-checkbox-border-unselected-pressed)}.checkbox:focus{box-shadow:var(--ic-border-focus)}.checkbox:disabled{border:var(--ic-border-width) dashed\n    var(--ic-checkbox-border-unselected-disabled)}.checkbox-label{--ic-typography-color:var(--ic-checkbox-text)}.checkbox-label>label{padding-left:var(--ic-space-sm);display:inline-block}::slotted([slot=\"label\"]){padding-left:var(--ic-space-sm) !important;color:var(--ic-checkbox-text)}:host(.ic-checkbox-disabled) .checkbox-label{color:var(--ic-checkbox-text-disabled);--ic-typography-color:var(--ic-checkbox-text-disabled)}:host(.ic-checkbox-disabled) ::slotted([slot=\"label\"]){color:var(--ic-checkbox-text-disabled);--ic-typography-color:var(--ic-checkbox-text-disabled)}.checkbox-label:hover{cursor:pointer}.checkmark{position:relative;right:calc(-1 * var(--ic-space-lg));margin-left:calc(-1 * var(--ic-space-lg));fill:var(--ic-checkbox-icon-pressed);z-index:1;background-color:transparent;pointer-events:none;flex-shrink:0}:host(.ic-checkbox-small) .checkmark{margin-left:calc(-1 * var(--ic-space-md));right:calc(-1 * var(--ic-space-md))}:host(.ic-checkbox-large) .checkmark{margin-left:calc(-1 * var(--ic-space-xl));right:calc(-1 * var(--ic-space-xl))}.indeterminate-symbol{position:relative;width:0.875rem;height:var(--ic-space-xxxs);right:-1.188rem;margin-left:-0.875rem;z-index:1;background-color:var(--ic-checkbox-icon-indeterminate);pointer-events:none;flex-shrink:0}:host(.ic-checkbox-small) .indeterminate-symbol{width:0.6rem;right:-0.8rem;margin-left:-0.6rem}:host(.ic-checkbox-large) .indeterminate-symbol{width:1.25rem;right:-1.625rem;margin-left:-1.25rem}.additional-field-wrapper{margin-left:calc(var(--ic-space-md) + var(--ic-space-lg));margin-top:calc(var(--ic-space-sm) / 2)}.branch-corner{height:var(--ic-space-md);width:var(--ic-space-xl);border-radius:0 0 0 0.188rem;border-bottom:0.125rem solid var(--ic-checkbox-required-bar);border-left:0.125rem solid var(--ic-checkbox-required-bar)}.dynamic-container{display:flex;position:relative;margin:var(--ic-space-xxxs) 0 var(--ic-space-xxs) var(--ic-space-md);gap:var(--ic-space-xs)}.dynamic-text{color:var(--ic-checkbox-required-text);--ic-typography-color:var(--ic-checkbox-required-text);margin-top:calc(var(--ic-space-sm) / 2);margin-bottom:var(--ic-space-xs);border-radius:2%}.dynamic-field-container{flex:100%}.sr-only{position:absolute;left:-9999px}@media (max-width: 576px){::slotted(*){--input-width:100%}.dynamic-field-container{flex:initial}}@media (forced-colors: active){.checkbox{-webkit-appearance:revert;-moz-appearance:revert;appearance:revert;transition:none}.checkbox:checked{transition:none}.checkbox:focus-visible{outline:0.125rem solid highlight}.checkbox:disabled:not(:checked){-webkit-appearance:none;-moz-appearance:none;appearance:none;border-color:GrayText}.checkmark{fill:none}.indeterminate-symbol{display:none}}.checkmark:dir(rtl){right:0}.checkbox-label:dir(rtl){padding-right:var(--ic-space-sm);padding-left:0}.indeterminate-symbol:dir(rtl){right:0.288rem}.branch-corner:dir(rtl){border-radius:0 0 0.188rem;border-right:0.125rem solid var(--ic-action-default);border-left:none}.dynamic-container:dir(rtl){margin:var(--ic-space-xxxs) var(--ic-space-sm) var(--ic-space-xxs) 0}";
+const icCheckboxCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host(.ic-checkbox-disabled){pointer-events:none}.container{display:flex;width:-moz-fit-content;width:fit-content;padding:var(--ic-space-xxs) 0 var(--ic-space-xxs) var(--ic-space-xxs);margin-bottom:var(--ic-space-xxs);align-items:center}:host(.ic-data-table-checkbox) .container{padding:0;margin-bottom:0}:host(.ic-checkbox-small) .container{margin-bottom:var(--ic-space-xxxs)}.checkbox{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:block;position:relative;top:0;left:0;height:var(--ic-space-lg);width:var(--ic-space-lg);background-color:var(--ic-checkbox-background-unselected);border:var(--ic-border-width) solid var(--ic-checkbox-border-unselected);border-radius:var(--ic-border-radius);outline:none;cursor:pointer;transition:var(--ic-easing-transition-fast);flex-shrink:0}:host .container svg{width:var(--ic-space-lg);height:var(--ic-space-lg)}:host(.ic-checkbox-small) .checkbox,:host(.ic-checkbox-small) .container svg{width:var(--ic-space-md);height:var(--ic-space-md)}:host(.ic-checkbox-large) .checkbox,:host(.ic-checkbox-large) .container svg{width:var(--ic-space-xl);height:var(--ic-space-xl)}.checkbox:checked{background-color:var(--ic-checkbox-background-selected);border:var(--ic-border-width) solid var(--ic-checkbox-background-selected);transition:var(--ic-easing-transition-slow)}.checkbox:checked:disabled{background-color:var(--ic-checkbox-background-selected-disabled);border:var(--ic-border-width) solid\n    var(--ic-checkbox-background-selected-disabled)}.checkbox:indeterminate,.checkbox.indeterminate:checked{background-color:var(--ic-checkbox-background-indeterminate);border:0.125rem solid var(--ic-checkbox-background-indeterminate)}.checkbox:indeterminate:disabled,.checkbox.indeterminate:checked:disabled{background-color:var(--ic-checkbox-background-indeterminate-disabled);border:0.125rem solid var(--ic-checkbox-background-indeterminate-disabled)}.checkbox:checked:hover{background-color:var(--ic-checkbox-background-selected-hover)}.checkbox:indeterminate:hover,.checkbox.indeterminate:checked:hover{background-color:var(--ic-checkbox-background-indeterminate-hover);border:0.125rem solid var(--ic-checkbox-background-indeterminate-hover)}.checkbox:checked:active{background-color:var(--ic-checkbox-background-selected-pressed)}.checkbox:indeterminate:active,.checkbox.indeterminate:checked:active{background-color:var(--ic-checkbox-background-indeterminate-pressed);border:0.125rem solid var(--ic-checkbox-background-indeterminate-pressed)}.checkbox:hover{box-shadow:0 0 0 0.25rem var(--ic-checkbox-action-background-hover);border:var(--ic-border-width) solid\n    var(--ic-checkbox-border-unselected-hover)}.checkbox:active{box-shadow:0 0 0 0.25rem var(--ic-checkbox-action-background-pressed);border:var(--ic-border-width) solid\n    var(--ic-checkbox-border-unselected-pressed)}.checkbox:focus{box-shadow:var(--ic-border-focus)}.checkbox:disabled{border:var(--ic-border-width) dashed\n    var(--ic-checkbox-border-unselected-disabled)}.checkbox-label{--ic-typography-color:var(--ic-checkbox-text)}.checkbox-label>label{padding-left:var(--ic-space-sm);display:inline-block}::slotted([slot=\"label\"]){padding-left:var(--ic-space-sm) !important;color:var(--ic-checkbox-text)}:host(.ic-checkbox-disabled) .checkbox-label{color:var(--ic-checkbox-text-disabled);--ic-typography-color:var(--ic-checkbox-text-disabled)}:host(.ic-checkbox-disabled) ::slotted([slot=\"label\"]){color:var(--ic-checkbox-text-disabled);--ic-typography-color:var(--ic-checkbox-text-disabled)}.checkbox-label:hover{cursor:pointer}.checkmark{position:relative;right:calc(-1 * var(--ic-space-lg));margin-left:calc(-1 * var(--ic-space-lg));fill:var(--ic-checkbox-icon-pressed);z-index:1;background-color:transparent;pointer-events:none;flex-shrink:0}:host(.ic-checkbox-small) .checkmark{margin-left:calc(-1 * var(--ic-space-md));right:calc(-1 * var(--ic-space-md))}:host(.ic-checkbox-large) .checkmark{margin-left:calc(-1 * var(--ic-space-xl));right:calc(-1 * var(--ic-space-xl))}.indeterminate-symbol{position:relative;width:0.875rem;height:var(--ic-space-xxxs);right:-1.188rem;margin-left:-0.875rem;z-index:1;background-color:var(--ic-checkbox-icon-indeterminate);pointer-events:none;flex-shrink:0}:host(.ic-checkbox-small) .indeterminate-symbol{width:0.6rem;right:-0.8rem;margin-left:-0.6rem}:host(.ic-checkbox-large) .indeterminate-symbol{width:1.25rem;right:-1.625rem;margin-left:-1.25rem}.additional-field-wrapper{margin-left:calc(var(--ic-space-md) + var(--ic-space-lg));margin-top:calc(var(--ic-space-sm) / 2)}.branch-corner{height:var(--ic-space-md);width:var(--ic-space-xl);border-radius:0 0 0 0.188rem;border-bottom:0.125rem solid var(--ic-checkbox-required-bar);border-left:0.125rem solid var(--ic-checkbox-required-bar)}.dynamic-container{display:flex;position:relative;margin:var(--ic-space-xxxs) 0 var(--ic-space-xxs) var(--ic-space-md);gap:var(--ic-space-xs)}.dynamic-text{color:var(--ic-checkbox-required-text);--ic-typography-color:var(--ic-checkbox-required-text);margin-top:calc(var(--ic-space-sm) / 2);margin-bottom:var(--ic-space-xs);border-radius:2%}.dynamic-field-container{flex:100%}.sr-only{position:absolute;left:-9999px}@media (max-width: 576px){::slotted(*){--input-width:100%}.dynamic-field-container{flex:initial}}@media (forced-colors: active){.checkbox{-webkit-appearance:revert;-moz-appearance:revert;appearance:revert}.checkbox:focus-visible{outline:0.125rem solid highlight}.checkbox:disabled:not(:checked){-webkit-appearance:none;-moz-appearance:none;appearance:none;border-color:GrayText}.checkmark{fill:none}.indeterminate-symbol{display:none}}.checkmark:dir(rtl){right:0}.checkbox-label:dir(rtl){padding-right:var(--ic-space-sm);padding-left:0}.indeterminate-symbol:dir(rtl){right:0.288rem}.branch-corner:dir(rtl){border-radius:0 0 0.188rem;border-right:0.125rem solid var(--ic-action-default);border-left:none}.dynamic-container:dir(rtl){margin:var(--ic-space-xxxs) var(--ic-space-sm) var(--ic-space-xxs) 0}@media (prefers-reduced-motion: reduce){.checkbox,.checkbox:checked{transition:none}}";
 const IcCheckboxStyle0 = icCheckboxCss;
 
 const Checkbox = class {
@@ -136,17 +136,17 @@ const Checkbox = class {
             ? helpers.renderHiddenInput(el, value, name, disabled)
             : helpers.removeHiddenInput(el);
         const LabelContent = () => this.hasLabelSlot() ? (index.h("slot", { name: "label" })) : (index.h("ic-typography", { class: "checkbox-label", variant: "body" }, index.h("label", { htmlFor: inputId }, label)));
-        return (index.h(index.Host, { key: '7554612ca8fba3490ff568295eea1bfab40707a9', class: {
+        return (index.h(index.Host, { key: 'c26a95e302dfd93aca89ba24f2eac3dd23b3b12a', class: {
                 "ic-checkbox-disabled": disabled,
                 [`ic-checkbox-${size}`]: !!size,
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            } }, index.h("div", { key: '858b6c8812f827d1805ae6aea8a02760ddaef38a', class: "container" }, displayIndeterminate ? (index.h("div", { class: "indeterminate-symbol" })) : (checked && (index.h("svg", { class: "checkmark", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", "fill-rule": "evenodd", "clip-rule": "evenodd" }, index.h("title", null, "checkmark icon"), index.h("path", { d: "M21 6.285l-11.16 12.733-6.84-6.018 1.319-1.49 5.341 4.686 9.865-11.196 1.475 1.285z" })))), index.h("input", { key: '1b2729f5f417f5fbea44639369b5ad23f7c937e8', role: "checkbox", class: {
+            } }, index.h("div", { key: '7a51e875e418c6e42a7b8d8cf5143a2bd562cd99', class: "container" }, displayIndeterminate ? (index.h("div", { class: "indeterminate-symbol" })) : (checked && (index.h("svg", { class: "checkmark", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", "fill-rule": "evenodd", "clip-rule": "evenodd" }, index.h("title", null, "checkmark icon"), index.h("path", { d: "M21 6.285l-11.16 12.733-6.84-6.018 1.319-1.49 5.341 4.686 9.865-11.196 1.475 1.285z" })))), index.h("input", { key: '72c7c69b70462dd7a8b5c211518a67b0fdc4e51f', role: "checkbox", class: {
                 checkbox: true,
                 checked,
                 indeterminate: displayIndeterminate,
-            }, ref: (el) => (this.checkboxEl = el), type: "checkbox", name: name, id: inputId, value: value, disabled: disabled, checked: checked, indeterminate: displayIndeterminate, onClick: handleClick, form: form, "aria-label": hideLabel || this.hasLabelSlot() ? label : undefined }), !hideLabel && index.h(LabelContent, { key: '62bdb97c7d1dd473236dd5a9b294aaf1eb6e01c7' })), index.h("span", { key: '3d798c60b58dfcb3cf907569094e84a09e5e291c', id: `${inputId}-additional-field-description`, role: "alert", class: "sr-only" }, isDynamicAdditionalField && checked ? dynamicText : ""), helpers.isSlotUsed(el, "additional-field") && (index.h("div", { key: 'a8276e2dcd983bee6547ac802de050348263ca9b', class: "dynamic-container", ref: (el) => (this.additionalFieldContainer = el) }, isDynamicAdditionalField && index.h("div", { key: '9235762858b354b09bbdf956c5a2041041162f77', class: "branch-corner" }), index.h("div", { key: 'cb92bb94e296830a3132f752b0c7689671275383', class: "dynamic-field-container" }, isDynamicAdditionalField && (index.h("ic-typography", { key: '318cdd04a078d79aa98138a664e60ee308799f43', variant: "caption" }, index.h("p", { key: 'ce5182b3ca908fc98ca9303d014d0c05f0bf3c0b', class: "dynamic-text" }, isDynamicAdditionalField && checked ? dynamicText : ""))), index.h("div", { key: '352457e47762a12c320dc7df9635fa38bbc0d675', class: {
+            }, ref: (el) => (this.checkboxEl = el), type: "checkbox", name: name, id: inputId, value: value, disabled: disabled, checked: checked, indeterminate: displayIndeterminate, onClick: handleClick, form: form, "aria-label": hideLabel || this.hasLabelSlot() ? label : undefined }), !hideLabel && index.h(LabelContent, { key: '636c0781dc308d216c97bf18278833c59f7d4544' })), index.h("span", { key: '4b0037a6cdf14c5b7eedfb5cfddf76210e83eb1b', id: `${inputId}-additional-field-description`, role: "alert", class: "sr-only" }, isDynamicAdditionalField && checked ? dynamicText : ""), helpers.isSlotUsed(el, "additional-field") && (index.h("div", { key: '64edf574da3dd95e89dfe698bb6a28efb0434d40', class: "dynamic-container", ref: (el) => (this.additionalFieldContainer = el) }, isDynamicAdditionalField && index.h("div", { key: 'd971ccf130d625f3e1b9ffa66a096f72a9c914ab', class: "branch-corner" }), index.h("div", { key: '789962b380bfe873ca444bd1e35642449a47d32f', class: "dynamic-field-container" }, isDynamicAdditionalField && (index.h("ic-typography", { key: '6f4ca17e8ec24e75e0b0d03ca4434a7083771f4d', variant: "caption" }, index.h("p", { key: '3acc288442ef2176f78a49293ec9082f42014764', class: "dynamic-text" }, isDynamicAdditionalField && checked ? dynamicText : ""))), index.h("div", { key: '5f94edcfbe4fe9c2d5ad27c32e20c6068579f893', class: {
                 "additional-field-wrapper": !isDynamicAdditionalField,
-            } }, index.h("slot", { key: '1d9225d692fbe869375109c97c9ec479be89e69f', name: "additional-field" })))))));
+            } }, index.h("slot", { key: 'd323907418190cf2a536b49050e75e4e4d47ccab', name: "additional-field" })))))));
     }
     static get delegatesFocus() { return true; }
     get el() { return index.getElement(this); }

package/dist/cjs/ic-checkbox.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"ic-checkbox.entry.cjs.js","mappings":"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","names":["removeDisabledFalse","addFormResetListener","onComponentRequiredPropUndefined","removeFormResetListener","renderHiddenInput","removeHiddenInput","h","Host","isSlotUsed"],"sources":["src/components/ic-checkbox/ic-checkbox.css?tag=ic-checkbox&encapsulation=shadow","src/components/ic-checkbox/ic-checkbox.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host(.ic-checkbox-disabled) {\n  pointer-events: none;\n}\n\n.container {\n  display: flex;\n  width: fit-content;\n  padding: var(--ic-space-xxs) 0 var(--ic-space-xxs) var(--ic-space-xxs);\n  margin-bottom: var(--ic-space-xxs);\n  align-items: center;\n}\n\n:host(.ic-data-table-checkbox) .container {\n  padding: 0;\n  margin-bottom: 0;\n}\n\n:host(.ic-checkbox-small) .container {\n  margin-bottom: var(--ic-space-xxxs);\n}\n\n.checkbox {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  display: block;\n  position: relative;\n  top: 0;\n  left: 0;\n  height: var(--ic-space-lg);\n  width: var(--ic-space-lg);\n  background-color: var(--ic-checkbox-background-unselected);\n  border: var(--ic-border-width) solid var(--ic-checkbox-border-unselected);\n  border-radius: var(--ic-border-radius);\n  outline: none;\n  cursor: pointer;\n  transition: var(--ic-easing-transition-fast);\n  flex-shrink: 0;\n}\n\n:host .container svg {\n  width: var(--ic-space-lg);\n  height: var(--ic-space-lg);\n}\n\n:host(.ic-checkbox-small) .checkbox,\n:host(.ic-checkbox-small) .container svg {\n  width: var(--ic-space-md);\n  height: var(--ic-space-md);\n}\n\n:host(.ic-checkbox-large) .checkbox,\n:host(.ic-checkbox-large) .container svg {\n  width: var(--ic-space-xl);\n  height: var(--ic-space-xl);\n}\n\n.checkbox:checked {\n  background-color: var(--ic-checkbox-background-selected);\n  border: var(--ic-border-width) solid var(--ic-checkbox-background-selected);\n  transition: var(--ic-easing-transition-slow);\n}\n\n.checkbox:checked:disabled {\n  background-color: var(--ic-checkbox-background-selected-disabled);\n  border: var(--ic-border-width) solid\n    var(--ic-checkbox-background-selected-disabled);\n}\n\n.checkbox:indeterminate,\n.checkbox.indeterminate:checked {\n  background-color: var(--ic-checkbox-background-indeterminate);\n  border: 0.125rem solid var(--ic-checkbox-background-indeterminate);\n}\n\n.checkbox:indeterminate:disabled,\n.checkbox.indeterminate:checked:disabled {\n  background-color: var(--ic-checkbox-background-indeterminate-disabled);\n  border: 0.125rem solid var(--ic-checkbox-background-indeterminate-disabled);\n}\n\n.checkbox:checked:hover {\n  background-color: var(--ic-checkbox-background-selected-hover);\n}\n\n.checkbox:indeterminate:hover,\n.checkbox.indeterminate:checked:hover {\n  background-color: var(--ic-checkbox-background-indeterminate-hover);\n  border: 0.125rem solid var(--ic-checkbox-background-indeterminate-hover);\n}\n\n.checkbox:checked:active {\n  background-color: var(--ic-checkbox-background-selected-pressed);\n}\n\n.checkbox:indeterminate:active,\n.checkbox.indeterminate:checked:active {\n  background-color: var(--ic-checkbox-background-indeterminate-pressed);\n  border: 0.125rem solid var(--ic-checkbox-background-indeterminate-pressed);\n}\n\n.checkbox:hover {\n  box-shadow: 0 0 0 0.25rem var(--ic-checkbox-action-background-hover);\n  border: var(--ic-border-width) solid\n    var(--ic-checkbox-border-unselected-hover);\n}\n\n.checkbox:active {\n  box-shadow: 0 0 0 0.25rem var(--ic-checkbox-action-background-pressed);\n  border: var(--ic-border-width) solid\n    var(--ic-checkbox-border-unselected-pressed);\n}\n\n.checkbox:focus {\n  box-shadow: var(--ic-border-focus);\n}\n\n.checkbox:disabled {\n  border: var(--ic-border-width) dashed\n    var(--ic-checkbox-border-unselected-disabled);\n}\n\n.checkbox-label {\n  --ic-typography-color: var(--ic-checkbox-text);\n}\n\n.checkbox-label > label {\n  padding-left: var(--ic-space-sm);\n  display: inline-block;\n}\n\n::slotted([slot=\"label\"]) {\n  padding-left: var(--ic-space-sm) !important;\n  color: var(--ic-checkbox-text);\n}\n\n:host(.ic-checkbox-disabled) .checkbox-label {\n  color: var(--ic-checkbox-text-disabled);\n\n  --ic-typography-color: var(--ic-checkbox-text-disabled);\n}\n\n:host(.ic-checkbox-disabled) ::slotted([slot=\"label\"]) {\n  color: var(--ic-checkbox-text-disabled);\n\n  --ic-typography-color: var(--ic-checkbox-text-disabled);\n}\n\n.checkbox-label:hover {\n  cursor: pointer;\n}\n\n.checkmark {\n  position: relative;\n  right: calc(-1 * var(--ic-space-lg));\n  margin-left: calc(-1 * var(--ic-space-lg));\n  fill: var(--ic-checkbox-icon-pressed);\n  z-index: 1;\n  background-color: transparent;\n  pointer-events: none;\n  flex-shrink: 0;\n}\n\n:host(.ic-checkbox-small) .checkmark {\n  margin-left: calc(-1 * var(--ic-space-md));\n  right: calc(-1 * var(--ic-space-md));\n}\n\n:host(.ic-checkbox-large) .checkmark {\n  margin-left: calc(-1 * var(--ic-space-xl));\n  right: calc(-1 * var(--ic-space-xl));\n}\n\n.indeterminate-symbol {\n  position: relative;\n  width: 0.875rem;\n  height: var(--ic-space-xxxs);\n  right: -1.188rem;\n  margin-left: -0.875rem;\n  z-index: 1;\n  background-color: var(--ic-checkbox-icon-indeterminate);\n  pointer-events: none;\n  flex-shrink: 0;\n}\n\n:host(.ic-checkbox-small) .indeterminate-symbol {\n  width: 0.6rem;\n  right: -0.8rem;\n  margin-left: -0.6rem;\n}\n\n:host(.ic-checkbox-large) .indeterminate-symbol {\n  width: 1.25rem;\n  right: -1.625rem;\n  margin-left: -1.25rem;\n}\n\n.additional-field-wrapper {\n  margin-left: calc(var(--ic-space-md) + var(--ic-space-lg));\n  margin-top: calc(var(--ic-space-sm) / 2);\n}\n\n.branch-corner {\n  height: var(--ic-space-md);\n  width: var(--ic-space-xl);\n  border-radius: 0 0 0 0.188rem;\n  border-bottom: 0.125rem solid var(--ic-checkbox-required-bar);\n  border-left: 0.125rem solid var(--ic-checkbox-required-bar);\n}\n\n.dynamic-container {\n  display: flex;\n  position: relative;\n  margin: var(--ic-space-xxxs) 0 var(--ic-space-xxs) var(--ic-space-md);\n  gap: var(--ic-space-xs);\n}\n\n.dynamic-text {\n  color: var(--ic-checkbox-required-text);\n\n  --ic-typography-color: var(--ic-checkbox-required-text);\n\n  margin-top: calc(var(--ic-space-sm) / 2);\n  margin-bottom: var(--ic-space-xs);\n  border-radius: 2%;\n}\n\n.dynamic-field-container {\n  flex: 100%;\n}\n\n.sr-only {\n  position: absolute;\n  left: -9999px;\n}\n\n@media (max-width: 576px) {\n  ::slotted(*) {\n    --input-width: 100%;\n  }\n\n  .dynamic-field-container {\n    flex: initial;\n  }\n}\n\n@media (forced-colors: active) {\n  /* Styles here only apply to Forced Colors Mode */\n  .checkbox {\n    appearance: revert;\n    transition: none;\n  }\n\n  .checkbox:checked {\n    transition: none;\n  }\n\n  .checkbox:focus-visible {\n    outline: 0.125rem solid highlight;\n  }\n\n  .checkbox:disabled:not(:checked) {\n    appearance: none;\n    border-color: GrayText;\n  }\n\n  .checkmark {\n    fill: none;\n  }\n\n  .indeterminate-symbol {\n    display: none;\n  }\n}\n\n/* Right to left */\n.checkmark:dir(rtl) {\n  right: 0;\n}\n\n.checkbox-label:dir(rtl) {\n  padding-right: var(--ic-space-sm);\n  padding-left: 0;\n}\n\n.indeterminate-symbol:dir(rtl) {\n  right: 0.288rem;\n}\n\n.branch-corner:dir(rtl) {\n  border-radius: 0 0 0.188rem;\n  border-right: 0.125rem solid var(--ic-action-default);\n  border-left: none;\n}\n\n.dynamic-container:dir(rtl) {\n  margin: var(--ic-space-xxxs) var(--ic-space-sm) var(--ic-space-xxs) 0;\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  Event,\n  EventEmitter,\n  State,\n  Method,\n  Watch,\n} from \"@stencil/core\";\nimport {\n  IcAdditionalFieldTypes,\n  IcSizes,\n  IcThemeMode,\n} from \"../../utils/types\";\nimport {\n  isSlotUsed,\n  onComponentRequiredPropUndefined,\n  renderHiddenInput,\n  removeHiddenInput,\n  addFormResetListener,\n  removeFormResetListener,\n  removeDisabledFalse,\n} from \"../../utils/helpers\";\n\n/**\n * @slot additional-field - Content to be displayed alongside a checkbox.\n * @slot label - Label for the checkbox.\n */\n@Component({\n  tag: \"ic-checkbox\",\n  styleUrl: \"ic-checkbox.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nexport class Checkbox {\n  private additionalFieldContainer?: HTMLDivElement;\n  private checkboxEl?: HTMLInputElement;\n  private labelSlot: HTMLElement | null;\n\n  @Element() el: HTMLIcCheckboxElement;\n\n  /**\n   * The style of additionalField that will be displayed if used.\n   */\n  @Prop({ reflect: true }) additionalFieldDisplay: IcAdditionalFieldTypes =\n    \"static\";\n\n  /**\n   * If `true`, the checkbox will be set to the checked state. This is only the initial state and will be updated to unchecked if the checkbox is clicked.\n   */\n  @Prop({ reflect: true, mutable: true }) checked = false;\n  @State() initiallyChecked = this.checked;\n\n  /**\n   * If `true`, the checkbox will be set to the disabled state.\n   */\n  @Prop() disabled = false;\n  @Watch(\"disabled\")\n  watchDisabledHandler(): void {\n    removeDisabledFalse(this.disabled, this.el);\n  }\n\n  /**\n   * The text to be displayed when dynamic.\n   */\n\n  @Prop() dynamicText = \"This selection requires additional answers\";\n\n  /**\n   * The <form> element to associate the checkbox with.\n   */\n  @Prop() form?: string;\n\n  /**\n   * The group label for the checkbox.\n   */\n  @Prop({ mutable: true }) groupLabel?: string;\n\n  /**\n   * If `true`, the label will be hidden and the required label value will be applied as an aria-label.\n   */\n  @Prop() hideLabel = false;\n\n  /**\n   * If `true`, the indeterminate state will be displayed when checked.\n   */\n  @Prop() indeterminate = false;\n  @State() displayIndeterminate = this.indeterminate;\n  @Watch(\"indeterminate\")\n  watchIndeterminateHandler(): void {\n    this.displayIndeterminate =\n      this.indeterminate && (this.nativeIndeterminateBehaviour || this.checked);\n  }\n\n  /**\n   * The label for the checkbox.\n   */\n  @Prop() label!: string;\n\n  /**\n   * The name for the checkbox. If not set when used in a checkbox group, the name will be based on the group name.\n   */\n  @Prop({ mutable: true }) name?: string;\n\n  /**\n   * If `true`, the checkbox will behave like a native checkbox where the `indeterminate` prop sets the indeterminate visual styling, independent of the `checked` state.\n   */\n  @Prop() nativeIndeterminateBehaviour = false;\n\n  /**\n   * The size of the checkbox to be displayed. This does not affect the font size of the label. If a checkbox is contained in a checkbox group, this will override the size set on checkbox group.\n   */\n  @Prop({ mutable: true }) size?: IcSizes;\n\n  /**\n   * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n   */\n  @Prop() theme: IcThemeMode = \"inherit\";\n\n  /**\n   * The value for the checkbox.\n   */\n  @Prop() value = \"\";\n\n  /**\n   * Emitted when a checkbox has been checked.\n   */\n  @Event() icCheck: EventEmitter<void>;\n\n  componentWillLoad(): void {\n    removeDisabledFalse(this.disabled, this.el);\n\n    addFormResetListener(this.el, this.handleFormReset);\n\n    const { parentElement } = this.el;\n    if (parentElement?.tagName === \"IC-CHECKBOX-GROUP\") {\n      const { name, label, size } = parentElement as HTMLIcCheckboxGroupElement;\n\n      if (!this.name) this.name = name;\n      if (!this.size) this.size = size;\n      this.groupLabel = label;\n    }\n  }\n\n  componentDidLoad(): void {\n    if (this.hasLabelSlot()) {\n      this.arrangeLabel();\n    } else {\n      onComponentRequiredPropUndefined(\n        [{ prop: this.label, propName: \"label\" }],\n        \"Checkbox\"\n      );\n    }\n  }\n\n  componentDidRender(): void {\n    if (this.additionalFieldDisplay === \"static\") {\n      this.el\n        .querySelectorAll(\"ic-text-field\")\n        .forEach((textfield) =>\n          textfield.setAttribute(\"disabled\", `${!this.checked}`)\n        );\n    } else if (this.additionalFieldContainer) {\n      this.additionalFieldContainer.style.display = !this.checked\n        ? \"none\"\n        : \"flex\";\n    }\n  }\n\n  disconnectedCallback(): void {\n    removeFormResetListener(this.el, this.handleFormReset);\n  }\n\n  /**\n   * Sets focus on the checkbox.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    this.checkboxEl?.focus();\n  }\n\n  private getCheckboxGroupId() {\n    return `ic-checkbox-${this.label}-${this.groupLabel}`.replace(/ /g, \"-\");\n  }\n\n  private hasLabelSlot() {\n    this.labelSlot = this.el.querySelector('[slot=\"label\"]');\n    return !!this.labelSlot;\n  }\n\n  private arrangeLabel() {\n    if (this.labelSlot) {\n      this.label = this.labelSlot.textContent?.trim() || \"\";\n      this.labelSlot.setAttribute(\"for\", this.getCheckboxGroupId());\n      if (this.disabled) {\n        this.labelSlot.setAttribute(\"aria-disabled\", \"true\");\n      }\n    }\n  }\n\n  private handleClick = () => {\n    this.checked = !this.checked;\n    this.displayIndeterminate =\n      !this.nativeIndeterminateBehaviour && this.indeterminate && this.checked;\n    this.icCheck.emit();\n  };\n\n  private handleFormReset = (): void => {\n    this.checked = this.initiallyChecked;\n  };\n\n  render() {\n    const {\n      additionalFieldDisplay,\n      checked,\n      disabled,\n      displayIndeterminate,\n      dynamicText,\n      el,\n      form,\n      handleClick,\n      hideLabel,\n      label,\n      name,\n      size,\n      theme,\n      value,\n    } = this;\n\n    const inputId = this.getCheckboxGroupId();\n\n    const isDynamicAdditionalField = additionalFieldDisplay === \"dynamic\";\n\n    checked\n      ? renderHiddenInput(el, value, name, disabled)\n      : removeHiddenInput(el);\n\n    const LabelContent = () =>\n      this.hasLabelSlot() ? (\n        <slot name=\"label\"></slot>\n      ) : (\n        <ic-typography class=\"checkbox-label\" variant=\"body\">\n          <label htmlFor={inputId}>{label}</label>\n        </ic-typography>\n      );\n\n    return (\n      <Host\n        class={{\n          \"ic-checkbox-disabled\": disabled,\n          [`ic-checkbox-${size}`]: !!size,\n          [`ic-theme-${theme}`]: theme !== \"inherit\",\n        }}\n      >\n        <div class=\"container\">\n          {displayIndeterminate ? (\n            <div class=\"indeterminate-symbol\" />\n          ) : (\n            checked && (\n              <svg\n                class=\"checkmark\"\n                viewBox=\"0 0 24 24\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n              >\n                <title>checkmark icon</title>\n                <path d=\"M21 6.285l-11.16 12.733-6.84-6.018 1.319-1.49 5.341 4.686 9.865-11.196 1.475 1.285z\" />\n              </svg>\n            )\n          )}\n          <input\n            role=\"checkbox\"\n            class={{\n              checkbox: true,\n              checked,\n              indeterminate: displayIndeterminate,\n            }}\n            ref={(el) => (this.checkboxEl = el)}\n            type=\"checkbox\"\n            name={name}\n            id={inputId}\n            value={value}\n            disabled={disabled}\n            checked={checked}\n            indeterminate={displayIndeterminate}\n            onClick={handleClick}\n            form={form}\n            aria-label={hideLabel || this.hasLabelSlot() ? label : undefined}\n          ></input>\n          {!hideLabel && <LabelContent />}\n        </div>\n        <span\n          id={`${inputId}-additional-field-description`}\n          role=\"alert\"\n          class=\"sr-only\"\n        >\n          {isDynamicAdditionalField && checked ? dynamicText : \"\"}\n        </span>\n        {isSlotUsed(el, \"additional-field\") && (\n          <div\n            class=\"dynamic-container\"\n            ref={(el) => (this.additionalFieldContainer = el)}\n          >\n            {isDynamicAdditionalField && <div class=\"branch-corner\"></div>}\n            <div class=\"dynamic-field-container\">\n              {isDynamicAdditionalField && (\n                <ic-typography variant=\"caption\">\n                  <p class=\"dynamic-text\">\n                    {isDynamicAdditionalField && checked ? dynamicText : \"\"}\n                  </p>\n                </ic-typography>\n              )}\n              <div\n                class={{\n                  \"additional-field-wrapper\": !isDynamicAdditionalField,\n                }}\n              >\n                <slot name=\"additional-field\"></slot>\n              </div>\n            </div>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ic-checkbox.entry.cjs.js","mappings":"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","names":["removeDisabledFalse","addFormResetListener","onComponentRequiredPropUndefined","removeFormResetListener","renderHiddenInput","removeHiddenInput","h","Host","isSlotUsed"],"sources":["src/components/ic-checkbox/ic-checkbox.css?tag=ic-checkbox&encapsulation=shadow","src/components/ic-checkbox/ic-checkbox.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host(.ic-checkbox-disabled) {\n  pointer-events: none;\n}\n\n.container {\n  display: flex;\n  width: fit-content;\n  padding: var(--ic-space-xxs) 0 var(--ic-space-xxs) var(--ic-space-xxs);\n  margin-bottom: var(--ic-space-xxs);\n  align-items: center;\n}\n\n:host(.ic-data-table-checkbox) .container {\n  padding: 0;\n  margin-bottom: 0;\n}\n\n:host(.ic-checkbox-small) .container {\n  margin-bottom: var(--ic-space-xxxs);\n}\n\n.checkbox {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  display: block;\n  position: relative;\n  top: 0;\n  left: 0;\n  height: var(--ic-space-lg);\n  width: var(--ic-space-lg);\n  background-color: var(--ic-checkbox-background-unselected);\n  border: var(--ic-border-width) solid var(--ic-checkbox-border-unselected);\n  border-radius: var(--ic-border-radius);\n  outline: none;\n  cursor: pointer;\n  transition: var(--ic-easing-transition-fast);\n  flex-shrink: 0;\n}\n\n:host .container svg {\n  width: var(--ic-space-lg);\n  height: var(--ic-space-lg);\n}\n\n:host(.ic-checkbox-small) .checkbox,\n:host(.ic-checkbox-small) .container svg {\n  width: var(--ic-space-md);\n  height: var(--ic-space-md);\n}\n\n:host(.ic-checkbox-large) .checkbox,\n:host(.ic-checkbox-large) .container svg {\n  width: var(--ic-space-xl);\n  height: var(--ic-space-xl);\n}\n\n.checkbox:checked {\n  background-color: var(--ic-checkbox-background-selected);\n  border: var(--ic-border-width) solid var(--ic-checkbox-background-selected);\n  transition: var(--ic-easing-transition-slow);\n}\n\n.checkbox:checked:disabled {\n  background-color: var(--ic-checkbox-background-selected-disabled);\n  border: var(--ic-border-width) solid\n    var(--ic-checkbox-background-selected-disabled);\n}\n\n.checkbox:indeterminate,\n.checkbox.indeterminate:checked {\n  background-color: var(--ic-checkbox-background-indeterminate);\n  border: 0.125rem solid var(--ic-checkbox-background-indeterminate);\n}\n\n.checkbox:indeterminate:disabled,\n.checkbox.indeterminate:checked:disabled {\n  background-color: var(--ic-checkbox-background-indeterminate-disabled);\n  border: 0.125rem solid var(--ic-checkbox-background-indeterminate-disabled);\n}\n\n.checkbox:checked:hover {\n  background-color: var(--ic-checkbox-background-selected-hover);\n}\n\n.checkbox:indeterminate:hover,\n.checkbox.indeterminate:checked:hover {\n  background-color: var(--ic-checkbox-background-indeterminate-hover);\n  border: 0.125rem solid var(--ic-checkbox-background-indeterminate-hover);\n}\n\n.checkbox:checked:active {\n  background-color: var(--ic-checkbox-background-selected-pressed);\n}\n\n.checkbox:indeterminate:active,\n.checkbox.indeterminate:checked:active {\n  background-color: var(--ic-checkbox-background-indeterminate-pressed);\n  border: 0.125rem solid var(--ic-checkbox-background-indeterminate-pressed);\n}\n\n.checkbox:hover {\n  box-shadow: 0 0 0 0.25rem var(--ic-checkbox-action-background-hover);\n  border: var(--ic-border-width) solid\n    var(--ic-checkbox-border-unselected-hover);\n}\n\n.checkbox:active {\n  box-shadow: 0 0 0 0.25rem var(--ic-checkbox-action-background-pressed);\n  border: var(--ic-border-width) solid\n    var(--ic-checkbox-border-unselected-pressed);\n}\n\n.checkbox:focus {\n  box-shadow: var(--ic-border-focus);\n}\n\n.checkbox:disabled {\n  border: var(--ic-border-width) dashed\n    var(--ic-checkbox-border-unselected-disabled);\n}\n\n.checkbox-label {\n  --ic-typography-color: var(--ic-checkbox-text);\n}\n\n.checkbox-label > label {\n  padding-left: var(--ic-space-sm);\n  display: inline-block;\n}\n\n::slotted([slot=\"label\"]) {\n  padding-left: var(--ic-space-sm) !important;\n  color: var(--ic-checkbox-text);\n}\n\n:host(.ic-checkbox-disabled) .checkbox-label {\n  color: var(--ic-checkbox-text-disabled);\n\n  --ic-typography-color: var(--ic-checkbox-text-disabled);\n}\n\n:host(.ic-checkbox-disabled) ::slotted([slot=\"label\"]) {\n  color: var(--ic-checkbox-text-disabled);\n\n  --ic-typography-color: var(--ic-checkbox-text-disabled);\n}\n\n.checkbox-label:hover {\n  cursor: pointer;\n}\n\n.checkmark {\n  position: relative;\n  right: calc(-1 * var(--ic-space-lg));\n  margin-left: calc(-1 * var(--ic-space-lg));\n  fill: var(--ic-checkbox-icon-pressed);\n  z-index: 1;\n  background-color: transparent;\n  pointer-events: none;\n  flex-shrink: 0;\n}\n\n:host(.ic-checkbox-small) .checkmark {\n  margin-left: calc(-1 * var(--ic-space-md));\n  right: calc(-1 * var(--ic-space-md));\n}\n\n:host(.ic-checkbox-large) .checkmark {\n  margin-left: calc(-1 * var(--ic-space-xl));\n  right: calc(-1 * var(--ic-space-xl));\n}\n\n.indeterminate-symbol {\n  position: relative;\n  width: 0.875rem;\n  height: var(--ic-space-xxxs);\n  right: -1.188rem;\n  margin-left: -0.875rem;\n  z-index: 1;\n  background-color: var(--ic-checkbox-icon-indeterminate);\n  pointer-events: none;\n  flex-shrink: 0;\n}\n\n:host(.ic-checkbox-small) .indeterminate-symbol {\n  width: 0.6rem;\n  right: -0.8rem;\n  margin-left: -0.6rem;\n}\n\n:host(.ic-checkbox-large) .indeterminate-symbol {\n  width: 1.25rem;\n  right: -1.625rem;\n  margin-left: -1.25rem;\n}\n\n.additional-field-wrapper {\n  margin-left: calc(var(--ic-space-md) + var(--ic-space-lg));\n  margin-top: calc(var(--ic-space-sm) / 2);\n}\n\n.branch-corner {\n  height: var(--ic-space-md);\n  width: var(--ic-space-xl);\n  border-radius: 0 0 0 0.188rem;\n  border-bottom: 0.125rem solid var(--ic-checkbox-required-bar);\n  border-left: 0.125rem solid var(--ic-checkbox-required-bar);\n}\n\n.dynamic-container {\n  display: flex;\n  position: relative;\n  margin: var(--ic-space-xxxs) 0 var(--ic-space-xxs) var(--ic-space-md);\n  gap: var(--ic-space-xs);\n}\n\n.dynamic-text {\n  color: var(--ic-checkbox-required-text);\n\n  --ic-typography-color: var(--ic-checkbox-required-text);\n\n  margin-top: calc(var(--ic-space-sm) / 2);\n  margin-bottom: var(--ic-space-xs);\n  border-radius: 2%;\n}\n\n.dynamic-field-container {\n  flex: 100%;\n}\n\n.sr-only {\n  position: absolute;\n  left: -9999px;\n}\n\n@media (max-width: 576px) {\n  ::slotted(*) {\n    --input-width: 100%;\n  }\n\n  .dynamic-field-container {\n    flex: initial;\n  }\n}\n\n@media (forced-colors: active) {\n  /* Styles here only apply to Forced Colors Mode */\n  .checkbox {\n    appearance: revert;\n  }\n\n  .checkbox:focus-visible {\n    outline: 0.125rem solid highlight;\n  }\n\n  .checkbox:disabled:not(:checked) {\n    appearance: none;\n    border-color: GrayText;\n  }\n\n  .checkmark {\n    fill: none;\n  }\n\n  .indeterminate-symbol {\n    display: none;\n  }\n}\n\n/* Right to left */\n.checkmark:dir(rtl) {\n  right: 0;\n}\n\n.checkbox-label:dir(rtl) {\n  padding-right: var(--ic-space-sm);\n  padding-left: 0;\n}\n\n.indeterminate-symbol:dir(rtl) {\n  right: 0.288rem;\n}\n\n.branch-corner:dir(rtl) {\n  border-radius: 0 0 0.188rem;\n  border-right: 0.125rem solid var(--ic-action-default);\n  border-left: none;\n}\n\n.dynamic-container:dir(rtl) {\n  margin: var(--ic-space-xxxs) var(--ic-space-sm) var(--ic-space-xxs) 0;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .checkbox,\n  .checkbox:checked {\n    transition: none;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  Event,\n  EventEmitter,\n  State,\n  Method,\n  Watch,\n} from \"@stencil/core\";\nimport {\n  IcAdditionalFieldTypes,\n  IcSizes,\n  IcThemeMode,\n} from \"../../utils/types\";\nimport {\n  isSlotUsed,\n  onComponentRequiredPropUndefined,\n  renderHiddenInput,\n  removeHiddenInput,\n  addFormResetListener,\n  removeFormResetListener,\n  removeDisabledFalse,\n} from \"../../utils/helpers\";\n\n/**\n * @slot additional-field - Content to be displayed alongside a checkbox.\n * @slot label - Label for the checkbox.\n */\n@Component({\n  tag: \"ic-checkbox\",\n  styleUrl: \"ic-checkbox.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nexport class Checkbox {\n  private additionalFieldContainer?: HTMLDivElement;\n  private checkboxEl?: HTMLInputElement;\n  private labelSlot: HTMLElement | null;\n\n  @Element() el: HTMLIcCheckboxElement;\n\n  /**\n   * The style of additionalField that will be displayed if used.\n   */\n  @Prop({ reflect: true }) additionalFieldDisplay: IcAdditionalFieldTypes =\n    \"static\";\n\n  /**\n   * If `true`, the checkbox will be set to the checked state. This is only the initial state and will be updated to unchecked if the checkbox is clicked.\n   */\n  @Prop({ reflect: true, mutable: true }) checked = false;\n  @State() initiallyChecked = this.checked;\n\n  /**\n   * If `true`, the checkbox will be set to the disabled state.\n   */\n  @Prop() disabled = false;\n  @Watch(\"disabled\")\n  watchDisabledHandler(): void {\n    removeDisabledFalse(this.disabled, this.el);\n  }\n\n  /**\n   * The text to be displayed when dynamic.\n   */\n\n  @Prop() dynamicText = \"This selection requires additional answers\";\n\n  /**\n   * The <form> element to associate the checkbox with.\n   */\n  @Prop() form?: string;\n\n  /**\n   * The group label for the checkbox.\n   */\n  @Prop({ mutable: true }) groupLabel?: string;\n\n  /**\n   * If `true`, the label will be hidden and the required label value will be applied as an aria-label.\n   */\n  @Prop() hideLabel = false;\n\n  /**\n   * If `true`, the indeterminate state will be displayed when checked.\n   */\n  @Prop() indeterminate = false;\n  @State() displayIndeterminate = this.indeterminate;\n  @Watch(\"indeterminate\")\n  watchIndeterminateHandler(): void {\n    this.displayIndeterminate =\n      this.indeterminate && (this.nativeIndeterminateBehaviour || this.checked);\n  }\n\n  /**\n   * The label for the checkbox.\n   */\n  @Prop() label!: string;\n\n  /**\n   * The name for the checkbox. If not set when used in a checkbox group, the name will be based on the group name.\n   */\n  @Prop({ mutable: true }) name?: string;\n\n  /**\n   * If `true`, the checkbox will behave like a native checkbox where the `indeterminate` prop sets the indeterminate visual styling, independent of the `checked` state.\n   */\n  @Prop() nativeIndeterminateBehaviour = false;\n\n  /**\n   * The size of the checkbox to be displayed. This does not affect the font size of the label. If a checkbox is contained in a checkbox group, this will override the size set on checkbox group.\n   */\n  @Prop({ mutable: true }) size?: IcSizes;\n\n  /**\n   * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n   */\n  @Prop() theme: IcThemeMode = \"inherit\";\n\n  /**\n   * The value for the checkbox.\n   */\n  @Prop() value = \"\";\n\n  /**\n   * Emitted when a checkbox has been checked.\n   */\n  @Event() icCheck: EventEmitter<void>;\n\n  componentWillLoad(): void {\n    removeDisabledFalse(this.disabled, this.el);\n\n    addFormResetListener(this.el, this.handleFormReset);\n\n    const { parentElement } = this.el;\n    if (parentElement?.tagName === \"IC-CHECKBOX-GROUP\") {\n      const { name, label, size } = parentElement as HTMLIcCheckboxGroupElement;\n\n      if (!this.name) this.name = name;\n      if (!this.size) this.size = size;\n      this.groupLabel = label;\n    }\n  }\n\n  componentDidLoad(): void {\n    if (this.hasLabelSlot()) {\n      this.arrangeLabel();\n    } else {\n      onComponentRequiredPropUndefined(\n        [{ prop: this.label, propName: \"label\" }],\n        \"Checkbox\"\n      );\n    }\n  }\n\n  componentDidRender(): void {\n    if (this.additionalFieldDisplay === \"static\") {\n      this.el\n        .querySelectorAll(\"ic-text-field\")\n        .forEach((textfield) =>\n          textfield.setAttribute(\"disabled\", `${!this.checked}`)\n        );\n    } else if (this.additionalFieldContainer) {\n      this.additionalFieldContainer.style.display = !this.checked\n        ? \"none\"\n        : \"flex\";\n    }\n  }\n\n  disconnectedCallback(): void {\n    removeFormResetListener(this.el, this.handleFormReset);\n  }\n\n  /**\n   * Sets focus on the checkbox.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    this.checkboxEl?.focus();\n  }\n\n  private getCheckboxGroupId() {\n    return `ic-checkbox-${this.label}-${this.groupLabel}`.replace(/ /g, \"-\");\n  }\n\n  private hasLabelSlot() {\n    this.labelSlot = this.el.querySelector('[slot=\"label\"]');\n    return !!this.labelSlot;\n  }\n\n  private arrangeLabel() {\n    if (this.labelSlot) {\n      this.label = this.labelSlot.textContent?.trim() || \"\";\n      this.labelSlot.setAttribute(\"for\", this.getCheckboxGroupId());\n      if (this.disabled) {\n        this.labelSlot.setAttribute(\"aria-disabled\", \"true\");\n      }\n    }\n  }\n\n  private handleClick = () => {\n    this.checked = !this.checked;\n    this.displayIndeterminate =\n      !this.nativeIndeterminateBehaviour && this.indeterminate && this.checked;\n    this.icCheck.emit();\n  };\n\n  private handleFormReset = (): void => {\n    this.checked = this.initiallyChecked;\n  };\n\n  render() {\n    const {\n      additionalFieldDisplay,\n      checked,\n      disabled,\n      displayIndeterminate,\n      dynamicText,\n      el,\n      form,\n      handleClick,\n      hideLabel,\n      label,\n      name,\n      size,\n      theme,\n      value,\n    } = this;\n\n    const inputId = this.getCheckboxGroupId();\n\n    const isDynamicAdditionalField = additionalFieldDisplay === \"dynamic\";\n\n    checked\n      ? renderHiddenInput(el, value, name, disabled)\n      : removeHiddenInput(el);\n\n    const LabelContent = () =>\n      this.hasLabelSlot() ? (\n        <slot name=\"label\"></slot>\n      ) : (\n        <ic-typography class=\"checkbox-label\" variant=\"body\">\n          <label htmlFor={inputId}>{label}</label>\n        </ic-typography>\n      );\n\n    return (\n      <Host\n        class={{\n          \"ic-checkbox-disabled\": disabled,\n          [`ic-checkbox-${size}`]: !!size,\n          [`ic-theme-${theme}`]: theme !== \"inherit\",\n        }}\n      >\n        <div class=\"container\">\n          {displayIndeterminate ? (\n            <div class=\"indeterminate-symbol\" />\n          ) : (\n            checked && (\n              <svg\n                class=\"checkmark\"\n                viewBox=\"0 0 24 24\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n              >\n                <title>checkmark icon</title>\n                <path d=\"M21 6.285l-11.16 12.733-6.84-6.018 1.319-1.49 5.341 4.686 9.865-11.196 1.475 1.285z\" />\n              </svg>\n            )\n          )}\n          <input\n            role=\"checkbox\"\n            class={{\n              checkbox: true,\n              checked,\n              indeterminate: displayIndeterminate,\n            }}\n            ref={(el) => (this.checkboxEl = el)}\n            type=\"checkbox\"\n            name={name}\n            id={inputId}\n            value={value}\n            disabled={disabled}\n            checked={checked}\n            indeterminate={displayIndeterminate}\n            onClick={handleClick}\n            form={form}\n            aria-label={hideLabel || this.hasLabelSlot() ? label : undefined}\n          ></input>\n          {!hideLabel && <LabelContent />}\n        </div>\n        <span\n          id={`${inputId}-additional-field-description`}\n          role=\"alert\"\n          class=\"sr-only\"\n        >\n          {isDynamicAdditionalField && checked ? dynamicText : \"\"}\n        </span>\n        {isSlotUsed(el, \"additional-field\") && (\n          <div\n            class=\"dynamic-container\"\n            ref={(el) => (this.additionalFieldContainer = el)}\n          >\n            {isDynamicAdditionalField && <div class=\"branch-corner\"></div>}\n            <div class=\"dynamic-field-container\">\n              {isDynamicAdditionalField && (\n                <ic-typography variant=\"caption\">\n                  <p class=\"dynamic-text\">\n                    {isDynamicAdditionalField && checked ? dynamicText : \"\"}\n                  </p>\n                </ic-typography>\n              )}\n              <div\n                class={{\n                  \"additional-field-wrapper\": !isDynamicAdditionalField,\n                }}\n              >\n                <slot name=\"additional-field\"></slot>\n              </div>\n            </div>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/ic-data-list.cjs.entry.js

@@ -25,10 +25,10 @@ const DataList = class {
             Array.from(el.children).forEach((child) => child.setAttribute("size", "small"));
         }
         const hasHeading = heading || el.querySelector('[slot="heading"]');
-        return (index.h(index.Host, { key: '1c611db796f79fc54af3a89e4b7ed0439e09f8ce', class: {
+        return (index.h(index.Host, { key: '57df6c957322ddb4cdda3901c64e919656abf92e', class: {
                 "ic-data-list-small": size === "small",
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            } }, index.h("div", { key: '5936cad1baba390f150bb72a2ef5b0ee7eaf5750', class: "heading", id: "data-list-heading" }, index.h("slot", { key: '2d0080f2848355022ea118f8ef2f78cafb584bf3', name: "heading" }, index.h("ic-typography", { key: 'dee1629146c3e50998552ae3c814eee17bc196c5', variant: "h3" }, heading))), index.h("div", { key: 'bb1c6bf91cfcd71205acd3d15b504057d3fd566f', class: { divider: true, "divider-no-heading": !hasHeading } }), index.h("ul", { key: '838380d006c00c28fb309aef1f57ab3bd8534102', "aria-labelledby": "data-list-heading", class: "rows" }, index.h("slot", { key: '6f84ce3a6716791113f5288a17c3a9a2416552d9' }))));
+            } }, index.h("div", { key: '273e0ce2fcde309669514b332964e129d1ef42a6', class: "heading", id: "data-list-heading" }, index.h("slot", { key: '1be24c7150c268064207cf58f083ab9bd8cb27c7', name: "heading" }, index.h("ic-typography", { key: '30858cd0d5c66204a030449c5b8212c1c41d1838', variant: "h3" }, heading))), index.h("div", { key: '2f13fa15abc8053f312ff21454b6a89d15b4eabd', class: { divider: true, "divider-no-heading": !hasHeading } }), index.h("ul", { key: '582dd8f21ce4e3a9dd845aa46294ebe2c5163d01', "aria-labelledby": "data-list-heading", class: "rows" }, index.h("slot", { key: '42b137d71f0c9e3f836f1efdde58f62d90b080a4' }))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/ic-data-row.cjs.entry.js

@@ -73,12 +73,12 @@ const DataRow = class {
     }
     render() {
         const { el, listSize, hasEndComponent, label, renderCellContent, size, theme, value, } = this;
-        return (index.h(index.Host, { key: '720dc55ba7e1000ce6837a15d9d7accc726cc1ff', class: {
+        return (index.h(index.Host, { key: 'd5c6ff5a373e32e4e310dd0ddb6bbcfea0f2704a', class: {
                 ["ic-data-row-small"]: size === "small",
                 ["breakpoint-medium"]: listSize === "m",
                 ["breakpoint-xs"]: listSize === "xs",
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            }, role: "listitem" }, index.h("div", { key: '28e63fbb09ad16bcc6843a85047635e91006a220', class: "data" }, index.h("div", { key: '698f607af4b50db1bc837d83df0f46ee9cc4201f', class: "text-cells" }, (helpers.isSlotUsed(el, "label") || label) && renderCellContent("label"), (helpers.isSlotUsed(el, "value") || value) && renderCellContent("value")), hasEndComponent && (index.h("div", { key: '1febd59bc77239e0cedcc64953c0a5d2b4bbba6d', class: "end-component" }, index.h("slot", { key: 'dfa67b2ff598520d1b3f47a1479e4448aa84986f', name: "end-component" })))), index.h("div", { key: '989733a9cf32e8d452c4c2d4ae24844c7d38ece2', class: "divider" })));
+            }, role: "listitem" }, index.h("div", { key: 'b2867cd3b8a493ec7e4f4cff48849d94560c1fdc', class: "data" }, index.h("div", { key: 'd3fd667e4612907b81081ddae99c3228e2dbb954', class: "text-cells" }, (helpers.isSlotUsed(el, "label") || label) && renderCellContent("label"), (helpers.isSlotUsed(el, "value") || value) && renderCellContent("value")), hasEndComponent && (index.h("div", { key: 'dbbb33f8a2726f801dc72ca1f11544073ba8bc69', class: "end-component" }, index.h("slot", { key: 'fd4b247214447bac2a7a5bc9385a8f91cb44436f', name: "end-component" })))), index.h("div", { key: '8e19fde06b9fa34a3295e37fe726f163593f6674', class: "divider" })));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/ic-dialog.cjs.entry.js

@@ -278,7 +278,7 @@ const Dialog = class {
     }
     render() {
         const { dialogRendered, disableHeightConstraint, fadeIn, theme, size } = this;
-        return (index.h(index.Host, { key: '97f96f655d95bb7192eb44e850f495ed133e7d73', class: {
+        return (index.h(index.Host, { key: '015eecd542dfaaaa9a8060961fd4dc2740675b9d', class: {
                 "ic-dialog-hidden": !dialogRendered,
                 "ic-dialog-fade-in": fadeIn,
                 "disable-height-constraint": !!disableHeightConstraint,

package/dist/cjs/ic-divider.cjs.entry.js

@@ -12,6 +12,7 @@ const IcDividerStyle0 = icDividerCss;
 const Divider = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        this.isSlottedInSideNav = false;
         this.foregroundColor = helpers.getBrandForegroundAppearance();
         /**
          * The line style of the divider.
@@ -35,6 +36,16 @@ const Divider = class {
          * The thickness of the divider.
          */
         this.weight = "thin";
+        this.getHostAttributes = (renderLabel) => this.isSlottedInSideNav
+            ? {
+                "aria-hidden": "true", // Prevent divider being included in screen reader count of items in side navigation
+                role: "listitem",
+            }
+            : (this.orientation === "vertical" ||
+                (renderLabel && !!helpers.isPropDefined(this.labelPlacement))) && {
+                "aria-orientation": this.orientation,
+                role: "separator",
+            };
     }
     brandChangeHandler(ev) {
         this.foregroundColor = ev.detail.mode;
@@ -45,8 +56,7 @@ const Divider = class {
         if (parentEl) {
             const isBottomSideNav = parentEl.classList.contains("bottom-side-nav");
             const isBottomWrapper = (_a = parentEl.parentElement) === null || _a === void 0 ? void 0 : _a.classList.contains("bottom-wrapper");
-            if (parentEl.tagName === "IC-SIDE-NAVIGATION" ||
-                (isBottomSideNav && isBottomWrapper)) {
+            if (this.isSlottedInSideNav || (isBottomSideNav && isBottomWrapper)) {
                 this.el.classList.add("ic-side-navigation-keyline");
                 if (this.foregroundColor === "light") {
                     this.theme = "dark";
@@ -58,6 +68,9 @@ const Divider = class {
         }
     }
     componentWillRender() {
+        var _a;
+        this.isSlottedInSideNav =
+            ((_a = this.el.parentElement) === null || _a === void 0 ? void 0 : _a.tagName) === "IC-SIDE-NAVIGATION";
         this.updateMonochromeState();
     }
     render() {
@@ -98,11 +111,7 @@ const Divider = class {
                 [`ic-divider-${weight}`]: true,
                 [`ic-divider-${borderStyle}`]: true,
                 [`ic-divider-label-${labelPlacement}`]: helpers.slotHasContent(this.el, "label") || !helpers.isEmptyString(label),
-            } }, ((orientation === "vertical" ||
-            (!!renderLabel() && !!helpers.isPropDefined(labelPlacement))) && {
-            "aria-orientation": orientation,
-            role: "separator",
-        })), orientation === "horizontal" &&
+            } }, this.getHostAttributes(!!renderLabel())), orientation === "horizontal" &&
             (!renderLabel() || !helpers.isPropDefined(labelPlacement)) && index.h("hr", null), !!helpers.isPropDefined(labelPlacement) && !!renderLabel() && renderLabel(), orientation === "vertical" &&
             (!renderLabel() || !helpers.isPropDefined(labelPlacement)) && (index.h("div", { class: "vertical-divider" }))));
     }

package/dist/cjs/ic-divider.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"ic-divider.entry.cjs.js","mappings":"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","names":["getBrandForegroundAppearance","slotHasContent","h","isPropDefined","Host","isEmptyString"],"sources":["src/components/ic-divider/ic-divider.css?tag=ic-divider&encapsulation=scoped","src/components/ic-divider/ic-divider.tsx"],"sourcesContent":["/**\n  * @prop --ic-divider-vertical-height: The height of a vertical divider. The default value is `inherit`. \n  */\n\n/**\n  * @prop --ic-divider-horizontal-width: The width of a horizontal divider. The default value is `inherit`.\n  */\n\n/**\n  * @prop --ic-divider-label-width: The max-width of the divider label. When orientation is set to `horizontal`, the default value is `max(20rem, 60%)`. When orientation is set to `vertical`, the default value is `20 rem`.\n  */\n\n/* IC-DIVIDER COLORS */\n\n/**\n  * @internal @prop --ic-divider-background\n  */\n\n/**\n  * @internal @prop --ic-divider-background-monochrome\n  */\n\n/**\n  * @internal @prop --ic-divider-label\n  */\n\n/**\n  * @internal @prop --ic-divider-label-monochrome\n  */\n\n/* Horizontal Divider */\n:host(.ic-divider-horizontal) {\n  display: flex;\n  width: var(--ic-divider-horizontal-width, 100%);\n  align-items: center;\n  -moz-column-gap: var(--ic-space-xxs);\n       column-gap: var(--ic-space-xxs);\n}\n\nhr {\n  padding: 0;\n  margin: 0;\n  border: none;\n  border-bottom: solid var(--ic-space-1px) var(--ic-divider-background);\n  width: inherit;\n}\n\n:host(.ic-divider-horizontal)::before,\n:host(.ic-divider-horizontal)::after {\n  border-left: none !important;\n}\n\n:host(.ic-divider-horizontal.ic-divider-label-right)::before,\n:host(.ic-divider-horizontal.ic-divider-label-center)::before,\n:host(.ic-divider-horizontal.ic-divider-label-left)::after,\n:host(.ic-divider-horizontal.ic-divider-label-center)::after {\n  content: \"\";\n  border: none;\n  width: 100%;\n}\n\n/* Vertical Divider */\n:host(.ic-divider-vertical) {\n  display: flex;\n  flex-direction: column;\n  height: var(--ic-divider-vertical-height, inherit);\n  width: -moz-max-content;\n  width: max-content;\n  align-items: center;\n  -moz-column-gap: var(--ic-space-xxs);\n       column-gap: var(--ic-space-xxs);\n  border: none;\n}\n\n:host(.ic-divider-vertical) div.vertical-divider {\n  display: flex;\n  height: inherit;\n}\n\n:host(.ic-divider-vertical.ic-divider-label-bottom)::before,\n:host(.ic-divider-vertical.ic-divider-label-center)::before,\n:host(.ic-divider-vertical.ic-divider-label-top)::after,\n:host(.ic-divider-vertical.ic-divider-label-center)::after {\n  content: \"\";\n  height: 100%;\n}\n\n/* Theme */\nhr,\n:host(.ic-divider-horizontal.ic-divider-label-right)::before,\n:host(.ic-divider-horizontal.ic-divider-label-center)::before,\n:host(.ic-divider-horizontal.ic-divider-label-left)::after,\n:host(.ic-divider-horizontal.ic-divider-label-center)::after {\n  border-bottom: solid var(--ic-space-1px) var(--ic-divider-background);\n}\n\n:host(.ic-divider-monochrome) hr,\n:host(.ic-divider-monochrome.ic-divider-horizontal.ic-divider-label-right)::before,\n:host(.ic-divider-monochrome.ic-divider-horizontal.ic-divider-label-center)::before,\n:host(.ic-divider-monochrome.ic-divider-horizontal.ic-divider-label-left)::after,\n:host(.ic-divider-monochrome.ic-divider-horizontal.ic-divider-label-center)::after {\n  border-bottom-color: var(--ic-divider-background-monochrome);\n}\n\n:host() div.vertical-divider,\n:host(.ic-divider-vertical.ic-divider-label-bottom)::before,\n:host(.ic-divider-vertical.ic-divider-label-center)::before,\n:host(.ic-divider-vertical.ic-divider-label-top)::after,\n:host(.ic-divider-vertical.ic-divider-label-center)::after {\n  border-left: solid var(--ic-space-1px) var(--ic-divider-background);\n}\n\n:host(.ic-divider-monochrome) div.vertical-divider,\n:host(.ic-divider-monochrome.ic-divider-vertical.ic-divider-label-bottom)::before,\n:host(.ic-divider-monochrome.ic-divider-vertical.ic-divider-label-center)::before,\n:host(.ic-divider-monochrome.ic-divider-vertical.ic-divider-label-top)::after,\n:host(.ic-divider-monochrome.ic-divider-vertical.ic-divider-label-center)::after {\n  border-left-color: var(--ic-divider-background-monochrome);\n}\n\n/* Divider in ic-side-navigation */\n:host(.ic-side-navigation-keyline.ic-theme-dark) {\n  --ic-side-navigation-keyline: var(--ic-state-layer-lighten-20);\n}\n\n:host(.ic-side-navigation-keyline.ic-theme-light) {\n  --ic-side-navigation-keyline: var(--ic-state-layer-darken-20);\n}\n\n:host(.ic-side-navigation-keyline.ic-theme-dark) hr,\n:host(.ic-side-navigation-keyline.ic-theme-dark.ic-divider-horizontal.ic-divider-label-right)::before,\n:host(.ic-side-navigation-keyline.ic-theme-dark.ic-divider-horizontal.ic-divider-label-center)::before,\n:host(.ic-side-navigation-keyline.ic-theme-dark.ic-divider-horizontal.ic-divider-label-left)::after,\n:host(.ic-side-navigation-keyline.ic-theme-dark.ic-divider-horizontal.ic-divider-label-center)::after {\n  border-bottom-color: var(--ic-side-navigation-keyline);\n}\n\n:host(.ic-side-navigation-keyline.ic-theme-dark) div.vertical-divider,\n:host(.ic-side-navigation-keyline.ic-theme-dark.ic-divider-vertical.ic-divider-label-bottom)::before,\n:host(.ic-side-navigation-keyline.ic-theme-dark.ic-divider-vertical.ic-divider-label-center)::before,\n:host(.ic-side-navigation-keyline.ic-theme-dark.ic-divider-vertical.ic-divider-label-top)::after,\n:host(.ic-side-navigation-keyline.ic-theme-dark.ic-divider-vertical.ic-divider-label-center)::after {\n  border-left-color: var(--ic-side-navigation-keyline);\n}\n\n:host(.ic-side-navigation-keyline.ic-theme-light) hr,\n:host(.ic-side-navigation-keyline.ic-theme-light.ic-divider-horizontal.ic-divider-label-right)::before,\n:host(.ic-side-navigation-keyline.ic-theme-light.ic-divider-horizontal.ic-divider-label-center)::before,\n:host(.ic-side-navigation-keyline.ic-theme-light.ic-divider-horizontal.ic-divider-label-left)::after,\n:host(.ic-side-navigation-keyline.ic-theme-light.ic-divider-horizontal.ic-divider-label-center)::after {\n  border-bottom-color: var(--ic-side-navigation-keyline);\n}\n\n:host(.ic-side-navigation-keyline.ic-theme-light) div.vertical-divider,\n:host(.ic-side-navigation-keyline.ic-theme-light.ic-divider-vertical.ic-divider-label-bottom)::before,\n:host(.ic-side-navigation-keyline.ic-theme-light.ic-divider-vertical.ic-divider-label-center)::before,\n:host(.ic-side-navigation-keyline.ic-theme-light.ic-divider-vertical.ic-divider-label-top)::after,\n:host(.ic-side-navigation-keyline.ic-theme-light.ic-divider-vertical.ic-divider-label-center)::after {\n  border-left-color: var(--ic-divider-background-monochrome);\n}\n\n/* Weight */\n:host(.ic-divider-very-thick) hr,\n:host(.ic-divider-very-thick.ic-divider-label-right)::before,\n:host(.ic-divider-very-thick.ic-divider-label-center)::before,\n:host(.ic-divider-very-thick.ic-divider-label-left)::after,\n:host(.ic-divider-very-thick.ic-divider-label-center)::after {\n  border-bottom-width: var(--ic-space-xs);\n}\n\n:host(.ic-divider-very-thick) .vertical-divider,\n:host(.ic-divider-very-thick.ic-divider-label-bottom)::before,\n:host(.ic-divider-very-thick.ic-divider-label-center)::before,\n:host(.ic-divider-very-thick.ic-divider-label-top)::after,\n:host(.ic-divider-very-thick.ic-divider-label-center)::after {\n  border-left-width: var(--ic-space-xs);\n}\n\n:host(.ic-divider-thick) hr,\n:host(.ic-divider-thick.ic-divider-label-right)::before,\n:host(.ic-divider-thick.ic-divider-label-center)::before,\n:host(.ic-divider-thick.ic-divider-label-left)::after,\n:host(.ic-divider-thick.ic-divider-label-center)::after {\n  border-bottom-width: var(--ic-space-xxs);\n}\n\n:host(.ic-divider-thick) .vertical-divider,\n:host(.ic-divider-thick.ic-divider-label-bottom)::before,\n:host(.ic-divider-thick.ic-divider-label-center)::before,\n:host(.ic-divider-thick.ic-divider-label-top)::after,\n:host(.ic-divider-thick.ic-divider-label-center)::after {\n  border-left-width: var(--ic-space-xxs);\n}\n\n:host(.ic-divider-medium) hr,\n:host(.ic-divider-medium.ic-divider-label-right)::before,\n:host(.ic-divider-medium.ic-divider-label-center)::before,\n:host(.ic-divider-medium.ic-divider-label-left)::after,\n:host(.ic-divider-medium.ic-divider-label-center)::after {\n  border-bottom-width: var(--ic-space-xxxs);\n}\n\n:host(.ic-divider-medium) .vertical-divider,\n:host(.ic-divider-medium.ic-divider-label-bottom)::before,\n:host(.ic-divider-medium.ic-divider-label-center)::before,\n:host(.ic-divider-medium.ic-divider-label-top)::after,\n:host(.ic-divider-medium.ic-divider-label-center)::after {\n  border-left-width: var(--ic-space-xxxs);\n}\n\n:host(.ic-divider-thin) hr,\n:host(.ic-divider-thin.ic-divider-label-right)::before,\n:host(.ic-divider-thin.ic-divider-label-center)::before,\n:host(.ic-divider-thin.ic-divider-label-left)::after,\n:host(.ic-divider-thin.ic-divider-label-center)::after {\n  border-bottom-width: var(--ic-space-1px);\n}\n\n:host(.ic-divider-thin) .vertical-divider,\n:host(.ic-divider-thin.ic-divider-label-bottom)::before,\n:host(.ic-divider-thin.ic-divider-vertical.ic-divider-label-center)::before,\n:host(.ic-divider-thin.ic-divider-label-top)::after,\n:host(.ic-divider-thin.ic-divider-vertical.ic-divider-label-center)::after {\n  border-left-width: var(--ic-space-1px);\n}\n\n/* Border styling */\n:host(.ic-divider-dashed) hr,\n:host(.ic-divider-dashed.ic-divider-label-right)::before,\n:host(.ic-divider-dashed.ic-divider-label-center)::before,\n:host(.ic-divider-dashed.ic-divider-label-left)::after,\n:host(.ic-divider-dashed.ic-divider-label-center)::after {\n  border-bottom-style: dashed;\n}\n\n:host(.ic-divider-dashed) .vertical-divider,\n:host(.ic-divider-dashed.ic-divider-label-bottom)::before,\n:host(.ic-divider-dashed.ic-divider-label-center)::before,\n:host(.ic-divider-dashed.ic-divider-label-top)::after,\n:host(.ic-divider-dashed.ic-divider-label-center)::after {\n  border-left-style: dashed;\n}\n\n/* Label styling */\n:host() .ic-divider-label {\n  text-wrap: wrap;\n  text-align: left;\n  width: -moz-max-content;\n  width: max-content;\n  max-width: var(--ic-divider-label-width, max(20rem, 60%));\n}\n\n:host(.ic-divider-horizontal.ic-divider-label-center) .ic-divider-label {\n  text-align: center;\n}\n\n:host(.ic-divider-vertical) .ic-divider-label {\n  text-align: center;\n  max-width: var(--ic-divider-label-width, 20rem);\n}\n\n:host() .ic-divider-label-container {\n  width: -moz-max-content;\n  width: max-content;\n  max-width: var(--ic-divider-label-width, max(20rem, 60%));\n}\n\n:host(.ic-divider-vertical) .ic-divider-label-container {\n  max-width: var(--ic-divider-label-width, 20rem);\n}\n\n:host() .ic-divider-label p {\n  width: -moz-max-content;\n  width: max-content;\n  max-width: 100%;\n}\n\n:host() .ic-divider-label,\n:host() ::slotted(*) {\n  color: var(--ic-divider-label);\n}\n\n:host(.ic-divider-monochrome) .ic-divider-label,\n:host(.ic-divider-monochrome) ::slotted(*) {\n  color: var(--ic-divider-label-monochrome);\n}\n\n/* High contrast */\n@media (forced-colors: active) {\n  hr,\n  :host(.ic-divider-horizontal.ic-divider-label-right)::before,\n  :host(.ic-divider-horizontal.ic-divider-label-center)::before,\n  :host(.ic-divider-horizontal.ic-divider-label-left)::after,\n  :host(.ic-divider-horizontal.ic-divider-label-center)::after {\n    border-bottom-color: transparent;\n  }\n\n  :host() div.vertical-divider,\n  :host(.ic-divider-vertical.ic-divider-label-bottom)::before,\n  :host(.ic-divider-vertical.ic-divider-label-center)::before,\n  :host(.ic-divider-vertical.ic-divider-label-top)::after,\n  :host(.ic-divider-vertical.ic-divider-label-center)::after {\n    border-left-color: transparent;\n  }\n}\n","import {\n  h,\n  Component,\n  Host,\n  Listen,\n  State,\n  Prop,\n  Element,\n} from \"@stencil/core\";\n\nimport {\n  getBrandForegroundAppearance,\n  isPropDefined,\n  slotHasContent,\n  isEmptyString,\n} from \"../../utils/helpers\";\n\nimport {\n  IcBrand,\n  IcOrientation,\n  IcBrandForeground,\n  IcThemeMode,\n} from \"../../utils/types\";\n\nimport {\n  IcDividerLabelPlacement,\n  IcDividerStyles,\n  IcDividerWeights,\n} from \"./ic-divider.types\";\n\n@Component({\n  tag: \"ic-divider\",\n  styleUrl: \"ic-divider.css\",\n  scoped: true,\n})\nexport class Divider {\n  @Element() el: HTMLIcDividerElement;\n\n  @State() foregroundColor: IcBrandForeground = getBrandForegroundAppearance();\n\n  /**\n   * The line style of the divider.\n   */\n  @Prop() borderStyle?: IcDividerStyles = \"solid\";\n\n  /**\n   * The label for the divider. The label placement will need to be set for the label to be displayed correctly.\n   */\n  @Prop() label?: string;\n\n  /**\n   * The position the label is placed on the divider. `Left` and `right` placement is only applicable when orientation is set to `horizontal`. `Top` and `bottom` placement is only applicable when orientation is set to `vertical`. `Center` placement is applicable for both orientations.\n   */\n  @Prop() labelPlacement?: IcDividerLabelPlacement = \"center\";\n\n  /** If `true`, the divider will be displayed in a grey colour. */\n  @Prop() monochrome?: boolean = false;\n\n  /**\n   * The orientation of the divider.\n   */\n  @Prop() orientation?: IcOrientation = \"horizontal\";\n\n  /**\n   * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n   */\n  @Prop({ mutable: true }) theme?: IcThemeMode | IcBrandForeground = \"inherit\";\n\n  /**\n   * The thickness of the divider.\n   */\n  @Prop() weight?: IcDividerWeights = \"thin\";\n\n  @Listen(\"brandChange\", { target: \"document\" })\n  brandChangeHandler(ev: CustomEvent<IcBrand>): void {\n    this.foregroundColor = ev.detail.mode;\n  }\n\n  private updateMonochromeState(): void {\n    const parentEl = this.el.parentElement;\n    if (parentEl) {\n      const isBottomSideNav = parentEl.classList.contains(\"bottom-side-nav\");\n      const isBottomWrapper =\n        parentEl.parentElement?.classList.contains(\"bottom-wrapper\");\n\n      if (\n        parentEl.tagName === \"IC-SIDE-NAVIGATION\" ||\n        (isBottomSideNav && isBottomWrapper)\n      ) {\n        this.el.classList.add(\"ic-side-navigation-keyline\");\n        if (this.foregroundColor === \"light\") {\n          this.theme = \"dark\";\n        } else {\n          this.theme = \"light\";\n        }\n      }\n    }\n  }\n\n  componentWillRender(): void {\n    this.updateMonochromeState();\n  }\n\n  render() {\n    const {\n      borderStyle,\n      label,\n      labelPlacement,\n      monochrome,\n      orientation,\n      weight,\n    } = this;\n\n    const { theme } = this;\n\n    const invalidPropCombination = (\n      placement: IcDividerLabelPlacement\n    ): void => {\n      console.error(\n        `${\n          placement.charAt(0).toUpperCase() + placement.slice(1)\n        } label placement is not applicable for a ${orientation} ic-divider (web-components) / IcDivider (react)`\n      );\n    };\n\n    if (\n      ((labelPlacement === \"left\" || labelPlacement === \"right\") &&\n        orientation === \"vertical\") ||\n      ((labelPlacement === \"top\" || labelPlacement === \"bottom\") &&\n        orientation === \"horizontal\")\n    ) {\n      invalidPropCombination(labelPlacement);\n    }\n\n    const getTypographyVariant = (weight: string) => {\n      switch (weight) {\n        case \"very-thick\":\n          return \"h4\";\n        case \"thick\":\n          return \"subtitle-large\";\n        default:\n          return \"label\";\n      }\n    };\n\n    const renderLabel = () => {\n      if (slotHasContent(this.el, \"label\")) {\n        return (\n          <div class=\"ic-divider-label-container\">\n            <slot name=\"label\"></slot>\n          </div>\n        );\n      } else if (isPropDefined(label)) {\n        return (\n          <ic-typography\n            class=\"ic-divider-label\"\n            variant={getTypographyVariant(weight!)}\n          >\n            <p>{label}</p>\n          </ic-typography>\n        );\n      }\n      return null;\n    };\n\n    return (\n      <Host\n        class={{\n          [`ic-theme-${theme}`]: theme !== \"inherit\",\n          [`ic-divider-monochrome`]: !!monochrome,\n          [`ic-divider-${orientation}`]: true,\n          [`ic-divider-${weight}`]: true,\n          [`ic-divider-${borderStyle}`]: true,\n          [`ic-divider-label-${labelPlacement}`]:\n            slotHasContent(this.el, \"label\") || !isEmptyString(label),\n        }}\n        {...((orientation === \"vertical\" ||\n          (!!renderLabel() && !!isPropDefined(labelPlacement))) && {\n          \"aria-orientation\": orientation,\n          role: \"separator\",\n        })}\n      >\n        {orientation === \"horizontal\" &&\n          (!renderLabel() || !isPropDefined(labelPlacement)) && <hr />}\n        {!!isPropDefined(labelPlacement) && !!renderLabel() && renderLabel()}\n        {orientation === \"vertical\" &&\n          (!renderLabel() || !isPropDefined(labelPlacement)) && (\n            <div class=\"vertical-divider\"></div>\n          )}\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ic-divider.entry.cjs.js","mappings":"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","names":["getBrandForegroundAppearance","isPropDefined","slotHasContent","h","Host","isEmptyString"],"sources":["src/components/ic-divider/ic-divider.css?tag=ic-divider&encapsulation=scoped","src/components/ic-divider/ic-divider.tsx"],"sourcesContent":["/**\n  * @prop --ic-divider-vertical-height: The height of a vertical divider. The default value is `inherit`. \n  */\n\n/**\n  * @prop --ic-divider-horizontal-width: The width of a horizontal divider. The default value is `inherit`.\n  */\n\n/**\n  * @prop --ic-divider-label-width: The max-width of the divider label. When orientation is set to `horizontal`, the default value is `max(20rem, 60%)`. When orientation is set to `vertical`, the default value is `20 rem`.\n  */\n\n/* IC-DIVIDER COLORS */\n\n/**\n  * @internal @prop --ic-divider-background\n  */\n\n/**\n  * @internal @prop --ic-divider-background-monochrome\n  */\n\n/**\n  * @internal @prop --ic-divider-label\n  */\n\n/**\n  * @internal @prop --ic-divider-label-monochrome\n  */\n\n/* Horizontal Divider */\n:host(.ic-divider-horizontal) {\n  display: flex;\n  width: var(--ic-divider-horizontal-width, 100%);\n  align-items: center;\n  -moz-column-gap: var(--ic-space-xxs);\n       column-gap: var(--ic-space-xxs);\n}\n\nhr {\n  padding: 0;\n  margin: 0;\n  border: none;\n  border-bottom: solid var(--ic-space-1px) var(--ic-divider-background);\n  width: inherit;\n}\n\n:host(.ic-divider-horizontal)::before,\n:host(.ic-divider-horizontal)::after {\n  border-left: none !important;\n}\n\n:host(.ic-divider-horizontal.ic-divider-label-right)::before,\n:host(.ic-divider-horizontal.ic-divider-label-center)::before,\n:host(.ic-divider-horizontal.ic-divider-label-left)::after,\n:host(.ic-divider-horizontal.ic-divider-label-center)::after {\n  content: \"\";\n  border: none;\n  width: 100%;\n}\n\n/* Vertical Divider */\n:host(.ic-divider-vertical) {\n  display: flex;\n  flex-direction: column;\n  height: var(--ic-divider-vertical-height, inherit);\n  width: -moz-max-content;\n  width: max-content;\n  align-items: center;\n  -moz-column-gap: var(--ic-space-xxs);\n       column-gap: var(--ic-space-xxs);\n  border: none;\n}\n\n:host(.ic-divider-vertical) div.vertical-divider {\n  display: flex;\n  height: inherit;\n}\n\n:host(.ic-divider-vertical.ic-divider-label-bottom)::before,\n:host(.ic-divider-vertical.ic-divider-label-center)::before,\n:host(.ic-divider-vertical.ic-divider-label-top)::after,\n:host(.ic-divider-vertical.ic-divider-label-center)::after {\n  content: \"\";\n  height: 100%;\n}\n\n/* Theme */\nhr,\n:host(.ic-divider-horizontal.ic-divider-label-right)::before,\n:host(.ic-divider-horizontal.ic-divider-label-center)::before,\n:host(.ic-divider-horizontal.ic-divider-label-left)::after,\n:host(.ic-divider-horizontal.ic-divider-label-center)::after {\n  border-bottom: solid var(--ic-space-1px) var(--ic-divider-background);\n}\n\n:host(.ic-divider-monochrome) hr,\n:host(.ic-divider-monochrome.ic-divider-horizontal.ic-divider-label-right)::before,\n:host(.ic-divider-monochrome.ic-divider-horizontal.ic-divider-label-center)::before,\n:host(.ic-divider-monochrome.ic-divider-horizontal.ic-divider-label-left)::after,\n:host(.ic-divider-monochrome.ic-divider-horizontal.ic-divider-label-center)::after {\n  border-bottom-color: var(--ic-divider-background-monochrome);\n}\n\n:host() div.vertical-divider,\n:host(.ic-divider-vertical.ic-divider-label-bottom)::before,\n:host(.ic-divider-vertical.ic-divider-label-center)::before,\n:host(.ic-divider-vertical.ic-divider-label-top)::after,\n:host(.ic-divider-vertical.ic-divider-label-center)::after {\n  border-left: solid var(--ic-space-1px) var(--ic-divider-background);\n}\n\n:host(.ic-divider-monochrome) div.vertical-divider,\n:host(.ic-divider-monochrome.ic-divider-vertical.ic-divider-label-bottom)::before,\n:host(.ic-divider-monochrome.ic-divider-vertical.ic-divider-label-center)::before,\n:host(.ic-divider-monochrome.ic-divider-vertical.ic-divider-label-top)::after,\n:host(.ic-divider-monochrome.ic-divider-vertical.ic-divider-label-center)::after {\n  border-left-color: var(--ic-divider-background-monochrome);\n}\n\n/* Divider in ic-side-navigation */\n:host(.ic-side-navigation-keyline.ic-theme-dark) {\n  --ic-side-navigation-keyline: var(--ic-state-layer-lighten-20);\n}\n\n:host(.ic-side-navigation-keyline.ic-theme-light) {\n  --ic-side-navigation-keyline: var(--ic-state-layer-darken-20);\n}\n\n:host(.ic-side-navigation-keyline.ic-theme-dark) hr,\n:host(.ic-side-navigation-keyline.ic-theme-dark.ic-divider-horizontal.ic-divider-label-right)::before,\n:host(.ic-side-navigation-keyline.ic-theme-dark.ic-divider-horizontal.ic-divider-label-center)::before,\n:host(.ic-side-navigation-keyline.ic-theme-dark.ic-divider-horizontal.ic-divider-label-left)::after,\n:host(.ic-side-navigation-keyline.ic-theme-dark.ic-divider-horizontal.ic-divider-label-center)::after {\n  border-bottom-color: var(--ic-side-navigation-keyline);\n}\n\n:host(.ic-side-navigation-keyline.ic-theme-dark) div.vertical-divider,\n:host(.ic-side-navigation-keyline.ic-theme-dark.ic-divider-vertical.ic-divider-label-bottom)::before,\n:host(.ic-side-navigation-keyline.ic-theme-dark.ic-divider-vertical.ic-divider-label-center)::before,\n:host(.ic-side-navigation-keyline.ic-theme-dark.ic-divider-vertical.ic-divider-label-top)::after,\n:host(.ic-side-navigation-keyline.ic-theme-dark.ic-divider-vertical.ic-divider-label-center)::after {\n  border-left-color: var(--ic-side-navigation-keyline);\n}\n\n:host(.ic-side-navigation-keyline.ic-theme-light) hr,\n:host(.ic-side-navigation-keyline.ic-theme-light.ic-divider-horizontal.ic-divider-label-right)::before,\n:host(.ic-side-navigation-keyline.ic-theme-light.ic-divider-horizontal.ic-divider-label-center)::before,\n:host(.ic-side-navigation-keyline.ic-theme-light.ic-divider-horizontal.ic-divider-label-left)::after,\n:host(.ic-side-navigation-keyline.ic-theme-light.ic-divider-horizontal.ic-divider-label-center)::after {\n  border-bottom-color: var(--ic-side-navigation-keyline);\n}\n\n:host(.ic-side-navigation-keyline.ic-theme-light) div.vertical-divider,\n:host(.ic-side-navigation-keyline.ic-theme-light.ic-divider-vertical.ic-divider-label-bottom)::before,\n:host(.ic-side-navigation-keyline.ic-theme-light.ic-divider-vertical.ic-divider-label-center)::before,\n:host(.ic-side-navigation-keyline.ic-theme-light.ic-divider-vertical.ic-divider-label-top)::after,\n:host(.ic-side-navigation-keyline.ic-theme-light.ic-divider-vertical.ic-divider-label-center)::after {\n  border-left-color: var(--ic-divider-background-monochrome);\n}\n\n/* Weight */\n:host(.ic-divider-very-thick) hr,\n:host(.ic-divider-very-thick.ic-divider-label-right)::before,\n:host(.ic-divider-very-thick.ic-divider-label-center)::before,\n:host(.ic-divider-very-thick.ic-divider-label-left)::after,\n:host(.ic-divider-very-thick.ic-divider-label-center)::after {\n  border-bottom-width: var(--ic-space-xs);\n}\n\n:host(.ic-divider-very-thick) .vertical-divider,\n:host(.ic-divider-very-thick.ic-divider-label-bottom)::before,\n:host(.ic-divider-very-thick.ic-divider-label-center)::before,\n:host(.ic-divider-very-thick.ic-divider-label-top)::after,\n:host(.ic-divider-very-thick.ic-divider-label-center)::after {\n  border-left-width: var(--ic-space-xs);\n}\n\n:host(.ic-divider-thick) hr,\n:host(.ic-divider-thick.ic-divider-label-right)::before,\n:host(.ic-divider-thick.ic-divider-label-center)::before,\n:host(.ic-divider-thick.ic-divider-label-left)::after,\n:host(.ic-divider-thick.ic-divider-label-center)::after {\n  border-bottom-width: var(--ic-space-xxs);\n}\n\n:host(.ic-divider-thick) .vertical-divider,\n:host(.ic-divider-thick.ic-divider-label-bottom)::before,\n:host(.ic-divider-thick.ic-divider-label-center)::before,\n:host(.ic-divider-thick.ic-divider-label-top)::after,\n:host(.ic-divider-thick.ic-divider-label-center)::after {\n  border-left-width: var(--ic-space-xxs);\n}\n\n:host(.ic-divider-medium) hr,\n:host(.ic-divider-medium.ic-divider-label-right)::before,\n:host(.ic-divider-medium.ic-divider-label-center)::before,\n:host(.ic-divider-medium.ic-divider-label-left)::after,\n:host(.ic-divider-medium.ic-divider-label-center)::after {\n  border-bottom-width: var(--ic-space-xxxs);\n}\n\n:host(.ic-divider-medium) .vertical-divider,\n:host(.ic-divider-medium.ic-divider-label-bottom)::before,\n:host(.ic-divider-medium.ic-divider-label-center)::before,\n:host(.ic-divider-medium.ic-divider-label-top)::after,\n:host(.ic-divider-medium.ic-divider-label-center)::after {\n  border-left-width: var(--ic-space-xxxs);\n}\n\n:host(.ic-divider-thin) hr,\n:host(.ic-divider-thin.ic-divider-label-right)::before,\n:host(.ic-divider-thin.ic-divider-label-center)::before,\n:host(.ic-divider-thin.ic-divider-label-left)::after,\n:host(.ic-divider-thin.ic-divider-label-center)::after {\n  border-bottom-width: var(--ic-space-1px);\n}\n\n:host(.ic-divider-thin) .vertical-divider,\n:host(.ic-divider-thin.ic-divider-label-bottom)::before,\n:host(.ic-divider-thin.ic-divider-vertical.ic-divider-label-center)::before,\n:host(.ic-divider-thin.ic-divider-label-top)::after,\n:host(.ic-divider-thin.ic-divider-vertical.ic-divider-label-center)::after {\n  border-left-width: var(--ic-space-1px);\n}\n\n/* Border styling */\n:host(.ic-divider-dashed) hr,\n:host(.ic-divider-dashed.ic-divider-label-right)::before,\n:host(.ic-divider-dashed.ic-divider-label-center)::before,\n:host(.ic-divider-dashed.ic-divider-label-left)::after,\n:host(.ic-divider-dashed.ic-divider-label-center)::after {\n  border-bottom-style: dashed;\n}\n\n:host(.ic-divider-dashed) .vertical-divider,\n:host(.ic-divider-dashed.ic-divider-label-bottom)::before,\n:host(.ic-divider-dashed.ic-divider-label-center)::before,\n:host(.ic-divider-dashed.ic-divider-label-top)::after,\n:host(.ic-divider-dashed.ic-divider-label-center)::after {\n  border-left-style: dashed;\n}\n\n/* Label styling */\n:host() .ic-divider-label {\n  text-wrap: wrap;\n  text-align: left;\n  width: -moz-max-content;\n  width: max-content;\n  max-width: var(--ic-divider-label-width, max(20rem, 60%));\n}\n\n:host(.ic-divider-horizontal.ic-divider-label-center) .ic-divider-label {\n  text-align: center;\n}\n\n:host(.ic-divider-vertical) .ic-divider-label {\n  text-align: center;\n  max-width: var(--ic-divider-label-width, 20rem);\n}\n\n:host() .ic-divider-label-container {\n  width: -moz-max-content;\n  width: max-content;\n  max-width: var(--ic-divider-label-width, max(20rem, 60%));\n}\n\n:host(.ic-divider-vertical) .ic-divider-label-container {\n  max-width: var(--ic-divider-label-width, 20rem);\n}\n\n:host() .ic-divider-label p {\n  width: -moz-max-content;\n  width: max-content;\n  max-width: 100%;\n}\n\n:host() .ic-divider-label,\n:host() ::slotted(*) {\n  color: var(--ic-divider-label);\n}\n\n:host(.ic-divider-monochrome) .ic-divider-label,\n:host(.ic-divider-monochrome) ::slotted(*) {\n  color: var(--ic-divider-label-monochrome);\n}\n\n/* High contrast */\n@media (forced-colors: active) {\n  hr,\n  :host(.ic-divider-horizontal.ic-divider-label-right)::before,\n  :host(.ic-divider-horizontal.ic-divider-label-center)::before,\n  :host(.ic-divider-horizontal.ic-divider-label-left)::after,\n  :host(.ic-divider-horizontal.ic-divider-label-center)::after {\n    border-bottom-color: transparent;\n  }\n\n  :host() div.vertical-divider,\n  :host(.ic-divider-vertical.ic-divider-label-bottom)::before,\n  :host(.ic-divider-vertical.ic-divider-label-center)::before,\n  :host(.ic-divider-vertical.ic-divider-label-top)::after,\n  :host(.ic-divider-vertical.ic-divider-label-center)::after {\n    border-left-color: transparent;\n  }\n}\n","import {\n  h,\n  Component,\n  Host,\n  Listen,\n  State,\n  Prop,\n  Element,\n} from \"@stencil/core\";\n\nimport {\n  getBrandForegroundAppearance,\n  isPropDefined,\n  slotHasContent,\n  isEmptyString,\n} from \"../../utils/helpers\";\n\nimport {\n  IcBrand,\n  IcOrientation,\n  IcBrandForeground,\n  IcThemeMode,\n} from \"../../utils/types\";\n\nimport {\n  IcDividerLabelPlacement,\n  IcDividerStyles,\n  IcDividerWeights,\n} from \"./ic-divider.types\";\n\n@Component({\n  tag: \"ic-divider\",\n  styleUrl: \"ic-divider.css\",\n  scoped: true,\n})\nexport class Divider {\n  private isSlottedInSideNav = false;\n\n  @Element() el: HTMLIcDividerElement;\n\n  @State() foregroundColor: IcBrandForeground = getBrandForegroundAppearance();\n\n  /**\n   * The line style of the divider.\n   */\n  @Prop() borderStyle?: IcDividerStyles = \"solid\";\n\n  /**\n   * The label for the divider. The label placement will need to be set for the label to be displayed correctly.\n   */\n  @Prop() label?: string;\n\n  /**\n   * The position the label is placed on the divider. `Left` and `right` placement is only applicable when orientation is set to `horizontal`. `Top` and `bottom` placement is only applicable when orientation is set to `vertical`. `Center` placement is applicable for both orientations.\n   */\n  @Prop() labelPlacement?: IcDividerLabelPlacement = \"center\";\n\n  /** If `true`, the divider will be displayed in a grey colour. */\n  @Prop() monochrome?: boolean = false;\n\n  /**\n   * The orientation of the divider.\n   */\n  @Prop() orientation?: IcOrientation = \"horizontal\";\n\n  /**\n   * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n   */\n  @Prop({ mutable: true }) theme?: IcThemeMode | IcBrandForeground = \"inherit\";\n\n  /**\n   * The thickness of the divider.\n   */\n  @Prop() weight?: IcDividerWeights = \"thin\";\n\n  @Listen(\"brandChange\", { target: \"document\" })\n  brandChangeHandler(ev: CustomEvent<IcBrand>): void {\n    this.foregroundColor = ev.detail.mode;\n  }\n\n  private getHostAttributes = (renderLabel: boolean) =>\n    this.isSlottedInSideNav\n      ? {\n          \"aria-hidden\": \"true\", // Prevent divider being included in screen reader count of items in side navigation\n          role: \"listitem\",\n        }\n      : (this.orientation === \"vertical\" ||\n          (renderLabel && !!isPropDefined(this.labelPlacement))) && {\n          \"aria-orientation\": this.orientation,\n          role: \"separator\",\n        };\n\n  private updateMonochromeState(): void {\n    const parentEl = this.el.parentElement;\n    if (parentEl) {\n      const isBottomSideNav = parentEl.classList.contains(\"bottom-side-nav\");\n      const isBottomWrapper =\n        parentEl.parentElement?.classList.contains(\"bottom-wrapper\");\n\n      if (this.isSlottedInSideNav || (isBottomSideNav && isBottomWrapper)) {\n        this.el.classList.add(\"ic-side-navigation-keyline\");\n        if (this.foregroundColor === \"light\") {\n          this.theme = \"dark\";\n        } else {\n          this.theme = \"light\";\n        }\n      }\n    }\n  }\n\n  componentWillRender(): void {\n    this.isSlottedInSideNav =\n      this.el.parentElement?.tagName === \"IC-SIDE-NAVIGATION\";\n    this.updateMonochromeState();\n  }\n\n  render() {\n    const {\n      borderStyle,\n      label,\n      labelPlacement,\n      monochrome,\n      orientation,\n      weight,\n    } = this;\n\n    const { theme } = this;\n\n    const invalidPropCombination = (\n      placement: IcDividerLabelPlacement\n    ): void => {\n      console.error(\n        `${\n          placement.charAt(0).toUpperCase() + placement.slice(1)\n        } label placement is not applicable for a ${orientation} ic-divider (web-components) / IcDivider (react)`\n      );\n    };\n\n    if (\n      ((labelPlacement === \"left\" || labelPlacement === \"right\") &&\n        orientation === \"vertical\") ||\n      ((labelPlacement === \"top\" || labelPlacement === \"bottom\") &&\n        orientation === \"horizontal\")\n    ) {\n      invalidPropCombination(labelPlacement);\n    }\n\n    const getTypographyVariant = (weight: string) => {\n      switch (weight) {\n        case \"very-thick\":\n          return \"h4\";\n        case \"thick\":\n          return \"subtitle-large\";\n        default:\n          return \"label\";\n      }\n    };\n\n    const renderLabel = () => {\n      if (slotHasContent(this.el, \"label\")) {\n        return (\n          <div class=\"ic-divider-label-container\">\n            <slot name=\"label\"></slot>\n          </div>\n        );\n      } else if (isPropDefined(label)) {\n        return (\n          <ic-typography\n            class=\"ic-divider-label\"\n            variant={getTypographyVariant(weight!)}\n          >\n            <p>{label}</p>\n          </ic-typography>\n        );\n      }\n      return null;\n    };\n\n    return (\n      <Host\n        class={{\n          [`ic-theme-${theme}`]: theme !== \"inherit\",\n          [`ic-divider-monochrome`]: !!monochrome,\n          [`ic-divider-${orientation}`]: true,\n          [`ic-divider-${weight}`]: true,\n          [`ic-divider-${borderStyle}`]: true,\n          [`ic-divider-label-${labelPlacement}`]:\n            slotHasContent(this.el, \"label\") || !isEmptyString(label),\n        }}\n        {...this.getHostAttributes(!!renderLabel())}\n      >\n        {orientation === \"horizontal\" &&\n          (!renderLabel() || !isPropDefined(labelPlacement)) && <hr />}\n        {!!isPropDefined(labelPlacement) && !!renderLabel() && renderLabel()}\n        {orientation === \"vertical\" &&\n          (!renderLabel() || !isPropDefined(labelPlacement)) && (\n            <div class=\"vertical-divider\"></div>\n          )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/ic-empty-state.cjs.entry.js

@@ -40,11 +40,11 @@ const EmptyState = class {
     }
     render() {
         const { aligned, body, maxLines, heading, imageSize, subheading, theme } = this;
-        return (index.h(index.Host, { key: '16659f35d2b14d9a5e32fe6c61619fbafdf58f53', class: {
+        return (index.h(index.Host, { key: '60295d4ae9099c9e9adf17a6d1b1cb94a061ce1f', class: {
                 [`ic-empty-state-${aligned}`]: true,
                 [`image-${imageSize}`]: helpers.isSlotUsed(this.el, "image"),
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            } }, helpers.isSlotUsed(this.el, "image") && index.h("slot", { key: 'ccc8a2daf0041d9dd5e611d3b60c96820271745b', name: "image" }), index.h("div", { key: 'ab68dff198b63394d890399ec53b9befbb70f222' }, index.h("slot", { key: 'fe99ebbfe6b9c899d4b1fb5737df268e0bc38bb4', name: "heading" }, index.h("ic-typography", { key: 'eea6eb657e09159b27935e16864961b95387a3d6', variant: "h4", class: "empty-state-heading" }, heading)), index.h("slot", { key: 'ca04ac75d72fc5864ed7821bf9d16c8999eac3aa', name: "subheading" }, index.h("ic-typography", { key: '257a4f73c4fb3577e4c1653607a492b4f4d18470', variant: "subtitle-small", class: "empty-state-subheading" }, subheading)), index.h("slot", { key: 'f0efda6128d1b5a5f2b280faf23940b0832e3121', name: "body" }, index.h("ic-typography", { key: '128849e7a458b1ff7b51079eeb9f6967df88cef1', maxLines: maxLines, class: "empty-state-body" }, body))), helpers.isSlotUsed(this.el, "actions") && (index.h("div", { key: '22cf30fd1f3636fb3344689c4435b59d4148bb5f', class: "action-area" }, index.h("slot", { key: 'c4e187603beb9b2291c9e038202ff651d4decfff', name: "actions" })))));
+            } }, helpers.isSlotUsed(this.el, "image") && index.h("slot", { key: 'a0ccf1c16408f306d5a1abc34a8b5540be75b986', name: "image" }), index.h("div", { key: 'd1f6a21c75513a3a2f8fdcba4f0a671013709651' }, index.h("slot", { key: '60cc4c4434d29d12f771e65bba5ff09918c904d3', name: "heading" }, index.h("ic-typography", { key: '6ef2441bed80f38f27b8005c89eeec7de0691587', variant: "h4", class: "empty-state-heading" }, heading)), index.h("slot", { key: 'dae616cdcebd5dacee04547d42b2f77203d5c48a', name: "subheading" }, index.h("ic-typography", { key: '6946d005ecc441b3fee96309fb1c479470c192de', variant: "subtitle-small", class: "empty-state-subheading" }, subheading)), index.h("slot", { key: '0ab7b57d4f33e7aad6fca48c8036846e7360aad8', name: "body" }, index.h("ic-typography", { key: 'ea367e9f5b6d353714d8d05576abffecc63bea2d', maxLines: maxLines, class: "empty-state-body" }, body))), helpers.isSlotUsed(this.el, "actions") && (index.h("div", { key: '997a125c580c0dfa6e2191df40745145168ce705', class: "action-area" }, index.h("slot", { key: '34c38c474a502720b659f4b2775869773cfe1f10', name: "actions" })))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/ic-footer-link.cjs.entry.js

@@ -6,7 +6,7 @@ const index = require('./index-d337cd8a.js');
 const helpers = require('./helpers-3a796e7a.js');
 require('./constants-4d389abc.js');
 
-const icFooterLinkCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host(.footer-link-ungrouped-sparse){--footer-link-margin-left:0;--footer-link-margin-right:2.5rem;--footer-link-margin-bottom:0}:host(.footer-link-ungrouped-small){--footer-link-margin-left:0;--footer-link-margin-right:0;--footer-link-margin-bottom:var(--ic-space-md)}:host(.footer-link-grouped-sparse){--footer-link-margin-left:0;--footer-link-margin-right:0;--footer-link-margin-bottom:var(--ic-space-md)}:host(.footer-link-grouped-small){--footer-link-margin-left:var(--ic-space-md);--footer-link-margin-right:0;--footer-link-margin-bottom:var(--ic-space-md)}:host(.footer-link){margin-left:var(--footer-link-margin-left);margin-right:var(--footer-link-margin-right);margin-bottom:var(--footer-link-margin-bottom)}.ic-link-open-in-new-icon{vertical-align:middle;margin-left:var(--ic-space-xxs)}.ic-link>.ic-link-open-in-new-icon{fill:var(--ic-color-hyperlink-default)}.ic-link-open-in-new-icon>svg{width:var(--ic-space-md);height:var(--ic-space-md);fill:currentcolor}.ic-link:visited>.ic-link-open-in-new-icon{fill:var(--ic-color-hyperlink-visited)}.ic-link.light:visited>.ic-link-open-in-new-icon{fill:var(--ic-color-hyperlink-contrast-visited)}:host(.breadcrumb-link) .ic-link{display:var(--breadcrumb-link-display);align-items:var(--breadcrumb-link-align-items);gap:var(--breadcrumb-link-gap)}:host(.breadcrumb-link) .ic-link ::slotted(.back-icon){height:var(--ic-space-lg);width:var(--ic-space-lg)}:host(.breadcrumb-link.current-page) a,:host(.breadcrumb-link.current-page) ::slotted(a){font-weight:normal;color:inherit;text-decoration:none;display:flex;align-items:center}:host(.breadcrumb-link.current-page) .ic-link,:host(.breadcrumb-link.current-page) ::slotted(a:focus){outline:var(--ic-hc-focus-outline);text-decoration:none}:host(.breadcrumb-link.current-page) .ic-link:visited{color:var(--ic-color-text-primary)}:host(.footer-link-light) ::part(link),:host(.footer-link-dark) ::part(link){color:var(--ic-footer-link)}:host(.footer-link-light) ::slotted(svg),:host(.footer-link-dark) ::slotted(svg){fill:var(--ic-footer-logo)}:host(.footer-logo-link){transition:var(--ic-easing-transition-fast)}:host(.footer-logo-link:hover){background-color:var(--ic-footer-hover)}:host(.footer-logo-link:active){background-color:var(--ic-footer-pressed)}:host(.footer-logo-link:focus){box-shadow:var(--ic-border-focus);border-radius:var(--ic-border-radius);outline:var(--ic-hc-focus-outline)}@media (forced-colors: active){:host(.footer-link-light) ::slotted(svg),:host(.footer-link-dark) ::slotted(svg){fill:currentcolor}}";
+const icFooterLinkCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host(.footer-link-ungrouped-sparse){--footer-link-margin-left:0;--footer-link-margin-right:2.5rem;--footer-link-margin-bottom:0}:host(.footer-link-ungrouped-small){--footer-link-margin-left:0;--footer-link-margin-right:0;--footer-link-margin-bottom:var(--ic-space-md)}:host(.footer-link-grouped-sparse){--footer-link-margin-left:0;--footer-link-margin-right:0;--footer-link-margin-bottom:var(--ic-space-md)}:host(.footer-link-grouped-small){--footer-link-margin-left:var(--ic-space-md);--footer-link-margin-right:0;--footer-link-margin-bottom:var(--ic-space-md)}:host(.footer-link){margin-left:var(--footer-link-margin-left);margin-right:var(--footer-link-margin-right);margin-bottom:var(--footer-link-margin-bottom)}.ic-link-open-in-new-icon{vertical-align:middle;margin-left:var(--ic-space-xxs)}.ic-link>.ic-link-open-in-new-icon{fill:var(--ic-color-hyperlink-default)}.ic-link-open-in-new-icon>svg{width:var(--ic-space-md);height:var(--ic-space-md);fill:currentcolor}.ic-link:visited>.ic-link-open-in-new-icon{fill:var(--ic-color-hyperlink-visited)}.ic-link.light:visited>.ic-link-open-in-new-icon{fill:var(--ic-color-hyperlink-contrast-visited)}:host(.breadcrumb-link) .ic-link{display:var(--breadcrumb-link-display);align-items:var(--breadcrumb-link-align-items);gap:var(--breadcrumb-link-gap)}:host(.breadcrumb-link) .ic-link ::slotted(.back-icon){height:var(--ic-space-lg);width:var(--ic-space-lg)}:host(.breadcrumb-link.current-page) a,:host(.breadcrumb-link.current-page) ::slotted(a){font-weight:normal;color:inherit;text-decoration:none;display:flex;align-items:center}:host(.breadcrumb-link.current-page) .ic-link,:host(.breadcrumb-link.current-page) ::slotted(a:focus){outline:var(--ic-hc-focus-outline);text-decoration:none}:host(.breadcrumb-link.current-page) .ic-link:visited{color:var(--ic-color-text-primary)}:host(.footer-link-light) ::part(link),:host(.footer-link-dark) ::part(link){color:var(--ic-footer-link)}:host(.footer-link-light) ::slotted(svg),:host(.footer-link-dark) ::slotted(svg){fill:var(--ic-footer-logo)}:host(.footer-logo-link){transition:var(--ic-easing-transition-fast)}:host(.footer-logo-link:hover){background-color:var(--ic-footer-hover)}:host(.footer-logo-link:active){background-color:var(--ic-footer-pressed)}:host(.footer-logo-link:focus){box-shadow:var(--ic-border-focus);border-radius:var(--ic-border-radius);outline:var(--ic-hc-focus-outline)}@media (forced-colors: active){:host(.footer-link-light) ::slotted(svg),:host(.footer-link-dark) ::slotted(svg){fill:currentcolor}}@media (prefers-reduced-motion: reduce){:host(.footer-logo-link){transition:none}}";
 const IcFooterLinkStyle0 = icFooterLinkCss;
 
 const FooterLink = class {
@@ -49,12 +49,12 @@ const FooterLink = class {
         const { footerConfig, href, hreflang, referrerpolicy, rel, target, download, } = this;
         const { small, grouped } = footerConfig;
         const isLogoLink = !!this.el.closest("div[slot='logo']");
-        return (index.h(index.Host, { key: 'b093247260ef7378ef3aa666029e463641eb20c0', class: {
+        return (index.h(index.Host, { key: '7488851004e3af24c0b0e1d9f9ccaf0d55ae5990', class: {
                 "footer-link": true,
                 [`footer-link-${grouped ? "grouped" : "ungrouped"}-${small ? "small" : "sparse"}`]: true,
                 [`footer-link-${this.foregroundColor}`]: true,
                 "footer-logo-link": isLogoLink,
-            }, role: "listitem" }, index.h("ic-link", { key: '79ac221357a96ca920f68609bb390a30f53be256', class: "footer-link", href: href, hreflang: hreflang, referrerpolicy: referrerpolicy, rel: rel, download: download !== false ? download : undefined, target: target }, index.h("slot", { key: '06182bca4f4268ca01466a411a8de43671fbea24' }))));
+            }, role: "listitem" }, index.h("ic-link", { key: 'e388559e01bc73c013b7493dd2c315f730beb4b8', class: "footer-link", href: href, hreflang: hreflang, referrerpolicy: referrerpolicy, rel: rel, download: download !== false ? download : undefined, target: target }, index.h("slot", { key: '013a86414ccca833cd52a4164c93bdf9ef040a4f' }))));
     }
     static get delegatesFocus() { return true; }
     get el() { return index.getElement(this); }

package/dist/cjs/ic-footer-link.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"ic-footer-link.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,eAAe,GAAG,61JAA61J,CAAC;AACt3J,2BAAe,eAAe;;MCuBjB,UAAU;IAPvB;;QAUW,eAAU,GAAWA,oBAAY,CAAC,EAAE,CAAC;QACrC,iBAAY,GAAiB,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;QAC9D,oBAAe,GAAsBC,oCAA4B,EAAE,CAAC;;;;QAKrE,aAAQ,GAAsB,KAAK,CAAC;KAgG7C;IArEC,iBAAiB;QACf,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;KAC/C;IAGD,mBAAmB;QACjB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;KAC/C;IAGD,wBAAwB,CAAC,EAAwB;QAC/C,IAAI,CAAC,eAAe,GAAG,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC;KACvC;IAEO,WAAW,CAAC,CAAc;QAChC,IAAI,CAAC,CAAC,aAAa,KAAK,IAAI,EAAE;YAC5B,IAAI,CAAC,CAAC,aAAa,CAAC,SAAS,CAAC,QAAQ,CAAC,WAAW,CAAC,EAAE;gBACnD,OAAO;oBACL,KAAK,EAAE,CAAC,CAAC,aAAa,CAAC,SAAS,CAAC,QAAQ,CAAC,iBAAiB,CAAC;oBAC5D,OAAO,EAAE,CAAC,CAAC,aAAa,CAAC,SAAS,CAAC,QAAQ,CAAC,mBAAmB,CAAC;iBACjE,CAAC;aACH;iBAAM;gBACL,OAAO,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC;aAC1C;SACF;aAAM;YACL,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;SACzC;KACF;IAED,MAAM;QACJ,MAAM,EACJ,YAAY,EACZ,IAAI,EACJ,QAAQ,EACR,cAAc,EACd,GAAG,EACH,MAAM,EACN,QAAQ,GACT,GAAG,IAAI,CAAC;QACT,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,YAAY,CAAC;QAExC,MAAM,UAAU,GAAG,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC;QAEzD,QACEC,QAACC,UAAI,qDACH,KAAK,EAAE;gBACL,aAAa,EAAE,IAAI;gBACnB,CAAC,eAAe,OAAO,GAAG,SAAS,GAAG,WAAW,IAC/C,KAAK,GAAG,OAAO,GAAG,QACpB,EAAE,GAAG,IAAI;gBACT,CAAC,eAAe,IAAI,CAAC,eAAe,EAAE,GAAG,IAAI;gBAC7C,kBAAkB,EAAE,UAAU;aAC/B,EACD,IAAI,EAAC,UAAU,IAEfD,sEACE,KAAK,EAAC,aAAa,EACnB,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,cAAc,EAAE,cAAc,EAC9B,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,QAAQ,KAAK,KAAK,GAAG,QAAQ,GAAG,SAAS,EACnD,MAAM,EAAE,MAAM,IAEdA,oEAAQ,CACA,CACL,EACP;KACH;;;;;;;;","names":["DEVICE_SIZES","getBrandForegroundAppearance","h","Host"],"sources":["src/components/ic-footer-link/ic-footer-link.css?tag=ic-footer-link&encapsulation=shadow","src/components/ic-footer-link/ic-footer-link.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host(.footer-link-ungrouped-sparse) {\n  --footer-link-margin-left: 0;\n  --footer-link-margin-right: 2.5rem;\n  --footer-link-margin-bottom: 0;\n}\n\n:host(.footer-link-ungrouped-small) {\n  --footer-link-margin-left: 0;\n  --footer-link-margin-right: 0;\n  --footer-link-margin-bottom: var(--ic-space-md);\n}\n\n:host(.footer-link-grouped-sparse) {\n  --footer-link-margin-left: 0;\n  --footer-link-margin-right: 0;\n  --footer-link-margin-bottom: var(--ic-space-md);\n}\n\n:host(.footer-link-grouped-small) {\n  --footer-link-margin-left: var(--ic-space-md);\n  --footer-link-margin-right: 0;\n  --footer-link-margin-bottom: var(--ic-space-md);\n}\n\n:host(.footer-link) {\n  margin-left: var(--footer-link-margin-left);\n  margin-right: var(--footer-link-margin-right);\n  margin-bottom: var(--footer-link-margin-bottom);\n}\n\n.ic-link-open-in-new-icon {\n  vertical-align: middle;\n  margin-left: var(--ic-space-xxs);\n}\n\n.ic-link > .ic-link-open-in-new-icon {\n  fill: var(--ic-color-hyperlink-default);\n}\n\n.ic-link-open-in-new-icon > svg {\n  width: var(--ic-space-md);\n  height: var(--ic-space-md);\n  fill: currentcolor;\n}\n\n.ic-link:visited > .ic-link-open-in-new-icon {\n  fill: var(--ic-color-hyperlink-visited);\n}\n\n.ic-link.light:visited > .ic-link-open-in-new-icon {\n  fill: var(--ic-color-hyperlink-contrast-visited);\n}\n\n:host(.breadcrumb-link) .ic-link {\n  display: var(--breadcrumb-link-display);\n  align-items: var(--breadcrumb-link-align-items);\n  gap: var(--breadcrumb-link-gap);\n}\n\n:host(.breadcrumb-link) .ic-link ::slotted(.back-icon) {\n  height: var(--ic-space-lg);\n  width: var(--ic-space-lg);\n}\n\n:host(.breadcrumb-link.current-page) a,\n:host(.breadcrumb-link.current-page) ::slotted(a) {\n  font-weight: normal;\n  color: inherit;\n  text-decoration: none;\n  display: flex;\n  align-items: center;\n}\n\n:host(.breadcrumb-link.current-page) .ic-link,\n:host(.breadcrumb-link.current-page) ::slotted(a:focus) {\n  outline: var(--ic-hc-focus-outline);\n  text-decoration: none;\n}\n\n:host(.breadcrumb-link.current-page) .ic-link:visited {\n  color: var(--ic-color-text-primary);\n}\n\n:host(.footer-link-light) ::part(link),\n:host(.footer-link-dark) ::part(link) {\n  color: var(--ic-footer-link);\n}\n\n:host(.footer-link-light) ::slotted(svg),\n:host(.footer-link-dark) ::slotted(svg) {\n  fill: var(--ic-footer-logo);\n}\n\n:host(.footer-logo-link) {\n  transition: var(--ic-easing-transition-fast);\n}\n\n:host(.footer-logo-link:hover) {\n  background-color: var(--ic-footer-hover);\n}\n\n:host(.footer-logo-link:active) {\n  background-color: var(--ic-footer-pressed);\n}\n\n:host(.footer-logo-link:focus) {\n  box-shadow: var(--ic-border-focus);\n  border-radius: var(--ic-border-radius);\n  outline: var(--ic-hc-focus-outline);\n}\n\n@media (forced-colors: active) {\n  :host(.footer-link-light) ::slotted(svg),\n  :host(.footer-link-dark) ::slotted(svg) {\n    fill: currentcolor;\n  }\n}\n","import {\n  Component,\n  Element,\n  Host,\n  Listen,\n  Prop,\n  h,\n  State,\n} from \"@stencil/core\";\nimport {\n  DEVICE_SIZES,\n  getBrandForegroundAppearance,\n} from \"../../utils/helpers\";\nimport { IcBrand, IcBrandForeground } from \"../../utils/types\";\n\ntype FooterConfig = { small: boolean; grouped: boolean };\n\n@Component({\n  tag: \"ic-footer-link\",\n  styleUrl: \"ic-footer-link.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class FooterLink {\n  @Element() el: HTMLIcFooterLinkElement;\n\n  @State() deviceSize: number = DEVICE_SIZES.XL;\n  @State() footerConfig: FooterConfig = { small: false, grouped: false };\n  @State() foregroundColor: IcBrandForeground = getBrandForegroundAppearance();\n\n  /**\n   * If `true`, the user can save the linked URL instead of navigating to it.\n   */\n  @Prop() download?: string | boolean = false;\n\n  /**\n   * The URL that the link points to.\n   */\n  @Prop() href?: string;\n\n  /**\n   * The human language of the linked URL.\n   */\n  @Prop() hreflang?: string;\n\n  /**\n   * How much of the referrer to send when following the link.\n   */\n  @Prop() referrerpolicy?: ReferrerPolicy;\n\n  /**\n   * The relationship of the linked URL as space-separated link types.\n   */\n  @Prop() rel?: string;\n\n  /**\n   * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n   */\n  @Prop() target?: string;\n\n  componentWillLoad(): void {\n    this.footerConfig = this.inferConfig(this.el);\n  }\n\n  @Listen(\"footerResized\", { target: \"document\" })\n  footerResizeHandler(): void {\n    this.footerConfig = this.inferConfig(this.el);\n  }\n\n  @Listen(\"brandChange\", { target: \"document\" })\n  footerBrandChangeHandler(ev: CustomEvent<IcBrand>): void {\n    this.foregroundColor = ev.detail.mode;\n  }\n\n  private inferConfig(e: HTMLElement): FooterConfig {\n    if (e.parentElement !== null) {\n      if (e.parentElement.classList.contains(\"ic-footer\")) {\n        return {\n          small: e.parentElement.classList.contains(\"ic-footer-small\"),\n          grouped: e.parentElement.classList.contains(\"ic-footer-grouped\"),\n        };\n      } else {\n        return this.inferConfig(e.parentElement);\n      }\n    } else {\n      return { small: false, grouped: false };\n    }\n  }\n\n  render() {\n    const {\n      footerConfig,\n      href,\n      hreflang,\n      referrerpolicy,\n      rel,\n      target,\n      download,\n    } = this;\n    const { small, grouped } = footerConfig;\n\n    const isLogoLink = !!this.el.closest(\"div[slot='logo']\");\n\n    return (\n      <Host\n        class={{\n          \"footer-link\": true,\n          [`footer-link-${grouped ? \"grouped\" : \"ungrouped\"}-${\n            small ? \"small\" : \"sparse\"\n          }`]: true,\n          [`footer-link-${this.foregroundColor}`]: true,\n          \"footer-logo-link\": isLogoLink,\n        }}\n        role=\"listitem\"\n      >\n        <ic-link\n          class=\"footer-link\"\n          href={href}\n          hreflang={hreflang}\n          referrerpolicy={referrerpolicy}\n          rel={rel}\n          download={download !== false ? download : undefined}\n          target={target}\n        >\n          <slot />\n        </ic-link>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ic-footer-link.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,eAAe,GAAG,+6JAA+6J,CAAC;AACx8J,2BAAe,eAAe;;MCuBjB,UAAU;IAPvB;;QAUW,eAAU,GAAWA,oBAAY,CAAC,EAAE,CAAC;QACrC,iBAAY,GAAiB,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;QAC9D,oBAAe,GAAsBC,oCAA4B,EAAE,CAAC;;;;QAKrE,aAAQ,GAAsB,KAAK,CAAC;KAgG7C;IArEC,iBAAiB;QACf,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;KAC/C;IAGD,mBAAmB;QACjB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;KAC/C;IAGD,wBAAwB,CAAC,EAAwB;QAC/C,IAAI,CAAC,eAAe,GAAG,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC;KACvC;IAEO,WAAW,CAAC,CAAc;QAChC,IAAI,CAAC,CAAC,aAAa,KAAK,IAAI,EAAE;YAC5B,IAAI,CAAC,CAAC,aAAa,CAAC,SAAS,CAAC,QAAQ,CAAC,WAAW,CAAC,EAAE;gBACnD,OAAO;oBACL,KAAK,EAAE,CAAC,CAAC,aAAa,CAAC,SAAS,CAAC,QAAQ,CAAC,iBAAiB,CAAC;oBAC5D,OAAO,EAAE,CAAC,CAAC,aAAa,CAAC,SAAS,CAAC,QAAQ,CAAC,mBAAmB,CAAC;iBACjE,CAAC;aACH;iBAAM;gBACL,OAAO,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC;aAC1C;SACF;aAAM;YACL,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;SACzC;KACF;IAED,MAAM;QACJ,MAAM,EACJ,YAAY,EACZ,IAAI,EACJ,QAAQ,EACR,cAAc,EACd,GAAG,EACH,MAAM,EACN,QAAQ,GACT,GAAG,IAAI,CAAC;QACT,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,YAAY,CAAC;QAExC,MAAM,UAAU,GAAG,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC;QAEzD,QACEC,QAACC,UAAI,qDACH,KAAK,EAAE;gBACL,aAAa,EAAE,IAAI;gBACnB,CAAC,eAAe,OAAO,GAAG,SAAS,GAAG,WAAW,IAC/C,KAAK,GAAG,OAAO,GAAG,QACpB,EAAE,GAAG,IAAI;gBACT,CAAC,eAAe,IAAI,CAAC,eAAe,EAAE,GAAG,IAAI;gBAC7C,kBAAkB,EAAE,UAAU;aAC/B,EACD,IAAI,EAAC,UAAU,IAEfD,sEACE,KAAK,EAAC,aAAa,EACnB,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,cAAc,EAAE,cAAc,EAC9B,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,QAAQ,KAAK,KAAK,GAAG,QAAQ,GAAG,SAAS,EACnD,MAAM,EAAE,MAAM,IAEdA,oEAAQ,CACA,CACL,EACP;KACH;;;;;;;;","names":["DEVICE_SIZES","getBrandForegroundAppearance","h","Host"],"sources":["src/components/ic-footer-link/ic-footer-link.css?tag=ic-footer-link&encapsulation=shadow","src/components/ic-footer-link/ic-footer-link.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host(.footer-link-ungrouped-sparse) {\n  --footer-link-margin-left: 0;\n  --footer-link-margin-right: 2.5rem;\n  --footer-link-margin-bottom: 0;\n}\n\n:host(.footer-link-ungrouped-small) {\n  --footer-link-margin-left: 0;\n  --footer-link-margin-right: 0;\n  --footer-link-margin-bottom: var(--ic-space-md);\n}\n\n:host(.footer-link-grouped-sparse) {\n  --footer-link-margin-left: 0;\n  --footer-link-margin-right: 0;\n  --footer-link-margin-bottom: var(--ic-space-md);\n}\n\n:host(.footer-link-grouped-small) {\n  --footer-link-margin-left: var(--ic-space-md);\n  --footer-link-margin-right: 0;\n  --footer-link-margin-bottom: var(--ic-space-md);\n}\n\n:host(.footer-link) {\n  margin-left: var(--footer-link-margin-left);\n  margin-right: var(--footer-link-margin-right);\n  margin-bottom: var(--footer-link-margin-bottom);\n}\n\n.ic-link-open-in-new-icon {\n  vertical-align: middle;\n  margin-left: var(--ic-space-xxs);\n}\n\n.ic-link > .ic-link-open-in-new-icon {\n  fill: var(--ic-color-hyperlink-default);\n}\n\n.ic-link-open-in-new-icon > svg {\n  width: var(--ic-space-md);\n  height: var(--ic-space-md);\n  fill: currentcolor;\n}\n\n.ic-link:visited > .ic-link-open-in-new-icon {\n  fill: var(--ic-color-hyperlink-visited);\n}\n\n.ic-link.light:visited > .ic-link-open-in-new-icon {\n  fill: var(--ic-color-hyperlink-contrast-visited);\n}\n\n:host(.breadcrumb-link) .ic-link {\n  display: var(--breadcrumb-link-display);\n  align-items: var(--breadcrumb-link-align-items);\n  gap: var(--breadcrumb-link-gap);\n}\n\n:host(.breadcrumb-link) .ic-link ::slotted(.back-icon) {\n  height: var(--ic-space-lg);\n  width: var(--ic-space-lg);\n}\n\n:host(.breadcrumb-link.current-page) a,\n:host(.breadcrumb-link.current-page) ::slotted(a) {\n  font-weight: normal;\n  color: inherit;\n  text-decoration: none;\n  display: flex;\n  align-items: center;\n}\n\n:host(.breadcrumb-link.current-page) .ic-link,\n:host(.breadcrumb-link.current-page) ::slotted(a:focus) {\n  outline: var(--ic-hc-focus-outline);\n  text-decoration: none;\n}\n\n:host(.breadcrumb-link.current-page) .ic-link:visited {\n  color: var(--ic-color-text-primary);\n}\n\n:host(.footer-link-light) ::part(link),\n:host(.footer-link-dark) ::part(link) {\n  color: var(--ic-footer-link);\n}\n\n:host(.footer-link-light) ::slotted(svg),\n:host(.footer-link-dark) ::slotted(svg) {\n  fill: var(--ic-footer-logo);\n}\n\n:host(.footer-logo-link) {\n  transition: var(--ic-easing-transition-fast);\n}\n\n:host(.footer-logo-link:hover) {\n  background-color: var(--ic-footer-hover);\n}\n\n:host(.footer-logo-link:active) {\n  background-color: var(--ic-footer-pressed);\n}\n\n:host(.footer-logo-link:focus) {\n  box-shadow: var(--ic-border-focus);\n  border-radius: var(--ic-border-radius);\n  outline: var(--ic-hc-focus-outline);\n}\n\n@media (forced-colors: active) {\n  :host(.footer-link-light) ::slotted(svg),\n  :host(.footer-link-dark) ::slotted(svg) {\n    fill: currentcolor;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :host(.footer-logo-link) {\n    transition: none;\n  }\n}\n","import {\n  Component,\n  Element,\n  Host,\n  Listen,\n  Prop,\n  h,\n  State,\n} from \"@stencil/core\";\nimport {\n  DEVICE_SIZES,\n  getBrandForegroundAppearance,\n} from \"../../utils/helpers\";\nimport { IcBrand, IcBrandForeground } from \"../../utils/types\";\n\ntype FooterConfig = { small: boolean; grouped: boolean };\n\n@Component({\n  tag: \"ic-footer-link\",\n  styleUrl: \"ic-footer-link.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class FooterLink {\n  @Element() el: HTMLIcFooterLinkElement;\n\n  @State() deviceSize: number = DEVICE_SIZES.XL;\n  @State() footerConfig: FooterConfig = { small: false, grouped: false };\n  @State() foregroundColor: IcBrandForeground = getBrandForegroundAppearance();\n\n  /**\n   * If `true`, the user can save the linked URL instead of navigating to it.\n   */\n  @Prop() download?: string | boolean = false;\n\n  /**\n   * The URL that the link points to.\n   */\n  @Prop() href?: string;\n\n  /**\n   * The human language of the linked URL.\n   */\n  @Prop() hreflang?: string;\n\n  /**\n   * How much of the referrer to send when following the link.\n   */\n  @Prop() referrerpolicy?: ReferrerPolicy;\n\n  /**\n   * The relationship of the linked URL as space-separated link types.\n   */\n  @Prop() rel?: string;\n\n  /**\n   * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n   */\n  @Prop() target?: string;\n\n  componentWillLoad(): void {\n    this.footerConfig = this.inferConfig(this.el);\n  }\n\n  @Listen(\"footerResized\", { target: \"document\" })\n  footerResizeHandler(): void {\n    this.footerConfig = this.inferConfig(this.el);\n  }\n\n  @Listen(\"brandChange\", { target: \"document\" })\n  footerBrandChangeHandler(ev: CustomEvent<IcBrand>): void {\n    this.foregroundColor = ev.detail.mode;\n  }\n\n  private inferConfig(e: HTMLElement): FooterConfig {\n    if (e.parentElement !== null) {\n      if (e.parentElement.classList.contains(\"ic-footer\")) {\n        return {\n          small: e.parentElement.classList.contains(\"ic-footer-small\"),\n          grouped: e.parentElement.classList.contains(\"ic-footer-grouped\"),\n        };\n      } else {\n        return this.inferConfig(e.parentElement);\n      }\n    } else {\n      return { small: false, grouped: false };\n    }\n  }\n\n  render() {\n    const {\n      footerConfig,\n      href,\n      hreflang,\n      referrerpolicy,\n      rel,\n      target,\n      download,\n    } = this;\n    const { small, grouped } = footerConfig;\n\n    const isLogoLink = !!this.el.closest(\"div[slot='logo']\");\n\n    return (\n      <Host\n        class={{\n          \"footer-link\": true,\n          [`footer-link-${grouped ? \"grouped\" : \"ungrouped\"}-${\n            small ? \"small\" : \"sparse\"\n          }`]: true,\n          [`footer-link-${this.foregroundColor}`]: true,\n          \"footer-logo-link\": isLogoLink,\n        }}\n        role=\"listitem\"\n      >\n        <ic-link\n          class=\"footer-link\"\n          href={href}\n          hreflang={hreflang}\n          referrerpolicy={referrerpolicy}\n          rel={rel}\n          download={download !== false ? download : undefined}\n          target={target}\n        >\n          <slot />\n        </ic-link>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/ic-hero.cjs.entry.js

@@ -81,7 +81,7 @@ const Hero = class {
                 "background-position": scrollFactor,
             };
         }
-        return (index.h(index.Host, { key: 'fdbc239703d4121db55ebf918378cd363253529f', class: {
+        return (index.h(index.Host, { key: 'd7b8be369996272dd365fb416a1134e288dfe6cd', class: {
                 [`ic-hero-${helpers.IcBrandForegroundEnum.Dark}`]: foregroundColor === helpers.IcBrandForegroundEnum.Dark,
                 ["has-background-image"]: backgroundImage !== undefined,
                 ["has-right-content"]: this.rightContent,
@@ -89,12 +89,12 @@ const Hero = class {
                 ["secondary-heading"]: !!secondaryHeading,
                 [`ic-hero-content-aligned-${contentAligned}`]: contentAligned !== undefined,
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            }, style: style }, index.h("ic-section-container", { key: '31bb8c8c2a656e502f2d636382e5c52135d4ea0f', aligned: aligned, fullHeight: true, class: "section-container" }, index.h("div", { key: '890e74b018f5a906a6e07d86beb3ebe2730ea01b', class: {
+            }, style: style }, index.h("ic-section-container", { key: 'a5a8585b31aba9f1434ffaf6aa1145d7853ea4b6', aligned: aligned, fullHeight: true, class: "section-container" }, index.h("div", { key: '1830e42eb85d545b947dfe6ebc6b0d462e48397e', class: {
                 ["left-container"]: true,
                 ["left-container-full-width"]: this.leftContentFullWidth,
-            } }, index.h("div", { key: 'd67d033a9eb735b1f0710e3812f80173bd963c61', class: "heading" }, index.h("slot", { key: '154e08b9f3193d86dcf3aa9a94d742194f98d979', name: "heading" }, index.h("ic-typography", { key: '3e0e811d78b19009cc3ec19458e38455d1e93f75', variant: size === "small" ? "h2" : "h1", class: {
+            } }, index.h("div", { key: '4e2d3d2c1c694f6b330f2555388e9ed4abf4a907', class: "heading" }, index.h("slot", { key: 'ec340ba480f0fd881279225b160a8e6de2a4184a', name: "heading" }, index.h("ic-typography", { key: 'fb49e9dd42f753dc4c4e610da1e0fa76df9cf055', variant: size === "small" ? "h2" : "h1", class: {
                 ["heading-bottom-spacing"]: size !== "small",
-            } }, index.h("h2", { key: 'f0183d996aac2f70dca05b71be894b9529d7ec8b' }, heading)))), index.h("div", { key: 'dd5f0787458bf168c231906d7a9394df0fc0189b', class: "subheading" }, index.h("slot", { key: '16ddacec5c6d34aef1d34e998d9ab314ff8ee38c', name: "subheading" }, index.h("ic-typography", { key: '3d58628932a1c75cff267f60a9330aa85401ee73', variant: "body" }, subheading))), index.h("div", { key: 'b2bf9a217cbde760f04d90d6976489bc143bd2e5', class: "interaction-container" }, index.h("slot", { key: '8e42a9799b7c9bf632265d23e4ac3c6a4fd33e6f', name: "interaction" }))), (helpers.isPropDefined(secondaryHeading) || this.rightContent) && (index.h("div", { key: '7ed3fd485177546e131e4a87b7a9458c1d1f6207', class: "right-container" }, index.h("slot", { key: 'e97a8345e4dc3f25262c3cee033881a005b1a364', name: "secondary" }, secondaryHeading && (index.h("div", { key: 'd2b2a14a8847284bedbd67ca5bbc8fe822dbc38c', class: "secondary-container" }, index.h("div", { key: '8ebe7863cc432fb082c083d9904bf14d859c5d44', class: "secondary-heading" }, index.h("ic-typography", { key: '16b926e7b38f87d945a770196350d2f5877db451', variant: "h4" }, index.h("h3", { key: 'a196ab6f8ca699e7e8a7e1fa557afd79c859d043' }, secondaryHeading))), index.h("div", { key: '532c8888092e849194a6d4b31145807b3afbd240', class: "secondary-subheading" }, index.h("ic-typography", { key: '2852a039483f536e41719ae9f3c35179c4ec0ec2', variant: "subtitle-small" }, secondarySubheading))))))))));
+            } }, index.h("h2", { key: '822a6963c3c2aab17d3a42ff2257e4635414f5d8' }, heading)))), index.h("div", { key: '5e3fa3963bd1a2b18c929e897832968810b25b63', class: "subheading" }, index.h("slot", { key: '04071839319227b3c6e726562f08a2b860c31f4a', name: "subheading" }, index.h("ic-typography", { key: '096dd77e50768edee7017d79b620773a7260643c', variant: "body" }, subheading))), index.h("div", { key: '3e4a3f2afe811228a507dd3edd64f0f7f14c9c44', class: "interaction-container" }, index.h("slot", { key: 'ce0694893cd12d0da5a4db36cca1e8c4ffadd6b2', name: "interaction" }))), (helpers.isPropDefined(secondaryHeading) || this.rightContent) && (index.h("div", { key: '23a775df706d7464e40d86c3f79564b2cf4c8028', class: "right-container" }, index.h("slot", { key: 'f331ac3773afff23990f257c4999cb23957f0a95', name: "secondary" }, secondaryHeading && (index.h("div", { key: '12c5630d51d9f16ec5bd0b03f0de821ce8648e26', class: "secondary-container" }, index.h("div", { key: '0dff38bdf87ccd660f5292b41b29f2b0c681b39d', class: "secondary-heading" }, index.h("ic-typography", { key: '035a480675ce2779e4c4d5a97cfeace5de1b132a', variant: "h4" }, index.h("h3", { key: '0bb8cfd2b3c27206ec7e866b02018ec0c2810386' }, secondaryHeading))), index.h("div", { key: 'c55e6e2669c922a7c5a45d0c5fc225dbcade1e77', class: "secondary-subheading" }, index.h("ic-typography", { key: '52a346be44dec236bd0dcf815ccb41212684fb49', variant: "subtitle-small" }, secondarySubheading))))))))));
     }
     get el() { return index.getElement(this); }
 };