@felleslosninger/minid-elements 0.0.97 → 0.0.99

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

@@ -1 +1 @@
-{"version":3,"file":"alert.component.d.ts","sourceRoot":"","sources":["../../src/components/alert.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAW,MAAM,KAAK,CAAC;AAIrD,OAAO,uBAAuB,CAAC;AAW/B,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,UAAU,CAAC;KACzB;CACF;;AA4DD;;;;;;;;;;;;;GAaG;AACH,qBACa,UAAW,SAAQ,eAA0B;IACxD,OAAO,CAAC,eAAe,CAAC,CAAS;IACjC,OAAO,CAAC,qBAAqB,CAAC,CAAS;IAGvC,IAAI,EAAG,WAAW,CAAC;IAEnB;;;OAGG;IAEH,IAAI,UAAS;IAEb;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;;;OAIG;IAEH,QAAQ,SAAY;IAEpB;;OAEG;IAEH,QAAQ,EAAE,SAAS,GAAG,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAU;IAE7D;;OAEG;IAEH,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAEhC;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;;OAGG;IAEH,SAAS,CAAC,EAAE,MAAM,CAAC;IAGnB,OAAO,CAAC,aAAa,CAAiB;IAGtC,mBAAmB,CAAC,EAAE;QACpB,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,OAAO,EAAE,MAAM,CAAC;QAChB,OAAO,CAAC,EAAE,MAAM,CAAC;KAClB,CAAC;IAEF,YAAY;IAIZ,OAAO,CAAC,eAAe;IAevB,OAAO,CAAC,aAAa;IAKrB,OAAO,CAAC,cAAc;IAahB,gBAAgB;IAwCtB,oBAAoB;IAIpB;;OAEG;IACG,IAAI;IASV;;OAEG;IACG,IAAI;IASV;;;;OAIG;IACG,KAAK,CACT,OAAO,EAAE,UAAU,CAAC,qBAAqB,CAAC,EAC1C,QAAQ,CAAC,EAAE,MAAM,EACjB,QAAQ,CAAC,EAAE,UAAU,CAAC,UAAU,CAAC,EACjC,QAAQ,UAAO;IA6DR,MAAM;CAwEhB"}
+{"version":3,"file":"alert.component.d.ts","sourceRoot":"","sources":["../../src/components/alert.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAW,MAAM,KAAK,CAAC;AAIrD,OAAO,uBAAuB,CAAC;AAW/B,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,UAAU,CAAC;KACzB;CACF;;AA4DD;;;;;;;;;;;;;GAaG;AACH,qBACa,UAAW,SAAQ,eAA0B;IACxD,OAAO,CAAC,eAAe,CAAC,CAAS;IACjC,OAAO,CAAC,qBAAqB,CAAC,CAAS;IAGvC,IAAI,EAAG,WAAW,CAAC;IAEnB;;;OAGG;IAEH,IAAI,UAAS;IAEb;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;;;OAIG;IAEH,QAAQ,SAAY;IAEpB;;OAEG;IAEH,QAAQ,EAAE,SAAS,GAAG,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAU;IAE7D;;OAEG;IAEH,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAEhC;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;;OAGG;IAEH,SAAS,CAAC,EAAE,MAAM,CAAC;IAGnB,OAAO,CAAC,aAAa,CAAiB;IAGtC,mBAAmB,CAAC,EAAE;QACpB,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,OAAO,EAAE,MAAM,CAAC;QAChB,OAAO,CAAC,EAAE,MAAM,CAAC;KAClB,CAAC;IAEF,YAAY;IAIZ,OAAO,CAAC,eAAe;IAevB,OAAO,CAAC,aAAa;IAKrB,OAAO,CAAC,cAAc;IAahB,gBAAgB;IAwCtB,oBAAoB;IAIpB;;OAEG;IACG,IAAI;IASV;;OAEG;IACG,IAAI;IASV;;;;OAIG;IACG,KAAK,CACT,OAAO,EAAE,UAAU,CAAC,qBAAqB,CAAC,EAC1C,QAAQ,CAAC,EAAE,MAAM,EACjB,QAAQ,CAAC,EAAE,UAAU,CAAC,UAAU,CAAC,EACjC,QAAQ,UAAO;IA6DR,MAAM;CA2FhB"}

package/dist/components/alert.js

@@ -31,7 +31,7 @@ const styles = [
       font-size: var(--fds-alert-icon-size);
     }
 
-    .close-button {
+    /* .close-button {
       font-size: 24px;
       display: inline-flex;
       align-self: center;
@@ -40,7 +40,7 @@ const styles = [
       margin-top: -10px;
       margin-bottom: -10px;
       color: var(--fds-alert-icon-color);
-    }
+    } */
 
     .close-button:hover {
       background-color: color-mix(
@@ -226,42 +226,49 @@ let MinidAlert = class extends styled(LitElement, styles) {
     const warning = this.severity === "warning";
     const info = this.severity === "info";
     const success = this.severity === "success";
+    const sm = this.size === "sm";
+    const md = this.size === "md";
+    const lg = this.size === "lg";
     const iconName = danger && "xmark-octagon-fill" || warning && "exclamationmark-triangle-fill" || success && "checkmark-circle-fill" || "information-square-fill";
     this.iconlabel ??= danger && "Feil" || warning && "Advarsel" || success && "Suksess" || "Informasjon";
     return html`
       <div
         part="base"
         class="${classMap({
-      "fds-alert": true,
-      "fds-alert--sm": this.size === "sm",
-      "fds-alert--md": this.size === "md",
-      "fds-alert--lg": this.size === "lg",
-      "fds-alert--warning": warning,
-      "fds-alert--success": success,
-      "fds-alert--info": info,
-      "fds-alert--danger": danger,
-      "fds-alert--elevated": this.elevated
-    })}"
+      "text-body-sm": sm,
+      "text-body-md": md,
+      "text-body-lg": lg,
+      "bg-danger-surface-tinted": danger,
+      "bg-info-surface-tinted": info,
+      "bg-success-surface-tinted": success,
+      "bg-warning-surface-tinted": warning,
+      "border-danger": danger,
+      "border-info": info,
+      "border-success": success,
+      "border-warning": warning,
+      "text-danger": danger,
+      "text-info": info,
+      "text-success": success,
+      "text-warning": warning,
+      "shadow-md": this.elevated
+    })} grid grid-cols-[auto_1fr_auto] gap-2 rounded border p-6"
         @mouseenter=${this.pauseAutoHide}
         @mouseleave=${this.resumeAutoHide}
       >
         <mid-icon
-          class="fds-alert__icon"
+          class="${classMap({
+      "text-info-subtle": info,
+      "text-danger-subtle": danger,
+      "text-success-subtle": success,
+      "text-warning-subtle": warning
+    })} size-7"
           name="${iconName}"
           library="system"
           alt=${ifDefined(this.iconlabel)}
         ></mid-icon>
-        <div
-          aria-live="polite"
-          class=${classMap({
-      "fds-paragraph": true,
-      "fds-paragraph--sm": this.size === "sm",
-      "fds-paragraph--md": this.size === "md",
-      "fds-paragraph--lg": this.size === "lg"
-    })}
-        >
+        <div aria-live="polite">
           <slot>
-            ${!this.notificationContent?.title ? nothing : html`<h2 class="fds-heading fds-heading--xs">
+            ${!this.notificationContent?.title ? nothing : html`<h2 class="text-heading-xs">
                   ${this.notificationContent?.title}
                 </h2>`}
             ${this.notificationContent?.message}
@@ -271,8 +278,20 @@ let MinidAlert = class extends styled(LitElement, styles) {
           </slot>
         </div>
         ${this.closable ? html`
-              <button class="close-button" @click="${this.hide}">
-                <mid-icon name="xmark"> </mid-icon>
+              <button
+                class="${classMap({
+      "text-info-subtle": info,
+      "text-danger-subtle": danger,
+      "text-success-subtle": success,
+      "text-warning-subtle": warning,
+      "hover:bg-danger-surface-hover": danger,
+      "hover:bg-info-surface-hover": info,
+      "hover:bg-success-surface-hover": success,
+      "hover:bg-warning-surface-hover": warning
+    })} -my-4 flex self-center rounded p-4"
+                @click="${this.hide}"
+              >
+                <mid-icon class="size-6" name="xmark"> </mid-icon>
               </button>
             ` : nothing}
       </div>

package/dist/components/alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert.js","sources":["../../src/components/alert.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 './icon/icon.component';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { watch } from '../internal/watch';\nimport {\n  getAnimation,\n  setDefaultAnimation,\n} from '../utilities/animation-registry';\nimport { waitForEvent } from '../internal/event';\nimport { animateTo, stopAnimations } from '../internal/animate';\nimport { MidIconName } from '../types/icon-name';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-alert': MinidAlert;\n  }\n}\n\nconst toastStack = Object.assign(document.createElement('div'), {\n  className: 'mid-toast-stack',\n});\n\nconst styles = [\n  css`\n    [hidden] {\n      display: none !important;\n    }\n\n    .fds-alert__icon {\n      font-size: var(--fds-alert-icon-size);\n    }\n\n    .close-button {\n      font-size: 24px;\n      display: inline-flex;\n      align-self: center;\n      padding: 10px;\n      border-radius: 4px;\n      margin-top: -10px;\n      margin-bottom: -10px;\n      color: var(--fds-alert-icon-color);\n    }\n\n    .close-button:hover {\n      background-color: color-mix(\n        in srgb,\n        var(--fds-alert-icon-color) 20%,\n        var(--fds-alert-background)\n      );\n    }\n\n    .message-details {\n      margin-top: 0.5rem;\n      font-size: 0.875rem;\n      line-height: 1.25rem;\n      padding: 0.75rem;\n      background-color: color-mix(\n        in srgb,\n        var(--fds-alert-icon-color) 20%,\n        var(--fds-alert-background)\n      );\n      border-left: solid 4px\n        color-mix(\n          in srgb,\n          var(--fds-alert-border-color),\n          var(--fds-alert-background)\n        );\n    }\n\n    .message-details pre {\n      white-space: pre-wrap;\n      word-break: break-all;\n    }\n  `,\n];\n\n/**\n * Alerts need to have the `open` attribute to be displayed\n * @csspart base - Select the base of the alert\n *\n * @event mid-show - Emitted when the alert opens.\n * @event mid-after-show - Emitted after the alert opens and all animations are complete.\n * @event mid-hide - Emitted when the alert closes.\n * @event mid-after-hide - Emitted after the alert closes and all animations are complete.\n *\n * @slot -- The default slot for the content of the alert\n *\n * @animation alert.show - The animation to use when showing the alert.\n * @animation alert.hide - The animation to use when hiding the alert.\n */\n@customElement('mid-alert')\nexport class MinidAlert extends styled(LitElement, styles) {\n  private autoHideTimeout?: number;\n  private remainingTimeInterval?: number;\n\n  @query('[part~=\"base\"]')\n  base!: HTMLElement;\n\n  /**\n   * Indicates whether or not the alert is open. You can toggle this attribute to show and hide the alert, or you can\n   * use the `show()` and `hide()` methods and this attribute will reflect the alert's open state.\n   */\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  /**\n   * Enables a close button that allows the user to dismiss the alert.\n   */\n  @property({ type: Boolean, reflect: true })\n  closable = false;\n\n  /**\n   * The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with\n   * the alert before it closes (e.g. moves the mouse over it), the timer will restart. Defaults to `Infinity`, meaning\n   * the alert will not close on its own.\n   */\n  @property({ type: Number })\n  duration = Infinity;\n\n  /**\n   * Sets color and icon according to severity\n   */\n  @property({ reflect: true })\n  severity: 'warning' | 'info' | 'danger' | 'success' = 'info';\n\n  /**\n   * Sets size of icon, padding and font-size.\n   */\n  @property({ reflect: true })\n  size: 'sm' | 'md' | 'lg' = 'md';\n\n  /**\n   * Adds a shadow to elevate the component\n   */\n  @property({ type: Boolean })\n  elevated = false;\n\n  /**\n   * Sets the `aria-label` on the icon\n   * Use this to inform screenreaders of severity. Defaults to Norwegian.\n   */\n  @property({ type: String })\n  iconlabel?: string;\n\n  @state()\n  private remainingTime = this.duration;\n\n  @state()\n  notificationContent?: {\n    title?: string;\n    message: string;\n    details?: string;\n  };\n\n  firstUpdated() {\n    this.base.hidden = !this.open;\n  }\n\n  private restartAutoHide() {\n    clearTimeout(this.autoHideTimeout);\n    clearInterval(this.remainingTimeInterval);\n    if (this.open && this.duration < Infinity) {\n      this.autoHideTimeout = window.setTimeout(\n        () => this.hide(),\n        this.duration\n      );\n      this.remainingTime = this.duration;\n      this.remainingTimeInterval = window.setInterval(() => {\n        this.remainingTime -= 100;\n      }, 100);\n    }\n  }\n\n  private pauseAutoHide() {\n    clearTimeout(this.autoHideTimeout);\n    clearInterval(this.remainingTimeInterval);\n  }\n\n  private resumeAutoHide() {\n    if (this.duration < Infinity) {\n      this.autoHideTimeout = window.setTimeout(\n        () => this.hide(),\n        this.remainingTime\n      );\n      this.remainingTimeInterval = window.setInterval(() => {\n        this.remainingTime -= 100;\n      }, 100);\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', { composed: true, bubbles: true })\n      );\n\n      if (this.duration < Infinity) {\n        this.restartAutoHide();\n      }\n\n      await stopAnimations(this.base);\n      this.base.hidden = false;\n      const { keyframes, options } = getAnimation(this, 'alert.show');\n      await animateTo(this.base, keyframes, options);\n\n      this.dispatchEvent(\n        new Event('mid-after-show', { composed: true, bubbles: true })\n      );\n    } else {\n      // Hide\n      this.dispatchEvent(\n        new Event('mid-hide', { composed: true, bubbles: true })\n      );\n\n      clearTimeout(this.autoHideTimeout);\n      clearInterval(this.remainingTimeInterval);\n\n      await stopAnimations(this.base);\n      const { keyframes, options } = getAnimation(this, 'alert.hide');\n      await animateTo(this.base, keyframes, options);\n      this.base.hidden = true;\n\n      this.dispatchEvent(\n        new Event('mid-after-hide', { composed: true, bubbles: true })\n      );\n    }\n  }\n\n  @watch('duration')\n  handleDurationChange() {\n    this.restartAutoHide();\n  }\n\n  /**\n   * Shows the alert.\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 alert\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  /**\n   * Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when\n   * dismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by\n   * calling this method again. The returned promise will resolve after the alert is hidden.\n   */\n  async toast(\n    content: MinidAlert['notificationContent'],\n    duration?: number,\n    severity?: MinidAlert['severity'],\n    closable = true\n  ) {\n    return new Promise<void>((resolve) => {\n      if (toastStack.parentElement === null) {\n        document.body.append(toastStack);\n      }\n\n      if (content) {\n        this.notificationContent = content;\n      }\n\n      if (severity) {\n        this.severity = severity;\n      }\n\n      if (duration) {\n        this.duration = duration;\n      }\n\n      this.closable = closable;\n      this.elevated = true;\n\n      // We wrap this in a timeout for `getBoundingClientRect` to get the height properly\n      setTimeout(() => {\n        toastStack.appendChild(this);\n\n        animateTo(\n          toastStack,\n          [\n            {\n              transform: `translateY(${this.getBoundingClientRect().height}px)`,\n            },\n            { transform: 'translateY(0px)' },\n          ],\n          { duration: 250, easing: 'ease-out' }\n        );\n      }, 0);\n\n      // Wait for the toast stack to render\n      requestAnimationFrame(() => {\n        // Force a reflow for the initial transition\n        this.clientWidth;\n        this.show();\n      });\n\n      this.addEventListener(\n        'mid-after-hide',\n        () => {\n          toastStack.removeChild(this);\n          resolve();\n\n          // Remove the toast stack from the DOM when there are no more alerts\n          if (toastStack.querySelector('mid-alert') === null) {\n            toastStack.remove();\n          }\n        },\n        { once: true }\n      );\n    });\n  }\n\n  override render() {\n    const danger = this.severity === 'danger';\n    const warning = this.severity === 'warning';\n    const info = this.severity === 'info';\n    const success = this.severity === 'success';\n    const iconName: MidIconName =\n      (danger && 'xmark-octagon-fill') ||\n      (warning && 'exclamationmark-triangle-fill') ||\n      (success && 'checkmark-circle-fill') ||\n      'information-square-fill';\n    this.iconlabel ??=\n      (danger && 'Feil') ||\n      (warning && 'Advarsel') ||\n      (success && 'Suksess') ||\n      'Informasjon';\n\n    return html`\n      <div\n        part=\"base\"\n        class=\"${classMap({\n          'fds-alert': true,\n          'fds-alert--sm': this.size === 'sm',\n          'fds-alert--md': this.size === 'md',\n          'fds-alert--lg': this.size === 'lg',\n          'fds-alert--warning': warning,\n          'fds-alert--success': success,\n          'fds-alert--info': info,\n          'fds-alert--danger': danger,\n          'fds-alert--elevated': this.elevated,\n        })}\"\n        @mouseenter=${this.pauseAutoHide}\n        @mouseleave=${this.resumeAutoHide}\n      >\n        <mid-icon\n          class=\"fds-alert__icon\"\n          name=\"${iconName}\"\n          library=\"system\"\n          alt=${ifDefined(this.iconlabel)}\n        ></mid-icon>\n        <div\n          aria-live=\"polite\"\n          class=${classMap({\n            'fds-paragraph': true,\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>\n            ${!this.notificationContent?.title\n              ? nothing\n              : html`<h2 class=\"fds-heading fds-heading--xs\">\n                  ${this.notificationContent?.title}\n                </h2>`}\n            ${this.notificationContent?.message}\n            ${!this.notificationContent?.details\n              ? nothing\n              : html`<div class=\"message-details\">\n                  <pre>${this.notificationContent?.details}</pre>\n                </div>`}\n          </slot>\n        </div>\n        ${this.closable\n          ? html`\n              <button class=\"close-button\" @click=\"${this.hide}\">\n                <mid-icon name=\"xmark\"> </mid-icon>\n              </button>\n            `\n          : nothing}\n      </div>\n    `;\n  }\n}\n\nsetDefaultAnimation('alert.show', {\n  keyframes: [\n    { opacity: 0, transform: 'translateY(100%)' },\n    { opacity: 1, transform: 'translateY(0px)' },\n  ],\n  options: { duration: 400, easing: 'ease-out' },\n});\n\nsetDefaultAnimation('alert.hide', {\n  keyframes: [\n    { opacity: 1, scale: 1 },\n    { opacity: 0, scale: 0.8 },\n  ],\n  options: { duration: 250, easing: 'ease-in' },\n});\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"alert.js","sources":["../../src/components/alert.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 './icon/icon.component';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { watch } from '../internal/watch';\nimport {\n  getAnimation,\n  setDefaultAnimation,\n} from '../utilities/animation-registry';\nimport { waitForEvent } from '../internal/event';\nimport { animateTo, stopAnimations } from '../internal/animate';\nimport { type MidIconName } from '../types/icon-name';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-alert': MinidAlert;\n  }\n}\n\nconst toastStack = Object.assign(document.createElement('div'), {\n  className: 'mid-toast-stack',\n});\n\nconst styles = [\n  css`\n    [hidden] {\n      display: none !important;\n    }\n\n    .fds-alert__icon {\n      font-size: var(--fds-alert-icon-size);\n    }\n\n    /* .close-button {\n      font-size: 24px;\n      display: inline-flex;\n      align-self: center;\n      padding: 10px;\n      border-radius: 4px;\n      margin-top: -10px;\n      margin-bottom: -10px;\n      color: var(--fds-alert-icon-color);\n    } */\n\n    .close-button:hover {\n      background-color: color-mix(\n        in srgb,\n        var(--fds-alert-icon-color) 20%,\n        var(--fds-alert-background)\n      );\n    }\n\n    .message-details {\n      margin-top: 0.5rem;\n      font-size: 0.875rem;\n      line-height: 1.25rem;\n      padding: 0.75rem;\n      background-color: color-mix(\n        in srgb,\n        var(--fds-alert-icon-color) 20%,\n        var(--fds-alert-background)\n      );\n      border-left: solid 4px\n        color-mix(\n          in srgb,\n          var(--fds-alert-border-color),\n          var(--fds-alert-background)\n        );\n    }\n\n    .message-details pre {\n      white-space: pre-wrap;\n      word-break: break-all;\n    }\n  `,\n];\n\n/**\n * Alerts need to have the `open` attribute to be displayed\n * @csspart base - Select the base of the alert\n *\n * @event mid-show - Emitted when the alert opens.\n * @event mid-after-show - Emitted after the alert opens and all animations are complete.\n * @event mid-hide - Emitted when the alert closes.\n * @event mid-after-hide - Emitted after the alert closes and all animations are complete.\n *\n * @slot -- The default slot for the content of the alert\n *\n * @animation alert.show - The animation to use when showing the alert.\n * @animation alert.hide - The animation to use when hiding the alert.\n */\n@customElement('mid-alert')\nexport class MinidAlert extends styled(LitElement, styles) {\n  private autoHideTimeout?: number;\n  private remainingTimeInterval?: number;\n\n  @query('[part~=\"base\"]')\n  base!: HTMLElement;\n\n  /**\n   * Indicates whether or not the alert is open. You can toggle this attribute to show and hide the alert, or you can\n   * use the `show()` and `hide()` methods and this attribute will reflect the alert's open state.\n   */\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  /**\n   * Enables a close button that allows the user to dismiss the alert.\n   */\n  @property({ type: Boolean, reflect: true })\n  closable = false;\n\n  /**\n   * The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with\n   * the alert before it closes (e.g. moves the mouse over it), the timer will restart. Defaults to `Infinity`, meaning\n   * the alert will not close on its own.\n   */\n  @property({ type: Number })\n  duration = Infinity;\n\n  /**\n   * Sets color and icon according to severity\n   */\n  @property({ reflect: true })\n  severity: 'warning' | 'info' | 'danger' | 'success' = 'info';\n\n  /**\n   * Sets size of icon, padding and font-size.\n   */\n  @property({ reflect: true })\n  size: 'sm' | 'md' | 'lg' = 'md';\n\n  /**\n   * Adds a shadow to elevate the component\n   */\n  @property({ type: Boolean })\n  elevated = false;\n\n  /**\n   * Sets the `aria-label` on the icon\n   * Use this to inform screenreaders of severity. Defaults to Norwegian.\n   */\n  @property({ type: String })\n  iconlabel?: string;\n\n  @state()\n  private remainingTime = this.duration;\n\n  @state()\n  notificationContent?: {\n    title?: string;\n    message: string;\n    details?: string;\n  };\n\n  firstUpdated() {\n    this.base.hidden = !this.open;\n  }\n\n  private restartAutoHide() {\n    clearTimeout(this.autoHideTimeout);\n    clearInterval(this.remainingTimeInterval);\n    if (this.open && this.duration < Infinity) {\n      this.autoHideTimeout = window.setTimeout(\n        () => this.hide(),\n        this.duration\n      );\n      this.remainingTime = this.duration;\n      this.remainingTimeInterval = window.setInterval(() => {\n        this.remainingTime -= 100;\n      }, 100);\n    }\n  }\n\n  private pauseAutoHide() {\n    clearTimeout(this.autoHideTimeout);\n    clearInterval(this.remainingTimeInterval);\n  }\n\n  private resumeAutoHide() {\n    if (this.duration < Infinity) {\n      this.autoHideTimeout = window.setTimeout(\n        () => this.hide(),\n        this.remainingTime\n      );\n      this.remainingTimeInterval = window.setInterval(() => {\n        this.remainingTime -= 100;\n      }, 100);\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', { composed: true, bubbles: true })\n      );\n\n      if (this.duration < Infinity) {\n        this.restartAutoHide();\n      }\n\n      await stopAnimations(this.base);\n      this.base.hidden = false;\n      const { keyframes, options } = getAnimation(this, 'alert.show');\n      await animateTo(this.base, keyframes, options);\n\n      this.dispatchEvent(\n        new Event('mid-after-show', { composed: true, bubbles: true })\n      );\n    } else {\n      // Hide\n      this.dispatchEvent(\n        new Event('mid-hide', { composed: true, bubbles: true })\n      );\n\n      clearTimeout(this.autoHideTimeout);\n      clearInterval(this.remainingTimeInterval);\n\n      await stopAnimations(this.base);\n      const { keyframes, options } = getAnimation(this, 'alert.hide');\n      await animateTo(this.base, keyframes, options);\n      this.base.hidden = true;\n\n      this.dispatchEvent(\n        new Event('mid-after-hide', { composed: true, bubbles: true })\n      );\n    }\n  }\n\n  @watch('duration')\n  handleDurationChange() {\n    this.restartAutoHide();\n  }\n\n  /**\n   * Shows the alert.\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 alert\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  /**\n   * Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when\n   * dismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by\n   * calling this method again. The returned promise will resolve after the alert is hidden.\n   */\n  async toast(\n    content: MinidAlert['notificationContent'],\n    duration?: number,\n    severity?: MinidAlert['severity'],\n    closable = true\n  ) {\n    return new Promise<void>((resolve) => {\n      if (toastStack.parentElement === null) {\n        document.body.append(toastStack);\n      }\n\n      if (content) {\n        this.notificationContent = content;\n      }\n\n      if (severity) {\n        this.severity = severity;\n      }\n\n      if (duration) {\n        this.duration = duration;\n      }\n\n      this.closable = closable;\n      this.elevated = true;\n\n      // We wrap this in a timeout for `getBoundingClientRect` to get the height properly\n      setTimeout(() => {\n        toastStack.appendChild(this);\n\n        animateTo(\n          toastStack,\n          [\n            {\n              transform: `translateY(${this.getBoundingClientRect().height}px)`,\n            },\n            { transform: 'translateY(0px)' },\n          ],\n          { duration: 250, easing: 'ease-out' }\n        );\n      }, 0);\n\n      // Wait for the toast stack to render\n      requestAnimationFrame(() => {\n        // Force a reflow for the initial transition\n        this.clientWidth;\n        this.show();\n      });\n\n      this.addEventListener(\n        'mid-after-hide',\n        () => {\n          toastStack.removeChild(this);\n          resolve();\n\n          // Remove the toast stack from the DOM when there are no more alerts\n          if (toastStack.querySelector('mid-alert') === null) {\n            toastStack.remove();\n          }\n        },\n        { once: true }\n      );\n    });\n  }\n\n  override render() {\n    const danger = this.severity === 'danger';\n    const warning = this.severity === 'warning';\n    const info = this.severity === 'info';\n    const success = this.severity === 'success';\n    const sm = this.size === 'sm';\n    const md = this.size === 'md';\n    const lg = this.size === 'lg';\n    const iconName: MidIconName =\n      (danger && 'xmark-octagon-fill') ||\n      (warning && 'exclamationmark-triangle-fill') ||\n      (success && 'checkmark-circle-fill') ||\n      'information-square-fill';\n    this.iconlabel ??=\n      (danger && 'Feil') ||\n      (warning && 'Advarsel') ||\n      (success && 'Suksess') ||\n      'Informasjon';\n\n    return html`\n      <div\n        part=\"base\"\n        class=\"${classMap({\n          'text-body-sm': sm,\n          'text-body-md': md,\n          'text-body-lg': lg,\n          'bg-danger-surface-tinted': danger,\n          'bg-info-surface-tinted': info,\n          'bg-success-surface-tinted': success,\n          'bg-warning-surface-tinted': warning,\n          'border-danger': danger,\n          'border-info': info,\n          'border-success': success,\n          'border-warning': warning,\n          'text-danger': danger,\n          'text-info': info,\n          'text-success': success,\n          'text-warning': warning,\n          'shadow-md': this.elevated,\n        })} grid grid-cols-[auto_1fr_auto] gap-2 rounded border p-6\"\n        @mouseenter=${this.pauseAutoHide}\n        @mouseleave=${this.resumeAutoHide}\n      >\n        <mid-icon\n          class=\"${classMap({\n            'text-info-subtle': info,\n            'text-danger-subtle': danger,\n            'text-success-subtle': success,\n            'text-warning-subtle': warning,\n          })} size-7\"\n          name=\"${iconName}\"\n          library=\"system\"\n          alt=${ifDefined(this.iconlabel)}\n        ></mid-icon>\n        <div aria-live=\"polite\">\n          <slot>\n            ${!this.notificationContent?.title\n              ? nothing\n              : html`<h2 class=\"text-heading-xs\">\n                  ${this.notificationContent?.title}\n                </h2>`}\n            ${this.notificationContent?.message}\n            ${!this.notificationContent?.details\n              ? nothing\n              : html`<div class=\"message-details\">\n                  <pre>${this.notificationContent?.details}</pre>\n                </div>`}\n          </slot>\n        </div>\n        ${this.closable\n          ? html`\n              <button\n                class=\"${classMap({\n                  'text-info-subtle': info,\n                  'text-danger-subtle': danger,\n                  'text-success-subtle': success,\n                  'text-warning-subtle': warning,\n                  'hover:bg-danger-surface-hover': danger,\n                  'hover:bg-info-surface-hover': info,\n                  'hover:bg-success-surface-hover': success,\n                  'hover:bg-warning-surface-hover': warning,\n                })} -my-4 flex self-center rounded p-4\"\n                @click=\"${this.hide}\"\n              >\n                <mid-icon class=\"size-6\" name=\"xmark\"> </mid-icon>\n              </button>\n            `\n          : nothing}\n      </div>\n    `;\n  }\n}\n\nsetDefaultAnimation('alert.show', {\n  keyframes: [\n    { opacity: 0, transform: 'translateY(100%)' },\n    { opacity: 1, transform: 'translateY(0px)' },\n  ],\n  options: { duration: 400, easing: 'ease-out' },\n});\n\nsetDefaultAnimation('alert.hide', {\n  keyframes: [\n    { opacity: 1, scale: 1 },\n    { opacity: 0, scale: 0.8 },\n  ],\n  options: { duration: 250, easing: 'ease-in' },\n});\n"],"names":[],"mappings":"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"}

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

@@ -9,7 +9,6 @@ declare const MinidButton_base: typeof LitElement & import('../types/mixin-const
  * A regular old button
  */
 export declare class MinidButton extends MinidButton_base {
-    #private;
     button: HTMLButtonElement | HTMLLinkElement;
     /**
      * The value of the button (optional)
@@ -31,10 +30,6 @@ export declare class MinidButton extends MinidButton_base {
      * The href of the button. If set, the button will be rendered as an anchor tag
      */
     href: string | undefined;
-    /**
-     * Whether the button should be full width
-     */
-    fullwidth: boolean;
     /**
      * Whether the button is disabled
      */
@@ -50,6 +45,10 @@ export declare class MinidButton extends MinidButton_base {
     iconstyled: boolean;
     constructor();
     handleClick(): void;
+    /**
+     * @ignore
+     */
+    get isLink(): boolean;
     focus(): void;
     render(): import('lit-html').TemplateResult;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"button.component.d.ts","sourceRoot":"","sources":["../../src/components/button.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,UAAU,EAAE,MAAM,KAAK,CAAC;AAOtC,OAAO,wBAAwB,CAAC;AAEhC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,WAAW,CAAC;KAC3B;CACF;;AAyBD;;GAEG;AACH,qBACa,WAAY,SAAQ,gBAEhC;;IAEC,MAAM,EAAG,iBAAiB,GAAG,eAAe,CAAC;IAE7C;;OAEG;IAEH,KAAK,SAAM;IAEX;;OAEG;IAEH,OAAO,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,CAAa;IAE1D;;OAEG;IAEH,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAEhC;;OAEG;IAEH,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAY;IAE/C;;OAEG;IAEH,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IAEzB;;OAEG;IAEH,SAAS,UAAS;IAElB;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,OAAO,UAAS;IAGhB,WAAW,SAAM;IAEjB;;OAEG;IAEH,UAAU,UAAS;;IAOnB,WAAW;IAgBX,KAAK;IAII,MAAM;CAiChB"}
+{"version":3,"file":"button.component.d.ts","sourceRoot":"","sources":["../../src/components/button.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,UAAU,EAAE,MAAM,KAAK,CAAC;AAOtC,OAAO,wBAAwB,CAAC;AAEhC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,WAAW,CAAC;KAC3B;CACF;;AAUD;;GAEG;AACH,qBACa,WAAY,SAAQ,gBAEhC;IAEC,MAAM,EAAG,iBAAiB,GAAG,eAAe,CAAC;IAE7C;;OAEG;IAEH,KAAK,SAAM;IAEX;;OAEG;IAEH,OAAO,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,CAAa;IAE1D;;OAEG;IAEH,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAEhC;;OAEG;IAEH,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAY;IAE/C;;OAEG;IAEH,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IAEzB;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,OAAO,UAAS;IAGhB,WAAW,SAAM;IAEjB;;OAEG;IAEH,UAAU,UAAS;;IAOnB,WAAW;IASX;;OAEG;IACH,IAAI,MAAM,YAET;IAED,KAAK;IAII,MAAM;CAmEhB"}

package/dist/components/button.js

@@ -8,9 +8,6 @@ import { FormControllerMixin } from "../mixins/form-controller.mixin.js";
 import "./spinner.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--)
@@ -19,29 +16,10 @@ 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"), getter ? getter.call(obj) : 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 _MinidButton_instances, isLink_get;
 const styles = [
   css`
     :host {
-      width: auto;
-    }
-
-    .btn-loading {
-      cursor: wait;
-    }
-
-    .btn-spinner-only {
-      position: relative;
-      gap: 0;
-    }
-
-    .btn-spinner-only mid-spinner {
-      position: absolute;
-      top: calc(50% - 0.5em);
-      left: calc(50% - 0.5em);
+      display: inline-flex;
     }
   `
 ];
@@ -50,12 +28,10 @@ let MinidButton = class extends FormControllerMixin(
 ) {
   constructor() {
     super();
-    __privateAdd(this, _MinidButton_instances);
     this.value = "";
     this.variant = "primary";
     this.size = "md";
     this.type = "button";
-    this.fullwidth = false;
     this.disabled = false;
     this.loading = false;
     this.loadingtext = "";
@@ -70,46 +46,78 @@ let MinidButton = class extends FormControllerMixin(
       this.internals.form.reset();
     }
   }
+  /**
+   * @ignore
+   */
+  get isLink() {
+    return !!this.href;
+  }
   focus() {
     this.button.focus();
   }
   render() {
-    const tag = __privateGet(this, _MinidButton_instances, isLink_get) ? literal`a` : literal`button`;
+    const tag = this.isLink ? literal`a` : literal`button`;
+    const primary = this.variant === "primary";
+    const secondary = this.variant === "secondary";
+    const tertiary = this.variant === "tertiary";
+    const sm = this.size === "sm";
+    const md = this.size === "md";
+    const lg = this.size === "lg";
+    const spinnerOnly = this.loading && !this.loadingtext;
     return html`<${tag}
       part="base"
       class="${classMap({
-      button: true,
-      "fds-focus": true,
-      "fds-btn": true,
-      "fds-btn--first": true,
-      "fds-btn--full-width": this.fullwidth,
-      "fds-btn--icon-only": this.iconstyled,
-      "fds-btn--primary": this.variant === "primary",
-      "fds-btn--secondary": this.variant === "secondary",
-      "fds-btn--tertiary": this.variant === "tertiary",
-      "fds-btn--sm": this.size === "sm",
-      "fds-btn--md": this.size === "md",
-      "fds-btn--lg": this.size === "lg",
-      "btn-loading": this.loading,
-      "btn-spinner-only": this.loading && !this.loadingtext
-    })}"
+      "w-12": this.iconstyled,
+      "h-12": this.iconstyled,
+      "py-2": !this.iconstyled,
+      "px-4": !this.iconstyled,
+      "bg-accent-base": primary,
+      "text-accent-base-contrast": primary,
+      "border-transparent": primary || tertiary,
+      "hover:bg-accent-base-hover": primary,
+      "active:bg-accent-base-active": primary,
+      "bg-transparent": secondary || tertiary,
+      "active:bg-accent-surface-active": secondary || tertiary,
+      "hover:bg-accent-surface-hover": secondary || tertiary,
+      "text-accent-subtle": secondary || tertiary,
+      "hover:text-accent": secondary || tertiary,
+      "border-accent-strong": secondary,
+      "text-body-sm": sm,
+      "text-body-md": md,
+      "text-body-lg": lg,
+      "cursor-wait": this.loading && !this.disabled,
+      "cursor-pointer": !this.loading && !this.disabled,
+      "cursor-not-allowed": this.disabled,
+      relative: spinnerOnly,
+      "gap-0": spinnerOnly,
+      "opacity-disabled": this.disabled && !this.loading
+    })} grow focus-visible:focus-ring leading-sm flex h-fit min-h-12 min-w-12 items-center justify-center gap-2 rounded border font-medium"
       type=${this.type}
+      aria-busy=${this.loading}
       ?disabled=${this.disabled}
       href="${ifDefined(this.href)}"
     >
-      <slot class="${classMap({
-      invisible: this.loading && !this.loadingtext,
+      <slot
+        class="${classMap({
+      invisible: spinnerOnly,
       hidden: this.loading && this.loadingtext
-    })}"></slot>
-      <span class="${classMap({ hidden: !this.loading })}">${this.loadingtext}</span>
-      ${this.loading ? html`<mid-spinner class="text-2xl" part="spinner"></mid-spinner>` : ""}
+    })}"
+      ></slot>
+      <span class="${classMap({ hidden: !this.loading || !this.loadingtext })}">
+        ${this.loadingtext}
+      </span>
+      ${this.loading ? html`<mid-spinner
+              class="${classMap({
+      "text-[1.4rem]": true,
+      absolute: spinnerOnly,
+      "top-[calc(50%_-_0.5em)]": spinnerOnly,
+      "left-[calc(50%_-_0.5em)]": spinnerOnly
+    })}"
+              part="spinner"
+            ></mid-spinner>` : ""}
     </${tag}>`;
   }
 };
-_MinidButton_instances = /* @__PURE__ */ new WeakSet();
-isLink_get = function() {
-  return !!this.href;
-};
 __decorateClass([
   query(".button")
 ], MinidButton.prototype, "button", 2);
@@ -128,9 +136,6 @@ __decorateClass([
 __decorateClass([
   property({ type: String })
 ], MinidButton.prototype, "href", 2);
-__decorateClass([
-  property({ type: Boolean })
-], MinidButton.prototype, "fullwidth", 2);
 __decorateClass([
   property({ type: Boolean })
 ], MinidButton.prototype, "disabled", 2);

package/dist/components/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","sources":["../../src/components/button.component.ts"],"sourcesContent":["import { css, LitElement } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { html, literal } from 'lit/static-html.js';\nimport { styled } from '../mixins/tailwind.mixin.ts';\nimport { FormControllerMixin } from '../mixins/form-controller.mixin.ts';\nimport './spinner.component.ts';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-button': MinidButton;\n  }\n}\n\nconst styles = [\n  css`\n    :host {\n      width: auto;\n    }\n\n    .btn-loading {\n      cursor: wait;\n    }\n\n    .btn-spinner-only {\n      position: relative;\n      gap: 0;\n    }\n\n    .btn-spinner-only mid-spinner {\n      position: absolute;\n      top: calc(50% - 0.5em);\n      left: calc(50% - 0.5em);\n    }\n  `,\n];\n\n/**\n * A regular old button\n */\n@customElement('mid-button')\nexport class MinidButton extends FormControllerMixin(\n  styled(LitElement, styles)\n) {\n  @query('.button')\n  button!: HTMLButtonElement | HTMLLinkElement;\n\n  /**\n   * The value of the button (optional)\n   */\n  @property({ type: String })\n  value = '';\n\n  /**\n   * The variant of the button\n   */\n  @property({ type: String })\n  variant: 'primary' | 'secondary' | 'tertiary' = 'primary';\n\n  /**\n   * The size of the button. Defaults to 'md'\n   */\n  @property({ type: String })\n  size: 'md' | 'lg' | 'sm' = 'md';\n\n  /**\n   * The type of the button. Defaults to normal 'button'\n   */\n  @property({ type: String })\n  type: 'submit' | 'button' | 'reset' = 'button';\n\n  /**\n   * The href of the button. If set, the button will be rendered as an anchor tag\n   */\n  @property({ type: String })\n  href: string | undefined;\n\n  /**\n   * Whether the button should be full width\n   */\n  @property({ type: Boolean })\n  fullwidth = false;\n\n  /**\n   * Whether the button is disabled\n   */\n  @property({ type: Boolean })\n  disabled = false;\n\n  /**\n   *\n   */\n  @property({ type: Boolean })\n  loading = false;\n\n  @property()\n  loadingtext = '';\n\n  /**\n   * Toggle icon only styling\n   */\n  @property({ type: Boolean })\n  iconstyled = false;\n\n  constructor() {\n    super();\n    this.addEventListener('click', this.handleClick);\n  }\n\n  handleClick() {\n    if (this.type === 'submit') {\n      this.value && this.setFormValue(this.value);\n      this.internals.form!.requestSubmit();\n    } else if (this.type === 'reset') {\n      this.internals.form!.reset();\n    }\n  }\n\n  /**\n   * @ignore\n   */\n  get #isLink() {\n    return !!this.href;\n  }\n\n  focus() {\n    this.button.focus();\n  }\n\n  override render() {\n    const tag = this.#isLink ? literal`a` : literal`button`;\n\n    return html`<${tag}\n      part=\"base\"\n      class=\"${classMap({\n        button: true,\n        'fds-focus': true,\n        'fds-btn': true,\n        'fds-btn--first': true,\n        'fds-btn--full-width': this.fullwidth,\n        'fds-btn--icon-only': this.iconstyled,\n        'fds-btn--primary': this.variant === 'primary',\n        'fds-btn--secondary': this.variant === 'secondary',\n        'fds-btn--tertiary': this.variant === 'tertiary',\n        'fds-btn--sm': this.size === 'sm',\n        'fds-btn--md': this.size === 'md',\n        'fds-btn--lg': this.size === 'lg',\n        'btn-loading': this.loading,\n        'btn-spinner-only': this.loading && !this.loadingtext,\n      })}\"\n      type=${this.type}\n      ?disabled=${this.disabled}\n      href=\"${ifDefined(this.href)}\"\n    >\n      <slot class=\"${classMap({\n        invisible: this.loading && !this.loadingtext,\n        hidden: this.loading && this.loadingtext,\n      })}\"></slot>\n      <span class=\"${classMap({ hidden: !this.loading })}\">${this.loadingtext}</span>\n      ${this.loading ? html`<mid-spinner class=\"text-2xl\" part=\"spinner\"></mid-spinner>` : ''}\n    </${tag}>`;\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"button.js","sources":["../../src/components/button.component.ts"],"sourcesContent":["import { css, LitElement } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { html, literal } from 'lit/static-html.js';\nimport { styled } from '../mixins/tailwind.mixin.ts';\nimport { FormControllerMixin } from '../mixins/form-controller.mixin.ts';\nimport './spinner.component.ts';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-button': MinidButton;\n  }\n}\n\nconst styles = [\n  css`\n    :host {\n      display: inline-flex;\n    }\n  `,\n];\n\n/**\n * A regular old button\n */\n@customElement('mid-button')\nexport class MinidButton extends FormControllerMixin(\n  styled(LitElement, styles)\n) {\n  @query('.button')\n  button!: HTMLButtonElement | HTMLLinkElement;\n\n  /**\n   * The value of the button (optional)\n   */\n  @property({ type: String })\n  value = '';\n\n  /**\n   * The variant of the button\n   */\n  @property({ type: String })\n  variant: 'primary' | 'secondary' | 'tertiary' = 'primary';\n\n  /**\n   * The size of the button. Defaults to 'md'\n   */\n  @property({ type: String })\n  size: 'md' | 'lg' | 'sm' = 'md';\n\n  /**\n   * The type of the button. Defaults to normal 'button'\n   */\n  @property({ type: String })\n  type: 'submit' | 'button' | 'reset' = 'button';\n\n  /**\n   * The href of the button. If set, the button will be rendered as an anchor tag\n   */\n  @property({ type: String })\n  href: string | undefined;\n\n  /**\n   * Whether the button is disabled\n   */\n  @property({ type: Boolean })\n  disabled = false;\n\n  /**\n   *\n   */\n  @property({ type: Boolean })\n  loading = false;\n\n  @property()\n  loadingtext = '';\n\n  /**\n   * Toggle icon only styling\n   */\n  @property({ type: Boolean })\n  iconstyled = false;\n\n  constructor() {\n    super();\n    this.addEventListener('click', this.handleClick);\n  }\n\n  handleClick() {\n    if (this.type === 'submit') {\n      this.value && this.setFormValue(this.value);\n      this.internals.form!.requestSubmit();\n    } else if (this.type === 'reset') {\n      this.internals.form!.reset();\n    }\n  }\n\n  /**\n   * @ignore\n   */\n  get isLink() {\n    return !!this.href;\n  }\n\n  focus() {\n    this.button.focus();\n  }\n\n  override render() {\n    const tag = this.isLink ? literal`a` : literal`button`;\n    const primary = this.variant === 'primary';\n    const secondary = this.variant === 'secondary';\n    const tertiary = this.variant === 'tertiary';\n    const sm = this.size === 'sm';\n    const md = this.size === 'md';\n    const lg = this.size === 'lg';\n    const spinnerOnly = this.loading && !this.loadingtext;\n\n    return html`<${tag}\n      part=\"base\"\n      class=\"${classMap({\n        'w-12': this.iconstyled,\n        'h-12': this.iconstyled,\n        'py-2': !this.iconstyled,\n        'px-4': !this.iconstyled,\n        'bg-accent-base': primary,\n        'text-accent-base-contrast': primary,\n        'border-transparent': primary || tertiary,\n        'hover:bg-accent-base-hover': primary,\n        'active:bg-accent-base-active': primary,\n        'bg-transparent': secondary || tertiary,\n        'active:bg-accent-surface-active': secondary || tertiary,\n        'hover:bg-accent-surface-hover': secondary || tertiary,\n        'text-accent-subtle': secondary || tertiary,\n        'hover:text-accent': secondary || tertiary,\n        'border-accent-strong': secondary,\n        'text-body-sm': sm,\n        'text-body-md': md,\n        'text-body-lg': lg,\n        'cursor-wait': this.loading && !this.disabled,\n        'cursor-pointer': !this.loading && !this.disabled,\n        'cursor-not-allowed': this.disabled,\n        relative: spinnerOnly,\n        'gap-0': spinnerOnly,\n        'opacity-disabled': this.disabled && !this.loading,\n      })} grow focus-visible:focus-ring leading-sm flex h-fit min-h-12 min-w-12 items-center justify-center gap-2 rounded border font-medium\"\n      type=${this.type}\n      aria-busy=${this.loading}\n      ?disabled=${this.disabled}\n      href=\"${ifDefined(this.href)}\"\n    >\n      <slot\n        class=\"${classMap({\n          invisible: spinnerOnly,\n          hidden: this.loading && this.loadingtext,\n        })}\"\n      ></slot>\n      <span class=\"${classMap({ hidden: !this.loading || !this.loadingtext })}\">\n        ${this.loadingtext}\n      </span>\n      ${\n        this.loading\n          ? html`<mid-spinner\n              class=\"${classMap({\n                'text-[1.4rem]': true,\n                absolute: spinnerOnly,\n                'top-[calc(50%_-_0.5em)]': spinnerOnly,\n                'left-[calc(50%_-_0.5em)]': spinnerOnly,\n              })}\"\n              part=\"spinner\"\n            ></mid-spinner>`\n          : ''\n      }\n    </${tag}>`;\n  }\n}\n"],"names":[],"mappings":"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"}

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

@@ -15,22 +15,10 @@ declare const MinidCombobox_base: typeof LitElement;
  * @part panel - Select the dropdown panel host element
  */
 export declare class MinidCombobox extends MinidCombobox_base {
-    #private;
-    /**
-     * @ignore
-     */
+    private closeWatcher?;
     popup: MinidPopup;
-    /**
-     * @ignore
-     */
     trigger: HTMLSlotElement;
-    /**
-     * @ignore
-     */
     panel: HTMLSlotElement;
-    /**
-     * @ignore
-     */
     triggerElements: (MinidTextfield | MinidPhoneInput | HTMLInputElement)[];
     /**
      * By default, the combobox is closed when an item is selected. This attribute will keep it open instead. Useful for

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

@@ -1 +1 @@
-{"version":3,"file":"combobox.component.d.ts","sourceRoot":"","sources":["../../src/components/combobox.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAQ5D,OAAO,mBAAmB,CAAC;AAE3B,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAU/C,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,eAAe,EAAE,MAAM,qCAAqC,CAAC;AACtE,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAEnE,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,aAAa,CAAC;KAC/B;CACF;;AAUD;;;;GAIG;AACH,qBACa,aAAc,SAAQ,kBAA0B;;IAM3D;;OAEG;IAEH,KAAK,EAAG,UAAU,CAAC;IAEnB;;OAEG;IAEH,OAAO,EAAG,eAAe,CAAC;IAE1B;;OAEG;IAEH,KAAK,EAAG,eAAe,CAAC;IAExB;;OAEG;IAEH,eAAe,EAAG,CAAC,cAAc,GAAG,eAAe,GAAG,gBAAgB,CAAC,EAAE,CAAC;IAE1E;;;OAGG;IAEH,gBAAgB,UAAS;IAEzB;;OAEG;IAEH,IAAI,UAAS;IAGb,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAEhC;;OAEG;IAEH,QAAQ,SAAK;IAEb;;OAEG;IAEH,QAAQ,SAAK;IAEb;;;OAGG;IAEH,KAAK,UAAS;IAGd,QAAQ,UAAS;IAGjB,cAAc,EAAE,eAAe,GAAG,iBAAiB,CAAmB;IAEtE;;;OAGG;IAEH,iBAAiB,CAAC,EAAE,WAAW,CAAC;IAEhC,iBAAiB;IAQjB,SAAS,CAAC,YAAY,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAsBhE,oBAAoB;IAMpB,cAAc;IAUd,OAAO,IAID,SAAS,GACT,SAAS;IAGf,OAAO,CAAC,kBAAkB,CAWxB;IAEF,OAAO,CAAC,aAAa,CASnB;IAEF,OAAO,CAAC,qBAAqB,CA2C3B;IAEF,OAAO,CAAC,uBAAuB,CAM7B;IAEF,OAAO,CAAC,iBAAiB,CAiBvB;IAEF,kBAAkB;IAaZ,oBAAoB,CAAC,KAAK,EAAE,aAAa;IA4D/C,kBAAkB,CAAC,KAAK,EAAE,aAAa;IAOvC,uBAAuB;IAIvB;;;OAGG;IACH,UAAU;IAIV,gBAAgB;IAchB,mBAAmB;IAMnB;;OAEG;IACG,IAAI;IASV;;OAEG;IACG,IAAI;IAmBV,uBAAuB;IA0BjB,gBAAgB;IA0Cb,MAAM;CAwChB"}
+{"version":3,"file":"combobox.component.d.ts","sourceRoot":"","sources":["../../src/components/combobox.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAQ5D,OAAO,mBAAmB,CAAC;AAE3B,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAU/C,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,eAAe,EAAE,MAAM,qCAAqC,CAAC;AACtE,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAEnE,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,aAAa,CAAC;KAC/B;CACF;;AAUD;;;;GAIG;AACH,qBACa,aAAc,SAAQ,kBAA0B;IAC3D,OAAO,CAAC,YAAY,CAAC,CAAe;IAGpC,KAAK,EAAG,UAAU,CAAC;IAGnB,OAAO,EAAG,eAAe,CAAC;IAG1B,KAAK,EAAG,eAAe,CAAC;IAGxB,eAAe,EAAG,CAAC,cAAc,GAAG,eAAe,GAAG,gBAAgB,CAAC,EAAE,CAAC;IAE1E;;;OAGG;IAEH,gBAAgB,UAAS;IAEzB;;OAEG;IAEH,IAAI,UAAS;IAGb,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAEhC;;OAEG;IAEH,QAAQ,SAAK;IAEb;;OAEG;IAEH,QAAQ,SAAK;IAEb;;;OAGG;IAEH,KAAK,UAAS;IAGd,QAAQ,UAAS;IAGjB,cAAc,EAAE,eAAe,GAAG,iBAAiB,CAAmB;IAEtE;;;OAGG;IAEH,iBAAiB,CAAC,EAAE,WAAW,CAAC;IAEhC,iBAAiB;IAQjB,SAAS,CAAC,YAAY,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAsBhE,oBAAoB;IAMpB,cAAc;IAUd,OAAO,IAID,SAAS,GACT,SAAS;IAGf,OAAO,CAAC,kBAAkB,CAWxB;IAEF,OAAO,CAAC,aAAa,CASnB;IAEF,OAAO,CAAC,qBAAqB,CA2C3B;IAEF,OAAO,CAAC,uBAAuB,CAM7B;IAEF,OAAO,CAAC,iBAAiB,CAiBvB;IAEF,kBAAkB;IAaZ,oBAAoB,CAAC,KAAK,EAAE,aAAa;IA4D/C,kBAAkB,CAAC,KAAK,EAAE,aAAa;IAOvC,uBAAuB;IAIvB;;;OAGG;IACH,UAAU;IAIV,gBAAgB;IAchB,mBAAmB;IAMnB;;OAEG;IACG,IAAI;IASV;;OAEG;IACG,IAAI;IAmBV,uBAAuB;IA0BjB,gBAAgB;IA0Cb,MAAM;CAuChB"}

package/dist/components/combobox.js

@@ -9,9 +9,6 @@ import { stopAnimations, animateTo } from "../internal/animate.js";
 import { getTabbableBoundary } from "../internal/tabbable.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--)
@@ -20,11 +17,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"), getter ? getter.call(obj) : 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 _closeWatcher;
 const styles = [
   css`
     :host {
@@ -35,7 +27,6 @@ const styles = [
 let MinidCombobox = class extends styled(LitElement, styles) {
   constructor() {
     super(...arguments);
-    __privateAdd(this, _closeWatcher);
     this.stayopenonselect = false;
     this.open = false;
     this.size = "md";
@@ -63,7 +54,7 @@ let MinidCombobox = class extends styled(LitElement, styles) {
       }
     };
     this.handleDocumentKeyDown = (event) => {
-      if (event.key === "Escape" && this.open && !__privateGet(this, _closeWatcher)) {
+      if (event.key === "Escape" && this.open && !this.closeWatcher) {
         event.stopPropagation();
         this.focusOnTrigger();
         this.hide();
@@ -215,9 +206,9 @@ let MinidCombobox = class extends styled(LitElement, styles) {
   }
   addOpenListeners() {
     if ("CloseWatcher" in window) {
-      __privateGet(this, _closeWatcher)?.destroy();
-      __privateSet(this, _closeWatcher, new CloseWatcher());
-      __privateGet(this, _closeWatcher).onclose = () => {
+      this.closeWatcher?.destroy();
+      this.closeWatcher = new CloseWatcher();
+      this.closeWatcher.onclose = () => {
         this.hide();
         this.focusOnTrigger();
       };
@@ -228,7 +219,7 @@ let MinidCombobox = class extends styled(LitElement, styles) {
   removeOpenListeners() {
     document.removeEventListener("keydown", this.handleDocumentKeyDown);
     document.removeEventListener("mousedown", this.handleDocumentMouseDown);
-    __privateGet(this, _closeWatcher)?.destroy();
+    this.closeWatcher?.destroy();
   }
   /**
    * Shows the combobox panel.
@@ -339,8 +330,7 @@ let MinidCombobox = class extends styled(LitElement, styles) {
           @keyup=${this.handleTriggerKeyUp}
           @slotchange=${this.handleTriggerSlotChange}
           @mid-country-click=${this.handleCountryClick}
-        >
-        </slot>
+        ></slot>
         <div
           aria-hidden=${this.open ? "false" : "true"}
           aria-labelledby="combobox"
@@ -356,7 +346,6 @@ let MinidCombobox = class extends styled(LitElement, styles) {
     `;
   }
 };
-_closeWatcher = /* @__PURE__ */ new WeakMap();
 __decorateClass([
   query("#combobox")
 ], MinidCombobox.prototype, "popup", 2);