@felleslosninger/minid-elements 0.0.138 → 0.1.0

package/README.md

@@ -16,15 +16,62 @@ or
 yarn add @felleslosninger/minid-elements
 ```
 
+## CSS Setup
+
+minid-elements uses Tailwind CSS v4 and CSS cascade layers internally. To prevent style conflicts, you must declare the layer order **before** importing Tailwind in your global stylesheet:
+
+```css
+/* Establish layer order before @import 'tailwindcss', so ds.* layers sit
+   between base and utilities rather than after utilities. */
+@layer theme, base, ds.theme, ds.base, ds.components, components, utilities;
+@import 'tailwindcss';
+@import '@felleslosninger/minid-elements/styles';
+@source '../../node_modules/@felleslosninger/minid-elements/dist';
+```
+
+The stylesheet link in your HTML must have the `data-mid-tailwind` attribute so the components can resolve scoped styles correctly:
+
+```html
+<link rel="stylesheet" href="./styles/tailwind.css" data-mid-tailwind />
+```
+
+### CSS entrypoints
+
+| Import path | File | Description |
+|---|---|---|
+| `@felleslosninger/minid-elements/styles` | `dist/styles.css` | Component styles |
+| `@felleslosninger/minid-elements/theme` | `dist/theme.css` | Design tokens / theme |
+| `@felleslosninger/minid-elements/globals` | `dist/index.css` | Global base styles |
+
 ## Usage
 
 Import the desired components into your project:
 
-```html
+```ts
 import '@felleslosninger/minid-elements/button';
+```
+
+```html
 <mid-button variant="primary">Click me</mid-button>
 ```
 
+### Translations
+
+Built-in UI labels (e.g. "Clear", "Show password", "Open country selector") are available in Norwegian Bokmål, Nynorsk, Northern Sami, and English. Components pick up the page language automatically via the `lang` attribute.
+
+To override or add translations for a language:
+
+```ts
+import { registerTranslations } from '@felleslosninger/minid-elements';
+
+registerTranslations('en', {
+  clear: 'Remove',
+  showPassword: 'Reveal password',
+  hidePassword: 'Conceal password',
+  openCountrySelector: 'Choose country',
+});
+```
+
 ## CDN Usage
 
 Alternatively, you can use MinId Elements directly from our CDN. Here's an example of how to include the components in your HTML file:
@@ -66,9 +113,27 @@ View the complete component documentation and examples in our Storybook:
 If you're contributing to this project, follow these steps:
 
 1. Clone the repository.
