@felleslosninger/minid-elements 0.0.126 → 0.0.127

package/dist/components/radio-group.js

@@ -2,9 +2,11 @@ import { css, LitElement, html } from "lit";
 import { property, state, customElement } from "lit/decorators.js";
 import { styled } from "../mixins/tailwind.mixin.js";
 import "./label.js";
-import { ConstraintsValidationMixin } from "../mixins/form-controller.mixin.js";
 import { classMap } from "lit/directives/class-map.js";
 import { watch } from "../internal/watch.js";
+import { FormControlMixin } from "../mixins/form-control.mixin.js";
+import { HasSlotController } from "../internal/slot.js";
+import { requiredValidator } from "../mixins/validators.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -20,34 +22,42 @@ const styles = [
     :host {
       display: block;
     }
-
-    .fds-label {
-      margin-bottom: 1rem;
-    }
   `
 ];
-let MinidRadioGroup = class extends ConstraintsValidationMixin(
+let MinidRadioGroup = class extends FormControlMixin(
   styled(LitElement, styles)
 ) {
   constructor() {
     super(...arguments);
-    this.name = "option";
+    this.hasSlotController = new HasSlotController(this, "label");
+    this.validationId = `radio-group-${MinidRadioGroup._uniqueId++}`;
+    this.name = null;
     this.value = null;
     this.label = "";
-    this.size = "md";
     this.labelhidden = false;
     this.disabled = false;
+    this.required = false;
+    this.invalidmessage = "";
     this.hasButtonRadios = false;
     this.defaultValue = null;
   }
+  get validationTarget() {
+    const radio = this.querySelector(
+      ":is(mid-radio):not([disabled])"
+    );
+    return radio ?? void 0;
+  }
+  static get formcontrolValidators() {
+    return [requiredValidator];
+  }
   firstUpdated(_changedProperties) {
     super.firstUpdated(_changedProperties);
     this.defaultValue = this.value;
-    this.setFormValue(this.value);
+    this.setValue(this.value);
   }
-  formResetCallback() {
+  resetFormControl() {
     this.value = this.defaultValue;
-    this.setFormValue(this.value);
+    this.setValue(this.value);
     this.updateCheckedRadio();
   }
   async syncRadioElements() {
@@ -60,7 +70,6 @@ let MinidRadioGroup = class extends ConstraintsValidationMixin(
       radios.map(async (radio) => {
         await radio.updateComplete;
         radio.checked = radio.value === this.value;
-        radio.size = this.size;
       })
     );
     if (radios.length > 0 && !radios.some((radio) => radio.checked)) {
@@ -70,7 +79,7 @@ let MinidRadioGroup = class extends ConstraintsValidationMixin(
           buttonRadio.setAttribute("tabindex", "0");
         }
       } else {
-        radios[0].element.setAttribute("tabindex", "0");
+        radios[0].input.setAttribute("tabindex", "0");
       }
     }
   }
@@ -110,14 +119,14 @@ let MinidRadioGroup = class extends ConstraintsValidationMixin(
     this.getAllRadios().forEach((radio) => {
       radio.checked = false;
       if (!this.hasButtonRadios) {
-        radio.element.setAttribute("tabindex", "-1");
+        radio.input.setAttribute("tabindex", "-1");
       }
     });
     this.value = radios[index].value;
     radios[index].checked = true;
-    this.setFormValue(this.value);
+    this.setValue(this.value);
     if (!this.hasButtonRadios) {
-      radios[index].element.setAttribute("tabindex", "0");
+      radios[index].input.setAttribute("tabindex", "0");
       radios[index].focus();
     } else {
       radios[index].shadowRoot.querySelector("button").focus();
@@ -133,11 +142,7 @@ let MinidRadioGroup = class extends ConstraintsValidationMixin(
     event.preventDefault();
   }
   getAllRadios() {
-    return Array.from(
-      this.querySelectorAll(
-        "mid-radio, mid-radio-button"
-      )
-    );
+    return Array.from(this.querySelectorAll("mid-radio"));
   }
   updateCheckedRadio() {
     const radios = this.getAllRadios();
@@ -155,7 +160,7 @@ let MinidRadioGroup = class extends ConstraintsValidationMixin(
       return;
     }
     this.value = target.value;
-    this.setFormValue(this.value);
+    this.setValue(this.value);
     this.updateCheckedRadio();
     if (this.value !== oldValue) {
       this.dispatchEvent(
@@ -186,6 +191,11 @@ let MinidRadioGroup = class extends ConstraintsValidationMixin(
       }
     });
   }
+  handleInvalidChange() {
+    this.getAllRadios().forEach((radio) => {
+      radio.invalid = !!this.invalidmessage;
+    });
+  }
   /**
    *  Sets focus on the radio-group.
    */
@@ -199,52 +209,52 @@ let MinidRadioGroup = class extends ConstraintsValidationMixin(
     }
   }
   render() {
+    const hasLabelSlot = this.hasSlotController.test("label");
+    const hasLabel = this.label ? true : !!hasLabelSlot;
     return html`
-      <label
-        part="form-control-label"
-        id="label"
-        class="class=${classMap({
-      "fds-label": true,
-      "fds-label--spacing": true,
-      "fds-label--sm": this.size === "sm",
-      "fds-label--md": this.size === "md",
-      "fds-label--lg": this.size === "lg",
-      "sr-only": this.labelhidden
-    })}"
-        @click=${this.handleLabelClick}
-      >
-        ${this.label}
-      </label>
       <fieldset
-        class="${classMap({
-      "fds-togglegroup": this.hasButtonRadios
-    })} flex"
+        class="flex flex-col gap-2"
         part="form-control"
         role="radiogroup"
         aria-labelledby="label"
+        aria-errormessage="${this.validationId}"
       >
-        <div
-          class="${classMap({
-      grid: true,
-      "gap-3": true,
-      "fds-togglegroup__content": this.hasButtonRadios
-    })}"
-          part="base"
-          role="presentation"
-          aria-label=${this.label}
+        <label
+          part="form-control-label"
+          id="label"
+          class="class=${classMap({
+      "sr-only": this.labelhidden,
+      "mb-2": hasLabel
+    })} mid-label"
+          @click=${this.handleLabelClick}
         >
-          <slot
-            @slotchange=${this.syncRadios}
-            @click=${this.handleRadioClick}
-            @keydown=${this.handleKeyDown}
-          ></slot>
-        </div>
+          <slot name="label">${this.label}</slot>
+        </label>
+        <slot
+          class="flex flex-col flex-wrap gap-3.5"
+          @slotchange=${this.syncRadios}
+          @click=${this.handleRadioClick}
+          @keydown=${this.handleKeyDown}
+        ></slot>
       </fieldset>
