@felleslosninger/minid-elements 0.0.127 → 0.0.129

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

@@ -16,6 +16,8 @@ declare const MinidCodeInput_base: import('../types/mixin-constructor.ts').Const
  *
  * @csspart input-container - The wrapper around the input elements. This can be used to adjust font-size.
  *
+ * @method focus - Focuses the first input element
+ * @method clear - Clears all input elements
  */
 export declare class MinidCodeInput extends MinidCodeInput_base {
     #private;
@@ -73,6 +75,7 @@ export declare class MinidCodeInput extends MinidCodeInput_base {
     private handlePaste;
     private updateValueAndEmit;
     private valueVisualUpdate;
+    clear(): void;
     focus(options?: FocusOptions): void;
     handleLengthChange(): void;
     handleValueChange(): void;

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

@@ -1 +1 @@
-{"version":3,"file":"code-input.component.d.ts","sourceRoot":"","sources":["../../src/components/code-input.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAQ5D,OAAO,0BAA0B,CAAC;AASlC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,cAAc,CAAC;KAClC;CACF;;AAqBD;;;;;;;;;;;GAWG;AACH,qBACa,cAAe,SAAQ,mBAEnC;;IACC,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAAwC;IAEzE,OAAO,CAAC,QAAQ,CAAC,OAAO,CAA4C;IAGpE,OAAO,CAAC,aAAa,CAAgC;IAGrD,KAAK,SAAM;IAGX,KAAK,SAAM;IAGX,IAAI,EAAE,QAAQ,GAAG,MAAM,CAAU;IAEjC;;OAEG;IAEH,SAAS,EAAE,SAAS,GAAG,MAAM,CAAU;IAEvC;;OAEG;IAEH,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAEhC;;OAEG;IAEH,MAAM,SAAK;IAGX,QAAQ,UAAS;IAEjB;;OAEG;IAEH,SAAS,UAAS;IAElB;;OAEG;IAEH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IAEH,cAAc,SAAM;IAEpB;;OAEG;IAEH,SAAS,UAAS;IAElB;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,OAAO,CAAC,EAAE,MAAM,CAAC;IAGjB,OAAO,CAAC,cAAc,CAAuC;IAE7D,MAAM,KAAK,qBAAqB,qDAO/B;IAED,IAAI,gBAAgB,4BAEnB;IAED,SAAS,CAAC,YAAY,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAIhE,OAAO,CAAC,WAAW;IAOnB,OAAO,CAAC,UAAU;IAMlB,OAAO,CAAC,aAAa;IAgDrB,OAAO,CAAC,WAAW;IAyBnB,OAAO,CAAC,WAAW;IA4BnB,OAAO,CAAC,kBAAkB;IAuB1B,OAAO,CAAC,iBAAiB;IAOzB,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI;IAOnC,kBAAkB;IAMlB,iBAAiB;IAWR,MAAM;CAiEhB"}
+{"version":3,"file":"code-input.component.d.ts","sourceRoot":"","sources":["../../src/components/code-input.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAQ5D,OAAO,0BAA0B,CAAC;AASlC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,cAAc,CAAC;KAClC;CACF;;AAqBD;;;;;;;;;;;;;GAaG;AACH,qBACa,cAAe,SAAQ,mBAEnC;;IACC,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAAwC;IAEzE,OAAO,CAAC,QAAQ,CAAC,OAAO,CAA4C;IAGpE,OAAO,CAAC,aAAa,CAAgC;IAGrD,KAAK,SAAM;IAGX,KAAK,SAAM;IAGX,IAAI,EAAE,QAAQ,GAAG,MAAM,CAAU;IAEjC;;OAEG;IAEH,SAAS,EAAE,SAAS,GAAG,MAAM,CAAU;IAEvC;;OAEG;IAEH,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAEhC;;OAEG;IAEH,MAAM,SAAK;IAGX,QAAQ,UAAS;IAEjB;;OAEG;IAEH,SAAS,UAAS;IAElB;;OAEG;IAEH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IAEH,cAAc,SAAM;IAEpB;;OAEG;IAEH,SAAS,UAAS;IAElB;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,OAAO,CAAC,EAAE,MAAM,CAAC;IAGjB,OAAO,CAAC,cAAc,CAAuC;IAE7D,MAAM,KAAK,qBAAqB,qDAO/B;IAED,IAAI,gBAAgB,4BAEnB;IAED,SAAS,CAAC,YAAY,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAIhE,OAAO,CAAC,WAAW;IAOnB,OAAO,CAAC,UAAU;IAMlB,OAAO,CAAC,aAAa;IAgDrB,OAAO,CAAC,WAAW;IAyBnB,OAAO,CAAC,WAAW;IA4BnB,OAAO,CAAC,kBAAkB;IAuB1B,OAAO,CAAC,iBAAiB;IAOzB,KAAK;IAKL,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI;IAOnC,kBAAkB;IAMlB,iBAAiB;IAWR,MAAM;CAiEhB"}

package/dist/components/code-input.js

@@ -189,6 +189,10 @@ let MinidCodeInput = class extends FormControlMixin(
       this.internalValues[index] = chars[index];
     });
   }
+  clear() {
+    this.internalValues = Array(this.length).fill("");
+    this.updateValueAndEmit();
+  }
   focus(options) {
     if (this.inputElements.length > 0) {
       this.inputElements[0].focus(options);

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

@@ -1 +1 @@
-{"version":3,"file":"code-input.js","sources":["../../src/components/code-input.component.ts"],"sourcesContent":["import { css, html, LitElement, PropertyValues } from 'lit';\nimport { customElement, property, queryAll, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { live } from 'lit/directives/live.js';\nimport { watch } from '../internal/watch.ts';\nimport { FormControlMixin } from '../mixins/form-control.mixin.ts';\nimport { styled } from '../mixins/tailwind.mixin.ts';\nimport { HasSlotController } from '../internal/slot.ts';\nimport './icon/icon.component.ts';\nimport {\n  maxLengthValidator,\n  minLengthValidator,\n  patternValidator,\n  requiredValidator,\n} from '../mixins/validators.ts';\nimport { webOtpApiInit } from '../utilities/web-otp-api.ts';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-code-input': MinidCodeInput;\n  }\n}\n\nlet nextUniqueId = 0;\n\nconst styles = [\n  css`\n    :host {\n      display: block;\n    }\n\n    /* Hide increment/decrement buttons on inputs */\n    input[type='number']::-webkit-outer-spin-button,\n    input[type='number']::-webkit-inner-spin-button,\n    input[type='number'] {\n      -webkit-appearance: none;\n      margin: 0;\n      -moz-appearance: textfield !important;\n    }\n  `,\n];\n\n/**\n *\n * @event mid-change - Emitted when a change to the input value is comitted by the user\n * @event mid-input - Emitted when the input element recieves input\n * @event {detail: { validity: ValidityState }} mid-invalid-hide - Emitted when the error message should be hidden\n * @event {detail: { validity: ValidityState }} mid-invalid-show - Emitted when the error message should be shown\n *\n * @slot label - The input's label if you need to use HTML. Alternatively, you can use the `label` attribute.\n *\n * @csspart input-container - The wrapper around the input elements. This can be used to adjust font-size.\n *\n */\n@customElement('mid-code-input')\nexport class MinidCodeInput extends FormControlMixin(\n  styled(LitElement, styles)\n) {\n  private readonly hasSlotControler = new HasSlotController(this, 'label');\n  #skipValueVisualUpdate = false;\n  private readonly labelId = `mid-code-input-label-${nextUniqueId++}`;\n\n  @queryAll('input')\n  private inputElements!: NodeListOf<HTMLInputElement>;\n\n  @property({ reflect: true })\n  value = '';\n\n  @property()\n  label = '';\n\n  @property()\n  type: 'number' | 'text' = 'text';\n\n  /**\n   * For displaying appropriate virtual keyboard\n   */\n  @property()\n  inputmode: 'numeric' | 'text' = 'text';\n\n  /**\n   * Adjusts the font-size of the code inputs\n   */\n  @property()\n  size: 'sm' | 'md' | 'lg' = 'sm';\n\n  /**\n   * Number of input characters or digits\n   */\n  @property({ type: Number })\n  length = 5;\n\n  @property({ type: Boolean })\n  disabled = false;\n\n  /**\n   * Focuses the first input element on page load\n   */\n  @property({ type: Boolean })\n  autofocus = false;\n\n  /**\n   *  The minimum length of input that will be considered valid.\n   */\n  @property({ type: Number })\n  minlength?: number;\n\n  /**\n   * Error message to display when the input is invalid, also activates invalid styling\n   */\n  @property()\n  invalidmessage = '';\n\n  /**\n   * Visually hides `label` (still available for screen readers)\n   */\n  @property({ type: Boolean })\n  hidelabel = false;\n\n  /**\n   * Makes the input required\n   */\n  @property({ type: Boolean })\n  required = false;\n\n  /**\n   * A regular expression pattern to validate input against.\n   */\n  @property()\n  pattern?: string;\n\n  @state()\n  private internalValues = Array<string>(this.length).fill('');\n\n  static get formControlValidators() {\n    return [\n      requiredValidator,\n      maxLengthValidator,\n      minLengthValidator,\n      patternValidator,\n    ];\n  }\n\n  get validationTarget() {\n    return this.inputElements?.length ? this.inputElements[0] : null;\n  }\n\n  protected firstUpdated(_changedProperties: PropertyValues): void {\n    webOtpApiInit(this.renderRoot);\n  }\n\n  private handleFocus(index: number) {\n    return () => {\n      this.inputElements[index].setAttribute('placeholder', '');\n      this.inputElements[index].select();\n    };\n  }\n\n  private handleBlur(index: number) {\n    return () => {\n      this.inputElements[index].setAttribute('placeholder', '○');\n    };\n  }\n\n  private handleKeydown(index: number) {\n    return (event: KeyboardEvent) => {\n      this.internalValues[index] = (event.target as HTMLInputElement).value;\n      this.value = this.internalValues.join('');\n      const input = event.target as HTMLInputElement;\n      const hasModifier =\n        event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;\n\n      if (event.key === 'Backspace') {\n        if (input.value === '' && index > 0) {\n          // If current input is empty, move to previous and clear it\n          this.inputElements[index - 1].focus();\n          this.internalValues[index - 1] = '';\n          this.updateValueAndEmit(true);\n        } else if (input.value !== '') {\n          // If current input has a value, clear it\n          input.value = '';\n          this.internalValues[index] = '';\n          this.updateValueAndEmit(true);\n        }\n      } else if (event.key === 'ArrowLeft') {\n        if (index > 0) {\n          this.inputElements[index - 1].focus();\n        }\n      } else if (event.key === 'ArrowRight') {\n        if (index < this.length - 1) {\n          this.inputElements[index + 1].focus();\n        }\n      } else if (event.key === 'Delete') {\n        // Clear current field without moving\n        input.value = '';\n        this.internalValues[index] = '';\n        this.updateValueAndEmit(true);\n      } else if (event.key === 'Enter' && !hasModifier) {\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        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\n  private handleInput(index: number) {\n    return (event: InputEvent) => {\n      const input = event.target as HTMLInputElement;\n      let inputValue = input.value;\n\n      // Only allow single digit input\n      if (inputValue.length > 1) {\n        inputValue = inputValue.charAt(0);\n        input.value = inputValue; // Correct the input value\n      }\n\n      this.internalValues[index] = inputValue;\n      this.updateValueAndEmit(true);\n\n      // Auto-focus next input if a digit was entered and it's not the last one\n      if (inputValue !== '' && index < this.length - 1) {\n        this.inputElements[index + 1].focus();\n      }\n\n      this.dispatchEvent(\n        new Event('mid-input', { bubbles: true, composed: true })\n      );\n    };\n  }\n\n  private handlePaste(index: number) {\n    return (event: ClipboardEvent) => {\n      event.preventDefault(); // Prevent default paste behavior\n      const pasteData = event.clipboardData?.getData('text').trim();\n\n      if (pasteData) {\n        const pasteChars = pasteData.split('');\n        for (let i = 0; i < this.length; i++) {\n          if (index + i < this.length && pasteChars[i]) {\n            this.internalValues[index + i] = pasteChars[i];\n            // Update the actual input element's value directly as well\n            // if (this.inputElements[index + i]) {\n            //   this.inputElements[index + i].value = pasteChars[i];\n            // }\n          }\n        }\n        this.updateValueAndEmit();\n\n        // Focus the last filled input or the last input if all are filled\n        const lastFilledIndex = Math.min(\n          index + pasteChars.length - 1,\n          this.length - 1\n        );\n        this.inputElements[lastFilledIndex]?.focus();\n      }\n    };\n  }\n\n  private updateValueAndEmit(skipValueUpdate = false) {\n    this.#skipValueVisualUpdate = skipValueUpdate;\n    this.value = this.internalValues.join('');\n    this.dispatchEvent(\n      new Event('mid-change', {\n        bubbles: true,\n        composed: true,\n      })\n    );\n\n    if (\n      this.value.length === this.length &&\n      this.internalValues.every((digit) => digit !== '')\n    ) {\n      this.dispatchEvent(\n        new Event('mid-complete', {\n          bubbles: true,\n          composed: true,\n        })\n      );\n    }\n  }\n\n  private valueVisualUpdate(value: string) {\n    const chars = value.split('');\n    this.internalValues.forEach((_, index) => {\n      this.internalValues[index] = chars[index];\n    });\n  }\n\n  focus(options?: FocusOptions): void {\n    if (this.inputElements.length > 0) {\n      this.inputElements[0].focus(options);\n    }\n  }\n\n  @watch('length')\n  handleLengthChange() {\n    this.internalValues = Array(this.length).fill('');\n    this.valueVisualUpdate(this.value);\n  }\n\n  @watch('value')\n  handleValueChange() {\n    this.setValue(this.value);\n\n    if (this.#skipValueVisualUpdate) {\n      this.#skipValueVisualUpdate = false;\n      return;\n    }\n\n    this.valueVisualUpdate(this.value);\n  }\n\n  override render() {\n    const hasLabelSlot = this.hasSlotControler.test('label');\n    const hasLabel = !!this.label || !!hasLabelSlot;\n    return html`\n      <label\n        id=\"${this.labelId}\"\n        class=\"${classMap({\n          'sr-only': this.hidelabel || !hasLabel,\n          'opacity-disabled': this.disabled,\n        })} mb-2 block items-center gap-1 font-medium\"\n      >\n        <slot name=\"label\"> ${this.label} </slot>\n      </label>\n      <div\n        part=\"input-container\"\n        class=\"${classMap({\n          'text-heading-sm': this.size === 'sm',\n          'text-heading-md': this.size === 'md',\n          'text-heading-lg': this.size === 'lg',\n        })} inline-flex gap-2\"\n      >\n        ${this.internalValues.map((value, index) => {\n          return html`\n            <input\n              .value=\"${live(value || '')}\"\n              id=\"mid-code-input-${index}\"\n              class=\"${classMap({\n                border: !this.invalidmessage,\n                'border-2': this.invalidmessage,\n                'border-neutral': !this.invalidmessage,\n                'border-danger': this.invalidmessage,\n                'bg-neutral': !this.invalidmessage,\n                'bg-danger-tinted': this.invalidmessage,\n                'placeholder:text-neutral-surface-active': !this.invalidmessage,\n                'placeholder:text-danger-surface-active': this.invalidmessage,\n              })} focus:focus-ring-sm disabled:opacity-disabled size-9 rounded-md text-center font-mono disabled:cursor-not-allowed\"\n              type=\"${this.type}\"\n              placeholder=\"○\"\n              aria-labelledby=\"${this.labelId}\"\n              size=\"1\"\n              ?autofocus=\"${!index && this.autofocus}\"\n              ?disabled=\"${this.disabled}\"\n              inputmode=\"${this.inputmode}\"\n              @keydown=\"${this.handleKeydown(index)}\"\n              @input=\"${this.handleInput(index)}\"\n              @paste=\"${this.handlePaste(index)}\"\n              @focus=\"${this.handleFocus(index)}\"\n              @blur=\"${this.handleBlur(index)}\"\n            />\n          `;\n        })}\n      </div>\n      <div\n        class=\"text-danger-subtle mt-2 flex gap-1\"\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    `;\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"code-input.js","sources":["../../src/components/code-input.component.ts"],"sourcesContent":["import { css, html, LitElement, PropertyValues } from 'lit';\nimport { customElement, property, queryAll, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { live } from 'lit/directives/live.js';\nimport { watch } from '../internal/watch.ts';\nimport { FormControlMixin } from '../mixins/form-control.mixin.ts';\nimport { styled } from '../mixins/tailwind.mixin.ts';\nimport { HasSlotController } from '../internal/slot.ts';\nimport './icon/icon.component.ts';\nimport {\n  maxLengthValidator,\n  minLengthValidator,\n  patternValidator,\n  requiredValidator,\n} from '../mixins/validators.ts';\nimport { webOtpApiInit } from '../utilities/web-otp-api.ts';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-code-input': MinidCodeInput;\n  }\n}\n\nlet nextUniqueId = 0;\n\nconst styles = [\n  css`\n    :host {\n      display: block;\n    }\n\n    /* Hide increment/decrement buttons on inputs */\n    input[type='number']::-webkit-outer-spin-button,\n    input[type='number']::-webkit-inner-spin-button,\n    input[type='number'] {\n      -webkit-appearance: none;\n      margin: 0;\n      -moz-appearance: textfield !important;\n    }\n  `,\n];\n\n/**\n *\n * @event mid-change - Emitted when a change to the input value is comitted by the user\n * @event mid-input - Emitted when the input element recieves input\n * @event {detail: { validity: ValidityState }} mid-invalid-hide - Emitted when the error message should be hidden\n * @event {detail: { validity: ValidityState }} mid-invalid-show - Emitted when the error message should be shown\n *\n * @slot label - The input's label if you need to use HTML. Alternatively, you can use the `label` attribute.\n *\n * @csspart input-container - The wrapper around the input elements. This can be used to adjust font-size.\n *\n * @method focus - Focuses the first input element\n * @method clear - Clears all input elements\n */\n@customElement('mid-code-input')\nexport class MinidCodeInput extends FormControlMixin(\n  styled(LitElement, styles)\n) {\n  private readonly hasSlotControler = new HasSlotController(this, 'label');\n  #skipValueVisualUpdate = false;\n  private readonly labelId = `mid-code-input-label-${nextUniqueId++}`;\n\n  @queryAll('input')\n  private inputElements!: NodeListOf<HTMLInputElement>;\n\n  @property({ reflect: true })\n  value = '';\n\n  @property()\n  label = '';\n\n  @property()\n  type: 'number' | 'text' = 'text';\n\n  /**\n   * For displaying appropriate virtual keyboard\n   */\n  @property()\n  inputmode: 'numeric' | 'text' = 'text';\n\n  /**\n   * Adjusts the font-size of the code inputs\n   */\n  @property()\n  size: 'sm' | 'md' | 'lg' = 'sm';\n\n  /**\n   * Number of input characters or digits\n   */\n  @property({ type: Number })\n  length = 5;\n\n  @property({ type: Boolean })\n  disabled = false;\n\n  /**\n   * Focuses the first input element on page load\n   */\n  @property({ type: Boolean })\n  autofocus = false;\n\n  /**\n   *  The minimum length of input that will be considered valid.\n   */\n  @property({ type: Number })\n  minlength?: number;\n\n  /**\n   * Error message to display when the input is invalid, also activates invalid styling\n   */\n  @property()\n  invalidmessage = '';\n\n  /**\n   * Visually hides `label` (still available for screen readers)\n   */\n  @property({ type: Boolean })\n  hidelabel = false;\n\n  /**\n   * Makes the input required\n   */\n  @property({ type: Boolean })\n  required = false;\n\n  /**\n   * A regular expression pattern to validate input against.\n   */\n  @property()\n  pattern?: string;\n\n  @state()\n  private internalValues = Array<string>(this.length).fill('');\n\n  static get formControlValidators() {\n    return [\n      requiredValidator,\n      maxLengthValidator,\n      minLengthValidator,\n      patternValidator,\n    ];\n  }\n\n  get validationTarget() {\n    return this.inputElements?.length ? this.inputElements[0] : null;\n  }\n\n  protected firstUpdated(_changedProperties: PropertyValues): void {\n    webOtpApiInit(this.renderRoot);\n  }\n\n  private handleFocus(index: number) {\n    return () => {\n      this.inputElements[index].setAttribute('placeholder', '');\n      this.inputElements[index].select();\n    };\n  }\n\n  private handleBlur(index: number) {\n    return () => {\n      this.inputElements[index].setAttribute('placeholder', '○');\n    };\n  }\n\n  private handleKeydown(index: number) {\n    return (event: KeyboardEvent) => {\n      this.internalValues[index] = (event.target as HTMLInputElement).value;\n      this.value = this.internalValues.join('');\n      const input = event.target as HTMLInputElement;\n      const hasModifier =\n        event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;\n\n      if (event.key === 'Backspace') {\n        if (input.value === '' && index > 0) {\n          // If current input is empty, move to previous and clear it\n          this.inputElements[index - 1].focus();\n          this.internalValues[index - 1] = '';\n          this.updateValueAndEmit(true);\n        } else if (input.value !== '') {\n          // If current input has a value, clear it\n          input.value = '';\n          this.internalValues[index] = '';\n          this.updateValueAndEmit(true);\n        }\n      } else if (event.key === 'ArrowLeft') {\n        if (index > 0) {\n          this.inputElements[index - 1].focus();\n        }\n      } else if (event.key === 'ArrowRight') {\n        if (index < this.length - 1) {\n          this.inputElements[index + 1].focus();\n        }\n      } else if (event.key === 'Delete') {\n        // Clear current field without moving\n        input.value = '';\n        this.internalValues[index] = '';\n        this.updateValueAndEmit(true);\n      } else if (event.key === 'Enter' && !hasModifier) {\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        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\n  private handleInput(index: number) {\n    return (event: InputEvent) => {\n      const input = event.target as HTMLInputElement;\n      let inputValue = input.value;\n\n      // Only allow single digit input\n      if (inputValue.length > 1) {\n        inputValue = inputValue.charAt(0);\n        input.value = inputValue; // Correct the input value\n      }\n\n      this.internalValues[index] = inputValue;\n      this.updateValueAndEmit(true);\n\n      // Auto-focus next input if a digit was entered and it's not the last one\n      if (inputValue !== '' && index < this.length - 1) {\n        this.inputElements[index + 1].focus();\n      }\n\n      this.dispatchEvent(\n        new Event('mid-input', { bubbles: true, composed: true })\n      );\n    };\n  }\n\n  private handlePaste(index: number) {\n    return (event: ClipboardEvent) => {\n      event.preventDefault(); // Prevent default paste behavior\n      const pasteData = event.clipboardData?.getData('text').trim();\n\n      if (pasteData) {\n        const pasteChars = pasteData.split('');\n        for (let i = 0; i < this.length; i++) {\n          if (index + i < this.length && pasteChars[i]) {\n            this.internalValues[index + i] = pasteChars[i];\n            // Update the actual input element's value directly as well\n            // if (this.inputElements[index + i]) {\n            //   this.inputElements[index + i].value = pasteChars[i];\n            // }\n          }\n        }\n        this.updateValueAndEmit();\n\n        // Focus the last filled input or the last input if all are filled\n        const lastFilledIndex = Math.min(\n          index + pasteChars.length - 1,\n          this.length - 1\n        );\n        this.inputElements[lastFilledIndex]?.focus();\n      }\n    };\n  }\n\n  private updateValueAndEmit(skipValueUpdate = false) {\n    this.#skipValueVisualUpdate = skipValueUpdate;\n    this.value = this.internalValues.join('');\n    this.dispatchEvent(\n      new Event('mid-change', {\n        bubbles: true,\n        composed: true,\n      })\n    );\n\n    if (\n      this.value.length === this.length &&\n      this.internalValues.every((digit) => digit !== '')\n    ) {\n      this.dispatchEvent(\n        new Event('mid-complete', {\n          bubbles: true,\n          composed: true,\n        })\n      );\n    }\n  }\n\n  private valueVisualUpdate(value: string) {\n    const chars = value.split('');\n    this.internalValues.forEach((_, index) => {\n      this.internalValues[index] = chars[index];\n    });\n  }\n\n  clear() {\n    this.internalValues = Array(this.length).fill('');\n    this.updateValueAndEmit();\n  }\n\n  focus(options?: FocusOptions): void {\n    if (this.inputElements.length > 0) {\n      this.inputElements[0].focus(options);\n    }\n  }\n\n  @watch('length')\n  handleLengthChange() {\n    this.internalValues = Array(this.length).fill('');\n    this.valueVisualUpdate(this.value);\n  }\n\n  @watch('value')\n  handleValueChange() {\n    this.setValue(this.value);\n\n    if (this.#skipValueVisualUpdate) {\n      this.#skipValueVisualUpdate = false;\n      return;\n    }\n\n    this.valueVisualUpdate(this.value);\n  }\n\n  override render() {\n    const hasLabelSlot = this.hasSlotControler.test('label');\n    const hasLabel = !!this.label || !!hasLabelSlot;\n    return html`\n      <label\n        id=\"${this.labelId}\"\n        class=\"${classMap({\n          'sr-only': this.hidelabel || !hasLabel,\n          'opacity-disabled': this.disabled,\n        })} mb-2 block items-center gap-1 font-medium\"\n      >\n        <slot name=\"label\"> ${this.label} </slot>\n      </label>\n      <div\n        part=\"input-container\"\n        class=\"${classMap({\n          'text-heading-sm': this.size === 'sm',\n          'text-heading-md': this.size === 'md',\n          'text-heading-lg': this.size === 'lg',\n        })} inline-flex gap-2\"\n      >\n        ${this.internalValues.map((value, index) => {\n          return html`\n            <input\n              .value=\"${live(value || '')}\"\n              id=\"mid-code-input-${index}\"\n              class=\"${classMap({\n                border: !this.invalidmessage,\n                'border-2': this.invalidmessage,\n                'border-neutral': !this.invalidmessage,\n                'border-danger': this.invalidmessage,\n                'bg-neutral': !this.invalidmessage,\n                'bg-danger-tinted': this.invalidmessage,\n                'placeholder:text-neutral-surface-active': !this.invalidmessage,\n                'placeholder:text-danger-surface-active': this.invalidmessage,\n              })} focus:focus-ring-sm disabled:opacity-disabled size-9 rounded-md text-center font-mono disabled:cursor-not-allowed\"\n              type=\"${this.type}\"\n              placeholder=\"○\"\n              aria-labelledby=\"${this.labelId}\"\n              size=\"1\"\n              ?autofocus=\"${!index && this.autofocus}\"\n              ?disabled=\"${this.disabled}\"\n              inputmode=\"${this.inputmode}\"\n              @keydown=\"${this.handleKeydown(index)}\"\n              @input=\"${this.handleInput(index)}\"\n              @paste=\"${this.handlePaste(index)}\"\n              @focus=\"${this.handleFocus(index)}\"\n              @blur=\"${this.handleBlur(index)}\"\n            />\n          `;\n        })}\n      </div>\n      <div\n        class=\"text-danger-subtle mt-2 flex gap-1\"\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    `;\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/designsystemet-tailwind.css

@@ -348,19 +348,7 @@
   }
 
   .mid-menu-item {
-    @apply bg-neutral block w-full rounded border-l-[5px] border-transparent px-3 py-2 font-medium;
-  }
-
-  .mid-menu-item:hover {
-    @apply border-accent-base bg-accent-tinted;
-  }
-
-  .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;
+    @apply active:border-accent-base active:bg-accent-tinted focus-visible:border-accent-base focus-visible:bg-accent-tinted hover:border-accent-base hover:bg-accent-tinted bg-neutral block w-full rounded border-l-[5px] border-transparent px-3 py-2 font-medium outline-0;
   }
 
   .mid-button {
@@ -368,6 +356,10 @@
   }
 
   .mid-label {
-    @apply inline-block font-medium;
+    @apply block font-medium;
+  }
+
+  .mid-link {
+    @apply text-accent-subtle visited:text-link-visited focus-visible:bg-focus-outer hover:text-accent inline-flex items-center gap-2 underline decoration-[.0625rem] underline-offset-[.27em] outline-0 hover:decoration-[.125rem] focus-visible:text-white;
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@felleslosninger/minid-elements",
-  "version": "0.0.127",
+  "version": "0.0.129",
   "description": "MinID Web Components",
   "author": "Digitaliseringsdirektoratet",
   "license": "MIT",