@felleslosninger/minid-elements 0.0.97 → 0.0.99

package/dist/components/dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown.js","sources":["../../src/components/dropdown.component.ts"],"sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { styled } from '../mixins/tailwind.mixin.ts';\nimport './popup.component';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-dropdown': MinidDropdown;\n  }\n}\n\nlet nextUniqueID = 0;\n\nconst styles = [\n  css`\n    :host {\n      display: flex;\n    }\n\n    .popup {\n      --arrow-size: 8px;\n    }\n\n    .popup::part(arrow) {\n      z-index: 1501;\n      border: 1px solid #cbcbcb;\n      border-left: 0;\n      border-top: 0;\n    }\n  `,\n];\n\n/**\n * @slot -- Default slot for content of the dropdown panel\n * @slot trigger - Used for the button element that will be used to open the dropdown menu\n * @part panel - Select the dropdown panel host element\n */\n@customElement('mid-dropdown')\nexport class MinidDropdown extends styled(LitElement, styles) {\n  @state()\n  popupId = `mid-dropdown-${nextUniqueID++}`;\n\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  @property()\n  size: 'sm' | 'md' | 'lg' = 'md';\n\n  @property({ reflect: true })\n  placement:\n    | 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end' = 'bottom-end';\n\n  /**\n   * Sync the dropdown panel size with the trigger element\n   */\n  @property({ reflect: true })\n  sync?: 'width' | 'height' | 'both';\n\n  /**\n   * Distance between trigger and dropdown panel\n   */\n  @property({ type: Number })\n  distance = 4;\n\n  /**\n   * Nudge the dropdown panel position. Accepts a negative or positive number.\n   */\n  @property({ type: Number })\n  skidding = 0;\n\n  @property({ type: Boolean })\n  arrow = false;\n\n  /**\n   * Choose if position is `fixed` or `absolute`. `absolute` is more performant,\n   * but `fixed` can solve issues with overflow clipping\n   */\n  @property({ type: Boolean })\n  hoist = false;\n\n  /**\n   *\n   * @ignore\n   */\n  #handleClickOutside = (event: Event) => {\n    if (!event.composedPath().includes(this)) {\n      this.#toggleDropdownOpen(event, false);\n    }\n  };\n\n  #toggleDropdownOpen(event: Event, open?: boolean) {\n    event.stopPropagation();\n\n    if (open !== undefined) {\n      this.open = open;\n    } else {\n      this.open = !this.open;\n    }\n\n    if (this.open) {\n      addEventListener('click', this.#handleClickOutside);\n      addEventListener(\n        'mid-anchor-click',\n        this.handleAnchorClick as EventListener\n      );\n    } else {\n      this.blur();\n      removeEventListener(\n        'mid-anchor-click',\n        this.handleAnchorClick as EventListener\n      );\n      removeEventListener('click', this.#handleClickOutside);\n    }\n  }\n\n  handleAnchorClick = (event: CustomEvent<{ id: string }>) => {\n    // to make sure clicking another element's anchor closes current element's dropdown menu\n    if (event.detail.id !== this.popupId) {\n      this.#toggleDropdownOpen(event, false);\n    }\n  };\n\n  override render() {\n    return html`\n      <mid-popup\n        id=\"${this.popupId}\"\n        class=\"popup\"\n        distance=${this.distance}\n        placement=\"${this.placement}\"\n        skidding=${this.skidding}\n        strategy=${this.hoist ? 'fixed' : 'absolute'}\n        flip\n        shift\n        auto-size=\"vertical\"\n        auto-size-padding=\"10\"\n        sync=${ifDefined(this.sync)}\n        ?active=${this.open}\n        ?arrow=${this.arrow}\n        @click=${this.#toggleDropdownOpen}\n      >\n        <slot slot=\"anchor\" name=\"trigger\"> </slot>\n        <div\n          aria-hidden=${this.open ? 'false' : 'true'}\n          aria-labelledby=\"${this.popupId}\"\n        >\n          <slot part=\"panel\"></slot>\n        </div>\n      </mid-popup>\n    `;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,IAAA,qBAAA,0BAAA;AAYA,IAAI,eAAe;AAEnB,MAAM,SAAS;AAAA,EACb;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgBF;AAQO,IAAM,gBAAN,cAA4B,OAAO,YAAY,MAAM,EAAE;AAAA,EAAvD,cAAA;AAAA,UAAA,GAAA,SAAA;AAAA,iBAAA,MAAA,wBAAA;AAEL,SAAA,UAAU,gBAAgB,cAAc;AAGjC,SAAA,OAAA;AAGoB,SAAA,OAAA;AAeV,SAAA,YAAA;AAYN,SAAA,WAAA;AAMA,SAAA,WAAA;AAGH,SAAA,QAAA;AAOA,SAAA,QAAA;AAMR,iBAAA,MAAA,qBAAsB,CAAC,UAAiB;AACtC,UAAI,CAAC,MAAM,aAAe,EAAA,SAAS,IAAI,GAAG;AACnC,wBAAA,MAAA,0BAAA,qBAAA,EAAL,WAAyB,OAAO,KAAA;AAAA,MAAA;AAAA,IAClC,CACF;AA2BA,SAAA,oBAAoB,CAAC,UAAuC;AAE1D,UAAI,MAAM,OAAO,OAAO,KAAK,SAAS;AAC/B,wBAAA,MAAA,0BAAA,qBAAA,EAAL,WAAyB,OAAO,KAAA;AAAA,MAAA;AAAA,IAEpC;AAAA,EAAA;AAAA,EAES,SAAS;AACT,WAAA;AAAA;AAAA,cAEG,KAAK,OAAO;AAAA;AAAA,mBAEP,KAAK,QAAQ;AAAA,qBACX,KAAK,SAAS;AAAA,mBAChB,KAAK,QAAQ;AAAA,mBACb,KAAK,QAAQ,UAAU,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,eAKrC,UAAU,KAAK,IAAI,CAAC;AAAA,kBACjB,KAAK,IAAI;AAAA,iBACV,KAAK,KAAK;AAAA,iBACV,sBAAK,0BAAmB,qBAAA,CAAA;AAAA;AAAA;AAAA;AAAA,wBAIjB,KAAK,OAAO,UAAU,MAAM;AAAA,6BACvB,KAAK,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAOzC;AAlEE,sBAAA,oBAAA,QAAA;AAzDK,2BAAA,oBAAA,QAAA;AA+DL,wBAAmB,SAAC,OAAc,MAAgB;AAChD,QAAM,gBAAgB;AAEtB,MAAI,SAAS,QAAW;AACtB,SAAK,OAAO;AAAA,EAAA,OACP;AACA,SAAA,OAAO,CAAC,KAAK;AAAA,EAAA;AAGpB,MAAI,KAAK,MAAM;AACI,qBAAA,SAAS,mBAAK,mBAAmB,CAAA;AAClD;AAAA,MACE;AAAA,MACA,KAAK;AAAA,IACP;AAAA,EAAA,OACK;AACL,SAAK,KAAK;AACV;AAAA,MACE;AAAA,MACA,KAAK;AAAA,IACP;AACoB,wBAAA,SAAS,mBAAK,mBAAmB,CAAA;AAAA,EAAA;AAEzD;AApFA,gBAAA;AAAA,EADC,MAAM;AAAA,GADI,cAEX,WAAA,WAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAM,CAAA;AAAA,GAJ/B,cAKX,WAAA,QAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS;AAAA,GAPC,cAQX,WAAA,QAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,SAAS,KAAM,CAAA;AAAA,GAVhB,cAWX,WAAA,aAAA,CAAA;AAkBA,gBAAA;AAAA,EADC,SAAS,EAAE,SAAS,KAAM,CAAA;AAAA,GA5BhB,cA6BX,WAAA,QAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GAlCf,cAmCX,WAAA,YAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GAxCf,cAyCX,WAAA,YAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAS,CAAA;AAAA,GA3ChB,cA4CX,WAAA,SAAA,CAAA;AAOA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAS,CAAA;AAAA,GAlDhB,cAmDX,WAAA,SAAA,CAAA;AAnDW,gBAAN,gBAAA;AAAA,EADN,cAAc,cAAc;AAAA,GAChB,aAAA;"}
+{"version":3,"file":"dropdown.js","sources":["../../src/components/dropdown.component.ts"],"sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { styled } from '../mixins/tailwind.mixin.ts';\nimport './popup.component';\nimport { classMap } from 'lit/directives/class-map.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-dropdown': MinidDropdown;\n  }\n}\n\nlet nextUniqueId = 0;\n\nconst styles = [\n  css`\n    :host {\n      display: inline-flex;\n    }\n  `,\n];\n\n/**\n * @slot -- Default slot for content of the dropdown panel\n * @slot trigger - Used for the button element that will be used to open the dropdown menu\n * @part panel - Select the dropdown panel host element\n */\n@customElement('mid-dropdown')\nexport class MinidDropdown extends styled(LitElement, styles) {\n  private readonly popupId = `mid-dropdown-${nextUniqueId++}`;\n\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  @property()\n  size: 'sm' | 'md' | 'lg' = 'md';\n\n  @property({ reflect: true })\n  placement:\n    | 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end' = 'bottom-end';\n\n  /**\n   * Sync the dropdown panel size with the trigger element\n   */\n  @property({ reflect: true })\n  sync?: 'width' | 'height' | 'both';\n\n  /**\n   * Distance between trigger and dropdown panel\n   */\n  @property({ type: Number })\n  distance = 4;\n\n  /**\n   * Nudge the dropdown panel position. Accepts a negative or positive number.\n   */\n  @property({ type: Number })\n  skidding = 0;\n\n  @property({ type: Boolean })\n  arrow = false;\n\n  /**\n   * Choose if position is `fixed` or `absolute`. `absolute` is more performant,\n   * but `fixed` can solve issues with overflow clipping\n   */\n  @property({ type: Boolean })\n  hoist = false;\n\n  private handleClickOutside = (event: Event) => {\n    if (!event.composedPath().includes(this)) {\n      this.toggleDropdownOpen(event, false);\n    }\n  };\n\n  private toggleDropdownOpen(event: Event, open?: boolean) {\n    event.stopPropagation();\n\n    if (open !== undefined) {\n      this.open = open;\n    } else {\n      this.open = !this.open;\n    }\n\n    if (this.open) {\n      addEventListener('click', this.handleClickOutside);\n      addEventListener(\n        'mid-anchor-click',\n        this.handleAnchorClick as EventListener\n      );\n    } else {\n      this.blur();\n      removeEventListener(\n        'mid-anchor-click',\n        this.handleAnchorClick as EventListener\n      );\n      removeEventListener('click', this.handleClickOutside);\n    }\n  }\n\n  private handleAnchorClick = (event: CustomEvent<{ id: string }>) => {\n    // to make sure clicking another element's anchor closes current element's dropdown menu\n    if (event.detail.id !== this.popupId) {\n      this.toggleDropdownOpen(event, false);\n    }\n  };\n\n  override render() {\n    return html`\n      <mid-popup\n        id=\"${this.popupId}\"\n        class=\"${classMap({\n          'text-body-sm': this.size === 'sm',\n          'text-body-md': this.size === 'md',\n          'text-body-lg': this.size === 'lg',\n        })} [--arrow-border-color:var(--border-color-neutral-subtle)] [--arrow-size:8px]\"\n        distance=${this.distance}\n        placement=\"${this.placement}\"\n        skidding=${this.skidding}\n        strategy=${this.hoist ? 'fixed' : 'absolute'}\n        flip\n        shift\n        auto-size=\"vertical\"\n        auto-size-padding=\"10\"\n        sync=${ifDefined(this.sync)}\n        ?active=${this.open}\n        ?arrow=${this.arrow}\n        @click=${this.toggleDropdownOpen}\n      >\n        <slot slot=\"anchor\" name=\"trigger\"> </slot>\n        <div\n          aria-hidden=${this.open ? 'false' : 'true'}\n          aria-labelledby=\"${this.popupId}\"\n        >\n          <slot part=\"panel\"></slot>\n        </div>\n      </mid-popup>\n    `;\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/components/heading.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"heading.component.d.ts","sourceRoot":"","sources":["../../src/components/heading.component.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAEjC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,YAAY,CAAC;KAC7B;CACF;;AAED,qBACa,YAAa,SAAQ,iBAAkB;IAClD;;OAEG;IAEH,KAAK,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAK;IAEjC;;OAEG;IAEH,IAAI,EAAE,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAQ;IAE9D;;;OAGG;IAEH,OAAO,UAAS;IAEP,MAAM;CA0BhB"}
+{"version":3,"file":"heading.component.d.ts","sourceRoot":"","sources":["../../src/components/heading.component.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAEjC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,YAAY,CAAC;KAC7B;CACF;;AAED,qBACa,YAAa,SAAQ,iBAAkB;IAClD;;OAEG;IAEH,KAAK,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAK;IAEjC;;OAEG;IAEH,IAAI,EAAE,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAQ;IAE9D;;;OAGG;IAEH,OAAO,UAAS;IAEP,MAAM;CAyBhB"}

package/dist/components/heading.js

@@ -23,16 +23,15 @@ let MinidHeading = class extends styled(LitElement) {
   render() {
     const tag = this.level === 1 ? literal`h1` : this.level === 2 ? literal`h2` : this.level === 3 ? literal`h3` : this.level === 4 ? literal`h4` : this.level === 5 ? literal`h5` : literal`h6`;
     return html`<${tag} class="${classMap({
-      "fds-heading": true,
-      "fds-heading--spacing": this.spacing,
-      "fds-heading--2xs": this.size === "2xs",
-      "fds-heading--xs": this.size === "xs",
-      "fds-heading--sm": this.size === "sm",
-      "fds-heading--md": this.size === "md",
-      "fds-heading--lg": this.size === "lg",
-      "fds-heading--xl": this.size === "xl",
-      "fds-heading--2xl": this.size === "2xl"
-    })}" ><slot></slot></${tag}>`;
+      "mb-2": this.spacing,
+      "text-heading-2xs": this.size === "2xs",
+      "text-heading-xs": this.size === "xs",
+      "text-heading-sm": this.size === "sm",
+      "text-heading-md": this.size === "md",
+      "text-heading-lg": this.size === "lg",
+      "text-heading-xl": this.size === "xl",
+      "text-heading-2xl": this.size === "2xl"
+    })}"><slot></slot></${tag}>`;
   }
 };
 __decorateClass([

package/dist/components/heading.js.map

@@ -1 +1 @@
-{"version":3,"file":"heading.js","sources":["../../src/components/heading.component.ts"],"sourcesContent":["import { html, literal } from 'lit/static-html.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styled } from '../mixins/tailwind.mixin';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { LitElement } from 'lit';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-heading': MinidHeading;\n  }\n}\n\n@customElement('mid-heading')\nexport class MinidHeading extends styled(LitElement) {\n  /**\n   * @default 1\n   */\n  @property({ type: Number })\n  level: 1 | 2 | 3 | 4 | 5 | 6 = 1;\n\n  /**\n   * @default 'md'\n   */\n  @property()\n  size: '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' = 'md';\n\n  /**\n   *\n   * @default false\n   */\n  @property({ type: Boolean })\n  spacing = false;\n\n  override render() {\n    const tag =\n      this.level === 1\n        ? literal`h1`\n        : this.level === 2\n          ? literal`h2`\n          : this.level === 3\n            ? literal`h3`\n            : this.level === 4\n              ? literal`h4`\n              : this.level === 5\n                ? literal`h5`\n                : literal`h6`;\n\n    return html`<${tag} class=\"${classMap({\n      'fds-heading': true,\n      'fds-heading--spacing': this.spacing,\n      'fds-heading--2xs': this.size === '2xs',\n      'fds-heading--xs': this.size === 'xs',\n      'fds-heading--sm': this.size === 'sm',\n      'fds-heading--md': this.size === 'md',\n      'fds-heading--lg': this.size === 'lg',\n      'fds-heading--xl': this.size === 'xl',\n      'fds-heading--2xl': this.size === '2xl',\n    })}\" ><slot></slot></${tag}>`;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAaO,IAAM,eAAN,cAA2B,OAAO,UAAU,EAAE;AAAA,EAA9C,cAAA;AAAA,UAAA,GAAA,SAAA;AAK0B,SAAA,QAAA;AAM0B,SAAA,OAAA;AAO/C,SAAA,UAAA;AAAA,EAAA;AAAA,EAED,SAAS;AACV,UAAA,MACJ,KAAK,UAAU,IACX,cACA,KAAK,UAAU,IACb,cACA,KAAK,UAAU,IACb,cACA,KAAK,UAAU,IACb,cACA,KAAK,UAAU,IACb,cACA;AAEP,WAAA,QAAQ,GAAG,WAAW,SAAS;AAAA,MACpC,eAAe;AAAA,MACf,wBAAwB,KAAK;AAAA,MAC7B,oBAAoB,KAAK,SAAS;AAAA,MAClC,mBAAmB,KAAK,SAAS;AAAA,MACjC,mBAAmB,KAAK,SAAS;AAAA,MACjC,mBAAmB,KAAK,SAAS;AAAA,MACjC,mBAAmB,KAAK,SAAS;AAAA,MACjC,mBAAmB,KAAK,SAAS;AAAA,MACjC,oBAAoB,KAAK,SAAS;AAAA,IAAA,CACnC,CAAC,qBAAqB,GAAG;AAAA,EAAA;AAE9B;AAzCE,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GAJf,aAKX,WAAA,SAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAS;AAAA,GAVC,aAWX,WAAA,QAAA,CAAA;AAOA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAS,CAAA;AAAA,GAjBhB,aAkBX,WAAA,WAAA,CAAA;AAlBW,eAAN,gBAAA;AAAA,EADN,cAAc,aAAa;AAAA,GACf,YAAA;"}
+{"version":3,"file":"heading.js","sources":["../../src/components/heading.component.ts"],"sourcesContent":["import { html, literal } from 'lit/static-html.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styled } from '../mixins/tailwind.mixin';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { LitElement } from 'lit';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-heading': MinidHeading;\n  }\n}\n\n@customElement('mid-heading')\nexport class MinidHeading extends styled(LitElement) {\n  /**\n   * @default 1\n   */\n  @property({ type: Number })\n  level: 1 | 2 | 3 | 4 | 5 | 6 = 1;\n\n  /**\n   * @default 'md'\n   */\n  @property()\n  size: '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' = 'md';\n\n  /**\n   *\n   * @default false\n   */\n  @property({ type: Boolean })\n  spacing = false;\n\n  override render() {\n    const tag =\n      this.level === 1\n        ? literal`h1`\n        : this.level === 2\n          ? literal`h2`\n          : this.level === 3\n            ? literal`h3`\n            : this.level === 4\n              ? literal`h4`\n              : this.level === 5\n                ? literal`h5`\n                : literal`h6`;\n\n    return html`<${tag} class=\"${classMap({\n      'mb-2': this.spacing,\n      'text-heading-2xs': this.size === '2xs',\n      'text-heading-xs': this.size === 'xs',\n      'text-heading-sm': this.size === 'sm',\n      'text-heading-md': this.size === 'md',\n      'text-heading-lg': this.size === 'lg',\n      'text-heading-xl': this.size === 'xl',\n      'text-heading-2xl': this.size === '2xl',\n    })}\"><slot></slot></${tag}>`;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAaO,IAAM,eAAN,cAA2B,OAAO,UAAU,EAAE;AAAA,EAA9C,cAAA;AAAA,UAAA,GAAA,SAAA;AAK0B,SAAA,QAAA;AAM0B,SAAA,OAAA;AAO/C,SAAA,UAAA;AAAA,EAAA;AAAA,EAED,SAAS;AACV,UAAA,MACJ,KAAK,UAAU,IACX,cACA,KAAK,UAAU,IACb,cACA,KAAK,UAAU,IACb,cACA,KAAK,UAAU,IACb,cACA,KAAK,UAAU,IACb,cACA;AAEP,WAAA,QAAQ,GAAG,WAAW,SAAS;AAAA,MACpC,QAAQ,KAAK;AAAA,MACb,oBAAoB,KAAK,SAAS;AAAA,MAClC,mBAAmB,KAAK,SAAS;AAAA,MACjC,mBAAmB,KAAK,SAAS;AAAA,MACjC,mBAAmB,KAAK,SAAS;AAAA,MACjC,mBAAmB,KAAK,SAAS;AAAA,MACjC,mBAAmB,KAAK,SAAS;AAAA,MACjC,oBAAoB,KAAK,SAAS;AAAA,IAAA,CACnC,CAAC,oBAAoB,GAAG;AAAA,EAAA;AAE7B;AAxCE,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GAJf,aAKX,WAAA,SAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAS;AAAA,GAVC,aAWX,WAAA,QAAA,CAAA;AAOA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAS,CAAA;AAAA,GAjBhB,aAkBX,WAAA,WAAA,CAAA;AAlBW,eAAN,gBAAA;AAAA,EADN,cAAc,aAAa;AAAA,GACf,YAAA;"}

package/dist/components/helptext.component.d.ts

@@ -17,13 +17,7 @@ declare const MinidHelptext_base: typeof LitElement;
  * @cssproperty [--max-width=20rem] - Max width of the helptext content
  */
 export declare class MinidHelptext extends MinidHelptext_base {
-    /**
-     * @ignore
-     */
     body: HTMLElement;
-    /**
-     * @ignore
-     */
     popup: MinidPopup;
     /**
      * Indicates whether or not the helptext is open. You can use this in lieu of the show/hide methods.
@@ -54,30 +48,12 @@ export declare class MinidHelptext extends MinidHelptext_base {
     filledIcon: boolean;
     constructor();
     disconnectedCallback(): void;
-    firstUpdated(): void;
-    /**
-     * @ignore
-     */
+    firstUpdated(): Promise<void>;
     private handleBlur;
-    /**
-     * @ignore
-     */
     private handleClick;
-    /**
-     * @ignore
-     */
     private handleFocus;
-    /**
-     * @ignore
-     */
     private handleDocumentKeyDown;
-    /**
-     * @ignore
-     */
     private handleMouseOver;
-    /**
-     * @ignore
-     */
     private handleMouseOut;
     handleOpenChange(): Promise<void>;
     /**

package/dist/components/helptext.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"helptext.component.d.ts","sourceRoot":"","sources":["../../src/components/helptext.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAG5C,OAAO,0BAA0B,CAAC;AAClC,OAAO,uBAAuB,CAAC;AAC/B,OAAO,sBAAsB,CAAC;AAE9B,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AASlD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,aAAa,CAAC;KAC/B;CACF;;AA0CD;;;;;;;;;GASG;AACH,qBACa,aAAc,SAAQ,kBAA0B;IAC3D;;OAEG;IAEH,IAAI,EAAG,WAAW,CAAC;IAEnB;;OAEG;IAEH,KAAK,EAAG,UAAU,CAAC;IAEnB;;OAEG;IAEH,IAAI,UAAS;IAEb;;OAEG;IAEH,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAEhC;;OAEG;IACS,SAAS,EACjB,KAAK,GACL,WAAW,GACX,SAAS,GACT,QAAQ,GACR,cAAc,GACd,YAAY,GACZ,OAAO,GACP,aAAa,GACb,WAAW,GACX,MAAM,GACN,YAAY,GACZ,UAAU,CAAW;IAEzB;;OAEG;IAEH,QAAQ,SAAK;IAEb;;OAEG;IAEH,QAAQ,SAAK;IAEb;;;;OAIG;IAEH,KAAK,UAAS;IAGd,UAAU,UAAS;;IAUnB,oBAAoB;IAKpB,YAAY;IAWZ;;OAEG;IACH,OAAO,CAAC,UAAU,CAEhB;IAEF;;OAEG;IACH,OAAO,CAAC,WAAW,CAMjB;IAEF;;OAEG;IACH,OAAO,CAAC,WAAW,CAEjB;IAEF;;OAEG;IACH,OAAO,CAAC,qBAAqB,CAM3B;IAEF;;OAEG;IACH,OAAO,CAAC,eAAe,CAErB;IAEF;;OAEG;IACH,OAAO,CAAC,cAAc,CAIpB;IAGI,gBAAgB;IAyCtB;;OAEG;IACG,IAAI;IASV;;OAEG;IACG,IAAI;IASD,MAAM;CAyDhB"}
+{"version":3,"file":"helptext.component.d.ts","sourceRoot":"","sources":["../../src/components/helptext.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAG5C,OAAO,0BAA0B,CAAC;AAClC,OAAO,uBAAuB,CAAC;AAC/B,OAAO,sBAAsB,CAAC;AAE9B,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AASlD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,aAAa,CAAC;KAC/B;CACF;;AAUD;;;;;;;;;GASG;AACH,qBACa,aAAc,SAAQ,kBAA0B;IAE3D,IAAI,EAAG,WAAW,CAAC;IAGnB,KAAK,EAAG,UAAU,CAAC;IAEnB;;OAEG;IAEH,IAAI,UAAS;IAEb;;OAEG;IAEH,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAEhC;;OAEG;IACS,SAAS,EACjB,KAAK,GACL,WAAW,GACX,SAAS,GACT,QAAQ,GACR,cAAc,GACd,YAAY,GACZ,OAAO,GACP,aAAa,GACb,WAAW,GACX,MAAM,GACN,YAAY,GACZ,UAAU,CAAW;IAEzB;;OAEG;IAEH,QAAQ,SAAK;IAEb;;OAEG;IAEH,QAAQ,SAAK;IAEb;;;;OAIG;IAEH,KAAK,UAAS;IAGd,UAAU,UAAS;;IAUnB,oBAAoB;IAKd,YAAY;IAYlB,OAAO,CAAC,UAAU,CAEhB;IAEF,OAAO,CAAC,WAAW,CAMjB;IAEF,OAAO,CAAC,WAAW,CAEjB;IAEF,OAAO,CAAC,qBAAqB,CAM3B;IAEF,OAAO,CAAC,eAAe,CAErB;IAEF,OAAO,CAAC,cAAc,CAIpB;IAGI,gBAAgB;IAyCtB;;OAEG;IACG,IAAI;IASV;;OAEG;IACG,IAAI;IASD,MAAM;CA4DhB"}

package/dist/components/helptext.js

@@ -24,38 +24,6 @@ const styles = [
     :host {
       --max-width: 20rem;
     }
-
-    .icon {
-      font-size: var(--icon-size);
-      color: var(--fds-semantic-text-action-default);
-    }
-
-    .icon.sm {
-      --icon-size: 1.5rem;
-    }
-
-    .icon.md {
-      --icon-size: 1.75rem;
-    }
-
-    .icon.lg {
-      --icon-size: 2rem;
-    }
-
-    .helptext__body {
-      width: max-content;
-      max-width: var(--max-width);
-    }
-
-    .popup {
-      --arrow-color: var(--fds-semantic-surface-info-subtle);
-    }
-
-    .popup::part(arrow) {
-      border: 1px solid var(--fds-semantic-border-info-default);
-      border-left: 0;
-      border-top: 0;
-    }
   `
 ];
 let MinidHelptext = class extends styled(LitElement, styles) {
@@ -103,7 +71,8 @@ let MinidHelptext = class extends styled(LitElement, styles) {
   disconnectedCallback() {
     document.removeEventListener("keydown", this.handleDocumentKeyDown);
   }
-  firstUpdated() {
+  async firstUpdated() {
+    await this.updateComplete;
     this.body.hidden = !this.open;
     if (this.open) {
       this.popup.active = true;
@@ -164,9 +133,12 @@ let MinidHelptext = class extends styled(LitElement, styles) {
     return waitForEvent(this, "mid-after-hide");
   }
   render() {
+    const sm = this.size === "sm";
+    const md = this.size === "md";
+    const lg = this.size === "lg";
     return html`
       <mid-popup
-        class="popup"
+        class="[--arrow-border-color:var(--border-color-info)] [--arrow-color:var(--background-color-info-tinted)]"
         ?active=${this.open}
         placement=${this.placement}
         distance=${this.distance}
@@ -182,36 +154,36 @@ let MinidHelptext = class extends styled(LitElement, styles) {
           slot="anchor"
           aria-describedby="helptext-body"
           aria-label="Hjelpetekst"
-          class="fds-helptext--md fds-helptext__button fds-focus"
+          class="${classMap({
+      "text-6": sm,
+      "text-7": md,
+      "text-8": lg
+    })} text-accent-base focus-visible:focus-ring flex rounded-full"
           @click="${this.handleClick}"
         >
           <mid-icon
             name="questionmark-circle"
             library="system"
             class="${classMap({
-      icon: true,
-      hidden: this.filledIcon,
-      sm: this.size === "sm",
-      md: this.size === "md",
-      lg: this.size === "lg"
+      hidden: this.filledIcon
     })}"
           ></mid-icon>
           <mid-icon
             name="questionmark-circle-fill"
             library="system"
             class="${classMap({
-      icon: true,
-      hidden: !this.filledIcon,
-      sm: this.size === "sm",
-      md: this.size === "md",
-      lg: this.size === "lg"
+      hidden: !this.filledIcon
     })}"
           ></mid-icon>
         </button>
 
         <div
-          id="heptext-body"
-          class="helptext__body fds-paragraph fds-paragraph--md fds-popover fds-popover--info fds-popover--md fds-helptext__content"
+          id="helptext-body"
+          class="${classMap({
+      "text-body-sm": sm,
+      "text-body-md": md,
+      "text-body-lg": lg
+    })} bg-info-tinted text-info border-info w-max max-w-(--max-width) rounded border px-4 py-3"
           aria-live=${this.open ? "polite" : "off"}
           role="status"
         >
@@ -222,7 +194,7 @@ let MinidHelptext = class extends styled(LitElement, styles) {
   }
 };
 __decorateClass([
-  query(".helptext__body")
+  query("#helptext-body")
 ], MinidHelptext.prototype, "body", 2);
 __decorateClass([
   query("mid-popup")

package/dist/components/helptext.js.map

@@ -1 +1 @@
-{"version":3,"file":"helptext.js","sources":["../../src/components/helptext.component.ts"],"sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { styled } from '../mixins/tailwind.mixin.js';\nimport './icon/icon.component.js';\nimport './button.component.js';\nimport './popup.component.js';\nimport { waitForEvent } from '../internal/event.js';\nimport { MinidPopup } from './popup.component.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { watch } from '../internal/watch.js';\nimport {\n  getAnimation,\n  setDefaultAnimation,\n} from '../utilities/animation-registry.js';\nimport { stopAnimations, animateTo } from '../internal/animate.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-helptext': MinidHelptext;\n  }\n}\n\nconst styles = [\n  css`\n    :host {\n      --max-width: 20rem;\n    }\n\n    .icon {\n      font-size: var(--icon-size);\n      color: var(--fds-semantic-text-action-default);\n    }\n\n    .icon.sm {\n      --icon-size: 1.5rem;\n    }\n\n    .icon.md {\n      --icon-size: 1.75rem;\n    }\n\n    .icon.lg {\n      --icon-size: 2rem;\n    }\n\n    .helptext__body {\n      width: max-content;\n      max-width: var(--max-width);\n    }\n\n    .popup {\n      --arrow-color: var(--fds-semantic-surface-info-subtle);\n    }\n\n    .popup::part(arrow) {\n      border: 1px solid var(--fds-semantic-border-info-default);\n      border-left: 0;\n      border-top: 0;\n    }\n  `,\n];\n\n/**\n * @event mid-show - Emitted when open is set to `true`\n * @event mid-hide - Emitted when open is set to `false`\n * @event mid-after-show - Emitted after the helptext has shown an all animations are complete\n * @event mid-after-hide - Emitted after the helptext has hidden an all animations are complete\n *\n * @slot -- The default slot is for helptext content\n *\n * @cssproperty [--max-width=20rem] - Max width of the helptext content\n */\n@customElement('mid-helptext')\nexport class MinidHelptext extends styled(LitElement, styles) {\n  /**\n   * @ignore\n   */\n  @query('.helptext__body')\n  body!: HTMLElement;\n\n  /**\n   * @ignore\n   */\n  @query('mid-popup')\n  popup!: MinidPopup;\n\n  /**\n   * Indicates whether or not the helptext is open. You can use this in lieu of the show/hide methods.\n   */\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  /**\n   * Size of the icon\n   */\n  @property()\n  size: 'sm' | 'md' | 'lg' = 'md';\n\n  /**\n   * Placement of the popup\n   */\n  @property() placement:\n    | 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end' = 'right';\n\n  /**\n   * The distance in pixels from which to offset the helptext away from its target.\n   */\n  @property({ type: Number })\n  distance = 8;\n\n  /**\n   * The distance in pixels from which to offset the helptext along its target.\n   */\n  @property({ type: Number })\n  skidding = 0;\n\n  /**\n   * Enable this option to prevent the helptext from being clipped when the component is placed inside a container with\n   * `overflow: auto|hidden|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all,\n   * scenarios.\n   */\n  @property({ type: Boolean })\n  hoist = false;\n\n  @state()\n  filledIcon = false;\n\n  constructor() {\n    super();\n    this.addEventListener('blur', this.handleBlur, true);\n    this.addEventListener('focus', this.handleFocus, true);\n    this.addEventListener('mouseover', this.handleMouseOver);\n    this.addEventListener('mouseout', this.handleMouseOut);\n  }\n\n  disconnectedCallback() {\n    // Cleanup this event in case the helptext is removed while open\n    document.removeEventListener('keydown', this.handleDocumentKeyDown);\n  }\n\n  firstUpdated() {\n    this.body.hidden = !this.open;\n\n    // If the helptext is visible on init, update its position\n    if (this.open) {\n      this.popup.active = true;\n      this.filledIcon = true;\n      this.popup.reposition();\n    }\n  }\n\n  /**\n   * @ignore\n   */\n  private handleBlur = () => {\n    this.hide();\n  };\n\n  /**\n   * @ignore\n   */\n  private handleClick = () => {\n    if (this.open) {\n      this.hide();\n    } else {\n      this.show();\n    }\n  };\n\n  /**\n   * @ignore\n   */\n  private handleFocus = () => {\n    this.filledIcon = true;\n  };\n\n  /**\n   * @ignore\n   */\n  private handleDocumentKeyDown = (event: KeyboardEvent) => {\n    // Pressing escape when a helptext is open should dismiss it\n    if (event.key === 'Escape') {\n      event.stopPropagation();\n      this.hide();\n    }\n  };\n\n  /**\n   * @ignore\n   */\n  private handleMouseOver = () => {\n    this.filledIcon = true;\n  };\n\n  /**\n   * @ignore\n   */\n  private handleMouseOut = () => {\n    if (!this.open) {\n      this.filledIcon = false;\n    }\n  };\n\n  @watch('open', { waitUntilFirstUpdate: true })\n  async handleOpenChange() {\n    if (this.open) {\n      // Show\n      this.dispatchEvent(\n        new Event('mid-show', { bubbles: true, composed: true })\n      );\n\n      document.addEventListener('keydown', this.handleDocumentKeyDown);\n\n      await stopAnimations(this.body);\n      this.body.hidden = false;\n      this.popup.active = true;\n      this.filledIcon = true;\n      const { keyframes, options } = getAnimation(this, 'helptext.show');\n      await animateTo(this.popup.popup, keyframes, options);\n      this.popup.reposition();\n\n      this.dispatchEvent(\n        new Event('mid-after-show', { bubbles: true, composed: true })\n      );\n    } else {\n      // Hide\n      this.dispatchEvent(\n        new Event('mid-hide', { bubbles: true, composed: true })\n      );\n\n      document.removeEventListener('keydown', this.handleDocumentKeyDown);\n\n      this.filledIcon = false;\n      await stopAnimations(this.body);\n      const { keyframes, options } = getAnimation(this, 'helptext.hide');\n      await animateTo(this.popup.popup, keyframes, options);\n      this.popup.active = false;\n      this.body.hidden = true;\n\n      this.dispatchEvent(\n        new Event('mid-after-hide', { bubbles: true, composed: true })\n      );\n    }\n  }\n\n  /**\n   * Shows the helptext.\n   */\n  async show() {\n    if (this.open) {\n      return undefined;\n    }\n\n    this.open = true;\n    return waitForEvent(this, 'mid-after-show');\n  }\n\n  /**\n   * Hides the helptext\n   */\n  async hide() {\n    if (!this.open) {\n      return undefined;\n    }\n\n    this.open = false;\n    return waitForEvent(this, 'mid-after-hide');\n  }\n\n  override render() {\n    return html`\n      <mid-popup\n        class=\"popup\"\n        ?active=${this.open}\n        placement=${this.placement}\n        distance=${this.distance}\n        skidding=${this.skidding}\n        strategy=${this.hoist ? 'fixed' : 'absolute'}\n        flip-fallback-placements=${'top-end bottom-end'}\n        flip\n        arrow\n        shift\n        hover-bridge\n      >\n        <button\n          slot=\"anchor\"\n          aria-describedby=\"helptext-body\"\n          aria-label=\"Hjelpetekst\"\n          class=\"fds-helptext--md fds-helptext__button fds-focus\"\n          @click=\"${this.handleClick}\"\n        >\n          <mid-icon\n            name=\"questionmark-circle\"\n            library=\"system\"\n            class=\"${classMap({\n              icon: true,\n              hidden: this.filledIcon,\n              sm: this.size === 'sm',\n              md: this.size === 'md',\n              lg: this.size === 'lg',\n            })}\"\n          ></mid-icon>\n          <mid-icon\n            name=\"questionmark-circle-fill\"\n            library=\"system\"\n            class=\"${classMap({\n              icon: true,\n              hidden: !this.filledIcon,\n              sm: this.size === 'sm',\n              md: this.size === 'md',\n              lg: this.size === 'lg',\n            })}\"\n          ></mid-icon>\n        </button>\n\n        <div\n          id=\"heptext-body\"\n          class=\"helptext__body fds-paragraph fds-paragraph--md fds-popover fds-popover--info fds-popover--md fds-helptext__content\"\n          aria-live=${this.open ? 'polite' : 'off'}\n          role=\"status\"\n        >\n          <slot></slot>\n        </div>\n      </mid-popup>\n    `;\n  }\n}\n\nsetDefaultAnimation('helptext.show', {\n  keyframes: [\n    { opacity: 0, scale: 0.8 },\n    { opacity: 1, scale: 1 },\n  ],\n  options: { duration: 150, easing: 'ease' },\n});\n\nsetDefaultAnimation('helptext.hide', {\n  keyframes: [\n    { opacity: 1, scale: 1 },\n    { opacity: 0, scale: 0.8 },\n  ],\n  options: { duration: 150, easing: 'ease' },\n});\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"helptext.js","sources":["../../src/components/helptext.component.ts"],"sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { styled } from '../mixins/tailwind.mixin.js';\nimport './icon/icon.component.js';\nimport './button.component.js';\nimport './popup.component.js';\nimport { waitForEvent } from '../internal/event.js';\nimport { MinidPopup } from './popup.component.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { watch } from '../internal/watch.js';\nimport {\n  getAnimation,\n  setDefaultAnimation,\n} from '../utilities/animation-registry.js';\nimport { stopAnimations, animateTo } from '../internal/animate.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-helptext': MinidHelptext;\n  }\n}\n\nconst styles = [\n  css`\n    :host {\n      --max-width: 20rem;\n    }\n  `,\n];\n\n/**\n * @event mid-show - Emitted when open is set to `true`\n * @event mid-hide - Emitted when open is set to `false`\n * @event mid-after-show - Emitted after the helptext has shown an all animations are complete\n * @event mid-after-hide - Emitted after the helptext has hidden an all animations are complete\n *\n * @slot -- The default slot is for helptext content\n *\n * @cssproperty [--max-width=20rem] - Max width of the helptext content\n */\n@customElement('mid-helptext')\nexport class MinidHelptext extends styled(LitElement, styles) {\n  @query('#helptext-body')\n  body!: HTMLElement;\n\n  @query('mid-popup')\n  popup!: MinidPopup;\n\n  /**\n   * Indicates whether or not the helptext is open. You can use this in lieu of the show/hide methods.\n   */\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  /**\n   * Size of the icon\n   */\n  @property()\n  size: 'sm' | 'md' | 'lg' = 'md';\n\n  /**\n   * Placement of the popup\n   */\n  @property() placement:\n    | 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end' = 'right';\n\n  /**\n   * The distance in pixels from which to offset the helptext away from its target.\n   */\n  @property({ type: Number })\n  distance = 8;\n\n  /**\n   * The distance in pixels from which to offset the helptext along its target.\n   */\n  @property({ type: Number })\n  skidding = 0;\n\n  /**\n   * Enable this option to prevent the helptext from being clipped when the component is placed inside a container with\n   * `overflow: auto|hidden|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all,\n   * scenarios.\n   */\n  @property({ type: Boolean })\n  hoist = false;\n\n  @state()\n  filledIcon = false;\n\n  constructor() {\n    super();\n    this.addEventListener('blur', this.handleBlur, true);\n    this.addEventListener('focus', this.handleFocus, true);\n    this.addEventListener('mouseover', this.handleMouseOver);\n    this.addEventListener('mouseout', this.handleMouseOut);\n  }\n\n  disconnectedCallback() {\n    // Cleanup this event in case the helptext is removed while open\n    document.removeEventListener('keydown', this.handleDocumentKeyDown);\n  }\n\n  async firstUpdated() {\n    await this.updateComplete;\n    this.body.hidden = !this.open;\n\n    // If the helptext is visible on init, update its position\n    if (this.open) {\n      this.popup.active = true;\n      this.filledIcon = true;\n      this.popup.reposition();\n    }\n  }\n\n  private handleBlur = () => {\n    this.hide();\n  };\n\n  private handleClick = () => {\n    if (this.open) {\n      this.hide();\n    } else {\n      this.show();\n    }\n  };\n\n  private handleFocus = () => {\n    this.filledIcon = true;\n  };\n\n  private handleDocumentKeyDown = (event: KeyboardEvent) => {\n    // Pressing escape when a helptext is open should dismiss it\n    if (event.key === 'Escape') {\n      event.stopPropagation();\n      this.hide();\n    }\n  };\n\n  private handleMouseOver = () => {\n    this.filledIcon = true;\n  };\n\n  private handleMouseOut = () => {\n    if (!this.open) {\n      this.filledIcon = false;\n    }\n  };\n\n  @watch('open', { waitUntilFirstUpdate: true })\n  async handleOpenChange() {\n    if (this.open) {\n      // Show\n      this.dispatchEvent(\n        new Event('mid-show', { bubbles: true, composed: true })\n      );\n\n      document.addEventListener('keydown', this.handleDocumentKeyDown);\n\n      await stopAnimations(this.body);\n      this.body.hidden = false;\n      this.popup.active = true;\n      this.filledIcon = true;\n      const { keyframes, options } = getAnimation(this, 'helptext.show');\n      await animateTo(this.popup.popup, keyframes, options);\n      this.popup.reposition();\n\n      this.dispatchEvent(\n        new Event('mid-after-show', { bubbles: true, composed: true })\n      );\n    } else {\n      // Hide\n      this.dispatchEvent(\n        new Event('mid-hide', { bubbles: true, composed: true })\n      );\n\n      document.removeEventListener('keydown', this.handleDocumentKeyDown);\n\n      this.filledIcon = false;\n      await stopAnimations(this.body);\n      const { keyframes, options } = getAnimation(this, 'helptext.hide');\n      await animateTo(this.popup.popup, keyframes, options);\n      this.popup.active = false;\n      this.body.hidden = true;\n\n      this.dispatchEvent(\n        new Event('mid-after-hide', { bubbles: true, composed: true })\n      );\n    }\n  }\n\n  /**\n   * Shows the helptext.\n   */\n  async show() {\n    if (this.open) {\n      return undefined;\n    }\n\n    this.open = true;\n    return waitForEvent(this, 'mid-after-show');\n  }\n\n  /**\n   * Hides the helptext\n   */\n  async hide() {\n    if (!this.open) {\n      return undefined;\n    }\n\n    this.open = false;\n    return waitForEvent(this, 'mid-after-hide');\n  }\n\n  override render() {\n    const sm = this.size === 'sm';\n    const md = this.size === 'md';\n    const lg = this.size === 'lg';\n    return html`\n      <mid-popup\n        class=\"[--arrow-border-color:var(--border-color-info)] [--arrow-color:var(--background-color-info-tinted)]\"\n        ?active=${this.open}\n        placement=${this.placement}\n        distance=${this.distance}\n        skidding=${this.skidding}\n        strategy=${this.hoist ? 'fixed' : 'absolute'}\n        flip-fallback-placements=${'top-end bottom-end'}\n        flip\n        arrow\n        shift\n        hover-bridge\n      >\n        <button\n          slot=\"anchor\"\n          aria-describedby=\"helptext-body\"\n          aria-label=\"Hjelpetekst\"\n          class=\"${classMap({\n            'text-6': sm,\n            'text-7': md,\n            'text-8': lg,\n          })} text-accent-base focus-visible:focus-ring flex rounded-full\"\n          @click=\"${this.handleClick}\"\n        >\n          <mid-icon\n            name=\"questionmark-circle\"\n            library=\"system\"\n            class=\"${classMap({\n              hidden: this.filledIcon,\n            })}\"\n          ></mid-icon>\n          <mid-icon\n            name=\"questionmark-circle-fill\"\n            library=\"system\"\n            class=\"${classMap({\n              hidden: !this.filledIcon,\n            })}\"\n          ></mid-icon>\n        </button>\n\n        <div\n          id=\"helptext-body\"\n          class=\"${classMap({\n            'text-body-sm': sm,\n            'text-body-md': md,\n            'text-body-lg': lg,\n          })} bg-info-tinted text-info border-info w-max max-w-(--max-width) rounded border px-4 py-3\"\n          aria-live=${this.open ? 'polite' : 'off'}\n          role=\"status\"\n        >\n          <slot></slot>\n        </div>\n      </mid-popup>\n    `;\n  }\n}\n\nsetDefaultAnimation('helptext.show', {\n  keyframes: [\n    { opacity: 0, scale: 0.8 },\n    { opacity: 1, scale: 1 },\n  ],\n  options: { duration: 150, easing: 'ease' },\n});\n\nsetDefaultAnimation('helptext.hide', {\n  keyframes: [\n    { opacity: 1, scale: 1 },\n    { opacity: 0, scale: 0.8 },\n  ],\n  options: { duration: 150, easing: 'ease' },\n});\n"],"names":[],"mappings":"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"}

package/dist/components/icon/icon.component.d.ts

@@ -14,10 +14,6 @@ declare const MinidIcon_base: typeof LitElement;
  * @event mid-error - Emitted when the icon fails to load
  */
 export declare class MinidIcon extends MinidIcon_base {
-    #private;
-    /**
-     * @ignore
-     */
     private svg;
     /**
      * The name of the icon to draw. Available names depend on the icon library being used.
@@ -40,6 +36,7 @@ export declare class MinidIcon extends MinidIcon_base {
      *  @default nav-aksel
      */
     library: 'system' | 'country' | 'nav-aksel';
+    private hasRendered;
     /**
      * Given a URL, this function returns the resulting SVG element or an appropriate error symbol.
      */

package/dist/components/icon/icon.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"icon.component.d.ts","sourceRoot":"","sources":["../../../src/components/icon/icon.component.ts"],"names":[],"mappings":"AACA,OAAO,EAAO,kBAAkB,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAI1D,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAGpD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,SAAS,CAAC;KACvB;CACF;;AA8BD;;;;;;GAMG;AACH,qBACa,SAAU,SAAQ,cAA0B;;IACvD;;OAEG;IAEH,OAAO,CAAC,GAAG,CAAgD;IAE3D;;;;OAIG;IAEH,IAAI,CAAC,EAAE,WAAW,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IAEnC;;;OAGG;IAEH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;;OAGG;IAEH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;;OAGG;IAEH,OAAO,EAAE,QAAQ,GAAG,SAAS,GAAG,WAAW,CAAe;IAO1D;;OAEG;YACW,WAAW;IA8CzB,YAAY;IAMZ,iBAAiB;IAaX,OAAO;IA4Eb,SAAS,CAAC,MAAM;CAGjB"}
+{"version":3,"file":"icon.component.d.ts","sourceRoot":"","sources":["../../../src/components/icon/icon.component.ts"],"names":[],"mappings":"AACA,OAAO,EAAO,kBAAkB,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAI1D,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAGpD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,SAAS,CAAC;KACvB;CACF;;AA8BD;;;;;;GAMG;AACH,qBACa,SAAU,SAAQ,cAA0B;IAEvD,OAAO,CAAC,GAAG,CAAgD;IAE3D;;;;OAIG;IAEH,IAAI,CAAC,EAAE,WAAW,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IAEnC;;;OAGG;IAEH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;;OAGG;IAEH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;;OAGG;IAEH,OAAO,EAAE,QAAQ,GAAG,SAAS,GAAG,WAAW,CAAe;IAE1D,OAAO,CAAC,WAAW,CAAS;IAE5B;;OAEG;YACW,WAAW;IA8CzB,YAAY;IAMZ,iBAAiB;IAaX,OAAO;IA0Eb,SAAS,CAAC,MAAM;CAGjB"}

package/dist/components/icon/icon.js

@@ -84,9 +84,6 @@ const systemIcons = {
 };
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __typeError = (msg) => {
-  throw TypeError(msg);
-};
 var __decorateClass = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
@@ -95,11 +92,6 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
-var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), member.get(obj));
-var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
-var _hasRendered;
 const styles = [
   css`
     :host {
@@ -125,7 +117,7 @@ let MinidIcon = class extends styled(LitElement, styles) {
     super(...arguments);
     this.svg = null;
     this.library = "nav-aksel";
-    __privateAdd(this, _hasRendered, false);
+    this.hasRendered = false;
   }
   /**
    * Given a URL, this function returns the resulting SVG element or an appropriate error symbol.
@@ -168,7 +160,7 @@ let MinidIcon = class extends styled(LitElement, styles) {
     }
   }
   firstUpdated() {
-    __privateSet(this, _hasRendered, true);
+    this.hasRendered = true;
     this.setIcon();
   }
   handleLabelChange() {
@@ -212,7 +204,7 @@ let MinidIcon = class extends styled(LitElement, styles) {
         iconCache.set(iconKey, iconResolver);
       }
     }
-    if (!__privateGet(this, _hasRendered)) {
+    if (!this.hasRendered) {
       return;
     }
     const svg = await iconResolver;
@@ -248,7 +240,6 @@ let MinidIcon = class extends styled(LitElement, styles) {
     return this.svg;
   }
 };
-_hasRendered = /* @__PURE__ */ new WeakMap();
 __decorateClass([
   state()
 ], MinidIcon.prototype, "svg", 2);

package/dist/components/icon/icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon.js","sources":["../../../src/components/icon/system.icon-library.ts","../../../src/components/icon/icon.component.ts"],"sourcesContent":["//\n// System icons are a separate library to ensure they're always available, regardless of how the default icon library is\n// configured or if its icons resolve properly.\n//\n// All MinID components must use the system library instead of the default library. For visual consistency, system\n// icons are a subset of Nav Aksel Icons.\n//\nexport const systemIcons = {\n  'circle-broken': `\n    <svg width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12 3.75C7.44365 3.75 3.75 7.44365 3.75 12C3.75 15.5909 6.04464 18.6478 9.24993 19.7808C10.1091 20.0844 11.0344 20.25 12 20.25C12.4142 20.25 12.75 20.5858 12.75 21C12.75 21.4142 12.4142 21.75 12 21.75C10.8618 21.75 9.76756 21.5546 8.75007 21.195C4.9642 19.8569 2.25 16.2464 2.25 12C2.25 6.61522 6.61522 2.25 12 2.25C16.2464 2.25 19.8569 4.9642 21.195 8.75007C21.5546 9.76756 21.75 10.8618 21.75 12C21.75 12.4142 21.4142 12.75 21 12.75C20.5858 12.75 20.25 12.4142 20.25 12C20.25 11.0344 20.0844 10.1091 19.7808 9.24993C18.6478 6.04464 15.5909 3.75 12 3.75Z\" fill=\"currentColor\"/>\n    </svg>\n  `,\n  'magnifying-glass': `\n    <svg width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M10.5 3.25C6.49594 3.25 3.25 6.49594 3.25 10.5C3.25 14.5041 6.49594 17.75 10.5 17.75C12.2319 17.75 13.8219 17.1427 15.0689 16.1295L20.4801 21.5407C20.773 21.8336 21.2478 21.8336 21.5407 21.5407C21.8336 21.2478 21.8336 20.773 21.5407 20.4801L16.1295 15.0689C17.1427 13.8219 17.75 12.2319 17.75 10.5C17.75 6.49594 14.5041 3.25 10.5 3.25ZM4.75 10.5C4.75 7.32436 7.32436 4.75 10.5 4.75C13.6756 4.75 16.25 7.32436 16.25 10.5C16.25 13.6756 13.6756 16.25 10.5 16.25C7.32436 16.25 4.75 13.6756 4.75 10.5Z\" fill=\"currentColor\"/>\n    </svg>\n\n  `,\n  'questionmark-circle-fill': `\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" fill=\"none\" aria-hidden=\"true\" viewBox=\"0 0 24 24\">\n      <path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M12 0c6.627 0 12 5.373 12 12s-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0Zm0 16a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm0-11c2.205 0 4 1.657 4 3.693 0 .986-.416 1.914-1.172 2.612l-.593.54-.294.28c-.477.466-.869.94-.936 1.417l-.01.144v.814h-1.991v-.814c0-1.254.84-2.214 1.675-3.002l.74-.68c.38-.35.59-.816.59-1.31 0-1.024-.901-1.856-2.01-1.856-1.054 0-1.922.755-2.002 1.71l-.006.145H8C8 6.657 9.794 5 12 5Z\" clip-rule=\"evenodd\"/>\n    </svg>\n  `,\n  'questionmark-circle': `\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" fill=\"none\" aria-hidden=\"true\" viewBox=\"0 0 24 24\">\n      <path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M12 0c6.627 0 12 5.373 12 12s-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0Zm0 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2Zm0 14a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm0-11c2.205 0 4 1.657 4 3.693 0 .986-.416 1.914-1.172 2.612l-.593.54-.294.28c-.477.466-.869.94-.936 1.417l-.01.144v.814h-1.991v-.814c0-1.254.84-2.214 1.675-3.002l.74-.68c.38-.35.59-.816.59-1.31 0-1.024-.901-1.856-2.01-1.856-1.054 0-1.922.755-2.002 1.71l-.006.145H8C8 6.657 9.794 5 12 5Z\" clip-rule=\"evenodd\"/>\n    </svg>\n  `,\n  'xmark-octagon-fill': `\n    <svg width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M7.74175 2.46967C7.8824 2.32902 8.07317 2.25 8.27208 2.25L15.7279 2.25C15.9268 2.25 16.1176 2.32902 16.2583 2.46967L21.5303 7.74175C21.671 7.8824 21.75 8.07317 21.75 8.27208V15.7279C21.75 15.9268 21.671 16.1176 21.5303 16.2583L16.2583 21.5303C16.1176 21.671 15.9268 21.75 15.7279 21.75H8.27208C8.07316 21.75 7.8824 21.671 7.74175 21.5303L2.46967 16.2583C2.32902 16.1176 2.25 15.9268 2.25 15.7279L2.25 8.27208C2.25 8.07317 2.32902 7.8824 2.46967 7.74175L7.74175 2.46967ZM9.03033 7.96967C8.73744 7.67678 8.26256 7.67678 7.96967 7.96967C7.67678 8.26256 7.67678 8.73744 7.96967 9.03033L10.9393 12L7.96967 14.9697C7.67678 15.2626 7.67678 15.7374 7.96967 16.0303C8.26256 16.3232 8.73744 16.3232 9.03033 16.0303L12 13.0607L14.9697 16.0303C15.2626 16.3232 15.7374 16.3232 16.0303 16.0303C16.3232 15.7374 16.3232 15.2626 16.0303 14.9697L13.0607 12L16.0303 9.03033C16.3232 8.73744 16.3232 8.26256 16.0303 7.96967C15.7374 7.67678 15.2626 7.67678 14.9697 7.96967L12 10.9393L9.03033 7.96967Z\" fill=\"currentColor\"/>\n    </svg>\n  `,\n  'exclamationmark-triangle-fill': `\n    <svg width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M11.9999 2.25C12.273 2.25 12.5244 2.3984 12.6565 2.63743L22.1827 19.8874C22.311 20.1198 22.307 20.4026 22.1721 20.6312C22.0372 20.8597 21.7916 21 21.5262 21H2.47363C2.20823 21 1.96259 20.8597 1.82771 20.6312C1.69283 20.4026 1.68879 20.1198 1.8171 19.8874L11.3434 2.63743C11.4754 2.3984 11.7269 2.25 11.9999 2.25ZM12.001 8.75C12.4152 8.75 12.751 9.08579 12.751 9.5V13.5C12.751 13.9142 12.4152 14.25 12.001 14.25C11.5868 14.25 11.251 13.9142 11.251 13.5V9.5C11.251 9.08579 11.5868 8.75 12.001 8.75ZM11.001 16.5C11.001 15.9477 11.4487 15.5 12.001 15.5C12.5533 15.5 13.001 15.9477 13.001 16.5C13.001 17.0523 12.5533 17.5 12.001 17.5C11.4487 17.5 11.001 17.0523 11.001 16.5Z\" fill=\"currentColor\"/>\n    </svg>\n  `,\n  'checkmark-circle-fill': `\n    <svg width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12 21.75C17.3848 21.75 21.75 17.3848 21.75 12C21.75 6.61522 17.3848 2.25 12 2.25C6.61522 2.25 2.25 6.61522 2.25 12C2.25 17.3848 6.61522 21.75 12 21.75ZM16.9536 9.27485C17.2434 8.93229 17.2007 8.41962 16.8582 8.12977C16.5156 7.83991 16.0029 7.88263 15.7131 8.22519L10.3251 14.5928L7.69952 11.9672C7.38222 11.6499 6.86778 11.6499 6.55048 11.9672C6.23317 12.2845 6.23317 12.7989 6.55048 13.1162L9.80048 16.3662C9.96114 16.5269 10.1817 16.6129 10.4088 16.6035C10.6358 16.594 10.8485 16.49 10.9953 16.3165L16.9536 9.27485Z\" fill=\"currentColor\"/>\n    </svg>\n  `,\n  'eye-slash': `\n    <svg width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M21.0303 5.03033C21.3232 4.73744 21.3232 4.26256 21.0303 3.96967C20.7374 3.67678 20.2626 3.67678 19.9697 3.96967L16.659 7.28033C15.3593 6.67264 13.8043 6.25 12 6.25C8.77743 6.25 6.36338 7.59591 4.76986 8.92384C3.97354 9.58744 3.37644 10.2507 2.97685 10.7502C2.77672 11.0004 2.62518 11.2107 2.52208 11.361C2.4705 11.4362 2.43096 11.4966 2.40345 11.5396C2.38969 11.5611 2.37894 11.5782 2.37118 11.5908L2.36178 11.606L2.35877 11.611L2.35768 11.6128C2.35768 11.6128 2.35688 11.6141 3 12L2.35688 11.6141C2.21437 11.8517 2.21437 12.1484 2.35688 12.3859L2.35826 12.3882L2.36033 12.3916L2.36653 12.4017L2.38715 12.4348C2.40456 12.4624 2.42932 12.5009 2.46141 12.5492C2.52559 12.6457 2.61927 12.7814 2.74252 12.9466C2.98876 13.2768 3.35458 13.7273 3.84068 14.2208C4.64096 15.0333 5.77932 15.9744 7.25858 16.6808L3.96967 19.9697C3.67678 20.2626 3.67678 20.7374 3.96967 21.0303C4.26256 21.3232 4.73744 21.3232 5.03033 21.0303L10.5954 15.4653C10.6007 15.4601 10.6061 15.4549 10.6113 15.4495L10.6165 15.4441L15.4441 10.6165C15.4514 10.6096 15.4584 10.6025 15.4653 10.5954L21.0303 5.03033ZM13.914 10.0254L10.0254 13.914C9.91032 13.7953 9.80586 13.6661 9.71346 13.5278C9.47911 13.1771 9.32859 12.7772 9.27353 12.3589C9.21847 11.9407 9.26035 11.5155 9.39594 11.116C9.53153 10.7166 9.75719 10.3537 10.0555 10.0555C10.3537 9.75719 10.7166 9.53153 11.116 9.39594C11.5155 9.26035 11.9407 9.21847 12.3589 9.27353C12.7772 9.32859 13.1771 9.47911 13.5278 9.71346C13.6661 9.80586 13.7953 9.91033 13.914 10.0254ZM14.3612 8.46626C14.5814 8.61342 14.7867 8.78038 14.9747 8.96462L15.5189 8.42045C14.5061 8.01586 13.3343 7.75 12 7.75C9.22257 7.75 7.13662 8.9041 5.73014 10.0762C5.02646 10.6626 4.49856 11.2493 4.14815 11.6873C4.05539 11.8032 3.97534 11.9084 3.90802 12L3.94498 12.0499C4.15707 12.3343 4.47875 12.7311 4.90932 13.1682C5.71064 13.9817 6.8738 14.9197 8.39477 15.5446L8.96462 14.9747C8.78038 14.7867 8.61342 14.5814 8.46625 14.3612C8.10408 13.8191 7.87145 13.2011 7.78636 12.5547C7.70127 11.9084 7.766 11.2512 7.97555 10.6339C8.18509 10.0166 8.53384 9.45576 8.9948 8.9948C9.45576 8.53384 10.0166 8.18509 10.6339 7.97555C11.2512 7.766 11.9084 7.70127 12.5547 7.78636C13.2011 7.87145 13.8191 8.10408 14.3612 8.46626ZM19.5988 9.24339C19.2909 8.96625 18.8167 8.99114 18.5396 9.29898C18.2624 9.60682 18.2873 10.081 18.5952 10.3582C18.7178 10.4686 18.8341 10.5782 18.9442 10.6859C19.4237 11.1555 19.7822 11.589 20.0189 11.9022C20.0448 11.9364 20.0691 11.9691 20.092 12.0002C20.0247 12.0918 19.9446 12.197 19.8518 12.3129C19.5014 12.7509 18.9735 13.3376 18.2699 13.924C16.8634 15.0961 14.7774 16.2502 12 16.2502C11.5858 16.2502 11.25 16.586 11.25 17.0002C11.25 17.4144 11.5858 17.7502 12 17.7502C15.2226 17.7502 17.6366 16.4043 19.2301 15.0764C20.0265 14.4128 20.6236 13.7495 21.0232 13.25C21.2233 12.9998 21.3748 12.7895 21.4779 12.6392C21.5295 12.564 21.569 12.5036 21.5965 12.4606C21.6023 12.4516 21.6076 12.4433 21.6123 12.4359C21.6188 12.4255 21.6243 12.4167 21.6288 12.4094L21.6382 12.3942L21.6412 12.3892L21.6428 12.3867C21.7853 12.1492 21.7856 11.8518 21.6431 11.6143L21 12.0002C21.6431 11.6143 21.6425 11.6134 21.6425 11.6133L21.6416 11.6119L21.6394 11.6082L21.6326 11.5971L21.6099 11.5607C21.5907 11.5303 21.5633 11.4878 21.5277 11.4346C21.4565 11.3283 21.3525 11.1789 21.2155 10.9977C20.9419 10.6357 20.5349 10.1442 19.9937 9.61422C19.8692 9.49235 19.7376 9.36837 19.5988 9.24339ZM21 12.0002L21.6428 12.3867C21.6429 12.3864 21.6431 12.3861 21 12.0002Z\" fill=\"currentColor\"/>\n    </svg>\n  `,\n  eye: `\n    <svg width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M4.14838 12.3172C4.0542 12.1994 3.97317 12.0926 3.90533 12C3.97317 11.9074 4.0542 11.8006 4.14838 11.6828C4.49853 11.2446 5.02627 10.6584 5.72985 10.0727C7.13607 8.90197 9.22211 7.75 12 7.75C9.65279 7.75 7.75 9.65279 7.75 12C7.75 14.3472 9.65279 16.25 12 16.25C9.22211 16.25 7.13607 15.098 5.72985 13.9273C5.02627 13.3416 4.49853 12.7554 4.14838 12.3172ZM12 16.25C14.3472 16.25 16.25 14.3472 16.25 12C16.25 9.65279 14.3472 7.75 12 7.75C14.7779 7.75 16.8639 8.90197 18.2701 10.0727C18.9737 10.6584 19.5015 11.2446 19.8516 11.6828C19.9458 11.8006 20.0268 11.9074 20.0947 12C20.0268 12.0926 19.9458 12.1994 19.8516 12.3172C19.5015 12.7554 18.9737 13.3416 18.2701 13.9273C16.8639 15.098 14.7779 16.25 12 16.25ZM12 6.25C8.77789 6.25 6.36393 7.59303 4.77014 8.91985C3.97373 9.58286 3.37647 10.246 2.97662 10.7463C2.77639 10.9968 2.6246 11.2079 2.52109 11.3596C2.46936 11.4354 2.42935 11.4969 2.4011 11.5416C2.38707 11.5638 2.37537 11.5828 2.36621 11.598C2.36186 11.6052 2.35682 11.6137 2.35187 11.6223C2.34981 11.6259 2.34523 11.6339 2.33994 11.6438C2.33787 11.6476 2.33154 11.6594 2.32419 11.6747C2.32003 11.6835 2.30949 11.7072 2.30329 11.7223C2.29144 11.7541 2.2578 11.8921 2.25 12C2.2578 12.1079 2.29144 12.2459 2.30329 12.2777C2.30949 12.2928 2.32003 12.3165 2.32419 12.3253C2.33154 12.3406 2.33787 12.3524 2.33994 12.3562C2.34523 12.3661 2.34981 12.3741 2.35187 12.3777C2.35682 12.3863 2.36186 12.3948 2.36621 12.402C2.37537 12.4172 2.38707 12.4362 2.4011 12.4584C2.42935 12.5031 2.46936 12.5646 2.52109 12.6404C2.6246 12.7921 2.77639 13.0032 2.97662 13.2537C3.37647 13.754 3.97373 14.4171 4.77015 15.0802C6.36393 16.407 8.77789 17.75 12 17.75C15.2221 17.75 17.6361 16.407 19.2299 15.0802C20.0263 14.4171 20.6235 13.754 21.0234 13.2537C21.2236 13.0032 21.3754 12.7921 21.4789 12.6404C21.5306 12.5646 21.5706 12.5031 21.5989 12.4584C21.6129 12.4362 21.6246 12.4172 21.6338 12.402L21.6391 12.3931L21.6481 12.3777C21.6502 12.3741 21.6548 12.3661 21.6601 12.3562C21.6621 12.3524 21.6685 12.3406 21.6758 12.3253C21.68 12.3165 21.6905 12.2928 21.6967 12.2777C21.7086 12.2459 21.7422 12.1079 21.75 12C21.7422 11.8921 21.7086 11.7541 21.6967 11.7223C21.6905 11.7072 21.68 11.6835 21.6758 11.6747C21.6685 11.6594 21.6621 11.6476 21.6601 11.6438C21.6548 11.6339 21.6502 11.6259 21.6481 11.6223C21.6457 11.6181 21.6433 11.614 21.6409 11.61C21.6384 11.6058 21.636 11.6017 21.6338 11.598C21.6246 11.5828 21.6129 11.5638 21.5989 11.5416C21.5706 11.4969 21.5306 11.4354 21.4789 11.3596C21.3754 11.2079 21.2236 10.9968 21.0234 10.7463C20.6235 10.246 20.0263 9.58286 19.2299 8.91985C17.6361 7.59303 15.2221 6.25 12 6.25ZM9.25 12C9.25 10.4812 10.4812 9.25 12 9.25C13.5188 9.25 14.75 10.4812 14.75 12C14.75 13.5188 13.5188 14.75 12 14.75C10.4812 14.75 9.25 13.5188 9.25 12Z\" fill=\"currentColor\"/>\n    </svg>\n  `,\n  'information-square-fill': `\n    <svg width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M3.25 4C3.25 3.58579 3.58579 3.25 4 3.25H20C20.4142 3.25 20.75 3.58579 20.75 4V20C20.75 20.4142 20.4142 20.75 20 20.75H4C3.58579 20.75 3.25 20.4142 3.25 20V4ZM11 7.75C11 7.19772 11.4477 6.75 12 6.75C12.5523 6.75 13 7.19772 13 7.75C13 8.30228 12.5523 8.75 12 8.75C11.4477 8.75 11 8.30228 11 7.75ZM9.75 10.75C9.75 10.3358 10.0858 10 10.5 10H12C12.4142 10 12.75 10.3358 12.75 10.75V15.5H13.5C13.9142 15.5 14.25 15.8358 14.25 16.25C14.25 16.6642 13.9142 17 13.5 17H12H10.5C10.0858 17 9.75 16.6642 9.75 16.25C9.75 15.8358 10.0858 15.5 10.5 15.5H11.25V11.5H10.5C10.0858 11.5 9.75 11.1642 9.75 10.75Z\" fill=\"currentColor\"/>\n    </svg>\n  `,\n  'padlock-locked-fill': `\n    <svg width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12 2.25C9.37665 2.25 7.25 4.37665 7.25 7V9.25H7C6.0335 9.25 5.25 10.0335 5.25 11V20C5.25 20.4142 5.58579 20.75 6 20.75H18C18.4142 20.75 18.75 20.4142 18.75 20V11C18.75 10.0335 17.9665 9.25 17 9.25H16.75V7C16.75 4.37665 14.6234 2.25 12 2.25ZM15.25 9.25V7C15.25 5.20507 13.7949 3.75 12 3.75C10.2051 3.75 8.75 5.20507 8.75 7V9.25H15.25ZM12 13C11.1716 13 10.5 13.6716 10.5 14.5C10.5 15.0552 10.8016 15.54 11.25 15.7993V17C11.25 17.4142 11.5858 17.75 12 17.75C12.4142 17.75 12.75 17.4142 12.75 17V15.7993C13.1984 15.54 13.5 15.0552 13.5 14.5C13.5 13.6716 12.8284 13 12 13Z\" fill=\"currentColor\"/>\n    </svg>\n  `,\n  xmark: `\n    <svg width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M6.53033 5.46967C6.23744 5.17678 5.76256 5.17678 5.46967 5.46967C5.17678 5.76256 5.17678 6.23744 5.46967 6.53033L10.9393 12L5.46967 17.4697C5.17678 17.7626 5.17678 18.2374 5.46967 18.5303C5.76256 18.8232 6.23744 18.8232 6.53033 18.5303L12 13.0607L17.4697 18.5303C17.7626 18.8232 18.2374 18.8232 18.5303 18.5303C18.8232 18.2374 18.8232 17.7626 18.5303 17.4697L13.0607 12L18.5303 6.53033C18.8232 6.23744 18.8232 5.76256 18.5303 5.46967C18.2374 5.17678 17.7626 5.17678 17.4697 5.46967L12 10.9393L6.53033 5.46967Z\" fill=\"currentColor\"/>\n    </svg>\n  `,\n};\n","import { customElement, property, state } from 'lit/decorators.js';\nimport { css, HTMLTemplateResult, LitElement } from 'lit';\nimport { styled } from '../../mixins/tailwind.mixin';\nimport { watch } from '../../internal/watch.ts';\nimport { isTemplateResult } from 'lit/directive-helpers.js';\nimport { MidIconName } from '../../types/icon-name';\nimport { systemIcons } from './system.icon-library.ts';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-icon': MinidIcon;\n  }\n}\n\nconst styles = [\n  css`\n    :host {\n      display: inline-flex;\n      width: 1em;\n      height: 1em;\n      box-sizing: content-box !important;\n    }\n\n    svg {\n      width: 100%;\n      height: 100%;\n      display: block;\n    }\n  `,\n];\n\nconst CACHEABLE_ERROR = Symbol();\nconst RETRYABLE_ERROR = Symbol();\ntype SVGResult =\n  | HTMLTemplateResult\n  | SVGSVGElement\n  | typeof RETRYABLE_ERROR\n  | typeof CACHEABLE_ERROR;\n\nlet parser: DOMParser;\nconst iconCache = new Map<string, Promise<SVGResult>>();\n\n/**\n *\n * Size and color can be adjusted with `font-size` and `color` css properties\n *\n * @event mid-load - Emitted when the icon has loaded\n * @event mid-error - Emitted when the icon fails to load\n */\n@customElement('mid-icon')\nexport class MinidIcon extends styled(LitElement, styles) {\n  /**\n   * @ignore\n   */\n  @state()\n  private svg: SVGElement | HTMLTemplateResult | null = null;\n\n  /**\n   * The name of the icon to draw. Available names depend on the icon library being used.\n   * Preview default icons [here](https://aksel.nav.no/ikoner)\n   * @type string\n   */\n  @property({ reflect: true })\n  name?: MidIconName | (string & {}); // weird typing makes sure we have both intellisense and ability to input any string\n\n  /**\n   * An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and\n   * can result in XSS attacks.\n   */\n  @property()\n  src?: string;\n\n  /**\n   * An alternate description to use for assistive devices. If omitted, the icon will be considered presentational and\n   * ignored by assistive devices.\n   */\n  @property()\n  alt?: string;\n\n  /**\n   * The name of a registered custom icon library.\n   *  @default nav-aksel\n   */\n  @property()\n  library: 'system' | 'country' | 'nav-aksel' = 'nav-aksel';\n\n  /**\n   * @ignore\n   */\n  #hasRendered = false;\n\n  /**\n   * Given a URL, this function returns the resulting SVG element or an appropriate error symbol.\n   */\n  private async resolveIcon(url: string): Promise<SVGResult> {\n    let svgString = '';\n\n    if (url.startsWith('data:image/svg+xml')) {\n      svgString = decodeURIComponent(url);\n    } else {\n      let fileData: Response;\n      try {\n        fileData = await fetch(url, { mode: 'cors' });\n\n        if (!fileData.ok) {\n          return fileData.status === 410 ? CACHEABLE_ERROR : RETRYABLE_ERROR;\n        }\n      } catch {\n        return RETRYABLE_ERROR;\n      }\n      svgString = await fileData.text();\n    }\n\n    try {\n      const div = document.createElement('div');\n      div.innerHTML = svgString;\n\n      const svg = div.firstElementChild;\n      if (svg?.tagName?.toLowerCase() !== 'svg') {\n        return CACHEABLE_ERROR;\n      }\n\n      if (!parser) {\n        parser = new DOMParser();\n      }\n      const doc = parser.parseFromString(svg.outerHTML, 'text/html');\n\n      const svgEl = doc.body.querySelector('svg');\n      if (!svgEl) {\n        return CACHEABLE_ERROR;\n      }\n\n      svgEl.part.add('svg');\n\n      return document.adoptNode(svgEl);\n    } catch {\n      return CACHEABLE_ERROR;\n    }\n  }\n\n  firstUpdated() {\n    this.#hasRendered = true;\n    this.setIcon();\n  }\n\n  @watch('alt')\n  handleLabelChange() {\n    if (typeof this.alt === 'string' && this.alt.length > 0) {\n      this.setAttribute('role', 'img');\n      this.setAttribute('aria-label', this.alt);\n      this.removeAttribute('aria-hidden');\n    } else {\n      this.removeAttribute('role');\n      this.removeAttribute('aria-label');\n      this.setAttribute('aria-hidden', 'true');\n    }\n  }\n\n  @watch(['name', 'src', 'library'])\n  async setIcon() {\n    if (!this.library && !this.name && !this.src) {\n      this.svg = null;\n      return;\n    }\n\n    let iconResolver = iconCache.get(`${this.library}-${this.name}`);\n    const iconKey = `${this.library}-${this.name}`;\n\n    if (!iconResolver) {\n      let svgUrl: string;\n\n      if (this.src) {\n        iconResolver = this.resolveIcon(this.src);\n        iconCache.set(iconKey, iconResolver);\n      } else if (this.library === 'nav-aksel') {\n        svgUrl = await import(`../../assets/icons/${this.name}.svg`).then(\n          (result) => result.default\n        );\n        iconResolver = this.resolveIcon(svgUrl);\n        iconCache.set(iconKey, iconResolver);\n      } else if (this.library === 'country') {\n        svgUrl = await import(`../../assets/flags/${this.name}.svg`).then(\n          (result) => result.default\n        );\n        iconResolver = this.resolveIcon(svgUrl);\n        iconCache.set(iconKey, iconResolver);\n      } else if (this.library === 'system') {\n        svgUrl = `data:image/svg+xml,${encodeURIComponent(systemIcons[this.name as keyof typeof systemIcons])}`;\n        iconResolver = this.resolveIcon(svgUrl);\n        iconCache.set(iconKey, iconResolver);\n      }\n    }\n\n    // If we haven't rendered yet, exit early. This avoids unnecessary work due to watching multiple props.\n    if (!this.#hasRendered) {\n      return;\n    }\n\n    const svg = await iconResolver;\n\n    if (!svg) {\n      return;\n    }\n\n    if (svg === RETRYABLE_ERROR) {\n      iconCache.delete(iconKey);\n    }\n\n    if (iconKey !== `${this.library}-${this.name}`) {\n      // If the url has changed while fetching the icon, ignore this request\n      return;\n    }\n\n    if (isTemplateResult(svg)) {\n      this.svg = svg;\n\n      return;\n    }\n\n    switch (svg) {\n      case RETRYABLE_ERROR:\n      case CACHEABLE_ERROR:\n        this.svg = null;\n        this.dispatchEvent(\n          new Event('mid-error', { bubbles: true, composed: true })\n        );\n        break;\n      default:\n        this.svg = svg.cloneNode(true) as SVGElement;\n        this.dispatchEvent(\n          new Event('mid-load', { bubbles: true, composed: true })\n        );\n    }\n  }\n\n  protected render() {\n    return this.svg;\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"icon.js","sources":["../../../src/components/icon/system.icon-library.ts","../../../src/components/icon/icon.component.ts"],"sourcesContent":["//\n// System icons are a separate library to ensure they're always available, regardless of how the default icon library is\n// configured or if its icons resolve properly.\n//\n// All MinID components must use the system library instead of the default library. For visual consistency, system\n// icons are a subset of Nav Aksel Icons.\n//\nexport const systemIcons = {\n  'circle-broken': `\n    <svg width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12 3.75C7.44365 3.75 3.75 7.44365 3.75 12C3.75 15.5909 6.04464 18.6478 9.24993 19.7808C10.1091 20.0844 11.0344 20.25 12 20.25C12.4142 20.25 12.75 20.5858 12.75 21C12.75 21.4142 12.4142 21.75 12 21.75C10.8618 21.75 9.76756 21.5546 8.75007 21.195C4.9642 19.8569 2.25 16.2464 2.25 12C2.25 6.61522 6.61522 2.25 12 2.25C16.2464 2.25 19.8569 4.9642 21.195 8.75007C21.5546 9.76756 21.75 10.8618 21.75 12C21.75 12.4142 21.4142 12.75 21 12.75C20.5858 12.75 20.25 12.4142 20.25 12C20.25 11.0344 20.0844 10.1091 19.7808 9.24993C18.6478 6.04464 15.5909 3.75 12 3.75Z\" fill=\"currentColor\"/>\n    </svg>\n  `,\n  'magnifying-glass': `\n    <svg width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M10.5 3.25C6.49594 3.25 3.25 6.49594 3.25 10.5C3.25 14.5041 6.49594 17.75 10.5 17.75C12.2319 17.75 13.8219 17.1427 15.0689 16.1295L20.4801 21.5407C20.773 21.8336 21.2478 21.8336 21.5407 21.5407C21.8336 21.2478 21.8336 20.773 21.5407 20.4801L16.1295 15.0689C17.1427 13.8219 17.75 12.2319 17.75 10.5C17.75 6.49594 14.5041 3.25 10.5 3.25ZM4.75 10.5C4.75 7.32436 7.32436 4.75 10.5 4.75C13.6756 4.75 16.25 7.32436 16.25 10.5C16.25 13.6756 13.6756 16.25 10.5 16.25C7.32436 16.25 4.75 13.6756 4.75 10.5Z\" fill=\"currentColor\"/>\n    </svg>\n\n  `,\n  'questionmark-circle-fill': `\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" fill=\"none\" aria-hidden=\"true\" viewBox=\"0 0 24 24\">\n      <path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M12 0c6.627 0 12 5.373 12 12s-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0Zm0 16a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm0-11c2.205 0 4 1.657 4 3.693 0 .986-.416 1.914-1.172 2.612l-.593.54-.294.28c-.477.466-.869.94-.936 1.417l-.01.144v.814h-1.991v-.814c0-1.254.84-2.214 1.675-3.002l.74-.68c.38-.35.59-.816.59-1.31 0-1.024-.901-1.856-2.01-1.856-1.054 0-1.922.755-2.002 1.71l-.006.145H8C8 6.657 9.794 5 12 5Z\" clip-rule=\"evenodd\"/>\n    </svg>\n  `,\n  'questionmark-circle': `\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" fill=\"none\" aria-hidden=\"true\" viewBox=\"0 0 24 24\">\n      <path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M12 0c6.627 0 12 5.373 12 12s-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0Zm0 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2Zm0 14a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm0-11c2.205 0 4 1.657 4 3.693 0 .986-.416 1.914-1.172 2.612l-.593.54-.294.28c-.477.466-.869.94-.936 1.417l-.01.144v.814h-1.991v-.814c0-1.254.84-2.214 1.675-3.002l.74-.68c.38-.35.59-.816.59-1.31 0-1.024-.901-1.856-2.01-1.856-1.054 0-1.922.755-2.002 1.71l-.006.145H8C8 6.657 9.794 5 12 5Z\" clip-rule=\"evenodd\"/>\n    </svg>\n  `,\n  'xmark-octagon-fill': `\n    <svg width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M7.74175 2.46967C7.8824 2.32902 8.07317 2.25 8.27208 2.25L15.7279 2.25C15.9268 2.25 16.1176 2.32902 16.2583 2.46967L21.5303 7.74175C21.671 7.8824 21.75 8.07317 21.75 8.27208V15.7279C21.75 15.9268 21.671 16.1176 21.5303 16.2583L16.2583 21.5303C16.1176 21.671 15.9268 21.75 15.7279 21.75H8.27208C8.07316 21.75 7.8824 21.671 7.74175 21.5303L2.46967 16.2583C2.32902 16.1176 2.25 15.9268 2.25 15.7279L2.25 8.27208C2.25 8.07317 2.32902 7.8824 2.46967 7.74175L7.74175 2.46967ZM9.03033 7.96967C8.73744 7.67678 8.26256 7.67678 7.96967 7.96967C7.67678 8.26256 7.67678 8.73744 7.96967 9.03033L10.9393 12L7.96967 14.9697C7.67678 15.2626 7.67678 15.7374 7.96967 16.0303C8.26256 16.3232 8.73744 16.3232 9.03033 16.0303L12 13.0607L14.9697 16.0303C15.2626 16.3232 15.7374 16.3232 16.0303 16.0303C16.3232 15.7374 16.3232 15.2626 16.0303 14.9697L13.0607 12L16.0303 9.03033C16.3232 8.73744 16.3232 8.26256 16.0303 7.96967C15.7374 7.67678 15.2626 7.67678 14.9697 7.96967L12 10.9393L9.03033 7.96967Z\" fill=\"currentColor\"/>\n    </svg>\n  `,\n  'exclamationmark-triangle-fill': `\n    <svg width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M11.9999 2.25C12.273 2.25 12.5244 2.3984 12.6565 2.63743L22.1827 19.8874C22.311 20.1198 22.307 20.4026 22.1721 20.6312C22.0372 20.8597 21.7916 21 21.5262 21H2.47363C2.20823 21 1.96259 20.8597 1.82771 20.6312C1.69283 20.4026 1.68879 20.1198 1.8171 19.8874L11.3434 2.63743C11.4754 2.3984 11.7269 2.25 11.9999 2.25ZM12.001 8.75C12.4152 8.75 12.751 9.08579 12.751 9.5V13.5C12.751 13.9142 12.4152 14.25 12.001 14.25C11.5868 14.25 11.251 13.9142 11.251 13.5V9.5C11.251 9.08579 11.5868 8.75 12.001 8.75ZM11.001 16.5C11.001 15.9477 11.4487 15.5 12.001 15.5C12.5533 15.5 13.001 15.9477 13.001 16.5C13.001 17.0523 12.5533 17.5 12.001 17.5C11.4487 17.5 11.001 17.0523 11.001 16.5Z\" fill=\"currentColor\"/>\n    </svg>\n  `,\n  'checkmark-circle-fill': `\n    <svg width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12 21.75C17.3848 21.75 21.75 17.3848 21.75 12C21.75 6.61522 17.3848 2.25 12 2.25C6.61522 2.25 2.25 6.61522 2.25 12C2.25 17.3848 6.61522 21.75 12 21.75ZM16.9536 9.27485C17.2434 8.93229 17.2007 8.41962 16.8582 8.12977C16.5156 7.83991 16.0029 7.88263 15.7131 8.22519L10.3251 14.5928L7.69952 11.9672C7.38222 11.6499 6.86778 11.6499 6.55048 11.9672C6.23317 12.2845 6.23317 12.7989 6.55048 13.1162L9.80048 16.3662C9.96114 16.5269 10.1817 16.6129 10.4088 16.6035C10.6358 16.594 10.8485 16.49 10.9953 16.3165L16.9536 9.27485Z\" fill=\"currentColor\"/>\n    </svg>\n  `,\n  'eye-slash': `\n    <svg width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M21.0303 5.03033C21.3232 4.73744 21.3232 4.26256 21.0303 3.96967C20.7374 3.67678 20.2626 3.67678 19.9697 3.96967L16.659 7.28033C15.3593 6.67264 13.8043 6.25 12 6.25C8.77743 6.25 6.36338 7.59591 4.76986 8.92384C3.97354 9.58744 3.37644 10.2507 2.97685 10.7502C2.77672 11.0004 2.62518 11.2107 2.52208 11.361C2.4705 11.4362 2.43096 11.4966 2.40345 11.5396C2.38969 11.5611 2.37894 11.5782 2.37118 11.5908L2.36178 11.606L2.35877 11.611L2.35768 11.6128C2.35768 11.6128 2.35688 11.6141 3 12L2.35688 11.6141C2.21437 11.8517 2.21437 12.1484 2.35688 12.3859L2.35826 12.3882L2.36033 12.3916L2.36653 12.4017L2.38715 12.4348C2.40456 12.4624 2.42932 12.5009 2.46141 12.5492C2.52559 12.6457 2.61927 12.7814 2.74252 12.9466C2.98876 13.2768 3.35458 13.7273 3.84068 14.2208C4.64096 15.0333 5.77932 15.9744 7.25858 16.6808L3.96967 19.9697C3.67678 20.2626 3.67678 20.7374 3.96967 21.0303C4.26256 21.3232 4.73744 21.3232 5.03033 21.0303L10.5954 15.4653C10.6007 15.4601 10.6061 15.4549 10.6113 15.4495L10.6165 15.4441L15.4441 10.6165C15.4514 10.6096 15.4584 10.6025 15.4653 10.5954L21.0303 5.03033ZM13.914 10.0254L10.0254 13.914C9.91032 13.7953 9.80586 13.6661 9.71346 13.5278C9.47911 13.1771 9.32859 12.7772 9.27353 12.3589C9.21847 11.9407 9.26035 11.5155 9.39594 11.116C9.53153 10.7166 9.75719 10.3537 10.0555 10.0555C10.3537 9.75719 10.7166 9.53153 11.116 9.39594C11.5155 9.26035 11.9407 9.21847 12.3589 9.27353C12.7772 9.32859 13.1771 9.47911 13.5278 9.71346C13.6661 9.80586 13.7953 9.91033 13.914 10.0254ZM14.3612 8.46626C14.5814 8.61342 14.7867 8.78038 14.9747 8.96462L15.5189 8.42045C14.5061 8.01586 13.3343 7.75 12 7.75C9.22257 7.75 7.13662 8.9041 5.73014 10.0762C5.02646 10.6626 4.49856 11.2493 4.14815 11.6873C4.05539 11.8032 3.97534 11.9084 3.90802 12L3.94498 12.0499C4.15707 12.3343 4.47875 12.7311 4.90932 13.1682C5.71064 13.9817 6.8738 14.9197 8.39477 15.5446L8.96462 14.9747C8.78038 14.7867 8.61342 14.5814 8.46625 14.3612C8.10408 13.8191 7.87145 13.2011 7.78636 12.5547C7.70127 11.9084 7.766 11.2512 7.97555 10.6339C8.18509 10.0166 8.53384 9.45576 8.9948 8.9948C9.45576 8.53384 10.0166 8.18509 10.6339 7.97555C11.2512 7.766 11.9084 7.70127 12.5547 7.78636C13.2011 7.87145 13.8191 8.10408 14.3612 8.46626ZM19.5988 9.24339C19.2909 8.96625 18.8167 8.99114 18.5396 9.29898C18.2624 9.60682 18.2873 10.081 18.5952 10.3582C18.7178 10.4686 18.8341 10.5782 18.9442 10.6859C19.4237 11.1555 19.7822 11.589 20.0189 11.9022C20.0448 11.9364 20.0691 11.9691 20.092 12.0002C20.0247 12.0918 19.9446 12.197 19.8518 12.3129C19.5014 12.7509 18.9735 13.3376 18.2699 13.924C16.8634 15.0961 14.7774 16.2502 12 16.2502C11.5858 16.2502 11.25 16.586 11.25 17.0002C11.25 17.4144 11.5858 17.7502 12 17.7502C15.2226 17.7502 17.6366 16.4043 19.2301 15.0764C20.0265 14.4128 20.6236 13.7495 21.0232 13.25C21.2233 12.9998 21.3748 12.7895 21.4779 12.6392C21.5295 12.564 21.569 12.5036 21.5965 12.4606C21.6023 12.4516 21.6076 12.4433 21.6123 12.4359C21.6188 12.4255 21.6243 12.4167 21.6288 12.4094L21.6382 12.3942L21.6412 12.3892L21.6428 12.3867C21.7853 12.1492 21.7856 11.8518 21.6431 11.6143L21 12.0002C21.6431 11.6143 21.6425 11.6134 21.6425 11.6133L21.6416 11.6119L21.6394 11.6082L21.6326 11.5971L21.6099 11.5607C21.5907 11.5303 21.5633 11.4878 21.5277 11.4346C21.4565 11.3283 21.3525 11.1789 21.2155 10.9977C20.9419 10.6357 20.5349 10.1442 19.9937 9.61422C19.8692 9.49235 19.7376 9.36837 19.5988 9.24339ZM21 12.0002L21.6428 12.3867C21.6429 12.3864 21.6431 12.3861 21 12.0002Z\" fill=\"currentColor\"/>\n    </svg>\n  `,\n  eye: `\n    <svg width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M4.14838 12.3172C4.0542 12.1994 3.97317 12.0926 3.90533 12C3.97317 11.9074 4.0542 11.8006 4.14838 11.6828C4.49853 11.2446 5.02627 10.6584 5.72985 10.0727C7.13607 8.90197 9.22211 7.75 12 7.75C9.65279 7.75 7.75 9.65279 7.75 12C7.75 14.3472 9.65279 16.25 12 16.25C9.22211 16.25 7.13607 15.098 5.72985 13.9273C5.02627 13.3416 4.49853 12.7554 4.14838 12.3172ZM12 16.25C14.3472 16.25 16.25 14.3472 16.25 12C16.25 9.65279 14.3472 7.75 12 7.75C14.7779 7.75 16.8639 8.90197 18.2701 10.0727C18.9737 10.6584 19.5015 11.2446 19.8516 11.6828C19.9458 11.8006 20.0268 11.9074 20.0947 12C20.0268 12.0926 19.9458 12.1994 19.8516 12.3172C19.5015 12.7554 18.9737 13.3416 18.2701 13.9273C16.8639 15.098 14.7779 16.25 12 16.25ZM12 6.25C8.77789 6.25 6.36393 7.59303 4.77014 8.91985C3.97373 9.58286 3.37647 10.246 2.97662 10.7463C2.77639 10.9968 2.6246 11.2079 2.52109 11.3596C2.46936 11.4354 2.42935 11.4969 2.4011 11.5416C2.38707 11.5638 2.37537 11.5828 2.36621 11.598C2.36186 11.6052 2.35682 11.6137 2.35187 11.6223C2.34981 11.6259 2.34523 11.6339 2.33994 11.6438C2.33787 11.6476 2.33154 11.6594 2.32419 11.6747C2.32003 11.6835 2.30949 11.7072 2.30329 11.7223C2.29144 11.7541 2.2578 11.8921 2.25 12C2.2578 12.1079 2.29144 12.2459 2.30329 12.2777C2.30949 12.2928 2.32003 12.3165 2.32419 12.3253C2.33154 12.3406 2.33787 12.3524 2.33994 12.3562C2.34523 12.3661 2.34981 12.3741 2.35187 12.3777C2.35682 12.3863 2.36186 12.3948 2.36621 12.402C2.37537 12.4172 2.38707 12.4362 2.4011 12.4584C2.42935 12.5031 2.46936 12.5646 2.52109 12.6404C2.6246 12.7921 2.77639 13.0032 2.97662 13.2537C3.37647 13.754 3.97373 14.4171 4.77015 15.0802C6.36393 16.407 8.77789 17.75 12 17.75C15.2221 17.75 17.6361 16.407 19.2299 15.0802C20.0263 14.4171 20.6235 13.754 21.0234 13.2537C21.2236 13.0032 21.3754 12.7921 21.4789 12.6404C21.5306 12.5646 21.5706 12.5031 21.5989 12.4584C21.6129 12.4362 21.6246 12.4172 21.6338 12.402L21.6391 12.3931L21.6481 12.3777C21.6502 12.3741 21.6548 12.3661 21.6601 12.3562C21.6621 12.3524 21.6685 12.3406 21.6758 12.3253C21.68 12.3165 21.6905 12.2928 21.6967 12.2777C21.7086 12.2459 21.7422 12.1079 21.75 12C21.7422 11.8921 21.7086 11.7541 21.6967 11.7223C21.6905 11.7072 21.68 11.6835 21.6758 11.6747C21.6685 11.6594 21.6621 11.6476 21.6601 11.6438C21.6548 11.6339 21.6502 11.6259 21.6481 11.6223C21.6457 11.6181 21.6433 11.614 21.6409 11.61C21.6384 11.6058 21.636 11.6017 21.6338 11.598C21.6246 11.5828 21.6129 11.5638 21.5989 11.5416C21.5706 11.4969 21.5306 11.4354 21.4789 11.3596C21.3754 11.2079 21.2236 10.9968 21.0234 10.7463C20.6235 10.246 20.0263 9.58286 19.2299 8.91985C17.6361 7.59303 15.2221 6.25 12 6.25ZM9.25 12C9.25 10.4812 10.4812 9.25 12 9.25C13.5188 9.25 14.75 10.4812 14.75 12C14.75 13.5188 13.5188 14.75 12 14.75C10.4812 14.75 9.25 13.5188 9.25 12Z\" fill=\"currentColor\"/>\n    </svg>\n  `,\n  'information-square-fill': `\n    <svg width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M3.25 4C3.25 3.58579 3.58579 3.25 4 3.25H20C20.4142 3.25 20.75 3.58579 20.75 4V20C20.75 20.4142 20.4142 20.75 20 20.75H4C3.58579 20.75 3.25 20.4142 3.25 20V4ZM11 7.75C11 7.19772 11.4477 6.75 12 6.75C12.5523 6.75 13 7.19772 13 7.75C13 8.30228 12.5523 8.75 12 8.75C11.4477 8.75 11 8.30228 11 7.75ZM9.75 10.75C9.75 10.3358 10.0858 10 10.5 10H12C12.4142 10 12.75 10.3358 12.75 10.75V15.5H13.5C13.9142 15.5 14.25 15.8358 14.25 16.25C14.25 16.6642 13.9142 17 13.5 17H12H10.5C10.0858 17 9.75 16.6642 9.75 16.25C9.75 15.8358 10.0858 15.5 10.5 15.5H11.25V11.5H10.5C10.0858 11.5 9.75 11.1642 9.75 10.75Z\" fill=\"currentColor\"/>\n    </svg>\n  `,\n  'padlock-locked-fill': `\n    <svg width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12 2.25C9.37665 2.25 7.25 4.37665 7.25 7V9.25H7C6.0335 9.25 5.25 10.0335 5.25 11V20C5.25 20.4142 5.58579 20.75 6 20.75H18C18.4142 20.75 18.75 20.4142 18.75 20V11C18.75 10.0335 17.9665 9.25 17 9.25H16.75V7C16.75 4.37665 14.6234 2.25 12 2.25ZM15.25 9.25V7C15.25 5.20507 13.7949 3.75 12 3.75C10.2051 3.75 8.75 5.20507 8.75 7V9.25H15.25ZM12 13C11.1716 13 10.5 13.6716 10.5 14.5C10.5 15.0552 10.8016 15.54 11.25 15.7993V17C11.25 17.4142 11.5858 17.75 12 17.75C12.4142 17.75 12.75 17.4142 12.75 17V15.7993C13.1984 15.54 13.5 15.0552 13.5 14.5C13.5 13.6716 12.8284 13 12 13Z\" fill=\"currentColor\"/>\n    </svg>\n  `,\n  xmark: `\n    <svg width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M6.53033 5.46967C6.23744 5.17678 5.76256 5.17678 5.46967 5.46967C5.17678 5.76256 5.17678 6.23744 5.46967 6.53033L10.9393 12L5.46967 17.4697C5.17678 17.7626 5.17678 18.2374 5.46967 18.5303C5.76256 18.8232 6.23744 18.8232 6.53033 18.5303L12 13.0607L17.4697 18.5303C17.7626 18.8232 18.2374 18.8232 18.5303 18.5303C18.8232 18.2374 18.8232 17.7626 18.5303 17.4697L13.0607 12L18.5303 6.53033C18.8232 6.23744 18.8232 5.76256 18.5303 5.46967C18.2374 5.17678 17.7626 5.17678 17.4697 5.46967L12 10.9393L6.53033 5.46967Z\" fill=\"currentColor\"/>\n    </svg>\n  `,\n};\n","import { customElement, property, state } from 'lit/decorators.js';\nimport { css, HTMLTemplateResult, LitElement } from 'lit';\nimport { styled } from '../../mixins/tailwind.mixin';\nimport { watch } from '../../internal/watch.ts';\nimport { isTemplateResult } from 'lit/directive-helpers.js';\nimport { MidIconName } from '../../types/icon-name';\nimport { systemIcons } from './system.icon-library.ts';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-icon': MinidIcon;\n  }\n}\n\nconst styles = [\n  css`\n    :host {\n      display: inline-flex;\n      width: 1em;\n      height: 1em;\n      box-sizing: content-box !important;\n    }\n\n    svg {\n      width: 100%;\n      height: 100%;\n      display: block;\n    }\n  `,\n];\n\nconst CACHEABLE_ERROR = Symbol();\nconst RETRYABLE_ERROR = Symbol();\ntype SVGResult =\n  | HTMLTemplateResult\n  | SVGSVGElement\n  | typeof RETRYABLE_ERROR\n  | typeof CACHEABLE_ERROR;\n\nlet parser: DOMParser;\nconst iconCache = new Map<string, Promise<SVGResult>>();\n\n/**\n *\n * Size and color can be adjusted with `font-size` and `color` css properties\n *\n * @event mid-load - Emitted when the icon has loaded\n * @event mid-error - Emitted when the icon fails to load\n */\n@customElement('mid-icon')\nexport class MinidIcon extends styled(LitElement, styles) {\n  @state()\n  private svg: SVGElement | HTMLTemplateResult | null = null;\n\n  /**\n   * The name of the icon to draw. Available names depend on the icon library being used.\n   * Preview default icons [here](https://aksel.nav.no/ikoner)\n   * @type string\n   */\n  @property({ reflect: true })\n  name?: MidIconName | (string & {}); // weird typing makes sure we have both intellisense and ability to input any string\n\n  /**\n   * An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and\n   * can result in XSS attacks.\n   */\n  @property()\n  src?: string;\n\n  /**\n   * An alternate description to use for assistive devices. If omitted, the icon will be considered presentational and\n   * ignored by assistive devices.\n   */\n  @property()\n  alt?: string;\n\n  /**\n   * The name of a registered custom icon library.\n   *  @default nav-aksel\n   */\n  @property()\n  library: 'system' | 'country' | 'nav-aksel' = 'nav-aksel';\n\n  private hasRendered = false;\n\n  /**\n   * Given a URL, this function returns the resulting SVG element or an appropriate error symbol.\n   */\n  private async resolveIcon(url: string): Promise<SVGResult> {\n    let svgString = '';\n\n    if (url.startsWith('data:image/svg+xml')) {\n      svgString = decodeURIComponent(url);\n    } else {\n      let fileData: Response;\n      try {\n        fileData = await fetch(url, { mode: 'cors' });\n\n        if (!fileData.ok) {\n          return fileData.status === 410 ? CACHEABLE_ERROR : RETRYABLE_ERROR;\n        }\n      } catch {\n        return RETRYABLE_ERROR;\n      }\n      svgString = await fileData.text();\n    }\n\n    try {\n      const div = document.createElement('div');\n      div.innerHTML = svgString;\n\n      const svg = div.firstElementChild;\n      if (svg?.tagName?.toLowerCase() !== 'svg') {\n        return CACHEABLE_ERROR;\n      }\n\n      if (!parser) {\n        parser = new DOMParser();\n      }\n      const doc = parser.parseFromString(svg.outerHTML, 'text/html');\n\n      const svgEl = doc.body.querySelector('svg');\n      if (!svgEl) {\n        return CACHEABLE_ERROR;\n      }\n\n      svgEl.part.add('svg');\n\n      return document.adoptNode(svgEl);\n    } catch {\n      return CACHEABLE_ERROR;\n    }\n  }\n\n  firstUpdated() {\n    this.hasRendered = true;\n    this.setIcon();\n  }\n\n  @watch('alt')\n  handleLabelChange() {\n    if (typeof this.alt === 'string' && this.alt.length > 0) {\n      this.setAttribute('role', 'img');\n      this.setAttribute('aria-label', this.alt);\n      this.removeAttribute('aria-hidden');\n    } else {\n      this.removeAttribute('role');\n      this.removeAttribute('aria-label');\n      this.setAttribute('aria-hidden', 'true');\n    }\n  }\n\n  @watch(['name', 'src', 'library'])\n  async setIcon() {\n    if (!this.library && !this.name && !this.src) {\n      this.svg = null;\n      return;\n    }\n\n    let iconResolver = iconCache.get(`${this.library}-${this.name}`);\n    const iconKey = `${this.library}-${this.name}`;\n    if (!iconResolver) {\n      let svgUrl: string;\n      if (this.src) {\n        iconResolver = this.resolveIcon(this.src);\n        iconCache.set(iconKey, iconResolver);\n      } else if (this.library === 'nav-aksel') {\n        svgUrl = await import(`../../assets/icons/${this.name}.svg`).then(\n          (result) => result.default\n        );\n        iconResolver = this.resolveIcon(svgUrl);\n        iconCache.set(iconKey, iconResolver);\n      } else if (this.library === 'country') {\n        svgUrl = await import(`../../assets/flags/${this.name}.svg?`).then(\n          (result) => result.default\n        );\n        iconResolver = this.resolveIcon(svgUrl);\n        iconCache.set(iconKey, iconResolver);\n      } else if (this.library === 'system') {\n        svgUrl = `data:image/svg+xml,${encodeURIComponent(systemIcons[this.name as keyof typeof systemIcons])}`;\n        iconResolver = this.resolveIcon(svgUrl);\n        iconCache.set(iconKey, iconResolver);\n      }\n    }\n\n    // If we haven't rendered yet, exit early. This avoids unnecessary work due to watching multiple props.\n    if (!this.hasRendered) {\n      return;\n    }\n\n    const svg = await iconResolver;\n\n    if (!svg) {\n      return;\n    }\n\n    if (svg === RETRYABLE_ERROR) {\n      iconCache.delete(iconKey);\n    }\n\n    if (iconKey !== `${this.library}-${this.name}`) {\n      // If the url has changed while fetching the icon, ignore this request\n      return;\n    }\n\n    if (isTemplateResult(svg)) {\n      this.svg = svg;\n\n      return;\n    }\n\n    switch (svg) {\n      case RETRYABLE_ERROR:\n      case CACHEABLE_ERROR:\n        this.svg = null;\n        this.dispatchEvent(\n          new Event('mid-error', { bubbles: true, composed: true })\n        );\n        break;\n      default:\n        this.svg = svg.cloneNode(true) as SVGElement;\n        this.dispatchEvent(\n          new Event('mid-load', { bubbles: true, composed: true })\n        );\n    }\n  }\n\n  protected render() {\n    return this.svg;\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/components/link.component.d.ts

@@ -7,10 +7,6 @@ declare global {
 declare const MinidLink_base: typeof LitElement;
 export declare class MinidLink extends MinidLink_base {
     href?: string;
-    /**
-     * White text for dark backgrounds
-     */
-    inverted: boolean;
     target?: string;
     render(): import('lit-html').TemplateResult<1>;
 }

package/dist/components/link.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"link.component.d.ts","sourceRoot":"","sources":["../../src/components/link.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAK5C,OAAO,uBAAuB,CAAC;AAE/B,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,SAAS,CAAC;KACvB;CACF;;AAUD,qBACa,SAAU,SAAQ,cAA0B;IAEvD,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IAEH,QAAQ,UAAS;IAGjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAEP,MAAM;CAchB"}
+{"version":3,"file":"link.component.d.ts","sourceRoot":"","sources":["../../src/components/link.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAKvC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,SAAS,CAAC;KACvB;CACF;;AAED,qBACa,SAAU,SAAQ,cAAkB;IAE/C,IAAI,CAAC,EAAE,MAAM,CAAC;IAGd,MAAM,CAAC,EAAE,MAAM,CAAC;IAEP,MAAM;CAWhB"}

package/dist/components/link.js

@@ -1,9 +1,7 @@
-import { css, LitElement, html } from "lit";
+import { LitElement, html } from "lit";
 import { property, customElement } from "lit/decorators.js";
-import { classMap } from "lit/directives/class-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { styled } from "../mixins/tailwind.mixin.js";
-import "./icon/icon.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -14,25 +12,11 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-const styles = [
-  css`
-    .fds-link {
-      align-items: baseline;
-    }
-  `
-];
-let MinidLink = class extends styled(LitElement, styles) {
-  constructor() {
-    super(...arguments);
-    this.inverted = false;
-  }
+let MinidLink = class extends styled(LitElement) {
   render() {
     return html`
       <a
-        class="${classMap({
-      "fds-link": true,
-      "fds-link--inverted": this.inverted
-    })}"
+        class="text-accent-subtle visited:text-link-visited focus-visible:bg-focus-outer inline-flex items-center gap-2 underline decoration-[.0625rem] underline-offset-[.27em] outline-0 focus-visible:text-white"
         href=${ifDefined(this.href)}
         target=${ifDefined(this.target)}
       >
@@ -44,9 +28,6 @@ let MinidLink = class extends styled(LitElement, styles) {
 __decorateClass([
   property()
 ], MinidLink.prototype, "href", 2);
-__decorateClass([
-  property({ type: Boolean })
-], MinidLink.prototype, "inverted", 2);
 __decorateClass([
   property()
 ], MinidLink.prototype, "target", 2);