npm - @ukic/web-components - Versions diffs - 3.0.0-alpha.12 → 3.0.0-alpha.14 - Mend

@ukic/web-components 3.0.0-alpha.12 → 3.0.0-alpha.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (983) hide show

package/dist/cjs/ic-accordion-group.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ic-accordion-group.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,mBAAmB,GAAG,kxFAAkxF;;~~ACc9yF~~,IAAI,iBAAiB,GAAG,CAAC,CAAC;MAUb,cAAc~~;;;QACjB~~,qBAAgB,GAAG,sBAAsB,iBAAiB,EAAE,EAAE,CAAC~~;QAkG~~/D,mBAAc,GAAG;YACvB,IAAI,IAAI,CAAC,oBAAoB,EAAE;gBAC7B,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;gBACtB,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,GAAG;oBAC1B,GAAG,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC;iBAC9B,CAAC,CAAC;aACJ;iBAAM;gBACL,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;gBACrB,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,GAAG;oBAC1B,GAAG,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC;iBAC9B,CAAC,CAAC;aACJ;YACD,IAAI,CAAC,iCAAiC,EAAE,CAAC;SAC1C,CAAC;QAEM,mBAAc,GAAG;YACvB,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,SAAS;gBAChC,SAAS,CAAC,YAAY,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;aAC7D,CAAC,CAAC;SACJ,CAAC;QAEM,sCAAiC,GAAG;YAC1C,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC,UAAU,CAAC,KAAK,CAC/C,CAAC,SAAS,KAAK,CAAC,CAAC,SAAS,CAAC,QAAQ,CACpC,CAAC;SACH,CAAC;QAEM,yBAAoB,GAAG;YAC7B,OAAO,CAAC,IAAI,CAAC,oBAAoB,GAAG,SAAS,GAAG,UAAU,CAAC;SAC5D,CAAC~~;;;qCAnHsC,YAAY~~;~~qBAKtB,SAAS~~;~~wBAWM~~,~~KAAK;qBAS1B,EAAE;+BAKS,KAAK;oBAKf,QAAQ;;IA5BjC,~~iBAAiB;QACf,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,GAAG;YAC1B,GAAG,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;SACxB,CAAC,CAAC;KACJ;IAOD,oBAAoB;QAClB,IAAI,CAAC,cAAc,EAAE,CAAC;KACvB;IAiBD,gBAAgB;QACd,MAAM,uBAAuB,GAAI,IAAI,CAAC,EAAkB,CAAC,QAAQ,CAAC;QAClE,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,IAAI,CAAC,uBAAuB,CAAC,CAAC,MAAM,CAC1D,CAAC,KAAK,KAAK,KAAK,CAAC,OAAO,KAAK,cAAc,CAChB,CAAC;QAC9B,IAAI,CAAC,cAAc,EAAE,CAAC;QACtB,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,GAAG;YAC1B,GAAG,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;SACxB,CAAC,CAAC;QACH,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,GAAG;YAC1B,GAAG,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;SACtB,CAAC,CAAC;QACH,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,GAAG;gBAC1B,GAAG,CAAC,QAAQ,GAAG,IAAI,CAAC;aACrB,CAAC,CAAC;YACH,IAAI,CAAC,iCAAiC,EAAE,CAAC;SAC1C;aAAM;YACL,IAAI,CAAC,iCAAiC,EAAE,CAAC;YACzC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,oBAAoB,CAAC;SAC3C;KACF;IAGD,sBAAsB,CAAC,KAAkB;QACvC,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE;;YAEzB,IAAI,CAAC,iCAAiC,EAAE,CAAC;SAC1C;aAAM;YACL,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,GAAG;gBAC1B,IAAI,GAAG,CAAC,QAAQ,IAAI,KAAK,CAAC,MAAM,CAAC,EAAE,KAAK,GAAG,CAAC,EAAE,EAAE;oBAC9C,GAAG,CAAC,QAAQ,GAAG,KAAK,CAAC;iBACtB;aACF,CAAC,CAAC;SACJ;KACF;;;;;IAOD,MAAM,QAAQ;QACZ,MAAM,OAAO,GAAG,IAAI,CAAC,eAAe;cAChC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC;cAClB,IAAI,CAAC,WAAW,CAAC;QACrB,OAAO,~~CAAC~~,QAAQ,EAAE,CAAC;~~KACpB~~;IAiCD,MAAM;QACJ,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,eAAe,EAAE,qBAAqB,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;QAC5E,QACEA,QAACC,UAAI,~~kBACS~~,IAAI,CAAC,gBAAgB,EACjC,KAAK,EAAE;gBACL,CAAC,sBAAsB,IAAI,EAAE,GAAG,IAAI;gBACpC,CAAC,oBAAoB,GAAG,IAAI;gBAC5B,CAAC,YAAY,KAAK,EAAE,GAAG,KAAK,KAAK,SAAS;aAC3C,IAEDD,~~iBAAK~~,KAAK,EAAC,iBAAiB,IAC1BA,~~2BAAe~~,OAAO,EAAC,IAAI,IACzBA,~~oBACGE~~,kBAAU,CAAC,IAAI,CAAC,EAAE,EAAE,OAAO,CAAC,GAAGF,kBAAM,IAAI,EAAC,OAAO,GAAG,GAAG,KAAK,CAC1D,CACS,EACf,CAAC,eAAe,KACfA,~~uBACE~~,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC,EACpC,OAAO,EAAE,IAAI,CAAC,cAAc,EAC5B,OAAO,EAAC,UAAU,gBACN,GAAG,IAAI,CAAC,oBAAoB,EAAE,IAAI,qBAAqB,EAAE,IAEpE,IAAI,CAAC,oBAAoB,EAAE,CAClB,CACb,CACG,EACNA,~~qBAAa~~,CACR,EACP;KACH;;;;;;;;;;;","names":["h","Host","isSlotUsed"],"sources":["src/components/ic-accordion-group/ic-accordion-group.css?tag=ic-accordion-group&encapsulation=shadow","src/components/ic-accordion-group/ic-accordion-group.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n.label-container {\n --ic-typography-color: var(--ic-accordion-group-title-text);\n color: var(--ic-accordion-group-title-text);\n padding: var(--ic-space-xs);\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n\n:host(.ic-accordion-group-small) .label-container {\n padding: var(--ic-space-xxs) var(--ic-space-xs);\n}\n\n:host(.ic-accordion-group-large) .label-container {\n padding: var(--ic-space-sm) var(--ic-space-xs);\n}\n","import {\n Component,\n Element,\n h,\n Host,\n Listen,\n Prop,\n State,\n Method,\n Watch,\n} from \"@stencil/core\";\nimport { IcSizes, IcThemeMode } from \"../../utils/types\";\nimport { isSlotUsed } from \"../../utils/helpers\";\n\nlet accordionGroupIds = 0;\n\n/*\n @slot label - Content is placed as the accordion group title.\n /\n@Component({\n tag: \"ic-accordion-group\",\n styleUrl: \"ic-accordion-group.css\",\n shadow: true,\n})\nexport class AccordionGroup {\n private accordionGroupId = `ic-accordion-group-${accordionGroupIds++}`;\n private allButtonEl: HTMLIcButtonElement;\n\n @Element() el: HTMLIcAccordionGroupElement;\n\n @State() accordions: HTMLIcAccordionElement[];\n\n @State() areAllAccordionsOpen: boolean;\n\n /\n The accessible button label to provide more context to the 'See all/Hide all' button for screen reader users.\n /\n @Prop() accessibleButtonLabel: string = \"accordions\";\n\n /\n Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n /\n @Prop() theme?: IcThemeMode = \"inherit\";\n @Watch(\"theme\")\n watchThemeHandler(): void {\n this.accordions.forEach((acc) => {\n acc.theme = this.theme;\n });\n }\n\n /\n If `true`, the accordion will load in an expanded state.\n /\n @Prop({ mutable: true }) expanded: boolean = false;\n @Watch(\"expanded\")\n watchExpandedHandler() {\n this.handleExpanded();\n }\n\n /\n The header for the accordion group.\n /\n @Prop() label: string = \"\";\n\n /\n If `true`, only one accordion will open at a time.\n /\n @Prop() singleExpansion: boolean = false;\n\n /\n The size of the accordion.\n /\n @Prop() size?: IcSizes = \"medium\";\n\n componentDidLoad(): void {\n const accordionDirectChildren = (this.el as HTMLElement).children;\n this.accordions = Array.from(accordionDirectChildren).filter(\n (child) => child.tagName === \"IC-ACCORDION\"\n ) as HTMLIcAccordionElement[];\n this.linkAccordions();\n this.accordions.forEach((acc) => {\n acc.theme = this.theme;\n });\n this.accordions.forEach((acc) => {\n acc.size = this.size;\n });\n if (this.expanded) {\n this.accordions.forEach((acc) => {\n acc.expanded = true;\n });\n this.setExpandedToAreAllAccordionsOpen();\n } else {\n this.setExpandedToAreAllAccordionsOpen();\n this.expanded = this.areAllAccordionsOpen;\n }\n }\n\n @Listen(\"accordionClicked\")\n handleAccordionClicked(event: CustomEvent): void {\n if (!this.singleExpansion) {\n // 'See all' should be visible until all accordions are open, then 'Hide all' should be visible\n this.setExpandedToAreAllAccordionsOpen();\n } else {\n this.accordions.forEach((acc) => {\n if (acc.expanded && event.detail.id !== acc.id) {\n acc.expanded = false;\n }\n });\n }\n }\n\n /\n Sets the focus on first focusable element in the accordion group. If the \"See/Hide all\" button is present, it will be focused.\n * Otherwise, the first accordion will be focused.\n */\n @Method()\n async setFocus(): Promise<void> {\n const focusEl = this.singleExpansion\n ? this.accordions[0]\n : this.allButtonEl;\n focusEl.setFocus();\n }\n\n private handleExpanded = () => {\n if (this.areAllAccordionsOpen) {\n this.expanded = false;\n this.accordions.forEach((acc) => {\n acc.expanded = this.expanded;\n });\n } else {\n this.expanded = true;\n this.accordions.forEach((acc) => {\n acc.expanded = this.expanded;\n });\n }\n this.setExpandedToAreAllAccordionsOpen();\n };\n\n private linkAccordions = () => {\n this.accordions.forEach((accordion) => {\n accordion.setAttribute(\"context-id\", this.accordionGroupId);\n });\n };\n\n private setExpandedToAreAllAccordionsOpen = () => {\n this.areAllAccordionsOpen = this.accordions.every(\n (accordion) => !!accordion.expanded\n );\n };\n\n private accordionOpenBtnText = () => {\n return !this.areAllAccordionsOpen ? \"See all\" : \"Hide all\";\n };\n\n render() {\n const { size, label, singleExpansion, accessibleButtonLabel, theme } = this;\n return (\n <Host\n context-id={this.accordionGroupId}\n class={{\n [`ic-accordion-group-${size}`]: true,\n [\"ic-accordion-group\"]: true,\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n }}\n >\n <div class=\"label-container\">\n <ic-typography variant=\"h4\">\n <h3>\n {isSlotUsed(this.el, \"label\") ? <slot name=\"label\" /> : label}\n </h3>\n </ic-typography>\n {!singleExpansion && (\n <ic-button\n ref={(el) => (this.allButtonEl = el)}\n onClick={this.handleExpanded}\n variant=\"tertiary\"\n aria-label={`${this.accordionOpenBtnText()} ${accessibleButtonLabel}`}\n >\n {this.accordionOpenBtnText()}\n </ic-button>\n )}\n </div>\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ic-accordion-group.entry.cjs.js","mappings":"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","names":["h","Host","isSlotUsed"],"sources":["src/components/ic-accordion-group/ic-accordion-group.css?tag=ic-accordion-group&encapsulation=shadow","src/components/ic-accordion-group/ic-accordion-group.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n.label-container {\n --ic-typography-color: var(--ic-accordion-group-title-text);\n color: var(--ic-accordion-group-title-text);\n padding: var(--ic-space-xs);\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n\n:host(.ic-accordion-group-small) .label-container {\n padding: var(--ic-space-xxs) var(--ic-space-xs);\n}\n\n:host(.ic-accordion-group-large) .label-container {\n padding: var(--ic-space-sm) var(--ic-space-xs);\n}\n","import {\n Component,\n Element,\n h,\n Host,\n Listen,\n Prop,\n State,\n Method,\n Watch,\n} from \"@stencil/core\";\nimport { IcSizes, IcThemeMode } from \"../../utils/types\";\nimport { isSlotUsed } from \"../../utils/helpers\";\n\nlet accordionGroupIds = 0;\n\n/*\n @slot label - Content is placed as the accordion group title.\n /\n@Component({\n tag: \"ic-accordion-group\",\n styleUrl: \"ic-accordion-group.css\",\n shadow: true,\n})\nexport class AccordionGroup {\n private accordionGroupId = `ic-accordion-group-${accordionGroupIds++}`;\n private allButtonEl?: HTMLIcButtonElement;\n\n @Element() el: HTMLIcAccordionGroupElement;\n\n @State() accordions: HTMLIcAccordionElement[];\n\n @State() areAllAccordionsOpen: boolean;\n\n /\n The accessible button label to provide more context to the 'See all/Hide all' button for screen reader users.\n /\n @Prop() accessibleButtonLabel?: string = \"accordions\";\n\n /\n Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n /\n @Prop() theme?: IcThemeMode = \"inherit\";\n @Watch(\"theme\")\n watchThemeHandler(): void {\n this.accordions.forEach((acc) => {\n acc.theme = this.theme;\n });\n }\n\n /\n If `true`, the accordion will load in an expanded state.\n /\n @Prop({ mutable: true }) expanded?: boolean = false;\n @Watch(\"expanded\")\n watchExpandedHandler() {\n this.handleExpanded();\n }\n\n /\n The header for the accordion group.\n /\n @Prop() label?: string = \"\";\n\n /\n If `true`, only one accordion will open at a time.\n /\n @Prop() singleExpansion?: boolean = false;\n\n /\n The size of the accordion.\n /\n @Prop() size?: IcSizes = \"medium\";\n\n componentDidLoad(): void {\n const accordionDirectChildren = (this.el as HTMLElement).children;\n this.accordions = Array.from(accordionDirectChildren).filter(\n (child) => child.tagName === \"IC-ACCORDION\"\n ) as HTMLIcAccordionElement[];\n this.linkAccordions();\n this.accordions.forEach((acc) => {\n acc.theme = this.theme;\n });\n this.accordions.forEach((acc) => {\n acc.size = this.size;\n });\n if (this.expanded) {\n this.accordions.forEach((acc) => {\n acc.expanded = true;\n });\n this.setExpandedToAreAllAccordionsOpen();\n } else {\n this.setExpandedToAreAllAccordionsOpen();\n this.expanded = this.areAllAccordionsOpen;\n }\n }\n\n @Listen(\"accordionClicked\")\n handleAccordionClicked(event: CustomEvent): void {\n if (!this.singleExpansion) {\n // 'See all' should be visible until all accordions are open, then 'Hide all' should be visible\n this.setExpandedToAreAllAccordionsOpen();\n } else {\n this.accordions.forEach((acc) => {\n if (acc.expanded && event.detail.id !== acc.id) {\n acc.expanded = false;\n }\n });\n }\n }\n\n /\n Sets the focus on first focusable element in the accordion group. If the \"See/Hide all\" button is present, it will be focused.\n * Otherwise, the first accordion will be focused.\n */\n @Method()\n async setFocus(): Promise<void> {\n const focusEl = this.singleExpansion\n ? this.accordions[0]\n : this.allButtonEl;\n focusEl?.setFocus();\n }\n\n private handleExpanded = () => {\n if (this.areAllAccordionsOpen) {\n this.expanded = false;\n this.accordions.forEach((acc) => {\n acc.expanded = this.expanded;\n });\n } else {\n this.expanded = true;\n this.accordions.forEach((acc) => {\n acc.expanded = this.expanded;\n });\n }\n this.setExpandedToAreAllAccordionsOpen();\n };\n\n private linkAccordions = () => {\n this.accordions.forEach((accordion) => {\n accordion.setAttribute(\"context-id\", this.accordionGroupId);\n });\n };\n\n private setExpandedToAreAllAccordionsOpen = () => {\n this.areAllAccordionsOpen = this.accordions.every(\n (accordion) => !!accordion.expanded\n );\n };\n\n private accordionOpenBtnText = () => {\n return !this.areAllAccordionsOpen ? \"See all\" : \"Hide all\";\n };\n\n render() {\n const { size, label, singleExpansion, accessibleButtonLabel, theme } = this;\n return (\n <Host\n context-id={this.accordionGroupId}\n class={{\n [`ic-accordion-group-${size}`]: true,\n [\"ic-accordion-group\"]: true,\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n }}\n >\n <div class=\"label-container\">\n <ic-typography variant=\"h4\">\n <h3>\n {isSlotUsed(this.el, \"label\") ? <slot name=\"label\" /> : label}\n </h3>\n </ic-typography>\n {!singleExpansion && (\n <ic-button\n ref={(el) => (this.allButtonEl = el)}\n onClick={this.handleExpanded}\n variant=\"tertiary\"\n aria-label={`${this.accordionOpenBtnText()} ${accessibleButtonLabel}`}\n >\n {this.accordionOpenBtnText()}\n </ic-button>\n )}\n </div>\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/cjs/ic-accordion.cjs.entry.js CHANGED Viewed

@@ -2,11 +2,12 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-f982899d.js');
-const helpers = require('./helpers-eca4c27e.js');
+const index = require('./index-d337cd8a.js');
+const helpers = require('./helpers-08a9ec1c.js');
 const chevronIcon = require('./chevron-icon-3bf07531.js');
 const icAccordionCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:block;border-bottom:var(--ic-space-1px) solid var(--ic-accordion-divider)}:host .expand-chevron{color:var(--ic-accordion-chevron)}:host(.ic-accordion-disabled) .expand-chevron{color:var(--ic-accordion-chevron-disabled)}.section-button.small{padding:var(--ic-space-xxs) var(--ic-space-xs)}.section-button.large{padding:var(--ic-space-sm) var(--ic-space-xs)}:host(:first-of-type){border-top:var(--ic-space-1px) solid var(--ic-accordion-divider)}:focus{outline:none}.section-button{background-color:transparent;display:flex;align-items:center;width:100%;padding:var(--ic-space-xs);font-weight:var(--ic-font-weight-bold);border:none}.section-header{--ic-typography-color:var(--ic-accordion-heading-text);color:var(--ic-accordion-heading-text);text-align:left;flex:1 0}:host(.ic-accordion-disabled) .section-header{--ic-typography-color:var(--ic-accordion-heading-text-disabled);color:var(--ic-accordion-heading-text-disabled)}button:hover{background-color:var(--ic-accordion-background-hover);cursor:pointer}button:active{background-color:var(--ic-accordion-background-pressed)}button:focus{box-shadow:var(--ic-border-focus);border-radius:var(--ic-border-radius);transition:var(--ic-transition-duration-fast)}button:disabled{pointer-events:none}.icon-container{margin:0 var(--ic-space-xs) 0 0;display:flex;align-items:center;width:var(--ic-space-lg);height:var(--ic-space-lg);color:var(--ic-accordion-icon)}:host(.ic-accordion-disabled) .icon-container{color:var(--ic-accordion-icon-disabled)}::slotted(svg){width:var(--ic-space-md);height:var(--ic-space-md)}.expand-chevron{width:var(--ic-space-lg);height:var(--ic-space-lg);margin-left:calc(var(--ic-space-xl) + var(--ic-space-xs));transform:rotate(90deg);justify-self:end}.content-expanded-chevron{transform:rotate(-90deg)}.expanded-content{--ic-typography-color:var(--ic-accordion-body-text);color:var(--ic-accordion-body-text);height:0;overflow:hidden;display:flex;flex-direction:column;visibility:var(--ic-expanded-content-visibility, hidden)}.expanded-content-inner{padding:var(--ic-space-xs)}.expanded-content-opened{overflow:visible}@media (forced-colors: active){button:focus{border:var(--ic-border-hc) !important}}";
+const IcAccordionStyle0 = icAccordionCss;
 let accordionIds = 0;
 const Accordion = class {
@@ -15,6 +16,30 @@ const Accordion = class {
         this.accordionClicked = index.createEvent(this, "accordionClicked", 7);
         this.accordionId = `ic-accordion-${accordionIds++}`;
         this.CONTENT_VISIBILITY_PROPERTY = "--ic-expanded-content-visibility";
+        /**
+         * If `true`, the accordion will be disabled.
+         */
+        this.disabled = false;
+        /**
+         * If `true`, the accordion appears expanded.
+         */
+        this.expanded = false;
+        /**
+         * The section header outlining section content.
+         */
+        this.heading = "";
+        /**
+         * The main body message of the accordion.
+         */
+        this.message = "";
+        /**
+         * The size of the accordion.
+         */
+        this.size = "medium";
+        /**
+         * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
+         */
+        this.theme = "inherit";
         this.toggleExpanded = () => {
             this.expanded = !this.expanded;
             this.accordionClicked.emit({ id: this.accordionId });
@@ -37,33 +62,31 @@ const Accordion = class {
             }
         };
         this.animateExpandedContent = () => {
-            const elementHeight = this.expandedContentEl.scrollHeight;
-            if (elementHeight > 0 && this.expanded) {
-                this.expandedContentEl.style.setProperty(this.CONTENT_VISIBILITY_PROPERTY, "visible");
-                this.expandedContentEl.style.height = `${elementHeight}px`;
-                this.setAccordionAnimation(this.expandedContentEl, "300", "height", "ease-out");
-                this.expandedContentEl.addEventListener("transitionend", (e) => {
-                    this.setExpandedContentStyle(e, this.expandedContentEl);
-                });
-            }
-            else if (!this.expanded) {
-                this.expandedContentEl.style.height = `${this.expandedContentEl.scrollHeight}px`;
-                if (this.expandedContentEl.scrollHeight > 0 && !this.expanded) {
-                    this.expandedContentEl.style.height = "0";
-                    this.setAccordionAnimation(this.expandedContentEl, "300", "height", "ease-in");
-                    this.expandedContentEl.classList.remove("expanded-content-opened");
+            if (this.expandedContentEl) {
+                const expandedContentEl = this.expandedContentEl;
+                const elementHeight = expandedContentEl.scrollHeight;
+                if (elementHeight > 0 && this.expanded) {
+                    expandedContentEl.style.setProperty(this.CONTENT_VISIBILITY_PROPERTY, "visible");
+                    expandedContentEl.style.height = `${elementHeight}px`;
+                    this.setAccordionAnimation(expandedContentEl, "300", "height", "ease-out");
+                    expandedContentEl.addEventListener("transitionend", (e) => {
+                        this.setExpandedContentStyle(e, expandedContentEl);
+                    });
+                }
+                else if (!this.expanded) {
+                    const expandedContentEl = this.expandedContentEl;
+                    expandedContentEl.style.height = `${expandedContentEl.scrollHeight}px`;
+                    if (expandedContentEl.scrollHeight > 0 && !this.expanded) {
+                        expandedContentEl.style.height = "0";
+                        this.setAccordionAnimation(expandedContentEl, "300", "height", "ease-in");
+                        expandedContentEl.classList.remove("expanded-content-opened");
+                    }
+                    expandedContentEl.addEventListener("transitionend", (e) => {
+                        this.hideExpandedContent(e, expandedContentEl);
+                    });
                 }
-                this.expandedContentEl.addEventListener("transitionend", (e) => {
-                    this.hideExpandedContent(e, this.expandedContentEl);
-                });
             }
         };
-        this.disabled = false;
-        this.expanded = false;
-        this.heading = "";
-        this.message = "";
-        this.size = "medium";
-        this.theme = "inherit";
     }
     watchDisabledHandler() {
         helpers.removeDisabledFalse(this.disabled, this.el);
@@ -76,41 +99,41 @@ const Accordion = class {
      * Sets focus on accordion heading.
      */
     async setFocus() {
-        if (this.accordionBtnHeading) {
-            this.accordionBtnHeading.focus();
-        }
+        var _a;
+        (_a = this.accordionBtnHeading) === null || _a === void 0 ? void 0 : _a.focus();
     }
     componentWillLoad() {
         helpers.removeDisabledFalse(this.disabled, this.el);
     }
     disconnectedCallback() {
-        if (this.expandedContentEl) {
-            this.expandedContentEl.removeEventListener("transitionend", (e) => this.setExpandedContentStyle(e, this.expandedContentEl), true);
-            this.expandedContentEl.removeEventListener("transitionend", (e) => this.hideExpandedContent(e, this.expandedContentEl), true);
+        const expandedContentEl = this.expandedContentEl;
+        if (expandedContentEl) {
+            expandedContentEl.removeEventListener("transitionend", (e) => this.setExpandedContentStyle(e, expandedContentEl), true);
+            expandedContentEl.removeEventListener("transitionend", (e) => this.hideExpandedContent(e, expandedContentEl), true);
         }
     }
     componentDidLoad() {
         // So accordion opens by default if expanded set to true
-        if (this.expanded) {
+        if (this.expanded && this.expandedContentEl) {
             this.expandedContentEl.style.height = "auto";
             this.expandedContentEl.style.setProperty(this.CONTENT_VISIBILITY_PROPERTY, "visible");
         }
     }
     render() {
         const { size, disabled, expanded, theme } = this;
-        return (index.h(index.Host, { id: this.accordionId, class: {
-                ["ic-accordion-disabled"]: disabled,
+        return (index.h(index.Host, { key: '1af99baa1066daa75be1af7329ed0a79a6a7f3cf', id: this.accordionId, class: {
+                ["ic-accordion-disabled"]: !!disabled,
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            }, "aria-disabled": disabled ? "true" : "false" }, index.h("button", { ref: (el) => (this.accordionBtnHeading = el), id: `${this.accordionId}-button`, disabled: disabled, tabindex: disabled ? -1 : 0, class: {
+            }, "aria-disabled": disabled ? "true" : "false" }, index.h("button", { key: '95695d5beebac9e84bc55159d8602182698ece75', ref: (el) => (this.accordionBtnHeading = el), id: `${this.accordionId}-button`, disabled: disabled, tabindex: disabled ? -1 : 0, class: {
                 [`${size}`]: true,
                 ["section-button"]: true,
-                ["section-button-open"]: expanded && !disabled,
-            }, "aria-expanded": `${expanded}`, "aria-controls": "expanded-content-area", onClick: this.toggleExpanded }, helpers.isSlotUsed(this.el, "icon") && (index.h("div", { class: "icon-container" }, index.h("slot", { name: "icon" }))), index.h("ic-typography", { variant: "subtitle-large", class: "section-header" }, helpers.isSlotUsed(this.el, "heading") ? (index.h("slot", { name: "heading" })) : (this.heading)), index.h("span", { class: {
+                ["section-button-open"]: !!expanded && !disabled,
+            }, "aria-expanded": `${expanded}`, "aria-controls": "expanded-content-area", onClick: this.toggleExpanded }, helpers.isSlotUsed(this.el, "icon") && (index.h("div", { key: '274fc2d72fefc6b7f52e4c11fb0dec81055aeb1e', class: "icon-container" }, index.h("slot", { key: 'b8fb45c64beba9a319776080ea7b764aa4a0b9db', name: "icon" }))), index.h("ic-typography", { key: 'c0ca1e3a7f4a8cb7b05a3892eec1db728162db91', variant: "subtitle-large", class: "section-header" }, helpers.isSlotUsed(this.el, "heading") ? (index.h("slot", { name: "heading" })) : (this.heading)), index.h("span", { key: 'c8a70311d3d99114ff1f75c63dbbbbf1077e59c7', class: {
                 ["expand-chevron"]: true,
-                ["content-expanded-chevron"]: expanded && !disabled,
-            }, "aria-hidden": "true", innerHTML: chevronIcon.Chevron })), index.h("div", { class: {
+                ["content-expanded-chevron"]: !!expanded && !disabled,
+            }, "aria-hidden": "true", innerHTML: chevronIcon.Chevron })), index.h("div", { key: '2bbae7f78c0a88f767c64fa0849c6c13bd998128', class: {
                 ["expanded-content"]: true,
-            }, "aria-labelledby": `${this.accordionId}-button`, role: "region", "aria-hidden": `${!expanded}`, id: "expanded-content-area", ref: (el) => (this.expandedContentEl = el) }, index.h("div", { class: "expanded-content-inner" }, this.message ? (index.h("ic-typography", { variant: "body" }, this.message)) : (index.h("slot", null))))));
+            }, "aria-labelledby": `${this.accordionId}-button`, role: "region", "aria-hidden": `${!expanded}`, id: "expanded-content-area", ref: (el) => (this.expandedContentEl = el) }, index.h("div", { key: '49f53a7ceb1a9a13f50542e93445bacd7d9d9a1e', class: "expanded-content-inner" }, this.message ? (index.h("ic-typography", { variant: "body" }, this.message)) : (index.h("slot", null))))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -118,7 +141,7 @@ const Accordion = class {
         "expanded": ["handleExpandedWatch"]
     }; }
 };
-Accordion.style = icAccordionCss;
+Accordion.style = IcAccordionStyle0;
 exports.ic_accordion = Accordion;

package/dist/cjs/ic-accordion.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ic-accordion.entry.cjs.js","mappings":"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","names":["removeDisabledFalse","h","Host","isSlotUsed","chevronIcon"],"sources":["src/components/ic-accordion/ic-accordion.css?tag=ic-accordion&encapsulation=shadow","src/components/ic-accordion/ic-accordion.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n display: block;\n border-bottom: var(--ic-space-1px) solid var(--ic-accordion-divider);\n}\n\n:host .expand-chevron {\n color: var(--ic-accordion-chevron);\n}\n\n:host(.ic-accordion-disabled) .expand-chevron {\n color: var(--ic-accordion-chevron-disabled);\n}\n\n.section-button.small {\n padding: var(--ic-space-xxs) var(--ic-space-xs);\n}\n\n.section-button.large {\n padding: var(--ic-space-sm) var(--ic-space-xs);\n}\n\n:host(:first-of-type) {\n border-top: var(--ic-space-1px) solid var(--ic-accordion-divider);\n}\n\n:focus {\n outline: none;\n}\n\n.section-button {\n background-color: transparent;\n display: flex;\n align-items: center;\n width: 100%;\n padding: var(--ic-space-xs);\n font-weight: var(--ic-font-weight-bold);\n border: none;\n}\n\n.section-header {\n --ic-typography-color: var(--ic-accordion-heading-text);\n color: var(--ic-accordion-heading-text);\n text-align: left;\n flex: 1 0;\n}\n\n:host(.ic-accordion-disabled) .section-header {\n --ic-typography-color: var(--ic-accordion-heading-text-disabled);\n color: var(--ic-accordion-heading-text-disabled);\n}\n\nbutton:hover {\n background-color: var(--ic-accordion-background-hover);\n cursor: pointer;\n}\n\nbutton:active {\n background-color: var(--ic-accordion-background-pressed);\n}\n\nbutton:focus {\n box-shadow: var(--ic-border-focus);\n border-radius: var(--ic-border-radius);\n transition: var(--ic-transition-duration-fast);\n}\n\nbutton:disabled {\n pointer-events: none;\n}\n\n.icon-container {\n margin: 0 var(--ic-space-xs) 0 0;\n display: flex;\n align-items: center;\n width: var(--ic-space-lg);\n height: var(--ic-space-lg);\n color: var(--ic-accordion-icon);\n}\n\n:host(.ic-accordion-disabled) .icon-container {\n color: var(--ic-accordion-icon-disabled);\n}\n\n::slotted(svg) {\n width: var(--ic-space-md);\n height: var(--ic-space-md);\n}\n\n.expand-chevron {\n width: var(--ic-space-lg);\n height: var(--ic-space-lg);\n margin-left: calc(var(--ic-space-xl) + var(--ic-space-xs));\n transform: rotate(90deg);\n justify-self: end;\n}\n\n.content-expanded-chevron {\n transform: rotate(-90deg);\n}\n\n.expanded-content {\n --ic-typography-color: var(--ic-accordion-body-text);\n color: var(--ic-accordion-body-text);\n height: 0;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n visibility: var(--ic-expanded-content-visibility, hidden);\n}\n\n.expanded-content-inner {\n padding: var(--ic-space-xs);\n}\n\n.expanded-content-opened {\n overflow: visible;\n}\n\n@media (forced-colors: active) {\n button:focus {\n border: var(--ic-border-hc) !important;\n }\n}\n","import {\n Component,\n h,\n Prop,\n Element,\n Event,\n EventEmitter,\n Host,\n Watch,\n Method,\n} from \"@stencil/core\";\nimport { isSlotUsed, removeDisabledFalse } from \"../../utils/helpers\";\nimport chevronIcon from \"../../assets/chevron-icon.svg\";\nimport { IcSizes, IcThemeMode } from \"../../utils/types\";\n\nlet accordionIds = 0;\n\n/*\n @slot heading - Content is placed as the accordion heading.\n * @slot icon - Content is placed to the left of the heading.\n /\n\n@Component({\n tag: \"ic-accordion\",\n styleUrl: \"ic-accordion.css\",\n shadow: true,\n})\nexport class Accordion {\n private accordionId = `ic-accordion-${accordionIds++}`;\n private expandedContentEl: HTMLDivElement;\n private accordionBtnHeading: HTMLButtonElement;\n private CONTENT_VISIBILITY_PROPERTY = \"--ic-expanded-content-visibility\";\n\n @Element() el: HTMLIcAccordionElement;\n\n /\n If `true`, the accordion will be disabled.\n /\n @Prop() disabled?: boolean = false;\n @Watch(\"disabled\")\n watchDisabledHandler(): void {\n removeDisabledFalse(this.disabled, this.el);\n }\n\n /\n If `true`, the accordion appears expanded.\n /\n @Prop({ mutable: true }) expanded: boolean = false;\n\n /\n The section header outlining section content.\n /\n @Prop() heading?: string = \"\";\n\n /\n The main body message of the accordion.\n /\n @Prop() message?: string = \"\";\n\n /\n The size of the accordion.\n /\n @Prop() size?: IcSizes = \"medium\";\n\n /\n Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n /\n @Prop() theme?: IcThemeMode = \"inherit\";\n\n /\n @internal Emitted when accordion is clicked.\n /\n @Event() accordionClicked: EventEmitter<{ id: string }>;\n\n // Every time expanded is set via toggleExpanded or accordionGroup, animate to open or close\n @Watch(\"expanded\")\n handleExpandedWatch(): void {\n this.animateExpandedContent();\n }\n\n /\n Sets focus on accordion heading.\n */\n @Method()\n async setFocus(): Promise<void> {\n if (this.accordionBtnHeading) {\n this.accordionBtnHeading.focus();\n }\n }\n\n componentWillLoad(): void {\n removeDisabledFalse(this.disabled, this.el);\n }\n\n disconnectedCallback(): void {\n if (this.expandedContentEl) {\n this.expandedContentEl.removeEventListener(\n \"transitionend\",\n (e) => this.setExpandedContentStyle(e, this.expandedContentEl),\n true\n );\n this.expandedContentEl.removeEventListener(\n \"transitionend\",\n (e) => this.hideExpandedContent(e, this.expandedContentEl),\n true\n );\n }\n }\n\n componentDidLoad(): void {\n // So accordion opens by default if expanded set to true\n if (this.expanded) {\n this.expandedContentEl.style.height = \"auto\";\n this.expandedContentEl.style.setProperty(\n this.CONTENT_VISIBILITY_PROPERTY,\n \"visible\"\n );\n }\n }\n\n private toggleExpanded = (): void => {\n this.expanded = !this.expanded;\n this.accordionClicked.emit({ id: this.accordionId });\n };\n\n // Set accordion animation\n private setAccordionAnimation = (\n el: HTMLElement,\n duration: string,\n property: string,\n delay: string\n ) => {\n el.style.transitionDuration = `${duration}ms`;\n el.style.transitionProperty = property;\n el.style.transitionDelay = delay;\n };\n\n private setExpandedContentStyle = (\n ev: TransitionEvent,\n expandedContent: HTMLDivElement\n ) => {\n if (ev.propertyName === \"height\" && expandedContent.clientHeight > 0) {\n expandedContent.classList.add(\"expanded-content-opened\");\n expandedContent.style.height = \"auto\";\n }\n };\n\n private hideExpandedContent = (\n ev: TransitionEvent,\n expandedContent: HTMLDivElement\n ) => {\n if (ev.propertyName === \"height\" && expandedContent.clientHeight === 0) {\n expandedContent.style.setProperty(\n this.CONTENT_VISIBILITY_PROPERTY,\n \"hidden\"\n );\n }\n };\n\n private animateExpandedContent = () => {\n const elementHeight = this.expandedContentEl.scrollHeight;\n if (elementHeight > 0 && this.expanded) {\n this.expandedContentEl.style.setProperty(\n this.CONTENT_VISIBILITY_PROPERTY,\n \"visible\"\n );\n this.expandedContentEl.style.height = `${elementHeight}px`;\n this.setAccordionAnimation(\n this.expandedContentEl,\n \"300\",\n \"height\",\n \"ease-out\"\n );\n\n this.expandedContentEl.addEventListener(\n \"transitionend\",\n (e: TransitionEvent) => {\n this.setExpandedContentStyle(e, this.expandedContentEl);\n }\n );\n } else if (!this.expanded) {\n this.expandedContentEl.style.height = `${this.expandedContentEl.scrollHeight}px`;\n if (this.expandedContentEl.scrollHeight > 0 && !this.expanded) {\n this.expandedContentEl.style.height = \"0\";\n this.setAccordionAnimation(\n this.expandedContentEl,\n \"300\",\n \"height\",\n \"ease-in\"\n );\n this.expandedContentEl.classList.remove(\"expanded-content-opened\");\n }\n this.expandedContentEl.addEventListener(\"transitionend\", (e) => {\n this.hideExpandedContent(e, this.expandedContentEl);\n });\n }\n };\n\n render() {\n const { size, disabled, expanded, theme } = this;\n return (\n <Host\n id={this.accordionId}\n class={{\n [\"ic-accordion-disabled\"]: disabled,\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n }}\n aria-disabled={disabled ? \"true\" : \"false\"}\n >\n <button\n ref={(el) => (this.accordionBtnHeading = el)}\n id={`${this.accordionId}-button`}\n disabled={disabled}\n tabindex={disabled ? -1 : 0}\n class={{\n [`${size}`]: true,\n [\"section-button\"]: true,\n [\"section-button-open\"]: expanded && !disabled,\n }}\n aria-expanded={`${expanded}`}\n aria-controls=\"expanded-content-area\"\n onClick={this.toggleExpanded}\n >\n {isSlotUsed(this.el, \"icon\") && (\n <div class=\"icon-container\">\n <slot name=\"icon\" />\n </div>\n )}\n <ic-typography variant=\"subtitle-large\" class=\"section-header\">\n {isSlotUsed(this.el, \"heading\") ? (\n <slot name=\"heading\" />\n ) : (\n this.heading\n )}\n </ic-typography>\n <span\n class={{\n [\"expand-chevron\"]: true,\n [\"content-expanded-chevron\"]: expanded && !disabled,\n }}\n aria-hidden=\"true\"\n innerHTML={chevronIcon}\n />\n </button>\n <div\n class={{\n [\"expanded-content\"]: true,\n }}\n aria-labelledby={`${this.accordionId}-button`}\n role=\"region\"\n aria-hidden={`${!expanded}`}\n id=\"expanded-content-area\"\n ref={(el) => (this.expandedContentEl = el)}\n >\n <div class=\"expanded-content-inner\">\n {this.message ? (\n <ic-typography variant=\"body\">{this.message}</ic-typography>\n ) : (\n <slot />\n )}\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ic-accordion.entry.cjs.js","mappings":"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","names":["removeDisabledFalse","h","Host","isSlotUsed","chevronIcon"],"sources":["src/components/ic-accordion/ic-accordion.css?tag=ic-accordion&encapsulation=shadow","src/components/ic-accordion/ic-accordion.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n display: block;\n border-bottom: var(--ic-space-1px) solid var(--ic-accordion-divider);\n}\n\n:host .expand-chevron {\n color: var(--ic-accordion-chevron);\n}\n\n:host(.ic-accordion-disabled) .expand-chevron {\n color: var(--ic-accordion-chevron-disabled);\n}\n\n.section-button.small {\n padding: var(--ic-space-xxs) var(--ic-space-xs);\n}\n\n.section-button.large {\n padding: var(--ic-space-sm) var(--ic-space-xs);\n}\n\n:host(:first-of-type) {\n border-top: var(--ic-space-1px) solid var(--ic-accordion-divider);\n}\n\n:focus {\n outline: none;\n}\n\n.section-button {\n background-color: transparent;\n display: flex;\n align-items: center;\n width: 100%;\n padding: var(--ic-space-xs);\n font-weight: var(--ic-font-weight-bold);\n border: none;\n}\n\n.section-header {\n --ic-typography-color: var(--ic-accordion-heading-text);\n color: var(--ic-accordion-heading-text);\n text-align: left;\n flex: 1 0;\n}\n\n:host(.ic-accordion-disabled) .section-header {\n --ic-typography-color: var(--ic-accordion-heading-text-disabled);\n color: var(--ic-accordion-heading-text-disabled);\n}\n\nbutton:hover {\n background-color: var(--ic-accordion-background-hover);\n cursor: pointer;\n}\n\nbutton:active {\n background-color: var(--ic-accordion-background-pressed);\n}\n\nbutton:focus {\n box-shadow: var(--ic-border-focus);\n border-radius: var(--ic-border-radius);\n transition: var(--ic-transition-duration-fast);\n}\n\nbutton:disabled {\n pointer-events: none;\n}\n\n.icon-container {\n margin: 0 var(--ic-space-xs) 0 0;\n display: flex;\n align-items: center;\n width: var(--ic-space-lg);\n height: var(--ic-space-lg);\n color: var(--ic-accordion-icon);\n}\n\n:host(.ic-accordion-disabled) .icon-container {\n color: var(--ic-accordion-icon-disabled);\n}\n\n::slotted(svg) {\n width: var(--ic-space-md);\n height: var(--ic-space-md);\n}\n\n.expand-chevron {\n width: var(--ic-space-lg);\n height: var(--ic-space-lg);\n margin-left: calc(var(--ic-space-xl) + var(--ic-space-xs));\n transform: rotate(90deg);\n justify-self: end;\n}\n\n.content-expanded-chevron {\n transform: rotate(-90deg);\n}\n\n.expanded-content {\n --ic-typography-color: var(--ic-accordion-body-text);\n color: var(--ic-accordion-body-text);\n height: 0;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n visibility: var(--ic-expanded-content-visibility, hidden);\n}\n\n.expanded-content-inner {\n padding: var(--ic-space-xs);\n}\n\n.expanded-content-opened {\n overflow: visible;\n}\n\n@media (forced-colors: active) {\n button:focus {\n border: var(--ic-border-hc) !important;\n }\n}\n","import {\n Component,\n h,\n Prop,\n Element,\n Event,\n EventEmitter,\n Host,\n Watch,\n Method,\n} from \"@stencil/core\";\nimport { isSlotUsed, removeDisabledFalse } from \"../../utils/helpers\";\nimport chevronIcon from \"../../assets/chevron-icon.svg\";\nimport { IcSizes, IcThemeMode } from \"../../utils/types\";\n\nlet accordionIds = 0;\n\n/*\n @slot heading - Content is placed as the accordion heading.\n * @slot icon - Content is placed to the left of the heading.\n /\n\n@Component({\n tag: \"ic-accordion\",\n styleUrl: \"ic-accordion.css\",\n shadow: true,\n})\nexport class Accordion {\n private accordionId = `ic-accordion-${accordionIds++}`;\n private expandedContentEl?: HTMLDivElement;\n private accordionBtnHeading?: HTMLButtonElement;\n private CONTENT_VISIBILITY_PROPERTY = \"--ic-expanded-content-visibility\";\n\n @Element() el: HTMLIcAccordionElement;\n\n /\n If `true`, the accordion will be disabled.\n /\n @Prop() disabled?: boolean = false;\n @Watch(\"disabled\")\n watchDisabledHandler(): void {\n removeDisabledFalse(this.disabled, this.el);\n }\n\n /\n If `true`, the accordion appears expanded.\n /\n @Prop({ mutable: true }) expanded?: boolean = false;\n\n /\n The section header outlining section content.\n /\n @Prop() heading?: string = \"\";\n\n /\n The main body message of the accordion.\n /\n @Prop() message?: string = \"\";\n\n /\n The size of the accordion.\n /\n @Prop() size?: IcSizes = \"medium\";\n\n /\n Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n /\n @Prop() theme?: IcThemeMode = \"inherit\";\n\n /\n @internal Emitted when accordion is clicked.\n /\n @Event() accordionClicked: EventEmitter<{ id: string }>;\n\n // Every time expanded is set via toggleExpanded or accordionGroup, animate to open or close\n @Watch(\"expanded\")\n handleExpandedWatch(): void {\n this.animateExpandedContent();\n }\n\n /\n Sets focus on accordion heading.\n */\n @Method()\n async setFocus(): Promise<void> {\n this.accordionBtnHeading?.focus();\n }\n\n componentWillLoad(): void {\n removeDisabledFalse(this.disabled, this.el);\n }\n\n disconnectedCallback(): void {\n const expandedContentEl = this.expandedContentEl;\n if (expandedContentEl) {\n expandedContentEl.removeEventListener(\n \"transitionend\",\n (e) => this.setExpandedContentStyle(e, expandedContentEl),\n true\n );\n expandedContentEl.removeEventListener(\n \"transitionend\",\n (e) => this.hideExpandedContent(e, expandedContentEl),\n true\n );\n }\n }\n\n componentDidLoad(): void {\n // So accordion opens by default if expanded set to true\n if (this.expanded && this.expandedContentEl) {\n this.expandedContentEl.style.height = \"auto\";\n this.expandedContentEl.style.setProperty(\n this.CONTENT_VISIBILITY_PROPERTY,\n \"visible\"\n );\n }\n }\n\n private toggleExpanded = (): void => {\n this.expanded = !this.expanded;\n this.accordionClicked.emit({ id: this.accordionId });\n };\n\n // Set accordion animation\n private setAccordionAnimation = (\n el: HTMLElement,\n duration: string,\n property: string,\n delay: string\n ) => {\n el.style.transitionDuration = `${duration}ms`;\n el.style.transitionProperty = property;\n el.style.transitionDelay = delay;\n };\n\n private setExpandedContentStyle = (\n ev: TransitionEvent,\n expandedContent: HTMLDivElement\n ) => {\n if (ev.propertyName === \"height\" && expandedContent.clientHeight > 0) {\n expandedContent.classList.add(\"expanded-content-opened\");\n expandedContent.style.height = \"auto\";\n }\n };\n\n private hideExpandedContent = (\n ev: TransitionEvent,\n expandedContent: HTMLDivElement\n ) => {\n if (ev.propertyName === \"height\" && expandedContent.clientHeight === 0) {\n expandedContent.style.setProperty(\n this.CONTENT_VISIBILITY_PROPERTY,\n \"hidden\"\n );\n }\n };\n\n private animateExpandedContent = () => {\n if (this.expandedContentEl) {\n const expandedContentEl = this.expandedContentEl;\n const elementHeight = expandedContentEl.scrollHeight;\n if (elementHeight > 0 && this.expanded) {\n expandedContentEl.style.setProperty(\n this.CONTENT_VISIBILITY_PROPERTY,\n \"visible\"\n );\n expandedContentEl.style.height = `${elementHeight}px`;\n this.setAccordionAnimation(\n expandedContentEl,\n \"300\",\n \"height\",\n \"ease-out\"\n );\n\n expandedContentEl.addEventListener(\n \"transitionend\",\n (e: TransitionEvent) => {\n this.setExpandedContentStyle(e, expandedContentEl);\n }\n );\n } else if (!this.expanded) {\n const expandedContentEl = this.expandedContentEl;\n expandedContentEl.style.height = `${expandedContentEl.scrollHeight}px`;\n if (expandedContentEl.scrollHeight > 0 && !this.expanded) {\n expandedContentEl.style.height = \"0\";\n this.setAccordionAnimation(\n expandedContentEl,\n \"300\",\n \"height\",\n \"ease-in\"\n );\n expandedContentEl.classList.remove(\"expanded-content-opened\");\n }\n expandedContentEl.addEventListener(\"transitionend\", (e) => {\n this.hideExpandedContent(e, expandedContentEl);\n });\n }\n }\n };\n\n render() {\n const { size, disabled, expanded, theme } = this;\n return (\n <Host\n id={this.accordionId}\n class={{\n [\"ic-accordion-disabled\"]: !!disabled,\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n }}\n aria-disabled={disabled ? \"true\" : \"false\"}\n >\n <button\n ref={(el) => (this.accordionBtnHeading = el)}\n id={`${this.accordionId}-button`}\n disabled={disabled}\n tabindex={disabled ? -1 : 0}\n class={{\n [`${size}`]: true,\n [\"section-button\"]: true,\n [\"section-button-open\"]: !!expanded && !disabled,\n }}\n aria-expanded={`${expanded}`}\n aria-controls=\"expanded-content-area\"\n onClick={this.toggleExpanded}\n >\n {isSlotUsed(this.el, \"icon\") && (\n <div class=\"icon-container\">\n <slot name=\"icon\" />\n </div>\n )}\n <ic-typography variant=\"subtitle-large\" class=\"section-header\">\n {isSlotUsed(this.el, \"heading\") ? (\n <slot name=\"heading\" />\n ) : (\n this.heading\n )}\n </ic-typography>\n <span\n class={{\n [\"expand-chevron\"]: true,\n [\"content-expanded-chevron\"]: !!expanded && !disabled,\n }}\n aria-hidden=\"true\"\n innerHTML={chevronIcon}\n />\n </button>\n <div\n class={{\n [\"expanded-content\"]: true,\n }}\n aria-labelledby={`${this.accordionId}-button`}\n role=\"region\"\n aria-hidden={`${!expanded}`}\n id=\"expanded-content-area\"\n ref={(el) => (this.expandedContentEl = el)}\n >\n <div class=\"expanded-content-inner\">\n {this.message ? (\n <ic-typography variant=\"body\">{this.message}</ic-typography>\n ) : (\n <slot />\n )}\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/cjs/ic-alert.cjs.entry.js CHANGED Viewed

@@ -2,30 +2,51 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-f982899d.js');
+const index = require('./index-d337cd8a.js');
 const closeIcon = require('./close-icon-7f6ef8e4.js');
-const helpers = require('./helpers-eca4c27e.js');
+const helpers = require('./helpers-08a9ec1c.js');
 const icAlertCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:block}:host ::slotted(ic-typography){--ic-typography-color:var(--ic-alert-description)}.container{min-height:var(--ic-alert-height);border-radius:var(--ic-space-xxs) var(--ic-space-xxxs) var(--ic-space-xxxs)\n    var(--ic-space-xxs);position:relative;display:flex;align-items:center}.container-neutral{background-color:var(--ic-alert-background-neutral);border:var(--ic-space-xxxs) solid var(--ic-alert-border-neutral)}.container-info{background-color:var(--ic-alert-background-info);border:var(--ic-space-xxxs) solid var(--ic-alert-border-info)}.container-warning{background-color:var(--ic-alert-background-warning);border:var(--ic-space-xxxs) solid var(--ic-alert-border-warning)}.container-error{background-color:var(--ic-alert-background-error);border:var(--ic-space-xxxs) solid var(--ic-alert-border-error)}.container-success{background-color:var(--ic-alert-background-success);border:var(--ic-space-xxxs) solid var(--ic-alert-border-success)}.alert-icon-container{height:100%;display:flex;align-items:center}.divider{height:100%;width:var(--ic-space-xs);border-radius:var(--ic-space-xxxs) 0 0 var(--ic-space-xxxs);position:absolute}.divider-neutral{background-color:var(--ic-alert-status-type-neutral)}.divider-info{background-color:var(--ic-alert-status-type-info)}.divider-warning{background-color:var(--ic-alert-status-type-warning)}.divider-error{background-color:var(--ic-alert-status-type-error)}.divider-success{background-color:var(--ic-alert-status-type-success)}.alert-icon{height:var(--ic-space-lg);width:1.375rem;margin-left:1.125rem}.icon-placeholder{margin-left:var(--ic-space-xs)}.alert-icon>svg{height:var(--ic-space-lg);width:var(--ic-space-lg);display:inline-block}:host([showdefaulticon=\"false\"]) .icon-neutral{visibility:hidden;width:0;margin-left:0.625rem}.icon-neutral>svg,::slotted(svg){height:var(--ic-space-lg);width:var(--ic-space-lg);display:inline-block;fill:var(--ic-alert-icon-neutral)}:host([variant=\"info\"]) .alert-icon svg{fill:var(--ic-alert-icon-info)}:host([variant=\"warning\"]) .alert-icon svg{fill:var(--ic-alert-icon-warning)}:host([variant=\"error\"]) .alert-icon svg{fill:var(--ic-alert-icon-error)}:host([variant=\"success\"]) .alert-icon svg{fill:var(--ic-alert-icon-success)}.alert-content{display:flex;align-items:center;margin-left:0.625rem;width:100%}.alert-message{display:flex;align-items:center;padding:var(--ic-space-xs) var(--ic-space-xs) var(--ic-space-xs) 0;flex:1;--ic-typography-color:var(--ic-alert-description)}.alert-message-title-above{display:inline}.alert-title{margin-right:var(--ic-space-xs);--ic-typography-color:var(--ic-alert-title)}.alert-title-above{white-space:normal}.alert-action-container{margin-right:var(--ic-space-xs);display:flex;align-items:center}.dismiss-icon{margin-right:var(--ic-space-xxxs);margin-left:-0.375rem;padding:0.375rem;border:none;border-radius:50%;background-color:inherit;display:flex;align-items:center;justify-content:center}.dismiss-icon>svg{color:var(--ic-alert-icon-dismissible)}.dismiss-icon:hover{cursor:pointer}@media (max-width: 628px){.alert-content{display:flex;flex-direction:column;align-items:flex-start}.alert-message{display:flex;flex-direction:column;align-items:flex-start}.alert-title{white-space:normal}.alert-action-container{margin-bottom:var(--ic-space-xs)}}@media (forced-colors: active){.container{border:var(--ic-border-hc)}}";
+const IcAlertStyle0 = icAlertCss;
 const Alert = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.icDismiss = index.createEvent(this, "icDismiss", 7);
         this.hostMutationObserver = null;
-        this.dismissAction = () => {
-            this.icDismiss.emit();
-        };
         this.alertTitleWrap = false;
         this.visible = true;
+        /**
+         * If `true`, the alert will have the 'alert' ARIA role and will be announced to screen readers.
+         */
         this.announced = true;
+        /**
+         * If `true`, the alert will have a close icon at the end to dismiss it.
+         */
         this.dismissible = false;
+        /**
+         * The optional title to display at the start of the alert.
+         */
         this.heading = "";
-        this.message = undefined;
+        /**
+         * If `true`, the default icon for the neutral variant will appear on the left of the alert.
+         */
         this.showDefaultIcon = true;
+        /**
+         * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
+         */
         this.theme = "inherit";
+        /**
+         * If `true`, the title and message will appear above and below instead of inline.
+         */
         this.titleAbove = false;
+        /**
+         * The variant of the alert which will be rendered.
+         */
         this.variant = "neutral";
+        this.dismissAction = () => {
+            this.icDismiss.emit();
+        };
     }
     disconnectedCallback() {
         var _a;
@@ -42,20 +63,20 @@ const Alert = class {
         this.visible = !this.visible;
     }
     alertTitleShouldWrap() {
-        var _a;
-        const titleHeight = (_a = this.el.shadowRoot.querySelector(".alert-title")) === null || _a === void 0 ? void 0 : _a.clientHeight;
-        if (titleHeight > 24)
+        var _a, _b;
+        const titleHeight = (_b = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".alert-title")) === null || _b === void 0 ? void 0 : _b.clientHeight;
+        if (titleHeight && titleHeight > 24)
             this.alertTitleWrap = true;
     }
     render() {
         const { variant, heading, message, titleAbove, dismissible, announced, visible, showDefaultIcon, theme, } = this;
-        return (visible && (index.h(index.Host, { role: announced ? "alert" : null, class: {
+        return (visible && (index.h(index.Host, { key: '335bc190a85988d6dd90dee36bc452a249159889', role: announced ? "alert" : null, class: {
                 [helpers.IcBrandForegroundEnum.Dark]: true,
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            } }, index.h("div", { class: {
+            } }, index.h("div", { key: 'e856d3193d274c465ff36bcbda07d7d32f005672', class: {
                 ["container"]: true,
                 [`container-${variant}`]: true,
-            } }, index.h("div", { class: "alert-icon-container" }, index.h("div", { class: {
+            } }, index.h("div", { key: '2ce18b9ad21036175efac411f6f975c042d1b262', class: "alert-icon-container" }, index.h("div", { key: 'd472ee06999d1f7ac81e4f17b7d951ad0d014c5f', class: {
                 ["divider"]: true,
                 [`divider-${variant}`]: true,
             } }), variant === "neutral" ? (helpers.isSlotUsed(this.el, "neutral-icon") ? (index.h("div", { class: "alert-icon svg-container icon-neutral" }, index.h("slot", { name: "neutral-icon" }))) : showDefaultIcon ? (index.h("span", { class: {
@@ -66,20 +87,20 @@ const Alert = class {
                 ["alert-icon"]: true,
                 ["svg-container"]: true,
                 [`icon-${variant}`]: true,
-            }, innerHTML: helpers.VARIANT_ICONS[variant].icon }))), index.h("div", { class: "alert-content" }, index.h("div", { class: {
+            }, innerHTML: helpers.VARIANT_ICONS[variant].icon }))), index.h("div", { key: 'd83902cf13b0e0de71ac43e725bab061e55dc7a4', class: "alert-content" }, index.h("div", { key: '8d85d750bee6bc70c6d8e8d6de15ab1244f61d67', class: {
                 ["alert-message"]: true,
                 ["alert-message-title-above"]: titleAbove || this.alertTitleWrap,
-            } }, heading && (index.h("ic-typography", { class: {
+            } }, heading && (index.h("ic-typography", { key: '597ee8eedb36fa6b5fd311d939fbf6f2ce6efd35', class: {
                 ["alert-title"]: true,
                 ["alert-title-above"]: titleAbove || this.alertTitleWrap,
-            }, variant: "subtitle-large" }, index.h("p", null, heading))), index.h("slot", { name: "message" }, index.h("ic-typography", { variant: "body" }, message))), helpers.isSlotUsed(this.el, "action") && (index.h("div", { class: "alert-action-container" }, index.h("slot", { name: "action" })))), index.h("div", { class: "dismiss-icon-container" }, dismissible && (index.h("ic-button", { class: {
+            }, variant: "subtitle-large" }, index.h("p", { key: 'b5a69877cd2d3d4d94c47084a2b7cb739c080b2e' }, heading))), index.h("slot", { key: 'f6b20259578c375633dff1a24d115500308766d6', name: "message" }, index.h("ic-typography", { key: '895813c7be5ddc2150f3fda932b69c5da684d460', variant: "body" }, message))), helpers.isSlotUsed(this.el, "action") && (index.h("div", { key: 'b18a1d6e25cc46771f33a09ca956fdcd64d407af', class: "alert-action-container" }, index.h("slot", { key: '05841b13b776380a6f52cd5cc1a8328df8de7407', name: "action" })))), index.h("div", { key: 'd58ecb605da9c1fe4b9931abc2bc95ce7aeb8074', class: "dismiss-icon-container" }, dismissible && (index.h("ic-button", { key: 'd9268c63861f40c897da738994cc35cae1244546', class: {
                 ["svg-container"]: true,
                 ["dismiss-icon"]: true,
             }, innerHTML: closeIcon.closeIcon, onClick: this.dismissAction, variant: "icon", theme: "dark", title: "Dismiss" })))))));
     }
     get el() { return index.getElement(this); }
 };
-Alert.style = icAlertCss;
+Alert.style = IcAlertStyle0;
 exports.ic_alert = Alert;

package/dist/cjs/ic-alert.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ic-alert.entry.cjs.js","mappings":"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","names":["renderDynamicChildSlots","h","Host","IcBrandForegroundEnum","isSlotUsed","VARIANT_ICONS","closeIcon"],"sources":["src/components/ic-alert/ic-alert.css?tag=ic-alert&encapsulation=shadow","src/components/ic-alert/ic-alert.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n display: block;\n}\n\n:host ::slotted(ic-typography) {\n --ic-typography-color: var(--ic-alert-description);\n}\n\n.container {\n min-height: var(--ic-alert-height);\n border-radius: var(--ic-space-xxs) var(--ic-space-xxxs) var(--ic-space-xxxs)\n var(--ic-space-xxs);\n position: relative;\n display: flex;\n align-items: center;\n}\n\n.container-neutral {\n background-color: var(--ic-alert-background-neutral);\n border: var(--ic-space-xxxs) solid var(--ic-alert-border-neutral);\n}\n\n.container-info {\n background-color: var(--ic-alert-background-info);\n border: var(--ic-space-xxxs) solid var(--ic-alert-border-info);\n}\n\n.container-warning {\n background-color: var(--ic-alert-background-warning);\n border: var(--ic-space-xxxs) solid var(--ic-alert-border-warning);\n}\n\n.container-error {\n background-color: var(--ic-alert-background-error);\n border: var(--ic-space-xxxs) solid var(--ic-alert-border-error);\n}\n\n.container-success {\n background-color: var(--ic-alert-background-success);\n border: var(--ic-space-xxxs) solid var(--ic-alert-border-success);\n}\n\n.alert-icon-container {\n height: 100%;\n display: flex;\n align-items: center;\n}\n\n.divider {\n height: 100%;\n width: var(--ic-space-xs);\n border-radius: var(--ic-space-xxxs) 0 0 var(--ic-space-xxxs);\n position: absolute;\n}\n\n.divider-neutral {\n background-color: var(--ic-alert-status-type-neutral);\n}\n\n.divider-info {\n background-color: var(--ic-alert-status-type-info);\n}\n\n.divider-warning {\n background-color: var(--ic-alert-status-type-warning);\n}\n\n.divider-error {\n background-color: var(--ic-alert-status-type-error);\n}\n\n.divider-success {\n background-color: var(--ic-alert-status-type-success);\n}\n\n.alert-icon {\n height: var(--ic-space-lg);\n width: 1.375rem;\n margin-left: 1.125rem;\n}\n\n.icon-placeholder {\n margin-left: var(--ic-space-xs);\n}\n\n.alert-icon > svg {\n height: var(--ic-space-lg);\n width: var(--ic-space-lg);\n display: inline-block;\n}\n\n/* required for Gatsby as prop does not seem to work when set to false /\n:host([showdefaulticon=\"false\"]) .icon-neutral {\n visibility: hidden;\n width: 0;\n margin-left: 0.625rem;\n}\n\n.icon-neutral > svg,\n::slotted(svg) {\n height: var(--ic-space-lg);\n width: var(--ic-space-lg);\n display: inline-block;\n fill: var(--ic-alert-icon-neutral);\n}\n\n:host([variant=\"info\"]) .alert-icon svg {\n fill: var(--ic-alert-icon-info);\n}\n\n:host([variant=\"warning\"]) .alert-icon svg {\n fill: var(--ic-alert-icon-warning);\n}\n\n:host([variant=\"error\"]) .alert-icon svg {\n fill: var(--ic-alert-icon-error);\n}\n\n:host([variant=\"success\"]) .alert-icon svg {\n fill: var(--ic-alert-icon-success);\n}\n\n.alert-content {\n display: flex;\n align-items: center;\n margin-left: 0.625rem;\n width: 100%;\n}\n\n.alert-message {\n display: flex;\n align-items: center;\n padding: var(--ic-space-xs) var(--ic-space-xs) var(--ic-space-xs) 0;\n flex: 1;\n --ic-typography-color: var(--ic-alert-description);\n}\n\n.alert-message-title-above {\n display: inline;\n}\n\n.alert-title {\n margin-right: var(--ic-space-xs);\n --ic-typography-color: var(--ic-alert-title);\n}\n\n.alert-title-above {\n white-space: normal;\n}\n\n.alert-action-container {\n margin-right: var(--ic-space-xs);\n display: flex;\n align-items: center;\n}\n\n.dismiss-icon {\n margin-right: var(--ic-space-xxxs);\n margin-left: -0.375rem;\n padding: 0.375rem;\n border: none;\n border-radius: 50%;\n background-color: inherit;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.dismiss-icon > svg {\n color: var(--ic-alert-icon-dismissible);\n}\n\n.dismiss-icon:hover {\n cursor: pointer;\n}\n\n@media (max-width: 628px) {\n .alert-content {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n }\n\n .alert-message {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n }\n\n .alert-title {\n white-space: normal;\n }\n\n .alert-action-container {\n margin-bottom: var(--ic-space-xs);\n }\n}\n\n@media (forced-colors: active) {\n .container {\n border: var(--ic-border-hc);\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n Host,\n State,\n Listen,\n Prop,\n h,\n} from \"@stencil/core\";\nimport closeIcon from \"../../assets/close-icon.svg\";\nimport { isSlotUsed, renderDynamicChildSlots } from \"../../utils/helpers\";\nimport {\n IcBrandForegroundEnum,\n IcStatusVariants,\n IcThemeMode,\n} from \"../../utils/types\";\nimport { VARIANT_ICONS } from \"../../utils/constants\";\n\n/\n @slot message - Content is placed to the right of the title.\n * @slot action - Content is placed to the right of the message.\n * @slot neutral-icon - A custom neutral icon is placed to the left of the title. This will override the default icon if used.\n /\n@Component({\n tag: \"ic-alert\",\n styleUrl: \"ic-alert.css\",\n shadow: true,\n})\nexport class Alert {\n private hostMutationObserver: MutationObserver = null;\n\n @Element() el: HTMLIcAlertElement;\n\n @State() alertTitleWrap: boolean = false;\n @State() visible: boolean = true;\n\n /\n If `true`, the alert will have the 'alert' ARIA role and will be announced to screen readers.\n /\n @Prop() announced?: boolean = true;\n\n /\n If `true`, the alert will have a close icon at the end to dismiss it.\n /\n @Prop() dismissible?: boolean = false;\n\n /\n The optional title to display at the start of the alert.\n /\n @Prop() heading?: string = \"\";\n\n /\n The main body message of the alert.\n /\n @Prop() message?: string;\n\n /\n If `true`, the default icon for the neutral variant will appear on the left of the alert.\n /\n @Prop() showDefaultIcon: boolean = true;\n\n /\n Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n /\n @Prop() theme?: IcThemeMode = \"inherit\";\n\n /\n If `true`, the title and message will appear above and below instead of inline.\n /\n @Prop() titleAbove?: boolean = false;\n\n /\n The variant of the alert which will be rendered.\n /\n @Prop() variant?: IcStatusVariants = \"neutral\";\n\n /\n Is emitted when the user dismisses the alert.\n */\n @Event() icDismiss: EventEmitter<void>;\n\n disconnectedCallback(): void {\n this.hostMutationObserver?.disconnect();\n }\n\n componentDidLoad(): void {\n this.alertTitleShouldWrap();\n\n this.hostMutationObserver = new MutationObserver((mutationList) =>\n renderDynamicChildSlots(mutationList, \"action\", this)\n );\n this.hostMutationObserver.observe(this.el, {\n childList: true,\n });\n }\n\n @Listen(\"icDismiss\", { capture: true })\n handleClick(): void {\n this.visible = !this.visible;\n }\n\n private dismissAction = (): void => {\n this.icDismiss.emit();\n };\n\n private alertTitleShouldWrap() {\n const titleHeight =\n this.el.shadowRoot.querySelector(\".alert-title\")?.clientHeight;\n if (titleHeight > 24) this.alertTitleWrap = true;\n }\n\n render() {\n const {\n variant,\n heading,\n message,\n titleAbove,\n dismissible,\n announced,\n visible,\n showDefaultIcon,\n theme,\n } = this;\n\n return (\n visible && (\n <Host\n role={announced ? \"alert\" : null}\n class={{\n [IcBrandForegroundEnum.Dark]: true,\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n }}\n >\n <div\n class={{\n [\"container\"]: true,\n [`container-${variant}`]: true,\n }}\n >\n <div class=\"alert-icon-container\">\n <div\n class={{\n [\"divider\"]: true,\n [`divider-${variant}`]: true,\n }}\n ></div>\n {variant === \"neutral\" ? (\n isSlotUsed(this.el, \"neutral-icon\") ? (\n <div class=\"alert-icon svg-container icon-neutral\">\n <slot name=\"neutral-icon\"></slot>\n </div>\n ) : showDefaultIcon ? (\n <span\n class={{\n [\"alert-icon\"]: true,\n [\"svg-container\"]: true,\n [`icon-${variant}`]: true,\n }}\n innerHTML={VARIANT_ICONS[variant].icon}\n ></span>\n ) : (\n <div class=\"icon-placeholder\"></div>\n )\n ) : (\n <span\n class={{\n [\"alert-icon\"]: true,\n [\"svg-container\"]: true,\n [`icon-${variant}`]: true,\n }}\n innerHTML={VARIANT_ICONS[variant].icon}\n ></span>\n )}\n </div>\n <div class=\"alert-content\">\n <div\n class={{\n [\"alert-message\"]: true,\n [\"alert-message-title-above\"]:\n titleAbove \|\| this.alertTitleWrap,\n }}\n >\n {heading && (\n <ic-typography\n class={{\n [\"alert-title\"]: true,\n [\"alert-title-above\"]: titleAbove \|\| this.alertTitleWrap,\n }}\n variant=\"subtitle-large\"\n >\n <p>{heading}</p>\n </ic-typography>\n )}\n <slot name=\"message\">\n <ic-typography variant=\"body\">{message}</ic-typography>\n </slot>\n </div>\n {isSlotUsed(this.el, \"action\") && (\n <div class=\"alert-action-container\">\n <slot name=\"action\" />\n </div>\n )}\n </div>\n <div class=\"dismiss-icon-container\">\n {dismissible && (\n <ic-button\n class={{\n [\"svg-container\"]: true,\n [\"dismiss-icon\"]: true,\n }}\n innerHTML={closeIcon}\n onClick={this.dismissAction}\n variant=\"icon\"\n theme=\"dark\"\n title=\"Dismiss\"\n ></ic-button>\n )}\n </div>\n </div>\n </Host>\n )\n );\n }\n}\n"],"version":3}
1	+ {"file":"ic-alert.entry.cjs.js","mappings":"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","names":["renderDynamicChildSlots","h","Host","IcBrandForegroundEnum","isSlotUsed","VARIANT_ICONS","closeIcon"],"sources":["src/components/ic-alert/ic-alert.css?tag=ic-alert&encapsulation=shadow","src/components/ic-alert/ic-alert.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n display: block;\n}\n\n:host ::slotted(ic-typography) {\n --ic-typography-color: var(--ic-alert-description);\n}\n\n.container {\n min-height: var(--ic-alert-height);\n border-radius: var(--ic-space-xxs) var(--ic-space-xxxs) var(--ic-space-xxxs)\n var(--ic-space-xxs);\n position: relative;\n display: flex;\n align-items: center;\n}\n\n.container-neutral {\n background-color: var(--ic-alert-background-neutral);\n border: var(--ic-space-xxxs) solid var(--ic-alert-border-neutral);\n}\n\n.container-info {\n background-color: var(--ic-alert-background-info);\n border: var(--ic-space-xxxs) solid var(--ic-alert-border-info);\n}\n\n.container-warning {\n background-color: var(--ic-alert-background-warning);\n border: var(--ic-space-xxxs) solid var(--ic-alert-border-warning);\n}\n\n.container-error {\n background-color: var(--ic-alert-background-error);\n border: var(--ic-space-xxxs) solid var(--ic-alert-border-error);\n}\n\n.container-success {\n background-color: var(--ic-alert-background-success);\n border: var(--ic-space-xxxs) solid var(--ic-alert-border-success);\n}\n\n.alert-icon-container {\n height: 100%;\n display: flex;\n align-items: center;\n}\n\n.divider {\n height: 100%;\n width: var(--ic-space-xs);\n border-radius: var(--ic-space-xxxs) 0 0 var(--ic-space-xxxs);\n position: absolute;\n}\n\n.divider-neutral {\n background-color: var(--ic-alert-status-type-neutral);\n}\n\n.divider-info {\n background-color: var(--ic-alert-status-type-info);\n}\n\n.divider-warning {\n background-color: var(--ic-alert-status-type-warning);\n}\n\n.divider-error {\n background-color: var(--ic-alert-status-type-error);\n}\n\n.divider-success {\n background-color: var(--ic-alert-status-type-success);\n}\n\n.alert-icon {\n height: var(--ic-space-lg);\n width: 1.375rem;\n margin-left: 1.125rem;\n}\n\n.icon-placeholder {\n margin-left: var(--ic-space-xs);\n}\n\n.alert-icon > svg {\n height: var(--ic-space-lg);\n width: var(--ic-space-lg);\n display: inline-block;\n}\n\n/* required for Gatsby as prop does not seem to work when set to false /\n:host([showdefaulticon=\"false\"]) .icon-neutral {\n visibility: hidden;\n width: 0;\n margin-left: 0.625rem;\n}\n\n.icon-neutral > svg,\n::slotted(svg) {\n height: var(--ic-space-lg);\n width: var(--ic-space-lg);\n display: inline-block;\n fill: var(--ic-alert-icon-neutral);\n}\n\n:host([variant=\"info\"]) .alert-icon svg {\n fill: var(--ic-alert-icon-info);\n}\n\n:host([variant=\"warning\"]) .alert-icon svg {\n fill: var(--ic-alert-icon-warning);\n}\n\n:host([variant=\"error\"]) .alert-icon svg {\n fill: var(--ic-alert-icon-error);\n}\n\n:host([variant=\"success\"]) .alert-icon svg {\n fill: var(--ic-alert-icon-success);\n}\n\n.alert-content {\n display: flex;\n align-items: center;\n margin-left: 0.625rem;\n width: 100%;\n}\n\n.alert-message {\n display: flex;\n align-items: center;\n padding: var(--ic-space-xs) var(--ic-space-xs) var(--ic-space-xs) 0;\n flex: 1;\n --ic-typography-color: var(--ic-alert-description);\n}\n\n.alert-message-title-above {\n display: inline;\n}\n\n.alert-title {\n margin-right: var(--ic-space-xs);\n --ic-typography-color: var(--ic-alert-title);\n}\n\n.alert-title-above {\n white-space: normal;\n}\n\n.alert-action-container {\n margin-right: var(--ic-space-xs);\n display: flex;\n align-items: center;\n}\n\n.dismiss-icon {\n margin-right: var(--ic-space-xxxs);\n margin-left: -0.375rem;\n padding: 0.375rem;\n border: none;\n border-radius: 50%;\n background-color: inherit;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.dismiss-icon > svg {\n color: var(--ic-alert-icon-dismissible);\n}\n\n.dismiss-icon:hover {\n cursor: pointer;\n}\n\n@media (max-width: 628px) {\n .alert-content {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n }\n\n .alert-message {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n }\n\n .alert-title {\n white-space: normal;\n }\n\n .alert-action-container {\n margin-bottom: var(--ic-space-xs);\n }\n}\n\n@media (forced-colors: active) {\n .container {\n border: var(--ic-border-hc);\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n Host,\n State,\n Listen,\n Prop,\n h,\n} from \"@stencil/core\";\nimport closeIcon from \"../../assets/close-icon.svg\";\nimport { isSlotUsed, renderDynamicChildSlots } from \"../../utils/helpers\";\nimport {\n IcBrandForegroundEnum,\n IcStatusVariants,\n IcThemeMode,\n} from \"../../utils/types\";\nimport { VARIANT_ICONS } from \"../../utils/constants\";\n\n/\n @slot message - Content is placed to the right of the title.\n * @slot action - Content is placed to the right of the message.\n * @slot neutral-icon - A custom neutral icon is placed to the left of the title. This will override the default icon if used.\n /\n@Component({\n tag: \"ic-alert\",\n styleUrl: \"ic-alert.css\",\n shadow: true,\n})\nexport class Alert {\n private hostMutationObserver: MutationObserver \| null = null;\n\n @Element() el: HTMLIcAlertElement;\n\n @State() alertTitleWrap: boolean = false;\n @State() visible: boolean = true;\n\n /\n If `true`, the alert will have the 'alert' ARIA role and will be announced to screen readers.\n /\n @Prop() announced?: boolean = true;\n\n /\n If `true`, the alert will have a close icon at the end to dismiss it.\n /\n @Prop() dismissible?: boolean = false;\n\n /\n The optional title to display at the start of the alert.\n /\n @Prop() heading?: string = \"\";\n\n /\n The main body message of the alert.\n /\n @Prop() message?: string;\n\n /\n If `true`, the default icon for the neutral variant will appear on the left of the alert.\n /\n @Prop() showDefaultIcon?: boolean = true;\n\n /\n Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n /\n @Prop() theme?: IcThemeMode = \"inherit\";\n\n /\n If `true`, the title and message will appear above and below instead of inline.\n /\n @Prop() titleAbove?: boolean = false;\n\n /\n The variant of the alert which will be rendered.\n /\n @Prop() variant?: IcStatusVariants = \"neutral\";\n\n /\n Is emitted when the user dismisses the alert.\n */\n @Event() icDismiss: EventEmitter<void>;\n\n disconnectedCallback(): void {\n this.hostMutationObserver?.disconnect();\n }\n\n componentDidLoad(): void {\n this.alertTitleShouldWrap();\n\n this.hostMutationObserver = new MutationObserver((mutationList) =>\n renderDynamicChildSlots(mutationList, \"action\", this)\n );\n this.hostMutationObserver.observe(this.el, {\n childList: true,\n });\n }\n\n @Listen(\"icDismiss\", { capture: true })\n handleClick(): void {\n this.visible = !this.visible;\n }\n\n private dismissAction = (): void => {\n this.icDismiss.emit();\n };\n\n private alertTitleShouldWrap() {\n const titleHeight =\n this.el.shadowRoot?.querySelector(\".alert-title\")?.clientHeight;\n if (titleHeight && titleHeight > 24) this.alertTitleWrap = true;\n }\n\n render() {\n const {\n variant,\n heading,\n message,\n titleAbove,\n dismissible,\n announced,\n visible,\n showDefaultIcon,\n theme,\n } = this;\n\n return (\n visible && (\n <Host\n role={announced ? \"alert\" : null}\n class={{\n [IcBrandForegroundEnum.Dark]: true,\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n }}\n >\n <div\n class={{\n [\"container\"]: true,\n [`container-${variant}`]: true,\n }}\n >\n <div class=\"alert-icon-container\">\n <div\n class={{\n [\"divider\"]: true,\n [`divider-${variant}`]: true,\n }}\n ></div>\n {variant === \"neutral\" ? (\n isSlotUsed(this.el, \"neutral-icon\") ? (\n <div class=\"alert-icon svg-container icon-neutral\">\n <slot name=\"neutral-icon\"></slot>\n </div>\n ) : showDefaultIcon ? (\n <span\n class={{\n [\"alert-icon\"]: true,\n [\"svg-container\"]: true,\n [`icon-${variant}`]: true,\n }}\n innerHTML={VARIANT_ICONS[variant].icon}\n ></span>\n ) : (\n <div class=\"icon-placeholder\"></div>\n )\n ) : (\n <span\n class={{\n [\"alert-icon\"]: true,\n [\"svg-container\"]: true,\n [`icon-${variant}`]: true,\n }}\n innerHTML={VARIANT_ICONS[variant!].icon}\n ></span>\n )}\n </div>\n <div class=\"alert-content\">\n <div\n class={{\n [\"alert-message\"]: true,\n [\"alert-message-title-above\"]:\n titleAbove \|\| this.alertTitleWrap,\n }}\n >\n {heading && (\n <ic-typography\n class={{\n [\"alert-title\"]: true,\n [\"alert-title-above\"]: titleAbove \|\| this.alertTitleWrap,\n }}\n variant=\"subtitle-large\"\n >\n <p>{heading}</p>\n </ic-typography>\n )}\n <slot name=\"message\">\n <ic-typography variant=\"body\">{message}</ic-typography>\n </slot>\n </div>\n {isSlotUsed(this.el, \"action\") && (\n <div class=\"alert-action-container\">\n <slot name=\"action\" />\n </div>\n )}\n </div>\n <div class=\"dismiss-icon-container\">\n {dismissible && (\n <ic-button\n class={{\n [\"svg-container\"]: true,\n [\"dismiss-icon\"]: true,\n }}\n innerHTML={closeIcon}\n onClick={this.dismissAction}\n variant=\"icon\"\n theme=\"dark\"\n title=\"Dismiss\"\n ></ic-button>\n )}\n </div>\n </div>\n </Host>\n )\n );\n }\n}\n"],"version":3}

package/dist/cjs/ic-back-to-top.cjs.entry.js CHANGED Viewed

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-f982899d.js');
-const helpers = require('./helpers-eca4c27e.js');
+const index = require('./index-d337cd8a.js');
+const helpers = require('./helpers-08a9ec1c.js');
 const ArrowUpward = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" aria-hidden="true">
     <path d="M0 8L1.41 9.41L7 3.83V16H9V3.83L14.58 9.42L16 8L8 0L0 8Z"/>
@@ -11,12 +11,28 @@ const ArrowUpward = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"
 `;
 const icBackToTopCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:flex;flex:row;height:0.1px}:host(.ic-back-to-top-right){justify-content:flex-end}:host(.ic-back-to-top-right) ic-button{margin-right:var(--margin-right, 1rem)}:host(.ic-back-to-top-right) .ic-back-to-top-icon{padding-top:var(--ic-space-xxs);padding-right:var(--ic-space-xs)}:host(.ic-back-to-top-left){justify-content:flex-start}:host(.ic-back-to-top-left) ic-button{margin-left:var(--margin-left, 1rem)}:host(.ic-back-to-top-left) .ic-back-to-top-icon{padding-top:var(--ic-space-xxs);padding-right:var(--ic-space-xs)}:host(.ic-back-to-top-center){justify-content:center}:host(.ic-back-to-top-center) .ic-back-to-top-icon{padding-top:var(--ic-space-xxs);padding-right:var(--ic-space-xs)}ic-button{height:2.5rem;align-items:center;background-color:var(--ic-color-background-primary);border-radius:5rem;box-shadow:var(--ic-elevation-overlay);visibility:hidden;position:fixed;bottom:var(--ic-space-md);opacity:0;transition:visibility 0s linear var(--ic-transition-duration-slow),\n    opacity var(--ic-transition-duration-slow);z-index:var(--ic-z-index-back-to-top)}:host([variant=\"icon\"]) ic-button::part(button){margin:0}ic-button::part(button){border-radius:5rem}ic-button.show{visibility:visible;opacity:1;transition:visibility 0s linear 0s,\n    opacity var(--ic-transition-duration-slow),\n    box-shadow var(--ic-easing-transition-fast)}ic-button.offset-banner:not(.by-footer){margin-bottom:var(--footer-offset, var(--ic-space-lg))}.ic-back-to-top-icon>svg{height:var(--ic-space-md);width:var(--ic-space-md)}.icon-only{width:2.5rem}.icon-only .ic-back-to-top-icon>svg{padding-left:calc(var(--ic-space-xs) - var(--ic-space-1px))}ic-button.by-footer{position:relative;bottom:var(--footer-offset, 3.5rem)}@media (forced-colors: active){.icon-only .ic-back-to-top-icon>svg{padding-left:calc(var(--ic-space-xs) - var(--ic-space-xxxs))}}";
+const IcBackToTopStyle0 = icBackToTopCss;
 const backToTopLabel = "Back to top";
 const BackToTop = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.topObserver = null;
+        this.bannerOffset = false;
+        this.footerVisible = false;
+        this.targetElVisible = true;
+        /**
+         * The horizontal position of the element.
+         */
+        this.position = "right";
+        /**
+         * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
+         */
+        this.theme = "inherit";
+        /**
+         * The variant of the button to render
+         */
+        this.variant = "default";
         this.getObservedEl = () => {
             return document.querySelector("#ic-back-to-top-target");
         };
@@ -73,7 +89,9 @@ const BackToTop = class {
             objBackToTopTargetEl.setAttribute("tabindex", "-1"); // Needed for virtual cursor behaviour to work
             objParent.insertBefore(objBackToTopTargetEl, this.targetEl);
             // resize observer needs to factor in any top margin on the target el
-            const marginTop = getComputedStyle(this.targetEl).marginTop;
+            const marginTop = this.targetEl
+                ? getComputedStyle(this.targetEl).marginTop
+                : 0;
             this.topObserver = new IntersectionObserver(this.targetElObserverCallback, {
                 threshold: [0],
                 rootMargin: `${marginTop} 0px 0px 0px`,
@@ -81,11 +99,12 @@ const BackToTop = class {
             this.topObserver.observe(objBackToTopTargetEl);
         };
         this.handleClick = () => {
+            var _a;
             if (this.isTargetElNull) {
                 window.scrollTo(0, 0);
             }
             else {
-                this.targetEl.scrollIntoView();
+                (_a = this.targetEl) === null || _a === void 0 ? void 0 : _a.scrollIntoView();
             }
             // Get virtual cursor to move
             this.getObservedEl().focus();
@@ -95,13 +114,6 @@ const BackToTop = class {
             const banners = document.querySelectorAll("ic-classification-banner:not([inline='true'])");
             this.bannerOffset = banners.length > 0;
         };
-        this.bannerOffset = false;
-        this.footerVisible = false;
-        this.targetElVisible = true;
-        this.position = "right";
-        this.target = undefined;
-        this.theme = "inherit";
-        this.variant = "default";
     }
     watchPropHandler(newValue, oldValue) {
         //added for gatsby rehydration issue where prop is initially undefined but then changes to actual value
@@ -132,15 +144,15 @@ const BackToTop = class {
         const btnVariant = variant === "icon" ? "icon-secondary" : "secondary";
         const size = variant === "icon" ? "large" : "medium";
         const label = variant === "icon" ? "" : backToTopLabel;
-        return (index.h(index.Host, { class: {
+        return (index.h(index.Host, { key: '38b224538ee269a88ce0dfe19938bd795ce2e9f3', class: {
                 [`ic-theme-${this.theme}`]: this.theme !== "inherit",
                 [`ic-back-to-top-${this.position}`]: true,
-            } }, index.h("ic-button", { "aria-label": backToTopLabel, variant: btnVariant, size: size, onClick: this.handleClick, class: {
+            } }, index.h("ic-button", { key: '86a2e578c5241853c2ce446a6c08bbac77041b1b', "aria-label": backToTopLabel, variant: btnVariant, size: size, onClick: this.handleClick, class: {
                 ["offset-banner"]: bannerOffset,
                 ["show"]: !targetElVisible,
                 ["by-footer"]: footerVisible,
                 ["icon-only"]: variant === "icon",
-            }, theme: this.theme }, index.h("span", { class: "ic-back-to-top-icon", innerHTML: ArrowUpward }), label)));
+            }, theme: this.theme }, index.h("span", { key: '7405853ed5bb0e807e4bc0c8f1d4797ec51f5900', class: "ic-back-to-top-icon", innerHTML: ArrowUpward }), label)));
     }
     static get delegatesFocus() { return true; }
     get el() { return index.getElement(this); }
@@ -148,7 +160,7 @@ const BackToTop = class {
         "target": ["watchPropHandler"]
     }; }
 };
-BackToTop.style = icBackToTopCss;
+BackToTop.style = IcBackToTopStyle0;
 exports.ic_back_to_top = BackToTop;