jebamo 0.0.15 → 0.0.16

package/components/index.js

@@ -1,4 +1,4 @@
-export { g as getAssetPath, r as render, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-CkqNsQSv.js';
+export { g as getAssetPath, r as render, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-B9hMQ-5_.js';
 
 const createDialog = (options) => {
     const dialog = document.createElement('je-modal');
@@ -104,12 +104,11 @@ const createToast = (options) => {
     toast.icon = options.icon;
     if (options.buttons) {
         options.buttons.forEach(button => {
-            var _a;
             const btn = document.createElement('je-button');
             btn.textContent = button.text;
             btn.fill = button.fill;
             btn.color = button.color;
-            btn.size = (_a = button.size) !== null && _a !== void 0 ? _a : 'sm';
+            btn.size = button.size ?? 'sm';
             btn.slot = 'buttons';
             if (button.handler)
                 btn.addEventListener('click', () => button.handler(toast));

package/components/index.js.map

@@ -1 +1 @@
-{"file":"index.js","mappings":"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","names":[],"sources":["src/utils/functions/create-dialog.ts","src/utils/functions/create-toast.ts"],"sourcesContent":["import { Color } from \"../utils\";\n\nexport type DialogControl = {\n  label?: string;\n  placeholder?: string;\n  validators?: HTMLJeTextfieldElement['validators'];\n  required?: boolean;\n  type?: string;\n  originalValue?: string;\n  value?: string;\n  name?: string;\n  debounce?: number;\n  valueChangeHandler?: (input: any) => void | Promise<void>;\n};\n\nexport type DialogButton = {\n  text?: string;\n  fill?: 'solid' | 'outline' | 'clear';\n  color?: Color;\n  type?: 'submit' | 'reset';\n  size?: 'sm' | 'md' | 'lg';\n  handler?: (dialog: HTMLJeModalElement) => void | Promise<void>;\n};\n\nexport type CreateDialogOptions = {\n  header?: string,\n  message?: string,\n  icon?: string,\n  buttons?: DialogButton[];\n  controls?: DialogControl[],\n  showBackdrop?: boolean,\n  backdropDismiss?: boolean\n}\n\nexport const createDialog = (options: CreateDialogOptions) => {\n  const dialog = document.createElement('je-modal');\n  dialog.size = 'sm';\n  dialog.setHTMLUnsafe(`\n    <je-form>\n      <div class=\"je-dialog-container\">\n        <template shadowrootmode=\"open\">\n          <style>\n            :host {\n              display: flex;\n              flex-direction: column;\n              gap: 1rem;\n              padding: 1rem;\n              box-sizing: border-box;\n            }\n          </style>\n          <je-toolbar>\n            <slot name=\"icon\"></slot>\n            <slot name=\"header\"></slot>\n            <je-icon-button icon=\"close\" slot=\"end\"></je-icon-button>\n          </je-toolbar>\n          <slot name=\"message\"></slot>\n          <slot name=\"controls\"></slot>\n          <slot name=\"buttons\"></slot>\n        </template>\n      </div>\n    </je-form>\n  `)\n  dialog.backdropDismiss = options.backdropDismiss;\n  dialog.showBackdrop = options.showBackdrop;\n  document.body.append(dialog);\n  const container = dialog.querySelector('.je-dialog-container')\n  if (options.header) {\n    container.insertAdjacentHTML('afterbegin', `\n      <h3 slot=\"header\">${options.header}</h3>\n    `)\n  }\n  if (options.message) {\n    container.insertAdjacentHTML('beforeend', `\n      <je-label slot=\"message\">${options.message}</je-label>\n    `)\n  }\n  if (options.icon) {\n    container.insertAdjacentHTML('afterbegin', `\n      <je-icon fill slot=\"icon\">${options.icon}</je-icon>\n    `)\n  }\n  if (options.controls) {\n    container.insertAdjacentHTML('beforeend', `\n      <div slot=\"controls\" class=\"je-dialog-controls\"></div>\n    `)\n    const controls = container.querySelector('.je-dialog-controls');\n    options.controls.forEach(control => {\n      const input = document.createElement('je-textfield');\n      input.label = control.label;\n      input.placeholder = control.placeholder;\n      input.validators = control.validators;\n      input.required = control.required;\n      input.type = control.type;\n      input.setAttribute('name', control.name)\n      input.originalValue = control.originalValue;\n      input.value = control.value;\n      input.debounce = control.debounce;\n      input.addEventListener('valueChange', control.valueChangeHandler);\n      controls.append(input);\n    })\n  }\n  if (options.buttons) {\n    container.insertAdjacentHTML('beforeend', `\n      <je-toolbar slot=\"buttons\" class=\"je-dialog-buttons\"></je-toolbar>\n    `)\n    const buttons = container.querySelector('.je-dialog-buttons');\n    options.buttons.forEach(button => {\n      const btn = document.createElement('je-button');\n      btn.textContent = button.text;\n      btn.fill = button.fill;\n      btn.color = button.color;\n      btn.type = button.type;\n      btn.size = button.size;\n      btn.slot = 'end';\n      if (button.handler) btn.addEventListener('click', () => button.handler(dialog));\n      buttons.append(btn);\n    })\n  }\n  const closeButton = container.shadowRoot.querySelector('je-icon-button')\n  closeButton.addEventListener('click', () => dialog.hide(), { once: true });\n  const form = dialog.querySelector('je-form');\n  form.addEventListener('submit', () => dialog.hide(), { once: true });\n  dialog.addEventListener('dismiss', () => dialog.remove(), { once: true });\n  return [dialog, form] as const;\n}\n","import { Color } from \"../utils\";\n\nexport type CreateToastOptions = {\n  header?: string;\n  message?: string;\n  color?: Color;\n  duration?: number;\n  progress?: boolean;\n  icon?: string;\n  closable?: boolean;\n  position?: 'top' | 'bottom' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end';\n  buttons?: {\n    text?: string;\n    fill?: 'solid' | 'outline' | 'clear';\n    color?: Color;\n    size?: 'sm' | 'md' | 'lg';\n    handler?: (toast: HTMLJeAlertElement) => void | Promise<void>;\n  }[];\n};\n\nexport const createToast = (options: CreateToastOptions) => {\n  const toast = document.createElement('je-alert');\n  toast.color = options.color;\n  toast.duration = options.duration;\n  toast.progress = options.progress;\n  toast.closable = options.closable;\n  toast.header = options.header;\n  toast.message = options.message;\n  toast.icon = options.icon;\n  if (options.buttons) {\n    options.buttons.forEach(button => {\n      const btn = document.createElement('je-button');\n      btn.textContent = button.text;\n      btn.fill = button.fill;\n      btn.color = button.color;\n      btn.size = button.size ?? 'sm';\n      btn.slot = 'buttons';\n      if (button.handler) btn.addEventListener('click', () => button.handler(toast));\n      toast.append(btn);\n    })\n  }\n  let container = document.querySelector<HTMLJeToastContainerElement>(`je-toast-container[position=${options.position}]`);\n  if (!container) {\n    container = document.createElement('je-toast-container');\n    container.position = options.position;\n    document.body.append(container);\n    container.popover = 'manual';\n  }\n\n  container.append(toast)\n  if (!container.matches(':popover-open')) {\n    container.showPopover()\n  }\n  toast.didDismiss().then(() => {\n    toast.remove()\n  })\n  return toast;\n}\n"],"version":3}
+{"file":"index.js","mappings":"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","names":[],"sources":["src/utils/functions/create-dialog.ts","src/utils/functions/create-toast.ts"],"sourcesContent":["import { Color } from \"../utils\";\n\nexport type DialogControl = {\n  label?: string;\n  placeholder?: string;\n  validators?: HTMLJeTextfieldElement['validators'];\n  required?: boolean;\n  type?: string;\n  originalValue?: string;\n  value?: string;\n  name?: string;\n  debounce?: number;\n  valueChangeHandler?: (input: any) => void | Promise<void>;\n};\n\nexport type DialogButton = {\n  text?: string;\n  fill?: 'solid' | 'outline' | 'clear';\n  color?: Color;\n  type?: 'submit' | 'reset';\n  size?: 'sm' | 'md' | 'lg';\n  handler?: (dialog: HTMLJeModalElement) => void | Promise<void>;\n};\n\nexport type CreateDialogOptions = {\n  header?: string,\n  message?: string,\n  icon?: string,\n  buttons?: DialogButton[];\n  controls?: DialogControl[],\n  showBackdrop?: boolean,\n  backdropDismiss?: boolean\n}\n\nexport const createDialog = (options: CreateDialogOptions) => {\n  const dialog = document.createElement('je-modal');\n  dialog.size = 'sm';\n  dialog.setHTMLUnsafe(`\n    <je-form>\n      <div class=\"je-dialog-container\">\n        <template shadowrootmode=\"open\">\n          <style>\n            :host {\n              display: flex;\n              flex-direction: column;\n              gap: 1rem;\n              padding: 1rem;\n              box-sizing: border-box;\n            }\n          </style>\n          <je-toolbar>\n            <slot name=\"icon\"></slot>\n            <slot name=\"header\"></slot>\n            <je-icon-button icon=\"close\" slot=\"end\"></je-icon-button>\n          </je-toolbar>\n          <slot name=\"message\"></slot>\n          <slot name=\"controls\"></slot>\n          <slot name=\"buttons\"></slot>\n        </template>\n      </div>\n    </je-form>\n  `)\n  dialog.backdropDismiss = options.backdropDismiss;\n  dialog.showBackdrop = options.showBackdrop;\n  document.body.append(dialog);\n  const container = dialog.querySelector('.je-dialog-container')\n  if (options.header) {\n    container.insertAdjacentHTML('afterbegin', `\n      <h3 slot=\"header\">${options.header}</h3>\n    `)\n  }\n  if (options.message) {\n    container.insertAdjacentHTML('beforeend', `\n      <je-label slot=\"message\">${options.message}</je-label>\n    `)\n  }\n  if (options.icon) {\n    container.insertAdjacentHTML('afterbegin', `\n      <je-icon fill slot=\"icon\">${options.icon}</je-icon>\n    `)\n  }\n  if (options.controls) {\n    container.insertAdjacentHTML('beforeend', `\n      <div slot=\"controls\" class=\"je-dialog-controls\"></div>\n    `)\n    const controls = container.querySelector('.je-dialog-controls');\n    options.controls.forEach(control => {\n      const input = document.createElement('je-textfield');\n      input.label = control.label;\n      input.placeholder = control.placeholder;\n      input.validators = control.validators;\n      input.required = control.required;\n      input.type = control.type;\n      input.setAttribute('name', control.name)\n      input.originalValue = control.originalValue;\n      input.value = control.value;\n      input.debounce = control.debounce;\n      input.addEventListener('valueChange', control.valueChangeHandler);\n      controls.append(input);\n    })\n  }\n  if (options.buttons) {\n    container.insertAdjacentHTML('beforeend', `\n      <je-toolbar slot=\"buttons\" class=\"je-dialog-buttons\"></je-toolbar>\n    `)\n    const buttons = container.querySelector('.je-dialog-buttons');\n    options.buttons.forEach(button => {\n      const btn = document.createElement('je-button');\n      btn.textContent = button.text;\n      btn.fill = button.fill;\n      btn.color = button.color;\n      btn.type = button.type;\n      btn.size = button.size;\n      btn.slot = 'end';\n      if (button.handler) btn.addEventListener('click', () => button.handler(dialog));\n      buttons.append(btn);\n    })\n  }\n  const closeButton = container.shadowRoot.querySelector('je-icon-button')\n  closeButton.addEventListener('click', () => dialog.hide(), { once: true });\n  const form = dialog.querySelector('je-form');\n  form.addEventListener('submit', () => dialog.hide(), { once: true });\n  dialog.addEventListener('dismiss', () => dialog.remove(), { once: true });\n  return [dialog, form] as const;\n}\n","import { Color } from \"../utils\";\n\nexport type CreateToastOptions = {\n  header?: string;\n  message?: string;\n  color?: Color;\n  duration?: number;\n  progress?: boolean;\n  icon?: string;\n  closable?: boolean;\n  position?: 'top' | 'bottom' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end';\n  buttons?: {\n    text?: string;\n    fill?: 'solid' | 'outline' | 'clear';\n    color?: Color;\n    size?: 'sm' | 'md' | 'lg';\n    handler?: (toast: HTMLJeAlertElement) => void | Promise<void>;\n  }[];\n};\n\nexport const createToast = (options: CreateToastOptions) => {\n  const toast = document.createElement('je-alert');\n  toast.color = options.color;\n  toast.duration = options.duration;\n  toast.progress = options.progress;\n  toast.closable = options.closable;\n  toast.header = options.header;\n  toast.message = options.message;\n  toast.icon = options.icon;\n  if (options.buttons) {\n    options.buttons.forEach(button => {\n      const btn = document.createElement('je-button');\n      btn.textContent = button.text;\n      btn.fill = button.fill;\n      btn.color = button.color;\n      btn.size = button.size ?? 'sm';\n      btn.slot = 'buttons';\n      if (button.handler) btn.addEventListener('click', () => button.handler(toast));\n      toast.append(btn);\n    })\n  }\n  let container = document.querySelector<HTMLJeToastContainerElement>(`je-toast-container[position=${options.position}]`);\n  if (!container) {\n    container = document.createElement('je-toast-container');\n    container.position = options.position;\n    document.body.append(container);\n    container.popover = 'manual';\n  }\n\n  container.append(toast)\n  if (!container.matches(':popover-open')) {\n    container.showPopover()\n  }\n  toast.didDismiss().then(() => {\n    toast.remove()\n  })\n  return toast;\n}\n"],"version":3}

package/components/je-accordion.js

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h } from './p-CkqNsQSv.js';
+import { p as proxyCustomElement, H, h } from './p-B9hMQ-5_.js';
 
 const jeAccordionCss = ":host{display:flex;flex-direction:column}";
 
@@ -8,6 +8,7 @@ const JeAccordion$1 = /*@__PURE__*/ proxyCustomElement(class JeAccordion extends
         this.__registerHost();
         this.__attachShadow();
     }
+    get el() { return this; }
     onExpand(ev) {
         const { target } = ev;
         const sections = Array.from(this.el.querySelectorAll('je-details'));
@@ -41,7 +42,6 @@ const JeAccordion$1 = /*@__PURE__*/ proxyCustomElement(class JeAccordion extends
     render() {
         return h("slot", { key: 'a87df3e9b05966bba67d9aed830a95cb39293ff7' });
     }
-    get el() { return this; }
     static get style() { return jeAccordionCss; }
 }, [1, "je-accordion", undefined, [[0, "expand", "onExpand"], [0, "keydown", "onKeydown"]]]);
 function defineCustomElement$1() {

package/components/je-accordion.js.map

@@ -1 +1 @@
-{"file":"je-accordion.js","mappings":";;AAAA,MAAM,cAAc,GAAG,2CAA2C;;MCQrDA,aAAW,iBAAAC,kBAAA,CAAA,MAAA,WAAA,SAAAC,CAAA,CAAA;;;;;;AAItB,IAAA,QAAQ,CAAC,EAA8B,EAAA;AACrC,QAAA,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE;AACrB,QAAA,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,YAAY,CAAC,CAAC;AACnE,QAAA,QAAQ,CAAC,OAAO,CAAC,OAAO,IAAG;AACzB,YAAA,IAAI,OAAO,KAAK,MAAM,EAAE;AACtB,gBAAA,OAAO,CAAC,IAAI,GAAG,KAAK;;AAExB,SAAC,CAAC;;AAIJ,IAAA,SAAS,CAAC,EAAiB,EAAA;AACzB,QAAA,IAAI,EAAE,CAAC,GAAG,KAAK,WAAW,IAAI,EAAE,CAAC,GAAG,KAAK,SAAS,EAAE;YAClD,EAAE,CAAC,cAAc,EAAE;AACnB,YAAA,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,YAAY,CAAC,CAAC;YACnE,MAAM,KAAK,GAAG,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC,MAA8B,CAAC;AACjE,YAAA,MAAM,SAAS,GAAG,EAAE,CAAC,GAAG,KAAK,WAAW,GAAG,KAAK,GAAG,CAAC,GAAG,KAAK,GAAG,CAAC;YAChE,IAAI,SAAS,IAAI,CAAC,IAAI,SAAS,GAAG,QAAQ,CAAC,MAAM,EAAE;AACjD,gBAAA,QAAQ,CAAC,SAAS,CAAC,CAAC,KAAK,EAAE;;;AAG/B,QAAA,IAAI,EAAE,CAAC,GAAG,KAAK,MAAM,EAAE;YACrB,EAAE,CAAC,cAAc,EAAE;AACnB,YAAA,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,YAAY,CAAC,CAAC;AACnE,YAAA,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE;;AAErB,QAAA,IAAI,EAAE,CAAC,GAAG,KAAK,KAAK,EAAE;YACpB,EAAE,CAAC,cAAc,EAAE;AACnB,YAAA,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,YAAY,CAAC,CAAC;YACnE,QAAQ,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,KAAK,EAAE;;;IAIzC,MAAM,GAAA;QACJ,OAAO,8DAAO;;;;;;;;;;;;;;;;;;;;;;;;;","names":["JeAccordion","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/je-accordion/je-accordion.scss?tag=je-accordion&encapsulation=shadow","src/components/je-accordion/je-accordion.tsx"],"sourcesContent":[":host {\n  display: flex;\n  flex-direction: column;\n}\n","import { Component, Element, Listen, h } from '@stencil/core';\nimport { JeDetailsCustomEvent } from '../../components';\n\n@Component({\n  tag: 'je-accordion',\n  styleUrl: 'je-accordion.scss',\n  shadow: true,\n})\nexport class JeAccordion {\n  @Element() el: HTMLJeAccordionElement;\n\n  @Listen('expand')\n  onExpand(ev: JeDetailsCustomEvent<void>) {\n    const { target } = ev;\n    const sections = Array.from(this.el.querySelectorAll('je-details'));\n    sections.forEach(section => {\n      if (section !== target) {\n        section.open = false;\n      }\n    });\n  }\n\n  @Listen('keydown')\n  onKeydown(ev: KeyboardEvent) {\n    if (ev.key === 'ArrowDown' || ev.key === 'ArrowUp') {\n      ev.preventDefault()\n      const sections = Array.from(this.el.querySelectorAll('je-details'));\n      const index = sections.indexOf(ev.target as HTMLJeDetailsElement);\n      const nextIndex = ev.key === 'ArrowDown' ? index + 1 : index - 1;\n      if (nextIndex >= 0 && nextIndex < sections.length) {\n        sections[nextIndex].focus();\n      }\n    }\n    if (ev.key === 'Home') {\n      ev.preventDefault()\n      const sections = Array.from(this.el.querySelectorAll('je-details'));\n      sections[0].focus();\n    }\n    if (ev.key === 'End') {\n      ev.preventDefault()\n      const sections = Array.from(this.el.querySelectorAll('je-details'));\n      sections[sections.length - 1].focus();\n    }\n  }\n\n  render() {\n    return <slot/>\n  }\n}\n"],"version":3}
+{"file":"je-accordion.js","mappings":";;AAAA,MAAM,cAAc,GAAG,2CAA2C;;MCQrDA,aAAW,iBAAAC,kBAAA,CAAA,MAAA,WAAA,SAAAC,CAAA,CAAA;;;;;;;AAItB,IAAA,QAAQ,CAAC,EAA8B,EAAA;AACrC,QAAA,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE;AACrB,QAAA,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,YAAY,CAAC,CAAC;AACnE,QAAA,QAAQ,CAAC,OAAO,CAAC,OAAO,IAAG;AACzB,YAAA,IAAI,OAAO,KAAK,MAAM,EAAE;AACtB,gBAAA,OAAO,CAAC,IAAI,GAAG,KAAK;;AAExB,SAAC,CAAC;;AAIJ,IAAA,SAAS,CAAC,EAAiB,EAAA;AACzB,QAAA,IAAI,EAAE,CAAC,GAAG,KAAK,WAAW,IAAI,EAAE,CAAC,GAAG,KAAK,SAAS,EAAE;YAClD,EAAE,CAAC,cAAc,EAAE;AACnB,YAAA,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,YAAY,CAAC,CAAC;YACnE,MAAM,KAAK,GAAG,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC,MAA8B,CAAC;AACjE,YAAA,MAAM,SAAS,GAAG,EAAE,CAAC,GAAG,KAAK,WAAW,GAAG,KAAK,GAAG,CAAC,GAAG,KAAK,GAAG,CAAC;YAChE,IAAI,SAAS,IAAI,CAAC,IAAI,SAAS,GAAG,QAAQ,CAAC,MAAM,EAAE;AACjD,gBAAA,QAAQ,CAAC,SAAS,CAAC,CAAC,KAAK,EAAE;;;AAG/B,QAAA,IAAI,EAAE,CAAC,GAAG,KAAK,MAAM,EAAE;YACrB,EAAE,CAAC,cAAc,EAAE;AACnB,YAAA,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,YAAY,CAAC,CAAC;AACnE,YAAA,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE;;AAErB,QAAA,IAAI,EAAE,CAAC,GAAG,KAAK,KAAK,EAAE;YACpB,EAAE,CAAC,cAAc,EAAE;AACnB,YAAA,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,YAAY,CAAC,CAAC;YACnE,QAAQ,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,KAAK,EAAE;;;IAIzC,MAAM,GAAA;QACJ,OAAO,8DAAO;;;;;;;;;;;;;;;;;;;;;;;;","names":["JeAccordion","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/je-accordion/je-accordion.scss?tag=je-accordion&encapsulation=shadow","src/components/je-accordion/je-accordion.tsx"],"sourcesContent":[":host {\n  display: flex;\n  flex-direction: column;\n}\n","import { Component, Element, Listen, h } from '@stencil/core';\nimport { JeDetailsCustomEvent } from '../../components';\n\n@Component({\n  tag: 'je-accordion',\n  styleUrl: 'je-accordion.scss',\n  shadow: true,\n})\nexport class JeAccordion {\n  @Element() el: HTMLJeAccordionElement;\n\n  @Listen('expand')\n  onExpand(ev: JeDetailsCustomEvent<void>) {\n    const { target } = ev;\n    const sections = Array.from(this.el.querySelectorAll('je-details'));\n    sections.forEach(section => {\n      if (section !== target) {\n        section.open = false;\n      }\n    });\n  }\n\n  @Listen('keydown')\n  onKeydown(ev: KeyboardEvent) {\n    if (ev.key === 'ArrowDown' || ev.key === 'ArrowUp') {\n      ev.preventDefault()\n      const sections = Array.from(this.el.querySelectorAll('je-details'));\n      const index = sections.indexOf(ev.target as HTMLJeDetailsElement);\n      const nextIndex = ev.key === 'ArrowDown' ? index + 1 : index - 1;\n      if (nextIndex >= 0 && nextIndex < sections.length) {\n        sections[nextIndex].focus();\n      }\n    }\n    if (ev.key === 'Home') {\n      ev.preventDefault()\n      const sections = Array.from(this.el.querySelectorAll('je-details'));\n      sections[0].focus();\n    }\n    if (ev.key === 'End') {\n      ev.preventDefault()\n      const sections = Array.from(this.el.querySelectorAll('je-details'));\n      sections[sections.length - 1].focus();\n    }\n  }\n\n  render() {\n    return <slot/>\n  }\n}\n"],"version":3}

package/components/je-action-sheet.js

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-CkqNsQSv.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-B9hMQ-5_.js';
 
 const jeActionSheetCss = ":host{display:contents;--padding:var(--je-spacing-lg, 1.25rem);--background:light-dark(rgb(233, 236, 236), rgb(41, 45, 46));--color:light-dark(color-mix(in srgb, var(--je-secondary, #99becb) 20%, black 80%), color-mix(in srgb, var(--je-secondary, #99becb) 10%, white 90%))}[part=inner-container]{display:flex;flex-direction:column;box-sizing:border-box;width:100%;height:100%}.slot-container{flex:1;overflow-y:auto}.drag-handle{display:block;height:4px;width:36px;border-radius:100px;background-color:light-dark(color-mix(in srgb, var(--je-secondary, #99becb) 80%, white 20%), color-mix(in srgb, var(--je-secondary, #99becb) 80%, black 20%))}.drag-container{display:none;justify-content:center;align-items:center;height:32px}@media (any-pointer: coarse){.drag-container{display:flex}}dialog[open]{height:var(--height)}dialog{top:unset;bottom:0;left:0;right:0;width:100%;height:0;max-width:100vw;max-height:100vh;background-color:var(--background);color:var(--color);box-sizing:border-box;border:0;padding:var(--padding);margin:0;padding-bottom:env(safe-area-inset-bottom);overflow-y:hidden;transition:all var(--drag-transition, 300ms) ease-in-out allow-discrete}dialog:focus-visible{outline:0}dialog::backdrop{opacity:0;background-color:var(--je-backdrop-color, rgba(0, 0, 0, 0.5));transition:all 300ms ease-in-out allow-discrete;cursor:pointer}dialog[open]::backdrop{opacity:1}@starting-style{dialog[open]::backdrop {\n    opacity: 0}dialog[open]{height:0}";
 
@@ -9,62 +9,13 @@ const JeActionSheet$1 = /*@__PURE__*/ proxyCustomElement(class JeActionSheet ext
         this.__attachShadow();
         this.present = createEvent(this, "present", 7);
         this.dismiss = createEvent(this, "dismiss", 7);
-        this.startY = 0;
-        this.startHeightPx = 0;
-        this.dragging = false;
-        this.currentHeightPx = 0;
-        /** Opens and closes modal */
-        this.open = false;
-        /** Minimum height (collapsed state). */
-        this.minPercent = 30;
-        /** Intermediate height (mid state). */
-        this.midPercent = 60;
-        /** Maximum height (expanded fullscreen). */
-        this.maxPercent = 90;
-        this.onTransitionEnd = async (event) => {
-            if (event.target === this.dialogEl && event.propertyName === 'opacity') {
-                if (this.open) {
-                    this.dialogEl.style.setProperty('--drag-transition', '50ms');
-                    this.present.emit();
-                }
-                else {
-                    if (this.destroy) {
-                        await this.destroy();
-                    }
-                    this.dismiss.emit({ role: this.role, data: this.data });
-                    this.role = undefined;
-                    this.data = undefined;
-                }
-            }
-        };
-        this.handleTouchStart = (event) => {
-            this.dragging = true;
-            this.startY = event.touches[0].clientY;
-            this.startHeightPx = this.currentHeightPx;
-        };
-        this.handleTouchMove = (event) => {
-            if (!this.dragging)
-                return;
-            const deltaY = this.startY - event.touches[0].clientY;
-            let newHeight = this.startHeightPx + deltaY;
-            if (newHeight < this.minPx)
-                newHeight = this.minPx;
-            if (newHeight > this.maxPx)
-                newHeight = this.maxPx;
-            this.currentHeightPx = newHeight;
-        };
-        this.handleTouchEnd = () => {
-            this.dragging = false;
-            if (this.currentHeightPx < this.midPx) {
-                const midpoint = (this.minPx + this.midPx) / 2;
-                this.currentHeightPx = this.currentHeightPx < midpoint ? this.minPx : this.midPx;
-            }
-            else {
-                const midpoint = (this.midPx + this.maxPx) / 2;
-                this.currentHeightPx = this.currentHeightPx < midpoint ? this.midPx : this.maxPx;
-            }
-        };
     }
+    role;
+    data;
+    dialogEl;
+    startY = 0;
+    startHeightPx = 0;
+    dragging = false;
     get minPx() {
         return window.innerHeight * (this.minPercent / 100);
     }
@@ -74,6 +25,24 @@ const JeActionSheet$1 = /*@__PURE__*/ proxyCustomElement(class JeActionSheet ext
     get maxPx() {
         return window.innerHeight * (this.maxPercent / 100);
     }
+    get el() { return this; }
+    currentHeightPx = 0;
+    /** Opens and closes modal */
+    open = false;
+    /** Optionally execute a promise before presentation begins */
+    init;
+    /** Optionally execute a promise before closing begins */
+    destroy;
+    /** Minimum height (collapsed state). */
+    minPercent = 30;
+    /** Intermediate height (mid state). */
+    midPercent = 60;
+    /** Maximum height (expanded fullscreen). */
+    maxPercent = 90;
+    /** Emits whenever the drawer has opened. Does not emit any data */
+    present;
+    /** Emits whenever the drawer has finished closing. Emits the role and optional data object passed to the hide() method. */
+    dismiss;
     componentWillLoad() {
         this.currentHeightPx = this.minPx;
     }
@@ -105,10 +74,52 @@ const JeActionSheet$1 = /*@__PURE__*/ proxyCustomElement(class JeActionSheet ext
         this.data = data;
         this.open = false;
     }
+    onTransitionEnd = async (event) => {
+        if (event.target === this.dialogEl && event.propertyName === 'opacity') {
+            if (this.open) {
+                this.dialogEl.style.setProperty('--drag-transition', '50ms');
+                this.present.emit();
+            }
+            else {
+                if (this.destroy) {
+                    await this.destroy();
+                }
+                this.dismiss.emit({ role: this.role, data: this.data });
+                this.role = undefined;
+                this.data = undefined;
+            }
+        }
+    };
+    handleTouchStart = (event) => {
+        this.dragging = true;
+        this.startY = event.touches[0].clientY;
+        this.startHeightPx = this.currentHeightPx;
+    };
+    handleTouchMove = (event) => {
+        if (!this.dragging)
+            return;
+        const deltaY = this.startY - event.touches[0].clientY;
+        let newHeight = this.startHeightPx + deltaY;
+        if (newHeight < this.minPx)
+            newHeight = this.minPx;
+        if (newHeight > this.maxPx)
+            newHeight = this.maxPx;
+        this.currentHeightPx = newHeight;
+    };
+    handleTouchEnd = () => {
+        this.dragging = false;
+        if (this.currentHeightPx < this.midPx) {
+            const midpoint = (this.minPx + this.midPx) / 2;
+            this.currentHeightPx = this.currentHeightPx < midpoint ? this.minPx : this.midPx;
+        }
+        else {
+            const midpoint = (this.midPx + this.maxPx) / 2;
+            this.currentHeightPx = this.currentHeightPx < midpoint ? this.midPx : this.maxPx;
+        }
+    };
     render() {
         return (h(Host, { key: 'a4f1b0112ee2ba6378faf7820633e4b9cbf623e0' }, h("style", { key: '82dea79e5e8801e453a40120cdd2c8b878b0c665' }, this.open ? `:host{--height:${this.currentHeightPx}px;}` : ''), h("slot", { key: 'e500e1c6b098e9ac98c5347873212c833261a9c5', name: "trigger" }), h("dialog", { key: 'c1a762048317d44d42a489c0b6b2d2f2387a7a6d', ref: el => (this.dialogEl = el), part: "dialog", onTransitionEnd: this.onTransitionEnd }, h("div", { key: 'e7bc88a56899805be5348d0411caac076a557ee1', part: "inner-container", onClick: e => e.stopPropagation() }, h("div", { key: '96c7b2a1147b3c5990f6194ba4191ce68979512b', class: "drag-container", onTouchStart: this.handleTouchStart, onTouchMove: this.handleTouchMove, onTouchEnd: this.handleTouchEnd }, h("div", { key: 'd8bbee956457002c2fbcdb74ca696a94be0e1fa4', class: "drag-handle" })), h("div", { key: '9e00125909c85485cb447365cd8c77539c175a93', class: "slot-container" }, h("slot", { key: '5a218bc95057a9cdc07d36ce7086e61d28c1aa04' }))))));
     }
-    get el() { return this; }
     static get watchers() { return {
         "open": ["onOpenChange"]
     }; }

package/components/je-action-sheet.js.map

@@ -1 +1 @@
-{"file":"je-action-sheet.js","mappings":"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","names":["JeActionSheet","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/je-action-sheet/je-action-sheet.scss?tag=je-action-sheet&encapsulation=shadow","src/components/je-action-sheet/je-action-sheet.tsx"],"sourcesContent":["@use '../../styles/styles' as *;\n\n:host {\n  display: contents;\n\n  --padding: #{spacing-get(lg)};\n  --background: light-dark(rgb(233, 236, 236), rgb(41, 45, 46));\n  --color: light-dark(#{secondary(900)}, #{secondary(50)});\n}\n\n[part=inner-container] {\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  width: 100%;\n  height: 100%;\n}\n\n.slot-container {\n  flex: 1;\n  overflow-y: auto;\n}\n\n.drag-handle {\n  display: block;\n  height: 4px;\n  width: 36px;\n  border-radius: 100px;\n  background-color: light-dark(secondary(400), secondary(600));\n}\n\n.drag-container {\n  display: none;\n  justify-content: center;\n  align-items: center;\n  height: 32px;\n  @media (any-pointer: coarse) {\n    display: flex;\n  }\n}\n\ndialog[open] {\n  height: var(--height);\n}\n\ndialog {\n  top: unset;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  width: 100%;\n  height: 0;\n  max-width: 100vw;\n  max-height: 100vh;\n  background-color: var(--background);\n  color: var(--color);\n  box-sizing: border-box;\n  border: 0;\n  padding: var(--padding);\n  margin: 0;\n  padding-bottom: env(safe-area-inset-bottom);\n  overflow-y: hidden;\n  transition: all var(--drag-transition, 300ms) ease-in-out allow-discrete;\n  &:focus-visible {\n    outline: 0;\n  }\n}\n\ndialog::backdrop {\n  opacity: 0;\n  background-color: backdrop-color();\n  transition: all 300ms ease-in-out allow-discrete;\n  cursor: pointer;\n}\n\ndialog[open]::backdrop {\n  opacity: 1;\n}\n\n@starting-style {\n  dialog[open]::backdrop {\n    opacity: 0;\n  }\n\n  dialog[open] {\n    height: 0;\n  }\n}\n","import { Component, h, Element, EventEmitter, Host, Listen, Method, Prop, Watch, Event, State } from '@stencil/core';\nimport { OverlayData } from '../../utils/utils';\n\n@Component({\n  tag: 'je-action-sheet',\n  styleUrl: 'je-action-sheet.scss',\n  shadow: true\n})\nexport class JeActionSheet {\n  private role?: string;\n  private data?: any;\n  private dialogEl!: HTMLDialogElement;\n  private startY = 0;\n  private startHeightPx = 0;\n  private dragging = false;\n  private get minPx() {\n    return window.innerHeight * (this.minPercent / 100);\n  }\n  private get midPx() {\n    return window.innerHeight * (this.midPercent / 100);\n  }\n  private get maxPx() {\n    return window.innerHeight * (this.maxPercent / 100);\n  }\n  @Element() el!: HTMLElement;\n\n  @State() currentHeightPx = 0;\n\n  /** Opens and closes modal */\n  @Prop({ mutable: true }) open = false;\n\n  /** Optionally execute a promise before presentation begins */\n  @Prop() init?: () => void | Promise<void>;\n\n  /** Optionally execute a promise before closing begins */\n  @Prop() destroy?: () => void | Promise<void>;\n\n  /** Minimum height (collapsed state). */\n  @Prop() minPercent = 30;\n\n  /** Intermediate height (mid state). */\n  @Prop() midPercent = 60;\n\n  /** Maximum height (expanded fullscreen). */\n  @Prop() maxPercent = 90;\n\n  /** Emits whenever the drawer has opened. Does not emit any data */\n  @Event() present: EventEmitter;\n\n  /** Emits whenever the drawer has finished closing. Emits the role and optional data object passed to the hide() method. */\n  @Event() dismiss: EventEmitter<OverlayData>;\n\n  componentWillLoad() {\n    this.currentHeightPx = this.minPx;\n  }\n\n  @Watch('open')\n  async onOpenChange(open: boolean) {\n    if (open) {\n      if (this.init) {\n        await this.init();\n      }\n      this.dialogEl.showModal();\n    } else {\n      this.dialogEl.style.removeProperty('--drag-transition');\n      this.dialogEl.close();\n    }\n  }\n\n  @Listen('click')\n  onClick(event: MouseEvent) {\n    if (event.composedPath().includes(this.dialogEl)) {\n      this.hide('backdropDismiss');\n    } else if (event.target === this.el.querySelector(':scope > [slot=trigger]')) {\n      this.show();\n    }\n  }\n\n  @Method()\n  async show() {\n    this.open = true;\n  }\n\n  @Method()\n  async hide(role = 'manualClose', data?: any) {\n    this.role = role;\n    this.data = data;\n    this.open = false;\n  }\n\n  private onTransitionEnd = async (event: TransitionEvent) => {\n    if (event.target === this.dialogEl && event.propertyName === 'opacity') {\n      if (this.open) {\n        this.dialogEl.style.setProperty('--drag-transition', '50ms');\n        this.present.emit();\n      } else {\n        if (this.destroy) {\n          await this.destroy();\n        }\n        this.dismiss.emit({ role: this.role, data: this.data });\n        this.role = undefined;\n        this.data = undefined;\n      }\n    }\n  };\n\n  private handleTouchStart = (event: TouchEvent) => {\n    this.dragging = true;\n    this.startY = event.touches[0].clientY;\n    this.startHeightPx = this.currentHeightPx;\n  };\n\n  private handleTouchMove = (event: TouchEvent) => {\n    if (!this.dragging) return;\n    const deltaY = this.startY - event.touches[0].clientY;\n    let newHeight = this.startHeightPx + deltaY;\n    if (newHeight < this.minPx) newHeight = this.minPx;\n    if (newHeight > this.maxPx) newHeight = this.maxPx;\n    this.currentHeightPx = newHeight;\n  };\n\n  private handleTouchEnd = () => {\n    this.dragging = false;\n    if (this.currentHeightPx < this.midPx) {\n      const midpoint = (this.minPx + this.midPx) / 2;\n      this.currentHeightPx = this.currentHeightPx < midpoint ? this.minPx : this.midPx;\n    } else {\n      const midpoint = (this.midPx + this.maxPx) / 2;\n      this.currentHeightPx = this.currentHeightPx < midpoint ? this.midPx : this.maxPx;\n    }\n  };\n\n  render() {\n    return (\n      <Host>\n        <style>{this.open ? `:host{--height:${this.currentHeightPx}px;}` : ''}</style>\n        <slot name=\"trigger\" />\n        <dialog ref={el => (this.dialogEl = el)} part=\"dialog\" onTransitionEnd={this.onTransitionEnd}>\n          <div part=\"inner-container\" onClick={e => e.stopPropagation()}>\n            <div class=\"drag-container\" onTouchStart={this.handleTouchStart} onTouchMove={this.handleTouchMove} onTouchEnd={this.handleTouchEnd}>\n              <div class=\"drag-handle\"></div>\n            </div>\n            <div class=\"slot-container\">\n              <slot />\n            </div>\n          </div>\n        </dialog>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"je-action-sheet.js","mappings":"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","names":["JeActionSheet","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/je-action-sheet/je-action-sheet.scss?tag=je-action-sheet&encapsulation=shadow","src/components/je-action-sheet/je-action-sheet.tsx"],"sourcesContent":["@use '../../styles/styles' as *;\n\n:host {\n  display: contents;\n\n  --padding: #{spacing-get(lg)};\n  --background: light-dark(rgb(233, 236, 236), rgb(41, 45, 46));\n  --color: light-dark(#{secondary(900)}, #{secondary(50)});\n}\n\n[part=inner-container] {\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  width: 100%;\n  height: 100%;\n}\n\n.slot-container {\n  flex: 1;\n  overflow-y: auto;\n}\n\n.drag-handle {\n  display: block;\n  height: 4px;\n  width: 36px;\n  border-radius: 100px;\n  background-color: light-dark(secondary(400), secondary(600));\n}\n\n.drag-container {\n  display: none;\n  justify-content: center;\n  align-items: center;\n  height: 32px;\n  @media (any-pointer: coarse) {\n    display: flex;\n  }\n}\n\ndialog[open] {\n  height: var(--height);\n}\n\ndialog {\n  top: unset;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  width: 100%;\n  height: 0;\n  max-width: 100vw;\n  max-height: 100vh;\n  background-color: var(--background);\n  color: var(--color);\n  box-sizing: border-box;\n  border: 0;\n  padding: var(--padding);\n  margin: 0;\n  padding-bottom: env(safe-area-inset-bottom);\n  overflow-y: hidden;\n  transition: all var(--drag-transition, 300ms) ease-in-out allow-discrete;\n  &:focus-visible {\n    outline: 0;\n  }\n}\n\ndialog::backdrop {\n  opacity: 0;\n  background-color: backdrop-color();\n  transition: all 300ms ease-in-out allow-discrete;\n  cursor: pointer;\n}\n\ndialog[open]::backdrop {\n  opacity: 1;\n}\n\n@starting-style {\n  dialog[open]::backdrop {\n    opacity: 0;\n  }\n\n  dialog[open] {\n    height: 0;\n  }\n}\n","import { Component, h, Element, EventEmitter, Host, Listen, Method, Prop, Watch, Event, State } from '@stencil/core';\nimport { OverlayData } from '../../utils/utils';\n\n@Component({\n  tag: 'je-action-sheet',\n  styleUrl: 'je-action-sheet.scss',\n  shadow: true\n})\nexport class JeActionSheet {\n  private role?: string;\n  private data?: any;\n  private dialogEl!: HTMLDialogElement;\n  private startY = 0;\n  private startHeightPx = 0;\n  private dragging = false;\n  private get minPx() {\n    return window.innerHeight * (this.minPercent / 100);\n  }\n  private get midPx() {\n    return window.innerHeight * (this.midPercent / 100);\n  }\n  private get maxPx() {\n    return window.innerHeight * (this.maxPercent / 100);\n  }\n  @Element() el!: HTMLElement;\n\n  @State() currentHeightPx = 0;\n\n  /** Opens and closes modal */\n  @Prop({ mutable: true }) open = false;\n\n  /** Optionally execute a promise before presentation begins */\n  @Prop() init?: () => void | Promise<void>;\n\n  /** Optionally execute a promise before closing begins */\n  @Prop() destroy?: () => void | Promise<void>;\n\n  /** Minimum height (collapsed state). */\n  @Prop() minPercent = 30;\n\n  /** Intermediate height (mid state). */\n  @Prop() midPercent = 60;\n\n  /** Maximum height (expanded fullscreen). */\n  @Prop() maxPercent = 90;\n\n  /** Emits whenever the drawer has opened. Does not emit any data */\n  @Event() present: EventEmitter;\n\n  /** Emits whenever the drawer has finished closing. Emits the role and optional data object passed to the hide() method. */\n  @Event() dismiss: EventEmitter<OverlayData>;\n\n  componentWillLoad() {\n    this.currentHeightPx = this.minPx;\n  }\n\n  @Watch('open')\n  async onOpenChange(open: boolean) {\n    if (open) {\n      if (this.init) {\n        await this.init();\n      }\n      this.dialogEl.showModal();\n    } else {\n      this.dialogEl.style.removeProperty('--drag-transition');\n      this.dialogEl.close();\n    }\n  }\n\n  @Listen('click')\n  onClick(event: MouseEvent) {\n    if (event.composedPath().includes(this.dialogEl)) {\n      this.hide('backdropDismiss');\n    } else if (event.target === this.el.querySelector(':scope > [slot=trigger]')) {\n      this.show();\n    }\n  }\n\n  @Method()\n  async show() {\n    this.open = true;\n  }\n\n  @Method()\n  async hide(role = 'manualClose', data?: any) {\n    this.role = role;\n    this.data = data;\n    this.open = false;\n  }\n\n  private onTransitionEnd = async (event: TransitionEvent) => {\n    if (event.target === this.dialogEl && event.propertyName === 'opacity') {\n      if (this.open) {\n        this.dialogEl.style.setProperty('--drag-transition', '50ms');\n        this.present.emit();\n      } else {\n        if (this.destroy) {\n          await this.destroy();\n        }\n        this.dismiss.emit({ role: this.role, data: this.data });\n        this.role = undefined;\n        this.data = undefined;\n      }\n    }\n  };\n\n  private handleTouchStart = (event: TouchEvent) => {\n    this.dragging = true;\n    this.startY = event.touches[0].clientY;\n    this.startHeightPx = this.currentHeightPx;\n  };\n\n  private handleTouchMove = (event: TouchEvent) => {\n    if (!this.dragging) return;\n    const deltaY = this.startY - event.touches[0].clientY;\n    let newHeight = this.startHeightPx + deltaY;\n    if (newHeight < this.minPx) newHeight = this.minPx;\n    if (newHeight > this.maxPx) newHeight = this.maxPx;\n    this.currentHeightPx = newHeight;\n  };\n\n  private handleTouchEnd = () => {\n    this.dragging = false;\n    if (this.currentHeightPx < this.midPx) {\n      const midpoint = (this.minPx + this.midPx) / 2;\n      this.currentHeightPx = this.currentHeightPx < midpoint ? this.minPx : this.midPx;\n    } else {\n      const midpoint = (this.midPx + this.maxPx) / 2;\n      this.currentHeightPx = this.currentHeightPx < midpoint ? this.midPx : this.maxPx;\n    }\n  };\n\n  render() {\n    return (\n      <Host>\n        <style>{this.open ? `:host{--height:${this.currentHeightPx}px;}` : ''}</style>\n        <slot name=\"trigger\" />\n        <dialog ref={el => (this.dialogEl = el)} part=\"dialog\" onTransitionEnd={this.onTransitionEnd}>\n          <div part=\"inner-container\" onClick={e => e.stopPropagation()}>\n            <div class=\"drag-container\" onTouchStart={this.handleTouchStart} onTouchMove={this.handleTouchMove} onTouchEnd={this.handleTouchEnd}>\n              <div class=\"drag-handle\"></div>\n            </div>\n            <div class=\"slot-container\">\n              <slot />\n            </div>\n          </div>\n        </dialog>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/je-alert.js

@@ -1,8 +1,8 @@
-import { p as proxyCustomElement, H, c as createEvent, f as forceUpdate, h, F as Fragment, d as Host } from './p-CkqNsQSv.js';
-import { d as defineCustomElement$5 } from './p-BDmPyJO1.js';
-import { d as defineCustomElement$4 } from './p-Du6zwiZx.js';
-import { d as defineCustomElement$3 } from './p-BRu0Me00.js';
-import { d as defineCustomElement$2 } from './p-DuqkEHHK.js';
+import { p as proxyCustomElement, H, c as createEvent, f as forceUpdate, h, F as Fragment, d as Host } from './p-B9hMQ-5_.js';
+import { d as defineCustomElement$5 } from './p-DBXRHG3B.js';
+import { d as defineCustomElement$4 } from './p-CYxPgSzV.js';
+import { d as defineCustomElement$3 } from './p-CIx3m8pA.js';
+import { d as defineCustomElement$2 } from './p-BakUX5So.js';
 
 const jeAlertCss = ":host{display:none;overflow:hidden;position:relative;box-shadow:var(--box-shadow);border:var(--border);border-radius:var(--je-radius-md, 0.375rem);box-sizing:border-box;background-color:var(--background);color:var(--color);padding:var(--je-spacing-md, 1rem);grid-template-columns:auto 1fr auto;grid-auto-rows:auto;align-items:center;column-gap:var(--je-spacing-sm, 0.75rem);row-gap:var(--je-spacing-2xs, 0.25rem);--background:light-dark(rgb(233, 236, 236), rgb(41, 45, 46));--color:light-dark(color-mix(in srgb, var(--je-secondary, #99becb) 40%, black 60%), color-mix(in srgb, var(--je-secondary, #99becb) 60%, white 40%));--box-shadow:0px 4px 16px 0px light-dark(rgba(0, 0, 0, 0.12), rgba(68, 68, 68, 0.12));--border:solid 1px light-dark(rgb(197, 200, 204), rgb(86, 87, 90))}:host([color=primary]){--accent:light-dark(var(--je-primary, #4141e8), color-mix(in srgb, var(--je-primary, #4141e8) 40%, white 60%))}:host([color=secondary]){--accent:light-dark(color-mix(in srgb, var(--je-secondary, #99becb) 80%, black 20%), var(--je-secondary, #99becb))}:host([color=warning]){--accent:var(--je-warning, #fbbf24)}:host([color=danger]){--accent:light-dark(color-mix(in srgb, var(--je-danger, #ae1818) 80%, white 20%), color-mix(in srgb, var(--je-danger, #ae1818) 60%, white 40%))}:host([color=success]){--accent:color-mix(in srgb, var(--je-success, #22c55e) 80%, black 20%)}:host(.visible){display:grid}:host(.open){animation:fadeIn 600ms forwards}:host(:not(.open)){animation:fadeOut 600ms forwards}@keyframes fadeIn{from{opacity:0;transform:scale(0%)}to{opacity:1;transform:scale(100%)}}@keyframes fadeOut{from{opacity:1;transform:scale(100%)}to{opacity:0;transform:scale(0%)}}[part=header]{font-weight:bold;display:block;box-sizing:border-box;font-size:var(--je-font-lg, 1.25rem);line-height:1}[part=message]{line-height:1}je-icon{display:block;color:var(--accent)}.border{position:absolute;top:0;left:0;background-color:var(--accent);width:100%;height:var(--je-spacing-xs, 0.5rem)}.progress{position:absolute;bottom:0;left:0;width:100%;background-color:var(--accent);height:var(--je-spacing-2xs, 0.25rem);animation:shorten linear forwards;animation-play-state:paused}.progress.running{animation-play-state:running}.progress:not(.visible){opacity:0}@keyframes shorten{from{width:100%}to{width:0}}slot[name=buttons]{display:flex;align-items:center;gap:var(--je-spacing-sm, 0.75rem)}";
 
@@ -13,13 +13,21 @@ const JeAlert$1 = /*@__PURE__*/ proxyCustomElement(class JeAlert extends H {
         this.__attachShadow();
         this.present = createEvent(this, "present", 7);
         this.dismiss = createEvent(this, "dismiss", 7);
-        this.paused = true;
-        this.closable = false;
-        this.color = 'primary';
-        this.duration = 0;
-        this.progress = false;
-        this.open = false;
     }
+    role;
+    data;
+    paused = true;
+    get el() { return this; }
+    icon;
+    header;
+    message;
+    closable = false;
+    color = 'primary';
+    duration = 0;
+    progress = false;
+    open = false;
+    present;
+    dismiss;
     componentWillRender() {
         if (this.open) {
             this.el.classList.add('visible');
@@ -39,12 +47,11 @@ const JeAlert$1 = /*@__PURE__*/ proxyCustomElement(class JeAlert extends H {
         });
     }
     onAnimationEnd(e) {
-        var _a;
         if (e.animationName == 'fadeOut' && e.target == this.el) {
             this.el.classList.remove('visible');
             this.paused = true;
             this.dismiss.emit({
-                role: (_a = this.role) !== null && _a !== void 0 ? _a : 'manualDismiss',
+                role: this.role ?? 'manualDismiss',
                 data: this.data
             });
             this.role = undefined;
@@ -72,7 +79,6 @@ const JeAlert$1 = /*@__PURE__*/ proxyCustomElement(class JeAlert extends H {
         const hasButtons = !!this.el.querySelector('[slot="buttons"]');
         return (h(Host, { key: 'b52fe6332a8c0cdb18fe976514da12bfc7f1177f', class: { open: this.open } }, h("div", { key: '980b1dbeba35cafcef151c12df98c3c7ceafbfc3', class: "border" }), h("div", { key: '0107a4518153069e504ec9b9cd937ffd4a7dd1d3', class: "cell top-left" }, this.icon && h("je-icon", { key: '34e593b5bf5494188efa7d1c0e9e4d91050c8ef3', fill: true }, this.icon), h("slot", { key: '20f10bd67f54052a09fe9416eea4eb01de63bde2', name: "start" })), h("div", { key: 'e691e82ebeef7f770c299dab1efaabae04100d2a', class: "cell top-middle" }, hasHeader ? (h("slot", { name: 'header' }, this.header && h("span", { part: "header" }, this.header))) : (h("slot", { name: "message" }, this.message && h("span", { part: "message" }, this.message)))), h("div", { key: 'a4826a4369605399ddf75c02322cc796063184c0', class: "cell top-right" }, h("slot", { key: '2be8fa278127c314647980697a9374ae8e55850b', name: "end" }), this.closable && h("je-icon-button", { key: 'b73a511b7734b0849a7e7652ba5fceb4ebd62063', icon: 'close', onClick: () => this.hide('userDismiss') })), hasHeader && hasMessage && (h(Fragment, { key: '3b6b10e884782d5634617a9a40a472b9749a0c3d' }, h("div", { key: '30b6a576fea25310fe560f68b540b0e470df4f6f', class: "cell middle-left" }), h("div", { key: '591877c8ab4b62e651ca8fc2ff55c787ff78e4b5', class: "cell middle-middle" }, h("slot", { key: '9cca457371bdbdc735cff40651ce05c9715c8637', name: "message" }, this.message && h("span", { key: 'ae0e03caa467e4a6e167ea0145cddb04e102640b', part: "message" }, this.message))), h("div", { key: 'e32e769e78e77b60b2f4f88251cc1c214dff9230', class: "cell middle-right" }))), hasButtons && (h(Fragment, { key: '19bee8fe7ab54c0631f8d263f01532c2b6569da1' }, h("div", { key: 'cc46e4eb28706612d5eb9aa296b76e82c824e57f', class: "cell bottom-left" }), h("div", { key: '74bdb7c05832b781343fafa6baa3d1e0ca120742', class: "cell bottom-middle" }, h("slot", { key: 'a4c37b18c623cfaf897f8490f32acf8881f3d94e', name: "buttons" })), h("div", { key: '0110cb76f08d514a0701703b22bb8242ad39d6b9', class: "cell bottom-right" }))), this.duration > 0 && (h("div", { key: 'f2e3234004a42e437935d1e3f8c8fd001e604fb3', onAnimationEnd: () => this.hide('autoDismiss'), class: { progress: true, running: this.open && !this.paused, visible: this.progress }, style: { animationDuration: `${this.duration}ms` } }))));
     }
-    get el() { return this; }
     static get style() { return jeAlertCss; }
 }, [1, "je-alert", {
         "icon": [1],

package/components/je-alert.js.map

@@ -1 +1 @@
-{"file":"je-alert.js","mappings":"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","names":["JeAlert","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/je-alert/je-alert.scss?tag=je-alert&encapsulation=shadow","src/components/je-alert/je-alert.tsx"],"sourcesContent":["@use '../../styles/styles' as *;\n\n:host {\n  display: none;\n  overflow: hidden;\n  position: relative;\n  box-shadow: var(--box-shadow);\n  border: var(--border);\n  border-radius: radius-get(md);\n  box-sizing: border-box;\n  background-color: var(--background);\n  color: var(--color);\n  padding: spacing-get(md);\n  grid-template-columns: auto 1fr auto;\n  grid-auto-rows: auto;\n  align-items: center;\n  column-gap: spacing-get(sm);\n  row-gap: spacing-get(2xs);\n\n  --background: light-dark(rgb(233, 236, 236), rgb(41, 45, 46));\n  --color: light-dark(#{secondary(800)}, #{secondary(300)});\n  --box-shadow: 0px 4px 16px 0px light-dark(rgba(0, 0, 0, 0.12), rgba(68, 68, 68, 0.12));\n  --border: solid 1px light-dark(rgb(197, 200, 204), rgb(86, 87, 90));\n}\n\n:host([color=primary]) {\n  --accent: light-dark(#{primary()}, #{primary(200)});\n}\n\n:host([color=secondary]) {\n  --accent: light-dark(#{secondary(600)}, #{secondary()});\n}\n\n:host([color=warning]) {\n  --accent: #{warning()};\n}\n\n:host([color=danger]) {\n  --accent: light-dark(#{danger(400)}, #{danger(300)});\n}\n\n:host([color=success]) {\n  --accent: #{success(600)};\n}\n\n:host(.visible) {\n  display: grid;\n}\n\n:host(.open) {\n  animation: fadeIn 600ms forwards;\n}\n\n:host(:not(.open)) {\n  animation: fadeOut 600ms forwards;\n}\n\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n    transform: scale(0%);\n  }\n  to {\n    opacity: 1;\n    transform: scale(100%);\n  }\n}\n\n@keyframes fadeOut {\n  from {\n    opacity: 1;\n    transform: scale(100%);\n  }\n  to {\n    opacity: 0;\n    transform: scale(0%);\n  }\n}\n\n[part=header] {\n  font-weight: bold;\n  display: block;\n  box-sizing: border-box;\n  font-size: font-size(lg);\n  line-height: 1;\n}\n\n[part=message] {\n  line-height: 1;\n}\n\nje-icon {\n  display: block;\n  color: var(--accent);\n}\n\n.border {\n  position: absolute;\n  top: 0;\n  left: 0;\n  background-color: var(--accent);\n  width: 100%;\n  height: spacing-get(xs);\n}\n\n.progress {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  background-color: var(--accent);\n  height: spacing-get(2xs);\n  animation: shorten linear forwards;\n  animation-play-state: paused;\n  &.running {\n    animation-play-state: running;\n  }\n  &:not(.visible) {\n    opacity: 0;\n  }\n}\n\n@keyframes shorten {\n  from {\n    width: 100%;\n  }\n  to {\n    width: 0;\n  }\n}\n\nslot[name=buttons] {\n  display: flex;\n  align-items: center;\n  gap: spacing-get(sm);\n}\n","import { Component, Listen, Prop, h, Element, Host, State, Event, EventEmitter, Method, forceUpdate, Fragment } from '@stencil/core';\nimport { Color, OverlayData } from '../../utils/utils';\n\n@Component({\n  tag: 'je-alert',\n  styleUrl: 'je-alert.scss',\n  shadow: true,\n})\nexport class JeAlert {\n  private role?: string;\n  private data?: any;\n  @State() paused = true;\n  @Element() el!: HTMLJeAlertElement;\n  @Prop() icon?: string;\n  @Prop() header?: string;\n  @Prop() message?: string;\n  @Prop() closable = false;\n  @Prop({reflect:true}) color: Color = 'primary';\n  @Prop() duration = 0;\n  @Prop() progress = false;\n  @Prop({ mutable: true }) open = false;\n  @Event() present: EventEmitter;\n  @Event() dismiss: EventEmitter<OverlayData>;\n\n  componentWillRender() {\n    if (this.open) {\n      this.el.classList.add('visible');\n    }\n  }\n\n  @Method()\n  async show() {\n    this.open = true;\n  }\n\n  @Method()\n  async hide(role?: string, data?: any) {\n    this.role = role;\n    this.data = data;\n    this.open = false;\n  }\n\n  @Method()\n  didDismiss() {\n    return new Promise<OverlayData>(resolve => {\n      this.el.addEventListener('dismiss', e => resolve(e.detail), { once: true });\n    });\n  }\n\n  @Listen('animationend')\n  onAnimationEnd(e: AnimationEvent) {\n    if (e.animationName == 'fadeOut' && e.target == this.el) {\n      this.el.classList.remove('visible');\n      this.paused = true;\n      this.dismiss.emit({\n        role: this.role ?? 'manualDismiss',\n        data: this.data\n      });\n      this.role = undefined;\n      this.data = undefined;\n    }\n    if (e.animationName == 'fadeIn' && e.target == this.el) {\n      this.paused = false;\n      this.present.emit();\n    }\n  }\n\n  @Listen('mouseenter')\n  onMouseEnter() {\n    if (this.open)\n      this.paused = true;\n  }\n\n  @Listen('mouseleave')\n  onMouseLeave() {\n    if (this.open)\n      this.paused = false;\n  }\n\n  @Listen('slotchange')\n  onSlotChange() {\n    forceUpdate(this.el)\n  }\n\n  render() {\n    const hasHeader = !!this.header || !!this.el.querySelector('[slot=\"header\"]')\n    const hasMessage = !!this.message || !!this.el.querySelector('[slot=\"message\"]')\n    const hasButtons = !!this.el.querySelector('[slot=\"buttons\"]')\n    return (\n      <Host class={{ open: this.open }}>\n        <div class=\"border\"></div>\n\n        <div class=\"cell top-left\">\n          {this.icon && <je-icon fill>{this.icon}</je-icon>}\n          <slot name=\"start\"/>\n        </div>\n        <div class=\"cell top-middle\">\n          {hasHeader ? (\n            <slot name='header'>{this.header && <span part=\"header\">{this.header}</span>}</slot>\n          ) : (\n            <slot name=\"message\">{this.message && <span part=\"message\">{this.message}</span>}</slot>\n          )}\n        </div>\n        <div class=\"cell top-right\">\n          <slot name=\"end\"/>\n          {this.closable && <je-icon-button icon='close' onClick={() => this.hide('userDismiss')}/>}\n        </div>\n\n        {hasHeader && hasMessage && (\n          <Fragment>\n            <div class=\"cell middle-left\"></div>\n            <div class=\"cell middle-middle\">\n              <slot name=\"message\">{this.message && <span part=\"message\">{this.message}</span>}</slot>\n            </div>\n            <div class=\"cell middle-right\"></div>\n          </Fragment>\n        )}\n\n        {hasButtons && (\n          <Fragment>\n            <div class=\"cell bottom-left\"></div>\n            <div class=\"cell bottom-middle\">\n              <slot name=\"buttons\"></slot>\n            </div>\n            <div class=\"cell bottom-right\"></div>\n          </Fragment>\n        )}\n\n        {this.duration > 0 && (\n          <div\n            onAnimationEnd={() => this.hide('autoDismiss')}\n            class={{ progress: true, running: this.open && !this.paused, visible: this.progress }}\n            style={{ animationDuration: `${this.duration}ms` }}\n          ></div>\n        )}\n      </Host>\n    )\n  }\n}\n"],"version":3}
+{"file":"je-alert.js","mappings":"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","names":["JeAlert","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/je-alert/je-alert.scss?tag=je-alert&encapsulation=shadow","src/components/je-alert/je-alert.tsx"],"sourcesContent":["@use '../../styles/styles' as *;\n\n:host {\n  display: none;\n  overflow: hidden;\n  position: relative;\n  box-shadow: var(--box-shadow);\n  border: var(--border);\n  border-radius: radius-get(md);\n  box-sizing: border-box;\n  background-color: var(--background);\n  color: var(--color);\n  padding: spacing-get(md);\n  grid-template-columns: auto 1fr auto;\n  grid-auto-rows: auto;\n  align-items: center;\n  column-gap: spacing-get(sm);\n  row-gap: spacing-get(2xs);\n\n  --background: light-dark(rgb(233, 236, 236), rgb(41, 45, 46));\n  --color: light-dark(#{secondary(800)}, #{secondary(300)});\n  --box-shadow: 0px 4px 16px 0px light-dark(rgba(0, 0, 0, 0.12), rgba(68, 68, 68, 0.12));\n  --border: solid 1px light-dark(rgb(197, 200, 204), rgb(86, 87, 90));\n}\n\n:host([color=primary]) {\n  --accent: light-dark(#{primary()}, #{primary(200)});\n}\n\n:host([color=secondary]) {\n  --accent: light-dark(#{secondary(600)}, #{secondary()});\n}\n\n:host([color=warning]) {\n  --accent: #{warning()};\n}\n\n:host([color=danger]) {\n  --accent: light-dark(#{danger(400)}, #{danger(300)});\n}\n\n:host([color=success]) {\n  --accent: #{success(600)};\n}\n\n:host(.visible) {\n  display: grid;\n}\n\n:host(.open) {\n  animation: fadeIn 600ms forwards;\n}\n\n:host(:not(.open)) {\n  animation: fadeOut 600ms forwards;\n}\n\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n    transform: scale(0%);\n  }\n  to {\n    opacity: 1;\n    transform: scale(100%);\n  }\n}\n\n@keyframes fadeOut {\n  from {\n    opacity: 1;\n    transform: scale(100%);\n  }\n  to {\n    opacity: 0;\n    transform: scale(0%);\n  }\n}\n\n[part=header] {\n  font-weight: bold;\n  display: block;\n  box-sizing: border-box;\n  font-size: font-size(lg);\n  line-height: 1;\n}\n\n[part=message] {\n  line-height: 1;\n}\n\nje-icon {\n  display: block;\n  color: var(--accent);\n}\n\n.border {\n  position: absolute;\n  top: 0;\n  left: 0;\n  background-color: var(--accent);\n  width: 100%;\n  height: spacing-get(xs);\n}\n\n.progress {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  background-color: var(--accent);\n  height: spacing-get(2xs);\n  animation: shorten linear forwards;\n  animation-play-state: paused;\n  &.running {\n    animation-play-state: running;\n  }\n  &:not(.visible) {\n    opacity: 0;\n  }\n}\n\n@keyframes shorten {\n  from {\n    width: 100%;\n  }\n  to {\n    width: 0;\n  }\n}\n\nslot[name=buttons] {\n  display: flex;\n  align-items: center;\n  gap: spacing-get(sm);\n}\n","import { Component, Listen, Prop, h, Element, Host, State, Event, EventEmitter, Method, forceUpdate, Fragment } from '@stencil/core';\nimport { Color, OverlayData } from '../../utils/utils';\n\n@Component({\n  tag: 'je-alert',\n  styleUrl: 'je-alert.scss',\n  shadow: true,\n})\nexport class JeAlert {\n  private role?: string;\n  private data?: any;\n  @State() paused = true;\n  @Element() el!: HTMLJeAlertElement;\n  @Prop() icon?: string;\n  @Prop() header?: string;\n  @Prop() message?: string;\n  @Prop() closable = false;\n  @Prop({reflect:true}) color: Color = 'primary';\n  @Prop() duration = 0;\n  @Prop() progress = false;\n  @Prop({ mutable: true }) open = false;\n  @Event() present: EventEmitter;\n  @Event() dismiss: EventEmitter<OverlayData>;\n\n  componentWillRender() {\n    if (this.open) {\n      this.el.classList.add('visible');\n    }\n  }\n\n  @Method()\n  async show() {\n    this.open = true;\n  }\n\n  @Method()\n  async hide(role?: string, data?: any) {\n    this.role = role;\n    this.data = data;\n    this.open = false;\n  }\n\n  @Method()\n  didDismiss() {\n    return new Promise<OverlayData>(resolve => {\n      this.el.addEventListener('dismiss', e => resolve(e.detail), { once: true });\n    });\n  }\n\n  @Listen('animationend')\n  onAnimationEnd(e: AnimationEvent) {\n    if (e.animationName == 'fadeOut' && e.target == this.el) {\n      this.el.classList.remove('visible');\n      this.paused = true;\n      this.dismiss.emit({\n        role: this.role ?? 'manualDismiss',\n        data: this.data\n      });\n      this.role = undefined;\n      this.data = undefined;\n    }\n    if (e.animationName == 'fadeIn' && e.target == this.el) {\n      this.paused = false;\n      this.present.emit();\n    }\n  }\n\n  @Listen('mouseenter')\n  onMouseEnter() {\n    if (this.open)\n      this.paused = true;\n  }\n\n  @Listen('mouseleave')\n  onMouseLeave() {\n    if (this.open)\n      this.paused = false;\n  }\n\n  @Listen('slotchange')\n  onSlotChange() {\n    forceUpdate(this.el)\n  }\n\n  render() {\n    const hasHeader = !!this.header || !!this.el.querySelector('[slot=\"header\"]')\n    const hasMessage = !!this.message || !!this.el.querySelector('[slot=\"message\"]')\n    const hasButtons = !!this.el.querySelector('[slot=\"buttons\"]')\n    return (\n      <Host class={{ open: this.open }}>\n        <div class=\"border\"></div>\n\n        <div class=\"cell top-left\">\n          {this.icon && <je-icon fill>{this.icon}</je-icon>}\n          <slot name=\"start\"/>\n        </div>\n        <div class=\"cell top-middle\">\n          {hasHeader ? (\n            <slot name='header'>{this.header && <span part=\"header\">{this.header}</span>}</slot>\n          ) : (\n            <slot name=\"message\">{this.message && <span part=\"message\">{this.message}</span>}</slot>\n          )}\n        </div>\n        <div class=\"cell top-right\">\n          <slot name=\"end\"/>\n          {this.closable && <je-icon-button icon='close' onClick={() => this.hide('userDismiss')}/>}\n        </div>\n\n        {hasHeader && hasMessage && (\n          <Fragment>\n            <div class=\"cell middle-left\"></div>\n            <div class=\"cell middle-middle\">\n              <slot name=\"message\">{this.message && <span part=\"message\">{this.message}</span>}</slot>\n            </div>\n            <div class=\"cell middle-right\"></div>\n          </Fragment>\n        )}\n\n        {hasButtons && (\n          <Fragment>\n            <div class=\"cell bottom-left\"></div>\n            <div class=\"cell bottom-middle\">\n              <slot name=\"buttons\"></slot>\n            </div>\n            <div class=\"cell bottom-right\"></div>\n          </Fragment>\n        )}\n\n        {this.duration > 0 && (\n          <div\n            onAnimationEnd={() => this.hide('autoDismiss')}\n            class={{ progress: true, running: this.open && !this.paused, visible: this.progress }}\n            style={{ animationDuration: `${this.duration}ms` }}\n          ></div>\n        )}\n      </Host>\n    )\n  }\n}\n"],"version":3}

package/components/je-branch.js

@@ -1,5 +1,5 @@
-import { p as proxyCustomElement, H, h, f as forceUpdate, d as Host } from './p-CkqNsQSv.js';
-import { d as defineCustomElement$2 } from './p-Du6zwiZx.js';
+import { p as proxyCustomElement, H, h, f as forceUpdate, d as Host } from './p-B9hMQ-5_.js';
+import { d as defineCustomElement$2 } from './p-CYxPgSzV.js';
 
 const jeBranchCss = ":host{display:contents;position:relative;--selected-background:light-dark(color-mix(in srgb, var(--je-primary, #4141e8) 10%, white 90%), color-mix(in srgb, var(--je-secondary, #99becb) 30%, black 70%));--selected-color:light-dark(var(--je-primary, #4141e8), var(--je-secondary, #99becb));--indentation-color:light-dark(color-mix(in srgb, var(--je-secondary, #99becb) 80%, white 20%), color-mix(in srgb, var(--je-secondary, #99becb) 40%, black 60%))}.icon-placeholder{width:20px;height:24px}.level{width:var(--je-spacing-lg, 1.25rem);height:var(--je-spacing-lg, 1.25rem)}button{cursor:pointer;display:flex;align-items:center;box-sizing:border-box;border-radius:var(--je-radius-md, 0.375rem);overflow:hidden;background-color:transparent;color:inherit;width:100%;font-family:inherit;font-size:var(--je-font-md, 1rem);font-weight:var(--je-font-regular, 500);margin:0;padding-block:var(--je-spacing-2xs, 0.25rem);padding-inline:0;border:0;user-select:none;-webkit-user-select:none;z-index:1;transition:all 75ms ease-in-out;outline-offset:-6px;outline-color:var(--je-primary-400)}button:hover,button.selected:not(.multiple){background-color:var(--selected-background)}button.selected:not(.multiple){color:var(--selected-color)}[part=inner-branch-container]{overflow:hidden}[part=branch-container]{position:relative;box-sizing:border-box;display:grid;grid-template-rows:0fr;opacity:0;transition:all 250ms ease-out}[part=branch-container].indentation::before{left:calc(var(--level) * var(--je-spacing-lg, 1.25rem));transform:translate(10px);display:block;content:\"\";position:absolute;background-color:var(--indentation-color);opacity:0;width:1px;transition:opacity 250ms ease-in-out;z-index:2}[part=branch-container].open{opacity:1;grid-template-rows:1fr}[part=branch-container].open.indentation::before{opacity:1;height:100%}je-icon{color:light-dark(color-mix(in srgb, var(--je-secondary, #99becb) 40%, black 60%), color-mix(in srgb, var(--je-secondary, #99becb) 40%, white 60%));transition:rotate 250ms ease}je-icon.open{rotate:90deg}.multi-icon{color:var(--selected-color)}";
 
@@ -8,23 +8,27 @@ const JeBranch$1 = /*@__PURE__*/ proxyCustomElement(class JeBranch extends H {
         super();
         this.__registerHost();
         this.__attachShadow();
-        this.hasChildren = false;
-        this.indentation = false;
-        this.open = false;
-        this.selected = false;
-        this.handleIconClick = (ev) => {
-            if (this.selection != 'leaf') {
-                ev.stopPropagation();
-                this.open = !this.open;
-            }
-        };
     }
+    hasChildren = false;
+    get element() { return this; }
+    selection;
+    indentation = false;
+    open = false;
+    value;
+    label;
+    selected = false;
     componentWillRender() {
         this.hasChildren = this.element.querySelector('je-branch') !== null;
     }
     async isLeaf() {
         return !this.hasChildren;
     }
+    handleIconClick = (ev) => {
+        if (this.selection != 'leaf') {
+            ev.stopPropagation();
+            this.open = !this.open;
+        }
+    };
     getLevel(el, level = 0) {
         const parent = el.parentElement;
         if (this.selection && parent.tagName == 'JE-BRANCH') {
@@ -37,7 +41,6 @@ const JeBranch$1 = /*@__PURE__*/ proxyCustomElement(class JeBranch extends H {
         return (h(Host, { key: '1463931fda384e44539706be94456bbf97698c29' }, h("style", { key: '0befcf440dbe184e2f00dd549982de30a32a462b' }, `:host{--level:${levels.length};`), h("button", { key: 'bb29f8dbe60b6c5e8ee8158cd45a283a2e23dfa1', tabindex: 0, class: { selected: this.selected, [this.selection]: true } }, levels.map(() => h("div", { class: 'level' })), this.hasChildren ? (h("je-icon", { size: 'sm', class: { open: this.open, toggle: true }, onClickCapture: this.handleIconClick }, "chevron_right")) : (h("div", { class: 'icon-placeholder' })), this.selection === 'multiple' && (h("je-icon", { key: 'ab604b2eb4af1e8f143952b55dfe80847ca423c1', size: 'sm', weight: 300, fill: true, class: 'multi-icon' }, this.selected === true ? 'check_box' : this.selected === false ? 'check_box_outline_blank' : 'indeterminate_check_box')), h("slot", { key: '88f5ef34b945fa035043bcbe040e85d5b83a0c6d', name: "label" }, this.label && h("span", { key: '84b6c7c59127437685b751d78e59321423450b3c' }, this.label))), h("div", { key: 'f6f6ccb6faf50276a897efd1eb2ca9459a67d6d8', class: { open: this.open, indentation: this.indentation }, part: "branch-container" }, h("div", { key: '04bad053e2f13e158bea36315ca41b570287eb04', part: 'inner-branch-container' }, h("slot", { key: '34448fb3a9bba79765d3713588291e9177282fbb', onSlotchange: () => forceUpdate(this.element) })))));
     }
     static get delegatesFocus() { return true; }
-    get element() { return this; }
     static get style() { return jeBranchCss; }
 }, [17, "je-branch", {
         "selection": [1],

package/components/je-branch.js.map

@@ -1 +1 @@
-{"file":"je-branch.js","mappings":"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","names":["JeBranch","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/je-branch/je-branch.scss?tag=je-branch&encapsulation=shadow","src/components/je-branch/je-branch.tsx"],"sourcesContent":["@use '../../styles/styles' as *;\n\n:host {\n  display: contents;\n  position: relative;\n\n  --selected-background: light-dark(#{primary(50)}, #{secondary(850)});\n  --selected-color: light-dark(#{primary(500)}, #{secondary(500)});\n  --indentation-color: light-dark(#{secondary(400)}, #{secondary(800)});\n}\n\n.icon-placeholder {\n  width: 20px;\n  height: 24px;\n}\n\n.level {\n  width: spacing-get(lg);\n  height: spacing-get(lg);\n}\n\nbutton {\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  border-radius: radius-get(md);\n  overflow: hidden;\n  background-color: transparent;\n  color: inherit;\n  width: 100%;\n  font-family: inherit;\n  font-size: font-size(md);\n  font-weight: font-weight(regular);\n  margin: 0;\n  padding-block: spacing-get(2xs);\n  padding-inline: 0;\n  border: 0;\n  user-select: none;\n  -webkit-user-select: none;\n  z-index: 1;\n  transition: all 75ms ease-in-out;\n  outline-offset: -6px;\n  outline-color: var(--je-primary-400);\n\n  &:hover,\n  &.selected:not(.multiple) {\n    background-color: var(--selected-background);\n  }\n\n  &.selected:not(.multiple) {\n    color: var(--selected-color);\n  }\n}\n\n[part=inner-branch-container] {\n  overflow: hidden;\n}\n\n[part=branch-container] {\n  position: relative;\n  box-sizing: border-box;\n  display: grid;\n  grid-template-rows: 0fr;\n  opacity: 0;\n  transition: all 250ms ease-out;\n\n  &.indentation::before {\n    left: calc(var(--level) * spacing-get(lg));\n    transform: translate(10px);\n    display: block;\n    content: \"\";\n    position: absolute;\n    background-color: var(--indentation-color);\n    opacity: 0;\n    width: 1px;\n    transition: opacity 250ms ease-in-out;\n    z-index: 2;\n  }\n\n  &.open {\n    opacity: 1;\n    grid-template-rows: 1fr;\n\n    &.indentation::before {\n      opacity: 1;\n      height: 100%;\n    }\n  }\n}\n\nje-icon {\n  color: light-dark(secondary(800), secondary(200));\n  transition: rotate 250ms ease;\n  &.open {\n    rotate: 90deg;\n  }\n}\n\n.multi-icon {\n  color: var(--selected-color);\n}\n","import { Component, Element, Host, Method, Prop, forceUpdate, h } from '@stencil/core';\n\n@Component({\n  tag: 'je-branch',\n  styleUrl: 'je-branch.scss',\n  shadow: {\n    delegatesFocus: true\n  }\n})\nexport class JeBranch {\n  private hasChildren = false;\n  @Element() element: HTMLJeBranchElement;\n  @Prop() selection?: 'single' | 'multiple' | 'leaf';\n  @Prop() indentation = false;\n  @Prop({ mutable: true }) open = false;\n  @Prop() value?: string;\n  @Prop() label?: string;\n  @Prop() selected: boolean | null = false;\n\n  componentWillRender() {\n    this.hasChildren = this.element.querySelector('je-branch') !== null;\n  }\n\n  @Method()\n  async isLeaf() {\n    return !this.hasChildren;\n  }\n\n  private handleIconClick = (ev: MouseEvent) => {\n    if (this.selection != 'leaf') {\n      ev.stopPropagation();\n      this.open = !this.open;\n    }\n  };\n\n  private getLevel(el: HTMLElement, level = 0) {\n    const parent = el.parentElement;\n    if (this.selection && parent.tagName == 'JE-BRANCH') {\n      return this.getLevel(parent, level + 1);\n    }\n    return level;\n  }\n\n  render() {\n    const levels = new Array(this.getLevel(this.element)).fill(0)\n    return (\n      <Host>\n        <style>{`:host{--level:${levels.length};`}</style>\n        <button tabindex={0} class={{ selected: this.selected, [this.selection]: true }}>\n          {levels.map(() => <div class='level'></div>)}\n          {this.hasChildren ? (\n            <je-icon size='sm' class={{ open: this.open, toggle: true }} onClickCapture={this.handleIconClick}>chevron_right</je-icon>\n          ) : (\n            <div class='icon-placeholder'></div>\n          )}\n          {this.selection === 'multiple' && (\n            <je-icon size='sm' weight={300} fill class='multi-icon'>{this.selected === true ? 'check_box' : this.selected === false ? 'check_box_outline_blank' : 'indeterminate_check_box'}</je-icon>\n          )}\n          <slot name=\"label\">{this.label && <span>{this.label}</span>}</slot>\n        </button>\n        <div class={{ open: this.open, indentation: this.indentation }} part=\"branch-container\">\n          <div part='inner-branch-container'>\n            <slot onSlotchange={() => forceUpdate(this.element)} />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"je-branch.js","mappings":";;;AAAA,MAAM,WAAW,GAAG,whEAAwhE;;MCS/hEA,UAAQ,iBAAAC,kBAAA,CAAA,MAAA,QAAA,SAAAC,CAAA,CAAA;;;;;;IACX,WAAW,GAAG,KAAK;;AAEnB,IAAA,SAAS;IACT,WAAW,GAAG,KAAK;IACF,IAAI,GAAG,KAAK;AAC7B,IAAA,KAAK;AACL,IAAA,KAAK;IACL,QAAQ,GAAmB,KAAK;IAExC,mBAAmB,GAAA;AACjB,QAAA,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,WAAW,CAAC,KAAK,IAAI;;AAIrE,IAAA,MAAM,MAAM,GAAA;AACV,QAAA,OAAO,CAAC,IAAI,CAAC,WAAW;;AAGlB,IAAA,eAAe,GAAG,CAAC,EAAc,KAAI;AAC3C,QAAA,IAAI,IAAI,CAAC,SAAS,IAAI,MAAM,EAAE;YAC5B,EAAE,CAAC,eAAe,EAAE;AACpB,YAAA,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI;;AAE1B,KAAC;AAEO,IAAA,QAAQ,CAAC,EAAe,EAAE,KAAK,GAAG,CAAC,EAAA;AACzC,QAAA,MAAM,MAAM,GAAG,EAAE,CAAC,aAAa;QAC/B,IAAI,IAAI,CAAC,SAAS,IAAI,MAAM,CAAC,OAAO,IAAI,WAAW,EAAE;YACnD,OAAO,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,KAAK,GAAG,CAAC,CAAC;;AAEzC,QAAA,OAAO,KAAK;;IAGd,MAAM,GAAA;AACJ,QAAA,MAAM,MAAM,GAAG,IAAI,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;AAC7D,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAQ,CAAiB,cAAA,EAAA,MAAM,CAAC,MAAM,CAAA,CAAA,CAAG,CAAS,EAClD,CAAQ,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,QAAQ,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,IAAI,CAAC,SAAS,GAAG,IAAI,EAAE,EAAA,EAC5E,MAAM,CAAC,GAAG,CAAC,MAAM,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,OAAO,EAAA,CAAO,CAAC,EAC3C,IAAI,CAAC,WAAW,IACf,eAAS,IAAI,EAAC,IAAI,EAAC,KAAK,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,EAAE,cAAc,EAAE,IAAI,CAAC,eAAe,EAAA,EAAA,eAAA,CAAyB,KAE1H,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,kBAAkB,GAAO,CACrC,EACA,IAAI,CAAC,SAAS,KAAK,UAAU,KAC5B,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,IAAI,EAAC,IAAI,EAAC,MAAM,EAAE,GAAG,EAAE,IAAI,QAAC,KAAK,EAAC,YAAY,EAAA,EAAE,IAAI,CAAC,QAAQ,KAAK,IAAI,GAAG,WAAW,GAAG,IAAI,CAAC,QAAQ,KAAK,KAAK,GAAG,yBAAyB,GAAG,yBAAyB,CAAW,CAC3L,EACD,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,OAAO,EAAA,EAAE,IAAI,CAAC,KAAK,IAAI,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAO,IAAI,CAAC,KAAK,CAAQ,CAAQ,CAC5D,EACT,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,WAAW,EAAE,IAAI,CAAC,WAAW,EAAE,EAAE,IAAI,EAAC,kBAAkB,EAAA,EACrF,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,wBAAwB,EAAA,EAChC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,YAAY,EAAE,MAAM,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,EAAI,CAAA,CACnD,CACF,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["JeBranch","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/je-branch/je-branch.scss?tag=je-branch&encapsulation=shadow","src/components/je-branch/je-branch.tsx"],"sourcesContent":["@use '../../styles/styles' as *;\n\n:host {\n  display: contents;\n  position: relative;\n\n  --selected-background: light-dark(#{primary(50)}, #{secondary(850)});\n  --selected-color: light-dark(#{primary(500)}, #{secondary(500)});\n  --indentation-color: light-dark(#{secondary(400)}, #{secondary(800)});\n}\n\n.icon-placeholder {\n  width: 20px;\n  height: 24px;\n}\n\n.level {\n  width: spacing-get(lg);\n  height: spacing-get(lg);\n}\n\nbutton {\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  border-radius: radius-get(md);\n  overflow: hidden;\n  background-color: transparent;\n  color: inherit;\n  width: 100%;\n  font-family: inherit;\n  font-size: font-size(md);\n  font-weight: font-weight(regular);\n  margin: 0;\n  padding-block: spacing-get(2xs);\n  padding-inline: 0;\n  border: 0;\n  user-select: none;\n  -webkit-user-select: none;\n  z-index: 1;\n  transition: all 75ms ease-in-out;\n  outline-offset: -6px;\n  outline-color: var(--je-primary-400);\n\n  &:hover,\n  &.selected:not(.multiple) {\n    background-color: var(--selected-background);\n  }\n\n  &.selected:not(.multiple) {\n    color: var(--selected-color);\n  }\n}\n\n[part=inner-branch-container] {\n  overflow: hidden;\n}\n\n[part=branch-container] {\n  position: relative;\n  box-sizing: border-box;\n  display: grid;\n  grid-template-rows: 0fr;\n  opacity: 0;\n  transition: all 250ms ease-out;\n\n  &.indentation::before {\n    left: calc(var(--level) * spacing-get(lg));\n    transform: translate(10px);\n    display: block;\n    content: \"\";\n    position: absolute;\n    background-color: var(--indentation-color);\n    opacity: 0;\n    width: 1px;\n    transition: opacity 250ms ease-in-out;\n    z-index: 2;\n  }\n\n  &.open {\n    opacity: 1;\n    grid-template-rows: 1fr;\n\n    &.indentation::before {\n      opacity: 1;\n      height: 100%;\n    }\n  }\n}\n\nje-icon {\n  color: light-dark(secondary(800), secondary(200));\n  transition: rotate 250ms ease;\n  &.open {\n    rotate: 90deg;\n  }\n}\n\n.multi-icon {\n  color: var(--selected-color);\n}\n","import { Component, Element, Host, Method, Prop, forceUpdate, h } from '@stencil/core';\n\n@Component({\n  tag: 'je-branch',\n  styleUrl: 'je-branch.scss',\n  shadow: {\n    delegatesFocus: true\n  }\n})\nexport class JeBranch {\n  private hasChildren = false;\n  @Element() element: HTMLJeBranchElement;\n  @Prop() selection?: 'single' | 'multiple' | 'leaf';\n  @Prop() indentation = false;\n  @Prop({ mutable: true }) open = false;\n  @Prop() value?: string;\n  @Prop() label?: string;\n  @Prop() selected: boolean | null = false;\n\n  componentWillRender() {\n    this.hasChildren = this.element.querySelector('je-branch') !== null;\n  }\n\n  @Method()\n  async isLeaf() {\n    return !this.hasChildren;\n  }\n\n  private handleIconClick = (ev: MouseEvent) => {\n    if (this.selection != 'leaf') {\n      ev.stopPropagation();\n      this.open = !this.open;\n    }\n  };\n\n  private getLevel(el: HTMLElement, level = 0) {\n    const parent = el.parentElement;\n    if (this.selection && parent.tagName == 'JE-BRANCH') {\n      return this.getLevel(parent, level + 1);\n    }\n    return level;\n  }\n\n  render() {\n    const levels = new Array(this.getLevel(this.element)).fill(0)\n    return (\n      <Host>\n        <style>{`:host{--level:${levels.length};`}</style>\n        <button tabindex={0} class={{ selected: this.selected, [this.selection]: true }}>\n          {levels.map(() => <div class='level'></div>)}\n          {this.hasChildren ? (\n            <je-icon size='sm' class={{ open: this.open, toggle: true }} onClickCapture={this.handleIconClick}>chevron_right</je-icon>\n          ) : (\n            <div class='icon-placeholder'></div>\n          )}\n          {this.selection === 'multiple' && (\n            <je-icon size='sm' weight={300} fill class='multi-icon'>{this.selected === true ? 'check_box' : this.selected === false ? 'check_box_outline_blank' : 'indeterminate_check_box'}</je-icon>\n          )}\n          <slot name=\"label\">{this.label && <span>{this.label}</span>}</slot>\n        </button>\n        <div class={{ open: this.open, indentation: this.indentation }} part=\"branch-container\">\n          <div part='inner-branch-container'>\n            <slot onSlotchange={() => forceUpdate(this.element)} />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/je-breadcrumb.js

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h } from './p-CkqNsQSv.js';
+import { p as proxyCustomElement, H, h } from './p-B9hMQ-5_.js';
 
 const jeBreadcrumbCss = ":host,a{display:none}:host(.visible){display:contents}:host(.visible) a{display:flex;align-items:center;cursor:pointer}a:any-link{color:inherit;text-decoration-line:none}";
 

package/components/je-breadcrumbs.js

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, c as createEvent, h } from './p-CkqNsQSv.js';
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-B9hMQ-5_.js';
 
 const jeBreadcrumbsCss = ":host{display:contents}nav{display:flex;align-items:center;color:light-dark(color-mix(in srgb, var(--je-secondary, #99becb) 80%, black 20%), color-mix(in srgb, var(--je-secondary, #99becb) 80%, white 20%));font-weight:var(--je-font-semi-bold, 600);font-size:var(--je-font-sm, 0.875rem);line-height:var(--je-spacing-lg, 1.25rem)}::slotted(je-breadcrumb:last-child){color:light-dark(color-mix(in srgb, var(--je-primary, #4141e8) 60%, black 40%), color-mix(in srgb, var(--je-primary, #4141e8) 40%, white 60%))}::slotted(:not(:last-child))::after{content:\"pen_size_1\";display:inline-flex;transform:rotate(-15deg);cursor:inherit;font-family:\"Material Symbols Rounded\";font-weight:normal;font-style:normal;font-size:var(--je-font-lg, 1.25rem);line-height:unset;letter-spacing:normal;text-transform:none;user-select:none;-webkit-user-select:none;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;font-variation-settings:\"FILL\" 0, \"wght\" 400, \"GRAD\" 0, \"opsz\" 20;color:light-dark(color-mix(in srgb, var(--je-secondary, #99becb) 60%, white 40%), color-mix(in srgb, var(--je-secondary, #99becb) 60%, black 40%))}::slotted(button.collapse){background-color:transparent;color:inherit;cursor:pointer;font-family:\"Material Symbols Rounded\";font-weight:normal;font-style:normal;font-size:var(--je-font-lg, 1.25rem);line-height:unset;letter-spacing:normal;text-transform:none;user-select:none;-webkit-user-select:none;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;font-variation-settings:\"FILL\" 0, \"wght\" 400, \"GRAD\" 0, \"opsz\" 20;border:none;margin:0;padding:0}";
 
@@ -8,13 +8,15 @@ const JeBreadcrumbs$1 = /*@__PURE__*/ proxyCustomElement(class JeBreadcrumbs ext
         this.__registerHost();
         this.__attachShadow();
         this.expandClick = createEvent(this, "expandClick", 7);
-        this.itemsBeforeCollapse = 1;
-        this.itemsAfterCollapse = 1;
     }
+    get host() { return this; }
+    itemsBeforeCollapse = 1;
+    itemsAfterCollapse = 1;
+    maxItems;
+    expandClick;
     componentWillRender() {
-        var _a;
         const crumbs = Array.from(this.host.querySelectorAll('je-breadcrumb'));
-        (_a = this.host.querySelector('.collapse')) === null || _a === void 0 ? void 0 : _a.remove();
+        this.host.querySelector('.collapse')?.remove();
         if (this.maxItems && crumbs.length > this.maxItems) {
             crumbs.forEach((crumb, index) => {
                 const shouldShow = index < this.itemsBeforeCollapse || index >= crumbs.length - this.itemsAfterCollapse;
@@ -49,7 +51,6 @@ const JeBreadcrumbs$1 = /*@__PURE__*/ proxyCustomElement(class JeBreadcrumbs ext
     render() {
         return (h("nav", { key: 'ce202de9e2e3b38a72c0743ad7b449d5fd362250' }, h("slot", { key: '17faf516993cbef92d8eb53d2451431305729788' })));
     }
-    get host() { return this; }
     static get style() { return jeBreadcrumbsCss; }
 }, [1, "je-breadcrumbs", {
         "itemsBeforeCollapse": [2, "items-before-collapse"],