@deepfuture/dui-components 0.0.19 → 0.0.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (52) hide show
  1. package/all.d.ts +6 -2
  2. package/all.js +12 -4
  3. package/card/card.d.ts +29 -0
  4. package/card/card.js +179 -0
  5. package/card/index.d.ts +3 -0
  6. package/card/index.js +3 -0
  7. package/checkbox/checkbox.d.ts +3 -2
  8. package/checkbox/checkbox.js +21 -46
  9. package/combobox/combobox.d.ts +3 -0
  10. package/combobox/combobox.js +21 -10
  11. package/data-table/data-table.js +4 -4
  12. package/dropzone/dropzone.js +1 -0
  13. package/field/field.d.ts +32 -0
  14. package/field/field.js +363 -0
  15. package/field/index.d.ts +1 -2
  16. package/field/index.js +1 -1
  17. package/fieldset/fieldset.d.ts +20 -0
  18. package/fieldset/fieldset.js +116 -0
  19. package/fieldset/index.d.ts +1 -0
  20. package/fieldset/index.js +1 -0
  21. package/global.d.ts +0 -2
  22. package/input/input.d.ts +4 -2
  23. package/input/input.js +27 -52
  24. package/menu/menu.d.ts +2 -0
  25. package/menu/menu.js +13 -3
  26. package/number-field/number-field.d.ts +2 -2
  27. package/number-field/number-field.js +13 -49
  28. package/package.json +10 -6
  29. package/preview-card/preview-card-popup.js +1 -0
  30. package/radio/radio.d.ts +3 -2
  31. package/radio/radio.js +22 -44
  32. package/scroll-area/scroll-area.d.ts +1 -1
  33. package/scroll-area/scroll-area.js +5 -16
  34. package/select/select.d.ts +5 -2
  35. package/select/select.js +38 -34
  36. package/separator/separator.js +1 -0
  37. package/slider/slider.d.ts +3 -0
  38. package/slider/slider.js +12 -5
  39. package/split-button/split-button.d.ts +2 -0
  40. package/split-button/split-button.js +11 -1
  41. package/stepper/stepper.d.ts +0 -2
  42. package/stepper/stepper.js +7 -38
  43. package/switch/switch.d.ts +3 -2
  44. package/switch/switch.js +16 -41
  45. package/textarea/textarea.d.ts +4 -0
  46. package/textarea/textarea.js +20 -0
  47. package/field/field-context.d.ts +0 -20
  48. package/field/field-context.js +0 -2
  49. package/link/index.d.ts +0 -3
  50. package/link/index.js +0 -3
  51. package/link/link.d.ts +0 -27
  52. package/link/link.js +0 -95
@@ -38,11 +38,9 @@ var __setFunctionName = (this && this.__setFunctionName) || function (f, name, p
38
38
  };
39
39
  import { css, html, LitElement, nothing } from "lit";
40
40
  import { property, state } from "lit/decorators.js";
41
- import { consume } from "@lit/context";
42
41
  import { live } from "lit/directives/live.js";
43
42
  import { base } from "@deepfuture/dui-core/base";
44
43
  import { customEvent } from "@deepfuture/dui-core/event";
45
- import { fieldContext } from "@deepfuture/dui-components/field";
46
44
  export const valueChangeEvent = customEvent("value-change", { bubbles: true, composed: true });
47
45
  export const valueCommittedEvent = customEvent("value-committed", { bubbles: true, composed: true });
48
46
  /** Structural styles only — layout CSS. */
