@proximus/lavender-carousel 2.0.0-alpha.203 → 2.0.0-alpha.204

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/Carousel.d.ts +2 -2
  2. package/dist/custom-elements.json +6 -10
  3. package/dist/index.es.js +198 -169
  4. package/dist/web-types.json +2 -8
  5. package/package.json +1 -1
package/dist/Carousel.d.ts CHANGED
@@ -6,7 +6,7 @@ import { type AppleSeed } from './AppleSeed.ts';
6
6
  export declare const CAROUSEL_ITEM_CONNECTED_EVENT = "px-carousel-item-connected";
7
7
  export declare class Carousel extends HTMLElement {
8
8
  #private;
9
- template: string;
9
+ protected static readonly template: HTMLTemplateElement;
10
10
  constructor();
11
11
  connectedCallback(): void;
12
12
  private onScroll;
@@ -22,7 +22,7 @@ export declare class Carousel extends HTMLElement {
22
22
  get itemNumbers(): number;
23
23
  }
24
24
  export declare class CarouselItem extends HTMLElement {
25
- template: string;
25
+ protected static readonly template: HTMLTemplateElement;
26
26
  constructor();
27
27
  connectedCallback(): void;
28
28
  }
package/dist/custom-elements.json CHANGED
@@ -115,7 +115,9 @@
115
115
  {
116
116
  "kind": "field",
117
117
  "name": "template",
118
- "default": "`<px-vstack gap=\"default\"> <div class=\"carousel\"> <slot></slot> </div> <px-hstack id=\"appleseed-container\" justify-content=\"space-between\" justify-content--mobile=\"center\" > <px-appleseed active=\"0\"></px-appleseed> <px-hstack id=\"button-icons\" gap=\"default\"> <px-button-icon disabled id=\"previous\" aria-hidden=\"true\"> <px-icon name=\"chevron_left\" from=\"lavender\"></px-icon> </px-button-icon> <px-button-icon id=\"next\" aria-hidden=\"true\"> <px-icon name=\"chevron_right\" from=\"lavender\"></px-icon> </px-button-icon> </px-hstack> </px-hstack> </px-vstack>`"
118
+ "privacy": "protected",
119
+ "static": true,
120
+ "readonly": true
119
121
  },
120
122
  {
121
123
  "kind": "method",
@@ -176,10 +178,6 @@
176
178
  "name": "itemNumbers",
177
179
  "readonly": true
178
180
  },
179
- {
180
- "kind": "field",
181
- "name": "innerHTML"
182
- },
183
181
  {
184
182
  "kind": "field",
185
183
  "name": "adoptedStyleSheets",
@@ -203,11 +201,9 @@
203
201
  {
204
202
  "kind": "field",
205
203
  "name": "template",
206
- "default": "` <div class=\"carousel-item\"> <slot></slot> </div>`"
207
- },
208
- {
209
- "kind": "field",
210
- "name": "innerHTML"
204
+ "privacy": "protected",
205
+ "static": true,
206
+ "readonly": true
211
207
  },
212
208
  {
213
209
  "kind": "field",
package/dist/index.es.js CHANGED
@@ -1,15 +1,17 @@
1
- import { AttributeBreakpointHandlerDelegate as e, PxElement as t, WithExtraAttributes as n, accessibilityAttributes as r, backgroundColorValues as i, booleanPropertyToAttributeSetter as a, checkName as o, gapValues as s, iconSizeValuesKC as c, log as l, propertyToAttributeSetter as u } from "@proximus/lavender-common";
1
+ import { AttributeBreakpointHandlerDelegate as e, PxElement as t, WithExtraAttributes as n, accessibilityAttributes as r, backgroundColorValues as i, booleanPropertyToAttributeSetter as a, checkName as o, createTemplate as s, gapValues as c, iconSizeValuesKC as l, log as u, propertyToAttributeSetter as d, renderTemplate as f } from "@proximus/lavender-common";
2
2
  //#region src/carousel.css?inline
3
- var d = ":host{display:block}:host *{box-sizing:border-box}:host{--px-carousel-visible-items:1;--px-carousel-gap-default:var(--px-spacing-default-desktop)}:host([visible-items=\"1\"]){--px-carousel-visible-items:1}:host([visible-items=\"2\"]){--px-carousel-visible-items:2}:host([visible-items=\"3\"]){--px-carousel-visible-items:3}:host([visible-items=\"4\"]){--px-carousel-visible-items:4}:host([visible-items=\"5\"]){--px-carousel-visible-items:5}:host([visible-items=\"6\"]){--px-carousel-visible-items:6}:host([visible-items=\"7\"]){--px-carousel-visible-items:7}:host([visible-items=\"8\"]){--px-carousel-visible-items:8}:host([visible-items=\"9\"]){--px-carousel-visible-items:9}:host([visible-items--mobile=\"1\"]){--px-carousel-visible-items--mobile:1}:host([visible-items--mobile=\"2\"]){--px-carousel-visible-items--mobile:2}:host([visible-items--mobile=\"3\"]){--px-carousel-visible-items--mobile:3}:host([visible-items--mobile=\"4\"]){--px-carousel-visible-items--mobile:4}:host([visible-items--mobile=\"5\"]){--px-carousel-visible-items--mobile:5}:host([visible-items--mobile=\"6\"]){--px-carousel-visible-items--mobile:6}:host([visible-items--mobile=\"7\"]){--px-carousel-visible-items--mobile:7}:host([visible-items--mobile=\"8\"]){--px-carousel-visible-items--mobile:8}:host([visible-items--mobile=\"9\"]){--px-carousel-visible-items--mobile:9}:host([visible-items--tablet=\"1\"]){--px-carousel-visible-items--tablet:1}:host([visible-items--tablet=\"2\"]){--px-carousel-visible-items--tablet:2}:host([visible-items--tablet=\"3\"]){--px-carousel-visible-items--tablet:3}:host([visible-items--tablet=\"4\"]){--px-carousel-visible-items--tablet:4}:host([visible-items--tablet=\"5\"]){--px-carousel-visible-items--tablet:5}:host([visible-items--tablet=\"6\"]){--px-carousel-visible-items--tablet:6}:host([visible-items--tablet=\"7\"]){--px-carousel-visible-items--tablet:7}:host([visible-items--tablet=\"8\"]){--px-carousel-visible-items--tablet:8}:host([visible-items--tablet=\"9\"]){--px-carousel-visible-items--tablet:9}:host([visible-items--laptop=\"1\"]){--px-carousel-visible-items--laptop:1}:host([visible-items--laptop=\"2\"]){--px-carousel-visible-items--laptop:2}:host([visible-items--laptop=\"3\"]){--px-carousel-visible-items--laptop:3}:host([visible-items--laptop=\"4\"]){--px-carousel-visible-items--laptop:4}:host([visible-items--laptop=\"5\"]){--px-carousel-visible-items--laptop:5}:host([visible-items--laptop=\"6\"]){--px-carousel-visible-items--laptop:6}:host([visible-items--laptop=\"7\"]){--px-carousel-visible-items--laptop:7}:host([visible-items--laptop=\"8\"]){--px-carousel-visible-items--laptop:8}:host([visible-items--laptop=\"9\"]){--px-carousel-visible-items--laptop:9}:host([visible-items--desktop=\"1\"]){--px-carousel-visible-items--desktop:1}:host([visible-items--desktop=\"2\"]){--px-carousel-visible-items--desktop:2}:host([visible-items--desktop=\"3\"]){--px-carousel-visible-items--desktop:3}:host([visible-items--desktop=\"4\"]){--px-carousel-visible-items--desktop:4}:host([visible-items--desktop=\"5\"]){--px-carousel-visible-items--desktop:5}:host([visible-items--desktop=\"6\"]){--px-carousel-visible-items--desktop:6}:host([visible-items--desktop=\"7\"]){--px-carousel-visible-items--desktop:7}:host([visible-items--desktop=\"8\"]){--px-carousel-visible-items--desktop:8}:host([visible-items--desktop=\"9\"]){--px-carousel-visible-items--desktop:9}:host([gap=default]){--px-carousel-gap-default:var(--px-spacing-default-desktop)}:host([gap=s]){--px-carousel-gap-default:var(--px-spacing-s-desktop)}:host([gap=xs]){--px-carousel-gap-default:var(--px-spacing-xs-desktop)}:host([gap=\"2xs\"]){--px-carousel-gap-default:var(--px-spacing-2xs-desktop)}:host([gap=l]){--px-carousel-gap-default:var(--px-spacing-l-desktop)}:host([gap=none]){--px-carousel-gap-default:0}:host([gap--mobile=default]){--px-carousel-gap-default--mobile:var(--px-spacing-default-mobile)}:host([gap--mobile=s]){--px-carousel-gap-default--mobile:var(--px-spacing-s-mobile)}:host([gap--mobile=xs]){--px-carousel-gap-default--mobile:var(--px-spacing-xs-mobile)}:host([gap--mobile=\"2xs\"]){--px-carousel-gap-default--mobile:var(--px-spacing-2xs-mobile)}:host([gap--mobile=l]){--px-carousel-gap-default--mobile:var(--px-spacing-l-mobile)}:host([gap--mobile=none]){--px-carousel-gap-default--mobile:0}:host([gap--tablet=default]){--px-carousel-gap-default--tablet:var(--px-spacing-default-tablet)}:host([gap--tablet=s]){--px-carousel-gap-default--tablet:var(--px-spacing-s-tablet)}:host([gap--tablet=xs]){--px-carousel-gap-default--tablet:var(--px-spacing-xs-tablet)}:host([gap--tablet=\"2xs\"]){--px-carousel-gap-default--tablet:var(--px-spacing-2xs-tablet)}:host([gap--tablet=l]){--px-carousel-gap-default--tablet:var(--px-spacing-l-tablet)}:host([gap--tablet=none]){--px-carousel-gap-default--tablet:0}:host([gap--laptop=default]){--px-carousel-gap-default--laptop:var(--px-spacing-default-laptop)}:host([gap--laptop=s]){--px-carousel-gap-default--laptop:var(--px-spacing-s-laptop)}:host([gap--laptop=xs]){--px-carousel-gap-default--laptop:var(--px-spacing-xs-laptop)}:host([gap--laptop=\"2xs\"]){--px-carousel-gap-default--laptop:var(--px-spacing-2xs-laptop)}:host([gap--laptop=l]){--px-carousel-gap-default--laptop:var(--px-spacing-l-laptop)}:host([gap--laptop=none]){--px-carousel-gap-default--laptop:0}:host([gap--desktop=default]){--px-carousel-gap-default--desktop:var(--px-spacing-default-desktop)}:host([gap--desktop=s]){--px-carousel-gap-default--desktop:var(--px-spacing-s-desktop)}:host([gap--desktop=xs]){--px-carousel-gap-default--desktop:var(--px-spacing-xs-desktop)}:host([gap--desktop=\"2xs\"]){--px-carousel-gap-default--desktop:var(--px-spacing-2xs-desktop)}:host([gap--desktop=l]){--px-carousel-gap-default--desktop:var(--px-spacing-l-desktop)}:host([gap--desktop=none]){--px-carousel-gap-default--desktop:0}.carousel{scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;gap:var(--px-carousel-gap-default--desktop,var(--px-carousel-gap-default));display:flex;overflow:auto hidden}@media screen and (width<=48rem){.carousel{gap:var(--px-carousel-gap-default--mobile,var(--px-carousel-gap-default))}}@media screen and (width>=48.0625rem) and (width<=64rem){.carousel{gap:var(--px-carousel-gap-default--tablet,var(--px-carousel-gap-default))}}@media screen and (width>=64.0625rem) and (width<=90rem){.carousel{gap:var(--px-carousel-gap-default--laptop,var(--px-carousel-gap-default))}}#appleseed-container{margin-inline:var(--px-spacing-s-mobile)}@media screen and (width<=48rem){#button-icons{display:none}}.carousel::-webkit-scrollbar{display:none}", f = "::slotted(*){border-radius:var(--px-radius-main);height:100%}.carousel-item{height:100%}:host{scroll-snap-align:start;border-radius:var(--px-radius-main);--visible-items:var(--px-carousel-visible-items--desktop,var(--px-carousel-visible-items,1));--spacing:var(--px-carousel-gap-default--desktop,var(--px-carousel-gap-default,var(--px-spacing-s-desktop)));min-width:calc((100% - max(var(--visible-items), 2) * var(--spacing)) / var(--visible-items) - 64px / max(var(--visible-items), 2));background:#fff;justify-content:center;align-items:center;overflow:hidden}@media screen and (width<=48rem){:host{--visible-items:var(--px-carousel-visible-items--mobile,var(--px-carousel-visible-items,1));--spacing:var(--px-carousel-gap-default--mobile,var(--px-carousel-gap-default,var(--px-spacing-s-mobile)))}}@media screen and (width>=48.0625rem) and (width<=64rem){:host{--visible-items:var(--px-carousel-visible-items--tablet,var(--px-carousel-visible-items,1));--spacing:var(--px-carousel-gap-default--tablet,var(--px-carousel-gap-default,var(--px-spacing-s-desktop)))}}@media screen and (width>=64.0625rem) and (width<=90rem){:host{--visible-items:var(--px-carousel-visible-items--laptop,var(--px-carousel-visible-items,1));--spacing:var(--px-carousel-gap-default--laptop,var(--px-carousel-gap-default,var(--px-spacing-s-desktop)))}}@media screen and (width<=48rem){:host{scroll-snap-align:center;flex:1 0 var(--px-carousel-min-width-mobile,var(--px-carousel-min-width-all-mobile))!important}}@media screen and (width>=48rem) and (width<=64rem){:host{flex:1 0 var(--px-carousel-min-width-tablet,var(--px-carousel-min-width-all-tablet))!important}}", p = ":host{display:block}:host ::slotted(px-h1[auto-spacing]),:host ::slotted(px-h2[auto-spacing]),:host ::slotted(px-h3[auto-spacing]),:host ::slotted(px-h4[auto-spacing]),:host ::slotted(px-h5[auto-spacing]),:host ::slotted(px-h6[auto-spacing]){margin-bottom:calc(var(--px-spacing-heading-to-content-mobile) - var(--host-gap--mobile))}:host([overflow-x=auto]){margin:calc(calc(var(--px-focus-outline-mobile) + var(--px-focus-offset-mobile)) * -1)}:host([overflow-x=auto]) .flex-container{padding:calc(var(--px-focus-outline-mobile) + var(--px-focus-offset-mobile))}.flex-container{box-sizing:border-box;flex-direction:var(--flex-direction--mobile-value);gap:var(--flex-gap--mobile-value);flex-wrap:var(--flex-wrap--mobile-value);justify-content:var(--flex-justify-content--mobile-value);align-items:var(--flex-align-items--mobile-value);width:100%;height:100%;overflow-x:var(--overflow-x-all);display:flex}@media screen and (width<=47.938rem){.flex-container{overflow-x:var(--overflow-x-all-mobile,var(--overflow-x-all));scrollbar-width:none}.flex-container::-webkit-scrollbar{display:none}}@media screen and (width>=48rem){.flex-container{flex-direction:var(--flex-direction--tablet-value);gap:var(--flex-gap--tablet-value);flex-wrap:var(--flex-wrap--tablet-value);justify-content:var(--flex-justify-content--tablet-value);align-items:var(--flex-align-items--tablet-value)}:host ::slotted(px-h1[auto-spacing]),:host ::slotted(px-h2[auto-spacing]),:host ::slotted(px-h3[auto-spacing]),:host ::slotted(px-h4[auto-spacing]),:host ::slotted(px-h5[auto-spacing]),:host ::slotted(px-h6[auto-spacing]){margin-bottom:calc(var(--px-spacing-heading-to-content-tablet) - var(--host-gap--tablet))}:host([overflow-x=auto]){margin:calc(calc(var(--px-focus-outline-tablet) + var(--px-focus-offset-tablet)) * -1)}:host([overflow-x=auto]) .flex-container{padding:calc(var(--px-focus-outline-tablet) + var(--px-focus-offset-tablet))}}@media screen and (width>=48rem) and (width<=64rem){.flex-container{overflow-x:var(--overflow-x-all-tablet,var(--overflow-x-all));scrollbar-width:none}.flex-container::-webkit-scrollbar{display:none}}@media screen and (width>=64.0625rem){.flex-container{flex-direction:var(--flex-direction--laptop-value);gap:var(--flex-gap--laptop-value);flex-wrap:var(--flex-wrap--laptop-value);justify-content:var(--flex-justify-content--laptop-value);align-items:var(--flex-align-items--laptop-value)}:host ::slotted(px-h1[auto-spacing]),:host ::slotted(px-h2[auto-spacing]),:host ::slotted(px-h3[auto-spacing]),:host ::slotted(px-h4[auto-spacing]),:host ::slotted(px-h5[auto-spacing]),:host ::slotted(px-h6[auto-spacing]){margin-bottom:calc(var(--px-spacing-heading-to-content-laptop) - var(--host-gap--laptop))}:host([overflow-x=auto]){margin:calc(calc(var(--px-focus-outline-laptop) + var(--px-focus-offset-laptop)) * -1)}:host([overflow-x=auto]) .flex-container{padding:calc(var(--px-focus-outline-laptop) + var(--px-focus-offset-laptop))}}@media screen and (width>=64.0625rem) and (width<=90rem){.flex-container{overflow-x:var(--overflow-x-all-laptop,var(--overflow-x-all))}}@media screen and (width>=90.0625rem){.flex-container{flex-direction:var(--flex-direction--desktop-value);gap:var(--flex-gap--desktop-value);flex-wrap:var(--flex-wrap--desktop-value);justify-content:var(--flex-justify-content--desktop-value);align-items:var(--flex-align-items--desktop-value);overflow-x:var(--overflow-x-all-desktop,var(--overflow-x-all))}:host ::slotted(px-h1[auto-spacing]),:host ::slotted(px-h2[auto-spacing]),:host ::slotted(px-h3[auto-spacing]),:host ::slotted(px-h4[auto-spacing]),:host ::slotted(px-h5[auto-spacing]),:host ::slotted(px-h6[auto-spacing]){margin-bottom:calc(var(--px-spacing-heading-to-content-desktop) - var(--host-gap--desktop))}:host([overflow-x=auto]){margin:calc(calc(var(--px-focus-outline-desktop) + var(--px-focus-offset-desktop)) * -1)}:host([overflow-x=auto]) .flex-container{padding:calc(var(--px-focus-outline-desktop) + var(--px-focus-offset-desktop))}}", m = new CSSStyleSheet();
4
- m.replaceSync(p);
5
- var h = [
3
+ var p = ":host{display:block}:host *{box-sizing:border-box}:host{--px-carousel-visible-items:1;--px-carousel-gap-default:var(--px-spacing-default-desktop)}:host([visible-items=\"1\"]){--px-carousel-visible-items:1}:host([visible-items=\"2\"]){--px-carousel-visible-items:2}:host([visible-items=\"3\"]){--px-carousel-visible-items:3}:host([visible-items=\"4\"]){--px-carousel-visible-items:4}:host([visible-items=\"5\"]){--px-carousel-visible-items:5}:host([visible-items=\"6\"]){--px-carousel-visible-items:6}:host([visible-items=\"7\"]){--px-carousel-visible-items:7}:host([visible-items=\"8\"]){--px-carousel-visible-items:8}:host([visible-items=\"9\"]){--px-carousel-visible-items:9}:host([visible-items--mobile=\"1\"]){--px-carousel-visible-items--mobile:1}:host([visible-items--mobile=\"2\"]){--px-carousel-visible-items--mobile:2}:host([visible-items--mobile=\"3\"]){--px-carousel-visible-items--mobile:3}:host([visible-items--mobile=\"4\"]){--px-carousel-visible-items--mobile:4}:host([visible-items--mobile=\"5\"]){--px-carousel-visible-items--mobile:5}:host([visible-items--mobile=\"6\"]){--px-carousel-visible-items--mobile:6}:host([visible-items--mobile=\"7\"]){--px-carousel-visible-items--mobile:7}:host([visible-items--mobile=\"8\"]){--px-carousel-visible-items--mobile:8}:host([visible-items--mobile=\"9\"]){--px-carousel-visible-items--mobile:9}:host([visible-items--tablet=\"1\"]){--px-carousel-visible-items--tablet:1}:host([visible-items--tablet=\"2\"]){--px-carousel-visible-items--tablet:2}:host([visible-items--tablet=\"3\"]){--px-carousel-visible-items--tablet:3}:host([visible-items--tablet=\"4\"]){--px-carousel-visible-items--tablet:4}:host([visible-items--tablet=\"5\"]){--px-carousel-visible-items--tablet:5}:host([visible-items--tablet=\"6\"]){--px-carousel-visible-items--tablet:6}:host([visible-items--tablet=\"7\"]){--px-carousel-visible-items--tablet:7}:host([visible-items--tablet=\"8\"]){--px-carousel-visible-items--tablet:8}:host([visible-items--tablet=\"9\"]){--px-carousel-visible-items--tablet:9}:host([visible-items--laptop=\"1\"]){--px-carousel-visible-items--laptop:1}:host([visible-items--laptop=\"2\"]){--px-carousel-visible-items--laptop:2}:host([visible-items--laptop=\"3\"]){--px-carousel-visible-items--laptop:3}:host([visible-items--laptop=\"4\"]){--px-carousel-visible-items--laptop:4}:host([visible-items--laptop=\"5\"]){--px-carousel-visible-items--laptop:5}:host([visible-items--laptop=\"6\"]){--px-carousel-visible-items--laptop:6}:host([visible-items--laptop=\"7\"]){--px-carousel-visible-items--laptop:7}:host([visible-items--laptop=\"8\"]){--px-carousel-visible-items--laptop:8}:host([visible-items--laptop=\"9\"]){--px-carousel-visible-items--laptop:9}:host([visible-items--desktop=\"1\"]){--px-carousel-visible-items--desktop:1}:host([visible-items--desktop=\"2\"]){--px-carousel-visible-items--desktop:2}:host([visible-items--desktop=\"3\"]){--px-carousel-visible-items--desktop:3}:host([visible-items--desktop=\"4\"]){--px-carousel-visible-items--desktop:4}:host([visible-items--desktop=\"5\"]){--px-carousel-visible-items--desktop:5}:host([visible-items--desktop=\"6\"]){--px-carousel-visible-items--desktop:6}:host([visible-items--desktop=\"7\"]){--px-carousel-visible-items--desktop:7}:host([visible-items--desktop=\"8\"]){--px-carousel-visible-items--desktop:8}:host([visible-items--desktop=\"9\"]){--px-carousel-visible-items--desktop:9}:host([gap=default]){--px-carousel-gap-default:var(--px-spacing-default-desktop)}:host([gap=s]){--px-carousel-gap-default:var(--px-spacing-s-desktop)}:host([gap=xs]){--px-carousel-gap-default:var(--px-spacing-xs-desktop)}:host([gap=\"2xs\"]){--px-carousel-gap-default:var(--px-spacing-2xs-desktop)}:host([gap=l]){--px-carousel-gap-default:var(--px-spacing-l-desktop)}:host([gap=none]){--px-carousel-gap-default:0}:host([gap--mobile=default]){--px-carousel-gap-default--mobile:var(--px-spacing-default-mobile)}:host([gap--mobile=s]){--px-carousel-gap-default--mobile:var(--px-spacing-s-mobile)}:host([gap--mobile=xs]){--px-carousel-gap-default--mobile:var(--px-spacing-xs-mobile)}:host([gap--mobile=\"2xs\"]){--px-carousel-gap-default--mobile:var(--px-spacing-2xs-mobile)}:host([gap--mobile=l]){--px-carousel-gap-default--mobile:var(--px-spacing-l-mobile)}:host([gap--mobile=none]){--px-carousel-gap-default--mobile:0}:host([gap--tablet=default]){--px-carousel-gap-default--tablet:var(--px-spacing-default-tablet)}:host([gap--tablet=s]){--px-carousel-gap-default--tablet:var(--px-spacing-s-tablet)}:host([gap--tablet=xs]){--px-carousel-gap-default--tablet:var(--px-spacing-xs-tablet)}:host([gap--tablet=\"2xs\"]){--px-carousel-gap-default--tablet:var(--px-spacing-2xs-tablet)}:host([gap--tablet=l]){--px-carousel-gap-default--tablet:var(--px-spacing-l-tablet)}:host([gap--tablet=none]){--px-carousel-gap-default--tablet:0}:host([gap--laptop=default]){--px-carousel-gap-default--laptop:var(--px-spacing-default-laptop)}:host([gap--laptop=s]){--px-carousel-gap-default--laptop:var(--px-spacing-s-laptop)}:host([gap--laptop=xs]){--px-carousel-gap-default--laptop:var(--px-spacing-xs-laptop)}:host([gap--laptop=\"2xs\"]){--px-carousel-gap-default--laptop:var(--px-spacing-2xs-laptop)}:host([gap--laptop=l]){--px-carousel-gap-default--laptop:var(--px-spacing-l-laptop)}:host([gap--laptop=none]){--px-carousel-gap-default--laptop:0}:host([gap--desktop=default]){--px-carousel-gap-default--desktop:var(--px-spacing-default-desktop)}:host([gap--desktop=s]){--px-carousel-gap-default--desktop:var(--px-spacing-s-desktop)}:host([gap--desktop=xs]){--px-carousel-gap-default--desktop:var(--px-spacing-xs-desktop)}:host([gap--desktop=\"2xs\"]){--px-carousel-gap-default--desktop:var(--px-spacing-2xs-desktop)}:host([gap--desktop=l]){--px-carousel-gap-default--desktop:var(--px-spacing-l-desktop)}:host([gap--desktop=none]){--px-carousel-gap-default--desktop:0}.carousel{scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;gap:var(--px-carousel-gap-default--desktop,var(--px-carousel-gap-default));display:flex;overflow:auto hidden}@media screen and (width<=48rem){.carousel{gap:var(--px-carousel-gap-default--mobile,var(--px-carousel-gap-default))}}@media screen and (width>=48.0625rem) and (width<=64rem){.carousel{gap:var(--px-carousel-gap-default--tablet,var(--px-carousel-gap-default))}}@media screen and (width>=64.0625rem) and (width<=90rem){.carousel{gap:var(--px-carousel-gap-default--laptop,var(--px-carousel-gap-default))}}#appleseed-container{margin-inline:var(--px-spacing-s-mobile)}@media screen and (width<=48rem){#button-icons{display:none}}.carousel::-webkit-scrollbar{display:none}", m = "::slotted(*){border-radius:var(--px-radius-main);height:100%}.carousel-item{height:100%}:host{scroll-snap-align:start;border-radius:var(--px-radius-main);--visible-items:var(--px-carousel-visible-items--desktop,var(--px-carousel-visible-items,1));--spacing:var(--px-carousel-gap-default--desktop,var(--px-carousel-gap-default,var(--px-spacing-s-desktop)));min-width:calc((100% - max(var(--visible-items), 2) * var(--spacing)) / var(--visible-items) - 64px / max(var(--visible-items), 2));background:#fff;justify-content:center;align-items:center;overflow:hidden}@media screen and (width<=48rem){:host{--visible-items:var(--px-carousel-visible-items--mobile,var(--px-carousel-visible-items,1));--spacing:var(--px-carousel-gap-default--mobile,var(--px-carousel-gap-default,var(--px-spacing-s-mobile)))}}@media screen and (width>=48.0625rem) and (width<=64rem){:host{--visible-items:var(--px-carousel-visible-items--tablet,var(--px-carousel-visible-items,1));--spacing:var(--px-carousel-gap-default--tablet,var(--px-carousel-gap-default,var(--px-spacing-s-desktop)))}}@media screen and (width>=64.0625rem) and (width<=90rem){:host{--visible-items:var(--px-carousel-visible-items--laptop,var(--px-carousel-visible-items,1));--spacing:var(--px-carousel-gap-default--laptop,var(--px-carousel-gap-default,var(--px-spacing-s-desktop)))}}@media screen and (width<=48rem){:host{scroll-snap-align:center;flex:1 0 var(--px-carousel-min-width-mobile,var(--px-carousel-min-width-all-mobile))!important}}@media screen and (width>=48rem) and (width<=64rem){:host{flex:1 0 var(--px-carousel-min-width-tablet,var(--px-carousel-min-width-all-tablet))!important}}", h = ":host{--host-gap--mobile:var(--px-spacing-none-mobile);--host-gap--tablet:var(--px-spacing-none-tablet);--host-gap--laptop:var(--px-spacing-none-desktop);--host-gap--desktop:var(--px-spacing-none-desktop);--overflow-x-all:visible;--overflow-x-all-mobile:initial;--overflow-x-all-tablet:initial;--overflow-x-all-laptop:initial;--overflow-x-all-desktop:initial;display:block}:host ::slotted(px-h1[auto-spacing]),:host ::slotted(px-h2[auto-spacing]),:host ::slotted(px-h3[auto-spacing]),:host ::slotted(px-h4[auto-spacing]),:host ::slotted(px-h5[auto-spacing]),:host ::slotted(px-h6[auto-spacing]){margin-bottom:calc(var(--px-spacing-heading-to-content-mobile) - var(--host-gap--mobile))}:host([overflow-x=auto]){margin:calc(calc(var(--px-focus-outline-mobile) + var(--px-focus-offset-mobile)) * -1)}:host([overflow-x=auto]) .flex-container{padding:calc(var(--px-focus-outline-mobile) + var(--px-focus-offset-mobile))}.flex-container{--flex-direction--mobile-value:row;--flex-direction--tablet-value:row;--flex-direction--laptop-value:row;--flex-direction--desktop-value:row;--flex-gap--mobile-value:var(--px-spacing-none-mobile);--flex-gap--tablet-value:var(--px-spacing-none-tablet);--flex-gap--laptop-value:var(--px-spacing-none-desktop);--flex-gap--desktop-value:var(--px-spacing-none-desktop);--flex-align-items--mobile-value:stretch;--flex-align-items--tablet-value:stretch;--flex-align-items--laptop-value:stretch;--flex-align-items--desktop-value:stretch;--flex-justify-content--mobile-value:flex-start;--flex-justify-content--tablet-value:flex-start;--flex-justify-content--laptop-value:flex-start;--flex-justify-content--desktop-value:flex-start;--flex-wrap--mobile-value:nowrap;--flex-wrap--tablet-value:nowrap;--flex-wrap--laptop-value:nowrap;--flex-wrap--desktop-value:nowrap;box-sizing:border-box;flex-direction:var(--flex-direction--mobile-value);gap:var(--flex-gap--mobile-value);flex-wrap:var(--flex-wrap--mobile-value);justify-content:var(--flex-justify-content--mobile-value);align-items:var(--flex-align-items--mobile-value);width:100%;height:100%;overflow-x:var(--overflow-x-all);display:flex}@media screen and (width<=47.938rem){.flex-container{overflow-x:var(--overflow-x-all-mobile,var(--overflow-x-all));scrollbar-width:none}.flex-container::-webkit-scrollbar{display:none}}@media screen and (width>=48rem){.flex-container{flex-direction:var(--flex-direction--tablet-value);gap:var(--flex-gap--tablet-value);flex-wrap:var(--flex-wrap--tablet-value);justify-content:var(--flex-justify-content--tablet-value);align-items:var(--flex-align-items--tablet-value)}:host ::slotted(px-h1[auto-spacing]),:host ::slotted(px-h2[auto-spacing]),:host ::slotted(px-h3[auto-spacing]),:host ::slotted(px-h4[auto-spacing]),:host ::slotted(px-h5[auto-spacing]),:host ::slotted(px-h6[auto-spacing]){margin-bottom:calc(var(--px-spacing-heading-to-content-tablet) - var(--host-gap--tablet))}:host([overflow-x=auto]){margin:calc(calc(var(--px-focus-outline-tablet) + var(--px-focus-offset-tablet)) * -1)}:host([overflow-x=auto]) .flex-container{padding:calc(var(--px-focus-outline-tablet) + var(--px-focus-offset-tablet))}}@media screen and (width>=48rem) and (width<=64rem){.flex-container{overflow-x:var(--overflow-x-all-tablet,var(--overflow-x-all));scrollbar-width:none}.flex-container::-webkit-scrollbar{display:none}}@media screen and (width>=64.0625rem){.flex-container{flex-direction:var(--flex-direction--laptop-value);gap:var(--flex-gap--laptop-value);flex-wrap:var(--flex-wrap--laptop-value);justify-content:var(--flex-justify-content--laptop-value);align-items:var(--flex-align-items--laptop-value)}:host ::slotted(px-h1[auto-spacing]),:host ::slotted(px-h2[auto-spacing]),:host ::slotted(px-h3[auto-spacing]),:host ::slotted(px-h4[auto-spacing]),:host ::slotted(px-h5[auto-spacing]),:host ::slotted(px-h6[auto-spacing]){margin-bottom:calc(var(--px-spacing-heading-to-content-laptop) - var(--host-gap--laptop))}:host([overflow-x=auto]){margin:calc(calc(var(--px-focus-outline-laptop) + var(--px-focus-offset-laptop)) * -1)}:host([overflow-x=auto]) .flex-container{padding:calc(var(--px-focus-outline-laptop) + var(--px-focus-offset-laptop))}}@media screen and (width>=64.0625rem) and (width<=90rem){.flex-container{overflow-x:var(--overflow-x-all-laptop,var(--overflow-x-all))}}@media screen and (width>=90.0625rem){.flex-container{flex-direction:var(--flex-direction--desktop-value);gap:var(--flex-gap--desktop-value);flex-wrap:var(--flex-wrap--desktop-value);justify-content:var(--flex-justify-content--desktop-value);align-items:var(--flex-align-items--desktop-value);overflow-x:var(--overflow-x-all-desktop,var(--overflow-x-all))}:host ::slotted(px-h1[auto-spacing]),:host ::slotted(px-h2[auto-spacing]),:host ::slotted(px-h3[auto-spacing]),:host ::slotted(px-h4[auto-spacing]),:host ::slotted(px-h5[auto-spacing]),:host ::slotted(px-h6[auto-spacing]){margin-bottom:calc(var(--px-spacing-heading-to-content-desktop) - var(--host-gap--desktop))}:host([overflow-x=auto]){margin:calc(calc(var(--px-focus-outline-desktop) + var(--px-focus-offset-desktop)) * -1)}:host([overflow-x=auto]) .flex-container{padding:calc(var(--px-focus-outline-desktop) + var(--px-focus-offset-desktop))}}:host(px-vstack) .flex-container{--flex-direction--mobile-value:column!important;--flex-direction--tablet-value:column!important;--flex-direction--laptop-value:column!important;--flex-direction--desktop-value:column!important}:host(px-hstack) .flex-container{--flex-direction--mobile-value:row!important;--flex-direction--tablet-value:row!important;--flex-direction--laptop-value:row!important;--flex-direction--desktop-value:row!important}", g = new CSSStyleSheet();
4
+ g.replaceSync(h);
5
+ var _ = document.createElement("template");
6
+ _.innerHTML = "<div class=\"flex-container\"><slot></slot></div>";
7
+ var v = [
6
8
  "",
7
9
  "default",
8
10
  "row",
9
11
  "row-reverse",
10
12
  "column",
11
13
  "column-reverse"
12
- ], g = [
14
+ ], y = [
13
15
  "",
14
16
  "default",
15
17
  "stretch",
@@ -19,7 +21,7 @@ var h = [
19
21
  "end",
20
22
  "center",
21
23
  "baseline"
22
- ], _ = [
24
+ ], b = [
23
25
  "",
24
26
  "default",
25
27
  "flex-start",
@@ -30,25 +32,23 @@ var h = [
30
32
  "space-between",
31
33
  "space-around",
32
34
  "space-evenly"
33
- ], v = [
35
+ ], x = [
34
36
  "",
35
37
  "default",
36
38
  "nowrap",
37
39
  "wrap",
38
40
  "wrap-reverse"
39
- ], y = [
41
+ ], S = [
40
42
  "",
41
43
  "visible",
42
44
  "hidden",
43
45
  "scroll",
44
46
  "auto"
45
- ], b = class extends n {
47
+ ], C = class t extends n {
46
48
  constructor() {
47
- super(m), this.overflowXAttributeDelegate = new e(this, "overflow-x", (e) => e, "--overflow-x"), this.template = "<div class=\"flex-container\">\n <slot></slot>\n </div>", this.shadowRoot.innerHTML = this.template;
48
- }
49
- connectedCallback() {
50
- this.hasAttribute("direction") || (this.direction = "row"), this.hasAttribute("gap") || (this.gap = "none"), this.hasAttribute("align-items") || (this.alignItems = "stretch"), this.hasAttribute("justify-content") || (this.justifyContent = "flex-start"), this.hasAttribute("wrap") || (this.wrap = "nowrap"), this.hasAttribute("overflow-x") || this.overflowXAttributeDelegate.init("visible");
49
+ super(g), this.overflowXAttributeDelegate = new e(this, "overflow-x", (e) => e, "--overflow-x"), this.shadowRoot.firstChild || this.shadowRoot.appendChild(document.importNode(_.content, !0));
51
50
  }
51
+ connectedCallback() {}
52
52
  static get observedAttributes() {
53
53
  return [
54
54
  ...super.observedAttributes,
@@ -91,267 +91,287 @@ var h = [
91
91
  case "gap--tablet":
92
92
  case "gap--laptop":
93
93
  case "gap--desktop":
94
- this.updateFlexProperties(e, t, n, s);
94
+ this.updateFlexProperties(e, t, n, c);
95
95
  break;
96
96
  case "justify-content":
97
97
  case "justify-content--mobile":
98
98
  case "justify-content--tablet":
99
99
  case "justify-content--laptop":
100
100
  case "justify-content--desktop":
101
- this.updateFlexProperties(e, t, n, _);
101
+ this.updateFlexProperties(e, t, n, b);
102
102
  break;
103
103
  case "align-items":
104
104
  case "align-items--mobile":
105
105
  case "align-items--tablet":
106
106
  case "align-items--laptop":
107
107
  case "align-items--desktop":
108
- this.updateFlexProperties(e, t, n, g);
108
+ this.updateFlexProperties(e, t, n, y);
109
109
  break;
110
110
  case "wrap":
111
111
  case "wrap--mobile":
112
112
  case "wrap--tablet":
113
113
  case "wrap--laptop":
114
114
  case "wrap--desktop":
115
- this.updateFlexProperties(e, t, n, v);
115
+ this.updateFlexProperties(e, t, n, x);
116
116
  break;
117
117
  case "direction":
118
118
  case "direction--mobile":
119
119
  case "direction--tablet":
120
120
  case "direction--laptop":
121
121
  case "direction--desktop":
122
- this.updateFlexProperties(e, t, n, h);
122
+ this.updateFlexProperties(e, t, n, v);
123
123
  break;
124
124
  case "overflow-x":
125
125
  case "overflow-x--mobile":
126
126
  case "overflow-x--tablet":
127
127
  case "overflow-x--laptop":
128
128
  case "overflow-x--desktop":
129
- this.updateOverflowX(e, t, n, y);
129
+ this.updateOverflowX(e, t, n, S);
130
130
  break;
131
131
  default: super.attributeChangedCallback(e, t, n);
132
132
  }
133
133
  }
134
134
  updateOverflowX(e, t, n, r) {
135
135
  if (!o(r, n)) {
136
- l(`"${n}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${r.join("\", \"")}".`);
136
+ u(`"${n}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${r.join("\", \"")}".`);
137
137
  return;
138
138
  }
139
139
  this.overflowXAttributeDelegate.attributeChangedCallback(e, t, n);
140
140
  }
141
- updateFlexProperties(e, t, n, r) {
142
- this.checkName(r, n) || l(`"${n}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${r.join("\", \"")}".`);
143
- let i = e.indexOf("--") > -1, a = i ? e.split("--")[0] : e, o = [];
144
- if (!i) this.getAttribute(a + "--mobile") || o.push("mobile"), this.getAttribute(a + "--tablet") || o.push("tablet"), this.getAttribute(a + "--laptop") || o.push("laptop"), this.getAttribute(a + "--desktop") || o.push("desktop"), o.forEach((e) => {
145
- this.updateStyle(a, e, t, r), this.updateStyle(a, e, n, r);
146
- });
141
+ updateFlexProperties(e, n, r, i) {
142
+ r !== null && !this.checkName(i, r) && u(`"${r}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${i.join("\", \"")}".`);
143
+ let a = e.indexOf("--");
144
+ if (a === -1) for (let n of t.breakpoints) this.getAttribute(`${e}--${n}`) || this.updateStyle(e, n, r, i);
147
145
  else {
148
- let i = e.split("--")[1];
149
- this.updateStyle(a, i, t, r), this.updateStyle(a, i, n, r);
146
+ let t = e.slice(0, a), n = e.slice(a + 2);
147
+ this.updateStyle(t, n, r || this.getAttribute(t), i);
150
148
  }
151
149
  }
152
150
  updateStyle(e, t, n, r) {
153
- n && (e === "gap" && r && r.includes(n) ? (this.$el.style.setProperty(`--flex-${e}--${t}-value`, `var(--px-spacing-${n}-${t === "laptop" ? "desktop" : t})`), this.style.setProperty(`--host-gap--${t}`, `var(--px-spacing-${n}-${t === "laptop" ? "desktop" : t})`)) : this.$el.style.setProperty(`--flex-${e}--${t}-value`, n));
151
+ let i = `--flex-${e}--${t}-value`, a = e === "gap";
152
+ if (!n) {
153
+ this.$el.style.removeProperty(i), a && this.style.removeProperty(`--host-gap--${t}`);
154
+ return;
155
+ }
156
+ if (a && r && r.includes(n)) {
157
+ let e = `var(--px-spacing-${n}-${t === "laptop" ? "desktop" : t})`;
158
+ this.$el.style.setProperty(i, e), this.style.setProperty(`--host-gap--${t}`, e);
159
+ } else this.$el.style.setProperty(i, n);
160
+ }
161
+ static {
162
+ this.breakpoints = [
163
+ "mobile",
164
+ "tablet",
165
+ "laptop",
166
+ "desktop"
167
+ ];
154
168
  }
155
169
  get direction() {
156
- return this.getAttribute("direction");
170
+ return this.getAttribute("direction") ?? "row";
157
171
  }
158
172
  set direction(e) {
159
- u(this, "direction", e);
173
+ d(this, "direction", e);
160
174
  }
161
175
  get directionMobile() {
162
176
  return this.getAttribute("direction--mobile");
163
177
  }
164
178
  set directionMobile(e) {
165
- u(this, "direction--mobile", e);
179
+ d(this, "direction--mobile", e);
166
180
  }
167
181
  get directionTablet() {
168
182
  return this.getAttribute("direction--tablet");
169
183
  }
170
184
  set directionTablet(e) {
171
- u(this, "direction--tablet", e);
185
+ d(this, "direction--tablet", e);
172
186
  }
173
187
  get directionLaptop() {
174
188
  return this.getAttribute("direction--laptop");
175
189
  }
176
190
  set directionLaptop(e) {
177
- u(this, "direction--laptop", e);
191
+ d(this, "direction--laptop", e);
178
192
  }
179
193
  get directionDesktop() {
180
194
  return this.getAttribute("direction--desktop");
181
195
  }
182
196
  set directionDesktop(e) {
183
- u(this, "direction--desktop", e);
197
+ d(this, "direction--desktop", e);
184
198
  }
185
199
  get gap() {
186
- return this.getAttribute("gap");
200
+ return this.getAttribute("gap") ?? "none";
187
201
  }
188
202
  set gap(e) {
189
- u(this, "gap", e);
203
+ d(this, "gap", e);
190
204
  }
191
205
  get gapMobile() {
192
206
  return this.getAttribute("gap--mobile");
193
207
  }
194
208
  set gapMobile(e) {
195
- u(this, "gap--mobile", e);
209
+ d(this, "gap--mobile", e);
196
210
  }
197
211
  get gapTablet() {
198
212
  return this.getAttribute("gap--tablet");
199
213
  }
200
214
  set gapTablet(e) {
201
- u(this, "gap--tablet", e);
215
+ d(this, "gap--tablet", e);
202
216
  }
203
217
  get gapLaptop() {
204
218
  return this.getAttribute("gap--laptop");
205
219
  }
206
220
  set gapLaptop(e) {
207
- u(this, "gap--laptop", e);
221
+ d(this, "gap--laptop", e);
208
222
  }
209
223
  get gapDesktop() {
210
224
  return this.getAttribute("gap--desktop");
211
225
  }
212
226
  set gapDesktop(e) {
213
- u(this, "gap--desktop", e);
227
+ d(this, "gap--desktop", e);
214
228
  }
215
229
  get justifyContent() {
216
- return this.getAttribute("justify-content");
230
+ return this.getAttribute("justify-content") ?? "flex-start";
217
231
  }
218
232
  set justifyContent(e) {
219
- u(this, "justify-content", e);
233
+ d(this, "justify-content", e);
220
234
  }
221
235
  get justifyContentMobile() {
222
236
  return this.getAttribute("justify-content--mobile");
223
237
  }
224
238
  set justifyContentMobile(e) {
225
- u(this, "justify-content--mobile", e);
239
+ d(this, "justify-content--mobile", e);
226
240
  }
227
241
  get justifyContentTablet() {
228
242
  return this.getAttribute("justify-content--tablet");
229
243
  }
230
244
  set justifyContentTablet(e) {
231
- u(this, "justify-content--tablet", e);
245
+ d(this, "justify-content--tablet", e);
232
246
  }
233
247
  get justifyContentLaptop() {
234
248
  return this.getAttribute("justify-content--laptop");
235
249
  }
236
250
  set justifyContentLaptop(e) {
237
- u(this, "justify-content--laptop", e);
251
+ d(this, "justify-content--laptop", e);
238
252
  }
239
253
  get justifyContentDesktop() {
240
254
  return this.getAttribute("justify-content--desktop");
241
255
  }
242
256
  set justifyContentDesktop(e) {
243
- u(this, "justify-content--desktop", e);
257
+ d(this, "justify-content--desktop", e);
244
258
  }
245
259
  get alignItems() {
246
- return this.getAttribute("align-items");
260
+ return this.getAttribute("align-items") ?? "stretch";
247
261
  }
248
262
  set alignItems(e) {
249
- u(this, "align-items", e);
263
+ d(this, "align-items", e);
250
264
  }
251
265
  get alignItemsMobile() {
252
266
  return this.getAttribute("align-items--mobile");
253
267
  }
254
268
  set alignItemsMobile(e) {
255
- u(this, "align-items--mobile", e);
269
+ d(this, "align-items--mobile", e);
256
270
  }
257
271
  get alignItemsTablet() {
258
272
  return this.getAttribute("align-items--tablet");
259
273
  }
260
274
  set alignItemsTablet(e) {
261
- u(this, "align-items--tablet", e);
275
+ d(this, "align-items--tablet", e);
262
276
  }
263
277
  get alignItemsLaptop() {
264
278
  return this.getAttribute("align-items--laptop");
265
279
  }
266
280
  set alignItemsLaptop(e) {
267
- u(this, "align-items--laptop", e);
281
+ d(this, "align-items--laptop", e);
268
282
  }
269
283
  get alignItemsDesktop() {
270
284
  return this.getAttribute("align-items--desktop");
271
285
  }
272
286
  set alignItemsDesktop(e) {
273
- u(this, "align-items--desktop", e);
287
+ d(this, "align-items--desktop", e);
274
288
  }
275
289
  get wrap() {
276
- return this.getAttribute("wrap");
290
+ return this.getAttribute("wrap") ?? "nowrap";
277
291
  }
278
292
  set wrap(e) {
279
- u(this, "wrap", e);
293
+ d(this, "wrap", e);
280
294
  }
281
295
  get wrapMobile() {
282
296
  return this.getAttribute("wrap--mobile");
283
297
  }
284
298
  set wrapMobile(e) {
285
- u(this, "wrap--mobile", e);
299
+ d(this, "wrap--mobile", e);
286
300
  }
287
301
  get wrapTablet() {
288
302
  return this.getAttribute("wrap--tablet");
289
303
  }
290
304
  set wrapTablet(e) {
291
- u(this, "wrap--tablet", e);
305
+ d(this, "wrap--tablet", e);
292
306
  }
293
307
  get wrapLaptop() {
294
308
  return this.getAttribute("wrap--laptop");
295
309
  }
296
310
  set wrapLaptop(e) {
297
- u(this, "wrap--laptop", e);
311
+ d(this, "wrap--laptop", e);
298
312
  }
299
313
  get wrapDesktop() {
300
314
  return this.getAttribute("wrap--desktop");
301
315
  }
302
316
  set wrapDesktop(e) {
303
- u(this, "wrap--desktop", e);
317
+ d(this, "wrap--desktop", e);
304
318
  }
305
319
  get overflowX() {
306
- return this.getAttribute("overflow-x");
320
+ return this.getAttribute("overflow-x") ?? "visible";
307
321
  }
308
322
  set overflowX(e) {
309
- u(this, "overflow-x", e);
323
+ d(this, "overflow-x", e);
310
324
  }
311
325
  get overflowXMobile() {
312
326
  return this.getAttribute("overflow-x--mobile");
313
327
  }
314
328
  set overflowXMobile(e) {
315
- u(this, "overflow-x--mobile", e);
329
+ d(this, "overflow-x--mobile", e);
316
330
  }
317
331
  get overflowXTablet() {
318
332
  return this.getAttribute("overflow-x--tablet");
319
333
  }
320
334
  set overflowXTablet(e) {
321
- u(this, "overflow-x--tablet", e);
335
+ d(this, "overflow-x--tablet", e);
322
336
  }
323
337
  get overflowXLaptop() {
324
338
  return this.getAttribute("overflow-x--laptop");
325
339
  }
326
340
  set overflowXLaptop(e) {
327
- u(this, "overflow-x--laptop", e);
341
+ d(this, "overflow-x--laptop", e);
328
342
  }
329
343
  get overflowXDesktop() {
330
344
  return this.getAttribute("overflow-x--desktop");
331
345
  }
332
346
  set overflowXDesktop(e) {
333
- u(this, "overflow-x--desktop", e);
347
+ d(this, "overflow-x--desktop", e);
334
348
  }
335
349
  get $el() {
336
- return this.shadowRoot.querySelector(".flex-container");
350
+ return this.shadowRoot.firstElementChild;
337
351
  }
338
352
  };
339
- customElements.get("px-stack") || customElements.define("px-stack", b);
340
- var x = class extends b {
341
- constructor() {
342
- super();
353
+ customElements.get("px-stack") || customElements.define("px-stack", C);
354
+ var w = (e) => e === "direction" || e.startsWith("direction--"), T = class extends C {
355
+ get direction() {
356
+ return "column";
343
357
  }
344
- connectedCallback() {
345
- super.connectedCallback(), this.direction = "column", this.directionMobile = "column", this.directionTablet = "column", this.directionLaptop = "column", this.directionDesktop = "column";
358
+ set direction(e) {
359
+ d(this, "direction", e);
360
+ }
361
+ attributeChangedCallback(e, t, n) {
362
+ w(e) || super.attributeChangedCallback(e, t, n);
346
363
  }
347
364
  };
348
- customElements.get("px-vstack") || customElements.define("px-vstack", x);
349
- var ee = class extends b {
350
- constructor() {
351
- super();
365
+ customElements.get("px-vstack") || customElements.define("px-vstack", T);
366
+ var ee = class extends C {
367
+ get direction() {
368
+ return "row";
352
369
  }
353
- connectedCallback() {
354
- super.connectedCallback(), this.direction = "row", this.directionMobile = "row", this.directionTablet = "row", this.directionLaptop = "row", this.directionDesktop = "row";
370
+ set direction(e) {
371
+ d(this, "direction", e);
372
+ }
373
+ attributeChangedCallback(e, t, n) {
374
+ w(e) || super.attributeChangedCallback(e, t, n);
355
375
  }
356
376
  };
357
377
  customElements.get("px-hstack") || customElements.define("px-hstack", ee);
@@ -406,11 +426,11 @@ var te = class extends HTMLElement {
406
426
  customElements.get("px-spacer") || customElements.define("px-spacer", te);
407
427
  //#endregion
408
428
  //#region ../Layout/src/Page.css?inline
409
- var ne = ":host{box-sizing:border-box;display:block}slot[name=body-container]{min-height:100vh}#image-sticky-box{margin-top:-2.5rem}", S = new CSSStyleSheet();
410
- S.replaceSync(ne);
429
+ var ne = ":host{box-sizing:border-box;display:block}slot[name=body-container]{min-height:100vh}#image-sticky-box{margin-top:-2.5rem}", E = new CSSStyleSheet();
430
+ E.replaceSync(ne);
411
431
  var re = class extends n {
412
432
  constructor() {
413
- super(S), this.template = () => `
433
+ super(E), this.template = () => `
414
434
  <px-container border-radius="none" padding="none">
415
435
  <px-vstack>
416
436
  <px-container id="header-container" border-radius="none">
@@ -503,7 +523,7 @@ var re = class extends n {
503
523
  </px-container>
504
524
  </px-vstack>
505
525
  </px-container>
506
- `, this.shadowRoot.innerHTML = this.template();
526
+ `, f(this.shadowRoot, this.template());
507
527
  }
508
528
  static get observedAttributes() {
509
529
  return [
@@ -593,25 +613,26 @@ var re = class extends n {
593
613
  customElements.get("px-page") === void 0 && customElements.define("px-page", re);
594
614
  //#endregion
595
615
  //#region ../ButtonIcon/src/buttonicon.css?inline
596
- var ie = ".btn-icon,.btn-icon *{box-sizing:border-box}.btn-icon{font-size:var(--px-font-size-base);width:var(--px-size-l);height:var(--px-size-l);vertical-align:middle;cursor:pointer;--btn-transition:all .2s ease-in-out 0s;transition:var(--btn-transition);background:var(--px-color-background-container-primary-default);color:var(--px-color-icon-brand-inverted);border-radius:var(--px-radius-pill);padding:var(--px-padding-xs-mobile);border:var(--px-size-border-m) solid transparent;justify-content:center;align-items:center;display:inline-flex}.btn-icon ::slotted(px-icon){line-height:0}.btn-icon:hover:not([disabled],[aria-disabled=true],.btn-icon--state-loading){background:var(--px-color-background-state-hover-bordered-default);color:var(--px-color-icon-brand-default);border-color:var(--px-color-border-state-hover-default)}.btn-icon:active:not([disabled],[aria-disabled=true],.btn-icon--state-loading){background:var(--px-color-background-state-active-inverted);color:var(--px-color-icon-state-active-default);border-color:var(--px-color-border-state-active-default)}.btn-icon:focus-visible:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}.btn-icon[disabled],.btn-icon[aria-disabled=true]{background:var(--px-color-background-state-disabled-default);color:var(--px-color-icon-state-disabled-default);cursor:default;pointer-events:none}.btn-icon.btn-icon--state-loading{background:var(--px-color-background-state-disabled-default);color:var(--px-color-icon-brand-default);cursor:inherit}.btn-icon--size-small{padding:var(--px-padding-2xs-mobile);width:var(--px-size-m);height:var(--px-size-m)}.btn-icon--variant-secondary{background-color:var(--px-color-background-container-secondary-default);color:var(--px-color-icon-brand-default)}.btn-icon--variant-naked{color:var(--px-color-icon-brand-default);background-color:#0000;width:auto;height:auto}:host([inverted]) .btn-icon{background:var(--px-color-background-container-primary-inverted);color:var(--px-color-icon-brand-default)}:host([inverted]) .btn-icon:hover:not([disabled],[aria-disabled=true],.btn-icon--state-loading){background:var(--px-color-background-state-hover-bordered-inverted);color:var(--px-color-icon-brand-inverted);border-color:var(--px-color-border-state-hover-inverted)}:host([inverted]) .btn-icon:active:not([disabled],[aria-disabled=true],.btn-icon--state-loading){background:var(--px-color-background-state-hover-default);color:var(--px-color-icon-state-active-inverted);border-color:var(--px-color-border-state-active-inverted)}:host([inverted]) .btn-icon:focus-visible:not([disabled],[aria-disabled=true]){outline-color:var(--px-color-border-focus-outline-inverted)}:host([inverted]) .btn-icon[disabled],:host([inverted]) .btn-icon[aria-disabled=true]{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-icon-state-disabled-inverted)}:host([inverted]) .btn-icon.btn-icon--state-loading{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-icon-brand-inverted);border-color:#0000}:host([inverted]) .btn-icon.btn-icon--variant-naked{color:var(--px-color-icon-brand-inverted);background-color:#0000}:host([inverted]) .btn-icon--variant-secondary{background-color:var(--px-color-background-container-secondary-inverted);color:var(--px-color-icon-brand-inverted)}@media screen and (width>=48rem){.btn-icon{padding:var(--px-padding-xs-desktop)}.btn-icon:focus-visible:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}.btn-icon--size-small{padding:var(--px-padding-2xs-desktop)}}@media screen and (width>=64.0625rem){.btn-icon{padding:var(--px-padding-xs-desktop)}.btn-icon:focus-visible:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}.btn-icon--size-small{padding:var(--px-padding-2xs-desktop)}}", C = new CSSStyleSheet();
597
- C.replaceSync(ie);
598
- var w = [
616
+ var ie = ".btn-icon,.btn-icon *{box-sizing:border-box}.btn-icon{font-size:var(--px-font-size-base);width:var(--px-size-l);height:var(--px-size-l);vertical-align:middle;cursor:pointer;--btn-transition:all .2s ease-in-out 0s;transition:var(--btn-transition);background:var(--px-color-background-container-primary-default);color:var(--px-color-icon-brand-inverted);border-radius:var(--px-radius-pill);padding:var(--px-padding-xs-mobile);border:var(--px-size-border-m) solid transparent;justify-content:center;align-items:center;display:inline-flex}.btn-icon ::slotted(px-icon){line-height:0}.btn-icon:hover:not([disabled],[aria-disabled=true],.btn-icon--state-loading){background:var(--px-color-background-state-hover-bordered-default);color:var(--px-color-icon-brand-default);border-color:var(--px-color-border-state-hover-default)}.btn-icon:active:not([disabled],[aria-disabled=true],.btn-icon--state-loading){background:var(--px-color-background-state-active-inverted);color:var(--px-color-icon-state-active-default);border-color:var(--px-color-border-state-active-default)}.btn-icon:focus-visible:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}.btn-icon[disabled],.btn-icon[aria-disabled=true]{background:var(--px-color-background-state-disabled-default);color:var(--px-color-icon-state-disabled-default);cursor:default;pointer-events:none}.btn-icon.btn-icon--state-loading{background:var(--px-color-background-state-disabled-default);color:var(--px-color-icon-brand-default);cursor:inherit}.btn-icon--size-small{padding:var(--px-padding-2xs-mobile);width:var(--px-size-m);height:var(--px-size-m)}.btn-icon--variant-secondary{background-color:var(--px-color-background-container-secondary-default);color:var(--px-color-icon-brand-default)}.btn-icon--variant-naked{color:var(--px-color-icon-brand-default);background-color:#0000;width:auto;height:auto}:host([inverted]) .btn-icon{background:var(--px-color-background-container-primary-inverted);color:var(--px-color-icon-brand-default)}:host([inverted]) .btn-icon:hover:not([disabled],[aria-disabled=true],.btn-icon--state-loading){background:var(--px-color-background-state-hover-bordered-inverted);color:var(--px-color-icon-brand-inverted);border-color:var(--px-color-border-state-hover-inverted)}:host([inverted]) .btn-icon:active:not([disabled],[aria-disabled=true],.btn-icon--state-loading){background:var(--px-color-background-state-hover-default);color:var(--px-color-icon-state-active-inverted);border-color:var(--px-color-border-state-active-inverted)}:host([inverted]) .btn-icon:focus-visible:not([disabled],[aria-disabled=true]){outline-color:var(--px-color-border-focus-outline-inverted)}:host([inverted]) .btn-icon[disabled],:host([inverted]) .btn-icon[aria-disabled=true]{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-icon-state-disabled-inverted)}:host([inverted]) .btn-icon.btn-icon--state-loading{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-icon-brand-inverted);border-color:#0000}:host([inverted]) .btn-icon.btn-icon--variant-naked{color:var(--px-color-icon-brand-inverted);background-color:#0000}:host([inverted]) .btn-icon--variant-secondary{background-color:var(--px-color-background-container-secondary-inverted);color:var(--px-color-icon-brand-inverted)}@media screen and (width>=48rem){.btn-icon{padding:var(--px-padding-xs-desktop)}.btn-icon:focus-visible:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}.btn-icon--size-small{padding:var(--px-padding-2xs-desktop)}}@media screen and (width>=64.0625rem){.btn-icon{padding:var(--px-padding-xs-desktop)}.btn-icon:focus-visible:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}.btn-icon--size-small{padding:var(--px-padding-2xs-desktop)}}", D = new CSSStyleSheet();
617
+ D.replaceSync(ie);
618
+ var O = [
599
619
  "",
600
620
  "default",
601
621
  "small"
602
- ], T = [
622
+ ], k = [
603
623
  "",
604
624
  "default",
605
625
  "secondary",
606
626
  "naked"
607
- ], E = class e extends t {
627
+ ], A = class e extends t {
628
+ static {
629
+ this.template = s("<button class=\"btn-icon\"><slot></slot></button>");
630
+ }
608
631
  static {
609
632
  this.nativeName = "button";
610
633
  }
611
634
  constructor() {
612
- super(C), this.template = () => "<slot></slot>";
613
- let t = document.createElement(e.nativeName);
614
- t.classList.add("btn-icon"), t.innerHTML = this.template(), this.shadowRoot.appendChild(t);
635
+ super(D), f(this.shadowRoot, e.template);
615
636
  }
616
637
  static get observedAttributes() {
617
638
  return [
@@ -657,10 +678,10 @@ var w = [
657
678
  this.$el.classList.toggle("btn-icon--state-loading");
658
679
  }
659
680
  updateSize(e, t) {
660
- this.checkName(w, t) ? (e !== null && e !== "" && e !== "default" && this.$el.classList.toggle(`btn-icon--size-${e}`), t !== null && t !== "" && t !== "default" && this.$el.classList.toggle(`btn-icon--size-${t}`)) : l(`"${t}" is not a valid size value for ${this.tagName.toLowerCase()}. Allowed values are: "${w.join("\", \"")}".`);
681
+ this.checkName(O, t) ? (e !== null && e !== "" && e !== "default" && this.$el.classList.toggle(`btn-icon--size-${e}`), t !== null && t !== "" && t !== "default" && this.$el.classList.toggle(`btn-icon--size-${t}`)) : u(`"${t}" is not a valid size value for ${this.tagName.toLowerCase()}. Allowed values are: "${O.join("\", \"")}".`);
661
682
  }
662
683
  updateVariant(e, t) {
663
- this.checkName(T, t) ? (e !== null && e !== "" && e !== "default" && this.$el.classList.toggle(`btn-icon--variant-${e}`), t !== null && t !== "" && t !== "default" && this.$el.classList.toggle(`btn-icon--variant-${t}`)) : l(`"${t}" is not a valid variant value for ${this.tagName.toLowerCase()}. Allowed values are: "${T.join("\", \"")}".`);
684
+ this.checkName(k, t) ? (e !== null && e !== "" && e !== "default" && this.$el.classList.toggle(`btn-icon--variant-${e}`), t !== null && t !== "" && t !== "default" && this.$el.classList.toggle(`btn-icon--variant-${t}`)) : u(`"${t}" is not a valid variant value for ${this.tagName.toLowerCase()}. Allowed values are: "${k.join("\", \"")}".`);
664
685
  }
665
686
  get inverted() {
666
687
  return this.hasAttribute("inverted");
@@ -693,10 +714,10 @@ var w = [
693
714
  this._updateAttribute("aria-expanded", e);
694
715
  }
695
716
  };
696
- customElements.get("px-button-icon") || customElements.define("px-button-icon", E);
717
+ customElements.get("px-button-icon") || customElements.define("px-button-icon", A);
697
718
  //#endregion
698
719
  //#region ../Icon/common/src/IconSet.ts
699
- var ae = class extends HTMLElement {
720
+ var j = class extends HTMLElement {
700
721
  constructor() {
701
722
  super();
702
723
  }
@@ -730,8 +751,8 @@ var ae = class extends HTMLElement {
730
751
  e && e.remove();
731
752
  }
732
753
  };
733
- customElements.get("px-icon-set") || customElements.define("px-icon-set", ae);
734
- var oe = [
754
+ customElements.get("px-icon-set") || customElements.define("px-icon-set", j);
755
+ var M = [
735
756
  "Inherit",
736
757
  "Brand",
737
758
  "Accent",
@@ -745,12 +766,14 @@ var oe = [
745
766
  "StateHover",
746
767
  "StateActive",
747
768
  "StateDisabled"
748
- ].map((e) => e.replace(/([A-Z])/g, "-$1").toLowerCase().slice(1)), se = ":host{flex-direction:column;justify-content:center;display:inline-flex}svg{font-size:var(--px-size-icon-s);width:1em;height:1em;color:var(--px-color-icon-accent-default);line-height:1}.inherit{color:inherit}.brand{color:var(--px-color-icon-brand-default)}.accent{color:var(--px-color-icon-accent-default)}.neutral{color:var(--px-color-icon-neutral-default)}.dimmed{color:var(--px-color-icon-dimmed-default)}.purpose-success{color:var(--px-color-icon-purpose-success-default)}.purpose-warning{color:var(--px-color-icon-purpose-warning-default)}.purpose-error{color:var(--px-color-icon-purpose-error-default)}.purpose-unlimited{color:var(--px-color-icon-purpose-unlimited-default)}.purpose-promo{color:var(--px-color-icon-purpose-promo-default)}.state-hover:hover{color:var(--px-color-icon-state-hover-default)}.state-active:active{color:var(--px-color-icon-state-active-default)}.state-disabled{color:var(--px-color-icon-state-disabled-default)}:host([inverted]) svg{color:var(--px-color-icon-accent-inverted)}:host([inverted]) .inherit{color:inherit}:host([inverted]) .brand{color:var(--px-color-icon-brand-inverted)}:host([inverted]) .accent{color:var(--px-color-icon-accent-inverted)}:host([inverted]) .neutral{color:var(--px-color-icon-neutral-inverted)}:host([inverted]) .dimmed{color:var(--px-color-icon-dimmed-inverted)}:host([inverted]) .purpose-success{color:var(--px-color-icon-purpose-success-inverted)}:host([inverted]) .purpose-warning{color:var(--px-color-icon-purpose-warning-inverted)}:host([inverted]) .purpose-error{color:var(--px-color-icon-purpose-error-inverted)}:host([inverted]) .purpose-unlimited{color:var(--px-color-icon-purpose-unlimited-inverted)}:host([inverted]) .purpose-promo{color:var(--px-color-icon-purpose-promo-inverted)}:host([inverted]) .state-hover:hover{color:var(--px-color-icon-state-hover-inverted)}:host([inverted]) .state-active:active{color:var(--px-color-icon-state-active-inverted)}:host([inverted]) .state-disabled{color:var(--px-color-icon-state-disabled-inverted)}.size-xs{font-size:var(--px-size-icon-xs)}.size-s{font-size:var(--px-size-icon-s)}.size-m{font-size:var(--px-size-icon-m)}.size-l{font-size:var(--px-size-icon-l)}.size-xl{font-size:var(--px-size-icon-xl)}", D = new CSSStyleSheet();
749
- D.replaceSync(se);
750
- var O = class extends n {
769
+ ].map((e) => e.replace(/([A-Z])/g, "-$1").toLowerCase().slice(1)), ae = ":host{flex-direction:column;justify-content:center;display:inline-flex}svg{font-size:var(--px-size-icon-s);width:1em;height:1em;color:var(--px-color-icon-accent-default);line-height:1}.inherit{color:inherit}.brand{color:var(--px-color-icon-brand-default)}.accent{color:var(--px-color-icon-accent-default)}.neutral{color:var(--px-color-icon-neutral-default)}.dimmed{color:var(--px-color-icon-dimmed-default)}.purpose-success{color:var(--px-color-icon-purpose-success-default)}.purpose-warning{color:var(--px-color-icon-purpose-warning-default)}.purpose-error{color:var(--px-color-icon-purpose-error-default)}.purpose-unlimited{color:var(--px-color-icon-purpose-unlimited-default)}.purpose-promo{color:var(--px-color-icon-purpose-promo-default)}.state-hover:hover{color:var(--px-color-icon-state-hover-default)}.state-active:active{color:var(--px-color-icon-state-active-default)}.state-disabled{color:var(--px-color-icon-state-disabled-default)}:host([inverted]) svg{color:var(--px-color-icon-accent-inverted)}:host([inverted]) .inherit{color:inherit}:host([inverted]) .brand{color:var(--px-color-icon-brand-inverted)}:host([inverted]) .accent{color:var(--px-color-icon-accent-inverted)}:host([inverted]) .neutral{color:var(--px-color-icon-neutral-inverted)}:host([inverted]) .dimmed{color:var(--px-color-icon-dimmed-inverted)}:host([inverted]) .purpose-success{color:var(--px-color-icon-purpose-success-inverted)}:host([inverted]) .purpose-warning{color:var(--px-color-icon-purpose-warning-inverted)}:host([inverted]) .purpose-error{color:var(--px-color-icon-purpose-error-inverted)}:host([inverted]) .purpose-unlimited{color:var(--px-color-icon-purpose-unlimited-inverted)}:host([inverted]) .purpose-promo{color:var(--px-color-icon-purpose-promo-inverted)}:host([inverted]) .state-hover:hover{color:var(--px-color-icon-state-hover-inverted)}:host([inverted]) .state-active:active{color:var(--px-color-icon-state-active-inverted)}:host([inverted]) .state-disabled{color:var(--px-color-icon-state-disabled-inverted)}.size-xs{font-size:var(--px-size-icon-xs)}.size-s{font-size:var(--px-size-icon-s)}.size-m{font-size:var(--px-size-icon-m)}.size-l{font-size:var(--px-size-icon-l)}.size-xl{font-size:var(--px-size-icon-xl)}", N = new CSSStyleSheet();
770
+ N.replaceSync(ae);
771
+ var oe = class e extends n {
772
+ static {
773
+ this.template = s("<svg aria-hidden=\"true\"><use></use></svg>");
774
+ }
751
775
  #e = null;
752
776
  #t;
753
- #n = () => "<svg aria-hidden=\"true\">\n <use></use>\n </svg>";
754
777
  static get observedAttributes() {
755
778
  return [
756
779
  ...super.observedAttributes,
@@ -763,8 +786,8 @@ var O = class extends n {
763
786
  "disabled"
764
787
  ];
765
788
  }
766
- constructor(...e) {
767
- super(...e, D), this.shadowRoot.innerHTML = this.#n(), this.#t = this.attachInternals?.(), this.#t && (this.#t.role = "img");
789
+ constructor(...t) {
790
+ super(...t, N), f(this.shadowRoot, e.template), this.#t = this.attachInternals?.(), this.#t && (this.#t.role = "img");
768
791
  }
769
792
  attributeChangedCallback(e, t, n) {
770
793
  if (t !== n) switch (e) {
@@ -772,10 +795,10 @@ var O = class extends n {
772
795
  this.updateName(t, n);
773
796
  break;
774
797
  case "size":
775
- this.updateAttribute(e, t, n, c);
798
+ this.updateAttribute(e, t, n, l);
776
799
  break;
777
800
  case "color":
778
- this.updateAttribute(e, t, n, oe);
801
+ this.updateAttribute(e, t, n, M);
779
802
  break;
780
803
  case "disabled":
781
804
  this.color = "state-disabled";
@@ -799,7 +822,7 @@ var O = class extends n {
799
822
  !this.ariaLabel && this.#t && (this.#t.ariaHidden = "true", this.ariaHidden = "true"), this.parentElement?.localName === "px-a" && this.slot !== "before" && this.slot !== "after" && (this.color || this.setAttribute("color", "inherit"));
800
823
  }
801
824
  updateAttribute(e, t, n, r) {
802
- t !== null && t !== "" && (e === "size" ? this.$el.classList.toggle(`${e}-${t}`) : this.$el.classList.toggle(t)), n !== null && n !== "" && (e === "size" ? this.$el.classList.toggle(`${e}-${n}`) : this.$el.classList.toggle(n)), this.checkName(r, n) || l(`${n} is not an allowed ${e} value for ${this.tagName.toLowerCase()}`);
825
+ t !== null && t !== "" && (e === "size" ? this.$el.classList.toggle(`${e}-${t}`) : this.$el.classList.toggle(t)), n !== null && n !== "" && (e === "size" ? this.$el.classList.toggle(`${e}-${n}`) : this.$el.classList.toggle(n)), this.checkName(r, n) || u(`${n} is not an allowed ${e} value for ${this.tagName.toLowerCase()}`);
803
826
  }
804
827
  updateName(e, t) {
805
828
  this.#e && this.$el.firstElementChild?.setAttribute("href", `${this.#e}#icon-${t}`);
@@ -811,25 +834,25 @@ var O = class extends n {
811
834
  return this.getAttribute("name");
812
835
  }
813
836
  set name(e) {
814
- u(this, "name", e);
837
+ d(this, "name", e);
815
838
  }
816
839
  get size() {
817
840
  return this.getAttribute("size");
818
841
  }
819
842
  set size(e) {
820
- u(this, "size", e);
843
+ d(this, "size", e);
821
844
  }
822
845
  get color() {
823
846
  return this.getAttribute("color");
824
847
  }
825
848
  set color(e) {
826
- u(this, "color", e);
849
+ d(this, "color", e);
827
850
  }
828
851
  get arialabel() {
829
852
  return this.getAttribute("aria-label");
830
853
  }
831
854
  set arialabel(e) {
832
- u(this, "aria-label", e);
855
+ d(this, "aria-label", e);
833
856
  }
834
857
  get inverted() {
835
858
  return this.hasAttribute("inverted");
@@ -841,7 +864,7 @@ var O = class extends n {
841
864
  return this.getAttribute("from");
842
865
  }
843
866
  set from(e) {
844
- u(this, "from", e);
867
+ d(this, "from", e);
845
868
  }
846
869
  get disabled() {
847
870
  return this.hasAttribute("disabled");
@@ -850,18 +873,18 @@ var O = class extends n {
850
873
  a(this, "disabled", e);
851
874
  }
852
875
  };
853
- customElements.get("px-icon") || customElements.define("px-icon", O);
876
+ customElements.get("px-icon") || customElements.define("px-icon", oe);
854
877
  //#endregion
855
878
  //#region src/appleseed.css?inline
856
- var k = ":host{--px-appleseed-size-l:14px;--px-appleseed-size-m:10px;--px-appleseed-size-s:6px;--px-appleseed-size-xs:4px}.container{display:flex}:is(.container:has(#seed-0.appleseed-6-plus[active]),.container:has(#seed-1.appleseed-6-plus[active])) :nth-child(4)>div{width:var(--px-appleseed-size-s);height:var(--px-appleseed-size-s)}:is(.container:has(#seed-0.appleseed-6-plus[active]),.container:has(#seed-1.appleseed-6-plus[active])) :nth-child(5)>div{width:var(--px-appleseed-size-xs);height:var(--px-appleseed-size-xs)}:is(.container:has(#seed-2.appleseed-6-plus[active]) :nth-child(2),.container:has(#seed-2.appleseed-6-plus[active]) :nth-child(4))>div{width:var(--px-appleseed-size-s);height:var(--px-appleseed-size-s)}:is(.container:has(#seed-2.appleseed-6-plus[active]) :first-child,.container:has(#seed-2.appleseed-6-plus[active]) :nth-child(5))>div{width:var(--px-appleseed-size-xs);height:var(--px-appleseed-size-xs)}.container:has(#seed-3.appleseed-6-plus[active]) :first-child>div{width:var(--px-appleseed-size-xs);height:var(--px-appleseed-size-xs)}.container:has(#seed-3.appleseed-6-plus[active]) :nth-child(2)>div{width:var(--px-appleseed-size-s);height:var(--px-appleseed-size-s)}.container:has(#seed-3.appleseed-6-plus[active]) :nth-child(5)>div{width:var(--px-appleseed-size-xs);height:var(--px-appleseed-size-xs)}.container:has(#seed-4.appleseed-6-plus[active]) :first-child>div{width:var(--px-appleseed-size-xs);height:var(--px-appleseed-size-xs)}.container:has(#seed-4.appleseed-6-plus[active]) :nth-child(2)>div{width:var(--px-appleseed-size-s);height:var(--px-appleseed-size-s)}.appleseed{width:var(--px-size-icon-m);height:var(--px-size-icon-m);justify-content:center;align-items:center;display:flex}@media screen and (width<=47.938rem){.appleseed{width:var(--px-size-icon-s);height:var(--px-size-icon-s)}}:is(.appleseed-6-plus,.appleseed-6-minus)>div{box-shadow:inset 0 0 0 var(--px-size-border-s) var(--px-color-border-brand-default);border-radius:var(--px-radius-main);height:var(--px-appleseed-size-m);width:var(--px-appleseed-size-m)}:is(.appleseed-6-plus,.appleseed-6-minus)[active]>div{width:var(--px-appleseed-size-l);height:var(--px-appleseed-size-l);background-color:var(--px-color-icon-brand-default)}", A = new CSSStyleSheet();
857
- A.replaceSync(k);
858
- var j = class extends HTMLElement {
879
+ var se = ":host{--px-appleseed-size-l:14px;--px-appleseed-size-m:10px;--px-appleseed-size-s:6px;--px-appleseed-size-xs:4px}.container{display:flex}:is(.container:has(#seed-0.appleseed-6-plus[active]),.container:has(#seed-1.appleseed-6-plus[active])) :nth-child(4)>div{width:var(--px-appleseed-size-s);height:var(--px-appleseed-size-s)}:is(.container:has(#seed-0.appleseed-6-plus[active]),.container:has(#seed-1.appleseed-6-plus[active])) :nth-child(5)>div{width:var(--px-appleseed-size-xs);height:var(--px-appleseed-size-xs)}:is(.container:has(#seed-2.appleseed-6-plus[active]) :nth-child(2),.container:has(#seed-2.appleseed-6-plus[active]) :nth-child(4))>div{width:var(--px-appleseed-size-s);height:var(--px-appleseed-size-s)}:is(.container:has(#seed-2.appleseed-6-plus[active]) :first-child,.container:has(#seed-2.appleseed-6-plus[active]) :nth-child(5))>div{width:var(--px-appleseed-size-xs);height:var(--px-appleseed-size-xs)}.container:has(#seed-3.appleseed-6-plus[active]) :first-child>div{width:var(--px-appleseed-size-xs);height:var(--px-appleseed-size-xs)}.container:has(#seed-3.appleseed-6-plus[active]) :nth-child(2)>div{width:var(--px-appleseed-size-s);height:var(--px-appleseed-size-s)}.container:has(#seed-3.appleseed-6-plus[active]) :nth-child(5)>div{width:var(--px-appleseed-size-xs);height:var(--px-appleseed-size-xs)}.container:has(#seed-4.appleseed-6-plus[active]) :first-child>div{width:var(--px-appleseed-size-xs);height:var(--px-appleseed-size-xs)}.container:has(#seed-4.appleseed-6-plus[active]) :nth-child(2)>div{width:var(--px-appleseed-size-s);height:var(--px-appleseed-size-s)}.appleseed{width:var(--px-size-icon-m);height:var(--px-size-icon-m);justify-content:center;align-items:center;display:flex}@media screen and (width<=47.938rem){.appleseed{width:var(--px-size-icon-s);height:var(--px-size-icon-s)}}:is(.appleseed-6-plus,.appleseed-6-minus)>div{box-shadow:inset 0 0 0 var(--px-size-border-s) var(--px-color-border-brand-default);border-radius:var(--px-radius-main);height:var(--px-appleseed-size-m);width:var(--px-appleseed-size-m)}:is(.appleseed-6-plus,.appleseed-6-minus)[active]>div{width:var(--px-appleseed-size-l);height:var(--px-appleseed-size-l);background-color:var(--px-color-icon-brand-default)}", P = new CSSStyleSheet();
880
+ P.replaceSync(se);
881
+ var F = class extends HTMLElement {
859
882
  constructor() {
860
883
  super(), this.template = (e, t) => `<div class="container">
861
884
  ${Array.from({ length: Math.min(e, 5) }, (n, r) => `<div id="seed-${r}" ${t === r ? "active" : ""} class="appleseed ${e > 5 ? "appleseed-6-plus" : "appleseed-6-minus"}">
862
885
  <div></div>
863
886
  </div>`).join("")}
864
- </div>`, this.attachShadow({ mode: "open" }), this.shadowRoot.adoptedStyleSheets = [A], this.shadowRoot.innerHTML = this.template(this.amount, this.active);
887
+ </div>`, this.attachShadow({ mode: "open" }), this.shadowRoot.adoptedStyleSheets = [P], this.shadowRoot.innerHTML = this.template(this.amount, this.active);
865
888
  }
866
889
  static get observedAttributes() {
867
890
  return ["amount", "active"];
@@ -887,85 +910,85 @@ var j = class extends HTMLElement {
887
910
  return parseInt(this.getAttribute("active") ?? "0") || 0;
888
911
  }
889
912
  };
890
- customElements.get("px-appleseed") || customElements.define("px-appleseed", j);
913
+ customElements.get("px-appleseed") || customElements.define("px-appleseed", F);
891
914
  //#endregion
892
915
  //#region ../../../node_modules/lodash-es/isObject.js
893
- function M(e) {
916
+ function I(e) {
894
917
  var t = typeof e;
895
918
  return e != null && (t == "object" || t == "function");
896
919
  }
897
920
  //#endregion
898
921
  //#region ../../../node_modules/lodash-es/_freeGlobal.js
899
- var ce = typeof global == "object" && global && global.Object === Object && global, le = typeof self == "object" && self && self.Object === Object && self, N = ce || le || Function("return this")(), P = function() {
900
- return N.Date.now();
901
- }, F = /\s/;
902
- function I(e) {
903
- for (var t = e.length; t-- && F.test(e.charAt(t)););
922
+ var ce = typeof global == "object" && global && global.Object === Object && global, le = typeof self == "object" && self && self.Object === Object && self, L = ce || le || Function("return this")(), R = function() {
923
+ return L.Date.now();
924
+ }, z = /\s/;
925
+ function B(e) {
926
+ for (var t = e.length; t-- && z.test(e.charAt(t)););
904
927
  return t;
905
928
  }
906
929
  //#endregion
907
930
  //#region ../../../node_modules/lodash-es/_baseTrim.js
908
- var L = /^\s+/;
909
- function R(e) {
910
- return e && e.slice(0, I(e) + 1).replace(L, "");
931
+ var V = /^\s+/;
932
+ function H(e) {
933
+ return e && e.slice(0, B(e) + 1).replace(V, "");
911
934
  }
912
935
  //#endregion
913
936
  //#region ../../../node_modules/lodash-es/_Symbol.js
914
- var z = N.Symbol, B = Object.prototype, V = B.hasOwnProperty, H = B.toString, U = z ? z.toStringTag : void 0;
915
- function W(e) {
916
- var t = V.call(e, U), n = e[U];
937
+ var U = L.Symbol, W = Object.prototype, ue = W.hasOwnProperty, de = W.toString, G = U ? U.toStringTag : void 0;
938
+ function fe(e) {
939
+ var t = ue.call(e, G), n = e[G];
917
940
  try {
918
- e[U] = void 0;
941
+ e[G] = void 0;
919
942
  var r = !0;
920
943
  } catch {}
921
- var i = H.call(e);
922
- return r && (t ? e[U] = n : delete e[U]), i;
944
+ var i = de.call(e);
945
+ return r && (t ? e[G] = n : delete e[G]), i;
923
946
  }
924
947
  //#endregion
925
948
  //#region ../../../node_modules/lodash-es/_objectToString.js
926
- var ue = Object.prototype.toString;
927
- function de(e) {
928
- return ue.call(e);
949
+ var pe = Object.prototype.toString;
950
+ function me(e) {
951
+ return pe.call(e);
929
952
  }
930
953
  //#endregion
931
954
  //#region ../../../node_modules/lodash-es/_baseGetTag.js
932
- var fe = "[object Null]", pe = "[object Undefined]", G = z ? z.toStringTag : void 0;
933
- function me(e) {
934
- return e == null ? e === void 0 ? pe : fe : G && G in Object(e) ? W(e) : de(e);
955
+ var he = "[object Null]", ge = "[object Undefined]", K = U ? U.toStringTag : void 0;
956
+ function _e(e) {
957
+ return e == null ? e === void 0 ? ge : he : K && K in Object(e) ? fe(e) : me(e);
935
958
  }
936
959
  //#endregion
937
960
  //#region ../../../node_modules/lodash-es/isObjectLike.js
938
- function he(e) {
961
+ function ve(e) {
939
962
  return typeof e == "object" && !!e;
940
963
  }
941
964
  //#endregion
942
965
  //#region ../../../node_modules/lodash-es/isSymbol.js
943
- var ge = "[object Symbol]";
944
- function _e(e) {
945
- return typeof e == "symbol" || he(e) && me(e) == ge;
966
+ var ye = "[object Symbol]";
967
+ function be(e) {
968
+ return typeof e == "symbol" || ve(e) && _e(e) == ye;
946
969
  }
947
970
  //#endregion
948
971
  //#region ../../../node_modules/lodash-es/toNumber.js
949
- var K = NaN, ve = /^[-+]0x[0-9a-f]+$/i, ye = /^0b[01]+$/i, be = /^0o[0-7]+$/i, q = parseInt;
972
+ var q = NaN, xe = /^[-+]0x[0-9a-f]+$/i, Se = /^0b[01]+$/i, Ce = /^0o[0-7]+$/i, we = parseInt;
950
973
  function J(e) {
951
974
  if (typeof e == "number") return e;
952
- if (_e(e)) return K;
953
- if (M(e)) {
975
+ if (be(e)) return q;
976
+ if (I(e)) {
954
977
  var t = typeof e.valueOf == "function" ? e.valueOf() : e;
955
- e = M(t) ? t + "" : t;
978
+ e = I(t) ? t + "" : t;
956
979
  }
957
980
  if (typeof e != "string") return e === 0 ? e : +e;
958
- e = R(e);
959
- var n = ye.test(e);
960
- return n || be.test(e) ? q(e.slice(2), n ? 2 : 8) : ve.test(e) ? K : +e;
981
+ e = H(e);
982
+ var n = Se.test(e);
983
+ return n || Ce.test(e) ? we(e.slice(2), n ? 2 : 8) : xe.test(e) ? q : +e;
961
984
  }
962
985
  //#endregion
963
986
  //#region ../../../node_modules/lodash-es/debounce.js
964
- var xe = "Expected a function", Se = Math.max, Ce = Math.min;
965
- function we(e, t, n) {
987
+ var Te = "Expected a function", Ee = Math.max, De = Math.min;
988
+ function Oe(e, t, n) {
966
989
  var r, i, a, o, s, c, l = 0, u = !1, d = !1, f = !0;
967
- if (typeof e != "function") throw TypeError(xe);
968
- t = J(t) || 0, M(n) && (u = !!n.leading, d = "maxWait" in n, a = d ? Se(J(n.maxWait) || 0, t) : a, f = "trailing" in n ? !!n.trailing : f);
990
+ if (typeof e != "function") throw TypeError(Te);
991
+ t = J(t) || 0, I(n) && (u = !!n.leading, d = "maxWait" in n, a = d ? Ee(J(n.maxWait) || 0, t) : a, f = "trailing" in n ? !!n.trailing : f);
969
992
  function p(t) {
970
993
  var n = r, a = i;
971
994
  return r = i = void 0, l = t, o = e.apply(a, n), o;
@@ -975,14 +998,14 @@ function we(e, t, n) {
975
998
  }
976
999
  function h(e) {
977
1000
  var n = e - c, r = e - l, i = t - n;
978
- return d ? Ce(i, a - r) : i;
1001
+ return d ? De(i, a - r) : i;
979
1002
  }
980
1003
  function g(e) {
981
1004
  var n = e - c, r = e - l;
982
1005
  return c === void 0 || n >= t || n < 0 || d && r >= a;
983
1006
  }
984
1007
  function _() {
985
- var e = P();
1008
+ var e = R();
986
1009
  if (g(e)) return v(e);
987
1010
  s = setTimeout(_, h(e));
988
1011
  }
@@ -993,10 +1016,10 @@ function we(e, t, n) {
993
1016
  s !== void 0 && clearTimeout(s), l = 0, r = c = i = s = void 0;
994
1017
  }
995
1018
  function b() {
996
- return s === void 0 ? o : v(P());
1019
+ return s === void 0 ? o : v(R());
997
1020
  }
998
1021
  function x() {
999
- var e = P(), n = g(e);
1022
+ var e = R(), n = g(e);
1000
1023
  if (r = arguments, i = this, c = e, n) {
1001
1024
  if (s === void 0) return m(c);
1002
1025
  if (d) return clearTimeout(s), s = setTimeout(_, t), p(c);
@@ -1007,11 +1030,11 @@ function we(e, t, n) {
1007
1030
  }
1008
1031
  //#endregion
1009
1032
  //#region ../../../node_modules/lodash-es/throttle.js
1010
- var Te = "Expected a function";
1011
- function Ee(e, t, n) {
1033
+ var ke = "Expected a function";
1034
+ function Ae(e, t, n) {
1012
1035
  var r = !0, i = !0;
1013
- if (typeof e != "function") throw TypeError(Te);
1014
- return M(n) && (r = "leading" in n ? !!n.leading : r, i = "trailing" in n ? !!n.trailing : i), we(e, t, {
1036
+ if (typeof e != "function") throw TypeError(ke);
1037
+ return I(n) && (r = "leading" in n ? !!n.leading : r, i = "trailing" in n ? !!n.trailing : i), Oe(e, t, {
1015
1038
  leading: r,
1016
1039
  maxWait: t,
1017
1040
  trailing: i
@@ -1020,20 +1043,23 @@ function Ee(e, t, n) {
1020
1043
  //#endregion
1021
1044
  //#region src/Carousel.ts
1022
1045
  var Y = new CSSStyleSheet();
1023
- Y.replaceSync(d);
1024
- var X = "px-carousel-item-connected", Z = class extends HTMLElement {
1046
+ Y.replaceSync(p);
1047
+ var X = "px-carousel-item-connected", Z = class e extends HTMLElement {
1048
+ static {
1049
+ this.template = s("<px-vstack gap=\"default\"><div class=\"carousel\"><slot></slot></div><px-hstack\n id=\"appleseed-container\"\n justify-content=\"space-between\"\n justify-content--mobile=\"center\"\n ><px-appleseed active=\"0\"></px-appleseed><px-hstack id=\"button-icons\" gap=\"default\"><px-button-icon disabled id=\"previous\" aria-hidden=\"true\"><px-icon name=\"chevron_left\" from=\"lavender\"></px-icon></px-button-icon><px-button-icon id=\"next\" aria-hidden=\"true\"><px-icon name=\"chevron_right\" from=\"lavender\"></px-icon></px-button-icon></px-hstack></px-hstack></px-vstack>");
1050
+ }
1025
1051
  constructor() {
1026
- super(), this.template = "<px-vstack gap=\"default\">\n <div class=\"carousel\">\n <slot></slot>\n </div>\n <px-hstack\n id=\"appleseed-container\"\n justify-content=\"space-between\"\n justify-content--mobile=\"center\"\n >\n <px-appleseed active=\"0\"></px-appleseed>\n <px-hstack id=\"button-icons\" gap=\"default\">\n <px-button-icon disabled id=\"previous\" aria-hidden=\"true\">\n <px-icon name=\"chevron_left\" from=\"lavender\"></px-icon>\n </px-button-icon>\n <px-button-icon id=\"next\" aria-hidden=\"true\">\n <px-icon name=\"chevron_right\" from=\"lavender\"></px-icon>\n </px-button-icon>\n </px-hstack>\n </px-hstack>\n </px-vstack>", this.onScroll = () => {
1052
+ super(), this.onScroll = () => {
1027
1053
  let e = this.$carousel.scrollLeft, t = this.$carousel.scrollWidth, n = this.$carousel.clientWidth, r = 0;
1028
1054
  r = window.innerWidth < 768 ? Math.round(e / (t - n) * (this.itemNumbers - 1)) : Math.ceil(e + n) + 10 >= t ? this.itemNumbers - 1 : Math.floor(e / this.$firstItem.offsetWidth + 1) - 1;
1029
1055
  let i = r;
1030
1056
  this.itemNumbers > 5 && (r > 2 && r < this.itemNumbers - 2 ? i = 2 : r === this.itemNumbers - 2 ? i = 3 : r === this.itemNumbers - 1 && (i = 4)), this.$appleseed.setAttribute("active", `${i}`), this.handleNextPrevious();
1031
- }, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template, this.shadowRoot.adoptedStyleSheets = [Y];
1057
+ }, this.attachShadow({ mode: "open" }), f(this.shadowRoot, e.template), this.shadowRoot.adoptedStyleSheets = [Y];
1032
1058
  }
1033
1059
  connectedCallback() {
1034
1060
  this.addEventListener(X, () => {
1035
1061
  this.#e();
1036
- }), this.#e(), this.$carousel.addEventListener("scroll", Ee(this.onScroll, 500)), this.$previous.addEventListener("click", () => {
1062
+ }), this.#e(), this.$carousel.addEventListener("scroll", Ae(this.onScroll, 500)), this.$previous.addEventListener("click", () => {
1037
1063
  this.$carousel.scrollLeft -= this.$carousel.clientWidth;
1038
1064
  }), this.$next.addEventListener("click", () => {
1039
1065
  this.$carousel.scrollLeft += this.$carousel.clientWidth;
@@ -1080,10 +1106,13 @@ var X = "px-carousel-item-connected", Z = class extends HTMLElement {
1080
1106
  };
1081
1107
  customElements.get("px-carousel") || customElements.define("px-carousel", Z);
1082
1108
  var Q = new CSSStyleSheet();
1083
- Q.replaceSync(f);
1084
- var $ = class extends HTMLElement {
1109
+ Q.replaceSync(m);
1110
+ var $ = class e extends HTMLElement {
1111
+ static {
1112
+ this.template = s("<div class=\"carousel-item\"><slot></slot></div>");
1113
+ }
1085
1114
  constructor() {
1086
- super(), this.template = "\n <div class=\"carousel-item\">\n <slot></slot>\n </div>", this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template, this.shadowRoot.adoptedStyleSheets = [Q];
1115
+ super(), this.attachShadow({ mode: "open" }), f(this.shadowRoot, e.template), this.shadowRoot.adoptedStyleSheets = [Q];
1087
1116
  }
1088
1117
  connectedCallback() {
1089
1118
  this.dispatchEvent(new CustomEvent(X, {
@@ -1094,4 +1123,4 @@ var $ = class extends HTMLElement {
1094
1123
  };
1095
1124
  customElements.get("px-carousel-item") || customElements.define("px-carousel-item", $);
1096
1125
  //#endregion
1097
- export { j as AppleSeed, X as CAROUSEL_ITEM_CONNECTED_EVENT, Z as Carousel, $ as CarouselItem };
1126
+ export { F as AppleSeed, X as CAROUSEL_ITEM_CONNECTED_EVENT, Z as Carousel, $ as CarouselItem };
package/dist/web-types.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
3
3
  "name": "@proximus/lavender-carousel",
4
- "version": "2.0.0-alpha.203",
4
+ "version": "2.0.0-alpha.204",
5
5
  "description-markup": "markdown",
6
6
  "contributions": {
7
7
  "html": {
@@ -35,7 +35,6 @@
35
35
  "events": [],
36
36
  "js": {
37
37
  "properties": [
38
- { "name": "template" },
39
38
  { "name": "$appleseedContainer" },
40
39
  { "name": "$appleseed" },
41
40
  { "name": "$carousel" },
@@ -43,7 +42,6 @@
43
42
  { "name": "$next" },
44
43
  { "name": "$firstItem" },
45
44
  { "name": "itemNumbers" },
46
- { "name": "innerHTML" },
47
45
  { "name": "adoptedStyleSheets", "type": "array" }
48
46
  ],
49
47
  "events": []
@@ -58,11 +56,7 @@
58
56
  { "name": "CAROUSEL_ITEM_CONNECTED_EVENT", "type": "CustomEvent" }
59
57
  ],
60
58
  "js": {
61
- "properties": [
62
- { "name": "template" },
63
- { "name": "innerHTML" },
64
- { "name": "adoptedStyleSheets", "type": "array" }
65
- ],
59
+ "properties": [{ "name": "adoptedStyleSheets", "type": "array" }],
66
60
  "events": [
67
61
  { "name": "CAROUSEL_ITEM_CONNECTED_EVENT", "type": "CustomEvent" }
68
62
  ]
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@proximus/lavender-carousel",
3
- "version": "2.0.0-alpha.203",
3
+ "version": "2.0.0-alpha.204",
4
4
  "description": "",
5
5
  "main": "dist/index.es.js",
6
6
  "types": "dist/index.d.ts",