npm - @ukic/web-components - Versions diffs - 2.13.0 → 2.15.0 - Mend

@ukic/web-components 2.13.0 → 2.15.0

Files changed (396) hide show

package/dist/components/ic-card.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ic-card.js","mappings":";;;;;;;;;AAAA,MAAM,SAAS,GAAG,2iLAA2iL;;MCwChjL,IAAI;;;;;QA2HP,mBAAc,GAAG;YACvB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;SACxB,CAAC;QAEM,kBAAa,GAAG;YACtB,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;SACzB,CAAC;QAUM,mBAAc,GAAG;YACvB,IAAI,CAAC,YAAY,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC;SACxC,CAAC;0BA1IwC,SAAS;4BAClB,KAAK;0BACP,KAAK;wBACI,IAAI;iCACN,KAAK;yBAKI,KAAK;wBAKvB,KAAK;0BAKH,KAAK;yBAKN,KAAK;;;wBAeP,EAAE;uBAKH,EAAE;;;;;;IAsB7B,oBAAoB;QAClB,IAAI,IAAI,CAAC,iBAAiB,EAAE;YAC1B,IAAI,CAAC,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;YAChE,IAAI,CAAC,QAAQ,CAAC,mBAAmB,CAAC,MAAM,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;SAC/D;KACF;IAED,iBAAiB;QACf,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC;QAEtC,IAAI,IAAI,CAAC,QAAQ,CAAC,OAAO,KAAK,GAAG,EAAE;YACjC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;YACtB,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC;YAC9B,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,sBAAsB,CAAC,CAAC;YACpD,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;YAC7D,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,MAAM,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;SAC5D;QACD,mBAAmB,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;KAC7C;IAED,gBAAgB;QACd,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,SAAS,CAAC;YAC7B,gCAAgC,CAC9B,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC,EAC7C,MAAM,CACP,CAAC;QACJ,IAAI,CAAC,WAAW,EAAE,CAAC;KACpB;IAGD,eAAe,CAAC,KAAY;QAC1B,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,KAAK,CAAC,wBAAwB,EAAE,CAAC;SAClC;KACF;IAGD,kBAAkB,CAAC,EAAe;QAChC,MAAM,KAAK,GAAY,EAAE,CAAC,MAAM,CAAC;QACjC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;KAC9B;;;;IAMD,MAAM,QAAQ;QACZ,IAAI,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,GAAG,CAAC,EAAE;YACzC,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC;SAC/C;aAAM,IAAI,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,QAAQ,CAAC,EAAE;YACrD,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,KAAK,EAAE,CAAC;SACpD;KACF;IAUO,WAAW,CAAC,WAA8B,IAAI;QACpD,MAAM,eAAe,GAAG,mBAAmB,CAAC,IAAI,CAAC,EAAE,EAAE,QAAQ,IAAI,IAAI,CAAC,CAAC;QAEvE,IAAI,eAAe,KAAK,qBAAqB,CAAC,OAAO,EAAE;YACrD,IAAI,CAAC,UAAU,GAAG,eAAe,CAAC;SACnC;KACF;IAMD,MAAM;QACJ,MAAM,EACJ,SAAS,EACT,QAAQ,EACR,UAAU,EACV,OAAO,EACP,OAAO,EACP,IAAI,EACJ,QAAQ,EACR,cAAc,EACd,GAAG,EACH,UAAU,EACV,MAAM,EACN,SAAS,EACT,iBAAiB,EACjB,UAAU,GACX,GAAG,IAAI,CAAC;QAET,MAAM,SAAS,GAAG,iBAAiB;cAC/B,KAAK;cACL,SAAS;kBACT,IAAI,CAAC,IAAI,KAAK,SAAS;sBACrB,QAAQ;sBACR,GAAG;kBACL,KAAK,CAAC;QAEV,MAAM,KAAK,GAAG,SAAS,IAAI,GAAG,IAAI;YAChC,IAAI,EAAE,IAAI;YACV,QAAQ,EAAE,QAAQ;YAClB,cAAc,EAAE,cAAc;YAC9B,GAAG,EAAE,GAAG;YACR,MAAM,EAAE,MAAM;SACf,CAAC;QAEF,QACE,EAAC,SAAS,kBACR,KAAK,EAAE;gBACL,CAAC,MAAM,GAAG,IAAI;gBACd,CAAC,WAAW,GAAG,SAAS,IAAI,CAAC,QAAQ;gBACrC,CAAC,UAAU,GAAG,QAAQ;gBACtB,CAAC,WAAW,GAAG,SAAS;gBACxB,CAAC,UAAU,GAAG,UAAU;gBACxB,CAAC,MAAM,GAAG,IAAI,CAAC,UAAU,KAAK,qBAAqB,CAAC,IAAI;aACzD,EACD,QAAQ,EAAE,SAAS,IAAI,CAAC,iBAAiB,GAAG,CAAC,GAAG,IAAI,mBACrC,QAAQ,GAAG,MAAM,GAAG,IAAI,EACvC,QAAQ,EAAE,QAAQ,GAAG,IAAI,GAAG,IAAI,IAC5B,KAAK,GAER,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,WAAW,CAAC,KAC/B,WAAK,KAAK,EAAC,WAAW,IACpB,YAAM,IAAI,EAAC,WAAW,GAAQ,CAC1B,CACP,EACD,WAAK,KAAK,EAAC,aAAa,IACrB,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,MAAM,CAAC,KAC1B,WAAK,KAAK,EAAC,MAAM,IACf,YAAM,IAAI,EAAC,MAAM,GAAG,CAChB,CACP,EACD,WAAK,KAAK,EAAC,YAAY,IACrB,YAAM,IAAI,EAAC,SAAS,IAClB,qBAAe,OAAO,EAAC,IAAI,IACzB,aAAI,OAAO,CAAK,CACF,CACX,CACH,EACL,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,oBAAoB,CAAC,KACxC,WAAK,KAAK,EAAC,oBAAoB,IAC7B,YAAM,IAAI,EAAC,oBAAoB,GAAQ,CACnC,CACP,CACG,EACL,CAAC,UAAU,IAAI,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,YAAY,CAAC,MAC/C,WAAK,KAAK,EAAC,YAAY,IACrB,YAAM,IAAI,EAAC,YAAY,IACrB,qBAAe,OAAO,EAAC,gBAAgB,IACpC,UAAU,CACG,CACX,CACH,CACP,EACA,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,WAAW,CAAC,KAC/B,WAAK,KAAK,EAAC,WAAW,IACpB,YAAM,IAAI,EAAC,WAAW,GAAQ,CAC1B,CACP,EACA,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,WAAW,CAAC,KAC/B,WAAK,KAAK,EAAC,WAAW,IACpB,YAAM,IAAI,EAAC,WAAW,GAAQ,CAC1B,CACP,EACA,CAAC,OAAO,IAAI,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,SAAS,CAAC,MACzC,WACE,KAAK,EAAE;gBACL,CAAC,cAAc,GAAG,IAAI;aACvB,IAEA,OAAO,IAAI,qBAAe,OAAO,EAAC,MAAM,IAAE,OAAO,CAAiB,EAClE,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,SAAS,CAAC,IAAI,YAAM,IAAI,EAAC,SAAS,GAAQ,CAC3D,CACP,EACA,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,sBAAsB,CAAC,IAAI,UAAU,MACzD,WAAK,KAAK,EAAC,kBAAkB,IAC3B,WAAK,KAAK,EAAC,sBAAsB,IAC/B,YAAM,IAAI,EAAC,sBAAsB,GAAQ,CACrC,EACL,UAAU,KACT,iBACE,KAAK,EAAE;gBACL,CAAC,eAAe,GAAG,IAAI;gBACvB,CAAC,sBAAsB,GAAG,CAAC,IAAI,CAAC,YAAY;gBAC5C,CAAC,wBAAwB,GAAG,IAAI,CAAC,YAAY;aAC9C,EACD,OAAO,EAAC,MAAM,EACd,IAAI,EAAC,OAAO,gBACD,wBAAwB,mBACpB,IAAI,CAAC,YAAY,mBAClB,uBAAuB,EACrC,OAAO,EAAE,IAAI,CAAC,cAAc,EAC5B,SAAS,EAAE,WAAW,GACX,CACd,CACG,CACP,EACA,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,kBAAkB,CAAC,IAAI,IAAI,CAAC,YAAY,KAC3D,WAAK,KAAK,EAAC,kBAAkB,EAAC,EAAE,EAAC,uBAAuB,IACtD,YAAM,IAAI,EAAC,kBAAkB,GAAQ,CACjC,CACP,EACA,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,OAAO,CAAC,IAAI,YAAM,IAAI,EAAC,OAAO,GAAQ,CACjD,EACZ;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/ic-card/ic-card.css?tag=ic-card&encapsulation=shadow","src/components/ic-card/ic-card.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n display: flex;\n}\n\na {\n text-decoration: none !important;\n color: var(--ic-architechtural-black) !important;\n}\n\nbutton {\n border: none;\n background-color: transparent;\n outline: var(--ic-hc-focus-outline);\n}\n\n.card,\n.card.clickable {\n display: flex;\n flex-direction: column;\n border: var(--ic-border-default);\n border-radius: var(--ic-border-radius);\n box-sizing: border-box;\n padding: var(--ic-space-md);\n text-align: left;\n color: var(--ic-architechtural-black);\n transition: var(--ic-easing-transition-fast);\n width: inherit;\n position: relative;\n}\n\n.dark.card,\n.dark.card.clickable {\n border: var(--ic-border-width) solid var(--ic-architectural-700);\n}\n\n.card.clickable:hover {\n background-color: var(--ic-action-default-bg-hover);\n border: var(--ic-border-hover);\n cursor: pointer;\n}\n\n.card.clickable:focus,\n.card.clickable.focussed {\n background-color: var(--ic-action-default-bg-hover);\n box-shadow: var(--ic-border-focus);\n outline: var(--ic-hc-focus-outline);\n border: var(--ic-border-pressed);\n}\n\n.card.clickable:active {\n background-color: var(--ic-action-default-bg-active);\n box-shadow: var(--ic-border-focus);\n}\n\n.card.disabled {\n border: var(--ic-border-disabled);\n}\n\n.card.fullwidth {\n width: 100%;\n}\n\n.card-header {\n display: flex;\n align-items: center;\n}\n\n.icon {\n display: flex;\n align-items: center;\n padding-right: var(--ic-space-xs);\n}\n\n.card.disabled ::slotted(svg) {\n fill: var(--ic-color-tertiary-text);\n}\n\n.card.clickable .card-title {\n color: var(--ic-hyperlink);\n text-decoration: underline;\n text-decoration-thickness: var(--ic-space-1px);\n}\n\n.card.clickable:hover .card-title,\n.card.clickable:focus .card-title,\n.card.clickable.focussed .card-title {\n display: inline-block;\n border-bottom: 0.25rem solid !important;\n margin-bottom: -0.25rem !important;\n text-decoration: none;\n}\n\n@supports (text-decoration-thickness: 25%) {\n .card.clickable:hover .card-title,\n .card.clickable:focus .card-title,\n .card.clickable.focussed .card-title {\n text-decoration-line: underline;\n text-decoration-thickness: 25%;\n text-underline-offset: 25%;\n border-bottom: 0 !important;\n margin-bottom: 0 !important;\n }\n}\n\n.card.clickable:active .card-title {\n text-decoration: none;\n}\n\n.card.disabled .card-title {\n text-decoration: underline;\n text-decoration-thickness: var(--ic-space-1px);\n text-decoration-color: var(--ic-color-tertiary-text);\n color: var(--ic-color-tertiary-text);\n}\n\n.subheading {\n margin-top: var(--ic-space-xxs);\n}\n\n.adornment {\n margin-top: var(--ic-space-xxs);\n}\n\n.card-message {\n margin-top: var(--ic-space-md);\n align-items: left;\n}\n\n.card.disabled .card-message,\n.card.disabled .subheading {\n color: var(--ic-color-tertiary-text);\n}\n\n.interaction-button {\n margin-left: auto;\n}\n\n.image-top {\n margin-bottom: var(--ic-space-md);\n display: flex;\n justify-content: center;\n}\n\n.image-mid {\n margin-top: var(--ic-space-md);\n display: flex;\n justify-content: center;\n}\n\n.interaction-area {\n display: flex;\n flex-grow: 1;\n gap: var(--ic-space-md);\n margin-top: var(--ic-space-md);\n align-items: flex-end;\n}\n\n.interaction-controls {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: var(--ic-space-sm);\n}\n\n.toggle-button {\n margin-left: auto;\n}\n\n.toggle-button-closed svg {\n transform: rotate(90deg);\n}\n\n.toggle-button-expanded svg {\n transform: rotate(-90deg);\n}\n\n.expanded-content {\n margin-top: var(--ic-space-md);\n}\n\n/ High Contrast /\n@media (forced-colors: active) {\n .card ::slotted(svg) {\n fill: currentcolor;\n }\n\n .card.disabled ::slotted(svg) {\n fill: GrayText !important;\n }\n\n .card.disabled {\n border-color: GrayText !important;\n }\n\n .card.disabled .card-message,\n .card.disabled .subheading,\n .card.disabled .card-title {\n color: GrayText;\n }\n}\n","import {\n Component,\n Element,\n Listen,\n Prop,\n State,\n h,\n Method,\n} from \"@stencil/core\";\nimport {\n onComponentRequiredPropUndefined,\n isSlotUsed,\n getThemeFromContext,\n removeDisabledFalse,\n} from \"../../utils/helpers\";\nimport {\n IcTheme,\n IcThemeForeground,\n IcThemeForegroundEnum,\n} from \"../../utils/types\";\nimport chevronIcon from \"../../assets/chevron-icon.svg\";\n\n/*\n @slot heading - Content will be placed at the top of the card to the right of the icon.\n * @slot message - Content will be placed in the main body of the card.\n * @slot subheading - Content will be placed below the card heading.\n * @slot adornment - Content will be placed below the card subheading.\n * @slot image-top - Content will be placed at the top of the card above all other content.\n * @slot image-mid - Content will be placed below the card heading section.\n * @slot icon - Content will be placed to the left of the card heading.\n * @slot interaction-button - Content will be placed in the top right corner of the heading section.\n * @slot interaction-controls - Content will be placed below the card message.\n * @slot expanded-content - Content will be placed below the interaction controls but will not initially be rendered.\n * @slot badge - Badge component overlaying the top right of the card.\n /\n@Component({\n tag: \"ic-card\",\n styleUrl: \"ic-card.css\",\n shadow: true,\n})\nexport class Card {\n @Element() el: HTMLIcCardElement;\n\n @State() appearance?: IcThemeForeground = \"default\";\n @State() areaExpanded: boolean = false;\n @State() isFocussed: boolean = false;\n @State() parentEl: HTMLElement \| null = null;\n @State() parentIsAnchorTag: boolean = false;\n\n /\n If `true`, the card will be a clickable variant, instead of static.\n /\n @Prop({ mutable: true }) clickable?: boolean = false;\n\n /\n If `true`, the card will be disabled if it is clickable.\n /\n @Prop() disabled?: boolean = false;\n\n /\n If `true`, the card will have an expandable area and expansion toggle button.\n /\n @Prop() expandable?: boolean = false;\n\n /\n If `true`, the card will fill the width of the container.\n /\n @Prop() fullWidth?: boolean = false;\n\n /\n The heading for the card. This is required, unless a slotted heading is used.\n /\n @Prop() heading?: string;\n\n /\n The URL that the clickable card link points to. If set, the clickable card will render as an \"a\" tag, otherwise it will render as a button.\n /\n @Prop() href?: string \| undefined;\n\n /\n The human language of the linked URL.\n /\n @Prop() hreflang?: string = \"\";\n\n /\n The main body message of the card.\n /\n @Prop() message?: 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 subheading for the card.\n /\n @Prop() subheading?: 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 disconnectedCallback(): void {\n if (this.parentIsAnchorTag) {\n this.parentEl.removeEventListener(\"focus\", this.parentFocussed);\n this.parentEl.removeEventListener(\"blur\", this.parentBlurred);\n }\n }\n\n componentWillLoad(): void {\n this.parentEl = this.el.parentElement;\n\n if (this.parentEl.tagName === \"A\") {\n this.clickable = true;\n this.parentIsAnchorTag = true;\n this.parentEl.classList.add(\"ic-card-wrapper-link\");\n this.parentEl.addEventListener(\"focus\", this.parentFocussed);\n this.parentEl.addEventListener(\"blur\", this.parentBlurred);\n }\n removeDisabledFalse(this.disabled, this.el);\n }\n\n componentDidLoad(): void {\n !isSlotUsed(this.el, \"heading\") &&\n onComponentRequiredPropUndefined(\n [{ prop: this.heading, propName: \"heading\" }],\n \"Card\"\n );\n this.updateTheme();\n }\n\n @Listen(\"click\", { capture: true })\n handleHostClick(event: Event): void {\n if (this.disabled) {\n event.stopImmediatePropagation();\n }\n }\n\n @Listen(\"themeChange\", { target: \"document\" })\n themeChangeHandler(ev: CustomEvent): void {\n const theme: IcTheme = ev.detail;\n this.updateTheme(theme.mode);\n }\n\n /\n Sets focus on the card.\n */\n @Method()\n async setFocus(): Promise<void> {\n if (this.el.shadowRoot.querySelector(\"a\")) {\n this.el.shadowRoot.querySelector(\"a\").focus();\n } else if (this.el.shadowRoot.querySelector(\"button\")) {\n this.el.shadowRoot.querySelector(\"button\").focus();\n }\n }\n\n private parentFocussed = (): void => {\n this.isFocussed = true;\n };\n\n private parentBlurred = (): void => {\n this.isFocussed = false;\n };\n\n private updateTheme(newTheme: IcThemeForeground = null): void {\n const foregroundColor = getThemeFromContext(this.el, newTheme \|\| null);\n\n if (foregroundColor !== IcThemeForegroundEnum.Default) {\n this.appearance = foregroundColor;\n }\n }\n\n private toggleExpanded = (): void => {\n this.areaExpanded = !this.areaExpanded;\n };\n\n render() {\n const {\n clickable,\n disabled,\n expandable,\n heading,\n message,\n href,\n hreflang,\n referrerpolicy,\n rel,\n subheading,\n target,\n fullWidth,\n parentIsAnchorTag,\n isFocussed,\n } = this;\n\n const Component = parentIsAnchorTag\n ? \"div\"\n : clickable\n ? this.href === undefined\n ? \"button\"\n : \"a\"\n : \"div\";\n\n const attrs = Component == \"a\" && {\n href: href,\n hrefLang: hreflang,\n referrerPolicy: referrerpolicy,\n rel: rel,\n target: target,\n };\n\n return (\n <Component\n class={{\n [\"card\"]: true,\n [\"clickable\"]: clickable && !disabled,\n [\"disabled\"]: disabled,\n [\"fullwidth\"]: fullWidth,\n [\"focussed\"]: isFocussed,\n [\"dark\"]: this.appearance === IcThemeForegroundEnum.Dark,\n }}\n tabindex={clickable && !parentIsAnchorTag ? 0 : null}\n aria-disabled={disabled ? \"true\" : null}\n disabled={disabled ? true : null}\n {...attrs}\n >\n {isSlotUsed(this.el, \"image-top\") && (\n <div class=\"image-top\">\n <slot name=\"image-top\"></slot>\n </div>\n )}\n <div class=\"card-header\">\n {isSlotUsed(this.el, \"icon\") && (\n <div class=\"icon\">\n <slot name=\"icon\" />\n </div>\n )}\n <div class=\"card-title\">\n <slot name=\"heading\">\n <ic-typography variant=\"h4\">\n <p>{heading}</p>\n </ic-typography>\n </slot>\n </div>\n {isSlotUsed(this.el, \"interaction-button\") && (\n <div class=\"interaction-button\">\n <slot name=\"interaction-button\"></slot>\n </div>\n )}\n </div>\n {(subheading \|\| isSlotUsed(this.el, \"subheading\")) && (\n <div class=\"subheading\">\n <slot name=\"subheading\">\n <ic-typography variant=\"subtitle-small\">\n {subheading}\n </ic-typography>\n </slot>\n </div>\n )}\n {isSlotUsed(this.el, \"adornment\") && (\n <div class=\"adornment\">\n <slot name=\"adornment\"></slot>\n </div>\n )}\n {isSlotUsed(this.el, \"image-mid\") && (\n <div class=\"image-mid\">\n <slot name=\"image-mid\"></slot>\n </div>\n )}\n {(message \|\| isSlotUsed(this.el, \"message\")) && (\n <div\n class={{\n [\"card-message\"]: true,\n }}\n >\n {message && <ic-typography variant=\"body\">{message}</ic-typography>}\n {isSlotUsed(this.el, \"message\") && <slot name=\"message\"></slot>}\n </div>\n )}\n {(isSlotUsed(this.el, \"interaction-controls\") \|\| expandable) && (\n <div class=\"interaction-area\">\n <div class=\"interaction-controls\">\n <slot name=\"interaction-controls\"></slot>\n </div>\n {expandable && (\n <ic-button\n class={{\n [\"toggle-button\"]: true,\n [\"toggle-button-closed\"]: !this.areaExpanded,\n [\"toggle-button-expanded\"]: this.areaExpanded,\n }}\n variant=\"icon\"\n size=\"large\"\n aria-label=\"Toggle expandable area\"\n aria-expanded={this.areaExpanded}\n aria-controls=\"expanded-content-area\"\n onClick={this.toggleExpanded}\n innerHTML={chevronIcon}\n ></ic-button>\n )}\n </div>\n )}\n {isSlotUsed(this.el, \"expanded-content\") && this.areaExpanded && (\n <div class=\"expanded-content\" id=\"expanded-content-area\">\n <slot name=\"expanded-content\"></slot>\n </div>\n )}\n {isSlotUsed(this.el, \"badge\") && <slot name=\"badge\"></slot>}\n </Component>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ic-card.js","mappings":"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","names":[],"sources":["src/components/ic-card/ic-card.css?tag=ic-card&encapsulation=shadow","src/components/ic-card/ic-card.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n display: flex;\n}\n\na {\n text-decoration: none !important;\n color: var(--ic-architechtural-black) !important;\n}\n\nbutton {\n border: none;\n background-color: transparent;\n outline: var(--ic-hc-focus-outline);\n}\n\n.card,\n.card.clickable {\n display: flex;\n flex-direction: column;\n border: var(--ic-border-default);\n border-radius: var(--ic-border-radius);\n box-sizing: border-box;\n padding: var(--ic-space-md);\n text-align: left;\n color: var(--ic-architechtural-black);\n transition: var(--ic-easing-transition-fast);\n width: inherit;\n position: relative;\n}\n\n.dark.card,\n.dark.card.clickable {\n border: var(--ic-border-width) solid var(--ic-architectural-700);\n}\n\n.card.clickable:hover {\n background-color: var(--ic-action-default-bg-hover);\n border: var(--ic-border-hover);\n cursor: pointer;\n}\n\n.card.clickable:focus,\n.card.clickable.focussed {\n background-color: var(--ic-action-default-bg-hover);\n box-shadow: var(--ic-border-focus);\n outline: var(--ic-hc-focus-outline);\n border: var(--ic-border-pressed);\n}\n\n.card.clickable:active {\n background-color: var(--ic-action-default-bg-active);\n box-shadow: var(--ic-border-focus);\n}\n\n.card.disabled {\n border: var(--ic-border-disabled);\n}\n\n.card.fullwidth {\n width: 100%;\n}\n\n.card-header {\n display: flex;\n align-items: center;\n}\n\n.icon {\n display: flex;\n align-items: center;\n padding-right: var(--ic-space-xs);\n}\n\n.card.disabled ::slotted(svg) {\n fill: var(--ic-color-tertiary-text);\n}\n\n.card.clickable .card-title {\n color: var(--ic-hyperlink);\n text-decoration: underline;\n text-decoration-thickness: var(--ic-space-1px);\n}\n\n.card.clickable:hover .card-title,\n.card.clickable:focus .card-title,\n.card.clickable.focussed .card-title {\n display: inline-block;\n border-bottom: 0.25rem solid !important;\n margin-bottom: -0.25rem !important;\n text-decoration: none;\n}\n\n@supports (text-decoration-thickness: 25%) {\n .card.clickable:hover .card-title,\n .card.clickable:focus .card-title,\n .card.clickable.focussed .card-title {\n text-decoration-line: underline;\n text-decoration-thickness: 25%;\n text-underline-offset: 25%;\n border-bottom: 0 !important;\n margin-bottom: 0 !important;\n }\n}\n\n.card.clickable:active .card-title {\n text-decoration: none;\n}\n\n.card.disabled .card-title {\n text-decoration: underline;\n text-decoration-thickness: var(--ic-space-1px);\n text-decoration-color: var(--ic-color-tertiary-text);\n color: var(--ic-color-tertiary-text);\n}\n\n.subheading {\n margin-top: var(--ic-space-xxs);\n}\n\n.adornment {\n margin-top: var(--ic-space-xxs);\n}\n\n.card-message {\n margin-top: var(--ic-space-md);\n align-items: left;\n}\n\n.card.disabled .card-message,\n.card.disabled .subheading {\n color: var(--ic-color-tertiary-text);\n}\n\n.interaction-button {\n margin-left: auto;\n}\n\n.image-top {\n margin-bottom: var(--ic-space-md);\n display: flex;\n justify-content: center;\n}\n\n.image-mid {\n margin-top: var(--ic-space-md);\n display: flex;\n justify-content: center;\n}\n\n.interaction-area {\n display: flex;\n flex-grow: 1;\n gap: var(--ic-space-md);\n margin-top: var(--ic-space-md);\n align-items: flex-end;\n}\n\n.interaction-controls {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: var(--ic-space-sm);\n}\n\n.toggle-button {\n color: var(--ic-action-default);\n width: 2.5rem;\n height: 2.5rem;\n padding: var(--ic-space-xs);\n margin: var(--ic-space-1px) 0;\n min-width: 0;\n cursor: pointer;\n transition: var(--ic-easing-transition-fast);\n border-radius: var(--ic-border-radius);\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n background: none;\n border: none;\n box-sizing: border-box;\n white-space: nowrap;\n vertical-align: middle;\n}\n\n#ic-tooltip-expand-button {\n margin-left: auto;\n position: relative;\n}\n\n.toggle-button:hover,\n.toggle-button:hover:focus {\n background-color: var(--ic-action-default-bg-hover);\n color: var(--ic-action-default-hover);\n}\n\n.toggle-button:focus {\n box-shadow: var(--ic-border-focus);\n}\n\n.toggle-button:active:not(:focus) {\n background-color: var(--ic-action-default-bg-active);\n color: var(--ic-action-default-active);\n}\n\n.toggle-button svg {\n pointer-events: none;\n width: 100% !important;\n height: 100% !important;\n fill: currentcolor !important;\n}\n\n.toggle-button-closed svg {\n transform: rotate(90deg);\n}\n\n.toggle-button-expanded svg {\n transform: rotate(-90deg);\n}\n\n.expanded-content {\n margin-top: var(--ic-space-md);\n}\n\n/ High Contrast /\n@media (forced-colors: active) {\n .card ::slotted(svg) {\n fill: currentcolor;\n }\n\n .card.disabled ::slotted(svg) {\n fill: GrayText !important;\n }\n\n .card.disabled {\n border-color: GrayText !important;\n }\n\n .card.disabled .card-message,\n .card.disabled .subheading,\n .card.disabled .card-title {\n color: GrayText;\n }\n}\n","import {\n Component,\n Element,\n Listen,\n Prop,\n State,\n h,\n Method,\n} from \"@stencil/core\";\nimport {\n onComponentRequiredPropUndefined,\n isSlotUsed,\n getThemeFromContext,\n removeDisabledFalse,\n} from \"../../utils/helpers\";\nimport {\n IcTheme,\n IcThemeForeground,\n IcThemeForegroundEnum,\n} from \"../../utils/types\";\nimport chevronIcon from \"../../assets/chevron-icon.svg\";\n\n/*\n @slot heading - Content will be placed at the top of the card to the right of the icon.\n * @slot message - Content will be placed in the main body of the card.\n * @slot subheading - Content will be placed below the card heading.\n * @slot adornment - Content will be placed below the card subheading.\n * @slot image-top - Content will be placed at the top of the card above all other content.\n * @slot image-mid - Content will be placed below the card heading section.\n * @slot icon - Content will be placed to the left of the card heading.\n * @slot interaction-button - Content will be placed in the top right corner of the heading section.\n * @slot interaction-controls - Content will be placed below the card message.\n * @slot expanded-content - Content will be placed below the interaction controls but will not initially be rendered.\n * @slot badge - Badge component overlaying the top right of the card.\n /\n@Component({\n tag: \"ic-card\",\n styleUrl: \"ic-card.css\",\n shadow: true,\n})\nexport class Card {\n @Element() el: HTMLIcCardElement;\n\n @State() appearance?: IcThemeForeground = \"default\";\n @State() areaExpanded: boolean = false;\n @State() isFocussed: boolean = false;\n @State() parentEl: HTMLElement \| null = null;\n @State() parentIsAnchorTag: boolean = false;\n\n /\n If `true`, the card will be a clickable variant, instead of static.\n /\n @Prop({ mutable: true }) clickable?: boolean = false;\n\n /\n If `true`, the card will be disabled if it is clickable.\n /\n @Prop() disabled?: boolean = false;\n\n /\n If `true`, the card will have an expandable area and expansion toggle button.\n /\n @Prop() expandable?: boolean = false;\n\n /\n If `true`, the card will fill the width of the container.\n /\n @Prop() fullWidth?: boolean = false;\n\n /\n The heading for the card. This is required, unless a slotted heading is used.\n /\n @Prop() heading?: string;\n\n /\n The URL that the clickable card link points to. If set, the clickable card will render as an \"a\" tag, otherwise it will render as a button.\n /\n @Prop() href?: string \| undefined;\n\n /\n The human language of the linked URL.\n /\n @Prop() hreflang?: string = \"\";\n\n /\n The main body message of the card.\n /\n @Prop() message?: 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 subheading for the card.\n /\n @Prop() subheading?: 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 disconnectedCallback(): void {\n if (this.parentIsAnchorTag) {\n this.parentEl.removeEventListener(\"focus\", this.parentFocussed);\n this.parentEl.removeEventListener(\"blur\", this.parentBlurred);\n }\n }\n\n componentWillLoad(): void {\n this.parentEl = this.el.parentElement;\n\n if (this.parentEl.tagName === \"A\") {\n this.clickable = true;\n this.parentIsAnchorTag = true;\n this.parentEl.classList.add(\"ic-card-wrapper-link\");\n this.parentEl.addEventListener(\"focus\", this.parentFocussed);\n this.parentEl.addEventListener(\"blur\", this.parentBlurred);\n }\n removeDisabledFalse(this.disabled, this.el);\n }\n\n componentDidLoad(): void {\n !isSlotUsed(this.el, \"heading\") &&\n onComponentRequiredPropUndefined(\n [{ prop: this.heading, propName: \"heading\" }],\n \"Card\"\n );\n this.updateTheme();\n }\n\n @Listen(\"click\", { capture: true })\n handleHostClick(event: Event): void {\n if (this.disabled) {\n event.stopImmediatePropagation();\n }\n }\n\n @Listen(\"themeChange\", { target: \"document\" })\n themeChangeHandler(ev: CustomEvent): void {\n const theme: IcTheme = ev.detail;\n this.updateTheme(theme.mode);\n }\n\n /\n Sets focus on the card.\n */\n @Method()\n async setFocus(): Promise<void> {\n if (this.el.shadowRoot.querySelector(\"a\")) {\n this.el.shadowRoot.querySelector(\"a\").focus();\n } else if (this.el.shadowRoot.querySelector(\"button\")) {\n this.el.shadowRoot.querySelector(\"button\").focus();\n }\n }\n\n private parentFocussed = (): void => {\n this.isFocussed = true;\n };\n\n private parentBlurred = (): void => {\n this.isFocussed = false;\n };\n\n private updateTheme(newTheme: IcThemeForeground = null): void {\n const foregroundColor = getThemeFromContext(this.el, newTheme \|\| null);\n\n if (foregroundColor !== IcThemeForegroundEnum.Default) {\n this.appearance = foregroundColor;\n }\n }\n\n private toggleExpanded = (): void => {\n this.areaExpanded = !this.areaExpanded;\n };\n\n render() {\n const {\n clickable,\n disabled,\n expandable,\n heading,\n message,\n href,\n hreflang,\n referrerpolicy,\n rel,\n subheading,\n target,\n fullWidth,\n parentIsAnchorTag,\n isFocussed,\n } = this;\n\n const Component = parentIsAnchorTag\n ? \"div\"\n : clickable\n ? this.href === undefined\n ? \"button\"\n : \"a\"\n : \"div\";\n\n const attrs = Component == \"a\" && {\n href: href,\n hrefLang: hreflang,\n referrerPolicy: referrerpolicy,\n rel: rel,\n target: target,\n };\n\n return (\n <Component\n class={{\n [\"card\"]: true,\n [\"clickable\"]: clickable && !disabled,\n [\"disabled\"]: disabled,\n [\"fullwidth\"]: fullWidth,\n [\"focussed\"]: isFocussed,\n [\"dark\"]: this.appearance === IcThemeForegroundEnum.Dark,\n }}\n tabindex={clickable && !parentIsAnchorTag ? 0 : null}\n aria-disabled={disabled ? \"true\" : null}\n disabled={disabled ? true : null}\n {...attrs}\n >\n {isSlotUsed(this.el, \"image-top\") && (\n <div class=\"image-top\">\n <slot name=\"image-top\"></slot>\n </div>\n )}\n <div class=\"card-header\">\n {isSlotUsed(this.el, \"icon\") && (\n <div class=\"icon\">\n <slot name=\"icon\" />\n </div>\n )}\n <div class=\"card-title\">\n <slot name=\"heading\">\n <ic-typography variant=\"h4\">\n <p>{heading}</p>\n </ic-typography>\n </slot>\n </div>\n {isSlotUsed(this.el, \"interaction-button\") && (\n <div class=\"interaction-button\">\n <slot name=\"interaction-button\"></slot>\n </div>\n )}\n </div>\n {(subheading \|\| isSlotUsed(this.el, \"subheading\")) && (\n <div class=\"subheading\">\n <slot name=\"subheading\">\n <ic-typography variant=\"subtitle-small\">\n {subheading}\n </ic-typography>\n </slot>\n </div>\n )}\n {isSlotUsed(this.el, \"adornment\") && (\n <div class=\"adornment\">\n <slot name=\"adornment\"></slot>\n </div>\n )}\n {isSlotUsed(this.el, \"image-mid\") && (\n <div class=\"image-mid\">\n <slot name=\"image-mid\"></slot>\n </div>\n )}\n {(message \|\| isSlotUsed(this.el, \"message\")) && (\n <div\n class={{\n [\"card-message\"]: true,\n }}\n >\n {message && <ic-typography variant=\"body\">{message}</ic-typography>}\n {isSlotUsed(this.el, \"message\") && <slot name=\"message\"></slot>}\n </div>\n )}\n {(isSlotUsed(this.el, \"interaction-controls\") \|\| expandable) && (\n <div class=\"interaction-area\">\n <div class=\"interaction-controls\">\n <slot name=\"interaction-controls\"></slot>\n </div>\n {expandable && (\n <ic-tooltip\n id=\"ic-tooltip-expand-button\"\n label=\"Toggle expandable area\"\n silent\n >\n <button\n class={{\n [\"toggle-button\"]: true,\n [`toggle-button-${\n this.areaExpanded ? \"expanded\" : \"closed\"\n }`]: true,\n }}\n aria-label=\"Toggle expandable area\"\n aria-expanded={`${this.areaExpanded}`}\n aria-controls={\n this.areaExpanded ? \"expanded-content-area\" : null\n }\n onClick={this.toggleExpanded}\n innerHTML={chevronIcon}\n ></button>\n </ic-tooltip>\n )}\n </div>\n )}\n {isSlotUsed(this.el, \"expanded-content\") && this.areaExpanded && (\n <div class=\"expanded-content\" id=\"expanded-content-area\">\n <slot name=\"expanded-content\"></slot>\n </div>\n )}\n {isSlotUsed(this.el, \"badge\") && <slot name=\"badge\"></slot>}\n </Component>\n );\n }\n}\n"],"version":3}

