@tessera-ui/core 0.4.0

package/dist/cjs/ts-date-picker.cjs.entry.js

@@ -0,0 +1,229 @@
+'use strict';
+
+var index = require('./index-Bel_x2OU.js');
+var aria = require('./aria-CeYIvz3U.js');
+
+const datePickerCss = () => `:host{display:block;position:relative;font-family:var(--ts-font-family-base);--ts-date-picker-bg:var(--ts-color-neutral-50);--ts-date-picker-radius:var(--ts-radius-md);--ts-date-picker-focus-ring:var(--ts-focus-ring)}.date-picker__label{display:block;margin-block-end:var(--ts-spacing-1);font-size:var(--ts-font-size-sm);font-weight:var(--ts-font-weight-medium);color:var(--ts-color-text-primary)}.date-picker__trigger{display:block;width:100%;border:1px solid var(--ts-color-border-default);border-radius:var(--ts-date-picker-radius);background-color:var(--ts-date-picker-bg);color:var(--ts-color-text-primary);font-family:var(--ts-font-family-base);cursor:pointer;outline:none;transition:border-color var(--ts-transition-fast),     box-shadow var(--ts-transition-fast)}.date-picker__trigger:focus-visible{box-shadow:var(--ts-date-picker-focus-ring);border-color:var(--ts-color-interactive-primary)}:host([size="sm"]) .date-picker__trigger{padding:var(--ts-spacing-1) var(--ts-spacing-2);font-size:var(--ts-font-size-sm)}:host([size="md"]) .date-picker__trigger{padding:var(--ts-spacing-2) var(--ts-spacing-3);font-size:var(--ts-font-size-md)}:host([size="lg"]) .date-picker__trigger{padding:var(--ts-spacing-3) var(--ts-spacing-4);font-size:var(--ts-font-size-lg)}:host([error]) .date-picker__trigger{border-color:var(--ts-color-danger-500)}:host([error]) .date-picker__trigger:focus-visible{box-shadow:0 0 0 3px rgba(239, 68, 68, 0.25)}.date-picker__error{display:block;margin-block-start:var(--ts-spacing-1);font-size:var(--ts-font-size-sm);color:var(--ts-color-danger-500)}:host([disabled]) .date-picker__trigger{opacity:0.5;cursor:not-allowed}.date-picker__calendar{position:absolute;inset-block-start:100%;inset-inline-start:0;z-index:var(--ts-z-dropdown, 100);margin-block-start:var(--ts-spacing-1);padding:var(--ts-spacing-3);background-color:var(--ts-color-bg-elevated);border:1px solid var(--ts-color-border-subtle);border-radius:var(--ts-radius-lg);box-shadow:var(--ts-shadow-lg);min-inline-size:280px;animation:ts-dp-fade-in 150ms ease-out}.date-picker__header{display:flex;align-items:center;justify-content:space-between;margin-block-end:var(--ts-spacing-2)}.date-picker__month-year{font-size:var(--ts-font-size-sm);font-weight:var(--ts-font-weight-semi);color:var(--ts-color-text-primary)}.date-picker__nav-btn{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:none;border-radius:var(--ts-radius-md);background:transparent;color:var(--ts-color-text-secondary);font-size:var(--ts-font-size-lg);cursor:pointer;padding:0;line-height:1;transition:background-color var(--ts-transition-fast),     color var(--ts-transition-fast)}.date-picker__nav-btn:hover{background-color:var(--ts-color-bg-hover);color:var(--ts-color-text-primary)}.date-picker__nav-btn:focus-visible{box-shadow:var(--ts-focus-ring);outline:none}.date-picker__weekdays{display:grid;grid-template-columns:repeat(7, 1fr);gap:0;margin-block-end:var(--ts-spacing-1)}.date-picker__weekday{display:flex;align-items:center;justify-content:center;font-size:var(--ts-font-size-xs);font-weight:var(--ts-font-weight-semi);color:var(--ts-color-text-tertiary);padding:var(--ts-spacing-1) 0}.date-picker__days{display:grid;grid-template-columns:repeat(7, 1fr);gap:1px}.date-picker__day{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;margin:1px auto;border:none;border-radius:var(--ts-radius-full);background:transparent;color:var(--ts-color-text-primary);font-family:var(--ts-font-family-base);font-size:var(--ts-font-size-sm);cursor:pointer;padding:0;transition:background-color var(--ts-transition-fast),     color var(--ts-transition-fast)}.date-picker__day--empty{cursor:default}.date-picker__day:not(.date-picker__day--empty):not(.date-picker__day--disabled):hover{background-color:var(--ts-color-bg-hover)}.date-picker__day:not(.date-picker__day--empty):focus-visible{box-shadow:var(--ts-date-picker-focus-ring);outline:none}.date-picker__day--today{font-weight:var(--ts-font-weight-bold);border:1px solid var(--ts-color-interactive-primary)}.date-picker__day--selected{background-color:var(--ts-color-interactive-primary);color:var(--ts-color-text-on-primary);font-weight:var(--ts-font-weight-semi)}.date-picker__day--selected:hover{background-color:var(--ts-color-interactive-primary-hover)}.date-picker__day--disabled{opacity:0.35;cursor:not-allowed}.date-picker__day--focused{box-shadow:var(--ts-date-picker-focus-ring)}@keyframes ts-dp-fade-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}`;
+
+const WEEKDAYS = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
+const TsDatePicker = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.tsChange = index.createEvent(this, "tsChange");
+    }
+    get hostEl() { return index.getElement(this); }
+    pickerId = aria.generateId('ts-date-picker');
+    triggerEl;
+    /** The selected date value in ISO format (YYYY-MM-DD). */
+    value;
+    /** Placeholder text for the input. */
+    placeholder = 'Select date';
+    /** Whether the date picker is disabled. */
+    disabled = false;
+    /** Minimum selectable date in ISO format. */
+    min;
+    /** Maximum selectable date in ISO format. */
+    max;
+    /** Label text for the input. */
+    label;
+    /** Whether the input is in an error state. */
+    error = false;
+    /** Error message to display. */
+    errorMessage;
+    /** The input size. */
+    size = 'md';
+    /** Form field name. */
+    name;
+    /** Emitted when a date is selected. */
+    tsChange;
+    /** Whether the calendar dropdown is open. */
+    isOpen = false;
+    /** The month currently being viewed (0-11). */
+    viewMonth = new Date().getMonth();
+    /** The year currently being viewed. */
+    viewYear = new Date().getFullYear();
+    /** Currently focused day in the grid for keyboard navigation. */
+    focusedDay = null;
+    handleValueChange() {
+        if (this.value) {
+            const date = new Date(this.value + 'T00:00:00');
+            if (!isNaN(date.getTime())) {
+                this.viewMonth = date.getMonth();
+                this.viewYear = date.getFullYear();
+            }
+        }
+    }
+    connectedCallback() {
+        this.handleValueChange();
+    }
+    toggleCalendar = () => {
+        if (this.disabled)
+            return;
+        this.isOpen = !this.isOpen;
+        if (this.isOpen) {
+            this.handleValueChange();
+        }
+    };
+    closeCalendar = () => {
+        this.isOpen = false;
+        this.focusedDay = null;
+    };
+    prevMonth = () => {
+        if (this.viewMonth === 0) {
+            this.viewMonth = 11;
+            this.viewYear -= 1;
+        }
+        else {
+            this.viewMonth -= 1;
+        }
+    };
+    nextMonth = () => {
+        if (this.viewMonth === 11) {
+            this.viewMonth = 0;
+            this.viewYear += 1;
+        }
+        else {
+            this.viewMonth += 1;
+        }
+    };
+    selectDay = (day) => {
+        const month = String(this.viewMonth + 1).padStart(2, '0');
+        const dayStr = String(day).padStart(2, '0');
+        const newValue = `${this.viewYear}-${month}-${dayStr}`;
+        this.value = newValue;
+        this.tsChange.emit({ value: newValue });
+        this.closeCalendar();
+        this.triggerEl?.focus();
+    };
+    isDayDisabled(day) {
+        const dateStr = `${this.viewYear}-${String(this.viewMonth + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
+        if (this.min && dateStr < this.min)
+            return true;
+        if (this.max && dateStr > this.max)
+            return true;
+        return false;
+    }
+    isToday(day) {
+        const today = new Date();
+        return (day === today.getDate() &&
+            this.viewMonth === today.getMonth() &&
+            this.viewYear === today.getFullYear());
+    }
+    isSelected(day) {
+        if (!this.value)
+            return false;
+        const date = new Date(this.value + 'T00:00:00');
+        return (day === date.getDate() &&
+            this.viewMonth === date.getMonth() &&
+            this.viewYear === date.getFullYear());
+    }
+    getDaysInMonth() {
+        return new Date(this.viewYear, this.viewMonth + 1, 0).getDate();
+    }
+    getFirstDayOfWeek() {
+        return new Date(this.viewYear, this.viewMonth, 1).getDay();
+    }
+    getMonthName() {
+        return new Date(this.viewYear, this.viewMonth).toLocaleString('default', { month: 'long' });
+    }
+    handleTriggerKeydown = (event) => {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this.toggleCalendar();
+        }
+        else if (event.key === 'Escape' && this.isOpen) {
+            this.closeCalendar();
+        }
+    };
+    handleCalendarKeydown = (event) => {
+        const daysInMonth = this.getDaysInMonth();
+        if (event.key === 'Escape') {
+            this.closeCalendar();
+            this.triggerEl?.focus();
+            return;
+        }
+        if (this.focusedDay === null) {
+            this.focusedDay = 1;
+            return;
+        }
+        let newDay = this.focusedDay;
+        switch (event.key) {
+            case 'ArrowRight':
+                event.preventDefault();
+                newDay = Math.min(this.focusedDay + 1, daysInMonth);
+                break;
+            case 'ArrowLeft':
+                event.preventDefault();
+                newDay = Math.max(this.focusedDay - 1, 1);
+                break;
+            case 'ArrowDown':
+                event.preventDefault();
+                newDay = Math.min(this.focusedDay + 7, daysInMonth);
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                newDay = Math.max(this.focusedDay - 7, 1);
+                break;
+            case 'Enter':
+                event.preventDefault();
+                if (!this.isDayDisabled(this.focusedDay)) {
+                    this.selectDay(this.focusedDay);
+                }
+                return;
+            default:
+                return;
+        }
+        this.focusedDay = newDay;
+    };
+    handleDocumentClick = (event) => {
+        const path = event.composedPath();
+        if (!path.includes(this.hostEl)) {
+            this.closeCalendar();
+        }
+    };
+    componentDidLoad() {
+        document.addEventListener('click', this.handleDocumentClick);
+    }
+    disconnectedCallback() {
+        document.removeEventListener('click', this.handleDocumentClick);
+    }
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    renderCalendar() {
+        const daysInMonth = this.getDaysInMonth();
+        const firstDay = this.getFirstDayOfWeek();
+        const days = [];
+        for (let i = 0; i < firstDay; i++) {
+            days.push(null);
+        }
+        for (let d = 1; d <= daysInMonth; d++) {
+            days.push(d);
+        }
+        return (index.h("div", { class: "date-picker__calendar", part: "calendar", role: "dialog", "aria-label": `${this.getMonthName()} ${this.viewYear}`, onKeyDown: this.handleCalendarKeydown }, index.h("div", { class: "date-picker__header", part: "header" }, index.h("button", { class: "date-picker__nav-btn", type: "button", "aria-label": "Previous month", onClick: this.prevMonth }, "\u2039"), index.h("span", { class: "date-picker__month-year" }, this.getMonthName(), " ", this.viewYear), index.h("button", { class: "date-picker__nav-btn", type: "button", "aria-label": "Next month", onClick: this.nextMonth }, "\u203A")), index.h("div", { class: "date-picker__grid", role: "grid", "aria-label": "Calendar" }, index.h("div", { class: "date-picker__weekdays" }, WEEKDAYS.map((wd) => (index.h("span", { class: "date-picker__weekday", role: "columnheader", key: wd }, wd)))), index.h("div", { class: "date-picker__days" }, days.map((day, index$1) => day === null ? (index.h("span", { class: "date-picker__day date-picker__day--empty", key: `empty-${index$1}` })) : (index.h("button", { class: {
+                'date-picker__day': true,
+                'date-picker__day--today': this.isToday(day),
+                'date-picker__day--selected': this.isSelected(day),
+                'date-picker__day--disabled': this.isDayDisabled(day),
+                'date-picker__day--focused': this.focusedDay === day,
+            }, part: "day", type: "button", disabled: this.isDayDisabled(day), tabindex: this.focusedDay === day ? 0 : -1, "aria-label": `${day} ${this.getMonthName()} ${this.viewYear}`, "aria-selected": this.isSelected(day) ? 'true' : undefined, key: `day-${day}`, onClick: () => this.selectDay(day) }, day)))))));
+    }
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    render() {
+        return (index.h(index.Host, { key: '50137a4ae337d96c546d842875d4d22a710a6473', class: {
+                'ts-date-picker': true,
+                'ts-date-picker--open': this.isOpen,
+                'ts-date-picker--error': this.error,
+                [`ts-date-picker--${this.size}`]: true,
+            } }, this.label && (index.h("label", { key: '475c187da383d04c078f0870ae67010183983574', class: "date-picker__label", part: "label", htmlFor: this.pickerId }, this.label)), index.h("input", { key: '74f792fb4db7930dbacbf310162d89a2224480ad', ref: (el) => (this.triggerEl = el), class: "date-picker__trigger", part: "trigger", type: "text", id: this.pickerId, name: this.name, value: this.value || '', placeholder: this.placeholder, disabled: this.disabled, readOnly: true, "aria-haspopup": "dialog", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-invalid": this.error ? 'true' : undefined, onClick: this.toggleCalendar, onKeyDown: this.handleTriggerKeydown }), this.isOpen && this.renderCalendar(), this.error && this.errorMessage && (index.h("span", { key: '8b807115f167df573ff6a48d6790da72e2e82197', class: "date-picker__error", part: "error", role: "alert" }, this.errorMessage))));
+    }
+    static get watchers() { return {
+        "value": [{
+                "handleValueChange": 0
+            }]
+    }; }
+};
+TsDatePicker.style = datePickerCss();
+
+exports.ts_date_picker = TsDatePicker;
+//# sourceMappingURL=ts-date-picker.entry.cjs.js.map
+
+//# sourceMappingURL=ts-date-picker.cjs.entry.js.map

package/dist/cjs/ts-date-picker.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"ts-date-picker.cjs.entry.js","mappings":"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","names":["generateId","h","index","Host"],"sources":["src/components/date-picker/date-picker.css?tag=ts-date-picker&encapsulation=shadow","src/components/date-picker/date-picker.tsx"],"sourcesContent":["/* ==========================================================================\n   ts-date-picker — Shadow DOM Scoped Styles\n\n   Component tokens (Tier 3):\n     --ts-date-picker-bg          Input/calendar background\n     --ts-date-picker-radius      Border radius\n     --ts-date-picker-focus-ring  Focus ring box-shadow\n   ========================================================================== */\n\n:host {\n  display: block;\n  position: relative;\n  font-family: var(--ts-font-family-base);\n\n  --ts-date-picker-bg: var(--ts-color-neutral-50);\n  --ts-date-picker-radius: var(--ts-radius-md);\n  --ts-date-picker-focus-ring: var(--ts-focus-ring);\n}\n\n/* ---- Label ---- */\n.date-picker__label {\n  display: block;\n  margin-block-end: var(--ts-spacing-1);\n  font-size: var(--ts-font-size-sm);\n  font-weight: var(--ts-font-weight-medium);\n  color: var(--ts-color-text-primary);\n}\n\n/* ---- Trigger Input ---- */\n.date-picker__trigger {\n  display: block;\n  width: 100%;\n  border: 1px solid var(--ts-color-border-default);\n  border-radius: var(--ts-date-picker-radius);\n  background-color: var(--ts-date-picker-bg);\n  color: var(--ts-color-text-primary);\n  font-family: var(--ts-font-family-base);\n  cursor: pointer;\n  outline: none;\n  transition:\n    border-color var(--ts-transition-fast),\n    box-shadow var(--ts-transition-fast);\n}\n\n.date-picker__trigger:focus-visible {\n  box-shadow: var(--ts-date-picker-focus-ring);\n  border-color: var(--ts-color-interactive-primary);\n}\n\n/* ---- Sizes ---- */\n:host([size=\"sm\"]) .date-picker__trigger {\n  padding: var(--ts-spacing-1) var(--ts-spacing-2);\n  font-size: var(--ts-font-size-sm);\n}\n\n:host([size=\"md\"]) .date-picker__trigger {\n  padding: var(--ts-spacing-2) var(--ts-spacing-3);\n  font-size: var(--ts-font-size-md);\n}\n\n:host([size=\"lg\"]) .date-picker__trigger {\n  padding: var(--ts-spacing-3) var(--ts-spacing-4);\n  font-size: var(--ts-font-size-lg);\n}\n\n/* ---- Error state ---- */\n:host([error]) .date-picker__trigger {\n  border-color: var(--ts-color-danger-500);\n}\n\n:host([error]) .date-picker__trigger:focus-visible {\n  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25);\n}\n\n.date-picker__error {\n  display: block;\n  margin-block-start: var(--ts-spacing-1);\n  font-size: var(--ts-font-size-sm);\n  color: var(--ts-color-danger-500);\n}\n\n/* ---- Disabled ---- */\n:host([disabled]) .date-picker__trigger {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n/* ---- Calendar Dropdown ---- */\n.date-picker__calendar {\n  position: absolute;\n  inset-block-start: 100%;\n  inset-inline-start: 0;\n  z-index: var(--ts-z-dropdown, 100);\n  margin-block-start: var(--ts-spacing-1);\n  padding: var(--ts-spacing-3);\n  background-color: var(--ts-color-bg-elevated);\n  border: 1px solid var(--ts-color-border-subtle);\n  border-radius: var(--ts-radius-lg);\n  box-shadow: var(--ts-shadow-lg);\n  min-inline-size: 280px;\n  animation: ts-dp-fade-in 150ms ease-out;\n}\n\n/* ---- Header ---- */\n.date-picker__header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-block-end: var(--ts-spacing-2);\n}\n\n.date-picker__month-year {\n  font-size: var(--ts-font-size-sm);\n  font-weight: var(--ts-font-weight-semi);\n  color: var(--ts-color-text-primary);\n}\n\n.date-picker__nav-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 2rem;\n  height: 2rem;\n  border: none;\n  border-radius: var(--ts-radius-md);\n  background: transparent;\n  color: var(--ts-color-text-secondary);\n  font-size: var(--ts-font-size-lg);\n  cursor: pointer;\n  padding: 0;\n  line-height: 1;\n  transition:\n    background-color var(--ts-transition-fast),\n    color var(--ts-transition-fast);\n}\n\n.date-picker__nav-btn:hover {\n  background-color: var(--ts-color-bg-hover);\n  color: var(--ts-color-text-primary);\n}\n\n.date-picker__nav-btn:focus-visible {\n  box-shadow: var(--ts-focus-ring);\n  outline: none;\n}\n\n/* ---- Grid ---- */\n.date-picker__weekdays {\n  display: grid;\n  grid-template-columns: repeat(7, 1fr);\n  gap: 0;\n  margin-block-end: var(--ts-spacing-1);\n}\n\n.date-picker__weekday {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: var(--ts-font-size-xs);\n  font-weight: var(--ts-font-weight-semi);\n  color: var(--ts-color-text-tertiary);\n  padding: var(--ts-spacing-1) 0;\n}\n\n.date-picker__days {\n  display: grid;\n  grid-template-columns: repeat(7, 1fr);\n  gap: 1px;\n}\n\n/* ---- Day cells ---- */\n.date-picker__day {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 2rem;\n  height: 2rem;\n  margin: 1px auto;\n  border: none;\n  border-radius: var(--ts-radius-full);\n  background: transparent;\n  color: var(--ts-color-text-primary);\n  font-family: var(--ts-font-family-base);\n  font-size: var(--ts-font-size-sm);\n  cursor: pointer;\n  padding: 0;\n  transition:\n    background-color var(--ts-transition-fast),\n    color var(--ts-transition-fast);\n}\n\n.date-picker__day--empty {\n  cursor: default;\n}\n\n.date-picker__day:not(.date-picker__day--empty):not(.date-picker__day--disabled):hover {\n  background-color: var(--ts-color-bg-hover);\n}\n\n.date-picker__day:not(.date-picker__day--empty):focus-visible {\n  box-shadow: var(--ts-date-picker-focus-ring);\n  outline: none;\n}\n\n.date-picker__day--today {\n  font-weight: var(--ts-font-weight-bold);\n  border: 1px solid var(--ts-color-interactive-primary);\n}\n\n.date-picker__day--selected {\n  background-color: var(--ts-color-interactive-primary);\n  color: var(--ts-color-text-on-primary);\n  font-weight: var(--ts-font-weight-semi);\n}\n\n.date-picker__day--selected:hover {\n  background-color: var(--ts-color-interactive-primary-hover);\n}\n\n.date-picker__day--disabled {\n  opacity: 0.35;\n  cursor: not-allowed;\n}\n\n.date-picker__day--focused {\n  box-shadow: var(--ts-date-picker-focus-ring);\n}\n\n/* ---- Animation ---- */\n@keyframes ts-dp-fade-in {\n  from { opacity: 0; transform: translateY(-4px); }\n  to   { opacity: 1; transform: translateY(0); }\n}\n","import { Component, Prop, State, Event, h, Host, Element, Watch } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\nimport { generateId } from '../../utils/aria';\n\nconst WEEKDAYS = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];\n\n/**\n * @part trigger - The input trigger element.\n * @part calendar - The calendar dropdown container.\n * @part header - The month/year navigation header.\n * @part grid - The day grid.\n * @part day - Individual day cell.\n * @part label - The label element.\n * @part error - The error message.\n */\n@Component({\n  tag: 'ts-date-picker',\n  styleUrl: 'date-picker.css',\n  shadow: true,\n})\nexport class TsDatePicker {\n  @Element() hostEl!: HTMLElement;\n\n  private pickerId = generateId('ts-date-picker');\n  private triggerEl?: HTMLInputElement;\n\n  /** The selected date value in ISO format (YYYY-MM-DD). */\n  @Prop({ mutable: true, reflect: true }) value?: string;\n\n  /** Placeholder text for the input. */\n  @Prop() placeholder = 'Select date';\n\n  /** Whether the date picker is disabled. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Minimum selectable date in ISO format. */\n  @Prop() min?: string;\n\n  /** Maximum selectable date in ISO format. */\n  @Prop() max?: string;\n\n  /** Label text for the input. */\n  @Prop() label?: string;\n\n  /** Whether the input is in an error state. */\n  @Prop({ reflect: true }) error = false;\n\n  /** Error message to display. */\n  @Prop() errorMessage?: string;\n\n  /** The input size. */\n  @Prop({ reflect: true }) size: 'sm' | 'md' | 'lg' = 'md';\n\n  /** Form field name. */\n  @Prop() name?: string;\n\n  /** Emitted when a date is selected. */\n  @Event({ eventName: 'tsChange' }) tsChange!: EventEmitter<{ value: string }>;\n\n  /** Whether the calendar dropdown is open. */\n  @State() isOpen = false;\n\n  /** The month currently being viewed (0-11). */\n  @State() viewMonth = new Date().getMonth();\n\n  /** The year currently being viewed. */\n  @State() viewYear = new Date().getFullYear();\n\n  /** Currently focused day in the grid for keyboard navigation. */\n  @State() focusedDay: number | null = null;\n\n  @Watch('value')\n  handleValueChange(): void {\n    if (this.value) {\n      const date = new Date(this.value + 'T00:00:00');\n      if (!isNaN(date.getTime())) {\n        this.viewMonth = date.getMonth();\n        this.viewYear = date.getFullYear();\n      }\n    }\n  }\n\n  connectedCallback(): void {\n    this.handleValueChange();\n  }\n\n  private toggleCalendar = (): void => {\n    if (this.disabled) return;\n    this.isOpen = !this.isOpen;\n    if (this.isOpen) {\n      this.handleValueChange();\n    }\n  };\n\n  private closeCalendar = (): void => {\n    this.isOpen = false;\n    this.focusedDay = null;\n  };\n\n  private prevMonth = (): void => {\n    if (this.viewMonth === 0) {\n      this.viewMonth = 11;\n      this.viewYear -= 1;\n    } else {\n      this.viewMonth -= 1;\n    }\n  };\n\n  private nextMonth = (): void => {\n    if (this.viewMonth === 11) {\n      this.viewMonth = 0;\n      this.viewYear += 1;\n    } else {\n      this.viewMonth += 1;\n    }\n  };\n\n  private selectDay = (day: number): void => {\n    const month = String(this.viewMonth + 1).padStart(2, '0');\n    const dayStr = String(day).padStart(2, '0');\n    const newValue = `${this.viewYear}-${month}-${dayStr}`;\n    this.value = newValue;\n    this.tsChange.emit({ value: newValue });\n    this.closeCalendar();\n    this.triggerEl?.focus();\n  };\n\n  private isDayDisabled(day: number): boolean {\n    const dateStr = `${this.viewYear}-${String(this.viewMonth + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;\n    if (this.min && dateStr < this.min) return true;\n    if (this.max && dateStr > this.max) return true;\n    return false;\n  }\n\n  private isToday(day: number): boolean {\n    const today = new Date();\n    return (\n      day === today.getDate() &&\n      this.viewMonth === today.getMonth() &&\n      this.viewYear === today.getFullYear()\n    );\n  }\n\n  private isSelected(day: number): boolean {\n    if (!this.value) return false;\n    const date = new Date(this.value + 'T00:00:00');\n    return (\n      day === date.getDate() &&\n      this.viewMonth === date.getMonth() &&\n      this.viewYear === date.getFullYear()\n    );\n  }\n\n  private getDaysInMonth(): number {\n    return new Date(this.viewYear, this.viewMonth + 1, 0).getDate();\n  }\n\n  private getFirstDayOfWeek(): number {\n    return new Date(this.viewYear, this.viewMonth, 1).getDay();\n  }\n\n  private getMonthName(): string {\n    return new Date(this.viewYear, this.viewMonth).toLocaleString('default', { month: 'long' });\n  }\n\n  private handleTriggerKeydown = (event: KeyboardEvent): void => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.toggleCalendar();\n    } else if (event.key === 'Escape' && this.isOpen) {\n      this.closeCalendar();\n    }\n  };\n\n  private handleCalendarKeydown = (event: KeyboardEvent): void => {\n    const daysInMonth = this.getDaysInMonth();\n\n    if (event.key === 'Escape') {\n      this.closeCalendar();\n      this.triggerEl?.focus();\n      return;\n    }\n\n    if (this.focusedDay === null) {\n      this.focusedDay = 1;\n      return;\n    }\n\n    let newDay = this.focusedDay;\n\n    switch (event.key) {\n      case 'ArrowRight':\n        event.preventDefault();\n        newDay = Math.min(this.focusedDay + 1, daysInMonth);\n        break;\n      case 'ArrowLeft':\n        event.preventDefault();\n        newDay = Math.max(this.focusedDay - 1, 1);\n        break;\n      case 'ArrowDown':\n        event.preventDefault();\n        newDay = Math.min(this.focusedDay + 7, daysInMonth);\n        break;\n      case 'ArrowUp':\n        event.preventDefault();\n        newDay = Math.max(this.focusedDay - 7, 1);\n        break;\n      case 'Enter':\n        event.preventDefault();\n        if (!this.isDayDisabled(this.focusedDay)) {\n          this.selectDay(this.focusedDay);\n        }\n        return;\n      default:\n        return;\n    }\n\n    this.focusedDay = newDay;\n  };\n\n  private handleDocumentClick = (event: MouseEvent): void => {\n    const path = event.composedPath();\n    if (!path.includes(this.hostEl)) {\n      this.closeCalendar();\n    }\n  };\n\n  componentDidLoad(): void {\n    document.addEventListener('click', this.handleDocumentClick);\n  }\n\n  disconnectedCallback(): void {\n    document.removeEventListener('click', this.handleDocumentClick);\n  }\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  private renderCalendar() {\n    const daysInMonth = this.getDaysInMonth();\n    const firstDay = this.getFirstDayOfWeek();\n    const days: (number | null)[] = [];\n\n    for (let i = 0; i < firstDay; i++) {\n      days.push(null);\n    }\n    for (let d = 1; d <= daysInMonth; d++) {\n      days.push(d);\n    }\n\n    return (\n      <div\n        class=\"date-picker__calendar\"\n        part=\"calendar\"\n        role=\"dialog\"\n        aria-label={`${this.getMonthName()} ${this.viewYear}`}\n        onKeyDown={this.handleCalendarKeydown}\n      >\n        <div class=\"date-picker__header\" part=\"header\">\n          <button\n            class=\"date-picker__nav-btn\"\n            type=\"button\"\n            aria-label=\"Previous month\"\n            onClick={this.prevMonth}\n          >\n            &#x2039;\n          </button>\n          <span class=\"date-picker__month-year\">\n            {this.getMonthName()} {this.viewYear}\n          </span>\n          <button\n            class=\"date-picker__nav-btn\"\n            type=\"button\"\n            aria-label=\"Next month\"\n            onClick={this.nextMonth}\n          >\n            &#x203A;\n          </button>\n        </div>\n\n        <div class=\"date-picker__grid\" role=\"grid\" aria-label=\"Calendar\">\n          <div class=\"date-picker__weekdays\">\n            {WEEKDAYS.map((wd) => (\n              <span class=\"date-picker__weekday\" role=\"columnheader\" key={wd}>\n                {wd}\n              </span>\n            ))}\n          </div>\n          <div class=\"date-picker__days\">\n            {days.map((day, index) =>\n              day === null ? (\n                <span class=\"date-picker__day date-picker__day--empty\" key={`empty-${index}`} />\n              ) : (\n                <button\n                  class={{\n                    'date-picker__day': true,\n                    'date-picker__day--today': this.isToday(day),\n                    'date-picker__day--selected': this.isSelected(day),\n                    'date-picker__day--disabled': this.isDayDisabled(day),\n                    'date-picker__day--focused': this.focusedDay === day,\n                  }}\n                  part=\"day\"\n                  type=\"button\"\n                  disabled={this.isDayDisabled(day)}\n                  tabindex={this.focusedDay === day ? 0 : -1}\n                  aria-label={`${day} ${this.getMonthName()} ${this.viewYear}`}\n                  aria-selected={this.isSelected(day) ? 'true' : undefined}\n                  key={`day-${day}`}\n                  onClick={() => this.selectDay(day)}\n                >\n                  {day}\n                </button>\n              ),\n            )}\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    return (\n      <Host\n        class={{\n          'ts-date-picker': true,\n          'ts-date-picker--open': this.isOpen,\n          'ts-date-picker--error': this.error,\n          [`ts-date-picker--${this.size}`]: true,\n        }}\n      >\n        {this.label && (\n          <label class=\"date-picker__label\" part=\"label\" htmlFor={this.pickerId}>\n            {this.label}\n          </label>\n        )}\n\n        <input\n          ref={(el) => (this.triggerEl = el)}\n          class=\"date-picker__trigger\"\n          part=\"trigger\"\n          type=\"text\"\n          id={this.pickerId}\n          name={this.name}\n          value={this.value || ''}\n          placeholder={this.placeholder}\n          disabled={this.disabled}\n          readOnly\n          aria-haspopup=\"dialog\"\n          aria-expanded={this.isOpen ? 'true' : 'false'}\n          aria-invalid={this.error ? 'true' : undefined}\n          onClick={this.toggleCalendar}\n          onKeyDown={this.handleTriggerKeydown}\n        />\n\n        {this.isOpen && this.renderCalendar()}\n\n        {this.error && this.errorMessage && (\n          <span class=\"date-picker__error\" part=\"error\" role=\"alert\">\n            {this.errorMessage}\n          </span>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/ts-dialog.cjs.entry.js

@@ -0,0 +1,109 @@
+'use strict';
+
+var index = require('./index-Bel_x2OU.js');
+var aria = require('./aria-CeYIvz3U.js');
+
+const dialogCss = () => `:host{font-family:var(--ts-font-family-base);--ts-dialog-bg:var(--ts-color-bg-elevated);--ts-dialog-radius:var(--ts-shape-overlay);--ts-dialog-shadow:var(--ts-shadow-xl);--ts-dialog-overlay-bg:var(--ts-color-bg-overlay)}.dialog__overlay{position:fixed;inset:0;z-index:var(--ts-z-modal);display:flex;align-items:center;justify-content:center;padding:var(--ts-spacing-4);background-color:var(--ts-dialog-overlay-bg);animation:ts-dialog-fade-in 200ms ease-out}.dialog__panel{position:relative;background-color:var(--ts-dialog-bg);border-radius:var(--ts-dialog-radius);box-shadow:var(--ts-dialog-shadow);max-height:calc(100vh - var(--ts-spacing-16));overflow-y:auto;animation:ts-dialog-scale-in 250ms cubic-bezier(0.16, 1, 0.3, 1);outline:none}.dialog__panel--sm{width:100%;max-width:400px}.dialog__panel--md{width:100%;max-width:520px}.dialog__panel--lg{width:100%;max-width:680px}.dialog__close{position:absolute;inset-block-start:var(--ts-spacing-3);inset-inline-end:var(--ts-spacing-3);display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:none;border-radius:var(--ts-radius-md);background:transparent;color:var(--ts-color-text-tertiary);font-size:var(--ts-font-size-md);cursor:pointer;transition:background-color var(--ts-transition-fast),     color var(--ts-transition-fast);z-index:1;padding:0;line-height:1}.dialog__close:hover{background-color:var(--ts-color-bg-hover);color:var(--ts-color-text-secondary)}.dialog__close:focus-visible{box-shadow:var(--ts-focus-ring)}.dialog__header{padding:var(--ts-spacing-5) var(--ts-spacing-6) var(--ts-spacing-3);font-size:var(--ts-font-size-lg);font-weight:var(--ts-font-weight-semi);color:var(--ts-color-text-primary);padding-inline-end:var(--ts-spacing-10)}.dialog__body{padding:var(--ts-spacing-3) var(--ts-spacing-6);font-size:var(--ts-font-size-md);color:var(--ts-color-text-secondary);line-height:var(--ts-line-height-normal)}.dialog__footer{padding:var(--ts-spacing-3) var(--ts-spacing-6) var(--ts-spacing-5);display:flex;align-items:center;justify-content:flex-end;gap:var(--ts-spacing-2)}.dialog__footer:empty{display:none}@keyframes ts-dialog-fade-in{from{opacity:0}to{opacity:1}}@keyframes ts-dialog-scale-in{from{opacity:0;transform:scale(0.95) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}`;
+
+const TsDialog = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.tsClose = index.createEvent(this, "tsClose");
+    }
+    get hostEl() { return index.getElement(this); }
+    dialogEl;
+    removeFocusTrap;
+    previouslyFocused;
+    dialogId = aria.generateId('ts-dialog');
+    /** Whether the dialog is open. */
+    open = false;
+    /** The dialog heading text. */
+    heading;
+    /** The dialog's width size preset. */
+    size = 'sm';
+    /** Whether the dialog can be dismissed via close button, Escape, or overlay click. */
+    dismissible = true;
+    /** Emitted when the dialog is closed. */
+    tsClose;
+    /** Internal animation state. */
+    isAnimating = false;
+    handleOpenChange(isOpen) {
+        if (isOpen) {
+            this.openDialog();
+        }
+        else {
+            this.closeDialog();
+        }
+    }
+    /** Programmatically open the dialog. */
+    async show() {
+        this.open = true;
+    }
+    /** Programmatically close the dialog. */
+    async close() {
+        this.open = false;
+    }
+    openDialog() {
+        this.previouslyFocused = document.activeElement;
+        this.isAnimating = true;
+        document.body.style.overflow = 'hidden';
+        requestAnimationFrame(() => {
+            if (this.dialogEl) {
+                this.removeFocusTrap = aria.trapFocus(this.dialogEl);
+                this.dialogEl.focus();
+            }
+        });
+    }
+    closeDialog() {
+        this.isAnimating = false;
+        this.tsClose.emit();
+        document.body.style.overflow = '';
+        this.removeFocusTrap?.();
+        this.previouslyFocused?.focus();
+    }
+    disconnectedCallback() {
+        this.removeFocusTrap?.();
+        document.body.style.overflow = '';
+    }
+    handleOverlayClick = () => {
+        if (this.dismissible) {
+            this.close();
+        }
+    };
+    handleDialogClick = (event) => {
+        event.stopPropagation();
+    };
+    handleKeydown = (event) => {
+        if (event.key === 'Escape' && this.dismissible) {
+            event.stopPropagation();
+            this.close();
+        }
+    };
+    handleCloseClick = () => {
+        this.close();
+    };
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    render() {
+        if (!this.open)
+            return null;
+        const headingId = `${this.dialogId}-heading`;
+        return (index.h(index.Host, { class: {
+                'ts-dialog': true,
+                'ts-dialog--open': this.open,
+            }, onKeyDown: this.handleKeydown }, index.h("div", { class: "dialog__overlay", part: "overlay", onClick: this.handleOverlayClick }, index.h("div", { ref: (el) => (this.dialogEl = el), class: {
+                'dialog__panel': true,
+                [`dialog__panel--${this.size}`]: true,
+            }, part: "dialog", role: "dialog", "aria-modal": "true", "aria-labelledby": this.heading ? headingId : undefined, tabindex: -1, onClick: this.handleDialogClick }, this.dismissible && (index.h("button", { class: "dialog__close", part: "close", type: "button", "aria-label": "Close dialog", onClick: this.handleCloseClick }, "\u2715")), this.heading && (index.h("div", { class: "dialog__header", part: "header", id: headingId }, this.heading)), index.h("div", { class: "dialog__body", part: "body" }, index.h("slot", null)), index.h("div", { class: "dialog__footer", part: "footer" }, index.h("slot", { name: "footer" }))))));
+    }
+    static get watchers() { return {
+        "open": [{
+                "handleOpenChange": 0
+            }]
+    }; }
+};
+TsDialog.style = dialogCss();
+
+exports.ts_dialog = TsDialog;
+//# sourceMappingURL=ts-dialog.entry.cjs.js.map
+
+//# sourceMappingURL=ts-dialog.cjs.entry.js.map

