@zanichelli/albe-web-components 17.0.3 → 17.0.5-RC1

package/dist/cjs/z-toggle-button.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-96af6326.js');
 
-const stylesCss = "button{display:flex;height:36px;align-items:center;padding-right:calc(var(--space-unit) * 2);padding-left:0;border:var(--border-size-medium) solid;border-color:transparent;background-color:var(--color-surface01);border-radius:var(--border-radius);box-shadow:0 0 4px 0 rgb(0 0 0 / 20%);color:var(--color-primary01);cursor:pointer;fill:var(--color-primary01);font-family:var(--font-family-sans);font-size:14px;font-weight:var(--font-sb);outline:none;text-transform:uppercase}button::-moz-focus-inner{border:0}button:hover{color:var(--color-hover-primary);fill:var(--color-hover-primary)}button:focus{box-shadow:var(--shadow-focus-primary)}button:active{border-color:var(--color-pressed-primary);box-shadow:var(--shadow-2);color:var(--color-pressed-primary);fill:var(--color-pressed-primary)}button:disabled{color:var(--color-disabled03);fill:var(--color-disabled03)}z-icon{display:inline-block;margin:0 var(--space-unit) 0 calc(var(--space-unit) * 2);transform:rotate(360deg);transition:all 200ms linear}button.isopen{top:-20px}button.avoid-clicks{pointer-events:none}";
+const stylesCss = "button{display:-ms-flexbox;display:flex;height:36px;-ms-flex-align:center;align-items:center;padding-right:calc(var(--space-unit) * 2);padding-left:0;border:var(--border-size-medium) solid;border-color:transparent;background-color:var(--color-surface01);border-radius:var(--border-radius);-webkit-box-shadow:0 0 4px 0 rgb(0 0 0 / 20%);box-shadow:0 0 4px 0 rgb(0 0 0 / 20%);color:var(--color-primary01);cursor:pointer;fill:var(--color-primary01);font-family:var(--font-family-sans);font-size:14px;font-weight:var(--font-sb);outline:none;text-transform:uppercase}button::-moz-focus-inner{border:0}button:hover{color:var(--color-hover-primary);fill:var(--color-hover-primary)}button:focus{-webkit-box-shadow:var(--shadow-focus-primary);box-shadow:var(--shadow-focus-primary)}button:active{border-color:var(--color-pressed-primary);-webkit-box-shadow:var(--shadow-2);box-shadow:var(--shadow-2);color:var(--color-pressed-primary);fill:var(--color-pressed-primary)}button:disabled{color:var(--color-disabled03);fill:var(--color-disabled03)}z-icon{display:inline-block;margin:0 var(--space-unit) 0 calc(var(--space-unit) * 2);-webkit-transform:rotate(360deg);transform:rotate(360deg);-webkit-transition:all 200ms linear;transition:all 200ms linear}button.isopen{top:-20px}button.avoid-clicks{pointer-events:none}";
 const ZToggleButtonStyle0 = stylesCss;
 
 const ZToggleButton = class {

package/dist/cjs/z-toggle-button.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"z-toggle-button.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,SAAS,GAAG,4iCAA4iC,CAAC;AAC/jC,4BAAe,SAAS;;MCMX,aAAa;;;;;0BAOD,KAAK;;sBAQT,KAAK;yBAIZ,EAAE;;IAMN,eAAe;QACrB,IAAI,IAAI,CAAC,UAAU,EAAE;YACnB,OAAO;SACR;QAED,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;QAC3B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;KACpC;IAED,MAAM;QACJ,QACEA,qEACE,QAAQ,EAAE,IAAI,CAAC,UAAU,GAAG,IAAI,GAAG,GAAG,EACtC,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI,CAAC,MAAM;gBACrB,cAAc,EAAE,IAAI,CAAC,UAAU;aAChC,EACD,QAAQ,EAAE,IAAI,CAAC,UAAU,mBACV,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,gBACjC,IAAI,CAAC,SAAS,EAC1B,OAAO,EAAE,MAAM,IAAI,CAAC,eAAe,EAAE,IAErCA,qEACE,IAAI,EAAE,IAAI,CAAC,MAAM,GAAG,cAAc,GAAG,YAAY,EACjD,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,GACV,EACD,IAAI,CAAC,KAAK,CACJ,EACT;KACH;;;;;;","names":["h"],"sources":["src/components/z-toggle-button/styles.css?tag=z-toggle-button&encapsulation=shadow","src/components/z-toggle-button/index.tsx"],"sourcesContent":["button {\n  display: flex;\n  height: 36px;\n  align-items: center;\n  padding-right: calc(var(--space-unit) * 2);\n  padding-left: 0;\n  border: var(--border-size-medium) solid;\n  border-color: transparent;\n  background-color: var(--color-surface01);\n  border-radius: var(--border-radius);\n  box-shadow: 0 0 4px 0 rgb(0 0 0 / 20%);\n  color: var(--color-primary01);\n  cursor: pointer;\n  fill: var(--color-primary01);\n  font-family: var(--font-family-sans);\n  font-size: 14px;\n  font-weight: var(--font-sb);\n  outline: none;\n  text-transform: uppercase;\n}\n\nbutton::-moz-focus-inner {\n  border: 0;\n}\n\nbutton:hover {\n  color: var(--color-hover-primary);\n  fill: var(--color-hover-primary);\n}\n\nbutton:focus {\n  box-shadow: var(--shadow-focus-primary);\n}\n\nbutton:active {\n  border-color: var(--color-pressed-primary);\n  box-shadow: var(--shadow-2);\n  color: var(--color-pressed-primary);\n  fill: var(--color-pressed-primary);\n}\n\nbutton:disabled {\n  color: var(--color-disabled03);\n  fill: var(--color-disabled03);\n}\n\nz-icon {\n  display: inline-block;\n  margin: 0 var(--space-unit) 0 calc(var(--space-unit) * 2);\n  transform: rotate(360deg);\n  transition: all 200ms linear;\n}\n\nbutton.isopen {\n  top: -20px;\n}\n\nbutton.avoid-clicks {\n  pointer-events: none;\n}\n","import {Component, Event, EventEmitter, Prop, h} from \"@stencil/core\";\n\n@Component({\n  tag: \"z-toggle-button\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZToggleButton {\n  /** label text */\n  @Prop()\n  label: string;\n\n  /** disabled status flag (optional) */\n  @Prop()\n  isdisabled?: boolean = false;\n\n  /** avoidclick status flag */\n  @Prop()\n  avoidclick: boolean;\n\n  /** open by default (optional) */\n  @Prop({mutable: true})\n  opened?: boolean = false;\n\n  /**  aria-label for the button */\n  @Prop()\n  ariaLabel = \"\";\n\n  /** emitted on toggle button click, returns isOpen */\n  @Event()\n  toggleClick: EventEmitter;\n\n  private emitToggleClick(): void {\n    if (this.isdisabled) {\n      return;\n    }\n\n    this.opened = !this.opened;\n    this.toggleClick.emit(this.opened);\n  }\n\n  render(): HTMLButtonElement {\n    return (\n      <button\n        tabindex={this.avoidclick ? \"-1\" : \"0\"}\n        class={{\n          \"isopen\": this.opened,\n          \"avoid-clicks\": this.avoidclick,\n        }}\n        disabled={this.isdisabled}\n        aria-expanded={this.opened ? \"true\" : \"false\"}\n        aria-label={this.ariaLabel}\n        onClick={() => this.emitToggleClick()}\n      >\n        <z-icon\n          name={this.opened ? \"chevron-down\" : \"chevron-up\"}\n          width={16}\n          height={16}\n        />\n        {this.label}\n      </button>\n    );\n  }\n}\n"],"version":3}
+{"file":"z-toggle-button.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,SAAS,GAAG,2xCAA2xC,CAAC;AAC9yC,4BAAe,SAAS;;MCMX,aAAa;;;;;0BAOD,KAAK;;sBAQT,KAAK;yBAIZ,EAAE;;IAMN,eAAe;QACrB,IAAI,IAAI,CAAC,UAAU,EAAE;YACnB,OAAO;SACR;QAED,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;QAC3B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;KACpC;IAED,MAAM;QACJ,QACEA,qEACE,QAAQ,EAAE,IAAI,CAAC,UAAU,GAAG,IAAI,GAAG,GAAG,EACtC,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI,CAAC,MAAM;gBACrB,cAAc,EAAE,IAAI,CAAC,UAAU;aAChC,EACD,QAAQ,EAAE,IAAI,CAAC,UAAU,mBACV,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,gBACjC,IAAI,CAAC,SAAS,EAC1B,OAAO,EAAE,MAAM,IAAI,CAAC,eAAe,EAAE,IAErCA,qEACE,IAAI,EAAE,IAAI,CAAC,MAAM,GAAG,cAAc,GAAG,YAAY,EACjD,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,GACV,EACD,IAAI,CAAC,KAAK,CACJ,EACT;KACH;;;;;;","names":["h"],"sources":["src/components/z-toggle-button/styles.css?tag=z-toggle-button&encapsulation=shadow","src/components/z-toggle-button/index.tsx"],"sourcesContent":["button {\n  display: flex;\n  height: 36px;\n  align-items: center;\n  padding-right: calc(var(--space-unit) * 2);\n  padding-left: 0;\n  border: var(--border-size-medium) solid;\n  border-color: transparent;\n  background-color: var(--color-surface01);\n  border-radius: var(--border-radius);\n  box-shadow: 0 0 4px 0 rgb(0 0 0 / 20%);\n  color: var(--color-primary01);\n  cursor: pointer;\n  fill: var(--color-primary01);\n  font-family: var(--font-family-sans);\n  font-size: 14px;\n  font-weight: var(--font-sb);\n  outline: none;\n  text-transform: uppercase;\n}\n\nbutton::-moz-focus-inner {\n  border: 0;\n}\n\nbutton:hover {\n  color: var(--color-hover-primary);\n  fill: var(--color-hover-primary);\n}\n\nbutton:focus {\n  box-shadow: var(--shadow-focus-primary);\n}\n\nbutton:active {\n  border-color: var(--color-pressed-primary);\n  box-shadow: var(--shadow-2);\n  color: var(--color-pressed-primary);\n  fill: var(--color-pressed-primary);\n}\n\nbutton:disabled {\n  color: var(--color-disabled03);\n  fill: var(--color-disabled03);\n}\n\nz-icon {\n  display: inline-block;\n  margin: 0 var(--space-unit) 0 calc(var(--space-unit) * 2);\n  transform: rotate(360deg);\n  transition: all 200ms linear;\n}\n\nbutton.isopen {\n  top: -20px;\n}\n\nbutton.avoid-clicks {\n  pointer-events: none;\n}\n","import {Component, Event, EventEmitter, Prop, h} from \"@stencil/core\";\n\n@Component({\n  tag: \"z-toggle-button\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZToggleButton {\n  /** label text */\n  @Prop()\n  label: string;\n\n  /** disabled status flag (optional) */\n  @Prop()\n  isdisabled?: boolean = false;\n\n  /** avoidclick status flag */\n  @Prop()\n  avoidclick: boolean;\n\n  /** open by default (optional) */\n  @Prop({mutable: true})\n  opened?: boolean = false;\n\n  /**  aria-label for the button */\n  @Prop()\n  ariaLabel = \"\";\n\n  /** emitted on toggle button click, returns isOpen */\n  @Event()\n  toggleClick: EventEmitter;\n\n  private emitToggleClick(): void {\n    if (this.isdisabled) {\n      return;\n    }\n\n    this.opened = !this.opened;\n    this.toggleClick.emit(this.opened);\n  }\n\n  render(): HTMLButtonElement {\n    return (\n      <button\n        tabindex={this.avoidclick ? \"-1\" : \"0\"}\n        class={{\n          \"isopen\": this.opened,\n          \"avoid-clicks\": this.avoidclick,\n        }}\n        disabled={this.isdisabled}\n        aria-expanded={this.opened ? \"true\" : \"false\"}\n        aria-label={this.ariaLabel}\n        onClick={() => this.emitToggleClick()}\n      >\n        <z-icon\n          name={this.opened ? \"chevron-down\" : \"chevron-up\"}\n          width={16}\n          height={16}\n        />\n        {this.label}\n      </button>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/z-toggle-switch.cjs.entry.js

@@ -7,7 +7,7 @@ const index$1 = require('./index-f5ebcaa2.js');
 const utils = require('./utils-d08d4b80.js');
 require('./breakpoints-8a1e87e0.js');
 
-const stylesCss = ".sc-z-toggle-switch-h{position:relative;display:inline-flex;font-family:var(--font-family-sans);font-weight:var(--font-rg)}label.sc-z-toggle-switch{display:flex;flex-direction:row;align-items:center;cursor:pointer}label.disabled.sc-z-toggle-switch{cursor:default}label.right.sc-z-toggle-switch{flex-direction:row-reverse}label.sc-z-toggle-switch>span.sc-z-toggle-switch:first-child{color:var(--color-default-text);letter-spacing:0}label.left.sc-z-toggle-switch>span.sc-z-toggle-switch:first-child{margin-right:var(--space-unit)}label.right.sc-z-toggle-switch>span.sc-z-toggle-switch:first-child{margin-left:var(--space-unit)}label.sc-z-toggle-switch>span.container.sc-z-toggle-switch{position:relative;top:1px;left:1px;display:flex;width:calc(var(--space-unit) * 4);height:18px;align-items:center;background-color:var(--gray500);border-radius:var(--space-unit);color:var(--gray500);cursor:pointer}label.sc-z-toggle-switch>span.container.disabled.sc-z-toggle-switch,label.sc-z-toggle-switch>span.container.checked.disabled.sc-z-toggle-switch{background-color:var(--color-disabled01);cursor:default}label.sc-z-toggle-switch>span.container.checked.disabled.sc-z-toggle-switch>span.circle.sc-z-toggle-switch>z-icon.sc-z-toggle-switch{fill:var(--color-disabled01)}label.sc-z-toggle-switch>span.container.checked.sc-z-toggle-switch{background-color:var(--color-primary01);fill:var(--color-primary01)}input.sc-z-toggle-switch:focus:focus-visible+label.sc-z-toggle-switch>span.container.sc-z-toggle-switch:not(.disabled){box-shadow:var(--shadow-focus-primary);outline:none}input.sc-z-toggle-switch:focus:focus-visible+label.sc-z-toggle-switch>span.container.disabled.sc-z-toggle-switch{outline:none}label.sc-z-toggle-switch>span.container.sc-z-toggle-switch:not(.disabled):hover{background-color:var(--color-hover-primary);fill:var(--color-hover-primary)}label.sc-z-toggle-switch>span.container.sc-z-toggle-switch>span.circle.sc-z-toggle-switch{position:absolute;top:1px;left:1px;display:flex;width:calc(var(--space-unit) * 2);height:calc(var(--space-unit) * 2);align-items:center;justify-content:center;margin:0;background-color:var(--color-white);border-radius:7px;box-shadow:var(--shadow-1);transition:transform 0.3s ease}label.sc-z-toggle-switch>span.container.checked.sc-z-toggle-switch>span.circle.sc-z-toggle-switch{transform:translateX(calc(100% - 2px))}input[type=\"checkbox\"].sc-z-toggle-switch{position:absolute;z-index:-1;opacity:0;pointer-events:none}";
+const stylesCss = ".sc-z-toggle-switch-h{position:relative;display:-ms-inline-flexbox;display:inline-flex;font-family:var(--font-family-sans);font-weight:var(--font-rg)}label.sc-z-toggle-switch{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;cursor:pointer}label.disabled.sc-z-toggle-switch{cursor:default}label.right.sc-z-toggle-switch{-ms-flex-direction:row-reverse;flex-direction:row-reverse}label.sc-z-toggle-switch>span.sc-z-toggle-switch:first-child{color:var(--color-default-text);letter-spacing:0}label.left.sc-z-toggle-switch>span.sc-z-toggle-switch:first-child{margin-right:var(--space-unit)}label.right.sc-z-toggle-switch>span.sc-z-toggle-switch:first-child{margin-left:var(--space-unit)}label.sc-z-toggle-switch>span.container.sc-z-toggle-switch{position:relative;top:1px;left:1px;display:-ms-flexbox;display:flex;width:calc(var(--space-unit) * 4);height:18px;-ms-flex-align:center;align-items:center;background-color:var(--gray500);border-radius:var(--space-unit);color:var(--gray500);cursor:pointer}label.sc-z-toggle-switch>span.container.disabled.sc-z-toggle-switch,label.sc-z-toggle-switch>span.container.checked.disabled.sc-z-toggle-switch{background-color:var(--color-disabled01);cursor:default}label.sc-z-toggle-switch>span.container.checked.disabled.sc-z-toggle-switch>span.circle.sc-z-toggle-switch>z-icon.sc-z-toggle-switch{fill:var(--color-disabled01)}label.sc-z-toggle-switch>span.container.checked.sc-z-toggle-switch{background-color:var(--color-primary01);fill:var(--color-primary01)}input.sc-z-toggle-switch:focus:focus-visible+label.sc-z-toggle-switch>span.container.sc-z-toggle-switch:not(.disabled){-webkit-box-shadow:var(--shadow-focus-primary);box-shadow:var(--shadow-focus-primary);outline:none}input.sc-z-toggle-switch:focus:focus-visible+label.sc-z-toggle-switch>span.container.disabled.sc-z-toggle-switch{outline:none}label.sc-z-toggle-switch>span.container.sc-z-toggle-switch:not(.disabled):hover{background-color:var(--color-hover-primary);fill:var(--color-hover-primary)}label.sc-z-toggle-switch>span.container.sc-z-toggle-switch>span.circle.sc-z-toggle-switch{position:absolute;top:1px;left:1px;display:-ms-flexbox;display:flex;width:calc(var(--space-unit) * 2);height:calc(var(--space-unit) * 2);-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;margin:0;background-color:var(--color-white);border-radius:7px;-webkit-box-shadow:var(--shadow-1);box-shadow:var(--shadow-1);-webkit-transition:-webkit-transform 0.3s ease;transition:-webkit-transform 0.3s ease;transition:transform 0.3s ease;transition:transform 0.3s ease, -webkit-transform 0.3s ease}label.sc-z-toggle-switch>span.container.checked.sc-z-toggle-switch>span.circle.sc-z-toggle-switch{-webkit-transform:translateX(calc(100% - 2px));transform:translateX(calc(100% - 2px))}input[type=\"checkbox\"].sc-z-toggle-switch{position:absolute;z-index:-1;opacity:0;pointer-events:none}";
 const ZToggleSwitchStyle0 = stylesCss;
 
 const ZToggleSwitch = class {

package/dist/cjs/z-toggle-switch.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"z-toggle-switch.entry.cjs.js","mappings":";;;;;;;;;AAAA,MAAM,SAAS,GAAG,25EAA25E,CAAC;AAC96E,4BAAe,SAAS;;MCSX,aAAa;;;;wBAGH,KAAK;6BAITA,qBAAa,CAAC,IAAI;uBAIf,KAAK;sBAIhB,oBAAoBC,cAAQ,EAAE,EAAE;;IAMjC,eAAe;QACrB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;YACpB,EAAE,EAAE,IAAI,CAAC,MAAM;YACf,OAAO,EAAE,IAAI,CAAC,OAAO;SACtB,CAAC,CAAC;KACJ;IAEO,WAAW,CAAC,EAAE;QACpB,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,OAAO;SACR;QAED,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC;QACjC,IAAI,CAAC,eAAe,EAAE,CAAC;KACxB;IAED,MAAM;QACJ,QACEC,QAACC,UAAI,uDACHD,oEACE,EAAE,EAAE,IAAI,CAAC,MAAM,EACf,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,GACrC,EACFA,oEACE,OAAO,EAAE,IAAI,CAAC,MAAM,EACpB,KAAK,EAAE;gBACL,CAAC,IAAI,CAAC,aAAa,GAAG,IAAI;gBAC1B,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB,IAEDA,qEACEA,oEAAQ,CACH,EACPA,mEACE,KAAK,EAAE;gBACL,SAAS,EAAE,IAAI;gBACf,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,OAAO,EAAE,IAAI,CAAC,OAAO;aACtB,IAEDA,mEAAM,KAAK,EAAC,QAAQ,IACjB,IAAI,CAAC,OAAO,KACXA,qEACE,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EACV,IAAI,EAAC,WAAW,GACR,CACX,CACI,CACF,CACD,CACH,EACP;KACH;;;;;;","names":["LabelPosition","randomId","h","Host"],"sources":["src/components/z-toggle-switch/styles.css?tag=z-toggle-switch&encapsulation=scoped","src/components/z-toggle-switch/index.tsx"],"sourcesContent":[":host {\n  position: relative;\n  display: inline-flex;\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\nlabel {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  cursor: pointer;\n}\n\nlabel.disabled {\n  cursor: default;\n}\n\nlabel.right {\n  flex-direction: row-reverse;\n}\n\nlabel > span:first-child {\n  color: var(--color-default-text);\n  letter-spacing: 0;\n}\n\nlabel.left > span:first-child {\n  margin-right: var(--space-unit);\n}\n\nlabel.right > span:first-child {\n  margin-left: var(--space-unit);\n}\n\nlabel > span.container {\n  position: relative;\n  top: 1px;\n  left: 1px;\n  display: flex;\n  width: calc(var(--space-unit) * 4);\n  height: 18px;\n  align-items: center;\n  background-color: var(--gray500);\n  border-radius: var(--space-unit);\n  color: var(--gray500);\n  cursor: pointer;\n}\n\nlabel > span.container.disabled,\nlabel > span.container.checked.disabled {\n  background-color: var(--color-disabled01);\n  cursor: default;\n}\n\nlabel > span.container.checked.disabled > span.circle > z-icon {\n  fill: var(--color-disabled01);\n}\n\nlabel > span.container.checked {\n  background-color: var(--color-primary01);\n  fill: var(--color-primary01);\n}\n\ninput:focus:focus-visible + label > span.container:not(.disabled) {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\ninput:focus:focus-visible + label > span.container.disabled {\n  outline: none;\n}\n\nlabel > span.container:not(.disabled):hover {\n  background-color: var(--color-hover-primary);\n  fill: var(--color-hover-primary);\n}\n\nlabel > span.container > span.circle {\n  position: absolute;\n  top: 1px;\n  left: 1px;\n  display: flex;\n  width: calc(var(--space-unit) * 2);\n  height: calc(var(--space-unit) * 2);\n  align-items: center;\n  justify-content: center;\n  margin: 0;\n  background-color: var(--color-white);\n  border-radius: 7px;\n  box-shadow: var(--shadow-1);\n  transition: transform 0.3s ease;\n}\n\nlabel > span.container.checked > span.circle {\n  transform: translateX(calc(100% - 2px));\n}\n\ninput[type=\"checkbox\"] {\n  position: absolute;\n  z-index: -1;\n  opacity: 0;\n  pointer-events: none;\n}\n","import {Component, Event, EventEmitter, Host, Prop, h} from \"@stencil/core\";\nimport {LabelPosition} from \"../../beans\";\nimport {randomId} from \"../../utils/utils\";\n\n@Component({\n  tag: \"z-toggle-switch\",\n  styleUrl: \"styles.css\",\n  shadow: false,\n  scoped: true,\n})\nexport class ZToggleSwitch {\n  /** Disabled flag */\n  @Prop({reflect: true})\n  disabled?: boolean = false;\n\n  /** Label position */\n  @Prop({reflect: true})\n  labelPosition? = LabelPosition.LEFT;\n\n  /** Checked state */\n  @Prop({mutable: true})\n  checked?: boolean = false;\n\n  /** HTML id attribute to set to the internal checkbox */\n  @Prop()\n  htmlid = `toggle-switch-id-${randomId()}`;\n\n  /** Toggle click event */\n  @Event()\n  toggleClick: EventEmitter;\n\n  private emitToggleClick(): void {\n    this.toggleClick.emit({\n      id: this.htmlid,\n      checked: this.checked,\n    });\n  }\n\n  private handleClick(ev): void {\n    if (this.disabled) {\n      return;\n    }\n\n    this.checked = ev.target.checked;\n    this.emitToggleClick();\n  }\n\n  render(): HTMLZToggleSwitchElement {\n    return (\n      <Host>\n        <input\n          id={this.htmlid}\n          type=\"checkbox\"\n          checked={this.checked}\n          disabled={this.disabled}\n          onChange={this.handleClick.bind(this)}\n        />\n        <label\n          htmlFor={this.htmlid}\n          class={{\n            [this.labelPosition]: true,\n            disabled: this.disabled,\n          }}\n        >\n          <span>\n            <slot />\n          </span>\n          <span\n            class={{\n              container: true,\n              disabled: this.disabled,\n              checked: this.checked,\n            }}\n          >\n            <span class=\"circle\">\n              {this.checked && (\n                <z-icon\n                  width={12}\n                  height={12}\n                  name=\"checkmark\"\n                ></z-icon>\n              )}\n            </span>\n          </span>\n        </label>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"z-toggle-switch.entry.cjs.js","mappings":";;;;;;;;;AAAA,MAAM,SAAS,GAAG,k5FAAk5F,CAAC;AACr6F,4BAAe,SAAS;;MCSX,aAAa;;;;wBAGH,KAAK;6BAITA,qBAAa,CAAC,IAAI;uBAIf,KAAK;sBAIhB,oBAAoBC,cAAQ,EAAE,EAAE;;IAMjC,eAAe;QACrB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;YACpB,EAAE,EAAE,IAAI,CAAC,MAAM;YACf,OAAO,EAAE,IAAI,CAAC,OAAO;SACtB,CAAC,CAAC;KACJ;IAEO,WAAW,CAAC,EAAE;QACpB,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,OAAO;SACR;QAED,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC;QACjC,IAAI,CAAC,eAAe,EAAE,CAAC;KACxB;IAED,MAAM;QACJ,QACEC,QAACC,UAAI,uDACHD,oEACE,EAAE,EAAE,IAAI,CAAC,MAAM,EACf,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,GACrC,EACFA,oEACE,OAAO,EAAE,IAAI,CAAC,MAAM,EACpB,KAAK,EAAE;gBACL,CAAC,IAAI,CAAC,aAAa,GAAG,IAAI;gBAC1B,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB,IAEDA,qEACEA,oEAAQ,CACH,EACPA,mEACE,KAAK,EAAE;gBACL,SAAS,EAAE,IAAI;gBACf,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,OAAO,EAAE,IAAI,CAAC,OAAO;aACtB,IAEDA,mEAAM,KAAK,EAAC,QAAQ,IACjB,IAAI,CAAC,OAAO,KACXA,qEACE,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EACV,IAAI,EAAC,WAAW,GACR,CACX,CACI,CACF,CACD,CACH,EACP;KACH;;;;;;","names":["LabelPosition","randomId","h","Host"],"sources":["src/components/z-toggle-switch/styles.css?tag=z-toggle-switch&encapsulation=scoped","src/components/z-toggle-switch/index.tsx"],"sourcesContent":[":host {\n  position: relative;\n  display: inline-flex;\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\nlabel {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  cursor: pointer;\n}\n\nlabel.disabled {\n  cursor: default;\n}\n\nlabel.right {\n  flex-direction: row-reverse;\n}\n\nlabel > span:first-child {\n  color: var(--color-default-text);\n  letter-spacing: 0;\n}\n\nlabel.left > span:first-child {\n  margin-right: var(--space-unit);\n}\n\nlabel.right > span:first-child {\n  margin-left: var(--space-unit);\n}\n\nlabel > span.container {\n  position: relative;\n  top: 1px;\n  left: 1px;\n  display: flex;\n  width: calc(var(--space-unit) * 4);\n  height: 18px;\n  align-items: center;\n  background-color: var(--gray500);\n  border-radius: var(--space-unit);\n  color: var(--gray500);\n  cursor: pointer;\n}\n\nlabel > span.container.disabled,\nlabel > span.container.checked.disabled {\n  background-color: var(--color-disabled01);\n  cursor: default;\n}\n\nlabel > span.container.checked.disabled > span.circle > z-icon {\n  fill: var(--color-disabled01);\n}\n\nlabel > span.container.checked {\n  background-color: var(--color-primary01);\n  fill: var(--color-primary01);\n}\n\ninput:focus:focus-visible + label > span.container:not(.disabled) {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\ninput:focus:focus-visible + label > span.container.disabled {\n  outline: none;\n}\n\nlabel > span.container:not(.disabled):hover {\n  background-color: var(--color-hover-primary);\n  fill: var(--color-hover-primary);\n}\n\nlabel > span.container > span.circle {\n  position: absolute;\n  top: 1px;\n  left: 1px;\n  display: flex;\n  width: calc(var(--space-unit) * 2);\n  height: calc(var(--space-unit) * 2);\n  align-items: center;\n  justify-content: center;\n  margin: 0;\n  background-color: var(--color-white);\n  border-radius: 7px;\n  box-shadow: var(--shadow-1);\n  transition: transform 0.3s ease;\n}\n\nlabel > span.container.checked > span.circle {\n  transform: translateX(calc(100% - 2px));\n}\n\ninput[type=\"checkbox\"] {\n  position: absolute;\n  z-index: -1;\n  opacity: 0;\n  pointer-events: none;\n}\n","import {Component, Event, EventEmitter, Host, Prop, h} from \"@stencil/core\";\nimport {LabelPosition} from \"../../beans\";\nimport {randomId} from \"../../utils/utils\";\n\n@Component({\n  tag: \"z-toggle-switch\",\n  styleUrl: \"styles.css\",\n  shadow: false,\n  scoped: true,\n})\nexport class ZToggleSwitch {\n  /** Disabled flag */\n  @Prop({reflect: true})\n  disabled?: boolean = false;\n\n  /** Label position */\n  @Prop({reflect: true})\n  labelPosition? = LabelPosition.LEFT;\n\n  /** Checked state */\n  @Prop({mutable: true})\n  checked?: boolean = false;\n\n  /** HTML id attribute to set to the internal checkbox */\n  @Prop()\n  htmlid = `toggle-switch-id-${randomId()}`;\n\n  /** Toggle click event */\n  @Event()\n  toggleClick: EventEmitter;\n\n  private emitToggleClick(): void {\n    this.toggleClick.emit({\n      id: this.htmlid,\n      checked: this.checked,\n    });\n  }\n\n  private handleClick(ev): void {\n    if (this.disabled) {\n      return;\n    }\n\n    this.checked = ev.target.checked;\n    this.emitToggleClick();\n  }\n\n  render(): HTMLZToggleSwitchElement {\n    return (\n      <Host>\n        <input\n          id={this.htmlid}\n          type=\"checkbox\"\n          checked={this.checked}\n          disabled={this.disabled}\n          onChange={this.handleClick.bind(this)}\n        />\n        <label\n          htmlFor={this.htmlid}\n          class={{\n            [this.labelPosition]: true,\n            disabled: this.disabled,\n          }}\n        >\n          <span>\n            <slot />\n          </span>\n          <span\n            class={{\n              container: true,\n              disabled: this.disabled,\n              checked: this.checked,\n            }}\n          >\n            <span class=\"circle\">\n              {this.checked && (\n                <z-icon\n                  width={12}\n                  height={12}\n                  name=\"checkmark\"\n                ></z-icon>\n              )}\n            </span>\n          </span>\n        </label>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/z-tr.cjs.entry.js

@@ -2,13 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-aa56c709.js');
+const index = require('./index-c286015f.js');
 require('./index-96af6326.js');
 require('./utils-d08d4b80.js');
 require('./index-f5ebcaa2.js');
 require('./breakpoints-8a1e87e0.js');
-require('./index-2a9a328d.js');
-require('./index-b2f35532.js');
+require('./index-6c84c7e8.js');
+require('./index-72dcc0c1.js');
 
 
 

package/dist/cjs/z-visually-hidden.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-96af6326.js');
 
-const stylesCss = ":host{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;border:0;margin:0 -1px -1px 0;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}";
+const stylesCss = ":host{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;border:0;margin:0 -1px -1px 0;clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);white-space:nowrap}";
 const ZVisuallyHiddenStyle0 = stylesCss;
 
 const ZVisuallyHidden = class {

package/dist/cjs/z-visually-hidden.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"z-visually-hidden.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,SAAS,GAAG,kKAAkK,CAAC;AACrL,8BAAe,SAAS;;MCMX,eAAe;;;;IAC1B,MAAM;QACJ,OAAOA,oEAAQ,CAAC;KACjB;;;;;;","names":["h"],"sources":["src/components/z-visually-hidden/styles.css?tag=z-visually-hidden&encapsulation=shadow","src/components/z-visually-hidden/index.tsx"],"sourcesContent":[":host {\n  position: absolute;\n  overflow: hidden;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  border: 0;\n  margin: 0 -1px -1px 0;\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  white-space: nowrap;\n}\n","import {Component, h} from \"@stencil/core\";\n\n@Component({\n  tag: \"z-visually-hidden\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZVisuallyHidden {\n  render(): HTMLSlotElement {\n    return <slot />;\n  }\n}\n"],"version":3}
+{"file":"z-visually-hidden.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,SAAS,GAAG,+LAA+L,CAAC;AAClN,8BAAe,SAAS;;MCMX,eAAe;;;;IAC1B,MAAM;QACJ,OAAOA,oEAAQ,CAAC;KACjB;;;;;;","names":["h"],"sources":["src/components/z-visually-hidden/styles.css?tag=z-visually-hidden&encapsulation=shadow","src/components/z-visually-hidden/index.tsx"],"sourcesContent":[":host {\n  position: absolute;\n  overflow: hidden;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  border: 0;\n  margin: 0 -1px -1px 0;\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  white-space: nowrap;\n}\n","import {Component, h} from \"@stencil/core\";\n\n@Component({\n  tag: \"z-visually-hidden\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZVisuallyHidden {\n  render(): HTMLSlotElement {\n    return <slot />;\n  }\n}\n"],"version":3}

package/dist/collection/components/date-picker/z-date-picker/index.js

@@ -10,6 +10,8 @@ export class ZDatePicker {
         this.ariaLabel = "";
         this.label = undefined;
         this.mode = ZDatePickerMode.DATE;
+        this.name = undefined;
+        this.value = undefined;
         this.flatpickrPosition = ZDatePickerPosition.BOTTOM;
         this.inputError = false;
     }
@@ -146,17 +148,17 @@ export class ZDatePicker {
         }
     }
     renderSlottedContent() {
-        return (h("div", { class: `${this.datePickerId}-hidden` }, h("input", { class: "hidden-input", "data-input": true }), h("slot", { name: "toggle" })));
+        return (h("div", { class: `${this.datePickerId}-hidden` }, h("input", { class: "hidden-input", "data-input": true, name: this.name, value: this.value }), h("slot", { name: "toggle" })));
     }
     renderZInput() {
-        return (h("div", { class: `${this.datePickerId}-container` }, h("z-input", { "data-input": "data-input", ariaLabel: this.ariaLabel, label: this.label, class: this.datePickerId, type: InputType.TEXT, icon: "event", message: false, tabindex: "0", value: "", onStopTyping: (value) => {
+        return (h("div", { class: `${this.datePickerId}-container` }, h("z-input", { "data-input": "data-input", ariaLabel: this.ariaLabel, label: this.label, class: this.datePickerId, type: InputType.TEXT, icon: "event", message: false, name: this.name, tabindex: "0", value: this.value, onStopTyping: (value) => {
                 this.onStopTyping(value);
             }, onStartTyping: () => {
                 this.inputError = false;
             } })));
     }
     render() {
-        return (h("div", { key: '5008fbf943acb8f5ad3575646938266579d59e90', class: {
+        return (h("div", { key: 'd9ddcadf506aed9515054eae4460ffc3745be7bc', class: {
                 "flatpickr-toggle-container": true,
                 [this.flatpickrPosition]: true,
                 [this.mode]: true,
@@ -250,6 +252,42 @@ export class ZDatePicker {
                 "attribute": "mode",
                 "reflect": false,
                 "defaultValue": "ZDatePickerMode.DATE"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "[Optional] the datepicker input name"
+                },
+                "attribute": "name",
+                "reflect": false,
+                "defaultValue": "undefined"
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "[Optional] the datepicker input value"
+                },
+                "attribute": "value",
+                "reflect": false,
+                "defaultValue": "undefined"
             }
         };
     }

package/dist/collection/components/date-picker/z-date-picker/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/date-picker/z-date-picker/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Element, Event, EventEmitter, Listen, Prop, State, Watch, h} from \"@stencil/core\";\n\nimport flatpickr from \"flatpickr\";\nimport {Italian} from \"flatpickr/dist/l10n/it.js\";\nimport monthSelectPlugin from \"flatpickr/dist/plugins/monthSelect\";\nimport {InputType, ZDatePickerMode, ZDatePickerPosition} from \"../../../beans\";\nimport {setAriaOptions, setFlatpickrPosition, validateDate} from \"../utils\";\n\n@Component({\n  tag: \"z-date-picker\",\n  styleUrl: \"../styles.css\",\n  shadow: false,\n})\nexport class ZDatePicker {\n  @Element() element: HTMLZDatePickerElement;\n\n  /** unique id */\n  @Prop()\n  datePickerId: string;\n\n  /** z-input aria label */\n  @Prop()\n  ariaLabel = \"\";\n\n  /** z-input label */\n  @Prop()\n  label?: string;\n\n  /** [Optional] datepicker mode: date, datetime, only months */\n  @Prop()\n  mode: ZDatePickerMode = ZDatePickerMode.DATE;\n\n  @State()\n  flatpickrPosition: ZDatePickerPosition = ZDatePickerPosition.BOTTOM;\n\n  @State()\n  inputError = false;\n\n  private picker;\n\n  private hasChildren: boolean;\n\n  /** emitted when date changes, returns selected date */\n  @Event()\n  dateSelect: EventEmitter;\n\n  private emitDateSelect(date): void {\n    this.dateSelect.emit(date);\n  }\n\n  @Listen(\"keydown\", {target: \"body\", capture: true})\n  handleKeyDown(ev: KeyboardEvent): void {\n    if (ev.key === \"Escape\") {\n      this.picker?.close();\n    }\n\n    if (ev.key === \"Enter\" || ev.key === \" \") {\n      !this.hasChildren && this.picker?.open();\n\n      const isCrossIconEntered = document.activeElement.classList.contains(\"reset-icon\");\n\n      if (isCrossIconEntered) {\n        this.inputError = false;\n        this.picker?.setDate([]);\n        this.dateSelect.emit(null);\n      }\n\n      const flatpickrDayPressed = document.activeElement.classList.contains(\"flatpickr-day\");\n      if (flatpickrDayPressed) {\n        //Sistemare il toggle\n      }\n      const isPrevArrowEntered = document.activeElement.classList.contains(\"flatpickr-prev-month\");\n      const isNextArrowEntered = document.activeElement.classList.contains(\"flatpickr-next-month\");\n      const arrowPressed = isPrevArrowEntered || isNextArrowEntered;\n\n      arrowPressed && ev.key === \" \" && ev.preventDefault();\n\n      if (this.mode === ZDatePickerMode.MONTHS) {\n        isPrevArrowEntered && this.picker?.changeYear(this.picker.currentYear - 1);\n\n        isNextArrowEntered && this.picker?.changeYear(this.picker.currentYear + 1);\n\n        if (arrowPressed) {\n          const calendar = this.element.getElementsByClassName(\"flatpickr-calendar\")[0];\n          const months = calendar?.querySelectorAll(\".flatpickr-monthSelect-month\");\n          months?.forEach((element) => {\n            element.setAttribute(\"aria-label\", `${element.innerHTML} ${this.picker?.currentYear}`);\n          });\n\n          //Force check of the current day\n          months &&\n            Array.from(months).forEach((element, index) => {\n              const curMonth = new Date().getMonth();\n              const curYear = new Date().getFullYear();\n\n              if (index === curMonth) {\n                if (this.picker?.currentYear === curYear) {\n                  element.setAttribute(\"class\", \"flatpickr-monthSelect-month today\");\n                } else {\n                  element.setAttribute(\"class\", \"flatpickr-monthSelect-month\");\n                }\n              }\n            });\n        }\n      } else {\n        isPrevArrowEntered && this.picker?.changeMonth(-1);\n        isNextArrowEntered && this.picker?.changeMonth(1);\n      }\n    }\n  }\n\n  componentWillLoad(): void {\n    const customToggle = this.element.querySelector(\"[slot=toggle]\");\n    this.hasChildren = !!customToggle;\n    this.hasChildren && customToggle.setAttribute(\"data-toggle\", \"data-toggle\");\n  }\n\n  componentDidLoad(): void {\n    this.setupPickers();\n  }\n\n  @Watch(\"mode\")\n  setupPickers(): void {\n    const classToAppend = this.hasChildren ? `${this.datePickerId}-hidden` : `${this.datePickerId}-container`;\n\n    this.picker = flatpickr(`.${classToAppend}`, {\n      appendTo: this.element.children[0] as HTMLElement,\n      enableTime: this.mode === ZDatePickerMode.DATE_TIME,\n      locale: Italian,\n      allowInput: true,\n      dateFormat: this.mode === ZDatePickerMode.DATE_TIME ? \"d-m-Y - H:i\" : \"d-m-Y\",\n      ariaDateFormat: this.mode === ZDatePickerMode.MONTHS ? \"F Y\" : \"d F Y\",\n      minuteIncrement: 1,\n      // eslint-disable-next-line @typescript-eslint/naming-convention\n      time_24hr: true,\n      onChange: (_selectedDates, dateStr) => {\n        this.emitDateSelect(dateStr);\n      },\n      onOpen: () => {\n        setAriaOptions(this.element as HTMLElement, this.mode);\n        this.flatpickrPosition = setFlatpickrPosition(this.element as HTMLElement, this.mode);\n      },\n      onKeyDown: () => {\n        setAriaOptions(this.element as HTMLElement, this.mode);\n      },\n      wrap: true,\n      plugins: this.mode === ZDatePickerMode.MONTHS && [\n        monthSelectPlugin({\n          dateFormat: \"m-Y\",\n          altFormat: \"m-Y\",\n        }),\n      ],\n    });\n\n    this.element.querySelectorAll(\".flatpickr-weekday\").forEach((element) => {\n      element.innerHTML = element.innerHTML.trim().charAt(0);\n    });\n  }\n\n  private formatDate(date): string {\n    if (this.mode === ZDatePickerMode.DATE) {\n      return `${flatpickr.formatDate(date, \"d-m-Y\")}`;\n    } else if (this.mode === ZDatePickerMode.MONTHS) {\n      return `${flatpickr.formatDate(date, \"m-Y\")}`;\n    }\n\n    return `${flatpickr.formatDate(date, \"d-m-Y - H:i\")}`;\n  }\n\n  private onStopTyping(value): void {\n    let text = value.detail.value;\n\n    if (this.mode === ZDatePickerMode.MONTHS) {\n      text = \"01-\".concat(value.detail.value);\n    }\n\n    const englishData = text.split(\"-\");\n    const time = this.mode === ZDatePickerMode.DATE_TIME ? `T${englishData[3]}:00` : \"\";\n    const englishParsedData = `${englishData[2]}-${englishData[1]}-${englishData[0]}${time}`.split(\" \").join(\"\");\n\n    const isValidDate = validateDate(englishParsedData, this.mode === ZDatePickerMode.DATE_TIME);\n\n    if (text === \"\") {\n      this.inputError = false;\n      this.picker.setDate([]);\n      this.dateSelect.emit(null);\n    } else if (!isValidDate) {\n      this.inputError = true;\n      this.dateSelect.emit(null);\n    } else if (isValidDate) {\n      this.inputError = false;\n      this.picker.setDate([value.detail.value]);\n      this.dateSelect.emit(this.formatDate(new Date(englishParsedData)));\n    }\n  }\n\n  private renderSlottedContent(): HTMLDivElement {\n    return (\n      <div class={`${this.datePickerId}-hidden`}>\n        <input\n          class=\"hidden-input\"\n          data-input\n        ></input>\n        <slot name=\"toggle\"></slot>\n      </div>\n    );\n  }\n\n  private renderZInput(): HTMLDivElement {\n    return (\n      <div class={`${this.datePickerId}-container`}>\n        <z-input\n          data-input=\"data-input\"\n          ariaLabel={this.ariaLabel}\n          label={this.label}\n          class={this.datePickerId}\n          type={InputType.TEXT}\n          icon=\"event\"\n          message={false}\n          tabindex=\"0\"\n          value=\"\"\n          onStopTyping={(value) => {\n            this.onStopTyping(value);\n          }}\n          onStartTyping={() => {\n            this.inputError = false;\n          }}\n        ></z-input>\n      </div>\n    );\n  }\n\n  render(): HTMLDivElement {\n    return (\n      <div\n        class={{\n          \"flatpickr-toggle-container\": true,\n          [this.flatpickrPosition]: true,\n          [this.mode]: true,\n        }}\n      >\n        {this.hasChildren ? this.renderSlottedContent() : this.renderZInput()}\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/date-picker/z-date-picker/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Element, Event, EventEmitter, Listen, Prop, State, Watch, h} from \"@stencil/core\";\n\nimport flatpickr from \"flatpickr\";\nimport {Italian} from \"flatpickr/dist/l10n/it.js\";\nimport monthSelectPlugin from \"flatpickr/dist/plugins/monthSelect\";\nimport {InputType, ZDatePickerMode, ZDatePickerPosition} from \"../../../beans\";\nimport {setAriaOptions, setFlatpickrPosition, validateDate} from \"../utils\";\n\n@Component({\n  tag: \"z-date-picker\",\n  styleUrl: \"../styles.css\",\n  shadow: false,\n})\nexport class ZDatePicker {\n  @Element() element: HTMLZDatePickerElement;\n\n  /** unique id */\n  @Prop()\n  datePickerId: string;\n\n  /** z-input aria label */\n  @Prop()\n  ariaLabel = \"\";\n\n  /** z-input label */\n  @Prop()\n  label?: string;\n\n  /** [Optional] datepicker mode: date, datetime, only months */\n  @Prop()\n  mode: ZDatePickerMode = ZDatePickerMode.DATE;\n\n  /** [Optional] the datepicker input name */\n  @Prop()\n  name?: string = undefined;\n\n  /** [Optional] the datepicker input value */\n  @Prop()\n  value?: string = undefined;\n\n  @State()\n  flatpickrPosition: ZDatePickerPosition = ZDatePickerPosition.BOTTOM;\n\n  @State()\n  inputError = false;\n\n  private picker;\n\n  private hasChildren: boolean;\n\n  /** emitted when date changes, returns selected date */\n  @Event()\n  dateSelect: EventEmitter;\n\n  private emitDateSelect(date): void {\n    this.dateSelect.emit(date);\n  }\n\n  @Listen(\"keydown\", {target: \"body\", capture: true})\n  handleKeyDown(ev: KeyboardEvent): void {\n    if (ev.key === \"Escape\") {\n      this.picker?.close();\n    }\n\n    if (ev.key === \"Enter\" || ev.key === \" \") {\n      !this.hasChildren && this.picker?.open();\n\n      const isCrossIconEntered = document.activeElement.classList.contains(\"reset-icon\");\n\n      if (isCrossIconEntered) {\n        this.inputError = false;\n        this.picker?.setDate([]);\n        this.dateSelect.emit(null);\n      }\n\n      const flatpickrDayPressed = document.activeElement.classList.contains(\"flatpickr-day\");\n      if (flatpickrDayPressed) {\n        //Sistemare il toggle\n      }\n      const isPrevArrowEntered = document.activeElement.classList.contains(\"flatpickr-prev-month\");\n      const isNextArrowEntered = document.activeElement.classList.contains(\"flatpickr-next-month\");\n      const arrowPressed = isPrevArrowEntered || isNextArrowEntered;\n\n      arrowPressed && ev.key === \" \" && ev.preventDefault();\n\n      if (this.mode === ZDatePickerMode.MONTHS) {\n        isPrevArrowEntered && this.picker?.changeYear(this.picker.currentYear - 1);\n\n        isNextArrowEntered && this.picker?.changeYear(this.picker.currentYear + 1);\n\n        if (arrowPressed) {\n          const calendar = this.element.getElementsByClassName(\"flatpickr-calendar\")[0];\n          const months = calendar?.querySelectorAll(\".flatpickr-monthSelect-month\");\n          months?.forEach((element) => {\n            element.setAttribute(\"aria-label\", `${element.innerHTML} ${this.picker?.currentYear}`);\n          });\n\n          //Force check of the current day\n          months &&\n            Array.from(months).forEach((element, index) => {\n              const curMonth = new Date().getMonth();\n              const curYear = new Date().getFullYear();\n\n              if (index === curMonth) {\n                if (this.picker?.currentYear === curYear) {\n                  element.setAttribute(\"class\", \"flatpickr-monthSelect-month today\");\n                } else {\n                  element.setAttribute(\"class\", \"flatpickr-monthSelect-month\");\n                }\n              }\n            });\n        }\n      } else {\n        isPrevArrowEntered && this.picker?.changeMonth(-1);\n        isNextArrowEntered && this.picker?.changeMonth(1);\n      }\n    }\n  }\n\n  componentWillLoad(): void {\n    const customToggle = this.element.querySelector(\"[slot=toggle]\");\n    this.hasChildren = !!customToggle;\n    this.hasChildren && customToggle.setAttribute(\"data-toggle\", \"data-toggle\");\n  }\n\n  componentDidLoad(): void {\n    this.setupPickers();\n  }\n\n  @Watch(\"mode\")\n  setupPickers(): void {\n    const classToAppend = this.hasChildren ? `${this.datePickerId}-hidden` : `${this.datePickerId}-container`;\n\n    this.picker = flatpickr(`.${classToAppend}`, {\n      appendTo: this.element.children[0] as HTMLElement,\n      enableTime: this.mode === ZDatePickerMode.DATE_TIME,\n      locale: Italian,\n      allowInput: true,\n      dateFormat: this.mode === ZDatePickerMode.DATE_TIME ? \"d-m-Y - H:i\" : \"d-m-Y\",\n      ariaDateFormat: this.mode === ZDatePickerMode.MONTHS ? \"F Y\" : \"d F Y\",\n      minuteIncrement: 1,\n      // eslint-disable-next-line @typescript-eslint/naming-convention\n      time_24hr: true,\n      onChange: (_selectedDates, dateStr) => {\n        this.emitDateSelect(dateStr);\n      },\n      onOpen: () => {\n        setAriaOptions(this.element as HTMLElement, this.mode);\n        this.flatpickrPosition = setFlatpickrPosition(this.element as HTMLElement, this.mode);\n      },\n      onKeyDown: () => {\n        setAriaOptions(this.element as HTMLElement, this.mode);\n      },\n      wrap: true,\n      plugins: this.mode === ZDatePickerMode.MONTHS && [\n        monthSelectPlugin({\n          dateFormat: \"m-Y\",\n          altFormat: \"m-Y\",\n        }),\n      ],\n    });\n\n    this.element.querySelectorAll(\".flatpickr-weekday\").forEach((element) => {\n      element.innerHTML = element.innerHTML.trim().charAt(0);\n    });\n  }\n\n  private formatDate(date): string {\n    if (this.mode === ZDatePickerMode.DATE) {\n      return `${flatpickr.formatDate(date, \"d-m-Y\")}`;\n    } else if (this.mode === ZDatePickerMode.MONTHS) {\n      return `${flatpickr.formatDate(date, \"m-Y\")}`;\n    }\n\n    return `${flatpickr.formatDate(date, \"d-m-Y - H:i\")}`;\n  }\n\n  private onStopTyping(value): void {\n    let text = value.detail.value;\n\n    if (this.mode === ZDatePickerMode.MONTHS) {\n      text = \"01-\".concat(value.detail.value);\n    }\n\n    const englishData = text.split(\"-\");\n    const time = this.mode === ZDatePickerMode.DATE_TIME ? `T${englishData[3]}:00` : \"\";\n    const englishParsedData = `${englishData[2]}-${englishData[1]}-${englishData[0]}${time}`.split(\" \").join(\"\");\n\n    const isValidDate = validateDate(englishParsedData, this.mode === ZDatePickerMode.DATE_TIME);\n\n    if (text === \"\") {\n      this.inputError = false;\n      this.picker.setDate([]);\n      this.dateSelect.emit(null);\n    } else if (!isValidDate) {\n      this.inputError = true;\n      this.dateSelect.emit(null);\n    } else if (isValidDate) {\n      this.inputError = false;\n      this.picker.setDate([value.detail.value]);\n      this.dateSelect.emit(this.formatDate(new Date(englishParsedData)));\n    }\n  }\n\n  private renderSlottedContent(): HTMLDivElement {\n    return (\n      <div class={`${this.datePickerId}-hidden`}>\n        <input\n          class=\"hidden-input\"\n          data-input\n          name={this.name}\n          value={this.value}\n        ></input>\n        <slot name=\"toggle\"></slot>\n      </div>\n    );\n  }\n\n  private renderZInput(): HTMLDivElement {\n    return (\n      <div class={`${this.datePickerId}-container`}>\n        <z-input\n          data-input=\"data-input\"\n          ariaLabel={this.ariaLabel}\n          label={this.label}\n          class={this.datePickerId}\n          type={InputType.TEXT}\n          icon=\"event\"\n          message={false}\n          name={this.name}\n          tabindex=\"0\"\n          value={this.value}\n          onStopTyping={(value) => {\n            this.onStopTyping(value);\n          }}\n          onStartTyping={() => {\n            this.inputError = false;\n          }}\n        ></z-input>\n      </div>\n    );\n  }\n\n  render(): HTMLDivElement {\n    return (\n      <div\n        class={{\n          \"flatpickr-toggle-container\": true,\n          [this.flatpickrPosition]: true,\n          [this.mode]: true,\n        }}\n      >\n        {this.hasChildren ? this.renderSlottedContent() : this.renderZInput()}\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/date-picker/z-date-picker/index.stories.js

@@ -25,7 +25,7 @@ const StoryMeta = {
     render: (args) => html `
     <script>
       document.getElementById("${args.datePickerId}").addEventListener("dateSelect", (e) => {
-        const input = document.getElementById("output");
+        const input = document.getElementById("output-${args.datePickerId}");
         input.innerHTML = "[" + e.detail + "]";
       });
     </script>
@@ -37,12 +37,13 @@ const StoryMeta = {
           id=${args.datePickerId}
           ariaLabel=${args.ariaLabel}
           label=${args.label}
+          value=${args.value}
         ></z-date-picker>
       </div>
       <div class="story-output-container">
         <span>OUTPUT:</span>
         <br />
-        <span id="output" />
+        <span id="output-${args.datePickerId}" />
       </div>
     </div>
   `,
@@ -52,29 +53,38 @@ export const Date = {
     args: {
         datePickerId: "picker-01",
         label: "ZDatePicker with date",
+        value: "25-12-2024",
     },
 };
 export const DateAndTime = {
     args: {
         datePickerId: "picker-02",
         label: "ZDatePicker with date and time",
+        mode: ZDatePickerMode.DATE_TIME,
+        value: "05-12-2024 - 12:01",
+        name: "date-time-picker",
     },
 };
 export const MonthsOnly = {
     args: {
         datePickerId: "picker-03",
         label: "ZDatePicker with only months",
+        mode: ZDatePickerMode.MONTHS,
+        value: "12-2024",
+        name: "month-picker",
     },
 };
 export const CustomToggle = {
     args: {
         datePickerId: "picker-04",
         label: "date picker",
+        value: "25-01-2024",
+        name: "date-toogle-picker",
     },
     render: (args) => html `
     <script>
       document.getElementById("${args.datePickerId}").addEventListener("dateSelect", (e) => {
-        const input = document.getElementById("output");
+        const input = document.getElementById("output-${args.datePickerId}");
         input.innerHTML = "[" + e.detail + "]";
       });
     </script>
@@ -86,13 +96,15 @@ export const CustomToggle = {
           id=${args.datePickerId}
           ariaLabel=${args.ariaLabel}
           label=${args.label}
-          ><z-button slot="toggle">Open ZDatePicker</z-button></z-date-picker
+          value=${args.value}
         >
+          <z-button slot="toggle">Open ZDatePicker</z-button>
+        </z-date-picker>
       </div>
       <div class="story-output-container">
         <span>OUTPUT:</span>
         <br />
-        <span id="output" />
+        <span id="output-${args.datePickerId}" />
       </div>
     </div>
   `,

package/dist/collection/components/date-picker/z-date-picker/index.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../../src/components/date-picker/z-date-picker/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAEzB,OAAO,EAAC,eAAe,EAAC,MAAM,gBAAgB,CAAC;AAC/C,OAAO,sBAAsB,CAAC;AAC9B,OAAO,sBAAsB,CAAC;AAC9B,OAAO,SAAS,CAAC;AAEjB;;;GAGG;AACH,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,aAAa;IACpB,SAAS,EAAE,eAAe;IAC1B,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,eAAe,CAAC;YACvC,OAAO,EAAE;gBACP,IAAI,EAAE,cAAc;aACrB;SACF;KACF;IACD,IAAI,EAAE;QACJ,SAAS,EAAE,aAAa;QACxB,IAAI,EAAE,eAAe,CAAC,IAAI;KAC3B;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;iCAES,IAAI,CAAC,YAAY;;;;;;;;iBAQjC,IAAI,CAAC,IAAI;0BACA,IAAI,CAAC,YAAY;eAC5B,IAAI,CAAC,YAAY;sBACV,IAAI,CAAC,SAAS;kBAClB,IAAI,CAAC,KAAK;;;;;;;;;GASzB;CAC0B,CAAC;AAE9B,eAAe,SAAS,CAAC;AAIzB,MAAM,CAAC,MAAM,IAAI,GAAU;IACzB,IAAI,EAAE;QACJ,YAAY,EAAE,WAAW;QACzB,KAAK,EAAE,uBAAuB;KAC/B;CACc,CAAC;AAElB,MAAM,CAAC,MAAM,WAAW,GAAU;IAChC,IAAI,EAAE;QACJ,YAAY,EAAE,WAAW;QACzB,KAAK,EAAE,gCAAgC;KACxC;CACc,CAAC;AAElB,MAAM,CAAC,MAAM,UAAU,GAAU;IAC/B,IAAI,EAAE;QACJ,YAAY,EAAE,WAAW;QACzB,KAAK,EAAE,8BAA8B;KACtC;CACc,CAAC;AAElB,MAAM,CAAC,MAAM,YAAY,GAAU;IACjC,IAAI,EAAE;QACJ,YAAY,EAAE,WAAW;QACzB,KAAK,EAAE,aAAa;KACrB;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;iCAES,IAAI,CAAC,YAAY;;;;;;;;iBAQjC,IAAI,CAAC,IAAI;0BACA,IAAI,CAAC,YAAY;eAC5B,IAAI,CAAC,YAAY;sBACV,IAAI,CAAC,SAAS;kBAClB,IAAI,CAAC,KAAK;;;;;;;;;;GAUzB;CACc,CAAC","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {type ZDatePicker} from \".\";\nimport {ZDatePickerMode} from \"../../../beans\";\nimport \"../../z-button/index\";\nimport \"../index.stories.css\";\nimport \"./index\";\n\n/**\n * In order to avoid conflits between datepickers, pass a unique id as `datePickerId` prop.\n * This component emits an event called `dateSelect` with the value of the selected date.\n */\nconst StoryMeta = {\n  title: \"ZDatePicker\",\n  component: \"z-date-picker\",\n  argTypes: {\n    mode: {\n      options: Object.values(ZDatePickerMode),\n      control: {\n        type: \"inline-radio\",\n      },\n    },\n  },\n  args: {\n    ariaLabel: \"date-picker\",\n    mode: ZDatePickerMode.DATE,\n  },\n  render: (args) => html`\n    <script>\n      document.getElementById(\"${args.datePickerId}\").addEventListener(\"dateSelect\", (e) => {\n        const input = document.getElementById(\"output\");\n        input.innerHTML = \"[\" + e.detail + \"]\";\n      });\n    </script>\n    <div class=\"story-container\">\n      <div class=\"story-picker-container\">\n        <z-date-picker\n          mode=${args.mode}\n          .datePickerId=${args.datePickerId}\n          id=${args.datePickerId}\n          ariaLabel=${args.ariaLabel}\n          label=${args.label}\n        ></z-date-picker>\n      </div>\n      <div class=\"story-output-container\">\n        <span>OUTPUT:</span>\n        <br />\n        <span id=\"output\" />\n      </div>\n    </div>\n  `,\n} satisfies Meta<ZDatePicker>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZDatePicker>;\n\nexport const Date: Story = {\n  args: {\n    datePickerId: \"picker-01\",\n    label: \"ZDatePicker with date\",\n  },\n} satisfies Story;\n\nexport const DateAndTime: Story = {\n  args: {\n    datePickerId: \"picker-02\",\n    label: \"ZDatePicker with date and time\",\n  },\n} satisfies Story;\n\nexport const MonthsOnly: Story = {\n  args: {\n    datePickerId: \"picker-03\",\n    label: \"ZDatePicker with only months\",\n  },\n} satisfies Story;\n\nexport const CustomToggle: Story = {\n  args: {\n    datePickerId: \"picker-04\",\n    label: \"date picker\",\n  },\n  render: (args) => html`\n    <script>\n      document.getElementById(\"${args.datePickerId}\").addEventListener(\"dateSelect\", (e) => {\n        const input = document.getElementById(\"output\");\n        input.innerHTML = \"[\" + e.detail + \"]\";\n      });\n    </script>\n    <div class=\"story-container\">\n      <div class=\"story-picker-container\">\n        <z-date-picker\n          mode=${args.mode}\n          .datePickerId=${args.datePickerId}\n          id=${args.datePickerId}\n          ariaLabel=${args.ariaLabel}\n          label=${args.label}\n          ><z-button slot=\"toggle\">Open ZDatePicker</z-button></z-date-picker\n        >\n      </div>\n      <div class=\"story-output-container\">\n        <span>OUTPUT:</span>\n        <br />\n        <span id=\"output\" />\n      </div>\n    </div>\n  `,\n} satisfies Story;\n"]}
+{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../../src/components/date-picker/z-date-picker/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAEzB,OAAO,EAAC,eAAe,EAAC,MAAM,gBAAgB,CAAC;AAC/C,OAAO,sBAAsB,CAAC;AAC9B,OAAO,sBAAsB,CAAC;AAC9B,OAAO,SAAS,CAAC;AAEjB;;;GAGG;AACH,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,aAAa;IACpB,SAAS,EAAE,eAAe;IAC1B,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,eAAe,CAAC;YACvC,OAAO,EAAE;gBACP,IAAI,EAAE,cAAc;aACrB;SACF;KACF;IACD,IAAI,EAAE;QACJ,SAAS,EAAE,aAAa;QACxB,IAAI,EAAE,eAAe,CAAC,IAAI;KAC3B;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;iCAES,IAAI,CAAC,YAAY;wDACM,IAAI,CAAC,YAAY;;;;;;;iBAOxD,IAAI,CAAC,IAAI;0BACA,IAAI,CAAC,YAAY;eAC5B,IAAI,CAAC,YAAY;sBACV,IAAI,CAAC,SAAS;kBAClB,IAAI,CAAC,KAAK;kBACV,IAAI,CAAC,KAAK;;;;;;2BAMD,IAAI,CAAC,YAAY;;;GAGzC;CAC0B,CAAC;AAE9B,eAAe,SAAS,CAAC;AAIzB,MAAM,CAAC,MAAM,IAAI,GAAU;IACzB,IAAI,EAAE;QACJ,YAAY,EAAE,WAAW;QACzB,KAAK,EAAE,uBAAuB;QAC9B,KAAK,EAAE,YAAY;KACpB;CACc,CAAC;AAElB,MAAM,CAAC,MAAM,WAAW,GAAU;IAChC,IAAI,EAAE;QACJ,YAAY,EAAE,WAAW;QACzB,KAAK,EAAE,gCAAgC;QACvC,IAAI,EAAE,eAAe,CAAC,SAAS;QAC/B,KAAK,EAAE,oBAAoB;QAC3B,IAAI,EAAE,kBAAkB;KACzB;CACc,CAAC;AAElB,MAAM,CAAC,MAAM,UAAU,GAAU;IAC/B,IAAI,EAAE;QACJ,YAAY,EAAE,WAAW;QACzB,KAAK,EAAE,8BAA8B;QACrC,IAAI,EAAE,eAAe,CAAC,MAAM;QAC5B,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,cAAc;KACrB;CACc,CAAC;AAElB,MAAM,CAAC,MAAM,YAAY,GAAU;IACjC,IAAI,EAAE;QACJ,YAAY,EAAE,WAAW;QACzB,KAAK,EAAE,aAAa;QACpB,KAAK,EAAE,YAAY;QACnB,IAAI,EAAE,oBAAoB;KAC3B;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;iCAES,IAAI,CAAC,YAAY;wDACM,IAAI,CAAC,YAAY;;;;;;;iBAOxD,IAAI,CAAC,IAAI;0BACA,IAAI,CAAC,YAAY;eAC5B,IAAI,CAAC,YAAY;sBACV,IAAI,CAAC,SAAS;kBAClB,IAAI,CAAC,KAAK;kBACV,IAAI,CAAC,KAAK;;;;;;;;2BAQD,IAAI,CAAC,YAAY;;;GAGzC;CACc,CAAC","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {type ZDatePicker} from \".\";\nimport {ZDatePickerMode} from \"../../../beans\";\nimport \"../../z-button/index\";\nimport \"../index.stories.css\";\nimport \"./index\";\n\n/**\n * In order to avoid conflits between datepickers, pass a unique id as `datePickerId` prop.\n * This component emits an event called `dateSelect` with the value of the selected date.\n */\nconst StoryMeta = {\n  title: \"ZDatePicker\",\n  component: \"z-date-picker\",\n  argTypes: {\n    mode: {\n      options: Object.values(ZDatePickerMode),\n      control: {\n        type: \"inline-radio\",\n      },\n    },\n  },\n  args: {\n    ariaLabel: \"date-picker\",\n    mode: ZDatePickerMode.DATE,\n  },\n  render: (args) => html`\n    <script>\n      document.getElementById(\"${args.datePickerId}\").addEventListener(\"dateSelect\", (e) => {\n        const input = document.getElementById(\"output-${args.datePickerId}\");\n        input.innerHTML = \"[\" + e.detail + \"]\";\n      });\n    </script>\n    <div class=\"story-container\">\n      <div class=\"story-picker-container\">\n        <z-date-picker\n          mode=${args.mode}\n          .datePickerId=${args.datePickerId}\n          id=${args.datePickerId}\n          ariaLabel=${args.ariaLabel}\n          label=${args.label}\n          value=${args.value}\n        ></z-date-picker>\n      </div>\n      <div class=\"story-output-container\">\n        <span>OUTPUT:</span>\n        <br />\n        <span id=\"output-${args.datePickerId}\" />\n      </div>\n    </div>\n  `,\n} satisfies Meta<ZDatePicker>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZDatePicker>;\n\nexport const Date: Story = {\n  args: {\n    datePickerId: \"picker-01\",\n    label: \"ZDatePicker with date\",\n    value: \"25-12-2024\",\n  },\n} satisfies Story;\n\nexport const DateAndTime: Story = {\n  args: {\n    datePickerId: \"picker-02\",\n    label: \"ZDatePicker with date and time\",\n    mode: ZDatePickerMode.DATE_TIME,\n    value: \"05-12-2024 - 12:01\",\n    name: \"date-time-picker\",\n  },\n} satisfies Story;\n\nexport const MonthsOnly: Story = {\n  args: {\n    datePickerId: \"picker-03\",\n    label: \"ZDatePicker with only months\",\n    mode: ZDatePickerMode.MONTHS,\n    value: \"12-2024\",\n    name: \"month-picker\",\n  },\n} satisfies Story;\n\nexport const CustomToggle: Story = {\n  args: {\n    datePickerId: \"picker-04\",\n    label: \"date picker\",\n    value: \"25-01-2024\",\n    name: \"date-toogle-picker\",\n  },\n  render: (args) => html`\n    <script>\n      document.getElementById(\"${args.datePickerId}\").addEventListener(\"dateSelect\", (e) => {\n        const input = document.getElementById(\"output-${args.datePickerId}\");\n        input.innerHTML = \"[\" + e.detail + \"]\";\n      });\n    </script>\n    <div class=\"story-container\">\n      <div class=\"story-picker-container\">\n        <z-date-picker\n          mode=${args.mode}\n          .datePickerId=${args.datePickerId}\n          id=${args.datePickerId}\n          ariaLabel=${args.ariaLabel}\n          label=${args.label}\n          value=${args.value}\n        >\n          <z-button slot=\"toggle\">Open ZDatePicker</z-button>\n        </z-date-picker>\n      </div>\n      <div class=\"story-output-container\">\n        <span>OUTPUT:</span>\n        <br />\n        <span id=\"output-${args.datePickerId}\" />\n      </div>\n    </div>\n  `,\n} satisfies Story;\n"]}

package/dist/collection/components/z-anchor-navigation/index.stories.js

@@ -56,7 +56,10 @@ export const Default = {
         </a>
       </z-anchor-navigation>
       <div>
-        <div id="first-section">
+        <div
+          class="section"
+          id="first-section"
+        >
           <h4>First section</h4>
           <p>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in
@@ -76,7 +79,10 @@ export const Default = {
           </p>
         </div>
         <div class="separator"></div>
-        <div id="second-section">
+        <div
+          class="section"
+          id="second-section"
+        >
           <h4>Second section</h4>
           <p>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in
@@ -96,7 +102,10 @@ export const Default = {
           </p>
         </div>
         <div class="separator"></div>
-        <div id="third-section">
+        <div
+          class="section"
+          id="third-section"
+        >
           <h4>Third section</h4>
           <p>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in
@@ -116,7 +125,10 @@ export const Default = {
           </p>
         </div>
         <div class="separator"></div>
-        <div id="fourth-section">
+        <div
+          class="section"
+          id="fourth-section"
+        >
           <h4>Fourth section</h4>
           <p>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in

package/dist/collection/components/z-anchor-navigation/index.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-anchor-navigation/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAEzB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,iBAAiB,CAAC;AACzB,OAAO,SAAS,CAAC;AACjB,OAAO,qBAAqB,CAAC;AAE7B,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,mBAAmB;IAC1B,SAAS,EAAE,qBAAqB;IAChC,IAAI,EAAE;QACJ,cAAc,EAAE,KAAK;KACtB;CACgC,CAAC;AAEpC,eAAe,SAAS,CAAC;AAEzB,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;6CAEqB,IAAI,CAAC,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4H7D;CACoC,CAAC;AAExC;;;;GAIG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG;IAClC,IAAI,EAAE;QACJ,WAAW,EAAE,KAAK;KACnB;IACD,UAAU,EAAE;QACV,QAAQ,EAAE;YACR,OAAO,EAAE,CAAC,aAAa,CAAC;SACzB;KACF;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0BA+CE,IAAI,CAAC,cAAc;uBACtB,IAAI,CAAC,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6HpC;CACoC,CAAC","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {ZAnchorNavigation} from \".\";\nimport \"../z-button/index\";\nimport \"../z-icon/index\";\nimport \"./index\";\nimport \"./index.stories.css\";\n\nconst StoryMeta = {\n  title: \"ZAnchorNavigation\",\n  component: \"z-anchor-navigation\",\n  args: {\n    hideUnselected: false,\n  },\n} satisfies Meta<ZAnchorNavigation>;\n\nexport default StoryMeta;\n\nexport const Default = {\n  render: (args) => html`\n    <div class=\"z-anchor-navigation-story-wrapper\">\n      <z-anchor-navigation .hideUnselected=${args.hideUnselected}>\n        <div>\n          <a\n            href=\"#first-section\"\n            target=\"_self\"\n            >First section</a\n          >\n          <z-button\n            variant=\"tertiary\"\n            icon=\"share\"\n            size=\"x-small\"\n          ></z-button>\n        </div>\n        <div>\n          <a\n            href=\"#second-section\"\n            target=\"_self\"\n            >Second section</a\n          >\n        </div>\n        <div>\n          <a\n            href=\"#third-section\"\n            target=\"_self\"\n            >Third section with a very very long title and an icon and the title is repeated so it can go over 2 lines\n            Third section with a very very long title and an icon and the title is repeated so it can go over 2 lines\n          </a>\n          <button\n            type=\"button\"\n            aria-label=\"share\"\n          >\n            <z-icon name=\"share\" />\n          </button>\n        </div>\n        <a\n          href=\"#fourth-section\"\n          target=\"_self\"\n          >Third section with a very very long title and an icon and the title is repeated so it can go over 2 lines\n          Third section with a very very long title and an icon and the title is repeated so it can go over 2 lines\n        </a>\n      </z-anchor-navigation>\n      <div>\n        <div id=\"first-section\">\n          <h4>First section</h4>\n          <p>\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in\n            Archimede, qui dum in pulvere quaedam describit attentius, ne patriam quidem captam esse senserit?\n            Possumusne ergo in vita summum bonum dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo\n            affectus, exul, orbus, egens, torqueatur eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo,\n            oblivisci non possum quae volo. Nec vero sum nescius esse utilitatem in historia, non modo voluptatem. Duo\n            Reges: constructio interrete. Plane idem, inquit, et maxima quidem, qua fieri nulla maior potest. Hoc autem\n            loco tantum explicemus haec honesta, quae dico, praeterquam quod nosmet ipsos diligamus, praeterea suapte\n            natura per se esse expetenda. Te enim iudicem aequum puto, modo quae dicat ille bene noris. Si enim Zenoni\n            licuit, cum rem aliquam invenisset inusitatam, inauditum quoque ei rei nomen inponere, cur non liceat\n            Catoni? Ita cum ea volunt retinere, quae superiori sententiae conveniunt, in Aristonem incidunt; Istam\n            voluptatem perpetuam quis potest praestare sapienti? Urgent tamen et nihil remittunt. Sin te auctoritas\n            commovebat, nobisne omnibus et Platoni ipsi nescio quem illum anteponebas? Stuprata per vim Lucretia a regis\n            filio testata civis se ipsa interemit. Sin autem ad animum, falsum est, quod negas animi ullum esse gaudium,\n            quod non referatur ad corpus.\n          </p>\n        </div>\n        <div class=\"separator\"></div>\n        <div id=\"second-section\">\n          <h4>Second section</h4>\n          <p>\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in\n            Archimede, qui dum in pulvere quaedam describit attentius, ne patriam quidem captam esse senserit?\n            Possumusne ergo in vita summum bonum dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo\n            affectus, exul, orbus, egens, torqueatur eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo,\n            oblivisci non possum quae volo. Nec vero sum nescius esse utilitatem in historia, non modo voluptatem. Duo\n            Reges: constructio interrete. Plane idem, inquit, et maxima quidem, qua fieri nulla maior potest. Hoc autem\n            loco tantum explicemus haec honesta, quae dico, praeterquam quod nosmet ipsos diligamus, praeterea suapte\n            natura per se esse expetenda. Te enim iudicem aequum puto, modo quae dicat ille bene noris. Si enim Zenoni\n            licuit, cum rem aliquam invenisset inusitatam, inauditum quoque ei rei nomen inponere, cur non liceat\n            Catoni? Ita cum ea volunt retinere, quae superiori sententiae conveniunt, in Aristonem incidunt; Istam\n            voluptatem perpetuam quis potest praestare sapienti? Urgent tamen et nihil remittunt. Sin te auctoritas\n            commovebat, nobisne omnibus et Platoni ipsi nescio quem illum anteponebas? Stuprata per vim Lucretia a regis\n            filio testata civis se ipsa interemit. Sin autem ad animum, falsum est, quod negas animi ullum esse gaudium,\n            quod non referatur ad corpus.\n          </p>\n        </div>\n        <div class=\"separator\"></div>\n        <div id=\"third-section\">\n          <h4>Third section</h4>\n          <p>\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in\n            Archimede, qui dum in pulvere quaedam describit attentius, ne patriam quidem captam esse senserit?\n            Possumusne ergo in vita summum bonum dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo\n            affectus, exul, orbus, egens, torqueatur eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo,\n            oblivisci non possum quae volo. Nec vero sum nescius esse utilitatem in historia, non modo voluptatem. Duo\n            Reges: constructio interrete. Plane idem, inquit, et maxima quidem, qua fieri nulla maior potest. Hoc autem\n            loco tantum explicemus haec honesta, quae dico, praeterquam quod nosmet ipsos diligamus, praeterea suapte\n            natura per se esse expetenda. Te enim iudicem aequum puto, modo quae dicat ille bene noris. Si enim Zenoni\n            licuit, cum rem aliquam invenisset inusitatam, inauditum quoque ei rei nomen inponere, cur non liceat\n            Catoni? Ita cum ea volunt retinere, quae superiori sententiae conveniunt, in Aristonem incidunt; Istam\n            voluptatem perpetuam quis potest praestare sapienti? Urgent tamen et nihil remittunt. Sin te auctoritas\n            commovebat, nobisne omnibus et Platoni ipsi nescio quem illum anteponebas? Stuprata per vim Lucretia a regis\n            filio testata civis se ipsa interemit. Sin autem ad animum, falsum est, quod negas animi ullum esse gaudium,\n            quod non referatur ad corpus.\n          </p>\n        </div>\n        <div class=\"separator\"></div>\n        <div id=\"fourth-section\">\n          <h4>Fourth section</h4>\n          <p>\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in\n            Archimede, qui dum in pulvere quaedam describit attentius, ne patriam quidem captam esse senserit?\n            Possumusne ergo in vita summum bonum dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo\n            affectus, exul, orbus, egens, torqueatur eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo,\n            oblivisci non possum quae volo. Nec vero sum nescius esse utilitatem in historia, non modo voluptatem. Duo\n            Reges: constructio interrete. Plane idem, inquit, et maxima quidem, qua fieri nulla maior potest. Hoc autem\n            loco tantum explicemus haec honesta, quae dico, praeterquam quod nosmet ipsos diligamus, praeterea suapte\n            natura per se esse expetenda. Te enim iudicem aequum puto, modo quae dicat ille bene noris. Si enim Zenoni\n            licuit, cum rem aliquam invenisset inusitatam, inauditum quoque ei rei nomen inponere, cur non liceat\n            Catoni? Ita cum ea volunt retinere, quae superiori sententiae conveniunt, in Aristonem incidunt; Istam\n            voluptatem perpetuam quis potest praestare sapienti? Urgent tamen et nihil remittunt. Sin te auctoritas\n            commovebat, nobisne omnibus et Platoni ipsi nescio quem illum anteponebas? Stuprata per vim Lucretia a regis\n            filio testata civis se ipsa interemit. Sin autem ad animum, falsum est, quod negas animi ullum esse gaudium,\n            quod non referatur ad corpus.\n          </p>\n        </div>\n        <div class=\"separator\"></div>\n      </div>\n    </div>\n  `,\n} satisfies StoryObj<ZAnchorNavigation>;\n\n/**\n * Setting `autoCurrent` to `false` disables the automatic highlighting of the current section in the anchor navigation\n * and allows manual handling.\n * In this story, for example, the highlighting of the current section is done by clicking on the related button.\n */\nexport const AutoCurrentDisabling = {\n  args: {\n    autoCurrent: false,\n  },\n  parameters: {\n    controls: {\n      exclude: [\"autoCurrent\"],\n    },\n  },\n  render: (args) => html`\n    <script>\n      Array.from(document.querySelectorAll(\".z-anchor-navigation-manual-current z-button\")).forEach((item) =>\n        item.addEventListener(\"click\", (ev) => {\n          const sectionID = ev.target.closest(\"z-button\")?.dataset.to;\n          const current = document.querySelector(\"#\" + sectionID + \"-anchor\");\n          const nav = current?.closest(\"nav\");\n          Array.from(nav?.children ?? []).forEach((item) => {\n            const isCurrent = item.contains(current);\n            if (isCurrent) {\n              item.setAttribute(\"data-current\", \"\");\n            } else {\n              item.removeAttribute(\"data-current\");\n            }\n            const anchor = item.tagName === \"A\" ? item : item.querySelector(\"a\");\n            item?.setAttribute(\"aria-current\", isCurrent.toString());\n          });\n          const section = document.querySelector(\"#\" + sectionID);\n          section?.scrollIntoView();\n        })\n      );\n    </script>\n\n    <div class=\"z-anchor-navigation-manual-current\">\n      <z-button\n        size=\"x-small\"\n        data-to=\"first-section\"\n        >To first section</z-button\n      >\n      <z-button\n        size=\"x-small\"\n        data-to=\"second-section\"\n        >To second section</z-button\n      >\n      <z-button\n        size=\"x-small\"\n        data-to=\"third-section\"\n        >To third section</z-button\n      >\n      <z-button\n        size=\"x-small\"\n        data-to=\"fourth-section\"\n        >Highlight fourth section</z-button\n      >\n    </div>\n    <div class=\"z-anchor-navigation-story-wrapper\">\n      <z-anchor-navigation\n        .hideUnselected=${args.hideUnselected}\n        .autoCurrent=${args.autoCurrent}\n      >\n        <div>\n          <a id=\"first-section-anchor\">First section</a>\n          <z-button\n            variant=\"tertiary\"\n            icon=\"share\"\n            size=\"x-small\"\n          ></z-button>\n        </div>\n        <div>\n          <a id=\"second-section-anchor\">Second section</a>\n        </div>\n        <div>\n          <a id=\"third-section-anchor\"\n            >Third section with a very very long title and an icon and the title is repeated so it can go over 2 lines\n            Third section with a very very long title and an icon and the title is repeated so it can go over 2 lines\n          </a>\n          <button\n            type=\"button\"\n            aria-label=\"share\"\n          >\n            <z-icon name=\"share\" />\n          </button>\n        </div>\n        <a id=\"fourth-section-anchor\"\n          >Third section with a very very long title and an icon and the title is repeated so it can go over 2 lines\n          Third section with a very very long title and an icon and the title is repeated so it can go over 2 lines\n        </a>\n      </z-anchor-navigation>\n      <div class=\"z-anchor-navigation-demo-sections\">\n        <div\n          class=\"section\"\n          id=\"first-section\"\n        >\n          <h4>First section</h4>\n          <p>\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in\n            Archimede, qui dum in pulvere quaedam describit attentius, ne patriam quidem captam esse senserit?\n            Possumusne ergo in vita summum bonum dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo\n            affectus, exul, orbus, egens, torqueatur eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo,\n            oblivisci non possum quae volo. Nec vero sum nescius esse utilitatem in historia, non modo voluptatem. Duo\n            Reges: constructio interrete. Plane idem, inquit, et maxima quidem, qua fieri nulla maior potest. Hoc autem\n            loco tantum explicemus haec honesta, quae dico, praeterquam quod nosmet ipsos diligamus, praeterea suapte\n            natura per se esse expetenda. Te enim iudicem aequum puto, modo quae dicat ille bene noris. Si enim Zenoni\n            licuit, cum rem aliquam invenisset inusitatam, inauditum quoque ei rei nomen inponere, cur non liceat\n            Catoni? Ita cum ea volunt retinere, quae superiori sententiae conveniunt, in Aristonem incidunt; Istam\n            voluptatem perpetuam quis potest praestare sapienti? Urgent tamen et nihil remittunt. Sin te auctoritas\n            commovebat, nobisne omnibus et Platoni ipsi nescio quem illum anteponebas? Stuprata per vim Lucretia a regis\n            filio testata civis se ipsa interemit. Sin autem ad animum, falsum est, quod negas animi ullum esse gaudium,\n            quod non referatur ad corpus.\n          </p>\n        </div>\n        <div class=\"separator\"></div>\n        <div\n          class=\"section\"\n          id=\"second-section\"\n        >\n          <h4>Second section</h4>\n          <p>\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in\n            Archimede, qui dum in pulvere quaedam describit attentius, ne patriam quidem captam esse senserit?\n            Possumusne ergo in vita summum bonum dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo\n            affectus, exul, orbus, egens, torqueatur eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo,\n            oblivisci non possum quae volo. Nec vero sum nescius esse utilitatem in historia, non modo voluptatem. Duo\n            Reges: constructio interrete. Plane idem, inquit, et maxima quidem, qua fieri nulla maior potest. Hoc autem\n            loco tantum explicemus haec honesta, quae dico, praeterquam quod nosmet ipsos diligamus, praeterea suapte\n            natura per se esse expetenda. Te enim iudicem aequum puto, modo quae dicat ille bene noris. Si enim Zenoni\n            licuit, cum rem aliquam invenisset inusitatam, inauditum quoque ei rei nomen inponere, cur non liceat\n            Catoni? Ita cum ea volunt retinere, quae superiori sententiae conveniunt, in Aristonem incidunt; Istam\n            voluptatem perpetuam quis potest praestare sapienti? Urgent tamen et nihil remittunt. Sin te auctoritas\n            commovebat, nobisne omnibus et Platoni ipsi nescio quem illum anteponebas? Stuprata per vim Lucretia a regis\n            filio testata civis se ipsa interemit. Sin autem ad animum, falsum est, quod negas animi ullum esse gaudium,\n            quod non referatur ad corpus.\n          </p>\n        </div>\n        <div class=\"separator\"></div>\n        <div\n          class=\"section\"\n          id=\"third-section\"\n        >\n          <h4>Third section</h4>\n          <p>\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in\n            Archimede, qui dum in pulvere quaedam describit attentius, ne patriam quidem captam esse senserit?\n            Possumusne ergo in vita summum bonum dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo\n            affectus, exul, orbus, egens, torqueatur eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo,\n            oblivisci non possum quae volo. Nec vero sum nescius esse utilitatem in historia, non modo voluptatem. Duo\n            Reges: constructio interrete. Plane idem, inquit, et maxima quidem, qua fieri nulla maior potest. Hoc autem\n            loco tantum explicemus haec honesta, quae dico, praeterquam quod nosmet ipsos diligamus, praeterea suapte\n            natura per se esse expetenda. Te enim iudicem aequum puto, modo quae dicat ille bene noris. Si enim Zenoni\n            licuit, cum rem aliquam invenisset inusitatam, inauditum quoque ei rei nomen inponere, cur non liceat\n            Catoni? Ita cum ea volunt retinere, quae superiori sententiae conveniunt, in Aristonem incidunt; Istam\n            voluptatem perpetuam quis potest praestare sapienti? Urgent tamen et nihil remittunt. Sin te auctoritas\n            commovebat, nobisne omnibus et Platoni ipsi nescio quem illum anteponebas? Stuprata per vim Lucretia a regis\n            filio testata civis se ipsa interemit. Sin autem ad animum, falsum est, quod negas animi ullum esse gaudium,\n            quod non referatur ad corpus.\n          </p>\n        </div>\n        <div class=\"separator\"></div>\n        <div\n          class=\"section\"\n          id=\"fourth-section\"\n        >\n          <h4>Fourth section</h4>\n          <p>\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in\n            Archimede, qui dum in pulvere quaedam describit attentius, ne patriam quidem captam esse senserit?\n            Possumusne ergo in vita summum bonum dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo\n            affectus, exul, orbus, egens, torqueatur eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo,\n            oblivisci non possum quae volo. Nec vero sum nescius esse utilitatem in historia, non modo voluptatem. Duo\n            Reges: constructio interrete. Plane idem, inquit, et maxima quidem, qua fieri nulla maior potest. Hoc autem\n            loco tantum explicemus haec honesta, quae dico, praeterquam quod nosmet ipsos diligamus, praeterea suapte\n            natura per se esse expetenda. Te enim iudicem aequum puto, modo quae dicat ille bene noris. Si enim Zenoni\n            licuit, cum rem aliquam invenisset inusitatam, inauditum quoque ei rei nomen inponere, cur non liceat\n            Catoni? Ita cum ea volunt retinere, quae superiori sententiae conveniunt, in Aristonem incidunt; Istam\n            voluptatem perpetuam quis potest praestare sapienti? Urgent tamen et nihil remittunt. Sin te auctoritas\n            commovebat, nobisne omnibus et Platoni ipsi nescio quem illum anteponebas? Stuprata per vim Lucretia a regis\n            filio testata civis se ipsa interemit. Sin autem ad animum, falsum est, quod negas animi ullum esse gaudium,\n            quod non referatur ad corpus.\n          </p>\n        </div>\n        <div class=\"separator\"></div>\n      </div>\n    </div>\n  `,\n} satisfies StoryObj<ZAnchorNavigation>;\n"]}
+{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-anchor-navigation/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAEzB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,iBAAiB,CAAC;AACzB,OAAO,SAAS,CAAC;AACjB,OAAO,qBAAqB,CAAC;AAE7B,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,mBAAmB;IAC1B,SAAS,EAAE,qBAAqB;IAChC,IAAI,EAAE;QACJ,cAAc,EAAE,KAAK;KACtB;CACgC,CAAC;AAEpC,eAAe,SAAS,CAAC;AAEzB,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;6CAEqB,IAAI,CAAC,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwI7D;CACoC,CAAC;AAExC;;;;GAIG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG;IAClC,IAAI,EAAE;QACJ,WAAW,EAAE,KAAK;KACnB;IACD,UAAU,EAAE;QACV,QAAQ,EAAE;YACR,OAAO,EAAE,CAAC,aAAa,CAAC;SACzB;KACF;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0BA+CE,IAAI,CAAC,cAAc;uBACtB,IAAI,CAAC,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6HpC;CACoC,CAAC","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {ZAnchorNavigation} from \".\";\nimport \"../z-button/index\";\nimport \"../z-icon/index\";\nimport \"./index\";\nimport \"./index.stories.css\";\n\nconst StoryMeta = {\n  title: \"ZAnchorNavigation\",\n  component: \"z-anchor-navigation\",\n  args: {\n    hideUnselected: false,\n  },\n} satisfies Meta<ZAnchorNavigation>;\n\nexport default StoryMeta;\n\nexport const Default = {\n  render: (args) => html`\n    <div class=\"z-anchor-navigation-story-wrapper\">\n      <z-anchor-navigation .hideUnselected=${args.hideUnselected}>\n        <div>\n          <a\n            href=\"#first-section\"\n            target=\"_self\"\n            >First section</a\n          >\n          <z-button\n            variant=\"tertiary\"\n            icon=\"share\"\n            size=\"x-small\"\n          ></z-button>\n        </div>\n        <div>\n          <a\n            href=\"#second-section\"\n            target=\"_self\"\n            >Second section</a\n          >\n        </div>\n        <div>\n          <a\n            href=\"#third-section\"\n            target=\"_self\"\n            >Third section with a very very long title and an icon and the title is repeated so it can go over 2 lines\n            Third section with a very very long title and an icon and the title is repeated so it can go over 2 lines\n          </a>\n          <button\n            type=\"button\"\n            aria-label=\"share\"\n          >\n            <z-icon name=\"share\" />\n          </button>\n        </div>\n        <a\n          href=\"#fourth-section\"\n          target=\"_self\"\n          >Third section with a very very long title and an icon and the title is repeated so it can go over 2 lines\n          Third section with a very very long title and an icon and the title is repeated so it can go over 2 lines\n        </a>\n      </z-anchor-navigation>\n      <div>\n        <div\n          class=\"section\"\n          id=\"first-section\"\n        >\n          <h4>First section</h4>\n          <p>\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in\n            Archimede, qui dum in pulvere quaedam describit attentius, ne patriam quidem captam esse senserit?\n            Possumusne ergo in vita summum bonum dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo\n            affectus, exul, orbus, egens, torqueatur eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo,\n            oblivisci non possum quae volo. Nec vero sum nescius esse utilitatem in historia, non modo voluptatem. Duo\n            Reges: constructio interrete. Plane idem, inquit, et maxima quidem, qua fieri nulla maior potest. Hoc autem\n            loco tantum explicemus haec honesta, quae dico, praeterquam quod nosmet ipsos diligamus, praeterea suapte\n            natura per se esse expetenda. Te enim iudicem aequum puto, modo quae dicat ille bene noris. Si enim Zenoni\n            licuit, cum rem aliquam invenisset inusitatam, inauditum quoque ei rei nomen inponere, cur non liceat\n            Catoni? Ita cum ea volunt retinere, quae superiori sententiae conveniunt, in Aristonem incidunt; Istam\n            voluptatem perpetuam quis potest praestare sapienti? Urgent tamen et nihil remittunt. Sin te auctoritas\n            commovebat, nobisne omnibus et Platoni ipsi nescio quem illum anteponebas? Stuprata per vim Lucretia a regis\n            filio testata civis se ipsa interemit. Sin autem ad animum, falsum est, quod negas animi ullum esse gaudium,\n            quod non referatur ad corpus.\n          </p>\n        </div>\n        <div class=\"separator\"></div>\n        <div\n          class=\"section\"\n          id=\"second-section\"\n        >\n          <h4>Second section</h4>\n          <p>\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in\n            Archimede, qui dum in pulvere quaedam describit attentius, ne patriam quidem captam esse senserit?\n            Possumusne ergo in vita summum bonum dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo\n            affectus, exul, orbus, egens, torqueatur eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo,\n            oblivisci non possum quae volo. Nec vero sum nescius esse utilitatem in historia, non modo voluptatem. Duo\n            Reges: constructio interrete. Plane idem, inquit, et maxima quidem, qua fieri nulla maior potest. Hoc autem\n            loco tantum explicemus haec honesta, quae dico, praeterquam quod nosmet ipsos diligamus, praeterea suapte\n            natura per se esse expetenda. Te enim iudicem aequum puto, modo quae dicat ille bene noris. Si enim Zenoni\n            licuit, cum rem aliquam invenisset inusitatam, inauditum quoque ei rei nomen inponere, cur non liceat\n            Catoni? Ita cum ea volunt retinere, quae superiori sententiae conveniunt, in Aristonem incidunt; Istam\n            voluptatem perpetuam quis potest praestare sapienti? Urgent tamen et nihil remittunt. Sin te auctoritas\n            commovebat, nobisne omnibus et Platoni ipsi nescio quem illum anteponebas? Stuprata per vim Lucretia a regis\n            filio testata civis se ipsa interemit. Sin autem ad animum, falsum est, quod negas animi ullum esse gaudium,\n            quod non referatur ad corpus.\n          </p>\n        </div>\n        <div class=\"separator\"></div>\n        <div\n          class=\"section\"\n          id=\"third-section\"\n        >\n          <h4>Third section</h4>\n          <p>\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in\n            Archimede, qui dum in pulvere quaedam describit attentius, ne patriam quidem captam esse senserit?\n            Possumusne ergo in vita summum bonum dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo\n            affectus, exul, orbus, egens, torqueatur eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo,\n            oblivisci non possum quae volo. Nec vero sum nescius esse utilitatem in historia, non modo voluptatem. Duo\n            Reges: constructio interrete. Plane idem, inquit, et maxima quidem, qua fieri nulla maior potest. Hoc autem\n            loco tantum explicemus haec honesta, quae dico, praeterquam quod nosmet ipsos diligamus, praeterea suapte\n            natura per se esse expetenda. Te enim iudicem aequum puto, modo quae dicat ille bene noris. Si enim Zenoni\n            licuit, cum rem aliquam invenisset inusitatam, inauditum quoque ei rei nomen inponere, cur non liceat\n            Catoni? Ita cum ea volunt retinere, quae superiori sententiae conveniunt, in Aristonem incidunt; Istam\n            voluptatem perpetuam quis potest praestare sapienti? Urgent tamen et nihil remittunt. Sin te auctoritas\n            commovebat, nobisne omnibus et Platoni ipsi nescio quem illum anteponebas? Stuprata per vim Lucretia a regis\n            filio testata civis se ipsa interemit. Sin autem ad animum, falsum est, quod negas animi ullum esse gaudium,\n            quod non referatur ad corpus.\n          </p>\n        </div>\n        <div class=\"separator\"></div>\n        <div\n          class=\"section\"\n          id=\"fourth-section\"\n        >\n          <h4>Fourth section</h4>\n          <p>\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in\n            Archimede, qui dum in pulvere quaedam describit attentius, ne patriam quidem captam esse senserit?\n            Possumusne ergo in vita summum bonum dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo\n            affectus, exul, orbus, egens, torqueatur eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo,\n            oblivisci non possum quae volo. Nec vero sum nescius esse utilitatem in historia, non modo voluptatem. Duo\n            Reges: constructio interrete. Plane idem, inquit, et maxima quidem, qua fieri nulla maior potest. Hoc autem\n            loco tantum explicemus haec honesta, quae dico, praeterquam quod nosmet ipsos diligamus, praeterea suapte\n            natura per se esse expetenda. Te enim iudicem aequum puto, modo quae dicat ille bene noris. Si enim Zenoni\n            licuit, cum rem aliquam invenisset inusitatam, inauditum quoque ei rei nomen inponere, cur non liceat\n            Catoni? Ita cum ea volunt retinere, quae superiori sententiae conveniunt, in Aristonem incidunt; Istam\n            voluptatem perpetuam quis potest praestare sapienti? Urgent tamen et nihil remittunt. Sin te auctoritas\n            commovebat, nobisne omnibus et Platoni ipsi nescio quem illum anteponebas? Stuprata per vim Lucretia a regis\n            filio testata civis se ipsa interemit. Sin autem ad animum, falsum est, quod negas animi ullum esse gaudium,\n            quod non referatur ad corpus.\n          </p>\n        </div>\n        <div class=\"separator\"></div>\n      </div>\n    </div>\n  `,\n} satisfies StoryObj<ZAnchorNavigation>;\n\n/**\n * Setting `autoCurrent` to `false` disables the automatic highlighting of the current section in the anchor navigation\n * and allows manual handling.\n * In this story, for example, the highlighting of the current section is done by clicking on the related button.\n */\nexport const AutoCurrentDisabling = {\n  args: {\n    autoCurrent: false,\n  },\n  parameters: {\n    controls: {\n      exclude: [\"autoCurrent\"],\n    },\n  },\n  render: (args) => html`\n    <script>\n      Array.from(document.querySelectorAll(\".z-anchor-navigation-manual-current z-button\")).forEach((item) =>\n        item.addEventListener(\"click\", (ev) => {\n          const sectionID = ev.target.closest(\"z-button\")?.dataset.to;\n          const current = document.querySelector(\"#\" + sectionID + \"-anchor\");\n          const nav = current?.closest(\"nav\");\n          Array.from(nav?.children ?? []).forEach((item) => {\n            const isCurrent = item.contains(current);\n            if (isCurrent) {\n              item.setAttribute(\"data-current\", \"\");\n            } else {\n              item.removeAttribute(\"data-current\");\n            }\n            const anchor = item.tagName === \"A\" ? item : item.querySelector(\"a\");\n            item?.setAttribute(\"aria-current\", isCurrent.toString());\n          });\n          const section = document.querySelector(\"#\" + sectionID);\n          section?.scrollIntoView();\n        })\n      );\n    </script>\n\n    <div class=\"z-anchor-navigation-manual-current\">\n      <z-button\n        size=\"x-small\"\n        data-to=\"first-section\"\n        >To first section</z-button\n      >\n      <z-button\n        size=\"x-small\"\n        data-to=\"second-section\"\n        >To second section</z-button\n      >\n      <z-button\n        size=\"x-small\"\n        data-to=\"third-section\"\n        >To third section</z-button\n      >\n      <z-button\n        size=\"x-small\"\n        data-to=\"fourth-section\"\n        >Highlight fourth section</z-button\n      >\n    </div>\n    <div class=\"z-anchor-navigation-story-wrapper\">\n      <z-anchor-navigation\n        .hideUnselected=${args.hideUnselected}\n        .autoCurrent=${args.autoCurrent}\n      >\n        <div>\n          <a id=\"first-section-anchor\">First section</a>\n          <z-button\n            variant=\"tertiary\"\n            icon=\"share\"\n            size=\"x-small\"\n          ></z-button>\n        </div>\n        <div>\n          <a id=\"second-section-anchor\">Second section</a>\n        </div>\n        <div>\n          <a id=\"third-section-anchor\"\n            >Third section with a very very long title and an icon and the title is repeated so it can go over 2 lines\n            Third section with a very very long title and an icon and the title is repeated so it can go over 2 lines\n          </a>\n          <button\n            type=\"button\"\n            aria-label=\"share\"\n          >\n            <z-icon name=\"share\" />\n          </button>\n        </div>\n        <a id=\"fourth-section-anchor\"\n          >Third section with a very very long title and an icon and the title is repeated so it can go over 2 lines\n          Third section with a very very long title and an icon and the title is repeated so it can go over 2 lines\n        </a>\n      </z-anchor-navigation>\n      <div class=\"z-anchor-navigation-demo-sections\">\n        <div\n          class=\"section\"\n          id=\"first-section\"\n        >\n          <h4>First section</h4>\n          <p>\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in\n            Archimede, qui dum in pulvere quaedam describit attentius, ne patriam quidem captam esse senserit?\n            Possumusne ergo in vita summum bonum dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo\n            affectus, exul, orbus, egens, torqueatur eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo,\n            oblivisci non possum quae volo. Nec vero sum nescius esse utilitatem in historia, non modo voluptatem. Duo\n            Reges: constructio interrete. Plane idem, inquit, et maxima quidem, qua fieri nulla maior potest. Hoc autem\n            loco tantum explicemus haec honesta, quae dico, praeterquam quod nosmet ipsos diligamus, praeterea suapte\n            natura per se esse expetenda. Te enim iudicem aequum puto, modo quae dicat ille bene noris. Si enim Zenoni\n            licuit, cum rem aliquam invenisset inusitatam, inauditum quoque ei rei nomen inponere, cur non liceat\n            Catoni? Ita cum ea volunt retinere, quae superiori sententiae conveniunt, in Aristonem incidunt; Istam\n            voluptatem perpetuam quis potest praestare sapienti? Urgent tamen et nihil remittunt. Sin te auctoritas\n            commovebat, nobisne omnibus et Platoni ipsi nescio quem illum anteponebas? Stuprata per vim Lucretia a regis\n            filio testata civis se ipsa interemit. Sin autem ad animum, falsum est, quod negas animi ullum esse gaudium,\n            quod non referatur ad corpus.\n          </p>\n        </div>\n        <div class=\"separator\"></div>\n        <div\n          class=\"section\"\n          id=\"second-section\"\n        >\n          <h4>Second section</h4>\n          <p>\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in\n            Archimede, qui dum in pulvere quaedam describit attentius, ne patriam quidem captam esse senserit?\n            Possumusne ergo in vita summum bonum dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo\n            affectus, exul, orbus, egens, torqueatur eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo,\n            oblivisci non possum quae volo. Nec vero sum nescius esse utilitatem in historia, non modo voluptatem. Duo\n            Reges: constructio interrete. Plane idem, inquit, et maxima quidem, qua fieri nulla maior potest. Hoc autem\n            loco tantum explicemus haec honesta, quae dico, praeterquam quod nosmet ipsos diligamus, praeterea suapte\n            natura per se esse expetenda. Te enim iudicem aequum puto, modo quae dicat ille bene noris. Si enim Zenoni\n            licuit, cum rem aliquam invenisset inusitatam, inauditum quoque ei rei nomen inponere, cur non liceat\n            Catoni? Ita cum ea volunt retinere, quae superiori sententiae conveniunt, in Aristonem incidunt; Istam\n            voluptatem perpetuam quis potest praestare sapienti? Urgent tamen et nihil remittunt. Sin te auctoritas\n            commovebat, nobisne omnibus et Platoni ipsi nescio quem illum anteponebas? Stuprata per vim Lucretia a regis\n            filio testata civis se ipsa interemit. Sin autem ad animum, falsum est, quod negas animi ullum esse gaudium,\n            quod non referatur ad corpus.\n          </p>\n        </div>\n        <div class=\"separator\"></div>\n        <div\n          class=\"section\"\n          id=\"third-section\"\n        >\n          <h4>Third section</h4>\n          <p>\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in\n            Archimede, qui dum in pulvere quaedam describit attentius, ne patriam quidem captam esse senserit?\n            Possumusne ergo in vita summum bonum dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo\n            affectus, exul, orbus, egens, torqueatur eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo,\n            oblivisci non possum quae volo. Nec vero sum nescius esse utilitatem in historia, non modo voluptatem. Duo\n            Reges: constructio interrete. Plane idem, inquit, et maxima quidem, qua fieri nulla maior potest. Hoc autem\n            loco tantum explicemus haec honesta, quae dico, praeterquam quod nosmet ipsos diligamus, praeterea suapte\n            natura per se esse expetenda. Te enim iudicem aequum puto, modo quae dicat ille bene noris. Si enim Zenoni\n            licuit, cum rem aliquam invenisset inusitatam, inauditum quoque ei rei nomen inponere, cur non liceat\n            Catoni? Ita cum ea volunt retinere, quae superiori sententiae conveniunt, in Aristonem incidunt; Istam\n            voluptatem perpetuam quis potest praestare sapienti? Urgent tamen et nihil remittunt. Sin te auctoritas\n            commovebat, nobisne omnibus et Platoni ipsi nescio quem illum anteponebas? Stuprata per vim Lucretia a regis\n            filio testata civis se ipsa interemit. Sin autem ad animum, falsum est, quod negas animi ullum esse gaudium,\n            quod non referatur ad corpus.\n          </p>\n        </div>\n        <div class=\"separator\"></div>\n        <div\n          class=\"section\"\n          id=\"fourth-section\"\n        >\n          <h4>Fourth section</h4>\n          <p>\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in\n            Archimede, qui dum in pulvere quaedam describit attentius, ne patriam quidem captam esse senserit?\n            Possumusne ergo in vita summum bonum dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo\n            affectus, exul, orbus, egens, torqueatur eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo,\n            oblivisci non possum quae volo. Nec vero sum nescius esse utilitatem in historia, non modo voluptatem. Duo\n            Reges: constructio interrete. Plane idem, inquit, et maxima quidem, qua fieri nulla maior potest. Hoc autem\n            loco tantum explicemus haec honesta, quae dico, praeterquam quod nosmet ipsos diligamus, praeterea suapte\n            natura per se esse expetenda. Te enim iudicem aequum puto, modo quae dicat ille bene noris. Si enim Zenoni\n            licuit, cum rem aliquam invenisset inusitatam, inauditum quoque ei rei nomen inponere, cur non liceat\n            Catoni? Ita cum ea volunt retinere, quae superiori sententiae conveniunt, in Aristonem incidunt; Istam\n            voluptatem perpetuam quis potest praestare sapienti? Urgent tamen et nihil remittunt. Sin te auctoritas\n            commovebat, nobisne omnibus et Platoni ipsi nescio quem illum anteponebas? Stuprata per vim Lucretia a regis\n            filio testata civis se ipsa interemit. Sin autem ad animum, falsum est, quod negas animi ullum esse gaudium,\n            quod non referatur ad corpus.\n          </p>\n        </div>\n        <div class=\"separator\"></div>\n      </div>\n    </div>\n  `,\n} satisfies StoryObj<ZAnchorNavigation>;\n"]}

package/dist/collection/components/z-anchor-navigation/styles.css

@@ -21,7 +21,6 @@ z-anchor-navigation nav a {
   box-sizing: border-box;
   padding: calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 2);
   -webkit-box-orient: vertical;
-  color: inherit;
   font-weight: inherit;
   -webkit-line-clamp: 2;
   line-clamp: 2;
@@ -29,6 +28,10 @@ z-anchor-navigation nav a {
   text-decoration: none;
 }
 
+z-anchor-navigation nav > * a {
+  color: inherit;
+}
+
 z-anchor-navigation nav * a:not(:only-child) {
   padding-right: calc(var(--space-unit) * 5);
 }
@@ -57,7 +60,7 @@ z-anchor-navigation nav > * {
 
 z-anchor-navigation nav > [data-current] {
   border-left-color: var(--color-primary01);
-  color: var(--color-text-link-blue);
+  color: var(--color-primary01);
   font-weight: var(--font-sb);
 }
 
@@ -106,8 +109,8 @@ z-anchor-navigation nav button {
 
     z-anchor-navigation nav > *:hover {
       border-left-color: var(--color-hover-primary);
-      background-color: var(--color-hover-surface);
-      color: var(--color-text-link-blue-hover);
+      background-color: var(--color-surface02);
+      color: var(--color-hover-primary);
     }
   }