@ukic/canary-web-components 3.0.0-canary.26 → 3.0.0-canary.28

package/dist/collection/components/ic-date-input/ic-date-input.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-date-input.stories.js","sourceRoot":"","sources":["../../../src/components/ic-date-input/ic-date-input.stories.js"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\nimport { html } from \"lit-html\";\nimport readme from \"./readme.md\";\nimport { createDateInputForm } from \"./story-data\";\n\nexport default {\n  title: \"Web Components/Date Input\",\n  component: \"ic-date-input\",\n  parameters: {\n    componentAPI: {\n      data: readme,\n    },\n  },\n};\n\n/**\n * Use the date input component to manually type in a date in different formats.\n *\n * The input `label` is the only required attribute for date input.\n *\n * Click the 'Component API' tab to view all the available attributes, events and slots for date input.\n *\n * To use the date input component, import `@ukic/canary-web-components` into your application.\n *\n * Each example below demonstrates the date input in three different date formats:\n * - DD/MM/YYYY (Default date format)\n * - MM/DD/YYYY\n * - YYYY/MM/DD\n *\n * Dates can be added by manually typing into the input or using the up and down arrow keys.\n *\n * To move between day, month and year using the keyboard, provide the required values based on the placeholders or use `/` or `-`.\n *\n * By default, the helper text displays the date format.\n */\nexport const Default = {\n  render: () => html`<ic-date-input\n      label=\"When would you like to collect your coffee?\"\n    ></ic-date-input>\n    <script>\n      var dateInput = document.querySelector(\"ic-date-input\");\n      {\n        dateInput.addEventListener(\"icChange\", function (event) {\n          console.log(\"icChange\", event.detail.value);\n        });\n      }\n    </script>\n    <br />\n    <br />\n    <ic-date-input\n      label=\"When would you like to collect your coffee?\"\n      date-format=\"MM/DD/YYYY\"\n    ></ic-date-input>\n    <br />\n    <br />\n    <ic-date-input\n      label=\"When would you like to collect your coffee?\"\n      date-format=\"YYYY/MM/DD\"\n    ></ic-date-input>`,\n  name: \"Default\",\n};\n\n/**\n * Retrieving the date input value via `icChange` returns the date as a Date object.\n *\n * The event returns the Date object once day, month and year have been entered.\n */\nexport const IcChangeEvent = {\n  render: () => html`<ic-date-input\n      label=\"When would you like to collect your coffee?\"\n    ></ic-date-input>\n    <script>\n      var dateInput = document.querySelector(\"ic-date-input\");\n      dateInput.addEventListener(\"icChange\", function (event) {\n        console.log(event.detail.value, event.detail.utcValue);\n      });\n    </script>`,\n  name: \"icChange event\",\n};\n\n/**\n * To set a value to the date input, pass the date value in the relevant date format.\n */\nexport const WithValue = {\n  render: () => html`<ic-date-input\n    id=\"date-input-default-date-with-value\"\n    label=\"When would you like to collect your coffee?\"\n    date-format=\"DD/MM/YYYY\"\n    value=\"21/01/2001\"\n  ></ic-date-input>`,\n  name: \"With value\",\n};\n\n/**\n * The date input also accepts a number of different date formats within the value attribute:\n * - Date object\n * - [Zulu datetime](#zulu-datetime)\n * - [With hyphens (DD-MM-YYYY)](#with-hyphens)\n * - [Epoch time](#epoch-time)\n */\nexport const DateObject = {\n  render: () => html`<ic-date-input\n      id=\"date-input-default-date-date\"\n      label=\"When would you like to collect your coffee?\"\n    ></ic-date-input>\n    <script>\n      var dateInputDate = document.querySelector(\n        \"#date-input-default-date-date\"\n      );\n      dateInputDate.value = new Date(\"28 November 2021\");\n    </script>`,\n  name: \"Date object\",\n};\n\nexport const ZuluDatetime = {\n  render: () => html`<div>\n      <ic-date-input\n        id=\"date-input-default-zulu-date\"\n        label=\"When would you like to collect your coffee?\"\n      ></ic-date-input>\n    </div>\n    <script>\n      var dateInputDate = document.querySelector(\n        \"#date-input-default-zulu-date\"\n      );\n      dateInputDate.value = new Date(\"1 May 1990\").toISOString();\n    </script>`,\n  name: \"Zulu datetime\",\n};\n\nexport const WithHyphens = {\n  render: () => html`<ic-date-input\n      id=\"date-input-default-date-string\"\n      label=\"When would you like to collect your coffee?\"\n    ></ic-date-input>\n    <script>\n      var dateInputString = document.querySelector(\n        \"#date-input-default-date-string\"\n      );\n      dateInputString.value = \"25-05-2005\";\n    </script>`,\n  name: \"With hyphens\",\n};\n\nexport const EpochTime = {\n  render: () => html`<ic-date-input\n      id=\"date-input-default-date-epoch\"\n      label=\"When would you like to collect your coffee?\"\n    ></ic-date-input>\n    <script>\n      var dateInputString = document.querySelector(\n        \"#date-input-default-date-epoch\"\n      );\n      dateInputString.value = Date.now();\n    </script>`,\n  name: \"Epoch time\",\n};\n\n/**\n * To set the date input as a required field, set the `required` attribute to `true`. This will add an asterisk at the end of the date input label.\n */\nexport const Required = {\n  render: () => html`<ic-date-input\n    label=\"When would you like to collect your coffee?\"\n    required=\"true\"\n  ></ic-date-input>`,\n  name: \"Required\",\n};\n\n/**\n * To hide the label, set the `hide-label` attribute to `true`. The required `label` will still be read out by screen readers.\n */\nexport const HideLabel = {\n  render: () => html`<ic-date-input\n    label=\"When would you like to collect your coffee?\"\n    hide-label=\"true\"\n  ></ic-date-input>`,\n  name: \"Hide label\",\n};\n\n/**\n * Set the `disabled` attribute to `true` to prevent interaction with the date input.\n */\nexport const Disabled = {\n  render: () => html`<ic-date-input\n    label=\"When would you like to collect your coffee?\"\n    disabled=\"true\"\n  ></ic-date-input>`,\n};\n\n/**\n * The date input is available in three different sizes:\n * - `small`\n * - `medium` (default)\n * - `large`\n */\nexport const Sizes = {\n  render: () => html`<ic-date-input\n      label=\"When would you like to collect your coffee?\"\n      size=\"small\"\n    ></ic-date-input>\n    <br />\n    <br />\n    <ic-date-input\n      label=\"When would you like to collect your coffee?\"\n    ></ic-date-input>\n    <br />\n    <br />\n    <ic-date-input\n      label=\"When would you like to collect your coffee?\"\n      size=\"large\"\n    ></ic-date-input>`,\n  name: \"Sizes\",\n};\n\n/**\n * Use the helper text to add additional detail for the date input. Display custom content using the `helper-text` slot.\n */\nexport const CustomHelperText = {\n  render: () => html`<ic-date-input\n      label=\"When would you like to collect your coffee?\"\n      helper-text=\"We will have your order ready for you on this date\"\n    ></ic-date-input>\n    <br />\n    <ic-date-input label=\"When would you like to collect your coffee?\"\n      ><ic-typography variant=\"caption\" slot=\"helper-text\">\n        <span>\n          For special requests,\n          <ic-link href=\"#\">contact us</ic-link> before choosing a date\n        </span>\n      </ic-typography></ic-date-input\n    >`,\n  name: \"Custom helper text\",\n};\n\nexport const HideHelperText = {\n  render: () => html`<ic-date-input\n    label=\"When would you like to collect your coffee?\"\n    helper-text=\"You cannot see me, but you can hear me\"\n    hide-helper-text=\"true\"\n  ></ic-date-input>`,\n  name: \"Hide helper text\",\n};\n\n/**\n * Validation on date input is set via `validation-status` and `validation-text`.\n *\n * `validation-status` will set the style of the validation message. `validation-status` accepts:\n * - `error`\n * - `warning`\n * - `success`\n *\n * `validation-status` is required for the `validation-text` to appear.\n */\nexport const Validation = {\n  render: () => html`<ic-date-input\n      label=\"When would you like to collect your coffee?\"\n      validation-status=\"error\"\n      validation-text=\"There is a coffee shortage forecast for that day. Please choose a different date.\"\n    ></ic-date-input>\n    <br />\n    <br />\n    <ic-date-input\n      label=\"When would you like to collect your coffee?\"\n      validation-status=\"warning\"\n      validation-text=\"Please be aware that there may be a coffee shortage on that day.\"\n    ></ic-date-input>\n    <br />\n    <br />\n    <ic-date-input\n      label=\"When would you like to collect your coffee?\"\n      validation-status=\"success\"\n      validation-text=\"Your coffee will be available for you to collect on this day.\"\n    ></ic-date-input>`,\n  name: \"Custom validation\",\n};\n\n/**\n * Validation can be set on the date input if a date in the past has been set by setting the `disable-past` attribute to `true`.\n *\n * Enter a date in the past to view the validation message.\n */\nexport const DisablePastDates = {\n  render: () => html`<ic-date-input\n    label=\"When would you like to collect your coffee?\"\n    disable-past=\"true\"\n  ></ic-date-input>`,\n  name: \"Disable past dates\",\n};\n\n/**\n * Validation can be set on the date input if a date in the future has been set by setting the `disable-future` attribute to `true`.\n *\n * Enter a date in the future to view the validation message.\n */\nexport const DisableFutureDates = {\n  render: () => html`<ic-date-input\n    label=\"When would you like to collect your coffee?\"\n    disable-future=\"true\"\n  ></ic-date-input>`,\n  name: \"Disable future dates\",\n};\n\n/**\n * It is possible to set a min and max date range. If a date is set and it is before the min or after the max date, a validation error will appear.\n *\n * The min or max dates accept the following date formats:\n * - [Date string](#with-value) (with slashes i.e. DD/MM/YYYY)\n * - [Date string with hyphens](#with-hyphens) (i.e. DD-MM-YYYY)\n * - [Date object](#date-object)\n * - [Zulu time](#zulu-datetime)\n *\n * Enter a date after 2nd Jan 2023 and before 20th July to view the validation message.\n *\n * In this code snippet, the min and max have been set using two different date formats to demonstrate its flexibility.\n */\nexport const MinMax = {\n  render: () => html`<ic-date-input\n    label=\"When would you like to collect your coffee?\"\n    min=\"02/01/2023\"\n    max=\"20-07-2023\"\n  ></ic-date-input>`,\n  name: \"Min and max\",\n};\n\n/**\n * When the date input component is used within a form, the date value is returned as an ISO string.\n *\n * The value is console logged to the browser dev tools.\n */\nexport const Form = {\n  render: () => createDateInputForm(),\n  name: \"Form\",\n};\n\n/**\n * The date input can be cleared by setting the the value attribute to one of the following:\n * - empty string\n * - `null`\n * - `undefined`\n */\nexport const WithClearingValue = {\n  render: () => html`<ic-date-input\n      id=\"date-input-clear-value\"\n      label=\"When would you like to collect your coffee?\"\n      date-format=\"DD/MM/YYYY\"\n      value=\"21/01/2001\"\n    ></ic-date-input>\n    <br />\n    <ic-button id=\"update\">Update date</ic-button>\n    <ic-button id=\"null-btn\">set null</ic-button>\n    <ic-button id=\"empty-btn\">set empty string</ic-button>\n    <ic-button id=\"undef-btn\">set undefined</ic-button>\n    <script>\n      var input = document.querySelector(\"#date-input-clear-value\");\n      var btn = document.querySelector(\"#update\");\n      btn.addEventListener(\"click\", () => {\n        input.value = new Date(\"05 May 2005\");\n      });\n      var btn2 = document.querySelector(\"#null-btn\");\n      btn2.addEventListener(\"click\", () => {\n        input.value = null;\n      });\n      var btn3 = document.querySelector(\"#empty-btn\");\n      btn3.addEventListener(\"click\", () => {\n        input.value = \"\";\n      });\n      var btn4 = document.querySelector(\"#undef-btn\");\n      btn4.addEventListener(\"click\", () => {\n        input.value = undefined;\n      });\n    </script>`,\n  name: \"With clearing value\",\n};\n\n/**\n * The `IcChange` event is emitted by the date input every time an input field is changed.\n */\nexport const IcChangeEmitDatePartChanges = {\n  render: () => html`<ic-date-input\n      emit-date-part-change=\"true\"\n      label=\"When would you like to collect your coffee?\"\n    ></ic-date-input>\n    <script>\n      var dateInput = document.querySelector(\"ic-date-input\");\n      {\n        dateInput.addEventListener(\"icChange\", function (event) {\n          console.log(\"icChange\", event.detail);\n        });\n      }\n    </script>`,\n  name: \"IcChange with emitDatePartChange\",\n};\n"]}
+{"version":3,"file":"ic-date-input.stories.js","sourceRoot":"","sources":["../../../../../src/components/ic-date-input/ic-date-input.stories.js"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\nimport { html } from \"lit-html\";\nimport readme from \"./readme.md\";\nimport { createDateInputForm } from \"./story-data\";\n\nexport default {\n  title: \"Web Components/Date Input\",\n  component: \"ic-date-input\",\n  parameters: {\n    componentAPI: {\n      data: readme,\n    },\n  },\n};\n\n/**\n * Use the date input component to manually type in a date in different formats.\n *\n * The input `label` is the only required attribute for date input.\n *\n * Click the 'Component API' tab to view all the available attributes, events and slots for date input.\n *\n * To use the date input component, import `@ukic/canary-web-components` into your application.\n *\n * Each example below demonstrates the date input in three different date formats:\n * - DD/MM/YYYY (Default date format)\n * - MM/DD/YYYY\n * - YYYY/MM/DD\n *\n * Dates can be added by manually typing into the input or using the up and down arrow keys.\n *\n * To move between day, month and year using the keyboard, provide the required values based on the placeholders or use `/` or `-`.\n *\n * By default, the helper text displays the date format.\n */\nexport const Default = {\n  render: () => html`<ic-date-input\n      label=\"When would you like to collect your coffee?\"\n    ></ic-date-input>\n    <script>\n      var dateInput = document.querySelector(\"ic-date-input\");\n      {\n        dateInput.addEventListener(\"icChange\", function (event) {\n          console.log(\"icChange\", event.detail.value);\n        });\n      }\n    </script>\n    <br />\n    <br />\n    <ic-date-input\n      label=\"When would you like to collect your coffee?\"\n      date-format=\"MM/DD/YYYY\"\n    ></ic-date-input>\n    <br />\n    <br />\n    <ic-date-input\n      label=\"When would you like to collect your coffee?\"\n      date-format=\"YYYY/MM/DD\"\n    ></ic-date-input>`,\n  name: \"Default\",\n};\n\n/**\n * Retrieving the date input value via `icChange` returns the date as a Date object.\n *\n * The event returns the Date object once day, month and year have been entered.\n */\nexport const IcChangeEvent = {\n  render: () => html`<ic-date-input\n      label=\"When would you like to collect your coffee?\"\n    ></ic-date-input>\n    <script>\n      var dateInput = document.querySelector(\"ic-date-input\");\n      dateInput.addEventListener(\"icChange\", function (event) {\n        console.log(event.detail.value, event.detail.utcValue);\n      });\n    </script>`,\n  name: \"icChange event\",\n};\n\n/**\n * To set a value to the date input, pass the date value in the relevant date format.\n */\nexport const WithValue = {\n  render: () => html`<ic-date-input\n    id=\"date-input-default-date-with-value\"\n    label=\"When would you like to collect your coffee?\"\n    date-format=\"DD/MM/YYYY\"\n    value=\"21/01/2001\"\n  ></ic-date-input>`,\n  name: \"With value\",\n};\n\n/**\n * The date input also accepts a number of different date formats within the value attribute:\n * - Date object\n * - [Zulu datetime](#zulu-datetime)\n * - [With hyphens (DD-MM-YYYY)](#with-hyphens)\n * - [Epoch time](#epoch-time)\n */\nexport const DateObject = {\n  render: () => html`<ic-date-input\n      id=\"date-input-default-date-date\"\n      label=\"When would you like to collect your coffee?\"\n    ></ic-date-input>\n    <script>\n      var dateInputDate = document.querySelector(\n        \"#date-input-default-date-date\"\n      );\n      dateInputDate.value = new Date(\"28 November 2021\");\n    </script>`,\n  name: \"Date object\",\n};\n\nexport const ZuluDatetime = {\n  render: () => html`<div>\n      <ic-date-input\n        id=\"date-input-default-zulu-date\"\n        label=\"When would you like to collect your coffee?\"\n      ></ic-date-input>\n    </div>\n    <script>\n      var dateInputDate = document.querySelector(\n        \"#date-input-default-zulu-date\"\n      );\n      dateInputDate.value = new Date(\"1 May 1990\").toISOString();\n    </script>`,\n  name: \"Zulu datetime\",\n};\n\nexport const WithHyphens = {\n  render: () => html`<ic-date-input\n      id=\"date-input-default-date-string\"\n      label=\"When would you like to collect your coffee?\"\n    ></ic-date-input>\n    <script>\n      var dateInputString = document.querySelector(\n        \"#date-input-default-date-string\"\n      );\n      dateInputString.value = \"25-05-2005\";\n    </script>`,\n  name: \"With hyphens\",\n};\n\nexport const EpochTime = {\n  render: () => html`<ic-date-input\n      id=\"date-input-default-date-epoch\"\n      label=\"When would you like to collect your coffee?\"\n    ></ic-date-input>\n    <script>\n      var dateInputString = document.querySelector(\n        \"#date-input-default-date-epoch\"\n      );\n      dateInputString.value = Date.now();\n    </script>`,\n  name: \"Epoch time\",\n};\n\n/**\n * To set the date input as a required field, set the `required` attribute to `true`. This will add an asterisk at the end of the date input label.\n */\nexport const Required = {\n  render: () => html`<ic-date-input\n    label=\"When would you like to collect your coffee?\"\n    required=\"true\"\n  ></ic-date-input>`,\n  name: \"Required\",\n};\n\n/**\n * To hide the label, set the `hide-label` attribute to `true`. The required `label` will still be read out by screen readers.\n */\nexport const HideLabel = {\n  render: () => html`<ic-date-input\n    label=\"When would you like to collect your coffee?\"\n    hide-label=\"true\"\n  ></ic-date-input>`,\n  name: \"Hide label\",\n};\n\n/**\n * Set the `disabled` attribute to `true` to prevent interaction with the date input.\n */\nexport const Disabled = {\n  render: () => html`<ic-date-input\n    label=\"When would you like to collect your coffee?\"\n    disabled=\"true\"\n  ></ic-date-input>`,\n};\n\n/**\n * The date input is available in three different sizes:\n * - `small`\n * - `medium` (default)\n * - `large`\n */\nexport const Sizes = {\n  render: () => html`<ic-date-input\n      label=\"When would you like to collect your coffee?\"\n      size=\"small\"\n    ></ic-date-input>\n    <br />\n    <br />\n    <ic-date-input\n      label=\"When would you like to collect your coffee?\"\n    ></ic-date-input>\n    <br />\n    <br />\n    <ic-date-input\n      label=\"When would you like to collect your coffee?\"\n      size=\"large\"\n    ></ic-date-input>`,\n  name: \"Sizes\",\n};\n\n/**\n * Use the helper text to add additional detail for the date input. Display custom content using the `helper-text` slot.\n */\nexport const CustomHelperText = {\n  render: () => html`<ic-date-input\n      label=\"When would you like to collect your coffee?\"\n      helper-text=\"We will have your order ready for you on this date\"\n    ></ic-date-input>\n    <br />\n    <ic-date-input label=\"When would you like to collect your coffee?\"\n      ><ic-typography variant=\"caption\" slot=\"helper-text\">\n        <span>\n          For special requests,\n          <ic-link href=\"#\">contact us</ic-link> before choosing a date\n        </span>\n      </ic-typography></ic-date-input\n    >`,\n  name: \"Custom helper text\",\n};\n\nexport const HideHelperText = {\n  render: () => html`<ic-date-input\n    label=\"When would you like to collect your coffee?\"\n    helper-text=\"You cannot see me, but you can hear me\"\n    hide-helper-text=\"true\"\n  ></ic-date-input>`,\n  name: \"Hide helper text\",\n};\n\n/**\n * Validation on date input is set via `validation-status` and `validation-text`.\n *\n * `validation-status` will set the style of the validation message. `validation-status` accepts:\n * - `error`\n * - `warning`\n * - `success`\n *\n * `validation-status` is required for the `validation-text` to appear.\n */\nexport const Validation = {\n  render: () => html`<ic-date-input\n      label=\"When would you like to collect your coffee?\"\n      validation-status=\"error\"\n      validation-text=\"There is a coffee shortage forecast for that day. Please choose a different date.\"\n    ></ic-date-input>\n    <br />\n    <br />\n    <ic-date-input\n      label=\"When would you like to collect your coffee?\"\n      validation-status=\"warning\"\n      validation-text=\"Please be aware that there may be a coffee shortage on that day.\"\n    ></ic-date-input>\n    <br />\n    <br />\n    <ic-date-input\n      label=\"When would you like to collect your coffee?\"\n      validation-status=\"success\"\n      validation-text=\"Your coffee will be available for you to collect on this day.\"\n    ></ic-date-input>`,\n  name: \"Custom validation\",\n};\n\nexport const AriaLiveBehaviour = {\n  render: (args) =>\n    html`<ic-date-input\n        id=\"field-1\"\n        label=\"When would you like to collect your coffee?\"\n        helper-text=\"Error already set on page load and aria-live overridden as 'assertive'\"\n        validation-status=\"error\"\n        validation-text=\"First error message\"\n        validation-aria-live=\"assertive\"\n      ></ic-date-input>\n      <br />\n      <ic-date-input\n        id=\"field-2\"\n        label=\"When would you like to collect your coffee?\"\n        helper-text=\"Error set after page load and aria-live overridden as 'assertive'\"\n        validation-aria-live=\"assertive\"\n      ></ic-date-input>\n      <br />\n      <ic-button id=\"toggle-btn-1\">Toggle errors</ic-button>\n      <script>\n        let showErrors1 = false;\n        const btn1 = document.getElementById(\"toggle-btn-1\");\n        const field1 = document.getElementById(\"field-1\");\n        const field2 = document.getElementById(\"field-2\");\n\n        btn1.addEventListener(\"click\", () => {\n          showErrors1 = !showErrors1;\n\n          field1.setAttribute(\"validation-status\", showErrors1 ? \"\" : \"error\");\n          field1.setAttribute(\n            \"validation-text\",\n            showErrors1 ? \"\" : \"First error message\"\n          );\n\n          field2.setAttribute(\"validation-status\", showErrors1 ? \"error\" : \"\");\n          field2.setAttribute(\n            \"validation-text\",\n            showErrors1 ? \"Second error message\" : \"\"\n          );\n        });\n      </script>\n      <br />\n      <br />\n      <br />\n      <br />\n      <ic-date-input\n        id=\"field-3\"\n        label=\"When would you like to collect your coffee?\"\n        helper-text=\"Default aria-live behaviour (i.e. 'polite')\"\n      ></ic-date-input>\n      <br />\n      <ic-date-input\n        id=\"field-4\"\n        label=\"When would you like to collect your coffee?\"\n        helper-text=\"Default aria-live behaviour (i.e. 'polite')\"\n      ></ic-date-input>\n      <br />\n      <ic-button id=\"toggle-btn-2\">Toggle errors</ic-button>\n      <script>\n        let showErrors2 = false;\n        const btn2 = document.getElementById(\"toggle-btn-2\");\n        const field3 = document.getElementById(\"field-3\");\n        const field4 = document.getElementById(\"field-4\");\n\n        btn2.addEventListener(\"click\", () => {\n          showErrors2 = !showErrors2;\n\n          field3.setAttribute(\"validation-status\", showErrors2 ? \"error\" : \"\");\n          field3.setAttribute(\n            \"validation-text\",\n            showErrors2 ? \"Third error message\" : \"\"\n          );\n\n          field4.setAttribute(\"validation-status\", showErrors2 ? \"error\" : \"\");\n          field4.setAttribute(\n            \"validation-text\",\n            showErrors2 ? \"Fourth error message\" : \"\"\n          );\n        });\n      </script>`,\n\n  name: \"Aria-live behaviour\",\n};\n\n/**\n * Validation can be set on the date input if a date in the past has been set by setting the `disable-past` attribute to `true`.\n *\n * Enter a date in the past to view the validation message.\n */\nexport const DisablePastDates = {\n  render: () => html`<ic-date-input\n    label=\"When would you like to collect your coffee?\"\n    disable-past=\"true\"\n  ></ic-date-input>`,\n  name: \"Disable past dates\",\n};\n\n/**\n * Validation can be set on the date input if a date in the future has been set by setting the `disable-future` attribute to `true`.\n *\n * Enter a date in the future to view the validation message.\n */\nexport const DisableFutureDates = {\n  render: () => html`<ic-date-input\n    label=\"When would you like to collect your coffee?\"\n    disable-future=\"true\"\n  ></ic-date-input>`,\n  name: \"Disable future dates\",\n};\n\n/**\n * It is possible to set a min and max date range. If a date is set and it is before the min or after the max date, a validation error will appear.\n *\n * The min or max dates accept the following date formats:\n * - [Date string](#with-value) (with slashes i.e. DD/MM/YYYY)\n * - [Date string with hyphens](#with-hyphens) (i.e. DD-MM-YYYY)\n * - [Date object](#date-object)\n * - [Zulu time](#zulu-datetime)\n *\n * Enter a date after 2nd Jan 2023 and before 20th July to view the validation message.\n *\n * In this code snippet, the min and max have been set using two different date formats to demonstrate its flexibility.\n */\nexport const MinMax = {\n  render: () => html`<ic-date-input\n    label=\"When would you like to collect your coffee?\"\n    min=\"02/01/2023\"\n    max=\"20-07-2023\"\n  ></ic-date-input>`,\n  name: \"Min and max\",\n};\n\n/**\n * When the date input component is used within a form, the date value is returned as an ISO string.\n *\n * The value is console logged to the browser dev tools.\n */\nexport const Form = {\n  render: () => createDateInputForm(),\n  name: \"Form\",\n};\n\n/**\n * The date input can be cleared by setting the the value attribute to one of the following:\n * - empty string\n * - `null`\n * - `undefined`\n */\nexport const WithClearingValue = {\n  render: () => html`<ic-date-input\n      id=\"date-input-clear-value\"\n      label=\"When would you like to collect your coffee?\"\n      date-format=\"DD/MM/YYYY\"\n      value=\"21/01/2001\"\n    ></ic-date-input>\n    <br />\n    <ic-button id=\"update\">Update date</ic-button>\n    <ic-button id=\"null-btn\">set null</ic-button>\n    <ic-button id=\"empty-btn\">set empty string</ic-button>\n    <ic-button id=\"undef-btn\">set undefined</ic-button>\n    <script>\n      var input = document.querySelector(\"#date-input-clear-value\");\n      var btn = document.querySelector(\"#update\");\n      btn.addEventListener(\"click\", () => {\n        input.value = new Date(\"05 May 2005\");\n      });\n      var btn2 = document.querySelector(\"#null-btn\");\n      btn2.addEventListener(\"click\", () => {\n        input.value = null;\n      });\n      var btn3 = document.querySelector(\"#empty-btn\");\n      btn3.addEventListener(\"click\", () => {\n        input.value = \"\";\n      });\n      var btn4 = document.querySelector(\"#undef-btn\");\n      btn4.addEventListener(\"click\", () => {\n        input.value = undefined;\n      });\n    </script>`,\n  name: \"With clearing value\",\n};\n\n/**\n * The `IcChange` event is emitted by the date input every time an input field is changed.\n */\nexport const IcChangeEmitDatePartChanges = {\n  render: () => html`<ic-date-input\n      emit-date-part-change=\"true\"\n      label=\"When would you like to collect your coffee?\"\n    ></ic-date-input>\n    <script>\n      var dateInput = document.querySelector(\"ic-date-input\");\n      {\n        dateInput.addEventListener(\"icChange\", function (event) {\n          console.log(\"icChange\", event.detail);\n        });\n      }\n    </script>`,\n  name: \"IcChange with emitDatePartChange\",\n};\n"]}

