@sken-ds/primitives 0.5.0 → 0.6.1

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, 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":"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"}
+{"version":3,"file":"sken-switch.js","names":[],"sources":["../src/components/sken-switch.ts"],"sourcesContent":["// ── <sken-switch> — framework-ready Web Component ────────────────────\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  private _on: boolean | undefined = undefined\n  private _onSet: boolean = false\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  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({ reflect: true, type: Boolean }) invalid = false\n  @property({ attribute: 'described-by-id' }) describedById: string | undefined = undefined\n  @property() name: string | undefined = undefined\n\n  @property({ attribute: 'aria-label' }) override ariaLabel: string | null = null\n\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-xs, 0.75rem);\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: 1px solid transparent;\n      border-radius: 999px;\n      background: var(--sken-border);\n      transition:\n        background-color 160ms ease,\n        border-color 160ms ease;\n    }\n\n    .thumb {\n      display: block;\n      inline-size: calc(1.375rem - 6px);\n      block-size: calc(1.375rem - 6px);\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    :host([invalid]) .track {\n      border-color: var(--sken-destructive);\n    }\n\n    .label {\n      user-select: none;\n    }\n\n    :host([required]) .label::after {\n      content: ' *';\n    }\n\n    :host([required][invalid]) .label,\n    :host([required][invalid]) .label::after {\n      color: var(--sken-destructive);\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    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-invalid=${this.invalid ? 'true' : 'false'}\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    if (this.disabled) {\n      target.checked = this.#controlled ? this.on === true : this._uncontrolled\n      return\n    }\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    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":";;;;AAMO,IAAM,IAAN,cAAyB,EAAW;;EAgN1B,aA/MoB,KAAA,MAAA,KAAA,GACT,KAAA,SAAA,IAsBO,KAAA,YAAA,KAAA,GACsB,KAAA,WAAA,IACA,KAAA,WAAA,IACA,KAAA,WAAA,IACD,KAAA,UAAA,IAC0B,KAAA,gBAAA,KAAA,GACzC,KAAA,OAAA,KAAA,GAEoC,KAAA,YAAA,MAEjC,KAAA,gBAAA,IAmJzB,KAAA,MAAA,MAAiB;GAChC,IAAM,IAAS,EAAM,QACf,IAAW,EAAO;GACxB,IAAI,KAAK,UAAU;IACjB,EAAO,UAAU,KAAK,KAAc,KAAK,OAAO,KAAO,KAAK;IAC5D;GACF;GACA,IAAI,KAAK,UAAU;IAGjB,AADA,EAAO,UADO,KAAK,KAAc,KAAK,OAAO,KAAO,KAAK,eAEzD,KAAK,cAAc;IACnB;GACF;GAIA,AAHK,KAAK,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;;CAjNA,IAQI,GAAG,GAAwB;EAG7B,AAFA,KAAK,MAAM,GACX,KAAK,SAAS,MAAM,KAAA,GACpB,KAAK,cAAc;CACrB;CACA,IAAI,KAA0B;EAC5B,OAAO,KAAK;CACd;CACA,IAAI,KAAuB;EACzB,OAAO,KAAK;CACd;;EAegB,KAAA,SAAA,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoGnB,oBAAmC;EAEjC,AADA,MAAM,kBAAkB,GACpB,KAAK,OAAO,KAAA,MACd,KAAK,gBAAgB,KAAK,aAAa;CAE3C;CAEA,UAAmC;EACjC,IAAM,IAAQ,KAAK,GAAU;EAC7B,IAAI,CAAC,GAAO;EACZ,IAAM,KAAQ,KAAK,KAAc,KAAK,KAAK,KAAK,kBAAkB;EAElE,AADA,EAAM,UAAU,GACZ,IAAM,KAAK,aAAa,WAAW,EAAE,IACpC,KAAK,gBAAgB,SAAS;CACrC;CAEA,SAA4B;EAC1B,OAAO,CAAI;;;;;;yBAMU,KAAK,OAAO,KAAA,IAAY,OAAO,KAAK,aAAa,IAAI,OAAO,KAAK,EAAE,EAAE;sBACxE,KAAK,SAAS;sBACd,KAAK,SAAS;sBACd,KAAK,SAAS;yBACX,KAAK,UAAU,SAAS,QAAQ;6BAC5B,KAAK,iBAAiB,GAAG;uBAC/B,KAAK,aAAa,GAAG;iBAC3B,KAAK,QAAQ,GAAG;oBACb,KAAK,GAAc;mBACpB,KAAK,GAAa;kBACnB,KAAK,GAAY;;;;;;;;;;CAUjC;CAEA;CAqBA;CAMA;CAMA,KAAqC;EACnC,OAAO,KAAK,YAAY,cAAc,OAAO,KAAK;CACpD;AACF;AAtNG,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,GAaA,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;CAAE,SAAS;CAAM,MAAM;AAAQ,CAAC,CAAA,GAAA,EAAA,WAAA,WAAA,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,GAET,EAAA,CAAA,EAAS,EAAE,WAAW,aAAa,CAAC,CAAA,GAAA,EAAA,WAAA,aAAA,KAAA,CAAA,GAEpC,EAAA,CAAA,EAAM,CAAA,GAAA,EAAA,WAAA,iBAAA,KAAA,CAAA,GAnCR,IAAA,EAAA,CAAA,EAAc,aAAa,CAAA,GAAA,CAAA"}

package/dist/sken-textarea.js

@@ -1,40 +1,46 @@
-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";
+import { t as e } from "./decorate-C1e2sg49.js";
+import { LitElement as t, css as n, html as r, nothing as i } from "lit";
+import { customElement as a, property as o } from "lit/decorators.js";
 //#region src/components/sken-textarea.ts
-var o = class extends t {
+function s(e) {
+	return e ? e.assignedNodes({ flatten: !0 }).some((e) => e.nodeType !== Node.TEXT_NODE || (e.textContent ?? "").trim() !== "") : !1;
+}
+var c = class extends t {
 	static {
 		this.formAssociated = !0;
 	}
 	#e;
 	constructor() {
-		super(), this.#e = void 0, 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) => {
+		super(), this.#e = void 0, this.size = "md", this.label = void 0, 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.ariaLabel = null, this.#t = "", this._textareaId = `sken-textarea-${crypto.randomUUID()}`, this.#n = () => {
+			let e = this.renderRoot.querySelector(".slot-start"), t = this.renderRoot.querySelector(".slot-end"), n = this.renderRoot.querySelector("slot[name=\"start\"]"), r = this.renderRoot.querySelector("slot[name=\"end\"]");
+			e?.toggleAttribute("data-empty", !s(n)), t?.toggleAttribute("data-empty", !s(r));
+		}, this.#r = void 0, this.#i = void 0, this.#o = (e) => {
 			let t = e.target.value;
-			this.value === void 0 && (this.#t = t), this.#n(), this.dispatchEvent(new CustomEvent("sken-input", {
+			this.value === void 0 && (this.#t = t), this.#a(), this.dispatchEvent(new CustomEvent("sken-input", {
 				detail: t,
 				bubbles: !0,
 				composed: !0
 			}));
-		}, this.#i = (e) => {
+		}, this.#s = (e) => {
 			let t = e.target;
