@folkehelseinstituttet/designsystem 0.40.2 → 0.40.4

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
  1. package/fhi-button.js +188 -536
  2. package/fhi-button.js.map +1 -1
  3. package/fhi-checkbox.js +56 -96
  4. package/fhi-checkbox.js.map +1 -1
  5. package/package.json +1 -1
  6. package/web-types.json +1 -1
package/fhi-button.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"fhi-button.js","names":[],"sources":["../../src/components/fhi-button/fhi-button.component.ts"],"sourcesContent":["import { html, css, LitElement, PropertyValues } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nexport const FhiButtonSelector = 'fhi-button';\n\n/**\n * ## FHI Button\n *\n * {@link https://designsystem.fhi.no/?path=/docs/komponenter-button--docs}\n *\n * The `<fhi-button>` component is used to create interactive buttons in accordance with the FHI Design System guidelines.\n * Use this component instead of the standard HTML `<button>` element to ensure consistent styling and behavior across your application.\n *\n * @tag fhi-button\n * @element fhi-button\n *\n * @slot - The content of the button. This should be pure text, an icon or both.\n */\n@customElement(FhiButtonSelector)\nexport class FhiButton extends LitElement {\n static readonly formAssociated = true;\n\n /**\n * Sets the color of the button.\n *\n * See: {@link https://designsystem.fhi.no/?path=/docs/komponenter-button--docs#color-farge}\n *\n * @reflect\n * @type {'accent' | 'neutral' | 'danger'}\n */\n @property({ type: String, reflect: true }) color:\n | 'accent'\n | 'neutral'\n | 'danger' = 'accent';\n\n /**\n *\n * Sets the button variant. The variant determines the button's visual style and emphasis.\n *\n * See: {@link https://designsystem.fhi.no/?path=/docs/komponenter-button--docs#variant}\n *\n * @reflect\n * @type {'strong' | 'subtle' | 'outlined' | 'text'}\n */\n @property({ type: String, reflect: true }) variant:\n | 'strong'\n | 'subtle'\n | 'outlined'\n | 'text' = 'strong';\n\n /**\n * Sets the size of the button to one of the predefined options.\n *\n * See: {@link https://designsystem.fhi.no/?path=/docs/komponenter-button--docs#size-st%C3%B8rrelse}\n *\n * @reflect\n * @type {'large' | 'medium' | 'small'}\n */\n @property({ type: String, reflect: true }) size:\n | 'large'\n | 'medium'\n | 'small' = 'medium';\n\n /**\n * Disables the button. This changes its appearance and makes it non-interactive.\n * @reflect\n * @type {boolean}\n */\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n /**\n * Styles the button for icon-only content.\n *\n * If you only have an icon as the child of the button, then you should set this property to `true`.\n *\n * @deprecated This property is deprecated and will be removed in a future release. The button will automatically detect if it only contains an icon and apply the appropriate styling.\n *\n * @type {boolean}\n */\n @property({ type: Boolean, attribute: 'icon-only' })\n iconOnly: boolean = false;\n\n /**\n * Sets the button's type. This determines the button's behavior when used within a form.\n * The predefined types conform to standard HTML button types.\n *\n * For more information about button types, see: {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type}\n * @type {'button' | 'submit' | 'reset'}\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 protected update(_changedProperties: PropertyValues): void {\n // If a falsy value is provided, default to 'accent'.\n if (_changedProperties.has('color')) {\n if (!this.color) {\n this.color = 'accent';\n }\n }\n\n // If a falsy value is provided, default to 'strong'.\n if (_changedProperties.has('variant')) {\n if (!this.variant) {\n this.variant = 'strong';\n }\n }\n\n // If an invalid value is provided, default to 'medium'.\n if (_changedProperties.has('size')) {\n if (!this.size) {\n this.size = 'medium';\n }\n }\n\n if (_changedProperties.has('iconOnly')) {\n if (this.getAttribute('icon-only') !== null) {\n console.warn(\n \"The 'iconOnly' property is deprecated and will be removed in a future release. The button automatically detects if it only contains an icon and applies the appropriate styling.\",\n );\n }\n }\n\n super.update(_changedProperties);\n }\n\n /**\n * Programmatically clicks the button.\n */\n public 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._dispatchClickEvent();\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 _dispatchClickEvent(): void {\n /**\n * @type {Event} - Standard DOM event with the type `click`.\n * This event is dispatched when the button is clicked, either via mouse or keyboard interaction.\n * */\n this.dispatchEvent(\n new MouseEvent('click', { bubbles: true, composed: true }),\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(): boolean {\n return false;\n }\n\n private _getIconSize(): string {\n switch (this.size) {\n case 'small':\n return '1.25rem';\n case 'medium':\n case 'large':\n default:\n return '1.5rem';\n }\n }\n\n private _handleSlotChange(event: Event): void {\n const nodes = (event.target as HTMLSlotElement).assignedNodes();\n\n const validNodes = nodes.filter(\n node =>\n node.nodeType === Node.ELEMENT_NODE ||\n (node.nodeType === Node.TEXT_NODE && node.textContent?.trim()),\n );\n\n if (validNodes.length === 0) {\n return;\n }\n\n const firstNode: Node = validNodes[0];\n\n // if the first node is an icon, style it.\n if (\n firstNode.nodeType === Node.ELEMENT_NODE &&\n (firstNode as Element).tagName.toLowerCase().startsWith('fhi-icon')\n ) {\n const firstIcon = firstNode as HTMLElement;\n\n if (this.iconOnly || validNodes.length === 1) {\n if (!this.iconOnly) {\n this.iconOnly = true;\n }\n\n firstIcon.setAttribute('size', this._getIconSize());\n return;\n }\n\n if (this.size != 'small') {\n firstIcon.style.marginRight = 'var(--dimension-icon-margin-right)';\n }\n firstIcon.style.marginLeft = 'var(--dimension-icon-margin-left-offset)';\n firstIcon.setAttribute('size', this._getIconSize());\n }\n\n const lastNode: Node = validNodes[validNodes.length - 1];\n\n // if the last node is an icon, style it.\n if (\n lastNode.nodeType === Node.ELEMENT_NODE &&\n (lastNode as Element).tagName.toLowerCase().startsWith('fhi-icon')\n ) {\n const lastIcon = lastNode as HTMLElement;\n\n lastIcon.style.marginRight = 'var(--dimension-icon-margin-right-offset)';\n if (this.size != 'small') {\n lastIcon.style.marginLeft = 'var(--dimension-icon-margin-left)';\n }\n lastIcon.setAttribute('size', this._getIconSize());\n }\n }\n\n render() {\n return html`<button\n ?disabled=${this.disabled}\n type=${this.type}\n @keyup=${this._handleKeyup}\n @keydown=${this._handleKeydown}\n @click=${this._handleClick}\n ?data-icon-only=${this.iconOnly}\n >\n <div class=\"slot-container\">\n <slot @slotchange=${this._handleSlotChange}></slot>\n </div>\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\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 --dimension-padding-small-text: calc(\n var(--fhi-spacing-050) - var(--fhi-dimension-border-width)\n )\n calc(var(--fhi-spacing-150) - var(--fhi-dimension-border-width));\n\n --dimension-padding-medium-text: calc(\n var(--fhi-spacing-100) - var(--fhi-dimension-border-width)\n )\n calc(var(--fhi-spacing-200) - var(--fhi-dimension-border-width));\n\n --dimension-padding-large-text: calc(\n var(--fhi-spacing-200) - var(--fhi-dimension-border-width)\n )\n calc(var(--fhi-spacing-300) - var(--fhi-dimension-border-width));\n\n /* Icon */\n --dimension-icon-margin-left: var(--fhi-spacing-050);\n --dimension-icon-margin-right: var(--fhi-spacing-050);\n\n /* Adjust for the button padding when the icon is present on either side */\n --dimension-icon-margin-left-offset: calc(-1 * var(--fhi-spacing-050));\n --dimension-icon-margin-right-offset: calc(-1 * var(--fhi-spacing-050));\n\n --dimension-icon-only-border-radius: var(--fhi-border-radius-full);\n\n /* Typography */\n --typography-font-family: var(--fhi-font-family-default);\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 /* Accent Color */\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 /* Neutral Color */\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 /* Danger Color */\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 --motion-transition: var(--fhi-motion-duration-quick)\n var(--fhi-motion-ease-default);\n\n --opacity-disabled: var(--fhi-opacity-disabled);\n }\n\n :host {\n display: block;\n width: fit-content;\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 -webkit-font-smoothing: antialiased;\n transition: var(--motion-transition);\n width: 100%;\n justify-items: center;\n\n cursor: pointer;\n &:disabled {\n opacity: var(--opacity-disabled);\n cursor: not-allowed;\n }\n }\n\n .slot-container {\n display: flex;\n align-items: center;\n gap: 0.25rem;\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='large'][variant='text']) button {\n padding: var(--dimension-padding-large-text);\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='medium'][variant='text']) button {\n padding: var(--dimension-padding-medium-text);\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([size='small'][variant='text']) button {\n padding: var(--dimension-padding-small-text);\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 button[data-icon-only] {\n border-radius: var(--dimension-icon-only-border-radius);\n }\n\n :host([size='small']) button[data-icon-only] {\n padding: calc(0.375rem - var(--fhi-dimension-border-width));\n }\n\n :host([size='medium']) button[data-icon-only] {\n padding: calc(var(--fhi-spacing-100) - var(--fhi-dimension-border-width));\n }\n\n :host([size='large']) button[data-icon-only] {\n padding: calc(var(--fhi-spacing-200) - var(--fhi-dimension-border-width));\n }\n `;\n}\n"],"mappings":"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"}
1
+ {"version":3,"file":"fhi-button.js","names":[],"sources":["../../src/components/fhi-button/fhi-button.component.ts"],"sourcesContent":["import { html, css, LitElement, PropertyValues } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nexport const FhiButtonSelector = 'fhi-button';\n\n/**\n * ## FHI Button\n *\n * {@link https://designsystem.fhi.no/?path=/docs/komponenter-button--docs}\n *\n * The `<fhi-button>` component is used to create interactive buttons in accordance with the FHI Design System guidelines.\n * Use this component instead of the standard HTML `<button>` element to ensure consistent styling and behavior across your application.\n *\n * @tag fhi-button\n * @element fhi-button\n *\n * @slot - The content of the button. This should be pure text, an icon or both.\n */\n@customElement(FhiButtonSelector)\nexport class FhiButton extends LitElement {\n static readonly formAssociated = true;\n\n /**\n * Sets the color of the button.\n *\n * See: {@link https://designsystem.fhi.no/?path=/docs/komponenter-button--docs#color-farge}\n *\n * @reflect\n * @type {'accent' | 'neutral' | 'danger'}\n */\n @property({ type: String, reflect: true }) color:\n | 'accent'\n | 'neutral'\n | 'danger' = 'accent';\n\n /**\n *\n * Sets the button variant. The variant determines the button's visual style and emphasis.\n *\n * See: {@link https://designsystem.fhi.no/?path=/docs/komponenter-button--docs#variant}\n *\n * @reflect\n * @type {'strong' | 'subtle' | 'outlined' | 'text'}\n */\n @property({ type: String, reflect: true }) variant:\n | 'strong'\n | 'subtle'\n | 'outlined'\n | 'text' = 'strong';\n\n /**\n * Sets the size of the button to one of the predefined options.\n *\n * See: {@link https://designsystem.fhi.no/?path=/docs/komponenter-button--docs#size-st%C3%B8rrelse}\n *\n * @reflect\n * @type {'large' | 'medium' | 'small'}\n */\n @property({ type: String, reflect: true }) size:\n | 'large'\n | 'medium'\n | 'small' = 'medium';\n\n /**\n * Disables the button. This changes its appearance and makes it non-interactive.\n * @reflect\n * @type {boolean}\n */\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n /**\n * Styles the button for icon-only content.\n *\n * If you only have an icon as the child of the button, then you should set this property to `true`.\n *\n * @deprecated This property is deprecated and will be removed in a future release. The button will automatically detect if it only contains an icon and apply the appropriate styling.\n *\n * @type {boolean}\n */\n @property({ type: Boolean, attribute: 'icon-only' })\n iconOnly: boolean = false;\n\n /**\n * Sets the button's type. This determines the button's behavior when used within a form.\n * The predefined types conform to standard HTML button types.\n *\n * For more information about button types, see: {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type}\n * @type {'button' | 'submit' | 'reset'}\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 protected update(_changedProperties: PropertyValues): void {\n // If a falsy value is provided, default to 'accent'.\n if (_changedProperties.has('color')) {\n if (!this.color) {\n this.color = 'accent';\n }\n }\n\n // If a falsy value is provided, default to 'strong'.\n if (_changedProperties.has('variant')) {\n if (!this.variant) {\n this.variant = 'strong';\n }\n }\n\n // If an invalid value is provided, default to 'medium'.\n if (_changedProperties.has('size')) {\n if (!this.size) {\n this.size = 'medium';\n }\n }\n\n if (_changedProperties.has('iconOnly')) {\n if (this.getAttribute('icon-only') !== null) {\n console.warn(\n \"The 'iconOnly' property is deprecated and will be removed in a future release. The button automatically detects if it only contains an icon and applies the appropriate styling.\",\n );\n }\n }\n\n super.update(_changedProperties);\n }\n\n /**\n * Programmatically clicks the button.\n */\n public 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._dispatchClickEvent();\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 _dispatchClickEvent(): void {\n /**\n * @type {Event} - Standard DOM event with the type `click`.\n * This event is dispatched when the button is clicked, either via mouse or keyboard interaction.\n * */\n this.dispatchEvent(\n new MouseEvent('click', { bubbles: true, composed: true }),\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(): boolean {\n return false;\n }\n\n private _getIconSize(): string {\n switch (this.size) {\n case 'small':\n return '1.25rem';\n case 'medium':\n case 'large':\n default:\n return '1.5rem';\n }\n }\n\n private _handleSlotChange(event: Event): void {\n const nodes = (event.target as HTMLSlotElement).assignedNodes();\n\n const validNodes = nodes.filter(\n node =>\n node.nodeType === Node.ELEMENT_NODE ||\n (node.nodeType === Node.TEXT_NODE && node.textContent?.trim()),\n );\n\n if (validNodes.length === 0) {\n return;\n }\n\n const firstNode: Node = validNodes[0];\n\n // if the first node is an icon, style it.\n if (\n firstNode.nodeType === Node.ELEMENT_NODE &&\n (firstNode as Element).tagName.toLowerCase().startsWith('fhi-icon')\n ) {\n const firstIcon = firstNode as HTMLElement;\n\n if (this.iconOnly || validNodes.length === 1) {\n if (!this.iconOnly) {\n this.iconOnly = true;\n }\n\n firstIcon.setAttribute('size', this._getIconSize());\n return;\n }\n\n if (this.size != 'small') {\n firstIcon.style.marginRight = 'var(--fhi-spacing-050)';\n }\n firstIcon.style.marginLeft = 'calc(-1 * var(--fhi-spacing-050))';\n firstIcon.setAttribute('size', this._getIconSize());\n }\n\n const lastNode: Node = validNodes[validNodes.length - 1];\n\n // if the last node is an icon, style it.\n if (\n lastNode.nodeType === Node.ELEMENT_NODE &&\n (lastNode as Element).tagName.toLowerCase().startsWith('fhi-icon')\n ) {\n const lastIcon = lastNode as HTMLElement;\n\n lastIcon.style.marginRight = 'calc(-1 * var(--fhi-spacing-050))';\n if (this.size != 'small') {\n lastIcon.style.marginLeft = 'var(--fhi-spacing-050)';\n }\n lastIcon.setAttribute('size', this._getIconSize());\n }\n }\n\n render() {\n return html`<button\n ?disabled=${this.disabled}\n type=${this.type}\n @keyup=${this._handleKeyup}\n @keydown=${this._handleKeydown}\n @click=${this._handleClick}\n ?data-icon-only=${this.iconOnly}\n >\n <div class=\"slot-container\">\n <slot @slotchange=${this._handleSlotChange}></slot>\n </div>\n </button>`;\n }\n\n static styles = css`\n :host {\n display: block;\n width: fit-content;\n\n button {\n border-radius: var(--fhi-border-radius-full);\n border: solid var(--fhi-dimension-border-width);\n font-family: var(--fhi-font-family-default);\n -webkit-font-smoothing: antialiased;\n transition: var(--fhi-motion-duration-quick)\n var(--fhi-motion-ease-default);\n width: 100%;\n justify-items: center;\n\n cursor: pointer;\n &:disabled {\n opacity: var(--fhi-opacity-disabled);\n cursor: not-allowed;\n }\n }\n\n .slot-container {\n display: flex;\n align-items: center;\n gap: 0.25rem;\n }\n }\n\n :host([size='large']) button {\n font-size: var(--fhi-typography-label-large-font-size);\n font-weight: var(--fhi-typography-label-large-font-weight);\n line-height: var(--fhi-typography-label-large-line-height);\n letter-spacing: var(--fhi-typography-label-large-letter-spacing);\n padding: calc(var(--fhi-spacing-200) - var(--fhi-dimension-border-width))\n calc(\n var(--fhi-spacing-300) + var(--fhi-spacing-050) - var(\n --fhi-dimension-border-width\n )\n );\n }\n\n :host([size='large'][variant='text']) button {\n padding: calc(var(--fhi-spacing-200) - var(--fhi-dimension-border-width))\n calc(var(--fhi-spacing-300) - var(--fhi-dimension-border-width));\n }\n\n :host([size='medium']) button {\n font-size: var(--fhi-typography-label-medium-font-size);\n font-weight: var(--fhi-typography-label-medium-font-weight);\n line-height: var(--fhi-typography-label-medium-line-height);\n letter-spacing: var(--fhi-typography-label-medium-letter-spacing);\n padding: calc(var(--fhi-spacing-100) - var(--fhi-dimension-border-width))\n calc(\n var(--fhi-spacing-200) + var(--fhi-spacing-050) - var(\n --fhi-dimension-border-width\n )\n );\n }\n\n :host([size='medium'][variant='text']) button {\n padding: calc(var(--fhi-spacing-100) - var(--fhi-dimension-border-width))\n calc(var(--fhi-spacing-200) - var(--fhi-dimension-border-width));\n }\n\n :host([size='small']) button {\n font-size: var(--fhi-typography-label-medium-font-size);\n font-weight: var(--fhi-typography-label-medium-font-weight);\n line-height: var(--fhi-typography-label-medium-line-height);\n letter-spacing: var(--fhi-typography-label-medium-letter-spacing);\n padding: calc(var(--fhi-spacing-050) - var(--fhi-dimension-border-width))\n calc(\n var(--fhi-spacing-150) + var(--fhi-spacing-050) - var(\n --fhi-dimension-border-width\n )\n );\n }\n\n :host([size='small'][variant='text']) button {\n padding: calc(var(--fhi-spacing-050) - var(--fhi-dimension-border-width))\n calc(var(--fhi-spacing-150) - var(--fhi-dimension-border-width));\n }\n\n :host([color='accent'][variant='strong']) button {\n background-color: var(--fhi-color-accent-base-default);\n border-color: var(--fhi-color-accent-base-default);\n color: var(--fhi-color-accent-text-inverted);\n &:hover {\n background-color: var(--fhi-color-accent-base-hover);\n border-color: var(--fhi-color-accent-base-hover);\n color: var(--fhi-color-accent-text-inverted);\n }\n &:active {\n background-color: var(--fhi-color-accent-base-active);\n border-color: var(--fhi-color-accent-base-active);\n color: var(--fhi-color-accent-text-inverted);\n }\n &:disabled {\n background-color: var(--fhi-color-accent-base-default);\n border-color: var(--fhi-color-accent-base-default);\n color: var(--fhi-color-accent-text-inverted);\n }\n }\n\n :host([color='accent'][variant='subtle']) button {\n background-color: var(--fhi-color-accent-surface-default);\n border-color: var(--fhi-color-accent-surface-default);\n color: var(--fhi-color-accent-text-subtle);\n &:hover {\n background-color: var(--fhi-color-accent-surface-hover);\n border-color: var(--fhi-color-accent-surface-hover);\n color: var(--fhi-color-accent-text-default);\n }\n &:active {\n background-color: var(--fhi-color-accent-surface-active);\n border-color: var(--fhi-color-accent-surface-active);\n color: var(--fhi-color-accent-text-default);\n }\n &:disabled {\n background-color: var(--fhi-color-accent-surface-default);\n border-color: var(--fhi-color-accent-surface-default);\n color: var(--fhi-color-accent-text-subtle);\n }\n }\n\n :host([color='accent'][variant='outlined']) button {\n background-color: transparent;\n border-color: var(--fhi-color-accent-border-subtle);\n color: var(--fhi-color-accent-text-subtle);\n &:hover {\n background-color: var(--fhi-color-accent-surface-default);\n border-color: var(--fhi-color-accent-surface-default);\n color: var(--fhi-color-accent-text-default);\n }\n &:active {\n background-color: var(--fhi-color-accent-surface-hover);\n border-color: var(--fhi-color-accent-surface-hover);\n color: var(--fhi-color-accent-text-default);\n }\n &:disabled {\n background-color: transparent;\n border-color: var(--fhi-color-accent-border-subtle);\n color: var(--fhi-color-accent-text-subtle);\n }\n }\n\n :host([color='accent'][variant='text']) button {\n background-color: transparent;\n border-color: transparent;\n color: var(--fhi-color-accent-text-subtle);\n &:hover {\n background-color: var(--fhi-color-accent-surface-default);\n border-color: var(--fhi-color-accent-surface-default);\n color: var(--fhi-color-accent-text-default);\n }\n &:active {\n background-color: var(--fhi-color-accent-surface-hover);\n border-color: var(--fhi-color-accent-surface-hover);\n color: var(--fhi-color-accent-text-default);\n }\n &:disabled {\n background-color: transparent;\n border-color: transparent;\n color: var(--fhi-color-accent-text-default);\n }\n }\n\n :host([color='neutral'][variant='strong']) button {\n background-color: var(--fhi-color-neutral-base-default);\n border-color: var(--fhi-color-neutral-base-default);\n color: var(--fhi-color-neutral-text-inverted);\n &:hover {\n background-color: var(--fhi-color-neutral-base-hover);\n border-color: var(--fhi-color-neutral-base-hover);\n color: var(--fhi-color-neutral-text-inverted);\n }\n &:active {\n background-color: var(--fhi-color-neutral-base-active);\n border-color: var(--fhi-color-neutral-base-active);\n color: var(--fhi-color-neutral-text-inverted);\n }\n &:disabled {\n background-color: var(--fhi-color-neutral-base-default);\n border-color: var(--fhi-color-neutral-base-default);\n color: var(--fhi-color-neutral-text-inverted);\n }\n }\n\n :host([color='neutral'][variant='subtle']) button {\n background-color: var(--fhi-color-neutral-surface-default);\n border-color: var(--fhi-color-neutral-surface-default);\n color: var(--fhi-color-neutral-text-subtle);\n &:hover {\n background-color: var(--fhi-color-neutral-surface-hover);\n border-color: var(--fhi-color-neutral-surface-hover);\n color: var(--fhi-color-neutral-text-default);\n }\n &:active {\n background-color: var(--fhi-color-neutral-surface-active);\n border-color: var(--fhi-color-neutral-surface-active);\n color: var(--fhi-color-neutral-text-default);\n }\n &:disabled {\n background-color: var(--fhi-color-neutral-surface-default);\n border-color: var(--fhi-color-neutral-surface-default);\n color: var(--fhi-color-neutral-text-default);\n }\n }\n\n :host([color='neutral'][variant='outlined']) button {\n background-color: transparent;\n border-color: var(--fhi-color-neutral-border-subtle);\n color: var(--fhi-color-neutral-text-subtle);\n &:hover {\n background-color: var(--fhi-color-neutral-surface-default);\n border-color: var(--fhi-color-neutral-surface-default);\n color: var(--fhi-color-neutral-text-default);\n }\n &:active {\n background-color: var(--fhi-color-neutral-surface-hover);\n border-color: var(--fhi-color-neutral-surface-hover);\n color: var(--fhi-color-neutral-text-default);\n }\n &:disabled {\n background-color: transparent;\n border-color: var(--fhi-color-neutral-border-subtle);\n color: var(--fhi-color-neutral-text-subtle);\n }\n }\n\n :host([color='neutral'][variant='text']) button {\n background-color: transparent;\n border-color: transparent;\n color: var(--fhi-color-neutral-text-subtle);\n &:hover {\n background-color: var(--fhi-color-neutral-surface-default);\n border-color: var(--fhi-color-neutral-surface-default);\n color: var(--fhi-color-neutral-text-default);\n }\n &:active {\n background-color: var(--fhi-color-neutral-surface-hover);\n border-color: var(--fhi-color-neutral-surface-hover);\n color: var(--fhi-color-neutral-text-default);\n }\n &:disabled {\n background-color: transparent;\n border-color: transparent;\n color: var(--fhi-color-neutral-text-subtle);\n }\n }\n\n :host([color='danger'][variant='strong']) button {\n background-color: var(--fhi-color-danger-base-default);\n border-color: var(--fhi-color-danger-base-default);\n color: var(--fhi-color-danger-text-inverted);\n &:hover {\n background-color: var(--fhi-color-danger-base-hover);\n border-color: var(--fhi-color-danger-base-hover);\n color: var(--fhi-color-danger-text-inverted);\n }\n &:active {\n background-color: var(--fhi-color-danger-base-active);\n border-color: var(--fhi-color-danger-base-active);\n color: var(--fhi-color-danger-text-inverted);\n }\n &:disabled {\n background-color: var(--fhi-color-danger-base-default);\n border-color: var(--fhi-color-danger-base-default);\n color: var(--fhi-color-danger-text-inverted);\n }\n }\n\n :host([color='danger'][variant='subtle']) button {\n background-color: var(--fhi-color-danger-surface-default);\n border-color: var(--fhi-color-danger-surface-default);\n color: var(--fhi-color-danger-text-subtle);\n &:hover {\n background-color: var(--fhi-color-danger-surface-hover);\n border-color: var(--fhi-color-danger-surface-hover);\n color: var(--fhi-color-danger-text-default);\n }\n &:active {\n background-color: var(--fhi-color-danger-surface-active);\n border-color: var(--fhi-color-danger-surface-active);\n color: var(--fhi-color-danger-text-default);\n }\n &:disabled {\n background-color: var(--fhi-color-danger-surface-default);\n border-color: var(--fhi-color-danger-surface-default);\n color: var(--fhi-color-danger-text-subtle);\n }\n }\n\n :host([color='danger'][variant='outlined']) button {\n background-color: transparent;\n border-color: var(--fhi-color-danger-border-subtle);\n color: var(--fhi-color-danger-text-subtle);\n &:hover {\n background-color: var(--fhi-color-danger-surface-default);\n border-color: var(--fhi-color-danger-surface-default);\n color: var(--fhi-color-danger-text-default);\n }\n &:active {\n background-color: var(--fhi-color-danger-surface-hover);\n border-color: var(--fhi-color-danger-surface-hover);\n color: var(--fhi-color-danger-text-default);\n }\n &:disabled {\n background-color: transparent;\n border-color: var(--fhi-color-danger-border-subtle);\n color: var(--fhi-color-danger-text-subtle);\n }\n }\n\n :host([color='danger'][variant='text']) button {\n background-color: transparent;\n border-color: transparent;\n color: var(--fhi-color-danger-text-subtle);\n &:hover {\n background-color: var(--fhi-color-danger-surface-default);\n border-color: var(--fhi-color-danger-surface-default);\n color: var(--fhi-color-danger-text-default);\n }\n &:active {\n background-color: var(--fhi-color-danger-surface-hover);\n border-color: var(--fhi-color-danger-surface-hover);\n color: var(--fhi-color-danger-text-default);\n }\n &:disabled {\n background-color: transparent;\n border-color: transparent;\n color: var(--fhi-color-danger-text-subtle);\n }\n }\n\n :host([size='small']) button[data-icon-only] {\n padding: calc(0.375rem - var(--fhi-dimension-border-width));\n }\n\n :host([size='medium']) button[data-icon-only] {\n padding: calc(var(--fhi-spacing-100) - var(--fhi-dimension-border-width));\n }\n\n :host([size='large']) button[data-icon-only] {\n padding: calc(var(--fhi-spacing-200) - var(--fhi-dimension-border-width));\n }\n `;\n}\n"],"mappings":"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"}
package/fhi-checkbox.js CHANGED
@@ -63,49 +63,7 @@ var s = "fhi-checkbox", c = class extends r {
63
63
  static {
64
64
  this.styles = t`
65
65
  :host {
66
- --typography-font-family: var(--fhi-font-family-default);
67
- --typography-font-size: var(--fhi-typography-body-medium-font-size);
68
- --typography-font-weight: var(--fhi-typography-body-medium-font-weight);
69
- --typography-line-height: var(--fhi-typography-body-medium-line-height);
70
- --typography-letter-spacing: var(
71
- --fhi-typography-body-medium-letter-spacing
72
- );
73
-
74
- --color-text: var(--fhi-color-neutral-text-default);
75
- --color-checkbox-checkmark: var(--fhi-color-neutral-text-inverted);
76
- --color-checkbox: var(--fhi-color-neutral-background-default);
77
- --color-checkbox-border: var(--fhi-color-neutral-border-default);
78
- --color-checkbox-hover: var(--fhi-color-accent-background-subtle);
79
- --color-checkbox-border-hover: var(--fhi-color-accent-border-strong);
80
- --color-checkbox-border-active: var(--fhi-color-accent-border-strong);
81
- --color-checkbox-active: var(--fhi-color-accent-surface-default);
82
- --color-checkbox-checked: var(--fhi-color-neutral-base-default);
83
- --color-checkbox-checked-hover: var(--fhi-color-accent-base-hover);
84
- --color-checkbox-checked-active: var(--fhi-color-accent-base-active);
85
- --color-checkbox-error: var(--fhi-color-danger-background-default);
86
- --color-checkbox-border-error: var(--fhi-color-danger-border-default);
87
- --color-checkbox-error-hover: var(--fhi-color-danger-background-subtle);
88
- --color-checkbox-border-error-hover: var(
89
- --fhi-color-danger-border-strong
90
- );
91
- --color-checkbox-error-active: var(--fhi-color-danger-surface-default);
92
- --color-checkbox-error-checked: var(--fhi-color-danger-base-default);
93
- --color-checkbox-checked-error-hover: var(--fhi-color-danger-base-hover);
94
- --color-checkbox-checked-error-active: var(
95
- --fhi-color-danger-base-active
96
- );
97
- --color-checkbox-outline: var(--fhi-color-accent-surface-hover);
98
- --color-checkbox-outline-error: var(--fhi-color-danger-surface-hover);
99
-
100
- --dimension-checkbox-gap: var(--fhi-spacing-050);
101
- --dimension-checkbox-border-radius: var(--fhi-border-radius-050);
102
- --dimension-checkbox-border-width: var(--fhi-dimension-border-width);
103
- --dimension-checkbox-size: 1.125rem;
104
- --dimension-checkbox-margin: 3px;
105
-
106
- --opacity-disabled: var(--fhi-opacity-disabled);
107
- --motion-checkbox-transition: var(--fhi-motion-ease-default)
108
- var(--fhi-motion-duration-quick);
66
+ --fhi-checkbox-color: currentcolor;
109
67
  }
110
68
 
111
69
  :host {
@@ -117,54 +75,55 @@ var s = "fhi-checkbox", c = class extends r {
117
75
  align-items: center;
118
76
  display: flex;
119
77
  position: relative;
120
- color: var(--color-text);
121
- font-family: var(--typography-font-family);
78
+ color: var(--fhi-checkbox-color);
79
+ font-family: var(--fhi-font-family-default);
122
80
  -webkit-font-smoothing: antialiased;
123
- font-size: var(--typography-font-size);
124
- font-weight: var(--typography-font-weight);
125
- line-height: var(--typography-line-height);
126
- letter-spacing: var(--typography-letter-spacing);
127
- gap: var(--dimension-checkbox-gap);
81
+ font-size: var(--fhi-typography-body-medium-font-size);
82
+ font-weight: var(--fhi-typography-body-medium-font-weight);
83
+ line-height: var(--fhi-typography-body-medium-line-height);
84
+ letter-spacing: var(--fhi-typography-body-medium-letter-spacing);
85
+ gap: var(--fhi-spacing-050);
128
86
  }
129
87
 
130
88
  input[type='checkbox'] {
131
- margin: var(--dimension-checkbox-margin);
89
+ margin: 3px;
132
90
  appearance: none;
133
- width: var(--dimension-checkbox-size);
134
- height: var(--dimension-checkbox-size);
135
- background-color: var(--color-checkbox);
136
- border: var(--dimension-checkbox-border-width) solid
137
- var(--color-checkbox-border);
138
- border-radius: var(--dimension-checkbox-border-radius);
139
- transition: var(--motion-checkbox-transition);
91
+ width: 1.125rem;
92
+ height: 1.125rem;
93
+ background-color: var(--fhi-color-neutral-background-default);
94
+ border: var(--fhi-dimension-border-width) solid
95
+ var(--fhi-color-neutral-border-default);
96
+ border-radius: var(--fhi-border-radius-050);
97
+ transition: var(--fhi-motion-ease-default)
98
+ var(--fhi-motion-duration-quick);
140
99
 
141
100
  &:hover {
142
- background-color: var(--color-checkbox-hover);
143
- border-color: var(--color-checkbox-border-hover);
101
+ background-color: var(--fhi-color-accent-background-subtle);
102
+ border-color: var(--fhi-color-accent-border-strong);
144
103
  }
145
104
 
146
105
  &:active {
147
- background-color: var(--color-checkbox-active);
148
- outline: solid 5px var(--color-checkbox-outline);
149
- border-color: var(--color-checkbox-border-active);
106
+ background-color: var(--fhi-color-accent-surface-default);
107
+ outline: solid 5px var(--fhi-color-accent-surface-hover);
108
+ border-color: var(--fhi-color-accent-border-strong);
150
109
  }
151
110
 
152
111
  &:checked {
153
- background-color: var(--color-checkbox-checked);
154
- border-color: var(--color-checkbox-checked);
112
+ background-color: var(--fhi-color-neutral-base-default);
113
+ border-color: var(--fhi-color-neutral-base-default);
155
114
  ~ .checkmark {
156
- fill: var(--color-checkbox-checkmark);
115
+ fill: var(--fhi-color-neutral-text-inverted);
157
116
  visibility: visible;
158
117
  opacity: 1;
159
118
  }
160
119
 
161
120
  &:hover {
162
- background-color: var(--color-checkbox-checked-hover);
163
- border-color: var(--color-checkbox-checked-hover);
121
+ background-color: var(--fhi-color-accent-base-hover);
122
+ border-color: var(--fhi-color-accent-base-hover);
164
123
  }
165
124
  &:active {
166
- background-color: var(--color-checkbox-checked-active);
167
- border-color: var(--color-checkbox-checked-active);
125
+ background-color: var(--fhi-color-accent-base-active);
126
+ border-color: var(--fhi-color-accent-base-active);
168
127
  }
169
128
  }
170
129
  }
@@ -172,16 +131,17 @@ var s = "fhi-checkbox", c = class extends r {
172
131
  .checkmark {
173
132
  visibility: hidden;
174
133
  opacity: 0;
175
- transition: opacity var(--motion-checkbox-transition);
134
+ transition: opacity var(--fhi-motion-ease-default)
135
+ var(--fhi-motion-duration-quick);
176
136
  position: absolute;
177
- height: var(--dimension-checkbox-size);
178
- width: var(--dimension-checkbox-size);
179
- margin-left: var(--dimension-checkbox-margin);
137
+ height: 1.125rem;
138
+ width: 1.125rem;
139
+ margin-left: 3px;
180
140
  }
181
141
  }
182
142
 
183
143
  :host([disabled]) {
184
- opacity: var(--opacity-disabled);
144
+ opacity: var(--fhi-opacity-disabled);
185
145
  label,
186
146
  input {
187
147
  cursor: not-allowed;
@@ -189,55 +149,55 @@ var s = "fhi-checkbox", c = class extends r {
189
149
 
190
150
  input {
191
151
  &:hover {
192
- background-color: var(--color-checkbox);
193
- border-color: var(--color-checkbox-border);
152
+ background-color: var(--fhi-color-neutral-background-default);
153
+ border-color: var(--fhi-color-neutral-border-default);
194
154
  }
195
155
 
196
156
  &:active {
197
157
  outline: none;
198
- background-color: var(--color-checkbox);
199
- border-color: var(--color-checkbox-border);
158
+ background-color: var(--fhi-color-neutral-background-default);
159
+ border-color: var(--fhi-color-neutral-border-default);
200
160
  }
201
161
 
202
162
  &:checked:hover {
203
- background-color: var(--color-checkbox-checked);
204
- border-color: var(--color-checkbox-checked);
163
+ background-color: var(--fhi-color-neutral-base-default);
164
+ border-color: var(--fhi-color-neutral-base-default);
205
165
  }
206
166
 
207
167
  &:checked:active {
208
- background-color: var(--color-checkbox-checked);
209
- border-color: var(--color-checkbox-checked);
168
+ background-color: var(--fhi-color-neutral-base-default);
169
+ border-color: var(--fhi-color-neutral-base-default);
210
170
  }
211
171
  }
212
172
  }
213
173
 
214
174
  :host([status='error']:not([disabled])) {
215
175
  input[type='checkbox'] {
216
- background-color: var(--color-checkbox-error);
217
- border-color: var(--color-checkbox-border-error);
176
+ background-color: var(--fhi-color-danger-background-default);
177
+ border-color: var(--fhi-color-danger-border-default);
218
178
 
219
179
  &:hover {
220
- background-color: var(--color-checkbox-error-hover);
221
- border-color: var(--color-checkbox-border-error-hover);
180
+ background-color: var(--fhi-color-danger-background-subtle);
181
+ border-color: var(--fhi-color-danger-border-strong);
222
182
  }
223
183
 
224
184
  &:active {
225
- background-color: var(--color-checkbox-error-active);
226
- outline: solid 5px var(--color-checkbox-outline-error);
227
- border-color: var(--color-checkbox-border-error-hover);
185
+ background-color: var(--fhi-color-danger-surface-default);
186
+ outline: solid 5px var(--fhi-color-danger-surface-hover);
187
+ border-color: var(--fhi-color-danger-border-strong);
228
188
  }
229
189
 
230
190
  &:checked {
231
- background-color: var(--color-checkbox-error-checked);
232
- border-color: var(--color-checkbox-error-checked);
191
+ background-color: var(--fhi-color-danger-base-default);
192
+ border-color: var(--fhi-color-danger-base-default);
233
193
  &:hover {
234
- background-color: var(--color-checkbox-checked-error-hover);
235
- border-color: var(--color-checkbox-checked-error-hover);
194
+ background-color: var(--fhi-color-danger-base-hover);
195
+ border-color: var(--fhi-color-danger-base-hover);
236
196
  }
237
197
 
238
198
  &:active {
239
- background-color: var(--color-checkbox-checked-error-active);
240
- border-color: var(--color-checkbox-checked-error-active);
199
+ background-color: var(--fhi-color-danger-base-active);
200
+ border-color: var(--fhi-color-danger-base-active);
241
201
  }
242
202
  }
243
203
  }
package/fhi-checkbox.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"fhi-checkbox.js","names":[],"sources":["../../src/components/fhi-checkbox/fhi-checkbox.component.ts"],"sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nexport const FhiCheckboxSelector = 'fhi-checkbox';\n\n/**\n * ## FHI Checkbox\n *\n * {@link https://designsystem.fhi.no/?path=/docs/komponenter-checkbox--docs}\n *\n * The `<fhi-checkbox>` component represents a checkbox input element styled and implemented according to the FHI Design System guidelines.\n * It allows users to make binary choices, such as selecting or deselecting an option.\n *\n * @tag fhi-checkbox\n * @element fhi-checkbox\n */\n@customElement(FhiCheckboxSelector)\nexport class FhiCheckbox extends LitElement {\n /** @internal */\n static readonly formAssociated = true;\n\n /**\n * The text label assigned to and displayed next to the checkbox.\n * You should always provide a label.\n * @type {string}\n */\n @property({ type: String }) label?: string = undefined;\n\n /**\n * The name of the checkbox. This is submitted with the form data as a `key` when the checkbox is checked.\n * @type {string}\n */\n @property({ type: String }) name?: string = undefined;\n\n /**\n * The value of the checkbox. This is submitted with the form data as a `value` when the checkbox is checked.\n * @type {string}\n */\n @property({ type: String }) value: string = 'on';\n\n /**\n * Sets the visual status of the checkbox. There is currently only one status available: `error`.\n * The `error` status is used to indicate that there is an issue with the checkbox, such as a required checkbox not being checked.\n * @reflect\n * @type {'error' | undefined}\n */\n @property({ type: String, reflect: true }) status?: 'error' | undefined;\n\n /**\n * Whether the checkbox is checked or not.\n * @type {boolean}\n */\n @property({ type: Boolean }) checked? = false;\n\n /**\n * Disables the checkbox. This changes its appearance and makes it non-interactive.\n * @reflect\n * @type {boolean}\n */\n @property({ type: Boolean, reflect: true }) disabled? = false;\n\n private _internals: ElementInternals;\n\n constructor() {\n super();\n this._internals = this.attachInternals();\n }\n\n connectedCallback(): void {\n super.connectedCallback();\n this._updateFormValue();\n }\n\n private _handleChange(event: Event): void {\n this.checked = (event.target as HTMLInputElement).checked;\n this._updateFormValue();\n\n event.stopPropagation();\n this._dispatchChangeEvent();\n }\n\n private _handleInput(event: Event): void {\n event.stopPropagation();\n this._dispatchInputEvent();\n }\n\n private _updateFormValue() {\n this._internals.setFormValue(this.checked ? this.value : null);\n }\n\n private _dispatchChangeEvent(): void {\n /**\n * @type {Event} - Standard DOM event with the type `change`.\n * This event is dispatched when the checkbox is checked or unchecked.\n */\n this.dispatchEvent(new Event('change', { bubbles: true }));\n }\n\n private _dispatchInputEvent(): void {\n /**\n * @type {Event} - Standard DOM event with the type `input`.\n * This event is dispatched when the checkbox is checked or unchecked.\n */\n this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));\n }\n\n public formResetCallback() {\n this.checked = false;\n this._updateFormValue();\n }\n\n render() {\n return html`\n <label>\n <input\n type=\"checkbox\"\n name=\"${ifDefined(this.name)}\"\n value=\"${ifDefined(this.value)}\"\n ?disabled=${this.disabled}\n ?checked=${this.checked}\n @change=${this._handleChange}\n @input=${this._handleInput}\n />\n <svg\n class=\"checkmark\"\n width=\"18\"\n height=\"18\"\n viewBox=\"0 0 18 18\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M12.043 6.04295C12.4335 5.65243 13.0666 5.65243 13.4571 6.04295C13.8476 6.43348 13.8476 7.06649 13.4571 7.45702L8.95708 11.957C8.56655 12.3475 7.93354 12.3475 7.54302 11.957L5.29302 9.70702C4.90249 9.31649 4.90249 8.68348 5.29302 8.29295C5.65913 7.92684 6.23813 7.90424 6.63091 8.22459L6.70708 8.29295L8.25005 9.83592L12.043 6.04295Z\"\n />\n </svg>\n\n ${this.label}\n </label>\n `;\n }\n\n static styles = css`\n :host {\n --typography-font-family: var(--fhi-font-family-default);\n --typography-font-size: var(--fhi-typography-body-medium-font-size);\n --typography-font-weight: var(--fhi-typography-body-medium-font-weight);\n --typography-line-height: var(--fhi-typography-body-medium-line-height);\n --typography-letter-spacing: var(\n --fhi-typography-body-medium-letter-spacing\n );\n\n --color-text: var(--fhi-color-neutral-text-default);\n --color-checkbox-checkmark: var(--fhi-color-neutral-text-inverted);\n --color-checkbox: var(--fhi-color-neutral-background-default);\n --color-checkbox-border: var(--fhi-color-neutral-border-default);\n --color-checkbox-hover: var(--fhi-color-accent-background-subtle);\n --color-checkbox-border-hover: var(--fhi-color-accent-border-strong);\n --color-checkbox-border-active: var(--fhi-color-accent-border-strong);\n --color-checkbox-active: var(--fhi-color-accent-surface-default);\n --color-checkbox-checked: var(--fhi-color-neutral-base-default);\n --color-checkbox-checked-hover: var(--fhi-color-accent-base-hover);\n --color-checkbox-checked-active: var(--fhi-color-accent-base-active);\n --color-checkbox-error: var(--fhi-color-danger-background-default);\n --color-checkbox-border-error: var(--fhi-color-danger-border-default);\n --color-checkbox-error-hover: var(--fhi-color-danger-background-subtle);\n --color-checkbox-border-error-hover: var(\n --fhi-color-danger-border-strong\n );\n --color-checkbox-error-active: var(--fhi-color-danger-surface-default);\n --color-checkbox-error-checked: var(--fhi-color-danger-base-default);\n --color-checkbox-checked-error-hover: var(--fhi-color-danger-base-hover);\n --color-checkbox-checked-error-active: var(\n --fhi-color-danger-base-active\n );\n --color-checkbox-outline: var(--fhi-color-accent-surface-hover);\n --color-checkbox-outline-error: var(--fhi-color-danger-surface-hover);\n\n --dimension-checkbox-gap: var(--fhi-spacing-050);\n --dimension-checkbox-border-radius: var(--fhi-border-radius-050);\n --dimension-checkbox-border-width: var(--fhi-dimension-border-width);\n --dimension-checkbox-size: 1.125rem;\n --dimension-checkbox-margin: 3px;\n\n --opacity-disabled: var(--fhi-opacity-disabled);\n --motion-checkbox-transition: var(--fhi-motion-ease-default)\n var(--fhi-motion-duration-quick);\n }\n\n :host {\n display: flex;\n align-items: center;\n width: max-content;\n\n label {\n align-items: center;\n display: flex;\n position: relative;\n color: var(--color-text);\n font-family: var(--typography-font-family);\n -webkit-font-smoothing: antialiased;\n font-size: var(--typography-font-size);\n font-weight: var(--typography-font-weight);\n line-height: var(--typography-line-height);\n letter-spacing: var(--typography-letter-spacing);\n gap: var(--dimension-checkbox-gap);\n }\n\n input[type='checkbox'] {\n margin: var(--dimension-checkbox-margin);\n appearance: none;\n width: var(--dimension-checkbox-size);\n height: var(--dimension-checkbox-size);\n background-color: var(--color-checkbox);\n border: var(--dimension-checkbox-border-width) solid\n var(--color-checkbox-border);\n border-radius: var(--dimension-checkbox-border-radius);\n transition: var(--motion-checkbox-transition);\n\n &:hover {\n background-color: var(--color-checkbox-hover);\n border-color: var(--color-checkbox-border-hover);\n }\n\n &:active {\n background-color: var(--color-checkbox-active);\n outline: solid 5px var(--color-checkbox-outline);\n border-color: var(--color-checkbox-border-active);\n }\n\n &:checked {\n background-color: var(--color-checkbox-checked);\n border-color: var(--color-checkbox-checked);\n ~ .checkmark {\n fill: var(--color-checkbox-checkmark);\n visibility: visible;\n opacity: 1;\n }\n\n &:hover {\n background-color: var(--color-checkbox-checked-hover);\n border-color: var(--color-checkbox-checked-hover);\n }\n &:active {\n background-color: var(--color-checkbox-checked-active);\n border-color: var(--color-checkbox-checked-active);\n }\n }\n }\n\n .checkmark {\n visibility: hidden;\n opacity: 0;\n transition: opacity var(--motion-checkbox-transition);\n position: absolute;\n height: var(--dimension-checkbox-size);\n width: var(--dimension-checkbox-size);\n margin-left: var(--dimension-checkbox-margin);\n }\n }\n\n :host([disabled]) {\n opacity: var(--opacity-disabled);\n label,\n input {\n cursor: not-allowed;\n }\n\n input {\n &:hover {\n background-color: var(--color-checkbox);\n border-color: var(--color-checkbox-border);\n }\n\n &:active {\n outline: none;\n background-color: var(--color-checkbox);\n border-color: var(--color-checkbox-border);\n }\n\n &:checked:hover {\n background-color: var(--color-checkbox-checked);\n border-color: var(--color-checkbox-checked);\n }\n\n &:checked:active {\n background-color: var(--color-checkbox-checked);\n border-color: var(--color-checkbox-checked);\n }\n }\n }\n\n :host([status='error']:not([disabled])) {\n input[type='checkbox'] {\n background-color: var(--color-checkbox-error);\n border-color: var(--color-checkbox-border-error);\n\n &:hover {\n background-color: var(--color-checkbox-error-hover);\n border-color: var(--color-checkbox-border-error-hover);\n }\n\n &:active {\n background-color: var(--color-checkbox-error-active);\n outline: solid 5px var(--color-checkbox-outline-error);\n border-color: var(--color-checkbox-border-error-hover);\n }\n\n &:checked {\n background-color: var(--color-checkbox-error-checked);\n border-color: var(--color-checkbox-error-checked);\n &:hover {\n background-color: var(--color-checkbox-checked-error-hover);\n border-color: var(--color-checkbox-checked-error-hover);\n }\n\n &:active {\n background-color: var(--color-checkbox-checked-error-active);\n border-color: var(--color-checkbox-checked-error-active);\n }\n }\n }\n }\n `;\n}\n"],"mappings":";;;AAIA,IAAa,IAAsB,gBAc5B,IAAA,cAA0B,EAAW;;wBAET;;CA4CjC,cAAc;EAEZ,AADA,MAAM,gBAtCqC,KAAA,eAMD,KAAA,gBAMA,qBAcJ,oBAOgB,IAMtD,KAAK,aAAa,KAAK,gBAAgB;CACzC;CAEA,oBAA0B;EAExB,AADA,MAAM,kBAAkB,GACxB,KAAK,iBAAiB;CACxB;CAEA,cAAsB,GAAoB;EAKxC,AAJA,KAAK,UAAW,EAAM,OAA4B,SAClD,KAAK,iBAAiB,GAEtB,EAAM,gBAAgB,GACtB,KAAK,qBAAqB;CAC5B;CAEA,aAAqB,GAAoB;EAEvC,AADA,EAAM,gBAAgB,GACtB,KAAK,oBAAoB;CAC3B;CAEA,mBAA2B;EACzB,KAAK,WAAW,aAAa,KAAK,UAAU,KAAK,QAAQ,IAAI;CAC/D;CAEA,uBAAqC;EAKnC,KAAK,cAAc,IAAI,MAAM,UAAU,EAAE,SAAS,GAAK,CAAC,CAAC;CAC3D;CAEA,sBAAoC;EAKlC,KAAK,cAAc,IAAI,MAAM,SAAS;GAAE,SAAS;GAAM,UAAU;EAAK,CAAC,CAAC;CAC1E;CAEA,oBAA2B;EAEzB,AADA,KAAK,UAAU,IACf,KAAK,iBAAiB;CACxB;CAEA,SAAS;EACP,OAAO,CAAI;;;;kBAIG,EAAU,KAAK,IAAI,EAAE;mBACpB,EAAU,KAAK,KAAK,EAAE;sBACnB,KAAK,SAAS;qBACf,KAAK,QAAQ;oBACd,KAAK,cAAc;mBACpB,KAAK,aAAa;;;;;;;;;;;;;;UAc3B,KAAK,MAAM;;;CAGnB;;gBAEgB,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsLrB;GAxSG,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,MAMzB,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,MAMzB,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,MAQzB,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA,MAMxC,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,EAAA,WAAA,WAAA,KAAA,CAAA,MAO1B,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,UA3C3C,EAAc,CAAmB,CAAA,GAAA,CAAA"}
1
+ {"version":3,"file":"fhi-checkbox.js","names":[],"sources":["../../src/components/fhi-checkbox/fhi-checkbox.component.ts"],"sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nexport const FhiCheckboxSelector = 'fhi-checkbox';\n\n/**\n * ## FHI Checkbox\n *\n * {@link https://designsystem.fhi.no/?path=/docs/komponenter-checkbox--docs}\n *\n * The `<fhi-checkbox>` component represents a checkbox input element styled and implemented according to the FHI Design System guidelines.\n * It allows users to make binary choices, such as selecting or deselecting an option.\n *\n * @tag fhi-checkbox\n * @element fhi-checkbox\n */\n@customElement(FhiCheckboxSelector)\nexport class FhiCheckbox extends LitElement {\n /** @internal */\n static readonly formAssociated = true;\n\n /**\n * The text label assigned to and displayed next to the checkbox.\n * You should always provide a label.\n * @type {string}\n */\n @property({ type: String }) label?: string = undefined;\n\n /**\n * The name of the checkbox. This is submitted with the form data as a `key` when the checkbox is checked.\n * @type {string}\n */\n @property({ type: String }) name?: string = undefined;\n\n /**\n * The value of the checkbox. This is submitted with the form data as a `value` when the checkbox is checked.\n * @type {string}\n */\n @property({ type: String }) value: string = 'on';\n\n /**\n * Sets the visual status of the checkbox. There is currently only one status available: `error`.\n * The `error` status is used to indicate that there is an issue with the checkbox, such as a required checkbox not being checked.\n * @reflect\n * @type {'error' | undefined}\n */\n @property({ type: String, reflect: true }) status?: 'error' | undefined;\n\n /**\n * Whether the checkbox is checked or not.\n * @type {boolean}\n */\n @property({ type: Boolean }) checked? = false;\n\n /**\n * Disables the checkbox. This changes its appearance and makes it non-interactive.\n * @reflect\n * @type {boolean}\n */\n @property({ type: Boolean, reflect: true }) disabled? = false;\n\n private _internals: ElementInternals;\n\n constructor() {\n super();\n this._internals = this.attachInternals();\n }\n\n connectedCallback(): void {\n super.connectedCallback();\n this._updateFormValue();\n }\n\n private _handleChange(event: Event): void {\n this.checked = (event.target as HTMLInputElement).checked;\n this._updateFormValue();\n\n event.stopPropagation();\n this._dispatchChangeEvent();\n }\n\n private _handleInput(event: Event): void {\n event.stopPropagation();\n this._dispatchInputEvent();\n }\n\n private _updateFormValue() {\n this._internals.setFormValue(this.checked ? this.value : null);\n }\n\n private _dispatchChangeEvent(): void {\n /**\n * @type {Event} - Standard DOM event with the type `change`.\n * This event is dispatched when the checkbox is checked or unchecked.\n */\n this.dispatchEvent(new Event('change', { bubbles: true }));\n }\n\n private _dispatchInputEvent(): void {\n /**\n * @type {Event} - Standard DOM event with the type `input`.\n * This event is dispatched when the checkbox is checked or unchecked.\n */\n this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));\n }\n\n public formResetCallback() {\n this.checked = false;\n this._updateFormValue();\n }\n\n render() {\n return html`\n <label>\n <input\n type=\"checkbox\"\n name=\"${ifDefined(this.name)}\"\n value=\"${ifDefined(this.value)}\"\n ?disabled=${this.disabled}\n ?checked=${this.checked}\n @change=${this._handleChange}\n @input=${this._handleInput}\n />\n <svg\n class=\"checkmark\"\n width=\"18\"\n height=\"18\"\n viewBox=\"0 0 18 18\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M12.043 6.04295C12.4335 5.65243 13.0666 5.65243 13.4571 6.04295C13.8476 6.43348 13.8476 7.06649 13.4571 7.45702L8.95708 11.957C8.56655 12.3475 7.93354 12.3475 7.54302 11.957L5.29302 9.70702C4.90249 9.31649 4.90249 8.68348 5.29302 8.29295C5.65913 7.92684 6.23813 7.90424 6.63091 8.22459L6.70708 8.29295L8.25005 9.83592L12.043 6.04295Z\"\n />\n </svg>\n\n ${this.label}\n </label>\n `;\n }\n\n static styles = css`\n :host {\n --fhi-checkbox-color: currentcolor;\n }\n\n :host {\n display: flex;\n align-items: center;\n width: max-content;\n\n label {\n align-items: center;\n display: flex;\n position: relative;\n color: var(--fhi-checkbox-color);\n font-family: var(--fhi-font-family-default);\n -webkit-font-smoothing: antialiased;\n font-size: var(--fhi-typography-body-medium-font-size);\n font-weight: var(--fhi-typography-body-medium-font-weight);\n line-height: var(--fhi-typography-body-medium-line-height);\n letter-spacing: var(--fhi-typography-body-medium-letter-spacing);\n gap: var(--fhi-spacing-050);\n }\n\n input[type='checkbox'] {\n margin: 3px;\n appearance: none;\n width: 1.125rem;\n height: 1.125rem;\n background-color: var(--fhi-color-neutral-background-default);\n border: var(--fhi-dimension-border-width) solid\n var(--fhi-color-neutral-border-default);\n border-radius: var(--fhi-border-radius-050);\n transition: var(--fhi-motion-ease-default)\n var(--fhi-motion-duration-quick);\n\n &:hover {\n background-color: var(--fhi-color-accent-background-subtle);\n border-color: var(--fhi-color-accent-border-strong);\n }\n\n &:active {\n background-color: var(--fhi-color-accent-surface-default);\n outline: solid 5px var(--fhi-color-accent-surface-hover);\n border-color: var(--fhi-color-accent-border-strong);\n }\n\n &:checked {\n background-color: var(--fhi-color-neutral-base-default);\n border-color: var(--fhi-color-neutral-base-default);\n ~ .checkmark {\n fill: var(--fhi-color-neutral-text-inverted);\n visibility: visible;\n opacity: 1;\n }\n\n &:hover {\n background-color: var(--fhi-color-accent-base-hover);\n border-color: var(--fhi-color-accent-base-hover);\n }\n &:active {\n background-color: var(--fhi-color-accent-base-active);\n border-color: var(--fhi-color-accent-base-active);\n }\n }\n }\n\n .checkmark {\n visibility: hidden;\n opacity: 0;\n transition: opacity var(--fhi-motion-ease-default)\n var(--fhi-motion-duration-quick);\n position: absolute;\n height: 1.125rem;\n width: 1.125rem;\n margin-left: 3px;\n }\n }\n\n :host([disabled]) {\n opacity: var(--fhi-opacity-disabled);\n label,\n input {\n cursor: not-allowed;\n }\n\n input {\n &:hover {\n background-color: var(--fhi-color-neutral-background-default);\n border-color: var(--fhi-color-neutral-border-default);\n }\n\n &:active {\n outline: none;\n background-color: var(--fhi-color-neutral-background-default);\n border-color: var(--fhi-color-neutral-border-default);\n }\n\n &:checked:hover {\n background-color: var(--fhi-color-neutral-base-default);\n border-color: var(--fhi-color-neutral-base-default);\n }\n\n &:checked:active {\n background-color: var(--fhi-color-neutral-base-default);\n border-color: var(--fhi-color-neutral-base-default);\n }\n }\n }\n\n :host([status='error']:not([disabled])) {\n input[type='checkbox'] {\n background-color: var(--fhi-color-danger-background-default);\n border-color: var(--fhi-color-danger-border-default);\n\n &:hover {\n background-color: var(--fhi-color-danger-background-subtle);\n border-color: var(--fhi-color-danger-border-strong);\n }\n\n &:active {\n background-color: var(--fhi-color-danger-surface-default);\n outline: solid 5px var(--fhi-color-danger-surface-hover);\n border-color: var(--fhi-color-danger-border-strong);\n }\n\n &:checked {\n background-color: var(--fhi-color-danger-base-default);\n border-color: var(--fhi-color-danger-base-default);\n &:hover {\n background-color: var(--fhi-color-danger-base-hover);\n border-color: var(--fhi-color-danger-base-hover);\n }\n\n &:active {\n background-color: var(--fhi-color-danger-base-active);\n border-color: var(--fhi-color-danger-base-active);\n }\n }\n }\n }\n `;\n}\n"],"mappings":";;;AAIA,IAAa,IAAsB,gBAc5B,IAAA,cAA0B,EAAW;;wBAET;;CA4CjC,cAAc;EAEZ,AADA,MAAM,gBAtCqC,KAAA,eAMD,KAAA,gBAMA,qBAcJ,oBAOgB,IAMtD,KAAK,aAAa,KAAK,gBAAgB;CACzC;CAEA,oBAA0B;EAExB,AADA,MAAM,kBAAkB,GACxB,KAAK,iBAAiB;CACxB;CAEA,cAAsB,GAAoB;EAKxC,AAJA,KAAK,UAAW,EAAM,OAA4B,SAClD,KAAK,iBAAiB,GAEtB,EAAM,gBAAgB,GACtB,KAAK,qBAAqB;CAC5B;CAEA,aAAqB,GAAoB;EAEvC,AADA,EAAM,gBAAgB,GACtB,KAAK,oBAAoB;CAC3B;CAEA,mBAA2B;EACzB,KAAK,WAAW,aAAa,KAAK,UAAU,KAAK,QAAQ,IAAI;CAC/D;CAEA,uBAAqC;EAKnC,KAAK,cAAc,IAAI,MAAM,UAAU,EAAE,SAAS,GAAK,CAAC,CAAC;CAC3D;CAEA,sBAAoC;EAKlC,KAAK,cAAc,IAAI,MAAM,SAAS;GAAE,SAAS;GAAM,UAAU;EAAK,CAAC,CAAC;CAC1E;CAEA,oBAA2B;EAEzB,AADA,KAAK,UAAU,IACf,KAAK,iBAAiB;CACxB;CAEA,SAAS;EACP,OAAO,CAAI;;;;kBAIG,EAAU,KAAK,IAAI,EAAE;mBACpB,EAAU,KAAK,KAAK,EAAE;sBACnB,KAAK,SAAS;qBACf,KAAK,QAAQ;oBACd,KAAK,cAAc;mBACpB,KAAK,aAAa;;;;;;;;;;;;;;UAc3B,KAAK,MAAM;;;CAGnB;;gBAEgB,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8IrB;GAhQG,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,MAMzB,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,MAMzB,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,MAQzB,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA,MAMxC,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,EAAA,WAAA,WAAA,KAAA,CAAA,MAO1B,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,UA3C3C,EAAc,CAAmB,CAAA,GAAA,CAAA"}
package/package.json CHANGED
@@ -1 +1 @@
1
- {"title":"FHI Designsystem","author":"FHI Designsystem team","name":"@folkehelseinstituttet/designsystem","version":"0.40.2","description":"The official design system for the Norwegian Institute of Public Health implemented as web components","keywords":["fhi","folkehelseinstituttet","components","design","system","framework","frontend","web-component","web component","ui"],"customElements":".temp/custom-elements.json","web-types":"./web-types.json","homepage":"https://github.com/FHIDev/Fhi.Designsystem","bugs":{"url":"https://github.com/FHIDev/Fhi.Designsystem/issues"},"repository":{"type":"git","url":"git+https://github.com/FHIDev/Fhi.Designsystem.git"},"license":"MIT","browserslist":["> 0.5%","last 2 versions"],"main":"index.js","type":"module","scripts":{"dev":"vite","build":"pnpm analyze && pnpm build:cdn && pnpm build:npm && pnpm build:github && pnpm clean","build:cdn":"tsc && cross-env DEPLOY_TARGET=cdn vite build","build:npm":"tsc && cross-env DEPLOY_TARGET=npm vite build","build:github":"tsc && cross-env DEPLOY_TARGET=github vite build","storybook":"storybook dev -p 6006","storybook:build":"pnpm analyze && storybook build","generate:icons":"node ./scripts/generate-icon-components.js --input ./src/assets/icons/ --output ./src/components/icons --clean-output-folder","test":"wtr ./**/*.test.ts --node-resolve --playwright --browsers chromium webkit","lint":"pnpm lint:eslint && pnpm lint:prettier","lint:eslint":"eslint \"**/*.{js,ts}\"","lint:prettier":"prettier \"**/*.js\" --check --ignore-path .gitignore","format":"pnpm format:eslint && pnpm format:prettier","format:eslint":"eslint \"**/*.{js,ts}\" --fix","format:prettier":"prettier \"**/*.js\" --write --ignore-path .gitignore","publish:npm":"pnpm build && cd dist/npm && npm publish","changelog:ci":"release-it --ci","analyze":"cem analyze --litelement","clean":"rimraf .temp","build-storybook":"storybook build"},"peerDependencies":{"lit":"~3.2.0"},"devDependencies":{"@custom-elements-manifest/analyzer":"^0.11.0","@esm-bundle/chai":"4.3.4-fix.0","@open-wc/testing":"~4.0.0","@playwright/test":"^1.61.0","@release-it/conventional-changelog":"~11.0.1","@storybook/addon-docs":"^10.4.6","@storybook/web-components-vite":"^10.4.6","@types/mocha":"~10.0.10","@types/node":"~26.0.0","@types/react":"^19.2.17","@wc-toolkit/cem-sorter":"^1.0.1","@wc-toolkit/type-parser":"^1.2.1","@web/dev-server":"~0.4.6","@web/dev-server-esbuild":"~1.0.5","@web/test-runner":"~0.20.2","@web/test-runner-playwright":"~0.11.1","cross-env":"10.1.0","custom-element-jet-brains-integration":"^1.7.0","lit":"~3.3.3","mocha":"~11.7.6","playwright":"^1.61.0","release-it":"~20.2.0","rimraf":"^6.1.3","storybook":"^10.4.6","storybook-design-token":"^5.0.0","svgo":"^4.0.1","vite":"~8.0.16","vite-plugin-static-copy":"~4.1.1"},"dependencies":{"@floating-ui/dom":"^1.7.6"},"pnpm":{"overrides":{"diff@>=6.0.0 <8.0.3":">=8.0.3","serialize-javascript@<=7.0.2":">=7.0.3","yaml@>=2.0.0 <2.8.3":">=2.8.3","serialize-javascript@>=5.0.0 <7.0.5":">=7.0.5","esbuild@>=0.27.3 <0.28.1":">=0.28.1","undici@>=7.23.0 <7.28.0":">=7.28.0","undici@>=7.0.0 <7.28.0":">=7.28.0"}},"exports":{"./fhi-button":{"default":"./fhi-button.js","types":"./fhi-button.d.ts"},"./fhi-checkbox":{"default":"./fhi-checkbox.js","types":"./fhi-checkbox.d.ts"},"./fhi-date-input":{"default":"./fhi-date-input.js","types":"./fhi-date-input.d.ts"},"./fhi-flex":{"default":"./fhi-flex.js","types":"./fhi-flex.d.ts"},"./fhi-grid":{"default":"./fhi-grid.js","types":"./fhi-grid.d.ts"},"./fhi-modal-dialog":{"default":"./fhi-modal-dialog.js","types":"./fhi-modal-dialog.d.ts"},"./fhi-radio":{"default":"./fhi-radio.js","types":"./fhi-radio.d.ts"},"./fhi-tag":{"default":"./fhi-tag.js","types":"./fhi-tag.d.ts"},"./fhi-text-input":{"default":"./fhi-text-input.js","types":"./fhi-text-input.d.ts"},"./fhi-tooltip":{"default":"./fhi-tooltip.js","types":"./fhi-tooltip.d.ts"},"./fhi-icon-arrow-down-left":{"default":"./fhi-icon-arrow-down-left.js","types":"./fhi-icon-arrow-down-left.d.ts"},"./fhi-icon-arrow-down-right":{"default":"./fhi-icon-arrow-down-right.js","types":"./fhi-icon-arrow-down-right.d.ts"},"./fhi-icon-arrow-down":{"default":"./fhi-icon-arrow-down.js","types":"./fhi-icon-arrow-down.d.ts"},"./fhi-icon-arrow-left":{"default":"./fhi-icon-arrow-left.js","types":"./fhi-icon-arrow-left.d.ts"},"./fhi-icon-arrow-right-left":{"default":"./fhi-icon-arrow-right-left.js","types":"./fhi-icon-arrow-right-left.d.ts"},"./fhi-icon-arrow-right":{"default":"./fhi-icon-arrow-right.js","types":"./fhi-icon-arrow-right.d.ts"},"./fhi-icon-arrow-up-down":{"default":"./fhi-icon-arrow-up-down.js","types":"./fhi-icon-arrow-up-down.d.ts"},"./fhi-icon-arrow-up-left":{"default":"./fhi-icon-arrow-up-left.js","types":"./fhi-icon-arrow-up-left.d.ts"},"./fhi-icon-arrow-up-right":{"default":"./fhi-icon-arrow-up-right.js","types":"./fhi-icon-arrow-up-right.d.ts"},"./fhi-icon-arrow-up":{"default":"./fhi-icon-arrow-up.js","types":"./fhi-icon-arrow-up.d.ts"},"./fhi-icon-bell":{"default":"./fhi-icon-bell.js","types":"./fhi-icon-bell.d.ts"},"./fhi-icon-calendar-clock":{"default":"./fhi-icon-calendar-clock.js","types":"./fhi-icon-calendar-clock.d.ts"},"./fhi-icon-calendar":{"default":"./fhi-icon-calendar.js","types":"./fhi-icon-calendar.d.ts"},"./fhi-icon-chart-bar-stacked":{"default":"./fhi-icon-chart-bar-stacked.js","types":"./fhi-icon-chart-bar-stacked.d.ts"},"./fhi-icon-chart-bar":{"default":"./fhi-icon-chart-bar.js","types":"./fhi-icon-chart-bar.d.ts"},"./fhi-icon-chart-column-stacked":{"default":"./fhi-icon-chart-column-stacked.js","types":"./fhi-icon-chart-column-stacked.d.ts"},"./fhi-icon-chart-column":{"default":"./fhi-icon-chart-column.js","types":"./fhi-icon-chart-column.d.ts"},"./fhi-icon-chart-line":{"default":"./fhi-icon-chart-line.js","types":"./fhi-icon-chart-line.d.ts"},"./fhi-icon-chart-no-axes-combined":{"default":"./fhi-icon-chart-no-axes-combined.js","types":"./fhi-icon-chart-no-axes-combined.d.ts"},"./fhi-icon-chart-pie":{"default":"./fhi-icon-chart-pie.js","types":"./fhi-icon-chart-pie.d.ts"},"./fhi-icon-check":{"default":"./fhi-icon-check.js","types":"./fhi-icon-check.d.ts"},"./fhi-icon-chevron-down":{"default":"./fhi-icon-chevron-down.js","types":"./fhi-icon-chevron-down.d.ts"},"./fhi-icon-chevron-left":{"default":"./fhi-icon-chevron-left.js","types":"./fhi-icon-chevron-left.d.ts"},"./fhi-icon-chevron-right":{"default":"./fhi-icon-chevron-right.js","types":"./fhi-icon-chevron-right.d.ts"},"./fhi-icon-chevron-up":{"default":"./fhi-icon-chevron-up.js","types":"./fhi-icon-chevron-up.d.ts"},"./fhi-icon-chevrons-down":{"default":"./fhi-icon-chevrons-down.js","types":"./fhi-icon-chevrons-down.d.ts"},"./fhi-icon-chevrons-left":{"default":"./fhi-icon-chevrons-left.js","types":"./fhi-icon-chevrons-left.d.ts"},"./fhi-icon-chevrons-right":{"default":"./fhi-icon-chevrons-right.js","types":"./fhi-icon-chevrons-right.d.ts"},"./fhi-icon-chevrons-up":{"default":"./fhi-icon-chevrons-up.js","types":"./fhi-icon-chevrons-up.d.ts"},"./fhi-icon-circle-arrow-down":{"default":"./fhi-icon-circle-arrow-down.js","types":"./fhi-icon-circle-arrow-down.d.ts"},"./fhi-icon-circle-arrow-left":{"default":"./fhi-icon-circle-arrow-left.js","types":"./fhi-icon-circle-arrow-left.d.ts"},"./fhi-icon-circle-arrow-right":{"default":"./fhi-icon-circle-arrow-right.js","types":"./fhi-icon-circle-arrow-right.d.ts"},"./fhi-icon-circle-arrow-up":{"default":"./fhi-icon-circle-arrow-up.js","types":"./fhi-icon-circle-arrow-up.d.ts"},"./fhi-icon-circle-check-big":{"default":"./fhi-icon-circle-check-big.js","types":"./fhi-icon-circle-check-big.d.ts"},"./fhi-icon-circle-check":{"default":"./fhi-icon-circle-check.js","types":"./fhi-icon-circle-check.d.ts"},"./fhi-icon-circle-chevron-down":{"default":"./fhi-icon-circle-chevron-down.js","types":"./fhi-icon-circle-chevron-down.d.ts"},"./fhi-icon-circle-chevron-left":{"default":"./fhi-icon-circle-chevron-left.js","types":"./fhi-icon-circle-chevron-left.d.ts"},"./fhi-icon-circle-chevron-right":{"default":"./fhi-icon-circle-chevron-right.js","types":"./fhi-icon-circle-chevron-right.d.ts"},"./fhi-icon-circle-chevron-up":{"default":"./fhi-icon-circle-chevron-up.js","types":"./fhi-icon-circle-chevron-up.d.ts"},"./fhi-icon-circle-exclamation":{"default":"./fhi-icon-circle-exclamation.js","types":"./fhi-icon-circle-exclamation.d.ts"},"./fhi-icon-circle-info":{"default":"./fhi-icon-circle-info.js","types":"./fhi-icon-circle-info.d.ts"},"./fhi-icon-circle-minus":{"default":"./fhi-icon-circle-minus.js","types":"./fhi-icon-circle-minus.d.ts"},"./fhi-icon-circle-plus":{"default":"./fhi-icon-circle-plus.js","types":"./fhi-icon-circle-plus.d.ts"},"./fhi-icon-circle-question":{"default":"./fhi-icon-circle-question.js","types":"./fhi-icon-circle-question.d.ts"},"./fhi-icon-circle-x":{"default":"./fhi-icon-circle-x.js","types":"./fhi-icon-circle-x.d.ts"},"./fhi-icon-circle":{"default":"./fhi-icon-circle.js","types":"./fhi-icon-circle.d.ts"},"./fhi-icon-clock":{"default":"./fhi-icon-clock.js","types":"./fhi-icon-clock.d.ts"},"./fhi-icon-copy":{"default":"./fhi-icon-copy.js","types":"./fhi-icon-copy.d.ts"},"./fhi-icon-download":{"default":"./fhi-icon-download.js","types":"./fhi-icon-download.d.ts"},"./fhi-icon-ellipsis-vertical":{"default":"./fhi-icon-ellipsis-vertical.js","types":"./fhi-icon-ellipsis-vertical.d.ts"},"./fhi-icon-ellipsis":{"default":"./fhi-icon-ellipsis.js","types":"./fhi-icon-ellipsis.d.ts"},"./fhi-icon-exclamation":{"default":"./fhi-icon-exclamation.js","types":"./fhi-icon-exclamation.d.ts"},"./fhi-icon-expand":{"default":"./fhi-icon-expand.js","types":"./fhi-icon-expand.d.ts"},"./fhi-icon-external-link":{"default":"./fhi-icon-external-link.js","types":"./fhi-icon-external-link.d.ts"},"./fhi-icon-eye-off":{"default":"./fhi-icon-eye-off.js","types":"./fhi-icon-eye-off.d.ts"},"./fhi-icon-eye":{"default":"./fhi-icon-eye.js","types":"./fhi-icon-eye.d.ts"},"./fhi-icon-file-text":{"default":"./fhi-icon-file-text.js","types":"./fhi-icon-file-text.d.ts"},"./fhi-icon-file":{"default":"./fhi-icon-file.js","types":"./fhi-icon-file.d.ts"},"./fhi-icon-filter":{"default":"./fhi-icon-filter.js","types":"./fhi-icon-filter.d.ts"},"./fhi-icon-folder":{"default":"./fhi-icon-folder.js","types":"./fhi-icon-folder.d.ts"},"./fhi-icon-gear":{"default":"./fhi-icon-gear.js","types":"./fhi-icon-gear.d.ts"},"./fhi-icon-grid-9-dots":{"default":"./fhi-icon-grid-9-dots.js","types":"./fhi-icon-grid-9-dots.d.ts"},"./fhi-icon-grip-horizontal":{"default":"./fhi-icon-grip-horizontal.js","types":"./fhi-icon-grip-horizontal.d.ts"},"./fhi-icon-grip-vertical":{"default":"./fhi-icon-grip-vertical.js","types":"./fhi-icon-grip-vertical.d.ts"},"./fhi-icon-history":{"default":"./fhi-icon-history.js","types":"./fhi-icon-history.d.ts"},"./fhi-icon-info":{"default":"./fhi-icon-info.js","types":"./fhi-icon-info.d.ts"},"./fhi-icon-link-2-off":{"default":"./fhi-icon-link-2-off.js","types":"./fhi-icon-link-2-off.d.ts"},"./fhi-icon-link-2":{"default":"./fhi-icon-link-2.js","types":"./fhi-icon-link-2.d.ts"},"./fhi-icon-link":{"default":"./fhi-icon-link.js","types":"./fhi-icon-link.d.ts"},"./fhi-icon-lock-open":{"default":"./fhi-icon-lock-open.js","types":"./fhi-icon-lock-open.d.ts"},"./fhi-icon-lock":{"default":"./fhi-icon-lock.js","types":"./fhi-icon-lock.d.ts"},"./fhi-icon-log-in":{"default":"./fhi-icon-log-in.js","types":"./fhi-icon-log-in.d.ts"},"./fhi-icon-log-out":{"default":"./fhi-icon-log-out.js","types":"./fhi-icon-log-out.d.ts"},"./fhi-icon-mail":{"default":"./fhi-icon-mail.js","types":"./fhi-icon-mail.d.ts"},"./fhi-icon-map-pin":{"default":"./fhi-icon-map-pin.js","types":"./fhi-icon-map-pin.d.ts"},"./fhi-icon-menu":{"default":"./fhi-icon-menu.js","types":"./fhi-icon-menu.d.ts"},"./fhi-icon-message":{"default":"./fhi-icon-message.js","types":"./fhi-icon-message.d.ts"},"./fhi-icon-minus":{"default":"./fhi-icon-minus.js","types":"./fhi-icon-minus.d.ts"},"./fhi-icon-octagon-alert":{"default":"./fhi-icon-octagon-alert.js","types":"./fhi-icon-octagon-alert.d.ts"},"./fhi-icon-paperclip":{"default":"./fhi-icon-paperclip.js","types":"./fhi-icon-paperclip.d.ts"},"./fhi-icon-pencil":{"default":"./fhi-icon-pencil.js","types":"./fhi-icon-pencil.d.ts"},"./fhi-icon-phone":{"default":"./fhi-icon-phone.js","types":"./fhi-icon-phone.d.ts"},"./fhi-icon-pin-off":{"default":"./fhi-icon-pin-off.js","types":"./fhi-icon-pin-off.d.ts"},"./fhi-icon-pin":{"default":"./fhi-icon-pin.js","types":"./fhi-icon-pin.d.ts"},"./fhi-icon-plus":{"default":"./fhi-icon-plus.js","types":"./fhi-icon-plus.d.ts"},"./fhi-icon-printer":{"default":"./fhi-icon-printer.js","types":"./fhi-icon-printer.d.ts"},"./fhi-icon-question":{"default":"./fhi-icon-question.js","types":"./fhi-icon-question.d.ts"},"./fhi-icon-refresh":{"default":"./fhi-icon-refresh.js","types":"./fhi-icon-refresh.d.ts"},"./fhi-icon-rotate-left":{"default":"./fhi-icon-rotate-left.js","types":"./fhi-icon-rotate-left.d.ts"},"./fhi-icon-rotate-right":{"default":"./fhi-icon-rotate-right.js","types":"./fhi-icon-rotate-right.d.ts"},"./fhi-icon-search":{"default":"./fhi-icon-search.js","types":"./fhi-icon-search.d.ts"},"./fhi-icon-send":{"default":"./fhi-icon-send.js","types":"./fhi-icon-send.d.ts"},"./fhi-icon-share":{"default":"./fhi-icon-share.js","types":"./fhi-icon-share.d.ts"},"./fhi-icon-sheet":{"default":"./fhi-icon-sheet.js","types":"./fhi-icon-sheet.d.ts"},"./fhi-icon-square-check-big":{"default":"./fhi-icon-square-check-big.js","types":"./fhi-icon-square-check-big.d.ts"},"./fhi-icon-square-check":{"default":"./fhi-icon-square-check.js","types":"./fhi-icon-square-check.d.ts"},"./fhi-icon-square-pen":{"default":"./fhi-icon-square-pen.js","types":"./fhi-icon-square-pen.d.ts"},"./fhi-icon-square-x":{"default":"./fhi-icon-square-x.js","types":"./fhi-icon-square-x.d.ts"},"./fhi-icon-square":{"default":"./fhi-icon-square.js","types":"./fhi-icon-square.d.ts"},"./fhi-icon-trash":{"default":"./fhi-icon-trash.js","types":"./fhi-icon-trash.d.ts"},"./fhi-icon-triangle-alert":{"default":"./fhi-icon-triangle-alert.js","types":"./fhi-icon-triangle-alert.d.ts"},"./fhi-icon-upload":{"default":"./fhi-icon-upload.js","types":"./fhi-icon-upload.d.ts"},"./fhi-icon-user":{"default":"./fhi-icon-user.js","types":"./fhi-icon-user.d.ts"},"./fhi-icon-x":{"default":"./fhi-icon-x.js","types":"./fhi-icon-x.d.ts"},"./fhi-data-table":{"default":"./fhi-data-table.js","types":"./fhi-data-table.d.ts"},"./fhi-data-table-cell":{"default":"./fhi-data-table-cell.js","types":"./fhi-data-table-cell.d.ts"},"./fhi-data-table-row":{"default":"./fhi-data-table-row.js","types":"./fhi-data-table-row.d.ts"},"./fhi-body":{"default":"./fhi-body.js","types":"./fhi-body.d.ts"},"./fhi-display":{"default":"./fhi-display.js","types":"./fhi-display.d.ts"},"./fhi-headline":{"default":"./fhi-headline.js","types":"./fhi-headline.d.ts"},"./fhi-label":{"default":"./fhi-label.js","types":"./fhi-label.d.ts"},"./fhi-title":{"default":"./fhi-title.js","types":"./fhi-title.d.ts"},".":{"default":"./index.js"},"./theme/default.css":{"default":"./theme/default.css","style":"./theme/default.css"},"./custom-elements.json":{"default":"./custom-elements.json"}}}
1
+ {"title":"FHI Designsystem","author":"FHI Designsystem team","name":"@folkehelseinstituttet/designsystem","version":"0.40.4","description":"The official design system for the Norwegian Institute of Public Health implemented as web components","keywords":["fhi","folkehelseinstituttet","components","design","system","framework","frontend","web-component","web component","ui"],"customElements":".temp/custom-elements.json","web-types":"./web-types.json","homepage":"https://github.com/FHIDev/Fhi.Designsystem","bugs":{"url":"https://github.com/FHIDev/Fhi.Designsystem/issues"},"repository":{"type":"git","url":"git+https://github.com/FHIDev/Fhi.Designsystem.git"},"license":"MIT","browserslist":["> 0.5%","last 2 versions"],"main":"index.js","type":"module","scripts":{"dev":"vite","build":"pnpm analyze && pnpm build:cdn && pnpm build:npm && pnpm build:github && pnpm clean","build:cdn":"tsc && cross-env DEPLOY_TARGET=cdn vite build","build:npm":"tsc && cross-env DEPLOY_TARGET=npm vite build","build:github":"tsc && cross-env DEPLOY_TARGET=github vite build","storybook":"storybook dev -p 6006","storybook:build":"pnpm analyze && storybook build","generate:icons":"node ./scripts/generate-icon-components.js --input ./src/assets/icons/ --output ./src/components/icons --clean-output-folder","test":"wtr ./**/*.test.ts --node-resolve --playwright --browsers chromium webkit","lint":"pnpm lint:eslint && pnpm lint:prettier","lint:eslint":"eslint \"**/*.{js,ts}\"","lint:prettier":"prettier \"**/*.js\" --check --ignore-path .gitignore","format":"pnpm format:eslint && pnpm format:prettier","format:eslint":"eslint \"**/*.{js,ts}\" --fix","format:prettier":"prettier \"**/*.js\" --write --ignore-path .gitignore","publish:npm":"pnpm build && cd dist/npm && npm publish","changelog:ci":"release-it --ci","analyze":"cem analyze --litelement","clean":"rimraf .temp","build-storybook":"storybook build"},"peerDependencies":{"lit":"~3.2.0"},"devDependencies":{"@custom-elements-manifest/analyzer":"^0.11.0","@esm-bundle/chai":"4.3.4-fix.0","@open-wc/testing":"~4.0.0","@playwright/test":"^1.61.0","@release-it/conventional-changelog":"~11.0.1","@storybook/addon-docs":"^10.4.6","@storybook/web-components-vite":"^10.4.6","@types/mocha":"~10.0.10","@types/node":"~26.0.0","@types/react":"^19.2.17","@wc-toolkit/cem-sorter":"^1.0.1","@wc-toolkit/type-parser":"^1.2.1","@web/dev-server":"~0.4.6","@web/dev-server-esbuild":"~1.0.5","@web/test-runner":"~0.20.2","@web/test-runner-playwright":"~0.11.1","cross-env":"10.1.0","custom-element-jet-brains-integration":"^1.7.0","lit":"~3.3.3","mocha":"~11.7.6","playwright":"^1.61.0","release-it":"~20.2.0","rimraf":"^6.1.3","storybook":"^10.4.6","storybook-design-token":"^5.0.0","svgo":"^4.0.1","vite":"~8.0.16","vite-plugin-static-copy":"~4.1.1"},"dependencies":{"@floating-ui/dom":"^1.7.6"},"pnpm":{"overrides":{"diff@>=6.0.0 <8.0.3":">=8.0.3","serialize-javascript@<=7.0.2":">=7.0.3","yaml@>=2.0.0 <2.8.3":">=2.8.3","serialize-javascript@>=5.0.0 <7.0.5":">=7.0.5","esbuild@>=0.27.3 <0.28.1":">=0.28.1","undici@>=7.23.0 <7.28.0":">=7.28.0","undici@>=7.0.0 <7.28.0":">=7.28.0"}},"exports":{"./fhi-button":{"default":"./fhi-button.js","types":"./fhi-button.d.ts"},"./fhi-checkbox":{"default":"./fhi-checkbox.js","types":"./fhi-checkbox.d.ts"},"./fhi-date-input":{"default":"./fhi-date-input.js","types":"./fhi-date-input.d.ts"},"./fhi-flex":{"default":"./fhi-flex.js","types":"./fhi-flex.d.ts"},"./fhi-grid":{"default":"./fhi-grid.js","types":"./fhi-grid.d.ts"},"./fhi-modal-dialog":{"default":"./fhi-modal-dialog.js","types":"./fhi-modal-dialog.d.ts"},"./fhi-radio":{"default":"./fhi-radio.js","types":"./fhi-radio.d.ts"},"./fhi-tag":{"default":"./fhi-tag.js","types":"./fhi-tag.d.ts"},"./fhi-text-input":{"default":"./fhi-text-input.js","types":"./fhi-text-input.d.ts"},"./fhi-tooltip":{"default":"./fhi-tooltip.js","types":"./fhi-tooltip.d.ts"},"./fhi-icon-arrow-down-left":{"default":"./fhi-icon-arrow-down-left.js","types":"./fhi-icon-arrow-down-left.d.ts"},"./fhi-icon-arrow-down-right":{"default":"./fhi-icon-arrow-down-right.js","types":"./fhi-icon-arrow-down-right.d.ts"},"./fhi-icon-arrow-down":{"default":"./fhi-icon-arrow-down.js","types":"./fhi-icon-arrow-down.d.ts"},"./fhi-icon-arrow-left":{"default":"./fhi-icon-arrow-left.js","types":"./fhi-icon-arrow-left.d.ts"},"./fhi-icon-arrow-right-left":{"default":"./fhi-icon-arrow-right-left.js","types":"./fhi-icon-arrow-right-left.d.ts"},"./fhi-icon-arrow-right":{"default":"./fhi-icon-arrow-right.js","types":"./fhi-icon-arrow-right.d.ts"},"./fhi-icon-arrow-up-down":{"default":"./fhi-icon-arrow-up-down.js","types":"./fhi-icon-arrow-up-down.d.ts"},"./fhi-icon-arrow-up-left":{"default":"./fhi-icon-arrow-up-left.js","types":"./fhi-icon-arrow-up-left.d.ts"},"./fhi-icon-arrow-up-right":{"default":"./fhi-icon-arrow-up-right.js","types":"./fhi-icon-arrow-up-right.d.ts"},"./fhi-icon-arrow-up":{"default":"./fhi-icon-arrow-up.js","types":"./fhi-icon-arrow-up.d.ts"},"./fhi-icon-bell":{"default":"./fhi-icon-bell.js","types":"./fhi-icon-bell.d.ts"},"./fhi-icon-calendar-clock":{"default":"./fhi-icon-calendar-clock.js","types":"./fhi-icon-calendar-clock.d.ts"},"./fhi-icon-calendar":{"default":"./fhi-icon-calendar.js","types":"./fhi-icon-calendar.d.ts"},"./fhi-icon-chart-bar-stacked":{"default":"./fhi-icon-chart-bar-stacked.js","types":"./fhi-icon-chart-bar-stacked.d.ts"},"./fhi-icon-chart-bar":{"default":"./fhi-icon-chart-bar.js","types":"./fhi-icon-chart-bar.d.ts"},"./fhi-icon-chart-column-stacked":{"default":"./fhi-icon-chart-column-stacked.js","types":"./fhi-icon-chart-column-stacked.d.ts"},"./fhi-icon-chart-column":{"default":"./fhi-icon-chart-column.js","types":"./fhi-icon-chart-column.d.ts"},"./fhi-icon-chart-line":{"default":"./fhi-icon-chart-line.js","types":"./fhi-icon-chart-line.d.ts"},"./fhi-icon-chart-no-axes-combined":{"default":"./fhi-icon-chart-no-axes-combined.js","types":"./fhi-icon-chart-no-axes-combined.d.ts"},"./fhi-icon-chart-pie":{"default":"./fhi-icon-chart-pie.js","types":"./fhi-icon-chart-pie.d.ts"},"./fhi-icon-check":{"default":"./fhi-icon-check.js","types":"./fhi-icon-check.d.ts"},"./fhi-icon-chevron-down":{"default":"./fhi-icon-chevron-down.js","types":"./fhi-icon-chevron-down.d.ts"},"./fhi-icon-chevron-left":{"default":"./fhi-icon-chevron-left.js","types":"./fhi-icon-chevron-left.d.ts"},"./fhi-icon-chevron-right":{"default":"./fhi-icon-chevron-right.js","types":"./fhi-icon-chevron-right.d.ts"},"./fhi-icon-chevron-up":{"default":"./fhi-icon-chevron-up.js","types":"./fhi-icon-chevron-up.d.ts"},"./fhi-icon-chevrons-down":{"default":"./fhi-icon-chevrons-down.js","types":"./fhi-icon-chevrons-down.d.ts"},"./fhi-icon-chevrons-left":{"default":"./fhi-icon-chevrons-left.js","types":"./fhi-icon-chevrons-left.d.ts"},"./fhi-icon-chevrons-right":{"default":"./fhi-icon-chevrons-right.js","types":"./fhi-icon-chevrons-right.d.ts"},"./fhi-icon-chevrons-up":{"default":"./fhi-icon-chevrons-up.js","types":"./fhi-icon-chevrons-up.d.ts"},"./fhi-icon-circle-arrow-down":{"default":"./fhi-icon-circle-arrow-down.js","types":"./fhi-icon-circle-arrow-down.d.ts"},"./fhi-icon-circle-arrow-left":{"default":"./fhi-icon-circle-arrow-left.js","types":"./fhi-icon-circle-arrow-left.d.ts"},"./fhi-icon-circle-arrow-right":{"default":"./fhi-icon-circle-arrow-right.js","types":"./fhi-icon-circle-arrow-right.d.ts"},"./fhi-icon-circle-arrow-up":{"default":"./fhi-icon-circle-arrow-up.js","types":"./fhi-icon-circle-arrow-up.d.ts"},"./fhi-icon-circle-check-big":{"default":"./fhi-icon-circle-check-big.js","types":"./fhi-icon-circle-check-big.d.ts"},"./fhi-icon-circle-check":{"default":"./fhi-icon-circle-check.js","types":"./fhi-icon-circle-check.d.ts"},"./fhi-icon-circle-chevron-down":{"default":"./fhi-icon-circle-chevron-down.js","types":"./fhi-icon-circle-chevron-down.d.ts"},"./fhi-icon-circle-chevron-left":{"default":"./fhi-icon-circle-chevron-left.js","types":"./fhi-icon-circle-chevron-left.d.ts"},"./fhi-icon-circle-chevron-right":{"default":"./fhi-icon-circle-chevron-right.js","types":"./fhi-icon-circle-chevron-right.d.ts"},"./fhi-icon-circle-chevron-up":{"default":"./fhi-icon-circle-chevron-up.js","types":"./fhi-icon-circle-chevron-up.d.ts"},"./fhi-icon-circle-exclamation":{"default":"./fhi-icon-circle-exclamation.js","types":"./fhi-icon-circle-exclamation.d.ts"},"./fhi-icon-circle-info":{"default":"./fhi-icon-circle-info.js","types":"./fhi-icon-circle-info.d.ts"},"./fhi-icon-circle-minus":{"default":"./fhi-icon-circle-minus.js","types":"./fhi-icon-circle-minus.d.ts"},"./fhi-icon-circle-plus":{"default":"./fhi-icon-circle-plus.js","types":"./fhi-icon-circle-plus.d.ts"},"./fhi-icon-circle-question":{"default":"./fhi-icon-circle-question.js","types":"./fhi-icon-circle-question.d.ts"},"./fhi-icon-circle-x":{"default":"./fhi-icon-circle-x.js","types":"./fhi-icon-circle-x.d.ts"},"./fhi-icon-circle":{"default":"./fhi-icon-circle.js","types":"./fhi-icon-circle.d.ts"},"./fhi-icon-clock":{"default":"./fhi-icon-clock.js","types":"./fhi-icon-clock.d.ts"},"./fhi-icon-copy":{"default":"./fhi-icon-copy.js","types":"./fhi-icon-copy.d.ts"},"./fhi-icon-download":{"default":"./fhi-icon-download.js","types":"./fhi-icon-download.d.ts"},"./fhi-icon-ellipsis-vertical":{"default":"./fhi-icon-ellipsis-vertical.js","types":"./fhi-icon-ellipsis-vertical.d.ts"},"./fhi-icon-ellipsis":{"default":"./fhi-icon-ellipsis.js","types":"./fhi-icon-ellipsis.d.ts"},"./fhi-icon-exclamation":{"default":"./fhi-icon-exclamation.js","types":"./fhi-icon-exclamation.d.ts"},"./fhi-icon-expand":{"default":"./fhi-icon-expand.js","types":"./fhi-icon-expand.d.ts"},"./fhi-icon-external-link":{"default":"./fhi-icon-external-link.js","types":"./fhi-icon-external-link.d.ts"},"./fhi-icon-eye-off":{"default":"./fhi-icon-eye-off.js","types":"./fhi-icon-eye-off.d.ts"},"./fhi-icon-eye":{"default":"./fhi-icon-eye.js","types":"./fhi-icon-eye.d.ts"},"./fhi-icon-file-text":{"default":"./fhi-icon-file-text.js","types":"./fhi-icon-file-text.d.ts"},"./fhi-icon-file":{"default":"./fhi-icon-file.js","types":"./fhi-icon-file.d.ts"},"./fhi-icon-filter":{"default":"./fhi-icon-filter.js","types":"./fhi-icon-filter.d.ts"},"./fhi-icon-folder":{"default":"./fhi-icon-folder.js","types":"./fhi-icon-folder.d.ts"},"./fhi-icon-gear":{"default":"./fhi-icon-gear.js","types":"./fhi-icon-gear.d.ts"},"./fhi-icon-grid-9-dots":{"default":"./fhi-icon-grid-9-dots.js","types":"./fhi-icon-grid-9-dots.d.ts"},"./fhi-icon-grip-horizontal":{"default":"./fhi-icon-grip-horizontal.js","types":"./fhi-icon-grip-horizontal.d.ts"},"./fhi-icon-grip-vertical":{"default":"./fhi-icon-grip-vertical.js","types":"./fhi-icon-grip-vertical.d.ts"},"./fhi-icon-history":{"default":"./fhi-icon-history.js","types":"./fhi-icon-history.d.ts"},"./fhi-icon-info":{"default":"./fhi-icon-info.js","types":"./fhi-icon-info.d.ts"},"./fhi-icon-link-2-off":{"default":"./fhi-icon-link-2-off.js","types":"./fhi-icon-link-2-off.d.ts"},"./fhi-icon-link-2":{"default":"./fhi-icon-link-2.js","types":"./fhi-icon-link-2.d.ts"},"./fhi-icon-link":{"default":"./fhi-icon-link.js","types":"./fhi-icon-link.d.ts"},"./fhi-icon-lock-open":{"default":"./fhi-icon-lock-open.js","types":"./fhi-icon-lock-open.d.ts"},"./fhi-icon-lock":{"default":"./fhi-icon-lock.js","types":"./fhi-icon-lock.d.ts"},"./fhi-icon-log-in":{"default":"./fhi-icon-log-in.js","types":"./fhi-icon-log-in.d.ts"},"./fhi-icon-log-out":{"default":"./fhi-icon-log-out.js","types":"./fhi-icon-log-out.d.ts"},"./fhi-icon-mail":{"default":"./fhi-icon-mail.js","types":"./fhi-icon-mail.d.ts"},"./fhi-icon-map-pin":{"default":"./fhi-icon-map-pin.js","types":"./fhi-icon-map-pin.d.ts"},"./fhi-icon-menu":{"default":"./fhi-icon-menu.js","types":"./fhi-icon-menu.d.ts"},"./fhi-icon-message":{"default":"./fhi-icon-message.js","types":"./fhi-icon-message.d.ts"},"./fhi-icon-minus":{"default":"./fhi-icon-minus.js","types":"./fhi-icon-minus.d.ts"},"./fhi-icon-octagon-alert":{"default":"./fhi-icon-octagon-alert.js","types":"./fhi-icon-octagon-alert.d.ts"},"./fhi-icon-paperclip":{"default":"./fhi-icon-paperclip.js","types":"./fhi-icon-paperclip.d.ts"},"./fhi-icon-pencil":{"default":"./fhi-icon-pencil.js","types":"./fhi-icon-pencil.d.ts"},"./fhi-icon-phone":{"default":"./fhi-icon-phone.js","types":"./fhi-icon-phone.d.ts"},"./fhi-icon-pin-off":{"default":"./fhi-icon-pin-off.js","types":"./fhi-icon-pin-off.d.ts"},"./fhi-icon-pin":{"default":"./fhi-icon-pin.js","types":"./fhi-icon-pin.d.ts"},"./fhi-icon-plus":{"default":"./fhi-icon-plus.js","types":"./fhi-icon-plus.d.ts"},"./fhi-icon-printer":{"default":"./fhi-icon-printer.js","types":"./fhi-icon-printer.d.ts"},"./fhi-icon-question":{"default":"./fhi-icon-question.js","types":"./fhi-icon-question.d.ts"},"./fhi-icon-refresh":{"default":"./fhi-icon-refresh.js","types":"./fhi-icon-refresh.d.ts"},"./fhi-icon-rotate-left":{"default":"./fhi-icon-rotate-left.js","types":"./fhi-icon-rotate-left.d.ts"},"./fhi-icon-rotate-right":{"default":"./fhi-icon-rotate-right.js","types":"./fhi-icon-rotate-right.d.ts"},"./fhi-icon-search":{"default":"./fhi-icon-search.js","types":"./fhi-icon-search.d.ts"},"./fhi-icon-send":{"default":"./fhi-icon-send.js","types":"./fhi-icon-send.d.ts"},"./fhi-icon-share":{"default":"./fhi-icon-share.js","types":"./fhi-icon-share.d.ts"},"./fhi-icon-sheet":{"default":"./fhi-icon-sheet.js","types":"./fhi-icon-sheet.d.ts"},"./fhi-icon-square-check-big":{"default":"./fhi-icon-square-check-big.js","types":"./fhi-icon-square-check-big.d.ts"},"./fhi-icon-square-check":{"default":"./fhi-icon-square-check.js","types":"./fhi-icon-square-check.d.ts"},"./fhi-icon-square-pen":{"default":"./fhi-icon-square-pen.js","types":"./fhi-icon-square-pen.d.ts"},"./fhi-icon-square-x":{"default":"./fhi-icon-square-x.js","types":"./fhi-icon-square-x.d.ts"},"./fhi-icon-square":{"default":"./fhi-icon-square.js","types":"./fhi-icon-square.d.ts"},"./fhi-icon-trash":{"default":"./fhi-icon-trash.js","types":"./fhi-icon-trash.d.ts"},"./fhi-icon-triangle-alert":{"default":"./fhi-icon-triangle-alert.js","types":"./fhi-icon-triangle-alert.d.ts"},"./fhi-icon-upload":{"default":"./fhi-icon-upload.js","types":"./fhi-icon-upload.d.ts"},"./fhi-icon-user":{"default":"./fhi-icon-user.js","types":"./fhi-icon-user.d.ts"},"./fhi-icon-x":{"default":"./fhi-icon-x.js","types":"./fhi-icon-x.d.ts"},"./fhi-data-table":{"default":"./fhi-data-table.js","types":"./fhi-data-table.d.ts"},"./fhi-data-table-cell":{"default":"./fhi-data-table-cell.js","types":"./fhi-data-table-cell.d.ts"},"./fhi-data-table-row":{"default":"./fhi-data-table-row.js","types":"./fhi-data-table-row.d.ts"},"./fhi-body":{"default":"./fhi-body.js","types":"./fhi-body.d.ts"},"./fhi-display":{"default":"./fhi-display.js","types":"./fhi-display.d.ts"},"./fhi-headline":{"default":"./fhi-headline.js","types":"./fhi-headline.d.ts"},"./fhi-label":{"default":"./fhi-label.js","types":"./fhi-label.d.ts"},"./fhi-title":{"default":"./fhi-title.js","types":"./fhi-title.d.ts"},".":{"default":"./index.js"},"./theme/default.css":{"default":"./theme/default.css","style":"./theme/default.css"},"./custom-elements.json":{"default":"./custom-elements.json"}}}
package/web-types.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
3
3
  "name": "@folkehelseinstituttet/designsystem",
4
- "version": "0.40.2",
4
+ "version": "0.40.4",
5
5
  "description-markup": "markdown",
6
6
  "contributions": {
7
7
  "html": {