@aurodesignsystem/auro-formkit 2.0.0-beta.46 → 2.0.0-beta.47

package/CHANGELOG.md

@@ -1,5 +1,43 @@
 # Semantic Release Automated Changelog
 
+# [2.0.0-beta.47](https://github.com/AlaskaAirlines/auro-formkit/compare/v2.0.0-beta.46...v2.0.0-beta.47) (2025-02-27)
+
+
+### Bug Fixes
+
+* address linting errors ([686c11a](https://github.com/AlaskaAirlines/auro-formkit/commit/686c11ae485ccb4ccce5e561110a2a9bd49e070f))
+* address PR review comments ([8e1be49](https://github.com/AlaskaAirlines/auro-formkit/commit/8e1be4971edfc8103f7a49f419de785bf98105e8))
+* button up small bugs in autoformatting configuration ([0c47e81](https://github.com/AlaskaAirlines/auro-formkit/commit/0c47e819d53d8d3d4191ad70c49faf9a4859f3c7))
+* change calendar view to typed date [#369](https://github.com/AlaskaAirlines/auro-formkit/issues/369) ([01591cf](https://github.com/AlaskaAirlines/auro-formkit/commit/01591cf395ca3e2a6441007b91bbb121d3e254a3))
+* convert breakpoint value to integer ([7d39ac1](https://github.com/AlaskaAirlines/auro-formkit/commit/7d39ac1a02feb73cb60c273a389555176e734aab))
+* dynamically render month and year in calendar header ([35029dc](https://github.com/AlaskaAirlines/auro-formkit/commit/35029dc0b3457fdb875647b7ab67303d430b6e52))
+* handle dynamic format changes ([81d86b0](https://github.com/AlaskaAirlines/auro-formkit/commit/81d86b08a5b7686e27c061c26661a532f81d1995))
+* reference correct type in mask options ([c8db94e](https://github.com/AlaskaAirlines/auro-formkit/commit/c8db94eca09a5d3e751d56f7445d180eca212fb6))
+* update support for localized month names ([9b085d2](https://github.com/AlaskaAirlines/auro-formkit/commit/9b085d2174adf629f83b4c5192fb873b601c6de0))
+
+
+### Features
+
+* add format support to datepicker [#342](https://github.com/AlaskaAirlines/auro-formkit/issues/342) ([eacf5ea](https://github.com/AlaskaAirlines/auro-formkit/commit/eacf5eaba2e0b34facc3a3da225486f215c30dd7))
+* implement inputmask ([a7e2cae](https://github.com/AlaskaAirlines/auro-formkit/commit/a7e2cae1ce1c0facffc07b117682bea66a7c7b3c))
+* replace Inputmask with IMask [#312](https://github.com/AlaskaAirlines/auro-formkit/issues/312) ([5e83d31](https://github.com/AlaskaAirlines/auro-formkit/commit/5e83d31812e0408e1902cf5a678b1677ba06940b))
+* use bibtemplate for dropdown bib content ([62abed6](https://github.com/AlaskaAirlines/auro-formkit/commit/62abed62bca382a10f5450102edec401e4afb67b))
+
+
+### Performance Improvements
+
+* add dynamic phone number masking [#332](https://github.com/AlaskaAirlines/auro-formkit/issues/332) ([d38c0ff](https://github.com/AlaskaAirlines/auro-formkit/commit/d38c0ff5a15a94a8419d97daa20e0afc8a879223))
+* handle all date formats and write tests [#344](https://github.com/AlaskaAirlines/auro-formkit/issues/344) ([10e310b](https://github.com/AlaskaAirlines/auro-formkit/commit/10e310b3fac099be13046dbf6aa8a2e13ebb6ea9))
+* implement type date with format attribute [#329](https://github.com/AlaskaAirlines/auro-formkit/issues/329) ([20afb8d](https://github.com/AlaskaAirlines/auro-formkit/commit/20afb8df43def073abc09bd6f3a2d9d07051a26f))
+* support custom Inputmasks [#335](https://github.com/AlaskaAirlines/auro-formkit/issues/335) ([eab15e5](https://github.com/AlaskaAirlines/auro-formkit/commit/eab15e55a38b285b3bc4e3b2f945cbe90c5e4feb))
+* support dynamic credit card masking [#333](https://github.com/AlaskaAirlines/auro-formkit/issues/333) ([716eca8](https://github.com/AlaskaAirlines/auro-formkit/commit/716eca8d9ec732a7b91ef78f827877a3fd7af3d6))
+* support help text for phone number inputs ([7ec6856](https://github.com/AlaskaAirlines/auro-formkit/commit/7ec6856e849fa9a73627889e6fbfe3e4136e5b2f))
+
+
+### BREAKING CHANGES
+
+* old date types are deprecated
+
 # [2.0.0-beta.46](https://github.com/AlaskaAirlines/auro-formkit/compare/v2.0.0-beta.45...v2.0.0-beta.46) (2025-02-24)
 
 

package/components/bibtemplate/dist/index.js

@@ -31,11 +31,11 @@ const t$1=globalThis,i$3=t$1.trustedTypes,s$1=i$3?i$3.createPolicy("lit-html",{c
  */
 const a=Symbol.for(""),o$1=t=>{if(t?.r===a)return t?._$litStatic$},s=t=>({_$litStatic$:t,r:a}),i$1=(t,...r)=>({_$litStatic$:r.reduce(((r,e,a)=>r+(t=>{if(void 0!==t._$litStatic$)return t._$litStatic$;throw Error(`Value passed to 'literal' function must be a 'literal' result: ${t}. Use 'unsafeStatic' to pass non-literal values, but\n            take care to ensure page security.`)})(e)+t[a+1]),t[0]),r:a}),l=new Map,n=t=>(r,...e)=>{const a=e.length;let s,i;const n=[],u=[];let c,$=0,f=false;for(;$<a;){for(c=r[$];$<a&&void 0!==(i=e[$],s=o$1(i));)c+=s+r[++$],f=true;$!==a&&u.push(i),n.push(c),$++;}if($===a&&n.push(r[a]),f){const t=n.join("$$lit$$");void 0===(r=l.get(t))&&(n.raw=n,l.set(t,r=n)),e=u;}return t(r,...e)},u=n(x);
 
-var colorCss$1 = i$5``;
+var colorCss$1 = i$5`#headerContainer{box-shadow:var(--ds-auro-dropdownbib-header-boxshadow-color)}#footerContainer{background-color:var(--ds-auro-dropdownbib-footer-container-color)}`;
 
-var styleCss$2 = i$5`#bibTemplate{display:flex;overflow:hidden;height:100%;max-height:100%;flex-direction:column}#headerContainer{display:flex;flex-direction:column;box-shadow:var(--ds-auro-dropdownbib-header-boxshadow-color)}#header{display:flex;width:100%;min-height:var(--ds-size-1000, 5rem);box-sizing:border-box;align-items:end;padding-top:var(--ds-size-400, 2rem);padding-right:var(--ds-size-700, 3.5rem);padding-left:var(--ds-size-200, 1rem);pointer-events:none}#subheader{width:100%}#subheader ::slotted([auro-input]){padding:0 var(--ds-size-200, 1rem)}#closeButton{position:absolute;top:var(--ds-size-400, 2rem);right:var(--ds-size-200, 1rem);border:none;background-color:transparent;cursor:pointer}#closeButton [auro-icon]{--ds-auro-icon-size: var(--ds-size-500, $ds-size-500)}#bodyContainer{overflow:auto;flex:1 1 100%;padding-top:var(--ds-size-100, 0.5rem)}#footerContainer{position:absolute;right:0;bottom:0;left:0;padding:var(--ds-size-200, 1rem)}`;
+var styleCss$2 = i$5`#bibTemplate{display:flex;overflow:hidden;height:100%;max-height:100%;flex-direction:column}#headerContainer{display:flex;flex-direction:column}#header{display:flex;width:100%;min-height:var(--ds-size-1000, 5rem);box-sizing:border-box;align-items:end;padding-top:var(--ds-size-400, 2rem);padding-right:var(--ds-size-700, 3.5rem);padding-left:var(--ds-size-200, 1rem);pointer-events:none}#subheader{width:100%}#subheader ::slotted([auro-input]){padding:0 var(--ds-size-200, 1rem)}#closeButton{position:absolute;top:var(--ds-size-400, 2rem);right:var(--ds-size-200, 1rem);border:none;background-color:transparent;cursor:pointer}#closeButton [auro-icon]{--ds-auro-icon-size: var(--ds-size-500, $ds-size-500)}#bodyContainer{overflow:auto;flex:1 1 100%;padding-top:var(--ds-size-100, 0.5rem)}#footerContainer{position:absolute;right:0;bottom:0;left:0;padding:var(--ds-size-200, 1rem)}`;
 
-var tokenCss = i$5`:host{--ds-auro-dropdownbib-header-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15))}`;
+var tokenCss = i$5`:host{--ds-auro-dropdownbib-header-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-dropdownbib-footer-container-color: var(--ds-color-container-primary-default, #ffffff)}`;
 
 // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.

package/components/bibtemplate/dist/registered.js

@@ -31,11 +31,11 @@ const t$1=globalThis,i$3=t$1.trustedTypes,s$1=i$3?i$3.createPolicy("lit-html",{c
  */
 const a=Symbol.for(""),o$1=t=>{if(t?.r===a)return t?._$litStatic$},s=t=>({_$litStatic$:t,r:a}),i$1=(t,...r)=>({_$litStatic$:r.reduce(((r,e,a)=>r+(t=>{if(void 0!==t._$litStatic$)return t._$litStatic$;throw Error(`Value passed to 'literal' function must be a 'literal' result: ${t}. Use 'unsafeStatic' to pass non-literal values, but\n            take care to ensure page security.`)})(e)+t[a+1]),t[0]),r:a}),l=new Map,n=t=>(r,...e)=>{const a=e.length;let s,i;const n=[],u=[];let c,$=0,f=false;for(;$<a;){for(c=r[$];$<a&&void 0!==(i=e[$],s=o$1(i));)c+=s+r[++$],f=true;$!==a&&u.push(i),n.push(c),$++;}if($===a&&n.push(r[a]),f){const t=n.join("$$lit$$");void 0===(r=l.get(t))&&(n.raw=n,l.set(t,r=n)),e=u;}return t(r,...e)},u=n(x);
 
-var colorCss$1 = i$5``;
+var colorCss$1 = i$5`#headerContainer{box-shadow:var(--ds-auro-dropdownbib-header-boxshadow-color)}#footerContainer{background-color:var(--ds-auro-dropdownbib-footer-container-color)}`;
 
-var styleCss$2 = i$5`#bibTemplate{display:flex;overflow:hidden;height:100%;max-height:100%;flex-direction:column}#headerContainer{display:flex;flex-direction:column;box-shadow:var(--ds-auro-dropdownbib-header-boxshadow-color)}#header{display:flex;width:100%;min-height:var(--ds-size-1000, 5rem);box-sizing:border-box;align-items:end;padding-top:var(--ds-size-400, 2rem);padding-right:var(--ds-size-700, 3.5rem);padding-left:var(--ds-size-200, 1rem);pointer-events:none}#subheader{width:100%}#subheader ::slotted([auro-input]){padding:0 var(--ds-size-200, 1rem)}#closeButton{position:absolute;top:var(--ds-size-400, 2rem);right:var(--ds-size-200, 1rem);border:none;background-color:transparent;cursor:pointer}#closeButton [auro-icon]{--ds-auro-icon-size: var(--ds-size-500, $ds-size-500)}#bodyContainer{overflow:auto;flex:1 1 100%;padding-top:var(--ds-size-100, 0.5rem)}#footerContainer{position:absolute;right:0;bottom:0;left:0;padding:var(--ds-size-200, 1rem)}`;
+var styleCss$2 = i$5`#bibTemplate{display:flex;overflow:hidden;height:100%;max-height:100%;flex-direction:column}#headerContainer{display:flex;flex-direction:column}#header{display:flex;width:100%;min-height:var(--ds-size-1000, 5rem);box-sizing:border-box;align-items:end;padding-top:var(--ds-size-400, 2rem);padding-right:var(--ds-size-700, 3.5rem);padding-left:var(--ds-size-200, 1rem);pointer-events:none}#subheader{width:100%}#subheader ::slotted([auro-input]){padding:0 var(--ds-size-200, 1rem)}#closeButton{position:absolute;top:var(--ds-size-400, 2rem);right:var(--ds-size-200, 1rem);border:none;background-color:transparent;cursor:pointer}#closeButton [auro-icon]{--ds-auro-icon-size: var(--ds-size-500, $ds-size-500)}#bodyContainer{overflow:auto;flex:1 1 100%;padding-top:var(--ds-size-100, 0.5rem)}#footerContainer{position:absolute;right:0;bottom:0;left:0;padding:var(--ds-size-200, 1rem)}`;
 
-var tokenCss = i$5`:host{--ds-auro-dropdownbib-header-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15))}`;
+var tokenCss = i$5`:host{--ds-auro-dropdownbib-header-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-dropdownbib-footer-container-color: var(--ds-color-container-primary-default, #ffffff)}`;
 
 // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.

package/components/checkbox/README.md

@@ -96,7 +96,7 @@ In cases where the project is not able to process JS assets, there are pre-proce
 <!-- The below content is automatically added from ../../docs/templates/componentBundleUseModBrowsers.md -->
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@4.13.0/dist/tokens/CSSCustomProperties.css" />
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@5.1.2/dist/bundled/essentials.css" />
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-checkbox@2.0.0-beta.45/dist/auro-checkbox__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-checkbox@2.0.0-beta.46/dist/auro-checkbox__bundled.js" type="module"></script>
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## auro-checkbox use cases

package/components/checkbox/demo/api.min.js

@@ -486,20 +486,17 @@ class AuroFormValidation {
           elem.validity = 'rangeUnderflow';
           elem.errorMessage = elem.setCustomValidityRangeUnderflow || elem.setCustomValidity || '';
         }
-      } else if (elem.type === 'month-day-year' ||
-                 elem.type === 'month-year' ||
-                 elem.type === 'month-fullYear' ||
-                 elem.type === 'year-month-day'
-      ) {
-        if (elem.value?.length > 0 && elem.value.length < elem.dateStrLength) {
+      } else if (elem.type === 'date') {
+        if (elem.value?.length > 0 && elem.value?.length < elem.lengthForType) {
           elem.validity = 'tooShort';
           elem.errorMessage = elem.setCustomValidityForType || elem.setCustomValidity || '';
-        } else {
-          const valueDate = new Date(elem.value);
+        } else if (elem.value?.length === elem.lengthForType && elem.util.toNorthAmericanFormat(elem.value, elem.format)) {
+          const formattedValue = elem.util.toNorthAmericanFormat(elem.value, elem.format);
+          const valueDate = new Date(formattedValue.dateForComparison);
 
           // validate max
-          if (elem.max !== undefined) {
-            const maxDate = new Date(elem.max);
+          if (elem.max?.length === elem.lengthForType) {
+            const maxDate = new Date(elem.util.toNorthAmericanFormat(elem.max, elem.format).dateForComparison);
 
             if (valueDate > maxDate) {
               elem.validity = 'rangeOverflow';
@@ -508,8 +505,8 @@ class AuroFormValidation {
           }
 
           // validate min
-          if (elem.min) {
-            const minDate = new Date(elem.min);
+          if (elem.min?.length === elem.lengthForType) {
+            const minDate = new Date(elem.util.toNorthAmericanFormat(elem.min, elem.format).dateForComparison);
 
             if (valueDate < minDate) {
               elem.validity = 'rangeUnderflow';

package/components/checkbox/demo/index.min.js

@@ -478,20 +478,17 @@ class AuroFormValidation {
           elem.validity = 'rangeUnderflow';
           elem.errorMessage = elem.setCustomValidityRangeUnderflow || elem.setCustomValidity || '';
         }
-      } else if (elem.type === 'month-day-year' ||
-                 elem.type === 'month-year' ||
-                 elem.type === 'month-fullYear' ||
-                 elem.type === 'year-month-day'
-      ) {
-        if (elem.value?.length > 0 && elem.value.length < elem.dateStrLength) {
+      } else if (elem.type === 'date') {
+        if (elem.value?.length > 0 && elem.value?.length < elem.lengthForType) {
           elem.validity = 'tooShort';
           elem.errorMessage = elem.setCustomValidityForType || elem.setCustomValidity || '';
-        } else {
-          const valueDate = new Date(elem.value);
+        } else if (elem.value?.length === elem.lengthForType && elem.util.toNorthAmericanFormat(elem.value, elem.format)) {
+          const formattedValue = elem.util.toNorthAmericanFormat(elem.value, elem.format);
+          const valueDate = new Date(formattedValue.dateForComparison);
 
           // validate max
-          if (elem.max !== undefined) {
-            const maxDate = new Date(elem.max);
+          if (elem.max?.length === elem.lengthForType) {
+            const maxDate = new Date(elem.util.toNorthAmericanFormat(elem.max, elem.format).dateForComparison);
 
             if (valueDate > maxDate) {
               elem.validity = 'rangeOverflow';
@@ -500,8 +497,8 @@ class AuroFormValidation {
           }
 
           // validate min
-          if (elem.min) {
-            const minDate = new Date(elem.min);
+          if (elem.min?.length === elem.lengthForType) {
+            const minDate = new Date(elem.util.toNorthAmericanFormat(elem.min, elem.format).dateForComparison);
 
             if (valueDate < minDate) {
               elem.validity = 'rangeUnderflow';

package/components/checkbox/dist/index.js

@@ -478,20 +478,17 @@ class AuroFormValidation {
           elem.validity = 'rangeUnderflow';
           elem.errorMessage = elem.setCustomValidityRangeUnderflow || elem.setCustomValidity || '';
         }
-      } else if (elem.type === 'month-day-year' ||
-                 elem.type === 'month-year' ||
-                 elem.type === 'month-fullYear' ||
-                 elem.type === 'year-month-day'
-      ) {
-        if (elem.value?.length > 0 && elem.value.length < elem.dateStrLength) {
+      } else if (elem.type === 'date') {
+        if (elem.value?.length > 0 && elem.value?.length < elem.lengthForType) {
           elem.validity = 'tooShort';
           elem.errorMessage = elem.setCustomValidityForType || elem.setCustomValidity || '';
-        } else {
-          const valueDate = new Date(elem.value);
+        } else if (elem.value?.length === elem.lengthForType && elem.util.toNorthAmericanFormat(elem.value, elem.format)) {
+          const formattedValue = elem.util.toNorthAmericanFormat(elem.value, elem.format);
+          const valueDate = new Date(formattedValue.dateForComparison);
 
           // validate max
-          if (elem.max !== undefined) {
-            const maxDate = new Date(elem.max);
+          if (elem.max?.length === elem.lengthForType) {
+            const maxDate = new Date(elem.util.toNorthAmericanFormat(elem.max, elem.format).dateForComparison);
 
             if (valueDate > maxDate) {
               elem.validity = 'rangeOverflow';
@@ -500,8 +497,8 @@ class AuroFormValidation {
           }
 
           // validate min
-          if (elem.min) {
-            const minDate = new Date(elem.min);
+          if (elem.min?.length === elem.lengthForType) {
+            const minDate = new Date(elem.util.toNorthAmericanFormat(elem.min, elem.format).dateForComparison);
 
             if (valueDate < minDate) {
               elem.validity = 'rangeUnderflow';

package/components/checkbox/dist/registered.js

@@ -478,20 +478,17 @@ class AuroFormValidation {
           elem.validity = 'rangeUnderflow';
           elem.errorMessage = elem.setCustomValidityRangeUnderflow || elem.setCustomValidity || '';
         }
-      } else if (elem.type === 'month-day-year' ||
-                 elem.type === 'month-year' ||
-                 elem.type === 'month-fullYear' ||
-                 elem.type === 'year-month-day'
-      ) {
-        if (elem.value?.length > 0 && elem.value.length < elem.dateStrLength) {
+      } else if (elem.type === 'date') {
+        if (elem.value?.length > 0 && elem.value?.length < elem.lengthForType) {
           elem.validity = 'tooShort';
           elem.errorMessage = elem.setCustomValidityForType || elem.setCustomValidity || '';
-        } else {
-          const valueDate = new Date(elem.value);
+        } else if (elem.value?.length === elem.lengthForType && elem.util.toNorthAmericanFormat(elem.value, elem.format)) {
+          const formattedValue = elem.util.toNorthAmericanFormat(elem.value, elem.format);
+          const valueDate = new Date(formattedValue.dateForComparison);
 
           // validate max
-          if (elem.max !== undefined) {
-            const maxDate = new Date(elem.max);
+          if (elem.max?.length === elem.lengthForType) {
+            const maxDate = new Date(elem.util.toNorthAmericanFormat(elem.max, elem.format).dateForComparison);
 
             if (valueDate > maxDate) {
               elem.validity = 'rangeOverflow';
@@ -500,8 +497,8 @@ class AuroFormValidation {
           }
 
           // validate min
-          if (elem.min) {
-            const minDate = new Date(elem.min);
+          if (elem.min?.length === elem.lengthForType) {
+            const minDate = new Date(elem.util.toNorthAmericanFormat(elem.min, elem.format).dateForComparison);
 
             if (valueDate < minDate) {
               elem.validity = 'rangeUnderflow';

package/components/combobox/README.md

@@ -101,10 +101,10 @@ In cases where the project is not able to process JS assets, there are pre-proce
 <!-- The below content is automatically added from ../../docs/templates/componentBundleUseModBrowsers.md -->
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@4.13.0/dist/tokens/CSSCustomProperties.css" />
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@6.0.0/dist/bundled/essentials.css" />
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-dropdown@2.0.0-beta.45/dist/auro-dropdown__bundled.js" type="module"></script>
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-input@2.0.0-beta.45/dist/auro-input__bundled.js" type="module"></script>
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-menu@2.0.0-beta.45/dist/auro-menu__bundled.js" type="module"></script>
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-combobox@2.0.0-beta.45/dist/auro-combobox__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-dropdown@2.0.0-beta.46/dist/auro-dropdown__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-input@2.0.0-beta.46/dist/auro-input__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-menu@2.0.0-beta.46/dist/auro-menu__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-combobox@2.0.0-beta.46/dist/auro-combobox__bundled.js" type="module"></script>
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## auro-combobox use cases

package/components/combobox/demo/api.md

@@ -557,7 +557,7 @@ When defined, the `auro-input` in the combobox trigger will use the defined `typ
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/typeMonthDayYear.html) -->
   <!-- The below content is automatically added from ./../apiExamples/typeMonthDayYear.html -->
-  <auro-combobox type="month-day-year" triggerIcon>
+  <auro-combobox type="date" triggerIcon>
     <span slot="bib.fullscreen.headline">Date Combobox Header</span>
     <span slot="label">Date</span>
     <auro-menu>
@@ -577,7 +577,7 @@ When defined, the `auro-input` in the combobox trigger will use the defined `typ
 <!-- The below code snippet is automatically added from ./../apiExamples/typeMonthDayYear.html -->
 
 ```html
-<auro-combobox type="month-day-year" triggerIcon>
+<auro-combobox type="date" triggerIcon>
   <span slot="bib.fullscreen.headline">Date Combobox Header</span>
   <span slot="label">Date</span>
   <auro-menu>