@folkehelseinstituttet/designsystem 0.31.0 → 0.32.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (23) hide show
  1. package/custom-elements.json +589 -579
  2. package/fhi-body.js +10 -10
  3. package/fhi-body.js.map +1 -1
  4. package/fhi-button.js +2 -2
  5. package/fhi-button.js.map +1 -1
  6. package/fhi-display.js +13 -9
  7. package/fhi-display.js.map +1 -1
  8. package/fhi-headline.js +13 -9
  9. package/fhi-headline.js.map +1 -1
  10. package/fhi-label.js +10 -10
  11. package/fhi-label.js.map +1 -1
  12. package/fhi-modal-dialog.js +2 -2
  13. package/fhi-modal-dialog.js.map +1 -1
  14. package/fhi-tag.js +1 -1
  15. package/fhi-tag.js.map +1 -1
  16. package/fhi-text-input.js.map +1 -1
  17. package/fhi-title.js +13 -9
  18. package/fhi-title.js.map +1 -1
  19. package/fhi-tooltip.js +397 -395
  20. package/fhi-tooltip.js.map +1 -1
  21. package/index.js +354 -354
  22. package/package.json +12 -47
  23. package/web-types.json +241 -241
package/fhi-body.js CHANGED
@@ -1,19 +1,19 @@
1
- import { i as g, n, a as p, b as f, t as y } from "./property-DGdAXcEz.js";
2
- var m = Object.defineProperty, d = Object.getOwnPropertyDescriptor, h = (t, r, o, a) => {
3
- for (var e = a > 1 ? void 0 : a ? d(r, o) : r, l = t.length - 1, s; l >= 0; l--)
4
- (s = t[l]) && (e = (a ? s(r, o, e) : s(e)) || e);
1
+ import { i as g, n, a as f, b as p, t as y } from "./property-DGdAXcEz.js";
2
+ var m = Object.defineProperty, d = Object.getOwnPropertyDescriptor, s = (t, r, o, a) => {
3
+ for (var e = a > 1 ? void 0 : a ? d(r, o) : r, l = t.length - 1, h; l >= 0; l--)
4
+ (h = t[l]) && (e = (a ? h(r, o, e) : h(e)) || e);
5
5
  return a && e && m(r, o, e), e;
6
6
  };
7
7
  const v = "fhi-body";
8
- let i = class extends p {
8
+ let i = class extends f {
9
9
  constructor() {
10
10
  super(...arguments), this.size = "medium";
11
11
  }
12
12
  updated(t) {
13
- super.updated(t), t.has("color") && typeof this.color == "string" && (this.style.color = this.color);
13
+ super.updated(t), t.has("color") && (this.style.color = typeof this.color == "string" ? this.color : "var(--fhi-color-neutral-text-default)");
14
14
  }
15
15
  render() {
16
- return f`
16
+ return p`
17
17
  <span class="body">
18
18
  <slot></slot>
19
19
  </span>
@@ -76,13 +76,13 @@ i.styles = g`
76
76
  }
77
77
  }
78
78
  `;
79
- h([
79
+ s([
80
80
  n({ type: String, reflect: !0 })
81
81
  ], i.prototype, "size", 2);
82
- h([
82
+ s([
83
83
  n({ type: String })
84
84
  ], i.prototype, "color", 2);
85
- i = h([
85
+ i = s([
86
86
  y(v)
87
87
  ], i);
88
88
  export {
package/fhi-body.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"fhi-body.js","sources":["../../src/components/fhi-body/fhi-body.component.ts"],"sourcesContent":["import { html, css, LitElement, PropertyValues } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nexport const FhiBodySelector = 'fhi-body';\n\n/**\n * ## FHI Body\n *\n * {@link https://designsystem.fhi.no/?path=/story/komponenter-typography-body--preview}\n *\n * The `<fhi-body>` component is used to display body text in accordance with the FHI Design System guidelines.\n * Use this component instead of the standard HTML paragraph element, `<p>`, to ensure consistent styling across your application.\n *\n * @tag fhi-body\n * @element fhi-body\n *\n * @slot - The content of the fhi-body component. This should be pure text.\n */\n@customElement(FhiBodySelector)\nexport class FhiBody extends LitElement {\n /**\n * Sets the font size of the given text.\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 * Sets color of the given text. It supports any valid CSS color value (e.g. hex, rgb, rgba, hsl, hsla, color names).\n *\n * It is recommended to use Design Tokens for colors defined in the FHI Design System.\n * See: {@link https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs}\n *\n * Example:\n * ```html\n * <fhi-body color=\"var(--fhi-color-primary-text-default)\">\n * This text will be in the primary text color.\n * </fhi-body>\n * ```\n *\n * @type {string}\n */\n @property({ type: String }) color?: string;\n\n updated(changedProperties: PropertyValues<this>) {\n super.updated(changedProperties);\n\n if (changedProperties.has('color') && typeof this.color == 'string') {\n this.style.color = this.color;\n }\n }\n\n render() {\n return html`\n <span class=\"body\">\n <slot></slot>\n </span>\n `;\n }\n\n static styles = css`\n :host {\n --font-size-large: var(--fhi-typography-body-large-font-size);\n --font-weight-large: var(--fhi-typography-body-large-font-weight);\n --line-height-large: var(--fhi-typography-body-large-line-height);\n --letter-spacing-large: var(--fhi-typography-body-large-letter-spacing);\n\n --font-size-medium: var(--fhi-typography-body-medium-font-size);\n --font-weight-medium: var(--fhi-typography-body-medium-font-weight);\n --line-height-medium: var(--fhi-typography-body-medium-line-height);\n --letter-spacing-medium: var(--fhi-typography-body-medium-letter-spacing);\n\n --font-size-small: var(--fhi-typography-body-small-font-size);\n --font-weight-small: var(--fhi-typography-body-small-font-weight);\n --line-height-small: var(--fhi-typography-body-small-line-height);\n --letter-spacing-small: var(--fhi-typography-body-small-letter-spacing);\n }\n\n :host {\n display: block;\n contain: layout;\n color: var(--fhi-color-neutral-text-default);\n .body {\n font-family: var(--fhi-font-family-default);\n -webkit-font-smoothing: antialiased;\n margin: 0;\n }\n }\n\n :host([size='large']) {\n .body {\n font-size: var(--font-size-large);\n font-weight: var(--font-weight-large);\n line-height: var(--line-height-large);\n letter-spacing: var(--letter-spacing-large);\n }\n }\n\n :host([size='medium']) {\n .body {\n font-size: var(--font-size-medium);\n font-weight: var(--font-weight-medium);\n line-height: var(--line-height-medium);\n letter-spacing: var(--letter-spacing-medium);\n }\n }\n\n :host([size='small']) {\n .body {\n font-size: var(--font-size-small);\n font-weight: var(--font-weight-small);\n line-height: var(--line-height-small);\n letter-spacing: var(--letter-spacing-small);\n }\n }\n `;\n}\n"],"names":["FhiBodySelector","FhiBody","LitElement","changedProperties","html","css","__decorateClass","property","customElement"],"mappings":";;;;;;AAGO,MAAMA,IAAkB;AAgBxB,IAAMC,IAAN,cAAsBC,EAAW;AAAA,EAAjC,cAAA;AAAA,UAAA,GAAA,SAAA,GAMsC,KAAA,OAG7B;AAAA,EAAA;AAAA,EAmBd,QAAQC,GAAyC;AAC/C,UAAM,QAAQA,CAAiB,GAE3BA,EAAkB,IAAI,OAAO,KAAK,OAAO,KAAK,SAAS,aACzD,KAAK,MAAM,QAAQ,KAAK;AAAA,EAE5B;AAAA,EAEA,SAAS;AACP,WAAOC;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,EAKT;AA0DF;AApGaH,EA4CJ,SAASI;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAtC2BC,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAN9BN,EAMgC,WAAA,QAAA,CAAA;AAoBfK,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA1BfN,EA0BiB,WAAA,SAAA,CAAA;AA1BjBA,IAANK,EAAA;AAAA,EADNE,EAAcR,CAAe;AAAA,GACjBC,CAAA;"}
1
+ {"version":3,"file":"fhi-body.js","sources":["../../src/components/typography/fhi-body/fhi-body.component.ts"],"sourcesContent":["import { html, css, LitElement, PropertyValues } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nexport const FhiBodySelector = 'fhi-body';\n\n/**\n * ## FHI Body\n *\n * {@link https://designsystem.fhi.no/?path=/story/komponenter-typography-body--preview}\n *\n * The `<fhi-body>` component is used to display body text in accordance with the FHI Design System guidelines.\n * Use this component instead of the standard HTML paragraph element, `<p>`, to ensure consistent styling across your application.\n *\n * @tag fhi-body\n * @element fhi-body\n *\n * @slot - The content of the fhi-body component. This should be pure text.\n */\n@customElement(FhiBodySelector)\nexport class FhiBody extends LitElement {\n /**\n * Sets the font size of the given text.\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 * Sets color of the given text. It supports any valid CSS color value (e.g. hex, rgb, rgba, hsl, hsla, color names).\n *\n * It is recommended to use Design Tokens for colors defined in the FHI Design System.\n * See: {@link https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs}\n *\n * Example:\n * ```html\n * <fhi-body color=\"var(--fhi-color-primary-text-default)\">\n * This text will be in the primary text color.\n * </fhi-body>\n * ```\n *\n * @type {string}\n */\n @property({ type: String }) color?: string;\n\n updated(changedProperties: PropertyValues<this>) {\n super.updated(changedProperties);\n\n if (changedProperties.has('color')) {\n this.style.color =\n typeof this.color === 'string'\n ? this.color\n : 'var(--fhi-color-neutral-text-default)';\n }\n }\n\n render() {\n return html`\n <span class=\"body\">\n <slot></slot>\n </span>\n `;\n }\n\n static styles = css`\n :host {\n --font-size-large: var(--fhi-typography-body-large-font-size);\n --font-weight-large: var(--fhi-typography-body-large-font-weight);\n --line-height-large: var(--fhi-typography-body-large-line-height);\n --letter-spacing-large: var(--fhi-typography-body-large-letter-spacing);\n\n --font-size-medium: var(--fhi-typography-body-medium-font-size);\n --font-weight-medium: var(--fhi-typography-body-medium-font-weight);\n --line-height-medium: var(--fhi-typography-body-medium-line-height);\n --letter-spacing-medium: var(--fhi-typography-body-medium-letter-spacing);\n\n --font-size-small: var(--fhi-typography-body-small-font-size);\n --font-weight-small: var(--fhi-typography-body-small-font-weight);\n --line-height-small: var(--fhi-typography-body-small-line-height);\n --letter-spacing-small: var(--fhi-typography-body-small-letter-spacing);\n }\n\n :host {\n display: block;\n contain: layout;\n color: var(--fhi-color-neutral-text-default);\n .body {\n font-family: var(--fhi-font-family-default);\n -webkit-font-smoothing: antialiased;\n margin: 0;\n }\n }\n\n :host([size='large']) {\n .body {\n font-size: var(--font-size-large);\n font-weight: var(--font-weight-large);\n line-height: var(--line-height-large);\n letter-spacing: var(--letter-spacing-large);\n }\n }\n\n :host([size='medium']) {\n .body {\n font-size: var(--font-size-medium);\n font-weight: var(--font-weight-medium);\n line-height: var(--line-height-medium);\n letter-spacing: var(--letter-spacing-medium);\n }\n }\n\n :host([size='small']) {\n .body {\n font-size: var(--font-size-small);\n font-weight: var(--font-weight-small);\n line-height: var(--line-height-small);\n letter-spacing: var(--letter-spacing-small);\n }\n }\n `;\n}\n"],"names":["FhiBodySelector","FhiBody","LitElement","changedProperties","html","css","__decorateClass","property","customElement"],"mappings":";;;;;;AAGO,MAAMA,IAAkB;AAgBxB,IAAMC,IAAN,cAAsBC,EAAW;AAAA,EAAjC,cAAA;AAAA,UAAA,GAAA,SAAA,GAMsC,KAAA,OAG7B;AAAA,EAAA;AAAA,EAmBd,QAAQC,GAAyC;AAC/C,UAAM,QAAQA,CAAiB,GAE3BA,EAAkB,IAAI,OAAO,MAC/B,KAAK,MAAM,QACT,OAAO,KAAK,SAAU,WAClB,KAAK,QACL;AAAA,EAEV;AAAA,EAEA,SAAS;AACP,WAAOC;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,EAKT;AA0DF;AAvGaH,EA+CJ,SAASI;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAzC2BC,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAN9BN,EAMgC,WAAA,QAAA,CAAA;AAoBfK,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA1BfN,EA0BiB,WAAA,SAAA,CAAA;AA1BjBA,IAANK,EAAA;AAAA,EADNE,EAAcR,CAAe;AAAA,GACjBC,CAAA;"}
package/fhi-button.js CHANGED
@@ -13,9 +13,9 @@ let l = class extends s {
13
13
  super.connectedCallback(), this.onkeyup = this._handleKeyup.bind(this), this.onkeydown = this._handleKeydown.bind(this), this.onselectstart = this._handleSelectStart.bind(this);
14
14
  }
15
15
  update(r) {
16
- super.update(r), r.has("iconOnly") && this.getAttribute("icon-only") !== null && console.warn(
16
+ r.has("color") && (this.color || (this.color = "accent")), r.has("variant") && (this.variant || (this.variant = "strong")), r.has("size") && (this.size || (this.size = "medium")), r.has("iconOnly") && this.getAttribute("icon-only") !== null && console.warn(
17
17
  "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."
18
- );
18
+ ), super.update(r);
19
19
  }
20
20
  /**
21
21
  * Programmatically clicks the button.
package/fhi-button.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"fhi-button.js","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 super.update(changedProperties);\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\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"],"names":["FhiButtonSelector","FhiButton","LitElement","changedProperties","event","_a","_b","target","validNodes","node","firstNode","firstIcon","lastNode","lastIcon","html","css","__decorateClass","property","customElement"],"mappings":"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AAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAjO2BC,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAX9BhB,EAWgC,WAAA,SAAA,CAAA;AAcAe,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAzB9BhB,EAyBgC,WAAA,WAAA,CAAA;AAcAe,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAvC9BhB,EAuCgC,WAAA,QAAA,CAAA;AAUCe,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAjD/BhB,EAiDiC,WAAA,YAAA,CAAA;AAY5Ce,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,WAAW,aAAa;AAAA,GA5DxChB,EA6DX,WAAA,YAAA,CAAA;AAS4Be,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAtEfhB,EAsEiB,WAAA,QAAA,CAAA;AAtEjBA,IAANe,EAAA;AAAA,EADNE,EAAclB,CAAiB;AAAA,GACnBC,CAAA;"}
1
+ {"version":3,"file":"fhi-button.js","sources":["../../src/components/fhi-button/fhi-button.component.ts"],"sourcesContent":["import { html, css, LitElement, 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"],"names":["FhiButtonSelector","FhiButton","LitElement","_changedProperties","event","_a","_b","target","validNodes","node","firstNode","firstIcon","lastNode","lastIcon","html","css","__decorateClass","property","customElement"],"mappings":"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AA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAtP2BC,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAX9BhB,EAWgC,WAAA,SAAA,CAAA;AAcAe,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAzB9BhB,EAyBgC,WAAA,WAAA,CAAA;AAcAe,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAvC9BhB,EAuCgC,WAAA,QAAA,CAAA;AAUCe,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAjD/BhB,EAiDiC,WAAA,YAAA,CAAA;AAY5Ce,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,WAAW,aAAa;AAAA,GA5DxChB,EA6DX,WAAA,YAAA,CAAA;AAS4Be,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAtEfhB,EAsEiB,WAAA,QAAA,CAAA;AAtEjBA,IAANe,EAAA;AAAA,EADNE,EAAclB,CAAiB;AAAA,GACnBC,CAAA;"}
package/fhi-display.js CHANGED
@@ -1,17 +1,21 @@
1
- import { i as n, n as p, a as g, b as y, t as f } from "./property-DGdAXcEz.js";
1
+ import { i as n, n as p, a as g, b as f, t as y } from "./property-DGdAXcEz.js";
2
2
  import { o as m } from "./unsafe-html-lUureUEN.js";
3
- var d = Object.defineProperty, v = Object.getOwnPropertyDescriptor, r = (e, l, s, a) => {
4
- for (var t = a > 1 ? void 0 : a ? v(l, s) : l, o = e.length - 1, h; o >= 0; o--)
3
+ var v = Object.defineProperty, d = Object.getOwnPropertyDescriptor, r = (e, l, s, a) => {
4
+ for (var t = a > 1 ? void 0 : a ? d(l, s) : l, o = e.length - 1, h; o >= 0; o--)
5
5
  (h = e[o]) && (t = (a ? h(l, s, t) : h(t)) || t);
6
- return a && t && d(l, s, t), t;
6
+ return a && t && v(l, s, t), t;
7
7
  };
8
- const c = "fhi-display";
8
+ const u = "fhi-display";
9
9
  let i = class extends g {
10
10
  constructor() {
11
11
  super(...arguments), this.size = "medium";
12
12
  }
13
13
  updated(e) {
14
- super.updated(e), e.has("color") && typeof this.color == "string" && (this.style.color = this.color);
14
+ super.updated(e), e.has("level") && (typeof this.level != "number" || this.level < 1 || this.level > 6) && console.error(
15
+ new TypeError(
16
+ `The level property must be set to a valid value. invalid value: ${this.level}`
17
+ )
18
+ ), e.has("color") && (this.style.color = typeof this.color == "string" ? this.color : "var(--fhi-color-neutral-text-default)");
15
19
  }
16
20
  render() {
17
21
  const e = `
@@ -19,7 +23,7 @@ let i = class extends g {
19
23
  <slot></slot>
20
24
  </h${this.level}>
21
25
  `;
22
- return y`${m(e)}`;
26
+ return f`${m(e)}`;
23
27
  }
24
28
  };
25
29
  i.styles = n`
@@ -94,10 +98,10 @@ r([
94
98
  p({ type: Number })
95
99
  ], i.prototype, "level", 2);
96
100
  i = r([
97
- f(c)
101
+ y(u)
98
102
  ], i);
99
103
  export {
100
104
  i as FhiDisplay,
101
- c as FhiDisplaySelector
105
+ u as FhiDisplaySelector
102
106
  };
103
107
  //# sourceMappingURL=fhi-display.js.map
package/fhi-display.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"fhi-display.js","sources":["../../src/components/fhi-display/fhi-display.component.ts"],"sourcesContent":["import { html, css, LitElement, PropertyValues } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\n\nexport const FhiDisplaySelector = 'fhi-display';\n\nexport type DisplayLevel = 1 | 2 | 3 | 4 | 5 | 6;\n\n/**\n * ## FHI Display\n *\n * {@link https://designsystem.fhi.no/?path=/story/komponenter-typography-display--preview}\n *\n * The `<fhi-display>` component is used to display large headline text in accordance with the FHI Design System guidelines.\n * Use this component instead of the standard HTML heading elements, `<h1>` - `<h6>`, to ensure consistent styling across your application.\n *\n * @tag fhi-display\n * @element fhi-display\n *\n * @slot - The content of the fhi-display component. This should be pure text.\n */\n@customElement(FhiDisplaySelector)\nexport class FhiDisplay extends LitElement {\n /**\n * Sets the font size of the given text.\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 * Sets color of the given text. It supports any valid CSS color value (e.g. hex, rgb, rgba, hsl, hsla, color names).\n *\n * It is recommended to use Design Tokens for colors defined in the FHI Design System.\n * See: {@link https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs}\n *\n * Example:\n * ```html\n * <fhi-display color=\"var(--fhi-color-primary-text-default)\">\n * This text will be in the primary text color.\n * </fhi-display>\n * ```\n *\n * @type {string}\n */\n @property({ type: String }) color?: string;\n\n /**\n * Sets the heading level for the text, corresponding to HTML heading elements `<h1>` to `<h6>`.\n * @type {1 | 2 | 3 | 4 | 5 | 6}\n */\n @property({ type: Number }) level!: DisplayLevel;\n\n updated(changedProperties: PropertyValues<this>) {\n super.updated(changedProperties);\n\n if (changedProperties.has('color') && typeof this.color == 'string') {\n this.style.color = this.color;\n }\n }\n\n render() {\n const template = `\n <h${this.level} class=\"display\">\n <slot></slot>\n </h${this.level}>\n `;\n return html`${unsafeHTML(template)}`;\n }\n\n static styles = css`\n :host {\n --font-size-large: var(--fhi-typography-display-large-font-size);\n --font-weight-large: var(--fhi-typography-display-large-font-weight);\n --line-height-large: var(--fhi-typography-display-large-line-height);\n --letter-spacing-large: var(\n --fhi-typography-display-large-letter-spacing\n );\n\n --font-size-medium: var(--fhi-typography-display-medium-font-size);\n --font-weight-medium: var(--fhi-typography-display-medium-font-weight);\n --line-height-medium: var(--fhi-typography-display-medium-line-height);\n --letter-spacing-medium: var(\n --fhi-typography-display-medium-letter-spacing\n );\n\n --font-size-small: var(--fhi-typography-display-small-font-size);\n --font-weight-small: var(--fhi-typography-display-small-font-weight);\n --line-height-small: var(--fhi-typography-display-small-line-height);\n --letter-spacing-small: var(\n --fhi-typography-display-small-letter-spacing\n );\n }\n\n :host {\n display: block;\n contain: layout;\n color: var(--fhi-color-neutral-text-default);\n .display {\n font-family: var(--fhi-font-family-default);\n -webkit-font-smoothing: antialiased;\n margin: 0;\n }\n }\n\n :host([size='large']) {\n .display {\n font-size: var(--font-size-large);\n font-weight: var(--font-weight-large);\n line-height: var(--line-height-large);\n letter-spacing: var(--letter-spacing-large);\n }\n }\n\n :host([size='medium']) {\n .display {\n font-size: var(--font-size-medium);\n font-weight: var(--font-weight-medium);\n line-height: var(--line-height-medium);\n letter-spacing: var(--letter-spacing-medium);\n }\n }\n\n :host([size='small']) {\n .display {\n font-size: var(--font-size-small);\n font-weight: var(--font-weight-small);\n line-height: var(--line-height-small);\n letter-spacing: var(--letter-spacing-small);\n }\n }\n `;\n}\n"],"names":["FhiDisplaySelector","FhiDisplay","LitElement","changedProperties","template","html","unsafeHTML","css","__decorateClass","property","customElement"],"mappings":";;;;;;;AAIO,MAAMA,IAAqB;AAkB3B,IAAMC,IAAN,cAAyBC,EAAW;AAAA,EAApC,cAAA;AAAA,UAAA,GAAA,SAAA,GAMsC,KAAA,OAG7B;AAAA,EAAA;AAAA,EAyBd,QAAQC,GAAyC;AAC/C,UAAM,QAAQA,CAAiB,GAE3BA,EAAkB,IAAI,OAAO,KAAK,OAAO,KAAK,SAAS,aACzD,KAAK,MAAM,QAAQ,KAAK;AAAA,EAE5B;AAAA,EAEA,SAAS;AACP,UAAMC,IAAW;AAAA,UACX,KAAK,KAAK;AAAA;AAAA,WAET,KAAK,KAAK;AAAA;AAEjB,WAAOC,IAAOC,EAAWF,CAAQ,CAAC;AAAA,EACpC;AAgEF;AAjHaH,EAmDJ,SAASM;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AA7C2BC,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAN9BR,EAMgC,WAAA,QAAA,CAAA;AAoBfO,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA1BfR,EA0BiB,WAAA,SAAA,CAAA;AAMAO,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAhCfR,EAgCiB,WAAA,SAAA,CAAA;AAhCjBA,IAANO,EAAA;AAAA,EADNE,EAAcV,CAAkB;AAAA,GACpBC,CAAA;"}
1
+ {"version":3,"file":"fhi-display.js","sources":["../../src/components/typography/fhi-display/fhi-display.component.ts"],"sourcesContent":["import { html, css, LitElement, PropertyValues } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\n\nexport const FhiDisplaySelector = 'fhi-display';\n\nexport type DisplayLevel = 1 | 2 | 3 | 4 | 5 | 6;\n\n/**\n * ## FHI Display\n *\n * {@link https://designsystem.fhi.no/?path=/story/komponenter-typography-display--preview}\n *\n * The `<fhi-display>` component is used to display large headline text in accordance with the FHI Design System guidelines.\n * Use this component instead of the standard HTML heading elements, `<h1>` - `<h6>`, to ensure consistent styling across your application.\n *\n * @tag fhi-display\n * @element fhi-display\n *\n * @slot - The content of the fhi-display component. This should be pure text.\n */\n@customElement(FhiDisplaySelector)\nexport class FhiDisplay extends LitElement {\n /**\n * Sets the font size of the given text.\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 * Sets color of the given text. It supports any valid CSS color value (e.g. hex, rgb, rgba, hsl, hsla, color names).\n *\n * It is recommended to use Design Tokens for colors defined in the FHI Design System.\n * See: {@link https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs}\n *\n * Example:\n * ```html\n * <fhi-display color=\"var(--fhi-color-primary-text-default)\">\n * This text will be in the primary text color.\n * </fhi-display>\n * ```\n *\n * @type {string}\n */\n @property({ type: String }) color?: string;\n\n /**\n * Sets the heading level for the text, corresponding to HTML heading elements `<h1>` to `<h6>`.\n * @type {1 | 2 | 3 | 4 | 5 | 6}\n */\n @property({ type: Number }) level!: DisplayLevel;\n\n updated(changedProperties: PropertyValues<this>) {\n super.updated(changedProperties);\n\n if (changedProperties.has('level')) {\n if (typeof this.level !== 'number' || this.level < 1 || this.level > 6) {\n console.error(\n new TypeError(\n `The level property must be set to a valid value. invalid value: ${this.level}`,\n ),\n );\n }\n }\n\n if (changedProperties.has('color')) {\n this.style.color =\n typeof this.color === 'string'\n ? this.color\n : 'var(--fhi-color-neutral-text-default)';\n }\n }\n\n render() {\n const template = `\n <h${this.level} class=\"display\">\n <slot></slot>\n </h${this.level}>\n `;\n return html`${unsafeHTML(template)}`;\n }\n\n static styles = css`\n :host {\n --font-size-large: var(--fhi-typography-display-large-font-size);\n --font-weight-large: var(--fhi-typography-display-large-font-weight);\n --line-height-large: var(--fhi-typography-display-large-line-height);\n --letter-spacing-large: var(\n --fhi-typography-display-large-letter-spacing\n );\n\n --font-size-medium: var(--fhi-typography-display-medium-font-size);\n --font-weight-medium: var(--fhi-typography-display-medium-font-weight);\n --line-height-medium: var(--fhi-typography-display-medium-line-height);\n --letter-spacing-medium: var(\n --fhi-typography-display-medium-letter-spacing\n );\n\n --font-size-small: var(--fhi-typography-display-small-font-size);\n --font-weight-small: var(--fhi-typography-display-small-font-weight);\n --line-height-small: var(--fhi-typography-display-small-line-height);\n --letter-spacing-small: var(\n --fhi-typography-display-small-letter-spacing\n );\n }\n\n :host {\n display: block;\n contain: layout;\n color: var(--fhi-color-neutral-text-default);\n .display {\n font-family: var(--fhi-font-family-default);\n -webkit-font-smoothing: antialiased;\n margin: 0;\n }\n }\n\n :host([size='large']) {\n .display {\n font-size: var(--font-size-large);\n font-weight: var(--font-weight-large);\n line-height: var(--line-height-large);\n letter-spacing: var(--letter-spacing-large);\n }\n }\n\n :host([size='medium']) {\n .display {\n font-size: var(--font-size-medium);\n font-weight: var(--font-weight-medium);\n line-height: var(--line-height-medium);\n letter-spacing: var(--letter-spacing-medium);\n }\n }\n\n :host([size='small']) {\n .display {\n font-size: var(--font-size-small);\n font-weight: var(--font-weight-small);\n line-height: var(--line-height-small);\n letter-spacing: var(--letter-spacing-small);\n }\n }\n `;\n}\n"],"names":["FhiDisplaySelector","FhiDisplay","LitElement","changedProperties","template","html","unsafeHTML","css","__decorateClass","property","customElement"],"mappings":";;;;;;;AAIO,MAAMA,IAAqB;AAkB3B,IAAMC,IAAN,cAAyBC,EAAW;AAAA,EAApC,cAAA;AAAA,UAAA,GAAA,SAAA,GAMsC,KAAA,OAG7B;AAAA,EAAA;AAAA,EAyBd,QAAQC,GAAyC;AAC/C,UAAM,QAAQA,CAAiB,GAE3BA,EAAkB,IAAI,OAAO,MAC3B,OAAO,KAAK,SAAU,YAAY,KAAK,QAAQ,KAAK,KAAK,QAAQ,MACnE,QAAQ;AAAA,MACN,IAAI;AAAA,QACF,mEAAmE,KAAK,KAAK;AAAA,MAAA;AAAA,IAC/E,GAKFA,EAAkB,IAAI,OAAO,MAC/B,KAAK,MAAM,QACT,OAAO,KAAK,SAAU,WAClB,KAAK,QACL;AAAA,EAEV;AAAA,EAEA,SAAS;AACP,UAAMC,IAAW;AAAA,UACX,KAAK,KAAK;AAAA;AAAA,WAET,KAAK,KAAK;AAAA;AAEjB,WAAOC,IAAOC,EAAWF,CAAQ,CAAC;AAAA,EACpC;AAgEF;AA9HaH,EAgEJ,SAASM;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AA1D2BC,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAN9BR,EAMgC,WAAA,QAAA,CAAA;AAoBfO,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA1BfR,EA0BiB,WAAA,SAAA,CAAA;AAMAO,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAhCfR,EAgCiB,WAAA,SAAA,CAAA;AAhCjBA,IAANO,EAAA;AAAA,EADNE,EAAcV,CAAkB;AAAA,GACpBC,CAAA;"}
package/fhi-headline.js CHANGED
@@ -1,17 +1,21 @@
1
1
  import { i as g, n as s, a as p, b as f, t as m } from "./property-DGdAXcEz.js";
2
- import { o as d } from "./unsafe-html-lUureUEN.js";
3
- var y = Object.defineProperty, v = Object.getOwnPropertyDescriptor, r = (e, l, h, a) => {
4
- for (var t = a > 1 ? void 0 : a ? v(l, h) : l, n = e.length - 1, o; n >= 0; n--)
2
+ import { o as v } from "./unsafe-html-lUureUEN.js";
3
+ var d = Object.defineProperty, y = Object.getOwnPropertyDescriptor, r = (e, l, h, a) => {
4
+ for (var t = a > 1 ? void 0 : a ? y(l, h) : l, n = e.length - 1, o; n >= 0; n--)
5
5
  (o = e[n]) && (t = (a ? o(l, h, t) : o(t)) || t);
6
- return a && t && y(l, h, t), t;
6
+ return a && t && d(l, h, t), t;
7
7
  };
8
- const c = "fhi-headline";
8
+ const u = "fhi-headline";
9
9
  let i = class extends p {
10
10
  constructor() {
11
11
  super(...arguments), this.size = "medium";
12
12
  }
13
13
  updated(e) {
14
- super.updated(e), e.has("color") && typeof this.color == "string" && (this.style.color = this.color);
14
+ super.updated(e), e.has("level") && (typeof this.level != "number" || this.level < 1 || this.level > 6) && console.error(
15
+ new TypeError(
16
+ `The level property must be set to a valid value. invalid value: ${this.level}`
17
+ )
18
+ ), e.has("color") && (this.style.color = typeof this.color == "string" ? this.color : "var(--fhi-color-neutral-text-default)");
15
19
  }
16
20
  render() {
17
21
  const e = `
@@ -19,7 +23,7 @@ let i = class extends p {
19
23
  <slot></slot>
20
24
  </h${this.level}>
21
25
  `;
22
- return f`${d(e)}`;
26
+ return f`${v(e)}`;
23
27
  }
24
28
  };
25
29
  i.styles = g`
@@ -94,10 +98,10 @@ r([
94
98
  s({ type: Number })
95
99
  ], i.prototype, "level", 2);
96
100
  i = r([
97
- m(c)
101
+ m(u)
98
102
  ], i);
99
103
  export {
100
104
  i as FhiHeadline,
101
- c as FhiHeadlineSelector
105
+ u as FhiHeadlineSelector
102
106
  };
103
107
  //# sourceMappingURL=fhi-headline.js.map
package/fhi-headline.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"fhi-headline.js","sources":["../../src/components/fhi-headline/fhi-headline.component.ts"],"sourcesContent":["import { html, css, LitElement, PropertyValues } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\n\nexport const FhiHeadlineSelector = 'fhi-headline';\n\nexport type HeadlineLevel = 1 | 2 | 3 | 4 | 5 | 6;\n\n/**\n * ## FHI Headline\n *\n * {@link https://designsystem.fhi.no/?path=/story/komponenter-typography-headline--preview}\n *\n * The `<fhi-headline>` component is used to display headline text in accordance with the FHI Design System guidelines.\n * Use this component instead of the standard HTML heading elements, `<h1>` - `<h6>`, to ensure consistent styling across your application.\n *\n * @tag fhi-headline\n * @element fhi-headline\n *\n * @slot - The content of the fhi-headline component. This should be pure text.\n */\n@customElement(FhiHeadlineSelector)\nexport class FhiHeadline extends LitElement {\n /**\n * Sets the size of the text styles.\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 * Sets color of the given text. It supports any valid CSS color value (e.g. hex, rgb, rgba, hsl, hsla, color names).\n *\n * It is recommended to use Design Tokens for colors defined in the FHI Design System.\n * See: {@link https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs}\n *\n * Example:\n * ```html\n * <fhi-headline color=\"var(--fhi-color-primary-text-default)\">\n * This text will be in the primary text color.\n * </fhi-headline>\n * ```\n *\n * @type {string}\n */\n @property({ type: String }) color?: string;\n\n /**\n * Sets the heading level for the text, corresponding to HTML heading elements `<h1>` to `<h6>`.\n * @type {1 | 2 | 3 | 4 | 5 | 6}\n */\n @property({ type: Number }) level!: HeadlineLevel;\n\n updated(changedProperties: PropertyValues<this>) {\n super.updated(changedProperties);\n\n if (changedProperties.has('color') && typeof this.color == 'string') {\n this.style.color = this.color;\n }\n }\n\n render() {\n const template = `\n <h${this.level} class=\"headline\">\n <slot></slot>\n </h${this.level}>\n `;\n return html`${unsafeHTML(template)}`;\n }\n\n static styles = css`\n :host {\n --font-size-large: var(--fhi-typography-headline-large-font-size);\n --font-weight-large: var(--fhi-typography-headline-large-font-weight);\n --line-height-large: var(--fhi-typography-headline-large-line-height);\n --letter-spacing-large: var(\n --fhi-typography-headline-large-letter-spacing\n );\n\n --font-size-medium: var(--fhi-typography-headline-medium-font-size);\n --font-weight-medium: var(--fhi-typography-headline-medium-font-weight);\n --line-height-medium: var(--fhi-typography-headline-medium-line-height);\n --letter-spacing-medium: var(\n --fhi-typography-headline-medium-letter-spacing\n );\n\n --font-size-small: var(--fhi-typography-headline-small-font-size);\n --font-weight-small: var(--fhi-typography-headline-small-font-weight);\n --line-height-small: var(--fhi-typography-headline-small-line-height);\n --letter-spacing-small: var(\n --fhi-typography-headline-small-letter-spacing\n );\n }\n\n :host {\n display: block;\n contain: layout;\n color: var(--fhi-color-neutral-text-default);\n .headline {\n font-family: var(--fhi-font-family-default);\n -webkit-font-smoothing: antialiased;\n margin: 0;\n }\n }\n\n :host([size='large']) {\n .headline {\n font-size: var(--font-size-large);\n font-weight: var(--font-weight-large);\n line-height: var(--line-height-large);\n letter-spacing: var(--letter-spacing-large);\n }\n }\n\n :host([size='medium']) {\n .headline {\n font-size: var(--font-size-medium);\n font-weight: var(--font-weight-medium);\n line-height: var(--line-height-medium);\n letter-spacing: var(--letter-spacing-medium);\n }\n }\n\n :host([size='small']) {\n .headline {\n font-size: var(--font-size-small);\n font-weight: var(--font-weight-small);\n line-height: var(--line-height-small);\n letter-spacing: var(--letter-spacing-small);\n }\n }\n `;\n}\n"],"names":["FhiHeadlineSelector","FhiHeadline","LitElement","changedProperties","template","html","unsafeHTML","css","__decorateClass","property","customElement"],"mappings":";;;;;;;AAIO,MAAMA,IAAsB;AAkB5B,IAAMC,IAAN,cAA0BC,EAAW;AAAA,EAArC,cAAA;AAAA,UAAA,GAAA,SAAA,GAMsC,KAAA,OAG7B;AAAA,EAAA;AAAA,EAyBd,QAAQC,GAAyC;AAC/C,UAAM,QAAQA,CAAiB,GAE3BA,EAAkB,IAAI,OAAO,KAAK,OAAO,KAAK,SAAS,aACzD,KAAK,MAAM,QAAQ,KAAK;AAAA,EAE5B;AAAA,EAEA,SAAS;AACP,UAAMC,IAAW;AAAA,UACX,KAAK,KAAK;AAAA;AAAA,WAET,KAAK,KAAK;AAAA;AAEjB,WAAOC,IAAOC,EAAWF,CAAQ,CAAC;AAAA,EACpC;AAgEF;AAjHaH,EAmDJ,SAASM;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AA7C2BC,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAN9BR,EAMgC,WAAA,QAAA,CAAA;AAoBfO,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA1BfR,EA0BiB,WAAA,SAAA,CAAA;AAMAO,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAhCfR,EAgCiB,WAAA,SAAA,CAAA;AAhCjBA,IAANO,EAAA;AAAA,EADNE,EAAcV,CAAmB;AAAA,GACrBC,CAAA;"}
1
+ {"version":3,"file":"fhi-headline.js","sources":["../../src/components/typography/fhi-headline/fhi-headline.component.ts"],"sourcesContent":["import { html, css, LitElement, PropertyValues } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\n\nexport const FhiHeadlineSelector = 'fhi-headline';\n\nexport type HeadlineLevel = 1 | 2 | 3 | 4 | 5 | 6;\n\n/**\n * ## FHI Headline\n *\n * {@link https://designsystem.fhi.no/?path=/story/komponenter-typography-headline--preview}\n *\n * The `<fhi-headline>` component is used to display headline text in accordance with the FHI Design System guidelines.\n * Use this component instead of the standard HTML heading elements, `<h1>` - `<h6>`, to ensure consistent styling across your application.\n *\n * @tag fhi-headline\n * @element fhi-headline\n *\n * @slot - The content of the fhi-headline component. This should be pure text.\n */\n@customElement(FhiHeadlineSelector)\nexport class FhiHeadline extends LitElement {\n /**\n * Sets the size of the text styles.\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 * Sets color of the given text. It supports any valid CSS color value (e.g. hex, rgb, rgba, hsl, hsla, color names).\n *\n * It is recommended to use Design Tokens for colors defined in the FHI Design System.\n * See: {@link https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs}\n *\n * Example:\n * ```html\n * <fhi-headline color=\"var(--fhi-color-primary-text-default)\">\n * This text will be in the primary text color.\n * </fhi-headline>\n * ```\n *\n * @type {string}\n */\n @property({ type: String }) color?: string;\n\n /**\n * Sets the heading level for the text, corresponding to HTML heading elements `<h1>` to `<h6>`.\n * @type {1 | 2 | 3 | 4 | 5 | 6}\n */\n @property({ type: Number }) level!: HeadlineLevel;\n\n updated(changedProperties: PropertyValues<this>) {\n super.updated(changedProperties);\n\n if (changedProperties.has('level')) {\n if (typeof this.level !== 'number' || this.level < 1 || this.level > 6) {\n console.error(\n new TypeError(\n `The level property must be set to a valid value. invalid value: ${this.level}`,\n ),\n );\n }\n }\n\n if (changedProperties.has('color')) {\n this.style.color =\n typeof this.color === 'string'\n ? this.color\n : 'var(--fhi-color-neutral-text-default)';\n }\n }\n\n render() {\n const template = `\n <h${this.level} class=\"headline\">\n <slot></slot>\n </h${this.level}>\n `;\n return html`${unsafeHTML(template)}`;\n }\n\n static styles = css`\n :host {\n --font-size-large: var(--fhi-typography-headline-large-font-size);\n --font-weight-large: var(--fhi-typography-headline-large-font-weight);\n --line-height-large: var(--fhi-typography-headline-large-line-height);\n --letter-spacing-large: var(\n --fhi-typography-headline-large-letter-spacing\n );\n\n --font-size-medium: var(--fhi-typography-headline-medium-font-size);\n --font-weight-medium: var(--fhi-typography-headline-medium-font-weight);\n --line-height-medium: var(--fhi-typography-headline-medium-line-height);\n --letter-spacing-medium: var(\n --fhi-typography-headline-medium-letter-spacing\n );\n\n --font-size-small: var(--fhi-typography-headline-small-font-size);\n --font-weight-small: var(--fhi-typography-headline-small-font-weight);\n --line-height-small: var(--fhi-typography-headline-small-line-height);\n --letter-spacing-small: var(\n --fhi-typography-headline-small-letter-spacing\n );\n }\n\n :host {\n display: block;\n contain: layout;\n color: var(--fhi-color-neutral-text-default);\n .headline {\n font-family: var(--fhi-font-family-default);\n -webkit-font-smoothing: antialiased;\n margin: 0;\n }\n }\n\n :host([size='large']) {\n .headline {\n font-size: var(--font-size-large);\n font-weight: var(--font-weight-large);\n line-height: var(--line-height-large);\n letter-spacing: var(--letter-spacing-large);\n }\n }\n\n :host([size='medium']) {\n .headline {\n font-size: var(--font-size-medium);\n font-weight: var(--font-weight-medium);\n line-height: var(--line-height-medium);\n letter-spacing: var(--letter-spacing-medium);\n }\n }\n\n :host([size='small']) {\n .headline {\n font-size: var(--font-size-small);\n font-weight: var(--font-weight-small);\n line-height: var(--line-height-small);\n letter-spacing: var(--letter-spacing-small);\n }\n }\n `;\n}\n"],"names":["FhiHeadlineSelector","FhiHeadline","LitElement","changedProperties","template","html","unsafeHTML","css","__decorateClass","property","customElement"],"mappings":";;;;;;;AAIO,MAAMA,IAAsB;AAkB5B,IAAMC,IAAN,cAA0BC,EAAW;AAAA,EAArC,cAAA;AAAA,UAAA,GAAA,SAAA,GAMsC,KAAA,OAG7B;AAAA,EAAA;AAAA,EAyBd,QAAQC,GAAyC;AAC/C,UAAM,QAAQA,CAAiB,GAE3BA,EAAkB,IAAI,OAAO,MAC3B,OAAO,KAAK,SAAU,YAAY,KAAK,QAAQ,KAAK,KAAK,QAAQ,MACnE,QAAQ;AAAA,MACN,IAAI;AAAA,QACF,mEAAmE,KAAK,KAAK;AAAA,MAAA;AAAA,IAC/E,GAKFA,EAAkB,IAAI,OAAO,MAC/B,KAAK,MAAM,QACT,OAAO,KAAK,SAAU,WAClB,KAAK,QACL;AAAA,EAEV;AAAA,EAEA,SAAS;AACP,UAAMC,IAAW;AAAA,UACX,KAAK,KAAK;AAAA;AAAA,WAET,KAAK,KAAK;AAAA;AAEjB,WAAOC,IAAOC,EAAWF,CAAQ,CAAC;AAAA,EACpC;AAgEF;AA9HaH,EAgEJ,SAASM;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AA1D2BC,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAN9BR,EAMgC,WAAA,QAAA,CAAA;AAoBfO,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA1BfR,EA0BiB,WAAA,SAAA,CAAA;AAMAO,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAhCfR,EAgCiB,WAAA,SAAA,CAAA;AAhCjBA,IAANO,EAAA;AAAA,EADNE,EAAcV,CAAmB;AAAA,GACrBC,CAAA;"}
package/fhi-label.js CHANGED
@@ -1,19 +1,19 @@
1
- import { i as g, n, a as p, b as f, t as m } from "./property-DGdAXcEz.js";
2
- var y = Object.defineProperty, v = Object.getOwnPropertyDescriptor, h = (t, a, r, i) => {
3
- for (var e = i > 1 ? void 0 : i ? v(a, r) : a, o = t.length - 1, s; o >= 0; o--)
4
- (s = t[o]) && (e = (i ? s(a, r, e) : s(e)) || e);
1
+ import { i as g, n, a as f, b as p, t as m } from "./property-DGdAXcEz.js";
2
+ var y = Object.defineProperty, v = Object.getOwnPropertyDescriptor, s = (t, a, r, i) => {
3
+ for (var e = i > 1 ? void 0 : i ? v(a, r) : a, o = t.length - 1, h; o >= 0; o--)
4
+ (h = t[o]) && (e = (i ? h(a, r, e) : h(e)) || e);
5
5
  return i && e && y(a, r, e), e;
6
6
  };
7
7
  const c = "fhi-label";
8
- let l = class extends p {
8
+ let l = class extends f {
9
9
  constructor() {
10
10
  super(...arguments), this.size = "medium";
11
11
  }
12
12
  updated(t) {
13
- super.updated(t), t.has("color") && typeof this.color == "string" && (this.style.color = this.color);
13
+ super.updated(t), t.has("color") && (this.style.color = typeof this.color == "string" ? this.color : "var(--fhi-color-neutral-text-default)");
14
14
  }
15
15
  render() {
16
- return f`
16
+ return p`
17
17
  <span class="label">
18
18
  <slot></slot>
19
19
  </span>
@@ -78,13 +78,13 @@ l.styles = g`
78
78
  }
79
79
  }
80
80
  `;
81
- h([
81
+ s([
82
82
  n({ type: String, reflect: !0 })
83
83
  ], l.prototype, "size", 2);
84
- h([
84
+ s([
85
85
  n({ type: String })
86
86
  ], l.prototype, "color", 2);
87
- l = h([
87
+ l = s([
88
88
  m(c)
89
89
  ], l);
90
90
  export {
package/fhi-label.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"fhi-label.js","sources":["../../src/components/fhi-label/fhi-label.component.ts"],"sourcesContent":["import { html, css, LitElement, PropertyValues } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nexport const FhiLabelSelector = 'fhi-label';\n\n/**\n * ## FHI Label\n *\n * {@link https://designsystem.fhi.no/?path=/story/komponenter-typography-label--preview}\n *\n * The `<fhi-label>` component is used to display label text in accordance with the FHI Design System guidelines.\n * Use this component instead of the standard HTML `<label>` element to ensure consistent styling across your application.\n *\n * @tag fhi-label\n * @element fhi-label\n *\n * @slot - The content of the fhi-label component. This should be pure text.\n */\n@customElement(FhiLabelSelector)\nexport class FhiLabel extends LitElement {\n /**\n * Sets the font size of the given text.\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 * Sets color of the given text. It supports any valid CSS color value (e.g. hex, rgb, rgba, hsl, hsla, color names).\n *\n * It is recommended to use Design Tokens for colors defined in the FHI Design System.\n * See: {@link https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs}\n *\n * Example:\n * ```html\n * <fhi-label color=\"var(--fhi-color-primary-text-default)\">\n * This text will be in the primary text color.\n * </fhi-label>\n * ```\n *\n * @type {string}\n */\n @property({ type: String }) color?: string;\n\n updated(changedProperties: PropertyValues<this>) {\n super.updated(changedProperties);\n\n if (changedProperties.has('color') && typeof this.color == 'string') {\n this.style.color = this.color;\n }\n }\n\n render() {\n return html`\n <span class=\"label\">\n <slot></slot>\n </span>\n `;\n }\n\n static styles = css`\n :host {\n --font-size-large: var(--fhi-typography-label-large-font-size);\n --font-weight-large: var(--fhi-typography-label-large-font-weight);\n --line-height-large: var(--fhi-typography-label-large-line-height);\n --letter-spacing-large: var(--fhi-typography-label-large-letter-spacing);\n\n --font-size-medium: var(--fhi-typography-label-medium-font-size);\n --font-weight-medium: var(--fhi-typography-label-medium-font-weight);\n --line-height-medium: var(--fhi-typography-label-medium-line-height);\n --letter-spacing-medium: var(\n --fhi-typography-label-medium-letter-spacing\n );\n\n --font-size-small: var(--fhi-typography-label-small-font-size);\n --font-weight-small: var(--fhi-typography-label-small-font-weight);\n --line-height-small: var(--fhi-typography-label-small-line-height);\n --letter-spacing-small: var(--fhi-typography-label-small-letter-spacing);\n }\n\n :host {\n display: block;\n contain: layout;\n color: var(--fhi-color-neutral-text-default);\n .label {\n font-family: var(--fhi-font-family-default);\n -webkit-font-smoothing: antialiased;\n margin: 0;\n }\n }\n\n :host([size='large']) {\n .label {\n font-size: var(--font-size-large);\n font-weight: var(--font-weight-large);\n line-height: var(--line-height-large);\n letter-spacing: var(--letter-spacing-large);\n }\n }\n\n :host([size='medium']) {\n .label {\n font-size: var(--font-size-medium);\n font-weight: var(--font-weight-medium);\n line-height: var(--line-height-medium);\n letter-spacing: var(--letter-spacing-medium);\n }\n }\n\n :host([size='small']) {\n .label {\n font-size: var(--font-size-small);\n font-weight: var(--font-weight-small);\n line-height: var(--line-height-small);\n letter-spacing: var(--letter-spacing-small);\n }\n }\n `;\n}\n"],"names":["FhiLabelSelector","FhiLabel","LitElement","changedProperties","html","css","__decorateClass","property","customElement"],"mappings":";;;;;;AAGO,MAAMA,IAAmB;AAgBzB,IAAMC,IAAN,cAAuBC,EAAW;AAAA,EAAlC,cAAA;AAAA,UAAA,GAAA,SAAA,GAMsC,KAAA,OAG7B;AAAA,EAAA;AAAA,EAmBd,QAAQC,GAAyC;AAC/C,UAAM,QAAQA,CAAiB,GAE3BA,EAAkB,IAAI,OAAO,KAAK,OAAO,KAAK,SAAS,aACzD,KAAK,MAAM,QAAQ,KAAK;AAAA,EAE5B;AAAA,EAEA,SAAS;AACP,WAAOC;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,EAKT;AA4DF;AAtGaH,EA4CJ,SAASI;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAtC2BC,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAN9BN,EAMgC,WAAA,QAAA,CAAA;AAoBfK,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA1BfN,EA0BiB,WAAA,SAAA,CAAA;AA1BjBA,IAANK,EAAA;AAAA,EADNE,EAAcR,CAAgB;AAAA,GAClBC,CAAA;"}
1
+ {"version":3,"file":"fhi-label.js","sources":["../../src/components/typography/fhi-label/fhi-label.component.ts"],"sourcesContent":["import { html, css, LitElement, PropertyValues } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nexport const FhiLabelSelector = 'fhi-label';\n\n/**\n * ## FHI Label\n *\n * {@link https://designsystem.fhi.no/?path=/story/komponenter-typography-label--preview}\n *\n * The `<fhi-label>` component is used to display label text in accordance with the FHI Design System guidelines.\n * Use this component instead of the standard HTML `<label>` element to ensure consistent styling across your application.\n *\n * @tag fhi-label\n * @element fhi-label\n *\n * @slot - The content of the fhi-label component. This should be pure text.\n */\n@customElement(FhiLabelSelector)\nexport class FhiLabel extends LitElement {\n /**\n * Sets the font size of the given text.\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 * Sets color of the given text. It supports any valid CSS color value (e.g. hex, rgb, rgba, hsl, hsla, color names).\n *\n * It is recommended to use Design Tokens for colors defined in the FHI Design System.\n * See: {@link https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs}\n *\n * Example:\n * ```html\n * <fhi-label color=\"var(--fhi-color-primary-text-default)\">\n * This text will be in the primary text color.\n * </fhi-label>\n * ```\n *\n * @type {string}\n */\n @property({ type: String }) color?: string;\n\n updated(changedProperties: PropertyValues<this>) {\n super.updated(changedProperties);\n\n if (changedProperties.has('color')) {\n this.style.color =\n typeof this.color === 'string'\n ? this.color\n : 'var(--fhi-color-neutral-text-default)';\n }\n }\n\n render() {\n return html`\n <span class=\"label\">\n <slot></slot>\n </span>\n `;\n }\n\n static styles = css`\n :host {\n --font-size-large: var(--fhi-typography-label-large-font-size);\n --font-weight-large: var(--fhi-typography-label-large-font-weight);\n --line-height-large: var(--fhi-typography-label-large-line-height);\n --letter-spacing-large: var(--fhi-typography-label-large-letter-spacing);\n\n --font-size-medium: var(--fhi-typography-label-medium-font-size);\n --font-weight-medium: var(--fhi-typography-label-medium-font-weight);\n --line-height-medium: var(--fhi-typography-label-medium-line-height);\n --letter-spacing-medium: var(\n --fhi-typography-label-medium-letter-spacing\n );\n\n --font-size-small: var(--fhi-typography-label-small-font-size);\n --font-weight-small: var(--fhi-typography-label-small-font-weight);\n --line-height-small: var(--fhi-typography-label-small-line-height);\n --letter-spacing-small: var(--fhi-typography-label-small-letter-spacing);\n }\n\n :host {\n display: block;\n contain: layout;\n color: var(--fhi-color-neutral-text-default);\n .label {\n font-family: var(--fhi-font-family-default);\n -webkit-font-smoothing: antialiased;\n margin: 0;\n }\n }\n\n :host([size='large']) {\n .label {\n font-size: var(--font-size-large);\n font-weight: var(--font-weight-large);\n line-height: var(--line-height-large);\n letter-spacing: var(--letter-spacing-large);\n }\n }\n\n :host([size='medium']) {\n .label {\n font-size: var(--font-size-medium);\n font-weight: var(--font-weight-medium);\n line-height: var(--line-height-medium);\n letter-spacing: var(--letter-spacing-medium);\n }\n }\n\n :host([size='small']) {\n .label {\n font-size: var(--font-size-small);\n font-weight: var(--font-weight-small);\n line-height: var(--line-height-small);\n letter-spacing: var(--letter-spacing-small);\n }\n }\n `;\n}\n"],"names":["FhiLabelSelector","FhiLabel","LitElement","changedProperties","html","css","__decorateClass","property","customElement"],"mappings":";;;;;;AAGO,MAAMA,IAAmB;AAgBzB,IAAMC,IAAN,cAAuBC,EAAW;AAAA,EAAlC,cAAA;AAAA,UAAA,GAAA,SAAA,GAMsC,KAAA,OAG7B;AAAA,EAAA;AAAA,EAmBd,QAAQC,GAAyC;AAC/C,UAAM,QAAQA,CAAiB,GAE3BA,EAAkB,IAAI,OAAO,MAC/B,KAAK,MAAM,QACT,OAAO,KAAK,SAAU,WAClB,KAAK,QACL;AAAA,EAEV;AAAA,EAEA,SAAS;AACP,WAAOC;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,EAKT;AA4DF;AAzGaH,EA+CJ,SAASI;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAzC2BC,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAN9BN,EAMgC,WAAA,QAAA,CAAA;AAoBfK,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA1BfN,EA0BiB,WAAA,SAAA,CAAA;AA1BjBA,IAANK,EAAA;AAAA,EADNE,EAAcR,CAAgB;AAAA,GAClBC,CAAA;"}
package/fhi-modal-dialog.js CHANGED
@@ -14,11 +14,11 @@ let o = class extends p {
14
14
  super(...arguments), this.open = !1, this.size = "medium", this.closeButtonLabel = "", this.heading = "", this._triggerElement = null, this._bodyOverflowStyle = "", this._mouseDownInsideDialog = !1;
15
15
  }
16
16
  updated(e) {
17
- if (super.updated(e), e.has("open") && (this.open ? this.show() : this.close()), typeof this.closeButtonLabel != "string" || this.closeButtonLabel.length === 0)
17
+ if (super.updated(e), e.has("open") && (this.open ? this.show() : this.close()), e.has("size") && this.size !== "small" && this.size !== "medium" && (this.size = "medium"), e.has("closeButtonLabel") && (typeof this.closeButtonLabel != "string" || this.closeButtonLabel.length === 0))
18
18
  throw new TypeError(
19
19
  "The close-button-label property must be set to a non-empty string. This label must describe the purpose of the close button for accessibility reasons."
20
20
  );
21
- if (typeof this.heading != "string" || this.heading.length === 0)
21
+ if (e.has("closeButtonLabel") && (typeof this.heading != "string" || this.heading.length === 0))
22
22
  throw new TypeError(
23
23
  "The heading property must be set to a non-empty string. This heading describes the purpose of the dialog."
24
24
  );