@sken-ds/primitives 0.3.6 → 0.3.8

package/dist/sken-switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"sken-switch.js","names":["#controlled","#getInput","#handleChange","#handleFocus","#handleBlur"],"sources":["../src/components/sken-switch.ts"],"sourcesContent":["// ── <sken-switch> — framework-ready Web Component ────────────────────\n// Wraps a native <input type=\"checkbox\"> with role=\"switch\" and a\n// custom track + thumb. For immediate-effect toggles (the action\n// applies on click, not at form submit). For selections that commit\n// on submit, use <sken-checkbox> instead.\n//\n// Contract uses `on` / `defaultOn` (not `checked` /\n// `defaultChecked`) to reinforce semantic intent: a switch is \"on\"\n// or \"off\", not \"checked\" or \"unchecked\". Requires @sken-ds/theme/css\n// (ADR-0006).\n\nimport { LitElement, html, css } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\n@customElement('sken-switch')\nexport class SkenSwitch extends LitElement {\n  // `on` distinguishes \"uncontrolled\" (consumer never assigns the\n  // prop) from \"controlled\" (consumer assigns `true` or `false`).\n  // Lit's `@property({ type: Boolean })` collapses \"absent\" to\n  // `false`, which makes the two cases indistinguishable. We use\n  // a custom converter that maps the attribute presence\n  // (`<sken-switch on>`) to `true` and the attribute absence to\n  // `undefined`, and the prop setter distinguishes `undefined`\n  // (\"uncontrolled\") from `true`/`false` (\"controlled\"). The Vue\n  // adapter must NOT bind the `on` prop when the consumer did\n  // not pass `:on`, so the setter is never called and the\n  // primitive stays uncontrolled.\n  private _on: boolean | undefined = undefined\n  private _onSet: boolean = false\n  // The custom converter maps attribute absence to `undefined`\n  // (the \"uncontrolled\" sentinel) and attribute presence to\n  // `true`. The prop setter also accepts `false` (controlled-\n  // with-false) and `true` (controlled-with-true).\n  @property({\n    attribute: 'on',\n    converter: {\n      fromAttribute: (value: string | null) => (value === null ? undefined : true),\n      toAttribute: (value: boolean | undefined) => (value ? '' : null),\n    },\n    hasChanged: () => true,\n  })\n  set on(v: boolean | undefined) {\n    this._on = v\n    this._onSet = v !== undefined\n    this.requestUpdate()\n  }\n  get on(): boolean | undefined {\n    return this._on\n  }\n  /** True when the consumer has explicitly bound the `on` prop. */\n  get #controlled(): boolean {\n    return this._onSet\n  }\n\n  @property({ attribute: 'default-on', type: Boolean })\n  defaultOn: boolean | undefined = undefined\n  @property({ reflect: true, type: Boolean }) disabled = false\n  @property({ reflect: true, type: Boolean }) readonly = false\n  @property({ reflect: true, type: Boolean }) required = false\n  @property({ attribute: 'described-by-id' }) describedById: string | undefined = undefined\n  @property() name: string | undefined = undefined\n\n  // string | null matches lib.dom.d.ts; the contract normalizes to\n  // string | undefined for the public API.\n  @property({ attribute: 'aria-label' }) override ariaLabel: string | null = null\n\n  // @state so Lit picks up changes and re-runs updated().\n  @state() private _uncontrolled: boolean = false\n\n  static styles = css`\n    :host {\n      display: inline-block;\n      vertical-align: middle;\n    }\n\n    :host([disabled]) {\n      cursor: not-allowed;\n      opacity: var(--sken-disabled);\n    }\n\n    /* The <label> wraps the hidden input + visible track + slot\n       label. It carries the layout styles so the whole control\n       looks like a single inline-flex row. */\n    label {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--sken-2);\n      cursor: pointer;\n      color: var(--sken-foreground);\n      font-family: var(--sken-family-sans);\n      font-size: var(--sken-size-md);\n      line-height: 1.25;\n    }\n\n    :host([disabled]) label {\n      cursor: not-allowed;\n    }\n\n    /* Visually hidden but accessible input (same pattern as sken-checkbox). */\n    input {\n      position: absolute;\n      inline-size: 1px;\n      block-size: 1px;\n      padding: 0;\n      margin: -1px;\n      overflow: hidden;\n      clip: rect(0, 0, 0, 0);\n      white-space: nowrap;\n      border: 0;\n    }\n\n    .track {\n      position: relative;\n      box-sizing: border-box;\n      inline-size: 2.5rem;\n      block-size: 1.375rem;\n      padding: 2px;\n      border-radius: 999px;\n      background: var(--sken-border);\n      transition: background-color 160ms ease;\n    }\n\n    .thumb {\n      display: block;\n      inline-size: calc(1.375rem - 4px);\n      block-size: calc(1.375rem - 4px);\n      border-radius: 50%;\n      background: var(--sken-input);\n      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);\n      transition: transform 160ms ease;\n      transform: translateX(0);\n    }\n\n    :host([data-on]) .track {\n      background: var(--sken-primary);\n    }\n    :host([data-on]) .thumb {\n      transform: translateX(1.125rem);\n    }\n\n    :host(:focus-within) .track {\n      outline: 2px solid var(--sken-ring, currentColor);\n      outline-offset: 2px;\n    }\n    :host(:focus-within) {\n      outline: none;\n    }\n\n    .label {\n      user-select: none;\n    }\n  `\n\n  override connectedCallback(): void {\n    super.connectedCallback()\n    if (this.on === undefined) {\n      this._uncontrolled = this.defaultOn ?? false\n    }\n  }\n\n  protected override updated(): void {\n    const input = this.#getInput()\n    if (!input) return\n    const isOn = (this.#controlled ? this.on : this._uncontrolled) ?? false\n    input.checked = isOn\n    if (isOn) this.setAttribute('data-on', '')\n    else this.removeAttribute('data-on')\n  }\n\n  protected override render() {\n    // The visible UI (track + thumb + label) is wrapped in a\n    // `<label>` element so clicking anywhere on it toggles the\n    // hidden input. This is the standard WAI-ARIA pattern for a\n    // custom-styled checkbox / switch. Without the label, the\n    // visually-hidden input would never receive a click event and\n    // the switch would look completely inert to mouse / touch.\n    return html`\n      <label>\n        <input\n          part=\"input\"\n          type=\"checkbox\"\n          role=\"switch\"\n          aria-checked=${this.on === undefined ? String(this._uncontrolled) : String(this.on)}\n          ?disabled=${this.disabled}\n          ?readonly=${this.readonly}\n          ?required=${this.required}\n          aria-describedby=${this.describedById ?? ''}\n          aria-label=${this.ariaLabel ?? ''}\n          name=${this.name ?? ''}\n          @change=${this.#handleChange}\n          @focus=${this.#handleFocus}\n          @blur=${this.#handleBlur}\n        />\n        <span class=\"track\" part=\"track\" aria-hidden=\"true\">\n          <span class=\"thumb\" part=\"thumb\"></span>\n        </span>\n        <span class=\"label\" part=\"label\">\n          <slot></slot>\n        </span>\n      </label>\n    `\n  }\n\n  #handleChange = (event: Event) => {\n    const target = event.target as HTMLInputElement\n    const newValue = target.checked\n    // Disabled: the browser already blocks the change, but we\n    // double-check here in case the input was disabled\n    // programmatically (no click event) or in case the consumer\n    // toggled `disabled` mid-flight. Either way, do not advance\n    // state.\n    if (this.disabled) {\n      target.checked = this.#controlled ? this.on === true : this._uncontrolled\n      return\n    }\n    // Readonly: the native `<input type=\"checkbox\">` does NOT\n    // block the toggle on click (readonly only affects text\n    // inputs), so the input flips visually. We revert the flip\n    // and skip the change event so the consumer never sees it.\n    // The `data-on` attribute is set in `updated()` from the\n    // controlled / uncontrolled value, so the visual stays in\n    // sync after the revert.\n    if (this.readonly) {\n      const value = this.#controlled ? this.on === true : this._uncontrolled\n      target.checked = value\n      this.requestUpdate()\n      return\n    }\n    // In uncontrolled mode, the consumer does not own the value,\n    // so we update the internal `@state` and let Lit re-render.\n    // In controlled mode, the consumer owns the value: we do NOT\n    // touch the internal state (the consumer's next prop change\n    // will drive the next render). Either way, the input's\n    // `change` event already flipped `target.checked` in the DOM\n    // and we emit `sken-change` for both modes so the consumer\n    // can sync.\n    if (!this.#controlled) {\n      this._uncontrolled = newValue\n    }\n    this.dispatchEvent(\n      new CustomEvent<boolean>('sken-change', { detail: newValue, bubbles: true, composed: true }),\n    )\n  }\n\n  #handleFocus = (event: FocusEvent) => {\n    this.dispatchEvent(\n      new CustomEvent<FocusEvent>('sken-focus', { detail: event, bubbles: true, composed: true }),\n    )\n  }\n\n  #handleBlur = (event: FocusEvent) => {\n    this.dispatchEvent(\n      new CustomEvent<FocusEvent>('sken-blur', { detail: event, bubbles: true, composed: true }),\n    )\n  }\n\n  #getInput(): HTMLInputElement | null {\n    return this.shadowRoot?.querySelector('input') ?? null\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'sken-switch': SkenSwitch\n  }\n}\n"],"mappings":";;;;AAeO,IAAM,IAAN,cAAyB,EAAW;;EA2O1B,aA/NoB,KAAA,MAAA,KAAA,GACT,KAAA,SAAA,IA2BO,KAAA,YAAA,KAAA,GACsB,KAAA,WAAA,IACA,KAAA,WAAA,IACA,KAAA,WAAA,IACyB,KAAA,gBAAA,KAAA,GACzC,KAAA,OAAA,KAAA,GAIoC,KAAA,YAAA,MAGjC,KAAA,gBAAA,IAwIzB,KAAA,MAAA,MAAiB;GAChC,IAAM,IAAS,EAAM,QACf,IAAW,EAAO;GAMxB,IAAI,KAAK,UAAU;IACjB,EAAO,UAAU,KAAKA,KAAc,KAAK,OAAO,KAAO,KAAK;IAC5D;GACF;GAQA,IAAI,KAAK,UAAU;IAGjB,AADA,EAAO,UADO,KAAKA,KAAc,KAAK,OAAO,KAAO,KAAK,eAEzD,KAAK,cAAc;IACnB;GACF;GAYA,AAHK,KAAKA,OACR,KAAK,gBAAgB,IAEvB,KAAK,cACH,IAAI,YAAqB,eAAe;IAAE,QAAQ;IAAU,SAAS;IAAM,UAAU;GAAK,CAAC,CAC7F;EACF,GAEgB,KAAA,MAAA,MAAsB;GACpC,KAAK,cACH,IAAI,YAAwB,cAAc;IAAE,QAAQ;IAAO,SAAS;IAAM,UAAU;GAAK,CAAC,CAC5F;EACF,GAEe,KAAA,MAAA,MAAsB;GACnC,KAAK,cACH,IAAI,YAAwB,aAAa;IAAE,QAAQ;IAAO,SAAS;IAAM,UAAU;GAAK,CAAC,CAC3F;EACF;;CA7NA,IAQI,GAAG,GAAwB;EAG7B,AAFA,KAAK,MAAM,GACX,KAAK,SAAS,MAAM,KAAA,GACpB,KAAK,cAAc;CACrB;CACA,IAAI,KAA0B;EAC5B,OAAO,KAAK;CACd;CAEA,IAAIA,KAAuB;EACzB,OAAO,KAAK;CACd;;EAiBgB,KAAA,SAAA,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoFnB,oBAAmC;EAEjC,AADA,MAAM,kBAAkB,GACpB,KAAK,OAAO,KAAA,MACd,KAAK,gBAAgB,KAAK,aAAa;CAE3C;CAEA,UAAmC;EACjC,IAAM,IAAQ,KAAKC,GAAU;EAC7B,IAAI,CAAC,GAAO;EACZ,IAAM,KAAQ,KAAKD,KAAc,KAAK,KAAK,KAAK,kBAAkB;EAElE,AADA,EAAM,UAAU,GACZ,IAAM,KAAK,aAAa,WAAW,EAAE,IACpC,KAAK,gBAAgB,SAAS;CACrC;CAEA,SAA4B;EAO1B,OAAO,CAAI;;;;;;yBAMU,KAAK,OAAO,KAAA,IAAY,OAAO,KAAK,aAAa,IAAI,OAAO,KAAK,EAAE,EAAE;sBACxE,KAAK,SAAS;sBACd,KAAK,SAAS;sBACd,KAAK,SAAS;6BACP,KAAK,iBAAiB,GAAG;uBAC/B,KAAK,aAAa,GAAG;iBAC3B,KAAK,QAAQ,GAAG;oBACb,KAAKE,GAAc;mBACpB,KAAKC,GAAa;kBACnB,KAAKC,GAAY;;;;;;;;;;CAUjC;CAEA;CAyCA;CAMA;CAMA,KAAqC;EACnC,OAAO,KAAK,YAAY,cAAc,OAAO,KAAK;CACpD;AACF;AAlOG,EAAA,CAAA,EAAS;CACR,WAAW;CACX,WAAW;EACT,gBAAgB,MAA0B,MAAU,QAAO,KAAA;EAC3D,cAAc,MAAgC,IAAQ,KAAK;CAC7D;CACA,kBAAkB;AACpB,CAAC,CAAA,GAAA,EAAA,WAAA,MAAA,IAAA,GAcA,EAAA,CAAA,EAAS;CAAE,WAAW;CAAc,MAAM;AAAQ,CAAC,CAAA,GAAA,EAAA,WAAA,aAAA,KAAA,CAAA,GAEnD,EAAA,CAAA,EAAS;CAAE,SAAS;CAAM,MAAM;AAAQ,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,GACzC,EAAA,CAAA,EAAS;CAAE,SAAS;CAAM,MAAM;AAAQ,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,GACzC,EAAA,CAAA,EAAS;CAAE,SAAS;CAAM,MAAM;AAAQ,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,GACzC,EAAA,CAAA,EAAS,EAAE,WAAW,kBAAkB,CAAC,CAAA,GAAA,EAAA,WAAA,iBAAA,KAAA,CAAA,GACzC,EAAA,CAAA,EAAS,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,GAIT,EAAA,CAAA,EAAS,EAAE,WAAW,aAAa,CAAC,CAAA,GAAA,EAAA,WAAA,aAAA,KAAA,CAAA,GAGpC,EAAA,CAAA,EAAM,CAAA,GAAA,EAAA,WAAA,iBAAA,KAAA,CAAA,GArDR,IAAA,EAAA,CAAA,EAAc,aAAa,CAAA,GAAA,CAAA"}
+{"version":3,"file":"sken-switch.js","names":["#controlled","#getInput","#handleChange","#handleFocus","#handleBlur"],"sources":["../src/components/sken-switch.ts"],"sourcesContent":["// ── <sken-switch> — framework-ready Web Component ────────────────────\n// Wraps a native <input type=\"checkbox\"> with role=\"switch\" and a\n// custom track + thumb. For immediate-effect toggles (the action\n// applies on click, not at form submit). For selections that commit\n// on submit, use <sken-checkbox> instead.\n//\n// Contract uses `on` / `defaultOn` (not `checked` /\n// `defaultChecked`) to reinforce semantic intent: a switch is \"on\"\n// or \"off\", not \"checked\" or \"unchecked\". Requires @sken-ds/theme/css\n// (ADR-0006).\n\nimport { LitElement, css, html } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\n@customElement('sken-switch')\nexport class SkenSwitch extends LitElement {\n  // `on` distinguishes \"uncontrolled\" (consumer never assigns the\n  // prop) from \"controlled\" (consumer assigns `true` or `false`).\n  // Lit's `@property({ type: Boolean })` collapses \"absent\" to\n  // `false`, which makes the two cases indistinguishable. We use\n  // a custom converter that maps the attribute presence\n  // (`<sken-switch on>`) to `true` and the attribute absence to\n  // `undefined`, and the prop setter distinguishes `undefined`\n  // (\"uncontrolled\") from `true`/`false` (\"controlled\"). The Vue\n  // adapter must NOT bind the `on` prop when the consumer did\n  // not pass `:on`, so the setter is never called and the\n  // primitive stays uncontrolled.\n  private _on: boolean | undefined = undefined\n  private _onSet: boolean = false\n  // The custom converter maps attribute absence to `undefined`\n  // (the \"uncontrolled\" sentinel) and attribute presence to\n  // `true`. The prop setter also accepts `false` (controlled-\n  // with-false) and `true` (controlled-with-true).\n  @property({\n    attribute: 'on',\n    converter: {\n      fromAttribute: (value: string | null) => (value === null ? undefined : true),\n      toAttribute: (value: boolean | undefined) => (value ? '' : null),\n    },\n    hasChanged: () => true,\n  })\n  set on(v: boolean | undefined) {\n    this._on = v\n    this._onSet = v !== undefined\n    this.requestUpdate()\n  }\n  get on(): boolean | undefined {\n    return this._on\n  }\n  /** True when the consumer has explicitly bound the `on` prop. */\n  get #controlled(): boolean {\n    return this._onSet\n  }\n\n  @property({ attribute: 'default-on', type: Boolean })\n  defaultOn: boolean | undefined = undefined\n  @property({ reflect: true, type: Boolean }) disabled = false\n  @property({ reflect: true, type: Boolean }) readonly = false\n  @property({ reflect: true, type: Boolean }) required = false\n  @property({ attribute: 'described-by-id' }) describedById: string | undefined = undefined\n  @property() name: string | undefined = undefined\n\n  // string | null matches lib.dom.d.ts; the contract normalizes to\n  // string | undefined for the public API.\n  @property({ attribute: 'aria-label' }) override ariaLabel: string | null = null\n\n  // @state so Lit picks up changes and re-runs updated().\n  @state() private _uncontrolled: boolean = false\n\n  static styles = css`\n    :host {\n      display: inline-block;\n      vertical-align: middle;\n    }\n\n    :host([disabled]) {\n      cursor: not-allowed;\n      opacity: var(--sken-disabled);\n    }\n\n    /* The <label> wraps the hidden input + visible track + slot\n       label. It carries the layout styles so the whole control\n       looks like a single inline-flex row. */\n    label {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--sken-2);\n      cursor: pointer;\n      color: var(--sken-foreground);\n      font-family: var(--sken-family-sans);\n      font-size: var(--sken-size-md);\n      line-height: 1.25;\n    }\n\n    :host([disabled]) label {\n      cursor: not-allowed;\n    }\n\n    /* Visually hidden but accessible input (same pattern as sken-checkbox). */\n    input {\n      position: absolute;\n      inline-size: 1px;\n      block-size: 1px;\n      padding: 0;\n      margin: -1px;\n      overflow: hidden;\n      clip: rect(0, 0, 0, 0);\n      white-space: nowrap;\n      border: 0;\n    }\n\n    .track {\n      position: relative;\n      box-sizing: border-box;\n      inline-size: 2.5rem;\n      block-size: 1.375rem;\n      padding: 2px;\n      border-radius: 999px;\n      background: var(--sken-border);\n      transition: background-color 160ms ease;\n    }\n\n    .thumb {\n      display: block;\n      inline-size: calc(1.375rem - 4px);\n      block-size: calc(1.375rem - 4px);\n      border-radius: 50%;\n      background: var(--sken-input);\n      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);\n      transition: transform 160ms ease;\n      transform: translateX(0);\n    }\n\n    :host([data-on]) .track {\n      background: var(--sken-primary);\n    }\n    :host([data-on]) .thumb {\n      transform: translateX(1.125rem);\n    }\n\n    :host(:focus-within) .track {\n      outline: 2px solid var(--sken-ring, currentColor);\n      outline-offset: 2px;\n    }\n    :host(:focus-within) {\n      outline: none;\n    }\n\n    .label {\n      user-select: none;\n    }\n  `\n\n  override connectedCallback(): void {\n    super.connectedCallback()\n    if (this.on === undefined) {\n      this._uncontrolled = this.defaultOn ?? false\n    }\n  }\n\n  protected override updated(): void {\n    const input = this.#getInput()\n    if (!input) return\n    const isOn = (this.#controlled ? this.on : this._uncontrolled) ?? false\n    input.checked = isOn\n    if (isOn) this.setAttribute('data-on', '')\n    else this.removeAttribute('data-on')\n  }\n\n  protected override render() {\n    // The visible UI (track + thumb + label) is wrapped in a\n    // `<label>` element so clicking anywhere on it toggles the\n    // hidden input. This is the standard WAI-ARIA pattern for a\n    // custom-styled checkbox / switch. Without the label, the\n    // visually-hidden input would never receive a click event and\n    // the switch would look completely inert to mouse / touch.\n    return html`\n      <label>\n        <input\n          part=\"input\"\n          type=\"checkbox\"\n          role=\"switch\"\n          aria-checked=${this.on === undefined ? String(this._uncontrolled) : String(this.on)}\n          ?disabled=${this.disabled}\n          ?readonly=${this.readonly}\n          ?required=${this.required}\n          aria-describedby=${this.describedById ?? ''}\n          aria-label=${this.ariaLabel ?? ''}\n          name=${this.name ?? ''}\n          @change=${this.#handleChange}\n          @focus=${this.#handleFocus}\n          @blur=${this.#handleBlur}\n        />\n        <span class=\"track\" part=\"track\" aria-hidden=\"true\">\n          <span class=\"thumb\" part=\"thumb\"></span>\n        </span>\n        <span class=\"label\" part=\"label\">\n          <slot></slot>\n        </span>\n      </label>\n    `\n  }\n\n  #handleChange = (event: Event) => {\n    const target = event.target as HTMLInputElement\n    const newValue = target.checked\n    // Disabled: the browser already blocks the change, but we\n    // double-check here in case the input was disabled\n    // programmatically (no click event) or in case the consumer\n    // toggled `disabled` mid-flight. Either way, do not advance\n    // state.\n    if (this.disabled) {\n      target.checked = this.#controlled ? this.on === true : this._uncontrolled\n      return\n    }\n    // Readonly: the native `<input type=\"checkbox\">` does NOT\n    // block the toggle on click (readonly only affects text\n    // inputs), so the input flips visually. We revert the flip\n    // and skip the change event so the consumer never sees it.\n    // The `data-on` attribute is set in `updated()` from the\n    // controlled / uncontrolled value, so the visual stays in\n    // sync after the revert.\n    if (this.readonly) {\n      const value = this.#controlled ? this.on === true : this._uncontrolled\n      target.checked = value\n      this.requestUpdate()\n      return\n    }\n    // In uncontrolled mode, the consumer does not own the value,\n    // so we update the internal `@state` and let Lit re-render.\n    // In controlled mode, the consumer owns the value: we do NOT\n    // touch the internal state (the consumer's next prop change\n    // will drive the next render). Either way, the input's\n    // `change` event already flipped `target.checked` in the DOM\n    // and we emit `sken-change` for both modes so the consumer\n    // can sync.\n    if (!this.#controlled) {\n      this._uncontrolled = newValue\n    }\n    this.dispatchEvent(\n      new CustomEvent<boolean>('sken-change', { detail: newValue, bubbles: true, composed: true }),\n    )\n  }\n\n  #handleFocus = (event: FocusEvent) => {\n    this.dispatchEvent(\n      new CustomEvent<FocusEvent>('sken-focus', { detail: event, bubbles: true, composed: true }),\n    )\n  }\n\n  #handleBlur = (event: FocusEvent) => {\n    this.dispatchEvent(\n      new CustomEvent<FocusEvent>('sken-blur', { detail: event, bubbles: true, composed: true }),\n    )\n  }\n\n  #getInput(): HTMLInputElement | null {\n    return this.shadowRoot?.querySelector('input') ?? null\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'sken-switch': SkenSwitch\n  }\n}\n"],"mappings":";;;;AAeO,IAAM,IAAN,cAAyB,EAAW;;EA2O1B,aA/NoB,KAAA,MAAA,KAAA,GACT,KAAA,SAAA,IA2BO,KAAA,YAAA,KAAA,GACsB,KAAA,WAAA,IACA,KAAA,WAAA,IACA,KAAA,WAAA,IACyB,KAAA,gBAAA,KAAA,GACzC,KAAA,OAAA,KAAA,GAIoC,KAAA,YAAA,MAGjC,KAAA,gBAAA,IAwIzB,KAAA,MAAA,MAAiB;GAChC,IAAM,IAAS,EAAM,QACf,IAAW,EAAO;GAMxB,IAAI,KAAK,UAAU;IACjB,EAAO,UAAU,KAAKA,KAAc,KAAK,OAAO,KAAO,KAAK;IAC5D;GACF;GAQA,IAAI,KAAK,UAAU;IAGjB,AADA,EAAO,UADO,KAAKA,KAAc,KAAK,OAAO,KAAO,KAAK,eAEzD,KAAK,cAAc;IACnB;GACF;GAYA,AAHK,KAAKA,OACR,KAAK,gBAAgB,IAEvB,KAAK,cACH,IAAI,YAAqB,eAAe;IAAE,QAAQ;IAAU,SAAS;IAAM,UAAU;GAAK,CAAC,CAC7F;EACF,GAEgB,KAAA,MAAA,MAAsB;GACpC,KAAK,cACH,IAAI,YAAwB,cAAc;IAAE,QAAQ;IAAO,SAAS;IAAM,UAAU;GAAK,CAAC,CAC5F;EACF,GAEe,KAAA,MAAA,MAAsB;GACnC,KAAK,cACH,IAAI,YAAwB,aAAa;IAAE,QAAQ;IAAO,SAAS;IAAM,UAAU;GAAK,CAAC,CAC3F;EACF;;CA7NA,IAQI,GAAG,GAAwB;EAG7B,AAFA,KAAK,MAAM,GACX,KAAK,SAAS,MAAM,KAAA,GACpB,KAAK,cAAc;CACrB;CACA,IAAI,KAA0B;EAC5B,OAAO,KAAK;CACd;CAEA,IAAIA,KAAuB;EACzB,OAAO,KAAK;CACd;;EAiBgB,KAAA,SAAA,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoFnB,oBAAmC;EAEjC,AADA,MAAM,kBAAkB,GACpB,KAAK,OAAO,KAAA,MACd,KAAK,gBAAgB,KAAK,aAAa;CAE3C;CAEA,UAAmC;EACjC,IAAM,IAAQ,KAAKC,GAAU;EAC7B,IAAI,CAAC,GAAO;EACZ,IAAM,KAAQ,KAAKD,KAAc,KAAK,KAAK,KAAK,kBAAkB;EAElE,AADA,EAAM,UAAU,GACZ,IAAM,KAAK,aAAa,WAAW,EAAE,IACpC,KAAK,gBAAgB,SAAS;CACrC;CAEA,SAA4B;EAO1B,OAAO,CAAI;;;;;;yBAMU,KAAK,OAAO,KAAA,IAAY,OAAO,KAAK,aAAa,IAAI,OAAO,KAAK,EAAE,EAAE;sBACxE,KAAK,SAAS;sBACd,KAAK,SAAS;sBACd,KAAK,SAAS;6BACP,KAAK,iBAAiB,GAAG;uBAC/B,KAAK,aAAa,GAAG;iBAC3B,KAAK,QAAQ,GAAG;oBACb,KAAKE,GAAc;mBACpB,KAAKC,GAAa;kBACnB,KAAKC,GAAY;;;;;;;;;;CAUjC;CAEA;CAyCA;CAMA;CAMA,KAAqC;EACnC,OAAO,KAAK,YAAY,cAAc,OAAO,KAAK;CACpD;AACF;AAlOG,EAAA,CAAA,EAAS;CACR,WAAW;CACX,WAAW;EACT,gBAAgB,MAA0B,MAAU,QAAO,KAAA;EAC3D,cAAc,MAAgC,IAAQ,KAAK;CAC7D;CACA,kBAAkB;AACpB,CAAC,CAAA,GAAA,EAAA,WAAA,MAAA,IAAA,GAcA,EAAA,CAAA,EAAS;CAAE,WAAW;CAAc,MAAM;AAAQ,CAAC,CAAA,GAAA,EAAA,WAAA,aAAA,KAAA,CAAA,GAEnD,EAAA,CAAA,EAAS;CAAE,SAAS;CAAM,MAAM;AAAQ,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,GACzC,EAAA,CAAA,EAAS;CAAE,SAAS;CAAM,MAAM;AAAQ,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,GACzC,EAAA,CAAA,EAAS;CAAE,SAAS;CAAM,MAAM;AAAQ,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,GACzC,EAAA,CAAA,EAAS,EAAE,WAAW,kBAAkB,CAAC,CAAA,GAAA,EAAA,WAAA,iBAAA,KAAA,CAAA,GACzC,EAAA,CAAA,EAAS,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,GAIT,EAAA,CAAA,EAAS,EAAE,WAAW,aAAa,CAAC,CAAA,GAAA,EAAA,WAAA,aAAA,KAAA,CAAA,GAGpC,EAAA,CAAA,EAAM,CAAA,GAAA,EAAA,WAAA,iBAAA,KAAA,CAAA,GArDR,IAAA,EAAA,CAAA,EAAc,aAAa,CAAA,GAAA,CAAA"}

