@folkehelseinstituttet/designsystem 0.38.2 → 0.38.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/custom-elements.json +1 -1
  2. package/fhi-data-table-cell.js.map +1 -1
  3. package/fhi-data-table-cell.manifest.json +1 -1
  4. package/fhi-data-table-row.js.map +1 -1
  5. package/fhi-data-table-row.manifest.json +1 -1
  6. package/fhi-data-table.js.map +1 -1
  7. package/fhi-data-table.manifest.json +1 -1
  8. package/fhi-tag.js +40 -62
  9. package/fhi-tag.js.map +1 -1
  10. package/fhi-tag.manifest.json +1 -1
  11. package/package.json +1 -1
  12. package/web-types.json +24 -6
package/fhi-data-table-cell.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"fhi-data-table-cell.js","sources":["../../src/components/data-table/fhi-data-table-cell/fhi-data-table-cell.component.ts"],"sourcesContent":["import { html, css, LitElement, PropertyValues } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nexport const FhiDataTableCellSelector = 'fhi-data-table-cell';\n\n/**\n * ## FHI Table Cell\n *\n * {@link https://designsystem.fhi.no/?path=/docs/komponenter-data-table--docs}\n *\n * The `<fhi-data-table-cell>` component is an implementation of a table cell according to the FHI Design System guidelines.\n * It allows users to properly display data within a `<fhi-data-table-row>`.\n *\n * The `<fhi-table-cell>` component does not use the native HTML `<td>` or `<th>` elements. Instead, it relies on CSS Grid to achieve the desired layout and styling.\n *\n * @tag fhi-data-table-cell\n * @element fhi-data-table-cell\n */\n@customElement(FhiDataTableCellSelector)\nexport class FhiDataTableCell extends LitElement {\n /**\n * Defines the variant of the table cell, which can be either 'header' or 'body'. This determines the styling and role of the cell within the table.\n * @type {'header' | 'body'}\n */\n @property({ type: String, reflect: true })\n variant: 'header' | 'body' = 'body';\n\n protected update(changedProperties: PropertyValues): void {\n if (changedProperties.has('variant')) {\n this.role = this.variant === 'header' ? 'columnheader' : 'cell';\n }\n\n super.update(changedProperties);\n }\n\n render() {\n return html`\n <div class=\"cell-content\">\n <slot></slot>\n </div>\n `;\n }\n\n static styles = css`\n :host {\n --fhi-data-table-cell-justify-content: unset;\n --fhi-data-table-cell-align-items: unset;\n\n --fhi-data-table-cell-border-style: unset;\n --fhi-data-table-cell-border-width: unset;\n --fhi-data-table-cell-border-color: unset;\n }\n\n :host {\n --fhi-data-table-cell-justify-content: start;\n --fhi-data-table-cell-align-items: center;\n\n display: table-cell;\n vertical-align: middle;\n\n padding: var(--fhi-spacing-150);\n color: var(--fhi-color-neutral-text-default);\n\n border-style: var(--fhi-data-table-cell-border-style);\n border-width: var(--fhi-data-table-cell-border-width);\n border-color: var(--fhi-data-table-cell-border-color);\n\n .cell-content {\n display: flex;\n align-items: var(--fhi-data-table-cell-align-items);\n justify-content: var(--fhi-data-table-cell-justify-content);\n }\n }\n\n :host([variant='body']) {\n letter-spacing: var(--fhi-typography-body-medium-letter-spacing);\n\n font: var(--fhi-typography-body-medium-font-weight)\n var(--fhi-typography-body-medium-font-size) /\n var(--fhi-typography-body-medium-line-height)\n var(--fhi-font-family-default);\n }\n\n :host([variant='header']) {\n letter-spacing: var(--fhi-typography-title-medium-letter-spacing);\n\n font: var(--fhi-typography-title-medium-font-weight)\n var(--fhi-typography-title-medium-font-size) /\n var(--fhi-typography-title-medium-line-height)\n var(--fhi-font-family-default);\n }\n `;\n}\n"],"names":["FhiDataTableCellSelector","FhiDataTableCell","LitElement","changedProperties","html","css","__decorateClass","property","customElement"],"mappings":";;;;;;AAGO,MAAMA,IAA2B;AAgBjC,IAAMC,IAAN,cAA+BC,EAAW;AAAA,EAA1C,cAAA;AAAA,UAAA,GAAA,SAAA,GAML,KAAA,UAA6B;AAAA,EAAA;AAAA,EAEnB,OAAOC,GAAyC;AACxD,IAAIA,EAAkB,IAAI,SAAS,MACjC,KAAK,OAAO,KAAK,YAAY,WAAW,iBAAiB,SAG3D,MAAM,OAAOA,CAAiB;AAAA,EAChC;AAAA,EAEA,SAAS;AACP,WAAOC;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,EAKT;AAmDF;AAzEaH,EAwBJ,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;AAlBhBC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAL9BN,EAMX,WAAA,WAAA,CAAA;AANWA,IAANK,EAAA;AAAA,EADNE,EAAcR,CAAwB;AAAA,GAC1BC,CAAA;"}
1
+ {"version":3,"file":"fhi-data-table-cell.js","sources":["../../src/components/data-table/fhi-data-table-cell/fhi-data-table-cell.component.ts"],"sourcesContent":["import { html, css, LitElement, PropertyValues } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nexport const FhiDataTableCellSelector = 'fhi-data-table-cell';\n\n/**\n * ## FHI Table Cell\n *\n * {@link https://designsystem.fhi.no/?path=/docs/komponenter-data-table--docs}\n *\n * The `<fhi-data-table-cell>` component is an implementation of a table cell according to the FHI Design System guidelines.\n * It allows users to properly display data within a `<fhi-data-table-row>`.\n *\n * The `<fhi-data-table-cell>` component does not use the native HTML `<td>` or `<th>` elements. Instead, it relies on CSS `display: table-cell` to achieve the desired layout and styling.\n *\n * @tag fhi-data-table-cell\n * @element fhi-data-table-cell\n *\n * @slot - The content of the table cell, which can be any valid HTML content such as text, images, or other elements.\n */\n@customElement(FhiDataTableCellSelector)\nexport class FhiDataTableCell extends LitElement {\n /**\n * Defines the variant of the table cell, which can be either 'header' or 'body'. This determines the styling and role of the cell within the table.\n * @type {'header' | 'body'}\n */\n @property({ type: String, reflect: true })\n variant: 'header' | 'body' = 'body';\n\n protected update(changedProperties: PropertyValues): void {\n if (changedProperties.has('variant')) {\n this.role = this.variant === 'header' ? 'columnheader' : 'cell';\n }\n\n super.update(changedProperties);\n }\n\n render() {\n return html`\n <div class=\"cell-content\">\n <slot></slot>\n </div>\n `;\n }\n\n static styles = css`\n :host {\n --fhi-data-table-cell-justify-content: unset;\n --fhi-data-table-cell-align-items: unset;\n\n --fhi-data-table-cell-border-style: unset;\n --fhi-data-table-cell-border-width: unset;\n --fhi-data-table-cell-border-color: unset;\n }\n\n :host {\n --fhi-data-table-cell-justify-content: start;\n --fhi-data-table-cell-align-items: center;\n\n display: table-cell;\n vertical-align: middle;\n\n padding: var(--fhi-spacing-150);\n color: var(--fhi-color-neutral-text-default);\n\n border-style: var(--fhi-data-table-cell-border-style);\n border-width: var(--fhi-data-table-cell-border-width);\n border-color: var(--fhi-data-table-cell-border-color);\n\n .cell-content {\n display: flex;\n align-items: var(--fhi-data-table-cell-align-items);\n justify-content: var(--fhi-data-table-cell-justify-content);\n }\n }\n\n :host([variant='body']) {\n letter-spacing: var(--fhi-typography-body-medium-letter-spacing);\n\n font: var(--fhi-typography-body-medium-font-weight)\n var(--fhi-typography-body-medium-font-size) /\n var(--fhi-typography-body-medium-line-height)\n var(--fhi-font-family-default);\n }\n\n :host([variant='header']) {\n letter-spacing: var(--fhi-typography-title-medium-letter-spacing);\n\n font: var(--fhi-typography-title-medium-font-weight)\n var(--fhi-typography-title-medium-font-size) /\n var(--fhi-typography-title-medium-line-height)\n var(--fhi-font-family-default);\n }\n `;\n}\n"],"names":["FhiDataTableCellSelector","FhiDataTableCell","LitElement","changedProperties","html","css","__decorateClass","property","customElement"],"mappings":";;;;;;AAGO,MAAMA,IAA2B;AAkBjC,IAAMC,IAAN,cAA+BC,EAAW;AAAA,EAA1C,cAAA;AAAA,UAAA,GAAA,SAAA,GAML,KAAA,UAA6B;AAAA,EAAA;AAAA,EAEnB,OAAOC,GAAyC;AACxD,IAAIA,EAAkB,IAAI,SAAS,MACjC,KAAK,OAAO,KAAK,YAAY,WAAW,iBAAiB,SAG3D,MAAM,OAAOA,CAAiB;AAAA,EAChC;AAAA,EAEA,SAAS;AACP,WAAOC;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,EAKT;AAmDF;AAzEaH,EAwBJ,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;AAlBhBC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAL9BN,EAMX,WAAA,WAAA,CAAA;AANWA,IAANK,EAAA;AAAA,EADNE,EAAcR,CAAwB;AAAA,GAC1BC,CAAA;"}
package/fhi-data-table-cell.manifest.json CHANGED
@@ -1 +1 @@
1
- {"kind":"javascript-module","path":"src/components/data-table/fhi-data-table-cell/fhi-data-table-cell.component.ts","declarations":[{"kind":"class","description":"## FHI Table Cell\n\nhttps://designsystem.fhi.no/?path=/docs/komponenter-data-table--docs\n\nThe `<fhi-data-table-cell>` component is an implementation of a table cell according to the FHI Design System guidelines.\nIt allows users to properly display data within a `<fhi-data-table-row>`.\n\nThe `<fhi-table-cell>` component does not use the native HTML `<td>` or `<th>` elements. Instead, it relies on CSS Grid to achieve the desired layout and styling.","name":"FhiDataTableCell","members":[{"kind":"field","name":"variant","type":{"text":"'header' | 'body'"},"default":"'body'","description":"Defines the variant of the table cell, which can be either 'header' or 'body'. This determines the styling and role of the cell within the table.","attribute":"variant","reflects":true}],"attributes":[{"name":"variant","type":{"text":"'header' | 'body'"},"default":"'body'","description":"Defines the variant of the table cell, which can be either 'header' or 'body'. This determines the styling and role of the cell within the table.","fieldName":"variant"}],"superclass":{"name":"LitElement","package":"lit"},"tagName":"fhi-data-table-cell","customElement":true},{"kind":"variable","name":"FhiDataTableCellSelector","type":{"text":"string"},"default":"'fhi-data-table-cell'"}]}
1
+ {"kind":"javascript-module","path":"src/components/data-table/fhi-data-table-cell/fhi-data-table-cell.component.ts","declarations":[{"kind":"class","description":"## FHI Table Cell\n\nhttps://designsystem.fhi.no/?path=/docs/komponenter-data-table--docs\n\nThe `<fhi-data-table-cell>` component is an implementation of a table cell according to the FHI Design System guidelines.\nIt allows users to properly display data within a `<fhi-data-table-row>`.\n\nThe `<fhi-data-table-cell>` component does not use the native HTML `<td>` or `<th>` elements. Instead, it relies on CSS `display: table-cell` to achieve the desired layout and styling.","name":"FhiDataTableCell","slots":[{"description":"The content of the table cell, which can be any valid HTML content such as text, images, or other elements.","name":""}],"members":[{"kind":"field","name":"variant","type":{"text":"'header' | 'body'"},"default":"'body'","description":"Defines the variant of the table cell, which can be either 'header' or 'body'. This determines the styling and role of the cell within the table.","attribute":"variant","reflects":true}],"attributes":[{"name":"variant","type":{"text":"'header' | 'body'"},"default":"'body'","description":"Defines the variant of the table cell, which can be either 'header' or 'body'. This determines the styling and role of the cell within the table.","fieldName":"variant"}],"superclass":{"name":"LitElement","package":"lit"},"tagName":"fhi-data-table-cell","customElement":true},{"kind":"variable","name":"FhiDataTableCellSelector","type":{"text":"string"},"default":"'fhi-data-table-cell'"}]}
package/fhi-data-table-row.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"fhi-data-table-row.js","sources":["../../../../node_modules/.pnpm/@lit+reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/query-assigned-elements.js","../../src/components/data-table/fhi-data-table-row/fhi-data-table-row.component.ts"],"sourcesContent":["import{desc as t}from\"./base.js\";\n/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */function o(o){return(e,n)=>{const{slot:r,selector:s}=o??{},c=\"slot\"+(r?`[name=${r}]`:\":not([name])\");return t(e,n,{get(){const t=this.renderRoot?.querySelector(c),e=t?.assignedElements(o)??[];return void 0===s?e:e.filter(t=>t.matches(s))}})}}export{o as queryAssignedElements};\n//# sourceMappingURL=query-assigned-elements.js.map\n","import { html, css, LitElement, PropertyValues } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { queryAssignedElements } from 'lit/decorators.js';\nimport { FhiDataTableCell } from '../fhi-data-table-cell/fhi-data-table-cell.component';\n\nexport const FhiDataTableRowSelector = 'fhi-data-table-row';\n\n/**\n * ## FHI Table Row\n *\n * {@link https://designsystem.fhi.no/?path=/docs/komponenter-data-table-row--docs}\n *\n * The `<fhi-data-table-row>` component is an implementation of a table row according to the FHI Design System guidelines.\n * It allows users to properly display data within a `<fhi-data-table>` using `<fhi-data-table-cell>` components.\n *\n * For various reasons, the `<fhi-data-table-row>` component does not use the native HTML `<tr>` element. Instead, it relies on CSS Grid to achieve the desired layout and styling.\n *\n * @tag fhi-data-table-row\n * @element fhi-data-table-row\n */\n@customElement(FhiDataTableRowSelector)\nexport class FhiDataTableRow extends LitElement {\n /**\n * Defines the variant of the table row, which can be either 'header' or 'body'. This determines the styling and role of the row within the table.\n * If the variant is set to 'header', all child `<fhi-data-table-cell>` elements will also be set to the 'header' variant to ensure consistent styling.\n * @type {'header' | 'body'}\n */\n @property({ type: String, reflect: true })\n variant: 'header' | 'body' = 'body';\n\n @queryAssignedElements()\n slotElements!: Array<HTMLElement>;\n\n connectedCallback(): void {\n super.connectedCallback();\n this.role = 'row';\n }\n\n protected update(changedProperties: PropertyValues): void {\n if (changedProperties.has('variant')) {\n if (this.variant !== 'body' && this.variant !== 'header') {\n this.variant = 'body';\n }\n }\n\n super.update(changedProperties);\n }\n\n protected updated(changedProperties: PropertyValues): void {\n if (changedProperties.has('variant')) {\n this.setCellVariants();\n }\n\n super.updated(changedProperties);\n }\n\n private handleSlotChange() {\n this.setCellVariants();\n }\n\n private setCellVariants() {\n this.slotElements.forEach(element => {\n if (element.tagName.toLowerCase() === 'fhi-data-table-cell') {\n const tableCell = element as FhiDataTableCell;\n\n if (tableCell.variant !== this.variant) {\n tableCell.variant = this.variant;\n }\n }\n });\n }\n\n render() {\n return html`<slot @slotchange=${this.handleSlotChange}></slot>`;\n }\n\n static styles = css`\n :host {\n --fhi-data-table-row-border-style: unset;\n --fhi-data-table-row-border-width: unset;\n --fhi-data-table-row-border-color: unset;\n\n --fhi-data-table-row-background: unset;\n }\n\n :host {\n display: table-row;\n background: var(--fhi-data-table-row-background);\n\n --fhi-data-table-row-border-style: none none solid none;\n --fhi-data-table-row-border-width: var(--fhi-dimension-border-width);\n --fhi-data-table-row-border-color: var(\n --fhi-color-neutral-surface-active\n );\n\n ::slotted(fhi-data-table-cell) {\n --fhi-data-table-cell-background: var(--fhi-data-table-row-background);\n --fhi-data-table-cell-border-style: var(\n --fhi-data-table-row-border-style\n );\n --fhi-data-table-cell-border-width: var(\n --fhi-data-table-row-border-width\n );\n --fhi-data-table-cell-border-color: var(\n --fhi-data-table-row-border-color\n );\n }\n }\n `;\n}\n"],"names":["o","e","n","s","c","t","_a","FhiDataTableRowSelector","FhiDataTableRow","LitElement","changedProperties","element","tableCell","html","css","__decorateClass","property","queryAssignedElements","customElement"],"mappings":";;AACA;AAAA;AAAA;AAAA;AAAA;AAIG,SAASA,EAAEA,GAAE;AAAC,SAAM,CAACC,GAAEC,MAAI;AAAC,UAAK,EAAC,MAAK,GAAE,UAASC,EAAC,IAAK,IAAGC,IAAE,UAAQ,IAAE,SAAS,CAAC,MAAI;AAAgB,WAAOC,EAAEJ,GAAEC,GAAE,EAAC,MAAK;;AAAC,YAAMG,KAAEC,IAAA,KAAK,eAAL,gBAAAA,EAAiB,cAAcF,IAAGH,KAAEI,KAAA,gBAAAA,EAAG,iBAAiBL,OAAI,CAAA;AAAG,aAAgBG,MAAT,SAAWF,IAAEA,EAAE,OAAO,CAAAI,MAAGA,EAAE,QAAQF,CAAC,CAAC;AAAA,IAAC,EAAC,CAAC;AAAA,EAAC;AAAC;;;;;;ACA7O,MAAMI,IAA0B;AAgBhC,IAAMC,IAAN,cAA8BC,EAAW;AAAA,EAAzC,cAAA;AAAA,UAAA,GAAA,SAAA,GAOL,KAAA,UAA6B;AAAA,EAAA;AAAA,EAK7B,oBAA0B;AACxB,UAAM,kBAAA,GACN,KAAK,OAAO;AAAA,EACd;AAAA,EAEU,OAAOC,GAAyC;AACxD,IAAIA,EAAkB,IAAI,SAAS,KAC7B,KAAK,YAAY,UAAU,KAAK,YAAY,aAC9C,KAAK,UAAU,SAInB,MAAM,OAAOA,CAAiB;AAAA,EAChC;AAAA,EAEU,QAAQA,GAAyC;AACzD,IAAIA,EAAkB,IAAI,SAAS,KACjC,KAAK,gBAAA,GAGP,MAAM,QAAQA,CAAiB;AAAA,EACjC;AAAA,EAEQ,mBAAmB;AACzB,SAAK,gBAAA;AAAA,EACP;AAAA,EAEQ,kBAAkB;AACxB,SAAK,aAAa,QAAQ,CAAAC,MAAW;AACnC,UAAIA,EAAQ,QAAQ,YAAA,MAAkB,uBAAuB;AAC3D,cAAMC,IAAYD;AAElB,QAAIC,EAAU,YAAY,KAAK,YAC7BA,EAAU,UAAU,KAAK;AAAA,MAE7B;AAAA,IACF,CAAC;AAAA,EACH;AAAA,EAEA,SAAS;AACP,WAAOC,sBAAyB,KAAK,gBAAgB;AAAA,EACvD;AAmCF;AAxFaL,EAuDJ,SAASM;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAhDhBC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAN9BR,EAOX,WAAA,WAAA,CAAA;AAGAO,EAAA;AAAA,EADCE,EAAA;AAAsB,GATZT,EAUX,WAAA,gBAAA,CAAA;AAVWA,IAANO,EAAA;AAAA,EADNG,EAAcX,CAAuB;AAAA,GACzBC,CAAA;","x_google_ignoreList":[0]}
1
+ {"version":3,"file":"fhi-data-table-row.js","sources":["../../../../node_modules/.pnpm/@lit+reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/query-assigned-elements.js","../../src/components/data-table/fhi-data-table-row/fhi-data-table-row.component.ts"],"sourcesContent":["import{desc as t}from\"./base.js\";\n/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */function o(o){return(e,n)=>{const{slot:r,selector:s}=o??{},c=\"slot\"+(r?`[name=${r}]`:\":not([name])\");return t(e,n,{get(){const t=this.renderRoot?.querySelector(c),e=t?.assignedElements(o)??[];return void 0===s?e:e.filter(t=>t.matches(s))}})}}export{o as queryAssignedElements};\n//# sourceMappingURL=query-assigned-elements.js.map\n","import { html, css, LitElement, PropertyValues } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { queryAssignedElements } from 'lit/decorators.js';\nimport { FhiDataTableCell } from '../fhi-data-table-cell/fhi-data-table-cell.component';\n\nexport const FhiDataTableRowSelector = 'fhi-data-table-row';\n\n/**\n * ## FHI Table Row\n *\n * {@link https://designsystem.fhi.no/?path=/docs/komponenter-data-table-row--docs}\n *\n * The `<fhi-data-table-row>` component is an implementation of a table row according to the FHI Design System guidelines.\n * It allows users to properly display data within a `<fhi-data-table>` using `<fhi-data-table-cell>` components.\n *\n * For various reasons, the `<fhi-data-table-row>` component does not use the native HTML `<tr>` element. Instead, it relies on CSS `display: table-row` to achieve the desired layout and styling.\n *\n * @tag fhi-data-table-row\n * @element fhi-data-table-row\n *\n * @slot - The content of the table row, consisting of `<fhi-data-table-cell>` elements which represent individual cells within the row.\n */\n@customElement(FhiDataTableRowSelector)\nexport class FhiDataTableRow extends LitElement {\n /**\n * Defines the variant of the table row, which can be either 'header' or 'body'. This determines the styling and role of the row within the table.\n * If the variant is set to 'header', all child `<fhi-data-table-cell>` elements will also be set to the 'header' variant to ensure consistent styling.\n * @type {'header' | 'body'}\n */\n @property({ type: String, reflect: true })\n variant: 'header' | 'body' = 'body';\n\n @queryAssignedElements()\n slotElements!: Array<HTMLElement>;\n\n connectedCallback(): void {\n super.connectedCallback();\n this.role = 'row';\n }\n\n protected update(changedProperties: PropertyValues): void {\n if (changedProperties.has('variant')) {\n if (this.variant !== 'body' && this.variant !== 'header') {\n this.variant = 'body';\n }\n }\n\n super.update(changedProperties);\n }\n\n protected updated(changedProperties: PropertyValues): void {\n if (changedProperties.has('variant')) {\n this.setCellVariants();\n }\n\n super.updated(changedProperties);\n }\n\n private handleSlotChange() {\n this.setCellVariants();\n }\n\n private setCellVariants() {\n this.slotElements.forEach(element => {\n if (element.tagName.toLowerCase() === 'fhi-data-table-cell') {\n const tableCell = element as FhiDataTableCell;\n\n if (tableCell.variant !== this.variant) {\n tableCell.variant = this.variant;\n }\n }\n });\n }\n\n render() {\n return html`<slot @slotchange=${this.handleSlotChange}></slot>`;\n }\n\n static styles = css`\n :host {\n --fhi-data-table-row-border-style: unset;\n --fhi-data-table-row-border-width: unset;\n --fhi-data-table-row-border-color: unset;\n\n --fhi-data-table-row-background: unset;\n }\n\n :host {\n display: table-row;\n background: var(--fhi-data-table-row-background);\n\n --fhi-data-table-row-border-style: none none solid none;\n --fhi-data-table-row-border-width: var(--fhi-dimension-border-width);\n --fhi-data-table-row-border-color: var(\n --fhi-color-neutral-surface-active\n );\n\n ::slotted(fhi-data-table-cell) {\n --fhi-data-table-cell-background: var(--fhi-data-table-row-background);\n --fhi-data-table-cell-border-style: var(\n --fhi-data-table-row-border-style\n );\n --fhi-data-table-cell-border-width: var(\n --fhi-data-table-row-border-width\n );\n --fhi-data-table-cell-border-color: var(\n --fhi-data-table-row-border-color\n );\n }\n }\n `;\n}\n"],"names":["o","e","n","s","c","t","_a","FhiDataTableRowSelector","FhiDataTableRow","LitElement","changedProperties","element","tableCell","html","css","__decorateClass","property","queryAssignedElements","customElement"],"mappings":";;AACA;AAAA;AAAA;AAAA;AAAA;AAIG,SAASA,EAAEA,GAAE;AAAC,SAAM,CAACC,GAAEC,MAAI;AAAC,UAAK,EAAC,MAAK,GAAE,UAASC,EAAC,IAAK,IAAGC,IAAE,UAAQ,IAAE,SAAS,CAAC,MAAI;AAAgB,WAAOC,EAAEJ,GAAEC,GAAE,EAAC,MAAK;;AAAC,YAAMG,KAAEC,IAAA,KAAK,eAAL,gBAAAA,EAAiB,cAAcF,IAAGH,KAAEI,KAAA,gBAAAA,EAAG,iBAAiBL,OAAI,CAAA;AAAG,aAAgBG,MAAT,SAAWF,IAAEA,EAAE,OAAO,CAAAI,MAAGA,EAAE,QAAQF,CAAC,CAAC;AAAA,IAAC,EAAC,CAAC;AAAA,EAAC;AAAC;;;;;;ACA7O,MAAMI,IAA0B;AAkBhC,IAAMC,IAAN,cAA8BC,EAAW;AAAA,EAAzC,cAAA;AAAA,UAAA,GAAA,SAAA,GAOL,KAAA,UAA6B;AAAA,EAAA;AAAA,EAK7B,oBAA0B;AACxB,UAAM,kBAAA,GACN,KAAK,OAAO;AAAA,EACd;AAAA,EAEU,OAAOC,GAAyC;AACxD,IAAIA,EAAkB,IAAI,SAAS,KAC7B,KAAK,YAAY,UAAU,KAAK,YAAY,aAC9C,KAAK,UAAU,SAInB,MAAM,OAAOA,CAAiB;AAAA,EAChC;AAAA,EAEU,QAAQA,GAAyC;AACzD,IAAIA,EAAkB,IAAI,SAAS,KACjC,KAAK,gBAAA,GAGP,MAAM,QAAQA,CAAiB;AAAA,EACjC;AAAA,EAEQ,mBAAmB;AACzB,SAAK,gBAAA;AAAA,EACP;AAAA,EAEQ,kBAAkB;AACxB,SAAK,aAAa,QAAQ,CAAAC,MAAW;AACnC,UAAIA,EAAQ,QAAQ,YAAA,MAAkB,uBAAuB;AAC3D,cAAMC,IAAYD;AAElB,QAAIC,EAAU,YAAY,KAAK,YAC7BA,EAAU,UAAU,KAAK;AAAA,MAE7B;AAAA,IACF,CAAC;AAAA,EACH;AAAA,EAEA,SAAS;AACP,WAAOC,sBAAyB,KAAK,gBAAgB;AAAA,EACvD;AAmCF;AAxFaL,EAuDJ,SAASM;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAhDhBC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAN9BR,EAOX,WAAA,WAAA,CAAA;AAGAO,EAAA;AAAA,EADCE,EAAA;AAAsB,GATZT,EAUX,WAAA,gBAAA,CAAA;AAVWA,IAANO,EAAA;AAAA,EADNG,EAAcX,CAAuB;AAAA,GACzBC,CAAA;","x_google_ignoreList":[0]}
package/fhi-data-table-row.manifest.json CHANGED
@@ -1 +1 @@
1
- {"kind":"javascript-module","path":"src/components/data-table/fhi-data-table-row/fhi-data-table-row.component.ts","declarations":[{"kind":"class","description":"## FHI Table Row\n\nhttps://designsystem.fhi.no/?path=/docs/komponenter-data-table-row--docs\n\nThe `<fhi-data-table-row>` component is an implementation of a table row according to the FHI Design System guidelines.\nIt allows users to properly display data within a `<fhi-data-table>` using `<fhi-data-table-cell>` components.\n\nFor various reasons, the `<fhi-data-table-row>` component does not use the native HTML `<tr>` element. Instead, it relies on CSS Grid to achieve the desired layout and styling.","name":"FhiDataTableRow","members":[{"kind":"method","name":"handleSlotChange","privacy":"private"},{"kind":"method","name":"setCellVariants","privacy":"private"},{"kind":"field","name":"slotElements","type":{"text":"Array<HTMLElement>"}},{"kind":"field","name":"variant","type":{"text":"'header' | 'body'"},"default":"'body'","description":"Defines the variant of the table row, which can be either 'header' or 'body'. This determines the styling and role of the row within the table.\nIf the variant is set to 'header', all child `<fhi-data-table-cell>` elements will also be set to the 'header' variant to ensure consistent styling.","attribute":"variant","reflects":true}],"attributes":[{"name":"variant","type":{"text":"'header' | 'body'"},"default":"'body'","description":"Defines the variant of the table row, which can be either 'header' or 'body'. This determines the styling and role of the row within the table.\nIf the variant is set to 'header', all child `<fhi-data-table-cell>` elements will also be set to the 'header' variant to ensure consistent styling.","fieldName":"variant"}],"superclass":{"name":"LitElement","package":"lit"},"tagName":"fhi-data-table-row","customElement":true},{"kind":"variable","name":"FhiDataTableRowSelector","type":{"text":"string"},"default":"'fhi-data-table-row'"}]}
1
+ {"kind":"javascript-module","path":"src/components/data-table/fhi-data-table-row/fhi-data-table-row.component.ts","declarations":[{"kind":"class","description":"## FHI Table Row\n\nhttps://designsystem.fhi.no/?path=/docs/komponenter-data-table-row--docs\n\nThe `<fhi-data-table-row>` component is an implementation of a table row according to the FHI Design System guidelines.\nIt allows users to properly display data within a `<fhi-data-table>` using `<fhi-data-table-cell>` components.\n\nFor various reasons, the `<fhi-data-table-row>` component does not use the native HTML `<tr>` element. Instead, it relies on CSS `display: table-row` to achieve the desired layout and styling.","name":"FhiDataTableRow","slots":[{"description":"The content of the table row, consisting of `<fhi-data-table-cell>` elements which represent individual cells within the row.","name":""}],"members":[{"kind":"method","name":"handleSlotChange","privacy":"private"},{"kind":"method","name":"setCellVariants","privacy":"private"},{"kind":"field","name":"slotElements","type":{"text":"Array<HTMLElement>"}},{"kind":"field","name":"variant","type":{"text":"'header' | 'body'"},"default":"'body'","description":"Defines the variant of the table row, which can be either 'header' or 'body'. This determines the styling and role of the row within the table.\nIf the variant is set to 'header', all child `<fhi-data-table-cell>` elements will also be set to the 'header' variant to ensure consistent styling.","attribute":"variant","reflects":true}],"attributes":[{"name":"variant","type":{"text":"'header' | 'body'"},"default":"'body'","description":"Defines the variant of the table row, which can be either 'header' or 'body'. This determines the styling and role of the row within the table.\nIf the variant is set to 'header', all child `<fhi-data-table-cell>` elements will also be set to the 'header' variant to ensure consistent styling.","fieldName":"variant"}],"superclass":{"name":"LitElement","package":"lit"},"tagName":"fhi-data-table-row","customElement":true},{"kind":"variable","name":"FhiDataTableRowSelector","type":{"text":"string"},"default":"'fhi-data-table-row'"}]}
package/fhi-data-table.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"fhi-data-table.js","sources":["../../src/components/data-table/fhi-data-table/fhi-data-table.component.ts"],"sourcesContent":["import { html, css, LitElement, PropertyValues } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport '../../fhi-grid/fhi-grid.component';\nimport '../../typography/fhi-body/fhi-body.component';\n\nexport const FhiDataTableSelector = 'fhi-data-table';\n\n/**\n * ## FHI Table\n *\n * {@link https://designsystem.fhi.no/?path=/docs/komponenter-data-table--docs}\n *\n * The `<fhi-data-table>` component is an implementation of a table according to the FHI Design System guidelines.\n * It allows users to display tabular data in a structured format using `<fhi-data-table-row>` and `<fhi-data-table-cell>` components.\n *\n * The `<fhi-data-table>` component does not use the native HTML `<table>` element. Instead, it relies on CSS Grid to achieve the desired layout and styling.\n *\n * Example usage:\n * ```html\n * <fhi-data-table caption=\"Example Table\" columns=\"2fr 1fr 1fr\">\n * <fhi-data-table-row variant=\"header\">\n * <fhi-data-table-cell>Header 1</fhi-data-table-cell>\n * <fhi-data-table-cell>Header 2</fhi-data-table-cell>\n * <fhi-data-table-cell>Header 3</fhi-data-table-cell>\n * </fhi-data-table-row>\n * <fhi-data-table-row>\n * <fhi-data-table-cell>Data 1</fhi-data-table-cell>\n * <fhi-data-table-cell>Data 2</fhi-data-table-cell>\n * <fhi-data-table-cell>Data 3</fhi-data-table-cell>\n * </fhi-data-table-row>\n * </fhi-data-table>\n * ```\n *\n * @tag fhi-data-table\n * @element fhi-data-table\n */\n@customElement(FhiDataTableSelector)\nexport class FhiDataTable extends LitElement {\n /**\n * The caption of the table. This should provide a brief description of the table's content.\n * @type {string}\n */\n @property({ type: String, reflect: true })\n caption?: string;\n\n /**\n * If set to true, the table will have alternating row colors (striped effect) for better readability.\n * @type {boolean}\n */\n @property({ type: Boolean, reflect: true })\n striped?: boolean;\n\n connectedCallback(): void {\n super.connectedCallback();\n\n this.role = 'table';\n }\n\n protected update(changedProperties: PropertyValues): void {\n super.update(changedProperties);\n }\n\n protected updated(changedProperties: PropertyValues): void {\n super.updated(changedProperties);\n\n if (changedProperties.has('caption')) {\n if (this.caption) {\n this.setAttribute('aria-label', this.caption);\n } else {\n this.removeAttribute('aria-label');\n }\n }\n }\n\n render() {\n return html`\n <div class=\"table-content\">\n <slot></slot>\n </div>\n ${this.caption\n ? html`<fhi-body class=\"caption\" size=\"small\"\n >${this.caption}</fhi-body\n >`\n : null}\n `;\n }\n\n static styles = css`\n :host {\n --fhi-data-table-border-color: unset;\n --fhi-data-table-border-radius: unset;\n\n --fhi-data-table-background: unset;\n }\n\n :host {\n --fhi-data-table-border-color: var(--fhi-color-neutral-surface-active);\n --fhi-data-table-border-radius: var(--fhi-border-radius-100);\n\n color: var(--fhi-color-neutral-text-default);\n\n .caption {\n display: block;\n padding: var(--fhi-spacing-150);\n }\n\n .table-content {\n display: table;\n width: 100%;\n overflow: hidden;\n border: var(--fhi-dimension-border-width) solid\n var(--fhi-data-table-border-color);\n border-radius: var(--fhi-data-table-border-radius);\n background: var(--fhi-data-table-background);\n }\n\n ::slotted(fhi-data-table-row:last-child) {\n --fhi-data-table-row-border-style: none none none none;\n --fhi-data-table-row-border-width: unset;\n --fhi-data-table-row-border-color: unset;\n }\n }\n\n :host([striped]) {\n ::slotted(fhi-data-table-row:nth-child(even)) {\n --fhi-data-table-row-background: var(\n --fhi-color-neutral-background-subtle\n );\n }\n\n ::slotted(fhi-data-table-row:nth-child(odd)) {\n --fhi-data-table-row-background: var(\n --fhi-color-neutral-background-default\n );\n }\n }\n `;\n}\n"],"names":["FhiDataTableSelector","FhiDataTable","LitElement","changedProperties","html","css","__decorateClass","property","customElement"],"mappings":";;;;;;;;AAMO,MAAMA,IAAuB;AAgC7B,IAAMC,IAAN,cAA2BC,EAAW;AAAA,EAe3C,oBAA0B;AACxB,UAAM,kBAAA,GAEN,KAAK,OAAO;AAAA,EACd;AAAA,EAEU,OAAOC,GAAyC;AACxD,UAAM,OAAOA,CAAiB;AAAA,EAChC;AAAA,EAEU,QAAQA,GAAyC;AACzD,UAAM,QAAQA,CAAiB,GAE3BA,EAAkB,IAAI,SAAS,MAC7B,KAAK,UACP,KAAK,aAAa,cAAc,KAAK,OAAO,IAE5C,KAAK,gBAAgB,YAAY;AAAA,EAGvC;AAAA,EAEA,SAAS;AACP,WAAOC;AAAAA;AAAAA;AAAAA;AAAAA,QAIH,KAAK,UACHA;AAAAA,eACK,KAAK,OAAO;AAAA,eAEjB,IAAI;AAAA;AAAA,EAEZ;AAoDF;AApGaH,EAkDJ,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;AA5ChBC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAL9BN,EAMX,WAAA,WAAA,CAAA;AAOAK,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAZ/BN,EAaX,WAAA,WAAA,CAAA;AAbWA,IAANK,EAAA;AAAA,EADNE,EAAcR,CAAoB;AAAA,GACtBC,CAAA;"}
1
+ {"version":3,"file":"fhi-data-table.js","sources":["../../src/components/data-table/fhi-data-table/fhi-data-table.component.ts"],"sourcesContent":["import { html, css, LitElement, PropertyValues } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport '../../fhi-grid/fhi-grid.component';\nimport '../../typography/fhi-body/fhi-body.component';\n\nexport const FhiDataTableSelector = 'fhi-data-table';\n\n/**\n * ## FHI Table\n *\n * {@link https://designsystem.fhi.no/?path=/docs/komponenter-data-table--docs}\n *\n * The `<fhi-data-table>` component is an implementation of a table according to the FHI Design System guidelines.\n * It allows users to display tabular data in a structured format using `<fhi-data-table-row>` and `<fhi-data-table-cell>` components.\n *\n * The `<fhi-data-table>` component does not use the native HTML `<table>` element. Instead, it relies on CSS `display: table` to achieve the desired layout and styling.\n *\n * Example usage:\n * ```html\n * <fhi-data-table caption=\"Example Table\">\n * <fhi-data-table-row variant=\"header\">\n * <fhi-data-table-cell>Header 1</fhi-data-table-cell>\n * <fhi-data-table-cell>Header 2</fhi-data-table-cell>\n * <fhi-data-table-cell>Header 3</fhi-data-table-cell>\n * </fhi-data-table-row>\n * <fhi-data-table-row>\n * <fhi-data-table-cell>Data 1</fhi-data-table-cell>\n * <fhi-data-table-cell>Data 2</fhi-data-table-cell>\n * <fhi-data-table-cell>Data 3</fhi-data-table-cell>\n * </fhi-data-table-row>\n * </fhi-data-table>\n * ```\n *\n * @tag fhi-data-table\n * @element fhi-data-table\n *\n * @slot - The content of the table, consisting of `<fhi-data-table-row>` elements which in turn contain `<fhi-data-table-cell>` elements.\n *\n */\n@customElement(FhiDataTableSelector)\nexport class FhiDataTable extends LitElement {\n /**\n * The caption of the table. This should provide a brief description of the table's content.\n * @type {string}\n */\n @property({ type: String, reflect: true })\n caption?: string;\n\n /**\n * If set to true, the table will have alternating row colors (striped effect) for better readability.\n * @type {boolean}\n */\n @property({ type: Boolean, reflect: true })\n striped?: boolean;\n\n connectedCallback(): void {\n super.connectedCallback();\n\n this.role = 'table';\n }\n\n protected update(changedProperties: PropertyValues): void {\n super.update(changedProperties);\n }\n\n protected updated(changedProperties: PropertyValues): void {\n super.updated(changedProperties);\n\n if (changedProperties.has('caption')) {\n if (this.caption) {\n this.setAttribute('aria-label', this.caption);\n } else {\n this.removeAttribute('aria-label');\n }\n }\n }\n\n render() {\n return html`\n <div class=\"table-content\">\n <slot></slot>\n </div>\n ${this.caption\n ? html`<fhi-body class=\"caption\" size=\"small\"\n >${this.caption}</fhi-body\n >`\n : null}\n `;\n }\n\n static styles = css`\n :host {\n --fhi-data-table-border-color: unset;\n --fhi-data-table-border-radius: unset;\n\n --fhi-data-table-background: unset;\n }\n\n :host {\n --fhi-data-table-border-color: var(--fhi-color-neutral-surface-active);\n --fhi-data-table-border-radius: var(--fhi-border-radius-100);\n\n color: var(--fhi-color-neutral-text-default);\n\n .caption {\n display: block;\n padding: var(--fhi-spacing-150);\n }\n\n .table-content {\n display: table;\n width: 100%;\n overflow: hidden;\n border: var(--fhi-dimension-border-width) solid\n var(--fhi-data-table-border-color);\n border-radius: var(--fhi-data-table-border-radius);\n background: var(--fhi-data-table-background);\n }\n\n ::slotted(fhi-data-table-row:last-child) {\n --fhi-data-table-row-border-style: none none none none;\n --fhi-data-table-row-border-width: unset;\n --fhi-data-table-row-border-color: unset;\n }\n }\n\n :host([striped]) {\n ::slotted(fhi-data-table-row:nth-child(even)) {\n --fhi-data-table-row-background: var(\n --fhi-color-neutral-background-subtle\n );\n }\n\n ::slotted(fhi-data-table-row:nth-child(odd)) {\n --fhi-data-table-row-background: var(\n --fhi-color-neutral-background-default\n );\n }\n }\n `;\n}\n"],"names":["FhiDataTableSelector","FhiDataTable","LitElement","changedProperties","html","css","__decorateClass","property","customElement"],"mappings":";;;;;;;;AAMO,MAAMA,IAAuB;AAmC7B,IAAMC,IAAN,cAA2BC,EAAW;AAAA,EAe3C,oBAA0B;AACxB,UAAM,kBAAA,GAEN,KAAK,OAAO;AAAA,EACd;AAAA,EAEU,OAAOC,GAAyC;AACxD,UAAM,OAAOA,CAAiB;AAAA,EAChC;AAAA,EAEU,QAAQA,GAAyC;AACzD,UAAM,QAAQA,CAAiB,GAE3BA,EAAkB,IAAI,SAAS,MAC7B,KAAK,UACP,KAAK,aAAa,cAAc,KAAK,OAAO,IAE5C,KAAK,gBAAgB,YAAY;AAAA,EAGvC;AAAA,EAEA,SAAS;AACP,WAAOC;AAAAA;AAAAA;AAAAA;AAAAA,QAIH,KAAK,UACHA;AAAAA,eACK,KAAK,OAAO;AAAA,eAEjB,IAAI;AAAA;AAAA,EAEZ;AAoDF;AApGaH,EAkDJ,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;AA5ChBC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAL9BN,EAMX,WAAA,WAAA,CAAA;AAOAK,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAZ/BN,EAaX,WAAA,WAAA,CAAA;AAbWA,IAANK,EAAA;AAAA,EADNE,EAAcR,CAAoB;AAAA,GACtBC,CAAA;"}
package/fhi-data-table.manifest.json CHANGED
@@ -1 +1 @@
1
- {"kind":"javascript-module","path":"src/components/data-table/fhi-data-table/fhi-data-table.component.ts","declarations":[{"kind":"class","description":"## FHI Table\n\nhttps://designsystem.fhi.no/?path=/docs/komponenter-data-table--docs\n\nThe `<fhi-data-table>` component is an implementation of a table according to the FHI Design System guidelines.\nIt allows users to display tabular data in a structured format using `<fhi-data-table-row>` and `<fhi-data-table-cell>` components.\n\nThe `<fhi-data-table>` component does not use the native HTML `<table>` element. Instead, it relies on CSS Grid to achieve the desired layout and styling.\n\nExample usage:\n```html\n<fhi-data-table caption=\"Example Table\" columns=\"2fr 1fr 1fr\">\n <fhi-data-table-row variant=\"header\">\n <fhi-data-table-cell>Header 1</fhi-data-table-cell>\n <fhi-data-table-cell>Header 2</fhi-data-table-cell>\n <fhi-data-table-cell>Header 3</fhi-data-table-cell>\n </fhi-data-table-row>\n <fhi-data-table-row>\n <fhi-data-table-cell>Data 1</fhi-data-table-cell>\n <fhi-data-table-cell>Data 2</fhi-data-table-cell>\n <fhi-data-table-cell>Data 3</fhi-data-table-cell>\n </fhi-data-table-row>\n</fhi-data-table>\n```","name":"FhiDataTable","members":[{"kind":"field","name":"caption","type":{"text":"string"},"description":"The caption of the table. This should provide a brief description of the table's content.","attribute":"caption","reflects":true},{"kind":"field","name":"striped","type":{"text":"boolean"},"description":"If set to true, the table will have alternating row colors (striped effect) for better readability.","attribute":"striped","reflects":true}],"attributes":[{"name":"caption","type":{"text":"string"},"description":"The caption of the table. This should provide a brief description of the table's content.","fieldName":"caption"},{"name":"striped","type":{"text":"boolean"},"description":"If set to true, the table will have alternating row colors (striped effect) for better readability.","fieldName":"striped"}],"superclass":{"name":"LitElement","package":"lit"},"tagName":"fhi-data-table","customElement":true},{"kind":"variable","name":"FhiDataTableSelector","type":{"text":"string"},"default":"'fhi-data-table'"}]}
1
+ {"kind":"javascript-module","path":"src/components/data-table/fhi-data-table/fhi-data-table.component.ts","declarations":[{"kind":"class","description":"## FHI Table\n\nhttps://designsystem.fhi.no/?path=/docs/komponenter-data-table--docs\n\nThe `<fhi-data-table>` component is an implementation of a table according to the FHI Design System guidelines.\nIt allows users to display tabular data in a structured format using `<fhi-data-table-row>` and `<fhi-data-table-cell>` components.\n\nThe `<fhi-data-table>` component does not use the native HTML `<table>` element. Instead, it relies on CSS `display: table` to achieve the desired layout and styling.\n\nExample usage:\n```html\n<fhi-data-table caption=\"Example Table\">\n <fhi-data-table-row variant=\"header\">\n <fhi-data-table-cell>Header 1</fhi-data-table-cell>\n <fhi-data-table-cell>Header 2</fhi-data-table-cell>\n <fhi-data-table-cell>Header 3</fhi-data-table-cell>\n </fhi-data-table-row>\n <fhi-data-table-row>\n <fhi-data-table-cell>Data 1</fhi-data-table-cell>\n <fhi-data-table-cell>Data 2</fhi-data-table-cell>\n <fhi-data-table-cell>Data 3</fhi-data-table-cell>\n </fhi-data-table-row>\n</fhi-data-table>\n```","name":"FhiDataTable","slots":[{"description":"The content of the table, consisting of `<fhi-data-table-row>` elements which in turn contain `<fhi-data-table-cell>` elements.","name":""}],"members":[{"kind":"field","name":"caption","type":{"text":"string"},"description":"The caption of the table. This should provide a brief description of the table's content.","attribute":"caption","reflects":true},{"kind":"field","name":"striped","type":{"text":"boolean"},"description":"If set to true, the table will have alternating row colors (striped effect) for better readability.","attribute":"striped","reflects":true}],"attributes":[{"name":"caption","type":{"text":"string"},"description":"The caption of the table. This should provide a brief description of the table's content.","fieldName":"caption"},{"name":"striped","type":{"text":"boolean"},"description":"If set to true, the table will have alternating row colors (striped effect) for better readability.","fieldName":"striped"}],"superclass":{"name":"LitElement","package":"lit"},"tagName":"fhi-data-table","customElement":true},{"kind":"variable","name":"FhiDataTableSelector","type":{"text":"string"},"default":"'fhi-data-table'"}]}
package/fhi-tag.js CHANGED
@@ -1,20 +1,20 @@
1
- import { i as s, n as d, a as f, b as u, t as g } from "./property-B2Ico5CW.js";
1
+ import { i as n, n as f, a as d, b as h, t as u } from "./property-B2Ico5CW.js";
2
2
  import "./fhi-body.js";
