@folkehelseinstituttet/designsystem 0.40.5 → 0.40.7

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 (20) hide show
  1. package/custom-elements.json +1 -1
  2. package/fhi-body.js +16 -8
  3. package/fhi-body.js.map +1 -1
  4. package/fhi-body.manifest.json +1 -1
  5. package/fhi-display.js +20 -8
  6. package/fhi-display.js.map +1 -1
  7. package/fhi-display.manifest.json +1 -1
  8. package/fhi-headline.js +20 -8
  9. package/fhi-headline.js.map +1 -1
  10. package/fhi-headline.manifest.json +1 -1
  11. package/fhi-label.js +16 -8
  12. package/fhi-label.js.map +1 -1
  13. package/fhi-label.manifest.json +1 -1
  14. package/fhi-radio.js +19 -21
  15. package/fhi-radio.js.map +1 -1
  16. package/fhi-title.js +20 -8
  17. package/fhi-title.js.map +1 -1
  18. package/fhi-title.manifest.json +1 -1
  19. package/package.json +1 -1
  20. package/web-types.json +6 -6
package/fhi-body.js CHANGED
@@ -1,15 +1,16 @@
1
1
  import { a as e, d as t, o as n, s as r, t as i, u as a } from "./decorate-DFXIek-k.js";
2
+ import { t as o } from "./if-defined-Dl-W5B5_.js";
2
3
  //#region src/components/typography/fhi-body/fhi-body.component.ts
