@ukic/web-components 2.29.1 → 3.0.0-alpha.2

package/dist/cjs/ic-input-label_2.cjs.entry.js

@@ -3,40 +3,38 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-f982899d.js');
-const helpers = require('./helpers-94b33ab0.js');
-const types = require('./types-dc22e301.js');
+const helpers = require('./helpers-f1cf5156.js');
 
-const icInputLabelCss = "ic-input-label{margin-bottom:var(--ic-space-xs)}ic-input-label.with-helper{margin-bottom:var(--ic-space-xxxs)}ic-input-label.readonly{color:var(--ic-color-tertiary-text)}ic-input-label .helpertext{margin-top:var(--ic-space-xxxs)}ic-input-label .helpertext-normal{color:var(--ic-color-secondary-text)}ic-input-label .helpertext-readonly{color:var(--ic-color-tertiary-text)}ic-input-label .readonly-label{color:var(--ic-color-secondary-text)}ic-input-label .error-label{color:var(--ic-status-error)}ic-input-label .dark{color:var(--ic-architectural-white)}";
+const icInputLabelCss = "ic-input-label{margin-bottom:var(--ic-space-xs)}ic-input-label.with-helper{margin-bottom:var(--ic-space-xxxs)}ic-input-label.ic-input-label-readonly{--ic-typography-color:var(--ic-color-text-tertiary)}ic-input-label .helpertext{margin-top:var(--ic-space-xxxs)}ic-input-label .helpertext-normal{--ic-typography-color:var(--ic-color-text-secondary)}ic-input-label .helpertext-readonly{--ic-typography-color:var(--ic-color-text-tertiary)}ic-input-label .readonly-label{--ic-typography-color:var(--ic-color-text-secondary)}ic-input-label .error-label{--ic-typography-color:var(--ic-status-error-default)}ic-input-label .dark{--ic-typography-color:var(--ic-architectural-white)}";
 
 const InputLabel = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.appearance = "default";
-        this.dark = false;
         this.disabled = false;
-        this.error = false;
         this.for = undefined;
         this.helperText = "";
         this.label = undefined;
         this.readonly = false;
         this.required = false;
