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

package/dist/web-components-library/p-f675808e.system.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["stylesCss","ZTdStyle0","ZTd","exports","PopoverPosition","AUTO","class_1","prototype","updateColspan","this","colspan","host","style","gridColumn","concat","removeProperty","colspanChange","emit","onMenuButtonClick","ev","stopPropagation","popoverEl","open","componentWillLoad","render","_this","h","Host","key","role","isMenuOpen","class","showMenu","variant","ButtonVariant","TERTIARY","icon","size","ControlSize","X_SMALL","ref","el","menuTrigger","onClick","bind","bindTo","onOpenChange","event","detail","position","popoverPosition","name"],"sources":["src/components/table/cells/z-td/styles.css?tag=z-td&encapsulation=shadow","src/components/table/cells/z-td/index.tsx"],"sourcesContent":["@import \"../z-table-cells.css\";\n","import {Component, Element, Event, EventEmitter, Host, Prop, State, Watch, h} from \"@stencil/core\";\nimport {ButtonVariant, ControlSize, PopoverPosition, VisibilityCondition} from \"../../../../beans\";\n\n/**\n * ZTd component.\n * @slot - ZTd content.\n */\n@Component({\n  tag: \"z-td\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZTd {\n  @Element() host: HTMLZTdElement;\n\n  /**\n   * Number of columns that the cell should span.\n   */\n  @Prop()\n  colspan: number;\n\n  /**\n   * Whether the cell should stick.\n   */\n  @Prop({reflect: true})\n  sticky = false;\n\n  /**\n   * Enables the contextual menu.\n   * Can be set to \"hover\" or \"always\" to show the button only on cell hover or always.\n   * Set a nullish value to hide the menu button.\n   */\n  @Prop({reflect: true})\n  showMenu: VisibilityCondition = null;\n\n  /**\n   * Set the popover position, the default is \"auto\".\n   */\n  @Prop()\n  popoverPosition?: PopoverPosition = PopoverPosition.AUTO;\n\n  /**\n   * Store the open state of the menu.\n   */\n  @State()\n  isMenuOpen = false;\n\n  private menuTrigger: HTMLZButtonElement;\n\n  private popoverEl: HTMLZPopoverElement;\n\n  /**\n   * Emitted when the value of the `colspan` changes.\n   */\n  @Event({\n    bubbles: true,\n    cancelable: false,\n  })\n  colspanChange: EventEmitter<number>;\n\n  @Watch(\"colspan\")\n  protected updateColspan(): void {\n    if (this.colspan) {\n      this.host.style.gridColumn = `span ${this.colspan}`;\n    } else {\n      this.host.style.removeProperty(\"grid-column\");\n    }\n\n    this.colspanChange.emit(this.colspan || 1);\n  }\n\n  private onMenuButtonClick(ev: MouseEvent): void {\n    ev.stopPropagation();\n    this.popoverEl.open = !this.popoverEl.open;\n  }\n\n  componentWillLoad(): void {\n    this.updateColspan();\n  }\n\n  render(): HTMLZTdElement {\n    return (\n      <Host\n        role=\"cell\"\n        menu-open={this.isMenuOpen}\n      >\n        <div class=\"cell--content\">\n          <slot></slot>\n          {this.showMenu && (\n            <div class=\"cell--menu-container prevent-expand\">\n              <z-button\n                variant={ButtonVariant.TERTIARY}\n                icon=\"contextual-menu\"\n                size={ControlSize.X_SMALL}\n                ref={(el) => (this.menuTrigger = el as HTMLZButtonElement)}\n                onClick={this.onMenuButtonClick.bind(this)}\n              />\n              <z-popover\n                class=\"cell-popover\"\n                ref={(el) => (this.popoverEl = el as HTMLZPopoverElement)}\n                bindTo={this.menuTrigger as HTMLElement}\n                onOpenChange={(event) => (this.isMenuOpen = event.detail.open)}\n                position={this.popoverPosition}\n              >\n                <slot name=\"contextual-menu\"></slot>\n              </z-popover>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"gOAAA,IAAMA,EAAY,qyCAClB,IAAAC,EAAeD,E,ICWFE,EAAGC,EAAA,e,wGAaL,M,cAQuB,K,qBAMIC,EAAgBC,K,gBAMvC,K,CAgBHC,EAAAC,UAAAC,cAAA,WACR,GAAIC,KAAKC,QAAS,CAChBD,KAAKE,KAAKC,MAAMC,WAAa,QAAAC,OAAQL,KAAKC,Q,KACrC,CACLD,KAAKE,KAAKC,MAAMG,eAAe,c,CAGjCN,KAAKO,cAAcC,KAAKR,KAAKC,SAAW,E,EAGlCJ,EAAAC,UAAAW,kBAAA,SAAkBC,GACxBA,EAAGC,kBACHX,KAAKY,UAAUC,MAAQb,KAAKY,UAAUC,I,EAGxChB,EAAAC,UAAAgB,kBAAA,WACEd,KAAKD,e,EAGPF,EAAAC,UAAAiB,OAAA,eAAAC,EAAAhB,KACE,OACEiB,EAACC,EAAI,CAAAC,IAAA,2CACHC,KAAK,OAAM,YACApB,KAAKqB,YAEhBJ,EAAA,OAAAE,IAAA,2CAAKG,MAAM,iBACTL,EAAA,QAAAE,IAAA,6CACCnB,KAAKuB,UACJN,EAAA,OAAAE,IAAA,2CAAKG,MAAM,uCACTL,EAAA,YAAAE,IAAA,2CACEK,QAASC,EAAcC,SACvBC,KAAK,kBACLC,KAAMC,EAAYC,QAClBC,IAAK,SAACC,GAAE,OAAMhB,EAAKiB,YAAcD,CAAzB,EACRE,QAASlC,KAAKS,kBAAkB0B,KAAKnC,QAEvCiB,EAAA,aAAAE,IAAA,2CACEG,MAAM,eACNS,IAAK,SAACC,GAAE,OAAMhB,EAAKJ,UAAYoB,CAAvB,EACRI,OAAQpC,KAAKiC,YACbI,aAAc,SAACC,GAAK,OAAMtB,EAAKK,WAAaiB,EAAMC,OAAO1B,IAArC,EACpB2B,SAAUxC,KAAKyC,iBAEfxB,EAAA,QAAAE,IAAA,2CAAMuB,KAAK,uB,oPA5FX,I","ignoreList":[]}

package/dist/web-components-library/p-f7448d81.system.entry.js

@@ -0,0 +1,2 @@
+System.register(["./p-b3ea380b.system.js","./p-d91b26d9.system.js","./p-4e93c427.system.js","./p-b7c10157.system.js"],(function(i){"use strict";var t,n,e,o,s;return{setters:[function(i){t=i.r;n=i.c;e=i.h},function(i){o=i.P},function(i){s=i.d},function(){}],execute:function(){var r=':host{width:100%;font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>div{position:relative;display:grid;width:calc(100% + calc(var(--space-unit) * 2));height:402px;-webkit-box-sizing:border-box;box-sizing:border-box;padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 3);border:var(--border-size-small) solid var(--color-primary01);margin-left:calc(-1 * var(--space-unit));background:var(--color-surface01);border-radius:0;-webkit-box-shadow:0 2px 4px 0 rgb(66 69 72 / 35%);box-shadow:0 2px 4px 0 rgb(66 69 72 / 35%)}:host>div>z-icon{position:absolute;top:var(--space-unit);right:var(--space-unit);cursor:pointer;fill:var(--color-primary01)}:host>div>div.cta-wrapper{display:-ms-flexbox;display:flex;-ms-flex-flow:column nowrap;flex-flow:column nowrap;-ms-flex-item-align:end;align-self:end;-ms-flex-pack:justify;justify-content:space-between}:host>div>div.content-wrapper{position:relative;overflow:hidden;-ms-flex-item-align:stretch;align-self:stretch}:host>div>div.content-wrapper>section{-webkit-box-sizing:border-box;box-sizing:border-box;padding:var(--space-unit) 0;border-bottom:var(--border-size-small) solid var(--color-surface04);color:var(--color-surface05);font-size:14px;line-height:20px}:host>div>div.content-wrapper>section:last-child{border-bottom:none}:host>div>div.content-wrapper>section.info-wrapper{position:relative;overflow:hidden;-webkit-box-sizing:border-box;box-sizing:border-box}:host>div>div.content-wrapper>section.info-wrapper.hidden::after{position:absolute;top:0;right:0;bottom:0;left:0;background:-webkit-gradient(linear, left top, left bottom, from(rgb(255 0 0 / 0%)), color-stop(60%, rgb(255 0 0 / 0%)), to(white));background:linear-gradient(180deg, rgb(255 0 0 / 0%), rgb(255 0 0 / 0%) 60%, white);content:"";pointer-events:none}:host>div>div.content-wrapper>section>span.license-heading{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}:host>div>div.content-wrapper>section>span.license-heading>span.expired{color:var(--color-primary01);font-size:12px;font-weight:600}:host>div>div.content-wrapper>section>span.license-heading>span.expiring{color:var(--color-warning01);font-size:12px;font-weight:600}:host>div>div.content-wrapper>z-popover{position:absolute;top:0;left:calc(var(--space-unit) * 4)}';var a=r;var l=i("z_myz_card_info",function(){function i(i){t(this,i);this.flipCard=n(this,"flipCard",7);this.data=undefined;this.htmltabindex=0;this.hiddenContent=false;this.tooltip=false;this.emitFlipCard=this.emitFlipCard.bind(this)}i.prototype.emitFlipCard=function(i){if(i===void 0){i=false}this.flipCard.emit(i)};i.prototype.componentWillLoad=function(){this.setStringOrArray()};i.prototype.componentWillUpdate=function(){this.setStringOrArray()};i.prototype.componentDidRender=function(){this.handleContentHeight()};i.prototype.handleContentHeight=function(){if(!this.contentWrapper&&!this.infoWrapper){this.hiddenContent=false;return}if(this.contentWrapper.scrollHeight>this.contentWrapper.offsetHeight||this.infoWrapper.scrollHeight>this.infoWrapper.offsetHeight){var i=this.contentWrapper.offsetHeight-this.onlineLicenseWrapper.offsetHeight-this.offlineLicenseWrapper.offsetHeight;this.infoWrapper.style.height="".concat(i,"px");this.hiddenContent=true;return}this.hiddenContent=false};i.prototype.setStringOrArray=function(){if(typeof this.data==="string"){this.cardData=JSON.parse(this.data)}else{this.cardData=this.data}};i.prototype.renderCloseIcon=function(){var i=this;return e("z-icon",{name:"multiply-circled-filled",height:18,width:18,onClick:function(){return i.emitFlipCard(false)},tabindex:this.htmltabindex,onKeyUp:function(t){s(t,i.emitFlipCard,false)}})};i.prototype.renderGeneralSection=function(){var i=this;var t,n;var o=(t=this===null||this===void 0?void 0:this.cardData)===null||t===void 0?void 0:t.title;var s=(n=this===null||this===void 0?void 0:this.cardData)===null||n===void 0?void 0:n.description;return e("section",{class:"info-wrapper ".concat(this.hiddenContent?"hidden":""),onClick:function(){if(i.hiddenContent){i.tooltip=!i.tooltip}},ref:function(t){return i.infoWrapper=t}},this.renderAuthor(),this.renderYear(),o,e("br",null),s)};i.prototype.renderAuthor=function(){var i;var t=(i=this===null||this===void 0?void 0:this.cardData)===null||i===void 0?void 0:i.author;if(!t){return null}return e("span",null,"Autore: ",e("b",null,t),e("br",null))};i.prototype.renderYear=function(){var i;var t=(i=this===null||this===void 0?void 0:this.cardData)===null||i===void 0?void 0:i.year;if(!t){return null}return e("span",null,"Anno: ",e("b",null,t),e("br",null))};i.prototype.renderTooltip=function(){var i=this;if(!this.tooltip){return}if(!this.cardData){return}var t=this.cardData,n=t.title,s=t.year,r=t.author,a=t.description;return e("z-popover",{position:o.RIGHT,onClick:function(){return i.tooltip=false}},"".concat(n," ").concat(s," ").concat(r," ").concat(a))};i.prototype.setExpirationLicenseMessage=function(i){if(i==="online"&&this.cardData.onlineLicense.expired||i==="offline"&&this.cardData.offlineLicense.expired){return e("span",{class:"expired"},"SCADUTA")}if(i==="online"&&this.cardData.onlineLicense.expiring||i==="offline"&&this.cardData.offlineLicense.expiring){return e("span",{class:"expiring"},"IN SCADENZA")}};i.prototype.renderOnlineLicenseSection=function(){var i=this;var t;if(!((t=this===null||this===void 0?void 0:this.cardData)===null||t===void 0?void 0:t.onlineLicense)){return}return e("section",{ref:function(t){return i.onlineLicenseWrapper=t}},e("span",{class:"license-heading"},e("span",null,"Licenza online"),this.setExpirationLicenseMessage("online")),"Scadenza il ",e("b",null,this.cardData.onlineLicense.expiration),e("br",null))};i.prototype.renderOfflineLicenseSection=function(){var i=this;var t;if(!((t=this===null||this===void 0?void 0:this.cardData)===null||t===void 0?void 0:t.offlineLicense)){return}return e("section",{ref:function(t){return i.offlineLicenseWrapper=t}},e("span",{class:"license-heading"},e("span",null,"Licenza offline"),this.setExpirationLicenseMessage("offline")),"Scadenza il ",e("b",null,this.cardData.offlineLicense.expiration),e("br",null),"Installazioni disponibili: ",e("b",null,this.cardData.offlineLicense.installations))};i.prototype.render=function(){var i=this;return e("div",{key:"0f8111d48191f306b232f8b9e167aeffced4674b"},this.renderCloseIcon(),e("div",{key:"57b77f2f3ad645cebb44d6a247d93c1e82b8f281",class:"content-wrapper",ref:function(t){return i.contentWrapper=t}},this.renderGeneralSection(),this.renderTooltip(),this.renderOnlineLicenseSection(),this.renderOfflineLicenseSection()),e("div",{key:"226bd8e804cecfee34ff748a5d1936e68f6b2307",class:"cta-wrapper"},e("slot",{key:"2fc25a5fd61a0a04a44ceabb3372265424708f5f"})))};return i}());l.style=a}}}));
+//# sourceMappingURL=p-f7448d81.system.entry.js.map

package/dist/web-components-library/p-f7448d81.system.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["stylesCss","ZMyzCardInfoStyle0","ZMyzCardInfo","exports","class_1","hostRef","this","emitFlipCard","bind","prototype","showBack","flipCard","emit","componentWillLoad","setStringOrArray","componentWillUpdate","componentDidRender","handleContentHeight","contentWrapper","infoWrapper","hiddenContent","scrollHeight","offsetHeight","height","onlineLicenseWrapper","offlineLicenseWrapper","style","concat","data","cardData","JSON","parse","renderCloseIcon","_this","h","name","width","onClick","tabindex","htmltabindex","onKeyUp","e","handleKeyboardSubmit","renderGeneralSection","title","_a","description","_b","class","tooltip","ref","el","renderAuthor","renderYear","author","year","renderTooltip","_c","position","PopoverPosition","RIGHT","setExpirationLicenseMessage","type","onlineLicense","expired","offlineLicense","expiring","renderOnlineLicenseSection","expiration","renderOfflineLicenseSection","installations","render","key"],"sources":["src/snowflakes/myz/card/z-myz-card-info/styles.css?tag=z-myz-card-info&encapsulation=shadow","src/snowflakes/myz/card/z-myz-card-info/index.tsx"],"sourcesContent":[":host {\n  width: 100%;\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n:host > div {\n  position: relative;\n  display: grid;\n  width: calc(100% + calc(var(--space-unit) * 2));\n  height: 402px;\n  box-sizing: border-box;\n  padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 3);\n  border: var(--border-size-small) solid var(--color-primary01);\n  margin-left: calc(-1 * var(--space-unit));\n  background: var(--color-surface01);\n  border-radius: 0;\n  box-shadow: 0 2px 4px 0 rgb(66 69 72 / 35%);\n}\n\n:host > div > z-icon {\n  position: absolute;\n  top: var(--space-unit);\n  right: var(--space-unit);\n  cursor: pointer;\n  fill: var(--color-primary01);\n}\n\n:host > div > div.cta-wrapper {\n  display: flex;\n  flex-flow: column nowrap;\n  align-self: end;\n  justify-content: space-between;\n}\n\n:host > div > div.content-wrapper {\n  position: relative;\n  overflow: hidden;\n  align-self: stretch;\n}\n\n:host > div > div.content-wrapper > section {\n  box-sizing: border-box;\n  padding: var(--space-unit) 0;\n  border-bottom: var(--border-size-small) solid var(--color-surface04);\n  color: var(--color-surface05);\n  font-size: 14px;\n  line-height: 20px;\n}\n\n:host > div > div.content-wrapper > section:last-child {\n  border-bottom: none;\n}\n\n:host > div > div.content-wrapper > section.info-wrapper {\n  position: relative;\n  overflow: hidden;\n  box-sizing: border-box;\n}\n\n:host > div > div.content-wrapper > section.info-wrapper.hidden::after {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background: linear-gradient(180deg, rgb(255 0 0 / 0%), rgb(255 0 0 / 0%) 60%, white);\n  content: \"\";\n  pointer-events: none;\n}\n\n:host > div > div.content-wrapper > section > span.license-heading {\n  display: flex;\n  justify-content: space-between;\n}\n\n:host > div > div.content-wrapper > section > span.license-heading > span.expired {\n  color: var(--color-primary01);\n  font-size: 12px;\n  font-weight: 600;\n}\n\n:host > div > div.content-wrapper > section > span.license-heading > span.expiring {\n  color: var(--color-warning01);\n  font-size: 12px;\n  font-weight: 600;\n}\n\n:host > div > div.content-wrapper > z-popover {\n  position: absolute;\n  top: 0;\n  left: calc(var(--space-unit) * 4);\n}\n","import {Component, Event, EventEmitter, Prop, State, h} from \"@stencil/core\";\nimport {DictionaryData, PopoverPosition} from \"../../../../beans\";\nimport {handleKeyboardSubmit} from \"../../../../utils/utils\";\n\n/**\n * @slot  - content\n */\n@Component({\n  tag: \"z-myz-card-info\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZMyzCardInfo {\n  /** dictionary info */\n  @Prop()\n  data: string | DictionaryData;\n\n  /** tabindex link attribute (optional) */\n  @Prop()\n  htmltabindex?: number = 0;\n\n  @State()\n  hiddenContent = false;\n\n  @State()\n  tooltip = false;\n\n  private cardData: DictionaryData;\n\n  private contentWrapper: HTMLElement;\n\n  private infoWrapper: HTMLElement;\n\n  private onlineLicenseWrapper: HTMLElement;\n\n  private offlineLicenseWrapper: HTMLElement;\n\n  /** flip card to front */\n  @Event()\n  flipCard: EventEmitter;\n\n  private emitFlipCard(showBack = false): void {\n    this.flipCard.emit(showBack);\n  }\n\n  constructor() {\n    this.emitFlipCard = this.emitFlipCard.bind(this);\n  }\n\n  componentWillLoad(): void {\n    this.setStringOrArray();\n  }\n\n  componentWillUpdate(): void {\n    this.setStringOrArray();\n  }\n\n  componentDidRender(): void {\n    this.handleContentHeight();\n  }\n\n  private handleContentHeight(): void {\n    if (!this.contentWrapper && !this.infoWrapper) {\n      this.hiddenContent = false;\n\n      return;\n    }\n\n    if (\n      this.contentWrapper.scrollHeight > this.contentWrapper.offsetHeight ||\n      this.infoWrapper.scrollHeight > this.infoWrapper.offsetHeight\n    ) {\n      const height =\n        this.contentWrapper.offsetHeight -\n        this.onlineLicenseWrapper.offsetHeight -\n        this.offlineLicenseWrapper.offsetHeight;\n      this.infoWrapper.style.height = `${height}px`;\n      this.hiddenContent = true;\n\n      return;\n    }\n\n    this.hiddenContent = false;\n  }\n\n  private setStringOrArray(): void {\n    if (typeof this.data === \"string\") {\n      this.cardData = JSON.parse(this.data);\n    } else {\n      this.cardData = this.data;\n    }\n  }\n\n  private renderCloseIcon(): HTMLZIconElement {\n    return (\n      <z-icon\n        name=\"multiply-circled-filled\"\n        height={18}\n        width={18}\n        onClick={() => this.emitFlipCard(false)}\n        tabindex={this.htmltabindex}\n        onKeyUp={(e: KeyboardEvent) => {\n          handleKeyboardSubmit(e, this.emitFlipCard, false);\n        }}\n      />\n    );\n  }\n\n  private renderGeneralSection(): HTMLElement {\n    const title = this?.cardData?.title;\n    const description = this?.cardData?.description;\n\n    return (\n      <section\n        class={`info-wrapper ${this.hiddenContent ? \"hidden\" : \"\"}`}\n        onClick={() => {\n          if (this.hiddenContent) {\n            this.tooltip = !this.tooltip;\n          }\n        }}\n        ref={(el) => (this.infoWrapper = el)}\n      >\n        {this.renderAuthor()}\n        {this.renderYear()}\n        {title}\n        <br />\n        {description}\n      </section>\n    );\n  }\n\n  private renderAuthor(): HTMLSpanElement {\n    const author = this?.cardData?.author;\n    if (!author) {\n      return null;\n    }\n\n    return (\n      <span>\n        Autore: <b>{author}</b>\n        <br />\n      </span>\n    );\n  }\n\n  private renderYear(): HTMLSpanElement {\n    const year = this?.cardData?.year;\n    if (!year) {\n      return null;\n    }\n\n    return (\n      <span>\n        Anno: <b>{year}</b>\n        <br />\n      </span>\n    );\n  }\n\n  private renderTooltip(): HTMLZPopoverElement {\n    if (!this.tooltip) {\n      return;\n    }\n\n    if (!this.cardData) {\n      return;\n    }\n    const {title, year, author, description} = this.cardData;\n\n    return (\n      <z-popover\n        position={PopoverPosition.RIGHT}\n        onClick={() => (this.tooltip = false)}\n      >\n        {`${title} ${year} ${author} ${description}`}\n      </z-popover>\n    );\n  }\n\n  private setExpirationLicenseMessage(type: string): HTMLSpanElement {\n    if (\n      (type === \"online\" && this.cardData.onlineLicense.expired) ||\n      (type === \"offline\" && this.cardData.offlineLicense.expired)\n    ) {\n      return <span class=\"expired\">SCADUTA</span>;\n    }\n\n    if (\n      (type === \"online\" && this.cardData.onlineLicense.expiring) ||\n      (type === \"offline\" && this.cardData.offlineLicense.expiring)\n    ) {\n      return <span class=\"expiring\">IN SCADENZA</span>;\n    }\n  }\n\n  private renderOnlineLicenseSection(): HTMLElement {\n    if (!this?.cardData?.onlineLicense) {\n      return;\n    }\n\n    return (\n      <section ref={(el) => (this.onlineLicenseWrapper = el)}>\n        <span class=\"license-heading\">\n          <span>Licenza online</span>\n          {this.setExpirationLicenseMessage(\"online\")}\n        </span>\n        Scadenza il <b>{this.cardData.onlineLicense.expiration}</b>\n        <br />\n      </section>\n    );\n  }\n\n  private renderOfflineLicenseSection(): HTMLElement {\n    if (!this?.cardData?.offlineLicense) {\n      return;\n    }\n\n    return (\n      <section ref={(el) => (this.offlineLicenseWrapper = el)}>\n        <span class=\"license-heading\">\n          <span>Licenza offline</span>\n          {this.setExpirationLicenseMessage(\"offline\")}\n        </span>\n        Scadenza il <b>{this.cardData.offlineLicense.expiration}</b>\n        <br />\n        Installazioni disponibili: <b>{this.cardData.offlineLicense.installations}</b>\n      </section>\n    );\n  }\n\n  render(): HTMLDivElement {\n    return (\n      <div>\n        {this.renderCloseIcon()}\n        <div\n          class=\"content-wrapper\"\n          ref={(el) => (this.contentWrapper = el)}\n        >\n          {this.renderGeneralSection()}\n          {this.renderTooltip()}\n          {this.renderOnlineLicenseSection()}\n          {this.renderOfflineLicenseSection()}\n        </div>\n        <div class=\"cta-wrapper\">\n          <slot />\n        </div>\n      </div>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/web-components-library/p-f777c4d3.entry.js

@@ -0,0 +1,2 @@
+import{r as o,h as e,a as i}from"./p-75c4a726.js";const t=":host{position:relative;display:-ms-flexbox;display:flex;width:100%;max-width:100%;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-direction:row;flex-direction:row;padding:0;margin:0;font-family:var(--font-family-sans);font-weight:var(--font-rg);list-style:none}@media only screen and (min-width: 768px){:host{padding:0 calc(var(--space-unit) * 2)}}";const s=t;const d=class{constructor(e){o(this,e)}render(){return e(i,{key:"1dd60e057dc5910e320df088512d2bd3dd5b1e4a",role:"list"},e("slot",{key:"721b83774cdf84979db9c204986c84174d56fc0a"}))}};d.style=s;export{d as z_stepper};
+//# sourceMappingURL=p-f777c4d3.entry.js.map

package/dist/web-components-library/p-f777c4d3.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["stylesCss","ZStepperStyle0","ZStepper","render","h","Host","key","role"],"sources":["src/components/z-stepper/styles.css?tag=z-stepper&encapsulation=shadow","src/components/z-stepper/index.tsx"],"sourcesContent":[":host {\n  position: relative;\n  display: flex;\n  width: 100%;\n  max-width: 100%;\n  box-sizing: border-box;\n  flex-direction: row;\n  padding: 0;\n  margin: 0;\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n  list-style: none;\n}\n\n@media only screen and (min-width: 768px) {\n  :host {\n    padding: 0 calc(var(--space-unit) * 2);\n  }\n}\n","import {Component, Host, h} from \"@stencil/core\";\n\n/**\n * @slot - slot for `z-stepper-item`\n */\n@Component({\n  tag: \"z-stepper\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZStepper {\n  render(): HTMLSlotElement {\n    return (\n      <Host role=\"list\">\n        <slot />\n      </Host>\n    );\n  }\n}\n"],"mappings":"kDAAA,MAAMA,EAAY,6WAClB,MAAAC,EAAeD,E,MCSFE,EAAQ,M,yBACnB,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,KAAK,QACTH,EAAA,QAAAE,IAAA,6C","ignoreList":[]}

package/dist/web-components-library/p-f88ada7f.js

@@ -0,0 +1,2 @@
+import{r as o,h as r,a as c}from"./p-75c4a726.js";const s=":host{display:block;-webkit-box-sizing:border-box;box-sizing:border-box}";const e=s;const a=class{constructor(r){o(this,r)}render(){return r(c,{key:"b704110bd5823c470d18953bc24db09da7c66e8a",role:"rowgroup"},r("slot",{key:"d71e881ccc992ac2a8e97efa8617d33c63ae1003"}))}};a.style=e;export{a as Z};
+//# sourceMappingURL=p-f88ada7f.js.map

package/dist/web-components-library/p-f88ada7f.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["stylesCss","ZTbodyStyle0","ZTbody","render","h","Host","key","role"],"sources":["src/components/table/z-tbody/styles.css?tag=z-tbody&encapsulation=shadow","src/components/table/z-tbody/index.tsx"],"sourcesContent":[":host {\n  display: block;\n  box-sizing: border-box;\n}\n","import {Component, Host, h} from \"@stencil/core\";\n\n/**\n * ZTbody component.\n * @slot - ZTbody content (`z-tr`).\n */\n@Component({\n  tag: \"z-tbody\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZTbody {\n  render(): HTMLZTbodyElement {\n    return (\n      <Host role=\"rowgroup\">\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"mappings":"kDAAA,MAAMA,EAAY,2EAClB,MAAAC,EAAeD,E,MCUFE,EAAM,M,yBACjB,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,KAAK,YACTH,EAAA,QAAAE,IAAA,6C","ignoreList":[]}

package/dist/web-components-library/p-fc346ca5.entry.js

@@ -0,0 +1,2 @@
+export{Z as z_tbody}from"./p-f88ada7f.js";import"./p-75c4a726.js";
+//# sourceMappingURL=p-fc346ca5.entry.js.map

package/dist/web-components-library/p-fc346ca5.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":[],"mappings":"","ignoreList":[]}

package/dist/web-components-library/p-ff686d23.system.entry.js

@@ -0,0 +1,2 @@
+System.register(["./p-b3ea380b.system.js","./p-d91b26d9.system.js"],(function(t){"use strict";var e,i,a,s;return{setters:[function(t){e=t.r;i=t.h;a=t.a},function(t){s=t.A}],execute:function(){var r=":host{display:-ms-inline-flexbox;display:inline-flex;overflow:hidden;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;background-color:var(--gray700);border-radius:50%;font-family:var(--font-family-sans);text-transform:uppercase}:host(.small),:host(.small)>img{width:calc(var(--space-unit) * 3);height:calc(var(--space-unit) * 3)}:host(.medium),:host(.medium)>img{width:calc(var(--space-unit) * 4);height:calc(var(--space-unit) * 4)}:host(.large),:host(.large)>img{width:calc(var(--space-unit) * 5);height:calc(var(--space-unit) * 5)}:host>img{-o-object-fit:cover;object-fit:cover}";var n=r;var c=t("z_avatar",function(){function t(t){e(this,t);var i,a;this.size=s.MEDIUM;this.text=undefined;this.textColor="color-white";this.backgroundColor="gray700";this.image=undefined;if(((i=this.text)===null||i===void 0?void 0:i.length)===0&&((a=this.image)===null||a===void 0?void 0:a.length)===0){console.warn("z-avatar must contain at least one prop between text and image")}}t.prototype.getTextSize=function(){if(this.size===s.SMALL){return"5"}else if(this.size===s.MEDIUM){return"4"}else if(this.size===s.LARGE){return"2"}};t.prototype.render=function(){var t;var e=this;return i(a,{key:"77ef834dbf6ba1e73562dea4e1011196d8decee4",class:(t={},t[this.size]=true,t["body-".concat(this.getTextSize(),"-sb")]=true,t),style:{color:"var(--".concat(this.textColor,")"),backgroundColor:"var(--".concat(this.backgroundColor,")")}},this.text&&!this.image&&i("span",{key:"41eab447479aa532c45f39aae303d7388928aedf"},this.text.substring(0,2)),this.image&&i("img",{key:"e6ebedad5e2bf6c73107b174dad478ba0dd4c9d2",src:this.image,onError:function(){return e.image=""}}))};return t}());c.style=n}}}));
+//# sourceMappingURL=p-ff686d23.system.entry.js.map

package/dist/web-components-library/p-ff686d23.system.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["stylesCss","ZAvatarStyle0","ZAvatar","exports","class_1","hostRef","AvatarSize","MEDIUM","_a","this","text","length","_b","image","console","warn","prototype","getTextSize","size","SMALL","LARGE","render","_this","h","Host","key","class","_c","concat","style","color","textColor","backgroundColor","substring","src","onError"],"sources":["src/components/z-avatar/styles.css?tag=z-avatar&encapsulation=shadow","src/components/z-avatar/index.tsx"],"sourcesContent":[":host {\n  display: inline-flex;\n  overflow: hidden;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--gray700);\n  border-radius: 50%;\n  font-family: var(--font-family-sans);\n  text-transform: uppercase;\n}\n\n:host(.small),\n:host(.small) > img {\n  width: calc(var(--space-unit) * 3);\n  height: calc(var(--space-unit) * 3);\n}\n\n:host(.medium),\n:host(.medium) > img {\n  width: calc(var(--space-unit) * 4);\n  height: calc(var(--space-unit) * 4);\n}\n\n:host(.large),\n:host(.large) > img {\n  width: calc(var(--space-unit) * 5);\n  height: calc(var(--space-unit) * 5);\n}\n\n:host > img {\n  object-fit: cover;\n}\n","import {Component, Host, Prop, h} from \"@stencil/core\";\nimport {AvatarSize} from \"../../beans\";\n\n@Component({\n  tag: \"z-avatar\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZAvatar {\n  /** [optional] Avatar size */\n  @Prop()\n  size?: AvatarSize = AvatarSize.MEDIUM;\n\n  /** [optional] Avatar text */\n  @Prop()\n  text?: string;\n\n  /** [optional] Avatar text color */\n  @Prop()\n  textColor?: string = \"color-white\";\n\n  /** [optional] Avatar background color */\n  @Prop()\n  backgroundColor?: string = \"gray700\";\n\n  /** [optional] Avatar image */\n  @Prop({mutable: true})\n  image?: string;\n\n  constructor() {\n    if (this.text?.length === 0 && this.image?.length === 0) {\n      console.warn(\"z-avatar must contain at least one prop between text and image\");\n    }\n  }\n\n  private getTextSize(): string {\n    if (this.size === AvatarSize.SMALL) {\n      return \"5\";\n    } else if (this.size === AvatarSize.MEDIUM) {\n      return \"4\";\n    } else if (this.size === AvatarSize.LARGE) {\n      return \"2\";\n    }\n  }\n\n  render(): HTMLZAvatarElement {\n    return (\n      <Host\n        class={{[this.size]: true, [`body-${this.getTextSize()}-sb`]: true}}\n        style={{\n          color: `var(--${this.textColor})`,\n          backgroundColor: `var(--${this.backgroundColor})`,\n        }}\n      >\n        {this.text && !this.image && <span>{this.text.substring(0, 2)}</span>}\n        {this.image && (\n          <img\n            src={this.image}\n            onError={() => (this.image = \"\")}\n          />\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"gMAAA,IAAMA,EAAY,4mBAClB,IAAAC,EAAeD,E,ICOFE,EAAOC,EAAA,sBAqBlB,SAAAC,EAAAC,G,4BAlBoBC,EAAWC,O,mCAQV,c,qBAIM,U,qBAOzB,KAAIC,EAAAC,KAAKC,QAAI,MAAAF,SAAA,SAAAA,EAAEG,UAAW,KAAKC,EAAAH,KAAKI,SAAK,MAAAD,SAAA,SAAAA,EAAED,UAAW,EAAG,CACvDG,QAAQC,KAAK,iE,EAITX,EAAAY,UAAAC,YAAA,WACN,GAAIR,KAAKS,OAASZ,EAAWa,MAAO,CAClC,MAAO,G,MACF,GAAIV,KAAKS,OAASZ,EAAWC,OAAQ,CAC1C,MAAO,G,MACF,GAAIE,KAAKS,OAASZ,EAAWc,MAAO,CACzC,MAAO,G,GAIXhB,EAAAY,UAAAK,OAAA,W,MAAA,IAAAC,EAAAb,KACE,OACEc,EAACC,EAAI,CAAAC,IAAA,2CACHC,OAAKC,EAAA,GAAGA,EAAClB,KAAKS,MAAO,KAAMS,EAAC,QAAAC,OAAQnB,KAAKQ,cAAa,QAAQ,KAAIU,GAClEE,MAAO,CACLC,MAAO,SAAAF,OAASnB,KAAKsB,UAAS,KAC9BC,gBAAiB,SAAAJ,OAASnB,KAAKuB,gBAAe,OAG/CvB,KAAKC,OAASD,KAAKI,OAASU,EAAA,QAAAE,IAAA,4CAAOhB,KAAKC,KAAKuB,UAAU,EAAG,IAC1DxB,KAAKI,OACJU,EAAA,OAAAE,IAAA,2CACES,IAAKzB,KAAKI,MACVsB,QAAS,kBAAOb,EAAKT,MAAQ,EAApB,I,WAlDD,I","ignoreList":[]}

package/dist/web-components-library/web-components-library.css

@@ -917,6 +917,8 @@
 .z-grid {
   display: grid;
   width: 100%;
+  -webkit-column-gap: var(--grid-gutter);
+  -moz-column-gap: var(--grid-gutter);
   column-gap: var(--grid-gutter);
   grid-template-columns: repeat(var(--grid-columns), 1fr);
 
@@ -1912,25 +1914,33 @@
   z-index: 1;
   right: var(--z-fab-right-offset);
   bottom: var(--z-fab-bottom-offset);
+  display: -ms-flexbox;
   display: flex;
   max-width: 48px;
+  -webkit-box-sizing: border-box;
   box-sizing: border-box;
+  -ms-flex-align: center;
   align-items: center;
   padding: 14px;
   background-color: var(--color-primary01);
   border-radius: 24px;
+  -webkit-box-shadow: var(--shadow-4);
   box-shadow: var(--shadow-4);
   color: var(--color-text-inverse);
+  -webkit-column-gap: 0;
+  -moz-column-gap: 0;
   column-gap: 0;
   cursor: pointer;
   font-family: var(--font-family-sans);
   font-size: var(--font-size-3);
   font-weight: var(--font-rg);
   line-height: 1.25;
+  -webkit-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
 }
 
 .z-fab:focus {
+  -webkit-box-shadow: var(--shadow-focus-primary);
   box-shadow: var(--shadow-focus-primary);
   outline: none;
 }
@@ -1965,10 +1975,14 @@ a.z-fab {
 
 .z-fab.z-fab-extended {
   max-width: 100%;
+  -webkit-column-gap: var(--space-unit);
+  -moz-column-gap: var(--space-unit);
   column-gap: var(--space-unit);
 }
 
 .z-fab.z-fab-extended.z-fab-x-small {
+  -webkit-column-gap: calc(var(--space-unit) / 2);
+  -moz-column-gap: calc(var(--space-unit) / 2);
   column-gap: calc(var(--space-unit) / 2);
 }
 
@@ -2015,6 +2029,7 @@ a.z-fab {
 .z-fab > *:not(z-icon) {
   overflow: hidden;
   opacity: 0;
+  -webkit-transition: opacity 0.2s ease-in-out;
   transition: opacity 0.2s ease-in-out;
   white-space: nowrap;
 }
@@ -2026,6 +2041,8 @@ a.z-fab {
 @media (hover: hover) {
   .z-fab.z-fab-extendable:hover {
     max-width: 100%;
+    -webkit-column-gap: var(--space-unit);
+    -moz-column-gap: var(--space-unit);
     column-gap: var(--space-unit);
   }
 
@@ -2034,6 +2051,8 @@ a.z-fab {
   }
 
   .z-fab.z-fab-x-small.z-fab-extendable:hover {
+    -webkit-column-gap: calc(var(--space-unit) / 2);
+    -moz-column-gap: calc(var(--space-unit) / 2);
     column-gap: calc(var(--space-unit) / 2);
   }
 }
@@ -2047,6 +2066,7 @@ button.z-link {
 
 a.z-link,
 button.z-link {
+  display: -ms-inline-flexbox;
   display: inline-flex;
   cursor: pointer;
   font-family: var(--font-family-sans);
@@ -2059,7 +2079,11 @@ button.z-link.z-link-icon {
   --z-icon-width: 1.125em;
   --z-icon-height: 1.125em;
 
+  -ms-flex-align: center;
+
   align-items: center;
+  -webkit-column-gap: 0.5em;
+  -moz-column-gap: 0.5em;
   column-gap: 0.5em;
 }
 
@@ -2084,12 +2108,14 @@ button.z-link:active {
 
 a.z-link:focus,
 button.z-link:focus {
+  -webkit-box-shadow: var(--shadow-focus-primary);
   box-shadow: var(--shadow-focus-primary);
   outline: none;
 }
 
 a.z-link.z-link-disabled,
 button.z-link.z-link-disabled {
+  -webkit-box-shadow: none;
   box-shadow: none;
   color: var(--color-disabled03);
   cursor: default;
@@ -2238,137 +2264,186 @@ button.z-link.z-link-inverse:visited {
 }
 
 .theme-dark {
+  background: var(--color-surface01);
+
+  --shadow-focus-primary: 0 0 0 2px var(--gray900), 0 0 2px 5px var(--blue25);
+
+  /* primary */
+  --color-active-primary: var(--gray25);
+  --color-hover-primary: var(--gray100);
+  --color-pressed-primary: var(--gray25);
   --color-primary01: var(--color-white);
   --color-primary02: var(--gray800);
   --color-primary03: var(--gray700);
-  --color-hover-primary: var(--gray100);
-  --color-pressed-primary: var(--gray25);
+
+  /* secondary */
+  --color-hover-secondary: var(--red200);
   --color-secondary01: var(--red500);
   --color-secondary02: var(--red900);
   --color-secondary03: var(--red800);
-  --color-hover-secondary: var(--red200);
-  --color-active-primary: var(--gray25);
+
+  /* surface */
   --color-surface01: var(--gray900);
   --color-surface02: var(--gray700);
   --color-surface03: var(--gray300);
   --color-surface04: var(--gray100);
   --color-surface05: var(--color-white);
+
+  /* text */
   --color-default-text: var(--gray100);
+  --color-hover-text: var(--gray300);
+  --color-pressed-text: var(--gray300);
+  --color-text-inverse: var(--gray900);
+  --color-text-link-default: var(--gray100);
   --color-text02: var(--gray900);
   --color-text03: var(--gray700);
   --color-text05: var(--gray500);
-  --color-text-inverse: var(--gray900);
-  --color-pressed-text: var(--gray300);
-  --color-hover-text: var(--gray300);
-  --color-disabled01: var(--gray700);
-  --color-disabled02: var(--gray900);
-  --color-primary01-icon: var(--color-white);
+
+  /* icons */
+  --color-active-primary-icon: var(--gray300);
   --color-disabled01-icon: var(--gray700);
   --color-disabled02-icon: var(--gray900);
-  --color-pressed-icon: var(--gray300);
   --color-hover-icon: var(--gray300);
-  --color-active-primary-icon: var(--gray300);
   --color-hover-primary-icon: var(--gray300);
+  --color-pressed-icon: var(--gray300);
+  --color-primary01-icon: var(--color-white);
+
+  /* status */
+  --color-danger01: var(--red50);
+  --color-danger02: var(--red50);
   --color-default-icon: var(--gray100);
+  --color-disabled01: var(--gray700);
+  --color-disabled02: var(--gray900);
   --color-error01: var(--red50);
   --color-error02: var(--red50);
-  --color-danger01: var(--red50);
-  --color-danger02: var(--red50);
-  --color-text-error: var(--red50);
-  --color-inverse-error: var(--red700);
-  --color-hover-error: var(--red300);
   --color-hover-danger: var(--red300);
-  --color-success01: var(--green50);
-  --color-success02: var(--green50);
-  --color-inverse-success: var(--green700);
+  --color-hover-error: var(--red300);
   --color-hover-success: var(--green300);
-  --color-inverse-hover-success: var(--green50);
+  --color-hover-warning: var(--yellow50);
+  --color-inverse-error: var(--red700);
   --color-inverse-hover-error: var(--red50);
+  --color-inverse-hover-success: var(--green50);
+  --color-inverse-hover-warning: var(--yellow300);
+  --color-inverse-success: var(--green700);
+  --color-inverse-warning: var(--yellow700);
+  --color-success01: var(--green50);
+  --color-success02: var(--green50);
+  --color-text-error: var(--red50);
   --color-warning01: var(--yellow300);
   --color-warning02: var(--yellow300);
-  --color-inverse-warning: var(--yellow700);
-  --color-hover-warning: var(--yellow50);
-  --color-inverse-hover-warning: var(--yellow300);
-
-  background: var(--color-surface01);
 
-  --shadow-focus-primary: 0 0 0 2px var(--gray800), 0 0 2px 5px var(--blue25);
+  /* forms */
+  --color-form-active-primary: var(--gray800);
+  --color-form-hover-primary: var(--gray800);
 }
 
 :root,
 .theme-default {
   --color-background: var(--gray50);
+  --shadow-focus-primary: 0 0 0 2px var(--color-white), 0 0 2px 5px var(--blue800);
+
+  /* primary */
+  --color-active-primary: var(--blue800);
+  --color-hover-primary: var(--blue800);
+  --color-pressed-primary: var(--blue400);
   --color-primary01: var(--blue500);
   --color-primary02: var(--blue25);
   --color-primary03: var(--blue50);
+
+  /* secondary */
+  --color-active-secondary: var(--red400);
+  --color-hover-secondary: var(--red800);
+  --color-pressed-secondary: var(--red400);
   --color-secondary01: var(--red500);
   --color-secondary02: var(--red25);
   --color-secondary03: var(--red50);
-  --color-danger01: var(--red500);
-  --color-danger02: var(--red500);
-  --color-error01: var(--red500);
-  --color-error02: var(--red500);
-  --color-error-inverse: var(--red50);
-  --color-text-error: var(--red700);
-  --color-success01: var(--green500);
-  --color-success02: var(--green500);
-  --color-text-success: var(--color-success-default);
-  --color-success-inverse: var(--green50);
-  --color-warning01: var(--yellow500);
-  --color-warning02: var(--yellow500);
-  --color-text-warning: var(--color-warning-default);
-  --color-warning-inverse: var(--yellow50);
+
+  /* surface */
   --color-surface01: var(--color-white);
   --color-surface02: var(--gray100);
   --color-surface03: var(--gray300);
   --color-surface04: var(--gray700);
   --color-surface05: var(--gray900);
+
+  /* text */
   --color-default-text: var(--gray900);
+  --color-hover-primary-text: var(--color-black);
+  --color-text-inverse: var(--color-white);
   --color-text02: var(--gray100);
   --color-text03: var(--gray300);
   --color-text05: var(--gray600);
-  --color-text-inverse: var(--color-white);
-  --color-primary01-icon: var(--blue500);
+
+  /* icons */
+  --color-active-primary-icon: var(--blue400);
   --color-default-icon: var(--gray900);
-  --color-inverse-icon: var(--color-white);
-  --color-hover-icon: var(--color-black);
-  --color-pressed-icon: var(--gray700);
-  --color-disabled03-icon: var(--gray500);
   --color-disabled01-icon: var(--gray300);
   --color-disabled02-icon: var(--gray100);
+  --color-disabled03-icon: var(--gray500);
+  --color-hover-icon: var(--color-black);
   --color-hover-primary-icon: var(--blue800);
-  --color-active-primary-icon: var(--blue400);
-  --color-form-background: var(--color-white);
-  --color-hover-primary: var(--blue800);
-  --color-hover-primary-text: var(--color-black);
-  --color-hover-secondary: var(--red800);
-  --color-hover-tertiary: var(--blue800);
-  --color-hover-surface: var(--gray50);
-  --color-hover-light: var(--blue400);
+  --color-inverse-icon: var(--color-white);
+  --color-pressed-icon: var(--gray700);
+  --color-primary01-icon: var(--blue500);
+
+  /* status */
+  --color-danger01: var(--red500);
+  --color-danger02: var(--red500);
+  --color-disabled01: var(--gray300);
+  --color-disabled02: var(--gray100);
+  --color-disabled03: var(--gray500);
+  --color-error-inverse: var(--red50);
+  --color-error01: var(--red500);
+  --color-error02: var(--red500);
   --color-hover-danger: var(--red700);
   --color-hover-error: var(--red700);
   --color-hover-success: var(--green700);
   --color-hover-warning: var(--yellow700);
-  --color-active-primary: var(--blue800);
-  --color-active-secondary: var(--red400);
-  --color-active-tertiary: var(--blue800);
-  --color-active-light: var(--blue400);
-  --color-pressed-primary: var(--blue400);
-  --color-pressed-secondary: var(--red400);
-  --color-selected-light: var(--gray300);
-  --color-highlight: var(--blue400);
-  --color-ghost01: var(--gray300);
-  --color-ghost02: var(--gray500);
-  --color-disabled01: var(--gray300);
-  --color-disabled02: var(--gray100);
-  --color-disabled03: var(--gray500);
-  --shadow-focus-primary: 0 0 0 2px var(--color-white), 0 0 2px 5px var(--blue800);
+  --color-inverse-error: var(--red50);
   --color-inverse-hover-error: var(--red500);
   --color-inverse-hover-success: var(--green500);
   --color-inverse-hover-warning: var(--yellow500);
-  --color-inverse-error: var(--red50);
   --color-inverse-success: var(--green50);
   --color-inverse-warning: var(--yellow50);
+  --color-success-inverse: var(--green50);
+  --color-success01: var(--green500);
+  --color-success02: var(--green500);
+  --color-text-error: var(--red700);
+  --color-text-success: var(--color-success-default);
+  --color-text-warning: var(--color-warning-default);
+  --color-warning-inverse: var(--yellow50);
+  --color-warning01: var(--yellow500);
+  --color-warning02: var(--yellow500);
+
+  /* forms */
+  --color-form-active-primary: var(--blue400);
+  --color-form-background: var(--color-white);
+  --color-form-default-icon: var(--gray900);
+  --color-form-default-text: var(--gray900);
+  --color-form-disabled-text: var(--gray500);
+  --color-form-disabled01-icon: var(--gray500);
+  --color-form-disabled03: var(--gray500);
+  --color-form-hover-error: var(--red800);
+  --color-form-hover-primary: var(--blue800);
+  --color-form-hover-warning: var(--yellow800);
+  --color-form-inverse-error: var(--red50);
+  --color-form-inverse-success: var(--green50);
+  --color-form-inverse-warning: var(--yellow50);
+  --color-form-placeholder-text: var(--gray500);
+  --color-form-success01: var(--green500);
+  --color-form-surface03: var(--gray200);
+  --color-form-surface04: var(--gray600);
+  --color-form-warning01: var(--yellow500);
+
+  /* misc */
+  --color-active-light: var(--blue400);
+  --color-active-tertiary: var(--blue800);
+  --color-hover-tertiary: var(--blue800);
+  --color-hover-surface: var(--gray50);
+  --color-ghost01: var(--gray300);
+  --color-ghost02: var(--gray500);
+  --color-highlight: var(--blue400);
+  --color-hover-light: var(--blue400);
+  --color-selected-light: var(--gray300);
 }
 
 .theme-red {
@@ -2380,10 +2455,9 @@ button.z-link.z-link-inverse:visited {
   --color-hover-primary-icon: var(--red800);
   --color-hover-primary: var(--red800);
   --color-pressed-primary: var(--red400);
-  --color-primary01-icon: var(--red500);
+  --color-primary01: var(--red500);
   --color-primary02: var(--red25);
   --color-primary03: var(--red50);
-  --color-primary01: var(--red500);
 
   /* secondary */
   --color-active-secondary: var(--gray400);
@@ -2414,6 +2488,11 @@ button.z-link.z-link-inverse:visited {
   --color-hover-icon: var(--color-black);
   --color-inverse-icon: var(--color-white);
   --color-pressed-icon: var(--gray700);
+  --color-primary01-icon: var(--red500);
+
+  /* forms */
+  --color-form-active-primary: var(--red400);
+  --color-form-hover-primary: var(--red800);
 }