@limetech/lime-elements 38.13.7 → 38.15.0

package/dist/cjs/limel-collapsible-section.cjs.entry.js

@@ -6,8 +6,9 @@ const index = require('./index-174a078a.js');
 const dispatchResizeEvent = require('./dispatch-resize-event-4462d78f.js');
 const makeEnterClickable = require('./make-enter-clickable-71e4750b.js');
 const randomString = require('./random-string-e8ad4419.js');
+const getIconProps = require('./get-icon-props-65f39e40.js');
 
-const collapsibleSectionCss = "@charset \"UTF-8\";:host{--mdc-theme-primary:var(\n      --lime-primary-color,\n      rgb(var(--color-teal-default))\n  );--mdc-theme-secondary:var(\n      --lime-secondary-color,\n      rgb(var(--contrast-1100))\n  );--mdc-theme-on-primary:var(\n      --lime-on-primary-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-on-secondary:var(\n      --lime-on-secondary-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-text-disabled-on-background:var(\n      --lime-text-disabled-on-background-color,\n      rgba(var(--contrast-1700), 0.38)\n  );--mdc-theme-text-primary-on-background:var(\n      --lime-text-primary-on-background-color,\n      rgba(var(--contrast-1700), 0.87)\n  );--mdc-theme-text-secondary-on-background:var(\n      --lime-text-secondary-on-background-color,\n      rgba(var(--contrast-1700), 0.54)\n  );--mdc-theme-error:var(\n      --lime-error-background-color,\n      rgb(var(--color-red-dark))\n  );--lime-error-text-color:rgb(var(--color-red-darker));--mdc-theme-surface:var(\n      --lime-surface-background-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-on-surface:var(\n      --lime-on-surface-color,\n      rgb(var(--contrast-1500))\n  )}:host(limel-collapsible-section){--border-radius-of-header:0.75rem;display:block}:host([hidden]){display:none}.open-close-toggle{all:unset;position:absolute;inset:0;width:100%;transition:background-color 0.4s ease, border-radius 0.1s ease;cursor:pointer;z-index:-1;background-color:var(--closed-header-background-color, rgb(var(--contrast-200)));border-radius:var(--border-radius-of-header)}.open-close-toggle:focus{outline:none}.open-close-toggle:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.open-close-toggle:hover{background-color:var(--open-header-background-color, rgb(var(--contrast-300)))}section.open .open-close-toggle{background-color:var(--open-header-background-color, rgb(var(--contrast-100)));border-radius:var(--border-radius-of-header) var(--border-radius-of-header) 0 0}section.open .open-close-toggle:hover{background-color:var(--open-header-background-color, rgb(var(--contrast-300)))}.title,.divider-line,.expand-icon{pointer-events:none}section{transition:box-shadow 0.4s ease;border-radius:var(--border-radius-of-header)}section[aria-invalid]:not([aria-invalid=false]){--header-stroke-color:rgb(var(--color-red-default)) !important}section[aria-invalid]:not([aria-invalid=false]):not(.open){box-shadow:0 0 0 1px rgb(var(--color-red-default))}header{isolation:isolate;position:relative;align-items:center;display:flex;justify-content:space-between;padding-left:0.5rem;height:2.5rem}.title{font-size:1rem;font-weight:300;color:var(--mdc-theme-on-surface);justify-self:flex-start;user-select:none;padding-right:0.5rem;height:auto;max-height:3rem;line-height:1.2rem;display:-webkit-box;overflow:hidden;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:2}.divider-line{transition:opacity 0.3s ease 0.3s;flex-grow:1;height:0.125rem;border-radius:1rem;background-color:var(--header-stroke-color, rgb(var(--contrast-900)));margin-right:0.5rem;opacity:0}section.open .divider-line{opacity:0.16}.actions{justify-self:flex-end;flex-shrink:0}::slotted([slot=header]){margin-right:0.5rem}.body{background-color:var(--body-background-color, var(--contrast-100));padding-left:var(--body-padding, 1.25rem);padding-right:var(--body-padding, 1.25rem);border-radius:0 0 var(--border-radius-of-header) var(--border-radius-of-header)}.body{--limel-cs-opacity-transition-speed:0.1s;--limel-cs-opacity-transition-delay:0s;--limel-cs-grid-template-rows-transition-speed:0.3s;transition:grid-template-rows var(--limel-cs-grid-template-rows-transition-speed) cubic-bezier(1, 0.09, 0, 0.89);display:grid;grid-template-rows:0fr}.body slot{transition:opacity var(--limel-cs-opacity-transition-speed) ease var(--limel-cs-opacity-transition-delay);display:block;overflow:hidden;opacity:0}section.open .body{--limel-cs-opacity-transition-speed:0.4s;--limel-cs-opacity-transition-delay:0.3s;--limel-cs-grid-template-rows-transition-speed:0.46s;grid-template-rows:1fr}section.open .body slot{opacity:1}header:hover+.body{will-change:grid-template-rows}header:hover+.body slot{will-change:opacity}.expand-icon{position:relative;height:1.875rem;margin:0 1rem 0 0.5rem;width:0.75rem;flex-shrink:0}.line{position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;width:100%;border-radius:1rem;height:0.125rem;background-color:var(--header-stroke-color, rgb(var(--contrast-900)))}.line:first-of-type,.line:last-of-type{transition:opacity 0.2s ease 0.1s, transform 0.4s ease 0.3s}.line:first-of-type{transform:rotate3d(0, 0, 1, 90deg)}.line:last-of-type{transform:rotate3d(0, 0, 1, -90deg)}.line:nth-of-type(2),.line:nth-of-type(3){transition:opacity 0.2s ease, transform 0.18s ease}section.open .line:first-of-type,section.open .line:last-of-type{transition:opacity 0.2s ease 0.1s, transform 0.4s ease 0.3s}section.open .line:first-of-type{transform:rotate3d(0, 0, 1, 0deg)}section.open .line:last-of-type{transform:rotate3d(0, 0, 1, 0deg)}section.open .line:nth-of-type(2),section.open .line:nth-of-type(3){transition:opacity 1s ease, transform 0.4s ease}section.open .line:nth-of-type(2){transform:translate3d(0, -1rem, 0);opacity:0}section.open .line:nth-of-type(3){transform:translate3d(0, 1rem, 0);opacity:0}.open-close-toggle:hover+.expand-icon .line:first-of-type{transform:rotate3d(0, 0, 1, 0deg)}.open-close-toggle:hover+.expand-icon .line:last-of-type{transform:rotate3d(0, 0, 1, 0deg)}.open-close-toggle:hover+.expand-icon .line:nth-of-type(2),.open-close-toggle:hover+.expand-icon .line:nth-of-type(3){transition:opacity 0.5s ease 0.4s, transform 0.7s cubic-bezier(0.85, 0.11, 0.14, 1.35) 0.2s}.open-close-toggle:hover+.expand-icon .line:nth-of-type(2){transform:translate3d(0, -0.5rem, 0);opacity:0.4}.open-close-toggle:hover+.expand-icon .line:nth-of-type(3){transform:translate3d(0, 0.5rem, 0);opacity:0.4}section.open .open-close-toggle:hover+.expand-icon .line:first-of-type,section.open .open-close-toggle:hover+.expand-icon .line:last-of-type{transition:opacity 0.2s ease 0.4s, transform 0.4s cubic-bezier(0.85, 0.11, 0.14, 1.35) 0.2s}section.open .open-close-toggle:hover+.expand-icon .line:first-of-type{transform:rotate3d(0, 0, 1, 45deg)}section.open .open-close-toggle:hover+.expand-icon .line:last-of-type{transform:rotate3d(0, 0, 1, -45deg)}section.open .open-close-toggle:hover+.expand-icon .line:nth-of-type(2){transform:translate3d(0, -1rem, 0);opacity:0}section.open .open-close-toggle:hover+.expand-icon .line:nth-of-type(3){transform:translate3d(0, 1rem, 0);opacity:0}";
+const collapsibleSectionCss = "@charset \"UTF-8\";:host{--mdc-theme-primary:var(\n      --lime-primary-color,\n      rgb(var(--color-teal-default))\n  );--mdc-theme-secondary:var(\n      --lime-secondary-color,\n      rgb(var(--contrast-1100))\n  );--mdc-theme-on-primary:var(\n      --lime-on-primary-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-on-secondary:var(\n      --lime-on-secondary-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-text-disabled-on-background:var(\n      --lime-text-disabled-on-background-color,\n      rgba(var(--contrast-1700), 0.38)\n  );--mdc-theme-text-primary-on-background:var(\n      --lime-text-primary-on-background-color,\n      rgba(var(--contrast-1700), 0.87)\n  );--mdc-theme-text-secondary-on-background:var(\n      --lime-text-secondary-on-background-color,\n      rgba(var(--contrast-1700), 0.54)\n  );--mdc-theme-error:var(\n      --lime-error-background-color,\n      rgb(var(--color-red-dark))\n  );--lime-error-text-color:rgb(var(--color-red-darker));--mdc-theme-surface:var(\n      --lime-surface-background-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-on-surface:var(\n      --lime-on-surface-color,\n      rgb(var(--contrast-1500))\n  )}:host(limel-collapsible-section){--border-radius-of-header:0.75rem;display:block}:host([hidden]){display:none}.open-close-toggle{all:unset;position:absolute;inset:0;width:100%;transition:background-color 0.4s ease, border-radius 0.1s ease;cursor:pointer;z-index:-1;background-color:var(--closed-header-background-color, rgb(var(--contrast-200)));border-radius:var(--border-radius-of-header)}.open-close-toggle:focus{outline:none}.open-close-toggle:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.open-close-toggle:hover{background-color:var(--open-header-background-color, rgb(var(--contrast-300)))}section.open .open-close-toggle{background-color:var(--open-header-background-color, rgb(var(--contrast-100)));border-radius:var(--border-radius-of-header) var(--border-radius-of-header) 0 0}section.open .open-close-toggle:hover{background-color:var(--open-header-background-color, rgb(var(--contrast-300)))}.title,.divider-line,.expand-icon{pointer-events:none}section{transition:box-shadow 0.4s ease;border-radius:var(--border-radius-of-header)}section[aria-invalid]:not([aria-invalid=false]){--header-stroke-color:rgb(var(--color-red-default)) !important}section[aria-invalid]:not([aria-invalid=false]):not(.open){box-shadow:0 0 0 1px rgb(var(--color-red-default))}header{isolation:isolate;position:relative;align-items:center;display:flex;justify-content:space-between;gap:0.5rem;padding-left:0.5rem;height:2.5rem}limel-icon{width:1.5rem}.title{font-size:1rem;font-weight:300;color:var(--mdc-theme-on-surface);justify-self:flex-start;user-select:none;height:auto;max-height:3rem;line-height:1.2rem;display:-webkit-box;overflow:hidden;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:2}.divider-line{transition:opacity 0.3s ease 0.3s;flex-grow:1;height:0.125rem;border-radius:1rem;background-color:var(--header-stroke-color, rgb(var(--contrast-900)));opacity:0;margin-right:0.5rem}section.open .divider-line{opacity:0.16}.actions{justify-self:flex-end;flex-shrink:0}::slotted([slot=header]){margin-right:0.5rem}.body{background-color:var(--body-background-color, var(--contrast-100));padding-left:var(--body-padding, 1.25rem);padding-right:var(--body-padding, 1.25rem);border-radius:0 0 var(--border-radius-of-header) var(--border-radius-of-header)}.body{--limel-cs-opacity-transition-speed:0.1s;--limel-cs-opacity-transition-delay:0s;--limel-cs-grid-template-rows-transition-speed:0.3s;transition:grid-template-rows var(--limel-cs-grid-template-rows-transition-speed) cubic-bezier(1, 0.09, 0, 0.89);display:grid;grid-template-rows:0fr}.body slot{transition:opacity var(--limel-cs-opacity-transition-speed) ease var(--limel-cs-opacity-transition-delay);display:block;overflow:hidden;opacity:0}section.open .body{--limel-cs-opacity-transition-speed:0.4s;--limel-cs-opacity-transition-delay:0.3s;--limel-cs-grid-template-rows-transition-speed:0.46s;grid-template-rows:1fr}section.open .body slot{opacity:1}header:hover+.body{will-change:grid-template-rows}header:hover+.body slot{will-change:opacity}.expand-icon{position:relative;height:1.875rem;margin:0 0 0 0.5rem;width:0.75rem;flex-shrink:0}.line{position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;width:100%;border-radius:1rem;height:0.125rem;background-color:var(--header-stroke-color, rgb(var(--contrast-900)))}.line:first-of-type,.line:last-of-type{transition:opacity 0.2s ease 0.1s, transform 0.4s ease 0.3s}.line:first-of-type{transform:rotate3d(0, 0, 1, 90deg)}.line:last-of-type{transform:rotate3d(0, 0, 1, -90deg)}.line:nth-of-type(2),.line:nth-of-type(3){transition:opacity 0.2s ease, transform 0.18s ease}section.open .line:first-of-type,section.open .line:last-of-type{transition:opacity 0.2s ease 0.1s, transform 0.4s ease 0.3s}section.open .line:first-of-type{transform:rotate3d(0, 0, 1, 0deg)}section.open .line:last-of-type{transform:rotate3d(0, 0, 1, 0deg)}section.open .line:nth-of-type(2),section.open .line:nth-of-type(3){transition:opacity 1s ease, transform 0.4s ease}section.open .line:nth-of-type(2){transform:translate3d(0, -1rem, 0);opacity:0}section.open .line:nth-of-type(3){transform:translate3d(0, 1rem, 0);opacity:0}.open-close-toggle:hover+.expand-icon .line:first-of-type{transform:rotate3d(0, 0, 1, 0deg)}.open-close-toggle:hover+.expand-icon .line:last-of-type{transform:rotate3d(0, 0, 1, 0deg)}.open-close-toggle:hover+.expand-icon .line:nth-of-type(2),.open-close-toggle:hover+.expand-icon .line:nth-of-type(3){transition:opacity 0.5s ease 0.4s, transform 0.7s cubic-bezier(0.85, 0.11, 0.14, 1.35) 0.2s}.open-close-toggle:hover+.expand-icon .line:nth-of-type(2){transform:translate3d(0, -0.5rem, 0);opacity:0.4}.open-close-toggle:hover+.expand-icon .line:nth-of-type(3){transform:translate3d(0, 0.5rem, 0);opacity:0.4}section.open .open-close-toggle:hover+.expand-icon .line:first-of-type,section.open .open-close-toggle:hover+.expand-icon .line:last-of-type{transition:opacity 0.2s ease 0.4s, transform 0.4s cubic-bezier(0.85, 0.11, 0.14, 1.35) 0.2s}section.open .open-close-toggle:hover+.expand-icon .line:first-of-type{transform:rotate3d(0, 0, 1, 45deg)}section.open .open-close-toggle:hover+.expand-icon .line:last-of-type{transform:rotate3d(0, 0, 1, -45deg)}section.open .open-close-toggle:hover+.expand-icon .line:nth-of-type(2){transform:translate3d(0, -1rem, 0);opacity:0}section.open .open-close-toggle:hover+.expand-icon .line:nth-of-type(3){transform:translate3d(0, 1rem, 0);opacity:0}";
 
 const CollapsibleSection = class {
   constructor(hostRef) {
@@ -16,6 +17,7 @@ const CollapsibleSection = class {
     this.close = index.createEvent(this, "close", 7);
     this.action = index.createEvent(this, "action", 7);
     this.bodyId = randomString.createRandomString();
+    this.headingId = randomString.createRandomString();
     this.onClick = () => {
       this.handleInteraction();
     };
@@ -30,6 +32,23 @@ const CollapsibleSection = class {
         this.close.emit();
       }
     };
+    this.renderIcon = () => {
+      if (!this.icon) {
+        return;
+      }
+      const name = getIconProps.getIconName(this.icon);
+      const color = getIconProps.getIconColor(this.icon);
+      const title = getIconProps.getIconTitle(this.icon);
+      return (index.h("limel-icon", { name: name, "aria-label": title, "aria-hidden": title ? null : 'true', style: {
+          color: `${color}`,
+        } }));
+    };
+    this.renderHeading = () => {
+      if (!this.header) {
+        return;
+      }
+      return (index.h("h2", { class: "title mdc-typography mdc-typography--headline2", id: this.headingId }, this.header));
+    };
     this.renderActions = () => {
       if (!this.actions) {
         return;
@@ -45,6 +64,7 @@ const CollapsibleSection = class {
     };
     this.isOpen = false;
     this.header = undefined;
+    this.icon = undefined;
     this.invalid = false;
     this.actions = undefined;
   }
@@ -57,7 +77,7 @@ const CollapsibleSection = class {
     makeEnterClickable.removeEnterClickable(button);
   }
   render() {
-    return (index.h("section", { class: `${this.isOpen ? 'open' : ''}`, "aria-invalid": this.invalid }, index.h("header", null, index.h("button", { class: "open-close-toggle", onClick: this.onClick, "aria-controls": this.bodyId }), index.h("div", { class: "expand-icon" }, index.h("div", { class: "line" }), index.h("div", { class: "line" }), index.h("div", { class: "line" }), index.h("div", { class: "line" })), index.h("h2", { class: "title mdc-typography mdc-typography--headline2" }, this.header), index.h("div", { class: "divider-line" }), this.renderHeaderSlot(), this.renderActions()), index.h("div", { class: "body", "aria-hidden": String(!this.isOpen), id: this.bodyId }, index.h("slot", null))));
+    return (index.h("section", { class: `${this.isOpen ? 'open' : ''}`, "aria-invalid": this.invalid, "aria-labelledby": this.header ? this.headingId : null }, index.h("header", null, index.h("button", { class: "open-close-toggle", onClick: this.onClick, "aria-controls": this.bodyId }), index.h("div", { class: "expand-icon" }, index.h("div", { class: "line" }), index.h("div", { class: "line" }), index.h("div", { class: "line" }), index.h("div", { class: "line" })), this.renderIcon(), this.renderHeading(), index.h("div", { class: "divider-line", role: "presentation" }), this.renderHeaderSlot(), this.renderActions()), index.h("div", { class: "body", "aria-hidden": String(!this.isOpen), id: this.bodyId }, index.h("slot", null))));
   }
   renderHeaderSlot() {
     return index.h("slot", { name: "header" });

package/dist/cjs/limel-collapsible-section.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"limel-collapsible-section.entry.cjs.js","mappings":";;;;;;;;;AAAA,MAAM,qBAAqB,GAAG,m9MAAm9M;;MCyCp+M,kBAAkB;;;;;;IA+CnB,WAAM,GAAGA,+BAAkB,EAAE,CAAC;IAsD9B,YAAO,GAAG;MACd,IAAI,CAAC,iBAAiB,EAAE,CAAC;KAC5B,CAAC;IAEM,sBAAiB,GAAG;MACxB,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;MAE3B,IAAI,IAAI,CAAC,MAAM,EAAE;QACb,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;QACjB,MAAM,iBAAiB,GAAG,GAAG,CAAC;QAC9B,UAAU,CAACC,uCAAmB,EAAE,iBAAiB,CAAC,CAAC;OACtD;WAAM;QACH,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;OACrB;KACJ,CAAC;IAEM,kBAAa,GAAG;MACpB,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;QACf,OAAO;OACV;MAED,QACIC,iBAAK,KAAK,EAAC,SAAS,IACf,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,kBAAkB,CAAC,CACxC,EACR;KACL,CAAC;IAMM,uBAAkB,GAAG,CAAC,MAAc;MACxC,QACIA,+BACI,IAAI,EAAE,MAAM,CAAC,IAAI,EACjB,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,QAAQ,EAAE,MAAM,CAAC,QAAQ,EACzB,OAAO,EAAE,IAAI,CAAC,iBAAiB,CAAC,MAAM,CAAC,GACzC,EACJ;KACL,CAAC;IAEM,sBAAiB,GAAG,CAAC,MAAc,KAAK,CAAC,KAAiB;MAC9D,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;KAC5B,CAAC;kBA9IuB,KAAK;;mBAab,KAAK;;;EA+Bf,kBAAkB;IACrB,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAC7C,oBAAoB,CACR,CAAC;IAEjBC,qCAAkB,CAAC,MAAM,CAAC,CAAC;GAC9B;EAEM,oBAAoB;IACvB,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAC7C,oBAAoB,CACR,CAAC;IAEjBC,uCAAoB,CAAC,MAAM,CAAC,CAAC;GAChC;EAEM,MAAM;IACT,QACIF,qBACI,KAAK,EAAE,GAAG,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,EAAE,EAAE,kBACvB,IAAI,CAAC,OAAO,IAE1BA,wBACIA,oBACI,KAAK,EAAC,mBAAmB,EACzB,OAAO,EAAE,IAAI,CAAC,OAAO,mBACN,IAAI,CAAC,MAAM,GAC5B,EACFA,iBAAK,KAAK,EAAC,aAAa,IACpBA,iBAAK,KAAK,EAAC,MAAM,GAAG,EACpBA,iBAAK,KAAK,EAAC,MAAM,GAAG,EACpBA,iBAAK,KAAK,EAAC,MAAM,GAAG,EACpBA,iBAAK,KAAK,EAAC,MAAM,GAAG,CAClB,EACNA,gBAAI,KAAK,EAAC,gDAAgD,IACrD,IAAI,CAAC,MAAM,CACX,EACLA,iBAAK,KAAK,EAAC,cAAc,GAAG,EAC3B,IAAI,CAAC,gBAAgB,EAAE,EACvB,IAAI,CAAC,aAAa,EAAE,CAChB,EACTA,iBACI,KAAK,EAAC,MAAM,iBACC,MAAM,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,EACjC,EAAE,EAAE,IAAI,CAAC,MAAM,IAEfA,qBAAQ,CACN,CACA,EACZ;GACL;EA8BO,gBAAgB;IACpB,OAAOA,kBAAM,IAAI,EAAC,QAAQ,GAAG,CAAC;GACjC;;;;;;;","names":["createRandomString","dispatchResizeEvent","h","makeEnterClickable","removeEnterClickable"],"sources":["./src/components/collapsible-section/collapsible-section.scss?tag=limel-collapsible-section&encapsulation=shadow","./src/components/collapsible-section/collapsible-section.tsx"],"sourcesContent":["@use '../../style/internal/lime-theme';\n@use '../../style/mixins';\n@use '../../style/internal/shared_input-select-picker';\n\n/**\n * @prop --closed-header-background-color: background color for header when closed\n * @prop --open-header-background-color: background color for header when open\n * @prop --header-stroke-color: color of the animated icons that visualize collapsed or normal states of the headers, as well as the divider line on headers\n * @prop --body-background-color: background color for body\n * @prop --body-padding: space around content of the body\n */\n\n:host(limel-collapsible-section) {\n    --border-radius-of-header: 0.75rem;\n    display: block;\n}\n\n:host([hidden]) {\n    display: none;\n}\n\n.open-close-toggle {\n    all: unset;\n    position: absolute;\n    inset: 0;\n    width: 100%; // for Firefox\n    @include mixins.visualize-keyboard-focus;\n    transition:\n        background-color 0.4s ease,\n        border-radius 0.1s ease;\n    cursor: pointer;\n    z-index: -1;\n\n    background-color: var(\n        --closed-header-background-color,\n        rgb(var(--contrast-200))\n    );\n    border-radius: var(--border-radius-of-header);\n\n    &:hover {\n        background-color: var(\n            --open-header-background-color,\n            rgb(var(--contrast-300))\n        );\n    }\n\n    section.open & {\n        background-color: var(\n            --open-header-background-color,\n            rgb(var(--contrast-100))\n        );\n        border-radius: var(--border-radius-of-header)\n            var(--border-radius-of-header) 0 0;\n        &:hover {\n            background-color: var(\n                --open-header-background-color,\n                rgb(var(--contrast-300))\n            );\n        }\n    }\n}\n\n.title,\n.divider-line,\n.expand-icon {\n    pointer-events: none;\n}\n\nsection {\n    transition: box-shadow 0.4s ease;\n    border-radius: var(--border-radius-of-header);\n\n    &[aria-invalid]:not([aria-invalid='false']) {\n        --header-stroke-color: rgb(var(--color-red-default)) !important;\n\n        &:not(.open) {\n            box-shadow: 0 0 0 1px rgb(var(--color-red-default));\n        }\n    }\n}\n\nheader {\n    isolation: isolate;\n    position: relative;\n\n    align-items: center;\n    display: flex;\n    justify-content: space-between;\n\n    padding-left: 0.5rem;\n    height: shared_input-select-picker.$height-of-mdc-text-field;\n}\n\n.title {\n    font-size: 1rem;\n    font-weight: 300;\n    color: var(--mdc-theme-on-surface);\n\n    justify-self: flex-start;\n\n    user-select: none; // mostly to improve experience on Android, where tapping on sections selects the text too\n\n    padding-right: 0.5rem;\n\n    // Below tries to render text in two lines,\n    // and then truncate if there is no more space\n    height: auto;\n    max-height: 3rem;\n    line-height: 1.2rem;\n    @include mixins.truncate-text-on-line(2);\n}\n\n.divider-line {\n    transition: opacity 0.3s ease 0.3s;\n    flex-grow: 1;\n    height: 0.125rem;\n    border-radius: 1rem;\n    background-color: var(--header-stroke-color, rgb(var(--contrast-900)));\n    margin-right: 0.5rem;\n\n    opacity: 0;\n\n    section.open & {\n        opacity: 0.16;\n    }\n}\n\n.actions {\n    justify-self: flex-end;\n    flex-shrink: 0;\n}\n\n::slotted([slot='header']) {\n    margin-right: 0.5rem;\n}\n\n.body {\n    background-color: var(--body-background-color, var(--contrast-100));\n    padding-left: var(--body-padding, 1.25rem);\n    padding-right: var(--body-padding, 1.25rem);\n    border-radius: 0 0 var(--border-radius-of-header)\n        var(--border-radius-of-header);\n}\n\n// This animates height of the body,\n// from `0` to `auto`\n.body {\n    // All below vars are for internal use only!\n    --limel-cs-opacity-transition-speed: 0.1s;\n    --limel-cs-opacity-transition-delay: 0s;\n    --limel-cs-grid-template-rows-transition-speed: 0.3s;\n    transition: grid-template-rows\n        var(--limel-cs-grid-template-rows-transition-speed)\n        cubic-bezier(1, 0.09, 0, 0.89);\n    display: grid;\n    grid-template-rows: 0fr;\n\n    slot {\n        transition: opacity var(--limel-cs-opacity-transition-speed) ease\n            var(--limel-cs-opacity-transition-delay);\n        display: block;\n        overflow: hidden;\n        opacity: 0;\n    }\n}\n\nsection.open {\n    .body {\n        --limel-cs-opacity-transition-speed: 0.4s;\n        --limel-cs-opacity-transition-delay: 0.3s;\n        --limel-cs-grid-template-rows-transition-speed: 0.46s;\n        grid-template-rows: 1fr;\n\n        slot {\n            opacity: 1;\n        }\n    }\n}\n\nheader:hover {\n    + .body {\n        will-change: grid-template-rows;\n\n        slot {\n            will-change: opacity;\n        }\n    }\n}\n\n// End: animating height\n\n@import './partial-styles/expand-icon.scss';\n","import {\n    Component,\n    Event,\n    Element,\n    EventEmitter,\n    h,\n    Prop,\n} from '@stencil/core';\nimport { dispatchResizeEvent } from '../../util/dispatch-resize-event';\nimport { Action } from './action';\nimport {\n    makeEnterClickable,\n    removeEnterClickable,\n} from '../../util/make-enter-clickable';\nimport { createRandomString } from '../../util/random-string';\n\n/**\n * A collapsible section can be used to group related content together\n * and hide the group when not needed.\n * Using this component can help to:\n * - Save vertical space by hiding non-essential content\n * - Improve content organization and scannability of the user interface\n * - Reduce cognitive load by displaying only a set of relevant information at a time\n * - Or disclose complex information, progressively to the user\n *\n * @slot - Content to put inside the collapsible section\n * @slot header - Optional slot for custom header content\n *\n * @exampleComponent limel-example-collapsible-section-basic\n * @exampleComponent limel-example-collapsible-section-actions\n * @exampleComponent limel-example-collapsible-section-with-custom-header-component\n * @exampleComponent limel-example-collapsible-section-external-control\n * @exampleComponent limel-example-collapsible-section-with-slider\n * @exampleComponent limel-example-collapsible-section-invalid\n * @exampleComponent limel-example-collapsible-section-css-props\n */\n@Component({\n    tag: 'limel-collapsible-section',\n    shadow: true,\n    styleUrl: 'collapsible-section.scss',\n})\nexport class CollapsibleSection {\n    /**\n     * `true` if the section is expanded, `false` if collapsed.\n     */\n    @Prop({ mutable: true, reflect: true })\n    public isOpen: boolean = false;\n\n    /**\n     * Text to display in the header of the section\n     */\n    @Prop({ reflect: true })\n    public header: string;\n\n    /**\n     * `true` if the section is invalid, `false` if valid.\n     * This can be used to indicate that the content inside the section is invalid.\n     */\n    @Prop({ reflect: true })\n    public invalid = false;\n\n    /**\n     * Actions to place to the far right inside the header\n     */\n    @Prop()\n    public actions: Action[];\n\n    /**\n     * Emitted when the section is expanded\n     */\n    @Event()\n    private open: EventEmitter<void>;\n\n    /**\n     * Emitted when the section is collapsed\n     */\n    @Event()\n    private close: EventEmitter<void>;\n\n    /**\n     * Emitted when an action is clicked inside the header\n     */\n    @Event()\n    private action: EventEmitter<Action>;\n\n    @Element()\n    private host: HTMLElement;\n\n    private bodyId = createRandomString();\n\n    public componentDidRender() {\n        const button = this.host.shadowRoot.querySelector(\n            '.open-close-toggle',\n        ) as HTMLElement;\n\n        makeEnterClickable(button);\n    }\n\n    public disconnectedCallback() {\n        const button = this.host.shadowRoot.querySelector(\n            '.open-close-toggle',\n        ) as HTMLElement;\n\n        removeEnterClickable(button);\n    }\n\n    public render() {\n        return (\n            <section\n                class={`${this.isOpen ? 'open' : ''}`}\n                aria-invalid={this.invalid}\n            >\n                <header>\n                    <button\n                        class=\"open-close-toggle\"\n                        onClick={this.onClick}\n                        aria-controls={this.bodyId}\n                    />\n                    <div class=\"expand-icon\">\n                        <div class=\"line\" />\n                        <div class=\"line\" />\n                        <div class=\"line\" />\n                        <div class=\"line\" />\n                    </div>\n                    <h2 class=\"title mdc-typography mdc-typography--headline2\">\n                        {this.header}\n                    </h2>\n                    <div class=\"divider-line\" />\n                    {this.renderHeaderSlot()}\n                    {this.renderActions()}\n                </header>\n                <div\n                    class=\"body\"\n                    aria-hidden={String(!this.isOpen)}\n                    id={this.bodyId}\n                >\n                    <slot />\n                </div>\n            </section>\n        );\n    }\n\n    private onClick = () => {\n        this.handleInteraction();\n    };\n\n    private handleInteraction = () => {\n        this.isOpen = !this.isOpen;\n\n        if (this.isOpen) {\n            this.open.emit();\n            const waitForUiToRender = 100;\n            setTimeout(dispatchResizeEvent, waitForUiToRender);\n        } else {\n            this.close.emit();\n        }\n    };\n\n    private renderActions = () => {\n        if (!this.actions) {\n            return;\n        }\n\n        return (\n            <div class=\"actions\">\n                {this.actions.map(this.renderActionButton)}\n            </div>\n        );\n    };\n\n    private renderHeaderSlot() {\n        return <slot name=\"header\" />;\n    }\n\n    private renderActionButton = (action: Action) => {\n        return (\n            <limel-icon-button\n                icon={action.icon}\n                label={action.label}\n                disabled={action.disabled}\n                onClick={this.handleActionClick(action)}\n            />\n        );\n    };\n\n    private handleActionClick = (action: Action) => (event: MouseEvent) => {\n        event.stopPropagation();\n        this.action.emit(action);\n    };\n}\n"],"version":3}
+{"file":"limel-collapsible-section.entry.cjs.js","mappings":"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","names":["createRandomString","dispatchResizeEvent","getIconName","getIconColor","getIconTitle","h","makeEnterClickable","removeEnterClickable"],"sources":["./src/components/collapsible-section/collapsible-section.scss?tag=limel-collapsible-section&encapsulation=shadow","./src/components/collapsible-section/collapsible-section.tsx"],"sourcesContent":["@use '../../style/internal/lime-theme';\n@use '../../style/mixins';\n@use '../../style/internal/shared_input-select-picker';\n\n/**\n * @prop --closed-header-background-color: background color for header when closed\n * @prop --open-header-background-color: background color for header when open\n * @prop --header-stroke-color: color of the animated icons that visualize collapsed or normal states of the headers, as well as the divider line on headers\n * @prop --body-background-color: background color for body\n * @prop --body-padding: space around content of the body\n */\n\n:host(limel-collapsible-section) {\n    --border-radius-of-header: 0.75rem;\n    display: block;\n}\n\n:host([hidden]) {\n    display: none;\n}\n\n.open-close-toggle {\n    all: unset;\n    position: absolute;\n    inset: 0;\n    width: 100%; // for Firefox\n    @include mixins.visualize-keyboard-focus;\n    transition:\n        background-color 0.4s ease,\n        border-radius 0.1s ease;\n    cursor: pointer;\n    z-index: -1;\n\n    background-color: var(\n        --closed-header-background-color,\n        rgb(var(--contrast-200))\n    );\n    border-radius: var(--border-radius-of-header);\n\n    &:hover {\n        background-color: var(\n            --open-header-background-color,\n            rgb(var(--contrast-300))\n        );\n    }\n\n    section.open & {\n        background-color: var(\n            --open-header-background-color,\n            rgb(var(--contrast-100))\n        );\n        border-radius: var(--border-radius-of-header)\n            var(--border-radius-of-header) 0 0;\n        &:hover {\n            background-color: var(\n                --open-header-background-color,\n                rgb(var(--contrast-300))\n            );\n        }\n    }\n}\n\n.title,\n.divider-line,\n.expand-icon {\n    pointer-events: none;\n}\n\nsection {\n    transition: box-shadow 0.4s ease;\n    border-radius: var(--border-radius-of-header);\n\n    &[aria-invalid]:not([aria-invalid='false']) {\n        --header-stroke-color: rgb(var(--color-red-default)) !important;\n\n        &:not(.open) {\n            box-shadow: 0 0 0 1px rgb(var(--color-red-default));\n        }\n    }\n}\n\nheader {\n    isolation: isolate;\n    position: relative;\n\n    align-items: center;\n    display: flex;\n    justify-content: space-between;\n    gap: 0.5rem;\n\n    padding-left: 0.5rem;\n    height: shared_input-select-picker.$height-of-mdc-text-field;\n}\n\nlimel-icon {\n    width: 1.5rem;\n}\n\n.title {\n    font-size: 1rem;\n    font-weight: 300;\n    color: var(--mdc-theme-on-surface);\n\n    justify-self: flex-start;\n\n    user-select: none; // mostly to improve experience on Android, where tapping on sections selects the text too\n\n    // Below tries to render text in two lines,\n    // and then truncate if there is no more space\n    height: auto;\n    max-height: 3rem;\n    line-height: 1.2rem;\n    @include mixins.truncate-text-on-line(2);\n}\n\n.divider-line {\n    transition: opacity 0.3s ease 0.3s;\n    flex-grow: 1;\n    height: 0.125rem;\n    border-radius: 1rem;\n    background-color: var(--header-stroke-color, rgb(var(--contrast-900)));\n\n    opacity: 0;\n    margin-right: 0.5rem;\n\n    section.open & {\n        opacity: 0.16;\n    }\n}\n\n.actions {\n    justify-self: flex-end;\n    flex-shrink: 0;\n}\n\n::slotted([slot='header']) {\n    margin-right: 0.5rem;\n}\n\n.body {\n    background-color: var(--body-background-color, var(--contrast-100));\n    padding-left: var(--body-padding, 1.25rem);\n    padding-right: var(--body-padding, 1.25rem);\n    border-radius: 0 0 var(--border-radius-of-header)\n        var(--border-radius-of-header);\n}\n\n// This animates height of the body,\n// from `0` to `auto`\n.body {\n    // All below vars are for internal use only!\n    --limel-cs-opacity-transition-speed: 0.1s;\n    --limel-cs-opacity-transition-delay: 0s;\n    --limel-cs-grid-template-rows-transition-speed: 0.3s;\n    transition: grid-template-rows\n        var(--limel-cs-grid-template-rows-transition-speed)\n        cubic-bezier(1, 0.09, 0, 0.89);\n    display: grid;\n    grid-template-rows: 0fr;\n\n    slot {\n        transition: opacity var(--limel-cs-opacity-transition-speed) ease\n            var(--limel-cs-opacity-transition-delay);\n        display: block;\n        overflow: hidden;\n        opacity: 0;\n    }\n}\n\nsection.open {\n    .body {\n        --limel-cs-opacity-transition-speed: 0.4s;\n        --limel-cs-opacity-transition-delay: 0.3s;\n        --limel-cs-grid-template-rows-transition-speed: 0.46s;\n        grid-template-rows: 1fr;\n\n        slot {\n            opacity: 1;\n        }\n    }\n}\n\nheader:hover {\n    + .body {\n        will-change: grid-template-rows;\n\n        slot {\n            will-change: opacity;\n        }\n    }\n}\n\n// End: animating height\n\n@import './partial-styles/expand-icon.scss';\n","import {\n    Component,\n    Event,\n    Element,\n    EventEmitter,\n    h,\n    Prop,\n} from '@stencil/core';\nimport { dispatchResizeEvent } from '../../util/dispatch-resize-event';\nimport { Action } from './action';\nimport {\n    makeEnterClickable,\n    removeEnterClickable,\n} from '../../util/make-enter-clickable';\nimport { createRandomString } from '../../util/random-string';\nimport { Icon } from '../../global/shared-types/icon.types';\nimport {\n    getIconColor,\n    getIconName,\n    getIconTitle,\n} from '../icon/get-icon-props';\n\n/**\n * A collapsible section can be used to group related content together\n * and hide the group when not needed.\n * Using this component can help to:\n * - Save vertical space by hiding non-essential content\n * - Improve content organization and scannability of the user interface\n * - Reduce cognitive load by displaying only a set of relevant information at a time\n * - Or disclose complex information, progressively to the user\n *\n * @slot - Content to put inside the collapsible section\n * @slot header - Optional slot for custom header content\n *\n * @exampleComponent limel-example-collapsible-section-basic\n * @exampleComponent limel-example-collapsible-section-actions\n * @exampleComponent limel-example-collapsible-section-with-custom-header-component\n * @exampleComponent limel-example-collapsible-section-external-control\n * @exampleComponent limel-example-collapsible-section-with-slider\n * @exampleComponent limel-example-collapsible-section-invalid\n * @exampleComponent limel-example-collapsible-section-icon\n * @exampleComponent limel-example-collapsible-section-css-props\n */\n@Component({\n    tag: 'limel-collapsible-section',\n    shadow: true,\n    styleUrl: 'collapsible-section.scss',\n})\nexport class CollapsibleSection {\n    /**\n     * `true` if the section is expanded, `false` if collapsed.\n     */\n    @Prop({ mutable: true, reflect: true })\n    public isOpen: boolean = false;\n\n    /**\n     * Text to display in the header of the section\n     */\n    @Prop({ reflect: true })\n    public header: string;\n\n    /**\n     * Icon to display in the header of the section\n     */\n    @Prop()\n    public icon?: string | Icon;\n\n    /**\n     * `true` if the section is invalid, `false` if valid.\n     * This can be used to indicate that the content inside the section is invalid.\n     */\n    @Prop({ reflect: true })\n    public invalid = false;\n\n    /**\n     * Actions to place to the far right inside the header\n     */\n    @Prop()\n    public actions: Action[];\n\n    /**\n     * Emitted when the section is expanded\n     */\n    @Event()\n    private open: EventEmitter<void>;\n\n    /**\n     * Emitted when the section is collapsed\n     */\n    @Event()\n    private close: EventEmitter<void>;\n\n    /**\n     * Emitted when an action is clicked inside the header\n     */\n    @Event()\n    private action: EventEmitter<Action>;\n\n    @Element()\n    private host: HTMLElement;\n\n    private bodyId = createRandomString();\n    private headingId = createRandomString();\n\n    public componentDidRender() {\n        const button = this.host.shadowRoot.querySelector(\n            '.open-close-toggle',\n        ) as HTMLElement;\n\n        makeEnterClickable(button);\n    }\n\n    public disconnectedCallback() {\n        const button = this.host.shadowRoot.querySelector(\n            '.open-close-toggle',\n        ) as HTMLElement;\n\n        removeEnterClickable(button);\n    }\n\n    public render() {\n        return (\n            <section\n                class={`${this.isOpen ? 'open' : ''}`}\n                aria-invalid={this.invalid}\n                aria-labelledby={this.header ? this.headingId : null}\n            >\n                <header>\n                    <button\n                        class=\"open-close-toggle\"\n                        onClick={this.onClick}\n                        aria-controls={this.bodyId}\n                    />\n                    <div class=\"expand-icon\">\n                        <div class=\"line\" />\n                        <div class=\"line\" />\n                        <div class=\"line\" />\n                        <div class=\"line\" />\n                    </div>\n                    {this.renderIcon()}\n                    {this.renderHeading()}\n                    <div class=\"divider-line\" role=\"presentation\" />\n                    {this.renderHeaderSlot()}\n                    {this.renderActions()}\n                </header>\n                <div\n                    class=\"body\"\n                    aria-hidden={String(!this.isOpen)}\n                    id={this.bodyId}\n                >\n                    <slot />\n                </div>\n            </section>\n        );\n    }\n\n    private onClick = () => {\n        this.handleInteraction();\n    };\n\n    private handleInteraction = () => {\n        this.isOpen = !this.isOpen;\n\n        if (this.isOpen) {\n            this.open.emit();\n            const waitForUiToRender = 100;\n            setTimeout(dispatchResizeEvent, waitForUiToRender);\n        } else {\n            this.close.emit();\n        }\n    };\n\n    private renderIcon = () => {\n        if (!this.icon) {\n            return;\n        }\n\n        const name = getIconName(this.icon);\n        const color = getIconColor(this.icon);\n        const title = getIconTitle(this.icon);\n\n        return (\n            <limel-icon\n                name={name}\n                aria-label={title}\n                aria-hidden={title ? null : 'true'}\n                style={{\n                    color: `${color}`,\n                }}\n            />\n        );\n    };\n\n    private renderHeading = () => {\n        if (!this.header) {\n            return;\n        }\n\n        return (\n            <h2\n                class=\"title mdc-typography mdc-typography--headline2\"\n                id={this.headingId}\n            >\n                {this.header}\n            </h2>\n        );\n    };\n\n    private renderActions = () => {\n        if (!this.actions) {\n            return;\n        }\n\n        return (\n            <div class=\"actions\">\n                {this.actions.map(this.renderActionButton)}\n            </div>\n        );\n    };\n\n    private renderHeaderSlot() {\n        return <slot name=\"header\" />;\n    }\n\n    private renderActionButton = (action: Action) => {\n        return (\n            <limel-icon-button\n                icon={action.icon}\n                label={action.label}\n                disabled={action.disabled}\n                onClick={this.handleActionClick(action)}\n            />\n        );\n    };\n\n    private handleActionClick = (action: Action) => (event: MouseEvent) => {\n        event.stopPropagation();\n        this.action.emit(action);\n    };\n}\n"],"version":3}

package/dist/cjs/loader.cjs.js

@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy(JSON.parse("[[\"limel-text-editor.cjs\",[[17,\"limel-text-editor\",{\"contentType\":[1,\"content-type\"],\"language\":[513],\"disabled\":[516],\"readonly\":[516],\"helperText\":[513,\"helper-text\"],\"placeholder\":[513],\"label\":[513],\"invalid\":[516],\"value\":[513],\"customElements\":[16],\"triggers\":[16],\"required\":[516],\"allowResize\":[516,\"allow-resize\"],\"ui\":[513]}]]],[\"limel-card.cjs\",[[1,\"limel-card\",{\"heading\":[513],\"subheading\":[513],\"image\":[16],\"icon\":[513],\"value\":[1],\"actions\":[16],\"clickable\":[516],\"orientation\":[513]}]]],[\"limel-file.cjs\",[[1,\"limel-file\",{\"value\":[16],\"label\":[513],\"required\":[516],\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"accept\":[513],\"language\":[1]}]]],[\"limel-picker.cjs\",[[1,\"limel-picker\",{\"disabled\":[4],\"readonly\":[516],\"label\":[1],\"searchLabel\":[1,\"search-label\"],\"helperText\":[513,\"helper-text\"],\"leadingIcon\":[1,\"leading-icon\"],\"emptyResultMessage\":[1,\"empty-result-message\"],\"required\":[4],\"invalid\":[516],\"value\":[16],\"searcher\":[16],\"allItems\":[16],\"multiple\":[4],\"delimiter\":[513],\"actions\":[16],\"actionPosition\":[1,\"action-position\"],\"actionScrollBehavior\":[1,\"action-scroll-behavior\"],\"badgeIcons\":[516,\"badge-icons\"],\"items\":[32],\"textValue\":[32],\"loading\":[32],\"chips\":[32]}]]],[\"limel-split-button.cjs\",[[17,\"limel-split-button\",{\"label\":[513],\"primary\":[516],\"icon\":[513],\"disabled\":[516],\"loading\":[516],\"loadingFailed\":[516,\"loading-failed\"],\"items\":[16]}]]],[\"limel-file-viewer.cjs\",[[1,\"limel-file-viewer\",{\"url\":[513],\"filename\":[513],\"alt\":[513],\"allowFullscreen\":[516,\"allow-fullscreen\"],\"allowOpenInNewTab\":[516,\"allow-open-in-new-tab\"],\"allowDownload\":[516,\"allow-download\"],\"language\":[1],\"officeViewer\":[513,\"office-viewer\"],\"actions\":[16],\"isFullscreen\":[32],\"fileType\":[32],\"loading\":[32],\"fileUrl\":[32]}]]],[\"limel-color-picker.cjs\",[[1,\"limel-color-picker\",{\"value\":[513],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"tooltipLabel\":[513,\"tooltip-label\"],\"required\":[516],\"readonly\":[516],\"isOpen\":[32]}]]],[\"limel-date-picker.cjs\",[[1,\"limel-date-picker\",{\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"label\":[513],\"placeholder\":[513],\"helperText\":[513,\"helper-text\"],\"required\":[516],\"value\":[16],\"type\":[513],\"format\":[513],\"language\":[513],\"formatter\":[16],\"internalFormat\":[32],\"showPortal\":[32]}]]],[\"limel-dock.cjs\",[[1,\"limel-dock\",{\"dockItems\":[16],\"dockFooterItems\":[16],\"accessibleLabel\":[513,\"accessible-label\"],\"expanded\":[516],\"allowResize\":[516,\"allow-resize\"],\"mobileBreakPoint\":[514,\"mobile-break-point\"],\"useMobileLayout\":[32]}]]],[\"limel-select.cjs\",[[1,\"limel-select\",{\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"required\":[516],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"value\":[16],\"options\":[16],\"multiple\":[4],\"menuOpen\":[32]}]]],[\"limel-snackbar.cjs\",[[1,\"limel-snackbar\",{\"open\":[516],\"message\":[1],\"timeout\":[514],\"actionText\":[1,\"action-text\"],\"dismissible\":[4],\"multiline\":[4],\"language\":[1],\"offset\":[32],\"isOpen\":[32],\"closing\":[32],\"show\":[64]},[[0,\"changeOffset\",\"onChangeIndex\"]]]]],[\"limel-button-group.cjs\",[[1,\"limel-button-group\",{\"value\":[16],\"disabled\":[516],\"selectedButtonId\":[32]}]]],[\"limel-chart.cjs\",[[1,\"limel-chart\",{\"language\":[513],\"accessibleLabel\":[513,\"accessible-label\"],\"accessibleItemsLabel\":[513,\"accessible-items-label\"],\"items\":[16],\"type\":[513],\"orientation\":[513],\"maxValue\":[514,\"max-value\"],\"axisIncrement\":[514,\"axis-increment\"],\"loading\":[516]}]]],[\"limel-collapsible-section.cjs\",[[1,\"limel-collapsible-section\",{\"isOpen\":[1540,\"is-open\"],\"header\":[513],\"invalid\":[516],\"actions\":[16]}]]],[\"limel-help.cjs\",[[1,\"limel-help\",{\"value\":[1],\"trigger\":[1],\"readMoreLink\":[16],\"openDirection\":[513,\"open-direction\"],\"isOpen\":[32]}]]],[\"limel-info-tile.cjs\",[[1,\"limel-info-tile\",{\"value\":[520],\"icon\":[1],\"label\":[513],\"prefix\":[513],\"suffix\":[513],\"disabled\":[516],\"badge\":[520],\"loading\":[516],\"link\":[16],\"progress\":[16]}]]],[\"limel-table.cjs\",[[1,\"limel-table\",{\"data\":[16],\"columns\":[16],\"mode\":[1],\"layout\":[1],\"pageSize\":[2,\"page-size\"],\"totalRows\":[2,\"total-rows\"],\"sorting\":[16],\"activeRow\":[1040],\"movableColumns\":[4,\"movable-columns\"],\"loading\":[4],\"page\":[2],\"emptyMessage\":[1,\"empty-message\"],\"aggregates\":[16],\"selectable\":[4],\"selection\":[16]}]]],[\"limel-shortcut.cjs\",[[1,\"limel-shortcut\",{\"icon\":[513],\"label\":[513],\"disabled\":[516],\"badge\":[520],\"link\":[16]}]]],[\"limel-switch.cjs\",[[1,\"limel-switch\",{\"label\":[513],\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"value\":[516],\"helperText\":[513,\"helper-text\"],\"readonlyLabels\":[16],\"fieldId\":[32]}]]],[\"limel-tab-panel.cjs\",[[1,\"limel-tab-panel\",{\"tabs\":[1040]}]]],[\"limel-dialog.cjs\",[[1,\"limel-dialog\",{\"heading\":[1],\"fullscreen\":[516],\"open\":[1540],\"closingActions\":[16]}]]],[\"limel-progress-flow.cjs\",[[1,\"limel-progress-flow\",{\"flowItems\":[16],\"disabled\":[4],\"readonly\":[4]}]]],[\"limel-banner.cjs\",[[1,\"limel-banner\",{\"message\":[513],\"icon\":[513],\"isOpen\":[32],\"open\":[64],\"close\":[64]}]]],[\"limel-callout.cjs\",[[1,\"limel-callout\",{\"heading\":[513],\"icon\":[513],\"type\":[513],\"language\":[1]}]]],[\"limel-slider.cjs\",[[1,\"limel-slider\",{\"disabled\":[516],\"readonly\":[516],\"factor\":[514],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"unit\":[513],\"value\":[514],\"valuemax\":[514],\"valuemin\":[514],\"step\":[514],\"percentageClass\":[32]}]]],[\"limel-ai-avatar.cjs\",[[1,\"limel-ai-avatar\",{\"isThinking\":[516,\"is-thinking\"],\"language\":[513]}]]],[\"limel-code-editor.cjs\",[[1,\"limel-code-editor\",{\"value\":[1],\"language\":[1],\"readonly\":[4],\"lineNumbers\":[4,\"line-numbers\"],\"fold\":[4],\"lint\":[4],\"colorScheme\":[1,\"color-scheme\"],\"random\":[32]}]]],[\"limel-config.cjs\",[[1,\"limel-config\",{\"config\":[16]}]]],[\"limel-flex-container.cjs\",[[1,\"limel-flex-container\",{\"direction\":[513],\"justify\":[513],\"align\":[513],\"reverse\":[516]}]]],[\"limel-form.cjs\",[[1,\"limel-form\",{\"schema\":[16],\"value\":[16],\"disabled\":[4],\"propsFactory\":[16],\"transformErrors\":[16],\"errors\":[16]}]]],[\"limel-grid.cjs\",[[1,\"limel-grid\"]]],[\"limel-icon.cjs\",[[1,\"limel-icon\",{\"size\":[513],\"name\":[513],\"badge\":[516]}]]],[\"limel-prosemirror-adapter.cjs\",[[17,\"limel-prosemirror-adapter\",{\"contentType\":[1,\"content-type\"],\"value\":[1],\"language\":[513],\"disabled\":[516],\"customElements\":[16],\"triggerCharacters\":[16],\"ui\":[1],\"view\":[32],\"actionBarItems\":[32],\"link\":[32],\"isLinkMenuOpen\":[32]}]]],[\"limel-color-picker-palette.cjs\",[[17,\"limel-color-picker-palette\",{\"value\":[513],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"required\":[516]}]]],[\"limel-dock-button.cjs\",[[0,\"limel-dock-button\",{\"item\":[16],\"expanded\":[516],\"useMobileLayout\":[516,\"use-mobile-layout\"],\"isOpen\":[32]}]]],[\"limel-checkbox.cjs\",[[1,\"limel-checkbox\",{\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"checked\":[516],\"indeterminate\":[516],\"required\":[516],\"readonlyLabels\":[16],\"modified\":[32]}]]],[\"limel-tab-bar.cjs\",[[1,\"limel-tab-bar\",{\"tabs\":[1040],\"canScrollLeft\":[32],\"canScrollRight\":[32]},[[9,\"resize\",\"handleWindowResize\"]]]]],[\"limel-header.cjs\",[[1,\"limel-header\",{\"icon\":[1],\"heading\":[1],\"subheading\":[1],\"supportingText\":[1,\"supporting-text\"],\"subheadingDivider\":[1,\"subheading-divider\"]}]]],[\"limel-help-content.cjs\",[[1,\"limel-help-content\",{\"value\":[1],\"readMoreLink\":[16]}]]],[\"limel-progress-flow-item.cjs\",[[0,\"limel-progress-flow-item\",{\"item\":[16],\"disabled\":[4],\"readonly\":[4],\"currentStep\":[4,\"current-step\"]}]]],[\"limel-circular-progress.cjs\",[[1,\"limel-circular-progress\",{\"value\":[2],\"maxValue\":[2,\"max-value\"],\"prefix\":[513],\"suffix\":[1],\"displayPercentageColors\":[4,\"display-percentage-colors\"],\"size\":[513]}]]],[\"limel-flatpickr-adapter.cjs\",[[1,\"limel-flatpickr-adapter\",{\"value\":[16],\"type\":[1],\"format\":[1],\"isOpen\":[4,\"is-open\"],\"inputElement\":[16],\"language\":[1],\"formatter\":[16]}]]],[\"limel-portal_2.cjs\",[[1,\"limel-tooltip-content\",{\"label\":[513],\"helperLabel\":[513,\"helper-label\"],\"maxlength\":[514]}],[1,\"limel-portal\",{\"openDirection\":[513,\"open-direction\"],\"position\":[513],\"containerId\":[513,\"container-id\"],\"containerStyle\":[16],\"inheritParentWidth\":[516,\"inherit-parent-width\"],\"visible\":[516],\"anchor\":[16]}]]],[\"limel-icon-button.cjs\",[[17,\"limel-icon-button\",{\"icon\":[513],\"elevated\":[516],\"label\":[513],\"disabled\":[516]}]]],[\"limel-file-dropzone_2.cjs\",[[1,\"limel-file-dropzone\",{\"accept\":[513],\"disabled\":[4],\"text\":[1],\"helperText\":[1,\"helper-text\"],\"hasFileToDrop\":[32]}],[1,\"limel-file-input\",{\"accept\":[513],\"disabled\":[516],\"multiple\":[516]}]]],[\"limel-3d-hover-effect-glow.cjs\",[[1,\"limel-3d-hover-effect-glow\"]]],[\"limel-markdown.cjs\",[[1,\"limel-markdown\",{\"value\":[1],\"whitelist\":[16],\"lazyLoadImages\":[4,\"lazy-load-images\"]}]]],[\"limel-badge_2.cjs\",[[1,\"limel-badge\",{\"label\":[520]}],[1,\"limel-tooltip\",{\"elementId\":[513,\"element-id\"],\"label\":[513],\"helperLabel\":[513,\"helper-label\"],\"maxlength\":[514],\"openDirection\":[513,\"open-direction\"],\"open\":[32]}]]],[\"limel-dynamic-label_2.cjs\",[[1,\"limel-dynamic-label\",{\"value\":[8],\"defaultLabel\":[16],\"labels\":[16]}],[1,\"limel-helper-line\",{\"helperText\":[513,\"helper-text\"],\"length\":[514],\"maxLength\":[514,\"max-length\"],\"invalid\":[516],\"helperTextId\":[513,\"helper-text-id\"]}]]],[\"limel-breadcrumbs_8.cjs\",[[1,\"limel-menu\",{\"items\":[16],\"disabled\":[516],\"openDirection\":[513,\"open-direction\"],\"surfaceWidth\":[513,\"surface-width\"],\"open\":[1540],\"badgeIcons\":[516,\"badge-icons\"],\"gridLayout\":[516,\"grid-layout\"],\"loading\":[516],\"currentSubMenu\":[1040],\"rootItem\":[16],\"searcher\":[16],\"emptyResultMessage\":[1,\"empty-result-message\"],\"loadingSubItems\":[32],\"searchValue\":[32],\"searchResults\":[32]}],[1,\"limel-breadcrumbs\",{\"items\":[16],\"divider\":[1]}],[17,\"limel-menu-list\",{\"items\":[16],\"badgeIcons\":[4,\"badge-icons\"],\"iconSize\":[1,\"icon-size\"],\"maxLinesSecondaryText\":[2,\"max-lines-secondary-text\"]}],[1,\"limel-input-field\",{\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"label\":[513],\"placeholder\":[513],\"helperText\":[513,\"helper-text\"],\"prefix\":[513],\"suffix\":[513],\"required\":[516],\"value\":[513],\"trailingIcon\":[513,\"trailing-icon\"],\"leadingIcon\":[513,\"leading-icon\"],\"pattern\":[513],\"type\":[513],\"formatNumber\":[516,\"format-number\"],\"step\":[520],\"max\":[514],\"min\":[514],\"maxlength\":[514],\"minlength\":[514],\"completions\":[16],\"showLink\":[516,\"show-link\"],\"locale\":[513],\"isFocused\":[32],\"wasInvalid\":[32],\"showCompletions\":[32]}],[1,\"limel-spinner\",{\"size\":[513],\"limeBranded\":[4,\"lime-branded\"]}],[17,\"limel-list\",{\"items\":[16],\"badgeIcons\":[4,\"badge-icons\"],\"iconSize\":[1,\"icon-size\"],\"type\":[1],\"maxLinesSecondaryText\":[2,\"max-lines-secondary-text\"]}],[1,\"limel-menu-surface\",{\"open\":[4],\"allowClicksElement\":[16]}],[4,\"limel-notched-outline\",{\"required\":[516],\"readonly\":[516],\"invalid\":[516],\"disabled\":[516],\"label\":[513],\"labelId\":[513,\"label-id\"],\"hasValue\":[516,\"has-value\"],\"hasLeadingIcon\":[516,\"has-leading-icon\"],\"hasFloatingLabel\":[516,\"has-floating-label\"]}]]],[\"limel-chip_2.cjs\",[[1,\"limel-chip-set\",{\"value\":[16],\"type\":[513],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"inputType\":[513,\"input-type\"],\"maxItems\":[514,\"max-items\"],\"required\":[516],\"searchLabel\":[513,\"search-label\"],\"emptyInputOnBlur\":[516,\"empty-input-on-blur\"],\"clearAllButton\":[4,\"clear-all-button\"],\"leadingIcon\":[513,\"leading-icon\"],\"delimiter\":[513],\"autocomplete\":[513],\"language\":[1],\"editMode\":[32],\"textValue\":[32],\"blurred\":[32],\"inputChipIndexSelected\":[32],\"selectedChipIds\":[32],\"getEditMode\":[64],\"setFocus\":[64],\"emptyInput\":[64]}],[17,\"limel-chip\",{\"language\":[513],\"text\":[513],\"icon\":[1],\"image\":[16],\"link\":[16],\"badge\":[520],\"disabled\":[516],\"readonly\":[516],\"selected\":[516],\"invalid\":[516],\"removable\":[516],\"type\":[513],\"loading\":[516],\"progress\":[514],\"identifier\":[520],\"menuItems\":[16]}]]],[\"limel-button.cjs\",[[17,\"limel-button\",{\"label\":[513],\"primary\":[516],\"outlined\":[516],\"icon\":[513],\"disabled\":[516],\"loading\":[516],\"loadingFailed\":[516,\"loading-failed\"],\"justLoaded\":[32]}]]],[\"limel-linear-progress.cjs\",[[1,\"limel-linear-progress\",{\"language\":[513],\"value\":[514],\"indeterminate\":[516],\"accessibleLabel\":[513,\"accessible-label\"]}]]],[\"limel-action-bar-item_2.cjs\",[[0,\"limel-action-bar-overflow-menu\",{\"items\":[16],\"openDirection\":[513,\"open-direction\"],\"overFlowIcon\":[16]}],[0,\"limel-action-bar-item\",{\"item\":[16],\"isVisible\":[516,\"is-visible\"],\"selected\":[516]}]]],[\"limel-action-bar_2.cjs\",[[1,\"limel-text-editor-link-menu\",{\"link\":[16],\"language\":[513],\"isOpen\":[516,\"is-open\"]}],[1,\"limel-action-bar\",{\"actions\":[16],\"language\":[513],\"accessibleLabel\":[513,\"accessible-label\"],\"layout\":[513],\"collapsible\":[516],\"openDirection\":[513,\"open-direction\"],\"overflowCutoff\":[32],\"actionBarIsShrunk\":[32]}]]],[\"limel-popover_2.cjs\",[[1,\"limel-popover\",{\"open\":[4],\"openDirection\":[513,\"open-direction\"]}],[1,\"limel-popover-surface\",{\"contentCollection\":[16]}]]]]"), options);
+  return index.bootstrapLazy(JSON.parse("[[\"limel-text-editor.cjs\",[[17,\"limel-text-editor\",{\"contentType\":[1,\"content-type\"],\"language\":[513],\"disabled\":[516],\"readonly\":[516],\"helperText\":[513,\"helper-text\"],\"placeholder\":[513],\"label\":[513],\"invalid\":[516],\"value\":[513],\"customElements\":[16],\"triggers\":[16],\"required\":[516],\"allowResize\":[516,\"allow-resize\"],\"ui\":[513]}]]],[\"limel-card.cjs\",[[1,\"limel-card\",{\"heading\":[513],\"subheading\":[513],\"image\":[16],\"icon\":[513],\"value\":[1],\"actions\":[16],\"clickable\":[516],\"orientation\":[513]}]]],[\"limel-file.cjs\",[[1,\"limel-file\",{\"value\":[16],\"label\":[513],\"required\":[516],\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"accept\":[513],\"language\":[1]}]]],[\"limel-picker.cjs\",[[1,\"limel-picker\",{\"disabled\":[4],\"readonly\":[516],\"label\":[1],\"searchLabel\":[1,\"search-label\"],\"helperText\":[513,\"helper-text\"],\"leadingIcon\":[1,\"leading-icon\"],\"emptyResultMessage\":[1,\"empty-result-message\"],\"required\":[4],\"invalid\":[516],\"value\":[16],\"searcher\":[16],\"allItems\":[16],\"multiple\":[4],\"delimiter\":[513],\"actions\":[16],\"actionPosition\":[1,\"action-position\"],\"actionScrollBehavior\":[1,\"action-scroll-behavior\"],\"badgeIcons\":[516,\"badge-icons\"],\"items\":[32],\"textValue\":[32],\"loading\":[32],\"chips\":[32]}]]],[\"limel-split-button.cjs\",[[17,\"limel-split-button\",{\"label\":[513],\"primary\":[516],\"icon\":[513],\"disabled\":[516],\"loading\":[516],\"loadingFailed\":[516,\"loading-failed\"],\"items\":[16]}]]],[\"limel-file-viewer.cjs\",[[1,\"limel-file-viewer\",{\"url\":[513],\"filename\":[513],\"alt\":[513],\"allowFullscreen\":[516,\"allow-fullscreen\"],\"allowOpenInNewTab\":[516,\"allow-open-in-new-tab\"],\"allowDownload\":[516,\"allow-download\"],\"language\":[1],\"officeViewer\":[513,\"office-viewer\"],\"actions\":[16],\"isFullscreen\":[32],\"fileType\":[32],\"loading\":[32],\"fileUrl\":[32]}]]],[\"limel-color-picker.cjs\",[[1,\"limel-color-picker\",{\"value\":[513],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"tooltipLabel\":[513,\"tooltip-label\"],\"required\":[516],\"readonly\":[516],\"isOpen\":[32]}]]],[\"limel-date-picker.cjs\",[[1,\"limel-date-picker\",{\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"label\":[513],\"placeholder\":[513],\"helperText\":[513,\"helper-text\"],\"required\":[516],\"value\":[16],\"type\":[513],\"format\":[513],\"language\":[513],\"formatter\":[16],\"internalFormat\":[32],\"showPortal\":[32]}]]],[\"limel-dock.cjs\",[[1,\"limel-dock\",{\"dockItems\":[16],\"dockFooterItems\":[16],\"accessibleLabel\":[513,\"accessible-label\"],\"expanded\":[516],\"allowResize\":[516,\"allow-resize\"],\"mobileBreakPoint\":[514,\"mobile-break-point\"],\"useMobileLayout\":[32]}]]],[\"limel-select.cjs\",[[1,\"limel-select\",{\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"required\":[516],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"value\":[16],\"options\":[16],\"multiple\":[4],\"menuOpen\":[32]}]]],[\"limel-snackbar.cjs\",[[1,\"limel-snackbar\",{\"open\":[516],\"message\":[1],\"timeout\":[514],\"actionText\":[1,\"action-text\"],\"dismissible\":[4],\"multiline\":[4],\"language\":[1],\"offset\":[32],\"isOpen\":[32],\"closing\":[32],\"show\":[64]},[[0,\"changeOffset\",\"onChangeIndex\"]]]]],[\"limel-button-group.cjs\",[[1,\"limel-button-group\",{\"value\":[16],\"disabled\":[516],\"selectedButtonId\":[32]}]]],[\"limel-chart.cjs\",[[1,\"limel-chart\",{\"language\":[513],\"accessibleLabel\":[513,\"accessible-label\"],\"accessibleItemsLabel\":[513,\"accessible-items-label\"],\"items\":[16],\"type\":[513],\"orientation\":[513],\"maxValue\":[514,\"max-value\"],\"axisIncrement\":[514,\"axis-increment\"],\"loading\":[516]}]]],[\"limel-collapsible-section.cjs\",[[1,\"limel-collapsible-section\",{\"isOpen\":[1540,\"is-open\"],\"header\":[513],\"icon\":[1],\"invalid\":[516],\"actions\":[16]}]]],[\"limel-help.cjs\",[[1,\"limel-help\",{\"value\":[1],\"trigger\":[1],\"readMoreLink\":[16],\"openDirection\":[513,\"open-direction\"],\"isOpen\":[32]}]]],[\"limel-info-tile.cjs\",[[1,\"limel-info-tile\",{\"value\":[520],\"icon\":[1],\"label\":[513],\"prefix\":[513],\"suffix\":[513],\"disabled\":[516],\"badge\":[520],\"loading\":[516],\"link\":[16],\"progress\":[16]}]]],[\"limel-table.cjs\",[[1,\"limel-table\",{\"data\":[16],\"columns\":[16],\"mode\":[1],\"layout\":[1],\"pageSize\":[2,\"page-size\"],\"totalRows\":[2,\"total-rows\"],\"sorting\":[16],\"activeRow\":[1040],\"movableColumns\":[4,\"movable-columns\"],\"loading\":[4],\"page\":[2],\"emptyMessage\":[1,\"empty-message\"],\"aggregates\":[16],\"selectable\":[4],\"selection\":[16]}]]],[\"limel-shortcut.cjs\",[[1,\"limel-shortcut\",{\"icon\":[513],\"label\":[513],\"disabled\":[516],\"badge\":[520],\"link\":[16]}]]],[\"limel-switch.cjs\",[[1,\"limel-switch\",{\"label\":[513],\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"value\":[516],\"helperText\":[513,\"helper-text\"],\"readonlyLabels\":[16],\"fieldId\":[32]}]]],[\"limel-tab-panel.cjs\",[[1,\"limel-tab-panel\",{\"tabs\":[1040]}]]],[\"limel-dialog.cjs\",[[1,\"limel-dialog\",{\"heading\":[1],\"fullscreen\":[516],\"open\":[1540],\"closingActions\":[16]}]]],[\"limel-progress-flow.cjs\",[[1,\"limel-progress-flow\",{\"flowItems\":[16],\"disabled\":[4],\"readonly\":[4]}]]],[\"limel-banner.cjs\",[[1,\"limel-banner\",{\"message\":[513],\"icon\":[513],\"isOpen\":[32],\"open\":[64],\"close\":[64]}]]],[\"limel-callout.cjs\",[[1,\"limel-callout\",{\"heading\":[513],\"icon\":[513],\"type\":[513],\"language\":[1]}]]],[\"limel-slider.cjs\",[[1,\"limel-slider\",{\"disabled\":[516],\"readonly\":[516],\"factor\":[514],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"unit\":[513],\"value\":[514],\"valuemax\":[514],\"valuemin\":[514],\"step\":[514],\"percentageClass\":[32]}]]],[\"limel-ai-avatar.cjs\",[[1,\"limel-ai-avatar\",{\"isThinking\":[516,\"is-thinking\"],\"language\":[513]}]]],[\"limel-code-editor.cjs\",[[1,\"limel-code-editor\",{\"value\":[1],\"language\":[1],\"readonly\":[4],\"lineNumbers\":[4,\"line-numbers\"],\"fold\":[4],\"lint\":[4],\"colorScheme\":[1,\"color-scheme\"],\"random\":[32]}]]],[\"limel-config.cjs\",[[1,\"limel-config\",{\"config\":[16]}]]],[\"limel-flex-container.cjs\",[[1,\"limel-flex-container\",{\"direction\":[513],\"justify\":[513],\"align\":[513],\"reverse\":[516]}]]],[\"limel-form.cjs\",[[1,\"limel-form\",{\"schema\":[16],\"value\":[16],\"disabled\":[4],\"propsFactory\":[16],\"transformErrors\":[16],\"errors\":[16]}]]],[\"limel-grid.cjs\",[[1,\"limel-grid\"]]],[\"limel-icon.cjs\",[[1,\"limel-icon\",{\"size\":[513],\"name\":[513],\"badge\":[516]}]]],[\"limel-prosemirror-adapter.cjs\",[[17,\"limel-prosemirror-adapter\",{\"contentType\":[1,\"content-type\"],\"value\":[1],\"language\":[513],\"disabled\":[516],\"customElements\":[16],\"triggerCharacters\":[16],\"ui\":[1],\"view\":[32],\"actionBarItems\":[32],\"link\":[32],\"isLinkMenuOpen\":[32]}]]],[\"limel-color-picker-palette.cjs\",[[17,\"limel-color-picker-palette\",{\"value\":[513],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"required\":[516]}]]],[\"limel-dock-button.cjs\",[[0,\"limel-dock-button\",{\"item\":[16],\"expanded\":[516],\"useMobileLayout\":[516,\"use-mobile-layout\"],\"isOpen\":[32]}]]],[\"limel-checkbox.cjs\",[[1,\"limel-checkbox\",{\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"checked\":[516],\"indeterminate\":[516],\"required\":[516],\"readonlyLabels\":[16],\"modified\":[32]}]]],[\"limel-tab-bar.cjs\",[[1,\"limel-tab-bar\",{\"tabs\":[1040],\"canScrollLeft\":[32],\"canScrollRight\":[32]},[[9,\"resize\",\"handleWindowResize\"]]]]],[\"limel-header.cjs\",[[1,\"limel-header\",{\"icon\":[1],\"heading\":[1],\"subheading\":[1],\"supportingText\":[1,\"supporting-text\"],\"subheadingDivider\":[1,\"subheading-divider\"]}]]],[\"limel-help-content.cjs\",[[1,\"limel-help-content\",{\"value\":[1],\"readMoreLink\":[16]}]]],[\"limel-progress-flow-item.cjs\",[[0,\"limel-progress-flow-item\",{\"item\":[16],\"disabled\":[4],\"readonly\":[4],\"currentStep\":[4,\"current-step\"]}]]],[\"limel-circular-progress.cjs\",[[1,\"limel-circular-progress\",{\"value\":[2],\"maxValue\":[2,\"max-value\"],\"prefix\":[513],\"suffix\":[1],\"displayPercentageColors\":[4,\"display-percentage-colors\"],\"size\":[513]}]]],[\"limel-flatpickr-adapter.cjs\",[[1,\"limel-flatpickr-adapter\",{\"value\":[16],\"type\":[1],\"format\":[1],\"isOpen\":[4,\"is-open\"],\"inputElement\":[16],\"language\":[1],\"formatter\":[16]}]]],[\"limel-portal_2.cjs\",[[1,\"limel-tooltip-content\",{\"label\":[513],\"helperLabel\":[513,\"helper-label\"],\"maxlength\":[514]}],[1,\"limel-portal\",{\"openDirection\":[513,\"open-direction\"],\"position\":[513],\"containerId\":[513,\"container-id\"],\"containerStyle\":[16],\"inheritParentWidth\":[516,\"inherit-parent-width\"],\"visible\":[516],\"anchor\":[16]}]]],[\"limel-icon-button.cjs\",[[17,\"limel-icon-button\",{\"icon\":[513],\"elevated\":[516],\"label\":[513],\"disabled\":[516]}]]],[\"limel-file-dropzone_2.cjs\",[[1,\"limel-file-dropzone\",{\"accept\":[513],\"disabled\":[4],\"text\":[1],\"helperText\":[1,\"helper-text\"],\"hasFileToDrop\":[32]}],[1,\"limel-file-input\",{\"accept\":[513],\"disabled\":[516],\"multiple\":[516]}]]],[\"limel-3d-hover-effect-glow.cjs\",[[1,\"limel-3d-hover-effect-glow\"]]],[\"limel-markdown.cjs\",[[1,\"limel-markdown\",{\"value\":[1],\"whitelist\":[16],\"lazyLoadImages\":[4,\"lazy-load-images\"]}]]],[\"limel-badge_2.cjs\",[[1,\"limel-badge\",{\"label\":[520]}],[1,\"limel-tooltip\",{\"elementId\":[513,\"element-id\"],\"label\":[513],\"helperLabel\":[513,\"helper-label\"],\"maxlength\":[514],\"openDirection\":[513,\"open-direction\"],\"open\":[32]}]]],[\"limel-dynamic-label_2.cjs\",[[1,\"limel-dynamic-label\",{\"value\":[8],\"defaultLabel\":[16],\"labels\":[16]}],[1,\"limel-helper-line\",{\"helperText\":[513,\"helper-text\"],\"length\":[514],\"maxLength\":[514,\"max-length\"],\"invalid\":[516],\"helperTextId\":[513,\"helper-text-id\"]}]]],[\"limel-breadcrumbs_8.cjs\",[[1,\"limel-menu\",{\"items\":[16],\"disabled\":[516],\"openDirection\":[513,\"open-direction\"],\"surfaceWidth\":[513,\"surface-width\"],\"open\":[1540],\"badgeIcons\":[516,\"badge-icons\"],\"gridLayout\":[516,\"grid-layout\"],\"loading\":[516],\"currentSubMenu\":[1040],\"rootItem\":[16],\"searcher\":[16],\"emptyResultMessage\":[1,\"empty-result-message\"],\"loadingSubItems\":[32],\"searchValue\":[32],\"searchResults\":[32]}],[1,\"limel-breadcrumbs\",{\"items\":[16],\"divider\":[1]}],[17,\"limel-menu-list\",{\"items\":[16],\"badgeIcons\":[4,\"badge-icons\"],\"iconSize\":[1,\"icon-size\"],\"maxLinesSecondaryText\":[2,\"max-lines-secondary-text\"]}],[1,\"limel-input-field\",{\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"label\":[513],\"placeholder\":[513],\"helperText\":[513,\"helper-text\"],\"prefix\":[513],\"suffix\":[513],\"required\":[516],\"value\":[513],\"trailingIcon\":[513,\"trailing-icon\"],\"leadingIcon\":[513,\"leading-icon\"],\"pattern\":[513],\"type\":[513],\"formatNumber\":[516,\"format-number\"],\"step\":[520],\"max\":[514],\"min\":[514],\"maxlength\":[514],\"minlength\":[514],\"completions\":[16],\"showLink\":[516,\"show-link\"],\"locale\":[513],\"isFocused\":[32],\"wasInvalid\":[32],\"showCompletions\":[32]}],[1,\"limel-spinner\",{\"size\":[513],\"limeBranded\":[4,\"lime-branded\"]}],[17,\"limel-list\",{\"items\":[16],\"badgeIcons\":[4,\"badge-icons\"],\"iconSize\":[1,\"icon-size\"],\"type\":[1],\"maxLinesSecondaryText\":[2,\"max-lines-secondary-text\"]}],[1,\"limel-menu-surface\",{\"open\":[4],\"allowClicksElement\":[16]}],[4,\"limel-notched-outline\",{\"required\":[516],\"readonly\":[516],\"invalid\":[516],\"disabled\":[516],\"label\":[513],\"labelId\":[513,\"label-id\"],\"hasValue\":[516,\"has-value\"],\"hasLeadingIcon\":[516,\"has-leading-icon\"],\"hasFloatingLabel\":[516,\"has-floating-label\"]}]]],[\"limel-chip_2.cjs\",[[1,\"limel-chip-set\",{\"value\":[16],\"type\":[513],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"inputType\":[513,\"input-type\"],\"maxItems\":[514,\"max-items\"],\"required\":[516],\"searchLabel\":[513,\"search-label\"],\"emptyInputOnBlur\":[516,\"empty-input-on-blur\"],\"clearAllButton\":[4,\"clear-all-button\"],\"leadingIcon\":[513,\"leading-icon\"],\"delimiter\":[513],\"autocomplete\":[513],\"language\":[1],\"editMode\":[32],\"textValue\":[32],\"blurred\":[32],\"inputChipIndexSelected\":[32],\"selectedChipIds\":[32],\"getEditMode\":[64],\"setFocus\":[64],\"emptyInput\":[64]}],[17,\"limel-chip\",{\"language\":[513],\"text\":[513],\"icon\":[1],\"image\":[16],\"link\":[16],\"badge\":[520],\"disabled\":[516],\"readonly\":[516],\"selected\":[516],\"invalid\":[516],\"removable\":[516],\"type\":[513],\"loading\":[516],\"progress\":[514],\"identifier\":[520],\"menuItems\":[16]}]]],[\"limel-button.cjs\",[[17,\"limel-button\",{\"label\":[513],\"primary\":[516],\"outlined\":[516],\"icon\":[513],\"disabled\":[516],\"loading\":[516],\"loadingFailed\":[516,\"loading-failed\"],\"justLoaded\":[32]}]]],[\"limel-linear-progress.cjs\",[[1,\"limel-linear-progress\",{\"language\":[513],\"value\":[514],\"indeterminate\":[516],\"accessibleLabel\":[513,\"accessible-label\"]}]]],[\"limel-action-bar-item_2.cjs\",[[0,\"limel-action-bar-overflow-menu\",{\"items\":[16],\"openDirection\":[513,\"open-direction\"],\"overFlowIcon\":[16]}],[0,\"limel-action-bar-item\",{\"item\":[16],\"isVisible\":[516,\"is-visible\"],\"selected\":[516]}]]],[\"limel-action-bar_2.cjs\",[[1,\"limel-text-editor-link-menu\",{\"link\":[16],\"language\":[513],\"isOpen\":[516,\"is-open\"]}],[1,\"limel-action-bar\",{\"actions\":[16],\"language\":[513],\"accessibleLabel\":[513,\"accessible-label\"],\"layout\":[513],\"collapsible\":[516],\"openDirection\":[513,\"open-direction\"],\"overflowCutoff\":[32],\"actionBarIsShrunk\":[32]}]]],[\"limel-popover_2.cjs\",[[1,\"limel-popover\",{\"open\":[4],\"openDirection\":[513,\"open-direction\"]}],[1,\"limel-popover-surface\",{\"contentCollection\":[16]}]]]]"), options);
   });
 };
 

