@ukic/web-components 3.4.0 → 3.6.0

package/dist/cjs/ic-card-vertical.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-d337cd8a.js');
-const helpers = require('./helpers-fc4016d2.js');
+const helpers = require('./helpers-8217daf4.js');
 const chevronIcon = require('./chevron-icon-3bf07531.js');
 
 const icCardVerticalCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */\n\n/* Document\n   ========================================================================== */\n\n/**\n * 1. Correct the line height in all browsers.\n * 2. Prevent adjustments of font size after orientation changes in iOS.\n */\n\nhtml {\n  line-height: 1.15; /* 1 */\n  -webkit-text-size-adjust: 100%; /* 2 */\n}\n\n/* Sections\n     ========================================================================== */\n\n/**\n   * Remove the margin in all browsers.\n   */\n\nbody {\n  margin: 0;\n}\n\n/**\n   * Render the `main` element consistently in IE.\n   */\n\nmain {\n  display: block;\n}\n\n/**\n   * Correct the font size and margin on `h1` elements within `section` and\n   * `article` contexts in Chrome, Firefox, and Safari.\n   */\n\nh1 {\n  font-size: 2em;\n  margin: 0.67em 0;\n}\n\n/* Grouping content\n     ========================================================================== */\n\n/**\n   * 1. Add the correct box sizing in Firefox.\n   * 2. Show the overflow in Edge and IE.\n   */\n\nhr {\n  box-sizing: content-box; /* 1 */\n  height: 0; /* 1 */\n  overflow: visible; /* 2 */\n}\n\n/**\n   * 1. Correct the inheritance and scaling of font size in all browsers.\n   * 2. Correct the odd `em` font sizing in all browsers.\n   */\n\npre {\n  font-family: monospace, monospace; /* 1 */\n  font-size: 1em; /* 2 */\n}\n\n/* Text-level semantics\n     ========================================================================== */\n\n/**\n   * Remove the gray background on active links in IE 10.\n   */\n\na {\n  background-color: transparent;\n}\n\n/**\n   * 1. Remove the bottom border in Chrome 57-\n   * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.\n   */\n\nabbr[title] {\n  border-bottom: none; /* 1 */\n  text-decoration: underline; /* 2 */\n  -webkit-text-decoration: underline dotted;\n          text-decoration: underline dotted; /* 2 */\n}\n\n/**\n   * Add the correct font weight in Chrome, Edge, and Safari.\n   */\n\nb,\nstrong {\n  font-weight: bolder;\n}\n\n/**\n   * 1. Correct the inheritance and scaling of font size in all browsers.\n   * 2. Correct the odd `em` font sizing in all browsers.\n   */\n\ncode,\nkbd,\nsamp {\n  font-family: monospace, monospace; /* 1 */\n  font-size: 1em; /* 2 */\n}\n\n/**\n   * Add the correct font size in all browsers.\n   */\n\nsmall {\n  font-size: 80%;\n}\n\n/**\n   * Prevent `sub` and `sup` elements from affecting the line height in\n   * all browsers.\n   */\n\nsub,\nsup {\n  font-size: 75%;\n  line-height: 0;\n  position: relative;\n  vertical-align: baseline;\n}\n\nsub {\n  bottom: -0.25em;\n}\n\nsup {\n  top: -0.5em;\n}\n\n/* Embedded content\n     ========================================================================== */\n\n/**\n   * Remove the border on images inside links in IE 10.\n   */\n\nimg {\n  border-style: none;\n}\n\n/* Forms\n     ========================================================================== */\n\n/**\n   * 1. Change the font styles in all browsers.\n   * 2. Remove the margin in Firefox and Safari.\n   */\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n  font-family: inherit; /* 1 */\n  font-size: 100%; /* 1 */\n  line-height: 1.15; /* 1 */\n  margin: 0; /* 2 */\n}\n\n/**\n   * Show the overflow in IE.\n   * 1. Show the overflow in Edge.\n   */\n\nbutton,\ninput {\n  /* 1 */\n  overflow: visible;\n}\n\n/**\n   * Remove the inheritance of text transform in Edge, Firefox, and IE.\n   * 1. Remove the inheritance of text transform in Firefox.\n   */\n\nbutton,\nselect {\n  /* 1 */\n  text-transform: none;\n}\n\n/**\n   * Correct the inability to style clickable types in iOS and Safari.\n   */\n\nbutton,\n[type=\"button\"],\n[type=\"reset\"],\n[type=\"submit\"] {\n  -webkit-appearance: button;\n}\n\n/**\n   * Remove the inner border and padding in Firefox.\n   */\n\nbutton::-moz-focus-inner,\n[type=\"button\"]::-moz-focus-inner,\n[type=\"reset\"]::-moz-focus-inner,\n[type=\"submit\"]::-moz-focus-inner {\n  border-style: none;\n  padding: 0;\n}\n\n/**\n   * Restore the focus styles unset by the previous rule.\n   */\n\nbutton:-moz-focusring,\n[type=\"button\"]:-moz-focusring,\n[type=\"reset\"]:-moz-focusring,\n[type=\"submit\"]:-moz-focusring {\n  outline: 1px dotted ButtonText;\n}\n\n/**\n   * Correct the padding in Firefox.\n   */\n\nfieldset {\n  padding: 0.35em 0.75em 0.625em;\n}\n\n/**\n   * 1. Correct the text wrapping in Edge and IE.\n   * 2. Correct the color inheritance from `fieldset` elements in IE.\n   * 3. Remove the padding so developers are not caught out when they zero out\n   *    `fieldset` elements in all browsers.\n   */\n\nlegend {\n  box-sizing: border-box; /* 1 */\n  color: inherit; /* 2 */\n  display: table; /* 1 */\n  max-width: 100%; /* 1 */\n  padding: 0; /* 3 */\n  white-space: normal; /* 1 */\n}\n\n/**\n   * Add the correct vertical alignment in Chrome, Firefox, and Opera.\n   */\n\nprogress {\n  vertical-align: baseline;\n}\n\n/**\n   * Remove the default vertical scrollbar in IE 10+.\n   */\n\ntextarea {\n  overflow: auto;\n}\n\n/**\n   * 1. Add the correct box sizing in IE 10.\n   * 2. Remove the padding in IE 10.\n   */\n\n[type=\"checkbox\"],\n[type=\"radio\"] {\n  box-sizing: border-box; /* 1 */\n  padding: 0; /* 2 */\n}\n\n/**\n   * Correct the cursor style of increment and decrement buttons in Chrome.\n   */\n\n[type=\"number\"]::-webkit-inner-spin-button,\n[type=\"number\"]::-webkit-outer-spin-button {\n  height: auto;\n}\n\n/**\n   * 1. Correct the odd appearance in Chrome and Safari.\n   * 2. Correct the outline style in Safari.\n   */\n\n[type=\"search\"] {\n  -webkit-appearance: textfield; /* 1 */\n  outline-offset: -2px; /* 2 */\n}\n\n/**\n   * Remove the inner padding in Chrome and Safari on macOS.\n   */\n\n[type=\"search\"]::-webkit-search-decoration {\n  -webkit-appearance: none;\n}\n\n/**\n   * 1. Correct the inability to style clickable types in iOS and Safari.\n   * 2. Change font properties to `inherit` in Safari.\n   */\n\n::-webkit-file-upload-button {\n  -webkit-appearance: button; /* 1 */\n  font: inherit; /* 2 */\n}\n\n/* Interactive\n     ========================================================================== */\n\n/*\n   * Add the correct display in Edge, IE 10+, and Firefox.\n   */\n\ndetails {\n  display: block;\n}\n\n/*\n   * Add the correct display in all browsers.\n   */\n\nsummary {\n  display: list-item;\n}\n\n/* Misc\n     ========================================================================== */\n\n/**\n   * Add the correct display in IE 10+.\n   */\n\ntemplate {\n  display: none;\n}\n\n/**\n   * Add the correct display in IE 10.\n   */\n\n[hidden] {\n  display: none;\n}\n\nhtml,\nbody,\ndiv,\nspan,\napplet,\nobject,\niframe,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\np,\nblockquote,\npre,\na,\nabbr,\nacronym,\naddress,\nbig,\ncite,\ncode,\ndel,\ndfn,\nem,\nimg,\nins,\nkbd,\nq,\ns,\nsamp,\nsmall,\nstrike,\nstrong,\nsub,\nsup,\ntt,\nvar,\nb,\nu,\ni,\ncenter,\ndl,\ndt,\ndd,\nol,\nul,\nli,\nfieldset,\nform,\nlabel,\nlegend,\ntable,\ncaption,\ntbody,\ntfoot,\nthead,\ntr,\nth,\ntd,\narticle,\naside,\ncanvas,\ndetails,\nembed,\nfigure,\nfigcaption,\nfooter,\nheader,\nhgroup,\nmenu,\nnav,\noutput,\nruby,\nsection,\nsummary,\ntime,\nmark,\naudio,\nvideo {\n  margin: 0;\n  padding: 0;\n  border: 0;\n  font-size: 100%;\n  font-style: inherit;\n  vertical-align: baseline;\n}\n\n\n:host {\n  display: flex;\n}\n\na {\n  text-decoration: none !important;\n  color: var(--ic-card-text-primary) !important;\n}\n\na:visited {\n  color: var(--ic-card-link-action-dark) !important;\n}\n\nbutton {\n  border: none;\n  background-color: transparent;\n  outline: var(--ic-hc-focus-outline);\n}\n\n.card {\n  display: flex;\n  flex-direction: column;\n  border: var(--ic-space-1px) solid var(--ic-card-border-primary);\n  border-radius: var(--ic-border-radius);\n  box-sizing: border-box;\n  padding: var(--ic-space-md);\n  text-align: left;\n  color: var(--ic-card-text-primary);\n  transition: var(--ic-easing-transition-fast);\n  position: relative;\n  width: inherit;\n  min-width: -moz-fit-content;\n  min-width: fit-content;\n  height: -moz-fit-content;\n  height: fit-content;\n  min-height: 100%;\n\n  ::slotted(svg) {\n    fill: var(--ic-card-icon);\n  }\n\n  &.monochrome {\n    border: var(--ic-border-width) solid var(--ic-card-border-monochrome);\n  }\n\n  &.fullwidth {\n    width: 100%;\n  }\n\n  &.clickable {\n    &:hover {\n      background-color: var(--ic-card-background-hover);\n      border: var(--ic-space-1px) solid var(--ic-card-hover-border-color);\n      cursor: pointer;\n    }\n\n    &.focussed,\n    &:focus {\n      background-color: var(--ic-card-background-hover);\n      box-shadow: var(--ic-border-focus);\n      outline: var(--ic-hc-focus-outline);\n      border: var(--ic-space-1px) solid var(--ic-card-pressed-border-color);\n    }\n\n    &:active {\n      background-color: var(--ic-card-background-pressed);\n      box-shadow: var(--ic-border-focus);\n\n      .card-title {\n        text-decoration: none;\n      }\n    }\n\n    .card-title {\n      --ic-typography-color: var(--ic-card-clickable-text);\n\n      color: var(--ic-card-clickable-text);\n      text-decoration: underline;\n      text-decoration-thickness: var(--ic-space-1px);\n      margin-bottom: var(--ic-space-xxs);\n    }\n\n    .interaction-button,\n    .icon {\n      margin-bottom: var(--ic-space-xxs);\n    }\n  }\n\n  &.disabled {\n    border: var(--ic-space-1px) dashed var(--ic-card-disabled-border-color);\n\n    .card-message,\n    .subheading,\n    .card-title {\n      --ic-typography-color: var(--ic-card-disabled-text);\n    }\n\n    .card-title {\n      text-decoration: underline;\n      text-decoration-thickness: var(--ic-space-1px);\n      text-decoration-color: var(--ic-card-disabled-text);\n      color: var(--ic-card-disabled-text);\n    }\n\n    ::slotted(svg) {\n      fill: var(--ic-card-icon-disabled);\n    }\n  }\n}\n\n.card-header {\n  display: flex;\n  align-items: center;\n}\n\n.icon {\n  display: flex;\n  align-items: center;\n  padding-right: var(--ic-space-xs);\n}\n\n.card.clickable:hover .card-title,\n.card.clickable:focus .card-title,\n.card.clickable.focussed .card-title {\n  display: inline-block;\n  border-bottom: 0.25rem solid !important;\n  margin-bottom: 0 !important;\n  text-decoration: none;\n}\n\n@supports (text-underline-offset: 25%) {\n  .card.clickable:hover .card-title,\n  .card.clickable:focus .card-title,\n  .card.clickable.focussed .card-title {\n    text-decoration-line: underline;\n    text-decoration-thickness: 25%;\n    text-underline-offset: 25%;\n    border-bottom: 0 !important;\n    margin-bottom: 0.25rem !important;\n  }\n}\n\n.subheading {\n  margin-top: var(--ic-space-xxs);\n}\n\n.adornment {\n  margin-top: var(--ic-space-xxs);\n}\n\n.card-message {\n  margin-top: var(--ic-space-md);\n  align-items: left;\n}\n\n.interaction-button {\n  margin-left: auto;\n}\n\n.image-top {\n  margin-bottom: var(--ic-space-md);\n  display: flex;\n  justify-content: center;\n}\n\n.image-mid {\n  margin-top: var(--ic-space-md);\n  display: flex;\n  justify-content: center;\n}\n\n.interaction-area {\n  display: flex;\n  flex-grow: 1;\n  gap: var(--ic-space-md);\n  margin-top: var(--ic-space-md);\n  align-items: flex-end;\n}\n\n.interaction-controls {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: var(--ic-space-sm);\n}\n\n.toggle-button {\n  width: 2.5rem;\n  height: 2.5rem;\n  padding: var(--ic-space-xs);\n  margin: var(--ic-space-1px) 0;\n  min-width: 0;\n  cursor: pointer;\n  transition: var(--ic-easing-transition-fast);\n  border-radius: var(--ic-border-radius);\n  display: inline-flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  background: none;\n  border: none;\n  box-sizing: border-box;\n  white-space: nowrap;\n  vertical-align: middle;\n\n  &:hover {\n    background-color: var(--ic-card-background-hover);\n  }\n\n  &:focus {\n    box-shadow: var(--ic-border-focus);\n  }\n\n  &:active:not(:focus) {\n    background-color: var(--ic-card-background-pressed);\n  }\n\n  svg {\n    pointer-events: none;\n    width: 100% !important;\n    height: 100% !important;\n    fill: currentcolor !important;\n  }\n}\n\n#ic-tooltip-expand-button {\n  margin-left: auto;\n  position: relative;\n}\n\n.toggle-button-closed svg {\n  transform: rotate(90deg);\n}\n\n.toggle-button-expanded svg {\n  transform: rotate(-90deg);\n}\n\n.expanded-content {\n  margin-top: var(--ic-space-md);\n}\n\n/** High Contrast **/\n@media (forced-colors: active) {\n  .card {\n    ::slotted(svg) {\n      fill: currentcolor;\n    }\n\n    &.disabled {\n      border-color: GrayText !important;\n\n      ::slotted(svg) {\n        fill: GrayText !important;\n      }\n\n      .card-message,\n      .subheading,\n      .card-title {\n        color: GrayText;\n\n        --ic-typography-color: GrayText;\n      }\n    }\n  }\n\n  .toggle-button:focus,\n  .toggle-button:hover {\n    outline-color: Highlight;\n  }\n}\n";

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

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-d337cd8a.js');
-const helpers = require('./helpers-fc4016d2.js');
+const helpers = require('./helpers-8217daf4.js');
 
-const icCheckboxGroupCss = "/*! 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{display:block;--ic-input-label-text-color:var(--ic-checkbox-group-label);--ic-input-label-helper-text-color:var(--ic-checkbox-group-subtitle);--ic-input-validation-error:var(--ic-checkbox-state-icon-error);--ic-input-validation-status-text-color:var(--ic-checkbox-state-text)}:host(.ic-checkbox-group-disabled){--ic-input-label-text-color:var(--ic-checkbox-group-label-disabled);--ic-input-label-helper-text-color:var(\n    --ic-checkbox-group-subtitle-disabled\n  )}ic-input-label.error{color:var(--ic-checkbox-group-label-error);--ic-typography-color:var(--ic-checkbox-group-label-error);--ic-input-label-helper-text-color:var(--ic-checkbox-group-subtitle-error)}ic-input-label ic-typography{margin-bottom:var(--ic-space-sm)}:host(.ic-checkbox-group-small) ic-input-label ic-typography{margin-bottom:calc(var(--ic-space-sm) / 2)}ic-input-validation{margin-top:var(--ic-space-sm)}:host(.ic-checkbox-group-small) ic-input-validation{margin-top:calc(var(--ic-space-sm) / 2)}.checkboxes-container{margin-bottom:calc(-1 * var(--ic-space-xxs))}:host(.ic-checkbox-group-small) .checkboxes-container{margin-bottom:calc(-1 * var(--ic-space-xxxs))}.screen-reader-only-text{position:absolute;left:-9999px;background-color:#fff;color:#000;text-transform:none}.screen-reader-only-text:dir(rtl){right:-9999px}";
+const icCheckboxGroupCss = "/*! 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{display:block;--ic-input-label-text-color:var(--ic-checkbox-group-label);--ic-input-label-helper-text-color:var(--ic-checkbox-group-subtitle);--ic-input-validation-error:var(--ic-checkbox-state-icon-error);--ic-input-validation-status-text-color:var(--ic-checkbox-state-text)}:host(.ic-checkbox-group-disabled){--ic-input-label-text-color:var(--ic-checkbox-group-label-disabled);--ic-input-label-helper-text-color:var(\n    --ic-checkbox-group-subtitle-disabled\n  )}ic-input-label.error{color:var(--ic-checkbox-group-label-error);--ic-typography-color:var(--ic-checkbox-group-label-error);--ic-input-label-helper-text-color:var(--ic-checkbox-group-subtitle-error)}ic-input-label:not(.with-helper) .ic-typography-label,ic-input-label .helpertext{margin-bottom:var(--ic-space-sm)}:host(.ic-checkbox-group-small) ic-input-label:not(.with-helper) .ic-typography-label,:host(.ic-checkbox-group-small) ic-input-label .helpertext{margin-bottom:calc(var(--ic-space-sm) / 2)}:host(.ic-checkbox-group-large) ic-input-label:not(.with-helper) .ic-typography-label,:host(.ic-checkbox-group-large) ic-input-label .helpertext{margin-bottom:calc(var(--ic-space-sm) * 1.5)}ic-input-label .helpertext{display:block}ic-input-validation{margin-top:var(--ic-space-sm)}:host(.ic-checkbox-group-small) ic-input-validation{margin-top:calc(var(--ic-space-sm) / 2)}:host(.ic-checkbox-group-large) ic-input-validation{margin-top:calc(var(--ic-space-sm) * 1.5)}.checkboxes-container{margin-bottom:calc(-1 * var(--ic-space-xxs))}:host(.ic-checkbox-group-small) .checkboxes-container{margin-bottom:calc(-1 * var(--ic-space-xxxs))}.screen-reader-only-text{position:absolute;left:-9999px;background-color:#fff;color:#000;text-transform:none}.screen-reader-only-text:dir(rtl){right:-9999px}";
 const IcCheckboxGroupStyle0 = icCheckboxGroupCss;
 
 const CHECKBOX_SELECTOR = "ic-checkbox";
@@ -97,13 +97,13 @@ const CheckboxGroup = class {
     }
     render() {
         const { disabled, helperText, hideLabel, label, name, required, size, theme, validationStatus, validationText, } = this;
-        const describedBy = helpers.getInputDescribedByText(name, helperText !== "", validationStatus !== "");
+        const describedBy = helpers.getInputDescribedByText(this.el, name, helperText !== "", validationStatus !== "");
         const renderSRText = validationStatus === "error" || required || hideLabel;
-        return (index.h(index.Host, { key: 'dd6561e0a06005db39cc273f561136d6ef8000e1', class: {
+        return (index.h(index.Host, { key: '3eab3a8d0cc27b77ac7daf1f6d3068533ab675bb', class: {
                 "ic-checkbox-group-disabled": !!disabled,
                 [`ic-checkbox-group-${size}`]: true,
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            } }, renderSRText && (index.h("span", { key: 'ff0e15fca2694ea0474066455f6326277adaffc3', id: "screenReaderOnlyText", class: "screen-reader-only-text", "aria-hidden": "true" }, label, " ", validationStatus === "error" ? "invalid data " : null, " ", required ? "required" : null)), index.h("fieldset", { key: '0fc5e56558f307bf725f40dd07206304bdc1ba21', id: name, "aria-labelledby": `${renderSRText ? "screenReaderOnlyText" : ""} ${describedBy}`.trim(), disabled: disabled }, !hideLabel && (index.h("legend", { key: 'f6735766d825d26de30926e0731f92858c52075c' }, index.h("ic-input-label", { key: 'dfaaf64894a538bdd967e31a75fee7ba7998d318', class: { [`${validationStatus}`]: true }, label: label, helperText: helperText, required: required, disabled: disabled, useLabelTag: false }))), index.h("div", { key: 'f1e2957a700e05adb8d337a6f31eee9a7d6b704e', class: "checkboxes-container" }, index.h("slot", { key: '8ab8f0230383099884c1a78cb91c266a7fbb9f4c' }))), helpers.hasValidationStatus(validationStatus, disabled) && (index.h("ic-input-validation", { key: '5f5e1199788d9f4d59d5c10a09d4334c74ccc4d1', for: name, ariaLiveMode: "polite", status: validationStatus, message: validationText }))));
+            } }, renderSRText && (index.h("span", { key: '3cbf05ef6c6df9737d8f40ecbe6db5944f8a2406', id: "screenReaderOnlyText", class: "screen-reader-only-text", "aria-hidden": "true" }, label, " ", validationStatus === "error" ? "invalid data " : null, " ", required ? "required" : null)), index.h("fieldset", { key: 'ce2d74b5e4f88c2cdfc6b730db2b3763c48df206', id: name, "aria-labelledby": `${renderSRText ? "screenReaderOnlyText" : ""} ${describedBy}`.trim(), disabled: disabled }, !hideLabel && (index.h("legend", { key: '70a1b515ccd08e731837ee10f248163f342536b2' }, index.h("ic-input-label", { key: '67be3445bb1dee8a2e1ccee88f16ae58fc81c77e', class: { [`${validationStatus}`]: true }, label: label, helperText: helperText, required: required, disabled: disabled, useLabelTag: false }, index.h("slot", { key: 'be393bdcf6138057e1e0c65082817f590dbcadf7', name: "helper-text", slot: "helper-text" })))), index.h("div", { key: 'd43399d04efc5501f5a8b118aedbba213410593b', class: "checkboxes-container" }, index.h("slot", { key: '96c715128256965fb3acbe3ff5eca7bb5be9897b' }))), helpers.hasValidationStatus(validationStatus, disabled) && (index.h("ic-input-validation", { key: '6b4b02fd8819946472c6a0c60c050ef885168312', for: name, ariaLiveMode: "polite", status: validationStatus, message: validationText }))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -1 +1 @@
-{"file":"ic-checkbox-group.entry.cjs.js","mappings":"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","names":["removeDisabledFalse","onComponentRequiredPropUndefined","getInputDescribedByText","h","Host","hasValidationStatus"],"sources":["src/components/ic-checkbox-group/ic-checkbox-group.css?tag=ic-checkbox-group&encapsulation=shadow","src/components/ic-checkbox-group/ic-checkbox-group.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n  display: block;\n\n  --ic-input-label-text-color: var(--ic-checkbox-group-label);\n  --ic-input-label-helper-text-color: var(--ic-checkbox-group-subtitle);\n  --ic-input-validation-error: var(--ic-checkbox-state-icon-error);\n  --ic-input-validation-status-text-color: var(--ic-checkbox-state-text);\n}\n\n:host(.ic-checkbox-group-disabled) {\n  --ic-input-label-text-color: var(--ic-checkbox-group-label-disabled);\n  --ic-input-label-helper-text-color: var(\n    --ic-checkbox-group-subtitle-disabled\n  );\n}\n\nic-input-label.error {\n  color: var(--ic-checkbox-group-label-error);\n\n  --ic-typography-color: var(--ic-checkbox-group-label-error);\n  --ic-input-label-helper-text-color: var(--ic-checkbox-group-subtitle-error);\n}\n\nic-input-label ic-typography {\n  margin-bottom: var(--ic-space-sm);\n}\n\n:host(.ic-checkbox-group-small) ic-input-label ic-typography {\n  margin-bottom: calc(var(--ic-space-sm) / 2);\n}\n\nic-input-validation {\n  margin-top: var(--ic-space-sm);\n}\n\n:host(.ic-checkbox-group-small) ic-input-validation {\n  margin-top: calc(var(--ic-space-sm) / 2);\n}\n\n.checkboxes-container {\n  margin-bottom: calc(-1 * var(--ic-space-xxs));\n}\n\n:host(.ic-checkbox-group-small) .checkboxes-container {\n  margin-bottom: calc(-1 * var(--ic-space-xxxs));\n}\n\n.screen-reader-only-text {\n  position: absolute;\n  left: -9999px;\n  background-color: #fff;\n  color: #000;\n  text-transform: none;\n}\n\n.screen-reader-only-text:dir(rtl) {\n  right: -9999px;\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Listen,\n  Element,\n  Event,\n  EventEmitter,\n  Watch,\n} from \"@stencil/core\";\nimport {\n  getInputDescribedByText,\n  hasValidationStatus,\n  onComponentRequiredPropUndefined,\n  removeDisabledFalse,\n} from \"../../utils/helpers\";\nimport {\n  IcInformationStatusOrEmpty,\n  IcSizes,\n  IcThemeMode,\n} from \"../../utils/types\";\nimport { IcChangeEventDetail } from \"./ic-checkbox-group.types\";\n\nconst CHECKBOX_SELECTOR = \"ic-checkbox\";\n\n@Component({\n  tag: \"ic-checkbox-group\",\n  styleUrl: \"ic-checkbox-group.css\",\n  shadow: true,\n})\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nexport class CheckboxGroup {\n  @Element() el: HTMLIcCheckboxGroupElement;\n\n  /**\n   * If `true`, the checkbox group will be set to the disabled state.\n   */\n  @Prop() disabled: boolean = false;\n  @Watch(\"disabled\")\n  watchDisabledHandler(): void {\n    removeDisabledFalse(this.disabled, this.el);\n  }\n\n  /**\n   * The helper text that will be displayed for additional field guidance.\n   */\n  @Prop() helperText: 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: boolean = false;\n\n  /**\n   * The label for the checkbox group to be displayed.\n   */\n  @Prop() label!: string;\n\n  /**\n   * The name for the checkbox group to differentiate from other groups.\n   */\n  @Prop() name!: string;\n\n  @Watch(\"label\")\n  @Watch(\"name\")\n  labelNameHandler(\n    newValue: string,\n    oldValue: string,\n    propName: \"label\" | \"name\"\n  ): void {\n    Array.from(this.el.querySelectorAll(CHECKBOX_SELECTOR)).forEach(\n      (checkbox) => {\n        if (propName === \"label\") checkbox.groupLabel = newValue;\n        else if (checkbox.name === oldValue) {\n          // If the checkbox name has been set by the parent, then override it\n          checkbox.name = newValue;\n        }\n      }\n    );\n  }\n\n  /**\n   * If `true`, the checkbox group will require a value.\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * The size of the checkboxes to be displayed. This does not affect the font size of the label.\n   */\n  @Prop() size: IcSizes = \"medium\";\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  @Watch(\"theme\")\n  watchThemeHandler(newValue: IcThemeMode): void {\n    Array.from(this.el.querySelectorAll(CHECKBOX_SELECTOR)).forEach(\n      (checkbox) => {\n        checkbox.theme = newValue;\n      }\n    );\n  }\n\n  /**\n   * The validation status - e.g. 'error' | 'warning' | 'success'.\n   */\n  @Prop() validationStatus: IcInformationStatusOrEmpty = \"\";\n\n  /**\n   * The text to display as the validation message.\n   */\n  @Prop() validationText: string = \"\";\n\n  /**\n   * Emitted when a checkbox is checked.\n   */\n  @Event() icChange: EventEmitter<IcChangeEventDetail>;\n\n  @Listen(\"icChange\")\n  handleChange(ev: CustomEvent): void {\n    //don't pass on the event if it has come from slotted text field\n    //otherwise any icChange handler bound to the checkbox group will also run\n    if ((ev.target as HTMLElement).tagName === \"IC-TEXT-FIELD\") {\n      ev.stopImmediatePropagation();\n    }\n  }\n\n  componentWillLoad(): void {\n    removeDisabledFalse(this.disabled, this.el);\n    this.watchThemeHandler(this.theme);\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [\n        { prop: this.label, propName: \"label\" },\n        { prop: this.name, propName: \"name\" },\n      ],\n      \"Checkbox Group\"\n    );\n  }\n\n  @Listen(\"icCheck\")\n  selectHandler({ target }: CustomEvent): void {\n    const checkedOptions = Array.from(\n      this.el.querySelectorAll(CHECKBOX_SELECTOR)\n    ).filter(({ checked, disabled }) => checked && !disabled);\n    this.icChange.emit({\n      value: checkedOptions.map(({ value }) => value),\n      checkedOptions: checkedOptions.map((opt) => ({\n        checkbox: opt,\n        textFieldValue: opt.querySelector(\"ic-text-field\")?.value,\n      })),\n      selectedOption: target as HTMLIcCheckboxElement,\n    });\n  }\n\n  render() {\n    const {\n      disabled,\n      helperText,\n      hideLabel,\n      label,\n      name,\n      required,\n      size,\n      theme,\n      validationStatus,\n      validationText,\n    } = this;\n\n    const describedBy = getInputDescribedByText(\n      name,\n      helperText !== \"\",\n      validationStatus !== \"\"\n    );\n\n    const renderSRText = validationStatus === \"error\" || required || hideLabel;\n\n    return (\n      <Host\n        class={{\n          \"ic-checkbox-group-disabled\": !!disabled,\n          [`ic-checkbox-group-${size}`]: true,\n          [`ic-theme-${theme}`]: theme !== \"inherit\",\n        }}\n      >\n        {renderSRText && (\n          <span\n            id=\"screenReaderOnlyText\"\n            class=\"screen-reader-only-text\"\n            aria-hidden=\"true\"\n          >\n            {label} {validationStatus === \"error\" ? \"invalid data \" : null}{\" \"}\n            {required ? \"required\" : null}\n          </span>\n        )}\n        <fieldset\n          id={name}\n          aria-labelledby={`${\n            renderSRText ? \"screenReaderOnlyText\" : \"\"\n          } ${describedBy}`.trim()}\n          disabled={disabled}\n        >\n          {!hideLabel && (\n            <legend>\n              <ic-input-label\n                class={{ [`${validationStatus}`]: true }}\n                label={label}\n                helperText={helperText}\n                required={required}\n                disabled={disabled}\n                useLabelTag={false}\n              ></ic-input-label>\n            </legend>\n          )}\n          <div class=\"checkboxes-container\">\n            <slot></slot>\n          </div>\n        </fieldset>\n        {hasValidationStatus(validationStatus, disabled) && (\n          <ic-input-validation\n            for={name}\n            ariaLiveMode=\"polite\"\n            status={validationStatus}\n            message={validationText}\n          ></ic-input-validation>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ic-checkbox-group.entry.cjs.js","mappings":"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","names":["removeDisabledFalse","onComponentRequiredPropUndefined","getInputDescribedByText","h","Host","hasValidationStatus"],"sources":["src/components/ic-checkbox-group/ic-checkbox-group.css?tag=ic-checkbox-group&encapsulation=shadow","src/components/ic-checkbox-group/ic-checkbox-group.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n  display: block;\n\n  --ic-input-label-text-color: var(--ic-checkbox-group-label);\n  --ic-input-label-helper-text-color: var(--ic-checkbox-group-subtitle);\n  --ic-input-validation-error: var(--ic-checkbox-state-icon-error);\n  --ic-input-validation-status-text-color: var(--ic-checkbox-state-text);\n}\n\n:host(.ic-checkbox-group-disabled) {\n  --ic-input-label-text-color: var(--ic-checkbox-group-label-disabled);\n  --ic-input-label-helper-text-color: var(\n    --ic-checkbox-group-subtitle-disabled\n  );\n}\n\nic-input-label.error {\n  color: var(--ic-checkbox-group-label-error);\n\n  --ic-typography-color: var(--ic-checkbox-group-label-error);\n  --ic-input-label-helper-text-color: var(--ic-checkbox-group-subtitle-error);\n}\n\nic-input-label:not(.with-helper) .ic-typography-label,\nic-input-label .helpertext {\n  margin-bottom: var(--ic-space-sm);\n}\n\n:host(.ic-checkbox-group-small)\n  ic-input-label:not(.with-helper)\n  .ic-typography-label,\n:host(.ic-checkbox-group-small) ic-input-label .helpertext {\n  margin-bottom: calc(var(--ic-space-sm) / 2);\n}\n\n:host(.ic-checkbox-group-large)\n  ic-input-label:not(.with-helper)\n  .ic-typography-label,\n:host(.ic-checkbox-group-large) ic-input-label .helpertext {\n  margin-bottom: calc(var(--ic-space-sm) * 1.5);\n}\n\nic-input-label .helpertext {\n  display: block;\n}\n\nic-input-validation {\n  margin-top: var(--ic-space-sm);\n}\n\n:host(.ic-checkbox-group-small) ic-input-validation {\n  margin-top: calc(var(--ic-space-sm) / 2);\n}\n\n:host(.ic-checkbox-group-large) ic-input-validation {\n  margin-top: calc(var(--ic-space-sm) * 1.5);\n}\n\n.checkboxes-container {\n  margin-bottom: calc(-1 * var(--ic-space-xxs));\n}\n\n:host(.ic-checkbox-group-small) .checkboxes-container {\n  margin-bottom: calc(-1 * var(--ic-space-xxxs));\n}\n\n.screen-reader-only-text {\n  position: absolute;\n  left: -9999px;\n  background-color: #fff;\n  color: #000;\n  text-transform: none;\n}\n\n.screen-reader-only-text:dir(rtl) {\n  right: -9999px;\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Listen,\n  Element,\n  Event,\n  EventEmitter,\n  Watch,\n} from \"@stencil/core\";\nimport {\n  getInputDescribedByText,\n  hasValidationStatus,\n  onComponentRequiredPropUndefined,\n  removeDisabledFalse,\n} from \"../../utils/helpers\";\nimport {\n  IcInformationStatusOrEmpty,\n  IcSizes,\n  IcThemeMode,\n} from \"../../utils/types\";\nimport { IcChangeEventDetail } from \"./ic-checkbox-group.types\";\n\nconst CHECKBOX_SELECTOR = \"ic-checkbox\";\n\n/**\n * @slot helper-text - Content is set as the helper text for the checkbox group.\n */\n@Component({\n  tag: \"ic-checkbox-group\",\n  styleUrl: \"ic-checkbox-group.css\",\n  shadow: true,\n})\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nexport class CheckboxGroup {\n  @Element() el: HTMLIcCheckboxGroupElement;\n\n  /**\n   * If `true`, the checkbox group will be set to the disabled state.\n   */\n  @Prop() disabled: boolean = false;\n  @Watch(\"disabled\")\n  watchDisabledHandler(): void {\n    removeDisabledFalse(this.disabled, this.el);\n  }\n\n  /**\n   * The helper text that will be displayed for additional field guidance.\n   */\n  @Prop() helperText: 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: boolean = false;\n\n  /**\n   * The label for the checkbox group to be displayed.\n   */\n  @Prop() label!: string;\n\n  /**\n   * The name for the checkbox group to differentiate from other groups.\n   */\n  @Prop() name!: string;\n\n  @Watch(\"label\")\n  @Watch(\"name\")\n  labelNameHandler(\n    newValue: string,\n    oldValue: string,\n    propName: \"label\" | \"name\"\n  ): void {\n    Array.from(this.el.querySelectorAll(CHECKBOX_SELECTOR)).forEach(\n      (checkbox) => {\n        if (propName === \"label\") checkbox.groupLabel = newValue;\n        else if (checkbox.name === oldValue) {\n          // If the checkbox name has been set by the parent, then override it\n          checkbox.name = newValue;\n        }\n      }\n    );\n  }\n\n  /**\n   * If `true`, the checkbox group will require a value.\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * The size of the checkboxes to be displayed. This does not affect the font size of the label.\n   */\n  @Prop() size: IcSizes = \"medium\";\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  @Watch(\"theme\")\n  watchThemeHandler(newValue: IcThemeMode): void {\n    Array.from(this.el.querySelectorAll(CHECKBOX_SELECTOR)).forEach(\n      (checkbox) => {\n        checkbox.theme = newValue;\n      }\n    );\n  }\n\n  /**\n   * The validation status - e.g. 'error' | 'warning' | 'success'.\n   */\n  @Prop() validationStatus: IcInformationStatusOrEmpty = \"\";\n\n  /**\n   * The text to display as the validation message.\n   */\n  @Prop() validationText: string = \"\";\n\n  /**\n   * Emitted when a checkbox is checked.\n   */\n  @Event() icChange: EventEmitter<IcChangeEventDetail>;\n\n  @Listen(\"icChange\")\n  handleChange(ev: CustomEvent): void {\n    //don't pass on the event if it has come from slotted text field\n    //otherwise any icChange handler bound to the checkbox group will also run\n    if ((ev.target as HTMLElement).tagName === \"IC-TEXT-FIELD\") {\n      ev.stopImmediatePropagation();\n    }\n  }\n\n  componentWillLoad(): void {\n    removeDisabledFalse(this.disabled, this.el);\n    this.watchThemeHandler(this.theme);\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [\n        { prop: this.label, propName: \"label\" },\n        { prop: this.name, propName: \"name\" },\n      ],\n      \"Checkbox Group\"\n    );\n  }\n\n  @Listen(\"icCheck\")\n  selectHandler({ target }: CustomEvent): void {\n    const checkedOptions = Array.from(\n      this.el.querySelectorAll(CHECKBOX_SELECTOR)\n    ).filter(({ checked, disabled }) => checked && !disabled);\n    this.icChange.emit({\n      value: checkedOptions.map(({ value }) => value),\n      checkedOptions: checkedOptions.map((opt) => ({\n        checkbox: opt,\n        textFieldValue: opt.querySelector(\"ic-text-field\")?.value,\n      })),\n      selectedOption: target as HTMLIcCheckboxElement,\n    });\n  }\n\n  render() {\n    const {\n      disabled,\n      helperText,\n      hideLabel,\n      label,\n      name,\n      required,\n      size,\n      theme,\n      validationStatus,\n      validationText,\n    } = this;\n\n    const describedBy = getInputDescribedByText(\n      this.el,\n      name,\n      helperText !== \"\",\n      validationStatus !== \"\"\n    );\n\n    const renderSRText = validationStatus === \"error\" || required || hideLabel;\n\n    return (\n      <Host\n        class={{\n          \"ic-checkbox-group-disabled\": !!disabled,\n          [`ic-checkbox-group-${size}`]: true,\n          [`ic-theme-${theme}`]: theme !== \"inherit\",\n        }}\n      >\n        {renderSRText && (\n          <span\n            id=\"screenReaderOnlyText\"\n            class=\"screen-reader-only-text\"\n            aria-hidden=\"true\"\n          >\n            {label} {validationStatus === \"error\" ? \"invalid data \" : null}{\" \"}\n            {required ? \"required\" : null}\n          </span>\n        )}\n        <fieldset\n          id={name}\n          aria-labelledby={`${\n            renderSRText ? \"screenReaderOnlyText\" : \"\"\n          } ${describedBy}`.trim()}\n          disabled={disabled}\n        >\n          {!hideLabel && (\n            <legend>\n              <ic-input-label\n                class={{ [`${validationStatus}`]: true }}\n                label={label}\n                helperText={helperText}\n                required={required}\n                disabled={disabled}\n                useLabelTag={false}\n              >\n                <slot name=\"helper-text\" slot=\"helper-text\"></slot>\n              </ic-input-label>\n            </legend>\n          )}\n          <div class=\"checkboxes-container\">\n            <slot></slot>\n          </div>\n        </fieldset>\n        {hasValidationStatus(validationStatus, disabled) && (\n          <ic-input-validation\n            for={name}\n            ariaLiveMode=\"polite\"\n            status={validationStatus}\n            message={validationText}\n          ></ic-input-validation>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-d337cd8a.js');
-const helpers = require('./helpers-fc4016d2.js');
+const helpers = require('./helpers-8217daf4.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{padding-left:var(--ic-space-sm);color:var(--ic-checkbox-text);--ic-typography-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)}.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%}@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{color:var(--ic-checkbox-text);--ic-typography-color:var(--ic-checkbox-text)}.checkbox-label>label{padding-left:var(--ic-space-sm)}:host(.ic-checkbox-disabled) .checkbox-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%}@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 IcCheckboxStyle0 = icCheckboxCss;
 
 const Checkbox = class {
@@ -85,8 +85,9 @@ const Checkbox = class {
     }
     componentDidRender() {
         if (this.additionalFieldDisplay === "static") {
-            const textfieldElements = this.el.querySelectorAll("ic-text-field");
-            textfieldElements.forEach((textfield) => textfield.setAttribute("disabled", this.checked ? "false" : "true"));
+            this.el
+                .querySelectorAll("ic-text-field")
+                .forEach((textfield) => textfield.setAttribute("disabled", `${!this.checked}`));
         }
         else if (this.additionalFieldContainer) {
             this.additionalFieldContainer.style.display = !this.checked
@@ -111,17 +112,17 @@ const Checkbox = class {
         checked
             ? helpers.renderHiddenInput(el, value, name, disabled)
             : helpers.removeHiddenInput(el);
-        return (index.h(index.Host, { key: '4e59ebe231623d859cfda67200bc46a77a16e2a0', class: {
+        return (index.h(index.Host, { key: 'eda047a45e6d0dc558095d7d23b16422633fe633', class: {
                 "ic-checkbox-disabled": disabled,
                 [`ic-checkbox-${size}`]: !!size,
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            } }, index.h("div", { key: '846fa84372c3c5ef0e30428348bc400f8f9d5dd6', 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: '5873bccb9f38a7a1c1a6e4b256cc1380c866f899', role: "checkbox", class: {
+            } }, index.h("div", { key: '20623bca4b576eb2da3050ce19c99ad5288a6957', 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: '37fcfb382fc5aac6c9d07e9ce9e7929e21528c15', role: "checkbox", class: {
                 checkbox: true,
                 checked,
                 indeterminate: displayIndeterminate,
-            }, ref: (el) => (this.checkboxEl = el), type: "checkbox", name: name, id: id, value: value, disabled: disabled, checked: checked, indeterminate: displayIndeterminate, onClick: handleClick, form: form, "aria-label": hideLabel ? label : undefined }), !hideLabel && (index.h("ic-typography", { key: '5fc250523f1657dabc16280863cdff1d5fbe04bf', class: "checkbox-label", variant: "body" }, index.h("label", { key: '6521127be76536bb18268aaf5bd1f06ef65bb0b0', htmlFor: id }, label)))), helpers.isSlotUsed(el, "additional-field") && (index.h("div", { key: '3cf0dce0b43227f59990d6c4812cf3957f3ed519', class: "dynamic-container", ref: (el) => (this.additionalFieldContainer = el) }, isDynamicAdditionalField && index.h("div", { key: '371ee59d1e341ef533e14316d4bddea2f05daac4', class: "branch-corner" }), index.h("div", { key: 'da4b74e9f04ba113e150c42b36e8ae5f33daf6e0', class: "dynamic-field-container" }, isDynamicAdditionalField && (index.h("ic-typography", { key: '5258d47e88c8db9d617f66db38ac9bbde87e7dd3', variant: "caption" }, index.h("p", { key: '495ab440643663635f8b6af1599cebe325b58857', class: "dynamic-text", "aria-live": "polite" }, dynamicText))), index.h("div", { key: '4c19f7b3c0ad841042693d516f973c4e5881f71a', class: {
+            }, ref: (el) => (this.checkboxEl = el), type: "checkbox", name: name, id: id, value: value, disabled: disabled, checked: checked, indeterminate: displayIndeterminate, onClick: handleClick, form: form, "aria-label": hideLabel ? label : undefined }), !hideLabel && (index.h("ic-typography", { key: '0d8d605e8aa6dcb86362bb561a024a8c03a66854', class: "checkbox-label", variant: "body" }, index.h("label", { key: '3f2c395f32f47684475a7b6a1cefdb7d67c8beac', htmlFor: id }, label)))), helpers.isSlotUsed(el, "additional-field") && (index.h("div", { key: 'a6701087045999eb177a3a743770dad9aa47c79f', class: "dynamic-container", ref: (el) => (this.additionalFieldContainer = el) }, isDynamicAdditionalField && index.h("div", { key: '18719e04d6854a600f87fe777fd475b424204875', class: "branch-corner" }), index.h("div", { key: 'a73508e06dea3c65f731db0050ca365bd31998c9', class: "dynamic-field-container" }, isDynamicAdditionalField && (index.h("ic-typography", { key: 'd4f422ba5eb1815418871081efc8c5cd55821775', variant: "caption" }, index.h("p", { key: 'd43c97bdcd3b22acc1ef3664544ca9783606ea15', class: "dynamic-text", "aria-live": "polite" }, dynamicText))), index.h("div", { key: '66fb65fdd27f2db8550ef58c5601391c7b88357d', class: {
                 "additional-field-wrapper": !isDynamicAdditionalField,
-            } }, index.h("slot", { key: '7bbef0fdd54fc3aed87c13fadd65f8036257a57c', name: "additional-field" })))))));
+            } }, index.h("slot", { key: '02493cc3d3c3aae17cfb61bf1e7e12e9f41fabba', 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  padding-left: var(--ic-space-sm);\n  color: var(--ic-checkbox-text);\n\n  --ic-typography-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.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@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 */\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\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\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    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Checkbox\"\n    );\n  }\n\n  componentDidRender(): void {\n    if (this.additionalFieldDisplay === \"static\") {\n      const textfieldElements = this.el.querySelectorAll(\"ic-text-field\");\n      textfieldElements.forEach((textfield) =>\n        textfield.setAttribute(\"disabled\", this.checked ? \"false\" : \"true\")\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 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      groupLabel,\n      handleClick,\n      hideLabel,\n      label,\n      name,\n      size,\n      theme,\n      value,\n    } = this;\n\n    const id = `ic-checkbox-${label}-${groupLabel}`.replace(/ /g, \"-\");\n\n    const isDynamicAdditionalField = additionalFieldDisplay === \"dynamic\";\n\n    checked\n      ? renderHiddenInput(el, value, name, disabled)\n      : removeHiddenInput(el);\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={id}\n            value={value}\n            disabled={disabled}\n            checked={checked}\n            indeterminate={displayIndeterminate}\n            onClick={handleClick}\n            form={form}\n            aria-label={hideLabel ? label : undefined}\n          ></input>\n          {!hideLabel && (\n            <ic-typography class=\"checkbox-label\" variant=\"body\">\n              <label htmlFor={id}>{label}</label>\n            </ic-typography>\n          )}\n        </div>\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\" aria-live=\"polite\">\n                    {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  color: var(--ic-checkbox-text);\n\n  --ic-typography-color: var(--ic-checkbox-text);\n}\n\n.checkbox-label > label {\n  padding-left: var(--ic-space-sm);\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.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@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 */\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\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    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Checkbox\"\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 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      groupLabel,\n      handleClick,\n      hideLabel,\n      label,\n      name,\n      size,\n      theme,\n      value,\n    } = this;\n\n    const id = `ic-checkbox-${label}-${groupLabel}`.replace(/ /g, \"-\");\n\n    const isDynamicAdditionalField = additionalFieldDisplay === \"dynamic\";\n\n    checked\n      ? renderHiddenInput(el, value, name, disabled)\n      : removeHiddenInput(el);\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={id}\n            value={value}\n            disabled={disabled}\n            checked={checked}\n            indeterminate={displayIndeterminate}\n            onClick={handleClick}\n            form={form}\n            aria-label={hideLabel ? label : undefined}\n          ></input>\n          {!hideLabel && (\n            <ic-typography class=\"checkbox-label\" variant=\"body\">\n              <label htmlFor={id}>{label}</label>\n            </ic-typography>\n          )}\n        </div>\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\" aria-live=\"polite\">\n                    {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-chip.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-d337cd8a.js');
-const helpers = require('./helpers-fc4016d2.js');
+const helpers = require('./helpers-8217daf4.js');
 
 const dismissIcon = `<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M10 0C4.47 0 0 4.47 0 10C0 15.53 4.47 20 10 20C15.53 20 20 15.53 20 10C20 4.47 15.53 0 10 0ZM15 13.59L13.59 15L10 11.41L6.41 15L5 13.59L8.59 10L5 6.41L6.41 5L10 8.59L13.59 5L15 6.41L11.41 10L15 13.59Z" fill="currentColor"/>

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

@@ -24,10 +24,10 @@ const DataList = class {
         if (size === "small") {
             Array.from(el.children).forEach((child) => child.setAttribute("size", "small"));
         }
-        return (index.h(index.Host, { key: '57187729e8c442e305a364a8bb870af10d7c789a', class: {
+        return (index.h(index.Host, { key: 'a10decea9f6872dd3a86cb4e8d989f1628ddd8dd', class: {
                 "ic-data-list-small": size === "small",
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            } }, index.h("div", { key: 'd208727c390375a5c9a137793dc4e49870d1fc5c', class: "heading", id: "data-list-heading" }, index.h("slot", { key: 'cbaef30591b61e5cb08cd22defe9bfff47f442c3', name: "heading" }, index.h("ic-typography", { key: '4dcdac2796af8a867123a49df76acf2f056de9cb', variant: "h3" }, heading))), index.h("div", { key: '32168bcd286cdb0ed55fa824406e13dea9c97b03', class: "divider" }), index.h("ul", { key: 'e8e98e25dd09803f4771d48ac20956ea518c8a12', "aria-labelledby": "data-list-heading", class: "rows" }, index.h("slot", { key: '09dc75e0a80760d56e370ad0b52231f4143549e8' }))));
+            } }, index.h("div", { key: '5e818e459c2dd23b6e021d82012150757b7520e9', class: "heading", id: "data-list-heading" }, index.h("slot", { key: '2d68d50a52c8fc3882aa9138ce427c23ccdbc394', name: "heading" }, index.h("ic-typography", { key: '275d859a1075fd96294913acf1a3b2b9bb1777c2', variant: "h3" }, heading))), index.h("div", { key: '06e942c78939bf9526ef3bcebba1c76db3c3f608', class: "divider" }), index.h("ul", { key: '9e7218ee17444774d184680d27e3e11424953bfc', "aria-labelledby": "data-list-heading", class: "rows" }, index.h("slot", { key: 'a75aec759140988dc2d673385d7eef1fc0e7dba5' }))));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-d337cd8a.js');
-const helpers = require('./helpers-fc4016d2.js');
+const helpers = require('./helpers-8217daf4.js');
 
 const icDataRowCss = "/*! 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{position:relative;display:block}.data{display:flex;align-items:center}.text-cells{display:flex;flex-grow:1;min-width:0;--ic-typography-color:var(--ic-data-list-text-cell)}.label{width:12.5rem;min-width:12.5rem;margin-right:var(--ic-space-md);--ic-typography-color:var(--ic-data-list-text-label)}.value{flex-grow:1}slot[name=\"value\"]::slotted(ic-text-field[readonly][hide-label]){margin-top:calc(var(--ic-space-xs) * -1)}slot[name=\"value\"]::slotted(ic-text-field[small][readonly][hide-label]){margin-top:calc(var(--ic-space-xxs) * -1)}slot[name=\"value\"]::slotted(ic-text-field[readonly][hide-label][rows]){margin-top:calc(var(--ic-space-xxs) * -1 - var(--ic-space-xxxs))}.end-component{width:-moz-fit-content;width:fit-content;margin-left:3.5rem}.divider{margin-top:var(--ic-space-md);height:var(--ic-border-width);background-color:var(--ic-data-list-keyline-cell)}:host(.ic-data-row-small) .divider{margin-top:var(--ic-space-xs)}:host(.breakpoint-medium) .label{width:10rem;min-width:10rem}:host(.breakpoint-xs) .text-cells{flex-direction:column}:host(.breakpoint-xs) .label{width:8rem;margin-bottom:var(--ic-space-xs)}:host(.breakpoint-xs) .value{max-width:95%}:host(.breakpoint-xs) .end-component{margin-left:0}@media (forced-colors: active){.divider{background-color:canvastext}}";
 const IcDataRowStyle0 = icDataRowCss;
@@ -72,12 +72,12 @@ const DataRow = class {
     }
     render() {
         const { el, listSize, hasEndComponent, label, renderCellContent, size, theme, value, } = this;
-        return (index.h(index.Host, { key: '34f5970795bba243994fce6f2006d699c786cc51', class: {
+        return (index.h(index.Host, { key: '2faf353c648f521406dc1318be100192dece1aab', 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: 'f855811376a3e1db1d4a8bab563715d028c07341', class: "data" }, index.h("div", { key: '2395506f64696056aadfce34d46ffc99ab6db356', class: "text-cells" }, (helpers.isSlotUsed(el, "label") || label) && renderCellContent("label"), (helpers.isSlotUsed(el, "value") || value) && renderCellContent("value")), hasEndComponent && (index.h("div", { key: '87993084bf9673f61edc6f0c04c937f20cd5a10d', class: "end-component" }, index.h("slot", { key: 'f051b30c5f67e8ea324656391356699a5eeef818', name: "end-component" })))), index.h("div", { key: 'bf023260ea85682f165370fb1295bd6facf8c45e', class: "divider" })));
+            }, role: "listitem" }, index.h("div", { key: '3d8e82d44292400dc5cf92230967eb3c9cc57cd0', class: "data" }, index.h("div", { key: '1e1edf0e3cefbe7cf2bb7e6ab973e55eeab1c0e3', class: "text-cells" }, (helpers.isSlotUsed(el, "label") || label) && renderCellContent("label"), (helpers.isSlotUsed(el, "value") || value) && renderCellContent("value")), hasEndComponent && (index.h("div", { key: '0b60b67c17cce484293060ec5ba89619f527e5c9', class: "end-component" }, index.h("slot", { key: '403f6290fd00ef44fa02baaeed36932caf6f9902', name: "end-component" })))), index.h("div", { key: '653123df7e4243474aa5254d948b1666c9b50722', class: "divider" })));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-d337cd8a.js');
 const closeIcon = require('./close-icon-7f6ef8e4.js');
-const helpers = require('./helpers-fc4016d2.js');
+const helpers = require('./helpers-8217daf4.js');
 
 const icDialogCss = "/*! 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{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;min-height:100% !important;background:rgb(0 0 0 / 60%);z-index:var(--ic-z-index-dialog);opacity:0}:host(.ic-dialog-fade-in){opacity:1}:host(.disable-height-constraint){background:none;justify-content:unset;align-items:unset}.dialog.disable-height-constraint{max-height:none;position:relative}.dialog.disable-height-constraint .content-area{overflow-y:visible}@media (prefers-reduced-motion: no-preference){:host{transition:opacity var(--ic-easing-transition-slow)}.dialog{transform:translateY(-3rem);transition:transform 1000s}:host(.ic-dialog-fade-in) .dialog{transform:translateY(0);transition:transform var(--ic-easing-transition-slow)}}:host(.ic-dialog-hidden){display:none}.dialog{background-color:var(--ic-dialog-background);color:var(--ic-dialog-text-primary);--ic-typography-color:var(--ic-dialog-text-primary);border:var(--ic-space-1px) solid var(--ic-dialog-border);border-radius:var(--ic-border-radius);padding:var(--ic-space-xs) 0 var(--ic-space-md);display:flex;flex-direction:column;box-sizing:border-box;overflow-x:visible}.small{width:50%;max-width:25rem;min-height:11rem;max-height:70vh}.medium{width:70vw;max-width:44rem;min-height:12.5rem;max-height:70vh}.large{width:90vw;max-width:62.5rem;min-height:12.5rem;max-height:90vh}.heading-area{display:flex;margin-bottom:var(--ic-space-xs);padding:0 var(--ic-space-md)}.heading{overflow-wrap:break-word}.close-icon{margin-left:auto}.close-icon>svg{color:var(--ic-dialog-clear-button)}.content-area{padding:0 var(--ic-space-md);margin:0;overflow-y:auto}#dialog-content{margin-bottom:var(--ic-space-sm)}#dialog-content ::slotted(ic-typography){overflow-wrap:break-word}#dialog-content ::slotted(*){position:relative}.dialog-controls{margin-top:auto;padding:var(--ic-space-xs) var(--ic-space-md) 0;display:flex;justify-content:flex-end;gap:var(--ic-space-md)}.dialog-control-button{width:-moz-fit-content;width:fit-content}.backdrop{overflow-y:auto;position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgb(0 0 0 / 60%);z-index:var(--ic-z-index-dialog);padding-top:16px;padding-bottom:16px}.heading ic-typography{--ic-typography-color:var(--ic-dialog-text-primary)}.label ic-typography{--ic-typography-color:var(--ic-dialog-label)}@media (min-width: 800px){:host([size=\"large\"]) .dialog:not(.disable-width-constraint)>.content-area{width:75%}}@media (max-width: 576px){.dialog{width:100vw;height:100vh;max-width:none;max-height:none;box-sizing:border-box}.backdrop{padding:0}.dialog.disable-height-constraint{height:auto;min-height:100vh}}@media (max-width: 364px){.dialog-control-button{width:unset}}";
 const IcDialogStyle0 = icDialogCss;
@@ -203,7 +203,7 @@ const Dialog = class {
             return (isHidden ||
                 (element.getAttribute("type") === "radio" &&
                     !!radioEl &&
-                    !radioEl.hasAttribute("selected")));
+                    !(radioEl.hasAttribute("selected") || element.tabIndex === 0)));
         };
         this.focusElement = (element, shiftKey = false) => {
             let nextFocusEl = element;
@@ -341,7 +341,7 @@ const Dialog = class {
     }
     render() {
         const { dialogRendered, disableHeightConstraint, fadeIn, theme } = this;
-        return (index.h(index.Host, { key: '87a6c4970c26fdc12f1aed7bc3bd95b4e2f21810', class: {
+        return (index.h(index.Host, { key: 'f970a5b8d2c69eae29f0877f078a9a4c0ead56ba', class: {
                 "ic-dialog-hidden": !dialogRendered,
                 "ic-dialog-fade-in": fadeIn,
                 "disable-height-constraint": !!disableHeightConstraint,