@esri/calcite-components 3.0.0-next.98 → 3.0.0

package/dist/components/calcite-date-picker-month/customElement.js

@@ -2,14 +2,12 @@ import { c as R } from "../../chunks/runtime.js";
 import { ref as A } from "lit-html/directives/ref.js";
 import { keyed as H } from "lit-html/directives/keyed.js";
 import { html as f } from "lit";
-import { LitElement as I, createEvent as y, safeClassMap as u } from "@arcgis/lumina";
-import { i as M, b as v, s as o, k as S, m as F, n as C } from "../../chunks/date.js";
+import { LitElement as I, createEvent as v, safeClassMap as u } from "@arcgis/lumina";
+import { b as y, i as M, s as o, k as S, m as F, n as C } from "../../chunks/date.js";
 import { css as P } from "@lit/reactive-element/css-tag.js";
-/*!
- * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v3.0.0-next.98
-*/
+/*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
+v3.0.0 */
 const D = {
   calendar: "calendar",
   calendarContainer: "calendar-container",
@@ -23,12 +21,12 @@ const D = {
   weekDays: "week-days",
   weekHeader: "week-header",
   weekHeaderContainer: "week-header-container"
-}, E = P`:host([hidden]){display:none}[hidden]{display:none}.calendar-container{display:flex;inline-size:100%}:host([range][layout=vertical]) .calendar-container{flex-direction:column}.calendar{inline-size:100%}.week-header-container{display:flex;block-size:16px;padding-inline:var(--calcite-spacing-sm);padding-block:var(--calcite-spacing-md)}.week-header{display:flex;align-items:center;justify-content:center;text-align:center;font-size:var(--calcite-font-size--2);line-height:1rem;font-weight:var(--calcite-font-weight-bold);color:var(--calcite-color-text-3);inline-size:14.2857142857%}.day-container{display:flex;inline-size:100%;min-inline-size:0px;justify-content:center}.day-container calcite-date-picker-day{inline-size:100%}.week-days{display:grid;grid-template-columns:repeat(7,1fr);grid-auto-rows:1fr;padding-inline:var(--calcite-spacing-sm);padding-block-end:var(--calcite-spacing-sm)}.month-header{display:flex;inline-size:100%;justify-content:space-between}.month{display:flex;inline-size:100%;flex-direction:column;justify-content:space-between}.day{font-size:var(--calcite-font-size)}:host([scale=s]) .week-days{padding-inline:var(--calcite-spacing-xs);padding-block-end:var(--calcite-spacing-xs)}:host([scale=s]) .week-header-container{padding-inline:var(--calcite-spacing-xs);padding-block:var(--calcite-spacing-sm)}:host([scale=s]) .day{font-size:var(--calcite-font-size-sm)}:host([scale=l]) .week-header{font-size:var(--calcite-font-size--1);line-height:1rem}:host([scale=l]) .week-days{padding-inline:var(--calcite-spacing-md);padding-block-end:var(--calcite-spacing-md)}:host([scale=l]) .week-header-container{padding-inline:var(--calcite-spacing-md);padding-block:var(--calcite-spacing-md-plus)}:host([scale=l]) .day{font-size:var(--calcite-font-size-md)}.calendar--start{border-width:0px;border-style:solid;border-color:var(--calcite-color-border-1)}:host([range][layout=horizontal]) .calendar--start{border-inline-end-width:var(--calcite-border-width-sm)}:host([range][layout=vertical]) .calendar--start{border-block-end-width:var(--calcite-border-width-sm)}.noncurrent{pointer-events:none;opacity:0}`, m = 7, k = 6;
+}, E = P`:host([hidden]){display:none}[hidden]{display:none}.calendar-container{display:flex;inline-size:100%}:host([range][layout=vertical]) .calendar-container{flex-direction:column}.calendar{inline-size:100%}.week-header-container{display:flex;block-size:16px;padding-inline:var(--calcite-spacing-sm);padding-block:var(--calcite-spacing-md)}.week-header{display:flex;align-items:center;justify-content:center;text-align:center;font-size:var(--calcite-font-size--2);line-height:1rem;font-weight:var(--calcite-font-weight-bold);inline-size:14.2857142857%;color:var(--calcite-date-picker-week-header-text-color, var(--calcite-color-text-3))}.day-container{display:flex;inline-size:100%;min-inline-size:0px;justify-content:center}.day-container calcite-date-picker-day{inline-size:100%}.week-days{display:grid;grid-template-columns:repeat(7,1fr);grid-auto-rows:1fr;padding-inline:var(--calcite-spacing-sm);padding-block-end:var(--calcite-spacing-sm)}.month-header{display:flex;inline-size:100%;justify-content:space-between}.month{display:flex;inline-size:100%;flex-direction:column;justify-content:space-between}.day{font-size:var(--calcite-font-size)}:host([scale=s]) .week-days{padding-inline:var(--calcite-spacing-xs);padding-block-end:var(--calcite-spacing-xs)}:host([scale=s]) .week-header-container{padding-inline:var(--calcite-spacing-xs);padding-block:var(--calcite-spacing-sm)}:host([scale=s]) .day{font-size:var(--calcite-font-size-sm)}:host([scale=l]) .week-header{font-size:var(--calcite-font-size--1);line-height:1rem}:host([scale=l]) .week-days{padding-inline:var(--calcite-spacing-md);padding-block-end:var(--calcite-spacing-md)}:host([scale=l]) .week-header-container{padding-inline:var(--calcite-spacing-md);padding-block:var(--calcite-spacing-md-plus)}:host([scale=l]) .day{font-size:var(--calcite-font-size-md)}.calendar--start{border-width:0px;border-style:solid;border-color:var(--calcite-date-picker-range-calendar-divider-color, var(--calcite-color-border-1))}:host([range][layout=horizontal]) .calendar--start{border-inline-end-width:var(--calcite-border-width-sm)}:host([range][layout=vertical]) .calendar--start{border-block-end-width:var(--calcite-border-width-sm)}.noncurrent{pointer-events:none;opacity:0}`, m = 7, k = 6;
 class z extends I {
   // #endregion
   // #region Lifecycle
   constructor() {
-    super(), this.activeDate = /* @__PURE__ */ new Date(), this.range = !1, this.calciteInternalDatePickerDayHover = y({ cancelable: !1 }), this.calciteInternalDatePickerDaySelect = y({ cancelable: !1 }), this.calciteInternalDatePickerMonthActiveDateChange = y({ cancelable: !1 }), this.calciteInternalDatePickerMonthChange = y({ cancelable: !1 }), this.calciteInternalDatePickerMonthMouseOut = y({ cancelable: !1 }), this.listen("pointerout", this.pointerOutHandler), this.listen("focusout", this.disableActiveFocus);
+    super(), this.activeDate = /* @__PURE__ */ new Date(), this.range = !1, this.calciteInternalDatePickerDayHover = v({ cancelable: !1 }), this.calciteInternalDatePickerDaySelect = v({ cancelable: !1 }), this.calciteInternalDatePickerMonthActiveDateChange = v({ cancelable: !1 }), this.calciteInternalDatePickerMonthChange = v({ cancelable: !1 }), this.calciteInternalDatePickerMonthMouseOut = v({ cancelable: !1 }), this.listen("pointerout", this.pointerOutHandler), this.listen("focusout", this.disableActiveFocus);
   }
   static {
     this.properties = { focusedDate: 16, activeDate: 0, dateTimeFormat: 0, endDate: 0, headingLevel: 11, hoverRange: 0, layout: 3, localeData: 0, max: 0, messages: 0, min: 0, monthStyle: 1, range: 7, scale: 3, selectedDate: 0, startDate: 0 };
@@ -45,7 +43,7 @@ class z extends I {
   // #endregion
   // #region Private Methods
   updateFocusedDateWithActive(e) {
-    this.selectedDate || (this.focusedDate = M(e, this.min, this.max) ? e : v(e, this.min, this.max));
+    this.selectedDate || (this.focusedDate = M(e, this.min, this.max) ? e : y(e, this.min, this.max));
   }
   keyDownHandler(e) {
     if (e.defaultPrevented)
@@ -102,7 +100,7 @@ class z extends I {
    */
   addMonths(e, a) {
     const t = new Date(a);
-    t.setMonth(a.getMonth() + e), this.calciteInternalDatePickerMonthActiveDateChange.emit(v(t, this.min, this.max)), this.focusedDate = v(t, this.min, this.max), this.activeFocus = !0, this.calciteInternalDatePickerDayHover.emit(t);
+    t.setMonth(a.getMonth() + e), this.calciteInternalDatePickerMonthActiveDateChange.emit(y(t, this.min, this.max)), this.focusedDate = y(t, this.min, this.max), this.activeFocus = !0, this.calciteInternalDatePickerDayHover.emit(t);
   }
   /**
    * Add n days to the current date
@@ -112,7 +110,7 @@ class z extends I {
    */
   addDays(e = 0, a) {
     const t = new Date(a);
-    t.setDate(a.getDate() + e), this.calciteInternalDatePickerMonthActiveDateChange.emit(v(t, this.min, this.max)), this.focusedDate = v(t, this.min, this.max), this.activeFocus = !0, this.calciteInternalDatePickerDayHover.emit(t);
+    t.setDate(a.getDate() + e), this.calciteInternalDatePickerMonthActiveDateChange.emit(y(t, this.min, this.max)), this.focusedDate = y(t, this.min, this.max), this.activeFocus = !0, this.calciteInternalDatePickerDayHover.emit(t);
   }
   /**
    * Get dates for last days of the previous month
@@ -122,13 +120,13 @@ class z extends I {
    * @param startOfWeek
    */
   getPreviousMonthDays(e, a, t) {
-    const s = new Date(a, e, 0), n = s.getDate(), i = s.getDay(), r = [];
-    if (i === (t + k) % m)
+    const s = new Date(a, e, 0), i = s.getDate(), n = s.getDay(), r = [];
+    if (n === (t + k) % m)
       return r;
-    if (i === t)
-      return [n];
-    for (let c = (m + i - t) % m; c >= 0; c--)
-      r.push(n - c);
+    if (n === t)
+      return [i];
+    for (let c = (m + n - t) % m; c >= 0; c--)
+      r.push(i - c);
     return r;
   }
   /**
@@ -139,8 +137,8 @@ class z extends I {
    */
   getCurrentMonthDays(e, a) {
     const t = new Date(a, e + 1, 0).getDate(), s = [];
-    for (let n = 0; n < t; n++)
-      s.push(n + 1);
+    for (let i = 0; i < t; i++)
+      s.push(i + 1);
     return s;
   }
   /**
@@ -151,12 +149,12 @@ class z extends I {
    * @param startOfWeek
    */
   getNextMonthDays(e, a, t) {
-    const s = new Date(a, e + 1, 0).getDay(), n = [];
+    const s = new Date(a, e + 1, 0).getDay(), i = [];
     if (s === (t + k) % m)
-      return n;
-    for (let i = 0; i < (k - (s - t)) % m; i++)
-      n.push(i + 1);
-    return n;
+      return i;
+    for (let n = 0; n < (k - (s - t)) % m; n++)
+      i.push(n + 1);
+    return i;
   }
   /**
    * Determine if the date is in between the start and end dates
@@ -199,27 +197,27 @@ class z extends I {
   isHoverInRange() {
     if (!this.hoverRange || !this.startDate)
       return !1;
-    const { start: e, end: a } = this.hoverRange, t = this.isFocusedOnStart(), s = this.startDate && a > this.startDate, n = this.endDate && a < this.endDate, i = this.startDate && e > this.startDate, r = this.endDate && e < this.endDate, c = !t && this.startDate && s && (!this.endDate || n), h = t && this.startDate && i && r;
+    const { start: e, end: a } = this.hoverRange, t = this.isFocusedOnStart(), s = this.startDate && a > this.startDate, i = this.endDate && a < this.endDate, n = this.startDate && e > this.startDate, r = this.endDate && e < this.endDate, c = !t && this.startDate && s && (!this.endDate || i), h = t && this.startDate && n && r;
     return c || h;
   }
   isRangeHover(e) {
     if (!this.hoverRange)
       return !1;
-    const { start: a, end: t } = this.hoverRange, s = this.isFocusedOnStart(), n = this.isHoverInRange(), i = e > a && e < this.startDate, r = e < t && e > this.endDate, c = e > t && e < this.endDate, h = e < a && e > this.startDate, g = e < t && e > this.startDate, d = e > a && e < this.endDate, l = this.startDate && this.endDate;
-    if (n) {
+    const { start: a, end: t } = this.hoverRange, s = this.isFocusedOnStart(), i = this.isHoverInRange(), n = e > a && e < this.startDate, r = e < t && e > this.endDate, c = e > t && e < this.endDate, h = e < a && e > this.startDate, g = e < t && e > this.startDate, d = e > a && e < this.endDate, l = this.startDate && this.endDate;
+    if (i) {
       if (l)
-        return s ? e < this.endDate && (h || i) : c || r;
+        return s ? e < this.endDate && (h || n) : c || r;
       if (this.startDate && !this.endDate)
-        return s ? i : g;
+        return s ? n : g;
       if (!this.startDate && this.endDate)
         return s ? d : r;
     } else if (l)
-      return s ? i : r;
+      return s ? n : r;
   }
   getDays(e, a, t, s = "start") {
-    let n = this.activeDate.getMonth();
-    const i = n + 1;
-    n = s === "end" ? i : n;
+    let i = this.activeDate.getMonth();
+    const n = i + 1;
+    i = s === "end" ? n : i;
     let r = 0;
     const c = () => r++ % 7, h = this.activeDate.getFullYear();
     return [
@@ -227,10 +225,10 @@ class z extends I {
         active: !1,
         day: d,
         dayInWeek: c(),
-        date: new Date(h, n - 1, d)
+        date: new Date(h, i - 1, d)
       })),
       ...a.map((d) => {
-        const l = new Date(h, n, d), p = o(l, /* @__PURE__ */ new Date());
+        const l = new Date(h, i, d), p = o(l, /* @__PURE__ */ new Date());
         return {
           active: this.focusedDate && this.focusedDate !== this.startDate && this.focusedDate !== this.endDate ? o(l, this.focusedDate) : o(l, this.startDate) || o(l, this.endDate),
           currentMonth: !0,
@@ -245,7 +243,7 @@ class z extends I {
         active: !1,
         day: d,
         dayInWeek: c(),
-        date: new Date(h, i, d)
+        date: new Date(h, n, d)
       }))
     ];
   }
@@ -262,7 +260,7 @@ class z extends I {
   // #endregion
   // #region Rendering
   render() {
-    const e = this.activeDate.getMonth(), a = this.activeDate.getFullYear(), t = this.localeData.weekStart % 7, { abbreviated: s, short: n, narrow: i } = this.localeData.days, r = this.scale === "s" ? i || n || s : n || s || i, c = [...r.slice(t, 7), ...r.slice(0, t)], h = this.getCurrentMonthDays(e, a), g = this.getPreviousMonthDays(e, a, t), d = this.getNextMonthDays(e, a, t), l = e + 1, p = this.getPreviousMonthDays(l, a, t), w = this.getCurrentMonthDays(l, a), b = this.getNextMonthDays(l, a, t), $ = this.getDays(g, h, d), x = this.getDays(p, w, b, "end");
+    const e = this.activeDate.getMonth(), a = this.activeDate.getFullYear(), t = this.localeData.weekStart % 7, { abbreviated: s, short: i, narrow: n } = this.localeData.days, r = this.scale === "s" ? n || i || s : i || s || n, c = [...r.slice(t, 7), ...r.slice(0, t)], h = this.getCurrentMonthDays(e, a), g = this.getPreviousMonthDays(e, a, t), d = this.getNextMonthDays(e, a, t), l = e + 1, p = this.getPreviousMonthDays(l, a, t), w = this.getCurrentMonthDays(l, a), b = this.getNextMonthDays(l, a, t), $ = this.getDays(g, h, d), x = this.getDays(p, w, b, "end");
     return f`<div class=${u({ [D.calendarContainer]: !0 })} role=grid>${this.renderCalendar(c, $)}${this.range && this.renderCalendar(c, x, !0) || ""}</div>`;
   }
   /**
@@ -283,14 +281,14 @@ class z extends I {
    * @param key
    * @param active.currentDay
    */
-  renderDateDay({ active: e, currentMonth: a, currentDay: t, date: s, day: n, dayInWeek: i, ref: r }, c) {
+  renderDateDay({ active: e, currentMonth: a, currentDay: t, date: s, day: i, dayInWeek: n, ref: r }, c) {
     const h = M(s, this.min, this.max);
     return H(c, f`<div class=${u({ [D.dayContainer]: !0 })} role=gridcell><calcite-date-picker-day .active=${e} class=${u({
       [D.currentDay]: t,
       [D.insideRangeHover]: this.isHoverInRange(),
       [D.outsideRangeHover]: !this.isHoverInRange(),
       [D.noncurrent]: this.range && !a
-    })} .currentMonth=${a} .dateTimeFormat=${this.dateTimeFormat} .day=${n} .disabled=${!h} .endOfRange=${this.isEndOfRange(s)} .highlighted=${this.betweenSelectedRange(s)} @calciteInternalDayHover=${this.dayHover} @calciteInternalDaySelect=${this.daySelect} .range=${!!this.startDate && !!this.endDate && !o(this.startDate, this.endDate)} .rangeEdge=${i === 0 ? "start" : i === 6 ? "end" : void 0} .rangeHover=${h && this.isRangeHover(s)} .scale=${this.scale} .selected=${this.isSelected(s)} .startOfRange=${this.isStartOfRange(s)} .value=${s} ${A((g) => {
+    })} .currentMonth=${a} .dateTimeFormat=${this.dateTimeFormat} .day=${i} .disabled=${!h} .endOfRange=${this.isEndOfRange(s)} .highlighted=${this.betweenSelectedRange(s)} @calciteInternalDayHover=${this.dayHover} @calciteInternalDaySelect=${this.daySelect} .range=${!!this.startDate && !!this.endDate && !o(this.startDate, this.endDate)} .rangeEdge=${n === 0 ? "start" : n === 6 ? "end" : void 0} .rangeHover=${h && this.isRangeHover(s)} .scale=${this.scale} .selected=${this.isSelected(s)} .startOfRange=${this.isStartOfRange(s)} .value=${s} ${A((g) => {
       r && e && this.activeFocus && g?.setFocus();
     })}></calcite-date-picker-day></div>`);
   }
@@ -301,7 +299,7 @@ class z extends I {
     })}><calcite-date-picker-month-header .activeDate=${t ? C(this.activeDate) : this.activeDate} data-test-calendar=${t ? "end" : "start"} .headingLevel=${this.headingLevel} .localeData=${this.localeData} .max=${this.max} .messages=${this.messages} .min=${this.min} .monthStyle=${this.monthStyle} @calciteInternalDatePickerMonthHeaderSelectChange=${this.monthHeaderSelectChange} .position=${t ? "end" : this.range ? "start" : null} .scale=${this.scale} .selectedDate=${this.selectedDate}></calcite-date-picker-month-header>${this.renderMonthCalendar(e, a, t)}</div>`;
   }
   renderMonthCalendar(e, a, t = !1) {
-    return f`<div class=${u({ [D.month]: !0 })} @keydown=${this.keyDownHandler}><div class=${u({ [D.weekHeaderContainer]: !0 })} role=row>${e.map((n) => f`<span class=${u({ [D.weekHeader]: !0 })} role=columnheader>${n}</span>`)}</div><div class=${u({ [D.weekDays]: !0 })} role=row>${a.map((n, i) => this.renderDateDay(n, t ? 50 + i : i))}</div></div>`;
+    return f`<div class=${u({ [D.month]: !0 })} @keydown=${this.keyDownHandler}><div class=${u({ [D.weekHeaderContainer]: !0 })} role=row>${e.map((i) => f`<span class=${u({ [D.weekHeader]: !0 })} role=columnheader>${i}</span>`)}</div><div class=${u({ [D.weekDays]: !0 })} role=row>${a.map((i, n) => this.renderDateDay(i, t ? 50 + n : n))}</div></div>`;
   }
 }
 R("calcite-date-picker-month", z);

package/dist/components/calcite-date-picker-month-header/customElement.js

@@ -1,25 +1,21 @@
-import { c as C } from "../../chunks/runtime.js";
-import { live as $ } from "lit-html/directives/live.js";
-import { f as Y, g as z, h as S } from "../../chunks/global.js";
+import { c as $ } from "../../chunks/runtime.js";
+import { live as C } from "lit-html/directives/live.js";
+import { e as z, f as Y, g as S } from "../../chunks/global.js";
 import { html as o, nothing as w } from "lit";
-import { createRef as v, ref as m } from "lit-html/directives/ref.js";
+import { createRef as u, ref as f } from "lit-html/directives/ref.js";
 import { LitElement as P, createEvent as I, safeClassMap as r } from "@arcgis/lumina";
-import { b as h, n as u, p as x, g as A, h as E, j as y, i as b, k as f, l as O } from "../../chunks/date.js";
-import { k as F, A as R } from "../../chunks/dom.js";
-import { i as k } from "../../chunks/key.js";
-import { n as p } from "../../chunks/locale.js";
-import { css as W } from "@lit/reactive-element/css-tag.js";
-/*!
- * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v3.0.0-next.98
-*/
-const L = W`:host{display:block;--calcite-select-internal-border-width: 0;--calcite-select-internal-icon-border-inline-end-width: 0;--calcite-internal-select-font-weight: var(--calcite-font-weight-medium);--calcite-select-text-color: var(--calcite-color-text-1)}.header{display:flex;block-size:100%;align-items:center;justify-content:space-between}.chevron-container{display:flex;align-items:center}:host([scale=s]){block-size:24px;margin:var(--calcite-spacing-xs);margin-inline-start:var(--calcite-spacing-sm)}:host([scale=s]) .chevron-container,:host([scale=s]) .chevron{min-inline-size:24px;block-size:24px}:host([scale=m]){block-size:32px;margin:var(--calcite-spacing-sm);margin-inline-start:var(--calcite-spacing-sm-plus)}:host([scale=m]) .chevron-container,:host([scale=m]) .chevron{min-inline-size:32px;block-size:32px;--calcite-internal-action-padding-block: var(--calcite-spacing-xxs)}:host([scale=l]){block-size:44px;margin:var(--calcite-spacing-xs);margin-inline-start:var(--calcite-spacing-sm)}:host([scale=l]) .chevron-container,:host([scale=l]) .chevron{min-inline-size:44px;block-size:44px;--calcite-internal-action-padding-block: var(--calcite-spacing-sm-plus)}.chevron{box-sizing:content-box;display:flex;block-size:100%;inline-size:100%;flex-grow:0;cursor:pointer;align-items:center;justify-content:center;border-style:none;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-3);outline:2px solid transparent;outline-offset:2px;outline-color:transparent;transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;--calcite-internal-action-padding-block: 0}.chevron:focus{outline:2px solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(-2px*(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.chevron:hover,.chevron:focus{background-color:var(--calcite-color-foreground-2);fill:var(--calcite-color-text-1);color:var(--calcite-color-text-1)}.chevron:active{background-color:var(--calcite-color-foreground-3)}.chevron[aria-disabled=true]{pointer-events:none}.month-year-container{display:flex;block-size:100%;inline-size:100%;flex:1 1 auto;align-items:center;justify-content:flex-start;text-align:center;line-height:1;gap:var(--calcite-spacing-xxs)}.month-year-container.range-calendar{justify-content:center}.year-container{position:relative;display:flex;block-size:100%}.suffix{display:flex;align-items:center}.year,.suffix{background-color:var(--calcite-color-foreground-1);margin-inline:var(--calcite-spacing-xxs);font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-1);font-size:var(--calcite-font-size-md);line-height:var(--calcite-font-line-height-fixed-lg)}.year{position:relative;display:inline-block;border-style:none;background-color:transparent;text-align:center;font-family:inherit;outline-color:transparent;inline-size:44px}.year:hover{transition-duration:.1s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-property:outline-color;outline:2px solid var(--calcite-color-border-2);outline-offset:-2px}.year:focus{outline:2px solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(-2px*(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.month-select{--calcite-select-spacing-inline: var(--calcite-spacing-xxs);--calcite-internal-select-spacing-block: var(--calcite-spacing-xxs);--calcite-internal-select-icon-container-padding-inline: var(--calcite-spacing-xxs);--calcite-select-font-size: var(--calcite-font-size-md);--calcite-select-line-height: var(--calcite-font-line-height-fixed-lg)}:host([scale=s]) .month-year-container .month-select{--calcite-select-spacing-inline: var(--calcite-spacing-base);--calcite-internal-select-spacing-block: var(--calcite-spacing-base);--calcite-internal-select-icon-container-padding-inline: var(--calcite-spacing-base);--calcite-internal-select-block-size: 24px;--calcite-select-font-size: var(--calcite-font-size);--calcite-select-line-height: var(--calcite-font-line-height-fixed-base)}:host([scale=s]) .month-year-container .year{inline-size:40px}:host([scale=s]) .month-year-container .year,:host([scale=s]) .month-year-container .suffix{font-size:var(--calcite-font-size);line-height:var(--calcite-font-line-height-fixed-base)}:host([scale=l]) .month-year-container .month-select{--calcite-select-spacing-inline: var(--calcite-spacing-sm);--calcite-internal-select-spacing-block: var(--calcite-spacing-sm);--calcite-internal-select-icon-container-padding-inline: var(--calcite-spacing-sm);--calcite-internal-select-block-size: 44px;--calcite-select-font-size: var(--calcite-font-size-lg);--calcite-select-line-height: var(--calcite-font-line-height-fixed-xl)}:host([scale=l]) .month-year-container .year{inline-size:48px}:host([scale=l]) .month-year-container .year,:host([scale=l]) .month-year-container .suffix{font-size:var(--calcite-font-size-lg);line-height:var(--calcite-font-line-height-fixed-xl)}:host([hidden]){display:none}[hidden]{display:none}`, s = {
+import { b as h, n as x, p as k, g as A, h as E, j as y, i as g, k as p, l as O } from "../../chunks/date.js";
+import { k as F, A as W } from "../../chunks/dom.js";
+import { i as b } from "../../chunks/key.js";
+import { n as m } from "../../chunks/locale.js";
+import { css as R } from "@lit/reactive-element/css-tag.js";
+/*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
+v3.0.0 */
+const N = R`:host{display:block}.header{display:flex;block-size:100%;align-items:center;justify-content:space-between}.chevron-container{display:flex;align-items:center}:host([scale=s]){block-size:24px;margin:var(--calcite-spacing-xs);margin-inline-start:var(--calcite-spacing-sm)}:host([scale=s]) .chevron-container,:host([scale=s]) .chevron{min-inline-size:24px;block-size:24px}:host([scale=m]){block-size:32px;margin:var(--calcite-spacing-sm);margin-inline-start:var(--calcite-spacing-sm-plus)}:host([scale=m]) .chevron-container,:host([scale=m]) .chevron{min-inline-size:32px;block-size:32px;--calcite-internal-action-padding-block: var(--calcite-spacing-xxs)}:host([scale=l]){block-size:44px;margin:var(--calcite-spacing-xs);margin-inline-start:var(--calcite-spacing-sm)}:host([scale=l]) .chevron-container,:host([scale=l]) .chevron{min-inline-size:44px;block-size:44px;--calcite-internal-action-padding-block: var(--calcite-spacing-sm-plus)}.chevron{box-sizing:content-box;display:flex;block-size:100%;inline-size:100%;flex-grow:0;cursor:pointer;align-items:center;justify-content:center;border-style:none;outline-color:transparent;transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;--calcite-internal-action-padding-block: 0;--calcite-action-background-color: var(--calcite-date-picker-header-action-background-color);--calcite-action-background-color-hover: var(--calcite-date-picker-header-action-background-color-hover);--calcite-action-background-color-press: var(--calcite-date-picker-header-action-background-color-press);--calcite-action-text-color: var(--calcite-date-picker-header-action-text-color);--calcite-action-text-color-press: var(--calcite-date-picker-header-action-text-color-press)}.chevron:focus{outline:2px solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(-2px*(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.chevron[aria-disabled=true]{pointer-events:none}.month-year-container{display:flex;block-size:100%;inline-size:100%;flex:1 1 auto;align-items:center;justify-content:flex-start;text-align:center;line-height:1;gap:var(--calcite-spacing-xxs)}.month-year-container.range-calendar{justify-content:center}.year-container{position:relative;display:flex;block-size:100%}.suffix{display:flex;align-items:center}.year,.suffix{margin-inline:var(--calcite-spacing-xxs);font-weight:var(--calcite-font-weight-medium);color:var(--calcite-date-picker-year-text-color, var(--calcite-color-text-1));font-size:var(--calcite-font-size-md);line-height:var(--calcite-font-line-height-fixed-lg)}.year{position:relative;display:inline-block;border-style:none;background-color:transparent;text-align:center;font-family:inherit;outline-color:transparent;inline-size:44px}.year:hover{transition-duration:.1s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-property:outline-color;outline:2px solid var(--calcite-color-border-2);outline-offset:-2px}.year:focus{outline:2px solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(-2px*(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.month-select{--calcite-select-internal-border-width: 0;--calcite-select-internal-icon-border-inline-end-width: 0;--calcite-select-spacing-inline: var(--calcite-spacing-xxs);--calcite-select-font-size: var(--calcite-date-picker-month-select-font-size, var(--calcite-font-size-md));--calcite-select-text-color: var(--calcite-date-picker-month-select-text-color, var(--calcite-color-text-1));--calcite-select-icon-color: var(--calcite-date-picker-month-select-icon-color);--calcite-select-icon-color-hover: var(--calcite-date-picker-month-select-icon-color-hover);--calcite-internal-select-spacing-block: var(--calcite-spacing-xxs);--calcite-internal-select-icon-container-padding-inline: var(--calcite-spacing-xxs);--calcite-internal-select-line-height: var(--calcite-font-line-height-fixed-lg);--calcite-internal-select-font-weight: var(--calcite-font-weight-medium)}:host([scale=s]) .month-year-container .month-select{--calcite-select-spacing-inline: var(--calcite-spacing-base);--calcite-select-font-size: var(--calcite-date-picker-month-select-font-size, var(--calcite-font-size));--calcite-internal-select-spacing-block: var(--calcite-spacing-base);--calcite-internal-select-icon-container-padding-inline: var(--calcite-spacing-base);--calcite-internal-select-block-size: 24px;--calcite-internal-select-line-height: var(--calcite-font-line-height-fixed-base)}:host([scale=s]) .month-year-container .year{inline-size:40px}:host([scale=s]) .month-year-container .year,:host([scale=s]) .month-year-container .suffix{font-size:var(--calcite-font-size);line-height:var(--calcite-font-line-height-fixed-base)}:host([scale=l]) .month-year-container .month-select{--calcite-select-spacing-inline: var(--calcite-spacing-sm);--calcite-select-font-size: var(--calcite-date-picker-month-select-font-size, var(--calcite-font-size-lg));--calcite-internal-select-spacing-block: var(--calcite-spacing-sm);--calcite-internal-select-icon-container-padding-inline: var(--calcite-spacing-sm);--calcite-internal-select-block-size: 44px;--calcite-internal-select-line-height: var(--calcite-font-line-height-fixed-xl)}:host([scale=l]) .month-year-container .year{inline-size:48px}:host([scale=l]) .month-year-container .year,:host([scale=l]) .month-year-container .suffix{font-size:var(--calcite-font-size-lg);line-height:var(--calcite-font-line-height-fixed-xl)}:host([hidden]){display:none}[hidden]{display:none}`, s = {
   header: "header",
   chevron: "chevron",
   chevronContainer: "chevron-container",
-  chevronContainerLeft: "chevron-container--left",
-  chevronContainerRight: "chevron-container--right",
   monthYearContainer: "month-year-container",
   monthPicker: "month-select",
   rangeCalendar: "range-calendar",
@@ -28,16 +24,16 @@ const L = W`:host{display:block;--calcite-select-internal-border-width: 0;--calc
 }, M = {
   chevronLeft: "chevron-left",
   chevronRight: "chevron-right"
-}, N = 16;
+}, L = 16;
 class H extends P {
   constructor() {
-    super(...arguments), this.monthPickerEl = v(), this.yearInputEl = v(), this.calciteInternalDatePickerMonthHeaderSelectChange = I({ cancelable: !1 });
+    super(...arguments), this.monthPickerEl = u(), this.yearInputEl = u(), this.calciteInternalDatePickerMonthHeaderSelectChange = I({ cancelable: !1 });
   }
   static {
     this.properties = { nextMonthDate: 16, prevMonthDate: 16, activeDate: 0, headingLevel: 9, localeData: 0, max: 0, messages: 0, min: 0, monthStyle: 1, position: 1, scale: 3, selectedDate: 0 };
   }
   static {
-    this.styles = L;
+    this.styles = N;
   }
   // #endregion
   // #region Lifecycle
@@ -56,7 +52,7 @@ class H extends P {
   // #endregion
   // #region Private Methods
   setNextPrevMonthDates() {
-    this.activeDate && (this.nextMonthDate = h(u(this.activeDate), this.min, this.max), this.prevMonthDate = h(x(this.activeDate), this.min, this.max));
+    this.activeDate && (this.nextMonthDate = h(x(this.activeDate), this.min, this.max), this.prevMonthDate = h(k(this.activeDate), this.min, this.max));
   }
   /**
    * Increment year on UP/DOWN keys
@@ -75,10 +71,10 @@ class H extends P {
     }
   }
   formatCalendarYear(e) {
-    return p.localize(`${A(e, this.localeData)}`);
+    return m.localize(`${A(e, this.localeData)}`);
   }
   parseCalendarYear(e) {
-    return p.localize(`${E(Number(p.delocalize(e)), this.localeData)}`);
+    return m.localize(`${E(Number(m.delocalize(e)), this.localeData)}`);
   }
   onYearChange(e) {
     this.setYear({
@@ -95,13 +91,13 @@ class H extends P {
     this.handleArrowClick(e, this.prevMonthDate);
   }
   prevMonthKeydown(e) {
-    k(e.key) && this.prevMonthClick(e);
+    b(e.key) && this.prevMonthClick(e);
   }
   nextMonthClick(e) {
     this.handleArrowClick(e, this.nextMonthDate);
   }
   nextMonthKeydown(e) {
-    k(e.key) && this.nextMonthClick(e);
+    b(e.key) && this.nextMonthClick(e);
   }
   async handleArrowClick(e, t) {
     e.preventDefault(), await this.handlePenultimateValidMonth(e), this.calciteInternalDatePickerMonthHeaderSelectChange.emit(t);
@@ -109,13 +105,13 @@ class H extends P {
   handleMonthChange(e) {
     const t = e.target, { abbreviated: i, wide: a } = this.localeData.months, n = (this.monthStyle === "wide" ? a : i).indexOf(t.value);
     let l = y(this.activeDate, n);
-    b(l, this.min, this.max) || (l = h(l, this.min, this.max)), this.calciteInternalDatePickerMonthHeaderSelectChange.emit(l), this.setYearSelectMenuWidth();
+    g(l, this.min, this.max) || (l = h(l, this.min, this.max)), this.calciteInternalDatePickerMonthHeaderSelectChange.emit(l), this.setYearSelectMenuWidth();
   }
   getInRangeDate({ localizedYear: e, offset: t = 0 }) {
-    const { min: i, max: a, activeDate: c } = this, n = Number(p.delocalize(e)), l = n.toString().length, d = isNaN(n) ? !1 : n + t, D = d && (!i || i.getFullYear() <= d) && (!a || a.getFullYear() >= d);
+    const { min: i, max: a, activeDate: c } = this, n = Number(m.delocalize(e)), l = n.toString().length, d = isNaN(n) ? !1 : n + t, D = d && (!i || i.getFullYear() <= d) && (!a || a.getFullYear() >= d);
     if (d && D && l === e.length) {
-      const g = new Date(c);
-      return g.setFullYear(d), h(g, i, a);
+      const v = new Date(c);
+      return v.setFullYear(d), h(v, i, a);
     }
   }
   /**
@@ -132,28 +128,28 @@ class H extends P {
     n && this.calciteInternalDatePickerMonthHeaderSelectChange.emit(n), t && (a.value = this.formatCalendarYear((n || c).getFullYear()));
   }
   setYearSelectWidthOffset() {
-    this.yearSelectWidthOffset = N + 3 * parseInt(this.getYearSelectPadding()), this.setYearSelectMenuWidth();
+    this.yearSelectWidthOffset = L + 3 * parseInt(this.getYearSelectPadding()), this.setYearSelectMenuWidth();
   }
   setYearSelectMenuWidth() {
     const e = this.monthPickerEl.value;
     e && requestAnimationFrame(() => {
-      const t = getComputedStyle(e), i = `${t.fontStyle} ${t.fontVariant} ${t.fontWeight} ${t.fontSize}/${t.lineHeight} ${t.fontFamily}`, c = this.localeData.months[this.monthStyle][this.activeDate.getMonth()], n = Math.ceil(R(c, i));
+      const t = getComputedStyle(e), i = `${t.fontStyle} ${t.fontVariant} ${t.fontWeight} ${t.fontSize}/${t.lineHeight} ${t.fontFamily}`, c = this.localeData.months[this.monthStyle][this.activeDate.getMonth()], n = Math.ceil(W(c, i));
       e.style.width = `${n + this.yearSelectWidthOffset}px`;
     });
   }
   isMonthInRange(e) {
     const t = y(this.activeDate, e);
-    return !this.min && !this.max ? !0 : !!this.max && t < this.max || !!this.min && t > this.min;
+    return !this.min && !this.max || g(t, this.min, this.max) ? !0 : p(t, this.max) || p(t, this.min);
   }
   async handlePenultimateValidMonth(e) {
     const a = e.target.getAttribute("data-direction") === "left";
     let c;
     if (a && this.min) {
-      const n = h(x(this.activeDate), this.min, this.max);
-      c = f(n, this.min);
+      const n = h(k(this.activeDate), this.min, this.max);
+      c = p(n, this.min);
     } else if (this.max) {
-      const n = h(u(this.activeDate), this.min, this.max);
-      c = f(n, this.max);
+      const n = h(x(this.activeDate), this.min, this.max);
+      c = p(n, this.max);
     }
     c && (this.position ? this.yearInputEl.value.focus() : await (a ? this.nextMonthAction.setFocus() : this.prevMonthAction.setFocus()));
   }
@@ -168,10 +164,10 @@ class H extends P {
         e = S;
         break;
       case "s":
-        e = z;
+        e = Y;
         break;
       default:
-        e = Y;
+        e = z;
         break;
     }
     return this.getPx(e);
@@ -187,7 +183,7 @@ class H extends P {
       return null;
     if (this.parentDatePickerEl) {
       const { numberingSystem: c, lang: n } = this.parentDatePickerEl;
-      p.numberFormatOptions = {
+      m.numberFormatOptions = {
         useGrouping: !1,
         ...c && { numberingSystem: c },
         ...n && { locale: n }
@@ -204,20 +200,20 @@ class H extends P {
   }
   renderMonthPicker() {
     const e = this.activeDate.getMonth(), t = this.localeData.months[this.monthStyle];
-    return o`<calcite-select class=${r(s.monthPicker)} .label=${this.messages.monthMenu} @calciteSelectChange=${this.handleMonthChange} width=auto ${m(this.monthPickerEl)}>${t.map((i, a) => o`<calcite-option .disabled=${!this.isMonthInRange(a)} .selected=${a === e} .value=${i}>${i}</calcite-option>`)}</calcite-select>`;
+    return o`<calcite-select class=${r(s.monthPicker)} .label=${this.messages.monthMenu} @calciteSelectChange=${this.handleMonthChange} width=auto ${f(this.monthPickerEl)}>${t.map((i, a) => o`<calcite-option .disabled=${!this.isMonthInRange(a)} .selected=${a === e} .value=${i}>${i}</calcite-option>`)}</calcite-select>`;
   }
   renderYearInput() {
     const e = this.localeData.year?.suffix, t = this.formatCalendarYear(this.activeDate.getFullYear());
     return o`<span class=${r(s.yearContainer)}><input .ariaLabel=${this.messages.year} class=${r({
       year: !0
-    })} inputmode=numeric maxlength=4 minlength=1 @change=${this.onYearChange} @input=${this.onYearInput} @keydown=${this.onYearKey} pattern=\\d* type=text .value=${$(t ?? "")} ${m(this.yearInputEl)}>${e && o`<span class=${r(s.suffix)}>${e}</span>` || ""}</span>`;
+    })} inputmode=numeric maxlength=4 minlength=1 @change=${this.onYearChange} @input=${this.onYearInput} @keydown=${this.onYearKey} pattern=\\d* type=text .value=${C(t ?? "")} ${f(this.yearInputEl)}>${e && o`<span class=${r(s.suffix)}>${e}</span>` || ""}</span>`;
   }
   renderChevron(e) {
-    const t = e === "right", i = f(t ? this.nextMonthDate : this.prevMonthDate, this.activeDate) || !b(this.activeDate, this.min, this.max);
-    return o`<calcite-action alignment=center .ariaDisabled=${i} .ariaLabel=${t ? this.messages.nextMonth : this.messages.prevMonth} class=${r(s.chevron)} compact data-direction=${e ?? w} .disabled=${i} .icon=${t ? M.chevronRight : M.chevronLeft} icon-flip-rtl @click=${t ? this.nextMonthClick : this.prevMonthClick} @keydown=${t ? this.nextMonthKeydown : this.prevMonthKeydown} role=button .scale=${this.scale === "l" ? "l" : "m"} .text=${t ? this.messages.nextMonth : this.messages.prevMonth} ${m((a) => t ? this.nextMonthAction = a : this.prevMonthAction = a)}></calcite-action>`;
+    const t = e === "right", i = p(t ? this.nextMonthDate : this.prevMonthDate, this.activeDate) || !g(this.activeDate, this.min, this.max);
+    return o`<calcite-action alignment=center .ariaDisabled=${i} .ariaLabel=${t ? this.messages.nextMonth : this.messages.prevMonth} class=${r(s.chevron)} compact data-direction=${e ?? w} .disabled=${i} .icon=${t ? M.chevronRight : M.chevronLeft} icon-flip-rtl @click=${t ? this.nextMonthClick : this.prevMonthClick} @keydown=${t ? this.nextMonthKeydown : this.prevMonthKeydown} role=button .scale=${this.scale === "l" ? "l" : "m"} .text=${t ? this.messages.nextMonth : this.messages.prevMonth} ${f((a) => t ? this.nextMonthAction = a : this.prevMonthAction = a)}></calcite-action>`;
   }
 }
-C("calcite-date-picker-month-header", H);
+$("calcite-date-picker-month-header", H);
 export {
   H as DatePickerMonthHeader
 };

package/dist/components/calcite-dialog/customElement.d.ts

@@ -1,17 +1,18 @@
 /// <reference types="../../index.d.ts" />
 import { PropertyValues } from 'lit';
 import { JsxNode, PublicLitElement as LitElement, TargetedEvent } from '@arcgis/lumina';
-import { FocusTrap, FocusTrapComponent } from '../../utils/focusTrapComponent';
 import { LoadableComponent } from '../../utils/loadable';
 import { OpenCloseComponent } from '../../utils/openCloseComponent';
 import { Kind, Scale, Width } from '../interfaces';
 import { HeadingLevel } from '../functional/Heading';
 import { OverlayPositioning } from '../../utils/floating-ui';
+import { FocusTrapOptions } from '../../controllers/useFocusTrap';
 import { DialogPlacement } from './interfaces';
 
 /**
  * @slot - A slot for adding content.
- * @slot content - A slot for adding custom content.
+ * @slot content - [Deprecated] Use `custom-content` slot instead.
+ * @slot custom-content - A slot for displaying custom content. Will prevent the rendering of any default Dialog UI, except for `box-shadow` and `corner-radius`.
  * @slot action-bar - A slot for adding a `calcite-action-bar` to the component.
  * @slot alerts - A slot for adding `calcite-alert`s to the component.
  * @slot content-bottom - A slot for adding content below the unnamed (default) slot and - if populated - the `footer` slot.
@@ -42,6 +43,15 @@ export declare class Dialog extends LitElement {
      * @see [Dialog Accessibility](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog#accessibility).
      */
     escapeDisabled: boolean;
+    /**
+     * Specifies custom focus trap configuration on the component, where
+     *
+     * `"allowOutsideClick`" allows outside clicks,
+     * `"initialFocus"` enables initial focus,
+     * `"returnFocusOnDeactivate"` returns focus when not active, and
+     * `"extraContainers"` specifies additional focusable elements external to the trap (e.g., 3rd-party components appending elements to the document body).
+     */
+    focusTrapOptions: Partial<FocusTrapOptions>;
     /** The component header text. */
     heading: string;
     /** Specifies the heading level of the component's `heading` for proper document structure, without affecting visual styling. */
@@ -70,6 +80,8 @@ export declare class Dialog extends LitElement {
     }>;
     /** When `true`, displays a scrim blocking interaction underneath the component. */
     modal: boolean;
+    /** When `true` and `modal` is `false`, prevents focus trapping. */
+    focusTrapDisabled: boolean;
     /** When `true`, displays and positions the component. */
     get open(): boolean;
     set open(open: boolean);
@@ -116,8 +128,12 @@ export declare class Dialog extends LitElement {
      * @returns {Promise<void>} - A promise that is resolved when the operation has completed.
      */
     setFocus(): Promise<void>;
-    /** Updates the element(s) that are used within the focus-trap of the component. */
-    updateFocusTrapElements(): Promise<void>;
+    /**
+     * Updates the element(s) that are included in the focus-trap of the component.
+     *
+     * @param extraContainers - Additional elements to include in the focus trap. This is useful for including elements that may have related parts rendered outside the main focus trapping element.
+     */
+    updateFocusTrapElements(extraContainers?: FocusTrapOptions["extraContainers"]): Promise<void>;
     /** Fires when the component is requested to be closed and before the closing transition begins. */
     readonly calciteDialogBeforeClose: TargetedEvent<this, undefined>;
     /** Fires when the component is added to the DOM but not rendered, and before the opening transition begins. */