@cloudscape-design/components-themeable 3.0.1056 → 3.0.1058

package/lib/internal/template/button-dropdown/item-element/styles.scoped.css

@@ -142,7 +142,7 @@
 */
 /* Style used for links in slots/components that are text heavy, to help links stand out among
 surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
-.awsui_item-element_93a1u_2mxwp_145:not(#\9) {
+.awsui_item-element_93a1u_9solc_145:not(#\9) {
   position: relative;
   z-index: 1;
   border-block: var(--border-item-width-acvlhx, 1px) solid transparent;
@@ -154,17 +154,17 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   margin-block-start: calc(-1 * var(--border-width-dropdown-qic2p4, 1px));
   cursor: pointer;
 }
-.awsui_item-element_93a1u_2mxwp_145.awsui_disabled_93a1u_2mxwp_157:not(#\9) {
+.awsui_item-element_93a1u_9solc_145.awsui_disabled_93a1u_9solc_157:not(#\9) {
   cursor: default;
   color: var(--color-text-dropdown-item-disabled-oysy8n, #aab7b8);
 }
-.awsui_item-element_93a1u_2mxwp_145:not(#\9):first-child {
+.awsui_item-element_93a1u_9solc_145:not(#\9):first-child {
   margin-block-start: 0;
 }
-.awsui_item-element_93a1u_2mxwp_145.awsui_show-divider_93a1u_2mxwp_164:not(#\9) {
+.awsui_item-element_93a1u_9solc_145.awsui_show-divider_93a1u_9solc_164:not(#\9) {
   border-block-end: var(--border-item-width-acvlhx, 1px) solid var(--color-border-dropdown-group-dg9zg5, #eaeded);
 }
-.awsui_item-element_93a1u_2mxwp_145.awsui_highlighted_93a1u_2mxwp_167:not(#\9) {
+.awsui_item-element_93a1u_9solc_145.awsui_highlighted_93a1u_9solc_167:not(#\9) {
   color: var(--color-text-dropdown-item-highlighted-bchk26, #16191f);
   z-index: 2;
   background-color: var(--color-background-dropdown-item-hover-353r6f, #f2f3f3);
@@ -174,19 +174,19 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   border-end-start-radius: var(--border-radius-item-xggxkd, 0px);
   border-end-end-radius: var(--border-radius-item-xggxkd, 0px);
 }
-.awsui_item-element_93a1u_2mxwp_145.awsui_highlighted_93a1u_2mxwp_167.awsui_disabled_93a1u_2mxwp_157:not(#\9) {
+.awsui_item-element_93a1u_9solc_145.awsui_highlighted_93a1u_9solc_167.awsui_disabled_93a1u_9solc_157:not(#\9) {
   color: var(--color-text-dropdown-item-dimmed-0xf8v3, #aab7b8);
   border-color: var(--color-border-dropdown-item-dimmed-hover-twsd8z, #879596);
   background-color: var(--color-background-dropdown-item-dimmed-2hwvu9, transparent);
 }
-.awsui_item-element_93a1u_2mxwp_145.awsui_highlighted_93a1u_2mxwp_167.awsui_is-focused_93a1u_2mxwp_182:not(#\9) {
+.awsui_item-element_93a1u_9solc_145.awsui_highlighted_93a1u_9solc_167.awsui_is-focused_93a1u_9solc_182:not(#\9) {
   border-color: var(--color-border-dropdown-item-focused-xty1zx, #0073bb);
 }
-.awsui_item-element_93a1u_2mxwp_145.awsui_highlighted_93a1u_2mxwp_167.awsui_is-focused_93a1u_2mxwp_182:not(#\9):not(.awsui_visual-refresh_93a1u_2mxwp_185) {
+.awsui_item-element_93a1u_9solc_145.awsui_highlighted_93a1u_9solc_167.awsui_is-focused_93a1u_9solc_182:not(#\9):not(.awsui_visual-refresh_93a1u_9solc_185) {
   box-shadow: inset 0 0 0 var(--border-control-focus-ring-shadow-spread-ql2vj7, 1px) var(--color-border-item-focused-r5f6xl, #0073bb);
 }
 
-.awsui_menu-item_93a1u_2mxwp_189:not(#\9) {
+.awsui_menu-item_93a1u_9solc_189:not(#\9) {
   min-inline-size: 0;
   word-break: break-word;
   display: flex;
@@ -198,11 +198,11 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   /* stylelint-disable selector-max-type */
   /* stylelint-enable selector-max-type */
 }