package/dist/cjs/ts-dialog.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"ts-dialog.cjs.entry.js","mappings":"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","names":["generateId","trapFocus","h","Host"],"sources":["src/components/dialog/dialog.css?tag=ts-dialog&encapsulation=shadow","src/components/dialog/dialog.tsx"],"sourcesContent":["/* ==========================================================================\n   ts-dialog — Shadow DOM Scoped Styles\n\n   Component tokens (Tier 3):\n     --ts-dialog-bg          Dialog background\n     --ts-dialog-radius      Dialog border radius\n     --ts-dialog-shadow      Dialog box-shadow\n     --ts-dialog-overlay-bg  Overlay background\n   ========================================================================== */\n\n:host {\n  font-family: var(--ts-font-family-base);\n\n  --ts-dialog-bg: var(--ts-color-bg-elevated);\n  --ts-dialog-radius: var(--ts-shape-overlay);\n  --ts-dialog-shadow: var(--ts-shadow-xl);\n  --ts-dialog-overlay-bg: var(--ts-color-bg-overlay);\n}\n\n/* ---- Overlay ---- */\n.dialog__overlay {\n  position: fixed;\n  inset: 0;\n  z-index: var(--ts-z-modal);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--ts-spacing-4);\n  background-color: var(--ts-dialog-overlay-bg);\n  animation: ts-dialog-fade-in 200ms ease-out;\n}\n\n/* ---- Panel ---- */\n.dialog__panel {\n  position: relative;\n  background-color: var(--ts-dialog-bg);\n  border-radius: var(--ts-dialog-radius);\n  box-shadow: var(--ts-dialog-shadow);\n  max-height: calc(100vh - var(--ts-spacing-16));\n  overflow-y: auto;\n  animation: ts-dialog-scale-in 250ms cubic-bezier(0.16, 1, 0.3, 1);\n  outline: none;\n}\n\n/* ---- Sizes ---- */\n.dialog__panel--sm { width: 100%; max-width: 400px; }\n.dialog__panel--md { width: 100%; max-width: 520px; }\n.dialog__panel--lg { width: 100%; max-width: 680px; }\n\n/* ---- Close Button ---- */\n.dialog__close {\n  position: absolute;\n  inset-block-start: var(--ts-spacing-3);\n  inset-inline-end: var(--ts-spacing-3);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 2rem;\n  height: 2rem;\n  border: none;\n  border-radius: var(--ts-radius-md);\n  background: transparent;\n  color: var(--ts-color-text-tertiary);\n  font-size: var(--ts-font-size-md);\n  cursor: pointer;\n  transition:\n    background-color var(--ts-transition-fast),\n    color var(--ts-transition-fast);\n  z-index: 1;\n  padding: 0;\n  line-height: 1;\n}\n\n.dialog__close:hover {\n  background-color: var(--ts-color-bg-hover);\n  color: var(--ts-color-text-secondary);\n}\n\n.dialog__close:focus-visible {\n  box-shadow: var(--ts-focus-ring);\n}\n\n/* ---- Header ---- */\n.dialog__header {\n  padding: var(--ts-spacing-5) var(--ts-spacing-6) var(--ts-spacing-3);\n  font-size: var(--ts-font-size-lg);\n  font-weight: var(--ts-font-weight-semi);\n  color: var(--ts-color-text-primary);\n  padding-inline-end: var(--ts-spacing-10);\n}\n\n/* ---- Body ---- */\n.dialog__body {\n  padding: var(--ts-spacing-3) var(--ts-spacing-6);\n  font-size: var(--ts-font-size-md);\n  color: var(--ts-color-text-secondary);\n  line-height: var(--ts-line-height-normal);\n}\n\n/* ---- Footer ---- */\n.dialog__footer {\n  padding: var(--ts-spacing-3) var(--ts-spacing-6) var(--ts-spacing-5);\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: var(--ts-spacing-2);\n}\n\n.dialog__footer:empty {\n  display: none;\n}\n\n/* ---- Animations ---- */\n@keyframes ts-dialog-fade-in {\n  from { opacity: 0; }\n  to   { opacity: 1; }\n}\n\n@keyframes ts-dialog-scale-in {\n  from {\n    opacity: 0;\n    transform: scale(0.95) translateY(8px);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1) translateY(0);\n  }\n}\n","import { Component, Prop, State, Event, h, Host, Element, Watch, Method } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\nimport { generateId, trapFocus } from '../../utils/aria';\n\n/**\n * @slot - Default slot for dialog body content.\n * @slot footer - Footer content (e.g., action buttons).\n *\n * @part overlay - The backdrop overlay.\n * @part dialog - The dialog container.\n * @part header - The heading wrapper.\n * @part body - The body content wrapper.\n * @part footer - The footer wrapper.\n * @part close - The close button.\n */\n@Component({\n  tag: 'ts-dialog',\n  styleUrl: 'dialog.css',\n  shadow: true,\n})\nexport class TsDialog {\n  @Element() hostEl!: HTMLElement;\n\n  private dialogEl?: HTMLElement;\n  private removeFocusTrap?: () => void;\n  private previouslyFocused?: HTMLElement;\n  private dialogId = generateId('ts-dialog');\n\n  /** Whether the dialog is open. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /** The dialog heading text. */\n  @Prop() heading?: string;\n\n  /** The dialog's width size preset. */\n  @Prop({ reflect: true }) size: 'sm' | 'md' | 'lg' = 'sm';\n\n  /** Whether the dialog can be dismissed via close button, Escape, or overlay click. */\n  @Prop() dismissible = true;\n\n  /** Emitted when the dialog is closed. */\n  @Event({ eventName: 'tsClose' }) tsClose!: EventEmitter<void>;\n\n  /** Internal animation state. */\n  @State() isAnimating = false;\n\n  @Watch('open')\n  handleOpenChange(isOpen: boolean): void {\n    if (isOpen) {\n      this.openDialog();\n    } else {\n      this.closeDialog();\n    }\n  }\n\n  /** Programmatically open the dialog. */\n  @Method()\n  async show(): Promise<void> {\n    this.open = true;\n  }\n\n  /** Programmatically close the dialog. */\n  @Method()\n  async close(): Promise<void> {\n    this.open = false;\n  }\n\n  private openDialog(): void {\n    this.previouslyFocused = document.activeElement as HTMLElement;\n    this.isAnimating = true;\n\n    document.body.style.overflow = 'hidden';\n\n    requestAnimationFrame(() => {\n      if (this.dialogEl) {\n        this.removeFocusTrap = trapFocus(this.dialogEl);\n        this.dialogEl.focus();\n      }\n    });\n  }\n\n  private closeDialog(): void {\n    this.isAnimating = false;\n    this.tsClose.emit();\n\n    document.body.style.overflow = '';\n\n    this.removeFocusTrap?.();\n    this.previouslyFocused?.focus();\n  }\n\n  disconnectedCallback(): void {\n    this.removeFocusTrap?.();\n    document.body.style.overflow = '';\n  }\n\n  private handleOverlayClick = (): void => {\n    if (this.dismissible) {\n      this.close();\n    }\n  };\n\n  private handleDialogClick = (event: MouseEvent): void => {\n    event.stopPropagation();\n  };\n\n  private handleKeydown = (event: KeyboardEvent): void => {\n    if (event.key === 'Escape' && this.dismissible) {\n      event.stopPropagation();\n      this.close();\n    }\n  };\n\n  private handleCloseClick = (): void => {\n    this.close();\n  };\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    if (!this.open) return null;\n\n    const headingId = `${this.dialogId}-heading`;\n\n    return (\n      <Host\n        class={{\n          'ts-dialog': true,\n          'ts-dialog--open': this.open,\n        }}\n        onKeyDown={this.handleKeydown}\n      >\n        <div class=\"dialog__overlay\" part=\"overlay\" onClick={this.handleOverlayClick}>\n          <div\n            ref={(el) => (this.dialogEl = el)}\n            class={{\n              'dialog__panel': true,\n              [`dialog__panel--${this.size}`]: true,\n            }}\n            part=\"dialog\"\n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-labelledby={this.heading ? headingId : undefined}\n            tabindex={-1}\n            onClick={this.handleDialogClick}\n          >\n            {this.dismissible && (\n              <button\n                class=\"dialog__close\"\n                part=\"close\"\n                type=\"button\"\n                aria-label=\"Close dialog\"\n                onClick={this.handleCloseClick}\n              >\n                &#x2715;\n              </button>\n            )}\n\n            {this.heading && (\n              <div class=\"dialog__header\" part=\"header\" id={headingId}>\n                {this.heading}\n              </div>\n            )}\n\n            <div class=\"dialog__body\" part=\"body\">\n              <slot />\n            </div>\n\n            <div class=\"dialog__footer\" part=\"footer\">\n              <slot name=\"footer\" />\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/ts-divider.cjs.entry.js

@@ -0,0 +1,33 @@
+'use strict';
+
+var index = require('./index-Bel_x2OU.js');
+
+const dividerCss = () => `:host{display:block;font-family:var(--ts-font-family-base);--ts-divider-color:var(--ts-color-border-subtle);--ts-divider-spacing:var(--ts-spacing-3)}:host([orientation="horizontal"]){inline-size:100%;padding-block:var(--ts-divider-spacing)}:host([orientation="horizontal"]) .divider__base{display:flex;align-items:center;inline-size:100%}:host([orientation="horizontal"]:not([class*="has-label"])) .divider__line{flex:1;block-size:0;border-block-start:1px solid var(--ts-divider-color)}:host([orientation="horizontal"]) .divider__line--start,:host([orientation="horizontal"]) .divider__line--end{flex:1;block-size:0;border-block-start:1px solid var(--ts-divider-color)}:host([variant="dashed"]) .divider__line,:host([variant="dashed"]) .divider__line--start,:host([variant="dashed"]) .divider__line--end{border-block-start-style:dashed}:host([variant="dotted"]) .divider__line,:host([variant="dotted"]) .divider__line--start,:host([variant="dotted"]) .divider__line--end{border-block-start-style:dotted}.divider__label{padding-inline:var(--ts-spacing-3);font-size:var(--ts-font-size-xs);color:var(--ts-color-text-secondary);white-space:nowrap;line-height:1}:host([orientation="vertical"]){display:inline-block;block-size:100%;padding-inline:var(--ts-divider-spacing)}:host([orientation="vertical"]) .divider__base{display:flex;block-size:100%}:host([orientation="vertical"]) .divider__line{inline-size:0;block-size:100%;border-inline-start:1px solid var(--ts-divider-color)}:host([orientation="vertical"][variant="dashed"]) .divider__line{border-inline-start-style:dashed}:host([orientation="vertical"][variant="dotted"]) .divider__line{border-inline-start-style:dotted}.ts-divider--has-label .divider__line{}`;
+
+const TsDivider = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    /** The divider orientation. */
+    orientation = 'horizontal';
+    /** The line style variant. */
+    variant = 'solid';
+    /** Optional label text displayed in the center of the divider. */
+    label;
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    render() {
+        const hasLabel = !!this.label;
+        return (index.h(index.Host, { key: '91e1c22fd7f266364aeac8cf9ea6429a5462375d', class: {
+                'ts-divider': true,
+                [`ts-divider--${this.orientation}`]: true,
+                [`ts-divider--${this.variant}`]: true,
+                'ts-divider--has-label': hasLabel,
+            }, role: "separator", "aria-orientation": this.orientation }, hasLabel && this.orientation === 'horizontal' ? (index.h("div", { class: "divider__base", part: "base" }, index.h("span", { class: "divider__line divider__line--start" }), index.h("span", { class: "divider__label", part: "label" }, this.label), index.h("span", { class: "divider__line divider__line--end" }))) : (index.h("div", { class: "divider__base", part: "base" }, index.h("span", { class: "divider__line" })))));
+    }
+};
+TsDivider.style = dividerCss();
+
+exports.ts_divider = TsDivider;
+//# sourceMappingURL=ts-divider.entry.cjs.js.map
+
+//# sourceMappingURL=ts-divider.cjs.entry.js.map

