dap-design-system 0.60.2 → 0.61.0

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

@@ -0,0 +1,136 @@
+import { ContextConsumer as p } from "../../node_modules/@lit/context/lib/controllers/context-consumer.js";
+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 "../../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;
+};
+const r = class r extends f {
+  constructor() {
+    super(...arguments), this._index = -1, this._isActive = !1, this._registered = !1, this._onInput = () => {
+      if (!this._input || !this._ctx) return;
+      const t = this._input.value;
+      t === "" ? this._ctx.setCharAt(this._index, "") : this._ctx.pattern.test(t) ? (this._ctx.setCharAt(this._index, t), this._index < this._ctx.slotCount - 1 && this._ctx.focusSlot(this._index + 1)) : this._input.value = this._ctx.getCharAt(this._index);
+    }, this._onKeydown = (t) => {
+      this._ctx && this._ctx.handleKeydown(this._index, t);
+    }, this._handlePaste = (t) => {
+      this._ctx && this._ctx.handlePaste(t);
+    }, this._onFocus = () => {
+      var s;
+      if (!this._ctx) return;
+      this._isActive = !0, (s = this._input) != null && s.value && this._input.select();
+      const t = this.closest("dap-ds-code-puncher");
+      t == null || t.setActiveIndex(this._index), this.requestUpdate();
+    }, this._onBlur = () => {
+      this._isActive = !1, this.requestUpdate();
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), this._consumer = new p(this, {
+      context: m,
+      subscribe: !0,
+      callback: (t) => {
+        this._ctx = t, t && !this._registered && (this._index = t.registerSlot(this), this._registered = !0), this.requestUpdate();
+      }
+    });
+  }
+  disconnectedCallback() {
+    this._ctx && this._registered && (this._ctx.unregisterSlot(this), this._registered = !1), super.disconnectedCallback();
+  }
+  willUpdate(t) {
+    super.willUpdate(t), this._ctx && (this._isActive = this._ctx.activeIndex === this._index);
+  }
+  // Get properties from context
+  get disabled() {
+    var t, s;
+    return (s = (t = this._ctx) == null ? void 0 : t.disabled) != null ? s : !1;
+  }
+  get readonly() {
+    var t, s;
+    return (s = (t = this._ctx) == null ? void 0 : t.readonly) != null ? s : !1;
+  }
+  get size() {
+    var t, s;
+    return (s = (t = this._ctx) == null ? void 0 : t.size) != null ? s : "sm";
+  }
+  // Focus the internal input
+  focus() {
+    var t;
+    (t = this._input) == null || t.focus();
+  }
+  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`
+      <div
+        part="base"
+        class=${u("code-puncher-slot", `code-puncher-slot--${this.size}`, {
+      "code-puncher-slot--filled": !!t
+    })}>
+        <input
+          id="input"
+          part="input"
+          class=${u(
+      "code-puncher-slot__input",
+      `code-puncher-slot__input--${this.size}`,
+      {
+        "code-puncher-slot__input--disabled": this.disabled,
+        "code-puncher-slot__input--readonly": this.readonly,
+        "code-puncher-slot__input--success": this._ctx.status === "success",
+        "code-puncher-slot__input--error": this._ctx.status === "error"
+      }
+    )}
+          type=${this._ctx.mask ? "password" : "text"}
+          inputmode="numeric"
+          maxlength="1"
+          .value=${t}
+          ?disabled=${this.disabled}
+          ?readonly=${this.readonly}
+          autocomplete=${this._index === 0 ? this._ctx.autocomplete : "off"}
+          aria-label=${$("code-puncher.slot.aria-label", {
+      index: this._index + 1,
+      count: l
+    })}
+          @input=${this._onInput}
+          @keydown=${this._onKeydown}
+          @focus=${this._onFocus}
+          @blur=${this._onBlur}
+          @paste=${this._handlePaste} />
+        ${s ? h`<span class="code-puncher-slot__placeholder"
+              >${this._ctx.placeholder}</span
+            >` : c}
+        ${this._isActive && !t ? h`<span class="code-puncher-slot__caret"></span>` : c}
+      </div>
+    `;
+  }
+};
+r.tagName = "dap-ds-code-puncher-slot", r.styles = b(v);
+let i = r;
+n([
+  x("#input")
+], i.prototype, "_input");
+n([
+  a()
+], i.prototype, "_index");
+n([
+  a()
+], i.prototype, "_isActive");
+n([
+  a()
+], i.prototype, "_registered");
+export {
+  i as default
+};
+//# sourceMappingURL=code-puncher-slot.component.js.map

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