package/dist/sken-textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"sken-textarea.js","names":["#internalValue","#syncFormValue","#internals","#handleInput","#handleChange","#handleFocus","#handleBlur","#handleKeydown"],"sources":["../src/components/sken-textarea.ts"],"sourcesContent":["// ── <sken-textarea> — framework-ready Web Component ────────────────\n// Multiline text input. Wraps a native <textarea> with token-driven\n// styles and the same shadow-DOM event surface as <sken-input>.\n// Slots are placed above (start) and below (end) the textarea, not\n// to the sides — multiline editors don't lend themselves to\n// horizontal adornments the way single-line inputs do.\n//\n// Requires @sken-ds/theme/css (ADR-0006). Pairs with @sken-ds/contracts'\n// SkenTextareaProps / SkenTextareaSlots / SkenTextareaEmits.\n\nimport { LitElement, html, css } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport type {\n  SkenTextareaSize,\n  SkenTextareaResize,\n} from '@sken-ds/contracts'\n\n@customElement('sken-textarea')\nexport class SkenTextarea extends LitElement {\n  // Form-associated custom element. Opt in to the\n  // ElementInternals API so this primitive participates in\n  // the surrounding <form>'s submit/reset lifecycle and\n  // FormData(form) picks up the textarea's value under its\n  // `name` attribute. See SkenInput for the full rationale;\n  // the pattern is identical. Lit docs:\n  // https://lit.dev/docs/components/form/\n  static formAssociated = true\n\n  // The ElementInternals instance. Created in the constructor\n  // via attachInternals(), which the browser only makes\n  // available because `formAssociated` is true. Nullable to\n  // gracefully degrade in test environments that do not\n  // implement ElementInternals.\n  #internals: ElementInternals | null = null\n\n  constructor() {\n    super()\n    try {\n      this.#internals = this.attachInternals()\n    } catch {\n      this.#internals = null\n    }\n  }\n\n  @property({ reflect: true }) size: SkenTextareaSize = 'md'\n  @property({ reflect: true, type: Number }) rows = 4\n  @property({ reflect: true, type: Number }) cols: number | undefined = undefined\n  @property({ attribute: 'max-length', type: Number }) maxLength: number | undefined = undefined\n  @property({ reflect: true }) resize: SkenTextareaResize = 'vertical'\n  @property() placeholder: string | undefined = undefined\n  @property() value: string | undefined = undefined\n  @property({ attribute: 'default-value' }) defaultValue: string | undefined = undefined\n  @property({ reflect: true, type: Boolean }) disabled = false\n  @property({ reflect: true, type: Boolean }) readonly = false\n  @property({ reflect: true, type: Boolean }) required = false\n  @property({ reflect: true, type: Boolean }) invalid = false\n  @property({ attribute: 'described-by-id' }) describedById: string | undefined = undefined\n  @property() name: string | undefined = undefined\n\n  // Internal value for uncontrolled mode. Seeded from `defaultValue`\n  // on first connection; from then on the DOM textarea keeps the\n  // source of truth. Same pattern as SkenInput.\n  #internalValue: string = ''\n\n  static styles = css`\n    :host {\n      display: inline-block;\n      inline-size: 100%;\n    }\n\n    .textarea-wrapper {\n      position: relative;\n      display: flex;\n      flex-direction: column;\n      inline-size: 100%;\n    }\n\n    textarea {\n      box-sizing: border-box;\n      inline-size: 100%;\n      border: 1px solid var(--sken-border);\n      border-radius: var(--sken-md);\n      background: var(--sken-input);\n      color: var(--sken-foreground);\n      font-family: var(--sken-family-sans);\n      font-size: var(--sken-size-md);\n      line-height: 1.5;\n      padding-block: var(--sken-2);\n      padding-inline: var(--sken-3);\n      min-block-size: 4.5rem;\n      transition:\n        border-color 120ms ease,\n        box-shadow 120ms ease;\n      /* Resize is controlled by the resize attribute, not by\n         user-agent stylesheet, so consumers can override. */\n    }\n\n    textarea::placeholder {\n      color: var(--sken-muted-foreground);\n      opacity: 1;\n    }\n\n    /* ── Slot containers ──────────────────────────────────────\n       Position: relative (not absolute) so the slotted content\n       flows naturally above and below the textarea. The wrapper\n       has a flex column, so the textarea's vertical padding is\n       NOT auto-adjusted (unlike SkenInput). Slot height adds to\n       the wrapper's natural height. */\n    .slot {\n      display: flex;\n      align-items: center;\n      color: var(--sken-muted-foreground);\n      min-block-size: 0.25rem;\n    }\n\n    .slot-start {\n      padding-block-end: 0.25rem;\n    }\n\n    .slot-end {\n      padding-block-start: 0.25rem;\n    }\n\n    /* ── Sizes ────────────────────────────────────────────────── */\n    :host([size='sm']) textarea {\n      padding-block: var(--sken-1);\n      padding-inline: var(--sken-2);\n      font-size: var(--sken-size-sm);\n    }\n    :host([size='md']) textarea {\n      /* Default styles above. */\n    }\n    :host([size='lg']) textarea {\n      padding-block: var(--sken-3);\n      padding-inline: var(--sken-4);\n      font-size: var(--sken-size-lg);\n    }\n\n    /* ── Resize policies ────────────────────────────────────── */\n    :host([resize='none']) textarea {\n      resize: none;\n    }\n    :host([resize='vertical']) textarea {\n      resize: vertical;\n    }\n    :host([resize='horizontal']) textarea {\n      resize: horizontal;\n    }\n    :host([resize='both']) textarea {\n      resize: both;\n    }\n\n    /* ── States ───────────────────────────────────────────────── */\n    .textarea-wrapper:hover textarea:not(:disabled):not(:read-only) {\n      border-color: var(--sken-foreground);\n    }\n    .textarea-wrapper:focus-within textarea {\n      outline: 2px solid var(--sken-ring, currentColor);\n      outline-offset: 2px;\n      border-color: var(--sken-primary);\n    }\n    textarea:disabled {\n      cursor: not-allowed;\n      opacity: var(--sken-disabled);\n    }\n    textarea:read-only {\n      background: var(--sken-muted);\n    }\n    :host([invalid]) textarea {\n      border-color: var(--sken-destructive);\n    }\n    :host([invalid]) .textarea-wrapper:focus-within textarea {\n      outline-color: var(--sken-destructive);\n    }\n  `\n\n  override connectedCallback(): void {\n    super.connectedCallback()\n    if (this.value === undefined) {\n      this.#internalValue = this.defaultValue ?? ''\n    }\n    // Publish the initial value to the surrounding form.\n    this.#syncFormValue()\n  }\n\n  // ── Form-association callbacks ─────────────────────────────\n  // formResetCallback: for uncontrolled mode, restore the seed\n  // value and re-publish. For controlled mode, re-render and\n  // let Lit re-publish the controlled value.\n  formResetCallback(): void {\n    if (this.value === undefined) {\n      this.#internalValue = this.defaultValue ?? ''\n      const ta = this.renderRoot.querySelector('textarea') as HTMLTextAreaElement | null\n      if (ta) ta.value = this.#internalValue\n      this.#syncFormValue()\n    } else {\n      this.requestUpdate()\n    }\n  }\n\n  // formDisabledCallback: mirror the form's :disabled state onto\n  // the prop. Lit re-renders; the inner <textarea> picks up\n  // `?disabled=${this.disabled}` in the template.\n  formDisabledCallback(isDisabled: boolean): void {\n    this.disabled = isDisabled\n  }\n\n  // Publish the current value to the form. Called on every\n  // change so FormData and submit/reset stay in sync.\n  #syncFormValue(): void {\n    if (!this.#internals) return\n    const value = this.value ?? this.#internalValue\n    this.#internals.setFormValue(value)\n  }\n\n  protected override render() {\n    const value = this.value ?? this.#internalValue\n    return html`\n      <div class=\"textarea-wrapper\" part=\"wrapper\">\n        <div class=\"slot slot-start\" part=\"slot-start\">\n          <slot name=\"start\"></slot>\n        </div>\n        <textarea\n          part=\"textarea\"\n          .value=${value}\n          rows=${this.rows}\n          cols=${this.cols ?? ''}\n          maxlength=${this.maxLength ?? ''}\n          placeholder=${this.placeholder ?? ''}\n          ?disabled=${this.disabled}\n          ?readonly=${this.readonly}\n          ?required=${this.required}\n          aria-invalid=${this.invalid ? 'true' : 'false'}\n          aria-describedby=${this.describedById ?? ''}\n          name=${this.name ?? ''}\n          @input=${this.#handleInput}\n          @change=${this.#handleChange}\n          @focus=${this.#handleFocus}\n          @blur=${this.#handleBlur}\n          @keydown=${this.#handleKeydown}\n        ></textarea>\n        <div class=\"slot slot-end\" part=\"slot-end\">\n          <slot name=\"end\"></slot>\n        </div>\n      </div>\n    `\n  }\n\n  // composed: true on every event so the framework adapter outside\n  // the shadow boundary can listen. Mirrors SkenInput.\n  #handleInput = (event: Event) => {\n    const target = event.target as HTMLTextAreaElement\n    const newValue = target.value\n    if (this.value === undefined) this.#internalValue = newValue\n    // Publish the new value to the surrounding form so submit\n    // and FormData see the latest text. Per-keystroke is fine:\n    // setFormValue is cheap.\n    this.#syncFormValue()\n    this.dispatchEvent(\n      new CustomEvent<string>('sken-input', { detail: newValue, bubbles: true, composed: true }),\n    )\n  }\n\n  #handleChange = (event: Event) => {\n    const target = event.target as HTMLTextAreaElement\n    this.#syncFormValue()\n    this.dispatchEvent(\n      new CustomEvent<string>('sken-change', {\n        detail: target.value,\n        bubbles: true,\n        composed: true,\n      }),\n    )\n  }\n\n  #handleFocus = (event: FocusEvent) => {\n    this.dispatchEvent(\n      new CustomEvent<FocusEvent>('sken-focus', { detail: event, bubbles: true, composed: true }),\n    )\n  }\n\n  #handleBlur = (event: FocusEvent) => {\n    this.dispatchEvent(\n      new CustomEvent<FocusEvent>('sken-blur', { detail: event, bubbles: true, composed: true }),\n    )\n  }\n\n  // Wire Enter-on-the-inner-textarea to the host's associated\n  // form. Mirrors SkenInput.#handleKeydown with one key\n  // difference: textareas are multiline, so the user can press\n  // Shift+Enter to insert a newline. Only Enter WITHOUT shift\n  // submits. The browser's implicit submission algorithm does\n  // not see the inner textarea (shadow boundary), so we bridge\n  // it ourselves via `internals.form.requestSubmit()`.\n  // `isComposing` guards IME composition (Enter to confirm a\n  // kanji candidate is not a submit intent).\n  #handleKeydown = (event: KeyboardEvent) => {\n    if (event.key !== 'Enter' || event.isComposing) return\n    if (event.shiftKey) return // newline; let the browser insert it\n    if (this.disabled || this.readonly) return\n    // preventDefault runs even without ElementInternals support,\n    // keeping the observable behaviour consistent.\n    event.preventDefault()\n    const form = this.#internals?.form\n    if (!form) return\n    form.requestSubmit()\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'sken-textarea': SkenTextarea\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"sken-textarea.js","names":["#internalValue","#syncFormValue","#internals","#handleInput","#handleChange","#handleFocus","#handleBlur","#handleKeydown"],"sources":["../src/components/sken-textarea.ts"],"sourcesContent":["// ── <sken-textarea> — framework-ready Web Component ────────────────\n// Multiline text input. Wraps a native <textarea> with token-driven\n// styles and the same shadow-DOM event surface as <sken-input>.\n// Slots are placed above (start) and below (end) the textarea, not\n// to the sides — multiline editors don't lend themselves to\n// horizontal adornments the way single-line inputs do.\n//\n// Requires @sken-ds/theme/css (ADR-0006). Pairs with @sken-ds/contracts'\n// SkenTextareaProps / SkenTextareaSlots / SkenTextareaEmits.\n\nimport type { SkenTextareaResize, SkenTextareaSize } from '@sken-ds/contracts'\nimport { LitElement, css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\n@customElement('sken-textarea')\nexport class SkenTextarea extends LitElement {\n  // Form-associated custom element. Opt in to the\n  // ElementInternals API so this primitive participates in\n  // the surrounding <form>'s submit/reset lifecycle and\n  // FormData(form) picks up the textarea's value under its\n  // `name` attribute. See SkenInput for the full rationale;\n  // the pattern is identical. Lit docs:\n  // https://lit.dev/docs/components/form/\n  static formAssociated = true\n\n  // The ElementInternals instance. Created in the constructor\n  // via attachInternals(), which the browser only makes\n  // available because `formAssociated` is true. Nullable to\n  // gracefully degrade in test environments that do not\n  // implement ElementInternals.\n  #internals: ElementInternals | null = null\n\n  constructor() {\n    super()\n    try {\n      this.#internals = this.attachInternals()\n    } catch {\n      this.#internals = null\n    }\n  }\n\n  @property({ reflect: true }) size: SkenTextareaSize = 'md'\n  @property({ reflect: true, type: Number }) rows = 4\n  @property({ reflect: true, type: Number }) cols: number | undefined = undefined\n  @property({ attribute: 'max-length', type: Number }) maxLength: number | undefined = undefined\n  @property({ reflect: true }) resize: SkenTextareaResize = 'vertical'\n  @property() placeholder: string | undefined = undefined\n  @property() value: string | undefined = undefined\n  @property({ attribute: 'default-value' }) defaultValue: string | undefined = undefined\n  @property({ reflect: true, type: Boolean }) disabled = false\n  @property({ reflect: true, type: Boolean }) readonly = false\n  @property({ reflect: true, type: Boolean }) required = false\n  @property({ reflect: true, type: Boolean }) invalid = false\n  @property({ attribute: 'described-by-id' }) describedById: string | undefined = undefined\n  @property() name: string | undefined = undefined\n\n  // Internal value for uncontrolled mode. Seeded from `defaultValue`\n  // on first connection; from then on the DOM textarea keeps the\n  // source of truth. Same pattern as SkenInput.\n  #internalValue: string = ''\n\n  static styles = css`\n    :host {\n      display: inline-block;\n      inline-size: 100%;\n    }\n\n    .textarea-wrapper {\n      position: relative;\n      display: flex;\n      flex-direction: column;\n      inline-size: 100%;\n    }\n\n    textarea {\n      box-sizing: border-box;\n      inline-size: 100%;\n      border: 1px solid var(--sken-border);\n      border-radius: var(--sken-md);\n      background: var(--sken-input);\n      color: var(--sken-foreground);\n      font-family: var(--sken-family-sans);\n      font-size: var(--sken-size-md);\n      line-height: 1.5;\n      padding-block: var(--sken-2);\n      padding-inline: var(--sken-3);\n      min-block-size: 4.5rem;\n      transition:\n        border-color 120ms ease,\n        box-shadow 120ms ease;\n      /* Resize is controlled by the resize attribute, not by\n         user-agent stylesheet, so consumers can override. */\n    }\n\n    textarea::placeholder {\n      color: var(--sken-muted-foreground);\n      opacity: 1;\n    }\n\n    /* ── Slot containers ──────────────────────────────────────\n       Position: relative (not absolute) so the slotted content\n       flows naturally above and below the textarea. The wrapper\n       has a flex column, so the textarea's vertical padding is\n       NOT auto-adjusted (unlike SkenInput). Slot height adds to\n       the wrapper's natural height. */\n    .slot {\n      display: flex;\n      align-items: center;\n      color: var(--sken-muted-foreground);\n      min-block-size: 0.25rem;\n    }\n\n    .slot-start {\n      padding-block-end: 0.25rem;\n    }\n\n    .slot-end {\n      padding-block-start: 0.25rem;\n    }\n\n    /* ── Sizes ────────────────────────────────────────────────── */\n    :host([size='sm']) textarea {\n      padding-block: var(--sken-1);\n      padding-inline: var(--sken-2);\n      font-size: var(--sken-size-sm);\n    }\n    :host([size='md']) textarea {\n      /* Default styles above. */\n    }\n    :host([size='lg']) textarea {\n      padding-block: var(--sken-3);\n      padding-inline: var(--sken-4);\n      font-size: var(--sken-size-lg);\n    }\n\n    /* ── Resize policies ────────────────────────────────────── */\n    :host([resize='none']) textarea {\n      resize: none;\n    }\n    :host([resize='vertical']) textarea {\n      resize: vertical;\n    }\n    :host([resize='horizontal']) textarea {\n      resize: horizontal;\n    }\n    :host([resize='both']) textarea {\n      resize: both;\n    }\n\n    /* ── States ───────────────────────────────────────────────── */\n    .textarea-wrapper:hover textarea:not(:disabled):not(:read-only) {\n      border-color: var(--sken-foreground);\n    }\n    .textarea-wrapper:focus-within textarea {\n      outline: 2px solid var(--sken-ring, currentColor);\n      outline-offset: 2px;\n      border-color: var(--sken-primary);\n    }\n    textarea:disabled {\n      cursor: not-allowed;\n      opacity: var(--sken-disabled);\n    }\n    textarea:read-only {\n      background: var(--sken-muted);\n    }\n    :host([invalid]) textarea {\n      border-color: var(--sken-destructive);\n    }\n    :host([invalid]) .textarea-wrapper:focus-within textarea {\n      outline-color: var(--sken-destructive);\n    }\n  `\n\n  override connectedCallback(): void {\n    super.connectedCallback()\n    if (this.value === undefined) {\n      this.#internalValue = this.defaultValue ?? ''\n    }\n    // Publish the initial value to the surrounding form.\n    this.#syncFormValue()\n  }\n\n  // ── Form-association callbacks ─────────────────────────────\n  // formResetCallback: for uncontrolled mode, restore the seed\n  // value and re-publish. For controlled mode, re-render and\n  // let Lit re-publish the controlled value.\n  formResetCallback(): void {\n    if (this.value === undefined) {\n      this.#internalValue = this.defaultValue ?? ''\n      const ta = this.renderRoot.querySelector('textarea') as HTMLTextAreaElement | null\n      if (ta) ta.value = this.#internalValue\n      this.#syncFormValue()\n    } else {\n      this.requestUpdate()\n    }\n  }\n\n  // formDisabledCallback: mirror the form's :disabled state onto\n  // the prop. Lit re-renders; the inner <textarea> picks up\n  // `?disabled=${this.disabled}` in the template.\n  formDisabledCallback(isDisabled: boolean): void {\n    this.disabled = isDisabled\n  }\n\n  // Publish the current value to the form. Called on every\n  // change so FormData and submit/reset stay in sync.\n  #syncFormValue(): void {\n    if (!this.#internals) return\n    const value = this.value ?? this.#internalValue\n    this.#internals.setFormValue(value)\n  }\n\n  protected override render() {\n    const value = this.value ?? this.#internalValue\n    return html`\n      <div class=\"textarea-wrapper\" part=\"wrapper\">\n        <div class=\"slot slot-start\" part=\"slot-start\">\n          <slot name=\"start\"></slot>\n        </div>\n        <textarea\n          part=\"textarea\"\n          .value=${value}\n          rows=${this.rows}\n          cols=${this.cols ?? ''}\n          maxlength=${this.maxLength ?? ''}\n          placeholder=${this.placeholder ?? ''}\n          ?disabled=${this.disabled}\n          ?readonly=${this.readonly}\n          ?required=${this.required}\n          aria-invalid=${this.invalid ? 'true' : 'false'}\n          aria-describedby=${this.describedById ?? ''}\n          name=${this.name ?? ''}\n          @input=${this.#handleInput}\n          @change=${this.#handleChange}\n          @focus=${this.#handleFocus}\n          @blur=${this.#handleBlur}\n          @keydown=${this.#handleKeydown}\n        ></textarea>\n        <div class=\"slot slot-end\" part=\"slot-end\">\n          <slot name=\"end\"></slot>\n        </div>\n      </div>\n    `\n  }\n\n  // composed: true on every event so the framework adapter outside\n  // the shadow boundary can listen. Mirrors SkenInput.\n  #handleInput = (event: Event) => {\n    const target = event.target as HTMLTextAreaElement\n    const newValue = target.value\n    if (this.value === undefined) this.#internalValue = newValue\n    // Publish the new value to the surrounding form so submit\n    // and FormData see the latest text. Per-keystroke is fine:\n    // setFormValue is cheap.\n    this.#syncFormValue()\n    this.dispatchEvent(\n      new CustomEvent<string>('sken-input', { detail: newValue, bubbles: true, composed: true }),\n    )\n  }\n\n  #handleChange = (event: Event) => {\n    const target = event.target as HTMLTextAreaElement\n    this.#syncFormValue()\n    this.dispatchEvent(\n      new CustomEvent<string>('sken-change', {\n        detail: target.value,\n        bubbles: true,\n        composed: true,\n      }),\n    )\n  }\n\n  #handleFocus = (event: FocusEvent) => {\n    this.dispatchEvent(\n      new CustomEvent<FocusEvent>('sken-focus', { detail: event, bubbles: true, composed: true }),\n    )\n  }\n\n  #handleBlur = (event: FocusEvent) => {\n    this.dispatchEvent(\n      new CustomEvent<FocusEvent>('sken-blur', { detail: event, bubbles: true, composed: true }),\n    )\n  }\n\n  // Wire Enter-on-the-inner-textarea to the host's associated\n  // form. Mirrors SkenInput.#handleKeydown with one key\n  // difference: textareas are multiline, so the user can press\n  // Shift+Enter to insert a newline. Only Enter WITHOUT shift\n  // submits. The browser's implicit submission algorithm does\n  // not see the inner textarea (shadow boundary), so we bridge\n  // it ourselves via `internals.form.requestSubmit()`.\n  // `isComposing` guards IME composition (Enter to confirm a\n  // kanji candidate is not a submit intent).\n  #handleKeydown = (event: KeyboardEvent) => {\n    if (event.key !== 'Enter' || event.isComposing) return\n    if (event.shiftKey) return // newline; let the browser insert it\n    if (this.disabled || this.readonly) return\n    // preventDefault runs even without ElementInternals support,\n    // keeping the observable behaviour consistent.\n    event.preventDefault()\n    const form = this.#internals?.form\n    if (!form) return\n    form.requestSubmit()\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'sken-textarea': SkenTextarea\n  }\n}\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sken-ds/primitives",
-  "version": "0.3.6",
+  "version": "0.3.8",
   "publishConfig": {
     "registry": "https://registry.npmjs.org",
     "access": "public"
@@ -31,6 +31,14 @@
       "types": "./dist/sken-input.d.ts",
       "import": "./dist/sken-input.js"
     },
+    "./sken-layout": {
+      "types": "./dist/sken-layout.d.ts",
+      "import": "./dist/sken-layout.js"
+    },
+    "./sken-layout-region": {
+      "types": "./dist/sken-layout-region.d.ts",
+      "import": "./dist/sken-layout-region.js"
+    },
     "./sken-number-input": {
       "types": "./dist/sken-number-input.d.ts",
       "import": "./dist/sken-number-input.js"
@@ -84,7 +92,7 @@
     "@tanstack/match-sorter-utils": "^9.0.0",
     "@tanstack/table-core": "^9.0.0",
     "lit": "^3.3.3",
-    "@sken-ds/contracts": "0.3.1"
+    "@sken-ds/contracts": "0.3.8"
   },
   "devDependencies": {
     "@vitest/coverage-v8": "^4.1.10",

package/dist/sken-dialog-hRtML2jW.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"sken-dialog-hRtML2jW.js","names":["s","t","r","#dispatch","#hasTitle","#originalParent","#originalNextSibling","#portaled","#showModal","#onCancel","#onClose","#onClick","#onTitleSlotChange","#onCloseButton"],"sources":["../../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/class-map.js","../src/components/sken-dialog.ts"],"sourcesContent":["import{noChange as t}from\"../lit-html.js\";import{directive as s,Directive as i,PartType as r}from\"../directive.js\";\n/**\n * @license\n * Copyright 2018 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */const e=s(class extends i{constructor(t){if(super(t),t.type!==r.ATTRIBUTE||\"class\"!==t.name||t.strings?.length>2)throw Error(\"`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.\")}render(t){return\" \"+Object.keys(t).filter(s=>t[s]).join(\" \")+\" \"}update(s,[i]){if(void 0===this.st){this.st=new Set,void 0!==s.strings&&(this.nt=new Set(s.strings.join(\" \").split(/\\s/).filter(t=>\"\"!==t)));for(const t in i)i[t]&&!this.nt?.has(t)&&this.st.add(t);return this.render(i)}const r=s.element.classList;for(const t of this.st)t in i||(r.remove(t),this.st.delete(t));for(const t in i){const s=!!i[t];s===this.st.has(t)||this.nt?.has(t)||(s?(r.add(t),this.st.add(t)):(r.remove(t),this.st.delete(t)))}return t}});export{e as classMap};\n//# sourceMappingURL=class-map.js.map\n","// ── <sken-dialog> — WAI-ARIA modal built on <dialog> ──────────────────\n// A thin Sken wrapper around the native HTML <dialog> element.\n//\n// Why <dialog>:\n//   The browser already implements the WAI-ARIA dialog pattern when\n//   you call showModal(): focus trap, Tab cycling, ESC handling,\n//   ::backdrop pseudo-element, top-layer rendering, and inert\n//   siblings. Re-implementing those is what v1 of this file did\n//   and it produced a worse result (Math.random() ids, position:\n//   fixed hacks, hand-rolled scroll lock, manual ESC listener).\n//   v2 uses the platform. Less code, fewer bugs, better a11y.\n//\n// Why controlled only:\n//   The consumer owns the `open` state. The primitive never flips\n//   it on its own. To close, the consumer listens for `sken-close`\n//   and sets `open = false`. Same model as Radix Dialog, Headless\n//   UI Dialog, Reach UI Dialog.\n//\n// Portal:\n//   On first open, the host element is re-parented into\n//   document.body. showModal() requires the <dialog> to be in the\n//   top layer; if it sits inside a transformed / overflow:hidden\n//   ancestor it can be clipped. Re-parenting is the robust fix.\n//   The element is restored to its original parent on disconnect.\n\nimport { LitElement, html, css, nothing } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport type { SkenDialogSize, SkenDialogDismissable, SkenDialogCloseReason } from '@sken-ds/contracts'\n\n@customElement('sken-dialog')\nexport class SkenDialog extends LitElement {\n  @property({ reflect: true, type: Boolean }) open = false\n  @property({ reflect: true }) size: SkenDialogSize = 'md'\n  @property({ reflect: true }) dismissable: SkenDialogDismissable = 'dismissable'\n  @property({ attribute: 'aria-label' }) ariaLabel: string | null = null\n  @property({ attribute: 'aria-describedby' }) ariaDescribedBy: string | null = null\n\n  @query('dialog') private _dialog!: HTMLDialogElement\n  @query('.close-button') private _closeButton!: HTMLButtonElement | null\n\n  /** Original parent of the host element. Restored on disconnect. */\n  #originalParent: Node | null = null\n  /** Next sibling in the original parent. Used to restore position. */\n  #originalNextSibling: Node | null = null\n  /** Has the host been moved into document.body? */\n  #portaled = false\n  /** Has the title slot been filled? Updated via the slotchange\n   *  event on the title <slot>. */\n  #hasTitle = false\n\n  static styles = css`\n    :host {\n      display: contents;\n    }\n\n    dialog {\n      /* Reset native styles. */\n      padding: 0;\n      border: none;\n      background: transparent;\n      color: inherit;\n      max-width: none;\n      max-height: none;\n      margin: auto;\n      outline: none;\n    }\n\n    /* Open animation (entry). The browser fires the open attribute\n       on showModal(); with transition-behavior: allow-discrete we\n       can animate the top-layer entry. Falls back to no animation\n       in browsers without support. */\n    dialog[open] {\n      animation: sken-dialog-enter 150ms ease-out;\n    }\n    @keyframes sken-dialog-enter {\n      from {\n        opacity: 0;\n        transform: scale(0.96);\n      }\n      to {\n        opacity: 1;\n        transform: scale(1);\n      }\n    }\n\n    /* Backdrop. Native ::backdrop is a pseudo-element on the\n       <dialog> when shown via showModal(). */\n    dialog::backdrop {\n      background: rgba(15, 18, 24, 0.55);\n      animation: sken-dialog-backdrop-enter 150ms ease-out;\n    }\n    @keyframes sken-dialog-backdrop-enter {\n      from { opacity: 0; }\n      to { opacity: 1; }\n    }\n\n    .panel {\n      background: var(--sken-color-surface, #ffffff);\n      color: var(--sken-color-text, #1a1a1a);\n      border-radius: 12px;\n      box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.25);\n      display: flex;\n      flex-direction: column;\n      max-height: 90vh;\n      max-width: 90vw;\n      overflow: hidden;\n      font-family: var(--sken-font-sans, system-ui, sans-serif);\n    }\n\n    .panel.sm { width: 400px; }\n    .panel.md { width: 560px; }\n    .panel.lg { width: 800px; }\n\n    header {\n      display: flex;\n      align-items: flex-start;\n      justify-content: space-between;\n      gap: 16px;\n      padding: 20px 24px 8px;\n    }\n\n    header ::slotted([slot='title']) {\n      font-size: 18px;\n      font-weight: 600;\n      line-height: 1.3;\n      margin: 0;\n    }\n\n    .body {\n      padding: 8px 24px 16px;\n      overflow-y: auto;\n      flex: 1;\n    }\n\n    footer {\n      display: flex;\n      align-items: center;\n      justify-content: flex-end;\n      gap: 8px;\n      padding: 12px 24px 20px;\n    }\n\n    /* Only render the footer divider if there is content. */\n    footer:not(:has(*)) {\n      display: none;\n    }\n\n    .close-button {\n      appearance: none;\n      background: transparent;\n      border: none;\n      cursor: pointer;\n      width: 32px;\n      height: 32px;\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      border-radius: 6px;\n      color: inherit;\n      opacity: 0.6;\n      transition: opacity 100ms, background 100ms;\n      flex-shrink: 0;\n    }\n    .close-button:hover { opacity: 1; background: rgba(0, 0, 0, 0.05); }\n    .close-button:focus-visible {\n      outline: 2px solid var(--sken-color-focus, #2e6fc6);\n      outline-offset: 1px;\n    }\n  `\n\n  connectedCallback(): void {\n    super.connectedCallback()\n    // Capture original parent so we can restore on disconnect.\n    this.#originalParent = this.parentNode\n    this.#originalNextSibling = this.nextSibling\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback()\n    if (this.#portaled && this.#originalParent) {\n      // Restore original position. If originalNextSibling is null,\n      // appendChild puts us at the end of originalParent.\n      if (this.#originalNextSibling && this.#originalNextSibling.parentNode === this.#originalParent) {\n        this.#originalParent.insertBefore(this, this.#originalNextSibling)\n      } else {\n        this.#originalParent.appendChild(this)\n      }\n      this.#portaled = false\n    }\n  }\n\n  updated(changed: Map<string, unknown>): void {\n    if (!changed.has('open')) return\n    if (!this._dialog) return\n\n    if (this.open) {\n      this.#showModal()\n    } else if (this._dialog.open) {\n      this._dialog.close()\n    }\n  }\n\n  /** Open the native <dialog>. Re-parents the host to <body> first. */\n  #showModal(): void {\n    if (this.#portaled === false && this.parentNode !== document.body) {\n      document.body.appendChild(this)\n      this.#portaled = true\n    }\n    if (!this._dialog.open) {\n      this._dialog.showModal()\n      this.#dispatch('sken-opened')\n      // Focus the close button if dismissable, else the first focusable.\n      queueMicrotask(() => {\n        if (this.dismissable === 'dismissable' && this._closeButton) {\n          this._closeButton.focus()\n        } else {\n          const first = this._dialog.querySelector<HTMLElement>(\n            'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n          )\n          first?.focus()\n        }\n      })\n    }\n  }\n\n  /** Programmatic close request. Dispatches `sken-close` with the\n   *  given reason. Does NOT close the native <dialog> directly —\n   *  the consumer is expected to set `open = false` in response,\n   *  which the reactive `updated()` hook will translate into a\n   *  native close. This keeps the controlled-only contract honest:\n   *  the consumer always owns the `open` state.\n   *\n   *  Use for cases where the close is initiated by code, not by\n   *  the user (form submission success, async operation complete,\n   *  etc.). */\n  closeDialog(reason: SkenDialogCloseReason = 'close-button'): void {\n    this.#dispatch('sken-close', reason)\n  }\n\n  /** Native <dialog> event: fired when the user presses ESC. We\n   *  translate to sken-close with reason 'escape'. The consumer\n   *  then sets `open = false` which calls _dialog.close() (a\n   *  no-op since it's already closed by the browser). */\n  #onCancel = (e: Event): void => {\n    if (this.dismissable === 'persistent') {\n      // Prevent the browser from closing. The dialog stays open.\n      e.preventDefault()\n      return\n    }\n    // Browser will close. We dispatch sken-close; the consumer's\n    // `open` prop will then become false and the next render\n    // is a no-op since the dialog is already closed.\n    this.#dispatch('sken-close', 'escape')\n  }\n\n  /** Native <dialog> event: fired on close (ESC, backdrop click,\n   *  close button, or .close()). We use it to fire sken-closed. */\n  #onClose = (): void => {\n    this.#dispatch('sken-closed')\n  }\n\n  /** Click handler on the <dialog> itself. If the click target is\n   *  the <dialog> (not a descendant), the user clicked the\n   *  backdrop. We treat it as a close request unless persistent. */\n  #onClick = (e: MouseEvent): void => {\n    if (e.target !== this._dialog) return\n    if (this.dismissable === 'persistent') return\n    this.#dispatch('sken-close', 'backdrop')\n  }\n\n  /** Click handler for the close button. Always visible when\n   *  dismissable; hidden when persistent. */\n  #onCloseButton = (): void => {\n    this.#dispatch('sken-close', 'close-button')\n  }\n\n  /** Lightweight event dispatcher with the conventions: composed\n   *  (crosses shadow boundary), bubbles (reaches ancestors). */\n  #dispatch(name: 'sken-close', detail: SkenDialogCloseReason): void\n  #dispatch(name: 'sken-opened' | 'sken-closed', detail?: undefined): void\n  #dispatch(name: string, detail?: unknown): void {\n    this.dispatchEvent(\n      new CustomEvent(name, {\n        detail,\n        bubbles: true,\n        composed: true,\n      })\n    )\n  }\n\n  render() {\n    const panelClasses = {\n      panel: true,\n      [this.size]: true,\n    }\n    // We render the header only when there is a title slot OR the\n    // dialog is dismissable (so the close button has somewhere to\n    // live). A persistent dialog with no title renders body + footer\n    // directly, no header. Slot presence is detected via\n    // slotchange on the title slot.\n    const showHeader = this.#hasTitle || this.dismissable === 'dismissable'\n    // aria-label is only set when explicitly provided. Otherwise the\n    // consumer should set a title slot so the dialog has an\n    // accessible name via aria-labelledby. We always set the\n    // attribute to a non-empty string (or omit it) so that a missing\n    // name is detectable in dev tools.\n    const ariaLabelAttr = this.ariaLabel ?? ''\n    return html`\n      <dialog\n        aria-label=${ariaLabelAttr || nothing}\n        aria-describedby=${this.ariaDescribedBy || nothing}\n        @cancel=${this.#onCancel}\n        @close=${this.#onClose}\n        @click=${this.#onClick}\n      >\n        <div class=${classMap(panelClasses)}>\n          ${showHeader\n            ? html`<header>\n                <slot name=\"title\" @slotchange=${this.#onTitleSlotChange}></slot>\n                ${this.dismissable === 'dismissable'\n                  ? html`<button\n                      class=\"close-button\"\n                      type=\"button\"\n                      aria-label=\"Close dialog\"\n                      @click=${this.#onCloseButton}\n                    >\n                      ✕\n                    </button>`\n                  : nothing}\n              </header>`\n            : nothing}\n          <div class=\"body\">\n            <slot></slot>\n          </div>\n          <footer>\n            <slot name=\"actions\"></slot>\n          </footer>\n        </div>\n      </dialog>\n    `\n  }\n\n  #onTitleSlotChange = (e: Event): void => {\n    const slot = e.target as HTMLSlotElement\n    this.#hasTitle = slot.assignedNodes({ flatten: true }).length > 0\n    this.requestUpdate()\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'sken-dialog': SkenDialog\n  }\n}\n"],"x_google_ignoreList":[0],"mappings":"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"}