@felleslosninger/minid-elements 0.0.138 → 0.1.0

package/dist/components/phone-input.js

@@ -1,14 +1,18 @@
 import { css, LitElement, nothing, html } from "lit";
 import { query, property, state, customElement } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
+import { ifDefined } from "lit/directives/if-defined.js";
 import { styled } from "../mixins/tailwind.mixin.js";
-import { AsYouType, getCountryCallingCode, formatIncompletePhoneNumber, parsePhoneNumberCharacter } from "libphonenumber-js";
+import { AsYouType, getCountryCallingCode, formatIncompletePhoneNumber, parsePhoneNumberCharacter, parsePhoneNumberFromString } from "libphonenumber-js";
 import "./icon/icon.js";
 import { templateParser, templateFormatter, onKeyDown, onChange } from "input-format";
 import { watch } from "../internal/watch.js";
 import { HasSlotController } from "../internal/slot.js";
 import { FormControlMixin } from "../mixins/form-control.mixin.js";
 import { requiredValidator } from "../mixins/validators.js";
+import { L as LangController } from "../lang.controller-P4W-9ipy.js";
+import { getLang } from "../utilities/lang.js";
+import { getTranslations } from "../utilities/translations.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -26,11 +30,13 @@ const styles = [
     }
   `
 ];
+let nextUniqueId = 0;
 let MinidPhoneInput = class extends FormControlMixin(
   styled(LitElement, styles)
 ) {
   constructor() {
-    super(...arguments);
+    super();
+    this.labelId = `mid-code-input-label-${nextUniqueId++}`;
     this.formatter = new AsYouType();
     this.skipCountryUpdate = false;
     this.currentEvent = new Event("");
@@ -41,7 +47,9 @@ let MinidPhoneInput = class extends FormControlMixin(
     this.countrycode = "";
     this.label = "";
     this.hidelabel = false;
+    this.autocomplete = "tel";
     this.invalid = false;
+    this.invalidmessage = "";
     this.required = false;
     this.readonly = false;
     this.hasFocus = false;
@@ -59,10 +67,23 @@ let MinidPhoneInput = class extends FormControlMixin(
       }
       this.dispatchEvent(this.currentEvent);
     };
+    new LangController(this);
+    nextUniqueId++;
+    this.inputId = `mid-phone-input-input-${nextUniqueId}`;
+    this.validationId = `mid-phone-input-validation-${nextUniqueId}`;
   }
   static get formControlValidators() {
     return [requiredValidator];
   }
+  get validationTarget() {
+    return this.input;
+  }
+  validationMessageCallback(message) {
+    this.invalidmessage = message;
+  }
+  resetFormControl() {
+    this.invalidmessage = "";
+  }
   handleCountryClick() {
     this.dispatchEvent(
       new CustomEvent("mid-country-click", { composed: true, bubbles: true })
@@ -136,11 +157,32 @@ let MinidPhoneInput = class extends FormControlMixin(
     });
     this.handleNewValue(event);
   }
+  getCountryCodePrefix() {
+    if (this.country) {
+      return `+${getCountryCallingCode(this.country)}`;
+    }
+    return this.countrycode;
+  }
+  applyAutocompletePrefix(value) {
+    if (value.startsWith("+")) {
+      return value;
+    }
+    const countryCodePrefix = this.getCountryCodePrefix();
+    if (this.autocomplete === "tel-national" && countryCodePrefix) {
+      return `${countryCodePrefix}${value}`;
+    }
+    if (this.autocomplete === "tel" && this.country) {
+      const phoneNumber = parsePhoneNumberFromString(value, this.country);
+      const valueWithPlus = `+${value.replaceAll(/\D/g, "")}`;
+      if (phoneNumber?.isValid() && phoneNumber.number !== valueWithPlus) {
+        return phoneNumber.number;
+      }
+    }
+    return `+${value}`;
+  }
   handleNewValue(event) {
     this.formatter.reset();
-    if (!this.input.value.startsWith("+")) {
-      this.input.value = `+${this.input.value}`;
-    }
+    this.input.value = this.applyAutocompletePrefix(this.input.value);
     this.formatter.input(this.input.value);
     this.currentTemplate = this.formatter.getTemplate();
     onChange(
@@ -166,14 +208,8 @@ let MinidPhoneInput = class extends FormControlMixin(
     }
     return value;
   }
-  focus() {
-    this.input.focus();
-    setTimeout(() => {
-      this.input.setSelectionRange(
-        (this.countrycode?.length ?? 0) + 1,
-        this.input.value.length
-      );
-    }, 0);
+  focus(options) {
+    this.input.focus(options);
   }
   handleCountryChange() {
     if (this.skipCountryUpdate) {
@@ -193,9 +229,19 @@ let MinidPhoneInput = class extends FormControlMixin(
     const lg = false;
     const md = true;
     const sm = false;
+    const lang = getLang(this);
+    const t = getTranslations(lang);
     const hasLabelSlot = this.hasSlotControler.test("label");
     const hasLabel = !!this.label || !!hasLabelSlot;
+    const hasError = this.invalid || !!this.invalidmessage;
+    const describedBy = this.invalidmessage ? this.validationId : void 0;
     return html`