package/dist/components/ic-checkbox-group.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { b as removeDisabledFalse, o as onComponentRequiredPropUndefined, t as getInputDescribedByText, u as hasValidationStatus } from './helpers.js';
+import { a as removeDisabledFalse, o as onComponentRequiredPropUndefined, t as getInputDescribedByText, u as hasValidationStatus } from './helpers.js';
 import { d as defineCustomElement$4 } from './ic-input-label2.js';
 import { d as defineCustomElement$3 } from './ic-input-validation2.js';
 import { d as defineCustomElement$2 } from './ic-typography2.js';

package/dist/components/ic-checkbox.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { b as removeDisabledFalse, n as addFormResetListener, o as onComponentRequiredPropUndefined, p as removeFormResetListener, q as renderHiddenInput, s as removeHiddenInput, i as isSlotUsed, d as isPropDefined } from './helpers.js';
+import { a as removeDisabledFalse, n as addFormResetListener, o as onComponentRequiredPropUndefined, p as removeFormResetListener, q as renderHiddenInput, s as removeHiddenInput, i as isSlotUsed, d as isPropDefined } from './helpers.js';
 import { d as defineCustomElement$2 } from './ic-typography2.js';
 const icCheckboxCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host(.disabled){color:var(--ic-architectural-200);pointer-events:none}.container{display:flex;width:-moz-fit-content;width:fit-content;padding:var(--ic-space-xxs) 0 var(--ic-space-xxs) var(--ic-space-xxs);margin-bottom:var(--ic-space-xxs);align-items:center}:host(.small) .container{margin-bottom:var(--ic-space-xxxs)}.checkbox{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:block;position:relative;top:0;left:0;height:var(--ic-space-lg);width:var(--ic-space-lg);background-color:var(--ic-architectural-white);border:var(--ic-border-width) solid var(--ic-architectural-300);border-radius:var(--ic-border-radius);outline:none;cursor:pointer;transition:var(--ic-easing-transition-fast);flex-shrink:0}:host(.small) .checkbox,:host(.small) .container svg{width:var(--ic-space-md);height:var(--ic-space-md)}:host(.large) .checkbox,:host(.large) .container svg{width:var(--ic-space-xl);height:var(--ic-space-xl)}.checkbox:checked{background-color:var(--ic-action-default);border:var(--ic-border-width) solid var(--ic-action-default);transition:var(--ic-easing-transition-slow)}.checkbox:checked:disabled{background-color:var(--ic-architectural-200)}.checkbox:indeterminate,.checkbox.indeterminate:checked{background-color:var(--ic-architectural-white);border:0.125rem solid var(--ic-action-default)}.checkbox:checked:hover{background-color:var(--ic-action-default-hover)}.checkbox:indeterminate:hover,.checkbox.indeterminate:checked:hover{background-color:var(--ic-action-default-bg-hover-no-alpha);border:0.125rem solid var(--ic-action-default-hover)}.checkbox:checked:active{background-color:var(--ic-action-default-active)}.checkbox:indeterminate:active,.checkbox.indeterminate:checked:active{background-color:var(--ic-action-default-bg-active-no-alpha);border:0.125rem solid var(--ic-action-default-active)}.checkbox:hover{background-color:var(--ic-action-default-bg-hover-no-alpha);box-shadow:0 0 0 0.25rem var(--ic-action-default-bg-hover);border:var(--ic-border-width) solid var(--ic-action-default-hover)}.checkbox:active{background-color:var(--ic-action-default-bg-active-no-alpha);box-shadow:0 0 0 0.25rem var(--ic-action-default-bg-active);border:var(--ic-border-width) solid var(--ic-action-default-active)}.checkbox:focus{box-shadow:var(--ic-border-focus)}.checkbox:disabled{border:var(--ic-border-width) dashed var(--ic-architectural-200)}.checkbox-label{padding-left:var(--ic-space-sm)}.checkbox-label:hover{cursor:pointer}.checkmark{position:relative;right:calc(-1 * var(--ic-space-lg));margin-left:calc(-1 * var(--ic-space-lg));fill:white;z-index:1;background-color:transparent;pointer-events:none;flex-shrink:0}:host(.small) .checkmark{margin-left:calc(-1 * var(--ic-space-md));right:calc(-1 * var(--ic-space-md))}:host(.large) .checkmark{margin-left:calc(-1 * var(--ic-space-xl));right:calc(-1 * var(--ic-space-xl))}.indeterminate-symbol{position:relative;width:0.875rem;height:var(--ic-space-xxxs);right:-1.188rem;margin-left:-0.875rem;z-index:1;background-color:var(--ic-action-default);pointer-events:none;flex-shrink:0}:host(.small) .indeterminate-symbol{width:0.6rem;right:-0.8rem;margin-left:-0.6rem}:host(.large) .indeterminate-symbol{width:1.25rem;right:-1.625rem;margin-left:-1.25rem}.container:hover .indeterminate-symbol{background-color:var(--ic-action-default-hover)}.container:active .indeterminate-symbol{background-color:var(--ic-action-default-active)}.additional-field-wrapper{margin-left:calc(var(--ic-space-md) + var(--ic-space-lg));margin-top:calc(var(--ic-space-sm) / 2)}.branch-corner{color:var(--ic-action-default);height:var(--ic-space-md);width:var(--ic-space-xl);border-radius:0 0 0 0.188rem;border-bottom:0.125rem solid var(--ic-action-default);border-left:0.125rem solid var(--ic-action-default)}.dynamic-container{display:flex;position:relative;margin:var(--ic-space-xxxs) 0 var(--ic-space-xxs) var(--ic-space-md);gap:var(--ic-space-xs)}.dynamic-text{color:var(--ic-action-default);margin-top:calc(var(--ic-space-sm) / 2);margin-bottom:var(--ic-space-xs);border-radius:2%}@media (max-width: 576px){::slotted(ic-text-field){--input-width:100%}}@media (forced-colors: active){.checkbox{-webkit-appearance:revert;-moz-appearance:revert;appearance:revert;transition:none}.checkbox:checked{transition:none}.checkbox:focus-visible{outline:0.125rem solid highlight}.checkbox:disabled:not(:checked){-webkit-appearance:none;-moz-appearance:none;appearance:none;border-color:GrayText}.checkmark{fill:none}.indeterminate-symbol{display:none}}";

