@boostdev/design-system-components 2.8.0 → 2.11.0

package/dist/web-components/{chunk-65JXQOBA.js → chunk-U3YZE6R6.js}

@@ -1,4 +1,5 @@
 import {
+  A,
   T,
   i,
   i2
@@ -8,6 +9,16 @@ import {
 var FOCUSABLE = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
 var BdsDialog = class extends i2 {
   static styles = i`
+    /* Shadow DOM does not inherit the global box-sizing reset, so set it
+       here; otherwise elements with an explicit size + padding size as
+       content-box and layouts drift from the React (light-DOM) versions. */
+    :host,
+    *,
+    *::before,
+    *::after {
+      box-sizing: border-box;
+    }
+
     :host {
       display: contents;
     }
@@ -15,9 +26,11 @@ var BdsDialog = class extends i2 {
     .dialog {
       font-size: var(--bds-font_size--body--s);
       border: var(--dialog_border, none);
-      --bdc_color: var(--dialog_border-color, currentcolor);
+      --bdc_color: currentcolor;
       --bdc-outline_radius: var(--bds-border_radius--m);
 
+      display: flex;
+      flex-direction: column;
       border-radius: var(--dialog_radius, var(--bdc-outline_radius));
       box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--dialog_shadow, var(--bdc-outline_shadow));
       background-color: var(--dialog_color, var(--bds-color_grey--subtle));
@@ -25,10 +38,19 @@ var BdsDialog = class extends i2 {
       padding: var(--bds-space_l);
       max-inline-size: 90svw;
       max-block-size: 90svh;
+
+      /* visible (not hidden) so the close button, offset outside the box via
+         inset-*: -1em, is never clipped; .dialog-content scrolls internally. */
       overflow: visible;
       position: relative;
     }
 
+    /* A native <dialog> is display:none until opened; the flex layout above
+       would otherwise override the UA rule and render the dialog permanently. */
+    .dialog:not([open]) {
+      display: none;
+    }
+
     .dialog-content {
       display: grid;
       gap: var(--bds-grid_gap);
@@ -51,12 +73,26 @@ var BdsDialog = class extends i2 {
       background-color: var(--bds-color_bg);
       color: currentcolor;
       border: var(--dialog_close-border, none);
-      --bdc_color: var(--dialog_close-border-color, currentcolor);
+      --bdc_color: currentcolor;
 
       box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
       cursor: pointer;
     }
 
+    /* Extend the hit area to the 44x44px minimum touch target (WCAG 2.5.5)
+       without growing the visual 2em disc. */
+    .close-button::after {
+      content: '';
+      position: absolute;
+      inset-block: -0.5rem;
+      inset-inline: -0.5rem;
+    }
+
+    .close-button:focus-visible {
+      outline: var(--bds-outline_default);
+      outline-offset: var(--bds-outline_offset);
+    }
+
     .close-button svg {
       inline-size: 1.25em;
       block-size: 1.25em;
@@ -68,12 +104,14 @@ var BdsDialog = class extends i2 {
     }
   `;
   static properties = {
-    open: { type: Boolean, reflect: true }
+    open: { type: Boolean, reflect: true },
+    ariaLabel: { type: String, attribute: "aria-label" }
   };
   _triggerEl = null;
   constructor() {
     super();
     this.open = false;
+    this.ariaLabel = null;
   }
   connectedCallback() {
     super.connectedCallback();
@@ -82,6 +120,10 @@ var BdsDialog = class extends i2 {
   disconnectedCallback() {
     super.disconnectedCallback();
     this.removeEventListener("command", this._onCommand);
+    if (this.open) {
+      document.body.style.overflow = "";
+      this._triggerEl = null;
+    }
   }
   updated(changed) {
     super.updated(changed);
@@ -105,8 +147,8 @@ var BdsDialog = class extends i2 {
   }
   _onCommand = (e) => {
     const command = e.command;
-    if (command === "show-modal") this._openDialog();
-    else if (command === "close") this._closeDialog();
+    if (command === "--show-modal" || command === "show-modal") this._openDialog();
+    else if (command === "--close" || command === "close") this._closeDialog();
   };
   _openDialog() {
     if (this.open) return;
@@ -140,13 +182,14 @@ var BdsDialog = class extends i2 {
     if (all.length === 0) return;
     const first = all[0];
     const last = all[all.length - 1];
+    const active = this.shadowRoot?.activeElement ?? document.activeElement;
     if (e.shiftKey) {
-      if (document.activeElement === first) {
+      if (active === first) {
         e.preventDefault();
         last.focus();
       }
     } else {
-      if (document.activeElement === last) {
+      if (active === last) {
         e.preventDefault();
         first.focus();
       }
@@ -157,6 +200,7 @@ var BdsDialog = class extends i2 {
       <dialog
         class="dialog"
         aria-modal="true"
+        aria-label=${this.ariaLabel ?? A}
         @click=${this._handleBackdropClick}
         @cancel=${this._handleCancel}
         @keydown=${this._handleKeydown}

package/dist/web-components/chunk-UO7ROSHD.js

@@ -0,0 +1,424 @@
+import {
+  A,
+  T,
+  i,
+  i2
+} from "./chunk-LGEZYFUU.js";
+
+// src/web-components/ui/calendar-styles.ts
+var calendarStyles = i`
+  :host, *, *::before, *::after { box-sizing: border-box; }
+
+  :host {
+    display: inline-block;
+    font-family: var(--bds-font_family--body);
+    font-size: var(--bds-font_size--body);
+  }
+  :host([disabled]) { opacity: 0.5; pointer-events: none; }
+
+  .calendar {
+    background-color: var(--bds-color_bg);
+    border: var(--calendar_border, none);
+    --bdc_color: var(--bds-color_bg--subtle);
+    --bdc-outline_radius: var(--bds-border_radius--m);
+    border-radius: var(--calendar_radius, var(--bdc-outline_radius));
+    box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--calendar_shadow, var(--bds-shadow_s));
+    padding: var(--bds-space_s);
+    inline-size: fit-content;
+  }
+
+  .months { display: flex; flex-wrap: wrap; gap: var(--bds-space_l); }
+  .month { display: flex; flex-direction: column; }
+
+  .header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--bds-space_xs);
+    margin-block-end: var(--bds-space_s);
+  }
+  .nav-slot { display: inline-flex; inline-size: 2rem; block-size: 2rem; flex: none; }
+  .month-label { font-weight: var(--bds-font_weight--semibold); color: var(--bds-color_on-bg); }
+
+  .nav-btn {
+    display: inline-flex; align-items: center; justify-content: center;
+    inline-size: 2rem; block-size: 2rem; border: none;
+    border-radius: var(--calendar_button-radius, var(--bds-border_radius--circle));
+    background: none; color: var(--bds-color_on-bg); cursor: pointer;
+    transition: var(--bds-animation_transition);
+  }
+  @media (hover: hover) and (pointer: fine) {
+    .nav-btn:hover { background-color: var(--calendar_navBtn-bg--hover, var(--bds-color_bg--subtle)); }
+  }
+  .nav-btn:focus-visible { outline: var(--bds-outline_default); outline-offset: var(--bds-outline_offset); }
+  .nav-btn svg { inline-size: 1rem; block-size: 1rem; }
+
+  .grid { display: grid; grid-template-columns: repeat(7, 2.25rem); gap: var(--bds-space_xxxs); }
+  .row { display: contents; }
+
+  .weekday {
+    display: flex; align-items: center; justify-content: center; block-size: 2rem;
+    font-size: var(--bds-font_size--body--s); font-weight: var(--bds-font_weight--semibold);
+    color: var(--bds-color_on-bg--subtle); user-select: none;
+  }
+  .cell { display: flex; inline-size: 2.25rem; block-size: 2.25rem; }
+
+  .day {
+    all: unset; box-sizing: border-box; display: flex; align-items: center; justify-content: center;
+    inline-size: 100%; block-size: 100%;
+    border-radius: var(--calendar_button-radius, var(--bds-border_radius--circle));
+    color: var(--bds-color_on-bg); cursor: pointer;
+    font-size: var(--bds-font_size--body--s); font-family: inherit;
+    transition: var(--bds-animation_transition);
+  }
+  .day:focus-visible { outline: var(--bds-outline_default); outline-offset: var(--bds-outline_offset); }
+  @media (hover: hover) and (pointer: fine) {
+    .day:not(.--selected):not(.--range-start):not(.--range-end):not(.--outside):not([disabled]):hover {
+      background-color: var(--calendar_day-bg--hover, var(--bds-color_bg--subtle));
+    }
+  }
+
+  .day.--today {
+    font-weight: var(--bds-font_weight--semibold);
+    --bdc_color: var(--calendar_today-color, var(--bds-color_interactive));
+    border: var(--calendar_today-border, none);
+    box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--calendar_today-shadow, var(--bdc-outline_shadow));
+  }
+  .day.--selected, .day.--range-start, .day.--range-end {
+    background-color: var(--calendar_day-bg--selected, var(--bds-color_interactive));
+    color: var(--calendar_day-color--selected, var(--bds-color_on-interactive));
+    font-weight: var(--bds-font_weight--semibold);
+  }
+  .day.--in-range { background-color: var(--calendar_day-bg--in-range, var(--bds-color_blue--subtle)); border-radius: 0; }
+  .day.--outside { color: var(--bds-color_on-bg--subtle); opacity: 0.4; }
+  .day[disabled] { opacity: 0.3; cursor: not-allowed; }
+
+  @media (prefers-reduced-motion: reduce) {
+    .day, .nav-btn { transition: none; }
+  }
+`;
+
+// src/components/ui/Calendar/calendar-core.ts
+function toISO(date) {
+  const y = date.getFullYear();
+  const m = String(date.getMonth() + 1).padStart(2, "0");
+  const d = String(date.getDate()).padStart(2, "0");
+  return `${y}-${m}-${d}`;
+}
+function parseISO(iso) {
+  const m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(iso);
+  if (!m) return null;
+  const year = Number(m[1]);
+  const month = Number(m[2]) - 1;
+  const day = Number(m[3]);
+  const date = new Date(year, month, day);
+  date.setFullYear(year);
+  if (isNaN(date.getTime())) return null;
+  if (date.getFullYear() !== year || date.getMonth() !== month || date.getDate() !== day) return null;
+  return date;
+}
+function addDays(date, n) {
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate() + n);
+}
+function addMonths(date, n) {
+  const firstOfTarget = new Date(date.getFullYear(), date.getMonth() + n, 1);
+  const daysInTarget = new Date(firstOfTarget.getFullYear(), firstOfTarget.getMonth() + 1, 0).getDate();
+  return new Date(firstOfTarget.getFullYear(), firstOfTarget.getMonth(), Math.min(date.getDate(), daysInTarget));
+}
+function isSameDay(a, b) {
+  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+}
+function compareDay(a, b) {
+  const am = new Date(a.getFullYear(), a.getMonth(), a.getDate()).getTime();
+  const bm = new Date(b.getFullYear(), b.getMonth(), b.getDate()).getTime();
+  return am < bm ? -1 : am > bm ? 1 : 0;
+}
+function sortRange(a, b) {
+  return compareDay(a, b) <= 0 ? [a, b] : [b, a];
+}
+function isInRange(date, start, end) {
+  const [lo, hi] = sortRange(start, end);
+  return compareDay(date, lo) >= 0 && compareDay(date, hi) <= 0;
+}
+function isDisabled(date, opts) {
+  if (opts.min && compareDay(date, opts.min) < 0) return true;
+  if (opts.max && compareDay(date, opts.max) > 0) return true;
+  return !!opts.isDateDisallowed?.(date);
+}
+function buildMonthGrid(year, month, firstDayOfWeek) {
+  const firstOfMonth = new Date(year, month, 1);
+  const lead = (firstOfMonth.getDay() - firstDayOfWeek + 7) % 7;
+  const start = addDays(firstOfMonth, -lead);
+  return Array.from({ length: 42 }, (_, i3) => {
+    const date = addDays(start, i3);
+    return { iso: toISO(date), date, day: date.getDate(), outside: date.getMonth() !== month };
+  });
+}
+function getMonthLabel(year, month, locale) {
+  return new Intl.DateTimeFormat(locale, { month: "long", year: "numeric" }).format(new Date(year, month, 1));
+}
+function getDayLabel(date, locale) {
+  return new Intl.DateTimeFormat(locale, { year: "numeric", month: "long", day: "numeric" }).format(date);
+}
+function getWeekdayNames(locale, firstDayOfWeek) {
+  const fmt = new Intl.DateTimeFormat(locale, { weekday: "short" });
+  return Array.from({ length: 7 }, (_, i3) => fmt.format(new Date(2023, 0, 1 + (firstDayOfWeek + i3) % 7)));
+}
+function nextFocusDate(current, key, opts) {
+  const offsetInWeek = (current.getDay() - opts.firstDayOfWeek + 7) % 7;
+  switch (key) {
+    case "ArrowRight":
+      return addDays(current, 1);
+    case "ArrowLeft":
+      return addDays(current, -1);
+    case "ArrowDown":
+      return addDays(current, 7);
+    case "ArrowUp":
+      return addDays(current, -7);
+    case "Home":
+      return addDays(current, -offsetInWeek);
+    case "End":
+      return addDays(current, 6 - offsetInWeek);
+    case "PageUp":
+      return addMonths(current, opts.shiftKey ? -12 : -1);
+    case "PageDown":
+      return addMonths(current, opts.shiftKey ? 12 : 1);
+    default:
+      return null;
+  }
+}
+
+// src/web-components/ui/bds-calendar.ts
+var BdsCalendar = class extends i2 {
+  static formAssociated = true;
+  static styles = calendarStyles;
+  static properties = {
+    name: { type: String, reflect: true },
+    value: { type: String, reflect: true },
+    min: { type: String },
+    max: { type: String },
+    disabled: { type: Boolean, reflect: true },
+    months: { type: Number, reflect: true },
+    pageBy: { type: String, attribute: "page-by" },
+    firstDayOfWeek: { type: Number, attribute: "first-day-of-week" },
+    locale: { type: String },
+    previousLabel: { type: String, attribute: "previous-label" },
+    nextLabel: { type: String, attribute: "next-label" },
+    isDateDisallowed: { attribute: false },
+    formatWeekday: { attribute: false },
+    formatMonth: { attribute: false },
+    formatDay: { attribute: false }
+  };
+  _internals;
+  _viewYear;
+  _viewMonth;
+  _focusedIso = null;
+  constructor() {
+    super();
+    this._internals = this.attachInternals();
+    this.name = "";
+    this.value = "";
+    this.min = "";
+    this.max = "";
+    this.disabled = false;
+    this.months = 1;
+    this.pageBy = "months";
+    this.firstDayOfWeek = 1;
+    this.locale = "";
+    this.previousLabel = "Previous month";
+    this.nextLabel = "Next month";
+    const now = /* @__PURE__ */ new Date();
+    this._viewYear = now.getFullYear();
+    this._viewMonth = now.getMonth();
+  }
+  willUpdate(changed) {
+    if (changed.has("value") && this.value) {
+      const d = parseISO(this.value);
+      if (d && !this._monthVisible(d)) {
+        this._viewYear = d.getFullYear();
+        this._viewMonth = d.getMonth();
+      }
+    }
+  }
+  updated(changed) {
+    super.updated(changed);
+    if (changed.has("value")) this._internals.setFormValue?.(this.value);
+  }
+  formResetCallback() {
+    this.value = "";
+    this._internals.setFormValue?.("");
+  }
+  formDisabledCallback(disabled) {
+    this.disabled = disabled;
+  }
+  get _localeOrUndefined() {
+    return this.locale || void 0;
+  }
+  get _count() {
+    return Math.max(1, this.months || 1);
+  }
+  _monthVisible(date) {
+    const start = this._viewYear * 12 + this._viewMonth;
+    const idx = date.getFullYear() * 12 + date.getMonth();
+    return idx >= start && idx < start + this._count;
+  }
+  _setView(d) {
+    this._viewYear = d.getFullYear();
+    this._viewMonth = d.getMonth();
+  }
+  _page(dir) {
+    this._focusedIso = null;
+    const step = this.pageBy === "single" ? 1 : this._count;
+    this._setView(new Date(this._viewYear, this._viewMonth + dir * step, 1));
+    this.requestUpdate();
+  }
+  _isDisabledDate(iso) {
+    const date = parseISO(iso);
+    if (!date) return false;
+    return isDisabled(date, {
+      min: parseISO(this.min) ?? void 0,
+      max: parseISO(this.max) ?? void 0,
+      isDateDisallowed: this.isDateDisallowed
+    });
+  }
+  _selectDate(iso) {
+    if (this.disabled || this._isDisabledDate(iso)) return;
+    this.value = iso;
+    this._internals.setFormValue?.(iso);
+    this.dispatchEvent(new CustomEvent("bds-date-select", {
+      detail: { date: iso },
+      bubbles: true,
+      composed: true
+    }));
+  }
+  _handleKeydown = (e) => {
+    if (this.disabled) return;
+    const focused = this.shadowRoot?.activeElement;
+    if (!focused?.dataset.date) return;
+    const current = parseISO(focused.dataset.date);
+    if (!current) return;
+    const next = nextFocusDate(current, e.key, { shiftKey: e.shiftKey, firstDayOfWeek: this.firstDayOfWeek });
+    if (!next) return;
+    e.preventDefault();
+    const iso = toISO(next);
+    this._focusedIso = iso;
+    if (!this._monthVisible(next)) this._setView(next);
+    this.requestUpdate();
+    this.updateComplete.then(() => {
+      this.shadowRoot?.querySelector(`.day:not(.--outside)[data-date="${iso}"]`)?.focus();
+    });
+  };
+  _weekdayNames() {
+    if (this.formatWeekday) {
+      return Array.from({ length: 7 }, (_, i3) => this.formatWeekday(new Date(2023, 0, 1 + (this.firstDayOfWeek + i3) % 7)));
+    }
+    return getWeekdayNames(this._localeOrUndefined, this.firstDayOfWeek);
+  }
+  _monthLabel(year, month) {
+    return this.formatMonth ? this.formatMonth(new Date(year, month, 1)) : getMonthLabel(year, month, this._localeOrUndefined);
+  }
+  _dayLabel(date) {
+    return this.formatDay ? this.formatDay(date) : getDayLabel(date, this._localeOrUndefined);
+  }
+  _tabbableIso() {
+    const today = /* @__PURE__ */ new Date();
+    const selected = parseISO(this.value);
+    if (this._focusedIso) return this._focusedIso;
+    if (selected && this._monthVisible(selected)) return toISO(selected);
+    if (this._monthVisible(today)) return toISO(today);
+    return toISO(new Date(this._viewYear, this._viewMonth, 1));
+  }
+  _renderMonth(index, weekdays, tabbableIso) {
+    const first = new Date(this._viewYear, this._viewMonth + index, 1);
+    const year = first.getFullYear();
+    const month = first.getMonth();
+    const todayIso = toISO(/* @__PURE__ */ new Date());
+    const cells = buildMonthGrid(year, month, this.firstDayOfWeek);
+    const rows = [];
+    for (let i3 = 0; i3 < cells.length; i3 += 7) rows.push(cells.slice(i3, i3 + 7));
+    const label = this._monthLabel(year, month);
+    return T`
+      <div class="month">
+        <div class="header">
+          <span class="nav-slot">
+            ${index === 0 ? T`
+              <button class="nav-btn" type="button" aria-label=${this.previousLabel} ?disabled=${this.disabled} @click=${() => this._page(-1)}>
+                <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
+                </svg>
+              </button>` : null}
+          </span>
+          <span class="month-label" aria-live="polite">${label}</span>
+          <span class="nav-slot">
+            ${index === this._count - 1 ? T`
+              <button class="nav-btn" type="button" aria-label=${this.nextLabel} ?disabled=${this.disabled} @click=${() => this._page(1)}>
+                <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
+                </svg>
+              </button>` : null}
+          </span>
+        </div>
+
+        <div class="grid" role="grid" aria-label=${label}>
+          <div class="row" role="row">
+            ${weekdays.map((d) => T`<div class="weekday" role="columnheader" aria-label=${d}>${d}</div>`)}
+          </div>
+          ${rows.map((week) => T`
+            <div class="row" role="row">
+              ${week.map(({ iso, date, day, outside }) => {
+      const isSelected = !outside && iso === this.value;
+      const isToday = !outside && iso === todayIso;
+      const isDisabled2 = this._isDisabledDate(iso) || this.disabled;
+      const classes = [
+        "day",
+        outside ? "--outside" : "",
+        isSelected ? "--selected" : "",
+        isToday && !isSelected ? "--today" : ""
+      ].filter(Boolean).join(" ");
+      return T`
+                  <div class="cell" role="gridcell" aria-selected=${isSelected ? "true" : "false"}>
+                    <button
+                      class=${classes}
+                      type="button"
+                      data-date=${iso}
+                      aria-label=${this._dayLabel(date)}
+                      ?disabled=${isDisabled2 || outside}
+                      aria-current=${isToday ? "date" : A}
+                      aria-disabled=${isDisabled2 ? "true" : "false"}
+                      tabindex=${!outside && iso === tabbableIso ? "0" : "-1"}
+                      @click=${() => this._selectDate(iso)}
+                    >${day}</button>
+                  </div>`;
+    })}
+            </div>`)}
+        </div>
+      </div>`;
+  }
+  render() {
+    const weekdays = this._weekdayNames();
+    const tabbableIso = this._tabbableIso();
+    return T`
+      <div class="calendar" @keydown=${this._handleKeydown}>
+        <div class="months">
+          ${Array.from({ length: this._count }, (_, i3) => this._renderMonth(i3, weekdays, tabbableIso))}
+        </div>
+      </div>`;
+  }
+};
+customElements.define("bds-calendar", BdsCalendar);
+
+export {
+  calendarStyles,
+  toISO,
+  parseISO,
+  isSameDay,
+  sortRange,
+  isInRange,
+  isDisabled,
+  buildMonthGrid,
+  getMonthLabel,
+  getDayLabel,
+  getWeekdayNames,
+  nextFocusDate,
+  BdsCalendar
+};