@folkehelseinstituttet/designsystem 0.1.0 → 0.2.0

package/{src/components/fhi-button/fhi-button.ts → fhi-button.js}

@@ -1,78 +1,34 @@
-import { html, css, LitElement } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-
-export const FhiButtonSelector = 'fhi-button';
-
-@customElement(FhiButtonSelector)
-export class FhiButton extends LitElement {
-  @property({ type: String, reflect: true }) color:
-    | 'accent'
-    | 'neutral'
-    | 'danger' = 'accent';
-
-  @property({ type: String, reflect: true }) variant:
-    | 'strong'
-    | 'subtle'
-    | 'outlined'
-    | 'text' = 'strong';
-
-  @property({ type: String, reflect: true }) size:
-    | 'large'
-    | 'medium'
-    | 'small' = 'medium';
-
-  @property({ type: Boolean, reflect: true }) disabled = false;
-
-  @property({ type: String }) type: 'button' | 'submit' | 'reset' = 'submit';
-
-  private _formButton!: HTMLButtonElement;
-  private _form!: HTMLFormElement | null;
-
+import { i as u, n as c, r as b, x as v, t as s } from "./property-BHe3YuYx.js";
+var g = Object.defineProperty, h = Object.getOwnPropertyDescriptor, l = (o, e, t, n) => {
+  for (var a = n > 1 ? void 0 : n ? h(e, t) : e, d = o.length - 1, i; d >= 0; d--)
+    (i = o[d]) && (a = (n ? i(e, t, a) : i(a)) || a);
+  return n && a && g(e, t, a), a;
+};
+const f = "fhi-button";
+let r = class extends b {
   constructor() {
-    super();
-    this._stopClickLeak = this._stopClickLeak.bind(this);
+    super(), this.color = "accent", this.variant = "strong", this.size = "medium", this.disabled = !1, this.type = "submit", this._stopClickLeak = this._stopClickLeak.bind(this);
   }
-
-  override connectedCallback(): void {
-    if (!!super.connectedCallback) {
-      super.connectedCallback();
-    }
-
-    this._form = this.closest('form');
+  connectedCallback() {
+    super.connectedCallback && super.connectedCallback(), this._form = this.closest("form");
   }
-
-  protected override firstUpdated(): void {
-    this._formButton = document.createElement('button');
-    this._formButton.addEventListener('click', this._stopClickLeak);
-    this.addEventListener('click', this._handleClick);
+  firstUpdated() {
+    this._formButton = document.createElement("button"), this._formButton.addEventListener("click", this._stopClickLeak), this.addEventListener("click", this._handleClick);
   }
-
-  private _handleClick(event: MouseEvent): void {
-    if (
-      (this.type === 'submit' || this.type === 'reset') &&
-      this._form &&
-      !event.defaultPrevented
-    ) {
-      this._formButton.type = this.type;
-      this._form?.appendChild(this._formButton);
-      this._formButton.click();
-      this._form?.removeChild(this._formButton);
-    }
+  _handleClick(o) {
+    var e, t;
+    (this.type === "submit" || this.type === "reset") && this._form && !o.defaultPrevented && (this._formButton.type = this.type, (e = this._form) == null || e.appendChild(this._formButton), this._formButton.click(), (t = this._form) == null || t.removeChild(this._formButton));
   }
-
-  private _stopClickLeak(event: MouseEvent): void {
-    if (event.target === this._formButton) {
-      event.stopImmediatePropagation();
-    }
+  _stopClickLeak(o) {
+    o.target === this._formButton && o.stopImmediatePropagation();
   }
-
   render() {
-    return html`<button ?disabled=${this.disabled} type=${this.type}>
+    return v`<button ?disabled=${this.disabled} type=${this.type}>
       <slot></slot>
     </button>`;
   }
-
-  static styles = css`
+};
+r.styles = u`
     :host {
       --dimension-border-radius: var(--fhi-border-radius-full);
       --dimension-border-width: var(--fhi-dimension-border-width);
@@ -123,22 +79,25 @@ export class FhiButton extends LitElement {
           var(--fhi-spacing-050) - var(--fhi-dimension-border-width)
         )
         calc(
-          var(--fhi-spacing-150) +
-            var(--fhi-spacing-050) - var(--fhi-dimension-border-width)
+          var(--fhi-spacing-150) + var(--fhi-spacing-050) - var(
+              --fhi-dimension-border-width
+            )
         );
       --dimension-padding-medium: calc(
           var(--fhi-spacing-100) - var(--fhi-dimension-border-width)
         )
         calc(
-          var(--fhi-spacing-200) +
-            var(--fhi-spacing-050) - var(--fhi-dimension-border-width)
+          var(--fhi-spacing-200) + var(--fhi-spacing-050) - var(
+              --fhi-dimension-border-width
+            )
         );
       --dimension-padding-large: calc(
           var(--fhi-spacing-200) - var(--fhi-dimension-border-width)
         )
         calc(
-          var(--fhi-spacing-300) +
-            var(--fhi-spacing-050) - var(--fhi-dimension-border-width)
+          var(--fhi-spacing-300) + var(--fhi-spacing-050) - var(
+              --fhi-dimension-border-width
+            )
         );
       --color-accent-strong-background: var(--fhi-color-accent-base-default);
       --color-accent-strong-border: var(--fhi-color-accent-base-default);
@@ -690,4 +649,26 @@ export class FhiButton extends LitElement {
       }
     }
   `;
-}
+l([
+  c({ type: String, reflect: !0 })
+], r.prototype, "color", 2);
+l([
+  c({ type: String, reflect: !0 })
+], r.prototype, "variant", 2);
+l([
+  c({ type: String, reflect: !0 })
+], r.prototype, "size", 2);
+l([
+  c({ type: Boolean, reflect: !0 })
+], r.prototype, "disabled", 2);
+l([
+  c({ type: String })
+], r.prototype, "type", 2);
+r = l([
+  s(f)
+], r);
+export {
+  r as FhiButton,
+  f as FhiButtonSelector
+};
+//# sourceMappingURL=fhi-button.js.map

package/fhi-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fhi-button.js","sources":["../../src/components/fhi-button/fhi-button.ts"],"sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nexport const FhiButtonSelector = 'fhi-button';\n\n@customElement(FhiButtonSelector)\nexport class FhiButton extends LitElement {\n  @property({ type: String, reflect: true }) color:\n    | 'accent'\n    | 'neutral'\n    | 'danger' = 'accent';\n\n  @property({ type: String, reflect: true }) variant:\n    | 'strong'\n    | 'subtle'\n    | 'outlined'\n    | 'text' = 'strong';\n\n  @property({ type: String, reflect: true }) size:\n    | 'large'\n    | 'medium'\n    | 'small' = 'medium';\n\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  @property({ type: String }) type: 'button' | 'submit' | 'reset' = 'submit';\n\n  private _formButton!: HTMLButtonElement;\n  private _form!: HTMLFormElement | null;\n\n  constructor() {\n    super();\n    this._stopClickLeak = this._stopClickLeak.bind(this);\n  }\n\n  override connectedCallback(): void {\n    if (!!super.connectedCallback) {\n      super.connectedCallback();\n    }\n\n    this._form = this.closest('form');\n  }\n\n  protected override firstUpdated(): void {\n    this._formButton = document.createElement('button');\n    this._formButton.addEventListener('click', this._stopClickLeak);\n    this.addEventListener('click', this._handleClick);\n  }\n\n  private _handleClick(event: MouseEvent): void {\n    if (\n      (this.type === 'submit' || this.type === 'reset') &&\n      this._form &&\n      !event.defaultPrevented\n    ) {\n      this._formButton.type = this.type;\n      this._form?.appendChild(this._formButton);\n      this._formButton.click();\n      this._form?.removeChild(this._formButton);\n    }\n  }\n\n  private _stopClickLeak(event: MouseEvent): void {\n    if (event.target === this._formButton) {\n      event.stopImmediatePropagation();\n    }\n  }\n\n  render() {\n    return html`<button ?disabled=${this.disabled} type=${this.type}>\n      <slot></slot>\n    </button>`;\n  }\n\n  static styles = css`\n    :host {\n      --dimension-border-radius: var(--fhi-border-radius-full);\n      --dimension-border-width: var(--fhi-dimension-border-width);\n      --typography-font-family: var(--fhi-font-family-roboto-flex);\n      --motion-transition: var(--fhi-motion-duration-quick)\n        var(--fhi-motion-ease-default);\n\n      --opacity-disabled: var(--fhi-opacity-disabled);\n\n      --typography-label-large-font-size: var(\n        --fhi-typography-label-large-font-size\n      );\n      --typography-label-medium-font-size: var(\n        --fhi-typography-label-medium-font-size\n      );\n      --typography-label-small-font-size: var(\n        --fhi-typography-label-medium-font-size\n      );\n      --typography-label-large-font-weight: var(\n        --fhi-typography-label-large-font-weight\n      );\n      --typography-label-medium-font-weight: var(\n        --fhi-typography-label-medium-font-weight\n      );\n      --typography-label-small-font-weight: var(\n        --fhi-typography-label-medium-font-weight\n      );\n      --typography-label-large-letter-spacing: var(\n        --fhi-typography-label-large-letter-spacing\n      );\n      --typography-label-medium-letter-spacing: var(\n        --fhi-typography-label-medium-letter-spacing\n      );\n      --typography-label-small-letter-spacing: var(\n        --fhi-typography-label-medium-letter-spacing\n      );\n      --typography-label-large-line-height: var(\n        --fhi-typography-label-large-line-height\n      );\n      --typography-label-small-line-height: var(\n        --fhi-typography-label-medium-line-height\n      );\n      --typography-label-medium-line-height: var(\n        --fhi-typography-label-medium-line-height\n      );\n\n      --dimension-padding-small: calc(\n          var(--fhi-spacing-050) - var(--fhi-dimension-border-width)\n        )\n        calc(\n          var(--fhi-spacing-150) + var(--fhi-spacing-050) - var(\n              --fhi-dimension-border-width\n            )\n        );\n      --dimension-padding-medium: calc(\n          var(--fhi-spacing-100) - var(--fhi-dimension-border-width)\n        )\n        calc(\n          var(--fhi-spacing-200) + var(--fhi-spacing-050) - var(\n              --fhi-dimension-border-width\n            )\n        );\n      --dimension-padding-large: calc(\n          var(--fhi-spacing-200) - var(--fhi-dimension-border-width)\n        )\n        calc(\n          var(--fhi-spacing-300) + var(--fhi-spacing-050) - var(\n              --fhi-dimension-border-width\n            )\n        );\n      --color-accent-strong-background: var(--fhi-color-accent-base-default);\n      --color-accent-strong-border: var(--fhi-color-accent-base-default);\n      --color-accent-strong: var(--fhi-color-accent-text-inverted);\n      --color-accent-strong-background-hover: var(\n        --fhi-color-accent-base-hover\n      );\n      --color-accent-strong-border-hover: var(--fhi-color-accent-base-hover);\n      --color-accent-strong-hover: var(--fhi-color-accent-text-inverted);\n      --color-accent-strong-background-active: var(\n        --fhi-color-accent-base-active\n      );\n      --color-accent-strong-border-active: var(--fhi-color-accent-base-hover);\n      --color-accent-strong-active: var(--fhi-color-accent-text-inverted);\n      --color-accent-strong-background-disabled: var(\n        --fhi-color-accent-base-default\n      );\n      --color-accent-strong-border-disabled: var(\n        --fhi-color-accent-base-default\n      );\n      --color-accent-strong-disabled: var(--fhi-color-accent-text-inverted);\n\n      --color-accent-subtle-background: var(--fhi-color-accent-surface-default);\n      --color-accent-subtle-border: var(--fhi-color-accent-surface-default);\n      --color-accent-subtle: var(--fhi-color-accent-text-subtle);\n      --color-accent-subtle-background-hover: var(\n        --fhi-color-accent-surface-hover\n      );\n      --color-accent-subtle-border-hover: var(--fhi-color-accent-surface-hover);\n      --color-accent-subtle-hover: var(--fhi-color-accent-text-default);\n      --color-accent-subtle-background-active: var(\n        --fhi-color-accent-surface-active\n      );\n      --color-accent-subtle-border-active: var(\n        --fhi-color-accent-surface-active\n      );\n      --color-accent-subtle-active: var(--fhi-color-accent-text-default);\n      --color-accent-subtle-background-disabled: var(\n        --fhi-color-accent-surface-default\n      );\n      --color-accent-subtle-border-disabled: var(\n        --fhi-color-accent-surface-default\n      );\n      --color-accent-subtle-disabled: var(--fhi-color-accent-text-subtle);\n\n      --color-accent-outlined-background: transparent;\n      --color-accent-outlined-border: var(--fhi-color-accent-border-subtle);\n      --color-accent-outlined: var(--fhi-color-accent-text-subtle);\n      --color-accent-outlined-background-hover: var(\n        --fhi-color-accent-surface-default\n      );\n      --color-accent-outlined-border-hover: var(\n        --fhi-color-accent-surface-default\n      );\n      --color-accent-outlined-hover: var(--fhi-color-accent-text-default);\n      --color-accent-outlined-background-active: var(\n        --fhi-color-accent-surface-hover\n      );\n      --color-accent-outlined-border-active: var(\n        --fhi-color-accent-surface-hover\n      );\n      --color-accent-outlined-active: var(--fhi-color-accent-text-default);\n      --color-accent-outlined-background-disabled: transparent;\n      --color-accent-outlined-border-disabled: var(\n        --fhi-color-accent-border-subtle\n      );\n      --color-accent-outlined-disabled: var(--fhi-color-accent-text-subtle);\n\n      --color-accent-text-background: transparent;\n      --color-accent-text-border: transparent;\n      --color-accent-text: var(--fhi-color-accent-text-subtle);\n      --color-accent-text-background-hover: var(\n        --fhi-color-accent-surface-default\n      );\n      --color-accent-text-border-hover: var(--fhi-color-accent-surface-default);\n      --color-accent-text-hover: var(--fhi-color-accent-text-default);\n      --color-accent-text-background-active: var(\n        --fhi-color-accent-surface-hover\n      );\n      --color-accent-text-border-active: var(--fhi-color-accent-surface-hover);\n      --color-accent-text-active: var(--fhi-color-accent-text-default);\n      --color-accent-text-background-disabled: transparent;\n      --color-accent-text-border-disabled: transparent;\n      --color-accent-text-disabled: var(--fhi-color-accent-text-default);\n\n      --color-neutral-strong-background: var(--fhi-color-neutral-base-default);\n      --color-neutral-strong-border: var(--fhi-color-neutral-base-default);\n      --color-neutral-strong: var(--fhi-color-neutral-text-inverted);\n      --color-neutral-strong-background-hover: var(\n        --fhi-color-neutral-base-hover\n      );\n      --color-neutral-strong-border-hover: var(--fhi-color-neutral-base-hover);\n      --color-neutral-strong-hover: var(--fhi-color-neutral-text-inverted);\n      --color-neutral-strong-background-active: var(\n        --fhi-color-neutral-base-active\n      );\n      --color-neutral-strong-border-active: var(--fhi-color-neutral-base-hover);\n      --color-neutral-strong-active: var(--fhi-color-neutral-text-inverted);\n      --color-neutral-strong-background-disabled: var(\n        --fhi-color-neutral-base-default\n      );\n      --color-neutral-strong-border-disabled: var(\n        --fhi-color-neutral-base-default\n      );\n      --color-neutral-strong-disabled: var(--fhi-color-neutral-text-inverted);\n\n      --color-neutral-subtle-background: var(\n        --fhi-color-neutral-surface-default\n      );\n      --color-neutral-subtle-border: var(--fhi-color-neutral-surface-default);\n      --color-neutral-subtle: var(--fhi-color-neutral-text-subtle);\n      --color-neutral-subtle-background-hover: var(\n        --fhi-color-neutral-surface-hover\n      );\n      --color-neutral-subtle-border-hover: var(\n        --fhi-color-neutral-surface-hover\n      );\n      --color-neutral-subtle-hover: var(--fhi-color-neutral-text-default);\n      --color-neutral-subtle-background-active: var(\n        --fhi-color-neutral-surface-active\n      );\n      --color-neutral-subtle-border-active: var(\n        --fhi-color-neutral-surface-active\n      );\n      --color-neutral-subtle-active: var(--fhi-color-neutral-text-default);\n      --color-neutral-subtle-background-disabled: var(\n        --fhi-color-neutral-surface-default\n      );\n      --color-neutral-subtle-border-disabled: var(\n        --fhi-color-neutral-surface-default\n      );\n      --color-neutral-subtle-disabled: var(--fhi-color-neutral-text-default);\n\n      --color-neutral-outlined-background: transparent;\n      --color-neutral-outlined-border: var(--fhi-color-neutral-border-subtle);\n      --color-neutral-outlined: var(--fhi-color-neutral-text-subtle);\n      --color-neutral-outlined-background-hover: var(\n        --fhi-color-neutral-surface-default\n      );\n      --color-neutral-outlined-border-hover: var(\n        --fhi-color-neutral-surface-default\n      );\n      --color-neutral-outlined-hover: var(--fhi-color-neutral-text-default);\n      --color-neutral-outlined-background-active: var(\n        --fhi-color-neutral-surface-hover\n      );\n      --color-neutral-outlined-border-active: var(\n        --fhi-color-neutral-surface-hover\n      );\n      --color-neutral-outlined-active: var(--fhi-color-neutral-text-default);\n      --color-neutral-outlined-background-disabled: transparent;\n      --color-neutral-outlined-border-disabled: var(\n        --fhi-color-neutral-border-subtle\n      );\n      --color-neutral-outlined-disabled: var(--fhi-color-neutral-text-subtle);\n\n      --color-neutral-text-background: transparent;\n      --color-neutral-text-border: transparent;\n      --color-neutral-text: var(--fhi-color-neutral-text-subtle);\n      --color-neutral-text-background-hover: var(\n        --fhi-color-neutral-surface-default\n      );\n      --color-neutral-text-border-hover: var(\n        --fhi-color-neutral-surface-default\n      );\n      --color-neutral-text-hover: var(--fhi-color-neutral-text-default);\n      --color-neutral-text-background-active: var(\n        --fhi-color-neutral-surface-hover\n      );\n      --color-neutral-text-border-active: var(\n        --fhi-color-neutral-surface-hover\n      );\n      --color-neutral-text-active: var(--fhi-color-neutral-text-default);\n      --color-neutral-text-background-disabled: transparent;\n      --color-neutral-text-border-disabled: transparent;\n      --color-neutral-text-disabled: var(--fhi-color-neutral-text-subtle);\n\n      --color-danger-strong-background: var(--fhi-color-danger-base-default);\n      --color-danger-strong-border: var(--fhi-color-danger-base-default);\n      --color-danger-strong: var(--fhi-color-danger-text-inverted);\n      --color-danger-strong-background-hover: var(\n        --fhi-color-danger-base-hover\n      );\n      --color-danger-strong-border-hover: var(--fhi-color-danger-base-hover);\n      --color-danger-strong-hover: var(--fhi-color-danger-text-inverted);\n      --color-danger-strong-background-active: var(\n        --fhi-color-danger-base-active\n      );\n      --color-danger-strong-border-active: var(--fhi-color-danger-base-hover);\n      --color-danger-strong-active: var(--fhi-color-danger-text-inverted);\n      --color-danger-strong-background-disabled: var(\n        --fhi-color-danger-base-default\n      );\n      --color-danger-strong-border-disabled: var(\n        --fhi-color-danger-base-default\n      );\n      --color-danger-strong-disabled: var(--fhi-color-danger-text-inverted);\n\n      --color-danger-subtle-background: var(--fhi-color-danger-surface-default);\n      --color-danger-subtle-border: var(--fhi-color-danger-surface-default);\n      --color-danger-subtle: var(--fhi-color-danger-text-subtle);\n      --color-danger-subtle-background-hover: var(\n        --fhi-color-danger-surface-hover\n      );\n      --color-danger-subtle-border-hover: var(--fhi-color-danger-surface-hover);\n      --color-danger-subtle-hover: var(--fhi-color-danger-text-default);\n      --color-danger-subtle-background-active: var(\n        --fhi-color-danger-surface-active\n      );\n      --color-danger-subtle-border-active: var(\n        --fhi-color-danger-surface-active\n      );\n      --color-danger-subtle-active: var(--fhi-color-danger-text-default);\n      --color-danger-subtle-background-disabled: var(\n        --fhi-color-danger-surface-default\n      );\n      --color-danger-subtle-border-disabled: var(\n        --fhi-color-danger-surface-default\n      );\n      --color-danger-subtle-disabled: var(--fhi-color-danger-text-subtle);\n\n      --color-danger-outlined-background: transparent;\n      --color-danger-outlined-border: var(--fhi-color-danger-border-subtle);\n      --color-danger-outlined: var(--fhi-color-danger-text-subtle);\n      --color-danger-outlined-background-hover: var(\n        --fhi-color-danger-surface-default\n      );\n      --color-danger-outlined-border-hover: var(\n        --fhi-color-danger-surface-default\n      );\n      --color-danger-outlined-hover: var(--fhi-color-danger-text-default);\n      --color-danger-outlined-background-active: var(\n        --fhi-color-danger-surface-hover\n      );\n      --color-danger-outlined-border-active: var(\n        --fhi-color-danger-surface-hover\n      );\n      --color-danger-outlined-active: var(--fhi-color-danger-text-default);\n      --color-danger-outlined-background-disabled: transparent;\n      --color-danger-outlined-border-disabled: var(\n        --fhi-color-danger-border-subtle\n      );\n      --color-danger-outlined-disabled: var(--fhi-color-danger-text-subtle);\n\n      --color-danger-text-background: transparent;\n      --color-danger-text-border: transparent;\n      --color-danger-text: var(--fhi-color-danger-text-subtle);\n      --color-danger-text-background-hover: var(\n        --fhi-color-danger-surface-default\n      );\n      --color-danger-text-border-hover: var(--fhi-color-danger-surface-default);\n      --color-danger-text-hover: var(--fhi-color-danger-text-default);\n      --color-danger-text-background-active: var(\n        --fhi-color-danger-surface-hover\n      );\n      --color-danger-text-border-active: var(--fhi-color-danger-surface-hover);\n      --color-danger-text-active: var(--fhi-color-danger-text-default);\n      --color-danger-text-background-disabled: transparent;\n      --color-danger-text-border-disabled: transparent;\n      --color-danger-text-disabled: var(--fhi-color-danger-text-subtle);\n\n      button {\n        border-radius: var(--dimension-border-radius);\n        border: solid var(--dimension-border-width);\n        font-family: var(--typography-font-family);\n        transition: var(--motion-transition);\n\n        cursor: pointer;\n        &:disabled {\n          opacity: var(--opacity-disabled);\n          cursor: not-allowed;\n        }\n      }\n    }\n\n    :host([size='large']) button {\n      font-size: var(--typography-label-large-font-size);\n      font-weight: var(--typography-label-large-font-weight);\n      line-height: var(--typography-label-large-line-height);\n      letter-spacing: var(--typography-label-large-letter-spacing);\n      padding: var(--dimension-padding-large);\n    }\n\n    :host([size='medium']) button {\n      font-size: var(--typography-label-medium-font-size);\n      font-weight: var(--typography-label-medium-font-weight);\n      line-height: var(--typography-label-medium-line-height);\n      letter-spacing: var(--typography-label-medium-letter-spacing);\n      padding: var(--dimension-padding-medium);\n    }\n\n    :host([size='small']) button {\n      font-size: var(--typography-label-small-font-size);\n      font-weight: var(--typography-label-small-font-weight);\n      line-height: var(--typography-label-small-line-height);\n      letter-spacing: var(--typography-label-small-letter-spacing);\n      padding: var(--dimension-padding-small);\n    }\n\n    :host([color='accent'][variant='strong']) button {\n      background-color: var(--color-accent-strong-background);\n      border-color: var(--color-accent-strong-border);\n      color: var(--color-accent-strong);\n      &:hover {\n        background-color: var(--color-accent-strong-background-hover);\n        border-color: var(--color-accent-strong-border-hover);\n        color: var(--color-accent-strong-hover);\n      }\n      &:active {\n        background-color: var(--color-accent-strong-background-active);\n        border-color: var(--color-accent-strong-border-active);\n        color: var(--color-accent-strong-active);\n      }\n      &:disabled {\n        background-color: var(--color-accent-strong-background-disabled);\n        border-color: var(--color-accent-strong-border-disabled);\n        color: var(--color-accent-strong-disabled);\n      }\n    }\n\n    :host([color='accent'][variant='subtle']) button {\n      background-color: var(--color-accent-subtle-background);\n      border-color: var(--color-accent-subtle-border);\n      color: var(--color-accent-subtle);\n      &:hover {\n        background-color: var(--color-accent-subtle-background-hover);\n        border-color: var(--color-accent-subtle-border-hover);\n        color: var(--color-accent-subtle-hover);\n      }\n      &:active {\n        background-color: var(--color-accent-subtle-background-active);\n        border-color: var(--color-accent-subtle-border-active);\n        color: var(--color-accent-subtle-active);\n      }\n      &:disabled {\n        background-color: var(--color-accent-subtle-background-disabled);\n        border-color: var(--color-accent-subtle-border-disabled);\n        color: var(--color-accent-subtle-disabled);\n      }\n    }\n\n    :host([color='accent'][variant='outlined']) button {\n      background-color: var(--color-accent-outlined-background);\n      border-color: var(--color-accent-outlined-border);\n      color: var(--color-accent-outlined);\n      &:hover {\n        background-color: var(--color-accent-outlined-background-hover);\n        border-color: var(--color-accent-outlined-border-hover);\n        color: var(--color-accent-outlined-hover);\n      }\n      &:active {\n        background-color: var(--color-accent-outlined-background-active);\n        border-color: var(--color-accent-outlined-border-active);\n        color: var(--color-accent-outlined-active);\n      }\n      &:disabled {\n        background-color: var(--color-accent-outlined-background-disabled);\n        border-color: var(--color-accent-outlined-border-disabled);\n        color: var(--color-accent-outlined-disabled);\n      }\n    }\n\n    :host([color='accent'][variant='text']) button {\n      background-color: var(--color-accent-text-background);\n      border-color: var(--color-accent-text-border);\n      color: var(--color-accent-text);\n      &:hover {\n        background-color: var(--color-accent-text-background-hover);\n        border-color: var(--color-accent-text-border-hover);\n        color: var(--color-accent-text-hover);\n      }\n      &:active {\n        background-color: var(--color-accent-text-background-active);\n        border-color: var(--color-accent-text-border-active);\n        color: var(--color-accent-text-active);\n      }\n      &:disabled {\n        background-color: var(--color-accent-text-background-disabled);\n        border-color: var(--color-accent-text-border-disabled);\n        color: var(--color-accent-text-disabled);\n      }\n    }\n\n    :host([color='neutral'][variant='strong']) button {\n      background-color: var(--color-neutral-strong-background);\n      border-color: var(--color-neutral-strong-border);\n      color: var(--color-neutral-strong);\n      &:hover {\n        background-color: var(--color-neutral-strong-background-hover);\n        border-color: var(--color-neutral-strong-border-hover);\n        color: var(--color-neutral-strong-hover);\n      }\n      &:active {\n        background-color: var(--color-neutral-strong-background-active);\n        border-color: var(--color-neutral-strong-border-active);\n        color: var(--color-neutral-strong-active);\n      }\n      &:disabled {\n        background-color: var(--color-neutral-strong-background-disabled);\n        border-color: var(--color-neutral-strong-border-disabled);\n        color: var(--color-neutral-strong-disabled);\n      }\n    }\n\n    :host([color='neutral'][variant='subtle']) button {\n      background-color: var(--color-neutral-subtle-background);\n      border-color: var(--color-neutral-subtle-border);\n      color: var(--color-neutral-subtle);\n      &:hover {\n        background-color: var(--color-neutral-subtle-background-hover);\n        border-color: var(--color-neutral-subtle-border-hover);\n        color: var(--color-neutral-subtle-hover);\n      }\n      &:active {\n        background-color: var(--color-neutral-subtle-background-active);\n        border-color: var(--color-neutral-subtle-border-active);\n        color: var(--color-neutral-subtle-active);\n      }\n      &:disabled {\n        background-color: var(--color-neutral-subtle-background-disabled);\n        border-color: var(--color-neutral-subtle-border-disabled);\n        color: var(--color-neutral-subtle-disabled);\n      }\n    }\n\n    :host([color='neutral'][variant='outlined']) button {\n      background-color: var(--color-neutral-outlined-background);\n      border-color: var(--color-neutral-outlined-border);\n      color: var(--color-neutral-outlined);\n      &:hover {\n        background-color: var(--color-neutral-outlined-background-hover);\n        border-color: var(--color-neutral-outlined-border-hover);\n        color: var(--color-neutral-outlined-hover);\n      }\n      &:active {\n        background-color: var(--color-neutral-outlined-background-active);\n        border-color: var(--color-neutral-outlined-border-active);\n        color: var(--color-neutral-outlined-active);\n      }\n      &:disabled {\n        background-color: var(--color-neutral-outlined-background-disabled);\n        border-color: var(--color-neutral-outlined-border-disabled);\n        color: var(--color-neutral-outlined-disabled);\n      }\n    }\n\n    :host([color='neutral'][variant='text']) button {\n      background-color: var(--color-neutral-text-background);\n      border-color: var(--color-neutral-text-border);\n      color: var(--color-neutral-text);\n      &:hover {\n        background-color: var(--color-neutral-text-background-hover);\n        border-color: var(--color-neutral-text-border-hover);\n        color: var(--color-neutral-text-hover);\n      }\n      &:active {\n        background-color: var(--color-neutral-text-background-active);\n        border-color: var(--color-neutral-text-border-active);\n        color: var(--color-neutral-text-active);\n      }\n      &:disabled {\n        background-color: var(--color-neutral-text-background-disabled);\n        border-color: var(--color-neutral-text-border-disabled);\n        color: var(--color-neutral-text-disabled);\n      }\n    }\n\n    :host([color='danger'][variant='strong']) button {\n      background-color: var(--color-danger-strong-background);\n      border-color: var(--color-danger-strong-border);\n      color: var(--color-danger-strong);\n      &:hover {\n        background-color: var(--color-danger-strong-background-hover);\n        border-color: var(--color-danger-strong-border-hover);\n        color: var(--color-danger-strong-hover);\n      }\n      &:active {\n        background-color: var(--color-danger-strong-background-active);\n        border-color: var(--color-danger-strong-border-active);\n        color: var(--color-danger-strong-active);\n      }\n      &:disabled {\n        background-color: var(--color-danger-strong-background-disabled);\n        border-color: var(--color-danger-strong-border-disabled);\n        color: var(--color-danger-strong-disabled);\n      }\n    }\n\n    :host([color='danger'][variant='subtle']) button {\n      background-color: var(--color-danger-subtle-background);\n      border-color: var(--color-danger-subtle-border);\n      color: var(--color-danger-subtle);\n      &:hover {\n        background-color: var(--color-danger-subtle-background-hover);\n        border-color: var(--color-danger-subtle-border-hover);\n        color: var(--color-danger-subtle-hover);\n      }\n      &:active {\n        background-color: var(--color-danger-subtle-background-active);\n        border-color: var(--color-danger-subtle-border-active);\n        color: var(--color-danger-subtle-active);\n      }\n      &:disabled {\n        background-color: var(--color-danger-subtle-background-disabled);\n        border-color: var(--color-danger-subtle-border-disabled);\n        color: var(--color-danger-subtle-disabled);\n      }\n    }\n\n    :host([color='danger'][variant='outlined']) button {\n      background-color: var(--color-danger-outlined-background);\n      border-color: var(--color-danger-outlined-border);\n      color: var(--color-danger-outlined);\n      &:hover {\n        background-color: var(--color-danger-outlined-background-hover);\n        border-color: var(--color-danger-outlined-border-hover);\n        color: var(--color-danger-outlined-hover);\n      }\n      &:active {\n        background-color: var(--color-danger-outlined-background-active);\n        border-color: var(--color-danger-outlined-border-active);\n        color: var(--color-danger-outlined-active);\n      }\n      &:disabled {\n        background-color: var(--color-danger-outlined-background-disabled);\n        border-color: var(--color-danger-outlined-border-disabled);\n        color: var(--color-danger-outlined-disabled);\n      }\n    }\n\n    :host([color='danger'][variant='text']) button {\n      background-color: var(--color-danger-text-background);\n      border-color: var(--color-danger-text-border);\n      color: var(--color-danger-text);\n      &:hover {\n        background-color: var(--color-danger-text-background-hover);\n        border-color: var(--color-danger-text-border-hover);\n        color: var(--color-danger-text-hover);\n      }\n      &:active {\n        background-color: var(--color-danger-text-background-active);\n        border-color: var(--color-danger-text-border-active);\n        color: var(--color-danger-text-active);\n      }\n      &:disabled {\n        background-color: var(--color-danger-text-background-disabled);\n        border-color: var(--color-danger-text-border-disabled);\n        color: var(--color-danger-text-disabled);\n      }\n    }\n  `;\n}\n"],"names":["FhiButtonSelector","FhiButton","LitElement","event","_a","_b","html","css","__decorateClass","property","customElement"],"mappings":";;;;;;AAGO,MAAMA,IAAoB;AAGpB,IAAAC,IAAN,cAAwBC,EAAW;AAAA,EAwBxC,cAAc;AACN,UAAA,GArBO,KAAA,QAAA,UAMF,KAAA,UAAA,UAKC,KAAA,OAAA,UAEyC,KAAA,WAAA,IAEW,KAAA,OAAA,UAOhE,KAAK,iBAAiB,KAAK,eAAe,KAAK,IAAI;AAAA,EAAA;AAAA,EAG5C,oBAA0B;AAC7B,IAAE,MAAM,qBACV,MAAM,kBAAkB,GAGrB,KAAA,QAAQ,KAAK,QAAQ,MAAM;AAAA,EAAA;AAAA,EAGf,eAAqB;AACjC,SAAA,cAAc,SAAS,cAAc,QAAQ,GAClD,KAAK,YAAY,iBAAiB,SAAS,KAAK,cAAc,GACzD,KAAA,iBAAiB,SAAS,KAAK,YAAY;AAAA,EAAA;AAAA,EAG1C,aAAaC,GAAyB;;AAEzC,KAAA,KAAK,SAAS,YAAY,KAAK,SAAS,YACzC,KAAK,SACL,CAACA,EAAM,qBAEF,KAAA,YAAY,OAAO,KAAK,OACxBC,IAAA,KAAA,UAAA,QAAAA,EAAO,YAAY,KAAK,cAC7B,KAAK,YAAY,MAAM,IAClBC,IAAA,KAAA,UAAA,QAAAA,EAAO,YAAY,KAAK;AAAA,EAC/B;AAAA,EAGM,eAAeF,GAAyB;AAC1C,IAAAA,EAAM,WAAW,KAAK,eACxBA,EAAM,yBAAyB;AAAA,EACjC;AAAA,EAGF,SAAS;AACP,WAAOG,sBAAyB,KAAK,QAAQ,SAAS,KAAK,IAAI;AAAA;AAAA;AAAA,EAAA;AAknBnE;AAjrBaL,EAoEJ,SAASM;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAnE2BC,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,GAAM,CAAA;AAAA,GAD9BR,EACgC,WAAA,SAAA,CAAA;AAKAO,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,GAAM,CAAA;AAAA,GAN9BR,EAMgC,WAAA,WAAA,CAAA;AAMAO,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,GAAM,CAAA;AAAA,GAZ9BR,EAYgC,WAAA,QAAA,CAAA;AAKCO,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,GAAM,CAAA;AAAA,GAjB/BR,EAiBiC,WAAA,YAAA,CAAA;AAEhBO,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GAnBfR,EAmBiB,WAAA,QAAA,CAAA;AAnBjBA,IAANO,EAAA;AAAA,EADNE,EAAcV,CAAiB;AAAA,GACnBC,CAAA;"}

package/fhi-text-input.js

@@ -0,0 +1,300 @@
+import { E as c, i as g, n, r as y, x as h, t as v } from "./property-BHe3YuYx.js";
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const b = (e, r, o) => (o.configurable = !0, o.enumerable = !0, Reflect.decorate && typeof r != "object" && Object.defineProperty(e, r, o), o);
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+function f(e, r) {
+  return (o, l, i) => {
+    const s = (p) => {
+      var d;
+      return ((d = p.renderRoot) == null ? void 0 : d.querySelector(e)) ?? null;
+    };
+    return b(o, l, { get() {
+      return s(this);
+    } });
+  };
+}
+/**
+ * @license
+ * Copyright 2018 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const u = (e) => e ?? c;
+var m = Object.defineProperty, x = Object.getOwnPropertyDescriptor, a = (e, r, o, l) => {
+  for (var i = l > 1 ? void 0 : l ? x(r, o) : r, s = e.length - 1, p; s >= 0; s--)
+    (p = e[s]) && (i = (l ? p(r, o, i) : p(i)) || i);
+  return l && i && m(r, o, i), i;
+};
+const _ = "fhi-text-input";
+let t = class extends y {
+  constructor() {
+    super(), this.label = void 0, this.message = void 0, this.placeholder = null, this.status = void 0, this.readonly = !1, this.disabled = !1, this._name = void 0, this._value = "", this._internals = this.attachInternals();
+  }
+  get name() {
+    return this._name;
+  }
+  set name(e) {
+    const r = this._name;
+    this._name = e, this.requestUpdate("name", r), this._internals.setFormValue(this._value);
+  }
+  get value() {
+    return this._value;
+  }
+  set value(e) {
+    const r = this._value;
+    this._value = e, this.requestUpdate("value", r), this._internals.setFormValue(this._value);
+  }
+  connectedCallback() {
+    super.connectedCallback(), this._internals.setFormValue(this.value);
+  }
+  onChange() {
+    this.dispatchEvent(
+      new Event("change", {
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  onInput() {
+    this.value = this._input.value, this._internals.setFormValue(this.value);
+  }
+  onKeyDown(e) {
+    e.key === "Enter" && this._internals.form && this._internals.form.requestSubmit();
+  }
+  formResetCallback() {
+    this.value = this.getAttribute("value") || "", this._internals.setFormValue(this.value);
+  }
+  render() {
+    return h`
+      ${this.label && h`<label for="input-element">${this.label}</label>`}
+      <input
+        id="input-element"
+        name=${u(this.name)}
+        placeholder=${u(this.placeholder)}
+        .value=${this.value}
+        ?readonly=${this.readonly}
+        ?disabled=${this.disabled}
+        @change=${this.onChange}
+        @input=${this.onInput}
+        @keydown=${this.onKeyDown}
+      />
+      ${this.message ? h`<p class="message">${this.message}</p>` : ""}
+    `;
+  }
+};
+t.formAssociated = !0;
+t.styles = g`
+    :host {
+      --typography-font-family: var(--fhi-font-family-roboto-flex);
+
+      --opacity-disabled: var(--fhi-opacity-disabled);
+
+      /* label */
+      --color-label-text: var(--fhi-color-neutral-text-default);
+      --color-label-text-error: var(--fhi-color-danger-text-default);
+
+      --typography-label-font-weight: var(
+        --fhi-typography-label-small-font-weight
+      );
+      --typography-label-font-size: var(--fhi-typography-label-small-font-size);
+      --typography-label-line-height: var(
+        --fhi-typography-label-small-line-height
+      );
+      --typography-label-letter-spacing: var(
+        --fhi-typography-label-small-letter-spacing
+      );
+
+      --dimension-label-padding-bottom: var(--fhi-spacing-050);
+
+      /* input */
+      --color-input-placeholder: var(--fhi-color-neutral-base-default);
+      --color-input-text: var(--fhi-color-neutral-text-default);
+      --color-input-text-error: var(--fhi-color-danger-text-default);
+      --color-input-background: var(--fhi-color-neutral-background-default);
+      --color-input-background-active: var(
+        --fhi-color-accent-background-default
+      );
+      --color-input-background-hover: var(--fhi-color-accent-background-subtle);
+      --color-input-background-error: var(
+        --fhi-color-danger-background-default
+      );
+      --color-input-border: var(--fhi-color-neutral-border-default);
+      --color-input-border-hover: var(--fhi-color-accent-border-default);
+      --color-input-border-active: var(--fhi-color-accent-border-strong);
+      --color-input-border-error: var(--fhi-color-danger-border-strong);
+      --color-input-border-disabled: var(--fhi-color-neutral-border-default);
+
+      --typography-input-font-weight: var(
+        --fhi-typography-body-medium-font-weight
+      );
+      --typography-input-font-size: var(--fhi-typography-body-medium-font-size);
+      --typography-input-line-height: var(
+        --fhi-typography-body-medium-line-height
+      );
+      --typography-input-letter-spacing: var(
+        --fhi-typography-body-medium-letter-spacing
+      );
+
+      --dimension-input-border-width: var(--fhi-dimension-border-width);
+
+      --dimension-input-height: var(--fhi-spacing-500);
+      --dimension-input-border-radius: var(--fhi-border-radius-050);
+      --dimension-input-padding-left: var(--fhi-spacing-150);
+      --dimension-input-padding-right: var(--fhi-spacing-150);
+
+      --motion-input-transition: all var(--fhi-motion-ease-default)
+        var(--fhi-motion-duration-quick);
+
+      /* message */
+      --color-message-text: var(--fhi-color-neutral-text-default);
+      --color-message-text-error: var(--fhi-color-danger-text-subtle);
+
+      --typography-message-font-weight: var(
+        --fhi-typography-body-small-font-weight
+      );
+      --typography-message-font-size: var(
+        --fhi-typography-body-small-font-size
+      );
+      --typography-message-line-height: var(
+        --fhi-typography-body-small-line-height
+      );
+      --typography-message-letter-spacing: var(
+        --fhi-typography-body-small-letter-spacing
+      );
+
+      --dimension-message-margin-top: var(--fhi-spacing-050);
+    }
+
+    :host {
+      display: flex;
+      flex-direction: column;
+      font-family: var(--typography-font-family);
+
+      label {
+        font-weight: var(--typography-label-font-weight);
+        font-size: var(--typography-label-font-size);
+        line-height: var(--typography-label-line-height);
+        letter-spacing: var(--typography-label-letter-spacing);
+        color: var(--color-label-text);
+        padding-bottom: var(--dimension-label-padding-bottom);
+      }
+
+      input {
+        box-sizing: border-box;
+        height: var(--dimension-input-height);
+        border: var(--dimension-input-border-width) solid
+          var(--color-input-border);
+        border-radius: var(--dimension-input-border-radius);
+        padding: 0 var(--dimension-input-padding-right) 0
+          var(--dimension-input-padding-left);
+        color: var(--color-input-text);
+        background-color: var(--color-input-background);
+        font-family: var(--typography-font-family);
+        font-weight: var(--typography-input-font-weight);
+        font-size: var(--typography-input-font-size);
+        line-height: var(--typography-input-line-height);
+        letter-spacing: var(--typography-input-letter-spacing);
+        transition: var(--motion-input-transition);
+        &:hover {
+          border-color: var(--color-input-border-hover);
+          background-color: var(--color-input-background-hover);
+        }
+        &:focus {
+          border-color: var(--color-input-border-active);
+          background-color: var(--color-input-background-active);
+        }
+        &::placeholder {
+          color: var(--color-input-placeholder);
+        }
+      }
+
+      .message {
+        margin: var(--dimension-message-margin-top) 0 0 0;
+        color: var(--color-message-text);
+        font-weight: var(--typography-message-font-weight);
+        font-size: var(--typography-message-font-size);
+        line-height: var(--typography-message-line-height);
+        letter-spacing: var(--typography-message-letter-spacing);
+      }
+    }
+
+    :host([disabled]) {
+      opacity: var(--opacity-disabled);
+      cursor: not-allowed;
+      * {
+        cursor: not-allowed;
+      }
+      input {
+        &:hover {
+          border-color: var(--color-input-border);
+          background-color: var(--color-input-background);
+        }
+      }
+    }
+
+    :host([readonly]:not([disabled])) {
+      input {
+        border: unset;
+        border-radius: unset;
+        background-color: unset;
+        border-left: var(--dimension-input-border-width) solid
+          var(--color-input-border);
+      }
+    }
+
+    :host([status='error']:not([disabled]):not([readonly])) {
+      label {
+        color: var(--color-label-text-error);
+      }
+      input {
+        border-color: var(--color-input-border-error);
+        background-color: var(--color-input-background-error);
+        color: var(--color-input-text-error);
+      }
+      .message {
+        color: var(--color-message-text-error);
+      }
+    }
+  `;
+a([
+  n({ type: String })
+], t.prototype, "label", 2);
+a([
+  n({ type: String })
+], t.prototype, "message", 2);
+a([
+  n({ type: String })
+], t.prototype, "placeholder", 2);
+a([
+  n({ type: String, reflect: !0 })
+], t.prototype, "status", 2);
+a([
+  n({ type: Boolean, reflect: !0 })
+], t.prototype, "readonly", 2);
+a([
+  n({ type: Boolean, reflect: !0 })
+], t.prototype, "disabled", 2);
+a([
+  f("#input-element")
+], t.prototype, "_input", 2);
+a([
+  n({ type: String, reflect: !0 })
+], t.prototype, "name", 1);
+a([
+  n({ type: String })
+], t.prototype, "value", 1);
+t = a([
+  v(_)
+], t);
+export {
+  t as FhiTextInput,
+  _ as FhiTextInputSelector
+};
+//# sourceMappingURL=fhi-text-input.js.map

package/fhi-text-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fhi-text-input.js","sources":["../../../../node_modules/.pnpm/@lit+reactive-element@2.0.4/node_modules/@lit/reactive-element/decorators/base.js","../../../../node_modules/.pnpm/@lit+reactive-element@2.0.4/node_modules/@lit/reactive-element/decorators/query.js","../../../../node_modules/.pnpm/lit-html@3.2.1/node_modules/lit-html/directives/if-defined.js","../../src/components/fhi-text-input/fhi-text-input.ts"],"sourcesContent":["/**\n * @license\n * Copyright 2017 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */\nconst e=(e,t,c)=>(c.configurable=!0,c.enumerable=!0,Reflect.decorate&&\"object\"!=typeof t&&Object.defineProperty(e,t,c),c);export{e as desc};\n//# sourceMappingURL=base.js.map\n","import{desc as t}from\"./base.js\";\n/**\n * @license\n * Copyright 2017 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */function e(e,r){return(n,s,i)=>{const o=t=>t.renderRoot?.querySelector(e)??null;if(r){const{get:e,set:r}=\"object\"==typeof s?n:i??(()=>{const t=Symbol();return{get(){return this[t]},set(e){this[t]=e}}})();return t(n,s,{get(){let t=e.call(this);return void 0===t&&(t=o(this),(null!==t||this.hasUpdated)&&r.call(this,t)),t}})}return t(n,s,{get(){return o(this)}})}}export{e as query};\n//# sourceMappingURL=query.js.map\n","import{nothing as t}from\"../lit-html.js\";\n/**\n * @license\n * Copyright 2018 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */const o=o=>o??t;export{o as ifDefined};\n//# sourceMappingURL=if-defined.js.map\n","import { html, css, LitElement } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nexport const FhiTextInputSelector = 'fhi-text-input';\n\n@customElement(FhiTextInputSelector)\nexport class FhiTextInput extends LitElement {\n  static readonly formAssociated = true;\n\n  @property({ type: String }) label?: string = undefined;\n\n  @property({ type: String }) message?: string = undefined;\n\n  @property({ type: String }) placeholder?: string | null = null;\n\n  @property({ type: String, reflect: true }) status?: 'error' = undefined;\n\n  @property({ type: Boolean, reflect: true }) readonly? = false;\n\n  @property({ type: Boolean, reflect: true }) disabled? = false;\n\n  @query('#input-element') _input!: HTMLInputElement;\n\n  private _name?: string = undefined;\n\n  @property({ type: String, reflect: true })\n  get name(): string | undefined {\n    return this._name;\n  }\n  set name(newName: string) {\n    const oldName = this._name;\n    this._name = newName;\n    this.requestUpdate('name', oldName);\n    this._internals.setFormValue(this._value);\n  }\n\n  private _value: string = '';\n\n  @property({ type: String })\n  get value(): string {\n    return this._value;\n  }\n\n  set value(newValue: string) {\n    const oldValue = this._value;\n    this._value = newValue;\n    this.requestUpdate('value', oldValue);\n    this._internals.setFormValue(this._value);\n  }\n\n  private _internals: ElementInternals;\n\n  constructor() {\n    super();\n    this._internals = this.attachInternals();\n  }\n\n  public connectedCallback(): void {\n    super.connectedCallback();\n    this._internals.setFormValue(this.value);\n  }\n\n  public onChange(): void {\n    this.dispatchEvent(\n      new Event('change', {\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  public onInput(): void {\n    this.value = this._input.value;\n    this._internals.setFormValue(this.value);\n  }\n\n  public onKeyDown(event: KeyboardEvent): void {\n    if (event.key === 'Enter' && this._internals.form) {\n      this._internals.form!.requestSubmit();\n    }\n  }\n\n  public formResetCallback(): void {\n    this.value = this.getAttribute('value') || '';\n    this._internals.setFormValue(this.value);\n  }\n\n  render() {\n    return html`\n      ${this.label && html`<label for=\"input-element\">${this.label}</label>`}\n      <input\n        id=\"input-element\"\n        name=${ifDefined(this.name)}\n        placeholder=${ifDefined(this.placeholder)}\n        .value=${this.value}\n        ?readonly=${this.readonly}\n        ?disabled=${this.disabled}\n        @change=${this.onChange}\n        @input=${this.onInput}\n        @keydown=${this.onKeyDown}\n      />\n      ${this.message ? html`<p class=\"message\">${this.message}</p>` : ''}\n    `;\n  }\n\n  static styles = css`\n    :host {\n      --typography-font-family: var(--fhi-font-family-roboto-flex);\n\n      --opacity-disabled: var(--fhi-opacity-disabled);\n\n      /* label */\n      --color-label-text: var(--fhi-color-neutral-text-default);\n      --color-label-text-error: var(--fhi-color-danger-text-default);\n\n      --typography-label-font-weight: var(\n        --fhi-typography-label-small-font-weight\n      );\n      --typography-label-font-size: var(--fhi-typography-label-small-font-size);\n      --typography-label-line-height: var(\n        --fhi-typography-label-small-line-height\n      );\n      --typography-label-letter-spacing: var(\n        --fhi-typography-label-small-letter-spacing\n      );\n\n      --dimension-label-padding-bottom: var(--fhi-spacing-050);\n\n      /* input */\n      --color-input-placeholder: var(--fhi-color-neutral-base-default);\n      --color-input-text: var(--fhi-color-neutral-text-default);\n      --color-input-text-error: var(--fhi-color-danger-text-default);\n      --color-input-background: var(--fhi-color-neutral-background-default);\n      --color-input-background-active: var(\n        --fhi-color-accent-background-default\n      );\n      --color-input-background-hover: var(--fhi-color-accent-background-subtle);\n      --color-input-background-error: var(\n        --fhi-color-danger-background-default\n      );\n      --color-input-border: var(--fhi-color-neutral-border-default);\n      --color-input-border-hover: var(--fhi-color-accent-border-default);\n      --color-input-border-active: var(--fhi-color-accent-border-strong);\n      --color-input-border-error: var(--fhi-color-danger-border-strong);\n      --color-input-border-disabled: var(--fhi-color-neutral-border-default);\n\n      --typography-input-font-weight: var(\n        --fhi-typography-body-medium-font-weight\n      );\n      --typography-input-font-size: var(--fhi-typography-body-medium-font-size);\n      --typography-input-line-height: var(\n        --fhi-typography-body-medium-line-height\n      );\n      --typography-input-letter-spacing: var(\n        --fhi-typography-body-medium-letter-spacing\n      );\n\n      --dimension-input-border-width: var(--fhi-dimension-border-width);\n\n      --dimension-input-height: var(--fhi-spacing-500);\n      --dimension-input-border-radius: var(--fhi-border-radius-050);\n      --dimension-input-padding-left: var(--fhi-spacing-150);\n      --dimension-input-padding-right: var(--fhi-spacing-150);\n\n      --motion-input-transition: all var(--fhi-motion-ease-default)\n        var(--fhi-motion-duration-quick);\n\n      /* message */\n      --color-message-text: var(--fhi-color-neutral-text-default);\n      --color-message-text-error: var(--fhi-color-danger-text-subtle);\n\n      --typography-message-font-weight: var(\n        --fhi-typography-body-small-font-weight\n      );\n      --typography-message-font-size: var(\n        --fhi-typography-body-small-font-size\n      );\n      --typography-message-line-height: var(\n        --fhi-typography-body-small-line-height\n      );\n      --typography-message-letter-spacing: var(\n        --fhi-typography-body-small-letter-spacing\n      );\n\n      --dimension-message-margin-top: var(--fhi-spacing-050);\n    }\n\n    :host {\n      display: flex;\n      flex-direction: column;\n      font-family: var(--typography-font-family);\n\n      label {\n        font-weight: var(--typography-label-font-weight);\n        font-size: var(--typography-label-font-size);\n        line-height: var(--typography-label-line-height);\n        letter-spacing: var(--typography-label-letter-spacing);\n        color: var(--color-label-text);\n        padding-bottom: var(--dimension-label-padding-bottom);\n      }\n\n      input {\n        box-sizing: border-box;\n        height: var(--dimension-input-height);\n        border: var(--dimension-input-border-width) solid\n          var(--color-input-border);\n        border-radius: var(--dimension-input-border-radius);\n        padding: 0 var(--dimension-input-padding-right) 0\n          var(--dimension-input-padding-left);\n        color: var(--color-input-text);\n        background-color: var(--color-input-background);\n        font-family: var(--typography-font-family);\n        font-weight: var(--typography-input-font-weight);\n        font-size: var(--typography-input-font-size);\n        line-height: var(--typography-input-line-height);\n        letter-spacing: var(--typography-input-letter-spacing);\n        transition: var(--motion-input-transition);\n        &:hover {\n          border-color: var(--color-input-border-hover);\n          background-color: var(--color-input-background-hover);\n        }\n        &:focus {\n          border-color: var(--color-input-border-active);\n          background-color: var(--color-input-background-active);\n        }\n        &::placeholder {\n          color: var(--color-input-placeholder);\n        }\n      }\n\n      .message {\n        margin: var(--dimension-message-margin-top) 0 0 0;\n        color: var(--color-message-text);\n        font-weight: var(--typography-message-font-weight);\n        font-size: var(--typography-message-font-size);\n        line-height: var(--typography-message-line-height);\n        letter-spacing: var(--typography-message-letter-spacing);\n      }\n    }\n\n    :host([disabled]) {\n      opacity: var(--opacity-disabled);\n      cursor: not-allowed;\n      * {\n        cursor: not-allowed;\n      }\n      input {\n        &:hover {\n          border-color: var(--color-input-border);\n          background-color: var(--color-input-background);\n        }\n      }\n    }\n\n    :host([readonly]:not([disabled])) {\n      input {\n        border: unset;\n        border-radius: unset;\n        background-color: unset;\n        border-left: var(--dimension-input-border-width) solid\n          var(--color-input-border);\n      }\n    }\n\n    :host([status='error']:not([disabled]):not([readonly])) {\n      label {\n        color: var(--color-label-text-error);\n      }\n      input {\n        border-color: var(--color-input-border-error);\n        background-color: var(--color-input-background-error);\n        color: var(--color-input-text-error);\n      }\n      .message {\n        color: var(--color-message-text-error);\n      }\n    }\n  `;\n}\n"],"names":["e","t","c","n","s","o","_a","FhiTextInputSelector","FhiTextInput","LitElement","newName","oldName","newValue","oldValue","event","html","ifDefined","css","__decorateClass","property","query","customElement"],"mappings":";AAAA;AAAA;AAAA;AAAA;AAAA;AAKA,MAAMA,IAAE,CAAC,GAAEC,GAAEC,OAAKA,EAAE,eAAa,IAAGA,EAAE,aAAW,IAAG,QAAQ,YAAoB,OAAOD,KAAjB,YAAoB,OAAO,eAAe,GAAEA,GAAEC,CAAC,GAAEA;ACJvH;AAAA;AAAA;AAAA;AAAA;AAIG,SAASF,EAAE,GAAE,GAAE;AAAC,SAAM,CAACG,GAAEC,GAAE,MAAI;AAAC,UAAMC,IAAE,CAAAJ,MAAC;;AAAE,eAAAK,IAAAL,EAAE,eAAF,gBAAAK,EAAc,cAAc,OAAI;AAAA;AAAwP,WAAOL,EAAEE,GAAEC,GAAE,EAAC,MAAK;AAAC,aAAOC,EAAE,IAAI;AAAA,IAAC,EAAC,CAAC;AAAA,EAAC;AAAC;ACJ5W;AAAA;AAAA;AAAA;AAAA;AAIG,MAAMA,IAAE,CAAAA,MAAGA,KAAGJ;;;;;;ACDV,MAAMM,IAAuB;AAGvB,IAAAC,IAAN,cAA2BC,EAAW;AAAA,EA8C3C,cAAc;AACN,UAAA,GA5CqC,KAAA,QAAA,QAEE,KAAA,UAAA,QAEW,KAAA,cAAA,MAEI,KAAA,SAAA,QAEN,KAAA,WAAA,IAEA,KAAA,WAAA,IAIxD,KAAQ,QAAiB,QAazB,KAAQ,SAAiB,IAkBlB,KAAA,aAAa,KAAK,gBAAgB;AAAA,EAAA;AAAA,EA5BzC,IAAI,OAA2B;AAC7B,WAAO,KAAK;AAAA,EAAA;AAAA,EAEd,IAAI,KAAKC,GAAiB;AACxB,UAAMC,IAAU,KAAK;AACrB,SAAK,QAAQD,GACR,KAAA,cAAc,QAAQC,CAAO,GAC7B,KAAA,WAAW,aAAa,KAAK,MAAM;AAAA,EAAA;AAAA,EAM1C,IAAI,QAAgB;AAClB,WAAO,KAAK;AAAA,EAAA;AAAA,EAGd,IAAI,MAAMC,GAAkB;AAC1B,UAAMC,IAAW,KAAK;AACtB,SAAK,SAASD,GACT,KAAA,cAAc,SAASC,CAAQ,GAC/B,KAAA,WAAW,aAAa,KAAK,MAAM;AAAA,EAAA;AAAA,EAUnC,oBAA0B;AAC/B,UAAM,kBAAkB,GACnB,KAAA,WAAW,aAAa,KAAK,KAAK;AAAA,EAAA;AAAA,EAGlC,WAAiB;AACjB,SAAA;AAAA,MACH,IAAI,MAAM,UAAU;AAAA,QAClB,SAAS;AAAA,QACT,UAAU;AAAA,MACX,CAAA;AAAA,IACH;AAAA,EAAA;AAAA,EAGK,UAAgB;AAChB,SAAA,QAAQ,KAAK,OAAO,OACpB,KAAA,WAAW,aAAa,KAAK,KAAK;AAAA,EAAA;AAAA,EAGlC,UAAUC,GAA4B;AAC3C,IAAIA,EAAM,QAAQ,WAAW,KAAK,WAAW,QACtC,KAAA,WAAW,KAAM,cAAc;AAAA,EACtC;AAAA,EAGK,oBAA0B;AAC/B,SAAK,QAAQ,KAAK,aAAa,OAAO,KAAK,IACtC,KAAA,WAAW,aAAa,KAAK,KAAK;AAAA,EAAA;AAAA,EAGzC,SAAS;AACA,WAAAC;AAAAA,QACH,KAAK,SAASA,+BAAkC,KAAK,KAAK,UAAU;AAAA;AAAA;AAAA,eAG7DC,EAAU,KAAK,IAAI,CAAC;AAAA,sBACbA,EAAU,KAAK,WAAW,CAAC;AAAA,iBAChC,KAAK,KAAK;AAAA,oBACP,KAAK,QAAQ;AAAA,oBACb,KAAK,QAAQ;AAAA,kBACf,KAAK,QAAQ;AAAA,iBACd,KAAK,OAAO;AAAA,mBACV,KAAK,SAAS;AAAA;AAAA,QAEzB,KAAK,UAAUD,uBAA0B,KAAK,OAAO,SAAS,EAAE;AAAA;AAAA,EAAA;AAiLxE;AAhRaP,EACK,iBAAiB;AADtBA,EAmGJ,SAASS;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAhGYC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GAHfX,EAGiB,WAAA,SAAA,CAAA;AAEAU,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GALfX,EAKiB,WAAA,WAAA,CAAA;AAEAU,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GAPfX,EAOiB,WAAA,eAAA,CAAA;AAEeU,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,GAAM,CAAA;AAAA,GAT9BX,EASgC,WAAA,UAAA,CAAA;AAECU,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,GAAM,CAAA;AAAA,GAX/BX,EAWiC,WAAA,YAAA,CAAA;AAEAU,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,GAAM,CAAA;AAAA,GAb/BX,EAaiC,WAAA,YAAA,CAAA;AAEnBU,EAAA;AAAA,EAAxBE,EAAM,gBAAgB;AAAA,GAfZZ,EAec,WAAA,UAAA,CAAA;AAKrBU,EAAA;AAAA,EADHC,EAAS,EAAE,MAAM,QAAQ,SAAS,GAAM,CAAA;AAAA,GAnB9BX,EAoBP,WAAA,QAAA,CAAA;AAaAU,EAAA;AAAA,EADHC,EAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GAhCfX,EAiCP,WAAA,SAAA,CAAA;AAjCOA,IAANU,EAAA;AAAA,EADNG,EAAcd,CAAoB;AAAA,GACtBC,CAAA;","x_google_ignoreList":[0,1,2]}

package/index.js

@@ -0,0 +1,9 @@
+import { FhiTextInput as o, FhiTextInputSelector as r } from "./fhi-text-input.js";
+import { FhiButton as i, FhiButtonSelector as n } from "./fhi-button.js";
+export {
+  i as FhiButton,
+  n as FhiButtonSelector,
+  o as FhiTextInput,
+  r as FhiTextInputSelector
+};
+//# sourceMappingURL=index.js.map

package/{dist/npm/index.js.map → index.js.map}

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/package.json

@@ -2,7 +2,7 @@
   "title": "FHI Designsystem",
   "author": "FHI Designsystem team",
   "name": "@folkehelseinstituttet/designsystem",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "The official design system for the Norwegian Institute of Public Health implemented as web components",
   "keywords": [
     "fhi",
@@ -41,7 +41,7 @@
     "build:npm": "tsc && cross-env DEPLOY_TARGET=npm vite build",
     "storybook": "storybook dev -p 6006",
     "storybook:build": "storybook build",
-    "test": "wtr ./**/*.test.ts --node-resolve --playwright --browsers chromium firefox webkit",
+    "test": "wtr ./**/*.test.ts --node-resolve --playwright --browsers chromium webkit",
     "lint": "pnpm lint:eslint && pnpm lint:prettier",
     "lint:eslint": "eslint \"**/*.{js,ts}\"",
     "lint:prettier": "prettier \"**/*.js\" --check --ignore-path .gitignore",