package/dist/components/ic-chip.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { b as removeDisabledFalse, o as onComponentRequiredPropUndefined, i as isSlotUsed } from './helpers.js';
+import { a as removeDisabledFalse, o as onComponentRequiredPropUndefined, i as isSlotUsed } from './helpers.js';
 import { d as defineCustomElement$3 } from './ic-tooltip2.js';
 import { d as defineCustomElement$2 } from './ic-typography2.js';

package/dist/components/ic-data-entity.js CHANGED Viewed

@@ -13,14 +13,11 @@ const DataEntity = /*@__PURE__*/ proxyCustomElement(class DataEntity extends HTM
         this.small = false;
     }
     render() {
-        const { heading, small, size } = this;
-        const children = this.el.children;
+        const { el, heading, small, size } = this;
         if (small || size === "small") {
-            for (let i = 0; i < children.length; i++) {
-                children[i].setAttribute("size", "small");
-            }
+            Array.from(el.children).forEach((child) => child.setAttribute("size", "small"));
         }
-        return (h(Host, { class: { ["small"]: small || size === "small" } }, h("div", { class: "heading", id: "data-entity-heading" }, h("slot", { name: "heading" }, h("ic-typography", { variant: "h3" }, heading))), h("div", { class: "divider" }), h("ul", { "aria-labelledby": "data-entity-heading", class: "rows" }, h("slot", null))));
+        return (h(Host, { class: { small: small || size === "small" } }, h("div", { class: "heading", id: "data-entity-heading" }, h("slot", { name: "heading" }, h("ic-typography", { variant: "h3" }, heading))), h("div", { class: "divider" }), h("ul", { "aria-labelledby": "data-entity-heading", class: "rows" }, h("slot", null))));
     }
     get el() { return this; }
     static get style() { return icDataEntityCss; }

package/dist/components/ic-data-entity.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ic-data-entity.js","mappings":";;;AAAA,MAAM,eAAe,GAAG,8yFAA8yF;;MCWzzF,UAAU;;;;;;oBAWW,SAAS;qBAKf,KAAK;;IAE/B,MAAM;QACJ,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC;~~QAEtC~~,~~MAAM,QAAQ,GAAG,~~IAAI,~~CAAC,EAAE,CAAC,QAAQ,CAAC;QAElC,IAAI,~~KAAK,IAAI,IAAI,KAAK,OAAO,EAAE;YAC7B,KAAK,~~IAAI,~~CAAC,~~GAAG~~,CAAC,EAAE,CAAC,~~GAAG,~~QAAQ,CAAC,~~MAAM~~,~~EAAE~~,CAAC,~~EAAE~~,~~EAAE;gBACxC~~,~~QAAQ~~,~~CAAC~~,CAAC,~~CAAC,CAAC,~~YAAY,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;~~aAC3C~~;~~SACF;~~QAED,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,EAAE,~~CAAC~~,~~OAAO~~,~~GAAG,~~KAAK,IAAI,IAAI,KAAK,OAAO,EAAE,~~IACnD~~,WAAK,KAAK,EAAC,SAAS,EAAC,EAAE,EAAC,qBAAqB,IAC3C,YAAM,IAAI,EAAC,SAAS,IAClB,qBAAe,OAAO,EAAC,IAAI,IAAE,OAAO,CAAiB,CAChD,CACH,EACN,WAAK,KAAK,EAAC,SAAS,GAAG,EACvB,6BAAoB,qBAAqB,EAAC,KAAK,EAAC,MAAM,IACpD,eAAa,CACV,CACA,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/ic-data-entity/ic-data-entity.css?tag=ic-data-entity&encapsulation=shadow","src/components/ic-data-entity/ic-data-entity.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n display: block;\n}\n\n.rows {\n display: flex;\n flex-direction: column;\n gap: var(--ic-space-md);\n}\n\n:host(.small) .rows {\n gap: var(--ic-space-xs);\n}\n\n.divider {\n margin-top: var(--ic-space-lg);\n margin-bottom: var(--ic-space-md);\n height: var(--ic-border-width);\n background-color: var(--ic-architectural-300);\n}\n\n:host(.small) .divider {\n margin-top: var(--ic-space-sm);\n margin-bottom: var(--ic-space-xs);\n}\n\n@media (forced-colors: active) {\n .divider {\n background-color: canvastext;\n }\n}\n","import { Component, Element, Host, h, Prop } from \"@stencil/core\";\nimport { IcSizesNoLarge } from \"../../utils/types\";\n\n/*\n @slot heading - Content will be placed at the top of the data entity.\n /\n@Component({\n tag: \"ic-data-entity\",\n styleUrl: \"ic-data-entity.css\",\n shadow: true,\n})\nexport class DataEntity {\n @Element() el: HTMLIcDataEntityElement;\n\n /\n The title for the data entity.\n /\n @Prop() heading: string;\n\n /\n The size of the data entity component.\n /\n @Prop() size?: IcSizesNoLarge = \"default\";\n\n /\n @deprecated This prop should not be used anymore. Set prop `size` to \"small\" instead.\n */\n @Prop() small?: boolean = false;\n\n render() {\n const { heading, small, size } = this;\n\n ~~const children = this.el.children;\n\n~~ if (small \|\| size === \"small\") {\n ~~for~~ (~~let i = 0; i <~~ children.~~length; i++~~) {\n ~~children[i]~~.setAttribute(\"size\", \"small\");\n }\n }\n\n return (\n <Host class={{ ~~[\"~~small~~\"]~~: small \|\| size === \"small\" }}>\n <div class=\"heading\" id=\"data-entity-heading\">\n <slot name=\"heading\">\n <ic-typography variant=\"h3\">{heading}</ic-typography>\n </slot>\n </div>\n <div class=\"divider\" />\n <ul aria-labelledby=\"data-entity-heading\" class=\"rows\">\n <slot></slot>\n </ul>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ic-data-entity.js","mappings":";;;AAAA,MAAM,eAAe,GAAG,8yFAA8yF;;MCWzzF,UAAU;;;;;;oBAWW,SAAS;qBAKf,KAAK;;IAE/B,MAAM;QACJ,MAAM,EAAE,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC;QAE1C,IAAI,KAAK,IAAI,IAAI,KAAK,OAAO,EAAE;YAC7B,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC,KAAK,KACpC,KAAK,CAAC,YAAY,CAAC,MAAM,EAAE,OAAO,CAAC,CACpC,CAAC;SACH;QAED,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,IAAI,IAAI,KAAK,OAAO,EAAE,IAC/C,WAAK,KAAK,EAAC,SAAS,EAAC,EAAE,EAAC,qBAAqB,IAC3C,YAAM,IAAI,EAAC,SAAS,IAClB,qBAAe,OAAO,EAAC,IAAI,IAAE,OAAO,CAAiB,CAChD,CACH,EACN,WAAK,KAAK,EAAC,SAAS,GAAG,EACvB,6BAAoB,qBAAqB,EAAC,KAAK,EAAC,MAAM,IACpD,eAAa,CACV,CACA,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/ic-data-entity/ic-data-entity.css?tag=ic-data-entity&encapsulation=shadow","src/components/ic-data-entity/ic-data-entity.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n display: block;\n}\n\n.rows {\n display: flex;\n flex-direction: column;\n gap: var(--ic-space-md);\n}\n\n:host(.small) .rows {\n gap: var(--ic-space-xs);\n}\n\n.divider {\n margin-top: var(--ic-space-lg);\n margin-bottom: var(--ic-space-md);\n height: var(--ic-border-width);\n background-color: var(--ic-architectural-300);\n}\n\n:host(.small) .divider {\n margin-top: var(--ic-space-sm);\n margin-bottom: var(--ic-space-xs);\n}\n\n@media (forced-colors: active) {\n .divider {\n background-color: canvastext;\n }\n}\n","import { Component, Element, Host, h, Prop } from \"@stencil/core\";\nimport { IcSizesNoLarge } from \"../../utils/types\";\n\n/*\n @slot heading - Content will be placed at the top of the data entity.\n /\n@Component({\n tag: \"ic-data-entity\",\n styleUrl: \"ic-data-entity.css\",\n shadow: true,\n})\nexport class DataEntity {\n @Element() el: HTMLIcDataEntityElement;\n\n /\n The title for the data entity.\n /\n @Prop() heading: string;\n\n /\n The size of the data entity component.\n /\n @Prop() size?: IcSizesNoLarge = \"default\";\n\n /\n @deprecated This prop should not be used anymore. Set prop `size` to \"small\" instead.\n */\n @Prop() small?: boolean = false;\n\n render() {\n const { el, heading, small, size } = this;\n\n if (small \|\| size === \"small\") {\n Array.from(el.children).forEach((child) =>\n child.setAttribute(\"size\", \"small\")\n );\n }\n\n return (\n <Host class={{ small: small \|\| size === \"small\" }}>\n <div class=\"heading\" id=\"data-entity-heading\">\n <slot name=\"heading\">\n <ic-typography variant=\"h3\">{heading}</ic-typography>\n </slot>\n </div>\n <div class=\"divider\" />\n <ul aria-labelledby=\"data-entity-heading\" class=\"rows\">\n <slot></slot>\n </ul>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/ic-data-row.js CHANGED Viewed

