@sken-ds/primitives 0.3.0 → 0.3.4

package/dist/sken-switch.js

@@ -0,0 +1,196 @@
+import { t as e } from "./decorate-D4FKzyDw.js";
+import { LitElement as t, css as n, html as r } from "lit";
+import { customElement as i, property as a, state as o } from "lit/decorators.js";
+//#region src/components/sken-switch.ts
+var s = class extends t {
+	constructor(...e) {
+		super(...e), this._on = void 0, this._onSet = !1, this.defaultOn = void 0, this.disabled = !1, this.readonly = !1, this.required = !1, this.describedById = void 0, this.name = void 0, this.ariaLabel = null, this._uncontrolled = !1, this.#t = (e) => {
+			let t = e.target, n = t.checked;
+			if (this.disabled) {
+				t.checked = this.#e ? this.on === !0 : this._uncontrolled;
+				return;
+			}
+			if (this.readonly) {
+				t.checked = this.#e ? this.on === !0 : this._uncontrolled, this.requestUpdate();
+				return;
+			}
+			this.#e || (this._uncontrolled = n), this.dispatchEvent(new CustomEvent("sken-change", {
+				detail: n,
+				bubbles: !0,
+				composed: !0
+			}));
+		}, this.#n = (e) => {
+			this.dispatchEvent(new CustomEvent("sken-focus", {
+				detail: e,
+				bubbles: !0,
+				composed: !0
+			}));
+		}, this.#r = (e) => {
+			this.dispatchEvent(new CustomEvent("sken-blur", {
+				detail: e,
+				bubbles: !0,
+				composed: !0
+			}));
+		};
+	}
+	set on(e) {
+		this._on = e, this._onSet = e !== void 0, this.requestUpdate();
+	}
+	get on() {
+		return this._on;
+	}
+	get #e() {
+		return this._onSet;
+	}
+	static {
+		this.styles = n`
+    :host {
+      display: inline-block;
+      vertical-align: middle;
+    }
+
+    :host([disabled]) {
+      cursor: not-allowed;
+      opacity: var(--sken-disabled);
+    }
+
+    /* The <label> wraps the hidden input + visible track + slot
+       label. It carries the layout styles so the whole control
+       looks like a single inline-flex row. */
+    label {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--sken-2);
+      cursor: pointer;
+      color: var(--sken-foreground);
+      font-family: var(--sken-family-sans);
+      font-size: var(--sken-size-md);
+      line-height: 1.25;
+    }
+
+    :host([disabled]) label {
+      cursor: not-allowed;
+    }
+
+    /* Visually hidden but accessible input (same pattern as sken-checkbox). */
+    input {
+      position: absolute;
+      inline-size: 1px;
+      block-size: 1px;
+      padding: 0;
+      margin: -1px;
+      overflow: hidden;
+      clip: rect(0, 0, 0, 0);
+      white-space: nowrap;
+      border: 0;
+    }
+
+    .track {
+      position: relative;
+      box-sizing: border-box;
+      inline-size: 2.5rem;
+      block-size: 1.375rem;
+      padding: 2px;
+      border-radius: 999px;
+      background: var(--sken-border);
+      transition: background-color 160ms ease;
+    }
+
+    .thumb {
+      display: block;
+      inline-size: calc(1.375rem - 4px);
+      block-size: calc(1.375rem - 4px);
+      border-radius: 50%;
+      background: var(--sken-input);
+      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
+      transition: transform 160ms ease;
+      transform: translateX(0);
+    }
+
+    :host([data-on]) .track {
+      background: var(--sken-primary);
+    }
+    :host([data-on]) .thumb {
+      transform: translateX(1.125rem);
+    }
+
+    :host(:focus-within) .track {
+      outline: 2px solid var(--sken-ring, currentColor);
+      outline-offset: 2px;
+    }
+    :host(:focus-within) {
+      outline: none;
+    }
+
+    .label {
+      user-select: none;
+    }
+  `;
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.on === void 0 && (this._uncontrolled = this.defaultOn ?? !1);
+	}
+	updated() {
+		let e = this.#i();
+		if (!e) return;
+		let t = (this.#e ? this.on : this._uncontrolled) ?? !1;
+		e.checked = t, t ? this.setAttribute("data-on", "") : this.removeAttribute("data-on");
+	}
+	render() {
+		return r`
+      <label>
+        <input
+          part="input"
+          type="checkbox"
+          role="switch"
+          aria-checked=${this.on === void 0 ? String(this._uncontrolled) : String(this.on)}
+          ?disabled=${this.disabled}
+          ?readonly=${this.readonly}
+          ?required=${this.required}
+          aria-describedby=${this.describedById ?? ""}
+          aria-label=${this.ariaLabel ?? ""}
+          name=${this.name ?? ""}
+          @change=${this.#t}
+          @focus=${this.#n}
+          @blur=${this.#r}
+        />
+        <span class="track" part="track" aria-hidden="true">
+          <span class="thumb" part="thumb"></span>
+        </span>
+        <span class="label" part="label">
+          <slot></slot>
+        </span>
+      </label>
+    `;
+	}
+	#t;
+	#n;
+	#r;
+	#i() {
+		return this.shadowRoot?.querySelector("input") ?? null;
+	}
+};
+e([a({
+	attribute: "on",
+	converter: {
+		fromAttribute: (e) => e !== null || void 0,
+		toAttribute: (e) => e ? "" : null
+	},
+	hasChanged: () => !0
+})], s.prototype, "on", null), e([a({
+	attribute: "default-on",
+	type: Boolean
+})], s.prototype, "defaultOn", void 0), e([a({
+	reflect: !0,
+	type: Boolean
+})], s.prototype, "disabled", void 0), e([a({
+	reflect: !0,
+	type: Boolean
+})], s.prototype, "readonly", void 0), e([a({
+	reflect: !0,
+	type: Boolean
+})], s.prototype, "required", void 0), e([a({ attribute: "described-by-id" })], s.prototype, "describedById", void 0), e([a()], s.prototype, "name", void 0), e([a({ attribute: "aria-label" })], s.prototype, "ariaLabel", void 0), e([o()], s.prototype, "_uncontrolled", void 0), s = e([i("sken-switch")], s);
+//#endregion
+export { s as SkenSwitch };
+
+//# sourceMappingURL=sken-switch.js.map