+      <div
+        class="text-danger-subtle mt-2 flex gap-1"
+        id="${this.validationId}"
+        aria-live="polite"
+        ?hidden=${!this.invalidmessage}
+      >
+        <mid-icon
+          name="xmark-octagon-fill"
+          class="mt-1 min-h-6 min-w-6"
+        ></mid-icon>
+        ${this.invalidmessage}
+      </div>
     `;
   }
 };
+MinidRadioGroup._uniqueId = 0;
 __decorateClass([
-  property()
+  property({ reflect: true })
 ], MinidRadioGroup.prototype, "name", 2);
 __decorateClass([
   property({ reflect: true })
@@ -252,15 +262,18 @@ __decorateClass([
 __decorateClass([
   property()
 ], MinidRadioGroup.prototype, "label", 2);
-__decorateClass([
-  property()
-], MinidRadioGroup.prototype, "size", 2);
 __decorateClass([
   property({ type: Boolean })
 ], MinidRadioGroup.prototype, "labelhidden", 2);
 __decorateClass([
   property({ type: Boolean })
 ], MinidRadioGroup.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], MinidRadioGroup.prototype, "required", 2);
+__decorateClass([
+  property()
+], MinidRadioGroup.prototype, "invalidmessage", 2);
 __decorateClass([
   state()
 ], MinidRadioGroup.prototype, "hasButtonRadios", 2);
@@ -276,6 +289,9 @@ __decorateClass([
 __decorateClass([
   watch("disabled")
 ], MinidRadioGroup.prototype, "handleDisabledChange", 1);
+__decorateClass([
+  watch("invalidmessage")
+], MinidRadioGroup.prototype, "handleInvalidChange", 1);
 MinidRadioGroup = __decorateClass([
   customElement("mid-radio-group")
 ], MinidRadioGroup);

package/dist/components/radio-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio-group.js","sources":["../../src/components/radio-group.component.ts"],"sourcesContent":["import { css, html, LitElement, type PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { styled } from '../mixins/tailwind.mixin';\nimport './label.component';\nimport { ConstraintsValidationMixin } from '../mixins/form-controller.mixin';\nimport { MinidRadioButton } from '../components/radio-button.component';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { watch } from '../internal/watch';\nimport { MinidRadio } from '../components/radio.component';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-radio-group': MinidRadioGroup;\n  }\n}\n\nconst styles = [\n  css`\n    :host {\n      display: block;\n    }\n\n    .fds-label {\n      margin-bottom: 1rem;\n    }\n  `,\n];\n\n/**\n *\n * @slot -- The default slot where `<mid-radio>` or `<mid-radio-button>` elements are placed.\n *\n * @event mid-change - Emitted when the selected value changes\n * @event mid-input - Emitted when radio group recieves input\n *\n * @csspart form-control-label - Select the label element\n * @csspart form-control - Select the fieldset containing the radios\n * @csspart base - Select the container around the radios\n */\n@customElement('mid-radio-group')\nexport class MinidRadioGroup extends ConstraintsValidationMixin(\n  styled(LitElement, styles)\n) {\n  /**\n   * The name of the radio group.\n   */\n  @property()\n  name = 'option';\n\n  /**\n   * The current value of the radio group.\n   */\n  @property({ reflect: true })\n  value: string | null = null;\n\n  @property()\n  label = '';\n\n  @property()\n  size: 'sm' | 'md' | 'lg' = 'md';\n\n  @property({ type: Boolean })\n  labelhidden = false;\n\n  @property({ type: Boolean })\n  disabled = false;\n\n  @state()\n  private hasButtonRadios = false;\n\n  @state()\n  defaultValue: string | null = null;\n\n  protected firstUpdated(_changedProperties: PropertyValues): void {\n    super.firstUpdated(_changedProperties);\n    this.defaultValue = this.value;\n    this.setFormValue(this.value);\n  }\n\n  protected formResetCallback() {\n    this.value = this.defaultValue;\n    this.setFormValue(this.value);\n    this.updateCheckedRadio();\n  }\n\n  private async syncRadioElements() {\n    const radios = this.getAllRadios();\n    this.hasButtonRadios = radios.some(\n      (radio) => radio.tagName.toLowerCase() === 'mid-radio-button'\n    );\n\n    await Promise.all(\n      // Sync the checked state and size\n      radios.map(async (radio) => {\n        await radio.updateComplete;\n        radio.checked = radio.value === this.value;\n        radio.size = this.size;\n      })\n    );\n\n    if (radios.length > 0 && !radios.some((radio) => radio.checked)) {\n      if (this.hasButtonRadios) {\n        const buttonRadio = radios[0].shadowRoot?.querySelector('button');\n        if (buttonRadio) {\n          buttonRadio.setAttribute('tabindex', '0');\n        }\n      } else {\n        radios[0].element.setAttribute('tabindex', '0');\n      }\n    }\n  }\n\n  private syncRadios() {\n    if (\n      customElements.get('mid-radio') &&\n      customElements.get('mid-radio-button')\n    ) {\n      this.syncRadioElements();\n      return;\n    }\n\n    if (customElements.get('mid-radio')) {\n      this.syncRadioElements();\n    } else {\n      customElements.whenDefined('mid-radio').then(() => this.syncRadios());\n    }\n\n    if (customElements.get('mid-radio-button')) {\n      this.syncRadioElements();\n    } else {\n      // Rerun this handler when <mid-radio> or <mid-radio-button> is registered\n      customElements\n        .whenDefined('mid-radio-button')\n        .then(() => this.syncRadios());\n    }\n  }\n\n  private handleKeyDown(event: KeyboardEvent) {\n    if (\n      !['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', ' '].includes(\n        event.key\n      )\n    ) {\n      return;\n    }\n\n    const radios = this.getAllRadios().filter((radio) => !radio.disabled);\n    const checkedRadio = radios.find((radio) => radio.checked) ?? radios[0];\n    const incr =\n      event.key === ' '\n        ? 0\n        : ['ArrowUp', 'ArrowLeft'].includes(event.key)\n          ? -1\n          : 1;\n    const oldValue = this.value;\n    let index = radios.indexOf(checkedRadio) + incr;\n\n    if (index < 0) {\n      index = radios.length - 1;\n    }\n\n    if (index > radios.length - 1) {\n      index = 0;\n    }\n\n    this.getAllRadios().forEach((radio) => {\n      radio.checked = false;\n\n      if (!this.hasButtonRadios) {\n        radio.element.setAttribute('tabindex', '-1');\n      }\n    });\n\n    this.value = radios[index].value;\n    radios[index].checked = true;\n    this.setFormValue(this.value);\n\n    if (!this.hasButtonRadios) {\n      radios[index].element.setAttribute('tabindex', '0');\n      radios[index].focus();\n    } else {\n      radios[index].shadowRoot!.querySelector('button')!.focus();\n    }\n\n    if (this.value !== oldValue) {\n      this.dispatchEvent(\n        new Event('mid-change', { bubbles: true, composed: true })\n      );\n      this.dispatchEvent(\n        new Event('mid-input', { bubbles: true, composed: true })\n      );\n    }\n\n    event.preventDefault();\n  }\n\n  private getAllRadios() {\n    return Array.from(\n      this.querySelectorAll<MinidRadioButton | MinidRadio>(\n        'mid-radio, mid-radio-button'\n      )\n    );\n  }\n\n  private updateCheckedRadio() {\n    const radios = this.getAllRadios();\n    radios.forEach((radio) => {\n      radio.checked = radio.value === this.value;\n    });\n  }\n\n  private handleLabelClick() {\n    this.focus();\n  }\n\n  private handleRadioClick(event: MouseEvent) {\n    const target = (event.target as HTMLElement).closest<\n      MinidRadioButton | MinidRadio\n    >('mid-radio, mid-radio-button')!;\n    // const radios = this.getAllRadios();\n\n    const oldValue = this.value;\n\n    if (!target || target.disabled) {\n      return;\n    }\n\n    this.value = target.value;\n    this.setFormValue(this.value);\n\n    this.updateCheckedRadio();\n\n    if (this.value !== oldValue) {\n      this.dispatchEvent(\n        new Event('mid-change', { bubbles: true, composed: true })\n      );\n      this.dispatchEvent(\n        new Event('mid-input', { bubbles: true, composed: true })\n      );\n    }\n  }\n\n  @watch('size', { waitUntilFirstUpdate: true })\n  handleSizeChange() {\n    this.syncRadios();\n  }\n\n  @watch('value')\n  handleValueChange() {\n    if (this.hasUpdated) {\n      this.updateCheckedRadio();\n    }\n  }\n\n  @watch('disabled')\n  handleDisabledChange() {\n    const radios = this.getAllRadios();\n    const every = radios.every((radio) => radio.disabled);\n    const some = radios.some((radio) => radio.disabled);\n    radios.forEach((radio) => {\n      if (every === some) {\n        radio.disabled = this.disabled;\n      } else if (this.disabled) {\n        radio.disabled = true;\n      }\n    });\n  }\n\n  /**\n   *  Sets focus on the radio-group.\n   */\n  public focus(options?: FocusOptions) {\n    const radios = this.getAllRadios();\n    const checked = radios.find((radio) => radio.checked);\n    const firstEnabledRadio = radios.find((radio) => !radio.disabled);\n\n    const radioToFocus = checked || firstEnabledRadio;\n\n    // Call focus for the checked radio\n    // If no radio is checked, focus the first one that is not disabled\n    if (radioToFocus) {\n      radioToFocus.focus(options);\n    }\n  }\n\n  override render() {\n    return html`\n      <label\n        part=\"form-control-label\"\n        id=\"label\"\n        class=\"class=${classMap({\n          'fds-label': true,\n          'fds-label--spacing': true,\n          'fds-label--sm': this.size === 'sm',\n          'fds-label--md': this.size === 'md',\n          'fds-label--lg': this.size === 'lg',\n          'sr-only': this.labelhidden,\n        })}\"\n        @click=${this.handleLabelClick}\n      >\n        ${this.label}\n      </label>\n      <fieldset\n        class=\"${classMap({\n          'fds-togglegroup': this.hasButtonRadios,\n        })} flex\"\n        part=\"form-control\"\n        role=\"radiogroup\"\n        aria-labelledby=\"label\"\n      >\n        <div\n          class=\"${classMap({\n            grid: true,\n            'gap-3': true,\n            'fds-togglegroup__content': this.hasButtonRadios,\n          })}\"\n          part=\"base\"\n          role=\"presentation\"\n          aria-label=${this.label}\n        >\n          <slot\n            @slotchange=${this.syncRadios}\n            @click=${this.handleRadioClick}\n            @keydown=${this.handleKeyDown}\n          ></slot>\n        </div>\n      </fieldset>\n    `;\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"radio-group.js","sources":["../../src/components/radio-group.component.ts"],"sourcesContent":["import { css, html, LitElement, type PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { styled } from '../mixins/tailwind.mixin';\nimport './label.component';\nimport { MinidRadioButton } from '../components/radio-button.component';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { watch } from '../internal/watch';\nimport { MinidRadio } from '../components/radio.component';\nimport { FormControlMixin } from '../mixins/form-control.mixin';\nimport { HasSlotController } from '../internal/slot';\nimport { requiredValidator } from 'src/mixins/validators';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-radio-group': MinidRadioGroup;\n  }\n}\n\nconst styles = [\n  css`\n    :host {\n      display: block;\n    }\n  `,\n];\n\n/**\n *\n * @slot -- The default slot where `<mid-radio>` or `<mid-radio-button>` elements are placed.\n *\n * @event mid-change - Emitted when the selected value changes\n * @event mid-input - Emitted when radio group recieves input\n *\n * @csspart form-control-label - Select the label element\n * @csspart form-control - Select the fieldset containing the radios\n * @csspart base - Select the container around the radios\n */\n@customElement('mid-radio-group')\nexport class MinidRadioGroup extends FormControlMixin(\n  styled(LitElement, styles)\n) {\n  private readonly hasSlotController = new HasSlotController(this, 'label');\n  private readonly validationId = `radio-group-${MinidRadioGroup._uniqueId++}`;\n  private static _uniqueId = 0;\n  /**\n   * The name of the radio group, submitted as a name/value pair with form data.\n   */\n  @property({ reflect: true })\n  name: string | null = null;\n\n  /**\n   * The current value of the radio group.\n   */\n  @property({ reflect: true })\n  value: string | null = null;\n\n  @property()\n  label = '';\n\n  @property({ type: Boolean })\n  labelhidden = false;\n\n  @property({ type: Boolean })\n  disabled = false;\n\n  @property({ type: Boolean, reflect: true })\n  required = false;\n\n  @property()\n  invalidmessage = '';\n\n  @state()\n  private hasButtonRadios = false;\n\n  @state()\n  defaultValue: string | null = null;\n\n  get validationTarget() {\n    const radio = this.querySelector<MinidRadio>(\n      ':is(mid-radio):not([disabled])'\n    );\n    return radio ?? undefined;\n  }\n\n  static get formcontrolValidators() {\n    return [requiredValidator];\n  }\n\n  protected firstUpdated(_changedProperties: PropertyValues): void {\n    super.firstUpdated(_changedProperties);\n    this.defaultValue = this.value;\n    this.setValue(this.value);\n  }\n\n  resetFormControl() {\n    this.value = this.defaultValue;\n    this.setValue(this.value);\n    this.updateCheckedRadio();\n  }\n\n  private async syncRadioElements() {\n    const radios = this.getAllRadios();\n    this.hasButtonRadios = radios.some(\n      (radio) => radio.tagName.toLowerCase() === 'mid-radio-button'\n    );\n\n    await Promise.all(\n      // Sync the checked state and size\n      radios.map(async (radio) => {\n        await radio.updateComplete;\n        radio.checked = radio.value === this.value;\n      })\n    );\n\n    if (radios.length > 0 && !radios.some((radio) => radio.checked)) {\n      if (this.hasButtonRadios) {\n        const buttonRadio = radios[0].shadowRoot?.querySelector('button');\n        if (buttonRadio) {\n          buttonRadio.setAttribute('tabindex', '0');\n        }\n      } else {\n        radios[0].input.setAttribute('tabindex', '0');\n      }\n    }\n  }\n\n  private syncRadios() {\n    if (\n      customElements.get('mid-radio') &&\n      customElements.get('mid-radio-button')\n    ) {\n      this.syncRadioElements();\n      return;\n    }\n\n    if (customElements.get('mid-radio')) {\n      this.syncRadioElements();\n    } else {\n      customElements.whenDefined('mid-radio').then(() => this.syncRadios());\n    }\n\n    if (customElements.get('mid-radio-button')) {\n      this.syncRadioElements();\n    } else {\n      // Rerun this handler when <mid-radio> or <mid-radio-button> is registered\n      customElements\n        .whenDefined('mid-radio-button')\n        .then(() => this.syncRadios());\n    }\n  }\n\n  private handleKeyDown(event: KeyboardEvent) {\n    if (\n      !['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', ' '].includes(\n        event.key\n      )\n    ) {\n      return;\n    }\n\n    const radios = this.getAllRadios().filter((radio) => !radio.disabled);\n    const checkedRadio = radios.find((radio) => radio.checked) ?? radios[0];\n    const incr =\n      event.key === ' '\n        ? 0\n        : ['ArrowUp', 'ArrowLeft'].includes(event.key)\n          ? -1\n          : 1;\n    const oldValue = this.value;\n    let index = radios.indexOf(checkedRadio) + incr;\n\n    if (index < 0) {\n      index = radios.length - 1;\n    }\n\n    if (index > radios.length - 1) {\n      index = 0;\n    }\n\n    this.getAllRadios().forEach((radio) => {\n      radio.checked = false;\n\n      if (!this.hasButtonRadios) {\n        radio.input.setAttribute('tabindex', '-1');\n      }\n    });\n\n    this.value = radios[index].value;\n    radios[index].checked = true;\n    this.setValue(this.value);\n\n    if (!this.hasButtonRadios) {\n      radios[index].input.setAttribute('tabindex', '0');\n      radios[index].focus();\n    } else {\n      radios[index].shadowRoot!.querySelector('button')!.focus();\n    }\n\n    if (this.value !== oldValue) {\n      this.dispatchEvent(\n        new Event('mid-change', { bubbles: true, composed: true })\n      );\n      this.dispatchEvent(\n        new Event('mid-input', { bubbles: true, composed: true })\n      );\n    }\n\n    event.preventDefault();\n  }\n\n  private getAllRadios() {\n    return Array.from(this.querySelectorAll<MinidRadio>('mid-radio'));\n  }\n\n  private updateCheckedRadio() {\n    const radios = this.getAllRadios();\n    radios.forEach((radio) => {\n      radio.checked = radio.value === this.value;\n    });\n  }\n\n  private handleLabelClick() {\n    this.focus();\n  }\n\n  private handleRadioClick(event: MouseEvent) {\n    const target = (event.target as HTMLElement).closest<\n      MinidRadioButton | MinidRadio\n    >('mid-radio, mid-radio-button')!;\n    // const radios = this.getAllRadios();\n\n    const oldValue = this.value;\n\n    if (!target || target.disabled) {\n      return;\n    }\n\n    this.value = target.value;\n    this.setValue(this.value);\n\n    this.updateCheckedRadio();\n\n    if (this.value !== oldValue) {\n      this.dispatchEvent(\n        new Event('mid-change', { bubbles: true, composed: true })\n      );\n      this.dispatchEvent(\n        new Event('mid-input', { bubbles: true, composed: true })\n      );\n    }\n  }\n\n  @watch('size', { waitUntilFirstUpdate: true })\n  handleSizeChange() {\n    this.syncRadios();\n  }\n\n  @watch('value')\n  handleValueChange() {\n    if (this.hasUpdated) {\n      this.updateCheckedRadio();\n    }\n  }\n\n  @watch('disabled')\n  handleDisabledChange() {\n    const radios = this.getAllRadios();\n    const every = radios.every((radio) => radio.disabled);\n    const some = radios.some((radio) => radio.disabled);\n    radios.forEach((radio) => {\n      if (every === some) {\n        radio.disabled = this.disabled;\n      } else if (this.disabled) {\n        radio.disabled = true;\n      }\n    });\n  }\n\n  @watch('invalidmessage')\n  handleInvalidChange() {\n    this.getAllRadios().forEach((radio) => {\n      radio.invalid = !!this.invalidmessage;\n    });\n  }\n\n  /**\n   *  Sets focus on the radio-group.\n   */\n  public focus(options?: FocusOptions) {\n    const radios = this.getAllRadios();\n    const checked = radios.find((radio) => radio.checked);\n    const firstEnabledRadio = radios.find((radio) => !radio.disabled);\n\n    const radioToFocus = checked || firstEnabledRadio;\n\n    // Call focus for the checked radio\n    // If no radio is checked, focus the first one that is not disabled\n    if (radioToFocus) {\n      radioToFocus.focus(options);\n    }\n  }\n\n  override render() {\n    const hasLabelSlot = this.hasSlotController.test('label');\n    const hasLabel = this.label ? true : !!hasLabelSlot;\n\n    return html`\n      <fieldset\n        class=\"flex flex-col gap-2\"\n        part=\"form-control\"\n        role=\"radiogroup\"\n        aria-labelledby=\"label\"\n        aria-errormessage=\"${this.validationId}\"\n      >\n        <label\n          part=\"form-control-label\"\n          id=\"label\"\n          class=\"class=${classMap({\n            'sr-only': this.labelhidden,\n            'mb-2': hasLabel,\n          })} mid-label\"\n          @click=${this.handleLabelClick}\n        >\n          <slot name=\"label\">${this.label}</slot>\n        </label>\n        <slot\n          class=\"flex flex-col flex-wrap gap-3.5\"\n          @slotchange=${this.syncRadios}\n          @click=${this.handleRadioClick}\n          @keydown=${this.handleKeyDown}\n        ></slot>\n      </fieldset>\n      <div\n        class=\"text-danger-subtle mt-2 flex gap-1\"\n        id=\"${this.validationId}\"\n        aria-live=\"polite\"\n        ?hidden=${!this.invalidmessage}\n      >\n        <mid-icon\n          name=\"xmark-octagon-fill\"\n          class=\"mt-1 min-h-6 min-w-6\"\n        ></mid-icon>\n        ${this.invalidmessage}\n      </div>\n    `;\n  }\n}\n"],"names":[],"mappings":"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"}

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

@@ -4,7 +4,7 @@ declare global {
         'mid-radio': MinidRadio;
     }
 }