-.awsui_menu-item_93a1u_2mxwp_189.awsui_link-style_93a1u_2mxwp_201:not(#\9) {
+.awsui_menu-item_93a1u_9solc_189.awsui_link-style_93a1u_9solc_201:not(#\9) {
   padding-block-end: calc(var(--space-xxs-jnczic, 4px) + var(--space-xxxs-3w1kr2, 2px));
   text-underline-offset: 0.25em;
   text-decoration-thickness: 1px;
-  color: var(--color-text-link-default-x6cnv5, #0073bb);
+  color: var(--awsui-style-color-default-kcc2gu, var(--color-text-link-default-x6cnv5, #0073bb));
   font-weight: inherit;
   letter-spacing: normal;
   text-decoration-line: underline;
@@ -213,30 +213,30 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   transition-duration: var(--motion-duration-refresh-only-medium-h3wrr6, 0ms);
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_menu-item_93a1u_2mxwp_189.awsui_link-style_93a1u_2mxwp_201:not(#\9) {
+  .awsui_menu-item_93a1u_9solc_189.awsui_link-style_93a1u_9solc_201:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_menu-item_93a1u_2mxwp_189.awsui_link-style_93a1u_2mxwp_201:not(#\9), .awsui-mode-entering .awsui_menu-item_93a1u_2mxwp_189.awsui_link-style_93a1u_2mxwp_201:not(#\9) {
+.awsui-motion-disabled .awsui_menu-item_93a1u_9solc_189.awsui_link-style_93a1u_9solc_201:not(#\9), .awsui-mode-entering .awsui_menu-item_93a1u_9solc_189.awsui_link-style_93a1u_9solc_201:not(#\9) {
   animation: none;
   transition: none;
 }
-.awsui_menu-item_93a1u_2mxwp_189.awsui_link-style_93a1u_2mxwp_201:not(#\9):hover {
+.awsui_menu-item_93a1u_9solc_189.awsui_link-style_93a1u_9solc_201:not(#\9):hover {
   cursor: pointer;
-  color: var(--color-text-link-hover-tk5gkv, #0a4a74);
+  color: var(--awsui-style-color-hover-kcc2gu, var(--color-text-link-hover-tk5gkv, #0a4a74));
 }
-.awsui_menu-item_93a1u_2mxwp_189.awsui_link-style_93a1u_2mxwp_201:not(#\9):focus {
+.awsui_menu-item_93a1u_9solc_189.awsui_link-style_93a1u_9solc_201:not(#\9):focus {
   outline: none;
 }
-.awsui_menu-item_93a1u_2mxwp_189.awsui_link-style_93a1u_2mxwp_201:not(#\9):active {
-  color: var(--color-text-link-hover-tk5gkv, #0a4a74);
+.awsui_menu-item_93a1u_9solc_189.awsui_link-style_93a1u_9solc_201:not(#\9):active {
+  color: var(--awsui-style-color-active-kcc2gu, var(--color-text-link-hover-tk5gkv, #0a4a74));
 }
-.awsui_menu-item_93a1u_2mxwp_189.awsui_link-style_93a1u_2mxwp_201:not(#\9):active, .awsui_menu-item_93a1u_2mxwp_189.awsui_link-style_93a1u_2mxwp_201:not(#\9):focus, .awsui_menu-item_93a1u_2mxwp_189.awsui_link-style_93a1u_2mxwp_201:not(#\9):hover {
+.awsui_menu-item_93a1u_9solc_189.awsui_link-style_93a1u_9solc_201:not(#\9):active, .awsui_menu-item_93a1u_9solc_189.awsui_link-style_93a1u_9solc_201:not(#\9):focus, .awsui_menu-item_93a1u_9solc_189.awsui_link-style_93a1u_9solc_201:not(#\9):hover {
   text-decoration-line: underline;
   text-decoration-color: currentColor;
 }
-.awsui_menu-item_93a1u_2mxwp_189.awsui_link-style_93a1u_2mxwp_201.awsui_current-breadcrumb_93a1u_2mxwp_237:not(#\9) {
+.awsui_menu-item_93a1u_9solc_189.awsui_link-style_93a1u_9solc_201.awsui_current-breadcrumb_93a1u_9solc_237:not(#\9) {
   font-weight: var(--font-weight-button-hh0ago, 700);
   -webkit-font-smoothing: var(--font-smoothing-webkit-px4az4, auto);
   -moz-osx-font-smoothing: var(--font-smoothing-moz-osx-ev3sgf, auto);
@@ -244,27 +244,27 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   font-weight: 700;
   text-decoration: none;
 }
-.awsui_menu-item_93a1u_2mxwp_189.awsui_link-style_93a1u_2mxwp_201.awsui_link-style-highlighted_93a1u_2mxwp_245:not(#\9) {
+.awsui_menu-item_93a1u_9solc_189.awsui_link-style_93a1u_9solc_201.awsui_link-style-highlighted_93a1u_9solc_245:not(#\9) {
   color: var(--color-text-link-hover-tk5gkv, #0a4a74);
 }
-.awsui_menu-item_93a1u_2mxwp_189:not(#\9):focus {
+.awsui_menu-item_93a1u_9solc_189:not(#\9):focus {
   outline: none;
 }
-.awsui_has-category-header_93a1u_2mxwp_251 > .awsui_menu-item_93a1u_2mxwp_189:not(#\9), .awsui_has-category-header_93a1u_2mxwp_251 > .awsui_item-tooltip-wrapper_93a1u_2mxwp_251 > .awsui_menu-item_93a1u_2mxwp_189:not(#\9), .awsui_has-category-header_93a1u_2mxwp_251:not(#\9):not(.awsui_has-checkmark_93a1u_2mxwp_251) > span > .awsui_menu-item_93a1u_2mxwp_189 {
+.awsui_has-category-header_93a1u_9solc_251 > .awsui_menu-item_93a1u_9solc_189:not(#\9), .awsui_has-category-header_93a1u_9solc_251 > .awsui_item-tooltip-wrapper_93a1u_9solc_251 > .awsui_menu-item_93a1u_9solc_189:not(#\9), .awsui_has-category-header_93a1u_9solc_251:not(#\9):not(.awsui_has-checkmark_93a1u_9solc_251) > span > .awsui_menu-item_93a1u_9solc_189 {
   padding-inline-start: calc(var(--space-xs-kw7k3v, 8px) + var(--space-l-3cws6j, 20px));
 }
 
-.awsui_icon_93a1u_2mxwp_255:not(#\9) {
+.awsui_icon_93a1u_9solc_255:not(#\9) {
   padding-inline-end: var(--space-xxs-jnczic, 4px);
   flex-shrink: 0;
 }
-.awsui_icon_93a1u_2mxwp_255.awsui_checkmark_93a1u_2mxwp_259:not(#\9) {
+.awsui_icon_93a1u_9solc_255.awsui_checkmark_93a1u_9solc_259:not(#\9) {
   color: var(--color-text-status-info-xt2ka7, #0073bb);
 }
-.awsui_icon_93a1u_2mxwp_255.awsui_disabled_93a1u_2mxwp_157:not(#\9) {
+.awsui_icon_93a1u_9solc_255.awsui_disabled_93a1u_9solc_157:not(#\9) {
   color: var(--color-text-interactive-disabled-xwt2jl, #aab7b8);
 }
 
-.awsui_external-icon_93a1u_2mxwp_266:not(#\9) {
+.awsui_external-icon_93a1u_9solc_266:not(#\9) {
   margin-inline-start: var(--space-xxs-jnczic, 4px);
 }

package/lib/internal/template/button-dropdown/item-element/styles.selectors.js

@@ -2,21 +2,21 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "item-element": "awsui_item-element_93a1u_2mxwp_145",
-  "disabled": "awsui_disabled_93a1u_2mxwp_157",
-  "show-divider": "awsui_show-divider_93a1u_2mxwp_164",
-  "highlighted": "awsui_highlighted_93a1u_2mxwp_167",
-  "is-focused": "awsui_is-focused_93a1u_2mxwp_182",
-  "visual-refresh": "awsui_visual-refresh_93a1u_2mxwp_185",
-  "menu-item": "awsui_menu-item_93a1u_2mxwp_189",
-  "link-style": "awsui_link-style_93a1u_2mxwp_201",
-  "current-breadcrumb": "awsui_current-breadcrumb_93a1u_2mxwp_237",
-  "link-style-highlighted": "awsui_link-style-highlighted_93a1u_2mxwp_245",
-  "has-category-header": "awsui_has-category-header_93a1u_2mxwp_251",
-  "item-tooltip-wrapper": "awsui_item-tooltip-wrapper_93a1u_2mxwp_251",
-  "has-checkmark": "awsui_has-checkmark_93a1u_2mxwp_251",
-  "icon": "awsui_icon_93a1u_2mxwp_255",
-  "checkmark": "awsui_checkmark_93a1u_2mxwp_259",
-  "external-icon": "awsui_external-icon_93a1u_2mxwp_266"
+  "item-element": "awsui_item-element_93a1u_9solc_145",
+  "disabled": "awsui_disabled_93a1u_9solc_157",
+  "show-divider": "awsui_show-divider_93a1u_9solc_164",
+  "highlighted": "awsui_highlighted_93a1u_9solc_167",
+  "is-focused": "awsui_is-focused_93a1u_9solc_182",
+  "visual-refresh": "awsui_visual-refresh_93a1u_9solc_185",
+  "menu-item": "awsui_menu-item_93a1u_9solc_189",
+  "link-style": "awsui_link-style_93a1u_9solc_201",
+  "current-breadcrumb": "awsui_current-breadcrumb_93a1u_9solc_237",
+  "link-style-highlighted": "awsui_link-style-highlighted_93a1u_9solc_245",
+  "has-category-header": "awsui_has-category-header_93a1u_9solc_251",
+  "item-tooltip-wrapper": "awsui_item-tooltip-wrapper_93a1u_9solc_251",
+  "has-checkmark": "awsui_has-checkmark_93a1u_9solc_251",
+  "icon": "awsui_icon_93a1u_9solc_255",
+  "checkmark": "awsui_checkmark_93a1u_9solc_259",
+  "external-icon": "awsui_external-icon_93a1u_9solc_266"
 };
   

package/lib/internal/template/date-input/index.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { DateInputProps } from './interfaces';
 export { DateInputProps };
-declare const DateInput: React.ForwardRefExoticComponent<DateInputProps & React.RefAttributes<HTMLInputElement>>;
+declare const DateInput: React.ForwardRefExoticComponent<DateInputProps & React.RefAttributes<import("..").InputProps.Ref>>;
 export default DateInput;
 //# sourceMappingURL=index.d.ts.map

package/lib/internal/template/date-input/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/date-input/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAc,MAAM,OAAO,CAAC;AAInC,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAG9C,OAAO,EAAE,cAAc,EAAE,CAAC;AAE1B,QAAA,MAAM,SAAS,yFAKb,CAAC;AAIH,eAAe,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/date-input/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAc,MAAM,OAAO,CAAC;AAInC,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAG9C,OAAO,EAAE,cAAc,EAAE,CAAC;AAE1B,QAAA,MAAM,SAAS,oGAKb,CAAC;AAIH,eAAe,SAAS,CAAC"}

package/lib/internal/template/date-input/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/date-input/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,YAAY,CAAC;AACb,OAAO,KAAc,MAAM,OAAO,CAAC;AAEnC,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAExE,OAAO,iBAAiB,MAAM,YAAY,CAAC;AAI3C,MAAM,SAAS,GAAG,KAAK,CAAC,UAAU,CAAC,CAAC,KAAqB,EAAE,GAA0B,EAAE,EAAE;IACvF,MAAM,kBAAkB,GAAG,gBAAgB,CAAC,WAAW,EAAE;QACvD,KAAK,EAAE,EAAE,SAAS,EAAE,KAAK,CAAC,SAAS,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE;KAChE,CAAC,CAAC;IACH,OAAO,oBAAC,iBAAiB,oBAAK,KAAK,EAAM,kBAAkB,IAAE,GAAG,EAAE,GAAG,IAAI,CAAC;AAC5E,CAAC,CAAC,CAAC;AAEH,gBAAgB,CAAC,SAAS,EAAE,WAAW,CAAC,CAAC;AAEzC,eAAe,SAAS,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\n'use client';\nimport React, { Ref } from 'react';\n\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { DateInputProps } from './interfaces';\nimport InternalDateInput from './internal';\n\nexport { DateInputProps };\n\nconst DateInput = React.forwardRef((props: DateInputProps, ref: Ref<HTMLInputElement>) => {\n  const baseComponentProps = useBaseComponent('DateInput', {\n    props: { autoFocus: props.autoFocus, readOnly: props.readOnly },\n  });\n  return <InternalDateInput {...props} {...baseComponentProps} ref={ref} />;\n});\n\napplyDisplayName(DateInput, 'DateInput');\n\nexport default DateInput;\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/date-input/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,YAAY,CAAC;AACb,OAAO,KAAc,MAAM,OAAO,CAAC;AAEnC,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAExE,OAAO,iBAAiB,MAAM,YAAY,CAAC;AAI3C,MAAM,SAAS,GAAG,KAAK,CAAC,UAAU,CAAC,CAAC,KAAqB,EAAE,GAA4B,EAAE,EAAE;IACzF,MAAM,kBAAkB,GAAG,gBAAgB,CAAC,WAAW,EAAE;QACvD,KAAK,EAAE,EAAE,SAAS,EAAE,KAAK,CAAC,SAAS,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE;KAChE,CAAC,CAAC;IACH,OAAO,oBAAC,iBAAiB,oBAAK,KAAK,EAAM,kBAAkB,IAAE,GAAG,EAAE,GAAG,IAAI,CAAC;AAC5E,CAAC,CAAC,CAAC;AAEH,gBAAgB,CAAC,SAAS,EAAE,WAAW,CAAC,CAAC;AAEzC,eAAe,SAAS,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\n'use client';\nimport React, { Ref } from 'react';\n\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { DateInputProps } from './interfaces';\nimport InternalDateInput from './internal';\n\nexport { DateInputProps };\n\nconst DateInput = React.forwardRef((props: DateInputProps, ref: Ref<DateInputProps.Ref>) => {\n  const baseComponentProps = useBaseComponent('DateInput', {\n    props: { autoFocus: props.autoFocus, readOnly: props.readOnly },\n  });\n  return <InternalDateInput {...props} {...baseComponentProps} ref={ref} />;\n});\n\napplyDisplayName(DateInput, 'DateInput');\n\nexport default DateInput;\n"]}

package/lib/internal/template/date-input/interfaces.d.ts

@@ -1,13 +1,42 @@
 import { BaseInputProps, InputProps } from '../input/interfaces';
 import { BaseComponentProps } from '../internal/base-component';
 import { FormFieldValidationControlProps } from '../internal/context/form-field-context';
+import { DateFormat, DateGranularity, EditableDateFormat } from '../internal/utils/date-time/interfaces';
 export interface DateInputProps extends BaseInputProps, FormFieldValidationControlProps, BaseComponentProps {
     /**
      * The current input value, in YYYY-MM-DD format.
      */
     value: string;
+    /**
+     * Specifies the locale to use to render month names and determine the starting day of the week.
+     * If you don't provide this, the locale is determined by the page and browser locales.
+     * Supported values and formats are listed in the [JavaScript Intl API specification](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#Locale_identification_and_negotiation).
+     */
+    locale?: string;
+    /**
+     * Specifies the granularity at which users will be able to select a date.
+     * Defaults to `day`.
+     **/
+    granularity?: DateInputProps.Granularity;
+    /**
+     * The format as it is displayed. It can take the following values:
+     * * `iso`: ISO 8601 format without time, e.g.: 2024-01-30 (or 2024-01).
+     * * `long-localized`: a more human-readable, localized format, e.g.: January 30, 2024 (or January, 2024).
+     * * `slashed`: similar to ISO 8601 but with '/' in place of '-'. e.g.: 2024/01/30 (or 2024/01).
+     */
+    format?: DateInputProps.Format;
+    /**
+     * Specifies the date format to use when the format is 'long-localized' and editing the date.
+     * The format of the input as it is being interacted with. It can take the following values:
+     * * `iso`: ISO 8601 format without time, e.g.: 2024-01-30 (or 2024-01).
+     * * `slashed`: similar to ISO 8601 but with '/' in place of '-'. e.g.: 2024/01/30 (or 2024/01).
+     */
+    inputFormat?: DateInputProps.InputFormat;
 }
 export declare namespace DateInputProps {
     type Ref = InputProps.Ref;
+    type Format = DateFormat;
+    type InputFormat = EditableDateFormat;
+    type Granularity = DateGranularity;
 }
 //# sourceMappingURL=interfaces.d.ts.map

package/lib/internal/template/date-input/interfaces.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/date-input/interfaces.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACjE,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,+BAA+B,EAAE,MAAM,wCAAwC,CAAC;AAEzF,MAAM,WAAW,cAAe,SAAQ,cAAc,EAAE,+BAA+B,EAAE,kBAAkB;IACzG;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;CACf;AAED,yBAAiB,cAAc,CAAC;IAC9B,KAAY,GAAG,GAAG,UAAU,CAAC,GAAG,CAAC;CAClC"}
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/date-input/interfaces.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACjE,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,+BAA+B,EAAE,MAAM,wCAAwC,CAAC;AACzF,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,kBAAkB,EAAE,MAAM,wCAAwC,CAAC;AAEzG,MAAM,WAAW,cAAe,SAAQ,cAAc,EAAE,+BAA+B,EAAE,kBAAkB;IACzG;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;QAGI;IACJ,WAAW,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC;IAEzC;;;;;OAKG;IACH,MAAM,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC;IAE/B;;;;;OAKG;IACH,WAAW,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC;CAC1C;AAED,yBAAiB,cAAc,CAAC;IAC9B,KAAY,GAAG,GAAG,UAAU,CAAC,GAAG,CAAC;IAEjC,KAAY,MAAM,GAAG,UAAU,CAAC;IAEhC,KAAY,WAAW,GAAG,kBAAkB,CAAC;IAE7C,KAAY,WAAW,GAAG,eAAe,CAAC;CAC3C"}

package/lib/internal/template/date-input/interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/date-input/interfaces.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { BaseInputProps, InputProps } from '../input/interfaces';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { FormFieldValidationControlProps } from '../internal/context/form-field-context';\n\nexport interface DateInputProps extends BaseInputProps, FormFieldValidationControlProps, BaseComponentProps {\n  /**\n   * The current input value, in YYYY-MM-DD format.\n   */\n  value: string;\n}\n\nexport namespace DateInputProps {\n  export type Ref = InputProps.Ref;\n}\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/date-input/interfaces.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { BaseInputProps, InputProps } from '../input/interfaces';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { FormFieldValidationControlProps } from '../internal/context/form-field-context';\nimport { DateFormat, DateGranularity, EditableDateFormat } from '../internal/utils/date-time/interfaces';\n\nexport interface DateInputProps extends BaseInputProps, FormFieldValidationControlProps, BaseComponentProps {\n  /**\n   * The current input value, in YYYY-MM-DD format.\n   */\n  value: string;\n\n  /**\n   * Specifies the locale to use to render month names and determine the starting day of the week.\n   * If you don't provide this, the locale is determined by the page and browser locales.\n   * Supported values and formats are listed in the [JavaScript Intl API specification](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#Locale_identification_and_negotiation).\n   */\n  locale?: string;\n\n  /**\n   * Specifies the granularity at which users will be able to select a date.\n   * Defaults to `day`.\n   **/\n  granularity?: DateInputProps.Granularity;\n\n  /**\n   * The format as it is displayed. It can take the following values:\n   * * `iso`: ISO 8601 format without time, e.g.: 2024-01-30 (or 2024-01).\n   * * `long-localized`: a more human-readable, localized format, e.g.: January 30, 2024 (or January, 2024).\n   * * `slashed`: similar to ISO 8601 but with '/' in place of '-'. e.g.: 2024/01/30 (or 2024/01).\n   */\n  format?: DateInputProps.Format;\n\n  /**\n   * Specifies the date format to use when the format is 'long-localized' and editing the date.\n   * The format of the input as it is being interacted with. It can take the following values:\n   * * `iso`: ISO 8601 format without time, e.g.: 2024-01-30 (or 2024-01).\n   * * `slashed`: similar to ISO 8601 but with '/' in place of '-'. e.g.: 2024/01/30 (or 2024/01).\n   */\n  inputFormat?: DateInputProps.InputFormat;\n}\n\nexport namespace DateInputProps {\n  export type Ref = InputProps.Ref;\n\n  export type Format = DateFormat;\n\n  export type InputFormat = EditableDateFormat;\n\n  export type Granularity = DateGranularity;\n}\n"]}

package/lib/internal/template/date-input/internal.d.ts

@@ -1,9 +1,6 @@
 import React from 'react';
-import { CalendarProps } from '../calendar/interfaces';
 import { InternalBaseComponentProps } from '../internal/hooks/use-base-component';
 import { DateInputProps } from './interfaces';
-declare const InternalDateInput: React.ForwardRefExoticComponent<DateInputProps & InternalBaseComponentProps<any> & {
-    granularity?: CalendarProps.Granularity | undefined;
-} & React.RefAttributes<HTMLInputElement>>;
+declare const InternalDateInput: React.ForwardRefExoticComponent<DateInputProps & InternalBaseComponentProps<any> & React.RefAttributes<import("..").InputProps.Ref>>;
 export default InternalDateInput;
 //# sourceMappingURL=internal.d.ts.map

package/lib/internal/template/date-input/internal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/date-input/internal.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAc,MAAM,OAAO,CAAC;AAGnC,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAGvD,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAElF,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAU9C,QAAA,MAAM,iBAAiB;;0CAqBtB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/date-input/internal.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAM9D,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAIlF,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAO9C,QAAA,MAAM,iBAAiB,sIAyEtB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/lib/internal/template/date-input/internal.js

@@ -1,16 +1,51 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import { __rest } from "tslib";
-import React from 'react';
+import React, { useMemo, useRef, useState } from 'react';
 import clsx from 'clsx';
 import MaskedInput from '../internal/components/masked-input';
 import { fireNonCancelableEvent } from '../internal/events';
+import useForwardFocus from '../internal/hooks/forward-focus';
 import { displayToIso, isoToDisplay } from '../internal/utils/date-time';
-import { generateMaskArgs } from './utils';
+import formatDateIso from '../internal/utils/date-time/format-date-iso';
+import formatDateLocalized from '../internal/utils/date-time/format-date-localized';
+import { generateMaskArgs, normalizeIsoDateString } from './utils';
 import styles from './styles.css.js';
 const InternalDateInput = React.forwardRef((_a, ref) => {
-    var { value, onChange, granularity, __internalRootRef = null } = _a, props = __rest(_a, ["value", "onChange", "granularity", "__internalRootRef"]);
-    return (React.createElement(MaskedInput, Object.assign({ ref: ref }, props, { value: isoToDisplay(value || ''), onChange: event => fireNonCancelableEvent(onChange, { value: displayToIso(event.detail.value) }), className: clsx(styles.root, props.className), mask: generateMaskArgs({ granularity }), autofix: true, autoComplete: false, disableAutocompleteOnBlur: false, disableBrowserAutocorrect: true, __internalRootRef: __internalRootRef })));
+    var { value, onChange, onBlur, onFocus, granularity = 'day', locale, format = 'slashed', inputFormat = 'slashed', __internalRootRef = null } = _a, props = __rest(_a, ["value", "onChange", "onBlur", "onFocus", "granularity", "locale", "format", "inputFormat", "__internalRootRef"]);
+    const [isFocused, setIsFocused] = useState(false);
+    const inputRef = useRef(null);
+    const isIso = format === 'iso' || (format === 'long-localized' && inputFormat === 'iso');
+    useForwardFocus(ref, inputRef);
+    const onInputFocus = (event) => {
+        setIsFocused(true);
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
+    };
+    const onInputBlur = (event) => {
+        setIsFocused(false);
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+    };
+    const onInputChange = (event) => {
+        const isNonFocusedLongLocalized = format === 'long-localized' && !(isFocused || props.readOnly);
+        if (!isNonFocusedLongLocalized) {
+            fireNonCancelableEvent(onChange, { value: displayToIso(event.detail.value) });
+        }
+    };
+    const usesLongLocalizedValue = format === 'long-localized' && !(isFocused && !props.readOnly);
+    const displayedValue = useMemo(() => {
+        if (!value) {
+            return '';
+        }
+        const isoValue = displayToIso(value);
+        const formatProps = { hideTimeOffset: true, isDateOnly: true, isMonthOnly: granularity === 'month', locale };
+        const normalizedValue = normalizeIsoDateString(isoValue, granularity);
+        return usesLongLocalizedValue && normalizedValue
+            ? formatDateLocalized(Object.assign({ date: normalizedValue }, formatProps))
+            : isIso
+                ? formatDateIso(Object.assign({ date: isoValue }, formatProps))
+                : isoToDisplay(isoValue);
+    }, [value, isIso, granularity, locale, usesLongLocalizedValue]);
+    return (React.createElement(MaskedInput, Object.assign({ ref: inputRef }, props, { value: displayedValue, onChange: onInputChange, onFocus: onInputFocus, onBlur: onInputBlur, className: clsx(styles.root, props.className), mask: generateMaskArgs({ granularity, isIso }), autofix: !usesLongLocalizedValue, disableAutocompleteOnBlur: false, disableBrowserAutocorrect: true, showUnmaskedValue: usesLongLocalizedValue, autoComplete: false, __internalRootRef: __internalRootRef })));
 });
 export default InternalDateInput;
 //# sourceMappingURL=internal.js.map

package/lib/internal/template/date-input/internal.js.map

@@ -1 +1 @@
-{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/date-input/internal.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;;AAEtC,OAAO,KAAc,MAAM,OAAO,CAAC;AACnC,OAAO,IAAI,MAAM,MAAM,CAAC;AAGxB,OAAO,WAAW,MAAM,qCAAqC,CAAC;AAC9D,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAE5D,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAEzE,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAE3C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAOrC,MAAM,iBAAiB,GAAG,KAAK,CAAC,UAAU,CACxC,CACE,EAA4F,EAC5F,GAA0B,EAC1B,EAAE;QAFF,EAAE,KAAK,EAAE,QAAQ,EAAE,WAAW,EAAE,iBAAiB,GAAG,IAAI,OAAoC,EAA/B,KAAK,cAAlE,yDAAoE,CAAF;IAGlE,OAAO,CACL,oBAAC,WAAW,kBACV,GAAG,EAAE,GAAG,IACJ,KAAK,IACT,KAAK,EAAE,YAAY,CAAC,KAAK,IAAI,EAAE,CAAC,EAChC,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAAC,QAAQ,EAAE,EAAE,KAAK,EAAE,YAAY,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,EAChG,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC,EAC7C,IAAI,EAAE,gBAAgB,CAAC,EAAE,WAAW,EAAE,CAAC,EACvC,OAAO,EAAE,IAAI,EACb,YAAY,EAAE,KAAK,EACnB,yBAAyB,EAAE,KAAK,EAChC,yBAAyB,EAAE,IAAI,EAC/B,iBAAiB,EAAE,iBAAiB,IACpC,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,iBAAiB,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React, { Ref } from 'react';\nimport clsx from 'clsx';\n\nimport { CalendarProps } from '../calendar/interfaces';\nimport MaskedInput from '../internal/components/masked-input';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { displayToIso, isoToDisplay } from '../internal/utils/date-time';\nimport { DateInputProps } from './interfaces';\nimport { generateMaskArgs } from './utils';\n\nimport styles from './styles.css.js';\n\ntype InternalDateInputProps = DateInputProps &\n  InternalBaseComponentProps & {\n    granularity?: CalendarProps.Granularity;\n  };\n\nconst InternalDateInput = React.forwardRef(\n  (\n    { value, onChange, granularity, __internalRootRef = null, ...props }: InternalDateInputProps,\n    ref: Ref<HTMLInputElement>\n  ) => {\n    return (\n      <MaskedInput\n        ref={ref}\n        {...props}\n        value={isoToDisplay(value || '')}\n        onChange={event => fireNonCancelableEvent(onChange, { value: displayToIso(event.detail.value) })}\n        className={clsx(styles.root, props.className)}\n        mask={generateMaskArgs({ granularity })}\n        autofix={true}\n        autoComplete={false}\n        disableAutocompleteOnBlur={false}\n        disableBrowserAutocorrect={true}\n        __internalRootRef={__internalRootRef}\n      />\n    );\n  }\n);\n\nexport default InternalDateInput;\n"]}
+{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/date-input/internal.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;;AAEtC,OAAO,KAAK,EAAE,EAAO,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC9D,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,WAAW,MAAM,qCAAqC,CAAC;AAC9D,OAAO,EAAE,sBAAsB,EAA4B,MAAM,oBAAoB,CAAC;AACtF,OAAO,eAAe,MAAM,iCAAiC,CAAC;AAE9D,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AACzE,OAAO,aAAa,MAAM,6CAA6C,CAAC;AACxE,OAAO,mBAAmB,MAAM,mDAAmD,CAAC;AAEpF,OAAO,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAEnE,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAIrC,MAAM,iBAAiB,GAAG,KAAK,CAAC,UAAU,CACxC,CACE,EAWyB,EACzB,GAA4B,EAC5B,EAAE;QAbF,EACE,KAAK,EACL,QAAQ,EACR,MAAM,EACN,OAAO,EACP,WAAW,GAAG,KAAK,EACnB,MAAM,EACN,MAAM,GAAG,SAAS,EAClB,WAAW,GAAG,SAAS,EACvB,iBAAiB,GAAG,IAAI,OAED,EADpB,KAAK,cAVV,iHAWC,CADS;IAIV,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClD,MAAM,QAAQ,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAChD,MAAM,KAAK,GAAG,MAAM,KAAK,KAAK,IAAI,CAAC,MAAM,KAAK,gBAAgB,IAAI,WAAW,KAAK,KAAK,CAAC,CAAC;IAEzF,eAAe,CAAC,GAAG,EAAE,QAAQ,CAAC,CAAC;IAE/B,MAAM,YAAY,GAAG,CAAC,KAAqC,EAAE,EAAE;QAC7D,YAAY,CAAC,IAAI,CAAC,CAAC;QACnB,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,KAAK,CAAC,CAAC;IACnB,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,CAAC,KAAqC,EAAE,EAAE;QAC5D,YAAY,CAAC,KAAK,CAAC,CAAC;QACpB,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAG,KAAK,CAAC,CAAC;IAClB,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,CAAC,KAAkD,EAAE,EAAE;QAC3E,MAAM,yBAAyB,GAAG,MAAM,KAAK,gBAAgB,IAAI,CAAC,CAAC,SAAS,IAAI,KAAK,CAAC,QAAQ,CAAC,CAAC;QAChG,IAAI,CAAC,yBAAyB,EAAE;YAC9B,sBAAsB,CAAC,QAAQ,EAAE,EAAE,KAAK,EAAE,YAAY,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;SAC/E;IACH,CAAC,CAAC;IAEF,MAAM,sBAAsB,GAAG,MAAM,KAAK,gBAAgB,IAAI,CAAC,CAAC,SAAS,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IAC9F,MAAM,cAAc,GAAG,OAAO,CAAC,GAAG,EAAE;QAClC,IAAI,CAAC,KAAK,EAAE;YACV,OAAO,EAAE,CAAC;SACX;QACD,MAAM,QAAQ,GAAG,YAAY,CAAC,KAAK,CAAC,CAAC;QACrC,MAAM,WAAW,GAAG,EAAE,cAAc,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,WAAW,EAAE,WAAW,KAAK,OAAO,EAAE,MAAM,EAAE,CAAC;QAC7G,MAAM,eAAe,GAAG,sBAAsB,CAAC,QAAQ,EAAE,WAAW,CAAC,CAAC;QACtE,OAAO,sBAAsB,IAAI,eAAe;YAC9C,CAAC,CAAC,mBAAmB,iBAAG,IAAI,EAAE,eAAe,IAAK,WAAW,EAAG;YAChE,CAAC,CAAC,KAAK;gBACL,CAAC,CAAC,aAAa,iBAAG,IAAI,EAAE,QAAQ,IAAK,WAAW,EAAG;gBACnD,CAAC,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;IAC/B,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,sBAAsB,CAAC,CAAC,CAAC;IAEhE,OAAO,CACL,oBAAC,WAAW,kBACV,GAAG,EAAE,QAAQ,IACT,KAAK,IACT,KAAK,EAAE,cAAc,EACrB,QAAQ,EAAE,aAAa,EACvB,OAAO,EAAE,YAAY,EACrB,MAAM,EAAE,WAAW,EACnB,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC,EAC7C,IAAI,EAAE,gBAAgB,CAAC,EAAE,WAAW,EAAE,KAAK,EAAE,CAAC,EAC9C,OAAO,EAAE,CAAC,sBAAsB,EAChC,yBAAyB,EAAE,KAAK,EAChC,yBAAyB,EAAE,IAAI,EAC/B,iBAAiB,EAAE,sBAAsB,EACzC,YAAY,EAAE,KAAK,EACnB,iBAAiB,EAAE,iBAAiB,IACpC,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,iBAAiB,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React, { Ref, useMemo, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport MaskedInput from '../internal/components/masked-input';\nimport { fireNonCancelableEvent, NonCancelableCustomEvent } from '../internal/events';\nimport useForwardFocus from '../internal/hooks/forward-focus';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { displayToIso, isoToDisplay } from '../internal/utils/date-time';\nimport formatDateIso from '../internal/utils/date-time/format-date-iso';\nimport formatDateLocalized from '../internal/utils/date-time/format-date-localized';\nimport { DateInputProps } from './interfaces';\nimport { generateMaskArgs, normalizeIsoDateString } from './utils';\n\nimport styles from './styles.css.js';\n\ntype InternalDateInputProps = DateInputProps & InternalBaseComponentProps;\n\nconst InternalDateInput = React.forwardRef(\n  (\n    {\n      value,\n      onChange,\n      onBlur,\n      onFocus,\n      granularity = 'day',\n      locale,\n      format = 'slashed',\n      inputFormat = 'slashed',\n      __internalRootRef = null,\n      ...props\n    }: InternalDateInputProps,\n    ref: Ref<DateInputProps.Ref>\n  ) => {\n    const [isFocused, setIsFocused] = useState(false);\n    const inputRef = useRef<HTMLInputElement>(null);\n    const isIso = format === 'iso' || (format === 'long-localized' && inputFormat === 'iso');\n\n    useForwardFocus(ref, inputRef);\n\n    const onInputFocus = (event: NonCancelableCustomEvent<null>) => {\n      setIsFocused(true);\n      onFocus?.(event);\n    };\n\n    const onInputBlur = (event: NonCancelableCustomEvent<null>) => {\n      setIsFocused(false);\n      onBlur?.(event);\n    };\n\n    const onInputChange = (event: NonCancelableCustomEvent<{ value: string }>) => {\n      const isNonFocusedLongLocalized = format === 'long-localized' && !(isFocused || props.readOnly);\n      if (!isNonFocusedLongLocalized) {\n        fireNonCancelableEvent(onChange, { value: displayToIso(event.detail.value) });\n      }\n    };\n\n    const usesLongLocalizedValue = format === 'long-localized' && !(isFocused && !props.readOnly);\n    const displayedValue = useMemo(() => {\n      if (!value) {\n        return '';\n      }\n      const isoValue = displayToIso(value);\n      const formatProps = { hideTimeOffset: true, isDateOnly: true, isMonthOnly: granularity === 'month', locale };\n      const normalizedValue = normalizeIsoDateString(isoValue, granularity);\n      return usesLongLocalizedValue && normalizedValue\n        ? formatDateLocalized({ date: normalizedValue, ...formatProps })\n        : isIso\n          ? formatDateIso({ date: isoValue, ...formatProps })\n          : isoToDisplay(isoValue);\n    }, [value, isIso, granularity, locale, usesLongLocalizedValue]);\n\n    return (\n      <MaskedInput\n        ref={inputRef}\n        {...props}\n        value={displayedValue}\n        onChange={onInputChange}\n        onFocus={onInputFocus}\n        onBlur={onInputBlur}\n        className={clsx(styles.root, props.className)}\n        mask={generateMaskArgs({ granularity, isIso })}\n        autofix={!usesLongLocalizedValue}\n        disableAutocompleteOnBlur={false}\n        disableBrowserAutocorrect={true}\n        showUnmaskedValue={usesLongLocalizedValue}\n        autoComplete={false}\n        __internalRootRef={__internalRootRef}\n      />\n    );\n  }\n);\n\nexport default InternalDateInput;\n"]}

package/lib/internal/template/date-input/utils.d.ts

@@ -4,4 +4,12 @@ export interface GenerateMaskArgsProps extends Pick<CalendarProps, 'granularity'
     isIso?: boolean;
 }
 export declare const generateMaskArgs: ({ granularity, isIso, }?: GenerateMaskArgsProps) => MaskArgs;
+/**
+ * Normalizes a partial ISO date string by trimming incomplete segments.
+ *
+ * @param dateString - The date string to normalize (e.g., "2012-", "2012-0", "2012-01-3").
+ * @param granularity - The level of detail required ('month' or 'day').
+ * @returns a properly formatted date string or empty string, if invalid.
+ */
+export declare function normalizeIsoDateString(dateString: string, granularity: CalendarProps.Granularity): string;
 //# sourceMappingURL=utils.d.ts.map

package/lib/internal/template/date-input/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/date-input/utils.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,uDAAuD,CAAC;AAajF,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,aAAa,EAAE,aAAa,CAAC;IAC/E,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,eAAO,MAAM,gBAAgB,6BAO1B,qBAAqB,KAAQ,QAM/B,CAAC"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/date-input/utils.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,uDAAuD,CAAC;AAcjF,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,aAAa,EAAE,aAAa,CAAC;IAC/E,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,eAAO,MAAM,gBAAgB,6BAO1B,qBAAqB,KAAQ,QAM/B,CAAC;AAEF;;;;;;GAMG;AACH,wBAAgB,sBAAsB,CAAC,UAAU,EAAE,MAAM,EAAE,WAAW,EAAE,aAAa,CAAC,WAAW,GAAG,MAAM,CAgBzG"}

package/lib/internal/template/date-input/utils.js

@@ -2,24 +2,49 @@
 // SPDX-License-Identifier: Apache-2.0
 import { getDaysInMonth } from 'date-fns';
 import { displayToIso, parseDate } from '../internal/utils/date-time';
-function daysMax(value) {
-    // force to first day in month, as new Date('2018-02-30') -> March 2nd 2018
+const yearMask = { min: 0, max: 9999, default: 2000, length: 4 };
+const monthMask = { min: 1, max: 12, length: 2 };
+const dayMask = { min: 1, max: getMaxDaysForDate, length: 2 };
+function getMaxDaysForDate(value) {
+    // Forcing to first day in month to ensure the correct month is used in case the date is incorrect.
+    // For example, the date '2018-02-30' is parsed as '2018-03-02' (because there is only 28 days in February 2018).
     const baseDate = displayToIso(value).substring(0, 7);
     return getDaysInMonth(parseDate(baseDate));
 }
-const yearMask = { min: 0, max: 9999, default: 2000, length: 4 };
-const monthMask = { min: 1, max: 12, length: 2 };
-const dayMask = { min: 1, max: daysMax, length: 2 };
 export const generateMaskArgs = ({ granularity = 'day', 
 /**
  * There are only two options, 'iso' and 'slashed' which is our current default format. If more formats are entered
- * we should take the formatting type rather than teh boolean when we make an update
+ * we should take the formatting type rather than the boolean when we make an update.
  */
 isIso = false, } = {}) => {
     return {
         separator: isIso ? '-' : '/',
-        inputSeparators: [...(isIso ? ['/'] : ['-']), '.', ' '],
+        inputSeparators: isIso ? ['/', '.', ' '] : ['-', '.', ' '],
         segments: granularity === 'month' ? [yearMask, monthMask] : [yearMask, monthMask, dayMask],
     };
 };
+/**
+ * Normalizes a partial ISO date string by trimming incomplete segments.
+ *
+ * @param dateString - The date string to normalize (e.g., "2012-", "2012-0", "2012-01-3").
+ * @param granularity - The level of detail required ('month' or 'day').
+ * @returns a properly formatted date string or empty string, if invalid.
+ */
+export function normalizeIsoDateString(dateString, granularity) {
+    if (!dateString) {
+        return '';
+    }
+    const match = dateString.match(/^(\d{4})(?:-(\d{1,2})?)?(?:-(\d{1,2})?)?$/);
+    if (!match) {
+        return '';
+    }
+    const [, year, month, day] = match;
+    if (granularity === 'day' && (month === null || month === void 0 ? void 0 : month.length) === 2 && (day === null || day === void 0 ? void 0 : day.length) === 2) {
+        return `${year}-${month}-${day}`;
+    }
+    if ((month === null || month === void 0 ? void 0 : month.length) === 2) {
+        return `${year}-${month}`;
+    }
+    return year;
+}
 //# sourceMappingURL=utils.js.map

package/lib/internal/template/date-input/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/date-input/utils.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAI1C,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAEtE,SAAS,OAAO,CAAC,KAAa;IAC5B,2EAA2E;IAC3E,MAAM,QAAQ,GAAG,YAAY,CAAC,KAAK,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IACrD,OAAO,cAAc,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC;AAC7C,CAAC;AAED,MAAM,QAAQ,GAAG,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC;AACjE,MAAM,SAAS,GAAG,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC;AACjD,MAAM,OAAO,GAAG,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC;AAMpD,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,EAC/B,WAAW,GAAG,KAAK;AACnB;;;GAGG;AACH,KAAK,GAAG,KAAK,MACY,EAAE,EAAY,EAAE;IACzC,OAAO;QACL,SAAS,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG;QAC5B,eAAe,EAAE,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,EAAE,GAAG,CAAC;QACvD,QAAQ,EAAE,WAAW,KAAK,OAAO,CAAC,CAAC,CAAC,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,EAAE,SAAS,EAAE,OAAO,CAAC;KAC3F,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { getDaysInMonth } from 'date-fns';\n\nimport { CalendarProps } from '../calendar/interfaces';\nimport { MaskArgs } from '../internal/components/masked-input/utils/mask-format';\nimport { displayToIso, parseDate } from '../internal/utils/date-time';\n\nfunction daysMax(value: string): number {\n  // force to first day in month, as new Date('2018-02-30') -> March 2nd 2018\n  const baseDate = displayToIso(value).substring(0, 7);\n  return getDaysInMonth(parseDate(baseDate));\n}\n\nconst yearMask = { min: 0, max: 9999, default: 2000, length: 4 };\nconst monthMask = { min: 1, max: 12, length: 2 };\nconst dayMask = { min: 1, max: daysMax, length: 2 };\n\nexport interface GenerateMaskArgsProps extends Pick<CalendarProps, 'granularity'> {\n  isIso?: boolean;\n}\n\nexport const generateMaskArgs = ({\n  granularity = 'day',\n  /**\n   * There are only two options, 'iso' and 'slashed' which is our current default format. If more formats are entered\n   * we should take the formatting type rather than teh boolean when we make an update\n   */\n  isIso = false,\n}: GenerateMaskArgsProps = {}): MaskArgs => {\n  return {\n    separator: isIso ? '-' : '/',\n    inputSeparators: [...(isIso ? ['/'] : ['-']), '.', ' '],\n    segments: granularity === 'month' ? [yearMask, monthMask] : [yearMask, monthMask, dayMask],\n  };\n};\n"]}
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/date-input/utils.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAI1C,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAEtE,MAAM,QAAQ,GAAG,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC;AACjE,MAAM,SAAS,GAAG,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC;AACjD,MAAM,OAAO,GAAG,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,iBAAiB,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC;AAE9D,SAAS,iBAAiB,CAAC,KAAa;IACtC,mGAAmG;IACnG,iHAAiH;IACjH,MAAM,QAAQ,GAAG,YAAY,CAAC,KAAK,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IACrD,OAAO,cAAc,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC;AAC7C,CAAC;AAMD,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,EAC/B,WAAW,GAAG,KAAK;AACnB;;;GAGG;AACH,KAAK,GAAG,KAAK,MACY,EAAE,EAAY,EAAE;IACzC,OAAO;QACL,SAAS,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG;QAC5B,eAAe,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC;QAC1D,QAAQ,EAAE,WAAW,KAAK,OAAO,CAAC,CAAC,CAAC,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,EAAE,SAAS,EAAE,OAAO,CAAC;KAC3F,CAAC;AACJ,CAAC,CAAC;AAEF;;;;;;GAMG;AACH,MAAM,UAAU,sBAAsB,CAAC,UAAkB,EAAE,WAAsC;IAC/F,IAAI,CAAC,UAAU,EAAE;QACf,OAAO,EAAE,CAAC;KACX;IACD,MAAM,KAAK,GAAG,UAAU,CAAC,KAAK,CAAC,2CAA2C,CAAC,CAAC;IAC5E,IAAI,CAAC,KAAK,EAAE;QACV,OAAO,EAAE,CAAC;KACX;IACD,MAAM,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,CAAC,GAAG,KAAK,CAAC;IACnC,IAAI,WAAW,KAAK,KAAK,IAAI,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,MAAK,CAAC,IAAI,CAAA,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,MAAM,MAAK,CAAC,EAAE;QACrE,OAAO,GAAG,IAAI,IAAI,KAAK,IAAI,GAAG,EAAE,CAAC;KAClC;IACD,IAAI,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,MAAK,CAAC,EAAE;QACvB,OAAO,GAAG,IAAI,IAAI,KAAK,EAAE,CAAC;KAC3B;IACD,OAAO,IAAI,CAAC;AACd,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { getDaysInMonth } from 'date-fns';\n\nimport { CalendarProps } from '../calendar/interfaces';\nimport { MaskArgs } from '../internal/components/masked-input/utils/mask-format';\nimport { displayToIso, parseDate } from '../internal/utils/date-time';\n\nconst yearMask = { min: 0, max: 9999, default: 2000, length: 4 };\nconst monthMask = { min: 1, max: 12, length: 2 };\nconst dayMask = { min: 1, max: getMaxDaysForDate, length: 2 };\n\nfunction getMaxDaysForDate(value: string): number {\n  // Forcing to first day in month to ensure the correct month is used in case the date is incorrect.\n  // For example, the date '2018-02-30' is parsed as '2018-03-02' (because there is only 28 days in February 2018).\n  const baseDate = displayToIso(value).substring(0, 7);\n  return getDaysInMonth(parseDate(baseDate));\n}\n\nexport interface GenerateMaskArgsProps extends Pick<CalendarProps, 'granularity'> {\n  isIso?: boolean;\n}\n\nexport const generateMaskArgs = ({\n  granularity = 'day',\n  /**\n   * There are only two options, 'iso' and 'slashed' which is our current default format. If more formats are entered\n   * we should take the formatting type rather than the boolean when we make an update.\n   */\n  isIso = false,\n}: GenerateMaskArgsProps = {}): MaskArgs => {\n  return {\n    separator: isIso ? '-' : '/',\n    inputSeparators: isIso ? ['/', '.', ' '] : ['-', '.', ' '],\n    segments: granularity === 'month' ? [yearMask, monthMask] : [yearMask, monthMask, dayMask],\n  };\n};\n\n/**\n * Normalizes a partial ISO date string by trimming incomplete segments.\n *\n * @param dateString - The date string to normalize (e.g., \"2012-\", \"2012-0\", \"2012-01-3\").\n * @param granularity - The level of detail required ('month' or 'day').\n * @returns a properly formatted date string or empty string, if invalid.\n */\nexport function normalizeIsoDateString(dateString: string, granularity: CalendarProps.Granularity): string {\n  if (!dateString) {\n    return '';\n  }\n  const match = dateString.match(/^(\\d{4})(?:-(\\d{1,2})?)?(?:-(\\d{1,2})?)?$/);\n  if (!match) {\n    return '';\n  }\n  const [, year, month, day] = match;\n  if (granularity === 'day' && month?.length === 2 && day?.length === 2) {\n    return `${year}-${month}-${day}`;\n  }\n  if (month?.length === 2) {\n    return `${year}-${month}`;\n  }\n  return year;\n}\n"]}

package/lib/internal/template/help-panel/styles.css.js

@@ -1,11 +1,11 @@
 
     import './styles.scoped.css';
     export default {
-  "help-panel": "awsui_help-panel_1d237_74hml_181",
-  "loading": "awsui_loading_1d237_74hml_348",
-  "header": "awsui_header_1d237_74hml_353",
-  "with-toolbar": "awsui_with-toolbar_1d237_74hml_371",
-  "content": "awsui_content_1d237_74hml_390",
-  "footer": "awsui_footer_1d237_74hml_441"
+  "help-panel": "awsui_help-panel_1d237_aqguo_181",
+  "loading": "awsui_loading_1d237_aqguo_348",
+  "header": "awsui_header_1d237_aqguo_353",
+  "with-toolbar": "awsui_with-toolbar_1d237_aqguo_371",
+  "content": "awsui_content_1d237_aqguo_390",
+  "footer": "awsui_footer_1d237_aqguo_441"
 };