@@ -0,0 +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":";;;;;;;;;;;;;;;;;;AAoBA,MAAqBA,IAArB,MAAqBA,UAA6BC,EAAW;AAAA,EAA7D,cAAA;AAAA,UAAA,GAAA,SAAA,GAYW,KAAQ,SAAS,IACjB,KAAQ,YAAY,IACpB,KAAQ,cAAc,IAuD/B,KAAQ,WAAW,MAAY;AAC7B,UAAI,CAAC,KAAK,UAAU,CAAC,KAAK,KAAM;AAE1B,YAAAC,IAAO,KAAK,OAAO;AAEzB,MAAIA,MAAS,KACX,KAAK,KAAK,UAAU,KAAK,QAAQ,EAAE,IAC1B,KAAK,KAAK,QAAQ,KAAKA,CAAI,KACpC,KAAK,KAAK,UAAU,KAAK,QAAQA,CAAI,GAEjC,KAAK,SAAS,KAAK,KAAK,YAAY,KACtC,KAAK,KAAK,UAAU,KAAK,SAAS,CAAC,KAIrC,KAAK,OAAO,QAAQ,KAAK,KAAK,UAAU,KAAK,MAAM;AAAA,IAEvD,GAGQ,KAAA,aAAa,CAACC,MAA+B;AAC/C,MAAC,KAAK,QACV,KAAK,KAAK,cAAc,KAAK,QAAQA,CAAK;AAAA,IAC5C,GAGQ,KAAA,eAAe,CAACA,MAAgC;AAClD,MAAC,KAAK,QACL,KAAA,KAAK,YAAYA,CAAK;AAAA,IAC7B,GAGA,KAAQ,WAAW,MAAY;;AACzB,UAAA,CAAC,KAAK,KAAM;AAChB,WAAK,YAAY,KAEbC,IAAA,KAAK,WAAL,QAAAA,EAAa,SACf,KAAK,OAAO,OAAO;AAGf,YAAAC,IAAS,KAAK,QAAQ,qBAAqB;AAGzC,MAAAA,KAAA,QAAAA,EAAA,eAAe,KAAK,SAC5B,KAAK,cAAc;AAAA,IACrB,GAGA,KAAQ,UAAU,MAAY;AAC5B,WAAK,YAAY,IACjB,KAAK,cAAc;AAAA,IACrB;AAAA,EAAA;AAAA,EAxGA,oBAA0B;AACxB,UAAM,kBAAkB,GAEnB,KAAA,YAAY,IAAIC,EAAgB,MAAM;AAAA,MACzC,SAASC;AAAA,MACT,WAAW;AAAA,MACX,UAAU,CAAOC,MAAA;AACf,aAAK,OAAOA,GAERA,KAAO,CAAC,KAAK,gBACV,KAAA,SAASA,EAAI,aAAa,IAAI,GACnC,KAAK,cAAc,KAErB,KAAK,cAAc;AAAA,MAAA;AAAA,IACrB,CACD;AAAA,EAAA;AAAA,EAGH,uBAA6B;AACvB,IAAA,KAAK,QAAQ,KAAK,gBACf,KAAA,KAAK,eAAe,IAAI,GAC7B,KAAK,cAAc,KAErB,MAAM,qBAAqB;AAAA,EAAA;AAAA,EAGnB,WAAWC,GAAgD;AACnE,UAAM,WAAWA,CAAkB,GAE/B,KAAK,SACP,KAAK,YAAY,KAAK,KAAK,gBAAgB,KAAK;AAAA,EAClD;AAAA;AAAA,EAIF,IAAI,WAAoB;;AACf,YAAAC,KAAAN,IAAA,KAAK,SAAL,gBAAAA,EAAW,aAAX,OAAAM,IAAuB;AAAA,EAAA;AAAA,EAGhC,IAAI,WAAoB;;AACf,YAAAA,KAAAN,IAAA,KAAK,SAAL,gBAAAA,EAAW,aAAX,OAAAM,IAAuB;AAAA,EAAA;AAAA,EAGhC,IAAI,OAA2B;;AACrB,YAAAA,KAAAN,IAAA,KAAK,SAAL,gBAAAA,EAAW,SAAX,OAAAM,IAA0C;AAAA,EAAA;AAAA;AAAA,EAIpD,QAAc;;AACZ,KAAAN,IAAA,KAAK,WAAL,QAAAA,EAAa;AAAA,EAAM;AAAA,EAyDrB,SAAS;AACP,QAAI,CAAC,KAAK,QAAQ,KAAK,SAAS;AACvB,aAAAO;AAGT,UAAMT,IAAO,KAAK,KAAK,UAAU,KAAK,MAAM,GACtCU,IAAkB,CAACV,KAAQ,KAAK,KAAK,eAAe,CAAC,KAAK,WAC1DW,IAAY,KAAK,KAAK;AAErB,WAAAC;AAAAA;AAAAA;AAAAA,gBAGKC,EAAK,qBAAqB,sBAAsB,KAAK,IAAI,IAAI;AAAA,MACnE,6BAA6B,CAAC,CAACb;AAAA,IAAA,CAChC,CAAC;AAAA;AAAA;AAAA;AAAA,kBAIQa;AAAA,MACN;AAAA,MACA,6BAA6B,KAAK,IAAI;AAAA,MACtC;AAAA,QACE,sCAAsC,KAAK;AAAA,QAC3C,sCAAsC,KAAK;AAAA,QAC3C,qCACE,KAAK,KAAK,WAAW;AAAA,QACvB,mCAAmC,KAAK,KAAK,WAAW;AAAA,MAAA;AAAA,IAE3D,CAAA;AAAA,iBACM,KAAK,KAAK,OAAO,aAAa,MAAM;AAAA;AAAA;AAAA,mBAGlCb,CAAI;AAAA,sBACD,KAAK,QAAQ;AAAA,sBACb,KAAK,QAAQ;AAAA,yBACT,KAAK,WAAW,IAC5B,KAAK,KAAK,eACV,KAAa;AAAA,uBACJc,EAAE,gCAAgC;AAAA,MAC7C,OAAO,KAAK,SAAS;AAAA,MACrB,OAAOH;AAAA,IAAA,CACR,CAAC;AAAA,mBACO,KAAK,QAAQ;AAAA,qBACX,KAAK,UAAU;AAAA,mBACjB,KAAK,QAAQ;AAAA,kBACd,KAAK,OAAO;AAAA,mBACX,KAAK,YAAY;AAAA,UAC1BD,IACEE;AAAAA,iBACK,KAAK,KAAK,WAAW;AAAA,iBAE1BH,CAAO;AAAA,UACT,KAAK,aAAa,CAACT,IACjBY,oDACAH,CAAO;AAAA;AAAA;AAAA,EAAA;AAInB;AAnLEX,EAAO,UAAU,4BAEDA,EAAA,SAASiB,EAAUC,CAAM;AAH3C,IAAqBC,IAArBnB;AAU2BoB,EAAA;AAAA,EAAxBC,EAAM,QAAQ;AAAA,GAVIF,EAUM,WAAA,QAAA;AAERC,EAAA;AAAA,EAAhBE,EAAM;AAAA,GAZYH,EAYF,WAAA,QAAA;AACAC,EAAA;AAAA,EAAhBE,EAAM;AAAA,GAbYH,EAaF,WAAA,WAAA;AACAC,EAAA;AAAA,EAAhBE,EAAM;AAAA,GAdYH,EAcF,WAAA,aAAA;"}

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

@@ -0,0 +1,8 @@
+import { default as DapDSCodePuncherSlot } from './code-puncher-slot.component';
+export * from './code-puncher-slot.component';
+export default DapDSCodePuncherSlot;
+declare global {
+    interface HTMLElementTagNameMap {
+        'dap-ds-code-puncher-slot': DapDSCodePuncherSlot;
+    }
+}

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

@@ -0,0 +1,6 @@
+import e from "./code-puncher-slot.component.js";
+e.define();
+export {
+  e as default
+};
+//# sourceMappingURL=code-puncher-slot.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"code-puncher-slot.js","sources":["../../../src/components/code-puncher/code-puncher-slot.ts"],"sourcesContent":["import DapDSCodePuncherSlot from './code-puncher-slot.component'\n\nexport * from './code-puncher-slot.component'\nexport default DapDSCodePuncherSlot\n\nDapDSCodePuncherSlot.define()\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'dap-ds-code-puncher-slot': DapDSCodePuncherSlot\n  }\n}\n"],"names":["DapDSCodePuncherSlot"],"mappings":";AAKAA,EAAqB,OAAO;"}

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

