npm - @folkehelseinstituttet/designsystem - Versions diffs - 0.3.0 → 0.4.0 - Mend

@folkehelseinstituttet/designsystem 0.3.0 → 0.4.0

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 (6) hide show

package/fhi-button.js CHANGED Viewed

@@ -51,7 +51,7 @@ e.styles = u`
     :host {
       --dimension-border-radius: var(--fhi-border-radius-full);
       --dimension-border-width: var(--fhi-dimension-border-width);
-      --typography-font-family: var(--fhi-font-family-roboto-flex);
+      --typography-font-family: var(--fhi-font-family-default);
       --motion-transition: var(--fhi-motion-duration-quick)
         var(--fhi-motion-ease-default);

package/fhi-button.js.map CHANGED Viewed

	@@ -1 +1 @@
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;"}
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-default);\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 CHANGED Viewed

@@ -92,7 +92,7 @@ let t = class extends y {
 t.formAssociated = !0;
 t.styles = g`
     :host {
-      --typography-font-family: var(--fhi-font-family-roboto-flex);
+      --typography-font-family: var(--fhi-font-family-default);
       --opacity-disabled: var(--fhi-opacity-disabled);

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.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]}
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-default);\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/package.json CHANGED Viewed

@@ -2,7 +2,7 @@
   "title": "FHI Designsystem",
   "author": "FHI Designsystem team",
   "name": "@folkehelseinstituttet/designsystem",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "The official design system for the Norwegian Institute of Public Health implemented as web components",
   "keywords": [
     "fhi",

package/theme/default.css CHANGED Viewed

@@ -1,385 +1 @@
-@import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght,XOPQ@8..144,100..1000,88&display=swap');
-:root {
-  /* Color */
-  /* Primitive */
-  /**
-  * @tokens PrimitiveColors
-  * @presenter Color
-  */
-  --fhi-black: #000000;
-  --fhi-white: #ffffff;
-  --fhi-red-010: #fffafa;
-  --fhi-red-050: #faf1f0;
-  --fhi-red-100: #f5e0dd;
-  --fhi-red-150: #f9cfcb;
-  --fhi-red-200: #fdb9b1;
-  --fhi-red-300: #ed958c;
-  --fhi-red-400: #e76a62;
-  --fhi-red-500: #cb4540;
-  --fhi-red-600: #a53431;
-  --fhi-red-700: #7d2628;
-  --fhi-red-800: #5a1514;
-  --fhi-red-900: #320102;
-  --fhi-yellow-010: #fffcf5;
-  --fhi-yellow-050: #feeed9;
-  --fhi-yellow-100: #fee191;
-  --fhi-yellow-150: #fdd662;
-  --fhi-yellow-200: #f4c53a;
-  --fhi-yellow-300: #d6a830;
-  --fhi-yellow-400: #af8f2c;
-  --fhi-yellow-500: #956d0c;
-  --fhi-yellow-600: #755911;
-  --fhi-yellow-700: #56430e;
-  --fhi-yellow-800: #382c0b;
-  --fhi-yellow-900: #1f1804;
-  --fhi-orange-010: #fef9f3;
-  --fhi-orange-050: #faf2e9;
-  --fhi-orange-100: #f5e2cd;
-  --fhi-orange-150: #fcd1a1;
-  --fhi-orange-200: #f7b665;
-  --fhi-orange-300: #e99e35;
-  --fhi-orange-400: #c7821d;
-  --fhi-orange-500: #a6622f;
-  --fhi-orange-600: #874f24;
-  --fhi-orange-700: #65381e;
-  --fhi-orange-800: #412613;
-  --fhi-orange-900: #261004;
-  --fhi-green-010: #fafffe;
-  --fhi-green-050: #e9f7f4;
-  --fhi-green-100: #cceee4;
-  --fhi-green-150: #abe5d1;
-  --fhi-green-200: #91dabb;
-  --fhi-green-300: #5bbe97;
-  --fhi-green-400: #30a779;
-  --fhi-green-500: #29855d;
-  --fhi-green-600: #336847;
-  --fhi-green-700: #2a4d33;
-  --fhi-green-800: #203324;
-  --fhi-green-900: #081b0d;
-  --fhi-greyblue-010: #fdfeff;
-  --fhi-greyblue-050: #edf4f7;
-  --fhi-greyblue-100: #dbe6ec;
-  --fhi-greyblue-150: #cbd9df;
-  --fhi-greyblue-200: #bbcfd8;
-  --fhi-greyblue-300: #97b2c0;
-  --fhi-greyblue-400: #7b96a4;
-  --fhi-greyblue-500: #607985;
-  --fhi-greyblue-600: #455f6c;
-  --fhi-greyblue-700: #374851;
-  --fhi-greyblue-800: #212d34;
-  --fhi-greyblue-900: #0e171b;
-  --fhi-greybeige-010: #fbfbfb;
-  --fhi-greybeige-050: #f0edeb;
-  --fhi-greybeige-100: #e7e4e2;
-  --fhi-greybeige-150: #dbd9d7;
-  --fhi-greybeige-200: #cdccca;
-  --fhi-greybeige-300: #b0aeaa;
-  --fhi-greybeige-400: #93918c;
-  --fhi-greybeige-500: #76746f;
-  --fhi-greybeige-600: #625d5a;
-  --fhi-greybeige-700: #494442;
-  --fhi-greybeige-800: #2f2b29;
-  --fhi-greybeige-900: #130f0e;
-  --fhi-teal-010: #fafdfe;
-  --fhi-teal-050: #edf5f8;
-  --fhi-teal-100: #d5ebf5;
-  --fhi-teal-150: #c0dee9;
-  --fhi-teal-200: #9dd2e4;
-  --fhi-teal-300: #78b6ca;
-  --fhi-teal-400: #519ab0;
-  --fhi-teal-500: #377e92;
-  --fhi-teal-600: #2b6475;
-  --fhi-teal-700: #244a59;
-  --fhi-teal-800: #1d303e;
-  --fhi-teal-900: #0b1821;
-  --fhi-purple-010: #fbfcfe;
-  --fhi-purple-050: #f0f3fe;
-  --fhi-purple-100: #e1e4f9;
-  --fhi-purple-150: #d3d8f7;
-  --fhi-purple-200: #c2c7f6;
-  --fhi-purple-300: #a3aaeb;
-  --fhi-purple-400: #838ae6;
-  --fhi-purple-500: #676bca;
-  --fhi-purple-600: #5354ab;
-  --fhi-purple-700: #3e3f7c;
-  --fhi-purple-800: #292b4f;
-  --fhi-purple-900: #141431;
-  --fhi-blue-010: #fafdff;
-  --fhi-blue-050: #e6f0fc;
-  --fhi-blue-100: #dae7f7;
-  --fhi-blue-150: #c2dbf5;
-  --fhi-blue-200: #adcef4;
-  --fhi-blue-300: #77b1ea;
-  --fhi-blue-400: #4a96df;
-  --fhi-blue-500: #2a76c6;
-  --fhi-blue-600: #1e5da7;
-  --fhi-blue-700: #1c4480;
-  --fhi-blue-800: #102e55;
-  --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);
-  --fhi-color-neutral-surface-hover: var(--fhi-greyblue-150);
-  --fhi-color-neutral-surface-active: var(--fhi-greyblue-200);
-  --fhi-color-neutral-border-subtle: var(--fhi-greyblue-200);
-  --fhi-color-neutral-border-default: var(--fhi-greyblue-500);
-  --fhi-color-neutral-border-strong: var(--fhi-greyblue-700);
-  --fhi-color-neutral-base-default: var(--fhi-greyblue-500);
-  --fhi-color-neutral-base-hover: var(--fhi-greyblue-600);
-  --fhi-color-neutral-base-active: var(--fhi-greyblue-700);
-  --fhi-color-neutral-text-subtle: var(--fhi-greyblue-600);
-  --fhi-color-neutral-text-default: var(--fhi-greyblue-800);
-  --fhi-color-neutral-text-inverted: var(--fhi-greyblue-010);
-  --fhi-color-accent-background-default: var(--fhi-blue-010);
-  --fhi-color-accent-background-subtle: var(--fhi-blue-050);
-  --fhi-color-accent-surface-default: var(--fhi-blue-100);
-  --fhi-color-accent-surface-hover: var(--fhi-blue-150);
-  --fhi-color-accent-surface-active: var(--fhi-blue-200);
-  --fhi-color-accent-border-subtle: var(--fhi-blue-200);
-  --fhi-color-accent-border-default: var(--fhi-blue-500);
-  --fhi-color-accent-border-strong: var(--fhi-blue-700);
-  --fhi-color-accent-base-default: var(--fhi-blue-500);
-  --fhi-color-accent-base-hover: var(--fhi-blue-600);
-  --fhi-color-accent-base-active: var(--fhi-blue-700);
-  --fhi-color-accent-text-subtle: var(--fhi-blue-600);
-  --fhi-color-accent-text-default: var(--fhi-blue-800);
-  --fhi-color-accent-text-inverted: var(--fhi-blue-010);
-  --fhi-color-info-background-default: var(--fhi-blue-010);
-  --fhi-color-info-background-subtle: var(--fhi-blue-050);
-  --fhi-color-info-surface-default: var(--fhi-blue-100);
-  --fhi-color-info-surface-hover: var(--fhi-blue-150);
-  --fhi-color-info-surface-active: var(--fhi-blue-200);
-  --fhi-color-info-border-subtle: var(--fhi-blue-200);
-  --fhi-color-info-border-default: var(--fhi-blue-500);
-  --fhi-color-info-border-strong: var(--fhi-blue-700);
-  --fhi-color-info-base-default: var(--fhi-blue-500);
-  --fhi-color-info-base-hover: var(--fhi-blue-600);
-  --fhi-color-info-base-active: var(--fhi-blue-700);
-  --fhi-color-info-text-subtle: var(--fhi-blue-600);
-  --fhi-color-info-text-default: var(--fhi-blue-800);
-  --fhi-color-info-text-inverted: var(--fhi-blue-010);
-  --fhi-color-success-background-default: var(--fhi-green-010);
-  --fhi-color-success-background-subtle: var(--fhi-green-050);
-  --fhi-color-success-surface-default: var(--fhi-green-100);
-  --fhi-color-success-surface-hover: var(--fhi-green-150);
-  --fhi-color-success-surface-active: var(--fhi-green-200);
-  --fhi-color-success-border-subtle: var(--fhi-green-200);
-  --fhi-color-success-border-default: var(--fhi-green-500);
-  --fhi-color-success-border-strong: var(--fhi-green-700);
-  --fhi-color-success-base-default: var(--fhi-green-500);
-  --fhi-color-success-base-hover: var(--fhi-green-600);
-  --fhi-color-success-base-active: var(--fhi-green-700);
-  --fhi-color-success-text-subtle: var(--fhi-green-600);
-  --fhi-color-success-text-default: var(--fhi-green-800);
-  --fhi-color-success-text-inverted: var(--fhi-green-010);
-  --fhi-color-warning-background-default: var(--fhi-yellow-010);
-  --fhi-color-warning-background-subtle: var(--fhi-yellow-050);
-  --fhi-color-warning-surface-default: var(--fhi-yellow-100);
-  --fhi-color-warning-surface-hover: var(--fhi-yellow-150);
-  --fhi-color-warning-surface-active: var(--fhi-yellow-200);
-  --fhi-color-warning-border-subtle: var(--fhi-yellow-200);
-  --fhi-color-warning-border-default: var(--fhi-orange-500);
-  --fhi-color-warning-border-strong: var(--fhi-orange-700);
-  --fhi-color-warning-base-default: var(--fhi-orange-200);
-  --fhi-color-warning-base-hover: var(--fhi-orange-300);
-  --fhi-color-warning-base-active: var(--fhi-orange-400);
-  --fhi-color-warning-text-subtle: var(--fhi-orange-600);
-  --fhi-color-warning-text-default: var(--fhi-orange-800);
-  --fhi-color-warning-text-inverted: var(--fhi-orange-900);
-  --fhi-color-danger-background-default: var(--fhi-red-010);
-  --fhi-color-danger-background-subtle: var(--fhi-red-050);
-  --fhi-color-danger-surface-default: var(--fhi-red-100);
-  --fhi-color-danger-surface-hover: var(--fhi-red-150);
-  --fhi-color-danger-surface-active: var(--fhi-red-200);
-  --fhi-color-danger-border-subtle: var(--fhi-red-200);
-  --fhi-color-danger-border-default: var(--fhi-red-500);
-  --fhi-color-danger-border-strong: var(--fhi-red-700);
-  --fhi-color-danger-base-default: var(--fhi-red-500);
-  --fhi-color-danger-base-hover: var(--fhi-red-600);
-  --fhi-color-danger-base-active: var(--fhi-red-700);
-  --fhi-color-danger-text-subtle: var(--fhi-red-600);
-  --fhi-color-danger-text-default: var(--fhi-red-800);
-  --fhi-color-danger-text-inverted: var(--fhi-red-010);
-  /* 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;
-  --fhi-font-size-4: 1rem;
-  --fhi-font-size-5: 1.125rem;
-  --fhi-font-size-6: 1.25rem;
-  --fhi-font-size-7: 1.5rem;
-  --fhi-font-size-8: 1.75rem;
-  --fhi-font-size-9: 2rem;
-  --fhi-font-size-10: 2.25rem;
-  --fhi-font-size-11: 2.625rem;
-  --fhi-font-size-12: 3rem;
-  --fhi-font-size-13: 3.375rem;
-  --fhi-font-size-14: 3.75rem;
-  /**
-  * @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;
-  --fhi-typography-body-small-letter-spacing: 0.00875rem;
-  /* Dimension */
-  /* Primitive */
-  /**
-  * @tokens PrimitiveSpacing
-  * @presenter Spacing
-  **/
-  --fhi-spacing-0: 0rem;
-  --fhi-spacing-050: 0.25rem;
-  --fhi-spacing-100: 0.5rem;
-  --fhi-spacing-150: 0.75rem;
-  --fhi-spacing-200: 1rem;
-  --fhi-spacing-250: 1.25rem;
-  --fhi-spacing-300: 1.5rem;
-  --fhi-spacing-400: 2rem;
-  --fhi-spacing-500: 2.5rem;
-  --fhi-spacing-600: 3rem;
-  --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;
-  --fhi-border-radius-200: 1rem;
-  --fhi-border-radius-250: 1.25rem;
-  --fhi-border-radius-300: 1.5rem;
-  --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;
-  --fhi-motion-duration-slow: 350ms;
-  /* Opacity */
-  /* Semantic */
-  --fhi-opacity-disabled: 60%;
-}
+@import"https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght,XOPQ@8..144,100..1000,88&display=swap";:root{--fhi-black: #000000;--fhi-white: #ffffff;--fhi-red-010: #fffafa;--fhi-red-050: #faf1f0;--fhi-red-100: #f5e0dd;--fhi-red-150: #f9cfcb;--fhi-red-200: #fdb9b1;--fhi-red-300: #ed958c;--fhi-red-400: #e76a62;--fhi-red-500: #cb4540;--fhi-red-600: #a53431;--fhi-red-700: #7d2628;--fhi-red-800: #5a1514;--fhi-red-900: #320102;--fhi-yellow-010: #fffcf5;--fhi-yellow-050: #feeed9;--fhi-yellow-100: #fee191;--fhi-yellow-150: #fdd662;--fhi-yellow-200: #f4c53a;--fhi-yellow-300: #d6a830;--fhi-yellow-400: #af8f2c;--fhi-yellow-500: #956d0c;--fhi-yellow-600: #755911;--fhi-yellow-700: #56430e;--fhi-yellow-800: #382c0b;--fhi-yellow-900: #1f1804;--fhi-orange-010: #fef9f3;--fhi-orange-050: #faf2e9;--fhi-orange-100: #f5e2cd;--fhi-orange-150: #fcd1a1;--fhi-orange-200: #f7b665;--fhi-orange-300: #e99e35;--fhi-orange-400: #c7821d;--fhi-orange-500: #a6622f;--fhi-orange-600: #874f24;--fhi-orange-700: #65381e;--fhi-orange-800: #412613;--fhi-orange-900: #261004;--fhi-green-010: #fafffe;--fhi-green-050: #e9f7f4;--fhi-green-100: #cceee4;--fhi-green-150: #abe5d1;--fhi-green-200: #91dabb;--fhi-green-300: #5bbe97;--fhi-green-400: #30a779;--fhi-green-500: #29855d;--fhi-green-600: #336847;--fhi-green-700: #2a4d33;--fhi-green-800: #203324;--fhi-green-900: #081b0d;--fhi-greyblue-010: #fdfeff;--fhi-greyblue-050: #edf4f7;--fhi-greyblue-100: #dbe6ec;--fhi-greyblue-150: #cbd9df;--fhi-greyblue-200: #bbcfd8;--fhi-greyblue-300: #97b2c0;--fhi-greyblue-400: #7b96a4;--fhi-greyblue-500: #607985;--fhi-greyblue-600: #455f6c;--fhi-greyblue-700: #374851;--fhi-greyblue-800: #212d34;--fhi-greyblue-900: #0e171b;--fhi-greybeige-010: #fbfbfb;--fhi-greybeige-050: #f0edeb;--fhi-greybeige-100: #e7e4e2;--fhi-greybeige-150: #dbd9d7;--fhi-greybeige-200: #cdccca;--fhi-greybeige-300: #b0aeaa;--fhi-greybeige-400: #93918c;--fhi-greybeige-500: #76746f;--fhi-greybeige-600: #625d5a;--fhi-greybeige-700: #494442;--fhi-greybeige-800: #2f2b29;--fhi-greybeige-900: #130f0e;--fhi-teal-010: #fafdfe;--fhi-teal-050: #edf5f8;--fhi-teal-100: #d5ebf5;--fhi-teal-150: #c0dee9;--fhi-teal-200: #9dd2e4;--fhi-teal-300: #78b6ca;--fhi-teal-400: #519ab0;--fhi-teal-500: #377e92;--fhi-teal-600: #2b6475;--fhi-teal-700: #244a59;--fhi-teal-800: #1d303e;--fhi-teal-900: #0b1821;--fhi-purple-010: #fbfcfe;--fhi-purple-050: #f0f3fe;--fhi-purple-100: #e1e4f9;--fhi-purple-150: #d3d8f7;--fhi-purple-200: #c2c7f6;--fhi-purple-300: #a3aaeb;--fhi-purple-400: #838ae6;--fhi-purple-500: #676bca;--fhi-purple-600: #5354ab;--fhi-purple-700: #3e3f7c;--fhi-purple-800: #292b4f;--fhi-purple-900: #141431;--fhi-blue-010: #fafdff;--fhi-blue-050: #e6f0fc;--fhi-blue-100: #dae7f7;--fhi-blue-150: #c2dbf5;--fhi-blue-200: #adcef4;--fhi-blue-300: #77b1ea;--fhi-blue-400: #4a96df;--fhi-blue-500: #2a76c6;--fhi-blue-600: #1e5da7;--fhi-blue-700: #1c4480;--fhi-blue-800: #102e55;--fhi-blue-900: #011633;--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);--fhi-color-neutral-surface-hover: var(--fhi-greyblue-150);--fhi-color-neutral-surface-active: var(--fhi-greyblue-200);--fhi-color-neutral-border-subtle: var(--fhi-greyblue-200);--fhi-color-neutral-border-default: var(--fhi-greyblue-500);--fhi-color-neutral-border-strong: var(--fhi-greyblue-700);--fhi-color-neutral-base-default: var(--fhi-greyblue-500);--fhi-color-neutral-base-hover: var(--fhi-greyblue-600);--fhi-color-neutral-base-active: var(--fhi-greyblue-700);--fhi-color-neutral-text-subtle: var(--fhi-greyblue-600);--fhi-color-neutral-text-default: var(--fhi-greyblue-800);--fhi-color-neutral-text-inverted: var(--fhi-greyblue-010);--fhi-color-accent-background-default: var(--fhi-blue-010);--fhi-color-accent-background-subtle: var(--fhi-blue-050);--fhi-color-accent-surface-default: var(--fhi-blue-100);--fhi-color-accent-surface-hover: var(--fhi-blue-150);--fhi-color-accent-surface-active: var(--fhi-blue-200);--fhi-color-accent-border-subtle: var(--fhi-blue-200);--fhi-color-accent-border-default: var(--fhi-blue-500);--fhi-color-accent-border-strong: var(--fhi-blue-700);--fhi-color-accent-base-default: var(--fhi-blue-500);--fhi-color-accent-base-hover: var(--fhi-blue-600);--fhi-color-accent-base-active: var(--fhi-blue-700);--fhi-color-accent-text-subtle: var(--fhi-blue-600);--fhi-color-accent-text-default: var(--fhi-blue-800);--fhi-color-accent-text-inverted: var(--fhi-blue-010);--fhi-color-info-background-default: var(--fhi-blue-010);--fhi-color-info-background-subtle: var(--fhi-blue-050);--fhi-color-info-surface-default: var(--fhi-blue-100);--fhi-color-info-surface-hover: var(--fhi-blue-150);--fhi-color-info-surface-active: var(--fhi-blue-200);--fhi-color-info-border-subtle: var(--fhi-blue-200);--fhi-color-info-border-default: var(--fhi-blue-500);--fhi-color-info-border-strong: var(--fhi-blue-700);--fhi-color-info-base-default: var(--fhi-blue-500);--fhi-color-info-base-hover: var(--fhi-blue-600);--fhi-color-info-base-active: var(--fhi-blue-700);--fhi-color-info-text-subtle: var(--fhi-blue-600);--fhi-color-info-text-default: var(--fhi-blue-800);--fhi-color-info-text-inverted: var(--fhi-blue-010);--fhi-color-success-background-default: var(--fhi-green-010);--fhi-color-success-background-subtle: var(--fhi-green-050);--fhi-color-success-surface-default: var(--fhi-green-100);--fhi-color-success-surface-hover: var(--fhi-green-150);--fhi-color-success-surface-active: var(--fhi-green-200);--fhi-color-success-border-subtle: var(--fhi-green-200);--fhi-color-success-border-default: var(--fhi-green-500);--fhi-color-success-border-strong: var(--fhi-green-700);--fhi-color-success-base-default: var(--fhi-green-500);--fhi-color-success-base-hover: var(--fhi-green-600);--fhi-color-success-base-active: var(--fhi-green-700);--fhi-color-success-text-subtle: var(--fhi-green-600);--fhi-color-success-text-default: var(--fhi-green-800);--fhi-color-success-text-inverted: var(--fhi-green-010);--fhi-color-warning-background-default: var(--fhi-yellow-010);--fhi-color-warning-background-subtle: var(--fhi-yellow-050);--fhi-color-warning-surface-default: var(--fhi-yellow-100);--fhi-color-warning-surface-hover: var(--fhi-yellow-150);--fhi-color-warning-surface-active: var(--fhi-yellow-200);--fhi-color-warning-border-subtle: var(--fhi-yellow-200);--fhi-color-warning-border-default: var(--fhi-orange-500);--fhi-color-warning-border-strong: var(--fhi-orange-700);--fhi-color-warning-base-default: var(--fhi-orange-200);--fhi-color-warning-base-hover: var(--fhi-orange-300);--fhi-color-warning-base-active: var(--fhi-orange-400);--fhi-color-warning-text-subtle: var(--fhi-orange-600);--fhi-color-warning-text-default: var(--fhi-orange-800);--fhi-color-warning-text-inverted: var(--fhi-orange-900);--fhi-color-danger-background-default: var(--fhi-red-010);--fhi-color-danger-background-subtle: var(--fhi-red-050);--fhi-color-danger-surface-default: var(--fhi-red-100);--fhi-color-danger-surface-hover: var(--fhi-red-150);--fhi-color-danger-surface-active: var(--fhi-red-200);--fhi-color-danger-border-subtle: var(--fhi-red-200);--fhi-color-danger-border-default: var(--fhi-red-500);--fhi-color-danger-border-strong: var(--fhi-red-700);--fhi-color-danger-base-default: var(--fhi-red-500);--fhi-color-danger-base-hover: var(--fhi-red-600);--fhi-color-danger-base-active: var(--fhi-red-700);--fhi-color-danger-text-subtle: var(--fhi-red-600);--fhi-color-danger-text-default: var(--fhi-red-800);--fhi-color-danger-text-inverted: var(--fhi-red-010);--fhi-font-family-default: "Roboto Flex", system-ui, sans-serif;--fhi-font-weight-light: 300;--fhi-font-weight-regular: 400;--fhi-font-weight-medium: 500;--fhi-font-weight-bold: 700;--fhi-font-size-1: .625rem;--fhi-font-size-2: .75rem;--fhi-font-size-3: .875rem;--fhi-font-size-4: 1rem;--fhi-font-size-5: 1.125rem;--fhi-font-size-6: 1.25rem;--fhi-font-size-7: 1.5rem;--fhi-font-size-8: 1.75rem;--fhi-font-size-9: 2rem;--fhi-font-size-10: 2.25rem;--fhi-font-size-11: 2.625rem;--fhi-font-size-12: 3rem;--fhi-font-size-13: 3.375rem;--fhi-font-size-14: 3.75rem;--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: .00125rem;--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: .005rem;--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: .00875rem;--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: .00125rem;--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: .005rem;--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;--fhi-typography-body-small-letter-spacing: .00875rem;--fhi-spacing-0: 0rem;--fhi-spacing-050: .25rem;--fhi-spacing-100: .5rem;--fhi-spacing-150: .75rem;--fhi-spacing-200: 1rem;--fhi-spacing-250: 1.25rem;--fhi-spacing-300: 1.5rem;--fhi-spacing-400: 2rem;--fhi-spacing-500: 2.5rem;--fhi-spacing-600: 3rem;--fhi-spacing-800: 4rem;--fhi-spacing-1000: 5rem;--fhi-border-radius-050: .25rem;--fhi-border-radius-100: .5rem;--fhi-border-radius-150: .75rem;--fhi-border-radius-200: 1rem;--fhi-border-radius-250: 1.25rem;--fhi-border-radius-300: 1.5rem;--fhi-border-radius-full: 999rem;--fhi-dimension-border-width: .0625rem;--fhi-dimension-border-width-active: .125rem;--fhi-dimension-border-width-focus: .25rem;--fhi-motion-ease-default: cubic-bezier(.4, 0, .2, 1);--fhi-motion-duration-quick: .15s;--fhi-motion-duration-medium: .25s;--fhi-motion-duration-slow: .35s;--fhi-opacity-disabled: 60%}