@foxy.io/elements 1.38.0-beta.4 → 1.38.0

package/dist/cdn/{shared-562d6c10.js → shared-f1033d78.js}

@@ -1,4 +1,4 @@
-import{h as t}from"./shared-5c747b54.js";import{T as e}from"./shared-2fe8f409.js";import{D as l}from"./shared-3e7f5663.js";const r=t`<dom-module id="lumo-email-field" theme-for="vaadin-email-field">
+import{h as t}from"./shared-21e68b72.js";import{T as e}from"./shared-edeeb089.js";import{D as l}from"./shared-11351c00.js";const r=t`<dom-module id="lumo-email-field" theme-for="vaadin-email-field">
   <template>
     <style>
       :not(*):placeholder-shown, /* to prevent broken styles on IE */

package/dist/cdn/{shared-2a305cf4.js → shared-f1a70f51.js}

@@ -1 +1 @@
-import{T as e}from"./shared-3e7f5663.js";import{N as t}from"./shared-f83207fb.js";import{c as i}from"./shared-4e709717.js";import{h as s}from"./shared-ba5c42c7.js";let r,n,a=e=>e;class o extends(e(t)){renderBody(){return s(r||(r=a``))}render(){const e=this.in("fail")?"error":this.in({idle:"template"})?"empty":"busy";return s(n||(n=a` <div aria-busy="${0}" aria-live="polite" class="relative leading-m text-body text-m font-lumo"> <div class="${0}"> ${0} </div> <div class="${0}"> <foxy-spinner layout="${0}" state="${0}" infer="spinner"> </foxy-spinner> </div> </div> `),this.in("busy"),i({"transition duration-500 ease-in-out":!0,"opacity-0 pointer-events-none":!this.isBodyReady}),this.renderBody(),i({"transition duration-500 ease-in-out absolute inset-0 flex":!0,"items-center justify-center":!0,"opacity-0 pointer-events-none":this.isBodyReady}),"busy"===e?"no-label":"horizontal",e)}get isBodyReady(){return!!this.data}}export{o as I};
+import{T as e}from"./shared-11351c00.js";import{N as t}from"./shared-f83207fb.js";import{c as i}from"./shared-4e709717.js";import{h as s}from"./shared-ba5c42c7.js";let r,n,a=e=>e;class o extends(e(t)){renderBody(){return s(r||(r=a``))}render(){const e=this.in("fail")?"error":this.in({idle:"template"})?"empty":"busy";return s(n||(n=a` <div aria-busy="${0}" aria-live="polite" class="relative leading-m text-body text-m font-lumo"> <div class="${0}"> ${0} </div> <div class="${0}"> <foxy-spinner layout="${0}" state="${0}" infer="spinner"> </foxy-spinner> </div> </div> `),this.in("busy"),i({"transition duration-500 ease-in-out":!0,"opacity-0 pointer-events-none":!this.isBodyReady}),this.renderBody(),i({"transition duration-500 ease-in-out absolute inset-0 flex":!0,"items-center justify-center":!0,"opacity-0 pointer-events-none":this.isBodyReady}),"busy"===e?"no-label":"horizontal",e)}get isBodyReady(){return!!this.data}}export{o as I};

package/dist/cdn/{shared-37d9634f.js → shared-f69aacbc.js}

@@ -1 +1 @@
-import"./shared-3f0b1660.js";import"./shared-65b74c44.js";import"./shared-cfb804b4.js";import{L as t,h as e}from"./shared-ba5c42c7.js";import{T as a}from"./shared-3e7f5663.js";import{c as s}from"./shared-4e709717.js";import{p as n}from"./shared-43e2c3f6.js";import{s as r}from"./shared-79d0699c.js";let i,o,l,d,h,c=t=>t;class u extends(a(t)){constructor(){super(...arguments),this.checkAvailability=()=>!0,this.readonly=!1,this.disabled=!1,this.value="",this.start="",this.lang=""}static get properties(){return{checkAvailability:{attribute:!1},readonly:{type:Boolean,reflect:!0},disabled:{type:Boolean,reflect:!0},value:{type:String},start:{type:String},lang:{type:String}}}render(){var t,a;const n=new Date(null!==(a=null!==(t=this.__startAsDate)&&void 0!==t?t:this.__valueAsDate)&&void 0!==a?a:Date.now()),r=new Date(n),o=new Date(n),l=this.lang||navigator.language;return r.setMonth(r.getMonth()-1),o.setMonth(o.getMonth()+1),e(i||(i=c` <div class="text-m text-body font-lumo leading-m"> <div class="grid p-xs" style="grid-template:auto/max-content auto max-content"> <vaadin-button data-testid="prev" aria-label="${0}" theme="icon tertiary" class="px-xs" ?disabled="${0}" @click="${0}"> <iron-icon icon="icons:chevron-left"></iron-icon> </vaadin-button> <span data-testid="month" class="${0}"> ${0} </span> <vaadin-button data-testid="next" aria-label="${0}" theme="icon tertiary" class="px-xs" ?disabled="${0}" @click="${0}"> <iron-icon icon="icons:chevron-right"></iron-icon> </vaadin-button> </div> ${0} </div> `),r.toLocaleString(l,{year:"numeric",month:"long"}),this.disabled,this.__handlePrevButtonClick,s({"text-center self-center font-medium":!0,"text-disabled":this.disabled}),n.toLocaleDateString(l,{month:"long",year:"numeric"}),o.toLocaleString(l,{year:"numeric",month:"long"}),this.disabled,this.__handleNextButtonClick,this.__renderMonth(n.getMonth(),n.getFullYear()))}get __valueAsDate(){return n(this.value)}set __valueAsDate(t){this.value=t?r(t):""}get __startAsDate(){return n(this.start)}set __startAsDate(t){this.start=t?r(t):""}__renderMonth(t,a){var n,r,i;const h=this.lang||navigator.language,u=new Date(a,t,1,0,0,0,0),g=[];for(let t=0;t<7;++t){const a=new Date;for(;a.getDay()!==t;)a.setDate(a.getDate()+1);g.push(e(o||(o=c` <span class="${0}"> ${0} </span> `),s({"self-center text-xxs uppercase font-medium tracking-wider":!0,"text-secondary":!this.disabled,"text-disabled":this.disabled}),a.toLocaleString(h,{weekday:"short"})))}for(;u.getMonth()===t;){const s=u.getFullYear()===(null===(n=this.__valueAsDate)||void 0===n?void 0:n.getFullYear())&&u.getMonth()===(null===(r=this.__valueAsDate)||void 0===r?void 0:r.getMonth())&&u.getDate()===(null===(i=this.__valueAsDate)||void 0===i?void 0:i.getDate());g.push(e(l||(l=c` <div style="grid-column:${0}" data-testclass="day-of-month"> ${0} </div> `),u.getDay()+1,this.__renderDate(u.getDate(),t,a,s))),u.setDate(u.getDate()+1)}return e(d||(d=c` <form data-testid="grid" class="grid gap-s p-s text-center" style="grid-template:auto/repeat(7,1fr)"> ${0} </form> `),g)}__renderDate(t,a,n,r=!1){const i=this.disabled||this.readonly||!this.checkAvailability(new Date(n,a,t));return e(h||(h=c` <label class="${0}"> <input name="date" type="radio" value="${0}" class="sr-only" ?disabled="${0}" @change="${0}"> ${0} </label> `),s({"relative flex w-m h-m items-center justify-center rounded-s":!0,"font-tnum text-l select-none leading-none":!0,"cursor-pointer focus-within-ring-2 focus-within-ring-primary-50":!i,"bg-contrast-5 hover-bg-contrast-10":!r&&!i,"bg-primary text-primary-contrast":r&&!i,"border border-dashed border-contrast-20 text-disabled":!r&&i,"border border-dashed border-primary text-primary":r&&i}),t,this.readonly||this.disabled||i,(()=>{this.__valueAsDate=new Date(n,a,t),this.dispatchEvent(new CustomEvent("change"))}),t)}__handlePrevButtonClick(){var t;const e=null!==(t=this.__startAsDate)&&void 0!==t?t:new Date;this.__startAsDate=new Date(e.setMonth(e.getMonth()-1))}__handleNextButtonClick(){var t;const e=null!==(t=this.__startAsDate)&&void 0!==t?t:new Date;this.__startAsDate=new Date(e.setMonth(e.getMonth()+1))}}customElements.define("foxy-internal-calendar",u);
+import"./shared-8ef0ca65.js";import"./shared-c18f681b.js";import"./shared-37348820.js";import{L as t,h as e}from"./shared-ba5c42c7.js";import{T as a}from"./shared-11351c00.js";import{c as s}from"./shared-4e709717.js";import{p as n}from"./shared-43e2c3f6.js";import{s as r}from"./shared-79d0699c.js";let i,o,l,d,c,h=t=>t;class u extends(a(t)){constructor(){super(...arguments),this.checkAvailability=()=>!0,this.readonly=!1,this.disabled=!1,this.value="",this.start="",this.lang=""}static get properties(){return{checkAvailability:{attribute:!1},readonly:{type:Boolean,reflect:!0},disabled:{type:Boolean,reflect:!0},value:{type:String},start:{type:String},lang:{type:String}}}render(){var t,a;const n=new Date(null!==(a=null!==(t=this.__startAsDate)&&void 0!==t?t:this.__valueAsDate)&&void 0!==a?a:Date.now()),r=new Date(n),o=new Date(n),l=this.lang||navigator.language;return r.setMonth(r.getMonth()-1),o.setMonth(o.getMonth()+1),e(i||(i=h` <div class="text-m text-body font-lumo leading-m"> <div class="grid p-xs" style="grid-template:auto/max-content auto max-content"> <vaadin-button data-testid="prev" aria-label="${0}" theme="icon tertiary" class="px-xs" ?disabled="${0}" @click="${0}"> <iron-icon icon="icons:chevron-left"></iron-icon> </vaadin-button> <span data-testid="month" class="${0}"> ${0} </span> <vaadin-button data-testid="next" aria-label="${0}" theme="icon tertiary" class="px-xs" ?disabled="${0}" @click="${0}"> <iron-icon icon="icons:chevron-right"></iron-icon> </vaadin-button> </div> ${0} </div> `),r.toLocaleString(l,{year:"numeric",month:"long"}),this.disabled,this.__handlePrevButtonClick,s({"text-center self-center font-medium":!0,"text-disabled":this.disabled}),n.toLocaleDateString(l,{month:"long",year:"numeric"}),o.toLocaleString(l,{year:"numeric",month:"long"}),this.disabled,this.__handleNextButtonClick,this.__renderMonth(n.getMonth(),n.getFullYear()))}get __valueAsDate(){return n(this.value)}set __valueAsDate(t){this.value=t?r(t):""}get __startAsDate(){return n(this.start)}set __startAsDate(t){this.start=t?r(t):""}__renderMonth(t,a){var n,r,i;const c=this.lang||navigator.language,u=new Date(a,t,1,0,0,0,0),g=[];for(let t=0;t<7;++t){const a=new Date;for(;a.getDay()!==t;)a.setDate(a.getDate()+1);g.push(e(o||(o=h` <span class="${0}"> ${0} </span> `),s({"self-center text-xxs uppercase font-medium tracking-wider":!0,"text-secondary":!this.disabled,"text-disabled":this.disabled}),a.toLocaleString(c,{weekday:"short"})))}for(;u.getMonth()===t;){const s=u.getFullYear()===(null===(n=this.__valueAsDate)||void 0===n?void 0:n.getFullYear())&&u.getMonth()===(null===(r=this.__valueAsDate)||void 0===r?void 0:r.getMonth())&&u.getDate()===(null===(i=this.__valueAsDate)||void 0===i?void 0:i.getDate());g.push(e(l||(l=h` <div style="grid-column:${0}" data-testclass="day-of-month"> ${0} </div> `),u.getDay()+1,this.__renderDate(u.getDate(),t,a,s))),u.setDate(u.getDate()+1)}return e(d||(d=h` <form data-testid="grid" class="grid gap-s p-s text-center" style="grid-template:auto/repeat(7,1fr)"> ${0} </form> `),g)}__renderDate(t,a,n,r=!1){const i=this.disabled||this.readonly||!this.checkAvailability(new Date(n,a,t));return e(c||(c=h` <label class="${0}"> <input name="date" type="radio" value="${0}" class="sr-only" ?disabled="${0}" @change="${0}"> ${0} </label> `),s({"relative flex w-m h-m items-center justify-center rounded-s":!0,"font-tnum text-l select-none leading-none":!0,"cursor-pointer focus-within-ring-2 focus-within-ring-primary-50":!i,"bg-contrast-5 hover-bg-contrast-10":!r&&!i,"bg-primary text-primary-contrast":r&&!i,"border border-dashed border-contrast-20 text-disabled":!r&&i,"border border-dashed border-primary text-primary":r&&i}),t,this.readonly||this.disabled||i,(()=>{this.__valueAsDate=new Date(n,a,t),this.dispatchEvent(new CustomEvent("change"))}),t)}__handlePrevButtonClick(){var t;const e=null!==(t=this.__startAsDate)&&void 0!==t?t:new Date;this.__startAsDate=new Date(e.setMonth(e.getMonth()-1))}__handleNextButtonClick(){var t;const e=null!==(t=this.__startAsDate)&&void 0!==t?t:new Date;this.__startAsDate=new Date(e.setMonth(e.getMonth()+1))}}customElements.define("foxy-internal-calendar",u);