@@ -0,0 +1,5 @@
+const d = "*,*:before,*:after{box-sizing:border-box;outline:none}* :not(dap-ds-table-cell,dap-ds-table-header){margin:0;padding:0}html:focus-within{scroll-behavior:smooth}a:not([class]){text-decoration-skip-ink:auto}img,picture,svg,video,canvas{max-width:100%;height:auto;background-repeat:no-repeat;background-size:cover;font-style:italic;vertical-align:middle}input,button,textarea,select{font:inherit}[hidden]{display:none!important}@media (prefers-reduced-motion: reduce){html:focus-within{scroll-behavior:auto}*,*:before,*:after{transition:none;transition-duration:.01ms!important;transition-delay:1ms!important;animation-duration:1ms!important;animation-delay:-1ms!important;animation-iteration-count:1!important;background-attachment:initial!important;scroll-behavior:auto!important}}body,html{height:100%;scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}input[type=number]{appearance:textfield}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{appearance:none}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border-width:0;white-space:nowrap}.input-description{display:block;margin-bottom:var(--dds-spacing-200)}@keyframes dds-spin{to{transform:rotate(360deg)}}@keyframes dds-fade{0%,to{opacity:.3}50%{opacity:1}}:host{--dds-input-height-xs: var(--dds-spacing-800);--dds-input-height-sm: var(--dds-spacing-1000);--dds-input-height-lg: var(--dds-spacing-1200);--dds-input-padding-xs: 0 var(--dds-spacing-200);--dds-input-padding-sm: 0 var(--dds-spacing-300);--dds-input-padding-lg: 0 var(--dds-spacing-400);--dds-input-font-size-xs: var(--dds-font-sm);--dds-input-font-size-sm: var(--dds-font-base);--dds-input-font-size-lg: var(--dds-font-lg);--dds-input-border: var(--dds-border-width-base) solid var(--dds-border-neutral-base);--dds-input-background: var(--dds-fields-background-default);--dds-input-text-color: var(--dds-text-neutral-base);--dds-input-border-radius: var(--dds-radius-base);--dds-input-disabled-border: 0 solid var(--dds-border-neutral-disabled);--dds-input-disabled-background: var(--dds-fields-background-disabled);--dds-input-disabled-text: var(--dds-text-neutral-disabled);--dds-input-readonly-border: 0 solid var(--dds-border-neutral-subtle);--dds-input-readonly-background: var(--dds-fields-background-read-only);--dds-input-readonly-text: var(--dds-text-neutral-subtle);--dds-input-success-border: var(--dds-border-width-base) solid var(--dds-border-positive-base);--dds-input-error-border: var(--dds-border-width-base) solid var(--dds-border-negative-base);--dds-input-addon-background: var(--dds-fields-background-default);--dds-input-addon-success-background: var(--dds-fields-background-default);--dds-input-addon-error-background: var(--dds-fields-background-default);--dds-input-addon-border-before: var(--dds-border-width-base) solid var(--dds-border-neutral-base);--dds-input-addon-border-after: var(--dds-border-width-base) solid var(--dds-border-neutral-base);--dds-input-addon-border-width-before: var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base);--dds-input-addon-border-width-after: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0;--dds-input-addon-success-border: var(--dds-border-width-base) solid var(--dds-border-positive-base);--dds-input-addon-success-border-before: var(--dds-border-width-base) solid var(--dds-border-positive-base);--dds-input-addon-success-border-after: var(--dds-border-width-base) solid var(--dds-border-positive-base);--dds-input-addon-success-border-width-before: var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base);--dds-input-addon-success-border-width-after: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0;--dds-input-addon-error-border-before: var(--dds-border-width-base) solid var(--dds-border-negative-base);--dds-input-addon-error-border-after: var(--dds-border-width-base) solid var(--dds-border-negative-base);--dds-input-addon-error-border-width-before: var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base);--dds-input-addon-error-border-width-after: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0;--dds-form-label-font-weight: var(--dds-font-weight-bold);--dds-form-label-line-height: var(--dds-font-line-height-xlarge);--dds-form-label-color: var(--dds-text-neutral-base);--dds-form-label-disabled-color: var(--dds-text-neutral-disabled);--dds-form-label-required-color: var(--dds-text-negative-subtle);--dds-form-label-optional-color: var(--dds-text-neutral-subtle);--dds-form-label-margin-bottom: var(--dds-spacing-200);--dds-code-puncher-slot-width-xs: var(--dds-input-height-xs);--dds-code-puncher-slot-width-sm: var(--dds-input-height-sm);--dds-code-puncher-slot-width-lg: var(--dds-input-height-lg);--dds-code-puncher-slot-font-size-xs: var(--dds-font-base);--dds-code-puncher-slot-font-size-sm: var(--dds-font-lg);--dds-code-puncher-slot-font-size-lg: var(--dds-font-2xl);display:inline-block;width:auto}.code-puncher-slot{display:inline-flex;position:relative;align-items:center;justify-content:center;width:var(--dds-code-puncher-slot-width-sm);height:var(--dds-input-height-sm)}.code-puncher-slot--xs{width:var(--dds-code-puncher-slot-width-xs);height:var(--dds-input-height-xs)}.code-puncher-slot--lg{width:var(--dds-code-puncher-slot-width-lg);height:var(--dds-input-height-lg)}.code-puncher-slot__input{transition-property:all;transition-duration:var(--dds-transition-fast);transition-timing-function:var(--dds-easing-ease-in-out);outline-color:var(--dds-focus-outer-ring);outline-offset:var(--dds-spacing-50);outline-width:var(--dds-border-width-large);display:inline-block;width:100%;height:var(--dds-input-height);padding:0 var(--dds-input-padding);border:var(--dds-input-border);border-radius:var(--dds-input-border-radius);background:var(--dds-input-background);color:var(--dds-input-text-color);font-size:var(--dds-input-font-size)}.code-puncher-slot__input:focus-visible{outline-style:solid}.code-puncher-slot__input[disabled],.code-puncher-slot__input--disabled{border:var(--dds-input-disabled-border);background:var(--dds-input-disabled-background);color:var(--dds-input-disabled-text);cursor:not-allowed}.code-puncher-slot__input--has-addon-before{border-left:var(--dds-border-width-none);border-top-left-radius:var(--dds-radius-none);border-bottom-left-radius:var(--dds-radius-none)}.code-puncher-slot__input--has-addon-after{border-right:var(--dds-border-width-none);border-top-right-radius:var(--dds-radius-none);border-bottom-right-radius:var(--dds-radius-none)}.code-puncher-slot__input[readonly],.code-puncher-slot__input--readonly{border:var(--dds-input-readonly-border);background:var(--dds-input-readonly-background);color:var(--dds-input-readonly-text)}.code-puncher-slot__input--success.input__control--has-addon-before{border-left-width:0}.code-puncher-slot__input--success.input__control--has-addon-after{border-right-width:0}.code-puncher-slot__input--error.input__control--has-addon-before{border-left-width:0}.code-puncher-slot__input--error.input__control--has-addon-after{border-right-width:0}.code-puncher-slot__input--has-prefix{padding-left:var(--dds-spacing-1400)}.code-puncher-slot__input--has-prefix:focus-visible{z-index:10}.code-puncher-slot__input--has-postfix{padding-right:var(--dds-spacing-1400)}.code-puncher-slot__input--has-postfix:focus-visible{z-index:10}.code-puncher-slot__input{padding:0;font-weight:var(--dds-font-weight-medium);text-align:center}.code-puncher-slot__input::placeholder{color:transparent}.code-puncher-slot__input::-webkit-outer-spin-button,.code-puncher-slot__input::-webkit-inner-spin-button{appearance:none;margin:0}.code-puncher-slot__input--disabled{border:var(--dds-input-disabled-border);background:var(--dds-input-disabled-background);color:var(--dds-input-disabled-text);cursor:not-allowed}.code-puncher-slot__input--readonly{border:var(--dds-input-readonly-border);background:var(--dds-input-readonly-background);color:var(--dds-input-readonly-text)}.code-puncher-slot__input--success{border:var(--dds-input-success-border)}.code-puncher-slot__input--error{border:var(--dds-input-error-border)}.code-puncher-slot__input--xs{height:var(--dds-input-height-xs);padding:var(--dds-input-padding-xs);font-size:var(--dds-input-font-size-xs)}.code-puncher-slot__input--xs{padding:0;font-size:var(--dds-code-puncher-slot-font-size-xs)}.code-puncher-slot__input--sm{height:var(--dds-input-height-sm);padding:var(--dds-input-padding-sm);font-size:var(--dds-input-font-size-sm)}.code-puncher-slot__input--sm{padding:0;font-size:var(--dds-code-puncher-slot-font-size-sm)}.code-puncher-slot__input--lg{height:var(--dds-input-height-lg);padding:var(--dds-input-padding-lg);font-size:var(--dds-input-font-size-lg)}.code-puncher-slot__input--lg{padding:0;font-size:var(--dds-code-puncher-slot-font-size-lg)}.code-puncher-slot__placeholder{display:flex;position:absolute;align-items:center;justify-content:center;width:100%;height:100%;color:var(--dds-text-neutral-subtle);font-size:var(--dds-code-puncher-slot-font-size-sm);pointer-events:none;user-select:none}.code-puncher-slot--xs .code-puncher-slot__placeholder{font-size:var(--dds-code-puncher-slot-font-size-xs)}.code-puncher-slot--lg .code-puncher-slot__placeholder{font-size:var(--dds-code-puncher-slot-font-size-lg)}";
+export {
+  d as default
+};
+//# sourceMappingURL=code-puncher-slot.scss.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"code-puncher-slot.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

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