3
- var h = Object.defineProperty, v = Object.getOwnPropertyDescriptor, i = (c, t, e, r) => {
4
- for (var o = r > 1 ? void 0 : r ? v(t, e) : t, a = c.length - 1, l; a >= 0; a--)
5
- (l = c[a]) && (o = (r ? l(t, e, o) : l(o)) || o);
6
- return r && o && h(t, e, o), o;
3
+ var g = Object.defineProperty, p = Object.getOwnPropertyDescriptor, i = (c, a, e, r) => {
4
+ for (var o = r > 1 ? void 0 : r ? p(a, e) : a, t = c.length - 1, s; t >= 0; t--)
5
+ (s = c[t]) && (o = (r ? s(a, e, o) : s(o)) || o);
6
+ return r && o && g(a, e, o), o;
7
7
  };
8
- const b = "fhi-tag";
9
- let n = class extends f {
8
+ const v = "fhi-tag";
9
+ let l = class extends d {
10
10
  constructor() {
11
11
  super(...arguments), this.color = "neutral";
12
12
  }
13
13
  _handleSlotChange(c) {
14
14
  const e = c.target.assignedNodes().filter(
15
15
  (o) => {
16
- var a;
17
- return o.nodeType === Node.ELEMENT_NODE || o.nodeType === Node.TEXT_NODE && ((a = o.textContent) == null ? void 0 : a.trim());
16
+ var t;
17
+ return o.nodeType === Node.ELEMENT_NODE || o.nodeType === Node.TEXT_NODE && ((t = o.textContent) == null ? void 0 : t.trim());
18
18
  }
19
19
  );
20
20
  if (e.length === 0)
@@ -22,11 +22,11 @@ let n = class extends f {
22
22
  const r = e[0];
23
23
  if (r.nodeType === Node.ELEMENT_NODE && r.tagName.toLowerCase().startsWith("fhi-icon")) {
24
24
  const o = r;
25
- o.setAttribute("size", "1rem"), o.style.marginLeft = "var(--dimension-icon-offset)";
25
+ o.setAttribute("size", "1rem"), o.style.marginLeft = "calc(-1 * var(--fhi-spacing-050))";
26
26
  }
27
27
  }
28
28
  render() {
29
- return u`
29
+ return h`
30
30
  <fhi-body size="small">
31
31
  <slot
32
32
  class="slot-container"
@@ -36,51 +36,29 @@ let n = class extends f {
36
36
  `;
37
37
  }
38
38
  };
39
- n.styles = s`
39
+ l.styles = n`
40
40
  :host {
41
- --dimension-icon-offset: calc(-1 * var(--fhi-spacing-050));
42
- --dimension-border-radius: var(--fhi-border-radius-050);
43
- --dimension-gap: var(--fhi-spacing-050);
44
- --dimension-padding: 0 calc(var(--fhi-spacing-100) - 1px);
45
- --dimension-height: calc(var(--fhi-spacing-300) - 2px);
46
-
47
- --color-border: transparent;
48
-
49
- --color-neutral-text: var(--fhi-color-neutral-text-default);
50
- --color-neutral-background: var(--fhi-color-neutral-surface-default);
51
-
52
- --color-accent-text: var(--fhi-color-accent-text-default);
53
- --color-accent-background: var(--fhi-color-accent-surface-default);
54
-
55
- --color-success-text: var(--fhi-color-success-text-default);
56
- --color-success-background: var(--fhi-color-success-surface-default);
57
-
58
- --color-warning-text: var(--fhi-color-warning-text-default);
59
- --color-warning-background: var(--fhi-color-warning-surface-default);
60
-
61
- --color-danger-text: var(--fhi-color-danger-text-default);
62
- --color-danger-background: var(--fhi-color-danger-surface-default);
63
-
64
- --color-info-text: var(--fhi-color-info-text-default);
65
- --color-info-background: var(--fhi-color-info-surface-default);
41
+ --fhi-tag-border-color: unset;
66
42
  }
67
43
 
68
44
  :host {
45
+ --fhi-tag-border-color: transparent;
46
+
69
47
  display: flex;
70
48
  width: fit-content;
71
49
  align-items: center;
72
50
 
73
- border: 1px solid var(--color-border);
74
- border-radius: var(--dimension-border-radius);
51
+ border: 1px solid var(--fhi-tag-border-color);
52
+ border-radius: var(--fhi-border-radius-050);
75
53
 
76
- height: var(--dimension-height);
77
- padding: var(--dimension-padding);
54
+ height: calc(var(--fhi-spacing-300) - 2px);
55
+ padding: 0 calc(var(--fhi-spacing-100) - 1px);
78
56
 
79
57
  .slot-container {
80
58
  display: flex;
81
59
  align-items: center;
82
60
 
83
- gap: var(--dimension-gap);
61
+ gap: var(--fhi-spacing-050);
84
62
  }
85
63
 
86
64
  & fhi-body {
@@ -88,44 +66,44 @@ n.styles = s`
88
66
  }
89
67
  }
90
68
 
91
- :host {
92
- color: var(--color-neutral-text);
93
- background-color: var(--color-neutral-background);
69
+ :host([color='neutral']) {
70
+ color: var(--fhi-color-neutral-text-default);
71
+ background-color: var(--fhi-color-neutral-surface-default);
94
72
  }
95
73
 
96
74
  :host([color='accent']) {
97
- color: var(--color-accent-text);
98
- background-color: var(--color-accent-background);
75
+ color: var(--fhi-color-accent-text-default);
76
+ background-color: var(--fhi-color-accent-surface-default);
99
77
  }
100
78
 
101
79
  :host([color='success']) {
102
- color: var(--color-success-text);
103
- background-color: var(--color-success-background);
80
+ color: var(--fhi-color-success-text-default);
81
+ background-color: var(--fhi-color-success-surface-default);
104
82
  }
105
83
 
106
84
  :host([color='warning']) {
107
- color: var(--color-warning-text);
108
- background-color: var(--color-warning-background);
85
+ color: var(--fhi-color-warning-text-default);
86
+ background-color: var(--fhi-color-warning-surface-default);
109
87
  }
110
88
 
111
89
  :host([color='danger']) {
112
- color: var(--color-danger-text);
113
- background-color: var(--color-danger-background);
90
+ color: var(--fhi-color-danger-text-default);
91
+ background-color: var(--fhi-color-danger-surface-default);
114
92
  }
115
93
 
116
94
  :host([color='info']) {
117
- color: var(--color-info-text);
118
- background-color: var(--color-info-background);
95
+ color: var(--fhi-color-info-text-default);
96
+ background-color: var(--fhi-color-info-surface-default);
119
97
  }
120
98
  `;
121
99
  i([
122
- d({ type: String, reflect: !0 })
123
- ], n.prototype, "color", 2);
124
- n = i([
125
- g(b)
126
- ], n);
100
+ f({ type: String, reflect: !0 })
101
+ ], l.prototype, "color", 2);
102
+ l = i([
103
+ u(v)
104
+ ], l);
127
105
  export {
128
- n as FhiTag,
129
- b as FhiTagSelector
106
+ l as FhiTag,
107
+ v as FhiTagSelector
130
108
  };
131
109
  //# sourceMappingURL=fhi-tag.js.map
package/fhi-tag.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"fhi-tag.js","sources":["../../src/components/fhi-tag/fhi-tag.component.ts"],"sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport '../typography/fhi-body/fhi-body.component';\n\nexport const FhiTagSelector = 'fhi-tag';\n\n/**\n * ## FHI Tag\n *\n * {@link https://designsystem.fhi.no/?path=/docs/komponenter-tag--docs}\n *\n * The `<fhi-tag>` component is used to create non-interactive tags in accordance with the FHI Design System guidelines.\n *\n * @tag fhi-tag\n * @element fhi-tag\n *\n * @slot - The content of the tag. This should be pure text with, or without, an icon.\n */\n@customElement(FhiTagSelector)\nexport class FhiTag extends LitElement {\n /**\n * Sets the color of the tag.\n * @reflect\n * @type {'neutral' | 'accent' | 'success' | 'warning' | 'danger' | 'info'}\n */\n @property({ type: String, reflect: true }) color:\n | 'neutral'\n | 'accent'\n | 'success'\n | 'warning'\n | 'danger'\n | 'info' = 'neutral';\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 (\n firstNode.nodeType === Node.ELEMENT_NODE &&\n (firstNode as Element).tagName.toLowerCase().startsWith('fhi-icon')\n ) {\n const icon = firstNode as HTMLElement;\n\n icon.setAttribute('size', '1rem');\n icon.style.marginLeft = 'var(--dimension-icon-offset)';\n }\n }\n\n render() {\n return html`\n <fhi-body size=\"small\">\n <slot\n class=\"slot-container\"\n @slotchange=${this._handleSlotChange}\n ></slot>\n </fhi-body>\n `;\n }\n\n static styles = css`\n :host {\n --dimension-icon-offset: calc(-1 * var(--fhi-spacing-050));\n --dimension-border-radius: var(--fhi-border-radius-050);\n --dimension-gap: var(--fhi-spacing-050);\n --dimension-padding: 0 calc(var(--fhi-spacing-100) - 1px);\n --dimension-height: calc(var(--fhi-spacing-300) - 2px);\n\n --color-border: transparent;\n\n --color-neutral-text: var(--fhi-color-neutral-text-default);\n --color-neutral-background: var(--fhi-color-neutral-surface-default);\n\n --color-accent-text: var(--fhi-color-accent-text-default);\n --color-accent-background: var(--fhi-color-accent-surface-default);\n\n --color-success-text: var(--fhi-color-success-text-default);\n --color-success-background: var(--fhi-color-success-surface-default);\n\n --color-warning-text: var(--fhi-color-warning-text-default);\n --color-warning-background: var(--fhi-color-warning-surface-default);\n\n --color-danger-text: var(--fhi-color-danger-text-default);\n --color-danger-background: var(--fhi-color-danger-surface-default);\n\n --color-info-text: var(--fhi-color-info-text-default);\n --color-info-background: var(--fhi-color-info-surface-default);\n }\n\n :host {\n display: flex;\n width: fit-content;\n align-items: center;\n\n border: 1px solid var(--color-border);\n border-radius: var(--dimension-border-radius);\n\n height: var(--dimension-height);\n padding: var(--dimension-padding);\n\n .slot-container {\n display: flex;\n align-items: center;\n\n gap: var(--dimension-gap);\n }\n\n & fhi-body {\n color: inherit;\n }\n }\n\n :host {\n color: var(--color-neutral-text);\n background-color: var(--color-neutral-background);\n }\n\n :host([color='accent']) {\n color: var(--color-accent-text);\n background-color: var(--color-accent-background);\n }\n\n :host([color='success']) {\n color: var(--color-success-text);\n background-color: var(--color-success-background);\n }\n\n :host([color='warning']) {\n color: var(--color-warning-text);\n background-color: var(--color-warning-background);\n }\n\n :host([color='danger']) {\n color: var(--color-danger-text);\n background-color: var(--color-danger-background);\n }\n\n :host([color='info']) {\n color: var(--color-info-text);\n background-color: var(--color-info-background);\n }\n `;\n}\n"],"names":["FhiTagSelector","FhiTag","LitElement","event","validNodes","node","_a","firstNode","icon","html","css","__decorateClass","property","customElement"],"mappings":";;;;;;;AAIO,MAAMA,IAAiB;AAevB,IAAMC,IAAN,cAAqBC,EAAW;AAAA,EAAhC,cAAA;AAAA,UAAA,GAAA,SAAA,GAMsC,KAAA,QAM9B;AAAA,EAAA;AAAA,EAEL,kBAAkBC,GAAoB;AAG5C,UAAMC,IAFSD,EAAM,OAA2B,cAAA,EAEvB;AAAA,MACvB,CAAAE,MAAA;;AACE,eAAAA,EAAK,aAAa,KAAK,gBACtBA,EAAK,aAAa,KAAK,eAAaC,IAAAD,EAAK,gBAAL,gBAAAC,EAAkB;AAAA;AAAA,IAAK;AAGhE,QAAIF,EAAW,WAAW;AACxB;AAGF,UAAMG,IAAkBH,EAAW,CAAC;AAEpC,QACEG,EAAU,aAAa,KAAK,gBAC3BA,EAAsB,QAAQ,YAAA,EAAc,WAAW,UAAU,GAClE;AACA,YAAMC,IAAOD;AAEb,MAAAC,EAAK,aAAa,QAAQ,MAAM,GAChCA,EAAK,MAAM,aAAa;AAAA,IAC1B;AAAA,EACF;AAAA,EAEA,SAAS;AACP,WAAOC;AAAAA;AAAAA;AAAAA;AAAAA,wBAIa,KAAK,iBAAiB;AAAA;AAAA;AAAA;AAAA,EAI5C;AAoFF;AArIaR,EAmDJ,SAASS;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AA7C2BC,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAN9BX,EAMgC,WAAA,SAAA,CAAA;AANhCA,IAANU,EAAA;AAAA,EADNE,EAAcb,CAAc;AAAA,GAChBC,CAAA;"}
1
+ {"version":3,"file":"fhi-tag.js","sources":["../../src/components/fhi-tag/fhi-tag.component.ts"],"sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport '../typography/fhi-body/fhi-body.component';\n\nexport const FhiTagSelector = 'fhi-tag';\n\n/**\n * ## FHI Tag\n *\n * {@link https://designsystem.fhi.no/?path=/docs/komponenter-tag--docs}\n *\n * The `<fhi-tag>` component is used to create non-interactive tags in accordance with the FHI Design System guidelines.\n *\n * @tag fhi-tag\n * @element fhi-tag\n *\n * @slot - The content of the tag. This should be pure text with, or without, an icon.\n */\n@customElement(FhiTagSelector)\nexport class FhiTag extends LitElement {\n /**\n * Sets the color theme of the tag.\n * @reflect\n * @type {'neutral' | 'accent' | 'success' | 'warning' | 'danger' | 'info'}\n */\n @property({ type: String, reflect: true }) color:\n | 'neutral'\n | 'accent'\n | 'success'\n | 'warning'\n | 'danger'\n | 'info' = 'neutral';\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 (\n firstNode.nodeType === Node.ELEMENT_NODE &&\n (firstNode as Element).tagName.toLowerCase().startsWith('fhi-icon')\n ) {\n const icon = firstNode as HTMLElement;\n\n icon.setAttribute('size', '1rem');\n icon.style.marginLeft = 'calc(-1 * var(--fhi-spacing-050))';\n }\n }\n\n render() {\n return html`\n <fhi-body size=\"small\">\n <slot\n class=\"slot-container\"\n @slotchange=${this._handleSlotChange}\n ></slot>\n </fhi-body>\n `;\n }\n\n static styles = css`\n :host {\n --fhi-tag-border-color: unset;\n }\n\n :host {\n --fhi-tag-border-color: transparent;\n\n display: flex;\n width: fit-content;\n align-items: center;\n\n border: 1px solid var(--fhi-tag-border-color);\n border-radius: var(--fhi-border-radius-050);\n\n height: calc(var(--fhi-spacing-300) - 2px);\n padding: 0 calc(var(--fhi-spacing-100) - 1px);\n\n .slot-container {\n display: flex;\n align-items: center;\n\n gap: var(--fhi-spacing-050);\n }\n\n & fhi-body {\n color: inherit;\n }\n }\n\n :host([color='neutral']) {\n color: var(--fhi-color-neutral-text-default);\n background-color: var(--fhi-color-neutral-surface-default);\n }\n\n :host([color='accent']) {\n color: var(--fhi-color-accent-text-default);\n background-color: var(--fhi-color-accent-surface-default);\n }\n\n :host([color='success']) {\n color: var(--fhi-color-success-text-default);\n background-color: var(--fhi-color-success-surface-default);\n }\n\n :host([color='warning']) {\n color: var(--fhi-color-warning-text-default);\n background-color: var(--fhi-color-warning-surface-default);\n }\n\n :host([color='danger']) {\n color: var(--fhi-color-danger-text-default);\n background-color: var(--fhi-color-danger-surface-default);\n }\n\n :host([color='info']) {\n color: var(--fhi-color-info-text-default);\n background-color: var(--fhi-color-info-surface-default);\n }\n `;\n}\n"],"names":["FhiTagSelector","FhiTag","LitElement","event","validNodes","node","_a","firstNode","icon","html","css","__decorateClass","property","customElement"],"mappings":";;;;;;;AAIO,MAAMA,IAAiB;AAevB,IAAMC,IAAN,cAAqBC,EAAW;AAAA,EAAhC,cAAA;AAAA,UAAA,GAAA,SAAA,GAMsC,KAAA,QAM9B;AAAA,EAAA;AAAA,EAEL,kBAAkBC,GAAoB;AAG5C,UAAMC,IAFSD,EAAM,OAA2B,cAAA,EAEvB;AAAA,MACvB,CAAAE,MAAA;;AACE,eAAAA,EAAK,aAAa,KAAK,gBACtBA,EAAK,aAAa,KAAK,eAAaC,IAAAD,EAAK,gBAAL,gBAAAC,EAAkB;AAAA;AAAA,IAAK;AAGhE,QAAIF,EAAW,WAAW;AACxB;AAGF,UAAMG,IAAkBH,EAAW,CAAC;AAEpC,QACEG,EAAU,aAAa,KAAK,gBAC3BA,EAAsB,QAAQ,YAAA,EAAc,WAAW,UAAU,GAClE;AACA,YAAMC,IAAOD;AAEb,MAAAC,EAAK,aAAa,QAAQ,MAAM,GAChCA,EAAK,MAAM,aAAa;AAAA,IAC1B;AAAA,EACF;AAAA,EAEA,SAAS;AACP,WAAOC;AAAAA;AAAAA;AAAAA;AAAAA,wBAIa,KAAK,iBAAiB;AAAA;AAAA;AAAA;AAAA,EAI5C;AA8DF;AA/GaR,EAmDJ,SAASS;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AA7C2BC,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAN9BX,EAMgC,WAAA,SAAA,CAAA;AANhCA,IAANU,EAAA;AAAA,EADNE,EAAcb,CAAc;AAAA,GAChBC,CAAA;"}
package/fhi-tag.manifest.json CHANGED
@@ -1 +1 @@
1
- {"kind":"javascript-module","path":"src/components/fhi-tag/fhi-tag.component.ts","declarations":[{"kind":"class","description":"## FHI Tag\n\nhttps://designsystem.fhi.no/?path=/docs/komponenter-tag--docs\n\nThe `<fhi-tag>` component is used to create non-interactive tags in accordance with the FHI Design System guidelines.","name":"FhiTag","slots":[{"description":"The content of the tag. This should be pure text with, or without, an icon.","name":""}],"members":[{"kind":"method","name":"_handleSlotChange","privacy":"private","return":{"type":{"text":"void"}},"parameters":[{"name":"event","type":{"text":"Event"}}]},{"kind":"field","name":"color","type":{"text":"'neutral' | 'accent' | 'success' | 'warning' | 'danger' | 'info'"},"default":"'neutral'","description":"Sets the color of the tag.","reflects":true,"attribute":"color"}],"attributes":[{"name":"color","type":{"text":"'neutral' | 'accent' | 'success' | 'warning' | 'danger' | 'info'"},"default":"'neutral'","description":"Sets the color of the tag.","fieldName":"color"}],"superclass":{"name":"LitElement","package":"lit"},"tagName":"fhi-tag","customElement":true},{"kind":"variable","name":"FhiTagSelector","type":{"text":"string"},"default":"'fhi-tag'"}]}
1
+ {"kind":"javascript-module","path":"src/components/fhi-tag/fhi-tag.component.ts","declarations":[{"kind":"class","description":"## FHI Tag\n\nhttps://designsystem.fhi.no/?path=/docs/komponenter-tag--docs\n\nThe `<fhi-tag>` component is used to create non-interactive tags in accordance with the FHI Design System guidelines.","name":"FhiTag","slots":[{"description":"The content of the tag. This should be pure text with, or without, an icon.","name":""}],"members":[{"kind":"method","name":"_handleSlotChange","privacy":"private","return":{"type":{"text":"void"}},"parameters":[{"name":"event","type":{"text":"Event"}}]},{"kind":"field","name":"color","type":{"text":"'neutral' | 'accent' | 'success' | 'warning' | 'danger' | 'info'"},"default":"'neutral'","description":"Sets the color theme of the tag.","reflects":true,"attribute":"color"}],"attributes":[{"name":"color","type":{"text":"'neutral' | 'accent' | 'success' | 'warning' | 'danger' | 'info'"},"default":"'neutral'","description":"Sets the color theme of the tag.","fieldName":"color"}],"superclass":{"name":"LitElement","package":"lit"},"tagName":"fhi-tag","customElement":true},{"kind":"variable","name":"FhiTagSelector","type":{"text":"string"},"default":"'fhi-tag'"}]}
package/package.json CHANGED
@@ -1 +1 @@
1
- {"title":"FHI Designsystem","author":"FHI Designsystem team","name":"@folkehelseinstituttet/designsystem","version":"0.38.2","description":"The official design system for the Norwegian Institute of Public Health implemented as web components","keywords":["fhi","folkehelseinstituttet","components","design","system","framework","frontend","web-component","web component","ui"],"customElements":".temp/custom-elements.json","web-types":"./web-types.json","homepage":"https://github.com/FHIDev/Fhi.Designsystem","bugs":{"url":"https://github.com/FHIDev/Fhi.Designsystem/issues"},"repository":{"type":"git","url":"git+https://github.com/FHIDev/Fhi.Designsystem.git"},"license":"MIT","browserslist":["> 0.5%","last 2 versions"],"main":"index.js","type":"module","scripts":{"dev":"vite","build":"pnpm analyze && pnpm build:cdn && pnpm build:npm && pnpm build:github && pnpm clean","build:cdn":"tsc && cross-env DEPLOY_TARGET=cdn vite build","build:npm":"tsc && cross-env DEPLOY_TARGET=npm vite build","build:github":"tsc && cross-env DEPLOY_TARGET=github vite build","storybook":"storybook dev -p 6006","storybook:build":"pnpm analyze && storybook build","generate:icons":"node ./scripts/generate-icon-components.js --input ./src/assets/icons/ --output ./src/components/icons --clean-output-folder","test":"wtr ./**/*.test.ts --node-resolve --playwright --browsers chromium webkit","lint":"pnpm lint:eslint && pnpm lint:prettier","lint:eslint":"eslint \"**/*.{js,ts}\"","lint:prettier":"prettier \"**/*.js\" --check --ignore-path .gitignore","format":"pnpm format:eslint && pnpm format:prettier","format:eslint":"eslint \"**/*.{js,ts}\" --fix","format:prettier":"prettier \"**/*.js\" --write --ignore-path .gitignore","publish:npm":"pnpm build && cd dist/npm && npm publish","changelog:ci":"release-it --ci","analyze":"cem analyze --litelement","clean":"rimraf .temp","build-storybook":"storybook build"},"peerDependencies":{"lit":"~3.2.0"},"devDependencies":{"@custom-elements-manifest/analyzer":"^0.10.10","@esm-bundle/chai":"4.3.4-fix.0","@open-wc/testing":"~4.0.0","@playwright/test":"^1.57.0","@release-it/conventional-changelog":"~11.0.0","@storybook/addon-docs":"^10.2.8","@storybook/web-components-vite":"^10.2.8","@types/mocha":"~10.0.10","@types/node":"~22.5.5","@types/react":"^19.2.14","@wc-toolkit/cem-sorter":"^1.0.1","@wc-toolkit/type-parser":"^1.2.0","@web/dev-server":"~0.4.6","@web/dev-server-esbuild":"~1.0.4","@web/test-runner":"~0.18.3","@web/test-runner-playwright":"~0.11.1","cross-env":"7.0.3","custom-element-jet-brains-integration":"^1.7.0","lit":"~3.2.1","mocha":"~10.7.3","playwright":"^1.58.2","release-it":"~20.0.1","rimraf":"^6.1.2","storybook":"^10.2.8","storybook-design-token":"^5.0.0","svgo":"^3.3.2","vite":"~6.4.1","vite-plugin-static-copy":"~3.1.4"},"dependencies":{"@floating-ui/dom":"^1.7.4"},"pnpm":{"overrides":{"undici@<6.23.0":">=6.23.0","diff@>=5.0.0 <5.2.2":">=5.2.2","qs@>=6.7.0 <=6.14.1":">=6.14.2"}},"exports":{"./fhi-button":{"default":"./fhi-button.js","types":"./fhi-button.d.ts"},"./fhi-checkbox":{"default":"./fhi-checkbox.js","types":"./fhi-checkbox.d.ts"},"./fhi-date-input":{"default":"./fhi-date-input.js","types":"./fhi-date-input.d.ts"},"./fhi-flex":{"default":"./fhi-flex.js","types":"./fhi-flex.d.ts"},"./fhi-grid":{"default":"./fhi-grid.js","types":"./fhi-grid.d.ts"},"./fhi-modal-dialog":{"default":"./fhi-modal-dialog.js","types":"./fhi-modal-dialog.d.ts"},"./fhi-radio":{"default":"./fhi-radio.js","types":"./fhi-radio.d.ts"},"./fhi-tag":{"default":"./fhi-tag.js","types":"./fhi-tag.d.ts"},"./fhi-text-input":{"default":"./fhi-text-input.js","types":"./fhi-text-input.d.ts"},"./fhi-tooltip":{"default":"./fhi-tooltip.js","types":"./fhi-tooltip.d.ts"},"./fhi-icon-arrow-down-left":{"default":"./fhi-icon-arrow-down-left.js","types":"./fhi-icon-arrow-down-left.d.ts"},"./fhi-icon-arrow-down-right":{"default":"./fhi-icon-arrow-down-right.js","types":"./fhi-icon-arrow-down-right.d.ts"},"./fhi-icon-arrow-down":{"default":"./fhi-icon-arrow-down.js","types":"./fhi-icon-arrow-down.d.ts"},"./fhi-icon-arrow-left":{"default":"./fhi-icon-arrow-left.js","types":"./fhi-icon-arrow-left.d.ts"},"./fhi-icon-arrow-right-left":{"default":"./fhi-icon-arrow-right-left.js","types":"./fhi-icon-arrow-right-left.d.ts"},"./fhi-icon-arrow-right":{"default":"./fhi-icon-arrow-right.js","types":"./fhi-icon-arrow-right.d.ts"},"./fhi-icon-arrow-up-down":{"default":"./fhi-icon-arrow-up-down.js","types":"./fhi-icon-arrow-up-down.d.ts"},"./fhi-icon-arrow-up-left":{"default":"./fhi-icon-arrow-up-left.js","types":"./fhi-icon-arrow-up-left.d.ts"},"./fhi-icon-arrow-up-right":{"default":"./fhi-icon-arrow-up-right.js","types":"./fhi-icon-arrow-up-right.d.ts"},"./fhi-icon-arrow-up":{"default":"./fhi-icon-arrow-up.js","types":"./fhi-icon-arrow-up.d.ts"},"./fhi-icon-bell":{"default":"./fhi-icon-bell.js","types":"./fhi-icon-bell.d.ts"},"./fhi-icon-calendar-clock":{"default":"./fhi-icon-calendar-clock.js","types":"./fhi-icon-calendar-clock.d.ts"},"./fhi-icon-calendar":{"default":"./fhi-icon-calendar.js","types":"./fhi-icon-calendar.d.ts"},"./fhi-icon-chart-bar-stacked":{"default":"./fhi-icon-chart-bar-stacked.js","types":"./fhi-icon-chart-bar-stacked.d.ts"},"./fhi-icon-chart-bar":{"default":"./fhi-icon-chart-bar.js","types":"./fhi-icon-chart-bar.d.ts"},"./fhi-icon-chart-column-stacked":{"default":"./fhi-icon-chart-column-stacked.js","types":"./fhi-icon-chart-column-stacked.d.ts"},"./fhi-icon-chart-column":{"default":"./fhi-icon-chart-column.js","types":"./fhi-icon-chart-column.d.ts"},"./fhi-icon-chart-line":{"default":"./fhi-icon-chart-line.js","types":"./fhi-icon-chart-line.d.ts"},"./fhi-icon-chart-no-axes-combined":{"default":"./fhi-icon-chart-no-axes-combined.js","types":"./fhi-icon-chart-no-axes-combined.d.ts"},"./fhi-icon-chart-pie":{"default":"./fhi-icon-chart-pie.js","types":"./fhi-icon-chart-pie.d.ts"},"./fhi-icon-check":{"default":"./fhi-icon-check.js","types":"./fhi-icon-check.d.ts"},"./fhi-icon-chevron-down":{"default":"./fhi-icon-chevron-down.js","types":"./fhi-icon-chevron-down.d.ts"},"./fhi-icon-chevron-left":{"default":"./fhi-icon-chevron-left.js","types":"./fhi-icon-chevron-left.d.ts"},"./fhi-icon-chevron-right":{"default":"./fhi-icon-chevron-right.js","types":"./fhi-icon-chevron-right.d.ts"},"./fhi-icon-chevron-up":{"default":"./fhi-icon-chevron-up.js","types":"./fhi-icon-chevron-up.d.ts"},"./fhi-icon-chevrons-down":{"default":"./fhi-icon-chevrons-down.js","types":"./fhi-icon-chevrons-down.d.ts"},"./fhi-icon-chevrons-left":{"default":"./fhi-icon-chevrons-left.js","types":"./fhi-icon-chevrons-left.d.ts"},"./fhi-icon-chevrons-right":{"default":"./fhi-icon-chevrons-right.js","types":"./fhi-icon-chevrons-right.d.ts"},"./fhi-icon-chevrons-up":{"default":"./fhi-icon-chevrons-up.js","types":"./fhi-icon-chevrons-up.d.ts"},"./fhi-icon-circle-arrow-down":{"default":"./fhi-icon-circle-arrow-down.js","types":"./fhi-icon-circle-arrow-down.d.ts"},"./fhi-icon-circle-arrow-left":{"default":"./fhi-icon-circle-arrow-left.js","types":"./fhi-icon-circle-arrow-left.d.ts"},"./fhi-icon-circle-arrow-right":{"default":"./fhi-icon-circle-arrow-right.js","types":"./fhi-icon-circle-arrow-right.d.ts"},"./fhi-icon-circle-arrow-up":{"default":"./fhi-icon-circle-arrow-up.js","types":"./fhi-icon-circle-arrow-up.d.ts"},"./fhi-icon-circle-check-big":{"default":"./fhi-icon-circle-check-big.js","types":"./fhi-icon-circle-check-big.d.ts"},"./fhi-icon-circle-check":{"default":"./fhi-icon-circle-check.js","types":"./fhi-icon-circle-check.d.ts"},"./fhi-icon-circle-chevron-down":{"default":"./fhi-icon-circle-chevron-down.js","types":"./fhi-icon-circle-chevron-down.d.ts"},"./fhi-icon-circle-chevron-left":{"default":"./fhi-icon-circle-chevron-left.js","types":"./fhi-icon-circle-chevron-left.d.ts"},"./fhi-icon-circle-chevron-right":{"default":"./fhi-icon-circle-chevron-right.js","types":"./fhi-icon-circle-chevron-right.d.ts"},"./fhi-icon-circle-chevron-up":{"default":"./fhi-icon-circle-chevron-up.js","types":"./fhi-icon-circle-chevron-up.d.ts"},"./fhi-icon-circle-exclamation":{"default":"./fhi-icon-circle-exclamation.js","types":"./fhi-icon-circle-exclamation.d.ts"},"./fhi-icon-circle-info":{"default":"./fhi-icon-circle-info.js","types":"./fhi-icon-circle-info.d.ts"},"./fhi-icon-circle-minus":{"default":"./fhi-icon-circle-minus.js","types":"./fhi-icon-circle-minus.d.ts"},"./fhi-icon-circle-plus":{"default":"./fhi-icon-circle-plus.js","types":"./fhi-icon-circle-plus.d.ts"},"./fhi-icon-circle-question":{"default":"./fhi-icon-circle-question.js","types":"./fhi-icon-circle-question.d.ts"},"./fhi-icon-circle-x":{"default":"./fhi-icon-circle-x.js","types":"./fhi-icon-circle-x.d.ts"},"./fhi-icon-circle":{"default":"./fhi-icon-circle.js","types":"./fhi-icon-circle.d.ts"},"./fhi-icon-clock":{"default":"./fhi-icon-clock.js","types":"./fhi-icon-clock.d.ts"},"./fhi-icon-copy":{"default":"./fhi-icon-copy.js","types":"./fhi-icon-copy.d.ts"},"./fhi-icon-download":{"default":"./fhi-icon-download.js","types":"./fhi-icon-download.d.ts"},"./fhi-icon-ellipsis-vertical":{"default":"./fhi-icon-ellipsis-vertical.js","types":"./fhi-icon-ellipsis-vertical.d.ts"},"./fhi-icon-ellipsis":{"default":"./fhi-icon-ellipsis.js","types":"./fhi-icon-ellipsis.d.ts"},"./fhi-icon-exclamation":{"default":"./fhi-icon-exclamation.js","types":"./fhi-icon-exclamation.d.ts"},"./fhi-icon-expand":{"default":"./fhi-icon-expand.js","types":"./fhi-icon-expand.d.ts"},"./fhi-icon-external-link":{"default":"./fhi-icon-external-link.js","types":"./fhi-icon-external-link.d.ts"},"./fhi-icon-eye-off":{"default":"./fhi-icon-eye-off.js","types":"./fhi-icon-eye-off.d.ts"},"./fhi-icon-eye":{"default":"./fhi-icon-eye.js","types":"./fhi-icon-eye.d.ts"},"./fhi-icon-file-text":{"default":"./fhi-icon-file-text.js","types":"./fhi-icon-file-text.d.ts"},"./fhi-icon-file":{"default":"./fhi-icon-file.js","types":"./fhi-icon-file.d.ts"},"./fhi-icon-filter":{"default":"./fhi-icon-filter.js","types":"./fhi-icon-filter.d.ts"},"./fhi-icon-folder":{"default":"./fhi-icon-folder.js","types":"./fhi-icon-folder.d.ts"},"./fhi-icon-gear":{"default":"./fhi-icon-gear.js","types":"./fhi-icon-gear.d.ts"},"./fhi-icon-grid-9-dots":{"default":"./fhi-icon-grid-9-dots.js","types":"./fhi-icon-grid-9-dots.d.ts"},"./fhi-icon-grip-horizontal":{"default":"./fhi-icon-grip-horizontal.js","types":"./fhi-icon-grip-horizontal.d.ts"},"./fhi-icon-grip-vertical":{"default":"./fhi-icon-grip-vertical.js","types":"./fhi-icon-grip-vertical.d.ts"},"./fhi-icon-history":{"default":"./fhi-icon-history.js","types":"./fhi-icon-history.d.ts"},"./fhi-icon-info":{"default":"./fhi-icon-info.js","types":"./fhi-icon-info.d.ts"},"./fhi-icon-link-2-off":{"default":"./fhi-icon-link-2-off.js","types":"./fhi-icon-link-2-off.d.ts"},"./fhi-icon-link-2":{"default":"./fhi-icon-link-2.js","types":"./fhi-icon-link-2.d.ts"},"./fhi-icon-link":{"default":"./fhi-icon-link.js","types":"./fhi-icon-link.d.ts"},"./fhi-icon-lock-open":{"default":"./fhi-icon-lock-open.js","types":"./fhi-icon-lock-open.d.ts"},"./fhi-icon-lock":{"default":"./fhi-icon-lock.js","types":"./fhi-icon-lock.d.ts"},"./fhi-icon-log-in":{"default":"./fhi-icon-log-in.js","types":"./fhi-icon-log-in.d.ts"},"./fhi-icon-log-out":{"default":"./fhi-icon-log-out.js","types":"./fhi-icon-log-out.d.ts"},"./fhi-icon-mail":{"default":"./fhi-icon-mail.js","types":"./fhi-icon-mail.d.ts"},"./fhi-icon-map-pin":{"default":"./fhi-icon-map-pin.js","types":"./fhi-icon-map-pin.d.ts"},"./fhi-icon-menu":{"default":"./fhi-icon-menu.js","types":"./fhi-icon-menu.d.ts"},"./fhi-icon-message":{"default":"./fhi-icon-message.js","types":"./fhi-icon-message.d.ts"},"./fhi-icon-minus":{"default":"./fhi-icon-minus.js","types":"./fhi-icon-minus.d.ts"},"./fhi-icon-octagon-alert":{"default":"./fhi-icon-octagon-alert.js","types":"./fhi-icon-octagon-alert.d.ts"},"./fhi-icon-paperclip":{"default":"./fhi-icon-paperclip.js","types":"./fhi-icon-paperclip.d.ts"},"./fhi-icon-pencil":{"default":"./fhi-icon-pencil.js","types":"./fhi-icon-pencil.d.ts"},"./fhi-icon-phone":{"default":"./fhi-icon-phone.js","types":"./fhi-icon-phone.d.ts"},"./fhi-icon-pin-off":{"default":"./fhi-icon-pin-off.js","types":"./fhi-icon-pin-off.d.ts"},"./fhi-icon-pin":{"default":"./fhi-icon-pin.js","types":"./fhi-icon-pin.d.ts"},"./fhi-icon-plus":{"default":"./fhi-icon-plus.js","types":"./fhi-icon-plus.d.ts"},"./fhi-icon-printer":{"default":"./fhi-icon-printer.js","types":"./fhi-icon-printer.d.ts"},"./fhi-icon-question":{"default":"./fhi-icon-question.js","types":"./fhi-icon-question.d.ts"},"./fhi-icon-refresh":{"default":"./fhi-icon-refresh.js","types":"./fhi-icon-refresh.d.ts"},"./fhi-icon-rotate-left":{"default":"./fhi-icon-rotate-left.js","types":"./fhi-icon-rotate-left.d.ts"},"./fhi-icon-rotate-right":{"default":"./fhi-icon-rotate-right.js","types":"./fhi-icon-rotate-right.d.ts"},"./fhi-icon-search":{"default":"./fhi-icon-search.js","types":"./fhi-icon-search.d.ts"},"./fhi-icon-send":{"default":"./fhi-icon-send.js","types":"./fhi-icon-send.d.ts"},"./fhi-icon-share":{"default":"./fhi-icon-share.js","types":"./fhi-icon-share.d.ts"},"./fhi-icon-sheet":{"default":"./fhi-icon-sheet.js","types":"./fhi-icon-sheet.d.ts"},"./fhi-icon-square-check-big":{"default":"./fhi-icon-square-check-big.js","types":"./fhi-icon-square-check-big.d.ts"},"./fhi-icon-square-check":{"default":"./fhi-icon-square-check.js","types":"./fhi-icon-square-check.d.ts"},"./fhi-icon-square-pen":{"default":"./fhi-icon-square-pen.js","types":"./fhi-icon-square-pen.d.ts"},"./fhi-icon-square-x":{"default":"./fhi-icon-square-x.js","types":"./fhi-icon-square-x.d.ts"},"./fhi-icon-square":{"default":"./fhi-icon-square.js","types":"./fhi-icon-square.d.ts"},"./fhi-icon-trash":{"default":"./fhi-icon-trash.js","types":"./fhi-icon-trash.d.ts"},"./fhi-icon-triangle-alert":{"default":"./fhi-icon-triangle-alert.js","types":"./fhi-icon-triangle-alert.d.ts"},"./fhi-icon-upload":{"default":"./fhi-icon-upload.js","types":"./fhi-icon-upload.d.ts"},"./fhi-icon-user":{"default":"./fhi-icon-user.js","types":"./fhi-icon-user.d.ts"},"./fhi-icon-x":{"default":"./fhi-icon-x.js","types":"./fhi-icon-x.d.ts"},"./fhi-data-table":{"default":"./fhi-data-table.js","types":"./fhi-data-table.d.ts"},"./fhi-data-table-cell":{"default":"./fhi-data-table-cell.js","types":"./fhi-data-table-cell.d.ts"},"./fhi-data-table-row":{"default":"./fhi-data-table-row.js","types":"./fhi-data-table-row.d.ts"},"./fhi-body":{"default":"./fhi-body.js","types":"./fhi-body.d.ts"},"./fhi-display":{"default":"./fhi-display.js","types":"./fhi-display.d.ts"},"./fhi-headline":{"default":"./fhi-headline.js","types":"./fhi-headline.d.ts"},"./fhi-label":{"default":"./fhi-label.js","types":"./fhi-label.d.ts"},"./fhi-title":{"default":"./fhi-title.js","types":"./fhi-title.d.ts"},".":{"default":"./index.js"},"./theme/default.css":{"style":"./theme/default.css"},"./custom-elements.json":{"default":"./custom-elements.json"}}}
1
+ {"title":"FHI Designsystem","author":"FHI Designsystem team","name":"@folkehelseinstituttet/designsystem","version":"0.38.4","description":"The official design system for the Norwegian Institute of Public Health implemented as web components","keywords":["fhi","folkehelseinstituttet","components","design","system","framework","frontend","web-component","web component","ui"],"customElements":".temp/custom-elements.json","web-types":"./web-types.json","homepage":"https://github.com/FHIDev/Fhi.Designsystem","bugs":{"url":"https://github.com/FHIDev/Fhi.Designsystem/issues"},"repository":{"type":"git","url":"git+https://github.com/FHIDev/Fhi.Designsystem.git"},"license":"MIT","browserslist":["> 0.5%","last 2 versions"],"main":"index.js","type":"module","scripts":{"dev":"vite","build":"pnpm analyze && pnpm build:cdn && pnpm build:npm && pnpm build:github && pnpm clean","build:cdn":"tsc && cross-env DEPLOY_TARGET=cdn vite build","build:npm":"tsc && cross-env DEPLOY_TARGET=npm vite build","build:github":"tsc && cross-env DEPLOY_TARGET=github vite build","storybook":"storybook dev -p 6006","storybook:build":"pnpm analyze && storybook build","generate:icons":"node ./scripts/generate-icon-components.js --input ./src/assets/icons/ --output ./src/components/icons --clean-output-folder","test":"wtr ./**/*.test.ts --node-resolve --playwright --browsers chromium webkit","lint":"pnpm lint:eslint && pnpm lint:prettier","lint:eslint":"eslint \"**/*.{js,ts}\"","lint:prettier":"prettier \"**/*.js\" --check --ignore-path .gitignore","format":"pnpm format:eslint && pnpm format:prettier","format:eslint":"eslint \"**/*.{js,ts}\" --fix","format:prettier":"prettier \"**/*.js\" --write --ignore-path .gitignore","publish:npm":"pnpm build && cd dist/npm && npm publish","changelog:ci":"release-it --ci","analyze":"cem analyze --litelement","clean":"rimraf .temp","build-storybook":"storybook build"},"peerDependencies":{"lit":"~3.2.0"},"devDependencies":{"@custom-elements-manifest/analyzer":"^0.10.10","@esm-bundle/chai":"4.3.4-fix.0","@open-wc/testing":"~4.0.0","@playwright/test":"^1.57.0","@release-it/conventional-changelog":"~11.0.0","@storybook/addon-docs":"^10.2.8","@storybook/web-components-vite":"^10.2.8","@types/mocha":"~10.0.10","@types/node":"~22.5.5","@types/react":"^19.2.14","@wc-toolkit/cem-sorter":"^1.0.1","@wc-toolkit/type-parser":"^1.2.0","@web/dev-server":"~0.4.6","@web/dev-server-esbuild":"~1.0.4","@web/test-runner":"~0.18.3","@web/test-runner-playwright":"~0.11.1","cross-env":"7.0.3","custom-element-jet-brains-integration":"^1.7.0","lit":"~3.2.1","mocha":"~10.7.3","playwright":"^1.58.2","release-it":"~20.0.1","rimraf":"^6.1.2","storybook":"^10.2.8","storybook-design-token":"^5.0.0","svgo":"^3.3.2","vite":"~6.4.1","vite-plugin-static-copy":"~3.1.4"},"dependencies":{"@floating-ui/dom":"^1.7.4"},"pnpm":{"overrides":{"undici@<6.23.0":">=6.23.0","diff@>=5.0.0 <5.2.2":">=5.2.2","qs@>=6.7.0 <=6.14.1":">=6.14.2"}},"exports":{"./fhi-button":{"default":"./fhi-button.js","types":"./fhi-button.d.ts"},"./fhi-checkbox":{"default":"./fhi-checkbox.js","types":"./fhi-checkbox.d.ts"},"./fhi-date-input":{"default":"./fhi-date-input.js","types":"./fhi-date-input.d.ts"},"./fhi-flex":{"default":"./fhi-flex.js","types":"./fhi-flex.d.ts"},"./fhi-grid":{"default":"./fhi-grid.js","types":"./fhi-grid.d.ts"},"./fhi-modal-dialog":{"default":"./fhi-modal-dialog.js","types":"./fhi-modal-dialog.d.ts"},"./fhi-radio":{"default":"./fhi-radio.js","types":"./fhi-radio.d.ts"},"./fhi-tag":{"default":"./fhi-tag.js","types":"./fhi-tag.d.ts"},"./fhi-text-input":{"default":"./fhi-text-input.js","types":"./fhi-text-input.d.ts"},"./fhi-tooltip":{"default":"./fhi-tooltip.js","types":"./fhi-tooltip.d.ts"},"./fhi-icon-arrow-down-left":{"default":"./fhi-icon-arrow-down-left.js","types":"./fhi-icon-arrow-down-left.d.ts"},"./fhi-icon-arrow-down-right":{"default":"./fhi-icon-arrow-down-right.js","types":"./fhi-icon-arrow-down-right.d.ts"},"./fhi-icon-arrow-down":{"default":"./fhi-icon-arrow-down.js","types":"./fhi-icon-arrow-down.d.ts"},"./fhi-icon-arrow-left":{"default":"./fhi-icon-arrow-left.js","types":"./fhi-icon-arrow-left.d.ts"},"./fhi-icon-arrow-right-left":{"default":"./fhi-icon-arrow-right-left.js","types":"./fhi-icon-arrow-right-left.d.ts"},"./fhi-icon-arrow-right":{"default":"./fhi-icon-arrow-right.js","types":"./fhi-icon-arrow-right.d.ts"},"./fhi-icon-arrow-up-down":{"default":"./fhi-icon-arrow-up-down.js","types":"./fhi-icon-arrow-up-down.d.ts"},"./fhi-icon-arrow-up-left":{"default":"./fhi-icon-arrow-up-left.js","types":"./fhi-icon-arrow-up-left.d.ts"},"./fhi-icon-arrow-up-right":{"default":"./fhi-icon-arrow-up-right.js","types":"./fhi-icon-arrow-up-right.d.ts"},"./fhi-icon-arrow-up":{"default":"./fhi-icon-arrow-up.js","types":"./fhi-icon-arrow-up.d.ts"},"./fhi-icon-bell":{"default":"./fhi-icon-bell.js","types":"./fhi-icon-bell.d.ts"},"./fhi-icon-calendar-clock":{"default":"./fhi-icon-calendar-clock.js","types":"./fhi-icon-calendar-clock.d.ts"},"./fhi-icon-calendar":{"default":"./fhi-icon-calendar.js","types":"./fhi-icon-calendar.d.ts"},"./fhi-icon-chart-bar-stacked":{"default":"./fhi-icon-chart-bar-stacked.js","types":"./fhi-icon-chart-bar-stacked.d.ts"},"./fhi-icon-chart-bar":{"default":"./fhi-icon-chart-bar.js","types":"./fhi-icon-chart-bar.d.ts"},"./fhi-icon-chart-column-stacked":{"default":"./fhi-icon-chart-column-stacked.js","types":"./fhi-icon-chart-column-stacked.d.ts"},"./fhi-icon-chart-column":{"default":"./fhi-icon-chart-column.js","types":"./fhi-icon-chart-column.d.ts"},"./fhi-icon-chart-line":{"default":"./fhi-icon-chart-line.js","types":"./fhi-icon-chart-line.d.ts"},"./fhi-icon-chart-no-axes-combined":{"default":"./fhi-icon-chart-no-axes-combined.js","types":"./fhi-icon-chart-no-axes-combined.d.ts"},"./fhi-icon-chart-pie":{"default":"./fhi-icon-chart-pie.js","types":"./fhi-icon-chart-pie.d.ts"},"./fhi-icon-check":{"default":"./fhi-icon-check.js","types":"./fhi-icon-check.d.ts"},"./fhi-icon-chevron-down":{"default":"./fhi-icon-chevron-down.js","types":"./fhi-icon-chevron-down.d.ts"},"./fhi-icon-chevron-left":{"default":"./fhi-icon-chevron-left.js","types":"./fhi-icon-chevron-left.d.ts"},"./fhi-icon-chevron-right":{"default":"./fhi-icon-chevron-right.js","types":"./fhi-icon-chevron-right.d.ts"},"./fhi-icon-chevron-up":{"default":"./fhi-icon-chevron-up.js","types":"./fhi-icon-chevron-up.d.ts"},"./fhi-icon-chevrons-down":{"default":"./fhi-icon-chevrons-down.js","types":"./fhi-icon-chevrons-down.d.ts"},"./fhi-icon-chevrons-left":{"default":"./fhi-icon-chevrons-left.js","types":"./fhi-icon-chevrons-left.d.ts"},"./fhi-icon-chevrons-right":{"default":"./fhi-icon-chevrons-right.js","types":"./fhi-icon-chevrons-right.d.ts"},"./fhi-icon-chevrons-up":{"default":"./fhi-icon-chevrons-up.js","types":"./fhi-icon-chevrons-up.d.ts"},"./fhi-icon-circle-arrow-down":{"default":"./fhi-icon-circle-arrow-down.js","types":"./fhi-icon-circle-arrow-down.d.ts"},"./fhi-icon-circle-arrow-left":{"default":"./fhi-icon-circle-arrow-left.js","types":"./fhi-icon-circle-arrow-left.d.ts"},"./fhi-icon-circle-arrow-right":{"default":"./fhi-icon-circle-arrow-right.js","types":"./fhi-icon-circle-arrow-right.d.ts"},"./fhi-icon-circle-arrow-up":{"default":"./fhi-icon-circle-arrow-up.js","types":"./fhi-icon-circle-arrow-up.d.ts"},"./fhi-icon-circle-check-big":{"default":"./fhi-icon-circle-check-big.js","types":"./fhi-icon-circle-check-big.d.ts"},"./fhi-icon-circle-check":{"default":"./fhi-icon-circle-check.js","types":"./fhi-icon-circle-check.d.ts"},"./fhi-icon-circle-chevron-down":{"default":"./fhi-icon-circle-chevron-down.js","types":"./fhi-icon-circle-chevron-down.d.ts"},"./fhi-icon-circle-chevron-left":{"default":"./fhi-icon-circle-chevron-left.js","types":"./fhi-icon-circle-chevron-left.d.ts"},"./fhi-icon-circle-chevron-right":{"default":"./fhi-icon-circle-chevron-right.js","types":"./fhi-icon-circle-chevron-right.d.ts"},"./fhi-icon-circle-chevron-up":{"default":"./fhi-icon-circle-chevron-up.js","types":"./fhi-icon-circle-chevron-up.d.ts"},"./fhi-icon-circle-exclamation":{"default":"./fhi-icon-circle-exclamation.js","types":"./fhi-icon-circle-exclamation.d.ts"},"./fhi-icon-circle-info":{"default":"./fhi-icon-circle-info.js","types":"./fhi-icon-circle-info.d.ts"},"./fhi-icon-circle-minus":{"default":"./fhi-icon-circle-minus.js","types":"./fhi-icon-circle-minus.d.ts"},"./fhi-icon-circle-plus":{"default":"./fhi-icon-circle-plus.js","types":"./fhi-icon-circle-plus.d.ts"},"./fhi-icon-circle-question":{"default":"./fhi-icon-circle-question.js","types":"./fhi-icon-circle-question.d.ts"},"./fhi-icon-circle-x":{"default":"./fhi-icon-circle-x.js","types":"./fhi-icon-circle-x.d.ts"},"./fhi-icon-circle":{"default":"./fhi-icon-circle.js","types":"./fhi-icon-circle.d.ts"},"./fhi-icon-clock":{"default":"./fhi-icon-clock.js","types":"./fhi-icon-clock.d.ts"},"./fhi-icon-copy":{"default":"./fhi-icon-copy.js","types":"./fhi-icon-copy.d.ts"},"./fhi-icon-download":{"default":"./fhi-icon-download.js","types":"./fhi-icon-download.d.ts"},"./fhi-icon-ellipsis-vertical":{"default":"./fhi-icon-ellipsis-vertical.js","types":"./fhi-icon-ellipsis-vertical.d.ts"},"./fhi-icon-ellipsis":{"default":"./fhi-icon-ellipsis.js","types":"./fhi-icon-ellipsis.d.ts"},"./fhi-icon-exclamation":{"default":"./fhi-icon-exclamation.js","types":"./fhi-icon-exclamation.d.ts"},"./fhi-icon-expand":{"default":"./fhi-icon-expand.js","types":"./fhi-icon-expand.d.ts"},"./fhi-icon-external-link":{"default":"./fhi-icon-external-link.js","types":"./fhi-icon-external-link.d.ts"},"./fhi-icon-eye-off":{"default":"./fhi-icon-eye-off.js","types":"./fhi-icon-eye-off.d.ts"},"./fhi-icon-eye":{"default":"./fhi-icon-eye.js","types":"./fhi-icon-eye.d.ts"},"./fhi-icon-file-text":{"default":"./fhi-icon-file-text.js","types":"./fhi-icon-file-text.d.ts"},"./fhi-icon-file":{"default":"./fhi-icon-file.js","types":"./fhi-icon-file.d.ts"},"./fhi-icon-filter":{"default":"./fhi-icon-filter.js","types":"./fhi-icon-filter.d.ts"},"./fhi-icon-folder":{"default":"./fhi-icon-folder.js","types":"./fhi-icon-folder.d.ts"},"./fhi-icon-gear":{"default":"./fhi-icon-gear.js","types":"./fhi-icon-gear.d.ts"},"./fhi-icon-grid-9-dots":{"default":"./fhi-icon-grid-9-dots.js","types":"./fhi-icon-grid-9-dots.d.ts"},"./fhi-icon-grip-horizontal":{"default":"./fhi-icon-grip-horizontal.js","types":"./fhi-icon-grip-horizontal.d.ts"},"./fhi-icon-grip-vertical":{"default":"./fhi-icon-grip-vertical.js","types":"./fhi-icon-grip-vertical.d.ts"},"./fhi-icon-history":{"default":"./fhi-icon-history.js","types":"./fhi-icon-history.d.ts"},"./fhi-icon-info":{"default":"./fhi-icon-info.js","types":"./fhi-icon-info.d.ts"},"./fhi-icon-link-2-off":{"default":"./fhi-icon-link-2-off.js","types":"./fhi-icon-link-2-off.d.ts"},"./fhi-icon-link-2":{"default":"./fhi-icon-link-2.js","types":"./fhi-icon-link-2.d.ts"},"./fhi-icon-link":{"default":"./fhi-icon-link.js","types":"./fhi-icon-link.d.ts"},"./fhi-icon-lock-open":{"default":"./fhi-icon-lock-open.js","types":"./fhi-icon-lock-open.d.ts"},"./fhi-icon-lock":{"default":"./fhi-icon-lock.js","types":"./fhi-icon-lock.d.ts"},"./fhi-icon-log-in":{"default":"./fhi-icon-log-in.js","types":"./fhi-icon-log-in.d.ts"},"./fhi-icon-log-out":{"default":"./fhi-icon-log-out.js","types":"./fhi-icon-log-out.d.ts"},"./fhi-icon-mail":{"default":"./fhi-icon-mail.js","types":"./fhi-icon-mail.d.ts"},"./fhi-icon-map-pin":{"default":"./fhi-icon-map-pin.js","types":"./fhi-icon-map-pin.d.ts"},"./fhi-icon-menu":{"default":"./fhi-icon-menu.js","types":"./fhi-icon-menu.d.ts"},"./fhi-icon-message":{"default":"./fhi-icon-message.js","types":"./fhi-icon-message.d.ts"},"./fhi-icon-minus":{"default":"./fhi-icon-minus.js","types":"./fhi-icon-minus.d.ts"},"./fhi-icon-octagon-alert":{"default":"./fhi-icon-octagon-alert.js","types":"./fhi-icon-octagon-alert.d.ts"},"./fhi-icon-paperclip":{"default":"./fhi-icon-paperclip.js","types":"./fhi-icon-paperclip.d.ts"},"./fhi-icon-pencil":{"default":"./fhi-icon-pencil.js","types":"./fhi-icon-pencil.d.ts"},"./fhi-icon-phone":{"default":"./fhi-icon-phone.js","types":"./fhi-icon-phone.d.ts"},"./fhi-icon-pin-off":{"default":"./fhi-icon-pin-off.js","types":"./fhi-icon-pin-off.d.ts"},"./fhi-icon-pin":{"default":"./fhi-icon-pin.js","types":"./fhi-icon-pin.d.ts"},"./fhi-icon-plus":{"default":"./fhi-icon-plus.js","types":"./fhi-icon-plus.d.ts"},"./fhi-icon-printer":{"default":"./fhi-icon-printer.js","types":"./fhi-icon-printer.d.ts"},"./fhi-icon-question":{"default":"./fhi-icon-question.js","types":"./fhi-icon-question.d.ts"},"./fhi-icon-refresh":{"default":"./fhi-icon-refresh.js","types":"./fhi-icon-refresh.d.ts"},"./fhi-icon-rotate-left":{"default":"./fhi-icon-rotate-left.js","types":"./fhi-icon-rotate-left.d.ts"},"./fhi-icon-rotate-right":{"default":"./fhi-icon-rotate-right.js","types":"./fhi-icon-rotate-right.d.ts"},"./fhi-icon-search":{"default":"./fhi-icon-search.js","types":"./fhi-icon-search.d.ts"},"./fhi-icon-send":{"default":"./fhi-icon-send.js","types":"./fhi-icon-send.d.ts"},"./fhi-icon-share":{"default":"./fhi-icon-share.js","types":"./fhi-icon-share.d.ts"},"./fhi-icon-sheet":{"default":"./fhi-icon-sheet.js","types":"./fhi-icon-sheet.d.ts"},"./fhi-icon-square-check-big":{"default":"./fhi-icon-square-check-big.js","types":"./fhi-icon-square-check-big.d.ts"},"./fhi-icon-square-check":{"default":"./fhi-icon-square-check.js","types":"./fhi-icon-square-check.d.ts"},"./fhi-icon-square-pen":{"default":"./fhi-icon-square-pen.js","types":"./fhi-icon-square-pen.d.ts"},"./fhi-icon-square-x":{"default":"./fhi-icon-square-x.js","types":"./fhi-icon-square-x.d.ts"},"./fhi-icon-square":{"default":"./fhi-icon-square.js","types":"./fhi-icon-square.d.ts"},"./fhi-icon-trash":{"default":"./fhi-icon-trash.js","types":"./fhi-icon-trash.d.ts"},"./fhi-icon-triangle-alert":{"default":"./fhi-icon-triangle-alert.js","types":"./fhi-icon-triangle-alert.d.ts"},"./fhi-icon-upload":{"default":"./fhi-icon-upload.js","types":"./fhi-icon-upload.d.ts"},"./fhi-icon-user":{"default":"./fhi-icon-user.js","types":"./fhi-icon-user.d.ts"},"./fhi-icon-x":{"default":"./fhi-icon-x.js","types":"./fhi-icon-x.d.ts"},"./fhi-data-table":{"default":"./fhi-data-table.js","types":"./fhi-data-table.d.ts"},"./fhi-data-table-cell":{"default":"./fhi-data-table-cell.js","types":"./fhi-data-table-cell.d.ts"},"./fhi-data-table-row":{"default":"./fhi-data-table-row.js","types":"./fhi-data-table-row.d.ts"},"./fhi-body":{"default":"./fhi-body.js","types":"./fhi-body.d.ts"},"./fhi-display":{"default":"./fhi-display.js","types":"./fhi-display.d.ts"},"./fhi-headline":{"default":"./fhi-headline.js","types":"./fhi-headline.d.ts"},"./fhi-label":{"default":"./fhi-label.js","types":"./fhi-label.d.ts"},"./fhi-title":{"default":"./fhi-title.js","types":"./fhi-title.d.ts"},".":{"default":"./index.js"},"./theme/default.css":{"style":"./theme/default.css"},"./custom-elements.json":{"default":"./custom-elements.json"}}}
package/web-types.json CHANGED
@@ -1,14 +1,14 @@
1
1
  {
2
2
  "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
3
3
  "name": "@folkehelseinstituttet/designsystem",
4
- "version": "0.38.2",
4
+ "version": "0.38.4",
5
5
  "description-markup": "markdown",
6
6
  "contributions": {
7
7
  "html": {
8
8
  "elements": [
9
9
  {
10
10
  "name": "fhi-data-table-cell",
11
- "description": "## FHI Table Cell\n\nhttps://designsystem.fhi.no/?path=/docs/komponenter-data-table--docs\n\nThe `<fhi-data-table-cell>` component is an implementation of a table cell according to the FHI Design System guidelines.\nIt allows users to properly display data within a `<fhi-data-table-row>`.\n\nThe `<fhi-table-cell>` component does not use the native HTML `<td>` or `<th>` elements. Instead, it relies on CSS Grid to achieve the desired layout and styling.\n---\n",
11
+ "description": "## FHI Table Cell\n\nhttps://designsystem.fhi.no/?path=/docs/komponenter-data-table--docs\n\nThe `<fhi-data-table-cell>` component is an implementation of a table cell according to the FHI Design System guidelines.\nIt allows users to properly display data within a `<fhi-data-table-row>`.\n\nThe `<fhi-data-table-cell>` component does not use the native HTML `<td>` or `<th>` elements. Instead, it relies on CSS `display: table-cell` to achieve the desired layout and styling.\n---\n\n\n### **Slot Section:**\n - _default_ - The content of the table cell, which can be any valid HTML content such as text, images, or other elements.",
12
12
  "doc-url": "",
13
13
  "attributes": [
14
14
  {
@@ -17,6 +17,12 @@
17
17
  "value": { "type": "'header' | 'body'", "default": "'body'" }
18
18
  }
19
19
  ],
20
+ "slots": [
21
+ {
22
+ "name": "",
23
+ "description": "The content of the table cell, which can be any valid HTML content such as text, images, or other elements."
24
+ }
25
+ ],
20
26
  "events": [],
21
27
  "js": {
22
28
  "properties": [
@@ -31,7 +37,7 @@
31
37
  },
32
38
  {
33
39
  "name": "fhi-data-table-row",
34
- "description": "## FHI Table Row\n\nhttps://designsystem.fhi.no/?path=/docs/komponenter-data-table-row--docs\n\nThe `<fhi-data-table-row>` component is an implementation of a table row according to the FHI Design System guidelines.\nIt allows users to properly display data within a `<fhi-data-table>` using `<fhi-data-table-cell>` components.\n\nFor various reasons, the `<fhi-data-table-row>` component does not use the native HTML `<tr>` element. Instead, it relies on CSS Grid to achieve the desired layout and styling.\n---\n",
40
+ "description": "## FHI Table Row\n\nhttps://designsystem.fhi.no/?path=/docs/komponenter-data-table-row--docs\n\nThe `<fhi-data-table-row>` component is an implementation of a table row according to the FHI Design System guidelines.\nIt allows users to properly display data within a `<fhi-data-table>` using `<fhi-data-table-cell>` components.\n\nFor various reasons, the `<fhi-data-table-row>` component does not use the native HTML `<tr>` element. Instead, it relies on CSS `display: table-row` to achieve the desired layout and styling.\n---\n\n\n### **Slot Section:**\n - _default_ - The content of the table row, consisting of `<fhi-data-table-cell>` elements which represent individual cells within the row.",
35
41
  "doc-url": "",
36
42
  "attributes": [
37
43
  {
@@ -40,6 +46,12 @@
40
46
  "value": { "type": "'header' | 'body'", "default": "'body'" }
41
47
  }
42
48
  ],
49
+ "slots": [
50
+ {
51
+ "name": "",
52
+ "description": "The content of the table row, consisting of `<fhi-data-table-cell>` elements which represent individual cells within the row."
53
+ }
54
+ ],
43
55
  "events": [],
44
56
  "js": {
45
57
  "properties": [
@@ -55,7 +67,7 @@
55
67
  },
56
68
  {
57
69
  "name": "fhi-data-table",
58
- "description": "## FHI Table\n\nhttps://designsystem.fhi.no/?path=/docs/komponenter-data-table--docs\n\nThe `<fhi-data-table>` component is an implementation of a table according to the FHI Design System guidelines.\nIt allows users to display tabular data in a structured format using `<fhi-data-table-row>` and `<fhi-data-table-cell>` components.\n\nThe `<fhi-data-table>` component does not use the native HTML `<table>` element. Instead, it relies on CSS Grid to achieve the desired layout and styling.\n\nExample usage:\n```html\n<fhi-data-table caption=\"Example Table\" columns=\"2fr 1fr 1fr\">\n <fhi-data-table-row variant=\"header\">\n <fhi-data-table-cell>Header 1</fhi-data-table-cell>\n <fhi-data-table-cell>Header 2</fhi-data-table-cell>\n <fhi-data-table-cell>Header 3</fhi-data-table-cell>\n </fhi-data-table-row>\n <fhi-data-table-row>\n <fhi-data-table-cell>Data 1</fhi-data-table-cell>\n <fhi-data-table-cell>Data 2</fhi-data-table-cell>\n <fhi-data-table-cell>Data 3</fhi-data-table-cell>\n </fhi-data-table-row>\n</fhi-data-table>\n```\n---\n",
70
+ "description": "## FHI Table\n\nhttps://designsystem.fhi.no/?path=/docs/komponenter-data-table--docs\n\nThe `<fhi-data-table>` component is an implementation of a table according to the FHI Design System guidelines.\nIt allows users to display tabular data in a structured format using `<fhi-data-table-row>` and `<fhi-data-table-cell>` components.\n\nThe `<fhi-data-table>` component does not use the native HTML `<table>` element. Instead, it relies on CSS `display: table` to achieve the desired layout and styling.\n\nExample usage:\n```html\n<fhi-data-table caption=\"Example Table\">\n <fhi-data-table-row variant=\"header\">\n <fhi-data-table-cell>Header 1</fhi-data-table-cell>\n <fhi-data-table-cell>Header 2</fhi-data-table-cell>\n <fhi-data-table-cell>Header 3</fhi-data-table-cell>\n </fhi-data-table-row>\n <fhi-data-table-row>\n <fhi-data-table-cell>Data 1</fhi-data-table-cell>\n <fhi-data-table-cell>Data 2</fhi-data-table-cell>\n <fhi-data-table-cell>Data 3</fhi-data-table-cell>\n </fhi-data-table-row>\n</fhi-data-table>\n```\n---\n\n\n### **Slot Section:**\n - _default_ - The content of the table, consisting of `<fhi-data-table-row>` elements which in turn contain `<fhi-data-table-cell>` elements.",
59
71
  "doc-url": "",
60
72
  "attributes": [
61
73
  {
@@ -69,6 +81,12 @@
69
81
  "value": { "type": "boolean" }
70
82
  }
71
83
  ],
84
+ "slots": [
85
+ {
86
+ "name": "",
87
+ "description": "The content of the table, consisting of `<fhi-data-table-row>` elements which in turn contain `<fhi-data-table-cell>` elements."
88
+ }
89
+ ],
72
90
  "events": [],
73
91
  "js": {
74
92
  "properties": [
@@ -730,7 +748,7 @@
730
748
  "attributes": [
731
749
  {
732
750
  "name": "color",
733
- "description": "Sets the color of the tag.",
751
+ "description": "Sets the color theme of the tag.",
734
752
  "value": {
735
753
  "type": "'neutral' | 'accent' | 'success' | 'warning' | 'danger' | 'info'",
736
754
  "default": "'neutral'"
@@ -748,7 +766,7 @@
748
766
  "properties": [
749
767
  {
750
768
  "name": "color",
751
- "description": "Sets the color of the tag.",
769
+ "description": "Sets the color theme of the tag.",
752
770
  "type": "'neutral' | 'accent' | 'success' | 'warning' | 'danger' | 'info'"
753
771
  }
754
772
  ],