package/dist/sken-switch.js.map

@@ -0,0 +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"}

package/dist/sken-textarea.js

@@ -0,0 +1,237 @@
+import { t as e } from "./decorate-D4FKzyDw.js";
+import { LitElement as t, css as n, html as r } from "lit";
+import { customElement as i, property as a } from "lit/decorators.js";
+//#region src/components/sken-textarea.ts
+var o = class extends t {
+	static {
+		this.formAssociated = !0;
+	}
+	#e;
+	constructor() {
+		super(), this.#e = null, this.size = "md", this.rows = 4, this.cols = void 0, this.maxLength = void 0, this.resize = "vertical", this.placeholder = void 0, this.value = void 0, this.defaultValue = void 0, this.disabled = !1, this.readonly = !1, this.required = !1, this.invalid = !1, this.describedById = void 0, this.name = void 0, this.#t = "", this.#r = (e) => {
+			let t = e.target.value;
+			this.value === void 0 && (this.#t = t), this.#n(), this.dispatchEvent(new CustomEvent("sken-input", {
+				detail: t,
+				bubbles: !0,
+				composed: !0
+			}));
+		}, this.#i = (e) => {
+			let t = e.target;
+			this.#n(), this.dispatchEvent(new CustomEvent("sken-change", {
+				detail: t.value,
+				bubbles: !0,
+				composed: !0
+			}));
+		}, this.#a = (e) => {
+			this.dispatchEvent(new CustomEvent("sken-focus", {
+				detail: e,
+				bubbles: !0,
+				composed: !0
+			}));
+		}, this.#o = (e) => {
+			this.dispatchEvent(new CustomEvent("sken-blur", {
+				detail: e,
+				bubbles: !0,
+				composed: !0
+			}));
+		};
+		try {
+			this.#e = this.attachInternals();
+		} catch {
+			this.#e = null;
+		}
+	}
+	#t;
+	static {
+		this.styles = n`
+    :host {
+      display: inline-block;
+      inline-size: 100%;
+    }
+
+    .textarea-wrapper {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      inline-size: 100%;
+    }
+
+    textarea {
+      box-sizing: border-box;
+      inline-size: 100%;
+      border: 1px solid var(--sken-border);
+      border-radius: var(--sken-md);
+      background: var(--sken-input);
+      color: var(--sken-foreground);
+      font-family: var(--sken-family-sans);
+      font-size: var(--sken-size-md);
+      line-height: 1.5;
+      padding-block: var(--sken-2);
+      padding-inline: var(--sken-3);
+      min-block-size: 4.5rem;
+      transition:
+        border-color 120ms ease,
+        box-shadow 120ms ease;
+      /* Resize is controlled by the resize attribute, not by
+         user-agent stylesheet, so consumers can override. */
+    }
+
+    textarea::placeholder {
+      color: var(--sken-muted-foreground);
+      opacity: 1;
+    }
+
+    /* ── Slot containers ──────────────────────────────────────
+       Position: relative (not absolute) so the slotted content
+       flows naturally above and below the textarea. The wrapper
+       has a flex column, so the textarea's vertical padding is
+       NOT auto-adjusted (unlike SkenInput). Slot height adds to
+       the wrapper's natural height. */
+    .slot {
+      display: flex;
+      align-items: center;
+      color: var(--sken-muted-foreground);
+      min-block-size: 0.25rem;
+    }
+
+    .slot-start {
+      padding-block-end: 0.25rem;
+    }
+
+    .slot-end {
+      padding-block-start: 0.25rem;
+    }
+
+    /* ── Sizes ────────────────────────────────────────────────── */
+    :host([size='sm']) textarea {
+      padding-block: var(--sken-1);
+      padding-inline: var(--sken-2);
+      font-size: var(--sken-size-sm);
+    }
+    :host([size='md']) textarea {
+      /* Default styles above. */
+    }
+    :host([size='lg']) textarea {
+      padding-block: var(--sken-3);
+      padding-inline: var(--sken-4);
+      font-size: var(--sken-size-lg);
+    }
+
+    /* ── Resize policies ────────────────────────────────────── */
+    :host([resize='none']) textarea {
+      resize: none;
+    }
+    :host([resize='vertical']) textarea {
+      resize: vertical;
+    }
+    :host([resize='horizontal']) textarea {
+      resize: horizontal;
+    }
+    :host([resize='both']) textarea {
+      resize: both;
+    }
+
+    /* ── States ───────────────────────────────────────────────── */
+    .textarea-wrapper:hover textarea:not(:disabled):not(:read-only) {
+      border-color: var(--sken-foreground);
+    }
+    .textarea-wrapper:focus-within textarea {
+      outline: 2px solid var(--sken-ring, currentColor);
+      outline-offset: 2px;
+      border-color: var(--sken-primary);
+    }
+    textarea:disabled {
+      cursor: not-allowed;
+      opacity: var(--sken-disabled);
+    }
+    textarea:read-only {
+      background: var(--sken-muted);
+    }
+    :host([invalid]) textarea {
+      border-color: var(--sken-destructive);
+    }
+    :host([invalid]) .textarea-wrapper:focus-within textarea {
+      outline-color: var(--sken-destructive);
+    }
+  `;
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.value === void 0 && (this.#t = this.defaultValue ?? ""), this.#n();
+	}
+	formResetCallback() {
+		if (this.value === void 0) {
+			this.#t = this.defaultValue ?? "";
+			let e = this.renderRoot.querySelector("textarea");
+			e && (e.value = this.#t), this.#n();
+		} else this.requestUpdate();
+	}
+	formDisabledCallback(e) {
+		this.disabled = e;
+	}
+	#n() {
+		if (!this.#e) return;
+		let e = this.value ?? this.#t;
+		this.#e.setFormValue(e);
+	}
+	render() {
+		let e = this.value ?? this.#t;
+		return r`
+      <div class="textarea-wrapper" part="wrapper">
+        <div class="slot slot-start" part="slot-start">
+          <slot name="start"></slot>
+        </div>
+        <textarea
+          part="textarea"
+          .value=${e}
+          rows=${this.rows}
+          cols=${this.cols ?? ""}
+          maxlength=${this.maxLength ?? ""}
+          placeholder=${this.placeholder ?? ""}
+          ?disabled=${this.disabled}
+          ?readonly=${this.readonly}
+          ?required=${this.required}
+          aria-invalid=${this.invalid ? "true" : "false"}
+          aria-describedby=${this.describedById ?? ""}
+          name=${this.name ?? ""}
+          @input=${this.#r}
+          @change=${this.#i}
+          @focus=${this.#a}
+          @blur=${this.#o}
+        ></textarea>
+        <div class="slot slot-end" part="slot-end">
+          <slot name="end"></slot>
+        </div>
+      </div>
+    `;
+	}
+	#r;
+	#i;
+	#a;
+	#o;
+};
+e([a({ reflect: !0 })], o.prototype, "size", void 0), e([a({
+	reflect: !0,
+	type: Number
+})], o.prototype, "rows", void 0), e([a({
+	reflect: !0,
+	type: Number
+})], o.prototype, "cols", void 0), e([a({
+	attribute: "max-length",
+	type: Number
+})], o.prototype, "maxLength", void 0), e([a({ reflect: !0 })], o.prototype, "resize", void 0), e([a()], o.prototype, "placeholder", void 0), e([a()], o.prototype, "value", void 0), e([a({ attribute: "default-value" })], o.prototype, "defaultValue", void 0), e([a({
+	reflect: !0,
+	type: Boolean
+})], o.prototype, "disabled", void 0), e([a({
+	reflect: !0,
+	type: Boolean
+})], o.prototype, "readonly", void 0), e([a({
+	reflect: !0,
+	type: Boolean
+})], o.prototype, "required", void 0), e([a({
+	reflect: !0,
+	type: Boolean
+})], o.prototype, "invalid", void 0), e([a({ attribute: "described-by-id" })], o.prototype, "describedById", void 0), e([a()], o.prototype, "name", void 0), o = e([i("sken-textarea")], o);
+//#endregion
+export { o as SkenTextarea };
+
+//# sourceMappingURL=sken-textarea.js.map

package/dist/sken-textarea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sken-textarea.js","names":["#internalValue","#syncFormValue","#internals","#handleInput","#handleChange","#handleFocus","#handleBlur"],"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        ></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\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.0",
+  "version": "0.3.4",
   "publishConfig": {
     "registry": "https://registry.npmjs.org",
     "access": "public"
@@ -84,7 +84,7 @@
     "@tanstack/match-sorter-utils": "^9.0.0",
     "@tanstack/table-core": "^9.0.0",
     "lit": "^3.3.3",
-    "@sken-ds/contracts": "0.3.0"
+    "@sken-ds/contracts": "0.3.1"
   },
   "devDependencies": {
     "@vitest/coverage-v8": "^4.1.10",