-declare const MinidRadio_base: typeof LitElement;
+declare const MinidRadio_base: import('../types/mixin-constructor.ts').Constructor<import('../types/form-control.ts').FormControlInterface> & typeof LitElement;
 /**
  *
  * @slot -- The radio's label
@@ -16,7 +16,10 @@ declare const MinidRadio_base: typeof LitElement;
  * @csspart label - Select the label element
  */
 export declare class MinidRadio extends MinidRadio_base {
-    element: HTMLInputElement;
+    input: HTMLInputElement;
+    /**
+     * The name of the radio, used to bind together multiple radios.
+     */
     name: string;
     /**
      *  The radio button's checked state.
@@ -30,13 +33,12 @@ export declare class MinidRadio extends MinidRadio_base {
      * Disables the radio button.
      */
     disabled: boolean;
-    /**
-     * The radio button's size. When used inside a radio group, the size will be determined by the radio group's size so
-     * this attribute can typically be omitted.
-     */
-    size: 'sm' | 'md' | 'lg';
+    invalid: boolean;
+    shouldFormValueUpdate(): boolean;
+    get validationTarget(): HTMLInputElement;
     constructor();
     connectedCallback(): void;
+    private handleKeydown;
     private handleBlur;
     private handleFocus;
     private handleClick;

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

@@ -1 +1 @@
-{"version":3,"file":"radio.component.d.ts","sourceRoot":"","sources":["../../src/components/radio.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAO5C,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,UAAU,CAAC;KACzB;CACF;;AA4DD;;;;;;;;;GASG;AACH,qBACa,UAAW,SAAQ,eAA0B;IAExD,OAAO,EAAG,gBAAgB,CAAC;IAG3B,IAAI,SAAY;IAEhB;;OAEG;IAEH,OAAO,UAAS;IAEhB;;OAEG;IAEH,KAAK,SAAM;IAEX;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;;OAGG;IAEH,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;;IAShC,iBAAiB;IAQjB,OAAO,CAAC,UAAU;IAOlB,OAAO,CAAC,WAAW;IAWnB,OAAO,CAAC,WAAW;IAWnB,oBAAoB;IAKpB,iBAAiB;IAIjB;;OAEG;IACH,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY;IAKnB,MAAM;CAgChB"}
+{"version":3,"file":"radio.component.d.ts","sourceRoot":"","sources":["../../src/components/radio.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAO5C,OAAO,0BAA0B,CAAC;AAElC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,UAAU,CAAC;KACzB;CACF;;AAcD;;;;;;;;;GASG;AACH,qBACa,UAAW,SAAQ,eAA4C;IAE1E,KAAK,EAAG,gBAAgB,CAAC;IAEzB;;OAEG;IAEH,IAAI,SAAY;IAEhB;;OAEG;IAEH,OAAO,UAAS;IAEhB;;OAEG;IAEH,KAAK,SAAM;IAEX;;OAEG;IAEH,QAAQ,UAAS;IAGjB,OAAO,UAAS;IAEhB,qBAAqB,IAAI,OAAO;IAIhC,IAAI,gBAAgB,qBAEnB;;IASD,iBAAiB;IAQjB,OAAO,CAAC,aAAa;IAkBrB,OAAO,CAAC,UAAU;IAOlB,OAAO,CAAC,WAAW;IAWnB,OAAO,CAAC,WAAW;IAYnB,oBAAoB;IAKpB,iBAAiB;IAIjB;;OAEG;IACH,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY;IAInB,MAAM;CAwBhB"}

package/dist/components/radio.js

@@ -1,9 +1,11 @@
 import { css, 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 { classMap } from "lit/directives/class-map.js";
 import { watch } from "../internal/watch.js";
 import { styled } from "../mixins/tailwind.mixin.js";
+import { FormControlMixin } from "../mixins/form-control.mixin.js";
+import "./icon/icon.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -17,78 +19,48 @@ var __decorateClass = (decorators, target, key, kind) => {
 const styles = [
   css`
     :host {
-      --color-checked: #0062ba;
-      --color-border: #7a818c;
-
-      color: white;
-      padding: 0.25rem 0;
-      display: grid;
-      grid-template-columns: auto 1fr;
-      gap: 0.5rem;
-      cursor: pointer;
-      font-weight: 400;
-    }
-
-    :host > * {
+      display: inline-flex;
       cursor: pointer;
     }
-
-    :host:has(input:focus-visible) {
-      --fds-focus-border-width: 3px;
-      box-shadow: 0 0 0 var(--fds-focus-border-width)
-        var(--fds-semantic-border-focus-boxshadow);
-    }
-
-    :host:has(input:disabled),
-    :host:has(input:disabled) > * {
+    :host:has(input:disabled) {
       cursor: not-allowed;
     }
-
-    :host:has(input:disabled) > * {
-      opacity: 0.3;
-    }
-
-    .label {
-      font-weight: 400;
-    }
-
-    .radio {
-      -webkit-appearance: none;
-      appearance: none;
-
-      border-radius: 999px;
-      display: grid;
-      place-content: center;
-      border: 2px solid var(--color-border);
-      transform: translateY(-0.075em);
-    }
-
-    .radio:checked {
-      border-color: var(--color-checked);
-      background:
-        radial-gradient(circle closest-side, currentcolor 45%, transparent 50%),
-        var(--color-checked);
-    }
   `
 ];
-let MinidRadio = class extends styled(LitElement, styles) {
+let MinidRadio = class extends FormControlMixin(styled(LitElement, styles)) {
   constructor() {
     super();
     this.name = "option";
     this.checked = false;
     this.value = "";
     this.disabled = false;
-    this.size = "md";
+    this.invalid = false;
     this.addEventListener("blur", this.handleBlur);
     this.addEventListener("click", this.handleClick);
     this.addEventListener("focus", this.handleFocus);
   }
+  shouldFormValueUpdate() {
+    return this.checked;
+  }
+  get validationTarget() {
+    return this.input;
+  }
   connectedCallback() {
     super.connectedCallback();
     this.setAttribute("role", "presentation");
     this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
     this.classList.add("rounded");
   }
+  handleKeydown(event) {
+    const hasModifier = event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;
+    if (event.key === "Enter" && !hasModifier) {
+      setTimeout(() => {
+        if (!event.defaultPrevented && !event.isComposing) {
+          this.form.requestSubmit();
+        }
+      });
+    }
+  }
   handleBlur() {
     this.classList.remove("shadow-focus-visible");
     this.dispatchEvent(
@@ -111,55 +83,48 @@ let MinidRadio = class extends styled(LitElement, styles) {
       return;
     }
     this.checked = true;
+    this.dispatchEvent(new Event("mid-change"));
   }
   handleDisabledChange() {
     this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
   }
   handleCheckChange() {
-    this.element.checked = this.checked;
+    this.input.checked = this.checked;
   }
   /**
    * Sets focus on the radio button.
    */
   focus(options) {
-    this.element.focus(options);
+    this.input.focus(options);
   }
   render() {
     return html`
-      <input
-        type="radio"
-        part="radio"
-        name="${this.name}"
-        class="${classMap({
-      radio: true,
-      "h-7": this.size === "lg",
-      "w-7": this.size === "lg",
-      "w-6": this.size === "md",
-      "h-6": this.size === "md",
-      "w-5": this.size === "sm",
-      "h-5": this.size === "sm"
-    })} shadow-none"
-        ?checked=${live(this.checked)}
-        ?disabled=${this.disabled}
-      />
       <label
         part="label"
-        class="${classMap({
-      label: true,
-      "fds-label": true,
-      "fds-label--sm": this.size === "sm",
-      "fds-label--md": this.size === "md",
-      "fds-label--lg": this.size === "lg"
-    })}"
+        class="has-disabled:opacity-disabled grid cursor-pointer grid-cols-[auto_1fr] gap-2 has-disabled:cursor-not-allowed"
       >
+        <input
+          type="radio"
+          part="radio"
+          name="${this.name}"
+          class="${classMap({
+      "bg-neutral": !this.invalid,
+      "border-neutral": !this.invalid,
+      "bg-danger-tinted": this.invalid,
+      "border-danger-base": this.invalid
+    })} checked:bg-accent-base checked:before:bg-neutral focus-visible:focus-ring-sm checked:border-accent-base my-0.5 grid size-6 cursor-pointer appearance-none place-content-center rounded-full border-2 p-0.5 shadow-none before:size-2.5 before:scale-0 before:rounded-full before:transition-transform before:duration-100 checked:before:scale-100 disabled:cursor-not-allowed"
+          ?checked=${live(this.checked)}
+          ?disabled=${this.disabled}
+          @keydown=${this.handleKeydown}
+        />
         <slot></slot>
       </label>
     `;
   }
 };
 __decorateClass([
-  query(".radio")
-], MinidRadio.prototype, "element", 2);
+  query('input[type="radio"]')
+], MinidRadio.prototype, "input", 2);
 __decorateClass([
   property()
 ], MinidRadio.prototype, "name", 2);
@@ -173,8 +138,8 @@ __decorateClass([
   property({ type: Boolean, reflect: true })
 ], MinidRadio.prototype, "disabled", 2);
 __decorateClass([
-  property({ reflect: true })
-], MinidRadio.prototype, "size", 2);
+  property({ type: Boolean })
+], MinidRadio.prototype, "invalid", 2);
 __decorateClass([
   watch("disabled", { waitUntilFirstUpdate: true })
 ], MinidRadio.prototype, "handleDisabledChange", 1);

package/dist/components/radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio.js","sources":["../../src/components/radio.component.ts"],"sourcesContent":["import { css, 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 { watch } from '../internal/watch';\nimport { styled } from '../mixins/tailwind.mixin';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-radio': MinidRadio;\n  }\n}\n\nconst styles = [\n  css`\n    :host {\n      --color-checked: #0062ba;\n      --color-border: #7a818c;\n\n      color: white;\n      padding: 0.25rem 0;\n      display: grid;\n      grid-template-columns: auto 1fr;\n      gap: 0.5rem;\n      cursor: pointer;\n      font-weight: 400;\n    }\n\n    :host > * {\n      cursor: pointer;\n    }\n\n    :host:has(input:focus-visible) {\n      --fds-focus-border-width: 3px;\n      box-shadow: 0 0 0 var(--fds-focus-border-width)\n        var(--fds-semantic-border-focus-boxshadow);\n    }\n\n    :host:has(input:disabled),\n    :host:has(input:disabled) > * {\n      cursor: not-allowed;\n    }\n\n    :host:has(input:disabled) > * {\n      opacity: 0.3;\n    }\n\n    .label {\n      font-weight: 400;\n    }\n\n    .radio {\n      -webkit-appearance: none;\n      appearance: none;\n\n      border-radius: 999px;\n      display: grid;\n      place-content: center;\n      border: 2px solid var(--color-border);\n      transform: translateY(-0.075em);\n    }\n\n    .radio:checked {\n      border-color: var(--color-checked);\n      background:\n        radial-gradient(circle closest-side, currentcolor 45%, transparent 50%),\n        var(--color-checked);\n    }\n  `,\n];\n\n/**\n *\n * @slot -- The radio's label\n *\n * @event mid-blur - Emitted when the control loses focus.\n * @event mid-focus - Emitted when the control gains focus.\n *\n * @csspart radio - Select the radio input element\n * @csspart label - Select the label element\n */\n@customElement('mid-radio')\nexport class MinidRadio extends styled(LitElement, styles) {\n  @query('.radio')\n  element!: HTMLInputElement;\n\n  @property()\n  name = 'option';\n\n  /**\n   *  The radio button's checked state.\n   */\n  @property({ type: Boolean, reflect: true })\n  checked = false;\n\n  /**\n   * The radio's value. When selected, the radio group will receive this value.\n   */\n  @property()\n  value = '';\n\n  /**\n   * Disables the radio button.\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * The radio button's size. When used inside a radio group, the size will be determined by the radio group's size so\n   * this attribute can typically be omitted.\n   */\n  @property({ reflect: true })\n  size: 'sm' | 'md' | 'lg' = 'md';\n\n  constructor() {\n    super();\n    this.addEventListener('blur', this.handleBlur);\n    this.addEventListener('click', this.handleClick);\n    this.addEventListener('focus', this.handleFocus);\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('role', 'presentation');\n    this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');\n\n    this.classList.add('rounded');\n  }\n\n  private handleBlur() {\n    this.classList.remove('shadow-focus-visible');\n    this.dispatchEvent(\n      new Event('mid-blur', { composed: true, bubbles: true })\n    );\n  }\n\n  private handleFocus() {\n    if (this.disabled) {\n      return;\n    }\n\n    this.focus();\n    this.dispatchEvent(\n      new Event('mid-focus', { composed: true, bubbles: true })\n    );\n  }\n\n  private handleClick(event: MouseEvent) {\n    if (this.disabled) {\n      event.preventDefault();\n      event.stopPropagation();\n      return;\n    }\n\n    this.checked = true;\n  }\n\n  @watch('disabled', { waitUntilFirstUpdate: true })\n  handleDisabledChange() {\n    this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');\n  }\n\n  @watch('checked', { waitUntilFirstUpdate: true })\n  handleCheckChange() {\n    this.element.checked = this.checked;\n  }\n\n  /**\n   * Sets focus on the radio button.\n   */\n  focus(options?: FocusOptions) {\n    // this.classList.add('shadow-focus-visible');\n    this.element.focus(options);\n  }\n\n  override render() {\n    return html`\n      <input\n        type=\"radio\"\n        part=\"radio\"\n        name=\"${this.name}\"\n        class=\"${classMap({\n          radio: true,\n          'h-7': this.size === 'lg',\n          'w-7': this.size === 'lg',\n          'w-6': this.size === 'md',\n          'h-6': this.size === 'md',\n          'w-5': this.size === 'sm',\n          'h-5': this.size === 'sm',\n        })} shadow-none\"\n        ?checked=${live(this.checked)}\n        ?disabled=${this.disabled}\n      />\n      <label\n        part=\"label\"\n        class=\"${classMap({\n          label: true,\n          'fds-label': true,\n          'fds-label--sm': this.size === 'sm',\n          'fds-label--md': this.size === 'md',\n          'fds-label--lg': this.size === 'lg',\n        })}\"\n      >\n        <slot></slot>\n      </label>\n    `;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAaA,MAAM,SAAS;AAAA,EACb;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAuDF;AAaO,IAAM,aAAN,cAAyB,OAAO,YAAY,MAAM,EAAE;AAAA,EAgCzD,cAAc;AACZ,UAAA;AA5BF,SAAA,OAAO;AAMP,SAAA,UAAU;AAMV,SAAA,QAAQ;AAMR,SAAA,WAAW;AAOX,SAAA,OAA2B;AAIzB,SAAK,iBAAiB,QAAQ,KAAK,UAAU;AAC7C,SAAK,iBAAiB,SAAS,KAAK,WAAW;AAC/C,SAAK,iBAAiB,SAAS,KAAK,WAAW;AAAA,EACjD;AAAA,EAEA,oBAAoB;AAClB,UAAM,kBAAA;AACN,SAAK,aAAa,QAAQ,cAAc;AACxC,SAAK,aAAa,iBAAiB,KAAK,WAAW,SAAS,OAAO;AAEnE,SAAK,UAAU,IAAI,SAAS;AAAA,EAC9B;AAAA,EAEQ,aAAa;AACnB,SAAK,UAAU,OAAO,sBAAsB;AAC5C,SAAK;AAAA,MACH,IAAI,MAAM,YAAY,EAAE,UAAU,MAAM,SAAS,MAAM;AAAA,IAAA;AAAA,EAE3D;AAAA,EAEQ,cAAc;AACpB,QAAI,KAAK,UAAU;AACjB;AAAA,IACF;AAEA,SAAK,MAAA;AACL,SAAK;AAAA,MACH,IAAI,MAAM,aAAa,EAAE,UAAU,MAAM,SAAS,MAAM;AAAA,IAAA;AAAA,EAE5D;AAAA,EAEQ,YAAY,OAAmB;AACrC,QAAI,KAAK,UAAU;AACjB,YAAM,eAAA;AACN,YAAM,gBAAA;AACN;AAAA,IACF;AAEA,SAAK,UAAU;AAAA,EACjB;AAAA,EAGA,uBAAuB;AACrB,SAAK,aAAa,iBAAiB,KAAK,WAAW,SAAS,OAAO;AAAA,EACrE;AAAA,EAGA,oBAAoB;AAClB,SAAK,QAAQ,UAAU,KAAK;AAAA,EAC9B;AAAA;AAAA;AAAA;AAAA,EAKA,MAAM,SAAwB;AAE5B,SAAK,QAAQ,MAAM,OAAO;AAAA,EAC5B;AAAA,EAES,SAAS;AAChB,WAAO;AAAA;AAAA;AAAA;AAAA,gBAIK,KAAK,IAAI;AAAA,iBACR,SAAS;AAAA,MAChB,OAAO;AAAA,MACP,OAAO,KAAK,SAAS;AAAA,MACrB,OAAO,KAAK,SAAS;AAAA,MACrB,OAAO,KAAK,SAAS;AAAA,MACrB,OAAO,KAAK,SAAS;AAAA,MACrB,OAAO,KAAK,SAAS;AAAA,MACrB,OAAO,KAAK,SAAS;AAAA,IAAA,CACtB,CAAC;AAAA,mBACS,KAAK,KAAK,OAAO,CAAC;AAAA,oBACjB,KAAK,QAAQ;AAAA;AAAA;AAAA;AAAA,iBAIhB,SAAS;AAAA,MAChB,OAAO;AAAA,MACP,aAAa;AAAA,MACb,iBAAiB,KAAK,SAAS;AAAA,MAC/B,iBAAiB,KAAK,SAAS;AAAA,MAC/B,iBAAiB,KAAK,SAAS;AAAA,IAAA,CAChC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,EAKR;AACF;AA3HE,gBAAA;AAAA,EADC,MAAM,QAAQ;AAAA,GADJ,WAEX,WAAA,WAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAA;AAAS,GAJC,WAKX,WAAA,QAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GAV/B,WAWX,WAAA,WAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAA;AAAS,GAhBC,WAiBX,WAAA,SAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GAtB/B,WAuBX,WAAA,YAAA,CAAA;AAOA,gBAAA;AAAA,EADC,SAAS,EAAE,SAAS,KAAA,CAAM;AAAA,GA7BhB,WA8BX,WAAA,QAAA,CAAA;AA8CA,gBAAA;AAAA,EADC,MAAM,YAAY,EAAE,sBAAsB,MAAM;AAAA,GA3EtC,WA4EX,WAAA,wBAAA,CAAA;AAKA,gBAAA;AAAA,EADC,MAAM,WAAW,EAAE,sBAAsB,MAAM;AAAA,GAhFrC,WAiFX,WAAA,qBAAA,CAAA;AAjFW,aAAN,gBAAA;AAAA,EADN,cAAc,WAAW;AAAA,GACb,UAAA;"}
+{"version":3,"file":"radio.js","sources":["../../src/components/radio.component.ts"],"sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { live } from 'lit/directives/live.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { watch } from '../internal/watch';\nimport { styled } from '../mixins/tailwind.mixin';\nimport { FormControlMixin } from '../mixins/form-control.mixin';\nimport './icon/icon.component.ts';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-radio': MinidRadio;\n  }\n}\n\nconst styles = [\n  css`\n    :host {\n      display: inline-flex;\n      cursor: pointer;\n    }\n    :host:has(input:disabled) {\n      cursor: not-allowed;\n    }\n  `,\n];\n\n/**\n *\n * @slot -- The radio's label\n *\n * @event mid-blur - Emitted when the control loses focus.\n * @event mid-focus - Emitted when the control gains focus.\n *\n * @csspart radio - Select the radio input element\n * @csspart label - Select the label element\n */\n@customElement('mid-radio')\nexport class MinidRadio extends FormControlMixin(styled(LitElement, styles)) {\n  @query('input[type=\"radio\"]')\n  input!: HTMLInputElement;\n\n  /**\n   * The name of the radio, used to bind together multiple radios.\n   */\n  @property()\n  name = 'option';\n\n  /**\n   *  The radio button's checked state.\n   */\n  @property({ type: Boolean, reflect: true })\n  checked = false;\n\n  /**\n   * The radio's value. When selected, the radio group will receive this value.\n   */\n  @property()\n  value = '';\n\n  /**\n   * Disables the radio button.\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  @property({ type: Boolean })\n  invalid = false;\n\n  shouldFormValueUpdate(): boolean {\n    return this.checked;\n  }\n\n  get validationTarget() {\n    return this.input;\n  }\n\n  constructor() {\n    super();\n    this.addEventListener('blur', this.handleBlur);\n    this.addEventListener('click', this.handleClick);\n    this.addEventListener('focus', this.handleFocus);\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('role', 'presentation');\n    this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');\n\n    this.classList.add('rounded');\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 handleBlur() {\n    this.classList.remove('shadow-focus-visible');\n    this.dispatchEvent(\n      new Event('mid-blur', { composed: true, bubbles: true })\n    );\n  }\n\n  private handleFocus() {\n    if (this.disabled) {\n      return;\n    }\n\n    this.focus();\n    this.dispatchEvent(\n      new Event('mid-focus', { composed: true, bubbles: true })\n    );\n  }\n\n  private handleClick(event: MouseEvent) {\n    if (this.disabled) {\n      event.preventDefault();\n      event.stopPropagation();\n      return;\n    }\n\n    this.checked = true;\n    this.dispatchEvent(new Event('mid-change'));\n  }\n\n  @watch('disabled', { waitUntilFirstUpdate: true })\n  handleDisabledChange() {\n    this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');\n  }\n\n  @watch('checked', { waitUntilFirstUpdate: true })\n  handleCheckChange() {\n    this.input.checked = this.checked;\n  }\n\n  /**\n   * Sets focus on the radio button.\n   */\n  focus(options?: FocusOptions) {\n    this.input.focus(options);\n  }\n\n  override render() {\n    return html`\n      <label\n        part=\"label\"\n        class=\"has-disabled:opacity-disabled grid cursor-pointer grid-cols-[auto_1fr] gap-2 has-disabled:cursor-not-allowed\"\n      >\n        <input\n          type=\"radio\"\n          part=\"radio\"\n          name=\"${this.name}\"\n          class=\"${classMap({\n            'bg-neutral': !this.invalid,\n            'border-neutral': !this.invalid,\n            'bg-danger-tinted': this.invalid,\n            'border-danger-base': this.invalid,\n          })} checked:bg-accent-base checked:before:bg-neutral focus-visible:focus-ring-sm checked:border-accent-base my-0.5 grid size-6 cursor-pointer appearance-none place-content-center rounded-full border-2 p-0.5 shadow-none before:size-2.5 before:scale-0 before:rounded-full before:transition-transform before:duration-100 checked:before:scale-100 disabled:cursor-not-allowed\"\n          ?checked=${live(this.checked)}\n          ?disabled=${this.disabled}\n          @keydown=${this.handleKeydown}\n        />\n        <slot></slot>\n      </label>\n    `;\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/designsystemet-tailwind.css

@@ -355,11 +355,19 @@
     @apply border-accent-base bg-accent-tinted;
   }
 
-  .mid-menu-item:focus {
+  .mid-menu-item:focus-visible {
     @apply border-accent-base bg-accent-tinted outline-0;
   }
 
   .mid-menu-item:active {
     @apply border-accent-base bg-accent-tinted;
   }
+
+  .mid-button {
+    @apply bg-accent-base text-accent-base-contrast hover:bg-accent-base-hover active:bg-accent-base-active focus-visible:focus-ring leading-sm flex h-fit min-h-12 min-w-12 grow cursor-pointer items-center justify-center gap-2 rounded border border-transparent px-4 py-2 font-medium;
+  }
+
+  .mid-label {
+    @apply inline-block font-medium;
+  }
 }

package/dist/icons/arrow-right-left.svg

@@ -1,3 +1,3 @@
 <svg width="1em" height="1em" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M16.4699 2.96959C16.7627 2.67669 17.2376 2.67669 17.5305 2.96959L21.0305 6.46959C21.3234 6.76248 21.3234 7.23735 21.0305 7.53025L17.5305 11.0302C17.2376 11.3231 16.7627 11.3231 16.4699 11.0302C16.177 10.7374 16.177 10.2625 16.4699 9.96959L18.6895 7.74992L9.50018 7.74992C9.08597 7.74992 8.75018 7.41413 8.75018 6.99992C8.75018 6.5857 9.08597 6.24992 9.50018 6.24992L18.6895 6.24992L16.4699 4.03025C16.177 3.73735 16.177 3.26248 16.4699 2.96959ZM7.53051 12.9696C7.82341 13.2625 7.82341 13.7374 7.53051 14.0302L5.31084 16.2499L14.5002 16.2499C14.9144 16.2499 15.2502 16.5857 15.2502 16.9999C15.2502 17.4141 14.9144 17.7499 14.5002 17.7499L5.31084 17.7499L7.53051 19.9696C7.82341 20.2625 7.82341 20.7374 7.53051 21.0302C7.23762 21.3231 6.76275 21.3231 6.46985 21.0302L2.96985 17.5302C2.8292 17.3896 2.75018 17.1988 2.75018 16.9999C2.75018 16.801 2.8292 16.6102 2.96985 16.4696L6.46985 12.9696C6.76275 12.6767 7.23762 12.6767 7.53051 12.9696Z" fill="currentColor"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.53015 21.0304C7.23725 21.3233 6.76238 21.3233 6.46949 21.0304L2.96949 17.5304C2.67659 17.2375 2.67659 16.7627 2.96949 16.4698L6.46949 12.9698C6.76238 12.6769 7.23725 12.6769 7.53015 12.9698C7.82304 13.2627 7.82304 13.7375 7.53015 14.0304L5.31048 16.2501L14.4998 16.2501C14.914 16.2501 15.2498 16.5859 15.2498 17.0001C15.2498 17.4143 14.914 17.7501 14.4998 17.7501L5.31048 17.7501L7.53015 19.9698C7.82304 20.2627 7.82304 20.7375 7.53015 21.0304ZM16.4695 11.0304C16.1766 10.7375 16.1766 10.2627 16.4695 9.96976L18.6892 7.75009L9.49982 7.75009C9.0856 7.75009 8.74982 7.4143 8.74982 7.00009C8.74982 6.58588 9.0856 6.25009 9.49982 6.25009L18.6892 6.25009L16.4695 4.03042C16.1766 3.73753 16.1766 3.26266 16.4695 2.96976C16.7624 2.67687 17.2373 2.67687 17.5301 2.96976L21.0301 6.46976C21.1708 6.61041 21.2498 6.80118 21.2498 7.00009C21.2498 7.19901 21.1708 7.38977 21.0301 7.53042L17.5301 11.0304C17.2373 11.3233 16.7624 11.3233 16.4695 11.0304Z" fill="currentColor"/>
 </svg>