@visitwonders/assembly 0.1.0

package/dist/form/calendar.js

@@ -0,0 +1,532 @@
+import "./calendar.css"
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { guidFor } from '@ember/object/internals';
+import { on } from '@ember/modifier';
+import { fn } from '@ember/helper';
+import { not } from 'ember-truth-helpers';
+import { modifier } from 'ember-modifier';
+import { format, endOfMonth, addMonths, isBefore, startOfMonth, isAfter, startOfWeek, endOfWeek, eachDayOfInterval, getDay, isSameDay, isSameMonth, isToday, addWeeks, addDays } from 'date-fns';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+import { g, i } from 'decorator-transforms/runtime';
+
+;
+
+// ============================================================================
+// Main Component
+// ============================================================================
+class Calendar extends Component {
+  static {
+    g(this.prototype, "internalMonth", [tracked], function () {
+      return new Date();
+    });
+  }
+  #internalMonth = (i(this, "internalMonth"), void 0);
+  static {
+    g(this.prototype, "focusedDate", [tracked], function () {
+      return null;
+    });
+  }
+  #focusedDate = (i(this, "focusedDate"), void 0);
+  static {
+    g(this.prototype, "internalValue", [tracked], function () {
+      return null;
+    });
+  }
+  #internalValue = (i(this, "internalValue"), void 0);
+  static {
+    g(this.prototype, "internalMultiValue", [tracked], function () {
+      return [];
+    });
+  }
+  #internalMultiValue = (i(this, "internalMultiValue"), void 0);
+  static {
+    g(this.prototype, "internalRangeValue", [tracked], function () {
+      return null;
+    });
+  }
+  #internalRangeValue = (i(this, "internalRangeValue"), void 0);
+  static {
+    g(this.prototype, "rangeSelectionStart", [tracked], function () {
+      return null;
+    });
+  }
+  #rangeSelectionStart = (i(this, "rangeSelectionStart"), void 0);
+  static {
+    g(this.prototype, "hoveredDate", [tracked], function () {
+      return null;
+    });
+  }
+  #hoveredDate = (i(this, "hoveredDate"), void 0);
+  elementRef = null;
+  // ============================================================================
+  // Computed Properties
+  // ============================================================================
+  get componentId() {
+    return guidFor(this);
+  }
+  get mode() {
+    return this.args.mode ?? 'single';
+  }
+  get weekStartsOn() {
+    return this.args.weekStartsOn ?? 0;
+  }
+  get showOutsideDays() {
+    return this.args.showOutsideDays ?? true;
+  }
+  get showToday() {
+    return this.args.showToday ?? true;
+  }
+  /** Current displayed month (controlled or uncontrolled) */
+  get currentMonth() {
+    if (this.args.month !== undefined) {
+      return this.args.month;
+    }
+    if (this.args.defaultMonth !== undefined && !this.hasInternalMonthChanged) {
+      return this.args.defaultMonth;
+    }
+    return this.internalMonth;
+  }
+  hasInternalMonthChanged = false;
+  hasInternalValueChanged = false;
+  set currentMonth(value) {
+    this.hasInternalMonthChanged = true;
+    this.internalMonth = value;
+    this.args.onMonthChange?.(value);
+  }
+  /** Selected value for single mode (controlled or uncontrolled) */
+  get selectedValue() {
+    if (this.args.value !== undefined) {
+      return this.args.value;
+    }
+    if (this.args.defaultValue !== undefined && !this.hasInternalValueChanged) {
+      return this.args.defaultValue;
+    }
+    return this.internalValue;
+  }
+  /** Selected values for multiple mode */
+  get selectedMultiValue() {
+    if (this.args.multiValue !== undefined) {
+      return this.args.multiValue;
+    }
+    return this.internalMultiValue;
+  }
+  /** Selected range for range mode */
+  get selectedRange() {
+    if (this.args.rangeValue !== undefined) {
+      return this.args.rangeValue;
+    }
+    return this.internalRangeValue;
+  }
+  /** Weekday labels starting from weekStartsOn */
+  get weekdayLabels() {
+    const labels = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
+    const startDay = this.weekStartsOn;
+    return [...labels.slice(startDay), ...labels.slice(0, startDay)];
+  }
+  /** Month and year display text */
+  get monthYearLabel() {
+    return format(this.currentMonth, 'MMMM yyyy');
+  }
+  /** Can navigate to previous month (respects minDate) */
+  get canGoToPreviousMonth() {
+    if (!this.args.minDate) return true;
+    const prevMonthEnd = endOfMonth(addMonths(this.currentMonth, -1));
+    return !isBefore(prevMonthEnd, this.args.minDate);
+  }
+  /** Can navigate to next month (respects maxDate) */
+  get canGoToNextMonth() {
+    if (!this.args.maxDate) return true;
+    const nextMonthStart = startOfMonth(addMonths(this.currentMonth, 1));
+    return !isAfter(nextMonthStart, this.args.maxDate);
+  }
+  /** Generate weeks array for the current month view */
+  get weeks() {
+    const monthStart = startOfMonth(this.currentMonth);
+    const monthEnd = endOfMonth(this.currentMonth);
+    const calendarStart = startOfWeek(monthStart, {
+      weekStartsOn: this.weekStartsOn
+    });
+    const calendarEnd = endOfWeek(monthEnd, {
+      weekStartsOn: this.weekStartsOn
+    });
+    const days = eachDayOfInterval({
+      start: calendarStart,
+      end: calendarEnd
+    });
+    const weeks = [];
+    for (let i = 0; i < days.length; i += 7) {
+      weeks.push(days.slice(i, i + 7));
+    }
+    return weeks;
+  }
+  get tabIndex() {
+    return this.args.isDisabled ? -1 : 0;
+  }
+  get activedescendant() {
+    if (this.focusedDate) {
+      return this.getDayId(this.focusedDate);
+    }
+    return undefined;
+  }
+  // ============================================================================
+  // Day State Methods
+  // ============================================================================
+  getDayId = date => {
+    const dateStr = format(date, 'yyyy-MM-dd');
+    return `${this.componentId}-day-${dateStr}`;
+  };
+  isDateDisabled = date => {
+    if (this.args.isDisabled) return true;
+    // Check min/max bounds
+    if (this.args.minDate && isBefore(date, this.args.minDate)) {
+      return true;
+    }
+    if (this.args.maxDate && isAfter(date, this.args.maxDate)) {
+      return true;
+    }
+    // Check disabled days of week
+    if (this.args.disabledDaysOfWeek?.includes(getDay(date))) {
+      return true;
+    }
+    // Check disabled dates
+    if (this.args.disabledDates) {
+      if (Array.isArray(this.args.disabledDates)) {
+        return this.args.disabledDates.some(d => isSameDay(d, date));
+      }
+      return this.args.disabledDates(date);
+    }
+    return false;
+  };
+  isDateSelected = date => {
+    if (this.mode === 'single') {
+      return this.selectedValue ? isSameDay(date, this.selectedValue) : false;
+    }
+    if (this.mode === 'multiple') {
+      return this.selectedMultiValue.some(d => isSameDay(d, date));
+    }
+    if (this.mode === 'range') {
+      const range = this.selectedRange;
+      if (range) {
+        return isSameDay(date, range.start) || isSameDay(date, range.end);
+      }
+      // Check if it's the start of a pending range selection
+      if (this.rangeSelectionStart) {
+        return isSameDay(date, this.rangeSelectionStart);
+      }
+    }
+    return false;
+  };
+  isDateFocused = date => {
+    return this.focusedDate ? isSameDay(date, this.focusedDate) : false;
+  };
+  isDateOutsideMonth = date => {
+    return !isSameMonth(date, this.currentMonth);
+  };
+  isDateRangeStart = date => {
+    if (this.mode !== 'range') return false;
+    const range = this.selectedRange;
+    if (range) {
+      return isSameDay(date, range.start);
+    }
+    if (this.rangeSelectionStart) {
+      return isSameDay(date, this.rangeSelectionStart);
+    }
+    return false;
+  };
+  isDateRangeEnd = date => {
+    if (this.mode !== 'range') return false;
+    const range = this.selectedRange;
+    return range ? isSameDay(date, range.end) : false;
+  };
+  isDateInRange = date => {
+    if (this.mode !== 'range') return false;
+    // Check confirmed range
+    const range = this.selectedRange;
+    if (range) {
+      return isAfter(date, range.start) && isBefore(date, range.end);
+    }
+    // Check hover preview during range selection
+    if (this.rangeSelectionStart && this.hoveredDate) {
+      const start = this.rangeSelectionStart;
+      const end = this.hoveredDate;
+      if (isBefore(start, end)) {
+        return isAfter(date, start) && isBefore(date, end);
+      } else {
+        return isAfter(date, end) && isBefore(date, start);
+      }
+    }
+    return false;
+  };
+  getDayState = date => {
+    return {
+      date,
+      isToday: this.showToday && isToday(date),
+      isSelected: this.isDateSelected(date),
+      isFocused: this.isDateFocused(date),
+      isDisabled: this.isDateDisabled(date),
+      isOutsideMonth: this.isDateOutsideMonth(date),
+      isRangeStart: this.isDateRangeStart(date),
+      isRangeEnd: this.isDateRangeEnd(date),
+      isInRange: this.isDateInRange(date)
+    };
+  };
+  // ============================================================================
+  // Selection Methods
+  // ============================================================================
+  selectDate = date => {
+    if (this.isDateDisabled(date)) return;
+    if (this.mode === 'single') {
+      this.hasInternalValueChanged = true;
+      this.internalValue = date;
+      this.args.onChange?.(date);
+    } else if (this.mode === 'multiple') {
+      const current = [...this.selectedMultiValue];
+      const index = current.findIndex(d => isSameDay(d, date));
+      if (index >= 0) {
+        // Deselecting - remove from array and clear focus
+        current.splice(index, 1);
+        this.focusedDate = null;
+      } else {
+        current.push(date);
+      }
+      this.internalMultiValue = current;
+      this.args.onMultiChange?.(current);
+    } else if (this.mode === 'range') {
+      if (!this.rangeSelectionStart) {
+        // First click: set range start and clear any existing range
+        this.rangeSelectionStart = date;
+        this.internalRangeValue = null;
+        this.args.onRangeChange?.(null);
+      } else {
+        // Second click: complete range
+        const start = this.rangeSelectionStart;
+        const end = date;
+        const range = isBefore(start, end) ? {
+          start,
+          end
+        } : {
+          start: end,
+          end: start
+        };
+        this.rangeSelectionStart = null;
+        this.hoveredDate = null;
+        this.internalRangeValue = range;
+        this.args.onRangeChange?.(range);
+      }
+    }
+  };
+  // ============================================================================
+  // Navigation Methods
+  // ============================================================================
+  goToPreviousMonth = () => {
+    this.currentMonth = addMonths(this.currentMonth, -1);
+  };
+  goToNextMonth = () => {
+    this.currentMonth = addMonths(this.currentMonth, 1);
+  };
+  setFocusedDate(date) {
+    this.focusedDate = date;
+    // If focused date is outside current month, navigate to that month
+    if (!isSameMonth(date, this.currentMonth)) {
+      this.currentMonth = startOfMonth(date);
+    }
+    // Scroll the focused day into view
+    const dayId = this.getDayId(date);
+    const dayElement = document.getElementById(dayId);
+    dayElement?.scrollIntoView({
+      block: 'nearest'
+    });
+  }
+  moveFocus(direction) {
+    const current = this.focusedDate ?? this.selectedValue ?? new Date();
+    let newDate;
+    switch (direction) {
+      case 'prev':
+        newDate = addDays(current, -1);
+        break;
+      case 'next':
+        newDate = addDays(current, 1);
+        break;
+      case 'up':
+        newDate = addWeeks(current, -1);
+        break;
+      case 'down':
+        newDate = addWeeks(current, 1);
+        break;
+      case 'home':
+        newDate = startOfWeek(current, {
+          weekStartsOn: this.weekStartsOn
+        });
+        break;
+      case 'end':
+        newDate = endOfWeek(current, {
+          weekStartsOn: this.weekStartsOn
+        });
+        break;
+      case 'prevMonth':
+        newDate = addMonths(current, -1);
+        break;
+      case 'nextMonth':
+        newDate = addMonths(current, 1);
+        break;
+    }
+    // Skip disabled dates when navigating (with safety limit)
+    const maxIterations = 365; // Prevent infinite loop
+    let iterations = 0;
+    while (this.isDateDisabled(newDate) && iterations < maxIterations) {
+      // Stop if we've gone beyond min/max bounds
+      if (this.args.minDate && isBefore(newDate, this.args.minDate)) {
+        newDate = current; // Revert to current date
+        break;
+      }
+      if (this.args.maxDate && isAfter(newDate, this.args.maxDate)) {
+        newDate = current; // Revert to current date
+        break;
+      }
+      if (direction === 'prev' || direction === 'up') {
+        newDate = addDays(newDate, -1);
+      } else if (direction === 'next' || direction === 'down') {
+        newDate = addDays(newDate, 1);
+      } else if (direction === 'home') {
+        // For Home, look forward to find enabled date within the week
+        newDate = addDays(newDate, 1);
+      } else if (direction === 'end') {
+        // For End, look backward to find enabled date within the week
+        newDate = addDays(newDate, -1);
+      } else {
+        break;
+      }
+      iterations++;
+    }
+    this.setFocusedDate(newDate);
+  }
+  // ============================================================================
+  // Event Handlers
+  // ============================================================================
+  handleKeyDown = event => {
+    if (this.args.isDisabled) return;
+    switch (event.key) {
+      case 'ArrowLeft':
+        event.preventDefault();
+        this.moveFocus('prev');
+        break;
+      case 'ArrowRight':
+        event.preventDefault();
+        this.moveFocus('next');
+        break;
+      case 'ArrowUp':
+        event.preventDefault();
+        this.moveFocus('up');
+        break;
+      case 'ArrowDown':
+        event.preventDefault();
+        this.moveFocus('down');
+        break;
+      case 'Home':
+        event.preventDefault();
+        this.moveFocus('home');
+        break;
+      case 'End':
+        event.preventDefault();
+        this.moveFocus('end');
+        break;
+      case 'PageUp':
+        event.preventDefault();
+        this.moveFocus('prevMonth');
+        break;
+      case 'PageDown':
+        event.preventDefault();
+        this.moveFocus('nextMonth');
+        break;
+      case 'Enter':
+      case ' ':
+        event.preventDefault();
+        if (this.focusedDate) {
+          this.selectDate(this.focusedDate);
+        }
+        break;
+    }
+  };
+  handleFocus = () => {
+    // Focus selected date, or today, or first of month
+    if (!this.focusedDate) {
+      if (this.selectedValue) {
+        this.focusedDate = this.selectedValue;
+      } else if (this.selectedMultiValue.length > 0) {
+        this.focusedDate = this.selectedMultiValue[0] ?? startOfMonth(this.currentMonth);
+      } else if (this.selectedRange) {
+        this.focusedDate = this.selectedRange.start;
+      } else {
+        const today = new Date();
+        if (isSameMonth(today, this.currentMonth)) {
+          this.focusedDate = today;
+        } else {
+          this.focusedDate = startOfMonth(this.currentMonth);
+        }
+      }
+    }
+  };
+  handleBlur = () => {
+    this.focusedDate = null;
+  };
+  handleDayClick = date => {
+    if (!this.isDateDisabled(date)) {
+      this.focusedDate = date;
+      this.selectDate(date);
+    }
+  };
+  handleDayMouseEnter = date => {
+    if (this.mode === 'range' && this.rangeSelectionStart && !this.isDateDisabled(date)) {
+      this.hoveredDate = date;
+    }
+  };
+  handlePrevMonthClick = event => {
+    event.stopPropagation();
+    if (this.canGoToPreviousMonth) {
+      this.goToPreviousMonth();
+    }
+  };
+  handleNextMonthClick = event => {
+    event.stopPropagation();
+    if (this.canGoToNextMonth) {
+      this.goToNextMonth();
+    }
+  };
+  // ============================================================================
+  // Modifiers
+  // ============================================================================
+  setupRef = modifier(element => {
+    this.elementRef = element;
+    return () => {
+      this.elementRef = null;
+    };
+  });
+  // ============================================================================
+  // Template Helpers
+  // ============================================================================
+  getDayNumber = date => {
+    return date.getDate();
+  };
+  shouldShowDay = date => {
+    if (this.showOutsideDays) return true;
+    return isSameMonth(date, this.currentMonth);
+  };
+  // ============================================================================
+  // Template
+  // ============================================================================
+  static {
+    setComponentTemplate(precompileTemplate("{{!-- template-lint-disable no-positive-tabindex require-aria-activedescendant-tabindex --}}\n<div role=\"grid\" tabindex={{this.tabIndex}} class=\"calendar_e7aa819da\" aria-label=\"Calendar\" aria-activedescendant={{this.activedescendant}} aria-disabled={{if @isDisabled \"true\"}} data-disabled={{if @isDisabled \"true\" \"false\"}} data-mode={{this.mode}} data-test-calendar {{this.setupRef}} {{on \"keydown\" this.handleKeyDown}} {{on \"focus\" this.handleFocus}} {{on \"blur\" this.handleBlur}} ...attributes>\n  {{!-- Header with month navigation --}}\n  <div class=\"calendar-header_e7aa819da\" data-test-calendar-header>\n    <button type=\"button\" class=\"calendar-nav-button_e7aa819da\" aria-label=\"Previous month\" disabled={{not this.canGoToPreviousMonth}} data-test-calendar-prev {{on \"click\" this.handlePrevMonthClick}}>\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n        <path d=\"m15 18-6-6 6-6\" />\n      </svg>\n    </button>\n\n    <div class=\"calendar-title_e7aa819da\" aria-live=\"polite\" data-test-calendar-title>\n      {{this.monthYearLabel}}\n    </div>\n\n    <button type=\"button\" class=\"calendar-nav-button_e7aa819da\" aria-label=\"Next month\" disabled={{not this.canGoToNextMonth}} data-test-calendar-next {{on \"click\" this.handleNextMonthClick}}>\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n        <path d=\"m9 18 6-6-6-6\" />\n      </svg>\n    </button>\n  </div>\n\n  {{!-- Weekday headers --}}\n  <div class=\"calendar-weekdays_e7aa819da\" role=\"row\" data-test-calendar-weekdays>\n    {{#each this.weekdayLabels as |label|}}\n      <div class=\"calendar-weekday_e7aa819da\" role=\"columnheader\">\n        {{label}}\n      </div>\n    {{/each}}\n  </div>\n\n  {{!-- Day grid --}}\n  {{!-- template-lint-disable no-nested-interactive require-valid-alt-text --}}\n  <div class=\"calendar-grid_e7aa819da\" role=\"rowgroup\" data-test-calendar-grid>\n    {{#each this.weeks as |week|}}\n      <div class=\"calendar-week_e7aa819da\" role=\"row\">\n        {{#each week as |day|}}\n          {{#if (this.shouldShowDay day)}}\n            {{#let (this.getDayState day) as |state|}}\n              {{!-- template-lint-disable no-invalid-interactive --}}\n              <div role=\"gridcell\" id={{this.getDayId day}} class=\"calendar-day_e7aa819da\" aria-selected={{if state.isSelected \"true\" \"false\"}} aria-disabled={{if state.isDisabled \"true\"}} aria-current={{if state.isToday \"date\"}} data-today={{if state.isToday \"true\" \"false\"}} data-selected={{if state.isSelected \"true\" \"false\"}} data-focused={{if state.isFocused \"true\" \"false\"}} data-disabled={{if state.isDisabled \"true\" \"false\"}} data-outside={{if state.isOutsideMonth \"true\" \"false\"}} data-range-start={{if state.isRangeStart \"true\" \"false\"}} data-range-end={{if state.isRangeEnd \"true\" \"false\"}} data-in-range={{if state.isInRange \"true\" \"false\"}} data-test-calendar-day data-test-calendar-day-value={{this.getDayId day}} {{on \"click\" (fn this.handleDayClick day)}} {{on \"mouseenter\" (fn this.handleDayMouseEnter day)}}>\n                {{this.getDayNumber day}}\n              </div>\n            {{/let}}\n          {{else}}\n            <div class=\"calendar-day_e7aa819da calendar-day-empty_e7aa819da\" role=\"presentation\"></div>\n          {{/if}}\n        {{/each}}\n      </div>\n    {{/each}}\n  </div>\n</div>", {
+      strictMode: true,
+      scope: () => ({
+        on,
+        not,
+        fn
+      })
+    }), this);
+  }
+}
+
+export { Calendar as default };
+//# sourceMappingURL=calendar.js.map