@@ -1,5 +1,11 @@
 import { PropertyValueMap } from 'lit';
 import { GenericFormElement } from '../../internal/mixin/genericFormElement';
+import { default as DapDSFeedback } from '../feedback/feedback.component';
+import { default as DapDSFormLabel } from '../form/form-label/form-label.component';
+import { default as DapDSIcon } from '../icon/icon.component';
+import { default as DapDSIconButton } from '../icon-button/icon-button.component';
+import { default as DapDSTooltip } from '../tooltip/tooltip.component';
+import { default as DapDSTypography } from '../typography/typography.component';
 /**
  * `dap-ds-code-puncher`
  * @summary A composable PIN/OTP input component for entering verification codes.
@@ -41,6 +47,15 @@ import { GenericFormElement } from '../../internal/mixin/genericFormElement';
  * @csspart feedback - The feedback element.
  */
 export default class DapDSCodePuncher extends GenericFormElement {
+    static tagName: string;
+    static dependencies: {
+        'dap-ds-form-label': typeof DapDSFormLabel;
+        'dap-ds-tooltip': typeof DapDSTooltip;
+        'dap-ds-icon-button': typeof DapDSIconButton;
+        'dap-ds-icon': typeof DapDSIcon;
+        'dap-ds-typography': typeof DapDSTypography;
+        'dap-ds-feedback': typeof DapDSFeedback;
+    };
     mask: boolean;
     pattern: string;
     placeholder: string;

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

@@ -0,0 +1,279 @@
+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;
+};
+const c = class c extends v {
+  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]$/;
+  }
+  _getContextValue() {
+    return {
+      registerSlot: this._registerSlot.bind(this),
+      unregisterSlot: this._unregisterSlot.bind(this),
+      getCharAt: this._getCharAt.bind(this),
+      setCharAt: this._setCharAt.bind(this),
+      focusSlot: this._focusSlot.bind(this),
+      handleKeydown: this._handleKeydown.bind(this),
+      handlePaste: this._handlePaste.bind(this),
+      activeIndex: this._activeIndex,
+      mask: this.mask,
+      disabled: this.disabled,
+      readonly: this.readonly,
+      size: this.size,
+      placeholder: this.placeholder,
+      pattern: this._patternRegex,
+      status: this.status,
+      autocomplete: this.autocomplete,
+      slotCount: this._slots.length
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), this._provider = new g(this, {
+      context: F,
+      initialValue: this._getContextValue()
+    });
+  }
+  _updateContext() {
+    this._provider && this._provider.setValue(this._getContextValue());
+  }
+  get value() {
+    return this._chars.join("");
+  }
+  set value(t) {
+    if (this._rawValue = t, this._slots.length === 0) return;
+    const s = t.split("");
+    this._chars = Array.from(
+      { length: this._slots.length },
+      (e, i) => {
+        var a;
+        return (a = s[i]) != null ? a : "";
+      }
+    ), this.internals.setFormValue(this.value), this.requestUpdate();
+  }
+  willUpdate(t) {
+    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;
+  }
+  _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());
+  }
+  _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();
+  }
+  _focusSlot(t) {
+    var s;
+    t >= 0 && t < this._slots.length && (this._activeIndex = t, (s = this._slots[t]) == null || s.focus(), this.requestUpdate());
+  }
+  _handleKeydown(t, s) {
+    const e = this._chars[t] || "";
+    switch (s.key) {
+      case "Backspace":
+        e === "" && t > 0 ? (this._setCharAt(t - 1, ""), this._focusSlot(t - 1)) : this._setCharAt(t, ""), s.preventDefault();
+        break;
+      case "Delete":
+        this._setCharAt(t, ""), s.preventDefault();
+        break;
+      case "ArrowLeft":
+        t > 0 && this._focusSlot(t - 1), s.preventDefault();
+        break;
+      case "ArrowRight":
+        t < this._slots.length - 1 && this._focusSlot(t + 1), s.preventDefault();
+        break;
+      case "Home":
+        this._focusSlot(0), s.preventDefault();
+        break;
+      case "End":
+        this._focusSlot(this._slots.length - 1), s.preventDefault();
+        break;
+    }
+  }
+  _handlePaste(t) {
+    var n;
+    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;
+    }), this.internals.setFormValue(this.value), this.emit("dds-change", { value: this.value });
+    const i = Math.min(
+      e.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();
+  }
+  _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());
+  }
+  setActiveIndex(t) {
+    this._activeIndex = t, this.requestUpdate();
+  }
+  get focusElement() {
+    return this._slots[0] || this;
+  }
+  focus() {
+    const t = this._chars.findIndex((e) => e === ""), s = t > -1 ? t : 0;
+    this._focusSlot(s);
+  }
+  setValidity() {
+    this.required && this._chars.some((t) => t === "") ? this.internals.setValidity(
+      { valueMissing: !0 },
+      "Please fill in all digits",
+      this._slots[0]
+    ) : this.internals.setValidity({});
+  }
+  render() {
+    return h`
+      <div
+        part="base"
+        class=${f("code-puncher", `code-puncher--${this.size}`, {
+      "code-puncher--disabled": this.disabled,
+      "code-puncher--readonly": this.readonly,
+      "code-puncher--success": this.status === "success",
+      "code-puncher--error": this.status === "error",
+      "code-puncher--focused": this._hasFocus
+    })}
+        role="group"
+        aria-label=${d(this.label || "Code input")}
+        @focusin=${this._handleFocusIn}
+        @focusout=${this._handleFocusOut}>
+        ${this.label || this.tooltip ? h`
+              <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
+                      part="tooltip"
+                      content=${this.tooltip}
+                      mode="toggle"
+                      floatingStrategy="fixed"
+                      placement=${this.tooltipPlacement}>
+                      <dap-ds-icon-button
+                        clean
+                        class="info-button"
+                        slot="trigger"
+                        aria-label=${this.tooltipAriaLabel || "More information"}
+                        size=${this.size || "sm"}
+                        iconSize=${this.size === "xs" ? "16" : "22"}>
+                        <dap-ds-icon
+                          name="information-line"
+                          class="info-button"></dap-ds-icon>
+                      </dap-ds-icon-button>
+                    </dap-ds-tooltip>` : p}
+              </div>
+            ` : p}
+        ${this.description ? h`
+              <dap-ds-typography
+                part="description"
+                variant="description"
+                class=${f("input-description")}
+                size=${d(this.size)}
+                id="description">
+                ${this.description}
+              </dap-ds-typography>
+            ` : p}
+        <div part="slots" class="code-puncher__slots">
+          <slot></slot>
+        </div>
+        ${this.feedback && this._renderFeedback()}
+      </div>
+    `;
+  }
+  _renderFeedback() {
+    return h`
+      <dap-ds-feedback
+        part="feedback"
+        role="alert"
+        feedbackType=${d(this.feedbackType)}
+        feedbackSize="${d(this.size)}"
+        .subtle=${this.subtle}
+        id="feedback">
+        <slot
+          name="feedback-icon"
+          @slotchange="${this._handleSlotChange}"></slot>
+        ${this.feedback}
+      </dap-ds-feedback>
+    `;
+  }
+  _handleSlotChange(t) {
+    (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;
+r([
+  u({ type: Boolean, reflect: !0 })
+], o.prototype, "mask");
+r([
+  u()
+], o.prototype, "pattern");
+r([
+  u()
+], o.prototype, "placeholder");
+r([
+  u()
+], o.prototype, "autocomplete");
+r([
+  _()
+], o.prototype, "_slots");
+r([
+  _()
+], o.prototype, "_activeIndex");
+r([
+  _()
+], o.prototype, "_chars");
+r([
+  _()
+], o.prototype, "_hasFocus");
+export {
+  o as default
+};
+//# sourceMappingURL=code-puncher.component.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"code-puncher.component.js","sources":["../../../src/components/code-puncher/code-puncher.component.ts"],"sourcesContent":["import { ContextProvider } from '@lit/context'\nimport clsx from 'clsx'\nimport { html, nothing, PropertyValueMap, unsafeCSS } from 'lit'\nimport { property, state } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nimport { CommonFormElementSize } from '@/common/types'\nimport { GenericFormElement } from '@/internal/mixin/genericFormElement'\n\nimport DapDSFeedback from '../feedback/feedback.component'\nimport DapDSFormLabel from '../form/form-label/form-label.component'\nimport DapDSIcon from '../icon/icon.component'\nimport DapDSIconButton from '../icon-button/icon-button.component'\nimport DapDSTooltip from '../tooltip/tooltip.component'\nimport DapDSTypography from '../typography/typography.component'\nimport { CodePuncherContext, codePuncherContext } from './code-puncher.context'\nimport styles from './code-puncher.scss?inline'\nimport type DapDSCodePuncherSlot from './code-puncher-slot.component'\n\n/**\n * `dap-ds-code-puncher`\n * @summary A composable PIN/OTP input component for entering verification codes.\n * @element dap-ds-code-puncher\n * @title - Code Puncher\n * @group code-puncher\n *\n * @property {string} value - The complete code value.\n * @property {boolean} mask - Mask input like password. Default is false.\n * @property {string} pattern - Regex pattern for allowed characters. Default is '[0-9]'.\n * @property {string} placeholder - Placeholder character for empty slots.\n * @property {'xs' | 'sm' | 'lg'} size - The size of the slots. Default is 'sm'.\n * @property {string} label - The label of the component.\n * @property {boolean} hideLabel - Visually hides the label while keeping it available to assistive technology. (default: false)\n * @property {string} description - The description of the component.\n * @property {string} tooltip - The tooltip of the component.\n * @property {string} feedback - The feedback message.\n * @property {'negative' | 'positive' | 'warning'} feedbackType - The feedback type.\n * @property {'success' | 'error'} status - The status of the component.\n * @property {boolean} disabled - Disable all slots. Default is false.\n * @property {boolean} readonly - Read-only state. Default is false.\n * @property {boolean} required - Required for form validation. Default is false.\n * @property {string} requiredLabel - Indicator of required text. (default: '*')\n * @property {string} name - Form element name.\n * @property {string} autocomplete - Autocomplete hint. Default is 'one-time-code'.\n *\n * @event {{ value: string, index: number }} dds-input - Fires on each digit input.\n * @event {{ value: string }} dds-change - Fires when value changes.\n * @event {{ value: string }} dds-complete - Fires when all slots are filled.\n * @event dds-focus - Fires when component gains focus.\n * @event dds-blur - Fires when component loses focus.\n *\n * @slot default - Slot for code-puncher-group, code-puncher-slot, and code-puncher-separator elements.\n *\n * @csspart base - The main container.\n * @csspart slots - The slots container.\n * @csspart label - The label element.\n * @csspart description - The description element.\n * @csspart feedback - The feedback element.\n */\nexport default class DapDSCodePuncher extends GenericFormElement {\n  static tagName = 'dap-ds-code-puncher'\n\n  static dependencies = {\n    'dap-ds-form-label': DapDSFormLabel,\n    'dap-ds-tooltip': DapDSTooltip,\n    'dap-ds-icon-button': DapDSIconButton,\n    'dap-ds-icon': DapDSIcon,\n    'dap-ds-typography': DapDSTypography,\n    'dap-ds-feedback': DapDSFeedback,\n  }\n\n  @property({ type: Boolean, reflect: true }) mask = false\n  @property() pattern = '[0-9]'\n  @property() placeholder = ''\n  @property() autocomplete = 'one-time-code'\n\n  @state() private _slots: DapDSCodePuncherSlot[] = []\n  @state() private _activeIndex = -1\n  @state() private _chars: string[] = []\n  @state() private _hasFocus = false\n\n  private _rawValue = ''\n\n  static readonly styles = unsafeCSS(styles)\n\n  private _patternRegex: RegExp = /^[0-9]$/\n  private _provider!: ContextProvider<typeof codePuncherContext>\n\n  private _getContextValue(): CodePuncherContext {\n    return {\n      registerSlot: this._registerSlot.bind(this),\n      unregisterSlot: this._unregisterSlot.bind(this),\n      getCharAt: this._getCharAt.bind(this),\n      setCharAt: this._setCharAt.bind(this),\n      focusSlot: this._focusSlot.bind(this),\n      handleKeydown: this._handleKeydown.bind(this),\n      handlePaste: this._handlePaste.bind(this),\n      activeIndex: this._activeIndex,\n      mask: this.mask,\n      disabled: this.disabled,\n      readonly: this.readonly,\n      size: this.size as CommonFormElementSize,\n      placeholder: this.placeholder,\n      pattern: this._patternRegex,\n      status: this.status,\n      autocomplete: this.autocomplete,\n      slotCount: this._slots.length,\n    }\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback()\n    // Initialize the context provider\n    this._provider = new ContextProvider(this, {\n      context: codePuncherContext,\n      initialValue: this._getContextValue(),\n    })\n  }\n\n  private _updateContext(): void {\n    if (this._provider) {\n      this._provider.setValue(this._getContextValue())\n    }\n  }\n\n  get value(): string {\n    return this._chars.join('')\n  }\n\n  set value(v: string) {\n    this._rawValue = v\n    if (this._slots.length === 0) return\n    const chars = v.split('')\n    this._chars = Array.from(\n      { length: this._slots.length },\n      (_, i) => chars[i] ?? '',\n    )\n    this.internals.setFormValue(this.value)\n    this.requestUpdate()\n  }\n\n  protected willUpdate(changedProperties: PropertyValueMap<any>): void {\n    super.willUpdate(changedProperties)\n    if (changedProperties.has('pattern')) {\n      this._patternRegex = new RegExp(`^${this.pattern}$`)\n    }\n    // Update context when relevant properties change\n    this._updateContext()\n  }\n\n  private _registerSlot(slot: DapDSCodePuncherSlot): number {\n    const index = this._slots.length\n    this._slots = [...this._slots, slot]\n    this._chars = [...this._chars, this._rawValue[index] ?? '']\n    this.internals.setFormValue(this.value)\n    this.requestUpdate()\n    return index\n  }\n\n  private _unregisterSlot(slot: DapDSCodePuncherSlot): void {\n    const index = this._slots.indexOf(slot)\n    if (index > -1) {\n      this._slots = this._slots.filter(s => s !== slot)\n      this._chars = this._chars.filter((_, i) => i !== index)\n      this.requestUpdate()\n    }\n  }\n\n  private _getCharAt(index: number): string {\n    return this._chars[index] || ''\n  }\n\n  private _setCharAt(index: number, char: string): void {\n    const oldValue = this.value\n    this._chars = this._chars.map((c, i) => (i === index ? char : c))\n    this.internals.setFormValue(this.value)\n\n    this.emit('dds-input', { value: this.value, index })\n\n    if (this.value !== oldValue) {\n      this.emit('dds-change', { value: this.value })\n    }\n\n    // Check if complete\n    if (\n      this._chars.length > 0 &&\n      this._chars.every(c => c !== '') &&\n      char !== ''\n    ) {\n      this.emit('dds-complete', { value: this.value })\n    }\n\n    this.requestUpdate()\n    this.setValidity()\n  }\n\n  private _focusSlot(index: number): void {\n    if (index >= 0 && index < this._slots.length) {\n      this._activeIndex = index\n      this._slots[index]?.focus()\n      this.requestUpdate()\n    }\n  }\n\n  private _handleKeydown(index: number, event: KeyboardEvent): void {\n    const char = this._chars[index] || ''\n\n    switch (event.key) {\n      case 'Backspace':\n        if (char === '' && index > 0) {\n          // Empty slot, move to previous and clear\n          this._setCharAt(index - 1, '')\n          this._focusSlot(index - 1)\n        } else {\n          // Clear current\n          this._setCharAt(index, '')\n        }\n        event.preventDefault()\n        break\n\n      case 'Delete':\n        this._setCharAt(index, '')\n        event.preventDefault()\n        break\n\n      case 'ArrowLeft':\n        if (index > 0) {\n          this._focusSlot(index - 1)\n        }\n        event.preventDefault()\n        break\n\n      case 'ArrowRight':\n        if (index < this._slots.length - 1) {\n          this._focusSlot(index + 1)\n        }\n        event.preventDefault()\n        break\n\n      case 'Home':\n        this._focusSlot(0)\n        event.preventDefault()\n        break\n\n      case 'End':\n        this._focusSlot(this._slots.length - 1)\n        event.preventDefault()\n        break\n    }\n  }\n\n  private _handlePaste(event: ClipboardEvent): void {\n    event.preventDefault()\n\n    const pastedText = event.clipboardData?.getData('text') || ''\n    // Remove common separators and filter by pattern\n    const cleanedText = pastedText\n      .replace(/[-·\\s]/g, '')\n      .split('')\n      .filter(char => this._patternRegex.test(char))\n\n    // Distribute characters starting from first slot\n    cleanedText.slice(0, this._slots.length).forEach((char, i) => {\n      this._chars[i] = char\n    })\n\n    this.internals.setFormValue(this.value)\n    this.emit('dds-change', { value: this.value })\n\n    // Focus last filled slot or next empty\n    const lastFilledIndex = Math.min(\n      cleanedText.length - 1,\n      this._slots.length - 1,\n    )\n    const nextEmptyIndex = this._chars.findIndex(c => c === '')\n\n    if (nextEmptyIndex > -1) {\n      this._focusSlot(nextEmptyIndex)\n    } else {\n      this._focusSlot(lastFilledIndex)\n    }\n\n    // Check if complete\n    if (this._chars.every(c => c !== '')) {\n      this.emit('dds-complete', { value: this.value })\n    }\n\n    this.requestUpdate()\n  }\n\n  private _handleFocusIn(): void {\n    if (!this._hasFocus) {\n      this._hasFocus = true\n      this.emit('dds-focus')\n    }\n  }\n\n  private _handleFocusOut(event: FocusEvent): void {\n    // Check if focus is moving to another element within this component\n    const relatedTarget = event.relatedTarget as HTMLElement\n    if (!this.contains(relatedTarget)) {\n      this._hasFocus = false\n      this._activeIndex = -1\n      this.emit('dds-blur')\n      this.requestUpdate()\n    }\n  }\n\n  setActiveIndex(index: number): void {\n    this._activeIndex = index\n    this.requestUpdate()\n  }\n\n  public get focusElement(): HTMLElement {\n    return this._slots[0] || this\n  }\n\n  override focus(): void {\n    // Focus first empty slot or first slot\n    const firstEmptyIndex = this._chars.findIndex(c => c === '')\n    const targetIndex = firstEmptyIndex > -1 ? firstEmptyIndex : 0\n    this._focusSlot(targetIndex)\n  }\n\n  setValidity(): void {\n    if (this.required && this._chars.some(c => c === '')) {\n      this.internals.setValidity(\n        { valueMissing: true },\n        'Please fill in all digits',\n        this._slots[0],\n      )\n    } else {\n      this.internals.setValidity({})\n    }\n  }\n\n  render() {\n    return html`\n      <div\n        part=\"base\"\n        class=${clsx('code-puncher', `code-puncher--${this.size}`, {\n          'code-puncher--disabled': this.disabled,\n          'code-puncher--readonly': this.readonly,\n          'code-puncher--success': this.status === 'success',\n          'code-puncher--error': this.status === 'error',\n          'code-puncher--focused': this._hasFocus,\n        })}\n        role=\"group\"\n        aria-label=${ifDefined(this.label || 'Code input')}\n        @focusin=${this._handleFocusIn}\n        @focusout=${this._handleFocusOut}>\n        ${this.label || this.tooltip\n          ? html`\n              <div class=\"label-container\">\n                ${this.label\n                  ? html`<dap-ds-form-label\n                      part=\"label\"\n                      id=\"label\"\n                      .size=${this.size}\n                      .required=${this.required}\n                      .requiredLabel=${this.requiredLabel}\n                      .optional=${this.optional}\n                      .optionalLabel=${this.optionalLabel}\n                      .disabled=${this.disabled}\n                      class=${clsx('label')}\n                      .noMargin=${!!this.description}\n                      .hideLabel=${this.hideLabel}\n                      label=${ifDefined(this.label)}>\n                    </dap-ds-form-label>`\n                  : nothing}\n                ${this.tooltip\n                  ? html`<dap-ds-tooltip\n                      part=\"tooltip\"\n                      content=${this.tooltip}\n                      mode=\"toggle\"\n                      floatingStrategy=\"fixed\"\n                      placement=${this.tooltipPlacement}>\n                      <dap-ds-icon-button\n                        clean\n                        class=\"info-button\"\n                        slot=\"trigger\"\n                        aria-label=${this.tooltipAriaLabel ||\n                        'More information'}\n                        size=${(this.size as 'xs' | 'sm' | 'lg') || 'sm'}\n                        iconSize=${this.size === 'xs' ? '16' : '22'}>\n                        <dap-ds-icon\n                          name=\"information-line\"\n                          class=\"info-button\"></dap-ds-icon>\n                      </dap-ds-icon-button>\n                    </dap-ds-tooltip>`\n                  : nothing}\n              </div>\n            `\n          : nothing}\n        ${this.description\n          ? html`\n              <dap-ds-typography\n                part=\"description\"\n                variant=\"description\"\n                class=${clsx('input-description')}\n                size=${ifDefined(this.size as CommonFormElementSize)}\n                id=\"description\">\n                ${this.description}\n              </dap-ds-typography>\n            `\n          : nothing}\n        <div part=\"slots\" class=\"code-puncher__slots\">\n          <slot></slot>\n        </div>\n        ${this.feedback && this._renderFeedback()}\n      </div>\n    `\n  }\n\n  private _renderFeedback() {\n    return html`\n      <dap-ds-feedback\n        part=\"feedback\"\n        role=\"alert\"\n        feedbackType=${ifDefined(this.feedbackType)}\n        feedbackSize=\"${ifDefined(this.size as 'lg' | 'sm' | 'xs')}\"\n        .subtle=${this.subtle}\n        id=\"feedback\">\n        <slot\n          name=\"feedback-icon\"\n          @slotchange=\"${this._handleSlotChange}\"></slot>\n        ${this.feedback}\n      </dap-ds-feedback>\n    `\n  }\n\n  private _handleSlotChange(event: Event) {\n    const target = event?.target as HTMLElement\n    target.setAttribute('slot', 'icon')\n  }\n}\n"],"names":["_DapDSCodePuncher","GenericFormElement","ContextProvider","codePuncherContext","v","chars","_","_a","changedProperties","slot","index","s","char","oldValue","c","i","event","cleanedText","lastFilledIndex","nextEmptyIndex","relatedTarget","firstEmptyIndex","targetIndex","html","clsx","ifDefined","nothing","DapDSFormLabel","DapDSTooltip","DapDSIconButton","DapDSIcon","DapDSTypography","DapDSFeedback","unsafeCSS","styles","DapDSCodePuncher","__decorateClass","property","state"],"mappings":"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"}

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