package/dist/cdn/{shared-f69bc3a6.js → shared-f989c70e.js}

@@ -1 +1 @@
-import"./shared-8154088a.js";const n=document.createElement("template");n.innerHTML='<dom-module id="lumo-required-field">\n  <template>\n    <style>\n      [part="label"] {\n        align-self: flex-start;\n        color: var(--lumo-secondary-text-color);\n        font-weight: 500;\n        font-size: var(--lumo-font-size-s);\n        margin-left: calc(var(--lumo-border-radius-m) / 4);\n        transition: color 0.2s;\n        line-height: 1;\n        padding-bottom: 0.5em;\n        overflow: hidden;\n        white-space: nowrap;\n        text-overflow: ellipsis;\n        position: relative;\n        max-width: 100%;\n        box-sizing: border-box;\n      }\n\n      :host([has-label])::before {\n        margin-top: calc(var(--lumo-font-size-s) * 1.5);\n      }\n\n      :host([has-label]) {\n        padding-top: var(--lumo-space-m);\n      }\n\n      :host([required]) [part="label"] {\n        padding-right: 1em;\n      }\n\n      [part="label"]::after {\n        content: var(--lumo-required-field-indicator, "•");\n        transition: opacity 0.2s;\n        opacity: 0;\n        color: var(--lumo-primary-text-color);\n        position: absolute;\n        right: 0;\n        width: 1em;\n        text-align: center;\n      }\n\n      :host([required]:not([has-value])) [part="label"]::after {\n        opacity: 1;\n      }\n\n      :host([invalid]) [part="label"]::after {\n        color: var(--lumo-error-text-color);\n      }\n\n      [part="error-message"] {\n        margin-left: calc(var(--lumo-border-radius-m) / 4);\n        font-size: var(--lumo-font-size-xs);\n        line-height: var(--lumo-line-height-xs);\n        color: var(--lumo-error-text-color);\n        will-change: max-height;\n        transition: 0.4s max-height;\n        max-height: 5em;\n      }\n\n      /* Margin that doesn’t reserve space when there’s no error message */\n      [part="error-message"]:not(:empty)::before,\n      [part="error-message"]:not(:empty)::after {\n        content: "";\n        display: block;\n        height: 0.4em;\n      }\n\n      :host(:not([invalid])) [part="error-message"] {\n        max-height: 0;\n        overflow: hidden;\n      }\n\n      /* RTL specific styles */\n\n      :host([dir="rtl"]) [part="label"] {\n        margin-left: 0;\n        margin-right: calc(var(--lumo-border-radius-m) / 4);\n      }\n\n      :host([required][dir="rtl"]) [part="label"] {\n        padding-left: 1em;\n        padding-right: 0;\n      }\n\n      :host([dir="rtl"]) [part="label"]::after {\n        right: auto;\n        left: 0;\n      }\n\n      :host([dir="rtl"]) [part="error-message"] {\n        margin-left: 0;\n        margin-right: calc(var(--lumo-border-radius-m) / 4);\n      }\n\n    </style>\n  </template>\n</dom-module>',document.head.appendChild(n.content);
+import"./shared-f9ac8763.js";const n=document.createElement("template");n.innerHTML='<dom-module id="lumo-required-field">\n  <template>\n    <style>\n      [part="label"] {\n        align-self: flex-start;\n        color: var(--lumo-secondary-text-color);\n        font-weight: 500;\n        font-size: var(--lumo-font-size-s);\n        margin-left: calc(var(--lumo-border-radius-m) / 4);\n        transition: color 0.2s;\n        line-height: 1;\n        padding-bottom: 0.5em;\n        overflow: hidden;\n        white-space: nowrap;\n        text-overflow: ellipsis;\n        position: relative;\n        max-width: 100%;\n        box-sizing: border-box;\n      }\n\n      :host([has-label])::before {\n        margin-top: calc(var(--lumo-font-size-s) * 1.5);\n      }\n\n      :host([has-label]) {\n        padding-top: var(--lumo-space-m);\n      }\n\n      :host([required]) [part="label"] {\n        padding-right: 1em;\n      }\n\n      [part="label"]::after {\n        content: var(--lumo-required-field-indicator, "•");\n        transition: opacity 0.2s;\n        opacity: 0;\n        color: var(--lumo-primary-text-color);\n        position: absolute;\n        right: 0;\n        width: 1em;\n        text-align: center;\n      }\n\n      :host([required]:not([has-value])) [part="label"]::after {\n        opacity: 1;\n      }\n\n      :host([invalid]) [part="label"]::after {\n        color: var(--lumo-error-text-color);\n      }\n\n      [part="error-message"] {\n        margin-left: calc(var(--lumo-border-radius-m) / 4);\n        font-size: var(--lumo-font-size-xs);\n        line-height: var(--lumo-line-height-xs);\n        color: var(--lumo-error-text-color);\n        will-change: max-height;\n        transition: 0.4s max-height;\n        max-height: 5em;\n      }\n\n      /* Margin that doesn’t reserve space when there’s no error message */\n      [part="error-message"]:not(:empty)::before,\n      [part="error-message"]:not(:empty)::after {\n        content: "";\n        display: block;\n        height: 0.4em;\n      }\n\n      :host(:not([invalid])) [part="error-message"] {\n        max-height: 0;\n        overflow: hidden;\n      }\n\n      /* RTL specific styles */\n\n      :host([dir="rtl"]) [part="label"] {\n        margin-left: 0;\n        margin-right: calc(var(--lumo-border-radius-m) / 4);\n      }\n\n      :host([required][dir="rtl"]) [part="label"] {\n        padding-left: 1em;\n        padding-right: 0;\n      }\n\n      :host([dir="rtl"]) [part="label"]::after {\n        right: auto;\n        left: 0;\n      }\n\n      :host([dir="rtl"]) [part="error-message"] {\n        margin-left: 0;\n        margin-right: calc(var(--lumo-border-radius-m) / 4);\n      }\n\n    </style>\n  </template>\n</dom-module>',document.head.appendChild(n.content);

package/dist/cdn/{shared-8154088a.js → shared-f9ac8763.js}

