@govtechsg/sgds-web-component 3.21.2-rc.1 → 3.21.2-rc.2

package/components/Datepicker/datepicker-header.js.map

@@ -1 +1 @@
-{"version":3,"file":"datepicker-header.js","sources":["../../../src/components/Datepicker/datepicker-header.ts"],"sourcesContent":["import { isBefore, isEqual } from \"date-fns\";\nimport { html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { sanitizedNextMonth, sanitizedPreviousMonth } from \"../../utils/time\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsButton from \"../Button/sgds-button\";\nimport SgdsIconButton from \"../IconButton/sgds-icon-button\";\nimport datepickerHeaderStyle from \"./datepicker-header.css\";\nimport { ViewEnum } from \"./types\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\n\nexport class DatepickerHeader extends SgdsElement {\n  static styles = [datepickerHeaderStyle];\n  /** @internal */\n  static dependencies = {\n    \"sgds-icon\": SgdsIcon,\n    \"sgds-icon-button\": SgdsIconButton,\n    \"sgds-button\": SgdsButton\n  };\n\n  /** @internal */\n  @property({ attribute: false })\n  displayDate: Date;\n  /** @internal */\n  @property({ attribute: false })\n  focusedDate: Date;\n  /** @internal */\n  @property({ attribute: false })\n  selectedDate: Date[] = [];\n\n  /** @internal */\n  @property()\n  view: ViewEnum;\n  /** @internal */\n  @property()\n  focusedTabIndex: number;\n\n  @watch(\"focusedTabIndex\", { waitUntilFirstUpdate: true })\n  _handleFocusedTabIndexChange() {\n    let buttonToFocus: SgdsButton | SgdsIconButton;\n    switch (this.focusedTabIndex) {\n      case 0:\n        buttonToFocus = this.shadowRoot.querySelector(\"sgds-icon-button[name='arrow-left']\");\n        break;\n      case 1:\n        buttonToFocus = this.shadowRoot.querySelector(\"sgds-button\");\n        break;\n      case 2:\n        buttonToFocus = this.shadowRoot.querySelector(\"sgds-icon-button[name='arrow-right']\");\n        break;\n      default:\n        return;\n    }\n    buttonToFocus.focus();\n  }\n\n  private _changeView() {\n    switch (this.view) {\n      case \"days\":\n        this.view = \"months\";\n        break;\n      case \"months\":\n        this.view = \"years\";\n        break;\n      case \"years\":\n        break;\n    }\n    this.emit(\"sgds-view\", { detail: this.view }); // emit event to render the correct view\n  }\n\n  public renderHeader(displayDate = this.displayDate, view = this.view) {\n    if (view === \"months\") {\n      return displayDate.getFullYear();\n    }\n    if (view === \"years\") {\n      const CURRENT_YEAR = new Date().getFullYear();\n      const displayYear = displayDate.getFullYear();\n      const remainder = (displayYear - CURRENT_YEAR) % 12;\n      const yearsPosition = remainder < 0 ? 12 + remainder : remainder;\n      const startLimit = displayYear - yearsPosition;\n      const endLimit = displayYear - yearsPosition + 12 - 1;\n      return `${startLimit} - ${endLimit}`;\n    }\n    return `${MONTH_LABELS[displayDate.getMonth()]} ${displayDate.getFullYear()}`;\n  }\n\n  private _renderHeaderTemplate() {\n    return html`${this.renderHeader()}`;\n  }\n  /** @internal */\n  private handleClickPrevious() {\n    const { view, displayDate, focusedDate } = this;\n    let newDisplayDate = new Date(displayDate);\n\n    if (view === \"months\") {\n      newDisplayDate.setFullYear(newDisplayDate.getFullYear() - 1);\n    } else if (this.view === \"years\") {\n      newDisplayDate.setFullYear(newDisplayDate.getFullYear() - 12);\n    } else {\n      /**\n       * FocusedDate gets precedence over displayDate.\n       *  This happens when the arrow keys are pressed to\n       *  change focus date and user clicks the arrow buttons to\n       * shift months\n       */\n      if (focusedDate.getDate() !== displayDate.getDate()) {\n        newDisplayDate = sanitizedPreviousMonth(focusedDate);\n      } else {\n        newDisplayDate = sanitizedPreviousMonth(newDisplayDate);\n      }\n    }\n    this.displayDate = newDisplayDate; // Update the displayDate property\n    // emit event to render correct view\n    this.emit(\"sgds-change-calendar\", { detail: this.displayDate });\n  }\n\n  /** @internal */\n  private _handleClickNext() {\n    const { view, displayDate, focusedDate } = this;\n    let newDisplayDate = new Date(displayDate);\n\n    if (view === \"months\") {\n      newDisplayDate.setFullYear(newDisplayDate.getFullYear() + 1);\n    } else if (this.view === \"years\") {\n      newDisplayDate.setFullYear(newDisplayDate.getFullYear() + 12);\n    } else {\n      /** FocusedDate gets precedence over displayDate  */\n      if (focusedDate.getDate() !== displayDate.getDate()) {\n        newDisplayDate = sanitizedNextMonth(focusedDate);\n      } else {\n        newDisplayDate = sanitizedNextMonth(newDisplayDate);\n      }\n    }\n    this.displayDate = newDisplayDate; // Update the displayDate property\n\n    //emit event to render correct view\n    this.emit(\"sgds-change-calendar\", { detail: this.displayDate });\n  }\n  private _removeCaret(): boolean {\n    const displayYear = this.displayDate.getFullYear();\n    const displayMonth = this.displayDate.getMonth();\n    const displayMonthYear = new Date(displayYear, displayMonth);\n\n    if (this.view === \"months\") {\n      return displayYear <= 1900;\n    }\n    if (this.view === \"years\") {\n      return displayYear < 1904;\n    }\n    return isEqual(displayMonthYear, new Date(0, 0, 1)) || isBefore(displayMonthYear, new Date(0, 0, 1));\n  }\n\n  private _ariaLabelForNextBtn() {\n    const nextBtnDate = {\n      days: \"Show next month\",\n      months: \"Show next year\",\n      years: \"Show next 12 years\"\n    };\n    return nextBtnDate[this.view];\n  }\n  private _ariaLabelForPrevBtn() {\n    const prevBtnDate = {\n      days: \"Show previous month\",\n      months: \"Show previous year\",\n      years: \"Show previous 12 years\"\n    };\n    return prevBtnDate[this.view];\n  }\n\n  private _ariaLabelForHeaderBtn() {\n    const message = {\n      days: `Current view is days, click to show months in ${this.displayDate.getFullYear()}`,\n      months: `Current view is months, click to show years between ${this.renderHeader(this.displayDate, \"years\")}`,\n      years: `Current view is years`\n    };\n    return `${this.renderHeader()}. ${message[this.view]}`;\n  }\n  render() {\n    return html`\n      <div class=\"datepicker-header dropdown-header\" role=\"heading\">\n        <sgds-icon-button\n          name=\"arrow-left\"\n          size=\"sm\"\n          variant=\"ghost\"\n          @click=\"${this.handleClickPrevious}\"\n          class=${classMap({ invisible: this._removeCaret() })}\n          aria-label=${this._ariaLabelForPrevBtn()}\n        >\n        </sgds-icon-button>\n        <sgds-button\n          fullWidth\n          variant=\"ghost\"\n          size=\"sm\"\n          @click=${this._changeView}\n          class=${classMap({ disabled: this.view === \"years\" })}\n          aria-disabled=${this.view === \"years\" ? \"true\" : \"false\"}\n          aria-live=\"polite\"\n        >\n          ${this._renderHeaderTemplate()}\n        </sgds-button>\n        <sgds-icon-button\n          name=\"arrow-right\"\n          size=\"sm\"\n          variant=\"ghost\"\n          @click=\"${this._handleClickNext}\"\n          aria-label=${this._ariaLabelForNextBtn()}\n        >\n        </sgds-icon-button>\n      </div>\n    `;\n  }\n}\n\nexport default DatepickerHeader;\n\nexport const MONTH_LABELS = [\n  \"January\",\n  \"February\",\n  \"March\",\n  \"April\",\n  \"May\",\n  \"June\",\n  \"July\",\n  \"August\",\n  \"September\",\n  \"October\",\n  \"November\",\n  \"December\"\n];\n"],"names":["datepickerHeaderStyle"],"mappings":"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"}
+{"version":3,"file":"datepicker-header.js","sources":["../../../src/components/Datepicker/datepicker-header.ts"],"sourcesContent":["import { isBefore, isEqual } from \"date-fns\";\nimport { html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { sanitizedNextMonth, sanitizedPreviousMonth } from \"../../utils/time\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsButton from \"../Button/sgds-button\";\nimport SgdsIconButton from \"../IconButton/sgds-icon-button\";\nimport datepickerHeaderStyle from \"./datepicker-header.css\";\nimport { ViewEnum } from \"./types\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\n\nexport class DatepickerHeader extends SgdsElement {\n  static styles = [datepickerHeaderStyle];\n  /** @internal */\n  static dependencies = {\n    \"sgds-icon\": SgdsIcon,\n    \"sgds-icon-button\": SgdsIconButton,\n    \"sgds-button\": SgdsButton\n  };\n\n  /** @internal */\n  @property({ attribute: false })\n  displayDate: Date;\n  /** @internal */\n  @property({ attribute: false })\n  focusedDate: Date;\n  /** @internal */\n  @property({ attribute: false })\n  selectedDate: Date[] = [];\n\n  /** @internal */\n  @property()\n  view: ViewEnum;\n  /** @internal */\n  @property()\n  focusedTabIndex: number;\n\n  @watch(\"focusedTabIndex\", { waitUntilFirstUpdate: true })\n  _handleFocusedTabIndexChange() {\n    let buttonToFocus: SgdsButton | SgdsIconButton;\n    switch (this.focusedTabIndex) {\n      case 0:\n        buttonToFocus = this.shadowRoot.querySelector(\"sgds-icon-button[name='arrow-left']\");\n        break;\n      case 1:\n        buttonToFocus = this.shadowRoot.querySelector(\"sgds-button\");\n        break;\n      case 2:\n        buttonToFocus = this.shadowRoot.querySelector(\"sgds-icon-button[name='arrow-right']\");\n        break;\n      default:\n        return;\n    }\n    buttonToFocus.focus();\n  }\n\n  private _changeView() {\n    switch (this.view) {\n      case \"days\":\n        this.view = \"months\";\n        break;\n      case \"months\":\n        this.view = \"years\";\n        break;\n      case \"years\":\n        break;\n    }\n    this.emit(\"sgds-view\", { detail: this.view }); // emit event to render the correct view\n  }\n\n  public renderHeader(displayDate = this.displayDate, view = this.view) {\n    if (view === \"months\") {\n      return displayDate.getFullYear();\n    }\n    if (view === \"years\") {\n      const CURRENT_YEAR = new Date().getFullYear();\n      const displayYear = displayDate.getFullYear();\n      const remainder = (displayYear - CURRENT_YEAR) % 12;\n      const yearsPosition = remainder < 0 ? 12 + remainder : remainder;\n      const startLimit = displayYear - yearsPosition;\n      const endLimit = displayYear - yearsPosition + 12 - 1;\n      return `${startLimit} - ${endLimit}`;\n    }\n    return `${MONTH_LABELS[displayDate.getMonth()]} ${displayDate.getFullYear()}`;\n  }\n\n  private _renderHeaderTemplate() {\n    return html`${this.renderHeader()}`;\n  }\n  /** @internal */\n  private handleClickPrevious() {\n    const { view, displayDate, focusedDate } = this;\n    let newDisplayDate = new Date(displayDate);\n\n    if (view === \"months\") {\n      newDisplayDate.setFullYear(newDisplayDate.getFullYear() - 1);\n    } else if (this.view === \"years\") {\n      newDisplayDate.setFullYear(newDisplayDate.getFullYear() - 12);\n    } else {\n      /**\n       * FocusedDate gets precedence over displayDate.\n       *  This happens when the arrow keys are pressed to\n       *  change focus date and user clicks the arrow buttons to\n       * shift months\n       */\n      if (focusedDate.getDate() !== displayDate.getDate()) {\n        newDisplayDate = sanitizedPreviousMonth(focusedDate);\n      } else {\n        newDisplayDate = sanitizedPreviousMonth(newDisplayDate);\n      }\n    }\n    this.displayDate = newDisplayDate; // Update the displayDate property\n    // emit event to render correct view\n    this.emit(\"sgds-change-calendar\", { detail: this.displayDate });\n  }\n\n  /** @internal */\n  private _handleClickNext() {\n    const { view, displayDate, focusedDate } = this;\n    let newDisplayDate = new Date(displayDate);\n\n    if (view === \"months\") {\n      newDisplayDate.setFullYear(newDisplayDate.getFullYear() + 1);\n    } else if (this.view === \"years\") {\n      newDisplayDate.setFullYear(newDisplayDate.getFullYear() + 12);\n    } else {\n      /** FocusedDate gets precedence over displayDate  */\n      if (focusedDate.getDate() !== displayDate.getDate()) {\n        newDisplayDate = sanitizedNextMonth(focusedDate);\n      } else {\n        newDisplayDate = sanitizedNextMonth(newDisplayDate);\n      }\n    }\n    this.displayDate = newDisplayDate; // Update the displayDate property\n\n    //emit event to render correct view\n    this.emit(\"sgds-change-calendar\", { detail: this.displayDate });\n  }\n  private _removeCaret(): boolean {\n    const displayYear = this.displayDate.getFullYear();\n    const displayMonth = this.displayDate.getMonth();\n    const displayMonthYear = new Date(displayYear, displayMonth);\n\n    if (this.view === \"months\") {\n      return displayYear <= 1900;\n    }\n    if (this.view === \"years\") {\n      return displayYear < 1904;\n    }\n    return isEqual(displayMonthYear, new Date(0, 0, 1)) || isBefore(displayMonthYear, new Date(0, 0, 1));\n  }\n\n  private _ariaLabelForNextBtn() {\n    const nextBtnDate = {\n      days: \"Show next month\",\n      months: \"Show next year\",\n      years: \"Show next 12 years\"\n    };\n    return nextBtnDate[this.view];\n  }\n  private _ariaLabelForPrevBtn() {\n    const prevBtnDate = {\n      days: \"Show previous month\",\n      months: \"Show previous year\",\n      years: \"Show previous 12 years\"\n    };\n    return prevBtnDate[this.view];\n  }\n\n  private _ariaLabelForHeaderBtn() {\n    const message = {\n      days: `Current view is days, click to show months in ${this.displayDate.getFullYear()}`,\n      months: `Current view is months, click to show years between ${this.renderHeader(this.displayDate, \"years\")}`,\n      years: `Current view is years`\n    };\n    return `${this.renderHeader()}. ${message[this.view]}`;\n  }\n  render() {\n    return html`\n      <div class=\"datepicker-header dropdown-header\">\n        <sgds-icon-button\n          name=\"arrow-left\"\n          size=\"sm\"\n          variant=\"ghost\"\n          @click=\"${this.handleClickPrevious}\"\n          class=${classMap({ invisible: this._removeCaret() })}\n          .ariaLabel=${this._ariaLabelForPrevBtn()}\n        >\n        </sgds-icon-button>\n        <sgds-button\n          fullWidth\n          variant=\"ghost\"\n          size=\"sm\"\n          @click=${this._changeView}\n          class=${classMap({ disabled: this.view === \"years\" })}\n          .ariaLabel=${this._ariaLabelForHeaderBtn()}\n          aria-disabled=${this.view === \"years\" ? \"true\" : \"false\"}\n          aria-live=\"polite\"\n        >\n          ${this._renderHeaderTemplate()}\n        </sgds-button>\n        <sgds-icon-button\n          name=\"arrow-right\"\n          size=\"sm\"\n          variant=\"ghost\"\n          @click=\"${this._handleClickNext}\"\n          .ariaLabel=${this._ariaLabelForNextBtn()}\n        >\n        </sgds-icon-button>\n      </div>\n    `;\n  }\n}\n\nexport default DatepickerHeader;\n\nexport const MONTH_LABELS = [\n  \"January\",\n  \"February\",\n  \"March\",\n  \"April\",\n  \"May\",\n  \"June\",\n  \"July\",\n  \"August\",\n  \"September\",\n  \"October\",\n  \"November\",\n  \"December\"\n];\n"],"names":["datepickerHeaderStyle"],"mappings":"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"}