@@ -0,0 +1,8 @@
+import { createContext as e } from "../../node_modules/@lit/context/lib/create-context.js";
+const o = e(
+  "dap-ds-code-puncher-context"
+);
+export {
+  o as codePuncherContext
+};
+//# sourceMappingURL=code-puncher.context.js.map

package/dist/components/code-puncher/code-puncher.context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-puncher.context.js","sources":["../../../src/components/code-puncher/code-puncher.context.ts"],"sourcesContent":["import { createContext } from '@lit/context'\n\nimport type { CommonFormElementSize } from '@/common/types'\n\nimport type DapDSCodePuncherSlot from './code-puncher-slot.component'\n\nexport interface CodePuncherContext {\n  registerSlot: (slot: DapDSCodePuncherSlot) => number\n  unregisterSlot: (slot: DapDSCodePuncherSlot) => void\n  getCharAt: (index: number) => string\n  setCharAt: (index: number, char: string) => void\n  focusSlot: (index: number) => void\n  handleKeydown: (index: number, event: KeyboardEvent) => void\n  handlePaste: (event: ClipboardEvent) => void\n  activeIndex: number\n  mask: boolean\n  disabled: boolean\n  readonly: boolean\n  size: CommonFormElementSize\n  placeholder: string\n  pattern: RegExp\n  status?: 'success' | 'error'\n  autocomplete: string\n  slotCount: number\n}\n\nexport const codePuncherContext = createContext<CodePuncherContext>(\n  'dap-ds-code-puncher-context',\n)\n"],"names":["codePuncherContext","createContext"],"mappings":";AA0BO,MAAMA,IAAqBC;AAAAA,EAChC;AACF;"}

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

