dap-design-system 0.62.4 → 0.63.1

package/dist/components/code-puncher/code-puncher-slot.component.js

@@ -1,22 +1,18 @@
-import { ContextConsumer as p } from "../../node_modules/@lit/context/lib/controllers/context-consumer.js";
+import { ContextConsumer as p } from "@lit/context";
 import { clsx as u } from "../../node_modules/clsx/dist/clsx.js";
-import "../../node_modules/@lit/reactive-element/reactive-element.js";
-import { nothing as c, html as h } from "../../node_modules/lit-html/lit-html.js";
-import "../../node_modules/lit-element/lit-element.js";
-import { state as a } from "../../node_modules/@lit/reactive-element/decorators/state.js";
-import { query as x } from "../../node_modules/@lit/reactive-element/decorators/query.js";
-import { DdsElement as f } from "../../internal/dds-hu-element.js";
+import { unsafeCSS as x, nothing as h, html as o } from "lit";
+import { query as f, state as d } from "lit/decorators.js";
+import { DdsElement as m } from "../../internal/dds-hu-element.js";
 import "../../localization/localization.js";
-import { codePuncherContext as m } from "./code-puncher.context.js";
-import v from "./code-puncher-slot.scss.js";
-import { t as $ } from "../../node_modules/i18next/dist/esm/i18next.js";
-import { unsafeCSS as b } from "../../node_modules/@lit/reactive-element/css-tag.js";
-var y = Object.defineProperty, n = (d, t, s, l) => {
-  for (var e = void 0, o = d.length - 1, _; o >= 0; o--)
-    (_ = d[o]) && (e = _(t, s, e) || e);
-  return e && y(t, s, e), e;
+import { codePuncherContext as v } from "./code-puncher.context.js";
+import b from "./code-puncher-slot.scss.js";
+import { t as y } from "../../node_modules/i18next/dist/esm/i18next.js";
+var $ = Object.defineProperty, n = (l, t, e, a) => {
+  for (var s = void 0, c = l.length - 1, _; c >= 0; c--)
+    (_ = l[c]) && (s = _(t, e, s) || s);
+  return s && $(t, e, s), s;
 };
-const r = class r extends f {
+const r = class r extends m {
   constructor() {
     super(...arguments), this._index = -1, this._isActive = !1, this._registered = !1, this._onInput = () => {
       if (!this._input || !this._ctx) return;
@@ -27,9 +23,9 @@ const r = class r extends f {
     }, this._handlePaste = (t) => {
       this._ctx && this._ctx.handlePaste(t);
     }, this._onFocus = () => {
-      var s;
+      var e;
       if (!this._ctx) return;
-      this._isActive = !0, (s = this._input) != null && s.value && this._input.select();
+      this._isActive = !0, (e = this._input) != null && e.value && this._input.select();
       const t = this.closest("dap-ds-code-puncher");
       t == null || t.setActiveIndex(this._index), this.requestUpdate();
     }, this._onBlur = () => {
@@ -38,7 +34,7 @@ const r = class r extends f {
   }
   connectedCallback() {
     super.connectedCallback(), this._consumer = new p(this, {
-      context: m,
+      context: v,
       subscribe: !0,
       callback: (t) => {
         this._ctx = t, t && !this._registered && (this._index = t.registerSlot(this), this._registered = !0), this.requestUpdate();
@@ -53,16 +49,16 @@ const r = class r extends f {
   }
   // Get properties from context
   get disabled() {
-    var t, s;
-    return (s = (t = this._ctx) == null ? void 0 : t.disabled) != null ? s : !1;
+    var t, e;
+    return (e = (t = this._ctx) == null ? void 0 : t.disabled) != null ? e : !1;
   }
   get readonly() {
-    var t, s;
-    return (s = (t = this._ctx) == null ? void 0 : t.readonly) != null ? s : !1;
+    var t, e;
+    return (e = (t = this._ctx) == null ? void 0 : t.readonly) != null ? e : !1;
   }
   get size() {
-    var t, s;
-    return (s = (t = this._ctx) == null ? void 0 : t.size) != null ? s : "sm";
+    var t, e;
+    return (e = (t = this._ctx) == null ? void 0 : t.size) != null ? e : "sm";
   }
   // Focus the internal input
   focus() {
@@ -71,9 +67,9 @@ const r = class r extends f {
   }
   render() {
     if (!this._ctx || this._index < 0)
-      return c;
-    const t = this._ctx.getCharAt(this._index), s = !t && this._ctx.placeholder && !this._isActive, l = this._ctx.slotCount;
-    return h`
+      return h;
+    const t = this._ctx.getCharAt(this._index), e = !t && this._ctx.placeholder && !this._isActive, a = this._ctx.slotCount;
+    return o`
       <div
         part="base"
         class=${u("code-puncher-slot", `code-puncher-slot--${this.size}`, {
@@ -99,36 +95,36 @@ const r = class r extends f {
           ?disabled=${this.disabled}
           ?readonly=${this.readonly}
           autocomplete=${this._index === 0 ? this._ctx.autocomplete : "off"}
-          aria-label=${$("code-puncher.slot.aria-label", {
+          aria-label=${y("code-puncher.slot.aria-label", {
       index: this._index + 1,
-      count: l
+      count: a
     })}
           @input=${this._onInput}
           @keydown=${this._onKeydown}
           @focus=${this._onFocus}
           @blur=${this._onBlur}
           @paste=${this._handlePaste} />
-        ${s ? h`<span class="code-puncher-slot__placeholder"
+        ${e ? o`<span class="code-puncher-slot__placeholder"
               >${this._ctx.placeholder}</span
-            >` : c}
-        ${this._isActive && !t ? h`<span class="code-puncher-slot__caret"></span>` : c}
+            >` : h}
+        ${this._isActive && !t ? o`<span class="code-puncher-slot__caret"></span>` : h}
       </div>
     `;
   }
 };
-r.tagName = "dap-ds-code-puncher-slot", r.styles = b(v);
+r.tagName = "dap-ds-code-puncher-slot", r.styles = x(b);
 let i = r;
 n([
-  x("#input")
+  f("#input")
 ], i.prototype, "_input");
 n([
-  a()
+  d()
 ], i.prototype, "_index");
 n([
-  a()
+  d()
 ], i.prototype, "_isActive");
 n([
-  a()
+  d()
 ], i.prototype, "_registered");
 export {
   i as default

package/dist/components/code-puncher/code-puncher-slot.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"code-puncher-slot.component.js","sources":["../../../src/components/code-puncher/code-puncher-slot.component.ts"],"sourcesContent":["import { ContextConsumer } from '@lit/context'\nimport clsx from 'clsx'\nimport { html, nothing, unsafeCSS } from 'lit'\nimport { query, state } from 'lit/decorators.js'\n\nimport { DdsElement } from '@/internal/dds-hu-element'\nimport { t } from '@/localization/localization'\n\nimport { CodePuncherContext, codePuncherContext } from './code-puncher.context'\nimport styles from './code-puncher-slot.scss?inline'\n\n/**\n * `dap-ds-code-puncher-slot`\n * @summary Individual digit input slot for code puncher.\n * @element dap-ds-code-puncher-slot\n * @title - Code puncher slot\n *\n * @csspart base - The slot container.\n * @csspart input - The input element.\n */\nexport default class DapDSCodePuncherSlot extends DdsElement {\n  static tagName = 'dap-ds-code-puncher-slot'\n\n  static readonly styles = unsafeCSS(styles)\n\n  // Context consumer - kept alive to maintain subscription\n  // @ts-expect-error - Consumer is needed to maintain subscription, but not directly accessed\n  private _consumer!: ContextConsumer<typeof codePuncherContext, this>\n  private _ctx: CodePuncherContext | undefined\n\n  @query('#input') private _input!: HTMLInputElement\n\n  @state() private _index = -1\n  @state() private _isActive = false\n  @state() private _registered = false\n\n  connectedCallback(): void {\n    super.connectedCallback()\n    // Create context consumer\n    this._consumer = new ContextConsumer(this, {\n      context: codePuncherContext,\n      subscribe: true,\n      callback: ctx => {\n        this._ctx = ctx\n        // Register slot when context first becomes available\n        if (ctx && !this._registered) {\n          this._index = ctx.registerSlot(this)\n          this._registered = true\n        }\n        this.requestUpdate()\n      },\n    })\n  }\n\n  disconnectedCallback(): void {\n    if (this._ctx && this._registered) {\n      this._ctx.unregisterSlot(this)\n      this._registered = false\n    }\n    super.disconnectedCallback()\n  }\n\n  protected willUpdate(_changedProperties: Map<string, unknown>): void {\n    super.willUpdate(_changedProperties)\n    // Update active state from context\n    if (this._ctx) {\n      this._isActive = this._ctx.activeIndex === this._index\n    }\n  }\n\n  // Get properties from context\n  get disabled(): boolean {\n    return this._ctx?.disabled ?? false\n  }\n\n  get readonly(): boolean {\n    return this._ctx?.readonly ?? false\n  }\n\n  get size(): 'xs' | 'sm' | 'lg' {\n    return (this._ctx?.size as 'xs' | 'sm' | 'lg') ?? 'sm'\n  }\n\n  // Focus the internal input\n  focus(): void {\n    this._input?.focus()\n  }\n\n  // Input handler to validate and notify parent\n  private _onInput = (): void => {\n    if (!this._input || !this._ctx) return\n\n    const char = this._input.value\n\n    if (char === '') {\n      this._ctx.setCharAt(this._index, '')\n    } else if (this._ctx.pattern.test(char)) {\n      this._ctx.setCharAt(this._index, char)\n      // Auto-advance to next slot\n      if (this._index < this._ctx.slotCount - 1) {\n        this._ctx.focusSlot(this._index + 1)\n      }\n    } else {\n      // Reject invalid character, restore previous value\n      this._input.value = this._ctx.getCharAt(this._index)\n    }\n  }\n\n  // Keydown handler for navigation\n  private _onKeydown = (event: KeyboardEvent): void => {\n    if (!this._ctx) return\n    this._ctx.handleKeydown(this._index, event)\n  }\n\n  // Handle paste at slot level\n  private _handlePaste = (event: ClipboardEvent): void => {\n    if (!this._ctx) return\n    this._ctx.handlePaste(event)\n  }\n\n  // Focus handler\n  private _onFocus = (): void => {\n    if (!this._ctx) return\n    this._isActive = true\n    // Select existing content so typing replaces it\n    if (this._input?.value) {\n      this._input.select()\n    }\n    // Notify parent of focus\n    const parent = this.closest('dap-ds-code-puncher') as HTMLElement & {\n      setActiveIndex: (i: number) => void\n    }\n    parent?.setActiveIndex(this._index)\n    this.requestUpdate()\n  }\n\n  // Blur handler\n  private _onBlur = (): void => {\n    this._isActive = false\n    this.requestUpdate()\n  }\n\n  render() {\n    if (!this._ctx || this._index < 0) {\n      return nothing\n    }\n\n    const char = this._ctx.getCharAt(this._index)\n    const showPlaceholder = !char && this._ctx.placeholder && !this._isActive\n    const slotCount = this._ctx.slotCount\n\n    return html`\n      <div\n        part=\"base\"\n        class=${clsx('code-puncher-slot', `code-puncher-slot--${this.size}`, {\n          'code-puncher-slot--filled': !!char,\n        })}>\n        <input\n          id=\"input\"\n          part=\"input\"\n          class=${clsx(\n            'code-puncher-slot__input',\n            `code-puncher-slot__input--${this.size}`,\n            {\n              'code-puncher-slot__input--disabled': this.disabled,\n              'code-puncher-slot__input--readonly': this.readonly,\n              'code-puncher-slot__input--success':\n                this._ctx.status === 'success',\n              'code-puncher-slot__input--error': this._ctx.status === 'error',\n            },\n          )}\n          type=${this._ctx.mask ? 'password' : 'text'}\n          inputmode=\"numeric\"\n          maxlength=\"1\"\n          .value=${char}\n          ?disabled=${this.disabled}\n          ?readonly=${this.readonly}\n          autocomplete=${(this._index === 0\n            ? this._ctx.autocomplete\n            : 'off') as any}\n          aria-label=${t('code-puncher.slot.aria-label', {\n            index: this._index + 1,\n            count: slotCount,\n          })}\n          @input=${this._onInput}\n          @keydown=${this._onKeydown}\n          @focus=${this._onFocus}\n          @blur=${this._onBlur}\n          @paste=${this._handlePaste} />\n        ${showPlaceholder\n          ? html`<span class=\"code-puncher-slot__placeholder\"\n              >${this._ctx.placeholder}</span\n            >`\n          : nothing}\n        ${this._isActive && !char\n          ? html`<span class=\"code-puncher-slot__caret\"></span>`\n          : nothing}\n      </div>\n    `\n  }\n}\n"],"names":["_DapDSCodePuncherSlot","DdsElement","char","event","_a","parent","ContextConsumer","codePuncherContext","ctx","_changedProperties","_b","nothing","showPlaceholder","slotCount","html","clsx","t","unsafeCSS","styles","DapDSCodePuncherSlot","__decorateClass","query","state"],"mappings":"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"}
+{"version":3,"file":"code-puncher-slot.component.js","sources":["../../../src/components/code-puncher/code-puncher-slot.component.ts"],"sourcesContent":["import { ContextConsumer } from '@lit/context'\nimport clsx from 'clsx'\nimport { html, nothing, unsafeCSS } from 'lit'\nimport { query, state } from 'lit/decorators.js'\n\nimport { DdsElement } from '@/internal/dds-hu-element'\nimport { t } from '@/localization/localization'\n\nimport { CodePuncherContext, codePuncherContext } from './code-puncher.context'\nimport styles from './code-puncher-slot.scss?inline'\n\n/**\n * `dap-ds-code-puncher-slot`\n * @summary Individual digit input slot for code puncher.\n * @element dap-ds-code-puncher-slot\n * @title - Code puncher slot\n *\n * @csspart base - The slot container.\n * @csspart input - The input element.\n */\nexport default class DapDSCodePuncherSlot extends DdsElement {\n  static tagName = 'dap-ds-code-puncher-slot'\n\n  static readonly styles = unsafeCSS(styles)\n\n  // Context consumer - kept alive to maintain subscription\n  // @ts-expect-error - Consumer is needed to maintain subscription, but not directly accessed\n  private _consumer!: ContextConsumer<typeof codePuncherContext, this>\n  private _ctx: CodePuncherContext | undefined\n\n  @query('#input') private _input!: HTMLInputElement\n\n  @state() private _index = -1\n  @state() private _isActive = false\n  @state() private _registered = false\n\n  connectedCallback(): void {\n    super.connectedCallback()\n    // Create context consumer\n    this._consumer = new ContextConsumer(this, {\n      context: codePuncherContext,\n      subscribe: true,\n      callback: ctx => {\n        this._ctx = ctx\n        // Register slot when context first becomes available\n        if (ctx && !this._registered) {\n          this._index = ctx.registerSlot(this)\n          this._registered = true\n        }\n        this.requestUpdate()\n      },\n    })\n  }\n\n  disconnectedCallback(): void {\n    if (this._ctx && this._registered) {\n      this._ctx.unregisterSlot(this)\n      this._registered = false\n    }\n    super.disconnectedCallback()\n  }\n\n  protected willUpdate(_changedProperties: Map<string, unknown>): void {\n    super.willUpdate(_changedProperties)\n    // Update active state from context\n    if (this._ctx) {\n      this._isActive = this._ctx.activeIndex === this._index\n    }\n  }\n\n  // Get properties from context\n  get disabled(): boolean {\n    return this._ctx?.disabled ?? false\n  }\n\n  get readonly(): boolean {\n    return this._ctx?.readonly ?? false\n  }\n\n  get size(): 'xs' | 'sm' | 'lg' {\n    return (this._ctx?.size as 'xs' | 'sm' | 'lg') ?? 'sm'\n  }\n\n  // Focus the internal input\n  focus(): void {\n    this._input?.focus()\n  }\n\n  // Input handler to validate and notify parent\n  private _onInput = (): void => {\n    if (!this._input || !this._ctx) return\n\n    const char = this._input.value\n\n    if (char === '') {\n      this._ctx.setCharAt(this._index, '')\n    } else if (this._ctx.pattern.test(char)) {\n      this._ctx.setCharAt(this._index, char)\n      // Auto-advance to next slot\n      if (this._index < this._ctx.slotCount - 1) {\n        this._ctx.focusSlot(this._index + 1)\n      }\n    } else {\n      // Reject invalid character, restore previous value\n      this._input.value = this._ctx.getCharAt(this._index)\n    }\n  }\n\n  // Keydown handler for navigation\n  private _onKeydown = (event: KeyboardEvent): void => {\n    if (!this._ctx) return\n    this._ctx.handleKeydown(this._index, event)\n  }\n\n  // Handle paste at slot level\n  private _handlePaste = (event: ClipboardEvent): void => {\n    if (!this._ctx) return\n    this._ctx.handlePaste(event)\n  }\n\n  // Focus handler\n  private _onFocus = (): void => {\n    if (!this._ctx) return\n    this._isActive = true\n    // Select existing content so typing replaces it\n    if (this._input?.value) {\n      this._input.select()\n    }\n    // Notify parent of focus\n    const parent = this.closest('dap-ds-code-puncher') as HTMLElement & {\n      setActiveIndex: (i: number) => void\n    }\n    parent?.setActiveIndex(this._index)\n    this.requestUpdate()\n  }\n\n  // Blur handler\n  private _onBlur = (): void => {\n    this._isActive = false\n    this.requestUpdate()\n  }\n\n  render() {\n    if (!this._ctx || this._index < 0) {\n      return nothing\n    }\n\n    const char = this._ctx.getCharAt(this._index)\n    const showPlaceholder = !char && this._ctx.placeholder && !this._isActive\n    const slotCount = this._ctx.slotCount\n\n    return html`\n      <div\n        part=\"base\"\n        class=${clsx('code-puncher-slot', `code-puncher-slot--${this.size}`, {\n          'code-puncher-slot--filled': !!char,\n        })}>\n        <input\n          id=\"input\"\n          part=\"input\"\n          class=${clsx(\n            'code-puncher-slot__input',\n            `code-puncher-slot__input--${this.size}`,\n            {\n              'code-puncher-slot__input--disabled': this.disabled,\n              'code-puncher-slot__input--readonly': this.readonly,\n              'code-puncher-slot__input--success':\n                this._ctx.status === 'success',\n              'code-puncher-slot__input--error': this._ctx.status === 'error',\n            },\n          )}\n          type=${this._ctx.mask ? 'password' : 'text'}\n          inputmode=\"numeric\"\n          maxlength=\"1\"\n          .value=${char}\n          ?disabled=${this.disabled}\n          ?readonly=${this.readonly}\n          autocomplete=${(this._index === 0\n            ? this._ctx.autocomplete\n            : 'off') as any}\n          aria-label=${t('code-puncher.slot.aria-label', {\n            index: this._index + 1,\n            count: slotCount,\n          })}\n          @input=${this._onInput}\n          @keydown=${this._onKeydown}\n          @focus=${this._onFocus}\n          @blur=${this._onBlur}\n          @paste=${this._handlePaste} />\n        ${showPlaceholder\n          ? html`<span class=\"code-puncher-slot__placeholder\"\n              >${this._ctx.placeholder}</span\n            >`\n          : nothing}\n        ${this._isActive && !char\n          ? html`<span class=\"code-puncher-slot__caret\"></span>`\n          : nothing}\n      </div>\n    `\n  }\n}\n"],"names":["_DapDSCodePuncherSlot","DdsElement","char","event","_a","parent","ContextConsumer","codePuncherContext","ctx","_changedProperties","_b","nothing","showPlaceholder","slotCount","html","clsx","t","unsafeCSS","styles","DapDSCodePuncherSlot","__decorateClass","query","state"],"mappings":"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"}

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

@@ -45,6 +45,10 @@ import { default as DapDSTypography } from '../typography/typography.component';
  * @csspart label - The label element.
  * @csspart description - The description element.
  * @csspart feedback - The feedback element.
+ * @csspart tooltip - The tooltip of the code puncher.
+ * @csspart label-base - The base of the label.
+ * @csspart label-required - The required indicator of the label.
+ * @csspart label-optional - The optional indicator of the label.
  */
 export default class DapDSCodePuncher extends GenericFormElement {
     static tagName: string;

package/dist/components/code-puncher/code-puncher.component.js

@@ -1,27 +1,24 @@
-import { ContextProvider as g } from "../../node_modules/@lit/context/lib/controllers/context-provider.js";
-import { clsx as f } from "../../node_modules/clsx/dist/clsx.js";
-import "../../node_modules/@lit/reactive-element/reactive-element.js";
-import { nothing as p, html as h } from "../../node_modules/lit-html/lit-html.js";
-import "../../node_modules/lit-element/lit-element.js";
-import { property as u } from "../../node_modules/@lit/reactive-element/decorators/property.js";
-import { state as _ } from "../../node_modules/@lit/reactive-element/decorators/state.js";
-import { ifDefined as d } from "../../node_modules/lit-html/directives/if-defined.js";
-import { GenericFormElement as v } from "../../internal/mixin/genericFormElement.js";
-import y from "../feedback/feedback.component.js";
-import $ from "../form/form-label/form-label.component.js";
-import k from "../icon/icon.component.js";
-import x from "../icon-button/icon-button.component.js";
-import S from "../tooltip/tooltip.component.js";
-import C from "../typography/typography.component.js";
-import { codePuncherContext as F } from "./code-puncher.context.js";
-import I from "./code-puncher.scss.js";
-import { unsafeCSS as V } from "../../node_modules/@lit/reactive-element/css-tag.js";
-var A = Object.defineProperty, r = (m, t, s, e) => {
-  for (var i = void 0, a = m.length - 1, n; a >= 0; a--)
-    (n = m[a]) && (i = n(t, s, i) || i);
-  return i && A(t, s, i), i;
+import { ContextProvider as g } from "@lit/context";
+import { clsx as m } from "../../node_modules/clsx/dist/clsx.js";
+import { unsafeCSS as v, nothing as _, html as n } from "lit";
+import { property as p, state as u } from "lit/decorators.js";
+import { ifDefined as c } from "lit/directives/if-defined.js";
+import { GenericFormElement as y } from "../../internal/mixin/genericFormElement.js";
+import { formLabelTemplate as k } from "../../internal/templates/formLabel.js";
+import x from "../feedback/feedback.component.js";
+import S from "../form/form-label/form-label.component.js";
+import $ from "../icon/icon.component.js";
+import C from "../icon-button/icon-button.component.js";
+import F from "../tooltip/tooltip.component.js";
+import I from "../typography/typography.component.js";
+import { codePuncherContext as V } from "./code-puncher.context.js";
+import A from "./code-puncher.scss.js";
+var D = Object.defineProperty, r = (f, t, e, s) => {
+  for (var i = void 0, a = f.length - 1, l; a >= 0; a--)
+    (l = f[a]) && (i = l(t, e, i) || i);
+  return i && D(t, e, i), i;
 };
-const c = class c extends v {
+const d = class d extends y {
   constructor() {
     super(...arguments), this.mask = !1, this.pattern = "[0-9]", this.placeholder = "", this.autocomplete = "one-time-code", this._slots = [], this._activeIndex = -1, this._chars = [], this._hasFocus = !1, this._rawValue = "", this._patternRegex = /^[0-9]$/;
   }
@@ -48,7 +45,7 @@ const c = class c extends v {
   }
   connectedCallback() {
     super.connectedCallback(), this._provider = new g(this, {
-      context: F,
+      context: V,
       initialValue: this._getContextValue()
     });
   }
@@ -60,12 +57,12 @@ const c = class c extends v {
   }
   set value(t) {
     if (this._rawValue = t, this._slots.length === 0) return;
-    const s = t.split("");
+    const e = t.split("");
     this._chars = Array.from(
       { length: this._slots.length },
-      (e, i) => {
+      (s, i) => {
         var a;
-        return (a = s[i]) != null ? a : "";
+        return (a = e[i]) != null ? a : "";
       }
     ), this.internals.setFormValue(this.value), this.requestUpdate();
   }
@@ -73,67 +70,67 @@ const c = class c extends v {
     super.willUpdate(t), t.has("pattern") && (this._patternRegex = new RegExp(`^${this.pattern}$`)), this._updateContext();
   }
   _registerSlot(t) {
-    var e;
-    const s = this._slots.length;
-    return this._slots = [...this._slots, t], this._chars = [...this._chars, (e = this._rawValue[s]) != null ? e : ""], this.internals.setFormValue(this.value), this.requestUpdate(), s;
+    var s;
+    const e = this._slots.length;
+    return this._slots = [...this._slots, t], this._chars = [...this._chars, (s = this._rawValue[e]) != null ? s : ""], this.internals.setFormValue(this.value), this.requestUpdate(), e;
   }
   _unregisterSlot(t) {
-    const s = this._slots.indexOf(t);
-    s > -1 && (this._slots = this._slots.filter((e) => e !== t), this._chars = this._chars.filter((e, i) => i !== s), this.requestUpdate());
+    const e = this._slots.indexOf(t);
+    e > -1 && (this._slots = this._slots.filter((s) => s !== t), this._chars = this._chars.filter((s, i) => i !== e), this.requestUpdate());
   }
   _getCharAt(t) {
     return this._chars[t] || "";
   }
-  _setCharAt(t, s) {
-    const e = this.value;
-    this._chars = this._chars.map((i, a) => a === t ? s : i), this.internals.setFormValue(this.value), this.emit("dds-input", { value: this.value, index: t }), this.value !== e && this.emit("dds-change", { value: this.value }), this._chars.length > 0 && this._chars.every((i) => i !== "") && s !== "" && this.emit("dds-complete", { value: this.value }), this.requestUpdate(), this.setValidity();
+  _setCharAt(t, e) {
+    const s = this.value;
+    this._chars = this._chars.map((i, a) => a === t ? e : i), this.internals.setFormValue(this.value), this.emit("dds-input", { value: this.value, index: t }), this.value !== s && this.emit("dds-change", { value: this.value }), this._chars.length > 0 && this._chars.every((i) => i !== "") && e !== "" && this.emit("dds-complete", { value: this.value }), this.requestUpdate(), this.setValidity();
   }
   _focusSlot(t) {
-    var s;
-    t >= 0 && t < this._slots.length && (this._activeIndex = t, (s = this._slots[t]) == null || s.focus(), this.requestUpdate());
+    var e;
+    t >= 0 && t < this._slots.length && (this._activeIndex = t, (e = this._slots[t]) == null || e.focus(), this.requestUpdate());
   }
-  _handleKeydown(t, s) {
-    const e = this._chars[t] || "";
-    switch (s.key) {
+  _handleKeydown(t, e) {
+    const s = this._chars[t] || "";
+    switch (e.key) {
       case "Backspace":
-        e === "" && t > 0 ? (this._setCharAt(t - 1, ""), this._focusSlot(t - 1)) : this._setCharAt(t, ""), s.preventDefault();
+        s === "" && t > 0 ? (this._setCharAt(t - 1, ""), this._focusSlot(t - 1)) : this._setCharAt(t, ""), e.preventDefault();
         break;
       case "Delete":
-        this._setCharAt(t, ""), s.preventDefault();
+        this._setCharAt(t, ""), e.preventDefault();
         break;
       case "ArrowLeft":
-        t > 0 && this._focusSlot(t - 1), s.preventDefault();
+        t > 0 && this._focusSlot(t - 1), e.preventDefault();
         break;
       case "ArrowRight":
-        t < this._slots.length - 1 && this._focusSlot(t + 1), s.preventDefault();
+        t < this._slots.length - 1 && this._focusSlot(t + 1), e.preventDefault();
         break;
       case "Home":
-        this._focusSlot(0), s.preventDefault();
+        this._focusSlot(0), e.preventDefault();
         break;
       case "End":
-        this._focusSlot(this._slots.length - 1), s.preventDefault();
+        this._focusSlot(this._slots.length - 1), e.preventDefault();
         break;
     }
   }
   _handlePaste(t) {
-    var n;
+    var l;
     t.preventDefault();
-    const e = (((n = t.clipboardData) == null ? void 0 : n.getData("text")) || "").replace(/[-·\s]/g, "").split("").filter((l) => this._patternRegex.test(l));
-    e.slice(0, this._slots.length).forEach((l, b) => {
-      this._chars[b] = l;
+    const s = (((l = t.clipboardData) == null ? void 0 : l.getData("text")) || "").replace(/[-·\s]/g, "").split("").filter((h) => this._patternRegex.test(h));
+    s.slice(0, this._slots.length).forEach((h, b) => {
+      this._chars[b] = h;
     }), this.internals.setFormValue(this.value), this.emit("dds-change", { value: this.value });
     const i = Math.min(
-      e.length - 1,
+      s.length - 1,
       this._slots.length - 1
-    ), a = this._chars.findIndex((l) => l === "");
-    a > -1 ? this._focusSlot(a) : this._focusSlot(i), this._chars.every((l) => l !== "") && this.emit("dds-complete", { value: this.value }), this.requestUpdate();
+    ), a = this._chars.findIndex((h) => h === "");
+    a > -1 ? this._focusSlot(a) : this._focusSlot(i), this._chars.every((h) => h !== "") && this.emit("dds-complete", { value: this.value }), this.requestUpdate();
   }
   _handleFocusIn() {
     this._hasFocus || (this._hasFocus = !0, this.emit("dds-focus"));
   }
   _handleFocusOut(t) {
-    const s = t.relatedTarget;
-    this.contains(s) || (this._hasFocus = !1, this._activeIndex = -1, this.emit("dds-blur"), this.requestUpdate());
+    const e = t.relatedTarget;
+    this.contains(e) || (this._hasFocus = !1, this._activeIndex = -1, this.emit("dds-blur"), this.requestUpdate());
   }
   setActiveIndex(t) {
     this._activeIndex = t, this.requestUpdate();
@@ -142,8 +139,8 @@ const c = class c extends v {
     return this._slots[0] || this;
   }
   focus() {
-    const t = this._chars.findIndex((e) => e === ""), s = t > -1 ? t : 0;
-    this._focusSlot(s);
+    const t = this._chars.findIndex((s) => s === ""), e = t > -1 ? t : 0;
+    this._focusSlot(e);
   }
   setValidity() {
     this.required && this._chars.some((t) => t === "") ? this.internals.setValidity(
@@ -153,10 +150,10 @@ const c = class c extends v {
     ) : this.internals.setValidity({});
   }
   render() {
-    return h`
+    return n`
       <div
         part="base"
-        class=${f("code-puncher", `code-puncher--${this.size}`, {
+        class=${m("code-puncher", `code-puncher--${this.size}`, {
       "code-puncher--disabled": this.disabled,
       "code-puncher--readonly": this.readonly,
       "code-puncher--success": this.status === "success",
@@ -164,26 +161,24 @@ const c = class c extends v {
       "code-puncher--focused": this._hasFocus
     })}
         role="group"
-        aria-label=${d(this.label || "Code input")}
+        aria-label=${c(this.label || "Code input")}
         @focusin=${this._handleFocusIn}
         @focusout=${this._handleFocusOut}>
-        ${this.label || this.tooltip ? h`
+        ${this.label || this.tooltip ? n`
               <div class="label-container">
-                ${this.label ? h`<dap-ds-form-label
-                      part="label"
-                      id="label"
-                      .size=${this.size}
-                      .required=${this.required}
-                      .requiredLabel=${this.requiredLabel}
-                      .optional=${this.optional}
-                      .optionalLabel=${this.optionalLabel}
-                      .disabled=${this.disabled}
-                      class=${f("label")}
-                      .noMargin=${!!this.description}
-                      .hideLabel=${this.hideLabel}
-                      label=${d(this.label)}>
-                    </dap-ds-form-label>` : p}
-                ${this.tooltip ? h`<dap-ds-tooltip
+                ${k({
+      label: this.label,
+      id: "label",
+      size: this.size,
+      required: this.required,
+      requiredLabel: this.requiredLabel,
+      optional: this.optional,
+      optionalLabel: this.optionalLabel,
+      disabled: this.disabled,
+      noMargin: !!this.description,
+      hideLabel: this.hideLabel
+    })}
+                ${this.tooltip ? n`<dap-ds-tooltip
                       part="tooltip"
                       content=${this.tooltip}
                       mode="toggle"
@@ -200,19 +195,19 @@ const c = class c extends v {
                           name="information-line"
                           class="info-button"></dap-ds-icon>
                       </dap-ds-icon-button>
-                    </dap-ds-tooltip>` : p}
+                    </dap-ds-tooltip>` : _}
               </div>
-            ` : p}
-        ${this.description ? h`
+            ` : _}
+        ${this.description ? n`
               <dap-ds-typography
                 part="description"
                 variant="description"
-                class=${f("input-description")}
-                size=${d(this.size)}
+                class=${m("input-description")}
+                size=${c(this.size)}
                 id="description">
                 ${this.description}
               </dap-ds-typography>
-            ` : p}
+            ` : _}
         <div part="slots" class="code-puncher__slots">
           <slot></slot>
         </div>
@@ -221,12 +216,12 @@ const c = class c extends v {
     `;
   }
   _renderFeedback() {
-    return h`
+    return n`
       <dap-ds-feedback
         part="feedback"
         role="alert"
-        feedbackType=${d(this.feedbackType)}
-        feedbackSize="${d(this.size)}"
+        feedbackType=${c(this.feedbackType)}
+        feedbackSize="${c(this.size)}"
         .subtle=${this.subtle}
         id="feedback">
         <slot
@@ -240,38 +235,38 @@ const c = class c extends v {
     (t == null ? void 0 : t.target).setAttribute("slot", "icon");
   }
 };
-c.tagName = "dap-ds-code-puncher", c.dependencies = {
-  "dap-ds-form-label": $,
-  "dap-ds-tooltip": S,
-  "dap-ds-icon-button": x,
-  "dap-ds-icon": k,
-  "dap-ds-typography": C,
-  "dap-ds-feedback": y
-}, c.styles = V(I);
-let o = c;
+d.tagName = "dap-ds-code-puncher", d.dependencies = {
+  "dap-ds-form-label": S,
+  "dap-ds-tooltip": F,
+  "dap-ds-icon-button": C,
+  "dap-ds-icon": $,
+  "dap-ds-typography": I,
+  "dap-ds-feedback": x
+}, d.styles = v(A);
+let o = d;
 r([
-  u({ type: Boolean, reflect: !0 })
+  p({ type: Boolean, reflect: !0 })
 ], o.prototype, "mask");
 r([
-  u()
+  p()
 ], o.prototype, "pattern");
 r([
-  u()
+  p()
 ], o.prototype, "placeholder");
 r([
-  u()
+  p()
 ], o.prototype, "autocomplete");
 r([
-  _()
+  u()
 ], o.prototype, "_slots");
 r([
-  _()
+  u()
 ], o.prototype, "_activeIndex");
 r([
-  _()
+  u()
 ], o.prototype, "_chars");
 r([
-  _()
+  u()
 ], o.prototype, "_hasFocus");
 export {
   o as default