package/components/Datepicker/index.umd.min.js

@@ -105,7 +105,7 @@ class extends Ii{constructor(t){if(super(t),t.type!==Hi&&t.type!==Ei&&t.type!==$
                <slot name="rightIcon"></slot>`}
       
       </${e}>
-    `}}Us.styles=[...Rs.styles,Ns,zs],t([Zi({type:String,reflect:!0})],Us.prototype,"name",void 0),t([Zi({type:String,reflect:!0})],Us.prototype,"value",void 0),t([Zi({type:String,reflect:!0})],Us.prototype,"type",void 0),t([Zi({type:String,reflect:!0})],Us.prototype,"form",void 0),t([Zi({type:String,reflect:!0,attribute:"formaction"})],Us.prototype,"formAction",void 0),t([Zi({type:String,reflect:!0,attribute:"formmethod"})],Us.prototype,"formMethod",void 0),t([Zi({attribute:"formnovalidate",type:Boolean,reflect:!0})],Us.prototype,"formNoValidate",void 0),t([Zi({type:String,reflect:!0,attribute:"formtarget"})],Us.prototype,"formTarget",void 0),t([Zi({type:Boolean,reflect:!0})],Us.prototype,"fullWidth",void 0),t([Zi({type:Boolean})],Us.prototype,"hasLeftIconSlot",void 0),t([Zi({type:Boolean})],Us.prototype,"hasRightIconSlot",void 0);var qs=re`:host([menuisopen]:not([disabled]):not([readonly])) .dropdown-menu{display:block}.dropdown-menu{background-clip:padding-box;background-color:var(--sgds-surface-default);border-radius:var(--sgds-border-radius-md);box-shadow:0 0 1px 0 hsla(0,0%,5%,.12),0 4px 8px 0 hsla(0,0%,5%,.12);color:var(--sgds-color-default);display:none;list-style:none;margin:0;max-height:var(--sgds-dimension-480);min-width:var(--sgds-dimension-192);overflow-y:auto;padding:var(--sgds-padding-xs) 0;position:absolute;text-align:left;z-index:var(--sgds-z-index-floating)}.nav-tabs .dropdown-menu{border-top-left-radius:0;border-top-right-radius:0;margin-top:calc(var(--sgds-nav-tabs-border-width)*-1)}@media (min-width:512px){.navbar-expand-sm .navbar-nav .dropdown-menu{position:absolute}}@media (min-width:768px){.navbar-expand-md .navbar-nav .dropdown-menu{position:absolute}}@media (min-width:1024px){.navbar-expand-lg .navbar-nav .dropdown-menu{position:absolute}}@media (min-width:1280px){.navbar-expand-xl .navbar-nav .dropdown-menu{position:absolute}}@media (min-width:1440px){.navbar-expand-xxl .navbar-nav .dropdown-menu{position:absolute}}.navbar-expand .navbar-nav .dropdown-menu{position:absolute}.sgds.navbar .dropdown-menu.megamenu{left:0;right:0;width:100%}.sgds.combobox>.dropdown-menu{min-width:100%}`,Ws=re`.datepicker-body{color:var(--sgds-form-color-default);display:flex;justify-content:center}table{border-collapse:collapse;text-align:center}.monthpicker,.yearpicker{display:grid;grid-template-columns:repeat(3,6rem);grid-template-rows:repeat(4,2.5rem)}button.month,button.year{background-color:transparent;border:0;border-radius:var(--sgds-form-border-radius-sm);font-size:var(--sgds-font-size-label-sm);line-height:var(--sgds-line-height-2-xs);padding:0;position:relative}button.month.active:not(.selected-ends),button.year.active:not(.selected-ends),td[data-day].active:not(.selected-ends){background-color:var(--sgds-primary-surface-translucent);border-radius:0;cursor:pointer}button.month:hover:not(.active),button.year:hover:not(.active),td[data-day]:hover:not(.disabled):not(.selected-ends):not(.active){background-color:var(--sgds-bg-translucent-subtle);cursor:pointer}button.month:focus:not(.active),button.year:focus:not(.active),td[data-day]:focus:not(.disabled):not(.selected-ends):not(.active){background-color:var(--sgds-bg-translucent-subtle)}button.month:focus-visible,button.year:focus-visible,td[data-day]:focus-visible{outline:var(--sgds-form-outline-focus);outline-offset:var(--sgds-form-outline-offset-focus)}button.month.active:not(.selected-ends):focus,button.year.active:not(.selected-ends):focus,td[data-day].active:not(.selected-ends):focus{border-radius:var(--sgds-form-border-radius-sm)}button.year.active{background-color:var(--sgds-primary-surface-translucent);cursor:pointer}td,th{border-radius:var(--sgds-form-border-radius-sm);font-size:var(--sgds-font-size-label-sm);height:var(--sgds-form-height-lg);line-height:var(--sgds-line-height-2-xs);padding:0;position:relative;width:var(--sgds-form-width-md)}th{font-weight:var(--sgds-font-weight-semibold)}td[data-day]{cursor:pointer}button.month.active.selected-ends,button.year.active.selected-ends,td[data-day].active.selected-ends{background-color:var(--sgds-form-primary-surface-default);color:var(--sgds-form-color-fixed-light)}button.month.active.selected-ends:focus,button.month.active.selected-ends:hover,button.year.active.selected-ends:focus,button.year.active.selected-ends:hover,td[data-day].active.selected-ends:focus,td[data-day].active.selected-ends:hover{background-color:var(--sgds-form-primary-surface-emphasis)}td[data-day].disabled{cursor:not-allowed;opacity:var(--sgds-opacity-40)}.today{align-items:center;display:flex;flex-direction:column;justify-content:center}.today:after{background-color:var(--sgds-form-primary-surface-default);bottom:6px;content:".";line-height:4px;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' fill='none'%3E%3Ccircle cx='2' cy='2' r='2' fill='%235A42C0'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' fill='none'%3E%3Ccircle cx='2' cy='2' r='2' fill='%235A42C0'/%3E%3C/svg%3E");-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;position:absolute;width:4px}.today.active.selected-ends:after{background-color:var(--sgds-form-color-inverse)}`;const js=new Date,Gs={ArrowUp:{days:-7,months:-3,years:-3},ArrowDown:{days:7,months:3,years:3},ArrowRight:{days:1,months:1,years:1},ArrowLeft:{days:-1,months:-1,years:-1}};class Ks extends Cs{constructor(){super(...arguments),this.selectedDate=[],this.mode="single"}focusOnCalendar(t){t.blur(),this._focusOnCalendarCell()}connectedCallback(){super.connectedCallback(),this.addEventListener("keydown",this._handleKeyPress),this.addEventListener("blur",t=>t.stopPropagation())}updated(){3===this.focusedTabIndex&&this._focusOnCalendarCell()}_updateFocusedDate(){this.focusedDate=Ds(this.displayDate),this.focusedDate.getFullYear()<1900&&this.focusedDate.setFullYear(1900)}_setFocusedDate(t){const e=this.focusedDate.getDate(),i=this.focusedDate.getMonth(),a=this.focusedDate.getFullYear();switch(this.view){case"days":{const s=Ds(new Date(a,i,e+t));(it(s,new Date(0,0,1,12))||st(s,new Date(0,0,1,12)))&&(this.focusedDate=s);break}case"months":{const s=Ds(new Date(a,i+t,e));(it(s,new Date(0,0,1,12))||st(s,new Date(0,0,1,12)))&&(this.focusedDate=s);break}case"years":{const s=Ds(new Date(a+t,i,e));s.getFullYear()>=1900&&(this.focusedDate=s);break}}}_handleEnterDateKeyboard(t){const e=t.composedPath()[0];if(!e.classList.contains("disabled"))switch(this.view){case"days":this._onClickDay(t);break;case"months":{const{month:t}=e.dataset;this._onClickMonth(parseInt(t));break}case"years":{const{year:t}=e.dataset;this._onClickYear(parseInt(t))}}}_handleKeyPress(t){if("Enter"===t.key)return t.preventDefault(),void this._handleEnterDateKeyboard(t);if("Tab"===t.key){const t=this._getFocusedTarget();return void(3!==this.focusedTabIndex&&t.blur())}if(t.key.includes("Arrow")){t.preventDefault(),this._blurCalendarCell();const e=Gs[t.key][this.view];this._setFocusedDate(e),this._focusOnCalendarCell()}}_generateIncrementDates(){const t=Ds(this.selectedDate[0]);if(this.selectedDate.length<2)return[t];const e=Ds(this.selectedDate[1]),i=[];if(t.getTime()<e.getTime())for(let a=t;a<=e;a.setDate(a.getDate()+1))i.push(new Date(a));else for(let a=e;a<=t;a.setDate(a.getDate()+1))i.push(new Date(a));return i}_onClickDay(t){const{day:e,date:i}=t.composedPath()[0].dataset,a=new Date(this.displayDate);if(a.setDate(parseInt(e)),"click"===t.type&&(this.focusedDate=Ds(new Date(i))),"single"===this.mode)this.selectedDate=[a],this.emit("sgds-selectdates",{detail:this.selectedDate});else if("range"===this.mode){const t=[...this.selectedDate];0!==t.length&&2!==t.length||(t.length=0),t.push(a),this.selectedDate=t,this.emit("sgds-selectdates",{detail:this.selectedDate})}const s=this.minDate?Ds(new Date(this.minDate)):null,n=this.maxDate?Ds(new Date(this.maxDate)):null,r=Ds(a);(s&&r<s||n&&r>n)&&(t.stopPropagation(),t.preventDefault())}_onClickMonth(t,e=this.focusedDate.getFullYear()){const i=new Date(this.displayDate);this.view="days",i.setMonth(t),i.setFullYear(e),this.displayDate=i,this.emit("sgds-view",{detail:this.view}),this.emit("sgds-selectmonth",{detail:this.displayDate})}_onClickYear(t){const e=new Date(this.displayDate);e.setFullYear(t),this.displayDate=e,this.view="months",this.emit("sgds-view",{detail:this.view}),this.emit("sgds-selectyear",{detail:this.displayDate})}_getFocusedTarget(){const t={days:`td[data-date="${this.focusedDate.toISOString()}"]`,months:`button[data-month="${this.focusedDate.getMonth()}"][data-year="${this.focusedDate.getFullYear()}"]`,years:`button[data-year="${this.focusedDate.getFullYear()}"]`}[this.view];return this.shadowRoot.querySelector(`${t}`)}_blurCalendarCell(){const t=this._getFocusedTarget();t.setAttribute("tabindex","-1"),t.blur()}_focusOnCalendarCell(){const t=this._getFocusedTarget();t?(t.setAttribute("tabindex","3"),t.focus(),this.emit("sgds-update-focus",{detail:this.focusedDate})):this.emit("sgds-change-calendar",{detail:this.focusedDate})}_generateDays(){const t=this.selectedDate.map(t=>Ds(t)),e=this._generateIncrementDates(),i=this.minDate?Ds(new Date(this.minDate)):null,a=this.maxDate?Ds(new Date(this.maxDate)):null,s=this.displayDate.getFullYear(),n=this.displayDate.getMonth(),r=new Date(s,n,1).getDay();let o=Ks.daysInMonth[n];1===n&&(s%4==0&&s%100!=0||s%400==0)&&(o=29);const l=[];let c=1;for(let d=0;d<9;d++){const h=[];for(let l=0;l<=6;l++)if(c<=o&&(d>0||l>=r)){const r=new Date(s,n,c,12,0,0,0),o=r.toISOString(),d=i&&Date.parse(o)<Date.parse(i.toISOString()),u=a&&Date.parse(o)>Date.parse(a.toISOString()),p=d||u?void 0:this._onClickDay,g=js.getMonth()===this.displayDate.getMonth(),v=js.getFullYear()===this.displayDate.getFullYear(),f=js.getDate()===c,m=t.length>0&&e.some(t=>Date.parse(o)===Date.parse(t.toISOString())),w=t.length>0&&e[0].toISOString()===o,y=t.length>1&&e[e.length-1].toISOString()===o,b=""+(f&&g&&v?"Today's date, ":"")+X(r,"PPPP");h.push(Je`<td
+    `}}Us.styles=[...Rs.styles,Ns,zs],t([Zi({type:String,reflect:!0})],Us.prototype,"name",void 0),t([Zi({type:String,reflect:!0})],Us.prototype,"value",void 0),t([Zi({type:String,reflect:!0})],Us.prototype,"type",void 0),t([Zi({type:String,reflect:!0})],Us.prototype,"form",void 0),t([Zi({type:String,reflect:!0,attribute:"formaction"})],Us.prototype,"formAction",void 0),t([Zi({type:String,reflect:!0,attribute:"formmethod"})],Us.prototype,"formMethod",void 0),t([Zi({attribute:"formnovalidate",type:Boolean,reflect:!0})],Us.prototype,"formNoValidate",void 0),t([Zi({type:String,reflect:!0,attribute:"formtarget"})],Us.prototype,"formTarget",void 0),t([Zi({type:Boolean,reflect:!0})],Us.prototype,"fullWidth",void 0),t([Zi({type:Boolean})],Us.prototype,"hasLeftIconSlot",void 0),t([Zi({type:Boolean})],Us.prototype,"hasRightIconSlot",void 0);var qs=re`:host([menuisopen]:not([disabled]):not([readonly])) .dropdown-menu{display:block}.dropdown-menu{background-clip:padding-box;background-color:var(--sgds-surface-default);border-radius:var(--sgds-border-radius-md);box-shadow:0 0 1px 0 hsla(0,0%,5%,.12),0 4px 8px 0 hsla(0,0%,5%,.12);color:var(--sgds-color-default);display:none;list-style:none;margin:0;max-height:var(--sgds-dimension-480);min-width:var(--sgds-dimension-192);overflow-y:auto;padding:var(--sgds-padding-xs) 0;position:absolute;text-align:left;z-index:var(--sgds-z-index-floating)}.nav-tabs .dropdown-menu{border-top-left-radius:0;border-top-right-radius:0;margin-top:calc(var(--sgds-nav-tabs-border-width)*-1)}@media (min-width:512px){.navbar-expand-sm .navbar-nav .dropdown-menu{position:absolute}}@media (min-width:768px){.navbar-expand-md .navbar-nav .dropdown-menu{position:absolute}}@media (min-width:1024px){.navbar-expand-lg .navbar-nav .dropdown-menu{position:absolute}}@media (min-width:1280px){.navbar-expand-xl .navbar-nav .dropdown-menu{position:absolute}}@media (min-width:1440px){.navbar-expand-xxl .navbar-nav .dropdown-menu{position:absolute}}.navbar-expand .navbar-nav .dropdown-menu{position:absolute}.sgds.navbar .dropdown-menu.megamenu{left:0;right:0;width:100%}.sgds.combobox>.dropdown-menu{min-width:100%}`,Ws=re`.datepicker-body{color:var(--sgds-form-color-default);display:flex;justify-content:center}table{border-collapse:collapse;text-align:center}.monthpicker,.yearpicker{display:grid;grid-template-columns:repeat(3,6rem);grid-template-rows:repeat(4,2.5rem)}.monthpicker [role=row],.yearpicker [role=row]{display:contents}button.month,button.year{background-color:transparent;border:0;border-radius:var(--sgds-form-border-radius-sm);font-size:var(--sgds-font-size-label-sm);line-height:var(--sgds-line-height-2-xs);padding:0;position:relative}button.month.active:not(.selected-ends),button.year.active:not(.selected-ends),td[data-day].active:not(.selected-ends){background-color:var(--sgds-primary-surface-translucent);border-radius:0;cursor:pointer}button.month:hover:not(.active),button.year:hover:not(.active),td[data-day]:hover:not(.disabled):not(.selected-ends):not(.active){background-color:var(--sgds-bg-translucent-subtle);cursor:pointer}button.month:focus:not(.active),button.year:focus:not(.active),td[data-day]:focus:not(.disabled):not(.selected-ends):not(.active){background-color:var(--sgds-bg-translucent-subtle)}button.month:focus-visible,button.year:focus-visible,td[data-day]:focus-visible{outline:var(--sgds-form-outline-focus);outline-offset:var(--sgds-form-outline-offset-focus)}button.month.active:not(.selected-ends):focus,button.year.active:not(.selected-ends):focus,td[data-day].active:not(.selected-ends):focus{border-radius:var(--sgds-form-border-radius-sm)}button.year.active{background-color:var(--sgds-primary-surface-translucent);cursor:pointer}td,th{border-radius:var(--sgds-form-border-radius-sm);font-size:var(--sgds-font-size-label-sm);height:var(--sgds-form-height-lg);line-height:var(--sgds-line-height-2-xs);padding:0;position:relative;width:var(--sgds-form-width-md)}th{font-weight:var(--sgds-font-weight-semibold)}td[data-day]{cursor:pointer}button.month.active.selected-ends,button.year.active.selected-ends,td[data-day].active.selected-ends{background-color:var(--sgds-form-primary-surface-default);color:var(--sgds-form-color-fixed-light)}button.month.active.selected-ends:focus,button.month.active.selected-ends:hover,button.year.active.selected-ends:focus,button.year.active.selected-ends:hover,td[data-day].active.selected-ends:focus,td[data-day].active.selected-ends:hover{background-color:var(--sgds-form-primary-surface-emphasis)}td[data-day].disabled{cursor:not-allowed;opacity:var(--sgds-opacity-40)}.today{align-items:center;display:flex;flex-direction:column;justify-content:center}.today:after{background-color:var(--sgds-form-primary-surface-default);bottom:6px;content:".";line-height:4px;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' fill='none'%3E%3Ccircle cx='2' cy='2' r='2' fill='%235A42C0'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' fill='none'%3E%3Ccircle cx='2' cy='2' r='2' fill='%235A42C0'/%3E%3C/svg%3E");-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;position:absolute;width:4px}.today.active.selected-ends:after{background-color:var(--sgds-form-color-inverse)}`;const js=new Date,Gs={ArrowUp:{days:-7,months:-3,years:-3},ArrowDown:{days:7,months:3,years:3},ArrowRight:{days:1,months:1,years:1},ArrowLeft:{days:-1,months:-1,years:-1}};class Ks extends Cs{constructor(){super(...arguments),this.selectedDate=[],this.mode="single"}focusOnCalendar(t){t.blur(),this._focusOnCalendarCell()}connectedCallback(){super.connectedCallback(),this.addEventListener("keydown",this._handleKeyPress),this.addEventListener("blur",t=>t.stopPropagation())}updated(){3===this.focusedTabIndex&&this._focusOnCalendarCell()}_updateFocusedDate(){this.focusedDate=Ds(this.displayDate),this.focusedDate.getFullYear()<1900&&this.focusedDate.setFullYear(1900)}_setFocusedDate(t){const e=this.focusedDate.getDate(),i=this.focusedDate.getMonth(),a=this.focusedDate.getFullYear();switch(this.view){case"days":{const s=Ds(new Date(a,i,e+t));(it(s,new Date(0,0,1,12))||st(s,new Date(0,0,1,12)))&&(this.focusedDate=s);break}case"months":{const s=Ds(new Date(a,i+t,e));(it(s,new Date(0,0,1,12))||st(s,new Date(0,0,1,12)))&&(this.focusedDate=s);break}case"years":{const s=Ds(new Date(a+t,i,e));s.getFullYear()>=1900&&(this.focusedDate=s);break}}}_handleEnterDateKeyboard(t){const e=t.composedPath()[0];if(!e.classList.contains("disabled"))switch(this.view){case"days":this._onClickDay(t);break;case"months":{const{month:t}=e.dataset;this._onClickMonth(parseInt(t));break}case"years":{const{year:t}=e.dataset;this._onClickYear(parseInt(t))}}}_handleKeyPress(t){if("Enter"===t.key)return t.preventDefault(),void this._handleEnterDateKeyboard(t);if("Tab"===t.key){const t=this._getFocusedTarget();return void(3!==this.focusedTabIndex&&t.blur())}if(t.key.includes("Arrow")){t.preventDefault(),this._blurCalendarCell();const e=Gs[t.key][this.view];this._setFocusedDate(e),this._focusOnCalendarCell()}}_generateIncrementDates(){const t=Ds(this.selectedDate[0]);if(this.selectedDate.length<2)return[t];const e=Ds(this.selectedDate[1]),i=[];if(t.getTime()<e.getTime())for(let a=t;a<=e;a.setDate(a.getDate()+1))i.push(new Date(a));else for(let a=e;a<=t;a.setDate(a.getDate()+1))i.push(new Date(a));return i}_onClickDay(t){const{day:e,date:i}=t.composedPath()[0].dataset,a=new Date(this.displayDate);if(a.setDate(parseInt(e)),"click"===t.type&&(this.focusedDate=Ds(new Date(i))),"single"===this.mode)this.selectedDate=[a],this.emit("sgds-selectdates",{detail:this.selectedDate});else if("range"===this.mode){const t=[...this.selectedDate];0!==t.length&&2!==t.length||(t.length=0),t.push(a),this.selectedDate=t,this.emit("sgds-selectdates",{detail:this.selectedDate})}const s=this.minDate?Ds(new Date(this.minDate)):null,n=this.maxDate?Ds(new Date(this.maxDate)):null,r=Ds(a);(s&&r<s||n&&r>n)&&(t.stopPropagation(),t.preventDefault())}_onClickMonth(t,e=this.focusedDate.getFullYear()){const i=new Date(this.displayDate);this.view="days",i.setMonth(t),i.setFullYear(e),this.displayDate=i,this.emit("sgds-view",{detail:this.view}),this.emit("sgds-selectmonth",{detail:this.displayDate})}_onClickYear(t){const e=new Date(this.displayDate);e.setFullYear(t),this.displayDate=e,this.view="months",this.emit("sgds-view",{detail:this.view}),this.emit("sgds-selectyear",{detail:this.displayDate})}_getFocusedTarget(){const t={days:`td[data-date="${this.focusedDate.toISOString()}"]`,months:`button[data-month="${this.focusedDate.getMonth()}"][data-year="${this.focusedDate.getFullYear()}"]`,years:`button[data-year="${this.focusedDate.getFullYear()}"]`}[this.view];return this.shadowRoot.querySelector(`${t}`)}_blurCalendarCell(){const t=this._getFocusedTarget();t.setAttribute("tabindex","-1"),t.blur()}_focusOnCalendarCell(){const t=this._getFocusedTarget();t?(t.setAttribute("tabindex","0"),t.focus(),this.emit("sgds-update-focus",{detail:this.focusedDate})):this.emit("sgds-change-calendar",{detail:this.focusedDate})}_generateDays(){const t=this.selectedDate.map(t=>Ds(t)),e=this._generateIncrementDates(),i=this.minDate?Ds(new Date(this.minDate)):null,a=this.maxDate?Ds(new Date(this.maxDate)):null,s=this.displayDate.getFullYear(),n=this.displayDate.getMonth(),r=new Date(s,n,1).getDay();let o=Ks.daysInMonth[n];1===n&&(s%4==0&&s%100!=0||s%400==0)&&(o=29);const l=[];let c=1;for(let d=0;d<9;d++){const h=[];for(let l=0;l<=6;l++)if(c<=o&&(d>0||l>=r)){const r=new Date(s,n,c,12,0,0,0),o=r.toISOString(),d=i&&Date.parse(o)<Date.parse(i.toISOString()),u=a&&Date.parse(o)>Date.parse(a.toISOString()),p=d||u?void 0:this._onClickDay,g=js.getMonth()===this.displayDate.getMonth(),v=js.getFullYear()===this.displayDate.getFullYear(),f=js.getDate()===c,m=t.length>0&&e.some(t=>Date.parse(o)===Date.parse(t.toISOString())),w=t.length>0&&e[0].toISOString()===o,y=t.length>1&&e[e.length-1].toISOString()===o,b=""+(f&&g&&v?"Today's date, ":"")+X(r,"PPPP");h.push(Je`<td
               key=${l}
               data-date=${o}
               data-day=${c}
@@ -113,11 +113,11 @@ class extends Ii{constructor(t){if(super(t),t.type!==Hi&&t.type!==Ei&&t.type!==$
               aria-current=${Es(f&&g&&v?"date":void 0)}
               class=${Bs({today:f&&g&&v,"selected-ends":w||y,active:m,disabled:d||u})}
               @click=${p}
-              aria-selected=${Es(m?"true":void 0)}
-              tabindex=${this.focusedDate===new Date(o)?"3":"-1"}
+              aria-selected=${m?"true":"false"}
+              tabindex=${this.focusedDate===new Date(o)?"0":"-1"}
               ?disabled=${d||u}
               aria-disabled=${Es(d||u?"true":void 0)}
-              role="button"
+              role="gridcell"
             >
               ${c}
             </td>`),c++}else h.push(Je`<td key=${l}></td>`);if(l.push(Je`<tr key=${d}>
@@ -134,34 +134,44 @@ class extends Ii{constructor(t){if(super(t),t.type!==Hi&&t.type!==Ei&&t.type!==$
         </tbody>
       </table>
     `}_generateMonths(){const t=this._generateIncrementDates(),e=t.map(t=>Ds(new Date(t.getFullYear(),t.getMonth())).getTime()),i=this.displayDate.getFullYear();return Je`
-      <div class="monthpicker">
-        ${Ks.MONTHVIEW_LABELS.map((a,s)=>{const n=s===js.getMonth()&&i===js.getFullYear(),r=Ds(new Date(i,s)).getTime(),o=t[0].getMonth()===s,l=t[0].getFullYear()===i,c=t[t.length-1].getMonth()===s,d=t[t.length-1].getFullYear()===i,h=n?`Current month ${a} ${i}`:`${a} ${i}`;return Je` <button
-            class=${Bs({active:e.includes(r),today:n,month:!0,"selected-ends":o&&l||c&&d})}
-            @click=${()=>this._onClickMonth(s)}
-            data-month=${s}
-            data-year=${i}
-            tabindex="3"
-            aria-selected=${e.includes(r)}
-            aria-label=${h}
-          >
-            ${a.slice(0,3)}
-          </button>`})}
+      <div class="monthpicker" role="grid">
+        ${[0,1,2,3].map(a=>Je`
+            <div role="row">
+              ${Ks.MONTHVIEW_LABELS.slice(3*a,3*a+3).map((s,n)=>{const r=3*a+n,o=r===js.getMonth()&&i===js.getFullYear(),l=Ds(new Date(i,r)).getTime(),c=t[0].getMonth()===r,d=t[0].getFullYear()===i,h=t[t.length-1].getMonth()===r,u=t[t.length-1].getFullYear()===i,p=o?`Current month ${s} ${i}`:`${s} ${i}`;return Je` <button
+                  role="gridcell"
+                  class=${Bs({active:e.includes(l),today:o,month:!0,"selected-ends":c&&d||h&&u})}
+                  @click=${()=>this._onClickMonth(r)}
+                  data-month=${r}
+                  data-year=${i}
+                  tabindex="0"
+                  aria-selected=${e.includes(l)?"true":"false"}
+                  aria-label=${p}
+                >
+                  ${s.slice(0,3)}
+                </button>`})}
+            </div>
+          `)}
       </div>
     `}_generateYears(){const t=this._generateIncrementDates().map(t=>t.getFullYear()),e=js.getFullYear(),i=((t,e)=>{const i=t.getFullYear(),a=(i-e)%12,s=a<0?12+a:a,n=[],r=i-s+12-1;for(let t=i-s;t<r+1;t++)n.push(t);return n})(this.displayDate,e);return Je`
-      <div class="sgds yearpicker">
-        ${i.map(i=>{const a=t[0]===i,s=t[t.length-1]===i;return Je`
-            <button
-              class=${Bs({active:t.includes(i),year:!0,today:e===i,"selected-ends":a||s})}
-              @click=${()=>this._onClickYear(i)}
-              data-year=${i}
-              tabindex="3"
-              ?disabled=${i<1900}
-              aria-selected=${t.includes(i)}
-              aria-label=${Es(e===i?`Current year, ${i}`:void 0)}
-            >
-              ${i}
-            </button>
-          `})}
+      <div class="sgds yearpicker" role="grid">
+        ${[0,1,2,3].map(a=>Je`
+            <div role="row">
+              ${i.slice(3*a,3*a+3).map(i=>{const a=t[0]===i,s=t[t.length-1]===i;return Je`
+                  <button
+                    role="gridcell"
+                    class=${Bs({active:t.includes(i),year:!0,today:e===i,"selected-ends":a||s})}
+                    @click=${()=>this._onClickYear(i)}
+                    data-year=${i}
+                    tabindex="0"
+                    ?disabled=${i<1900}
+                    aria-selected=${t.includes(i)?"true":"false"}
+                    aria-label=${Es(e===i?`Current year, ${i}`:void 0)}
+                  >
+                    ${i}
+                  </button>
+                `})}
+            </div>
+          `)}
       </div>
     `}render(){let t;switch(this.view){case"days":default:t=Je` ${this._generateDays()} `;break;case"months":t=Je` ${this._generateMonths()} `;break;case"years":t=Je` ${this._generateYears()} `}return Je` <div class="datepicker-body">${t}</div> `}}Ks.styles=[Ws],Ks.DAY_LABELS=["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],Ks.daysInMonth=[31,28,31,30,31,30,31,31,30,31,30,31],Ks.MONTHVIEW_LABELS=["January","February","March","April","May","June","July","August","September","October","November","December"],t([Zi({type:Array})],Ks.prototype,"selectedDate",void 0),t([Zi({attribute:!1})],Ks.prototype,"displayDate",void 0),t([Zi({type:String})],Ks.prototype,"minDate",void 0),t([Zi({type:String})],Ks.prototype,"maxDate",void 0),t([Zi({type:String,reflect:!0})],Ks.prototype,"mode",void 0),t([Zi()],Ks.prototype,"view",void 0),t([Zi({type:Boolean})],Ks.prototype,"show",void 0),t([Zi()],Ks.prototype,"focusedTabIndex",void 0),t([As("displayDate")],Ks.prototype,"_updateFocusedDate",null);var Qs=Je`
   <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
@@ -2420,14 +2430,14 @@ class extends Ii{constructor(t){if(super(t),t.type!==Hi&&t.type!==Ei&&t.type!==$
                   ></sgds-icon>`}
           </${e}>
         `}}bn.styles=[...Rs.styles,yn],bn.dependencies={"sgds-icon":vn,"sgds-spinner":wn},t([Zi({type:String,reflect:!0})],bn.prototype,"name",void 0);var xn=re`.datepicker-header{display:flex;gap:var(--sgds-form-gap-md)}sgds-button{--btn-font-weight:var(--sgds-font-weight-semibold)}`;class _n extends Cs{constructor(){super(...arguments),this.selectedDate=[]}_handleFocusedTabIndexChange(){let t;switch(this.focusedTabIndex){case 0:t=this.shadowRoot.querySelector("sgds-icon-button[name='arrow-left']");break;case 1:t=this.shadowRoot.querySelector("sgds-button");break;case 2:t=this.shadowRoot.querySelector("sgds-icon-button[name='arrow-right']");break;default:return}t.focus()}_changeView(){switch(this.view){case"days":this.view="months";break;case"months":this.view="years"}this.emit("sgds-view",{detail:this.view})}renderHeader(t=this.displayDate,e=this.view){if("months"===e)return t.getFullYear();if("years"===e){const e=(new Date).getFullYear(),i=t.getFullYear(),a=(i-e)%12,s=a<0?12+a:a;return`${i-s} - ${i-s+12-1}`}return`${Cn[t.getMonth()]} ${t.getFullYear()}`}_renderHeaderTemplate(){return Je`${this.renderHeader()}`}handleClickPrevious(){const{view:t,displayDate:e,focusedDate:i}=this;let a=new Date(e);"months"===t?a.setFullYear(a.getFullYear()-1):"years"===this.view?a.setFullYear(a.getFullYear()-12):a=i.getDate()!==e.getDate()?Ss(i):Ss(a),this.displayDate=a,this.emit("sgds-change-calendar",{detail:this.displayDate})}_handleClickNext(){const{view:t,displayDate:e,focusedDate:i}=this;let a=new Date(e);"months"===t?a.setFullYear(a.getFullYear()+1):"years"===this.view?a.setFullYear(a.getFullYear()+12):a=i.getDate()!==e.getDate()?Vs(i):Vs(a),this.displayDate=a,this.emit("sgds-change-calendar",{detail:this.displayDate})}_removeCaret(){const t=this.displayDate.getFullYear(),e=this.displayDate.getMonth(),i=new Date(t,e);return"months"===this.view?t<=1900:"years"===this.view?t<1904:st(i,new Date(0,0,1))||at(i,new Date(0,0,1))}_ariaLabelForNextBtn(){return{days:"Show next month",months:"Show next year",years:"Show next 12 years"}[this.view]}_ariaLabelForPrevBtn(){return{days:"Show previous month",months:"Show previous year",years:"Show previous 12 years"}[this.view]}_ariaLabelForHeaderBtn(){const t={days:`Current view is days, click to show months in ${this.displayDate.getFullYear()}`,months:`Current view is months, click to show years between ${this.renderHeader(this.displayDate,"years")}`,years:"Current view is years"};return`${this.renderHeader()}. ${t[this.view]}`}render(){return Je`
-      <div class="datepicker-header dropdown-header" role="heading">
+      <div class="datepicker-header dropdown-header">
         <sgds-icon-button
           name="arrow-left"
           size="sm"
           variant="ghost"
           @click="${this.handleClickPrevious}"
           class=${Bs({invisible:this._removeCaret()})}
-          aria-label=${this._ariaLabelForPrevBtn()}
+          .ariaLabel=${this._ariaLabelForPrevBtn()}
         >
         </sgds-icon-button>
         <sgds-button
@@ -2436,6 +2446,7 @@ class extends Ii{constructor(t){if(super(t),t.type!==Hi&&t.type!==Ei&&t.type!==$
           size="sm"
           @click=${this._changeView}
           class=${Bs({disabled:"years"===this.view})}
+          .ariaLabel=${this._ariaLabelForHeaderBtn()}
           aria-disabled=${"years"===this.view?"true":"false"}
           aria-live="polite"
         >
@@ -2446,7 +2457,7 @@ class extends Ii{constructor(t){if(super(t),t.type!==Hi&&t.type!==Ei&&t.type!==$
           size="sm"
           variant="ghost"
           @click="${this._handleClickNext}"
-          aria-label=${this._ariaLabelForNextBtn()}
+          .ariaLabel=${this._ariaLabelForNextBtn()}
         >
         </sgds-icon-button>
       </div>
@@ -2565,7 +2576,7 @@ class extends Ii{constructor(t){if(super(t),t.type!==Hi&&t.type!==Ei&&t.type!==$
           >
           </sgds-icon-button>
         </sgds-datepicker-input>
-        <ul
+        <div
           id=${this.dropdownMenuId}
           class="sgds datepicker dropdown-menu"
           role="dialog"
@@ -2590,7 +2601,7 @@ class extends Ii{constructor(t){if(super(t),t.type!==Hi&&t.type!==Ei&&t.type!==$
             .selectedDate=${this.selectedDateRange}
             .focusedTabIndex=${this.focusedTabIndex}
           ></sgds-datepicker-calendar>
-        </ul>
+        </div>
       </div>
     `}}_r.styles=[...Ms.styles,qs,xr],_r.dependencies={"sgds-datepicker-input":wr,"sgds-datepicker-calendar":Ks,"sgds-datepicker-header":_n,"sgds-button":Us,"sgds-icon-button":bn},t([Zi({type:Boolean,reflect:!0})],_r.prototype,"required",void 0),t([Zi({reflect:!0})],_r.prototype,"name",void 0),t([Zi({type:Boolean,reflect:!0})],_r.prototype,"disabled",void 0),t([Zi({type:Boolean,reflect:!0})],_r.prototype,"noValidate",void 0),t([Zi({type:String,reflect:!0})],_r.prototype,"value",void 0),t([Zi({type:Array,reflect:!0})],_r.prototype,"initialValue",void 0),t([Zi({type:String})],_r.prototype,"minDate",void 0),t([Zi({type:String})],_r.prototype,"maxDate",void 0),t([Zi({type:String,reflect:!0})],_r.prototype,"mode",void 0),t([Zi({type:String,reflect:!0})],_r.prototype,"invalidFeedback",void 0),t([Zi({type:Boolean,reflect:!0})],_r.prototype,"hasFeedback",void 0),t([Zi({reflect:!0})],_r.prototype,"label",void 0),t([Zi({reflect:!0})],_r.prototype,"hintText",void 0),t([Zi({type:Boolean,reflect:!0,state:!1})],_r.prototype,"noFlip",void 0),t([Zi({type:String,reflect:!0,state:!1})],_r.prototype,"drop",void 0),t([Zi({attribute:!1})],_r.prototype,"displayDate",void 0),t([ur()],_r.prototype,"defaultValue",void 0),t([Zi({type:Boolean,reflect:!0})],_r.prototype,"invalid",void 0),t([Vi()],_r.prototype,"view",void 0),t([Vi()],_r.prototype,"selectedDateRange",void 0),t([Vi()],_r.prototype,"focusedDate",void 0),t([Vi()],_r.prototype,"focusedTabIndex",void 0),t([Bi("sgds-datepicker-calendar")],_r.prototype,"calendar",void 0),t([Bi("sgds-datepicker-input")],_r.prototype,"datepickerInputAsync",void 0),t([Ai("sgds-datepicker-input")],_r.prototype,"datepickerInput",void 0),t([As("value",{waitUntilFirstUpdate:!0})],_r.prototype,"_handleValueChange",null),yr="sgds-datepicker",br=_r,customElements.get(yr)||customElements.define(yr,br)});
 //# sourceMappingURL=index.umd.min.js.map