@@ -17,19 +17,13 @@ const DataRow = /*@__PURE__*/ proxyCustomElement(class DataRow extends HTMLEleme
             });
             this.resizeObserver.observe(this.el);
         };
-        /**
-         * Renders the label either as a ic-typography or slot. Slotted content takes precedence.
-         * @param label string - label of value
-         * @returns HTMLDivElement - returns label as slot or ic-typography with label as textContent
-         */
-        this.renderLabel = (label) => {
-            if (isSlotUsed(this.el, "label")) {
-                return (h("div", { class: "label" }, h("slot", { name: "label" })));
-            }
-            else if (label) {
-                return (h("div", { class: "label" }, h("ic-typography", { variant: this.entitySize === "xs" ? "label" : "subtitle-large" }, label)));
-            }
-            return null;
+        this.renderCellContent = (cell) => {
+            const isValue = cell === "value";
+            return (h("div", { class: cell }, isSlotUsed(this.el, cell) ? (h("slot", { name: cell })) : (h("ic-typography", { variant: isValue
+                    ? "body"
+                    : this.entitySize === "xs"
+                        ? "label"
+                        : "subtitle-large" }, isValue ? this.value : this.label))));
         };
         this.deviceSize = DEVICE_SIZES.XL;
         this.entitySize = undefined;
@@ -39,9 +33,8 @@ const DataRow = /*@__PURE__*/ proxyCustomElement(class DataRow extends HTMLEleme
         this.value = undefined;
     }
     disconnectedCallback() {
-        if (this.resizeObserver !== null) {
-            this.resizeObserver.disconnect();
-        }
+        var _a;
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     componentWillLoad() {
         this.deviceSize = getCurrentDeviceSize();
@@ -50,36 +43,29 @@ const DataRow = /*@__PURE__*/ proxyCustomElement(class DataRow extends HTMLEleme
     }
     componentDidLoad() {
         checkResizeObserver(this.runResizeObserver);
-        if (this.hasEndComponent) {
+        if (this.hasEndComponent)
             this.labelEndComponent();
-        }
     }
     checkLabelAbove() {
         var _a;
-        const rowSize = (_a = this.el.shadowRoot.querySelector(".data")) === null || _a === void 0 ? void 0 : _a.clientWidth;
+        const rowSize = ((_a = this.el.shadowRoot.querySelector(".data")) === null || _a === void 0 ? void 0 : _a.clientWidth) + 46;
         if (rowSize) {
-            if (rowSize + 46 < DEVICE_SIZES.S) {
-                this.entitySize = "xs";
-            }
-            else if (rowSize + 46 < DEVICE_SIZES.M) {
-                this.entitySize = "m";
-            }
-            else {
-                this.entitySize = "xl";
-            }
+            this.entitySize =
+                rowSize < DEVICE_SIZES.S ? "xs" : rowSize < DEVICE_SIZES.M ? "m" : "xl";
         }
     }
     labelEndComponent() {
-        const component = this.el.shadowRoot.querySelectorAll("slot[name=end-component]");
-        component.forEach((child) => child.setAttribute("aria-label", "for " + this.label + " row"));
+        this.el.shadowRoot
+            .querySelectorAll("slot[name=end-component]")
+            .forEach((child) => child.setAttribute("aria-label", `for ${this.label} row`));
     }
     render() {
-        const { label, value, small, size } = this;
+        const { el, entitySize, hasEndComponent, label, renderCellContent, size, small, value, } = this;
         return (h(Host, { class: {
                 ["small"]: small || size === "small",
-                ["breakpoint-medium"]: this.entitySize === "m",
-                ["breakpoint-xs"]: this.entitySize === "xs",
-            }, role: "listitem" }, h("div", { class: "data" }, h("div", { class: "text-cells" }, this.renderLabel(label), h("div", { class: "value" }, h("slot", { name: "value" }, h("ic-typography", { variant: "body" }, value)))), this.hasEndComponent && (h("div", { class: "end-component" }, h("div", { role: "cell" }, h("slot", { name: "end-component" }))))), h("div", { class: "divider" })));
+                ["breakpoint-medium"]: entitySize === "m",
+                ["breakpoint-xs"]: entitySize === "xs",
+            }, role: "listitem" }, h("div", { class: "data" }, h("div", { class: "text-cells" }, (isSlotUsed(el, "label") || label) && renderCellContent("label"), (isSlotUsed(el, "value") || value) && renderCellContent("value")), hasEndComponent && (h("div", { class: "end-component" }, h("slot", { name: "end-component" })))), h("div", { class: "divider" })));
     }
     get el() { return this; }
     static get style() { return icDataRowCss; }