@@ -1 +1 @@
-import"./shared-5c747b54.js";import"./shared-3e7f5663.js";class o extends HTMLElement{static get version(){return"1.6.1"}}customElements.define("vaadin-lumo-styles",o);const n=document.createElement("template");n.innerHTML='<custom-style>\n  <style>\n    html {\n      /* Base (background) */\n      --lumo-base-color: #FFF;\n\n      /* Tint */\n      --lumo-tint-5pct: hsla(0, 0%, 100%, 0.3);\n      --lumo-tint-10pct: hsla(0, 0%, 100%, 0.37);\n      --lumo-tint-20pct: hsla(0, 0%, 100%, 0.44);\n      --lumo-tint-30pct: hsla(0, 0%, 100%, 0.5);\n      --lumo-tint-40pct: hsla(0, 0%, 100%, 0.57);\n      --lumo-tint-50pct: hsla(0, 0%, 100%, 0.64);\n      --lumo-tint-60pct: hsla(0, 0%, 100%, 0.7);\n      --lumo-tint-70pct: hsla(0, 0%, 100%, 0.77);\n      --lumo-tint-80pct: hsla(0, 0%, 100%, 0.84);\n      --lumo-tint-90pct: hsla(0, 0%, 100%, 0.9);\n      --lumo-tint: #FFF;\n\n      /* Shade */\n      --lumo-shade-5pct: hsla(214, 61%, 25%, 0.05);\n      --lumo-shade-10pct: hsla(214, 57%, 24%, 0.1);\n      --lumo-shade-20pct: hsla(214, 53%, 23%, 0.16);\n      --lumo-shade-30pct: hsla(214, 50%, 22%, 0.26);\n      --lumo-shade-40pct: hsla(214, 47%, 21%, 0.38);\n      --lumo-shade-50pct: hsla(214, 45%, 20%, 0.5);\n      --lumo-shade-60pct: hsla(214, 43%, 19%, 0.61);\n      --lumo-shade-70pct: hsla(214, 42%, 18%, 0.72);\n      --lumo-shade-80pct: hsla(214, 41%, 17%, 0.83);\n      --lumo-shade-90pct: hsla(214, 40%, 16%, 0.94);\n      --lumo-shade: hsl(214, 35%, 15%);\n\n      /* Contrast */\n      --lumo-contrast-5pct: var(--lumo-shade-5pct);\n      --lumo-contrast-10pct: var(--lumo-shade-10pct);\n      --lumo-contrast-20pct: var(--lumo-shade-20pct);\n      --lumo-contrast-30pct: var(--lumo-shade-30pct);\n      --lumo-contrast-40pct: var(--lumo-shade-40pct);\n      --lumo-contrast-50pct: var(--lumo-shade-50pct);\n      --lumo-contrast-60pct: var(--lumo-shade-60pct);\n      --lumo-contrast-70pct: var(--lumo-shade-70pct);\n      --lumo-contrast-80pct: var(--lumo-shade-80pct);\n      --lumo-contrast-90pct: var(--lumo-shade-90pct);\n      --lumo-contrast: var(--lumo-shade);\n\n      /* Text */\n      --lumo-header-text-color: var(--lumo-contrast);\n      --lumo-body-text-color: var(--lumo-contrast-90pct);\n      --lumo-secondary-text-color: var(--lumo-contrast-70pct);\n      --lumo-tertiary-text-color: var(--lumo-contrast-50pct);\n      --lumo-disabled-text-color: var(--lumo-contrast-30pct);\n\n      /* Primary */\n      --lumo-primary-color: hsl(214, 90%, 52%);\n      --lumo-primary-color-50pct: hsla(214, 90%, 52%, 0.5);\n      --lumo-primary-color-10pct: hsla(214, 90%, 52%, 0.1);\n      --lumo-primary-text-color: var(--lumo-primary-color);\n      --lumo-primary-contrast-color: #FFF;\n\n      /* Error */\n      --lumo-error-color: hsl(3, 100%, 61%);\n      --lumo-error-color-50pct: hsla(3, 100%, 60%, 0.5);\n      --lumo-error-color-10pct: hsla(3, 100%, 60%, 0.1);\n      --lumo-error-text-color: hsl(3, 92%, 53%);\n      --lumo-error-contrast-color: #FFF;\n\n      /* Success */\n      --lumo-success-color: hsl(145, 80%, 42%); /* hsl(144,82%,37%); */\n      --lumo-success-color-50pct: hsla(145, 76%, 44%, 0.55);\n      --lumo-success-color-10pct: hsla(145, 76%, 44%, 0.12);\n      --lumo-success-text-color: hsl(145, 100%, 32%);\n      --lumo-success-contrast-color: #FFF;\n    }\n  </style>\n</custom-style><dom-module id="lumo-color">\n  <template>\n    <style>\n      [theme~="dark"] {\n        /* Base (background) */\n        --lumo-base-color: hsl(214, 35%, 21%);\n\n        /* Tint */\n        --lumo-tint-5pct: hsla(214, 65%, 85%, 0.06);\n        --lumo-tint-10pct: hsla(214, 60%, 80%, 0.14);\n        --lumo-tint-20pct: hsla(214, 64%, 82%, 0.23);\n        --lumo-tint-30pct: hsla(214, 69%, 84%, 0.32);\n        --lumo-tint-40pct: hsla(214, 73%, 86%, 0.41);\n        --lumo-tint-50pct: hsla(214, 78%, 88%, 0.5);\n        --lumo-tint-60pct: hsla(214, 82%, 90%, 0.6);\n        --lumo-tint-70pct: hsla(214, 87%, 92%, 0.7);\n        --lumo-tint-80pct: hsla(214, 91%, 94%, 0.8);\n        --lumo-tint-90pct: hsla(214, 96%, 96%, 0.9);\n        --lumo-tint: hsl(214, 100%, 98%);\n\n        /* Shade */\n        --lumo-shade-5pct: hsla(214, 0%, 0%, 0.07);\n        --lumo-shade-10pct: hsla(214, 4%, 2%, 0.15);\n        --lumo-shade-20pct: hsla(214, 8%, 4%, 0.23);\n        --lumo-shade-30pct: hsla(214, 12%, 6%, 0.32);\n        --lumo-shade-40pct: hsla(214, 16%, 8%, 0.41);\n        --lumo-shade-50pct: hsla(214, 20%, 10%, 0.5);\n        --lumo-shade-60pct: hsla(214, 24%, 12%, 0.6);\n        --lumo-shade-70pct: hsla(214, 28%, 13%, 0.7);\n        --lumo-shade-80pct: hsla(214, 32%, 13%, 0.8);\n        --lumo-shade-90pct: hsla(214, 33%, 13%, 0.9);\n        --lumo-shade: hsl(214, 33%, 13%);\n\n        /* Contrast */\n        --lumo-contrast-5pct: var(--lumo-tint-5pct);\n        --lumo-contrast-10pct: var(--lumo-tint-10pct);\n        --lumo-contrast-20pct: var(--lumo-tint-20pct);\n        --lumo-contrast-30pct: var(--lumo-tint-30pct);\n        --lumo-contrast-40pct: var(--lumo-tint-40pct);\n        --lumo-contrast-50pct: var(--lumo-tint-50pct);\n        --lumo-contrast-60pct: var(--lumo-tint-60pct);\n        --lumo-contrast-70pct: var(--lumo-tint-70pct);\n        --lumo-contrast-80pct: var(--lumo-tint-80pct);\n        --lumo-contrast-90pct: var(--lumo-tint-90pct);\n        --lumo-contrast: var(--lumo-tint);\n\n        /* Text */\n        --lumo-header-text-color: var(--lumo-contrast);\n        --lumo-body-text-color: var(--lumo-contrast-90pct);\n        --lumo-secondary-text-color: var(--lumo-contrast-70pct);\n        --lumo-tertiary-text-color: var(--lumo-contrast-50pct);\n        --lumo-disabled-text-color: var(--lumo-contrast-30pct);\n\n        /* Primary */\n        --lumo-primary-color: hsl(214, 86%, 55%);\n        --lumo-primary-color-50pct: hsla(214, 86%, 55%, 0.5);\n        --lumo-primary-color-10pct: hsla(214, 90%, 63%, 0.1);\n        --lumo-primary-text-color: hsl(214, 100%, 70%);\n        --lumo-primary-contrast-color: #FFF;\n\n        /* Error */\n        --lumo-error-color: hsl(3, 90%, 63%);\n        --lumo-error-color-50pct: hsla(3, 90%, 63%, 0.5);\n        --lumo-error-color-10pct: hsla(3, 90%, 63%, 0.1);\n        --lumo-error-text-color: hsl(3, 100%, 67%);\n\n        /* Success */\n        --lumo-success-color: hsl(145, 65%, 42%);\n        --lumo-success-color-50pct: hsla(145, 65%, 42%, 0.5);\n        --lumo-success-color-10pct: hsla(145, 65%, 42%, 0.1);\n        --lumo-success-text-color: hsl(145, 85%, 47%);\n      }\n\n      html {\n        color: var(--lumo-body-text-color);\n        background-color: var(--lumo-base-color);\n      }\n\n      [theme~="dark"] {\n        color: var(--lumo-body-text-color);\n        background-color: var(--lumo-base-color);\n      }\n\n      h1,\n      h2,\n      h3,\n      h4,\n      h5,\n      h6 {\n        color: var(--lumo-header-text-color);\n      }\n\n      a {\n        color: var(--lumo-primary-text-color);\n      }\n\n      blockquote {\n        color: var(--lumo-secondary-text-color);\n      }\n\n      code,\n      pre {\n        background-color: var(--lumo-contrast-10pct);\n        border-radius: var(--lumo-border-radius-m);\n      }\n    </style>\n  </template>\n</dom-module><dom-module id="lumo-color-legacy">\n  <template>\n    <style include="lumo-color">\n      :host {\n        color: var(--lumo-body-text-color) !important;\n        background-color: var(--lumo-base-color) !important;\n      }\n    </style>\n  </template>\n</dom-module>',document.head.appendChild(n.content);const t=document.createElement("template");t.innerHTML="<custom-style>\n  <style>\n    html {\n      --lumo-size-xs: 1.625rem;\n      --lumo-size-s: 1.875rem;\n      --lumo-size-m: 2.25rem;\n      --lumo-size-l: 2.75rem;\n      --lumo-size-xl: 3.5rem;\n\n      /* Icons */\n      --lumo-icon-size-s: 1.25em;\n      --lumo-icon-size-m: 1.5em;\n      --lumo-icon-size-l: 2.25em;\n      /* For backwards compatibility */\n      --lumo-icon-size: var(--lumo-icon-size-m);\n    }\n  </style>\n</custom-style>",document.head.appendChild(t.content);const l=document.createElement("template");l.innerHTML="<custom-style>\n  <style>\n    html {\n      /* Square */\n      --lumo-space-xs: 0.25rem;\n      --lumo-space-s: 0.5rem;\n      --lumo-space-m: 1rem;\n      --lumo-space-l: 1.5rem;\n      --lumo-space-xl: 2.5rem;\n\n      /* Wide */\n      --lumo-space-wide-xs: calc(var(--lumo-space-xs) / 2) var(--lumo-space-xs);\n      --lumo-space-wide-s: calc(var(--lumo-space-s) / 2) var(--lumo-space-s);\n      --lumo-space-wide-m: calc(var(--lumo-space-m) / 2) var(--lumo-space-m);\n      --lumo-space-wide-l: calc(var(--lumo-space-l) / 2) var(--lumo-space-l);\n      --lumo-space-wide-xl: calc(var(--lumo-space-xl) / 2) var(--lumo-space-xl);\n\n      /* Tall */\n      --lumo-space-tall-xs: var(--lumo-space-xs) calc(var(--lumo-space-xs) / 2);\n      --lumo-space-tall-s: var(--lumo-space-s) calc(var(--lumo-space-s) / 2);\n      --lumo-space-tall-m: var(--lumo-space-m) calc(var(--lumo-space-m) / 2);\n      --lumo-space-tall-l: var(--lumo-space-l) calc(var(--lumo-space-l) / 2);\n      --lumo-space-tall-xl: var(--lumo-space-xl) calc(var(--lumo-space-xl) / 2);\n    }\n  </style>\n</custom-style>",document.head.appendChild(l.content);const e=document.createElement("template");e.innerHTML="<custom-style>\n  <style>\n    html {\n      /* Border radius */\n      --lumo-border-radius-s: 0.25em; /* Checkbox, badge, date-picker year indicator, etc */\n      --lumo-border-radius-m: var(--lumo-border-radius, 0.25em); /* Button, text field, menu overlay, etc */\n      --lumo-border-radius-l: 0.5em; /* Dialog, notification, etc */\n      --lumo-border-radius: 0.25em; /* Deprecated */\n\n      /* Shadow */\n      --lumo-box-shadow-xs: 0 1px 4px -1px var(--lumo-shade-50pct);\n      --lumo-box-shadow-s: 0 2px 4px -1px var(--lumo-shade-20pct), 0 3px 12px -1px var(--lumo-shade-30pct);\n      --lumo-box-shadow-m: 0 2px 6px -1px var(--lumo-shade-20pct), 0 8px 24px -4px var(--lumo-shade-40pct);\n      --lumo-box-shadow-l: 0 3px 18px -2px var(--lumo-shade-20pct), 0 12px 48px -6px var(--lumo-shade-40pct);\n      --lumo-box-shadow-xl: 0 4px 24px -3px var(--lumo-shade-20pct), 0 18px 64px -8px var(--lumo-shade-40pct);\n\n      /* Clickable element cursor */\n      --lumo-clickable-cursor: default;\n    }\n  </style>\n</custom-style>",document.head.appendChild(e.content);const a=document.createElement("template");a.innerHTML='<custom-style>\n  <style>\n    html {\n      /* Font families */\n      --lumo-font-family: -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";\n\n      /* Font sizes */\n      --lumo-font-size-xxs: .75rem;\n      --lumo-font-size-xs: .8125rem;\n      --lumo-font-size-s: .875rem;\n      --lumo-font-size-m: 1rem;\n      --lumo-font-size-l: 1.125rem;\n      --lumo-font-size-xl: 1.375rem;\n      --lumo-font-size-xxl: 1.75rem;\n      --lumo-font-size-xxxl: 2.5rem;\n\n      /* Line heights */\n      --lumo-line-height-xs: 1.25;\n      --lumo-line-height-s: 1.375;\n      --lumo-line-height-m: 1.625;\n    }\n\n  </style>\n</custom-style><dom-module id="lumo-typography">\n  <template>\n    <style>\n      html {\n        font-family: var(--lumo-font-family);\n        font-size: var(--lumo-font-size, var(--lumo-font-size-m));\n        line-height: var(--lumo-line-height-m);\n        -webkit-text-size-adjust: 100%;\n        -webkit-font-smoothing: antialiased;\n        -moz-osx-font-smoothing: grayscale;\n      }\n\n      /* Can’t combine with the above selector because that doesn’t work in browsers without native shadow dom */\n      :host {\n        font-family: var(--lumo-font-family);\n        font-size: var(--lumo-font-size, var(--lumo-font-size-m));\n        line-height: var(--lumo-line-height-m);\n        -webkit-text-size-adjust: 100%;\n        -webkit-font-smoothing: antialiased;\n        -moz-osx-font-smoothing: grayscale;\n      }\n\n      small,\n      [theme~="font-size-s"] {\n        font-size: var(--lumo-font-size-s);\n        line-height: var(--lumo-line-height-s);\n      }\n\n      [theme~="font-size-xs"] {\n        font-size: var(--lumo-font-size-xs);\n        line-height: var(--lumo-line-height-xs);\n      }\n\n      h1,\n      h2,\n      h3,\n      h4,\n      h5,\n      h6 {\n        font-weight: 600;\n        line-height: var(--lumo-line-height-xs);\n        margin-top: 1.25em;\n      }\n\n      h1 {\n        font-size: var(--lumo-font-size-xxxl);\n        margin-bottom: 0.75em;\n      }\n\n      h2 {\n        font-size: var(--lumo-font-size-xxl);\n        margin-bottom: 0.5em;\n      }\n\n      h3 {\n        font-size: var(--lumo-font-size-xl);\n        margin-bottom: 0.5em;\n      }\n\n      h4 {\n        font-size: var(--lumo-font-size-l);\n        margin-bottom: 0.5em;\n      }\n\n      h5 {\n        font-size: var(--lumo-font-size-m);\n        margin-bottom: 0.25em;\n      }\n\n      h6 {\n        font-size: var(--lumo-font-size-xs);\n        margin-bottom: 0;\n        text-transform: uppercase;\n        letter-spacing: 0.03em;\n      }\n\n      p,\n      blockquote {\n        margin-top: 0.5em;\n        margin-bottom: 0.75em;\n      }\n\n      a {\n        text-decoration: none;\n      }\n\n      a:hover {\n        text-decoration: underline;\n      }\n\n      hr {\n        display: block;\n        align-self: stretch;\n        height: 1px;\n        border: 0;\n        padding: 0;\n        margin: var(--lumo-space-s) calc(var(--lumo-border-radius-m) / 2);\n        background-color: var(--lumo-contrast-10pct);\n      }\n\n      blockquote {\n        border-left: 2px solid var(--lumo-contrast-30pct);\n      }\n\n      b,\n      strong {\n        font-weight: 600;\n      }\n\n      /* RTL specific styles */\n\n      blockquote[dir="rtl"] {\n        border-left: none;\n        border-right: 2px solid var(--lumo-contrast-30pct);\n      }\n\n    </style>\n  </template>\n</dom-module>',document.head.appendChild(a.content);
+import"./shared-21e68b72.js";import"./shared-11351c00.js";class o extends HTMLElement{static get version(){return"1.6.1"}}customElements.define("vaadin-lumo-styles",o);const n=document.createElement("template");n.innerHTML='<custom-style>\n  <style>\n    html {\n      /* Base (background) */\n      --lumo-base-color: #FFF;\n\n      /* Tint */\n      --lumo-tint-5pct: hsla(0, 0%, 100%, 0.3);\n      --lumo-tint-10pct: hsla(0, 0%, 100%, 0.37);\n      --lumo-tint-20pct: hsla(0, 0%, 100%, 0.44);\n      --lumo-tint-30pct: hsla(0, 0%, 100%, 0.5);\n      --lumo-tint-40pct: hsla(0, 0%, 100%, 0.57);\n      --lumo-tint-50pct: hsla(0, 0%, 100%, 0.64);\n      --lumo-tint-60pct: hsla(0, 0%, 100%, 0.7);\n      --lumo-tint-70pct: hsla(0, 0%, 100%, 0.77);\n      --lumo-tint-80pct: hsla(0, 0%, 100%, 0.84);\n      --lumo-tint-90pct: hsla(0, 0%, 100%, 0.9);\n      --lumo-tint: #FFF;\n\n      /* Shade */\n      --lumo-shade-5pct: hsla(214, 61%, 25%, 0.05);\n      --lumo-shade-10pct: hsla(214, 57%, 24%, 0.1);\n      --lumo-shade-20pct: hsla(214, 53%, 23%, 0.16);\n      --lumo-shade-30pct: hsla(214, 50%, 22%, 0.26);\n      --lumo-shade-40pct: hsla(214, 47%, 21%, 0.38);\n      --lumo-shade-50pct: hsla(214, 45%, 20%, 0.5);\n      --lumo-shade-60pct: hsla(214, 43%, 19%, 0.61);\n      --lumo-shade-70pct: hsla(214, 42%, 18%, 0.72);\n      --lumo-shade-80pct: hsla(214, 41%, 17%, 0.83);\n      --lumo-shade-90pct: hsla(214, 40%, 16%, 0.94);\n      --lumo-shade: hsl(214, 35%, 15%);\n\n      /* Contrast */\n      --lumo-contrast-5pct: var(--lumo-shade-5pct);\n      --lumo-contrast-10pct: var(--lumo-shade-10pct);\n      --lumo-contrast-20pct: var(--lumo-shade-20pct);\n      --lumo-contrast-30pct: var(--lumo-shade-30pct);\n      --lumo-contrast-40pct: var(--lumo-shade-40pct);\n      --lumo-contrast-50pct: var(--lumo-shade-50pct);\n      --lumo-contrast-60pct: var(--lumo-shade-60pct);\n      --lumo-contrast-70pct: var(--lumo-shade-70pct);\n      --lumo-contrast-80pct: var(--lumo-shade-80pct);\n      --lumo-contrast-90pct: var(--lumo-shade-90pct);\n      --lumo-contrast: var(--lumo-shade);\n\n      /* Text */\n      --lumo-header-text-color: var(--lumo-contrast);\n      --lumo-body-text-color: var(--lumo-contrast-90pct);\n      --lumo-secondary-text-color: var(--lumo-contrast-70pct);\n      --lumo-tertiary-text-color: var(--lumo-contrast-50pct);\n      --lumo-disabled-text-color: var(--lumo-contrast-30pct);\n\n      /* Primary */\n      --lumo-primary-color: hsl(214, 90%, 52%);\n      --lumo-primary-color-50pct: hsla(214, 90%, 52%, 0.5);\n      --lumo-primary-color-10pct: hsla(214, 90%, 52%, 0.1);\n      --lumo-primary-text-color: var(--lumo-primary-color);\n      --lumo-primary-contrast-color: #FFF;\n\n      /* Error */\n      --lumo-error-color: hsl(3, 100%, 61%);\n      --lumo-error-color-50pct: hsla(3, 100%, 60%, 0.5);\n      --lumo-error-color-10pct: hsla(3, 100%, 60%, 0.1);\n      --lumo-error-text-color: hsl(3, 92%, 53%);\n      --lumo-error-contrast-color: #FFF;\n\n      /* Success */\n      --lumo-success-color: hsl(145, 80%, 42%); /* hsl(144,82%,37%); */\n      --lumo-success-color-50pct: hsla(145, 76%, 44%, 0.55);\n      --lumo-success-color-10pct: hsla(145, 76%, 44%, 0.12);\n      --lumo-success-text-color: hsl(145, 100%, 32%);\n      --lumo-success-contrast-color: #FFF;\n    }\n  </style>\n</custom-style><dom-module id="lumo-color">\n  <template>\n    <style>\n      [theme~="dark"] {\n        /* Base (background) */\n        --lumo-base-color: hsl(214, 35%, 21%);\n\n        /* Tint */\n        --lumo-tint-5pct: hsla(214, 65%, 85%, 0.06);\n        --lumo-tint-10pct: hsla(214, 60%, 80%, 0.14);\n        --lumo-tint-20pct: hsla(214, 64%, 82%, 0.23);\n        --lumo-tint-30pct: hsla(214, 69%, 84%, 0.32);\n        --lumo-tint-40pct: hsla(214, 73%, 86%, 0.41);\n        --lumo-tint-50pct: hsla(214, 78%, 88%, 0.5);\n        --lumo-tint-60pct: hsla(214, 82%, 90%, 0.6);\n        --lumo-tint-70pct: hsla(214, 87%, 92%, 0.7);\n        --lumo-tint-80pct: hsla(214, 91%, 94%, 0.8);\n        --lumo-tint-90pct: hsla(214, 96%, 96%, 0.9);\n        --lumo-tint: hsl(214, 100%, 98%);\n\n        /* Shade */\n        --lumo-shade-5pct: hsla(214, 0%, 0%, 0.07);\n        --lumo-shade-10pct: hsla(214, 4%, 2%, 0.15);\n        --lumo-shade-20pct: hsla(214, 8%, 4%, 0.23);\n        --lumo-shade-30pct: hsla(214, 12%, 6%, 0.32);\n        --lumo-shade-40pct: hsla(214, 16%, 8%, 0.41);\n        --lumo-shade-50pct: hsla(214, 20%, 10%, 0.5);\n        --lumo-shade-60pct: hsla(214, 24%, 12%, 0.6);\n        --lumo-shade-70pct: hsla(214, 28%, 13%, 0.7);\n        --lumo-shade-80pct: hsla(214, 32%, 13%, 0.8);\n        --lumo-shade-90pct: hsla(214, 33%, 13%, 0.9);\n        --lumo-shade: hsl(214, 33%, 13%);\n\n        /* Contrast */\n        --lumo-contrast-5pct: var(--lumo-tint-5pct);\n        --lumo-contrast-10pct: var(--lumo-tint-10pct);\n        --lumo-contrast-20pct: var(--lumo-tint-20pct);\n        --lumo-contrast-30pct: var(--lumo-tint-30pct);\n        --lumo-contrast-40pct: var(--lumo-tint-40pct);\n        --lumo-contrast-50pct: var(--lumo-tint-50pct);\n        --lumo-contrast-60pct: var(--lumo-tint-60pct);\n        --lumo-contrast-70pct: var(--lumo-tint-70pct);\n        --lumo-contrast-80pct: var(--lumo-tint-80pct);\n        --lumo-contrast-90pct: var(--lumo-tint-90pct);\n        --lumo-contrast: var(--lumo-tint);\n\n        /* Text */\n        --lumo-header-text-color: var(--lumo-contrast);\n        --lumo-body-text-color: var(--lumo-contrast-90pct);\n        --lumo-secondary-text-color: var(--lumo-contrast-70pct);\n        --lumo-tertiary-text-color: var(--lumo-contrast-50pct);\n        --lumo-disabled-text-color: var(--lumo-contrast-30pct);\n\n        /* Primary */\n        --lumo-primary-color: hsl(214, 86%, 55%);\n        --lumo-primary-color-50pct: hsla(214, 86%, 55%, 0.5);\n        --lumo-primary-color-10pct: hsla(214, 90%, 63%, 0.1);\n        --lumo-primary-text-color: hsl(214, 100%, 70%);\n        --lumo-primary-contrast-color: #FFF;\n\n        /* Error */\n        --lumo-error-color: hsl(3, 90%, 63%);\n        --lumo-error-color-50pct: hsla(3, 90%, 63%, 0.5);\n        --lumo-error-color-10pct: hsla(3, 90%, 63%, 0.1);\n        --lumo-error-text-color: hsl(3, 100%, 67%);\n\n        /* Success */\n        --lumo-success-color: hsl(145, 65%, 42%);\n        --lumo-success-color-50pct: hsla(145, 65%, 42%, 0.5);\n        --lumo-success-color-10pct: hsla(145, 65%, 42%, 0.1);\n        --lumo-success-text-color: hsl(145, 85%, 47%);\n      }\n\n      html {\n        color: var(--lumo-body-text-color);\n        background-color: var(--lumo-base-color);\n      }\n\n      [theme~="dark"] {\n        color: var(--lumo-body-text-color);\n        background-color: var(--lumo-base-color);\n      }\n\n      h1,\n      h2,\n      h3,\n      h4,\n      h5,\n      h6 {\n        color: var(--lumo-header-text-color);\n      }\n\n      a {\n        color: var(--lumo-primary-text-color);\n      }\n\n      blockquote {\n        color: var(--lumo-secondary-text-color);\n      }\n\n      code,\n      pre {\n        background-color: var(--lumo-contrast-10pct);\n        border-radius: var(--lumo-border-radius-m);\n      }\n    </style>\n  </template>\n</dom-module><dom-module id="lumo-color-legacy">\n  <template>\n    <style include="lumo-color">\n      :host {\n        color: var(--lumo-body-text-color) !important;\n        background-color: var(--lumo-base-color) !important;\n      }\n    </style>\n  </template>\n</dom-module>',document.head.appendChild(n.content);const t=document.createElement("template");t.innerHTML="<custom-style>\n  <style>\n    html {\n      --lumo-size-xs: 1.625rem;\n      --lumo-size-s: 1.875rem;\n      --lumo-size-m: 2.25rem;\n      --lumo-size-l: 2.75rem;\n      --lumo-size-xl: 3.5rem;\n\n      /* Icons */\n      --lumo-icon-size-s: 1.25em;\n      --lumo-icon-size-m: 1.5em;\n      --lumo-icon-size-l: 2.25em;\n      /* For backwards compatibility */\n      --lumo-icon-size: var(--lumo-icon-size-m);\n    }\n  </style>\n</custom-style>",document.head.appendChild(t.content);const l=document.createElement("template");l.innerHTML="<custom-style>\n  <style>\n    html {\n      /* Square */\n      --lumo-space-xs: 0.25rem;\n      --lumo-space-s: 0.5rem;\n      --lumo-space-m: 1rem;\n      --lumo-space-l: 1.5rem;\n      --lumo-space-xl: 2.5rem;\n\n      /* Wide */\n      --lumo-space-wide-xs: calc(var(--lumo-space-xs) / 2) var(--lumo-space-xs);\n      --lumo-space-wide-s: calc(var(--lumo-space-s) / 2) var(--lumo-space-s);\n      --lumo-space-wide-m: calc(var(--lumo-space-m) / 2) var(--lumo-space-m);\n      --lumo-space-wide-l: calc(var(--lumo-space-l) / 2) var(--lumo-space-l);\n      --lumo-space-wide-xl: calc(var(--lumo-space-xl) / 2) var(--lumo-space-xl);\n\n      /* Tall */\n      --lumo-space-tall-xs: var(--lumo-space-xs) calc(var(--lumo-space-xs) / 2);\n      --lumo-space-tall-s: var(--lumo-space-s) calc(var(--lumo-space-s) / 2);\n      --lumo-space-tall-m: var(--lumo-space-m) calc(var(--lumo-space-m) / 2);\n      --lumo-space-tall-l: var(--lumo-space-l) calc(var(--lumo-space-l) / 2);\n      --lumo-space-tall-xl: var(--lumo-space-xl) calc(var(--lumo-space-xl) / 2);\n    }\n  </style>\n</custom-style>",document.head.appendChild(l.content);const e=document.createElement("template");e.innerHTML="<custom-style>\n  <style>\n    html {\n      /* Border radius */\n      --lumo-border-radius-s: 0.25em; /* Checkbox, badge, date-picker year indicator, etc */\n      --lumo-border-radius-m: var(--lumo-border-radius, 0.25em); /* Button, text field, menu overlay, etc */\n      --lumo-border-radius-l: 0.5em; /* Dialog, notification, etc */\n      --lumo-border-radius: 0.25em; /* Deprecated */\n\n      /* Shadow */\n      --lumo-box-shadow-xs: 0 1px 4px -1px var(--lumo-shade-50pct);\n      --lumo-box-shadow-s: 0 2px 4px -1px var(--lumo-shade-20pct), 0 3px 12px -1px var(--lumo-shade-30pct);\n      --lumo-box-shadow-m: 0 2px 6px -1px var(--lumo-shade-20pct), 0 8px 24px -4px var(--lumo-shade-40pct);\n      --lumo-box-shadow-l: 0 3px 18px -2px var(--lumo-shade-20pct), 0 12px 48px -6px var(--lumo-shade-40pct);\n      --lumo-box-shadow-xl: 0 4px 24px -3px var(--lumo-shade-20pct), 0 18px 64px -8px var(--lumo-shade-40pct);\n\n      /* Clickable element cursor */\n      --lumo-clickable-cursor: default;\n    }\n  </style>\n</custom-style>",document.head.appendChild(e.content);const a=document.createElement("template");a.innerHTML='<custom-style>\n  <style>\n    html {\n      /* Font families */\n      --lumo-font-family: -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";\n\n      /* Font sizes */\n      --lumo-font-size-xxs: .75rem;\n      --lumo-font-size-xs: .8125rem;\n      --lumo-font-size-s: .875rem;\n      --lumo-font-size-m: 1rem;\n      --lumo-font-size-l: 1.125rem;\n      --lumo-font-size-xl: 1.375rem;\n      --lumo-font-size-xxl: 1.75rem;\n      --lumo-font-size-xxxl: 2.5rem;\n\n      /* Line heights */\n      --lumo-line-height-xs: 1.25;\n      --lumo-line-height-s: 1.375;\n      --lumo-line-height-m: 1.625;\n    }\n\n  </style>\n</custom-style><dom-module id="lumo-typography">\n  <template>\n    <style>\n      html {\n        font-family: var(--lumo-font-family);\n        font-size: var(--lumo-font-size, var(--lumo-font-size-m));\n        line-height: var(--lumo-line-height-m);\n        -webkit-text-size-adjust: 100%;\n        -webkit-font-smoothing: antialiased;\n        -moz-osx-font-smoothing: grayscale;\n      }\n\n      /* Can’t combine with the above selector because that doesn’t work in browsers without native shadow dom */\n      :host {\n        font-family: var(--lumo-font-family);\n        font-size: var(--lumo-font-size, var(--lumo-font-size-m));\n        line-height: var(--lumo-line-height-m);\n        -webkit-text-size-adjust: 100%;\n        -webkit-font-smoothing: antialiased;\n        -moz-osx-font-smoothing: grayscale;\n      }\n\n      small,\n      [theme~="font-size-s"] {\n        font-size: var(--lumo-font-size-s);\n        line-height: var(--lumo-line-height-s);\n      }\n\n      [theme~="font-size-xs"] {\n        font-size: var(--lumo-font-size-xs);\n        line-height: var(--lumo-line-height-xs);\n      }\n\n      h1,\n      h2,\n      h3,\n      h4,\n      h5,\n      h6 {\n        font-weight: 600;\n        line-height: var(--lumo-line-height-xs);\n        margin-top: 1.25em;\n      }\n\n      h1 {\n        font-size: var(--lumo-font-size-xxxl);\n        margin-bottom: 0.75em;\n      }\n\n      h2 {\n        font-size: var(--lumo-font-size-xxl);\n        margin-bottom: 0.5em;\n      }\n\n      h3 {\n        font-size: var(--lumo-font-size-xl);\n        margin-bottom: 0.5em;\n      }\n\n      h4 {\n        font-size: var(--lumo-font-size-l);\n        margin-bottom: 0.5em;\n      }\n\n      h5 {\n        font-size: var(--lumo-font-size-m);\n        margin-bottom: 0.25em;\n      }\n\n      h6 {\n        font-size: var(--lumo-font-size-xs);\n        margin-bottom: 0;\n        text-transform: uppercase;\n        letter-spacing: 0.03em;\n      }\n\n      p,\n      blockquote {\n        margin-top: 0.5em;\n        margin-bottom: 0.75em;\n      }\n\n      a {\n        text-decoration: none;\n      }\n\n      a:hover {\n        text-decoration: underline;\n      }\n\n      hr {\n        display: block;\n        align-self: stretch;\n        height: 1px;\n        border: 0;\n        padding: 0;\n        margin: var(--lumo-space-s) calc(var(--lumo-border-radius-m) / 2);\n        background-color: var(--lumo-contrast-10pct);\n      }\n\n      blockquote {\n        border-left: 2px solid var(--lumo-contrast-30pct);\n      }\n\n      b,\n      strong {\n        font-weight: 600;\n      }\n\n      /* RTL specific styles */\n\n      blockquote[dir="rtl"] {\n        border-left: none;\n        border-right: 2px solid var(--lumo-contrast-30pct);\n      }\n\n    </style>\n  </template>\n</dom-module>',document.head.appendChild(a.content);

