@felleslosninger/minid-elements 0.0.99 → 0.0.100

package/dist/components/search.js

@@ -49,7 +49,7 @@ let MinidSearch = class extends styled(LitElement) {
       >
         <mid-icon
           slot="prefix"
-          class="text-2xl"
+          class="size-6"
           library="system"
           name="magnifying-glass"
         >

package/dist/components/search.js.map

@@ -1 +1 @@
-{"version":3,"file":"search.js","sources":["../../src/components/search.component.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { styled } from '../mixins/tailwind.mixin';\nimport './textfield.component';\nimport './icon/icon.component';\nimport './button.component.ts';\nimport { live } from 'lit/directives/live.js';\nimport { MinidTextfield } from './textfield.component.ts';\nimport { debounce } from '../internal/debounce.ts';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-search': MinidSearch;\n  }\n}\n\n/**\n * @event mid-change - Emitted when a change to the input value is comitted by the user\n * @event mid-input - Emitted when the input element recieves input\n * @event mid-clear - Emitted when the input value is cleared\n * @event mid-focus - Emitted when input element is focused\n * @event mid-blur - Emitted when focus moves away from input element\n */\n@customElement('mid-search')\nexport class MinidSearch extends styled(LitElement) {\n  @query('mid-textfield')\n  textField!: MinidTextfield;\n\n  @property()\n  size: 'sm' | 'md' | 'lg' = 'md';\n\n  @property()\n  label = '';\n\n  @property()\n  placeholder = '';\n\n  @property()\n  value = '';\n\n  /**\n   * Debounce the `mid-input` event by a number of milliseconds\n   */\n  @property({ type: Number, reflect: true })\n  debounce = 0;\n\n  private handleInput = () => {\n    this.value = this.textField.value;\n    this.dispatchEvent(\n      new Event('mid-input', { composed: true, bubbles: true })\n    );\n  };\n\n  focus() {\n    this.textField.focus();\n  }\n\n  override render() {\n    return html`\n      <mid-textfield\n        .value=${live(this.value)}\n        type=\"search\"\n        size=${this.size}\n        label=${this.label}\n        placeholder=${this.placeholder}\n        @mid-input=${debounce(this.handleInput, this.debounce, {\n          stopPropagation: true,\n        })}\n        clearable\n      >\n        <mid-icon\n          slot=\"prefix\"\n          class=\"text-2xl\"\n          library=\"system\"\n          name=\"magnifying-glass\"\n        >\n        </mid-icon>\n      </mid-textfield>\n    `;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAwBO,IAAM,cAAN,cAA0B,OAAO,UAAU,EAAE;AAAA,EAA7C,cAAA;AAAA,UAAA,GAAA,SAAA;AAKsB,SAAA,OAAA;AAGnB,SAAA,QAAA;AAGM,SAAA,cAAA;AAGN,SAAA,QAAA;AAMG,SAAA,WAAA;AAEX,SAAQ,cAAc,MAAM;AACrB,WAAA,QAAQ,KAAK,UAAU;AACvB,WAAA;AAAA,QACH,IAAI,MAAM,aAAa,EAAE,UAAU,MAAM,SAAS,KAAM,CAAA;AAAA,MAC1D;AAAA,IACF;AAAA,EAAA;AAAA,EAEA,QAAQ;AACN,SAAK,UAAU,MAAM;AAAA,EAAA;AAAA,EAGd,SAAS;AACT,WAAA;AAAA;AAAA,iBAEM,KAAK,KAAK,KAAK,CAAC;AAAA;AAAA,eAElB,KAAK,IAAI;AAAA,gBACR,KAAK,KAAK;AAAA,sBACJ,KAAK,WAAW;AAAA,qBACjB,SAAS,KAAK,aAAa,KAAK,UAAU;AAAA,MACrD,iBAAiB;AAAA,IAAA,CAClB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAaV;AAtDE,gBAAA;AAAA,EADC,MAAM,eAAe;AAAA,GADX,YAEX,WAAA,aAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS;AAAA,GAJC,YAKX,WAAA,QAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS;AAAA,GAPC,YAQX,WAAA,SAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS;AAAA,GAVC,YAWX,WAAA,eAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS;AAAA,GAbC,YAcX,WAAA,SAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAM,CAAA;AAAA,GAnB9B,YAoBX,WAAA,YAAA,CAAA;AApBW,cAAN,gBAAA;AAAA,EADN,cAAc,YAAY;AAAA,GACd,WAAA;"}
+{"version":3,"file":"search.js","sources":["../../src/components/search.component.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { styled } from '../mixins/tailwind.mixin';\nimport './textfield.component';\nimport './icon/icon.component';\nimport './button.component.ts';\nimport { live } from 'lit/directives/live.js';\nimport { MinidTextfield } from './textfield.component.ts';\nimport { debounce } from '../internal/debounce.ts';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-search': MinidSearch;\n  }\n}\n\n/**\n * @event mid-change - Emitted when a change to the input value is comitted by the user\n * @event mid-input - Emitted when the input element recieves input\n * @event mid-clear - Emitted when the input value is cleared\n * @event mid-focus - Emitted when input element is focused\n * @event mid-blur - Emitted when focus moves away from input element\n */\n@customElement('mid-search')\nexport class MinidSearch extends styled(LitElement) {\n  @query('mid-textfield')\n  textField!: MinidTextfield;\n\n  @property()\n  size: 'sm' | 'md' | 'lg' = 'md';\n\n  @property()\n  label = '';\n\n  @property()\n  placeholder = '';\n\n  @property()\n  value = '';\n\n  /**\n   * Debounce the `mid-input` event by a number of milliseconds\n   */\n  @property({ type: Number, reflect: true })\n  debounce = 0;\n\n  private handleInput = () => {\n    this.value = this.textField.value;\n    this.dispatchEvent(\n      new Event('mid-input', { composed: true, bubbles: true })\n    );\n  };\n\n  focus() {\n    this.textField.focus();\n  }\n\n  override render() {\n    return html`\n      <mid-textfield\n        .value=${live(this.value)}\n        type=\"search\"\n        size=${this.size}\n        label=${this.label}\n        placeholder=${this.placeholder}\n        @mid-input=${debounce(this.handleInput, this.debounce, {\n          stopPropagation: true,\n        })}\n        clearable\n      >\n        <mid-icon\n          slot=\"prefix\"\n          class=\"size-6\"\n          library=\"system\"\n          name=\"magnifying-glass\"\n        >\n        </mid-icon>\n      </mid-textfield>\n    `;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAwBO,IAAM,cAAN,cAA0B,OAAO,UAAU,EAAE;AAAA,EAA7C,cAAA;AAAA,UAAA,GAAA,SAAA;AAKsB,SAAA,OAAA;AAGnB,SAAA,QAAA;AAGM,SAAA,cAAA;AAGN,SAAA,QAAA;AAMG,SAAA,WAAA;AAEX,SAAQ,cAAc,MAAM;AACrB,WAAA,QAAQ,KAAK,UAAU;AACvB,WAAA;AAAA,QACH,IAAI,MAAM,aAAa,EAAE,UAAU,MAAM,SAAS,KAAM,CAAA;AAAA,MAC1D;AAAA,IACF;AAAA,EAAA;AAAA,EAEA,QAAQ;AACN,SAAK,UAAU,MAAM;AAAA,EAAA;AAAA,EAGd,SAAS;AACT,WAAA;AAAA;AAAA,iBAEM,KAAK,KAAK,KAAK,CAAC;AAAA;AAAA,eAElB,KAAK,IAAI;AAAA,gBACR,KAAK,KAAK;AAAA,sBACJ,KAAK,WAAW;AAAA,qBACjB,SAAS,KAAK,aAAa,KAAK,UAAU;AAAA,MACrD,iBAAiB;AAAA,IAAA,CAClB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAaV;AAtDE,gBAAA;AAAA,EADC,MAAM,eAAe;AAAA,GADX,YAEX,WAAA,aAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS;AAAA,GAJC,YAKX,WAAA,QAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS;AAAA,GAPC,YAQX,WAAA,SAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS;AAAA,GAVC,YAWX,WAAA,eAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS;AAAA,GAbC,YAcX,WAAA,SAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAM,CAAA;AAAA,GAnB9B,YAoBX,WAAA,YAAA,CAAA;AApBW,cAAN,gBAAA;AAAA,EADN,cAAc,YAAY;AAAA,GACd,WAAA;"}

package/dist/components/spinner.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"spinner.component.d.ts","sourceRoot":"","sources":["../../src/components/spinner.component.ts"],"names":[],"mappings":"AACA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAG5C,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,YAAY,CAAC;KAC7B;CACF;;AAUD;;GAEG;AACH,qBACa,YAAa,SAAQ,iBAA0B;IACjD,MAAM;CAqBhB"}
+{"version":3,"file":"spinner.component.d.ts","sourceRoot":"","sources":["../../src/components/spinner.component.ts"],"names":[],"mappings":"AACA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAG5C,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,YAAY,CAAC;KAC7B;CACF;;AAUD;;GAEG;AACH,qBACa,YAAa,SAAQ,iBAA0B;IACjD,MAAM;CA6BhB"}

package/dist/components/spinner.js

@@ -25,6 +25,15 @@ let MinidSpinner = class extends styled(LitElement, styles) {
         height="1em"
         viewBox="0 0 50 50"
       >
+        <circle
+          opacity="0.2"
+          stroke="currentColor"
+          cx="25"
+          cy="25"
+          r="20"
+          fill="none"
+          stroke-width="5"
+        ></circle>
         <circle
           class="animate-dash"
           cx="25"
@@ -33,7 +42,6 @@ let MinidSpinner = class extends styled(LitElement, styles) {
           fill="none"
           stroke-width="5"
           stroke="currentColor"
-          stroke-linecap="round"
         ></circle>
       </svg>
     `;

package/dist/components/spinner.js.map

@@ -1 +1 @@
-{"version":3,"file":"spinner.js","sources":["../../src/components/spinner.component.ts"],"sourcesContent":["import { customElement } from 'lit/decorators.js';\nimport { css, html, LitElement } from 'lit';\nimport { styled } from '../mixins/tailwind.mixin';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-spinner': MinidSpinner;\n  }\n}\n\nconst styles = [\n  css`\n    :host {\n      display: inline-flex;\n    }\n  `,\n];\n\n/**\n * Size and color can be adjusted with `font-size` and `color` css properties\n */\n@customElement('mid-spinner')\nexport class MinidSpinner extends styled(LitElement, styles) {\n  override render() {\n    return html`\n      <svg\n        class=\"animate-spin-slow\"\n        width=\"1em\"\n        height=\"1em\"\n        viewBox=\"0 0 50 50\"\n      >\n        <circle\n          class=\"animate-dash\"\n          cx=\"25\"\n          cy=\"25\"\n          r=\"20\"\n          fill=\"none\"\n          stroke-width=\"5\"\n          stroke=\"currentColor\"\n          stroke-linecap=\"round\"\n        ></circle>\n      </svg>\n    `;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;AAUA,MAAM,SAAS;AAAA,EACb;AAAA;AAAA;AAAA;AAAA;AAKF;AAMO,IAAM,eAAN,cAA2B,OAAO,YAAY,MAAM,EAAE;AAAA,EAClD,SAAS;AACT,WAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAoBX;AAtBa,eAAN,gBAAA;AAAA,EADN,cAAc,aAAa;AAAA,GACf,YAAA;"}
+{"version":3,"file":"spinner.js","sources":["../../src/components/spinner.component.ts"],"sourcesContent":["import { customElement } from 'lit/decorators.js';\nimport { css, html, LitElement } from 'lit';\nimport { styled } from '../mixins/tailwind.mixin';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-spinner': MinidSpinner;\n  }\n}\n\nconst styles = [\n  css`\n    :host {\n      display: inline-flex;\n    }\n  `,\n];\n\n/**\n * Size and color can be adjusted with `font-size` and `color` css properties\n */\n@customElement('mid-spinner')\nexport class MinidSpinner extends styled(LitElement, styles) {\n  override render() {\n    return html`\n      <svg\n        class=\"animate-spin-slow\"\n        width=\"1em\"\n        height=\"1em\"\n        viewBox=\"0 0 50 50\"\n      >\n        <circle\n          opacity=\"0.2\"\n          stroke=\"currentColor\"\n          cx=\"25\"\n          cy=\"25\"\n          r=\"20\"\n          fill=\"none\"\n          stroke-width=\"5\"\n        ></circle>\n        <circle\n          class=\"animate-dash\"\n          cx=\"25\"\n          cy=\"25\"\n          r=\"20\"\n          fill=\"none\"\n          stroke-width=\"5\"\n          stroke=\"currentColor\"\n        ></circle>\n      </svg>\n    `;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;AAUA,MAAM,SAAS;AAAA,EACb;AAAA;AAAA;AAAA;AAAA;AAKF;AAMO,IAAM,eAAN,cAA2B,OAAO,YAAY,MAAM,EAAE;AAAA,EAClD,SAAS;AACT,WAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AA4BX;AA9Ba,eAAN,gBAAA;AAAA,EADN,cAAc,aAAa;AAAA,GACf,YAAA;"}

package/dist/components/textfield.component.d.ts

@@ -28,6 +28,7 @@ declare const MinidTextfield_base: import('../types/mixin-constructor.ts').Const
 export declare class MinidTextfield extends MinidTextfield_base {
     private readonly inputId;
     private readonly descriptionId;
+    private readonly validationId;
     private readonly hasSlotControler;
     private initialValue;
     input: HTMLInputElement;

package/dist/components/textfield.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"textfield.component.d.ts","sourceRoot":"","sources":["../../src/components/textfield.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAW,MAAM,KAAK,CAAC;AAgBrD,OAAO,0BAA0B,CAAC;AAElC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,cAAc,CAAC;KACjC;CACF;;AAYD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,qBACa,cAAe,SAAQ,mBAEnC;IACC,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAU;IAClC,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAU;IACxC,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAAwC;IACzE,OAAO,CAAC,YAAY,CAAM;IAG1B,KAAK,EAAG,gBAAgB,CAAC;IAGzB,KAAK,SAAM;IAGX,WAAW,SAAM;IAGjB,KAAK,SAAM;IAGX,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAGhC,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IAEH,SAAS,UAAS;IAElB;;OAEG;IAEH,YAAY,CAAC,EAAE,QAAQ,CAAC;IAExB;;OAEG;IAEH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IAEH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IAEH,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAEtB;;OAEG;IAEH,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAEtB;;OAEG;IAEH,cAAc,SAAM;IAGpB,IAAI,EACA,MAAM,GACN,gBAAgB,GAChB,OAAO,GACP,MAAM,GACN,OAAO,GACP,QAAQ,GACR,UAAU,GACV,QAAQ,GACR,KAAK,GACL,MAAM,GACN,MAAM,GACN,KAAK,GACL,MAAM,CAAU;IAEpB;;SAEK;IAEL,SAAS,UAAS;IAElB;;;OAGG;IAEH,cAAc,UAAS;IAEvB;;;OAGG;IAEH,eAAe,UAAS;IAGxB,QAAQ,UAAS;IAGjB,QAAQ,UAAS;IAEjB;;OAEG;IAEH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,SAAS,UAAS;IAGlB,QAAQ,UAAS;IAEjB,MAAM,KAAK,qBAAqB,qDAO/B;IAED,IAAI,gBAAgB,qBAEnB;;IASQ,iBAAiB,IAAI,IAAI;IAKlC,OAAO,CAAC,aAAa;IAkBrB,OAAO,CAAC,UAAU;IAOlB,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,WAAW;IAQnB,OAAO,CAAC,WAAW;IAOnB,OAAO,CAAC,oBAAoB;IAI5B,OAAO,CAAC,gBAAgB;IAmBxB,KAAK;IAKL,gBAAgB;IAKhB,UAAU,CAAC,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI;IAKlC,iBAAiB;IAIR,MAAM;CA8JhB"}
+{"version":3,"file":"textfield.component.d.ts","sourceRoot":"","sources":["../../src/components/textfield.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAW,MAAM,KAAK,CAAC;AAgBrD,OAAO,0BAA0B,CAAC;AAElC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,cAAc,CAAC;KACjC;CACF;;AAYD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,qBACa,cAAe,SAAQ,mBAEnC;IACC,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAU;IAClC,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAU;IACxC,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAU;IACvC,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAAwC;IACzE,OAAO,CAAC,YAAY,CAAM;IAG1B,KAAK,EAAG,gBAAgB,CAAC;IAGzB,KAAK,SAAM;IAGX,WAAW,SAAM;IAGjB,KAAK,SAAM;IAGX,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAGhC,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IAEH,SAAS,UAAS;IAElB;;OAEG;IAEH,YAAY,CAAC,EAAE,QAAQ,CAAC;IAExB;;OAEG;IAEH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IAEH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IAEH,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAEtB;;OAEG;IAEH,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAEtB;;OAEG;IAEH,cAAc,SAAM;IAGpB,IAAI,EACA,MAAM,GACN,gBAAgB,GAChB,OAAO,GACP,MAAM,GACN,OAAO,GACP,QAAQ,GACR,UAAU,GACV,QAAQ,GACR,KAAK,GACL,MAAM,GACN,MAAM,GACN,KAAK,GACL,MAAM,CAAU;IAEpB;;SAEK;IAEL,SAAS,UAAS;IAElB;;;OAGG;IAEH,cAAc,UAAS;IAEvB;;;OAGG;IAEH,eAAe,UAAS;IAGxB,QAAQ,UAAS;IAGjB,QAAQ,UAAS;IAEjB;;OAEG;IAEH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,SAAS,UAAS;IAGlB,QAAQ,UAAS;IAEjB,MAAM,KAAK,qBAAqB,qDAO/B;IAED,IAAI,gBAAgB,qBAEnB;;IAUQ,iBAAiB,IAAI,IAAI;IAKlC,OAAO,CAAC,aAAa;IAkBrB,OAAO,CAAC,UAAU;IAOlB,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,WAAW;IAQnB,OAAO,CAAC,WAAW;IAOnB,OAAO,CAAC,oBAAoB;IAI5B,OAAO,CAAC,gBAAgB;IAmBxB,KAAK;IAKL,gBAAgB;IAKhB,UAAU,CAAC,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI;IAKlC,iBAAiB;IAIR,MAAM;CA+JhB"}

package/dist/components/textfield.js

@@ -53,6 +53,7 @@ let MinidTextfield = class extends FormControlMixin(
     nextUniqueId++;
     this.inputId = `mid-textfield-input-${nextUniqueId}`;
     this.descriptionId = `mid-textfield-description-${nextUniqueId}`;
+    this.validationId = `mid-textfield-validation-${nextUniqueId}`;
   }
   static get formControlValidators() {
     return [
@@ -153,7 +154,7 @@ let MinidTextfield = class extends FormControlMixin(
       "text-body-sm": sm,
       "text-body-md": md,
       "text-body-lg": lg
-    })}"
+    })} max-w-full"
       >
         <label
           for="${this.inputId}"
@@ -197,8 +198,10 @@ let MinidTextfield = class extends FormControlMixin(
           <input
             id="${this.inputId}"
             class="${classMap({
+      "w-full": !isClearIconVisible,
+      "w-[calc(100%-var(--spacing)*7)]": isClearIconVisible,
       "[&::-webkit-search-cancel-button]:appearance-none": this.type === "search"
-    })} input grow focus-visible:outline-0"
+    })} input grow overflow-clip focus-visible:outline-0"
             part="input"
             .value=${live(this.value)}
             ?disabled=${this.disabled}