package/dist/form/calendar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"calendar.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/form/checkbox-group.css

@@ -0,0 +1,47 @@
+/* src/form/checkbox-group.css */
+.fieldset_e634e725a {
+  border: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1-5);
+}
+
+.legend_e634e725a {
+  display: block;
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text);
+  line-height: var(--line-height-normal);
+  margin-bottom: var(--spacing-1-5);
+  padding: 0;
+}
+
+.required_e634e725a {
+  color: var(--color-text-critical);
+  margin-left: var(--spacing-0-5);
+}
+
+.description_e634e725a {
+  margin: 0;
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-normal);
+  color: var(--color-text-secondary);
+  margin-bottom: var(--spacing-1);
+}
+
+.options_e634e725a {
+  display: flex;
+  gap: var(--spacing-4);
+}
+
+.options_e634e725a[data-orientation="vertical"] {
+  flex-direction: column;
+  gap: var(--spacing-3);
+}
+
+.options_e634e725a[data-orientation="horizontal"] {
+  flex-flow: row wrap;
+  gap: var(--spacing-6);
+}

package/dist/form/checkbox-group.js

@@ -0,0 +1,102 @@
+import "./checkbox-group.css"
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { on } from '@ember/modifier';
+import { hash } from '@ember/helper';
+import { guidFor } from '@ember/object/internals';
+import Checkbox from './checkbox.js';
+import ErrorMessage from './error-message.js';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+import { g, i, n } from 'decorator-transforms/runtime';
+
+;
+
+class CheckboxGroup extends Component {
+  static {
+    g(this.prototype, "internalValues", [tracked]);
+  }
+  #internalValues = (i(this, "internalValues"), void 0);
+  constructor(owner, args) {
+    super(owner, args);
+    this.internalValues = [...(args.defaultValue ?? [])];
+  }
+  guid = guidFor(this);
+  get isControlled() {
+    return this.args.value !== undefined;
+  }
+  get selectedValues() {
+    return this.isControlled ? this.args.value ?? [] : this.internalValues;
+  }
+  get orientation() {
+    return this.args.orientation ?? 'vertical';
+  }
+  get size() {
+    return this.args.size ?? 'md';
+  }
+  get errorMessageId() {
+    return `${this.guid}-error`;
+  }
+  get ariaDescribedBy() {
+    if (this.args.isInvalid) {
+      return this.errorMessageId;
+    }
+    return undefined;
+  }
+  isValueSelected = value => {
+    return this.selectedValues.includes(value);
+  };
+  handleCheckboxChange(value, isChecked) {
+    let newValues;
+    if (isChecked) {
+      newValues = [...this.selectedValues, value];
+    } else {
+      newValues = this.selectedValues.filter(v => v !== value);
+    }
+    if (!this.isControlled) {
+      this.internalValues = newValues;
+    }
+    this.args.onChange?.(newValues);
+  }
+  static {
+    n(this.prototype, "handleCheckboxChange", [action]);
+  }
+  static {
+    setComponentTemplate(precompileTemplate("<fieldset class=\"fieldset_e634e725a\" aria-describedby={{this.ariaDescribedBy}} data-test-checkbox-group ...attributes>\n  {{#if @label}}\n    <legend class=\"legend_e634e725a\" data-test-checkbox-group-legend>\n      {{@label}}\n      {{#if @isRequired}}\n        <span class=\"required_e634e725a\">*</span>\n      {{/if}}\n    </legend>\n  {{/if}}\n\n  {{#if @description}}\n    <p class=\"description_e634e725a\" data-test-checkbox-group-description>\n      {{@description}}\n    </p>\n  {{/if}}\n\n  <div class=\"options_e634e725a\" data-orientation={{this.orientation}} data-test-checkbox-group-options>\n    {{yield (hash Checkbox=(component ContextualCheckbox groupName=@name groupDisabled=@isDisabled groupInvalid=@isInvalid groupSize=this.size isValueSelected=this.isValueSelected onCheckboxChange=this.handleCheckboxChange) ErrorMessage=(component ErrorMessage id=this.errorMessageId isInvalid=@isInvalid))}}\n  </div>\n</fieldset>", {
+      strictMode: true,
+      scope: () => ({
+        hash,
+        ContextualCheckbox,
+        ErrorMessage
+      })
+    }), this);
+  }
+}
+class ContextualCheckbox extends Component {
+  get isChecked() {
+    return this.args.isValueSelected(this.args.value);
+  }
+  get isDisabled() {
+    return this.args.isDisabled ?? this.args.groupDisabled ?? false;
+  }
+  handleChange(event) {
+    const target = event.target;
+    this.args.onCheckboxChange(this.args.value, target.checked);
+  }
+  static {
+    n(this.prototype, "handleChange", [action]);
+  }
+  static {
+    setComponentTemplate(precompileTemplate("{{!-- Wrapper captures bubbling change event from checkbox input --}}\n<span {{on \"change\" this.handleChange}} data-test-checkbox-group-item>\n  {{#if (has-block)}}\n    <Checkbox @isChecked={{this.isChecked}} @value={{@value}} @name={{@groupName}} @label={{@label}} @description={{@description}} @isDisabled={{this.isDisabled}} @isInvalid={{@groupInvalid}} @size={{@groupSize}} ...attributes>\n      {{yield}}\n    </Checkbox>\n  {{else}}\n    <Checkbox @isChecked={{this.isChecked}} @value={{@value}} @name={{@groupName}} @label={{@label}} @description={{@description}} @isDisabled={{this.isDisabled}} @isInvalid={{@groupInvalid}} @size={{@groupSize}} ...attributes />\n  {{/if}}\n</span>", {
+      strictMode: true,
+      scope: () => ({
+        on,
+        Checkbox
+      })
+    }), this);
+  }
+}
+
+export { CheckboxGroup as default };
+//# sourceMappingURL=checkbox-group.js.map

package/dist/form/checkbox-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-group.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}