npm - @xplor-education/core-stencil-components - Versions diffs - 2.1.0 → 3.1.1 - Mend

@xplor-education/core-stencil-components 2.1.0 → 3.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (318) hide show

package/dist/collection/components/xplor-inline-checkbox/xplor-inline-checkbox.js CHANGED Viewed

@@ -33,9 +33,9 @@ export class XplorInlineCheckbox {
             'xplor-inline-checkbox--disabled': this.disabled,
             'xplor-inline-checkbox--checked': this.checked,
         };
-        return (h(Host, { key: '2273357108dc65e665f9fdd9dcece4d4ed8edac3' }, h("label", { key: '630091008ad489a1cc4c0e71ef1ae802ef4b0c89', class: containerClasses }, h("input", { key: '0c823ba53cb0d25d4823e42bcb037efaeddff405', type: "checkbox", class: "xplor-inline-checkbox__input", checked: this.checked, value: this.value, disabled: this.disabled, indeterminate: this.indeterminate, onChange: this.handleChange, style: {
+        return (h(Host, { key: '34aa08258f2a12280c9709f94883af3e0423175f' }, h("label", { key: 'fd6fe47c8e1da57aba09a4ce7cbc95f7e1947dfe', class: containerClasses }, h("input", { key: '17a4c41cb304ae9826476d22ffa18d9bf5810ed5', type: "checkbox", class: "xplor-inline-checkbox__input", checked: this.checked, value: this.value, disabled: this.disabled, indeterminate: this.indeterminate, onChange: this.handleChange, style: {
                 accentColor: this.color,
-            } }), this.label && h("span", { key: '9e1bbb0bd85cc7cfe7d760501507d68dcc3bf3c2', class: "xplor-inline-checkbox__label" }, this.label), h("slot", { key: '7a95d78de68af2887149bd6eb9f08330b9c57d6b' }))));
+            } }), this.label && h("span", { key: '31afabdf1498e609f06530f1db28a05b2a0ba00b', class: "xplor-inline-checkbox__label" }, this.label), h("slot", { key: '2a32c92c16906869dd82272590dd83ebc1905e71' }))));
     }
     static get is() { return "xplor-inline-checkbox"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/xplor-inline-date-picker/xplor-inline-date-picker.js CHANGED Viewed

@@ -25,6 +25,7 @@ export class XplorInlineDatePicker {
          * Whether to start week on Sunday (default: true)
          */
         this.startWeekOnSunday = true;
+        this.focusedDay = 0;
         this.monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
         this.dayNames = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
         this.dayNamesStartMonday = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
@@ -119,7 +120,7 @@ export class XplorInlineDatePicker {
                         'xplor-inline-date-picker__day--today': isToday,
                         'xplor-inline-date-picker__day--selected': isSelected,
                         'xplor-inline-date-picker__day--disabled': isDisabled,
-                    }, onClick: () => !isDisabled && this.selectDate(day) }, day));
+                    }, onClick: () => !isDisabled && this.selectDate(day), role: "gridcell", "aria-selected": isSelected ? 'true' : 'false', "aria-current": isToday ? 'date' : undefined, "aria-disabled": isDisabled ? 'true' : undefined, tabIndex: day === this.focusedDay ? 0 : -1, "data-day": day }, day));
             }
             return days;
         };
@@ -139,11 +140,73 @@ export class XplorInlineDatePicker {
         this.currentYear = date.getFullYear();
         this.currentMonth = date.getMonth();
         this.viewDate = new Date(this.currentYear, this.currentMonth, 1);
+        this.focusedDay = date.getDate();
+    }
+    handleKeyDown(event) {
+        const daysInMonth = this.getDaysInMonth();
+        switch (event.key) {
+            case 'ArrowLeft':
+                event.preventDefault();
+                if (this.focusedDay > 1) {
+                    this.focusedDay--;
+                }
+                else {
+                    this.previousMonth();
+                    this.focusedDay = this.getDaysInMonth();
+                }
+                break;
+            case 'ArrowRight':
+                event.preventDefault();
+                if (this.focusedDay < daysInMonth) {
+                    this.focusedDay++;
+                }
+                else {
+                    this.nextMonth();
+                    this.focusedDay = 1;
+                }
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                if (this.focusedDay > 7) {
+                    this.focusedDay -= 7;
+                }
+                else {
+                    this.previousMonth();
+                    this.focusedDay = this.getDaysInMonth() - (7 - this.focusedDay);
+                }
+                break;
+            case 'ArrowDown':
+                event.preventDefault();
+                if (this.focusedDay + 7 <= daysInMonth) {
+                    this.focusedDay += 7;
+                }
+                else {
+                    const remainder = this.focusedDay + 7 - daysInMonth;
+                    this.nextMonth();
+                    this.focusedDay = remainder;
+                }
+                break;
+            case 'Enter':
+            case ' ':
+                event.preventDefault();
+                if (this.focusedDay >= 1 && this.focusedDay <= daysInMonth) {
+                    this.selectDate(this.focusedDay);
+                }
+                break;
+            default:
+                return;
+        }
+        // Focus the day cell after render
+        requestAnimationFrame(() => {
+            const dayEl = this.el.querySelector(`[data-day="${this.focusedDay}"]`);
+            if (dayEl)
+                dayEl.focus();
+        });
     }
     render() {
         const sidebarDate = this.getSidebarDate();
         const dayHeaders = this.startWeekOnSunday ? this.dayNames : this.dayNamesStartMonday;
-        return (h(Host, { key: '0a63c50c59ddc6ca12df01ba421b351ba7fa163a' }, h("div", { key: '961a428446372ebab3e7ca008100742d5452a137', class: "xplor-inline-date-picker", style: { '--picker-color': this.color } }, h("div", { key: '5ff94e618f8f292e13dcc3898c6b6be40536d64e', class: "xplor-inline-date-picker__sidebar" }, h("div", { key: '1e96cb361882d9e58d9b720beff37d211d1552aa', class: "xplor-inline-date-picker__sidebar-year" }, sidebarDate.year), h("div", { key: 'ce3bc570cc6ff6b4063cce28ada4da65cc97b3bb', class: "xplor-inline-date-picker__sidebar-day" }, sidebarDate.day, ","), h("div", { key: 'bcf8017b90193d0eed5b10d72454f9dc1051756e', class: "xplor-inline-date-picker__sidebar-date" }, sidebarDate.date)), h("div", { key: '7f36d03964d552ee8201493c920c0ec2d1119f89', class: "xplor-inline-date-picker__calendar" }, h("div", { key: '05eca5f4d4b0a0bc7ef237185a3d31ca7202b2ff', class: "xplor-inline-date-picker__header" }, h("button", { key: '91db152c009b87605a9fb21949d8cad5ef40a230', type: "button", class: "xplor-inline-date-picker__arrow", onClick: this.previousMonth, "aria-label": "Previous month" }, "\u2039"), h("div", { key: '86299244563f9338281b5f107b3fef04053ec164', class: "xplor-inline-date-picker__title" }, this.monthNames[this.currentMonth], " ", this.currentYear), h("button", { key: 'f6a9e7caa26114c06e0b10e1e5fddebe9388efcb', type: "button", class: "xplor-inline-date-picker__arrow", onClick: this.nextMonth, "aria-label": "Next month" }, "\u203A")), h("div", { key: 'f8de6b4d65c8ad58beeb97455c71d75c55668c6d', class: "xplor-inline-date-picker__weekdays" }, dayHeaders.map((day) => (h("div", { class: "xplor-inline-date-picker__weekday" }, day)))), h("div", { key: '267c3f7076c41ad34873501151b567fdda572dcd', class: "xplor-inline-date-picker__days" }, this.renderCalendarDays())))));
+        return (h(Host, { key: '031460c16f831f29173bbac372ee4de5b0473828' }, h("div", { key: 'b0d890fec94358a882d10a30b229196ee8fc4ea5', class: "xplor-inline-date-picker", style: { '--picker-color': this.color } }, h("div", { key: '2d5496299d0091d1960fb8507726f15828d68313', class: "xplor-inline-date-picker__sidebar" }, h("div", { key: 'b1645b35975a52e916eb6d18ccda16c3b90519c3', class: "xplor-inline-date-picker__sidebar-year" }, sidebarDate.year), h("div", { key: 'b812bbbd4686d06d6c4c602846c870777847c9ca', class: "xplor-inline-date-picker__sidebar-day" }, sidebarDate.day, ","), h("div", { key: 'd78744d1b353ddafa302693ac105837f33be736e', class: "xplor-inline-date-picker__sidebar-date" }, sidebarDate.date)), h("div", { key: '1e0519719bff8801a3f6a7d23c8140b4017656d8', class: "xplor-inline-date-picker__calendar" }, h("div", { key: '1f13bb35c2bbbc921f6f4d0a4dde12e47d010c81', class: "xplor-inline-date-picker__header" }, h("button", { key: 'dd726c543dc74ed85bb3dd128b45e5a74ffde1f6', type: "button", class: "xplor-inline-date-picker__arrow", onClick: this.previousMonth, "aria-label": "Previous month" }, "\u2039"), h("div", { key: 'ffb6cf26f1b1a0ef2c75ccb827f38110a6cfbdbe', class: "xplor-inline-date-picker__title" }, this.monthNames[this.currentMonth], " ", this.currentYear), h("button", { key: '69b0c08aae5b24b2814c37be40de942ed2ff8abb', type: "button", class: "xplor-inline-date-picker__arrow", onClick: this.nextMonth, "aria-label": "Next month" }, "\u203A")), h("div", { key: '25ef6b996fdccc121b44f6dafe018aef316ab09d', class: "xplor-inline-date-picker__weekdays" }, dayHeaders.map((day) => (h("div", { class: "xplor-inline-date-picker__weekday" }, day)))), h("div", { key: '6d092079f76ab7c06fcdb07c8d43d0cd9ace8faa', class: "xplor-inline-date-picker__days", role: "grid" }, this.renderCalendarDays())))));
     }
     static get is() { return "xplor-inline-date-picker"; }
     static get encapsulation() { return "scoped"; }
