@rak200/ui 0.2.16 → 0.2.18
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 +3 -2
- package/dist/field.js +2 -2
- package/dist/field.js.map +1 -1
- package/dist/index.d.ts +2 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +2 -0
- package/dist/index.js.map +1 -1
- package/dist/menu.d.ts +92 -0
- package/dist/menu.d.ts.map +1 -0
- package/dist/menu.js +597 -0
- package/dist/menu.js.map +1 -0
- package/dist/placement.d.ts +56 -0
- package/dist/placement.d.ts.map +1 -0
- package/dist/placement.js +60 -0
- package/dist/placement.js.map +1 -0
- 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.d.ts +7 -3
- package/dist/tooltip.d.ts.map +1 -1
- package/dist/tooltip.js +16 -15
- package/dist/tooltip.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
[](https://github.com/rak200/ui/actions/workflows/ci.yml)
|
|
4
4
|
[](https://github.com/rak200/ui/tags)
|
|
5
5
|
[](https://nodejs.org/)
|
|
6
|
+
[](eslint.config.js)
|
|
6
7
|
[](stryker.config.js)
|
|
7
8
|
[](prettier.config.js)
|
|
8
9
|
[](LICENSE)
|
|
@@ -86,9 +87,9 @@ components; `docs/` is what describes them.
|
|
|
86
87
|
|
|
87
88
|
## Status
|
|
88
89
|
|
|
89
|
-
**v0.**
|
|
90
|
+
**v0.** Seventeen components — `<ui-button>`, `<ui-card>`, `<ui-field>`, `<ui-dialog>`, `<ui-input>`,
|
|
90
91
|
`<ui-textarea>`, `<ui-checkbox>`, `<ui-switch>`, `<ui-select>`, `<ui-radio-group>`, `<ui-radio>`,
|
|
91
|
-
`<ui-tooltip>`, `<ui-toaster>`, `<ui-toast>` and `<ui-icon>` — the token layer
|
|
92
|
+
`<ui-tooltip>`, `<ui-toaster>`, `<ui-toast>`, `<ui-menu>`, `<ui-table>` and `<ui-icon>` — the token layer
|
|
92
93
|
under them, and an adopted glyph set, built to the ecosystem's full quality bar rather than
|
|
93
94
|
sketched: type-checked at the strictest available setting, formatted, tested in a real browser and
|
|
94
95
|
**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":"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;yBACxB,SAAS,CAAC,sBAAsB,CAAC;;;;;;qBAMrC,SAAS,CAAC,mBAAmB,CAAC;yBAC1B,SAAS,CAAC,sBAAsB,CAAC;;KAErD,CAAC;IAEF,oFAAoF;IACpF,IAAI,CAAU;IAEd;;;;;OAKG;IACM,SAAS,GAAG,IAAI,gBAAgB,CAAC,GAAG,EAAE;QAC3C,IAAI,CAAC,UAAU,EAAE,CAAC;IACtB,CAAC,CAAC,CAAC;IAEM,iBAAiB;QACtB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAE1B,mFAAmF;QACnF,8EAA8E;QAC9E,kDAAkD;QAClD,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,aAAa,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;IAC1F,CAAC;IAEQ,oBAAoB;QACzB,IAAI,CAAC,SAAS,CAAC,UAAU,EAAE,CAAC;QAC5B,KAAK,CAAC,oBAAoB,EAAE,CAAC;IACjC,CAAC;IAEQ,YAAY;QACjB,IAAI,CAAC,UAAU,EAAE,CAAC;IACtB,CAAC;IAEQ,MAAM;QACX,OAAO,IAAI,CAAA;;;;;;;SAOV,CAAC;IACN,CAAC;IAED,4EAA4E;IAC5E,QAAQ,CAAC,IAAmB;QACxB,MAAM,QAAQ,GAAG,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,mBAAmB,IAAI,IAAI,CAAC;QACvF,MAAM,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QAE3C,OAAO,KAAK,YAAY,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC;IAC5D,CAAC;IAED;;;;;;;;;;;OAWG;IACH,QAAQ;QACJ,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;QAEpC,gFAAgF;QAChF,6EAA6E;QAC7E,gFAAgF;QAChF,6EAA6E;QAC7E,8BAA8B;QAC9B,IAAI,OAAO,EAAE,YAAY,CAAC,MAAM,CAAC,KAAK,IAAI,EAAE,CAAC;YACzC,OAAO,OAAO,CAAC;QACnB,CAAC;QAED,OAAO,OAAO,EAAE,aAAa,CAAC,yBAAyB,CAAC,IAAI,OAAO,CAAC;IACxE,CAAC;IAED;;;;;OAKG;IACH,UAAU;QACN,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;QAEhC,IAAI,OAAO,KAAK,SAAS,EAAE,CAAC;YACxB,OAAO;QACX,CAAC;QAED,mFAAmF;QACnF,iFAAiF;QACjF,+EAA+E;QAC/E,kFAAkF;QAClF,MAAM,GAAG,GAAG,CAAC,IAAI,CAAC,IAAI,KAAK,YAAY,MAAM,CAAC,EAAE,QAAQ,CAAC,EAAE,CAAC,CAAC;QAE7D,IAAI,OAAO,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC;YACpB,OAAO,CAAC,EAAE,GAAG,GAAG,GAAG,UAAU,CAAC;QAClC,CAAC;QAED,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAE,GAAG,GAAG,QAAQ,CAAC,CAAC;QAE5D,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE,GAAG,GAAG,OAAO,CAAC,CAAC;QACnE,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAE,GAAG,GAAG,QAAQ,CAAC,CAAC;QAEtE,kFAAkF;QAClF,6EAA6E;QAC7E,EAAE;QACF,oFAAoF;QACpF,oFAAoF;QACpF,+EAA+E;QAC/E,uBAAuB;QACvB,EAAE;QACF,mFAAmF;QACnF,+EAA+E;QAC/E,iFAAiF;QACjF,kFAAkF;QAClF,mFAAmF;QACnF,0DAA0D;QAC1D,MAAM,SAAS,GAAG,CAAC,KAAK,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,CACjF,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,KAAK,SAAS,CAC3B,CAAC;QAEF,IAAI,SAAS,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YACvB,OAAO,CAAC,YAAY,CAAC,kBAAkB,EAAE,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;QAClE,CAAC;aAAM,CAAC;YACJ,OAAO,CAAC,eAAe,CAAC,kBAAkB,CAAC,CAAC;QAChD,CAAC;QAED,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;YACtB,OAAO,CAAC,eAAe,CAAC,cAAc,CAAC,CAAC;QAC5C,CAAC;aAAM,CAAC;YACJ,OAAO,CAAC,YAAY,CAAC,cAAc,EAAE,MAAM,CAAC,CAAC;QACjD,CAAC;IACL,CAAC;IAED;;;;;;;OAOG;IACH,QAAQ,CAAC,OAAoB,EAAE,GAAW,EAAE,IAA4B;QACpE,MAAM,OAAO,GAAG,IAAI,GAAG,CAAC,CAAC,GAAG,IAAI,EAAE,GAAG,GAAG,OAAO,EAAE,GAAG,GAAG,QAAQ,CAAC,CAAC,CAAC;QAElE,OAAO,CAAC,OAAO,CAAC,YAAY,CAAC,kBAAkB,CAAC,IAAI,EAAE,CAAC;aAClD,KAAK,CAAC,GAAG,CAAC;aACV,MAAM,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;IACvD,CAAC;IAED;;;;;;;;;;;;;;;;;;;OAmBG;IACH,KAAK,CAAC,OAAoB,EAAE,KAA8B,EAAE,UAAkB;QAC1E,IAAI,QAAQ,IAAI,OAAO,EAAE,CAAC;YACtB,IAAI,KAAK,YAAY,gBAAgB,EAAE,CAAC;gBACpC,KAAK,CAAC,OAAO,GAAG,OAAO,CAAC,EAAE,CAAC;YAC/B,CAAC;YAED,OAAO;QACX,CAAC;QAED,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;YACtB,OAAO,CAAC,eAAe,CAAC,iBAAiB,CAAC,CAAC;YAE3C,OAAO;QACX,CAAC;QAED,IAAI,KAAK,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC;YAClB,KAAK,CAAC,EAAE,GAAG,UAAU,CAAC;QAC1B,CAAC;QAED,OAAO,CAAC,YAAY,CAAC,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,CAAC;IACtD,CAAC;IAED;;;;OAIG;IACH,UAAU,CAAC,OAAgC,EAAE,UAAkB;QAC3D,IAAI,OAAO,KAAK,SAAS,IAAI,OAAO,CAAC,WAAW,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC;YAC7D,OAAO,SAAS,CAAC;QACrB,CAAC;QAED,IAAI,OAAO,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC;YACpB,OAAO,CAAC,EAAE,GAAG,UAAU,CAAC;QAC5B,CAAC;QAED,OAAO,OAAO,CAAC,EAAE,CAAC;IACtB,CAAC;;AAGL,yFAAyF;AACzF,yFAAyF;AACzF,yFAAyF;AACzF,oEAAoE;AACpE,cAAc,CAAC,MAAM,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC"}
|
package/dist/index.d.ts
CHANGED
|
@@ -5,8 +5,10 @@ export { UiDialog } from './dialog.js';
|
|
|
5
5
|
export { UiField } from './field.js';
|
|
6
6
|
export { UiIcon, register } from './icon.js';
|
|
7
7
|
export { UiInput, UiTextarea } from './input.js';
|
|
8
|
+
export { UiMenu } from './menu.js';
|
|
8
9
|
export { UiRadio, UiRadioGroup, type RadioOrientation } from './radio.js';
|
|
9
10
|
export { UiSelect } from './select.js';
|
|
11
|
+
export { UiTable } from './table.js';
|
|
10
12
|
export { UiToast, UiToaster, type ToastVariant } from './toast.js';
|
|
11
13
|
export { UiTooltip } from './tooltip.js';
|
|
12
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,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
|
@@ -5,8 +5,10 @@ export { UiDialog } from './dialog.js';
|
|
|
5
5
|
export { UiField } from './field.js';
|
|
6
6
|
export { UiIcon, register } from './icon.js';
|
|
7
7
|
export { UiInput, UiTextarea } from './input.js';
|
|
8
|
+
export { UiMenu } from './menu.js';
|
|
8
9
|
export { UiRadio, UiRadioGroup } from './radio.js';
|
|
9
10
|
export { UiSelect } from './select.js';
|
|
11
|
+
export { UiTable } from './table.js';
|
|
10
12
|
export { UiToast, UiToaster } from './toast.js';
|
|
11
13
|
export { UiTooltip } from './tooltip.js';
|
|
12
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,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/menu.d.ts
ADDED
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
import { LitElement, type TemplateResult } from 'lit';
|
|
2
|
+
/**
|
|
3
|
+
* A menu button: one trigger, one menu, and the ARIA relationship between them.
|
|
4
|
+
*
|
|
5
|
+
* **The trigger is rendered here rather than slotted, which is the opposite of every other
|
|
6
|
+
* component in this kit** — and the reason is the one issue #23 gave: the relationship
|
|
7
|
+
* cannot be miswired by a consumer if the consumer never writes it. `aria-haspopup`,
|
|
8
|
+
* `aria-expanded` and `aria-controls` all live on an element this file owns, pointing at
|
|
9
|
+
* another element this file owns, inside one tree scope where an IDREF resolves.
|
|
10
|
+
*
|
|
11
|
+
* **The items stay yours.** They are native `<button>`s and `<a href>`s in your tree, so
|
|
12
|
+
* activation, the accessible name and the disabled state are the platform's; this file
|
|
13
|
+
* writes `role="menuitem"` and a tabindex on them and nothing else. Containment is what
|
|
14
|
+
* crosses the boundary here — a slotted item really is inside the `role="menu"` panel,
|
|
15
|
+
* which `ARCHITECTURE.md` records under `<ui-toaster>` and which a reference could not do.
|
|
16
|
+
*
|
|
17
|
+
* ## What the platform does, and what is left
|
|
18
|
+
*
|
|
19
|
+
* The panel is `popover="auto"`, and that is most of the pattern. Measured, in this
|
|
20
|
+
* component's own arrangement: it takes the top layer, it light-dismisses on a click
|
|
21
|
+
* elsewhere, and **Escape closes it** — which is where `<ui-tooltip>` had to write a key
|
|
22
|
+
* handler, because a `manual` popover does not. An `auto` popover also closes any other
|
|
23
|
+
* open one, which is right for a menu and was exactly wrong for a tip.
|
|
24
|
+
*
|
|
25
|
+
* What the platform does **not** give, measured in the same run:
|
|
26
|
+
*
|
|
27
|
+
* - **Focus does not come back.** With the trigger in this shadow root and the focus on a
|
|
28
|
+
* slotted item, Escape leaves the focus on `<body>` rather than returning it — the same
|
|
29
|
+
* arrangement in one flat tree does return it. So the return trip is written here, and
|
|
30
|
+
* only where the reader did not choose to go elsewhere: a click outside the menu has
|
|
31
|
+
* already put the focus where it belongs.
|
|
32
|
+
* - **`aria-expanded`, `role` and the tabindex.** An invoker gets no attribute of its own.
|
|
33
|
+
* - **The single tab stop, and the keys inside it.** Every item is a real button, so
|
|
34
|
+
* without a tabindex the menu is a row of tab stops rather than an APG menu.
|
|
35
|
+
*
|
|
36
|
+
* ## Why this did not bring Zag either
|
|
37
|
+
*
|
|
38
|
+
* RFC 0016 adopted Zag for behaviour, `ROADMAP.md` named this component as the nearest
|
|
39
|
+
* candidate, and Zag ships a menu machine — so this is a refusal rather than an absence of
|
|
40
|
+
* an option, and it is the fourth. `ARCHITECTURE.md` carries it; the short form is that the
|
|
41
|
+
* test asks where the **accessible behaviour** is the expensive part, and the measurement
|
|
42
|
+
* above splits it: the layer, the dismissal, Escape and the ordering against other open
|
|
43
|
+
* layers are all the platform's. What is left is a roving tabindex and four keys, which the
|
|
44
|
+
* `<ui-radio-group>` refusal already named as not the trigger.
|
|
45
|
+
*
|
|
46
|
+
* The second reason is the issue's own: Zag's menu positions through `@zag-js/popper`,
|
|
47
|
+
* which is Floating UI. Adopting it would put a second placement in a package whose first
|
|
48
|
+
* one is measured, documented and shared — and *two answers to one problem is one too
|
|
49
|
+
* many* is the issue's sentence, not this file's.
|
|
50
|
+
*
|
|
51
|
+
* @example
|
|
52
|
+
* ```html
|
|
53
|
+
* <ui-menu>
|
|
54
|
+
* <span slot="trigger">Actions</span>
|
|
55
|
+
* <button type="button">Rename</button>
|
|
56
|
+
* <hr />
|
|
57
|
+
* <button type="button" disabled>Delete</button>
|
|
58
|
+
* </ui-menu>
|
|
59
|
+
* ```
|
|
60
|
+
*/
|
|
61
|
+
export declare class UiMenu extends LitElement {
|
|
62
|
+
#private;
|
|
63
|
+
static readonly styles: import("lit").CSSResult;
|
|
64
|
+
static readonly properties: {
|
|
65
|
+
open: {
|
|
66
|
+
type: BooleanConstructor;
|
|
67
|
+
reflect: boolean;
|
|
68
|
+
};
|
|
69
|
+
};
|
|
70
|
+
/**
|
|
71
|
+
* Whether the menu is showing.
|
|
72
|
+
*
|
|
73
|
+
* Reflected, so a host stylesheet can select on it — and so the caret above can turn
|
|
74
|
+
* without this file writing a class. Settable: the platform's own state is the source
|
|
75
|
+
* of truth and {@link UiMenu.updated} reconciles the two, which is the shape
|
|
76
|
+
* `src/dialog.ts` uses and for the same reason.
|
|
77
|
+
*
|
|
78
|
+
* A plain field rather than the `accessor` keyword, for the reason `src/button.ts`
|
|
79
|
+
* states beside its own.
|
|
80
|
+
*/
|
|
81
|
+
open: boolean;
|
|
82
|
+
constructor();
|
|
83
|
+
disconnectedCallback(): void;
|
|
84
|
+
updated(): void;
|
|
85
|
+
render(): TemplateResult;
|
|
86
|
+
}
|
|
87
|
+
declare global {
|
|
88
|
+
interface HTMLElementTagNameMap {
|
|
89
|
+
'ui-menu': UiMenu;
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
//# sourceMappingURL=menu.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../src/menu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AA4DjE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0DG;AACH,qBAAa,MAAO,SAAQ,UAAU;;IAClC,gBAAyB,MAAM,0BAsJ7B;IAEF,gBAAyB,UAAU;;;;;MAEjC;IAEF;;;;;;;;;;OAUG;IACH,IAAI,UAAS;;IAsEJ,oBAAoB,IAAI,IAAI;IAS5B,OAAO,IAAI,IAAI;IA4Bf,MAAM,IAAI,cAAc;CAwNpC;AAQD,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,SAAS,EAAE,MAAM,CAAC;KACrB;CACJ"}
|