@tessera-ui/core 0.4.0
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.
- package/LICENSE +21 -0
- package/README.md +225 -0
- package/dist/cjs/aria-CeYIvz3U.js +94 -0
- package/dist/cjs/aria-CeYIvz3U.js.map +1 -0
- package/dist/cjs/index-Bel_x2OU.js +2401 -0
- package/dist/cjs/index-Bel_x2OU.js.map +1 -0
- package/dist/cjs/index.cjs.js +155 -0
- package/dist/cjs/index.cjs.js.map +1 -0
- package/dist/cjs/loader.cjs.js +15 -0
- package/dist/cjs/loader.cjs.js.map +1 -0
- package/dist/cjs/lucide-B1gCqJ3G.js +28324 -0
- package/dist/cjs/lucide-B1gCqJ3G.js.map +1 -0
- package/dist/cjs/tessera-ui.cjs.js +27 -0
- package/dist/cjs/tessera-ui.cjs.js.map +1 -0
- package/dist/cjs/ts-accordion-item.cjs.entry.js +65 -0
- package/dist/cjs/ts-accordion-item.cjs.entry.js.map +1 -0
- package/dist/cjs/ts-accordion.cjs.entry.js +36 -0
- package/dist/cjs/ts-accordion.cjs.entry.js.map +1 -0
- package/dist/cjs/ts-alert.cjs.entry.js +60 -0
- package/dist/cjs/ts-alert.cjs.entry.js.map +1 -0
- package/dist/cjs/ts-avatar.cjs.entry.js +54 -0
- package/dist/cjs/ts-avatar.cjs.entry.js.map +1 -0
- package/dist/cjs/ts-badge.cjs.entry.js +38 -0
- package/dist/cjs/ts-badge.cjs.entry.js.map +1 -0
- package/dist/cjs/ts-banner.cjs.entry.js +67 -0
- package/dist/cjs/ts-banner.cjs.entry.js.map +1 -0
- package/dist/cjs/ts-breadcrumb-item.cjs.entry.js +28 -0
- package/dist/cjs/ts-breadcrumb-item.cjs.entry.js.map +1 -0
- package/dist/cjs/ts-breadcrumb.cjs.entry.js +35 -0
- package/dist/cjs/ts-breadcrumb.cjs.entry.js.map +1 -0
- package/dist/cjs/ts-button.cjs.entry.js +88 -0
- package/dist/cjs/ts-button.cjs.entry.js.map +1 -0
- package/dist/cjs/ts-card.cjs.entry.js +35 -0
- package/dist/cjs/ts-card.cjs.entry.js.map +1 -0
- package/dist/cjs/ts-checkbox.cjs.entry.js +68 -0
- package/dist/cjs/ts-checkbox.cjs.entry.js.map +1 -0
- package/dist/cjs/ts-chip.cjs.entry.js +76 -0
- package/dist/cjs/ts-chip.cjs.entry.js.map +1 -0
- package/dist/cjs/ts-container.cjs.entry.js +28 -0
- package/dist/cjs/ts-container.cjs.entry.js.map +1 -0
- package/dist/cjs/ts-date-picker.cjs.entry.js +229 -0
- package/dist/cjs/ts-date-picker.cjs.entry.js.map +1 -0
- package/dist/cjs/ts-dialog.cjs.entry.js +109 -0
- package/dist/cjs/ts-dialog.cjs.entry.js.map +1 -0
- package/dist/cjs/ts-divider.cjs.entry.js +33 -0
- package/dist/cjs/ts-divider.cjs.entry.js.map +1 -0
- package/dist/cjs/ts-drawer.cjs.entry.js +113 -0
- package/dist/cjs/ts-drawer.cjs.entry.js.map +1 -0
- package/dist/cjs/ts-empty-state.cjs.entry.js +32 -0
- package/dist/cjs/ts-empty-state.cjs.entry.js.map +1 -0
- package/dist/cjs/ts-file-upload.cjs.entry.js +122 -0
- package/dist/cjs/ts-file-upload.cjs.entry.js.map +1 -0
- package/dist/cjs/ts-grid.cjs.entry.js +37 -0
- package/dist/cjs/ts-grid.cjs.entry.js.map +1 -0
- package/dist/cjs/ts-icon-CfbhgAgr.js +161 -0
- package/dist/cjs/ts-icon-CfbhgAgr.js.map +1 -0
- package/dist/cjs/ts-icon.cjs.entry.js +11 -0
- package/dist/cjs/ts-icon.cjs.entry.js.map +1 -0
- package/dist/cjs/ts-input.cjs.entry.js +130 -0
- package/dist/cjs/ts-input.cjs.entry.js.map +1 -0
- package/dist/cjs/ts-menu-item.cjs.entry.js +65 -0
- package/dist/cjs/ts-menu-item.cjs.entry.js.map +1 -0
- package/dist/cjs/ts-menu.cjs.entry.js +155 -0
- package/dist/cjs/ts-menu.cjs.entry.js.map +1 -0
- package/dist/cjs/ts-modal.cjs.entry.js +122 -0
- package/dist/cjs/ts-modal.cjs.entry.js.map +1 -0
- package/dist/cjs/ts-nav-item.cjs.entry.js +48 -0
- package/dist/cjs/ts-nav-item.cjs.entry.js.map +1 -0
- package/dist/cjs/ts-nav.cjs.entry.js +29 -0
- package/dist/cjs/ts-nav.cjs.entry.js.map +1 -0
- package/dist/cjs/ts-pagination.cjs.entry.js +88 -0
- package/dist/cjs/ts-pagination.cjs.entry.js.map +1 -0
- package/dist/cjs/ts-popover.cjs.entry.js +133 -0
- package/dist/cjs/ts-popover.cjs.entry.js.map +1 -0
- package/dist/cjs/ts-progress.cjs.entry.js +46 -0
- package/dist/cjs/ts-progress.cjs.entry.js.map +1 -0
- package/dist/cjs/ts-radio.cjs.entry.js +60 -0
- package/dist/cjs/ts-radio.cjs.entry.js.map +1 -0
- package/dist/cjs/ts-row.cjs.entry.js +53 -0
- package/dist/cjs/ts-row.cjs.entry.js.map +1 -0
- package/dist/cjs/ts-select.cjs.entry.js +221 -0
- package/dist/cjs/ts-select.cjs.entry.js.map +1 -0
- package/dist/cjs/ts-skeleton.cjs.entry.js +55 -0
- package/dist/cjs/ts-skeleton.cjs.entry.js.map +1 -0
- package/dist/cjs/ts-slider.cjs.entry.js +132 -0
- package/dist/cjs/ts-slider.cjs.entry.js.map +1 -0
- package/dist/cjs/ts-spacer.cjs.entry.js +28 -0
- package/dist/cjs/ts-spacer.cjs.entry.js.map +1 -0
- package/dist/cjs/ts-spinner.cjs.entry.js +30 -0
- package/dist/cjs/ts-spinner.cjs.entry.js.map +1 -0
- package/dist/cjs/ts-stack.cjs.entry.js +34 -0
- package/dist/cjs/ts-stack.cjs.entry.js.map +1 -0
- package/dist/cjs/ts-step.cjs.entry.js +74 -0
- package/dist/cjs/ts-step.cjs.entry.js.map +1 -0
- package/dist/cjs/ts-stepper.cjs.entry.js +67 -0
- package/dist/cjs/ts-stepper.cjs.entry.js.map +1 -0
- package/dist/cjs/ts-switch-group.cjs.entry.js +109 -0
- package/dist/cjs/ts-switch-group.cjs.entry.js.map +1 -0
- package/dist/cjs/ts-switch-option.cjs.entry.js +42 -0
- package/dist/cjs/ts-switch-option.cjs.entry.js.map +1 -0
- package/dist/cjs/ts-tab-panel.cjs.entry.js +30 -0
- package/dist/cjs/ts-tab-panel.cjs.entry.js.map +1 -0
- package/dist/cjs/ts-table.cjs.entry.js +39 -0
- package/dist/cjs/ts-table.cjs.entry.js.map +1 -0
- package/dist/cjs/ts-tabs.cjs.entry.js +124 -0
- package/dist/cjs/ts-tabs.cjs.entry.js.map +1 -0
- package/dist/cjs/ts-textarea.cjs.entry.js +117 -0
- package/dist/cjs/ts-textarea.cjs.entry.js.map +1 -0
- package/dist/cjs/ts-toast.cjs.entry.js +107 -0
- package/dist/cjs/ts-toast.cjs.entry.js.map +1 -0
- package/dist/cjs/ts-toggle.cjs.entry.js +58 -0
- package/dist/cjs/ts-toggle.cjs.entry.js.map +1 -0
- package/dist/cjs/ts-toolbar.cjs.entry.js +29 -0
- package/dist/cjs/ts-toolbar.cjs.entry.js.map +1 -0
- package/dist/cjs/ts-tooltip.cjs.entry.js +82 -0
- package/dist/cjs/ts-tooltip.cjs.entry.js.map +1 -0
- package/dist/cjs/ts-tree-item.cjs.entry.js +94 -0
- package/dist/cjs/ts-tree-item.cjs.entry.js.map +1 -0
- package/dist/cjs/ts-tree.cjs.entry.js +81 -0
- package/dist/cjs/ts-tree.cjs.entry.js.map +1 -0
- package/dist/collection/collection-manifest.json +64 -0
- package/dist/collection/components/accordion/accordion-item.css +75 -0
- package/dist/collection/components/accordion/accordion-item.js +157 -0
- package/dist/collection/components/accordion/accordion-item.js.map +1 -0
- package/dist/collection/components/accordion/accordion-item.stories.js +4 -0
- package/dist/collection/components/accordion/accordion-item.stories.js.map +1 -0
- package/dist/collection/components/accordion/accordion.css +31 -0
- package/dist/collection/components/accordion/accordion.js +72 -0
- package/dist/collection/components/accordion/accordion.js.map +1 -0
- package/dist/collection/components/accordion/accordion.stories.js +90 -0
- package/dist/collection/components/accordion/accordion.stories.js.map +1 -0
- package/dist/collection/components/alert/alert.css +118 -0
- package/dist/collection/components/alert/alert.js +181 -0
- package/dist/collection/components/alert/alert.js.map +1 -0
- package/dist/collection/components/alert/alert.stories.js +128 -0
- package/dist/collection/components/alert/alert.stories.js.map +1 -0
- package/dist/collection/components/avatar/avatar.css +63 -0
- package/dist/collection/components/avatar/avatar.js +185 -0
- package/dist/collection/components/avatar/avatar.js.map +1 -0
- package/dist/collection/components/avatar/avatar.stories.js +138 -0
- package/dist/collection/components/avatar/avatar.stories.js.map +1 -0
- package/dist/collection/components/badge/badge.css +67 -0
- package/dist/collection/components/badge/badge.js +160 -0
- package/dist/collection/components/badge/badge.js.map +1 -0
- package/dist/collection/components/badge/badge.stories.js +193 -0
- package/dist/collection/components/badge/badge.stories.js.map +1 -0
- package/dist/collection/components/banner/banner.css +129 -0
- package/dist/collection/components/banner/banner.js +226 -0
- package/dist/collection/components/banner/banner.js.map +1 -0
- package/dist/collection/components/banner/banner.stories.js +92 -0
- package/dist/collection/components/banner/banner.stories.js.map +1 -0
- package/dist/collection/components/breadcrumb/breadcrumb-item.css +44 -0
- package/dist/collection/components/breadcrumb/breadcrumb-item.js +95 -0
- package/dist/collection/components/breadcrumb/breadcrumb-item.js.map +1 -0
- package/dist/collection/components/breadcrumb/breadcrumb-item.stories.js +4 -0
- package/dist/collection/components/breadcrumb/breadcrumb-item.stories.js.map +1 -0
- package/dist/collection/components/breadcrumb/breadcrumb.css +26 -0
- package/dist/collection/components/breadcrumb/breadcrumb.js +65 -0
- package/dist/collection/components/breadcrumb/breadcrumb.js.map +1 -0
- package/dist/collection/components/breadcrumb/breadcrumb.stories.js +88 -0
- package/dist/collection/components/breadcrumb/breadcrumb.stories.js.map +1 -0
- package/dist/collection/components/button/button.css +260 -0
- package/dist/collection/components/button/button.js +347 -0
- package/dist/collection/components/button/button.js.map +1 -0
- package/dist/collection/components/button/button.stories.js +219 -0
- package/dist/collection/components/button/button.stories.js.map +1 -0
- package/dist/collection/components/card/card.css +108 -0
- package/dist/collection/components/card/card.js +130 -0
- package/dist/collection/components/card/card.js.map +1 -0
- package/dist/collection/components/card/card.stories.js +221 -0
- package/dist/collection/components/card/card.stories.js.map +1 -0
- package/dist/collection/components/checkbox/checkbox.css +115 -0
- package/dist/collection/components/checkbox/checkbox.js +282 -0
- package/dist/collection/components/checkbox/checkbox.js.map +1 -0
- package/dist/collection/components/checkbox/checkbox.stories.js +90 -0
- package/dist/collection/components/checkbox/checkbox.stories.js.map +1 -0
- package/dist/collection/components/chip/chip.css +210 -0
- package/dist/collection/components/chip/chip.js +253 -0
- package/dist/collection/components/chip/chip.js.map +1 -0
- package/dist/collection/components/chip/chip.stories.js +139 -0
- package/dist/collection/components/chip/chip.stories.js.map +1 -0
- package/dist/collection/components/container/container.css +47 -0
- package/dist/collection/components/container/container.js +76 -0
- package/dist/collection/components/container/container.js.map +1 -0
- package/dist/collection/components/container/container.stories.js +138 -0
- package/dist/collection/components/container/container.stories.js.map +1 -0
- package/dist/collection/components/date-picker/date-picker.css +233 -0
- package/dist/collection/components/date-picker/date-picker.js +462 -0
- package/dist/collection/components/date-picker/date-picker.js.map +1 -0
- package/dist/collection/components/date-picker/date-picker.stories.js +119 -0
- package/dist/collection/components/date-picker/date-picker.stories.js.map +1 -0
- package/dist/collection/components/dialog/dialog.css +128 -0
- package/dist/collection/components/dialog/dialog.js +264 -0
- package/dist/collection/components/dialog/dialog.js.map +1 -0
- package/dist/collection/components/dialog/dialog.stories.js +147 -0
- package/dist/collection/components/dialog/dialog.stories.js.map +1 -0
- package/dist/collection/components/divider/divider.css +94 -0
- package/dist/collection/components/divider/divider.js +99 -0
- package/dist/collection/components/divider/divider.js.map +1 -0
- package/dist/collection/components/divider/divider.stories.js +94 -0
- package/dist/collection/components/divider/divider.stories.js.map +1 -0
- package/dist/collection/components/drawer/drawer.css +202 -0
- package/dist/collection/components/drawer/drawer.js +288 -0
- package/dist/collection/components/drawer/drawer.js.map +1 -0
- package/dist/collection/components/drawer/drawer.stories.js +143 -0
- package/dist/collection/components/drawer/drawer.stories.js.map +1 -0
- package/dist/collection/components/empty-state/empty-state.css +112 -0
- package/dist/collection/components/empty-state/empty-state.js +131 -0
- package/dist/collection/components/empty-state/empty-state.js.map +1 -0
- package/dist/collection/components/empty-state/empty-state.stories.js +113 -0
- package/dist/collection/components/empty-state/empty-state.stories.js.map +1 -0
- package/dist/collection/components/file-upload/file-upload.css +84 -0
- package/dist/collection/components/file-upload/file-upload.js +277 -0
- package/dist/collection/components/file-upload/file-upload.js.map +1 -0
- package/dist/collection/components/file-upload/file-upload.stories.js +107 -0
- package/dist/collection/components/file-upload/file-upload.stories.js.map +1 -0
- package/dist/collection/components/grid/grid.css +11 -0
- package/dist/collection/components/grid/grid.js +125 -0
- package/dist/collection/components/grid/grid.js.map +1 -0
- package/dist/collection/components/grid/grid.stories.js +134 -0
- package/dist/collection/components/grid/grid.stories.js.map +1 -0
- package/dist/collection/components/icon/icon-registry.js +39 -0
- package/dist/collection/components/icon/icon-registry.js.map +1 -0
- package/dist/collection/components/icon/icon.css +54 -0
- package/dist/collection/components/icon/icon.js +239 -0
- package/dist/collection/components/icon/icon.js.map +1 -0
- package/dist/collection/components/icon/icon.stories.js +119 -0
- package/dist/collection/components/icon/icon.stories.js.map +1 -0
- package/dist/collection/components/input/input.css +155 -0
- package/dist/collection/components/input/input.js +583 -0
- package/dist/collection/components/input/input.js.map +1 -0
- package/dist/collection/components/input/input.stories.js +151 -0
- package/dist/collection/components/input/input.stories.js.map +1 -0
- package/dist/collection/components/menu/menu-item.css +77 -0
- package/dist/collection/components/menu/menu-item.js +176 -0
- package/dist/collection/components/menu/menu-item.js.map +1 -0
- package/dist/collection/components/menu/menu-item.stories.js +4 -0
- package/dist/collection/components/menu/menu-item.stories.js.map +1 -0
- package/dist/collection/components/menu/menu.css +81 -0
- package/dist/collection/components/menu/menu.js +295 -0
- package/dist/collection/components/menu/menu.js.map +1 -0
- package/dist/collection/components/menu/menu.stories.js +126 -0
- package/dist/collection/components/menu/menu.stories.js.map +1 -0
- package/dist/collection/components/modal/modal.css +131 -0
- package/dist/collection/components/modal/modal.js +339 -0
- package/dist/collection/components/modal/modal.js.map +1 -0
- package/dist/collection/components/modal/modal.stories.js +233 -0
- package/dist/collection/components/modal/modal.stories.js.map +1 -0
- package/dist/collection/components/nav/nav-item.css +73 -0
- package/dist/collection/components/nav/nav-item.js +154 -0
- package/dist/collection/components/nav/nav-item.js.map +1 -0
- package/dist/collection/components/nav/nav-item.stories.js +4 -0
- package/dist/collection/components/nav/nav-item.stories.js.map +1 -0
- package/dist/collection/components/nav/nav.css +48 -0
- package/dist/collection/components/nav/nav.js +78 -0
- package/dist/collection/components/nav/nav.js.map +1 -0
- package/dist/collection/components/nav/nav.stories.js +106 -0
- package/dist/collection/components/nav/nav.stories.js.map +1 -0
- package/dist/collection/components/pagination/pagination.css +102 -0
- package/dist/collection/components/pagination/pagination.js +220 -0
- package/dist/collection/components/pagination/pagination.js.map +1 -0
- package/dist/collection/components/pagination/pagination.stories.js +92 -0
- package/dist/collection/components/pagination/pagination.stories.js.map +1 -0
- package/dist/collection/components/popover/popover.css +150 -0
- package/dist/collection/components/popover/popover.js +305 -0
- package/dist/collection/components/popover/popover.js.map +1 -0
- package/dist/collection/components/popover/popover.stories.js +112 -0
- package/dist/collection/components/popover/popover.stories.js.map +1 -0
- package/dist/collection/components/progress/progress.css +89 -0
- package/dist/collection/components/progress/progress.js +205 -0
- package/dist/collection/components/progress/progress.js.map +1 -0
- package/dist/collection/components/progress/progress.stories.js +132 -0
- package/dist/collection/components/progress/progress.stories.js.map +1 -0
- package/dist/collection/components/radio/radio.css +110 -0
- package/dist/collection/components/radio/radio.js +234 -0
- package/dist/collection/components/radio/radio.js.map +1 -0
- package/dist/collection/components/radio/radio.stories.js +77 -0
- package/dist/collection/components/radio/radio.stories.js.map +1 -0
- package/dist/collection/components/row/row.css +42 -0
- package/dist/collection/components/row/row.js +179 -0
- package/dist/collection/components/row/row.js.map +1 -0
- package/dist/collection/components/row/row.stories.js +172 -0
- package/dist/collection/components/row/row.stories.js.map +1 -0
- package/dist/collection/components/select/select.css +200 -0
- package/dist/collection/components/select/select.js +527 -0
- package/dist/collection/components/select/select.js.map +1 -0
- package/dist/collection/components/select/select.stories.js +138 -0
- package/dist/collection/components/select/select.stories.js.map +1 -0
- package/dist/collection/components/skeleton/skeleton.css +89 -0
- package/dist/collection/components/skeleton/skeleton.js +161 -0
- package/dist/collection/components/skeleton/skeleton.js.map +1 -0
- package/dist/collection/components/skeleton/skeleton.stories.js +140 -0
- package/dist/collection/components/skeleton/skeleton.stories.js.map +1 -0
- package/dist/collection/components/slider/slider.css +123 -0
- package/dist/collection/components/slider/slider.js +344 -0
- package/dist/collection/components/slider/slider.js.map +1 -0
- package/dist/collection/components/slider/slider.stories.js +100 -0
- package/dist/collection/components/slider/slider.stories.js.map +1 -0
- package/dist/collection/components/spacer/spacer.css +13 -0
- package/dist/collection/components/spacer/spacer.js +74 -0
- package/dist/collection/components/spacer/spacer.js.map +1 -0
- package/dist/collection/components/spacer/spacer.stories.js +90 -0
- package/dist/collection/components/spacer/spacer.stories.js.map +1 -0
- package/dist/collection/components/spinner/spinner.css +49 -0
- package/dist/collection/components/spinner/spinner.js +98 -0
- package/dist/collection/components/spinner/spinner.js.map +1 -0
- package/dist/collection/components/spinner/spinner.stories.js +88 -0
- package/dist/collection/components/spinner/spinner.stories.js.map +1 -0
- package/dist/collection/components/stack/stack.css +10 -0
- package/dist/collection/components/stack/stack.js +82 -0
- package/dist/collection/components/stack/stack.js.map +1 -0
- package/dist/collection/components/stack/stack.stories.js +121 -0
- package/dist/collection/components/stack/stack.stories.js.map +1 -0
- package/dist/collection/components/stepper/step.css +172 -0
- package/dist/collection/components/stepper/step.js +205 -0
- package/dist/collection/components/stepper/step.js.map +1 -0
- package/dist/collection/components/stepper/step.stories.js +4 -0
- package/dist/collection/components/stepper/step.stories.js.map +1 -0
- package/dist/collection/components/stepper/stepper.css +32 -0
- package/dist/collection/components/stepper/stepper.js +137 -0
- package/dist/collection/components/stepper/stepper.js.map +1 -0
- package/dist/collection/components/stepper/stepper.stories.js +130 -0
- package/dist/collection/components/stepper/stepper.stories.js.map +1 -0
- package/dist/collection/components/switch-group/switch-group.css +51 -0
- package/dist/collection/components/switch-group/switch-group.js +237 -0
- package/dist/collection/components/switch-group/switch-group.js.map +1 -0
- package/dist/collection/components/switch-group/switch-group.stories.js +132 -0
- package/dist/collection/components/switch-group/switch-group.stories.js.map +1 -0
- package/dist/collection/components/switch-group/switch-option.css +64 -0
- package/dist/collection/components/switch-group/switch-option.js +150 -0
- package/dist/collection/components/switch-group/switch-option.js.map +1 -0
- package/dist/collection/components/switch-group/switch-option.stories.js +4 -0
- package/dist/collection/components/switch-group/switch-option.stories.js.map +1 -0
- package/dist/collection/components/table/table.css +112 -0
- package/dist/collection/components/table/table.js +151 -0
- package/dist/collection/components/table/table.js.map +1 -0
- package/dist/collection/components/table/table.stories.js +147 -0
- package/dist/collection/components/table/table.stories.js.map +1 -0
- package/dist/collection/components/tabs/tab-panel.css +11 -0
- package/dist/collection/components/tabs/tab-panel.js +116 -0
- package/dist/collection/components/tabs/tab-panel.js.map +1 -0
- package/dist/collection/components/tabs/tab-panel.stories.js +4 -0
- package/dist/collection/components/tabs/tab-panel.stories.js.map +1 -0
- package/dist/collection/components/tabs/tabs.css +134 -0
- package/dist/collection/components/tabs/tabs.js +213 -0
- package/dist/collection/components/tabs/tabs.js.map +1 -0
- package/dist/collection/components/tabs/tabs.stories.js +187 -0
- package/dist/collection/components/tabs/tabs.stories.js.map +1 -0
- package/dist/collection/components/textarea/textarea.css +146 -0
- package/dist/collection/components/textarea/textarea.js +526 -0
- package/dist/collection/components/textarea/textarea.js.map +1 -0
- package/dist/collection/components/textarea/textarea.stories.js +130 -0
- package/dist/collection/components/textarea/textarea.stories.js.map +1 -0
- package/dist/collection/components/toast/toast.css +166 -0
- package/dist/collection/components/toast/toast.js +291 -0
- package/dist/collection/components/toast/toast.js.map +1 -0
- package/dist/collection/components/toast/toast.stories.js +91 -0
- package/dist/collection/components/toast/toast.stories.js.map +1 -0
- package/dist/collection/components/toggle/toggle.css +99 -0
- package/dist/collection/components/toggle/toggle.js +220 -0
- package/dist/collection/components/toggle/toggle.js.map +1 -0
- package/dist/collection/components/toggle/toggle.stories.js +145 -0
- package/dist/collection/components/toggle/toggle.stories.js.map +1 -0
- package/dist/collection/components/toolbar/toolbar.css +89 -0
- package/dist/collection/components/toolbar/toolbar.js +89 -0
- package/dist/collection/components/toolbar/toolbar.js.map +1 -0
- package/dist/collection/components/toolbar/toolbar.stories.js +131 -0
- package/dist/collection/components/toolbar/toolbar.stories.js.map +1 -0
- package/dist/collection/components/tooltip/tooltip.css +124 -0
- package/dist/collection/components/tooltip/tooltip.js +242 -0
- package/dist/collection/components/tooltip/tooltip.js.map +1 -0
- package/dist/collection/components/tooltip/tooltip.stories.js +186 -0
- package/dist/collection/components/tooltip/tooltip.stories.js.map +1 -0
- package/dist/collection/components/tree/tree-item.css +97 -0
- package/dist/collection/components/tree/tree-item.js +242 -0
- package/dist/collection/components/tree/tree-item.js.map +1 -0
- package/dist/collection/components/tree/tree-item.stories.js +4 -0
- package/dist/collection/components/tree/tree-item.stories.js.map +1 -0
- package/dist/collection/components/tree/tree.css +23 -0
- package/dist/collection/components/tree/tree.js +119 -0
- package/dist/collection/components/tree/tree.js.map +1 -0
- package/dist/collection/components/tree/tree.stories.js +121 -0
- package/dist/collection/components/tree/tree.stories.js.map +1 -0
- package/dist/collection/index.js +53 -0
- package/dist/collection/index.js.map +1 -0
- package/dist/collection/theme/tokens.js +109 -0
- package/dist/collection/theme/tokens.js.map +1 -0
- package/dist/collection/types/index.js +2 -0
- package/dist/collection/types/index.js.map +1 -0
- package/dist/collection/utils/aria.js +89 -0
- package/dist/collection/utils/aria.js.map +1 -0
- package/dist/collection/utils/dom.js +42 -0
- package/dist/collection/utils/dom.js.map +1 -0
- package/dist/collection/utils/events.js +20 -0
- package/dist/collection/utils/events.js.map +1 -0
- package/dist/components/index.d.ts +35 -0
- package/dist/components/index.js +2 -0
- package/dist/components/index.js.map +1 -0
- package/dist/components/p-6RDSLDuS.js +2 -0
- package/dist/components/p-6RDSLDuS.js.map +1 -0
- package/dist/components/p-B0ZXNFSa.js +2 -0
- package/dist/components/p-B0ZXNFSa.js.map +1 -0
- package/dist/components/p-BCgm2utU.js +2 -0
- package/dist/components/p-BCgm2utU.js.map +1 -0
- package/dist/components/p-BFN5hUo4.js +2 -0
- package/dist/components/p-BFN5hUo4.js.map +1 -0
- package/dist/components/p-BOxYojS-.js +9572 -0
- package/dist/components/p-BOxYojS-.js.map +1 -0
- package/dist/components/p-BP-fZfRb.js +2 -0
- package/dist/components/p-BP-fZfRb.js.map +1 -0
- package/dist/components/p-B_NL55YI.js +2 -0
- package/dist/components/p-B_NL55YI.js.map +1 -0
- package/dist/components/p-BcoU0ISN.js +2 -0
- package/dist/components/p-BcoU0ISN.js.map +1 -0
- package/dist/components/p-BdzH6wlc.js +2 -0
- package/dist/components/p-BdzH6wlc.js.map +1 -0
- package/dist/components/p-BeErYjKz.js +2 -0
- package/dist/components/p-BeErYjKz.js.map +1 -0
- package/dist/components/p-BjiDgszq.js +2 -0
- package/dist/components/p-BjiDgszq.js.map +1 -0
- package/dist/components/p-BjyTgfXe.js +2 -0
- package/dist/components/p-BjyTgfXe.js.map +1 -0
- package/dist/components/p-BlZHjan9.js +2 -0
- package/dist/components/p-BlZHjan9.js.map +1 -0
- package/dist/components/p-C7JaUlNB.js +2 -0
- package/dist/components/p-C7JaUlNB.js.map +1 -0
- package/dist/components/p-C8wd1644.js +2 -0
- package/dist/components/p-C8wd1644.js.map +1 -0
- package/dist/components/p-CEQXPxzU.js +2 -0
- package/dist/components/p-CEQXPxzU.js.map +1 -0
- package/dist/components/p-CGh7W07E.js +2 -0
- package/dist/components/p-CGh7W07E.js.map +1 -0
- package/dist/components/p-CHtE5caV.js +2 -0
- package/dist/components/p-CHtE5caV.js.map +1 -0
- package/dist/components/p-CSNeA_zh.js +2 -0
- package/dist/components/p-CSNeA_zh.js.map +1 -0
- package/dist/components/p-CbHlJvjF.js +2 -0
- package/dist/components/p-CbHlJvjF.js.map +1 -0
- package/dist/components/p-CkQOAizb.js +2 -0
- package/dist/components/p-CkQOAizb.js.map +1 -0
- package/dist/components/p-Cy_Ad-Jy.js +2 -0
- package/dist/components/p-Cy_Ad-Jy.js.map +1 -0
- package/dist/components/p-DD986daz.js +2 -0
- package/dist/components/p-DD986daz.js.map +1 -0
- package/dist/components/p-DFnNsZtI.js +2 -0
- package/dist/components/p-DFnNsZtI.js.map +1 -0
- package/dist/components/p-DMPxu5Po.js +2 -0
- package/dist/components/p-DMPxu5Po.js.map +1 -0
- package/dist/components/p-DMuI5d5r.js +2 -0
- package/dist/components/p-DMuI5d5r.js.map +1 -0
- package/dist/components/p-DPQ1o4MP.js +2 -0
- package/dist/components/p-DPQ1o4MP.js.map +1 -0
- package/dist/components/p-DTAVTqnc.js +2 -0
- package/dist/components/p-DTAVTqnc.js.map +1 -0
- package/dist/components/p-DhQ7X_TL.js +2 -0
- package/dist/components/p-DhQ7X_TL.js.map +1 -0
- package/dist/components/p-DkpyRqHf.js +2 -0
- package/dist/components/p-DkpyRqHf.js.map +1 -0
- package/dist/components/p-DlB-KfKY.js +2 -0
- package/dist/components/p-DlB-KfKY.js.map +1 -0
- package/dist/components/p-DooMF1E0.js +2 -0
- package/dist/components/p-DooMF1E0.js.map +1 -0
- package/dist/components/p-DwJ7Jt3k.js +2 -0
- package/dist/components/p-DwJ7Jt3k.js.map +1 -0
- package/dist/components/p-DwUH8YQW.js +2 -0
- package/dist/components/p-DwUH8YQW.js.map +1 -0
- package/dist/components/p-Fot2uNwg.js +2 -0
- package/dist/components/p-Fot2uNwg.js.map +1 -0
- package/dist/components/p-O8aQgWRZ.js +2 -0
- package/dist/components/p-O8aQgWRZ.js.map +1 -0
- package/dist/components/p-SopsdO_f.js +2 -0
- package/dist/components/p-SopsdO_f.js.map +1 -0
- package/dist/components/p-TFHAUMKT.js +2 -0
- package/dist/components/p-TFHAUMKT.js.map +1 -0
- package/dist/components/p-faVXXwqR.js +2 -0
- package/dist/components/p-faVXXwqR.js.map +1 -0
- package/dist/components/p-lpqZSiIf.js +2 -0
- package/dist/components/p-lpqZSiIf.js.map +1 -0
- package/dist/components/p-mfB_pP4L.js +2 -0
- package/dist/components/p-mfB_pP4L.js.map +1 -0
- package/dist/components/p-v-L32wKy.js +2 -0
- package/dist/components/p-v-L32wKy.js.map +1 -0
- package/dist/components/p-zveaarwa.js +2 -0
- package/dist/components/p-zveaarwa.js.map +1 -0
- package/dist/components/ts-accordion-item.d.ts +11 -0
- package/dist/components/ts-accordion-item.js +2 -0
- package/dist/components/ts-accordion-item.js.map +1 -0
- package/dist/components/ts-accordion.d.ts +11 -0
- package/dist/components/ts-accordion.js +2 -0
- package/dist/components/ts-accordion.js.map +1 -0
- package/dist/components/ts-alert.d.ts +11 -0
- package/dist/components/ts-alert.js +2 -0
- package/dist/components/ts-alert.js.map +1 -0
- package/dist/components/ts-avatar.d.ts +11 -0
- package/dist/components/ts-avatar.js +2 -0
- package/dist/components/ts-avatar.js.map +1 -0
- package/dist/components/ts-badge.d.ts +11 -0
- package/dist/components/ts-badge.js +2 -0
- package/dist/components/ts-badge.js.map +1 -0
- package/dist/components/ts-banner.d.ts +11 -0
- package/dist/components/ts-banner.js +2 -0
- package/dist/components/ts-banner.js.map +1 -0
- package/dist/components/ts-breadcrumb-item.d.ts +11 -0
- package/dist/components/ts-breadcrumb-item.js +2 -0
- package/dist/components/ts-breadcrumb-item.js.map +1 -0
- package/dist/components/ts-breadcrumb.d.ts +11 -0
- package/dist/components/ts-breadcrumb.js +2 -0
- package/dist/components/ts-breadcrumb.js.map +1 -0
- package/dist/components/ts-button.d.ts +11 -0
- package/dist/components/ts-button.js +2 -0
- package/dist/components/ts-button.js.map +1 -0
- package/dist/components/ts-card.d.ts +11 -0
- package/dist/components/ts-card.js +2 -0
- package/dist/components/ts-card.js.map +1 -0
- package/dist/components/ts-checkbox.d.ts +11 -0
- package/dist/components/ts-checkbox.js +2 -0
- package/dist/components/ts-checkbox.js.map +1 -0
- package/dist/components/ts-chip.d.ts +11 -0
- package/dist/components/ts-chip.js +2 -0
- package/dist/components/ts-chip.js.map +1 -0
- package/dist/components/ts-container.d.ts +11 -0
- package/dist/components/ts-container.js +2 -0
- package/dist/components/ts-container.js.map +1 -0
- package/dist/components/ts-date-picker.d.ts +11 -0
- package/dist/components/ts-date-picker.js +2 -0
- package/dist/components/ts-date-picker.js.map +1 -0
- package/dist/components/ts-dialog.d.ts +11 -0
- package/dist/components/ts-dialog.js +2 -0
- package/dist/components/ts-dialog.js.map +1 -0
- package/dist/components/ts-divider.d.ts +11 -0
- package/dist/components/ts-divider.js +2 -0
- package/dist/components/ts-divider.js.map +1 -0
- package/dist/components/ts-drawer.d.ts +11 -0
- package/dist/components/ts-drawer.js +2 -0
- package/dist/components/ts-drawer.js.map +1 -0
- package/dist/components/ts-empty-state.d.ts +11 -0
- package/dist/components/ts-empty-state.js +2 -0
- package/dist/components/ts-empty-state.js.map +1 -0
- package/dist/components/ts-file-upload.d.ts +11 -0
- package/dist/components/ts-file-upload.js +2 -0
- package/dist/components/ts-file-upload.js.map +1 -0
- package/dist/components/ts-grid.d.ts +11 -0
- package/dist/components/ts-grid.js +2 -0
- package/dist/components/ts-grid.js.map +1 -0
- package/dist/components/ts-icon.d.ts +11 -0
- package/dist/components/ts-icon.js +2 -0
- package/dist/components/ts-icon.js.map +1 -0
- package/dist/components/ts-input.d.ts +11 -0
- package/dist/components/ts-input.js +2 -0
- package/dist/components/ts-input.js.map +1 -0
- package/dist/components/ts-menu-item.d.ts +11 -0
- package/dist/components/ts-menu-item.js +2 -0
- package/dist/components/ts-menu-item.js.map +1 -0
- package/dist/components/ts-menu.d.ts +11 -0
- package/dist/components/ts-menu.js +2 -0
- package/dist/components/ts-menu.js.map +1 -0
- package/dist/components/ts-modal.d.ts +11 -0
- package/dist/components/ts-modal.js +2 -0
- package/dist/components/ts-modal.js.map +1 -0
- package/dist/components/ts-nav-item.d.ts +11 -0
- package/dist/components/ts-nav-item.js +2 -0
- package/dist/components/ts-nav-item.js.map +1 -0
- package/dist/components/ts-nav.d.ts +11 -0
- package/dist/components/ts-nav.js +2 -0
- package/dist/components/ts-nav.js.map +1 -0
- package/dist/components/ts-pagination.d.ts +11 -0
- package/dist/components/ts-pagination.js +2 -0
- package/dist/components/ts-pagination.js.map +1 -0
- package/dist/components/ts-popover.d.ts +11 -0
- package/dist/components/ts-popover.js +2 -0
- package/dist/components/ts-popover.js.map +1 -0
- package/dist/components/ts-progress.d.ts +11 -0
- package/dist/components/ts-progress.js +2 -0
- package/dist/components/ts-progress.js.map +1 -0
- package/dist/components/ts-radio.d.ts +11 -0
- package/dist/components/ts-radio.js +2 -0
- package/dist/components/ts-radio.js.map +1 -0
- package/dist/components/ts-row.d.ts +11 -0
- package/dist/components/ts-row.js +2 -0
- package/dist/components/ts-row.js.map +1 -0
- package/dist/components/ts-select.d.ts +11 -0
- package/dist/components/ts-select.js +2 -0
- package/dist/components/ts-select.js.map +1 -0
- package/dist/components/ts-skeleton.d.ts +11 -0
- package/dist/components/ts-skeleton.js +2 -0
- package/dist/components/ts-skeleton.js.map +1 -0
- package/dist/components/ts-slider.d.ts +11 -0
- package/dist/components/ts-slider.js +2 -0
- package/dist/components/ts-slider.js.map +1 -0
- package/dist/components/ts-spacer.d.ts +11 -0
- package/dist/components/ts-spacer.js +2 -0
- package/dist/components/ts-spacer.js.map +1 -0
- package/dist/components/ts-spinner.d.ts +11 -0
- package/dist/components/ts-spinner.js +2 -0
- package/dist/components/ts-spinner.js.map +1 -0
- package/dist/components/ts-stack.d.ts +11 -0
- package/dist/components/ts-stack.js +2 -0
- package/dist/components/ts-stack.js.map +1 -0
- package/dist/components/ts-step.d.ts +11 -0
- package/dist/components/ts-step.js +2 -0
- package/dist/components/ts-step.js.map +1 -0
- package/dist/components/ts-stepper.d.ts +11 -0
- package/dist/components/ts-stepper.js +2 -0
- package/dist/components/ts-stepper.js.map +1 -0
- package/dist/components/ts-switch-group.d.ts +11 -0
- package/dist/components/ts-switch-group.js +2 -0
- package/dist/components/ts-switch-group.js.map +1 -0
- package/dist/components/ts-switch-option.d.ts +11 -0
- package/dist/components/ts-switch-option.js +2 -0
- package/dist/components/ts-switch-option.js.map +1 -0
- package/dist/components/ts-tab-panel.d.ts +11 -0
- package/dist/components/ts-tab-panel.js +2 -0
- package/dist/components/ts-tab-panel.js.map +1 -0
- package/dist/components/ts-table.d.ts +11 -0
- package/dist/components/ts-table.js +2 -0
- package/dist/components/ts-table.js.map +1 -0
- package/dist/components/ts-tabs.d.ts +11 -0
- package/dist/components/ts-tabs.js +2 -0
- package/dist/components/ts-tabs.js.map +1 -0
- package/dist/components/ts-textarea.d.ts +11 -0
- package/dist/components/ts-textarea.js +2 -0
- package/dist/components/ts-textarea.js.map +1 -0
- package/dist/components/ts-toast.d.ts +11 -0
- package/dist/components/ts-toast.js +2 -0
- package/dist/components/ts-toast.js.map +1 -0
- package/dist/components/ts-toggle.d.ts +11 -0
- package/dist/components/ts-toggle.js +2 -0
- package/dist/components/ts-toggle.js.map +1 -0
- package/dist/components/ts-toolbar.d.ts +11 -0
- package/dist/components/ts-toolbar.js +2 -0
- package/dist/components/ts-toolbar.js.map +1 -0
- package/dist/components/ts-tooltip.d.ts +11 -0
- package/dist/components/ts-tooltip.js +2 -0
- package/dist/components/ts-tooltip.js.map +1 -0
- package/dist/components/ts-tree-item.d.ts +11 -0
- package/dist/components/ts-tree-item.js +2 -0
- package/dist/components/ts-tree-item.js.map +1 -0
- package/dist/components/ts-tree.d.ts +11 -0
- package/dist/components/ts-tree.js +2 -0
- package/dist/components/ts-tree.js.map +1 -0
- package/dist/components.d.ts +480 -0
- package/dist/components.json +12678 -0
- package/dist/esm/aria-lpqZSiIf.js +89 -0
- package/dist/esm/aria-lpqZSiIf.js.map +1 -0
- package/dist/esm/index-V8-ENixA.js +2373 -0
- package/dist/esm/index-V8-ENixA.js.map +1 -0
- package/dist/esm/index.js +102 -0
- package/dist/esm/index.js.map +1 -0
- package/dist/esm/loader.js +13 -0
- package/dist/esm/loader.js.map +1 -0
- package/dist/esm/lucide-BOxYojS-.js +26523 -0
- package/dist/esm/lucide-BOxYojS-.js.map +1 -0
- package/dist/esm/tessera-ui.js +23 -0
- package/dist/esm/tessera-ui.js.map +1 -0
- package/dist/esm/ts-accordion-item.entry.js +63 -0
- package/dist/esm/ts-accordion-item.entry.js.map +1 -0
- package/dist/esm/ts-accordion.entry.js +34 -0
- package/dist/esm/ts-accordion.entry.js.map +1 -0
- package/dist/esm/ts-alert.entry.js +58 -0
- package/dist/esm/ts-alert.entry.js.map +1 -0
- package/dist/esm/ts-avatar.entry.js +52 -0
- package/dist/esm/ts-avatar.entry.js.map +1 -0
- package/dist/esm/ts-badge.entry.js +36 -0
- package/dist/esm/ts-badge.entry.js.map +1 -0
- package/dist/esm/ts-banner.entry.js +65 -0
- package/dist/esm/ts-banner.entry.js.map +1 -0
- package/dist/esm/ts-breadcrumb-item.entry.js +26 -0
- package/dist/esm/ts-breadcrumb-item.entry.js.map +1 -0
- package/dist/esm/ts-breadcrumb.entry.js +33 -0
- package/dist/esm/ts-breadcrumb.entry.js.map +1 -0
- package/dist/esm/ts-button.entry.js +86 -0
- package/dist/esm/ts-button.entry.js.map +1 -0
- package/dist/esm/ts-card.entry.js +33 -0
- package/dist/esm/ts-card.entry.js.map +1 -0
- package/dist/esm/ts-checkbox.entry.js +66 -0
- package/dist/esm/ts-checkbox.entry.js.map +1 -0
- package/dist/esm/ts-chip.entry.js +74 -0
- package/dist/esm/ts-chip.entry.js.map +1 -0
- package/dist/esm/ts-container.entry.js +26 -0
- package/dist/esm/ts-container.entry.js.map +1 -0
- package/dist/esm/ts-date-picker.entry.js +227 -0
- package/dist/esm/ts-date-picker.entry.js.map +1 -0
- package/dist/esm/ts-dialog.entry.js +107 -0
- package/dist/esm/ts-dialog.entry.js.map +1 -0
- package/dist/esm/ts-divider.entry.js +31 -0
- package/dist/esm/ts-divider.entry.js.map +1 -0
- package/dist/esm/ts-drawer.entry.js +111 -0
- package/dist/esm/ts-drawer.entry.js.map +1 -0
- package/dist/esm/ts-empty-state.entry.js +30 -0
- package/dist/esm/ts-empty-state.entry.js.map +1 -0
- package/dist/esm/ts-file-upload.entry.js +120 -0
- package/dist/esm/ts-file-upload.entry.js.map +1 -0
- package/dist/esm/ts-grid.entry.js +35 -0
- package/dist/esm/ts-grid.entry.js.map +1 -0
- package/dist/esm/ts-icon-Jz9ioZag.js +155 -0
- package/dist/esm/ts-icon-Jz9ioZag.js.map +1 -0
- package/dist/esm/ts-icon.entry.js +5 -0
- package/dist/esm/ts-icon.entry.js.map +1 -0
- package/dist/esm/ts-input.entry.js +128 -0
- package/dist/esm/ts-input.entry.js.map +1 -0
- package/dist/esm/ts-menu-item.entry.js +63 -0
- package/dist/esm/ts-menu-item.entry.js.map +1 -0
- package/dist/esm/ts-menu.entry.js +153 -0
- package/dist/esm/ts-menu.entry.js.map +1 -0
- package/dist/esm/ts-modal.entry.js +120 -0
- package/dist/esm/ts-modal.entry.js.map +1 -0
- package/dist/esm/ts-nav-item.entry.js +46 -0
- package/dist/esm/ts-nav-item.entry.js.map +1 -0
- package/dist/esm/ts-nav.entry.js +27 -0
- package/dist/esm/ts-nav.entry.js.map +1 -0
- package/dist/esm/ts-pagination.entry.js +86 -0
- package/dist/esm/ts-pagination.entry.js.map +1 -0
- package/dist/esm/ts-popover.entry.js +131 -0
- package/dist/esm/ts-popover.entry.js.map +1 -0
- package/dist/esm/ts-progress.entry.js +44 -0
- package/dist/esm/ts-progress.entry.js.map +1 -0
- package/dist/esm/ts-radio.entry.js +58 -0
- package/dist/esm/ts-radio.entry.js.map +1 -0
- package/dist/esm/ts-row.entry.js +51 -0
- package/dist/esm/ts-row.entry.js.map +1 -0
- package/dist/esm/ts-select.entry.js +219 -0
- package/dist/esm/ts-select.entry.js.map +1 -0
- package/dist/esm/ts-skeleton.entry.js +53 -0
- package/dist/esm/ts-skeleton.entry.js.map +1 -0
- package/dist/esm/ts-slider.entry.js +130 -0
- package/dist/esm/ts-slider.entry.js.map +1 -0
- package/dist/esm/ts-spacer.entry.js +26 -0
- package/dist/esm/ts-spacer.entry.js.map +1 -0
- package/dist/esm/ts-spinner.entry.js +28 -0
- package/dist/esm/ts-spinner.entry.js.map +1 -0
- package/dist/esm/ts-stack.entry.js +32 -0
- package/dist/esm/ts-stack.entry.js.map +1 -0
- package/dist/esm/ts-step.entry.js +72 -0
- package/dist/esm/ts-step.entry.js.map +1 -0
- package/dist/esm/ts-stepper.entry.js +65 -0
- package/dist/esm/ts-stepper.entry.js.map +1 -0
- package/dist/esm/ts-switch-group.entry.js +107 -0
- package/dist/esm/ts-switch-group.entry.js.map +1 -0
- package/dist/esm/ts-switch-option.entry.js +40 -0
- package/dist/esm/ts-switch-option.entry.js.map +1 -0
- package/dist/esm/ts-tab-panel.entry.js +28 -0
- package/dist/esm/ts-tab-panel.entry.js.map +1 -0
- package/dist/esm/ts-table.entry.js +37 -0
- package/dist/esm/ts-table.entry.js.map +1 -0
- package/dist/esm/ts-tabs.entry.js +122 -0
- package/dist/esm/ts-tabs.entry.js.map +1 -0
- package/dist/esm/ts-textarea.entry.js +115 -0
- package/dist/esm/ts-textarea.entry.js.map +1 -0
- package/dist/esm/ts-toast.entry.js +105 -0
- package/dist/esm/ts-toast.entry.js.map +1 -0
- package/dist/esm/ts-toggle.entry.js +56 -0
- package/dist/esm/ts-toggle.entry.js.map +1 -0
- package/dist/esm/ts-toolbar.entry.js +27 -0
- package/dist/esm/ts-toolbar.entry.js.map +1 -0
- package/dist/esm/ts-tooltip.entry.js +80 -0
- package/dist/esm/ts-tooltip.entry.js.map +1 -0
- package/dist/esm/ts-tree-item.entry.js +92 -0
- package/dist/esm/ts-tree-item.entry.js.map +1 -0
- package/dist/esm/ts-tree.entry.js +79 -0
- package/dist/esm/ts-tree.entry.js.map +1 -0
- package/dist/index.cjs.js +1 -0
- package/dist/index.js +1 -0
- package/dist/tessera-ui/index.esm.js +2 -0
- package/dist/tessera-ui/index.esm.js.map +1 -0
- package/dist/tessera-ui/p-0424cd55.entry.js +2 -0
- package/dist/tessera-ui/p-0424cd55.entry.js.map +1 -0
- package/dist/tessera-ui/p-04522bf9.entry.js +2 -0
- package/dist/tessera-ui/p-04522bf9.entry.js.map +1 -0
- package/dist/tessera-ui/p-04aa8b90.entry.js +2 -0
- package/dist/tessera-ui/p-04aa8b90.entry.js.map +1 -0
- package/dist/tessera-ui/p-080eaf89.entry.js +2 -0
- package/dist/tessera-ui/p-080eaf89.entry.js.map +1 -0
- package/dist/tessera-ui/p-0ec061e5.entry.js +2 -0
- package/dist/tessera-ui/p-0ec061e5.entry.js.map +1 -0
- package/dist/tessera-ui/p-122e43b7.entry.js +2 -0
- package/dist/tessera-ui/p-122e43b7.entry.js.map +1 -0
- package/dist/tessera-ui/p-16bb8ca8.entry.js +2 -0
- package/dist/tessera-ui/p-16bb8ca8.entry.js.map +1 -0
- package/dist/tessera-ui/p-16fc632b.entry.js +2 -0
- package/dist/tessera-ui/p-16fc632b.entry.js.map +1 -0
- package/dist/tessera-ui/p-1d73f6c9.entry.js +2 -0
- package/dist/tessera-ui/p-1d73f6c9.entry.js.map +1 -0
- package/dist/tessera-ui/p-24305379.entry.js +2 -0
- package/dist/tessera-ui/p-24305379.entry.js.map +1 -0
- package/dist/tessera-ui/p-25f77cc9.entry.js +2 -0
- package/dist/tessera-ui/p-25f77cc9.entry.js.map +1 -0
- package/dist/tessera-ui/p-35eb8496.entry.js +2 -0
- package/dist/tessera-ui/p-35eb8496.entry.js.map +1 -0
- package/dist/tessera-ui/p-3aec66b4.entry.js +2 -0
- package/dist/tessera-ui/p-3aec66b4.entry.js.map +1 -0
- package/dist/tessera-ui/p-4277460b.entry.js +2 -0
- package/dist/tessera-ui/p-4277460b.entry.js.map +1 -0
- package/dist/tessera-ui/p-441310f7.entry.js +2 -0
- package/dist/tessera-ui/p-441310f7.entry.js.map +1 -0
- package/dist/tessera-ui/p-491e1a75.entry.js +2 -0
- package/dist/tessera-ui/p-491e1a75.entry.js.map +1 -0
- package/dist/tessera-ui/p-50d092ce.entry.js +2 -0
- package/dist/tessera-ui/p-50d092ce.entry.js.map +1 -0
- package/dist/tessera-ui/p-50efadf3.entry.js +2 -0
- package/dist/tessera-ui/p-50efadf3.entry.js.map +1 -0
- package/dist/tessera-ui/p-53846d59.entry.js +2 -0
- package/dist/tessera-ui/p-53846d59.entry.js.map +1 -0
- package/dist/tessera-ui/p-56f2b070.entry.js +2 -0
- package/dist/tessera-ui/p-56f2b070.entry.js.map +1 -0
- package/dist/tessera-ui/p-6760f922.entry.js +2 -0
- package/dist/tessera-ui/p-6760f922.entry.js.map +1 -0
- package/dist/tessera-ui/p-69bb11ed.entry.js +2 -0
- package/dist/tessera-ui/p-69bb11ed.entry.js.map +1 -0
- package/dist/tessera-ui/p-6d35a60c.entry.js +2 -0
- package/dist/tessera-ui/p-6d35a60c.entry.js.map +1 -0
- package/dist/tessera-ui/p-6ec285ad.entry.js +2 -0
- package/dist/tessera-ui/p-6ec285ad.entry.js.map +1 -0
- package/dist/tessera-ui/p-708d4eb5.entry.js +2 -0
- package/dist/tessera-ui/p-708d4eb5.entry.js.map +1 -0
- package/dist/tessera-ui/p-79ff8ceb.entry.js +2 -0
- package/dist/tessera-ui/p-79ff8ceb.entry.js.map +1 -0
- package/dist/tessera-ui/p-7e531195.entry.js +2 -0
- package/dist/tessera-ui/p-7e531195.entry.js.map +1 -0
- package/dist/tessera-ui/p-7fa64f00.entry.js +2 -0
- package/dist/tessera-ui/p-7fa64f00.entry.js.map +1 -0
- package/dist/tessera-ui/p-829c4307.entry.js +2 -0
- package/dist/tessera-ui/p-829c4307.entry.js.map +1 -0
- package/dist/tessera-ui/p-91ccef3f.entry.js +2 -0
- package/dist/tessera-ui/p-91ccef3f.entry.js.map +1 -0
- package/dist/tessera-ui/p-9209e603.entry.js +2 -0
- package/dist/tessera-ui/p-9209e603.entry.js.map +1 -0
- package/dist/tessera-ui/p-97a9def7.entry.js +2 -0
- package/dist/tessera-ui/p-97a9def7.entry.js.map +1 -0
- package/dist/tessera-ui/p-9b41b538.entry.js +2 -0
- package/dist/tessera-ui/p-9b41b538.entry.js.map +1 -0
- package/dist/tessera-ui/p-9c0504fd.entry.js +2 -0
- package/dist/tessera-ui/p-9c0504fd.entry.js.map +1 -0
- package/dist/tessera-ui/p-BOxYojS-.js +9572 -0
- package/dist/tessera-ui/p-BOxYojS-.js.map +1 -0
- package/dist/tessera-ui/p-StBQmS8h.js +2 -0
- package/dist/tessera-ui/p-StBQmS8h.js.map +1 -0
- package/dist/tessera-ui/p-V8-ENixA.js +3 -0
- package/dist/tessera-ui/p-V8-ENixA.js.map +1 -0
- package/dist/tessera-ui/p-a120b5d6.entry.js +2 -0
- package/dist/tessera-ui/p-a120b5d6.entry.js.map +1 -0
- package/dist/tessera-ui/p-a55a5695.entry.js +2 -0
- package/dist/tessera-ui/p-a55a5695.entry.js.map +1 -0
- package/dist/tessera-ui/p-a83d903e.entry.js +2 -0
- package/dist/tessera-ui/p-a83d903e.entry.js.map +1 -0
- package/dist/tessera-ui/p-adc807dc.entry.js +2 -0
- package/dist/tessera-ui/p-adc807dc.entry.js.map +1 -0
- package/dist/tessera-ui/p-b09f202c.entry.js +2 -0
- package/dist/tessera-ui/p-b09f202c.entry.js.map +1 -0
- package/dist/tessera-ui/p-b1182592.entry.js +2 -0
- package/dist/tessera-ui/p-b1182592.entry.js.map +1 -0
- package/dist/tessera-ui/p-b3f60955.entry.js +2 -0
- package/dist/tessera-ui/p-b3f60955.entry.js.map +1 -0
- package/dist/tessera-ui/p-bb9ebbd8.entry.js +2 -0
- package/dist/tessera-ui/p-bb9ebbd8.entry.js.map +1 -0
- package/dist/tessera-ui/p-bce40715.entry.js +2 -0
- package/dist/tessera-ui/p-bce40715.entry.js.map +1 -0
- package/dist/tessera-ui/p-c35c7049.entry.js +2 -0
- package/dist/tessera-ui/p-c35c7049.entry.js.map +1 -0
- package/dist/tessera-ui/p-c59ecffa.entry.js +2 -0
- package/dist/tessera-ui/p-c59ecffa.entry.js.map +1 -0
- package/dist/tessera-ui/p-d318774a.entry.js +2 -0
- package/dist/tessera-ui/p-d318774a.entry.js.map +1 -0
- package/dist/tessera-ui/p-d5cbadd6.entry.js +2 -0
- package/dist/tessera-ui/p-d5cbadd6.entry.js.map +1 -0
- package/dist/tessera-ui/p-e1d2b141.entry.js +2 -0
- package/dist/tessera-ui/p-e1d2b141.entry.js.map +1 -0
- package/dist/tessera-ui/p-f0bf6408.entry.js +2 -0
- package/dist/tessera-ui/p-f0bf6408.entry.js.map +1 -0
- package/dist/tessera-ui/p-f639213a.entry.js +2 -0
- package/dist/tessera-ui/p-f639213a.entry.js.map +1 -0
- package/dist/tessera-ui/p-fd2376e0.entry.js +2 -0
- package/dist/tessera-ui/p-fd2376e0.entry.js.map +1 -0
- package/dist/tessera-ui/p-fef9a993.entry.js +2 -0
- package/dist/tessera-ui/p-fef9a993.entry.js.map +1 -0
- package/dist/tessera-ui/p-lpqZSiIf.js +2 -0
- package/dist/tessera-ui/p-lpqZSiIf.js.map +1 -0
- package/dist/tessera-ui/tessera-ui.css +1 -0
- package/dist/tessera-ui/tessera-ui.esm.js +2 -0
- package/dist/tessera-ui/tessera-ui.esm.js.map +1 -0
- package/dist/types/components/accordion/accordion-item.d.ts +28 -0
- package/dist/types/components/accordion/accordion-item.stories.d.ts +5 -0
- package/dist/types/components/accordion/accordion.d.ts +12 -0
- package/dist/types/components/accordion/accordion.stories.d.ts +21 -0
- package/dist/types/components/alert/alert.d.ts +30 -0
- package/dist/types/components/alert/alert.stories.d.ts +34 -0
- package/dist/types/components/avatar/avatar.d.ts +26 -0
- package/dist/types/components/avatar/avatar.stories.d.ts +51 -0
- package/dist/types/components/badge/badge.d.ts +19 -0
- package/dist/types/components/badge/badge.stories.d.ts +50 -0
- package/dist/types/components/banner/banner.d.ts +33 -0
- package/dist/types/components/banner/banner.stories.d.ts +40 -0
- package/dist/types/components/breadcrumb/breadcrumb-item.d.ts +15 -0
- package/dist/types/components/breadcrumb/breadcrumb-item.stories.d.ts +5 -0
- package/dist/types/components/breadcrumb/breadcrumb.d.ts +13 -0
- package/dist/types/components/breadcrumb/breadcrumb.stories.d.ts +20 -0
- package/dist/types/components/button/button.d.ts +45 -0
- package/dist/types/components/button/button.stories.d.ts +73 -0
- package/dist/types/components/card/card.d.ts +23 -0
- package/dist/types/components/card/card.stories.d.ts +46 -0
- package/dist/types/components/checkbox/checkbox.d.ts +36 -0
- package/dist/types/components/checkbox/checkbox.stories.d.ts +58 -0
- package/dist/types/components/chip/chip.d.ts +34 -0
- package/dist/types/components/chip/chip.stories.d.ts +54 -0
- package/dist/types/components/container/container.d.ts +12 -0
- package/dist/types/components/container/container.stories.d.ts +21 -0
- package/dist/types/components/date-picker/date-picker.d.ts +67 -0
- package/dist/types/components/date-picker/date-picker.stories.d.ts +62 -0
- package/dist/types/components/dialog/dialog.d.ts +44 -0
- package/dist/types/components/dialog/dialog.stories.d.ts +39 -0
- package/dist/types/components/divider/divider.d.ts +13 -0
- package/dist/types/components/divider/divider.stories.d.ts +33 -0
- package/dist/types/components/drawer/drawer.d.ts +46 -0
- package/dist/types/components/drawer/drawer.stories.d.ts +43 -0
- package/dist/types/components/empty-state/empty-state.d.ts +24 -0
- package/dist/types/components/empty-state/empty-state.stories.d.ts +37 -0
- package/dist/types/components/file-upload/file-upload.d.ts +38 -0
- package/dist/types/components/file-upload/file-upload.stories.d.ts +43 -0
- package/dist/types/components/grid/grid.d.ts +16 -0
- package/dist/types/components/grid/grid.stories.d.ts +30 -0
- package/dist/types/components/icon/icon-registry.d.ts +27 -0
- package/dist/types/components/icon/icon.d.ts +30 -0
- package/dist/types/components/icon/icon.stories.d.ts +42 -0
- package/dist/types/components/input/input.d.ts +72 -0
- package/dist/types/components/input/input.stories.d.ts +77 -0
- package/dist/types/components/menu/menu-item.d.ts +31 -0
- package/dist/types/components/menu/menu-item.stories.d.ts +5 -0
- package/dist/types/components/menu/menu.d.ts +38 -0
- package/dist/types/components/menu/menu.stories.d.ts +36 -0
- package/dist/types/components/modal/modal.d.ts +52 -0
- package/dist/types/components/modal/modal.stories.d.ts +47 -0
- package/dist/types/components/nav/nav-item.d.ts +23 -0
- package/dist/types/components/nav/nav-item.stories.d.ts +5 -0
- package/dist/types/components/nav/nav.d.ts +13 -0
- package/dist/types/components/nav/nav.stories.d.ts +27 -0
- package/dist/types/components/pagination/pagination.d.ts +28 -0
- package/dist/types/components/pagination/pagination.stories.d.ts +42 -0
- package/dist/types/components/popover/popover.d.ts +44 -0
- package/dist/types/components/popover/popover.stories.d.ts +38 -0
- package/dist/types/components/progress/progress.d.ts +26 -0
- package/dist/types/components/progress/progress.stories.d.ts +59 -0
- package/dist/types/components/radio/radio.d.ts +32 -0
- package/dist/types/components/radio/radio.stories.d.ts +48 -0
- package/dist/types/components/row/row.d.ts +18 -0
- package/dist/types/components/row/row.stories.d.ts +52 -0
- package/dist/types/components/select/select.d.ts +74 -0
- package/dist/types/components/select/select.stories.d.ts +73 -0
- package/dist/types/components/skeleton/skeleton.d.ts +17 -0
- package/dist/types/components/skeleton/skeleton.stories.d.ts +44 -0
- package/dist/types/components/slider/slider.d.ts +43 -0
- package/dist/types/components/slider/slider.stories.d.ts +62 -0
- package/dist/types/components/spacer/spacer.d.ts +10 -0
- package/dist/types/components/spacer/spacer.stories.d.ts +28 -0
- package/dist/types/components/spinner/spinner.d.ts +14 -0
- package/dist/types/components/spinner/spinner.stories.d.ts +33 -0
- package/dist/types/components/stack/stack.d.ts +12 -0
- package/dist/types/components/stack/stack.stories.d.ts +28 -0
- package/dist/types/components/stepper/step.d.ts +31 -0
- package/dist/types/components/stepper/step.stories.d.ts +5 -0
- package/dist/types/components/stepper/stepper.d.ts +18 -0
- package/dist/types/components/stepper/stepper.stories.d.ts +36 -0
- package/dist/types/components/switch-group/switch-group.d.ts +33 -0
- package/dist/types/components/switch-group/switch-group.stories.d.ts +37 -0
- package/dist/types/components/switch-group/switch-option.d.ts +24 -0
- package/dist/types/components/switch-group/switch-option.stories.d.ts +5 -0
- package/dist/types/components/table/table.d.ts +23 -0
- package/dist/types/components/table/table.stories.d.ts +45 -0
- package/dist/types/components/tabs/tab-panel.d.ts +17 -0
- package/dist/types/components/tabs/tab-panel.stories.d.ts +5 -0
- package/dist/types/components/tabs/tabs.d.ts +30 -0
- package/dist/types/components/tabs/tabs.stories.d.ts +34 -0
- package/dist/types/components/textarea/textarea.d.ts +62 -0
- package/dist/types/components/textarea/textarea.stories.d.ts +88 -0
- package/dist/types/components/toast/toast.d.ts +42 -0
- package/dist/types/components/toast/toast.stories.d.ts +48 -0
- package/dist/types/components/toggle/toggle.d.ts +31 -0
- package/dist/types/components/toggle/toggle.stories.d.ts +46 -0
- package/dist/types/components/toolbar/toolbar.d.ts +18 -0
- package/dist/types/components/toolbar/toolbar.stories.d.ts +28 -0
- package/dist/types/components/tooltip/tooltip.d.ts +36 -0
- package/dist/types/components/tooltip/tooltip.stories.d.ts +43 -0
- package/dist/types/components/tree/tree-item.d.ts +42 -0
- package/dist/types/components/tree/tree-item.stories.d.ts +5 -0
- package/dist/types/components/tree/tree.d.ts +13 -0
- package/dist/types/components/tree/tree.stories.d.ts +21 -0
- package/dist/types/components.d.ts +4191 -0
- package/dist/types/index.d.ts +53 -0
- package/dist/types/stencil-public-runtime.d.ts +1860 -0
- package/dist/types/theme/tokens.d.ts +29 -0
- package/dist/types/types/index.d.ts +36 -0
- package/dist/types/utils/aria.d.ts +23 -0
- package/dist/types/utils/dom.d.ts +19 -0
- package/dist/types/utils/events.d.ts +17 -0
- package/loader/cdn.js +1 -0
- package/loader/index.cjs.js +1 -0
- package/loader/index.d.ts +24 -0
- package/loader/index.es2017.js +1 -0
- package/loader/index.js +2 -0
- package/package.json +79 -0
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r,c as a,a as o,h as s,H as t}from"./p-V8-ENixA.js";import{g as i}from"./p-lpqZSiIf.js";const e=()=>`:host{display:inline-block;font-family:var(--ts-font-family-base);--ts-radio-size:1.25rem;--ts-radio-color:var(--ts-color-interactive-primary);--ts-radio-border-color:var(--ts-color-border-default)}.radio__base{display:inline-flex;align-items:center;gap:var(--ts-spacing-2);cursor:pointer;outline:none}.radio__base:focus-visible .radio__control{box-shadow:var(--ts-focus-ring)}.radio__control{display:inline-flex;align-items:center;justify-content:center;width:var(--ts-radio-size);height:var(--ts-radio-size);box-sizing:border-box;border:2px solid var(--ts-radio-border-color);border-radius:50%;background-color:var(--ts-color-bg-elevated);transition:background-color var(--ts-transition-fast), border-color var(--ts-transition-fast), box-shadow var(--ts-transition-fast);flex-shrink:0}.radio__dot{width:0;height:0;border-radius:50%;background-color:var(--ts-color-text-on-primary);transition:width var(--ts-transition-fast), height var(--ts-transition-fast)}:host([checked]) .radio__control{background-color:var(--ts-radio-color);border-color:var(--ts-radio-color)}:host([checked]) .radio__dot{width:40%;height:40%}.radio__base:hover:not([aria-disabled="true"]) .radio__control{border-color:var(--ts-color-primary-500)}:host([disabled]) .radio__base{opacity:0.5;cursor:not-allowed;pointer-events:none}:host([size="sm"]){--ts-radio-size:1rem}:host([size="sm"]) .radio__label{font-size:var(--ts-font-size-sm)}:host([size="md"]) .radio__label{font-size:var(--ts-font-size-md)}:host([size="lg"]){--ts-radio-size:1.5rem}:host([size="lg"]) .radio__label{font-size:var(--ts-font-size-lg)}.radio__label{color:var(--ts-color-text-primary);line-height:var(--ts-line-height-normal);user-select:none}`;const d=class{constructor(o){r(this,o);this.tsChange=a(this,"tsChange")}get hostEl(){return o(this)}inputId=i("ts-radio");checked=false;disabled=false;value="";name;label;size="md";tsChange;async select(){if(!this.disabled&&!this.checked){this.checked=true;this.tsChange.emit({checked:this.checked,value:this.value})}}handleClick=()=>{this.select()};handleKeydown=r=>{if(r.key===" "){r.preventDefault();this.select()}};render(){return s(t,{key:"83a85914dbe352dbb58101fb0ec5a2eefea1b069",class:{"ts-radio":true,[`ts-radio--${this.size}`]:true,"ts-radio--checked":this.checked,"ts-radio--disabled":this.disabled}},s("div",{key:"e78da4f35aaa992df0e4a1b411f63714adad01da",class:"radio__base",part:"base",role:"radio","aria-checked":this.checked?"true":"false","aria-disabled":this.disabled?"true":undefined,tabindex:this.disabled?-1:0,onClick:this.handleClick,onKeyDown:this.handleKeydown},s("div",{key:"d434933511980c1b1ae62727694f718b782eafb1",class:"radio__control",part:"control"},s("div",{key:"240fc60b023fc0e3084d6f1504273b9ba6cc82b3",class:"radio__dot"})),s("label",{key:"21539dae9031f841f3095091225ac534902e4e15",class:"radio__label",part:"label",id:`${this.inputId}-label`},this.label?this.label:s("slot",null))))}};d.style=e();export{d as ts_radio};
|
|
2
|
+
//# sourceMappingURL=p-4277460b.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["radioCss","TsRadio","inputId","generateId","checked","disabled","value","name","label","size","tsChange","select","this","emit","handleClick","handleKeydown","event","key","preventDefault","render","h","Host","class","part","role","undefined","tabindex","onClick","onKeyDown","id"],"sources":["src/components/radio/radio.css?tag=ts-radio&encapsulation=shadow","src/components/radio/radio.tsx"],"sourcesContent":["/* ==========================================================================\n ts-radio — Shadow DOM Scoped Styles\n\n Component tokens (Tier 3):\n --ts-radio-size Radio circle size\n --ts-radio-color Selected color\n --ts-radio-border-color Default border color\n ========================================================================== */\n\n:host {\n display: inline-block;\n font-family: var(--ts-font-family-base);\n\n --ts-radio-size: 1.25rem;\n --ts-radio-color: var(--ts-color-interactive-primary);\n --ts-radio-border-color: var(--ts-color-border-default);\n}\n\n/* ---- Base container ---- */\n.radio__base {\n display: inline-flex;\n align-items: center;\n gap: var(--ts-spacing-2);\n cursor: pointer;\n outline: none;\n}\n\n.radio__base:focus-visible .radio__control {\n box-shadow: var(--ts-focus-ring);\n}\n\n/* ---- Control circle ---- */\n.radio__control {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--ts-radio-size);\n height: var(--ts-radio-size);\n box-sizing: border-box;\n border: 2px solid var(--ts-radio-border-color);\n border-radius: 50%;\n background-color: var(--ts-color-bg-elevated);\n transition:\n background-color var(--ts-transition-fast),\n border-color var(--ts-transition-fast),\n box-shadow var(--ts-transition-fast);\n flex-shrink: 0;\n}\n\n/* ---- Inner dot ---- */\n.radio__dot {\n width: 0;\n height: 0;\n border-radius: 50%;\n background-color: var(--ts-color-text-on-primary);\n transition:\n width var(--ts-transition-fast),\n height var(--ts-transition-fast);\n}\n\n/* ---- Checked state ---- */\n:host([checked]) .radio__control {\n background-color: var(--ts-radio-color);\n border-color: var(--ts-radio-color);\n}\n\n:host([checked]) .radio__dot {\n width: 40%;\n height: 40%;\n}\n\n/* ---- Hover ---- */\n.radio__base:hover:not([aria-disabled=\"true\"]) .radio__control {\n border-color: var(--ts-color-primary-500);\n}\n\n/* ---- Disabled state ---- */\n:host([disabled]) .radio__base {\n opacity: 0.5;\n cursor: not-allowed;\n pointer-events: none;\n}\n\n/* ---- Sizes ---- */\n:host([size=\"sm\"]) {\n --ts-radio-size: 1rem;\n}\n\n:host([size=\"sm\"]) .radio__label {\n font-size: var(--ts-font-size-sm);\n}\n\n:host([size=\"md\"]) .radio__label {\n font-size: var(--ts-font-size-md);\n}\n\n:host([size=\"lg\"]) {\n --ts-radio-size: 1.5rem;\n}\n\n:host([size=\"lg\"]) .radio__label {\n font-size: var(--ts-font-size-lg);\n}\n\n/* ---- Label ---- */\n.radio__label {\n color: var(--ts-color-text-primary);\n line-height: var(--ts-line-height-normal);\n user-select: none;\n}\n","import { Component, Prop, Event, h, Host, Element, Method } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\nimport type { TsCheckboxChangeEventDetail } from '../../types';\nimport { generateId } from '../../utils/aria';\n\n/**\n * @slot - Default slot for the radio label.\n *\n * @part base - The radio container.\n * @part control - The visual radio circle.\n * @part label - The label wrapper.\n */\n@Component({\n tag: 'ts-radio',\n styleUrl: 'radio.css',\n shadow: true,\n})\nexport class TsRadio {\n @Element() hostEl!: HTMLElement;\n\n private inputId = generateId('ts-radio');\n\n /** Whether the radio is checked. */\n @Prop({ mutable: true, reflect: true }) checked = false;\n\n /** Renders the radio as disabled. */\n @Prop({ reflect: true }) disabled = false;\n\n /** The value associated with this radio. */\n @Prop() value = '';\n\n /** Name attribute for form submission. */\n @Prop() name?: string;\n\n /** Label text. If omitted, use the default slot. */\n @Prop() label?: string;\n\n /** The radio size. */\n @Prop({ reflect: true }) size: 'sm' | 'md' | 'lg' = 'md';\n\n /** Emitted when the radio is selected. */\n @Event({ eventName: 'tsChange' }) tsChange!: EventEmitter<TsCheckboxChangeEventDetail>;\n\n /** Programmatically select the radio. */\n @Method()\n async select(): Promise<void> {\n if (!this.disabled && !this.checked) {\n this.checked = true;\n this.tsChange.emit({ checked: this.checked, value: this.value });\n }\n }\n\n private handleClick = (): void => {\n this.select();\n };\n\n private handleKeydown = (event: KeyboardEvent): void => {\n if (event.key === ' ') {\n event.preventDefault();\n this.select();\n }\n };\n\n // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n render() {\n return (\n <Host\n class={{\n 'ts-radio': true,\n [`ts-radio--${this.size}`]: true,\n 'ts-radio--checked': this.checked,\n 'ts-radio--disabled': this.disabled,\n }}\n >\n <div\n class=\"radio__base\"\n part=\"base\"\n role=\"radio\"\n aria-checked={this.checked ? 'true' : 'false'}\n aria-disabled={this.disabled ? 'true' : undefined}\n tabindex={this.disabled ? -1 : 0}\n onClick={this.handleClick}\n onKeyDown={this.handleKeydown}\n >\n <div class=\"radio__control\" part=\"control\">\n <div class=\"radio__dot\" />\n </div>\n\n <label class=\"radio__label\" part=\"label\" id={`${this.inputId}-label`}>\n {this.label ? this.label : <slot />}\n </label>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"+FAAA,MAAMA,EAAW,IAAM,yqD,MCiBVC,EAAO,M,sFAGVC,QAAUC,EAAW,YAGWC,QAAU,MAGzBC,SAAW,MAG5BC,MAAQ,GAGRC,KAGAC,MAGiBC,KAA2B,KAGlBC,SAIlC,YAAMC,GACJ,IAAKC,KAAKP,WAAaO,KAAKR,QAAS,CACnCQ,KAAKR,QAAU,KACfQ,KAAKF,SAASG,KAAK,CAAET,QAASQ,KAAKR,QAASE,MAAOM,KAAKN,O,EAIpDQ,YAAc,KACpBF,KAAKD,QAAQ,EAGPI,cAAiBC,IACvB,GAAIA,EAAMC,MAAQ,IAAK,CACrBD,EAAME,iBACNN,KAAKD,Q,GAKT,MAAAQ,GACE,OACEC,EAACC,EAAI,CAAAJ,IAAA,2CACHK,MAAO,CACL,WAAY,KACZ,CAAC,aAAaV,KAAKH,QAAS,KAC5B,oBAAqBG,KAAKR,QAC1B,qBAAsBQ,KAAKP,WAG7Be,EAAA,OAAAH,IAAA,2CACEK,MAAM,cACNC,KAAK,OACLC,KAAK,QAAO,eACEZ,KAAKR,QAAU,OAAS,QAAO,gBAC9BQ,KAAKP,SAAW,OAASoB,UACxCC,SAAUd,KAAKP,UAAW,EAAK,EAC/BsB,QAASf,KAAKE,YACdc,UAAWhB,KAAKG,eAEhBK,EAAA,OAAAH,IAAA,2CAAKK,MAAM,iBAAiBC,KAAK,WAC/BH,EAAA,OAAAH,IAAA,2CAAKK,MAAM,gBAGbF,EAAA,SAAAH,IAAA,2CAAOK,MAAM,eAAeC,KAAK,QAAQM,GAAI,GAAGjB,KAAKV,iBAClDU,KAAKJ,MAAQI,KAAKJ,MAAQY,EAAA,e","ignoreList":[]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as a,c as t,a as s,h as o,H as e}from"./p-V8-ENixA.js";import{g as i,t as l}from"./p-lpqZSiIf.js";const r=()=>`:host{font-family:var(--ts-font-family-base);--ts-modal-bg:var(--ts-color-bg-elevated);--ts-modal-overlay-bg:var(--ts-color-bg-overlay);--ts-modal-radius:var(--ts-shape-overlay);--ts-modal-shadow:var(--ts-shadow-xl)}.modal__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-modal-overlay-bg);animation:ts-fade-in 240ms cubic-bezier(0.25, 0.1, 0.25, 1)}.modal__dialog{position:relative;background-color:var(--ts-modal-bg);border-radius:var(--ts-modal-radius);box-shadow:var(--ts-modal-shadow);max-height:calc(100vh - var(--ts-spacing-16));overflow-y:auto;animation:ts-scale-in 280ms cubic-bezier(0.16, 1, 0.3, 1);outline:none}.modal__dialog--xs{width:100%;max-width:320px}.modal__dialog--sm{width:100%;max-width:440px}.modal__dialog--md{width:100%;max-width:560px}.modal__dialog--lg{width:100%;max-width:720px}.modal__dialog--xl{width:100%;max-width:960px}.modal__close{position:absolute;top: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}.modal__close:hover{background-color:var(--ts-color-bg-hover);color:var(--ts-color-text-secondary)}.modal__close:focus-visible{box-shadow:var(--ts-focus-ring)}.modal__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)}.modal__header:empty{display:none}.modal__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)}.modal__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)}.modal__footer:empty{display:none}@keyframes ts-fade-in{from{opacity:0}to{opacity:1}}@keyframes ts-scale-in{from{opacity:0;transform:scale(0.95) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}`;const n=class{constructor(s){a(this,s);this.tsOpen=t(this,"tsOpen");this.tsClose=t(this,"tsClose")}get hostEl(){return s(this)}dialogEl;removeFocusTrap;previouslyFocused;modalId=i("ts-modal");open=false;size="md";label;closeOnOverlay=true;closeOnEscape=true;showClose=true;tsOpen;tsClose;isAnimating=false;handleOpenChange(a){if(a){this.openModal()}else{this.closeModal()}}async show(){this.open=true}async close(){this.open=false}openModal(){this.previouslyFocused=document.activeElement;this.isAnimating=true;this.tsOpen.emit();document.body.style.overflow="hidden";requestAnimationFrame((()=>{if(this.dialogEl){this.removeFocusTrap=l(this.dialogEl);this.dialogEl.focus()}}))}closeModal(){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.closeOnOverlay){this.close()}};handleDialogClick=a=>{a.stopPropagation()};handleKeydown=a=>{if(a.key==="Escape"&&this.closeOnEscape){a.stopPropagation();this.close()}};handleCloseClick=()=>{this.close()};render(){if(!this.open)return null;return o(e,{class:{"ts-modal":true,"ts-modal--open":this.open},onKeyDown:this.handleKeydown},o("div",{class:"modal__overlay",part:"overlay",onClick:this.handleOverlayClick},o("div",{ref:a=>this.dialogEl=a,class:{modal__dialog:true,[`modal__dialog--${this.size}`]:true},part:"dialog",role:"dialog","aria-modal":"true","aria-label":this.label,"aria-labelledby":!this.label?`${this.modalId}-header`:undefined,tabindex:-1,onClick:this.handleDialogClick},this.showClose&&o("button",{class:"modal__close",part:"close",type:"button","aria-label":"Close modal",onClick:this.handleCloseClick},"✕"),o("div",{class:"modal__header",part:"header",id:`${this.modalId}-header`},o("slot",{name:"header"})),o("div",{class:"modal__body",part:"body"},o("slot",null)),o("div",{class:"modal__footer",part:"footer"},o("slot",{name:"footer"})))))}static get watchers(){return{open:[{handleOpenChange:0}]}}};n.style=r();export{n as ts_modal};
|
|
2
|
+
//# sourceMappingURL=p-441310f7.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["modalCss","TsModal","dialogEl","removeFocusTrap","previouslyFocused","modalId","generateId","open","size","label","closeOnOverlay","closeOnEscape","showClose","tsOpen","tsClose","isAnimating","handleOpenChange","isOpen","this","openModal","closeModal","show","close","document","activeElement","emit","body","style","overflow","requestAnimationFrame","trapFocus","focus","disconnectedCallback","handleOverlayClick","handleDialogClick","event","stopPropagation","handleKeydown","key","handleCloseClick","render","h","Host","class","onKeyDown","part","onClick","ref","el","modal__dialog","role","undefined","tabindex","type","id","name"],"sources":["src/components/modal/modal.css?tag=ts-modal&encapsulation=shadow","src/components/modal/modal.tsx"],"sourcesContent":["/* ==========================================================================\n ts-modal — Shadow DOM Scoped Styles\n\n Component tokens (Tier 3):\n --ts-modal-bg Dialog background\n --ts-modal-overlay-bg Overlay background\n --ts-modal-radius Dialog border radius\n --ts-modal-shadow Dialog box-shadow\n ========================================================================== */\n\n:host {\n font-family: var(--ts-font-family-base);\n\n --ts-modal-bg: var(--ts-color-bg-elevated);\n --ts-modal-overlay-bg: var(--ts-color-bg-overlay);\n --ts-modal-radius: var(--ts-shape-overlay);\n --ts-modal-shadow: var(--ts-shadow-xl);\n}\n\n/* ---- Overlay ---- */\n.modal__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-modal-overlay-bg);\n animation: ts-fade-in 240ms cubic-bezier(0.25, 0.1, 0.25, 1);\n}\n\n/* ---- Dialog ---- */\n.modal__dialog {\n position: relative;\n background-color: var(--ts-modal-bg);\n border-radius: var(--ts-modal-radius);\n box-shadow: var(--ts-modal-shadow);\n max-height: calc(100vh - var(--ts-spacing-16));\n overflow-y: auto;\n animation: ts-scale-in 280ms cubic-bezier(0.16, 1, 0.3, 1);\n outline: none;\n}\n\n/* ---- Sizes ---- */\n.modal__dialog--xs { width: 100%; max-width: 320px; }\n.modal__dialog--sm { width: 100%; max-width: 440px; }\n.modal__dialog--md { width: 100%; max-width: 560px; }\n.modal__dialog--lg { width: 100%; max-width: 720px; }\n.modal__dialog--xl { width: 100%; max-width: 960px; }\n\n/* ---- Close Button ---- */\n.modal__close {\n position: absolute;\n top: 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.modal__close:hover {\n background-color: var(--ts-color-bg-hover);\n color: var(--ts-color-text-secondary);\n}\n\n.modal__close:focus-visible {\n box-shadow: var(--ts-focus-ring);\n}\n\n/* ---- Sections ---- */\n.modal__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}\n\n.modal__header:empty {\n display: none;\n}\n\n.modal__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.modal__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.modal__footer:empty {\n display: none;\n}\n\n/* ---- Animations ---- */\n@keyframes ts-fade-in {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n@keyframes ts-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 {\n Component,\n Prop,\n State,\n Event,\n h,\n Host,\n Element,\n Method,\n Watch,\n} from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\nimport type { TsSize } from '../../types';\nimport { generateId, trapFocus } from '../../utils/aria';\n\n/**\n * @slot - Default slot for modal body content.\n * @slot header - Modal header content.\n * @slot footer - Modal footer content (e.g., action buttons).\n *\n * @part overlay - The backdrop overlay.\n * @part dialog - The dialog container.\n * @part header - The header wrapper.\n * @part body - The body wrapper.\n * @part footer - The footer wrapper.\n * @part close - The close button.\n */\n@Component({\n tag: 'ts-modal',\n styleUrl: 'modal.css',\n shadow: true,\n})\nexport class TsModal {\n @Element() hostEl!: HTMLElement;\n\n private dialogEl?: HTMLElement;\n private removeFocusTrap?: () => void;\n private previouslyFocused?: HTMLElement;\n private modalId = generateId('ts-modal');\n\n /** Whether the modal is open. */\n @Prop({ mutable: true, reflect: true }) open = false;\n\n /** The modal's width size preset. */\n @Prop({ reflect: true }) size: TsSize = 'md';\n\n /** Label for accessibility (used as aria-label). */\n @Prop() label?: string;\n\n /** Whether clicking the overlay closes the modal. */\n @Prop() closeOnOverlay = true;\n\n /** Whether pressing Escape closes the modal. */\n @Prop() closeOnEscape = true;\n\n /** Whether to show the close button. */\n @Prop() showClose = true;\n\n /** Emitted when the modal opens. */\n @Event({ eventName: 'tsOpen' }) tsOpen!: EventEmitter<void>;\n\n /** Emitted when the modal closes. */\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.openModal();\n } else {\n this.closeModal();\n }\n }\n\n /** Programmatically open the modal. */\n @Method()\n async show(): Promise<void> {\n this.open = true;\n }\n\n /** Programmatically close the modal. */\n @Method()\n async close(): Promise<void> {\n this.open = false;\n }\n\n private openModal(): void {\n this.previouslyFocused = document.activeElement as HTMLElement;\n this.isAnimating = true;\n this.tsOpen.emit();\n\n // Prevent body scroll\n document.body.style.overflow = 'hidden';\n\n requestAnimationFrame(() => {\n if (this.dialogEl) {\n this.removeFocusTrap = trapFocus(this.dialogEl);\n // Focus the dialog itself\n this.dialogEl.focus();\n }\n });\n }\n\n private closeModal(): void {\n this.isAnimating = false;\n this.tsClose.emit();\n\n // Restore body scroll\n document.body.style.overflow = '';\n\n // Clean up focus trap\n this.removeFocusTrap?.();\n\n // Restore focus\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.closeOnOverlay) {\n this.close();\n }\n };\n\n private handleDialogClick = (event: MouseEvent): void => {\n // Prevent overlay click from firing when clicking inside the dialog\n event.stopPropagation();\n };\n\n private handleKeydown = (event: KeyboardEvent): void => {\n if (event.key === 'Escape' && this.closeOnEscape) {\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 return (\n <Host\n class={{\n 'ts-modal': true,\n 'ts-modal--open': this.open,\n }}\n onKeyDown={this.handleKeydown}\n >\n <div class=\"modal__overlay\" part=\"overlay\" onClick={this.handleOverlayClick}>\n <div\n ref={(el) => (this.dialogEl = el)}\n class={{\n 'modal__dialog': true,\n [`modal__dialog--${this.size}`]: true,\n }}\n part=\"dialog\"\n role=\"dialog\"\n aria-modal=\"true\"\n aria-label={this.label}\n aria-labelledby={!this.label ? `${this.modalId}-header` : undefined}\n tabindex={-1}\n onClick={this.handleDialogClick}\n >\n {this.showClose && (\n <button\n class=\"modal__close\"\n part=\"close\"\n type=\"button\"\n aria-label=\"Close modal\"\n onClick={this.handleCloseClick}\n >\n ✕\n </button>\n )}\n\n <div class=\"modal__header\" part=\"header\" id={`${this.modalId}-header`}>\n <slot name=\"header\" />\n </div>\n\n <div class=\"modal__body\" part=\"body\">\n <slot />\n </div>\n\n <div class=\"modal__footer\" part=\"footer\">\n <slot name=\"footer\" />\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"2GAAA,MAAMA,EAAW,IAAM,8yE,MCgCVC,EAAO,M,iHAGVC,SACAC,gBACAC,kBACAC,QAAUC,EAAW,YAGWC,KAAO,MAGtBC,KAAe,KAGhCC,MAGAC,eAAiB,KAGjBC,cAAgB,KAGhBC,UAAY,KAGYC,OAGCC,QAGxBC,YAAc,MAGvB,gBAAAC,CAAiBC,GACf,GAAIA,EAAQ,CACVC,KAAKC,W,KACA,CACLD,KAAKE,Y,EAMT,UAAMC,GACJH,KAAKX,KAAO,I,CAKd,WAAMe,GACJJ,KAAKX,KAAO,K,CAGN,SAAAY,GACND,KAAKd,kBAAoBmB,SAASC,cAClCN,KAAKH,YAAc,KACnBG,KAAKL,OAAOY,OAGZF,SAASG,KAAKC,MAAMC,SAAW,SAE/BC,uBAAsB,KACpB,GAAIX,KAAKhB,SAAU,CACjBgB,KAAKf,gBAAkB2B,EAAUZ,KAAKhB,UAEtCgB,KAAKhB,SAAS6B,O,KAKZ,UAAAX,GACNF,KAAKH,YAAc,MACnBG,KAAKJ,QAAQW,OAGbF,SAASG,KAAKC,MAAMC,SAAW,GAG/BV,KAAKf,oBAGLe,KAAKd,mBAAmB2B,O,CAG1B,oBAAAC,GACEd,KAAKf,oBACLoB,SAASG,KAAKC,MAAMC,SAAW,E,CAGzBK,mBAAqB,KAC3B,GAAIf,KAAKR,eAAgB,CACvBQ,KAAKI,O,GAIDY,kBAAqBC,IAE3BA,EAAMC,iBAAiB,EAGjBC,cAAiBF,IACvB,GAAIA,EAAMG,MAAQ,UAAYpB,KAAKP,cAAe,CAChDwB,EAAMC,kBACNlB,KAAKI,O,GAIDiB,iBAAmB,KACzBrB,KAAKI,OAAO,EAId,MAAAkB,GACE,IAAKtB,KAAKX,KAAM,OAAO,KAEvB,OACEkC,EAACC,EAAI,CACHC,MAAO,CACL,WAAY,KACZ,iBAAkBzB,KAAKX,MAEzBqC,UAAW1B,KAAKmB,eAEhBI,EAAA,OAAKE,MAAM,iBAAiBE,KAAK,UAAUC,QAAS5B,KAAKe,oBACvDQ,EAAA,OACEM,IAAMC,GAAQ9B,KAAKhB,SAAW8C,EAC9BL,MAAO,CACLM,cAAiB,KACjB,CAAC,kBAAkB/B,KAAKV,QAAS,MAEnCqC,KAAK,SACLK,KAAK,SAAQ,aACF,OAAM,aACLhC,KAAKT,MAAK,mBACJS,KAAKT,MAAQ,GAAGS,KAAKb,iBAAmB8C,UAC1DC,UAAU,EACVN,QAAS5B,KAAKgB,mBAEbhB,KAAKN,WACJ6B,EAAA,UACEE,MAAM,eACNE,KAAK,QACLQ,KAAK,SAAQ,aACF,cACXP,QAAS5B,KAAKqB,kBAAgB,KAMlCE,EAAA,OAAKE,MAAM,gBAAgBE,KAAK,SAASS,GAAI,GAAGpC,KAAKb,kBACnDoC,EAAA,QAAMc,KAAK,YAGbd,EAAA,OAAKE,MAAM,cAAcE,KAAK,QAC5BJ,EAAA,cAGFA,EAAA,OAAKE,MAAM,gBAAgBE,KAAK,UAC9BJ,EAAA,QAAMc,KAAK,c","ignoreList":[]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r,c as o,h as t,H as e}from"./p-V8-ENixA.js";const a=()=>`:host{display:inline-block;vertical-align:middle;font-family:var(--ts-font-family-base);--ts-chip-radius:var(--ts-radius-full, 9999px);--ts-chip-height:2rem}.chip__base{display:inline-flex;align-items:center;gap:var(--ts-spacing-1);block-size:var(--ts-chip-height);padding-inline:var(--ts-spacing-3);border-radius:var(--ts-chip-radius);font-size:var(--ts-font-size-sm);font-weight:var(--ts-font-weight-medium);line-height:1;cursor:pointer;user-select:none;border:1px solid transparent;outline:none;transition:background-color var(--ts-transition-fast), border-color var(--ts-transition-fast), color var(--ts-transition-fast), box-shadow var(--ts-transition-fast)}.chip__base:focus-visible{box-shadow:var(--ts-focus-ring)}:host([size="sm"]){--ts-chip-height:1.5rem}:host([size="sm"]) .chip__base{padding-inline:var(--ts-spacing-2);font-size:var(--ts-font-size-xs)}:host([size="lg"]){--ts-chip-height:2.5rem}:host([size="lg"]) .chip__base{padding-inline:var(--ts-spacing-4);font-size:var(--ts-font-size-md)}:host([variant="neutral"]:not([outline])) .chip__base{background-color:var(--ts-color-neutral-200);color:var(--ts-color-text-primary)}:host([variant="neutral"]:not([outline])) .chip__base:hover{background-color:var(--ts-color-neutral-300)}:host([variant="primary"]:not([outline])) .chip__base{background-color:var(--ts-color-primary-100, var(--ts-color-primary-500));color:var(--ts-color-primary-700, var(--ts-color-text-primary))}:host([variant="primary"]:not([outline])) .chip__base:hover{background-color:var(--ts-color-primary-200, var(--ts-color-primary-600))}:host([variant="success"]:not([outline])) .chip__base{background-color:var(--ts-color-success-bg);color:var(--ts-color-success-600)}:host([variant="warning"]:not([outline])) .chip__base{background-color:var(--ts-color-warning-bg);color:var(--ts-color-warning-600)}:host([variant="danger"]:not([outline])) .chip__base{background-color:var(--ts-color-danger-bg);color:var(--ts-color-danger-600)}:host([variant="info"]:not([outline])) .chip__base{background-color:var(--ts-color-info-bg);color:var(--ts-color-info-600)}:host([variant="secondary"]:not([outline])) .chip__base{background-color:var(--ts-color-neutral-100);color:var(--ts-color-text-secondary)}:host([outline]) .chip__base{background-color:transparent}:host([outline][variant="neutral"]) .chip__base{border-color:var(--ts-color-border-strong);color:var(--ts-color-text-secondary)}:host([outline][variant="neutral"]) .chip__base:hover{background-color:var(--ts-color-bg-subtle)}:host([outline][variant="primary"]) .chip__base{border-color:var(--ts-color-primary-500);color:var(--ts-color-primary-600)}:host([outline][variant="primary"]) .chip__base:hover{background-color:var(--ts-color-primary-100, var(--ts-color-interactive-primary-subtle))}:host([outline][variant="danger"]) .chip__base{border-color:var(--ts-color-danger-500);color:var(--ts-color-danger-600)}:host([outline][variant="success"]) .chip__base{border-color:var(--ts-color-success-500, var(--ts-color-success-border));color:var(--ts-color-success-600)}:host([outline][variant="warning"]) .chip__base{border-color:var(--ts-color-warning-500, var(--ts-color-warning-border));color:var(--ts-color-warning-600)}:host([outline][variant="info"]) .chip__base{border-color:var(--ts-color-info-500, var(--ts-color-info-border));color:var(--ts-color-info-600)}:host([selected]) .chip__base{background-color:var(--ts-color-interactive-primary);color:var(--ts-color-text-on-primary);border-color:var(--ts-color-interactive-primary)}:host([selected]) .chip__base:hover{background-color:var(--ts-color-interactive-primary-hover);border-color:var(--ts-color-interactive-primary-hover)}:host([disabled]) .chip__base{opacity:0.5;cursor:not-allowed;pointer-events:none}.chip__prefix{display:inline-flex;align-items:center}.chip__prefix:empty{display:none}.chip__label{display:inline-flex;align-items:center}.chip__remove{display:inline-flex;align-items:center;justify-content:center;inline-size:1.1em;block-size:1.1em;border:none;border-radius:50%;background:transparent;color:currentColor;opacity:0.6;cursor:pointer;font-size:0.75em;padding:0;margin-inline-start:var(--ts-spacing-1);line-height:1;transition:opacity var(--ts-transition-fast)}.chip__remove:hover{opacity:1}.chip__remove:focus-visible{box-shadow:var(--ts-focus-ring);opacity:1}.chip__remove:disabled{cursor:not-allowed;pointer-events:none}`;const i=class{constructor(t){r(this,t);this.tsRemove=o(this,"tsRemove");this.tsClick=o(this,"tsClick")}variant="neutral";size="md";removable=false;disabled=false;selected=false;outline=false;tsRemove;tsClick;handleClick=()=>{if(this.disabled)return;this.tsClick.emit()};handleRemove=r=>{r.stopPropagation();if(this.disabled)return;this.tsRemove.emit()};handleKeydown=r=>{if(this.disabled)return;if(r.key==="Enter"||r.key===" "){r.preventDefault();this.tsClick.emit()}};handleRemoveKeydown=r=>{if(this.disabled)return;if(r.key==="Enter"||r.key===" "){r.preventDefault();r.stopPropagation();this.tsRemove.emit()}};render(){const r=!this.disabled;return t(e,{key:"cf6fed27509592a4105f794976e8995ca03ddecd",class:{"ts-chip":true,[`ts-chip--${this.variant}`]:true,[`ts-chip--${this.size}`]:true,"ts-chip--selected":this.selected,"ts-chip--outline":this.outline,"ts-chip--disabled":this.disabled,"ts-chip--removable":this.removable}},t("span",{key:"355bf33f71eb0761f766a5363bc317066dfc1b5c",class:"chip__base",part:"base",role:"button",tabindex:r?"0":undefined,"aria-disabled":this.disabled?"true":undefined,"aria-pressed":this.selected?"true":undefined,onClick:this.handleClick,onKeyDown:this.handleKeydown},t("span",{key:"8476fe8599f535022b2afc7c6229bd92ea3549ff",class:"chip__prefix",part:"prefix"},t("slot",{key:"2379133e14d192afd474e06ce3a2140a6a7dcfa7",name:"prefix"})),t("span",{key:"8a1053c6315f717a12fc61f0dc3ffeb458a6fbb2",class:"chip__label",part:"label"},t("slot",{key:"3d46aefd8fd7a03d6bd3d21d5679a6b90361b1ed"})),this.removable&&t("button",{key:"41de0966096540a5f9f29168a181a353661ee934",class:"chip__remove",part:"remove",type:"button","aria-label":"Remove",disabled:this.disabled,onClick:this.handleRemove,onKeyDown:this.handleRemoveKeydown},"\\u2715")))}};i.style=a();export{i as ts_chip};
|
|
2
|
+
//# sourceMappingURL=p-491e1a75.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["chipCss","TsChip","variant","size","removable","disabled","selected","outline","tsRemove","tsClick","handleClick","this","emit","handleRemove","event","stopPropagation","handleKeydown","key","preventDefault","handleRemoveKeydown","render","isInteractive","h","Host","class","part","role","tabindex","undefined","onClick","onKeyDown","name","type"],"sources":["src/components/chip/chip.css?tag=ts-chip&encapsulation=shadow","src/components/chip/chip.tsx"],"sourcesContent":["/* ==========================================================================\n ts-chip — Shadow DOM Scoped Styles\n\n Component tokens (Tier 3):\n --ts-chip-radius Border radius (pill shape)\n --ts-chip-height Chip height per size\n ========================================================================== */\n\n:host {\n display: inline-block;\n vertical-align: middle;\n font-family: var(--ts-font-family-base);\n\n --ts-chip-radius: var(--ts-radius-full, 9999px);\n --ts-chip-height: 2rem;\n}\n\n/* ---- Base ---- */\n.chip__base {\n display: inline-flex;\n align-items: center;\n gap: var(--ts-spacing-1);\n block-size: var(--ts-chip-height);\n padding-inline: var(--ts-spacing-3);\n border-radius: var(--ts-chip-radius);\n font-size: var(--ts-font-size-sm);\n font-weight: var(--ts-font-weight-medium);\n line-height: 1;\n cursor: pointer;\n user-select: none;\n border: 1px solid transparent;\n outline: none;\n transition:\n background-color var(--ts-transition-fast),\n border-color var(--ts-transition-fast),\n color var(--ts-transition-fast),\n box-shadow var(--ts-transition-fast);\n}\n\n.chip__base:focus-visible {\n box-shadow: var(--ts-focus-ring);\n}\n\n/* ---- Sizes ---- */\n:host([size=\"sm\"]) {\n --ts-chip-height: 1.5rem;\n}\n:host([size=\"sm\"]) .chip__base {\n padding-inline: var(--ts-spacing-2);\n font-size: var(--ts-font-size-xs);\n}\n\n:host([size=\"lg\"]) {\n --ts-chip-height: 2.5rem;\n}\n:host([size=\"lg\"]) .chip__base {\n padding-inline: var(--ts-spacing-4);\n font-size: var(--ts-font-size-md);\n}\n\n/* ---- Solid Variants ---- */\n:host([variant=\"neutral\"]:not([outline])) .chip__base {\n background-color: var(--ts-color-neutral-200);\n color: var(--ts-color-text-primary);\n}\n:host([variant=\"neutral\"]:not([outline])) .chip__base:hover {\n background-color: var(--ts-color-neutral-300);\n}\n\n:host([variant=\"primary\"]:not([outline])) .chip__base {\n background-color: var(--ts-color-primary-100, var(--ts-color-primary-500));\n color: var(--ts-color-primary-700, var(--ts-color-text-primary));\n}\n:host([variant=\"primary\"]:not([outline])) .chip__base:hover {\n background-color: var(--ts-color-primary-200, var(--ts-color-primary-600));\n}\n\n:host([variant=\"success\"]:not([outline])) .chip__base {\n background-color: var(--ts-color-success-bg);\n color: var(--ts-color-success-600);\n}\n\n:host([variant=\"warning\"]:not([outline])) .chip__base {\n background-color: var(--ts-color-warning-bg);\n color: var(--ts-color-warning-600);\n}\n\n:host([variant=\"danger\"]:not([outline])) .chip__base {\n background-color: var(--ts-color-danger-bg);\n color: var(--ts-color-danger-600);\n}\n\n:host([variant=\"info\"]:not([outline])) .chip__base {\n background-color: var(--ts-color-info-bg);\n color: var(--ts-color-info-600);\n}\n\n:host([variant=\"secondary\"]:not([outline])) .chip__base {\n background-color: var(--ts-color-neutral-100);\n color: var(--ts-color-text-secondary);\n}\n\n/* ---- Outline Variants ---- */\n:host([outline]) .chip__base {\n background-color: transparent;\n}\n\n:host([outline][variant=\"neutral\"]) .chip__base {\n border-color: var(--ts-color-border-strong);\n color: var(--ts-color-text-secondary);\n}\n:host([outline][variant=\"neutral\"]) .chip__base:hover {\n background-color: var(--ts-color-bg-subtle);\n}\n\n:host([outline][variant=\"primary\"]) .chip__base {\n border-color: var(--ts-color-primary-500);\n color: var(--ts-color-primary-600);\n}\n:host([outline][variant=\"primary\"]) .chip__base:hover {\n background-color: var(--ts-color-primary-100, var(--ts-color-interactive-primary-subtle));\n}\n\n:host([outline][variant=\"danger\"]) .chip__base {\n border-color: var(--ts-color-danger-500);\n color: var(--ts-color-danger-600);\n}\n\n:host([outline][variant=\"success\"]) .chip__base {\n border-color: var(--ts-color-success-500, var(--ts-color-success-border));\n color: var(--ts-color-success-600);\n}\n\n:host([outline][variant=\"warning\"]) .chip__base {\n border-color: var(--ts-color-warning-500, var(--ts-color-warning-border));\n color: var(--ts-color-warning-600);\n}\n\n:host([outline][variant=\"info\"]) .chip__base {\n border-color: var(--ts-color-info-500, var(--ts-color-info-border));\n color: var(--ts-color-info-600);\n}\n\n/* ---- Selected state ---- */\n:host([selected]) .chip__base {\n background-color: var(--ts-color-interactive-primary);\n color: var(--ts-color-text-on-primary);\n border-color: var(--ts-color-interactive-primary);\n}\n:host([selected]) .chip__base:hover {\n background-color: var(--ts-color-interactive-primary-hover);\n border-color: var(--ts-color-interactive-primary-hover);\n}\n\n/* ---- Disabled ---- */\n:host([disabled]) .chip__base {\n opacity: 0.5;\n cursor: not-allowed;\n pointer-events: none;\n}\n\n/* ---- Prefix ---- */\n.chip__prefix {\n display: inline-flex;\n align-items: center;\n}\n\n.chip__prefix:empty {\n display: none;\n}\n\n/* ---- Label ---- */\n.chip__label {\n display: inline-flex;\n align-items: center;\n}\n\n/* ---- Remove button ---- */\n.chip__remove {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n inline-size: 1.1em;\n block-size: 1.1em;\n border: none;\n border-radius: 50%;\n background: transparent;\n color: currentColor;\n opacity: 0.6;\n cursor: pointer;\n font-size: 0.75em;\n padding: 0;\n margin-inline-start: var(--ts-spacing-1);\n line-height: 1;\n transition: opacity var(--ts-transition-fast);\n}\n\n.chip__remove:hover {\n opacity: 1;\n}\n\n.chip__remove:focus-visible {\n box-shadow: var(--ts-focus-ring);\n opacity: 1;\n}\n\n.chip__remove:disabled {\n cursor: not-allowed;\n pointer-events: none;\n}\n","import { Component, Prop, Event, h, Host } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\nimport type { TsVariant, TsSize } from '../../types';\n\n/**\n * @slot - Default slot for chip label.\n * @slot prefix - Icon or content before the label.\n *\n * @part base - The chip container.\n * @part label - The label wrapper.\n * @part prefix - The prefix slot wrapper.\n * @part remove - The remove button.\n */\n@Component({\n tag: 'ts-chip',\n styleUrl: 'chip.css',\n shadow: true,\n})\nexport class TsChip {\n /** The chip's semantic variant. */\n @Prop({ reflect: true }) variant: TsVariant = 'neutral';\n\n /** The chip's size. */\n @Prop({ reflect: true }) size: TsSize = 'md';\n\n /** Whether the chip shows a remove button. */\n @Prop({ reflect: true }) removable = false;\n\n /** Whether the chip is disabled. */\n @Prop({ reflect: true }) disabled = false;\n\n /** Whether the chip is selected. */\n @Prop({ reflect: true }) selected = false;\n\n /** Whether to render as outline style. */\n @Prop({ reflect: true }) outline = false;\n\n /** Emitted when the remove button is clicked. */\n @Event({ eventName: 'tsRemove' }) tsRemove!: EventEmitter<void>;\n\n /** Emitted when the chip body is clicked. */\n @Event({ eventName: 'tsClick' }) tsClick!: EventEmitter<void>;\n\n private handleClick = (): void => {\n if (this.disabled) return;\n this.tsClick.emit();\n };\n\n private handleRemove = (event: MouseEvent): void => {\n event.stopPropagation();\n if (this.disabled) return;\n this.tsRemove.emit();\n };\n\n private handleKeydown = (event: KeyboardEvent): void => {\n if (this.disabled) return;\n if (event.key === 'Enter' || event.key === ' ') {\n event.preventDefault();\n this.tsClick.emit();\n }\n };\n\n private handleRemoveKeydown = (event: KeyboardEvent): void => {\n if (this.disabled) return;\n if (event.key === 'Enter' || event.key === ' ') {\n event.preventDefault();\n event.stopPropagation();\n this.tsRemove.emit();\n }\n };\n\n // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n render() {\n const isInteractive = !this.disabled;\n\n return (\n <Host\n class={{\n 'ts-chip': true,\n [`ts-chip--${this.variant}`]: true,\n [`ts-chip--${this.size}`]: true,\n 'ts-chip--selected': this.selected,\n 'ts-chip--outline': this.outline,\n 'ts-chip--disabled': this.disabled,\n 'ts-chip--removable': this.removable,\n }}\n >\n <span\n class=\"chip__base\"\n part=\"base\"\n role=\"button\"\n tabindex={isInteractive ? '0' : undefined}\n aria-disabled={this.disabled ? 'true' : undefined}\n aria-pressed={this.selected ? 'true' : undefined}\n onClick={this.handleClick}\n onKeyDown={this.handleKeydown}\n >\n <span class=\"chip__prefix\" part=\"prefix\">\n <slot name=\"prefix\" />\n </span>\n\n <span class=\"chip__label\" part=\"label\">\n <slot />\n </span>\n\n {this.removable && (\n <button\n class=\"chip__remove\"\n part=\"remove\"\n type=\"button\"\n aria-label=\"Remove\"\n disabled={this.disabled}\n onClick={this.handleRemove}\n onKeyDown={this.handleRemoveKeydown}\n >\n \\u2715\n </button>\n )}\n </span>\n </Host>\n );\n }\n}\n"],"mappings":"oDAAA,MAAMA,EAAU,IAAM,8yI,MCkBTC,EAAM,M,yFAEQC,QAAqB,UAGrBC,KAAe,KAGfC,UAAY,MAGZC,SAAW,MAGXC,SAAW,MAGXC,QAAU,MAGDC,SAGDC,QAEzBC,YAAc,KACpB,GAAIC,KAAKN,SAAU,OACnBM,KAAKF,QAAQG,MAAM,EAGbC,aAAgBC,IACtBA,EAAMC,kBACN,GAAIJ,KAAKN,SAAU,OACnBM,KAAKH,SAASI,MAAM,EAGdI,cAAiBF,IACvB,GAAIH,KAAKN,SAAU,OACnB,GAAIS,EAAMG,MAAQ,SAAWH,EAAMG,MAAQ,IAAK,CAC9CH,EAAMI,iBACNP,KAAKF,QAAQG,M,GAITO,oBAAuBL,IAC7B,GAAIH,KAAKN,SAAU,OACnB,GAAIS,EAAMG,MAAQ,SAAWH,EAAMG,MAAQ,IAAK,CAC9CH,EAAMI,iBACNJ,EAAMC,kBACNJ,KAAKH,SAASI,M,GAKlB,MAAAQ,GACE,MAAMC,GAAiBV,KAAKN,SAE5B,OACEiB,EAACC,EAAI,CAAAN,IAAA,2CACHO,MAAO,CACL,UAAW,KACX,CAAC,YAAYb,KAAKT,WAAY,KAC9B,CAAC,YAAYS,KAAKR,QAAS,KAC3B,oBAAqBQ,KAAKL,SAC1B,mBAAoBK,KAAKJ,QACzB,oBAAqBI,KAAKN,SAC1B,qBAAsBM,KAAKP,YAG7BkB,EAAA,QAAAL,IAAA,2CACEO,MAAM,aACNC,KAAK,OACLC,KAAK,SACLC,SAAUN,EAAgB,IAAMO,UAAS,gBAC1BjB,KAAKN,SAAW,OAASuB,UAAS,eACnCjB,KAAKL,SAAW,OAASsB,UACvCC,QAASlB,KAAKD,YACdoB,UAAWnB,KAAKK,eAEhBM,EAAA,QAAAL,IAAA,2CAAMO,MAAM,eAAeC,KAAK,UAC9BH,EAAA,QAAAL,IAAA,2CAAMc,KAAK,YAGbT,EAAA,QAAAL,IAAA,2CAAMO,MAAM,cAAcC,KAAK,SAC7BH,EAAA,QAAAL,IAAA,8CAGDN,KAAKP,WACJkB,EAAA,UAAAL,IAAA,2CACEO,MAAM,eACNC,KAAK,SACLO,KAAK,SAAQ,aACF,SACX3B,SAAUM,KAAKN,SACfwB,QAASlB,KAAKE,aACdiB,UAAWnB,KAAKQ,qBAAmB,Y","ignoreList":[]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as e,c as i,h as a,H as t}from"./p-V8-ENixA.js";const n=()=>`:host{display:block}.accordion-item__header{display:flex;align-items:center;justify-content:space-between;gap:var(--ts-spacing-2);padding-block:var(--ts-spacing-3);padding-inline:var(--ts-spacing-4);background:var(--ts-accordion-header-bg, transparent);border:none;cursor:pointer;font-family:var(--ts-font-family-base);font-size:var(--ts-font-size-md);font-weight:var(--ts-font-weight-semi);color:var(--ts-color-text-primary);outline:none;transition:background-color var(--ts-transition-fast);user-select:none}.accordion-item__header:hover:not([aria-disabled="true"]){background-color:var(--ts-color-bg-subtle)}.accordion-item__header:focus-visible{box-shadow:var(--ts-focus-ring)}:host([disabled]) .accordion-item__header{opacity:0.5;cursor:not-allowed}.accordion-item__icon{display:inline-flex;align-items:center;transition:transform var(--ts-transition-fast)}.accordion-item__icon svg{inline-size:1.25em;block-size:1.25em}:host(.ts-accordion-item--open) .accordion-item__icon{transform:rotate(180deg)}.accordion-item__panel{overflow:hidden;transition:max-block-size var(--ts-transition-normal)}.accordion-item__panel[hidden]{display:none}.accordion-item__content{padding-block:var(--ts-spacing-2);padding-inline:var(--ts-spacing-4);padding-block-end:var(--ts-spacing-4);font-size:var(--ts-font-size-md);color:var(--ts-color-text-secondary)}`;let o=0;const s=class{constructor(a){e(this,a);this.tsToggle=i(this,"tsToggle")}headerId;panelId;open=false;disabled=false;heading;tsToggle;internalOpen=false;onOpenChange(e){this.internalOpen=e}connectedCallback(){const e=o++;this.headerId=`ts-accordion-header-${e}`;this.panelId=`ts-accordion-panel-${e}`;this.internalOpen=this.open}handleClick=()=>{if(this.disabled)return;this.open=!this.open;this.internalOpen=this.open;this.tsToggle.emit({open:this.open})};handleKeyDown=e=>{if(e.key==="Enter"||e.key===" "){e.preventDefault();this.handleClick()}};render(){return a(t,{key:"aa3316d5e46a7c4e7c055497e52db820e2eb2804",class:{"ts-accordion-item":true,"ts-accordion-item--open":this.internalOpen,"ts-accordion-item--disabled":this.disabled}},a("div",{key:"27e63690847de4d816057891141402f51375a179",class:"accordion-item__header",part:"header",id:this.headerId,role:"button",tabindex:this.disabled?-1:0,"aria-expanded":this.internalOpen?"true":"false","aria-controls":this.panelId,"aria-disabled":this.disabled?"true":undefined,onClick:this.handleClick,onKeyDown:this.handleKeyDown},a("slot",{key:"fd3c289960510c7953c1853a10dd4b544e361d0c",name:"header"},a("span",{key:"8cd789055352fb8f0773511985e2a27cfb92551b",class:"accordion-item__heading"},this.heading)),a("span",{key:"2f33c59115a23e86e92fb0e3dcbc6098718e16e1",class:"accordion-item__icon","aria-hidden":"true"},a("svg",{key:"632affef71463346f8ff771cfd58db096675d532",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"},a("polyline",{key:"ee66ca775b9f9081cd9a6c265aee0e075e12f2cb",points:"6 9 12 15 18 9"})))),a("div",{key:"aa58f91f91dba2000579597767d33fdd10c52547",class:"accordion-item__panel",part:"panel",id:this.panelId,role:"region","aria-labelledby":this.headerId,hidden:!this.internalOpen},a("div",{key:"980de82df6259725bf743a22734cb9be96f0a01b",class:"accordion-item__content"},a("slot",{key:"ae98ce52f3686885e61b7fdf4a8b6c60f0cebd72"}))))}static get watchers(){return{open:[{onOpenChange:0}]}}};s.style=n();export{s as ts_accordion_item};
|
|
2
|
+
//# sourceMappingURL=p-50d092ce.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["accordionItemCss","accordionItemId","TsAccordionItem","headerId","panelId","open","disabled","heading","tsToggle","internalOpen","onOpenChange","newVal","this","connectedCallback","id","handleClick","emit","handleKeyDown","event","key","preventDefault","render","h","Host","class","part","role","tabindex","undefined","onClick","onKeyDown","name","viewBox","fill","stroke","points","hidden"],"sources":["src/components/accordion/accordion-item.css?tag=ts-accordion-item&encapsulation=shadow","src/components/accordion/accordion-item.tsx"],"sourcesContent":["/* ==========================================================================\n ts-accordion-item — Shadow DOM Scoped Styles\n ========================================================================== */\n\n:host {\n display: block;\n}\n\n/* ---- Header ---- */\n.accordion-item__header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--ts-spacing-2);\n padding-block: var(--ts-spacing-3);\n padding-inline: var(--ts-spacing-4);\n background: var(--ts-accordion-header-bg, transparent);\n border: none;\n cursor: pointer;\n font-family: var(--ts-font-family-base);\n font-size: var(--ts-font-size-md);\n font-weight: var(--ts-font-weight-semi);\n color: var(--ts-color-text-primary);\n outline: none;\n transition: background-color var(--ts-transition-fast);\n user-select: none;\n}\n\n.accordion-item__header:hover:not([aria-disabled=\"true\"]) {\n background-color: var(--ts-color-bg-subtle);\n}\n\n.accordion-item__header:focus-visible {\n box-shadow: var(--ts-focus-ring);\n}\n\n/* ---- Disabled ---- */\n:host([disabled]) .accordion-item__header {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n/* ---- Chevron icon ---- */\n.accordion-item__icon {\n display: inline-flex;\n align-items: center;\n transition: transform var(--ts-transition-fast);\n}\n\n.accordion-item__icon svg {\n inline-size: 1.25em;\n block-size: 1.25em;\n}\n\n:host(.ts-accordion-item--open) .accordion-item__icon {\n transform: rotate(180deg);\n}\n\n/* ---- Panel ---- */\n.accordion-item__panel {\n overflow: hidden;\n transition: max-block-size var(--ts-transition-normal);\n}\n\n.accordion-item__panel[hidden] {\n display: none;\n}\n\n.accordion-item__content {\n padding-block: var(--ts-spacing-2);\n padding-inline: var(--ts-spacing-4);\n padding-block-end: var(--ts-spacing-4);\n font-size: var(--ts-font-size-md);\n color: var(--ts-color-text-secondary);\n}\n","import { Component, Prop, Event, h, Host, State, Watch } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\n\nlet accordionItemId = 0;\n\n/**\n * @slot - Default slot for panel content.\n * @slot header - Custom header content (replaces heading text).\n *\n * @part header - The header button.\n * @part panel - The content panel.\n */\n@Component({\n tag: 'ts-accordion-item',\n styleUrl: 'accordion-item.css',\n shadow: true,\n})\nexport class TsAccordionItem {\n private headerId!: string;\n private panelId!: string;\n\n /** Whether the item is expanded. */\n @Prop({ mutable: true, reflect: true }) open = false;\n\n /** Disables toggling. */\n @Prop({ reflect: true }) disabled = false;\n\n /** Header text for the item. */\n @Prop() heading?: string;\n\n /** Emitted when the item is toggled. */\n @Event({ eventName: 'tsToggle' }) tsToggle!: EventEmitter<{ open: boolean }>;\n\n @State() internalOpen = false;\n\n @Watch('open')\n onOpenChange(newVal: boolean): void {\n this.internalOpen = newVal;\n }\n\n connectedCallback(): void {\n const id = accordionItemId++;\n this.headerId = `ts-accordion-header-${id}`;\n this.panelId = `ts-accordion-panel-${id}`;\n this.internalOpen = this.open;\n }\n\n private handleClick = (): void => {\n if (this.disabled) return;\n this.open = !this.open;\n this.internalOpen = this.open;\n this.tsToggle.emit({ open: this.open });\n };\n\n private handleKeyDown = (event: KeyboardEvent): void => {\n if (event.key === 'Enter' || event.key === ' ') {\n event.preventDefault();\n this.handleClick();\n }\n };\n\n // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n render() {\n return (\n <Host\n class={{\n 'ts-accordion-item': true,\n 'ts-accordion-item--open': this.internalOpen,\n 'ts-accordion-item--disabled': this.disabled,\n }}\n >\n <div\n class=\"accordion-item__header\"\n part=\"header\"\n id={this.headerId}\n role=\"button\"\n tabindex={this.disabled ? -1 : 0}\n aria-expanded={this.internalOpen ? 'true' : 'false'}\n aria-controls={this.panelId}\n aria-disabled={this.disabled ? 'true' : undefined}\n onClick={this.handleClick}\n onKeyDown={this.handleKeyDown}\n >\n <slot name=\"header\">\n <span class=\"accordion-item__heading\">{this.heading}</span>\n </slot>\n <span class=\"accordion-item__icon\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <polyline points=\"6 9 12 15 18 9\" />\n </svg>\n </span>\n </div>\n <div\n class=\"accordion-item__panel\"\n part=\"panel\"\n id={this.panelId}\n role=\"region\"\n aria-labelledby={this.headerId}\n hidden={!this.internalOpen}\n >\n <div class=\"accordion-item__content\">\n <slot />\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"yDAAA,MAAMA,EAAmB,IAAM,k0CCG/B,IAAIC,EAAkB,E,MAcTC,EAAe,M,0DAClBC,SACAC,QAGgCC,KAAO,MAGtBC,SAAW,MAG5BC,QAG0BC,SAEzBC,aAAe,MAGxB,YAAAC,CAAaC,GACXC,KAAKH,aAAeE,C,CAGtB,iBAAAE,GACE,MAAMC,EAAKb,IACXW,KAAKT,SAAW,uBAAuBW,IACvCF,KAAKR,QAAU,sBAAsBU,IACrCF,KAAKH,aAAeG,KAAKP,I,CAGnBU,YAAc,KACpB,GAAIH,KAAKN,SAAU,OACnBM,KAAKP,MAAQO,KAAKP,KAClBO,KAAKH,aAAeG,KAAKP,KACzBO,KAAKJ,SAASQ,KAAK,CAAEX,KAAMO,KAAKP,MAAO,EAGjCY,cAAiBC,IACvB,GAAIA,EAAMC,MAAQ,SAAWD,EAAMC,MAAQ,IAAK,CAC9CD,EAAME,iBACNR,KAAKG,a,GAKT,MAAAM,GACE,OACEC,EAACC,EAAI,CAAAJ,IAAA,2CACHK,MAAO,CACL,oBAAqB,KACrB,0BAA2BZ,KAAKH,aAChC,8BAA+BG,KAAKN,WAGtCgB,EAAA,OAAAH,IAAA,2CACEK,MAAM,yBACNC,KAAK,SACLX,GAAIF,KAAKT,SACTuB,KAAK,SACLC,SAAUf,KAAKN,UAAW,EAAK,EAAC,gBACjBM,KAAKH,aAAe,OAAS,QAAO,gBACpCG,KAAKR,QAAO,gBACZQ,KAAKN,SAAW,OAASsB,UACxCC,QAASjB,KAAKG,YACde,UAAWlB,KAAKK,eAEhBK,EAAA,QAAAH,IAAA,2CAAMY,KAAK,UACTT,EAAA,QAAAH,IAAA,2CAAMK,MAAM,2BAA2BZ,KAAKL,UAE9Ce,EAAA,QAAAH,IAAA,2CAAMK,MAAM,uBAAsB,cAAa,QAC7CF,EAAA,OAAAH,IAAA,2CAAKa,QAAQ,YAAYC,KAAK,OAAOC,OAAO,eAAc,eAAc,IAAG,iBAAgB,QAAO,kBAAiB,SACjHZ,EAAA,YAAAH,IAAA,2CAAUgB,OAAO,sBAIvBb,EAAA,OAAAH,IAAA,2CACEK,MAAM,wBACNC,KAAK,QACLX,GAAIF,KAAKR,QACTsB,KAAK,SAAQ,kBACId,KAAKT,SACtBiC,QAASxB,KAAKH,cAEda,EAAA,OAAAH,IAAA,2CAAKK,MAAM,2BACTF,EAAA,QAAAH,IAAA,+C","ignoreList":[]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as e,c as o,a as s,h as t,H as c}from"./p-V8-ENixA.js";import{g as r}from"./p-lpqZSiIf.js";const i=()=>`:host{display:inline-block;font-family:var(--ts-font-family-base);--ts-checkbox-size:1.25rem;--ts-checkbox-color:var(--ts-color-interactive-primary);--ts-checkbox-radius:4px;--ts-checkbox-border-color:var(--ts-color-border-default)}.checkbox__base{display:inline-flex;align-items:center;gap:var(--ts-spacing-2);cursor:pointer;outline:none}.checkbox__base:focus-visible .checkbox__control{box-shadow:var(--ts-focus-ring)}.checkbox__control{display:inline-flex;align-items:center;justify-content:center;width:var(--ts-checkbox-size);height:var(--ts-checkbox-size);box-sizing:border-box;border:2px solid var(--ts-checkbox-border-color);border-radius:var(--ts-checkbox-radius);background-color:var(--ts-color-bg-elevated);transition:background-color var(--ts-transition-fast), border-color var(--ts-transition-fast), box-shadow var(--ts-transition-fast);flex-shrink:0}:host([checked]) .checkbox__control,:host([indeterminate]) .checkbox__control{background-color:var(--ts-checkbox-color);border-color:var(--ts-checkbox-color);color:var(--ts-color-text-on-primary)}.checkbox__base:hover:not([aria-disabled="true"]) .checkbox__control{border-color:var(--ts-color-primary-500)}:host([error]) .checkbox__control{border-color:var(--ts-color-danger-500)}:host([disabled]) .checkbox__base{opacity:0.5;cursor:not-allowed;pointer-events:none}.checkbox__icon{width:100%;height:100%;transform:scale(1);transition:transform var(--ts-transition-fast)}:host([checked]) .checkbox__icon{animation:none}:host([size="sm"]){--ts-checkbox-size:1rem}:host([size="sm"]) .checkbox__label{font-size:var(--ts-font-size-sm)}:host([size="md"]) .checkbox__label{font-size:var(--ts-font-size-md)}:host([size="lg"]){--ts-checkbox-size:1.5rem}:host([size="lg"]) .checkbox__label{font-size:var(--ts-font-size-lg)}.checkbox__label{color:var(--ts-color-text-primary);line-height:var(--ts-line-height-normal);user-select:none}`;const a=class{constructor(s){e(this,s);this.tsChange=o(this,"tsChange")}get hostEl(){return s(this)}inputId=r("ts-checkbox");checked=false;indeterminate=false;disabled=false;value="";name;label;size="md";error=false;tsChange;async toggle(){if(!this.disabled){this.indeterminate=false;this.checked=!this.checked;this.tsChange.emit({checked:this.checked,value:this.value})}}handleClick=()=>{this.toggle()};handleKeydown=e=>{if(e.key===" "){e.preventDefault();this.toggle()}};render(){const e=this.indeterminate?"mixed":this.checked?"true":"false";return t(c,{key:"9fc5e264e8b2491f0634f414ba8b1124e791bd32",class:{"ts-checkbox":true,[`ts-checkbox--${this.size}`]:true,"ts-checkbox--checked":this.checked,"ts-checkbox--indeterminate":this.indeterminate,"ts-checkbox--disabled":this.disabled,"ts-checkbox--error":this.error}},t("div",{key:"9c5a2c9c28f00effd46caf892e0e91f8ca845bed",class:"checkbox__base",part:"base",role:"checkbox","aria-checked":e,"aria-disabled":this.disabled?"true":undefined,tabindex:this.disabled?-1:0,onClick:this.handleClick,onKeyDown:this.handleKeydown},t("div",{key:"5be7cabec162a5fdbbef10e63b649c81fbd97322",class:"checkbox__control",part:"control"},this.checked&&!this.indeterminate&&t("svg",{key:"e4e4a9e04b8c7bfbbdfd60de8d570823984c7eb4",class:"checkbox__icon",viewBox:"0 0 16 16",fill:"none","aria-hidden":"true"},t("path",{key:"3f0e5fbb1fea51bf6b5b79a3909bc43cdee6d0f1",d:"M3.5 8L6.5 11L12.5 5",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"})),this.indeterminate&&t("svg",{key:"521bbf1e40987c631ccdafda69e7d8f683b7b994",class:"checkbox__icon",viewBox:"0 0 16 16",fill:"none","aria-hidden":"true"},t("path",{key:"d0d14bb0d20ef58997d4c567530f1c369d904b37",d:"M4 8H12",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round"}))),t("label",{key:"a939e2911282e988f110fd20c9c0f2fc71a892bd",class:"checkbox__label",part:"label",id:`${this.inputId}-label`},this.label?this.label:t("slot",null))))}};a.style=i();export{a as ts_checkbox};
|
|
2
|
+
//# sourceMappingURL=p-50efadf3.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["checkboxCss","TsCheckbox","inputId","generateId","checked","indeterminate","disabled","value","name","label","size","error","tsChange","toggle","this","emit","handleClick","handleKeydown","event","key","preventDefault","render","ariaChecked","h","Host","class","part","role","undefined","tabindex","onClick","onKeyDown","viewBox","fill","d","stroke","id"],"sources":["src/components/checkbox/checkbox.css?tag=ts-checkbox&encapsulation=shadow","src/components/checkbox/checkbox.tsx"],"sourcesContent":["/* ==========================================================================\n ts-checkbox — Shadow DOM Scoped Styles\n\n Component tokens (Tier 3):\n --ts-checkbox-size Checkbox box size\n --ts-checkbox-color Checked background color\n --ts-checkbox-radius Border radius\n --ts-checkbox-border-color Default border color\n ========================================================================== */\n\n:host {\n display: inline-block;\n font-family: var(--ts-font-family-base);\n\n --ts-checkbox-size: 1.25rem;\n --ts-checkbox-color: var(--ts-color-interactive-primary);\n --ts-checkbox-radius: 4px;\n --ts-checkbox-border-color: var(--ts-color-border-default);\n}\n\n/* ---- Base container ---- */\n.checkbox__base {\n display: inline-flex;\n align-items: center;\n gap: var(--ts-spacing-2);\n cursor: pointer;\n outline: none;\n}\n\n.checkbox__base:focus-visible .checkbox__control {\n box-shadow: var(--ts-focus-ring);\n}\n\n/* ---- Control box ---- */\n.checkbox__control {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--ts-checkbox-size);\n height: var(--ts-checkbox-size);\n box-sizing: border-box;\n border: 2px solid var(--ts-checkbox-border-color);\n border-radius: var(--ts-checkbox-radius);\n background-color: var(--ts-color-bg-elevated);\n transition:\n background-color var(--ts-transition-fast),\n border-color var(--ts-transition-fast),\n box-shadow var(--ts-transition-fast);\n flex-shrink: 0;\n}\n\n/* ---- Checked & indeterminate states ---- */\n:host([checked]) .checkbox__control,\n:host([indeterminate]) .checkbox__control {\n background-color: var(--ts-checkbox-color);\n border-color: var(--ts-checkbox-color);\n color: var(--ts-color-text-on-primary);\n}\n\n/* ---- Hover ---- */\n.checkbox__base:hover:not([aria-disabled=\"true\"]) .checkbox__control {\n border-color: var(--ts-color-primary-500);\n}\n\n/* ---- Error state ---- */\n:host([error]) .checkbox__control {\n border-color: var(--ts-color-danger-500);\n}\n\n/* ---- Disabled state ---- */\n:host([disabled]) .checkbox__base {\n opacity: 0.5;\n cursor: not-allowed;\n pointer-events: none;\n}\n\n/* ---- Checkmark icon ---- */\n.checkbox__icon {\n width: 100%;\n height: 100%;\n transform: scale(1);\n transition: transform var(--ts-transition-fast);\n}\n\n:host([checked]) .checkbox__icon {\n animation: none;\n}\n\n/* ---- Sizes ---- */\n:host([size=\"sm\"]) {\n --ts-checkbox-size: 1rem;\n}\n\n:host([size=\"sm\"]) .checkbox__label {\n font-size: var(--ts-font-size-sm);\n}\n\n:host([size=\"md\"]) .checkbox__label {\n font-size: var(--ts-font-size-md);\n}\n\n:host([size=\"lg\"]) {\n --ts-checkbox-size: 1.5rem;\n}\n\n:host([size=\"lg\"]) .checkbox__label {\n font-size: var(--ts-font-size-lg);\n}\n\n/* ---- Label ---- */\n.checkbox__label {\n color: var(--ts-color-text-primary);\n line-height: var(--ts-line-height-normal);\n user-select: none;\n}\n","import { Component, Prop, Event, h, Host, Element, Method } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\nimport type { TsCheckboxChangeEventDetail } from '../../types';\nimport { generateId } from '../../utils/aria';\n\n/**\n * @slot - Default slot for the checkbox label.\n *\n * @part base - The checkbox container.\n * @part control - The visual checkbox box.\n * @part label - The label wrapper.\n */\n@Component({\n tag: 'ts-checkbox',\n styleUrl: 'checkbox.css',\n shadow: true,\n})\nexport class TsCheckbox {\n @Element() hostEl!: HTMLElement;\n\n private inputId = generateId('ts-checkbox');\n\n /** Whether the checkbox is checked. */\n @Prop({ mutable: true, reflect: true }) checked = false;\n\n /** Whether the checkbox is in an indeterminate state. */\n @Prop({ mutable: true, reflect: true }) indeterminate = false;\n\n /** Renders the checkbox as disabled. */\n @Prop({ reflect: true }) disabled = false;\n\n /** The value associated with this checkbox. */\n @Prop() value = '';\n\n /** Name attribute for form submission. */\n @Prop() name?: string;\n\n /** Label text. If omitted, use the default slot. */\n @Prop() label?: string;\n\n /** The checkbox size. */\n @Prop({ reflect: true }) size: 'sm' | 'md' | 'lg' = 'md';\n\n /** Renders the checkbox in an error state. */\n @Prop({ reflect: true }) error = false;\n\n /** Emitted when the checked state changes. */\n @Event({ eventName: 'tsChange' }) tsChange!: EventEmitter<TsCheckboxChangeEventDetail>;\n\n /** Programmatically toggle the checkbox. */\n @Method()\n async toggle(): Promise<void> {\n if (!this.disabled) {\n this.indeterminate = false;\n this.checked = !this.checked;\n this.tsChange.emit({ checked: this.checked, value: this.value });\n }\n }\n\n private handleClick = (): void => {\n this.toggle();\n };\n\n private handleKeydown = (event: KeyboardEvent): void => {\n if (event.key === ' ') {\n event.preventDefault();\n this.toggle();\n }\n };\n\n // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n render() {\n const ariaChecked = this.indeterminate ? 'mixed' : this.checked ? 'true' : 'false';\n\n return (\n <Host\n class={{\n 'ts-checkbox': true,\n [`ts-checkbox--${this.size}`]: true,\n 'ts-checkbox--checked': this.checked,\n 'ts-checkbox--indeterminate': this.indeterminate,\n 'ts-checkbox--disabled': this.disabled,\n 'ts-checkbox--error': this.error,\n }}\n >\n <div\n class=\"checkbox__base\"\n part=\"base\"\n role=\"checkbox\"\n aria-checked={ariaChecked}\n aria-disabled={this.disabled ? 'true' : undefined}\n tabindex={this.disabled ? -1 : 0}\n onClick={this.handleClick}\n onKeyDown={this.handleKeydown}\n >\n <div class=\"checkbox__control\" part=\"control\">\n {this.checked && !this.indeterminate && (\n <svg class=\"checkbox__icon\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\">\n <path\n d=\"M3.5 8L6.5 11L12.5 5\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n )}\n {this.indeterminate && (\n <svg class=\"checkbox__icon\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\">\n <path\n d=\"M4 8H12\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n />\n </svg>\n )}\n </div>\n\n <label class=\"checkbox__label\" part=\"label\" id={`${this.inputId}-label`}>\n {this.label ? this.label : <slot />}\n </label>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"oGAAA,MAAMA,EAAc,IAAM,02D,MCiBbC,EAAU,M,sFAGbC,QAAUC,EAAW,eAGWC,QAAU,MAGVC,cAAgB,MAG/BC,SAAW,MAG5BC,MAAQ,GAGRC,KAGAC,MAGiBC,KAA2B,KAG3BC,MAAQ,MAGCC,SAIlC,YAAMC,GACJ,IAAKC,KAAKR,SAAU,CAClBQ,KAAKT,cAAgB,MACrBS,KAAKV,SAAWU,KAAKV,QACrBU,KAAKF,SAASG,KAAK,CAAEX,QAASU,KAAKV,QAASG,MAAOO,KAAKP,O,EAIpDS,YAAc,KACpBF,KAAKD,QAAQ,EAGPI,cAAiBC,IACvB,GAAIA,EAAMC,MAAQ,IAAK,CACrBD,EAAME,iBACNN,KAAKD,Q,GAKT,MAAAQ,GACE,MAAMC,EAAcR,KAAKT,cAAgB,QAAUS,KAAKV,QAAU,OAAS,QAE3E,OACEmB,EAACC,EAAI,CAAAL,IAAA,2CACHM,MAAO,CACL,cAAe,KACf,CAAC,gBAAgBX,KAAKJ,QAAS,KAC/B,uBAAwBI,KAAKV,QAC7B,6BAA8BU,KAAKT,cACnC,wBAAyBS,KAAKR,SAC9B,qBAAsBQ,KAAKH,QAG7BY,EAAA,OAAAJ,IAAA,2CACEM,MAAM,iBACNC,KAAK,OACLC,KAAK,WAAU,eACDL,EAAW,gBACVR,KAAKR,SAAW,OAASsB,UACxCC,SAAUf,KAAKR,UAAW,EAAK,EAC/BwB,QAAShB,KAAKE,YACde,UAAWjB,KAAKG,eAEhBM,EAAA,OAAAJ,IAAA,2CAAKM,MAAM,oBAAoBC,KAAK,WACjCZ,KAAKV,UAAYU,KAAKT,eACrBkB,EAAA,OAAAJ,IAAA,2CAAKM,MAAM,iBAAiBO,QAAQ,YAAYC,KAAK,OAAM,cAAa,QACtEV,EAAA,QAAAJ,IAAA,2CACEe,EAAE,uBACFC,OAAO,eAAc,eACR,IAAG,iBACD,QAAO,kBACN,WAIrBrB,KAAKT,eACJkB,EAAA,OAAAJ,IAAA,2CAAKM,MAAM,iBAAiBO,QAAQ,YAAYC,KAAK,OAAM,cAAa,QACtEV,EAAA,QAAAJ,IAAA,2CACEe,EAAE,UACFC,OAAO,eAAc,eACR,IAAG,iBACD,YAMvBZ,EAAA,SAAAJ,IAAA,2CAAOM,MAAM,kBAAkBC,KAAK,QAAQU,GAAI,GAAGtB,KAAKZ,iBACrDY,KAAKL,MAAQK,KAAKL,MAAQc,EAAA,e","ignoreList":[]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as e,c as t,a as s,h as i,H as n}from"./p-V8-ENixA.js";import{g as a}from"./p-lpqZSiIf.js";const r=()=>`:host{display:inline-block;position:relative;font-family:var(--ts-font-family-base);--ts-menu-bg:var(--ts-color-bg-elevated);--ts-menu-radius:var(--ts-shape-overlay);--ts-menu-shadow:var(--ts-shadow-lg)}.menu__trigger{display:inline-flex}.menu__panel{position:absolute;z-index:var(--ts-z-tooltip);display:none;flex-direction:column;min-inline-size:10rem;padding-block:var(--ts-spacing-1);background-color:var(--ts-menu-bg);border-radius:var(--ts-menu-radius);box-shadow:var(--ts-menu-shadow);border:1px solid var(--ts-color-border-default);overflow-y:auto;max-block-size:20rem;animation:ts-menu-fade-in 150ms ease-out}.menu__panel--open{display:flex}.menu__panel--bottom-start{inset-block-start:100%;inset-inline-start:0;margin-block-start:var(--ts-spacing-1)}.menu__panel--bottom-end{inset-block-start:100%;inset-inline-end:0;margin-block-start:var(--ts-spacing-1)}.menu__panel--top-start{inset-block-end:100%;inset-inline-start:0;margin-block-end:var(--ts-spacing-1)}.menu__panel--top-end{inset-block-end:100%;inset-inline-end:0;margin-block-end:var(--ts-spacing-1)}@keyframes ts-menu-fade-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}`;const o=class{constructor(s){e(this,s);this.tsOpen=t(this,"tsOpen");this.tsClose=t(this,"tsClose")}get hostEl(){return s(this)}menuId=a("ts-menu");triggerEl;open=false;trigger="click";placement="bottom-start";tsOpen;tsClose;focusedIndex=-1;handleOpenChange(e){if(e){this.tsOpen.emit();requestAnimationFrame((()=>{this.focusFirstItem()}))}else{this.focusedIndex=-1;this.tsClose.emit()}}handleDocumentClick(e){if(this.open&&!this.hostEl.contains(e.target)){this.open=false}}handleItemSelect(){this.open=false;this.triggerEl?.focus()}handleKeydown(e){if(!this.open)return;const t=this.getMenuItems();if(t.length===0)return;switch(e.key){case"ArrowDown":{e.preventDefault();this.focusedIndex=(this.focusedIndex+1)%t.length;this.focusItem(t[this.focusedIndex]);break}case"ArrowUp":{e.preventDefault();this.focusedIndex=this.focusedIndex<=0?t.length-1:this.focusedIndex-1;this.focusItem(t[this.focusedIndex]);break}case"Home":{e.preventDefault();this.focusedIndex=0;this.focusItem(t[0]);break}case"End":{e.preventDefault();this.focusedIndex=t.length-1;this.focusItem(t[this.focusedIndex]);break}case"Escape":{e.preventDefault();this.open=false;this.triggerEl?.focus();break}case"Tab":{this.open=false;break}}}getMenuItems(){return Array.from(this.hostEl.querySelectorAll("ts-menu-item:not([disabled])"))}focusItem(e){const t=e;if(typeof t.setFocus==="function"){t.setFocus()}else{e.focus()}}focusFirstItem(){const e=this.getMenuItems();if(e.length>0){this.focusedIndex=0;this.focusItem(e[0])}}handleTriggerClick=()=>{if(this.trigger==="click"){this.open=!this.open}};handleTriggerKeydown=e=>{if(e.key==="ArrowDown"||e.key==="Enter"||e.key===" "){e.preventDefault();this.open=true}};handleMouseEnter=()=>{if(this.trigger==="hover"){this.open=true}};handleMouseLeave=()=>{if(this.trigger==="hover"){this.open=false}};render(){return i(n,{key:"779dbf74095a42f69a4e9c044423cb04ec19cd41",class:{"ts-menu":true,"ts-menu--open":this.open},onMouseEnter:this.handleMouseEnter,onMouseLeave:this.handleMouseLeave},i("div",{key:"6116720d4806a302576a65a88877f70c7be6d6a0",class:"menu__trigger",ref:e=>this.triggerEl=e,onClick:this.handleTriggerClick,onKeyDown:this.handleTriggerKeydown,"aria-haspopup":"true","aria-expanded":this.open?"true":"false","aria-controls":this.menuId},i("slot",{key:"e0dbd29ac0e2eec75047ff0c6c48c1f8d1df0b22",name:"trigger"})),i("div",{key:"8f137fbe94c1793bd670cc473c062b7e60e60f8b",class:{menu__panel:true,"menu__panel--open":this.open,[`menu__panel--${this.placement}`]:true},part:"panel",id:this.menuId,role:"menu","aria-hidden":!this.open?"true":undefined},i("slot",{key:"4d9d31af73853300a50781b82b31764f6d6529b5"})))}static get watchers(){return{open:[{handleOpenChange:0}]}}};o.style=r();export{o as ts_menu};
|
|
2
|
+
//# sourceMappingURL=p-53846d59.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["menuCss","TsMenu","menuId","generateId","triggerEl","open","trigger","placement","tsOpen","tsClose","focusedIndex","handleOpenChange","isOpen","this","emit","requestAnimationFrame","focusFirstItem","handleDocumentClick","event","hostEl","contains","target","handleItemSelect","focus","handleKeydown","items","getMenuItems","length","key","preventDefault","focusItem","Array","from","querySelectorAll","el","item","setFocus","handleTriggerClick","handleTriggerKeydown","handleMouseEnter","handleMouseLeave","render","h","Host","class","onMouseEnter","onMouseLeave","ref","onClick","onKeyDown","name","menu__panel","part","id","role","undefined"],"sources":["src/components/menu/menu.css?tag=ts-menu&encapsulation=shadow","src/components/menu/menu.tsx"],"sourcesContent":["/* ==========================================================================\n ts-menu — Shadow DOM Scoped Styles\n\n Component tokens (Tier 3):\n --ts-menu-bg Menu panel background\n --ts-menu-radius Menu panel border radius\n --ts-menu-shadow Menu panel elevation shadow\n ========================================================================== */\n\n:host {\n display: inline-block;\n position: relative;\n font-family: var(--ts-font-family-base);\n\n --ts-menu-bg: var(--ts-color-bg-elevated);\n --ts-menu-radius: var(--ts-shape-overlay);\n --ts-menu-shadow: var(--ts-shadow-lg);\n}\n\n/* ---- Trigger ---- */\n.menu__trigger {\n display: inline-flex;\n}\n\n/* ---- Panel ---- */\n.menu__panel {\n position: absolute;\n z-index: var(--ts-z-tooltip);\n display: none;\n flex-direction: column;\n min-inline-size: 10rem;\n padding-block: var(--ts-spacing-1);\n background-color: var(--ts-menu-bg);\n border-radius: var(--ts-menu-radius);\n box-shadow: var(--ts-menu-shadow);\n border: 1px solid var(--ts-color-border-default);\n overflow-y: auto;\n max-block-size: 20rem;\n animation: ts-menu-fade-in 150ms ease-out;\n}\n\n.menu__panel--open {\n display: flex;\n}\n\n/* ---- Placement ---- */\n.menu__panel--bottom-start {\n inset-block-start: 100%;\n inset-inline-start: 0;\n margin-block-start: var(--ts-spacing-1);\n}\n\n.menu__panel--bottom-end {\n inset-block-start: 100%;\n inset-inline-end: 0;\n margin-block-start: var(--ts-spacing-1);\n}\n\n.menu__panel--top-start {\n inset-block-end: 100%;\n inset-inline-start: 0;\n margin-block-end: var(--ts-spacing-1);\n}\n\n.menu__panel--top-end {\n inset-block-end: 100%;\n inset-inline-end: 0;\n margin-block-end: var(--ts-spacing-1);\n}\n\n/* ---- Animation ---- */\n@keyframes ts-menu-fade-in {\n from {\n opacity: 0;\n transform: translateY(4px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n","import { Component, Prop, State, Event, h, Host, Element, Watch, Listen } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\nimport { generateId } from '../../utils/aria';\n\nexport type TsMenuPlacement = 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';\n\nexport type TsMenuTrigger = 'click' | 'hover';\n\n/**\n * @slot trigger - The element that opens the menu (e.g., a button).\n * @slot - Default slot for ts-menu-item children.\n *\n * @part panel - The dropdown panel container.\n */\n@Component({\n tag: 'ts-menu',\n styleUrl: 'menu.css',\n shadow: true,\n})\nexport class TsMenu {\n @Element() hostEl!: HTMLElement;\n\n private menuId = generateId('ts-menu');\n private triggerEl?: HTMLElement;\n\n /** Whether the menu dropdown is open. */\n @Prop({ mutable: true, reflect: true }) open = false;\n\n /** How the menu is triggered. */\n @Prop({ reflect: true }) trigger: TsMenuTrigger = 'click';\n\n /** Placement of the dropdown relative to the trigger. */\n @Prop({ reflect: true }) placement: TsMenuPlacement = 'bottom-start';\n\n /** Emitted when the menu opens. */\n @Event({ eventName: 'tsOpen' }) tsOpen!: EventEmitter<void>;\n\n /** Emitted when the menu closes. */\n @Event({ eventName: 'tsClose' }) tsClose!: EventEmitter<void>;\n\n /** Tracks the currently focused item index for keyboard navigation. */\n @State() focusedIndex = -1;\n\n @Watch('open')\n handleOpenChange(isOpen: boolean): void {\n if (isOpen) {\n this.tsOpen.emit();\n requestAnimationFrame(() => {\n this.focusFirstItem();\n });\n } else {\n this.focusedIndex = -1;\n this.tsClose.emit();\n }\n }\n\n @Listen('click', { target: 'document' })\n handleDocumentClick(event: MouseEvent): void {\n if (this.open && !this.hostEl.contains(event.target as Node)) {\n this.open = false;\n }\n }\n\n @Listen('tsSelect')\n handleItemSelect(): void {\n this.open = false;\n this.triggerEl?.focus();\n }\n\n @Listen('keydown')\n handleKeydown(event: KeyboardEvent): void {\n if (!this.open) return;\n\n const items = this.getMenuItems();\n if (items.length === 0) return;\n\n switch (event.key) {\n case 'ArrowDown': {\n event.preventDefault();\n this.focusedIndex = (this.focusedIndex + 1) % items.length;\n this.focusItem(items[this.focusedIndex]);\n break;\n }\n case 'ArrowUp': {\n event.preventDefault();\n this.focusedIndex = this.focusedIndex <= 0 ? items.length - 1 : this.focusedIndex - 1;\n this.focusItem(items[this.focusedIndex]);\n break;\n }\n case 'Home': {\n event.preventDefault();\n this.focusedIndex = 0;\n this.focusItem(items[0]);\n break;\n }\n case 'End': {\n event.preventDefault();\n this.focusedIndex = items.length - 1;\n this.focusItem(items[this.focusedIndex]);\n break;\n }\n case 'Escape': {\n event.preventDefault();\n this.open = false;\n this.triggerEl?.focus();\n break;\n }\n case 'Tab': {\n this.open = false;\n break;\n }\n }\n }\n\n private getMenuItems(): HTMLElement[] {\n return Array.from(this.hostEl.querySelectorAll<HTMLElement>('ts-menu-item:not([disabled])'));\n }\n\n private focusItem(el: HTMLElement): void {\n const item = el as HTMLElement & { setFocus?: () => Promise<void> };\n if (typeof item.setFocus === 'function') {\n item.setFocus();\n } else {\n el.focus();\n }\n }\n\n private focusFirstItem(): void {\n const items = this.getMenuItems();\n if (items.length > 0) {\n this.focusedIndex = 0;\n this.focusItem(items[0]);\n }\n }\n\n private handleTriggerClick = (): void => {\n if (this.trigger === 'click') {\n this.open = !this.open;\n }\n };\n\n private handleTriggerKeydown = (event: KeyboardEvent): void => {\n if (event.key === 'ArrowDown' || event.key === 'Enter' || event.key === ' ') {\n event.preventDefault();\n this.open = true;\n }\n };\n\n private handleMouseEnter = (): void => {\n if (this.trigger === 'hover') {\n this.open = true;\n }\n };\n\n private handleMouseLeave = (): void => {\n if (this.trigger === 'hover') {\n this.open = false;\n }\n };\n\n // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n render() {\n return (\n <Host\n class={{\n 'ts-menu': true,\n 'ts-menu--open': this.open,\n }}\n onMouseEnter={this.handleMouseEnter}\n onMouseLeave={this.handleMouseLeave}\n >\n <div\n class=\"menu__trigger\"\n ref={(el) => (this.triggerEl = el)}\n onClick={this.handleTriggerClick}\n onKeyDown={this.handleTriggerKeydown}\n aria-haspopup=\"true\"\n aria-expanded={this.open ? 'true' : 'false'}\n aria-controls={this.menuId}\n >\n <slot name=\"trigger\" />\n </div>\n\n <div\n class={{\n 'menu__panel': true,\n 'menu__panel--open': this.open,\n [`menu__panel--${this.placement}`]: true,\n }}\n part=\"panel\"\n id={this.menuId}\n role=\"menu\"\n aria-hidden={!this.open ? 'true' : undefined}\n >\n <slot />\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"oGAAA,MAAMA,EAAU,IAAM,ypC,MCmBTC,EAAM,M,iHAGTC,OAASC,EAAW,WACpBC,UAGgCC,KAAO,MAGtBC,QAAyB,QAGzBC,UAA6B,eAGtBC,OAGCC,QAGxBC,cAAe,EAGxB,gBAAAC,CAAiBC,GACf,GAAIA,EAAQ,CACVC,KAAKL,OAAOM,OACZC,uBAAsB,KACpBF,KAAKG,gBAAgB,G,KAElB,CACLH,KAAKH,cAAe,EACpBG,KAAKJ,QAAQK,M,EAKjB,mBAAAG,CAAoBC,GAClB,GAAIL,KAAKR,OAASQ,KAAKM,OAAOC,SAASF,EAAMG,QAAiB,CAC5DR,KAAKR,KAAO,K,EAKhB,gBAAAiB,GACET,KAAKR,KAAO,MACZQ,KAAKT,WAAWmB,O,CAIlB,aAAAC,CAAcN,GACZ,IAAKL,KAAKR,KAAM,OAEhB,MAAMoB,EAAQZ,KAAKa,eACnB,GAAID,EAAME,SAAW,EAAG,OAExB,OAAQT,EAAMU,KACZ,IAAK,YAAa,CAChBV,EAAMW,iBACNhB,KAAKH,cAAgBG,KAAKH,aAAe,GAAKe,EAAME,OACpDd,KAAKiB,UAAUL,EAAMZ,KAAKH,eAC1B,K,CAEF,IAAK,UAAW,CACdQ,EAAMW,iBACNhB,KAAKH,aAAeG,KAAKH,cAAgB,EAAIe,EAAME,OAAS,EAAId,KAAKH,aAAe,EACpFG,KAAKiB,UAAUL,EAAMZ,KAAKH,eAC1B,K,CAEF,IAAK,OAAQ,CACXQ,EAAMW,iBACNhB,KAAKH,aAAe,EACpBG,KAAKiB,UAAUL,EAAM,IACrB,K,CAEF,IAAK,MAAO,CACVP,EAAMW,iBACNhB,KAAKH,aAAee,EAAME,OAAS,EACnCd,KAAKiB,UAAUL,EAAMZ,KAAKH,eAC1B,K,CAEF,IAAK,SAAU,CACbQ,EAAMW,iBACNhB,KAAKR,KAAO,MACZQ,KAAKT,WAAWmB,QAChB,K,CAEF,IAAK,MAAO,CACVV,KAAKR,KAAO,MACZ,K,GAKE,YAAAqB,GACN,OAAOK,MAAMC,KAAKnB,KAAKM,OAAOc,iBAA8B,gC,CAGtD,SAAAH,CAAUI,GAChB,MAAMC,EAAOD,EACb,UAAWC,EAAKC,WAAa,WAAY,CACvCD,EAAKC,U,KACA,CACLF,EAAGX,O,EAIC,cAAAP,GACN,MAAMS,EAAQZ,KAAKa,eACnB,GAAID,EAAME,OAAS,EAAG,CACpBd,KAAKH,aAAe,EACpBG,KAAKiB,UAAUL,EAAM,G,EAIjBY,mBAAqB,KAC3B,GAAIxB,KAAKP,UAAY,QAAS,CAC5BO,KAAKR,MAAQQ,KAAKR,I,GAIdiC,qBAAwBpB,IAC9B,GAAIA,EAAMU,MAAQ,aAAeV,EAAMU,MAAQ,SAAWV,EAAMU,MAAQ,IAAK,CAC3EV,EAAMW,iBACNhB,KAAKR,KAAO,I,GAIRkC,iBAAmB,KACzB,GAAI1B,KAAKP,UAAY,QAAS,CAC5BO,KAAKR,KAAO,I,GAIRmC,iBAAmB,KACzB,GAAI3B,KAAKP,UAAY,QAAS,CAC5BO,KAAKR,KAAO,K,GAKhB,MAAAoC,GACE,OACEC,EAACC,EAAI,CAAAf,IAAA,2CACHgB,MAAO,CACL,UAAW,KACX,gBAAiB/B,KAAKR,MAExBwC,aAAchC,KAAK0B,iBACnBO,aAAcjC,KAAK2B,kBAEnBE,EAAA,OAAAd,IAAA,2CACEgB,MAAM,gBACNG,IAAMb,GAAQrB,KAAKT,UAAY8B,EAC/Bc,QAASnC,KAAKwB,mBACdY,UAAWpC,KAAKyB,qBAAoB,gBACtB,OAAM,gBACLzB,KAAKR,KAAO,OAAS,QAAO,gBAC5BQ,KAAKX,QAEpBwC,EAAA,QAAAd,IAAA,2CAAMsB,KAAK,aAGbR,EAAA,OAAAd,IAAA,2CACEgB,MAAO,CACLO,YAAe,KACf,oBAAqBtC,KAAKR,KAC1B,CAAC,gBAAgBQ,KAAKN,aAAc,MAEtC6C,KAAK,QACLC,GAAIxC,KAAKX,OACToD,KAAK,OAAM,eACGzC,KAAKR,KAAO,OAASkD,WAEnCb,EAAA,QAAAd,IAAA,8C","ignoreList":[]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as e,c as a,a as t,h as r,H as i}from"./p-V8-ENixA.js";const o=()=>`:host{display:block;font-family:var(--ts-font-family-base);--ts-file-upload-border-color:var(--ts-color-border-default);--ts-file-upload-bg:var(--ts-color-bg-surface);--ts-file-upload-radius:var(--ts-radius-md)}.file-upload__dropzone{display:flex;align-items:center;justify-content:center;min-block-size:120px;padding:var(--ts-spacing-6);border:2px dashed var(--ts-file-upload-border-color);border-radius:var(--ts-file-upload-radius);background-color:var(--ts-file-upload-bg);cursor:pointer;outline:none;transition:border-color var(--ts-transition-fast), background-color var(--ts-transition-fast), box-shadow var(--ts-transition-fast)}.file-upload__dropzone:hover:not([aria-disabled="true"]){border-color:var(--ts-color-interactive-primary);background-color:var(--ts-color-interactive-primary-subtle, rgba(59, 130, 246, 0.05))}.file-upload__dropzone:focus-visible{box-shadow:var(--ts-focus-ring);border-color:var(--ts-color-interactive-primary)}.file-upload__dropzone--drag-over{border-color:var(--ts-color-interactive-primary);background-color:var(--ts-color-interactive-primary-subtle, rgba(59, 130, 246, 0.1));border-style:solid}:host([disabled]) .file-upload__dropzone{opacity:0.5;cursor:not-allowed;pointer-events:none}.file-upload__label{display:flex;flex-direction:column;align-items:center;gap:var(--ts-spacing-2);font-size:var(--ts-font-size-sm);color:var(--ts-color-text-secondary);text-align:center;pointer-events:none}.file-upload__input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}`;const s=class{constructor(t){e(this,t);this.tsChange=a(this,"tsChange")}get hostEl(){return t(this)}fileInputEl;accept;multiple=false;maxSize;disabled=false;label="Drop files here or click to upload";name;tsChange;isDragOver=false;handleClick=()=>{if(this.disabled)return;this.fileInputEl?.click()};handleKeydown=e=>{if(this.disabled)return;if(e.key==="Enter"||e.key===" "){e.preventDefault();this.fileInputEl?.click()}};handleFileChange=e=>{const a=e.target;if(a.files){const e=this.validateFiles(Array.from(a.files));if(e.length>0){this.tsChange.emit({files:e})}}if(this.fileInputEl){this.fileInputEl.value=""}};handleDragOver=e=>{e.preventDefault();e.stopPropagation();if(!this.disabled){this.isDragOver=true}};handleDragLeave=e=>{e.preventDefault();e.stopPropagation();this.isDragOver=false};handleDrop=e=>{e.preventDefault();e.stopPropagation();this.isDragOver=false;if(this.disabled)return;const a=e.dataTransfer?.files;if(a){const e=this.validateFiles(Array.from(a));if(e.length>0){this.tsChange.emit({files:e})}}};validateFiles(e){let a=e;if(this.accept){const e=this.accept.split(",").map((e=>e.trim().toLowerCase()));a=a.filter((a=>{const t="."+a.name.split(".").pop()?.toLowerCase();const r=a.type.toLowerCase();return e.some((e=>e===t||e===r||e.endsWith("/*")&&r.startsWith(e.replace("/*","/"))))}))}if(this.maxSize){a=a.filter((e=>e.size<=this.maxSize))}if(!this.multiple&&a.length>1){a=[a[0]]}return a}render(){return r(i,{key:"8f52d515a31a1def7761e0a5e9537de64a6c5658",class:{"ts-file-upload":true,"ts-file-upload--drag-over":this.isDragOver,"ts-file-upload--disabled":this.disabled}},r("div",{key:"297acea91c7ad20eab02c5266f197ca0f7fe9c49",class:{"file-upload__dropzone":true,"file-upload__dropzone--drag-over":this.isDragOver},part:"dropzone",role:"button",tabindex:this.disabled?-1:0,"aria-disabled":this.disabled?"true":undefined,"aria-label":this.label,onClick:this.handleClick,onKeyDown:this.handleKeydown,onDragOver:this.handleDragOver,onDragLeave:this.handleDragLeave,onDrop:this.handleDrop},r("span",{key:"ad3d90ac4f39ae38ab6d484c1f4841a0e70e7269",class:"file-upload__label",part:"label"},r("slot",{key:"04a7a2073171d48adb57339477f51d28f0379612"},this.label)),r("input",{key:"93051be2348247796ffd11d02723b400c969054e",ref:e=>this.fileInputEl=e,class:"file-upload__input",part:"input",type:"file",name:this.name,accept:this.accept,multiple:this.multiple,disabled:this.disabled,tabindex:-1,"aria-hidden":"true",onChange:this.handleFileChange})))}};s.style=o();export{s as ts_file_upload};
|
|
2
|
+
//# sourceMappingURL=p-56f2b070.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["fileUploadCss","TsFileUpload","fileInputEl","accept","multiple","maxSize","disabled","label","name","tsChange","isDragOver","handleClick","this","click","handleKeydown","event","key","preventDefault","handleFileChange","input","target","files","validateFiles","Array","from","length","emit","value","handleDragOver","stopPropagation","handleDragLeave","handleDrop","droppedFiles","dataTransfer","validFiles","acceptedTypes","split","map","t","trim","toLowerCase","filter","file","ext","pop","mime","type","some","accepted","endsWith","startsWith","replace","size","render","h","Host","class","part","role","tabindex","undefined","onClick","onKeyDown","onDragOver","onDragLeave","onDrop","ref","el","onChange"],"sources":["src/components/file-upload/file-upload.css?tag=ts-file-upload&encapsulation=shadow","src/components/file-upload/file-upload.tsx"],"sourcesContent":["/* ==========================================================================\n ts-file-upload — Shadow DOM Scoped Styles\n\n Component tokens (Tier 3):\n --ts-file-upload-border-color Dropzone border color\n --ts-file-upload-bg Dropzone background\n --ts-file-upload-radius Dropzone border radius\n ========================================================================== */\n\n:host {\n display: block;\n font-family: var(--ts-font-family-base);\n\n --ts-file-upload-border-color: var(--ts-color-border-default);\n --ts-file-upload-bg: var(--ts-color-bg-surface);\n --ts-file-upload-radius: var(--ts-radius-md);\n}\n\n/* ---- Dropzone ---- */\n.file-upload__dropzone {\n display: flex;\n align-items: center;\n justify-content: center;\n min-block-size: 120px;\n padding: var(--ts-spacing-6);\n border: 2px dashed var(--ts-file-upload-border-color);\n border-radius: var(--ts-file-upload-radius);\n background-color: var(--ts-file-upload-bg);\n cursor: pointer;\n outline: none;\n transition:\n border-color var(--ts-transition-fast),\n background-color var(--ts-transition-fast),\n box-shadow var(--ts-transition-fast);\n}\n\n.file-upload__dropzone:hover:not([aria-disabled=\"true\"]) {\n border-color: var(--ts-color-interactive-primary);\n background-color: var(--ts-color-interactive-primary-subtle, rgba(59, 130, 246, 0.05));\n}\n\n.file-upload__dropzone:focus-visible {\n box-shadow: var(--ts-focus-ring);\n border-color: var(--ts-color-interactive-primary);\n}\n\n/* ---- Drag over state ---- */\n.file-upload__dropzone--drag-over {\n border-color: var(--ts-color-interactive-primary);\n background-color: var(--ts-color-interactive-primary-subtle, rgba(59, 130, 246, 0.1));\n border-style: solid;\n}\n\n/* ---- Disabled ---- */\n:host([disabled]) .file-upload__dropzone {\n opacity: 0.5;\n cursor: not-allowed;\n pointer-events: none;\n}\n\n/* ---- Label ---- */\n.file-upload__label {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: var(--ts-spacing-2);\n font-size: var(--ts-font-size-sm);\n color: var(--ts-color-text-secondary);\n text-align: center;\n pointer-events: none;\n}\n\n/* ---- Hidden file input ---- */\n.file-upload__input {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n}\n","import { Component, Prop, State, Event, h, Host, Element } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\n\n/**\n * @slot - Default slot for custom dropzone content.\n *\n * @part dropzone - The dropzone area.\n * @part label - The label text.\n * @part input - The hidden file input.\n */\n@Component({\n tag: 'ts-file-upload',\n styleUrl: 'file-upload.css',\n shadow: true,\n})\nexport class TsFileUpload {\n @Element() hostEl!: HTMLElement;\n\n private fileInputEl?: HTMLInputElement;\n\n /** Accepted file types (e.g. '.jpg,.png'). */\n @Prop() accept?: string;\n\n /** Whether multiple files can be selected. */\n @Prop() multiple = false;\n\n /** Maximum file size in bytes. */\n @Prop() maxSize?: number;\n\n /** Whether the file upload is disabled. */\n @Prop({ reflect: true }) disabled = false;\n\n /** Label text for the dropzone. */\n @Prop() label = 'Drop files here or click to upload';\n\n /** Form field name. */\n @Prop() name?: string;\n\n /** Emitted when files are selected or dropped. */\n @Event({ eventName: 'tsChange' }) tsChange!: EventEmitter<{ files: File[] }>;\n\n /** Whether a drag operation is over the dropzone. */\n @State() isDragOver = false;\n\n private handleClick = (): void => {\n if (this.disabled) return;\n this.fileInputEl?.click();\n };\n\n private handleKeydown = (event: KeyboardEvent): void => {\n if (this.disabled) return;\n if (event.key === 'Enter' || event.key === ' ') {\n event.preventDefault();\n this.fileInputEl?.click();\n }\n };\n\n private handleFileChange = (event: Event): void => {\n const input = event.target as HTMLInputElement;\n if (input.files) {\n const files = this.validateFiles(Array.from(input.files));\n if (files.length > 0) {\n this.tsChange.emit({ files });\n }\n }\n // Reset input so the same file can be selected again\n if (this.fileInputEl) {\n this.fileInputEl.value = '';\n }\n };\n\n private handleDragOver = (event: DragEvent): void => {\n event.preventDefault();\n event.stopPropagation();\n if (!this.disabled) {\n this.isDragOver = true;\n }\n };\n\n private handleDragLeave = (event: DragEvent): void => {\n event.preventDefault();\n event.stopPropagation();\n this.isDragOver = false;\n };\n\n private handleDrop = (event: DragEvent): void => {\n event.preventDefault();\n event.stopPropagation();\n this.isDragOver = false;\n\n if (this.disabled) return;\n\n const droppedFiles = event.dataTransfer?.files;\n if (droppedFiles) {\n const files = this.validateFiles(Array.from(droppedFiles));\n if (files.length > 0) {\n this.tsChange.emit({ files });\n }\n }\n };\n\n private validateFiles(files: File[]): File[] {\n let validFiles = files;\n\n // Filter by accepted types\n if (this.accept) {\n const acceptedTypes = this.accept.split(',').map((t) => t.trim().toLowerCase());\n validFiles = validFiles.filter((file) => {\n const ext = '.' + file.name.split('.').pop()?.toLowerCase();\n const mime = file.type.toLowerCase();\n return acceptedTypes.some(\n (accepted) =>\n accepted === ext ||\n accepted === mime ||\n (accepted.endsWith('/*') && mime.startsWith(accepted.replace('/*', '/'))),\n );\n });\n }\n\n // Filter by max size\n if (this.maxSize) {\n validFiles = validFiles.filter((file) => file.size <= this.maxSize!);\n }\n\n // If not multiple, take only the first\n if (!this.multiple && validFiles.length > 1) {\n validFiles = [validFiles[0]];\n }\n\n return validFiles;\n }\n\n // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n render() {\n return (\n <Host\n class={{\n 'ts-file-upload': true,\n 'ts-file-upload--drag-over': this.isDragOver,\n 'ts-file-upload--disabled': this.disabled,\n }}\n >\n <div\n class={{\n 'file-upload__dropzone': true,\n 'file-upload__dropzone--drag-over': this.isDragOver,\n }}\n part=\"dropzone\"\n role=\"button\"\n tabindex={this.disabled ? -1 : 0}\n aria-disabled={this.disabled ? 'true' : undefined}\n aria-label={this.label}\n onClick={this.handleClick}\n onKeyDown={this.handleKeydown}\n onDragOver={this.handleDragOver}\n onDragLeave={this.handleDragLeave}\n onDrop={this.handleDrop}\n >\n <span class=\"file-upload__label\" part=\"label\">\n <slot>{this.label}</slot>\n </span>\n\n <input\n ref={(el) => (this.fileInputEl = el)}\n class=\"file-upload__input\"\n part=\"input\"\n type=\"file\"\n name={this.name}\n accept={this.accept}\n multiple={this.multiple}\n disabled={this.disabled}\n tabindex={-1}\n aria-hidden=\"true\"\n onChange={this.handleFileChange}\n />\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"gEAAA,MAAMA,EAAgB,IAAM,qjD,MCefC,EAAY,M,sFAGfC,YAGAC,OAGAC,SAAW,MAGXC,QAGiBC,SAAW,MAG5BC,MAAQ,qCAGRC,KAG0BC,SAGzBC,WAAa,MAEdC,YAAc,KACpB,GAAIC,KAAKN,SAAU,OACnBM,KAAKV,aAAaW,OAAO,EAGnBC,cAAiBC,IACvB,GAAIH,KAAKN,SAAU,OACnB,GAAIS,EAAMC,MAAQ,SAAWD,EAAMC,MAAQ,IAAK,CAC9CD,EAAME,iBACNL,KAAKV,aAAaW,O,GAIdK,iBAAoBH,IAC1B,MAAMI,EAAQJ,EAAMK,OACpB,GAAID,EAAME,MAAO,CACf,MAAMA,EAAQT,KAAKU,cAAcC,MAAMC,KAAKL,EAAME,QAClD,GAAIA,EAAMI,OAAS,EAAG,CACpBb,KAAKH,SAASiB,KAAK,CAAEL,S,EAIzB,GAAIT,KAAKV,YAAa,CACpBU,KAAKV,YAAYyB,MAAQ,E,GAIrBC,eAAkBb,IACxBA,EAAME,iBACNF,EAAMc,kBACN,IAAKjB,KAAKN,SAAU,CAClBM,KAAKF,WAAa,I,GAIdoB,gBAAmBf,IACzBA,EAAME,iBACNF,EAAMc,kBACNjB,KAAKF,WAAa,KAAK,EAGjBqB,WAAchB,IACpBA,EAAME,iBACNF,EAAMc,kBACNjB,KAAKF,WAAa,MAElB,GAAIE,KAAKN,SAAU,OAEnB,MAAM0B,EAAejB,EAAMkB,cAAcZ,MACzC,GAAIW,EAAc,CAChB,MAAMX,EAAQT,KAAKU,cAAcC,MAAMC,KAAKQ,IAC5C,GAAIX,EAAMI,OAAS,EAAG,CACpBb,KAAKH,SAASiB,KAAK,CAAEL,S,IAKnB,aAAAC,CAAcD,GACpB,IAAIa,EAAab,EAGjB,GAAIT,KAAKT,OAAQ,CACf,MAAMgC,EAAgBvB,KAAKT,OAAOiC,MAAM,KAAKC,KAAKC,GAAMA,EAAEC,OAAOC,gBACjEN,EAAaA,EAAWO,QAAQC,IAC9B,MAAMC,EAAM,IAAMD,EAAKlC,KAAK4B,MAAM,KAAKQ,OAAOJ,cAC9C,MAAMK,EAAOH,EAAKI,KAAKN,cACvB,OAAOL,EAAcY,MAClBC,GACCA,IAAaL,GACbK,IAAaH,GACZG,EAASC,SAAS,OAASJ,EAAKK,WAAWF,EAASG,QAAQ,KAAM,OACtE,G,CAKL,GAAIvC,KAAKP,QAAS,CAChB6B,EAAaA,EAAWO,QAAQC,GAASA,EAAKU,MAAQxC,KAAKP,S,CAI7D,IAAKO,KAAKR,UAAY8B,EAAWT,OAAS,EAAG,CAC3CS,EAAa,CAACA,EAAW,G,CAG3B,OAAOA,C,CAIT,MAAAmB,GACE,OACEC,EAACC,EAAI,CAAAvC,IAAA,2CACHwC,MAAO,CACL,iBAAkB,KAClB,4BAA6B5C,KAAKF,WAClC,2BAA4BE,KAAKN,WAGnCgD,EAAA,OAAAtC,IAAA,2CACEwC,MAAO,CACL,wBAAyB,KACzB,mCAAoC5C,KAAKF,YAE3C+C,KAAK,WACLC,KAAK,SACLC,SAAU/C,KAAKN,UAAW,EAAK,EAAC,gBACjBM,KAAKN,SAAW,OAASsD,UAAS,aACrChD,KAAKL,MACjBsD,QAASjD,KAAKD,YACdmD,UAAWlD,KAAKE,cAChBiD,WAAYnD,KAAKgB,eACjBoC,YAAapD,KAAKkB,gBAClBmC,OAAQrD,KAAKmB,YAEbuB,EAAA,QAAAtC,IAAA,2CAAMwC,MAAM,qBAAqBC,KAAK,SACpCH,EAAA,QAAAtC,IAAA,4CAAOJ,KAAKL,QAGd+C,EAAA,SAAAtC,IAAA,2CACEkD,IAAMC,GAAQvD,KAAKV,YAAciE,EACjCX,MAAM,qBACNC,KAAK,QACLX,KAAK,OACLtC,KAAMI,KAAKJ,KACXL,OAAQS,KAAKT,OACbC,SAAUQ,KAAKR,SACfE,SAAUM,KAAKN,SACfqD,UAAU,EAAE,cACA,OACZS,SAAUxD,KAAKM,oB","ignoreList":[]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as t,h as s,H as i}from"./p-V8-ENixA.js";const a=()=>`:host{display:grid;width:100%;box-sizing:border-box}`;const r=class{constructor(s){t(this,s)}columns="auto";gap="4";minColumnWidth="280px";align="stretch";render(){const t=this.columns==="auto"?`repeat(auto-fill, minmax(${this.minColumnWidth}, 1fr))`:`repeat(${this.columns}, 1fr)`;const a={gridTemplateColumns:t,gap:`var(--ts-spacing-${this.gap})`,alignItems:this.align};return s(i,{key:"f2d1238a19d2235c676d1fd08f045b18dc3b40fa",style:a},s("slot",{key:"3c454fc9910bcf8960b4a2833f82e91eb6d5be03"}))}};r.style=a();export{r as ts_grid};
|
|
2
|
+
//# sourceMappingURL=p-6760f922.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["gridCss","TsGrid","columns","gap","minColumnWidth","align","render","gridTemplateColumns","this","style","alignItems","h","Host","key"],"sources":["src/components/grid/grid.css?tag=ts-grid&encapsulation=shadow","src/components/grid/grid.tsx"],"sourcesContent":["/* ==========================================================================\n ts-grid — Shadow DOM Scoped Styles\n\n CSS Grid layout component with responsive auto-fill columns.\n ========================================================================== */\n\n:host {\n display: grid;\n width: 100%;\n box-sizing: border-box;\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\n/**\n * @slot - Default slot for grid items.\n *\n * @part base - The grid container.\n */\n@Component({\n tag: 'ts-grid',\n styleUrl: 'grid.css',\n shadow: true,\n})\nexport class TsGrid {\n /** Number of columns or 'auto' for responsive auto-fill. */\n @Prop({ reflect: true }) columns: string = 'auto';\n\n /** Spacing token number for gap between items. */\n @Prop({ reflect: true }) gap: string = '4';\n\n /** Minimum column width when columns is 'auto'. */\n @Prop({ reflect: true }) minColumnWidth: string = '280px';\n\n /** Vertical alignment of grid items. */\n @Prop({ reflect: true }) align: 'start' | 'center' | 'end' | 'stretch' = 'stretch';\n\n // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n render() {\n const gridTemplateColumns =\n this.columns === 'auto'\n ? `repeat(auto-fill, minmax(${this.minColumnWidth}, 1fr))`\n : `repeat(${this.columns}, 1fr)`;\n\n const style = {\n gridTemplateColumns,\n gap: `var(--ts-spacing-${this.gap})`,\n alignItems: this.align,\n };\n\n return (\n <Host style={style}>\n <slot />\n </Host>\n );\n }\n}\n"],"mappings":"kDAAA,MAAMA,EAAU,IAAM,uD,MCYTC,EAAM,M,yBAEQC,QAAkB,OAGlBC,IAAc,IAGdC,eAAyB,QAGzBC,MAAgD,UAGzE,MAAAC,GACE,MAAMC,EACJC,KAAKN,UAAY,OACb,4BAA4BM,KAAKJ,wBACjC,UAAUI,KAAKN,gBAErB,MAAMO,EAAQ,CACZF,sBACAJ,IAAK,oBAAoBK,KAAKL,OAC9BO,WAAYF,KAAKH,OAGnB,OACEM,EAACC,EAAI,CAAAC,IAAA,2CAACJ,MAAOA,GACXE,EAAA,QAAAE,IAAA,6C","ignoreList":[]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as t,c as e,a as s,h as o,H as a}from"./p-V8-ENixA.js";import{g as i}from"./p-lpqZSiIf.js";const r=()=>`:host{display:inline-block;font-family:var(--ts-font-family-base);--ts-toggle-track-bg:var(--ts-color-neutral-200);--ts-toggle-track-bg-checked:var(--ts-color-primary-600);--ts-toggle-thumb-bg:var(--ts-color-bg-elevated);--ts-toggle-focus-ring:var(--ts-focus-ring)}.toggle__base{display:inline-flex;align-items:center;gap:var(--ts-spacing-2);cursor:pointer;outline:none}.toggle__base:focus-visible .toggle__track{box-shadow:var(--ts-toggle-focus-ring)}:host(.ts-toggle--disabled) .toggle__base{opacity:0.5;cursor:not-allowed}.toggle__track{position:relative;background-color:var(--ts-toggle-track-bg);border-radius:var(--ts-radius-full);border:2px solid var(--ts-color-border-default);box-shadow:none;transition:background-color var(--ts-transition-fast), border-color var(--ts-transition-fast), box-shadow var(--ts-transition-fast);flex-shrink:0}:host(.ts-toggle--checked) .toggle__track{background-color:var(--ts-toggle-track-bg-checked);border-color:var(--ts-toggle-track-bg-checked);box-shadow:none}.toggle__thumb{position:absolute;top:50%;transform:translateY(-50%) scale(1);background-color:var(--ts-toggle-thumb-bg);border-radius:var(--ts-radius-full);box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.06);transition:inset-inline-start var(--ts-transition-fast), transform var(--ts-transition-fast), box-shadow var(--ts-transition-fast)}:host(.ts-toggle--checked) .toggle__thumb{box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.06)}:host([size="sm"]) .toggle__track{width:32px;height:18px}:host([size="sm"]) .toggle__thumb{width:14px;height:14px;inset-inline-start:2px}:host(.ts-toggle--checked[size="sm"]) .toggle__thumb{inset-inline-start:16px}:host([size="md"]) .toggle__track{width:40px;height:22px}:host([size="md"]) .toggle__thumb{width:18px;height:18px;inset-inline-start:2px}:host(.ts-toggle--checked[size="md"]) .toggle__thumb{inset-inline-start:20px}:host([size="lg"]) .toggle__track{width:50px;height:28px}:host([size="lg"]) .toggle__thumb{width:24px;height:24px;inset-inline-start:2px}:host(.ts-toggle--checked[size="lg"]) .toggle__thumb{inset-inline-start:24px}.toggle__label{font-size:var(--ts-font-size-sm);color:var(--ts-color-text-secondary);cursor:inherit;user-select:none}:host([size="lg"]) .toggle__label{font-size:var(--ts-font-size-md)}`;const l=class{constructor(s){t(this,s);this.tsChange=e(this,"tsChange")}get hostEl(){return s(this)}inputId=i("ts-toggle");checked=false;size="md";disabled=false;name;value;tsChange;async toggle(){if(!this.disabled){this.checked=!this.checked;this.tsChange.emit({checked:this.checked})}}handleClick=()=>{this.toggle()};handleKeydown=t=>{if(t.key===" "||t.key==="Enter"){t.preventDefault();this.toggle()}};render(){return o(a,{key:"37d1c8601478c83ad4be39acedfd4bb84ca9024c",class:{"ts-toggle":true,[`ts-toggle--${this.size}`]:true,"ts-toggle--checked":this.checked,"ts-toggle--disabled":this.disabled}},o("div",{key:"cc01df27c45a311485395e58d06b57cbaddace77",class:"toggle__base",part:"base",role:"switch","aria-checked":this.checked?"true":"false","aria-disabled":this.disabled?"true":undefined,tabindex:this.disabled?-1:0,onClick:this.handleClick,onKeyDown:this.handleKeydown},o("div",{key:"4e275c1ff9564119b2f3e7e8e2407f285fc0c27a",class:"toggle__track",part:"track"},o("div",{key:"e4213d681cef167a7e9db7ef001f83d12c618df4",class:"toggle__thumb",part:"thumb"})),o("label",{key:"dcd922600a2af35a59ef59822f40a86db0dd94d8",class:"toggle__label",part:"label",id:`${this.inputId}-label`},o("slot",{key:"7f15cc140376af0b8b9337a0517a9559dbf7d5b8"}))))}};l.style=r();export{l as ts_toggle};
|
|
2
|
+
//# sourceMappingURL=p-69bb11ed.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["toggleCss","TsToggle","inputId","generateId","checked","size","disabled","name","value","tsChange","toggle","this","emit","handleClick","handleKeydown","event","key","preventDefault","render","h","Host","class","part","role","undefined","tabindex","onClick","onKeyDown","id"],"sources":["src/components/toggle/toggle.css?tag=ts-toggle&encapsulation=shadow","src/components/toggle/toggle.tsx"],"sourcesContent":["/* ==========================================================================\n ts-toggle — Shadow DOM Scoped Styles\n\n Component tokens (Tier 3):\n --ts-toggle-track-bg Unchecked track background\n --ts-toggle-track-bg-checked Checked track background\n --ts-toggle-thumb-bg Thumb background\n --ts-toggle-focus-ring Focus ring box-shadow\n ========================================================================== */\n\n:host {\n display: inline-block;\n font-family: var(--ts-font-family-base);\n\n --ts-toggle-track-bg: var(--ts-color-neutral-200);\n --ts-toggle-track-bg-checked: var(--ts-color-primary-600);\n --ts-toggle-thumb-bg: var(--ts-color-bg-elevated);\n --ts-toggle-focus-ring: var(--ts-focus-ring);\n}\n\n.toggle__base {\n display: inline-flex;\n align-items: center;\n gap: var(--ts-spacing-2);\n cursor: pointer;\n outline: none;\n}\n\n.toggle__base:focus-visible .toggle__track {\n box-shadow: var(--ts-toggle-focus-ring);\n}\n\n:host(.ts-toggle--disabled) .toggle__base {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n/* ---- Track (M3 — outlined when unchecked) ---- */\n.toggle__track {\n position: relative;\n background-color: var(--ts-toggle-track-bg);\n border-radius: var(--ts-radius-full);\n border: 2px solid var(--ts-color-border-default);\n box-shadow: none;\n transition:\n background-color var(--ts-transition-fast),\n border-color var(--ts-transition-fast),\n box-shadow var(--ts-transition-fast);\n flex-shrink: 0;\n}\n\n:host(.ts-toggle--checked) .toggle__track {\n background-color: var(--ts-toggle-track-bg-checked);\n border-color: var(--ts-toggle-track-bg-checked);\n box-shadow: none;\n}\n\n/* ---- Thumb ---- */\n.toggle__thumb {\n position: absolute;\n top: 50%;\n transform: translateY(-50%) scale(1);\n background-color: var(--ts-toggle-thumb-bg);\n border-radius: var(--ts-radius-full);\n box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.06);\n transition:\n inset-inline-start var(--ts-transition-fast),\n transform var(--ts-transition-fast),\n box-shadow var(--ts-transition-fast);\n}\n\n:host(.ts-toggle--checked) .toggle__thumb {\n box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.06);\n}\n\n/* ---- Sizes ---- */\n:host([size=\"sm\"]) .toggle__track { width: 32px; height: 18px; }\n:host([size=\"sm\"]) .toggle__thumb { width: 14px; height: 14px; inset-inline-start: 2px; }\n:host(.ts-toggle--checked[size=\"sm\"]) .toggle__thumb { inset-inline-start: 16px; }\n\n:host([size=\"md\"]) .toggle__track { width: 40px; height: 22px; }\n:host([size=\"md\"]) .toggle__thumb { width: 18px; height: 18px; inset-inline-start: 2px; }\n:host(.ts-toggle--checked[size=\"md\"]) .toggle__thumb { inset-inline-start: 20px; }\n\n:host([size=\"lg\"]) .toggle__track { width: 50px; height: 28px; }\n:host([size=\"lg\"]) .toggle__thumb { width: 24px; height: 24px; inset-inline-start: 2px; }\n:host(.ts-toggle--checked[size=\"lg\"]) .toggle__thumb { inset-inline-start: 24px; }\n\n/* ---- Label ---- */\n.toggle__label {\n font-size: var(--ts-font-size-sm);\n color: var(--ts-color-text-secondary);\n cursor: inherit;\n user-select: none;\n}\n\n:host([size=\"lg\"]) .toggle__label {\n font-size: var(--ts-font-size-md);\n}\n","import { Component, Prop, Event, h, Host, Element, Method } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\nimport type { TsSize, TsToggleEventDetail } from '../../types';\nimport { generateId } from '../../utils/aria';\n\n/**\n * @slot - Default slot for the toggle label.\n *\n * @part base - The toggle container.\n * @part track - The toggle track.\n * @part thumb - The toggle thumb/knob.\n * @part label - The label wrapper.\n */\n@Component({\n tag: 'ts-toggle',\n styleUrl: 'toggle.css',\n shadow: true,\n})\nexport class TsToggle {\n @Element() hostEl!: HTMLElement;\n\n private inputId = generateId('ts-toggle');\n\n /** Whether the toggle is checked. */\n @Prop({ mutable: true, reflect: true }) checked = false;\n\n /** The toggle's size. */\n @Prop({ reflect: true }) size: TsSize = 'md';\n\n /** Renders the toggle as disabled. */\n @Prop({ reflect: true }) disabled = false;\n\n /** Name for form submission. */\n @Prop() name?: string;\n\n /** Value for form submission. */\n @Prop() value?: string;\n\n /** Emitted when the toggle state changes. */\n @Event({ eventName: 'tsChange' }) tsChange!: EventEmitter<TsToggleEventDetail>;\n\n /** Programmatically toggle the checked state. */\n @Method()\n async toggle(): Promise<void> {\n if (!this.disabled) {\n this.checked = !this.checked;\n this.tsChange.emit({ checked: this.checked });\n }\n }\n\n private handleClick = (): void => {\n this.toggle();\n };\n\n private handleKeydown = (event: KeyboardEvent): void => {\n if (event.key === ' ' || event.key === 'Enter') {\n event.preventDefault();\n this.toggle();\n }\n };\n\n // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n render() {\n return (\n <Host\n class={{\n 'ts-toggle': true,\n [`ts-toggle--${this.size}`]: true,\n 'ts-toggle--checked': this.checked,\n 'ts-toggle--disabled': this.disabled,\n }}\n >\n <div\n class=\"toggle__base\"\n part=\"base\"\n role=\"switch\"\n aria-checked={this.checked ? 'true' : 'false'}\n aria-disabled={this.disabled ? 'true' : undefined}\n tabindex={this.disabled ? -1 : 0}\n onClick={this.handleClick}\n onKeyDown={this.handleKeydown}\n >\n <div class=\"toggle__track\" part=\"track\">\n <div class=\"toggle__thumb\" part=\"thumb\" />\n </div>\n\n <label class=\"toggle__label\" part=\"label\" id={`${this.inputId}-label`}>\n <slot />\n </label>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"oGAAA,MAAMA,EAAY,IAAM,utE,MCkBXC,EAAQ,M,sFAGXC,QAAUC,EAAW,aAGWC,QAAU,MAGzBC,KAAe,KAGfC,SAAW,MAG5BC,KAGAC,MAG0BC,SAIlC,YAAMC,GACJ,IAAKC,KAAKL,SAAU,CAClBK,KAAKP,SAAWO,KAAKP,QACrBO,KAAKF,SAASG,KAAK,CAAER,QAASO,KAAKP,S,EAI/BS,YAAc,KACpBF,KAAKD,QAAQ,EAGPI,cAAiBC,IACvB,GAAIA,EAAMC,MAAQ,KAAOD,EAAMC,MAAQ,QAAS,CAC9CD,EAAME,iBACNN,KAAKD,Q,GAKT,MAAAQ,GACE,OACEC,EAACC,EAAI,CAAAJ,IAAA,2CACHK,MAAO,CACL,YAAa,KACb,CAAC,cAAcV,KAAKN,QAAS,KAC7B,qBAAsBM,KAAKP,QAC3B,sBAAuBO,KAAKL,WAG9Ba,EAAA,OAAAH,IAAA,2CACEK,MAAM,eACNC,KAAK,OACLC,KAAK,SAAQ,eACCZ,KAAKP,QAAU,OAAS,QAAO,gBAC9BO,KAAKL,SAAW,OAASkB,UACxCC,SAAUd,KAAKL,UAAW,EAAK,EAC/BoB,QAASf,KAAKE,YACdc,UAAWhB,KAAKG,eAEhBK,EAAA,OAAAH,IAAA,2CAAKK,MAAM,gBAAgBC,KAAK,SAC9BH,EAAA,OAAAH,IAAA,2CAAKK,MAAM,gBAAgBC,KAAK,WAGlCH,EAAA,SAAAH,IAAA,2CAAOK,MAAM,gBAAgBC,KAAK,QAAQM,GAAI,GAAGjB,KAAKT,iBACpDiB,EAAA,QAAAH,IAAA,+C","ignoreList":[]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as i,h as e,H as t}from"./p-V8-ENixA.js";const r=()=>`: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 s=class{constructor(e){i(this,e)}orientation="horizontal";variant="solid";label;render(){const i=!!this.label;return e(t,{key:"91e1c22fd7f266364aeac8cf9ea6429a5462375d",class:{"ts-divider":true,[`ts-divider--${this.orientation}`]:true,[`ts-divider--${this.variant}`]:true,"ts-divider--has-label":i},role:"separator","aria-orientation":this.orientation},i&&this.orientation==="horizontal"?e("div",{class:"divider__base",part:"base"},e("span",{class:"divider__line divider__line--start"}),e("span",{class:"divider__label",part:"label"},this.label),e("span",{class:"divider__line divider__line--end"})):e("div",{class:"divider__base",part:"base"},e("span",{class:"divider__line"})))}};s.style=r();export{s as ts_divider};
|
|
2
|
+
//# sourceMappingURL=p-6d35a60c.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["dividerCss","TsDivider","orientation","variant","label","render","hasLabel","this","h","Host","key","class","role","part"],"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"],"mappings":"kDAAA,MAAMA,EAAa,IAAM,grD,MCWZC,EAAS,M,yBAEKC,YAAyC,aAGzCC,QAAyC,QAG1DC,MAGR,MAAAC,GACE,MAAMC,IAAaC,KAAKH,MAExB,OACEI,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,CACL,aAAc,KACd,CAAC,eAAeJ,KAAKL,eAAgB,KACrC,CAAC,eAAeK,KAAKJ,WAAY,KACjC,wBAAyBG,GAE3BM,KAAK,YAAW,mBACEL,KAAKL,aAEtBI,GAAYC,KAAKL,cAAgB,aAChCM,EAAA,OAAKG,MAAM,gBAAgBE,KAAK,QAC9BL,EAAA,QAAMG,MAAM,uCACZH,EAAA,QAAMG,MAAM,iBAAiBE,KAAK,SAASN,KAAKH,OAChDI,EAAA,QAAMG,MAAM,sCAGdH,EAAA,OAAKG,MAAM,gBAAgBE,KAAK,QAC9BL,EAAA,QAAMG,MAAM,mB","ignoreList":[]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as e,a,h as t,H as s}from"./p-V8-ENixA.js";const d=()=>`:host{display:block}.tab-panel{outline:none}`;const c=class{constructor(a){e(this,a)}get hostEl(){return a(this)}tab;value;disabled=false;icon;render(){return t(s,{key:"dec8c9d7d1f32e6f5aef0d4bfbde8d62dd91d865"},t("div",{key:"14de5c9f6ff8c8d56733fc53088da96064e6bdc6",class:"tab-panel",part:"panel",role:"tabpanel"},t("slot",{key:"9a715c140d76ef238952f5b399cb1443af399432"})))}};c.style=d();export{c as ts_tab_panel};
|
|
2
|
+
//# sourceMappingURL=p-6ec285ad.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["tabPanelCss","TsTabPanel","tab","value","disabled","icon","render","h","Host","key","class","part","role"],"sources":["src/components/tabs/tab-panel.css?tag=ts-tab-panel&encapsulation=shadow","src/components/tabs/tab-panel.tsx"],"sourcesContent":["/* ==========================================================================\n ts-tab-panel — Shadow DOM Scoped Styles\n ========================================================================== */\n\n:host {\n display: block;\n}\n\n.tab-panel {\n outline: none;\n}\n","import { Component, Prop, h, Host, Element } from '@stencil/core';\n\n/**\n * @slot - Default slot for panel content.\n *\n * @part panel - The panel container element.\n */\n@Component({\n tag: 'ts-tab-panel',\n styleUrl: 'tab-panel.css',\n shadow: true,\n})\nexport class TsTabPanel {\n @Element() hostEl!: HTMLElement;\n\n /** The label text displayed in the tab button. */\n @Prop() tab!: string;\n\n /** Unique identifier for this tab panel. */\n @Prop({ reflect: true }) value!: string;\n\n /** Whether this tab is disabled. */\n @Prop({ reflect: true }) disabled = false;\n\n /** Optional icon name displayed before the tab label. */\n @Prop() icon?: string;\n\n // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n render() {\n return (\n <Host>\n <div class=\"tab-panel\" part=\"panel\" role=\"tabpanel\">\n <slot />\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"oDAAA,MAAMA,EAAc,IAAM,+C,MCYbC,EAAU,M,qDAIbC,IAGiBC,MAGAC,SAAW,MAG5BC,KAGR,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,YAAYC,KAAK,QAAQC,KAAK,YACvCL,EAAA,QAAAE,IAAA,8C","ignoreList":[]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as s,h as t,H as i}from"./p-V8-ENixA.js";const a=()=>`:host{display:block}:host([axis="horizontal"]){display:inline-block}`;const o=class{constructor(t){s(this,t)}size="4";axis="vertical";render(){const s=this.axis==="horizontal"?{width:`var(--ts-spacing-${this.size})`,height:"100%"}:{height:`var(--ts-spacing-${this.size})`,width:"100%"};return t(i,{key:"967b57ba1224c79cd338795ec7fb5fe4008f4f5f",style:s})}};o.style=a();export{o as ts_spacer};
|
|
2
|
+
//# sourceMappingURL=p-708d4eb5.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["spacerCss","TsSpacer","size","axis","render","style","this","width","height","h","Host","key"],"sources":["src/components/spacer/spacer.css?tag=ts-spacer&encapsulation=shadow","src/components/spacer/spacer.tsx"],"sourcesContent":["/* ==========================================================================\n ts-spacer — Shadow DOM Scoped Styles\n\n An explicit spacing element for vertical or horizontal space.\n ========================================================================== */\n\n:host {\n display: block;\n}\n\n:host([axis=\"horizontal\"]) {\n display: inline-block;\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\n/**\n * An explicit spacing element for adding vertical or horizontal space.\n */\n@Component({\n tag: 'ts-spacer',\n styleUrl: 'spacer.css',\n shadow: true,\n})\nexport class TsSpacer {\n /** Spacing token number controlling the size of the spacer. */\n @Prop({ reflect: true }) size: string = '4';\n\n /** The axis along which the spacer adds space. */\n @Prop({ reflect: true }) axis: 'vertical' | 'horizontal' = 'vertical';\n\n // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n render() {\n const style =\n this.axis === 'horizontal'\n ? { width: `var(--ts-spacing-${this.size})`, height: '100%' }\n : { height: `var(--ts-spacing-${this.size})`, width: '100%' };\n\n return <Host style={style}></Host>;\n }\n}\n"],"mappings":"kDAAA,MAAMA,EAAY,IAAM,uE,MCUXC,EAAQ,M,yBAEMC,KAAe,IAGfC,KAAkC,WAG3D,MAAAC,GACE,MAAMC,EACJC,KAAKH,OAAS,aACV,CAAEI,MAAO,oBAAoBD,KAAKJ,QAASM,OAAQ,QACnD,CAAEA,OAAQ,oBAAoBF,KAAKJ,QAASK,MAAO,QAEzD,OAAOE,EAACC,EAAI,CAAAC,IAAA,2CAACN,MAAOA,G","ignoreList":[]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as e,c as t,a as i,h as s,H as r}from"./p-V8-ENixA.js";const a=()=>`:host{display:block;font-family:var(--ts-font-family-base);outline:none}.tree-item__base{display:flex;align-items:center;gap:var(--ts-spacing-1);min-block-size:var(--ts-tree-item-height, 2rem);padding-inline:var(--ts-spacing-2);padding-block:var(--ts-spacing-1);border-radius:var(--ts-radius-sm);cursor:pointer;user-select:none;font-size:var(--ts-font-size-sm);line-height:var(--ts-line-height-tight);color:var(--ts-color-text-primary);transition:background-color var(--ts-transition-fast), color var(--ts-transition-fast)}.tree-item__base:hover{background-color:var(--ts-color-bg-subtle)}:host(:focus-visible) .tree-item__base{box-shadow:var(--ts-focus-ring)}:host([selected]) .tree-item__base{background-color:var(--ts-tree-active-bg, var(--ts-color-interactive-primary-subtle));color:var(--ts-color-interactive-primary)}:host([disabled]) .tree-item__base{opacity:0.5;cursor:not-allowed;pointer-events:none}.tree-item__chevron{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;inline-size:1.25rem;block-size:1.25rem;transition:transform var(--ts-transition-fast)}.tree-item__chevron svg{inline-size:0.875rem;block-size:0.875rem}:host(.ts-tree-item--expanded) .tree-item__chevron{transform:rotate(90deg)}.tree-item__chevron--hidden{visibility:hidden}.tree-item__icon{display:inline-flex;align-items:center;flex-shrink:0}.tree-item__label{flex:1;min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tree-item__children{padding-inline-start:var(--ts-tree-indent, var(--ts-spacing-5))}.tree-item__children--collapsed{display:none}`;const n=class{constructor(i){e(this,i);this.tsToggle=t(this,"tsToggle");this.tsSelect=t(this,"tsSelect")}get hostEl(){return i(this)}label;expanded=false;selected=false;disabled=false;icon;hasChildren=false;tsToggle;tsSelect;onExpandedChange(){this.tsToggle.emit({expanded:this.expanded})}componentDidLoad(){this.checkForChildren()}checkForChildren(){const e=this.hostEl.shadowRoot?.querySelector("slot:not([name])");if(e){const t=e.assignedElements();this.hasChildren=t.some((e=>e.tagName==="TS-TREE-ITEM"))}}handleToggle=e=>{e.stopPropagation();if(this.disabled)return;this.expanded=!this.expanded};handleSelect=()=>{if(this.disabled)return;const e=this.hostEl.closest("ts-tree");if(e&&e.selectable){this.selected=!this.selected;this.tsSelect.emit({selected:this.selected,value:this.label||""})}};handleKeyDown=e=>{if(e.key==="Enter"||e.key===" "){e.preventDefault();this.handleSelect()}};handleSlotChange=()=>{this.checkForChildren()};render(){return s(r,{key:"7e7f3dd3e7507cc1d3d6d44f5bbb99b3946c7c09",class:{"ts-tree-item":true,"ts-tree-item--expanded":this.expanded,"ts-tree-item--selected":this.selected,"ts-tree-item--disabled":this.disabled,"ts-tree-item--has-children":this.hasChildren},role:"treeitem",tabindex:this.disabled?-1:0,"aria-expanded":this.hasChildren?String(this.expanded):undefined,"aria-selected":String(this.selected),"aria-disabled":this.disabled?"true":undefined,onKeyDown:this.handleKeyDown},s("div",{key:"d0d625e277d4ea706e97f03b4adb6a48780915e0",class:"tree-item__base",part:"base",onClick:this.handleSelect},s("span",{key:"1b44e6fb9de206da990d62a67802e2b68be312f2",class:{"tree-item__chevron":true,"tree-item__chevron--hidden":!this.hasChildren},part:"chevron",onClick:this.handleToggle,"aria-hidden":"true"},s("svg",{key:"1c106e6ee2ad03442df967a8c17a0037b082ea07",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"},s("polyline",{key:"6ba0bd24fc2ddd001dbdf9a4bb7469759e00087d",points:"9 18 15 12 9 6"}))),this.icon&&s("span",{key:"012d65b356f0ebce7fce3b88a8697588264b6e51",class:"tree-item__icon",part:"icon","aria-hidden":"true"},s("ts-icon",{key:"2f6573c6315eca6e8317a45e96586aa51998a4b6",name:this.icon,size:"sm"})),s("span",{key:"c3ffb683523d7517a1a97b033e8262660438c667",class:"tree-item__label",part:"label"},s("slot",{key:"4ff256ccc6c0869785e272667146761066381386",name:"label"},this.label))),s("div",{key:"236fd4afd3078b5fb8e19b7cf89f12a7fd97f683",class:{"tree-item__children":true,"tree-item__children--collapsed":!this.expanded},role:"group"},s("slot",{key:"23beab65b06e3006a007d4f0965726a7297470a0",onSlotchange:this.handleSlotChange})))}static get watchers(){return{expanded:[{onExpandedChange:0}]}}};n.style=a();export{n as ts_tree_item};
|
|
2
|
+
//# sourceMappingURL=p-79ff8ceb.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["treeItemCss","TsTreeItem","label","expanded","selected","disabled","icon","hasChildren","tsToggle","tsSelect","onExpandedChange","this","emit","componentDidLoad","checkForChildren","slot","hostEl","shadowRoot","querySelector","assigned","assignedElements","some","el","tagName","handleToggle","event","stopPropagation","handleSelect","tree","closest","selectable","value","handleKeyDown","key","preventDefault","handleSlotChange","render","h","Host","class","role","tabindex","String","undefined","onKeyDown","part","onClick","viewBox","fill","stroke","points","name","size","onSlotchange"],"sources":["src/components/tree/tree-item.css?tag=ts-tree-item&encapsulation=shadow","src/components/tree/tree-item.tsx"],"sourcesContent":["/* ==========================================================================\n ts-tree-item — Shadow DOM Scoped Styles\n ========================================================================== */\n\n:host {\n display: block;\n font-family: var(--ts-font-family-base);\n outline: none;\n}\n\n.tree-item__base {\n display: flex;\n align-items: center;\n gap: var(--ts-spacing-1);\n min-block-size: var(--ts-tree-item-height, 2rem);\n padding-inline: var(--ts-spacing-2);\n padding-block: var(--ts-spacing-1);\n border-radius: var(--ts-radius-sm);\n cursor: pointer;\n user-select: none;\n font-size: var(--ts-font-size-sm);\n line-height: var(--ts-line-height-tight);\n color: var(--ts-color-text-primary);\n transition:\n background-color var(--ts-transition-fast),\n color var(--ts-transition-fast);\n}\n\n.tree-item__base:hover {\n background-color: var(--ts-color-bg-subtle);\n}\n\n:host(:focus-visible) .tree-item__base {\n box-shadow: var(--ts-focus-ring);\n}\n\n/* ---- Selected ---- */\n:host([selected]) .tree-item__base {\n background-color: var(--ts-tree-active-bg, var(--ts-color-interactive-primary-subtle));\n color: var(--ts-color-interactive-primary);\n}\n\n/* ---- Disabled ---- */\n:host([disabled]) .tree-item__base {\n opacity: 0.5;\n cursor: not-allowed;\n pointer-events: none;\n}\n\n/* ---- Chevron ---- */\n.tree-item__chevron {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n inline-size: 1.25rem;\n block-size: 1.25rem;\n transition: transform var(--ts-transition-fast);\n}\n\n.tree-item__chevron svg {\n inline-size: 0.875rem;\n block-size: 0.875rem;\n}\n\n:host(.ts-tree-item--expanded) .tree-item__chevron {\n transform: rotate(90deg);\n}\n\n.tree-item__chevron--hidden {\n visibility: hidden;\n}\n\n/* ---- Icon ---- */\n.tree-item__icon {\n display: inline-flex;\n align-items: center;\n flex-shrink: 0;\n}\n\n/* ---- Label ---- */\n.tree-item__label {\n flex: 1;\n min-inline-size: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n/* ---- Children ---- */\n.tree-item__children {\n padding-inline-start: var(--ts-tree-indent, var(--ts-spacing-5));\n}\n\n.tree-item__children--collapsed {\n display: none;\n}\n","import { Component, Prop, Event, State, h, Host, Element, Watch } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\n\n/**\n * @slot - Default slot for nested ts-tree-item children.\n * @slot label - Custom label content.\n *\n * @part base - The tree item container.\n * @part label - The label wrapper.\n * @part chevron - The expand/collapse chevron.\n * @part icon - The icon wrapper.\n */\n@Component({\n tag: 'ts-tree-item',\n styleUrl: 'tree-item.css',\n shadow: true,\n})\nexport class TsTreeItem {\n @Element() hostEl!: HTMLElement;\n\n /** The item label. */\n @Prop() label?: string;\n\n /** Whether the item is expanded (has children). */\n @Prop({ reflect: true, mutable: true }) expanded = false;\n\n /** Whether the item is selected. */\n @Prop({ reflect: true, mutable: true }) selected = false;\n\n /** Whether the item is disabled. */\n @Prop({ reflect: true }) disabled = false;\n\n /** Optional Lucide icon name. */\n @Prop() icon?: string;\n\n /** Whether this item has slotted children (expandable). */\n @State() hasChildren = false;\n\n /** Emitted when expand/collapse is toggled. */\n @Event({ eventName: 'tsToggle' }) tsToggle!: EventEmitter<{ expanded: boolean }>;\n\n /** Emitted when the item is selected. */\n @Event({ eventName: 'tsSelect' }) tsSelect!: EventEmitter<{ selected: boolean; value: string }>;\n\n @Watch('expanded')\n onExpandedChange(): void {\n this.tsToggle.emit({ expanded: this.expanded });\n }\n\n componentDidLoad(): void {\n this.checkForChildren();\n }\n\n private checkForChildren(): void {\n const slot = this.hostEl.shadowRoot?.querySelector('slot:not([name])') as HTMLSlotElement;\n if (slot) {\n const assigned = slot.assignedElements();\n this.hasChildren = assigned.some(el => el.tagName === 'TS-TREE-ITEM');\n }\n }\n\n private handleToggle = (event: MouseEvent): void => {\n event.stopPropagation();\n if (this.disabled) return;\n this.expanded = !this.expanded;\n };\n\n private handleSelect = (): void => {\n if (this.disabled) return;\n const tree = this.hostEl.closest('ts-tree');\n if (tree && (tree as unknown as { selectable: boolean }).selectable) {\n this.selected = !this.selected;\n this.tsSelect.emit({ selected: this.selected, value: this.label || '' });\n }\n };\n\n private handleKeyDown = (event: KeyboardEvent): void => {\n if (event.key === 'Enter' || event.key === ' ') {\n event.preventDefault();\n this.handleSelect();\n }\n };\n\n private handleSlotChange = (): void => {\n this.checkForChildren();\n };\n\n // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n render() {\n return (\n <Host\n class={{\n 'ts-tree-item': true,\n 'ts-tree-item--expanded': this.expanded,\n 'ts-tree-item--selected': this.selected,\n 'ts-tree-item--disabled': this.disabled,\n 'ts-tree-item--has-children': this.hasChildren,\n }}\n role=\"treeitem\"\n tabindex={this.disabled ? -1 : 0}\n aria-expanded={this.hasChildren ? String(this.expanded) : undefined}\n aria-selected={String(this.selected)}\n aria-disabled={this.disabled ? 'true' : undefined}\n onKeyDown={this.handleKeyDown}\n >\n <div class=\"tree-item__base\" part=\"base\" onClick={this.handleSelect}>\n <span\n class={{\n 'tree-item__chevron': true,\n 'tree-item__chevron--hidden': !this.hasChildren,\n }}\n part=\"chevron\"\n onClick={this.handleToggle}\n aria-hidden=\"true\"\n >\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <polyline points=\"9 18 15 12 9 6\" />\n </svg>\n </span>\n\n {this.icon && (\n <span class=\"tree-item__icon\" part=\"icon\" aria-hidden=\"true\">\n <ts-icon name={this.icon} size=\"sm\" />\n </span>\n )}\n\n <span class=\"tree-item__label\" part=\"label\">\n <slot name=\"label\">{this.label}</slot>\n </span>\n </div>\n\n <div\n class={{\n 'tree-item__children': true,\n 'tree-item__children--collapsed': !this.expanded,\n }}\n role=\"group\"\n >\n <slot onSlotchange={this.handleSlotChange} />\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"gEAAA,MAAMA,EAAc,IAAM,ijD,MCiBbC,EAAU,M,uHAIbC,MAGgCC,SAAW,MAGXC,SAAW,MAG1BC,SAAW,MAG5BC,KAGCC,YAAc,MAGWC,SAGAC,SAGlC,gBAAAC,GACEC,KAAKH,SAASI,KAAK,CAAET,SAAUQ,KAAKR,U,CAGtC,gBAAAU,GACEF,KAAKG,kB,CAGC,gBAAAA,GACN,MAAMC,EAAOJ,KAAKK,OAAOC,YAAYC,cAAc,oBACnD,GAAIH,EAAM,CACR,MAAMI,EAAWJ,EAAKK,mBACtBT,KAAKJ,YAAcY,EAASE,MAAKC,GAAMA,EAAGC,UAAY,gB,EAIlDC,aAAgBC,IACtBA,EAAMC,kBACN,GAAIf,KAAKN,SAAU,OACnBM,KAAKR,UAAYQ,KAAKR,QAAQ,EAGxBwB,aAAe,KACrB,GAAIhB,KAAKN,SAAU,OACnB,MAAMuB,EAAOjB,KAAKK,OAAOa,QAAQ,WACjC,GAAID,GAASA,EAA4CE,WAAY,CACnEnB,KAAKP,UAAYO,KAAKP,SACtBO,KAAKF,SAASG,KAAK,CAAER,SAAUO,KAAKP,SAAU2B,MAAOpB,KAAKT,OAAS,I,GAI/D8B,cAAiBP,IACvB,GAAIA,EAAMQ,MAAQ,SAAWR,EAAMQ,MAAQ,IAAK,CAC9CR,EAAMS,iBACNvB,KAAKgB,c,GAIDQ,iBAAmB,KACzBxB,KAAKG,kBAAkB,EAIzB,MAAAsB,GACE,OACEC,EAACC,EAAI,CAAAL,IAAA,2CACHM,MAAO,CACL,eAAgB,KAChB,yBAA0B5B,KAAKR,SAC/B,yBAA0BQ,KAAKP,SAC/B,yBAA0BO,KAAKN,SAC/B,6BAA8BM,KAAKJ,aAErCiC,KAAK,WACLC,SAAU9B,KAAKN,UAAW,EAAK,EAAC,gBACjBM,KAAKJ,YAAcmC,OAAO/B,KAAKR,UAAYwC,UAAS,gBACpDD,OAAO/B,KAAKP,UAAS,gBACrBO,KAAKN,SAAW,OAASsC,UACxCC,UAAWjC,KAAKqB,eAEhBK,EAAA,OAAAJ,IAAA,2CAAKM,MAAM,kBAAkBM,KAAK,OAAOC,QAASnC,KAAKgB,cACrDU,EAAA,QAAAJ,IAAA,2CACEM,MAAO,CACL,qBAAsB,KACtB,8BAA+B5B,KAAKJ,aAEtCsC,KAAK,UACLC,QAASnC,KAAKa,aAAY,cACd,QAEZa,EAAA,OAAAJ,IAAA,2CAAKc,QAAQ,YAAYC,KAAK,OAAOC,OAAO,eAAc,eAAc,IAAG,iBAAgB,QAAO,kBAAiB,SACjHZ,EAAA,YAAAJ,IAAA,2CAAUiB,OAAO,qBAIpBvC,KAAKL,MACJ+B,EAAA,QAAAJ,IAAA,2CAAMM,MAAM,kBAAkBM,KAAK,OAAM,cAAa,QACpDR,EAAA,WAAAJ,IAAA,2CAASkB,KAAMxC,KAAKL,KAAM8C,KAAK,QAInCf,EAAA,QAAAJ,IAAA,2CAAMM,MAAM,mBAAmBM,KAAK,SAClCR,EAAA,QAAAJ,IAAA,2CAAMkB,KAAK,SAASxC,KAAKT,SAI7BmC,EAAA,OAAAJ,IAAA,2CACEM,MAAO,CACL,sBAAuB,KACvB,kCAAmC5B,KAAKR,UAE1CqC,KAAK,SAELH,EAAA,QAAAJ,IAAA,2CAAMoB,aAAc1C,KAAKwB,oB","ignoreList":[]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as e,c as t,a as s,h as a,H as i}from"./p-V8-ENixA.js";const n=()=>`:host{display:block;font-family:var(--ts-font-family-base);--ts-menu-item-height:2.25rem}.menu-item__base{display:flex;align-items:center;gap:var(--ts-spacing-2);min-block-size:var(--ts-menu-item-height);padding-inline:var(--ts-spacing-3);padding-block:var(--ts-spacing-1);font-size:var(--ts-font-size-sm);color:var(--ts-color-text-primary);text-decoration:none;cursor:pointer;transition:background-color var(--ts-transition-fast), color var(--ts-transition-fast);outline:none;border:none;background:none;width:100%;white-space:nowrap}.menu-item__base:hover:not([aria-disabled="true"]){background-color:var(--ts-color-bg-hover)}.menu-item__base:focus-visible{background-color:var(--ts-color-bg-hover);box-shadow:inset 0 0 0 2px var(--ts-color-interactive-primary)}:host([disabled]) .menu-item__base{opacity:0.5;cursor:not-allowed;pointer-events:none}.menu-item__prefix,.menu-item__suffix{display:inline-flex;align-items:center;flex-shrink:0}.menu-item__prefix:empty,.menu-item__suffix:empty{display:none}.menu-item__label{display:inline-flex;align-items:center;flex-grow:1}.menu-item__suffix{margin-inline-start:auto;padding-inline-start:var(--ts-spacing-3);color:var(--ts-color-text-tertiary);font-size:var(--ts-font-size-xs)}`;const r=class{constructor(s){e(this,s);this.tsSelect=t(this,"tsSelect")}get hostEl(){return s(this)}disabled=false;value="";href;tsSelect;baseEl;async setFocus(){this.baseEl?.focus()}connectedCallback(){this.hostEl.addEventListener("focus",(()=>{this.baseEl?.focus()}))}handleClick=()=>{if(this.disabled)return;this.tsSelect.emit({value:this.value})};handleKeydown=e=>{if(this.disabled)return;if(e.key==="Enter"||e.key===" "){e.preventDefault();this.tsSelect.emit({value:this.value})}};render(){const e=!!this.href;const t=e?"a":"div";const s=e?{href:this.disabled?undefined:this.href}:{};return a(i,{key:"5b22feae43a6cf198651b55cc3285969dd6f796f",class:{"ts-menu-item":true,"ts-menu-item--disabled":this.disabled}},a(t,{key:"80c5f0748d110708eeb8c5278b3473352ab51280",...s,ref:e=>this.baseEl=e,class:"menu-item__base",part:"base",role:"menuitem",tabindex:this.disabled?-1:0,"aria-disabled":this.disabled?"true":undefined,onClick:this.handleClick,onKeyDown:this.handleKeydown},a("span",{key:"99cac763578eba7c95a9609bf3d50782b0efe0f6",class:"menu-item__prefix",part:"prefix"},a("slot",{key:"a58b57ff9d48a0a347417ebfd9a6ab82ac44486e",name:"prefix"})),a("span",{key:"6cd4e9d9b57ee7fa6404f0e6fd26f3fbde0f2bb3",class:"menu-item__label",part:"label"},a("slot",{key:"9bfa5a772807c16aca216f806dff8f3165af9c4c"})),a("span",{key:"194b24cb2e5b5d41bedb1982ba2c370a1f8e2421",class:"menu-item__suffix",part:"suffix"},a("slot",{key:"a14e9e98baf2a3addcb9870012bcedf169a00f9e",name:"suffix"}))))}};r.style=n();export{r as ts_menu_item};
|
|
2
|
+
//# sourceMappingURL=p-7e531195.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["menuItemCss","TsMenuItem","disabled","value","href","tsSelect","baseEl","setFocus","this","focus","connectedCallback","hostEl","addEventListener","handleClick","emit","handleKeydown","event","key","preventDefault","render","isLink","Tag","linkAttrs","undefined","h","Host","class","ref","el","part","role","tabindex","onClick","onKeyDown","name"],"sources":["src/components/menu/menu-item.css?tag=ts-menu-item&encapsulation=shadow","src/components/menu/menu-item.tsx"],"sourcesContent":["/* ==========================================================================\n ts-menu-item — Shadow DOM Scoped Styles\n\n Component tokens (Tier 3):\n --ts-menu-item-height Item minimum height\n ========================================================================== */\n\n:host {\n display: block;\n font-family: var(--ts-font-family-base);\n\n --ts-menu-item-height: 2.25rem;\n}\n\n/* ---- Base ---- */\n.menu-item__base {\n display: flex;\n align-items: center;\n gap: var(--ts-spacing-2);\n min-block-size: var(--ts-menu-item-height);\n padding-inline: var(--ts-spacing-3);\n padding-block: var(--ts-spacing-1);\n font-size: var(--ts-font-size-sm);\n color: var(--ts-color-text-primary);\n text-decoration: none;\n cursor: pointer;\n transition:\n background-color var(--ts-transition-fast),\n color var(--ts-transition-fast);\n outline: none;\n border: none;\n background: none;\n width: 100%;\n white-space: nowrap;\n}\n\n.menu-item__base:hover:not([aria-disabled=\"true\"]) {\n background-color: var(--ts-color-bg-hover);\n}\n\n.menu-item__base:focus-visible {\n background-color: var(--ts-color-bg-hover);\n box-shadow: inset 0 0 0 2px var(--ts-color-interactive-primary);\n}\n\n/* ---- Disabled ---- */\n:host([disabled]) .menu-item__base {\n opacity: 0.5;\n cursor: not-allowed;\n pointer-events: none;\n}\n\n/* ---- Slot wrappers ---- */\n.menu-item__prefix,\n.menu-item__suffix {\n display: inline-flex;\n align-items: center;\n flex-shrink: 0;\n}\n\n.menu-item__prefix:empty,\n.menu-item__suffix:empty {\n display: none;\n}\n\n.menu-item__label {\n display: inline-flex;\n align-items: center;\n flex-grow: 1;\n}\n\n.menu-item__suffix {\n margin-inline-start: auto;\n padding-inline-start: var(--ts-spacing-3);\n color: var(--ts-color-text-tertiary);\n font-size: var(--ts-font-size-xs);\n}\n","import { Component, Prop, Event, h, Host, Element, Method } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\n\n/**\n * @slot - Default slot for menu item label content.\n * @slot prefix - Content before the label (e.g., icon).\n * @slot suffix - Content after the label (e.g., shortcut or badge).\n *\n * @part base - The menu item container element.\n * @part prefix - The prefix slot wrapper.\n * @part label - The label wrapper.\n * @part suffix - The suffix slot wrapper.\n */\n@Component({\n tag: 'ts-menu-item',\n styleUrl: 'menu-item.css',\n shadow: true,\n})\nexport class TsMenuItem {\n @Element() hostEl!: HTMLElement;\n\n /** Disables the menu item. */\n @Prop({ reflect: true }) disabled = false;\n\n /** The value associated with this menu item. */\n @Prop({ reflect: true }) value = '';\n\n /** If provided, renders the item as a link. */\n @Prop() href?: string;\n\n /** Emitted when the menu item is selected. */\n @Event({ eventName: 'tsSelect' }) tsSelect!: EventEmitter<{ value: string }>;\n\n private baseEl?: HTMLElement;\n\n /** Focus the menu item. */\n @Method()\n async setFocus(): Promise<void> {\n this.baseEl?.focus();\n }\n\n connectedCallback(): void {\n // Allow the host element to delegate focus to the inner element\n this.hostEl.addEventListener('focus', () => {\n this.baseEl?.focus();\n });\n }\n\n private handleClick = (): void => {\n if (this.disabled) return;\n this.tsSelect.emit({ value: this.value });\n };\n\n private handleKeydown = (event: KeyboardEvent): void => {\n if (this.disabled) return;\n if (event.key === 'Enter' || event.key === ' ') {\n event.preventDefault();\n this.tsSelect.emit({ value: this.value });\n }\n };\n\n // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n render() {\n const isLink = !!this.href;\n const Tag = isLink ? 'a' : 'div';\n\n const linkAttrs = isLink\n ? {\n href: this.disabled ? undefined : this.href,\n }\n : {};\n\n return (\n <Host\n class={{\n 'ts-menu-item': true,\n 'ts-menu-item--disabled': this.disabled,\n }}\n >\n <Tag\n {...linkAttrs}\n ref={(el) => (this.baseEl = el as HTMLElement)}\n class=\"menu-item__base\"\n part=\"base\"\n role=\"menuitem\"\n tabindex={this.disabled ? -1 : 0}\n aria-disabled={this.disabled ? 'true' : undefined}\n onClick={this.handleClick}\n onKeyDown={this.handleKeydown}\n >\n <span class=\"menu-item__prefix\" part=\"prefix\">\n <slot name=\"prefix\" />\n </span>\n\n <span class=\"menu-item__label\" part=\"label\">\n <slot />\n </span>\n\n <span class=\"menu-item__suffix\" part=\"suffix\">\n <slot name=\"suffix\" />\n </span>\n </Tag>\n </Host>\n );\n }\n}\n"],"mappings":"gEAAA,MAAMA,EAAc,IAAM,ktC,MCkBbC,EAAU,M,sFAIIC,SAAW,MAGXC,MAAQ,GAGzBC,KAG0BC,SAE1BC,OAIR,cAAMC,GACJC,KAAKF,QAAQG,O,CAGf,iBAAAC,GAEEF,KAAKG,OAAOC,iBAAiB,SAAS,KACpCJ,KAAKF,QAAQG,OAAO,G,CAIhBI,YAAc,KACpB,GAAIL,KAAKN,SAAU,OACnBM,KAAKH,SAASS,KAAK,CAAEX,MAAOK,KAAKL,OAAQ,EAGnCY,cAAiBC,IACvB,GAAIR,KAAKN,SAAU,OACnB,GAAIc,EAAMC,MAAQ,SAAWD,EAAMC,MAAQ,IAAK,CAC9CD,EAAME,iBACNV,KAAKH,SAASS,KAAK,CAAEX,MAAOK,KAAKL,O,GAKrC,MAAAgB,GACE,MAAMC,IAAWZ,KAAKJ,KACtB,MAAMiB,EAAMD,EAAS,IAAM,MAE3B,MAAME,EAAYF,EACd,CACEhB,KAAMI,KAAKN,SAAWqB,UAAYf,KAAKJ,MAEzC,GAEJ,OACEoB,EAACC,EAAI,CAAAR,IAAA,2CACHS,MAAO,CACL,eAAgB,KAChB,yBAA0BlB,KAAKN,WAGjCsB,EAACH,EAAG,CAAAJ,IAAA,8CACEK,EACJK,IAAMC,GAAQpB,KAAKF,OAASsB,EAC5BF,MAAM,kBACNG,KAAK,OACLC,KAAK,WACLC,SAAUvB,KAAKN,UAAW,EAAK,EAAC,gBACjBM,KAAKN,SAAW,OAASqB,UACxCS,QAASxB,KAAKK,YACdoB,UAAWzB,KAAKO,eAEhBS,EAAA,QAAAP,IAAA,2CAAMS,MAAM,oBAAoBG,KAAK,UACnCL,EAAA,QAAAP,IAAA,2CAAMiB,KAAK,YAGbV,EAAA,QAAAP,IAAA,2CAAMS,MAAM,mBAAmBG,KAAK,SAClCL,EAAA,QAAAP,IAAA,8CAGFO,EAAA,QAAAP,IAAA,2CAAMS,MAAM,oBAAoBG,KAAK,UACnCL,EAAA,QAAAP,IAAA,2CAAMiB,KAAK,a","ignoreList":[]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as a,h as t,H as s}from"./p-V8-ENixA.js";const r=()=>`:host{display:inline-flex;vertical-align:middle;--ts-avatar-size:2.5rem;--ts-avatar-bg:var(--ts-color-neutral-200);--ts-avatar-color:var(--ts-color-text-primary);--ts-avatar-radius:var(--ts-shape-full)}:host([size="xs"]){--ts-avatar-size:1.5rem;font-size:var(--ts-font-size-xs)}:host([size="sm"]){--ts-avatar-size:2rem;font-size:var(--ts-font-size-sm)}:host([size="md"]){--ts-avatar-size:2.5rem;font-size:var(--ts-font-size-md)}:host([size="lg"]){--ts-avatar-size:3rem;font-size:var(--ts-font-size-lg)}:host([size="xl"]){--ts-avatar-size:4rem;font-size:var(--ts-font-size-xl)}:host([variant="square"]){--ts-avatar-radius:var(--ts-radius-full)}.avatar__base{display:inline-flex;align-items:center;justify-content:center;width:var(--ts-avatar-size);height:var(--ts-avatar-size);border-radius:var(--ts-avatar-radius);background-color:var(--ts-avatar-bg);color:var(--ts-avatar-color);overflow:hidden;user-select:none;flex-shrink:0}.avatar__image{width:100%;height:100%;object-fit:cover;border-radius:inherit}.avatar__initials{font-family:var(--ts-font-family-base);font-weight:var(--ts-font-weight-semi);font-size:inherit;line-height:1;text-transform:uppercase}`;const e=class{constructor(t){a(this,t)}src;alt;name;size="md";variant="circle";color;hasError=false;handleError=()=>{this.hasError=true};getInitials(){if(!this.name)return"";const a=this.name.trim().split(/\s+/);if(a.length===1){return a[0].charAt(0).toUpperCase()}return(a[0].charAt(0)+a[a.length-1].charAt(0)).toUpperCase()}render(){const a=this.src&&!this.hasError;const r=this.getInitials();const e=!a&&r;return t(s,{key:"11d72d9cc86c6f14c01ac01a6f37736b8e1872bd",class:{"ts-avatar":true,[`ts-avatar--${this.size}`]:true,[`ts-avatar--${this.variant}`]:true}},t("div",{key:"74c5395cc637d642bc0e53fa3a19315e9a6be2cb",class:"avatar__base",part:"base",role:"img","aria-label":this.alt||this.name||"Avatar",style:this.color&&!a?{backgroundColor:this.color}:undefined},a&&t("img",{key:"7544f0a8907645da2334e8d5f55eab475488299d",class:"avatar__image",part:"image",src:this.src,alt:this.alt||this.name||"",onError:this.handleError}),e&&t("span",{key:"4425c8f4dc882b10e7c54b3c53d3cbc37a410c2f",class:"avatar__initials",part:"initials","aria-hidden":"true"},r),!a&&!e&&t("slot",{key:"a1ea8a822e01d541c135b4fc4aba9f25c117beb8"})))}};e.style=r();export{e as ts_avatar};
|
|
2
|
+
//# sourceMappingURL=p-7fa64f00.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["avatarCss","TsAvatar","src","alt","name","size","variant","color","hasError","handleError","this","getInitials","words","trim","split","length","charAt","toUpperCase","render","showImage","initials","showInitials","h","Host","key","class","part","role","style","backgroundColor","undefined","onError"],"sources":["src/components/avatar/avatar.css?tag=ts-avatar&encapsulation=shadow","src/components/avatar/avatar.tsx"],"sourcesContent":["/* ==========================================================================\n ts-avatar — Shadow DOM Scoped Styles\n\n Component tokens (Tier 3):\n --ts-avatar-size Avatar dimensions\n --ts-avatar-bg Background color for initials/slot\n --ts-avatar-color Text color for initials\n --ts-avatar-radius Border radius\n ========================================================================== */\n\n:host {\n display: inline-flex;\n vertical-align: middle;\n\n --ts-avatar-size: 2.5rem;\n --ts-avatar-bg: var(--ts-color-neutral-200);\n --ts-avatar-color: var(--ts-color-text-primary);\n --ts-avatar-radius: var(--ts-shape-full);\n}\n\n/* ---- Sizes ---- */\n:host([size=\"xs\"]) { --ts-avatar-size: 1.5rem; font-size: var(--ts-font-size-xs); }\n:host([size=\"sm\"]) { --ts-avatar-size: 2rem; font-size: var(--ts-font-size-sm); }\n:host([size=\"md\"]) { --ts-avatar-size: 2.5rem; font-size: var(--ts-font-size-md); }\n:host([size=\"lg\"]) { --ts-avatar-size: 3rem; font-size: var(--ts-font-size-lg); }\n:host([size=\"xl\"]) { --ts-avatar-size: 4rem; font-size: var(--ts-font-size-xl); }\n\n/* ---- Variant: square ---- */\n:host([variant=\"square\"]) {\n --ts-avatar-radius: var(--ts-radius-full);\n}\n\n/* ---- Base container ---- */\n.avatar__base {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--ts-avatar-size);\n height: var(--ts-avatar-size);\n border-radius: var(--ts-avatar-radius);\n background-color: var(--ts-avatar-bg);\n color: var(--ts-avatar-color);\n overflow: hidden;\n user-select: none;\n flex-shrink: 0;\n}\n\n/* ---- Image ---- */\n.avatar__image {\n width: 100%;\n height: 100%;\n object-fit: cover;\n border-radius: inherit;\n}\n\n/* ---- Initials ---- */\n.avatar__initials {\n font-family: var(--ts-font-family-base);\n font-weight: var(--ts-font-weight-semi);\n font-size: inherit;\n line-height: 1;\n text-transform: uppercase;\n}\n","import { Component, Prop, State, h, Host } from '@stencil/core';\n\n/**\n * @slot - Default slot for custom content (e.g., icon).\n *\n * @part base - The avatar container.\n * @part image - The avatar image element.\n * @part initials - The initials text element.\n */\n@Component({\n tag: 'ts-avatar',\n styleUrl: 'avatar.css',\n shadow: true,\n})\nexport class TsAvatar {\n /** Image URL for the avatar. */\n @Prop() src?: string;\n\n /** Alt text for the avatar image. */\n @Prop() alt?: string;\n\n /** Name used to generate initials fallback. */\n @Prop() name?: string;\n\n /** The size of the avatar. */\n @Prop({ reflect: true }) size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md';\n\n /** Shape variant of the avatar. */\n @Prop({ reflect: true }) variant: 'circle' | 'square' = 'circle';\n\n /** Background color for the initials fallback. */\n @Prop() color?: string;\n\n /** Whether the image failed to load. */\n @State() hasError = false;\n\n private handleError = (): void => {\n this.hasError = true;\n };\n\n private getInitials(): string {\n if (!this.name) return '';\n const words = this.name.trim().split(/\\s+/);\n if (words.length === 1) {\n return words[0].charAt(0).toUpperCase();\n }\n return (words[0].charAt(0) + words[words.length - 1].charAt(0)).toUpperCase();\n }\n\n // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n render() {\n const showImage = this.src && !this.hasError;\n const initials = this.getInitials();\n const showInitials = !showImage && initials;\n\n return (\n <Host\n class={{\n 'ts-avatar': true,\n [`ts-avatar--${this.size}`]: true,\n [`ts-avatar--${this.variant}`]: true,\n }}\n >\n <div\n class=\"avatar__base\"\n part=\"base\"\n role=\"img\"\n aria-label={this.alt || this.name || 'Avatar'}\n style={this.color && !showImage ? { backgroundColor: this.color } : undefined}\n >\n {showImage && (\n <img\n class=\"avatar__image\"\n part=\"image\"\n src={this.src}\n alt={this.alt || this.name || ''}\n onError={this.handleError}\n />\n )}\n {showInitials && (\n <span class=\"avatar__initials\" part=\"initials\" aria-hidden=\"true\">\n {initials}\n </span>\n )}\n {!showImage && !showInitials && <slot />}\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"kDAAA,MAAMA,EAAY,IAAM,woC,MCcXC,EAAQ,M,yBAEXC,IAGAC,IAGAC,KAGiBC,KAAyC,KAGzCC,QAA+B,SAGhDC,MAGCC,SAAW,MAEZC,YAAc,KACpBC,KAAKF,SAAW,IAAI,EAGd,WAAAG,GACN,IAAKD,KAAKN,KAAM,MAAO,GACvB,MAAMQ,EAAQF,KAAKN,KAAKS,OAAOC,MAAM,OACrC,GAAIF,EAAMG,SAAW,EAAG,CACtB,OAAOH,EAAM,GAAGI,OAAO,GAAGC,a,CAE5B,OAAQL,EAAM,GAAGI,OAAO,GAAKJ,EAAMA,EAAMG,OAAS,GAAGC,OAAO,IAAIC,a,CAIlE,MAAAC,GACE,MAAMC,EAAYT,KAAKR,MAAQQ,KAAKF,SACpC,MAAMY,EAAWV,KAAKC,cACtB,MAAMU,GAAgBF,GAAaC,EAEnC,OACEE,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,CACL,YAAa,KACb,CAAC,cAAcf,KAAKL,QAAS,KAC7B,CAAC,cAAcK,KAAKJ,WAAY,OAGlCgB,EAAA,OAAAE,IAAA,2CACEC,MAAM,eACNC,KAAK,OACLC,KAAK,MAAK,aACEjB,KAAKP,KAAOO,KAAKN,MAAQ,SACrCwB,MAAOlB,KAAKH,QAAUY,EAAY,CAAEU,gBAAiBnB,KAAKH,OAAUuB,WAEnEX,GACCG,EAAA,OAAAE,IAAA,2CACEC,MAAM,gBACNC,KAAK,QACLxB,IAAKQ,KAAKR,IACVC,IAAKO,KAAKP,KAAOO,KAAKN,MAAQ,GAC9B2B,QAASrB,KAAKD,cAGjBY,GACCC,EAAA,QAAAE,IAAA,2CAAMC,MAAM,mBAAmBC,KAAK,WAAU,cAAa,QACxDN,IAGHD,IAAcE,GAAgBC,EAAA,QAAAE,IAAA,8C","ignoreList":[]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as e,c as r,a,h as t,H as s}from"./p-V8-ENixA.js";import{g as n,t as i}from"./p-lpqZSiIf.js";const o=()=>`: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 l=class{constructor(a){e(this,a);this.tsClose=r(this,"tsClose")}get hostEl(){return a(this)}panelEl;removeFocusTrap;previouslyFocused;drawerId=n("ts-drawer");open=false;placement="end";size="md";dismissible=true;heading;tsClose;isAnimating=false;handleOpenChange(e){if(e){this.openDrawer()}else{this.closeDrawer()}}async show(){this.open=true}async close(){this.open=false}openDrawer(){this.previouslyFocused=document.activeElement;this.isAnimating=true;document.body.style.overflow="hidden";requestAnimationFrame((()=>{if(this.panelEl){this.removeFocusTrap=i(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=e=>{e.stopPropagation()};handleKeydown=e=>{if(e.key==="Escape"&&this.dismissible){e.stopPropagation();this.close()}};handleCloseClick=()=>{this.close()};render(){if(!this.open)return null;return t(s,{class:{"ts-drawer":true,"ts-drawer--open":this.open,[`ts-drawer--${this.placement}`]:true,[`ts-drawer--${this.size}`]:true},onKeyDown:this.handleKeydown},t("div",{class:"drawer__overlay",part:"overlay",onClick:this.handleOverlayClick},t("div",{ref:e=>this.panelEl=e,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},t("div",{class:"drawer__header",part:"header",id:`${this.drawerId}-header`},this.heading&&t("span",{class:"drawer__title"},this.heading),this.dismissible&&t("button",{class:"drawer__close",part:"close",type:"button","aria-label":"Close drawer",onClick:this.handleCloseClick},"✕")),t("div",{class:"drawer__body",part:"body"},t("slot",null)),t("div",{class:"drawer__footer",part:"footer"},t("slot",{name:"footer"})))))}static get watchers(){return{open:[{handleOpenChange:0}]}}};l.style=o();export{l as ts_drawer};
|
|
2
|
+
//# sourceMappingURL=p-829c4307.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["drawerCss","TsDrawer","panelEl","removeFocusTrap","previouslyFocused","drawerId","generateId","open","placement","size","dismissible","heading","tsClose","isAnimating","handleOpenChange","isOpen","this","openDrawer","closeDrawer","show","close","document","activeElement","body","style","overflow","requestAnimationFrame","trapFocus","focus","emit","disconnectedCallback","handleOverlayClick","handlePanelClick","event","stopPropagation","handleKeydown","key","handleCloseClick","render","h","Host","class","onKeyDown","part","onClick","ref","el","drawer__panel","role","undefined","tabindex","id","type","name"],"sources":["src/components/drawer/drawer.css?tag=ts-drawer&encapsulation=shadow","src/components/drawer/drawer.tsx"],"sourcesContent":["/* ==========================================================================\n ts-drawer — Shadow DOM Scoped Styles\n\n Component tokens (Tier 3):\n --ts-drawer-bg Panel background\n --ts-drawer-shadow Panel box-shadow\n --ts-drawer-overlay-bg Overlay background\n ========================================================================== */\n\n:host {\n font-family: var(--ts-font-family-base);\n\n --ts-drawer-bg: var(--ts-color-bg-elevated);\n --ts-drawer-shadow: var(--ts-shadow-xl);\n --ts-drawer-overlay-bg: var(--ts-color-bg-overlay);\n}\n\n/* ---- Overlay ---- */\n.drawer__overlay {\n position: fixed;\n inset: 0;\n z-index: var(--ts-z-modal);\n background-color: var(--ts-drawer-overlay-bg);\n animation: ts-drawer-fade-in 200ms ease-out;\n}\n\n/* ---- Panel ---- */\n.drawer__panel {\n position: fixed;\n display: flex;\n flex-direction: column;\n background-color: var(--ts-drawer-bg);\n box-shadow: var(--ts-drawer-shadow);\n outline: none;\n overflow-y: auto;\n}\n\n/* ---- Placement ---- */\n.drawer__panel--start {\n inset-block-start: 0;\n inset-block-end: 0;\n inset-inline-start: 0;\n animation: ts-drawer-slide-start 250ms cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n.drawer__panel--end {\n inset-block-start: 0;\n inset-block-end: 0;\n inset-inline-end: 0;\n animation: ts-drawer-slide-end 250ms cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n.drawer__panel--top {\n inset-block-start: 0;\n inset-inline-start: 0;\n inset-inline-end: 0;\n animation: ts-drawer-slide-top 250ms cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n.drawer__panel--bottom {\n inset-block-end: 0;\n inset-inline-start: 0;\n inset-inline-end: 0;\n animation: ts-drawer-slide-bottom 250ms cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n/* ---- Sizes — horizontal placement (start/end) ---- */\n.drawer__panel--start.drawer__panel--sm,\n.drawer__panel--end.drawer__panel--sm {\n inline-size: 320px;\n}\n\n.drawer__panel--start.drawer__panel--md,\n.drawer__panel--end.drawer__panel--md {\n inline-size: 440px;\n}\n\n.drawer__panel--start.drawer__panel--lg,\n.drawer__panel--end.drawer__panel--lg {\n inline-size: 640px;\n}\n\n.drawer__panel--start.drawer__panel--full,\n.drawer__panel--end.drawer__panel--full {\n inline-size: 100%;\n}\n\n/* ---- Sizes — vertical placement (top/bottom) ---- */\n.drawer__panel--top.drawer__panel--sm,\n.drawer__panel--bottom.drawer__panel--sm {\n block-size: 320px;\n}\n\n.drawer__panel--top.drawer__panel--md,\n.drawer__panel--bottom.drawer__panel--md {\n block-size: 440px;\n}\n\n.drawer__panel--top.drawer__panel--lg,\n.drawer__panel--bottom.drawer__panel--lg {\n block-size: 640px;\n}\n\n.drawer__panel--top.drawer__panel--full,\n.drawer__panel--bottom.drawer__panel--full {\n block-size: 100%;\n}\n\n/* ---- Header ---- */\n.drawer__header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: var(--ts-spacing-4) var(--ts-spacing-5);\n border-block-end: 1px solid var(--ts-color-border-default);\n}\n\n.drawer__title {\n font-size: var(--ts-font-size-lg);\n font-weight: var(--ts-font-weight-semi);\n color: var(--ts-color-text-primary);\n}\n\n/* ---- Close Button ---- */\n.drawer__close {\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 padding: 0;\n line-height: 1;\n margin-inline-start: auto;\n transition:\n background-color var(--ts-transition-fast),\n color var(--ts-transition-fast);\n}\n\n.drawer__close:hover {\n background-color: var(--ts-color-bg-hover);\n color: var(--ts-color-text-secondary);\n}\n\n.drawer__close:focus-visible {\n box-shadow: var(--ts-focus-ring);\n}\n\n/* ---- Body ---- */\n.drawer__body {\n flex: 1;\n padding: var(--ts-spacing-4) var(--ts-spacing-5);\n font-size: var(--ts-font-size-md);\n color: var(--ts-color-text-secondary);\n line-height: var(--ts-line-height-normal);\n overflow-y: auto;\n}\n\n/* ---- Footer ---- */\n.drawer__footer {\n padding: var(--ts-spacing-4) var(--ts-spacing-5);\n border-block-start: 1px solid var(--ts-color-border-default);\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: var(--ts-spacing-2);\n}\n\n.drawer__footer:empty {\n display: none;\n}\n\n/* ---- Animations ---- */\n@keyframes ts-drawer-fade-in {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n@keyframes ts-drawer-slide-start {\n from { transform: translateX(-100%); }\n to { transform: translateX(0); }\n}\n\n@keyframes ts-drawer-slide-end {\n from { transform: translateX(100%); }\n to { transform: translateX(0); }\n}\n\n@keyframes ts-drawer-slide-top {\n from { transform: translateY(-100%); }\n to { transform: translateY(0); }\n}\n\n@keyframes ts-drawer-slide-bottom {\n from { transform: translateY(100%); }\n to { transform: translateY(0); }\n}\n","import { Component, Prop, State, Event, h, Host, Element, Method, Watch } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\nimport { generateId, trapFocus } from '../../utils/aria';\n\n/**\n * @slot - Default slot for drawer body content.\n * @slot footer - Drawer footer content (e.g., action buttons).\n *\n * @part overlay - The backdrop overlay.\n * @part panel - The slide-in panel container.\n * @part header - The header wrapper.\n * @part body - The body wrapper.\n * @part footer - The footer wrapper.\n * @part close - The close button.\n */\n@Component({\n tag: 'ts-drawer',\n styleUrl: 'drawer.css',\n shadow: true,\n})\nexport class TsDrawer {\n @Element() hostEl!: HTMLElement;\n\n private panelEl?: HTMLElement;\n private removeFocusTrap?: () => void;\n private previouslyFocused?: HTMLElement;\n private drawerId = generateId('ts-drawer');\n\n /** Whether the drawer is open. */\n @Prop({ mutable: true, reflect: true }) open = false;\n\n /** Which edge the drawer slides in from. */\n @Prop({ reflect: true }) placement: 'start' | 'end' | 'top' | 'bottom' = 'end';\n\n /** The drawer's width/height preset. */\n @Prop({ reflect: true }) size: 'sm' | 'md' | 'lg' | 'full' = 'md';\n\n /** Whether clicking the overlay or pressing Escape closes the drawer. */\n @Prop() dismissible = true;\n\n /** Accessible heading for the drawer. */\n @Prop() heading?: string;\n\n /** Emitted when the drawer closes. */\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.openDrawer();\n } else {\n this.closeDrawer();\n }\n }\n\n /** Programmatically open the drawer. */\n @Method()\n async show(): Promise<void> {\n this.open = true;\n }\n\n /** Programmatically close the drawer. */\n @Method()\n async close(): Promise<void> {\n this.open = false;\n }\n\n private openDrawer(): 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.panelEl) {\n this.removeFocusTrap = trapFocus(this.panelEl);\n this.panelEl.focus();\n }\n });\n }\n\n private closeDrawer(): void {\n this.isAnimating = false;\n this.tsClose.emit();\n\n document.body.style.overflow = '';\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 handlePanelClick = (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 return (\n <Host\n class={{\n 'ts-drawer': true,\n 'ts-drawer--open': this.open,\n [`ts-drawer--${this.placement}`]: true,\n [`ts-drawer--${this.size}`]: true,\n }}\n onKeyDown={this.handleKeydown}\n >\n <div class=\"drawer__overlay\" part=\"overlay\" onClick={this.handleOverlayClick}>\n <div\n ref={(el) => (this.panelEl = el)}\n class={{\n 'drawer__panel': true,\n [`drawer__panel--${this.placement}`]: true,\n [`drawer__panel--${this.size}`]: true,\n }}\n part=\"panel\"\n role=\"dialog\"\n aria-modal=\"true\"\n aria-label={this.heading}\n aria-labelledby={!this.heading ? `${this.drawerId}-header` : undefined}\n tabindex={-1}\n onClick={this.handlePanelClick}\n >\n <div class=\"drawer__header\" part=\"header\" id={`${this.drawerId}-header`}>\n {this.heading && <span class=\"drawer__title\">{this.heading}</span>}\n {this.dismissible && (\n <button\n class=\"drawer__close\"\n part=\"close\"\n type=\"button\"\n aria-label=\"Close drawer\"\n onClick={this.handleCloseClick}\n >\n ✕\n </button>\n )}\n </div>\n\n <div class=\"drawer__body\" part=\"body\">\n <slot />\n </div>\n\n <div class=\"drawer__footer\" part=\"footer\">\n <slot name=\"footer\" />\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"sGAAA,MAAMA,EAAY,IAAM,4/G,MCoBXC,EAAQ,M,oFAGXC,QACAC,gBACAC,kBACAC,SAAWC,EAAW,aAGUC,KAAO,MAGtBC,UAAgD,MAGhDC,KAAoC,KAGrDC,YAAc,KAGdC,QAGyBC,QAGxBC,YAAc,MAGvB,gBAAAC,CAAiBC,GACf,GAAIA,EAAQ,CACVC,KAAKC,Y,KACA,CACLD,KAAKE,a,EAMT,UAAMC,GACJH,KAAKT,KAAO,I,CAKd,WAAMa,GACJJ,KAAKT,KAAO,K,CAGN,UAAAU,GACND,KAAKZ,kBAAoBiB,SAASC,cAClCN,KAAKH,YAAc,KAEnBQ,SAASE,KAAKC,MAAMC,SAAW,SAE/BC,uBAAsB,KACpB,GAAIV,KAAKd,QAAS,CAChBc,KAAKb,gBAAkBwB,EAAUX,KAAKd,SACtCc,KAAKd,QAAQ0B,O,KAKX,WAAAV,GACNF,KAAKH,YAAc,MACnBG,KAAKJ,QAAQiB,OAEbR,SAASE,KAAKC,MAAMC,SAAW,GAC/BT,KAAKb,oBACLa,KAAKZ,mBAAmBwB,O,CAG1B,oBAAAE,GACEd,KAAKb,oBACLkB,SAASE,KAAKC,MAAMC,SAAW,E,CAGzBM,mBAAqB,KAC3B,GAAIf,KAAKN,YAAa,CACpBM,KAAKI,O,GAIDY,iBAAoBC,IAC1BA,EAAMC,iBAAiB,EAGjBC,cAAiBF,IACvB,GAAIA,EAAMG,MAAQ,UAAYpB,KAAKN,YAAa,CAC9CuB,EAAMC,kBACNlB,KAAKI,O,GAIDiB,iBAAmB,KACzBrB,KAAKI,OAAO,EAId,MAAAkB,GACE,IAAKtB,KAAKT,KAAM,OAAO,KAEvB,OACEgC,EAACC,EAAI,CACHC,MAAO,CACL,YAAa,KACb,kBAAmBzB,KAAKT,KACxB,CAAC,cAAcS,KAAKR,aAAc,KAClC,CAAC,cAAcQ,KAAKP,QAAS,MAE/BiC,UAAW1B,KAAKmB,eAEhBI,EAAA,OAAKE,MAAM,kBAAkBE,KAAK,UAAUC,QAAS5B,KAAKe,oBACxDQ,EAAA,OACEM,IAAMC,GAAQ9B,KAAKd,QAAU4C,EAC7BL,MAAO,CACLM,cAAiB,KACjB,CAAC,kBAAkB/B,KAAKR,aAAc,KACtC,CAAC,kBAAkBQ,KAAKP,QAAS,MAEnCkC,KAAK,QACLK,KAAK,SAAQ,aACF,OAAM,aACLhC,KAAKL,QAAO,mBACNK,KAAKL,QAAU,GAAGK,KAAKX,kBAAoB4C,UAC7DC,UAAU,EACVN,QAAS5B,KAAKgB,kBAEdO,EAAA,OAAKE,MAAM,iBAAiBE,KAAK,SAASQ,GAAI,GAAGnC,KAAKX,mBACnDW,KAAKL,SAAW4B,EAAA,QAAME,MAAM,iBAAiBzB,KAAKL,SAClDK,KAAKN,aACJ6B,EAAA,UACEE,MAAM,gBACNE,KAAK,QACLS,KAAK,SAAQ,aACF,eACXR,QAAS5B,KAAKqB,kBAAgB,MAOpCE,EAAA,OAAKE,MAAM,eAAeE,KAAK,QAC7BJ,EAAA,cAGFA,EAAA,OAAKE,MAAM,iBAAiBE,KAAK,UAC/BJ,EAAA,QAAMc,KAAK,c","ignoreList":[]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as a,h as r,H as t}from"./p-V8-ENixA.js";const s=()=>`:host{display:inline-flex;vertical-align:middle;font-family:var(--ts-font-family-base);--ts-badge-radius:var(--ts-shape-badge);--ts-badge-font-weight:var(--ts-font-weight-medium)}.badge__base{display:inline-flex;align-items:center;justify-content:center;font-weight:var(--ts-badge-font-weight);letter-spacing:0;line-height:1;white-space:nowrap;border-radius:var(--ts-badge-radius);border:1px solid transparent}:host([size="xs"]) .badge__base{padding:2px var(--ts-spacing-1);font-size:0.625rem}:host([size="sm"]) .badge__base{padding:3px var(--ts-spacing-2);font-size:var(--ts-font-size-xs)}:host([size="md"]) .badge__base{padding:var(--ts-spacing-1) var(--ts-spacing-3);font-size:var(--ts-font-size-xs)}:host([size="lg"]) .badge__base{padding:var(--ts-spacing-2) var(--ts-spacing-3);font-size:var(--ts-font-size-sm)}:host([size="xl"]) .badge__base{padding:var(--ts-spacing-2) var(--ts-spacing-4);font-size:var(--ts-font-size-md)}:host([pill]) .badge__base{border-radius:var(--ts-radius-full)}:host([dot]) .badge__base{width:8px;height:8px;padding:0;border-radius:var(--ts-radius-full)}:host([dot][size="lg"]) .badge__base{width:10px;height:10px}:host([dot][size="xl"]) .badge__base{width:12px;height:12px}:host([variant="primary"]:not([outline])) .badge__base{background:var(--ts-color-primary-500);color:var(--ts-color-text-on-primary)}:host([variant="success"]:not([outline])) .badge__base{background:var(--ts-color-success-500);color:var(--ts-color-text-on-success)}:host([variant="warning"]:not([outline])) .badge__base{background:var(--ts-color-warning-500);color:var(--ts-color-text-on-warning)}:host([variant="danger"]:not([outline])) .badge__base{background:var(--ts-color-danger-500);color:var(--ts-color-text-on-danger)}:host([variant="info"]:not([outline])) .badge__base{background:var(--ts-color-info-500);color:var(--ts-color-text-on-info)}:host([variant="neutral"]:not([outline])) .badge__base{background:var(--ts-color-neutral-200);color:var(--ts-color-text-secondary)}:host([variant="secondary"]:not([outline])) .badge__base{background:var(--ts-color-neutral-100);color:var(--ts-color-text-tertiary)}:host([outline][variant="primary"]) .badge__base{border-color:var(--ts-color-primary-500);color:var(--ts-color-primary-600);background:transparent}:host([outline][variant="success"]) .badge__base{border-color:var(--ts-color-success-500);color:var(--ts-color-success-600);background:transparent}:host([outline][variant="danger"]) .badge__base{border-color:var(--ts-color-danger-500);color:var(--ts-color-danger-600);background:transparent}:host([outline][variant="warning"]) .badge__base{border-color:var(--ts-color-warning-500);color:var(--ts-color-warning-600);background:transparent}:host([outline][variant="neutral"]) .badge__base{border-color:var(--ts-color-border-strong);color:var(--ts-color-text-tertiary);background:transparent}`;const o=class{constructor(r){a(this,r)}variant="primary";size="md";pill=false;dot=false;outline=false;render(){return r(t,{key:"57fde8ab4ea72562b647c9278ed22e1167c21084",class:{"ts-badge":true,[`ts-badge--${this.variant}`]:true,[`ts-badge--${this.size}`]:true,"ts-badge--pill":this.pill,"ts-badge--dot":this.dot,"ts-badge--outline":this.outline}},r("span",{key:"926775a060f709af0771e7f6ba6d0c8fee9bf451",class:"badge__base",part:"base"},!this.dot&&r("slot",{key:"48aaec48b5454d7f4c76092e28357ea588b0904e"})))}};o.style=s();export{o as ts_badge};
|
|
2
|
+
//# sourceMappingURL=p-91ccef3f.entry.js.map
|