@santi020k/lumen-elements 3.0.1 → 4.1.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 (66) hide show
  1. package/README.md +518 -5
  2. package/dist/bullet-chart-html.d.ts +5 -0
  3. package/dist/bullet-chart-html.d.ts.map +1 -0
  4. package/dist/bullet-chart-html.js +56 -0
  5. package/dist/chart-activation.d.ts +15 -0
  6. package/dist/chart-activation.d.ts.map +1 -0
  7. package/dist/chart-activation.js +93 -0
  8. package/dist/chart-html.d.ts +22 -0
  9. package/dist/chart-html.d.ts.map +1 -0
  10. package/dist/chart-html.js +1 -0
  11. package/dist/comparison-chart-html.d.ts +4 -0
  12. package/dist/comparison-chart-html.d.ts.map +1 -0
  13. package/dist/comparison-chart-html.js +36 -0
  14. package/dist/components/ai-surfaces.d.ts +115 -0
  15. package/dist/components/ai-surfaces.d.ts.map +1 -0
  16. package/dist/components/ai-surfaces.js +270 -0
  17. package/dist/components/button.d.ts +55 -2
  18. package/dist/components/button.d.ts.map +1 -1
  19. package/dist/components/button.js +110 -2
  20. package/dist/components/card.d.ts +6 -0
  21. package/dist/components/card.d.ts.map +1 -1
  22. package/dist/components/card.js +6 -1
  23. package/dist/components/combobox.d.ts +1 -2
  24. package/dist/components/combobox.d.ts.map +1 -1
  25. package/dist/components/combobox.js +27 -121
  26. package/dist/components/dashboard.d.ts +41 -0
  27. package/dist/components/dashboard.d.ts.map +1 -0
  28. package/dist/components/dashboard.js +88 -0
  29. package/dist/components/device-frame.d.ts +31 -0
  30. package/dist/components/device-frame.d.ts.map +1 -0
  31. package/dist/components/device-frame.js +95 -0
  32. package/dist/components/foundations.d.ts +58 -18
  33. package/dist/components/foundations.d.ts.map +1 -1
  34. package/dist/components/foundations.js +160 -9
  35. package/dist/components/image-comparison.d.ts +33 -0
  36. package/dist/components/image-comparison.d.ts.map +1 -0
  37. package/dist/components/image-comparison.js +144 -0
  38. package/dist/components/media-selection.d.ts +41 -0
  39. package/dist/components/media-selection.d.ts.map +1 -0
  40. package/dist/components/media-selection.js +114 -0
  41. package/dist/components/media-viewport.d.ts +30 -0
  42. package/dist/components/media-viewport.d.ts.map +1 -0
  43. package/dist/components/media-viewport.js +108 -0
  44. package/dist/components/virtual-list.d.ts +38 -0
  45. package/dist/components/virtual-list.d.ts.map +1 -0
  46. package/dist/components/virtual-list.js +30 -0
  47. package/dist/components/visual-interactions.d.ts +65 -0
  48. package/dist/components/visual-interactions.d.ts.map +1 -0
  49. package/dist/components/visual-interactions.js +91 -0
  50. package/dist/components/world-map.d.ts +46 -0
  51. package/dist/components/world-map.d.ts.map +1 -0
  52. package/dist/components/world-map.js +312 -0
  53. package/dist/consumer-behaviors.d.ts +36 -0
  54. package/dist/consumer-behaviors.d.ts.map +1 -0
  55. package/dist/consumer-behaviors.js +1 -0
  56. package/dist/define.d.ts +229 -6
  57. package/dist/define.d.ts.map +1 -1
  58. package/dist/define.js +1 -1
  59. package/dist/element-base.js +1 -1
  60. package/dist/expanded-chart-html.d.ts +9 -0
  61. package/dist/expanded-chart-html.d.ts.map +1 -0
  62. package/dist/expanded-chart-html.js +61 -0
  63. package/dist/index.d.ts +2 -1
  64. package/dist/index.d.ts.map +1 -1
  65. package/package.json +34 -6
  66. package/styles/critical.css +696 -66