+      <label
+        id="${this.labelId}"
+        class="${classMap({
+      "sr-only": this.hidelabel || !hasLabel
+    })} mb-2 block items-center gap-1 font-medium"
+      > 
       <div
         part="field"
         class="${classMap({
@@ -205,7 +251,7 @@ let MinidPhoneInput = class extends FormControlMixin(
     })}"
       >
         <label
-          for="input"
+          for="${this.inputId}"
           class="${classMap({
       "sr-only": this.hidelabel || !hasLabel
     })} mb-2 inline-flex items-center gap-1 font-medium"
@@ -220,7 +266,7 @@ let MinidPhoneInput = class extends FormControlMixin(
         <div part="base" class="flex h-12">
           <button
             part="country-button"
-            aria-label="Open country selector"
+            aria-label=${t.openCountrySelector}
             class="${classMap({
       "border-neutral": !this.readonly,
       "border-neutral-subtle": this.readonly,
@@ -246,21 +292,26 @@ let MinidPhoneInput = class extends FormControlMixin(
           </button>
 
           <input
-            id="input"
+            id="${this.inputId}"
             class="${classMap({
-      "border-neutral": !this.invalid && !this.readonly,
-      "border-danger": this.invalid && !this.readonly,
+      "border-neutral": !hasError && !this.readonly,
+      "border-danger": hasError && !this.readonly,
       "border-neutral-subtle": this.readonly,
       "bg-neutral-surface-tinted": this.readonly,
       "bg-neutral-surface": !this.readonly,
-      "border-2": this.invalid,
-      border: !this.invalid
+      "border-2": hasError,
+      border: !hasError
     })} focus-visible:focus-ring grow rounded-r px-3"
             part="phone-number"
             type="tel"
-            autocomplete="tel"
+            autocomplete=${this.autocomplete}
             ?readonly=${this.readonly}
             value=${this.value}
+            aria-describedby=${ifDefined(describedBy)}
+            aria-invalid=${hasError ? "true" : "false"}
+            aria-errormessage=${ifDefined(
+      this.invalidmessage ? this.validationId : void 0
+    )}
             @input=${this.handleInput}
             @focus=${this.handleFocus}
             @blur=${this.handleBlur}
