@brad-frost-web/eddie-web-components 0.29.0 → 0.31.0

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 (15) hide show
  1. package/cdn/components/key-value-table-row/key-value-table-row.js +14 -10
  2. package/cdn/components/select-field/select-field.js +98 -68
  3. package/components/checkbox-field-item/checkbox-field-item.d.ts +3 -1
  4. package/components/checkbox-field-item/checkbox-field-item.d.ts.map +1 -1
  5. package/components/key-value-table-row/key-value-table-row.d.ts +14 -1
  6. package/components/key-value-table-row/key-value-table-row.d.ts.map +1 -1
  7. package/components/key-value-table-row/key-value-table-row.js +16 -12
  8. package/components/radio-field-item/radio-field-item.d.ts +2 -0
  9. package/components/radio-field-item/radio-field-item.d.ts.map +1 -1
  10. package/components/select-field/select-field.d.ts +20 -1
  11. package/components/select-field/select-field.d.ts.map +1 -1
  12. package/components/select-field/select-field.js +102 -72
  13. package/components/toggle/toggle.d.ts +2 -0
  14. package/components/toggle/toggle.d.ts.map +1 -1
  15. package/package.json +1 -1
package/cdn/components/key-value-table-row/key-value-table-row.js CHANGED
@@ -1,10 +1,10 @@
1
- import { r as i, b as y, n as o } from "../../chunks/lit.Drf_LhNi.js";
1
+ import { r as i, b as y, n as r } from "../../chunks/lit.Drf_LhNi.js";
2
2
  import { E as h } from "../../chunks/ed-base.CuGZbk3k.js";
3
3
  const f = ":root,:host{--size-base-unit: .5rem}*,::slotted(*),*:before,*:after{box-sizing:border-box}h1,h2,h3,h4,h5,h6{margin:0}:host{display:contents}.ed-c-key-value-table__row{font-family:var(--ed-theme-typography-body-default-font-family);font-weight:var(--ed-theme-typography-body-default-font-weight);font-size:var(--ed-theme-typography-body-default-font-size);line-height:var(--ed-theme-typography-body-default-line-height);letter-spacing:var(--ed-theme-typography-body-default-letter-spacing);text-transform:var(--ed-theme-typography-body-default-text-transform);width:100%;border-block-end:1px solid var(--ed-theme-color-border-subtle)}.ed-c-key-value-table-row__key{padding:.375rem 2rem .375rem 0;text-align:left}.ed-c-key-value-table-row__value{padding:.375rem 0;text-align:right}.ed-c-key-value-table__row--align-left .ed-c-key-value-table-row__value{text-align:left}";
4
- var p = Object.defineProperty, d = (l, t, s, u) => {
5
- for (var e = void 0, r = l.length - 1, n; r >= 0; r--)
6
- (n = l[r]) && (e = n(t, s, e) || e);
7
- return e && p(t, s, e), e;
4
+ var m = Object.defineProperty, d = (l, t, s, p) => {
5
+ for (var e = void 0, o = l.length - 1, n; o >= 0; o--)
6
+ (n = l[o]) && (e = n(t, s, e) || e);
7
+ return e && m(t, s, e), e;
8
8
  };
9
9
  class a extends h {
10
10
  static get styles() {
@@ -16,20 +16,24 @@ class a extends h {
16
16
  });
17
17
  return y`
18
18
  <tr class="${t}">
19
- <th scope="row" class="ed-c-key-value-table-row__key">${this.key}</th>
20
- <td class="ed-c-key-value-table-row__value">${this.value}</td>
19
+ <th scope="row" class="ed-c-key-value-table-row__key">
20
+ <slot name="key">${this.key}</slot>
21
+ </th>
22
+ <td class="ed-c-key-value-table-row__value">
23
+ <slot name="value">${this.value}</slot>
24
+ </td>
21
25
  </tr>
22
26
  `;
23
27
  }
24
28
  }
25
29
  d([
26
- o()
30
+ r()
27
31
  ], a.prototype, "key");
28
32
  d([
29
- o()
33
+ r()
30
34
  ], a.prototype, "value");
31
35
  d([
32
- o()
36
+ r()
33
37
  ], a.prototype, "align");
34
38
  customElements.get("ed-key-value-table-row") === void 0 && customElements.define("ed-key-value-table-row", a);
