@aurodesignsystem-dev/auro-formkit 0.0.0-pr1397.9 → 0.0.0-pr1399.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +279 -17
- package/components/checkbox/demo/api.min.js +1 -1
- package/components/checkbox/demo/index.min.js +1 -1
- package/components/checkbox/dist/index.js +1 -1
- package/components/checkbox/dist/registered.js +1 -1
- package/components/combobox/demo/api.min.js +15 -4
- package/components/combobox/demo/index.min.js +15 -4
- package/components/combobox/dist/comboboxKeyboardStrategy.d.ts +1 -1
- package/components/combobox/dist/index.js +15 -4
- package/components/combobox/dist/registered.js +15 -4
- package/components/counter/demo/api.min.js +2 -2
- package/components/counter/demo/index.min.js +2 -2
- package/components/counter/dist/index.js +2 -2
- package/components/counter/dist/registered.js +2 -2
- package/components/datepicker/demo/api.min.js +75 -9
- package/components/datepicker/demo/index.min.js +75 -9
- package/components/datepicker/dist/datepickerKeyboardStrategy.d.ts +4 -0
- package/components/datepicker/dist/index.js +75 -9
- package/components/datepicker/dist/registered.js +75 -9
- package/components/dropdown/demo/api.min.js +1 -1
- package/components/dropdown/demo/index.min.js +1 -1
- package/components/dropdown/dist/index.js +1 -1
- package/components/dropdown/dist/registered.js +1 -1
- package/components/form/demo/api.min.js +109 -21
- package/components/form/demo/index.min.js +109 -21
- package/components/input/demo/api.min.js +1 -1
- package/components/input/demo/index.min.js +1 -1
- package/components/input/dist/index.js +1 -1
- package/components/input/dist/registered.js +1 -1
- package/components/radio/demo/api.min.js +1 -1
- package/components/radio/demo/index.min.js +1 -1
- package/components/radio/dist/index.js +1 -1
- package/components/radio/dist/registered.js +1 -1
- package/components/select/demo/api.min.js +14 -3
- package/components/select/demo/index.min.js +14 -3
- package/components/select/dist/index.js +14 -3
- package/components/select/dist/registered.js +14 -3
- package/components/select/dist/selectKeyboardStrategy.d.ts +1 -1
- package/custom-elements.json +26 -2
- package/package.json +1 -1
- package/components/dropdown/demo/keyboardBehavior.md +0 -67
- package/components/select/demo/a11y.md +0 -204
- package/components/select/demo/contribute.md +0 -17
- package/components/select/demo/install.md +0 -97
- package/components/select/demo/keyboard.html +0 -72
- package/components/select/demo/keyboardBehavior.md +0 -247
- package/components/select/demo/layout.md +0 -290
- package/components/select/demo/ux.html +0 -335
- package/components/select/demo/ux.md +0 -206
package/README.md
CHANGED
|
@@ -1,11 +1,7 @@
|
|
|
1
1
|
<!--
|
|
2
2
|
The README.md file is a compiled document. No edits should be made directly to this file.
|
|
3
3
|
|
|
4
|
-
README.md is created by running `npm run build:docs`.
|
|
5
|
-
|
|
6
|
-
This file is generated based on a template fetched from
|
|
7
|
-
`../../docs/templates/componentReadmeTemplate.md`
|
|
8
|
-
and copied to `./componentDocs/README.md` each time the docs are compiled.
|
|
4
|
+
README.md is created by running `npm run build:docs:kit`.
|
|
9
5
|
|
|
10
6
|
The following sections are editable by making changes to the following files:
|
|
11
7
|
|
|
@@ -17,36 +13,302 @@ The following sections are editable by making changes to the following files:
|
|
|
17
13
|
| Component Example Code | HTML sample code of the components use | `./apiExamples/basic.html` |
|
|
18
14
|
-->
|
|
19
15
|
|
|
20
|
-
#
|
|
16
|
+
# Auro Formkit
|
|
21
17
|
|
|
22
18
|
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/description.md) -->
|
|
23
|
-
<!--
|
|
19
|
+
<!-- The below content is automatically added from ./docs/partials/description.md -->
|
|
24
20
|
|
|
25
|
-
|
|
21
|
+
## Description
|
|
22
|
+
|
|
23
|
+
`auro-formkit` is a collection of web components that can be used to build forms.
|
|
24
|
+
|
|
25
|
+
It is a monorepo that contains the following components:
|
|
26
|
+
|
|
27
|
+
- `auro-checkbox`
|
|
28
|
+
- `auro-checkbox-group`
|
|
29
|
+
- `auro-combobox`
|
|
30
|
+
- `auro-counter`
|
|
31
|
+
- `auro-counter-group`
|
|
32
|
+
- `auro-datepicker`
|
|
33
|
+
- `auro-dropdown`
|
|
34
|
+
- `auro-form`
|
|
35
|
+
- `auro-input`
|
|
36
|
+
- `auro-menu`
|
|
37
|
+
- `auro-menu-option`
|
|
38
|
+
- `auro-radio`
|
|
39
|
+
- `auro-radio-group`
|
|
40
|
+
- `auro-select`
|
|
26
41
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
27
42
|
|
|
28
|
-
##
|
|
43
|
+
## Install
|
|
44
|
+
|
|
45
|
+
<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/componentInstall_esm.md) -->
|
|
46
|
+
[](https://github.com/AlaskaAirlines/auro-formkit/actions/workflows/testPublish.yml)
|
|
47
|
+
[](https://www.npmjs.com/package/@aurodesignsystem/auro-formkit)
|
|
48
|
+
[](https://www.apache.org/licenses/LICENSE-2.0)
|
|
49
|
+

|
|
50
|
+
|
|
51
|
+
```shell
|
|
52
|
+
$ npm i @aurodesignsystem/auro-formkit
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
Installing as a direct, dev or peer dependency is up to the user installing the package. If you are unsure as to what type of dependency you should use, consider reading this [stack overflow](https://stackoverflow.com/questions/18875674/whats-the-difference-between-dependencies-devdependencies-and-peerdependencies) answer.
|
|
29
56
|
|
|
30
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/useCases.md) -->
|
|
31
57
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
32
58
|
|
|
33
59
|
## Getting Started
|
|
34
60
|
|
|
35
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src
|
|
61
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/gettingStarted.md) -->
|
|
62
|
+
<!-- The below content is automatically added from ./docs/partials/gettingStarted.md -->
|
|
63
|
+
To start using the Auro Formkit components, follow the instructions below:
|
|
64
|
+
|
|
65
|
+
### Usage
|
|
66
|
+
|
|
67
|
+
You can use Auro Formkit components in your project in two ways: automatic or custom registration.
|
|
68
|
+
|
|
69
|
+
#### Automatic Registration
|
|
70
|
+
|
|
71
|
+
For automatic registration, simply import the component:
|
|
72
|
+
|
|
73
|
+
```javascript
|
|
74
|
+
import "@aurodesignsystem/auro-formkit/auro-checkbox";
|
|
75
|
+
```
|
|
76
|
+
|
|
77
|
+
This will automatically register both the `<auro-checkbox>` and the included `<auro-checkbox-group>` component for use in your project. Note that not all Auro Formkit components have sub-components. Be sure to check the documentation for each component to understand its specific usage and registration requirements.
|
|
78
|
+
|
|
79
|
+
#### Custom Registration
|
|
80
|
+
|
|
81
|
+
If you prefer to register the component with a custom name, you can call the component class directly to create a custom registration:
|
|
82
|
+
|
|
83
|
+
```javascript
|
|
84
|
+
import { AuroCheckbox, AuroCheckboxGroup } from "@aurodesignsystem/auro-formkit/auro-checkbox/class";
|
|
85
|
+
|
|
86
|
+
AuroCheckbox.register('custom-checkbox');
|
|
87
|
+
AuroCheckbox.register('custom-checkbox-group');
|
|
88
|
+
```
|
|
89
|
+
|
|
90
|
+
This will register the component as `<custom-checkbox>` and `<custom-checkbox-group>`.
|
|
91
|
+
|
|
92
|
+
#### TypeScript Module Resolution
|
|
93
|
+
|
|
94
|
+
When using TypeScript set `moduleResolution` to `bundler`, add the following to your `tsconfig.json`:
|
|
95
|
+
|
|
96
|
+
```json
|
|
97
|
+
{
|
|
98
|
+
"compilerOptions": {
|
|
99
|
+
"moduleResolution": "bundler"
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
This configuration enables proper module resolution for the component's TypeScript files.
|
|
105
|
+
|
|
106
|
+
### Basic HTML Example
|
|
107
|
+
|
|
108
|
+
Here is an example of how to use the Auro Checkbox component in your HTML:
|
|
109
|
+
|
|
110
|
+
`index.html -> <head>`
|
|
111
|
+
|
|
112
|
+
```html
|
|
113
|
+
<script type="module">
|
|
114
|
+
import "@aurodesignsystem/auro-formkit/auro-checkbox";
|
|
115
|
+
</script>
|
|
116
|
+
```
|
|
117
|
+
|
|
118
|
+
`index.html -> <body>`
|
|
119
|
+
|
|
120
|
+
```html
|
|
121
|
+
<auro-checkbox-group>
|
|
122
|
+
<span slot="legend">
|
|
123
|
+
Form label goes here
|
|
124
|
+
</span>
|
|
125
|
+
<auro-checkbox value="value1" name="basic" id="checkbox-basic1">
|
|
126
|
+
Checkbox option
|
|
127
|
+
</auro-checkbox>
|
|
128
|
+
<auro-checkbox value="value2" name="basic" id="checkbox-basic2" checked>
|
|
129
|
+
Checkbox option two
|
|
130
|
+
</auro-checkbox>
|
|
131
|
+
</auro-checkbox-group>
|
|
132
|
+
```
|
|
133
|
+
|
|
134
|
+
By following these steps, you can easily integrate Auro Formkit components into your project.
|
|
36
135
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
37
136
|
|
|
38
|
-
|
|
137
|
+
### Design Token CSS Custom Property dependency
|
|
138
|
+
|
|
139
|
+
<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/designTokens.md) -->
|
|
140
|
+
The use of any Auro custom element has a dependency on the [Auro Design Tokens](https://auro.alaskaair.com/getting-started/developers/design-tokens).
|
|
141
|
+
|
|
142
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
143
|
+
|
|
144
|
+
## Development
|
|
145
|
+
|
|
146
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/developmentDescription.md) -->
|
|
147
|
+
<!-- The below content is automatically added from ./docs/partials/developmentDescription.md -->
|
|
148
|
+
|
|
149
|
+
### Filtering
|
|
150
|
+
|
|
151
|
+
Running the `dev` command will open a `localhost` development server for all components in the monorepo at once.
|
|
152
|
+
|
|
153
|
+
To only develop a single component, use the `--filter` flag:
|
|
154
|
+
|
|
155
|
+
```shell
|
|
156
|
+
npx turbo dev --filter=@aurodesignsystem/auro-input
|
|
157
|
+
```
|
|
39
158
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
40
159
|
|
|
41
|
-
|
|
160
|
+
### Start development environment
|
|
161
|
+
|
|
162
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/localhost.md) -->
|
|
163
|
+
<!-- The below content is automatically added from ./docs/partials/localhost.md -->
|
|
42
164
|
|
|
43
|
-
|
|
165
|
+
## Local Development
|
|
44
166
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
45
167
|
|
|
46
|
-
|
|
168
|
+
### Testing
|
|
169
|
+
|
|
170
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/testing.md) -->
|
|
171
|
+
<!-- The below content is automatically added from ./docs/partials/testing.md -->
|
|
172
|
+
```
|
|
173
|
+
npm run test
|
|
174
|
+
```
|
|
175
|
+
|
|
176
|
+
#### Port configuration
|
|
47
177
|
|
|
48
|
-
|
|
178
|
+
Turbo will attempt to test components in parallel which will lead to port conflicts.
|
|
179
|
+
|
|
180
|
+
Setting the `concurrency` to `1` will prevent Turbo from running tests in parallel:
|
|
181
|
+
|
|
182
|
+
```
|
|
183
|
+
"test": "turbo run test --concurrency=1",
|
|
184
|
+
```
|
|
185
|
+
|
|
186
|
+
`turbo.json`does not support `--concurrency` yet. See [this issue](https://github.com/vercel/turborepo/discussions/7493).
|
|
49
187
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
188
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/readmeAddlInfo.md) -->
|
|
189
|
+
<!-- The below content is automatically added from ./docs/partials/readmeAddlInfo.md -->
|
|
190
|
+
|
|
191
|
+
## Turborepo Overview
|
|
192
|
+
|
|
193
|
+
This monorepo is managed using [Turborepo](https://turborepo.org/).
|
|
194
|
+
|
|
195
|
+
### Managing dependencies
|
|
196
|
+
|
|
197
|
+
#### Best practices for dependency installation
|
|
198
|
+
|
|
199
|
+
When you install a dependency in a component or package in `auro-formkit`, you should install it directly in the package that uses it.
|
|
200
|
+
|
|
201
|
+
The package's `package.json` will have every dependency that it needs. This is true for both external and internal dependencies.
|
|
202
|
+
|
|
203
|
+
### Types of Dependencies by Source
|
|
204
|
+
|
|
205
|
+
#### External Dependencies
|
|
206
|
+
- These are packages fetched from the `npm` registry (e.g., Lit, Rollup, Sass)
|
|
207
|
+
- Declared in `package.json` using exact versions or version ranges
|
|
208
|
+
- Installed in `node_modules` during `npm install` or `yarn install`
|
|
209
|
+
|
|
210
|
+
#### Internal Dependencies
|
|
211
|
+
- These are packages from within the `auro-formkit` monorepo
|
|
212
|
+
- Allow sharing code between different packages in your repository
|
|
213
|
+
- Example: The `@aurodesignsystem/combobox` package might depend on `@aurodesignsystem/input`
|
|
214
|
+
- Must be declared in `package.json` just like external dependencies
|
|
215
|
+
- Use workspace protocols (e.g., `"workspace:*"` or `"workspace:^1.0.0"`)
|
|
216
|
+
|
|
217
|
+
### Types of Dependencies by Purpose
|
|
218
|
+
|
|
219
|
+
#### Dependencies (`dependencies`)
|
|
220
|
+
- Required for the package to function in production
|
|
221
|
+
- Example:
|
|
222
|
+
```json
|
|
223
|
+
{
|
|
224
|
+
"dependencies": {
|
|
225
|
+
"lit.js": "^3.0.0", // External dependency
|
|
226
|
+
"@aurodesignsystem/input": "workspace:*" // Internal dependency
|
|
227
|
+
}
|
|
228
|
+
}
|
|
229
|
+
```
|
|
230
|
+
|
|
231
|
+
#### Peer Dependencies (`peerDependencies`)
|
|
232
|
+
- Packages that your library expects the consuming application to provide
|
|
233
|
+
- Common for plugins or UI component libraries
|
|
234
|
+
- Example:
|
|
235
|
+
```json
|
|
236
|
+
{
|
|
237
|
+
"peerDependencies": {
|
|
238
|
+
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
|
|
239
|
+
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
|
|
240
|
+
}
|
|
241
|
+
}
|
|
242
|
+
```
|
|
243
|
+
|
|
244
|
+
### Development Dependencies (`devDependencies`)
|
|
245
|
+
- Only needed during development, testing, or building
|
|
246
|
+
- Not included in the production bundle
|
|
247
|
+
- Example:
|
|
248
|
+
```json
|
|
249
|
+
{
|
|
250
|
+
"devDependencies": {
|
|
251
|
+
"typescript": "^5.0.0",
|
|
252
|
+
"@open-wc/testing": "^4.0.0" // Internal dev dependency
|
|
253
|
+
}
|
|
254
|
+
}
|
|
255
|
+
```
|
|
256
|
+
|
|
257
|
+
## Example: Component Dependencies
|
|
258
|
+
|
|
259
|
+
Let's use `@auro-formki/combobox` as an example to illustrate these concepts:
|
|
260
|
+
|
|
261
|
+
```json
|
|
262
|
+
{
|
|
263
|
+
"name": "@aurodesignsystem/combobox",
|
|
264
|
+
"dependencies": {
|
|
265
|
+
// Internal dependencies
|
|
266
|
+
"@aurodesignsystem/auro-dropdown": "*", // Required UI component
|
|
267
|
+
"@aurodesignsystem/auro-input": "*", // Required UI component
|
|
268
|
+
|
|
269
|
+
// External dependencies
|
|
270
|
+
"@alaskaairux/icons": "^5.3.0", // Required UI component
|
|
271
|
+
"lit": "^3.2.1" // Framework
|
|
272
|
+
},
|
|
273
|
+
"peerDependencies": {
|
|
274
|
+
"@aurodesignsystem/design-tokens": "^4.12.1",
|
|
275
|
+
"@aurodesignsystem/webcorestylesheets": "^5.1.2"
|
|
276
|
+
},
|
|
277
|
+
"devDependencies": {
|
|
278
|
+
// Build utilities
|
|
279
|
+
"rollup": "^4.24.4",
|
|
280
|
+
"@aurodesignsystem/build-tools": "*",
|
|
281
|
+
}
|
|
282
|
+
}
|
|
283
|
+
```
|
|
284
|
+
|
|
285
|
+
This structure ensures that:
|
|
286
|
+
1. The package explicitly declares all its dependencies
|
|
287
|
+
2. Internal dependencies are properly tracked and versioned
|
|
288
|
+
3. Development tools are separated from production dependencies
|
|
289
|
+
4. Peer dependencies are clearly communicated to consumers
|
|
290
|
+
|
|
291
|
+
- External dependencies come from the `npm` registry.
|
|
292
|
+
|
|
293
|
+
- Internal dependencies let you share functionality within your repository.
|
|
294
|
+
|
|
295
|
+
This practice has several benefits:
|
|
296
|
+
|
|
297
|
+
- **Improved clarity:** It's easier to understand what a package depends on when its dependencies are listed in its `package.json`. Developers working in the repository can see at a glance what dependencies are used within the package.
|
|
298
|
+
|
|
299
|
+
- **Enhanced flexibility:** In a monorepo at scale, it can be unrealistic to expect each package to use the same version of an external dependency.
|
|
300
|
+
|
|
301
|
+
- **Better caching ability:** If you install too many dependencies in the root of your repository, you'll be changing the workspace root whenever you add, update, or delete a dependency, leading to unnecessary cache misses.
|
|
302
|
+
|
|
303
|
+
- **Pruning unused dependencies:** When dependencies are installed in the packages that they are meant for, Turborepo can read your lockfile and remove dependencies that aren't used in the packages you need.
|
|
304
|
+
|
|
305
|
+
For more information, see the [Turborepo docs](https://turbo.build/repo/docs/crafting-your-repository/managing-dependencies).
|
|
306
|
+
|
|
307
|
+
### Root `package.json`
|
|
308
|
+
|
|
309
|
+
The only dependencies that belong in the root `package.json` are **tools for managing the repository**.
|
|
310
|
+
|
|
311
|
+
Some examples of dependencies that make sense to install in the root are `turbo`, `husky`, or `stylelint`.
|
|
50
312
|
|
|
51
|
-
|
|
313
|
+
Conversely, dependencies Auro components rely on should be installed in their respective packages, such as `Lit`, `Rollup`, or other `auro-formkit` dependencies.
|
|
52
314
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
@@ -1687,7 +1687,7 @@ class AuroHelpText extends i$2 {
|
|
|
1687
1687
|
}
|
|
1688
1688
|
}
|
|
1689
1689
|
|
|
1690
|
-
var formkitVersion = '
|
|
1690
|
+
var formkitVersion = '202603251908';
|
|
1691
1691
|
|
|
1692
1692
|
// Copyright (c) 2026 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
1693
1693
|
// See LICENSE in the project root for license information.
|
|
@@ -1679,7 +1679,7 @@ class AuroHelpText extends i$2 {
|
|
|
1679
1679
|
}
|
|
1680
1680
|
}
|
|
1681
1681
|
|
|
1682
|
-
var formkitVersion = '
|
|
1682
|
+
var formkitVersion = '202603251908';
|
|
1683
1683
|
|
|
1684
1684
|
// Copyright (c) 2026 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
1685
1685
|
// See LICENSE in the project root for license information.
|
|
@@ -1632,7 +1632,7 @@ class AuroHelpText extends LitElement {
|
|
|
1632
1632
|
}
|
|
1633
1633
|
}
|
|
1634
1634
|
|
|
1635
|
-
var formkitVersion = '
|
|
1635
|
+
var formkitVersion = '202603251908';
|
|
1636
1636
|
|
|
1637
1637
|
// Copyright (c) 2026 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
1638
1638
|
// See LICENSE in the project root for license information.
|
|
@@ -1632,7 +1632,7 @@ class AuroHelpText extends LitElement {
|
|
|
1632
1632
|
}
|
|
1633
1633
|
}
|
|
1634
1634
|
|
|
1635
|
-
var formkitVersion = '
|
|
1635
|
+
var formkitVersion = '202603251908';
|
|
1636
1636
|
|
|
1637
1637
|
// Copyright (c) 2026 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
1638
1638
|
// See LICENSE in the project root for license information.
|
|
@@ -1357,11 +1357,22 @@ const comboboxKeyboardStrategy = {
|
|
|
1357
1357
|
}
|
|
1358
1358
|
},
|
|
1359
1359
|
|
|
1360
|
-
Tab(component,
|
|
1360
|
+
Tab(component, evt, ctx) {
|
|
1361
1361
|
if (!ctx.isExpanded) {
|
|
1362
1362
|
return;
|
|
1363
1363
|
}
|
|
1364
1364
|
|
|
1365
|
+
// Shift+Tab moves the highlight to the first non-disabled option
|
|
1366
|
+
// without making a selection or closing the bib.
|
|
1367
|
+
if (evt.shiftKey) {
|
|
1368
|
+
evt.preventDefault();
|
|
1369
|
+
const firstActive = component.menu.menuService.menuOptions.find((option) => option.isActive);
|
|
1370
|
+
if (firstActive) {
|
|
1371
|
+
component.menu.updateActiveOption(firstActive);
|
|
1372
|
+
}
|
|
1373
|
+
return;
|
|
1374
|
+
}
|
|
1375
|
+
|
|
1365
1376
|
if (ctx.isModal) {
|
|
1366
1377
|
if (!ctx.activeInput) {
|
|
1367
1378
|
return;
|
|
@@ -5059,7 +5070,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$4 {
|
|
|
5059
5070
|
}
|
|
5060
5071
|
};
|
|
5061
5072
|
|
|
5062
|
-
var formkitVersion$2 = '
|
|
5073
|
+
var formkitVersion$2 = '202603251908';
|
|
5063
5074
|
|
|
5064
5075
|
let AuroElement$2 = class AuroElement extends i$4 {
|
|
5065
5076
|
static get properties() {
|
|
@@ -12823,7 +12834,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$4 {
|
|
|
12823
12834
|
}
|
|
12824
12835
|
};
|
|
12825
12836
|
|
|
12826
|
-
var formkitVersion$1 = '
|
|
12837
|
+
var formkitVersion$1 = '202603251908';
|
|
12827
12838
|
|
|
12828
12839
|
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
12829
12840
|
// See LICENSE in the project root for license information.
|
|
@@ -13862,7 +13873,7 @@ class AuroBibtemplate extends i$4 {
|
|
|
13862
13873
|
}
|
|
13863
13874
|
}
|
|
13864
13875
|
|
|
13865
|
-
var formkitVersion = '
|
|
13876
|
+
var formkitVersion = '202603251908';
|
|
13866
13877
|
|
|
13867
13878
|
var styleCss$3 = i$7`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block;text-align:left}:host [auro-dropdown]{--ds-auro-dropdown-trigger-background-color: transparent}:host #inputInBib::part(wrapper){box-shadow:none}:host #inputInBib::part(accent-left){display:none}:host([layout*=classic]) [auro-input]{width:100%}:host([layout*=classic]) [auro-input]::part(helpText){display:none}:host([layout*=classic]) #slotHolder{display:none}`;
|
|
13868
13879
|
|
|
@@ -1280,11 +1280,22 @@ const comboboxKeyboardStrategy = {
|
|
|
1280
1280
|
}
|
|
1281
1281
|
},
|
|
1282
1282
|
|
|
1283
|
-
Tab(component,
|
|
1283
|
+
Tab(component, evt, ctx) {
|
|
1284
1284
|
if (!ctx.isExpanded) {
|
|
1285
1285
|
return;
|
|
1286
1286
|
}
|
|
1287
1287
|
|
|
1288
|
+
// Shift+Tab moves the highlight to the first non-disabled option
|
|
1289
|
+
// without making a selection or closing the bib.
|
|
1290
|
+
if (evt.shiftKey) {
|
|
1291
|
+
evt.preventDefault();
|
|
1292
|
+
const firstActive = component.menu.menuService.menuOptions.find((option) => option.isActive);
|
|
1293
|
+
if (firstActive) {
|
|
1294
|
+
component.menu.updateActiveOption(firstActive);
|
|
1295
|
+
}
|
|
1296
|
+
return;
|
|
1297
|
+
}
|
|
1298
|
+
|
|
1288
1299
|
if (ctx.isModal) {
|
|
1289
1300
|
if (!ctx.activeInput) {
|
|
1290
1301
|
return;
|
|
@@ -4982,7 +4993,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$4 {
|
|
|
4982
4993
|
}
|
|
4983
4994
|
};
|
|
4984
4995
|
|
|
4985
|
-
var formkitVersion$2 = '
|
|
4996
|
+
var formkitVersion$2 = '202603251908';
|
|
4986
4997
|
|
|
4987
4998
|
let AuroElement$2 = class AuroElement extends i$4 {
|
|
4988
4999
|
static get properties() {
|
|
@@ -12746,7 +12757,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$4 {
|
|
|
12746
12757
|
}
|
|
12747
12758
|
};
|
|
12748
12759
|
|
|
12749
|
-
var formkitVersion$1 = '
|
|
12760
|
+
var formkitVersion$1 = '202603251908';
|
|
12750
12761
|
|
|
12751
12762
|
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
12752
12763
|
// See LICENSE in the project root for license information.
|
|
@@ -13785,7 +13796,7 @@ class AuroBibtemplate extends i$4 {
|
|
|
13785
13796
|
}
|
|
13786
13797
|
}
|
|
13787
13798
|
|
|
13788
|
-
var formkitVersion = '
|
|
13799
|
+
var formkitVersion = '202603251908';
|
|
13789
13800
|
|
|
13790
13801
|
var styleCss$3 = i$7`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block;text-align:left}:host [auro-dropdown]{--ds-auro-dropdown-trigger-background-color: transparent}:host #inputInBib::part(wrapper){box-shadow:none}:host #inputInBib::part(accent-left){display:none}:host([layout*=classic]) [auro-input]{width:100%}:host([layout*=classic]) [auro-input]::part(helpText){display:none}:host([layout*=classic]) #slotHolder{display:none}`;
|
|
13791
13802
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
export namespace comboboxKeyboardStrategy {
|
|
2
2
|
function Enter(component: any, evt: any, ctx: any): Promise<void>;
|
|
3
|
-
function Tab(component: any,
|
|
3
|
+
function Tab(component: any, evt: any, ctx: any): void;
|
|
4
4
|
function ArrowUp(component: any, evt: any, ctx: any): void;
|
|
5
5
|
function ArrowDown(component: any, evt: any, ctx: any): void;
|
|
6
6
|
}
|
|
@@ -1237,11 +1237,22 @@ const comboboxKeyboardStrategy = {
|
|
|
1237
1237
|
}
|
|
1238
1238
|
},
|
|
1239
1239
|
|
|
1240
|
-
Tab(component,
|
|
1240
|
+
Tab(component, evt, ctx) {
|
|
1241
1241
|
if (!ctx.isExpanded) {
|
|
1242
1242
|
return;
|
|
1243
1243
|
}
|
|
1244
1244
|
|
|
1245
|
+
// Shift+Tab moves the highlight to the first non-disabled option
|
|
1246
|
+
// without making a selection or closing the bib.
|
|
1247
|
+
if (evt.shiftKey) {
|
|
1248
|
+
evt.preventDefault();
|
|
1249
|
+
const firstActive = component.menu.menuService.menuOptions.find((option) => option.isActive);
|
|
1250
|
+
if (firstActive) {
|
|
1251
|
+
component.menu.updateActiveOption(firstActive);
|
|
1252
|
+
}
|
|
1253
|
+
return;
|
|
1254
|
+
}
|
|
1255
|
+
|
|
1245
1256
|
if (ctx.isModal) {
|
|
1246
1257
|
if (!ctx.activeInput) {
|
|
1247
1258
|
return;
|
|
@@ -4915,7 +4926,7 @@ let AuroHelpText$2 = class AuroHelpText extends LitElement {
|
|
|
4915
4926
|
}
|
|
4916
4927
|
};
|
|
4917
4928
|
|
|
4918
|
-
var formkitVersion$2 = '
|
|
4929
|
+
var formkitVersion$2 = '202603251908';
|
|
4919
4930
|
|
|
4920
4931
|
let AuroElement$2 = class AuroElement extends LitElement {
|
|
4921
4932
|
static get properties() {
|
|
@@ -12672,7 +12683,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
|
|
|
12672
12683
|
}
|
|
12673
12684
|
};
|
|
12674
12685
|
|
|
12675
|
-
var formkitVersion$1 = '
|
|
12686
|
+
var formkitVersion$1 = '202603251908';
|
|
12676
12687
|
|
|
12677
12688
|
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
12678
12689
|
// See LICENSE in the project root for license information.
|
|
@@ -13711,7 +13722,7 @@ class AuroBibtemplate extends LitElement {
|
|
|
13711
13722
|
}
|
|
13712
13723
|
}
|
|
13713
13724
|
|
|
13714
|
-
var formkitVersion = '
|
|
13725
|
+
var formkitVersion = '202603251908';
|
|
13715
13726
|
|
|
13716
13727
|
var styleCss$1 = css`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block;text-align:left}:host [auro-dropdown]{--ds-auro-dropdown-trigger-background-color: transparent}:host #inputInBib::part(wrapper){box-shadow:none}:host #inputInBib::part(accent-left){display:none}:host([layout*=classic]) [auro-input]{width:100%}:host([layout*=classic]) [auro-input]::part(helpText){display:none}:host([layout*=classic]) #slotHolder{display:none}`;
|
|
13717
13728
|
|
|
@@ -1237,11 +1237,22 @@ const comboboxKeyboardStrategy = {
|
|
|
1237
1237
|
}
|
|
1238
1238
|
},
|
|
1239
1239
|
|
|
1240
|
-
Tab(component,
|
|
1240
|
+
Tab(component, evt, ctx) {
|
|
1241
1241
|
if (!ctx.isExpanded) {
|
|
1242
1242
|
return;
|
|
1243
1243
|
}
|
|
1244
1244
|
|
|
1245
|
+
// Shift+Tab moves the highlight to the first non-disabled option
|
|
1246
|
+
// without making a selection or closing the bib.
|
|
1247
|
+
if (evt.shiftKey) {
|
|
1248
|
+
evt.preventDefault();
|
|
1249
|
+
const firstActive = component.menu.menuService.menuOptions.find((option) => option.isActive);
|
|
1250
|
+
if (firstActive) {
|
|
1251
|
+
component.menu.updateActiveOption(firstActive);
|
|
1252
|
+
}
|
|
1253
|
+
return;
|
|
1254
|
+
}
|
|
1255
|
+
|
|
1245
1256
|
if (ctx.isModal) {
|
|
1246
1257
|
if (!ctx.activeInput) {
|
|
1247
1258
|
return;
|
|
@@ -4915,7 +4926,7 @@ let AuroHelpText$2 = class AuroHelpText extends LitElement {
|
|
|
4915
4926
|
}
|
|
4916
4927
|
};
|
|
4917
4928
|
|
|
4918
|
-
var formkitVersion$2 = '
|
|
4929
|
+
var formkitVersion$2 = '202603251908';
|
|
4919
4930
|
|
|
4920
4931
|
let AuroElement$2 = class AuroElement extends LitElement {
|
|
4921
4932
|
static get properties() {
|
|
@@ -12672,7 +12683,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
|
|
|
12672
12683
|
}
|
|
12673
12684
|
};
|
|
12674
12685
|
|
|
12675
|
-
var formkitVersion$1 = '
|
|
12686
|
+
var formkitVersion$1 = '202603251908';
|
|
12676
12687
|
|
|
12677
12688
|
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
12678
12689
|
// See LICENSE in the project root for license information.
|
|
@@ -13711,7 +13722,7 @@ class AuroBibtemplate extends LitElement {
|
|
|
13711
13722
|
}
|
|
13712
13723
|
}
|
|
13713
13724
|
|
|
13714
|
-
var formkitVersion = '
|
|
13725
|
+
var formkitVersion = '202603251908';
|
|
13715
13726
|
|
|
13716
13727
|
var styleCss$1 = css`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block;text-align:left}:host [auro-dropdown]{--ds-auro-dropdown-trigger-background-color: transparent}:host #inputInBib::part(wrapper){box-shadow:none}:host #inputInBib::part(accent-left){display:none}:host([layout*=classic]) [auro-input]{width:100%}:host([layout*=classic]) [auro-input]::part(helpText){display:none}:host([layout*=classic]) #slotHolder{display:none}`;
|
|
13717
13728
|
|
|
@@ -1470,7 +1470,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$2 {
|
|
|
1470
1470
|
}
|
|
1471
1471
|
};
|
|
1472
1472
|
|
|
1473
|
-
var formkitVersion$1 = '
|
|
1473
|
+
var formkitVersion$1 = '202603251908';
|
|
1474
1474
|
|
|
1475
1475
|
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
1476
1476
|
// See LICENSE in the project root for license information.
|
|
@@ -5517,7 +5517,7 @@ class AuroHelpText extends i$2 {
|
|
|
5517
5517
|
}
|
|
5518
5518
|
}
|
|
5519
5519
|
|
|
5520
|
-
var formkitVersion = '
|
|
5520
|
+
var formkitVersion = '202603251908';
|
|
5521
5521
|
|
|
5522
5522
|
let AuroElement$1 = class AuroElement extends i$2 {
|
|
5523
5523
|
static get properties() {
|
|
@@ -1470,7 +1470,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$2 {
|
|
|
1470
1470
|
}
|
|
1471
1471
|
};
|
|
1472
1472
|
|
|
1473
|
-
var formkitVersion$1 = '
|
|
1473
|
+
var formkitVersion$1 = '202603251908';
|
|
1474
1474
|
|
|
1475
1475
|
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
1476
1476
|
// See LICENSE in the project root for license information.
|
|
@@ -5517,7 +5517,7 @@ class AuroHelpText extends i$2 {
|
|
|
5517
5517
|
}
|
|
5518
5518
|
}
|
|
5519
5519
|
|
|
5520
|
-
var formkitVersion = '
|
|
5520
|
+
var formkitVersion = '202603251908';
|
|
5521
5521
|
|
|
5522
5522
|
let AuroElement$1 = class AuroElement extends i$2 {
|
|
5523
5523
|
static get properties() {
|
|
@@ -1420,7 +1420,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
|
|
|
1420
1420
|
}
|
|
1421
1421
|
};
|
|
1422
1422
|
|
|
1423
|
-
var formkitVersion$1 = '
|
|
1423
|
+
var formkitVersion$1 = '202603251908';
|
|
1424
1424
|
|
|
1425
1425
|
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
1426
1426
|
// See LICENSE in the project root for license information.
|
|
@@ -5449,7 +5449,7 @@ class AuroHelpText extends LitElement {
|
|
|
5449
5449
|
}
|
|
5450
5450
|
}
|
|
5451
5451
|
|
|
5452
|
-
var formkitVersion = '
|
|
5452
|
+
var formkitVersion = '202603251908';
|
|
5453
5453
|
|
|
5454
5454
|
let AuroElement$1 = class AuroElement extends LitElement {
|
|
5455
5455
|
static get properties() {
|
|
@@ -1420,7 +1420,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
|
|
|
1420
1420
|
}
|
|
1421
1421
|
};
|
|
1422
1422
|
|
|
1423
|
-
var formkitVersion$1 = '
|
|
1423
|
+
var formkitVersion$1 = '202603251908';
|
|
1424
1424
|
|
|
1425
1425
|
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
1426
1426
|
// See LICENSE in the project root for license information.
|
|
@@ -5449,7 +5449,7 @@ class AuroHelpText extends LitElement {
|
|
|
5449
5449
|
}
|
|
5450
5450
|
}
|
|
5451
5451
|
|
|
5452
|
-
var formkitVersion = '
|
|
5452
|
+
var formkitVersion = '202603251908';
|
|
5453
5453
|
|
|
5454
5454
|
let AuroElement$1 = class AuroElement extends LitElement {
|
|
5455
5455
|
static get properties() {
|