package/dist/collection/components/ic-date-input/story-data.js.map

@@ -1 +1 @@
-{"version":3,"file":"story-data.js","sourceRoot":"","sources":["../../../src/components/ic-date-input/story-data.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAoB,EAAE;IACvD,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IAC5C,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;IAC1D,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;IACtD,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;IACrD,MAAM,WAAW,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAElD,WAAW,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;IACnC,WAAW,CAAC,KAAK,CAAC,GAAG,GAAG,oBAAoB,CAAC;IAC7C,WAAW,CAAC,KAAK,CAAC,SAAS,GAAG,oBAAoB,CAAC;IAEnD,SAAS,CAAC,IAAI,GAAG,QAAQ,CAAC;IAC1B,SAAS,CAAC,WAAW,GAAG,QAAQ,CAAC;IACjC,QAAQ,CAAC,IAAI,GAAG,OAAO,CAAC;IACxB,QAAQ,CAAC,WAAW,GAAG,OAAO,CAAC;IAE/B,IAAI,CAAC,EAAE,GAAG,iBAAiB,CAAC;IAE5B,SAAS,CAAC,KAAK,GAAG,YAAY,CAAC;IAC/B,SAAS,CAAC,KAAK,GAAG,6CAA6C,CAAC;IAEhE,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;IAC5B,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC;IAE9B,WAAW,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;IACnC,WAAW,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;IAElC,IAAI,CAAC,gBAAgB,CAAC,QAAQ,EAAE,CAAC,EAAE,EAAE,EAAE;;QACrC,EAAE,CAAC,cAAc,EAAE,CAAC;QACpB,OAAO,CAAC,GAAG,CACT,MACE,SAAS,CAAC,aAAa,CACrB,+BAA+B,CAElC,0CAAE,KAAK,CACT,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,OAAO,IAAI,CAAC;AACd,CAAC,CAAC","sourcesContent":["export const createDateInputForm = (): HTMLFormElement => {\n  const form = document.createElement(\"form\");\n  const dateInput = document.createElement(\"ic-date-input\");\n  const submitBtn = document.createElement(\"ic-button\");\n  const resetBtn = document.createElement(\"ic-button\");\n  const formActions = document.createElement(\"div\");\n\n  formActions.style.display = \"flex\";\n  formActions.style.gap = \"var(--ic-space-xs)\";\n  formActions.style.marginTop = \"var(--ic-space-xs)\";\n\n  submitBtn.type = \"submit\";\n  submitBtn.textContent = \"Submit\";\n  resetBtn.type = \"reset\";\n  resetBtn.textContent = \"Reset\";\n\n  form.id = \"date-input-form\";\n\n  dateInput.value = \"13/03/1951\";\n  dateInput.label = \"When would you like to collect your coffee?\";\n\n  form.appendChild(dateInput);\n  form.appendChild(formActions);\n\n  formActions.appendChild(submitBtn);\n  formActions.appendChild(resetBtn);\n\n  form.addEventListener(\"submit\", (ev) => {\n    ev.preventDefault();\n    console.log(\n      (\n        dateInput.querySelector(\n          'input[name^=\"ic-date-input-\"]'\n        ) as HTMLInputElement\n      )?.value\n    );\n  });\n\n  return form;\n};\n"]}
+{"version":3,"file":"story-data.js","sourceRoot":"","sources":["../../../../../src/components/ic-date-input/story-data.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAoB,EAAE;IACvD,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IAC5C,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;IAC1D,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;IACtD,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;IACrD,MAAM,WAAW,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAElD,WAAW,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;IACnC,WAAW,CAAC,KAAK,CAAC,GAAG,GAAG,oBAAoB,CAAC;IAC7C,WAAW,CAAC,KAAK,CAAC,SAAS,GAAG,oBAAoB,CAAC;IAEnD,SAAS,CAAC,IAAI,GAAG,QAAQ,CAAC;IAC1B,SAAS,CAAC,WAAW,GAAG,QAAQ,CAAC;IACjC,QAAQ,CAAC,IAAI,GAAG,OAAO,CAAC;IACxB,QAAQ,CAAC,WAAW,GAAG,OAAO,CAAC;IAE/B,IAAI,CAAC,EAAE,GAAG,iBAAiB,CAAC;IAE5B,SAAS,CAAC,KAAK,GAAG,YAAY,CAAC;IAC/B,SAAS,CAAC,KAAK,GAAG,6CAA6C,CAAC;IAEhE,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;IAC5B,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC;IAE9B,WAAW,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;IACnC,WAAW,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;IAElC,IAAI,CAAC,gBAAgB,CAAC,QAAQ,EAAE,CAAC,EAAE,EAAE,EAAE;;QACrC,EAAE,CAAC,cAAc,EAAE,CAAC;QACpB,OAAO,CAAC,GAAG,CACT,MACE,SAAS,CAAC,aAAa,CACrB,+BAA+B,CAElC,0CAAE,KAAK,CACT,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,OAAO,IAAI,CAAC;AACd,CAAC,CAAC","sourcesContent":["export const createDateInputForm = (): HTMLFormElement => {\n  const form = document.createElement(\"form\");\n  const dateInput = document.createElement(\"ic-date-input\");\n  const submitBtn = document.createElement(\"ic-button\");\n  const resetBtn = document.createElement(\"ic-button\");\n  const formActions = document.createElement(\"div\");\n\n  formActions.style.display = \"flex\";\n  formActions.style.gap = \"var(--ic-space-xs)\";\n  formActions.style.marginTop = \"var(--ic-space-xs)\";\n\n  submitBtn.type = \"submit\";\n  submitBtn.textContent = \"Submit\";\n  resetBtn.type = \"reset\";\n  resetBtn.textContent = \"Reset\";\n\n  form.id = \"date-input-form\";\n\n  dateInput.value = \"13/03/1951\";\n  dateInput.label = \"When would you like to collect your coffee?\";\n\n  form.appendChild(dateInput);\n  form.appendChild(formActions);\n\n  formActions.appendChild(submitBtn);\n  formActions.appendChild(resetBtn);\n\n  form.addEventListener(\"submit\", (ev) => {\n    ev.preventDefault();\n    console.log(\n      (\n        dateInput.querySelector(\n          'input[name^=\"ic-date-input-\"]'\n        ) as HTMLInputElement\n      )?.value\n    );\n  });\n\n  return form;\n};\n"]}

package/dist/collection/components/ic-date-input/test/helpers/ic-date-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-date-input.js","sourceRoot":"","sources":["../../../../../src/components/ic-date-input/test/helpers/ic-date-input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAC9D,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAChD,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAClC,OAAO,EAAE,YAAY,EAAE,MAAM,qDAAqD,CAAC;AAsBnF,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,MAAM,GAAG,YAAY,EAAqB,EAAE,CAC1E,WAAW,CAAC;IACV,UAAU,EAAE,CAAC,SAAS,EAAE,YAAY,CAAC;IACrC,QAAQ,EAAE,GAAG,EAAE,CAAC,CACd,qBAAe,KAAK,EAAC,YAAY,iBAAc,MAAM,GAAkB,CACxE;CACF,CAAC,CAAC;AAEL,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,KAAuB,EAAa,EAAE;IAChE,OAAO;QACL,SAAS,EAAE,YAAY;QACvB,MAAM,EAAE,KAAK;QACb,IAAI,EAAE,KAAK,CAAC,KAAK;KAClB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,WAAmB,EAAiB,EAAE;IAClE,OAAO;QACL,GAAG,EAAE,GAAG,WAAW,EAAE;QACrB,cAAc,EAAE,GAAS,EAAE,CAAC,IAAI;KACjC,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,KAAK,EACrC,MAAe,EACS,EAAE;IAC1B,MAAM,IAAI,GAAG,MAAM,eAAe,CAAC,MAAM,CAAC,CAAC;IAE3C,MAAM,SAAS,GAAG,IAAI,CAAC,IAA8B,CAAC;IACtD,MAAM,iBAAiB,GAAG,IAAI,CAAC,YAAY,CAAC;IAE5C,MAAM,QAAQ,GACZ,SAAS,CAAC,UAAW,CAAC,aAAa,CAAmB,YAAY,CAAE,CAAC;IACvE,MAAM,UAAU,GACd,SAAS,CAAC,UAAW,CAAC,aAAa,CAAmB,cAAc,CAAE,CAAC;IACzE,MAAM,SAAS,GACb,SAAS,CAAC,UAAW,CAAC,aAAa,CAAmB,aAAa,CAAE,CAAC;IAExE,MAAM,UAAU,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;IAE7B,IAAI,QAAQ;QAAE,QAAQ,CAAC,MAAM,GAAG,UAAU,CAAC;IAC3C,IAAI,UAAU;QAAE,UAAU,CAAC,MAAM,GAAG,UAAU,CAAC;IAC/C,IAAI,SAAS;QAAE,SAAS,CAAC,MAAM,GAAG,UAAU,CAAC;IAE7C,OAAO;QACL,IAAI;QACJ,SAAS;QACT,iBAAiB;QACjB,QAAQ;QACR,UAAU;QACV,SAAS;KACV,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { SpecPage, newSpecPage } from \"@stencil/core/testing\";\nimport { DateInput } from \"../../ic-date-input\";\nimport { h } from \"@stencil/core\";\nimport { IcInputLabel } from \"@ukic/web-components/dist/components/ic-input-label\";\n\ninterface EventType {\n  inputType: string;\n  target: HTMLInputElement;\n  data: string;\n}\n\ninterface KeyboardEvent {\n  key: string;\n  preventDefault: () => void;\n}\n\ninterface DateInputType {\n  page: SpecPage;\n  component: HTMLIcDateInputElement;\n  componentInstance: any;\n  dayInput: HTMLInputElement;\n  monthInput: HTMLInputElement;\n  yearInput: HTMLInputElement;\n}\n\nexport const createDateInput = (format = \"DD/MM/YYYY\"): Promise<SpecPage> =>\n  newSpecPage({\n    components: [DateInput, IcInputLabel],\n    template: () => (\n      <ic-date-input label=\"Test label\" date-format={format}></ic-date-input>\n    ),\n  });\n\nexport const handleEvent = (input: HTMLInputElement): EventType => {\n  return {\n    inputType: \"insertText\",\n    target: input,\n    data: input.value,\n  };\n};\n\nexport const keyboardEvent = (keyboardKey: string): KeyboardEvent => {\n  return {\n    key: `${keyboardKey}`,\n    preventDefault: (): null => null,\n  };\n};\n\nexport const createDateInputEnv = async (\n  format?: string\n): Promise<DateInputType> => {\n  const page = await createDateInput(format);\n\n  const component = page.root as HTMLIcDateInputElement;\n  const componentInstance = page.rootInstance;\n\n  const dayInput =\n    component.shadowRoot!.querySelector<HTMLInputElement>(\".day-input\")!;\n  const monthInput =\n    component.shadowRoot!.querySelector<HTMLInputElement>(\".month-input\")!;\n  const yearInput =\n    component.shadowRoot!.querySelector<HTMLInputElement>(\".year-input\")!;\n\n  const mockSelect = jest.fn();\n\n  if (dayInput) dayInput.select = mockSelect;\n  if (monthInput) monthInput.select = mockSelect;\n  if (yearInput) yearInput.select = mockSelect;\n\n  return {\n    page,\n    component,\n    componentInstance,\n    dayInput,\n    monthInput,\n    yearInput,\n  };\n};\n"]}
+{"version":3,"file":"ic-date-input.js","sourceRoot":"","sources":["../../../../../../../src/components/ic-date-input/test/helpers/ic-date-input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAC9D,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAChD,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAClC,OAAO,EAAE,YAAY,EAAE,MAAM,qDAAqD,CAAC;AAsBnF,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,MAAM,GAAG,YAAY,EAAqB,EAAE,CAC1E,WAAW,CAAC;IACV,UAAU,EAAE,CAAC,SAAS,EAAE,YAAY,CAAC;IACrC,QAAQ,EAAE,GAAG,EAAE,CAAC,CACd,qBAAe,KAAK,EAAC,YAAY,iBAAc,MAAM,GAAkB,CACxE;CACF,CAAC,CAAC;AAEL,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,KAAuB,EAAa,EAAE;IAChE,OAAO;QACL,SAAS,EAAE,YAAY;QACvB,MAAM,EAAE,KAAK;QACb,IAAI,EAAE,KAAK,CAAC,KAAK;KAClB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,WAAmB,EAAiB,EAAE;IAClE,OAAO;QACL,GAAG,EAAE,GAAG,WAAW,EAAE;QACrB,cAAc,EAAE,GAAS,EAAE,CAAC,IAAI;KACjC,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,KAAK,EACrC,MAAe,EACS,EAAE;IAC1B,MAAM,IAAI,GAAG,MAAM,eAAe,CAAC,MAAM,CAAC,CAAC;IAE3C,MAAM,SAAS,GAAG,IAAI,CAAC,IAA8B,CAAC;IACtD,MAAM,iBAAiB,GAAG,IAAI,CAAC,YAAY,CAAC;IAE5C,MAAM,QAAQ,GACZ,SAAS,CAAC,UAAW,CAAC,aAAa,CAAmB,YAAY,CAAE,CAAC;IACvE,MAAM,UAAU,GACd,SAAS,CAAC,UAAW,CAAC,aAAa,CAAmB,cAAc,CAAE,CAAC;IACzE,MAAM,SAAS,GACb,SAAS,CAAC,UAAW,CAAC,aAAa,CAAmB,aAAa,CAAE,CAAC;IAExE,MAAM,UAAU,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;IAE7B,IAAI,QAAQ;QAAE,QAAQ,CAAC,MAAM,GAAG,UAAU,CAAC;IAC3C,IAAI,UAAU;QAAE,UAAU,CAAC,MAAM,GAAG,UAAU,CAAC;IAC/C,IAAI,SAAS;QAAE,SAAS,CAAC,MAAM,GAAG,UAAU,CAAC;IAE7C,OAAO;QACL,IAAI;QACJ,SAAS;QACT,iBAAiB;QACjB,QAAQ;QACR,UAAU;QACV,SAAS;KACV,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { SpecPage, newSpecPage } from \"@stencil/core/testing\";\nimport { DateInput } from \"../../ic-date-input\";\nimport { h } from \"@stencil/core\";\nimport { IcInputLabel } from \"@ukic/web-components/dist/components/ic-input-label\";\n\ninterface EventType {\n  inputType: string;\n  target: HTMLInputElement;\n  data: string;\n}\n\ninterface KeyboardEvent {\n  key: string;\n  preventDefault: () => void;\n}\n\ninterface DateInputType {\n  page: SpecPage;\n  component: HTMLIcDateInputElement;\n  componentInstance: any;\n  dayInput: HTMLInputElement;\n  monthInput: HTMLInputElement;\n  yearInput: HTMLInputElement;\n}\n\nexport const createDateInput = (format = \"DD/MM/YYYY\"): Promise<SpecPage> =>\n  newSpecPage({\n    components: [DateInput, IcInputLabel],\n    template: () => (\n      <ic-date-input label=\"Test label\" date-format={format}></ic-date-input>\n    ),\n  });\n\nexport const handleEvent = (input: HTMLInputElement): EventType => {\n  return {\n    inputType: \"insertText\",\n    target: input,\n    data: input.value,\n  };\n};\n\nexport const keyboardEvent = (keyboardKey: string): KeyboardEvent => {\n  return {\n    key: `${keyboardKey}`,\n    preventDefault: (): null => null,\n  };\n};\n\nexport const createDateInputEnv = async (\n  format?: string\n): Promise<DateInputType> => {\n  const page = await createDateInput(format);\n\n  const component = page.root as HTMLIcDateInputElement;\n  const componentInstance = page.rootInstance;\n\n  const dayInput =\n    component.shadowRoot!.querySelector<HTMLInputElement>(\".day-input\")!;\n  const monthInput =\n    component.shadowRoot!.querySelector<HTMLInputElement>(\".month-input\")!;\n  const yearInput =\n    component.shadowRoot!.querySelector<HTMLInputElement>(\".year-input\")!;\n\n  const mockSelect = jest.fn();\n\n  if (dayInput) dayInput.select = mockSelect;\n  if (monthInput) monthInput.select = mockSelect;\n  if (yearInput) yearInput.select = mockSelect;\n\n  return {\n    page,\n    component,\n    componentInstance,\n    dayInput,\n    monthInput,\n    yearInput,\n  };\n};\n"]}