package/dist/cjs/ts-divider.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"ts-divider.cjs.entry.js","mappings":";;;;AAAA,MAAM,UAAU,GAAG,MAAM,CAAC,6qDAA6qD,CAAC;;MCW3rD,SAAS,GAAA,MAAA;;;;;IAEK,WAAW,GAA8B,YAAY;;IAGrD,OAAO,GAAkC,OAAO;;AAGjE,IAAA,KAAK;;IAGb,MAAM,GAAA;AACJ,QAAA,MAAM,QAAQ,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK;QAE7B,QACEA,OAAA,CAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,KAAK,EAAE;AACL,gBAAA,YAAY,EAAE,IAAI;AAClB,gBAAA,CAAC,eAAe,IAAI,CAAC,WAAW,CAAA,CAAE,GAAG,IAAI;AACzC,gBAAA,CAAC,eAAe,IAAI,CAAC,OAAO,CAAA,CAAE,GAAG,IAAI;AACrC,gBAAA,uBAAuB,EAAE,QAAQ;aAClC,EACD,IAAI,EAAC,WAAW,EAAA,kBAAA,EACE,IAAI,CAAC,WAAW,EAAA,EAEjC,QAAQ,IAAI,IAAI,CAAC,WAAW,KAAK,YAAY,IAC5CD,OAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,eAAe,EAAC,IAAI,EAAC,MAAM,EAAA,EACpCA,OAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,oCAAoC,EAAA,CAAG,EACnDA,OAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,gBAAgB,EAAC,IAAI,EAAC,OAAO,EAAA,EAAE,IAAI,CAAC,KAAK,CAAQ,EAC7DA,OAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,kCAAkC,EAAA,CAAG,CAC7C,KAENA,iBAAK,KAAK,EAAC,eAAe,EAAC,IAAI,EAAC,MAAM,EAAA,EACpCA,OAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,eAAe,EAAA,CAAG,CAC1B,CACP,CACI;;;;;;;","names":["h","Host"],"sources":["src/components/divider/divider.css?tag=ts-divider&encapsulation=shadow","src/components/divider/divider.tsx"],"sourcesContent":["/* ==========================================================================\n   ts-divider — Shadow DOM Scoped Styles\n\n   Component tokens (Tier 3):\n     --ts-divider-color     Line color\n     --ts-divider-spacing   Spacing above/below (or left/right for vertical)\n   ========================================================================== */\n\n:host {\n  display: block;\n  font-family: var(--ts-font-family-base);\n\n  --ts-divider-color: var(--ts-color-border-subtle);\n  --ts-divider-spacing: var(--ts-spacing-3);\n}\n\n/* ---- Horizontal ---- */\n:host([orientation=\"horizontal\"]) {\n  inline-size: 100%;\n  padding-block: var(--ts-divider-spacing);\n}\n\n:host([orientation=\"horizontal\"]) .divider__base {\n  display: flex;\n  align-items: center;\n  inline-size: 100%;\n}\n\n:host([orientation=\"horizontal\"]:not([class*=\"has-label\"])) .divider__line {\n  flex: 1;\n  block-size: 0;\n  border-block-start: 1px solid var(--ts-divider-color);\n}\n\n:host([orientation=\"horizontal\"]) .divider__line--start,\n:host([orientation=\"horizontal\"]) .divider__line--end {\n  flex: 1;\n  block-size: 0;\n  border-block-start: 1px solid var(--ts-divider-color);\n}\n\n/* ---- Dashed ---- */\n:host([variant=\"dashed\"]) .divider__line,\n:host([variant=\"dashed\"]) .divider__line--start,\n:host([variant=\"dashed\"]) .divider__line--end {\n  border-block-start-style: dashed;\n}\n\n/* ---- Dotted ---- */\n:host([variant=\"dotted\"]) .divider__line,\n:host([variant=\"dotted\"]) .divider__line--start,\n:host([variant=\"dotted\"]) .divider__line--end {\n  border-block-start-style: dotted;\n}\n\n/* ---- Label ---- */\n.divider__label {\n  padding-inline: var(--ts-spacing-3);\n  font-size: var(--ts-font-size-xs);\n  color: var(--ts-color-text-secondary);\n  white-space: nowrap;\n  line-height: 1;\n}\n\n/* ---- Vertical ---- */\n:host([orientation=\"vertical\"]) {\n  display: inline-block;\n  block-size: 100%;\n  padding-inline: var(--ts-divider-spacing);\n}\n\n:host([orientation=\"vertical\"]) .divider__base {\n  display: flex;\n  block-size: 100%;\n}\n\n:host([orientation=\"vertical\"]) .divider__line {\n  inline-size: 0;\n  block-size: 100%;\n  border-inline-start: 1px solid var(--ts-divider-color);\n}\n\n:host([orientation=\"vertical\"][variant=\"dashed\"]) .divider__line {\n  border-inline-start-style: dashed;\n}\n\n:host([orientation=\"vertical\"][variant=\"dotted\"]) .divider__line {\n  border-inline-start-style: dotted;\n}\n\n/* ---- Has-label class (for horizontal with text) ---- */\n.ts-divider--has-label .divider__line {\n  /* overridden by --start/--end when label present */\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\n/**\n * @part base - The divider line element.\n * @part label - The optional label text.\n */\n@Component({\n  tag: 'ts-divider',\n  styleUrl: 'divider.css',\n  shadow: true,\n})\nexport class TsDivider {\n  /** The divider orientation. */\n  @Prop({ reflect: true }) orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n  /** The line style variant. */\n  @Prop({ reflect: true }) variant: 'solid' | 'dashed' | 'dotted' = 'solid';\n\n  /** Optional label text displayed in the center of the divider. */\n  @Prop() label?: string;\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    const hasLabel = !!this.label;\n\n    return (\n      <Host\n        class={{\n          'ts-divider': true,\n          [`ts-divider--${this.orientation}`]: true,\n          [`ts-divider--${this.variant}`]: true,\n          'ts-divider--has-label': hasLabel,\n        }}\n        role=\"separator\"\n        aria-orientation={this.orientation}\n      >\n        {hasLabel && this.orientation === 'horizontal' ? (\n          <div class=\"divider__base\" part=\"base\">\n            <span class=\"divider__line divider__line--start\" />\n            <span class=\"divider__label\" part=\"label\">{this.label}</span>\n            <span class=\"divider__line divider__line--end\" />\n          </div>\n        ) : (\n          <div class=\"divider__base\" part=\"base\">\n            <span class=\"divider__line\" />\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/ts-drawer.cjs.entry.js

@@ -0,0 +1,113 @@
+'use strict';
+
+var index = require('./index-Bel_x2OU.js');
+var aria = require('./aria-CeYIvz3U.js');
+
+const drawerCss = () => `:host{font-family:var(--ts-font-family-base);--ts-drawer-bg:var(--ts-color-bg-elevated);--ts-drawer-shadow:var(--ts-shadow-xl);--ts-drawer-overlay-bg:var(--ts-color-bg-overlay)}.drawer__overlay{position:fixed;inset:0;z-index:var(--ts-z-modal);background-color:var(--ts-drawer-overlay-bg);animation:ts-drawer-fade-in 200ms ease-out}.drawer__panel{position:fixed;display:flex;flex-direction:column;background-color:var(--ts-drawer-bg);box-shadow:var(--ts-drawer-shadow);outline:none;overflow-y:auto}.drawer__panel--start{inset-block-start:0;inset-block-end:0;inset-inline-start:0;animation:ts-drawer-slide-start 250ms cubic-bezier(0.16, 1, 0.3, 1)}.drawer__panel--end{inset-block-start:0;inset-block-end:0;inset-inline-end:0;animation:ts-drawer-slide-end 250ms cubic-bezier(0.16, 1, 0.3, 1)}.drawer__panel--top{inset-block-start:0;inset-inline-start:0;inset-inline-end:0;animation:ts-drawer-slide-top 250ms cubic-bezier(0.16, 1, 0.3, 1)}.drawer__panel--bottom{inset-block-end:0;inset-inline-start:0;inset-inline-end:0;animation:ts-drawer-slide-bottom 250ms cubic-bezier(0.16, 1, 0.3, 1)}.drawer__panel--start.drawer__panel--sm,.drawer__panel--end.drawer__panel--sm{inline-size:320px}.drawer__panel--start.drawer__panel--md,.drawer__panel--end.drawer__panel--md{inline-size:440px}.drawer__panel--start.drawer__panel--lg,.drawer__panel--end.drawer__panel--lg{inline-size:640px}.drawer__panel--start.drawer__panel--full,.drawer__panel--end.drawer__panel--full{inline-size:100%}.drawer__panel--top.drawer__panel--sm,.drawer__panel--bottom.drawer__panel--sm{block-size:320px}.drawer__panel--top.drawer__panel--md,.drawer__panel--bottom.drawer__panel--md{block-size:440px}.drawer__panel--top.drawer__panel--lg,.drawer__panel--bottom.drawer__panel--lg{block-size:640px}.drawer__panel--top.drawer__panel--full,.drawer__panel--bottom.drawer__panel--full{block-size:100%}.drawer__header{display:flex;align-items:center;justify-content:space-between;padding:var(--ts-spacing-4) var(--ts-spacing-5);border-block-end:1px solid var(--ts-color-border-default)}.drawer__title{font-size:var(--ts-font-size-lg);font-weight:var(--ts-font-weight-semi);color:var(--ts-color-text-primary)}.drawer__close{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:none;border-radius:var(--ts-radius-md);background:transparent;color:var(--ts-color-text-tertiary);font-size:var(--ts-font-size-md);cursor:pointer;padding:0;line-height:1;margin-inline-start:auto;transition:background-color var(--ts-transition-fast),     color var(--ts-transition-fast)}.drawer__close:hover{background-color:var(--ts-color-bg-hover);color:var(--ts-color-text-secondary)}.drawer__close:focus-visible{box-shadow:var(--ts-focus-ring)}.drawer__body{flex:1;padding:var(--ts-spacing-4) var(--ts-spacing-5);font-size:var(--ts-font-size-md);color:var(--ts-color-text-secondary);line-height:var(--ts-line-height-normal);overflow-y:auto}.drawer__footer{padding:var(--ts-spacing-4) var(--ts-spacing-5);border-block-start:1px solid var(--ts-color-border-default);display:flex;align-items:center;justify-content:flex-end;gap:var(--ts-spacing-2)}.drawer__footer:empty{display:none}@keyframes ts-drawer-fade-in{from{opacity:0}to{opacity:1}}@keyframes ts-drawer-slide-start{from{transform:translateX(-100%)}to{transform:translateX(0)}}@keyframes ts-drawer-slide-end{from{transform:translateX(100%)}to{transform:translateX(0)}}@keyframes ts-drawer-slide-top{from{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes ts-drawer-slide-bottom{from{transform:translateY(100%)}to{transform:translateY(0)}}`;
+
+const TsDrawer = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.tsClose = index.createEvent(this, "tsClose");
+    }
+    get hostEl() { return index.getElement(this); }
+    panelEl;
+    removeFocusTrap;
+    previouslyFocused;
+    drawerId = aria.generateId('ts-drawer');
+    /** Whether the drawer is open. */
+    open = false;
+    /** Which edge the drawer slides in from. */
+    placement = 'end';
+    /** The drawer's width/height preset. */
+    size = 'md';
+    /** Whether clicking the overlay or pressing Escape closes the drawer. */
+    dismissible = true;
+    /** Accessible heading for the drawer. */
+    heading;
+    /** Emitted when the drawer closes. */
+    tsClose;
+    /** Internal animation state. */
+    isAnimating = false;
+    handleOpenChange(isOpen) {
+        if (isOpen) {
+            this.openDrawer();
+        }
+        else {
+            this.closeDrawer();
+        }
+    }
+    /** Programmatically open the drawer. */
+    async show() {
+        this.open = true;
+    }
+    /** Programmatically close the drawer. */
+    async close() {
+        this.open = false;
+    }
+    openDrawer() {
+        this.previouslyFocused = document.activeElement;
+        this.isAnimating = true;
+        document.body.style.overflow = 'hidden';
+        requestAnimationFrame(() => {
+            if (this.panelEl) {
+                this.removeFocusTrap = aria.trapFocus(this.panelEl);
+                this.panelEl.focus();
+            }
+        });
+    }
+    closeDrawer() {
+        this.isAnimating = false;
+        this.tsClose.emit();
+        document.body.style.overflow = '';
+        this.removeFocusTrap?.();
+        this.previouslyFocused?.focus();
+    }
+    disconnectedCallback() {
+        this.removeFocusTrap?.();
+        document.body.style.overflow = '';
+    }
+    handleOverlayClick = () => {
+        if (this.dismissible) {
+            this.close();
+        }
+    };
+    handlePanelClick = (event) => {
+        event.stopPropagation();
+    };
+    handleKeydown = (event) => {
+        if (event.key === 'Escape' && this.dismissible) {
+            event.stopPropagation();
+            this.close();
+        }
+    };
+    handleCloseClick = () => {
+        this.close();
+    };
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    render() {
+        if (!this.open)
+            return null;
+        return (index.h(index.Host, { class: {
+                'ts-drawer': true,
+                'ts-drawer--open': this.open,
+                [`ts-drawer--${this.placement}`]: true,
+                [`ts-drawer--${this.size}`]: true,
+            }, onKeyDown: this.handleKeydown }, index.h("div", { class: "drawer__overlay", part: "overlay", onClick: this.handleOverlayClick }, index.h("div", { ref: (el) => (this.panelEl = el), class: {
+                'drawer__panel': true,
+                [`drawer__panel--${this.placement}`]: true,
+                [`drawer__panel--${this.size}`]: true,
+            }, part: "panel", role: "dialog", "aria-modal": "true", "aria-label": this.heading, "aria-labelledby": !this.heading ? `${this.drawerId}-header` : undefined, tabindex: -1, onClick: this.handlePanelClick }, index.h("div", { class: "drawer__header", part: "header", id: `${this.drawerId}-header` }, this.heading && index.h("span", { class: "drawer__title" }, this.heading), this.dismissible && (index.h("button", { class: "drawer__close", part: "close", type: "button", "aria-label": "Close drawer", onClick: this.handleCloseClick }, "\u2715"))), index.h("div", { class: "drawer__body", part: "body" }, index.h("slot", null)), index.h("div", { class: "drawer__footer", part: "footer" }, index.h("slot", { name: "footer" }))))));
+    }
+    static get watchers() { return {
+        "open": [{
+                "handleOpenChange": 0
+            }]
+    }; }
+};
+TsDrawer.style = drawerCss();
+
+exports.ts_drawer = TsDrawer;
+//# sourceMappingURL=ts-drawer.entry.cjs.js.map
+
+//# sourceMappingURL=ts-drawer.cjs.entry.js.map