@@ -1,12 +1,8 @@
-import { default as DapDSCodePuncher } from './code-puncher.component.js';
-import { default as DapDSCodePuncherSlot } from './code-puncher-slot.component.js';
-export * from './code-puncher.component.js';
-export * from './code-puncher.context.js';
-export * from './code-puncher-slot.component.js';
-export { DapDSCodePuncher, DapDSCodePuncherSlot };
+import { default as DapDSCodePuncher } from './code-puncher.component';
+export * from './code-puncher.component';
+export default DapDSCodePuncher;
 declare global {
     interface HTMLElementTagNameMap {
         'dap-ds-code-puncher': DapDSCodePuncher;
-        'dap-ds-code-puncher-slot': DapDSCodePuncherSlot;
     }
 }

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

@@ -0,0 +1,6 @@
+import e from "./code-puncher.component.js";
+e.define();
+export {
+  e as default
+};
+//# sourceMappingURL=code-puncher.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"code-puncher.js","sources":["../../../src/components/code-puncher/code-puncher.ts"],"sourcesContent":["import DapDSCodePuncher from './code-puncher.component'\n\nexport * from './code-puncher.component'\nexport default DapDSCodePuncher\n\nDapDSCodePuncher.define()\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'dap-ds-code-puncher': DapDSCodePuncher\n  }\n}\n"],"names":["DapDSCodePuncher"],"mappings":";AAKAA,EAAiB,OAAO;"}

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