package/dist/components/ic-data-row.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ic-data-row.js","mappings":";;;;AAAA,MAAM,YAAY,GAAG,yjHAAyjH;;MCoBjkH,OAAO;;;;;QACV,oBAAe,GAAY,KAAK,CAAC;QACjC,mBAAc,GAAmB,IAAI,CAAC;~~QA8CtC~~,sBAAiB,GAAG;YAC1B,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC;gBACvC,IAAI,CAAC,eAAe,EAAE,CAAC;aACxB,CAAC,CAAC;YAEH,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;SACtC,CAAC~~;;;;;;QAoBM~~,~~gBAAW~~,GAAG,CAAC,~~KAAa~~;~~YAClC~~,~~IAAI~~,~~UAAU~~,~~CAAC~~,IAAI,~~CAAC~~,~~EAAE,EAAE,~~OAAO,CAAC~~,EAAE~~;~~gBAChC~~,QACE,WAAK,KAAK,~~EAAC~~,~~OAAO~~,~~IAChB~~,~~YAAM~~,IAAI,~~EAAC~~,~~OAAO~~,~~GAAQ~~,~~CACtB~~,~~EACN;aACH;iBAAM~~,IAAI,~~KAAK,~~EAAE~~;gBAChB~~,~~QACE~~,~~WAAK~~,~~KAAK~~,~~EAAC~~,OAAO,~~IAChB~~,~~qBACE,~~OAAO,~~EAAE~~,IAAI,CAAC,UAAU,KAAK,IAAI,~~GAAG~~,OAAO,GAAG,~~gBAAgB~~,~~IAE7D~~,KAAK,~~CACQ~~,~~CACZ~~,~~EACN;aACH;YAED~~,~~OAAO~~,~~IAAI~~,~~CAAC~~;~~SACb~~,CAAC;~~0BAxF4B~~,YAAY,CAAC,EAAE;;;oBAWb,SAAS;qBAKf,KAAK;;;IAO/B,oBAAoB;QAClB,~~IAAI~~,IAAI,CAAC,cAAc,~~KAAK~~,~~IAAI,EAAE;YAChC,IAAI,CAAC,cAAc,CAAC,~~UAAU,EAAE,CAAC;~~SAClC~~;~~KACF;~~IAED,iBAAiB;QACf,IAAI,CAAC,UAAU,GAAG,oBAAoB,EAAE,CAAC;QACzC,IAAI,CAAC,eAAe,GAAG,cAAc,CAAC,IAAI,CAAC,EAAE,EAAE,eAAe,CAAC,CAAC;QAChE,IAAI,CAAC,eAAe,EAAE,CAAC;KACxB;IAED,gBAAgB;QACd,mBAAmB,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;QAC5C,IAAI,IAAI,CAAC,eAAe~~,EAAE~~;~~YACxB~~,IAAI,CAAC,iBAAiB,EAAE,CAAC;~~SAC1B~~;~~KACF;~~IAUO,eAAe;;QACrB,MAAM,OAAO,GAAG,MAAA,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,0CAAE,WAAW,CAAC;~~QACvE~~,IAAI,OAAO,EAAE;YACX,IAAI,~~OAAO~~,~~GAAG~~,~~EAAE~~,GAAG,YAAY,CAAC,CAAC,~~EAAE;gBACjC~~,IAAI,~~CAAC,UAAU,~~GAAG,~~IAAI,CAAC;aACxB;iBAAM,IAAI,~~OAAO,GAAG,~~EAAE,GAAG,~~YAAY,CAAC,CAAC,~~EAAE;gBACxC,IAAI,CAAC,UAAU,~~GAAG,GAAG,~~CAAC;aACvB;iBAAM;gBACL,IAAI,CAAC,UAAU,~~GAAG,IAAI,CAAC;~~aACxB~~;~~SACF;~~KACF;~~IA6BO~~,iBAAiB;QACvB,~~MAAM,SAAS,GAAG,~~IAAI,CAAC,EAAE,CAAC,UAAU,~~CAAC,~~gBAAgB,~~CACnD~~,0BAA0B,~~CAC3B,~~CAAC;~~QAEF~~,~~SAAS,CAAC,~~OAAO,CAAC,CAAC,~~KAAkB~~,~~KACnC~~,KAAK,CAAC,YAAY,CAAC,YAAY,EAAE,~~MAAM~~,~~GAAG,~~IAAI,CAAC,KAAK,~~GAAG,~~MAAM,CAAC,~~CAC/D~~,CAAC;~~KACH~~;IAED,MAAM;QACJ,MAAM,EAAE,~~KAAK~~,~~EAAE~~,~~KAAK~~,~~EAAE~~,KAAK,~~EAAE~~,IAAI,~~EAAE~~,GAAG,IAAI,CAAC;~~QAE3C~~,QACE,EAAC,IAAI,IACH,KAAK,EAAE;gBACL,CAAC,OAAO,GAAG,KAAK,IAAI,IAAI,KAAK,OAAO;gBACpC,CAAC,mBAAmB,GAAG,~~IAAI,CAAC,~~UAAU,KAAK,GAAG;~~gBAC9C~~,CAAC,eAAe,GAAG,~~IAAI,CAAC,~~UAAU,KAAK,IAAI;~~aAC5C~~,EACD,IAAI,EAAC,UAAU,IAEf,WAAK,KAAK,EAAC,MAAM,IACf,WAAK,KAAK,EAAC,YAAY,IACpB,~~IAAI,~~CAAC,~~WAAW~~,CAAC,~~KAAK~~,CAAC,~~EACxB~~,~~WAAK~~,KAAK,~~EAAC~~,OAAO,~~IAChB~~,~~YAAM~~,~~IAAI~~,~~EAAC~~,~~OAAO~~,~~IAChB~~,~~qBAAe~~,OAAO,~~EAAC~~,~~MAAM~~,~~IAAE~~,KAAK,~~CAAiB~~,~~CAChD~~,~~CACH~~,~~CACF~~,EACL,~~IAAI,CAAC,~~eAAe,~~KACnB~~,WAAK,KAAK,EAAC,eAAe,IACxB,~~WAAK,IAAI,EAAC,MAAM,IACd,~~YAAM,IAAI,EAAC,eAAe,GAAQ,CAC9B,~~CACF,~~CACP,CACG,EACN,WAAK,KAAK,EAAC,SAAS,GAAG,CAClB,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/ic-data-row/ic-data-row.css?tag=ic-data-row&encapsulation=shadow","src/components/ic-data-row/ic-data-row.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n position: relative;\n display: block;\n}\n\n.data {\n display: flex;\n align-items: center;\n}\n\n.text-cells {\n display: flex;\n flex-grow: 1;\n min-width: 0;\n}\n\n.label {\n width: 12.5rem;\n min-width: 12.5rem;\n margin-right: var(--ic-space-md);\n color: var(--ic-color-tertiary-text);\n}\n\n.value {\n flex-grow: 1;\n}\n\nslot[name=\"value\"]::slotted(ic-text-field[readonly][hide-label]) {\n margin-top: calc(var(--ic-space-xs) * -1);\n}\n\nslot[name=\"value\"]::slotted(ic-text-field[small][readonly][hide-label]) {\n margin-top: calc(var(--ic-space-xxs) * -1);\n}\n\nslot[name=\"value\"]::slotted(ic-text-field[readonly][hide-label][rows]) {\n margin-top: calc(var(--ic-space-xxs) * -1 - var(--ic-space-xxxs));\n}\n\n.end-component {\n width: fit-content;\n margin-left: 3.5rem;\n}\n\n.divider {\n margin-top: var(--ic-space-md);\n height: var(--ic-border-width);\n background-color: var(--ic-architectural-300);\n}\n\n:host(.small) .divider {\n margin-top: var(--ic-space-xs);\n}\n\n:host(.breakpoint-medium) .label {\n width: 10rem;\n min-width: 10rem;\n}\n\n:host(.breakpoint-xs) .text-cells {\n flex-direction: column;\n}\n\n:host(.breakpoint-xs) .label {\n width: 8rem;\n margin-bottom: var(--ic-space-xs);\n}\n\n:host(.breakpoint-xs) .value {\n max-width: 95%;\n}\n\n:host(.breakpoint-xs) .end-component {\n margin-left: 0;\n}\n\n@media (forced-colors: active) {\n .divider {\n background-color: canvastext;\n }\n}\n","import { Component, Element, Host, Prop, h, State } from \"@stencil/core\";\nimport {\n checkResizeObserver,\n DEVICE_SIZES,\n getCurrentDeviceSize,\n isSlotUsed,\n slotHasContent,\n} from \"../../utils/helpers\";\nimport { IcSizesNoLarge } from \"../../utils/types\";\n\n/*\n @slot label - Content will be rendered in the leftmost cell.\n * @slot value - Content will be rendered to the right of the label.\n * @slot end-component - Content will be displayed in the rightmost cell.\n /\n@Component({\n tag: \"ic-data-row\",\n styleUrl: \"ic-data-row.css\",\n shadow: true,\n})\nexport class DataRow {\n private hasEndComponent: boolean = false;\n private resizeObserver: ResizeObserver = null;\n\n @Element() el: HTMLIcDataRowElement;\n\n @State() deviceSize: number = DEVICE_SIZES.XL;\n @State() entitySize: \"xl\" \| \"m\" \| \"xs\";\n\n /\n The label in the leftmost cell of the row.\n /\n @Prop() label: string;\n\n /\n The size of the data row component.\n /\n @Prop() size?: IcSizesNoLarge = \"default\";\n\n /\n @deprecated This prop should not be used anymore. Set prop `size` to \"small\" instead.\n /\n @Prop() small?: boolean = false;\n\n /\n The value of the middle (right if no end-component supplied) cell of the row.\n /\n @Prop() value: string;\n\n disconnectedCallback(): void {\n ~~if (~~this.resizeObserver ~~!== null) {\n this.resizeObserver.~~disconnect();\n ~~}\n~~ }\n\n componentWillLoad(): void {\n this.deviceSize = getCurrentDeviceSize();\n this.hasEndComponent = slotHasContent(this.el, \"end-component\");\n this.checkLabelAbove();\n }\n\n componentDidLoad(): void {\n checkResizeObserver(this.runResizeObserver);\n if (this.hasEndComponent) ~~{\n~~ this.labelEndComponent();\n ~~}\n~~ }\n\n private runResizeObserver = () => {\n this.resizeObserver = new ResizeObserver(() => {\n this.checkLabelAbove();\n });\n\n this.resizeObserver.observe(this.el);\n };\n\n private checkLabelAbove() {\n const rowSize = this.el.shadowRoot.querySelector(\".data\")?.clientWidth;\n if (rowSize) {\n if (rowSize ~~+ 46~~ < DEVICE_SIZES.S) ~~{\n this.entitySize~~ = \"xs\"~~;\n }~~ ~~else~~ ~~if (~~rowSize ~~+ 46~~ < DEVICE_SIZES.M) ~~{\n this.entitySize~~ = \"m\"~~;\n }~~ ~~else~~ {\~~n this.entitySize = \~~"xl\";\n ~~}\n~~ }\n }\n\n /\n ~~Renders~~ ~~the~~ label ~~either~~ as a ~~ic-typography or slot. Slotted content takes precedence.\~~n * ~~@param~~ ~~label~~ ~~string~~ - ~~label of~~ value\n * ~~@returns HTMLDivElement - returns label as slot or ic-typography with label as textContent~~\n */\n private ~~renderLabel~~ = ~~(label: string) =>~~ {\n ~~if (~~isSlotUsed(this.el, ~~\"label\"~~)) ~~{\n return~~ (\n ~~<div class=\"label\">\n~~ <slot name~~=\"label\"~~></slot>\n ~~</div>\n~~ )~~;\n }~~ ~~else~~ if (~~label) {~~\n ~~return (\n <div class=\"label\">\n~~ <ic-typography\n variant={this.entitySize === \"xs\" ? \"label\" : \"subtitle-large\"}\n >\n {label}\n </ic-typography>\n ~~</div>\n~~ )~~;\n~~ }\n\n ~~return null~~;\n };\n\n private labelEndComponent(): void {\n ~~const component =~~ this.el.shadowRoot.querySelectorAll(\~~n \~~"slot[name=end-component]\"\n )~~;\n~~\n ~~component~~.forEach((child~~: HTMLElement~~) =>\n child.setAttribute(\"aria-label\", \"for ~~\" +~~ this.label ~~+ \"~~ row\")\n );\n }\n\n render() {\n const { label, value~~, small, size~~ } = this;\n\n return (\n <Host\n class={{\n [\"small\"]: small \|\| size === \"small\",\n [\"breakpoint-medium\"]: ~~this.~~entitySize === \"m\",\n [\"breakpoint-xs\"]: ~~this.~~entitySize === \"xs\",\n }}\n role=\"listitem\"\n >\n <div class=\"data\">\n <div class=\"text-cells\">\n {~~this.renderLabel~~(label)}\n ~~<div~~ ~~class=\~~"value\"~~>\n <slot~~ ~~name=\"~~value\"~~>\n <ic-typography variant=\"body~~\"~~>{value~~}~~</ic-typography>\~~n ~~</slot>\n </div>\n~~ </div>\n {~~this.~~hasEndComponent && (\n <div class=\"end-component\">\n <~~div role=\"cell\">\n <~~slot name=\"end-component\"></slot>\n ~~</div>\n~~ </div>\n )}\n </div>\n <div class=\"divider\" />\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ic-data-row.js","mappings":";;;;AAAA,MAAM,YAAY,GAAG,yjHAAyjH;;MCoBjkH,OAAO;;;;;QACV,oBAAe,GAAY,KAAK,CAAC;QACjC,mBAAc,GAAmB,IAAI,CAAC;QA0CtC,sBAAiB,GAAG;YAC1B,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC;gBACvC,IAAI,CAAC,eAAe,EAAE,CAAC;aACxB,CAAC,CAAC;YAEH,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;SACtC,CAAC;QAUM,sBAAiB,GAAG,CAAC,IAAuB;YAClD,MAAM,OAAO,GAAG,IAAI,KAAK,OAAO,CAAC;YACjC,QACE,WAAK,KAAK,EAAE,IAAI,IACb,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,IAAI,CAAC,IACxB,YAAM,IAAI,EAAE,IAAI,GAAS,KAEzB,qBACE,OAAO,EACL,OAAO;sBACH,MAAM;sBACN,IAAI,CAAC,UAAU,KAAK,IAAI;0BACxB,OAAO;0BACP,gBAAgB,IAGrB,OAAO,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CACpB,CACjB,CACG,EACN;SACH,CAAC;0BA3E4B,YAAY,CAAC,EAAE;;;oBAWb,SAAS;qBAKf,KAAK;;;IAO/B,oBAAoB;;QAClB,MAAA,IAAI,CAAC,cAAc,0CAAE,UAAU,EAAE,CAAC;KACnC;IAED,iBAAiB;QACf,IAAI,CAAC,UAAU,GAAG,oBAAoB,EAAE,CAAC;QACzC,IAAI,CAAC,eAAe,GAAG,cAAc,CAAC,IAAI,CAAC,EAAE,EAAE,eAAe,CAAC,CAAC;QAChE,IAAI,CAAC,eAAe,EAAE,CAAC;KACxB;IAED,gBAAgB;QACd,mBAAmB,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;QAC5C,IAAI,IAAI,CAAC,eAAe;YAAE,IAAI,CAAC,iBAAiB,EAAE,CAAC;KACpD;IAUO,eAAe;;QACrB,MAAM,OAAO,GAAG,CAAA,MAAA,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,0CAAE,WAAW,IAAG,EAAE,CAAC;QAC5E,IAAI,OAAO,EAAE;YACX,IAAI,CAAC,UAAU;gBACb,OAAO,GAAG,YAAY,CAAC,CAAC,GAAG,IAAI,GAAG,OAAO,GAAG,YAAY,CAAC,CAAC,GAAG,GAAG,GAAG,IAAI,CAAC;SAC3E;KACF;IAyBO,iBAAiB;QACvB,IAAI,CAAC,EAAE,CAAC,UAAU;aACf,gBAAgB,CAAC,0BAA0B,CAAC;aAC5C,OAAO,CAAC,CAAC,KAAK,KACb,KAAK,CAAC,YAAY,CAAC,YAAY,EAAE,OAAO,IAAI,CAAC,KAAK,MAAM,CAAC,CAC1D,CAAC;KACL;IAED,MAAM;QACJ,MAAM,EACJ,EAAE,EACF,UAAU,EACV,eAAe,EACf,KAAK,EACL,iBAAiB,EACjB,IAAI,EACJ,KAAK,EACL,KAAK,GACN,GAAG,IAAI,CAAC;QAET,QACE,EAAC,IAAI,IACH,KAAK,EAAE;gBACL,CAAC,OAAO,GAAG,KAAK,IAAI,IAAI,KAAK,OAAO;gBACpC,CAAC,mBAAmB,GAAG,UAAU,KAAK,GAAG;gBACzC,CAAC,eAAe,GAAG,UAAU,KAAK,IAAI;aACvC,EACD,IAAI,EAAC,UAAU,IAEf,WAAK,KAAK,EAAC,MAAM,IACf,WAAK,KAAK,EAAC,YAAY,IACpB,CAAC,UAAU,CAAC,EAAE,EAAE,OAAO,CAAC,IAAI,KAAK,KAAK,iBAAiB,CAAC,OAAO,CAAC,EAChE,CAAC,UAAU,CAAC,EAAE,EAAE,OAAO,CAAC,IAAI,KAAK,KAAK,iBAAiB,CAAC,OAAO,CAAC,CAC7D,EACL,eAAe,KACd,WAAK,KAAK,EAAC,eAAe,IACxB,YAAM,IAAI,EAAC,eAAe,GAAQ,CAC9B,CACP,CACG,EACN,WAAK,KAAK,EAAC,SAAS,GAAG,CAClB,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/ic-data-row/ic-data-row.css?tag=ic-data-row&encapsulation=shadow","src/components/ic-data-row/ic-data-row.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n position: relative;\n display: block;\n}\n\n.data {\n display: flex;\n align-items: center;\n}\n\n.text-cells {\n display: flex;\n flex-grow: 1;\n min-width: 0;\n}\n\n.label {\n width: 12.5rem;\n min-width: 12.5rem;\n margin-right: var(--ic-space-md);\n color: var(--ic-color-tertiary-text);\n}\n\n.value {\n flex-grow: 1;\n}\n\nslot[name=\"value\"]::slotted(ic-text-field[readonly][hide-label]) {\n margin-top: calc(var(--ic-space-xs) * -1);\n}\n\nslot[name=\"value\"]::slotted(ic-text-field[small][readonly][hide-label]) {\n margin-top: calc(var(--ic-space-xxs) * -1);\n}\n\nslot[name=\"value\"]::slotted(ic-text-field[readonly][hide-label][rows]) {\n margin-top: calc(var(--ic-space-xxs) * -1 - var(--ic-space-xxxs));\n}\n\n.end-component {\n width: fit-content;\n margin-left: 3.5rem;\n}\n\n.divider {\n margin-top: var(--ic-space-md);\n height: var(--ic-border-width);\n background-color: var(--ic-architectural-300);\n}\n\n:host(.small) .divider {\n margin-top: var(--ic-space-xs);\n}\n\n:host(.breakpoint-medium) .label {\n width: 10rem;\n min-width: 10rem;\n}\n\n:host(.breakpoint-xs) .text-cells {\n flex-direction: column;\n}\n\n:host(.breakpoint-xs) .label {\n width: 8rem;\n margin-bottom: var(--ic-space-xs);\n}\n\n:host(.breakpoint-xs) .value {\n max-width: 95%;\n}\n\n:host(.breakpoint-xs) .end-component {\n margin-left: 0;\n}\n\n@media (forced-colors: active) {\n .divider {\n background-color: canvastext;\n }\n}\n","import { Component, Element, Host, Prop, h, State } from \"@stencil/core\";\nimport {\n checkResizeObserver,\n DEVICE_SIZES,\n getCurrentDeviceSize,\n isSlotUsed,\n slotHasContent,\n} from \"../../utils/helpers\";\nimport { IcSizesNoLarge } from \"../../utils/types\";\n\n/*\n @slot label - Content will be rendered in the leftmost cell.\n * @slot value - Content will be rendered to the right of the label.\n * @slot end-component - Content will be displayed in the rightmost cell.\n /\n@Component({\n tag: \"ic-data-row\",\n styleUrl: \"ic-data-row.css\",\n shadow: true,\n})\nexport class DataRow {\n private hasEndComponent: boolean = false;\n private resizeObserver: ResizeObserver = null;\n\n @Element() el: HTMLIcDataRowElement;\n\n @State() deviceSize: number = DEVICE_SIZES.XL;\n @State() entitySize: \"xl\" \| \"m\" \| \"xs\";\n\n /\n The label in the leftmost cell of the row.\n /\n @Prop() label: string;\n\n /\n The size of the data row component.\n /\n @Prop() size?: IcSizesNoLarge = \"default\";\n\n /\n @deprecated This prop should not be used anymore. Set prop `size` to \"small\" instead.\n /\n @Prop() small?: boolean = false;\n\n /\n The value of the middle (right if no end-component supplied) cell of the row.\n */\n @Prop() value: string;\n\n disconnectedCallback(): void {\n this.resizeObserver?.disconnect();\n }\n\n componentWillLoad(): void {\n this.deviceSize = getCurrentDeviceSize();\n this.hasEndComponent = slotHasContent(this.el, \"end-component\");\n this.checkLabelAbove();\n }\n\n componentDidLoad(): void {\n checkResizeObserver(this.runResizeObserver);\n if (this.hasEndComponent) this.labelEndComponent();\n }\n\n private runResizeObserver = () => {\n this.resizeObserver = new ResizeObserver(() => {\n this.checkLabelAbove();\n });\n\n this.resizeObserver.observe(this.el);\n };\n\n private checkLabelAbove() {\n const rowSize = this.el.shadowRoot.querySelector(\".data\")?.clientWidth + 46;\n if (rowSize) {\n this.entitySize =\n rowSize < DEVICE_SIZES.S ? \"xs\" : rowSize < DEVICE_SIZES.M ? \"m\" : \"xl\";\n }\n }\n\n private renderCellContent = (cell: \"label\" \| \"value\") => {\n const isValue = cell === \"value\";\n return (\n <div class={cell}>\n {isSlotUsed(this.el, cell) ? (\n <slot name={cell}></slot>\n ) : (\n <ic-typography\n variant={\n isValue\n ? \"body\"\n : this.entitySize === \"xs\"\n ? \"label\"\n : \"subtitle-large\"\n }\n >\n {isValue ? this.value : this.label}\n </ic-typography>\n )}\n </div>\n );\n };\n\n private labelEndComponent(): void {\n this.el.shadowRoot\n .querySelectorAll(\"slot[name=end-component]\")\n .forEach((child) =>\n child.setAttribute(\"aria-label\", `for ${this.label} row`)\n );\n }\n\n render() {\n const {\n el,\n entitySize,\n hasEndComponent,\n label,\n renderCellContent,\n size,\n small,\n value,\n } = this;\n\n return (\n <Host\n class={{\n [\"small\"]: small \|\| size === \"small\",\n [\"breakpoint-medium\"]: entitySize === \"m\",\n [\"breakpoint-xs\"]: entitySize === \"xs\",\n }}\n role=\"listitem\"\n >\n <div class=\"data\">\n <div class=\"text-cells\">\n {(isSlotUsed(el, \"label\") \|\| label) && renderCellContent(\"label\")}\n {(isSlotUsed(el, \"value\") \|\| value) && renderCellContent(\"value\")}\n </div>\n {hasEndComponent && (\n <div class=\"end-component\">\n <slot name=\"end-component\"></slot>\n </div>\n )}\n </div>\n <div class=\"divider\" />\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/ic-input-component-container2.js CHANGED Viewed

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 import { a as IcInformationStatus } from './types.js';
 import { i as isSlotUsed, z as successIcon } from './helpers.js';
-const icInputComponentContainerCss = "ic-input-component-container{display:flex;border:var(--ic-border-width) solid\n    var(--border-color, var(--ic-architectural-400));border-radius:var(--ic-border-radius);transition:var(--ic-easing-transition-slow);height:2.5rem;width:var(--input-width, 20rem);padding:var(--ic-space-1px);background-color:var(--ic-architectural-white);box-sizing:border-box;fill:var(--ic-architectural-400);outline:none}ic-input-component-container.fullwidth{width:100%}ic-input-component-container.disabled,ic-input-component-container.disabled:hover{border:var(--ic-border-width) dashed var(--ic-architectural-200)}ic-input-component-container.readonly,ic-input-component-container.readonly:hover{border:none;padding:0}ic-input-component-container.error{border:var(--ic-error-border-default);padding:0}ic-input-component-container.error:hover{border:var(--ic-error-border-hover)}ic-input-component-container.error:focus-within{border:var(--ic-error-border-pressed)}ic-input-component-container.warning{border:var(--ic-warning-border-default);padding:0}ic-input-component-container.warning:hover{border:var(--ic-warning-border-hover)}ic-input-component-container.warning:focus-within{border:var(--ic-warning-border-pressed)}ic-input-component-container.success{border:var(--ic-success-border-default);padding:0}ic-input-component-container.success:hover{border:var(--ic-success-border-hover)}ic-input-component-container.success:focus-within{border:var(--ic-success-border-pressed)}ic-input-component-container.small{height:var(--ic-space-xl)}ic-input-component-container.multiline{height:auto}ic-input-component-container .icon-container{margin-top:var(--ic-space-xxs);margin-left:0.438rem;display:flex;align-items:center}ic-input-component-container.multiline .icon-container,ic-input-component-container.multiline.small .icon-container{margin-top:0.375rem;display:block}ic-input-component-container.readonly .icon-container{margin-left:-0.313rem}ic-input-component-container.disabled ::-moz-placeholder{display:none}ic-input-component-container.disabled ::placeholder{display:none}ic-input-component-container .inline-success{margin:var(--ic-space-xs) 0.375rem;display:flex;align-items:center}ic-input-component-container.dark:hover{--border-color:var(--ic-architectural-400)}ic-input-component-container .inline-success>svg{fill:var(--ic-status-success);height:1.25rem;width:1.25rem}ic-input-component-container:hover{border:var(--ic-border-hover);color:var(--ic-action-dark-hover)}ic-input-component-container:focus{border:var(--ic-border-pressed)}.focus-indicator{display:flex;width:100%;margin:-0.125rem;padding:0.125rem;border-radius:var(--ic-border-radius);transition:var(--ic-easing-transition-fast)}.focus-indicator:focus-within,.focus-indicator-enabled{box-shadow:var(--ic-border-focus)}.focus-indicator.dark:focus-within{box-shadow:var(--ic-border-focus)}@media (forced-colors: active){ic-input-component-container,.focus-indicator{transition:none}ic-input-component-container:focus-within{border:var(--ic-border-width) solid Highlight;outline:0.125rem solid Highlight}ic-input-component-container.disabled,ic-input-component-container.disabled:hover{border:var(--ic-border-width) dashed GrayText}}";
+const icInputComponentContainerCss = "ic-input-component-container{display:flex;border:var(--ic-border-width) solid\n    var(--border-color, var(--ic-architectural-400));border-radius:var(--ic-border-radius);transition:var(--ic-easing-transition-slow);height:2.5rem;width:var(--input-width, 20rem);padding:var(--ic-space-1px);background-color:var(--ic-architectural-white);box-sizing:border-box;fill:var(--ic-architectural-400);outline:none}ic-input-component-container.fullwidth{width:100%}ic-input-component-container.disabled,ic-input-component-container.disabled:hover{border:var(--ic-border-width) dashed var(--ic-architectural-200)}ic-input-component-container.readonly,ic-input-component-container.readonly:hover{border:none;padding:0}ic-input-component-container.error{border:var(--ic-error-border-default);padding:0}ic-input-component-container.error:hover{border:var(--ic-error-border-hover)}ic-input-component-container.error:focus-within{border:var(--ic-error-border-pressed)}ic-input-component-container.warning{border:var(--ic-warning-border-default);padding:0}ic-input-component-container.warning:hover{border:var(--ic-warning-border-hover)}ic-input-component-container.warning:focus-within{border:var(--ic-warning-border-pressed)}ic-input-component-container.success{border:var(--ic-success-border-default);padding:0}ic-input-component-container.success:hover{border:var(--ic-success-border-hover)}ic-input-component-container.success:focus-within{border:var(--ic-success-border-pressed)}ic-input-component-container.small{height:var(--ic-space-xl)}ic-input-component-container.large{height:var(--ic-space-xxl)}ic-input-component-container.multiline{height:auto}ic-input-component-container .icon-container{margin-top:var(--ic-space-xxs);margin-left:0.438rem;display:flex;align-items:center}ic-input-component-container.multiline .icon-container,ic-input-component-container.multiline.small .icon-container{margin-top:0.375rem;display:block}ic-input-component-container.readonly .icon-container{margin-left:-0.313rem}ic-input-component-container.disabled ::-moz-placeholder{display:none}ic-input-component-container.disabled ::placeholder{display:none}ic-input-component-container .inline-success{margin:var(--ic-space-xs) 0.375rem;display:flex;align-items:center}ic-input-component-container.dark:hover{--border-color:var(--ic-architectural-400)}ic-input-component-container .inline-success>svg{fill:var(--ic-status-success);height:1.25rem;width:1.25rem}ic-input-component-container:hover{border:var(--ic-border-hover);color:var(--ic-action-dark-hover)}ic-input-component-container:focus{border:var(--ic-border-pressed)}.focus-indicator{display:flex;width:100%;margin:-0.125rem;padding:0.125rem;border-radius:var(--ic-border-radius);transition:var(--ic-easing-transition-fast)}.focus-indicator:focus-within,.focus-indicator-enabled{box-shadow:var(--ic-border-focus)}.focus-indicator.dark:focus-within{box-shadow:var(--ic-border-focus)}@media (forced-colors: active){ic-input-component-container,.focus-indicator{transition:none}ic-input-component-container:focus-within{border:var(--ic-border-width) solid Highlight;outline:0.125rem solid Highlight}ic-input-component-container.disabled,ic-input-component-container.disabled:hover{border:var(--ic-border-width) dashed GrayText}}";
 const InputComponentContainer = /*@__PURE__*/ proxyCustomElement(class InputComponentContainer extends HTMLElement {
     constructor() {
@@ -20,19 +20,20 @@ const InputComponentContainer = /*@__PURE__*/ proxyCustomElement(class InputComp
         this.validationStatus = "";
     }
     render() {
-        const { small, size, validationStatus, disabled, readonly, multiLine, fullWidth, dark, appearance, validationInline, } = this;
+        const { size, small, validationStatus, disabled, readonly, multiLine, fullWidth, dark, appearance, validationInline, } = this;
         const hasValidationStatus = this.validationStatus !== "" && !this.disabled && !this.readonly
             ? true
             : false;
         return (h(Host, { class: {
-                ["small"]: small || size === "small",
+                small: small,
+                [`${size}`]: true,
                 [validationStatus]: hasValidationStatus,
-                ["disabled"]: disabled,
-                ["readonly"]: readonly,
+                disabled: disabled,
+                readonly: readonly,
                 ["multiline"]: multiLine,
                 ["fullwidth"]: fullWidth,
                 ["dark"]: dark || appearance === "dark",
-            } }, h("div", { class: {
+            }, "aria-disabled": disabled && `${disabled}` }, h("div", { class: {
                 "focus-indicator": true,
                 dark: dark || appearance === "dark",
             } }, isSlotUsed(this.el, "left-icon") && (h("div", { class: {

package/dist/components/ic-input-component-container2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ic-input-component-container2.js","mappings":";;;;AAAA,MAAM,4BAA4B,GAAG,~~6nGAA6nG~~;;~~MCiBrpG~~,uBAAuB;;;;0BAMQ,SAAS;oBAK1B,KAAK;wBAKF,KAAK;yBAKJ,KAAK;yBAKL,KAAK;wBAKN,KAAK;~~oBAKD~~,SAAS;~~qBAKf~~,KAAK;gCAKK,KAAK;gCAKc,EAAE;;IAEzD,MAAM;QACJ,MAAM,EACJ,KAAK,EACL,~~IAAI,EACJ,~~gBAAgB,EAChB,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,SAAS,EACT,IAAI,EACJ,UAAU,EACV,gBAAgB,GACjB,GAAG,IAAI,CAAC;QACT,MAAM,mBAAmB,GACvB,IAAI,CAAC,gBAAgB,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ;cAC5D,IAAI;cACJ,KAAK,CAAC;~~QACZ~~,QACE,EAAC,IAAI,IACH,KAAK,EAAE;gBACL,~~CAAC~~,~~OAAO~~,~~GAAG,~~KAAK,~~IAAI~~,IAAI,~~KAAK~~,~~OAAO~~;~~gBACpC~~,CAAC,gBAAgB,GAAG,mBAAmB;gBACvC,~~CAAC~~,~~UAAU~~,~~GAAG,~~QAAQ;~~gBACtB~~,~~CAAC~~,~~UAAU~~,~~GAAG,~~QAAQ;~~gBACtB~~,CAAC,WAAW,GAAG,SAAS;gBACxB,CAAC,WAAW,GAAG,SAAS;gBACxB,CAAC,MAAM,GAAG,IAAI,IAAI,UAAU,KAAK,MAAM;aACxC,~~IAED~~,WACE,KAAK,EAAE;gBACL,iBAAiB,EAAE,IAAI;gBACvB,IAAI,EAAE,IAAI,IAAI,UAAU,KAAK,MAAM;aACpC,IAEA,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,WAAW,CAAC,KAC/B,WACE,KAAK,EAAE;gBACL,CAAC,gBAAgB,GAAG,IAAI;aACzB,IAED,YAAM,IAAI,EAAC,WAAW,GAAG,CACrB,CACP,EACD,eAAa,EAEZ,gBAAgB;YACf,gBAAgB,KAAK,mBAAmB,CAAC,OAAO,KAC9C,YACE,KAAK,EAAE;gBACL,CAAC,gBAAgB,GAAG,IAAI;aACzB,EACD,SAAS,EAAE,WAAW,GACtB,CACH,CACC,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/ic-input-component-container/ic-input-component-container.css?tag=ic-input-component-container","src/components/ic-input-component-container/ic-input-component-container.tsx"],"sourcesContent":["ic-input-component-container {\n /*\n @prop --border-color: Border colour of the input component container\n /\n\n display: flex;\n border: var(--ic-border-width) solid\n var(--border-color, var(--ic-architectural-400));\n border-radius: var(--ic-border-radius);\n transition: var(--ic-easing-transition-slow);\n height: 2.5rem;\n width: var(--input-width, 20rem);\n padding: var(--ic-space-1px);\n background-color: var(--ic-architectural-white);\n box-sizing: border-box;\n fill: var(--ic-architectural-400);\n outline: none;\n}\n\nic-input-component-container.fullwidth {\n width: 100%;\n}\n\nic-input-component-container.disabled,\nic-input-component-container.disabled:hover {\n border: var(--ic-border-width) dashed var(--ic-architectural-200);\n}\n\nic-input-component-container.readonly,\nic-input-component-container.readonly:hover {\n border: none;\n padding: 0;\n}\n\nic-input-component-container.error {\n border: var(--ic-error-border-default);\n padding: 0;\n}\n\nic-input-component-container.error:hover {\n border: var(--ic-error-border-hover);\n}\n\nic-input-component-container.error:focus-within {\n border: var(--ic-error-border-pressed);\n}\n\nic-input-component-container.warning {\n border: var(--ic-warning-border-default);\n padding: 0;\n}\n\nic-input-component-container.warning:hover {\n border: var(--ic-warning-border-hover);\n}\n\nic-input-component-container.warning:focus-within {\n border: var(--ic-warning-border-pressed);\n}\n\nic-input-component-container.success {\n border: var(--ic-success-border-default);\n padding: 0;\n}\n\nic-input-component-container.success:hover {\n border: var(--ic-success-border-hover);\n}\n\nic-input-component-container.success:focus-within {\n border: var(--ic-success-border-pressed);\n}\n\nic-input-component-container.small {\n height: var(--ic-space-xl);\n}\n\nic-input-component-container.multiline {\n height: auto;\n}\n\nic-input-component-container .icon-container {\n margin-top: var(--ic-space-xxs);\n margin-left: 0.438rem;\n display: flex;\n align-items: center;\n}\n\nic-input-component-container.multiline .icon-container,\nic-input-component-container.multiline.small .icon-container {\n margin-top: 0.375rem;\n display: block;\n}\n\nic-input-component-container.readonly .icon-container {\n margin-left: -0.313rem;\n}\n\nic-input-component-container.disabled ::placeholder {\n display: none;\n}\n\nic-input-component-container .inline-success {\n margin: var(--ic-space-xs) 0.375rem;\n display: flex;\n align-items: center;\n}\n\nic-input-component-container.dark:hover {\n --border-color: var(--ic-architectural-400);\n}\n\nic-input-component-container .inline-success > svg {\n fill: var(--ic-status-success);\n height: 1.25rem;\n width: 1.25rem;\n}\n\nic-input-component-container:hover {\n border: var(--ic-border-hover);\n color: var(--ic-action-dark-hover);\n}\n\nic-input-component-container:focus {\n border: var(--ic-border-pressed);\n}\n\n.focus-indicator {\n display: flex;\n width: 100%;\n margin: -0.125rem;\n padding: 0.125rem;\n border-radius: var(--ic-border-radius);\n transition: var(--ic-easing-transition-fast);\n}\n\n.focus-indicator:focus-within,\n.focus-indicator-enabled {\n box-shadow: var(--ic-border-focus);\n}\n\n.focus-indicator.dark:focus-within {\n box-shadow: var(--ic-border-focus);\n}\n\n@media (forced-colors: active) {\n / Styles here only apply to Forced Colors Mode /\n ic-input-component-container,\n .focus-indicator {\n transition: none;\n }\n\n ic-input-component-container:focus-within {\n border: var(--ic-border-width) solid Highlight;\n outline: 0.125rem solid Highlight;\n }\n\n ic-input-component-container.disabled,\n ic-input-component-container.disabled:hover {\n border: var(--ic-border-width) dashed GrayText;\n }\n}\n","import { Component, Element, Host, Prop, h } from \"@stencil/core\";\n\nimport {\n IcInformationStatus,\n IcInformationStatusOrEmpty,\n ~~IcSizesNoLarge~~,\n} from \"../../utils/types\";\nimport successIcon from \"../../assets/success-icon.svg\";\nimport { isSlotUsed } from \"../../utils/helpers\";\n\n/\n @slot left-icon - Content will be placed to the left of the input.\n /\n@Component({\n tag: \"ic-input-component-container\",\n styleUrl: \"ic-input-component-container.css\",\n})\nexport class InputComponentContainer {\n @Element() el: HTMLIcInputComponentContainerElement;\n\n /\n The appearance of the input component container.\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 component container will fill the width of the container it is in.\n /\n @Prop() fullWidth: boolean = false;\n\n /\n If `true`, the input component container will allow for multiple lines.\n /\n @Prop() multiLine: boolean = false;\n\n /\n If `true`, the readonly state will be set.\n /\n @Prop() readonly: boolean = false;\n\n /\n The size of the input component container component.\n /\n @Prop() size?: ~~IcSizesNoLarge~~ = \"default\";\n\n /\n @deprecated This prop should not be used anymore. Set prop `size` to \"small\" instead.\n /\n @Prop() small?: boolean = false;\n\n /\n If `true`, the validation will display inline.\n /\n @Prop() validationInline: boolean = false;\n\n /\n The validation status of the input component container - e.g. 'error' \| 'warning' \| 'success'.\n */\n @Prop() validationStatus: IcInformationStatusOrEmpty = \"\";\n\n render() {\n const {\n ~~small~~,\n ~~size~~,\n validationStatus,\n disabled,\n readonly,\n multiLine,\n fullWidth,\n dark,\n appearance,\n validationInline,\n } = this;\n const hasValidationStatus =\n this.validationStatus !== \"\" && !this.disabled && !this.readonly\n ? true\n : false;\n return (\n <Host\n class={{\n ~~[\"~~small~~\"]~~: small \|\| size ~~=== \"small\"~~,\n [validationStatus]: hasValidationStatus,\n ~~[\"~~disabled~~\"]~~: disabled,\n ~~[\"~~readonly~~\"]~~: readonly,\n [\"multiline\"]: multiLine,\n [\"fullwidth\"]: fullWidth,\n [\"dark\"]: dark \|\| appearance === \"dark\",\n }}\n >\n <div\n class={{\n \"focus-indicator\": true,\n dark: dark \|\| appearance === \"dark\",\n }}\n >\n {isSlotUsed(this.el, \"left-icon\") && (\n <div\n class={{\n [\"icon-container\"]: true,\n }}\n >\n <slot name=\"left-icon\" />\n </div>\n )}\n <slot></slot>\n\n {validationInline &&\n validationStatus === IcInformationStatus.Success && (\n <span\n class={{\n [\"inline-success\"]: true,\n }}\n innerHTML={successIcon}\n />\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ic-input-component-container2.js","mappings":";;;;AAAA,MAAM,4BAA4B,GAAG,2rGAA2rG;;MCiBntG,uBAAuB;;;;0BAMQ,SAAS;oBAK1B,KAAK;wBAKF,KAAK;yBAKJ,KAAK;yBAKL,KAAK;wBAKN,KAAK;oBAKR,SAAS;qBAKR,KAAK;gCAKK,KAAK;gCAKc,EAAE;;IAEzD,MAAM;QACJ,MAAM,EACJ,IAAI,EACJ,KAAK,EACL,gBAAgB,EAChB,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,SAAS,EACT,IAAI,EACJ,UAAU,EACV,gBAAgB,GACjB,GAAG,IAAI,CAAC;QACT,MAAM,mBAAmB,GACvB,IAAI,CAAC,gBAAgB,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ;cAC5D,IAAI;cACJ,KAAK,CAAC;QAEZ,QACE,EAAC,IAAI,IACH,KAAK,EAAE;gBACL,KAAK,EAAE,KAAK;gBACZ,CAAC,GAAG,IAAI,EAAE,GAAG,IAAI;gBACjB,CAAC,gBAAgB,GAAG,mBAAmB;gBACvC,QAAQ,EAAE,QAAQ;gBAClB,QAAQ,EAAE,QAAQ;gBAClB,CAAC,WAAW,GAAG,SAAS;gBACxB,CAAC,WAAW,GAAG,SAAS;gBACxB,CAAC,MAAM,GAAG,IAAI,IAAI,UAAU,KAAK,MAAM;aACxC,mBACc,QAAQ,IAAI,GAAG,QAAQ,EAAE,IAExC,WACE,KAAK,EAAE;gBACL,iBAAiB,EAAE,IAAI;gBACvB,IAAI,EAAE,IAAI,IAAI,UAAU,KAAK,MAAM;aACpC,IAEA,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,WAAW,CAAC,KAC/B,WACE,KAAK,EAAE;gBACL,CAAC,gBAAgB,GAAG,IAAI;aACzB,IAED,YAAM,IAAI,EAAC,WAAW,GAAG,CACrB,CACP,EACD,eAAa,EAEZ,gBAAgB;YACf,gBAAgB,KAAK,mBAAmB,CAAC,OAAO,KAC9C,YACE,KAAK,EAAE;gBACL,CAAC,gBAAgB,GAAG,IAAI;aACzB,EACD,SAAS,EAAE,WAAW,GACtB,CACH,CACC,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/ic-input-component-container/ic-input-component-container.css?tag=ic-input-component-container","src/components/ic-input-component-container/ic-input-component-container.tsx"],"sourcesContent":["ic-input-component-container {\n /*\n @prop --border-color: Border colour of the input component container\n /\n\n display: flex;\n border: var(--ic-border-width) solid\n var(--border-color, var(--ic-architectural-400));\n border-radius: var(--ic-border-radius);\n transition: var(--ic-easing-transition-slow);\n height: 2.5rem;\n width: var(--input-width, 20rem);\n padding: var(--ic-space-1px);\n background-color: var(--ic-architectural-white);\n box-sizing: border-box;\n fill: var(--ic-architectural-400);\n outline: none;\n}\n\nic-input-component-container.fullwidth {\n width: 100%;\n}\n\nic-input-component-container.disabled,\nic-input-component-container.disabled:hover {\n border: var(--ic-border-width) dashed var(--ic-architectural-200);\n}\n\nic-input-component-container.readonly,\nic-input-component-container.readonly:hover {\n border: none;\n padding: 0;\n}\n\nic-input-component-container.error {\n border: var(--ic-error-border-default);\n padding: 0;\n}\n\nic-input-component-container.error:hover {\n border: var(--ic-error-border-hover);\n}\n\nic-input-component-container.error:focus-within {\n border: var(--ic-error-border-pressed);\n}\n\nic-input-component-container.warning {\n border: var(--ic-warning-border-default);\n padding: 0;\n}\n\nic-input-component-container.warning:hover {\n border: var(--ic-warning-border-hover);\n}\n\nic-input-component-container.warning:focus-within {\n border: var(--ic-warning-border-pressed);\n}\n\nic-input-component-container.success {\n border: var(--ic-success-border-default);\n padding: 0;\n}\n\nic-input-component-container.success:hover {\n border: var(--ic-success-border-hover);\n}\n\nic-input-component-container.success:focus-within {\n border: var(--ic-success-border-pressed);\n}\n\nic-input-component-container.small {\n height: var(--ic-space-xl);\n}\n\nic-input-component-container.large {\n height: var(--ic-space-xxl);\n}\n\nic-input-component-container.multiline {\n height: auto;\n}\n\nic-input-component-container .icon-container {\n margin-top: var(--ic-space-xxs);\n margin-left: 0.438rem;\n display: flex;\n align-items: center;\n}\n\nic-input-component-container.multiline .icon-container,\nic-input-component-container.multiline.small .icon-container {\n margin-top: 0.375rem;\n display: block;\n}\n\nic-input-component-container.readonly .icon-container {\n margin-left: -0.313rem;\n}\n\nic-input-component-container.disabled ::placeholder {\n display: none;\n}\n\nic-input-component-container .inline-success {\n margin: var(--ic-space-xs) 0.375rem;\n display: flex;\n align-items: center;\n}\n\nic-input-component-container.dark:hover {\n --border-color: var(--ic-architectural-400);\n}\n\nic-input-component-container .inline-success > svg {\n fill: var(--ic-status-success);\n height: 1.25rem;\n width: 1.25rem;\n}\n\nic-input-component-container:hover {\n border: var(--ic-border-hover);\n color: var(--ic-action-dark-hover);\n}\n\nic-input-component-container:focus {\n border: var(--ic-border-pressed);\n}\n\n.focus-indicator {\n display: flex;\n width: 100%;\n margin: -0.125rem;\n padding: 0.125rem;\n border-radius: var(--ic-border-radius);\n transition: var(--ic-easing-transition-fast);\n}\n\n.focus-indicator:focus-within,\n.focus-indicator-enabled {\n box-shadow: var(--ic-border-focus);\n}\n\n.focus-indicator.dark:focus-within {\n box-shadow: var(--ic-border-focus);\n}\n\n@media (forced-colors: active) {\n / Styles here only apply to Forced Colors Mode /\n ic-input-component-container,\n .focus-indicator {\n transition: none;\n }\n\n ic-input-component-container:focus-within {\n border: var(--ic-border-width) solid Highlight;\n outline: 0.125rem solid Highlight;\n }\n\n ic-input-component-container.disabled,\n ic-input-component-container.disabled:hover {\n border: var(--ic-border-width) dashed GrayText;\n }\n}\n","import { Component, Element, Host, Prop, h } from \"@stencil/core\";\n\nimport {\n IcInformationStatus,\n IcInformationStatusOrEmpty,\n IcSizes,\n} from \"../../utils/types\";\nimport successIcon from \"../../assets/success-icon.svg\";\nimport { isSlotUsed } from \"../../utils/helpers\";\n\n/\n @slot left-icon - Content will be placed to the left of the input.\n /\n@Component({\n tag: \"ic-input-component-container\",\n styleUrl: \"ic-input-component-container.css\",\n})\nexport class InputComponentContainer {\n @Element() el: HTMLIcInputComponentContainerElement;\n\n /\n The appearance of the input component container.\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 component container will fill the width of the container it is in.\n /\n @Prop() fullWidth: boolean = false;\n\n /\n If `true`, the input component container will allow for multiple lines.\n /\n @Prop() multiLine: boolean = false;\n\n /\n If `true`, the readonly state will be set.\n /\n @Prop() readonly: boolean = false;\n\n /\n The size of the input component container component.\n /\n @Prop() size?: IcSizes = \"default\";\n\n /\n @deprecated This prop should not be used anymore. Set prop `size` to \"small\" instead.\n /\n @Prop() small?: boolean = false;\n\n /\n If `true`, the validation will display inline.\n /\n @Prop() validationInline: boolean = false;\n\n /\n The validation status of the input component container - e.g. 'error' \| 'warning' \| 'success'.\n */\n @Prop() validationStatus: IcInformationStatusOrEmpty = \"\";\n\n render() {\n const {\n size,\n small,\n validationStatus,\n disabled,\n readonly,\n multiLine,\n fullWidth,\n dark,\n appearance,\n validationInline,\n } = this;\n const hasValidationStatus =\n this.validationStatus !== \"\" && !this.disabled && !this.readonly\n ? true\n : false;\n\n return (\n <Host\n class={{\n small: small,\n [`${size}`]: true,\n [validationStatus]: hasValidationStatus,\n disabled: disabled,\n readonly: readonly,\n [\"multiline\"]: multiLine,\n [\"fullwidth\"]: fullWidth,\n [\"dark\"]: dark \|\| appearance === \"dark\",\n }}\n aria-disabled={disabled && `${disabled}`}\n >\n <div\n class={{\n \"focus-indicator\": true,\n dark: dark \|\| appearance === \"dark\",\n }}\n >\n {isSlotUsed(this.el, \"left-icon\") && (\n <div\n class={{\n [\"icon-container\"]: true,\n }}\n >\n <slot name=\"left-icon\" />\n </div>\n )}\n <slot></slot>\n\n {validationInline &&\n validationStatus === IcInformationStatus.Success && (\n <span\n class={{\n [\"inline-success\"]: true,\n }}\n innerHTML={successIcon}\n />\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/ic-link2.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { O as OpenInNew } from './OpenInNew.js';
-import { a as inheritAttributes, g as getThemeFromContext, I as IC_INHERITED_ARIA } from './helpers.js';
+import { b as inheritAttributes, g as getThemeFromContext, I as IC_INHERITED_ARIA } from './helpers.js';
 import { I as IcThemeForegroundEnum } from './types.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-decoration-thickness: 25%){: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:25%;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)}";

package/dist/components/ic-menu-item2.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { d as isPropDefined, b as removeDisabledFalse, o as onComponentRequiredPropUndefined, i as isSlotUsed, k as getParentElement } from './helpers.js';
+import { d as isPropDefined, a as removeDisabledFalse, o as onComponentRequiredPropUndefined, i as isSlotUsed, k as getParentElement } from './helpers.js';
 import { c as checkIcon } from './check-icon.js';
 import { c as chevronIcon } from './chevron-icon.js';
 import { d as defineCustomElement$4 } from './ic-button2.js';

package/dist/components/ic-menu2.js CHANGED Viewed

@@ -6,7 +6,7 @@ import { d as defineCustomElement$3 } from './ic-loading-indicator2.js';
 import { c as createPopper, d as defineCustomElement$2 } from './ic-tooltip2.js';
 import { d as defineCustomElement$1 } from './ic-typography2.js';
-const icMenuCss = "html.sc-ic-menu{line-height:1.15;-webkit-text-size-adjust:100%}body.sc-ic-menu{margin:0}main.sc-ic-menu{display:block}h1.sc-ic-menu{font-size:2em;margin:0.67em 0}hr.sc-ic-menu{box-sizing:content-box;height:0;overflow:visible}pre.sc-ic-menu{font-family:monospace, monospace;font-size:1em}a.sc-ic-menu{background-color:transparent}abbr[title].sc-ic-menu{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b.sc-ic-menu,strong.sc-ic-menu{font-weight:bolder}code.sc-ic-menu,kbd.sc-ic-menu,samp.sc-ic-menu{font-family:monospace, monospace;font-size:1em}small.sc-ic-menu{font-size:80%}sub.sc-ic-menu,sup.sc-ic-menu{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub.sc-ic-menu{bottom:-0.25em}sup.sc-ic-menu{top:-0.5em}img.sc-ic-menu{border-style:none}button.sc-ic-menu,input.sc-ic-menu,optgroup.sc-ic-menu,select.sc-ic-menu,textarea.sc-ic-menu{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button.sc-ic-menu,input.sc-ic-menu{overflow:visible}button.sc-ic-menu,select.sc-ic-menu{text-transform:none}button.sc-ic-menu,[type=\"button\"].sc-ic-menu,[type=\"reset\"].sc-ic-menu,[type=\"submit\"].sc-ic-menu{-webkit-appearance:button}button.sc-ic-menu::-moz-focus-inner,[type=\"button\"].sc-ic-menu::-moz-focus-inner,[type=\"reset\"].sc-ic-menu::-moz-focus-inner,[type=\"submit\"].sc-ic-menu::-moz-focus-inner{border-style:none;padding:0}button.sc-ic-menu:-moz-focusring,[type=\"button\"].sc-ic-menu:-moz-focusring,[type=\"reset\"].sc-ic-menu:-moz-focusring,[type=\"submit\"].sc-ic-menu:-moz-focusring{outline:1px dotted ButtonText}fieldset.sc-ic-menu{padding:0.35em 0.75em 0.625em}legend.sc-ic-menu{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress.sc-ic-menu{vertical-align:baseline}textarea.sc-ic-menu{overflow:auto}[type=\"checkbox\"].sc-ic-menu,[type=\"radio\"].sc-ic-menu{box-sizing:border-box;padding:0}[type=\"number\"].sc-ic-menu::-webkit-inner-spin-button,[type=\"number\"].sc-ic-menu::-webkit-outer-spin-button{height:auto}[type=\"search\"].sc-ic-menu{-webkit-appearance:textfield;outline-offset:-2px}[type=\"search\"].sc-ic-menu::-webkit-search-decoration{-webkit-appearance:none}.sc-ic-menu::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details.sc-ic-menu{display:block}summary.sc-ic-menu{display:list-item}template.sc-ic-menu{display:none}[hidden].sc-ic-menu{display:none}html.sc-ic-menu,body.sc-ic-menu,div.sc-ic-menu,span.sc-ic-menu,applet.sc-ic-menu,object.sc-ic-menu,iframe.sc-ic-menu,h1.sc-ic-menu,h2.sc-ic-menu,h3.sc-ic-menu,h4.sc-ic-menu,h5.sc-ic-menu,h6.sc-ic-menu,p.sc-ic-menu,blockquote.sc-ic-menu,pre.sc-ic-menu,a.sc-ic-menu,abbr.sc-ic-menu,acronym.sc-ic-menu,address.sc-ic-menu,big.sc-ic-menu,cite.sc-ic-menu,code.sc-ic-menu,del.sc-ic-menu,dfn.sc-ic-menu,em.sc-ic-menu,img.sc-ic-menu,ins.sc-ic-menu,kbd.sc-ic-menu,q.sc-ic-menu,s.sc-ic-menu,samp.sc-ic-menu,small.sc-ic-menu,strike.sc-ic-menu,strong.sc-ic-menu,sub.sc-ic-menu,sup.sc-ic-menu,tt.sc-ic-menu,var.sc-ic-menu,b.sc-ic-menu,u.sc-ic-menu,i.sc-ic-menu,center.sc-ic-menu,dl.sc-ic-menu,dt.sc-ic-menu,dd.sc-ic-menu,ol.sc-ic-menu,ul.sc-ic-menu,li.sc-ic-menu,fieldset.sc-ic-menu,form.sc-ic-menu,label.sc-ic-menu,legend.sc-ic-menu,table.sc-ic-menu,caption.sc-ic-menu,tbody.sc-ic-menu,tfoot.sc-ic-menu,thead.sc-ic-menu,tr.sc-ic-menu,th.sc-ic-menu,td.sc-ic-menu,article.sc-ic-menu,aside.sc-ic-menu,canvas.sc-ic-menu,details.sc-ic-menu,embed.sc-ic-menu,figure.sc-ic-menu,figcaption.sc-ic-menu,footer.sc-ic-menu,header.sc-ic-menu,hgroup.sc-ic-menu,menu.sc-ic-menu,nav.sc-ic-menu,output.sc-ic-menu,ruby.sc-ic-menu,section.sc-ic-menu,summary.sc-ic-menu,time.sc-ic-menu,mark.sc-ic-menu,audio.sc-ic-menu,video.sc-ic-menu{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}@media (prefers-reduced-motion: no-preference){.open.sc-ic-menu-h .menu.sc-ic-menu{transition:max-height var(--ic-transition-duration-slow)}}.sc-ic-menu-h{border-radius:var(--ic-border-radius);max-height:0;width:var(--input-width, 20rem);color:var(--ic-color-primary-text);background-color:var(--ic-architectural-white);position:relative;z-index:var(--ic-z-index-menu);box-sizing:border-box;box-shadow:var(--ic-elevation-overlay)}.sc-ic-menu-h:not(.no-focus):focus-within{box-shadow:var(--ic-border-focus)}#retry-button.sc-ic-menu::part(button){height:var(--ic-space-lg)}.small.sc-ic-menu #retry-button.sc-ic-menu::part(button){height:var(--ic-space-md)}.on-dialog.sc-ic-menu-h{inset:auto !important}.menu.sc-ic-menu{text-decoration:none;list-style-type:none;border:var(--ic-border-width) solid var(--ic-architectural-400);border-radius:var(--ic-border-radius);background-color:var(--ic-architectural-white);visibility:hidden;max-height:0;overflow-y:hidden}.menu-scroll.sc-ic-menu{overflow-y:auto}.menu.sc-ic-menu:focus-visible{outline:none}.open.sc-ic-menu-h{max-height:none;display:block}.open.sc-ic-menu-h .menu.sc-ic-menu{visibility:visible;max-height:20.125rem}.full-width.sc-ic-menu-h{width:100%}.option.sc-ic-menu{padding:0.5rem 0.438rem;cursor:pointer;display:flex;align-items:center}.option.sc-ic-menu:not(.loading-option){justify-content:space-between}.small.sc-ic-menu-h .option.sc-ic-menu{padding:0.25rem 0.438rem}.option.sc-ic-menu:last-child{border-radius:0 0 var(--ic-space-1px) var(--ic-space-1px)}.option.sc-ic-menu:first-child{border-radius:var(--ic-space-1px) var(--ic-space-1px) 0 0}.option.sc-ic-menu:not(.disabled-option):hover{background-color:var(--ic-action-dark-bg-hover)}.option.sc-ic-menu:not(.disabled-option):active{background-color:var(--ic-action-dark-bg-active)}.option.sc-ic-menu:focus-visible{outline:var(--ic-hc-focus-outline)}.option.sc-ic-menu:not(.disabled-option) .option-description.sc-ic-menu{color:var(--ic-color-secondary-text)}.option.sc-ic-menu .option-label.sc-ic-menu{display:flex;flex-direction:row;align-items:top}.option.sc-ic-menu .option-element.sc-ic-menu{margin-top:var(--ic-space-xxs)}.option.sc-ic-menu .option-icon.sc-ic-menu{height:var(--ic-space-md);width:var(--ic-space-md);margin-top:var(--ic-space-xxs);margin-right:var(--ic-space-xxxs)}.option-text-container.sc-ic-menu{pointer-events:none}.option.loading-option.sc-ic-menu .option-text-container.sc-ic-menu{margin-left:0.625rem;color:var(--ic-color-secondary-text)}.error-icon-svg.sc-ic-menu{height:var(--ic-space-md);width:var(--ic-space-md);fill:var(--ic-status-error);align-self:center;display:flex;margin-right:calc(var(--ic-space-xxs) * 1.2)}.loading-error-info.sc-ic-menu{display:flex}.check-icon.sc-ic-menu{height:var(--ic-space-lg);width:var(--ic-space-lg);margin-left:0.5rem;pointer-events:none}.focused-option.sc-ic-menu .check-icon.sc-ic-menu *.sc-ic-menu{fill:currentcolor}.option-group-title.sc-ic-menu{padding:1.5rem 0.438rem 0.5rem;color:var(--ic-color-tertiary-text)}.small.sc-ic-menu-h .option-group-title.sc-ic-menu{padding:0.75rem 0.438rem 0.25rem}.last-recommended-option.sc-ic-menu{border-bottom:var(--ic-border-default)}.disabled-option.sc-ic-menu{color:var(--ic-architectural-200);cursor:default;pointer-events:none}.focused-option.sc-ic-menu,.focused-option.sc-ic-menu .option-description.sc-ic-menu{background-color:var(--ic-focus-blue) !important;color:var(--ic-color-white-text) !important}.no-results.sc-ic-menu-h li.sc-ic-menu{cursor:no-drop}.no-results.sc-ic-menu-h li.sc-ic-menu:hover{background-color:transparent}@media (forced-colors: active){.focused-option.sc-ic-menu:focus{outline:none;border:0.125rem solid transparent}}";
+const icMenuCss = "html.sc-ic-menu{line-height:1.15;-webkit-text-size-adjust:100%}body.sc-ic-menu{margin:0}main.sc-ic-menu{display:block}h1.sc-ic-menu{font-size:2em;margin:0.67em 0}hr.sc-ic-menu{box-sizing:content-box;height:0;overflow:visible}pre.sc-ic-menu{font-family:monospace, monospace;font-size:1em}a.sc-ic-menu{background-color:transparent}abbr[title].sc-ic-menu{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b.sc-ic-menu,strong.sc-ic-menu{font-weight:bolder}code.sc-ic-menu,kbd.sc-ic-menu,samp.sc-ic-menu{font-family:monospace, monospace;font-size:1em}small.sc-ic-menu{font-size:80%}sub.sc-ic-menu,sup.sc-ic-menu{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub.sc-ic-menu{bottom:-0.25em}sup.sc-ic-menu{top:-0.5em}img.sc-ic-menu{border-style:none}button.sc-ic-menu,input.sc-ic-menu,optgroup.sc-ic-menu,select.sc-ic-menu,textarea.sc-ic-menu{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button.sc-ic-menu,input.sc-ic-menu{overflow:visible}button.sc-ic-menu,select.sc-ic-menu{text-transform:none}button.sc-ic-menu,[type=\"button\"].sc-ic-menu,[type=\"reset\"].sc-ic-menu,[type=\"submit\"].sc-ic-menu{-webkit-appearance:button}button.sc-ic-menu::-moz-focus-inner,[type=\"button\"].sc-ic-menu::-moz-focus-inner,[type=\"reset\"].sc-ic-menu::-moz-focus-inner,[type=\"submit\"].sc-ic-menu::-moz-focus-inner{border-style:none;padding:0}button.sc-ic-menu:-moz-focusring,[type=\"button\"].sc-ic-menu:-moz-focusring,[type=\"reset\"].sc-ic-menu:-moz-focusring,[type=\"submit\"].sc-ic-menu:-moz-focusring{outline:1px dotted ButtonText}fieldset.sc-ic-menu{padding:0.35em 0.75em 0.625em}legend.sc-ic-menu{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress.sc-ic-menu{vertical-align:baseline}textarea.sc-ic-menu{overflow:auto}[type=\"checkbox\"].sc-ic-menu,[type=\"radio\"].sc-ic-menu{box-sizing:border-box;padding:0}[type=\"number\"].sc-ic-menu::-webkit-inner-spin-button,[type=\"number\"].sc-ic-menu::-webkit-outer-spin-button{height:auto}[type=\"search\"].sc-ic-menu{-webkit-appearance:textfield;outline-offset:-2px}[type=\"search\"].sc-ic-menu::-webkit-search-decoration{-webkit-appearance:none}.sc-ic-menu::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details.sc-ic-menu{display:block}summary.sc-ic-menu{display:list-item}template.sc-ic-menu{display:none}[hidden].sc-ic-menu{display:none}html.sc-ic-menu,body.sc-ic-menu,div.sc-ic-menu,span.sc-ic-menu,applet.sc-ic-menu,object.sc-ic-menu,iframe.sc-ic-menu,h1.sc-ic-menu,h2.sc-ic-menu,h3.sc-ic-menu,h4.sc-ic-menu,h5.sc-ic-menu,h6.sc-ic-menu,p.sc-ic-menu,blockquote.sc-ic-menu,pre.sc-ic-menu,a.sc-ic-menu,abbr.sc-ic-menu,acronym.sc-ic-menu,address.sc-ic-menu,big.sc-ic-menu,cite.sc-ic-menu,code.sc-ic-menu,del.sc-ic-menu,dfn.sc-ic-menu,em.sc-ic-menu,img.sc-ic-menu,ins.sc-ic-menu,kbd.sc-ic-menu,q.sc-ic-menu,s.sc-ic-menu,samp.sc-ic-menu,small.sc-ic-menu,strike.sc-ic-menu,strong.sc-ic-menu,sub.sc-ic-menu,sup.sc-ic-menu,tt.sc-ic-menu,var.sc-ic-menu,b.sc-ic-menu,u.sc-ic-menu,i.sc-ic-menu,center.sc-ic-menu,dl.sc-ic-menu,dt.sc-ic-menu,dd.sc-ic-menu,ol.sc-ic-menu,ul.sc-ic-menu,li.sc-ic-menu,fieldset.sc-ic-menu,form.sc-ic-menu,label.sc-ic-menu,legend.sc-ic-menu,table.sc-ic-menu,caption.sc-ic-menu,tbody.sc-ic-menu,tfoot.sc-ic-menu,thead.sc-ic-menu,tr.sc-ic-menu,th.sc-ic-menu,td.sc-ic-menu,article.sc-ic-menu,aside.sc-ic-menu,canvas.sc-ic-menu,details.sc-ic-menu,embed.sc-ic-menu,figure.sc-ic-menu,figcaption.sc-ic-menu,footer.sc-ic-menu,header.sc-ic-menu,hgroup.sc-ic-menu,menu.sc-ic-menu,nav.sc-ic-menu,output.sc-ic-menu,ruby.sc-ic-menu,section.sc-ic-menu,summary.sc-ic-menu,time.sc-ic-menu,mark.sc-ic-menu,audio.sc-ic-menu,video.sc-ic-menu{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}@media (prefers-reduced-motion: no-preference){.open.sc-ic-menu-h .menu.sc-ic-menu{transition:max-height var(--ic-transition-duration-slow)}}.sc-ic-menu-h{border-radius:var(--ic-border-radius);max-height:0;width:var(--input-width, 20rem);color:var(--ic-color-primary-text);background-color:var(--ic-architectural-white);position:relative;z-index:var(--ic-z-index-menu);box-sizing:border-box;box-shadow:var(--ic-elevation-overlay)}.sc-ic-menu-h:not(.no-focus):focus-within{box-shadow:var(--ic-border-focus)}#retry-button.sc-ic-menu::part(button){height:var(--ic-space-lg)}.small.sc-ic-menu #retry-button.sc-ic-menu::part(button){height:var(--ic-space-md)}.on-dialog.sc-ic-menu-h{inset:auto !important}.menu.sc-ic-menu{text-decoration:none;list-style-type:none;border:var(--ic-border-width) solid var(--ic-architectural-400);border-radius:var(--ic-border-radius);background-color:var(--ic-architectural-white);visibility:hidden;max-height:0;overflow-y:hidden}.menu-scroll.sc-ic-menu{overflow-y:auto}.menu.sc-ic-menu:focus-visible{outline:none}.open.sc-ic-menu-h{max-height:none;display:block}.open.sc-ic-menu-h .menu.sc-ic-menu{visibility:visible;max-height:calc(var(--ic-space-xl) * 10 + var(--ic-space-xxxs))}.full-width.sc-ic-menu-h{width:100%}.option.sc-ic-menu{padding:var(--ic-space-xs) calc(var(--ic-space-xs) - var(--ic-space-1px));cursor:pointer;display:flex;align-items:center}.option.sc-ic-menu:not(.loading-option){justify-content:space-between}.small.sc-ic-menu-h .option.sc-ic-menu{padding:var(--ic-space-xxs) calc(var(--ic-space-xs) - var(--ic-space-1px))}.large.sc-ic-menu-h .option.sc-ic-menu{padding:var(--ic-space-sm) calc(var(--ic-space-xs) - var(--ic-space-1px))}.option.sc-ic-menu:last-child{border-radius:0 0 var(--ic-space-1px) var(--ic-space-1px)}.option.sc-ic-menu:first-child{border-radius:var(--ic-space-1px) var(--ic-space-1px) 0 0}.option.sc-ic-menu:not(.disabled-option):hover{background-color:var(--ic-action-dark-bg-hover)}.option.sc-ic-menu:not(.disabled-option):active{background-color:var(--ic-action-dark-bg-active)}.option.sc-ic-menu:focus-visible{outline:var(--ic-hc-focus-outline)}.option.sc-ic-menu:not(.disabled-option) .option-description.sc-ic-menu{color:var(--ic-color-secondary-text)}.option.sc-ic-menu .option-label.sc-ic-menu{display:flex;flex-direction:row;align-items:top}.option.sc-ic-menu .option-element.sc-ic-menu{margin-top:var(--ic-space-xxs)}.option.sc-ic-menu .option-icon.sc-ic-menu{height:var(--ic-space-md);width:var(--ic-space-md);margin-top:var(--ic-space-xxs);margin-right:var(--ic-space-xxxs)}.option-text-container.sc-ic-menu{pointer-events:none}.option.loading-option.sc-ic-menu .option-text-container.sc-ic-menu{margin-left:calc(var(--ic-space-xs) + var(--ic-space-xxxs));color:var(--ic-color-secondary-text)}.error-icon-svg.sc-ic-menu{height:var(--ic-space-md);width:var(--ic-space-md);fill:var(--ic-status-error);align-self:center;display:flex;margin-right:calc(var(--ic-space-xxs) * 1.2)}.loading-error-info.sc-ic-menu{display:flex}.check-icon.sc-ic-menu{height:var(--ic-space-lg);width:var(--ic-space-lg);margin-left:var(--ic-space-xs);pointer-events:none}.focused-option.sc-ic-menu .check-icon.sc-ic-menu *.sc-ic-menu{fill:currentcolor}.option-group-title.sc-ic-menu{padding:var(--ic-space-lg) calc(var(--ic-space-xs) - var(--ic-space-1px))\n    var(--ic-space-xs);color:var(--ic-color-tertiary-text)}.small.sc-ic-menu-h .option-group-title.sc-ic-menu{padding:var(--ic-space-sm) calc(var(--ic-space-xs) - var(--ic-space-1px))\n    var(--ic-space-xxs)}.last-recommended-option.sc-ic-menu{border-bottom:var(--ic-border-default)}.disabled-option.sc-ic-menu{color:var(--ic-architectural-200);cursor:default;pointer-events:none}.focused-option.sc-ic-menu,.focused-option.sc-ic-menu .option-description.sc-ic-menu{background-color:var(--ic-focus-blue) !important;color:var(--ic-color-white-text) !important}.no-results.sc-ic-menu-h li.sc-ic-menu{cursor:no-drop}.no-results.sc-ic-menu-h li.sc-ic-menu:hover{background-color:transparent}@media (forced-colors: active){.focused-option.sc-ic-menu:focus{outline:none;border:0.125rem solid transparent}}";
 const Menu = /*@__PURE__*/ proxyCustomElement(class Menu extends HTMLElement {
     constructor() {
@@ -444,7 +444,7 @@ const Menu = /*@__PURE__*/ proxyCustomElement(class Menu extends HTMLElement {
                         option[this.valueField] === optionHighlighted) &&
                     keyboardNav
                     ? "0"
-                    : "-1", "aria-label": this.getOptionAriaLabel(option, parentOption), "aria-selected": option[this.valueField] === value, "aria-disabled": option.disabled ? "true" : "false", onClick: !option.timedOut && !option.loading && this.handleOptionClick, onBlur: this.handleBlur, onMouseDown: this.handleMouseDown, "data-value": option[this.valueField], "data-label": option[this.labelField] }, option.timedOut ? (h(Fragment, null, h("div", { class: "loading-error-info" }, h("svg", { class: "error-icon-svg", "aria-labelledby": "error-title", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "#000000" }, h("title", { id: "error-title" }, "Error"), h("path", { d: "M0 0h24v24H0z", fill: "none" }), h("path", { d: "M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z" })), h("ic-typography", { variant: "label" }, option[this.labelField])), h("ic-button", { size: "small", variant: "tertiary", onClick: this.handleRetry, onKeyDown: this.handleRetryKeyDown, onBlur: this.handleTimeoutBlur, id: "retry-button" }, "Retry"))) : (this.optionContent(option))));
+                    : "-1", "aria-label": this.getOptionAriaLabel(option, parentOption), "aria-selected": option[this.valueField] === value, "aria-disabled": option.disabled ? "true" : "false", onClick: !option.timedOut && !option.loading && this.handleOptionClick, onBlur: this.handleBlur, onMouseDown: this.handleMouseDown, "data-value": option[this.valueField], "data-label": option[this.labelField] }, option.timedOut ? (h(Fragment, null, h("div", { class: "loading-error-info" }, h("svg", { class: "error-icon-svg", "aria-labelledby": "error-title", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "#000000" }, h("title", { id: "error-title" }, "Error"), h("g", { id: "close-octagon" }, h("path", { id: "Vector", d: "M8.77 3L3.5 8.27V15.73L8.77 21H16.23L21.5 15.73V8.27L16.23 3M8.91 7L12.5 10.59L16.09 7L17.5 8.41L13.91 12L17.5 15.59L16.09 17L12.5 13.41L8.91 17L7.5 15.59L11.09 12L7.5 8.41" }))), h("ic-typography", { variant: "label" }, option[this.labelField])), h("ic-button", { size: "small", variant: "tertiary", onClick: this.handleRetry, onKeyDown: this.handleRetryKeyDown, onBlur: this.handleTimeoutBlur, id: "retry-button" }, "Retry"))) : (this.optionContent(option))));
         };
         this.focusFromSearchKeypress = false;
         this.initialOptionsListRender = false;
@@ -627,11 +627,12 @@ const Menu = /*@__PURE__*/ proxyCustomElement(class Menu extends HTMLElement {
         this.focusFromSearchKeypress = true;
     }
     render() {
-        const { inputLabel, options, menuId, value, fullWidth, hasTimedOut, isLoading, small, size, open, inputEl, keyboardNav, } = this;
+        const { inputLabel, options, menuId, value, fullWidth, hasTimedOut, isLoading, size, small, open, inputEl, keyboardNav, } = this;
         return (h(Host, { class: {
                 "full-width": fullWidth,
                 "no-focus": (inputEl === null || inputEl === void 0 ? void 0 : inputEl.tagName) === "INPUT" || hasTimedOut || isLoading,
-                small: small || size === "small",
+                small: small,
+                [size]: true,
                 open: open,
             } }, options.length !== 0 && (h("ul", { id: menuId, class: "menu", role: "listbox", "aria-label": inputLabel, "aria-activedescendant": value != null && value !== "" ? this.getOptionId(value) : "", tabindex: open && !keyboardNav && (inputEl === null || inputEl === void 0 ? void 0 : inputEl.tagName) !== "INPUT" ? "0" : "-1", ref: (el) => (this.menu = el), onKeyDown: this.handleMenuKeyDown, onKeyUp: this.handleMenuKeyUp, onBlur: this.handleBlur }, this.getSortedOptions(options).map((option, index) => {
             if (option.children) {