-2. Install dependencies: `npm install` or `yarn install`.
-3. Run the development server: `npm run dev` or `yarn dev`.
-4. Build the project: `npm run build` or `yarn build`.
+2. Install dependencies: `pnpm install`.
+3. Build the project: `pnpm run build`.
+4. Run the development server: `pnpm run storybook:dev`.
+
+## Publishing
+
+This project uses [changesets](https://github.com/changesets/changesets) for versioning and publishing.
+
+### Adding a changeset
+
+When you make a change that should be released, add a changeset:
+
+```bash
+pnpm changeset
+```
+
+Follow the prompts to select the bump type (patch, minor, or major) and describe the change. This creates a markdown file in the `.changeset/` directory that should be committed with your PR.
+
+### Releasing
+
+When PRs with changesets are merged to `main`, the changesets action will automatically create a "Version Packages" PR that bumps versions and updates the changelog. Merging that PR triggers the actual publish to npm and deploys the new version to the CDN.
 
 ## Contributing
 

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

@@ -51,10 +51,12 @@ export declare class MinidAlert extends MinidAlert_base {
      */
     elevated: boolean;
     /**
-     * Sets the `aria-label` on the icon
-     * Use this to inform screenreaders of severity. Defaults to Norwegian.
+     * Sets the `aria-live` attribute on the alert host element.
+     * Prefer wrapping the alert in a `role="alert"` or `aria-live` container instead.
+     * Use `"polite"` for non-urgent updates and `"assertive"` for time-sensitive ones.
+     * Defaults to `"off"`.
      */
-    iconlabel?: string;
+    arialive: 'polite' | 'assertive' | 'off';
     private remainingTime;
     private notificationContent?;
     firstUpdated(): void;
@@ -77,7 +79,7 @@ export declare class MinidAlert extends MinidAlert_base {
      * calling this method again. The returned promise will resolve after the alert is hidden.
      */
     toast(content: MinidAlert['notificationContent'], duration?: number, severity?: MinidAlert['severity'], closable?: boolean): Promise<void>;
-    render(): import('lit-html').TemplateResult<1>;
+    render(): import('lit').TemplateResult<1>;
 }
 export {};
 //# sourceMappingURL=alert.component.d.ts.map

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,EAAQ,UAAU,EAAW,MAAM,KAAK,CAAC;AAIhD,OAAO,uBAAuB,CAAC;AAW/B,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,UAAU,CAAC;KACzB;CACF;;AAMD;;;;;;;;;;;;;GAaG;AACH,qBACa,UAAW,SAAQ,eAAkB;IAChD,OAAO,CAAC,eAAe,CAAC,CAAS;IACjC,OAAO,CAAC,qBAAqB,CAAC,CAAS;IAGvC,OAAO,CAAC,IAAI,CAAe;IAE3B;;;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,OAAO,CAAC,mBAAmB,CAAC,CAI1B;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;CAyGhB"}
+{"version":3,"file":"alert.component.d.ts","sourceRoot":"","sources":["../../src/components/alert.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAW,MAAM,KAAK,CAAC;AAIhD,OAAO,uBAAuB,CAAC;AAS/B,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,UAAU,CAAC;KACzB;CACF;;AAMD;;;;;;;;;;;;;GAaG;AACH,qBACa,UAAW,SAAQ,eAAkB;IAChD,OAAO,CAAC,eAAe,CAAC,CAAS;IACjC,OAAO,CAAC,qBAAqB,CAAC,CAAS;IAGvC,OAAO,CAAC,IAAI,CAAe;IAE3B;;;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;;;;;OAKG;IAEH,QAAQ,EAAE,QAAQ,GAAG,WAAW,GAAG,KAAK,CAAS;IAGjD,OAAO,CAAC,aAAa,CAAiB;IAGtC,OAAO,CAAC,mBAAmB,CAAC,CAI1B;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;CAqEhB"}

package/dist/components/alert.js

@@ -3,7 +3,6 @@ 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 "./icon/icon.js";
-import { ifDefined } from "lit/directives/if-defined.js";
 import { watch } from "../internal/watch.js";
 import { getAnimation, setDefaultAnimation } from "../utilities/animation-registry.js";
 import { waitForEvent } from "../internal/event.js";
@@ -30,6 +29,7 @@ let MinidAlert = class extends styled(LitElement) {
     this.severity = "info";
     this.size = "md";
     this.elevated = false;
+    this.arialive = "off";
     this.remainingTime = this.duration;
   }
   firstUpdated() {
@@ -173,54 +173,24 @@ let MinidAlert = class extends styled(LitElement) {
     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({
-      "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"
+        class="ds-alert"
+        data-size="${this.size}"
+        data-color="${this.severity}"
         @mouseenter=${this.pauseAutoHide}
         @mouseleave=${this.resumeAutoHide}
       >
-        <mid-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">
-          <slot>
-            ${!this.notificationContent?.title ? nothing : html`<h2 class="text-heading-xs">
-                  ${this.notificationContent?.title}
-                </h2>`}
-            ${this.notificationContent?.message}
-            ${!this.notificationContent?.details ? nothing : html`<div
-                  class="${classMap({
+        <div style="display: grid; grid-template-columns: 1fr ${this.closable ? "auto" : ""};">
+          <div aria-live="${this.arialive}">
+            <slot>
+              ${!this.notificationContent?.title ? nothing : html`<h2 class="text-heading-xs">
+                    ${this.notificationContent?.title}
+                  </h2>`}
+              ${this.notificationContent?.message}
+              ${!this.notificationContent?.details ? nothing : html`<div
+                    class="${classMap({
       "border-danger": danger,
       "border-info": info,
       "border-success": success,
@@ -230,16 +200,16 @@ let MinidAlert = class extends styled(LitElement) {
       "bg-success-surface-hover": success,
       "bg-warning-surface-hover": warning
     })} text-body-sm mt-0.5 border-l-4 p-3"
-                >
-                  <pre class="break-all whitespace-pre-wrap">
-${this.notificationContent?.details}</pre
                   >
-                </div>`}
-          </slot>
-        </div>
-        ${this.closable ? html`
-              <button
-                class="${classMap({
+                    <pre class="break-all whitespace-pre-wrap">
+${this.notificationContent?.details}</pre
+                    >
+                  </div>`}
+            </slot>
+          </div>
+          ${this.closable ? html`
+                <button
+                  class="${classMap({
       "text-info-subtle": info,
       "text-danger-subtle": danger,
       "text-success-subtle": success,
@@ -248,13 +218,15 @@ ${this.notificationContent?.details}</pre
       "hover:bg-info-surface-hover": info,
       "hover:bg-success-surface-hover": success,
       "hover:bg-warning-surface-hover": warning
-    })} -my-4 -mr-4 flex self-center rounded p-4"
-                @click="${this.hide}"
-                aria-label="Dismiss alert"
-              >
-                <mid-icon class="size-6" name="xmark"> </mid-icon>
-              </button>
-            ` : nothing}
+    })} flex rounded p-2"
+                  style="align-self: start; justify-self: end;"
+                  @click="${this.hide}"
+                  aria-label="Dismiss alert"
+                >
+                  <mid-icon class="size-6" name="xmark"> </mid-icon>
+                </button>
+              ` : nothing}
+        </div>
       </div>
     `;
   }
@@ -281,8 +253,8 @@ __decorateClass([
   property({ type: Boolean })
 ], MinidAlert.prototype, "elevated", 2);
 __decorateClass([
-  property({ type: String })
-], MinidAlert.prototype, "iconlabel", 2);
+  property({ reflect: true })
+], MinidAlert.prototype, "arialive", 2);
 __decorateClass([
   state()
 ], MinidAlert.prototype, "remainingTime", 2);

package/dist/components/alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert.js","sources":["../../src/components/alert.component.ts"],"sourcesContent":["import { 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\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) {\n  private autoHideTimeout?: number;\n  private remainingTimeInterval?: number;\n\n  @query('[part~=\"base\"]')\n  private 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  private 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\n                  class=\"${classMap({\n                    'border-danger': danger,\n                    'border-info': info,\n                    'border-success': success,\n                    'border-warning': warning,\n                    'bg-danger-surface-hover': danger,\n                    'bg-info-surface-hover': info,\n                    'bg-success-surface-hover': success,\n                    'bg-warning-surface-hover': warning,\n                  })} text-body-sm mt-0.5 border-l-4 p-3\"\n                >\n                  <pre class=\"break-all whitespace-pre-wrap\">\n${this.notificationContent?.details}</pre\n                  >\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 -mr-4 flex self-center rounded p-4\"\n                @click=\"${this.hide}\"\n                aria-label=\"Dismiss alert\"\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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"}
+{"version":3,"file":"alert.js","sources":["../../src/components/alert.component.ts"],"sourcesContent":["import { 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 { 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';\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\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) {\n  private autoHideTimeout?: number;\n  private remainingTimeInterval?: number;\n\n  @query('[part~=\"base\"]')\n  private 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-live` attribute on the alert host element.\n   * Prefer wrapping the alert in a `role=\"alert\"` or `aria-live` container instead.\n   * Use `\"polite\"` for non-urgent updates and `\"assertive\"` for time-sensitive ones.\n   * Defaults to `\"off\"`.\n   */\n  @property({ reflect: true })\n  arialive: 'polite' | 'assertive' | 'off' = 'off';\n\n  @state()\n  private remainingTime = this.duration;\n\n  @state()\n  private 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\n    return html`\n      <div\n        part=\"base\"\n        class=\"ds-alert\"\n        data-size=\"${this.size}\"\n        data-color=\"${this.severity}\"\n        @mouseenter=${this.pauseAutoHide}\n        @mouseleave=${this.resumeAutoHide}\n      >\n        <div style=\"display: grid; grid-template-columns: 1fr ${this.closable ? 'auto' : ''};\">\n          <div aria-live=\"${this.arialive}\">\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\n                    class=\"${classMap({\n                      'border-danger': danger,\n                      'border-info': info,\n                      'border-success': success,\n                      'border-warning': warning,\n                      'bg-danger-surface-hover': danger,\n                      'bg-info-surface-hover': info,\n                      'bg-success-surface-hover': success,\n                      'bg-warning-surface-hover': warning,\n                    })} text-body-sm mt-0.5 border-l-4 p-3\"\n                  >\n                    <pre class=\"break-all whitespace-pre-wrap\">\n${this.notificationContent?.details}</pre\n                    >\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                  })} flex rounded p-2\"\n                  style=\"align-self: start; justify-self: end;\"\n                  @click=\"${this.hide}\"\n                  aria-label=\"Dismiss alert\"\n                >\n                  <mid-icon class=\"size-6\" name=\"xmark\"> </mid-icon>\n                </button>\n              `\n            : nothing}\n        </div>\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

@@ -53,7 +53,7 @@ export declare class MinidButton extends MinidButton_base {
     click(): void;
     blur(): void;
     focus(options?: FocusOptions): void;
-    render(): import('lit-html').TemplateResult;
+    render(): import('lit').TemplateResult;
 }
 export {};
 //# sourceMappingURL=button.component.d.ts.map

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

@@ -12,7 +12,6 @@ declare const MinidCheckbox_base: import('../types/mixin-constructor.ts').Constr
  * @event mid-change - Emitted when the checked state changes
  */
 export declare class MinidCheckbox extends MinidCheckbox_base {
-    private readonly hasSlotController;
     private input;
     /**
      * The name of the checkbox, submitted as a name/value pair with form data.
@@ -46,7 +45,7 @@ export declare class MinidCheckbox extends MinidCheckbox_base {
      */
     blur(): void;
     handleStateChange(): void;
-    render(): import('lit-html').TemplateResult<1>;
+    render(): import('lit').TemplateResult<1>;
 }
 export {};
 //# sourceMappingURL=checkbox.component.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"checkbox.component.d.ts","sourceRoot":"","sources":["../../src/components/checkbox.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAKvC,OAAO,0BAA0B,CAAC;AAOlC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,aAAa,CAAC;KAC/B;CACF;;AAED;;;;;GAKG;AAEH,qBACa,aAAc,SAAQ,kBAAoC;IACrE,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAGhC;IAGF,OAAO,CAAC,KAAK,CAAoB;IAEjC;;OAEG;IAEH,IAAI,SAAM;IAEV;;OAEG;IAEH,KAAK,SAAQ;IAGb,OAAO,UAAS;IAGhB,WAAW,CAAC,EAAE,MAAM,CAAC;IAGrB,QAAQ,UAAS;IAGjB,QAAQ,UAAS;IAGjB,OAAO,UAAS;IAGhB,QAAQ,UAAS;IAEjB,MAAM,KAAK,qBAAqB,qDAE/B;IAED,qBAAqB,IAAI,OAAO;IAIhC,IAAI,gBAAgB,qBAEnB;IAED,OAAO,CAAC,aAAa;IAkBrB,OAAO,CAAC,WAAW;IAMnB;;OAEG;IACH,KAAK;IAIL;;OAEG;IACH,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY;IAI5B;;OAEG;IACH,IAAI;IAKJ,iBAAiB;IAKR,MAAM;CA4DhB"}
+{"version":3,"file":"checkbox.component.d.ts","sourceRoot":"","sources":["../../src/components/checkbox.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAIvC,OAAO,0BAA0B,CAAC;AAMlC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,aAAa,CAAC;KAC/B;CACF;;AAED;;;;;GAKG;AAEH,qBACa,aAAc,SAAQ,kBAAoC;IAErE,OAAO,CAAC,KAAK,CAAoB;IAEjC;;OAEG;IAEH,IAAI,SAAM;IAEV;;OAEG;IAEH,KAAK,SAAQ;IAGb,OAAO,UAAS;IAGhB,WAAW,CAAC,EAAE,MAAM,CAAC;IAGrB,QAAQ,UAAS;IAGjB,QAAQ,UAAS;IAGjB,OAAO,UAAS;IAGhB,QAAQ,UAAS;IAEjB,MAAM,KAAK,qBAAqB,qDAE/B;IAED,qBAAqB,IAAI,OAAO;IAIhC,IAAI,gBAAgB,qBAEnB;IAED,OAAO,CAAC,aAAa;IAkBrB,OAAO,CAAC,WAAW;IAMnB;;OAEG;IACH,KAAK;IAIL;;OAEG;IACH,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY;IAI5B;;OAEG;IACH,IAAI;IAKJ,iBAAiB;IAKR,MAAM;CAiChB"}

package/dist/components/checkbox.js

@@ -1,6 +1,5 @@
 import { LitElement, html } from "lit";
 import { query, property, customElement } from "lit/decorators.js";
-import { classMap } from "lit/directives/class-map.js";
 import { live } from "lit/directives/live.js";
 import { styled } from "../mixins/tailwind.mixin.js";
 import "./icon/icon.js";
@@ -8,7 +7,6 @@ import { ifDefined } from "lit/directives/if-defined.js";
 import { FormControlMixin } from "../mixins/form-control.mixin.js";
 import { watch } from "../internal/watch.js";
 import { requiredValidator } from "../mixins/validators.js";
-import { HasSlotController } from "../internal/slot.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -22,10 +20,6 @@ var __decorateClass = (decorators, target, key, kind) => {
 let MinidCheckbox = class extends FormControlMixin(styled(LitElement)) {
   constructor() {
     super(...arguments);
-    this.hasSlotController = new HasSlotController(
-      this,
-      "description"
-    );
     this.name = "";
     this.value = "on";
     this.checked = false;
@@ -79,59 +73,35 @@ let MinidCheckbox = class extends FormControlMixin(styled(LitElement)) {
     this.setValue(this.value);
   }
   render() {
-    const hasDescriptionSlot = this.hasSlotController.test("description");
-    const hasDescription = this.description ? true : !!hasDescriptionSlot;
     return html`
-      <label
-        class="${classMap({
-      "opacity-disabled": this.disabled,
-      "cursor-not-allowed": this.disabled
-    })} grid grid-cols-[auto_1fr] gap-2"
-      >
-        <span
-          class="${classMap({
-      "bg-accent-base": !this.readonly && this.checked && !this.invalid,
-      "bg-danger-base": !this.readonly && this.checked && this.invalid,
-      "bg-neutral-surface": !this.readonly && !this.checked,
-      "border-accent-base": !this.readonly && this.checked && !this.invalid,
-      "border-neutral": !this.readonly && !this.checked && !this.invalid,
-      "border-danger-base": !this.readonly && this.invalid,
-      "border-neutral-subtle": this.readonly,
-      "bg-neutral-surface-tinted": this.readonly
-    })} focus-within:focus-ring inline-flex size-6 shrink-0 items-center justify-center rounded-sm border-2"
-        >
-          <input
-            class="pointer-events-none appearance-none"
-            type="checkbox"
-            value=${ifDefined(this.value)}
-            .checked=${live(this.checked)}
-            ?disabled=${this.disabled}
-            ?checked=${this.checked}
-            ?readonly=${this.readonly}
-            ?required=${this.required}
-            @click=${this.handleClick}
-            @keydown=${this.handleKeydown}
+      <ds-field class="ds-field">
+      <input
+      class="ds-input"
+      type="checkbox"
+      value=${ifDefined(this.value)}
+      .checked=${live(this.checked)}
+          ?disabled=${this.disabled}
+          ?checked=${this.checked}
+          ?readonly=${this.readonly}
+          ?required=${this.required}
+          @click=${this.handleClick}
+          @keydown=${this.handleKeydown}
           />
-          ${this.checked ? html`<mid-icon
-                class="${classMap({
-      "text-accent-base-contrast": this.checked && !this.readonly
-    })} size-6 shrink-0 scale-125"
-                name="checkmark"
-              ></mid-icon>` : ""}
-        </span>
-        <div part="label">
+        <label
+          class="ds-label"
+          part="label"
+        >
           <slot></slot>
+        </label>
+        <div data-field="description">
+          <slot
+            name="description"
+            part="description"
+          >
+            ${this.description}
+          </slot>
         </div>
-      </label>
-      <slot
-        name="description"
-        part="description"
-        name="description"
-        class="text-neutral-subtle mt-2 block"
-        aria-hidden=${hasDescription ? "false" : "true"}
-      >
-        ${this.description}
-      </slot>
+      </ds-field>
     `;
   }
 };

