@felleslosninger/minid-elements 0.0.97 → 0.0.99

package/dist/components/link.js.map

@@ -1 +1 @@
-{"version":3,"file":"link.js","sources":["../../src/components/link.component.ts"],"sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { styled } from '../mixins/tailwind.mixin';\nimport './icon/icon.component';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-link': MinidLink;\n  }\n}\n\nconst styles = [\n  css`\n    .fds-link {\n      align-items: baseline;\n    }\n  `,\n];\n\n@customElement('mid-link')\nexport class MinidLink extends styled(LitElement, styles) {\n  @property()\n  href?: string;\n\n  /**\n   * White text for dark backgrounds\n   */\n  @property({ type: Boolean })\n  inverted = false;\n\n  @property()\n  target?: string;\n\n  override render() {\n    return html`\n      <a\n        class=\"${classMap({\n          'fds-link': true,\n          'fds-link--inverted': this.inverted,\n        })}\"\n        href=${ifDefined(this.href)}\n        target=${ifDefined(this.target)}\n      >\n        <slot></slot>\n      </a>\n    `;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAaA,MAAM,SAAS;AAAA,EACb;AAAA;AAAA;AAAA;AAAA;AAKF;AAGO,IAAM,YAAN,cAAwB,OAAO,YAAY,MAAM,EAAE;AAAA,EAAnD,cAAA;AAAA,UAAA,GAAA,SAAA;AAQM,SAAA,WAAA;AAAA,EAAA;AAAA,EAKF,SAAS;AACT,WAAA;AAAA;AAAA,iBAEM,SAAS;AAAA,MAChB,YAAY;AAAA,MACZ,sBAAsB,KAAK;AAAA,IAAA,CAC5B,CAAC;AAAA,eACK,UAAU,KAAK,IAAI,CAAC;AAAA,iBAClB,UAAU,KAAK,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAMvC;AAzBE,gBAAA;AAAA,EADC,SAAS;AAAA,GADC,UAEX,WAAA,QAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAS,CAAA;AAAA,GAPhB,UAQX,WAAA,YAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS;AAAA,GAVC,UAWX,WAAA,UAAA,CAAA;AAXW,YAAN,gBAAA;AAAA,EADN,cAAc,UAAU;AAAA,GACZ,SAAA;"}
+{"version":3,"file":"link.js","sources":["../../src/components/link.component.ts"],"sourcesContent":["import { 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';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-link': MinidLink;\n  }\n}\n\n@customElement('mid-link')\nexport class MinidLink extends styled(LitElement) {\n  @property()\n  href?: string;\n\n  @property()\n  target?: string;\n\n  override render() {\n    return html`\n      <a\n        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\"\n        href=${ifDefined(this.href)}\n        target=${ifDefined(this.target)}\n      >\n        <slot></slot>\n      </a>\n    `;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAYO,IAAM,YAAN,cAAwB,OAAO,UAAU,EAAE;AAAA,EAOvC,SAAS;AACT,WAAA;AAAA;AAAA;AAAA,eAGI,UAAU,KAAK,IAAI,CAAC;AAAA,iBAClB,UAAU,KAAK,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAMvC;AAhBE,gBAAA;AAAA,EADC,SAAS;AAAA,GADC,UAEX,WAAA,QAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS;AAAA,GAJC,UAKX,WAAA,UAAA,CAAA;AALW,YAAN,gBAAA;AAAA,EADN,cAAc,UAAU;AAAA,GACZ,SAAA;"}

package/dist/components/menu-item.component.d.ts

@@ -7,9 +7,6 @@ declare global {
 }
 declare const MinidMenuItem_base: typeof LitElement;
 export declare class MinidMenuItem extends MinidMenuItem_base {
-    /**
-     * @ignore
-     */
     button: MinidButton;
     /**
      * If set, the interactive element will be an anchor element

package/dist/components/menu-item.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"menu-item.component.d.ts","sourceRoot":"","sources":["../../src/components/menu-item.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAI5C,OAAO,oBAAoB,CAAC;AAC5B,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAGjD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,aAAa,CAAC;KAChC;CACF;;AA8BD,qBACa,aAAc,SAAQ,kBAAyB;IAC1D;;OAEG;IAEH,MAAM,EAAG,WAAW,CAAC;IAErB;;OAEG;IAEH,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IAEzB;;OAEG;IAEH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IAEH,OAAO,EAAE,UAAU,GAAG,UAAU,CAAc;IAE9C;;OAEG;IAEH,MAAM,UAAS;IAEf,iBAAiB,IAAI,IAAI;IAKzB,KAAK,IAAI,IAAI;IAIb,SAAS,CAAC,MAAM,EAAE,OAAO;IAIhB,MAAM;CA+BhB"}
+{"version":3,"file":"menu-item.component.d.ts","sourceRoot":"","sources":["../../src/components/menu-item.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAIvC,OAAO,oBAAoB,CAAC;AAC5B,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAGjD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,aAAa,CAAC;KAChC;CACF;;AAED,qBACa,aAAc,SAAQ,kBAAkB;IAEnD,MAAM,EAAG,WAAW,CAAC;IAErB;;OAEG;IAEH,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IAEzB;;OAEG;IAEH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IAEH,OAAO,EAAE,UAAU,GAAG,UAAU,CAAc;IAE9C;;OAEG;IAEH,MAAM,UAAS;IAEf,iBAAiB,IAAI,IAAI;IAKzB,KAAK,IAAI,IAAI;IAIb,SAAS,CAAC,MAAM,EAAE,OAAO;IAIhB,MAAM;CA0BhB"}

package/dist/components/menu-item.js

@@ -1,4 +1,4 @@
-import { css, LitElement, html } from "lit";
+import { LitElement, html } from "lit";
 import { query, property, customElement } from "lit/decorators.js";
 import { styled } from "../mixins/tailwind.mixin.js";
 import { ifDefined } from "lit/directives/if-defined.js";
@@ -14,35 +14,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-const style = [
-  css`
-    :host[hidden] {
-      display: none;
-    }
-
-    .active {
-      --fds-focus-border-width: 3px;
-      outline: var(--fds-focus-border-width) solid
-        var(--fds-semantic-border-focus-outline);
-      outline-offset: var(--fds-focus-border-width);
-      box-shadow: 0 0 0 var(--fds-focus-border-width)
-        var(--fds-semantic-border-focus-boxshadow);
-    }
-
-    .fds-dropdownmenu__item {
-      display: flex;
-    }
-
-    mid-button::part(base) {
-      justify-content: flex-start;
-    }
-
-    .button {
-      display: block;
-    }
-  `
-];
-let MinidMenuItem = class extends styled(LitElement, style) {
+let MinidMenuItem = class extends styled(LitElement) {
   constructor() {
     super(...arguments);
     this.variant = "dropdown";
@@ -59,33 +31,29 @@ let MinidMenuItem = class extends styled(LitElement, style) {
     this.active = active;
   }
   render() {
-    return this.variant === "dropdown" ? html`
-          <mid-button
-            class="button"
-            variant="tertiary"
-            href=${ifDefined(this.href)}
-            fullwidth
-          >
-            <slot></slot>
-          </mid-button>
-        ` : html` <button
-          class=${classMap({
-      button: true,
-      "fds-label": true,
-      "fds-label--md": true,
-      "fds-label--medium-weight": true,
-      "fds-combobox__option__label": true,
-      "fds-combobox__option": true,
-      "fds-combobox__option--active": this.active
-    })}
-          variant="tertiary"
-          href=${ifDefined(this.href)}
-          fullwidth
-        >
-          <div class="col-span-2 flex items-center gap-2">
-            <slot></slot>
-          </div>
-        </button>`;
+    if (this.variant === "combobox") {
+      return html` <button
+        class="${classMap({
+        "border-transparent": !this.active,
+        "bg-accent-tinted": this.active,
+        "border-accent-base": this.active
+      })} block w-full rounded border-l-[5px] px-3 py-2 font-medium"
+        href=${ifDefined(this.href)}
+      >
+        <div class="flex items-center gap-2">
+          <slot></slot>
+        </div>
+      </button>`;
+    }
+    return html`
+      <mid-button
+        class="flex w-full [&::part(base)]:justify-start"
+        variant="tertiary"
+        href=${ifDefined(this.href)}
+      >
+        <slot></slot>
+      </mid-button>
+    `;
   }
 };
 __decorateClass([

package/dist/components/menu-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-item.js","sources":["../../src/components/menu-item.component.ts"],"sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { styled } from '../mixins/tailwind.mixin.ts';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport './button.component';\nimport { MinidButton } from './button.component';\nimport { classMap } from 'lit/directives/class-map.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-menu-item': MinidMenuItem;\n  }\n}\n\nconst style = [\n  css`\n    :host[hidden] {\n      display: none;\n    }\n\n    .active {\n      --fds-focus-border-width: 3px;\n      outline: var(--fds-focus-border-width) solid\n        var(--fds-semantic-border-focus-outline);\n      outline-offset: var(--fds-focus-border-width);\n      box-shadow: 0 0 0 var(--fds-focus-border-width)\n        var(--fds-semantic-border-focus-boxshadow);\n    }\n\n    .fds-dropdownmenu__item {\n      display: flex;\n    }\n\n    mid-button::part(base) {\n      justify-content: flex-start;\n    }\n\n    .button {\n      display: block;\n    }\n  `,\n];\n@customElement('mid-menu-item')\nexport class MinidMenuItem extends styled(LitElement, style) {\n  /**\n   * @ignore\n   */\n  @query('.button')\n  button!: MinidButton;\n\n  /**\n   * If set, the interactive element will be an anchor element\n   */\n  @property()\n  href: string | undefined;\n\n  /**\n   * The items value\n   */\n  @property()\n  value?: string;\n\n  /**\n   * Controls which styling to use\n   */\n  @property()\n  variant: 'combobox' | 'dropdown' = 'dropdown';\n\n  /**\n   * Used as a focus state. So the actual focus can be somewhere else\n   */\n  @property({ type: Boolean, reflect: true })\n  active = false;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.setAttribute('role', 'menuitem');\n  }\n\n  focus(): void {\n    this.button.focus();\n  }\n\n  setActive(active: boolean) {\n    this.active = active;\n  }\n\n  override render() {\n    return this.variant === 'dropdown'\n      ? html`\n          <mid-button\n            class=\"button\"\n            variant=\"tertiary\"\n            href=${ifDefined(this.href)}\n            fullwidth\n          >\n            <slot></slot>\n          </mid-button>\n        `\n      : html` <button\n          class=${classMap({\n            button: true,\n            'fds-label': true,\n            'fds-label--md': true,\n            'fds-label--medium-weight': true,\n            'fds-combobox__option__label': true,\n            'fds-combobox__option': true,\n            'fds-combobox__option--active': this.active,\n          })}\n          variant=\"tertiary\"\n          href=${ifDefined(this.href)}\n          fullwidth\n        >\n          <div class=\"col-span-2 flex items-center gap-2\">\n            <slot></slot>\n          </div>\n        </button>`;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAcA,MAAM,QAAQ;AAAA,EACZ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA0BF;AAEO,IAAM,gBAAN,cAA4B,OAAO,YAAY,KAAK,EAAE;AAAA,EAAtD,cAAA;AAAA,UAAA,GAAA,SAAA;AAuB8B,SAAA,UAAA;AAM1B,SAAA,SAAA;AAAA,EAAA;AAAA,EAET,oBAA0B;AACxB,UAAM,kBAAkB;AACnB,SAAA,aAAa,QAAQ,UAAU;AAAA,EAAA;AAAA,EAGtC,QAAc;AACZ,SAAK,OAAO,MAAM;AAAA,EAAA;AAAA,EAGpB,UAAU,QAAiB;AACzB,SAAK,SAAS;AAAA,EAAA;AAAA,EAGP,SAAS;AACT,WAAA,KAAK,YAAY,aACpB;AAAA;AAAA;AAAA;AAAA,mBAIW,UAAU,KAAK,IAAI,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,YAM/B;AAAA,kBACU,SAAS;AAAA,MACf,QAAQ;AAAA,MACR,aAAa;AAAA,MACb,iBAAiB;AAAA,MACjB,4BAA4B;AAAA,MAC5B,+BAA+B;AAAA,MAC/B,wBAAwB;AAAA,MACxB,gCAAgC,KAAK;AAAA,IAAA,CACtC,CAAC;AAAA;AAAA,iBAEK,UAAU,KAAK,IAAI,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAQrC;AAtEE,gBAAA;AAAA,EADC,MAAM,SAAS;AAAA,GAJL,cAKX,WAAA,UAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAS;AAAA,GAVC,cAWX,WAAA,QAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAS;AAAA,GAhBC,cAiBX,WAAA,SAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAS;AAAA,GAtBC,cAuBX,WAAA,WAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAM,CAAA;AAAA,GA5B/B,cA6BX,WAAA,UAAA,CAAA;AA7BW,gBAAN,gBAAA;AAAA,EADN,cAAc,eAAe;AAAA,GACjB,aAAA;"}
+{"version":3,"file":"menu-item.js","sources":["../../src/components/menu-item.component.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { styled } from '../mixins/tailwind.mixin.ts';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport './button.component';\nimport { MinidButton } from './button.component';\nimport { classMap } from 'lit/directives/class-map.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-menu-item': MinidMenuItem;\n  }\n}\n\n@customElement('mid-menu-item')\nexport class MinidMenuItem extends styled(LitElement) {\n  @query('.button')\n  button!: MinidButton;\n\n  /**\n   * If set, the interactive element will be an anchor element\n   */\n  @property()\n  href: string | undefined;\n\n  /**\n   * The items value\n   */\n  @property()\n  value?: string;\n\n  /**\n   * Controls which styling to use\n   */\n  @property()\n  variant: 'combobox' | 'dropdown' = 'dropdown';\n\n  /**\n   * Used as a focus state. So the actual focus can be somewhere else\n   */\n  @property({ type: Boolean, reflect: true })\n  active = false;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.setAttribute('role', 'menuitem');\n  }\n\n  focus(): void {\n    this.button.focus();\n  }\n\n  setActive(active: boolean) {\n    this.active = active;\n  }\n\n  override render() {\n    if (this.variant === 'combobox') {\n      return html` <button\n        class=\"${classMap({\n          'border-transparent': !this.active,\n          'bg-accent-tinted': this.active,\n          'border-accent-base': this.active,\n        })} block w-full rounded border-l-[5px] px-3 py-2 font-medium\"\n        href=${ifDefined(this.href)}\n      >\n        <div class=\"flex items-center gap-2\">\n          <slot></slot>\n        </div>\n      </button>`;\n    }\n\n    return html`\n      <mid-button\n        class=\"flex w-full [&::part(base)]:justify-start\"\n        variant=\"tertiary\"\n        href=${ifDefined(this.href)}\n      >\n        <slot></slot>\n      </mid-button>\n    `;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAeO,IAAM,gBAAN,cAA4B,OAAO,UAAU,EAAE;AAAA,EAA/C,cAAA;AAAA,UAAA,GAAA,SAAA;AAoB8B,SAAA,UAAA;AAM1B,SAAA,SAAA;AAAA,EAAA;AAAA,EAET,oBAA0B;AACxB,UAAM,kBAAkB;AACnB,SAAA,aAAa,QAAQ,UAAU;AAAA,EAAA;AAAA,EAGtC,QAAc;AACZ,SAAK,OAAO,MAAM;AAAA,EAAA;AAAA,EAGpB,UAAU,QAAiB;AACzB,SAAK,SAAS;AAAA,EAAA;AAAA,EAGP,SAAS;AACZ,QAAA,KAAK,YAAY,YAAY;AACxB,aAAA;AAAA,iBACI,SAAS;AAAA,QAChB,sBAAsB,CAAC,KAAK;AAAA,QAC5B,oBAAoB,KAAK;AAAA,QACzB,sBAAsB,KAAK;AAAA,MAAA,CAC5B,CAAC;AAAA,eACK,UAAU,KAAK,IAAI,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAAA;AAQxB,WAAA;AAAA;AAAA;AAAA;AAAA,eAII,UAAU,KAAK,IAAI,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAMnC;AAjEE,gBAAA;AAAA,EADC,MAAM,SAAS;AAAA,GADL,cAEX,WAAA,UAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAS;AAAA,GAPC,cAQX,WAAA,QAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAS;AAAA,GAbC,cAcX,WAAA,SAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAS;AAAA,GAnBC,cAoBX,WAAA,WAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAM,CAAA;AAAA,GAzB/B,cA0BX,WAAA,UAAA,CAAA;AA1BW,gBAAN,gBAAA;AAAA,EADN,cAAc,eAAe;AAAA,GACjB,aAAA;"}

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

@@ -10,18 +10,8 @@ declare const MinidMenu_base: typeof LitElement;
  *  @event {{ detail: { item: MidMenuItem } }} mid-select - Emitted when a menu item is selected.
  */
 export declare class MinidMenu extends MinidMenu_base {
-    #private;
-    /**
-     * @ignore
-     */
     defaultSlot: HTMLSlotElement;
-    /**
-     * @ignore
-     */
     filterInput: HTMLInputElement;
-    /**
-     * @ignore
-     */
     itemList: HTMLUListElement;
     /**
      * Adds an input element that filters selectable menu items
@@ -35,7 +25,8 @@ export declare class MinidMenu extends MinidMenu_base {
     protected firstUpdated(): void;
     connectedCallback(): void;
     private handleClick;
-    handleFilterItems(): void;
+    private handleFilterItems;
+    private scrollOptionIntoView;
     private handleKeyDown;
     private handleMouseDown;
     private handleSlotChange;

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

@@ -1 +1 @@
-{"version":3,"file":"menu.component.d.ts","sourceRoot":"","sources":["../../src/components/menu.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAW,MAAM,KAAK,CAAC;AAIrD,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAGtD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,SAAS,CAAC;KACvB;CACF;;AA2BD;;GAEG;AACH,qBACa,SAAU,SAAQ,cAA0B;;IACvD;;OAEG;IAEH,WAAW,EAAG,eAAe,CAAC;IAE9B;;OAEG;IAEH,WAAW,EAAG,gBAAgB,CAAC;IAE/B;;OAEG;IAEH,QAAQ,EAAG,gBAAgB,CAAC;IAE5B;;OAEG;IAEH,UAAU,UAAS;IAEnB;;OAEG;IAEH,OAAO,EAAE,UAAU,GAAG,UAAU,CAAc;IAG9C,aAAa,UAAS;IAEtB,SAAS,CAAC,YAAY,IAAI,IAAI;IAS9B,iBAAiB;IAKjB,OAAO,CAAC,WAAW;IAoCnB,iBAAiB;IAgBjB,OAAO,CAAC,aAAa;IAgDrB,OAAO,CAAC,eAAe;IAQvB,OAAO,CAAC,gBAAgB;IASxB,OAAO,CAAC,UAAU;IASlB;;;OAGG;IACH,MAAM,GAAI,UAAU,CAAC,IAAI,EAAE,aAAa,KAAK,OAAO,UAUlD;IAEF,WAAW;IAMX;;OAEG;IACH,qBAAqB;IAQrB,WAAW;IAQX;;;OAGG;IACH,cAAc;IAMd;;;OAGG;IACH,cAAc,CAAC,IAAI,EAAE,aAAa;IAUlC,gBAAgB;IAMP,MAAM;CAkDhB"}
+{"version":3,"file":"menu.component.d.ts","sourceRoot":"","sources":["../../src/components/menu.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAW,MAAM,KAAK,CAAC;AAGrD,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAGtD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,SAAS,CAAC;KACvB;CACF;;AAWD;;GAEG;AACH,qBACa,SAAU,SAAQ,cAA0B;IAEvD,WAAW,EAAG,eAAe,CAAC;IAG9B,WAAW,EAAG,gBAAgB,CAAC;IAG/B,QAAQ,EAAG,gBAAgB,CAAC;IAE5B;;OAEG;IAEH,UAAU,UAAS;IAEnB;;OAEG;IAEH,OAAO,EAAE,UAAU,GAAG,UAAU,CAAc;IAG9C,aAAa,UAAS;IAEtB,SAAS,CAAC,YAAY,IAAI,IAAI;IAS9B,iBAAiB;IAKjB,OAAO,CAAC,WAAW;IAoCnB,OAAO,CAAC,iBAAiB;IAYzB,OAAO,CAAC,oBAAoB;IAI5B,OAAO,CAAC,aAAa;IAgDrB,OAAO,CAAC,eAAe;IAQvB,OAAO,CAAC,gBAAgB;IASxB,OAAO,CAAC,UAAU;IASlB;;;OAGG;IACH,MAAM,GAAI,UAAU,CAAC,IAAI,EAAE,aAAa,KAAK,OAAO,UAUlD;IAEF,WAAW;IAMX;;OAEG;IACH,qBAAqB;IAQrB,WAAW;IAQX;;;OAGG;IACH,cAAc;IAMd;;;OAGG;IACH,cAAc,CAAC,IAAI,EAAE,aAAa;IAUlC,gBAAgB;IAMP,MAAM;CAwChB"}

package/dist/components/menu.js

@@ -1,13 +1,9 @@
 import { css, LitElement, nothing, html } from "lit";
 import { query, property, state, customElement } from "lit/decorators.js";
-import { classMap } from "lit/directives/class-map.js";
 import { styled } from "../mixins/tailwind.mixin.js";
 import { scrollIntoView } from "../internal/scroll.js";
 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--)
@@ -16,38 +12,17 @@ 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 __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 __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
-var _MinidMenu_instances, scrollOptionIntoView_fn;
 const styles = [
   css`
     :host {
       --max-height: none;
-    }
-
-    .panel {
-      padding: 0;
-    }
-
-    ul {
-      max-height: var(--max-height);
-      overflow-y: auto;
-    }
-
-    .border-b {
-      border-bottom: 1px solid var(--fds-semantic-border-input-default);
-    }
-
-    .filter-input:focus-visible {
-      box-shadow: 0 0 0 3px #00347d;
+      --max-width: none;
     }
   `
 ];
 let MinidMenu = class extends styled(LitElement, styles) {
   constructor() {
     super(...arguments);
-    __privateAdd(this, _MinidMenu_instances);
     this.searchable = false;
     this.variant = "dropdown";
     this.emptyItemList = false;
@@ -106,6 +81,9 @@ let MinidMenu = class extends styled(LitElement, styles) {
     this.emptyItemList = items.length === 0;
     this.setCurrentItem(items[0]);
   }
+  scrollOptionIntoView(item) {
+    scrollIntoView(item, this.itemList, "vertical", "auto");
+  }
   handleKeyDown(event) {
     if (event.key === "Enter" || event.key === " ") {
       const item = this.getCurrentItem();
@@ -135,7 +113,7 @@ let MinidMenu = class extends styled(LitElement, styles) {
           index = 0;
         }
         this.setCurrentItem(items[index]);
-        __privateMethod(this, _MinidMenu_instances, scrollOptionIntoView_fn).call(this, items[index]);
+        this.scrollOptionIntoView(items[index]);
         if (!this.searchable) {
           items[index].focus();
         }
@@ -207,28 +185,16 @@ let MinidMenu = class extends styled(LitElement, styles) {
     }
   }
   render() {
-    const combobox = this.variant === "combobox";
-    const dropdown = this.variant === "dropdown";
     return html`
       <div
-        class="${classMap({
-      panel: true,
-      "fds-dropdownmenu": dropdown,
-      "fds-dropdownmenu--md": dropdown,
-      "fds-box--md-shadow": combobox,
-      "fds-box--default-border-color": combobox,
-      "fds-box--md-border-radius": combobox,
-      "fds-box--default-background": combobox,
-      "fds-combobox__options-wrapper": combobox,
-      "fds-combobox--md": combobox
-    })}"
+        class="text-body-md text-neutral border-neutral-subtle rounded-md border shadow-md"
       >
         ${!this.searchable ? nothing : html`<div
-              class="filter-search flex items-center gap-2 border-b p-2"
+              class="border-neutral-subtle flex items-center gap-2 border-b p-2"
             >
               <mid-icon
+                class="text-6"
                 slot="prefix"
-                class="text-2xl"
                 library="system"
                 name="magnifying-glass"
               >
@@ -236,11 +202,13 @@ let MinidMenu = class extends styled(LitElement, styles) {
               <input
                 @input=${this.handleFilterItems}
                 @keydown=${this.handleKeyDown}
-                class="filter-input h-8 w-full rounded px-2"
+                class="filter-input border-neutral-subtle focus-visible:outline-focus-outer h-8 w-full rounded border px-2"
                 type="search"
               />
             </div>`}
-        <ul class="item-list p-2">
+        <ul
+          class="item-list max-h-(--max-height) max-w-(--max-width) overflow-y-auto px-2 py-3"
+        >
           <slot
             @slotchange=${this.handleSlotChange}
             @click=${this.handleClick}
@@ -253,10 +221,6 @@ let MinidMenu = class extends styled(LitElement, styles) {
     `;
   }
 };
-_MinidMenu_instances = /* @__PURE__ */ new WeakSet();
-scrollOptionIntoView_fn = function(item) {
-  scrollIntoView(item, this.itemList, "vertical", "auto");
-};
 __decorateClass([
   query("slot")
 ], MinidMenu.prototype, "defaultSlot", 2);

package/dist/components/menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu.js","sources":["../../src/components/menu.component.ts"],"sourcesContent":["import { css, html, LitElement, nothing } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styled } from '../mixins/tailwind.mixin.ts';\nimport { MinidMenuItem } from './menu-item.component';\nimport { scrollIntoView } from '../internal/scroll';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-menu': MinidMenu;\n  }\n}\n\nconst styles = [\n  css`\n    :host {\n      --max-height: none;\n    }\n\n    .panel {\n      padding: 0;\n    }\n\n    ul {\n      max-height: var(--max-height);\n      overflow-y: auto;\n    }\n\n    .border-b {\n      border-bottom: 1px solid var(--fds-semantic-border-input-default);\n    }\n\n    .filter-input:focus-visible {\n      box-shadow: 0 0 0 3px #00347d;\n    }\n  `,\n];\n\n/**\n *  @event {{ detail: { item: MidMenuItem } }} mid-select - Emitted when a menu item is selected.\n */\n@customElement('mid-menu')\nexport class MinidMenu extends styled(LitElement, styles) {\n  /**\n   * @ignore\n   */\n  @query('slot')\n  defaultSlot!: HTMLSlotElement;\n\n  /**\n   * @ignore\n   */\n  @query('.filter-input')\n  filterInput!: HTMLInputElement;\n\n  /**\n   * @ignore\n   */\n  @query('.item-list')\n  itemList!: HTMLUListElement;\n\n  /**\n   * Adds an input element that filters selectable menu items\n   */\n  @property({ type: Boolean })\n  searchable = false;\n\n  /**\n   * Wether the menu should be styled as a dropdown or a combobox\n   */\n  @property()\n  variant: 'combobox' | 'dropdown' = 'dropdown';\n\n  @state()\n  emptyItemList = false;\n\n  protected firstUpdated(): void {\n    this.getAllItems().forEach((item) => {\n      item.variant = this.variant;\n      item.addEventListener('mouseenter', () => {\n        this.setCurrentItem(item);\n      });\n    });\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('role', 'menu');\n  }\n\n  private handleClick(event: MouseEvent) {\n    const menuItemTypes = ['menuitem', 'menuitemcheckbox'];\n\n    const composedPath = event.composedPath();\n    const target = composedPath.find((el) =>\n      menuItemTypes.includes((el as HTMLElement)?.getAttribute?.('role') || '')\n    );\n\n    if (!target) return;\n\n    const closestMenu = composedPath.find(\n      (el) => (el as HTMLElement)?.getAttribute?.('role') === 'menu'\n    );\n    const clickHasSubmenu = closestMenu !== this;\n\n    // Make sure we're the menu thats supposed to be handling the click event.\n    if (clickHasSubmenu) {\n      return;\n    }\n\n    // This isn't true. But we use it for TypeScript checks below.\n    const item = target as MinidMenuItem;\n\n    // if (item.type === 'checkbox') {\n    //   item.checked = !item.checked;\n    // }\n\n    this.dispatchEvent(\n      new CustomEvent('mid-select', {\n        bubbles: true,\n        composed: true,\n        detail: { item },\n      })\n    );\n  }\n\n  handleFilterItems() {\n    this.filter((item) =>\n      item.innerText\n        .toLowerCase()\n        .includes(this.filterInput.value.toLowerCase())\n    );\n\n    const items = this.getAllSelectableItems();\n    this.emptyItemList = items.length === 0;\n    this.setCurrentItem(items[0]);\n  }\n\n  #scrollOptionIntoView(item: MinidMenuItem): void {\n    scrollIntoView(item, this.itemList, 'vertical', 'auto');\n  }\n\n  private handleKeyDown(event: KeyboardEvent) {\n    // Make a selection when pressing enter or space\n    if (event.key === 'Enter' || event.key === ' ') {\n      const item = this.getCurrentItem();\n      event.preventDefault();\n      event.stopPropagation();\n\n      // Simulate a click to support @click handlers on menu items that also work with the keyboard\n      item?.click();\n    }\n\n    // Move the selection when pressing down or up\n    else if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {\n      const items = this.getAllSelectableItems();\n      const activeItem = this.getCurrentItem();\n      let index = activeItem ? items.indexOf(activeItem) : 0;\n\n      if (items.length > 0) {\n        event.preventDefault();\n        event.stopPropagation();\n\n        if (event.key === 'ArrowDown') {\n          index++;\n        } else if (event.key === 'ArrowUp') {\n          index--;\n        } else if (event.key === 'Home') {\n          index = 0;\n        } else if (event.key === 'End') {\n          index = items.length - 1;\n        }\n\n        if (index < 0) {\n          index = items.length - 1;\n        }\n        if (index > items.length - 1) {\n          index = 0;\n        }\n\n        this.setCurrentItem(items[index]);\n        this.#scrollOptionIntoView(items[index]);\n\n        if (!this.searchable) {\n          items[index].focus();\n        }\n      }\n    }\n  }\n\n  private handleMouseDown(event: MouseEvent) {\n    const target = event.target as HTMLElement;\n\n    if (this.isMenuItem(target)) {\n      this.setCurrentItem(target as MinidMenuItem);\n    }\n  }\n\n  private handleSlotChange() {\n    const items = this.getAllSelectableItems();\n\n    // Reset the roving tab index when the slotted items change\n    if (items.length > 0) {\n      this.setCurrentItem(items[0]);\n    }\n  }\n\n  private isMenuItem(item: HTMLElement) {\n    return (\n      item.tagName.toLowerCase() === 'mid-menu-item' ||\n      ['menuitem', 'menuitemcheckbox', 'menuitemradio'].includes(\n        item.getAttribute('role') ?? ''\n      )\n    );\n  }\n\n  /**\n   * Pass a filter function to enable/disable menu items in the menu\n   * @type {(item: MinidMenuItem) => boolean}\n   */\n  filter = (filterFn: (item: MinidMenuItem) => boolean) => {\n    this.getAllItems().forEach((item) => {\n      if (filterFn(item)) {\n        item.removeAttribute('hidden');\n        item.removeAttribute('inert');\n      } else {\n        item.setAttribute('inert', 'true');\n        item.setAttribute('hidden', 'true');\n      }\n    });\n  };\n\n  clearFilter() {\n    this.filterInput.value = '';\n    this.itemList.scrollTop = 0;\n    this.filterInput.dispatchEvent(new Event('input'));\n  }\n\n  /**\n   * @internal Gets all slotted menu items, ignoring dividers, headers, and other elements.\n   */\n  getAllSelectableItems() {\n    return [\n      ...(this.defaultSlot.assignedElements({\n        flatten: true,\n      }) as MinidMenuItem[]),\n    ].filter((el) => !(el.inert || !this.isMenuItem(el)));\n  }\n\n  getAllItems() {\n    return [\n      ...(this.defaultSlot.assignedElements({\n        flatten: true,\n      }) as MinidMenuItem[]),\n    ].filter((el) => this.isMenuItem(el));\n  }\n\n  /**\n   * @internal Gets the current menu item, which is the menu item that has `tabindex=\"0\"` within the roving tab index.\n   * The menu item may or may not have focus, but for keyboard interaction purposes it's considered the \"active\" item.\n   */\n  getCurrentItem() {\n    return this.getAllSelectableItems().find(\n      (i) => i.getAttribute('tabindex') === '0'\n    );\n  }\n\n  /**\n   * @internal Sets the current menu item to the specified element. This sets `tabindex=\"0\"` on the target element and\n   * `tabindex=\"-1\"` to all other items. This method must be called prior to setting focus on a menu item.\n   */\n  setCurrentItem(item: MinidMenuItem) {\n    const items = this.getAllSelectableItems();\n\n    // Update tab indexes\n    items.forEach((i) => {\n      i.setActive(i === item);\n      i.setAttribute('tabindex', i === item ? '0' : '-1');\n    });\n  }\n\n  focusSearchField() {\n    if (this.searchable) {\n      this.filterInput.focus();\n    }\n  }\n\n  override render() {\n    const combobox = this.variant === 'combobox';\n    const dropdown = this.variant === 'dropdown';\n    return html`\n      <div\n        class=\"${classMap({\n          panel: true,\n          'fds-dropdownmenu': dropdown,\n          'fds-dropdownmenu--md': dropdown,\n          'fds-box--md-shadow': combobox,\n          'fds-box--default-border-color': combobox,\n          'fds-box--md-border-radius': combobox,\n          'fds-box--default-background': combobox,\n          'fds-combobox__options-wrapper': combobox,\n          'fds-combobox--md': combobox,\n        })}\"\n      >\n        ${!this.searchable\n          ? nothing\n          : html`<div\n              class=\"filter-search flex items-center gap-2 border-b p-2\"\n            >\n              <mid-icon\n                slot=\"prefix\"\n                class=\"text-2xl\"\n                library=\"system\"\n                name=\"magnifying-glass\"\n              >\n              </mid-icon>\n              <input\n                @input=${this.handleFilterItems}\n                @keydown=${this.handleKeyDown}\n                class=\"filter-input h-8 w-full rounded px-2\"\n                type=\"search\"\n              />\n            </div>`}\n        <ul class=\"item-list p-2\">\n          <slot\n            @slotchange=${this.handleSlotChange}\n            @click=${this.handleClick}\n            @keydown=${this.handleKeyDown}\n            @mousedown=${this.handleMouseDown}\n          ></slot>\n          ${this.emptyItemList\n            ? html`<div class=\"p-2\">Fant ingen treff</div>`\n            : nothing}\n        </ul>\n      </div>\n    `;\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"menu.js","sources":["../../src/components/menu.component.ts"],"sourcesContent":["import { css, html, LitElement, nothing } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { styled } from '../mixins/tailwind.mixin.ts';\nimport { MinidMenuItem } from './menu-item.component';\nimport { scrollIntoView } from '../internal/scroll';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-menu': MinidMenu;\n  }\n}\n\nconst styles = [\n  css`\n    :host {\n      --max-height: none;\n      --max-width: none;\n    }\n  `,\n];\n\n/**\n *  @event {{ detail: { item: MidMenuItem } }} mid-select - Emitted when a menu item is selected.\n */\n@customElement('mid-menu')\nexport class MinidMenu extends styled(LitElement, styles) {\n  @query('slot')\n  defaultSlot!: HTMLSlotElement;\n\n  @query('.filter-input')\n  filterInput!: HTMLInputElement;\n\n  @query('.item-list')\n  itemList!: HTMLUListElement;\n\n  /**\n   * Adds an input element that filters selectable menu items\n   */\n  @property({ type: Boolean })\n  searchable = false;\n\n  /**\n   * Wether the menu should be styled as a dropdown or a combobox\n   */\n  @property()\n  variant: 'combobox' | 'dropdown' = 'dropdown';\n\n  @state()\n  emptyItemList = false;\n\n  protected firstUpdated(): void {\n    this.getAllItems().forEach((item) => {\n      item.variant = this.variant;\n      item.addEventListener('mouseenter', () => {\n        this.setCurrentItem(item);\n      });\n    });\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('role', 'menu');\n  }\n\n  private handleClick(event: MouseEvent) {\n    const menuItemTypes = ['menuitem', 'menuitemcheckbox'];\n\n    const composedPath = event.composedPath();\n    const target = composedPath.find((el) =>\n      menuItemTypes.includes((el as HTMLElement)?.getAttribute?.('role') || '')\n    );\n\n    if (!target) return;\n\n    const closestMenu = composedPath.find(\n      (el) => (el as HTMLElement)?.getAttribute?.('role') === 'menu'\n    );\n    const clickHasSubmenu = closestMenu !== this;\n\n    // Make sure we're the menu thats supposed to be handling the click event.\n    if (clickHasSubmenu) {\n      return;\n    }\n\n    // This isn't true. But we use it for TypeScript checks below.\n    const item = target as MinidMenuItem;\n\n    // if (item.type === 'checkbox') {\n    //   item.checked = !item.checked;\n    // }\n\n    this.dispatchEvent(\n      new CustomEvent('mid-select', {\n        bubbles: true,\n        composed: true,\n        detail: { item },\n      })\n    );\n  }\n\n  private handleFilterItems() {\n    this.filter((item) =>\n      item.innerText\n        .toLowerCase()\n        .includes(this.filterInput.value.toLowerCase())\n    );\n\n    const items = this.getAllSelectableItems();\n    this.emptyItemList = items.length === 0;\n    this.setCurrentItem(items[0]);\n  }\n\n  private scrollOptionIntoView(item: MinidMenuItem): void {\n    scrollIntoView(item, this.itemList, 'vertical', 'auto');\n  }\n\n  private handleKeyDown(event: KeyboardEvent) {\n    // Make a selection when pressing enter or space\n    if (event.key === 'Enter' || event.key === ' ') {\n      const item = this.getCurrentItem();\n      event.preventDefault();\n      event.stopPropagation();\n\n      // Simulate a click to support @click handlers on menu items that also work with the keyboard\n      item?.click();\n    }\n\n    // Move the selection when pressing down or up\n    else if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {\n      const items = this.getAllSelectableItems();\n      const activeItem = this.getCurrentItem();\n      let index = activeItem ? items.indexOf(activeItem) : 0;\n\n      if (items.length > 0) {\n        event.preventDefault();\n        event.stopPropagation();\n\n        if (event.key === 'ArrowDown') {\n          index++;\n        } else if (event.key === 'ArrowUp') {\n          index--;\n        } else if (event.key === 'Home') {\n          index = 0;\n        } else if (event.key === 'End') {\n          index = items.length - 1;\n        }\n\n        if (index < 0) {\n          index = items.length - 1;\n        }\n        if (index > items.length - 1) {\n          index = 0;\n        }\n\n        this.setCurrentItem(items[index]);\n        this.scrollOptionIntoView(items[index]);\n\n        if (!this.searchable) {\n          items[index].focus();\n        }\n      }\n    }\n  }\n\n  private handleMouseDown(event: MouseEvent) {\n    const target = event.target as HTMLElement;\n\n    if (this.isMenuItem(target)) {\n      this.setCurrentItem(target as MinidMenuItem);\n    }\n  }\n\n  private handleSlotChange() {\n    const items = this.getAllSelectableItems();\n\n    // Reset the roving tab index when the slotted items change\n    if (items.length > 0) {\n      this.setCurrentItem(items[0]);\n    }\n  }\n\n  private isMenuItem(item: HTMLElement) {\n    return (\n      item.tagName.toLowerCase() === 'mid-menu-item' ||\n      ['menuitem', 'menuitemcheckbox', 'menuitemradio'].includes(\n        item.getAttribute('role') ?? ''\n      )\n    );\n  }\n\n  /**\n   * Pass a filter function to enable/disable menu items in the menu\n   * @type {(item: MinidMenuItem) => boolean}\n   */\n  filter = (filterFn: (item: MinidMenuItem) => boolean) => {\n    this.getAllItems().forEach((item) => {\n      if (filterFn(item)) {\n        item.removeAttribute('hidden');\n        item.removeAttribute('inert');\n      } else {\n        item.setAttribute('inert', 'true');\n        item.setAttribute('hidden', 'true');\n      }\n    });\n  };\n\n  clearFilter() {\n    this.filterInput.value = '';\n    this.itemList.scrollTop = 0;\n    this.filterInput.dispatchEvent(new Event('input'));\n  }\n\n  /**\n   * @internal Gets all slotted menu items, ignoring dividers, headers, and other elements.\n   */\n  getAllSelectableItems() {\n    return [\n      ...(this.defaultSlot.assignedElements({\n        flatten: true,\n      }) as MinidMenuItem[]),\n    ].filter((el) => !(el.inert || !this.isMenuItem(el)));\n  }\n\n  getAllItems() {\n    return [\n      ...(this.defaultSlot.assignedElements({\n        flatten: true,\n      }) as MinidMenuItem[]),\n    ].filter((el) => this.isMenuItem(el));\n  }\n\n  /**\n   * @internal Gets the current menu item, which is the menu item that has `tabindex=\"0\"` within the roving tab index.\n   * The menu item may or may not have focus, but for keyboard interaction purposes it's considered the \"active\" item.\n   */\n  getCurrentItem() {\n    return this.getAllSelectableItems().find(\n      (i) => i.getAttribute('tabindex') === '0'\n    );\n  }\n\n  /**\n   * @internal Sets the current menu item to the specified element. This sets `tabindex=\"0\"` on the target element and\n   * `tabindex=\"-1\"` to all other items. This method must be called prior to setting focus on a menu item.\n   */\n  setCurrentItem(item: MinidMenuItem) {\n    const items = this.getAllSelectableItems();\n\n    // Update tab indexes\n    items.forEach((i) => {\n      i.setActive(i === item);\n      i.setAttribute('tabindex', i === item ? '0' : '-1');\n    });\n  }\n\n  focusSearchField() {\n    if (this.searchable) {\n      this.filterInput.focus();\n    }\n  }\n\n  override render() {\n    return html`\n      <div\n        class=\"text-body-md text-neutral border-neutral-subtle rounded-md border shadow-md\"\n      >\n        ${!this.searchable\n          ? nothing\n          : html`<div\n              class=\"border-neutral-subtle flex items-center gap-2 border-b p-2\"\n            >\n              <mid-icon\n                class=\"text-6\"\n                slot=\"prefix\"\n                library=\"system\"\n                name=\"magnifying-glass\"\n              >\n              </mid-icon>\n              <input\n                @input=${this.handleFilterItems}\n                @keydown=${this.handleKeyDown}\n                class=\"filter-input border-neutral-subtle focus-visible:outline-focus-outer h-8 w-full rounded border px-2\"\n                type=\"search\"\n              />\n            </div>`}\n        <ul\n          class=\"item-list max-h-(--max-height) max-w-(--max-width) overflow-y-auto px-2 py-3\"\n        >\n          <slot\n            @slotchange=${this.handleSlotChange}\n            @click=${this.handleClick}\n            @keydown=${this.handleKeyDown}\n            @mousedown=${this.handleMouseDown}\n          ></slot>\n          ${this.emptyItemList\n            ? html`<div class=\"p-2\">Fant ingen treff</div>`\n            : nothing}\n        </ul>\n      </div>\n    `;\n  }\n}\n"],"names":[],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"paragraph.component.d.ts","sourceRoot":"","sources":["../../src/components/paragraph.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAKvC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,cAAc,CAAC;KACjC;CACF;;AAED;;GAEG;AACH,qBACa,cAAe,SAAQ,mBAAkB;IACpD;;;;;;OAMG;IAEH,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAEvC;;;OAGG;IAEH,OAAO,UAAS;IAEP,MAAM;CAchB"}
+{"version":3,"file":"paragraph.component.d.ts","sourceRoot":"","sources":["../../src/components/paragraph.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAKvC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,cAAc,CAAC;KACjC;CACF;;AAED;;GAEG;AACH,qBACa,cAAe,SAAQ,mBAAkB;IACpD;;;;;;OAMG;IAEH,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAEvC;;;OAGG;IAEH,OAAO,UAAS;IAEP,MAAM;CAahB"}

package/dist/components/paragraph.js

@@ -21,12 +21,11 @@ let MinidParagraph = class extends styled(LitElement) {
   render() {
     return html`<p
       class="${classMap({
-      "fds-paragraph": true,
-      "fds-paragraph--spacing": this.spacing,
-      "fds-paragraph--xs": this.size === "xs",
-      "fds-paragraph--sm": this.size === "sm",
-      "fds-paragraph--md": this.size === "md",
-      "fds-paragraph--lg": this.size === "lg"
+      "mb-2": this.spacing,
+      "text-body-xs": this.size === "xs",
+      "text-body-sm": this.size === "sm",
+      "text-body-md": this.size === "md",
+      "text-body-lg": this.size === "lg"
     })}"
     >
       <slot></slot>

package/dist/components/paragraph.js.map

@@ -1 +1 @@
-{"version":3,"file":"paragraph.js","sources":["../../src/components/paragraph.component.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styled } from '../mixins/tailwind.mixin';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-paragraph': MinidParagraph;\n  }\n}\n\n/**\n * A paragraph\n */\n@customElement('mid-paragraph')\nexport class MinidParagraph extends styled(LitElement) {\n  /**\n   * `'xs' = 14px`\n   * `'sm' = 16px`\n   * `'md' = 18px`\n   * `'lg' = 21px`\n   * @default 'md'\n   */\n  @property()\n  size: 'xs' | 'sm' | 'md' | 'lg' = 'md';\n\n  /**\n   * Add margin below element\n   * @default false\n   */\n  @property({ type: Boolean })\n  spacing = false;\n\n  override render() {\n    return html`<p\n      class=\"${classMap({\n        'fds-paragraph': true,\n        'fds-paragraph--spacing': this.spacing,\n        'fds-paragraph--xs': this.size === 'xs',\n        'fds-paragraph--sm': this.size === 'sm',\n        'fds-paragraph--md': this.size === 'md',\n        'fds-paragraph--lg': this.size === 'lg',\n      })}\"\n    >\n      <slot></slot>\n    </p> `;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAeO,IAAM,iBAAN,cAA6B,OAAO,UAAU,EAAE;AAAA,EAAhD,cAAA;AAAA,UAAA,GAAA,SAAA;AAS6B,SAAA,OAAA;AAOxB,SAAA,UAAA;AAAA,EAAA;AAAA,EAED,SAAS;AACT,WAAA;AAAA,eACI,SAAS;AAAA,MAChB,iBAAiB;AAAA,MACjB,0BAA0B,KAAK;AAAA,MAC/B,qBAAqB,KAAK,SAAS;AAAA,MACnC,qBAAqB,KAAK,SAAS;AAAA,MACnC,qBAAqB,KAAK,SAAS;AAAA,MACnC,qBAAqB,KAAK,SAAS;AAAA,IAAA,CACpC,CAAC;AAAA;AAAA;AAAA;AAAA,EAAA;AAKR;AAvBE,gBAAA;AAAA,EADC,SAAS;AAAA,GARC,eASX,WAAA,QAAA,CAAA;AAOA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAS,CAAA;AAAA,GAfhB,eAgBX,WAAA,WAAA,CAAA;AAhBW,iBAAN,gBAAA;AAAA,EADN,cAAc,eAAe;AAAA,GACjB,cAAA;"}
+{"version":3,"file":"paragraph.js","sources":["../../src/components/paragraph.component.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styled } from '../mixins/tailwind.mixin';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-paragraph': MinidParagraph;\n  }\n}\n\n/**\n * A paragraph\n */\n@customElement('mid-paragraph')\nexport class MinidParagraph extends styled(LitElement) {\n  /**\n   * `'xs' = 14px`\n   * `'sm' = 16px`\n   * `'md' = 18px`\n   * `'lg' = 21px`\n   * @default 'md'\n   */\n  @property()\n  size: 'xs' | 'sm' | 'md' | 'lg' = 'md';\n\n  /**\n   * Add margin below element\n   * @default false\n   */\n  @property({ type: Boolean })\n  spacing = false;\n\n  override render() {\n    return html`<p\n      class=\"${classMap({\n        'mb-2': this.spacing,\n        'text-body-xs': this.size === 'xs',\n        'text-body-sm': this.size === 'sm',\n        'text-body-md': this.size === 'md',\n        'text-body-lg': this.size === 'lg',\n      })}\"\n    >\n      <slot></slot>\n    </p> `;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAeO,IAAM,iBAAN,cAA6B,OAAO,UAAU,EAAE;AAAA,EAAhD,cAAA;AAAA,UAAA,GAAA,SAAA;AAS6B,SAAA,OAAA;AAOxB,SAAA,UAAA;AAAA,EAAA;AAAA,EAED,SAAS;AACT,WAAA;AAAA,eACI,SAAS;AAAA,MAChB,QAAQ,KAAK;AAAA,MACb,gBAAgB,KAAK,SAAS;AAAA,MAC9B,gBAAgB,KAAK,SAAS;AAAA,MAC9B,gBAAgB,KAAK,SAAS;AAAA,MAC9B,gBAAgB,KAAK,SAAS;AAAA,IAAA,CAC/B,CAAC;AAAA;AAAA;AAAA;AAAA,EAAA;AAKR;AAtBE,gBAAA;AAAA,EADC,SAAS;AAAA,GARC,eASX,WAAA,QAAA,CAAA;AAOA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAS,CAAA;AAAA,GAfhB,eAgBX,WAAA,WAAA,CAAA;AAhBW,iBAAN,gBAAA;AAAA,EADN,cAAc,eAAe;AAAA,GACjB,cAAA;"}

package/dist/components/phone-input.component.d.ts

@@ -1,5 +1,6 @@
 import { LitElement } from 'lit';
 import { CountryCode } from 'libphonenumber-js';
+import { HasSlotController } from '../internal/slot';
 declare global {
     interface HTMLElementTagNameMap {
         'mid-phone-input': MinidPhoneInput;
@@ -14,16 +15,14 @@ declare const MinidPhoneInput_base: typeof LitElement & import('../types/mixin-c
  * @event {Event} mid-focus - Emitted after input gains focus
  *
  * @part base - Select the container outside the country button and phone number input
- * @part form-control - Select the container around the label and the inputs
+ * @part field - Select the container around the label and the inputs
  * @part label - Select the label element
  * @part country-button - Select the country button
  * @part input - Select the phone number input
  */
 export declare class MinidPhoneInput extends MinidPhoneInput_base {
     #private;
-    /**
-     * @ignore
-     */
+    hasSlotControler: HasSlotController;
     input: HTMLInputElement;
     /**
      * The value of the phone number in E.164 format. Example: `"+4799999999"`

package/dist/components/phone-input.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"phone-input.component.d.ts","sourceRoot":"","sources":["../../src/components/phone-input.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAW,MAAM,KAAK,CAAC;AAIrD,OAAO,EAIL,WAAW,EAEZ,MAAM,mBAAmB,CAAC;AAC3B,OAAO,uBAAuB,CAAC;AAU/B,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,eAAe,CAAC;KACpC;CACF;;AAuCD;;;;;;;;;;;;GAYG;AACH,qBACa,eAAgB,SAAQ,oBAEpC;;IAMC;;OAEG;IAEH,KAAK,EAAG,gBAAgB,CAAC;IAEzB;;;OAGG;IAEH,KAAK,SAAM;IAEX;;OAEG;IAEH,cAAc,SAAM;IAEpB;;OAEG;IAEH,WAAW,SAAM;IAEjB;;;OAGG;IAEH,KAAK,SAAM;IAEX;;OAEG;IAEH,SAAS,UAAS;IAElB;;OAEG;IAEH,OAAO,CAAC,EAAE,WAAW,CAAC;IAGtB,QAAQ,UAAS;IAEjB,kBAAkB;IAMlB,oBAAoB,CAAC,KAAK,EAAE,aAAa;IAQzC,iBAAiB,IAAI,IAAI;IAkBzB,IAAI,aAAa,yCAEhB;IAED,IAAI,cAAc,0CAEjB;IAED,OAAO,CAAC,UAAU;IAOlB,OAAO,CAAC,YAAY;IAUpB,OAAO,CAAC,aAAa;IAerB,OAAO,CAAC,WAAW;IASnB,OAAO,CAAC,QAAQ;IAkBhB,OAAO,CAAC,mBAAmB,CAkBzB;IAEF,OAAO,CAAC,WAAW;IAOnB,OAAO,CAAC,iBAAiB;IAUzB,KAAK;IAWL,mBAAmB;IAmBV,MAAM;CA8EhB"}
+{"version":3,"file":"phone-input.component.d.ts","sourceRoot":"","sources":["../../src/components/phone-input.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAI5C,OAAO,EAIL,WAAW,EAEZ,MAAM,mBAAmB,CAAC;AAC3B,OAAO,uBAAuB,CAAC;AAS/B,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAErD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,eAAe,CAAC;KACpC;CACF;;AAUD;;;;;;;;;;;;GAYG;AACH,qBACa,eAAgB,SAAQ,oBAEpC;;IAKC,gBAAgB,oBAAwC;IAGxD,KAAK,EAAG,gBAAgB,CAAC;IAEzB;;;OAGG;IAEH,KAAK,SAAM;IAEX;;OAEG;IAEH,cAAc,SAAM;IAEpB;;OAEG;IAEH,WAAW,SAAM;IAEjB;;;OAGG;IAEH,KAAK,SAAM;IAEX;;OAEG;IAEH,SAAS,UAAS;IAElB;;OAEG;IAEH,OAAO,CAAC,EAAE,WAAW,CAAC;IAGtB,QAAQ,UAAS;IAEjB,kBAAkB;IAMlB,oBAAoB,CAAC,KAAK,EAAE,aAAa;IAQzC,iBAAiB,IAAI,IAAI;IAkBzB,IAAI,aAAa,yCAEhB;IAED,IAAI,cAAc,0CAEjB;IAED,OAAO,CAAC,UAAU;IAOlB,OAAO,CAAC,YAAY;IAUpB,OAAO,CAAC,aAAa;IAerB,OAAO,CAAC,WAAW;IASnB,OAAO,CAAC,QAAQ;IAkBhB,OAAO,CAAC,mBAAmB,CAkBzB;IAEF,OAAO,CAAC,WAAW;IAOnB,OAAO,CAAC,iBAAiB;IAUzB,KAAK;IAWL,mBAAmB;IAmBV,MAAM;CAiEhB"}

package/dist/components/phone-input.js

@@ -1,4 +1,4 @@
-import { css, LitElement, nothing, html } from "lit";
+import { css, LitElement, html } from "lit";
 import { query, property, state, customElement } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 import { styled } from "../mixins/tailwind.mixin.js";
@@ -7,6 +7,7 @@ import "./icon/icon.js";
 import { templateParser, templateFormatter, onKeyDown, onChange } from "input-format";
 import { watch } from "../internal/watch.js";
 import { FormControllerMixin } from "../mixins/form-controller.mixin.js";
+import { HasSlotController } from "../internal/slot.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __typeError = (msg) => {
@@ -28,36 +29,7 @@ var _formatter, _skipCountryUpdate, _currentEvent, _currentTemplate;
 const styles = [
   css`
     :host {
-      display: flex;
-    }
-
-    .country-code,
-    .phone-number {
-      outline: none;
-      box-shadow: none;
-      background-color: transparent;
-    }
-
-    .phone-number {
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
-    }
-
-    .country-code {
-      border-right: 1px solid currentColor;
-    }
-
-    .country-button {
-      border: 1px solid var(--fds-semantic-border-input-default);
-      border-right: 0;
-      border-top-left-radius: var(--fds-border_radius-medium);
-      border-bottom-left-radius: var(--fds-border_radius-medium);
-    }
-
-    .fds-focus:focus-within,
-    .fds-focus:focus-visible {
-      outline: none;
-      box-shadow: 0 0 0 3px #00347d;
+      display: block;
     }
   `
 ];
@@ -70,6 +42,7 @@ let MinidPhoneInput = class extends FormControllerMixin(
     __privateAdd(this, _skipCountryUpdate, false);
     __privateAdd(this, _currentEvent, new Event(""));
     __privateAdd(this, _currentTemplate, "");
+    this.hasSlotControler = new HasSlotController(this, "label");
     this.value = "";
     this.nationalnumber = "";
     this.countrycode = "";
@@ -209,41 +182,29 @@ let MinidPhoneInput = class extends FormControllerMixin(
     const lg = false;
     const md = true;
     const sm = false;
+    const hasLabelSlot = this.hasSlotControler.test("label");
+    const hasLabel = !!this.label || !!hasLabelSlot;
     return html`
       <div
-        part="form-control"
+        part="field"
         class="${classMap({
-      "form-control": true,
-      "fds-paragraph": true,
-      "fds-textfield": true,
-      "flex-1": true,
-      "fds-paragraph--sm": sm,
-      "fds-paragraph--md": md,
-      "fds-paragraph--lg": lg,
-      "fds-textfield--sm": sm,
-      "fds-textfield--md": md,
-      "fds-textfield--lg": lg
-    })}"
+      "text-body-sm": sm,
+      "text-body-md": md,
+      "text-body-lg": lg
+    })} grow"
       >
-        ${!this.label ? nothing : html`<label
-              part="label"
-              for="input"
-              class="${classMap({
-      "sr-only": this.hidelabel,
-      "fds-label": true,
-      "fds-label--medium-weight": true,
-      "fds-textfield__label": true,
-      "fds-label--sm": sm,
-      "fds-label--md": md,
-      "fds-label--lg": lg
-    })}"
-            >
-              ${this.label}
-            </label>`}
-        <div part="base" class="flex">
+        <label
+          for="input"
+          class="${classMap({
+      "sr-only": this.hidelabel || !hasLabel
+    })} mb-2 inline-flex items-center gap-1 font-medium"
+        >
+          <slot name="label"> ${this.label} </slot>
+        </label>
+        <div part="base" class="flex h-12">
           <button
             part="country-button"
-            class="country-button fds-focus flex h-full items-center border pl-3"
+            class="border-neutral focus-visible:focus-ring flex h-full items-center rounded-l border border-r-0 pl-3"
             iconstyled
             variant="tertiary"
             @click=${this.handleCountryClick}
@@ -263,7 +224,7 @@ let MinidPhoneInput = class extends FormControllerMixin(
 
           <input
             id="input"
-            class="phone-number fds-textfield__field fds-textfield__input fds-focus"
+            class="border-neutral p focus-visible:focus-ring grow rounded-r border px-3"
             part="phone-number"
             type="tel"
             autocomplete="tel"
@@ -284,7 +245,7 @@ _skipCountryUpdate = /* @__PURE__ */ new WeakMap();
 _currentEvent = /* @__PURE__ */ new WeakMap();
 _currentTemplate = /* @__PURE__ */ new WeakMap();
 __decorateClass([
-  query(".phone-number")
+  query("#input")
 ], MinidPhoneInput.prototype, "input", 2);
 __decorateClass([
   property({ reflect: true })