-			this.#n(), this.dispatchEvent(new CustomEvent("sken-change", {
+			this.#a(), this.dispatchEvent(new CustomEvent("sken-change", {
 				detail: t.value,
 				bubbles: !0,
 				composed: !0
 			}));
-		}, this.#a = (e) => {
+		}, this.#c = (e) => {
 			this.dispatchEvent(new CustomEvent("sken-focus", {
 				detail: e,
 				bubbles: !0,
 				composed: !0
 			}));
-		}, this.#o = (e) => {
+		}, this.#l = (e) => {
 			this.dispatchEvent(new CustomEvent("sken-blur", {
 				detail: e,
 				bubbles: !0,
 				composed: !0
 			}));
-		}, this.#s = (e) => {
+		}, this.#u = (e) => {
 			if (e.key !== "Enter" || e.isComposing || e.shiftKey || this.disabled || this.readonly) return;
 			e.preventDefault();
 			let t = this.#e?.form;
@@ -54,6 +60,26 @@ var o = class extends t {
       inline-size: 100%;
     }
 
+    .field {
+      display: grid;
+      gap: var(--sken-1, 0.25rem);
+    }
+
+    .label {
+      font-size: var(--sken-size-xs, 0.75rem);
+      font-weight: 500;
+      color: var(--sken-foreground);
+    }
+
+    :host([required]) .label::after {
+      content: ' *';
+    }
+
+    :host([required][invalid]) .label,
+    :host([required][invalid]) .label::after {
+      color: var(--sken-destructive);
+    }
+
     .textarea-wrapper {
       position: relative;
       display: flex;
@@ -99,6 +125,10 @@ var o = class extends t {
       min-block-size: 0.25rem;
     }
 
+    .slot[data-empty] {
+      display: none;
+    }
+
     .slot-start {
       padding-block-end: 0.25rem;
     }
@@ -161,19 +191,40 @@ var o = class extends t {
   `;
 	}
 	connectedCallback() {
-		super.connectedCallback(), this.value === void 0 && (this.#t = this.defaultValue ?? ""), this.#n();
+		super.connectedCallback(), this.value === void 0 && (this.#t = this.defaultValue ?? ""), this.#a();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this.#r?.disconnect(), this.#i?.disconnect();
+	}
+	firstUpdated() {
+		let e = this.renderRoot.querySelector(".slot-start"), t = this.renderRoot.querySelector(".slot-end");
+		if (!e || !t) return;
+		this.#r = new MutationObserver(() => this.#n()), this.#r.observe(e, {
+			childList: !0,
+			subtree: !0,
+			attributes: !0
+		}), this.#i = new MutationObserver(() => this.#n()), this.#i.observe(t, {
+			childList: !0,
+			subtree: !0,
+			attributes: !0
+		});
+		let n = this.renderRoot.querySelector("slot[name=\"start\"]"), r = this.renderRoot.querySelector("slot[name=\"end\"]");
+		n?.addEventListener("slotchange", this.#n), r?.addEventListener("slotchange", this.#n), this.#n();
 	}
+	#n;
+	#r;
+	#i;
 	formResetCallback() {
 		if (this.value === void 0) {
 			this.#t = this.defaultValue ?? "";
 			let e = this.renderRoot.querySelector("textarea");
-			e && (e.value = this.#t), this.#n();
+			e && (e.value = this.#t), this.#a();
 		} else this.requestUpdate();
 	}
 	formDisabledCallback(e) {
 		this.disabled = e;
 	}
-	#n() {
+	#a() {
 		if (!this.#e) return;
 		let e = this.value ?? this.#t;
 		this.#e.setFormValue(e);
@@ -181,64 +232,69 @@ var o = class extends t {
 	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}
-          @keydown=${this.#s}
-        ></textarea>
-        <div class="slot slot-end" part="slot-end">
-          <slot name="end"></slot>
+      <div class="field" part="field">
+        ${this.label ? r`<label class="label" part="label" for=${this._textareaId}>${this.label}</label>` : i}
+        <div class="textarea-wrapper" part="wrapper">
+          <div class="slot slot-start" part="slot-start">
+            <slot name="start"></slot>
+          </div>
+          <textarea
+            id=${this._textareaId}
+            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 ?? ""}
+            aria-label=${this.ariaLabel ?? ""}
+            name=${this.name ?? ""}
+            @input=${this.#o}
+            @change=${this.#s}
+            @focus=${this.#c}
+            @blur=${this.#l}
+            @keydown=${this.#u}
+          ></textarea>
+          <div class="slot slot-end" part="slot-end">
+            <slot name="end"></slot>
+          </div>
         </div>
       </div>
     `;
 	}
-	#r;
-	#i;
-	#a;
 	#o;
 	#s;
+	#c;
+	#l;
+	#u;
 };
