@zanichelli/albe-web-components 19.2.3-RC1 → 19.2.3

package/dist/components/z-card.js.map

@@ -0,0 +1 @@
+{"file":"z-card.js","mappings":";;;;AAAA,MAAM,SAAS,GAAG,myIAAmyI,CAAC;AACtzI,oBAAe,SAAS;;MCwBXA,OAAK;;;;;;;0BAeH,KAAK;yBAON,KAAK;;;IAOjB,iBAAiB;QACf,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;KACzE;;;;;IAMO,oBAAoB;QAC1B,OAAO;YACL,WAAK,KAAK,EAAC,iBAAiB,IAC1B,WAAK,KAAK,EAAC,aAAa,IACtB,WAAK,KAAK,EAAC,eAAe,IACxB,YAAM,IAAI,EAAC,UAAU,GAAQ,EAC7B,YAAM,IAAI,EAAC,OAAO,GAAQ,CACtB,CACF,CACF;YACN,WAAK,KAAK,EAAC,SAAS,IAClB,YAAM,IAAI,EAAC,MAAM,GAAQ,EACzB,WAAK,KAAK,EAAC,SAAS,IAClB,YAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,CACF;SACP,CAAC;KACH;;;;IAKO,aAAa;QACnB,QACE,WAAK,KAAK,EAAC,SAAS,IAClB,YAAM,IAAI,EAAC,UAAU,GAAQ,EAC7B,YAAM,IAAI,EAAC,OAAO,GAAQ,EAC1B,YAAM,IAAI,EAAC,MAAM,GAAQ,EACzB,WAAK,KAAK,EAAC,SAAS,IAClB,YAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,CACF,EACN;KACH;IAED,MAAM;QACJ,IAAI,IAAI,CAAC,OAAO,KAAK,WAAW,CAAC,IAAI,EAAE;YACrC,OAAO,EAAC,IAAI,QAAE,IAAI,CAAC,aAAa,EAAE,CAAQ,CAAC;SAC5C;QAED,IAAI,IAAI,CAAC,OAAO,KAAK,WAAW,CAAC,OAAO,IAAI,IAAI,CAAC,aAAa,EAAE;YAC9D,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAC,iBAAiB,IACzB,IAAI,CAAC,aAAa,IAAI;gBACrB,YAAM,IAAI,EAAC,OAAO,GAAQ;gBAC1B,IAAI,CAAC,OAAO,KAAK,WAAW,CAAC,OAAO,IAAI,IAAI,CAAC,SAAS,IAAI,cAAQ,IAAI,EAAE,IAAI,CAAC,SAAS,GAAW;aAClG,EACA,CAAC,IAAI,CAAC,aAAa,IAAI,WAAK,KAAK,EAAC,aAAa,GAAO,CACnD,EACL,IAAI,CAAC,aAAa,EAAE,CAChB,EACP;SACH;QAED,OAAO,EAAC,IAAI,QAAE,IAAI,CAAC,oBAAoB,EAAE,CAAQ,CAAC;KACnD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["ZCard"],"sources":["src/components/z-card/styles.css?tag=z-card&encapsulation=shadow","src/components/z-card/index.tsx"],"sourcesContent":[":host {\n  --aspect-ratio: 1.62;\n  --z-card--border-color: var(--gray200);\n  --z-card--color-cover-background: var(--color-surface01);\n  --z-card--text-background: var(--color-surface01);\n  --z-card--text-border-radius: none;\n  --z-card--text-border: none;\n  --z-card--text-padding: calc(var(--space-unit) * 2) var(--space-unit);\n\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n*,\n::slotted(*) {\n  box-sizing: border-box;\n}\n\n*:focus:focus-visible {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\n:host(:not([variant=\"overlay\"])) .cover-container {\n  position: relative;\n  width: 100%;\n}\n\n/* Old good trick with percentage padding to keep the aspect ratio.\nUnfortunately the `aspect-ratio` property is still experimental */\n.cover-container {\n  padding-bottom: calc(100% / var(--aspect-ratio));\n}\n\n::slotted([slot=\"cover\"]),\n.color-cover {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  object-position: center;\n}\n\n.cover-container > z-icon {\n  --z-icon-width: calc(var(--space-unit) * 11);\n  --z-icon-height: var(--z-icon-width);\n\n  position: absolute;\n  top: calc(50% - calc(var(--z-icon-height) / 2));\n  left: calc(50% - calc(var(--z-icon-width) / 2));\n  fill: var(--color-primary01);\n}\n\n.color-cover {\n  background-color: var(--z-card--color-cover-background);\n}\n\n.content {\n  display: flex;\n  flex-direction: column;\n  padding-top: var(--space-unit);\n}\n\n.color-cover .cover-content {\n  display: flex;\n  height: 100%;\n  flex-direction: column;\n  justify-content: flex-end;\n  padding: var(--space-unit);\n}\n\n/* Truncates overflowing text */\n::slotted([slot=\"metadata\"]),\n::slotted([slot=\"title\"]),\n::slotted([slot=\"text\"]) {\n  display: -webkit-box;\n  overflow: hidden;\n  -webkit-box-orient: vertical;\n}\n\n::slotted([slot=\"title\"]:not(:last-child)),\n::slotted([slot=\"text\"]:not(:last-child)) {\n  margin-bottom: var(--space-unit);\n}\n\n::slotted([slot=\"title\"])::before {\n  position: absolute;\n  z-index: 1;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  content: \"\";\n}\n\n::slotted([slot=\"metadata\"]) {\n  width: 100%;\n  -webkit-line-clamp: 1;\n  line-clamp: 1;\n  text-transform: uppercase;\n}\n\n::slotted([slot=\"metadata\"]:not(:last-child)) {\n  margin: 0 0 calc(var(--space-unit) * 0.25);\n}\n\n::slotted([slot=\"title\"]) {\n  margin: 0;\n  font-size: var(--font-size-3);\n  font-weight: var(--font-sb);\n  -webkit-line-clamp: 2;\n  line-clamp: 2;\n  text-decoration: none;\n}\n\n::slotted([slot=\"title\"]:focus:focus-visible) {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\n::slotted([slot=\"text\"]) {\n  width: 100%;\n  margin: 0;\n  -webkit-line-clamp: 3;\n  line-clamp: 3;\n}\n\n.actions {\n  display: flex;\n  align-items: center;\n}\n\n:host(:not([variant=\"overlay\"])) .actions {\n  margin-top: auto;\n}\n\n::slotted([slot=\"action\"]) {\n  position: relative;\n  z-index: 2;\n}\n\n::slotted([slot=\"action\"]:not(:last-child)) {\n  margin-right: calc(var(--space-unit) * 2);\n}\n\n::slotted([slot=\"action\"]:focus:focus-visible) {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none !important;\n}\n\n:host([clickable]) ::slotted([slot=\"title\"]:focus:focus-visible) {\n  box-shadow: none !important;\n  outline: none !important;\n}\n\n:host([clickable]) ::slotted([slot=\"title\"]:focus:focus-visible)::before {\n  box-shadow: var(--shadow-focus-primary);\n}\n\n:host([variant=\"text\"]) {\n  border: var(--z-card--text-border);\n  background-color: var(--z-card--text-background);\n  border-radius: var(--z-card--text-border-radius);\n}\n\n:host([variant=\"text\"]) [slot=\"text\"]::before {\n  border-radius: var(--z-card--text-border-radius);\n}\n\n:host([show-shadow]) > .content,\n:host([variant=\"border\"]) > .content,\n:host([variant=\"shadow\"]) > .content {\n  height: 100%;\n  padding: var(--space-unit) var(--space-unit) calc(var(--space-unit) * 2);\n}\n\n:host([variant=\"text\"]) > .content {\n  padding: var(--z-card--text-padding);\n}\n\n/* Border */\n:host([variant=\"border\"]) {\n  border: var(--border-size-small) solid var(--z-card--border-color);\n}\n\n:host([variant=\"border\"][clickable]:hover) > .content {\n  background: var(--color-background);\n}\n\n:host([variant=\"border\"][clickable]:focus:focus-visible) {\n  box-shadow: var(--shadow-focus-primary);\n}\n\n:host([variant=\"border\"][clickable]:active) {\n  border-color: transparent;\n}\n\n/* Shadow */\n:host([variant=\"shadow\"]),\n:host([show-shadow]) {\n  box-shadow: var(--shadow-2);\n}\n\n:host([variant=\"shadow\"][clickable]:hover),\n:host([clickable][show-shadow]:hover) {\n  box-shadow: var(--shadow-4);\n}\n\n:host([variant=\"shadow\"][clickable]:focus:focus-visible),\n:host([clickable][show-shadow]:focus:focus-visible) {\n  box-shadow: var(--shadow-focus-primary);\n}\n\n:host([variant=\"shadow\"][clickable]:active),\n:host([clickable][show-shadow]:active) {\n  box-shadow: none;\n}\n\n/* Overlay */\n:host([variant=\"overlay\"]) .content {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  justify-content: flex-end;\n  padding: var(--space-unit);\n  background-image: linear-gradient(to top, rgb(0 0 0 / 100%), rgb(0 0 0 / 0%));\n  color: var(--color-text-inverse);\n  fill: var(--color-text-inverse);\n}\n","import {Component, Element, Host, Prop, State, h} from \"@stencil/core\";\nimport {CardVariant} from \"../../beans\";\n\n/**\n * ZCard component.\n * The width of the card must be set by its container, following the grid indications of the design.\n *\n * @cssprop --aspect-ratio - Cover aspect ratio. Default: `1.62`\n * @cssprop --z-card--border-color - Default: `var(--gray200)`\n * @cssprop --z-card--color-cover-background - Cover color. Default: `var(--color-surface01)`\n * @cssprop --z-card--text-background - Background color for the `text` variant. Default: `var(--color-surface01)`\n * @cssprop --z-card--text-border-radius - Default: `none`\n * @cssprop --z-card--text-border - Configure CSS `border`. Default: `none`\n * @cssprop --z-card--text-padding - Configure CSS `padding`. Default: `none`\n * @slot cover - Image cover\n * @slot metadata - Metadata\n * @slot title - Using an `<a>` tag here will make the whole card clickable as if the link was wrapping it.\n * @slot text\n * @slot action - Interactive elements to place at the bottom of the card. To put non-interactive elements here when using an `<a>` tag in the `title` slot, and use this as a sort of \"footer\", set `z-index: 0` on each of those elements.\n */\n@Component({\n  tag: \"z-card\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZCard {\n  /**\n   * Card variant.\n   * Can be one of \"text\", \"border\", \"shadow\", \"overlay\".\n   * Leave it undefined for the default card.\n   */\n  @Prop({reflect: true})\n  variant: CardVariant;\n\n  /** Name of the icon to place over the image cover */\n  @Prop()\n  coverIcon: string;\n\n  /** Enable shadow. Default: false. */\n  @Prop({reflect: true})\n  showShadow = false;\n\n  /**\n   * Enable \"clickable\" styles like hover background and cursor, focus shadow on the whole card, etc.\n   * Always set this to `true` when putting an `<a>` tag in the `title` slot.\n   */\n  @Prop({reflect: true})\n  clickable = false;\n\n  @Element() host: HTMLZCardElement;\n\n  @State()\n  hasCoverImage: boolean;\n\n  componentWillLoad(): void {\n    this.hasCoverImage = this.host.querySelector('[slot=\"cover\"]') !== null;\n  }\n\n  /**\n   * Template for a card without image cover.\n   * A colored background replaces the image and some data is moved over it.\n   */\n  private renderColorCoverCard(): HTMLDivElement[] {\n    return [\n      <div class=\"cover-container\">\n        <div class=\"color-cover\">\n          <div class=\"cover-content\">\n            <slot name=\"metadata\"></slot>\n            <slot name=\"title\"></slot>\n          </div>\n        </div>\n      </div>,\n      <div class=\"content\">\n        <slot name=\"text\"></slot>\n        <div class=\"actions\">\n          <slot name=\"action\"></slot>\n        </div>\n      </div>,\n    ];\n  }\n\n  /**\n   * Template for the content.\n   */\n  private renderContent(): HTMLDivElement {\n    return (\n      <div class=\"content\">\n        <slot name=\"metadata\"></slot>\n        <slot name=\"title\"></slot>\n        <slot name=\"text\"></slot>\n        <div class=\"actions\">\n          <slot name=\"action\"></slot>\n        </div>\n      </div>\n    );\n  }\n\n  render(): HTMLZCardElement {\n    if (this.variant === CardVariant.TEXT) {\n      return <Host>{this.renderContent()}</Host>;\n    }\n\n    if (this.variant === CardVariant.OVERLAY || this.hasCoverImage) {\n      return (\n        <Host>\n          <div class=\"cover-container\">\n            {this.hasCoverImage && [\n              <slot name=\"cover\"></slot>,\n              this.variant !== CardVariant.OVERLAY && this.coverIcon && <z-icon name={this.coverIcon}></z-icon>,\n            ]}\n            {!this.hasCoverImage && <div class=\"color-cover\"></div>}\n          </div>\n          {this.renderContent()}\n        </Host>\n      );\n    }\n\n    return <Host>{this.renderColorCoverCard()}</Host>;\n  }\n}\n"],"version":3}

package/dist/components/z-carousel.js

@@ -1 +1,234 @@
-import{proxyCustomElement as t,HTMLElement as e,createEvent as i,h as n,Host as o,transformTag as s}from"@stencil/core/internal/client";import{Q as a,R as r,B as l}from"./index2.js";import{d as h}from"./index5.js";import{d as g}from"./index18.js";import{d}from"./index3.js";const f=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.indexChange=i(this,"indexChange",7),this.single=!1,this.fixedArrows=!0,this.ghostLoadingHeight=100,this.infinite=!1,this.current=0,this.scrollingTo=null}onIndexChange(){this.indexChange.emit({currentItem:this.current})}onSingleModeChange(){this.single&&!this.intersectionObserver&&this.setIntersectionObserver()}onInfiniteModeChange(){this.checkNavigationValidity()}onLoadingChange(){this.isLoading||this.setupObserversAndListeners()}setupObserversAndListeners(){var t;this.setupItems(),null===(t=this.itemsContainer)||void 0===t||t.addEventListener("scroll",this.checkNavigationValidity.bind(this),{passive:!0}),this.resizeObserver=new ResizeObserver(this.checkNavigationValidity.bind(this)),this.resizeObserver.observe(this.itemsContainer),this.single&&this.setIntersectionObserver(),this.checkNavigationValidity()}setIntersectionObserver(){this.intersectionObserver=new IntersectionObserver((t=>{const e=t.find((({isIntersecting:t})=>t));if(!e)return;const i=this.items.findIndex((t=>t===e.target));this.highlightedIndicator=i,null!==this.scrollingTo&&i!==this.scrollingTo||(this.scrollingTo=null,this.current=i)}),{root:this.itemsContainer,threshold:.5}),this.items.forEach((t=>this.intersectionObserver.observe(t)))}onSlotChange(){this.items=Array.from(this.host.children),this.checkNavigationValidity(),this.setIntersectionObserver(),this.goTo(this.current)}onPrev(){this.single?this.goTo(this.infinite&&this.current-1<0?this.items.length-1:Math.max(0,this.current-1)):this.itemsContainer.scrollBy({left:this.infinite&&0==this.itemsContainer.scrollLeft?this.itemsContainer.scrollWidth-this.itemsContainer.clientWidth:-this.itemsContainer.clientWidth/2,behavior:"smooth"})}onNext(){if(this.single)return this.goTo(this.infinite&&this.current+1>this.items.length-1?0:Math.min(this.current+1,this.items.length-1));this.itemsContainer.scrollBy({left:this.infinite&&this.itemsContainer.scrollLeft==this.itemsContainer.scrollWidth-this.itemsContainer.clientWidth?-this.itemsContainer.scrollWidth:this.itemsContainer.clientWidth/2,behavior:"smooth"})}checkNavigationValidity(){if(this.single)return this.canNavigatePrev=this.current>0,void(this.canNavigateNext=this.current<this.items.length-1);this.canNavigatePrev=this.itemsContainer.scrollLeft>0,this.canNavigateNext=this.itemsContainer.scrollLeft<this.itemsContainer.scrollWidth-this.itemsContainer.clientWidth}canShowFooter(){return!(!this.canNavigatePrev&&!this.canNavigateNext||this.arrowsPosition!==a.BOTTOM&&this.progressMode!==r.DOTS&&this.progressMode!==r.NUMBERS)}goTo(t){if(this.current===t)return;this.scrollingTo=t;const e=this.items.slice(0,t).reduce(((t,e)=>t+e.clientWidth),0);this.itemsContainer.scroll({left:e,behavior:"smooth"})}get canNavigate(){return this.canNavigatePrev||this.canNavigateNext}setupItems(){this.items=Array.from(this.host.children),this.items.forEach((t=>{t.setAttribute("aria-roledescription","slide")}))}componentDidLoad(){this.isLoading||this.setupObserversAndListeners()}disconnectedCallback(){var t;null===(t=this.resizeObserver)||void 0===t||t.disconnect()}render(){return this.isLoading?n("div",{class:"z-carousel-container"},this.label&&n("div",{class:"heading-3-sb z-carousel-title"},this.label),n("div",{style:{height:this.ghostLoadingHeight+"px"}},n("z-ghost-loading",null))):n(o,null,n("div",{class:"z-carousel-container","aria-roledescription":"carousel","aria-label":this.label||"Carousel"},this.label&&n("div",{class:"z-carousel-title heading-3-sb"},this.label),n("div",{class:"z-carousel-wrapper"},n("z-button",{class:"z-carousel-navigation-arrow",variant:l.SECONDARY,"data-direction":"prev",icon:"arrow-left",onClick:this.onPrev.bind(this),disabled:!this.infinite&&!this.canNavigatePrev,hidden:this.arrowsPosition!==a.OVER||!this.canNavigate,ariaLabel:this.single?"Mostra l'elemento precedente":"Mostra gli elementi precedenti"}),n("ul",{class:"z-carousel-items-container","aria-atomic":"false","aria-live":"polite",ref:t=>this.itemsContainer=t},n("slot",{onSlotchange:this.onSlotChange.bind(this)})),n("z-button",{class:"z-carousel-navigation-arrow",variant:l.SECONDARY,"data-direction":"next",icon:"arrow-right",onClick:this.onNext.bind(this),disabled:!this.infinite&&!this.canNavigateNext,hidden:this.arrowsPosition!==a.OVER||!this.canNavigate,ariaLabel:this.single?"Mostra l'elemento successivo":"Mostra gli elementi successivi"}))),this.canShowFooter()&&n("div",{class:"z-carousel-footer"},this.arrowsPosition===a.BOTTOM&&n("z-button",{class:"z-carousel-navigation-arrow",variant:l.TERTIARY,icon:"arrow-left",onClick:this.onPrev.bind(this),disabled:!this.infinite&&!this.canNavigatePrev,ariaLabel:this.single?"Mostra l'elemento precedente":"Mostra gli elementi precedenti"}),this.progressMode===r.DOTS&&this.single&&this.items&&n("div",{class:"dots-progress"},this.items.map(((t,e)=>n("button",{type:"button",class:{current:this.highlightedIndicator===e},"aria-label":this.highlightedIndicator===e?"Elemento corrente":"Spostati all'elemento "+(e+1),onClick:()=>this.goTo(e)})))),this.progressMode===r.NUMBERS&&this.single&&this.items&&n("div",{class:"numbers-progress interactive-1"},n("span",{class:"current"},this.current+1),n("span",null,"di"),n("span",null,this.items.length)),this.arrowsPosition===a.BOTTOM&&n("z-button",{class:"z-carousel-navigation-arrow",variant:l.TERTIARY,icon:"arrow-right",onClick:this.onNext.bind(this),disabled:!this.infinite&&!this.canNavigateNext,ariaLabel:this.single?"Mostra l'elemento successivo":"Mostra gli elementi successivi"})))}get host(){return this}static get watchers(){return{current:[{onIndexChange:0}],single:[{onSingleModeChange:0}],infinite:[{onInfiniteModeChange:0}],isLoading:[{onLoadingChange:0}]}}static get style(){return':host{font-family:var(--font-family-sans);font-weight:var(--font-rg);--z-carousel-gutter:0;}:host([single]){display:flex;flex-direction:column;align-items:center;justify-content:center}:host([single]) .z-carousel-container{width:fit-content;max-width:100%}.z-carousel-container{display:flex;flex-direction:column}.z-carousel-title{margin-bottom:calc(var(--space-unit) * 2)}.z-carousel-wrapper{position:relative}.z-carousel-items-container{display:flex;max-width:100%;flex-direction:row;margin:0;box-shadow:var(--z-carousel-items-shadow, none);column-gap:var(--z-carousel-gutter);list-style:none;-ms-overflow-style:none;overflow-x:scroll;padding-inline-start:0;scroll-behavior:smooth;scroll-snap-type:x mandatory;scrollbar-width:none;}.z-carousel-items-container::-webkit-scrollbar{display:none}.z-carousel-items-container ::slotted(*){scroll-snap-align:center}.z-carousel-navigation-arrow[hidden]{display:none}.z-carousel-navigation-arrow[data-direction]{position:absolute;z-index:1;bottom:50%;transform:translateY(50%)}.z-carousel-navigation-arrow[data-direction="next"]{right:0}:host(:not([fixed-arrows])) .z-carousel-wrapper .z-carousel-navigation-arrow{display:none}.z-carousel-footer{display:flex;flex-direction:row;align-items:center;justify-content:center;column-gap:calc(var(--space-unit) * 3)}:host([arrows-position="bottom"]) .z-carousel-footer{margin-top:calc(var(--space-unit) * 0.75)}.z-carousel-footer .numbers-progress,.z-carousel-footer .dots-progress{display:flex;align-items:center;justify-content:center}.z-carousel-footer .dots-progress{column-gap:calc(var(--space-unit) * 3)}:host(:not([arrows-position="bottom"])) .z-carousel-footer .dots-progress{margin-top:calc(var(--space-unit) * 2)}.z-carousel-footer .dots-progress button{display:flex;width:calc(var(--space-unit) * 3);height:calc(var(--space-unit) * 3);align-items:center;padding:0;border:none;margin:0;background-color:var(--color-surface03);border-radius:calc(var(--space-unit) * 3)}.z-carousel-footer .dots-progress button.current{background-color:var(--color-primary01)}.z-carousel-footer .dots-progress button:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}.z-carousel-footer .dots-progress button:not(.current){cursor:pointer}.z-carousel-footer .numbers-progress{column-gap:calc(var(--space-unit) / 2)}:host(:not([arrows-position="bottom"])) .z-carousel-footer .numbers-progress{margin-top:var(--space-unit)}.z-carousel-footer .numbers-progress .current{font-weight:var(--font-sb)}@media (min-width: 768px){:host(:not([fixed-arrows])) .z-carousel-wrapper:hover .z-carousel-navigation-arrow:not([hidden]){display:flex}}:root{--font-family-sans:"IBM Plex Sans", sans-serif;--font-family-serif:"IBM Plex Serif", serif;--font-lt:300;--font-rg:400;--font-sb:600;--font-bd:700;--font-size-1:0.75rem;--font-size-2:0.875rem;--font-size-3:1rem;--font-size-4:1.125rem;--font-size-5:1.25rem;--font-size-6:1.5rem;--font-size-7:1.75rem;--font-size-8:2rem;--font-size-9:2.25rem;--font-size-10:2.625rem;--font-size-11:3rem;--font-size-12:3.375rem;--font-size-13:3.75rem;--font-size-14:4.25rem;--font-size-15:4.75rem;--font-size-16:5.25rem;--font-size-17:5.75rem;--section-title-1:var(--font-sb) var(--font-size-11) / 1.083 var(--font-family-serif);--section-title-2:var(--font-sb) var(--font-size-10) / 1.142 var(--font-family-serif);--section-title-3:var(--font-sb) var(--font-size-9) / 1.222 var(--font-family-serif);--section-title-4:var(--font-sb) var(--font-size-8) / 1.25 var(--font-family-serif);--section-title-5:var(--font-sb) var(--font-size-7) / 1.2857 var(--font-family-serif);--section-title-6:var(--font-sb) var(--font-size-6) / 1.333 var(--font-family-serif)}.heading-1,.heading-1-sb,.heading-1-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}.heading-2,.heading-2-sb,.heading-2-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.heading-3,.heading-3-sb,.heading-3-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.heading-4,.heading-4-sb,.heading-4-lt{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.body-1,.body-1-sb{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.body-2,.body-2-sb{font-size:var(--font-size-4);font-weight:var(--font-rg);line-height:1.5}.body-3,.body-3-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.body-4,.body-4-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.body-5,.body-5-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.interactive-1,.interactive-1-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.interactive-2,.interactive-2-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.interactive-3,.interactive-3-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.helper,.helper-sb{font-size:var(--font-size-1);font-style:italic;font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.section-title-1{font:var(--section-title-1)}.section-title-2{font:var(--section-title-2)}.section-title-3{font:var(--section-title-3)}.section-title-4{font:var(--section-title-4)}.section-title-5{font:var(--section-title-5)}.section-title-6{font:var(--section-title-6)}@media (min-width: 1152px){.heading-1,.heading-1-sb,.heading-1-lt{font-size:var(--font-size-8);font-weight:var(--font-rg);line-height:1.25}.heading-2,.heading-2-sb,.heading-2-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}}@media (max-width: 767px){.mobile-heading-1,.mobile-heading-1-sb,.mobile-heading-1-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}.mobile-heading-2,.mobile-heading-2-sb,.mobile-heading-2-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.mobile-heading-3,.mobile-heading-3-sb,.mobile-heading-3-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.mobile-heading-4,.mobile-heading-4-sb,.mobile-heading-4-lt{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.mobile-body-1,.mobile-body-1-sb{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.mobile-body-2,.mobile-body-2-sb{font-size:var(--font-size-4);font-weight:var(--font-rg);line-height:1.5}.mobile-body-3,.mobile-body-3-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.mobile-body-4,.mobile-body-4-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.mobile-body-5,.mobile-body-5-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.mobile-interactive-1,.mobile-interactive-1-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.mobile-interactive-2,.mobile-interactive-2-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.mobile-interactive-3,.mobile-interactive-3-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.mobile-section-title-1{font:var(--section-title-1)}.mobile-section-title-2{font:var(--section-title-2)}.mobile-section-title-3{font:var(--section-title-3)}.mobile-section-title-4{font:var(--section-title-4)}.mobile-section-title-5{font:var(--section-title-5)}.mobile-section-title-6{font:var(--section-title-6)}.mobile-heading-1-lt,.mobile-heading-2-lt,.mobile-heading-3-lt,.mobile-heading-4-lt{font-weight:var(--font-lt)}.mobile-heading-1-sb,.mobile-heading-2-sb,.mobile-heading-3-sb,.mobile-heading-4-sb,.mobile-body-1-sb,.mobile-body-2-sb,.mobile-body-3-sb,.mobile-body-4-sb,.mobile-body-5-sb,.mobile-interactive-1-sb,.mobile-interactive-2-sb,.mobile-interactive-3-sb{font-weight:var(--font-sb)}}@media (min-width: 768px) and (max-width: 1151px){.tablet-heading-1,.tablet-heading-1-sb,.tablet-heading-1-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}.tablet-heading-2,.tablet-heading-2-sb,.tablet-heading-2-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.tablet-heading-3,.tablet-heading-3-sb,.tablet-heading-3-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.tablet-heading-4,.tablet-heading-4-sb,.tablet-heading-4-lt{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.tablet-body-1,.tablet-body-1-sb{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.tablet-body-2,.tablet-body-2-sb{font-size:var(--font-size-4);font-weight:var(--font-rg);line-height:1.5}.tablet-body-3,.tablet-body-3-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.tablet-body-4,.tablet-body-4-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.tablet-body-5,.tablet-body-5-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.tablet-interactive-1,.tablet-interactive-1-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.tablet-interactive-2,.tablet-interactive-2-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.tablet-interactive-3,.tablet-interactive-3-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.tablet-section-title-1{font:var(--section-title-1)}.tablet-section-title-2{font:var(--section-title-2)}.tablet-section-title-3{font:var(--section-title-3)}.tablet-section-title-4{font:var(--section-title-4)}.tablet-section-title-5{font:var(--section-title-5)}.tablet-section-title-6{font:var(--section-title-6)}.tablet-heading-1-lt,.tablet-heading-2-lt,.tablet-heading-3-lt,.tablet-heading-4-lt{font-weight:var(--font-lt)}.tablet-heading-1-sb,.tablet-heading-2-sb,.tablet-heading-3-sb,.tablet-heading-4-sb,.tablet-body-1-sb,.tablet-body-2-sb,.tablet-body-3-sb,.tablet-body-4-sb,.tablet-body-5-sb,.tablet-interactive-1-sb,.tablet-interactive-2-sb,.tablet-interactive-3-sb{font-weight:var(--font-sb)}}@media (min-width: 1152px) and (max-width: 1365px){.desktop-heading-1,.desktop-heading-1-sb,.desktop-heading-1-lt{font-size:var(--font-size-8);font-weight:var(--font-rg);line-height:1.25}.desktop-heading-2,.desktop-heading-2-sb,.desktop-heading-2-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}.desktop-heading-3,.desktop-heading-3-sb,.desktop-heading-3-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.desktop-heading-4,.desktop-heading-4-sb,.desktop-heading-4-lt{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.desktop-body-1,.desktop-body-1-sb{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.desktop-body-2,.desktop-body-2-sb{font-size:var(--font-size-4);font-weight:var(--font-rg);line-height:1.5}.desktop-body-3,.desktop-body-3-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.desktop-body-4,.desktop-body-4-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.desktop-body-5,.desktop-body-5-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.desktop-interactive-1,.desktop-interactive-1-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.desktop-interactive-2,.desktop-interactive-2-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.desktop-interactive-3,.desktop-interactive-3-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.desktop-section-title-1{font:var(--section-title-1)}.desktop-section-title-2{font:var(--section-title-2)}.desktop-section-title-3{font:var(--section-title-3)}.desktop-section-title-4{font:var(--section-title-4)}.desktop-section-title-5{font:var(--section-title-5)}.desktop-section-title-6{font:var(--section-title-6)}.desktop-heading-1-lt,.desktop-heading-2-lt,.desktop-heading-3-lt,.desktop-heading-4-lt{font-weight:var(--font-lt)}.desktop-heading-1-sb,.desktop-heading-2-sb,.desktop-heading-3-sb,.desktop-heading-4-sb,.desktop-body-1-sb,.desktop-body-2-sb,.desktop-body-3-sb,.desktop-body-4-sb,.desktop-body-5-sb,.desktop-interactive-1-sb,.desktop-interactive-2-sb,.desktop-interactive-3-sb{font-weight:var(--font-sb)}}@media (min-width: 1366px){.wide-heading-1,.wide-heading-1-sb,.wide-heading-1-lt{font-size:var(--font-size-8);font-weight:var(--font-rg);line-height:1.25}.wide-heading-2,.wide-heading-2-sb,.wide-heading-2-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}.wide-heading-3,.wide-heading-3-sb,.wide-heading-3-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.wide-heading-4,.wide-heading-4-sb,.wide-heading-4-lt{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.wide-body-1,.wide-body-1-sb{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.wide-body-2,.wide-body-2-sb{font-size:var(--font-size-4);font-weight:var(--font-rg);line-height:1.5}.wide-body-3,.wide-body-3-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.wide-body-4,.wide-body-4-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.wide-body-5,.wide-body-5-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.wide-interactive-1,.wide-interactive-1-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.wide-interactive-2,.wide-interactive-2-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.wide-interactive-3,.wide-interactive-3-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.wide-section-title-1{font:var(--section-title-1)}.wide-section-title-2{font:var(--section-title-2)}.wide-section-title-3{font:var(--section-title-3)}.wide-section-title-4{font:var(--section-title-4)}.wide-section-title-5{font:var(--section-title-5)}.wide-section-title-6{font:var(--section-title-6)}.wide-heading-1-lt,.wide-heading-2-lt,.wide-heading-3-lt,.wide-heading-4-lt{font-weight:var(--font-lt)}.wide-heading-1-sb,.wide-heading-2-sb,.wide-heading-3-sb,.wide-heading-4-sb,.wide-body-1-sb,.wide-body-2-sb,.wide-body-3-sb,.wide-body-4-sb,.wide-body-5-sb,.wide-interactive-1-sb,.wide-interactive-2-sb,.wide-interactive-3-sb{font-weight:var(--font-sb)}}.heading-1-lt,.heading-2-lt,.heading-3-lt,.heading-4-lt{font-weight:var(--font-lt)}.heading-1-sb,.heading-2-sb,.heading-3-sb,.heading-4-sb,.body-1-sb,.body-2-sb,.body-3-sb,.body-4-sb,.body-5-sb,.interactive-1-sb,.interactive-2-sb,.interactive-3-sb,.helper-sb{font-weight:var(--font-sb)}'}},[257,"z-carousel",{isLoading:[4,"is-loading"],label:[1],single:[516],arrowsPosition:[513,"arrows-position"],progressMode:[1,"progress-mode"],fixedArrows:[516,"fixed-arrows"],ghostLoadingHeight:[2,"ghost-loading-height"],infinite:[4],current:[32],items:[32],highlightedIndicator:[32],canNavigatePrev:[32],canNavigateNext:[32]},void 0,{current:[{onIndexChange:0}],single:[{onSingleModeChange:0}],infinite:[{onInfiniteModeChange:0}],isLoading:[{onLoadingChange:0}]}]),b=f,c=function(){"undefined"!=typeof customElements&&["z-carousel","z-button","z-ghost-loading","z-icon"].forEach((t=>{switch(t){case"z-carousel":customElements.get(s(t))||customElements.define(s(t),f);break;case"z-button":customElements.get(s(t))||h();break;case"z-ghost-loading":customElements.get(s(t))||g();break;case"z-icon":customElements.get(s(t))||d()}}))};export{b as ZCarousel,c as defineCustomElement}
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { Q as CarouselArrowsPosition, R as CarouselProgressMode, B as ButtonVariant } from './index2.js';
+import { d as defineCustomElement$4 } from './index5.js';
+import { d as defineCustomElement$3 } from './index9.js';
+import { d as defineCustomElement$2 } from './index10.js';
+
+const stylesCss = ":host{font-family:var(--font-family-sans);font-weight:var(--font-rg);--z-carousel-gutter:0;}:host([single]){display:flex;flex-direction:column;align-items:center;justify-content:center}:host([single]) .z-carousel-container{width:fit-content;max-width:100%}.z-carousel-container{display:flex;flex-direction:column}.z-carousel-title{margin-bottom:calc(var(--space-unit) * 2)}.z-carousel-wrapper{position:relative}.z-carousel-items-container{display:flex;max-width:100%;flex-direction:row;margin:0;box-shadow:var(--z-carousel-items-shadow, none);column-gap:var(--z-carousel-gutter);list-style:none;-ms-overflow-style:none;overflow-x:scroll;padding-inline-start:0;scroll-behavior:smooth;scroll-snap-type:x mandatory;scrollbar-width:none;}.z-carousel-items-container::-webkit-scrollbar{display:none}.z-carousel-items-container ::slotted(*){scroll-snap-align:center}.z-carousel-navigation-arrow[hidden]{display:none}.z-carousel-navigation-arrow[data-direction]{position:absolute;z-index:1;bottom:50%;transform:translateY(50%)}.z-carousel-navigation-arrow[data-direction=\"next\"]{right:0}:host(:not([fixed-arrows])) .z-carousel-wrapper .z-carousel-navigation-arrow{display:none}.z-carousel-footer{display:flex;flex-direction:row;align-items:center;justify-content:center;column-gap:calc(var(--space-unit) * 3)}:host([arrows-position=\"bottom\"]) .z-carousel-footer{margin-top:calc(var(--space-unit) * 0.75)}.z-carousel-footer .numbers-progress,.z-carousel-footer .dots-progress{display:flex;align-items:center;justify-content:center}.z-carousel-footer .dots-progress{column-gap:calc(var(--space-unit) * 3)}:host(:not([arrows-position=\"bottom\"])) .z-carousel-footer .dots-progress{margin-top:calc(var(--space-unit) * 2)}.z-carousel-footer .dots-progress button{display:flex;width:calc(var(--space-unit) * 3);height:calc(var(--space-unit) * 3);align-items:center;padding:0;border:none;margin:0;background-color:var(--color-surface03);border-radius:calc(var(--space-unit) * 3)}.z-carousel-footer .dots-progress button.current{background-color:var(--color-primary01)}.z-carousel-footer .dots-progress button:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}.z-carousel-footer .dots-progress button:not(.current){cursor:pointer}.z-carousel-footer .numbers-progress{column-gap:calc(var(--space-unit) / 2)}:host(:not([arrows-position=\"bottom\"])) .z-carousel-footer .numbers-progress{margin-top:var(--space-unit)}.z-carousel-footer .numbers-progress .current{font-weight:var(--font-sb)}@media (min-width: 768px){:host(:not([fixed-arrows])) .z-carousel-wrapper:hover .z-carousel-navigation-arrow:not([hidden]){display:flex}}";
+const ZCarouselStyle0 = stylesCss;
+
+const ZCarousel$1 = /*@__PURE__*/ proxyCustomElement(class ZCarousel extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.indexChange = createEvent(this, "indexChange", 7);
+        /** Flag indicating the items container is about to scroll programmatically towards the stored index. */
+        this.scrollingTo = null;
+        this.isLoading = undefined;
+        this.label = undefined;
+        this.single = false;
+        this.arrowsPosition = undefined;
+        this.progressMode = undefined;
+        this.fixedArrows = true;
+        this.ghostLoadingHeight = 100;
+        this.infinite = false;
+        this.current = 0;
+        this.items = undefined;
+        this.highlightedIndicator = undefined;
+        this.canNavigatePrev = undefined;
+        this.canNavigateNext = undefined;
+    }
+    onIndexChange() {
+        this.indexChange.emit({ currentItem: this.current });
+    }
+    onSingleModeChange() {
+        if (this.single && !this.intersectionObserver) {
+            this.setIntersectionObserver();
+        }
+    }
+    onInfiniteModeChange() {
+        this.checkNavigationValidity();
+    }
+    /**
+     * Set an intersection observer to:
+     * - highlight the indicator of the intersecting item during scroll
+     * - set the current item to the last intersecting item
+     */
+    setIntersectionObserver() {
+        this.intersectionObserver = new IntersectionObserver((entries) => {
+            const entry = entries.find(({ isIntersecting }) => isIntersecting);
+            if (!entry) {
+                return;
+            }
+            const entryIndex = this.items.findIndex((item) => item === entry.target);
+            this.highlightedIndicator = entryIndex;
+            /* skip setting the current item if intersection has been triggered by a programmatic scroll
+            (@see `goTo` function) and the final index has not been reached */
+            if (this.scrollingTo !== null && entryIndex !== this.scrollingTo) {
+                return;
+            }
+            this.scrollingTo = null;
+            this.current = entryIndex;
+        }, {
+            root: this.itemsContainer,
+            threshold: 0.5,
+        });
+        this.items.forEach((element) => this.intersectionObserver.observe(element));
+    }
+    /** Update items' list and check conditions to allow navigation */
+    onSlotChange() {
+        this.items = Array.from(this.host.children);
+        this.checkNavigationValidity();
+        this.setIntersectionObserver();
+        this.goTo(this.current);
+    }
+    onPrev() {
+        if (this.single) {
+            this.goTo(this.infinite && this.current - 1 < 0 ? this.items.length - 1 : Math.max(0, this.current - 1));
+            return;
+        }
+        this.itemsContainer.scrollBy({
+            left: this.infinite && this.itemsContainer.scrollLeft == 0
+                ? this.itemsContainer.scrollWidth - this.itemsContainer.clientWidth
+                : -this.itemsContainer.clientWidth / 2,
+            behavior: "smooth",
+        });
+    }
+    onNext() {
+        if (this.single) {
+            const next = this.infinite && this.current + 1 > this.items.length - 1
+                ? 0
+                : Math.min(this.current + 1, this.items.length - 1);
+            return this.goTo(next);
+        }
+        this.itemsContainer.scrollBy({
+            left: this.infinite &&
+                this.itemsContainer.scrollLeft == this.itemsContainer.scrollWidth - this.itemsContainer.clientWidth
+                ? -this.itemsContainer.scrollWidth
+                : this.itemsContainer.clientWidth / 2,
+            behavior: "smooth",
+        });
+    }
+    /**
+     * Check if navigation buttons can be enabled and set the related local states.
+     */
+    checkNavigationValidity() {
+        if (this.single) {
+            this.canNavigatePrev = this.current > 0;
+            this.canNavigateNext = this.current < this.items.length - 1;
+            return;
+        }
+        this.canNavigatePrev = this.itemsContainer.scrollLeft > 0;
+        this.canNavigateNext =
+            this.itemsContainer.scrollLeft < this.itemsContainer.scrollWidth - this.itemsContainer.clientWidth;
+    }
+    /**
+     * Check if footer has to be rendered.
+     */
+    canShowFooter() {
+        if (!this.canNavigatePrev && !this.canNavigateNext) {
+            return false;
+        }
+        return (this.arrowsPosition === CarouselArrowsPosition.BOTTOM ||
+            this.progressMode === CarouselProgressMode.DOTS ||
+            this.progressMode === CarouselProgressMode.NUMBERS);
+    }
+    /**
+     * Set current item to passed index.
+     * @param index Index to set
+     */
+    goTo(index) {
+        if (this.current === index) {
+            return;
+        }
+        this.scrollingTo = index;
+        const left = this.items.slice(0, index).reduce((acc, item) => (acc += item.clientWidth), 0);
+        // the scroll will trigger the IntersectionObserver and set the current item
+        this.itemsContainer.scroll({
+            left,
+            behavior: "smooth",
+        });
+    }
+    /** Check if navigation of at least one direction is enabled */
+    get canNavigate() {
+        return this.canNavigatePrev || this.canNavigateNext;
+    }
+    setupItems() {
+        this.items = Array.from(this.host.children);
+        this.items.forEach((item) => {
+            item.setAttribute("aria-roledescription", "slide");
+        });
+    }
+    componentDidLoad() {
+        var _a, _b;
+        (_a = this.itemsContainer) === null || _a === void 0 ? void 0 : _a.addEventListener("scroll", this.checkNavigationValidity.bind(this), { passive: true });
+        this.resizeObserver = new ResizeObserver(this.checkNavigationValidity.bind(this));
+        (_b = this.resizeObserver) === null || _b === void 0 ? void 0 : _b.observe(this.itemsContainer);
+        this.setupItems();
+        if (this.single) {
+            this.setIntersectionObserver();
+        }
+        this.checkNavigationValidity();
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }
+    render() {
+        if (this.isLoading) {
+            return (h("div", { class: "z-carousel-container" }, this.label && h("div", { class: "heading-3-sb z-carousel-title" }, this.label), h("div", { style: { height: `${this.ghostLoadingHeight}px` } }, h("z-ghost-loading", null))));
+        }
+        return (h(Host, null, h("div", { class: "z-carousel-container", "aria-roledescription": "carousel", "aria-label": this.label || "Carousel" }, this.label && h("div", { class: "z-carousel-title heading-3-sb" }, this.label), h("div", { class: "z-carousel-wrapper" }, h("z-button", { class: "z-carousel-navigation-arrow", variant: ButtonVariant.SECONDARY, "data-direction": "prev", icon: "arrow-left", onClick: this.onPrev.bind(this), disabled: !this.infinite && !this.canNavigatePrev, hidden: this.arrowsPosition !== CarouselArrowsPosition.OVER || !this.canNavigate, ariaLabel: this.single ? "Mostra l'elemento precedente" : "Mostra gli elementi precedenti" }), h("ul", { class: "z-carousel-items-container", "aria-atomic": "false", "aria-live": "polite", ref: (el) => (this.itemsContainer = el) }, h("slot", { onSlotchange: this.onSlotChange.bind(this) })), h("z-button", { class: "z-carousel-navigation-arrow", variant: ButtonVariant.SECONDARY, "data-direction": "next", icon: "arrow-right", onClick: this.onNext.bind(this), disabled: !this.infinite && !this.canNavigateNext, hidden: this.arrowsPosition !== CarouselArrowsPosition.OVER || !this.canNavigate, ariaLabel: this.single ? "Mostra l'elemento successivo" : "Mostra gli elementi successivi" }))), this.canShowFooter() && (h("div", { class: "z-carousel-footer" }, this.arrowsPosition === CarouselArrowsPosition.BOTTOM && (h("z-button", { class: "z-carousel-navigation-arrow", variant: ButtonVariant.TERTIARY, icon: "arrow-left", onClick: this.onPrev.bind(this), disabled: !this.infinite && !this.canNavigatePrev, ariaLabel: this.single ? "Mostra l'elemento precedente" : "Mostra gli elementi precedenti" })), this.progressMode === CarouselProgressMode.DOTS && this.single && this.items && (h("div", { class: "dots-progress" }, this.items.map((_, index) => (h("button", { type: "button", class: { current: this.highlightedIndicator === index }, "aria-label": this.highlightedIndicator === index ? "Elemento corrente" : `Spostati all'elemento ${index + 1}`, onClick: () => this.goTo(index) }))))), this.progressMode === CarouselProgressMode.NUMBERS && this.single && this.items && (h("div", { class: "numbers-progress interactive-1" }, h("span", { class: "current" }, this.current + 1), h("span", null, "di"), h("span", null, this.items.length))), this.arrowsPosition === CarouselArrowsPosition.BOTTOM && (h("z-button", { class: "z-carousel-navigation-arrow", variant: ButtonVariant.TERTIARY, icon: "arrow-right", onClick: this.onNext.bind(this), disabled: !this.infinite && !this.canNavigateNext, ariaLabel: this.single ? "Mostra l'elemento successivo" : "Mostra gli elementi successivi" }))))));
+    }
+    get host() { return this; }
+    static get watchers() { return {
+        "current": ["onIndexChange"],
+        "single": ["onSingleModeChange"],
+        "infinite": ["onInfiniteModeChange"]
+    }; }
+    static get style() { return ZCarouselStyle0; }
+}, [1, "z-carousel", {
+        "isLoading": [4, "is-loading"],
+        "label": [1],
+        "single": [516],
+        "arrowsPosition": [513, "arrows-position"],
+        "progressMode": [1, "progress-mode"],
+        "fixedArrows": [516, "fixed-arrows"],
+        "ghostLoadingHeight": [2, "ghost-loading-height"],
+        "infinite": [4],
+        "current": [32],
+        "items": [32],
+        "highlightedIndicator": [32],
+        "canNavigatePrev": [32],
+        "canNavigateNext": [32]
+    }, undefined, {
+        "current": ["onIndexChange"],
+        "single": ["onSingleModeChange"],
+        "infinite": ["onInfiniteModeChange"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["z-carousel", "z-button", "z-ghost-loading", "z-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "z-carousel":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ZCarousel$1);
+            }
+            break;
+        case "z-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "z-ghost-loading":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "z-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const ZCarousel = ZCarousel$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { ZCarousel, defineCustomElement };
+
+//# sourceMappingURL=z-carousel.js.map

package/dist/components/z-carousel.js.map

@@ -0,0 +1 @@
+{"file":"z-carousel.js","mappings":";;;;;;AAAA,MAAM,SAAS,GAAG,8kFAA8kF,CAAC;AACjmF,wBAAe,SAAS;;MCaXA,WAAS;;;;;;;QAmEZ,gBAAW,GAAW,IAAI,CAAC;;;sBAtD1B,KAAK;;;2BAgBA,IAAI;kCAIG,GAAG;wBAIb,KAAK;uBAIN,CAAC;;;;;;IAiCX,aAAa;QACX,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAC,WAAW,EAAE,IAAI,CAAC,OAAO,EAAC,CAAC,CAAC;KACpD;IAGD,kBAAkB;QAChB,IAAI,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,oBAAoB,EAAE;YAC7C,IAAI,CAAC,uBAAuB,EAAE,CAAC;SAChC;KACF;IAGD,oBAAoB;QAClB,IAAI,CAAC,uBAAuB,EAAE,CAAC;KAChC;;;;;;IAOO,uBAAuB;QAC7B,IAAI,CAAC,oBAAoB,GAAG,IAAI,oBAAoB,CAClD,CAAC,OAAO;YACN,MAAM,KAAK,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,EAAC,cAAc,EAAC,KAAK,cAAc,CAAC,CAAC;YACjE,IAAI,CAAC,KAAK,EAAE;gBACV,OAAO;aACR;YAED,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,IAAI,KAAK,IAAI,KAAK,KAAK,CAAC,MAAM,CAAC,CAAC;YACzE,IAAI,CAAC,oBAAoB,GAAG,UAAU,CAAC;;;YAIvC,IAAI,IAAI,CAAC,WAAW,KAAK,IAAI,IAAI,UAAU,KAAK,IAAI,CAAC,WAAW,EAAE;gBAChE,OAAO;aACR;YAED,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;YACxB,IAAI,CAAC,OAAO,GAAG,UAAU,CAAC;SAC3B,EACD;YACE,IAAI,EAAE,IAAI,CAAC,cAAc;YACzB,SAAS,EAAE,GAAG;SACf,CACF,CAAC;QAEF,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,OAAO,KAAK,IAAI,CAAC,oBAAoB,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC;KAC7E;;IAGO,YAAY;QAClB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAoB,CAAC;QAC/D,IAAI,CAAC,uBAAuB,EAAE,CAAC;QAC/B,IAAI,CAAC,uBAAuB,EAAE,CAAC;QAC/B,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;KACzB;IAEO,MAAM;QACZ,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,GAAG,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC,CAAC,CAAC;YAEzG,OAAO;SACR;QAED,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC;YAC3B,IAAI,EACF,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,cAAc,CAAC,UAAU,IAAI,CAAC;kBAChD,IAAI,CAAC,cAAc,CAAC,WAAW,GAAG,IAAI,CAAC,cAAc,CAAC,WAAW;kBACjE,CAAC,IAAI,CAAC,cAAc,CAAC,WAAW,GAAG,CAAC;YAC1C,QAAQ,EAAE,QAAQ;SACnB,CAAC,CAAC;KACJ;IAEO,MAAM;QACZ,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,MAAM,IAAI,GACR,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC;kBACrD,CAAC;kBACD,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,GAAG,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;YAExD,OAAO,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;SACxB;QAED,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC;YAC3B,IAAI,EACF,IAAI,CAAC,QAAQ;gBACb,IAAI,CAAC,cAAc,CAAC,UAAU,IAAI,IAAI,CAAC,cAAc,CAAC,WAAW,GAAG,IAAI,CAAC,cAAc,CAAC,WAAW;kBAC/F,CAAC,IAAI,CAAC,cAAc,CAAC,WAAW;kBAChC,IAAI,CAAC,cAAc,CAAC,WAAW,GAAG,CAAC;YACzC,QAAQ,EAAE,QAAQ;SACnB,CAAC,CAAC;KACJ;;;;IAKO,uBAAuB;QAC7B,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC;YACxC,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;YAE5D,OAAO;SACR;QAED,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,cAAc,CAAC,UAAU,GAAG,CAAC,CAAC;QAC1D,IAAI,CAAC,eAAe;YAClB,IAAI,CAAC,cAAc,CAAC,UAAU,GAAG,IAAI,CAAC,cAAc,CAAC,WAAW,GAAG,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC;KACtG;;;;IAKO,aAAa;QACnB,IAAI,CAAC,IAAI,CAAC,eAAe,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE;YAClD,OAAO,KAAK,CAAC;SACd;QAED,QACE,IAAI,CAAC,cAAc,KAAK,sBAAsB,CAAC,MAAM;YACrD,IAAI,CAAC,YAAY,KAAK,oBAAoB,CAAC,IAAI;YAC/C,IAAI,CAAC,YAAY,KAAK,oBAAoB,CAAC,OAAO,EAClD;KACH;;;;;IAMO,IAAI,CAAC,KAAa;QACxB,IAAI,IAAI,CAAC,OAAO,KAAK,KAAK,EAAE;YAC1B,OAAO;SACR;QAED,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;QACzB,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,IAAI,MAAM,GAAG,IAAI,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC,CAAC;;QAE5F,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC;YACzB,IAAI;YACJ,QAAQ,EAAE,QAAQ;SACnB,CAAC,CAAC;KACJ;;IAGD,IAAY,WAAW;QACrB,OAAO,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,eAAe,CAAC;KACrD;IAEO,UAAU;QAChB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAoB,CAAC;QAC/D,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI;YACtB,IAAI,CAAC,YAAY,CAAC,sBAAsB,EAAE,OAAO,CAAC,CAAC;SACpD,CAAC,CAAC;KACJ;IAED,gBAAgB;;QACd,MAAA,IAAI,CAAC,cAAc,0CAAE,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC,CAAC;QAC1G,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QAClF,MAAA,IAAI,CAAC,cAAc,0CAAE,OAAO,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;QAClD,IAAI,CAAC,UAAU,EAAE,CAAC;QAClB,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,IAAI,CAAC,uBAAuB,EAAE,CAAC;SAChC;QACD,IAAI,CAAC,uBAAuB,EAAE,CAAC;KAChC;IAED,oBAAoB;;QAClB,MAAA,IAAI,CAAC,cAAc,0CAAE,UAAU,EAAE,CAAC;KACnC;IAED,MAAM;QACJ,IAAI,IAAI,CAAC,SAAS,EAAE;YAClB,QACE,WAAK,KAAK,EAAC,sBAAsB,IAC9B,IAAI,CAAC,KAAK,IAAI,WAAK,KAAK,EAAC,+BAA+B,IAAE,IAAI,CAAC,KAAK,CAAO,EAC5E,WAAK,KAAK,EAAE,EAAC,MAAM,EAAE,GAAG,IAAI,CAAC,kBAAkB,IAAI,EAAC,IAClD,0BAAmC,CAC/B,CACF,EACN;SACH;QAED,QACE,EAAC,IAAI,QACH,WACE,KAAK,EAAC,sBAAsB,0BACP,UAAU,gBACnB,IAAI,CAAC,KAAK,IAAI,UAAU,IAEnC,IAAI,CAAC,KAAK,IAAI,WAAK,KAAK,EAAC,+BAA+B,IAAE,IAAI,CAAC,KAAK,CAAO,EAC5E,WAAK,KAAK,EAAC,oBAAoB,IAC7B,gBACE,KAAK,EAAC,6BAA6B,EACnC,OAAO,EAAE,aAAa,CAAC,SAAS,oBACjB,MAAM,EACrB,IAAI,EAAC,YAAY,EACjB,OAAO,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,EAC/B,QAAQ,EAAE,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,eAAe,EACjD,MAAM,EAAE,IAAI,CAAC,cAAc,KAAK,sBAAsB,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,WAAW,EAChF,SAAS,EAAE,IAAI,CAAC,MAAM,GAAG,8BAA8B,GAAG,gCAAgC,GAC1F,EACF,UACE,KAAK,EAAC,4BAA4B,iBACtB,OAAO,eACT,QAAQ,EAClB,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,cAAc,GAAG,EAAE,CAAC,IAEvC,YAAM,YAAY,EAAE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,GAAI,CACjD,EACL,gBACE,KAAK,EAAC,6BAA6B,EACnC,OAAO,EAAE,aAAa,CAAC,SAAS,oBACjB,MAAM,EACrB,IAAI,EAAC,aAAa,EAClB,OAAO,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,EAC/B,QAAQ,EAAE,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,eAAe,EACjD,MAAM,EAAE,IAAI,CAAC,cAAc,KAAK,sBAAsB,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,WAAW,EAChF,SAAS,EAAE,IAAI,CAAC,MAAM,GAAG,8BAA8B,GAAG,gCAAgC,GAC1F,CACE,CACF,EAEL,IAAI,CAAC,aAAa,EAAE,KACnB,WAAK,KAAK,EAAC,mBAAmB,IAC3B,IAAI,CAAC,cAAc,KAAK,sBAAsB,CAAC,MAAM,KACpD,gBACE,KAAK,EAAC,6BAA6B,EACnC,OAAO,EAAE,aAAa,CAAC,QAAQ,EAC/B,IAAI,EAAC,YAAY,EACjB,OAAO,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,EAC/B,QAAQ,EAAE,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,eAAe,EACjD,SAAS,EAAE,IAAI,CAAC,MAAM,GAAG,8BAA8B,GAAG,gCAAgC,GAC1F,CACH,EACA,IAAI,CAAC,YAAY,KAAK,oBAAoB,CAAC,IAAI,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,KAAK,KAC3E,WAAK,KAAK,EAAC,eAAe,IACvB,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,MACvB,cACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,EAAC,OAAO,EAAE,IAAI,CAAC,oBAAoB,KAAK,KAAK,EAAC,gBAEnD,IAAI,CAAC,oBAAoB,KAAK,KAAK,GAAG,mBAAmB,GAAG,yBAAyB,KAAK,GAAG,CAAC,EAAE,EAElG,OAAO,EAAE,MAAM,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,GAC/B,CACH,CAAC,CACE,CACP,EACA,IAAI,CAAC,YAAY,KAAK,oBAAoB,CAAC,OAAO,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,KAAK,KAC9E,WAAK,KAAK,EAAC,gCAAgC,IACzC,YAAM,KAAK,EAAC,SAAS,IAAE,IAAI,CAAC,OAAO,GAAG,CAAC,CAAQ,EAC/C,qBAAe,EACf,gBAAO,IAAI,CAAC,KAAK,CAAC,MAAM,CAAQ,CAC5B,CACP,EACA,IAAI,CAAC,cAAc,KAAK,sBAAsB,CAAC,MAAM,KACpD,gBACE,KAAK,EAAC,6BAA6B,EACnC,OAAO,EAAE,aAAa,CAAC,QAAQ,EAC/B,IAAI,EAAC,aAAa,EAClB,OAAO,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,EAC/B,QAAQ,EAAE,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,eAAe,EACjD,SAAS,EAAE,IAAI,CAAC,MAAM,GAAG,8BAA8B,GAAG,gCAAgC,GAC1F,CACH,CACG,CACP,CACI,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["ZCarousel"],"sources":["src/components/z-carousel/styles.css?tag=z-carousel&encapsulation=shadow","src/components/z-carousel/index.tsx"],"sourcesContent":[":host {\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n\n  --z-carousel-gutter: 0;\n  --z-carousel-items-shadow: ;\n}\n\n:host([single]) {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n}\n\n:host([single]) .z-carousel-container {\n  width: fit-content;\n  max-width: 100%;\n}\n\n.z-carousel-container {\n  display: flex;\n  flex-direction: column;\n}\n\n.z-carousel-title {\n  margin-bottom: calc(var(--space-unit) * 2);\n}\n\n.z-carousel-wrapper {\n  position: relative;\n}\n\n.z-carousel-items-container {\n  display: flex;\n  max-width: 100%;\n  flex-direction: row;\n  margin: 0;\n  box-shadow: var(--z-carousel-items-shadow, none);\n  column-gap: var(--z-carousel-gutter);\n  list-style: none;\n  -ms-overflow-style: none; /* IE and Edge */\n  overflow-x: scroll;\n  padding-inline-start: 0;\n  scroll-behavior: smooth;\n  scroll-snap-type: x mandatory;\n\n  /* Hide scrollbar for IE, Edge and Firefox */\n  scrollbar-width: none; /* Firefox */\n}\n\n/* Hide scrollbar for Chrome, Safari and Opera */\n.z-carousel-items-container::-webkit-scrollbar {\n  display: none;\n}\n\n.z-carousel-items-container ::slotted(*) {\n  scroll-snap-align: center;\n}\n\n.z-carousel-navigation-arrow[hidden] {\n  display: none;\n}\n\n.z-carousel-navigation-arrow[data-direction] {\n  position: absolute;\n  z-index: 1;\n  bottom: 50%;\n  transform: translateY(50%);\n}\n\n.z-carousel-navigation-arrow[data-direction=\"next\"] {\n  right: 0;\n}\n\n:host(:not([fixed-arrows])) .z-carousel-wrapper .z-carousel-navigation-arrow {\n  display: none;\n}\n\n.z-carousel-footer {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  column-gap: calc(var(--space-unit) * 3);\n}\n\n:host([arrows-position=\"bottom\"]) .z-carousel-footer {\n  margin-top: calc(var(--space-unit) * 0.75);\n}\n\n.z-carousel-footer .numbers-progress,\n.z-carousel-footer .dots-progress {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.z-carousel-footer .dots-progress {\n  column-gap: calc(var(--space-unit) * 3);\n}\n\n:host(:not([arrows-position=\"bottom\"])) .z-carousel-footer .dots-progress {\n  margin-top: calc(var(--space-unit) * 2);\n}\n\n.z-carousel-footer .dots-progress button {\n  display: flex;\n  width: calc(var(--space-unit) * 3);\n  height: calc(var(--space-unit) * 3);\n  align-items: center;\n  padding: 0;\n  border: none;\n  margin: 0;\n  background-color: var(--color-surface03);\n  border-radius: calc(var(--space-unit) * 3);\n}\n\n.z-carousel-footer .dots-progress button.current {\n  background-color: var(--color-primary01);\n}\n\n.z-carousel-footer .dots-progress button:focus:focus-visible {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\n.z-carousel-footer .dots-progress button:not(.current) {\n  cursor: pointer;\n}\n\n.z-carousel-footer .numbers-progress {\n  column-gap: calc(var(--space-unit) / 2);\n}\n\n:host(:not([arrows-position=\"bottom\"])) .z-carousel-footer .numbers-progress {\n  margin-top: var(--space-unit);\n}\n\n.z-carousel-footer .numbers-progress .current {\n  font-weight: var(--font-sb);\n}\n\n@media (min-width: 768px) {\n  :host(:not([fixed-arrows])) .z-carousel-wrapper:hover .z-carousel-navigation-arrow:not([hidden]) {\n    display: flex;\n  }\n}\n","import {Component, Element, Event, EventEmitter, Host, Prop, State, Watch, h} from \"@stencil/core\";\nimport {ButtonVariant, CarouselArrowsPosition, CarouselProgressMode} from \"../../beans\";\n\n/**\n * ZCarousel component.\n * @cssprop --z-carousel-gutter - The gutter between items.\n * @cssprop --z-carousel-items-shadow - The shadow around the items.\n * @slot - Carousel items. Use `<li>` elements inside this slot.\n */\n@Component({\n  tag: \"z-carousel\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZCarousel {\n  @Element() host: HTMLZCarouselElement;\n\n  /** The z-carousel is on loading state */\n  @Prop()\n  isLoading: boolean;\n\n  /** The z-carousel title */\n  @Prop()\n  label?: string;\n\n  /** Shows only one content at a time */\n  @Prop({reflect: true})\n  single = false;\n\n  /** Arrow buttons position */\n  @Prop({reflect: true})\n  arrowsPosition?: CarouselArrowsPosition;\n\n  /** Progress indicator type. Only available for `single` mode */\n  @Prop()\n  progressMode?: CarouselProgressMode;\n\n  /**\n   * Whether the navigation arrow buttons over the items are always visible or only on mouse hover.\n   * If set to `false`, the arrows will not be visible on mobile.\n   * Only meaningful with `arrowsPosition` set to `OVER`.\n   */\n  @Prop({reflect: true})\n  fixedArrows = true;\n\n  /** The height of the ghost loader (only visible when `isLoading` is set to `true`) */\n  @Prop()\n  ghostLoadingHeight = 100;\n\n  /** When enabled, navigating next the last item will go back to the first item and vice versa. */\n  @Prop()\n  infinite = false;\n\n  /** Current item index for single mode. */\n  @State()\n  current = 0;\n\n  /** Items on the slider. */\n  @State()\n  items: HTMLLIElement[];\n\n  /** Index of the indicator to highlight. */\n  @State()\n  highlightedIndicator: number;\n\n  @State()\n  canNavigatePrev: boolean;\n\n  @State()\n  canNavigateNext: boolean;\n\n  /** Reference for the items container element. */\n  protected itemsContainer: HTMLUListElement;\n\n  /** Observer that handles current index change when scrolling on single mode. */\n  private intersectionObserver: IntersectionObserver;\n\n  /** Observer to check if navigation can still be enabled/showed when the size of the items' container changes */\n  private resizeObserver: ResizeObserver;\n\n  /** Flag indicating the items container is about to scroll programmatically towards the stored index. */\n  private scrollingTo: number = null;\n\n  /** Emitted on index change and only in `single` mode. */\n  @Event()\n  indexChange: EventEmitter<{currentItem: number}>;\n\n  @Watch(\"current\")\n  onIndexChange(): void {\n    this.indexChange.emit({currentItem: this.current});\n  }\n\n  @Watch(\"single\")\n  onSingleModeChange(): void {\n    if (this.single && !this.intersectionObserver) {\n      this.setIntersectionObserver();\n    }\n  }\n\n  @Watch(\"infinite\")\n  onInfiniteModeChange(): void {\n    this.checkNavigationValidity();\n  }\n\n  /**\n   * Set an intersection observer to:\n   * - highlight the indicator of the intersecting item during scroll\n   * - set the current item to the last intersecting item\n   */\n  private setIntersectionObserver(): void {\n    this.intersectionObserver = new IntersectionObserver(\n      (entries) => {\n        const entry = entries.find(({isIntersecting}) => isIntersecting);\n        if (!entry) {\n          return;\n        }\n\n        const entryIndex = this.items.findIndex((item) => item === entry.target);\n        this.highlightedIndicator = entryIndex;\n\n        /* skip setting the current item if intersection has been triggered by a programmatic scroll\n        (@see `goTo` function) and the final index has not been reached */\n        if (this.scrollingTo !== null && entryIndex !== this.scrollingTo) {\n          return;\n        }\n\n        this.scrollingTo = null;\n        this.current = entryIndex;\n      },\n      {\n        root: this.itemsContainer,\n        threshold: 0.5,\n      }\n    );\n\n    this.items.forEach((element) => this.intersectionObserver.observe(element));\n  }\n\n  /** Update items' list and check conditions to allow navigation */\n  private onSlotChange(): void {\n    this.items = Array.from(this.host.children) as HTMLLIElement[];\n    this.checkNavigationValidity();\n    this.setIntersectionObserver();\n    this.goTo(this.current);\n  }\n\n  private onPrev(): void {\n    if (this.single) {\n      this.goTo(this.infinite && this.current - 1 < 0 ? this.items.length - 1 : Math.max(0, this.current - 1));\n\n      return;\n    }\n\n    this.itemsContainer.scrollBy({\n      left:\n        this.infinite && this.itemsContainer.scrollLeft == 0\n          ? this.itemsContainer.scrollWidth - this.itemsContainer.clientWidth\n          : -this.itemsContainer.clientWidth / 2,\n      behavior: \"smooth\",\n    });\n  }\n\n  private onNext(): void {\n    if (this.single) {\n      const next =\n        this.infinite && this.current + 1 > this.items.length - 1\n          ? 0\n          : Math.min(this.current + 1, this.items.length - 1);\n\n      return this.goTo(next);\n    }\n\n    this.itemsContainer.scrollBy({\n      left:\n        this.infinite &&\n        this.itemsContainer.scrollLeft == this.itemsContainer.scrollWidth - this.itemsContainer.clientWidth\n          ? -this.itemsContainer.scrollWidth\n          : this.itemsContainer.clientWidth / 2,\n      behavior: \"smooth\",\n    });\n  }\n\n  /**\n   * Check if navigation buttons can be enabled and set the related local states.\n   */\n  private checkNavigationValidity(): void {\n    if (this.single) {\n      this.canNavigatePrev = this.current > 0;\n      this.canNavigateNext = this.current < this.items.length - 1;\n\n      return;\n    }\n\n    this.canNavigatePrev = this.itemsContainer.scrollLeft > 0;\n    this.canNavigateNext =\n      this.itemsContainer.scrollLeft < this.itemsContainer.scrollWidth - this.itemsContainer.clientWidth;\n  }\n\n  /**\n   * Check if footer has to be rendered.\n   */\n  private canShowFooter(): boolean {\n    if (!this.canNavigatePrev && !this.canNavigateNext) {\n      return false;\n    }\n\n    return (\n      this.arrowsPosition === CarouselArrowsPosition.BOTTOM ||\n      this.progressMode === CarouselProgressMode.DOTS ||\n      this.progressMode === CarouselProgressMode.NUMBERS\n    );\n  }\n\n  /**\n   * Set current item to passed index.\n   * @param index Index to set\n   */\n  private goTo(index: number): void {\n    if (this.current === index) {\n      return;\n    }\n\n    this.scrollingTo = index;\n    const left = this.items.slice(0, index).reduce((acc, item) => (acc += item.clientWidth), 0);\n    // the scroll will trigger the IntersectionObserver and set the current item\n    this.itemsContainer.scroll({\n      left,\n      behavior: \"smooth\",\n    });\n  }\n\n  /** Check if navigation of at least one direction is enabled */\n  private get canNavigate(): boolean {\n    return this.canNavigatePrev || this.canNavigateNext;\n  }\n\n  private setupItems(): void {\n    this.items = Array.from(this.host.children) as HTMLLIElement[];\n    this.items.forEach((item) => {\n      item.setAttribute(\"aria-roledescription\", \"slide\");\n    });\n  }\n\n  componentDidLoad(): void {\n    this.itemsContainer?.addEventListener(\"scroll\", this.checkNavigationValidity.bind(this), {passive: true});\n    this.resizeObserver = new ResizeObserver(this.checkNavigationValidity.bind(this));\n    this.resizeObserver?.observe(this.itemsContainer);\n    this.setupItems();\n    if (this.single) {\n      this.setIntersectionObserver();\n    }\n    this.checkNavigationValidity();\n  }\n\n  disconnectedCallback(): void {\n    this.resizeObserver?.disconnect();\n  }\n\n  render(): HTMLDivElement | HTMLZCarouselElement {\n    if (this.isLoading) {\n      return (\n        <div class=\"z-carousel-container\">\n          {this.label && <div class=\"heading-3-sb z-carousel-title\">{this.label}</div>}\n          <div style={{height: `${this.ghostLoadingHeight}px`}}>\n            <z-ghost-loading></z-ghost-loading>\n          </div>\n        </div>\n      );\n    }\n\n    return (\n      <Host>\n        <div\n          class=\"z-carousel-container\"\n          aria-roledescription=\"carousel\"\n          aria-label={this.label || \"Carousel\"}\n        >\n          {this.label && <div class=\"z-carousel-title heading-3-sb\">{this.label}</div>}\n          <div class=\"z-carousel-wrapper\">\n            <z-button\n              class=\"z-carousel-navigation-arrow\"\n              variant={ButtonVariant.SECONDARY}\n              data-direction=\"prev\"\n              icon=\"arrow-left\"\n              onClick={this.onPrev.bind(this)}\n              disabled={!this.infinite && !this.canNavigatePrev}\n              hidden={this.arrowsPosition !== CarouselArrowsPosition.OVER || !this.canNavigate}\n              ariaLabel={this.single ? \"Mostra l'elemento precedente\" : \"Mostra gli elementi precedenti\"}\n            />\n            <ul\n              class=\"z-carousel-items-container\"\n              aria-atomic=\"false\"\n              aria-live=\"polite\"\n              ref={(el) => (this.itemsContainer = el)}\n            >\n              <slot onSlotchange={this.onSlotChange.bind(this)} />\n            </ul>\n            <z-button\n              class=\"z-carousel-navigation-arrow\"\n              variant={ButtonVariant.SECONDARY}\n              data-direction=\"next\"\n              icon=\"arrow-right\"\n              onClick={this.onNext.bind(this)}\n              disabled={!this.infinite && !this.canNavigateNext}\n              hidden={this.arrowsPosition !== CarouselArrowsPosition.OVER || !this.canNavigate}\n              ariaLabel={this.single ? \"Mostra l'elemento successivo\" : \"Mostra gli elementi successivi\"}\n            />\n          </div>\n        </div>\n\n        {this.canShowFooter() && (\n          <div class=\"z-carousel-footer\">\n            {this.arrowsPosition === CarouselArrowsPosition.BOTTOM && (\n              <z-button\n                class=\"z-carousel-navigation-arrow\"\n                variant={ButtonVariant.TERTIARY}\n                icon=\"arrow-left\"\n                onClick={this.onPrev.bind(this)}\n                disabled={!this.infinite && !this.canNavigatePrev}\n                ariaLabel={this.single ? \"Mostra l'elemento precedente\" : \"Mostra gli elementi precedenti\"}\n              />\n            )}\n            {this.progressMode === CarouselProgressMode.DOTS && this.single && this.items && (\n              <div class=\"dots-progress\">\n                {this.items.map((_, index) => (\n                  <button\n                    type=\"button\"\n                    class={{current: this.highlightedIndicator === index}}\n                    aria-label={\n                      this.highlightedIndicator === index ? \"Elemento corrente\" : `Spostati all'elemento ${index + 1}`\n                    }\n                    onClick={() => this.goTo(index)}\n                  />\n                ))}\n              </div>\n            )}\n            {this.progressMode === CarouselProgressMode.NUMBERS && this.single && this.items && (\n              <div class=\"numbers-progress interactive-1\">\n                <span class=\"current\">{this.current + 1}</span>\n                <span>di</span>\n                <span>{this.items.length}</span>\n              </div>\n            )}\n            {this.arrowsPosition === CarouselArrowsPosition.BOTTOM && (\n              <z-button\n                class=\"z-carousel-navigation-arrow\"\n                variant={ButtonVariant.TERTIARY}\n                icon=\"arrow-right\"\n                onClick={this.onNext.bind(this)}\n                disabled={!this.infinite && !this.canNavigateNext}\n                ariaLabel={this.single ? \"Mostra l'elemento successivo\" : \"Mostra gli elementi successivi\"}\n              />\n            )}\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/z-chip.js

@@ -1 +1,8 @@
-import{Z as o,d as s}from"./index19.js";const r=o,t=s;export{r as ZChip,t as defineCustomElement}
+import { Z as ZChip$1, d as defineCustomElement$1 } from './index6.js';
+
+const ZChip = ZChip$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { ZChip, defineCustomElement };
+
+//# sourceMappingURL=z-chip.js.map

package/dist/components/z-chip.js.map

@@ -0,0 +1 @@
+{"file":"z-chip.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/z-color-picker.js

@@ -1 +1,234 @@
-import{proxyCustomElement as t,HTMLElement as r,createEvent as e,h as o,Host as a,transformTag as s}from"@stencil/core/internal/client";import{a0 as i}from"./index2.js";import{a as l}from"./utils.js";const c={it:{"Select a color":"Seleziona un colore","Color swatch":"Campione di colore"},en:{"Select a color":"Select a color","Color swatch":"Color swatch"}},n=t(class extends r{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.colorSelected=e(this,"colorSelected",7),this.lng="it",this.disableTransparent=!1,this.colorKeysByRow=[],this._colorButtons=[]}get colorButtons(){return this._colorButtons.length||(this._colorButtons=Array.from(this.host.shadowRoot.querySelectorAll("button"))),this._colorButtons}sortColorKeysByRow(){const t=Object.keys(i),r=[];for(let e=0;e<5;e++)for(let o=0;o<9;o++){const a=5*o+e;a<t.length&&r.push(t[a])}return r}moveFocusTo(t){this.colorButtons.forEach(((r,e)=>r.tabIndex=e===t?0:-1)),this.colorButtons[t].focus()}validateTransparentSelection(){this.disableTransparent&&"#FFFFFF00"===this.selectedColor&&(this.selectedColor="#333333")}emitColorSelected(){this.colorSelected.emit(this.selectedColor)}async setFocus(){this.colorButtons.forEach((t=>t.tabIndex=-1));const t=this.colorButtons.find((t=>"true"===t.ariaSelected))||this.colorButtons.find((t=>!t.disabled));t&&(t.tabIndex=0,setTimeout((()=>{t.focus()}),50),this.host.tabIndex=-1)}getNextIndexByKey(t,r,e){const o=Math.floor(t/9),a=t%9;let s=t;switch(r){case"ArrowRight":{const t=a+1;s=9*(t>=9?(o+1)%5:o)+t%9,s>=e&&(s=0);break}case"ArrowLeft":{const t=a-1;s=9*(t<0?(o-1+5)%5:o)+(t+9)%9,s>=e&&(s=e-1);break}case"ArrowDown":{let t=o+1,r=a;t>=5&&(t=0,r=(a+1)%9),s=9*t+r,s>=e&&(s=0);break}case"ArrowUp":{let t=o-1,r=a;t<0&&(t=4,r=(a-1+9)%9),s=9*t+r,s>=e&&(s=e-1);break}}return s}handleKeyDown(t){var r,e;const o=t.composedPath()[0];if(!o.dataset.color)return;const a=this.colorButtons.indexOf(o),s=this.colorButtons.length;if(a<0||!["ArrowRight","ArrowLeft","ArrowDown","ArrowUp"].includes(t.key))return;let i=a,l=0;do{i=this.getNextIndexByKey(i,t.key,s),l++}while(l<s&&(null===(r=this.colorButtons[i])||void 0===r?void 0:r.disabled));i!==a&&i>=0&&i<s&&!(null===(e=this.colorButtons[i])||void 0===e?void 0:e.disabled)&&(this.moveFocusTo(i),t.preventDefault(),t.stopPropagation())}handleBlur(t){l(this.host,t.relatedTarget)||(this.host.tabIndex=0,this.colorButtons.forEach((t=>t.tabIndex=-1)))}componentWillLoad(){this.colorKeysByRow=this.sortColorKeysByRow()}render(){return o(a,{key:"c834820884acc8c3bdf4571379cbe6da74e7ea89",role:"listbox","aria-label":this.htmlAriaLabel||c[this.lng]["Select a color"],tabIndex:0},this.colorKeysByRow.map((t=>{var r;return o("button",{class:"color-swatch","data-color":t,role:"option","aria-selected":(null===(r=this.selectedColor)||void 0===r?void 0:r.toUpperCase())===t.toUpperCase()?"true":"false",tabIndex:-1,onClick:()=>this.selectedColor=t,disabled:this.disableTransparent&&"#FFFFFF00"===t},o("div",{class:"color-swatch",role:"img","aria-roledescription":c[this.lng]["Color swatch"],"aria-label":i[t][this.lng],title:i[t][this.lng],style:{backgroundColor:t}}))})))}get host(){return this}static get watchers(){return{disableTransparent:[{validateTransparentSelection:0}],selectedColor:[{validateTransparentSelection:0},{emitColorSelected:0}]}}static get style(){return':host{display:grid;width:fit-content;padding:calc(var(--space-unit) * 2);background:var(--color-surface01);gap:var(--space-unit);grid-template-columns:repeat(9, calc(var(--space-unit) * 3));grid-template-rows:repeat(5, calc(var(--space-unit) * 3))}:host,*{box-sizing:border-box}button{--border-color:var(--color-surface05);padding:0;border:none;appearance:none;background:none;border-radius:var(--border-radius);cursor:pointer}button[data-color="#FFFFFF00"]{position:relative}button[data-color="#FFFFFF00"]::after{position:absolute;top:0;right:0;width:100%;height:100%;background:linear-gradient(     -45deg,     transparent 48%,     var(--border-color) 48%,     var(--border-color) 52%,     transparent 52%   );border-radius:var(--border-radius);content:""}button[aria-selected="true"]{box-shadow:0 0 0 1px var(--color-white),     0 0 0 3px var(--color-active-primary)}button:focus-visible{box-shadow:var(--shadow-focus-primary)}button .color-swatch{width:calc(var(--space-unit) * 3);height:calc(var(--space-unit) * 3);border:var(--border-size-small) solid var(--border-color);border-radius:var(--border-radius)}button[data-color="#FFFFFF00"]:disabled{--border-color:var(--color-disabled01-icon);cursor:not-allowed}button[data-color="#FFFFFF00"]:disabled .color-swatch{background-color:var(--color-disabled02)}'}},[1,"z-color-picker",{selectedColor:[1025,"selected-color"],lng:[1],htmlAriaLabel:[1,"html-aria-label"],disableTransparent:[4,"disable-transparent"],setFocus:[64]},[[0,"focus","setFocus"],[0,"keydown","handleKeyDown"],[0,"blur","handleBlur"]],{disableTransparent:[{validateTransparentSelection:0}],selectedColor:[{validateTransparentSelection:0},{emitColorSelected:0}]}]),d=n,h=function(){"undefined"!=typeof customElements&&["z-color-picker"].forEach((t=>{"z-color-picker"===t&&(customElements.get(s(t))||customElements.define(s(t),n))}))};export{d as ZColorPicker,h as defineCustomElement}
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { a0 as ColorPickerPalette } from './index2.js';
+import { a as containsElement } from './utils.js';
+
+const stylesCss = ":host{display:grid;width:fit-content;padding:calc(var(--space-unit) * 2);background:var(--color-surface01);gap:var(--space-unit);grid-template-columns:repeat(9, calc(var(--space-unit) * 3));grid-template-rows:repeat(5, calc(var(--space-unit) * 3))}:host,*{box-sizing:border-box}button{--border-color:var(--color-surface05);padding:0;border:none;appearance:none;background:none;border-radius:var(--border-radius);cursor:pointer}button[data-color=\"#FFFFFF00\"]{position:relative}button[data-color=\"#FFFFFF00\"]::after{position:absolute;top:0;right:0;width:100%;height:100%;background:linear-gradient(\n    -45deg,\n    transparent 48%,\n    var(--border-color) 48%,\n    var(--border-color) 52%,\n    transparent 52%\n  );border-radius:var(--border-radius);content:\"\"}button[aria-selected=\"true\"]{box-shadow:0 0 0 1px var(--color-white),\n    0 0 0 3px var(--color-active-primary)}button:focus-visible{box-shadow:var(--shadow-focus-primary)}button .color-swatch{width:calc(var(--space-unit) * 3);height:calc(var(--space-unit) * 3);border:var(--border-size-small) solid var(--border-color);border-radius:var(--border-radius)}button[data-color=\"#FFFFFF00\"]:disabled{--border-color:var(--color-disabled01-icon);cursor:not-allowed}button[data-color=\"#FFFFFF00\"]:disabled .color-swatch{background-color:var(--color-disabled02)}";
+const ZColorPickerStyle0 = stylesCss;
+
+const LOCALES = {
+    it: {
+        "Select a color": "Seleziona un colore",
+        "Color swatch": "Campione di colore",
+    },
+    en: {
+        "Select a color": "Select a color",
+        "Color swatch": "Color swatch",
+    },
+};
+/** Number of colors in each group (column) of the grid. */
+const COLOR_GROUP_SIZE = 5;
+/** Number of color groups (columns) in the grid. */
+const COLOR_GROUPS = 9;
+const ZColorPicker$1 = /*@__PURE__*/ proxyCustomElement(class ZColorPicker extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.colorSelected = createEvent(this, "colorSelected", 7);
+        /**
+         * The color keys arranged in row-major order for rendering and navigation.
+         */
+        this.colorKeysByRow = [];
+        this._colorButtons = [];
+        this.selectedColor = undefined;
+        this.lng = "it";
+        this.htmlAriaLabel = undefined;
+        this.disableTransparent = false;
+    }
+    get colorButtons() {
+        if (!this._colorButtons.length) {
+            this._colorButtons = Array.from(this.host.shadowRoot.querySelectorAll("button"));
+        }
+        return this._colorButtons;
+    }
+    /**
+     * Reorders color keys from column-major (the format of the `ColorPickerPalette` object) to row-major (visual/navigation order).
+     * This ensures button indices in the DOM match their visual position in the grid.
+     */
+    sortColorKeysByRow() {
+        const allKeys = Object.keys(ColorPickerPalette);
+        const ordered = [];
+        // Iterate through visual positions (row by row, left to right)
+        for (let row = 0; row < COLOR_GROUP_SIZE; row++) {
+            for (let col = 0; col < COLOR_GROUPS; col++) {
+                const columnMajorIndex = col * COLOR_GROUP_SIZE + row;
+                if (columnMajorIndex < allKeys.length) {
+                    ordered.push(allKeys[columnMajorIndex]);
+                }
+            }
+        }
+        return ordered;
+    }
+    /** Move focus to the specified color button by index. */
+    moveFocusTo(index) {
+        // Reset tabindex of other buttons and set tabindex to 0 on selected button
+        this.colorButtons.forEach((btn, i) => (btn.tabIndex = i === index ? 0 : -1));
+        this.colorButtons[index].focus();
+    }
+    validateTransparentSelection() {
+        if (this.disableTransparent && this.selectedColor === "#FFFFFF00") {
+            this.selectedColor = "#333333"; // Default to dark gray 2 if transparent is disabled and currently selected
+        }
+    }
+    emitColorSelected() {
+        this.colorSelected.emit(this.selectedColor);
+    }
+    /**
+     * Focuses the selected or first enabled color button and makes the container non-tabbable.
+     */
+    async setFocus() {
+        // Reset tabindex of all buttons
+        this.colorButtons.forEach((btn) => (btn.tabIndex = -1));
+        const firstSelectedOrEnabled = this.colorButtons.find((btn) => btn.ariaSelected === "true") || this.colorButtons.find((btn) => !btn.disabled);
+        if (!firstSelectedOrEnabled) {
+            return;
+        }
+        firstSelectedOrEnabled.tabIndex = 0;
+        setTimeout(() => {
+            firstSelectedOrEnabled.focus();
+        }, 50);
+        // Set container as non-tabbable
+        this.host.tabIndex = -1;
+    }
+    /**
+     * Compute next index in row-major grid according to keyboard direction.
+     */
+    getNextIndexByKey(currentIndex, key, totalColors) {
+        const row = Math.floor(currentIndex / COLOR_GROUPS);
+        const col = currentIndex % COLOR_GROUPS;
+        let newIndex = currentIndex;
+        switch (key) {
+            case "ArrowRight": {
+                const newCol = col + 1;
+                const newRow = newCol >= COLOR_GROUPS ? (row + 1) % COLOR_GROUP_SIZE : row;
+                newIndex = newRow * COLOR_GROUPS + (newCol % COLOR_GROUPS);
+                if (newIndex >= totalColors) {
+                    newIndex = 0; // Wrap to first item
+                }
+                break;
+            }
+            case "ArrowLeft": {
+                const newCol = col - 1;
+                const newRow = newCol < 0 ? (row - 1 + COLOR_GROUP_SIZE) % COLOR_GROUP_SIZE : row;
+                newIndex = newRow * COLOR_GROUPS + ((newCol + COLOR_GROUPS) % COLOR_GROUPS);
+                if (newIndex >= totalColors) {
+                    newIndex = totalColors - 1; // Wrap to last item
+                }
+                break;
+            }
+            case "ArrowDown": {
+                let newRow = row + 1;
+                let newCol = col;
+                if (newRow >= COLOR_GROUP_SIZE) {
+                    // Wrap to first item of next column
+                    newRow = 0;
+                    newCol = (col + 1) % COLOR_GROUPS;
+                }
+                newIndex = newRow * COLOR_GROUPS + newCol;
+                if (newIndex >= totalColors) {
+                    newIndex = 0; // Wrap to first item
+                }
+                break;
+            }
+            case "ArrowUp": {
+                let newRow = row - 1;
+                let newCol = col;
+                if (newRow < 0) {
+                    // Wrap to last item of previous column
+                    newRow = COLOR_GROUP_SIZE - 1;
+                    newCol = (col - 1 + COLOR_GROUPS) % COLOR_GROUPS;
+                }
+                newIndex = newRow * COLOR_GROUPS + newCol;
+                if (newIndex >= totalColors) {
+                    newIndex = totalColors - 1; // Wrap to last item
+                }
+                break;
+            }
+        }
+        return newIndex;
+    }
+    /**
+     * Handle keyboard navigation within the color picker.
+     * Arrow keys move focus in the expected direction, wrapping around edges. The grid is navigated in row-major order.
+     */
+    handleKeyDown(event) {
+        var _a, _b;
+        const target = event.composedPath()[0];
+        if (!target.dataset.color) {
+            return;
+        }
+        const currentIndex = this.colorButtons.indexOf(target);
+        const totalColors = this.colorButtons.length;
+        if (currentIndex < 0 || !["ArrowRight", "ArrowLeft", "ArrowDown", "ArrowUp"].includes(event.key)) {
+            return;
+        }
+        let newIndex = currentIndex;
+        let attempts = 0;
+        do {
+            newIndex = this.getNextIndexByKey(newIndex, event.key, totalColors);
+            attempts++;
+        } while (attempts < totalColors && ((_a = this.colorButtons[newIndex]) === null || _a === void 0 ? void 0 : _a.disabled));
+        if (newIndex !== currentIndex &&
+            newIndex >= 0 &&
+            newIndex < totalColors &&
+            !((_b = this.colorButtons[newIndex]) === null || _b === void 0 ? void 0 : _b.disabled)) {
+            this.moveFocusTo(newIndex);
+            event.preventDefault();
+            event.stopPropagation();
+        }
+    }
+    /**
+     * When focus leaves the color picker (e.g. user tabs away), reset all buttons to non-tabbable and make the container tabbable again.
+     */
+    handleBlur(event) {
+        const relatedTarget = event.relatedTarget;
+        if (!containsElement(this.host, relatedTarget)) {
+            this.host.tabIndex = 0;
+            this.colorButtons.forEach((btn) => (btn.tabIndex = -1));
+        }
+    }
+    componentWillLoad() {
+        this.colorKeysByRow = this.sortColorKeysByRow();
+    }
+    render() {
+        return (h(Host, { key: '24f0e76aecda9731ed826e8228f49ca5e08a14a5', role: "listbox", "aria-label": this.htmlAriaLabel || LOCALES[this.lng]["Select a color"], tabIndex: 0 }, this.colorKeysByRow.map((colorKey) => {
+            var _a;
+            return (h("button", { class: "color-swatch", "data-color": colorKey, role: "option", "aria-selected": ((_a = this.selectedColor) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === colorKey.toUpperCase() ? "true" : "false", tabIndex: -1, onClick: () => (this.selectedColor = colorKey), disabled: this.disableTransparent && colorKey === "#FFFFFF00" }, h("div", { class: "color-swatch", role: "img", "aria-roledescription": LOCALES[this.lng]["Color swatch"], "aria-label": ColorPickerPalette[colorKey][this.lng], title: ColorPickerPalette[colorKey][this.lng], style: { backgroundColor: colorKey } })));
+        })));
+    }
+    get host() { return this; }
+    static get watchers() { return {
+        "disableTransparent": ["validateTransparentSelection"],
+        "selectedColor": ["validateTransparentSelection", "emitColorSelected"]
+    }; }
+    static get style() { return ZColorPickerStyle0; }
+}, [1, "z-color-picker", {
+        "selectedColor": [1025, "selected-color"],
+        "lng": [1],
+        "htmlAriaLabel": [1, "html-aria-label"],
+        "disableTransparent": [4, "disable-transparent"],
+        "setFocus": [64]
+    }, [[0, "focus", "setFocus"], [0, "keydown", "handleKeyDown"], [0, "blur", "handleBlur"]], {
+        "disableTransparent": ["validateTransparentSelection"],
+        "selectedColor": ["validateTransparentSelection", "emitColorSelected"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["z-color-picker"];
+    components.forEach(tagName => { switch (tagName) {
+        case "z-color-picker":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ZColorPicker$1);
+            }
+            break;
+    } });
+}
+
+const ZColorPicker = ZColorPicker$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { ZColorPicker, defineCustomElement };
+
+//# sourceMappingURL=z-color-picker.js.map