package/dist/collection/components/ic-date-picker/ic-date-picker.js

@@ -140,6 +140,10 @@ export class DatePicker {
          * Sets the date picker to the dark or light theme colors. "inherit" will set the color based on the system settings or ic-theme component.
          */
         this.theme = "inherit";
+        /**
+         * The value of the `aria-live` attribute on the validation message.
+         */
+        this.validationAriaLive = "polite";
         /**
          * The validation status - e.g. 'error' | 'warning' | 'success'. This will override the built-in date validation.
          */
@@ -785,6 +789,7 @@ export class DatePicker {
                 showCalendarButton: true,
                 value: this.value,
                 emitDatePartChange: this.emitDatePartChange,
+                validationAriaLive: this.validationAriaLive,
             };
             if (this.dateFormat !== DEFAULT_DATE_FORMAT) {
                 inputProps.dateFormat = this.dateFormat;
@@ -1010,33 +1015,33 @@ export class DatePicker {
             yesterday.setDate(minDate.getDate() - 1);
             minDay = yesterday;
         }
-        return (h(Host, { key: '9f01e93a809b4c0dd0a702b7716617643140601e', onKeyDown: this.keyDownHandler, class: {
+        return (h(Host, { key: 'b2137a0ddce74eafda6be2472afb1793cbf68eef', onKeyDown: this.keyDownHandler, class: {
                 [`ic-date-picker-${size}`]: true,
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            } }, h("div", { key: '8c4e6a6b965562994667acf2e2f12e79cfb7f026', class: "date-input-container" }, h("ic-date-input", Object.assign({ key: '8baa5a1ba1f5042554dcc53f26945a872e6d62ca', ref: (el) => (this.inputEl = el) }, dateInputProps), h("slot", { key: 'ee77883989839f1e375e82e19a4e68dad539606f', name: "helper-text", slot: "helper-text" }))), calendarOpen && (h("div", { key: 'b6885a1077a70c25cf107be2e97e21bfb3065005' }, h("span", { key: 'e06f399f1b71353f595532fe4d75679c9a30585c', id: "dialog-description", class: "sr-only" }, dialogDescription), h("div", { key: '3b9e98f7360131d40e34072162f5b1b3a62df79b', role: "dialog", "aria-modal": "true", "aria-label": dialogLabel, "aria-describedBy": "dialog-description", class: {
+            } }, h("div", { key: '642c68aca8dac1c2c65d6fc30da6fbf7cae083e9', class: "date-input-container" }, h("ic-date-input", Object.assign({ key: '7c360a109491013c58b40d0dde1cea2fa8bdf49d', ref: (el) => (this.inputEl = el) }, dateInputProps), h("slot", { key: 'e26b8ae6d4bd987ed81bb193a3de998372479ba5', name: "helper-text", slot: "helper-text" }))), calendarOpen && (h("div", { key: '4e97c468fb44045378e5a936f3f40a49e4eba65d' }, h("span", { key: 'd619d8b0db95cc30b36b4499872b29cbf25cfec2', id: "dialog-description", class: "sr-only" }, dialogDescription), h("div", { key: 'd84f35cdcff05860927ffc0f2541ebe10971937d', role: "dialog", "aria-modal": "true", "aria-label": dialogLabel, "aria-describedBy": "dialog-description", class: {
                 "calendar-container": true,
                 above: this.showPickerAbove,
-            }, onMouseDown: this.handleCalendarMouseDown, onClick: this.handleCalendarClick }, h("span", { key: '8b9d2af7ec25c7f4390b6367ba61d1cc4edc6862', ref: (el) => (this.liveRegionEl = el), id: "live-region", "aria-live": "assertive", class: "sr-only" }), h("div", { key: '8de6382adeab06868cc3679812c9dc7003a0dc38', class: {
+            }, onMouseDown: this.handleCalendarMouseDown, onClick: this.handleCalendarClick }, h("span", { key: 'e17eb60cf60cae2ddfdc620c8170f3fd20c8948f', ref: (el) => (this.liveRegionEl = el), id: "live-region", "aria-live": "assertive", class: "sr-only" }), h("div", { key: 'e5553e29abf290e5e38f7a111946bd4bb9cf0f34', class: {
                 "month-year-nav-container": true,
-            } }, h("div", { key: '595f1d3b587316a0a8a9401759802794379bb01a', class: "month-year-nav" }, this.previousMonthButton(), h("span", { key: 'db4136ca3865227558dce4bf7d53ff9ed745be56', id: "select-month-hint", "aria-hidden": "true" }, monthButtonText), h("ic-button", { key: '58856c4d545e0c925ff484f0268bb15c2359cb43', ref: (el) => (this.monthButtonEl = el), size: size, class: "month-picker-button", "aria-haspopup": "menu", "aria-expanded": monthPickerVisible ? "true" : "false", "full-width": "true", variant: "tertiary", "aria-label": monthLabel, "aria-describedby": "select-month-hint", onKeyDown: this.monthButtonKeyDownHandler, onClick: this.monthButtonClickHandler }, monthNames[monthInView]), this.nextMonthButton()), h("div", { key: 'd43213b8bf2c1850d3b2edc7abac54b9a601e862', class: "month-year-nav" }, this.previousYearButton(), h("span", { key: 'ba3bd8c4eed337839606019aff6f7a03c5c35b3a', id: "select-year-hint", "aria-hidden": "true" }, yearButtonText), h("ic-button", { key: '15c6ec0144f58dc3c76360f7ccfa28000c36af77', ref: (el) => (this.yearButtonEl = el), size: size, class: "year-picker-button", "aria-haspopup": "menu", "aria-expanded": yearPickerVisible ? "true" : "false", "full-width": "true", variant: "tertiary", "aria-label": yearLabel, "aria-describedby": "select-year-hint", onKeyDown: this.yearButtonKeyDownHandler, onClick: this.yearButtonClickHandler }, this.yearInView), this.nextYearButton())), !(monthPickerVisible || yearPickerVisible) && (h("div", { key: '913a72924b2cc1db4b398a1faecfa2cf1bf4be42', class: {
+            } }, h("div", { key: '92ac58ac5dd9df901278bd025cf914f80e480d85', class: "month-year-nav" }, this.previousMonthButton(), h("span", { key: '27da769612a75c1e902a3167d7e9cb348fdfe343', id: "select-month-hint", "aria-hidden": "true" }, monthButtonText), h("ic-button", { key: 'a7e05080ddf126e9446bcf977ef4bec599ab953a', ref: (el) => (this.monthButtonEl = el), size: size, class: "month-picker-button", "aria-haspopup": "menu", "aria-expanded": monthPickerVisible ? "true" : "false", "full-width": "true", variant: "tertiary", "aria-label": monthLabel, "aria-describedby": "select-month-hint", onKeyDown: this.monthButtonKeyDownHandler, onClick: this.monthButtonClickHandler }, monthNames[monthInView]), this.nextMonthButton()), h("div", { key: '9287686fe19a31a1cea431402ec91eb33463a859', class: "month-year-nav" }, this.previousYearButton(), h("span", { key: '49bff3660edba939bb848a052b2904d81ce2ee54', id: "select-year-hint", "aria-hidden": "true" }, yearButtonText), h("ic-button", { key: '9f05b2770f7c14c976f6c3f09a1661856f1a57f8', ref: (el) => (this.yearButtonEl = el), size: size, class: "year-picker-button", "aria-haspopup": "menu", "aria-expanded": yearPickerVisible ? "true" : "false", "full-width": "true", variant: "tertiary", "aria-label": yearLabel, "aria-describedby": "select-year-hint", onKeyDown: this.yearButtonKeyDownHandler, onClick: this.yearButtonClickHandler }, this.yearInView), this.nextYearButton())), !(monthPickerVisible || yearPickerVisible) && (h("div", { key: '1a7880de3748d7d033a43599aabd2798af90f32b', class: {
                 calendar: true,
                 hidden: monthPickerVisible || yearPickerVisible,
-            }, onKeyDown: this.handleCalendarKeyDown }, h("div", { key: '5f9784f58378b05de6e52a2763acab163ab6e3e5', class: "weekdays", "aria-hidden": "true" }, orderedDaysOfWeek.map((dayName) => {
+            }, onKeyDown: this.handleCalendarKeyDown }, h("div", { key: '0a3e3df8eab3fb77e1ce9c2550c20cf160f4f650', class: "weekdays", "aria-hidden": "true" }, orderedDaysOfWeek.map((dayName) => {
             const header = size === "small" ? dayName.charAt(0) : dayName;
             return (h("div", { class: "calendar-day-header" }, h("ic-typography", { variant: "caption" }, header)));
-        })), h("div", { key: '1c1cfe77f48e7b50e6a014db13a597b924baab06', class: "calendar-days-container" }, this.currMonthView.map((day) => {
+        })), h("div", { key: 'f2415a435dea0633bd42657f9f19bd3bd49e6936', class: "calendar-days-container" }, this.currMonthView.map((day) => {
             var _a;
             return (h(DayButton, { day: day, disableDay: (_a = this.disableDays) === null || _a === void 0 ? void 0 : _a.includes(Number(day.getDay())), today: dateMatches(day, this.today), selected: dateMatches(day, this.selectedDate), focussed: dateMatches(day, this.focussedDate), inRange: dateInRange(day, minDay, maxDate), monthInView: monthInView, onSelectDay: this.handleSelectDay, focussedDayRef: this.setFocussedDayEl, onFocusDay: this.onDayButtonFocusHandler, onBlurDay: this.onDayButtonBlurHandler, showDaysOutsideMonth: this.showDaysOutsideMonth }));
-        })))), h("div", { key: '8b064369e1271b56085a85e0c00822ff7232d6e8', class: {
+        })))), h("div", { key: '1ed1a8c793883412ded234f949a7e7b65e66c414', class: {
                 "month-picker-container": true,
                 hidden: !monthPickerVisible,
-            } }, monthPickerVisible && (h(MonthPicker, { key: 'cdd9f6ccb301355eb31a1607413396f44b828ca9', size: size, onSelectMonth: this.handleSelectMonth, monthInView: monthInView, focussedMonth: focussedMonth, onKeyDown: this.monthPickerKeyDownHandler, focussedMonthRef: this.setFocussedMonthEl, minDate: minDate, maxDate: maxDate, yearInView: yearInView }))), h("div", { key: 'a629d2297686220a678d2ba7870fcc386b735c84', class: {
+            } }, monthPickerVisible && (h(MonthPicker, { key: 'd847bce743c2c7289184bb6cb881d81639986934', size: size, onSelectMonth: this.handleSelectMonth, monthInView: monthInView, focussedMonth: focussedMonth, onKeyDown: this.monthPickerKeyDownHandler, focussedMonthRef: this.setFocussedMonthEl, minDate: minDate, maxDate: maxDate, yearInView: yearInView }))), h("div", { key: 'e56d5c9d5a31b6b3f530ac96b81182720ef264c8', class: {
                 "year-picker-container": true,
                 hidden: !yearPickerVisible,
-            } }, yearPickerVisible && (h(YearPicker, { key: '113dfbbb61d28495a6aa0ec0c2d2aa6be1c3e881', decadeView: decadeView, size: size, focussedYear: focussedYear, onSelectYear: this.handleSelectYear, onKeyDown: this.yearPickerKeyDownHandler, onFocusYear: this.onYearButtonFocusHandler, onBlurYear: this.onYearButtonBlurHandler, yearInView: yearInView, minDate: minDate, maxDate: maxDate, focussedYearRef: this.setFocussedYearEl }))), h("div", { key: '5a3a56a0fe0af5771e88a5d6573b5b4e2e491d4f', class: {
+            } }, yearPickerVisible && (h(YearPicker, { key: 'd40cc0d0384bb04d63628a4e21f9e7cec0fe1c5f', decadeView: decadeView, size: size, focussedYear: focussedYear, onSelectYear: this.handleSelectYear, onKeyDown: this.yearPickerKeyDownHandler, onFocusYear: this.onYearButtonFocusHandler, onBlurYear: this.onYearButtonBlurHandler, yearInView: yearInView, minDate: minDate, maxDate: maxDate, focussedYearRef: this.setFocussedYearEl }))), h("div", { key: 'f59442e70666f9a8216e1657d2e1099b2436e376', class: {
                 "bottom-buttons": true,
                 "no-today": !showPickerTodayButton,
-            } }, showPickerTodayButton && (h("ic-button", { key: '67e78d82526a164797c8dfa3c60b4eff27f77193', id: "today-button", variant: "tertiary", ref: (el) => (this.todayButtonEl = el), size: size, "aria-label": "Navigate to current date", onClick: this.todayButtonClickHandler, onKeyDown: this.todayButtonKeyDownHandler, disabled: this.isCurrentMonth() }, "Go to today")), showPickerClearButton && (h("ic-button", { key: 'cd6f21520ba94b85cc078b4478ff3dffaac2bb15', id: "clear-button", "aria-label": "clear selected date", ref: (el) => (this.clearButtonEl = el), variant: "tertiary", size: size, onClick: this.clearButtonClickHandler, onKeyDown: this.clearButtonKeyDownHandler, disabled: this.value === "" ||
+            } }, showPickerTodayButton && (h("ic-button", { key: '506f36d5bec283f11df7cbdc3431f4f5bd5a80f6', id: "today-button", variant: "tertiary", ref: (el) => (this.todayButtonEl = el), size: size, "aria-label": "Navigate to current date", onClick: this.todayButtonClickHandler, onKeyDown: this.todayButtonKeyDownHandler, disabled: this.isCurrentMonth() }, "Go to today")), showPickerClearButton && (h("ic-button", { key: 'ad295135a146065f627b66081ad96a1820b144ce', id: "clear-button", "aria-label": "clear selected date", ref: (el) => (this.clearButtonEl = el), variant: "tertiary", size: size, onClick: this.clearButtonClickHandler, onKeyDown: this.clearButtonKeyDownHandler, disabled: this.value === "" ||
                 this.value === null ||
                 this.value === undefined }, "Clear"))))))));
     }
@@ -1634,6 +1639,32 @@ export class DatePicker {
                 "reflect": false,
                 "defaultValue": "\"inherit\""
             },
+            "validationAriaLive": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IcAriaLive",
+                    "resolved": "\"assertive\" | \"off\" | \"polite\"",
+                    "references": {
+                        "IcAriaLive": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::IcAriaLive"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The value of the `aria-live` attribute on the validation message."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "validation-aria-live",
+                "reflect": false,
+                "defaultValue": "\"polite\""
+            },
             "validationStatus": {
                 "type": "string",
                 "mutable": false,