3
- var o = "fhi-body", s = class extends r {
4
+ var s = "fhi-body", c = class extends r {
4
5
  constructor(...e) {
5
- super(...e), this.size = "medium", this.color = "currentcolor";
6
- }
7
- updated(e) {
8
- super.updated(e), e.has("color") && (this.style.color = typeof this.color == "string" ? this.color : "currentcolor");
6
+ super(...e), this.size = "medium";
9
7
  }
10
8
  render() {
11
9
  return a`
12
- <span class="body">
10
+ <span
11
+ class="body"
12
+ style=${o(this.color ? `color: ${this.color}` : void 0)}
13
+ >
13
14
  <slot></slot>
14
15
  </span>
15
16
  `;
@@ -17,8 +18,15 @@ var o = "fhi-body", s = class extends r {
17
18
  static {
18
19
  this.styles = t`
19
20
  :host {
21
+ --fhi-body-color: unset;
22
+ }
23
+
24
+ :host {
25
+ --fhi-body-color: currentcolor;
26
+
20
27
  display: block;
21
28
  contain: layout;
29
+ color: var(--fhi-body-color);
22
30
  .body {
23
31
  font-family: var(--fhi-font-family-default);
24
32
  -webkit-font-smoothing: antialiased;
@@ -58,8 +66,8 @@ var o = "fhi-body", s = class extends r {
58
66
  i([e({
59
67
  type: String,
60
68
  reflect: !0
61
- })], s.prototype, "size", void 0), i([e({ type: String })], s.prototype, "color", void 0), s = i([n(o)], s);
69
+ })], c.prototype, "size", void 0), i([e({ type: String })], c.prototype, "color", void 0), c = i([n(s)], c);
62
70
  //#endregion
63
- export { s as FhiBody, o as FhiBodySelector };
71
+ export { c as FhiBody, s as FhiBodySelector };
64
72
 
65
73
  //# sourceMappingURL=fhi-body.js.map
package/fhi-body.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"fhi-body.js","names":[],"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 = 'currentcolor';\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' ? this.color : 'currentcolor';\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 display: block;\n contain: layout;\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(--fhi-typography-body-large-font-size);\n font-weight: var(--fhi-typography-body-large-font-weight);\n line-height: var(--fhi-typography-body-large-line-height);\n letter-spacing: var(--fhi-typography-body-large-letter-spacing);\n }\n }\n\n :host([size='medium']) {\n .body {\n font-size: var(--fhi-typography-body-medium-font-size);\n font-weight: var(--fhi-typography-body-medium-font-weight);\n line-height: var(--fhi-typography-body-medium-line-height);\n letter-spacing: var(--fhi-typography-body-medium-letter-spacing);\n }\n }\n\n :host([size='small']) {\n .body {\n font-size: var(--fhi-typography-body-small-font-size);\n font-weight: var(--fhi-typography-body-small-font-weight);\n line-height: var(--fhi-typography-body-small-line-height);\n letter-spacing: var(--fhi-typography-body-small-letter-spacing);\n }\n }\n `;\n}\n"],"mappings":";;AAGA,IAAa,IAAkB,YAgBxB,IAAA,cAAsB,EAAW;;2BASxB,uBAiB+B;;CAE7C,QAAQ,GAAyC;EAG/C,AAFA,MAAM,QAAQ,CAAiB,GAE3B,EAAkB,IAAI,OAAO,MAC/B,KAAK,MAAM,QACT,OAAO,KAAK,SAAU,WAAW,KAAK,QAAQ;CAEpD;CAEA,SAAS;EACP,OAAO,CAAI;;;;;CAKb;;gBAEgB,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsCrB;GA7EG,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,MAoBxC,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,UA3B3B,EAAc,CAAe,CAAA,GAAA,CAAA"}
1
+ {"version":3,"file":"fhi-body.js","names":[],"sources":["../../src/components/typography/fhi-body/fhi-body.component.ts"],"sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nexport const 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 render() {\n return html`\n <span\n class=\"body\"\n style=${ifDefined(this.color ? `color: ${this.color}` : undefined)}\n >\n <slot></slot>\n </span>\n `;\n }\n\n static styles = css`\n :host {\n --fhi-body-color: unset;\n }\n\n :host {\n --fhi-body-color: currentcolor;\n\n display: block;\n contain: layout;\n color: var(--fhi-body-color);\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(--fhi-typography-body-large-font-size);\n font-weight: var(--fhi-typography-body-large-font-weight);\n line-height: var(--fhi-typography-body-large-line-height);\n letter-spacing: var(--fhi-typography-body-large-letter-spacing);\n }\n }\n\n :host([size='medium']) {\n .body {\n font-size: var(--fhi-typography-body-medium-font-size);\n font-weight: var(--fhi-typography-body-medium-font-weight);\n line-height: var(--fhi-typography-body-medium-line-height);\n letter-spacing: var(--fhi-typography-body-medium-letter-spacing);\n }\n }\n\n :host([size='small']) {\n .body {\n font-size: var(--fhi-typography-body-small-font-size);\n font-weight: var(--fhi-typography-body-small-font-weight);\n line-height: var(--fhi-typography-body-small-line-height);\n letter-spacing: var(--fhi-typography-body-small-letter-spacing);\n }\n }\n `;\n}\n"],"mappings":";;;AAIA,IAAa,IAAkB,YAgBxB,IAAA,cAAsB,EAAW;;2BASxB;;CAmBd,SAAS;EACP,OAAO,CAAI;;;gBAGC,EAAU,KAAK,QAAQ,UAAU,KAAK,UAAU,KAAA,CAAS,EAAE;;;;;CAKzE;;gBAEgB,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6CrB;GA9EG,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,MAoBxC,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,UA3B3B,EAAc,CAAe,CAAA,GAAA,CAAA"}
package/fhi-body.manifest.json CHANGED
@@ -1 +1 @@
1
- {"kind":"javascript-module","path":"src/components/typography/fhi-body/fhi-body.component.ts","declarations":[{"kind":"class","description":"## FHI Body\n\nhttps://designsystem.fhi.no/?path=/story/komponenter-typography-body--preview\n\nThe `<fhi-body>` component is used to display body text in accordance with the FHI Design System guidelines.\nUse this component instead of the standard HTML paragraph element, `<p>`, to ensure consistent styling across your application.","name":"FhiBody","slots":[{"description":"The content of the fhi-body component. This should be pure text.","name":""}],"members":[{"kind":"field","name":"color","type":{"text":"string"},"default":"'currentcolor'","description":"Sets color of the given text. It supports any valid CSS color value (e.g. hex, rgb, rgba, hsl, hsla, color names).\n\nIt is recommended to use Design Tokens for colors defined in the FHI Design System.\nSee: https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs\n\nExample:\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```","attribute":"color"},{"kind":"field","name":"size","type":{"text":"'large' | 'medium' | 'small'"},"default":"'medium'","description":"Sets the font size of the given text.","reflects":true,"attribute":"size"}],"attributes":[{"name":"color","type":{"text":"string"},"default":"'currentcolor'","description":"Sets color of the given text. It supports any valid CSS color value (e.g. hex, rgb, rgba, hsl, hsla, color names).\n\nIt is recommended to use Design Tokens for colors defined in the FHI Design System.\nSee: https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs\n\nExample:\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```","fieldName":"color"},{"name":"size","type":{"text":"'large' | 'medium' | 'small'"},"default":"'medium'","description":"Sets the font size of the given text.","fieldName":"size"}],"superclass":{"name":"LitElement","package":"lit"},"tagName":"fhi-body","customElement":true},{"kind":"variable","name":"FhiBodySelector","type":{"text":"string"},"default":"'fhi-body'"}]}
1
+ {"kind":"javascript-module","path":"src/components/typography/fhi-body/fhi-body.component.ts","declarations":[{"kind":"class","description":"## FHI Body\n\nhttps://designsystem.fhi.no/?path=/story/komponenter-typography-body--preview\n\nThe `<fhi-body>` component is used to display body text in accordance with the FHI Design System guidelines.\nUse this component instead of the standard HTML paragraph element, `<p>`, to ensure consistent styling across your application.","name":"FhiBody","slots":[{"description":"The content of the fhi-body component. This should be pure text.","name":""}],"members":[{"kind":"field","name":"color","type":{"text":"string"},"description":"Sets color of the given text. It supports any valid CSS color value (e.g. hex, rgb, rgba, hsl, hsla, color names).\n\nIt is recommended to use Design Tokens for colors defined in the FHI Design System.\nSee: https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs\n\nExample:\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```","attribute":"color"},{"kind":"field","name":"size","type":{"text":"'large' | 'medium' | 'small'"},"default":"'medium'","description":"Sets the font size of the given text.","reflects":true,"attribute":"size"}],"attributes":[{"name":"color","type":{"text":"string"},"description":"Sets color of the given text. It supports any valid CSS color value (e.g. hex, rgb, rgba, hsl, hsla, color names).\n\nIt is recommended to use Design Tokens for colors defined in the FHI Design System.\nSee: https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs\n\nExample:\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```","fieldName":"color"},{"name":"size","type":{"text":"'large' | 'medium' | 'small'"},"default":"'medium'","description":"Sets the font size of the given text.","fieldName":"size"}],"superclass":{"name":"LitElement","package":"lit"},"tagName":"fhi-body","customElement":true},{"kind":"variable","name":"FhiBodySelector","type":{"text":"string"},"default":"'fhi-body'"}]}
package/fhi-display.js CHANGED
@@ -1,29 +1,41 @@
1
1
  import { a as e, d as t, o as n, s as r, t as i, u as a } from "./decorate-DFXIek-k.js";
2
- import { t as o } from "./unsafe-html-CBTN3162.js";
2
+ import { t as o } from "./if-defined-Dl-W5B5_.js";
3
+ import { t as s } from "./unsafe-html-CBTN3162.js";
3
4
  //#region src/components/typography/fhi-display/fhi-display.component.ts
4
- var s = "fhi-display", c = class extends r {
5
+ var c = "fhi-display", l = class extends r {
5
6
  constructor(...e) {
6
- super(...e), this.size = "medium", this.color = "currentcolor";
7
+ super(...e), this.size = "medium";
7
8
  }
8
9
  updated(e) {
9
10
  if (super.updated(e), e.has("level")) {
10
11
  let e = Number(this.level);
11
12
  (isNaN(e) || e < 1 || e > 6) && console.error(/* @__PURE__ */ TypeError(`The level property must be set to a number between 1 and 6. Current value: ${this.level}`));
12
13
  }
13
- e.has("color") && (this.style.color = typeof this.color == "string" ? this.color : "currentcolor");
14
14
  }
15
15
  render() {
16
- return a`${o(`
16
+ let e = `
17
17
  <h${this.level} class="display">
18
18
  <slot></slot>
19
19
  </h${this.level}>
20
- `)}`;
20
+ `;
21
+ return a`
22
+ <div style=${o(this.color ? `color: ${this.color}` : void 0)}>
23
+ ${s(e)}
24
+ </div>
25
+ `;
21
26
  }
22
27
  static {
23
28
  this.styles = t`
24
29
  :host {
30
+ --fhi-display-color: unset;
31
+ }
32
+
33
+ :host {
34
+ --fhi-display-color: currentcolor;
35
+
25
36
  display: block;
26
37
  contain: layout;
38
+ color: var(--fhi-display-color);
27
39
  .display {
28
40
  font-family: var(--fhi-font-family-default);
29
41
  -webkit-font-smoothing: antialiased;
@@ -63,8 +75,8 @@ var s = "fhi-display", c = class extends r {
63
75
  i([e({
64
76
  type: String,
65
77
  reflect: !0
66
- })], c.prototype, "size", void 0), i([e({ type: String })], c.prototype, "color", void 0), i([e({ type: Number })], c.prototype, "level", void 0), c = i([n(s)], c);
78
+ })], l.prototype, "size", void 0), i([e({ type: String })], l.prototype, "color", void 0), i([e({ type: Number })], l.prototype, "level", void 0), l = i([n(c)], l);
67
79
  //#endregion
68
- export { c as FhiDisplay, s as FhiDisplaySelector };
80
+ export { l as FhiDisplay, c as FhiDisplaySelector };
69
81
 
70
82
  //# sourceMappingURL=fhi-display.js.map
package/fhi-display.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"fhi-display.js","names":[],"sources":["../../src/components/typography/fhi-display/fhi-display.component.ts"],"sourcesContent":["import { html, css, LitElement, PropertyValues } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\n\nexport const FhiDisplaySelector = 'fhi-display';\n\nexport type DisplayLevel = 1 | 2 | 3 | 4 | 5 | 6;\n\n/**\n * ## FHI Display\n *\n * {@link https://designsystem.fhi.no/?path=/story/komponenter-typography-display--preview}\n *\n * The `<fhi-display>` component is used to display large, eye-catching headline text in accordance with the FHI Design System guidelines.\n *\n * For smaller, less prominent title text, use the `<fhi-title>` component instead.\n *\n * For standard headline text, use the `<fhi-headline>` component instead.\n *\n * Use this component instead of the standard HTML heading elements, `<h1>` - `<h6>`, to ensure consistent styling across your application.\n *\n * @tag fhi-display\n * @element fhi-display\n *\n * @slot - The content of the fhi-display component. This should be pure text.\n */\n@customElement(FhiDisplaySelector)\nexport class FhiDisplay extends LitElement {\n /**\n * Sets the font size of the given text.\n * @reflect\n * @type {'large' | 'medium' | 'small'}\n */\n @property({ type: String, reflect: true }) size:\n | 'large'\n | 'medium'\n | 'small' = 'medium';\n\n /**\n * Sets color of the given text. It supports any valid CSS color value (e.g. hex, rgb, rgba, hsl, hsla, color names).\n *\n * It is recommended to use Design Tokens for colors defined in the FHI Design System.\n * See: {@link https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs}\n *\n * Example:\n * ```html\n * <fhi-display color=\"var(--fhi-color-primary-text-default)\">\n * This text will be in the primary text color.\n * </fhi-display>\n * ```\n *\n * @type {string}\n */\n @property({ type: String }) color?: string = 'currentcolor';\n\n /**\n * Sets the heading level for the text, corresponding to HTML heading elements `<h1>` to `<h6>`.\n * @type {1 | 2 | 3 | 4 | 5 | 6}\n */\n @property({ type: Number }) level!: DisplayLevel;\n\n updated(changedProperties: PropertyValues<this>) {\n super.updated(changedProperties);\n\n if (changedProperties.has('level')) {\n const levelAsNumber = Number(this.level);\n if (isNaN(levelAsNumber) || levelAsNumber < 1 || levelAsNumber > 6) {\n console.error(\n new TypeError(\n `The level property must be set to a number between 1 and 6. Current value: ${this.level}`,\n ),\n );\n }\n }\n\n if (changedProperties.has('color')) {\n this.style.color =\n typeof this.color === 'string' ? this.color : 'currentcolor';\n }\n }\n\n render() {\n const template = `\n <h${this.level} class=\"display\">\n <slot></slot>\n </h${this.level}>\n `;\n return html`${unsafeHTML(template)}`;\n }\n\n static styles = css`\n :host {\n display: block;\n contain: layout;\n .display {\n font-family: var(--fhi-font-family-default);\n -webkit-font-smoothing: antialiased;\n margin: 0;\n }\n }\n\n :host([size='large']) {\n .display {\n font-size: var(--fhi-typography-display-large-font-size);\n font-weight: var(--fhi-typography-display-large-font-weight);\n line-height: var(--fhi-typography-display-large-line-height);\n letter-spacing: var(--fhi-typography-display-large-letter-spacing);\n }\n }\n\n :host([size='medium']) {\n .display {\n font-size: var(--fhi-typography-display-medium-font-size);\n font-weight: var(--fhi-typography-display-medium-font-weight);\n line-height: var(--fhi-typography-display-medium-line-height);\n letter-spacing: var(--fhi-typography-display-medium-letter-spacing);\n }\n }\n\n :host([size='small']) {\n .display {\n font-size: var(--fhi-typography-display-small-font-size);\n font-weight: var(--fhi-typography-display-small-font-weight);\n line-height: var(--fhi-typography-display-small-line-height);\n letter-spacing: var(--fhi-typography-display-small-letter-spacing);\n }\n }\n `;\n}\n"],"mappings":";;;AAIA,IAAa,IAAqB,eAuB3B,IAAA,cAAyB,EAAW;;2BAS3B,uBAiB+B;;CAQ7C,QAAQ,GAAyC;EAG/C,IAFA,MAAM,QAAQ,CAAiB,GAE3B,EAAkB,IAAI,OAAO,GAAG;GAClC,IAAM,IAAgB,OAAO,KAAK,KAAK;GACvC,CAAI,MAAM,CAAa,KAAK,IAAgB,KAAK,IAAgB,MAC/D,QAAQ,MACN,gBAAI,UACF,8EAA8E,KAAK,OACrF,CACF;EAEJ;EAEA,AAAI,EAAkB,IAAI,OAAO,MAC/B,KAAK,MAAM,QACT,OAAO,KAAK,SAAU,WAAW,KAAK,QAAQ;CAEpD;CAEA,SAAS;EAMP,OAAO,CAAI,GAAG,EAAW;UAJnB,KAAK,MAAM;;WAEV,KAAK,MAAM;KAEe;CACnC;;gBAEgB,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsCrB;GA/FG,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,MAoBxC,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,MAMzB,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,UAjC3B,EAAc,CAAkB,CAAA,GAAA,CAAA"}
1
+ {"version":3,"file":"fhi-display.js","names":[],"sources":["../../src/components/typography/fhi-display/fhi-display.component.ts"],"sourcesContent":["import { html, css, LitElement, PropertyValues } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\n\nexport const FhiDisplaySelector = 'fhi-display';\n\nexport type DisplayLevel = 1 | 2 | 3 | 4 | 5 | 6;\n\n/**\n * ## FHI Display\n *\n * {@link https://designsystem.fhi.no/?path=/story/komponenter-typography-display--preview}\n *\n * The `<fhi-display>` component is used to display large, eye-catching headline text in accordance with the FHI Design System guidelines.\n *\n * For smaller, less prominent title text, use the `<fhi-title>` component instead.\n *\n * For standard headline text, use the `<fhi-headline>` component instead.\n *\n * Use this component instead of the standard HTML heading elements, `<h1>` - `<h6>`, to ensure consistent styling across your application.\n *\n * @tag fhi-display\n * @element fhi-display\n *\n * @slot - The content of the fhi-display component. This should be pure text.\n */\n@customElement(FhiDisplaySelector)\nexport class FhiDisplay extends LitElement {\n /**\n * Sets the font size of the given text.\n * @reflect\n * @type {'large' | 'medium' | 'small'}\n */\n @property({ type: String, reflect: true }) size:\n | 'large'\n | 'medium'\n | 'small' = 'medium';\n\n /**\n * Sets color of the given text. It supports any valid CSS color value (e.g. hex, rgb, rgba, hsl, hsla, color names).\n *\n * It is recommended to use Design Tokens for colors defined in the FHI Design System.\n * See: {@link https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs}\n *\n * Example:\n * ```html\n * <fhi-display color=\"var(--fhi-color-primary-text-default)\">\n * This text will be in the primary text color.\n * </fhi-display>\n * ```\n *\n * @type {string}\n */\n @property({ type: String }) color?: string;\n\n /**\n * Sets the heading level for the text, corresponding to HTML heading elements `<h1>` to `<h6>`.\n * @type {1 | 2 | 3 | 4 | 5 | 6}\n */\n @property({ type: Number }) level!: DisplayLevel;\n\n updated(changedProperties: PropertyValues<this>) {\n super.updated(changedProperties);\n\n if (changedProperties.has('level')) {\n const levelAsNumber = Number(this.level);\n if (isNaN(levelAsNumber) || levelAsNumber < 1 || levelAsNumber > 6) {\n console.error(\n new TypeError(\n `The level property must be set to a number between 1 and 6. Current value: ${this.level}`,\n ),\n );\n }\n }\n }\n\n render() {\n const template = `\n <h${this.level} class=\"display\">\n <slot></slot>\n </h${this.level}>\n `;\n return html`\n <div style=${ifDefined(this.color ? `color: ${this.color}` : undefined)}>\n ${unsafeHTML(template)}\n </div>\n `;\n }\n\n static styles = css`\n :host {\n --fhi-display-color: unset;\n }\n\n :host {\n --fhi-display-color: currentcolor;\n\n display: block;\n contain: layout;\n color: var(--fhi-display-color);\n .display {\n font-family: var(--fhi-font-family-default);\n -webkit-font-smoothing: antialiased;\n margin: 0;\n }\n }\n\n :host([size='large']) {\n .display {\n font-size: var(--fhi-typography-display-large-font-size);\n font-weight: var(--fhi-typography-display-large-font-weight);\n line-height: var(--fhi-typography-display-large-line-height);\n letter-spacing: var(--fhi-typography-display-large-letter-spacing);\n }\n }\n\n :host([size='medium']) {\n .display {\n font-size: var(--fhi-typography-display-medium-font-size);\n font-weight: var(--fhi-typography-display-medium-font-weight);\n line-height: var(--fhi-typography-display-medium-line-height);\n letter-spacing: var(--fhi-typography-display-medium-letter-spacing);\n }\n }\n\n :host([size='small']) {\n .display {\n font-size: var(--fhi-typography-display-small-font-size);\n font-weight: var(--fhi-typography-display-small-font-weight);\n line-height: var(--fhi-typography-display-small-line-height);\n letter-spacing: var(--fhi-typography-display-small-letter-spacing);\n }\n }\n `;\n}\n"],"mappings":";;;;AAKA,IAAa,IAAqB,eAuB3B,IAAA,cAAyB,EAAW;;2BAS3B;;CAyBd,QAAQ,GAAyC;EAG/C,IAFA,MAAM,QAAQ,CAAiB,GAE3B,EAAkB,IAAI,OAAO,GAAG;GAClC,IAAM,IAAgB,OAAO,KAAK,KAAK;GACvC,CAAI,MAAM,CAAa,KAAK,IAAgB,KAAK,IAAgB,MAC/D,QAAQ,MACN,gBAAI,UACF,8EAA8E,KAAK,OACrF,CACF;EAEJ;CACF;CAEA,SAAS;EACP,IAAM,IAAW;UACX,KAAK,MAAM;;WAEV,KAAK,MAAM;;EAElB,OAAO,CAAI;mBACI,EAAU,KAAK,QAAQ,UAAU,KAAK,UAAU,KAAA,CAAS,EAAE;UACpE,EAAW,CAAQ,EAAE;;;CAG7B;;gBAEgB,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6CrB;GArGG,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,MAoBxC,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,MAMzB,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,UAjC3B,EAAc,CAAkB,CAAA,GAAA,CAAA"}
package/fhi-display.manifest.json CHANGED
@@ -1 +1 @@
1
- {"kind":"javascript-module","path":"src/components/typography/fhi-display/fhi-display.component.ts","declarations":[{"kind":"class","description":"## FHI Display\n\nhttps://designsystem.fhi.no/?path=/story/komponenter-typography-display--preview\n\nThe `<fhi-display>` component is used to display large, eye-catching headline text in accordance with the FHI Design System guidelines.\n\nFor smaller, less prominent title text, use the `<fhi-title>` component instead.\n\nFor standard headline text, use the `<fhi-headline>` component instead.\n\nUse this component instead of the standard HTML heading elements, `<h1>` - `<h6>`, to ensure consistent styling across your application.","name":"FhiDisplay","slots":[{"description":"The content of the fhi-display component. This should be pure text.","name":""}],"members":[{"kind":"field","name":"color","type":{"text":"string"},"default":"'currentcolor'","description":"Sets color of the given text. It supports any valid CSS color value (e.g. hex, rgb, rgba, hsl, hsla, color names).\n\nIt is recommended to use Design Tokens for colors defined in the FHI Design System.\nSee: https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs\n\nExample:\n```html\n <fhi-display color=\"var(--fhi-color-primary-text-default)\">\n This text will be in the primary text color.\n </fhi-display>\n```","attribute":"color"},{"kind":"field","name":"level","type":{"text":"1 | 2 | 3 | 4 | 5 | 6"},"description":"Sets the heading level for the text, corresponding to HTML heading elements `<h1>` to `<h6>`.","attribute":"level"},{"kind":"field","name":"size","type":{"text":"'large' | 'medium' | 'small'"},"default":"'medium'","description":"Sets the font size of the given text.","reflects":true,"attribute":"size"}],"attributes":[{"name":"color","type":{"text":"string"},"default":"'currentcolor'","description":"Sets color of the given text. It supports any valid CSS color value (e.g. hex, rgb, rgba, hsl, hsla, color names).\n\nIt is recommended to use Design Tokens for colors defined in the FHI Design System.\nSee: https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs\n\nExample:\n```html\n <fhi-display color=\"var(--fhi-color-primary-text-default)\">\n This text will be in the primary text color.\n </fhi-display>\n```","fieldName":"color"},{"name":"level","type":{"text":"1 | 2 | 3 | 4 | 5 | 6"},"description":"Sets the heading level for the text, corresponding to HTML heading elements `<h1>` to `<h6>`.","fieldName":"level"},{"name":"size","type":{"text":"'large' | 'medium' | 'small'"},"default":"'medium'","description":"Sets the font size of the given text.","fieldName":"size"}],"superclass":{"name":"LitElement","package":"lit"},"tagName":"fhi-display","customElement":true},{"kind":"variable","name":"FhiDisplaySelector","type":{"text":"string"},"default":"'fhi-display'"}]}
1
+ {"kind":"javascript-module","path":"src/components/typography/fhi-display/fhi-display.component.ts","declarations":[{"kind":"class","description":"## FHI Display\n\nhttps://designsystem.fhi.no/?path=/story/komponenter-typography-display--preview\n\nThe `<fhi-display>` component is used to display large, eye-catching headline text in accordance with the FHI Design System guidelines.\n\nFor smaller, less prominent title text, use the `<fhi-title>` component instead.\n\nFor standard headline text, use the `<fhi-headline>` component instead.\n\nUse this component instead of the standard HTML heading elements, `<h1>` - `<h6>`, to ensure consistent styling across your application.","name":"FhiDisplay","slots":[{"description":"The content of the fhi-display component. This should be pure text.","name":""}],"members":[{"kind":"field","name":"color","type":{"text":"string"},"description":"Sets color of the given text. It supports any valid CSS color value (e.g. hex, rgb, rgba, hsl, hsla, color names).\n\nIt is recommended to use Design Tokens for colors defined in the FHI Design System.\nSee: https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs\n\nExample:\n```html\n <fhi-display color=\"var(--fhi-color-primary-text-default)\">\n This text will be in the primary text color.\n </fhi-display>\n```","attribute":"color"},{"kind":"field","name":"level","type":{"text":"1 | 2 | 3 | 4 | 5 | 6"},"description":"Sets the heading level for the text, corresponding to HTML heading elements `<h1>` to `<h6>`.","attribute":"level"},{"kind":"field","name":"size","type":{"text":"'large' | 'medium' | 'small'"},"default":"'medium'","description":"Sets the font size of the given text.","reflects":true,"attribute":"size"}],"attributes":[{"name":"color","type":{"text":"string"},"description":"Sets color of the given text. It supports any valid CSS color value (e.g. hex, rgb, rgba, hsl, hsla, color names).\n\nIt is recommended to use Design Tokens for colors defined in the FHI Design System.\nSee: https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs\n\nExample:\n```html\n <fhi-display color=\"var(--fhi-color-primary-text-default)\">\n This text will be in the primary text color.\n </fhi-display>\n```","fieldName":"color"},{"name":"level","type":{"text":"1 | 2 | 3 | 4 | 5 | 6"},"description":"Sets the heading level for the text, corresponding to HTML heading elements `<h1>` to `<h6>`.","fieldName":"level"},{"name":"size","type":{"text":"'large' | 'medium' | 'small'"},"default":"'medium'","description":"Sets the font size of the given text.","fieldName":"size"}],"superclass":{"name":"LitElement","package":"lit"},"tagName":"fhi-display","customElement":true},{"kind":"variable","name":"FhiDisplaySelector","type":{"text":"string"},"default":"'fhi-display'"}]}
package/fhi-headline.js CHANGED
@@ -1,29 +1,41 @@
1
1
  import { a as e, d as t, o as n, s as r, t as i, u as a } from "./decorate-DFXIek-k.js";
2
- import { t as o } from "./unsafe-html-CBTN3162.js";
2
+ import { t as o } from "./if-defined-Dl-W5B5_.js";
3
+ import { t as s } from "./unsafe-html-CBTN3162.js";
3
4
  //#region src/components/typography/fhi-headline/fhi-headline.component.ts
4
- var s = "fhi-headline", c = class extends r {
5
+ var c = "fhi-headline", l = class extends r {
5
6
  constructor(...e) {
6
- super(...e), this.size = "medium", this.color = "currentcolor";
7
+ super(...e), this.size = "medium";
7
8
  }
8
9
  updated(e) {
9
10
  if (super.updated(e), e.has("level")) {
10
11
  let e = Number(this.level);
11
12
  (isNaN(e) || e < 1 || e > 6) && console.error(/* @__PURE__ */ TypeError(`The level property must be set to a number between 1 and 6. Current value: ${this.level}`));
12
13
  }
13
- e.has("color") && (this.style.color = typeof this.color == "string" ? this.color : "currentcolor");
14
14
  }
15
15
  render() {
16
- return a`${o(`
16
+ let e = `
17
17
  <h${this.level} class="headline">
18
18
  <slot></slot>
19
19
  </h${this.level}>
20
- `)}`;
20
+ `;
21
+ return a`
22
+ <div style=${o(this.color ? `color: ${this.color}` : void 0)}>
23
+ ${s(e)}
24
+ </div>
25
+ `;
21
26
  }
22
27
  static {
23
28
  this.styles = t`
24
29
  :host {
30
+ --fhi-headline-color: unset;
31
+ }
32
+
33
+ :host {
34
+ --fhi-headline-color: currentcolor;
35
+
25
36
  display: block;
26
37
  contain: layout;
38
+ color: var(--fhi-headline-color);
27
39
  .headline {
28
40
  font-family: var(--fhi-font-family-default);
29
41
  -webkit-font-smoothing: antialiased;
@@ -63,8 +75,8 @@ var s = "fhi-headline", c = class extends r {
63
75
  i([e({
64
76
  type: String,
65
77
  reflect: !0
66
- })], c.prototype, "size", void 0), i([e({ type: String })], c.prototype, "color", void 0), i([e({ type: Number })], c.prototype, "level", void 0), c = i([n(s)], c);
78
+ })], l.prototype, "size", void 0), i([e({ type: String })], l.prototype, "color", void 0), i([e({ type: Number })], l.prototype, "level", void 0), l = i([n(c)], l);
67
79
  //#endregion
68
- export { c as FhiHeadline, s as FhiHeadlineSelector };
80
+ export { l as FhiHeadline, c as FhiHeadlineSelector };
69
81
 
70
82
  //# sourceMappingURL=fhi-headline.js.map
package/fhi-headline.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"fhi-headline.js","names":[],"sources":["../../src/components/typography/fhi-headline/fhi-headline.component.ts"],"sourcesContent":["import { html, css, LitElement, PropertyValues } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\n\nexport const FhiHeadlineSelector = 'fhi-headline';\n\nexport type HeadlineLevel = 1 | 2 | 3 | 4 | 5 | 6;\n\n/**\n * ## FHI Headline\n *\n * {@link https://designsystem.fhi.no/?path=/story/komponenter-typography-headline--preview}\n *\n * The `<fhi-headline>` component is used to display standard headline text in accordance with the FHI Design System guidelines.\n *\n * For smaller, less prominent title text, use the `<fhi-title>` component instead.\n *\n * For larger, more prominent headline text, use the `<fhi-display>` component instead.\n *\n * Use this component instead of the standard HTML heading elements, `<h1>` - `<h6>`, to ensure consistent styling across your application.\n *\n * @tag fhi-headline\n * @element fhi-headline\n *\n * @slot - The content of the fhi-headline component. This should be pure text.\n */\n@customElement(FhiHeadlineSelector)\nexport class FhiHeadline extends LitElement {\n /**\n * Sets the size of the text styles.\n * @reflect\n * @type {'large' | 'medium' | 'small'}\n */\n @property({ type: String, reflect: true }) size:\n | 'large'\n | 'medium'\n | 'small' = 'medium';\n\n /**\n * Sets color of the given text. It supports any valid CSS color value (e.g. hex, rgb, rgba, hsl, hsla, color names).\n *\n * It is recommended to use Design Tokens for colors defined in the FHI Design System.\n * See: {@link https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs}\n *\n * Example:\n * ```html\n * <fhi-headline color=\"var(--fhi-color-primary-text-default)\">\n * This text will be in the primary text color.\n * </fhi-headline>\n * ```\n *\n * @type {string}\n */\n @property({ type: String }) color?: string = 'currentcolor';\n\n /**\n * Sets the heading level for the text, corresponding to HTML heading elements `<h1>` to `<h6>`.\n * @type {1 | 2 | 3 | 4 | 5 | 6}\n */\n @property({ type: Number }) level!: HeadlineLevel;\n\n updated(changedProperties: PropertyValues<this>) {\n super.updated(changedProperties);\n\n if (changedProperties.has('level')) {\n const levelAsNumber = Number(this.level);\n if (isNaN(levelAsNumber) || levelAsNumber < 1 || levelAsNumber > 6) {\n console.error(\n new TypeError(\n `The level property must be set to a number between 1 and 6. Current value: ${this.level}`,\n ),\n );\n }\n }\n\n if (changedProperties.has('color')) {\n this.style.color =\n typeof this.color === 'string' ? this.color : 'currentcolor';\n }\n }\n\n render() {\n const template = `\n <h${this.level} class=\"headline\">\n <slot></slot>\n </h${this.level}>\n `;\n return html`${unsafeHTML(template)}`;\n }\n\n static styles = css`\n :host {\n display: block;\n contain: layout;\n .headline {\n font-family: var(--fhi-font-family-default);\n -webkit-font-smoothing: antialiased;\n margin: 0;\n }\n }\n\n :host([size='large']) {\n .headline {\n font-size: var(--fhi-typography-headline-large-font-size);\n font-weight: var(--fhi-typography-headline-large-font-weight);\n line-height: var(--fhi-typography-headline-large-line-height);\n letter-spacing: var(--fhi-typography-headline-large-letter-spacing);\n }\n }\n\n :host([size='medium']) {\n .headline {\n font-size: var(--fhi-typography-headline-medium-font-size);\n font-weight: var(--fhi-typography-headline-medium-font-weight);\n line-height: var(--fhi-typography-headline-medium-line-height);\n letter-spacing: var(--fhi-typography-headline-medium-letter-spacing);\n }\n }\n\n :host([size='small']) {\n .headline {\n font-size: var(--fhi-typography-headline-small-font-size);\n font-weight: var(--fhi-typography-headline-small-font-weight);\n line-height: var(--fhi-typography-headline-small-line-height);\n letter-spacing: var(--fhi-typography-headline-small-letter-spacing);\n }\n }\n `;\n}\n"],"mappings":";;;AAIA,IAAa,IAAsB,gBAuB5B,IAAA,cAA0B,EAAW;;2BAS5B,uBAiB+B;;CAQ7C,QAAQ,GAAyC;EAG/C,IAFA,MAAM,QAAQ,CAAiB,GAE3B,EAAkB,IAAI,OAAO,GAAG;GAClC,IAAM,IAAgB,OAAO,KAAK,KAAK;GACvC,CAAI,MAAM,CAAa,KAAK,IAAgB,KAAK,IAAgB,MAC/D,QAAQ,MACN,gBAAI,UACF,8EAA8E,KAAK,OACrF,CACF;EAEJ;EAEA,AAAI,EAAkB,IAAI,OAAO,MAC/B,KAAK,MAAM,QACT,OAAO,KAAK,SAAU,WAAW,KAAK,QAAQ;CAEpD;CAEA,SAAS;EAMP,OAAO,CAAI,GAAG,EAAW;UAJnB,KAAK,MAAM;;WAEV,KAAK,MAAM;KAEe;CACnC;;gBAEgB,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsCrB;GA/FG,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,MAoBxC,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,MAMzB,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,UAjC3B,EAAc,CAAmB,CAAA,GAAA,CAAA"}
1
+ {"version":3,"file":"fhi-headline.js","names":[],"sources":["../../src/components/typography/fhi-headline/fhi-headline.component.ts"],"sourcesContent":["import { html, css, LitElement, PropertyValues } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\n\nexport const FhiHeadlineSelector = 'fhi-headline';\n\nexport type HeadlineLevel = 1 | 2 | 3 | 4 | 5 | 6;\n\n/**\n * ## FHI Headline\n *\n * {@link https://designsystem.fhi.no/?path=/story/komponenter-typography-headline--preview}\n *\n * The `<fhi-headline>` component is used to display standard headline text in accordance with the FHI Design System guidelines.\n *\n * For smaller, less prominent title text, use the `<fhi-title>` component instead.\n *\n * For larger, more prominent headline text, use the `<fhi-display>` component instead.\n *\n * Use this component instead of the standard HTML heading elements, `<h1>` - `<h6>`, to ensure consistent styling across your application.\n *\n * @tag fhi-headline\n * @element fhi-headline\n *\n * @slot - The content of the fhi-headline component. This should be pure text.\n */\n@customElement(FhiHeadlineSelector)\nexport class FhiHeadline extends LitElement {\n /**\n * Sets the size of the text styles.\n * @reflect\n * @type {'large' | 'medium' | 'small'}\n */\n @property({ type: String, reflect: true }) size:\n | 'large'\n | 'medium'\n | 'small' = 'medium';\n\n /**\n * Sets color of the given text. It supports any valid CSS color value (e.g. hex, rgb, rgba, hsl, hsla, color names).\n *\n * It is recommended to use Design Tokens for colors defined in the FHI Design System.\n * See: {@link https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs}\n *\n * Example:\n * ```html\n * <fhi-headline color=\"var(--fhi-color-primary-text-default)\">\n * This text will be in the primary text color.\n * </fhi-headline>\n * ```\n *\n * @type {string}\n */\n @property({ type: String }) color?: string;\n\n /**\n * Sets the heading level for the text, corresponding to HTML heading elements `<h1>` to `<h6>`.\n * @type {1 | 2 | 3 | 4 | 5 | 6}\n */\n @property({ type: Number }) level!: HeadlineLevel;\n\n updated(changedProperties: PropertyValues<this>) {\n super.updated(changedProperties);\n\n if (changedProperties.has('level')) {\n const levelAsNumber = Number(this.level);\n if (isNaN(levelAsNumber) || levelAsNumber < 1 || levelAsNumber > 6) {\n console.error(\n new TypeError(\n `The level property must be set to a number between 1 and 6. Current value: ${this.level}`,\n ),\n );\n }\n }\n }\n\n render() {\n const template = `\n <h${this.level} class=\"headline\">\n <slot></slot>\n </h${this.level}>\n `;\n return html`\n <div style=${ifDefined(this.color ? `color: ${this.color}` : undefined)}>\n ${unsafeHTML(template)}\n </div>\n `;\n }\n\n static styles = css`\n :host {\n --fhi-headline-color: unset;\n }\n\n :host {\n --fhi-headline-color: currentcolor;\n\n display: block;\n contain: layout;\n color: var(--fhi-headline-color);\n .headline {\n font-family: var(--fhi-font-family-default);\n -webkit-font-smoothing: antialiased;\n margin: 0;\n }\n }\n\n :host([size='large']) {\n .headline {\n font-size: var(--fhi-typography-headline-large-font-size);\n font-weight: var(--fhi-typography-headline-large-font-weight);\n line-height: var(--fhi-typography-headline-large-line-height);\n letter-spacing: var(--fhi-typography-headline-large-letter-spacing);\n }\n }\n\n :host([size='medium']) {\n .headline {\n font-size: var(--fhi-typography-headline-medium-font-size);\n font-weight: var(--fhi-typography-headline-medium-font-weight);\n line-height: var(--fhi-typography-headline-medium-line-height);\n letter-spacing: var(--fhi-typography-headline-medium-letter-spacing);\n }\n }\n\n :host([size='small']) {\n .headline {\n font-size: var(--fhi-typography-headline-small-font-size);\n font-weight: var(--fhi-typography-headline-small-font-weight);\n line-height: var(--fhi-typography-headline-small-line-height);\n letter-spacing: var(--fhi-typography-headline-small-letter-spacing);\n }\n }\n `;\n}\n"],"mappings":";;;;AAKA,IAAa,IAAsB,gBAuB5B,IAAA,cAA0B,EAAW;;2BAS5B;;CAyBd,QAAQ,GAAyC;EAG/C,IAFA,MAAM,QAAQ,CAAiB,GAE3B,EAAkB,IAAI,OAAO,GAAG;GAClC,IAAM,IAAgB,OAAO,KAAK,KAAK;GACvC,CAAI,MAAM,CAAa,KAAK,IAAgB,KAAK,IAAgB,MAC/D,QAAQ,MACN,gBAAI,UACF,8EAA8E,KAAK,OACrF,CACF;EAEJ;CACF;CAEA,SAAS;EACP,IAAM,IAAW;UACX,KAAK,MAAM;;WAEV,KAAK,MAAM;;EAElB,OAAO,CAAI;mBACI,EAAU,KAAK,QAAQ,UAAU,KAAK,UAAU,KAAA,CAAS,EAAE;UACpE,EAAW,CAAQ,EAAE;;;CAG7B;;gBAEgB,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6CrB;GArGG,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,MAoBxC,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,MAMzB,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,UAjC3B,EAAc,CAAmB,CAAA,GAAA,CAAA"}
package/fhi-headline.manifest.json CHANGED
@@ -1 +1 @@
1
- {"kind":"javascript-module","path":"src/components/typography/fhi-headline/fhi-headline.component.ts","declarations":[{"kind":"class","description":"## FHI Headline\n\nhttps://designsystem.fhi.no/?path=/story/komponenter-typography-headline--preview\n\nThe `<fhi-headline>` component is used to display standard headline text in accordance with the FHI Design System guidelines.\n\nFor smaller, less prominent title text, use the `<fhi-title>` component instead.\n\nFor larger, more prominent headline text, use the `<fhi-display>` component instead.\n\nUse this component instead of the standard HTML heading elements, `<h1>` - `<h6>`, to ensure consistent styling across your application.","name":"FhiHeadline","slots":[{"description":"The content of the fhi-headline component. This should be pure text.","name":""}],"members":[{"kind":"field","name":"color","type":{"text":"string"},"default":"'currentcolor'","description":"Sets color of the given text. It supports any valid CSS color value (e.g. hex, rgb, rgba, hsl, hsla, color names).\n\nIt is recommended to use Design Tokens for colors defined in the FHI Design System.\nSee: https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs\n\nExample:\n```html\n <fhi-headline color=\"var(--fhi-color-primary-text-default)\">\n This text will be in the primary text color.\n </fhi-headline>\n```","attribute":"color"},{"kind":"field","name":"level","type":{"text":"1 | 2 | 3 | 4 | 5 | 6"},"description":"Sets the heading level for the text, corresponding to HTML heading elements `<h1>` to `<h6>`.","attribute":"level"},{"kind":"field","name":"size","type":{"text":"'large' | 'medium' | 'small'"},"default":"'medium'","description":"Sets the size of the text styles.","reflects":true,"attribute":"size"}],"attributes":[{"name":"color","type":{"text":"string"},"default":"'currentcolor'","description":"Sets color of the given text. It supports any valid CSS color value (e.g. hex, rgb, rgba, hsl, hsla, color names).\n\nIt is recommended to use Design Tokens for colors defined in the FHI Design System.\nSee: https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs\n\nExample:\n```html\n <fhi-headline color=\"var(--fhi-color-primary-text-default)\">\n This text will be in the primary text color.\n </fhi-headline>\n```","fieldName":"color"},{"name":"level","type":{"text":"1 | 2 | 3 | 4 | 5 | 6"},"description":"Sets the heading level for the text, corresponding to HTML heading elements `<h1>` to `<h6>`.","fieldName":"level"},{"name":"size","type":{"text":"'large' | 'medium' | 'small'"},"default":"'medium'","description":"Sets the size of the text styles.","fieldName":"size"}],"superclass":{"name":"LitElement","package":"lit"},"tagName":"fhi-headline","customElement":true},{"kind":"variable","name":"FhiHeadlineSelector","type":{"text":"string"},"default":"'fhi-headline'"}]}
1
+ {"kind":"javascript-module","path":"src/components/typography/fhi-headline/fhi-headline.component.ts","declarations":[{"kind":"class","description":"## FHI Headline\n\nhttps://designsystem.fhi.no/?path=/story/komponenter-typography-headline--preview\n\nThe `<fhi-headline>` component is used to display standard headline text in accordance with the FHI Design System guidelines.\n\nFor smaller, less prominent title text, use the `<fhi-title>` component instead.\n\nFor larger, more prominent headline text, use the `<fhi-display>` component instead.\n\nUse this component instead of the standard HTML heading elements, `<h1>` - `<h6>`, to ensure consistent styling across your application.","name":"FhiHeadline","slots":[{"description":"The content of the fhi-headline component. This should be pure text.","name":""}],"members":[{"kind":"field","name":"color","type":{"text":"string"},"description":"Sets color of the given text. It supports any valid CSS color value (e.g. hex, rgb, rgba, hsl, hsla, color names).\n\nIt is recommended to use Design Tokens for colors defined in the FHI Design System.\nSee: https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs\n\nExample:\n```html\n <fhi-headline color=\"var(--fhi-color-primary-text-default)\">\n This text will be in the primary text color.\n </fhi-headline>\n```","attribute":"color"},{"kind":"field","name":"level","type":{"text":"1 | 2 | 3 | 4 | 5 | 6"},"description":"Sets the heading level for the text, corresponding to HTML heading elements `<h1>` to `<h6>`.","attribute":"level"},{"kind":"field","name":"size","type":{"text":"'large' | 'medium' | 'small'"},"default":"'medium'","description":"Sets the size of the text styles.","reflects":true,"attribute":"size"}],"attributes":[{"name":"color","type":{"text":"string"},"description":"Sets color of the given text. It supports any valid CSS color value (e.g. hex, rgb, rgba, hsl, hsla, color names).\n\nIt is recommended to use Design Tokens for colors defined in the FHI Design System.\nSee: https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs\n\nExample:\n```html\n <fhi-headline color=\"var(--fhi-color-primary-text-default)\">\n This text will be in the primary text color.\n </fhi-headline>\n```","fieldName":"color"},{"name":"level","type":{"text":"1 | 2 | 3 | 4 | 5 | 6"},"description":"Sets the heading level for the text, corresponding to HTML heading elements `<h1>` to `<h6>`.","fieldName":"level"},{"name":"size","type":{"text":"'large' | 'medium' | 'small'"},"default":"'medium'","description":"Sets the size of the text styles.","fieldName":"size"}],"superclass":{"name":"LitElement","package":"lit"},"tagName":"fhi-headline","customElement":true},{"kind":"variable","name":"FhiHeadlineSelector","type":{"text":"string"},"default":"'fhi-headline'"}]}
package/fhi-label.js CHANGED
@@ -1,15 +1,16 @@
1
1
  import { a as e, d as t, o as n, s as r, t as i, u as a } from "./decorate-DFXIek-k.js";
2
+ import { t as o } from "./if-defined-Dl-W5B5_.js";
2
3
  //#region src/components/typography/fhi-label/fhi-label.component.ts
3
- var o = "fhi-label", s = class extends r {
4
+ var s = "fhi-label", c = class extends r {
4
5
  constructor(...e) {
5
- super(...e), this.size = "medium", this.color = "currentcolor";
6
- }
7
- updated(e) {
8
- super.updated(e), e.has("color") && (this.style.color = typeof this.color == "string" ? this.color : "currentcolor");
6
+ super(...e), this.size = "medium";
9
7
  }
10
8
  render() {
11
9
  return a`
12
- <span class="label">
10
+ <span
11
+ class="label"
12
+ style=${o(this.color ? `color: ${this.color}` : void 0)}
13
+ >
13
14
  <slot></slot>
14
15
  </span>
15
16
  `;
@@ -17,8 +18,15 @@ var o = "fhi-label", s = class extends r {
17
18
  static {
18
19
  this.styles = t`
19
20
  :host {
21
+ --fhi-label-color: unset;
22
+ }
23
+
24
+ :host {
25
+ --fhi-label-color: currentcolor;
26
+
20
27
  display: block;
21
28
  contain: layout;
29
+ color: var(--fhi-label-color);
22
30
  .label {
23
31
  font-family: var(--fhi-font-family-default);
24
32
  -webkit-font-smoothing: antialiased;
@@ -58,8 +66,8 @@ var o = "fhi-label", s = class extends r {
58
66
  i([e({
59
67
  type: String,
60
68
  reflect: !0
61
- })], s.prototype, "size", void 0), i([e({ type: String })], s.prototype, "color", void 0), s = i([n(o)], s);
69
+ })], c.prototype, "size", void 0), i([e({ type: String })], c.prototype, "color", void 0), c = i([n(s)], c);
62
70
  //#endregion
63
- export { s as FhiLabel, o as FhiLabelSelector };
71
+ export { c as FhiLabel, s as FhiLabelSelector };
64
72
 
65
73
  //# sourceMappingURL=fhi-label.js.map
package/fhi-label.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"fhi-label.js","names":[],"sources":["../../src/components/typography/fhi-label/fhi-label.component.ts"],"sourcesContent":["import { html, css, LitElement, PropertyValues } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nexport const FhiLabelSelector = 'fhi-label';\n\n/**\n * ## FHI Label\n *\n * {@link https://designsystem.fhi.no/?path=/story/komponenter-typography-label--preview}\n *\n * The `<fhi-label>` component is used to display label text in accordance with the FHI Design System guidelines.\n * Use this component instead of the standard HTML `<label>` element to ensure consistent styling across your application.\n *\n * @tag fhi-label\n * @element fhi-label\n *\n * @slot - The content of the fhi-label component. This should be pure text.\n */\n@customElement(FhiLabelSelector)\nexport class FhiLabel extends LitElement {\n /**\n * Sets the font size of the given text.\n * @reflect\n * @type {'large' | 'medium' | 'small'}\n */\n @property({ type: String, reflect: true }) size:\n | 'large'\n | 'medium'\n | 'small' = 'medium';\n\n /**\n * Sets color of the given text. It supports any valid CSS color value (e.g. hex, rgb, rgba, hsl, hsla, color names).\n *\n * It is recommended to use Design Tokens for colors defined in the FHI Design System.\n * See: {@link https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs}\n *\n * Example:\n * ```html\n * <fhi-label color=\"var(--fhi-color-primary-text-default)\">\n * This text will be in the primary text color.\n * </fhi-label>\n * ```\n *\n * @type {string}\n */\n @property({ type: String }) color?: string = 'currentcolor';\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' ? this.color : 'currentcolor';\n }\n }\n\n render() {\n return html`\n <span class=\"label\">\n <slot></slot>\n </span>\n `;\n }\n\n static styles = css`\n :host {\n display: block;\n contain: layout;\n .label {\n font-family: var(--fhi-font-family-default);\n -webkit-font-smoothing: antialiased;\n margin: 0;\n }\n }\n\n :host([size='large']) {\n .label {\n font-size: var(--fhi-typography-label-large-font-size);\n font-weight: var(--fhi-typography-label-large-font-weight);\n line-height: var(--fhi-typography-label-large-line-height);\n letter-spacing: var(--fhi-typography-label-large-letter-spacing);\n }\n }\n\n :host([size='medium']) {\n .label {\n font-size: var(--fhi-typography-label-medium-font-size);\n font-weight: var(--fhi-typography-label-medium-font-weight);\n line-height: var(--fhi-typography-label-medium-line-height);\n letter-spacing: var(--fhi-typography-label-medium-letter-spacing);\n }\n }\n\n :host([size='small']) {\n .label {\n font-size: var(--fhi-typography-label-small-font-size);\n font-weight: var(--fhi-typography-label-small-font-weight);\n line-height: var(--fhi-typography-label-small-line-height);\n letter-spacing: var(--fhi-typography-label-small-letter-spacing);\n }\n }\n `;\n}\n"],"mappings":";;AAGA,IAAa,IAAmB,aAgBzB,IAAA,cAAuB,EAAW;;2BASzB,uBAiB+B;;CAE7C,QAAQ,GAAyC;EAG/C,AAFA,MAAM,QAAQ,CAAiB,GAE3B,EAAkB,IAAI,OAAO,MAC/B,KAAK,MAAM,QACT,OAAO,KAAK,SAAU,WAAW,KAAK,QAAQ;CAEpD;CAEA,SAAS;EACP,OAAO,CAAI;;;;;CAKb;;gBAEgB,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsCrB;GA7EG,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,MAoBxC,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,UA3B3B,EAAc,CAAgB,CAAA,GAAA,CAAA"}
1
+ {"version":3,"file":"fhi-label.js","names":[],"sources":["../../src/components/typography/fhi-label/fhi-label.component.ts"],"sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nexport const FhiLabelSelector = 'fhi-label';\n\n/**\n * ## FHI Label\n *\n * {@link https://designsystem.fhi.no/?path=/story/komponenter-typography-label--preview}\n *\n * The `<fhi-label>` component is used to display label text in accordance with the FHI Design System guidelines.\n * Use this component instead of the standard HTML `<label>` element to ensure consistent styling across your application.\n *\n * @tag fhi-label\n * @element fhi-label\n *\n * @slot - The content of the fhi-label component. This should be pure text.\n */\n@customElement(FhiLabelSelector)\nexport class FhiLabel extends LitElement {\n /**\n * Sets the font size of the given text.\n * @reflect\n * @type {'large' | 'medium' | 'small'}\n */\n @property({ type: String, reflect: true }) size:\n | 'large'\n | 'medium'\n | 'small' = 'medium';\n\n /**\n * Sets color of the given text. It supports any valid CSS color value (e.g. hex, rgb, rgba, hsl, hsla, color names).\n *\n * It is recommended to use Design Tokens for colors defined in the FHI Design System.\n * See: {@link https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs}\n *\n * Example:\n * ```html\n * <fhi-label color=\"var(--fhi-color-primary-text-default)\">\n * This text will be in the primary text color.\n * </fhi-label>\n * ```\n *\n * @type {string}\n */\n @property({ type: String }) color?: string;\n\n render() {\n return html`\n <span\n class=\"label\"\n style=${ifDefined(this.color ? `color: ${this.color}` : undefined)}\n >\n <slot></slot>\n </span>\n `;\n }\n\n static styles = css`\n :host {\n --fhi-label-color: unset;\n }\n\n :host {\n --fhi-label-color: currentcolor;\n\n display: block;\n contain: layout;\n color: var(--fhi-label-color);\n .label {\n font-family: var(--fhi-font-family-default);\n -webkit-font-smoothing: antialiased;\n margin: 0;\n }\n }\n\n :host([size='large']) {\n .label {\n font-size: var(--fhi-typography-label-large-font-size);\n font-weight: var(--fhi-typography-label-large-font-weight);\n line-height: var(--fhi-typography-label-large-line-height);\n letter-spacing: var(--fhi-typography-label-large-letter-spacing);\n }\n }\n\n :host([size='medium']) {\n .label {\n font-size: var(--fhi-typography-label-medium-font-size);\n font-weight: var(--fhi-typography-label-medium-font-weight);\n line-height: var(--fhi-typography-label-medium-line-height);\n letter-spacing: var(--fhi-typography-label-medium-letter-spacing);\n }\n }\n\n :host([size='small']) {\n .label {\n font-size: var(--fhi-typography-label-small-font-size);\n font-weight: var(--fhi-typography-label-small-font-weight);\n line-height: var(--fhi-typography-label-small-line-height);\n letter-spacing: var(--fhi-typography-label-small-letter-spacing);\n }\n }\n `;\n}\n"],"mappings":";;;AAIA,IAAa,IAAmB,aAgBzB,IAAA,cAAuB,EAAW;;2BASzB;;CAmBd,SAAS;EACP,OAAO,CAAI;;;gBAGC,EAAU,KAAK,QAAQ,UAAU,KAAK,UAAU,KAAA,CAAS,EAAE;;;;;CAKzE;;gBAEgB,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6CrB;GA9EG,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,MAoBxC,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,UA3B3B,EAAc,CAAgB,CAAA,GAAA,CAAA"}
package/fhi-label.manifest.json CHANGED
@@ -1 +1 @@
1
- {"kind":"javascript-module","path":"src/components/typography/fhi-label/fhi-label.component.ts","declarations":[{"kind":"class","description":"## FHI Label\n\nhttps://designsystem.fhi.no/?path=/story/komponenter-typography-label--preview\n\nThe `<fhi-label>` component is used to display label text in accordance with the FHI Design System guidelines.\nUse this component instead of the standard HTML `<label>` element to ensure consistent styling across your application.","name":"FhiLabel","slots":[{"description":"The content of the fhi-label component. This should be pure text.","name":""}],"members":[{"kind":"field","name":"color","type":{"text":"string"},"default":"'currentcolor'","description":"Sets color of the given text. It supports any valid CSS color value (e.g. hex, rgb, rgba, hsl, hsla, color names).\n\nIt is recommended to use Design Tokens for colors defined in the FHI Design System.\nSee: https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs\n\nExample:\n```html\n <fhi-label color=\"var(--fhi-color-primary-text-default)\">\n This text will be in the primary text color.\n </fhi-label>\n```","attribute":"color"},{"kind":"field","name":"size","type":{"text":"'large' | 'medium' | 'small'"},"default":"'medium'","description":"Sets the font size of the given text.","reflects":true,"attribute":"size"}],"attributes":[{"name":"color","type":{"text":"string"},"default":"'currentcolor'","description":"Sets color of the given text. It supports any valid CSS color value (e.g. hex, rgb, rgba, hsl, hsla, color names).\n\nIt is recommended to use Design Tokens for colors defined in the FHI Design System.\nSee: https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs\n\nExample:\n```html\n <fhi-label color=\"var(--fhi-color-primary-text-default)\">\n This text will be in the primary text color.\n </fhi-label>\n```","fieldName":"color"},{"name":"size","type":{"text":"'large' | 'medium' | 'small'"},"default":"'medium'","description":"Sets the font size of the given text.","fieldName":"size"}],"superclass":{"name":"LitElement","package":"lit"},"tagName":"fhi-label","customElement":true},{"kind":"variable","name":"FhiLabelSelector","type":{"text":"string"},"default":"'fhi-label'"}]}
1
+ {"kind":"javascript-module","path":"src/components/typography/fhi-label/fhi-label.component.ts","declarations":[{"kind":"class","description":"## FHI Label\n\nhttps://designsystem.fhi.no/?path=/story/komponenter-typography-label--preview\n\nThe `<fhi-label>` component is used to display label text in accordance with the FHI Design System guidelines.\nUse this component instead of the standard HTML `<label>` element to ensure consistent styling across your application.","name":"FhiLabel","slots":[{"description":"The content of the fhi-label component. This should be pure text.","name":""}],"members":[{"kind":"field","name":"color","type":{"text":"string"},"description":"Sets color of the given text. It supports any valid CSS color value (e.g. hex, rgb, rgba, hsl, hsla, color names).\n\nIt is recommended to use Design Tokens for colors defined in the FHI Design System.\nSee: https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs\n\nExample:\n```html\n <fhi-label color=\"var(--fhi-color-primary-text-default)\">\n This text will be in the primary text color.\n </fhi-label>\n```","attribute":"color"},{"kind":"field","name":"size","type":{"text":"'large' | 'medium' | 'small'"},"default":"'medium'","description":"Sets the font size of the given text.","reflects":true,"attribute":"size"}],"attributes":[{"name":"color","type":{"text":"string"},"description":"Sets color of the given text. It supports any valid CSS color value (e.g. hex, rgb, rgba, hsl, hsla, color names).\n\nIt is recommended to use Design Tokens for colors defined in the FHI Design System.\nSee: https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs\n\nExample:\n```html\n <fhi-label color=\"var(--fhi-color-primary-text-default)\">\n This text will be in the primary text color.\n </fhi-label>\n```","fieldName":"color"},{"name":"size","type":{"text":"'large' | 'medium' | 'small'"},"default":"'medium'","description":"Sets the font size of the given text.","fieldName":"size"}],"superclass":{"name":"LitElement","package":"lit"},"tagName":"fhi-label","customElement":true},{"kind":"variable","name":"FhiLabelSelector","type":{"text":"string"},"default":"'fhi-label'"}]}
package/fhi-radio.js CHANGED
@@ -181,33 +181,31 @@ var c = "fhi-radio", l = class extends i {
181
181
  outline: var(--fhi-dimension-border-width-focus) solid
182
182
  var(--fhi-color-accent-surface-hover);
183
183
  }
184
- }
185
184
 
186
- :host([status='error']) {
187
- input {
188
- border-color: var(--fhi-color-danger-border-default);
189
- background-color: var(--fhi-color-danger-background-default);
190
- }
185
+ &:host([status='error']) {
186
+ input {
187
+ border-color: var(--fhi-color-danger-border-default);
188
+ background-color: var(--fhi-color-danger-background-default);
189
+ }
191
190
 
192
- input:checked {
193
- ~ .radio-dot {
194
- circle {
195
- fill: var(--fhi-color-danger-border-default);
191
+ input:checked {
192
+ ~ .radio-dot {
193
+ circle {
194
+ fill: var(--fhi-color-danger-border-default);
195
+ }
196
196
  }
197
197
  }
198
- }
199
- }
200
198
 
201
- :host([status='error']:not(:disabled)) {
202
- input:hover:not(:checked) {
203
- border-color: var(--fhi-color-danger-border-strong);
204
- background-color: var(--fhi-color-danger-background-subtle);
205
- }
199
+ input:hover:not(:checked) {
200
+ border-color: var(--fhi-color-danger-border-strong);
201
+ background-color: var(--fhi-color-danger-background-subtle);
202
+ }
206
203
 
207
- input:active:not(:checked) {
208
- border-color: var(--fhi-color-danger-border-strong);
209
- background-color: var(--fhi-color-danger-surface-default);
210
- outline-color: var(--fhi-color-danger-surface-hover);
204
+ input:active:not(:checked) {
205
+ border-color: var(--fhi-color-danger-border-strong);
206
+ background-color: var(--fhi-color-danger-surface-default);
207
+ outline-color: var(--fhi-color-danger-surface-hover);
208
+ }
211
209
  }
212
210
  }
213
211
  `;
package/fhi-radio.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"fhi-radio.js","names":[],"sources":["../../src/components/fhi-radio/fhi-radio.component.ts"],"sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nexport const FhiRadioSelector = 'fhi-radio';\n\n/**\n * ## FHI Radio\n *\n * {@link https://designsystem.fhi.no/?path=/docs/komponenter-radio--docs}\n *\n * The `<fhi-radio>` component represents a single radio button.\n * It should be used within a group of options, allowing users to select one option from a set.\n *\n * @tag fhi-radio\n * @element fhi-radio\n */\n@customElement(FhiRadioSelector)\nexport class FhiRadio extends LitElement {\n static readonly formAssociated = true;\n\n /**\n * The text label assigned to and displayed next to the radio.\n * You should always provide a label.\n * @type {string}\n */\n @property({ type: String }) label?: string = undefined;\n\n /**\n * The name of the radio. This is submitted with the form data as a `key` when the checkbox is checked.\n * All `<fhi-radio>` components with the same name belong to the same group.\n * @reflect\n * @type {string}\n */\n @property({ type: String, reflect: true }) name?: string = undefined;\n\n /**\n * Sets the visual status of the radio. There is currently only one status available: `error`.\n * The `error` status is used to indicate that there is an issue with the radio, such as a required radio not being checked.\n * @reflect\n * @type {'error' | undefined}\n */\n @property({ type: String, reflect: true }) status?: 'error' = undefined;\n\n /**\n * Disables the radio. 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 * Whether the radio button is checked or not.\n * @type {boolean}\n */\n @property({ type: Boolean }) checked? = false;\n\n /**\n * The value of the radio. This is submitted with the form data as a `value` when the radio is checked.\n * @type {string}\n */\n @property({ type: String }) value: string = 'on';\n\n @query('#input-element')\n private _input!: HTMLInputElement;\n\n private _groupRoot: Document | HTMLFormElement;\n private _internals: ElementInternals;\n\n /**\n * Indicates if the radio button is part of a form.\n * @internal\n */\n public isFormElement = false;\n\n constructor() {\n super();\n this._internals = this.attachInternals();\n this._groupRoot = document;\n }\n\n public connectedCallback(): void {\n super.connectedCallback();\n\n this.addEventListener('focus', this._setFocusOnInput);\n\n this.isFormElement = !!this._internals.form;\n\n if (this.isFormElement) {\n this._updateFormValue();\n this._groupRoot = this._internals.form!;\n }\n\n // If the radio has a name then it is part of a group and needs keyboard navigation\n if (this.name) {\n this.addEventListener('keydown', this._handleKeyDown);\n this._SetTabbableRadios();\n }\n }\n\n public disconnectedCallback(): void {\n super.disconnectedCallback();\n this.removeEventListener('keydown', this._handleKeyDown);\n this.removeEventListener('focus', this._setFocusOnInput);\n }\n\n private _setFocusOnInput() {\n this._input.focus();\n }\n\n private _getRadioGroup() {\n return Array.from(\n this._groupRoot.querySelectorAll<FhiRadio>(\n `${FhiRadioSelector}[name=\"${this.name}\"]`,\n ),\n );\n }\n\n private _SetTabbableRadios() {\n const radios = this._getRadioGroup();\n\n radios.forEach(radio => {\n // Only the checked radio should be tabbable\n radio.tabIndex = radio.checked ? 0 : -1;\n });\n\n // If none of the radios are checked, make the first one tabbable\n if (!radios.some(radio => radio.checked) && radios.length > 0) {\n radios[0].tabIndex = 0;\n }\n }\n\n public updated(changedProperties: Map<string, unknown>) {\n super.updated(changedProperties);\n\n // make sure the radio input can be programmatically toggeled. e.g by a form reset\n if (changedProperties.has('checked')) {\n this._input.checked = !!this.checked;\n this._updateFormValue();\n\n if (this.checked) {\n this.uncheckGroupMembers();\n }\n }\n\n // update the form value when the value or name input changes and the radio is already checked\n if (changedProperties.has('value') || changedProperties.has('name')) {\n if (this._input.checked) {\n this._updateFormValue();\n }\n }\n }\n\n public formResetCallback(): void {\n const radiosCheckedByDefault = this._getRadioGroup().filter(\n radio => typeof radio.getAttribute('checked') === 'string',\n );\n\n if (radiosCheckedByDefault.pop() === this) {\n this.checked = true;\n }\n\n this._updateFormValue();\n }\n\n private uncheckGroupMembers(): void {\n const radios = this._getRadioGroup();\n\n radios.forEach(radio => {\n if (radio === this) {\n return;\n }\n\n if (radio.isFormElement && this._groupRoot === document) {\n return;\n }\n\n radio.checked = false;\n });\n }\n\n private _updateFormValue(): void {\n if (!this.isFormElement) {\n return;\n }\n\n this._internals.setFormValue(this.checked ? this.value : null);\n }\n\n private _handleChange(event: Event): void {\n this.checked = (event.target as HTMLInputElement).checked;\n\n this.uncheckGroupMembers();\n\n this._updateFormValue();\n\n event.stopPropagation();\n this._dispatchChangeEvent();\n }\n private _handleInput(event: Event): void {\n event.stopPropagation();\n this._dispatchInputEvent();\n }\n\n private _dispatchChangeEvent(): void {\n /**\n * @type {Event} - Standard DOM event with the type `change`.\n * This event is dispatched when the radio is checked or unchecked.\n */\n this.dispatchEvent(new Event('change', { bubbles: true }));\n }\n\n private _dispatchInputEvent(): void {\n /**\n * @type {Event} - Standard DOM event with the type `input`.\n * This event is dispatched when the radio is checked or unchecked.\n */\n this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));\n }\n\n private _handleKeyDown(event: KeyboardEvent): void {\n const arrows = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];\n\n if (!arrows.includes(event.key)) {\n return;\n }\n\n event.preventDefault();\n\n const radios = this._getRadioGroup();\n\n if (radios.length < 2) {\n return;\n }\n\n const currentIndex = radios.indexOf(this);\n\n const nextIndex = currentIndex;\n let nextRadio: FhiRadio;\n\n if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') {\n nextRadio = radios[nextIndex === 0 ? radios.length - 1 : nextIndex - 1];\n } else {\n nextRadio = radios[nextIndex === radios.length - 1 ? 0 : nextIndex + 1];\n }\n\n nextRadio.focus();\n this.checked = false;\n nextRadio.checked = true;\n this._SetTabbableRadios();\n }\n\n render() {\n return html`\n <label>\n <div class=\"radio-container\">\n <input\n type=\"radio\"\n id=\"input-element\"\n name=\"${ifDefined(this.name)}\"\n value=\"${this.value}\"\n ?checked=${this.checked}\n ?disabled=${this.disabled}\n @change=${this._handleChange}\n @input=${this._handleInput}\n />\n <svg\n class=\"radio-dot\"\n viewBox=\"0 0 18 18\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <circle r=\"6\" cx=\"9\" cy=\"9\" />\n </svg>\n </div>\n ${this.label}\n </label>\n `;\n }\n\n static styles = css`\n :host {\n --fhi-radio-color: currentcolor;\n }\n\n :host {\n display: flex;\n align-items: center;\n width: max-content;\n\n label {\n display: flex;\n position: relative;\n gap: var(--fhi-spacing-050);\n color: var(--fhi-radio-color);\n font-family: var(--fhi-font-family-default);\n -webkit-font-smoothing: antialiased;\n font-size: var(--fhi-typography-body-medium-font-size);\n font-weight: var(--fhi-typography-body-medium-font-weight);\n line-height: var(--fhi-typography-body-medium-line-height);\n letter-spacing: var(--fhi-typography-body-medium-letter-spacing);\n }\n\n .radio-container {\n display: flex;\n position: relative;\n }\n\n input {\n appearance: none;\n margin: 0.125rem;\n width: var(--fhi-spacing-250);\n height: var(--fhi-spacing-250);\n background-color: var(--fhi-color-neutral-background-default);\n border: var(--fhi-dimension-border-width) solid\n var(--fhi-color-neutral-border-default);\n border-radius: var(--fhi-border-radius-full);\n transition: all var(--fhi-motion-ease-default)\n var(--fhi-motion-duration-quick);\n }\n\n .radio-dot {\n visibility: hidden;\n opacity: 0;\n transition: opacity var(--fhi-motion-ease-default)\n var(--fhi-motion-duration-quick);\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n height: 1.125rem;\n width: 1.125rem;\n }\n\n input:checked {\n border-width: var(--fhi-dimension-border-width-active);\n ~ .radio-dot {\n circle {\n fill: var(--fhi-color-neutral-border-default);\n }\n visibility: visible;\n opacity: 1;\n }\n }\n }\n\n :host([disabled]) {\n opacity: var(--fhi-opacity-disabled);\n label,\n input {\n cursor: not-allowed;\n }\n }\n\n :host(:not(:disabled)) {\n input:hover:not(:checked) {\n border-color: var(--fhi-color-accent-border-strong);\n background-color: var(--fhi-color-accent-background-subtle);\n }\n\n input:active:not(:checked) {\n border-color: var(--fhi-color-accent-border-strong);\n background-color: var(--fhi-color-accent-surface-default);\n outline: var(--fhi-dimension-border-width-focus) solid\n var(--fhi-color-accent-surface-hover);\n }\n }\n\n :host([status='error']) {\n input {\n border-color: var(--fhi-color-danger-border-default);\n background-color: var(--fhi-color-danger-background-default);\n }\n\n input:checked {\n ~ .radio-dot {\n circle {\n fill: var(--fhi-color-danger-border-default);\n }\n }\n }\n }\n\n :host([status='error']:not(:disabled)) {\n input:hover:not(:checked) {\n border-color: var(--fhi-color-danger-border-strong);\n background-color: var(--fhi-color-danger-background-subtle);\n }\n\n input:active:not(:checked) {\n border-color: var(--fhi-color-danger-border-strong);\n background-color: var(--fhi-color-danger-surface-default);\n outline-color: var(--fhi-color-danger-surface-hover);\n }\n }\n `;\n}\n"],"mappings":"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"}
1
+ {"version":3,"file":"fhi-radio.js","names":[],"sources":["../../src/components/fhi-radio/fhi-radio.component.ts"],"sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nexport const FhiRadioSelector = 'fhi-radio';\n\n/**\n * ## FHI Radio\n *\n * {@link https://designsystem.fhi.no/?path=/docs/komponenter-radio--docs}\n *\n * The `<fhi-radio>` component represents a single radio button.\n * It should be used within a group of options, allowing users to select one option from a set.\n *\n * @tag fhi-radio\n * @element fhi-radio\n */\n@customElement(FhiRadioSelector)\nexport class FhiRadio extends LitElement {\n static readonly formAssociated = true;\n\n /**\n * The text label assigned to and displayed next to the radio.\n * You should always provide a label.\n * @type {string}\n */\n @property({ type: String }) label?: string = undefined;\n\n /**\n * The name of the radio. This is submitted with the form data as a `key` when the checkbox is checked.\n * All `<fhi-radio>` components with the same name belong to the same group.\n * @reflect\n * @type {string}\n */\n @property({ type: String, reflect: true }) name?: string = undefined;\n\n /**\n * Sets the visual status of the radio. There is currently only one status available: `error`.\n * The `error` status is used to indicate that there is an issue with the radio, such as a required radio not being checked.\n * @reflect\n * @type {'error' | undefined}\n */\n @property({ type: String, reflect: true }) status?: 'error' = undefined;\n\n /**\n * Disables the radio. 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 * Whether the radio button is checked or not.\n * @type {boolean}\n */\n @property({ type: Boolean }) checked? = false;\n\n /**\n * The value of the radio. This is submitted with the form data as a `value` when the radio is checked.\n * @type {string}\n */\n @property({ type: String }) value: string = 'on';\n\n @query('#input-element')\n private _input!: HTMLInputElement;\n\n private _groupRoot: Document | HTMLFormElement;\n private _internals: ElementInternals;\n\n /**\n * Indicates if the radio button is part of a form.\n * @internal\n */\n public isFormElement = false;\n\n constructor() {\n super();\n this._internals = this.attachInternals();\n this._groupRoot = document;\n }\n\n public connectedCallback(): void {\n super.connectedCallback();\n\n this.addEventListener('focus', this._setFocusOnInput);\n\n this.isFormElement = !!this._internals.form;\n\n if (this.isFormElement) {\n this._updateFormValue();\n this._groupRoot = this._internals.form!;\n }\n\n // If the radio has a name then it is part of a group and needs keyboard navigation\n if (this.name) {\n this.addEventListener('keydown', this._handleKeyDown);\n this._SetTabbableRadios();\n }\n }\n\n public disconnectedCallback(): void {\n super.disconnectedCallback();\n this.removeEventListener('keydown', this._handleKeyDown);\n this.removeEventListener('focus', this._setFocusOnInput);\n }\n\n private _setFocusOnInput() {\n this._input.focus();\n }\n\n private _getRadioGroup() {\n return Array.from(\n this._groupRoot.querySelectorAll<FhiRadio>(\n `${FhiRadioSelector}[name=\"${this.name}\"]`,\n ),\n );\n }\n\n private _SetTabbableRadios() {\n const radios = this._getRadioGroup();\n\n radios.forEach(radio => {\n // Only the checked radio should be tabbable\n radio.tabIndex = radio.checked ? 0 : -1;\n });\n\n // If none of the radios are checked, make the first one tabbable\n if (!radios.some(radio => radio.checked) && radios.length > 0) {\n radios[0].tabIndex = 0;\n }\n }\n\n public updated(changedProperties: Map<string, unknown>) {\n super.updated(changedProperties);\n\n // make sure the radio input can be programmatically toggeled. e.g by a form reset\n if (changedProperties.has('checked')) {\n this._input.checked = !!this.checked;\n this._updateFormValue();\n\n if (this.checked) {\n this.uncheckGroupMembers();\n }\n }\n\n // update the form value when the value or name input changes and the radio is already checked\n if (changedProperties.has('value') || changedProperties.has('name')) {\n if (this._input.checked) {\n this._updateFormValue();\n }\n }\n }\n\n public formResetCallback(): void {\n const radiosCheckedByDefault = this._getRadioGroup().filter(\n radio => typeof radio.getAttribute('checked') === 'string',\n );\n\n if (radiosCheckedByDefault.pop() === this) {\n this.checked = true;\n }\n\n this._updateFormValue();\n }\n\n private uncheckGroupMembers(): void {\n const radios = this._getRadioGroup();\n\n radios.forEach(radio => {\n if (radio === this) {\n return;\n }\n\n if (radio.isFormElement && this._groupRoot === document) {\n return;\n }\n\n radio.checked = false;\n });\n }\n\n private _updateFormValue(): void {\n if (!this.isFormElement) {\n return;\n }\n\n this._internals.setFormValue(this.checked ? this.value : null);\n }\n\n private _handleChange(event: Event): void {\n this.checked = (event.target as HTMLInputElement).checked;\n\n this.uncheckGroupMembers();\n\n this._updateFormValue();\n\n event.stopPropagation();\n this._dispatchChangeEvent();\n }\n private _handleInput(event: Event): void {\n event.stopPropagation();\n this._dispatchInputEvent();\n }\n\n private _dispatchChangeEvent(): void {\n /**\n * @type {Event} - Standard DOM event with the type `change`.\n * This event is dispatched when the radio is checked or unchecked.\n */\n this.dispatchEvent(new Event('change', { bubbles: true }));\n }\n\n private _dispatchInputEvent(): void {\n /**\n * @type {Event} - Standard DOM event with the type `input`.\n * This event is dispatched when the radio is checked or unchecked.\n */\n this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));\n }\n\n private _handleKeyDown(event: KeyboardEvent): void {\n const arrows = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];\n\n if (!arrows.includes(event.key)) {\n return;\n }\n\n event.preventDefault();\n\n const radios = this._getRadioGroup();\n\n if (radios.length < 2) {\n return;\n }\n\n const currentIndex = radios.indexOf(this);\n\n const nextIndex = currentIndex;\n let nextRadio: FhiRadio;\n\n if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') {\n nextRadio = radios[nextIndex === 0 ? radios.length - 1 : nextIndex - 1];\n } else {\n nextRadio = radios[nextIndex === radios.length - 1 ? 0 : nextIndex + 1];\n }\n\n nextRadio.focus();\n this.checked = false;\n nextRadio.checked = true;\n this._SetTabbableRadios();\n }\n\n render() {\n return html`\n <label>\n <div class=\"radio-container\">\n <input\n type=\"radio\"\n id=\"input-element\"\n name=\"${ifDefined(this.name)}\"\n value=\"${this.value}\"\n ?checked=${this.checked}\n ?disabled=${this.disabled}\n @change=${this._handleChange}\n @input=${this._handleInput}\n />\n <svg\n class=\"radio-dot\"\n viewBox=\"0 0 18 18\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <circle r=\"6\" cx=\"9\" cy=\"9\" />\n </svg>\n </div>\n ${this.label}\n </label>\n `;\n }\n\n static styles = css`\n :host {\n --fhi-radio-color: currentcolor;\n }\n\n :host {\n display: flex;\n align-items: center;\n width: max-content;\n\n label {\n display: flex;\n position: relative;\n gap: var(--fhi-spacing-050);\n color: var(--fhi-radio-color);\n font-family: var(--fhi-font-family-default);\n -webkit-font-smoothing: antialiased;\n font-size: var(--fhi-typography-body-medium-font-size);\n font-weight: var(--fhi-typography-body-medium-font-weight);\n line-height: var(--fhi-typography-body-medium-line-height);\n letter-spacing: var(--fhi-typography-body-medium-letter-spacing);\n }\n\n .radio-container {\n display: flex;\n position: relative;\n }\n\n input {\n appearance: none;\n margin: 0.125rem;\n width: var(--fhi-spacing-250);\n height: var(--fhi-spacing-250);\n background-color: var(--fhi-color-neutral-background-default);\n border: var(--fhi-dimension-border-width) solid\n var(--fhi-color-neutral-border-default);\n border-radius: var(--fhi-border-radius-full);\n transition: all var(--fhi-motion-ease-default)\n var(--fhi-motion-duration-quick);\n }\n\n .radio-dot {\n visibility: hidden;\n opacity: 0;\n transition: opacity var(--fhi-motion-ease-default)\n var(--fhi-motion-duration-quick);\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n height: 1.125rem;\n width: 1.125rem;\n }\n\n input:checked {\n border-width: var(--fhi-dimension-border-width-active);\n ~ .radio-dot {\n circle {\n fill: var(--fhi-color-neutral-border-default);\n }\n visibility: visible;\n opacity: 1;\n }\n }\n }\n\n :host([disabled]) {\n opacity: var(--fhi-opacity-disabled);\n label,\n input {\n cursor: not-allowed;\n }\n }\n\n :host(:not(:disabled)) {\n input:hover:not(:checked) {\n border-color: var(--fhi-color-accent-border-strong);\n background-color: var(--fhi-color-accent-background-subtle);\n }\n\n input:active:not(:checked) {\n border-color: var(--fhi-color-accent-border-strong);\n background-color: var(--fhi-color-accent-surface-default);\n outline: var(--fhi-dimension-border-width-focus) solid\n var(--fhi-color-accent-surface-hover);\n }\n\n &:host([status='error']) {\n input {\n border-color: var(--fhi-color-danger-border-default);\n background-color: var(--fhi-color-danger-background-default);\n }\n\n input:checked {\n ~ .radio-dot {\n circle {\n fill: var(--fhi-color-danger-border-default);\n }\n }\n }\n\n input:hover:not(:checked) {\n border-color: var(--fhi-color-danger-border-strong);\n background-color: var(--fhi-color-danger-background-subtle);\n }\n\n input:active:not(:checked) {\n border-color: var(--fhi-color-danger-border-strong);\n background-color: var(--fhi-color-danger-surface-default);\n outline-color: var(--fhi-color-danger-surface-hover);\n }\n }\n }\n `;\n}\n"],"mappings":"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"}
package/fhi-title.js CHANGED
@@ -1,29 +1,41 @@
1
1
  import { a as e, d as t, o as n, s as r, t as i, u as a } from "./decorate-DFXIek-k.js";
2
- import { t as o } from "./unsafe-html-CBTN3162.js";
2
+ import { t as o } from "./if-defined-Dl-W5B5_.js";
3
+ import { t as s } from "./unsafe-html-CBTN3162.js";
3
4
  //#region src/components/typography/fhi-title/fhi-title.component.ts
4
- var s = "fhi-title", c = class extends r {
5
+ var c = "fhi-title", l = class extends r {
5
6
  constructor(...e) {
6
- super(...e), this.size = "medium", this.color = "currentcolor";
7
+ super(...e), this.size = "medium";
7
8
  }
8
9
  updated(e) {
9
10
  if (super.updated(e), e.has("level")) {
10
11
  let e = Number(this.level);
11
12
  (isNaN(e) || e < 1 || e > 6) && console.error(/* @__PURE__ */ TypeError(`The level property must be set to a number between 1 and 6. Current value: ${this.level}`));
12
13
  }
13
- e.has("color") && (this.style.color = typeof this.color == "string" ? this.color : "currentcolor");
14
14
  }
15
15
  render() {
16
- return a`${o(`
16
+ let e = `
17
17
  <h${this.level} class="title">
18
18
  <slot></slot>
19
19
  </h${this.level}>
20
- `)}`;
20
+ `;
21
+ return a`
22
+ <div style=${o(this.color ? `color: ${this.color}` : void 0)}>
23
+ ${s(e)}
24
+ </div>
25
+ `;
21
26
  }
22
27
  static {
23
28
  this.styles = t`
24
29
  :host {
30
+ --fhi-title-color: unset;
31
+ }
32
+
33
+ :host {
34
+ --fhi-title-color: currentcolor;
35
+
25
36
  display: block;
26
37
  contain: layout;
38
+ color: var(--fhi-title-color);
27
39
  .title {
28
40
  font-family: var(--fhi-font-family-default);
29
41
  -webkit-font-smoothing: antialiased;
@@ -63,8 +75,8 @@ var s = "fhi-title", c = class extends r {
63
75
  i([e({
64
76
  type: String,
65
77
  reflect: !0
66
- })], c.prototype, "size", void 0), i([e({ type: String })], c.prototype, "color", void 0), i([e({ type: Number })], c.prototype, "level", void 0), c = i([n(s)], c);
78
+ })], l.prototype, "size", void 0), i([e({ type: String })], l.prototype, "color", void 0), i([e({ type: Number })], l.prototype, "level", void 0), l = i([n(c)], l);
67
79
  //#endregion
68
- export { c as FhiTitle, s as FhiTitleSelector };
80
+ export { l as FhiTitle, c as FhiTitleSelector };
69
81
 
70
82
  //# sourceMappingURL=fhi-title.js.map