npm - @folkehelseinstituttet/designsystem - Versions diffs - 0.2.2 → 0.2.3 - Mend

@folkehelseinstituttet/designsystem 0.2.2 → 0.2.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/README.md CHANGED Viewed

@@ -30,11 +30,4 @@ Kjør `pnpm test`
 Kjør `pnpm build`
-#### Nye komponenter
-Om du har lagt til en ny komponent, pass på at den:
-- er referert i `build.lib.entry` objektet inne i "switch case"-en `npm`, i filen `./vite.config.js`
-- blir eksportert i filen `./library.ts`
 Mer informasjon om hvordan opprette nye komponenter finnes i vår ["Hvordan hjelpe til"](../../CONTRIBUTING.md#hvordan-utvikle-en-ny-komponent)-guide.

package/fhi-button.js CHANGED Viewed

@@ -10,7 +10,7 @@ let e = class extends b {
     super(), this.color = "accent", this.variant = "strong", this.size = "medium", this.disabled = !1, this.type = "submit", this._internals = this.attachInternals();
   }
   connectedCallback() {
-    super.connectedCallback(), this.onkeyup = this._handleKeyup.bind(this), this.onkeydown = this._handleKeydown.bind(this);
+    super.connectedCallback(), this.onkeyup = this._handleKeyup.bind(this), this.onkeydown = this._handleKeydown.bind(this), this.onselectstart = this._handleSelectStart.bind(this);
   }
   click() {
     this._handleClick();
@@ -31,6 +31,9 @@ let e = class extends b {
   _handleKeydown(r) {
     r.key === "Enter" && this._handleClick(r);
   }
+  _handleSelectStart() {
+    return !1;
+  }
   render() {
     return v`<button
       ?disabled=${this.disabled}

package/fhi-button.js.map CHANGED Viewed

	@@ -1 +1 @@
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 static readonly formAssociated = true;\n\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 _internals: ElementInternals;\n\n constructor() {\n super();\n this._internals = this.attachInternals();\n }\n\n connectedCallback(): void {\n super.connectedCallback();\n\n this.onkeyup = this._handleKeyup.bind(this);\n this.onkeydown = this._handleKeydown.bind(this);\n }\n\n click(): void {\n this._handleClick();\n }\n\n private _handleClick(event?: MouseEvent \| KeyboardEvent): void {\n event?.preventDefault();\n event?.stopPropagation();\n\n if (this.disabled) {\n return;\n }\n\n this.dispatchEvent(\n new MouseEvent('click', { bubbles: true, composed: true }),\n );\n\n if (this.type === 'submit') {\n this._internals.form?.requestSubmit();\n }\n\n if (this.type === 'reset') {\n this._internals.form?.reset();\n }\n }\n\n private _handleKeyup(event: KeyboardEvent): void {\n if (event.key === ' ' \|\| event.key === 'Spacebar') {\n this._handleClick(event);\n\n const target = event.target as HTMLElement \| null;\n target?.blur();\n target?.focus();\n }\n }\n\n private _handleKeydown(event: KeyboardEvent): void {\n if (event.key === 'Enter') {\n this._handleClick(event);\n }\n }\n\n render() {\n return html`<button\n ?disabled=${this.disabled}\n type=${this.type}\n @keyup=${this._handleKeyup}\n @keydown=${this._handleKeydown}\n @click=${this._handleClick}\n >\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-active);\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(\n --fhi-color-neutral-base-active\n );\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-active);\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","target","html","css","__decorateClass","property","customElement"],"mappings":";;;;;;AAGO,MAAMA,IAAoB;AAGpB,IAAAC,IAAN,cAAwBC,EAAW;AAAA,EAyBxC,cAAc;AACN,UAAA,GApBO,KAAA,QAAA,UAMF,KAAA,UAAA,UAKC,KAAA,OAAA,UAEyC,KAAA,WAAA,IAEW,KAAA,OAAA,UAM3D,KAAA,aAAa,KAAK,gBAAgB;AAAA,EAAA;AAAA,EAGzC,oBAA0B;AACxB,UAAM,kBAAkB,GAExB,KAAK,UAAU,KAAK,aAAa,KAAK,IAAI,GAC1C,KAAK,YAAY,KAAK,eAAe,KAAK,IAAI;AAAA,EAAA;AAAA,EAGhD,QAAc;AACZ,SAAK,aAAa;AAAA,EAAA;AAAA,EAGZ,aAAaC,GAA0C;;AAI7D,IAHAA,KAAA,QAAAA,EAAO,kBACPA,KAAA,QAAAA,EAAO,mBAEH,MAAK,aAIJ,KAAA;AAAA,MACH,IAAI,WAAW,SAAS,EAAE,SAAS,IAAM,UAAU,GAAM,CAAA;AAAA,IAC3D,GAEI,KAAK,SAAS,cACXC,IAAA,KAAA,WAAW,SAAX,QAAAA,EAAiB,kBAGpB,KAAK,SAAS,aACXC,IAAA,KAAA,WAAW,SAAX,QAAAA,EAAiB;AAAA,EACxB;AAAA,EAGM,aAAaF,GAA4B;AAC/C,QAAIA,EAAM,QAAQ,OAAOA,EAAM,QAAQ,YAAY;AACjD,WAAK,aAAaA,CAAK;AAEvB,YAAMG,IAASH,EAAM;AACrB,MAAAG,KAAA,QAAAA,EAAQ,QACRA,KAAA,QAAAA,EAAQ;AAAA,IAAM;AAAA,EAChB;AAAA,EAGM,eAAeH,GAA4B;AAC7C,IAAAA,EAAM,QAAQ,WAChB,KAAK,aAAaA,CAAK;AAAA,EACzB;AAAA,EAGF,SAAS;AACA,WAAAI;AAAAA,kBACO,KAAK,QAAQ;AAAA,aAClB,KAAK,IAAI;AAAA,eACP,KAAK,YAAY;AAAA,iBACf,KAAK,cAAc;AAAA,eACrB,KAAK,YAAY;AAAA;AAAA;AAAA;AAAA,EAAA;AAqnBhC;AAzsBaN,EACK,iBAAiB;AADtBA,EA0FJ,SAASO;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAvF2BC,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,GAAM,CAAA;AAAA,GAH9BT,EAGgC,WAAA,SAAA,CAAA;AAKAQ,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,GAAM,CAAA;AAAA,GAR9BT,EAQgC,WAAA,WAAA,CAAA;AAMAQ,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,GAAM,CAAA;AAAA,GAd9BT,EAcgC,WAAA,QAAA,CAAA;AAKCQ,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,GAAM,CAAA;AAAA,GAnB/BT,EAmBiC,WAAA,YAAA,CAAA;AAEhBQ,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GArBfT,EAqBiB,WAAA,QAAA,CAAA;AArBjBA,IAANQ,EAAA;AAAA,EADNE,EAAcX,CAAiB;AAAA,GACnBC,CAAA;"}
1	+ {"version":3,"file":"fhi-button.js","sources":["../../src/components/fhi-button/fhi-button.component.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 static readonly formAssociated = true;\n\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 _internals: ElementInternals;\n\n constructor() {\n super();\n this._internals = this.attachInternals();\n }\n\n connectedCallback(): void {\n super.connectedCallback();\n\n this.onkeyup = this._handleKeyup.bind(this);\n this.onkeydown = this._handleKeydown.bind(this);\n this.onselectstart = this._handleSelectStart.bind(this);\n }\n\n click(): void {\n this._handleClick();\n }\n\n private _handleClick(event?: MouseEvent \| KeyboardEvent): void {\n event?.preventDefault();\n event?.stopPropagation();\n\n if (this.disabled) {\n return;\n }\n\n this.dispatchEvent(\n new MouseEvent('click', { bubbles: true, composed: true }),\n );\n\n if (this.type === 'submit') {\n this._internals.form?.requestSubmit();\n }\n\n if (this.type === 'reset') {\n this._internals.form?.reset();\n }\n }\n\n private _handleKeyup(event: KeyboardEvent): void {\n if (event.key === ' ' \|\| event.key === 'Spacebar') {\n this._handleClick(event);\n\n const target = event.target as HTMLElement \| null;\n target?.blur();\n target?.focus();\n }\n }\n\n private _handleKeydown(event: KeyboardEvent): void {\n if (event.key === 'Enter') {\n this._handleClick(event);\n }\n }\n\n private _handleSelectStart() {\n return false;\n }\n\n render() {\n return html`<button\n ?disabled=${this.disabled}\n type=${this.type}\n @keyup=${this._handleKeyup}\n @keydown=${this._handleKeydown}\n @click=${this._handleClick}\n >\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-active);\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(\n --fhi-color-neutral-base-active\n );\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-active);\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","target","html","css","__decorateClass","property","customElement"],"mappings":";;;;;;AAGO,MAAMA,IAAoB;AAGpB,IAAAC,IAAN,cAAwBC,EAAW;AAAA,EAyBxC,cAAc;AACN,UAAA,GApBO,KAAA,QAAA,UAMF,KAAA,UAAA,UAKC,KAAA,OAAA,UAEyC,KAAA,WAAA,IAEW,KAAA,OAAA,UAM3D,KAAA,aAAa,KAAK,gBAAgB;AAAA,EAAA;AAAA,EAGzC,oBAA0B;AACxB,UAAM,kBAAkB,GAExB,KAAK,UAAU,KAAK,aAAa,KAAK,IAAI,GAC1C,KAAK,YAAY,KAAK,eAAe,KAAK,IAAI,GAC9C,KAAK,gBAAgB,KAAK,mBAAmB,KAAK,IAAI;AAAA,EAAA;AAAA,EAGxD,QAAc;AACZ,SAAK,aAAa;AAAA,EAAA;AAAA,EAGZ,aAAaC,GAA0C;;AAI7D,IAHAA,KAAA,QAAAA,EAAO,kBACPA,KAAA,QAAAA,EAAO,mBAEH,MAAK,aAIJ,KAAA;AAAA,MACH,IAAI,WAAW,SAAS,EAAE,SAAS,IAAM,UAAU,GAAM,CAAA;AAAA,IAC3D,GAEI,KAAK,SAAS,cACXC,IAAA,KAAA,WAAW,SAAX,QAAAA,EAAiB,kBAGpB,KAAK,SAAS,aACXC,IAAA,KAAA,WAAW,SAAX,QAAAA,EAAiB;AAAA,EACxB;AAAA,EAGM,aAAaF,GAA4B;AAC/C,QAAIA,EAAM,QAAQ,OAAOA,EAAM,QAAQ,YAAY;AACjD,WAAK,aAAaA,CAAK;AAEvB,YAAMG,IAASH,EAAM;AACrB,MAAAG,KAAA,QAAAA,EAAQ,QACRA,KAAA,QAAAA,EAAQ;AAAA,IAAM;AAAA,EAChB;AAAA,EAGM,eAAeH,GAA4B;AAC7C,IAAAA,EAAM,QAAQ,WAChB,KAAK,aAAaA,CAAK;AAAA,EACzB;AAAA,EAGM,qBAAqB;AACpB,WAAA;AAAA,EAAA;AAAA,EAGT,SAAS;AACA,WAAAI;AAAAA,kBACO,KAAK,QAAQ;AAAA,aAClB,KAAK,IAAI;AAAA,eACP,KAAK,YAAY;AAAA,iBACf,KAAK,cAAc;AAAA,eACrB,KAAK,YAAY;AAAA;AAAA;AAAA;AAAA,EAAA;AAqnBhC;AA9sBaN,EACK,iBAAiB;AADtBA,EA+FJ,SAASO;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AA5F2BC,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,GAAM,CAAA;AAAA,GAH9BT,EAGgC,WAAA,SAAA,CAAA;AAKAQ,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,GAAM,CAAA;AAAA,GAR9BT,EAQgC,WAAA,WAAA,CAAA;AAMAQ,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,GAAM,CAAA;AAAA,GAd9BT,EAcgC,WAAA,QAAA,CAAA;AAKCQ,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,GAAM,CAAA;AAAA,GAnB/BT,EAmBiC,WAAA,YAAA,CAAA;AAEhBQ,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GArBfT,EAqBiB,WAAA,QAAA,CAAA;AArBjBA,IAANQ,EAAA;AAAA,EADNE,EAAcX,CAAiB;AAAA,GACnBC,CAAA;"}

package/fhi-text-input.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"fhi-text-input.js","sources":["../../../../node_modules/.pnpm/@lit+reactive-element@2.1.0/node_modules/@lit/reactive-element/decorators/base.js","../../../../node_modules/.pnpm/@lit+reactive-element@2.1.0/node_modules/@lit/reactive-element/decorators/query.js","../../../../node_modules/.pnpm/lit-html@3.3.0/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":"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","x_google_ignoreList":[0,1,2]}
1	+ {"version":3,"file":"fhi-text-input.js","sources":["../../../../node_modules/.pnpm/@lit+reactive-element@2.1.0/node_modules/@lit/reactive-element/decorators/base.js","../../../../node_modules/.pnpm/@lit+reactive-element@2.1.0/node_modules/@lit/reactive-element/decorators/query.js","../../../../node_modules/.pnpm/lit-html@3.3.0/node_modules/lit-html/directives/if-defined.js","../../src/components/fhi-text-input/fhi-text-input.component.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":"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","x_google_ignoreList":[0,1,2]}

package/index.js CHANGED Viewed

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

package/package.json CHANGED Viewed

@@ -2,7 +2,7 @@
   "title": "FHI Designsystem",
   "author": "FHI Designsystem team",
   "name": "@folkehelseinstituttet/designsystem",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "description": "The official design system for the Norwegian Institute of Public Health implemented as web components",
   "keywords": [
     "fhi",
@@ -59,6 +59,8 @@
     "@esm-bundle/chai": "~4.3.4-fix.0",
     "@open-wc/testing": "~4.0.0",
     "@playwright/test": "^1.51.1",
+    "@release-it/conventional-changelog": "~8.0.2",
+    "@storybook/addon-actions": "~8.3.6",
     "@storybook/addon-essentials": "~8.3.0",
     "@storybook/addon-links": "~8.3.0",
     "@storybook/blocks": "~8.3.0",
@@ -74,12 +76,11 @@
     "cross-env": "7.0.3",
     "lit": "~3.2.0",
     "mocha": "~10.7.0",
+    "release-it": "~17.6.0",
     "storybook": "~8.3.0",
+    "storybook-design-token": "^3.2.0",
     "vite": "~5.4.0",
     "vite-plugin-generate-file": "~0.2.0",
-    "vite-plugin-static-copy": "~1.0.6",
-    "release-it": "~17.6.0",
-    "@release-it/conventional-changelog": "~8.0.2",
-    "@storybook/addon-actions": "~8.3.6"
+    "vite-plugin-static-copy": "~1.0.6"
   }
 }

package/theme/default.css CHANGED Viewed

@@ -3,6 +3,11 @@
 :root {
   /* Color */
   /* Primitive */
+  /**
+  * @tokens PrimitiveColors
+  * @presenter Color
+  */
   --fhi-black: #000000;
   --fhi-white: #ffffff;
@@ -124,6 +129,11 @@
   --fhi-blue-900: #011633;
   /* Semantic */
+  /**
+  * @tokens SemanticColors
+  * @presenter Color
+  */
   --fhi-color-neutral-background-default: var(--fhi-greyblue-010);
   --fhi-color-neutral-background-subtle: var(--fhi-greyblue-050);
   --fhi-color-neutral-surface-default: var(--fhi-greyblue-100);
@@ -216,12 +226,29 @@
   /* Typography */
   /* Primitive */
+  /**
+  * @tokens FontFamily
+  * @presenter FontFamily
+  **/
   --fhi-font-family-roboto-flex: 'Roboto Flex';
+  /**
+  * @tokens FontWeight
+  * @presenter FontWeight
+  **/
   --fhi-font-weight-light: 300;
   --fhi-font-weight-regular: 400;
   --fhi-font-weight-medium: 500;
   --fhi-font-weight-bold: 700;
+  /**
+  * @tokens PrimitiveFontSize
+  * @presenter FontSize
+  **/
   --fhi-font-size-1: 0.625rem;
   --fhi-font-size-2: 0.75rem;
   --fhi-font-size-3: 0.875rem;
@@ -237,32 +264,61 @@
   --fhi-font-size-13: 3.375rem;
   --fhi-font-size-14: 3.75rem;
-  /* Semantic */
+  /**
+  * @tokens LabelLargeFontStyle
+  * @presenter
+  **/
   --fhi-typography-label-large-font-size: var(--fhi-font-size-5);
   --fhi-typography-label-large-font-weight: var(--fhi-font-weight-medium);
   --fhi-typography-label-large-line-height: 1.5rem;
   --fhi-typography-label-large-letter-spacing: 0.00125rem;
+  /**
+  * @tokens LabelMediumFontStyle
+  * @presenter
+  **/
   --fhi-typography-label-medium-font-size: var(--fhi-font-size-4);
   --fhi-typography-label-medium-font-weight: var(--fhi-font-weight-medium);
   --fhi-typography-label-medium-line-height: 1.5rem;
   --fhi-typography-label-medium-letter-spacing: 0.005rem;
+  /**
+  * @tokens LabelSmallFontStyle
+  * @presenter
+  **/
   --fhi-typography-label-small-font-size: var(--fhi-font-size-3);
   --fhi-typography-label-small-font-weight: var(--fhi-font-weight-medium);
   --fhi-typography-label-small-line-height: 1.25rem;
   --fhi-typography-label-small-letter-spacing: 0.00875rem;
+  /**
+  * @tokens BodyLargeFontStyle
+  * @presenter
+  **/
   --fhi-typography-body-large-font-size: var(--fhi-font-size-5);
   --fhi-typography-body-large-font-weight: var(--fhi-font-weight-regular);
   --fhi-typography-body-large-line-height: 1.5rem;
   --fhi-typography-body-large-letter-spacing: 0.00125rem;
+  /**
+  * @tokens BodyMediumFontStyle
+  * @presenter
+  **/
   --fhi-typography-body-medium-font-size: var(--fhi-font-size-4);
   --fhi-typography-body-medium-font-weight: var(--fhi-font-weight-regular);
   --fhi-typography-body-medium-line-height: 1.5rem;
   --fhi-typography-body-medium-letter-spacing: 0.005rem;
+  /**
+  * @tokens BodySmallFontStyle
+  * @presenter
+  **/
   --fhi-typography-body-small-font-size: var(--fhi-font-size-3);
   --fhi-typography-body-small-font-weight: var(--fhi-font-weight-regular);
   --fhi-typography-body-small-line-height: 1.25rem;
@@ -270,6 +326,11 @@
   /* Dimension */
   /* Primitive */
+  /**
+  * @tokens PrimitiveSpacing
+  * @presenter Spacing
+  **/
   --fhi-spacing-0: 0rem;
   --fhi-spacing-050: 0.25rem;
   --fhi-spacing-100: 0.5rem;
@@ -283,6 +344,10 @@
   --fhi-spacing-800: 4rem;
   --fhi-spacing-1000: 5rem;
+  /**
+  * @tokens PrimitiveBorderRadius
+  * @presenter BorderRadius
+  **/
   --fhi-border-radius-050: 0.25rem;
   --fhi-border-radius-100: 0.5rem;
   --fhi-border-radius-150: 0.75rem;
@@ -292,12 +357,22 @@
   --fhi-border-radius-full: 999rem;
   /* Semantic */
+  /**
+  * @tokens SemanticBorderWidth
+  * @presenter Border
+  **/
   --fhi-dimension-border-width: 0.0625rem;
   --fhi-dimension-border-width-active: 0.125rem;
   --fhi-dimension-border-width-focus: 0.25rem;
+  /**
+  * @tokens-end
+  */
   /* Motion */
   /* Semantic */
   --fhi-motion-ease-default: cubic-bezier(0.4, 0, 0.2, 1);
   --fhi-motion-duration-quick: 150ms;
   --fhi-motion-duration-medium: 250ms;
@@ -305,5 +380,6 @@
   /* Opacity */
   /* Semantic */
   --fhi-opacity-disabled: 60%;
 }