package/dist/elements/public/AdminSubscriptionForm/internal/InternalAdminSubscriptionFormLinkControl/InternalAdminSubscriptionFormLinkControl.js

@@ -29,20 +29,12 @@ export class InternalAdminSubscriptionFormLinkControl extends ResponsiveMixin(In
             href = undefined;
         }
         return html `
-      <div class="leading-xs flex items-center gap-s">
-        <a
-          target="_blank"
-          class="truncate min-w-0 font-medium rounded cursor-pointer text-primary hover-underline focus-outline-none focus-ring-2 focus-ring-primary-50"
-          href=${href}
-        >
-          <foxy-i18n infer="" key="label"></foxy-i18n>
-        </a>
-
-        <span> &bull; </span>
-
+      <div class="leading-xs flex items-center gap-xs">
+        <foxy-i18n class="truncate min-w-0" infer="" key="label"></foxy-i18n>
+        <span class="text-tertiary"> &bull; </span>
         <foxy-copy-to-clipboard
-          layout="text"
-          theme="tertiary-inline contrast"
+          layout="complete"
+          theme="tertiary-inline"
           infer="copy-to-clipboard"
           text=${href}
         >

package/dist/elements/public/AdminSubscriptionForm/internal/InternalAdminSubscriptionFormLinkControl/InternalAdminSubscriptionFormLinkControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"InternalAdminSubscriptionFormLinkControl.js","sourceRoot":"","sources":["../../../../../../src/elements/public/AdminSubscriptionForm/internal/InternalAdminSubscriptionFormLinkControl/InternalAdminSubscriptionFormLinkControl.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,eAAe,EAAE,4CAAyC;AACnE,OAAO,EAAE,eAAe,EAAE,gEAA6D;AACvF,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC,MAAM,OAAO,wCAAyC,SAAQ,eAAe,CAAC,eAAe,CAAC;IAA9F;;QAQE,WAAM,GAAkB,IAAI,CAAC;IA6C/B,CAAC;IApDC,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,GAAG,KAAK,CAAC,UAAU;YACnB,MAAM,EAAE,EAAE;SACX,CAAC;IACJ,CAAC;IAID,aAAa;;QACX,MAAM,IAAI,GAAG,IAAI,CAAC,OAAuC,CAAC;QAC1D,IAAI,IAAwB,CAAC;QAE7B,IAAI;YACF,MAAM,GAAG,GAAG,IAAI,GAAG,aAAC,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,IAAI,0CAAE,MAAM,CAAC,kBAAkB,EAAE,IAAI,mCAAI,EAAE,CAAC,CAAC;YAEvE,IAAI,IAAI,CAAC,MAAM,EAAE;gBACf,MAAM,cAAc,GAAG,IAAI,eAAe,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;gBACvD,GAAG,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC;gBACzB,cAAc,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,YAAY,CAAC,GAAG,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC,CAAC;aAC1E;YAED,IAAI,GAAG,GAAG,CAAC,QAAQ,EAAE,CAAC;SACvB;QAAC,WAAM;YACN,IAAI,GAAG,SAAS,CAAC;SAClB;QAED,OAAO,IAAI,CAAA;;;;;iBAKE,IAAI;;;;;;;;;;;iBAWJ,IAAI;;;;;;;KAOhB,CAAC;IACJ,CAAC;CACF","sourcesContent":["import type { AdminSubscriptionForm } from '../../AdminSubscriptionForm';\nimport type { PropertyDeclarations } from 'lit-element';\nimport type { TemplateResult } from 'lit-html';\n\nimport { ResponsiveMixin } from '../../../../../mixins/responsive';\nimport { InternalControl } from '../../../../internal/InternalControl/InternalControl';\nimport { html } from 'lit-html';\n\nexport class InternalAdminSubscriptionFormLinkControl extends ResponsiveMixin(InternalControl) {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      search: {},\n    };\n  }\n\n  search: string | null = null;\n\n  renderControl(): TemplateResult {\n    const form = this.nucleon as AdminSubscriptionForm | null;\n    let href: string | undefined;\n\n    try {\n      const url = new URL(form?.data?._links['fx:sub_token_url'].href ?? '');\n\n      if (this.search) {\n        const originalParams = new URLSearchParams(url.search);\n        url.search = this.search;\n        originalParams.forEach((value, key) => url.searchParams.set(key, value));\n      }\n\n      href = url.toString();\n    } catch {\n      href = undefined;\n    }\n\n    return html`\n      <div class=\"leading-xs flex items-center gap-s\">\n        <a\n          target=\"_blank\"\n          class=\"truncate min-w-0 font-medium rounded cursor-pointer text-primary hover-underline focus-outline-none focus-ring-2 focus-ring-primary-50\"\n          href=${href}\n        >\n          <foxy-i18n infer=\"\" key=\"label\"></foxy-i18n>\n        </a>\n\n        <span> &bull; </span>\n\n        <foxy-copy-to-clipboard\n          layout=\"text\"\n          theme=\"tertiary-inline contrast\"\n          infer=\"copy-to-clipboard\"\n          text=${href}\n        >\n        </foxy-copy-to-clipboard>\n      </div>\n\n      <foxy-i18n class=\"leading-xs block text-xs text-secondary\" infer=\"\" key=\"helper_text\">\n      </foxy-i18n>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"InternalAdminSubscriptionFormLinkControl.js","sourceRoot":"","sources":["../../../../../../src/elements/public/AdminSubscriptionForm/internal/InternalAdminSubscriptionFormLinkControl/InternalAdminSubscriptionFormLinkControl.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,eAAe,EAAE,4CAAyC;AACnE,OAAO,EAAE,eAAe,EAAE,gEAA6D;AACvF,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC,MAAM,OAAO,wCAAyC,SAAQ,eAAe,CAAC,eAAe,CAAC;IAA9F;;QAQE,WAAM,GAAkB,IAAI,CAAC;IAqC/B,CAAC;IA5CC,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,GAAG,KAAK,CAAC,UAAU;YACnB,MAAM,EAAE,EAAE;SACX,CAAC;IACJ,CAAC;IAID,aAAa;;QACX,MAAM,IAAI,GAAG,IAAI,CAAC,OAAuC,CAAC;QAC1D,IAAI,IAAwB,CAAC;QAE7B,IAAI;YACF,MAAM,GAAG,GAAG,IAAI,GAAG,aAAC,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,IAAI,0CAAE,MAAM,CAAC,kBAAkB,EAAE,IAAI,mCAAI,EAAE,CAAC,CAAC;YAEvE,IAAI,IAAI,CAAC,MAAM,EAAE;gBACf,MAAM,cAAc,GAAG,IAAI,eAAe,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;gBACvD,GAAG,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC;gBACzB,cAAc,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,YAAY,CAAC,GAAG,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC,CAAC;aAC1E;YAED,IAAI,GAAG,GAAG,CAAC,QAAQ,EAAE,CAAC;SACvB;QAAC,WAAM;YACN,IAAI,GAAG,SAAS,CAAC;SAClB;QAED,OAAO,IAAI,CAAA;;;;;;;;iBAQE,IAAI;;;;;;;KAOhB,CAAC;IACJ,CAAC;CACF","sourcesContent":["import type { AdminSubscriptionForm } from '../../AdminSubscriptionForm';\nimport type { PropertyDeclarations } from 'lit-element';\nimport type { TemplateResult } from 'lit-html';\n\nimport { ResponsiveMixin } from '../../../../../mixins/responsive';\nimport { InternalControl } from '../../../../internal/InternalControl/InternalControl';\nimport { html } from 'lit-html';\n\nexport class InternalAdminSubscriptionFormLinkControl extends ResponsiveMixin(InternalControl) {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      search: {},\n    };\n  }\n\n  search: string | null = null;\n\n  renderControl(): TemplateResult {\n    const form = this.nucleon as AdminSubscriptionForm | null;\n    let href: string | undefined;\n\n    try {\n      const url = new URL(form?.data?._links['fx:sub_token_url'].href ?? '');\n\n      if (this.search) {\n        const originalParams = new URLSearchParams(url.search);\n        url.search = this.search;\n        originalParams.forEach((value, key) => url.searchParams.set(key, value));\n      }\n\n      href = url.toString();\n    } catch {\n      href = undefined;\n    }\n\n    return html`\n      <div class=\"leading-xs flex items-center gap-xs\">\n        <foxy-i18n class=\"truncate min-w-0\" infer=\"\" key=\"label\"></foxy-i18n>\n        <span class=\"text-tertiary\"> &bull; </span>\n        <foxy-copy-to-clipboard\n          layout=\"complete\"\n          theme=\"tertiary-inline\"\n          infer=\"copy-to-clipboard\"\n          text=${href}\n        >\n        </foxy-copy-to-clipboard>\n      </div>\n\n      <foxy-i18n class=\"leading-xs block text-xs text-secondary\" infer=\"\" key=\"helper_text\">\n      </foxy-i18n>\n    `;\n  }\n}\n"]}