@@ -285,7 +348,8 @@ export class XplorInlineDatePicker {
         return {
             "currentYear": {},
             "currentMonth": {},
-            "viewDate": {}
+            "viewDate": {},
+            "focusedDay": {}
         };
     }
     static get events() {
@@ -321,5 +385,15 @@ export class XplorInlineDatePicker {
                 }
             }];
     }
+    static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "keydown",
+                "method": "handleKeyDown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
 }
 //# sourceMappingURL=xplor-inline-date-picker.js.map

package/dist/collection/components/xplor-inline-date-picker/xplor-inline-date-picker.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"xplor-inline-date-picker.js","sourceRoot":"","sources":["../../../src/components/xplor-inline-date-picker/xplor-inline-date-picker.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter, State } from '@stencil/core';\n\n@Component({\n tag: 'xplor-inline-date-picker',\n styleUrl: 'xplor-inline-date-picker.scss',\n scoped: true,\n})\nexport class XplorInlineDatePicker {\n /*\n Selected date (YYYY-MM-DD format)\n /\n @Prop({ mutable: true }) selectedDate: string = '';\n\n /\n Minimum selectable date (YYYY-MM-DD format)\n /\n @Prop() min: string = '';\n\n /\n Maximum selectable date (YYYY-MM-DD format)\n /\n @Prop() max: string = '';\n\n /\n Whether the date picker is readonly\n /\n @Prop() readonly: boolean = false;\n\n /\n Primary color\n /\n @Prop() color: string = '#008480';\n\n /\n Whether to start week on Sunday (default: true)\n /\n @Prop() startWeekOnSunday: boolean = true;\n\n /\n Date selection event\n /\n @Event() dateSelected: EventEmitter<string>;\n\n /\n Month change event\n */\n @Event() monthChanged: EventEmitter<{ year: number; month: number }>;\n\n @State() currentYear: number;\n @State() currentMonth: number;\n @State() viewDate: Date;\n\n private monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];\n private dayNames = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];\n private dayNamesStartMonday = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];\n\n componentWillLoad() {\n const date = this.selectedDate ? new Date(this.selectedDate) : new Date();\n this.currentYear = date.getFullYear();\n this.currentMonth = date.getMonth();\n this.viewDate = new Date(this.currentYear, this.currentMonth, 1);\n }\n\n private previousMonth = () => {\n if (this.currentMonth === 0) {\n this.currentMonth = 11;\n this.currentYear--;\n } else {\n this.currentMonth--;\n }\n this.viewDate = new Date(this.currentYear, this.currentMonth, 1);\n this.monthChanged.emit({ year: this.currentYear, month: this.currentMonth });\n };\n\n private nextMonth = () => {\n if (this.currentMonth === 11) {\n this.currentMonth = 0;\n this.currentYear++;\n } else {\n this.currentMonth++;\n }\n this.viewDate = new Date(this.currentYear, this.currentMonth, 1);\n this.monthChanged.emit({ year: this.currentYear, month: this.currentMonth });\n };\n\n private selectDate = (day: number) => {\n if (this.readonly) return;\n\n const date = new Date(this.currentYear, this.currentMonth, day);\n const dateString = this.formatDate(date);\n\n if (this.isDateDisabled(date)) return;\n\n this.selectedDate = dateString;\n this.dateSelected.emit(dateString);\n };\n\n private formatDate = (date: Date): string => {\n const year = date.getFullYear();\n const month = String(date.getMonth() + 1).padStart(2, '0');\n const day = String(date.getDate()).padStart(2, '0');\n return `${year}-${month}-${day}`;\n };\n\n private isDateDisabled = (date: Date): boolean => {\n if (this.min) {\n const minDate = new Date(this.min);\n if (date < minDate) return true;\n }\n if (this.max) {\n const maxDate = new Date(this.max);\n if (date > maxDate) return true;\n }\n return false;\n };\n\n private isToday = (day: number): boolean => {\n const today = new Date();\n return (\n day === today.getDate() &&\n this.currentMonth === today.getMonth() &&\n this.currentYear === today.getFullYear()\n );\n };\n\n private isSelected = (day: number): boolean => {\n if (!this.selectedDate) return false;\n const selected = new Date(this.selectedDate);\n return (\n day === selected.getDate() &&\n this.currentMonth === selected.getMonth() &&\n this.currentYear === selected.getFullYear()\n );\n };\n\n private getDaysInMonth = (): number => {\n return new Date(this.currentYear, this.currentMonth + 1, 0).getDate();\n };\n\n private getFirstDayOfMonth = (): number => {\n const firstDay = new Date(this.currentYear, this.currentMonth, 1).getDay();\n return this.startWeekOnSunday ? firstDay : (firstDay === 0 ? 6 : firstDay - 1);\n };\n\n private renderCalendarDays = () => {\n const daysInMonth = this.getDaysInMonth();\n const firstDay = this.getFirstDayOfMonth();\n const days = [];\n\n // Empty cells for days before the first of the month\n for (let i = 0; i < firstDay; i++) {\n days.push(<div class=\"xplor-inline-date-picker__day xplor-inline-date-picker__day--empty\"></div>);\n }\n\n // Days of the month\n for (let day = 1; day <= daysInMonth; day++) {\n const date = new Date(this.currentYear, this.currentMonth, day);\n const isDisabled = this.isDateDisabled(date);\n const isToday = this.isToday(day);\n const isSelected = this.isSelected(day);\n\n days.push(\n <div\n class={{\n 'xplor-inline-date-picker__day': true,\n 'xplor-inline-date-picker__day--today': isToday,\n 'xplor-inline-date-picker__day--selected': isSelected,\n 'xplor-inline-date-picker__day--disabled': isDisabled,\n }}\n onClick={() => !isDisabled && this.selectDate(day)}\n >\n {day}\n </div>\n );\n }\n\n return days;\n };\n\n private getSidebarDate = () => {\n const date = this.selectedDate ? new Date(this.selectedDate) : new Date();\n const dayNames = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];\n const monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];\n\n return {\n year: date.getFullYear(),\n day: dayNames[date.getDay()],\n date: `${monthNames[date.getMonth()]} ${date.getDate()}`,\n };\n };\n\n render() {\n const sidebarDate = this.getSidebarDate();\n const dayHeaders = this.startWeekOnSunday ? this.dayNames : this.dayNamesStartMonday;\n\n return (\n <Host>\n <div class=\"xplor-inline-date-picker\" style={{ '--picker-color': this.color }}>\n <div class=\"xplor-inline-date-picker__sidebar\">\n <div class=\"xplor-inline-date-picker__sidebar-year\">{sidebarDate.year}</div>\n <div class=\"xplor-inline-date-picker__sidebar-day\">{sidebarDate.day},</div>\n <div class=\"xplor-inline-date-picker__sidebar-date\">{sidebarDate.date}</div>\n </div>\n\n <div class=\"xplor-inline-date-picker__calendar\">\n <div class=\"xplor-inline-date-picker__header\">\n <button\n type=\"button\"\n class=\"xplor-inline-date-picker__arrow\"\n onClick={this.previousMonth}\n aria-label=\"Previous month\"\n >\n ‹\n </button>\n <div class=\"xplor-inline-date-picker__title\">\n {this.monthNames[this.currentMonth]} {this.currentYear}\n </div>\n <button\n type=\"button\"\n class=\"xplor-inline-date-picker__arrow\"\n onClick={this.nextMonth}\n aria-label=\"Next month\"\n >\n ›\n </button>\n </div>\n\n <div class=\"xplor-inline-date-picker__weekdays\">\n {dayHeaders.map((day) => (\n <div class=\"xplor-inline-date-picker__weekday\">{day}</div>\n ))}\n </div>\n\n <div class=\"xplor-inline-date-picker__days\">{this.renderCalendarDays()}</div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"xplor-inline-date-picker.js","sourceRoot":"","sources":["../../../src/components/xplor-inline-date-picker/xplor-inline-date-picker.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter, State, Element, Listen } from '@stencil/core';\n\n@Component({\n tag: 'xplor-inline-date-picker',\n styleUrl: 'xplor-inline-date-picker.scss',\n scoped: true,\n})\nexport class XplorInlineDatePicker {\n @Element() el: HTMLElement;\n /*\n Selected date (YYYY-MM-DD format)\n /\n @Prop({ mutable: true }) selectedDate: string = '';\n\n /\n Minimum selectable date (YYYY-MM-DD format)\n /\n @Prop() min: string = '';\n\n /\n Maximum selectable date (YYYY-MM-DD format)\n /\n @Prop() max: string = '';\n\n /\n Whether the date picker is readonly\n /\n @Prop() readonly: boolean = false;\n\n /\n Primary color\n /\n @Prop() color: string = '#008480';\n\n /\n Whether to start week on Sunday (default: true)\n /\n @Prop() startWeekOnSunday: boolean = true;\n\n /\n Date selection event\n /\n @Event() dateSelected: EventEmitter<string>;\n\n /\n Month change event\n */\n @Event() monthChanged: EventEmitter<{ year: number; month: number }>;\n\n @State() currentYear: number;\n @State() currentMonth: number;\n @State() viewDate: Date;\n @State() focusedDay: number = 0;\n\n private monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];\n private dayNames = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];\n private dayNamesStartMonday = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];\n\n componentWillLoad() {\n const date = this.selectedDate ? new Date(this.selectedDate) : new Date();\n this.currentYear = date.getFullYear();\n this.currentMonth = date.getMonth();\n this.viewDate = new Date(this.currentYear, this.currentMonth, 1);\n this.focusedDay = date.getDate();\n }\n\n @Listen('keydown')\n handleKeyDown(event: KeyboardEvent) {\n const daysInMonth = this.getDaysInMonth();\n\n switch (event.key) {\n case 'ArrowLeft':\n event.preventDefault();\n if (this.focusedDay > 1) {\n this.focusedDay--;\n } else {\n this.previousMonth();\n this.focusedDay = this.getDaysInMonth();\n }\n break;\n case 'ArrowRight':\n event.preventDefault();\n if (this.focusedDay < daysInMonth) {\n this.focusedDay++;\n } else {\n this.nextMonth();\n this.focusedDay = 1;\n }\n break;\n case 'ArrowUp':\n event.preventDefault();\n if (this.focusedDay > 7) {\n this.focusedDay -= 7;\n } else {\n this.previousMonth();\n this.focusedDay = this.getDaysInMonth() - (7 - this.focusedDay);\n }\n break;\n case 'ArrowDown':\n event.preventDefault();\n if (this.focusedDay + 7 <= daysInMonth) {\n this.focusedDay += 7;\n } else {\n const remainder = this.focusedDay + 7 - daysInMonth;\n this.nextMonth();\n this.focusedDay = remainder;\n }\n break;\n case 'Enter':\n case ' ':\n event.preventDefault();\n if (this.focusedDay >= 1 && this.focusedDay <= daysInMonth) {\n this.selectDate(this.focusedDay);\n }\n break;\n default:\n return;\n }\n\n // Focus the day cell after render\n requestAnimationFrame(() => {\n const dayEl = this.el.querySelector(`[data-day=\"${this.focusedDay}\"]`) as HTMLElement;\n if (dayEl) dayEl.focus();\n });\n }\n\n private previousMonth = () => {\n if (this.currentMonth === 0) {\n this.currentMonth = 11;\n this.currentYear--;\n } else {\n this.currentMonth--;\n }\n this.viewDate = new Date(this.currentYear, this.currentMonth, 1);\n this.monthChanged.emit({ year: this.currentYear, month: this.currentMonth });\n };\n\n private nextMonth = () => {\n if (this.currentMonth === 11) {\n this.currentMonth = 0;\n this.currentYear++;\n } else {\n this.currentMonth++;\n }\n this.viewDate = new Date(this.currentYear, this.currentMonth, 1);\n this.monthChanged.emit({ year: this.currentYear, month: this.currentMonth });\n };\n\n private selectDate = (day: number) => {\n if (this.readonly) return;\n\n const date = new Date(this.currentYear, this.currentMonth, day);\n const dateString = this.formatDate(date);\n\n if (this.isDateDisabled(date)) return;\n\n this.selectedDate = dateString;\n this.dateSelected.emit(dateString);\n };\n\n private formatDate = (date: Date): string => {\n const year = date.getFullYear();\n const month = String(date.getMonth() + 1).padStart(2, '0');\n const day = String(date.getDate()).padStart(2, '0');\n return `${year}-${month}-${day}`;\n };\n\n private isDateDisabled = (date: Date): boolean => {\n if (this.min) {\n const minDate = new Date(this.min);\n if (date < minDate) return true;\n }\n if (this.max) {\n const maxDate = new Date(this.max);\n if (date > maxDate) return true;\n }\n return false;\n };\n\n private isToday = (day: number): boolean => {\n const today = new Date();\n return (\n day === today.getDate() &&\n this.currentMonth === today.getMonth() &&\n this.currentYear === today.getFullYear()\n );\n };\n\n private isSelected = (day: number): boolean => {\n if (!this.selectedDate) return false;\n const selected = new Date(this.selectedDate);\n return (\n day === selected.getDate() &&\n this.currentMonth === selected.getMonth() &&\n this.currentYear === selected.getFullYear()\n );\n };\n\n private getDaysInMonth = (): number => {\n return new Date(this.currentYear, this.currentMonth + 1, 0).getDate();\n };\n\n private getFirstDayOfMonth = (): number => {\n const firstDay = new Date(this.currentYear, this.currentMonth, 1).getDay();\n return this.startWeekOnSunday ? firstDay : (firstDay === 0 ? 6 : firstDay - 1);\n };\n\n private renderCalendarDays = () => {\n const daysInMonth = this.getDaysInMonth();\n const firstDay = this.getFirstDayOfMonth();\n const days = [];\n\n // Empty cells for days before the first of the month\n for (let i = 0; i < firstDay; i++) {\n days.push(<div class=\"xplor-inline-date-picker__day xplor-inline-date-picker__day--empty\"></div>);\n }\n\n // Days of the month\n for (let day = 1; day <= daysInMonth; day++) {\n const date = new Date(this.currentYear, this.currentMonth, day);\n const isDisabled = this.isDateDisabled(date);\n const isToday = this.isToday(day);\n const isSelected = this.isSelected(day);\n\n days.push(\n <div\n class={{\n 'xplor-inline-date-picker__day': true,\n 'xplor-inline-date-picker__day--today': isToday,\n 'xplor-inline-date-picker__day--selected': isSelected,\n 'xplor-inline-date-picker__day--disabled': isDisabled,\n }}\n onClick={() => !isDisabled && this.selectDate(day)}\n role=\"gridcell\"\n aria-selected={isSelected ? 'true' : 'false'}\n aria-current={isToday ? 'date' : undefined}\n aria-disabled={isDisabled ? 'true' : undefined}\n tabIndex={day === this.focusedDay ? 0 : -1}\n data-day={day}\n >\n {day}\n </div>\n );\n }\n\n return days;\n };\n\n private getSidebarDate = () => {\n const date = this.selectedDate ? new Date(this.selectedDate) : new Date();\n const dayNames = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];\n const monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];\n\n return {\n year: date.getFullYear(),\n day: dayNames[date.getDay()],\n date: `${monthNames[date.getMonth()]} ${date.getDate()}`,\n };\n };\n\n render() {\n const sidebarDate = this.getSidebarDate();\n const dayHeaders = this.startWeekOnSunday ? this.dayNames : this.dayNamesStartMonday;\n\n return (\n <Host>\n <div class=\"xplor-inline-date-picker\" style={{ '--picker-color': this.color }}>\n <div class=\"xplor-inline-date-picker__sidebar\">\n <div class=\"xplor-inline-date-picker__sidebar-year\">{sidebarDate.year}</div>\n <div class=\"xplor-inline-date-picker__sidebar-day\">{sidebarDate.day},</div>\n <div class=\"xplor-inline-date-picker__sidebar-date\">{sidebarDate.date}</div>\n </div>\n\n <div class=\"xplor-inline-date-picker__calendar\">\n <div class=\"xplor-inline-date-picker__header\">\n <button\n type=\"button\"\n class=\"xplor-inline-date-picker__arrow\"\n onClick={this.previousMonth}\n aria-label=\"Previous month\"\n >\n ‹\n </button>\n <div class=\"xplor-inline-date-picker__title\">\n {this.monthNames[this.currentMonth]} {this.currentYear}\n </div>\n <button\n type=\"button\"\n class=\"xplor-inline-date-picker__arrow\"\n onClick={this.nextMonth}\n aria-label=\"Next month\"\n >\n ›\n </button>\n </div>\n\n <div class=\"xplor-inline-date-picker__weekdays\">\n {dayHeaders.map((day) => (\n <div class=\"xplor-inline-date-picker__weekday\">{day}</div>\n ))}\n </div>\n\n <div class=\"xplor-inline-date-picker__days\" role=\"grid\">{this.renderCalendarDays()}</div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/xplor-inline-switch/xplor-inline-switch.js CHANGED Viewed

@@ -29,7 +29,7 @@ export class XplorInlineSwitch {
             'xplor-inline-switch--disabled': this.disabled,
             'xplor-inline-switch--checked': this.checked,
         };
-        return (h(Host, { key: 'd881ff0653ee51f1ddc8c146ccc6f70f3c128e3b' }, h("label", { key: '2ffe4cdf99f925c5973657769f056cffb8bea283', class: containerClasses, style: { '--switch-color': this.color } }, h("input", { key: '60fb990d1dce371c3579da91bd0d9fd4dd50f82b', type: "checkbox", class: "xplor-inline-switch__input", checked: this.checked, value: this.value, disabled: this.disabled, onChange: this.handleChange }), h("span", { key: '28e9f5444653009f4b56d510c2d73ba710e93115', class: "xplor-inline-switch__track" }, h("span", { key: 'f002449aa843c0b268dbc38d94dbf44a0e68d0de', class: "xplor-inline-switch__thumb" })), this.label && h("span", { key: 'f460d55e6cbaab94806c8025a1d17cd4d4b6790b', class: "xplor-inline-switch__label" }, this.label), h("slot", { key: '59e3248368aab93dd48287f3facdbe9221a39f5b' }))));
+        return (h(Host, { key: 'ac7b6e824b55bd184f81fd5a36174ee765bd649d' }, h("label", { key: 'e4042ad1236aba72343231013d9d0784593dcf26', class: containerClasses, style: { '--switch-color': this.color } }, h("input", { key: '9e5b96a0367a55785f0c87f74cf9ba0850e227c6', type: "checkbox", class: "xplor-inline-switch__input", checked: this.checked, value: this.value, disabled: this.disabled, onChange: this.handleChange }), h("span", { key: 'c35a3721624cfddd2448d9420a5e8c85a8a51108', class: "xplor-inline-switch__track" }, h("span", { key: '6b9026daf7d5641378d8243ed7b1b7e424db8171', class: "xplor-inline-switch__thumb" })), this.label && h("span", { key: '46423101cb78df16e84b5b79baa9a2a8c88bc91b', class: "xplor-inline-switch__label" }, this.label), h("slot", { key: '0841e31a5d0a9b27c3e8eeafff0218e92a4bf24a' }))));
     }
     static get is() { return "xplor-inline-switch"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/xplor-input-file/xplor-input-file.js CHANGED Viewed

@@ -1,6 +1,8 @@
 import { Host, h } from "@stencil/core";
+let inputFileIdCounter = 0;
 export class XplorInputFile {
     constructor() {
+        this.inputId = `xplor-input-file-${++inputFileIdCounter}`;
         /**
          * Input label
          */
@@ -75,7 +77,7 @@ export class XplorInputFile {
         };
         const visibleFiles = this.selectedFiles.slice(0, this.maxChips);
         const additionalCount = this.selectedFiles.length - this.maxChips;
-        return (h(Host, { key: 'b8022fdd28a3e0087bc2a044856c3013d1f32245' }, h("div", { key: '11c0494c76f5aed1fe03cff7b706c7bc809becda', class: containerClasses }, this.label && (h("label", { key: 'fca295123c0766e9ff4b1ae28abfc2662a345992', class: "xplor-input-file__label" }, this.label)), h("div", { key: 'a63356f0857b420f1f707caa2e5e6ac587616949', class: "xplor-input-file__field" }, h("span", { key: 'f2b6f89f35d36a71a4c2bae38175cd16f897102d', class: "xplor-input-file__icon" }, this.prependInnerIcon), h("div", { key: '0b6b59139696a1a1e9aee3f10b7069743f4d1934', class: "xplor-input-file__content" }, this.selectedFiles.length === 0 ? (h("span", { class: "xplor-input-file__placeholder" }, this.placeholder)) : (h("div", { class: "xplor-input-file__chips" }, visibleFiles.map((file) => (h("div", { class: "xplor-input-file__chip", key: file.name }, h("span", { class: "xplor-input-file__chip-text" }, file.name), this.showSize && file.size && (h("span", { class: "xplor-input-file__chip-size" }, "(", this.formatFileSize(file.size), ")"))))), additionalCount > 0 && (h("span", { class: "xplor-input-file__additional" }, "+", additionalCount, " additional file", additionalCount > 1 ? 's' : ''))))), this.selectedFiles.length > 0 && !this.disabled && (h("button", { key: 'b0f312f157de2caf74c8c630d7c109fb6af4d7c0', type: "button", class: "xplor-input-file__clear", onClick: this.handleClear, "aria-label": "Clear" }, "\u2715")), h("input", { key: '1b36ee20fe74f12cb0634fa8a6f11f0b18a8869c', ref: (el) => (this.fileInputRef = el), type: "file", class: "xplor-input-file__input", multiple: this.multiple, accept: this.accept, disabled: this.disabled, onChange: this.handleFileChange })), this.counter && this.selectedFiles.length > 0 && (h("div", { key: '3db41f5660476718819e7315edbc59a9fa834178', class: "xplor-input-file__counter" }, this.selectedFiles.length, " file", this.selectedFiles.length > 1 ? 's' : '', " selected")))));
+        return (h(Host, { key: '855205ba51f297ec42d8e0a6e6a8632575f14266' }, h("div", { key: 'b3f5e11bae52b44c70d44964128e7a921002dbb1', class: containerClasses }, this.label && (h("label", { key: '8ed4472b4d74227d3f383733d70fdce13724b3c2', class: "xplor-input-file__label", htmlFor: this.inputId }, this.label)), h("div", { key: '3796c38f41eb6cabb61a71341e2172d6afe588da', class: "xplor-input-file__field" }, h("span", { key: '5c252125213d25d051549308974241fa1764e77c', class: "xplor-input-file__icon" }, this.prependInnerIcon), h("div", { key: 'eb7e79be04bd2c7d6c5a38669486fafa79da2886', class: "xplor-input-file__content" }, this.selectedFiles.length === 0 ? (h("span", { class: "xplor-input-file__placeholder" }, this.placeholder)) : (h("div", { class: "xplor-input-file__chips" }, visibleFiles.map((file) => (h("div", { class: "xplor-input-file__chip", key: file.name }, h("span", { class: "xplor-input-file__chip-text" }, file.name), this.showSize && file.size && (h("span", { class: "xplor-input-file__chip-size" }, "(", this.formatFileSize(file.size), ")"))))), additionalCount > 0 && (h("span", { class: "xplor-input-file__additional" }, "+", additionalCount, " additional file", additionalCount > 1 ? 's' : ''))))), this.selectedFiles.length > 0 && !this.disabled && (h("button", { key: '3de68e44d93f65880e9db5d94a285bc36f5a5b27', type: "button", class: "xplor-input-file__clear", onClick: this.handleClear, "aria-label": "Clear" }, "\u2715")), h("input", { key: '2744056445124a7c857f4b56271cd343e50ed9f2', id: this.inputId, ref: (el) => (this.fileInputRef = el), type: "file", class: "xplor-input-file__input", multiple: this.multiple, accept: this.accept, disabled: this.disabled, onChange: this.handleFileChange, "aria-label": this.label || 'Choose file' })), this.counter && this.selectedFiles.length > 0 && (h("div", { key: '3bd470d17e927b0fbe7776ad67513bb52d91109e', class: "xplor-input-file__counter" }, this.selectedFiles.length, " file", this.selectedFiles.length > 1 ? 's' : '', " selected")))));
     }
     static get is() { return "xplor-input-file"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/xplor-input-file/xplor-input-file.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"xplor-input-file.js","sourceRoot":"","sources":["../../../src/components/xplor-input-file/xplor-input-file.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,KAAK,EAAE,MAAM,eAAe,CAAC;~~AAOrF~~,MAAM,OAAO,cAAc;IAL3B;~~QAQE~~;;WAEG;QACK,UAAK,GAAW,EAAE,CAAC;QAE3B;;WAEG;QACK,gBAAW,GAAW,gBAAgB,CAAC;QAE/C;;WAEG;QACK,UAAK,GAAW,SAAS,CAAC;QAElC;;WAEG;QACK,aAAQ,GAAY,KAAK,CAAC;QAElC;;WAEG;QACK,aAAQ,GAAY,KAAK,CAAC;QAElC;;WAEG;QACK,WAAM,GAAW,EAAE,CAAC;QAE5B;;WAEG;QACK,aAAQ,GAAW,CAAC,CAAC;QAE7B;;WAEG;QACK,YAAO,GAAY,IAAI,CAAC;QAEhC;;WAEG;QACK,aAAQ,GAAW,IAAI,CAAC;QAEhC;;WAEG;QACK,qBAAgB,GAAW,IAAI,CAAC;QAExC;;WAEG;QACM,kBAAa,GAAW,EAAE,CAAC;QAY5B,qBAAgB,GAAG,CAAC,KAAY,EAAE,EAAE;YAC1C,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B,CAAC;YAChD,IAAI,MAAM,CAAC,KAAK,EAAE,CAAC;gBACjB,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;gBAC9C,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;YACvC,CAAC;QACH,CAAC,CAAC;QAEM,gBAAW,GAAG,GAAG,EAAE;YACzB,IAAI,CAAC,aAAa,GAAG,EAAE,CAAC;YACxB,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;gBACtB,IAAI,CAAC,YAAY,CAAC,KAAK,GAAG,EAAE,CAAC;YAC/B,CAAC;YACD,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;QACzB,CAAC,CAAC;QAEM,mBAAc,GAAG,CAAC,KAAa,EAAU,EAAE;YACjD,IAAI,KAAK,KAAK,CAAC;gBAAE,OAAO,SAAS,CAAC;YAClC,MAAM,CAAC,GAAG,IAAI,CAAC;YACf,MAAM,KAAK,GAAG,CAAC,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;YAC1C,MAAM,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;YACpD,OAAO,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,GAAG,CAAC,GAAG,GAAG,GAAG,GAAG,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC;QACzE,CAAC,CAAC;~~KA4EH~~;~~IA1EC~~,MAAM;QACJ,MAAM,gBAAgB,GAAG;YACvB,kBAAkB,EAAE,IAAI;YACxB,4BAA4B,EAAE,IAAI,CAAC,QAAQ;SAC5C,CAAC;QAEF,MAAM,YAAY,GAAG,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;QAChE,MAAM,eAAe,GAAG,IAAI,CAAC,aAAa,CAAC,MAAM,GAAG,IAAI,CAAC,QAAQ,CAAC;QAElE,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,gBAAgB;gBACzB,IAAI,CAAC,KAAK,IAAI,CACb,8DAAO,KAAK,EAAC,yBAAyB,~~IAAE~~,IAAI,CAAC,KAAK,CAAS,~~CAC5D~~;gBAED,4DAAK,KAAK,EAAC,yBAAyB;oBAClC,6DAAM,KAAK,EAAC,wBAAwB,IAAE,IAAI,CAAC,gBAAgB,CAAQ;oBAEnE,4DAAK,KAAK,EAAC,2BAA2B,IACnC,IAAI,CAAC,aAAa,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,CACjC,YAAM,KAAK,EAAC,+BAA+B,IAAE,IAAI,CAAC,WAAW,CAAQ,CACtE,CAAC,CAAC,CAAC,CACF,WAAK,KAAK,EAAC,yBAAyB;wBACjC,YAAY,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAC1B,WAAK,KAAK,EAAC,wBAAwB,EAAC,GAAG,EAAE,IAAI,CAAC,IAAI;4BAChD,YAAM,KAAK,EAAC,6BAA6B,IAAE,IAAI,CAAC,IAAI,CAAQ;4BAC3D,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,IAAI,IAAI,CAC7B,YAAM,KAAK,EAAC,6BAA6B;;gCACrC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC;oCAC3B,CACR,CACG,CACP,CAAC;wBACD,eAAe,GAAG,CAAC,IAAI,CACtB,YAAM,KAAK,EAAC,8BAA8B;;4BACtC,eAAe;;4BAAkB,eAAe,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAC5D,CACR,CACG,CACP,CACG;oBAEL,IAAI,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAClD,+DACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,yBAAyB,EAC/B,OAAO,EAAE,IAAI,CAAC,WAAW,gBACd,OAAO,aAGX,CACV;oBAED,8DACE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC,EACrC,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,yBAAyB,EAC/B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,gBAAgB,~~GAC/B~~,CACE;gBAEL,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC,IAAI,CAChD,4DAAK,KAAK,EAAC,2BAA2B;oBACnC,IAAI,CAAC,aAAa,CAAC,MAAM;;oBAAO,IAAI,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE;gCACrE,CACP,CACG,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter, State } from '@stencil/core';\n\n@Component({\n tag: 'xplor-input-file',\n styleUrl: 'xplor-input-file.scss',\n scoped: true,\n})\nexport class XplorInputFile {\n private fileInputRef: HTMLInputElement;\n\n /*\n Input label\n /\n @Prop() label: string = '';\n\n /\n Input placeholder\n /\n @Prop() placeholder: string = 'Choose file(s)';\n\n /\n Border/focus color\n /\n @Prop() color: string = '#008480';\n\n /\n Whether the input is disabled\n /\n @Prop() disabled: boolean = false;\n\n /\n Whether multiple files can be selected\n /\n @Prop() multiple: boolean = false;\n\n /\n Accepted file types\n /\n @Prop() accept: string = '';\n\n /\n Maximum number of chips to show\n /\n @Prop() maxChips: number = 1;\n\n /\n Whether to show file counter\n /\n @Prop() counter: boolean = true;\n\n /\n Whether to show file size\n /\n @Prop() showSize: number = 1000;\n\n /\n Prepend inner icon (default: paperclip)\n /\n @Prop() prependInnerIcon: string = '📎';\n\n /\n Files selected\n /\n @State() selectedFiles: File[] = [];\n\n /\n Attach/change event\n /\n @Event() attach: EventEmitter<File[]>;\n\n /\n Clear event\n /\n @Event() xplorClear: EventEmitter<void>;\n\n private handleFileChange = (event: Event) => {\n const target = event.target as HTMLInputElement;\n if (target.files) {\n this.selectedFiles = Array.from(target.files);\n this.attach.emit(this.selectedFiles);\n }\n };\n\n private handleClear = () => {\n this.selectedFiles = [];\n if (this.fileInputRef) {\n this.fileInputRef.value = '';\n }\n this.xplorClear.emit();\n };\n\n private formatFileSize = (bytes: number): string => {\n if (bytes === 0) return '0 Bytes';\n const k = 1024;\n const sizes = ['Bytes', 'KB', 'MB', 'GB'];\n const i = Math.floor(Math.log(bytes) / Math.log(k));\n return Math.round(bytes / Math.pow(k, i) 100) / 100 + ' ' + sizes[i];\n };\n\n render() {\n const containerClasses = {\n 'xplor-input-file': true,\n 'xplor-input-file--disabled': this.disabled,\n };\n\n const visibleFiles = this.selectedFiles.slice(0, this.maxChips);\n const additionalCount = this.selectedFiles.length - this.maxChips;\n\n return (\n <Host>\n <div class={containerClasses}>\n {this.label && (\n <label class=\"xplor-input-file__label\">{this.label}</label>\n )}\n\n <div class=\"xplor-input-file__field\">\n <span class=\"xplor-input-file__icon\">{this.prependInnerIcon}</span>\n\n <div class=\"xplor-input-file__content\">\n {this.selectedFiles.length === 0 ? (\n <span class=\"xplor-input-file__placeholder\">{this.placeholder}</span>\n ) : (\n <div class=\"xplor-input-file__chips\">\n {visibleFiles.map((file) => (\n <div class=\"xplor-input-file__chip\" key={file.name}>\n <span class=\"xplor-input-file__chip-text\">{file.name}</span>\n {this.showSize && file.size && (\n <span class=\"xplor-input-file__chip-size\">\n ({this.formatFileSize(file.size)})\n </span>\n )}\n </div>\n ))}\n {additionalCount > 0 && (\n <span class=\"xplor-input-file__additional\">\n +{additionalCount} additional file{additionalCount > 1 ? 's' : ''}\n </span>\n )}\n </div>\n )}\n </div>\n\n {this.selectedFiles.length > 0 && !this.disabled && (\n <button\n type=\"button\"\n class=\"xplor-input-file__clear\"\n onClick={this.handleClear}\n aria-label=\"Clear\"\n >\n ✕\n </button>\n )}\n\n <input\n ref={(el) => (this.fileInputRef = el)}\n type=\"file\"\n class=\"xplor-input-file__input\"\n multiple={this.multiple}\n accept={this.accept}\n disabled={this.disabled}\n onChange={this.handleFileChange}\n />\n </div>\n\n {this.counter && this.selectedFiles.length > 0 && (\n <div class=\"xplor-input-file__counter\">\n {this.selectedFiles.length} file{this.selectedFiles.length > 1 ? 's' : ''} selected\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"xplor-input-file.js","sourceRoot":"","sources":["../../../src/components/xplor-input-file/xplor-input-file.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter, State } from '@stencil/core';\n\nlet inputFileIdCounter = 0;\n\n@Component({\n tag: 'xplor-input-file',\n styleUrl: 'xplor-input-file.scss',\n scoped: true,\n})\nexport class XplorInputFile {\n private fileInputRef: HTMLInputElement;\n private inputId = `xplor-input-file-${++inputFileIdCounter}`;\n\n /*\n Input label\n /\n @Prop() label: string = '';\n\n /\n Input placeholder\n /\n @Prop() placeholder: string = 'Choose file(s)';\n\n /\n Border/focus color\n /\n @Prop() color: string = '#008480';\n\n /\n Whether the input is disabled\n /\n @Prop() disabled: boolean = false;\n\n /\n Whether multiple files can be selected\n /\n @Prop() multiple: boolean = false;\n\n /\n Accepted file types\n /\n @Prop() accept: string = '';\n\n /\n Maximum number of chips to show\n /\n @Prop() maxChips: number = 1;\n\n /\n Whether to show file counter\n /\n @Prop() counter: boolean = true;\n\n /\n Whether to show file size\n /\n @Prop() showSize: number = 1000;\n\n /\n Prepend inner icon (default: paperclip)\n /\n @Prop() prependInnerIcon: string = '📎';\n\n /\n Files selected\n /\n @State() selectedFiles: File[] = [];\n\n /\n Attach/change event\n /\n @Event() attach: EventEmitter<File[]>;\n\n /\n Clear event\n /\n @Event() xplorClear: EventEmitter<void>;\n\n private handleFileChange = (event: Event) => {\n const target = event.target as HTMLInputElement;\n if (target.files) {\n this.selectedFiles = Array.from(target.files);\n this.attach.emit(this.selectedFiles);\n }\n };\n\n private handleClear = () => {\n this.selectedFiles = [];\n if (this.fileInputRef) {\n this.fileInputRef.value = '';\n }\n this.xplorClear.emit();\n };\n\n private formatFileSize = (bytes: number): string => {\n if (bytes === 0) return '0 Bytes';\n const k = 1024;\n const sizes = ['Bytes', 'KB', 'MB', 'GB'];\n const i = Math.floor(Math.log(bytes) / Math.log(k));\n return Math.round(bytes / Math.pow(k, i) 100) / 100 + ' ' + sizes[i];\n };\n\n render() {\n const containerClasses = {\n 'xplor-input-file': true,\n 'xplor-input-file--disabled': this.disabled,\n };\n\n const visibleFiles = this.selectedFiles.slice(0, this.maxChips);\n const additionalCount = this.selectedFiles.length - this.maxChips;\n\n return (\n <Host>\n <div class={containerClasses}>\n {this.label && (\n <label class=\"xplor-input-file__label\" htmlFor={this.inputId}>{this.label}</label>\n )}\n\n <div class=\"xplor-input-file__field\">\n <span class=\"xplor-input-file__icon\">{this.prependInnerIcon}</span>\n\n <div class=\"xplor-input-file__content\">\n {this.selectedFiles.length === 0 ? (\n <span class=\"xplor-input-file__placeholder\">{this.placeholder}</span>\n ) : (\n <div class=\"xplor-input-file__chips\">\n {visibleFiles.map((file) => (\n <div class=\"xplor-input-file__chip\" key={file.name}>\n <span class=\"xplor-input-file__chip-text\">{file.name}</span>\n {this.showSize && file.size && (\n <span class=\"xplor-input-file__chip-size\">\n ({this.formatFileSize(file.size)})\n </span>\n )}\n </div>\n ))}\n {additionalCount > 0 && (\n <span class=\"xplor-input-file__additional\">\n +{additionalCount} additional file{additionalCount > 1 ? 's' : ''}\n </span>\n )}\n </div>\n )}\n </div>\n\n {this.selectedFiles.length > 0 && !this.disabled && (\n <button\n type=\"button\"\n class=\"xplor-input-file__clear\"\n onClick={this.handleClear}\n aria-label=\"Clear\"\n >\n ✕\n </button>\n )}\n\n <input\n id={this.inputId}\n ref={(el) => (this.fileInputRef = el)}\n type=\"file\"\n class=\"xplor-input-file__input\"\n multiple={this.multiple}\n accept={this.accept}\n disabled={this.disabled}\n onChange={this.handleFileChange}\n aria-label={this.label \|\| 'Choose file'}\n />\n </div>\n\n {this.counter && this.selectedFiles.length > 0 && (\n <div class=\"xplor-input-file__counter\">\n {this.selectedFiles.length} file{this.selectedFiles.length > 1 ? 's' : ''} selected\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/xplor-input-search/xplor-input-search.js CHANGED Viewed

@@ -1,6 +1,8 @@
 import { Host, h } from "@stencil/core";
+let inputSearchIdCounter = 0;
 export class XplorInputSearch {
     constructor() {
+        this.inputId = `xplor-input-search-${++inputSearchIdCounter}`;
         /**
          * Search value
          */
@@ -46,9 +48,9 @@ export class XplorInputSearch {
             'xplor-input-search--focused': this.isFocused,
             'xplor-input-search--disabled': this.disabled,
         };
-        return (h(Host, { key: '5b56e2a7105a8046e9d8a0260e4ccc3e3f74f2d1' }, h("div", { key: '1056cd0367b2a02a9ca0b6327ee64fe451aa822f', class: containerClasses }, h("div", { key: 'b52566008beabead371696c73213c0c44d71caad', class: "xplor-input-search__field" }, h("input", { key: '59c5434a7cedc56128d8acb5d3718e89a4521f60', type: "text", class: "xplor-input-search__input", value: this.value, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: () => (this.isFocused = true), onBlur: () => (this.isFocused = false), style: {
+        return (h(Host, { key: '159334f666a4d38aaeeba61788fc73ae85511f1c' }, h("div", { key: 'de6a7c4d9097bdabc955bd2f85ce9c6f9f35aa19', class: containerClasses }, h("div", { key: 'b14ca74cb368ef4efa67330f5b5fc76b54828c33', class: "xplor-input-search__field" }, h("input", { key: '1f8e4d2842d4f45fa3ca7e2b3de7b697a75abd02', id: this.inputId, type: "search", class: "xplor-input-search__input", value: this.value, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: () => (this.isFocused = true), onBlur: () => (this.isFocused = false), style: {
                 backgroundColor: this.bgColor,
-            } }), h("slot", { key: '8a1ff9183e52e0b1907a2d592cf26ce92b8c3eb2', name: "append-inner" }, h("button", { key: '9680a805a44074e1ca6544fc6cc1b6dc56b3cd3c', type: "button", class: "xplor-input-search__button", onClick: this.handleSearch, disabled: this.disabled, "data-testid": "input-search-button" }, h("svg", { key: 'b5889fd0aed963aa7f31a11fa705597caaa3d000', viewBox: "0 0 24 24", class: "xplor-input-search__icon" }, h("path", { key: '78cd1c79a24b46b662d3be5bea287db253c0abe9', d: "M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z" }))))))));
+            }, role: "searchbox", "aria-label": "Search" }), h("slot", { key: '3b914900d3b529b142ec31d8835ebfa83497b877', name: "append-inner" }, h("button", { key: '83ffab122b79d64e5fadb6ff0abf508847ecb721', type: "button", class: "xplor-input-search__button", onClick: this.handleSearch, disabled: this.disabled, "data-testid": "input-search-button", "aria-label": "Search" }, h("svg", { key: 'b0d8e393c391b3ca214bb1cd8b1673eb3b634a88', viewBox: "0 0 24 24", class: "xplor-input-search__icon" }, h("path", { key: '78d38f7b9e578cf8519edcc7eea19ffa294aba74', d: "M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z" }))))))));
     }
     static get is() { return "xplor-input-search"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/xplor-input-search/xplor-input-search.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"xplor-input-search.js","sourceRoot":"","sources":["../../../src/components/xplor-input-search/xplor-input-search.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,KAAK,EAAE,MAAM,eAAe,CAAC;~~AAOrF~~,MAAM,OAAO,gBAAgB;IAL7B;~~QAME~~;;WAEG;QACsB,UAAK,GAAW,EAAE,CAAC;QAE5C;;WAEG;QACK,gBAAW,GAAW,WAAW,CAAC;QAE1C;;WAEG;QACK,YAAO,GAAW,OAAO,CAAC;QAElC;;WAEG;QACK,UAAK,GAAW,SAAS,CAAC;QAElC;;WAEG;QACK,aAAQ,GAAY,KAAK,CAAC;QAElC;;WAEG;QACK,YAAO,GAA0C,SAAS,CAAC;QAO1D,cAAS,GAAY,KAAK,CAAC;QAE5B,gBAAW,GAAG,CAAC,KAAY,EAAE,EAAE;YACrC,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B,CAAC;YAChD,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC;QAC5B,CAAC,CAAC;QAEM,iBAAY,GAAG,GAAG,EAAE;YAC1B,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC/B,CAAC,CAAC;QAEM,kBAAa,GAAG,CAAC,KAAoB,EAAE,EAAE;YAC/C,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;gBAC1B,IAAI,CAAC,YAAY,EAAE,CAAC;YACtB,CAAC;QACH,CAAC,CAAC;~~KA+CH~~;~~IA7CC~~,MAAM;QACJ,MAAM,gBAAgB,GAAG;YACvB,oBAAoB,EAAE,IAAI;YAC1B,CAAC,uBAAuB,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,IAAI;YAC7C,6BAA6B,EAAE,IAAI,CAAC,SAAS;YAC7C,8BAA8B,EAAE,IAAI,CAAC,QAAQ;SAC9C,CAAC;QAEF,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,gBAAgB;gBAC1B,4DAAK,KAAK,EAAC,2BAA2B;oBACpC,8DACE,IAAI,EAAC,~~MAAM~~,~~EACX~~,KAAK,EAAC,2BAA2B,EACjC,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,SAAS,EAAE,IAAI,CAAC,aAAa,EAC7B,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,EACtC,MAAM,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,EACtC,KAAK,EAAE;4BACL,eAAe,EAAE,IAAI,CAAC,OAAO;yBAC9B,~~GACD~~;oBAEF,6DAAM,IAAI,EAAC,cAAc;wBACvB,+DACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,QAAQ,EAAE,IAAI,CAAC,QAAQ,iBACX,qBAAqB;~~4BAEjC~~,4DAAK,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,0BAA0B;gCACvD,6DAAM,CAAC,EAAC,mQAAmQ,GAAG,CAC1Q,CACC,CACJ,CACH,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter, State } from '@stencil/core';\n\n@Component({\n tag: 'xplor-input-search',\n styleUrl: 'xplor-input-search.scss',\n scoped: true,\n})\nexport class XplorInputSearch {\n /*\n Search value\n /\n @Prop({ mutable: true }) value: string = '';\n\n /\n Input placeholder\n /\n @Prop() placeholder: string = 'Search...';\n\n /\n Background color\n /\n @Prop() bgColor: string = 'white';\n\n /\n Button/focus color\n /\n @Prop() color: string = '#008480';\n\n /\n Whether the input is disabled\n /\n @Prop() disabled: boolean = false;\n\n /\n Density (compact, default, comfortable)\n /\n @Prop() density: 'compact' \| 'default' \| 'comfortable' = 'default';\n\n /\n Search event (triggered on button click or Enter key)\n */\n @Event() search: EventEmitter<string>;\n\n @State() isFocused: boolean = false;\n\n private handleInput = (event: Event) => {\n const target = event.target as HTMLInputElement;\n this.value = target.value;\n };\n\n private handleSearch = () => {\n this.search.emit(this.value);\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'Enter') {\n this.handleSearch();\n }\n };\n\n render() {\n const containerClasses = {\n 'xplor-input-search': true,\n [`xplor-input-search--${this.density}`]: true,\n 'xplor-input-search--focused': this.isFocused,\n 'xplor-input-search--disabled': this.disabled,\n };\n\n return (\n <Host>\n <div class={containerClasses}>\n <div class=\"xplor-input-search__field\">\n <input\n type=\"~~text~~\"\n class=\"xplor-input-search__input\"\n value={this.value}\n placeholder={this.placeholder}\n disabled={this.disabled}\n onInput={this.handleInput}\n onKeyDown={this.handleKeyDown}\n onFocus={() => (this.isFocused = true)}\n onBlur={() => (this.isFocused = false)}\n style={{\n backgroundColor: this.bgColor,\n }}\n />\n\n <slot name=\"append-inner\">\n <button\n type=\"button\"\n class=\"xplor-input-search__button\"\n onClick={this.handleSearch}\n disabled={this.disabled}\n data-testid=\"input-search-button\"\n >\n <svg viewBox=\"0 0 24 24\" class=\"xplor-input-search__icon\">\n <path d=\"M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z\" />\n </svg>\n </button>\n </slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"xplor-input-search.js","sourceRoot":"","sources":["../../../src/components/xplor-input-search/xplor-input-search.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter, State } from '@stencil/core';\n\nlet inputSearchIdCounter = 0;\n\n@Component({\n tag: 'xplor-input-search',\n styleUrl: 'xplor-input-search.scss',\n scoped: true,\n})\nexport class XplorInputSearch {\n private inputId = `xplor-input-search-${++inputSearchIdCounter}`;\n /*\n Search value\n /\n @Prop({ mutable: true }) value: string = '';\n\n /\n Input placeholder\n /\n @Prop() placeholder: string = 'Search...';\n\n /\n Background color\n /\n @Prop() bgColor: string = 'white';\n\n /\n Button/focus color\n /\n @Prop() color: string = '#008480';\n\n /\n Whether the input is disabled\n /\n @Prop() disabled: boolean = false;\n\n /\n Density (compact, default, comfortable)\n /\n @Prop() density: 'compact' \| 'default' \| 'comfortable' = 'default';\n\n /\n Search event (triggered on button click or Enter key)\n */\n @Event() search: EventEmitter<string>;\n\n @State() isFocused: boolean = false;\n\n private handleInput = (event: Event) => {\n const target = event.target as HTMLInputElement;\n this.value = target.value;\n };\n\n private handleSearch = () => {\n this.search.emit(this.value);\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'Enter') {\n this.handleSearch();\n }\n };\n\n render() {\n const containerClasses = {\n 'xplor-input-search': true,\n [`xplor-input-search--${this.density}`]: true,\n 'xplor-input-search--focused': this.isFocused,\n 'xplor-input-search--disabled': this.disabled,\n };\n\n return (\n <Host>\n <div class={containerClasses}>\n <div class=\"xplor-input-search__field\">\n <input\n id={this.inputId}\n type=\"search\"\n class=\"xplor-input-search__input\"\n value={this.value}\n placeholder={this.placeholder}\n disabled={this.disabled}\n onInput={this.handleInput}\n onKeyDown={this.handleKeyDown}\n onFocus={() => (this.isFocused = true)}\n onBlur={() => (this.isFocused = false)}\n style={{\n backgroundColor: this.bgColor,\n }}\n role=\"searchbox\"\n aria-label=\"Search\"\n />\n\n <slot name=\"append-inner\">\n <button\n type=\"button\"\n class=\"xplor-input-search__button\"\n onClick={this.handleSearch}\n disabled={this.disabled}\n data-testid=\"input-search-button\"\n aria-label=\"Search\"\n >\n <svg viewBox=\"0 0 24 24\" class=\"xplor-input-search__icon\">\n <path d=\"M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z\" />\n </svg>\n </button>\n </slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/xplor-input-select/xplor-input-select.js CHANGED Viewed

@@ -56,6 +56,7 @@ export class XplorInputSelect {
         this.isOpen = false;
         this.isFocused = false;
         this.menuPosition = null;
+        this.highlightedIndex = -1;
         this.updateMenuPosition = () => {
             if (this.fieldRef) {
                 const rect = this.fieldRef.getBoundingClientRect();
@@ -75,8 +76,12 @@ export class XplorInputSelect {
             if (!this.disabled && !this.readonly) {
                 if (!this.isOpen) {
                     this.updateMenuPosition();
+                    this.highlightedIndex = -1;
                 }
                 this.isOpen = !this.isOpen;
+                if (!this.isOpen) {
+                    this.highlightedIndex = -1;
+                }
             }
         };
         this.handleOptionClick = (option) => {
@@ -121,6 +126,82 @@ export class XplorInputSelect {
     disconnectedCallback() {
         document.removeEventListener('click', this.handleOutsideClick);
     }
+    handleKeyDown(event) {
+        var _a;
+        const totalOptions = this.options.length;
+        if (totalOptions === 0)
+            return;
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                if (!this.isOpen) {
+                    this.updateMenuPosition();
+                    this.isOpen = true;
+                    this.highlightedIndex = 0;
+                }
+                else {
+                    this.highlightedIndex = this.highlightedIndex < totalOptions - 1 ? this.highlightedIndex + 1 : 0;
+                }
+                this.scrollToHighlightedOption();
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                if (!this.isOpen) {
+                    this.updateMenuPosition();
+                    this.isOpen = true;
+                    this.highlightedIndex = totalOptions - 1;
+                }
+                else {
+                    this.highlightedIndex = this.highlightedIndex > 0 ? this.highlightedIndex - 1 : totalOptions - 1;
+                }
+                this.scrollToHighlightedOption();
+                break;
+            case 'Enter':
+            case ' ':
+                event.preventDefault();
+                if (this.isOpen && this.highlightedIndex >= 0 && this.highlightedIndex < totalOptions) {
+                    this.handleOptionClick(this.options[this.highlightedIndex]);
+                }
+                else if (!this.isOpen) {
+                    this.toggleDropdown();
+                }
+                break;
+            case 'Escape':
+                event.preventDefault();
+                this.isOpen = false;
+                this.highlightedIndex = -1;
+                (_a = this.fieldRef) === null || _a === void 0 ? void 0 : _a.focus();
+                break;
+            case 'Home':
+                if (this.isOpen) {
+                    event.preventDefault();
+                    this.highlightedIndex = 0;
+                    this.scrollToHighlightedOption();
+                }
+                break;
+            case 'End':
+                if (this.isOpen) {
+                    event.preventDefault();
+                    this.highlightedIndex = totalOptions - 1;
+                    this.scrollToHighlightedOption();
+                }
+                break;
+            case 'Tab':
+                this.isOpen = false;
+                this.highlightedIndex = -1;
+                break;
+        }
+    }
+    scrollToHighlightedOption() {
+        requestAnimationFrame(() => {
+            if (this.selectRef && this.highlightedIndex >= 0) {
+                const highlightedEl = this.selectRef.querySelector(`[data-option-index="${this.highlightedIndex}"]`);
+                if (highlightedEl) {
+                    highlightedEl.scrollIntoView({ block: 'nearest' });
+                }
+            }
+        });
+    }
     render() {
         const containerClasses = {
             'xplor-input-select': true,
@@ -130,15 +211,31 @@ export class XplorInputSelect {
             'xplor-input-select--error': !!this.error,
         };
         const showDetails = this.hideDetails === false || (this.hideDetails === 'auto' && (this.error || this.helperText));
-        return (h(Host, { key: 'e5865a9d55129458a5357cf05f15115f1007019b' }, h("div", { key: '66d54f5d1bb7514301427de3ad5bbf7746309cec', class: containerClasses, ref: (el) => (this.selectRef = el) }, this.label && (h("label", { key: 'dfa166182add3a83872a05e4a20b77f654921231', class: "xplor-input-select__label" }, this.label, this.required && h("span", { key: '0da6997f30e1861b35e67e80974fce115560cc9b', class: "xplor-input-select__required" }, "*"))), h("div", { key: 'f828546abc6121bcabcdbc905a0e43aa012bb5a9', class: "xplor-input-select__field", onClick: this.toggleDropdown, ref: (el) => (this.fieldRef = el) }, h("div", { key: '13692cc57a5c3c1da3915ca80f8324d091732ebb', class: "xplor-input-select__value" }, this.getDisplayValue()), h("span", { key: '0a372cf751bc459d957130c50fb4387405e9f21f', class: "xplor-input-select__arrow" }, this.isOpen ? '▲' : '▼')), this.isOpen && this.menuPosition && (h("div", { key: '13e8536c6ce8220041364675d459dc2ee3ef7613', class: "xplor-input-select__menu", style: {
+        const listboxId = 'input-select-listbox';
+        const labelId = 'input-select-label';
+        const errorId = 'input-select-error';
+        const helperId = 'input-select-helper';
+        const activeDescendantId = this.highlightedIndex >= 0 ? `input-select-option-${this.highlightedIndex}` : undefined;
+        // Build aria-describedby from error/helper text
+        const describedByParts = [];
+        if (this.error)
+            describedByParts.push(errorId);
+        if (!this.error && this.helperText)
+            describedByParts.push(helperId);
+        const ariaDescribedBy = describedByParts.length > 0 ? describedByParts.join(' ') : undefined;
+        return (h(Host, { key: '4c7693dfd1a0a4ac74ed4f4ff5024d4375acd3a8' }, h("div", { key: 'bcd180aa7fbccfae34ce29b1c9bbe6329bf87476', class: containerClasses, ref: (el) => (this.selectRef = el) }, this.label && (h("label", { key: '85c20aecaf25a7fc260c79a15e4d4bb30804213d', class: "xplor-input-select__label", id: labelId }, this.label, this.required && h("span", { key: '82c8dbcb5d7e77c42e0a6e54b69cbb514563ac2b', class: "xplor-input-select__required" }, "*"))), h("div", { key: 'b7cfc5c895fc57f3eac6e66aa5fd431a89dd07bb', class: "xplor-input-select__field", onClick: this.toggleDropdown, ref: (el) => (this.fieldRef = el), role: "combobox", tabindex: this.disabled ? -1 : 0, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "listbox", "aria-controls": this.isOpen ? listboxId : undefined, "aria-activedescendant": activeDescendantId, "aria-labelledby": this.label ? labelId : undefined, "aria-label": !this.label ? (this.ariaLabel || this.placeholder) : undefined, "aria-describedby": ariaDescribedBy, "aria-required": this.required ? 'true' : undefined, "aria-disabled": this.disabled ? 'true' : undefined }, h("div", { key: '1125703089a34186cbbfaba5e51d6ea50c5f4239', class: "xplor-input-select__value" }, this.getDisplayValue()), h("span", { key: 'e33ab0424fddc90d1f48ef2b285e70fd3eeaff8a', class: "xplor-input-select__arrow", "aria-hidden": "true" }, this.isOpen ? '▲' : '▼')), this.isOpen && this.menuPosition && (h("div", { key: 'b1fb47a1d217c4156250bded2c9e9ae9bdebf603', class: "xplor-input-select__menu", role: "listbox", id: listboxId, "aria-label": this.label || this.ariaLabel || 'Options', "aria-multiselectable": this.multiple ? 'true' : undefined, style: {
                 position: 'fixed',
                 top: `${this.menuPosition.top}px`,
                 left: `${this.menuPosition.left}px`,
                 width: `${this.menuPosition.width}px`,
-            } }, this.options.length === 0 ? (h("div", { class: "xplor-input-select__empty" }, "No options available")) : (this.options.map((option) => (h("div", { key: option.value, class: {
-                'xplor-input-select__option': true,
-                'xplor-input-select__option--selected': this.isSelected(option),
-            }, onClick: () => this.handleOptionClick(option) }, this.multiple && (h("input", { type: "checkbox", class: "xplor-input-select__checkbox", checked: this.isSelected(option), readOnly: true })), h("div", { class: "xplor-input-select__option-content" }, h("div", { class: "xplor-input-select__option-title" }, option.title), option.subtitle && (h("div", { class: "xplor-input-select__option-subtitle" }, option.subtitle))))))))), showDetails && (h("div", { key: '240b60564cf80cc66b879bb4431885270c64db5b', class: "xplor-input-select__details" }, this.error && h("div", { key: 'bbb2a2e796650c153e901aa87188a386c2f5b9f7', class: "xplor-input-select__error-message" }, this.error), !this.error && this.helperText && h("div", { key: 'a36ccb1626e1b5a9d19f2ee106213fd943177aa8', class: "xplor-input-select__helper-text" }, this.helperText))))));
+            } }, this.options.length === 0 ? (h("div", { class: "xplor-input-select__empty", role: "option", "aria-disabled": "true" }, "No options available")) : (this.options.map((option, index) => {
+            const selected = this.isSelected(option);
+            return (h("div", { key: option.value, id: `input-select-option-${index}`, "data-option-index": index, role: "option", "aria-selected": selected ? 'true' : 'false', class: {
+                    'xplor-input-select__option': true,
+                    'xplor-input-select__option--selected': selected,
+                    'xplor-input-select__option--highlighted': index === this.highlightedIndex,
+                }, onClick: () => this.handleOptionClick(option) }, this.multiple && (h("input", { type: "checkbox", class: "xplor-input-select__checkbox", checked: selected, readOnly: true, tabindex: -1, "aria-checked": selected ? 'true' : 'false', "aria-hidden": "true" })), h("div", { class: "xplor-input-select__option-content" }, h("div", { class: "xplor-input-select__option-title" }, option.title), option.subtitle && (h("div", { class: "xplor-input-select__option-subtitle" }, option.subtitle)))));
+        })))), showDetails && (h("div", { key: '0a4f46b2460cd068fe27635cbe45d054c06e9538', class: "xplor-input-select__details" }, this.error && h("div", { key: '2d0f44af6a4c115bf3ed66764092b29cf117d57e', class: "xplor-input-select__error-message", id: errorId, role: "alert" }, this.error), !this.error && this.helperText && h("div", { key: 'ee93ffdd070c853b1d779235d6c57e368d75bcf1', class: "xplor-input-select__helper-text", id: helperId }, this.helperText))))));
     }
     static get is() { return "xplor-input-select"; }
     static get encapsulation() { return "scoped"; }
@@ -154,6 +251,25 @@ export class XplorInputSelect {
     }
     static get properties() {
         return {
+            "ariaLabel": {
+                "type": "string",
+                "attribute": "aria-label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible label for the select when no visible label is provided"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
             "value": {
                 "type": "any",
                 "attribute": "value",
@@ -224,7 +340,7 @@ export class XplorInputSelect {
                     "references": {
                         "SelectOption": {
                             "location": "local",
-                            "path": "/Users/darryn.lee-warden/Documents/DEV/xplor_design_system/apps/core-stencil-components/src/components/xplor-input-select/xplor-input-select.tsx",
+                            "path": "/Users/darrynlee-warden/Documents/DEV/xplor/xplor_design_system/apps/core-stencil-components/src/components/xplor-input-select/xplor-input-select.tsx",
                             "id": "src/components/xplor-input-select/xplor-input-select.tsx::SelectOption"
                         }
                     }
@@ -425,7 +541,8 @@ export class XplorInputSelect {
         return {
             "isOpen": {},
             "isFocused": {},
-            "menuPosition": {}
+            "menuPosition": {},
+            "highlightedIndex": {}
         };
     }
     static get events() {
@@ -446,5 +563,15 @@ export class XplorInputSelect {
                 }
             }];
     }
+    static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "keydown",
+                "method": "handleKeyDown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
 }
 //# sourceMappingURL=xplor-input-select.js.map