@@ -0,0 +1,5 @@
+const t = '*,*:before,*:after{box-sizing:border-box;outline:none}* :not(dap-ds-table-cell,dap-ds-table-header){margin:0;padding:0}html:focus-within{scroll-behavior:smooth}a:not([class]){text-decoration-skip-ink:auto}img,picture,svg,video,canvas{max-width:100%;height:auto;background-repeat:no-repeat;background-size:cover;font-style:italic;vertical-align:middle}input,button,textarea,select{font:inherit}[hidden]{display:none!important}@media (prefers-reduced-motion: reduce){html:focus-within{scroll-behavior:auto}*,*:before,*:after{transition:none;transition-duration:.01ms!important;transition-delay:1ms!important;animation-duration:1ms!important;animation-delay:-1ms!important;animation-iteration-count:1!important;background-attachment:initial!important;scroll-behavior:auto!important}}body,html{height:100%;scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}input[type=number]{appearance:textfield}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{appearance:none}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border-width:0;white-space:nowrap}.input-description{display:block;margin-bottom:var(--dds-spacing-200)}@keyframes dds-spin{to{transform:rotate(360deg)}}@keyframes dds-fade{0%,to{opacity:.3}50%{opacity:1}}:root{--dds-form-label-font-weight: var(--dds-font-weight-bold);--dds-form-label-line-height: var(--dds-font-line-height-xlarge);--dds-form-label-color: var(--dds-text-neutral-base);--dds-form-label-disabled-color: var(--dds-text-neutral-disabled);--dds-form-label-required-color: var(--dds-text-negative-subtle);--dds-form-label-optional-color: var(--dds-text-neutral-subtle);--dds-form-label-margin-bottom: var(--dds-spacing-200)}dap-ds-form-label .dds-label{display:block;margin-bottom:var(--dds-form-label-margin-bottom);color:var(--dds-form-label-color);font-weight:var(--dds-form-label-font-weight);line-height:var(--dds-form-label-line-height)}dap-ds-form-label .dds-label--no-margin{margin-bottom:0}dap-ds-form-label .dds-label--hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border-width:0;white-space:nowrap}dap-ds-form-label .dds-label--disabled{color:var(--dds-form-label-disabled-color)}dap-ds-form-label .dds-label--xs{font-size:var(--dds-font-sm)}dap-ds-form-label .dds-label--sm{font-size:var(--dds-font-base)}dap-ds-form-label .dds-label--lg{font-size:var(--dds-font-lg)}dap-ds-form-label .dds-label--subtle{font-weight:var(--dds-font-weight-medium)}dap-ds-form-label .dds-label .dds-label__required-indicator{order:2;color:var(--dds-form-label-required-color);font-weight:var(--dds-font-weight-bold);line-height:var(--dds-form-label-line-height)}dap-ds-form-label .dds-label .dds-label__optional-indicator{order:3;color:var(--dds-form-label-optional-color);font-weight:var(--dds-font-weight-medium);line-height:var(--dds-form-label-line-height)}dap-ds-form-label .dds-label .dds-label__optional-indicator--xs{font-size:var(--dds-font-sm)}dap-ds-form-label .dds-label .dds-label__optional-indicator--lg{font-size:var(--dds-font-lg)}.label-container{display:flex;align-items:center;justify-content:space-between}.label--has-description{margin-bottom:var(--dds-spacing-200)}dap-ds-form-label+dap-ds-typography{display:block}.info-button{fill:var(--dds-button-subtle-icon-neutral-enabled);color:var(--dds-button-subtle-icon-neutral-enabled)}:root{--font-family: "Inter", sans-serif}:host{--dds-text-color: var(--dds-text-neutral-base);--dds-text-color-inverted: var(--dds-text-neutral-on-inverted);--dds-text-heading-color: var(--dds-text-neutral-strong);--dds-text-heading-color-inverted: var(--dds-text-neutral-on-inverted);--dds-text-description-color: var(--dds-text-neutral-subtle);--dds-text-description-color-inverted: var(--dds-text-neutral-on-inverted);--dds-text-font-family: var(--font-family);--dds-text-font-weight-medium: var(--dds-font-weight-medium);--dds-text-font-weight-bold: var(--dds-font-weight-bold);--dds-text-font-size-h1: var(--dds-font-7xl);--dds-text-font-size-h2: var(--dds-font-4xl);--dds-text-font-size-h3: var(--dds-font-2xl);--dds-text-font-size-h4: var(--dds-font-xl);--dds-text-font-size-h5: var(--dds-font-lg);--dds-text-font-size-h6: var(--dds-font-base);--dds-text-font-size-body: var(--dds-font-base);--dds-text-font-size-caption: var(--dds-font-xs);--dds-text-font-size-description: var(--dds-font-base);--dds-text-font-size-description-lg: var(--dds-font-base);--dds-text-font-size-description-sm: var(--dds-font-sm);--dds-text-font-size-lg: var(--dds-font-lg);--dds-text-font-size-md: var(--dds-font-base);--dds-text-font-size-sm: var(--dds-font-sm);--dds-text-font-size-xs: var(--dds-font-xs)}:host([variant=h1]),:host([variant=h2]),:host([variant=h3]),:host([variant=h4]),:host([variant=h5]),:host([variant=h6]){color:var(--dds-text-heading-color)}:host([inverted]) :host([variant=h1]),:host([inverted]) :host([variant=h2]),:host([inverted]) :host([variant=h3]),:host([inverted]) :host([variant=h4]),:host([inverted]) :host([variant=h5]),:host([inverted]) :host([variant=h6]){color:var(--dds-text-heading-color-inverted)}:host([variant=description]){color:var(--dds-text-description-color)}:host([inverted]) :host([variant=description]){color:var(--dds-text-description-color-inverted)}:host([variant=body]){color:var(--dds-text-color)}:host([inverted]) :host([variant=body]){color:var(--dds-text-color-inverted)}:host([variant=caption]){color:var(--dds-text-description-color)}:host([inverted]) :host([variant=caption]){color:var(--dds-text-description-color-inverted)}.typography{margin:0;font-family:var(--dds-text-font-family);font-weight:var(--dds-text-font-weight-medium);letter-spacing:0}.heading{font-weight:var(--dds-text-font-weight-bold);line-height:var(--dds-font-line-height-large)}.typography-h1{font-size:var(--dds-text-font-size-h1);letter-spacing:-.72px}@media (width >= 768px){.typography-h1{font-size:var(--dds-text-font-size-h1);letter-spacing:-.8px;line-height:var(--dds-font-line-height-xlarge)}}.typography-h2{font-size:var(--dds-text-font-size-h2);letter-spacing:-.56px}.typography-h3{font-size:var(--dds-text-font-size-h3);letter-spacing:-.48px}.typography-h4{font-size:var(--dds-text-font-size-h4);letter-spacing:-.4px}.typography-h5{font-size:var(--dds-text-font-size-h5)}.typography-h6{font-size:var(--dds-text-font-size-h6)}.typography-body{font-size:var(--dds-text-font-size-body);line-height:var(--dds-font-line-height-xlarge)}.typography-caption{font-size:var(--dds-text-font-size-caption);line-height:var(--dds-font-line-height-xlarge)}.typography-description{font-size:var(--dds-text-font-size-description);line-height:var(--dds-font-line-height-xlarge)}.typography-description-lg{font-size:var(--dds-text-font-size-description-lg);line-height:var(--dds-font-line-height-xlarge)}.typography-description-sm{font-size:var(--dds-text-font-size-description-sm);line-height:var(--dds-font-line-height-xlarge)}.typography-size-lg{font-size:var(--dds-text-font-size-lg);letter-spacing:0;line-height:var(--dds-font-line-height-xlarge)}.typography-size-md{font-size:var(--dds-text-font-size-md);letter-spacing:0;line-height:var(--dds-font-line-height-xlarge)}.typography-size-sm{font-size:var(--dds-text-font-size-sm);letter-spacing:0;line-height:var(--dds-font-line-height-xlarge)}.typography-size-xs{font-size:var(--dds-text-font-size-xs);letter-spacing:0;line-height:var(--dds-font-line-height-xlarge)}.typography-inverted{color:var(--dds-text-color-inverted)}.typography-heading-inverted{color:var(--dds-text-heading-color-inverted)}.typography-description-inverted{color:var(--dds-text-description-color-inverted)}:host{--dds-code-puncher-gap: var(--dds-spacing-100);--dds-code-puncher-group-gap: var(--dds-spacing-100);display:block;width:100%}.code-puncher{display:flex;flex-direction:column}.code-puncher__slots{display:flex;flex-wrap:wrap;align-items:center;gap:var(--dds-code-puncher-gap)}.code-puncher--disabled{opacity:.6;pointer-events:none}.code-puncher--readonly .code-puncher__slots{pointer-events:none}.info-button{color:var(--dds-icon-neutral-subtle)}';
+export {
+  t as default
+};
+//# sourceMappingURL=code-puncher.scss.js.map

package/dist/components/code-puncher/code-puncher.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-puncher.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}