@@ -207,7 +210,7 @@ let MinidTextfield = class extends FormControlMixin(
             autocomplete=${ifDefined(this.autocomplete)}
             type=${this.type === "password" && this.passwordvisible ? "text" : this.type}
             aria-describedby="${this.descriptionId}"
-            aria-errormessage="error-message"
+            aria-errormessage="${this.validationId}"
             placeholder=${ifDefined(this.placeholder)}
             minlength=${ifDefined(this.minlength)}
             maxlength=${ifDefined(this.maxlength)}
@@ -262,11 +265,10 @@ let MinidTextfield = class extends FormControlMixin(
           </span>
         </div>
         <div
-          class="${classMap({
-      hidden: !this.invalidmessage
-    })} text-danger-subtle mt-2 flex gap-1"
-          id="error-message"
+          class="text-danger-subtle mt-2 flex gap-1"
+          id="${this.validationId}"
           aria-live="polite"
+          ?hidden=${!this.invalidmessage}
         >
           <mid-icon
             name="xmark-octagon-fill"

package/dist/components/textfield.js.map

@@ -1 +1 @@
-{"version":3,"file":"textfield.js","sources":["../../src/components/textfield.component.ts"],"sourcesContent":["import { css, html, LitElement, nothing } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { live } from 'lit/directives/live.js';\nimport { stringConverter } from '../internal/string-converter';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styled } from '../mixins/tailwind.mixin.ts';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { HasSlotController } from '../internal/slot';\nimport { FormControlMixin } from '../mixins/form-control.mixin';\nimport {\n  maxLengthValidator,\n  minLengthValidator,\n  patternValidator,\n  requiredValidator,\n} from '../mixins/validators';\nimport { watch } from '../internal/watch';\nimport './icon/icon.component.ts';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-textfield': MinidTextfield;\n  }\n}\n\nconst styles = [\n  css`\n    :host {\n      display: block;\n    }\n  `,\n];\n\nlet nextUniqueId = 0;\n\n/**\n *\n * @event mid-change - Emitted when a change to the input value is comitted by the user\n * @event mid-input - Emitted when the input element recieves input\n * @event mid-clear - Emitted when the input value is cleared\n * @event mid-focus - Emitted when input element is focused\n * @event mid-blur - Emitted when focus moves away from input element\n * @event {detail: { validity: ValidityState }} mid-invalid-hide - Emitted when the error message should be hidden\n * @event {detail: { validity: ValidityState }} mid-invalid-show - Emitted when the error message should be shown\n *\n * @slot prefix - Used for decoration to the left of the input\n * @slot suffix - Used for decoration to the right of the input\n * @slot label - The input's label. Alternatively, you can use the `label` attribute.\n *\n * @csspart base - The input's wrapper that has the input field styling.\n * @csspart input - The internal `<input>` element.\n * @csspart field - The element that wraps the label, input, and help text.\n * @csspart clear-button - The clear button\n * @csspart password-toggle-button - The button for toggling password visibility\n */\n@customElement('mid-textfield')\nexport class MinidTextfield extends FormControlMixin(\n  styled(LitElement, styles)\n) {\n  private readonly inputId!: string;\n  private readonly descriptionId!: string;\n  private readonly hasSlotControler = new HasSlotController(this, 'label');\n  private initialValue = '';\n\n  @query('.input')\n  input!: HTMLInputElement;\n\n  @property()\n  label = '';\n\n  @property()\n  description = '';\n\n  @property()\n  value = '';\n\n  @property()\n  size: 'sm' | 'md' | 'lg' = 'md';\n\n  @property({ converter: stringConverter })\n  placeholder?: string;\n\n  /**\n   * Autofocus the input field on page load\n   */\n  @property({ type: Boolean })\n  autofocus = false;\n\n  /**\n   * User agent autocomplete hint\n   */\n  @property()\n  autocomplete?: AutoFill;\n\n  /**\n   *  The minimum length of input that will be considered valid.\n   */\n  @property({ type: Number })\n  minlength?: number;\n\n  /**\n   *  The maximum length of input that will be considered valid.\n   */\n  @property({ type: Number })\n  maxlength?: number;\n\n  /**\n   * The input's minimum value. Only applies to date and number input types.\n   */\n  @property()\n  min?: number | string;\n\n  /**\n   * The input's maximum value. Only applies to date and number input types.\n   */\n  @property()\n  max?: number | string;\n\n  /**\n   * Error message to display when the input is invalid, also activates invalid styling\n   */\n  @property()\n  invalidmessage = '';\n\n  @property()\n  type:\n    | 'date'\n    | 'datetime-local'\n    | 'email'\n    | 'file'\n    | 'month'\n    | 'number'\n    | 'password'\n    | 'search'\n    | 'tel'\n    | 'text'\n    | 'time'\n    | 'url'\n    | 'week' = 'text';\n\n  /**\n   * Adds a clear button when the input is not empty.\n   * */\n  @property({ type: Boolean })\n  clearable = false;\n\n  /**\n   * Adds a button to toggle the password's visibility.\n   * Only applies if type is password\n   */\n  @property({ type: Boolean })\n  passwordtoggle = false;\n\n  /**\n   * Determines wether the password is currently visible.\n   * Only applies if type is password\n   */\n  @property({ type: Boolean })\n  passwordvisible = false;\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  @property({ type: Boolean, reflect: true })\n  readonly = false;\n\n  /**\n   * A regular expression pattern to validate input against.\n   */\n  @property()\n  pattern?: string;\n\n  /**\n   * Makes the input required\n   */\n  @property({ type: Boolean })\n  required = false;\n\n  /**\n   * Visually hides `label` and `description` (still available for screen readers)\n   */\n  @property({ type: Boolean })\n  hidelabel = false;\n\n  @state()\n  hasFocus = false;\n\n  static get formControlValidators() {\n    return [\n      requiredValidator,\n      maxLengthValidator,\n      minLengthValidator,\n      patternValidator,\n    ];\n  }\n\n  get validationTarget() {\n    return this.input;\n  }\n\n  constructor() {\n    super();\n    nextUniqueId++;\n    this.inputId = `mid-textfield-input-${nextUniqueId}`;\n    this.descriptionId = `mid-textfield-description-${nextUniqueId}`;\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.initialValue = this.value;\n  }\n\n  private handleKeydown(event: KeyboardEvent) {\n    const hasModifier =\n      event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;\n\n    // Pressing enter when focused on an input should submit the form like a native input, but we wait a tick before\n    // submitting to allow users to cancel the keydown event if they need to\n    if (event.key === 'Enter' && !hasModifier) {\n      setTimeout(() => {\n        //\n        // When using an Input Method Editor (IME), pressing enter will cause the form to submit unexpectedly. One way\n        // to check for this is to look at event.isComposing, which will be true when the IME is open.\n        if (!event.defaultPrevented && !event.isComposing) {\n          this.form.requestSubmit();\n        }\n      });\n    }\n  }\n\n  private handleBlur() {\n    this.hasFocus = false;\n    this.dispatchEvent(\n      new Event('mid-blur', { bubbles: true, composed: true })\n    );\n  }\n\n  private handleChange() {\n    this.value = this.input.value;\n    this.dispatchEvent(\n      new Event('mid-change', { bubbles: true, composed: true })\n    );\n  }\n\n  private handleInput() {\n    this.value = this.input.value;\n    this.setValue(this.value);\n    this.dispatchEvent(\n      new Event('mid-input', { bubbles: true, composed: true })\n    );\n  }\n\n  private handleFocus() {\n    this.hasFocus = true;\n    this.dispatchEvent(\n      new Event('mid-focus', { composed: true, bubbles: true })\n    );\n  }\n\n  private handlePasswordToggle() {\n    this.passwordvisible = !this.passwordvisible;\n  }\n\n  private handleClearClick(event: MouseEvent) {\n    event.preventDefault();\n\n    if (this.value !== '') {\n      this.value = '';\n      this.dispatchEvent(\n        new Event('mid-clear', { composed: true, bubbles: true })\n      );\n      this.dispatchEvent(\n        new Event('mid-input', { composed: true, bubbles: true })\n      );\n      this.dispatchEvent(\n        new Event('mid-change', { composed: true, bubbles: true })\n      );\n    }\n\n    this.input.focus();\n  }\n\n  focus() {\n    this.hasFocus = true;\n    this.input.focus();\n  }\n\n  resetFormControl() {\n    this.invalidmessage = '';\n    this.value = this.initialValue;\n  }\n\n  forceError(message?: string): void {\n    super.forceError(message);\n  }\n\n  @watch('value')\n  handleValueUpdate() {\n    this.setValue(this.value);\n  }\n\n  override render() {\n    const lg = this.size === 'lg';\n    const md = this.size === 'md';\n    const sm = this.size === 'sm';\n\n    const hasLabelSlot = this.hasSlotControler.test('label');\n    const hasLabel = !!this.label || !!hasLabelSlot;\n    const hasClearIcon = this.clearable && !this.disabled && !this.readonly;\n    const isClearIconVisible =\n      hasClearIcon && (typeof this.value === 'number' || this.value.length > 0);\n\n    return html`\n      <div\n        part=\"field\"\n        class=\"${classMap({\n          'opacity-disabled': this.disabled,\n          'text-body-sm': sm,\n          'text-body-md': md,\n          'text-body-lg': lg,\n        })}\"\n      >\n        <label\n          for=\"${this.inputId}\"\n          class=\"${classMap({\n            'sr-only': this.hidelabel || !hasLabel,\n          })} mb-2 inline-flex items-center gap-1 font-medium\"\n        >\n          ${this.readonly\n            ? html`<mid-icon\n                class=\"size-5\"\n                library=\"system\"\n                name=\"padlock-locked-fill\"\n              ></mid-icon>`\n            : nothing}\n          <slot name=\"label\"> ${this.label} </slot>\n        </label>\n        ${this.description\n          ? html`\n              <div\n                id=\"${this.descriptionId}\"\n                part=\"description\"\n                class=\"${classMap({\n                  'sr-only': this.hidelabel,\n                })} text-neutral-subtle mb-2\"\n              >\n                ${this.description}\n              </div>\n            `\n          : nothing}\n        <div\n          part=\"base\"\n          class=\"${classMap({\n            'border-neutral': !this.invalidmessage && !this.readonly,\n            'border-danger': this.invalidmessage && !this.readonly,\n            'border-neutral-subtle': this.readonly,\n            'bg-neutral-surface-tinted': this.readonly,\n            'bg-neutral-surface': !this.readonly,\n            border: !this.invalidmessage,\n            'border-2': this.invalidmessage,\n          })} focus-within:focus-ring flex h-12 items-center rounded-md px-3\"\n        >\n          <span class=\"slotted:!mr-2 slotted:rounded flex items-center\">\n            <slot name=\"prefix\"></slot>\n          </span>\n          <input\n            id=\"${this.inputId}\"\n            class=\"${classMap({\n              '[&::-webkit-search-cancel-button]:appearance-none':\n                this.type === 'search',\n            })} input grow focus-visible:outline-0\"\n            part=\"input\"\n            .value=${live(this.value)}\n            ?disabled=${this.disabled}\n            ?readonly=${this.readonly}\n            ?autofocus=${this.autofocus}\n            autocomplete=${ifDefined(this.autocomplete as any)}\n            type=${this.type === 'password' && this.passwordvisible\n              ? 'text'\n              : this.type}\n            aria-describedby=\"${this.descriptionId}\"\n            aria-errormessage=\"error-message\"\n            placeholder=${ifDefined(this.placeholder)}\n            minlength=${ifDefined(this.minlength)}\n            maxlength=${ifDefined(this.maxlength)}\n            min=${ifDefined(this.min)}\n            max=${ifDefined(this.max)}\n            pattern=${ifDefined(this.pattern)}\n            @input=${this.handleInput}\n            @change=${this.handleChange}\n            @focus=${this.handleFocus}\n            @blur=${this.handleBlur}\n            @keydown=${this.handleKeydown}\n          />\n          ${isClearIconVisible\n            ? html`\n                <button\n                  part=\"clear-button\"\n                  type=\"button\"\n                  class=\"focus-visible:focus-ring ml-2 flex items-center justify-center rounded-sm\"\n                  aria-label=\"Tøm\"\n                  @click=${this.handleClearClick}\n                >\n                  <mid-icon\n                    class=\"size-7\"\n                    library=\"system\"\n                    name=\"xmark\"\n                  ></mid-icon>\n                </button>\n              `\n            : ''}\n          ${this.passwordtoggle && !this.disabled\n            ? html`\n                <button\n                  part=\"password-toggle-button\"\n                  type=\"button\"\n                  class=\"ml-2 flex items-center justify-center rounded-sm\"\n                  aria-label=${this.passwordvisible\n                    ? 'skjul passord'\n                    : 'vis passord'}\n                  @click=${this.handlePasswordToggle}\n                  tabindex=\"-1\"\n                >\n                  ${this.passwordvisible\n                    ? html` <mid-icon\n                        class=\"size-7\"\n                        library=\"system\"\n                        name=\"eye-slash\"\n                      ></mid-icon>`\n                    : html`\n                        <mid-icon\n                          class=\"size-7\"\n                          library=\"system\"\n                          name=\"eye\"\n                        ></mid-icon>\n                      `}\n                </button>\n              `\n            : ''}\n          <span part=\"suffix\" class=\"slotted:!ml-2 slotted:rounded\">\n            <slot name=\"suffix\"></slot>\n          </span>\n        </div>\n        <div\n          class=\"${classMap({\n            hidden: !this.invalidmessage,\n          })} text-danger-subtle mt-2 flex gap-1\"\n          id=\"error-message\"\n          aria-live=\"polite\"\n        >\n          <mid-icon\n            name=\"xmark-octagon-fill\"\n            class=\"mt-1 min-h-5 min-w-5\"\n          ></mid-icon>\n          ${this.invalidmessage}\n        </div>\n      </div>\n    `;\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"textfield.js","sources":["../../src/components/textfield.component.ts"],"sourcesContent":["import { css, html, LitElement, nothing } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { live } from 'lit/directives/live.js';\nimport { stringConverter } from '../internal/string-converter';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styled } from '../mixins/tailwind.mixin.ts';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { HasSlotController } from '../internal/slot';\nimport { FormControlMixin } from '../mixins/form-control.mixin';\nimport {\n  maxLengthValidator,\n  minLengthValidator,\n  patternValidator,\n  requiredValidator,\n} from '../mixins/validators';\nimport { watch } from '../internal/watch';\nimport './icon/icon.component.ts';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-textfield': MinidTextfield;\n  }\n}\n\nconst styles = [\n  css`\n    :host {\n      display: block;\n    }\n  `,\n];\n\nlet nextUniqueId = 0;\n\n/**\n *\n * @event mid-change - Emitted when a change to the input value is comitted by the user\n * @event mid-input - Emitted when the input element recieves input\n * @event mid-clear - Emitted when the input value is cleared\n * @event mid-focus - Emitted when input element is focused\n * @event mid-blur - Emitted when focus moves away from input element\n * @event {detail: { validity: ValidityState }} mid-invalid-hide - Emitted when the error message should be hidden\n * @event {detail: { validity: ValidityState }} mid-invalid-show - Emitted when the error message should be shown\n *\n * @slot prefix - Used for decoration to the left of the input\n * @slot suffix - Used for decoration to the right of the input\n * @slot label - The input's label. Alternatively, you can use the `label` attribute.\n *\n * @csspart base - The input's wrapper that has the input field styling.\n * @csspart input - The internal `<input>` element.\n * @csspart field - The element that wraps the label, input, and help text.\n * @csspart clear-button - The clear button\n * @csspart password-toggle-button - The button for toggling password visibility\n */\n@customElement('mid-textfield')\nexport class MinidTextfield extends FormControlMixin(\n  styled(LitElement, styles)\n) {\n  private readonly inputId!: string;\n  private readonly descriptionId!: string;\n  private readonly validationId!: string;\n  private readonly hasSlotControler = new HasSlotController(this, 'label');\n  private initialValue = '';\n\n  @query('.input')\n  input!: HTMLInputElement;\n\n  @property()\n  label = '';\n\n  @property()\n  description = '';\n\n  @property()\n  value = '';\n\n  @property()\n  size: 'sm' | 'md' | 'lg' = 'md';\n\n  @property({ converter: stringConverter })\n  placeholder?: string;\n\n  /**\n   * Autofocus the input field on page load\n   */\n  @property({ type: Boolean })\n  autofocus = false;\n\n  /**\n   * User agent autocomplete hint\n   */\n  @property()\n  autocomplete?: AutoFill;\n\n  /**\n   *  The minimum length of input that will be considered valid.\n   */\n  @property({ type: Number })\n  minlength?: number;\n\n  /**\n   *  The maximum length of input that will be considered valid.\n   */\n  @property({ type: Number })\n  maxlength?: number;\n\n  /**\n   * The input's minimum value. Only applies to date and number input types.\n   */\n  @property()\n  min?: number | string;\n\n  /**\n   * The input's maximum value. Only applies to date and number input types.\n   */\n  @property()\n  max?: number | string;\n\n  /**\n   * Error message to display when the input is invalid, also activates invalid styling\n   */\n  @property()\n  invalidmessage = '';\n\n  @property()\n  type:\n    | 'date'\n    | 'datetime-local'\n    | 'email'\n    | 'file'\n    | 'month'\n    | 'number'\n    | 'password'\n    | 'search'\n    | 'tel'\n    | 'text'\n    | 'time'\n    | 'url'\n    | 'week' = 'text';\n\n  /**\n   * Adds a clear button when the input is not empty.\n   * */\n  @property({ type: Boolean })\n  clearable = false;\n\n  /**\n   * Adds a button to toggle the password's visibility.\n   * Only applies if type is password\n   */\n  @property({ type: Boolean })\n  passwordtoggle = false;\n\n  /**\n   * Determines wether the password is currently visible.\n   * Only applies if type is password\n   */\n  @property({ type: Boolean })\n  passwordvisible = false;\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  @property({ type: Boolean, reflect: true })\n  readonly = false;\n\n  /**\n   * A regular expression pattern to validate input against.\n   */\n  @property()\n  pattern?: string;\n\n  /**\n   * Makes the input required\n   */\n  @property({ type: Boolean })\n  required = false;\n\n  /**\n   * Visually hides `label` and `description` (still available for screen readers)\n   */\n  @property({ type: Boolean })\n  hidelabel = false;\n\n  @state()\n  hasFocus = false;\n\n  static get formControlValidators() {\n    return [\n      requiredValidator,\n      maxLengthValidator,\n      minLengthValidator,\n      patternValidator,\n    ];\n  }\n\n  get validationTarget() {\n    return this.input;\n  }\n\n  constructor() {\n    super();\n    nextUniqueId++;\n    this.inputId = `mid-textfield-input-${nextUniqueId}`;\n    this.descriptionId = `mid-textfield-description-${nextUniqueId}`;\n    this.validationId = `mid-textfield-validation-${nextUniqueId}`;\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.initialValue = this.value;\n  }\n\n  private handleKeydown(event: KeyboardEvent) {\n    const hasModifier =\n      event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;\n\n    // Pressing enter when focused on an input should submit the form like a native input, but we wait a tick before\n    // submitting to allow users to cancel the keydown event if they need to\n    if (event.key === 'Enter' && !hasModifier) {\n      setTimeout(() => {\n        //\n        // When using an Input Method Editor (IME), pressing enter will cause the form to submit unexpectedly. One way\n        // to check for this is to look at event.isComposing, which will be true when the IME is open.\n        if (!event.defaultPrevented && !event.isComposing) {\n          this.form.requestSubmit();\n        }\n      });\n    }\n  }\n\n  private handleBlur() {\n    this.hasFocus = false;\n    this.dispatchEvent(\n      new Event('mid-blur', { bubbles: true, composed: true })\n    );\n  }\n\n  private handleChange() {\n    this.value = this.input.value;\n    this.dispatchEvent(\n      new Event('mid-change', { bubbles: true, composed: true })\n    );\n  }\n\n  private handleInput() {\n    this.value = this.input.value;\n    this.setValue(this.value);\n    this.dispatchEvent(\n      new Event('mid-input', { bubbles: true, composed: true })\n    );\n  }\n\n  private handleFocus() {\n    this.hasFocus = true;\n    this.dispatchEvent(\n      new Event('mid-focus', { composed: true, bubbles: true })\n    );\n  }\n\n  private handlePasswordToggle() {\n    this.passwordvisible = !this.passwordvisible;\n  }\n\n  private handleClearClick(event: MouseEvent) {\n    event.preventDefault();\n\n    if (this.value !== '') {\n      this.value = '';\n      this.dispatchEvent(\n        new Event('mid-clear', { composed: true, bubbles: true })\n      );\n      this.dispatchEvent(\n        new Event('mid-input', { composed: true, bubbles: true })\n      );\n      this.dispatchEvent(\n        new Event('mid-change', { composed: true, bubbles: true })\n      );\n    }\n\n    this.input.focus();\n  }\n\n  focus() {\n    this.hasFocus = true;\n    this.input.focus();\n  }\n\n  resetFormControl() {\n    this.invalidmessage = '';\n    this.value = this.initialValue;\n  }\n\n  forceError(message?: string): void {\n    super.forceError(message);\n  }\n\n  @watch('value')\n  handleValueUpdate() {\n    this.setValue(this.value);\n  }\n\n  override render() {\n    const lg = this.size === 'lg';\n    const md = this.size === 'md';\n    const sm = this.size === 'sm';\n\n    const hasLabelSlot = this.hasSlotControler.test('label');\n    const hasLabel = !!this.label || !!hasLabelSlot;\n    const hasClearIcon = this.clearable && !this.disabled && !this.readonly;\n    const isClearIconVisible =\n      hasClearIcon && (typeof this.value === 'number' || this.value.length > 0);\n\n    return html`\n      <div\n        part=\"field\"\n        class=\"${classMap({\n          'opacity-disabled': this.disabled,\n          'text-body-sm': sm,\n          'text-body-md': md,\n          'text-body-lg': lg,\n        })} max-w-full\"\n      >\n        <label\n          for=\"${this.inputId}\"\n          class=\"${classMap({\n            'sr-only': this.hidelabel || !hasLabel,\n          })} mb-2 inline-flex items-center gap-1 font-medium\"\n        >\n          ${this.readonly\n            ? html`<mid-icon\n                class=\"size-5\"\n                library=\"system\"\n                name=\"padlock-locked-fill\"\n              ></mid-icon>`\n            : nothing}\n          <slot name=\"label\"> ${this.label} </slot>\n        </label>\n        ${this.description\n          ? html`\n              <div\n                id=\"${this.descriptionId}\"\n                part=\"description\"\n                class=\"${classMap({\n                  'sr-only': this.hidelabel,\n                })} text-neutral-subtle mb-2\"\n              >\n                ${this.description}\n              </div>\n            `\n          : nothing}\n        <div\n          part=\"base\"\n          class=\"${classMap({\n            'border-neutral': !this.invalidmessage && !this.readonly,\n            'border-danger': this.invalidmessage && !this.readonly,\n            'border-neutral-subtle': this.readonly,\n            'bg-neutral-surface-tinted': this.readonly,\n            'bg-neutral-surface': !this.readonly,\n            border: !this.invalidmessage,\n            'border-2': this.invalidmessage,\n          })} focus-within:focus-ring flex h-12 items-center rounded-md px-3\"\n        >\n          <span class=\"slotted:!mr-2 slotted:rounded flex items-center\">\n            <slot name=\"prefix\"></slot>\n          </span>\n          <input\n            id=\"${this.inputId}\"\n            class=\"${classMap({\n              'w-full': !isClearIconVisible,\n              'w-[calc(100%-var(--spacing)*7)]': isClearIconVisible,\n              '[&::-webkit-search-cancel-button]:appearance-none':\n                this.type === 'search',\n            })} input grow overflow-clip focus-visible:outline-0\"\n            part=\"input\"\n            .value=${live(this.value)}\n            ?disabled=${this.disabled}\n            ?readonly=${this.readonly}\n            ?autofocus=${this.autofocus}\n            autocomplete=${ifDefined(this.autocomplete as any)}\n            type=${this.type === 'password' && this.passwordvisible\n              ? 'text'\n              : this.type}\n            aria-describedby=\"${this.descriptionId}\"\n            aria-errormessage=\"${this.validationId}\"\n            placeholder=${ifDefined(this.placeholder)}\n            minlength=${ifDefined(this.minlength)}\n            maxlength=${ifDefined(this.maxlength)}\n            min=${ifDefined(this.min)}\n            max=${ifDefined(this.max)}\n            pattern=${ifDefined(this.pattern)}\n            @input=${this.handleInput}\n            @change=${this.handleChange}\n            @focus=${this.handleFocus}\n            @blur=${this.handleBlur}\n            @keydown=${this.handleKeydown}\n          />\n          ${isClearIconVisible\n            ? html`\n                <button\n                  part=\"clear-button\"\n                  type=\"button\"\n                  class=\"focus-visible:focus-ring ml-2 flex items-center justify-center rounded-sm\"\n                  aria-label=\"Tøm\"\n                  @click=${this.handleClearClick}\n                >\n                  <mid-icon\n                    class=\"size-7\"\n                    library=\"system\"\n                    name=\"xmark\"\n                  ></mid-icon>\n                </button>\n              `\n            : ''}\n          ${this.passwordtoggle && !this.disabled\n            ? html`\n                <button\n                  part=\"password-toggle-button\"\n                  type=\"button\"\n                  class=\"ml-2 flex items-center justify-center rounded-sm\"\n                  aria-label=${this.passwordvisible\n                    ? 'skjul passord'\n                    : 'vis passord'}\n                  @click=${this.handlePasswordToggle}\n                  tabindex=\"-1\"\n                >\n                  ${this.passwordvisible\n                    ? html` <mid-icon\n                        class=\"size-7\"\n                        library=\"system\"\n                        name=\"eye-slash\"\n                      ></mid-icon>`\n                    : html`\n                        <mid-icon\n                          class=\"size-7\"\n                          library=\"system\"\n                          name=\"eye\"\n                        ></mid-icon>\n                      `}\n                </button>\n              `\n            : ''}\n          <span part=\"suffix\" class=\"slotted:!ml-2 slotted:rounded\">\n            <slot name=\"suffix\"></slot>\n          </span>\n        </div>\n        <div\n          class=\"text-danger-subtle mt-2 flex gap-1\"\n          id=\"${this.validationId}\"\n          aria-live=\"polite\"\n          ?hidden=${!this.invalidmessage}\n        >\n          <mid-icon\n            name=\"xmark-octagon-fill\"\n            class=\"mt-1 min-h-5 min-w-5\"\n          ></mid-icon>\n          ${this.invalidmessage}\n        </div>\n      </div>\n    `;\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/designsystemet-tailwind.css

@@ -21,7 +21,7 @@
   --font-*: initial;
   --font-sans: 'Inter', 'Arial', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
   --font-sans--font-feature-settings: 'cv05' 1;
-  --font-mono: IBM Plex Mono;
+  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
   --text-heading-2xl--font-weight: 500;
   --text-heading-2xl--line-height: 1.3;
   --text-heading-2xl: 3.75rem;

package/dist/mixins/form-controller.mixin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"form-controller.mixin.d.ts","sourceRoot":"","sources":["../../src/mixins/form-controller.mixin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACjC,OAAO,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAEzD,MAAM,WAAW,4BAA4B;IAC3C,SAAS,EAAE,gBAAgB,CAAC;IAC5B,UAAU,EAAE,UAAU,GAAG,IAAI,CAAC;IAC9B,YAAY,CACV,KAAK,EAAE,IAAI,GAAG,MAAM,GAAG,QAAQ,GAAG,IAAI,EACtC,KAAK,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,QAAQ,GAAG,IAAI,GACtC,IAAI,CAAC;CACT;AAED,eAAO,MAAM,mBAAmB,GAAI,KAAK,SAAS,WAAW,CAAC,UAAU,CAAC,EACvE,MAAM,KAAK,KACV,KAAK,GAAG,WAAW,CAAC,4BAA4B,CAkClD,CAAC;AAEF,MAAM,WAAW,mCACf,SAAQ,4BAA4B;IACpC,QAAQ,EAAE,aAAa,CAAC;IACxB,iBAAiB,EAAE,MAAM,GAAG,SAAS,CAAC;IACtC,WAAW,CACT,QAAQ,EAAE,aAAa,EACvB,OAAO,CAAC,EAAE,MAAM,EAChB,MAAM,CAAC,EAAE,WAAW,GACnB,IAAI,CAAC;IACR,aAAa,IAAI,OAAO,CAAC;IACzB,cAAc,IAAI,OAAO,CAAC;CAC3B;AAED,eAAO,MAAM,0BAA0B,GACrC,KAAK,SAAS,WAAW,CAAC,UAAU,CAAC,EAErC,MAAM,KAAK,KACV,KAAK,GAAG,WAAW,CAAC,mCAAmC,CAkCzD,CAAC"}
+{"version":3,"file":"form-controller.mixin.d.ts","sourceRoot":"","sources":["../../src/mixins/form-controller.mixin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACjC,OAAO,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAEzD,MAAM,WAAW,4BAA4B;IAC3C,SAAS,EAAE,gBAAgB,CAAC;IAC5B,UAAU,EAAE,UAAU,GAAG,IAAI,CAAC;IAC9B,YAAY,CACV,KAAK,EAAE,IAAI,GAAG,MAAM,GAAG,QAAQ,GAAG,IAAI,EACtC,KAAK,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,QAAQ,GAAG,IAAI,GACtC,IAAI,CAAC;CACT;AAED,eAAO,MAAM,mBAAmB,GAAI,KAAK,SAAS,WAAW,CAAC,UAAU,CAAC,EACvE,MAAM,KAAK,KACV,KAAK,GAAG,WAAW,CAAC,4BAA4B,CAyBlD,CAAC;AAEF,MAAM,WAAW,mCACf,SAAQ,4BAA4B;IACpC,QAAQ,EAAE,aAAa,CAAC;IACxB,iBAAiB,EAAE,MAAM,GAAG,SAAS,CAAC;IACtC,WAAW,CACT,QAAQ,EAAE,aAAa,EACvB,OAAO,CAAC,EAAE,MAAM,EAChB,MAAM,CAAC,EAAE,WAAW,GACnB,IAAI,CAAC;IACR,aAAa,IAAI,OAAO,CAAC;IACzB,cAAc,IAAI,OAAO,CAAC;CAC3B;AAED,eAAO,MAAM,0BAA0B,GACrC,KAAK,SAAS,WAAW,CAAC,UAAU,CAAC,EAErC,MAAM,KAAK,KACV,KAAK,GAAG,WAAW,CAAC,mCAAmC,CAkCzD,CAAC"}

package/dist/mixins/form-controller.mixin.js

@@ -7,9 +7,6 @@ const FormControllerMixin = (Base) => {
     setFormValue(value, state) {
       this.internals.setFormValue(value, state);
     }
-    /**
-     * @ignore
-     */
     get shadowRoot() {
       return this.internals.shadowRoot;
     }

package/dist/mixins/form-controller.mixin.js.map

@@ -1 +1 @@
-{"version":3,"file":"form-controller.mixin.js","sources":["../../src/mixins/form-controller.mixin.ts"],"sourcesContent":["import { LitElement } from 'lit';\nimport { Constructor } from '../types/mixin-constructor';\n\nexport interface FormAssociatedMixinInterface {\n  internals: ElementInternals;\n  shadowRoot: ShadowRoot | null;\n  setFormValue(\n    value: File | string | FormData | null,\n    state?: File | string | FormData | null\n  ): void;\n}\n\nexport const FormControllerMixin = <TBase extends Constructor<LitElement>>(\n  Base: TBase\n): TBase & Constructor<FormAssociatedMixinInterface> => {\n  class FormAssociated extends Base implements FormAssociatedMixinInterface {\n    /**\n     * @ignore\n     */\n    static formAssociated = true;\n\n    /**\n     * @ignore\n     */\n    internals: ElementInternals;\n\n    constructor(...args: any[]) {\n      super(...(args as ConstructorParameters<typeof Base>));\n      // @ts-expect-error missing some u\n      this.internals = this.attachInternals();\n    }\n\n    setFormValue(\n      value: File | string | FormData | null,\n      state?: File | string | FormData | null\n    ) {\n      this.internals.setFormValue(value, state);\n    }\n\n    /**\n     * @ignore\n     */\n    get shadowRoot() {\n      return this.internals.shadowRoot;\n    }\n  }\n\n  return FormAssociated as TBase & Constructor<FormAssociatedMixinInterface>;\n};\n\nexport interface ConstraintsValidationMixinInterface\n  extends FormAssociatedMixinInterface {\n  validity: ValidityState;\n  validationMessage: string | undefined;\n  setValidity(\n    validity: ValidityState,\n    message?: string,\n    anchor?: HTMLElement\n  ): void;\n  checkValidity(): boolean;\n  reportValidity(): boolean;\n}\n\nexport const ConstraintsValidationMixin = <\n  TBase extends Constructor<LitElement>,\n>(\n  Base: TBase\n): TBase & Constructor<ConstraintsValidationMixinInterface> => {\n  class ConstraintsValidation\n    extends FormControllerMixin(Base)\n    implements ConstraintsValidationMixinInterface\n  {\n    validity: ValidityState;\n    validationMessage: string | undefined;\n\n    constructor(...args: any[]) {\n      super(...(args as ConstructorParameters<typeof Base>));\n      this.validity = this.internals.validity;\n      this.validationMessage = this.internals.validationMessage;\n    }\n\n    setValidity(\n      validity: ValidityStateFlags,\n      message?: string,\n      anchor?: HTMLElement\n    ) {\n      this.validationMessage = message;\n      this.internals.setValidity(validity, this.validationMessage, anchor);\n    }\n\n    checkValidity(): boolean {\n      return this.internals.checkValidity();\n    }\n\n    reportValidity(): boolean {\n      return this.internals.reportValidity();\n    }\n  }\n\n  return ConstraintsValidation as TBase &\n    Constructor<ConstraintsValidationMixinInterface>;\n};\n"],"names":[],"mappings":"AAYa,MAAA,sBAAsB,CACjC,SACsD;AACtD,QAAM,kBAAN,MAAM,wBAAuB,KAA6C;AAAA,IAWxE,eAAe,MAAa;AAC1B,YAAM,GAAI,IAA2C;AAEhD,WAAA,YAAY,KAAK,gBAAgB;AAAA,IAAA;AAAA,IAGxC,aACE,OACA,OACA;AACK,WAAA,UAAU,aAAa,OAAO,KAAK;AAAA,IAAA;AAAA;AAAA;AAAA;AAAA,IAM1C,IAAI,aAAa;AACf,aAAO,KAAK,UAAU;AAAA,IAAA;AAAA,EACxB;AAzBA,kBAAO,iBAAiB;AAJ1B,MAAM,iBAAN;AAgCO,SAAA;AACT;AAea,MAAA,6BAA6B,CAGxC,SAC6D;AAAA,EAC7D,MAAM,8BACI,oBAAoB,IAAI,EAElC;AAAA,IAIE,eAAe,MAAa;AAC1B,YAAM,GAAI,IAA2C;AAChD,WAAA,WAAW,KAAK,UAAU;AAC1B,WAAA,oBAAoB,KAAK,UAAU;AAAA,IAAA;AAAA,IAG1C,YACE,UACA,SACA,QACA;AACA,WAAK,oBAAoB;AACzB,WAAK,UAAU,YAAY,UAAU,KAAK,mBAAmB,MAAM;AAAA,IAAA;AAAA,IAGrE,gBAAyB;AAChB,aAAA,KAAK,UAAU,cAAc;AAAA,IAAA;AAAA,IAGtC,iBAA0B;AACjB,aAAA,KAAK,UAAU,eAAe;AAAA,IAAA;AAAA,EACvC;AAGK,SAAA;AAET;"}
+{"version":3,"file":"form-controller.mixin.js","sources":["../../src/mixins/form-controller.mixin.ts"],"sourcesContent":["import { LitElement } from 'lit';\nimport { Constructor } from '../types/mixin-constructor';\n\nexport interface FormAssociatedMixinInterface {\n  internals: ElementInternals;\n  shadowRoot: ShadowRoot | null;\n  setFormValue(\n    value: File | string | FormData | null,\n    state?: File | string | FormData | null\n  ): void;\n}\n\nexport const FormControllerMixin = <TBase extends Constructor<LitElement>>(\n  Base: TBase\n): TBase & Constructor<FormAssociatedMixinInterface> => {\n  class FormAssociated extends Base implements FormAssociatedMixinInterface {\n    static formAssociated = true;\n\n    internals: ElementInternals;\n\n    constructor(...args: any[]) {\n      super(...(args as ConstructorParameters<typeof Base>));\n      // @ts-expect-error missing some u\n      this.internals = this.attachInternals();\n    }\n\n    setFormValue(\n      value: File | string | FormData | null,\n      state?: File | string | FormData | null\n    ) {\n      this.internals.setFormValue(value, state);\n    }\n\n    get shadowRoot() {\n      return this.internals.shadowRoot;\n    }\n  }\n\n  return FormAssociated as TBase & Constructor<FormAssociatedMixinInterface>;\n};\n\nexport interface ConstraintsValidationMixinInterface\n  extends FormAssociatedMixinInterface {\n  validity: ValidityState;\n  validationMessage: string | undefined;\n  setValidity(\n    validity: ValidityState,\n    message?: string,\n    anchor?: HTMLElement\n  ): void;\n  checkValidity(): boolean;\n  reportValidity(): boolean;\n}\n\nexport const ConstraintsValidationMixin = <\n  TBase extends Constructor<LitElement>,\n>(\n  Base: TBase\n): TBase & Constructor<ConstraintsValidationMixinInterface> => {\n  class ConstraintsValidation\n    extends FormControllerMixin(Base)\n    implements ConstraintsValidationMixinInterface\n  {\n    validity: ValidityState;\n    validationMessage: string | undefined;\n\n    constructor(...args: any[]) {\n      super(...(args as ConstructorParameters<typeof Base>));\n      this.validity = this.internals.validity;\n      this.validationMessage = this.internals.validationMessage;\n    }\n\n    setValidity(\n      validity: ValidityStateFlags,\n      message?: string,\n      anchor?: HTMLElement\n    ) {\n      this.validationMessage = message;\n      this.internals.setValidity(validity, this.validationMessage, anchor);\n    }\n\n    checkValidity(): boolean {\n      return this.internals.checkValidity();\n    }\n\n    reportValidity(): boolean {\n      return this.internals.reportValidity();\n    }\n  }\n\n  return ConstraintsValidation as TBase &\n    Constructor<ConstraintsValidationMixinInterface>;\n};\n"],"names":[],"mappings":"AAYa,MAAA,sBAAsB,CACjC,SACsD;AACtD,QAAM,kBAAN,MAAM,wBAAuB,KAA6C;AAAA,IAKxE,eAAe,MAAa;AAC1B,YAAM,GAAI,IAA2C;AAEhD,WAAA,YAAY,KAAK,gBAAgB;AAAA,IAAA;AAAA,IAGxC,aACE,OACA,OACA;AACK,WAAA,UAAU,aAAa,OAAO,KAAK;AAAA,IAAA;AAAA,IAG1C,IAAI,aAAa;AACf,aAAO,KAAK,UAAU;AAAA,IAAA;AAAA,EACxB;AAnBA,kBAAO,iBAAiB;AAD1B,MAAM,iBAAN;AAuBO,SAAA;AACT;AAea,MAAA,6BAA6B,CAGxC,SAC6D;AAAA,EAC7D,MAAM,8BACI,oBAAoB,IAAI,EAElC;AAAA,IAIE,eAAe,MAAa;AAC1B,YAAM,GAAI,IAA2C;AAChD,WAAA,WAAW,KAAK,UAAU;AAC1B,WAAA,oBAAoB,KAAK,UAAU;AAAA,IAAA;AAAA,IAG1C,YACE,UACA,SACA,QACA;AACA,WAAK,oBAAoB;AACzB,WAAK,UAAU,YAAY,UAAU,KAAK,mBAAmB,MAAM;AAAA,IAAA;AAAA,IAGrE,gBAAyB;AAChB,aAAA,KAAK,UAAU,cAAc;AAAA,IAAA;AAAA,IAGtC,iBAA0B;AACjB,aAAA,KAAK,UAAU,eAAe;AAAA,IAAA;AAAA,EACvC;AAGK,SAAA;AAET;"}

package/dist/mixins/tailwind.mixin.js

@@ -1,6 +1,6 @@
 import { css } from "lit";
 const tailwindStyles = css`/*! tailwindcss v4.1.4 | MIT License | https://tailwindcss.com */
-@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-ease:initial}}}@layer theme{:root,:host{--spacing:calc(4/18*1em);--text-2xl:1.5rem;--text-2xl--line-height:calc(2/1.5);--font-weight-medium:500;--radius-sm:min(.25rem*.5,.25rem);--radius-md:min(.25rem,.25rem*2);--radius-lg:min(.25rem*2,.25rem*5);--ease-in:cubic-bezier(.4,0,1,1);--ease-out:cubic-bezier(0,0,.2,1);--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-font-feature-settings:var(--font-sans--font-feature-settings);--default-mono-font-family:var(--font-mono);--radius:.25rem;--radius-full:624.938rem;--opacity-disabled:30%;--font-sans:"Inter","Arial",ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-sans--font-feature-settings:"cv05" 1;--font-mono:IBM Plex Mono;--text-heading-2xl--font-weight:500;--text-heading-2xl--line-height:1.3;--text-heading-2xl:3.75rem;--text-heading-2xl--letter-spacing:-1%;--text-heading-xl--font-weight:500;--text-heading-xl--line-height:1.3;--text-heading-xl:3rem;--text-heading-xl--letter-spacing:-1%;--text-heading-lg--font-weight:500;--text-heading-lg--line-height:1.3;--text-heading-lg:2.25rem;--text-heading-lg--letter-spacing:-0.5%;--text-heading-md--font-weight:500;--text-heading-md--line-height:1.3;--text-heading-md:1.875rem;--text-heading-md--letter-spacing:-0.25%;--text-heading-sm--font-weight:500;--text-heading-sm--line-height:1.3;--text-heading-sm:1.5rem;--text-heading-sm--letter-spacing:0%;--text-heading-xs--font-weight:500;--text-heading-xs--line-height:1.3;--text-heading-xs:1.3125rem;--text-heading-xs--letter-spacing:0.15%;--text-heading-2xs--font-weight:500;--text-heading-2xs--line-height:1.3;--text-heading-2xs:1.125rem;--text-heading-2xs--letter-spacing:0.15%;--text-body-lg--font-weight:400;--text-body-lg--line-height:1.5;--text-body-lg:1.3125rem;--text-body-lg--letter-spacing:0.5%;--text-body-md--font-weight:400;--text-body-md--line-height:1.5;--text-body-md:1.125rem;--text-body-md--letter-spacing:0.5%;--text-body-sm--font-weight:400;--text-body-sm--line-height:1.5;--text-body-sm:1rem;--text-body-sm--letter-spacing:0.25%;--text-body-xs--font-weight:400;--text-body-xs--line-height:1.5;--text-body-xs:.875rem;--text-body-xs--letter-spacing:0.15%;--text-6:1.5rem;--text-7:1.875rem;--text-8:2.25rem;--leading-sm:1.3;--color-white:#fff;--color-black:#000;--color-accent-surface-hover:#c7ddf0;--color-accent-surface-active:#afcee9;--color-accent-base:#0062ba;--color-accent-base-hover:#004f96;--color-accent-base-active:#003d75;--color-accent-base-contrast:#fff;--color-neutral-surface:#fff;--color-neutral-surface-tinted:#e7e9ea;--color-neutral-surface-hover:#d8dadd;--color-neutral-surface-active:#c7cacf;--color-neutral-base:#1e2b3c;--color-neutral-base-contrast:#fff;--color-success-surface-tinted:#daeddd;--color-success-surface-hover:#c3e2c7;--color-danger-surface-tinted:#f8e4e4;--color-danger-surface-hover:#f3d2d2;--color-danger-surface-active:#edbfbf;--color-info-surface-tinted:#dcebf6;--color-info-surface-hover:#c5ddf0;--color-warning-surface-tinted:#fae6c6;--color-warning-surface-hover:#f6d5a0;--color-focus-inner:#fff;--color-focus-outer:#1f2c3d;--color-link-visited:#663299;--text-color-accent-subtle:#005db1;--text-color-accent:#002c54;--text-color-neutral-subtle:#545e6b;--text-color-neutral:#1f2c3d;--text-color-success-subtle:#056d13;--text-color-success:#023409;--text-color-danger-subtle:#b81a1a;--text-color-danger:#590d0d;--text-color-info-subtle:#0860a3;--text-color-info:#042d4d;--text-color-warning-subtle:#80540f;--text-color-warning:#3c2807;--background-color-accent-tinted:#eef4fa;--background-color-neutral:#fff;--background-color-info-tinted:#edf5fa;--border-color-accent-strong:#005db1;--border-color-neutral-subtle:#b8bcc1;--border-color-neutral:#717a84;--border-color-success:#108c22;--border-color-danger:#ce4d4d;--border-color-info:#1f7dc5;--border-color-warning:#a56d13;--animate-dash:dash 1.4s cubic-bezier(.2,-.01,.51,.96)infinite;--animate-spin-slow:spin 2.2s linear infinite;--animate-fade-out:fade-out .2s ease-in forwards}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.invisible{visibility:hidden}.visible{visibility:visible}.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.top-\\[calc\\(50\\%_-_0\\.5em\\)\\]{top:calc(50% - .5em)}.left-\\[calc\\(50\\%_-_0\\.5em\\)\\]{left:calc(50% - .5em)}.float-right{float:right}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.m-auto{margin:auto}.-my-4{margin-block:calc(var(--spacing)*-4)}.mt-1{margin-top:calc(var(--spacing)*1)}.mt-2{margin-top:calc(var(--spacing)*2)}.mb-2{margin-bottom:calc(var(--spacing)*2)}.ml-2{margin-left:calc(var(--spacing)*2)}.block{display:block}.contents{display:contents}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-flex{display:inline-flex}.size-5{width:calc(var(--spacing)*5);height:calc(var(--spacing)*5)}.size-6{width:calc(var(--spacing)*6);height:calc(var(--spacing)*6)}.size-7{width:calc(var(--spacing)*7);height:calc(var(--spacing)*7)}.size-12{width:calc(var(--spacing)*12);height:calc(var(--spacing)*12)}.h-0{height:calc(var(--spacing)*0)}.h-4{height:calc(var(--spacing)*4)}.h-5{height:calc(var(--spacing)*5)}.h-6{height:calc(var(--spacing)*6)}.h-7{height:calc(var(--spacing)*7)}.h-8{height:calc(var(--spacing)*8)}.h-12{height:calc(var(--spacing)*12)}.h-fit{height:fit-content}.h-full{height:100%}.max-h-\\(--max-height\\){max-height:var(--max-height)}.max-h-\\[calc\\(100\\%---spacing\\(8\\)\\)\\]{max-height:calc(100% - calc(var(--spacing)*8))}.min-h-5{min-height:calc(var(--spacing)*5)}.min-h-12{min-height:calc(var(--spacing)*12)}.w-\\(--width\\){width:var(--width)}.w-5{width:calc(var(--spacing)*5)}.w-6{width:calc(var(--spacing)*6)}.w-7{width:calc(var(--spacing)*7)}.w-12{width:calc(var(--spacing)*12)}.w-full{width:100%}.w-max{width:max-content}.max-w-\\(--max-width\\){max-width:var(--max-width)}.max-w-\\[calc\\(100\\%---spacing\\(8\\)\\)\\]{max-width:calc(100% - calc(var(--spacing)*8))}.min-w-5{min-width:calc(var(--spacing)*5)}.min-w-12{min-width:calc(var(--spacing)*12)}.grow{flex-grow:1}.translate-x-3{--tw-translate-x:calc(var(--spacing)*3);translate:var(--tw-translate-x)var(--tw-translate-y)}.-translate-y-3{--tw-translate-y:calc(var(--spacing)*-3);translate:var(--tw-translate-x)var(--tw-translate-y)}.transform{transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}.animate-dash{animation:var(--animate-dash)}.animate-spin-slow{animation:var(--animate-spin-slow)}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.cursor-wait{cursor:wait}.resize{resize:both}.grid-cols-\\[auto_1fr_auto\\]{grid-template-columns:auto 1fr auto}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.gap-0{gap:calc(var(--spacing)*0)}.gap-1{gap:calc(var(--spacing)*1)}.gap-2{gap:calc(var(--spacing)*2)}.gap-3{gap:calc(var(--spacing)*3)}.self-center{align-self:center}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:var(--radius)}.rounded-full{border-radius:3.40282e38px;border-radius:var(--radius-full)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-sm{border-radius:var(--radius-sm)}.rounded-l{border-top-left-radius:var(--radius);border-bottom-left-radius:var(--radius)}.rounded-r{border-top-right-radius:var(--radius);border-bottom-right-radius:var(--radius)}.border{border-style:var(--tw-border-style);border-width:1px}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-r-0{border-right-style:var(--tw-border-style);border-right-width:0}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-l-\\[5px\\]{border-left-style:var(--tw-border-style);border-left-width:5px}.border-accent-base{border-color:var(--color-accent-base)}.border-accent-strong{border-color:var(--border-color-accent-strong)}.border-danger{border-color:var(--border-color-danger)}.border-info{border-color:var(--border-color-info)}.border-neutral{border-color:var(--border-color-neutral)}.border-neutral-subtle{border-color:var(--border-color-neutral-subtle)}.border-success{border-color:var(--border-color-success)}.border-transparent{border-color:#0000}.border-warning{border-color:var(--border-color-warning)}.bg-accent-base{background-color:var(--color-accent-base)}.bg-accent-tinted{background-color:var(--background-color-accent-tinted)}.bg-danger-surface-tinted{background-color:var(--color-danger-surface-tinted)}.bg-info-surface-tinted{background-color:var(--color-info-surface-tinted)}.bg-info-tinted{background-color:var(--background-color-info-tinted)}.bg-neutral{background-color:var(--background-color-neutral)}.bg-neutral-base{background-color:var(--color-neutral-base)}.bg-neutral-surface{background-color:var(--color-neutral-surface)}.bg-neutral-surface-active{background-color:var(--color-neutral-surface-active)}.bg-neutral-surface-tinted{background-color:var(--color-neutral-surface-tinted)}.bg-success-surface-tinted{background-color:var(--color-success-surface-tinted)}.bg-transparent{background-color:#0000}.bg-warning-surface-tinted{background-color:var(--color-warning-surface-tinted)}.p-2{padding:calc(var(--spacing)*2)}.p-4{padding:calc(var(--spacing)*4)}.p-6{padding:calc(var(--spacing)*6)}.px-2{padding-inline:calc(var(--spacing)*2)}.px-3{padding-inline:calc(var(--spacing)*3)}.px-4{padding-inline:calc(var(--spacing)*4)}.py-1{padding-block:calc(var(--spacing)*1)}.py-2{padding-block:calc(var(--spacing)*2)}.py-3{padding-block:calc(var(--spacing)*3)}.pl-3{padding-left:calc(var(--spacing)*3)}.text-body-lg{font-size:var(--text-body-lg);line-height:var(--tw-leading,var(--text-body-lg--line-height));letter-spacing:var(--tw-tracking,var(--text-body-lg--letter-spacing));font-weight:var(--tw-font-weight,var(--text-body-lg--font-weight))}.text-body-md{font-size:var(--text-body-md);line-height:var(--tw-leading,var(--text-body-md--line-height));letter-spacing:var(--tw-tracking,var(--text-body-md--letter-spacing));font-weight:var(--tw-font-weight,var(--text-body-md--font-weight))}.text-body-sm{font-size:var(--text-body-sm);line-height:var(--tw-leading,var(--text-body-sm--line-height));letter-spacing:var(--tw-tracking,var(--text-body-sm--letter-spacing));font-weight:var(--tw-font-weight,var(--text-body-sm--font-weight))}.text-body-xs{font-size:var(--text-body-xs);line-height:var(--tw-leading,var(--text-body-xs--line-height));letter-spacing:var(--tw-tracking,var(--text-body-xs--letter-spacing));font-weight:var(--tw-font-weight,var(--text-body-xs--font-weight))}.text-heading-2xl{font-size:var(--text-heading-2xl);line-height:var(--tw-leading,var(--text-heading-2xl--line-height));letter-spacing:var(--tw-tracking,var(--text-heading-2xl--letter-spacing));font-weight:var(--tw-font-weight,var(--text-heading-2xl--font-weight))}.text-heading-2xs{font-size:var(--text-heading-2xs);line-height:var(--tw-leading,var(--text-heading-2xs--line-height));letter-spacing:var(--tw-tracking,var(--text-heading-2xs--letter-spacing));font-weight:var(--tw-font-weight,var(--text-heading-2xs--font-weight))}.text-heading-lg{font-size:var(--text-heading-lg);line-height:var(--tw-leading,var(--text-heading-lg--line-height));letter-spacing:var(--tw-tracking,var(--text-heading-lg--letter-spacing));font-weight:var(--tw-font-weight,var(--text-heading-lg--font-weight))}.text-heading-md{font-size:var(--text-heading-md);line-height:var(--tw-leading,var(--text-heading-md--line-height));letter-spacing:var(--tw-tracking,var(--text-heading-md--letter-spacing));font-weight:var(--tw-font-weight,var(--text-heading-md--font-weight))}.text-heading-sm{font-size:var(--text-heading-sm);line-height:var(--tw-leading,var(--text-heading-sm--line-height));letter-spacing:var(--tw-tracking,var(--text-heading-sm--letter-spacing));font-weight:var(--tw-font-weight,var(--text-heading-sm--font-weight))}.text-heading-xl{font-size:var(--text-heading-xl);line-height:var(--tw-leading,var(--text-heading-xl--line-height));letter-spacing:var(--tw-tracking,var(--text-heading-xl--letter-spacing));font-weight:var(--tw-font-weight,var(--text-heading-xl--font-weight))}.text-heading-xs{font-size:var(--text-heading-xs);line-height:var(--tw-leading,var(--text-heading-xs--line-height));letter-spacing:var(--tw-tracking,var(--text-heading-xs--letter-spacing));font-weight:var(--tw-font-weight,var(--text-heading-xs--font-weight))}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-6{font-size:var(--text-6)}.text-7{font-size:var(--text-7)}.text-8{font-size:var(--text-8)}.text-\\[1\\.4rem\\]{font-size:1.4rem}.leading-sm{--tw-leading:var(--leading-sm);line-height:var(--leading-sm)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.whitespace-nowrap{white-space:nowrap}.text-accent-base{color:var(--color-accent-base)}.text-accent-base-contrast{color:var(--color-accent-base-contrast)}.text-accent-subtle{color:var(--text-color-accent-subtle)}.text-danger{color:var(--text-color-danger)}.text-danger-subtle{color:var(--text-color-danger-subtle)}.text-info{color:var(--text-color-info)}.text-info-subtle{color:var(--text-color-info-subtle)}.text-neutral{color:var(--text-color-neutral)}.text-neutral-base-contrast{color:var(--color-neutral-base-contrast)}.text-neutral-subtle{color:var(--text-color-neutral-subtle)}.text-success{color:var(--text-color-success)}.text-success-subtle{color:var(--text-color-success-subtle)}.text-warning{color:var(--text-color-warning)}.text-warning-subtle{color:var(--text-color-warning-subtle)}.underline{text-decoration-line:underline}.decoration-\\[\\.0625rem\\]{text-decoration-thickness:.0625rem}.underline-offset-\\[\\.27em\\]{text-underline-offset:.27em}.opacity-disabled{opacity:var(--opacity-disabled)}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-md{--tw-shadow:0 0 1px 0 var(--tw-shadow-color,#00000024),0 2px 4px 0 var(--tw-shadow-color,#0000001f),0 4px 8px 0 var(--tw-shadow-color,#0000001f);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-none{--tw-shadow:0 0 #0000;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-xl{--tw-shadow:0 0 1px 0 var(--tw-shadow-color,#0000001f),0 4px 8px 0 var(--tw-shadow-color,#00000029),0 12px 24px 0 var(--tw-shadow-color,#00000029);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.outline-0{outline-style:var(--tw-outline-style);outline-width:0}.blur{--tw-blur:blur(8px);filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.filter{filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.ease-in{--tw-ease:var(--ease-in);transition-timing-function:var(--ease-in)}.ease-out{--tw-ease:var(--ease-out);transition-timing-function:var(--ease-out)}.\\[--arrow-border-color\\:var\\(--border-color-info\\)\\]{--arrow-border-color:var(--border-color-info)}.\\[--arrow-border-color\\:var\\(--border-color-neutral-subtle\\)\\]{--arrow-border-color:var(--border-color-neutral-subtle)}.\\[--arrow-color\\:var\\(--background-color-info-tinted\\)\\]{--arrow-color:var(--background-color-info-tinted)}.\\[--arrow-color\\:var\\(--color-neutral-base\\)\\]{--arrow-color:var(--color-neutral-base)}.\\[--arrow-color\\:var\\(--color-neutral-surface\\)\\]{--arrow-color:var(--color-neutral-surface)}.\\[--arrow-size\\:8px\\]{--arrow-size:8px}.backdrop\\:animate-fade-out::backdrop{animation:var(--animate-fade-out)}.backdrop\\:bg-black\\/50::backdrop{background-color:#00000080}@supports (color:color-mix(in lab, red, red)){.backdrop\\:bg-black\\/50::backdrop{background-color:color-mix(in oklab,var(--color-black)50%,transparent)}}.visited\\:text-link-visited:visited{color:var(--color-link-visited)}.open\\:flex:is([open],:popover-open,:open){display:flex}.open\\:animate-none:is([open],:popover-open,:open){animation:none}.focus-within\\:focus-ring:focus-within{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(3px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-ring-color:var(--color-focus-inner);outline-style:var(--tw-outline-style);outline-offset:3px;outline-width:3px;outline-color:var(--color-focus-outer)}@media (hover:hover){.hover\\:bg-accent-base-hover:hover{background-color:var(--color-accent-base-hover)}.hover\\:bg-accent-surface-hover:hover{background-color:var(--color-accent-surface-hover)}.hover\\:bg-danger-surface-hover:hover{background-color:var(--color-danger-surface-hover)}.hover\\:bg-info-surface-hover:hover{background-color:var(--color-info-surface-hover)}.hover\\:bg-neutral-surface-hover:hover{background-color:var(--color-neutral-surface-hover)}.hover\\:bg-success-surface-hover:hover{background-color:var(--color-success-surface-hover)}.hover\\:bg-warning-surface-hover:hover{background-color:var(--color-warning-surface-hover)}.hover\\:text-accent:hover{color:var(--text-color-accent)}}.focus-visible\\:bg-focus-outer:focus-visible{background-color:var(--color-focus-outer)}.focus-visible\\:text-white:focus-visible{color:var(--color-white)}.focus-visible\\:focus-ring:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(3px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-ring-color:var(--color-focus-inner);outline-style:var(--tw-outline-style);outline-offset:3px;outline-width:3px;outline-color:var(--color-focus-outer)}.focus-visible\\:outline-0:focus-visible{outline-style:var(--tw-outline-style);outline-width:0}.focus-visible\\:outline-focus-outer:focus-visible{outline-color:var(--color-focus-outer)}.active\\:bg-accent-base-active:active{background-color:var(--color-accent-base-active)}.active\\:bg-accent-surface-active:active{background-color:var(--color-accent-surface-active)}.slotted\\:\\!mr-2 ::slotted(*){margin-right:calc(var(--spacing)*2)!important}.slotted\\:\\!ml-2 ::slotted(*){margin-left:calc(var(--spacing)*2)!important}.slotted\\:rounded ::slotted(*){border-radius:var(--radius)}.\\[\\&\\:\\:-webkit-search-cancel-button\\]\\:appearance-none::-webkit-search-cancel-button{appearance:none}.\\[\\&\\:\\:part\\(base\\)\\]\\:justify-start::part(base){justify-content:flex-start}}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@keyframes spin{to{transform:rotate(360deg)}}@keyframes dash{0%{stroke-dasharray:1 150;stroke-dashoffset:0}50%{stroke-dasharray:90 150;stroke-dashoffset:-35px}to{stroke-dasharray:90 150;stroke-dashoffset:-124px}}@keyframes fade-out{0%{opacity:1}to{opacity:0}}
+@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-ease:initial}}}@layer theme{:root,:host{--spacing:calc(4/18*1em);--font-weight-medium:500;--radius-sm:min(.25rem*.5,.25rem);--radius-md:min(.25rem,.25rem*2);--radius-lg:min(.25rem*2,.25rem*5);--ease-in:cubic-bezier(.4,0,1,1);--ease-out:cubic-bezier(0,0,.2,1);--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-font-feature-settings:var(--font-sans--font-feature-settings);--default-mono-font-family:var(--font-mono);--radius:.25rem;--radius-full:624.938rem;--opacity-disabled:30%;--font-sans:"Inter","Arial",ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-sans--font-feature-settings:"cv05" 1;--font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--text-heading-2xl--font-weight:500;--text-heading-2xl--line-height:1.3;--text-heading-2xl:3.75rem;--text-heading-2xl--letter-spacing:-1%;--text-heading-xl--font-weight:500;--text-heading-xl--line-height:1.3;--text-heading-xl:3rem;--text-heading-xl--letter-spacing:-1%;--text-heading-lg--font-weight:500;--text-heading-lg--line-height:1.3;--text-heading-lg:2.25rem;--text-heading-lg--letter-spacing:-0.5%;--text-heading-md--font-weight:500;--text-heading-md--line-height:1.3;--text-heading-md:1.875rem;--text-heading-md--letter-spacing:-0.25%;--text-heading-sm--font-weight:500;--text-heading-sm--line-height:1.3;--text-heading-sm:1.5rem;--text-heading-sm--letter-spacing:0%;--text-heading-xs--font-weight:500;--text-heading-xs--line-height:1.3;--text-heading-xs:1.3125rem;--text-heading-xs--letter-spacing:0.15%;--text-heading-2xs--font-weight:500;--text-heading-2xs--line-height:1.3;--text-heading-2xs:1.125rem;--text-heading-2xs--letter-spacing:0.15%;--text-body-lg--font-weight:400;--text-body-lg--line-height:1.5;--text-body-lg:1.3125rem;--text-body-lg--letter-spacing:0.5%;--text-body-md--font-weight:400;--text-body-md--line-height:1.5;--text-body-md:1.125rem;--text-body-md--letter-spacing:0.5%;--text-body-sm--font-weight:400;--text-body-sm--line-height:1.5;--text-body-sm:1rem;--text-body-sm--letter-spacing:0.25%;--text-body-xs--font-weight:400;--text-body-xs--line-height:1.5;--text-body-xs:.875rem;--text-body-xs--letter-spacing:0.15%;--text-6:1.5rem;--text-7:1.875rem;--text-8:2.25rem;--leading-sm:1.3;--color-white:#fff;--color-black:#000;--color-accent-surface-hover:#c7ddf0;--color-accent-surface-active:#afcee9;--color-accent-base:#0062ba;--color-accent-base-hover:#004f96;--color-accent-base-active:#003d75;--color-accent-base-contrast:#fff;--color-neutral-surface:#fff;--color-neutral-surface-tinted:#e7e9ea;--color-neutral-surface-hover:#d8dadd;--color-neutral-surface-active:#c7cacf;--color-neutral-base:#1e2b3c;--color-neutral-base-contrast:#fff;--color-success-surface-tinted:#daeddd;--color-success-surface-hover:#c3e2c7;--color-danger-surface-tinted:#f8e4e4;--color-danger-surface-hover:#f3d2d2;--color-danger-surface-active:#edbfbf;--color-danger-base:#c01b1b;--color-info-surface-tinted:#dcebf6;--color-info-surface-hover:#c5ddf0;--color-warning-surface-tinted:#fae6c6;--color-warning-surface-hover:#f6d5a0;--color-focus-inner:#fff;--color-focus-outer:#1f2c3d;--color-link-visited:#663299;--text-color-accent-subtle:#005db1;--text-color-accent:#002c54;--text-color-neutral-subtle:#545e6b;--text-color-neutral:#1f2c3d;--text-color-success-subtle:#056d13;--text-color-success:#023409;--text-color-danger-subtle:#b81a1a;--text-color-danger:#590d0d;--text-color-info-subtle:#0860a3;--text-color-info:#042d4d;--text-color-warning-subtle:#80540f;--text-color-warning:#3c2807;--background-color-accent-tinted:#eef4fa;--background-color-neutral:#fff;--background-color-info-tinted:#edf5fa;--border-color-accent-strong:#005db1;--border-color-neutral-subtle:#b8bcc1;--border-color-neutral:#717a84;--border-color-success:#108c22;--border-color-danger:#ce4d4d;--border-color-info:#1f7dc5;--border-color-warning:#a56d13;--animate-dash:dash 1.9s cubic-bezier(.2,-.01,.51,.96)infinite;--animate-spin-slow:spin 2.2s linear infinite;--animate-fade-out:fade-out .2s ease-in forwards}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.pointer-events-none{pointer-events:none}.invisible{visibility:hidden}.visible{visibility:visible}.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.top-\\[calc\\(50\\%_-_0\\.5em\\)\\]{top:calc(50% - .5em)}.left-\\[calc\\(50\\%_-_0\\.5em\\)\\]{left:calc(50% - .5em)}.float-right{float:right}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.m-auto{margin:auto}.-my-4{margin-block:calc(var(--spacing)*-4)}.mt-0\\.5{margin-top:calc(var(--spacing)*.5)}.mt-1{margin-top:calc(var(--spacing)*1)}.mt-2{margin-top:calc(var(--spacing)*2)}.mb-2{margin-bottom:calc(var(--spacing)*2)}.ml-2{margin-left:calc(var(--spacing)*2)}.block{display:block}.contents{display:contents}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-flex{display:inline-flex}.size-5{width:calc(var(--spacing)*5);height:calc(var(--spacing)*5)}.size-6{width:calc(var(--spacing)*6);height:calc(var(--spacing)*6)}.size-7{width:calc(var(--spacing)*7);height:calc(var(--spacing)*7)}.size-12{width:calc(var(--spacing)*12);height:calc(var(--spacing)*12)}.h-0{height:calc(var(--spacing)*0)}.h-4{height:calc(var(--spacing)*4)}.h-5{height:calc(var(--spacing)*5)}.h-6{height:calc(var(--spacing)*6)}.h-7{height:calc(var(--spacing)*7)}.h-8{height:calc(var(--spacing)*8)}.h-12{height:calc(var(--spacing)*12)}.h-fit{height:fit-content}.h-full{height:100%}.max-h-\\(--max-height\\){max-height:var(--max-height)}.max-h-\\[calc\\(100\\%---spacing\\(8\\)\\)\\]{max-height:calc(100% - calc(var(--spacing)*8))}.min-h-5{min-height:calc(var(--spacing)*5)}.min-h-12{min-height:calc(var(--spacing)*12)}.w-\\(--width\\){width:var(--width)}.w-5{width:calc(var(--spacing)*5)}.w-6{width:calc(var(--spacing)*6)}.w-7{width:calc(var(--spacing)*7)}.w-12{width:calc(var(--spacing)*12)}.w-\\[calc\\(100\\%-var\\(--spacing\\)\\*7\\)\\]{width:calc(100% - var(--spacing)*7)}.w-full{width:100%}.w-max{width:max-content}.max-w-\\(--max-width\\){max-width:var(--max-width)}.max-w-\\[calc\\(100\\%---spacing\\(8\\)\\)\\]{max-width:calc(100% - calc(var(--spacing)*8))}.max-w-full{max-width:100%}.min-w-5{min-width:calc(var(--spacing)*5)}.min-w-12{min-width:calc(var(--spacing)*12)}.shrink-0{flex-shrink:0}.flex-grow,.grow{flex-grow:1}.translate-x-3{--tw-translate-x:calc(var(--spacing)*3);translate:var(--tw-translate-x)var(--tw-translate-y)}.-translate-y-3{--tw-translate-y:calc(var(--spacing)*-3);translate:var(--tw-translate-x)var(--tw-translate-y)}.scale-125{--tw-scale-x:125%;--tw-scale-y:125%;--tw-scale-z:125%;scale:var(--tw-scale-x)var(--tw-scale-y)}.transform{transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}.animate-dash{animation:var(--animate-dash)}.animate-spin-slow{animation:var(--animate-spin-slow)}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.cursor-wait{cursor:wait}.resize{resize:both}.appearance-none{appearance:none}.grid-cols-\\[auto_1fr\\]{grid-template-columns:auto 1fr}.grid-cols-\\[auto_1fr_auto\\]{grid-template-columns:auto 1fr auto}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.gap-0{gap:calc(var(--spacing)*0)}.gap-1{gap:calc(var(--spacing)*1)}.gap-2{gap:calc(var(--spacing)*2)}.gap-3{gap:calc(var(--spacing)*3)}.self-center{align-self:center}.overflow-auto{overflow:auto}.overflow-clip{overflow:clip}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:var(--radius)}.rounded-full{border-radius:3.40282e38px;border-radius:var(--radius-full)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-sm{border-radius:var(--radius-sm)}.rounded-l{border-top-left-radius:var(--radius);border-bottom-left-radius:var(--radius)}.rounded-r{border-top-right-radius:var(--radius);border-bottom-right-radius:var(--radius)}.border{border-style:var(--tw-border-style);border-width:1px}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-r-0{border-right-style:var(--tw-border-style);border-right-width:0}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-l-4{border-left-style:var(--tw-border-style);border-left-width:4px}.border-l-\\[5px\\]{border-left-style:var(--tw-border-style);border-left-width:5px}.border-accent-base{border-color:var(--color-accent-base)}.border-accent-strong{border-color:var(--border-color-accent-strong)}.border-danger{border-color:var(--border-color-danger)}.border-danger-base{border-color:var(--color-danger-base)}.border-info{border-color:var(--border-color-info)}.border-neutral{border-color:var(--border-color-neutral)}.border-neutral-subtle{border-color:var(--border-color-neutral-subtle)}.border-success{border-color:var(--border-color-success)}.border-transparent{border-color:#0000}.border-warning{border-color:var(--border-color-warning)}.bg-accent-base{background-color:var(--color-accent-base)}.bg-accent-tinted{background-color:var(--background-color-accent-tinted)}.bg-danger-base{background-color:var(--color-danger-base)}.bg-danger-surface-hover{background-color:var(--color-danger-surface-hover)}.bg-danger-surface-tinted{background-color:var(--color-danger-surface-tinted)}.bg-info-surface-hover{background-color:var(--color-info-surface-hover)}.bg-info-surface-tinted{background-color:var(--color-info-surface-tinted)}.bg-info-tinted{background-color:var(--background-color-info-tinted)}.bg-neutral{background-color:var(--background-color-neutral)}.bg-neutral-base{background-color:var(--color-neutral-base)}.bg-neutral-surface{background-color:var(--color-neutral-surface)}.bg-neutral-surface-active{background-color:var(--color-neutral-surface-active)}.bg-neutral-surface-tinted{background-color:var(--color-neutral-surface-tinted)}.bg-success-surface-hover{background-color:var(--color-success-surface-hover)}.bg-success-surface-tinted{background-color:var(--color-success-surface-tinted)}.bg-transparent{background-color:#0000}.bg-warning-surface-hover{background-color:var(--color-warning-surface-hover)}.bg-warning-surface-tinted{background-color:var(--color-warning-surface-tinted)}.p-2{padding:calc(var(--spacing)*2)}.p-3{padding:calc(var(--spacing)*3)}.p-4{padding:calc(var(--spacing)*4)}.p-6{padding:calc(var(--spacing)*6)}.px-2{padding-inline:calc(var(--spacing)*2)}.px-3{padding-inline:calc(var(--spacing)*3)}.px-4{padding-inline:calc(var(--spacing)*4)}.py-1{padding-block:calc(var(--spacing)*1)}.py-2{padding-block:calc(var(--spacing)*2)}.py-3{padding-block:calc(var(--spacing)*3)}.pl-3{padding-left:calc(var(--spacing)*3)}.text-body-lg{font-size:var(--text-body-lg);line-height:var(--tw-leading,var(--text-body-lg--line-height));letter-spacing:var(--tw-tracking,var(--text-body-lg--letter-spacing));font-weight:var(--tw-font-weight,var(--text-body-lg--font-weight))}.text-body-md{font-size:var(--text-body-md);line-height:var(--tw-leading,var(--text-body-md--line-height));letter-spacing:var(--tw-tracking,var(--text-body-md--letter-spacing));font-weight:var(--tw-font-weight,var(--text-body-md--font-weight))}.text-body-sm{font-size:var(--text-body-sm);line-height:var(--tw-leading,var(--text-body-sm--line-height));letter-spacing:var(--tw-tracking,var(--text-body-sm--letter-spacing));font-weight:var(--tw-font-weight,var(--text-body-sm--font-weight))}.text-body-xs{font-size:var(--text-body-xs);line-height:var(--tw-leading,var(--text-body-xs--line-height));letter-spacing:var(--tw-tracking,var(--text-body-xs--letter-spacing));font-weight:var(--tw-font-weight,var(--text-body-xs--font-weight))}.text-heading-2xl{font-size:var(--text-heading-2xl);line-height:var(--tw-leading,var(--text-heading-2xl--line-height));letter-spacing:var(--tw-tracking,var(--text-heading-2xl--letter-spacing));font-weight:var(--tw-font-weight,var(--text-heading-2xl--font-weight))}.text-heading-2xs{font-size:var(--text-heading-2xs);line-height:var(--tw-leading,var(--text-heading-2xs--line-height));letter-spacing:var(--tw-tracking,var(--text-heading-2xs--letter-spacing));font-weight:var(--tw-font-weight,var(--text-heading-2xs--font-weight))}.text-heading-lg{font-size:var(--text-heading-lg);line-height:var(--tw-leading,var(--text-heading-lg--line-height));letter-spacing:var(--tw-tracking,var(--text-heading-lg--letter-spacing));font-weight:var(--tw-font-weight,var(--text-heading-lg--font-weight))}.text-heading-md{font-size:var(--text-heading-md);line-height:var(--tw-leading,var(--text-heading-md--line-height));letter-spacing:var(--tw-tracking,var(--text-heading-md--letter-spacing));font-weight:var(--tw-font-weight,var(--text-heading-md--font-weight))}.text-heading-sm{font-size:var(--text-heading-sm);line-height:var(--tw-leading,var(--text-heading-sm--line-height));letter-spacing:var(--tw-tracking,var(--text-heading-sm--letter-spacing));font-weight:var(--tw-font-weight,var(--text-heading-sm--font-weight))}.text-heading-xl{font-size:var(--text-heading-xl);line-height:var(--tw-leading,var(--text-heading-xl--line-height));letter-spacing:var(--tw-tracking,var(--text-heading-xl--letter-spacing));font-weight:var(--tw-font-weight,var(--text-heading-xl--font-weight))}.text-heading-xs{font-size:var(--text-heading-xs);line-height:var(--tw-leading,var(--text-heading-xs--line-height));letter-spacing:var(--tw-tracking,var(--text-heading-xs--letter-spacing));font-weight:var(--tw-font-weight,var(--text-heading-xs--font-weight))}.text-6{font-size:var(--text-6)}.text-7{font-size:var(--text-7)}.text-8{font-size:var(--text-8)}.text-\\[1\\.4rem\\]{font-size:1.4rem}.leading-sm{--tw-leading:var(--leading-sm);line-height:var(--leading-sm)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.break-all{word-break:break-all}.whitespace-nowrap{white-space:nowrap}.whitespace-pre-wrap{white-space:pre-wrap}.text-accent-base{color:var(--color-accent-base)}.text-accent-base-contrast{color:var(--color-accent-base-contrast)}.text-accent-subtle{color:var(--text-color-accent-subtle)}.text-danger{color:var(--text-color-danger)}.text-danger-subtle{color:var(--text-color-danger-subtle)}.text-info{color:var(--text-color-info)}.text-info-subtle{color:var(--text-color-info-subtle)}.text-neutral{color:var(--text-color-neutral)}.text-neutral-base-contrast{color:var(--color-neutral-base-contrast)}.text-neutral-subtle{color:var(--text-color-neutral-subtle)}.text-success{color:var(--text-color-success)}.text-success-subtle{color:var(--text-color-success-subtle)}.text-warning{color:var(--text-color-warning)}.text-warning-subtle{color:var(--text-color-warning-subtle)}.underline{text-decoration-line:underline}.decoration-\\[\\.0625rem\\]{text-decoration-thickness:.0625rem}.underline-offset-\\[\\.27em\\]{text-underline-offset:.27em}.opacity-disabled{opacity:var(--opacity-disabled)}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-md{--tw-shadow:0 0 1px 0 var(--tw-shadow-color,#00000024),0 2px 4px 0 var(--tw-shadow-color,#0000001f),0 4px 8px 0 var(--tw-shadow-color,#0000001f);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-none{--tw-shadow:0 0 #0000;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-xl{--tw-shadow:0 0 1px 0 var(--tw-shadow-color,#0000001f),0 4px 8px 0 var(--tw-shadow-color,#00000029),0 12px 24px 0 var(--tw-shadow-color,#00000029);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.outline-0{outline-style:var(--tw-outline-style);outline-width:0}.blur{--tw-blur:blur(8px);filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.filter{filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.ease-in{--tw-ease:var(--ease-in);transition-timing-function:var(--ease-in)}.ease-out{--tw-ease:var(--ease-out);transition-timing-function:var(--ease-out)}.\\[--arrow-border-color\\:var\\(--border-color-info\\)\\]{--arrow-border-color:var(--border-color-info)}.\\[--arrow-border-color\\:var\\(--border-color-neutral-subtle\\)\\]{--arrow-border-color:var(--border-color-neutral-subtle)}.\\[--arrow-color\\:var\\(--background-color-info-tinted\\)\\]{--arrow-color:var(--background-color-info-tinted)}.\\[--arrow-color\\:var\\(--color-neutral-base\\)\\]{--arrow-color:var(--color-neutral-base)}.\\[--arrow-color\\:var\\(--color-neutral-surface\\)\\]{--arrow-color:var(--color-neutral-surface)}.\\[--arrow-size\\:8px\\]{--arrow-size:8px}.backdrop\\:animate-fade-out::backdrop{animation:var(--animate-fade-out)}.backdrop\\:bg-black\\/50::backdrop{background-color:#00000080}@supports (color:color-mix(in lab, red, red)){.backdrop\\:bg-black\\/50::backdrop{background-color:color-mix(in oklab,var(--color-black)50%,transparent)}}.visited\\:text-link-visited:visited{color:var(--color-link-visited)}.open\\:flex:is([open],:popover-open,:open){display:flex}.open\\:animate-none:is([open],:popover-open,:open){animation:none}.focus-within\\:focus-ring:focus-within{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(3px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-ring-color:var(--color-focus-inner);outline-style:var(--tw-outline-style);outline-offset:3px;outline-width:3px;outline-color:var(--color-focus-outer)}@media (hover:hover){.hover\\:bg-accent-base-hover:hover{background-color:var(--color-accent-base-hover)}.hover\\:bg-accent-surface-hover:hover{background-color:var(--color-accent-surface-hover)}.hover\\:bg-danger-surface-hover:hover{background-color:var(--color-danger-surface-hover)}.hover\\:bg-info-surface-hover:hover{background-color:var(--color-info-surface-hover)}.hover\\:bg-neutral-surface-hover:hover{background-color:var(--color-neutral-surface-hover)}.hover\\:bg-success-surface-hover:hover{background-color:var(--color-success-surface-hover)}.hover\\:bg-warning-surface-hover:hover{background-color:var(--color-warning-surface-hover)}.hover\\:text-accent:hover{color:var(--text-color-accent)}}.focus-visible\\:bg-focus-outer:focus-visible{background-color:var(--color-focus-outer)}.focus-visible\\:text-white:focus-visible{color:var(--color-white)}.focus-visible\\:focus-ring:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(3px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-ring-color:var(--color-focus-inner);outline-style:var(--tw-outline-style);outline-offset:3px;outline-width:3px;outline-color:var(--color-focus-outer)}.focus-visible\\:outline-0:focus-visible{outline-style:var(--tw-outline-style);outline-width:0}.focus-visible\\:outline-focus-outer:focus-visible{outline-color:var(--color-focus-outer)}.active\\:bg-accent-base-active:active{background-color:var(--color-accent-base-active)}.active\\:bg-accent-surface-active:active{background-color:var(--color-accent-surface-active)}.slotted\\:\\!mr-2 ::slotted(*){margin-right:calc(var(--spacing)*2)!important}.slotted\\:\\!ml-2 ::slotted(*){margin-left:calc(var(--spacing)*2)!important}.slotted\\:rounded ::slotted(*){border-radius:var(--radius)}.\\[\\&\\:\\:-webkit-search-cancel-button\\]\\:appearance-none::-webkit-search-cancel-button{appearance:none}.\\[\\&\\:\\:part\\(base\\)\\]\\:justify-start::part(base){justify-content:flex-start}}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@keyframes spin{to{transform:rotate(360deg)}}@keyframes dash{0%{stroke-dasharray:1 150;stroke-dashoffset:0}50%{stroke-dasharray:90 150;stroke-dashoffset:-35px}to{stroke-dasharray:90 150;stroke-dashoffset:-124px}}@keyframes fade-out{0%{opacity:1}to{opacity:0}}
 `;
 const styled = (superClass, elementCss = []) => {
   var _a;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@felleslosninger/minid-elements",
-  "version": "0.0.99",
+  "version": "0.0.100",
   "description": "MinID Web Components",
   "author": "Digitaliseringsdirektoratet",
   "license": "MIT",
@@ -140,6 +140,7 @@
   },
   "dependencies": {
     "@floating-ui/dom": "^1.6.10",
+    "@floating-ui/utils": "^0.2.9",
     "@u-elements/u-datalist": "^0.1.5",
     "composed-offset-position": "^0.0.6",
     "element-internals-polyfill": "^1.3.10",
@@ -166,20 +167,20 @@
     "@tailwindcss/postcss": "^4.0.3",
     "@types/node": "^22.7.4",
     "@types/qrcode": "^1.5.5",
+    "@types/react": "^19.1.2",
     "@types/webappsec-credential-management": "^0.6.9",
-    "@typescript-eslint/eslint-plugin": "^7.0.2",
-    "@typescript-eslint/parser": "^7.0.2",
-    "@vitejs/plugin-basic-ssl": "^1.1.0",
-    "@vitejs/plugin-legacy": "^5.3.1",
+    "@typescript-eslint/eslint-plugin": "^8.31.0",
+    "@typescript-eslint/parser": "^8.31.0",
+    "@vitejs/plugin-basic-ssl": "^2.0.0",
+    "@vitejs/plugin-legacy": "^6.1.0",
     "composed-offset-position": "^0.0.6",
     "concurrently": "^9.0.1",
-    "element-internals-polyfill": "^1.3.10",
-    "eslint": "^8.52.0",
+    "eslint": "^9.25.1",
     "eslint-plugin-storybook": "^0.11.3",
     "postcss": "^8.5.1",
     "prettier": "^3.5.3",
     "prettier-plugin-tailwindcss": "^0.6.11",
-    "rimraf": "^5.0.5",
+    "rimraf": "^6.0.1",
     "rollup": "^4.2.0",
     "rollup-plugin-postcss-lit": "^2.1.0",
     "storybook": "^8.6.0",