@aurodesignsystem-dev/auro-formkit 0.0.0-pr1628.2 → 0.0.0-pr1628.4
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 +5 -5
- package/components/combobox/demo/getting-started.min.js +5 -5
- package/components/combobox/demo/index.min.js +5 -5
- package/components/combobox/dist/index.js +5 -5
- package/components/combobox/dist/registered.js +5 -5
- package/components/counter/demo/customize.min.js +4 -4
- package/components/counter/demo/getting-started.min.js +4 -4
- package/components/counter/demo/index.min.js +4 -4
- package/components/counter/dist/index.js +4 -4
- package/components/counter/dist/registered.js +4 -4
- package/components/datepicker/demo/accessibility.md +3 -3
- package/components/datepicker/demo/api.md +3 -3
- package/components/datepicker/demo/customize.md +10 -10
- package/components/datepicker/demo/customize.min.js +32 -20
- package/components/datepicker/demo/design.md +9 -9
- package/components/datepicker/demo/getting-started.md +3 -3
- package/components/datepicker/demo/getting-started.min.js +32 -20
- package/components/datepicker/demo/index.md +3 -3
- package/components/datepicker/demo/index.min.js +32 -20
- package/components/datepicker/demo/voiceover.md +1 -1
- package/components/datepicker/dist/auro-calendar.d.ts +1 -1
- package/components/datepicker/dist/auro-datepicker.d.ts +3 -3
- package/components/datepicker/dist/datepickerKeyboardStrategy.d.ts +3 -0
- package/components/datepicker/dist/index.js +32 -20
- package/components/datepicker/dist/registered.js +32 -20
- package/components/datepicker/dist/utilities.d.ts +3 -0
- package/components/datepicker/dist/utilitiesCalendar.d.ts +3 -0
- package/components/datepicker/dist/utilitiesCalendarRender.d.ts +3 -0
- package/components/datepicker/dist/vendor/wc-range-datepicker/range-datepicker-calendar.d.ts +4 -4
- package/components/datepicker/dist/vendor/wc-range-datepicker/range-datepicker.d.ts +7 -7
- package/components/dropdown/demo/api.md +5 -5
- package/components/dropdown/demo/customize.md +1 -1
- package/components/dropdown/demo/customize.min.js +3 -3
- package/components/dropdown/demo/design.md +4 -4
- package/components/dropdown/demo/getting-started.min.js +4 -4
- package/components/dropdown/demo/index.min.js +3 -3
- package/components/dropdown/dist/auro-dropdown.d.ts +2 -2
- package/components/dropdown/dist/index.js +3 -3
- package/components/dropdown/dist/registered.js +3 -3
- package/components/form/demo/customize.min.js +48 -36
- package/components/form/demo/getting-started.min.js +48 -36
- package/components/form/demo/index.min.js +48 -36
- package/components/form/demo/registerDemoDeps.min.js +48 -36
- 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 +4 -4
- package/components/select/demo/getting-started.min.js +4 -4
- package/components/select/demo/index.min.js +4 -4
- package/components/select/dist/index.js +4 -4
- package/components/select/dist/registered.js +4 -4
- package/custom-elements.json +14 -13
- package/package.json +1 -1
|
@@ -10631,6 +10631,9 @@ function getDateFormatFromLocale$1 (locale) {
|
|
|
10631
10631
|
/* eslint-disable array-element-newline, dot-location */
|
|
10632
10632
|
|
|
10633
10633
|
|
|
10634
|
+
/**
|
|
10635
|
+
* Date helpers the datepicker and its calendar share, such as finding the first day of a month and counting the months between two dates.
|
|
10636
|
+
*/
|
|
10634
10637
|
class AuroDatepickerUtilities {
|
|
10635
10638
|
|
|
10636
10639
|
/**
|
|
@@ -10701,6 +10704,9 @@ const t$1=globalThis,e$3=t$1.ShadowRoot&&(void 0===t$1.ShadyCSS||t$1.ShadyCSS.na
|
|
|
10701
10704
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
10702
10705
|
*/const s$3=globalThis;let i$1 = class i extends y$4{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0;}createRenderRoot(){const t=super.createRenderRoot();return this.renderOptions.renderBefore??=t.firstChild,t}update(t){const r=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=D$1(r,this.renderRoot,this.renderOptions);}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(true);}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(false);}render(){return E$1}};i$1._$litElement$=true,i$1["finalized"]=true,s$3.litElementHydrateSupport?.({LitElement:i$1});const o$5=s$3.litElementPolyfillSupport;o$5?.({LitElement:i$1});(s$3.litElementVersions??=[]).push("4.2.2");
|
|
10703
10706
|
|
|
10707
|
+
/**
|
|
10708
|
+
* Helpers the datepicker and its calendar use to set the month the calendar shows, and to choose and render the calendar's months.
|
|
10709
|
+
*/
|
|
10704
10710
|
class UtilitiesCalendarRender {
|
|
10705
10711
|
constructor() {
|
|
10706
10712
|
this.util = new AuroDatepickerUtilities();
|
|
@@ -11142,12 +11148,12 @@ class RangeDatepickerCalendar extends i$1 {
|
|
|
11142
11148
|
super();
|
|
11143
11149
|
|
|
11144
11150
|
/**
|
|
11145
|
-
*
|
|
11151
|
+
* Sets the chosen date, or the start date of a range, as a Unix timestamp in seconds.
|
|
11146
11152
|
*/
|
|
11147
11153
|
this.dateFrom = null;
|
|
11148
11154
|
|
|
11149
11155
|
/**
|
|
11150
|
-
*
|
|
11156
|
+
* Sets the end date of a range, as a Unix timestamp in seconds.
|
|
11151
11157
|
*/
|
|
11152
11158
|
this.dateTo = null;
|
|
11153
11159
|
this.hoveredDate = null;
|
|
@@ -11161,12 +11167,12 @@ class RangeDatepickerCalendar extends i$1 {
|
|
|
11161
11167
|
this.disabledDays = [];
|
|
11162
11168
|
|
|
11163
11169
|
/**
|
|
11164
|
-
*
|
|
11170
|
+
* Sets the latest date people can choose, as a Unix timestamp in seconds.
|
|
11165
11171
|
*/
|
|
11166
11172
|
this.max = null;
|
|
11167
11173
|
|
|
11168
11174
|
/**
|
|
11169
|
-
*
|
|
11175
|
+
* Sets the earliest date people can choose, as a Unix timestamp in seconds.
|
|
11170
11176
|
*/
|
|
11171
11177
|
this.min = null;
|
|
11172
11178
|
this.yearsList = [];
|
|
@@ -13017,37 +13023,37 @@ class RangeDatepicker extends i$1 {
|
|
|
13017
13023
|
super();
|
|
13018
13024
|
|
|
13019
13025
|
/**
|
|
13020
|
-
*
|
|
13026
|
+
* Sets dates people can't select, as Unix timestamps in seconds.
|
|
13021
13027
|
*/
|
|
13022
13028
|
this.disabledDays = [];
|
|
13023
13029
|
|
|
13024
13030
|
/**
|
|
13025
|
-
*
|
|
13031
|
+
* Shows the previous and next month buttons on every month, and lets each month change on its own. It doesn't currently show a control for choosing the year.
|
|
13026
13032
|
*/
|
|
13027
13033
|
this.enableYearChange = false;
|
|
13028
13034
|
|
|
13029
13035
|
/**
|
|
13030
|
-
*
|
|
13036
|
+
* Shows one month at a time, even on screens wider than 650 pixels.
|
|
13031
13037
|
*/
|
|
13032
13038
|
this.forceNarrow = false;
|
|
13033
13039
|
|
|
13034
13040
|
/**
|
|
13035
|
-
*
|
|
13041
|
+
* Sets the date-fns locale object used for the month and weekday names, such as `enUS`. Uses `enUS` when not set.
|
|
13036
13042
|
*/
|
|
13037
13043
|
this.locale = null;
|
|
13038
13044
|
|
|
13039
13045
|
/**
|
|
13040
|
-
*
|
|
13046
|
+
* Sets the latest date people can choose, as a Unix timestamp in seconds.
|
|
13041
13047
|
*/
|
|
13042
13048
|
this.max = '8640000000000';
|
|
13043
13049
|
|
|
13044
13050
|
/**
|
|
13045
|
-
*
|
|
13051
|
+
* Sets the earliest date people can choose, as a Unix timestamp in seconds.
|
|
13046
13052
|
*/
|
|
13047
13053
|
this.min = '-8640000000000';
|
|
13048
13054
|
|
|
13049
13055
|
/**
|
|
13050
|
-
*
|
|
13056
|
+
* Lets people choose only one date instead of a start date and an end date.
|
|
13051
13057
|
*/
|
|
13052
13058
|
this.noRange = false;
|
|
13053
13059
|
this.dateFrom = null;
|
|
@@ -13263,6 +13269,9 @@ var chevronLeft = {"role":"img","color":"currentColor","title":"","desc":"Direct
|
|
|
13263
13269
|
|
|
13264
13270
|
var chevronRight = {"role":"img","color":"currentColor","title":"","desc":"Directional indicator; right.","width":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","height":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","xmlns":"http://www.w3.org/2000/svg","xmlns_xlink":"http://www.w3.org/1999/xlink","viewBox":"0 0 24 24","path":"/icons","style":"ico_squareLarge","type":"icon","name":"chevron-right","category":"interface","svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-labelledby=\"chevron-right__desc\" class=\"ico_squareLarge\" role=\"img\" style=\"min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor\" viewBox=\"0 0 24 24\" part=\"svg\"><title/><desc id=\"chevron-right__desc\">Directional indicator; right.</desc><path d=\"m9.605 17.551-.084-.072a.75.75 0 0 1-.072-.977l.072-.084 4.47-4.47-4.47-4.47a.75.75 0 0 1-.072-.976l.072-.084a.75.75 0 0 1 .977-.073l.084.073 4.823 4.823a1 1 0 0 1 0 1.415l-4.823 4.823a.75.75 0 0 1-.977.072\"/></svg>"};
|
|
13265
13271
|
|
|
13272
|
+
/**
|
|
13273
|
+
* Helpers the datepicker's calendar uses to change the month it shows, show or hide the previous and next month buttons, and scroll to a month.
|
|
13274
|
+
*/
|
|
13266
13275
|
class CalendarUtilities {
|
|
13267
13276
|
constructor() {
|
|
13268
13277
|
this.util = new AuroDatepickerUtilities();
|
|
@@ -13879,7 +13888,7 @@ class AuroBibtemplate extends i$1 {
|
|
|
13879
13888
|
}
|
|
13880
13889
|
}
|
|
13881
13890
|
|
|
13882
|
-
var formkitVersion$2 = '
|
|
13891
|
+
var formkitVersion$2 = '202611081829';
|
|
13883
13892
|
|
|
13884
13893
|
let l$1 = class l{generateElementName(e,t){let s=e;return s+="-",s+=t.replace(/[.]/g,"_"),s}generateTag(s,o,a){const r=this.generateElementName(s,o),i=i$5`${s$5(r)}`;return customElements.get(r)||customElements.define(r,class extends a{}),i}};let h$4 = class h{registerComponent(e,t){customElements.get(e)||customElements.define(e,class extends t{});}closestElement(e,t=this,s=(t,o=t&&t.closest(e))=>t&&t!==document&&t!==window?o||s(t.getRootNode().host):null){return s(t)}handleComponentTagRename(e,t){const s=t.toLowerCase();e.tagName.toLowerCase()!==s&&e.setAttribute(s,true);}elementMatch(e,t){const s=t.toLowerCase();return e.tagName.toLowerCase()===s||e.hasAttribute(s)}getSlotText(e,t){const s=e.shadowRoot?.querySelector(`slot[name="${t}"]`),o=(s?.assignedNodes({flatten:true})||[]).map(e=>e.textContent?.trim()).join(" ").trim();return o||null}};let d$1 = class d{registerComponent(e,t){customElements.get(e)||customElements.define(e,class extends t{});}closestElement(e,t=this,s=(t,o=t&&t.closest(e))=>t&&t!==document&&t!==window?o||s(t.getRootNode().host):null){return s(t)}handleComponentTagRename(e,t){const s=t.toLowerCase();e.tagName.toLowerCase()!==s&&e.setAttribute(s,true);}elementMatch(e,t){const s=t.toLowerCase();return e.tagName.toLowerCase()===s||e.hasAttribute(s)}getSlotText(e,t){const s=e.shadowRoot?.querySelector(`slot[name="${t}"]`);return (s?.assignedNodes({flatten:true})||[]).map(e=>e.textContent?.trim()).join(" ").trim()||null}};var c$3=i$3`:host{color:var(--ds-auro-loader-color)}:host>.loader-shape>span{border-color:var(--ds-auro-loader-border-color);background-color:var(--ds-auro-loader-background-color)}:host([onlight]),:host([appearance=brand]){--ds-auro-loader-color: var(--ds-basic-color-brand-primary, #01426a)}:host([ondark]),:host([appearance=inverse]){--ds-auro-loader-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host([orbit])>.loader-shape>span{--ds-auro-loader-background-color: transparent}:host([orbit])>.loader-shape>span:nth-child(1){--ds-auro-loader-border-color: currentcolor;opacity:.25}:host([orbit])>.loader-shape>span:nth-child(2){--ds-auro-loader-border-color: currentcolor;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent}
|
|
13885
13894
|
`,u$6=i$3`.body-default{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-default-font-size, 1rem);font-variant-ligatures:none;font-weight:var(--wcss-body-default-weight, );line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-default,.body-default-emphasized{letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-default-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-default-emphasized-font-size, 1rem);font-variant-ligatures:none;font-weight:var(--wcss-body-default-emphasized-weight, );line-height:var(--wcss-body-default-emphasized-line-height, 1.5rem)}.body-lg{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-lg-font-size, 1.125rem);font-variant-ligatures:none;font-weight:var(--wcss-body-lg-weight, );line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-lg,.body-lg-emphasized{letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-lg-emphasized-font-size, 1.125rem);font-variant-ligatures:none;font-weight:var(--wcss-body-lg-emphasized-weight, );line-height:var(--wcss-body-lg-emphasized-line-height, 1.625rem)}.body-sm{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-sm-font-size, .875rem);font-variant-ligatures:none;font-weight:var(--wcss-body-sm-weight, );line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm,.body-sm-emphasized{letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-sm-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-sm-emphasized-font-size, .875rem);font-variant-ligatures:none;font-weight:var(--wcss-body-sm-emphasized-weight, );line-height:var(--wcss-body-sm-emphasized-line-height, 1.25rem)}.body-xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-xs-font-size, .75rem);font-variant-ligatures:none;font-weight:var(--wcss-body-xs-weight, );line-height:var(--wcss-body-xs-line-height, 1rem)}.body-xs,.body-xs-emphasized{letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-xs-emphasized-font-size, .75rem);font-variant-ligatures:none;font-weight:var(--wcss-body-xs-emphasized-weight, );line-height:var(--wcss-body-xs-emphasized-line-height, 1rem)}.body-2xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-2xs-font-size, .625rem);font-variant-ligatures:none;font-weight:var(--wcss-body-2xs-weight, );line-height:var(--wcss-body-2xs-line-height, .875rem)}.body-2xs,.body-2xs-emphasized{letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-2xs-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-2xs-emphasized-font-size, .625rem);font-variant-ligatures:none;font-weight:var(--wcss-body-2xs-emphasized-weight, );line-height:var(--wcss-body-2xs-emphasized-line-height, .875rem)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular"),var(--wcss-display-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem));font-variant-ligatures:none;font-weight:var(--wcss-display-2xl-weight, 300);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);line-height:var(--wcss-display-2xl-line-height, 1.3)}.display-xl{font-family:var(--wcss-display-xl-family, "AS Circular"),var(--wcss-display-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem));font-variant-ligatures:none;font-weight:var(--wcss-display-xl-weight, 300);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);line-height:var(--wcss-display-xl-line-height, 1.3)}.display-lg{font-family:var(--wcss-display-lg-family, "AS Circular"),var(--wcss-display-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem));font-variant-ligatures:none;font-weight:var(--wcss-display-lg-weight, 300);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);line-height:var(--wcss-display-lg-line-height, 1.3)}.display-md{font-family:var(--wcss-display-md-family, "AS Circular"),var(--wcss-display-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem));font-variant-ligatures:none;font-weight:var(--wcss-display-md-weight, 300);letter-spacing:var(--wcss-display-md-letter-spacing, 0);line-height:var(--wcss-display-md-line-height, 1.3)}.display-sm{font-family:var(--wcss-display-sm-family, "AS Circular"),var(--wcss-display-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem));font-variant-ligatures:none;font-weight:var(--wcss-display-sm-weight, 300);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);line-height:var(--wcss-display-sm-line-height, 1.3)}.display-xs{font-family:var(--wcss-display-xs-family, "AS Circular"),var(--wcss-display-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem));font-variant-ligatures:none;font-weight:var(--wcss-display-xs-weight, 300);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);line-height:var(--wcss-display-xs-line-height, 1.3)}.heading-xl{font-family:var(--wcss-heading-xl-family, "AS Circular"),var(--wcss-heading-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem));font-variant-ligatures:none;font-weight:var(--wcss-heading-xl-weight, 300);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);line-height:var(--wcss-heading-xl-line-height, 1.3)}.heading-lg{font-family:var(--wcss-heading-lg-family, "AS Circular"),var(--wcss-heading-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem));font-variant-ligatures:none;font-weight:var(--wcss-heading-lg-weight, 300);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);line-height:var(--wcss-heading-lg-line-height, 1.3)}.heading-md{font-family:var(--wcss-heading-md-family, "AS Circular"),var(--wcss-heading-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem));font-variant-ligatures:none;font-weight:var(--wcss-heading-md-weight, 300);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);line-height:var(--wcss-heading-md-line-height, 1.3)}.heading-sm{font-family:var(--wcss-heading-sm-family, "AS Circular"),var(--wcss-heading-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem));font-variant-ligatures:none;font-weight:var(--wcss-heading-sm-weight, 300);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);line-height:var(--wcss-heading-sm-line-height, 1.3)}.heading-xs{font-family:var(--wcss-heading-xs-family, "AS Circular"),var(--wcss-heading-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem));font-variant-ligatures:none;font-weight:var(--wcss-heading-xs-weight, 300);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);line-height:var(--wcss-heading-xs-line-height, 1.3)}.heading-2xs{font-family:var(--wcss-heading-2xs-family, "AS Circular"),var(--wcss-heading-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem));font-variant-ligatures:none;font-weight:var(--wcss-heading-2xs-weight, 300);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);line-height:var(--wcss-heading-2xs-line-height, 1.3)}.accent-2xl{font-family:var(--wcss-accent-2xl-family, "Good OT"),var(--wcss-accent-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));font-variant-ligatures:none;font-weight:var(--wcss-accent-2xl-weight, 450);letter-spacing:var(--wcss-accent-2xl-letter-spacing, .05em);line-height:var(--wcss-accent-2xl-line-height, 1)}.accent-2xl,.accent-xl{text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT"),var(--wcss-accent-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));font-variant-ligatures:none;font-weight:var(--wcss-accent-xl-weight, 450);letter-spacing:var(--wcss-accent-xl-letter-spacing, .05em);line-height:var(--wcss-accent-xl-line-height, 1.3)}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT"),var(--wcss-accent-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));font-variant-ligatures:none;font-weight:var(--wcss-accent-lg-weight, 450);letter-spacing:var(--wcss-accent-lg-letter-spacing, .05em);line-height:var(--wcss-accent-lg-line-height, 1.3)}.accent-lg,.accent-md{text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT"),var(--wcss-accent-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));font-variant-ligatures:none;font-weight:var(--wcss-accent-md-weight, 500);letter-spacing:var(--wcss-accent-md-letter-spacing, .05em);line-height:var(--wcss-accent-md-line-height, 1.3)}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT"),var(--wcss-accent-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));font-variant-ligatures:none;font-weight:var(--wcss-accent-sm-weight, 500);letter-spacing:var(--wcss-accent-sm-letter-spacing, .05em);line-height:var(--wcss-accent-sm-line-height, 1.3)}.accent-sm,.accent-xs{text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT"),var(--wcss-accent-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));font-variant-ligatures:none;font-weight:var(--wcss-accent-xs-weight, 500);letter-spacing:var(--wcss-accent-xs-letter-spacing, .1em);line-height:var(--wcss-accent-xs-line-height, 1.3)}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT"),var(--wcss-accent-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xs-font-size, clamp(.875rem, 1.1666666667vw, .875rem));font-variant-ligatures:none;font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, .1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}:focus:not(:focus-visible){outline:3px solid transparent}:host{position:relative;display:inline-flex;flex-direction:column;align-items:center}:host([message-position=top]){flex-direction:column-reverse}:host([message-position=left]){flex-direction:row-reverse}:host([message-position=right]){flex-direction:row}:host([has-message]){gap:var(--ds-auro-loader-message-spacing)}.loader-shape{position:relative;display:inline-block;width:2rem;height:2rem;flex-shrink:0;font-size:0}.loader-shape>span{position:absolute;top:0;left:0;display:inline-block;width:2rem;height:2rem;box-sizing:border-box;border-width:0;border-style:solid;border-radius:100%;float:none}:host([xs])>.loader-shape{width:1.2rem;height:1.2rem}:host([xs])>.loader-shape>span{width:1.2rem;height:1.2rem}:host([sm])>.loader-shape{width:3rem;height:3rem}:host([sm])>.loader-shape>span{width:3rem;height:3rem}:host([md])>.loader-shape{width:5rem;height:5rem}:host([md])>.loader-shape>span{width:5rem;height:5rem}:host([lg])>.loader-shape{width:8rem;height:8rem}:host([lg])>.loader-shape>span{width:8rem;height:8rem}:host{--margin: .375rem;--margin-xs: .2rem;--margin-sm: .5rem;--margin-md: .75rem;--margin-lg: 1rem}:host([pulse]){position:relative}:host([pulse])>.loader-shape{position:relative;width:calc(3rem + var(--margin) * 6);height:calc(1rem + var(--margin) * 2)}:host([pulse])>.loader-shape>span{position:relative;width:1rem;height:1rem;margin:var(--margin);animation:pulse 1.5s ease infinite}:host([pulse])>.loader-shape>span:nth-child(1){animation-delay:-.4s}:host([pulse])>.loader-shape>span:nth-child(2){animation-delay:-.2s}:host([pulse])>.loader-shape>span:nth-child(3){animation-delay:0ms}:host([pulse][xs])>.loader-shape{width:calc(1.95rem + var(--margin-xs) * 6);height:calc(.65rem + var(--margin-xs) * 2)}:host([pulse][xs])>.loader-shape>span{width:.65rem;height:.65rem;margin:var(--margin-xs)}:host([pulse][sm])>.loader-shape{width:calc(6rem + var(--margin-sm) * 6);height:calc(2rem + var(--margin-sm) * 2)}:host([pulse][sm])>.loader-shape>span{width:2rem;height:2rem;margin:var(--margin-sm)}:host([pulse][md])>.loader-shape{width:calc(9rem + var(--margin-md) * 6);height:calc(3rem + var(--margin-md) * 2)}:host([pulse][md])>.loader-shape>span{width:3rem;height:3rem;margin:var(--margin-md)}:host([pulse][lg])>.loader-shape{width:calc(15rem + var(--margin-lg) * 6);height:calc(5rem + var(--margin-lg) * 2)}:host([pulse][lg])>.loader-shape>span{width:5rem;height:5rem;margin:var(--margin-lg)}@keyframes pulse{0%,to{opacity:.1;transform:scale(.9)}50%{opacity:1;transform:scale(1.1)}}:host([orbit]){opacity:1}:host([orbit])>.loader-shape>span{border-width:5px;opacity:1}:host([orbit])>.loader-shape>span:nth-child(2){animation:orbit 2s linear infinite}:host([orbit][sm])>.loader-shape>span{border-width:8px}:host([orbit][md])>.loader-shape>span{border-width:13px}:host([orbit][lg])>.loader-shape>span{border-width:21px}@keyframes orbit{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host([ringworm])>.loader-shape>svg{width:100%;height:100%;animation:rotate 2s linear infinite;stroke:currentcolor;stroke-width:8}:host([ringworm]) .path{animation:ringworm 1.5s ease-in-out infinite;stroke-dashoffset:0;stroke-linecap:round}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes ringworm{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}to{stroke-dasharray:89,200;stroke-dashoffset:-124px}}:host([laser]){position:static;display:block;overflow:hidden;width:100%;height:0;font-size:unset}:host([laser])>.no-animation,:host([laser])>.message-region{display:none}:host([laser])>.loader-shape>span{position:fixed;z-index:100;width:100%;height:.25rem;border-radius:0}:host([laser])>.loader-shape>span:nth-child(1){border-color:currentcolor;opacity:.25}:host([laser])>.loader-shape>span:nth-child(2){width:50%;border-color:currentcolor;animation:laser 2s linear infinite;opacity:1}:host([laser][sm])>.loader-shape>span:nth-child(2){width:20%}:host([laser][md])>.loader-shape>span:nth-child(2){width:30%}:host([laser][lg])>.loader-shape>span:nth-child(2){width:50%;animation-duration:1.5s}:host([laser][xl])>.loader-shape>span:nth-child(2){width:80%;animation-duration:1.5s}@keyframes laser{0%{left:-100%}to{left:110%}}.message-region{min-width:0;color:var(--ds-auro-loader-message-color)}.message-list{padding:0;margin:0}slot[name=message]::slotted([hidden]){display:none!important}:host>.no-animation{display:none;min-width:0}@media (prefers-reduced-motion: reduce){:host{display:flex;align-items:center;justify-content:center}:host>.loader-shape{display:none}:host>.loader-shape>span{opacity:1}:host>.no-animation{display:block}:host([has-default-content])>.message-region{display:none}:host([has-message]:not([has-default-content]))>.no-animation{display:none}}
|
|
@@ -13972,7 +13981,7 @@ var buttonVersion$1 = '12.3.2';
|
|
|
13972
13981
|
* @event auroCalendar-dateSelected - Notifies that someone selected a date in the calendar.
|
|
13973
13982
|
* @event auroCalendar-centralDateChanged - Notifies that the month shown has changed. Doesn't bubble; `event.detail.date` is the new `centralDate`.
|
|
13974
13983
|
* @event auroCalendar-dismissRequest - Notifies that someone selected the close or Done button, so the datepicker closes the dropdown.
|
|
13975
|
-
* @event narrow-changedProperties - Notifies
|
|
13984
|
+
* @event narrow-changedProperties - Notifies once, after the calendar first renders, with `event.detail.value` set to `false`. The calendar doesn't currently track whether the screen is narrow, so the event doesn't fire again.
|
|
13976
13985
|
*/
|
|
13977
13986
|
class AuroCalendar extends RangeDatepicker {
|
|
13978
13987
|
constructor() {
|
|
@@ -20027,7 +20036,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$1 {
|
|
|
20027
20036
|
}
|
|
20028
20037
|
};
|
|
20029
20038
|
|
|
20030
|
-
var formkitVersion$1 = '
|
|
20039
|
+
var formkitVersion$1 = '202611081829';
|
|
20031
20040
|
|
|
20032
20041
|
/**
|
|
20033
20042
|
* Shared base class for layout-aware Auro form components, such as `auro-input`, `auro-select`, and `auro-menu`.
|
|
@@ -20193,8 +20202,8 @@ let AuroElement$2 = class AuroElement extends i$1 {
|
|
|
20193
20202
|
* @csspart chevron - The container for the icon that shows whether the bib is open. Exists only when `chevron` is set.
|
|
20194
20203
|
* @csspart size - A hidden sizing element whose `width`, `height`, `max-width`, and `max-height` are copied to the bib. Applies only when `matchWidth` is set.
|
|
20195
20204
|
* @csspart helpText - The help text container. Not currently rendered, so styles set on it have no effect; style the content in the `helpText` slot instead.
|
|
20196
|
-
* @event auroDropdown-triggerClick - Notifies that the trigger was clicked, or activated with Enter or Space.
|
|
20197
|
-
* @event auroDropdown-toggled - Notifies that the bib opened or closed.
|
|
20205
|
+
* @event auroDropdown-triggerClick - Notifies that the trigger was clicked, or activated with Enter or Space. A click currently fires it twice: first with `event.detail.expanded`, then again without a detail, bubbling. With `disableEventShow` set, only the second one fires, and Enter and Space don't fire it.
|
|
20206
|
+
* @event auroDropdown-toggled - Notifies that the bib opened or closed, with `event.detail.expanded` set to true when it opened. When it closed, `event.detail.eventType` says why, such as `click`, `keydown`, or `focusloss`.
|
|
20198
20207
|
* @event auroDropdown-idAdded - Notifies that the dropdown has an ID you can use to reference its bib, such as in `aria-controls`. The detail's `id` is the dropdown's own `id`, generated when not set, and the bib's ID is that value followed by `-floater-bib`.
|
|
20199
20208
|
*/
|
|
20200
20209
|
class AuroDropdown extends AuroElement$2 {
|
|
@@ -34208,7 +34217,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$1 {
|
|
|
34208
34217
|
}
|
|
34209
34218
|
};
|
|
34210
34219
|
|
|
34211
|
-
var formkitVersion = '
|
|
34220
|
+
var formkitVersion = '202611081829';
|
|
34212
34221
|
|
|
34213
34222
|
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
34214
34223
|
// See LICENSE in the project root for license information.
|
|
@@ -35727,6 +35736,9 @@ function applyKeyboardStrategy(component, strategy, options = {}) {
|
|
|
35727
35736
|
// This file is an intentional placeholder for most keys. When datepicker bib keyboard navigation is
|
|
35728
35737
|
// added, handlers should go here following the same strategy pattern used by
|
|
35729
35738
|
// auro-select (selectKeyboardStrategy.js) and auro-combobox (comboboxKeyboardStrategy.js).
|
|
35739
|
+
/**
|
|
35740
|
+
* Holds the datepicker's keyboard handlers, one function each for `Escape`, `Enter`, and the space bar. Escape closes the open calendar without closing a dialog or drawer around it, and Enter or Space opens the closed calendar unless the clear button has focus.
|
|
35741
|
+
*/
|
|
35730
35742
|
const datepickerKeyboardStrategy = {
|
|
35731
35743
|
Escape(component, evt, ctx) {
|
|
35732
35744
|
if (!ctx.isExpanded) {
|
|
@@ -35801,7 +35813,7 @@ const datepickerKeyboardStrategy = {
|
|
|
35801
35813
|
* - **Limits and unavailable dates**: `minDate` and `maxDate` turn off dates outside a range, and `blackoutDates` marks single dates people can't select.
|
|
35802
35814
|
* - **Validation**: `required` shows an error when no date is chosen, and the `setCustomValidity` attributes replace the built-in error messages.
|
|
35803
35815
|
* - **Content on dates**: The `date_YYYY_MM_DD` and `popover_YYYY_MM_DD` slots add content to a date in the calendar, such as a price.
|
|
35804
|
-
* - **Localization**: `locale` sets the date format and the month and weekday names, and attributes and slots let you translate
|
|
35816
|
+
* - **Localization**: `locale` sets the date format and the month and weekday names, and attributes and slots let you translate most other text, except the calendar's Done button and the word "selected" in screen reader announcements.
|
|
35805
35817
|
* - **Fullscreen on small screens**: `fullscreenBreakpoint` sets the screen size at or below which the calendar opens fullscreen.
|
|
35806
35818
|
*
|
|
35807
35819
|
* **Example**
|
|
@@ -36258,7 +36270,7 @@ class AuroDatePicker extends AuroElement {
|
|
|
36258
36270
|
},
|
|
36259
36271
|
|
|
36260
36272
|
/**
|
|
36261
|
-
* Sets the shape of the
|
|
36273
|
+
* Sets the shape of the date field. Use `classic` (the default) with the `classic` layout, and `snowflake` with the `snowflake` layout.
|
|
36262
36274
|
* @type {'box' | 'classic' | 'pill' | 'pill-left' | 'pill-right' | 'rounded' | 'snowflake'}
|
|
36263
36275
|
* @default 'classic'
|
|
36264
36276
|
* @category ui
|
|
@@ -36270,7 +36282,7 @@ class AuroDatePicker extends AuroElement {
|
|
|
36270
36282
|
},
|
|
36271
36283
|
|
|
36272
36284
|
/**
|
|
36273
|
-
* Sets the
|
|
36285
|
+
* Sets the height of the date field, from `xs`, the shortest, to `xl`, the tallest. The `classic` and `snowflake` shapes have a fixed height, so `size` doesn't change them. The `rounded` shape supports only `lg`, and the `pill`, `pill-left`, and `pill-right` shapes support only `md` and `xl`.
|
|
36274
36286
|
* @type {'xs' | 'sm' | 'md' | 'lg' | 'xl'}
|
|
36275
36287
|
* @default 'lg'
|
|
36276
36288
|
* @category ui
|
|
@@ -8,30 +8,30 @@
|
|
|
8
8
|
<p>The component consists of the following elements:</p>
|
|
9
9
|
<ul>
|
|
10
10
|
<li>
|
|
11
|
-
<strong>
|
|
11
|
+
<strong>Trigger:</strong> Shows the component label(s), current date value(s), and the state of the component, such as <code>focus</code>, <code>hover</code>, <code>disabled</code>, <code>valid</code>, or <code>invalid</code>. The trigger includes one or two text inputs (depending on whether <code>range</code> is set) that allow the user to type a date directly.
|
|
12
12
|
</li>
|
|
13
13
|
<li>
|
|
14
|
-
<strong>
|
|
14
|
+
<strong>Calendar:</strong> Shows a monthly calendar grid in a dropdown. Users can navigate between months and select dates by clicking or tapping calendar cells. On smaller viewports the calendar opens in a fullscreen modal dialog.
|
|
15
15
|
</li>
|
|
16
16
|
<li>
|
|
17
|
-
<strong>
|
|
17
|
+
<strong>Help text:</strong> Shows text below the trigger that explains what to enter. The error message replaces it when validation fails.
|
|
18
18
|
</li>
|
|
19
19
|
</ul>
|
|
20
20
|
<auro-header level="4" id="trigger">Trigger</auro-header>
|
|
21
|
-
<p>The trigger includes the component label(s) and the current date value(s). The label is required
|
|
21
|
+
<p>The trigger includes the component label(s) and the current date value(s). The label is required, so screen reader users know what the datepicker is for.</p>
|
|
22
22
|
<p>When <code>range</code> is set, two inputs are shown, one for the start date and one for the end date, separated by a visual divider.</p>
|
|
23
|
-
<p>The trigger is a focusable element and visually responds to common UI states: <strong>Hover</strong> <
|
|
23
|
+
<p>The trigger is a focusable element and visually responds to common UI states: <strong>Hover</strong> (<code>:hover</code>), <strong>Focus</strong> (<code>:focus</code> and <code>:focus-visible</code>), and <strong>Disabled</strong> (<code>:disabled</code>). The component doesn't have a visual response to the <strong>Active</strong> (<code>:active</code>) state.</p>
|
|
24
24
|
<auro-header level="4" id="triggerConditional">Conditional elements</auro-header>
|
|
25
25
|
<p>The trigger contains the following elements that render conditionally:</p>
|
|
26
26
|
<ul>
|
|
27
27
|
<li>
|
|
28
|
-
<strong>Calendar icon:</strong>
|
|
28
|
+
<strong>Calendar icon:</strong> A decorative calendar icon to the left of the input fields gives a visual cue that the component opens a calendar.
|
|
29
29
|
</li>
|
|
30
30
|
<li>
|
|
31
|
-
<strong>Clear button:</strong>
|
|
31
|
+
<strong>Clear button:</strong> Shows when the input has a value and someone hovers over the field or moves focus into it, so they can clear the date.
|
|
32
32
|
</li>
|
|
33
33
|
<li>
|
|
34
|
-
<strong>Validation error icon:</strong>
|
|
34
|
+
<strong>Validation error icon:</strong> Shows when the component is invalid, to flag a validation problem.
|
|
35
35
|
</li>
|
|
36
36
|
</ul>
|
|
37
37
|
<auro-header level="4" id="calendar">Calendar</auro-header>
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
<p>If the component fails validation, the help text changes to show a validation help message instead of the default help text.</p>
|
|
51
51
|
<auro-header level="3" id="colors">Colors</auro-header>
|
|
52
52
|
<auro-header level="4" id="defaultColor">Default color</auro-header>
|
|
53
|
-
<p>
|
|
53
|
+
<p>Use the default colors when the component is on a light background.</p>
|
|
54
54
|
<div class="exampleWrapper">
|
|
55
55
|
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
|
|
56
56
|
<!-- The below content is automatically added from ./../apiExamples/basic.html -->
|
|
@@ -94,7 +94,7 @@ This creates a new custom element `<custom-datepicker>` that behaves exactly lik
|
|
|
94
94
|
<p>Once installed, the component can be used in your project by importing the component's registered module:</p>
|
|
95
95
|
|
|
96
96
|
<pre class="language-js"><code class="language-js">import '@aurodesignsystem/auro-formkit/auro-datepicker';</code></pre>
|
|
97
|
-
<p>This import registers the <code><auro-datepicker></code> custom element globally.
|
|
97
|
+
<p>This import registers the <code><auro-datepicker></code> custom element globally. Then use it in your HTML:</p>
|
|
98
98
|
|
|
99
99
|
<pre class="language-html"><code class="language-html"><auro-datepicker>
|
|
100
100
|
<span slot="fromLabel">Choose a date</span>
|
|
@@ -114,7 +114,7 @@ This creates a new custom element `<custom-datepicker>` that behaves exactly lik
|
|
|
114
114
|
<p>Add the following script tag to your HTML to load the component directly from a CDN:</p>
|
|
115
115
|
|
|
116
116
|
<pre class="language-html"><code class="language-html"><script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@latest/auro-datepicker/+esm"></script></code></pre>
|
|
117
|
-
<p>This script registers the <code><auro-datepicker></code> custom element globally.
|
|
117
|
+
<p>This script registers the <code><auro-datepicker></code> custom element globally. Then use it in your HTML:</p>
|
|
118
118
|
|
|
119
119
|
<pre class="language-html"><code class="language-html"><auro-datepicker>
|
|
120
120
|
<span slot="fromLabel">Choose a date</span>
|
|
@@ -326,7 +326,7 @@ Ensure your <code>tsconfig.json</code> uses <code>"moduleResolution": "bundler"<
|
|
|
326
326
|
</section>
|
|
327
327
|
<section>
|
|
328
328
|
<auro-header level="2" id="stateManagement">State management</auro-header>
|
|
329
|
-
<p>Use the following properties in JavaScript to read the datepicker's current state
|
|
329
|
+
<p>Use the following properties in JavaScript to read the datepicker's current state, and set <code>value</code> and <code>valueEnd</code> to change the chosen dates.</p>
|
|
330
330
|
<auro-header level="3" id="validity">validity</auro-header>
|
|
331
331
|
<p>Gets the datepicker's current validation state as a string: <code>valid</code>, <code>valueMissing</code>, <code>tooShort</code>, <code>tooLong</code>, <code>patternMismatch</code>, <code>rangeOverflow</code>, <code>rangeUnderflow</code>, or <code>customError</code>. It's <code>undefined</code> until the datepicker is validated.</p>
|
|
332
332
|
<auro-header level="3" id="value">value</auro-header>
|
|
@@ -10631,6 +10631,9 @@ function getDateFormatFromLocale$1 (locale) {
|
|
|
10631
10631
|
/* eslint-disable array-element-newline, dot-location */
|
|
10632
10632
|
|
|
10633
10633
|
|
|
10634
|
+
/**
|
|
10635
|
+
* Date helpers the datepicker and its calendar share, such as finding the first day of a month and counting the months between two dates.
|
|
10636
|
+
*/
|
|
10634
10637
|
class AuroDatepickerUtilities {
|
|
10635
10638
|
|
|
10636
10639
|
/**
|
|
@@ -10701,6 +10704,9 @@ const t$1=globalThis,e$3=t$1.ShadowRoot&&(void 0===t$1.ShadyCSS||t$1.ShadyCSS.na
|
|
|
10701
10704
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
10702
10705
|
*/const s$3=globalThis;let i$1 = class i extends y$4{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0;}createRenderRoot(){const t=super.createRenderRoot();return this.renderOptions.renderBefore??=t.firstChild,t}update(t){const r=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=D$1(r,this.renderRoot,this.renderOptions);}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(true);}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(false);}render(){return E$1}};i$1._$litElement$=true,i$1["finalized"]=true,s$3.litElementHydrateSupport?.({LitElement:i$1});const o$5=s$3.litElementPolyfillSupport;o$5?.({LitElement:i$1});(s$3.litElementVersions??=[]).push("4.2.2");
|
|
10703
10706
|
|
|
10707
|
+
/**
|
|
10708
|
+
* Helpers the datepicker and its calendar use to set the month the calendar shows, and to choose and render the calendar's months.
|
|
10709
|
+
*/
|
|
10704
10710
|
class UtilitiesCalendarRender {
|
|
10705
10711
|
constructor() {
|
|
10706
10712
|
this.util = new AuroDatepickerUtilities();
|
|
@@ -11142,12 +11148,12 @@ class RangeDatepickerCalendar extends i$1 {
|
|
|
11142
11148
|
super();
|
|
11143
11149
|
|
|
11144
11150
|
/**
|
|
11145
|
-
*
|
|
11151
|
+
* Sets the chosen date, or the start date of a range, as a Unix timestamp in seconds.
|
|
11146
11152
|
*/
|
|
11147
11153
|
this.dateFrom = null;
|
|
11148
11154
|
|
|
11149
11155
|
/**
|
|
11150
|
-
*
|
|
11156
|
+
* Sets the end date of a range, as a Unix timestamp in seconds.
|
|
11151
11157
|
*/
|
|
11152
11158
|
this.dateTo = null;
|
|
11153
11159
|
this.hoveredDate = null;
|
|
@@ -11161,12 +11167,12 @@ class RangeDatepickerCalendar extends i$1 {
|
|
|
11161
11167
|
this.disabledDays = [];
|
|
11162
11168
|
|
|
11163
11169
|
/**
|
|
11164
|
-
*
|
|
11170
|
+
* Sets the latest date people can choose, as a Unix timestamp in seconds.
|
|
11165
11171
|
*/
|
|
11166
11172
|
this.max = null;
|
|
11167
11173
|
|
|
11168
11174
|
/**
|
|
11169
|
-
*
|
|
11175
|
+
* Sets the earliest date people can choose, as a Unix timestamp in seconds.
|
|
11170
11176
|
*/
|
|
11171
11177
|
this.min = null;
|
|
11172
11178
|
this.yearsList = [];
|
|
@@ -13017,37 +13023,37 @@ class RangeDatepicker extends i$1 {
|
|
|
13017
13023
|
super();
|
|
13018
13024
|
|
|
13019
13025
|
/**
|
|
13020
|
-
*
|
|
13026
|
+
* Sets dates people can't select, as Unix timestamps in seconds.
|
|
13021
13027
|
*/
|
|
13022
13028
|
this.disabledDays = [];
|
|
13023
13029
|
|
|
13024
13030
|
/**
|
|
13025
|
-
*
|
|
13031
|
+
* Shows the previous and next month buttons on every month, and lets each month change on its own. It doesn't currently show a control for choosing the year.
|
|
13026
13032
|
*/
|
|
13027
13033
|
this.enableYearChange = false;
|
|
13028
13034
|
|
|
13029
13035
|
/**
|
|
13030
|
-
*
|
|
13036
|
+
* Shows one month at a time, even on screens wider than 650 pixels.
|
|
13031
13037
|
*/
|
|
13032
13038
|
this.forceNarrow = false;
|
|
13033
13039
|
|
|
13034
13040
|
/**
|
|
13035
|
-
*
|
|
13041
|
+
* Sets the date-fns locale object used for the month and weekday names, such as `enUS`. Uses `enUS` when not set.
|
|
13036
13042
|
*/
|
|
13037
13043
|
this.locale = null;
|
|
13038
13044
|
|
|
13039
13045
|
/**
|
|
13040
|
-
*
|
|
13046
|
+
* Sets the latest date people can choose, as a Unix timestamp in seconds.
|
|
13041
13047
|
*/
|
|
13042
13048
|
this.max = '8640000000000';
|
|
13043
13049
|
|
|
13044
13050
|
/**
|
|
13045
|
-
*
|
|
13051
|
+
* Sets the earliest date people can choose, as a Unix timestamp in seconds.
|
|
13046
13052
|
*/
|
|
13047
13053
|
this.min = '-8640000000000';
|
|
13048
13054
|
|
|
13049
13055
|
/**
|
|
13050
|
-
*
|
|
13056
|
+
* Lets people choose only one date instead of a start date and an end date.
|
|
13051
13057
|
*/
|
|
13052
13058
|
this.noRange = false;
|
|
13053
13059
|
this.dateFrom = null;
|
|
@@ -13263,6 +13269,9 @@ var chevronLeft = {"role":"img","color":"currentColor","title":"","desc":"Direct
|
|
|
13263
13269
|
|
|
13264
13270
|
var chevronRight = {"role":"img","color":"currentColor","title":"","desc":"Directional indicator; right.","width":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","height":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","xmlns":"http://www.w3.org/2000/svg","xmlns_xlink":"http://www.w3.org/1999/xlink","viewBox":"0 0 24 24","path":"/icons","style":"ico_squareLarge","type":"icon","name":"chevron-right","category":"interface","svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-labelledby=\"chevron-right__desc\" class=\"ico_squareLarge\" role=\"img\" style=\"min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor\" viewBox=\"0 0 24 24\" part=\"svg\"><title/><desc id=\"chevron-right__desc\">Directional indicator; right.</desc><path d=\"m9.605 17.551-.084-.072a.75.75 0 0 1-.072-.977l.072-.084 4.47-4.47-4.47-4.47a.75.75 0 0 1-.072-.976l.072-.084a.75.75 0 0 1 .977-.073l.084.073 4.823 4.823a1 1 0 0 1 0 1.415l-4.823 4.823a.75.75 0 0 1-.977.072\"/></svg>"};
|
|
13265
13271
|
|
|
13272
|
+
/**
|
|
13273
|
+
* Helpers the datepicker's calendar uses to change the month it shows, show or hide the previous and next month buttons, and scroll to a month.
|
|
13274
|
+
*/
|
|
13266
13275
|
class CalendarUtilities {
|
|
13267
13276
|
constructor() {
|
|
13268
13277
|
this.util = new AuroDatepickerUtilities();
|
|
@@ -13879,7 +13888,7 @@ class AuroBibtemplate extends i$1 {
|
|
|
13879
13888
|
}
|
|
13880
13889
|
}
|
|
13881
13890
|
|
|
13882
|
-
var formkitVersion$2 = '
|
|
13891
|
+
var formkitVersion$2 = '202611081829';
|
|
13883
13892
|
|
|
13884
13893
|
let l$1 = class l{generateElementName(e,t){let s=e;return s+="-",s+=t.replace(/[.]/g,"_"),s}generateTag(s,o,a){const r=this.generateElementName(s,o),i=i$5`${s$5(r)}`;return customElements.get(r)||customElements.define(r,class extends a{}),i}};let h$4 = class h{registerComponent(e,t){customElements.get(e)||customElements.define(e,class extends t{});}closestElement(e,t=this,s=(t,o=t&&t.closest(e))=>t&&t!==document&&t!==window?o||s(t.getRootNode().host):null){return s(t)}handleComponentTagRename(e,t){const s=t.toLowerCase();e.tagName.toLowerCase()!==s&&e.setAttribute(s,true);}elementMatch(e,t){const s=t.toLowerCase();return e.tagName.toLowerCase()===s||e.hasAttribute(s)}getSlotText(e,t){const s=e.shadowRoot?.querySelector(`slot[name="${t}"]`),o=(s?.assignedNodes({flatten:true})||[]).map(e=>e.textContent?.trim()).join(" ").trim();return o||null}};let d$1 = class d{registerComponent(e,t){customElements.get(e)||customElements.define(e,class extends t{});}closestElement(e,t=this,s=(t,o=t&&t.closest(e))=>t&&t!==document&&t!==window?o||s(t.getRootNode().host):null){return s(t)}handleComponentTagRename(e,t){const s=t.toLowerCase();e.tagName.toLowerCase()!==s&&e.setAttribute(s,true);}elementMatch(e,t){const s=t.toLowerCase();return e.tagName.toLowerCase()===s||e.hasAttribute(s)}getSlotText(e,t){const s=e.shadowRoot?.querySelector(`slot[name="${t}"]`);return (s?.assignedNodes({flatten:true})||[]).map(e=>e.textContent?.trim()).join(" ").trim()||null}};var c$3=i$3`:host{color:var(--ds-auro-loader-color)}:host>.loader-shape>span{border-color:var(--ds-auro-loader-border-color);background-color:var(--ds-auro-loader-background-color)}:host([onlight]),:host([appearance=brand]){--ds-auro-loader-color: var(--ds-basic-color-brand-primary, #01426a)}:host([ondark]),:host([appearance=inverse]){--ds-auro-loader-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host([orbit])>.loader-shape>span{--ds-auro-loader-background-color: transparent}:host([orbit])>.loader-shape>span:nth-child(1){--ds-auro-loader-border-color: currentcolor;opacity:.25}:host([orbit])>.loader-shape>span:nth-child(2){--ds-auro-loader-border-color: currentcolor;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent}
|
|
13885
13894
|
`,u$6=i$3`.body-default{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-default-font-size, 1rem);font-variant-ligatures:none;font-weight:var(--wcss-body-default-weight, );line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-default,.body-default-emphasized{letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-default-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-default-emphasized-font-size, 1rem);font-variant-ligatures:none;font-weight:var(--wcss-body-default-emphasized-weight, );line-height:var(--wcss-body-default-emphasized-line-height, 1.5rem)}.body-lg{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-lg-font-size, 1.125rem);font-variant-ligatures:none;font-weight:var(--wcss-body-lg-weight, );line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-lg,.body-lg-emphasized{letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-lg-emphasized-font-size, 1.125rem);font-variant-ligatures:none;font-weight:var(--wcss-body-lg-emphasized-weight, );line-height:var(--wcss-body-lg-emphasized-line-height, 1.625rem)}.body-sm{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-sm-font-size, .875rem);font-variant-ligatures:none;font-weight:var(--wcss-body-sm-weight, );line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm,.body-sm-emphasized{letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-sm-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-sm-emphasized-font-size, .875rem);font-variant-ligatures:none;font-weight:var(--wcss-body-sm-emphasized-weight, );line-height:var(--wcss-body-sm-emphasized-line-height, 1.25rem)}.body-xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-xs-font-size, .75rem);font-variant-ligatures:none;font-weight:var(--wcss-body-xs-weight, );line-height:var(--wcss-body-xs-line-height, 1rem)}.body-xs,.body-xs-emphasized{letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-xs-emphasized-font-size, .75rem);font-variant-ligatures:none;font-weight:var(--wcss-body-xs-emphasized-weight, );line-height:var(--wcss-body-xs-emphasized-line-height, 1rem)}.body-2xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-2xs-font-size, .625rem);font-variant-ligatures:none;font-weight:var(--wcss-body-2xs-weight, );line-height:var(--wcss-body-2xs-line-height, .875rem)}.body-2xs,.body-2xs-emphasized{letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-2xs-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-2xs-emphasized-font-size, .625rem);font-variant-ligatures:none;font-weight:var(--wcss-body-2xs-emphasized-weight, );line-height:var(--wcss-body-2xs-emphasized-line-height, .875rem)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular"),var(--wcss-display-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem));font-variant-ligatures:none;font-weight:var(--wcss-display-2xl-weight, 300);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);line-height:var(--wcss-display-2xl-line-height, 1.3)}.display-xl{font-family:var(--wcss-display-xl-family, "AS Circular"),var(--wcss-display-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem));font-variant-ligatures:none;font-weight:var(--wcss-display-xl-weight, 300);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);line-height:var(--wcss-display-xl-line-height, 1.3)}.display-lg{font-family:var(--wcss-display-lg-family, "AS Circular"),var(--wcss-display-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem));font-variant-ligatures:none;font-weight:var(--wcss-display-lg-weight, 300);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);line-height:var(--wcss-display-lg-line-height, 1.3)}.display-md{font-family:var(--wcss-display-md-family, "AS Circular"),var(--wcss-display-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem));font-variant-ligatures:none;font-weight:var(--wcss-display-md-weight, 300);letter-spacing:var(--wcss-display-md-letter-spacing, 0);line-height:var(--wcss-display-md-line-height, 1.3)}.display-sm{font-family:var(--wcss-display-sm-family, "AS Circular"),var(--wcss-display-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem));font-variant-ligatures:none;font-weight:var(--wcss-display-sm-weight, 300);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);line-height:var(--wcss-display-sm-line-height, 1.3)}.display-xs{font-family:var(--wcss-display-xs-family, "AS Circular"),var(--wcss-display-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem));font-variant-ligatures:none;font-weight:var(--wcss-display-xs-weight, 300);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);line-height:var(--wcss-display-xs-line-height, 1.3)}.heading-xl{font-family:var(--wcss-heading-xl-family, "AS Circular"),var(--wcss-heading-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem));font-variant-ligatures:none;font-weight:var(--wcss-heading-xl-weight, 300);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);line-height:var(--wcss-heading-xl-line-height, 1.3)}.heading-lg{font-family:var(--wcss-heading-lg-family, "AS Circular"),var(--wcss-heading-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem));font-variant-ligatures:none;font-weight:var(--wcss-heading-lg-weight, 300);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);line-height:var(--wcss-heading-lg-line-height, 1.3)}.heading-md{font-family:var(--wcss-heading-md-family, "AS Circular"),var(--wcss-heading-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem));font-variant-ligatures:none;font-weight:var(--wcss-heading-md-weight, 300);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);line-height:var(--wcss-heading-md-line-height, 1.3)}.heading-sm{font-family:var(--wcss-heading-sm-family, "AS Circular"),var(--wcss-heading-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem));font-variant-ligatures:none;font-weight:var(--wcss-heading-sm-weight, 300);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);line-height:var(--wcss-heading-sm-line-height, 1.3)}.heading-xs{font-family:var(--wcss-heading-xs-family, "AS Circular"),var(--wcss-heading-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem));font-variant-ligatures:none;font-weight:var(--wcss-heading-xs-weight, 300);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);line-height:var(--wcss-heading-xs-line-height, 1.3)}.heading-2xs{font-family:var(--wcss-heading-2xs-family, "AS Circular"),var(--wcss-heading-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem));font-variant-ligatures:none;font-weight:var(--wcss-heading-2xs-weight, 300);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);line-height:var(--wcss-heading-2xs-line-height, 1.3)}.accent-2xl{font-family:var(--wcss-accent-2xl-family, "Good OT"),var(--wcss-accent-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));font-variant-ligatures:none;font-weight:var(--wcss-accent-2xl-weight, 450);letter-spacing:var(--wcss-accent-2xl-letter-spacing, .05em);line-height:var(--wcss-accent-2xl-line-height, 1)}.accent-2xl,.accent-xl{text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT"),var(--wcss-accent-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));font-variant-ligatures:none;font-weight:var(--wcss-accent-xl-weight, 450);letter-spacing:var(--wcss-accent-xl-letter-spacing, .05em);line-height:var(--wcss-accent-xl-line-height, 1.3)}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT"),var(--wcss-accent-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));font-variant-ligatures:none;font-weight:var(--wcss-accent-lg-weight, 450);letter-spacing:var(--wcss-accent-lg-letter-spacing, .05em);line-height:var(--wcss-accent-lg-line-height, 1.3)}.accent-lg,.accent-md{text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT"),var(--wcss-accent-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));font-variant-ligatures:none;font-weight:var(--wcss-accent-md-weight, 500);letter-spacing:var(--wcss-accent-md-letter-spacing, .05em);line-height:var(--wcss-accent-md-line-height, 1.3)}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT"),var(--wcss-accent-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));font-variant-ligatures:none;font-weight:var(--wcss-accent-sm-weight, 500);letter-spacing:var(--wcss-accent-sm-letter-spacing, .05em);line-height:var(--wcss-accent-sm-line-height, 1.3)}.accent-sm,.accent-xs{text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT"),var(--wcss-accent-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));font-variant-ligatures:none;font-weight:var(--wcss-accent-xs-weight, 500);letter-spacing:var(--wcss-accent-xs-letter-spacing, .1em);line-height:var(--wcss-accent-xs-line-height, 1.3)}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT"),var(--wcss-accent-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xs-font-size, clamp(.875rem, 1.1666666667vw, .875rem));font-variant-ligatures:none;font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, .1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}:focus:not(:focus-visible){outline:3px solid transparent}:host{position:relative;display:inline-flex;flex-direction:column;align-items:center}:host([message-position=top]){flex-direction:column-reverse}:host([message-position=left]){flex-direction:row-reverse}:host([message-position=right]){flex-direction:row}:host([has-message]){gap:var(--ds-auro-loader-message-spacing)}.loader-shape{position:relative;display:inline-block;width:2rem;height:2rem;flex-shrink:0;font-size:0}.loader-shape>span{position:absolute;top:0;left:0;display:inline-block;width:2rem;height:2rem;box-sizing:border-box;border-width:0;border-style:solid;border-radius:100%;float:none}:host([xs])>.loader-shape{width:1.2rem;height:1.2rem}:host([xs])>.loader-shape>span{width:1.2rem;height:1.2rem}:host([sm])>.loader-shape{width:3rem;height:3rem}:host([sm])>.loader-shape>span{width:3rem;height:3rem}:host([md])>.loader-shape{width:5rem;height:5rem}:host([md])>.loader-shape>span{width:5rem;height:5rem}:host([lg])>.loader-shape{width:8rem;height:8rem}:host([lg])>.loader-shape>span{width:8rem;height:8rem}:host{--margin: .375rem;--margin-xs: .2rem;--margin-sm: .5rem;--margin-md: .75rem;--margin-lg: 1rem}:host([pulse]){position:relative}:host([pulse])>.loader-shape{position:relative;width:calc(3rem + var(--margin) * 6);height:calc(1rem + var(--margin) * 2)}:host([pulse])>.loader-shape>span{position:relative;width:1rem;height:1rem;margin:var(--margin);animation:pulse 1.5s ease infinite}:host([pulse])>.loader-shape>span:nth-child(1){animation-delay:-.4s}:host([pulse])>.loader-shape>span:nth-child(2){animation-delay:-.2s}:host([pulse])>.loader-shape>span:nth-child(3){animation-delay:0ms}:host([pulse][xs])>.loader-shape{width:calc(1.95rem + var(--margin-xs) * 6);height:calc(.65rem + var(--margin-xs) * 2)}:host([pulse][xs])>.loader-shape>span{width:.65rem;height:.65rem;margin:var(--margin-xs)}:host([pulse][sm])>.loader-shape{width:calc(6rem + var(--margin-sm) * 6);height:calc(2rem + var(--margin-sm) * 2)}:host([pulse][sm])>.loader-shape>span{width:2rem;height:2rem;margin:var(--margin-sm)}:host([pulse][md])>.loader-shape{width:calc(9rem + var(--margin-md) * 6);height:calc(3rem + var(--margin-md) * 2)}:host([pulse][md])>.loader-shape>span{width:3rem;height:3rem;margin:var(--margin-md)}:host([pulse][lg])>.loader-shape{width:calc(15rem + var(--margin-lg) * 6);height:calc(5rem + var(--margin-lg) * 2)}:host([pulse][lg])>.loader-shape>span{width:5rem;height:5rem;margin:var(--margin-lg)}@keyframes pulse{0%,to{opacity:.1;transform:scale(.9)}50%{opacity:1;transform:scale(1.1)}}:host([orbit]){opacity:1}:host([orbit])>.loader-shape>span{border-width:5px;opacity:1}:host([orbit])>.loader-shape>span:nth-child(2){animation:orbit 2s linear infinite}:host([orbit][sm])>.loader-shape>span{border-width:8px}:host([orbit][md])>.loader-shape>span{border-width:13px}:host([orbit][lg])>.loader-shape>span{border-width:21px}@keyframes orbit{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host([ringworm])>.loader-shape>svg{width:100%;height:100%;animation:rotate 2s linear infinite;stroke:currentcolor;stroke-width:8}:host([ringworm]) .path{animation:ringworm 1.5s ease-in-out infinite;stroke-dashoffset:0;stroke-linecap:round}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes ringworm{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}to{stroke-dasharray:89,200;stroke-dashoffset:-124px}}:host([laser]){position:static;display:block;overflow:hidden;width:100%;height:0;font-size:unset}:host([laser])>.no-animation,:host([laser])>.message-region{display:none}:host([laser])>.loader-shape>span{position:fixed;z-index:100;width:100%;height:.25rem;border-radius:0}:host([laser])>.loader-shape>span:nth-child(1){border-color:currentcolor;opacity:.25}:host([laser])>.loader-shape>span:nth-child(2){width:50%;border-color:currentcolor;animation:laser 2s linear infinite;opacity:1}:host([laser][sm])>.loader-shape>span:nth-child(2){width:20%}:host([laser][md])>.loader-shape>span:nth-child(2){width:30%}:host([laser][lg])>.loader-shape>span:nth-child(2){width:50%;animation-duration:1.5s}:host([laser][xl])>.loader-shape>span:nth-child(2){width:80%;animation-duration:1.5s}@keyframes laser{0%{left:-100%}to{left:110%}}.message-region{min-width:0;color:var(--ds-auro-loader-message-color)}.message-list{padding:0;margin:0}slot[name=message]::slotted([hidden]){display:none!important}:host>.no-animation{display:none;min-width:0}@media (prefers-reduced-motion: reduce){:host{display:flex;align-items:center;justify-content:center}:host>.loader-shape{display:none}:host>.loader-shape>span{opacity:1}:host>.no-animation{display:block}:host([has-default-content])>.message-region{display:none}:host([has-message]:not([has-default-content]))>.no-animation{display:none}}
|
|
@@ -13972,7 +13981,7 @@ var buttonVersion$1 = '12.3.2';
|
|
|
13972
13981
|
* @event auroCalendar-dateSelected - Notifies that someone selected a date in the calendar.
|
|
13973
13982
|
* @event auroCalendar-centralDateChanged - Notifies that the month shown has changed. Doesn't bubble; `event.detail.date` is the new `centralDate`.
|
|
13974
13983
|
* @event auroCalendar-dismissRequest - Notifies that someone selected the close or Done button, so the datepicker closes the dropdown.
|
|
13975
|
-
* @event narrow-changedProperties - Notifies
|
|
13984
|
+
* @event narrow-changedProperties - Notifies once, after the calendar first renders, with `event.detail.value` set to `false`. The calendar doesn't currently track whether the screen is narrow, so the event doesn't fire again.
|
|
13976
13985
|
*/
|
|
13977
13986
|
class AuroCalendar extends RangeDatepicker {
|
|
13978
13987
|
constructor() {
|
|
@@ -20027,7 +20036,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$1 {
|
|
|
20027
20036
|
}
|
|
20028
20037
|
};
|
|
20029
20038
|
|
|
20030
|
-
var formkitVersion$1 = '
|
|
20039
|
+
var formkitVersion$1 = '202611081829';
|
|
20031
20040
|
|
|
20032
20041
|
/**
|
|
20033
20042
|
* Shared base class for layout-aware Auro form components, such as `auro-input`, `auro-select`, and `auro-menu`.
|
|
@@ -20193,8 +20202,8 @@ let AuroElement$2 = class AuroElement extends i$1 {
|
|
|
20193
20202
|
* @csspart chevron - The container for the icon that shows whether the bib is open. Exists only when `chevron` is set.
|
|
20194
20203
|
* @csspart size - A hidden sizing element whose `width`, `height`, `max-width`, and `max-height` are copied to the bib. Applies only when `matchWidth` is set.
|
|
20195
20204
|
* @csspart helpText - The help text container. Not currently rendered, so styles set on it have no effect; style the content in the `helpText` slot instead.
|
|
20196
|
-
* @event auroDropdown-triggerClick - Notifies that the trigger was clicked, or activated with Enter or Space.
|
|
20197
|
-
* @event auroDropdown-toggled - Notifies that the bib opened or closed.
|
|
20205
|
+
* @event auroDropdown-triggerClick - Notifies that the trigger was clicked, or activated with Enter or Space. A click currently fires it twice: first with `event.detail.expanded`, then again without a detail, bubbling. With `disableEventShow` set, only the second one fires, and Enter and Space don't fire it.
|
|
20206
|
+
* @event auroDropdown-toggled - Notifies that the bib opened or closed, with `event.detail.expanded` set to true when it opened. When it closed, `event.detail.eventType` says why, such as `click`, `keydown`, or `focusloss`.
|
|
20198
20207
|
* @event auroDropdown-idAdded - Notifies that the dropdown has an ID you can use to reference its bib, such as in `aria-controls`. The detail's `id` is the dropdown's own `id`, generated when not set, and the bib's ID is that value followed by `-floater-bib`.
|
|
20199
20208
|
*/
|
|
20200
20209
|
class AuroDropdown extends AuroElement$2 {
|
|
@@ -34208,7 +34217,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$1 {
|
|
|
34208
34217
|
}
|
|
34209
34218
|
};
|
|
34210
34219
|
|
|
34211
|
-
var formkitVersion = '
|
|
34220
|
+
var formkitVersion = '202611081829';
|
|
34212
34221
|
|
|
34213
34222
|
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
34214
34223
|
// See LICENSE in the project root for license information.
|
|
@@ -35727,6 +35736,9 @@ function applyKeyboardStrategy(component, strategy, options = {}) {
|
|
|
35727
35736
|
// This file is an intentional placeholder for most keys. When datepicker bib keyboard navigation is
|
|
35728
35737
|
// added, handlers should go here following the same strategy pattern used by
|
|
35729
35738
|
// auro-select (selectKeyboardStrategy.js) and auro-combobox (comboboxKeyboardStrategy.js).
|
|
35739
|
+
/**
|
|
35740
|
+
* Holds the datepicker's keyboard handlers, one function each for `Escape`, `Enter`, and the space bar. Escape closes the open calendar without closing a dialog or drawer around it, and Enter or Space opens the closed calendar unless the clear button has focus.
|
|
35741
|
+
*/
|
|
35730
35742
|
const datepickerKeyboardStrategy = {
|
|
35731
35743
|
Escape(component, evt, ctx) {
|
|
35732
35744
|
if (!ctx.isExpanded) {
|
|
@@ -35801,7 +35813,7 @@ const datepickerKeyboardStrategy = {
|
|
|
35801
35813
|
* - **Limits and unavailable dates**: `minDate` and `maxDate` turn off dates outside a range, and `blackoutDates` marks single dates people can't select.
|
|
35802
35814
|
* - **Validation**: `required` shows an error when no date is chosen, and the `setCustomValidity` attributes replace the built-in error messages.
|
|
35803
35815
|
* - **Content on dates**: The `date_YYYY_MM_DD` and `popover_YYYY_MM_DD` slots add content to a date in the calendar, such as a price.
|
|
35804
|
-
* - **Localization**: `locale` sets the date format and the month and weekday names, and attributes and slots let you translate
|
|
35816
|
+
* - **Localization**: `locale` sets the date format and the month and weekday names, and attributes and slots let you translate most other text, except the calendar's Done button and the word "selected" in screen reader announcements.
|
|
35805
35817
|
* - **Fullscreen on small screens**: `fullscreenBreakpoint` sets the screen size at or below which the calendar opens fullscreen.
|
|
35806
35818
|
*
|
|
35807
35819
|
* **Example**
|
|
@@ -36258,7 +36270,7 @@ class AuroDatePicker extends AuroElement {
|
|
|
36258
36270
|
},
|
|
36259
36271
|
|
|
36260
36272
|
/**
|
|
36261
|
-
* Sets the shape of the
|
|
36273
|
+
* Sets the shape of the date field. Use `classic` (the default) with the `classic` layout, and `snowflake` with the `snowflake` layout.
|
|
36262
36274
|
* @type {'box' | 'classic' | 'pill' | 'pill-left' | 'pill-right' | 'rounded' | 'snowflake'}
|
|
36263
36275
|
* @default 'classic'
|
|
36264
36276
|
* @category ui
|
|
@@ -36270,7 +36282,7 @@ class AuroDatePicker extends AuroElement {
|
|
|
36270
36282
|
},
|
|
36271
36283
|
|
|
36272
36284
|
/**
|
|
36273
|
-
* Sets the
|
|
36285
|
+
* Sets the height of the date field, from `xs`, the shortest, to `xl`, the tallest. The `classic` and `snowflake` shapes have a fixed height, so `size` doesn't change them. The `rounded` shape supports only `lg`, and the `pill`, `pill-left`, and `pill-right` shapes support only `md` and `xl`.
|
|
36274
36286
|
* @type {'xs' | 'sm' | 'md' | 'lg' | 'xl'}
|
|
36275
36287
|
* @default 'lg'
|
|
36276
36288
|
* @category ui
|
|
@@ -55,7 +55,7 @@
|
|
|
55
55
|
Select a date by clicking a calendar cell or by typing a date directly into the input
|
|
56
56
|
<div class="note">
|
|
57
57
|
<p>
|
|
58
|
-
When a valid date is selected, the <code>value</code> property is updated. The calendar remains open so additional dates can be reviewed. Close the calendar by pressing Escape or activating the Done button. If the user types a date, it must match the configured <code>format</code>
|
|
58
|
+
When a valid date is selected, the <code>value</code> property is updated. The calendar remains open so additional dates can be reviewed. Close the calendar by pressing Escape or activating the Done button. If the user types a date, it must match the configured <code>format</code>, which comes from <code>locale</code> when it isn't set, such as <code>mm/dd/yyyy</code> for <code>en-US</code>.
|
|
59
59
|
</p>
|
|
60
60
|
</div>
|
|
61
61
|
</li>
|
|
@@ -234,8 +234,8 @@
|
|
|
234
234
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
235
235
|
</auro-accordion>
|
|
236
236
|
<auro-header level="3" id="blackoutDates">Blackout dates with custom label</auro-header>
|
|
237
|
-
<p>Use the <code>blackoutLabel</code> attribute to customize the screen reader announcement for blackout (disabled but in-range) dates. The default label is <code>
|
|
238
|
-
<p>When a user types a blackout date into the input, the datepicker validates the entry and displays a <code>customError</code> message. The default message is <code>
|
|
237
|
+
<p>Use the <code>blackoutLabel</code> attribute to customize the screen reader announcement for blackout (disabled but in-range) dates. The default label is <code>unavailable</code>. This is useful when you want to provide more context about why a date can't be selected, such as <code>sold out</code>.</p>
|
|
238
|
+
<p>When a user types a blackout date into the input, the datepicker validates the entry and displays a <code>customError</code> message. The default message is <code>Selected date is unavailable</code>. Use the <code>setCustomValidityCustomError</code> attribute to provide a custom error message, for example <code>setCustomValidityCustomError="That date is sold out"</code>.</p>
|
|
239
239
|
<div class="exampleWrapper">
|
|
240
240
|
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/blackout-label.html) -->
|
|
241
241
|
<!-- The below content is automatically added from ./../apiExamples/blackout-label.html -->
|