35
39
  export {
package/cdn/components/select-field/select-field.js CHANGED
@@ -1,28 +1,58 @@
1
1
  import { a as f } from "../../chunks/ed-base.CuGZbk3k.js";
2
- import { r as p, c as i, b as s, n as o, e as m, f as b } from "../../chunks/lit.Drf_LhNi.js";
2
+ import { r as p, c as s, b as a, n as d, e as m, f as b } from "../../chunks/lit.Drf_LhNi.js";
3
3
  import { n as u } from "../../chunks/index.browser.D527xXcp.js";
4
4
  import "../field-note/field-note.js";
5
5
  const v = ":root,:host{--size-base-unit: .5rem}*,::slotted(*),*:before,*:after{box-sizing:border-box}h1,h2,h3,h4,h5,h6{margin:0}.ed-c-select-field__label{font-family:var(--ed-theme-typography-label-default-font-family);font-weight:var(--ed-theme-typography-label-default-font-weight);font-size:var(--ed-theme-typography-label-default-font-size);line-height:var(--ed-theme-typography-label-default-line-height);letter-spacing:var(--ed-theme-typography-label-default-letter-spacing);text-transform:var(--ed-theme-typography-label-default-text-transform);display:block;margin-block-end:.5rem}.ed-c-select-field--inverted .ed-c-select-field__label{color:var(--ed-theme-color-content-knockout)}.ed-c-select-field.ed-is-error .ed-c-select-field__label{color:var(--ed-theme-color-content-utility-error)}.ed-c-select-field.ed-is-success .ed-c-select-field__label{color:var(--ed-theme-color-content-utility-success)}.ed-c-select-field__body{position:relative}.ed-c-select-field__input{-webkit-appearance:none;width:100%;border-width:var(--ed-theme-border-width-sm);border-style:solid;border-color:var(--ed-theme-form-color-border-default);border-radius:var(--ed-theme-border-radius-sm);outline:none;padding:.8125rem .5rem;font-family:var(--ed-theme-typography-body-default-font-family);font-weight:var(--ed-theme-typography-body-default-font-weight);font-size:var(--ed-theme-typography-body-default-font-size);line-height:var(--ed-theme-typography-body-default-line-height);letter-spacing:var(--ed-theme-typography-body-default-letter-spacing);text-transform:var(--ed-theme-typography-body-default-text-transform);color:var(--ed-theme-form-color-content-default);background-color:var(--ed-theme-form-color-background-default);transition:border-color var(--ed-theme-animation-fade-quick) var(--ed-theme-animation-ease),background-color var(--ed-theme-animation-fade-quick) var(--ed-theme-animation-ease),box-shadow var(--ed-theme-animation-fade-quick) var(--ed-theme-animation-ease)}.ed-c-select-field__input:hover{border-color:var(--ed-theme-color-border-brand);background-color:var(--ed-theme-form-color-background-hover)}.ed-c-select-field__input:focus:not(:disabled){border-color:var(--ed-theme-form-color-border-focus)}.ed-c-select-field__input:not(:placeholder-shown):focus:not(:disabled){border-color:var(--ed-theme-form-color-border-focus);background-color:var(--ed-theme-form-color-background-hover)}.ed-is-error .ed-c-select-field__input:not(:placeholder-shown):focus:not(:disabled){background-color:var(--ed-theme-color-background-utility-error)}.ed-is-success .ed-c-select-field__input:not(:placeholder-shown):focus:not(:disabled){background-color:var(--ed-theme-color-background-utility-success)}.ed-c-select-field__input:active:not(:disabled){border-color:var(--ed-theme-form-color-border)}.ed-c-select-field__input:disabled{background-color:var(--ed-theme-color-background-subtle);border-color:var(--ed-theme-color-border-disabled);color:var(--ed-theme-color-content-disabled);cursor:not-allowed}.ed-c-select-field__input:disabled~.ed-c-text-field__label,.ed-c-select-field__input:disabled:hover~.ed-c-text-field__label,.ed-c-select-field__input:disabled::placeholder{color:var(--ed-theme-color-content-disabled)}.ed-c-select-field__input:focus-visible{outline:var(--ed-theme-border-width-lg) solid var(--ed-theme-focus-ring-color-border-default);outline-offset:var(--ed-theme-offset-focus-ring, .25rem )}.ed-c-select-field__input::placeholder{font-family:var(--ed-theme-typography-body-sm-font-family);font-weight:var(--ed-theme-typography-body-sm-font-weight);font-size:var(--ed-theme-typography-body-sm-font-size);line-height:var(--ed-theme-typography-body-sm-line-height);letter-spacing:var(--ed-theme-typography-body-sm-letter-spacing);text-transform:var(--ed-theme-typography-body-sm-text-transform);color:var(--ed-theme-color-content-subtle);transition:color var(--ed-theme-animation-fade-quick) var(--ed-theme-animation-ease)}.ed-is-error .ed-c-select-field__input::placeholder{color:var(--ed-theme-color-content-utility-error)}.ed-is-error .ed-c-select-field__input:hover::placeholder{color:var(--ed-theme-color-content-utility-error-hover)}.ed-is-error .ed-c-select-field__input{color:var(--ed-theme-color-content-default);border-color:var(--ed-theme-color-border-utility-error);background-color:var(--ed-theme-color-background-utility-error)}.ed-is-error .ed-c-select-field__input:hover,.ed-is-error .ed-c-select-field__input:focus{background-color:var(--ed-theme-color-background-utility-error)}.ed-is-error .ed-c-select-field__input:not(:focus){color:var(--ed-theme-color-content-default)}.ed-is-success .ed-c-select-field__input{color:var(--ed-theme-color-content-default);border-color:var(--ed-theme-color-border-utility-success);background-color:var(--ed-theme-color-background-utility-success)}.ed-is-success .ed-c-select-field__input:hover,.ed-is-success .ed-c-select-field__input:focus{background-color:var(--ed-theme-color-background-utility-success)}.ed-c-select-field__input{padding-inline-end:2rem}.ed-c-select-field--inverted .ed-c-select-field__input{border-color:var(--ed-theme-color-border-subtle)}select::-ms-expand{display:none}ed-icon{position:absolute;inset-block-start:50%;transform:translateY(-50%);inset-inline-end:.75rem;pointer-events:none;--ed-icon-fill: var(--ed-theme-color-content-brand-knockout);--ed-icon-height: .75rem ;--ed-icon-width: .75rem }";
6
- var y = Object.defineProperty, t = (c, d, r, a) => {
6
+ var y = Object.defineProperty, r = (c, t, e, i) => {
7
7
  for (var l = void 0, n = c.length - 1, h; n >= 0; n--)
8
- (h = c[n]) && (l = h(d, r, l) || l);
9
- return l && y(d, r, l), l;
8
+ (h = c[n]) && (l = h(t, e, l) || l);
9
+ return l && y(t, e, l), l;
10
10
  };
11
- class e extends f {
11
+ class o extends f {
12
12
  constructor() {
13
13
  super(...arguments), this.type = "select", this.label = "Label", this.required = !1, this.items = [];
14
14
  }
15
15
  static get styles() {
16
16
  return p(v.toString());
17
17
  }
18
+ connectedCallback() {
19
+ if (super.connectedCallback(), !this.items || this.items.length === 0) {
20
+ const t = this.hydrateItemsFromOptionChildren();
21
+ t.length > 0 && (this.items = t);
22
+ }
23
+ }
18
24
  firstUpdated() {
19
- super.connectedCallback(), this.selectOptions.forEach((d) => {
20
- d.selected === !0 && (this.selectedItem = d.value);
21
- }), this.defaultValue = this.selectedItem ? this.selectedItem : this.selectOptions[0].value, this.fieldId = this.fieldId || u(), this.fieldNote && (this.ariaDescribedBy = this.ariaDescribedBy || u()), this.setFormData();
25
+ this.selectOptions.forEach((t) => {
26
+ t.selected === !0 && (this.selectedItem = t.value);
27
+ }), this.selectOptions.length > 0 && (this.defaultValue = this.selectedItem ? this.selectedItem : this.selectOptions[0].value), this.fieldId = this.fieldId || u(), this.fieldNote && (this.ariaDescribedBy = this.ariaDescribedBy || u()), this.setFormData();
28
+ }
29
+ /**
30
+ * Read native <option>/<optgroup> children from the light DOM and convert
31
+ * them to the structured items shape this component renders.
32
+ */
33
+ hydrateItemsFromOptionChildren() {
34
+ const t = [];
35
+ for (const e of Array.from(this.children))
36
+ if (e.tagName === "OPTGROUP") {
37
+ const i = Array.from(e.children).filter((l) => l.tagName === "OPTION").map((l) => ({
38
+ label: l.textContent?.trim() ?? "",
39
+ value: l.getAttribute("value") ?? l.textContent?.trim() ?? "",
40
+ ...l.hasAttribute("selected") ? { selected: !0 } : {}
41
+ }));
42
+ t.push({
43
+ optGroupLabel: e.getAttribute("label") ?? "",
44
+ options: i
45
+ });
46
+ } else e.tagName === "OPTION" && t.push({
47
+ label: e.textContent?.trim() ?? "",
48
+ value: e.getAttribute("value") ?? e.textContent?.trim() ?? "",
49
+ ...e.hasAttribute("selected") ? { selected: !0 } : {}
50
+ });
51
+ return t;
22
52
  }
23
- handleChange(d) {
24
- const r = d.target;
25
- this.value = r.value, console.log("event", this.value), this.dispatchEvent(new Event("change"));
53
+ handleChange(t) {
54
+ const e = t.target;
55
+ this.value = e.value, console.log("event", this.value), this.dispatchEvent(new Event("change"));
26
56
  }
27
57
  /**
28
58
  * Set form data
@@ -32,35 +62,35 @@ class e extends f {
32
62
  this.selectedItem ? this.internals.setFormValue(this.selectedItem) : this.internals.setFormValue(this.defaultValue.toString());
33
63
  }
34
64
  render() {
35
- const d = this.componentClassNames("ed-c-select-field", {
65
+ const t = this.componentClassNames("ed-c-select-field", {
36
66
  "ed-c-select-field--display": this.variant === "display",
37
67
  "ed-c-select-field--inverted": this.inverted === !0,
38
68
  "ed-is-error": this.isError,
39
69
  "ed-is-success": this.isSuccess
40
70
  });
41
- return s`
42
- <div class="${d}">
71
+ return a`
72
+ <div class="${t}">
43
73
  <label class="ed-c-select-field__label" for="${this.fieldId}">${this.label}</label>
44
74
  <div class="ed-c-select-field__body">
45
75
  <select
46
76
  class="ed-c-select-field__input"
47
77
  id="${this.fieldId}"
48
- name="${i(this.name)}"
49
- value="${i(this.value)}"
78
+ name="${s(this.name)}"
79
+ value="${s(this.value)}"
50
80
  ?required="${this.required}"
51
81
  ?disabled="${this.disabled}"
52
- aria-describedby="${i(this.ariaDescribedBy)}"
82
+ aria-describedby="${s(this.ariaDescribedBy)}"
53
83
  @change="${this.handleChange}"
54
84
  >
55
- ${this.items.map((r) => r.optGroupLabel ? s`<optgroup class="ed-c-select-field__optgroup" label="${r.optGroupLabel}">
56
- ${r.options.map((a) => s`<option class="ed-c-select-field__option" value="${a.value}" selected=${i(a.selected)}>${a.label}</option>`)}
57
- </optgroup>` : s`<option class="ed-c-select-field__option" value="${r.value}">${r.label}</option>`)}
85
+ ${this.items.map((e) => e.optGroupLabel ? a`<optgroup class="ed-c-select-field__optgroup" label="${e.optGroupLabel}">
86
+ ${e.options.map((i) => a`<option class="ed-c-select-field__option" value="${i.value}" selected=${s(i.selected)}>${i.label}</option>`)}
87
+ </optgroup>` : a`<option class="ed-c-select-field__option" value="${e.value}" ?selected=${e.selected === !0}>${e.label}</option>`)}
58
88
  </select>
59
89
  <ed-icon name="keyboard-arrow-down" styleModifier="ed-c-select-field__icon"></ed-icon>
60
90
  </div>
61
- ${this.fieldNote && s`<ed-field-note
62
- id=${i(this.ariaDescribedBy)}
63
- iconName=${i(this.iconName)}
91
+ ${this.fieldNote && a`<ed-field-note
92
+ id=${s(this.ariaDescribedBy)}
93
+ iconName=${s(this.iconName)}
64
94
  ?isSuccess=${this.isSuccess}
65
95
  ?isError=${this.isError}
66
96
  ?inverted=${this.inverted}
@@ -70,52 +100,52 @@ class e extends f {
70
100
  `;
71
101
  }
72
102
  }
73
- t([
74
- o()
75
- ], e.prototype, "fieldId");
76
- t([
77
- o()
78
- ], e.prototype, "label");
79
- t([
80
- o()
81
- ], e.prototype, "name");
82
- t([
83
- o()
84
- ], e.prototype, "fieldNote");
85
- t([
86
- o()
87
- ], e.prototype, "ariaDescribedBy");
88
- t([
89
- o({ type: Boolean })
90
- ], e.prototype, "required");
91
- t([
92
- o({ type: Boolean })
93
- ], e.prototype, "disabled");
94
- t([
95
- o({ type: Array })
96
- ], e.prototype, "items");
97
- t([
98
- o()
99
- ], e.prototype, "variant");
100
- t([
101
- o({ type: Boolean })
102
- ], e.prototype, "inverted");
103
- t([
104
- o({ type: Boolean })
105
- ], e.prototype, "isError");
106
- t([
107
- o({ type: Boolean })
108
- ], e.prototype, "isSuccess");
109
- t([
110
- o()
111
- ], e.prototype, "iconName");
112
- t([
103
+ r([
104
+ d()
105
+ ], o.prototype, "fieldId");
106
+ r([
107
+ d()
108
+ ], o.prototype, "label");
109
+ r([
110
+ d()
111
+ ], o.prototype, "name");
112
+ r([
113
+ d()
114
+ ], o.prototype, "fieldNote");
115
+ r([
116
+ d()
117
+ ], o.prototype, "ariaDescribedBy");
118
+ r([
119
+ d({ type: Boolean })
120
+ ], o.prototype, "required");
121
+ r([
122
+ d({ type: Boolean })
123
+ ], o.prototype, "disabled");
124
+ r([
125
+ d({ type: Array })
126
+ ], o.prototype, "items");
127
+ r([
128
+ d()
129
+ ], o.prototype, "variant");
130
+ r([
131
+ d({ type: Boolean })
132
+ ], o.prototype, "inverted");
133
+ r([
134
+ d({ type: Boolean })
135
+ ], o.prototype, "isError");
136
+ r([
137
+ d({ type: Boolean })
138
+ ], o.prototype, "isSuccess");
139
+ r([
140
+ d()
141
+ ], o.prototype, "iconName");
142
+ r([
113
143
  m("select")
114
- ], e.prototype, "field");
115
- t([
144
+ ], o.prototype, "field");
145
+ r([
116
146
  b("option")
117
- ], e.prototype, "selectOptions");
118
- customElements.get("ed-select-field") === void 0 && customElements.define("ed-select-field", e);
147
+ ], o.prototype, "selectOptions");
148
+ customElements.get("ed-select-field") === void 0 && customElements.define("ed-select-field", o);
119
149
  export {
120
- e as EdSelectField
150
+ o as EdSelectField
121
151
  };
package/components/checkbox-field-item/checkbox-field-item.d.ts CHANGED
@@ -17,7 +17,9 @@ import { EdFormElement } from '@brad-frost-web/eddie-web-components/components/E
17
17
  * @a11y The `disabled` attribute prevents interaction and removes the checkbox from form submission — use `readOnly` if you want the value submitted but not editable
18
18
  * @a11y The custom check icon is purely decorative — the native checkbox state (checked/unchecked) is what assistive technology reads
19
19
  *
20
- * @slot - The component content
20
+ * @slot - The checkbox item's visible label text
21
+ *
22
+ * @contentApi { contentVia: "default-slot", labelVia: "slot", labelVisibility: "visible" }
21
23
  */
22
24
  export declare class EdCheckboxFieldItem extends EdFormElement {
23
25
  readonly type = "checkbox";
package/components/checkbox-field-item/checkbox-field-item.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"checkbox-field-item.d.ts","sourceRoot":"","sources":["../../../../packages/eddie-web-components/components/checkbox-field-item/checkbox-field-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,+DAA+D,CAAC;AAK9F,OAAO,cAAc,CAAC;AAGtB;;;;;;;;;;;;;;;;;;;GAmBG;AACH,qBAAa,mBAAoB,SAAQ,aAAa;IACpD,QAAQ,CAAC,IAAI,cAAc;IAC3B,MAAM,KAAK,MAAM,4BAEhB;IAED;;OAEG;IAEH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IAEH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IAEH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IAEH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IAEH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IAEH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IAEH,OAAO,UAAS;IAEhB;;OAEG;IAEH,SAAS,CAAC,EAAE,GAAG,CAAC;IAEhB;;OAEG;IAEH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IAEH,aAAa,CAAC,EAAE,MAAM,CAAgB;IAEtC;;OAEG;IAEH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;OAGG;IAEH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IAEH,eAAe,CAAC,EAAE,MAAM,CAAC;IAGzB,KAAK,EAAG,gBAAgB,CAAC;IAEzB,UAAmB,YAAY,EAAE,OAAO,CAAC;IAEzC;;;;;;OAMG;IACH,iBAAiB;IAWjB,OAAO,CAAC,WAAW;IAInB,cAAc;IAKd,iBAAiB,IAAI,IAAI;IAOzB,MAAM;CA0BP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,wBAAwB,EAAE,mBAAmB,CAAC;KAC/C;CACF"}
1
+ {"version":3,"file":"checkbox-field-item.d.ts","sourceRoot":"","sources":["../../../../packages/eddie-web-components/components/checkbox-field-item/checkbox-field-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,+DAA+D,CAAC;AAK9F,OAAO,cAAc,CAAC;AAGtB;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,qBAAa,mBAAoB,SAAQ,aAAa;IACpD,QAAQ,CAAC,IAAI,cAAc;IAC3B,MAAM,KAAK,MAAM,4BAEhB;IAED;;OAEG;IAEH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IAEH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IAEH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IAEH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IAEH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IAEH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IAEH,OAAO,UAAS;IAEhB;;OAEG;IAEH,SAAS,CAAC,EAAE,GAAG,CAAC;IAEhB;;OAEG;IAEH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IAEH,aAAa,CAAC,EAAE,MAAM,CAAgB;IAEtC;;OAEG;IAEH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;OAGG;IAEH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IAEH,eAAe,CAAC,EAAE,MAAM,CAAC;IAGzB,KAAK,EAAG,gBAAgB,CAAC;IAEzB,UAAmB,YAAY,EAAE,OAAO,CAAC;IAEzC;;;;;;OAMG;IACH,iBAAiB;IAWjB,OAAO,CAAC,WAAW;IAInB,cAAc;IAKd,iBAAiB,IAAI,IAAI;IAOzB,MAAM;CA0BP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,wBAAwB,EAAE,mBAAmB,CAAC;KAC/C;CACF"}
package/components/key-value-table-row/key-value-table-row.d.ts CHANGED
@@ -20,7 +20,20 @@ import { EdElement } from '@brad-frost-web/eddie-web-components/components/EdEle
20
20
  * @a11y Keep key text concise and descriptive — it serves as the row header announced before the value
21
21
  * @a11y Use `align="left"` for text-heavy values to maintain natural reading order; right-alignment works best for numbers
22
22
  *
23
- * @slot - Alternative to value property for custom content (not typically used)
23
+ * ## Two ways to supply content
24
+ *
25
+ * Either pass `key` / `value` properties, or place named slot content in the
26
+ * light DOM. Slotted content overrides the property fallback when present:
27
+ *
28
+ * <ed-key-value-table-row>
29
+ * <span slot="key">Date</span>
30
+ * <span slot="value">April 28, 2026</span>
31
+ * </ed-key-value-table-row>
32
+ *
33
+ * @slot key - Optional slotted content for the key cell (overrides the `key` property when present)
34
+ * @slot value - Optional slotted content for the value cell (overrides the `value` property when present)
35
+ *
36
+ * @contentApi { contentVia: "props-or-named-slots", labelVia: "prop", labelVisibility: "visible" }
24
37
  */
25
38
  export declare class EdKeyValueTableRow extends EdElement {
26
39
  static get styles(): import('lit').CSSResult;
package/components/key-value-table-row/key-value-table-row.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"key-value-table-row.d.ts","sourceRoot":"","sources":["../../../../packages/eddie-web-components/components/key-value-table-row/key-value-table-row.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,2DAA2D,CAAC;AAGtF;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,qBAAa,kBAAmB,SAAQ,SAAS;IAC/C,MAAM,KAAK,MAAM,4BAEhB;IAED;;;OAGG;IAEH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;;OAGG;IAEH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;SAEK;IAEL,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,MAAM;CAYP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,wBAAwB,EAAE,kBAAkB,CAAC;KAC9C;CACF"}
1
+ {"version":3,"file":"key-value-table-row.d.ts","sourceRoot":"","sources":["../../../../packages/eddie-web-components/components/key-value-table-row/key-value-table-row.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,2DAA2D,CAAC;AAGtF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,qBAAa,kBAAmB,SAAQ,SAAS;IAC/C,MAAM,KAAK,MAAM,4BAEhB;IAED;;;OAGG;IAEH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;;OAGG;IAEH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;SAEK;IAEL,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,MAAM;CAgBP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,wBAAwB,EAAE,kBAAkB,CAAC;KAC9C;CACF"}
package/components/key-value-table-row/key-value-table-row.js CHANGED
@@ -1,15 +1,15 @@
1
1
  import { unsafeCSS as i, html as y } from "lit";
2
- import { property as o } from "lit/decorators.js";
2
+ import { property as r } from "lit/decorators.js";
3
3
  import { EdElement as h } from "../EdElement.js";
4
- const p = ":root,:host{--size-base-unit: .5rem}*,::slotted(*),*:before,*:after{box-sizing:border-box}h1,h2,h3,h4,h5,h6{margin:0}:host{display:contents}.ed-c-key-value-table__row{font-family:var(--ed-theme-typography-body-default-font-family);font-weight:var(--ed-theme-typography-body-default-font-weight);font-size:var(--ed-theme-typography-body-default-font-size);line-height:var(--ed-theme-typography-body-default-line-height);letter-spacing:var(--ed-theme-typography-body-default-letter-spacing);text-transform:var(--ed-theme-typography-body-default-text-transform);width:100%;border-block-end:1px solid var(--ed-theme-color-border-subtle)}.ed-c-key-value-table-row__key{padding:.375rem 2rem .375rem 0;text-align:left}.ed-c-key-value-table-row__value{padding:.375rem 0;text-align:right}.ed-c-key-value-table__row--align-left .ed-c-key-value-table-row__value{text-align:left}";
5
- var f = Object.defineProperty, d = (r, t, s, m) => {
6
- for (var e = void 0, l = r.length - 1, n; l >= 0; l--)
7
- (n = r[l]) && (e = n(t, s, e) || e);
8
- return e && f(t, s, e), e;
4
+ const m = ":root,:host{--size-base-unit: .5rem}*,::slotted(*),*:before,*:after{box-sizing:border-box}h1,h2,h3,h4,h5,h6{margin:0}:host{display:contents}.ed-c-key-value-table__row{font-family:var(--ed-theme-typography-body-default-font-family);font-weight:var(--ed-theme-typography-body-default-font-weight);font-size:var(--ed-theme-typography-body-default-font-size);line-height:var(--ed-theme-typography-body-default-line-height);letter-spacing:var(--ed-theme-typography-body-default-letter-spacing);text-transform:var(--ed-theme-typography-body-default-text-transform);width:100%;border-block-end:1px solid var(--ed-theme-color-border-subtle)}.ed-c-key-value-table-row__key{padding:.375rem 2rem .375rem 0;text-align:left}.ed-c-key-value-table-row__value{padding:.375rem 0;text-align:right}.ed-c-key-value-table__row--align-left .ed-c-key-value-table-row__value{text-align:left}";
5
+ var p = Object.defineProperty, d = (l, t, s, f) => {
6
+ for (var e = void 0, o = l.length - 1, n; o >= 0; o--)
7
+ (n = l[o]) && (e = n(t, s, e) || e);
8
+ return e && p(t, s, e), e;
9
9
  };
10
10
  class a extends h {
11
11
  static get styles() {
12
- return i(p);
12
+ return i(m);
13
13
  }
14
14
  render() {
15
15
  const t = this.componentClassNames("ed-c-key-value-table__row", {
@@ -17,20 +17,24 @@ class a extends h {
17
17
  });
18
18
  return y`
19
19
  <tr class="${t}">
20
- <th scope="row" class="ed-c-key-value-table-row__key">${this.key}</th>
21
- <td class="ed-c-key-value-table-row__value">${this.value}</td>
20
+ <th scope="row" class="ed-c-key-value-table-row__key">
21
+ <slot name="key">${this.key}</slot>
22
+ </th>
23
+ <td class="ed-c-key-value-table-row__value">
24
+ <slot name="value">${this.value}</slot>
25
+ </td>
22
26
  </tr>
23
27
  `;
24
28
  }
25
29
  }
26
30
  d([
27
- o()
31
+ r()
28
32
  ], a.prototype, "key");
29
33
  d([
30
- o()
34
+ r()
31
35
  ], a.prototype, "value");
32
36
  d([
33
- o()
37
+ r()
34
38
  ], a.prototype, "align");
35
39
  customElements.get("ed-key-value-table-row") === void 0 && customElements.define("ed-key-value-table-row", a);
36
40
  export {
package/components/radio-field-item/radio-field-item.d.ts CHANGED
@@ -20,6 +20,8 @@ import { EdFormElement } from '@brad-frost-web/eddie-web-components/components/E
20
20
  * @a11y When `fieldNote` conveys an error, pair it with `isError` so the visual state and `aria-describedby` association are both present
21
21
  *
22
22
  * @slot - The radio item's visible label text
23
+ *
24
+ * @contentApi { contentVia: "default-slot", labelVia: "slot", labelVisibility: "visible" }
23
25
  */
24
26
  export declare class EdRadioFieldItem extends EdFormElement {
25
27
  type: string;
package/components/radio-field-item/radio-field-item.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"radio-field-item.d.ts","sourceRoot":"","sources":["../../../../packages/eddie-web-components/components/radio-field-item/radio-field-item.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,aAAa,EAAE,MAAM,+DAA+D,CAAC;AAG9F;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,qBAAa,gBAAiB,SAAQ,aAAa;IACjD,IAAI,SAAW;IACf,MAAM,KAAK,MAAM,4BAEhB;IAED;;OAEG;IAEH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IAEH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IAEH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IAEH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IAEH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IAEH,IAAI,EAAE,MAAM,CAAC;IAEb;;OAEG;IAEH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IAEH,SAAS,CAAC,EAAE,GAAG,CAAC;IAEhB;;OAEG;IAEH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IAEH,aAAa,CAAC,EAAE,MAAM,CAAgB;IAEtC;;OAEG;IAEH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;OAGG;IAEH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IAEH,eAAe,CAAC,EAAE,MAAM,CAAC;IAGzB,KAAK,EAAG,gBAAgB,CAAC;IAEzB,OAAO,CAAC,cAAc,CAAU;IAEhC;;OAEG;;IAQH,iBAAiB;IAQjB;;OAEG;IACH,YAAY;IAKL,UAAU;IAIjB,OAAO,CAAC,WAAW;IAInB;;;OAGG;IACH,aAAa;IAYb,iBAAiB,IAAI,IAAI;IAOzB;;;;OAIG;IACH,YAAY,CAAC,CAAC,EAAE,UAAU;IAQ1B;;;;;;OAMG;IACH,aAAa,CAAC,CAAC,EAAE,aAAa;IAmB9B,MAAM;CA0BP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,gBAAgB,CAAC;KACzC;CACF"}
1
+ {"version":3,"file":"radio-field-item.d.ts","sourceRoot":"","sources":["../../../../packages/eddie-web-components/components/radio-field-item/radio-field-item.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,aAAa,EAAE,MAAM,+DAA+D,CAAC;AAG9F;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,qBAAa,gBAAiB,SAAQ,aAAa;IACjD,IAAI,SAAW;IACf,MAAM,KAAK,MAAM,4BAEhB;IAED;;OAEG;IAEH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IAEH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IAEH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IAEH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IAEH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IAEH,IAAI,EAAE,MAAM,CAAC;IAEb;;OAEG;IAEH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IAEH,SAAS,CAAC,EAAE,GAAG,CAAC;IAEhB;;OAEG;IAEH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IAEH,aAAa,CAAC,EAAE,MAAM,CAAgB;IAEtC;;OAEG;IAEH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;OAGG;IAEH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IAEH,eAAe,CAAC,EAAE,MAAM,CAAC;IAGzB,KAAK,EAAG,gBAAgB,CAAC;IAEzB,OAAO,CAAC,cAAc,CAAU;IAEhC;;OAEG;;IAQH,iBAAiB;IAQjB;;OAEG;IACH,YAAY;IAKL,UAAU;IAIjB,OAAO,CAAC,WAAW;IAInB;;;OAGG;IACH,aAAa;IAYb,iBAAiB,IAAI,IAAI;IAOzB;;;;OAIG;IACH,YAAY,CAAC,CAAC,EAAE,UAAU;IAQ1B;;;;;;OAMG;IACH,aAAa,CAAC,CAAC,EAAE,aAAa;IAmB9B,MAAM;CA0BP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,gBAAgB,CAAC;KACzC;CACF"}
package/components/select-field/select-field.d.ts CHANGED
@@ -34,7 +34,20 @@ import { EdFormElement } from '@brad-frost-web/eddie-web-components/components/E
34
34
  * @a11y Include a neutral placeholder option (e.g., "Select an option...") as the first item when no default selection is appropriate — this prevents accidental submission of the first real value
35
35
  * @a11y The `required` attribute is reflected on the native `<select>` — screen readers announce the field as required, so do not duplicate this information in the label text
36
36
  *
37
- * @slot - Not used (options are controlled via items property)
37
+ * ## Two ways to supply options
38
+ *
39
+ * Either pass an `items` array (the structured API, recommended for grouped options or
40
+ * dynamic data), or place native `<option>` / `<optgroup>` children in the light DOM —
41
+ * the component hydrates `items` from those children when `items` is empty:
42
+ *
43
+ * <ed-select-field label="Subject">
44
+ * <option value="general">General</option>
45
+ * <option value="support">Support</option>
46
+ * </ed-select-field>
47
+ *
48
+ * @slot - Optional `<option>` and `<optgroup>` children. Hydrated into `items` when the property is empty. The structured `items` array takes precedence if both are provided.
49
+ *
50
+ * @contentApi { contentVia: "items-prop-or-option-children", labelVia: "prop", labelVisibility: "visible" }
38
51
  */
39
52
  export declare class EdSelectField extends EdFormElement {
40
53
  readonly type = "select";
@@ -107,7 +120,13 @@ export declare class EdSelectField extends EdFormElement {
107
120
  * Selected item value
108
121
  */
109
122
  private selectedItem;
123
+ connectedCallback(): void;
110
124
  firstUpdated(): void;
125
+ /**
126
+ * Read native <option>/<optgroup> children from the light DOM and convert
127
+ * them to the structured items shape this component renders.
128
+ */
129
+ private hydrateItemsFromOptionChildren;
111
130
  handleChange(event: Event): void;
112
131
  /**
113
132
  * Set form data
package/components/select-field/select-field.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"select-field.d.ts","sourceRoot":"","sources":["../../../../packages/eddie-web-components/components/select-field/select-field.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,+DAA+D,CAAC;AAK9F,OAAO,0BAA0B,CAAC;AAGlC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,qBAAa,aAAc,SAAQ,aAAa;IAC9C,QAAQ,CAAC,IAAI,YAAY;IACzB,MAAM,KAAK,MAAM,4BAEhB;IAED;;OAEG;IAEH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IAEH,KAAK,EAAE,MAAM,CAAW;IAExB;;OAEG;IAEH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IAEH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IAEH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;OAEG;IAEH,QAAQ,EAAE,OAAO,CAAS;IAE1B;;OAEG;IAEH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;OAIG;IAEH,KAAK,EAAE,MAAM,EAAE,CAAM;IAErB;;;SAGK;IAEL,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;OAEG;IAEH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IAEH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IAEH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IAEH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;OAEG;IAEH,KAAK,EAAG,iBAAiB,CAAC;IAE1B;;OAEG;IAEH,aAAa,EAAE,iBAAiB,EAAE,CAAC;IAEnC;;OAEG;IACH,OAAO,CAAC,YAAY,CAAS;IAE7B,YAAY;IAgBZ,YAAY,CAAC,KAAK,EAAE,KAAK;IAOzB;;;OAGG;IACH,OAAO,CAAC,WAAW;IAInB,MAAM;CAgDP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}
1
+ {"version":3,"file":"select-field.d.ts","sourceRoot":"","sources":["../../../../packages/eddie-web-components/components/select-field/select-field.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,+DAA+D,CAAC;AAK9F,OAAO,0BAA0B,CAAC;AAGlC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiDG;AACH,qBAAa,aAAc,SAAQ,aAAa;IAC9C,QAAQ,CAAC,IAAI,YAAY;IACzB,MAAM,KAAK,MAAM,4BAEhB;IAED;;OAEG;IAEH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IAEH,KAAK,EAAE,MAAM,CAAW;IAExB;;OAEG;IAEH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IAEH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IAEH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;OAEG;IAEH,QAAQ,EAAE,OAAO,CAAS;IAE1B;;OAEG;IAEH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;OAIG;IAEH,KAAK,EAAE,MAAM,EAAE,CAAM;IAErB;;;SAGK;IAEL,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;OAEG;IAEH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IAEH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IAEH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IAEH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;OAEG;IAEH,KAAK,EAAG,iBAAiB,CAAC;IAE1B;;OAEG;IAEH,aAAa,EAAE,iBAAiB,EAAE,CAAC;IAEnC;;OAEG;IACH,OAAO,CAAC,YAAY,CAAS;IAE7B,iBAAiB;IAajB,YAAY;IAiBZ;;;OAGG;IACH,OAAO,CAAC,8BAA8B;IA0BtC,YAAY,CAAC,KAAK,EAAE,KAAK;IAOzB;;;OAGG;IACH,OAAO,CAAC,WAAW;IAInB,MAAM;CAgDP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}
package/components/select-field/select-field.js CHANGED
@@ -1,30 +1,60 @@
1
- import { EdFormElement as u } from "../EdFormElement.js";
2
- import { unsafeCSS as p, html as s } from "lit";
3
- import { property as o, query as m, queryAll as b } from "lit/decorators.js";
4
- import { ifDefined as i } from "lit-html/directives/if-defined.js";
5
- import { nanoid as f } from "../index.browser.js";
1
+ import { EdFormElement as f } from "../EdFormElement.js";
2
+ import { unsafeCSS as p, html as a } from "lit";
3
+ import { property as d, query as m, queryAll as b } from "lit/decorators.js";
4
+ import { ifDefined as s } from "lit-html/directives/if-defined.js";
5
+ import { nanoid as u } from "../index.browser.js";
6
6
  import "../field-note/field-note.js";
7
7
  const y = ":root,:host{--size-base-unit: .5rem}*,::slotted(*),*:before,*:after{box-sizing:border-box}h1,h2,h3,h4,h5,h6{margin:0}.ed-c-select-field__label{font-family:var(--ed-theme-typography-label-default-font-family);font-weight:var(--ed-theme-typography-label-default-font-weight);font-size:var(--ed-theme-typography-label-default-font-size);line-height:var(--ed-theme-typography-label-default-line-height);letter-spacing:var(--ed-theme-typography-label-default-letter-spacing);text-transform:var(--ed-theme-typography-label-default-text-transform);display:block;margin-block-end:.5rem}.ed-c-select-field--inverted .ed-c-select-field__label{color:var(--ed-theme-color-content-knockout)}.ed-c-select-field.ed-is-error .ed-c-select-field__label{color:var(--ed-theme-color-content-utility-error)}.ed-c-select-field.ed-is-success .ed-c-select-field__label{color:var(--ed-theme-color-content-utility-success)}.ed-c-select-field__body{position:relative}.ed-c-select-field__input{-webkit-appearance:none;width:100%;border-width:var(--ed-theme-border-width-sm);border-style:solid;border-color:var(--ed-theme-form-color-border-default);border-radius:var(--ed-theme-border-radius-sm);outline:none;padding:.8125rem .5rem;font-family:var(--ed-theme-typography-body-default-font-family);font-weight:var(--ed-theme-typography-body-default-font-weight);font-size:var(--ed-theme-typography-body-default-font-size);line-height:var(--ed-theme-typography-body-default-line-height);letter-spacing:var(--ed-theme-typography-body-default-letter-spacing);text-transform:var(--ed-theme-typography-body-default-text-transform);color:var(--ed-theme-form-color-content-default);background-color:var(--ed-theme-form-color-background-default);transition:border-color var(--ed-theme-animation-fade-quick) var(--ed-theme-animation-ease),background-color var(--ed-theme-animation-fade-quick) var(--ed-theme-animation-ease),box-shadow var(--ed-theme-animation-fade-quick) var(--ed-theme-animation-ease)}.ed-c-select-field__input:hover{border-color:var(--ed-theme-color-border-brand);background-color:var(--ed-theme-form-color-background-hover)}.ed-c-select-field__input:focus:not(:disabled){border-color:var(--ed-theme-form-color-border-focus)}.ed-c-select-field__input:not(:placeholder-shown):focus:not(:disabled){border-color:var(--ed-theme-form-color-border-focus);background-color:var(--ed-theme-form-color-background-hover)}.ed-is-error .ed-c-select-field__input:not(:placeholder-shown):focus:not(:disabled){background-color:var(--ed-theme-color-background-utility-error)}.ed-is-success .ed-c-select-field__input:not(:placeholder-shown):focus:not(:disabled){background-color:var(--ed-theme-color-background-utility-success)}.ed-c-select-field__input:active:not(:disabled){border-color:var(--ed-theme-form-color-border)}.ed-c-select-field__input:disabled{background-color:var(--ed-theme-color-background-subtle);border-color:var(--ed-theme-color-border-disabled);color:var(--ed-theme-color-content-disabled);cursor:not-allowed}.ed-c-select-field__input:disabled~.ed-c-text-field__label,.ed-c-select-field__input:disabled:hover~.ed-c-text-field__label,.ed-c-select-field__input:disabled::placeholder{color:var(--ed-theme-color-content-disabled)}.ed-c-select-field__input:focus-visible{outline:var(--ed-theme-border-width-lg) solid var(--ed-theme-focus-ring-color-border-default);outline-offset:var(--ed-theme-offset-focus-ring, .25rem )}.ed-c-select-field__input::placeholder{font-family:var(--ed-theme-typography-body-sm-font-family);font-weight:var(--ed-theme-typography-body-sm-font-weight);font-size:var(--ed-theme-typography-body-sm-font-size);line-height:var(--ed-theme-typography-body-sm-line-height);letter-spacing:var(--ed-theme-typography-body-sm-letter-spacing);text-transform:var(--ed-theme-typography-body-sm-text-transform);color:var(--ed-theme-color-content-subtle);transition:color var(--ed-theme-animation-fade-quick) var(--ed-theme-animation-ease)}.ed-is-error .ed-c-select-field__input::placeholder{color:var(--ed-theme-color-content-utility-error)}.ed-is-error .ed-c-select-field__input:hover::placeholder{color:var(--ed-theme-color-content-utility-error-hover)}.ed-is-error .ed-c-select-field__input{color:var(--ed-theme-color-content-default);border-color:var(--ed-theme-color-border-utility-error);background-color:var(--ed-theme-color-background-utility-error)}.ed-is-error .ed-c-select-field__input:hover,.ed-is-error .ed-c-select-field__input:focus{background-color:var(--ed-theme-color-background-utility-error)}.ed-is-error .ed-c-select-field__input:not(:focus){color:var(--ed-theme-color-content-default)}.ed-is-success .ed-c-select-field__input{color:var(--ed-theme-color-content-default);border-color:var(--ed-theme-color-border-utility-success);background-color:var(--ed-theme-color-background-utility-success)}.ed-is-success .ed-c-select-field__input:hover,.ed-is-success .ed-c-select-field__input:focus{background-color:var(--ed-theme-color-background-utility-success)}.ed-c-select-field__input{padding-inline-end:2rem}.ed-c-select-field--inverted .ed-c-select-field__input{border-color:var(--ed-theme-color-border-subtle)}select::-ms-expand{display:none}ed-icon{position:absolute;inset-block-start:50%;transform:translateY(-50%);inset-inline-end:.75rem;pointer-events:none;--ed-icon-fill: var(--ed-theme-color-content-brand-knockout);--ed-icon-height: .75rem ;--ed-icon-width: .75rem }";
8
- var v = Object.defineProperty, t = (c, d, r, a) => {
8
+ var v = Object.defineProperty, r = (c, t, e, i) => {
9
9
  for (var l = void 0, n = c.length - 1, h; n >= 0; n--)
10
- (h = c[n]) && (l = h(d, r, l) || l);
11
- return l && v(d, r, l), l;
10
+ (h = c[n]) && (l = h(t, e, l) || l);
11
+ return l && v(t, e, l), l;
12
12
  };
13
- class e extends u {
13
+ class o extends f {
14
14
  constructor() {
15
15
  super(...arguments), this.type = "select", this.label = "Label", this.required = !1, this.items = [];
16
16
  }
17
17
  static get styles() {
18
18
  return p(y.toString());
19
19
  }
20
+ connectedCallback() {
21
+ if (super.connectedCallback(), !this.items || this.items.length === 0) {
22
+ const t = this.hydrateItemsFromOptionChildren();
23
+ t.length > 0 && (this.items = t);
24
+ }
25
+ }
20
26
  firstUpdated() {
21
- super.connectedCallback(), this.selectOptions.forEach((d) => {
22
- d.selected === !0 && (this.selectedItem = d.value);
23
- }), this.defaultValue = this.selectedItem ? this.selectedItem : this.selectOptions[0].value, this.fieldId = this.fieldId || f(), this.fieldNote && (this.ariaDescribedBy = this.ariaDescribedBy || f()), this.setFormData();
27
+ this.selectOptions.forEach((t) => {
28
+ t.selected === !0 && (this.selectedItem = t.value);
29
+ }), this.selectOptions.length > 0 && (this.defaultValue = this.selectedItem ? this.selectedItem : this.selectOptions[0].value), this.fieldId = this.fieldId || u(), this.fieldNote && (this.ariaDescribedBy = this.ariaDescribedBy || u()), this.setFormData();
30
+ }
31
+ /**
32
+ * Read native <option>/<optgroup> children from the light DOM and convert
33
+ * them to the structured items shape this component renders.
34
+ */
35
+ hydrateItemsFromOptionChildren() {
36
+ const t = [];
37
+ for (const e of Array.from(this.children))
38
+ if (e.tagName === "OPTGROUP") {
39
+ const i = Array.from(e.children).filter((l) => l.tagName === "OPTION").map((l) => ({
40
+ label: l.textContent?.trim() ?? "",
41
+ value: l.getAttribute("value") ?? l.textContent?.trim() ?? "",
42
+ ...l.hasAttribute("selected") ? { selected: !0 } : {}
43
+ }));
44
+ t.push({
45
+ optGroupLabel: e.getAttribute("label") ?? "",
46
+ options: i
47
+ });
48
+ } else e.tagName === "OPTION" && t.push({
49
+ label: e.textContent?.trim() ?? "",
50
+ value: e.getAttribute("value") ?? e.textContent?.trim() ?? "",
51
+ ...e.hasAttribute("selected") ? { selected: !0 } : {}
52
+ });
53
+ return t;
24
54
  }
25
- handleChange(d) {
26
- const r = d.target;
27
- this.value = r.value, console.log("event", this.value), this.dispatchEvent(new Event("change"));
55
+ handleChange(t) {
56
+ const e = t.target;
57
+ this.value = e.value, console.log("event", this.value), this.dispatchEvent(new Event("change"));
28
58
  }
29
59
  /**
30
60
  * Set form data
@@ -34,35 +64,35 @@ class e extends u {
34
64
  this.selectedItem ? this.internals.setFormValue(this.selectedItem) : this.internals.setFormValue(this.defaultValue.toString());
35
65
  }
36
66
  render() {
37
- const d = this.componentClassNames("ed-c-select-field", {
67
+ const t = this.componentClassNames("ed-c-select-field", {
38
68
  "ed-c-select-field--display": this.variant === "display",
39
69
  "ed-c-select-field--inverted": this.inverted === !0,
40
70
  "ed-is-error": this.isError,
41
71
  "ed-is-success": this.isSuccess
42
72
  });
43
- return s`
44
- <div class="${d}">
73
+ return a`
74
+ <div class="${t}">
45
75
  <label class="ed-c-select-field__label" for="${this.fieldId}">${this.label}</label>
46
76
  <div class="ed-c-select-field__body">
47
77
  <select
48
78
  class="ed-c-select-field__input"
49
79
  id="${this.fieldId}"
50
- name="${i(this.name)}"
51
- value="${i(this.value)}"
80
+ name="${s(this.name)}"
81
+ value="${s(this.value)}"
52
82
  ?required="${this.required}"
53
83
  ?disabled="${this.disabled}"
54
- aria-describedby="${i(this.ariaDescribedBy)}"
84
+ aria-describedby="${s(this.ariaDescribedBy)}"
55
85
  @change="${this.handleChange}"
56
86
  >
57
- ${this.items.map((r) => r.optGroupLabel ? s`<optgroup class="ed-c-select-field__optgroup" label="${r.optGroupLabel}">
58
- ${r.options.map((a) => s`<option class="ed-c-select-field__option" value="${a.value}" selected=${i(a.selected)}>${a.label}</option>`)}
59
- </optgroup>` : s`<option class="ed-c-select-field__option" value="${r.value}">${r.label}</option>`)}
87
+ ${this.items.map((e) => e.optGroupLabel ? a`<optgroup class="ed-c-select-field__optgroup" label="${e.optGroupLabel}">
88
+ ${e.options.map((i) => a`<option class="ed-c-select-field__option" value="${i.value}" selected=${s(i.selected)}>${i.label}</option>`)}
89
+ </optgroup>` : a`<option class="ed-c-select-field__option" value="${e.value}" ?selected=${e.selected === !0}>${e.label}</option>`)}
60
90
  </select>
61
91
  <ed-icon name="keyboard-arrow-down" styleModifier="ed-c-select-field__icon"></ed-icon>
62
92
  </div>
63
- ${this.fieldNote && s`<ed-field-note
64
- id=${i(this.ariaDescribedBy)}
65
- iconName=${i(this.iconName)}
93
+ ${this.fieldNote && a`<ed-field-note
94
+ id=${s(this.ariaDescribedBy)}
95
+ iconName=${s(this.iconName)}
66
96
  ?isSuccess=${this.isSuccess}
67
97
  ?isError=${this.isError}
68
98
  ?inverted=${this.inverted}
@@ -72,52 +102,52 @@ class e extends u {
72
102
  `;
73
103
  }
74
104
  }
75
- t([
76
- o()
77
- ], e.prototype, "fieldId");
78
- t([
79
- o()
80
- ], e.prototype, "label");
81
- t([
82
- o()
83
- ], e.prototype, "name");
84
- t([
85
- o()
86
- ], e.prototype, "fieldNote");
87
- t([
88
- o()
89
- ], e.prototype, "ariaDescribedBy");
90
- t([
91
- o({ type: Boolean })
92
- ], e.prototype, "required");
93
- t([
94
- o({ type: Boolean })
95
- ], e.prototype, "disabled");
96
- t([
97
- o({ type: Array })
98
- ], e.prototype, "items");
99
- t([
100
- o()
101
- ], e.prototype, "variant");
102
- t([
103
- o({ type: Boolean })
104
- ], e.prototype, "inverted");
105
- t([
106
- o({ type: Boolean })
107
- ], e.prototype, "isError");
108
- t([
109
- o({ type: Boolean })
110
- ], e.prototype, "isSuccess");
111
- t([
112
- o()
113
- ], e.prototype, "iconName");
114
- t([
105
+ r([
106
+ d()
107
+ ], o.prototype, "fieldId");
108
+ r([
109
+ d()
110
+ ], o.prototype, "label");
111
+ r([
112
+ d()
113
+ ], o.prototype, "name");
114
+ r([
115
+ d()
116
+ ], o.prototype, "fieldNote");
117
+ r([
118
+ d()
119
+ ], o.prototype, "ariaDescribedBy");
120
+ r([
121
+ d({ type: Boolean })
122
+ ], o.prototype, "required");
123
+ r([
124
+ d({ type: Boolean })
125
+ ], o.prototype, "disabled");
126
+ r([
127
+ d({ type: Array })
128
+ ], o.prototype, "items");
129
+ r([
130
+ d()
131
+ ], o.prototype, "variant");
132
+ r([
133
+ d({ type: Boolean })
134
+ ], o.prototype, "inverted");
135
+ r([
136
+ d({ type: Boolean })
137
+ ], o.prototype, "isError");
138
+ r([
139
+ d({ type: Boolean })
140
+ ], o.prototype, "isSuccess");
141
+ r([
142
+ d()
143
+ ], o.prototype, "iconName");
144
+ r([
115
145
  m("select")
116
- ], e.prototype, "field");
117
- t([
146
+ ], o.prototype, "field");
147
+ r([
118
148
  b("option")
119
- ], e.prototype, "selectOptions");
120
- customElements.get("ed-select-field") === void 0 && customElements.define("ed-select-field", e);
149
+ ], o.prototype, "selectOptions");
150
+ customElements.get("ed-select-field") === void 0 && customElements.define("ed-select-field", o);
121
151
  export {
122
- e as EdSelectField
152
+ o as EdSelectField
123
153
  };
package/components/toggle/toggle.d.ts CHANGED
@@ -31,6 +31,8 @@ import { EdFormElement } from '@brad-frost-web/eddie-web-components/components/E
31
31
  *
32
32
  * @slot off - Optional content to display next to the toggle switch (e.g., "Off" label)
33
33
  * @slot field-note - Optional slot for field note content (overrides fieldNote property)
34
+ *
35
+ * @contentApi { contentVia: "prop", labelVia: "prop", labelVisibility: "accessible-only" }
34
36
  */
35
37
  export declare class EdToggle extends EdFormElement {
36
38
  readonly type = "checkbox";
package/components/toggle/toggle.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"toggle.d.ts","sourceRoot":"","sources":["../../../../packages/eddie-web-components/components/toggle/toggle.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,+DAA+D,CAAC;AAK9F,OAAO,0BAA0B,CAAC;AAClC,OAAO,cAAc,CAAC;AAGtB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,qBAAa,QAAS,SAAQ,aAAa;IACzC,QAAQ,CAAC,IAAI,cAAc;IAE3B,MAAM,KAAK,MAAM,4BAEhB;IAED;2FACuF;IAEvF,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;;OAGG;IAEH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;OAIG;IAEH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;OAGG;IAEH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;;;OAIG;IAEH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;;OAIG;IAEH,KAAK,EAAE,MAAM,CAAY;IAEzB;;;OAGG;IAEH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IAEH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IAEH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IAEH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IAEH,QAAQ,UAAS;IAGjB,KAAK,EAAG,gBAAgB,CAAC;IAEzB,UAAmB,YAAY,EAAE,OAAO,CAAC;IAEzC;;;OAGG;IACH,iBAAiB;IAQjB,OAAO,CAAC,WAAW;IAInB,iBAAiB,IAAI,IAAI;IAOzB;;OAEG;IACH,kBAAkB;IASlB;;;OAGG;IACH,aAAa,CAAC,CAAC,EAAE,aAAa;IAM9B,MAAM;CA8CP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}
1
+ {"version":3,"file":"toggle.d.ts","sourceRoot":"","sources":["../../../../packages/eddie-web-components/components/toggle/toggle.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,+DAA+D,CAAC;AAK9F,OAAO,0BAA0B,CAAC;AAClC,OAAO,cAAc,CAAC;AAGtB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,qBAAa,QAAS,SAAQ,aAAa;IACzC,QAAQ,CAAC,IAAI,cAAc;IAE3B,MAAM,KAAK,MAAM,4BAEhB;IAED;2FACuF;IAEvF,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;;OAGG;IAEH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;OAIG;IAEH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;OAGG;IAEH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;;;OAIG;IAEH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;;OAIG;IAEH,KAAK,EAAE,MAAM,CAAY;IAEzB;;;OAGG;IAEH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IAEH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IAEH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IAEH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IAEH,QAAQ,UAAS;IAGjB,KAAK,EAAG,gBAAgB,CAAC;IAEzB,UAAmB,YAAY,EAAE,OAAO,CAAC;IAEzC;;;OAGG;IACH,iBAAiB;IAQjB,OAAO,CAAC,WAAW;IAInB,iBAAiB,IAAI,IAAI;IAOzB;;OAEG;IACH,kBAAkB;IASlB;;;OAGG;IACH,aAAa,CAAC,CAAC,EAAE,aAAa;IAM9B,MAAM;CA8CP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@brad-frost-web/eddie-web-components",
3
- "version": "0.29.0",
3
+ "version": "0.31.0",
4
4
  "private": false,
5
5
  "publishConfig": {
6
6
  "access": "public"