@aurodesignsystem-dev/auro-formkit 0.0.0-pr1509.1 → 0.0.0-pr1510.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/components/checkbox/demo/customize.min.js +1 -1
- package/components/checkbox/demo/getting-started.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/customize.min.js +3 -3
- package/components/combobox/demo/getting-started.min.js +3 -3
- package/components/combobox/demo/index.min.js +3 -3
- package/components/combobox/dist/index.js +3 -3
- package/components/combobox/dist/registered.js +3 -3
- package/components/counter/demo/customize.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/accessibility.md +2 -1
- package/components/datepicker/demo/api.md +63 -62
- package/components/datepicker/demo/customize.md +12 -1
- package/components/datepicker/demo/customize.min.js +455 -167
- package/components/datepicker/demo/index.min.js +455 -167
- package/components/datepicker/dist/index.js +455 -167
- package/components/datepicker/dist/registered.js +455 -167
- package/components/datepicker/dist/src/auro-calendar-cell.d.ts +14 -3
- package/components/datepicker/dist/src/auro-calendar.d.ts +87 -5
- package/components/datepicker/dist/src/auro-datepicker.d.ts +73 -3
- package/components/dropdown/demo/customize.min.js +1 -1
- package/components/dropdown/demo/getting-started.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/customize.min.js +471 -183
- package/components/form/demo/getting-started.min.js +471 -183
- package/components/form/demo/index.min.js +471 -183
- package/components/form/demo/registerDemoDeps.min.js +471 -183
- package/components/input/demo/customize.min.js +1 -1
- package/components/input/demo/getting-started.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/customize.min.js +1 -1
- package/components/radio/demo/getting-started.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/customize.min.js +2 -2
- package/components/select/demo/getting-started.min.js +2 -2
- package/components/select/demo/index.min.js +2 -2
- package/components/select/dist/index.js +2 -2
- package/components/select/dist/registered.js +2 -2
- package/custom-elements.json +1868 -1696
- package/package.json +2 -1
|
@@ -1260,7 +1260,7 @@ class AuroHelpText extends i$2 {
|
|
|
1260
1260
|
}
|
|
1261
1261
|
}
|
|
1262
1262
|
|
|
1263
|
-
var formkitVersion = '
|
|
1263
|
+
var formkitVersion = '202606251933';
|
|
1264
1264
|
|
|
1265
1265
|
// Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
|
|
1266
1266
|
// See LICENSE in the project root for license information.
|
|
@@ -1260,7 +1260,7 @@ class AuroHelpText extends i$2 {
|
|
|
1260
1260
|
}
|
|
1261
1261
|
}
|
|
1262
1262
|
|
|
1263
|
-
var formkitVersion = '
|
|
1263
|
+
var formkitVersion = '202606251933';
|
|
1264
1264
|
|
|
1265
1265
|
// Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
|
|
1266
1266
|
// See LICENSE in the project root for license information.
|
|
@@ -1260,7 +1260,7 @@ class AuroHelpText extends i$2 {
|
|
|
1260
1260
|
}
|
|
1261
1261
|
}
|
|
1262
1262
|
|
|
1263
|
-
var formkitVersion = '
|
|
1263
|
+
var formkitVersion = '202606251933';
|
|
1264
1264
|
|
|
1265
1265
|
// Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
|
|
1266
1266
|
// See LICENSE in the project root for license information.
|
|
@@ -1213,7 +1213,7 @@ class AuroHelpText extends LitElement {
|
|
|
1213
1213
|
}
|
|
1214
1214
|
}
|
|
1215
1215
|
|
|
1216
|
-
var formkitVersion = '
|
|
1216
|
+
var formkitVersion = '202606251933';
|
|
1217
1217
|
|
|
1218
1218
|
// Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
|
|
1219
1219
|
// See LICENSE in the project root for license information.
|
|
@@ -1213,7 +1213,7 @@ class AuroHelpText extends LitElement {
|
|
|
1213
1213
|
}
|
|
1214
1214
|
}
|
|
1215
1215
|
|
|
1216
|
-
var formkitVersion = '
|
|
1216
|
+
var formkitVersion = '202606251933';
|
|
1217
1217
|
|
|
1218
1218
|
// Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
|
|
1219
1219
|
// See LICENSE in the project root for license information.
|
|
@@ -4873,7 +4873,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$3 {
|
|
|
4873
4873
|
}
|
|
4874
4874
|
};
|
|
4875
4875
|
|
|
4876
|
-
var formkitVersion$2 = '
|
|
4876
|
+
var formkitVersion$2 = '202606251933';
|
|
4877
4877
|
|
|
4878
4878
|
let AuroElement$2 = class AuroElement extends i$3 {
|
|
4879
4879
|
static get properties() {
|
|
@@ -18473,7 +18473,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$3 {
|
|
|
18473
18473
|
}
|
|
18474
18474
|
};
|
|
18475
18475
|
|
|
18476
|
-
var formkitVersion$1 = '
|
|
18476
|
+
var formkitVersion$1 = '202606251933';
|
|
18477
18477
|
|
|
18478
18478
|
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
18479
18479
|
// See LICENSE in the project root for license information.
|
|
@@ -19594,7 +19594,7 @@ class AuroBibtemplate extends i$3 {
|
|
|
19594
19594
|
}
|
|
19595
19595
|
}
|
|
19596
19596
|
|
|
19597
|
-
var formkitVersion = '
|
|
19597
|
+
var formkitVersion = '202606251933';
|
|
19598
19598
|
|
|
19599
19599
|
var styleCss$3 = i$6`.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}`;
|
|
19600
19600
|
|
|
@@ -4873,7 +4873,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$3 {
|
|
|
4873
4873
|
}
|
|
4874
4874
|
};
|
|
4875
4875
|
|
|
4876
|
-
var formkitVersion$2 = '
|
|
4876
|
+
var formkitVersion$2 = '202606251933';
|
|
4877
4877
|
|
|
4878
4878
|
let AuroElement$2 = class AuroElement extends i$3 {
|
|
4879
4879
|
static get properties() {
|
|
@@ -18473,7 +18473,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$3 {
|
|
|
18473
18473
|
}
|
|
18474
18474
|
};
|
|
18475
18475
|
|
|
18476
|
-
var formkitVersion$1 = '
|
|
18476
|
+
var formkitVersion$1 = '202606251933';
|
|
18477
18477
|
|
|
18478
18478
|
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
18479
18479
|
// See LICENSE in the project root for license information.
|
|
@@ -19594,7 +19594,7 @@ class AuroBibtemplate extends i$3 {
|
|
|
19594
19594
|
}
|
|
19595
19595
|
}
|
|
19596
19596
|
|
|
19597
|
-
var formkitVersion = '
|
|
19597
|
+
var formkitVersion = '202606251933';
|
|
19598
19598
|
|
|
19599
19599
|
var styleCss$3 = i$6`.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}`;
|
|
19600
19600
|
|
|
@@ -4888,7 +4888,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$3 {
|
|
|
4888
4888
|
}
|
|
4889
4889
|
};
|
|
4890
4890
|
|
|
4891
|
-
var formkitVersion$2 = '
|
|
4891
|
+
var formkitVersion$2 = '202606251933';
|
|
4892
4892
|
|
|
4893
4893
|
let AuroElement$2 = class AuroElement extends i$3 {
|
|
4894
4894
|
static get properties() {
|
|
@@ -18488,7 +18488,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$3 {
|
|
|
18488
18488
|
}
|
|
18489
18489
|
};
|
|
18490
18490
|
|
|
18491
|
-
var formkitVersion$1 = '
|
|
18491
|
+
var formkitVersion$1 = '202606251933';
|
|
18492
18492
|
|
|
18493
18493
|
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
18494
18494
|
// See LICENSE in the project root for license information.
|
|
@@ -19609,7 +19609,7 @@ class AuroBibtemplate extends i$3 {
|
|
|
19609
19609
|
}
|
|
19610
19610
|
}
|
|
19611
19611
|
|
|
19612
|
-
var formkitVersion = '
|
|
19612
|
+
var formkitVersion = '202606251933';
|
|
19613
19613
|
|
|
19614
19614
|
var styleCss$3 = i$6`.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}`;
|
|
19615
19615
|
|
|
@@ -4806,7 +4806,7 @@ let AuroHelpText$2 = class AuroHelpText extends LitElement {
|
|
|
4806
4806
|
}
|
|
4807
4807
|
};
|
|
4808
4808
|
|
|
4809
|
-
var formkitVersion$2 = '
|
|
4809
|
+
var formkitVersion$2 = '202606251933';
|
|
4810
4810
|
|
|
4811
4811
|
let AuroElement$2 = class AuroElement extends LitElement {
|
|
4812
4812
|
static get properties() {
|
|
@@ -18399,7 +18399,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
|
|
|
18399
18399
|
}
|
|
18400
18400
|
};
|
|
18401
18401
|
|
|
18402
|
-
var formkitVersion$1 = '
|
|
18402
|
+
var formkitVersion$1 = '202606251933';
|
|
18403
18403
|
|
|
18404
18404
|
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
18405
18405
|
// See LICENSE in the project root for license information.
|
|
@@ -19520,7 +19520,7 @@ class AuroBibtemplate extends LitElement {
|
|
|
19520
19520
|
}
|
|
19521
19521
|
}
|
|
19522
19522
|
|
|
19523
|
-
var formkitVersion = '
|
|
19523
|
+
var formkitVersion = '202606251933';
|
|
19524
19524
|
|
|
19525
19525
|
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}`;
|
|
19526
19526
|
|
|
@@ -4806,7 +4806,7 @@ let AuroHelpText$2 = class AuroHelpText extends LitElement {
|
|
|
4806
4806
|
}
|
|
4807
4807
|
};
|
|
4808
4808
|
|
|
4809
|
-
var formkitVersion$2 = '
|
|
4809
|
+
var formkitVersion$2 = '202606251933';
|
|
4810
4810
|
|
|
4811
4811
|
let AuroElement$2 = class AuroElement extends LitElement {
|
|
4812
4812
|
static get properties() {
|
|
@@ -18399,7 +18399,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
|
|
|
18399
18399
|
}
|
|
18400
18400
|
};
|
|
18401
18401
|
|
|
18402
|
-
var formkitVersion$1 = '
|
|
18402
|
+
var formkitVersion$1 = '202606251933';
|
|
18403
18403
|
|
|
18404
18404
|
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
18405
18405
|
// See LICENSE in the project root for license information.
|
|
@@ -19520,7 +19520,7 @@ class AuroBibtemplate extends LitElement {
|
|
|
19520
19520
|
}
|
|
19521
19521
|
}
|
|
19522
19522
|
|
|
19523
|
-
var formkitVersion = '
|
|
19523
|
+
var formkitVersion = '202606251933';
|
|
19524
19524
|
|
|
19525
19525
|
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}`;
|
|
19526
19526
|
|
|
@@ -1099,7 +1099,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$2 {
|
|
|
1099
1099
|
}
|
|
1100
1100
|
};
|
|
1101
1101
|
|
|
1102
|
-
var formkitVersion$1 = '
|
|
1102
|
+
var formkitVersion$1 = '202606251933';
|
|
1103
1103
|
|
|
1104
1104
|
// Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
|
|
1105
1105
|
// See LICENSE in the project root for license information.
|
|
@@ -5445,7 +5445,7 @@ class AuroHelpText extends i$2 {
|
|
|
5445
5445
|
}
|
|
5446
5446
|
}
|
|
5447
5447
|
|
|
5448
|
-
var formkitVersion = '
|
|
5448
|
+
var formkitVersion = '202606251933';
|
|
5449
5449
|
|
|
5450
5450
|
let AuroElement$1 = class AuroElement extends i$2 {
|
|
5451
5451
|
static get properties() {
|
|
@@ -1099,7 +1099,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$2 {
|
|
|
1099
1099
|
}
|
|
1100
1100
|
};
|
|
1101
1101
|
|
|
1102
|
-
var formkitVersion$1 = '
|
|
1102
|
+
var formkitVersion$1 = '202606251933';
|
|
1103
1103
|
|
|
1104
1104
|
// Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
|
|
1105
1105
|
// See LICENSE in the project root for license information.
|
|
@@ -5445,7 +5445,7 @@ class AuroHelpText extends i$2 {
|
|
|
5445
5445
|
}
|
|
5446
5446
|
}
|
|
5447
5447
|
|
|
5448
|
-
var formkitVersion = '
|
|
5448
|
+
var formkitVersion = '202606251933';
|
|
5449
5449
|
|
|
5450
5450
|
let AuroElement$1 = class AuroElement extends i$2 {
|
|
5451
5451
|
static get properties() {
|
|
@@ -1049,7 +1049,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
|
|
|
1049
1049
|
}
|
|
1050
1050
|
};
|
|
1051
1051
|
|
|
1052
|
-
var formkitVersion$1 = '
|
|
1052
|
+
var formkitVersion$1 = '202606251933';
|
|
1053
1053
|
|
|
1054
1054
|
// Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
|
|
1055
1055
|
// See LICENSE in the project root for license information.
|
|
@@ -5377,7 +5377,7 @@ class AuroHelpText extends LitElement {
|
|
|
5377
5377
|
}
|
|
5378
5378
|
}
|
|
5379
5379
|
|
|
5380
|
-
var formkitVersion = '
|
|
5380
|
+
var formkitVersion = '202606251933';
|
|
5381
5381
|
|
|
5382
5382
|
let AuroElement$1 = class AuroElement extends LitElement {
|
|
5383
5383
|
static get properties() {
|
|
@@ -1049,7 +1049,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
|
|
|
1049
1049
|
}
|
|
1050
1050
|
};
|
|
1051
1051
|
|
|
1052
|
-
var formkitVersion$1 = '
|
|
1052
|
+
var formkitVersion$1 = '202606251933';
|
|
1053
1053
|
|
|
1054
1054
|
// Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
|
|
1055
1055
|
// See LICENSE in the project root for license information.
|
|
@@ -5377,7 +5377,7 @@ class AuroHelpText extends LitElement {
|
|
|
5377
5377
|
}
|
|
5378
5378
|
}
|
|
5379
5379
|
|
|
5380
|
-
var formkitVersion = '
|
|
5380
|
+
var formkitVersion = '202606251933';
|
|
5381
5381
|
|
|
5382
5382
|
let AuroElement$1 = class AuroElement extends LitElement {
|
|
5383
5383
|
static get properties() {
|
|
@@ -83,7 +83,8 @@ When `range` is set, each date cell's label includes its position relative to th
|
|
|
83
83
|
| `rangeLabelEnd` | "range end" | Announced for the range end date. |
|
|
84
84
|
| `rangeLabelBeforeRange` | "before range" | Announced for dates before the range start. |
|
|
85
85
|
| `rangeLabelInRange` | "in range" | Announced for dates within the selected range. |
|
|
86
|
-
| `rangeLabelAfterRange` | "after range" | Announced for dates after
|
|
86
|
+
| `rangeLabelAfterRange` | "after range" | Announced for dates after a fully selected range. |
|
|
87
|
+
| `rangeLabelEndPreview` | "previewing range end" | Announced for the focused cell while picking the range end (`dateFrom` set, `dateTo` not yet selected) so AT users know Enter would commit this cell as the range end. |
|
|
87
88
|
|
|
88
89
|
<auro-header level="2" id="fullscreenBehavior">Fullscreen (Modal) Behavior</auro-header>
|
|
89
90
|
On smaller viewports, the calendar bib opens as a fullscreen modal dialog:
|
|
@@ -7,68 +7,69 @@ The `auro-datepicker` component provides users with a way to select a date or da
|
|
|
7
7
|
|
|
8
8
|
## Properties
|
|
9
9
|
|
|
10
|
-
| Property | Attribute | Modifiers | Type | Default
|
|
11
|
-
|
|
12
|
-
| `appearance` | `appearance` | | `'default' \| 'inverse'` | "'default'"
|
|
13
|
-
| `autoPlacement` | `autoPlacement` | | `boolean` | "false"
|
|
14
|
-
| `blackoutDates` | `blackoutDates` | | `array` | []
|
|
15
|
-
| `blackoutLabel` | `blackoutLabel` | | `string` | "unavailable" | Label announced for blackout (disabled but in-range) date cells. |
|
|
16
|
-
| `calendarEndDate` | `calendarEndDate` | | `string` | "undefined"
|
|
17
|
-
| `calendarEndDateObject` | | readonly | `Date \| undefined` |
|
|
18
|
-
| `calendarFocusDate` | `calendarFocusDate` | | `string` | "value"
|
|
19
|
-
| `calendarFocusDateObject` | | readonly | `Date \| undefined` |
|
|
20
|
-
| `calendarGridLabel` | `calendarGridLabel` | | `string` | "Calendar days of the month" | Accessible label for the calendar grid containing the days of the month. |
|
|
21
|
-
| `calendarStartDate` | `calendarStartDate` | | `string` | "undefined"
|
|
22
|
-
| `calendarStartDateObject` | | readonly | `Date \| undefined` |
|
|
23
|
-
| `centralDate` | `centralDate` | | `string` |
|
|
24
|
-
| `centralDateObject` | | readonly | `Date \| undefined` |
|
|
25
|
-
| `disabled` | `disabled` | | `boolean` | false
|
|
26
|
-
| `dvInputOnly` | `dvInputOnly` | | `boolean` | false
|
|
27
|
-
| `error` | `error` | | `string` |
|
|
28
|
-
| `format` | `format` | | `string` |
|
|
29
|
-
| `fullscreenBreakpoint` | `fullscreenBreakpoint` | | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'disabled'` | "'sm'"
|
|
30
|
-
| `hasError` | | readonly | `boolean` |
|
|
31
|
-
| `inputmode` | `inputmode` | | `string` |
|
|
32
|
-
| `largeFullscreenHeadline` | `largeFullscreenHeadline` | | `boolean` | false
|
|
33
|
-
| `layout` | `layout` | | `'classic' \| 'snowflake'` | "'classic'"
|
|
34
|
-
| `locale` | `locale` | | `string` |
|
|
35
|
-
| `maxDate` | `maxDate` | | `string` |
|
|
36
|
-
| `maxDateObject` | | readonly | `Date \| undefined` |
|
|
37
|
-
| `minDate` | `minDate` | | `string` |
|
|
38
|
-
| `minDateObject` | | readonly | `Date \| undefined` |
|
|
39
|
-
| `monthNames` | `monthNames` | | `array` |
|
|
40
|
-
| `navLabelNextMonth` | `navLabelNextMonth` | | `string` | "Next month" | Accessible label for the next month navigation button. |
|
|
41
|
-
| `navLabelPrevMonth` | `navLabelPrevMonth` | | `string` | "Previous month" | Accessible label for the previous month navigation button. |
|
|
42
|
-
| `noFlip` | `noFlip` | | `boolean` | false
|
|
43
|
-
| `noValidate` | `noValidate` | | `boolean` | false
|
|
44
|
-
| `offset` | `offset` | | `number` | "0"
|
|
45
|
-
| `onDark` | `onDark` | | `boolean` | false
|
|
46
|
-
| `placeholder` | `placeholder` | | `string` |
|
|
47
|
-
| `placeholderEndDate` | `placeholderEndDate` | | `string` |
|
|
48
|
-
| `placement` | `placement` | | `'top' \| 'right' \| 'bottom' \| 'left' \| 'bottom-start' \| 'top-start' \| 'top-end' \| 'right-start' \| 'right-end' \| 'bottom-end' \| 'left-start' \| 'left-end'` | "'bottom-start'"
|
|
49
|
-
| `range` | `range` | | `boolean` | false
|
|
50
|
-
| `rangeLabelAfterRange` | `rangeLabelAfterRange` | | `string` | "after range" | Label announced for cells after the range (or after start when no end is selected). |
|
|
51
|
-
| `rangeLabelBeforeRange` | `rangeLabelBeforeRange` | | `string` | "before range" | Label announced for cells before the range start. |
|
|
52
|
-
| `rangeLabelEnd` | `rangeLabelEnd` | | `string` | "range end" | Label announced for the range end date cell. |
|
|
53
|
-
| `
|
|
54
|
-
| `
|
|
55
|
-
| `
|
|
56
|
-
| `
|
|
57
|
-
| `
|
|
58
|
-
| `
|
|
59
|
-
| `
|
|
60
|
-
| `
|
|
61
|
-
| `
|
|
62
|
-
| `
|
|
63
|
-
| `
|
|
64
|
-
| `
|
|
65
|
-
| `
|
|
66
|
-
| `
|
|
67
|
-
| `
|
|
68
|
-
| `
|
|
69
|
-
| `
|
|
70
|
-
| `
|
|
71
|
-
| `
|
|
10
|
+
| Property | Attribute | Modifiers | Type | Default | Description |
|
|
11
|
+
|-----------------------------------|-----------------------------------|-----------|--------------------------------------------------|--------------------------------|--------------------------------------------------|
|
|
12
|
+
| `appearance` | `appearance` | | `'default' \| 'inverse'` | "'default'" | Defines whether the component will be on lighter or darker backgrounds. |
|
|
13
|
+
| `autoPlacement` | `autoPlacement` | | `boolean` | "false" | If declared, bib's position will be automatically calculated where to appear. |
|
|
14
|
+
| `blackoutDates` | `blackoutDates` | | `array` | [] | Array of dates that cannot be selected. Dates should be in ISO format (YYYY-MM-DD). |
|
|
15
|
+
| `blackoutLabel` | `blackoutLabel` | | `string` | "'unavailable'" | Label announced for blackout (disabled but in-range) date cells. |
|
|
16
|
+
| `calendarEndDate` | `calendarEndDate` | | `string` | "undefined" | The last date that may be displayed in the calendar. |
|
|
17
|
+
| `calendarEndDateObject` | | readonly | `Date \| undefined` | | Read-only `Date` object derived from `calendarEndDate`. Returns `undefined` when `calendarEndDate` is empty or not a valid date. |
|
|
18
|
+
| `calendarFocusDate` | `calendarFocusDate` | | `string` | "value" | The date that will first be visually rendered to the user in the calendar. |
|
|
19
|
+
| `calendarFocusDateObject` | | readonly | `Date \| undefined` | | Read-only `Date` object derived from `calendarFocusDate`. Returns `undefined` when `calendarFocusDate` is empty or not a valid date. |
|
|
20
|
+
| `calendarGridLabel` | `calendarGridLabel` | | `string` | "'Calendar days of the month'" | Accessible label for the calendar grid containing the days of the month. |
|
|
21
|
+
| `calendarStartDate` | `calendarStartDate` | | `string` | "undefined" | The first date that may be displayed in the calendar. |
|
|
22
|
+
| `calendarStartDateObject` | | readonly | `Date \| undefined` | | Read-only `Date` object derived from `calendarStartDate`. Returns `undefined` when `calendarStartDate` is empty or not a valid date. |
|
|
23
|
+
| `centralDate` | `centralDate` | | `string` | | The date that determines the currently visible month. |
|
|
24
|
+
| `centralDateObject` | | readonly | `Date \| undefined` | | Read-only `Date` object derived from `centralDate`. Returns `undefined` when `centralDate` is empty or not a valid date. |
|
|
25
|
+
| `disabled` | `disabled` | | `boolean` | false | If set, disables the datepicker. |
|
|
26
|
+
| `dvInputOnly` | `dvInputOnly` | | `boolean` | false | If defined, the display value slot content will only mask the HTML5 input element. The input's label will not be masked. |
|
|
27
|
+
| `error` | `error` | | `string` | | When defined, sets persistent validity to `customError` and sets the validation message to the attribute value. |
|
|
28
|
+
| `format` | `format` | | `string` | | Specifies the date format. The default is `mm/dd/yyyy`. |
|
|
29
|
+
| `fullscreenBreakpoint` | `fullscreenBreakpoint` | | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'disabled'` | "'sm'" | Defines the screen size breakpoint at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.<br /><br />When expanded, the dropdown will automatically display in fullscreen mode<br />if the screen size is equal to or smaller than the selected breakpoint. |
|
|
30
|
+
| `hasError` | | readonly | `boolean` | | Returns `true` when the datepicker has an active validation error. |
|
|
31
|
+
| `inputmode` | `inputmode` | | `string` | | Exposes inputmode attribute for input. |
|
|
32
|
+
| `largeFullscreenHeadline` | `largeFullscreenHeadline` | | `boolean` | false | If declared, make bib.fullscreen.headline in HeadingDisplay.<br />Otherwise, Heading 600. |
|
|
33
|
+
| `layout` | `layout` | | `'classic' \| 'snowflake'` | "'classic'" | Sets the layout of the datepicker. |
|
|
34
|
+
| `locale` | `locale` | | `string` | | Defines the locale of the element. Used to derive the date format when `format` is not explicitly set. |
|
|
35
|
+
| `maxDate` | `maxDate` | | `string` | | Maximum date. All dates after will be disabled. |
|
|
36
|
+
| `maxDateObject` | | readonly | `Date \| undefined` | | Read-only `Date` object derived from `maxDate`. Returns `undefined` when `maxDate` is empty or not a valid date. |
|
|
37
|
+
| `minDate` | `minDate` | | `string` | | Minimum date. All dates before will be disabled. |
|
|
38
|
+
| `minDateObject` | | readonly | `Date \| undefined` | | Read-only `Date` object derived from `minDate`. Returns `undefined` when `minDate` is empty or not a valid date. |
|
|
39
|
+
| `monthNames` | `monthNames` | | `array` | | Names of all 12 months to render in the calendar.<br />When omitted, month names will be automatically populated from the active `locale` (falling back to `en-US`). |
|
|
40
|
+
| `navLabelNextMonth` | `navLabelNextMonth` | | `string` | "'Next month'" | Accessible label for the next month navigation button. |
|
|
41
|
+
| `navLabelPrevMonth` | `navLabelPrevMonth` | | `string` | "'Previous month'" | Accessible label for the previous month navigation button. |
|
|
42
|
+
| `noFlip` | `noFlip` | | `boolean` | false | If declared, the bib will NOT flip to an alternate position<br />when there isn't enough space in the specified `placement`. |
|
|
43
|
+
| `noValidate` | `noValidate` | | `boolean` | false | If set, disables auto-validation on blur. |
|
|
44
|
+
| `offset` | `offset` | | `number` | "0" | Gap between the trigger element and bib. |
|
|
45
|
+
| `onDark` | `onDark` | | `boolean` | false | DEPRECATED - use `appearance="inverse"` instead. |
|
|
46
|
+
| `placeholder` | `placeholder` | | `string` | | Placeholder text to display in the input(s) when no value is set. |
|
|
47
|
+
| `placeholderEndDate` | `placeholderEndDate` | | `string` | | Optional placeholder text to display in the second input when using date range.<br />By default, datepicker will use `placeholder` for both inputs if placeholder is<br />specified, but placeholderEndDate is not. |
|
|
48
|
+
| `placement` | `placement` | | `'top' \| 'right' \| 'bottom' \| 'left' \| 'bottom-start' \| 'top-start' \| 'top-end' \| 'right-start' \| 'right-end' \| 'bottom-end' \| 'left-start' \| 'left-end'` | "'bottom-start'" | Position where the bib should appear relative to the trigger. |
|
|
49
|
+
| `range` | `range` | | `boolean` | false | If set, turns on date range functionality in auro-calendar. |
|
|
50
|
+
| `rangeLabelAfterRange` | `rangeLabelAfterRange` | | `string` | "'after range'" | Label announced for cells after the range (or after start when no end is selected). |
|
|
51
|
+
| `rangeLabelBeforeRange` | `rangeLabelBeforeRange` | | `string` | "'before range'" | Label announced for cells before the range start. |
|
|
52
|
+
| `rangeLabelEnd` | `rangeLabelEnd` | | `string` | "'range end'" | Label announced for the range end date cell. |
|
|
53
|
+
| `rangeLabelEndPreview` | `rangeLabelEndPreview` | | `string` | "'previewing range end'" | Label announced for the focused cell while previewing a range end<br />(dateFrom set, dateTo not yet selected). Tells AT users that<br />pressing Enter would commit this cell as the range end. |
|
|
54
|
+
| `rangeLabelInRange` | `rangeLabelInRange` | | `string` | "'in range'" | Label announced for cells within the selected range. |
|
|
55
|
+
| `rangeLabelStart` | `rangeLabelStart` | | `string` | "'range start'" | Label announced for the range start date cell. |
|
|
56
|
+
| `referenceDates` | `referenceDates` | | `array` | | Dates that the user should have for reference as part of their decision making when selecting a date.<br />This should be a JSON string array of ISO date strings (`YYYY-MM-DD`). |
|
|
57
|
+
| `required` | `required` | | `boolean` | false | Populates the `required` attribute on the input. Used for client-side validation. |
|
|
58
|
+
| `setCustomValidity` | `setCustomValidity` | | `string` | | Sets a custom help text message to display for all validityStates. |
|
|
59
|
+
| `setCustomValidityCustomError` | `setCustomValidityCustomError` | | `string` | | Custom help text message to display when validity = `customError`.<br />Also used as the validation message when a blackout date is typed into the input. |
|
|
60
|
+
| `setCustomValidityRangeOverflow` | `setCustomValidityRangeOverflow` | | `string` | | Custom help text message to display when validity = `rangeOverflow`. |
|
|
61
|
+
| `setCustomValidityRangeUnderflow` | `setCustomValidityRangeUnderflow` | | `string` | | Custom help text message to display when validity = `rangeUnderflow`. |
|
|
62
|
+
| `setCustomValidityValueMissing` | `setCustomValidityValueMissing` | | `string` | | Custom help text message to display when validity = `valueMissing`. |
|
|
63
|
+
| `shape` | | | `string` | "classic" | |
|
|
64
|
+
| `shift` | `shift` | | `boolean` | false | If declared, the dropdown will shift its position to avoid being cut off by the viewport. |
|
|
65
|
+
| `size` | | | `string` | "lg" | |
|
|
66
|
+
| `stacked` | `stacked` | | `boolean` | false | Set true to make datepicker stacked style. |
|
|
67
|
+
| `validity` | `validity` | | `string` | "undefined" | Specifies the `validityState` this element is in. |
|
|
68
|
+
| `value` | `value` | | `string` | "undefined" | Value selected for the datepicker. |
|
|
69
|
+
| `valueEnd` | `valueEnd` | | `string` | "undefined" | Value selected for the second datepicker when using date range. |
|
|
70
|
+
| `valueEndObject` | | readonly | `Date \| undefined` | | Read-only `Date` object derived from `valueEnd`. Returns `undefined` when `valueEnd` is empty or not a valid date. |
|
|
71
|
+
| `valueObject` | | readonly | `Date \| undefined` | | Read-only `Date` object derived from `value`. Returns `undefined` when `value` is empty or not a valid date. |
|
|
72
|
+
| `values` | | readonly | `string[]` | | A convenience wrapper for `value` and `valueEnd`, uses the new Auro "array value pattern". |
|
|
72
73
|
|
|
73
74
|
## Methods
|
|
74
75
|
|
|
@@ -296,6 +296,7 @@
|
|
|
296
296
|
rangeLabelBeforeRange="antes de la salida"
|
|
297
297
|
rangeLabelInRange="entre vuelos"
|
|
298
298
|
rangeLabelAfterRange="después del regreso"
|
|
299
|
+
rangeLabelEndPreview="previsualizando fecha de regreso"
|
|
299
300
|
navLabelPrevMonth="Ir al mes anterior"
|
|
300
301
|
navLabelNextMonth="Ir al mes siguiente"
|
|
301
302
|
calendarGridLabel="Días del mes del calendario"
|
|
@@ -324,6 +325,7 @@
|
|
|
324
325
|
rangeLabelBeforeRange="antes de la salida"
|
|
325
326
|
rangeLabelInRange="entre vuelos"
|
|
326
327
|
rangeLabelAfterRange="después del regreso"
|
|
328
|
+
rangeLabelEndPreview="previsualizando fecha de regreso"
|
|
327
329
|
navLabelPrevMonth="Ir al mes anterior"
|
|
328
330
|
navLabelNextMonth="Ir al mes siguiente"
|
|
329
331
|
calendarGridLabel="Días del mes del calendario"
|
|
@@ -340,7 +342,7 @@
|
|
|
340
342
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
341
343
|
</auro-accordion>
|
|
342
344
|
<auro-header level="5" id="localizationCalendarA11yStrings">Screen Reader Strings</auro-header>
|
|
343
|
-
<p>Assistive-technology announcements — range descriptors (<code>rangeLabelStart</code>, <code>rangeLabelEnd</code>, <code>rangeLabelBeforeRange</code>, <code>rangeLabelInRange</code>, <code>rangeLabelAfterRange</code>), month navigation labels (<code>navLabelPrevMonth</code>, <code>navLabelNextMonth</code>), and the calendar grid label (<code>calendarGridLabel</code>) — are exposed as individual attributes so they can be translated independently of the visible UI. These strings are not derived from <code>locale</code>; supply translated values for every language you support.</p>
|
|
345
|
+
<p>Assistive-technology announcements — range descriptors (<code>rangeLabelStart</code>, <code>rangeLabelEnd</code>, <code>rangeLabelEndPreview</code>, <code>rangeLabelBeforeRange</code>, <code>rangeLabelInRange</code>, <code>rangeLabelAfterRange</code>), month navigation labels (<code>navLabelPrevMonth</code>, <code>navLabelNextMonth</code>), and the calendar grid label (<code>calendarGridLabel</code>) — are exposed as individual attributes so they can be translated independently of the visible UI. These strings are not derived from <code>locale</code>; supply translated values for every language you support.</p>
|
|
344
346
|
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/localization-screenreader-strings.html) -->
|
|
345
347
|
<!-- The below content is automatically added from ./../apiExamples/localization-screenreader-strings.html -->
|
|
346
348
|
|
|
@@ -352,6 +354,7 @@
|
|
|
352
354
|
+ rangeLabelBeforeRange="vor dem Zeitraum"
|
|
353
355
|
+ rangeLabelInRange="im Zeitraum"
|
|
354
356
|
+ rangeLabelAfterRange="nach dem Zeitraum"
|
|
357
|
+
+ rangeLabelEndPreview="Vorschau Enddatum"
|
|
355
358
|
+ navLabelPrevMonth="Vorheriger Monat"
|
|
356
359
|
+ navLabelNextMonth="Nächster Monat"
|
|
357
360
|
+ calendarGridLabel="Kalendertage des Monats">
|
|
@@ -412,6 +415,7 @@
|
|
|
412
415
|
rangeLabelBeforeRange="vor dem Zeitraum"
|
|
413
416
|
rangeLabelInRange="im Zeitraum"
|
|
414
417
|
rangeLabelAfterRange="nach dem Zeitraum"
|
|
418
|
+
rangeLabelEndPreview="Vorschau Enddatum"
|
|
415
419
|
navLabelPrevMonth="Vorheriger Monat"
|
|
416
420
|
navLabelNextMonth="Nächster Monat"
|
|
417
421
|
calendarGridLabel="Kalendertage des Monats">
|
|
@@ -433,6 +437,7 @@
|
|
|
433
437
|
rangeLabelBeforeRange="在此期间之前"
|
|
434
438
|
rangeLabelInRange="在此期间内"
|
|
435
439
|
rangeLabelAfterRange="在此期间之后"
|
|
440
|
+
rangeLabelEndPreview="预览结束日期"
|
|
436
441
|
navLabelPrevMonth="上个月"
|
|
437
442
|
navLabelNextMonth="下个月"
|
|
438
443
|
calendarGridLabel="本月的日历天数">
|
|
@@ -453,6 +458,7 @@
|
|
|
453
458
|
rangeLabelBeforeRange="vor dem Zeitraum"
|
|
454
459
|
rangeLabelInRange="im Zeitraum"
|
|
455
460
|
rangeLabelAfterRange="nach dem Zeitraum"
|
|
461
|
+
rangeLabelEndPreview="Vorschau Enddatum"
|
|
456
462
|
navLabelPrevMonth="Vorheriger Monat"
|
|
457
463
|
navLabelNextMonth="Nächster Monat"
|
|
458
464
|
calendarGridLabel="Kalendertage des Monats">
|
|
@@ -475,6 +481,7 @@
|
|
|
475
481
|
rangeLabelBeforeRange="この期間の前"
|
|
476
482
|
rangeLabelInRange="この期間内"
|
|
477
483
|
rangeLabelAfterRange="この期間の後"
|
|
484
|
+
rangeLabelEndPreview="終了日プレビュー"
|
|
478
485
|
navLabelPrevMonth="前の月"
|
|
479
486
|
navLabelNextMonth="次の月"
|
|
480
487
|
calendarGridLabel="カレンダーの日付">
|
|
@@ -504,6 +511,7 @@
|
|
|
504
511
|
rangeLabelBeforeRange="vor dem Zeitraum"
|
|
505
512
|
rangeLabelInRange="im Zeitraum"
|
|
506
513
|
rangeLabelAfterRange="nach dem Zeitraum"
|
|
514
|
+
rangeLabelEndPreview="Vorschau Enddatum"
|
|
507
515
|
navLabelPrevMonth="Vorheriger Monat"
|
|
508
516
|
navLabelNextMonth="Nächster Monat"
|
|
509
517
|
calendarGridLabel="Kalendertage des Monats">
|
|
@@ -525,6 +533,7 @@
|
|
|
525
533
|
rangeLabelBeforeRange="在此期间之前"
|
|
526
534
|
rangeLabelInRange="在此期间内"
|
|
527
535
|
rangeLabelAfterRange="在此期间之后"
|
|
536
|
+
rangeLabelEndPreview="预览结束日期"
|
|
528
537
|
navLabelPrevMonth="上个月"
|
|
529
538
|
navLabelNextMonth="下个月"
|
|
530
539
|
calendarGridLabel="本月的日历天数">
|
|
@@ -545,6 +554,7 @@
|
|
|
545
554
|
rangeLabelBeforeRange="vor dem Zeitraum"
|
|
546
555
|
rangeLabelInRange="im Zeitraum"
|
|
547
556
|
rangeLabelAfterRange="nach dem Zeitraum"
|
|
557
|
+
rangeLabelEndPreview="Vorschau Enddatum"
|
|
548
558
|
navLabelPrevMonth="Vorheriger Monat"
|
|
549
559
|
navLabelNextMonth="Nächster Monat"
|
|
550
560
|
calendarGridLabel="Kalendertage des Monats">
|
|
@@ -567,6 +577,7 @@
|
|
|
567
577
|
rangeLabelBeforeRange="この期間の前"
|
|
568
578
|
rangeLabelInRange="この期間内"
|
|
569
579
|
rangeLabelAfterRange="この期間の後"
|
|
580
|
+
rangeLabelEndPreview="終了日プレビュー"
|
|
570
581
|
navLabelPrevMonth="前の月"
|
|
571
582
|
navLabelNextMonth="次の月"
|
|
572
583
|
calendarGridLabel="カレンダーの日付">
|