@nonoun/native-ui 0.2.9 → 0.3.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 (41) hide show
  1. package/dist/{ui-layout-inspector-element.js → components.js} +2279 -386
  2. package/dist/{register-all2.js → core.js} +78 -35
  3. package/dist/custom-elements.json +1999 -1999
  4. package/dist/kernel.js +175 -174
  5. package/dist/native-ui.js +4 -49
  6. package/dist/register-all.js +4 -4
  7. package/dist/traits.js +3 -5
  8. package/dist/ui-icon.js +56 -0
  9. package/package.json +6 -9
  10. package/dist/dialog-controller.js +0 -391
  11. package/dist/inspector/build-inspector.d.ts +0 -8
  12. package/dist/inspector/build-inspector.d.ts.map +0 -1
  13. package/dist/inspector/ds-color-swatch-element.d.ts +0 -15
  14. package/dist/inspector/ds-color-swatch-element.d.ts.map +0 -1
  15. package/dist/inspector/ds-color-swatch.d.ts +0 -3
  16. package/dist/inspector/ds-color-swatch.d.ts.map +0 -1
  17. package/dist/inspector/ds-colors-element.d.ts +0 -14
  18. package/dist/inspector/ds-colors-element.d.ts.map +0 -1
  19. package/dist/inspector/ds-colors.d.ts +0 -4
  20. package/dist/inspector/ds-colors.d.ts.map +0 -1
  21. package/dist/inspector/ds-inspector-element.d.ts +0 -15
  22. package/dist/inspector/ds-inspector-element.d.ts.map +0 -1
  23. package/dist/inspector/ds-inspector.d.ts +0 -3
  24. package/dist/inspector/ds-inspector.d.ts.map +0 -1
  25. package/dist/inspector/ds-themes-element.d.ts +0 -13
  26. package/dist/inspector/ds-themes-element.d.ts.map +0 -1
  27. package/dist/inspector/ds-themes.d.ts +0 -4
  28. package/dist/inspector/ds-themes.d.ts.map +0 -1
  29. package/dist/inspector/ds-variable-element.d.ts +0 -19
  30. package/dist/inspector/ds-variable-element.d.ts.map +0 -1
  31. package/dist/inspector/ds-variable.d.ts +0 -4
  32. package/dist/inspector/ds-variable.d.ts.map +0 -1
  33. package/dist/inspector/index.d.ts +0 -10
  34. package/dist/inspector/index.d.ts.map +0 -1
  35. package/dist/inspector.css +0 -231
  36. package/dist/inspector.d.ts +0 -11
  37. package/dist/inspector.d.ts.map +0 -1
  38. package/dist/inspector.js +0 -610
  39. package/dist/list-navigate-controller.js +0 -457
  40. package/dist/ui-icon-element.js +0 -986
  41. package/dist/uid.js +0 -147