package/dist/components/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","sources":["../../src/components/checkbox.component.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { live } from 'lit/directives/live.js';\nimport { styled } from '../mixins/tailwind.mixin';\nimport './icon/icon.component.ts';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { FormControlMixin } from '../mixins/form-control.mixin.ts';\nimport { watch } from '../internal/watch.ts';\nimport { requiredValidator } from '../mixins/validators.ts';\nimport { HasSlotController } from '../internal/slot.ts';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-checkbox': MinidCheckbox;\n  }\n}\n\n/**\n * @slot -- The default slot for the label text of the checkbox\n * @slot description - The slot for the description text of the checkbox\n *\n * @event mid-change - Emitted when the checked state changes\n */\n\n@customElement('mid-checkbox')\nexport class MinidCheckbox extends FormControlMixin(styled(LitElement)) {\n  private readonly hasSlotController = new HasSlotController(\n    this,\n    'description'\n  );\n\n  @query('input[type=\"checkbox\"]')\n  private input!: HTMLInputElement;\n\n  /**\n   * The name of the checkbox, submitted as a name/value pair with form data.\n   */\n  @property()\n  name = '';\n\n  /**\n   * The current value of the checkbox, submitted as a name/value pair with form data.\n   */\n  @property()\n  value = 'on';\n\n  @property({ type: Boolean })\n  checked = false;\n\n  @property()\n  description?: string;\n\n  @property({ type: Boolean })\n  disabled = false;\n\n  @property({ type: Boolean })\n  readonly = false;\n\n  @property({ type: Boolean })\n  invalid = false;\n\n  @property({ type: Boolean, reflect: true })\n  required = false;\n\n  static get formControlValidators() {\n    return [requiredValidator];\n  }\n\n  shouldFormValueUpdate(): boolean {\n    return this.checked;\n  }\n\n  get validationTarget() {\n    return this.input;\n  }\n\n  private handleKeydown(event: KeyboardEvent) {\n    const hasModifier =\n      event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;\n\n    // Pressing enter when focused on an input should submit the form like a native input, but we wait a tick before\n    // submitting to allow users to cancel the keydown event if they need to\n    if (event.key === 'Enter' && !hasModifier) {\n      setTimeout(() => {\n        //\n        // When using an Input Method Editor (IME), pressing enter will cause the form to submit unexpectedly. One way\n        // to check for this is to look at event.isComposing, which will be true when the IME is open.\n        if (!event.defaultPrevented && !event.isComposing) {\n          this.form.requestSubmit();\n        }\n      });\n    }\n  }\n\n  private handleClick() {\n    this.checked = !this.checked;\n    // this.indeterminate = false;\n    this.dispatchEvent(new Event('mid-change'));\n  }\n\n  /**\n   * Simulates a click on the checkbox.\n   */\n  click() {\n    this.input.click();\n  }\n\n  /**\n   * Sets focus on the checkbox.\n   */\n  focus(options?: FocusOptions) {\n    this.input.focus(options);\n  }\n\n  /**\n   * Removes focus from the checkbox.\n   */\n  blur() {\n    this.input.blur();\n  }\n\n  @watch(['checked', 'value'])\n  handleStateChange() {\n    // this.input.indeterminate = this.indeterminate; // force a sync update\n    this.setValue(this.value);\n  }\n\n  override render() {\n    const hasDescriptionSlot = this.hasSlotController.test('description');\n    const hasDescription = this.description ? true : !!hasDescriptionSlot;\n\n    return html`\n      <label\n        class=\"${classMap({\n          'opacity-disabled': this.disabled,\n          'cursor-not-allowed': this.disabled,\n        })} grid grid-cols-[auto_1fr] gap-2\"\n      >\n        <span\n          class=\"${classMap({\n            'bg-accent-base': !this.readonly && this.checked && !this.invalid,\n            'bg-danger-base': !this.readonly && this.checked && this.invalid,\n            'bg-neutral-surface': !this.readonly && !this.checked,\n            'border-accent-base':\n              !this.readonly && this.checked && !this.invalid,\n            'border-neutral': !this.readonly && !this.checked && !this.invalid,\n            'border-danger-base': !this.readonly && this.invalid,\n            'border-neutral-subtle': this.readonly,\n            'bg-neutral-surface-tinted': this.readonly,\n          })} focus-within:focus-ring inline-flex size-6 shrink-0 items-center justify-center rounded-sm border-2\"\n        >\n          <input\n            class=\"pointer-events-none appearance-none\"\n            type=\"checkbox\"\n            value=${ifDefined(this.value)}\n            .checked=${live(this.checked)}\n            ?disabled=${this.disabled}\n            ?checked=${this.checked}\n            ?readonly=${this.readonly}\n            ?required=${this.required}\n            @click=${this.handleClick}\n            @keydown=${this.handleKeydown}\n          />\n          ${this.checked\n            ? html`<mid-icon\n                class=\"${classMap({\n                  'text-accent-base-contrast': this.checked && !this.readonly,\n                })} size-6 shrink-0 scale-125\"\n                name=\"checkmark\"\n              ></mid-icon>`\n            : ''}\n        </span>\n        <div part=\"label\">\n          <slot></slot>\n        </div>\n      </label>\n      <slot\n        name=\"description\"\n        part=\"description\"\n        name=\"description\"\n        class=\"text-neutral-subtle mt-2 block\"\n        aria-hidden=${hasDescription ? 'false' : 'true'}\n      >\n        ${this.description}\n      </slot>\n    `;\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"checkbox.js","sources":["../../src/components/checkbox.component.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { live } from 'lit/directives/live.js';\nimport { styled } from '../mixins/tailwind.mixin';\nimport './icon/icon.component.ts';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { FormControlMixin } from '../mixins/form-control.mixin.ts';\nimport { watch } from '../internal/watch.ts';\nimport { requiredValidator } from '../mixins/validators.ts';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-checkbox': MinidCheckbox;\n  }\n}\n\n/**\n * @slot -- The default slot for the label text of the checkbox\n * @slot description - The slot for the description text of the checkbox\n *\n * @event mid-change - Emitted when the checked state changes\n */\n\n@customElement('mid-checkbox')\nexport class MinidCheckbox extends FormControlMixin(styled(LitElement)) {\n  @query('input[type=\"checkbox\"]')\n  private input!: HTMLInputElement;\n\n  /**\n   * The name of the checkbox, submitted as a name/value pair with form data.\n   */\n  @property()\n  name = '';\n\n  /**\n   * The current value of the checkbox, submitted as a name/value pair with form data.\n   */\n  @property()\n  value = 'on';\n\n  @property({ type: Boolean })\n  checked = false;\n\n  @property()\n  description?: string;\n\n  @property({ type: Boolean })\n  disabled = false;\n\n  @property({ type: Boolean })\n  readonly = false;\n\n  @property({ type: Boolean })\n  invalid = false;\n\n  @property({ type: Boolean, reflect: true })\n  required = false;\n\n  static get formControlValidators() {\n    return [requiredValidator];\n  }\n\n  shouldFormValueUpdate(): boolean {\n    return this.checked;\n  }\n\n  get validationTarget() {\n    return this.input;\n  }\n\n  private handleKeydown(event: KeyboardEvent) {\n    const hasModifier =\n      event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;\n\n    // Pressing enter when focused on an input should submit the form like a native input, but we wait a tick before\n    // submitting to allow users to cancel the keydown event if they need to\n    if (event.key === 'Enter' && !hasModifier) {\n      setTimeout(() => {\n        //\n        // When using an Input Method Editor (IME), pressing enter will cause the form to submit unexpectedly. One way\n        // to check for this is to look at event.isComposing, which will be true when the IME is open.\n        if (!event.defaultPrevented && !event.isComposing) {\n          this.form.requestSubmit();\n        }\n      });\n    }\n  }\n\n  private handleClick() {\n    this.checked = !this.checked;\n    // this.indeterminate = false;\n    this.dispatchEvent(new Event('mid-change'));\n  }\n\n  /**\n   * Simulates a click on the checkbox.\n   */\n  click() {\n    this.input.click();\n  }\n\n  /**\n   * Sets focus on the checkbox.\n   */\n  focus(options?: FocusOptions) {\n    this.input.focus(options);\n  }\n\n  /**\n   * Removes focus from the checkbox.\n   */\n  blur() {\n    this.input.blur();\n  }\n\n  @watch(['checked', 'value'])\n  handleStateChange() {\n    // this.input.indeterminate = this.indeterminate; // force a sync update\n    this.setValue(this.value);\n  }\n\n  override render() {\n\n    return html`\n      <ds-field class=\"ds-field\">\n      <input\n      class=\"ds-input\"\n      type=\"checkbox\"\n      value=${ifDefined(this.value)}\n      .checked=${live(this.checked)}\n          ?disabled=${this.disabled}\n          ?checked=${this.checked}\n          ?readonly=${this.readonly}\n          ?required=${this.required}\n          @click=${this.handleClick}\n          @keydown=${this.handleKeydown}\n          />\n        <label\n          class=\"ds-label\"\n          part=\"label\"\n        >\n          <slot></slot>\n        </label>\n        <div data-field=\"description\">\n          <slot\n            name=\"description\"\n            part=\"description\"\n          >\n            ${this.description}\n          </slot>\n        </div>\n      </ds-field>\n    `;\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/components/code-input-old.component.d.ts

@@ -49,7 +49,7 @@ export declare class MinidCodeInputOld extends MinidCodeInputOld_base {
     updated(_changedProperties: PropertyValues): void;
     focus(options?: FocusOptions): void;
     setCustomValidity(error: string): void;
-    render(): import('lit-html').TemplateResult<1>;
+    render(): import('lit').TemplateResult<1>;
 }
 export {};
 //# sourceMappingURL=code-input-old.component.d.ts.map

package/dist/components/code-input-old.js

@@ -3,7 +3,7 @@ import { property, state, customElement } from "lit/decorators.js";
 import { createRef, ref } from "lit/directives/ref.js";
 import { classMap } from "lit/directives/class-map.js";
 import { live } from "lit/directives/live.js";
-import { webOtpApiInit, webOtpApiClose } from "../utilities/web-otp-api.js";
+import { webOtpApiClose, webOtpApiInit } from "../utilities/web-otp-api.js";
 import { styled } from "../mixins/tailwind.mixin.js";
 import { ConstraintsValidationMixin } from "../mixins/form-controller.mixin.js";
 import "./icon/icon.js";

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

@@ -25,6 +25,7 @@ declare const MinidCodeInput_base: import('../types/mixin-constructor.ts').Const
 export declare class MinidCodeInput extends MinidCodeInput_base {
     private readonly hasSlotControler;
     private readonly labelId;
+    private readonly validationId;
     private inputElement;
     value: string;
     label: string;
@@ -81,7 +82,7 @@ export declare class MinidCodeInput extends MinidCodeInput_base {
     resetFormControl(): void;
     focus(options?: FocusOptions): void;
     handleLengthChange(): void;
-    render(): import('lit-html').TemplateResult<1>;
+    render(): import('lit').TemplateResult<1>;
 }
 export {};
 //# sourceMappingURL=code-input.component.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"code-input.component.d.ts","sourceRoot":"","sources":["../../src/components/code-input.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAQ5D,OAAO,0BAA0B,CAAC;AASlC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,cAAc,CAAC;KAClC;CACF;;AAyFD;;;;;;;;;;;;;;;;GAgBG;AACH,qBACa,cAAe,SAAQ,mBAEnC;IACC,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAAwC;IACzE,OAAO,CAAC,QAAQ,CAAC,OAAO,CAA4C;IAGpE,OAAO,CAAC,YAAY,CAAoB;IAGxC,KAAK,SAAM;IAGX,KAAK,SAAM;IAGX,IAAI,EAAE,QAAQ,GAAG,MAAM,CAAY;IAEnC;;OAEG;IAEH,SAAS,EAAE,SAAS,GAAG,MAAM,CAAa;IAE1C;;OAEG;IAEH,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAEhC;;OAEG;IAEH,MAAM,SAAK;IAGX,QAAQ,UAAS;IAEjB;;OAEG;IAEH,SAAS,UAAS;IAElB;;OAEG;IAEH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IAEH,cAAc,SAAM;IAEpB;;OAEG;IAEH,SAAS,UAAS;IAElB;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,OAAO,CAAC,EAAE,MAAM,CAAC;IAGjB,OAAO,CAAC,SAAS,CAAS;IAE1B,MAAM,KAAK,qBAAqB,qDAO/B;IAED,IAAI,gBAAgB,qBAEnB;IAED,SAAS,CAAC,YAAY,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAIhE,OAAO,CAAC,cAAc;IAYtB,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,UAAU;IAIlB,OAAO,CAAC,iBAAiB;IAQzB,OAAO,CAAC,WAAW;IA4BnB,OAAO,CAAC,YAAY;IASpB,OAAO,CAAC,aAAa;IAiBrB,KAAK;IAML,gBAAgB;IAKhB,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI;IAKnC,kBAAkB;IAOT,MAAM;CA+FhB"}
+{"version":3,"file":"code-input.component.d.ts","sourceRoot":"","sources":["../../src/components/code-input.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAS5D,OAAO,0BAA0B,CAAC;AASlC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,cAAc,CAAC;KAClC;CACF;;AAmOD;;;;;;;;;;;;;;;;GAgBG;AACH,qBACa,cAAe,SAAQ,mBAEnC;IACC,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAAwC;IACzE,OAAO,CAAC,QAAQ,CAAC,OAAO,CAA4C;IACpE,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAiD;IAG9E,OAAO,CAAC,YAAY,CAAoB;IAGxC,KAAK,SAAM;IAGX,KAAK,SAAM;IAGX,IAAI,EAAE,QAAQ,GAAG,MAAM,CAAU;IAEjC;;OAEG;IAEH,SAAS,EAAE,SAAS,GAAG,MAAM,CAAa;IAE1C;;OAEG;IAEH,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAEhC;;OAEG;IAEH,MAAM,SAAK;IAGX,QAAQ,UAAS;IAEjB;;OAEG;IAEH,SAAS,UAAS;IAElB;;OAEG;IAEH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IAEH,cAAc,SAAM;IAEpB;;OAEG;IAEH,SAAS,UAAS;IAElB;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,OAAO,CAAC,EAAE,MAAM,CAAC;IAGjB,OAAO,CAAC,SAAS,CAAS;IAE1B,MAAM,KAAK,qBAAqB,qDAO/B;IAED,IAAI,gBAAgB,qBAEnB;IAED,SAAS,CAAC,YAAY,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAIhE,OAAO,CAAC,cAAc;IAYtB,OAAO,CAAC,WAAW;IASnB,OAAO,CAAC,UAAU;IAIlB,OAAO,CAAC,iBAAiB;IAQzB,OAAO,CAAC,WAAW;IA2BnB,OAAO,CAAC,YAAY;IASpB,OAAO,CAAC,aAAa;IAiBrB,KAAK;IAML,gBAAgB;IAIhB,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI;IAUnC,kBAAkB;IAMT,MAAM;CAkGhB"}