@@ -153,9 +151,6 @@ let DuiStepper = (() => {
153
151
  let _private_inputText_initializers = [];
154
152
  let _private_inputText_extraInitializers = [];
155
153
  let _private_inputText_descriptor;
156
- let __fieldCtx_decorators;
157
- let __fieldCtx_initializers = [];
158
- let __fieldCtx_extraInitializers = [];
159
154
  return class DuiStepper extends _classSuper {
160
155
  static {
161
156
  const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
@@ -171,7 +166,6 @@ let DuiStepper = (() => {
171
166
  _name_decorators = [property()];
172
167
  _private_internalValue_decorators = [state()];
173
168
  _private_inputText_decorators = [state()];
174
- __fieldCtx_decorators = [consume({ context: fieldContext, subscribe: true }), state()];
175
169
  __esDecorate(this, null, _value_decorators, { kind: "accessor", name: "value", static: false, private: false, access: { has: obj => "value" in obj, get: obj => obj.value, set: (obj, value) => { obj.value = value; } }, metadata: _metadata }, _value_initializers, _value_extraInitializers);
176
170
  __esDecorate(this, null, _defaultValue_decorators, { kind: "accessor", name: "defaultValue", static: false, private: false, access: { has: obj => "defaultValue" in obj, get: obj => obj.defaultValue, set: (obj, value) => { obj.defaultValue = value; } }, metadata: _metadata }, _defaultValue_initializers, _defaultValue_extraInitializers);
177
171
  __esDecorate(this, null, _min_decorators, { kind: "accessor", name: "min", static: false, private: false, access: { has: obj => "min" in obj, get: obj => obj.min, set: (obj, value) => { obj.min = value; } }, metadata: _metadata }, _min_initializers, _min_extraInitializers);
@@ -184,7 +178,6 @@ let DuiStepper = (() => {
184
178
  __esDecorate(this, null, _name_decorators, { kind: "accessor", name: "name", static: false, private: false, access: { has: obj => "name" in obj, get: obj => obj.name, set: (obj, value) => { obj.name = value; } }, metadata: _metadata }, _name_initializers, _name_extraInitializers);
185
179
  __esDecorate(this, _private_internalValue_descriptor = { get: __setFunctionName(function () { return this.#internalValue_accessor_storage; }, "#internalValue", "get"), set: __setFunctionName(function (value) { this.#internalValue_accessor_storage = value; }, "#internalValue", "set") }, _private_internalValue_decorators, { kind: "accessor", name: "#internalValue", static: false, private: true, access: { has: obj => #internalValue in obj, get: obj => obj.#internalValue, set: (obj, value) => { obj.#internalValue = value; } }, metadata: _metadata }, _private_internalValue_initializers, _private_internalValue_extraInitializers);
186
180
  __esDecorate(this, _private_inputText_descriptor = { get: __setFunctionName(function () { return this.#inputText_accessor_storage; }, "#inputText", "get"), set: __setFunctionName(function (value) { this.#inputText_accessor_storage = value; }, "#inputText", "set") }, _private_inputText_decorators, { kind: "accessor", name: "#inputText", static: false, private: true, access: { has: obj => #inputText in obj, get: obj => obj.#inputText, set: (obj, value) => { obj.#inputText = value; } }, metadata: _metadata }, _private_inputText_initializers, _private_inputText_extraInitializers);
187
- __esDecorate(this, null, __fieldCtx_decorators, { kind: "accessor", name: "_fieldCtx", static: false, private: false, access: { has: obj => "_fieldCtx" in obj, get: obj => obj._fieldCtx, set: (obj, value) => { obj._fieldCtx = value; } }, metadata: _metadata }, __fieldCtx_initializers, __fieldCtx_extraInitializers);
188
181
  if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
189
182
  }
190
183
  static tagName = "dui-stepper";
@@ -230,19 +223,10 @@ let DuiStepper = (() => {
230
223
  #inputText_accessor_storage = (__runInitializers(this, _private_internalValue_extraInitializers), __runInitializers(this, _private_inputText_initializers, ""));
231
224
  get #inputText() { return _private_inputText_descriptor.get.call(this); }
232
225
  set #inputText(value) { return _private_inputText_descriptor.set.call(this, value); }
233
- #_fieldCtx_accessor_storage = (__runInitializers(this, _private_inputText_extraInitializers), __runInitializers(this, __fieldCtx_initializers, void 0));
234
- get _fieldCtx() { return this.#_fieldCtx_accessor_storage; }
235
- set _fieldCtx(value) { this.#_fieldCtx_accessor_storage = value; }
236
226
  // ── Computed getters ───────────────────────────────────────────────
237
227
  get #currentValue() {
238
228
  return this.value ?? this.#internalValue;
239
229
  }
240
- get #isDisabled() {
241
- return this.disabled || (this._fieldCtx?.disabled ?? false);
242
- }
243
- get #isInvalid() {
244
- return this._fieldCtx?.invalid ?? false;
245
- }
246
230
  get #canDecrement() {
247
231
  const v = this.#currentValue;
248
232
  if (v === undefined)
@@ -283,18 +267,16 @@ let DuiStepper = (() => {
283
267
  if (this.value === undefined) {
284
268
  this.#internalValue = clamped;
285
269
  }
286
- this._fieldCtx?.markDirty();
287
- this._fieldCtx?.setFilled(true);
288
270
  this.dispatchEvent(valueChangeEvent({ value: clamped }));
289
271
  }
290
- #increment = (__runInitializers(this, __fieldCtx_extraInitializers), (amount) => {
291
- if (this.#isDisabled || this.readOnly)
272
+ #increment = (__runInitializers(this, _private_inputText_extraInitializers), (amount) => {
273
+ if (this.disabled || this.readOnly)
292
274
  return;
293
275
  const current = this.#currentValue ?? this.min ?? 0;
294
276
  this.#setValue(current + amount);
295
277
  });
296
278
  #decrement = (amount) => {
297
- if (this.#isDisabled || this.readOnly)
279
+ if (this.disabled || this.readOnly)
298
280
  return;
299
281
  const current = this.#currentValue ?? this.max ?? 0;
300
282
  this.#setValue(current - amount);
@@ -318,11 +300,6 @@ let DuiStepper = (() => {
318
300
  };
319
301
  #onBlur = () => {
320
302
  this.#commitInput();
321
- this._fieldCtx?.setFocused(false);
322
- this._fieldCtx?.markTouched();
323
- };
324
- #onFocus = () => {
325
- this._fieldCtx?.setFocused(true);
326
303
  };
327
304
  #onKeyDown = (e) => {
328
305
  switch (e.key) {
@@ -369,40 +346,32 @@ let DuiStepper = (() => {
369
346
  };
370
347
  // ── Render ─────────────────────────────────────────────────────────
371
348
  render() {
372
- const isDisabled = this.#isDisabled;
373
- const isInvalid = this.#isInvalid;
374
- const controlId = this._fieldCtx?.controlId ?? "";
375
349
  const currentValue = this.#currentValue;
376
350
  return html `
377
351
  <div
378
352
  part="root"
379
- ?data-disabled="${isDisabled}"
380
- ?data-invalid="${isInvalid}"
353
+ ?data-disabled="${this.disabled}"
381
354
  >
382
355
  <button
383
356
  part="decrement"
384
357
  type="button"
385
358
  tabindex="-1"
386
359
  aria-label="Decrease"
387
- ?disabled="${isDisabled || this.readOnly || !this.#canDecrement}"
360
+ ?disabled="${this.disabled || this.readOnly || !this.#canDecrement}"
388
361
  @click="${this.#onDecrementClick}"
389
362
  >
390
363
  <slot name="decrement">&minus;</slot>
391
364
  </button>
392
365
  <input
393
366
  part="input"
394
- id="${controlId || nothing}"
395
367
  type="text"
396
368
  inputmode="decimal"
397
369
  .value="${live(this.#inputText)}"
398
- ?disabled="${isDisabled}"
370
+ ?disabled="${this.disabled}"
399
371
  ?readonly="${this.readOnly}"
400
372
  ?required="${this.required}"
401
- aria-invalid="${isInvalid ? "true" : nothing}"
402
- ?data-disabled="${isDisabled}"
403
373
  @input="${this.#onInput}"
404
374
  @keydown="${this.#onKeyDown}"
405
- @focus="${this.#onFocus}"
406
375
  @blur="${this.#onBlur}"
407
376
  />
408
377
  <button
@@ -410,7 +379,7 @@ let DuiStepper = (() => {
410
379
  type="button"
411
380
  tabindex="-1"
412
381
  aria-label="Increase"
413
- ?disabled="${isDisabled || this.readOnly || !this.#canIncrement}"
382
+ ?disabled="${this.disabled || this.readOnly || !this.#canIncrement}"
414
383
  @click="${this.#onIncrementClick}"
415
384
  >
416
385
  <slot name="increment">+</slot>
@@ -1,5 +1,4 @@
1
1
  import { LitElement, type TemplateResult } from "lit";
2
- import { type FieldContext } from "../field/field-context.js";
3
2
  export declare const checkedChangeEvent: (detail: {
4
3
  checked: boolean;
5
4
  }) => CustomEvent<{
@@ -15,7 +14,9 @@ export declare const checkedChangeEvent: (detail: {
15
14
  export declare class DuiSwitch extends LitElement {
16
15
  #private;
17
16
  static tagName: "dui-switch";
17
+ static formAssociated: boolean;
18
18
  static styles: import("lit").CSSResult[];
19
+ constructor();
19
20
  accessor checked: boolean | undefined;
20
21
  accessor defaultChecked: boolean;
21
22
  accessor disabled: boolean;
@@ -24,8 +25,8 @@ export declare class DuiSwitch extends LitElement {
24
25
  accessor name: string | undefined;
25
26
  accessor value: string;
26
27
  accessor uncheckedValue: string;
27
- accessor _fieldCtx: FieldContext;
28
28
  connectedCallback(): void;
29
+ willUpdate(): void;
29
30
  disconnectedCallback(): void;
30
31
  render(): TemplateResult;
31
32
  }
package/switch/switch.js CHANGED
@@ -38,10 +38,8 @@ var __setFunctionName = (this && this.__setFunctionName) || function (f, name, p
38
38
  };
39
39
  import { css, html, LitElement, nothing } from "lit";
40
40
  import { property, state } from "lit/decorators.js";
41
- import { consume } from "@lit/context";
42
41
  import { base } from "@deepfuture/dui-core/base";
43
42
  import { customEvent } from "@deepfuture/dui-core/event";
44
- import { fieldContext } from "../field/field-context.js";
45
43
  export const checkedChangeEvent = customEvent("checked-change", { bubbles: true, composed: true });
46
44
  /** Structural styles only — layout and behavioral CSS. */
47
45
  const styles = css `
@@ -66,6 +64,7 @@ const styles = css `
66
64
  margin-inline: 0;
67
65
  border: none;
68
66
  cursor: pointer;
67
+ user-select: none;
69
68
  }
70
69
 
71
70
  [part="thumb"] {
@@ -77,14 +76,6 @@ const styles = css `
77
76
  transform: translateX(var(--switch-checked-offset, 0));
78
77
  }
79
78
 
80
- .HiddenInput {
81
- position: absolute;
82
- pointer-events: none;
83
- opacity: 0;
84
- margin: 0;
85
- width: 0;
86
- height: 0;
87
- }
88
79
  `;
89
80
  /**
90
81
  * `<dui-switch>` — A toggle switch for binary on/off settings.
@@ -123,9 +114,6 @@ let DuiSwitch = (() => {
123
114
  let _private_internalChecked_initializers = [];
124
115
  let _private_internalChecked_extraInitializers = [];
125
116
  let _private_internalChecked_descriptor;
126
- let __fieldCtx_decorators;
127
- let __fieldCtx_initializers = [];
128
- let __fieldCtx_extraInitializers = [];
129
117
  return class DuiSwitch extends _classSuper {
130
118
  static {
131
119
  const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
@@ -138,7 +126,6 @@ let DuiSwitch = (() => {
138
126
  _value_decorators = [property()];
139
127
  _uncheckedValue_decorators = [property({ attribute: "unchecked-value" })];
140
128
  _private_internalChecked_decorators = [state()];
141
- __fieldCtx_decorators = [consume({ context: fieldContext, subscribe: true }), state()];
142
129
  __esDecorate(this, null, _checked_decorators, { kind: "accessor", name: "checked", static: false, private: false, access: { has: obj => "checked" in obj, get: obj => obj.checked, set: (obj, value) => { obj.checked = value; } }, metadata: _metadata }, _checked_initializers, _checked_extraInitializers);
143
130
  __esDecorate(this, null, _defaultChecked_decorators, { kind: "accessor", name: "defaultChecked", static: false, private: false, access: { has: obj => "defaultChecked" in obj, get: obj => obj.defaultChecked, set: (obj, value) => { obj.defaultChecked = value; } }, metadata: _metadata }, _defaultChecked_initializers, _defaultChecked_extraInitializers);
144
131
  __esDecorate(this, null, _disabled_decorators, { kind: "accessor", name: "disabled", static: false, private: false, access: { has: obj => "disabled" in obj, get: obj => obj.disabled, set: (obj, value) => { obj.disabled = value; } }, metadata: _metadata }, _disabled_initializers, _disabled_extraInitializers);
@@ -148,11 +135,16 @@ let DuiSwitch = (() => {
148
135
  __esDecorate(this, null, _value_decorators, { kind: "accessor", name: "value", static: false, private: false, access: { has: obj => "value" in obj, get: obj => obj.value, set: (obj, value) => { obj.value = value; } }, metadata: _metadata }, _value_initializers, _value_extraInitializers);
149
136
  __esDecorate(this, null, _uncheckedValue_decorators, { kind: "accessor", name: "uncheckedValue", static: false, private: false, access: { has: obj => "uncheckedValue" in obj, get: obj => obj.uncheckedValue, set: (obj, value) => { obj.uncheckedValue = value; } }, metadata: _metadata }, _uncheckedValue_initializers, _uncheckedValue_extraInitializers);
150
137
  __esDecorate(this, _private_internalChecked_descriptor = { get: __setFunctionName(function () { return this.#internalChecked_accessor_storage; }, "#internalChecked", "get"), set: __setFunctionName(function (value) { this.#internalChecked_accessor_storage = value; }, "#internalChecked", "set") }, _private_internalChecked_decorators, { kind: "accessor", name: "#internalChecked", static: false, private: true, access: { has: obj => #internalChecked in obj, get: obj => obj.#internalChecked, set: (obj, value) => { obj.#internalChecked = value; } }, metadata: _metadata }, _private_internalChecked_initializers, _private_internalChecked_extraInitializers);
151
- __esDecorate(this, null, __fieldCtx_decorators, { kind: "accessor", name: "_fieldCtx", static: false, private: false, access: { has: obj => "_fieldCtx" in obj, get: obj => obj._fieldCtx, set: (obj, value) => { obj._fieldCtx = value; } }, metadata: _metadata }, __fieldCtx_initializers, __fieldCtx_extraInitializers);
152
138
  if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
153
139
  }
154
140
  static tagName = "dui-switch";
141
+ static formAssociated = true;
155
142
  static styles = [base, styles];
143
+ #internals;
144
+ constructor() {
145
+ super();
146
+ this.#internals = this.attachInternals();
147
+ }
156
148
  #checked_accessor_storage = __runInitializers(this, _checked_initializers, undefined);
157
149
  get checked() { return this.#checked_accessor_storage; }
158
150
  set checked(value) { this.#checked_accessor_storage = value; }
@@ -180,17 +172,11 @@ let DuiSwitch = (() => {
180
172
  #internalChecked_accessor_storage = (__runInitializers(this, _uncheckedValue_extraInitializers), __runInitializers(this, _private_internalChecked_initializers, false));
181
173
  get #internalChecked() { return _private_internalChecked_descriptor.get.call(this); }
182
174
  set #internalChecked(value) { return _private_internalChecked_descriptor.set.call(this, value); }
183
- #_fieldCtx_accessor_storage = (__runInitializers(this, _private_internalChecked_extraInitializers), __runInitializers(this, __fieldCtx_initializers, void 0));
184
- get _fieldCtx() { return this.#_fieldCtx_accessor_storage; }
185
- set _fieldCtx(value) { this.#_fieldCtx_accessor_storage = value; }
186
175
  get #isChecked() {
187
176
  return this.checked ?? this.#internalChecked;
188
177
  }
189
178
  get #isDisabled() {
190
- return this.disabled || (this._fieldCtx?.disabled ?? false);
191
- }
192
- get #isInvalid() {
193
- return this._fieldCtx?.invalid ?? false;
179
+ return this.disabled;
194
180
  }
195
181
  connectedCallback() {
196
182
  super.connectedCallback();
@@ -199,11 +185,18 @@ let DuiSwitch = (() => {
199
185
  }
200
186
  this.addEventListener("click", this.#handleHostClick);
201
187
  }
188
+ willUpdate() {
189
+ this.#syncFormValue();
190
+ }
191
+ #syncFormValue() {
192
+ const formValue = this.#isChecked ? this.value : this.uncheckedValue;
193
+ this.#internals.setFormValue(formValue || null);
194
+ }
202
195
  disconnectedCallback() {
203
196
  super.disconnectedCallback();
204
197
  this.removeEventListener("click", this.#handleHostClick);
205
198
  }
206
- #handleHostClick = (__runInitializers(this, __fieldCtx_extraInitializers), (_e) => {
199
+ #handleHostClick = (__runInitializers(this, _private_internalChecked_extraInitializers), (_e) => {
207
200
  this.#handleClick();
208
201
  });
209
202
  #handleClick = () => {
@@ -213,8 +206,6 @@ let DuiSwitch = (() => {
213
206
  if (this.checked === undefined) {
214
207
  this.#internalChecked = newChecked;
215
208
  }
216
- this._fieldCtx?.markDirty();
217
- this._fieldCtx?.markTouched();
218
209
  this.dispatchEvent(checkedChangeEvent({ checked: newChecked }));
219
210
  };
220
211
  #handleKeyDown = (e) => {
@@ -226,39 +217,23 @@ let DuiSwitch = (() => {
226
217
  render() {
227
218
  const isChecked = this.#isChecked;
228
219
  const isDisabled = this.#isDisabled;
229
- const isInvalid = this.#isInvalid;
230
- const controlId = this._fieldCtx?.controlId ?? "";
231
220
  return html `
232
221
  <span
233
222
  part="root"
234
223
  role="switch"
235
- id="${controlId || nothing}"
236
224
  aria-checked="${String(isChecked)}"
237
225
  aria-disabled="${isDisabled ? "true" : nothing}"
238
226
  aria-readonly="${this.readOnly ? "true" : nothing}"
239
227
  aria-required="${this.required ? "true" : nothing}"
240
- aria-invalid="${isInvalid ? "true" : nothing}"
241
228
  tabindex="${isDisabled ? nothing : "0"}"
242
229
  ?data-checked="${isChecked}"
243
230
  ?data-unchecked="${!isChecked}"
244
231
  ?data-disabled="${isDisabled}"
245
232
  ?data-readonly="${this.readOnly}"
246
233
  ?data-required="${this.required}"
247
- ?data-invalid="${isInvalid}"
248
234
  @keydown="${this.#handleKeyDown}"
249
235
  >
250
236
  <span part="thumb"></span>
251
- <input
252
- type="checkbox"
253
- name="${this.name ?? nothing}"
254
- value="${isChecked ? this.value : this.uncheckedValue}"
255
- .checked="${isChecked}"
256
- ?disabled="${isDisabled}"
257
- ?required="${this.required}"
258
- class="HiddenInput"
259
- aria-hidden="true"
260
- tabindex="-1"
261
- />
262
237
  </span>
263
238
  <slot></slot>
264
239
  `;
@@ -12,8 +12,10 @@ export declare const textareaChangeEvent: (detail: {
12
12
  export declare class DuiTextarea extends LitElement {
13
13
  #private;
14
14
  static tagName: "dui-textarea";
15
+ static formAssociated: boolean;
15
16
  static shadowRootOptions: ShadowRootInit;
16
17
  static styles: import("lit").CSSResult[];
18
+ constructor();
17
19
  /** Current textarea value. */
18
20
  accessor value: string;
19
21
  /** Placeholder text. */
@@ -30,5 +32,7 @@ export declare class DuiTextarea extends LitElement {
30
32
  accessor resize: TextareaResize;
31
33
  /** Maximum height (CSS value). Textarea scrolls when content exceeds this. */
32
34
  accessor maxHeight: string | undefined;
35
+ willUpdate(): void;
36
+ updated(): void;
33
37
  render(): TemplateResult;
34
38
  }
@@ -46,6 +46,7 @@ const styles = css `
46
46
  }
47
47
 
48
48
  [part="textarea"] {
49
+ display: block;
49
50
  box-sizing: border-box;
50
51
  width: 100%;
51
52
  font-family: inherit;
@@ -144,11 +145,17 @@ let DuiTextarea = (() => {
144
145
  if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
145
146
  }
146
147
  static tagName = "dui-textarea";
148
+ static formAssociated = true;
147
149
  static shadowRootOptions = {
148
150
  ...LitElement.shadowRootOptions,
149
151
  delegatesFocus: true,
150
152
  };
151
153
  static styles = [base, styles];
154
+ #internals;
155
+ constructor() {
156
+ super();
157
+ this.#internals = this.attachInternals();
158
+ }
152
159
  #value_accessor_storage = __runInitializers(this, _value_initializers, "");
153
160
  /** Current textarea value. */
154
161
  get value() { return this.#value_accessor_storage; }
@@ -187,9 +194,22 @@ let DuiTextarea = (() => {
187
194
  /** Maximum height (CSS value). Textarea scrolls when content exceeds this. */
188
195
  get maxHeight() { return this.#maxHeight_accessor_storage; }
189
196
  set maxHeight(value) { this.#maxHeight_accessor_storage = value; }
197
+ willUpdate() {
198
+ this.#internals.setFormValue(this.value);
199
+ }
200
+ #syncValidity() {
201
+ const textarea = this.shadowRoot?.querySelector("textarea");
202
+ if (textarea) {
203
+ this.#internals.setValidity(textarea.validity, textarea.validationMessage, textarea);
204
+ }
205
+ }
206
+ updated() {
207
+ this.#syncValidity();
208
+ }
190
209
  #onInput = (__runInitializers(this, _maxHeight_extraInitializers), (event) => {
191
210
  const target = event.target;
192
211
  this.value = target.value;
212
+ this.#internals.setFormValue(this.value);
193
213
  this.dispatchEvent(textareaChangeEvent({ value: this.value }));
194
214
  });
195
215
  render() {
@@ -1,20 +0,0 @@
1
- export type FieldContext = {
2
- readonly fieldId: string;
3
- readonly labelId: string;
4
- readonly controlId: string;
5
- readonly descriptionId: string;
6
- readonly errorId: string;
7
- readonly disabled: boolean;
8
- readonly invalid: boolean;
9
- readonly dirty: boolean;
10
- readonly touched: boolean;
11
- readonly filled: boolean;
12
- readonly focused: boolean;
13
- readonly markTouched: () => void;
14
- readonly markDirty: () => void;
15
- readonly setFocused: (focused: boolean) => void;
16
- readonly setFilled: (filled: boolean) => void;
17
- };
18
- export declare const fieldContext: {
19
- __context__: FieldContext;
20
- };
@@ -1,2 +0,0 @@
1
- import { createContext } from "@lit/context";
2
- export const fieldContext = createContext(Symbol("dui-field"));
package/link/index.d.ts DELETED
@@ -1,3 +0,0 @@
1
- import { DuiLink, spaNavigateEvent } from "./link.js";
2
- export { DuiLink, spaNavigateEvent };
3
- export declare const linkFamily: (typeof DuiLink)[];
package/link/index.js DELETED
@@ -1,3 +0,0 @@
1
- import { DuiLink, spaNavigateEvent } from "./link.js";
2
- export { DuiLink, spaNavigateEvent };
3
- export const linkFamily = [DuiLink];
package/link/link.d.ts DELETED
@@ -1,27 +0,0 @@
1
- /** Ported from original DUI: deep-future-app/app/client/components/dui/link */
2
- import { LitElement, type TemplateResult } from "lit";
3
- export declare const spaNavigateEvent: (detail: {
4
- href: string;
5
- }) => CustomEvent<{
6
- href: string;
7
- }>;
8
- /**
9
- * `<dui-link>` — A layout-transparent SPA link.
10
- *
11
- * Renders a real `<a href>` inside shadow DOM for native link behaviors
12
- * (right-click menu, URL preview on hover, accessibility). On plain
13
- * left-click, dispatches a bubbling `spa-navigate` event instead of
14
- * performing a full page navigation. Modifier-clicks (cmd/ctrl/shift/middle)
15
- * fall through to the browser for new-tab behavior.
16
- *
17
- * @slot - Link content.
18
- * @fires spa-navigate - Fired on plain left-click. Detail: { href }.
19
- */
20
- export declare class DuiLink extends LitElement {
21
- #private;
22
- static tagName: "dui-link";
23
- static styles: import("lit").CSSResult[];
24
- /** The URL to navigate to. */
25
- accessor href: string;
26
- render(): TemplateResult;
27
- }
package/link/link.js DELETED
@@ -1,95 +0,0 @@
1
- /** Ported from original DUI: deep-future-app/app/client/components/dui/link */
2
- var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
3
- function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
4
- var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
5
- var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
6
- var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
7
- var _, done = false;
8
- for (var i = decorators.length - 1; i >= 0; i--) {
9
- var context = {};
10
- for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
11
- for (var p in contextIn.access) context.access[p] = contextIn.access[p];
12
- context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
13
- var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
14
- if (kind === "accessor") {
15
- if (result === void 0) continue;
16
- if (result === null || typeof result !== "object") throw new TypeError("Object expected");
17
- if (_ = accept(result.get)) descriptor.get = _;
18
- if (_ = accept(result.set)) descriptor.set = _;
19
- if (_ = accept(result.init)) initializers.unshift(_);
20
- }
21
- else if (_ = accept(result)) {
22
- if (kind === "field") initializers.unshift(_);
23
- else descriptor[key] = _;
24
- }
25
- }
26
- if (target) Object.defineProperty(target, contextIn.name, descriptor);
27
- done = true;
28
- };
29
- var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
30
- var useValue = arguments.length > 2;
31
- for (var i = 0; i < initializers.length; i++) {
32
- value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
33
- }
34
- return useValue ? value : void 0;
35
- };
36
- import { css, html, LitElement } from "lit";
37
- import { property } from "lit/decorators.js";
38
- import { base } from "@deepfuture/dui-core/base";
39
- import { customEvent } from "@deepfuture/dui-core/event";
40
- export const spaNavigateEvent = customEvent("spa-navigate", { bubbles: true, composed: true });
41
- /** Structural styles only — layout CSS. */
42
- const styles = css `
43
- :host {
44
- display: contents;
45
- }
46
-
47
- a {
48
- display: contents;
49
- color: inherit;
50
- text-decoration: none;
51
- }
52
- `;
53
- /**
54
- * `<dui-link>` — A layout-transparent SPA link.
55
- *
56
- * Renders a real `<a href>` inside shadow DOM for native link behaviors
57
- * (right-click menu, URL preview on hover, accessibility). On plain
58
- * left-click, dispatches a bubbling `spa-navigate` event instead of
59
- * performing a full page navigation. Modifier-clicks (cmd/ctrl/shift/middle)
60
- * fall through to the browser for new-tab behavior.
61
- *
62
- * @slot - Link content.
63
- * @fires spa-navigate - Fired on plain left-click. Detail: { href }.
64
- */
65
- let DuiLink = (() => {
66
- let _classSuper = LitElement;
67
- let _href_decorators;
68
- let _href_initializers = [];
69
- let _href_extraInitializers = [];
70
- return class DuiLink extends _classSuper {
71
- static {
72
- const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
73
- _href_decorators = [property()];
74
- __esDecorate(this, null, _href_decorators, { kind: "accessor", name: "href", static: false, private: false, access: { has: obj => "href" in obj, get: obj => obj.href, set: (obj, value) => { obj.href = value; } }, metadata: _metadata }, _href_initializers, _href_extraInitializers);
75
- if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
76
- }
77
- static tagName = "dui-link";
78
- static styles = [base, styles];
79
- #href_accessor_storage = __runInitializers(this, _href_initializers, "");
80
- /** The URL to navigate to. */
81
- get href() { return this.#href_accessor_storage; }
82
- set href(value) { this.#href_accessor_storage = value; }
83
- #onClick = (__runInitializers(this, _href_extraInitializers), (event) => {
84
- if (event.metaKey || event.ctrlKey || event.shiftKey || event.button !== 0) {
85
- return;
86
- }
87
- event.preventDefault();
88
- this.dispatchEvent(spaNavigateEvent({ href: this.href }));
89
- });
90
- render() {
91
- return html `<a href="${this.href}" @click="${this.#onClick}"><slot></slot></a>`;
92
- }
93
- };
94
- })();
95
- export { DuiLink };