@@ -1 +0,0 @@
1
- {"version":3,"file":"ds-colors-element.d.ts","sourceRoot":"","sources":["../../src/inspector/ds-colors-element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAGlD,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf;AAED,qBAAa,QAAS,SAAQ,SAAS;;IACrC,MAAM,CAAC,kBAAkB,WAAY;IAIrC,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAQpF,KAAK,IAAI,IAAI;IAab,QAAQ,IAAI,IAAI;IAWhB,OAAO,IAAI,IAAI;CAuBhB"}
@@ -1,4 +0,0 @@
1
- import { DSColors } from './ds-colors-element.ts';
2
- export { DSColors };
3
- export type { DSColorEntry } from './ds-colors-element.ts';
4
- //# sourceMappingURL=ds-colors.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ds-colors.d.ts","sourceRoot":"","sources":["../../src/inspector/ds-colors.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAIlD,OAAO,EAAE,QAAQ,EAAE,CAAC;AACpB,YAAY,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC"}
@@ -1,15 +0,0 @@
1
- import { UIElement } from '../core/ui-element.ts';
2
- /**
3
- * Self-contained design system inspector.
4
- *
5
- * Stamps the full color/variable inspector UI on connection.
6
- * Consumer usage: `<ds-inspector></ds-inspector>`.
7
- *
8
- * All `ds-*` sub-elements are registered by the `@nonoun/native-ui/inspector`
9
- * entry point as a side effect of import.
10
- */
11
- export declare class DSInspector extends UIElement {
12
- setup(): void;
13
- teardown(): void;
14
- }
15
- //# sourceMappingURL=ds-inspector-element.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ds-inspector-element.d.ts","sourceRoot":"","sources":["../../src/inspector/ds-inspector-element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAGlD;;;;;;;;GAQG;AACH,qBAAa,WAAY,SAAQ,SAAS;IACxC,KAAK,IAAI,IAAI;IAKb,QAAQ,IAAI,IAAI;CAIjB"}
@@ -1,3 +0,0 @@
1
- import { DSInspector } from './ds-inspector-element.ts';
2
- export { DSInspector };
3
- //# sourceMappingURL=ds-inspector.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ds-inspector.d.ts","sourceRoot":"","sources":["../../src/inspector/ds-inspector.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAIxD,OAAO,EAAE,WAAW,EAAE,CAAC"}
@@ -1,13 +0,0 @@
1
- import { UIElement } from '../core/ui-element.ts';
2
- export interface DSThemeEntry {
3
- name: string;
4
- value: string;
5
- }
6
- export declare class DSThemes extends UIElement {
7
- #private;
8
- static observedAttributes: string[];
9
- attributeChangedCallback(name: string, old: string | null, val: string | null): void;
10
- setup(): void;
11
- teardown(): void;
12
- }
13
- //# sourceMappingURL=ds-themes-element.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ds-themes-element.d.ts","sourceRoot":"","sources":["../../src/inspector/ds-themes-element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAElD,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf;AAeD,qBAAa,QAAS,SAAQ,SAAS;;IACrC,MAAM,CAAC,kBAAkB,WAAY;IAIrC,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAQpF,KAAK,IAAI,IAAI;IASb,QAAQ,IAAI,IAAI;CA8CjB"}
@@ -1,4 +0,0 @@
1
- import { DSThemes } from './ds-themes-element.ts';
2
- export { DSThemes };
3
- export type { DSThemeEntry } from './ds-themes-element.ts';
4
- //# sourceMappingURL=ds-themes.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ds-themes.d.ts","sourceRoot":"","sources":["../../src/inspector/ds-themes.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAIlD,OAAO,EAAE,QAAQ,EAAE,CAAC;AACpB,YAAY,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC"}
@@ -1,19 +0,0 @@
1
- import { UIElement } from '../core/ui-element.ts';
2
- export interface DSVariableData {
3
- name: string;
4
- type: 'number';
5
- token: string;
6
- value: number;
7
- step?: number;
8
- min?: number;
9
- max?: number;
10
- }
11
- export declare class DSVariable extends UIElement {
12
- #private;
13
- static observedAttributes: string[];
14
- attributeChangedCallback(name: string, old: string | null, val: string | null): void;
15
- setup(): void;
16
- teardown(): void;
17
- sync(): void;
18
- }
19
- //# sourceMappingURL=ds-variable-element.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ds-variable-element.d.ts","sourceRoot":"","sources":["../../src/inspector/ds-variable-element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAElD,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,QAAQ,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,qBAAa,UAAW,SAAQ,SAAS;;IACvC,MAAM,CAAC,kBAAkB,WAAY;IAMrC,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAQpF,KAAK,IAAI,IAAI;IAWb,QAAQ,IAAI,IAAI;IAYhB,IAAI,IAAI,IAAI;CA8Db"}
@@ -1,4 +0,0 @@
1
- import { DSVariable } from './ds-variable-element.ts';
2
- export { DSVariable };
3
- export type { DSVariableData } from './ds-variable-element.ts';
4
- //# sourceMappingURL=ds-variable.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ds-variable.d.ts","sourceRoot":"","sources":["../../src/inspector/ds-variable.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAItD,OAAO,EAAE,UAAU,EAAE,CAAC;AACtB,YAAY,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC"}
@@ -1,10 +0,0 @@
1
- export { DSColorSwatch } from './ds-color-swatch-element.ts';
2
- export { DSColors } from './ds-colors-element.ts';
3
- export type { DSColorEntry } from './ds-colors-element.ts';
4
- export { DSVariable } from './ds-variable-element.ts';
5
- export type { DSVariableData } from './ds-variable-element.ts';
6
- export { DSThemes } from './ds-themes-element.ts';
7
- export type { DSThemeEntry } from './ds-themes-element.ts';
8
- export { DSInspector } from './ds-inspector-element.ts';
9
- export { buildInspector } from './build-inspector.ts';
10
- //# sourceMappingURL=index.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/inspector/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAC7D,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAClD,YAAY,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,YAAY,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAC/D,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAClD,YAAY,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC"}
@@ -1,231 +0,0 @@
1
- /* ──────────────────────────────────────────────────────────────────────────────
2
- ds-inspector — Design system inspector component styles.
3
- Opt-in via: @import '@nonoun/native-ui/css/inspector';
4
- ────────────────────────────────────────────────────────────────────────────── */
5
-
6
- @layer ui {
7
-
8
- /* ── Toolbar ── */
9
-
10
- .ds-inspector-toolbar {
11
- position: sticky;
12
- top: 0;
13
- z-index: 1;
14
- display: flex;
15
- gap: 0.5rem;
16
- padding-block: 0.5rem;
17
- margin-block-end: 0.5rem;
18
- background: var(--_ground, var(--_panel));
19
- }
20
-
21
- .ds-inspector-toolbar > * {
22
- flex: 1;
23
- min-width: 0;
24
- }
25
-
26
- /* ── Section Structure ── */
27
-
28
- .ds-inspector-section {
29
- margin-block-end: 1rem;
30
- }
31
-
32
- .ds-inspector-section[hidden] {
33
- display: none;
34
- }
35
-
36
- .ds-inspector-section + .ds-inspector-section:not([hidden]) {
37
- padding-block-start: 0.5rem;
38
- border-block-start: 1px solid var(--neutral-border-muted);
39
- }
40
-
41
- .ds-inspector-heading {
42
- font-size: 0.6875rem;
43
- font-weight: 600;
44
- text-transform: uppercase;
45
- letter-spacing: 0.05em;
46
- color: var(--neutral-ink-muted);
47
- margin: 0 0 0.5rem;
48
- }
49
-
50
- .ds-inspector-subheading {
51
- font-size: 0.625rem;
52
- font-weight: 500;
53
- color: var(--neutral-ink-placeholder);
54
- margin: 0.5rem 0 0.25rem;
55
- }
56
-
57
- /* ── ds-variable ── */
58
-
59
- :where(ds-variable) {
60
- display: block;
61
- }
62
-
63
- .ds-variable-row {
64
- display: grid;
65
- grid-template-columns: auto 1fr auto;
66
- align-items: center;
67
- gap: 0.5rem;
68
- padding-block: 0.125rem;
69
- }
70
-
71
- .ds-variable-label {
72
- font-size: 0.6875rem;
73
- color: var(--neutral-ink);
74
- white-space: nowrap;
75
- overflow: hidden;
76
- text-overflow: ellipsis;
77
- min-width: 3rem;
78
- max-width: 5rem;
79
- }
80
-
81
- .ds-variable-value {
82
- font-size: 0.625rem;
83
- font-family: ui-monospace, monospace;
84
- color: var(--neutral-ink-muted);
85
- text-align: right;
86
- white-space: nowrap;
87
- overflow: hidden;
88
- text-overflow: ellipsis;
89
- min-width: 3rem;
90
- max-width: 5rem;
91
- }
92
-
93
- /* ── ds-colors ── */
94
-
95
- :where(ds-colors) {
96
- display: block;
97
- }
98
-
99
- .ds-colors-strip {
100
- display: flex;
101
- gap: 2px;
102
- border-radius: 0.375rem;
103
- overflow: hidden;
104
- }
105
-
106
- /* ── ds-color-swatch ── */
107
-
108
- :where(ds-color-swatch) {
109
- flex: 1;
110
- aspect-ratio: 1;
111
- min-width: 0;
112
- position: relative;
113
- display: flex;
114
- align-items: flex-end;
115
- justify-content: center;
116
- cursor: pointer;
117
- }
118
-
119
- .ds-swatch-label {
120
- font-size: 0.5rem;
121
- line-height: 1;
122
- text-align: center;
123
- padding: 2px 1px;
124
- white-space: nowrap;
125
- overflow: hidden;
126
- text-overflow: ellipsis;
127
- max-width: 100%;
128
- pointer-events: none;
129
- }
130
-
131
- /* ── Swatch Popover ── */
132
-
133
- .ds-swatch-popover {
134
- position: fixed;
135
- position-area: block-end;
136
- position-try-fallbacks: flip-block;
137
- margin: 0.25rem 0 0;
138
-
139
- min-width: 12rem;
140
- padding: 0.375rem;
141
-
142
- font-size: 0.6875rem;
143
- color: var(--neutral-ink);
144
- background: var(--neutral-modal);
145
- border: 1px solid var(--neutral-border-muted);
146
- border-radius: 0.375rem;
147
- box-shadow: var(--ui-shadow-md);
148
-
149
- /* Override UA popover styles */
150
- inset: unset;
151
- overflow: visible;
152
-
153
- opacity: 0;
154
- transform: scale(0.96);
155
- transition:
156
- opacity 150ms ease,
157
- transform 150ms ease,
158
- display 150ms ease allow-discrete,
159
- overlay 150ms ease allow-discrete;
160
- }
161
-
162
- .ds-swatch-popover:popover-open {
163
- opacity: 1;
164
- transform: scale(1);
165
- }
166
-
167
- @starting-style {
168
- .ds-swatch-popover:popover-open {
169
- opacity: 0;
170
- transform: scale(0.96);
171
- }
172
- }
173
-
174
- .ds-swatch-popover[popover]:not(:popover-open) {
175
- display: none;
176
- }
177
-
178
- .ds-swatch-popover-header {
179
- font-size: 0.5625rem;
180
- font-family: ui-monospace, monospace;
181
- color: var(--neutral-ink-muted);
182
- padding: 0.125rem 0.25rem 0.375rem;
183
- border-bottom: 1px solid var(--neutral-border-muted);
184
- margin-bottom: 0.25rem;
185
- white-space: nowrap;
186
- overflow: hidden;
187
- text-overflow: ellipsis;
188
- }
189
-
190
- .ds-swatch-popover-row {
191
- display: flex;
192
- align-items: center;
193
- gap: 0.5rem;
194
- width: 100%;
195
- padding: 0.25rem;
196
- border: none;
197
- border-radius: 0.25rem;
198
- background: transparent;
199
- color: inherit;
200
- font: inherit;
201
- cursor: pointer;
202
- text-align: left;
203
- }
204
-
205
- .ds-swatch-popover-row:hover {
206
- background: var(--neutral-control);
207
- }
208
-
209
- .ds-swatch-popover-label {
210
- font-size: 0.5625rem;
211
- font-weight: 600;
212
- color: var(--neutral-ink-muted);
213
- min-width: 2.5rem;
214
- }
215
-
216
- .ds-swatch-popover-value {
217
- font-size: 0.5625rem;
218
- font-family: ui-monospace, monospace;
219
- color: var(--neutral-ink);
220
- white-space: nowrap;
221
- overflow: hidden;
222
- text-overflow: ellipsis;
223
- }
224
-
225
- /* ── ds-themes ── */
226
-
227
- :where(ds-themes) {
228
- display: contents;
229
- }
230
-
231
- } /* @layer ui */
@@ -1,11 +0,0 @@
1
- import { DSVariable } from './inspector/ds-variable-element.ts';
2
- import { DSColors } from './inspector/ds-colors-element.ts';
3
- import { DSColorSwatch } from './inspector/ds-color-swatch-element.ts';
4
- import { DSThemes } from './inspector/ds-themes-element.ts';
5
- import { DSInspector } from './inspector/ds-inspector-element.ts';
6
- import { buildInspector } from './inspector/build-inspector.ts';
7
- export { DSVariable, DSColors, DSColorSwatch, DSThemes, DSInspector, buildInspector, };
8
- export type { DSVariableData } from './inspector/ds-variable-element.ts';
9
- export type { DSColorEntry } from './inspector/ds-colors-element.ts';
10
- export type { DSThemeEntry } from './inspector/ds-themes-element.ts';
11
- //# sourceMappingURL=inspector.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"inspector.d.ts","sourceRoot":"","sources":["../src/inspector.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,UAAU,EAAE,MAAM,oCAAoC,CAAC;AAChE,OAAO,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,wCAAwC,CAAC;AACvE,OAAO,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAC5D,OAAO,EAAE,WAAW,EAAE,MAAM,qCAAqC,CAAC;AAYlE,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAoBhE,OAAO,EACL,UAAU,EACV,QAAQ,EACR,aAAa,EACb,QAAQ,EACR,WAAW,EACX,cAAc,GACf,CAAC;AACF,YAAY,EAAE,cAAc,EAAE,MAAM,oCAAoC,CAAC;AACzE,YAAY,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AACrE,YAAY,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC"}