@api-client/ui 0.5.32 → 0.5.34
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/build/src/core/ApplicationRoute.d.ts.map +1 -1
- package/build/src/core/ApplicationRoute.js +3 -0
- package/build/src/core/ApplicationRoute.js.map +1 -1
- package/build/src/elements/navigation/internals/Navigation.d.ts +68 -0
- package/build/src/elements/navigation/internals/Navigation.d.ts.map +1 -0
- package/build/src/elements/navigation/internals/Navigation.js +205 -0
- package/build/src/elements/navigation/internals/Navigation.js.map +1 -0
- package/build/src/elements/navigation/internals/Navigation.styles.d.ts +3 -0
- package/build/src/elements/navigation/internals/Navigation.styles.d.ts.map +1 -0
- package/build/src/elements/navigation/internals/Navigation.styles.js +24 -0
- package/build/src/elements/navigation/internals/Navigation.styles.js.map +1 -0
- package/build/src/elements/navigation/internals/NavigationItem.d.ts +62 -2
- package/build/src/elements/navigation/internals/NavigationItem.d.ts.map +1 -1
- package/build/src/elements/navigation/internals/NavigationItem.js +88 -20
- package/build/src/elements/navigation/internals/NavigationItem.js.map +1 -1
- package/build/src/elements/navigation/ui-navigation.d.ts +11 -0
- package/build/src/elements/navigation/ui-navigation.d.ts.map +1 -0
- package/build/src/elements/navigation/ui-navigation.js +27 -0
- package/build/src/elements/navigation/ui-navigation.js.map +1 -0
- package/build/src/md/input/Input.d.ts +2 -0
- package/build/src/md/input/Input.d.ts.map +1 -1
- package/build/src/types/aria.d.ts +28 -0
- package/build/src/types/aria.d.ts.map +1 -0
- package/build/src/types/aria.js +2 -0
- package/build/src/types/aria.js.map +1 -0
- package/build/src/types/role.d.ts +1 -16
- package/build/src/types/role.d.ts.map +1 -1
- package/build/src/types/role.js.map +1 -1
- package/build/test/elements/navigation/Navigation.test.d.ts +3 -0
- package/build/test/elements/navigation/Navigation.test.d.ts.map +1 -0
- package/build/test/elements/navigation/Navigation.test.js +113 -0
- package/build/test/elements/navigation/Navigation.test.js.map +1 -0
- package/demo/elements/index.html +2 -0
- package/demo/elements/navigation/navigation.html +20 -0
- package/demo/elements/navigation/navigation.ts +45 -0
- package/package.json +1 -1
- package/src/core/ApplicationRoute.ts +4 -1
- package/src/elements/navigation/internals/Navigation.styles.ts +24 -0
- package/src/elements/navigation/internals/Navigation.ts +181 -0
- package/src/elements/navigation/internals/NavigationItem.ts +79 -5
- package/src/elements/navigation/ui-navigation.ts +15 -0
- package/src/types/aria.ts +141 -0
- package/src/types/role.ts +1 -129
- package/test/elements/navigation/Navigation.test.ts +120 -0
- package/tsconfig.json +1 -1
|
@@ -1,32 +1,38 @@
|
|
|
1
1
|
import { __esDecorate, __runInitializers } from "tslib";
|
|
2
|
-
import { html } from 'lit';
|
|
2
|
+
import { html, nothing } from 'lit';
|
|
3
3
|
import { property, state } from 'lit/decorators.js';
|
|
4
4
|
import { classMap } from 'lit/directives/class-map.js';
|
|
5
|
+
import { when } from 'lit/directives/when.js';
|
|
5
6
|
import { UiElement } from '../../../md/UiElement.js';
|
|
7
|
+
import { isDisabled, setDisabled } from '../../../lib/disabled.js';
|
|
6
8
|
let NavigationItem = (() => {
|
|
7
9
|
let _classSuper = UiElement;
|
|
8
|
-
let
|
|
9
|
-
let
|
|
10
|
-
let _disabled_extraInitializers = [];
|
|
10
|
+
let _instanceExtraInitializers = [];
|
|
11
|
+
let _set_disabled_decorators;
|
|
11
12
|
let _selected_decorators;
|
|
12
13
|
let _selected_initializers = [];
|
|
13
14
|
let _selected_extraInitializers = [];
|
|
14
15
|
let _iconOnly_decorators;
|
|
15
16
|
let _iconOnly_initializers = [];
|
|
16
17
|
let _iconOnly_extraInitializers = [];
|
|
18
|
+
let _href_decorators;
|
|
19
|
+
let _href_initializers = [];
|
|
20
|
+
let _href_extraInitializers = [];
|
|
17
21
|
let _hasIcon_decorators;
|
|
18
22
|
let _hasIcon_initializers = [];
|
|
19
23
|
let _hasIcon_extraInitializers = [];
|
|
20
24
|
return class NavigationItem extends _classSuper {
|
|
21
25
|
static {
|
|
22
26
|
const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
|
|
23
|
-
|
|
27
|
+
_set_disabled_decorators = [property({ reflect: true, type: Boolean })];
|
|
24
28
|
_selected_decorators = [property({ reflect: true, type: Boolean })];
|
|
25
29
|
_iconOnly_decorators = [property({ reflect: true, type: Boolean })];
|
|
30
|
+
_href_decorators = [property({ reflect: true, type: String })];
|
|
26
31
|
_hasIcon_decorators = [state()];
|
|
27
|
-
__esDecorate(this, null,
|
|
32
|
+
__esDecorate(this, null, _set_disabled_decorators, { kind: "setter", name: "disabled", static: false, private: false, access: { has: obj => "disabled" in obj, set: (obj, value) => { obj.disabled = value; } }, metadata: _metadata }, null, _instanceExtraInitializers);
|
|
28
33
|
__esDecorate(this, null, _selected_decorators, { kind: "accessor", name: "selected", static: false, private: false, access: { has: obj => "selected" in obj, get: obj => obj.selected, set: (obj, value) => { obj.selected = value; } }, metadata: _metadata }, _selected_initializers, _selected_extraInitializers);
|
|
29
34
|
__esDecorate(this, null, _iconOnly_decorators, { kind: "accessor", name: "iconOnly", static: false, private: false, access: { has: obj => "iconOnly" in obj, get: obj => obj.iconOnly, set: (obj, value) => { obj.iconOnly = value; } }, metadata: _metadata }, _iconOnly_initializers, _iconOnly_extraInitializers);
|
|
35
|
+
__esDecorate(this, null, _href_decorators, { kind: "accessor", name: "href", static: false, private: false, access: { has: obj => "href" in obj, get: obj => obj.href, set: (obj, value) => { obj.href = value; } }, metadata: _metadata }, _href_initializers, _href_extraInitializers);
|
|
30
36
|
__esDecorate(this, null, _hasIcon_decorators, { kind: "accessor", name: "hasIcon", static: false, private: false, access: { has: obj => "hasIcon" in obj, get: obj => obj.hasIcon, set: (obj, value) => { obj.hasIcon = value; } }, metadata: _metadata }, _hasIcon_initializers, _hasIcon_extraInitializers);
|
|
31
37
|
if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
|
|
32
38
|
}
|
|
@@ -34,19 +40,19 @@ let NavigationItem = (() => {
|
|
|
34
40
|
mode: 'open',
|
|
35
41
|
delegatesFocus: true,
|
|
36
42
|
};
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
* @attribute
|
|
41
|
-
*/
|
|
42
|
-
);
|
|
43
|
+
get disabled() {
|
|
44
|
+
return isDisabled(this);
|
|
45
|
+
}
|
|
43
46
|
/**
|
|
44
|
-
* When set, the
|
|
47
|
+
* When set, the navigation item is in a disabled state.
|
|
45
48
|
* @attribute
|
|
46
49
|
*/
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
+
set disabled(value) {
|
|
51
|
+
const old = isDisabled(this);
|
|
52
|
+
setDisabled(this, value);
|
|
53
|
+
this.requestUpdate('disabled', old);
|
|
54
|
+
}
|
|
55
|
+
#selected_accessor_storage = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _selected_initializers, false
|
|
50
56
|
/**
|
|
51
57
|
* When set, the navigation item is rendered as an icon-only button.
|
|
52
58
|
* The width of the button is set to 40px.
|
|
@@ -61,7 +67,8 @@ let NavigationItem = (() => {
|
|
|
61
67
|
set selected(value) { this.#selected_accessor_storage = value; }
|
|
62
68
|
#iconOnly_accessor_storage = (__runInitializers(this, _selected_extraInitializers), __runInitializers(this, _iconOnly_initializers, false
|
|
63
69
|
/**
|
|
64
|
-
*
|
|
70
|
+
* The reference of the navigation item to the target.
|
|
71
|
+
* @attribute
|
|
65
72
|
*/
|
|
66
73
|
));
|
|
67
74
|
/**
|
|
@@ -71,7 +78,14 @@ let NavigationItem = (() => {
|
|
|
71
78
|
*/
|
|
72
79
|
get iconOnly() { return this.#iconOnly_accessor_storage; }
|
|
73
80
|
set iconOnly(value) { this.#iconOnly_accessor_storage = value; }
|
|
74
|
-
#
|
|
81
|
+
#href_accessor_storage = (__runInitializers(this, _iconOnly_extraInitializers), __runInitializers(this, _href_initializers, void 0));
|
|
82
|
+
/**
|
|
83
|
+
* The reference of the navigation item to the target.
|
|
84
|
+
* @attribute
|
|
85
|
+
*/
|
|
86
|
+
get href() { return this.#href_accessor_storage; }
|
|
87
|
+
set href(value) { this.#href_accessor_storage = value; }
|
|
88
|
+
#hasIcon_accessor_storage = (__runInitializers(this, _href_extraInitializers), __runInitializers(this, _hasIcon_initializers, false
|
|
75
89
|
/**
|
|
76
90
|
* Sets the `_hasIcon` state property when the "icon" slot change event is dispatched.
|
|
77
91
|
*/
|
|
@@ -97,10 +111,10 @@ let NavigationItem = (() => {
|
|
|
97
111
|
'icon-only': this.iconOnly,
|
|
98
112
|
});
|
|
99
113
|
return html `
|
|
100
|
-
<button class="${containerClasses}" id="button">
|
|
114
|
+
<button class="${containerClasses}" id="button" ?disabled="${this.disabled}" aria-disabled="${this.disabled}">
|
|
101
115
|
<md-focus-ring part="focus-ring" for="button"></md-focus-ring>
|
|
102
116
|
<md-ripple></md-ripple>
|
|
103
|
-
${this.renderIcon()}${this.iconOnly
|
|
117
|
+
${this.renderIcon()}${when(this.iconOnly, () => nothing, () => html `<slot></slot>`)}
|
|
104
118
|
</button>
|
|
105
119
|
`;
|
|
106
120
|
}
|
|
@@ -115,5 +129,59 @@ let NavigationItem = (() => {
|
|
|
115
129
|
}
|
|
116
130
|
};
|
|
117
131
|
})();
|
|
132
|
+
/**
|
|
133
|
+
* NavigationItem
|
|
134
|
+
*
|
|
135
|
+
* An element to be placed inside a navigation bar. This component is designed for use with navigation bars and supports
|
|
136
|
+
* icon-only, selected, and disabled states. It is built with accessibility and composability in mind.
|
|
137
|
+
*
|
|
138
|
+
* ## Accessibility
|
|
139
|
+
*
|
|
140
|
+
* - Uses a native `<button>` element for proper semantics and keyboard accessibility.
|
|
141
|
+
* - The icon is marked with `role="presentation"` to indicate it is decorative.
|
|
142
|
+
* - Focus ring and ripple effects are included for visual feedback.
|
|
143
|
+
*
|
|
144
|
+
* ## Usage Example
|
|
145
|
+
*
|
|
146
|
+
* ### Accessible Navigation Example
|
|
147
|
+
*
|
|
148
|
+
* ```html
|
|
149
|
+
* <nav aria-label="Main navigation">
|
|
150
|
+
* <ul style="display: flex; gap: 8px; list-style: none; padding: 0; margin: 0;">
|
|
151
|
+
* <li>
|
|
152
|
+
* <navigation-item selected aria-current="page">
|
|
153
|
+
* <span slot="icon" aria-hidden="true">🏠</span>
|
|
154
|
+
* Home
|
|
155
|
+
* </navigation-item>
|
|
156
|
+
* </li>
|
|
157
|
+
* <li>
|
|
158
|
+
* <navigation-item>
|
|
159
|
+
* <span slot="icon" aria-hidden="true">🔍</span>
|
|
160
|
+
* Search
|
|
161
|
+
* </navigation-item>
|
|
162
|
+
* </li>
|
|
163
|
+
* <li>
|
|
164
|
+
* <navigation-item>
|
|
165
|
+
* <span slot="icon" aria-hidden="true">📁</span>
|
|
166
|
+
* Files
|
|
167
|
+
* </navigation-item>
|
|
168
|
+
* </li>
|
|
169
|
+
* <li>
|
|
170
|
+
* <navigation-item iconOnly disabled aria-disabled="true" tabindex="-1">
|
|
171
|
+
* <span slot="icon" aria-hidden="true">⚙️</span>
|
|
172
|
+
* </navigation-item>
|
|
173
|
+
* </li>
|
|
174
|
+
* </ul>
|
|
175
|
+
* </nav>
|
|
176
|
+
* ```
|
|
177
|
+
*
|
|
178
|
+
* This example demonstrates a horizontal navigation bar using semantic HTML. Each `navigation-item`
|
|
179
|
+
* is placed inside a list item for proper structure. The `aria-current="page"` attribute marks the current
|
|
180
|
+
* page, and `aria-disabled="true"` with `tabindex="-1"` ensures the disabled item is not focusable.
|
|
181
|
+
* Icons use `aria-hidden="true"` for accessibility.
|
|
182
|
+
*
|
|
183
|
+
* @slot icon - A slot for the icon element
|
|
184
|
+
* @slot - The default slot for the label
|
|
185
|
+
*/
|
|
118
186
|
export default NavigationItem;
|
|
119
187
|
//# sourceMappingURL=NavigationItem.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NavigationItem.js","sourceRoot":"","sources":["../../../../../src/elements/navigation/internals/NavigationItem.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;
|
|
1
|
+
{"version":3,"file":"NavigationItem.js","sourceRoot":"","sources":["../../../../../src/elements/navigation/internals/NavigationItem.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, TemplateResult, nothing } from 'lit'\nimport { property, state } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { when } from 'lit/directives/when.js'\nimport { UiElement } from '../../../md/UiElement.js'\nimport { isDisabled, setDisabled } from '../../../lib/disabled.js'\n\n/**\n * NavigationItem\n *\n * An element to be placed inside a navigation bar. This component is designed for use with navigation bars and supports\n * icon-only, selected, and disabled states. It is built with accessibility and composability in mind.\n *\n * ## Accessibility\n *\n * - Uses a native `<button>` element for proper semantics and keyboard accessibility.\n * - The icon is marked with `role=\"presentation\"` to indicate it is decorative.\n * - Focus ring and ripple effects are included for visual feedback.\n *\n * ## Usage Example\n *\n * ### Accessible Navigation Example\n *\n * ```html\n * <nav aria-label=\"Main navigation\">\n * <ul style=\"display: flex; gap: 8px; list-style: none; padding: 0; margin: 0;\">\n * <li>\n * <navigation-item selected aria-current=\"page\">\n * <span slot=\"icon\" aria-hidden=\"true\">🏠</span>\n * Home\n * </navigation-item>\n * </li>\n * <li>\n * <navigation-item>\n * <span slot=\"icon\" aria-hidden=\"true\">🔍</span>\n * Search\n * </navigation-item>\n * </li>\n * <li>\n * <navigation-item>\n * <span slot=\"icon\" aria-hidden=\"true\">📁</span>\n * Files\n * </navigation-item>\n * </li>\n * <li>\n * <navigation-item iconOnly disabled aria-disabled=\"true\" tabindex=\"-1\">\n * <span slot=\"icon\" aria-hidden=\"true\">⚙️</span>\n * </navigation-item>\n * </li>\n * </ul>\n * </nav>\n * ```\n *\n * This example demonstrates a horizontal navigation bar using semantic HTML. Each `navigation-item`\n * is placed inside a list item for proper structure. The `aria-current=\"page\"` attribute marks the current\n * page, and `aria-disabled=\"true\"` with `tabindex=\"-1\"` ensures the disabled item is not focusable.\n * Icons use `aria-hidden=\"true\"` for accessibility.\n *\n * @slot icon - A slot for the icon element\n * @slot - The default slot for the label\n */\nexport default class NavigationItem extends UiElement {\n static override shadowRootOptions: ShadowRootInit = {\n mode: 'open',\n delegatesFocus: true,\n }\n\n get disabled(): boolean {\n return isDisabled(this)\n }\n\n /**\n * When set, the navigation item is in a disabled state.\n * @attribute\n */\n @property({ reflect: true, type: Boolean })\n set disabled(value: boolean) {\n const old = isDisabled(this)\n setDisabled(this, value)\n this.requestUpdate('disabled', old)\n }\n\n /**\n * Whether the navigation item is selected.\n * @attribute\n */\n @property({ reflect: true, type: Boolean }) accessor selected = false\n /**\n * When set, the navigation item is rendered as an icon-only button.\n * The width of the button is set to 40px.\n * @attribute\n */\n @property({ reflect: true, type: Boolean }) accessor iconOnly = false\n /**\n * The reference of the navigation item to the target.\n * @attribute\n */\n @property({ reflect: true, type: String }) accessor href: string | undefined\n\n /**\n * Determines when the element has an icon in the \"icon\" slot.\n */\n @state() protected accessor hasIcon = false\n\n /**\n * Sets the `_hasIcon` state property when the \"icon\" slot change event is dispatched.\n */\n protected handleIconSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement\n this.hasIcon = !!slot.assignedNodes().length\n }\n\n protected override render(): TemplateResult {\n const { pressed = false } = this\n const containerClasses = classMap({\n 'button': true,\n 'with-icon': this.hasIcon,\n 'pressed': pressed,\n 'icon-only': this.iconOnly,\n })\n return html`\n <button class=\"${containerClasses}\" id=\"button\" ?disabled=\"${this.disabled}\" aria-disabled=\"${this.disabled}\">\n <md-focus-ring part=\"focus-ring\" for=\"button\"></md-focus-ring>\n <md-ripple></md-ripple>\n ${this.renderIcon()}${when(\n this.iconOnly,\n () => nothing,\n () => html`<slot></slot>`\n )}\n </button>\n `\n }\n\n protected renderIcon(): TemplateResult {\n return html`<span role=\"presentation\" class=\"icon\"\n ><slot name=\"icon\" @slotchange=\"${this.handleIconSlotChange}\"></slot\n ></span>`\n }\n}\n"]}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { CSSResultOrNative } from 'lit';
|
|
2
|
+
import Element from './internals/Navigation.js';
|
|
3
|
+
export declare class NavigationListElement extends Element {
|
|
4
|
+
static styles: CSSResultOrNative[];
|
|
5
|
+
}
|
|
6
|
+
declare global {
|
|
7
|
+
interface HTMLElementTagNameMap {
|
|
8
|
+
'ui-navigation': NavigationListElement;
|
|
9
|
+
}
|
|
10
|
+
}
|
|
11
|
+
//# sourceMappingURL=ui-navigation.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ui-navigation.d.ts","sourceRoot":"","sources":["../../../../src/elements/navigation/ui-navigation.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,KAAK,CAAA;AAE5C,OAAO,OAAO,MAAM,2BAA2B,CAAA;AAG/C,qBACa,qBAAsB,SAAQ,OAAO;IAChD,OAAgB,MAAM,EAAE,iBAAiB,EAAE,CAAW;CACvD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,qBAAqB,CAAA;KACvC;CACF"}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { __esDecorate, __runInitializers } from "tslib";
|
|
2
|
+
import { customElement } from 'lit/decorators.js';
|
|
3
|
+
import Element from './internals/Navigation.js';
|
|
4
|
+
import styles from './internals/Navigation.styles.js';
|
|
5
|
+
let NavigationListElement = (() => {
|
|
6
|
+
let _classDecorators = [customElement('ui-navigation')];
|
|
7
|
+
let _classDescriptor;
|
|
8
|
+
let _classExtraInitializers = [];
|
|
9
|
+
let _classThis;
|
|
10
|
+
let _classSuper = Element;
|
|
11
|
+
var NavigationListElement = class extends _classSuper {
|
|
12
|
+
static { _classThis = this; }
|
|
13
|
+
static {
|
|
14
|
+
const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
|
|
15
|
+
__esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
|
|
16
|
+
NavigationListElement = _classThis = _classDescriptor.value;
|
|
17
|
+
if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
|
|
18
|
+
}
|
|
19
|
+
static styles = [styles];
|
|
20
|
+
static {
|
|
21
|
+
__runInitializers(_classThis, _classExtraInitializers);
|
|
22
|
+
}
|
|
23
|
+
};
|
|
24
|
+
return NavigationListElement = _classThis;
|
|
25
|
+
})();
|
|
26
|
+
export { NavigationListElement };
|
|
27
|
+
//# sourceMappingURL=ui-navigation.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ui-navigation.js","sourceRoot":"","sources":["../../../../src/elements/navigation/ui-navigation.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AACjD,OAAO,OAAO,MAAM,2BAA2B,CAAA;AAC/C,OAAO,MAAM,MAAM,kCAAkC,CAAA;IAGxC,qBAAqB;4BADjC,aAAa,CAAC,eAAe,CAAC;;;;sBACY,OAAO;qCAAf,SAAQ,WAAO;;;;YAAlD,6KAEC;;;;QADC,MAAM,CAAU,MAAM,GAAwB,CAAC,MAAM,CAAC,CAAA;;YAD3C,uDAAqB;;;;;SAArB,qBAAqB","sourcesContent":["import type { CSSResultOrNative } from 'lit'\nimport { customElement } from 'lit/decorators.js'\nimport Element from './internals/Navigation.js'\nimport styles from './internals/Navigation.styles.js'\n\n@customElement('ui-navigation')\nexport class NavigationListElement extends Element {\n static override styles: CSSResultOrNative[] = [styles]\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ui-navigation': NavigationListElement\n }\n}\n"]}
|
|
@@ -15,6 +15,8 @@ export default abstract class Input extends UiElement {
|
|
|
15
15
|
mode: ShadowRootMode;
|
|
16
16
|
serializable?: boolean;
|
|
17
17
|
slotAssignment?: SlotAssignmentMode;
|
|
18
|
+
customElements?: CustomElementRegistry;
|
|
19
|
+
registry?: CustomElementRegistry;
|
|
18
20
|
};
|
|
19
21
|
static readonly formAssociated = true;
|
|
20
22
|
get form(): HTMLFormElement | null;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../../src/md/input/Input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAA;AAI/E,OAAO,EAAE,uBAAuB,EAAE,qBAAqB,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAA;AAC1G,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAA;AAC9E,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAE3C,OAAO,kCAAkC,CAAA;AACzC,OAAO,qBAAqB,CAAA;AAI5B;;;GAGG;AACH,MAAM,CAAC,OAAO,CAAC,QAAQ,OAAO,KAAM,SAAQ,SAAS;;IACnD,OAAgB,iBAAiB
|
|
1
|
+
{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../../src/md/input/Input.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* - `page` - Represents the current page within a set of pages.
|
|
3
|
+
* - `step` - Represents the current step within a process.
|
|
4
|
+
* - `location` - Represents the current location, for example the current page in a breadcrumbs hierarchy.
|
|
5
|
+
* - `date` - Represents the current date within a collection of dates.
|
|
6
|
+
* - `time` - Represents the current time within a set of times.
|
|
7
|
+
* - `true` - Represents the current item within a set.
|
|
8
|
+
* - `false` - Does not represent the current item within a set.
|
|
9
|
+
* - `''` - No current state.
|
|
10
|
+
*/
|
|
11
|
+
export type AriaCurrent = 'page' | 'step' | 'location' | 'date' | 'time' | 'true' | 'false' | '';
|
|
12
|
+
/**
|
|
13
|
+
* Valid values for `aria-expanded`.
|
|
14
|
+
*/
|
|
15
|
+
export type ARIAAutoComplete = 'none' | 'inline' | 'list' | 'both';
|
|
16
|
+
/**
|
|
17
|
+
* Valid values for `aria-expanded`.
|
|
18
|
+
*/
|
|
19
|
+
export type ARIAExpanded = 'true' | 'false';
|
|
20
|
+
/**
|
|
21
|
+
* Valid values for `aria-haspopup`.
|
|
22
|
+
*/
|
|
23
|
+
export type ARIAHasPopup = 'false' | 'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';
|
|
24
|
+
/**
|
|
25
|
+
* Valid values for `role`.
|
|
26
|
+
*/
|
|
27
|
+
export type ARIARole = 'alert' | 'alertdialog' | 'button' | 'checkbox' | 'dialog' | 'gridcell' | 'link' | 'log' | 'marquee' | 'menuitem' | 'menuitemcheckbox' | 'menuitemradio' | 'option' | 'progressbar' | 'radio' | 'scrollbar' | 'searchbox' | 'slider' | 'spinbutton' | 'status' | 'switch' | 'tab' | 'tabpanel' | 'textbox' | 'timer' | 'tooltip' | 'treeitem' | 'combobox' | 'grid' | 'listbox' | 'menu' | 'menubar' | 'radiogroup' | 'tablist' | 'tree' | 'treegrid' | 'application' | 'article' | 'cell' | 'columnheader' | 'definition' | 'directory' | 'document' | 'feed' | 'figure' | 'group' | 'heading' | 'img' | 'list' | 'listitem' | 'math' | 'none' | 'note' | 'presentation' | 'region' | 'row' | 'rowgroup' | 'rowheader' | 'separator' | 'table' | 'term' | 'text' | 'toolbar' | 'banner' | 'complementary' | 'contentinfo' | 'form' | 'main' | 'navigation' | 'region' | 'search' | 'doc-abstract' | 'doc-acknowledgments' | 'doc-afterword' | 'doc-appendix' | 'doc-backlink' | 'doc-biblioentry' | 'doc-bibliography' | 'doc-biblioref' | 'doc-chapter' | 'doc-colophon' | 'doc-conclusion' | 'doc-cover' | 'doc-credit' | 'doc-credits' | 'doc-dedication' | 'doc-endnote' | 'doc-endnotes' | 'doc-epigraph' | 'doc-epilogue' | 'doc-errata' | 'doc-example' | 'doc-footnote' | 'doc-foreword' | 'doc-glossary' | 'doc-glossref' | 'doc-index' | 'doc-introduction' | 'doc-noteref' | 'doc-notice' | 'doc-pagebreak' | 'doc-pagelist' | 'doc-part' | 'doc-preface' | 'doc-prologue' | 'doc-pullquote' | 'doc-qna' | 'doc-subtitle' | 'doc-tip' | 'doc-toc';
|
|
28
|
+
//# sourceMappingURL=aria.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"aria.d.ts","sourceRoot":"","sources":["../../../src/types/aria.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,EAAE,CAAA;AAEhG;;GAEG;AACH,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAA;AAElE;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,OAAO,CAAA;AAE3C;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,QAAQ,CAAA;AAE7F;;GAEG;AACH,MAAM,MAAM,QAAQ,GAChB,OAAO,GACP,aAAa,GACb,QAAQ,GACR,UAAU,GACV,QAAQ,GACR,UAAU,GACV,MAAM,GACN,KAAK,GACL,SAAS,GACT,UAAU,GACV,kBAAkB,GAClB,eAAe,GACf,QAAQ,GACR,aAAa,GACb,OAAO,GACP,WAAW,GACX,WAAW,GACX,QAAQ,GACR,YAAY,GACZ,QAAQ,GACR,QAAQ,GACR,KAAK,GACL,UAAU,GACV,SAAS,GACT,OAAO,GACP,SAAS,GACT,UAAU,GACV,UAAU,GACV,MAAM,GACN,SAAS,GACT,MAAM,GACN,SAAS,GACT,YAAY,GACZ,SAAS,GACT,MAAM,GACN,UAAU,GACV,aAAa,GACb,SAAS,GACT,MAAM,GACN,cAAc,GACd,YAAY,GACZ,WAAW,GACX,UAAU,GACV,MAAM,GACN,QAAQ,GACR,OAAO,GACP,SAAS,GACT,KAAK,GACL,MAAM,GACN,UAAU,GACV,MAAM,GACN,MAAM,GACN,MAAM,GACN,cAAc,GACd,QAAQ,GACR,KAAK,GACL,UAAU,GACV,WAAW,GACX,WAAW,GACX,OAAO,GACP,MAAM,GACN,MAAM,GACN,SAAS,GACT,QAAQ,GACR,eAAe,GACf,aAAa,GACb,MAAM,GACN,MAAM,GACN,YAAY,GACZ,QAAQ,GACR,QAAQ,GACR,cAAc,GACd,qBAAqB,GACrB,eAAe,GACf,cAAc,GACd,cAAc,GACd,iBAAiB,GACjB,kBAAkB,GAClB,eAAe,GACf,aAAa,GACb,cAAc,GACd,gBAAgB,GAChB,WAAW,GACX,YAAY,GACZ,aAAa,GACb,gBAAgB,GAChB,aAAa,GACb,cAAc,GACd,cAAc,GACd,cAAc,GACd,YAAY,GACZ,aAAa,GACb,cAAc,GACd,cAAc,GACd,cAAc,GACd,cAAc,GACd,WAAW,GACX,kBAAkB,GAClB,aAAa,GACb,YAAY,GACZ,eAAe,GACf,cAAc,GACd,UAAU,GACV,aAAa,GACb,cAAc,GACd,eAAe,GACf,SAAS,GACT,cAAc,GACd,SAAS,GACT,SAAS,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"aria.js","sourceRoot":"","sources":["../../../src/types/aria.ts"],"names":[],"mappings":"","sourcesContent":["/**\n * - `page` - Represents the current page within a set of pages.\n * - `step` - Represents the current step within a process.\n * - `location` - Represents the current location, for example the current page in a breadcrumbs hierarchy.\n * - `date` - Represents the current date within a collection of dates.\n * - `time` - Represents the current time within a set of times.\n * - `true` - Represents the current item within a set.\n * - `false` - Does not represent the current item within a set.\n * - `''` - No current state.\n */\nexport type AriaCurrent = 'page' | 'step' | 'location' | 'date' | 'time' | 'true' | 'false' | ''\n\n/**\n * Valid values for `aria-expanded`.\n */\nexport type ARIAAutoComplete = 'none' | 'inline' | 'list' | 'both'\n\n/**\n * Valid values for `aria-expanded`.\n */\nexport type ARIAExpanded = 'true' | 'false'\n\n/**\n * Valid values for `aria-haspopup`.\n */\nexport type ARIAHasPopup = 'false' | 'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog'\n\n/**\n * Valid values for `role`.\n */\nexport type ARIARole =\n | 'alert'\n | 'alertdialog'\n | 'button'\n | 'checkbox'\n | 'dialog'\n | 'gridcell'\n | 'link'\n | 'log'\n | 'marquee'\n | 'menuitem'\n | 'menuitemcheckbox'\n | 'menuitemradio'\n | 'option'\n | 'progressbar'\n | 'radio'\n | 'scrollbar'\n | 'searchbox'\n | 'slider'\n | 'spinbutton'\n | 'status'\n | 'switch'\n | 'tab'\n | 'tabpanel'\n | 'textbox'\n | 'timer'\n | 'tooltip'\n | 'treeitem'\n | 'combobox'\n | 'grid'\n | 'listbox'\n | 'menu'\n | 'menubar'\n | 'radiogroup'\n | 'tablist'\n | 'tree'\n | 'treegrid'\n | 'application'\n | 'article'\n | 'cell'\n | 'columnheader'\n | 'definition'\n | 'directory'\n | 'document'\n | 'feed'\n | 'figure'\n | 'group'\n | 'heading'\n | 'img'\n | 'list'\n | 'listitem'\n | 'math'\n | 'none'\n | 'note'\n | 'presentation'\n | 'region'\n | 'row'\n | 'rowgroup'\n | 'rowheader'\n | 'separator'\n | 'table'\n | 'term'\n | 'text'\n | 'toolbar'\n | 'banner'\n | 'complementary'\n | 'contentinfo'\n | 'form'\n | 'main'\n | 'navigation'\n | 'region'\n | 'search'\n | 'doc-abstract'\n | 'doc-acknowledgments'\n | 'doc-afterword'\n | 'doc-appendix'\n | 'doc-backlink'\n | 'doc-biblioentry'\n | 'doc-bibliography'\n | 'doc-biblioref'\n | 'doc-chapter'\n | 'doc-colophon'\n | 'doc-conclusion'\n | 'doc-cover'\n | 'doc-credit'\n | 'doc-credits'\n | 'doc-dedication'\n | 'doc-endnote'\n | 'doc-endnotes'\n | 'doc-epigraph'\n | 'doc-epilogue'\n | 'doc-errata'\n | 'doc-example'\n | 'doc-footnote'\n | 'doc-foreword'\n | 'doc-glossary'\n | 'doc-glossref'\n | 'doc-index'\n | 'doc-introduction'\n | 'doc-noteref'\n | 'doc-notice'\n | 'doc-pagebreak'\n | 'doc-pagelist'\n | 'doc-part'\n | 'doc-preface'\n | 'doc-prologue'\n | 'doc-pullquote'\n | 'doc-qna'\n | 'doc-subtitle'\n | 'doc-tip'\n | 'doc-toc'\n"]}
|
|
@@ -1,17 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
* Valid values for `aria-expanded`.
|
|
3
|
-
*/
|
|
4
|
-
export type ARIAAutoComplete = 'none' | 'inline' | 'list' | 'both';
|
|
5
|
-
/**
|
|
6
|
-
* Valid values for `aria-expanded`.
|
|
7
|
-
*/
|
|
8
|
-
export type ARIAExpanded = 'true' | 'false';
|
|
9
|
-
/**
|
|
10
|
-
* Valid values for `aria-haspopup`.
|
|
11
|
-
*/
|
|
12
|
-
export type ARIAHasPopup = 'false' | 'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';
|
|
13
|
-
/**
|
|
14
|
-
* Valid values for `role`.
|
|
15
|
-
*/
|
|
16
|
-
export type ARIARole = 'alert' | 'alertdialog' | 'button' | 'checkbox' | 'dialog' | 'gridcell' | 'link' | 'log' | 'marquee' | 'menuitem' | 'menuitemcheckbox' | 'menuitemradio' | 'option' | 'progressbar' | 'radio' | 'scrollbar' | 'searchbox' | 'slider' | 'spinbutton' | 'status' | 'switch' | 'tab' | 'tabpanel' | 'textbox' | 'timer' | 'tooltip' | 'treeitem' | 'combobox' | 'grid' | 'listbox' | 'menu' | 'menubar' | 'radiogroup' | 'tablist' | 'tree' | 'treegrid' | 'application' | 'article' | 'cell' | 'columnheader' | 'definition' | 'directory' | 'document' | 'feed' | 'figure' | 'group' | 'heading' | 'img' | 'list' | 'listitem' | 'math' | 'none' | 'note' | 'presentation' | 'region' | 'row' | 'rowgroup' | 'rowheader' | 'separator' | 'table' | 'term' | 'text' | 'toolbar' | 'banner' | 'complementary' | 'contentinfo' | 'form' | 'main' | 'navigation' | 'region' | 'search' | 'doc-abstract' | 'doc-acknowledgments' | 'doc-afterword' | 'doc-appendix' | 'doc-backlink' | 'doc-biblioentry' | 'doc-bibliography' | 'doc-biblioref' | 'doc-chapter' | 'doc-colophon' | 'doc-conclusion' | 'doc-cover' | 'doc-credit' | 'doc-credits' | 'doc-dedication' | 'doc-endnote' | 'doc-endnotes' | 'doc-epigraph' | 'doc-epilogue' | 'doc-errata' | 'doc-example' | 'doc-footnote' | 'doc-foreword' | 'doc-glossary' | 'doc-glossref' | 'doc-index' | 'doc-introduction' | 'doc-noteref' | 'doc-notice' | 'doc-pagebreak' | 'doc-pagelist' | 'doc-part' | 'doc-preface' | 'doc-prologue' | 'doc-pullquote' | 'doc-qna' | 'doc-subtitle' | 'doc-tip' | 'doc-toc';
|
|
1
|
+
export { ARIAAutoComplete, ARIAExpanded, ARIAHasPopup, ARIARole } from './aria.js';
|
|
17
2
|
//# sourceMappingURL=role.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"role.d.ts","sourceRoot":"","sources":["../../../src/types/role.ts"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"role.d.ts","sourceRoot":"","sources":["../../../src/types/role.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"role.js","sourceRoot":"","sources":["../../../src/types/role.ts"],"names":[],"mappings":"","sourcesContent":["
|
|
1
|
+
{"version":3,"file":"role.js","sourceRoot":"","sources":["../../../src/types/role.ts"],"names":[],"mappings":"","sourcesContent":["export { ARIAAutoComplete, ARIAExpanded, ARIAHasPopup, ARIARole } from './aria.js'\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Navigation.test.d.ts","sourceRoot":"","sources":["../../../../test/elements/navigation/Navigation.test.ts"],"names":[],"mappings":"AAEA,OAAO,mDAAmD,CAAA;AAC1D,OAAO,wDAAwD,CAAA"}
|
|
@@ -0,0 +1,113 @@
|
|
|
1
|
+
import { html, fixture, assert, oneEvent, aTimeout } from '@open-wc/testing';
|
|
2
|
+
import '../../../src/elements/navigation/ui-navigation.js';
|
|
3
|
+
import '../../../src/elements/navigation/ui-navigation-item.js';
|
|
4
|
+
describe('Navigation', () => {
|
|
5
|
+
it('renders with slot content', async () => {
|
|
6
|
+
const el = await fixture(html `
|
|
7
|
+
<ui-navigation aria-label="Main navigation">
|
|
8
|
+
<ui-navigation-item selected aria-current="page">Home</ui-navigation-item>
|
|
9
|
+
<ui-navigation-item>Search</ui-navigation-item>
|
|
10
|
+
<ui-navigation-item>Files</ui-navigation-item>
|
|
11
|
+
</ui-navigation>
|
|
12
|
+
`);
|
|
13
|
+
const nav = el.shadowRoot.querySelector('nav');
|
|
14
|
+
assert.ok(nav, 'nav element is rendered');
|
|
15
|
+
assert.equal(nav?.getAttribute('aria-label'), 'Main navigation');
|
|
16
|
+
const items = el._items;
|
|
17
|
+
assert.equal(items.length, 3);
|
|
18
|
+
assert.isTrue(items[0].selected);
|
|
19
|
+
assert.equal(items[0].getAttribute('aria-current'), 'page');
|
|
20
|
+
});
|
|
21
|
+
it('sets correct tabindex for items', async () => {
|
|
22
|
+
const el = await fixture(html `
|
|
23
|
+
<ui-navigation>
|
|
24
|
+
<ui-navigation-item selected>Home</ui-navigation-item>
|
|
25
|
+
<ui-navigation-item>Search</ui-navigation-item>
|
|
26
|
+
</ui-navigation>
|
|
27
|
+
`);
|
|
28
|
+
const items = el._items;
|
|
29
|
+
assert.equal(items[0].getAttribute('tabindex'), '0');
|
|
30
|
+
assert.equal(items[1].getAttribute('tabindex'), '-1');
|
|
31
|
+
});
|
|
32
|
+
it('selects item on click and fires select event', async () => {
|
|
33
|
+
const el = await fixture(html `
|
|
34
|
+
<ui-navigation>
|
|
35
|
+
<ui-navigation-item>Home</ui-navigation-item>
|
|
36
|
+
<ui-navigation-item>Search</ui-navigation-item>
|
|
37
|
+
</ui-navigation>
|
|
38
|
+
`);
|
|
39
|
+
const items = el._items;
|
|
40
|
+
setTimeout(() => items[1].click());
|
|
41
|
+
const ev = await oneEvent(el, 'select');
|
|
42
|
+
assert.equal(ev.detail.item, items[1]);
|
|
43
|
+
assert.isTrue(items[1].selected);
|
|
44
|
+
assert.equal(items[1].getAttribute('tabindex'), '0');
|
|
45
|
+
assert.isFalse(items[0].selected);
|
|
46
|
+
assert.equal(items[0].getAttribute('tabindex'), '-1');
|
|
47
|
+
});
|
|
48
|
+
it('handles keyboard navigation (vertical)', async () => {
|
|
49
|
+
const el = await fixture(html `
|
|
50
|
+
<ui-navigation>
|
|
51
|
+
<ui-navigation-item>Home</ui-navigation-item>
|
|
52
|
+
<ui-navigation-item>Search</ui-navigation-item>
|
|
53
|
+
<ui-navigation-item>Files</ui-navigation-item>
|
|
54
|
+
</ui-navigation>
|
|
55
|
+
`);
|
|
56
|
+
const items = el._items;
|
|
57
|
+
items[0].focus();
|
|
58
|
+
// ArrowDown moves to next
|
|
59
|
+
items[0].dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }));
|
|
60
|
+
await aTimeout(0);
|
|
61
|
+
assert.dom.equal(document.activeElement, items[1]);
|
|
62
|
+
// ArrowUp wraps to last
|
|
63
|
+
items[1].dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp', bubbles: true }));
|
|
64
|
+
await aTimeout(0);
|
|
65
|
+
assert.dom.equal(document.activeElement, items[0]);
|
|
66
|
+
});
|
|
67
|
+
it('handles keyboard navigation (horizontal)', async () => {
|
|
68
|
+
const el = await fixture(html `
|
|
69
|
+
<ui-navigation orientation="horizontal">
|
|
70
|
+
<ui-navigation-item>Home</ui-navigation-item>
|
|
71
|
+
<ui-navigation-item>Search</ui-navigation-item>
|
|
72
|
+
</ui-navigation>
|
|
73
|
+
`);
|
|
74
|
+
const items = el._items;
|
|
75
|
+
items[0].focus();
|
|
76
|
+
items[0].dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true }));
|
|
77
|
+
await aTimeout(0);
|
|
78
|
+
assert.dom.equal(document.activeElement, items[1]);
|
|
79
|
+
items[1].dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft', bubbles: true }));
|
|
80
|
+
await aTimeout(0);
|
|
81
|
+
assert.dom.equal(document.activeElement, items[0]);
|
|
82
|
+
});
|
|
83
|
+
it('skips disabled items in navigation', async () => {
|
|
84
|
+
const el = await fixture(html `
|
|
85
|
+
<ui-navigation>
|
|
86
|
+
<ui-navigation-item>Home</ui-navigation-item>
|
|
87
|
+
<ui-navigation-item disabled>Search</ui-navigation-item>
|
|
88
|
+
<ui-navigation-item>Files</ui-navigation-item>
|
|
89
|
+
</ui-navigation>
|
|
90
|
+
`);
|
|
91
|
+
const items = el._items;
|
|
92
|
+
items[0].focus();
|
|
93
|
+
items[0].dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }));
|
|
94
|
+
await aTimeout(0);
|
|
95
|
+
// Should skip disabled and go to Files
|
|
96
|
+
assert.dom.equal(document.activeElement, items[2]);
|
|
97
|
+
});
|
|
98
|
+
it('sets aria-current on selected item if current is set', async () => {
|
|
99
|
+
const el = await fixture(html `
|
|
100
|
+
<ui-navigation current="page">
|
|
101
|
+
<ui-navigation-item>Home</ui-navigation-item>
|
|
102
|
+
<ui-navigation-item>Search</ui-navigation-item>
|
|
103
|
+
</ui-navigation>
|
|
104
|
+
`);
|
|
105
|
+
const items = el._items;
|
|
106
|
+
// Simulate user selection by clicking the item (public API)
|
|
107
|
+
items[1].click();
|
|
108
|
+
await aTimeout(0);
|
|
109
|
+
assert.equal(items[1].getAttribute('aria-current'), 'page');
|
|
110
|
+
assert.isFalse(items[0].hasAttribute('aria-current'));
|
|
111
|
+
});
|
|
112
|
+
});
|
|
113
|
+
//# sourceMappingURL=Navigation.test.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Navigation.test.js","sourceRoot":"","sources":["../../../../test/elements/navigation/Navigation.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, fixture, assert, oneEvent, aTimeout } from '@open-wc/testing'\nimport type Navigation from '../../../src/elements/navigation/internals/Navigation.js'\nimport '../../../src/elements/navigation/ui-navigation.js'\nimport '../../../src/elements/navigation/ui-navigation-item.js'\n\ndescribe('Navigation', () => {\n it('renders with slot content', async () => {\n const el = await fixture<Navigation>(html`\n <ui-navigation aria-label=\"Main navigation\">\n <ui-navigation-item selected aria-current=\"page\">Home</ui-navigation-item>\n <ui-navigation-item>Search</ui-navigation-item>\n <ui-navigation-item>Files</ui-navigation-item>\n </ui-navigation>\n `)\n const nav = el.shadowRoot!.querySelector('nav')\n assert.ok(nav, 'nav element is rendered')\n assert.equal(nav?.getAttribute('aria-label'), 'Main navigation')\n const items = el._items\n assert.equal(items.length, 3)\n assert.isTrue(items[0].selected)\n assert.equal(items[0].getAttribute('aria-current'), 'page')\n })\n\n it('sets correct tabindex for items', async () => {\n const el = await fixture<Navigation>(html`\n <ui-navigation>\n <ui-navigation-item selected>Home</ui-navigation-item>\n <ui-navigation-item>Search</ui-navigation-item>\n </ui-navigation>\n `)\n const items = el._items\n assert.equal(items[0].getAttribute('tabindex'), '0')\n assert.equal(items[1].getAttribute('tabindex'), '-1')\n })\n\n it('selects item on click and fires select event', async () => {\n const el = await fixture<Navigation>(html`\n <ui-navigation>\n <ui-navigation-item>Home</ui-navigation-item>\n <ui-navigation-item>Search</ui-navigation-item>\n </ui-navigation>\n `)\n const items = el._items\n setTimeout(() => items[1].click())\n const ev = await oneEvent(el, 'select')\n assert.equal(ev.detail.item, items[1])\n assert.isTrue(items[1].selected)\n assert.equal(items[1].getAttribute('tabindex'), '0')\n assert.isFalse(items[0].selected)\n assert.equal(items[0].getAttribute('tabindex'), '-1')\n })\n\n it('handles keyboard navigation (vertical)', async () => {\n const el = await fixture<Navigation>(html`\n <ui-navigation>\n <ui-navigation-item>Home</ui-navigation-item>\n <ui-navigation-item>Search</ui-navigation-item>\n <ui-navigation-item>Files</ui-navigation-item>\n </ui-navigation>\n `)\n const items = el._items\n items[0].focus()\n // ArrowDown moves to next\n items[0].dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }))\n await aTimeout(0)\n assert.dom.equal(document.activeElement, items[1])\n // ArrowUp wraps to last\n items[1].dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp', bubbles: true }))\n await aTimeout(0)\n assert.dom.equal(document.activeElement, items[0])\n })\n\n it('handles keyboard navigation (horizontal)', async () => {\n const el = await fixture<Navigation>(html`\n <ui-navigation orientation=\"horizontal\">\n <ui-navigation-item>Home</ui-navigation-item>\n <ui-navigation-item>Search</ui-navigation-item>\n </ui-navigation>\n `)\n const items = el._items\n items[0].focus()\n items[0].dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true }))\n await aTimeout(0)\n assert.dom.equal(document.activeElement, items[1])\n items[1].dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft', bubbles: true }))\n await aTimeout(0)\n assert.dom.equal(document.activeElement, items[0])\n })\n\n it('skips disabled items in navigation', async () => {\n const el = await fixture<Navigation>(html`\n <ui-navigation>\n <ui-navigation-item>Home</ui-navigation-item>\n <ui-navigation-item disabled>Search</ui-navigation-item>\n <ui-navigation-item>Files</ui-navigation-item>\n </ui-navigation>\n `)\n const items = el._items\n items[0].focus()\n items[0].dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }))\n await aTimeout(0)\n // Should skip disabled and go to Files\n assert.dom.equal(document.activeElement, items[2])\n })\n\n it('sets aria-current on selected item if current is set', async () => {\n const el = await fixture<Navigation>(html`\n <ui-navigation current=\"page\">\n <ui-navigation-item>Home</ui-navigation-item>\n <ui-navigation-item>Search</ui-navigation-item>\n </ui-navigation>\n `)\n const items = el._items\n // Simulate user selection by clicking the item (public API)\n items[1].click()\n await aTimeout(0)\n assert.equal(items[1].getAttribute('aria-current'), 'page')\n assert.isFalse(items[0].hasAttribute('aria-current'))\n })\n})\n"]}
|
package/demo/elements/index.html
CHANGED
|
@@ -52,6 +52,8 @@
|
|
|
52
52
|
<dt><a href="mention-textarea/index.html">Mention Textarea</a></dt>
|
|
53
53
|
<dd>The mention-textarea component.</dd>
|
|
54
54
|
|
|
55
|
+
<dt><a href="navigation/navigation.html">Navigation Menu</a></dt>
|
|
56
|
+
<dd>The navigation component.</dd>
|
|
55
57
|
<dt><a href="navigation/navigation-item.html">Navigation Item</a></dt>
|
|
56
58
|
<dd>The navigation-item component.</dd>
|
|
57
59
|
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Navigation item Demo</title>
|
|
7
|
+
<link
|
|
8
|
+
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
|
|
9
|
+
rel="stylesheet"
|
|
10
|
+
/>
|
|
11
|
+
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" rel="stylesheet" />
|
|
12
|
+
<link href="../../../src/styles/m3/tokens.css" rel="stylesheet" type="text/css" />
|
|
13
|
+
<link href="../../../src/styles/m3/theme.css" rel="stylesheet" type="text/css" />
|
|
14
|
+
<link href="../../page.css" rel="stylesheet" type="text/css" />
|
|
15
|
+
</head>
|
|
16
|
+
<body data-gr-ext-disabled="next">
|
|
17
|
+
<div id="app"></div>
|
|
18
|
+
<script type="module" src="/.tmp/demo/elements/navigation/navigation.js"></script>
|
|
19
|
+
</body>
|
|
20
|
+
</html>
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import { html, TemplateResult } from 'lit'
|
|
2
|
+
import { DemoPage } from '../../../src/demo/DemoPage.js'
|
|
3
|
+
import { reactive } from '../../../src/decorators/index.js'
|
|
4
|
+
|
|
5
|
+
import '../../../src/elements/navigation/ui-navigation-item.js'
|
|
6
|
+
import '../../../src/elements/navigation/ui-navigation.js'
|
|
7
|
+
import '../../../src/md/icons/ui-icon.js'
|
|
8
|
+
import '../../../src/md/checkbox/ui-checkbox.js'
|
|
9
|
+
|
|
10
|
+
class ComponentDemoPage extends DemoPage {
|
|
11
|
+
@reactive()
|
|
12
|
+
protected accessor selected = false
|
|
13
|
+
|
|
14
|
+
constructor() {
|
|
15
|
+
super()
|
|
16
|
+
this.componentName = '<ui-navigation>'
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
override contentTemplate(): TemplateResult {
|
|
20
|
+
return html`
|
|
21
|
+
<section class="demo-section">
|
|
22
|
+
<ui-navigation aria-label="Main navigation" current="page">
|
|
23
|
+
<ui-navigation-item selected aria-current="page">
|
|
24
|
+
<span slot="icon" aria-hidden="true">🏠</span>
|
|
25
|
+
Home
|
|
26
|
+
</ui-navigation-item>
|
|
27
|
+
<ui-navigation-item>
|
|
28
|
+
<span slot="icon" aria-hidden="true">🔍</span>
|
|
29
|
+
Search
|
|
30
|
+
</ui-navigation-item>
|
|
31
|
+
<ui-navigation-item>
|
|
32
|
+
<span slot="icon" aria-hidden="true">📁</span>
|
|
33
|
+
Files
|
|
34
|
+
</ui-navigation-item>
|
|
35
|
+
<ui-navigation-item iconOnly disabled aria-disabled="true" tabindex="-1" aria-label="Settings">
|
|
36
|
+
<span slot="icon" aria-hidden="true">⚙️</span>
|
|
37
|
+
</ui-navigation-item>
|
|
38
|
+
</ui-navigation>
|
|
39
|
+
</section>
|
|
40
|
+
`
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
const instance = new ComponentDemoPage()
|
|
45
|
+
instance.render()
|