-e([a({ reflect: !0 })], o.prototype, "size", void 0), e([a({
+e([o({ reflect: !0 })], c.prototype, "size", void 0), e([o()], c.prototype, "label", void 0), e([o({
 	reflect: !0,
 	type: Number
-})], o.prototype, "rows", void 0), e([a({
+})], c.prototype, "rows", void 0), e([o({
 	reflect: !0,
 	type: Number
-})], o.prototype, "cols", void 0), e([a({
+})], c.prototype, "cols", void 0), e([o({
 	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({
+})], c.prototype, "maxLength", void 0), e([o({ reflect: !0 })], c.prototype, "resize", void 0), e([o()], c.prototype, "placeholder", void 0), e([o()], c.prototype, "value", void 0), e([o({ attribute: "default-value" })], c.prototype, "defaultValue", void 0), e([o({
 	reflect: !0,
 	type: Boolean
-})], o.prototype, "disabled", void 0), e([a({
+})], c.prototype, "disabled", void 0), e([o({
 	reflect: !0,
 	type: Boolean
-})], o.prototype, "readonly", void 0), e([a({
+})], c.prototype, "readonly", void 0), e([o({
 	reflect: !0,
 	type: Boolean
-})], o.prototype, "required", void 0), e([a({
+})], c.prototype, "required", void 0), e([o({
 	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);
+})], c.prototype, "invalid", void 0), e([o({ attribute: "described-by-id" })], c.prototype, "describedById", void 0), e([o()], c.prototype, "name", void 0), e([o({ attribute: "aria-label" })], c.prototype, "ariaLabel", void 0), c = e([a("sken-textarea")], c);
 //#endregion
-export { o as SkenTextarea };
+export { c as SkenTextarea };
 
 //# sourceMappingURL=sken-textarea.js.map

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 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 | undefined = undefined\n\n  constructor() {\n    super()\n    try {\n      this.#internals = this.attachInternals()\n    } catch {\n      this.#internals = undefined\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":[],"sources":["../src/components/sken-textarea.ts"],"sourcesContent":["// ── <sken-textarea> — framework-ready Web Component ────────────────\n\nimport type { SkenTextareaResize, SkenTextareaSize } from '@sken-ds/contracts'\nimport { LitElement, css, html, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nfunction slotHasContent(slot: HTMLSlotElement | null): boolean {\n  if (!slot) return false\n  return slot\n    .assignedNodes({ flatten: true })\n    .some((node) => node.nodeType !== Node.TEXT_NODE || (node.textContent ?? '').trim() !== '')\n}\n\n@customElement('sken-textarea')\nexport class SkenTextarea extends LitElement {\n  static formAssociated = true\n\n  #internals: ElementInternals | undefined = undefined\n\n  constructor() {\n    super()\n    try {\n      this.#internals = this.attachInternals()\n    } catch {\n      this.#internals = undefined\n    }\n  }\n\n  @property({ reflect: true }) size: SkenTextareaSize = 'md'\n  @property() label: string | undefined = undefined\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  @property({ attribute: 'aria-label' }) override ariaLabel: string | null = null\n\n  #internalValue: string = ''\n\n  private readonly _textareaId = `sken-textarea-${crypto.randomUUID()}`\n\n  static styles = css`\n    :host {\n      display: inline-block;\n      inline-size: 100%;\n    }\n\n    .field {\n      display: grid;\n      gap: var(--sken-1, 0.25rem);\n    }\n\n    .label {\n      font-size: var(--sken-size-xs, 0.75rem);\n      font-weight: 500;\n      color: var(--sken-foreground);\n    }\n\n    :host([required]) .label::after {\n      content: ' *';\n    }\n\n    :host([required][invalid]) .label,\n    :host([required][invalid]) .label::after {\n      color: var(--sken-destructive);\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[data-empty] {\n      display: none;\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    this.#syncFormValue()\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback()\n    this.#slotStartObserver?.disconnect()\n    this.#slotEndObserver?.disconnect()\n  }\n\n  protected override firstUpdated(): void {\n    const startEl = this.renderRoot.querySelector('.slot-start') as HTMLElement | null\n    const endEl = this.renderRoot.querySelector('.slot-end') as HTMLElement | null\n    if (!startEl || !endEl) return\n\n    this.#slotStartObserver = new MutationObserver(() => this.#adjustSlotVisibility())\n    this.#slotStartObserver.observe(startEl, { childList: true, subtree: true, attributes: true })\n    this.#slotEndObserver = new MutationObserver(() => this.#adjustSlotVisibility())\n    this.#slotEndObserver.observe(endEl, { childList: true, subtree: true, attributes: true })\n\n    const startSlot = this.renderRoot.querySelector('slot[name=\"start\"]') as HTMLSlotElement | null\n    const endSlot = this.renderRoot.querySelector('slot[name=\"end\"]') as HTMLSlotElement | null\n    startSlot?.addEventListener('slotchange', this.#adjustSlotVisibility)\n    endSlot?.addEventListener('slotchange', this.#adjustSlotVisibility)\n\n    this.#adjustSlotVisibility()\n  }\n\n  #adjustSlotVisibility = (): void => {\n    const startEl = this.renderRoot.querySelector('.slot-start') as HTMLElement | null\n    const endEl = this.renderRoot.querySelector('.slot-end') as HTMLElement | null\n    const startSlot = this.renderRoot.querySelector('slot[name=\"start\"]') as HTMLSlotElement | null\n    const endSlot = this.renderRoot.querySelector('slot[name=\"end\"]') as HTMLSlotElement | null\n    startEl?.toggleAttribute('data-empty', !slotHasContent(startSlot))\n    endEl?.toggleAttribute('data-empty', !slotHasContent(endSlot))\n  }\n\n  #slotStartObserver: MutationObserver | undefined = undefined\n  #slotEndObserver: MutationObserver | undefined = undefined\n\n  // ── Form-association callbacks ─────────────────────────────\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(isDisabled: boolean): void {\n    this.disabled = isDisabled\n  }\n\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=\"field\" part=\"field\">\n        ${\n          this.label\n            ? html`<label class=\"label\" part=\"label\" for=${this._textareaId}>${this.label}</label>`\n            : nothing\n        }\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            id=${this._textareaId}\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            aria-label=${this.ariaLabel ?? ''}\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      </div>\n    `\n  }\n\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    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  #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    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/dist/sken-tooltip.js

@@ -0,0 +1,70 @@
+import { t as e } from "./decorate-C1e2sg49.js";
+import { LitElement as t, html as n } from "lit";
+import { customElement as r, property as i } from "lit/decorators.js";
+import { defineCustomElements as a } from "@siemens/ix-icons/loader";
+import { defineCustomElements as o } from "@siemens/ix/loader";
+//#region src/vendor/ix.ts
+typeof window < "u" && globalThis.__skenIxRegistered !== !0 && (globalThis.__skenIxRegistered = !0, o(window), a(window));
+//#endregion
+//#region src/components/sken-tooltip.ts
+var s = {
+	sm: "var(--sken-sm)",
+	md: "var(--sken-md)",
+	lg: "var(--sken-lg)",
+	full: "var(--sken-full)"
+}, c = class extends t {
+	constructor(...e) {
+		super(...e), this.for_ = "", this.content = "", this.placement = "top", this.showDelay = 0, this.hideDelay = 0, this.interactive = !1, this.radius = "sm", this.#t = () => {
+			this.dispatchEvent(new CustomEvent("sken-show", {
+				bubbles: !0,
+				composed: !0
+			}));
+		}, this.#n = () => {
+			this.dispatchEvent(new CustomEvent("sken-hide", {
+				bubbles: !0,
+				composed: !0
+			}));
+		};
+	}
+	createRenderRoot() {
+		return this;
+	}
+	render() {
+		return n`
+      <ix-tooltip
+        data-sken-tooltip-engine=""
+        for=${this.for_}
+        title-content=${this.content}
+        placement=${this.placement}
+        ?interactive=${this.interactive}
+        data-testid="sken-tooltip"
+        @ixTooltipShow=${this.#t}
+        @ixTooltipHide=${this.#n}
+      ></ix-tooltip>
+    `;
+	}
+	updated() {
+		let e = this.querySelector("[data-sken-tooltip-engine]");
+		e && (this.showDelay > 0 && e.showDelay !== this.showDelay && (e.showDelay = this.showDelay), this.hideDelay > 0 && e.hideDelay !== this.hideDelay && (e.hideDelay = this.hideDelay), e.style && e.style.setProperty("--sken-tooltip-radius", s[this.radius]), this.#e(e));
+	}
+	#e(e) {
+		let t = () => {
+			let t = e.shadowRoot?.querySelector(".tooltip-container");
+			t && t.style.setProperty("border-radius", `var(--sken-${this.radius})`);
+		};
+		t(), queueMicrotask(t);
+	}
+	#t;
+	#n;
+};
+e([i({ attribute: "for" })], c.prototype, "for_", void 0), e([i()], c.prototype, "content", void 0), e([i()], c.prototype, "placement", void 0), e([i({
+	attribute: "show-delay",
+	type: Number
+})], c.prototype, "showDelay", void 0), e([i({
+	attribute: "hide-delay",
+	type: Number
+})], c.prototype, "hideDelay", void 0), e([i({ type: Boolean })], c.prototype, "interactive", void 0), e([i()], c.prototype, "radius", void 0), c = e([r("sken-tooltip")], c);
+//#endregion
+export { c as SkenTooltip };
+
+//# sourceMappingURL=sken-tooltip.js.map

package/dist/sken-tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sken-tooltip.js","names":[],"sources":["../src/vendor/ix.ts","../src/components/sken-tooltip.ts"],"sourcesContent":["// ── iX vendor bootstrap (side-effect module) ────────────────────\n\nimport { defineCustomElements as defineIxIconElements } from '@siemens/ix-icons/loader'\nimport { defineCustomElements as defineIxElements } from '@siemens/ix/loader'\nimport '../css/ix-bridge.css'\n\ndeclare global {\n  // eslint-disable-next-line no-var\n  var __skenIxRegistered: boolean | undefined\n}\n\nif (typeof window !== 'undefined' && globalThis.__skenIxRegistered !== true) {\n  globalThis.__skenIxRegistered = true\n  defineIxElements(window)\n  defineIxIconElements(window)\n}\n","// ── <sken-tooltip> — Sken contract implementation (ADR-0007) ─────────\n\nimport type { SkenTooltipPlacement, SkenTooltipRadius } from '@sken-ds/contracts'\nimport { LitElement, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport '../vendor/ix.js'\n\nconst RADIUS_TOKEN: Record<SkenTooltipRadius, string> = {\n  sm: 'var(--sken-sm)',\n  md: 'var(--sken-md)',\n  lg: 'var(--sken-lg)',\n  full: 'var(--sken-full)',\n}\n\n@customElement('sken-tooltip')\nexport class SkenTooltip extends LitElement {\n  @property({ attribute: 'for' }) for_ = ''\n  @property() content = ''\n  @property() placement: SkenTooltipPlacement = 'top'\n  @property({ attribute: 'show-delay', type: Number }) showDelay = 0\n  @property({ attribute: 'hide-delay', type: Number }) hideDelay = 0\n  @property({ type: Boolean }) interactive = false\n  @property() radius: SkenTooltipRadius = 'sm'\n\n  protected override createRenderRoot(): HTMLElement {\n    return this as unknown as HTMLElement\n  }\n\n  override render() {\n    return html`\n      <ix-tooltip\n        data-sken-tooltip-engine=\"\"\n        for=${this.for_}\n        title-content=${this.content}\n        placement=${this.placement}\n        ?interactive=${this.interactive}\n        data-testid=\"sken-tooltip\"\n        @ixTooltipShow=${this.#handleShow}\n        @ixTooltipHide=${this.#handleHide}\n      ></ix-tooltip>\n    `\n  }\n\n  protected override updated(): void {\n    const el = this.querySelector('[data-sken-tooltip-engine]') as\n      | (HTMLElement & {\n          showDelay?: number\n          hideDelay?: number\n          style?: CSSStyleDeclaration\n          shadowRoot?: ShadowRoot | null\n        })\n      | null\n    if (!el) return\n    if (this.showDelay > 0 && el.showDelay !== this.showDelay) {\n      el.showDelay = this.showDelay\n    }\n    if (this.hideDelay > 0 && el.hideDelay !== this.hideDelay) {\n      el.hideDelay = this.hideDelay\n    }\n    if (el.style) {\n      el.style.setProperty('--sken-tooltip-radius', RADIUS_TOKEN[this.radius])\n    }\n    this.#stampContainerRadius(el)\n  }\n\n  #stampContainerRadius(el: HTMLElement & { shadowRoot?: ShadowRoot | null }): void {\n    const apply = () => {\n      const container = el.shadowRoot?.querySelector('.tooltip-container') as HTMLElement | null\n      if (container) {\n        container.style.setProperty('border-radius', `var(--sken-${this.radius})`)\n      }\n    }\n    apply()\n    queueMicrotask(apply)\n  }\n\n  #handleShow = (): void => {\n    this.dispatchEvent(new CustomEvent('sken-show', { bubbles: true, composed: true }))\n  }\n\n  #handleHide = (): void => {\n    this.dispatchEvent(new CustomEvent('sken-hide', { bubbles: true, composed: true }))\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'sken-tooltip': SkenTooltip\n  }\n}\n\nexport type { SkenTooltipPlacement, SkenTooltipProps, SkenTooltipRadius } from '@sken-ds/contracts'\n"],"mappings":";;;;;;AAWI,OAAO,SAAW,OAAe,WAAW,uBAAuB,OACrE,WAAW,qBAAqB,IAChC,EAAiB,MAAM,GACvB,EAAqB,MAAM;;;ACP7B,IAAM,IAAkD;CACtD,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,MAAM;AACR,GAGa,IAAN,cAA0B,EAAW;;EAiEhB,aAhEa,KAAA,OAAA,IACjB,KAAA,UAAA,IACwB,KAAA,YAAA,OACmB,KAAA,YAAA,GACA,KAAA,YAAA,GACtB,KAAA,cAAA,IACH,KAAA,SAAA,MAsDd,KAAA,WAAA;GACxB,KAAK,cAAc,IAAI,YAAY,aAAa;IAAE,SAAS;IAAM,UAAU;GAAK,CAAC,CAAC;EACpF,GAE0B,KAAA,WAAA;GACxB,KAAK,cAAc,IAAI,YAAY,aAAa;IAAE,SAAS;IAAM,UAAU;GAAK,CAAC,CAAC;EACpF;;CA1DA,mBAAmD;EACjD,OAAO;CACT;CAEA,SAAkB;EAChB,OAAO,CAAI;;;cAGD,KAAK,KAAK;wBACA,KAAK,QAAQ;oBACjB,KAAK,UAAU;uBACZ,KAAK,YAAY;;yBAEf,KAAK,GAAY;yBACjB,KAAK,GAAY;;;CAGxC;CAEA,UAAmC;EACjC,IAAM,IAAK,KAAK,cAAc,4BAA4B;EAQrD,MACD,KAAK,YAAY,KAAK,EAAG,cAAc,KAAK,cAC9C,EAAG,YAAY,KAAK,YAElB,KAAK,YAAY,KAAK,EAAG,cAAc,KAAK,cAC9C,EAAG,YAAY,KAAK,YAElB,EAAG,SACL,EAAG,MAAM,YAAY,yBAAyB,EAAa,KAAK,OAAO,GAEzE,KAAK,GAAsB,CAAE;CAC/B;CAEA,GAAsB,GAA4D;EAChF,IAAM,UAAc;GAClB,IAAM,IAAY,EAAG,YAAY,cAAc,oBAAoB;GACnE,AAAI,KACF,EAAU,MAAM,YAAY,iBAAiB,cAAc,KAAK,OAAO,EAAE;EAE7E;EAEA,AADA,EAAM,GACN,eAAe,CAAK;CACtB;CAEA;CAIA;AAGF;AAnEG,EAAA,CAAA,EAAS,EAAE,WAAW,MAAM,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,GAC7B,EAAA,CAAA,EAAS,CAAA,GAAA,EAAA,WAAA,WAAA,KAAA,CAAA,GACT,EAAA,CAAA,EAAS,CAAA,GAAA,EAAA,WAAA,aAAA,KAAA,CAAA,GACT,EAAA,CAAA,EAAS;CAAE,WAAW;CAAc,MAAM;AAAO,CAAC,CAAA,GAAA,EAAA,WAAA,aAAA,KAAA,CAAA,GAClD,EAAA,CAAA,EAAS;CAAE,WAAW;CAAc,MAAM;AAAO,CAAC,CAAA,GAAA,EAAA,WAAA,aAAA,KAAA,CAAA,GAClD,EAAA,CAAA,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,EAAA,WAAA,eAAA,KAAA,CAAA,GAC1B,EAAA,CAAA,EAAS,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA,GARX,IAAA,EAAA,CAAA,EAAc,cAAc,CAAA,GAAA,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sken-ds/primitives",
-  "version": "0.5.0",
+  "version": "0.6.1",
   "publishConfig": {
     "registry": "https://registry.npmjs.org",
     "access": "public"
@@ -36,6 +36,18 @@
       "types": "./dist/sken-layout.d.ts",
       "import": "./dist/sken-layout.js"
     },
+    "./sken-nav": {
+      "types": "./dist/sken-nav.d.ts",
+      "import": "./dist/sken-nav.js"
+    },
+    "./sken-nav-item": {
+      "types": "./dist/sken-nav-item.d.ts",
+      "import": "./dist/sken-nav-item.js"
+    },
+    "./sken-nav-group": {
+      "types": "./dist/sken-nav-group.d.ts",
+      "import": "./dist/sken-nav-group.js"
+    },
     "./sken-layout-region": {
       "types": "./dist/sken-layout-region.d.ts",
       "import": "./dist/sken-layout-region.js"
@@ -79,36 +91,42 @@
     "./sken-dialog": {
       "types": "./dist/sken-dialog.d.ts",
       "import": "./dist/sken-dialog.js"
+    },
+    "./sken-tooltip": {
+      "types": "./dist/sken-tooltip.d.ts",
+      "import": "./dist/sken-tooltip.js"
     }
   },
   "files": [
     "dist",
     "README.md"
   ],
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite build --watch",
+    "typecheck": "tsc --noEmit",
+    "lint": "echo 'lint placeholder'",
+    "test": "vitest run",
+    "test:coverage": "vitest run --coverage",
+    "clean": "rm -rf dist .turbo *.tsbuildinfo coverage"
+  },
   "dependencies": {
     "@lit/context": "^1.1.6",
     "@siemens/ix": "^5.2.0",
     "@siemens/ix-icons": "^3.5.0",
-    "@tanstack/lit-table": "^9.0.0",
+    "@sken-ds/contracts": "*",
+    "@sken-ds/icons": "*",
+    "@tanstack/lit-table": "^9.1.2",
     "@tanstack/match-sorter-utils": "^9.0.0",
     "@tanstack/table-core": "^9.0.0",
     "lit": "^3.3.3",
-    "lit-html": "^3.3.3",
-    "@sken-ds/contracts": "0.5.0"
+    "lit-html": "^3.3.3"
   },
   "devDependencies": {
-    "@vitest/coverage-v8": "^4.1.10",
+    "@vitest/coverage-v8": "^4.1.11",
     "happy-dom": "^20.11.1",
     "typescript": "^6.0.3",
-    "vite": "^8.2.0",
+    "vite": "^8.2.2",
     "vitest": "^4.1.10"
-  },
-  "scripts": {
-    "build": "vite build && node scripts/copy-css-assets.mjs",
-    "dev": "vite build --watch",
-    "typecheck": "tsc --noEmit",
-    "lint": "echo 'lint placeholder'",
-    "test": "vitest run",
-    "clean": "rm -rf dist .turbo *.tsbuildinfo"
   }
-}
+}