@folkehelseinstituttet/designsystem 0.30.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 (26) hide show
  1. package/custom-elements.json +621 -571
  2. package/fhi-body.js +10 -10
  3. package/fhi-body.js.map +1 -1
  4. package/fhi-button.js +12 -8
  5. package/fhi-button.js.map +1 -1
  6. package/fhi-date-input.js +62 -24
  7. package/fhi-date-input.js.map +1 -1
  8. package/fhi-display.js +13 -9
  9. package/fhi-display.js.map +1 -1
  10. package/fhi-headline.js +13 -9
  11. package/fhi-headline.js.map +1 -1
  12. package/fhi-label.js +10 -10
  13. package/fhi-label.js.map +1 -1
  14. package/fhi-modal-dialog.js +2 -2
  15. package/fhi-modal-dialog.js.map +1 -1
  16. package/fhi-tag.js +1 -1
  17. package/fhi-tag.js.map +1 -1
  18. package/fhi-text-input.js +88 -52
  19. package/fhi-text-input.js.map +1 -1
  20. package/fhi-title.js +13 -9
  21. package/fhi-title.js.map +1 -1
  22. package/fhi-tooltip.js +397 -395
  23. package/fhi-tooltip.js.map +1 -1
  24. package/index.js +354 -354
  25. package/package.json +12 -47
  26. package/web-types.json +280 -260
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
@@ -12,6 +12,11 @@ let l = class extends s {
12
12
  connectedCallback() {
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
+ update(r) {
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
+ "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
+ ), super.update(r);
19
+ }
15
20
  /**
16
21
  * Programmatically clicks the button.
17
22
  */
@@ -62,14 +67,12 @@ let l = class extends s {
62
67
  const c = a[0];
63
68
  if (c.nodeType === Node.ELEMENT_NODE && c.tagName.toLowerCase().startsWith("fhi-icon")) {
64
69
  const o = c;
65
- if (this.iconOnly) {
66
- o.setAttribute("size", this._getIconSize());
70
+ if (this.iconOnly || a.length === 1) {
71
+ this.iconOnly || (this.iconOnly = !0), o.setAttribute("size", this._getIconSize());
67
72
  return;
68
73
  }
69
74
  this.size != "small" && (o.style.marginRight = "var(--dimension-icon-margin-right)"), o.style.marginLeft = "var(--dimension-icon-margin-left-offset)", o.setAttribute("size", this._getIconSize());
70
75
  }
71
- if (a.length === 1)
72
- return;
73
76
  const t = a[a.length - 1];
74
77
  if (t.nodeType === Node.ELEMENT_NODE && t.tagName.toLowerCase().startsWith("fhi-icon")) {
75
78
  const o = t;
@@ -83,6 +86,7 @@ let l = class extends s {
83
86
  @keyup=${this._handleKeyup}
84
87
  @keydown=${this._handleKeydown}
85
88
  @click=${this._handleClick}
89
+ ?data-icon-only=${this.iconOnly}
86
90
  >
87
91
  <div class="slot-container">
88
92
  <slot @slotchange=${this._handleSlotChange}></slot>
@@ -770,19 +774,19 @@ l.styles = u`
770
774
  }
771
775
  }
772
776
 
773
- :host([icon-only]) button {
777
+ button[data-icon-only] {
774
778
  border-radius: var(--dimension-icon-only-border-radius);
775
779
  }
776
780
 
777
- :host([icon-only][size='small']) button {
781
+ :host([size='small']) button[data-icon-only] {
778
782
  padding: calc(0.375rem - var(--fhi-dimension-border-width));
779
783
  }
780
784
 
781
- :host([icon-only][size='medium']) button {
785
+ :host([size='medium']) button[data-icon-only] {
782
786
  padding: calc(var(--fhi-spacing-100) - var(--fhi-dimension-border-width));
783
787
  }
784
788
 
785
- :host([icon-only][size='large']) button {
789
+ :host([size='large']) button[data-icon-only] {
786
790
  padding: calc(var(--fhi-spacing-200) - var(--fhi-dimension-border-width));
787
791
  }
788
792
  `;
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 } 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 * @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 /**\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) {\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 if (validNodes.length === 1) {\n return;\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 >\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 :host([icon-only]) button {\n border-radius: var(--dimension-icon-only-border-radius);\n }\n\n :host([icon-only][size='small']) button {\n padding: calc(0.375rem - var(--fhi-dimension-border-width));\n }\n\n :host([icon-only][size='medium']) button {\n padding: calc(var(--fhi-spacing-100) - var(--fhi-dimension-border-width));\n }\n\n :host([icon-only][size='large']) button {\n padding: calc(var(--fhi-spacing-200) - var(--fhi-dimension-border-width));\n }\n `;\n}\n"],"names":["FhiButtonSelector","FhiButton","LitElement","event","_a","_b","target","validNodes","node","firstNode","firstIcon","lastNode","lastIcon","html","css","__decorateClass","property","customElement"],"mappings":"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;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAlN2BC,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAX9Bf,EAWgC,WAAA,SAAA,CAAA;AAcAc,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAzB9Bf,EAyBgC,WAAA,WAAA,CAAA;AAcAc,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAvC9Bf,EAuCgC,WAAA,QAAA,CAAA;AAUCc,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAjD/Bf,EAiDiC,WAAA,YAAA,CAAA;AAU5Cc,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,WAAW,aAAa;AAAA,GA1DxCf,EA2DX,WAAA,YAAA,CAAA;AAS4Bc,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GApEff,EAoEiB,WAAA,QAAA,CAAA;AApEjBA,IAANc,EAAA;AAAA,EADNE,EAAcjB,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-date-input.js CHANGED
@@ -1,31 +1,31 @@
1
- import { i as c, n as o, a as u, b as d, t as g } from "./property-DGdAXcEz.js";
1
+ import { i as c, n as o, a as u, b as l, t as g } from "./property-DGdAXcEz.js";
2
2
  import { e as y } from "./query-NJDNu0-P.js";
3
- import { o as h } from "./if-defined-BW6N1yuF.js";
3
+ import { o as d } from "./if-defined-BW6N1yuF.js";
4
4
  import "./fhi-icon-calendar.js";
5
5
  const v = () => /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
6
- var b = Object.defineProperty, f = Object.getOwnPropertyDescriptor, r = (t, i, l, n) => {
7
- for (var a = n > 1 ? void 0 : n ? f(i, l) : i, s = t.length - 1, p; s >= 0; s--)
8
- (p = t[s]) && (a = (n ? p(i, l, a) : p(a)) || a);
9
- return n && a && b(i, l, a), a;
6
+ var f = Object.defineProperty, m = Object.getOwnPropertyDescriptor, r = (t, a, p, n) => {
7
+ for (var i = n > 1 ? void 0 : n ? m(a, p) : a, s = t.length - 1, h; s >= 0; s--)
8
+ (h = t[s]) && (i = (n ? h(a, p, i) : h(i)) || i);
9
+ return n && i && f(a, p, i), i;
10
10
  };
11
- const m = "fhi-date-input";
11
+ const b = "fhi-date-input";
12
12
  let e = class extends u {
13
13
  constructor() {
14
- super(), this.label = void 0, this.message = void 0, this.min = void 0, this.max = void 0, this.status = void 0, this.readonly = !1, this.disabled = !1, this._name = void 0, this._value = "", this._internals = this.attachInternals();
14
+ super(), this.label = void 0, this.message = void 0, this.helpText = void 0, this.min = void 0, this.max = void 0, this.status = void 0, this.readonly = !1, this.disabled = !1, this._name = void 0, this._value = "", this._internals = this.attachInternals();
15
15
  }
16
16
  get name() {
17
17
  return this._name;
18
18
  }
19
19
  set name(t) {
20
- const i = this._name;
21
- this._name = t, this.requestUpdate("name", i), this._internals.setFormValue(this.value ?? null);
20
+ const a = this._name;
21
+ this._name = t, this.requestUpdate("name", a), this._internals.setFormValue(this.value ?? null);
22
22
  }
23
23
  get value() {
24
24
  return this._value;
25
25
  }
26
26
  set value(t) {
27
- const i = this._value;
28
- this._value = t, this.requestUpdate("value", i), this._internals.setFormValue(this._value ?? null);
27
+ const a = this._value;
28
+ this._value = t, this.requestUpdate("value", a), this._internals.setFormValue(this._value ?? null);
29
29
  }
30
30
  connectedCallback() {
31
31
  super.connectedCallback(), this._internals.setFormValue(this.value ?? null);
@@ -62,15 +62,16 @@ let e = class extends u {
62
62
  t && t.type == "keydown" && t.key !== "Enter" && t.code !== "Space" || this._input.showPicker();
63
63
  }
64
64
  render() {
65
- return d`
66
- ${this.label && d`<label for="input-element">${this.label}</label>`}
65
+ return l`
66
+ ${this.label && l`<label for="input-element">${this.label}</label>`}
67
+ ${this.helpText && l`<p class="help-text">${this.helpText}</p>`}
67
68
  <div class="input-container">
68
69
  <input
69
70
  type="date"
70
71
  id="input-element"
71
- name=${h(this.name)}
72
- min=${h(this.min)}
73
- max=${h(this.max)}
72
+ name=${d(this.name)}
73
+ min=${d(this.min)}
74
+ max=${d(this.max)}
74
75
  .value=${this.value ?? ""}
75
76
  ?readonly=${this.readonly}
76
77
  ?disabled=${this.disabled}
@@ -89,7 +90,7 @@ let e = class extends u {
89
90
  ><fhi-icon-calendar></fhi-icon-calendar
90
91
  ></span>
91
92
  </div>
92
- ${this.message && d`<p class="message">${this.message}</p>`}
93
+ ${this.message && l`<p class="message">${this.message}</p>`}
93
94
  `;
94
95
  }
95
96
  };
@@ -110,15 +111,14 @@ e.styles = c`
110
111
  --typography-label-font-weight: var(
111
112
  --fhi-typography-label-small-font-weight
112
113
  );
113
- --typography-label-font-size: var(--fhi-typography-label-small-size);
114
+ --typography-label-font-size: var(--fhi-typography-label-small-font-size);
114
115
  --typography-label-line-height: var(
115
116
  --fhi-typography-label-small-line-height
116
117
  );
117
118
  --typography-label-letter-spacing: var(
118
119
  --fhi-typography-label-small-letter-spacing
119
120
  );
120
-
121
- --dimension-label-padding-bottom: var(--fhi-spacing-050);
121
+ --dimension-label-margin-bottom: var(--fhi-spacing-050);
122
122
 
123
123
  /* input */
124
124
  --color-input-text: var(--fhi-color-neutral-text-default);
@@ -187,6 +187,24 @@ e.styles = c`
187
187
  );
188
188
 
189
189
  --dimension-message-margin-top: var(--fhi-spacing-050);
190
+
191
+ /* help-text */
192
+ --color-help-text-text: var(--fhi-color-neutral-text-subtle);
193
+ --color-help-text-text-error: var(--fhi-color-danger-text-default);
194
+
195
+ --typography-help-text-font-weight: var(
196
+ --fhi-typography-body-small-font-weight
197
+ );
198
+ --typography-help-text-font-size: var(
199
+ --fhi-typography-body-small-font-size
200
+ );
201
+ --typography-help-text-line-height: var(
202
+ --fhi-typography-body-small-line-height
203
+ );
204
+ --typography-help-text-letter-spacing: var(
205
+ --fhi-typography-body-small-letter-spacing
206
+ );
207
+ --dimension-help-text-margin-bottom: var(--fhi-spacing-050);
190
208
  }
191
209
 
192
210
  :host {
@@ -202,7 +220,10 @@ e.styles = c`
202
220
  line-height: var(--typography-label-line-height);
203
221
  letter-spacing: var(--typography-label-letter-spacing);
204
222
  color: var(--color-label-text);
205
- padding-bottom: var(--dimension-label-padding-bottom);
223
+ margin: 0 0 var(--dimension-label-margin-bottom) 0;
224
+ }
225
+ label:has(+ p) {
226
+ margin: 0 0 0 0;
206
227
  }
207
228
 
208
229
  input[type='date'] {
@@ -218,6 +239,7 @@ e.styles = c`
218
239
  border-radius: var(--dimension-input-border-radius);
219
240
  padding: 0 var(--dimension-input-padding-right) 0
220
241
  var(--dimension-input-padding-left);
242
+ margin-top: var(--dimension-input-margin-top);
221
243
  color: var(--color-input-text);
222
244
  background-color: var(--color-input-background);
223
245
  transition: var(--motion-input-transition);
@@ -243,6 +265,16 @@ e.styles = c`
243
265
  line-height: var(--typography-message-line-height);
244
266
  letter-spacing: var(--typography-message-letter-spacing);
245
267
  }
268
+
269
+ .help-text {
270
+ margin: var(--dimension-help-text-margin-top) 0 0 0;
271
+ color: var(--color-help-text-text);
272
+ font-weight: var(--typography-help-text-font-weight);
273
+ font-size: var(--typography-help-text-font-size);
274
+ line-height: var(--typography-help-text-line-height);
275
+ letter-spacing: var(--typography-help-text-letter-spacing);
276
+ margin: 0 0 var(--dimension-help-text-margin-bottom) 0;
277
+ }
246
278
  [type='date']::-webkit-inner-spin-button {
247
279
  opacity: 0;
248
280
  }
@@ -325,6 +357,9 @@ e.styles = c`
325
357
  .message {
326
358
  color: var(--color-message-text-error);
327
359
  }
360
+ .help-text {
361
+ color: var(--color-help-text-text-error);
362
+ }
328
363
  .date-icon {
329
364
  background-color: var(--color-input-background-error);
330
365
  color: var(--color-input-text-error);
@@ -346,6 +381,9 @@ r([
346
381
  r([
347
382
  o({ type: String })
348
383
  ], e.prototype, "message", 2);
384
+ r([
385
+ o({ type: String, attribute: "help-text" })
386
+ ], e.prototype, "helpText", 2);
349
387
  r([
350
388
  o({ type: String })
351
389
  ], e.prototype, "min", 2);
@@ -371,10 +409,10 @@ r([
371
409
  o({ type: String })
372
410
  ], e.prototype, "value", 1);
373
411
  e = r([
374
- g(m)
412
+ g(b)
375
413
  ], e);
376
414
  export {
377
415
  e as FhiDateInput,
378
- m as FhiDateInputSelector
416
+ b as FhiDateInputSelector
379
417
  };
380
418
  //# sourceMappingURL=fhi-date-input.js.map