@boostdev/design-system-components 2.8.0 → 2.12.0

package/dist/web-components/chunk-X7PS7GSN.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--strong, 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
+};

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

@@ -0,0 +1,54 @@
+import {
+  T,
+  i,
+  i2
+} from "./chunk-LGEZYFUU.js";
+
+// src/web-components/ui/bds-icon-wrapper.ts
+var BdsIconWrapper = 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: inline-flex;
+    }
+
+    /* --icon-wrapper-radius / --icon-wrapper-color (hyphen-delimited) are deprecated
+       aliases for --icon-wrapper_radius / --icon-wrapper_color, kept working for one major. */
+    .wrapper {
+      inline-size: 2em;
+      block-size: 2em;
+      font-size: 3em;
+      border-radius: var(--icon-wrapper_radius, var(--icon-wrapper-radius, var(--bds-border_radius--circle)));
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin: var(--bds-space_l) auto var(--bds-space_m);
+      background: var(--icon-wrapper_color, var(--icon-wrapper-color, var(--bds-color_bg)));
+      color: var(--icon-wrapper_on-color, var(--bds-color_on-bg));
+      fill: currentcolor;
+      position: relative;
+      transition: var(--bds-animation_transition);
+    }
+
+    .wrapper svg {
+      fill: currentcolor;
+    }
+  `;
+  render() {
+    return T`<div class="wrapper"><slot></slot></div>`;
+  }
+};
+customElements.define("bds-icon-wrapper", BdsIconWrapper);
+
+export {
+  BdsIconWrapper
+};

package/dist/web-components/{chunk-ORC56MDY.js → chunk-XIZWAWMJ.js}

@@ -7,7 +7,18 @@ import {
 
 // src/web-components/interaction/bds-button.ts
 var BdsButton = class extends i2 {
+  static formAssociated = true;
   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;
+    }
+
     @keyframes fadeZoom {
       0%, 100% { opacity: 1; transform: scale(1); }
       50%       { opacity: 0.75; transform: scale(1.15); }
@@ -96,7 +107,7 @@ var BdsButton = class extends i2 {
       animation: pulse 3s infinite;
     }
 
-    /* Icon-only: square (1:1), equal xs padding on both axes — composes with
+    /* Icon-only: square (1:1), equal xxs padding on both axes — composes with
        any variant/size. box-sizing: border-box keeps the outer box at
        --button_height; without it, all: unset reverts to content-box and
        padding-block would stretch the button past its declared height.
@@ -113,8 +124,11 @@ var BdsButton = class extends i2 {
       block-size: 100%;
     }
 
-    /* SVG icon colour */
-    .button svg {
+    /* SVG icon colour — icons are slotted (light DOM), so a shadow-tree
+       descendant selector like ".button svg" can never match them; ::slotted()
+       is required to reach content projected through a <slot>. */
+    .icon-start ::slotted(svg),
+    .icon-end ::slotted(svg) {
       --icon__stroke: currentcolor;
       fill: currentcolor;
       color: currentcolor;
@@ -146,10 +160,10 @@ var BdsButton = class extends i2 {
       margin-inline: 0;
     }
 
-    /* Hover icon animation */
+    /* Hover icon animation — same ::slotted() requirement as the colour rule above */
     @media (hover: hover) and (pointer: fine) {
-      .button:hover .icon-start svg,
-      .button:hover .icon-end svg {
+      .button:hover .icon-start ::slotted(svg),
+      .button:hover .icon-end ::slotted(svg) {
         animation: fadeZoom 2s ease-out infinite;
       }
 
@@ -170,6 +184,16 @@ var BdsButton = class extends i2 {
       }
     }
 
+    /* Reduced motion — the pulse ring and hover icon animation both loop
+       indefinitely; disable them for users who opt out of motion. */
+    @media (prefers-reduced-motion: reduce) {
+      .button.has-pulse,
+      .button:hover .icon-start ::slotted(svg),
+      .button:hover .icon-end ::slotted(svg) {
+        animation: none;
+      }
+    }
+
     /* Focus visible */
     .button:focus-visible {
       outline: var(--bds-outline_default);
@@ -199,8 +223,10 @@ var BdsButton = class extends i2 {
     _iconStartFilled: { state: true },
     _iconEndFilled: { state: true }
   };
+  _internals;
   constructor() {
     super();
+    this._internals = this.attachInternals();
     this.variant = "default";
     this.size = "medium";
     this.disabled = false;
@@ -228,6 +254,18 @@ var BdsButton = class extends i2 {
       e.preventDefault();
     }
   }
+  // The shadow-DOM <button> below has no native <form> ancestor of its own
+  // (the light-DOM form, if any, lives outside the shadow tree), so its
+  // type="submit"/"reset" attribute is inert on its own. Drive the real
+  // behaviour through ElementInternals, which resolves the form this
+  // *custom element* participates in.
+  _handleButtonClick() {
+    if (this.type === "submit") {
+      this._internals.form?.requestSubmit();
+    } else if (this.type === "reset") {
+      this._internals.form?.reset();
+    }
+  }
   _iconSlot(position) {
     const filled = position === "start" ? this._iconStartFilled : this._iconEndFilled;
     return T`
@@ -261,6 +299,7 @@ var BdsButton = class extends i2 {
         type=${this.type}
         ?disabled=${this.disabled}
         aria-label=${this.ariaLabel ?? A}
+        @click=${this._handleButtonClick}
       >
         ${this._iconSlot("start")}
         <slot></slot>

package/dist/web-components/{chunk-FXURM6D5.js → chunk-YFAXGRPR.js}

@@ -7,6 +7,16 @@ import {
 // src/web-components/interaction/bds-accordion-item.ts
 var BdsAccordionItem = 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: block;
       border-block-end: 1px solid var(--bds-color_bg--subtle);