package/dist/elements/public/CopyToClipboard/CopyToClipboard.d.ts

@@ -16,7 +16,7 @@ export declare class CopyToClipboard extends Base {
     static get properties(): PropertyDeclarations;
     static get styles(): CSSResult;
     /** Icon or text UI. Icon UI by default. */
-    layout: 'text' | 'icon' | null;
+    layout: 'complete' | 'text' | 'icon' | null;
     /** VaadinButton theme for text layout. */
     theme: string | null;
     /** Default icon. */

package/dist/elements/public/CopyToClipboard/CopyToClipboard.js

@@ -90,8 +90,8 @@ iron-icon{
     `;
     }
     render() {
-        var _a, _b;
-        const layout = this.layout === 'text' ? 'text' : 'icon';
+        var _a, _b, _c;
+        const layout = (_a = this.layout) !== null && _a !== void 0 ? _a : 'icon';
         let label = '';
         let icon = '';
         if (this.__state === 'busy') {
@@ -108,7 +108,7 @@ iron-icon{
         }
         else {
             label = 'click_to_copy';
-            icon = (_a = this.icon) !== null && _a !== void 0 ? _a : 'icons:content-copy';
+            icon = (_b = this.icon) !== null && _b !== void 0 ? _b : 'icons:content-copy';
         }
         return html `
       ${layout === 'icon'
@@ -134,11 +134,20 @@ iron-icon{
           `
             : html `
             <vaadin-button
-              theme=${ifDefined((_b = this.theme) !== null && _b !== void 0 ? _b : void 0)}
+              theme=${ifDefined((_c = this.theme) !== null && _c !== void 0 ? _c : void 0)}
               ?disabled=${this.disabled}
               @click=${this.__copy}
             >
               <foxy-i18n infer="" key=${label}></foxy-i18n>
+              ${layout === 'complete'
+                ? html `
+                    <iron-icon
+                      style="--lumo-icon-size-m: 1em; transform: translateY(-0.1em)"
+                      icon=${icon}
+                    >
+                    </iron-icon>
+                  `
+                : ''}
             </vaadin-button>
           `}
     `;

package/dist/elements/public/CopyToClipboard/CopyToClipboard.js.map

@@ -1 +1 @@
-{"version":3,"file":"CopyToClipboard.js","sourceRoot":"","sources":["../../../../src/elements/public/CopyToClipboard/CopyToClipboard.ts"],"names":[],"mappings":"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","sourcesContent":["import type { CSSResult, PropertyDeclarations, TemplateResult } from 'lit-element';\n\nimport { LitElement, css, html } from 'lit-element';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { InferrableMixin } from '../../../mixins/inferrable';\nimport { ifDefined } from 'lit-html/directives/if-defined';\n\nconst NS = 'copy-to-clipboard';\nconst Base = ConfigurableMixin(TranslatableMixin(InferrableMixin(LitElement), NS));\n\n/**\n * A simple \"click to copy\" button that takes the size of the font\n * your text is written in (considering that the font styles are applied to container).\n *\n * @element foxy-copy-to-clipboard\n * @since 1.17.0\n */\nexport class CopyToClipboard extends Base {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      layout: {},\n      theme: {},\n      text: { type: String },\n      icon: { type: String },\n      __state: { attribute: false },\n    };\n  }\n\n  static get styles(): CSSResult {\n    return css`\n      .icon-button {\n        position: relative;\n        appearance: none;\n        background: none;\n        border: none;\n        border-radius: var(--lumo-border-radius-s);\n        color: inherit;\n        font-size: inherit;\n        padding: 0;\n        width: 1.5em;\n        height: 1.5em;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n      }\n\n      .icon-button::before {\n        position: absolute;\n        inset: 0;\n        content: ' ';\n        display: block;\n        background: currentColor;\n        opacity: 0.08;\n        transition: opacity 0.15s ease;\n        border-radius: var(--lumo-border-radius-s);\n      }\n\n      .icon-button:focus {\n        outline: none;\n        box-shadow: 0 0 0 2px currentColor;\n      }\n\n      .icon-button:disabled {\n        opacity: 0.5;\n        cursor: default;\n      }\n\n      @media (hover: hover) {\n        .icon-button:not(:disabled):hover {\n          cursor: pointer;\n        }\n\n        .icon-button:not(:disabled):hover::before {\n          opacity: 0.16;\n        }\n      }\n\n      iron-icon {\n        --iron-icon-height: 1em;\n        --iron-icon-width: 1em;\n      }\n    `;\n  }\n\n  /** Icon or text UI. Icon UI by default. */\n  layout: 'text' | 'icon' | null = null;\n\n  /** VaadinButton theme for text layout. */\n  theme: string | null = null;\n\n  /** Default icon. */\n  icon: string | null = null;\n\n  /** Text to copy. */\n  text: string | null = null;\n\n  private __state: 'idle' | 'busy' | 'fail' | 'done' = 'idle';\n\n  render(): TemplateResult {\n    const layout = this.layout === 'text' ? 'text' : 'icon';\n    let label = '';\n    let icon = '';\n\n    if (this.__state === 'busy') {\n      label = 'copying';\n      icon = 'icons:hourglass-empty';\n    } else if (this.__state === 'fail') {\n      label = 'failed_to_copy';\n      icon = 'icons:error-outline';\n    } else if (this.__state === 'done') {\n      label = 'done';\n      icon = 'icons:done';\n    } else {\n      label = 'click_to_copy';\n      icon = this.icon ?? 'icons:content-copy';\n    }\n\n    return html`\n      ${layout === 'icon'\n        ? html`\n            <button\n              id=\"trigger\"\n              class=\"icon-button\"\n              ?disabled=${this.disabled}\n              @click=${this.__copy}\n            >\n              <iron-icon icon=${icon}></iron-icon>\n            </button>\n            <vcf-tooltip\n              position=\"bottom\"\n              style=\"--lumo-base-color: black\"\n              theme=\"light\"\n              for=\"trigger\"\n            >\n              <span class=\"text-s\" style=\"color: white\">\n                <foxy-i18n infer=\"\" key=${label}></foxy-i18n>\n              </span>\n            </vcf-tooltip>\n          `\n        : html`\n            <vaadin-button\n              theme=${ifDefined(this.theme ?? void 0)}\n              ?disabled=${this.disabled}\n              @click=${this.__copy}\n            >\n              <foxy-i18n infer=\"\" key=${label}></foxy-i18n>\n            </vaadin-button>\n          `}\n    `;\n  }\n\n  private __copy() {\n    if (this.__state === 'idle') {\n      this.__state = 'busy';\n\n      navigator.clipboard\n        .writeText(this.text ?? '')\n        .then(() => (this.__state = 'done'))\n        .catch(() => (this.__state = 'fail'))\n        .then(() => setTimeout(() => (this.__state = 'idle'), 2000));\n    }\n  }\n}\n"]}
+{"version":3,"file":"CopyToClipboard.js","sourceRoot":"","sources":["../../../../src/elements/public/CopyToClipboard/CopyToClipboard.ts"],"names":[],"mappings":"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","sourcesContent":["import type { CSSResult, PropertyDeclarations, TemplateResult } from 'lit-element';\n\nimport { LitElement, css, html } from 'lit-element';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { InferrableMixin } from '../../../mixins/inferrable';\nimport { ifDefined } from 'lit-html/directives/if-defined';\n\nconst NS = 'copy-to-clipboard';\nconst Base = ConfigurableMixin(TranslatableMixin(InferrableMixin(LitElement), NS));\n\n/**\n * A simple \"click to copy\" button that takes the size of the font\n * your text is written in (considering that the font styles are applied to container).\n *\n * @element foxy-copy-to-clipboard\n * @since 1.17.0\n */\nexport class CopyToClipboard extends Base {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      layout: {},\n      theme: {},\n      text: { type: String },\n      icon: { type: String },\n      __state: { attribute: false },\n    };\n  }\n\n  static get styles(): CSSResult {\n    return css`\n      .icon-button {\n        position: relative;\n        appearance: none;\n        background: none;\n        border: none;\n        border-radius: var(--lumo-border-radius-s);\n        color: inherit;\n        font-size: inherit;\n        padding: 0;\n        width: 1.5em;\n        height: 1.5em;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n      }\n\n      .icon-button::before {\n        position: absolute;\n        inset: 0;\n        content: ' ';\n        display: block;\n        background: currentColor;\n        opacity: 0.08;\n        transition: opacity 0.15s ease;\n        border-radius: var(--lumo-border-radius-s);\n      }\n\n      .icon-button:focus {\n        outline: none;\n        box-shadow: 0 0 0 2px currentColor;\n      }\n\n      .icon-button:disabled {\n        opacity: 0.5;\n        cursor: default;\n      }\n\n      @media (hover: hover) {\n        .icon-button:not(:disabled):hover {\n          cursor: pointer;\n        }\n\n        .icon-button:not(:disabled):hover::before {\n          opacity: 0.16;\n        }\n      }\n\n      iron-icon {\n        --iron-icon-height: 1em;\n        --iron-icon-width: 1em;\n      }\n    `;\n  }\n\n  /** Icon or text UI. Icon UI by default. */\n  layout: 'complete' | 'text' | 'icon' | null = null;\n\n  /** VaadinButton theme for text layout. */\n  theme: string | null = null;\n\n  /** Default icon. */\n  icon: string | null = null;\n\n  /** Text to copy. */\n  text: string | null = null;\n\n  private __state: 'idle' | 'busy' | 'fail' | 'done' = 'idle';\n\n  render(): TemplateResult {\n    const layout = this.layout ?? 'icon';\n    let label = '';\n    let icon = '';\n\n    if (this.__state === 'busy') {\n      label = 'copying';\n      icon = 'icons:hourglass-empty';\n    } else if (this.__state === 'fail') {\n      label = 'failed_to_copy';\n      icon = 'icons:error-outline';\n    } else if (this.__state === 'done') {\n      label = 'done';\n      icon = 'icons:done';\n    } else {\n      label = 'click_to_copy';\n      icon = this.icon ?? 'icons:content-copy';\n    }\n\n    return html`\n      ${layout === 'icon'\n        ? html`\n            <button\n              id=\"trigger\"\n              class=\"icon-button\"\n              ?disabled=${this.disabled}\n              @click=${this.__copy}\n            >\n              <iron-icon icon=${icon}></iron-icon>\n            </button>\n            <vcf-tooltip\n              position=\"bottom\"\n              style=\"--lumo-base-color: black\"\n              theme=\"light\"\n              for=\"trigger\"\n            >\n              <span class=\"text-s\" style=\"color: white\">\n                <foxy-i18n infer=\"\" key=${label}></foxy-i18n>\n              </span>\n            </vcf-tooltip>\n          `\n        : html`\n            <vaadin-button\n              theme=${ifDefined(this.theme ?? void 0)}\n              ?disabled=${this.disabled}\n              @click=${this.__copy}\n            >\n              <foxy-i18n infer=\"\" key=${label}></foxy-i18n>\n              ${layout === 'complete'\n                ? html`\n                    <iron-icon\n                      style=\"--lumo-icon-size-m: 1em; transform: translateY(-0.1em)\"\n                      icon=${icon}\n                    >\n                    </iron-icon>\n                  `\n                : ''}\n            </vaadin-button>\n          `}\n    `;\n  }\n\n  private __copy() {\n    if (this.__state === 'idle') {\n      this.__state = 'busy';\n\n      navigator.clipboard\n        .writeText(this.text ?? '')\n        .then(() => (this.__state = 'done'))\n        .catch(() => (this.__state = 'fail'))\n        .then(() => setTimeout(() => (this.__state = 'idle'), 2000));\n    }\n  }\n}\n"]}

package/dist/elements/public/StoreForm/StoreForm.js

@@ -912,12 +912,11 @@ export class StoreForm extends Base {
         const config = this.__getCustomDisplayIdConfig();
         const startAsInt = parseInt(config.start || '0');
         const lengthAsInt = parseInt(config.length || '0');
-        const numericLength = lengthAsInt - config.prefix.length - config.suffix.length;
-        const randomExampleNumericId = Math.min(startAsInt + Math.floor(Math.random() * Math.pow(10, numericLength)), Math.pow(10, numericLength) - 1);
-        if (config.start && config.length && startAsInt / 10 <= numericLength) {
+        const randomExampleNumericId = Math.min(startAsInt + Math.floor(Math.random() * Math.pow(10, lengthAsInt)), Math.pow(10, lengthAsInt) - 1);
+        if (config.start && config.length && startAsInt / 10 <= lengthAsInt) {
             return {
-                first: `${config.prefix}${startAsInt.toString().padStart(numericLength, '0')}${config.suffix}`,
-                random: `${config.prefix}${randomExampleNumericId.toString().padStart(numericLength, '0')}${config.suffix}`,
+                first: `${config.prefix}${startAsInt.toString().padStart(lengthAsInt, '0')}${config.suffix}`,
+                random: `${config.prefix}${randomExampleNumericId.toString().padStart(lengthAsInt, '0')}${config.suffix}`,
             };
         }
     }
@@ -926,16 +925,15 @@ export class StoreForm extends Base {
         const transactionJournalEntriesConfig = customDisplayIdConfig.transaction_journal_entries;
         const startAsInt = parseInt(customDisplayIdConfig.start || '0');
         const lengthAsInt = parseInt(customDisplayIdConfig.length || '0');
-        const numericLength = lengthAsInt - customDisplayIdConfig.prefix.length - customDisplayIdConfig.suffix.length;
-        const randomExampleNumericId = Math.min(startAsInt + Math.floor(Math.random() * Math.pow(10, numericLength)), Math.pow(10, numericLength) - 1);
+        const randomExampleNumericId = Math.min(startAsInt + Math.floor(Math.random() * Math.pow(10, lengthAsInt)), Math.pow(10, lengthAsInt) - 1);
         const randomExampleId = `${customDisplayIdConfig.prefix}${randomExampleNumericId
             .toString()
-            .padStart(numericLength, '0')}${customDisplayIdConfig.suffix}`;
+            .padStart(lengthAsInt, '0')}${customDisplayIdConfig.suffix}`;
         const randomNumericEntryId = Math.floor(Math.random() * 1000);
         const randomEntryId = String(randomNumericEntryId).padStart(3, '0');
         if (customDisplayIdConfig.start &&
             customDisplayIdConfig.length &&
-            startAsInt / 10 <= numericLength) {
+            startAsInt / 10 <= lengthAsInt) {
             return {
                 authcapture: `${randomExampleId}${transactionJournalEntriesConfig.transaction_separator}${transactionJournalEntriesConfig.log_detail_request_types.transaction_authcapture.prefix}${randomEntryId}`,
                 capture: `${randomExampleId}${transactionJournalEntriesConfig.transaction_separator}${transactionJournalEntriesConfig.log_detail_request_types.transaction_capture.prefix}${randomEntryId}`,