@@ -0,0 +1,270 @@
1
+ import { bindLumenApprovalCard, createLumenPromptComposerController, normalizeLumenPromptLimit, resolveLumenCitationHref } from '@santi020k/lumen-core';
2
+ import { LumenElement } from '../element-base.js';
3
+ const node = (root, tag, className = '') => {
4
+ const element = root.ownerDocument.createElement(tag);
5
+ element.className = className;
6
+ return element;
7
+ };
8
+ const booleanAttribute = (root, name) => root.hasAttribute(name) && root.getAttribute(name) !== 'false';
9
+ const approvalDisabled = (root) => booleanAttribute(root, 'disabled') || root.dataset.status !== 'pending' || !root.dataset.requestId;
10
+ class LumenAiSurfaceElement extends LumenElement {
11
+ cleanup;
12
+ connectedCallback() {
13
+ super.connectedCallback();
14
+ queueMicrotask(() => {
15
+ if (this.isConnected)
16
+ this.render();
17
+ });
18
+ }
19
+ disconnectedCallback() {
20
+ this.cleanup?.();
21
+ this.cleanup = undefined;
22
+ }
23
+ attributeChangedCallback() {
24
+ super.attributeChangedCallback();
25
+ if (this.isConnected)
26
+ this.render();
27
+ }
28
+ }
29
+ export const lumenPromptComposerElementConfig = {
30
+ baseClassName: 'ui-prompt-composer',
31
+ defaults: { 'data-ui-prompt-composer': '' },
32
+ observedAttributes: ['action', 'disabled', 'label', 'max-length', 'pending', 'send-label', 'stop-label', 'submit-on-enter', 'value'],
33
+ tagName: 'lumen-prompt-composer'
34
+ };
35
+ export class LumenPromptComposerElement extends LumenAiSurfaceElement {
36
+ static config = lumenPromptComposerElementConfig;
37
+ form;
38
+ input;
39
+ label;
40
+ send;
41
+ stop;
42
+ get value() {
43
+ return this.input?.value ?? this.getAttribute('value') ?? '';
44
+ }
45
+ set value(value) {
46
+ this.setAttribute('value', value);
47
+ }
48
+ attributeChangedCallback(name) {
49
+ super.attributeChangedCallback();
50
+ if (name === 'value' && this.input) {
51
+ this.input.defaultValue = this.getAttribute('value') ?? '';
52
+ this.input.value = this.input.defaultValue;
53
+ }
54
+ }
55
+ render() {
56
+ if (!this.form)
57
+ this.create();
58
+ const elements = this.elements();
59
+ if (!elements)
60
+ return;
61
+ const { form, input, label, send, stop } = elements;
62
+ this.cleanup?.();
63
+ this.dataset.pending = String(booleanAttribute(this, 'pending'));
64
+ this.dataset.disabled = String(booleanAttribute(this, 'disabled'));
65
+ this.dataset.submitOnEnter = String(booleanAttribute(this, 'submit-on-enter'));
66
+ const action = this.getAttribute('action');
67
+ if (action !== null)
68
+ form.setAttribute('action', action);
69
+ else
70
+ form.removeAttribute('action');
71
+ input.maxLength = normalizeLumenPromptLimit(Number(this.getAttribute('max-length')));
72
+ label.textContent = this.getAttribute('label') ?? 'Message';
73
+ send.textContent = this.getAttribute('send-label') ?? 'Send';
74
+ stop.textContent = this.getAttribute('stop-label') ?? 'Stop';
75
+ const controller = createLumenPromptComposerController(this);
76
+ this.cleanup = () => {
77
+ controller.destroy();
78
+ };
79
+ }
80
+ elements() {
81
+ if (!this.form || !this.input || !this.label || !this.send || !this.stop)
82
+ return undefined;
83
+ return { form: this.form, input: this.input, label: this.label, send: this.send, stop: this.stop };
84
+ }
85
+ create() {
86
+ const children = [...this.childNodes];
87
+ this.form = node(this, 'form', 'ui-form');
88
+ this.form.method = 'post';
89
+ this.label = node(this, 'label', 'ui-label');
90
+ this.input = node(this, 'textarea', 'ui-textarea');
91
+ this.input.id = `prompt-${this.ownerDocument.defaultView?.crypto.randomUUID() ?? crypto.randomUUID()}`;
92
+ this.input.rows = 3;
93
+ this.input.defaultValue = this.getAttribute('value') ?? '';
94
+ this.input.required = true;
95
+ this.input.name = 'prompt';
96
+ this.input.dataset.uiPromptInput = '';
97
+ this.label.htmlFor = this.input.id;
98
+ this.send = node(this, 'button', 'ui-button');
99
+ this.send.type = 'submit';
100
+ this.send.dataset.uiPromptSend = '';
101
+ this.stop = node(this, 'button', 'ui-button ui-button--secondary');
102
+ this.stop.type = 'button';
103
+ this.stop.dataset.uiPromptStop = '';
104
+ const actions = node(this, 'div', 'ui-prompt-composer__actions');
105
+ actions.append(this.send, this.stop);
106
+ this.form.append(this.label, this.input, actions, ...children);
107
+ this.append(this.form);
108
+ }
109
+ }
110
+ export const lumenStreamMessageElementConfig = {
111
+ baseClassName: 'ui-stream-message ui-message ui-message--assistant',
112
+ observedAttributes: ['label', 'status', 'status-label', 'text'],
113
+ role: 'article',
114
+ tagName: 'lumen-stream-message'
115
+ };
116
+ export class LumenStreamMessageElement extends LumenAiSurfaceElement {
117
+ static config = lumenStreamMessageElementConfig;
118
+ content;
119
+ statusText;
120
+ get text() {
121
+ return this.content?.textContent ?? this.getAttribute('text') ?? '';
122
+ }
123
+ set text(value) {
124
+ this.setAttribute('text', value);
125
+ }
126
+ render() {
127
+ if (!this.content) {
128
+ const children = [...this.childNodes];
129
+ const actions = this.querySelector('[slot="actions"]');
130
+ const sources = this.querySelector('[slot="sources"]');
131
+ this.content = node(this, 'div', 'ui-prose');
132
+ this.content.dataset.uiStreamContent = '';
133
+ this.content.setAttribute('aria-live', 'off');
134
+ this.statusText = node(this, 'span');
135
+ this.statusText.setAttribute('role', 'status');
136
+ this.statusText.setAttribute('aria-live', 'polite');
137
+ const footer = node(this, 'div', 'ui-stream-message__actions');
138
+ footer.append(this.statusText);
139
+ if (actions)
140
+ footer.append(actions);
141
+ this.content.append(...children.filter(child => child !== actions && child !== sources));
142
+ this.append(this.content, footer);
143
+ if (sources)
144
+ this.append(sources);
145
+ }
146
+ this.dataset.status = this.getAttribute('status') ?? 'idle';
147
+ this.setAttribute('aria-label', this.getAttribute('label') ?? 'Assistant');
148
+ this.content.setAttribute('aria-busy', String(this.dataset.status === 'streaming'));
149
+ if (this.hasAttribute('text'))
150
+ this.content.textContent = this.getAttribute('text') ?? '';
151
+ if (this.statusText)
152
+ this.statusText.textContent = this.getAttribute('status-label') ?? 'Ready';
153
+ }
154
+ }
155
+ export const lumenSourceCitationElementConfig = {
156
+ baseClassName: 'ui-source-citation',
157
+ observedAttributes: ['href', 'label', 'target'],
158
+ tagName: 'lumen-source-citation'
159
+ };
160
+ export class LumenSourceCitationElement extends LumenAiSurfaceElement {
161
+ static config = lumenSourceCitationElementConfig;
162
+ render() {
163
+ const href = resolveLumenCitationHref(this.getAttribute('href') ?? '');
164
+ const label = this.getAttribute('label') ?? 'Source';
165
+ if (href) {
166
+ const anchor = node(this, 'a', 'ui-link');
167
+ anchor.href = href;
168
+ anchor.rel = 'noopener noreferrer';
169
+ anchor.target = this.getAttribute('target') === '_blank' ? '_blank' : '_self';
170
+ anchor.textContent = label;
171
+ this.replaceChildren(anchor);
172
+ }
173
+ else
174
+ this.textContent = label;
175
+ }
176
+ }
177
+ export const lumenToolActivityElementConfig = {
178
+ baseClassName: 'ui-tool-activity',
179
+ observedAttributes: ['label', 'open', 'status', 'status-label'],
180
+ tagName: 'lumen-tool-activity'
181
+ };
182
+ export class LumenToolActivityElement extends LumenAiSurfaceElement {
183
+ static config = lumenToolActivityElementConfig;
184
+ details;
185
+ summary;
186
+ statusText;
187
+ render() {
188
+ if (!this.details)
189
+ this.create();
190
+ if (!this.details || !this.summary || !this.statusText)
191
+ return;
192
+ this.details.open = this.hasAttribute('open');
193
+ this.summary.textContent = this.getAttribute('label') ?? 'Tool activity';
194
+ this.statusText.textContent = this.getAttribute('status-label') ?? 'Queued';
195
+ this.dataset.status = this.getAttribute('status') ?? 'queued';
196
+ this.cleanup?.();
197
+ const toggle = () => {
198
+ this.toggleAttribute('open', this.details?.open ?? false);
199
+ };
200
+ this.details.addEventListener('toggle', toggle);
201
+ this.cleanup = () => {
202
+ this.details?.removeEventListener('toggle', toggle);
203
+ };
204
+ }
205
+ create() {
206
+ const children = [...this.childNodes];
207
+ this.details = node(this, 'details', 'ui-collapsible');
208
+ this.summary = node(this, 'summary');
209
+ this.statusText = node(this, 'span');
210
+ this.statusText.setAttribute('role', 'status');
211
+ this.details.append(this.summary, this.statusText, ...children);
212
+ this.append(this.details);
213
+ }
214
+ }
215
+ const approvalStatusLabel = (root) => root.getAttribute('status-label') ?? `Decision: ${root.getAttribute('status') ?? 'pending'}`;
216
+ export const lumenApprovalCardElementConfig = {
217
+ baseClassName: 'ui-approval-card ui-card',
218
+ defaults: { 'data-ui-approval-card': '' },
219
+ observedAttributes: ['approve-label', 'disabled', 'label', 'reject-label', 'request-id', 'status', 'status-label'],
220
+ role: 'group',
221
+ tagName: 'lumen-approval-card'
222
+ };
223
+ export class LumenApprovalCardElement extends LumenAiSurfaceElement {
224
+ static config = lumenApprovalCardElementConfig;
225
+ titleElement;
226
+ statusText;
227
+ approve;
228
+ reject;
229
+ render() {
230
+ if (!this.titleElement)
231
+ this.create();
232
+ const elements = this.elements();
233
+ if (!elements)
234
+ return;
235
+ const { title, statusText, approve, reject } = elements;
236
+ title.textContent = this.getAttribute('label') ?? 'Review action';
237
+ this.setAttribute('aria-label', title.textContent);
238
+ statusText.textContent = approvalStatusLabel(this);
239
+ this.dataset.requestId = this.getAttribute('request-id') ?? '';
240
+ this.dataset.status = this.getAttribute('status') ?? 'pending';
241
+ this.dataset.disabled = String(booleanAttribute(this, 'disabled'));
242
+ const disabled = approvalDisabled(this);
243
+ approve.disabled = disabled;
244
+ reject.disabled = disabled;
245
+ approve.textContent = this.getAttribute('approve-label') ?? 'Approve';
246
+ reject.textContent = this.getAttribute('reject-label') ?? 'Reject';
247
+ this.cleanup?.();
248
+ this.cleanup = bindLumenApprovalCard(this);
249
+ }
250
+ elements() {
251
+ if (!this.titleElement || !this.statusText || !this.approve || !this.reject)
252
+ return undefined;
253
+ return { title: this.titleElement, statusText: this.statusText, approve: this.approve, reject: this.reject };
254
+ }
255
+ create() {
256
+ const children = [...this.childNodes];
257
+ this.titleElement = node(this, 'strong');
258
+ this.statusText = node(this, 'span');
259
+ this.statusText.setAttribute('role', 'status');
260
+ this.approve = node(this, 'button', 'ui-button');
261
+ this.approve.type = 'button';
262
+ this.approve.dataset.uiApprovalResponse = 'approve';
263
+ this.reject = node(this, 'button', 'ui-button ui-button--secondary');
264
+ this.reject.type = 'button';
265
+ this.reject.dataset.uiApprovalResponse = 'reject';
266
+ const actions = node(this, 'div', 'ui-approval-card__actions');
267
+ actions.append(this.approve, this.reject);
268
+ this.append(this.titleElement, ...children, this.statusText, actions);
269
+ }
270
+ }
@@ -1,4 +1,4 @@
1
- import { type LumenCustomElementRegistry } from '../element-base.js';
1
+ import { type LumenCustomElementRegistry, LumenElement } from '../element-base.js';
2
2
  export declare const lumenButtonElementConfig: {
3
3
  readonly attributeClasses: {
4
4
  readonly variant: {
@@ -30,9 +30,62 @@ export declare const lumenButtonElementConfig: {
30
30
  readonly tabindex: "0";
31
31
  readonly variant: "default";
32
32
  };
33
+ readonly observedAttributes: readonly ["variant", "size", "disabled", "loading", "aria-busy", "aria-disabled"];
33
34
  readonly role: "button";
34
35
  readonly tagName: "lumen-button";
35
36
  };
36
- export declare const LumenButtonElement: import("../element-base.js").LumenElementConstructor;
37
+ export declare class LumenButtonElement extends LumenElement {
38
+ static config: {
39
+ readonly attributeClasses: {
40
+ readonly variant: {
41
+ readonly default: "ui-button--default";
42
+ readonly destructive: "ui-button--destructive";
43
+ readonly ghost: "ui-button--ghost";
44
+ readonly link: "ui-button--link";
45
+ readonly outline: "ui-button--outline";
46
+ readonly secondary: "ui-button--secondary";
47
+ };
48
+ readonly size: {
49
+ readonly default: "ui-button--default-size";
50
+ readonly icon: "ui-button--icon";
51
+ readonly lg: "ui-button--lg";
52
+ readonly sm: "ui-button--sm";
53
+ };
54
+ readonly disabled: {
55
+ readonly true: "ui-button--disabled";
56
+ };
57
+ readonly loading: {
58
+ readonly true: "ui-button--loading";
59
+ };
60
+ };
61
+ readonly baseClassName: "ui-button";
62
+ readonly defaults: {
63
+ readonly 'data-slot': "button";
64
+ readonly role: "button";
65
+ readonly size: "default";
66
+ readonly tabindex: "0";
67
+ readonly variant: "default";
68
+ };
69
+ readonly observedAttributes: readonly ["variant", "size", "disabled", "loading", "aria-busy", "aria-disabled"];
70
+ readonly role: "button";
71
+ readonly tagName: "lumen-button";
72
+ };
73
+ private spacePressed;
74
+ private applyingSemantics;
75
+ private hasBlockingAttribute;
76
+ private isLoading;
77
+ private syncManagedSemantic;
78
+ private syncBusySemantics;
79
+ private syncDisabledSemantics;
80
+ private isBlocked;
81
+ private activateAfterDispatch;
82
+ private onKeyDown;
83
+ private onKeyUp;
84
+ private onBlur;
85
+ private onClick;
86
+ connectedCallback(): void;
87
+ attributeChangedCallback(name?: string, previousValue?: string | null, value?: string | null): void;
88
+ disconnectedCallback(): void;
89
+ }
37
90
  export declare const defineLumenButton: (registry?: LumenCustomElementRegistry) => void;
38
91
  //# sourceMappingURL=button.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/components/button.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,0BAA0B,EAEhC,MAAM,oBAAoB,CAAA;AAE3B,eAAO,MAAM,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6BE,CAAA;AAEvC,eAAO,MAAM,kBAAkB,sDAE9B,CAAA;AAED,eAAO,MAAM,iBAAiB,GAC5B,WAAW,0BAA0B,KACpC,IAEF,CAAA"}
1
+ {"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/components/button.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,0BAA0B,EAC/B,YAAY,EAEb,MAAM,oBAAoB,CAAA;AAE3B,eAAO,MAAM,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8BE,CAAA;AAEvC,qBAAa,kBAAmB,SAAQ,YAAY;IAClD,OAAgB,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAA2B;IACjD,OAAO,CAAC,YAAY,CAAQ;IAC5B,OAAO,CAAC,iBAAiB,CAAQ;IAEjC,OAAO,CAAC,oBAAoB;IAI5B,OAAO,CAAC,SAAS;IAKjB,OAAO,CAAC,mBAAmB;IA4B3B,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,qBAAqB;IAI7B,OAAO,CAAC,SAAS;IAIjB,OAAO,CAAC,qBAAqB;IAM7B,OAAO,CAAC,SAAS,CAUhB;IAED,OAAO,CAAC,OAAO,CAQd;IAED,OAAO,CAAC,MAAM,CAEb;IAED,OAAO,CAAC,OAAO,CAMd;IAEQ,iBAAiB,IAAI,IAAI;IAgBzB,wBAAwB,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,EAAE,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAgBnG,oBAAoB,IAAI,IAAI;CAatC;AAED,eAAO,MAAM,iBAAiB,GAC5B,WAAW,0BAA0B,KACpC,IAEF,CAAA"}
@@ -1,4 +1,4 @@
1
- import { createLumenElementClass, defineLumenElement } from '../element-base.js';
1
+ import { defineLumenElement, LumenElement } from '../element-base.js';
2
2
  export const lumenButtonElementConfig = {
3
3
  attributeClasses: {
4
4
  variant: {
@@ -26,10 +26,118 @@ export const lumenButtonElementConfig = {
26
26
  tabindex: '0',
27
27
  variant: 'default'
28
28
  },
29
+ observedAttributes: ['variant', 'size', 'disabled', 'loading', 'aria-busy', 'aria-disabled'],
29
30
  role: 'button',
30
31
  tagName: 'lumen-button'
31
32
  };
32
- export const LumenButtonElement = createLumenElementClass(lumenButtonElementConfig);
33
+ export class LumenButtonElement extends LumenElement {
34
+ static config = lumenButtonElementConfig;
35
+ spacePressed = false;
36
+ applyingSemantics = false;
37
+ hasBlockingAttribute() {
38
+ return ['disabled', 'loading'].some(name => this.hasAttribute(name) && this.getAttribute(name) !== 'false');
39
+ }
40
+ isLoading() {
41
+ return this.hasAttribute('loading') && this.getAttribute('loading') !== 'false';
42
+ }
43
+ syncManagedSemantic(name, active) {
44
+ const ownership = `data-ui-button-${name}`;
45
+ const recorded = this.getAttribute(ownership);
46
+ this.applyingSemantics = true;
47
+ try {
48
+ if (active) {
49
+ if (recorded === null) {
50
+ const original = this.getAttribute(name);
51
+ this.setAttribute(ownership, original === null ? 'absent' : `value:${original}`);
52
+ }
53
+ this.setAttribute(name, 'true');
54
+ }
55
+ else if (recorded !== null) {
56
+ this.removeAttribute(ownership);
57
+ if (this.getAttribute(name) !== 'true')
58
+ return;
59
+ if (recorded === 'absent')
60
+ this.removeAttribute(name);
61
+ else if (recorded.startsWith('value:'))
62
+ this.setAttribute(name, recorded.slice(6));
63
+ }
64
+ }
65
+ finally {
66
+ this.applyingSemantics = false;
67
+ }
68
+ }
69
+ syncBusySemantics() {
70
+ this.syncManagedSemantic('aria-busy', this.isLoading());
71
+ }
72
+ syncDisabledSemantics() {
73
+ this.syncManagedSemantic('aria-disabled', this.hasBlockingAttribute());
74
+ }
75
+ isBlocked() {
76
+ return this.hasBlockingAttribute() || this.getAttribute('aria-disabled') === 'true';
77
+ }
78
+ activateAfterDispatch(event) {
79
+ setTimeout(() => {
80
+ if (this.isConnected && !event.defaultPrevented && !this.isBlocked())
81
+ this.click();
82
+ }, 0);
83
+ }
84
+ onKeyDown = (event) => {
85
+ if (event.target !== this || event.defaultPrevented || event.repeat || event.isComposing || this.isBlocked())
86
+ return;
87
+ if (event.key === 'Enter')
88
+ this.activateAfterDispatch(event);
89
+ if (event.key === ' ') {
90
+ event.preventDefault();
91
+ this.spacePressed = true;
92
+ }
93
+ };
94
+ onKeyUp = (event) => {
95
+ if (event.key !== ' ')
96
+ return;
97
+ const spacePressed = this.spacePressed;
98
+ this.spacePressed = false;
99
+ if (event.target === this && spacePressed && !event.isComposing)
100
+ this.activateAfterDispatch(event);
101
+ };
102
+ onBlur = () => {
103
+ this.spacePressed = false;
104
+ };
105
+ onClick = (event) => {
106
+ if (!this.isBlocked())
107
+ return;
108
+ event.preventDefault();
109
+ event.stopImmediatePropagation();
110
+ };
111
+ connectedCallback() {
112
+ super.connectedCallback();
113
+ this.syncDisabledSemantics();
114
+ this.syncBusySemantics();
115
+ this.addEventListener('keydown', this.onKeyDown);
116
+ this.addEventListener('keyup', this.onKeyUp);
117
+ this.addEventListener('blur', this.onBlur);
118
+ this.addEventListener('click', this.onClick, true);
119
+ }
120
+ attributeChangedCallback(name, previousValue, value) {
121
+ super.attributeChangedCallback(name, previousValue, value);
122
+ if (this.applyingSemantics)
123
+ return;
124
+ if ((name === 'aria-busy' || name === 'aria-disabled') && previousValue !== null && previousValue !== undefined) {
125
+ this.removeAttribute(`data-ui-button-${name}`);
126
+ }
127
+ if (!this.isConnected)
128
+ return;
129
+ this.syncDisabledSemantics();
130
+ this.syncBusySemantics();
131
+ }
132
+ disconnectedCallback() {
133
+ this.spacePressed = false;
134
+ this.removeEventListener('keydown', this.onKeyDown);
135
+ this.removeEventListener('keyup', this.onKeyUp);
136
+ this.removeEventListener('blur', this.onBlur);
137
+ this.removeEventListener('click', this.onClick, true);
138
+ super.disconnectedCallback();
139
+ }
140
+ }
33
141
  export const defineLumenButton = (registry) => {
34
142
  defineLumenElement(lumenButtonElementConfig, LumenButtonElement, registry);
35
143
  };
@@ -1,6 +1,11 @@
1
1
  import { type LumenCustomElementRegistry } from '../element-base.js';
2
2
  export declare const lumenCardElementConfig: {
3
3
  readonly attributeClasses: {
4
+ readonly density: {
5
+ readonly comfortable: "ui-card--comfortable";
6
+ readonly compact: "ui-card--compact";
7
+ readonly spacious: "ui-card--spacious";
8
+ };
4
9
  readonly glass: {
5
10
  readonly strong: "ui-card--glass ui-glass-strong";
6
11
  readonly subtle: "ui-card--glass ui-glass-subtle";
@@ -16,6 +21,7 @@ export declare const lumenCardElementConfig: {
16
21
  readonly baseClassName: "ui-card";
17
22
  readonly defaults: {
18
23
  readonly 'data-slot': "card";
24
+ readonly density: "comfortable";
19
25
  readonly variant: "default";
20
26
  };
21
27
  readonly tagName: "lumen-card";
@@ -1 +1 @@
1
- {"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../src/components/card.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,0BAA0B,EAEhC,MAAM,oBAAoB,CAAA;AAE3B,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;CAiBI,CAAA;AAEvC,eAAO,MAAM,gBAAgB,sDAE5B,CAAA;AAED,eAAO,MAAM,eAAe,GAC1B,WAAW,0BAA0B,KACpC,IAEF,CAAA"}
1
+ {"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../src/components/card.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,0BAA0B,EAEhC,MAAM,oBAAoB,CAAA;AAE3B,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;CAsBI,CAAA;AAEvC,eAAO,MAAM,gBAAgB,sDAE5B,CAAA;AAED,eAAO,MAAM,eAAe,GAC1B,WAAW,0BAA0B,KACpC,IAEF,CAAA"}
@@ -1,6 +1,11 @@
1
1
  import { createLumenElementClass, defineLumenElement } from '../element-base.js';
2
2
  export const lumenCardElementConfig = {
3
3
  attributeClasses: {
4
+ density: {
5
+ comfortable: 'ui-card--comfortable',
6
+ compact: 'ui-card--compact',
7
+ spacious: 'ui-card--spacious'
8
+ },
4
9
  glass: {
5
10
  strong: 'ui-card--glass ui-glass-strong',
6
11
  subtle: 'ui-card--glass ui-glass-subtle',
@@ -14,7 +19,7 @@ export const lumenCardElementConfig = {
14
19
  }
15
20
  },
16
21
  baseClassName: 'ui-card',
17
- defaults: { 'data-slot': 'card', variant: 'default' },
22
+ defaults: { 'data-slot': 'card', density: 'comfortable', variant: 'default' },
18
23
  tagName: 'lumen-card'
19
24
  };
20
25
  export const LumenCardElement = createLumenElementClass(lumenCardElementConfig);
@@ -7,6 +7,7 @@ export declare const lumenComboboxElementConfig: {
7
7
  readonly tagName: "lumen-combobox";
8
8
  };
9
9
  export declare class LumenComboboxElement extends LumenElement {
10
+ #private;
10
11
  static config: {
11
12
  readonly baseClassName: "ui-combobox";
12
13
  readonly defaults: {
@@ -14,10 +15,8 @@ export declare class LumenComboboxElement extends LumenElement {
14
15
  };
15
16
  readonly tagName: "lumen-combobox";
16
17
  };
17
- private abortController;
18
18
  connectedCallback(): void;
19
19
  disconnectedCallback(): void;
20
- private setupCombobox;
21
20
  }
22
21
  export declare const defineLumenCombobox: (registry?: LumenCustomElementRegistry) => void;
23
22
  //# sourceMappingURL=combobox.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"combobox.d.ts","sourceRoot":"","sources":["../../src/components/combobox.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,0BAA0B,EAC/B,YAAY,EAEb,MAAM,oBAAoB,CAAA;AAE3B,eAAO,MAAM,0BAA0B;;;;;;CAIA,CAAA;AAyBvC,qBAAa,oBAAqB,SAAQ,YAAY;IACpD,OAAgB,MAAM;;;;;;MAA6B;IAEnD,OAAO,CAAC,eAAe,CAA6B;IAE3C,iBAAiB;IAYjB,oBAAoB;IAM7B,OAAO,CAAC,aAAa;CAmJtB;AAED,eAAO,MAAM,mBAAmB,GAC9B,WAAW,0BAA0B,KACpC,IAIF,CAAA"}
1
+ {"version":3,"file":"combobox.d.ts","sourceRoot":"","sources":["../../src/components/combobox.ts"],"names":[],"mappings":"AAEA,OAAO,EAEL,KAAK,0BAA0B,EAC/B,YAAY,EAEb,MAAM,oBAAoB,CAAA;AAE3B,eAAO,MAAM,0BAA0B;;;;;;CAIA,CAAA;AAEvC,qBAAa,oBAAqB,SAAQ,YAAY;;IACpD,OAAgB,MAAM;;;;;;MAA6B;IAsB1C,iBAAiB;IAcjB,oBAAoB;CAa9B;AAED,eAAO,MAAM,mBAAmB,GAC9B,WAAW,0BAA0B,KACpC,IAIF,CAAA"}