package/dist/collection/components/chip/chip.css

@@ -76,6 +76,7 @@
 /**
 * @prop --chip-max-width: Maximum width of the chip. Defaults to `10rem`. Keep in mind that the chips should not appear too big.
 * @prop --chip-progress-color: Color of the progress bar. Defaults to `rgb(var(--contrast-700))`.
+* @prop --chip-readonly-border-color: Color of the border in readonly state. Defaults to `rgb(var(--contrast-800), 0.5)`.
 */
 :host(limel-chip) {
   --limel-chip-height: 1.75rem;
@@ -168,7 +169,7 @@
 }
 
 :host(limel-chip[readonly]:not([readonly=false])) .chip {
-  box-shadow: 0 0 0 1px rgba(var(--contrast-800), 0.5);
+  box-shadow: 0 0 0 1px var(--chip-readonly-border-color, rgb(var(--contrast-800), 0.5));
 }
 
 :host(limel-chip[selected]:not([selected=false])) .chip {

package/dist/collection/components/chip/chip.js

@@ -46,6 +46,7 @@ import { isEmpty } from 'lodash-es';
  * @exampleComponent limel-example-chip-menu
  * @exampleComponent limel-example-chip-loading
  * @exampleComponent limel-example-chip-progress
+ * @exampleComponent limel-example-chip-readonly-border
  * @exampleComponent limel-example-chip-aria-role
  */
 export class Chip {

package/dist/collection/components/chip/chip.js.map

@@ -1 +1 @@
-{"version":3,"file":"chip.js","sourceRoot":"","sources":["../../../src/components/chip/chip.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Prop,\n} from '@stencil/core';\nimport { Icon } from '../../global/shared-types/icon.types';\nimport { Languages } from '../date-picker/date.types';\nimport { Link } from '../../global/shared-types/link.types';\nimport { getIconName } from '../icon/get-icon-props';\nimport {\n    makeEnterClickable,\n    removeEnterClickable,\n} from '../../util/make-enter-clickable';\nimport translate from '../../global/translations';\nimport { BACKSPACE, DELETE } from '../../util/keycodes';\nimport { ChipType, Chip as OldChipInterface } from '../chip-set/chip.types';\nimport { Image } from '../../global/shared-types/image.types';\nimport { isEmpty } from 'lodash-es';\n\nimport { ListSeparator } from '../list/list-item.types';\nimport { LimelMenuCustomEvent, MenuItem } from '../../components';\n\ninterface ChipInterface extends Omit<OldChipInterface, 'id' | 'badge'> {\n    /**\n     * Identifier for the chip. Must be unique.\n     */\n    identifier?: number | string;\n\n    /**\n     * The value of the badge.\n     */\n    badge?: string | number;\n}\n\n/**\n * Chips and buttons are both interactive elements in UI design,\n * but they serve different purposes and are used in different contexts.\n *\n * :::warning\n * Do not use the chip component carelessly, as an alternative for\n * [`limel-button`](#/component/limel-button/) in the UI design!\n *\n * **Buttons:**\n * Buttons are used to trigger actions. They are typically used to\n * submit forms, open dialogs, initiate a process, or perform any action\n * that changes the state of the application.\n * Buttons' labels usually contain action words, in other words, the labels is\n * a _verb in imperative mood_ such as \"Submit\" or \"Delete\".\n * Buttons are placed in areas where it's clear they will initiate\n * an action when clicked.\n *\n * **Chips:**\n * Chips however are elements which may look like buttons, but they are\n * representing choices, filters, or tags, in a small block\n * or clearly bundled into a group. Chips are rarely used alone in the\n * user interface.\n * They are often used in a so called \"chip-set\", or placed together in\n * a section of the UI, where the user can expect more than one chip to be present.\n *\n * For example, a chip may represent a filter in a filter bar, or a tag in a tag list,\n * or an item in a shopping list.\n * Clicking a chip can also trigger an action, for example toggling a filter ON or OFF,\n * or opening a page with all posts tagged with the tag represented by the chip,\n * or navigating to a page with more information about the item in the shopping list.\n * :::\n *\n * @exampleComponent limel-example-chip-button\n * @exampleComponent limel-example-chip-link\n * @exampleComponent limel-example-chip-icon-colors\n * @exampleComponent limel-example-chip-image\n * @exampleComponent limel-example-chip-badge\n * @exampleComponent limel-example-chip-filter\n * @exampleComponent limel-example-chip-removable\n * @exampleComponent limel-example-chip-menu\n * @exampleComponent limel-example-chip-loading\n * @exampleComponent limel-example-chip-progress\n * @exampleComponent limel-example-chip-aria-role\n */\n@Component({\n    tag: 'limel-chip',\n    shadow: { delegatesFocus: true },\n    styleUrl: 'chip.scss',\n})\nexport class Chip implements ChipInterface {\n    /**\n     * Defines the language for translations.\n     * Will translate the translatable strings on the components.\n     */\n    @Prop({ reflect: true })\n    public language: Languages = 'en';\n\n    /**\n     * Label displayed on the chip\n     */\n    @Prop({ reflect: true })\n    public text: string;\n\n    /**\n     * Icon of the chip.\n     */\n    @Prop()\n    public icon?: string | Icon;\n\n    /**\n     * A picture to be displayed instead of the icon on the chip.\n     */\n    @Prop()\n    public image?: Image;\n\n    /**\n     * If supplied, the chip will become a clickable link.\n     */\n    @Prop()\n    public link?: Omit<Link, 'text'>;\n\n    /**\n     * The value of the badge, displayed on the chip.\n     */\n    @Prop({ reflect: true })\n    public badge?: string | number;\n\n    /**\n     * Set to `true` to disable the chip.\n     */\n    @Prop({ reflect: true })\n    public disabled = false;\n\n    /**\n     * Set to `true` to render the chip as a static UI element.\n     * Useful when the parent component has a `readonly` state.\n     */\n    @Prop({ reflect: true })\n    public readonly = false;\n\n    /**\n     * Set to `true` to visualize the chip in a \"selected\" state.\n     * This is typically used when the chip is used in a chip-set\n     * along with other chips.\n     */\n    @Prop({ reflect: true })\n    public selected = false;\n\n    /**\n     * Set to `true` to visualize the chip in an \"invalid\" or \"error\" state.\n     */\n    @Prop({ reflect: true })\n    public invalid = false;\n\n    /**\n     * Set to `true` to render a remove button on the chip.\n     */\n    @Prop({ reflect: true })\n    public removable = false;\n\n    /**\n     * Set to `filter` to render the chip with a distinct style\n     * suitable for visualizing filters.\n     *\n     * @beta\n     */\n    @Prop({ reflect: true })\n    public type?: ChipType = 'default';\n\n    /**\n     * Set to `true` to put the component in the `loading` state,\n     * and render an indeterminate progress indicator inside the chip.\n     * This does _not_ disable the interactivity of the chip!\n     */\n    @Prop({ reflect: true })\n    public loading? = false;\n\n    /**\n     * Reflects the current value of a progress bar on the chip,\n     * visualizing the percentage of an ongoing process.\n     * Must be a number between `0` and `100`.\n     */\n    @Prop({ reflect: true })\n    public progress?: number;\n\n    /**\n     * Identifier for the chip. Must be unique.\n     */\n    @Prop({ reflect: true })\n    public identifier?: number | string = crypto.randomUUID();\n\n    /**\n     * When provided, the chip will render an ellipsis menu with the supplied items.\n     * Also, this will hide the \"remove button\" when `removable={true}`, as\n     * the remove button will automatically become the last item in the menu.\n     */\n    @Prop()\n    public menuItems?: Array<MenuItem | ListSeparator> = [];\n\n    /**\n     * Fired when clicking on the remove button of a `removable` chip.\n     * The value of `identifier` is emitted as the event detail.\n     */\n    @Event()\n    public remove: EventEmitter<number | string>;\n\n    /**\n     * Emitted when a menu item is selected from the actions menu.\n     */\n    @Event()\n    public menuItemSelected: EventEmitter<MenuItem>;\n\n    @Element()\n    private host: HTMLLimelChipElement;\n\n    public componentWillLoad() {\n        makeEnterClickable(this.host);\n    }\n\n    public disconnectedCallback() {\n        removeEnterClickable(this.host);\n    }\n\n    public render() {\n        return (\n            <Host onClick={this.filterClickWhenDisabled}>\n                {this.link ? this.renderAsLink() : this.renderAsButton()}\n            </Host>\n        );\n    }\n\n    private renderAsButton = () => {\n        return [\n            <button\n                id={'chip-' + this.identifier}\n                class=\"chip\"\n                role=\"button\"\n                disabled={this.disabled || this.readonly}\n                aria-busy={this.loading ? 'true' : 'false'}\n                aria-live=\"polite\"\n                onKeyDown={this.handleDeleteKeyDown}\n            >\n                {this.renderSpinner()}\n                {this.renderPicture()}\n                {this.renderLabel()}\n                {this.renderBadge()}\n                {this.renderProgressBar()}\n            </button>,\n            this.renderRemoveButton(),\n            this.renderActionsMenu(),\n        ];\n    };\n\n    private renderAsLink = () => {\n        return [\n            <a\n                id={'chip-' + this.identifier}\n                class=\"chip\"\n                href={this.link.href}\n                title={this.link.title}\n                target={this.link.target}\n                aria-disabled={this.disabled || this.readonly}\n                tabindex={this.disabled || this.readonly ? -1 : 0}\n                onKeyDown={this.handleDeleteKeyDown}\n            >\n                {this.renderSpinner()}\n                {this.renderPicture()}\n                {this.renderLabel()}\n                {this.renderBadge()}\n                {this.renderProgressBar()}\n            </a>,\n            this.renderRemoveButton(),\n            this.renderActionsMenu(),\n        ];\n    };\n\n    private renderLabel = () => {\n        return <span class=\"text\">{this.text}</span>;\n    };\n\n    private renderPicture() {\n        const icon = getIconName(this.icon);\n\n        if (!icon && !this.image) {\n            return;\n        }\n\n        if (!isEmpty(this.image)) {\n            return (\n                <img src={this.image.src} alt={this.image.alt} loading=\"lazy\" />\n            );\n        }\n\n        return (\n            <limel-icon\n                badge={true}\n                name={icon}\n                style={{\n                    color: `${(this.icon as Icon)?.color}`,\n                    'background-color': `${\n                        (this.icon as Icon)?.backgroundColor\n                    }`,\n                }}\n            />\n        );\n    }\n\n    private renderBadge() {\n        if (!this.badge) {\n            return;\n        }\n\n        return <limel-badge label={this.badge} />;\n    }\n\n    private renderRemoveButton() {\n        if (\n            !this.removable ||\n            this.readonly ||\n            this.disabled ||\n            !!this.menuItems?.length\n        ) {\n            return;\n        }\n\n        const svgData =\n            '<svg viewBox=\"0 0 32 32\" xmlns=\"http://www.w3.org/2000/svg\"><path fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" d=\"m8 8 16 16M24 8 8 24\"/></svg>';\n\n        return (\n            <button\n                class=\"trailing-button remove-button\"\n                tabIndex={-1}\n                aria-label={this.removeChipLabel}\n                aria-controls={'chip-' + this.identifier}\n                innerHTML={svgData}\n                onClick={this.handleRemoveClick}\n            />\n        );\n    }\n\n    private renderActionsMenu() {\n        if (!this.menuItems?.length) {\n            return;\n        }\n\n        const svgData =\n            '<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" xml:space=\"preserve\"><circle fill=\"currentColor\" cx=\"16\" cy=\"16\" r=\"2\"/><circle fill=\"currentColor\" cx=\"16\" cy=\"24\" r=\"2\"/><circle fill=\"currentColor\" cx=\"16\" cy=\"8\" r=\"2\"/></svg>';\n\n        const menuItems = this.getMenuItems();\n\n        return (\n            <limel-menu\n                items={menuItems}\n                onSelect={this.handleActionMenuSelect}\n                openDirection=\"bottom-end\"\n                onCancel={this.handleActionMenuCancel}\n            >\n                <button\n                    slot=\"trigger\"\n                    disabled={this.disabled}\n                    class=\"trailing-button\"\n                    aria-label={this.actionMenuLabel}\n                    innerHTML={svgData}\n                />\n            </limel-menu>\n        );\n    }\n\n    private getMenuItems() {\n        let menuItems = [...this.menuItems];\n\n        if (this.removable) {\n            menuItems = [\n                ...menuItems,\n                { separator: true },\n                {\n                    text: this.removeChipLabel(),\n                    icon: {\n                        name: 'delete_sign',\n                        color: 'rgb(var(--color-red-default))',\n                    },\n                    value: '_remove',\n                },\n            ];\n        }\n\n        return menuItems;\n    }\n\n    private filterClickWhenDisabled = (e) => {\n        if (this.disabled || this.readonly) {\n            e.preventDefault();\n        }\n    };\n\n    private handleRemoveClick = (event: MouseEvent | KeyboardEvent) => {\n        event.stopPropagation();\n        this.remove.emit(this.identifier);\n    };\n\n    private handleDeleteKeyDown = (event: KeyboardEvent) => {\n        if (!this.removable) {\n            return;\n        }\n\n        const keys = [DELETE, BACKSPACE];\n\n        if (keys.includes(event.key)) {\n            this.handleRemoveClick(event);\n        }\n    };\n\n    private removeChipLabel = (): string => {\n        return translate.get('remove', this.language) + ' ' + this.text;\n    };\n\n    private actionMenuLabel = (): string => {\n        return translate.get('file-viewer.more-actions', this.language);\n    };\n\n    private renderSpinner() {\n        if (!this.loading) {\n            return;\n        }\n\n        return <limel-linear-progress indeterminate={true} />;\n    }\n\n    private renderProgressBar() {\n        if (!this.progress) {\n            return;\n        }\n\n        const currentPercentage = this.progress + '%';\n\n        return (\n            <div\n                role=\"progressbar\"\n                aria-label=\"%\"\n                aria-valuemin=\"0\"\n                aria-valuemax=\"100\"\n                aria-valuenow={this.progress}\n                style={{\n                    '--limel-chip-progress-percentage': currentPercentage,\n                }}\n            />\n        );\n    }\n\n    private handleActionMenuSelect = (\n        event: LimelMenuCustomEvent<MenuItem>,\n    ) => {\n        const menuItem = event.detail;\n\n        if (!menuItem) {\n            return;\n        }\n\n        if (menuItem.value === '_remove') {\n            this.remove.emit(this.identifier);\n\n            return;\n        }\n\n        this.menuItemSelected.emit(menuItem);\n    };\n\n    private handleActionMenuCancel = (event: LimelMenuCustomEvent<void>) => {\n        event.stopPropagation();\n    };\n}\n"]}
+{"version":3,"file":"chip.js","sourceRoot":"","sources":["../../../src/components/chip/chip.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Prop,\n} from '@stencil/core';\nimport { Icon } from '../../global/shared-types/icon.types';\nimport { Languages } from '../date-picker/date.types';\nimport { Link } from '../../global/shared-types/link.types';\nimport { getIconName } from '../icon/get-icon-props';\nimport {\n    makeEnterClickable,\n    removeEnterClickable,\n} from '../../util/make-enter-clickable';\nimport translate from '../../global/translations';\nimport { BACKSPACE, DELETE } from '../../util/keycodes';\nimport { ChipType, Chip as OldChipInterface } from '../chip-set/chip.types';\nimport { Image } from '../../global/shared-types/image.types';\nimport { isEmpty } from 'lodash-es';\n\nimport { ListSeparator } from '../list/list-item.types';\nimport { LimelMenuCustomEvent, MenuItem } from '../../components';\n\ninterface ChipInterface extends Omit<OldChipInterface, 'id' | 'badge'> {\n    /**\n     * Identifier for the chip. Must be unique.\n     */\n    identifier?: number | string;\n\n    /**\n     * The value of the badge.\n     */\n    badge?: string | number;\n}\n\n/**\n * Chips and buttons are both interactive elements in UI design,\n * but they serve different purposes and are used in different contexts.\n *\n * :::warning\n * Do not use the chip component carelessly, as an alternative for\n * [`limel-button`](#/component/limel-button/) in the UI design!\n *\n * **Buttons:**\n * Buttons are used to trigger actions. They are typically used to\n * submit forms, open dialogs, initiate a process, or perform any action\n * that changes the state of the application.\n * Buttons' labels usually contain action words, in other words, the labels is\n * a _verb in imperative mood_ such as \"Submit\" or \"Delete\".\n * Buttons are placed in areas where it's clear they will initiate\n * an action when clicked.\n *\n * **Chips:**\n * Chips however are elements which may look like buttons, but they are\n * representing choices, filters, or tags, in a small block\n * or clearly bundled into a group. Chips are rarely used alone in the\n * user interface.\n * They are often used in a so called \"chip-set\", or placed together in\n * a section of the UI, where the user can expect more than one chip to be present.\n *\n * For example, a chip may represent a filter in a filter bar, or a tag in a tag list,\n * or an item in a shopping list.\n * Clicking a chip can also trigger an action, for example toggling a filter ON or OFF,\n * or opening a page with all posts tagged with the tag represented by the chip,\n * or navigating to a page with more information about the item in the shopping list.\n * :::\n *\n * @exampleComponent limel-example-chip-button\n * @exampleComponent limel-example-chip-link\n * @exampleComponent limel-example-chip-icon-colors\n * @exampleComponent limel-example-chip-image\n * @exampleComponent limel-example-chip-badge\n * @exampleComponent limel-example-chip-filter\n * @exampleComponent limel-example-chip-removable\n * @exampleComponent limel-example-chip-menu\n * @exampleComponent limel-example-chip-loading\n * @exampleComponent limel-example-chip-progress\n * @exampleComponent limel-example-chip-readonly-border\n * @exampleComponent limel-example-chip-aria-role\n */\n@Component({\n    tag: 'limel-chip',\n    shadow: { delegatesFocus: true },\n    styleUrl: 'chip.scss',\n})\nexport class Chip implements ChipInterface {\n    /**\n     * Defines the language for translations.\n     * Will translate the translatable strings on the components.\n     */\n    @Prop({ reflect: true })\n    public language: Languages = 'en';\n\n    /**\n     * Label displayed on the chip\n     */\n    @Prop({ reflect: true })\n    public text: string;\n\n    /**\n     * Icon of the chip.\n     */\n    @Prop()\n    public icon?: string | Icon;\n\n    /**\n     * A picture to be displayed instead of the icon on the chip.\n     */\n    @Prop()\n    public image?: Image;\n\n    /**\n     * If supplied, the chip will become a clickable link.\n     */\n    @Prop()\n    public link?: Omit<Link, 'text'>;\n\n    /**\n     * The value of the badge, displayed on the chip.\n     */\n    @Prop({ reflect: true })\n    public badge?: string | number;\n\n    /**\n     * Set to `true` to disable the chip.\n     */\n    @Prop({ reflect: true })\n    public disabled = false;\n\n    /**\n     * Set to `true` to render the chip as a static UI element.\n     * Useful when the parent component has a `readonly` state.\n     */\n    @Prop({ reflect: true })\n    public readonly = false;\n\n    /**\n     * Set to `true` to visualize the chip in a \"selected\" state.\n     * This is typically used when the chip is used in a chip-set\n     * along with other chips.\n     */\n    @Prop({ reflect: true })\n    public selected = false;\n\n    /**\n     * Set to `true` to visualize the chip in an \"invalid\" or \"error\" state.\n     */\n    @Prop({ reflect: true })\n    public invalid = false;\n\n    /**\n     * Set to `true` to render a remove button on the chip.\n     */\n    @Prop({ reflect: true })\n    public removable = false;\n\n    /**\n     * Set to `filter` to render the chip with a distinct style\n     * suitable for visualizing filters.\n     *\n     * @beta\n     */\n    @Prop({ reflect: true })\n    public type?: ChipType = 'default';\n\n    /**\n     * Set to `true` to put the component in the `loading` state,\n     * and render an indeterminate progress indicator inside the chip.\n     * This does _not_ disable the interactivity of the chip!\n     */\n    @Prop({ reflect: true })\n    public loading? = false;\n\n    /**\n     * Reflects the current value of a progress bar on the chip,\n     * visualizing the percentage of an ongoing process.\n     * Must be a number between `0` and `100`.\n     */\n    @Prop({ reflect: true })\n    public progress?: number;\n\n    /**\n     * Identifier for the chip. Must be unique.\n     */\n    @Prop({ reflect: true })\n    public identifier?: number | string = crypto.randomUUID();\n\n    /**\n     * When provided, the chip will render an ellipsis menu with the supplied items.\n     * Also, this will hide the \"remove button\" when `removable={true}`, as\n     * the remove button will automatically become the last item in the menu.\n     */\n    @Prop()\n    public menuItems?: Array<MenuItem | ListSeparator> = [];\n\n    /**\n     * Fired when clicking on the remove button of a `removable` chip.\n     * The value of `identifier` is emitted as the event detail.\n     */\n    @Event()\n    public remove: EventEmitter<number | string>;\n\n    /**\n     * Emitted when a menu item is selected from the actions menu.\n     */\n    @Event()\n    public menuItemSelected: EventEmitter<MenuItem>;\n\n    @Element()\n    private host: HTMLLimelChipElement;\n\n    public componentWillLoad() {\n        makeEnterClickable(this.host);\n    }\n\n    public disconnectedCallback() {\n        removeEnterClickable(this.host);\n    }\n\n    public render() {\n        return (\n            <Host onClick={this.filterClickWhenDisabled}>\n                {this.link ? this.renderAsLink() : this.renderAsButton()}\n            </Host>\n        );\n    }\n\n    private renderAsButton = () => {\n        return [\n            <button\n                id={'chip-' + this.identifier}\n                class=\"chip\"\n                role=\"button\"\n                disabled={this.disabled || this.readonly}\n                aria-busy={this.loading ? 'true' : 'false'}\n                aria-live=\"polite\"\n                onKeyDown={this.handleDeleteKeyDown}\n            >\n                {this.renderSpinner()}\n                {this.renderPicture()}\n                {this.renderLabel()}\n                {this.renderBadge()}\n                {this.renderProgressBar()}\n            </button>,\n            this.renderRemoveButton(),\n            this.renderActionsMenu(),\n        ];\n    };\n\n    private renderAsLink = () => {\n        return [\n            <a\n                id={'chip-' + this.identifier}\n                class=\"chip\"\n                href={this.link.href}\n                title={this.link.title}\n                target={this.link.target}\n                aria-disabled={this.disabled || this.readonly}\n                tabindex={this.disabled || this.readonly ? -1 : 0}\n                onKeyDown={this.handleDeleteKeyDown}\n            >\n                {this.renderSpinner()}\n                {this.renderPicture()}\n                {this.renderLabel()}\n                {this.renderBadge()}\n                {this.renderProgressBar()}\n            </a>,\n            this.renderRemoveButton(),\n            this.renderActionsMenu(),\n        ];\n    };\n\n    private renderLabel = () => {\n        return <span class=\"text\">{this.text}</span>;\n    };\n\n    private renderPicture() {\n        const icon = getIconName(this.icon);\n\n        if (!icon && !this.image) {\n            return;\n        }\n\n        if (!isEmpty(this.image)) {\n            return (\n                <img src={this.image.src} alt={this.image.alt} loading=\"lazy\" />\n            );\n        }\n\n        return (\n            <limel-icon\n                badge={true}\n                name={icon}\n                style={{\n                    color: `${(this.icon as Icon)?.color}`,\n                    'background-color': `${\n                        (this.icon as Icon)?.backgroundColor\n                    }`,\n                }}\n            />\n        );\n    }\n\n    private renderBadge() {\n        if (!this.badge) {\n            return;\n        }\n\n        return <limel-badge label={this.badge} />;\n    }\n\n    private renderRemoveButton() {\n        if (\n            !this.removable ||\n            this.readonly ||\n            this.disabled ||\n            !!this.menuItems?.length\n        ) {\n            return;\n        }\n\n        const svgData =\n            '<svg viewBox=\"0 0 32 32\" xmlns=\"http://www.w3.org/2000/svg\"><path fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" d=\"m8 8 16 16M24 8 8 24\"/></svg>';\n\n        return (\n            <button\n                class=\"trailing-button remove-button\"\n                tabIndex={-1}\n                aria-label={this.removeChipLabel}\n                aria-controls={'chip-' + this.identifier}\n                innerHTML={svgData}\n                onClick={this.handleRemoveClick}\n            />\n        );\n    }\n\n    private renderActionsMenu() {\n        if (!this.menuItems?.length) {\n            return;\n        }\n\n        const svgData =\n            '<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" xml:space=\"preserve\"><circle fill=\"currentColor\" cx=\"16\" cy=\"16\" r=\"2\"/><circle fill=\"currentColor\" cx=\"16\" cy=\"24\" r=\"2\"/><circle fill=\"currentColor\" cx=\"16\" cy=\"8\" r=\"2\"/></svg>';\n\n        const menuItems = this.getMenuItems();\n\n        return (\n            <limel-menu\n                items={menuItems}\n                onSelect={this.handleActionMenuSelect}\n                openDirection=\"bottom-end\"\n                onCancel={this.handleActionMenuCancel}\n            >\n                <button\n                    slot=\"trigger\"\n                    disabled={this.disabled}\n                    class=\"trailing-button\"\n                    aria-label={this.actionMenuLabel}\n                    innerHTML={svgData}\n                />\n            </limel-menu>\n        );\n    }\n\n    private getMenuItems() {\n        let menuItems = [...this.menuItems];\n\n        if (this.removable) {\n            menuItems = [\n                ...menuItems,\n                { separator: true },\n                {\n                    text: this.removeChipLabel(),\n                    icon: {\n                        name: 'delete_sign',\n                        color: 'rgb(var(--color-red-default))',\n                    },\n                    value: '_remove',\n                },\n            ];\n        }\n\n        return menuItems;\n    }\n\n    private filterClickWhenDisabled = (e) => {\n        if (this.disabled || this.readonly) {\n            e.preventDefault();\n        }\n    };\n\n    private handleRemoveClick = (event: MouseEvent | KeyboardEvent) => {\n        event.stopPropagation();\n        this.remove.emit(this.identifier);\n    };\n\n    private handleDeleteKeyDown = (event: KeyboardEvent) => {\n        if (!this.removable) {\n            return;\n        }\n\n        const keys = [DELETE, BACKSPACE];\n\n        if (keys.includes(event.key)) {\n            this.handleRemoveClick(event);\n        }\n    };\n\n    private removeChipLabel = (): string => {\n        return translate.get('remove', this.language) + ' ' + this.text;\n    };\n\n    private actionMenuLabel = (): string => {\n        return translate.get('file-viewer.more-actions', this.language);\n    };\n\n    private renderSpinner() {\n        if (!this.loading) {\n            return;\n        }\n\n        return <limel-linear-progress indeterminate={true} />;\n    }\n\n    private renderProgressBar() {\n        if (!this.progress) {\n            return;\n        }\n\n        const currentPercentage = this.progress + '%';\n\n        return (\n            <div\n                role=\"progressbar\"\n                aria-label=\"%\"\n                aria-valuemin=\"0\"\n                aria-valuemax=\"100\"\n                aria-valuenow={this.progress}\n                style={{\n                    '--limel-chip-progress-percentage': currentPercentage,\n                }}\n            />\n        );\n    }\n\n    private handleActionMenuSelect = (\n        event: LimelMenuCustomEvent<MenuItem>,\n    ) => {\n        const menuItem = event.detail;\n\n        if (!menuItem) {\n            return;\n        }\n\n        if (menuItem.value === '_remove') {\n            this.remove.emit(this.identifier);\n\n            return;\n        }\n\n        this.menuItemSelected.emit(menuItem);\n    };\n\n    private handleActionMenuCancel = (event: LimelMenuCustomEvent<void>) => {\n        event.stopPropagation();\n    };\n}\n"]}

package/dist/collection/components/collapsible-section/collapsible-section.css

@@ -207,17 +207,21 @@ header {
   align-items: center;
   display: flex;
   justify-content: space-between;
+  gap: 0.5rem;
   padding-left: 0.5rem;
   height: 2.5rem;
 }
 
+limel-icon {
+  width: 1.5rem;
+}
+
 .title {
   font-size: 1rem;
   font-weight: 300;
   color: var(--mdc-theme-on-surface);
   justify-self: flex-start;
   user-select: none;
-  padding-right: 0.5rem;
   height: auto;
   max-height: 3rem;
   line-height: 1.2rem;
@@ -234,8 +238,8 @@ header {
   height: 0.125rem;
   border-radius: 1rem;
   background-color: var(--header-stroke-color, rgb(var(--contrast-900)));
-  margin-right: 0.5rem;
   opacity: 0;
+  margin-right: 0.5rem;
 }
 section.open .divider-line {
   opacity: 0.16;
@@ -292,7 +296,7 @@ header:hover + .body slot {
 .expand-icon {
   position: relative;
   height: 1.875rem;
-  margin: 0 1rem 0 0.5rem;
+  margin: 0 0 0 0.5rem;
   width: 0.75rem;
   flex-shrink: 0;
 }

package/dist/collection/components/collapsible-section/collapsible-section.js

@@ -2,6 +2,7 @@ import { h, } from '@stencil/core';
 import { dispatchResizeEvent } from '../../util/dispatch-resize-event';
 import { makeEnterClickable, removeEnterClickable, } from '../../util/make-enter-clickable';
 import { createRandomString } from '../../util/random-string';
+import { getIconColor, getIconName, getIconTitle, } from '../icon/get-icon-props';
 /**
  * A collapsible section can be used to group related content together
  * and hide the group when not needed.
@@ -20,11 +21,13 @@ import { createRandomString } from '../../util/random-string';
  * @exampleComponent limel-example-collapsible-section-external-control
  * @exampleComponent limel-example-collapsible-section-with-slider
  * @exampleComponent limel-example-collapsible-section-invalid
+ * @exampleComponent limel-example-collapsible-section-icon
  * @exampleComponent limel-example-collapsible-section-css-props
  */
 export class CollapsibleSection {
   constructor() {
     this.bodyId = createRandomString();
+    this.headingId = createRandomString();
     this.onClick = () => {
       this.handleInteraction();
     };
@@ -39,6 +42,23 @@ export class CollapsibleSection {
         this.close.emit();
       }
     };
+    this.renderIcon = () => {
+      if (!this.icon) {
+        return;
+      }
+      const name = getIconName(this.icon);
+      const color = getIconColor(this.icon);
+      const title = getIconTitle(this.icon);
+      return (h("limel-icon", { name: name, "aria-label": title, "aria-hidden": title ? null : 'true', style: {
+          color: `${color}`,
+        } }));
+    };
+    this.renderHeading = () => {
+      if (!this.header) {
+        return;
+      }
+      return (h("h2", { class: "title mdc-typography mdc-typography--headline2", id: this.headingId }, this.header));
+    };
     this.renderActions = () => {
       if (!this.actions) {
         return;
@@ -54,6 +74,7 @@ export class CollapsibleSection {
     };
     this.isOpen = false;
     this.header = undefined;
+    this.icon = undefined;
     this.invalid = false;
     this.actions = undefined;
   }
@@ -66,7 +87,7 @@ export class CollapsibleSection {
     removeEnterClickable(button);
   }
   render() {
-    return (h("section", { class: `${this.isOpen ? 'open' : ''}`, "aria-invalid": this.invalid }, h("header", null, h("button", { class: "open-close-toggle", onClick: this.onClick, "aria-controls": this.bodyId }), h("div", { class: "expand-icon" }, h("div", { class: "line" }), h("div", { class: "line" }), h("div", { class: "line" }), h("div", { class: "line" })), h("h2", { class: "title mdc-typography mdc-typography--headline2" }, this.header), h("div", { class: "divider-line" }), this.renderHeaderSlot(), this.renderActions()), h("div", { class: "body", "aria-hidden": String(!this.isOpen), id: this.bodyId }, h("slot", null))));
+    return (h("section", { class: `${this.isOpen ? 'open' : ''}`, "aria-invalid": this.invalid, "aria-labelledby": this.header ? this.headingId : null }, h("header", null, h("button", { class: "open-close-toggle", onClick: this.onClick, "aria-controls": this.bodyId }), h("div", { class: "expand-icon" }, h("div", { class: "line" }), h("div", { class: "line" }), h("div", { class: "line" }), h("div", { class: "line" })), this.renderIcon(), this.renderHeading(), h("div", { class: "divider-line", role: "presentation" }), this.renderHeaderSlot(), this.renderActions()), h("div", { class: "body", "aria-hidden": String(!this.isOpen), id: this.bodyId }, h("slot", null))));
   }
   renderHeaderSlot() {
     return h("slot", { name: "header" });
@@ -120,6 +141,28 @@ export class CollapsibleSection {
         "attribute": "header",
         "reflect": true
       },
+      "icon": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string | Icon",
+          "resolved": "Icon | string",
+          "references": {
+            "Icon": {
+              "location": "import",
+              "path": "../../global/shared-types/icon.types"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Icon to display in the header of the section"
+        },
+        "attribute": "icon",
+        "reflect": false
+      },
       "invalid": {
         "type": "boolean",
         "mutable": false,

package/dist/collection/components/collapsible-section/collapsible-section.js.map

@@ -1 +1 @@
-{"version":3,"file":"collapsible-section.js","sourceRoot":"","sources":["../../../src/components/collapsible-section/collapsible-section.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    Event,\n    Element,\n    EventEmitter,\n    h,\n    Prop,\n} from '@stencil/core';\nimport { dispatchResizeEvent } from '../../util/dispatch-resize-event';\nimport { Action } from './action';\nimport {\n    makeEnterClickable,\n    removeEnterClickable,\n} from '../../util/make-enter-clickable';\nimport { createRandomString } from '../../util/random-string';\n\n/**\n * A collapsible section can be used to group related content together\n * and hide the group when not needed.\n * Using this component can help to:\n * - Save vertical space by hiding non-essential content\n * - Improve content organization and scannability of the user interface\n * - Reduce cognitive load by displaying only a set of relevant information at a time\n * - Or disclose complex information, progressively to the user\n *\n * @slot - Content to put inside the collapsible section\n * @slot header - Optional slot for custom header content\n *\n * @exampleComponent limel-example-collapsible-section-basic\n * @exampleComponent limel-example-collapsible-section-actions\n * @exampleComponent limel-example-collapsible-section-with-custom-header-component\n * @exampleComponent limel-example-collapsible-section-external-control\n * @exampleComponent limel-example-collapsible-section-with-slider\n * @exampleComponent limel-example-collapsible-section-invalid\n * @exampleComponent limel-example-collapsible-section-css-props\n */\n@Component({\n    tag: 'limel-collapsible-section',\n    shadow: true,\n    styleUrl: 'collapsible-section.scss',\n})\nexport class CollapsibleSection {\n    /**\n     * `true` if the section is expanded, `false` if collapsed.\n     */\n    @Prop({ mutable: true, reflect: true })\n    public isOpen: boolean = false;\n\n    /**\n     * Text to display in the header of the section\n     */\n    @Prop({ reflect: true })\n    public header: string;\n\n    /**\n     * `true` if the section is invalid, `false` if valid.\n     * This can be used to indicate that the content inside the section is invalid.\n     */\n    @Prop({ reflect: true })\n    public invalid = false;\n\n    /**\n     * Actions to place to the far right inside the header\n     */\n    @Prop()\n    public actions: Action[];\n\n    /**\n     * Emitted when the section is expanded\n     */\n    @Event()\n    private open: EventEmitter<void>;\n\n    /**\n     * Emitted when the section is collapsed\n     */\n    @Event()\n    private close: EventEmitter<void>;\n\n    /**\n     * Emitted when an action is clicked inside the header\n     */\n    @Event()\n    private action: EventEmitter<Action>;\n\n    @Element()\n    private host: HTMLElement;\n\n    private bodyId = createRandomString();\n\n    public componentDidRender() {\n        const button = this.host.shadowRoot.querySelector(\n            '.open-close-toggle',\n        ) as HTMLElement;\n\n        makeEnterClickable(button);\n    }\n\n    public disconnectedCallback() {\n        const button = this.host.shadowRoot.querySelector(\n            '.open-close-toggle',\n        ) as HTMLElement;\n\n        removeEnterClickable(button);\n    }\n\n    public render() {\n        return (\n            <section\n                class={`${this.isOpen ? 'open' : ''}`}\n                aria-invalid={this.invalid}\n            >\n                <header>\n                    <button\n                        class=\"open-close-toggle\"\n                        onClick={this.onClick}\n                        aria-controls={this.bodyId}\n                    />\n                    <div class=\"expand-icon\">\n                        <div class=\"line\" />\n                        <div class=\"line\" />\n                        <div class=\"line\" />\n                        <div class=\"line\" />\n                    </div>\n                    <h2 class=\"title mdc-typography mdc-typography--headline2\">\n                        {this.header}\n                    </h2>\n                    <div class=\"divider-line\" />\n                    {this.renderHeaderSlot()}\n                    {this.renderActions()}\n                </header>\n                <div\n                    class=\"body\"\n                    aria-hidden={String(!this.isOpen)}\n                    id={this.bodyId}\n                >\n                    <slot />\n                </div>\n            </section>\n        );\n    }\n\n    private onClick = () => {\n        this.handleInteraction();\n    };\n\n    private handleInteraction = () => {\n        this.isOpen = !this.isOpen;\n\n        if (this.isOpen) {\n            this.open.emit();\n            const waitForUiToRender = 100;\n            setTimeout(dispatchResizeEvent, waitForUiToRender);\n        } else {\n            this.close.emit();\n        }\n    };\n\n    private renderActions = () => {\n        if (!this.actions) {\n            return;\n        }\n\n        return (\n            <div class=\"actions\">\n                {this.actions.map(this.renderActionButton)}\n            </div>\n        );\n    };\n\n    private renderHeaderSlot() {\n        return <slot name=\"header\" />;\n    }\n\n    private renderActionButton = (action: Action) => {\n        return (\n            <limel-icon-button\n                icon={action.icon}\n                label={action.label}\n                disabled={action.disabled}\n                onClick={this.handleActionClick(action)}\n            />\n        );\n    };\n\n    private handleActionClick = (action: Action) => (event: MouseEvent) => {\n        event.stopPropagation();\n        this.action.emit(action);\n    };\n}\n"]}
+{"version":3,"file":"collapsible-section.js","sourceRoot":"","sources":["../../../src/components/collapsible-section/collapsible-section.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    Event,\n    Element,\n    EventEmitter,\n    h,\n    Prop,\n} from '@stencil/core';\nimport { dispatchResizeEvent } from '../../util/dispatch-resize-event';\nimport { Action } from './action';\nimport {\n    makeEnterClickable,\n    removeEnterClickable,\n} from '../../util/make-enter-clickable';\nimport { createRandomString } from '../../util/random-string';\nimport { Icon } from '../../global/shared-types/icon.types';\nimport {\n    getIconColor,\n    getIconName,\n    getIconTitle,\n} from '../icon/get-icon-props';\n\n/**\n * A collapsible section can be used to group related content together\n * and hide the group when not needed.\n * Using this component can help to:\n * - Save vertical space by hiding non-essential content\n * - Improve content organization and scannability of the user interface\n * - Reduce cognitive load by displaying only a set of relevant information at a time\n * - Or disclose complex information, progressively to the user\n *\n * @slot - Content to put inside the collapsible section\n * @slot header - Optional slot for custom header content\n *\n * @exampleComponent limel-example-collapsible-section-basic\n * @exampleComponent limel-example-collapsible-section-actions\n * @exampleComponent limel-example-collapsible-section-with-custom-header-component\n * @exampleComponent limel-example-collapsible-section-external-control\n * @exampleComponent limel-example-collapsible-section-with-slider\n * @exampleComponent limel-example-collapsible-section-invalid\n * @exampleComponent limel-example-collapsible-section-icon\n * @exampleComponent limel-example-collapsible-section-css-props\n */\n@Component({\n    tag: 'limel-collapsible-section',\n    shadow: true,\n    styleUrl: 'collapsible-section.scss',\n})\nexport class CollapsibleSection {\n    /**\n     * `true` if the section is expanded, `false` if collapsed.\n     */\n    @Prop({ mutable: true, reflect: true })\n    public isOpen: boolean = false;\n\n    /**\n     * Text to display in the header of the section\n     */\n    @Prop({ reflect: true })\n    public header: string;\n\n    /**\n     * Icon to display in the header of the section\n     */\n    @Prop()\n    public icon?: string | Icon;\n\n    /**\n     * `true` if the section is invalid, `false` if valid.\n     * This can be used to indicate that the content inside the section is invalid.\n     */\n    @Prop({ reflect: true })\n    public invalid = false;\n\n    /**\n     * Actions to place to the far right inside the header\n     */\n    @Prop()\n    public actions: Action[];\n\n    /**\n     * Emitted when the section is expanded\n     */\n    @Event()\n    private open: EventEmitter<void>;\n\n    /**\n     * Emitted when the section is collapsed\n     */\n    @Event()\n    private close: EventEmitter<void>;\n\n    /**\n     * Emitted when an action is clicked inside the header\n     */\n    @Event()\n    private action: EventEmitter<Action>;\n\n    @Element()\n    private host: HTMLElement;\n\n    private bodyId = createRandomString();\n    private headingId = createRandomString();\n\n    public componentDidRender() {\n        const button = this.host.shadowRoot.querySelector(\n            '.open-close-toggle',\n        ) as HTMLElement;\n\n        makeEnterClickable(button);\n    }\n\n    public disconnectedCallback() {\n        const button = this.host.shadowRoot.querySelector(\n            '.open-close-toggle',\n        ) as HTMLElement;\n\n        removeEnterClickable(button);\n    }\n\n    public render() {\n        return (\n            <section\n                class={`${this.isOpen ? 'open' : ''}`}\n                aria-invalid={this.invalid}\n                aria-labelledby={this.header ? this.headingId : null}\n            >\n                <header>\n                    <button\n                        class=\"open-close-toggle\"\n                        onClick={this.onClick}\n                        aria-controls={this.bodyId}\n                    />\n                    <div class=\"expand-icon\">\n                        <div class=\"line\" />\n                        <div class=\"line\" />\n                        <div class=\"line\" />\n                        <div class=\"line\" />\n                    </div>\n                    {this.renderIcon()}\n                    {this.renderHeading()}\n                    <div class=\"divider-line\" role=\"presentation\" />\n                    {this.renderHeaderSlot()}\n                    {this.renderActions()}\n                </header>\n                <div\n                    class=\"body\"\n                    aria-hidden={String(!this.isOpen)}\n                    id={this.bodyId}\n                >\n                    <slot />\n                </div>\n            </section>\n        );\n    }\n\n    private onClick = () => {\n        this.handleInteraction();\n    };\n\n    private handleInteraction = () => {\n        this.isOpen = !this.isOpen;\n\n        if (this.isOpen) {\n            this.open.emit();\n            const waitForUiToRender = 100;\n            setTimeout(dispatchResizeEvent, waitForUiToRender);\n        } else {\n            this.close.emit();\n        }\n    };\n\n    private renderIcon = () => {\n        if (!this.icon) {\n            return;\n        }\n\n        const name = getIconName(this.icon);\n        const color = getIconColor(this.icon);\n        const title = getIconTitle(this.icon);\n\n        return (\n            <limel-icon\n                name={name}\n                aria-label={title}\n                aria-hidden={title ? null : 'true'}\n                style={{\n                    color: `${color}`,\n                }}\n            />\n        );\n    };\n\n    private renderHeading = () => {\n        if (!this.header) {\n            return;\n        }\n\n        return (\n            <h2\n                class=\"title mdc-typography mdc-typography--headline2\"\n                id={this.headingId}\n            >\n                {this.header}\n            </h2>\n        );\n    };\n\n    private renderActions = () => {\n        if (!this.actions) {\n            return;\n        }\n\n        return (\n            <div class=\"actions\">\n                {this.actions.map(this.renderActionButton)}\n            </div>\n        );\n    };\n\n    private renderHeaderSlot() {\n        return <slot name=\"header\" />;\n    }\n\n    private renderActionButton = (action: Action) => {\n        return (\n            <limel-icon-button\n                icon={action.icon}\n                label={action.label}\n                disabled={action.disabled}\n                onClick={this.handleActionClick(action)}\n            />\n        );\n    };\n\n    private handleActionClick = (action: Action) => (event: MouseEvent) => {\n        event.stopPropagation();\n        this.action.emit(action);\n    };\n}\n"]}

package/dist/esm/{file-metadata-01403ecd.js → file-metadata-77f9e2dd.js}

@@ -1,4 +1,4 @@
-import { g as getIconName, a as getIconColor, b as getIconBackgroundColor } from './get-icon-props-5a77e17e.js';
+import { g as getIconName, a as getIconColor, c as getIconBackgroundColor } from './get-icon-props-37514418.js';
 
 const DEFAULT_ICON_BACKGROUND_COLOR = 'rgba(var(--color-gray-lighter), 0.4)';
 const CALENDAR_ICON_BACKGROUND_COLOR = 'rgba(var(--color-cyan-lighter), 0.4)';
@@ -391,4 +391,4 @@ function getExtension(file) {
 
 export { getFileExtensionTitle as a, getFileColor as b, getFileBackgroundColor as c, getFileIcon as g };
 
-//# sourceMappingURL=file-metadata-01403ecd.js.map
+//# sourceMappingURL=file-metadata-77f9e2dd.js.map