@@ -268,12 +319,24 @@ let MinidPhoneInput = class extends FormControlMixin(
             @change=${this.handleChange}
           />
         </div>
+        <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-5 min-w-5"
+          ></mid-icon>
+          ${this.invalidmessage}
+        </div>
       </div>
     `;
   }
 };
 __decorateClass([
-  query("#input")
+  query("input")
 ], MinidPhoneInput.prototype, "input", 2);
 __decorateClass([
   property({ reflect: true })
@@ -293,9 +356,15 @@ __decorateClass([
 __decorateClass([
   property({ reflect: true })
 ], MinidPhoneInput.prototype, "country", 2);
+__decorateClass([
+  property()
+], MinidPhoneInput.prototype, "autocomplete", 2);
 __decorateClass([
   property({ type: Boolean })
 ], MinidPhoneInput.prototype, "invalid", 2);
+__decorateClass([
+  property()
+], MinidPhoneInput.prototype, "invalidmessage", 2);
 __decorateClass([
   property({ type: Boolean })
 ], MinidPhoneInput.prototype, "required", 2);

package/dist/components/phone-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"phone-input.js","sources":["../../src/components/phone-input.component.ts"],"sourcesContent":["import { css, html, LitElement, nothing } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styled } from '../mixins/tailwind.mixin';\nimport {\n  AsYouType,\n  formatIncompletePhoneNumber,\n  getCountryCallingCode,\n  type CountryCode,\n  parsePhoneNumberCharacter,\n} from 'libphonenumber-js';\nimport './icon/icon.component';\nimport {\n  onChange,\n  onKeyDown,\n  templateFormatter,\n  templateParser,\n} from 'input-format';\nimport { watch } from '../internal/watch';\nimport { HasSlotController } from '../internal/slot';\nimport { FormControlMixin } from '../mixins/form-control.mixin';\nimport { requiredValidator } from '../mixins/validators';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-phone-input': MinidPhoneInput;\n  }\n}\n\nconst styles = [\n  css`\n    :host {\n      display: block;\n    }\n  `,\n];\n\n/**\n * @event {Event} mid-country-click - Emitted when the country button is clicked\n * @event {Event} mid-change - Emitted when the value is modified by the user\n * @event {Event} mid-input - Emitted after a new user input\n * @event {Event} mid-blur - Emitted after focus is moved away from input\n * @event {Event} mid-focus - Emitted after input gains focus\n *\n * @part base - Select the container outside the country button and phone number input\n * @part field - Select the container around the label and the inputs\n * @part label - Select the label element\n * @part country-button - Select the country button\n * @part input - Select the phone number input\n */\n@customElement('mid-phone-input')\nexport class MinidPhoneInput extends FormControlMixin(\n  styled(LitElement, styles)\n) {\n  private formatter = new AsYouType();\n  private skipCountryUpdate = false; // avoids unwanted update loop\n  private currentEvent = new Event(''); // the event to be emitted after value is set\n  private currentTemplate = '';\n  private hasSlotControler = new HasSlotController(this, 'label');\n\n  @query('#input')\n  input!: HTMLInputElement;\n\n  /**\n   * The value of the phone number in E.164 format. Example: `\"+4799999999\"`\n   *\n   */\n  @property({ reflect: true })\n  value = '';\n\n  /**\n   * The phone number without the country code prefix. Example: `\"99999999\"`\n   */\n  @property({ reflect: true })\n  nationalnumber = '';\n\n  /**\n   * The country code of the current phone number value. Example: `\"+47\"`\n   */\n  @property({ reflect: true })\n  countrycode = '';\n\n  /**\n   * Label for the phone input.\n   * Passed label will be encapsulated by a label element.\n   */\n  @property()\n  label = '';\n\n  /**\n   * Hide label visually. Still available for screen readers\n   */\n  @property({ type: Boolean })\n  hidelabel = false;\n\n  /**\n   * The country selected. A two letter ISO country code like: `\"NO\"`\n   */\n  @property({ reflect: true })\n  country?: CountryCode;\n\n  /**\n   * Activates invalid styling\n   */\n  @property({ type: Boolean })\n  invalid = false;\n\n  /**\n   * Makes the input required\n   */\n  @property({ type: Boolean })\n  required = false;\n\n  /**\n   * Makes the input read-only, meaning the user cannot change the value.\n   */\n  @property({ type: Boolean })\n  readonly = false;\n\n  @state()\n  hasFocus = false;\n\n  static get formControlValidators() {\n    return [requiredValidator];\n  }\n\n  handleCountryClick() {\n    this.dispatchEvent(\n      new CustomEvent('mid-country-click', { composed: true, bubbles: true })\n    );\n  }\n\n  handleCountryKeyDown(event: KeyboardEvent) {\n    if ([' ', 'Enter'].includes(event.key)) {\n      this.dispatchEvent(\n        new CustomEvent('mid-country-click', { composed: true, bubbles: true })\n      );\n    }\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n\n    this.formatter.input(this.value);\n    this.country = this.formatter.getCountry() ?? this.country;\n    this.countrycode = this.country\n      ? `+${getCountryCallingCode(this.country)}`\n      : '+';\n\n    this.value = formatIncompletePhoneNumber(this.value);\n    this.value ||= this.countrycode;\n    this.nationalnumber = this.removePhonePrefix(this.value);\n    this.setValue(this.value.replaceAll(' ', ''));\n\n    setTimeout(() => {\n      this.input.value = `${this.countrycode} ${this.nationalnumber}`;\n    });\n  }\n\n  get parseTemplate() {\n    return templateParser(this.currentTemplate, parsePhoneNumberCharacter);\n  }\n\n  get formatTemplate() {\n    return templateFormatter(this.currentTemplate);\n  }\n\n  private handleBlur() {\n    this.hasFocus = false;\n    this.dispatchEvent(\n      new Event('mid-blur', { bubbles: true, composed: true })\n    );\n  }\n\n  private handleChange(event: Event) {\n    // Event is dispatched after value is set\n    this.currentEvent = new Event('mid-change', {\n      bubbles: true,\n      composed: true,\n    });\n\n    this.handleNewValue(event);\n  }\n\n  private handleKeydown(event: KeyboardEvent) {\n    if (event.key === 'Backspace' && this.input.selectionStart === 1) {\n      // don't remove '+' symbol which is the first character\n      event.preventDefault();\n      return;\n    }\n\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      return;\n    }\n\n    onKeyDown(\n      event as any,\n      this.input,\n      this.parseTemplate,\n      this.formatTemplate,\n      this.valueChangeCallback\n    );\n  }\n\n  private handleInput(event: InputEvent) {\n    // Event is dispatched after value is set\n    this.currentEvent = new Event('mid-input', {\n      composed: true,\n      bubbles: true,\n    });\n    this.handleNewValue(event);\n  }\n\n  private handleNewValue(event: Event) {\n    this.formatter.reset();\n\n    if (!this.input.value.startsWith('+')) {\n      this.input.value = `+${this.input.value}`;\n    }\n    this.formatter.input(this.input.value);\n    this.currentTemplate = this.formatter.getTemplate();\n\n    onChange(\n      event as any,\n      this.input,\n      this.parseTemplate,\n      this.formatTemplate,\n      this.valueChangeCallback\n    );\n  }\n\n  private valueChangeCallback = (value: string) => {\n    const country =\n      value.length < 2\n        ? undefined\n        : (this.formatter.getCountry() ?? this.country);\n\n    if (country !== this.country) {\n      this.country = country;\n      this.countrycode = this.country\n        ? `+${getCountryCallingCode(this.country)}`\n        : '+';\n      this.skipCountryUpdate = true;\n    }\n\n    if (value !== this.value) {\n      this.value = value;\n      this.setValue(this.value.replaceAll(' ', ''));\n      this.nationalnumber = this.removePhonePrefix(value);\n    }\n\n    this.dispatchEvent(this.currentEvent);\n  };\n\n  private handleFocus() {\n    this.hasFocus = true;\n    this.dispatchEvent(\n      new Event('mid-focus', { composed: true, bubbles: true })\n    );\n  }\n\n  private removePhonePrefix(value: string) {\n    if (this.countrycode) {\n      value = value.slice(this.countrycode.length);\n      if (value[0] === ' ') {\n        value = value.slice(1);\n      }\n    }\n    return value;\n  }\n\n  focus() {\n    this.input.focus();\n    setTimeout(() => {\n      this.input.setSelectionRange(\n        (this.countrycode?.length ?? 0) + 1,\n        this.input.value.length\n      );\n    }, 0);\n  }\n\n  @watch('country', { waitUntilFirstUpdate: true })\n  handleCountryChange() {\n    if (this.skipCountryUpdate) {\n      this.skipCountryUpdate = false;\n      return;\n    }\n\n    this.formatter = new AsYouType(this.country);\n    this.nationalnumber = this.removePhonePrefix(this.input.value);\n\n    this.countrycode = this.country\n      ? `+${getCountryCallingCode(this.country)}`\n      : '+';\n    this.input.value = formatIncompletePhoneNumber(\n      `${this.countrycode}${this.nationalnumber}`\n    );\n    this.input.dispatchEvent(new Event('input', { bubbles: true }));\n    this.input.dispatchEvent(new Event('change', { bubbles: true }));\n  }\n\n  override render() {\n    const lg = false;\n    const md = true;\n    const sm = false;\n\n    const hasLabelSlot = this.hasSlotControler.test('label');\n    const hasLabel = !!this.label || !!hasLabelSlot;\n\n    return html`\n      <div\n        part=\"field\"\n        class=\"${classMap({\n          'text-body-sm': sm,\n          'text-body-md': md,\n          'text-body-lg': lg,\n        })}\"\n      >\n        <label\n          for=\"input\"\n          class=\"${classMap({\n            'sr-only': this.hidelabel || !hasLabel,\n          })} mb-2 inline-flex items-center gap-1 font-medium\"\n        >\n          ${this.readonly\n            ? html`<mid-icon\n                class=\"size-5\"\n                library=\"system\"\n                name=\"padlock-locked-fill\"\n              ></mid-icon>`\n            : nothing}\n          <slot name=\"label\"> ${this.label} </slot>\n        </label>\n        <div part=\"base\" class=\"flex h-12\">\n          <button\n            part=\"country-button\"\n            aria-label=\"Open country selector\"\n            class=\"${classMap({\n              'border-neutral': !this.readonly,\n              'border-neutral-subtle': this.readonly,\n              'bg-neutral-surface-tinted': this.readonly,\n              'bg-neutral-surface': !this.readonly,\n            })} focus-visible:focus-ring flex h-full items-center rounded-l border border-r-0 pl-3\"\n            iconstyled\n            variant=\"tertiary\"\n            ?disabled=${this.readonly}\n            @click=${this.handleCountryClick}\n            @keydown=${this.handleCountryKeyDown}\n          >\n            ${this.country\n              ? html`\n                  <mid-icon\n                    class=\"h-4 w-6 overflow-hidden rounded\"\n                    library=\"country\"\n                    name=\"${this.country}\"\n                  ></mid-icon>\n                `\n              : html`<div\n                  class=\"bg-neutral-surface-active h-4 w-6 overflow-hidden rounded\"\n                ></div>`}\n            <mid-icon name=\"chevron-down\"></mid-icon>\n          </button>\n\n          <input\n            id=\"input\"\n            class=\"${classMap({\n              'border-neutral': !this.invalid && !this.readonly,\n              'border-danger': this.invalid && !this.readonly,\n              'border-neutral-subtle': this.readonly,\n              'bg-neutral-surface-tinted': this.readonly,\n              'bg-neutral-surface': !this.readonly,\n              'border-2': this.invalid,\n              border: !this.invalid,\n            })} focus-visible:focus-ring grow rounded-r px-3\"\n            part=\"phone-number\"\n            type=\"tel\"\n            autocomplete=\"tel\"\n            ?readonly=${this.readonly}\n            value=${this.value}\n            @input=${this.handleInput}\n            @focus=${this.handleFocus}\n            @blur=${this.handleBlur}\n            @keydown=${this.handleKeydown}\n            @change=${this.handleChange}\n          />\n        </div>\n      </div>\n    `;\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"phone-input.js","sources":["../../src/components/phone-input.component.ts"],"sourcesContent":["import { css, html, LitElement, nothing } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { styled } from '../mixins/tailwind.mixin';\nimport {\n  AsYouType,\n  formatIncompletePhoneNumber,\n  getCountryCallingCode,\n  type CountryCode,\n  parsePhoneNumberFromString,\n  parsePhoneNumberCharacter,\n} from 'libphonenumber-js';\nimport './icon/icon.component';\nimport {\n  onChange,\n  onKeyDown,\n  templateFormatter,\n  templateParser,\n} from 'input-format';\nimport { watch } from '../internal/watch';\nimport { HasSlotController } from '../internal/slot';\nimport { FormControlMixin } from '../mixins/form-control.mixin';\nimport { requiredValidator } from '../mixins/validators';\nimport { LangController } from '../controllers/lang.controller.js';\nimport { getLang } from '../utilities/lang';\nimport { getTranslations } from '../utilities/translations';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-phone-input': MinidPhoneInput;\n  }\n}\n\ntype PhoneAutocomplete = 'tel' | 'tel-national';\n\nconst styles = [\n  css`\n    :host {\n      display: block;\n    }\n  `,\n];\n\nlet nextUniqueId = 0;\n\n/**\n * @event {Event} mid-country-click - Emitted when the country button is clicked\n * @event {Event} mid-change - Emitted when the value is modified by the user\n * @event {Event} mid-input - Emitted after a new user input\n * @event {Event} mid-blur - Emitted after focus is moved away from input\n * @event {Event} mid-focus - Emitted after input gains focus\n *\n * @part base - Select the container outside the country button and phone number input\n * @part field - Select the container around the label and the inputs\n * @part label - Select the label element\n * @part country-button - Select the country button\n * @part input - Select the phone number input\n */\n@customElement('mid-phone-input')\nexport class MinidPhoneInput extends FormControlMixin(\n  styled(LitElement, styles)\n) {\n  private readonly inputId: string;\n  private readonly validationId: string;\n  private readonly labelId = `mid-code-input-label-${nextUniqueId++}`;\n  private formatter = new AsYouType();\n  private skipCountryUpdate = false; // avoids unwanted update loop\n  private currentEvent = new Event(''); // the event to be emitted after value is set\n  private currentTemplate = '';\n  private hasSlotControler = new HasSlotController(this, 'label');\n\n  @query('input')\n  input!: HTMLInputElement;\n\n  /**\n   * The value of the phone number in E.164 format. Example: `\"+4799999999\"`\n   *\n   */\n  @property({ reflect: true })\n  value = '';\n\n  /**\n   * The phone number without the country code prefix. Example: `\"99999999\"`\n   */\n  @property({ reflect: true })\n  nationalnumber = '';\n\n  /**\n   * The country code of the current phone number value. Example: `\"+47\"`\n   */\n  @property({ reflect: true })\n  countrycode = '';\n\n  /**\n   * Label for the phone input.\n   * Passed label will be encapsulated by a label element.\n   */\n  @property()\n  label = '';\n\n  /**\n   * Hide label visually. Still available for screen readers\n   */\n  @property({ type: Boolean })\n  hidelabel = false;\n\n  /**\n   * The country selected. A two letter ISO country code like: `\"NO\"`\n   */\n  @property({ reflect: true })\n  country?: CountryCode;\n\n  /**\n   * Controls the native browser autofill token used for the phone number input.\n   *\n   * `tel` expects a full phone number, including country code when available.\n   * If a value without a country code matches the selected country, the country\n   * prefix is added.\n   * `tel-national` expects the national number and prefixes the selected country.\n   */\n  @property()\n  autocomplete: PhoneAutocomplete = 'tel';\n\n  /**\n   * Activates invalid styling\n   */\n  @property({ type: Boolean })\n  invalid = false;\n\n  /**\n   * Error message to display when the input is invalid, also activates invalid styling\n   */\n  @property()\n  invalidmessage = '';\n\n  /**\n   * Makes the input required\n   */\n  @property({ type: Boolean })\n  required = false;\n\n  /**\n   * Makes the input read-only, meaning the user cannot change the value.\n   */\n  @property({ type: Boolean })\n  readonly = false;\n\n  @state()\n  hasFocus = false;\n\n  static get formControlValidators() {\n    return [requiredValidator];\n  }\n\n  constructor() {\n    super();\n    new LangController(this);\n    nextUniqueId++;\n    this.inputId = `mid-phone-input-input-${nextUniqueId}`;\n    this.validationId = `mid-phone-input-validation-${nextUniqueId}`;\n  }\n\n  get validationTarget() {\n    return this.input;\n  }\n\n  validationMessageCallback(message: string) {\n    this.invalidmessage = message;\n  }\n\n  resetFormControl() {\n    this.invalidmessage = '';\n  }\n\n  handleCountryClick() {\n    this.dispatchEvent(\n      new CustomEvent('mid-country-click', { composed: true, bubbles: true })\n    );\n  }\n\n  handleCountryKeyDown(event: KeyboardEvent) {\n    if ([' ', 'Enter'].includes(event.key)) {\n      this.dispatchEvent(\n        new CustomEvent('mid-country-click', { composed: true, bubbles: true })\n      );\n    }\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n\n    this.formatter.input(this.value);\n    this.country = this.formatter.getCountry() ?? this.country;\n    this.countrycode = this.country\n      ? `+${getCountryCallingCode(this.country)}`\n      : '+';\n\n    this.value = formatIncompletePhoneNumber(this.value);\n    this.value ||= this.countrycode;\n    this.nationalnumber = this.removePhonePrefix(this.value);\n    this.setValue(this.value.replaceAll(' ', ''));\n\n    setTimeout(() => {\n      this.input.value = `${this.countrycode} ${this.nationalnumber}`;\n    });\n  }\n\n  get parseTemplate() {\n    return templateParser(this.currentTemplate, parsePhoneNumberCharacter);\n  }\n\n  get formatTemplate() {\n    return templateFormatter(this.currentTemplate);\n  }\n\n  private handleBlur() {\n    this.hasFocus = false;\n    this.dispatchEvent(\n      new Event('mid-blur', { bubbles: true, composed: true })\n    );\n  }\n\n  private handleChange(event: Event) {\n    // Event is dispatched after value is set\n    this.currentEvent = new Event('mid-change', {\n      bubbles: true,\n      composed: true,\n    });\n\n    this.handleNewValue(event);\n  }\n\n  private handleKeydown(event: KeyboardEvent) {\n    if (event.key === 'Backspace' && this.input.selectionStart === 1) {\n      // don't remove '+' symbol which is the first character\n      event.preventDefault();\n      return;\n    }\n\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      return;\n    }\n\n    onKeyDown(\n      event as any,\n      this.input,\n      this.parseTemplate,\n      this.formatTemplate,\n      this.valueChangeCallback\n    );\n  }\n\n  private handleInput(event: InputEvent) {\n    // Event is dispatched after value is set\n    this.currentEvent = new Event('mid-input', {\n      composed: true,\n      bubbles: true,\n    });\n    this.handleNewValue(event);\n  }\n\n  private getCountryCodePrefix() {\n    if (this.country) {\n      return `+${getCountryCallingCode(this.country)}`;\n    }\n\n    return this.countrycode;\n  }\n\n  private applyAutocompletePrefix(value: string) {\n    if (value.startsWith('+')) {\n      return value;\n    }\n\n    const countryCodePrefix = this.getCountryCodePrefix();\n    if (this.autocomplete === 'tel-national' && countryCodePrefix) {\n      return `${countryCodePrefix}${value}`;\n    }\n\n    if (this.autocomplete === 'tel' && this.country) {\n      const phoneNumber = parsePhoneNumberFromString(value, this.country);\n      const valueWithPlus = `+${value.replaceAll(/\\D/g, '')}`;\n\n      if (phoneNumber?.isValid() && phoneNumber.number !== valueWithPlus) {\n        return phoneNumber.number;\n      }\n    }\n\n    return `+${value}`;\n  }\n\n  private handleNewValue(event: Event) {\n    this.formatter.reset();\n\n    this.input.value = this.applyAutocompletePrefix(this.input.value);\n\n    this.formatter.input(this.input.value);\n    this.currentTemplate = this.formatter.getTemplate();\n\n    onChange(\n      event as any,\n      this.input,\n      this.parseTemplate,\n      this.formatTemplate,\n      this.valueChangeCallback\n    );\n  }\n\n  private valueChangeCallback = (value: string) => {\n    const country =\n      value.length < 2\n        ? undefined\n        : (this.formatter.getCountry() ?? this.country);\n\n    if (country !== this.country) {\n      this.country = country;\n      this.countrycode = this.country\n        ? `+${getCountryCallingCode(this.country)}`\n        : '+';\n      this.skipCountryUpdate = true;\n    }\n\n    if (value !== this.value) {\n      this.value = value;\n      this.setValue(this.value.replaceAll(' ', ''));\n      this.nationalnumber = this.removePhonePrefix(value);\n    }\n\n    this.dispatchEvent(this.currentEvent);\n  };\n\n  private handleFocus() {\n    this.hasFocus = true;\n    this.dispatchEvent(\n      new Event('mid-focus', { composed: true, bubbles: true })\n    );\n  }\n\n  private removePhonePrefix(value: string) {\n    if (this.countrycode) {\n      value = value.slice(this.countrycode.length);\n      if (value[0] === ' ') {\n        value = value.slice(1);\n      }\n    }\n    return value;\n  }\n\n  focus(options?: FocusOptions): void {\n    this.input.focus(options);\n  }\n\n  @watch('country', { waitUntilFirstUpdate: true })\n  handleCountryChange() {\n    if (this.skipCountryUpdate) {\n      this.skipCountryUpdate = false;\n      return;\n    }\n\n    this.formatter = new AsYouType(this.country);\n    this.nationalnumber = this.removePhonePrefix(this.input.value);\n\n    this.countrycode = this.country\n      ? `+${getCountryCallingCode(this.country)}`\n      : '+';\n    this.input.value = formatIncompletePhoneNumber(\n      `${this.countrycode}${this.nationalnumber}`\n    );\n    this.input.dispatchEvent(new Event('input', { bubbles: true }));\n    this.input.dispatchEvent(new Event('change', { bubbles: true }));\n  }\n\n  override render() {\n    const lg = false;\n    const md = true;\n    const sm = false;\n\n    const lang = getLang(this);\n    const t = getTranslations(lang);\n    const hasLabelSlot = this.hasSlotControler.test('label');\n    const hasLabel = !!this.label || !!hasLabelSlot;\n    const hasError = this.invalid || !!this.invalidmessage;\n    const describedBy = this.invalidmessage ? this.validationId : undefined;\n\n    return html`\n      <label\n        id=\"${this.labelId}\"\n        class=\"${classMap({\n          'sr-only': this.hidelabel || !hasLabel,\n        })} mb-2 block items-center gap-1 font-medium\"\n      > \n      <div\n        part=\"field\"\n        class=\"${classMap({\n          'text-body-sm': sm,\n          'text-body-md': md,\n          'text-body-lg': lg,\n        })}\"\n      >\n        <label\n          for=\"${this.inputId}\"\n          class=\"${classMap({\n            'sr-only': this.hidelabel || !hasLabel,\n          })} mb-2 inline-flex items-center gap-1 font-medium\"\n        >\n          ${this.readonly\n            ? html`<mid-icon\n                class=\"size-5\"\n                library=\"system\"\n                name=\"padlock-locked-fill\"\n              ></mid-icon>`\n            : nothing}\n          <slot name=\"label\"> ${this.label} </slot>\n        </label>\n        <div part=\"base\" class=\"flex h-12\">\n          <button\n            part=\"country-button\"\n            aria-label=${t.openCountrySelector}\n            class=\"${classMap({\n              'border-neutral': !this.readonly,\n              'border-neutral-subtle': this.readonly,\n              'bg-neutral-surface-tinted': this.readonly,\n              'bg-neutral-surface': !this.readonly,\n            })} focus-visible:focus-ring flex h-full items-center rounded-l border border-r-0 pl-3\"\n            iconstyled\n            variant=\"tertiary\"\n            ?disabled=${this.readonly}\n            @click=${this.handleCountryClick}\n            @keydown=${this.handleCountryKeyDown}\n          >\n            ${this.country\n              ? html`\n                  <mid-icon\n                    class=\"h-4 w-6 overflow-hidden rounded\"\n                    library=\"country\"\n                    name=\"${this.country}\"\n                  ></mid-icon>\n                `\n              : html`<div\n                  class=\"bg-neutral-surface-active h-4 w-6 overflow-hidden rounded\"\n                ></div>`}\n            <mid-icon name=\"chevron-down\"></mid-icon>\n          </button>\n\n          <input\n            id=\"${this.inputId}\"\n            class=\"${classMap({\n              'border-neutral': !hasError && !this.readonly,\n              'border-danger': hasError && !this.readonly,\n              'border-neutral-subtle': this.readonly,\n              'bg-neutral-surface-tinted': this.readonly,\n              'bg-neutral-surface': !this.readonly,\n              'border-2': hasError,\n              border: !hasError,\n            })} focus-visible:focus-ring grow rounded-r px-3\"\n            part=\"phone-number\"\n            type=\"tel\"\n            autocomplete=${this.autocomplete}\n            ?readonly=${this.readonly}\n            value=${this.value}\n            aria-describedby=${ifDefined(describedBy)}\n            aria-invalid=${hasError ? 'true' : 'false'}\n            aria-errormessage=${ifDefined(\n              this.invalidmessage ? this.validationId : undefined\n            )}\n            @input=${this.handleInput}\n            @focus=${this.handleFocus}\n            @blur=${this.handleBlur}\n            @keydown=${this.handleKeydown}\n            @change=${this.handleChange}\n          />\n        </div>\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-5 min-w-5\"\n          ></mid-icon>\n          ${this.invalidmessage}\n        </div>\n      </div>\n    `;\n  }\n}\n"],"names":[],"mappings":"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"}

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

@@ -166,7 +166,7 @@ export declare class MinidPopup extends MinidPopup_base {
     /** Forces the popup to recalculate and reposition itself. */
     reposition(): void;
     private updateHoverBridge;
-    render(): import('lit-html').TemplateResult<1>;
+    render(): import('lit').TemplateResult<1>;
 }
 export {};
 //# sourceMappingURL=popup.component.d.ts.map

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

@@ -35,7 +35,7 @@ export declare class MinidQrCode extends MinidQrCode_base {
     background: string;
     margin: number;
     protected updated(): void;
-    render(): import('lit-html').TemplateResult<1>;
+    render(): import('lit').TemplateResult<1>;
 }
 export {};
 //# sourceMappingURL=qr-code.component.d.ts.map

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

@@ -46,7 +46,7 @@ export declare class MinidRadioButton extends MinidRadioButton_base {
      * Removes focus from the radio button.
      */
     blur(): void;
-    render(): import('lit-html').TemplateResult<1>;
+    render(): import('lit').TemplateResult<1>;
 }
 export {};
 //# sourceMappingURL=radio-button.component.d.ts.map

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

@@ -55,7 +55,7 @@ export declare class MinidRadioGroup extends MinidRadioGroup_base {
      *  Sets focus on the radio-group.
      */
     focus(options?: FocusOptions): void;
-    render(): import('lit-html').TemplateResult<1>;
+    render(): import('lit').TemplateResult<1>;
 }
 export {};
 //# sourceMappingURL=radio-group.component.d.ts.map

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

@@ -48,7 +48,7 @@ export declare class MinidRadio extends MinidRadio_base {
      * Sets focus on the radio button.
      */
     focus(options?: FocusOptions): void;
-    render(): import('lit-html').TemplateResult<1>;
+    render(): import('lit').TemplateResult<1>;
 }
 export {};
 //# sourceMappingURL=radio.component.d.ts.map

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,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"}
+{"version":3,"file":"radio.component.d.ts","sourceRoot":"","sources":["../../src/components/radio.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAM5C,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;CAqBhB"}

package/dist/components/radio.js

@@ -1,7 +1,6 @@
 import { css, LitElement, html } from "lit";
 import { query, property, customElement } from "lit/decorators.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";
@@ -99,26 +98,23 @@ let MinidRadio = class extends FormControlMixin(styled(LitElement, styles)) {
   }
   render() {
     return html`
+    <ds-field class="ds-field">
+      <input
+        type="radio"
+        part="radio"
+        name="${this.name}"
+        class="ds-input"
+        ?checked=${live(this.checked)}
+        ?disabled=${this.disabled}
+        @keydown=${this.handleKeydown}
+      />
       <label
         part="label"
-        class="has-disabled:opacity-disabled grid cursor-pointer grid-cols-[auto_1fr] gap-2 has-disabled:cursor-not-allowed"
+        class="ds-label"
       >
-        <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>
+    </ds-field>
     `;
   }
 };

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 { 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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"}
+{"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 { 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    <ds-field class=\"ds-field\">\n      <input\n        type=\"radio\"\n        part=\"radio\"\n        name=\"${this.name}\"\n        class=\"ds-input\"\n        ?checked=${live(this.checked)}\n        ?disabled=${this.disabled}\n        @keydown=${this.handleKeydown}\n      />\n      <label\n        part=\"label\"\n        class=\"ds-label\"\n      >\n        <slot></slot>\n      </label>\n    </ds-field>\n    `;\n  }\n}\n"],"names":[],"mappings":"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"}

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

@@ -1,5 +1,4 @@
 import { LitElement } from 'lit';
-import { MinidTextfield } from './textfield.component.ts';
 declare global {
     interface HTMLElementTagNameMap {
         'mid-search': MinidSearch;
@@ -12,10 +11,14 @@ declare const MinidSearch_base: typeof LitElement;
  * @event mid-clear - Emitted when the input value is cleared
  * @event mid-focus - Emitted when input element is focused
  * @event mid-blur - Emitted when focus moves away from input element
+ *
+ * @csspart base - The search wrapper element
+ * @csspart input - The internal `<input>` element
+ * @csspart clear-button - The clear button
  */
 export declare class MinidSearch extends MinidSearch_base {
-    textField: MinidTextfield;
-    size: 'sm' | 'md' | 'lg';
+    constructor();
+    input: HTMLInputElement;
     label: string;
     placeholder: string;
     value: string;
@@ -24,8 +27,12 @@ export declare class MinidSearch extends MinidSearch_base {
      */
     debounce: number;
     private handleInput;
+    private handleChange;
+    private handleFocus;
+    private handleBlur;
+    private handleClear;
     focus(): void;
-    render(): import('lit-html').TemplateResult<1>;
+    render(): import('lit').TemplateResult<1>;
 }
 export {};
 //# sourceMappingURL=search.component.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"search.component.d.ts","sourceRoot":"","sources":["../../src/components/search.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAGvC,OAAO,uBAAuB,CAAC;AAC/B,OAAO,uBAAuB,CAAC;AAC/B,OAAO,uBAAuB,CAAC;AAE/B,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAG1D,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,WAAW,CAAC;KAC3B;CACF;;AAED;;;;;;GAMG;AACH,qBACa,WAAY,SAAQ,gBAAkB;IAEjD,SAAS,EAAG,cAAc,CAAC;IAG3B,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAGhC,KAAK,SAAM;IAGX,WAAW,SAAM;IAGjB,KAAK,SAAM;IAEX;;OAEG;IAEH,QAAQ,SAAK;IAEb,OAAO,CAAC,WAAW,CAKjB;IAEF,KAAK;IAII,MAAM;CAuBhB"}
+{"version":3,"file":"search.component.d.ts","sourceRoot":"","sources":["../../src/components/search.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAW,MAAM,KAAK,CAAC;AAUrD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,WAAW,CAAC;KAC3B;CACF;;AAUD;;;;;;;;;;GAUG;AACH,qBACa,WAAY,SAAQ,gBAA0B;;IAOzD,KAAK,EAAG,gBAAgB,CAAC;IAGzB,KAAK,SAAM;IAGX,WAAW,SAAM;IAGjB,KAAK,SAAM;IAEX;;OAEG;IAEH,QAAQ,SAAK;IAEb,OAAO,CAAC,WAAW,CAKjB;IAEF,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,UAAU;IAMlB,OAAO,CAAC,WAAW;IAanB,KAAK;IAII,MAAM;CAoChB"}