+        this.status = "";
     }
     componentDidLoad() {
         helpers.onComponentRequiredPropUndefined([{ prop: this.label, propName: "label" }], "Input Label");
     }
     render() {
-        const { disabled, readonly, label, required, helperText, error, dark, appearance, } = this;
+        const { disabled, readonly, label, required, helperText, status, appearance, } = this;
         const labelText = required ? label + " *" : label;
         const labelContent = readonly ? (`${labelText}`) : (index.h("label", { htmlFor: this.for }, labelText));
         const id = helpers.getInputHelperTextID(this.for);
         return (index.h(index.Host, { class: {
-                ["disabled"]: disabled,
-                ["readonly"]: readonly,
+                ["ic-input-label-disabled"]: disabled,
+                ["ic-input-label-readonly"]: readonly,
                 ["with-helper"]: helperText !== "",
             } }, index.h("ic-typography", { variant: "label", class: {
                 ["readonly-label"]: readonly,
-                ["error-label"]: error && !(readonly || disabled),
-                ["dark"]: dark || appearance === "dark",
+                ["error-label"]: status === "error" && !(readonly || disabled),
+                ["dark"]: appearance === "dark",
             } }, labelContent), helperText !== "" && (index.h("ic-typography", { variant: "caption", class: {
                 ["helpertext"]: true,
                 ["helpertext-normal"]: !disabled && !readonly,
@@ -46,12 +44,12 @@ const InputLabel = class {
 };
 InputLabel.style = icInputLabelCss;
 
-const icInputValidationCss = "ic-input-validation{width:var(--input-width, 20rem);margin-top:var(--ic-space-xs);display:flex}ic-input-validation.fullwidth{width:100%}ic-input-validation span.status-icon{padding-right:var(--ic-space-xxs)}ic-input-validation span.status-icon>svg{height:1.25rem;width:1.25rem}ic-input-validation span.icon-success>svg{fill:var(--ic-status-success)}ic-input-validation span.icon-error>svg{fill:var(--ic-status-error)}ic-input-validation span.icon-warning>svg{fill:var(--ic-status-warning)}ic-input-validation .statustext{flex-grow:1}";
+const icInputValidationCss = "ic-input-validation{width:var(--input-width, 20rem);margin-top:var(--ic-space-xs);display:flex}ic-input-validation.ic-input-validation-full-width{width:100%}ic-input-validation span.status-icon{padding-right:var(--ic-space-xxs)}ic-input-validation span.status-icon>svg{height:1.25rem;width:1.25rem}ic-input-validation span.icon-success>svg{fill:var(--ic-status-success-default)}ic-input-validation span.icon-error>svg{fill:var(--ic-status-error-default)}ic-input-validation span.icon-warning>svg{fill:var(--ic-status-warning-default)}ic-input-validation .statustext{flex-grow:1}";
 
 const icon = {
-    [types.IcInformationStatus.Warning]: helpers.warningIcon,
-    [types.IcInformationStatus.Error]: helpers.errorIcon,
-    [types.IcInformationStatus.Success]: helpers.successIcon,
+    [helpers.IcInformationStatus.Warning]: helpers.warningIcon,
+    [helpers.IcInformationStatus.Error]: helpers.errorIcon,
+    [helpers.IcInformationStatus.Success]: helpers.successIcon,
 };
 const InputValidation = class {
     constructor(hostRef) {
@@ -69,8 +67,8 @@ const InputValidation = class {
         const displayIcon = this.status !== "" ? icon[this.status] : "";
         const id = helpers.getInputValidationTextID(this.for);
         return (index.h(index.Host, { class: {
-                [this.status]: this.status !== "",
-                ["fullwidth"]: this.fullWidth,
+                [`ic-input-validation-${this.status}`]: this.status !== "",
+                ["ic-input-validation-full-width"]: this.fullWidth,
             } }, displayIcon !== "" && (index.h("span", { class: {
                 ["status-icon"]: true,
                 [`icon-${this.status}`]: true,

package/dist/cjs/ic-input-label_2.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"ic-input-label.ic-input-validation.entry.cjs.js","mappings":"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","names":["onComponentRequiredPropUndefined","h","getInputHelperTextID","Host","IcInformationStatus","warningIcon","errorIcon","successIcon","getInputValidationTextID"],"sources":["src/components/ic-input-label/ic-input-label.css?tag=ic-input-label","src/components/ic-input-label/ic-input-label.tsx","src/components/ic-input-validation/ic-input-validation.css?tag=ic-input-validation","src/components/ic-input-validation/ic-input-validation.tsx"],"sourcesContent":["ic-input-label {\n  margin-bottom: var(--ic-space-xs);\n}\n\nic-input-label.with-helper {\n  margin-bottom: var(--ic-space-xxxs);\n}\n\nic-input-label.readonly {\n  color: var(--ic-color-tertiary-text);\n}\n\nic-input-label .helpertext {\n  margin-top: var(--ic-space-xxxs);\n}\n\nic-input-label .helpertext-normal {\n  color: var(--ic-color-secondary-text);\n}\n\nic-input-label .helpertext-readonly {\n  color: var(--ic-color-tertiary-text);\n}\n\nic-input-label .readonly-label {\n  color: var(--ic-color-secondary-text);\n}\n\nic-input-label .error-label {\n  color: var(--ic-status-error);\n}\n\nic-input-label .dark {\n  color: var(--ic-architectural-white);\n}\n\n/* Add back in after storybook has the `color-scheme: light dark` code */\n\n/* @media (prefers-color-scheme: dark) and (not (forced-colors: active)) {\n  ic-input-label,\n  ic-input-label .helpertext-normal,\n  ic-input-label .readonly-label,\n  ic-input-label .helpertext-readonly {\n    color: var(--ic-architectural-white);\n  }\n} */\n","import { Component, Host, Prop, h } from \"@stencil/core\";\n\nimport {\n  getInputHelperTextID,\n  onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\n\n@Component({\n  tag: \"ic-input-label\",\n  styleUrl: \"./ic-input-label.css\",\n})\nexport class InputLabel {\n  /**\n   * The appearance of the input label.\n   */\n  @Prop() appearance?: \"dark\" | \"default\" = \"default\";\n\n  /**\n   * @deprecated This prop should not be used anymore. Set prop `appearance` to \"dark\" instead.\n   */\n  @Prop() dark?: boolean = false;\n\n  /**\n   * If `true`, the disabled state will be set.\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * If `true`, the input label will display with error styling.\n   */\n  @Prop() error?: boolean = false;\n\n  /**\n   * The ID of the form element the label is bound to.\n   */\n  @Prop() for: string;\n\n  /**\n   * The helper text that will be displayed.\n   */\n  @Prop() helperText: string = \"\";\n\n  /**\n   * The text content of the label.\n   */\n  @Prop() label!: string;\n\n  /**\n   * If `true`, the readonly state will be set.\n   */\n  @Prop() readonly: boolean = false;\n\n  /**\n   * If `true`, the input label will require a value.\n   */\n  @Prop() required: boolean = false;\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Input Label\"\n    );\n  }\n\n  render() {\n    const {\n      disabled,\n      readonly,\n      label,\n      required,\n      helperText,\n      error,\n      dark,\n      appearance,\n    } = this;\n    const labelText = required ? label + \" *\" : label;\n    const labelContent = readonly ? (\n      `${labelText}`\n    ) : (\n      <label htmlFor={this.for}>{labelText}</label>\n    );\n\n    const id = getInputHelperTextID(this.for);\n\n    return (\n      <Host\n        class={{\n          [\"disabled\"]: disabled,\n          [\"readonly\"]: readonly,\n          [\"with-helper\"]: helperText !== \"\",\n        }}\n      >\n        <ic-typography\n          variant=\"label\"\n          class={{\n            [\"readonly-label\"]: readonly,\n            [\"error-label\"]: error && !(readonly || disabled),\n            [\"dark\"]: dark || appearance === \"dark\",\n          }}\n        >\n          {labelContent}\n        </ic-typography>\n\n        {helperText !== \"\" && (\n          <ic-typography\n            variant=\"caption\"\n            class={{\n              [\"helpertext\"]: true,\n              [\"helpertext-normal\"]: !disabled && !readonly,\n              [\"helpertext-readonly\"]: readonly,\n            }}\n          >\n            <span id={id}>{helperText}</span>\n          </ic-typography>\n        )}\n      </Host>\n    );\n  }\n}\n","ic-input-validation {\n  width: var(--input-width, 20rem);\n  margin-top: var(--ic-space-xs);\n  display: flex;\n}\n\nic-input-validation.fullwidth {\n  width: 100%;\n}\n\nic-input-validation span.status-icon {\n  padding-right: var(--ic-space-xxs);\n}\n\nic-input-validation span.status-icon > svg {\n  height: 1.25rem;\n  width: 1.25rem;\n}\n\nic-input-validation span.icon-success > svg {\n  fill: var(--ic-status-success);\n}\n\nic-input-validation span.icon-error > svg {\n  fill: var(--ic-status-error);\n}\n\nic-input-validation span.icon-warning > svg {\n  fill: var(--ic-status-warning);\n}\n\nic-input-validation .statustext {\n  flex-grow: 1;\n}\n","import { Element, Component, Host, Prop, h } from \"@stencil/core\";\n\nimport {\n  IcInformationStatus,\n  IcInformationStatusOrEmpty,\n} from \"../../utils/types\";\nimport errorIcon from \"../../assets/error-icon.svg\";\nimport successIcon from \"../../assets/success-icon.svg\";\nimport warningIcon from \"../../assets/warning-icon.svg\";\n\nimport {\n  getInputValidationTextID,\n  onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\nimport { IcAriaLiveModeVariants } from \"./ic-input-validation.types\";\n\nconst icon = {\n  [IcInformationStatus.Warning]: warningIcon,\n  [IcInformationStatus.Error]: errorIcon,\n  [IcInformationStatus.Success]: successIcon,\n};\n\n/**\n * @slot validation-message-adornment - Content will be placed to the right of the validation message.\n */\n@Component({\n  tag: \"ic-input-validation\",\n  styleUrl: \"ic-input-validation.css\",\n})\nexport class InputValidation {\n  @Element() el: HTMLIcInputValidationElement;\n\n  /**\n   *  The ARIA live mode to apply to the message.\n   */\n  @Prop() ariaLiveMode: IcAriaLiveModeVariants = \"polite\";\n\n  /**\n   * The ID of the form element the validation is bound to.\n   */\n  @Prop() for: string;\n\n  /**\n   *  If `true`, the input validation will fill the width of the container.\n   */\n  @Prop() fullWidth: boolean = false;\n\n  /**\n   * The validation message to display.\n   */\n  @Prop() message!: string;\n\n  /**\n   * The status of the validation - e.g. 'error' | 'warning' | 'success'.\n   */\n  @Prop() status: IcInformationStatusOrEmpty = \"\";\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.message, propName: \"message\" }],\n      \"Input Validation\"\n    );\n  }\n\n  render() {\n    const displayIcon = this.status !== \"\" ? icon[this.status] : \"\";\n    const id = getInputValidationTextID(this.for);\n    return (\n      <Host\n        class={{\n          [this.status]: this.status !== \"\",\n          [\"fullwidth\"]: this.fullWidth,\n        }}\n      >\n        {displayIcon !== \"\" && (\n          <span\n            class={{\n              [\"status-icon\"]: true,\n              [`icon-${this.status}`]: true,\n            }}\n            innerHTML={displayIcon}\n          />\n        )}\n\n        <ic-typography variant=\"caption\" class=\"statustext\">\n          <span aria-live={this.ariaLiveMode} id={id}>\n            {this.message}\n          </span>\n        </ic-typography>\n\n        <slot name=\"validation-message-adornment\"></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ic-input-label.ic-input-validation.entry.cjs.js","mappings":"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","names":["onComponentRequiredPropUndefined","h","getInputHelperTextID","Host","IcInformationStatus","warningIcon","errorIcon","successIcon","getInputValidationTextID"],"sources":["src/components/ic-input-label/ic-input-label.css?tag=ic-input-label","src/components/ic-input-label/ic-input-label.tsx","src/components/ic-input-validation/ic-input-validation.css?tag=ic-input-validation","src/components/ic-input-validation/ic-input-validation.tsx"],"sourcesContent":["ic-input-label {\n  margin-bottom: var(--ic-space-xs);\n}\n\nic-input-label.with-helper {\n  margin-bottom: var(--ic-space-xxxs);\n}\n\nic-input-label.ic-input-label-readonly {\n  --ic-typography-color: var(--ic-color-text-tertiary);\n}\n\nic-input-label .helpertext {\n  margin-top: var(--ic-space-xxxs);\n}\n\nic-input-label .helpertext-normal {\n  --ic-typography-color: var(--ic-color-text-secondary);\n}\n\nic-input-label .helpertext-readonly {\n  --ic-typography-color: var(--ic-color-text-tertiary);\n}\n\nic-input-label .readonly-label {\n  --ic-typography-color: var(--ic-color-text-secondary);\n}\n\nic-input-label .error-label {\n  --ic-typography-color: var(--ic-status-error-default);\n}\n\nic-input-label .dark {\n  --ic-typography-color: var(--ic-architectural-white);\n}\n\n/* Add back in after storybook has the `color-scheme: light dark` code */\n\n/* @media (prefers-color-scheme: dark) and (not (forced-colors: active)) {\n  ic-input-label,\n  ic-input-label .helpertext-normal,\n  ic-input-label .readonly-label,\n  ic-input-label .helpertext-readonly {\n    color: var(--ic-architectural-white);\n  }\n} */\n","import { Component, Host, Prop, h } from \"@stencil/core\";\n\nimport {\n  getInputHelperTextID,\n  onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\n\n@Component({\n  tag: \"ic-input-label\",\n  styleUrl: \"./ic-input-label.css\",\n})\nexport class InputLabel {\n  /**\n   * The appearance of the input label.\n   */\n  @Prop() appearance?: \"dark\" | \"default\" = \"default\";\n\n  /**\n   * If `true`, the disabled state will be set.\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * The ID of the form element the label is bound to.\n   */\n  @Prop() for: string;\n\n  /**\n   * The helper text that will be displayed.\n   */\n  @Prop() helperText: string = \"\";\n\n  /**\n   * The text content of the label.\n   */\n  @Prop() label!: string;\n\n  /**\n   * If `true`, the readonly state will be set.\n   */\n  @Prop() readonly: boolean = false;\n\n  /**\n   * If `true`, the input label will require a value.\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * The status of the label - e.g. 'error'.\n   */\n  @Prop() status: \"error\" | \"\" = \"\";\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Input Label\"\n    );\n  }\n\n  render() {\n    const {\n      disabled,\n      readonly,\n      label,\n      required,\n      helperText,\n      status,\n      appearance,\n    } = this;\n    const labelText = required ? label + \" *\" : label;\n    const labelContent = readonly ? (\n      `${labelText}`\n    ) : (\n      <label htmlFor={this.for}>{labelText}</label>\n    );\n\n    const id = getInputHelperTextID(this.for);\n\n    return (\n      <Host\n        class={{\n          [\"ic-input-label-disabled\"]: disabled,\n          [\"ic-input-label-readonly\"]: readonly,\n          [\"with-helper\"]: helperText !== \"\",\n        }}\n      >\n        <ic-typography\n          variant=\"label\"\n          class={{\n            [\"readonly-label\"]: readonly,\n            [\"error-label\"]: status === \"error\" && !(readonly || disabled),\n            [\"dark\"]: appearance === \"dark\",\n          }}\n        >\n          {labelContent}\n        </ic-typography>\n\n        {helperText !== \"\" && (\n          <ic-typography\n            variant=\"caption\"\n            class={{\n              [\"helpertext\"]: true,\n              [\"helpertext-normal\"]: !disabled && !readonly,\n              [\"helpertext-readonly\"]: readonly,\n            }}\n          >\n            <span id={id}>{helperText}</span>\n          </ic-typography>\n        )}\n      </Host>\n    );\n  }\n}\n","ic-input-validation {\n  width: var(--input-width, 20rem);\n  margin-top: var(--ic-space-xs);\n  display: flex;\n}\n\nic-input-validation.ic-input-validation-full-width {\n  width: 100%;\n}\n\nic-input-validation span.status-icon {\n  padding-right: var(--ic-space-xxs);\n}\n\nic-input-validation span.status-icon > svg {\n  height: 1.25rem;\n  width: 1.25rem;\n}\n\nic-input-validation span.icon-success > svg {\n  fill: var(--ic-status-success-default);\n}\n\nic-input-validation span.icon-error > svg {\n  fill: var(--ic-status-error-default);\n}\n\nic-input-validation span.icon-warning > svg {\n  fill: var(--ic-status-warning-default);\n}\n\nic-input-validation .statustext {\n  flex-grow: 1;\n}\n","import { Element, Component, Host, Prop, h } from \"@stencil/core\";\n\nimport {\n  IcInformationStatus,\n  IcInformationStatusOrEmpty,\n} from \"../../utils/types\";\nimport errorIcon from \"../../assets/error-icon.svg\";\nimport successIcon from \"../../assets/success-icon.svg\";\nimport warningIcon from \"../../assets/warning-icon.svg\";\n\nimport {\n  getInputValidationTextID,\n  onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\nimport { IcAriaLiveModeVariants } from \"./ic-input-validation.types\";\n\nconst icon = {\n  [IcInformationStatus.Warning]: warningIcon,\n  [IcInformationStatus.Error]: errorIcon,\n  [IcInformationStatus.Success]: successIcon,\n};\n\n/**\n * @slot validation-message-adornment - Content will be placed to the right of the validation message.\n */\n@Component({\n  tag: \"ic-input-validation\",\n  styleUrl: \"ic-input-validation.css\",\n})\nexport class InputValidation {\n  @Element() el: HTMLIcInputValidationElement;\n\n  /**\n   *  The ARIA live mode to apply to the message.\n   */\n  @Prop() ariaLiveMode: IcAriaLiveModeVariants = \"polite\";\n\n  /**\n   * The ID of the form element the validation is bound to.\n   */\n  @Prop() for: string;\n\n  /**\n   *  If `true`, the input validation will fill the width of the container.\n   */\n  @Prop() fullWidth: boolean = false;\n\n  /**\n   * The validation message to display.\n   */\n  @Prop() message!: string;\n\n  /**\n   * The status of the validation - e.g. 'error' | 'warning' | 'success'.\n   */\n  @Prop() status: IcInformationStatusOrEmpty = \"\";\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.message, propName: \"message\" }],\n      \"Input Validation\"\n    );\n  }\n\n  render() {\n    const displayIcon = this.status !== \"\" ? icon[this.status] : \"\";\n    const id = getInputValidationTextID(this.for);\n    return (\n      <Host\n        class={{\n          [`ic-input-validation-${this.status}`]: this.status !== \"\",\n          [\"ic-input-validation-full-width\"]: this.fullWidth,\n        }}\n      >\n        {displayIcon !== \"\" && (\n          <span\n            class={{\n              [\"status-icon\"]: true,\n              [`icon-${this.status}`]: true,\n            }}\n            innerHTML={displayIcon}\n          />\n        )}\n\n        <ic-typography variant=\"caption\" class=\"statustext\">\n          <span aria-live={this.ariaLiveMode} id={id}>\n            {this.message}\n          </span>\n        </ic-typography>\n\n        <slot name=\"validation-message-adornment\"></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -4,10 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-f982899d.js');
 const OpenInNew = require('./OpenInNew-d5d30e77.js');
-const helpers = require('./helpers-94b33ab0.js');
-const types = require('./types-dc22e301.js');
+const helpers = require('./helpers-f1cf5156.js');
 
-const icLinkCss = "/*! 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(.link) .ic-link,:host(.link) ::slotted(a){color:var(--ic-hyperlink);text-decoration:underline;font-weight:var(--ic-font-weight-bold);transition:var(--ic-easing-transition-fast)}:host(.link.dark) .ic-link.dark,:host(.link.dark) ::slotted(a){color:var(--ic-color-primary-text)}:host(.link.light) .ic-link.light,:host(.link.light) ::slotted(a){color:var(--ic-color-white-text)}:host(.link) .ic-link:visited,:host(.link) ::slotted(a:visited){color:var(--ic-hyperlink-visited)}:host(.link) .ic-link:hover,:host(.link) .ic-link:focus,:host(.link) ::slotted(a:hover),:host(.link) ::slotted(a:focus){outline:none;border-bottom:0.25rem solid !important;margin-bottom:-0.25rem !important;text-decoration:none}@supports (text-underline-offset: 10%){:host(.link) .ic-link:hover,:host(.link) .ic-link:focus,:host(.link) ::slotted(a:hover),:host(.link) ::slotted(a:focus){text-decoration-line:underline;text-decoration-thickness:25%;text-underline-offset:10%;border-bottom:0 !important;margin-bottom:0 !important}}:host(.link) .ic-link:active,:host(.link) .ic-link:focus:active,:host(.link) .ic-link:visited:active,:host(.link) ::slotted(a:active),:host(.link) ::slotted(a:focus:active),:host(.link) ::slotted(a:visited:active){text-decoration:none}.ic-link-open-in-new-icon{vertical-align:middle;margin-left:var(--ic-space-xxs)}.ic-link>.ic-link-open-in-new-icon{fill:var(--ic-hyperlink)}.ic-link.dark>.ic-link-open-in-new-icon{fill:var(--ic-color-primary-text)}.ic-link.light>.ic-link-open-in-new-icon{fill:var(--ic-color-white-text)}.ic-link-open-in-new-icon>svg{width:var(--ic-space-md);height:var(--ic-space-md);fill:currentcolor}.ic-link:visited>.ic-link-open-in-new-icon{fill:var(--ic-hyperlink-visited)}.ic-link.light:visited>.ic-link-open-in-new-icon{fill:var(--ic-hyperlink-contrast-visited)}:host(.breadcrumb-link) .ic-link{display:var(--breadcrumb-link-display);align-items:var(--breadcrumb-link-align-items);gap:var(--breadcrumb-link-gap)}:host(.breadcrumb-link) .ic-link ::slotted(.back-icon){height:var(--ic-space-lg);width:var(--ic-space-lg)}:host(.breadcrumb-link.current-page) a,:host(.breadcrumb-link.current-page) ::slotted(a){font-weight:normal;color:inherit;text-decoration:none;display:flex;align-items:center}:host(.breadcrumb-link.current-page) .ic-link,:host(.breadcrumb-link.current-page) ::slotted(a:focus){outline:var(--ic-hc-focus-outline);text-decoration:none}:host(.breadcrumb-link.current-page) .ic-link:visited{color:var(--ic-color-primary-text)}";
+const icLinkCss = "/*! 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-link) .link,:host(.ic-link) ::slotted(a){color:var(--ic-link-text);text-decoration:underline;font-weight:var(--ic-font-weight-bold);transition:var(--ic-easing-transition-fast)}:host(.ic-link) .link:visited,:host(.ic-link) ::slotted(a:visited),:host(.ic-link) .link:visited:hover,:host(.ic-link) ::slotted(a:visited:hover),:host(.ic-link) .link:visited:active,:host(.ic-link) ::slotted(a:visited:active),:host(.ic-link) .link:visited:focus,:host(.ic-link) ::slotted(a:visited:focus){color:var(--ic-link-text-visited)}:host(.ic-link) .link:hover{color:var(--ic-link-text-hover)}:host(.ic-link) .link:active{color:var(--ic-link-text-pressed)}:host(.ic-link) .link:focus{color:var(--ic-link-text-focused)}:host(.ic-link-monochrome) .link:hover{color:var(--ic-link-text-hover-monochrome)}:host(.ic-link-monochrome) .link:active{color:var(--ic-link-text-pressed-monochrome)}:host(.ic-link-monochrome) .link:focus{color:var(--ic-link-text-focused-monochrome)}:host(.ic-link) .link:hover,:host(.ic-link) .link:focus,:host(.ic-link) ::slotted(a:hover),:host(.ic-link) ::slotted(a:focus){outline:none;border-bottom:0.25rem solid !important;margin-bottom:-0.25rem !important;text-decoration:none}@supports (text-underline-offset: 10%){:host(.ic-link) .link:hover,:host(.ic-link) .link:focus,:host(.ic-link) ::slotted(a:hover),:host(.ic-link) ::slotted(a:focus){text-decoration-line:underline;text-decoration-thickness:25%;text-underline-offset:10%;border-bottom:0 !important;margin-bottom:0 !important}}:host(.ic-link) .link:active,:host(.ic-link) .link:focus:active,:host(.ic-link) .link:visited:active,:host(.ic-link) ::slotted(a:active),:host(.ic-link) ::slotted(a:focus:active),:host(.ic-link) ::slotted(a:visited:active){text-decoration:none}.ic-link-open-in-new-icon{vertical-align:middle;margin-left:var(--ic-space-xxs)}.link>.ic-link-open-in-new-icon{fill:var(--ic-link-icon-launch)}.ic-link-open-in-new-icon>svg{width:var(--ic-space-md);height:var(--ic-space-md);fill:currentcolor}.link:visited>.ic-link-open-in-new-icon{fill:var(--ic-link-icon-launch-visited)}:host(.ic-link-monochrome) .link,:host(.ic-link-monochrome) ::slotted(a){color:var(--ic-link-text-monochrome)}:host(.ic-link-monochrome) .link:visited,:host(.ic-link-monochrome) ::slotted(a:visited),:host(.ic-link-monochrome) .link:visited:hover,:host(.ic-link-monochrome) ::slotted(a:visited:hover),:host(.ic-link-monochrome) .link:visited:active,:host(.ic-link-monochrome) ::slotted(a:visited:active),:host(.ic-link-monochrome) .link:visited:focus,:host(.ic-link-monochrome) ::slotted(a:visited:focus){color:var(--ic-link-text-visited-monochrome)}:host(.ic-link-monochrome) .link>.ic-link-open-in-new-icon{fill:var(--ic-link-icon-launch-monochrome)}:host(.ic-link-monochrome) .link:visited>.ic-link-open-in-new-icon{fill:var(--ic-link-icon-launch-visited-monochrome)}:host(.breadcrumb-link) .link{display:var(--breadcrumb-link-display);align-items:var(--breadcrumb-link-align-items);gap:var(--breadcrumb-link-gap)}:host(.breadcrumb-link) .link{color:var(--ic-breadcrumb-page-title)}:host(.ic-link-monochrome.breadcrumb-link) .link{color:var(--ic-breadcrumb-page-title-monochrome)}:host(.breadcrumb-link) .link:hover{color:var(--ic-breadcrumb-page-title-hover)}:host(.ic-link-monochrome.breadcrumb-link) .link:hover{color:var(--ic-breadcrumb-page-title-hover-monochrome)}:host(.breadcrumb-link) .link:active{color:var(--ic-breadcrumb-page-title-pressed)}:host(.ic-link-monochrome.breadcrumb-link) .link:active{color:var(--ic-breadcrumb-page-title-pressed-monochrome)}:host(.breadcrumb-link) .link ::slotted(.back-icon){height:var(--ic-space-lg);width:var(--ic-space-lg)}:host(.breadcrumb-link.current-page) a,:host(.breadcrumb-link.current-page) ::slotted(a){font-weight:normal;color:inherit;text-decoration:none;display:flex;align-items:center}:host(.breadcrumb-link.current-page) .link,:host(.breadcrumb-link.current-page) ::slotted(a:focus){outline:var(--ic-hc-focus-outline);text-decoration:none}:host(.breadcrumb-link.current-page) .link:visited{color:var(--ic-color-text-primary)}";
 
 const Link = class {
     constructor(hostRef) {
@@ -28,18 +27,19 @@ const Link = class {
                 index.forceUpdate(this);
             }
         };
-        this.appearance = "default";
         this.download = false;
         this.href = null;
         this.hreflang = undefined;
+        this.monochrome = false;
         this.referrerpolicy = undefined;
         this.rel = undefined;
-        this.showIcon = undefined;
         this.target = undefined;
+        this.theme = "inherit";
     }
     componentWillLoad() {
         this.inheritedAttributes = helpers.inheritAttributes(this.el, helpers.IC_INHERITED_ARIA);
         this.updateTheme();
+        this.el.setAttribute("exportparts", "link");
     }
     componentDidLoad() {
         this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);
@@ -63,8 +63,14 @@ const Link = class {
     }
     updateTheme(newTheme = null) {
         const theme = helpers.getThemeFromContext(this.el, newTheme);
-        if (theme !== types.IcThemeForegroundEnum.Default) {
-            this.appearance = theme;
+        if (theme !== helpers.IcThemeForegroundEnum.Default) {
+            this.monochrome = true;
+            if (theme === helpers.IcThemeForegroundEnum.Light) {
+                this.theme = "dark";
+            }
+            else {
+                this.theme = "light";
+            }
         }
     }
     hasRouterSlot() {
@@ -75,11 +81,14 @@ const Link = class {
         return !!this.routerSlot;
     }
     render() {
-        const { download, href, hreflang, referrerpolicy, rel, target, showIcon, appearance, } = this;
-        return (index.h(index.Host, { class: { ["link"]: true, [`${appearance}`]: true } }, this.hasRouterSlot() ? (index.h("slot", { name: "router-item" })) : (index.h("a", Object.assign({ class: {
-                ["ic-link"]: href !== null,
-                [`${appearance}`]: href !== null,
-            }, download: download !== false ? download : null, href: href, hrefLang: hreflang, referrerPolicy: referrerpolicy, rel: rel, target: target, tabindex: href !== null ? "0" : "-1" }, this.inheritedAttributes), index.h("slot", null), (showIcon || target === "_blank") && (index.h("span", { class: "ic-link-open-in-new-icon", innerHTML: OpenInNew.OpenInNew }))))));
+        const { download, href, hreflang, referrerpolicy, rel, target, monochrome, theme, } = this;
+        return (index.h(index.Host, { class: {
+                ["ic-link"]: true,
+                [`ic-theme-${theme}`]: theme !== "inherit",
+                ["ic-link-monochrome"]: monochrome,
+            } }, this.hasRouterSlot() ? (index.h("slot", { name: "router-item" })) : (index.h("a", Object.assign({ class: {
+                ["link"]: href !== null,
+            }, download: download !== false ? download : null, href: href, hrefLang: hreflang, referrerPolicy: referrerpolicy, rel: rel, target: target, tabindex: href !== null ? "0" : "-1" }, this.inheritedAttributes, { part: "link" }), index.h("slot", null), target === "_blank" && (index.h("span", { class: "ic-link-open-in-new-icon", innerHTML: OpenInNew.OpenInNew }))))));
     }
     static get delegatesFocus() { return true; }
     get el() { return index.getElement(this); }

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

@@ -1 +1 @@
-{"file":"ic-link.entry.cjs.js","mappings":"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","names":["IC_INHERITED_ARIA","forceUpdate","inheritAttributes","getThemeFromContext","IcThemeForegroundEnum","h","Host","OpenInNew"],"sources":["src/components/ic-link/ic-link.css?tag=ic-link&encapsulation=shadow","src/components/ic-link/ic-link.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host(.link) .ic-link,\n:host(.link) ::slotted(a) {\n  color: var(--ic-hyperlink);\n  text-decoration: underline;\n  font-weight: var(--ic-font-weight-bold);\n  transition: var(--ic-easing-transition-fast);\n}\n\n:host(.link.dark) .ic-link.dark,\n:host(.link.dark) ::slotted(a) {\n  color: var(--ic-color-primary-text);\n}\n\n:host(.link.light) .ic-link.light,\n:host(.link.light) ::slotted(a) {\n  color: var(--ic-color-white-text);\n}\n\n:host(.link) .ic-link:visited,\n:host(.link) ::slotted(a:visited) {\n  color: var(--ic-hyperlink-visited);\n}\n\n:host(.link) .ic-link:hover,\n:host(.link) .ic-link:focus,\n:host(.link) ::slotted(a:hover),\n:host(.link) ::slotted(a:focus) {\n  outline: none;\n  border-bottom: 0.25rem solid !important;\n  margin-bottom: -0.25rem !important;\n  text-decoration: none;\n}\n\n@supports (text-underline-offset: 10%) {\n  :host(.link) .ic-link:hover,\n  :host(.link) .ic-link:focus,\n  :host(.link) ::slotted(a:hover),\n  :host(.link) ::slotted(a:focus) {\n    text-decoration-line: underline;\n    text-decoration-thickness: 25%;\n    text-underline-offset: 10%;\n    border-bottom: 0 !important;\n    margin-bottom: 0 !important;\n  }\n}\n\n:host(.link) .ic-link:active,\n:host(.link) .ic-link:focus:active,\n:host(.link) .ic-link:visited:active,\n:host(.link) ::slotted(a:active),\n:host(.link) ::slotted(a:focus:active),\n:host(.link) ::slotted(a:visited:active) {\n  text-decoration: none;\n}\n\n.ic-link-open-in-new-icon {\n  vertical-align: middle;\n  margin-left: var(--ic-space-xxs);\n}\n\n.ic-link > .ic-link-open-in-new-icon {\n  fill: var(--ic-hyperlink);\n}\n\n.ic-link.dark > .ic-link-open-in-new-icon {\n  fill: var(--ic-color-primary-text);\n}\n\n.ic-link.light > .ic-link-open-in-new-icon {\n  fill: var(--ic-color-white-text);\n}\n\n.ic-link-open-in-new-icon > svg {\n  width: var(--ic-space-md);\n  height: var(--ic-space-md);\n  fill: currentcolor;\n}\n\n.ic-link:visited > .ic-link-open-in-new-icon {\n  fill: var(--ic-hyperlink-visited);\n}\n\n.ic-link.light:visited > .ic-link-open-in-new-icon {\n  fill: var(--ic-hyperlink-contrast-visited);\n}\n\n:host(.breadcrumb-link) .ic-link {\n  display: var(--breadcrumb-link-display);\n  align-items: var(--breadcrumb-link-align-items);\n  gap: var(--breadcrumb-link-gap);\n}\n\n:host(.breadcrumb-link) .ic-link ::slotted(.back-icon) {\n  height: var(--ic-space-lg);\n  width: var(--ic-space-lg);\n}\n\n:host(.breadcrumb-link.current-page) a,\n:host(.breadcrumb-link.current-page) ::slotted(a) {\n  font-weight: normal;\n  color: inherit;\n  text-decoration: none;\n  display: flex;\n  align-items: center;\n}\n\n:host(.breadcrumb-link.current-page) .ic-link,\n:host(.breadcrumb-link.current-page) ::slotted(a:focus) {\n  outline: var(--ic-hc-focus-outline);\n  text-decoration: none;\n}\n\n:host(.breadcrumb-link.current-page) .ic-link:visited {\n  color: var(--ic-color-primary-text);\n}\n","import {\n  Component,\n  Element,\n  Prop,\n  h,\n  Host,\n  Listen,\n  Method,\n  forceUpdate,\n} from \"@stencil/core\";\n\nimport OpenInNew from \"../../assets/OpenInNew.svg\";\nimport { getThemeFromContext, inheritAttributes } from \"../../utils/helpers\";\nimport { IC_INHERITED_ARIA } from \"../../utils/constants\";\nimport {\n  IcTheme,\n  IcThemeForeground,\n  IcThemeForegroundEnum,\n} from \"../../utils/types\";\n\n/**\n * @slot router-item - Handle routing by nesting your routes in this slot.\n */\n\n@Component({\n  tag: \"ic-link\",\n  styleUrl: \"ic-link.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class Link {\n  private inheritedAttributes: { [k: string]: string } = {};\n  private routerSlot: HTMLElement;\n  private hostMutationObserver: MutationObserver = null;\n\n  @Element() el: HTMLIcLinkElement;\n\n  /**\n   * The appearance of the link, e.g. dark, light, or default.\n   */\n  @Prop({ mutable: true }) appearance?: IcThemeForeground = \"default\";\n\n  /**\n   * If `true`, the user can save the linked URL instead of navigating to it.\n   */\n  @Prop() download?: string | boolean = false;\n\n  /**\n   * The URL that the link points to.\n   */\n  @Prop() href?: string = null;\n\n  /**\n   * The human language of the linked URL.\n   */\n  @Prop() hreflang?: string;\n\n  /**\n   * How much of the referrer to send when following the link.\n   */\n  @Prop() referrerpolicy?: ReferrerPolicy;\n\n  /**\n   * The relationship of the linked URL as space-separated link types.\n   */\n  @Prop() rel?: string;\n\n  /**\n   * @deprecated This prop should not be used anymore. The 'open in new tab/window' icon will display automatically if target=\"_blank\".\n   */\n  @Prop() showIcon?: boolean;\n\n  /**\n   * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n   */\n  @Prop() target?: string;\n\n  componentWillLoad(): void {\n    this.inheritedAttributes = inheritAttributes(this.el, IC_INHERITED_ARIA);\n    this.updateTheme();\n  }\n\n  componentDidLoad(): void {\n    this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);\n    this.hostMutationObserver.observe(this.el, {\n      attributes: true,\n    });\n  }\n\n  disconnectedCallback(): void {\n    this.hostMutationObserver?.disconnect();\n  }\n\n  @Listen(\"themeChange\", { target: \"document\" })\n  themeChangeHandler({ detail }: CustomEvent<IcTheme>): void {\n    this.updateTheme(detail.mode);\n  }\n\n  /**\n   * Sets focus on the link.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    this.el.shadowRoot.querySelector(\"a\")?.focus();\n  }\n\n  private updateTheme(newTheme: IcThemeForeground = null): void {\n    const theme = getThemeFromContext(this.el, newTheme);\n\n    if (theme !== IcThemeForegroundEnum.Default) {\n      this.appearance = theme;\n    }\n  }\n\n  private hasRouterSlot(): boolean {\n    this.routerSlot = this.el.querySelector('[slot=\"router-item\"]');\n    if (this.routerSlot) {\n      this.routerSlot.ariaLabel = this.routerSlot.textContent;\n    }\n    return !!this.routerSlot;\n  }\n\n  // triggered when attributes of host element change\n  private hostMutationCallback = (mutationList: MutationRecord[]): void => {\n    let forceComponentUpdate = false;\n    mutationList.forEach(({ attributeName }) => {\n      if (IC_INHERITED_ARIA.includes(attributeName)) {\n        this.inheritedAttributes[attributeName] =\n          this.el.getAttribute(attributeName);\n        forceComponentUpdate = true;\n      }\n    });\n    if (forceComponentUpdate) {\n      forceUpdate(this);\n    }\n  };\n\n  render() {\n    const {\n      download,\n      href,\n      hreflang,\n      referrerpolicy,\n      rel,\n      target,\n      showIcon,\n      appearance,\n    } = this;\n\n    return (\n      <Host class={{ [\"link\"]: true, [`${appearance}`]: true }}>\n        {this.hasRouterSlot() ? (\n          <slot name=\"router-item\"></slot>\n        ) : (\n          <a\n            class={{\n              [\"ic-link\"]: href !== null,\n              [`${appearance}`]: href !== null,\n            }}\n            download={download !== false ? download : null}\n            href={href}\n            hrefLang={hreflang}\n            referrerPolicy={referrerpolicy}\n            rel={rel}\n            target={target}\n            tabindex={href !== null ? \"0\" : \"-1\"}\n            {...this.inheritedAttributes}\n          >\n            <slot />\n            {(showIcon || target === \"_blank\") && (\n              <span class=\"ic-link-open-in-new-icon\" innerHTML={OpenInNew} />\n            )}\n          </a>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ic-link.entry.cjs.js","mappings":"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","names":["IC_INHERITED_ARIA","forceUpdate","inheritAttributes","getThemeFromContext","IcThemeForegroundEnum","h","Host","OpenInNew"],"sources":["src/components/ic-link/ic-link.css?tag=ic-link&encapsulation=shadow","src/components/ic-link/ic-link.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host(.ic-link) .link,\n:host(.ic-link) ::slotted(a) {\n  color: var(--ic-link-text);\n  text-decoration: underline;\n  font-weight: var(--ic-font-weight-bold);\n  transition: var(--ic-easing-transition-fast);\n}\n\n:host(.ic-link) .link:visited,\n:host(.ic-link) ::slotted(a:visited),\n:host(.ic-link) .link:visited:hover,\n:host(.ic-link) ::slotted(a:visited:hover),\n:host(.ic-link) .link:visited:active,\n:host(.ic-link) ::slotted(a:visited:active),\n:host(.ic-link) .link:visited:focus,\n:host(.ic-link) ::slotted(a:visited:focus) {\n  color: var(--ic-link-text-visited);\n}\n\n:host(.ic-link) .link:hover {\n  color: var(--ic-link-text-hover);\n}\n\n:host(.ic-link) .link:active {\n  color: var(--ic-link-text-pressed);\n}\n\n:host(.ic-link) .link:focus {\n  color: var(--ic-link-text-focused);\n}\n\n:host(.ic-link-monochrome) .link:hover {\n  color: var(--ic-link-text-hover-monochrome);\n}\n\n:host(.ic-link-monochrome) .link:active {\n  color: var(--ic-link-text-pressed-monochrome);\n}\n\n:host(.ic-link-monochrome) .link:focus {\n  color: var(--ic-link-text-focused-monochrome);\n}\n\n:host(.ic-link) .link:hover,\n:host(.ic-link) .link:focus,\n:host(.ic-link) ::slotted(a:hover),\n:host(.ic-link) ::slotted(a:focus) {\n  outline: none;\n  border-bottom: 0.25rem solid !important;\n  margin-bottom: -0.25rem !important;\n  text-decoration: none;\n}\n\n@supports (text-underline-offset: 10%) {\n  :host(.ic-link) .link:hover,\n  :host(.ic-link) .link:focus,\n  :host(.ic-link) ::slotted(a:hover),\n  :host(.ic-link) ::slotted(a:focus) {\n    text-decoration-line: underline;\n    text-decoration-thickness: 25%;\n    text-underline-offset: 10%;\n    border-bottom: 0 !important;\n    margin-bottom: 0 !important;\n  }\n}\n\n:host(.ic-link) .link:active,\n:host(.ic-link) .link:focus:active,\n:host(.ic-link) .link:visited:active,\n:host(.ic-link) ::slotted(a:active),\n:host(.ic-link) ::slotted(a:focus:active),\n:host(.ic-link) ::slotted(a:visited:active) {\n  text-decoration: none;\n}\n\n.ic-link-open-in-new-icon {\n  vertical-align: middle;\n  margin-left: var(--ic-space-xxs);\n}\n\n.link > .ic-link-open-in-new-icon {\n  fill: var(--ic-link-icon-launch);\n}\n\n.ic-link-open-in-new-icon > svg {\n  width: var(--ic-space-md);\n  height: var(--ic-space-md);\n  fill: currentcolor;\n}\n\n.link:visited > .ic-link-open-in-new-icon {\n  fill: var(--ic-link-icon-launch-visited);\n}\n\n:host(.ic-link-monochrome) .link,\n:host(.ic-link-monochrome) ::slotted(a) {\n  color: var(--ic-link-text-monochrome);\n}\n\n:host(.ic-link-monochrome) .link:visited,\n:host(.ic-link-monochrome) ::slotted(a:visited),\n:host(.ic-link-monochrome) .link:visited:hover,\n:host(.ic-link-monochrome) ::slotted(a:visited:hover),\n:host(.ic-link-monochrome) .link:visited:active,\n:host(.ic-link-monochrome) ::slotted(a:visited:active),\n:host(.ic-link-monochrome) .link:visited:focus,\n:host(.ic-link-monochrome) ::slotted(a:visited:focus) {\n  color: var(--ic-link-text-visited-monochrome);\n}\n\n:host(.ic-link-monochrome) .link > .ic-link-open-in-new-icon {\n  fill: var(--ic-link-icon-launch-monochrome);\n}\n\n:host(.ic-link-monochrome) .link:visited > .ic-link-open-in-new-icon {\n  fill: var(--ic-link-icon-launch-visited-monochrome);\n}\n\n:host(.breadcrumb-link) .link {\n  display: var(--breadcrumb-link-display);\n  align-items: var(--breadcrumb-link-align-items);\n  gap: var(--breadcrumb-link-gap);\n}\n\n:host(.breadcrumb-link) .link {\n  color: var(--ic-breadcrumb-page-title);\n}\n\n:host(.ic-link-monochrome.breadcrumb-link) .link {\n  color: var(--ic-breadcrumb-page-title-monochrome);\n}\n\n:host(.breadcrumb-link) .link:hover {\n  color: var(--ic-breadcrumb-page-title-hover);\n}\n\n:host(.ic-link-monochrome.breadcrumb-link) .link:hover {\n  color: var(--ic-breadcrumb-page-title-hover-monochrome);\n}\n\n:host(.breadcrumb-link) .link:active {\n  color: var(--ic-breadcrumb-page-title-pressed);\n}\n\n:host(.ic-link-monochrome.breadcrumb-link) .link:active {\n  color: var(--ic-breadcrumb-page-title-pressed-monochrome);\n}\n\n:host(.breadcrumb-link) .link ::slotted(.back-icon) {\n  height: var(--ic-space-lg);\n  width: var(--ic-space-lg);\n}\n\n:host(.breadcrumb-link.current-page) a,\n:host(.breadcrumb-link.current-page) ::slotted(a) {\n  font-weight: normal;\n  color: inherit;\n  text-decoration: none;\n  display: flex;\n  align-items: center;\n}\n\n:host(.breadcrumb-link.current-page) .link,\n:host(.breadcrumb-link.current-page) ::slotted(a:focus) {\n  outline: var(--ic-hc-focus-outline);\n  text-decoration: none;\n}\n\n:host(.breadcrumb-link.current-page) .link:visited {\n  color: var(--ic-color-text-primary);\n}\n","import {\n  Component,\n  Element,\n  Prop,\n  h,\n  Host,\n  Listen,\n  Method,\n  forceUpdate,\n} from \"@stencil/core\";\n\nimport OpenInNew from \"../../assets/OpenInNew.svg\";\nimport { getThemeFromContext, inheritAttributes } from \"../../utils/helpers\";\nimport { IC_INHERITED_ARIA } from \"../../utils/constants\";\nimport {\n  IcTheme,\n  IcThemeForeground,\n  IcThemeForegroundEnum,\n  IcThemeMode,\n} from \"../../utils/types\";\n\n/**\n * @slot router-item - Handle routing by nesting your routes in this slot.\n */\n\n@Component({\n  tag: \"ic-link\",\n  styleUrl: \"ic-link.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class Link {\n  private inheritedAttributes: { [k: string]: string } = {};\n  private routerSlot: HTMLElement;\n  private hostMutationObserver: MutationObserver = null;\n\n  @Element() el: HTMLIcLinkElement;\n\n  /**\n   * If `true`, the user can save the linked URL instead of navigating to it.\n   */\n  @Prop() download?: string | boolean = false;\n\n  /**\n   * The URL that the link points to.\n   */\n  @Prop() href?: string = null;\n\n  /**\n   * The human language of the linked URL.\n   */\n  @Prop() hreflang?: string;\n\n  /**\n   * If `true`, the link will display as black in the light theme, and white in the dark theme.\n   */\n  @Prop() monochrome?: boolean = false;\n\n  /**\n   * How much of the referrer to send when following the link.\n   */\n  @Prop() referrerpolicy?: ReferrerPolicy;\n\n  /**\n   * The relationship of the linked URL as space-separated link types.\n   */\n  @Prop() rel?: string;\n\n  /**\n   * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n   */\n  @Prop() target?: string;\n\n  /**\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  componentWillLoad(): void {\n    this.inheritedAttributes = inheritAttributes(this.el, IC_INHERITED_ARIA);\n    this.updateTheme();\n    this.el.setAttribute(\"exportparts\", \"link\");\n  }\n\n  componentDidLoad(): void {\n    this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);\n    this.hostMutationObserver.observe(this.el, {\n      attributes: true,\n    });\n  }\n\n  disconnectedCallback(): void {\n    this.hostMutationObserver?.disconnect();\n  }\n\n  @Listen(\"themeChange\", { target: \"document\" })\n  themeChangeHandler({ detail }: CustomEvent<IcTheme>): void {\n    this.updateTheme(detail.mode);\n  }\n\n  /**\n   * Sets focus on the link.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    this.el.shadowRoot.querySelector(\"a\")?.focus();\n  }\n\n  private updateTheme(newTheme: IcThemeForeground = null): void {\n    const theme = getThemeFromContext(this.el, newTheme);\n\n    if (theme !== IcThemeForegroundEnum.Default) {\n      this.monochrome = true;\n      if (theme === IcThemeForegroundEnum.Light) {\n        this.theme = \"dark\";\n      } else {\n        this.theme = \"light\";\n      }\n    }\n  }\n\n  private hasRouterSlot(): boolean {\n    this.routerSlot = this.el.querySelector('[slot=\"router-item\"]');\n    if (this.routerSlot) {\n      this.routerSlot.ariaLabel = this.routerSlot.textContent;\n    }\n    return !!this.routerSlot;\n  }\n\n  // triggered when attributes of host element change\n  private hostMutationCallback = (mutationList: MutationRecord[]): void => {\n    let forceComponentUpdate = false;\n    mutationList.forEach(({ attributeName }) => {\n      if (IC_INHERITED_ARIA.includes(attributeName)) {\n        this.inheritedAttributes[attributeName] =\n          this.el.getAttribute(attributeName);\n        forceComponentUpdate = true;\n      }\n    });\n    if (forceComponentUpdate) {\n      forceUpdate(this);\n    }\n  };\n\n  render() {\n    const {\n      download,\n      href,\n      hreflang,\n      referrerpolicy,\n      rel,\n      target,\n      monochrome,\n      theme,\n    } = this;\n\n    return (\n      <Host\n        class={{\n          [\"ic-link\"]: true,\n          [`ic-theme-${theme}`]: theme !== \"inherit\",\n          [\"ic-link-monochrome\"]: monochrome,\n        }}\n      >\n        {this.hasRouterSlot() ? (\n          <slot name=\"router-item\"></slot>\n        ) : (\n          <a\n            class={{\n              [\"link\"]: href !== null,\n            }}\n            download={download !== false ? download : null}\n            href={href}\n            hrefLang={hreflang}\n            referrerPolicy={referrerpolicy}\n            rel={rel}\n            target={target}\n            tabindex={href !== null ? \"0\" : \"-1\"}\n            {...this.inheritedAttributes}\n            part=\"link\"\n          >\n            <slot />\n            {target === \"_blank\" && (\n              <span class=\"ic-link-open-in-new-icon\" innerHTML={OpenInNew} />\n            )}\n          </a>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -3,10 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-f982899d.js');
-const helpers = require('./helpers-94b33ab0.js');
-require('./types-dc22e301.js');
+const helpers = require('./helpers-f1cf5156.js');
 
-const icMenuGroupCss = "/*! 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:flex;flex-direction:column}ic-typography{color:var(--ic-color-tertiary-text);margin:var(--ic-space-xs) var(--ic-space-xs) 0}ul{list-style-type:none;margin:0;padding:0}hr{display:flex;align-self:stretch;border:calc(var(--ic-space-xxxs) / 2) solid var(--ic-architectural-300);margin:var(--ic-space-xxs) 0 calc(var(--ic-space-sm) / 4)}";
+const icMenuGroupCss = "/*! 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:flex;flex-direction:column}ic-typography{--ic-typography-color:var(--ic-color-text-tertiary);margin:var(--ic-space-xs) var(--ic-space-xs) 0}ul{list-style-type:none;margin:0;padding:0}hr{display:flex;align-self:stretch;border:calc(var(--ic-space-xxxs) / 2) solid var(--ic-architectural-300);margin:var(--ic-space-xxs) 0 calc(var(--ic-space-sm) / 4)}";
 
 const MenuGroup = class {
     constructor(hostRef) {

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

@@ -1 +1 @@
-{"file":"ic-menu-group.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,cAAc,GAAG,2tFAA2tF;;MCQruF,SAAS;;;;;IAOpB,MAAM;QACJ,MAAM,UAAU,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;QAEtD,QACEA,QAACC,UAAI,kBAAa,IAAI,CAAC,KAAK,KAAK,IAAI,GAAG,IAAI,CAAC,KAAK,GAAG,EAAE,IACpDC,qBAAa,CAAC,IAAI,CAAC,KAAK,CAAC,KACxBF,2BAAe,OAAO,EAAC,gBAAgB,IAAE,IAAI,CAAC,KAAK,CAAiB,CACrE,EACDA,gBAAI,IAAI,EAAC,OAAO,IACdA,qBAAa,CACV,EAEJ,IAAI,CAAC,EAAE,MAAK,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,aAAa,CAAC,0BAA0B,CAAC,CAAA,KAChEA,mBAAM,CACP,CACI,EACP;KACH;;;;;;;","names":["h","Host","isPropDefined"],"sources":["src/components/ic-menu-group/ic-menu-group.css?tag=ic-menu-group&encapsulation=shadow","src/components/ic-menu-group/ic-menu-group.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n  display: flex;\n  flex-direction: column;\n}\n\nic-typography {\n  color: var(--ic-color-tertiary-text);\n  margin: var(--ic-space-xs) var(--ic-space-xs) 0;\n}\n\nul {\n  list-style-type: none;\n  margin: 0;\n  padding: 0;\n}\n\nhr {\n  display: flex;\n  align-self: stretch;\n  border: calc(var(--ic-space-xxxs) / 2) solid var(--ic-architectural-300);\n  margin: var(--ic-space-xxs) 0 calc(var(--ic-space-sm) / 4);\n}\n","import { Component, Element, Host, h, Prop } from \"@stencil/core\";\nimport { isPropDefined } from \"../../utils/helpers\";\n\n@Component({\n  tag: \"ic-menu-group\",\n  styleUrl: \"ic-menu-group.css\",\n  shadow: true,\n})\nexport class MenuGroup {\n  @Element() el: HTMLIcMenuGroupElement;\n  /**\n   * The label to display as the title of the menu group.\n   */\n  @Prop() label?: string;\n\n  render() {\n    const parentMenu = this.el.closest(\"ic-popover-menu\");\n\n    return (\n      <Host aria-label={this.label !== null ? this.label : \"\"}>\n        {isPropDefined(this.label) && (\n          <ic-typography variant=\"subtitle-small\">{this.label}</ic-typography>\n        )}\n        <ul role=\"group\">\n          <slot></slot>\n        </ul>\n        {/* The line under the menu group is added on all menu groups except in the case that the menu group is the last item in the popover menu */}\n        {this.el !== parentMenu?.querySelector(\"ic-menu-group:last-child\") && (\n          <hr />\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ic-menu-group.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,cAAc,GAAG,2uFAA2uF;;MCQrvF,SAAS;;;;;IAOpB,MAAM;QACJ,MAAM,UAAU,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;QAEtD,QACEA,QAACC,UAAI,kBAAa,IAAI,CAAC,KAAK,KAAK,IAAI,GAAG,IAAI,CAAC,KAAK,GAAG,EAAE,IACpDC,qBAAa,CAAC,IAAI,CAAC,KAAK,CAAC,KACxBF,2BAAe,OAAO,EAAC,gBAAgB,IAAE,IAAI,CAAC,KAAK,CAAiB,CACrE,EACDA,gBAAI,IAAI,EAAC,OAAO,IACdA,qBAAa,CACV,EAEJ,IAAI,CAAC,EAAE,MAAK,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,aAAa,CAAC,0BAA0B,CAAC,CAAA,KAChEA,mBAAM,CACP,CACI,EACP;KACH;;;;;;;","names":["h","Host","isPropDefined"],"sources":["src/components/ic-menu-group/ic-menu-group.css?tag=ic-menu-group&encapsulation=shadow","src/components/ic-menu-group/ic-menu-group.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n  display: flex;\n  flex-direction: column;\n}\n\nic-typography {\n  --ic-typography-color: var(--ic-color-text-tertiary);\n\n  margin: var(--ic-space-xs) var(--ic-space-xs) 0;\n}\n\nul {\n  list-style-type: none;\n  margin: 0;\n  padding: 0;\n}\n\nhr {\n  display: flex;\n  align-self: stretch;\n  border: calc(var(--ic-space-xxxs) / 2) solid var(--ic-architectural-300);\n  margin: var(--ic-space-xxs) 0 calc(var(--ic-space-sm) / 4);\n}\n","import { Component, Element, Host, h, Prop } from \"@stencil/core\";\nimport { isPropDefined } from \"../../utils/helpers\";\n\n@Component({\n  tag: \"ic-menu-group\",\n  styleUrl: \"ic-menu-group.css\",\n  shadow: true,\n})\nexport class MenuGroup {\n  @Element() el: HTMLIcMenuGroupElement;\n  /**\n   * The label to display as the title of the menu group.\n   */\n  @Prop() label?: string;\n\n  render() {\n    const parentMenu = this.el.closest(\"ic-popover-menu\");\n\n    return (\n      <Host aria-label={this.label !== null ? this.label : \"\"}>\n        {isPropDefined(this.label) && (\n          <ic-typography variant=\"subtitle-small\">{this.label}</ic-typography>\n        )}\n        <ul role=\"group\">\n          <slot></slot>\n        </ul>\n        {/* The line under the menu group is added on all menu groups except in the case that the menu group is the last item in the popover menu */}\n        {this.el !== parentMenu?.querySelector(\"ic-menu-group:last-child\") && (\n          <hr />\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/ic-menu-item.cjs.entry.js

@@ -3,12 +3,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-f982899d.js');
-const helpers = require('./helpers-94b33ab0.js');
+const helpers = require('./helpers-f1cf5156.js');
 const checkIcon = require('./check-icon-7225d79b.js');
 const chevronIcon = require('./chevron-icon-3bf07531.js');
-require('./types-dc22e301.js');
 
-const icMenuItemCss = "/*! 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}li{list-style:none;padding:0}:host ::part(button){color:var(--ic-color-primary-text);padding:calc(var(--ic-space-xxxs) / 2);display:flex;align-items:flex-start;gap:var(--ic-space-xs);border-radius:0;min-height:2.5rem;height:auto}.focus-border{display:flex;align-items:flex-start;gap:var(--ic-space-xs);border-radius:var(--ic-border-radius);margin:calc(var(--ic-space-xxxs) / 2);padding:var(--ic-space-xxs);border:var(--ic-space-xxxs) dashed transparent;--icon-height:auto}:host(.disabled) ::part(button){color:var(--ic-architectural-200) !important;pointer-events:none}:host(.disabled) .menu-item-label,:host(.disabled) .shortcut,:host(.disabled) .menu-item-description{color:var(--ic-architectural-200) !important}:host([variant=\"destructive\"]) ::part(button){color:var(--ic-action-destructive)}:host ::part(button):hover{background-color:var(--ic-action-dark-bg-hover)}:host ::part(button):focus-visible,:host ::part(button):focus{color:var(--ic-color-white-text);background-color:var(--ic-focus-blue);box-shadow:none}:host(.disabled) ::part(button):focus-visible,:host(.disabled) ::part(button):focus{color:var(--ic-theme-lighten-40) !important}:host([variant=\"destructive\"]) ::part(button):focus-visible,:host([variant=\"destructive\"]) ::part(button):focus{background-color:var(--ic-action-destructive)}ic-button:focus-within .menu-item-label,ic-button:focus-within .shortcut,ic-button:focus-within .menu-item-description{color:var(--ic-color-white-text)}:host(.disabled) ic-button:focus-within .focus-border{border-color:var(--ic-architectural-white)}:host(.disabled) ic-button:focus-within .menu-item-label,:host(.disabled) ic-button:focus-within .shortcut,:host(.disabled) ic-button:focus-within .menu-item-description{color:var(--ic-theme-lighten-40) !important}:host ::part(button):active{background-color:var(--ic-action-dark-bg-active);color:var(--ic-color-primary-text) !important}:host([variant=\"destructive\"]) ::part(button):active{background-color:var(--ic-action-dark-bg-active);color:var(--ic-action-destructive) !important}.menu-item-info{display:flex;flex-direction:column;flex:1;align-items:baseline;white-space:pre-line;text-align:left}.menu-labels{display:flex;align-items:baseline;gap:var(--ic-space-xs)}.menu-item-description{color:var(--ic-color-secondary-text)}.shortcut{color:var(--ic-color-tertiary-text);display:flex;flex:min-content}:host([variant=\"destructive\"]) .menu-item-label{text-transform:uppercase;font-weight:600;letter-spacing:0.025em}ic-button:active .menu-item-label{color:var(--ic-color-primary-text)}ic-button:active .menu-item-description{color:var(--ic-color-secondary-text)}ic-button:active .shortcut{color:var(--ic-color-tertiary-text)}:host([variant=\"destructive\"]) ic-button:active .menu-item-label{color:var(--ic-action-destructive) !important}.icon,.check-icon,.submenu-icon,.icon ::slotted(svg),.check-icon svg,.submenu-icon svg{width:var(--ic-space-lg);height:var(--ic-space-lg)}.check-icon.hide{visibility:hidden}@media (forced-colors: active){:host ::part(button){border:canvas}:host ::part(button):focus-visible{outline:var(--ic-space-xxxs) solid transparent}.focus-border{border-color:canvas}:host(.disabled) ic-button:focus-within .focus-border{border-color:GrayText}:host(.disabled) .menu-item-info,:host(.disabled) .menu-item-label,:host(.disabled) .shortcut,:host(.disabled) .menu-item-description,:host(.disabled) ic-button:focus-within .menu-item-info,:host(.disabled) ic-button:focus-within .menu-item-label,:host(.disabled) ic-button:focus-within .shortcut,:host(.disabled) ic-button:focus-within .menu-item-description{color:GrayText !important}:host(.disabled) ::part(button):focus-visible,:host(.disabled) ::part(button):focus{outline-color:GrayText !important}}";
+const icMenuItemCss = "/*! 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}li{list-style:none;padding:0}:host ::part(button){color:var(--ic-color-text-primary);padding:calc(var(--ic-space-xxxs) / 2);display:flex;align-items:flex-start;gap:var(--ic-space-xs);border-radius:0;min-height:2.5rem;height:auto}.focus-border{display:flex;align-items:flex-start;gap:var(--ic-space-xs);border-radius:var(--ic-border-radius);margin:calc(var(--ic-space-xxxs) / 2);padding:var(--ic-space-xxs);border:var(--ic-space-xxxs) dashed transparent;--icon-height:auto}:host(.ic-menu-item-disabled) ::part(button){color:var(--ic-architectural-200) !important;--ic-typography-color:var(--ic-architectural-200) !important;pointer-events:none}:host(.ic-menu-item-disabled) .menu-item-label,:host(.ic-menu-item-disabled) .shortcut,:host(.ic-menu-item-disabled) .menu-item-description{--ic-typography-color:var(--ic-architectural-200) !important}:host([variant=\"destructive\"]) ::part(button){color:var(--ic-action-destructive);--ic-typography-color:var(--ic-action-destructive)}:host ::part(button):hover{background-color:var(--ic-action-dark-bg-hover)}:host ::part(button):focus-visible,:host ::part(button):focus{color:var(--ic-color-white-text);--ic-typography-color:var(--ic-color-white-text);background-color:var(--ic-color-focus-inner);box-shadow:none}:host(.ic-menu-item-disabled) ::part(button):focus-visible,:host(.ic-menu-item-disabled) ::part(button):focus{color:var(--ic-theme-lighten-40) !important;--ic-typography-color:var(--ic-theme-lighten-40) !important}:host([variant=\"destructive\"]) ::part(button):focus-visible,:host([variant=\"destructive\"]) ::part(button):focus{background-color:var(--ic-action-destructive)}ic-button:focus-within .menu-item-label,ic-button:focus-within .shortcut,ic-button:focus-within .menu-item-description{--ic-typography-color:var(--ic-color-white-text)}:host(.ic-menu-item-disabled) ic-button:focus-within .focus-border{border-color:var(--ic-architectural-white)}:host(.ic-menu-item-disabled) ic-button:focus-within .menu-item-label,:host(.ic-menu-item-disabled) ic-button:focus-within .shortcut,:host(.ic-menu-item-disabled) ic-button:focus-within .menu-item-description{--ic-typography-color:var(--ic-theme-lighten-40) !important}:host ::part(button):active{background-color:var(--ic-action-dark-bg-pressed);color:var(--ic-color-text-primary) !important;--ic-typography-color:var(--ic-color-text-primary) !important}:host([variant=\"destructive\"]) ::part(button):active{background-color:var(--ic-action-dark-bg-pressed);color:var(--ic-action-destructive) !important;--ic-typography-color:var(--ic-action-destructive) !important}.menu-item-info{display:flex;flex-direction:column;flex:1;align-items:baseline;white-space:pre-line;text-align:left}.menu-labels{display:flex;align-items:baseline;gap:var(--ic-space-xs)}.menu-item-description{--ic-typography-color:var(--ic-color-text-secondary)}.shortcut{--ic-typography-color:var(--ic-color-text-tertiary);display:flex;flex:min-content}:host([variant=\"destructive\"]) .menu-item-label{text-transform:uppercase;font-weight:600;letter-spacing:0.025em}ic-button:active .menu-item-label{--ic-typography-color:var(--ic-color-text-primary)}ic-button:active .menu-item-description{--ic-typography-color:var(--ic-color-text-secondary)}ic-button:active .shortcut{--ic-typography-color:var(--ic-color-text-tertiary)}:host([variant=\"destructive\"]) ic-button:active .menu-item-label{--ic-typography-color:var(--ic-action-destructive) !important}.icon,.check-icon,.submenu-icon,.icon ::slotted(svg),.check-icon svg,.submenu-icon svg{width:var(--ic-space-lg);height:var(--ic-space-lg)}.check-icon.hide{visibility:hidden}@media (forced-colors: active){:host ::part(button){border:canvas}:host ::part(button):focus-visible{outline:var(--ic-space-xxxs) solid transparent}.focus-border{border-color:canvas}:host(.ic-menu-item-disabled) ic-button:focus-within .focus-border{border-color:GrayText}:host(.ic-menu-item-disabled) .menu-item-info,:host(.ic-menu-item-disabled) .menu-item-label,:host(.ic-menu-item-disabled) .shortcut,:host(.ic-menu-item-disabled) .menu-item-description,:host(.ic-menu-item-disabled) ic-button:focus-within .menu-item-info,:host(.ic-menu-item-disabled) ic-button:focus-within .menu-item-label,:host(.ic-menu-item-disabled) ic-button:focus-within .shortcut,:host(.ic-menu-item-disabled) ic-button:focus-within .menu-item-description{--ic-typography-color:GrayText !important}:host(.ic-menu-item-disabled) ::part(button):focus-visible,:host(.ic-menu-item-disabled) ::part(button):focus{outline-color:GrayText !important}}";
 
 const MenuItem = class {
     constructor(hostRef) {
@@ -89,7 +88,7 @@ const MenuItem = class {
             return (index.h("div", { class: "menu-item-info" }, index.h("div", { class: "menu-labels" }, index.h("ic-typography", { class: "menu-item-label" }, this.label), this.keyboardShortcut && (index.h("ic-typography", { variant: "caption", class: "shortcut" }, this.keyboardShortcut))), this.description && (index.h("ic-typography", { class: "menu-item-description", variant: "caption" }, this.description))));
         };
         return (index.h(index.Host, { class: {
-                ["disabled"]: this.disabled,
+                ["ic-menu-item-disabled"]: this.disabled,
             } }, index.h("li", { role: this.variant === "toggle" ? "menuitemcheckbox" : "menuitem", "aria-disabled": `${this.disabled}`, "aria-checked": this.variant === "toggle" ? this.toggleChecked : undefined }, index.h("ic-button", { fullWidth: true, variant: "tertiary", onClick: this.handleClick, href: helpers.isPropDefined(this.href), hreflang: helpers.isPropDefined(this.hreflang), target: helpers.isPropDefined(this.target), rel: helpers.isPropDefined(this.rel), referrerpolicy: this.referrerpolicy !== undefined ? this.referrerpolicy : null, "aria-disabled": `${this.disabled}`, "aria-label": this.getMenuItemAriaLabel(), ariaControlsId: helpers.isPropDefined(this.submenuTriggerFor)
                 ? `ic-popover-submenu-${this.submenuTriggerFor}`
                 : false, "aria-haspopup": helpers.isPropDefined(this.submenuTriggerFor) ||

package/dist/cjs/ic-menu-item.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"ic-menu-item.entry.cjs.js","mappings":";;;;;;;;;;AAAA,MAAM,aAAa,GAAG,+hMAA+hM;;MCgCxiM,QAAQ;;;;;;QAqGX,gBAAW,GAAG,CAAC,CAAQ;YAC7B,IAAIA,qBAAa,CAAC,IAAI,CAAC,iBAAiB,CAAC,EAAE;gBACzC,IAAI,CAAC,0BAA0B,CAAC,IAAI,EAAE,CAAC;aACxC;iBAAM,IAAI,IAAI,CAAC,OAAO,KAAK,QAAQ,EAAE;gBACpC,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,IAAI,CAAC,aAAa,GAAG,CAAC,IAAI,CAAC,aAAa,CAAC;aAC1C;YACD,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC;gBAC5B,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,UAAU,EAAE,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,iBAAiB;aACxC,CAAC,CAAC;SACJ,CAAC;QAEM,yBAAoB,GAAG;YAC7B,IAAI,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC;YAE3B,IAAIA,qBAAa,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE;gBACnC,SAAS,GAAG,GAAG,SAAS,KAAK,IAAI,CAAC,WAAW,EAAE,CAAC;aACjD;YAED,IAAIA,qBAAa,CAAC,IAAI,CAAC,gBAAgB,CAAC,EAAE;gBACxC,SAAS,GAAG,GAAG,SAAS,KAAK,IAAI,CAAC,gBAAgB,EAAE,CAAC;aACtD;YAED,IAAI,IAAI,CAAC,OAAO,KAAK,aAAa,EAAE;gBAClC,SAAS,GAAG,GAAG,SAAS,eAAe,CAAC;aACzC;YAED,IAAIA,qBAAa,CAAC,IAAI,CAAC,iBAAiB,CAAC,EAAE;gBACzC,SAAS,GAAG,GAAG,SAAS,oBAAoB,CAAC;aAC9C;YAED,IAAI,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,QAAQ,CAAC,gCAAgC,CAAC,EAAE;gBAChE,SAAS,GAAG,wBAAwB,CAAC;aACtC;YACD,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC;YAEvC,IACE,QAAQ,CAAC,OAAO,KAAK,eAAe;gBACnC,QAAmC,CAAC,KAAK,EAC1C;gBACA,OAAO,GAAG,SAAS,KAChB,QAAmC,CAAC,KACvC,aAAa,CAAC;aACf;iBAAM;gBACL,OAAO,SAAS,CAAC;aAClB;SACF,CAAC;6BAjJgC,KAAK;;wBAUV,KAAK;;;;;;;;;uBA8ChC,SAAS;;IAoBX,iBAAiB;;QAEf,IAAIA,qBAAa,CAAC,IAAI,CAAC,iBAAiB,CAAC,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS,EAAE;YACvE,IAAI,CAAC,OAAO,GAAG,SAAS,CAAC;SAC1B;QACDC,2BAAmB,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;KAC7C;IAED,gBAAgB;QACdC,wCAAgC,CAC9B,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EACzC,WAAW,CACZ,CAAC;KACH;IAGD,eAAe,CAAC,CAAQ;QACtB,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,CAAC,CAAC,wBAAwB,EAAE,CAAC;SAC9B;KACF;IAmDD,MAAM;;QAEJ,MAAM,mBAAmB,GAAG;YAC1B,QACEC,iBAAK,KAAK,EAAC,gBAAgB,IACzBA,iBAAK,KAAK,EAAC,aAAa,IACtBA,2BAAe,KAAK,EAAC,iBAAiB,IAAE,IAAI,CAAC,KAAK,CAAiB,EAClE,IAAI,CAAC,gBAAgB,KACpBA,2BAAe,OAAO,EAAC,SAAS,EAAC,KAAK,EAAC,UAAU,IAC9C,IAAI,CAAC,gBAAgB,CACR,CACjB,CACG,EACL,IAAI,CAAC,WAAW,KACfA,2BAAe,KAAK,EAAC,uBAAuB,EAAC,OAAO,EAAC,SAAS,IAC3D,IAAI,CAAC,WAAW,CACH,CACjB,CACG,EACN;SACH,CAAC;QAEF,QACEA,QAACC,UAAI,IACH,KAAK,EAAE;gBACL,CAAC,UAAU,GAAG,IAAI,CAAC,QAAQ;aAC5B,IAEDD,gBACE,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,QAAQ,GAAG,kBAAkB,GAAG,UAAU,mBAClD,GAAG,IAAI,CAAC,QAAQ,EAAE,kBAE/B,IAAI,CAAC,OAAO,KAAK,QAAQ,GAAG,IAAI,CAAC,aAAa,GAAG,SAAS,IAG5DA,uBACE,SAAS,QACT,OAAO,EAAC,UAAU,EAClB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,IAAI,EAAEH,qBAAa,CAAC,IAAI,CAAC,IAAI,CAAC,EAC9B,QAAQ,EAAEA,qBAAa,CAAC,IAAI,CAAC,QAAQ,CAAC,EACtC,MAAM,EAAEA,qBAAa,CAAC,IAAI,CAAC,MAAM,CAAC,EAClC,GAAG,EAAEA,qBAAa,CAAC,IAAI,CAAC,GAAG,CAAC,EAC5B,cAAc,EACZ,IAAI,CAAC,cAAc,KAAK,SAAS,GAAG,IAAI,CAAC,cAAc,GAAG,IAAI,mBAEjD,GAAG,IAAI,CAAC,QAAQ,EAAE,gBACrB,IAAI,CAAC,oBAAoB,EAAE,EACvC,cAAc,EACZA,qBAAa,CAAC,IAAI,CAAC,iBAAiB,CAAC;kBACjC,sBAAsB,IAAI,CAAC,iBAAiB,EAAE;kBAC9C,KAAK,mBAGTA,qBAAa,CAAC,IAAI,CAAC,iBAAiB,CAAC;gBACrC,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,QAAQ,CAAC,gCAAgC,CAAC;kBACxD,MAAM;kBACN,KAAK,EAEX,UAAU,EACRA,qBAAa,CAAC,IAAI,CAAC,iBAAiB,CAAC;kBACjC,sBAAsB,IAAI,CAAC,iBAAiB,EAAE;kBAC9C,KAAK,IAGXG,iBAAK,KAAK,EAAC,cAAc,IACtBE,kBAAU,CAAC,IAAI,CAAC,EAAE,EAAE,MAAM,CAAC,KAC1BF,kBAAM,KAAK,EAAC,MAAM,IAChBA,kBAAM,IAAI,EAAC,MAAM,GAAQ,CACpB,CACR,EACDA,QAAC,mBAAmB,OAAG,EACtB,IAAI,CAAC,OAAO,KAAK,QAAQ,KACxBA,kBACE,KAAK,EAAE;gBACL,CAAC,YAAY,GAAG,IAAI;gBACpB,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,aAAa;aAC9B,iBACW,MAAM,EAClB,SAAS,EAAEG,eAAK,GAChB,CACH,EACAN,qBAAa,CAAC,IAAI,CAAC,iBAAiB,CAAC,KACpCG,kBACE,KAAK,EAAE,EAAE,CAAC,cAAc,GAAG,IAAI,EAAE,iBACrB,MAAM,EAClB,SAAS,EAAEI,mBAAO,GAClB,CACH,CACG,CACI,CACT,CACA,EACP;KACH;;;;;;;;","names":["isPropDefined","removeDisabledFalse","onComponentRequiredPropUndefined","h","Host","isSlotUsed","Check","Chevron"],"sources":["src/components/ic-menu-item/ic-menu-item.css?tag=ic-menu-item&encapsulation=shadow","src/components/ic-menu-item/ic-menu-item.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\nli {\n  list-style: none;\n  padding: 0;\n}\n\n:host ::part(button) {\n  color: var(--ic-color-primary-text);\n  padding: calc(var(--ic-space-xxxs) / 2);\n  display: flex;\n  align-items: flex-start;\n  gap: var(--ic-space-xs);\n  border-radius: 0;\n  min-height: 2.5rem;\n  height: auto;\n}\n\n.focus-border {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--ic-space-xs);\n  border-radius: var(--ic-border-radius);\n  margin: calc(var(--ic-space-xxxs) / 2);\n  padding: var(--ic-space-xxs);\n  border: var(--ic-space-xxxs) dashed transparent;\n\n  --icon-height: auto;\n}\n\n:host(.disabled) ::part(button) {\n  color: var(--ic-architectural-200) !important;\n  pointer-events: none;\n}\n\n:host(.disabled) .menu-item-label,\n:host(.disabled) .shortcut,\n:host(.disabled) .menu-item-description {\n  color: var(--ic-architectural-200) !important;\n}\n\n:host([variant=\"destructive\"]) ::part(button) {\n  color: var(--ic-action-destructive);\n}\n\n:host ::part(button):hover {\n  background-color: var(--ic-action-dark-bg-hover);\n}\n\n:host ::part(button):focus-visible,\n:host ::part(button):focus {\n  color: var(--ic-color-white-text);\n  background-color: var(--ic-focus-blue);\n  box-shadow: none;\n}\n\n:host(.disabled) ::part(button):focus-visible,\n:host(.disabled) ::part(button):focus {\n  color: var(--ic-theme-lighten-40) !important;\n}\n\n:host([variant=\"destructive\"]) ::part(button):focus-visible,\n:host([variant=\"destructive\"]) ::part(button):focus {\n  background-color: var(--ic-action-destructive);\n}\n\nic-button:focus-within .menu-item-label,\nic-button:focus-within .shortcut,\nic-button:focus-within .menu-item-description {\n  color: var(--ic-color-white-text);\n}\n\n:host(.disabled) ic-button:focus-within .focus-border {\n  border-color: var(--ic-architectural-white);\n}\n\n:host(.disabled) ic-button:focus-within .menu-item-label,\n:host(.disabled) ic-button:focus-within .shortcut,\n:host(.disabled) ic-button:focus-within .menu-item-description {\n  color: var(--ic-theme-lighten-40) !important;\n}\n\n:host ::part(button):active {\n  background-color: var(--ic-action-dark-bg-active);\n  color: var(--ic-color-primary-text) !important;\n}\n\n:host([variant=\"destructive\"]) ::part(button):active {\n  background-color: var(--ic-action-dark-bg-active);\n  color: var(--ic-action-destructive) !important;\n}\n\n.menu-item-info {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  align-items: baseline;\n  white-space: pre-line;\n  text-align: left;\n}\n\n.menu-labels {\n  display: flex;\n  align-items: baseline;\n  gap: var(--ic-space-xs);\n}\n\n.menu-item-description {\n  color: var(--ic-color-secondary-text);\n}\n\n.shortcut {\n  color: var(--ic-color-tertiary-text);\n  display: flex;\n  flex: min-content;\n}\n\n:host([variant=\"destructive\"]) .menu-item-label {\n  text-transform: uppercase;\n  font-weight: 600;\n  letter-spacing: 0.025em;\n}\n\nic-button:active .menu-item-label {\n  color: var(--ic-color-primary-text);\n}\n\nic-button:active .menu-item-description {\n  color: var(--ic-color-secondary-text);\n}\n\nic-button:active .shortcut {\n  color: var(--ic-color-tertiary-text);\n}\n\n:host([variant=\"destructive\"]) ic-button:active .menu-item-label {\n  color: var(--ic-action-destructive) !important;\n}\n\n.icon,\n.check-icon,\n.submenu-icon,\n.icon ::slotted(svg),\n.check-icon svg,\n.submenu-icon svg {\n  width: var(--ic-space-lg);\n  height: var(--ic-space-lg);\n}\n\n.check-icon.hide {\n  visibility: hidden;\n}\n\n/** High Contrast **/\n@media (forced-colors: active) {\n  :host ::part(button) {\n    border: canvas;\n  }\n\n  :host ::part(button):focus-visible {\n    outline: var(--ic-space-xxxs) solid transparent;\n  }\n\n  .focus-border {\n    border-color: canvas;\n  }\n\n  :host(.disabled) ic-button:focus-within .focus-border {\n    border-color: GrayText;\n  }\n\n  :host(.disabled) .menu-item-info,\n  :host(.disabled) .menu-item-label,\n  :host(.disabled) .shortcut,\n  :host(.disabled) .menu-item-description,\n  :host(.disabled) ic-button:focus-within .menu-item-info,\n  :host(.disabled) ic-button:focus-within .menu-item-label,\n  :host(.disabled) ic-button:focus-within .shortcut,\n  :host(.disabled) ic-button:focus-within .menu-item-description {\n    color: GrayText !important;\n  }\n\n  :host(.disabled) ::part(button):focus-visible,\n  :host(.disabled) ::part(button):focus {\n    outline-color: GrayText !important;\n  }\n}\n","import {\n  Component,\n  Element,\n  Host,\n  Prop,\n  h,\n  State,\n  Event,\n  EventEmitter,\n  Listen,\n} from \"@stencil/core\";\nimport {\n  isSlotUsed,\n  onComponentRequiredPropUndefined,\n  removeDisabledFalse,\n  isPropDefined,\n} from \"../../utils/helpers\";\nimport { IcMenuItemVariants } from \"./ic-menu-item.types\";\nimport Check from \"../../assets/check-icon.svg\";\nimport Chevron from \"../../assets/chevron-icon.svg\";\n\n/**\n * @slot icon - Content will be placed to the left of the menu item label.\n */\n\n@Component({\n  tag: \"ic-menu-item\",\n  styleUrl: \"ic-menu-item.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class MenuItem {\n  @Element() el: HTMLIcMenuItemElement;\n\n  @State() toggleChecked: boolean = false;\n\n  /**\n   * The description displayed in the menu item, below the label.\n   */\n  @Prop() description?: string;\n\n  /**\n   * If `true`, the menu item will be in disabled state.\n   */\n  @Prop() disabled?: boolean = false;\n\n  /**\n   * The URL that the link points to. This will render the menu item as an \"a\" tag.\n   */\n  @Prop() href?: string;\n\n  /**\n   * The human language of the linked URL.\n   */\n  @Prop() hreflang?: string;\n\n  /**\n   * The label describing the keyboard shortcut for a menu item's action.\n   */\n  @Prop() keyboardShortcut?: string;\n\n  /**\n   * The label to display in the menu item.\n   */\n  @Prop() label!: string;\n\n  /**\n   * How much of the referrer to send when following the link.\n   */\n  @Prop() referrerpolicy?: ReferrerPolicy;\n\n  /**\n   * The relationship of the linked URL as space-separated link types.\n   */\n  @Prop() rel?: string;\n\n  /**\n   * This references the popover menu instance that the menu item is a trigger for. If this prop is set, then the variant will always be default.\n   */\n  @Prop() submenuTriggerFor?: string;\n\n  /**\n   * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n   */\n  @Prop() target?: string;\n\n  /**\n   * The variant of the menu item.\n   */\n  @Prop({ mutable: true, reflect: true }) variant: IcMenuItemVariants =\n    \"default\";\n\n  /**\n   * @internal Emitted when item loses focus.\n   */\n  @Event() childBlur: EventEmitter<void>;\n\n  /**\n   * @internal Emitted when the user clicks a menu item.\n   */\n  @Event() handleMenuItemClick: EventEmitter<{\n    label: string;\n    hasSubMenu: boolean;\n  }>;\n\n  /**\n   * @internal Emitted when the user clicks a menu item that triggers a popover menu instance.\n   */\n  @Event() triggerPopoverMenuInstance: EventEmitter<void>;\n\n  componentWillLoad(): void {\n    // This ensures that trigger menu items are always set to the default variant\n    if (isPropDefined(this.submenuTriggerFor) && this.variant !== \"default\") {\n      this.variant = \"default\";\n    }\n    removeDisabledFalse(this.disabled, this.el);\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Menu Item\"\n    );\n  }\n\n  @Listen(\"click\", { capture: true })\n  handleHostClick(e: Event): void {\n    if (this.disabled) {\n      e.stopImmediatePropagation();\n    }\n  }\n\n  private handleClick = (e: Event): void => {\n    if (isPropDefined(this.submenuTriggerFor)) {\n      this.triggerPopoverMenuInstance.emit();\n    } else if (this.variant === \"toggle\") {\n      e.preventDefault();\n      this.toggleChecked = !this.toggleChecked;\n    }\n    this.handleMenuItemClick.emit({\n      label: this.label,\n      hasSubMenu: !!this.el.submenuTriggerFor,\n    });\n  };\n\n  private getMenuItemAriaLabel = (): string => {\n    let ariaLabel = this.label;\n\n    if (isPropDefined(this.description)) {\n      ariaLabel = `${ariaLabel}, ${this.description}`;\n    }\n\n    if (isPropDefined(this.keyboardShortcut)) {\n      ariaLabel = `${ariaLabel}, ${this.keyboardShortcut}`;\n    }\n\n    if (this.variant === \"destructive\") {\n      ariaLabel = `${ariaLabel}, destructive`;\n    }\n\n    if (isPropDefined(this.submenuTriggerFor)) {\n      ariaLabel = `${ariaLabel}, triggers submenu`;\n    }\n\n    if (this.el.classList.contains(\"ic-popover-submenu-back-button\")) {\n      ariaLabel = \"Go back to parent menu\";\n    }\n    const parentEl = this.el.parentElement;\n\n    if (\n      parentEl.tagName === \"IC-MENU-GROUP\" &&\n      (parentEl as HTMLIcMenuGroupElement).label\n    ) {\n      return `${ariaLabel}, ${\n        (parentEl as HTMLIcMenuGroupElement).label\n      } menu group`;\n    } else {\n      return ariaLabel;\n    }\n  };\n\n  render() {\n    // A sub-component to layout the menu information correctly in ic-button\n    const MenuItemInformation = () => {\n      return (\n        <div class=\"menu-item-info\">\n          <div class=\"menu-labels\">\n            <ic-typography class=\"menu-item-label\">{this.label}</ic-typography>\n            {this.keyboardShortcut && (\n              <ic-typography variant=\"caption\" class=\"shortcut\">\n                {this.keyboardShortcut}\n              </ic-typography>\n            )}\n          </div>\n          {this.description && (\n            <ic-typography class=\"menu-item-description\" variant=\"caption\">\n              {this.description}\n            </ic-typography>\n          )}\n        </div>\n      );\n    };\n\n    return (\n      <Host\n        class={{\n          [\"disabled\"]: this.disabled,\n        }}\n      >\n        <li\n          role={this.variant === \"toggle\" ? \"menuitemcheckbox\" : \"menuitem\"}\n          aria-disabled={`${this.disabled}`}\n          aria-checked={\n            this.variant === \"toggle\" ? this.toggleChecked : undefined\n          }\n        >\n          <ic-button\n            fullWidth\n            variant=\"tertiary\"\n            onClick={this.handleClick}\n            href={isPropDefined(this.href)}\n            hreflang={isPropDefined(this.hreflang)}\n            target={isPropDefined(this.target)}\n            rel={isPropDefined(this.rel)}\n            referrerpolicy={\n              this.referrerpolicy !== undefined ? this.referrerpolicy : null\n            }\n            aria-disabled={`${this.disabled}`}\n            aria-label={this.getMenuItemAriaLabel()}\n            ariaControlsId={\n              isPropDefined(this.submenuTriggerFor)\n                ? `ic-popover-submenu-${this.submenuTriggerFor}`\n                : false\n            }\n            aria-haspopup={\n              isPropDefined(this.submenuTriggerFor) ||\n              this.el.classList.contains(\"ic-popover-submenu-back-button\")\n                ? \"menu\"\n                : false\n            }\n            ariaOwnsId={\n              isPropDefined(this.submenuTriggerFor)\n                ? `ic-popover-submenu-${this.submenuTriggerFor}`\n                : false\n            }\n          >\n            <div class=\"focus-border\">\n              {isSlotUsed(this.el, \"icon\") && (\n                <span class=\"icon\">\n                  <slot name=\"icon\"></slot>\n                </span>\n              )}\n              <MenuItemInformation />\n              {this.variant === \"toggle\" && (\n                <span\n                  class={{\n                    [\"check-icon\"]: true,\n                    [\"hide\"]: !this.toggleChecked,\n                  }}\n                  aria-hidden=\"true\"\n                  innerHTML={Check}\n                />\n              )}\n              {isPropDefined(this.submenuTriggerFor) && (\n                <span\n                  class={{ [\"submenu-icon\"]: true }}\n                  aria-hidden=\"true\"\n                  innerHTML={Chevron}\n                />\n              )}\n            </div>\n          </ic-button>\n        </li>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ic-menu-item.entry.cjs.js","mappings":"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","names":["isPropDefined","removeDisabledFalse","onComponentRequiredPropUndefined","h","Host","isSlotUsed","Check","Chevron"],"sources":["src/components/ic-menu-item/ic-menu-item.css?tag=ic-menu-item&encapsulation=shadow","src/components/ic-menu-item/ic-menu-item.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\nli {\n  list-style: none;\n  padding: 0;\n}\n\n:host ::part(button) {\n  color: var(--ic-color-text-primary);\n  padding: calc(var(--ic-space-xxxs) / 2);\n  display: flex;\n  align-items: flex-start;\n  gap: var(--ic-space-xs);\n  border-radius: 0;\n  min-height: 2.5rem;\n  height: auto;\n}\n\n.focus-border {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--ic-space-xs);\n  border-radius: var(--ic-border-radius);\n  margin: calc(var(--ic-space-xxxs) / 2);\n  padding: var(--ic-space-xxs);\n  border: var(--ic-space-xxxs) dashed transparent;\n\n  --icon-height: auto;\n}\n\n:host(.ic-menu-item-disabled) ::part(button) {\n  color: var(--ic-architectural-200) !important;\n\n  --ic-typography-color: var(--ic-architectural-200) !important;\n\n  pointer-events: none;\n}\n\n:host(.ic-menu-item-disabled) .menu-item-label,\n:host(.ic-menu-item-disabled) .shortcut,\n:host(.ic-menu-item-disabled) .menu-item-description {\n  --ic-typography-color: var(--ic-architectural-200) !important;\n}\n\n:host([variant=\"destructive\"]) ::part(button) {\n  color: var(--ic-action-destructive);\n\n  --ic-typography-color: var(--ic-action-destructive);\n}\n\n:host ::part(button):hover {\n  background-color: var(--ic-action-dark-bg-hover);\n}\n\n:host ::part(button):focus-visible,\n:host ::part(button):focus {\n  color: var(--ic-color-white-text);\n\n  --ic-typography-color: var(--ic-color-white-text);\n\n  background-color: var(--ic-color-focus-inner);\n  box-shadow: none;\n}\n\n:host(.ic-menu-item-disabled) ::part(button):focus-visible,\n:host(.ic-menu-item-disabled) ::part(button):focus {\n  color: var(--ic-theme-lighten-40) !important;\n\n  --ic-typography-color: var(--ic-theme-lighten-40) !important;\n}\n\n:host([variant=\"destructive\"]) ::part(button):focus-visible,\n:host([variant=\"destructive\"]) ::part(button):focus {\n  background-color: var(--ic-action-destructive);\n}\n\nic-button:focus-within .menu-item-label,\nic-button:focus-within .shortcut,\nic-button:focus-within .menu-item-description {\n  --ic-typography-color: var(--ic-color-white-text);\n}\n\n:host(.ic-menu-item-disabled) ic-button:focus-within .focus-border {\n  border-color: var(--ic-architectural-white);\n}\n\n:host(.ic-menu-item-disabled) ic-button:focus-within .menu-item-label,\n:host(.ic-menu-item-disabled) ic-button:focus-within .shortcut,\n:host(.ic-menu-item-disabled) ic-button:focus-within .menu-item-description {\n  --ic-typography-color: var(--ic-theme-lighten-40) !important;\n}\n\n:host ::part(button):active {\n  background-color: var(--ic-action-dark-bg-pressed);\n  color: var(--ic-color-text-primary) !important;\n\n  --ic-typography-color: var(--ic-color-text-primary) !important;\n}\n\n:host([variant=\"destructive\"]) ::part(button):active {\n  background-color: var(--ic-action-dark-bg-pressed);\n  color: var(--ic-action-destructive) !important;\n\n  --ic-typography-color: var(--ic-action-destructive) !important;\n}\n\n.menu-item-info {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  align-items: baseline;\n  white-space: pre-line;\n  text-align: left;\n}\n\n.menu-labels {\n  display: flex;\n  align-items: baseline;\n  gap: var(--ic-space-xs);\n}\n\n.menu-item-description {\n  --ic-typography-color: var(--ic-color-text-secondary);\n}\n\n.shortcut {\n  --ic-typography-color: var(--ic-color-text-tertiary);\n\n  display: flex;\n  flex: min-content;\n}\n\n:host([variant=\"destructive\"]) .menu-item-label {\n  text-transform: uppercase;\n  font-weight: 600;\n  letter-spacing: 0.025em;\n}\n\nic-button:active .menu-item-label {\n  --ic-typography-color: var(--ic-color-text-primary);\n}\n\nic-button:active .menu-item-description {\n  --ic-typography-color: var(--ic-color-text-secondary);\n}\n\nic-button:active .shortcut {\n  --ic-typography-color: var(--ic-color-text-tertiary);\n}\n\n:host([variant=\"destructive\"]) ic-button:active .menu-item-label {\n  --ic-typography-color: var(--ic-action-destructive) !important;\n}\n\n.icon,\n.check-icon,\n.submenu-icon,\n.icon ::slotted(svg),\n.check-icon svg,\n.submenu-icon svg {\n  width: var(--ic-space-lg);\n  height: var(--ic-space-lg);\n}\n\n.check-icon.hide {\n  visibility: hidden;\n}\n\n/** High Contrast **/\n@media (forced-colors: active) {\n  :host ::part(button) {\n    border: canvas;\n  }\n\n  :host ::part(button):focus-visible {\n    outline: var(--ic-space-xxxs) solid transparent;\n  }\n\n  .focus-border {\n    border-color: canvas;\n  }\n\n  :host(.ic-menu-item-disabled) ic-button:focus-within .focus-border {\n    border-color: GrayText;\n  }\n\n  :host(.ic-menu-item-disabled) .menu-item-info,\n  :host(.ic-menu-item-disabled) .menu-item-label,\n  :host(.ic-menu-item-disabled) .shortcut,\n  :host(.ic-menu-item-disabled) .menu-item-description,\n  :host(.ic-menu-item-disabled) ic-button:focus-within .menu-item-info,\n  :host(.ic-menu-item-disabled) ic-button:focus-within .menu-item-label,\n  :host(.ic-menu-item-disabled) ic-button:focus-within .shortcut,\n  :host(.ic-menu-item-disabled) ic-button:focus-within .menu-item-description {\n    --ic-typography-color: GrayText !important;\n  }\n\n  :host(.ic-menu-item-disabled) ::part(button):focus-visible,\n  :host(.ic-menu-item-disabled) ::part(button):focus {\n    outline-color: GrayText !important;\n  }\n}\n","import {\n  Component,\n  Element,\n  Host,\n  Prop,\n  h,\n  State,\n  Event,\n  EventEmitter,\n  Listen,\n} from \"@stencil/core\";\nimport {\n  isSlotUsed,\n  onComponentRequiredPropUndefined,\n  removeDisabledFalse,\n  isPropDefined,\n} from \"../../utils/helpers\";\nimport { IcMenuItemVariants } from \"./ic-menu-item.types\";\nimport Check from \"../../assets/check-icon.svg\";\nimport Chevron from \"../../assets/chevron-icon.svg\";\n\n/**\n * @slot icon - Content will be placed to the left of the menu item label.\n */\n\n@Component({\n  tag: \"ic-menu-item\",\n  styleUrl: \"ic-menu-item.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class MenuItem {\n  @Element() el: HTMLIcMenuItemElement;\n\n  @State() toggleChecked: boolean = false;\n\n  /**\n   * The description displayed in the menu item, below the label.\n   */\n  @Prop() description?: string;\n\n  /**\n   * If `true`, the menu item will be in disabled state.\n   */\n  @Prop() disabled?: boolean = false;\n\n  /**\n   * The URL that the link points to. This will render the menu item as an \"a\" tag.\n   */\n  @Prop() href?: string;\n\n  /**\n   * The human language of the linked URL.\n   */\n  @Prop() hreflang?: string;\n\n  /**\n   * The label describing the keyboard shortcut for a menu item's action.\n   */\n  @Prop() keyboardShortcut?: string;\n\n  /**\n   * The label to display in the menu item.\n   */\n  @Prop() label!: string;\n\n  /**\n   * How much of the referrer to send when following the link.\n   */\n  @Prop() referrerpolicy?: ReferrerPolicy;\n\n  /**\n   * The relationship of the linked URL as space-separated link types.\n   */\n  @Prop() rel?: string;\n\n  /**\n   * This references the popover menu instance that the menu item is a trigger for. If this prop is set, then the variant will always be default.\n   */\n  @Prop() submenuTriggerFor?: string;\n\n  /**\n   * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n   */\n  @Prop() target?: string;\n\n  /**\n   * The variant of the menu item.\n   */\n  @Prop({ mutable: true, reflect: true }) variant: IcMenuItemVariants =\n    \"default\";\n\n  /**\n   * @internal Emitted when item loses focus.\n   */\n  @Event() childBlur: EventEmitter<void>;\n\n  /**\n   * @internal Emitted when the user clicks a menu item.\n   */\n  @Event() handleMenuItemClick: EventEmitter<{\n    label: string;\n    hasSubMenu: boolean;\n  }>;\n\n  /**\n   * @internal Emitted when the user clicks a menu item that triggers a popover menu instance.\n   */\n  @Event() triggerPopoverMenuInstance: EventEmitter<void>;\n\n  componentWillLoad(): void {\n    // This ensures that trigger menu items are always set to the default variant\n    if (isPropDefined(this.submenuTriggerFor) && this.variant !== \"default\") {\n      this.variant = \"default\";\n    }\n    removeDisabledFalse(this.disabled, this.el);\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Menu Item\"\n    );\n  }\n\n  @Listen(\"click\", { capture: true })\n  handleHostClick(e: Event): void {\n    if (this.disabled) {\n      e.stopImmediatePropagation();\n    }\n  }\n\n  private handleClick = (e: Event): void => {\n    if (isPropDefined(this.submenuTriggerFor)) {\n      this.triggerPopoverMenuInstance.emit();\n    } else if (this.variant === \"toggle\") {\n      e.preventDefault();\n      this.toggleChecked = !this.toggleChecked;\n    }\n    this.handleMenuItemClick.emit({\n      label: this.label,\n      hasSubMenu: !!this.el.submenuTriggerFor,\n    });\n  };\n\n  private getMenuItemAriaLabel = (): string => {\n    let ariaLabel = this.label;\n\n    if (isPropDefined(this.description)) {\n      ariaLabel = `${ariaLabel}, ${this.description}`;\n    }\n\n    if (isPropDefined(this.keyboardShortcut)) {\n      ariaLabel = `${ariaLabel}, ${this.keyboardShortcut}`;\n    }\n\n    if (this.variant === \"destructive\") {\n      ariaLabel = `${ariaLabel}, destructive`;\n    }\n\n    if (isPropDefined(this.submenuTriggerFor)) {\n      ariaLabel = `${ariaLabel}, triggers submenu`;\n    }\n\n    if (this.el.classList.contains(\"ic-popover-submenu-back-button\")) {\n      ariaLabel = \"Go back to parent menu\";\n    }\n    const parentEl = this.el.parentElement;\n\n    if (\n      parentEl.tagName === \"IC-MENU-GROUP\" &&\n      (parentEl as HTMLIcMenuGroupElement).label\n    ) {\n      return `${ariaLabel}, ${\n        (parentEl as HTMLIcMenuGroupElement).label\n      } menu group`;\n    } else {\n      return ariaLabel;\n    }\n  };\n\n  render() {\n    // A sub-component to layout the menu information correctly in ic-button\n    const MenuItemInformation = () => {\n      return (\n        <div class=\"menu-item-info\">\n          <div class=\"menu-labels\">\n            <ic-typography class=\"menu-item-label\">{this.label}</ic-typography>\n            {this.keyboardShortcut && (\n              <ic-typography variant=\"caption\" class=\"shortcut\">\n                {this.keyboardShortcut}\n              </ic-typography>\n            )}\n          </div>\n          {this.description && (\n            <ic-typography class=\"menu-item-description\" variant=\"caption\">\n              {this.description}\n            </ic-typography>\n          )}\n        </div>\n      );\n    };\n\n    return (\n      <Host\n        class={{\n          [\"ic-menu-item-disabled\"]: this.disabled,\n        }}\n      >\n        <li\n          role={this.variant === \"toggle\" ? \"menuitemcheckbox\" : \"menuitem\"}\n          aria-disabled={`${this.disabled}`}\n          aria-checked={\n            this.variant === \"toggle\" ? this.toggleChecked : undefined\n          }\n        >\n          <ic-button\n            fullWidth\n            variant=\"tertiary\"\n            onClick={this.handleClick}\n            href={isPropDefined(this.href)}\n            hreflang={isPropDefined(this.hreflang)}\n            target={isPropDefined(this.target)}\n            rel={isPropDefined(this.rel)}\n            referrerpolicy={\n              this.referrerpolicy !== undefined ? this.referrerpolicy : null\n            }\n            aria-disabled={`${this.disabled}`}\n            aria-label={this.getMenuItemAriaLabel()}\n            ariaControlsId={\n              isPropDefined(this.submenuTriggerFor)\n                ? `ic-popover-submenu-${this.submenuTriggerFor}`\n                : false\n            }\n            aria-haspopup={\n              isPropDefined(this.submenuTriggerFor) ||\n              this.el.classList.contains(\"ic-popover-submenu-back-button\")\n                ? \"menu\"\n                : false\n            }\n            ariaOwnsId={\n              isPropDefined(this.submenuTriggerFor)\n                ? `ic-popover-submenu-${this.submenuTriggerFor}`\n                : false\n            }\n          >\n            <div class=\"focus-border\">\n              {isSlotUsed(this.el, \"icon\") && (\n                <span class=\"icon\">\n                  <slot name=\"icon\"></slot>\n                </span>\n              )}\n              <MenuItemInformation />\n              {this.variant === \"toggle\" && (\n                <span\n                  class={{\n                    [\"check-icon\"]: true,\n                    [\"hide\"]: !this.toggleChecked,\n                  }}\n                  aria-hidden=\"true\"\n                  innerHTML={Check}\n                />\n              )}\n              {isPropDefined(this.submenuTriggerFor) && (\n                <span\n                  class={{ [\"submenu-icon\"]: true }}\n                  aria-hidden=\"true\"\n                  innerHTML={Chevron}\n                />\n              )}\n            </div>\n          </ic-button>\n        </li>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/ic-navigation-button.cjs.entry.js

@@ -3,8 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-f982899d.js');
-const helpers = require('./helpers-94b33ab0.js');
-const types = require('./types-dc22e301.js');
+const helpers = require('./helpers-f1cf5156.js');
 
 const icNavigationButtonCss = "/*! 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;margin-right:var(--ic-space-xs);list-style:none}:host(.in-side-menu){margin-right:0}:host::part(button){height:100%;min-height:2.5rem}";
 
@@ -86,8 +85,8 @@ const NavigationButton = class {
         if (this.mode === "menu") {
             label = this.label;
             variant = "tertiary";
-            appearance = types.IcThemeForegroundEnum.Default;
-            size = "default";
+            appearance = helpers.IcThemeForegroundEnum.Default;
+            size = "medium";
             fullWidth = true;
             className = "popout-menu-button";
             disableTooltip = true;

package/dist/cjs/ic-navigation-button.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"ic-navigation-button.entry.cjs.js","mappings":"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","names":["IC_INHERITED_ARIA","forceUpdate","getThemeForegroundColor","inheritAttributes","onComponentRequiredPropUndefined","IcThemeForegroundEnum","h","Host","isSlotUsed"],"sources":["src/components/ic-navigation-button/ic-navigation-button.css?tag=ic-navigation-button&encapsulation=shadow","src/components/ic-navigation-button/ic-navigation-button.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n  display: block;\n  margin-right: var(--ic-space-xs);\n  list-style: none;\n}\n\n:host(.in-side-menu) {\n  margin-right: 0;\n}\n\n:host::part(button) {\n  height: 100%;\n  min-height: 2.5rem;\n}\n","import {\n  Component,\n  Element,\n  Host,\n  Prop,\n  State,\n  h,\n  Listen,\n  Method,\n  forceUpdate,\n} from \"@stencil/core\";\n\nimport {\n  getThemeForegroundColor,\n  inheritAttributes,\n  onComponentRequiredPropUndefined,\n  isSlotUsed,\n} from \"../../utils/helpers\";\nimport { IC_INHERITED_ARIA } from \"../../utils/constants\";\nimport {\n  IcTheme,\n  IcThemeForeground,\n  IcThemeForegroundEnum,\n} from \"../../utils/types\";\nimport { IcNavButtonModes } from \"./ic-navigation-button.types\";\n\nconst MUTABLE_ATTRIBUTES = [...IC_INHERITED_ARIA, \"title\"];\n\n/**\n * @slot icon - Content will be placed to the left of the button label.\n * @slot badge - Badge component overlaying the top right of the button.\n */\n\n@Component({\n  tag: \"ic-navigation-button\",\n  styleUrl: \"ic-navigation-button.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class NavigationButton {\n  private buttonEl: HTMLIcButtonElement;\n  private inheritedAttributes: { [k: string]: string } = {};\n  private hostMutationObserver: MutationObserver = null;\n\n  @Element() el: HTMLIcNavigationButtonElement;\n\n  @State() initialAppearance = getThemeForegroundColor();\n  /**\n   * The display mode.\n   */\n  @State() mode: IcNavButtonModes = \"navbar\";\n\n  /**\n   * If `true`, the user can save the linked URL instead of navigating to it.\n   */\n  @Prop() download?: string | boolean = false;\n\n  /**\n   * The URL that the link points to. This will render the button as an \"a\" tag.\n   */\n  @Prop() href?: string;\n\n  /**\n   * The human language of the linked URL.\n   */\n  @Prop() hreflang?: string;\n\n  /**\n   * The label info to display.\n   */\n  @Prop() label!: string;\n\n  /**\n   * How much of the referrer to send when following the link.\n   */\n  @Prop() referrerpolicy?: ReferrerPolicy;\n\n  /**\n   * The relationship of the linked URL as space-separated link types.\n   */\n  @Prop() rel?: string;\n\n  /**\n   * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n   */\n  @Prop() target?: string;\n\n  componentWillLoad(): void {\n    this.inheritedAttributes = inheritAttributes(this.el, MUTABLE_ATTRIBUTES);\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Navigation Button\"\n    );\n\n    this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);\n    this.hostMutationObserver.observe(this.el, {\n      attributes: true,\n    });\n  }\n\n  componentWillRender(): void {\n    const iconEl = this.el.querySelector(`[slot=\"icon\"]`);\n    iconEl !== null && iconEl.setAttribute(\"viewBox\", \"0 0 24 24\");\n  }\n\n  disconnectedCallback(): void {\n    this.hostMutationObserver?.disconnect();\n  }\n\n  @Listen(\"icNavigationMenuOpened\", { target: \"document\" })\n  navBarMenuOpenHandler(): void {\n    this.mode = \"menu\";\n  }\n\n  @Listen(\"icNavigationMenuClosed\", { target: \"document\" })\n  navBarMenuCloseHandler(): void {\n    this.mode = \"navbar\";\n  }\n\n  @Listen(\"themeChange\", { target: \"document\" })\n  themeChangeHandler(ev: CustomEvent): void {\n    const theme: IcTheme = ev.detail;\n    this.initialAppearance = theme.mode;\n  }\n\n  /**\n   * Sets focus on the native `button`.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    if (this.buttonEl) {\n      this.buttonEl.focus();\n    }\n  }\n\n  // triggered when attributes of host element change\n  private hostMutationCallback = (mutationList: MutationRecord[]): void => {\n    let forceComponentUpdate = false;\n    mutationList.forEach(({ attributeName }) => {\n      if (MUTABLE_ATTRIBUTES.includes(attributeName)) {\n        this.inheritedAttributes[attributeName] =\n          this.el.getAttribute(attributeName);\n        forceComponentUpdate = true;\n      }\n    });\n    if (forceComponentUpdate) {\n      forceUpdate(this);\n    }\n  };\n\n  render() {\n    const { href, target, rel, download, referrerpolicy } = this;\n\n    let label = \"\";\n    let className = \"\";\n    let variant: \"icon\" | \"tertiary\" = \"icon\";\n    let appearance: IcThemeForeground | IcThemeForegroundEnum.Default =\n      this.initialAppearance;\n    let size: \"default\" | \"large\" = \"large\";\n    let fullWidth = false;\n    let disableTooltip = false;\n\n    if (this.mode === \"menu\") {\n      label = this.label;\n      variant = \"tertiary\";\n      appearance = IcThemeForegroundEnum.Default;\n      size = \"default\";\n      fullWidth = true;\n      className = \"popout-menu-button\";\n      disableTooltip = true;\n    }\n\n    const buttonProps = {\n      variant,\n      appearance,\n      size,\n      href,\n      target,\n      rel,\n      download,\n      referrerpolicy,\n      fullWidth,\n      disableTooltip,\n    };\n\n    return (\n      <Host class={{ [\"in-side-menu\"]: this.mode === \"menu\" }}>\n        <ic-button\n          class={className}\n          aria-label={variant == \"icon\" ? this.label : null}\n          ref={(el) => (this.buttonEl = el)}\n          {...buttonProps}\n          {...this.inheritedAttributes}\n        >\n          {label}\n          <slot slot=\"left-icon\" name=\"icon\"></slot>\n          {isSlotUsed(this.el, \"badge\") && variant === \"icon\" && (\n            <slot name=\"badge\"></slot>\n          )}\n        </ic-button>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ic-navigation-button.entry.cjs.js","mappings":"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","names":["IC_INHERITED_ARIA","forceUpdate","getThemeForegroundColor","inheritAttributes","onComponentRequiredPropUndefined","IcThemeForegroundEnum","h","Host","isSlotUsed"],"sources":["src/components/ic-navigation-button/ic-navigation-button.css?tag=ic-navigation-button&encapsulation=shadow","src/components/ic-navigation-button/ic-navigation-button.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n  display: block;\n  margin-right: var(--ic-space-xs);\n  list-style: none;\n}\n\n:host(.in-side-menu) {\n  margin-right: 0;\n}\n\n:host::part(button) {\n  height: 100%;\n  min-height: 2.5rem;\n}\n","import {\n  Component,\n  Element,\n  Host,\n  Prop,\n  State,\n  h,\n  Listen,\n  Method,\n  forceUpdate,\n} from \"@stencil/core\";\n\nimport {\n  getThemeForegroundColor,\n  inheritAttributes,\n  onComponentRequiredPropUndefined,\n  isSlotUsed,\n} from \"../../utils/helpers\";\nimport { IC_INHERITED_ARIA } from \"../../utils/constants\";\nimport {\n  IcTheme,\n  IcThemeForeground,\n  IcThemeForegroundEnum,\n} from \"../../utils/types\";\nimport { IcNavButtonModes } from \"./ic-navigation-button.types\";\n\nconst MUTABLE_ATTRIBUTES = [...IC_INHERITED_ARIA, \"title\"];\n\n/**\n * @slot icon - Content will be placed to the left of the button label.\n * @slot badge - Badge component overlaying the top right of the button.\n */\n\n@Component({\n  tag: \"ic-navigation-button\",\n  styleUrl: \"ic-navigation-button.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class NavigationButton {\n  private buttonEl: HTMLIcButtonElement;\n  private inheritedAttributes: { [k: string]: string } = {};\n  private hostMutationObserver: MutationObserver = null;\n\n  @Element() el: HTMLIcNavigationButtonElement;\n\n  @State() initialAppearance = getThemeForegroundColor();\n  /**\n   * The display mode.\n   */\n  @State() mode: IcNavButtonModes = \"navbar\";\n\n  /**\n   * If `true`, the user can save the linked URL instead of navigating to it.\n   */\n  @Prop() download?: string | boolean = false;\n\n  /**\n   * The URL that the link points to. This will render the button as an \"a\" tag.\n   */\n  @Prop() href?: string;\n\n  /**\n   * The human language of the linked URL.\n   */\n  @Prop() hreflang?: string;\n\n  /**\n   * The label info to display.\n   */\n  @Prop() label!: string;\n\n  /**\n   * How much of the referrer to send when following the link.\n   */\n  @Prop() referrerpolicy?: ReferrerPolicy;\n\n  /**\n   * The relationship of the linked URL as space-separated link types.\n   */\n  @Prop() rel?: string;\n\n  /**\n   * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n   */\n  @Prop() target?: string;\n\n  componentWillLoad(): void {\n    this.inheritedAttributes = inheritAttributes(this.el, MUTABLE_ATTRIBUTES);\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Navigation Button\"\n    );\n\n    this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);\n    this.hostMutationObserver.observe(this.el, {\n      attributes: true,\n    });\n  }\n\n  componentWillRender(): void {\n    const iconEl = this.el.querySelector(`[slot=\"icon\"]`);\n    iconEl !== null && iconEl.setAttribute(\"viewBox\", \"0 0 24 24\");\n  }\n\n  disconnectedCallback(): void {\n    this.hostMutationObserver?.disconnect();\n  }\n\n  @Listen(\"icNavigationMenuOpened\", { target: \"document\" })\n  navBarMenuOpenHandler(): void {\n    this.mode = \"menu\";\n  }\n\n  @Listen(\"icNavigationMenuClosed\", { target: \"document\" })\n  navBarMenuCloseHandler(): void {\n    this.mode = \"navbar\";\n  }\n\n  @Listen(\"themeChange\", { target: \"document\" })\n  themeChangeHandler(ev: CustomEvent): void {\n    const theme: IcTheme = ev.detail;\n    this.initialAppearance = theme.mode;\n  }\n\n  /**\n   * Sets focus on the native `button`.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    if (this.buttonEl) {\n      this.buttonEl.focus();\n    }\n  }\n\n  // triggered when attributes of host element change\n  private hostMutationCallback = (mutationList: MutationRecord[]): void => {\n    let forceComponentUpdate = false;\n    mutationList.forEach(({ attributeName }) => {\n      if (MUTABLE_ATTRIBUTES.includes(attributeName)) {\n        this.inheritedAttributes[attributeName] =\n          this.el.getAttribute(attributeName);\n        forceComponentUpdate = true;\n      }\n    });\n    if (forceComponentUpdate) {\n      forceUpdate(this);\n    }\n  };\n\n  render() {\n    const { href, target, rel, download, referrerpolicy } = this;\n\n    let label = \"\";\n    let className = \"\";\n    let variant: \"icon\" | \"tertiary\" = \"icon\";\n    let appearance: IcThemeForeground | IcThemeForegroundEnum.Default =\n      this.initialAppearance;\n    let size: \"medium\" | \"large\" = \"large\";\n    let fullWidth = false;\n    let disableTooltip = false;\n\n    if (this.mode === \"menu\") {\n      label = this.label;\n      variant = \"tertiary\";\n      appearance = IcThemeForegroundEnum.Default;\n      size = \"medium\";\n      fullWidth = true;\n      className = \"popout-menu-button\";\n      disableTooltip = true;\n    }\n\n    const buttonProps = {\n      variant,\n      appearance,\n      size,\n      href,\n      target,\n      rel,\n      download,\n      referrerpolicy,\n      fullWidth,\n      disableTooltip,\n    };\n\n    return (\n      <Host class={{ [\"in-side-menu\"]: this.mode === \"menu\" }}>\n        <ic-button\n          class={className}\n          aria-label={variant == \"icon\" ? this.label : null}\n          ref={(el) => (this.buttonEl = el)}\n          {...buttonProps}\n          {...this.inheritedAttributes}\n        >\n          {label}\n          <slot slot=\"left-icon\" name=\"icon\"></slot>\n          {isSlotUsed(this.el, \"badge\") && variant === \"icon\" && (\n            <slot name=\"badge\"></slot>\n          )}\n        </ic-button>\n      </Host>\n    );\n  }\n}\n"],"version":3}