@rak200/ui 0.2.17 → 0.2.19
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.
- package/README.md +5 -3
- package/dist/field.js +2 -2
- package/dist/field.js.map +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -0
- package/dist/index.js.map +1 -1
- package/dist/table.d.ts +56 -0
- package/dist/table.d.ts.map +1 -0
- package/dist/table.js +175 -0
- package/dist/table.js.map +1 -0
- package/dist/tokens.d.ts +2 -2
- package/dist/tokens.d.ts.map +1 -1
- package/dist/tokens.js +62 -0
- package/dist/tokens.js.map +1 -1
- package/dist/tooltip.js +1 -1
- package/dist/tooltip.js.map +1 -1
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -83,13 +83,15 @@ which one you are looking at.
|
|
|
83
83
|
## Documentation
|
|
84
84
|
|
|
85
85
|
The reference lives in [docs/](docs/README.md) — one page per unit. The playground shows the
|
|
86
|
-
components; `docs/` is what describes them.
|
|
86
|
+
components; `docs/` is what describes them. It renders under the token sheet a host inserts, and
|
|
87
|
+
its toolbar switches the colour scheme — so what the site shows is what a page gets, in both
|
|
88
|
+
schemes rather than one.
|
|
87
89
|
|
|
88
90
|
## Status
|
|
89
91
|
|
|
90
|
-
**v0.**
|
|
92
|
+
**v0.** Seventeen components — `<ui-button>`, `<ui-card>`, `<ui-field>`, `<ui-dialog>`, `<ui-input>`,
|
|
91
93
|
`<ui-textarea>`, `<ui-checkbox>`, `<ui-switch>`, `<ui-select>`, `<ui-radio-group>`, `<ui-radio>`,
|
|
92
|
-
`<ui-tooltip>`, `<ui-toaster>`, `<ui-toast>`, `<ui-menu>` and `<ui-icon>` — the token layer
|
|
94
|
+
`<ui-tooltip>`, `<ui-toaster>`, `<ui-toast>`, `<ui-menu>`, `<ui-table>` and `<ui-icon>` — the token layer
|
|
93
95
|
under them, and an adopted glyph set, built to the ecosystem's full quality bar rather than
|
|
94
96
|
sketched: type-checked at the strictest available setting, formatted, tested in a real browser and
|
|
95
97
|
**asserted against axe** for WCAG A/AA, 100% coverage and **100% mutation score**, scanned, and
|
package/dist/field.js
CHANGED
|
@@ -50,14 +50,14 @@ export class UiField extends LitElement {
|
|
|
50
50
|
|
|
51
51
|
slot[name='help']::slotted(*) {
|
|
52
52
|
color: ${reference('--ui-color-text')};
|
|
53
|
-
font-size:
|
|
53
|
+
font-size: ${reference('--ui-text-supporting')};
|
|
54
54
|
}
|
|
55
55
|
|
|
56
56
|
/* Colour is not the only cue — the error text says what is wrong, and
|
|
57
57
|
aria-invalid marks the control regardless of styling. */
|
|
58
58
|
slot[name='error']::slotted(*) {
|
|
59
59
|
color: ${reference('--ui-color-danger')};
|
|
60
|
-
font-size:
|
|
60
|
+
font-size: ${reference('--ui-text-supporting')};
|
|
61
61
|
}
|
|
62
62
|
`; }
|
|
63
63
|
/** The prefix for this instance's generated ids, allocated on first association. */
|
package/dist/field.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"field.js","sourceRoot":"","sources":["../src/field.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAuB,MAAM,KAAK,CAAC;AACjE,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,8DAA8D;AAC9D,IAAI,QAAQ,GAAG,CAAC,CAAC;AAEjB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,MAAM,OAAO,OAAQ,SAAQ,UAAU;aACV,WAAM,GAAG,GAAG,CAAA;;;2BAGd,SAAS,CAAC,WAAW,CAAC;;;;;;wBAMzB,SAAS,CAAC,YAAY,CAAC;;;;qBAI1B,SAAS,CAAC,iBAAiB,CAAC
|
|
1
|
+
{"version":3,"file":"field.js","sourceRoot":"","sources":["../src/field.ts"],"names":[],"mappings":"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"}
|
package/dist/index.d.ts
CHANGED
|
@@ -8,6 +8,7 @@ export { UiInput, UiTextarea } from './input.js';
|
|
|
8
8
|
export { UiMenu } from './menu.js';
|
|
9
9
|
export { UiRadio, UiRadioGroup, type RadioOrientation } from './radio.js';
|
|
10
10
|
export { UiSelect } from './select.js';
|
|
11
|
+
export { UiTable } from './table.js';
|
|
11
12
|
export { UiToast, UiToaster, type ToastVariant } from './toast.js';
|
|
12
13
|
export { UiTooltip } from './tooltip.js';
|
|
13
14
|
export { tokens, derivedTokens, defaults, formulas, darkScheme, tokenStyleSheet, type Token, type DerivedToken, } from './tokens.js';
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,aAAa,CAAC;AAC3D,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AACnC,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAC7C,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AACnC,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,KAAK,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAC1E,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,YAAY,EAAE,MAAM,YAAY,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EACH,MAAM,EACN,aAAa,EACb,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,eAAe,EACf,KAAK,KAAK,EACV,KAAK,YAAY,GACpB,MAAM,aAAa,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,aAAa,CAAC;AAC3D,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AACnC,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAC7C,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AACnC,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,KAAK,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAC1E,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,YAAY,EAAE,MAAM,YAAY,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EACH,MAAM,EACN,aAAa,EACb,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,eAAe,EACf,KAAK,KAAK,EACV,KAAK,YAAY,GACpB,MAAM,aAAa,CAAC"}
|
package/dist/index.js
CHANGED
|
@@ -8,6 +8,7 @@ export { UiInput, UiTextarea } from './input.js';
|
|
|
8
8
|
export { UiMenu } from './menu.js';
|
|
9
9
|
export { UiRadio, UiRadioGroup } from './radio.js';
|
|
10
10
|
export { UiSelect } from './select.js';
|
|
11
|
+
export { UiTable } from './table.js';
|
|
11
12
|
export { UiToast, UiToaster } from './toast.js';
|
|
12
13
|
export { UiTooltip } from './tooltip.js';
|
|
13
14
|
export { tokens, derivedTokens, defaults, formulas, darkScheme, tokenStyleSheet, } from './tokens.js';
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAsB,MAAM,aAAa,CAAC;AAC3D,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AACnC,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAC7C,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AACnC,OAAO,EAAE,OAAO,EAAE,YAAY,EAAyB,MAAM,YAAY,CAAC;AAC1E,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,SAAS,EAAqB,MAAM,YAAY,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EACH,MAAM,EACN,aAAa,EACb,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,eAAe,GAGlB,MAAM,aAAa,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAsB,MAAM,aAAa,CAAC;AAC3D,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AACnC,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAC7C,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AACnC,OAAO,EAAE,OAAO,EAAE,YAAY,EAAyB,MAAM,YAAY,CAAC;AAC1E,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,OAAO,EAAE,SAAS,EAAqB,MAAM,YAAY,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EACH,MAAM,EACN,aAAa,EACb,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,eAAe,GAGlB,MAAM,aAAa,CAAC"}
|
package/dist/table.d.ts
ADDED
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
import { LitElement, type CSSResult, type TemplateResult } from 'lit';
|
|
2
|
+
/**
|
|
3
|
+
* A table, styled rather than rendered.
|
|
4
|
+
*
|
|
5
|
+
* **The `<table>` is yours**, and the whole of it: the rows, the cells, the header and the
|
|
6
|
+
* caption. This element writes no markup from data, which is the same shape `<ui-select>`
|
|
7
|
+
* and `<ui-input>` have and is chosen for a stronger reason here — a table's semantics are
|
|
8
|
+
* the host's subject, and a component that generates them is guessing at which column is a
|
|
9
|
+
* header and what the caption should say.
|
|
10
|
+
*
|
|
11
|
+
* **Explicitly not a data grid.** Sorting, selection, virtualization, editing and
|
|
12
|
+
* pagination are each an accessibility project of its own, and RFC 0016 defers all five.
|
|
13
|
+
* A `sortable` attribute here would reopen that decision, and `docs/table.md` says so
|
|
14
|
+
* where a consumer looks rather than leaving them to discover it in review.
|
|
15
|
+
*
|
|
16
|
+
* **It claims no role**, for the reason `<ui-card>` claims none: the platform already has
|
|
17
|
+
* the element that means *table*, and the host wrote it. What this adds is the surface
|
|
18
|
+
* around it.
|
|
19
|
+
*
|
|
20
|
+
* **The element scrolls, and it is focusable because it scrolls.** A region that overflows
|
|
21
|
+
* and cannot be reached by keyboard is unusable by keyboard, which is WCAG 2.1.1 — so the
|
|
22
|
+
* tab stop is not decoration. It is unconditional rather than measured, and that costs one
|
|
23
|
+
* tab stop on a table that happens to fit; the alternative watches every table's size
|
|
24
|
+
* forever to save it, which is the more expensive mistake.
|
|
25
|
+
*
|
|
26
|
+
* The name is left to the host: a scrollable region wants one, and the caption that would
|
|
27
|
+
* give it is in the host's tree where an IDREF from here cannot resolve. So write
|
|
28
|
+
* `aria-label` on this element, which is in one tree with nothing to miswire.
|
|
29
|
+
*
|
|
30
|
+
* @example
|
|
31
|
+
* ```html
|
|
32
|
+
* <ui-table aria-label="Invoices">
|
|
33
|
+
* <table>
|
|
34
|
+
* <caption>Every invoice raised this quarter.</caption>
|
|
35
|
+
* <thead>
|
|
36
|
+
* <tr><th scope="col">Number</th><th scope="col">Total</th></tr>
|
|
37
|
+
* </thead>
|
|
38
|
+
* <tbody>
|
|
39
|
+
* <tr><td>0001</td><td>R$ 1.200,00</td></tr>
|
|
40
|
+
* </tbody>
|
|
41
|
+
* </table>
|
|
42
|
+
* </ui-table>
|
|
43
|
+
* ```
|
|
44
|
+
*/
|
|
45
|
+
export declare class UiTable extends LitElement {
|
|
46
|
+
#private;
|
|
47
|
+
static readonly styles: CSSResult;
|
|
48
|
+
connectedCallback(): void;
|
|
49
|
+
render(): TemplateResult;
|
|
50
|
+
}
|
|
51
|
+
declare global {
|
|
52
|
+
interface HTMLElementTagNameMap {
|
|
53
|
+
'ui-table': UiTable;
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
//# sourceMappingURL=table.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../src/table.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,KAAK,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AA6EjF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,qBAAa,OAAQ,SAAQ,UAAU;;IACnC,gBAAyB,MAAM,EAAE,SAAS,CAkBxC;IAEO,iBAAiB,IAAI,IAAI;IAgCzB,MAAM,IAAI,cAAc;CAGpC;AAQD,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,UAAU,EAAE,OAAO,CAAC;KACvB;CACJ"}
|
package/dist/table.js
ADDED
|
@@ -0,0 +1,175 @@
|
|
|
1
|
+
import { LitElement, css, html } from 'lit';
|
|
2
|
+
import { reference } from './reference.js';
|
|
3
|
+
/**
|
|
4
|
+
* The rules that cannot live in a shadow root, and the reason they cannot.
|
|
5
|
+
*
|
|
6
|
+
* `::slotted()` matches the **top level** of what a slot was given and nothing below it.
|
|
7
|
+
* `<ui-select>` styles one `::slotted(select)` and needs no more; a table is a tree — the
|
|
8
|
+
* cells, the rows, the header and the caption are all descendants of the slotted element,
|
|
9
|
+
* and no selector written inside a shadow root reaches them. Measured, and it is not a
|
|
10
|
+
* quirk to route around: shadow CSS is scoped to its own tree, and the host's table is in
|
|
11
|
+
* the host's tree.
|
|
12
|
+
*
|
|
13
|
+
* So these rules are adopted into **that** tree instead, and `#adopt()` finds it with
|
|
14
|
+
* `getRootNode()` rather than reaching for `document` — a `<ui-table>` inside another
|
|
15
|
+
* component's shadow root has to be styled in that shadow root, and hardcoding the
|
|
16
|
+
* document would leave it bare exactly there.
|
|
17
|
+
*
|
|
18
|
+
* Every selector is prefixed with the element, so what is adopted cannot reach a table
|
|
19
|
+
* the host wrote somewhere else.
|
|
20
|
+
*/
|
|
21
|
+
const rules = css `
|
|
22
|
+
ui-table table {
|
|
23
|
+
/* The box the cells' own borders are drawn against: separate borders would double
|
|
24
|
+
every internal rule and leave a gap at each junction. */
|
|
25
|
+
border-collapse: collapse;
|
|
26
|
+
inline-size: 100%;
|
|
27
|
+
font-family: ${reference('--ui-font')};
|
|
28
|
+
/* The pair, never half of it — the argument src/card.ts makes beside its own. */
|
|
29
|
+
color: ${reference('--ui-color-text')};
|
|
30
|
+
background: ${reference('--ui-color-surface')};
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
ui-table th,
|
|
34
|
+
ui-table td {
|
|
35
|
+
padding: ${reference('--ui-space')};
|
|
36
|
+
/* start rather than left, so a right-to-left page needs no second rule — and
|
|
37
|
+
declared at all because the platform centres a th and only a th, which makes a
|
|
38
|
+
header sit off the column it heads. A host aligning a numeric column writes
|
|
39
|
+
text-align on their own cells; it inherits, so nothing here has to offer it. */
|
|
40
|
+
text-align: start;
|
|
41
|
+
vertical-align: top;
|
|
42
|
+
border-block-end: 1px solid ${reference('--ui-color-border')};
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
/* The header rests on the second surface tone rather than on a heavier rule, so a
|
|
46
|
+
table with one row still reads as having a header. font-weight is the platform's
|
|
47
|
+
own on a th and is deliberately not restated. */
|
|
48
|
+
ui-table thead th {
|
|
49
|
+
background: ${reference('--ui-color-surface-muted')};
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
/* Zebra rows, on the same tone. nth-child rather than nth-of-type: a tbody holds tr
|
|
53
|
+
and nothing else, so the two agree, and the first is what a reader expects to find.
|
|
54
|
+
|
|
55
|
+
Scoped to tbody on purpose — a striped thead or tfoot would be counting rows the
|
|
56
|
+
reader is not scanning. */
|
|
57
|
+
ui-table tbody tr:nth-child(even) {
|
|
58
|
+
background: ${reference('--ui-color-surface-muted')};
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
/* Below the table rather than above it, which is the platform's default reversed on
|
|
62
|
+
purpose: a caption that explains a table reads after it, and one that titles it is a
|
|
63
|
+
heading the host writes outside this element. */
|
|
64
|
+
ui-table caption {
|
|
65
|
+
caption-side: bottom;
|
|
66
|
+
text-align: start;
|
|
67
|
+
padding-block: ${reference('--ui-space')};
|
|
68
|
+
color: ${reference('--ui-color-text-muted')};
|
|
69
|
+
font-size: ${reference('--ui-text-supporting')};
|
|
70
|
+
}
|
|
71
|
+
`;
|
|
72
|
+
/** One sheet for the whole page, adopted per tree — see {@link rules}. */
|
|
73
|
+
const sheet = new CSSStyleSheet();
|
|
74
|
+
sheet.replaceSync(rules.cssText);
|
|
75
|
+
/**
|
|
76
|
+
* A table, styled rather than rendered.
|
|
77
|
+
*
|
|
78
|
+
* **The `<table>` is yours**, and the whole of it: the rows, the cells, the header and the
|
|
79
|
+
* caption. This element writes no markup from data, which is the same shape `<ui-select>`
|
|
80
|
+
* and `<ui-input>` have and is chosen for a stronger reason here — a table's semantics are
|
|
81
|
+
* the host's subject, and a component that generates them is guessing at which column is a
|
|
82
|
+
* header and what the caption should say.
|
|
83
|
+
*
|
|
84
|
+
* **Explicitly not a data grid.** Sorting, selection, virtualization, editing and
|
|
85
|
+
* pagination are each an accessibility project of its own, and RFC 0016 defers all five.
|
|
86
|
+
* A `sortable` attribute here would reopen that decision, and `docs/table.md` says so
|
|
87
|
+
* where a consumer looks rather than leaving them to discover it in review.
|
|
88
|
+
*
|
|
89
|
+
* **It claims no role**, for the reason `<ui-card>` claims none: the platform already has
|
|
90
|
+
* the element that means *table*, and the host wrote it. What this adds is the surface
|
|
91
|
+
* around it.
|
|
92
|
+
*
|
|
93
|
+
* **The element scrolls, and it is focusable because it scrolls.** A region that overflows
|
|
94
|
+
* and cannot be reached by keyboard is unusable by keyboard, which is WCAG 2.1.1 — so the
|
|
95
|
+
* tab stop is not decoration. It is unconditional rather than measured, and that costs one
|
|
96
|
+
* tab stop on a table that happens to fit; the alternative watches every table's size
|
|
97
|
+
* forever to save it, which is the more expensive mistake.
|
|
98
|
+
*
|
|
99
|
+
* The name is left to the host: a scrollable region wants one, and the caption that would
|
|
100
|
+
* give it is in the host's tree where an IDREF from here cannot resolve. So write
|
|
101
|
+
* `aria-label` on this element, which is in one tree with nothing to miswire.
|
|
102
|
+
*
|
|
103
|
+
* @example
|
|
104
|
+
* ```html
|
|
105
|
+
* <ui-table aria-label="Invoices">
|
|
106
|
+
* <table>
|
|
107
|
+
* <caption>Every invoice raised this quarter.</caption>
|
|
108
|
+
* <thead>
|
|
109
|
+
* <tr><th scope="col">Number</th><th scope="col">Total</th></tr>
|
|
110
|
+
* </thead>
|
|
111
|
+
* <tbody>
|
|
112
|
+
* <tr><td>0001</td><td>R$ 1.200,00</td></tr>
|
|
113
|
+
* </tbody>
|
|
114
|
+
* </table>
|
|
115
|
+
* </ui-table>
|
|
116
|
+
* ```
|
|
117
|
+
*/
|
|
118
|
+
export class UiTable extends LitElement {
|
|
119
|
+
static { this.styles = css `
|
|
120
|
+
:host {
|
|
121
|
+
display: block;
|
|
122
|
+
/* The scroll lives on the element itself rather than on a wrapper in the
|
|
123
|
+
shadow root, and that is what lets the host name it: aria-label on a box in
|
|
124
|
+
here would be a name written by this package, and the element is the one
|
|
125
|
+
node a consumer already has their hands on. */
|
|
126
|
+
overflow-x: auto;
|
|
127
|
+
border: 1px solid ${reference('--ui-color-border')};
|
|
128
|
+
border-radius: ${reference('--ui-radius')};
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
/* A visible focus ring is not decoration: removing it is the single most common
|
|
132
|
+
way a component stops being usable by keyboard. */
|
|
133
|
+
:host(:focus-visible) {
|
|
134
|
+
outline: 2px solid ${reference('--ui-color-focus')};
|
|
135
|
+
outline-offset: 2px;
|
|
136
|
+
}
|
|
137
|
+
`; }
|
|
138
|
+
connectedCallback() {
|
|
139
|
+
super.connectedCallback();
|
|
140
|
+
this.#adopt();
|
|
141
|
+
// Not `setAttribute` unless it is absent: a host who wrote their own tabindex —
|
|
142
|
+
// taking the element out of the tab order deliberately, or putting it somewhere
|
|
143
|
+
// specific in it — has made a decision, and this would overwrite it on every
|
|
144
|
+
// reconnection a framework performs.
|
|
145
|
+
if (!this.hasAttribute('tabindex')) {
|
|
146
|
+
this.setAttribute('tabindex', '0');
|
|
147
|
+
}
|
|
148
|
+
}
|
|
149
|
+
/**
|
|
150
|
+
* Puts {@link rules} in the tree this element is in.
|
|
151
|
+
*
|
|
152
|
+
* Run from `connectedCallback` rather than once at import, because the tree is not
|
|
153
|
+
* known until there is an element in one — and a second element in the same tree finds
|
|
154
|
+
* the sheet already there.
|
|
155
|
+
*/
|
|
156
|
+
#adopt() {
|
|
157
|
+
// `connectedCallback` runs when the element is connected to a document, so the
|
|
158
|
+
// root is a `Document` or a `ShadowRoot` and never a bare fragment. Both carry
|
|
159
|
+
// `adoptedStyleSheets`; asserted rather than narrowed, because the branch a guard
|
|
160
|
+
// would add is one no connected element can take.
|
|
161
|
+
const root = this.getRootNode();
|
|
162
|
+
if (!root.adoptedStyleSheets.includes(sheet)) {
|
|
163
|
+
root.adoptedStyleSheets = [...root.adoptedStyleSheets, sheet];
|
|
164
|
+
}
|
|
165
|
+
}
|
|
166
|
+
render() {
|
|
167
|
+
return html `<slot></slot>`;
|
|
168
|
+
}
|
|
169
|
+
}
|
|
170
|
+
// Stryker disable next-line StringLiteral: the registration runs once, at import, inside
|
|
171
|
+
// the warm process Stryker switches mutants in — so by the time a mutant on this line is
|
|
172
|
+
// active the element is already defined under the original name, and no test can observe
|
|
173
|
+
// the change. Outside the runner's reach, not an equivalent mutant.
|
|
174
|
+
customElements.define('ui-table', UiTable);
|
|
175
|
+
//# sourceMappingURL=table.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"table.js","sourceRoot":"","sources":["../src/table.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAuC,MAAM,KAAK,CAAC;AACjF,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,KAAK,GAAc,GAAG,CAAA;;;;;;uBAML,SAAS,CAAC,WAAW,CAAC;;iBAE5B,SAAS,CAAC,iBAAiB,CAAC;sBACvB,SAAS,CAAC,oBAAoB,CAAC;;;;;mBAKlC,SAAS,CAAC,YAAY,CAAC;;;;;;;sCAOJ,SAAS,CAAC,mBAAmB,CAAC;;;;;;;sBAO9C,SAAS,CAAC,0BAA0B,CAAC;;;;;;;;;sBASrC,SAAS,CAAC,0BAA0B,CAAC;;;;;;;;;yBASlC,SAAS,CAAC,YAAY,CAAC;iBAC/B,SAAS,CAAC,uBAAuB,CAAC;qBAC9B,SAAS,CAAC,sBAAsB,CAAC;;CAErD,CAAC;AAEF,0EAA0E;AAC1E,MAAM,KAAK,GAAG,IAAI,aAAa,EAAE,CAAC;AAClC,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;AAEjC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,MAAM,OAAO,OAAQ,SAAQ,UAAU;aACV,WAAM,GAAc,GAAG,CAAA;;;;;;;;gCAQpB,SAAS,CAAC,mBAAmB,CAAC;6BACjC,SAAS,CAAC,aAAa,CAAC;;;;;;iCAMpB,SAAS,CAAC,kBAAkB,CAAC;;;KAGzD,CAAC;IAEO,iBAAiB;QACtB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,MAAM,EAAE,CAAC;QAEd,gFAAgF;QAChF,gFAAgF;QAChF,6EAA6E;QAC7E,qCAAqC;QACrC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,EAAE,CAAC;YACjC,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;QACvC,CAAC;IACL,CAAC;IAED;;;;;;OAMG;IACH,MAAM;QACF,+EAA+E;QAC/E,+EAA+E;QAC/E,kFAAkF;QAClF,kDAAkD;QAClD,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,EAA2B,CAAC;QAEzD,IAAI,CAAC,IAAI,CAAC,kBAAkB,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,CAAC;YAC3C,IAAI,CAAC,kBAAkB,GAAG,CAAC,GAAG,IAAI,CAAC,kBAAkB,EAAE,KAAK,CAAC,CAAC;QAClE,CAAC;IACL,CAAC;IAEQ,MAAM;QACX,OAAO,IAAI,CAAA,eAAe,CAAC;IAC/B,CAAC;;AAGL,yFAAyF;AACzF,yFAAyF;AACzF,yFAAyF;AACzF,oEAAoE;AACpE,cAAc,CAAC,MAAM,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC"}
|
package/dist/tokens.d.ts
CHANGED
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
* it does break is code that **enumerates** the set, an exhaustive `Record<Token, string>`
|
|
32
32
|
* above all. The supported shape is the partial map, which is what a theme is anyway.
|
|
33
33
|
*/
|
|
34
|
-
export declare const tokens: readonly ["--ui-color-accent", "--ui-color-accent-contrast", "--ui-color-surface", "--ui-color-text", "--ui-color-focus", "--ui-color-danger", "--ui-color-success", "--ui-color-warning", "--ui-color-scrim", "--ui-radius", "--ui-space", "--ui-font", "--ui-duration-100", "--ui-easing-state", "--ui-easing-enter", "--ui-easing-exit", "--ui-icon-size", "--ui-icon-stroke", "--ui-elevation-100"];
|
|
34
|
+
export declare const tokens: readonly ["--ui-color-accent", "--ui-color-accent-contrast", "--ui-color-surface", "--ui-color-text", "--ui-color-focus", "--ui-color-danger", "--ui-color-success", "--ui-color-warning", "--ui-color-scrim", "--ui-radius", "--ui-space", "--ui-font", "--ui-duration-100", "--ui-easing-state", "--ui-easing-enter", "--ui-easing-exit", "--ui-icon-size", "--ui-icon-stroke", "--ui-elevation-100", "--ui-text-100"];
|
|
35
35
|
/** A CSS custom property this package defines and gives a default. */
|
|
36
36
|
export type Token = (typeof tokens)[number];
|
|
37
37
|
/**
|
|
@@ -44,7 +44,7 @@ export type Token = (typeof tokens)[number];
|
|
|
44
44
|
* what it buys is an override surface a host can hold in their head: change the accent and
|
|
45
45
|
* the hover and pressed colours follow, rather than being one more name each.
|
|
46
46
|
*/
|
|
47
|
-
export declare const derivedTokens: readonly ["--ui-duration-state", "--ui-color-border", "--ui-color-text-muted", "--ui-color-hover", "--ui-color-pressed", "--ui-color-accent-hover", "--ui-color-accent-pressed", "--ui-elevation-raised"];
|
|
47
|
+
export declare const derivedTokens: readonly ["--ui-duration-state", "--ui-color-border", "--ui-color-text-muted", "--ui-color-hover", "--ui-color-pressed", "--ui-color-accent-hover", "--ui-color-accent-pressed", "--ui-elevation-raised", "--ui-text-supporting", "--ui-color-surface-muted"];
|
|
48
48
|
/** A CSS custom property this package computes rather than declares. */
|
|
49
49
|
export type DerivedToken = (typeof derivedTokens)[number];
|
|
50
50
|
/**
|
package/dist/tokens.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../src/tokens.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,MAAM,
|
|
1
|
+
{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../src/tokens.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,MAAM,0ZA6GT,CAAC;AAEX,sEAAsE;AACtE,MAAM,MAAM,KAAK,GAAG,CAAC,OAAO,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC;AAE5C;;;;;;;;;GASG;AACH,eAAO,MAAM,aAAa,+PA4ChB,CAAC;AAEX,wEAAwE;AACxE,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC;AAE1D;;;;;GAKG;AACH,eAAO,MAAM,QAAQ,EAAE,QAAQ,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,CAiEpD,CAAC;AAqBF;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,eAAO,MAAM,QAAQ,EAAE,QAAQ,CAAC,MAAM,CAAC,YAAY,EAAE,MAAM,CAAC,CAqC3D,CAAC;AAEF;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,UAAU,EAAE,QAAQ,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,CAgB/D,CAAC;AAKF;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,eAAe,IAAI,MAAM,CAsBxC"}
|
package/dist/tokens.js
CHANGED
|
@@ -117,6 +117,29 @@ export const tokens = [
|
|
|
117
117
|
// and therefore already scheme-correct — which is why `src/card.ts` draws both and
|
|
118
118
|
// says so beside them.
|
|
119
119
|
'--ui-elevation-100',
|
|
120
|
+
// The type scale, arriving with `ui-table` — the category `ROADMAP.md` said would, and
|
|
121
|
+
// the last one the v0 surface expects. It arrives to fix a defect rather than to
|
|
122
|
+
// anticipate one: `src/field.ts` wrote `font-size: 0.875em` twice and `src/tooltip.ts`
|
|
123
|
+
// a third time, all three agreeing and nothing comparing them — the shape
|
|
124
|
+
// `src/reference.ts` records finding in thirteen hand-copied fallbacks, and the thing
|
|
125
|
+
// `ARCHITECTURE.md` forbids in writing, since a hardcoded value is a decision a host
|
|
126
|
+
// cannot override.
|
|
127
|
+
//
|
|
128
|
+
// A step in a scale, ordinal with gaps, for the reason the duration and elevation
|
|
129
|
+
// scales give above: a size is *relative* by nature, so the names have to be able to
|
|
130
|
+
// grow between each other. It follows the scale-and-purpose shape rather than easing's
|
|
131
|
+
// purpose-is-the-ground shape, and that split is item 9's: a curve is qualitative, a
|
|
132
|
+
// size is not. No component reads this one; they read `--ui-text-supporting`.
|
|
133
|
+
//
|
|
134
|
+
// The unit is `em` rather than `rem`, for the reason `--ui-icon-size` is: the role is
|
|
135
|
+
// text set *beside* other text, so it should be a fraction of whatever that text is
|
|
136
|
+
// rather than a fraction of the root. A host who wants a fixed size sets one.
|
|
137
|
+
//
|
|
138
|
+
// **The ordinal ascends with the size**, so `100` is the smallest step this package has
|
|
139
|
+
// needed and a body or heading step later is `200` or `300`. Neither is invented here:
|
|
140
|
+
// every component sets `font: inherit` and takes the page's own size, which is the
|
|
141
|
+
// right default and not a step at all.
|
|
142
|
+
'--ui-text-100',
|
|
120
143
|
];
|
|
121
144
|
/**
|
|
122
145
|
* The roles computed from the grounds rather than declared beside them.
|
|
@@ -152,6 +175,26 @@ export const derivedTokens = [
|
|
|
152
175
|
// and will not be the last, and the name a host retunes should not be the name of
|
|
153
176
|
// whichever component happened to need it first.
|
|
154
177
|
'--ui-elevation-raised',
|
|
178
|
+
// The purpose the type scale is read through, and the only name a component writes.
|
|
179
|
+
// `supporting` is a role rather than a size and rather than a component: the four
|
|
180
|
+
// places that want it are a field's help text, a field's error, a tooltip's tip and a
|
|
181
|
+
// table's caption, and what unites them is that each explains the thing beside it. A
|
|
182
|
+
// `--ui-text-small` here would be `--ui-color-blue-600` for type, which item 9 rejects
|
|
183
|
+
// in as many words.
|
|
184
|
+
'--ui-text-supporting',
|
|
185
|
+
// A second surface tone: the same plane, tinted only enough to group. A table stripes
|
|
186
|
+
// its rows with it and rests its header on it.
|
|
187
|
+
//
|
|
188
|
+
// **Not `--ui-color-hover`, which is the same kind of value at a different strength.**
|
|
189
|
+
// A token name says what it answers to, and a zebra row answers to nothing — reading
|
|
190
|
+
// the hover colour for it is the reverse engineering item 9 names as the cost of value
|
|
191
|
+
// names. It also sits deliberately *below* that value, so an interactive layer drawn
|
|
192
|
+
// over a striped row is still a change rather than a coincidence.
|
|
193
|
+
//
|
|
194
|
+
// The pairing with `--ui-color-text-muted` is the point of the name: this package
|
|
195
|
+
// already says `muted` for *the same role, one step back*, and a second vocabulary for
|
|
196
|
+
// the surface half would be one more thing for a host to learn.
|
|
197
|
+
'--ui-color-surface-muted',
|
|
155
198
|
];
|
|
156
199
|
/**
|
|
157
200
|
* The default value of every ground token, applied at `:root` by {@link tokenStyleSheet}.
|
|
@@ -218,6 +261,12 @@ export const defaults = {
|
|
|
218
261
|
// falls on rather than tinting it — a coloured shadow is a decision this layer would
|
|
219
262
|
// have to defend at every hue a host might set.
|
|
220
263
|
'--ui-elevation-100': '0 1px 2px -1px rgb(0 0 0 / 0.1), 0 2px 6px -1px rgb(0 0 0 / 0.1)',
|
|
264
|
+
// The value the three hardcoded sites already carried, adopted rather than re-chosen:
|
|
265
|
+
// this token exists to make an existing decision overridable, and changing it in the
|
|
266
|
+
// same breath would hide whether the extraction was faithful. 87.5% is 14px against a
|
|
267
|
+
// 16px page, which is the smallest size in wide use that is still ordinary body text
|
|
268
|
+
// rather than fine print.
|
|
269
|
+
'--ui-text-100': '0.875em',
|
|
221
270
|
};
|
|
222
271
|
/**
|
|
223
272
|
* A ground as it is written inside a formula: the name, with its own default behind it.
|
|
@@ -286,6 +335,19 @@ export const formulas = {
|
|
|
286
335
|
// lives, and a host who wants flatter cards moves the role rather than reverse
|
|
287
336
|
// engineering which step a card happens to read.
|
|
288
337
|
'--ui-elevation-raised': ground('--ui-elevation-100'),
|
|
338
|
+
// A plain reference, like the two purposes above: the scale is where the value lives,
|
|
339
|
+
// and a host who wants larger supporting text moves the role rather than working out
|
|
340
|
+
// which step a tooltip happens to read.
|
|
341
|
+
'--ui-text-supporting': ground('--ui-text-100'),
|
|
342
|
+
// 5% rather than the hover colour's 8%, and the gap is the whole design: a stripe has
|
|
343
|
+
// to be visible without reading as a different surface, and it has to leave room above
|
|
344
|
+
// itself for a state that is not a stripe. Mixing toward the text is what makes one
|
|
345
|
+
// formula right in both schemes, for the reason the neutrals above give — the tint
|
|
346
|
+
// darkens a light page and lightens a dark one without either being named.
|
|
347
|
+
//
|
|
348
|
+
// `tests/tokens.test.ts` holds the floor that matters here: text on a striped row is
|
|
349
|
+
// still text, so 4.5:1 is owed against this surface and not only against the plain one.
|
|
350
|
+
'--ui-color-surface-muted': mix('--ui-color-text', 5, '--ui-color-surface'),
|
|
289
351
|
};
|
|
290
352
|
/**
|
|
291
353
|
* The grounds whose value differs when the page is rendered dark.
|
package/dist/tokens.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tokens.js","sourceRoot":"","sources":["../src/tokens.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH;;;;;;;;;;;;;;;GAeG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG;IAClB,mBAAmB;IACnB,4BAA4B;IAC5B,oBAAoB;IACpB,iBAAiB;IACjB,kBAAkB;IAClB,mBAAmB;IACnB,qFAAqF;IACrF,uFAAuF;IACvF,mFAAmF;IACnF,cAAc;IACd,EAAE;IACF,oFAAoF;IACpF,+EAA+E;IAC/E,6EAA6E;IAC7E,oBAAoB;IACpB,oBAAoB;IACpB,oFAAoF;IACpF,mFAAmF;IACnF,kFAAkF;IAClF,iFAAiF;IACjF,oFAAoF;IACpF,wEAAwE;IACxE,EAAE;IACF,iFAAiF;IACjF,oFAAoF;IACpF,iFAAiF;IACjF,qFAAqF;IACrF,+EAA+E;IAC/E,kBAAkB;IAClB,aAAa;IACb,YAAY;IACZ,WAAW;IACX,kFAAkF;IAClF,sFAAsF;IACtF,+CAA+C;IAC/C,EAAE;IACF,uFAAuF;IACvF,sFAAsF;IACtF,uFAAuF;IACvF,oFAAoF;IACpF,4CAA4C;IAC5C,mBAAmB;IACnB,mBAAmB;IACnB,qFAAqF;IACrF,oFAAoF;IACpF,sFAAsF;IACtF,qDAAqD;IACrD,EAAE;IACF,uFAAuF;IACvF,uFAAuF;IACvF,mFAAmF;IACnF,kFAAkF;IAClF,mBAAmB;IACnB,kBAAkB;IAClB,oFAAoF;IACpF,mFAAmF;IACnF,mFAAmF;IACnF,2BAA2B;IAC3B,EAAE;IACF,mFAAmF;IACnF,kFAAkF;IAClF,6EAA6E;IAC7E,EAAE;IACF,8EAA8E;IAC9E,sFAAsF;IACtF,yDAAyD;IACzD,gBAAgB;IAChB,kBAAkB;IAClB,uFAAuF;IACvF,0CAA0C;IAC1C,EAAE;IACF,sFAAsF;IACtF,sFAAsF;IACtF,+EAA+E;IAC/E,qFAAqF;IACrF,mFAAmF;IACnF,qCAAqC;IACrC,EAAE;IACF,4EAA4E;IAC5E,qFAAqF;IACrF,sFAAsF;IACtF,sFAAsF;IACtF,mFAAmF;IACnF,uBAAuB;IACvB,oBAAoB;
|
|
1
|
+
{"version":3,"file":"tokens.js","sourceRoot":"","sources":["../src/tokens.ts"],"names":[],"mappings":"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"}
|
package/dist/tooltip.js
CHANGED
|
@@ -88,7 +88,7 @@ export class UiTooltip extends LitElement {
|
|
|
88
88
|
max-inline-size: calc(${reference('--ui-space')} * 40);
|
|
89
89
|
padding: calc(${reference('--ui-space')} / 2) ${reference('--ui-space')};
|
|
90
90
|
font-family: ${reference('--ui-font')};
|
|
91
|
-
font-size:
|
|
91
|
+
font-size: ${reference('--ui-text-supporting')};
|
|
92
92
|
/* The pair, never half of it: a surface without the colour chosen against it
|
|
93
93
|
inherits whatever the page set, and the contrast measured for that pair
|
|
94
94
|
stops holding. */
|
package/dist/tooltip.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../src/tooltip.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAuB,MAAM,KAAK,CAAC;AACjE,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AACvC,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,+DAA+D;AAC/D,IAAI,QAAQ,GAAG,CAAC,CAAC;AAEjB,iFAAiF;AACjF,MAAM,IAAI,GAAG,WAAW,CAAC;AAEzB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0DG;AACH,MAAM,OAAO,SAAU,SAAQ,UAAU;aACZ,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;oCAoBL,SAAS,CAAC,YAAY,CAAC;4BAC/B,SAAS,CAAC,YAAY,CAAC,SAAS,SAAS,CAAC,YAAY,CAAC;2BACxD,SAAS,CAAC,WAAW,CAAC
|
|
1
|
+
{"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../src/tooltip.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rak200/ui",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.19",
|
|
4
4
|
"description": "Host-agnostic custom-element UI components for the rak200 ecosystem",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": "rak200 <rak.ricardo@windowslive.com>",
|
|
@@ -54,7 +54,7 @@
|
|
|
54
54
|
"lit": "^3.3.3"
|
|
55
55
|
},
|
|
56
56
|
"devDependencies": {
|
|
57
|
-
"@rak200/coding-standard-ts": "github:rak200/coding-standard-ts#0.4.
|
|
57
|
+
"@rak200/coding-standard-ts": "github:rak200/coding-standard-ts#0.4.8",
|
|
58
58
|
"@storybook/addon-a11y": "^10.5.8",
|
|
59
59
|
"@storybook/web-components-vite": "^10.5.8",
|
|
60
60
|
"@types/node": "^26.1.2",
|