@sky.ui/core 0.0.7 → 0.0.20
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/CHANGELOG.md +6 -0
- package/auto-import.js +1 -31
- package/dist/custom-elements.json +7115 -21498
- package/dist/helper/utils/color-resolver.d.ts +12 -0
- package/dist/helper/utils/color-resolver.js +1 -1
- package/dist/helper/utils/color-resolver.js.map +1 -1
- package/dist/index.d.ts +1 -31
- package/dist/index.js +1 -1
- package/dist/sky-alert/sky-alert.js +32 -42
- package/dist/sky-alert/sky-alert.js.map +1 -1
- package/dist/sky-appbar/sky-appbar.d.ts +5 -0
- package/dist/sky-appbar/sky-appbar.js +63 -21
- package/dist/sky-appbar/sky-appbar.js.map +1 -1
- package/dist/sky-avatar/sky-avatar.d.ts +2 -2
- package/dist/sky-avatar/sky-avatar.js +36 -28
- package/dist/sky-avatar/sky-avatar.js.map +1 -1
- package/dist/sky-badge/sky-badge.d.ts +2 -0
- package/dist/sky-badge/sky-badge.js +21 -19
- package/dist/sky-badge/sky-badge.js.map +1 -1
- package/dist/sky-button/sky-button.d.ts +4 -0
- package/dist/sky-button/sky-button.js +85 -26
- package/dist/sky-button/sky-button.js.map +1 -1
- package/dist/sky-card/sky-card.d.ts +7 -1
- package/dist/sky-card/sky-card.js +72 -40
- package/dist/sky-card/sky-card.js.map +1 -1
- package/dist/sky-checkbox/sky-checkbox.js +34 -23
- package/dist/sky-checkbox/sky-checkbox.js.map +1 -1
- package/dist/sky-chip/sky-chip.js +53 -35
- package/dist/sky-chip/sky-chip.js.map +1 -1
- package/dist/sky-combobox/sky-combobox.d.ts +6 -2
- package/dist/sky-combobox/sky-combobox.js +92 -262
- package/dist/sky-combobox/sky-combobox.js.map +1 -1
- package/dist/sky-dialog/sky-dialog.d.ts +4 -11
- package/dist/sky-dialog/sky-dialog.js +78 -131
- package/dist/sky-dialog/sky-dialog.js.map +1 -1
- package/dist/sky-flexbox/sky-flexbox.js.map +1 -1
- package/dist/sky-form/sky-form.js +21 -19
- package/dist/sky-form/sky-form.js.map +1 -1
- package/dist/sky-image/sky-image.d.ts +1 -0
- package/dist/sky-image/sky-image.js +14 -7
- package/dist/sky-image/sky-image.js.map +1 -1
- package/dist/sky-input/sky-input.d.ts +15 -2
- package/dist/sky-input/sky-input.js +188 -193
- package/dist/sky-input/sky-input.js.map +1 -1
- package/dist/sky-list/sky-list.d.ts +11 -2
- package/dist/sky-list/sky-list.js +15 -25
- package/dist/sky-list/sky-list.js.map +1 -1
- package/dist/sky-listitem/sky-listitem.js +62 -30
- package/dist/sky-listitem/sky-listitem.js.map +1 -1
- package/dist/sky-radio/sky-radio.d.ts +2 -0
- package/dist/sky-radio/sky-radio.js +29 -9
- package/dist/sky-radio/sky-radio.js.map +1 -1
- package/dist/sky-sheet/sky-sheet.d.ts +1 -1
- package/dist/sky-sheet/sky-sheet.js +68 -22
- package/dist/sky-sheet/sky-sheet.js.map +1 -1
- package/dist/sky-simple-table/index.d.ts +1 -0
- package/dist/sky-simple-table/index.js +1 -0
- package/dist/sky-simple-table/sky-simple-table.d.ts +68 -0
- package/dist/sky-simple-table/sky-simple-table.js +100 -0
- package/dist/sky-simple-table/sky-simple-table.js.map +1 -0
- package/dist/sky-theme-provider/sky-theme-provider.d.ts +10 -1
- package/dist/sky-theme-provider/sky-theme-provider.js +2 -2
- package/dist/sky-theme-provider/sky-theme-provider.js.map +1 -1
- package/package.json +39 -269
- package/dist/sky-accordion/index.d.ts +0 -1
- package/dist/sky-accordion/index.js +0 -1
- package/dist/sky-accordion/sky-accordion.d.ts +0 -201
- package/dist/sky-accordion/sky-accordion.js +0 -84
- package/dist/sky-accordion/sky-accordion.js.map +0 -1
- package/dist/sky-accordion-item/index.d.ts +0 -1
- package/dist/sky-accordion-item/index.js +0 -1
- package/dist/sky-accordion-item/sky-accordion-item.d.ts +0 -161
- package/dist/sky-accordion-item/sky-accordion-item.js +0 -191
- package/dist/sky-accordion-item/sky-accordion-item.js.map +0 -1
- package/dist/sky-breadcrumb/index.d.ts +0 -1
- package/dist/sky-breadcrumb/index.js +0 -1
- package/dist/sky-breadcrumb/sky-breadcrumb.d.ts +0 -111
- package/dist/sky-breadcrumb/sky-breadcrumb.js +0 -230
- package/dist/sky-breadcrumb/sky-breadcrumb.js.map +0 -1
- package/dist/sky-button-group/index.d.ts +0 -1
- package/dist/sky-button-group/index.js +0 -1
- package/dist/sky-button-group/sky-button-group.d.ts +0 -93
- package/dist/sky-button-group/sky-button-group.js +0 -281
- package/dist/sky-button-group/sky-button-group.js.map +0 -1
- package/dist/sky-carousel/index.d.ts +0 -1
- package/dist/sky-carousel/index.js +0 -1
- package/dist/sky-carousel/sky-carousel.d.ts +0 -265
- package/dist/sky-carousel/sky-carousel.js +0 -211
- package/dist/sky-carousel/sky-carousel.js.map +0 -1
- package/dist/sky-counter/index.d.ts +0 -1
- package/dist/sky-counter/index.js +0 -1
- package/dist/sky-counter/sky-counter.d.ts +0 -130
- package/dist/sky-counter/sky-counter.js +0 -101
- package/dist/sky-counter/sky-counter.js.map +0 -1
- package/dist/sky-drawer/index.d.ts +0 -1
- package/dist/sky-drawer/index.js +0 -1
- package/dist/sky-drawer/sky-drawer.d.ts +0 -161
- package/dist/sky-drawer/sky-drawer.js +0 -175
- package/dist/sky-drawer/sky-drawer.js.map +0 -1
- package/dist/sky-dropdown/index.d.ts +0 -1
- package/dist/sky-dropdown/index.js +0 -1
- package/dist/sky-dropdown/sky-dropdown.d.ts +0 -254
- package/dist/sky-dropdown/sky-dropdown.js +0 -61
- package/dist/sky-dropdown/sky-dropdown.js.map +0 -1
- package/dist/sky-dropdown-item/index.d.ts +0 -1
- package/dist/sky-dropdown-item/index.js +0 -1
- package/dist/sky-dropdown-item/sky-dropdown-item.d.ts +0 -207
- package/dist/sky-dropdown-item/sky-dropdown-item.js +0 -341
- package/dist/sky-dropdown-item/sky-dropdown-item.js.map +0 -1
- package/dist/sky-flexbar/index.d.ts +0 -1
- package/dist/sky-flexbar/index.js +0 -1
- package/dist/sky-flexbar/sky-flexbar.d.ts +0 -189
- package/dist/sky-flexbar/sky-flexbar.js +0 -157
- package/dist/sky-flexbar/sky-flexbar.js.map +0 -1
- package/dist/sky-flexitem/index.d.ts +0 -1
- package/dist/sky-flexitem/index.js +0 -1
- package/dist/sky-flexitem/sky-flexitem.d.ts +0 -114
- package/dist/sky-flexitem/sky-flexitem.js +0 -52
- package/dist/sky-flexitem/sky-flexitem.js.map +0 -1
- package/dist/sky-navbar/index.d.ts +0 -1
- package/dist/sky-navbar/index.js +0 -1
- package/dist/sky-navbar/sky-navbar.d.ts +0 -211
- package/dist/sky-navbar/sky-navbar.js +0 -521
- package/dist/sky-navbar/sky-navbar.js.map +0 -1
- package/dist/sky-navpanel/index.d.ts +0 -1
- package/dist/sky-navpanel/index.js +0 -1
- package/dist/sky-navpanel/sky-navpanel.d.ts +0 -187
- package/dist/sky-navpanel/sky-navpanel.js +0 -404
- package/dist/sky-navpanel/sky-navpanel.js.map +0 -1
- package/dist/sky-notification/index.d.ts +0 -1
- package/dist/sky-notification/index.js +0 -1
- package/dist/sky-notification/sky-notification.d.ts +0 -152
- package/dist/sky-notification/sky-notification.js +0 -456
- package/dist/sky-notification/sky-notification.js.map +0 -1
- package/dist/sky-otp/index.d.ts +0 -1
- package/dist/sky-otp/index.js +0 -1
- package/dist/sky-otp/sky-otp.d.ts +0 -101
- package/dist/sky-otp/sky-otp.js +0 -96
- package/dist/sky-otp/sky-otp.js.map +0 -1
- package/dist/sky-overlay/index.d.ts +0 -1
- package/dist/sky-overlay/index.js +0 -1
- package/dist/sky-overlay/sky-overlay.d.ts +0 -71
- package/dist/sky-overlay/sky-overlay.js +0 -26
- package/dist/sky-overlay/sky-overlay.js.map +0 -1
- package/dist/sky-pagination/index.d.ts +0 -1
- package/dist/sky-pagination/index.js +0 -1
- package/dist/sky-pagination/sky-pagination.d.ts +0 -167
- package/dist/sky-pagination/sky-pagination.js +0 -453
- package/dist/sky-pagination/sky-pagination.js.map +0 -1
- package/dist/sky-progress/index.d.ts +0 -1
- package/dist/sky-progress/index.js +0 -1
- package/dist/sky-progress/sky-progress.d.ts +0 -70
- package/dist/sky-progress/sky-progress.js +0 -87
- package/dist/sky-progress/sky-progress.js.map +0 -1
- package/dist/sky-radio-group/index.d.ts +0 -1
- package/dist/sky-radio-group/index.js +0 -1
- package/dist/sky-radio-group/sky-radio-group.d.ts +0 -186
- package/dist/sky-radio-group/sky-radio-group.js +0 -239
- package/dist/sky-radio-group/sky-radio-group.js.map +0 -1
- package/dist/sky-range/index.d.ts +0 -1
- package/dist/sky-range/index.js +0 -1
- package/dist/sky-range/sky-range.d.ts +0 -110
- package/dist/sky-range/sky-range.js +0 -196
- package/dist/sky-range/sky-range.js.map +0 -1
- package/dist/sky-serial/index.d.ts +0 -1
- package/dist/sky-serial/index.js +0 -1
- package/dist/sky-serial/sky-serial.d.ts +0 -127
- package/dist/sky-serial/sky-serial.js +0 -133
- package/dist/sky-serial/sky-serial.js.map +0 -1
- package/dist/sky-skeleton/index.d.ts +0 -1
- package/dist/sky-skeleton/index.js +0 -1
- package/dist/sky-skeleton/sky-skeleton.d.ts +0 -80
- package/dist/sky-skeleton/sky-skeleton.js +0 -233
- package/dist/sky-skeleton/sky-skeleton.js.map +0 -1
- package/dist/sky-slider/index.d.ts +0 -1
- package/dist/sky-slider/index.js +0 -1
- package/dist/sky-slider/sky-slider.d.ts +0 -96
- package/dist/sky-slider/sky-slider.js +0 -139
- package/dist/sky-slider/sky-slider.js.map +0 -1
- package/dist/sky-speeddial/index.d.ts +0 -1
- package/dist/sky-speeddial/index.js +0 -1
- package/dist/sky-speeddial/sky-speeddial.d.ts +0 -86
- package/dist/sky-speeddial/sky-speeddial.js +0 -154
- package/dist/sky-speeddial/sky-speeddial.js.map +0 -1
- package/dist/sky-spinner/index.d.ts +0 -1
- package/dist/sky-spinner/index.js +0 -1
- package/dist/sky-spinner/sky-spinner.d.ts +0 -87
- package/dist/sky-spinner/sky-spinner.js +0 -334
- package/dist/sky-spinner/sky-spinner.js.map +0 -1
- package/dist/sky-steps/index.d.ts +0 -1
- package/dist/sky-steps/index.js +0 -1
- package/dist/sky-steps/sky-steps.d.ts +0 -170
- package/dist/sky-steps/sky-steps.js +0 -455
- package/dist/sky-steps/sky-steps.js.map +0 -1
- package/dist/sky-switch/index.d.ts +0 -1
- package/dist/sky-switch/index.js +0 -1
- package/dist/sky-switch/sky-switch.d.ts +0 -116
- package/dist/sky-switch/sky-switch.js +0 -191
- package/dist/sky-switch/sky-switch.js.map +0 -1
- package/dist/sky-tab/index.d.ts +0 -1
- package/dist/sky-tab/index.js +0 -1
- package/dist/sky-tab/sky-tab.d.ts +0 -188
- package/dist/sky-tab/sky-tab.js +0 -390
- package/dist/sky-tab/sky-tab.js.map +0 -1
- package/dist/sky-tab-button/index.d.ts +0 -1
- package/dist/sky-tab-button/index.js +0 -1
- package/dist/sky-tab-button/sky-tab-button.d.ts +0 -114
- package/dist/sky-tab-button/sky-tab-button.js +0 -167
- package/dist/sky-tab-button/sky-tab-button.js.map +0 -1
- package/dist/sky-theme-switcher/index.d.ts +0 -1
- package/dist/sky-theme-switcher/index.js +0 -1
- package/dist/sky-theme-switcher/sky-theme-switcher.d.ts +0 -92
- package/dist/sky-theme-switcher/sky-theme-switcher.js +0 -43
- package/dist/sky-theme-switcher/sky-theme-switcher.js.map +0 -1
- package/dist/sky-tooltip/index.d.ts +0 -1
- package/dist/sky-tooltip/index.js +0 -1
- package/dist/sky-tooltip/sky-tooltip.d.ts +0 -156
- package/dist/sky-tooltip/sky-tooltip.js +0 -242
- package/dist/sky-tooltip/sky-tooltip.js.map +0 -1
|
@@ -1,254 +0,0 @@
|
|
|
1
|
-
import { LitElement, PropertyValues } from "lit";
|
|
2
|
-
export type SkyDropdownTrigger = "click" | "hover";
|
|
3
|
-
export type SkyDropdownPlacement = "bottom" | "top" | "left" | "right";
|
|
4
|
-
export type SkyDropdownAlign = "start" | "center" | "end";
|
|
5
|
-
export type SkyDropdownSelectDetail = {
|
|
6
|
-
value: string;
|
|
7
|
-
text: string;
|
|
8
|
-
item: HTMLElement;
|
|
9
|
-
};
|
|
10
|
-
/** Payload for controlled open state (`v-model:open`). */
|
|
11
|
-
export type SkyDropdownOpenChangeDetail = {
|
|
12
|
-
open: boolean;
|
|
13
|
-
};
|
|
14
|
-
/**
|
|
15
|
-
* @element sky-dropdown
|
|
16
|
-
*
|
|
17
|
-
* @summary Accessible dropdown menu with trigger slot, smart positioning, keyboard navigation, and collision-aware popover behavior.
|
|
18
|
-
*
|
|
19
|
-
* @status stable
|
|
20
|
-
* @since 1.0.0
|
|
21
|
-
*
|
|
22
|
-
* @documentation https://library.sky-ui.com/components/dropdown
|
|
23
|
-
*
|
|
24
|
-
* @uiVModel value dropdown-select detail=value
|
|
25
|
-
* @uiVModel open open-change detail=open
|
|
26
|
-
*
|
|
27
|
-
* @slot trigger - The clickable/hoverable trigger content (e.g., a button).
|
|
28
|
-
* @slot - Default slot for menu content; typically `<sky-dropdown-item>` or any element with `role="menuitem"`.
|
|
29
|
-
*
|
|
30
|
-
* @csspart trigger - Wrapper around the slotted trigger content.
|
|
31
|
-
* @csspart content - The positioned popup container.
|
|
32
|
-
* @csspart content-inner - Scrollable inner wrapper that constrains max height.
|
|
33
|
-
*
|
|
34
|
-
* @fires {CustomEvent<void>} open - Dispatched when the dropdown is opened.
|
|
35
|
-
* @fires {CustomEvent<void>} close - Dispatched when the dropdown is closed.
|
|
36
|
-
* @fires {CustomEvent<SkyDropdownOpenChangeDetail>} open-change - Dispatched whenever open state changes (includes payload for `v-model:open`).
|
|
37
|
-
* @fires {CustomEvent<SkyDropdownSelectDetail>} dropdown-select - Dispatched when an item is activated.
|
|
38
|
-
*
|
|
39
|
-
* @property {SkyDropdownTrigger} trigger - How the dropdown opens.
|
|
40
|
-
* @property {SkyDropdownPlacement} placement - Preferred side; flips if needed.
|
|
41
|
-
* @property {SkyDropdownAlign} align - Alignment relative to trigger edge.
|
|
42
|
-
* @property {boolean} open - Whether the dropdown is open.
|
|
43
|
-
* @property {string} value - Last selected item value from `dropdown-select` (controlled selection mirror). Default: `""`.
|
|
44
|
-
* @property {"auto"|"trigger"|string} width - Popup width strategy or CSS length.
|
|
45
|
-
* @property {boolean} closeOnClick - Close when clicking an item.
|
|
46
|
-
* @property {boolean} closeOnEsc - Close on Escape.
|
|
47
|
-
* @property {number} hoverOpenDelay - Delay in milliseconds before opening on hover.
|
|
48
|
-
* @property {number} hoverCloseDelay - Delay in milliseconds before closing on hover-out.
|
|
49
|
-
* @property {number} offset - Gap in pixels between trigger and popup.
|
|
50
|
-
* @property {boolean} flip - Automatically flip placement when space is limited.
|
|
51
|
-
* @property {number} viewportPadding - Viewport edge padding for collision logic.
|
|
52
|
-
* @property {string} maxHeight - Max height CSS length for popup scroll area.
|
|
53
|
-
* @property {string} animateType - Animation preset used by popover controller.
|
|
54
|
-
* @method toggle Toggles dropdown open state.
|
|
55
|
-
* @method openDropdown Opens dropdown.
|
|
56
|
-
* @method close Closes dropdown.
|
|
57
|
-
* @method focusTrigger Focuses trigger wrapper.
|
|
58
|
-
*
|
|
59
|
-
* @Behavior
|
|
60
|
-
* - Uses `PopoverController` for intelligent positioning and collision detection
|
|
61
|
-
* - Supports both click and hover triggers with configurable delays
|
|
62
|
-
* - Automatically flips placement when insufficient viewport space
|
|
63
|
-
* - Provides keyboard navigation with roving focus
|
|
64
|
-
* - Manages accessibility attributes automatically
|
|
65
|
-
* - **click**: Opens on click, closes on click outside or Escape
|
|
66
|
-
* - **hover**: Opens on mouse enter with delay, closes on mouse leave with delay
|
|
67
|
-
* - Both modes support keyboard interaction (Space/Enter on trigger)
|
|
68
|
-
* - Trigger receives `role="button"`, `aria-expanded`, `aria-controls`
|
|
69
|
-
* - Dropdown uses `role="menu"` for screen readers
|
|
70
|
-
* - Keyboard navigation with Arrow keys, Home, End, Escape
|
|
71
|
-
* - Roving focus within menu items
|
|
72
|
-
* - Proper focus management on open/close
|
|
73
|
-
* - Respects reduced motion preferences
|
|
74
|
-
* - Supports any content with proper ARIA roles
|
|
75
|
-
* - When rendering menu items from an array, use Lit's `repeat()` with a stable key (e.g. item id or index).
|
|
76
|
-
* - Do not remove or replace the trigger slot content while the dropdown is open; positioning relies on the trigger element reference.
|
|
77
|
-
*
|
|
78
|
-
* @example
|
|
79
|
-
* ```html
|
|
80
|
-
* <sky-dropdown trigger="click" placement="bottom" align="start">
|
|
81
|
-
* <button slot="trigger">Open Menu</button>
|
|
82
|
-
* <sky-dropdown-item value="a">Alpha</sky-dropdown-item>
|
|
83
|
-
* <sky-dropdown-item value="b">Beta</sky-dropdown-item>
|
|
84
|
-
* <sky-dropdown-item value="c" disabled>Gamma (disabled)</sky-dropdown-item>
|
|
85
|
-
* </sky-dropdown>
|
|
86
|
-
* ```
|
|
87
|
-
* ```vue
|
|
88
|
-
* <template>
|
|
89
|
-
* <sky-dropdown trigger="click" placement="bottom" align="start">
|
|
90
|
-
* <button slot="trigger">Open Menu</button>
|
|
91
|
-
* <sky-dropdown-item value="a">Alpha</sky-dropdown-item>
|
|
92
|
-
* <sky-dropdown-item value="b">Beta</sky-dropdown-item>
|
|
93
|
-
* <sky-dropdown-item value="c" disabled>Gamma (disabled)</sky-dropdown-item>
|
|
94
|
-
* </sky-dropdown>
|
|
95
|
-
* </template>
|
|
96
|
-
* ```
|
|
97
|
-
* ```jsx
|
|
98
|
-
* export default function Demo() {
|
|
99
|
-
* return (
|
|
100
|
-
* <sky-dropdown trigger="click" placement="bottom" align="start">
|
|
101
|
-
* <button slot="trigger">Open Menu</button>
|
|
102
|
-
* <sky-dropdown-item value="a">Alpha</sky-dropdown-item>
|
|
103
|
-
* <sky-dropdown-item value="b">Beta</sky-dropdown-item>
|
|
104
|
-
* <sky-dropdown-item value="c" disabled>Gamma (disabled)</sky-dropdown-item>
|
|
105
|
-
* </sky-dropdown>
|
|
106
|
-
* );
|
|
107
|
-
* }
|
|
108
|
-
* ```
|
|
109
|
-
*/
|
|
110
|
-
export declare class SkyDropdown extends LitElement {
|
|
111
|
-
/** @public How the dropdown opens. */
|
|
112
|
-
trigger: SkyDropdownTrigger;
|
|
113
|
-
/** @public Preferred side; flips if needed. */
|
|
114
|
-
placement: SkyDropdownPlacement;
|
|
115
|
-
/** @public Alignment relative to the trigger edge. */
|
|
116
|
-
align: SkyDropdownAlign;
|
|
117
|
-
/** @public Whether the dropdown is open. */
|
|
118
|
-
open: boolean;
|
|
119
|
-
/** @public Last activated menu value (mirrors `dropdown-select` detail.value). */
|
|
120
|
-
value: string;
|
|
121
|
-
/** @public Width of the dropdown. */
|
|
122
|
-
width: "auto" | "trigger" | string;
|
|
123
|
-
/** @public Close when clicking an item. */
|
|
124
|
-
closeOnClick: boolean;
|
|
125
|
-
/** @public Close on Escape. */
|
|
126
|
-
closeOnEsc: boolean;
|
|
127
|
-
/** @public Delay (ms) before opening on hover. */
|
|
128
|
-
hoverOpenDelay: number;
|
|
129
|
-
/** @public Delay (ms) before closing after hover-out. */
|
|
130
|
-
hoverCloseDelay: number;
|
|
131
|
-
/** @public Gap in px between trigger and dropdown. */
|
|
132
|
-
offset: number;
|
|
133
|
-
/** @public Automatically flip to an available side. */
|
|
134
|
-
flip: boolean;
|
|
135
|
-
/** @public Padding from viewport edges used by collision logic. */
|
|
136
|
-
viewportPadding: number;
|
|
137
|
-
/** @public Max height (CSS length) for the popup's inner scroll area. */
|
|
138
|
-
maxHeight: string;
|
|
139
|
-
/** @public Animation preset for open/close transitions. */
|
|
140
|
-
animateType: string;
|
|
141
|
-
/** @private Reference to the trigger element. */
|
|
142
|
-
private _triggerEl;
|
|
143
|
-
/** @private Reference to the content element. */
|
|
144
|
-
private _contentEl;
|
|
145
|
-
/** Non-reactive; hover-close logic only (avoids Lit change-in-update). */
|
|
146
|
-
private _isHoveringTrigger;
|
|
147
|
-
/** Non-reactive; hover-close logic only (avoids Lit change-in-update). */
|
|
148
|
-
private _isHoveringContent;
|
|
149
|
-
/** @private Timeout ID for opening on hover. */
|
|
150
|
-
private _openTimeout;
|
|
151
|
-
/** @private Timeout ID for closing on hover out. */
|
|
152
|
-
private _closeTimeout;
|
|
153
|
-
/** @private True after firstUpdated when targets exist. */
|
|
154
|
-
private _ready;
|
|
155
|
-
/** @private Guard to avoid open<->controller loop. */
|
|
156
|
-
private _syncingFromController;
|
|
157
|
-
/** @private Popover controller instance. */
|
|
158
|
-
private dropdownPopover;
|
|
159
|
-
static styles: import("lit").CSSResult;
|
|
160
|
-
/** Maps `width` prop to a host CSS variable consumed by `.dropdown-content`. */
|
|
161
|
-
private _applyWidthProp;
|
|
162
|
-
/** @protected */
|
|
163
|
-
protected firstUpdated(_changed: PropertyValues): void;
|
|
164
|
-
/** @protected */
|
|
165
|
-
updated(changed: PropertyValues): void;
|
|
166
|
-
/** @protected */
|
|
167
|
-
connectedCallback(): void;
|
|
168
|
-
/** @protected */
|
|
169
|
-
disconnectedCallback(): void;
|
|
170
|
-
/**
|
|
171
|
-
* Applies the open state to the popover controller.
|
|
172
|
-
* @param previousOpen - Previous open state
|
|
173
|
-
* @private
|
|
174
|
-
*/
|
|
175
|
-
private _applyOpenToController;
|
|
176
|
-
/**
|
|
177
|
-
* Clears all pending timeouts.
|
|
178
|
-
* @private
|
|
179
|
-
*/
|
|
180
|
-
private _clearTimeouts;
|
|
181
|
-
/**
|
|
182
|
-
* Synchronizes accessibility attributes on the trigger.
|
|
183
|
-
* @private
|
|
184
|
-
*/
|
|
185
|
-
private _syncTriggerA11y;
|
|
186
|
-
/**
|
|
187
|
-
* Handles mouse enter on trigger for hover mode.
|
|
188
|
-
* @private
|
|
189
|
-
*/
|
|
190
|
-
private _onTriggerMouseEnter;
|
|
191
|
-
/**
|
|
192
|
-
* Handles mouse leave from trigger for hover mode.
|
|
193
|
-
* @private
|
|
194
|
-
*/
|
|
195
|
-
private _onTriggerMouseLeave;
|
|
196
|
-
/**
|
|
197
|
-
* Handles mouse enter on content for hover mode.
|
|
198
|
-
* @private
|
|
199
|
-
*/
|
|
200
|
-
private _onContentMouseEnter;
|
|
201
|
-
/**
|
|
202
|
-
* Handles mouse leave from content for hover mode.
|
|
203
|
-
* @private
|
|
204
|
-
*/
|
|
205
|
-
private _onContentMouseLeave;
|
|
206
|
-
/**
|
|
207
|
-
* Schedules closing for hover mode.
|
|
208
|
-
* @private
|
|
209
|
-
*/
|
|
210
|
-
private _scheduleClose;
|
|
211
|
-
/**
|
|
212
|
-
* Toggles the dropdown open/closed.
|
|
213
|
-
* @public
|
|
214
|
-
*/
|
|
215
|
-
toggle(): void;
|
|
216
|
-
/**
|
|
217
|
-
* Opens the dropdown.
|
|
218
|
-
* @public
|
|
219
|
-
*/
|
|
220
|
-
openDropdown(): void;
|
|
221
|
-
/**
|
|
222
|
-
* Closes the dropdown.
|
|
223
|
-
* @public
|
|
224
|
-
*/
|
|
225
|
-
close(): void;
|
|
226
|
-
/**
|
|
227
|
-
* Focuses the dropdown trigger.
|
|
228
|
-
* @public
|
|
229
|
-
*/
|
|
230
|
-
focusTrigger(): void;
|
|
231
|
-
/**
|
|
232
|
-
* Handles trigger click for click mode.
|
|
233
|
-
* @param e - Mouse event
|
|
234
|
-
* @private
|
|
235
|
-
*/
|
|
236
|
-
private _onTriggerClick;
|
|
237
|
-
/**
|
|
238
|
-
* Handles item clicks within the dropdown.
|
|
239
|
-
* @param e - Click event
|
|
240
|
-
* @private
|
|
241
|
-
*/
|
|
242
|
-
private _onItemClick;
|
|
243
|
-
/** Slotted `sky-dropdown-item` nodes bubble `dropdown-item-click` to this host. */
|
|
244
|
-
private _onDropdownItemClick;
|
|
245
|
-
private _resolveItemValue;
|
|
246
|
-
/**
|
|
247
|
-
* Activates a dropdown item.
|
|
248
|
-
* @param item - The item element to activate
|
|
249
|
-
* @private
|
|
250
|
-
*/
|
|
251
|
-
private _activateItem;
|
|
252
|
-
/** @protected */
|
|
253
|
-
render(): import("lit-html").TemplateResult<1>;
|
|
254
|
-
}
|
|
@@ -1,61 +0,0 @@
|
|
|
1
|
-
import{__decorate as t,__metadata as e}from"tslib";import{LitElement as o,css as i,html as r}from"lit";import{property as s,query as n,customElement as p}from"lit/decorators.js";import{PopoverController as d}from"../helper/controllers/popover-controller.js";let h=class extends o{constructor(){super(...arguments),this.trigger="click",this.placement="bottom",this.align="center",this.open=!1,this.value="",this.width="auto",this.closeOnClick=!0,this.closeOnEsc=!0,this.hoverOpenDelay=120,this.hoverCloseDelay=160,this.offset=8,this.flip=!0,this.viewportPadding=8,this.maxHeight="auto",this.animateType="fade",this._isHoveringTrigger=!1,this._isHoveringContent=!1,this._openTimeout=null,this._closeTimeout=null,this._ready=!1,this._syncingFromController=!1,this.dropdownPopover=new d(this,{getAnchor:()=>this._triggerEl,getPopover:()=>this._contentEl,cssVarLeft:"--sky-dd-left",cssVarTop:"--sky-dd-top",cssVarWidth:"--sky-dd-width",getPlacement:()=>this.placement,getAlign:()=>this.align,getGap:()=>this.offset,getPadding:()=>this.viewportPadding,getMatchAnchorWidth:()=>"trigger"===this.width,getFlip:()=>this.flip,getPreset:()=>this.animateType,getCloseOnEscape:()=>this.closeOnEsc,getCloseOnOutside:()=>!0,getRestoreFocusOnClose:()=>!0,maxWidthToViewport:!0,maxWidthMode:"cap",flipOrder:["bottom","top","right","left"],animateReposition:!0,repositionMs:160,sideAttr:"data-side",respectReducedMotion:!0,onOpenChange:t=>{const e=this.open!==t;e&&(this._syncingFromController=!0,this.open=t,this._syncingFromController=!1),e&&(this.dispatchEvent(new CustomEvent(t?"open":"close",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("open-change",{detail:{open:t},bubbles:!0,composed:!0}))),t||(this._isHoveringTrigger=!1,this._isHoveringContent=!1,this._clearTimeouts()),e&&this._syncTriggerA11y()}}),this._onTriggerMouseEnter=()=>{"hover"===this.trigger&&(this._isHoveringTrigger=!0,this._clearTimeouts(),this._openTimeout=window.setTimeout(()=>{this.open||this.openDropdown()},this.hoverOpenDelay))},this._onTriggerMouseLeave=()=>{"hover"===this.trigger&&(this._isHoveringTrigger=!1,this._isHoveringContent||this._scheduleClose())},this._onContentMouseEnter=()=>{"hover"===this.trigger&&(this._isHoveringContent=!0,this._clearTimeouts())},this._onContentMouseLeave=()=>{"hover"===this.trigger&&(this._isHoveringContent=!1,this._isHoveringTrigger||this._scheduleClose())},this._onTriggerClick=t=>{"click"===this.trigger&&(t.stopPropagation(),this.toggle())},this._onItemClick=t=>{const e=t.composedPath().find(t=>t instanceof HTMLElement&&("sky-dropdown-item"===t.tagName.toLowerCase()||"menuitem"===t.role));e&&this._activateItem(e)},this._onDropdownItemClick=t=>{const e=t.composedPath().find(t=>t instanceof HTMLElement&&"sky-dropdown-item"===t.tagName.toLowerCase());e&&this._activateItem(e)}}static{this.styles=i`
|
|
2
|
-
:host {
|
|
3
|
-
display: inline-block;
|
|
4
|
-
position: relative;
|
|
5
|
-
}
|
|
6
|
-
|
|
7
|
-
.dropdown-trigger {
|
|
8
|
-
cursor: pointer;
|
|
9
|
-
outline: none;
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
.dropdown-content {
|
|
13
|
-
position: fixed;
|
|
14
|
-
left: var(--sky-dd-left, 0px);
|
|
15
|
-
top: var(--sky-dd-top, 0px);
|
|
16
|
-
width: var(--dropdown-fixed-width, var(--sky-dd-width, max-content));
|
|
17
|
-
min-width: var(--dropdown-fixed-width, var(--sky-dd-width, auto));
|
|
18
|
-
max-width: var(--dropdown-fixed-width, none);
|
|
19
|
-
background: var(--sky-glass-primary);
|
|
20
|
-
border: var(--sky-border-primary);
|
|
21
|
-
border-radius: var(--sky-radius-secondary);
|
|
22
|
-
box-shadow: var(--sky-box-shadow-primary);
|
|
23
|
-
padding: 0.25rem;
|
|
24
|
-
box-sizing: border-box;
|
|
25
|
-
backdrop-filter: var(--sky-blur-primary) var(--sky-brightness-primary)
|
|
26
|
-
var(--sky-saturation-primary);
|
|
27
|
-
outline: none;
|
|
28
|
-
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
.dropdown-content-inner {
|
|
32
|
-
overflow-y: auto;
|
|
33
|
-
max-height: var(--dropdown-max-h, 320px);
|
|
34
|
-
}
|
|
35
|
-
`}_applyWidthProp(){"auto"!==this.width&&"trigger"!==this.width?this.style.setProperty("--dropdown-fixed-width",this.width):this.style.removeProperty("--dropdown-fixed-width")}firstUpdated(t){super.firstUpdated(t),this._ready=!0,this.style.setProperty("--dropdown-max-h",this.maxHeight),this._applyWidthProp(),this.dropdownPopover.refreshTargets(),this._syncTriggerA11y(),this._applyOpenToController(!1)}updated(t){if(super.updated(t),t.has("maxHeight")&&this.style.setProperty("--dropdown-max-h",this.maxHeight),t.has("width")&&this._applyWidthProp(),t.has("trigger")&&(this._isHoveringTrigger=!1,this._isHoveringContent=!1,this._clearTimeouts()),this._ready&&this.open&&(t.has("placement")||t.has("align")||t.has("offset")||t.has("viewportPadding")||t.has("flip")||t.has("width")||t.has("animateType"))&&this.dropdownPopover.refreshTargets(),t.has("open")){const e=Boolean(t.get("open"));this._applyOpenToController(e)}}connectedCallback(){super.connectedCallback(),this.addEventListener("dropdown-item-click",this._onDropdownItemClick)}disconnectedCallback(){this.removeEventListener("dropdown-item-click",this._onDropdownItemClick),super.disconnectedCallback(),this._clearTimeouts();try{this.dropdownPopover.open&&this.dropdownPopover.closePopover("api")}catch{}this._ready=!1}_applyOpenToController(t){this._ready&&(this._syncingFromController||(!this.open||this.dropdownPopover.open?this.open||!t&&!this.dropdownPopover.open||this.dropdownPopover.closePopover("api"):this.dropdownPopover.openPopover()))}_clearTimeouts(){this._openTimeout&&(clearTimeout(this._openTimeout),this._openTimeout=null),this._closeTimeout&&(clearTimeout(this._closeTimeout),this._closeTimeout=null)}_syncTriggerA11y(){const t=this._triggerEl;t&&(t.setAttribute("role","button"),t.setAttribute("aria-expanded",String(this.open)),t.setAttribute("aria-haspopup","menu"),this._contentEl?.id?t.setAttribute("aria-controls",this._contentEl.id):this._contentEl&&(this._contentEl.id||=`sky-dd-${crypto?.randomUUID?.()??Math.random().toString(16).slice(2)}`,t.setAttribute("aria-controls",this._contentEl.id)))}_scheduleClose(){this._clearTimeouts(),this._closeTimeout=window.setTimeout(()=>{!this.open||"hover"!==this.trigger||this._isHoveringTrigger||this._isHoveringContent||this.close()},this.hoverCloseDelay)}toggle(){this.dropdownPopover.open?this.dropdownPopover.closePopover("toggle"):this.dropdownPopover.openPopover()}openDropdown(){this.open=!0}close(){this.open=!1,this._clearTimeouts()}focusTrigger(){this._triggerEl&&this._triggerEl.focus()}_resolveItemValue(t){const e=t,o=e.value?.trim();if(o)return o;const i=t.getAttribute("value")?.trim();return i||(e.label??"").trim()}_activateItem(t){const e=this._resolveItemValue(t);if(t.disabled??!1)return;const o=(t.textContent??"").trim();this.value=e,this.dispatchEvent(new CustomEvent("dropdown-select",{detail:{value:e,text:o,item:t},bubbles:!0,composed:!0})),this.closeOnClick&&this.close()}render(){return r`
|
|
36
|
-
<div
|
|
37
|
-
class="dropdown-trigger"
|
|
38
|
-
part="trigger"
|
|
39
|
-
@click=${this._onTriggerClick}
|
|
40
|
-
@mouseenter=${this._onTriggerMouseEnter}
|
|
41
|
-
@mouseleave=${this._onTriggerMouseLeave}
|
|
42
|
-
>
|
|
43
|
-
<slot name="trigger" @slotchange=${this._syncTriggerA11y}></slot>
|
|
44
|
-
</div>
|
|
45
|
-
|
|
46
|
-
<div
|
|
47
|
-
class="dropdown-content"
|
|
48
|
-
part="content"
|
|
49
|
-
popover="manual"
|
|
50
|
-
role="menu"
|
|
51
|
-
@toggle=${this.dropdownPopover.onToggle}
|
|
52
|
-
@click=${this._onItemClick}
|
|
53
|
-
@mouseenter=${this._onContentMouseEnter}
|
|
54
|
-
@mouseleave=${this._onContentMouseLeave}
|
|
55
|
-
>
|
|
56
|
-
<div class="dropdown-content-inner" part="content-inner">
|
|
57
|
-
<slot></slot>
|
|
58
|
-
</div>
|
|
59
|
-
</div>
|
|
60
|
-
`}};t([s({type:String,reflect:!0}),e("design:type",String)],h.prototype,"trigger",void 0),t([s({type:String,reflect:!0}),e("design:type",String)],h.prototype,"placement",void 0),t([s({type:String,reflect:!0}),e("design:type",String)],h.prototype,"align",void 0),t([s({type:Boolean,reflect:!0}),e("design:type",Object)],h.prototype,"open",void 0),t([s({type:String}),e("design:type",Object)],h.prototype,"value",void 0),t([s({type:String}),e("design:type",String)],h.prototype,"width",void 0),t([s({type:Boolean}),e("design:type",Object)],h.prototype,"closeOnClick",void 0),t([s({type:Boolean}),e("design:type",Object)],h.prototype,"closeOnEsc",void 0),t([s({type:Number}),e("design:type",Object)],h.prototype,"hoverOpenDelay",void 0),t([s({type:Number}),e("design:type",Object)],h.prototype,"hoverCloseDelay",void 0),t([s({type:Number}),e("design:type",Object)],h.prototype,"offset",void 0),t([s({type:Boolean}),e("design:type",Object)],h.prototype,"flip",void 0),t([s({type:Number}),e("design:type",Object)],h.prototype,"viewportPadding",void 0),t([s({type:String}),e("design:type",Object)],h.prototype,"maxHeight",void 0),t([s({type:String}),e("design:type",String)],h.prototype,"animateType",void 0),t([n(".dropdown-trigger"),e("design:type",HTMLElement)],h.prototype,"_triggerEl",void 0),t([n(".dropdown-content"),e("design:type",HTMLElement)],h.prototype,"_contentEl",void 0),h=t([p("sky-dropdown")],h);export{h as SkyDropdown};
|
|
61
|
-
//# sourceMappingURL=sky-dropdown.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"sky-dropdown.js","sources":["../../src/sky-dropdown/sky-dropdown.ts"],"sourcesContent":[null],"names":["SkyDropdown","LitElement","constructor","this","trigger","placement","align","open","value","width","closeOnClick","closeOnEsc","hoverOpenDelay","hoverCloseDelay","offset","flip","viewportPadding","maxHeight","animateType","_isHoveringTrigger","_isHoveringContent","_openTimeout","_closeTimeout","_ready","_syncingFromController","dropdownPopover","PopoverController","getAnchor","_triggerEl","getPopover","_contentEl","cssVarLeft","cssVarTop","cssVarWidth","getPlacement","getAlign","getGap","getPadding","getMatchAnchorWidth","getFlip","getPreset","getCloseOnEscape","getCloseOnOutside","getRestoreFocusOnClose","maxWidthToViewport","maxWidthMode","flipOrder","animateReposition","repositionMs","sideAttr","respectReducedMotion","onOpenChange","openChanged","dispatchEvent","CustomEvent","bubbles","composed","detail","_clearTimeouts","_syncTriggerA11y","_onTriggerMouseEnter","window","setTimeout","openDropdown","_onTriggerMouseLeave","_scheduleClose","_onContentMouseEnter","_onContentMouseLeave","_onTriggerClick","e","stopPropagation","toggle","_onItemClick","item","composedPath","find","n","HTMLElement","tagName","toLowerCase","role","_activateItem","_onDropdownItemClick","styles","css","_applyWidthProp","style","setProperty","removeProperty","firstUpdated","_changed","super","refreshTargets","_applyOpenToController","updated","changed","has","prev","Boolean","get","connectedCallback","addEventListener","disconnectedCallback","removeEventListener","closePopover","previousOpen","openPopover","clearTimeout","t","setAttribute","String","id","crypto","randomUUID","Math","random","toString","slice","close","focusTrigger","focus","_resolveItemValue","withFields","fromProp","trim","fromAttr","getAttribute","label","disabled","text","textContent","render","html","onToggle","__decorate","property","type","reflect","prototype","Number","query","customElement"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from "./sky-dropdown-item";
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './sky-dropdown-item.js';
|
|
@@ -1,207 +0,0 @@
|
|
|
1
|
-
import { LitElement } from "lit";
|
|
2
|
-
export type SkyDropdownItemBadgeVariant = "neutral" | "success" | "warning" | "danger";
|
|
3
|
-
export type SkyDropdownItemType = "default" | "success" | "info" | "warning" | "danger" | "active";
|
|
4
|
-
export type SkyDropdownItemSize = "sm" | "md" | "lg";
|
|
5
|
-
export type SkyDropdownItemClickDetail = {
|
|
6
|
-
label: string;
|
|
7
|
-
type: SkyDropdownItemType;
|
|
8
|
-
selected: boolean;
|
|
9
|
-
};
|
|
10
|
-
/**
|
|
11
|
-
* @element sky-dropdown-item
|
|
12
|
-
*
|
|
13
|
-
* @summary Accessible dropdown/menu item with optional icons, description, shortcut, badge, and status variants.
|
|
14
|
-
*
|
|
15
|
-
* @status stable
|
|
16
|
-
* @since 1.0.0
|
|
17
|
-
*
|
|
18
|
-
* @documentation https://library.sky-ui.com/components/dropdown
|
|
19
|
-
* @dependency sky-icon
|
|
20
|
-
*
|
|
21
|
-
* @slot - Default slot for the item label (fallbacks to `label` prop).
|
|
22
|
-
* @slot prefix - Leading icon/content area.
|
|
23
|
-
* @slot description - Secondary line; overrides `description` prop when provided.
|
|
24
|
-
* @slot suffix - Trailing icon/content area (renders near badge/shortcut/meta).
|
|
25
|
-
*
|
|
26
|
-
* @csspart root - The clickable root button-like container.
|
|
27
|
-
* @csspart prefix - Wrapper for the leading icon/content.
|
|
28
|
-
* @csspart content - Wrapper for the text content column.
|
|
29
|
-
* @csspart label - The primary text line.
|
|
30
|
-
* @csspart description - The secondary text line.
|
|
31
|
-
* @csspart right - Trailing container that holds meta/shortcut/badge/suffix.
|
|
32
|
-
* @csspart meta - Trailing meta text.
|
|
33
|
-
* @csspart shortcut - Trailing keyboard shortcut pill.
|
|
34
|
-
* @csspart badge - Trailing badge.
|
|
35
|
-
* @csspart suffix - Wrapper for the trailing icon/content.
|
|
36
|
-
*
|
|
37
|
-
* @cssprop --di-gap - Gap between prefix/content/suffix (default varies by size).
|
|
38
|
-
* @cssprop --di-pad-y - Vertical padding for the root (default varies by size).
|
|
39
|
-
* @cssprop --di-pad-x - Horizontal padding for the root (default `12px`).
|
|
40
|
-
* @cssprop --di-fs - Base font size (default varies by size).
|
|
41
|
-
* @cssprop --di-line - Base line-height (default varies by size).
|
|
42
|
-
* @cssprop --di-radius - Root border radius (default `8px`).
|
|
43
|
-
*
|
|
44
|
-
* @fires {CustomEvent<SkyDropdownItemClickDetail>} dropdown-item-click - Emitted when the item is activated; **detail.selected** matches the **selected** property at emit time (activation does not change **selected**; parent or v-model owns updates).
|
|
45
|
-
*
|
|
46
|
-
* @uiVModel selected dropdown-item-click
|
|
47
|
-
*
|
|
48
|
-
* @property {string} iconL - Icon name for leading icon (`<sky-icon>`).
|
|
49
|
-
* @property {string} iconR - Icon name for trailing icon (`<sky-icon>`).
|
|
50
|
-
* @property {string} label - Primary text; falls back to default slot text.
|
|
51
|
-
* @property {string} description - Secondary text shown below label.
|
|
52
|
-
* @property {string} shortcut - Shortcut hint shown in trailing area.
|
|
53
|
-
* @property {string} badge - Small badge text shown in trailing area.
|
|
54
|
-
* @property {SkyDropdownItemBadgeVariant} badgeVariant - Badge color variant.
|
|
55
|
-
* @property {string} metaRight - Small trailing meta text before shortcut/badge.
|
|
56
|
-
* @property {boolean} disabled - Non-interactive state.
|
|
57
|
-
* @property {boolean} selected - Selected/active visual state.
|
|
58
|
-
* @property {SkyDropdownItemType} type - Visual variant.
|
|
59
|
-
* @property {SkyDropdownItemSize} size - Density preset.
|
|
60
|
-
* @method getLabel Returns the current effective label text.
|
|
61
|
-
* @method activate Programmatically activates the item.
|
|
62
|
-
* @method focusItem Focuses the item root for keyboard navigation.
|
|
63
|
-
*
|
|
64
|
-
* @Behavior
|
|
65
|
-
* - Acts as a menu item within dropdowns, context menus, and navigation lists
|
|
66
|
-
* - Supports rich content with icons, descriptions, shortcuts, and badges
|
|
67
|
-
* - Provides multiple visual variants for different use cases
|
|
68
|
-
* - Manages slot content detection for optimal rendering
|
|
69
|
-
* - Emits **dropdown-item-click** with contextual data (including **detail.selected** for wrapper sync)
|
|
70
|
-
* - **default**: Standard appearance
|
|
71
|
-
* - **success**: Green accent for positive actions
|
|
72
|
-
* - **info**: Blue accent for informational items
|
|
73
|
-
* - **warning**: Orange accent for cautionary items
|
|
74
|
-
* - **danger**: Red accent for destructive actions
|
|
75
|
-
* - **active**: Primary accent for active/selected items
|
|
76
|
-
* - **sm**: Compact for dense interfaces
|
|
77
|
-
* - **md**: Standard size (default)
|
|
78
|
-
* - **lg**: Larger for touch interfaces
|
|
79
|
-
* - Renders as `role="menuitem"` for proper ARIA semantics
|
|
80
|
-
* - Keyboard activation via Enter/Space keys
|
|
81
|
-
* - `tabindex="0"` when enabled, `-1` when disabled
|
|
82
|
-
* - `aria-disabled="true"` for disabled state
|
|
83
|
-
*
|
|
84
|
-
* @example
|
|
85
|
-
* ```html
|
|
86
|
-
* <sky-dropdown-item>
|
|
87
|
-
* <span slot="prefix">🔔</span>
|
|
88
|
-
* <span>Notifications</span>
|
|
89
|
-
* <span slot="description">3 unread messages</span>
|
|
90
|
-
* <span slot="suffix">⌘N</span>
|
|
91
|
-
* </sky-dropdown-item>
|
|
92
|
-
* ```
|
|
93
|
-
* ```vue
|
|
94
|
-
* <template>
|
|
95
|
-
* <sky-dropdown-item type="info" badge="3" badge-variant="warning">
|
|
96
|
-
* <span slot="prefix">🔔</span>
|
|
97
|
-
* <span>Notifications</span>
|
|
98
|
-
* <span slot="description">3 unread messages</span>
|
|
99
|
-
* <span slot="suffix">⌘N</span>
|
|
100
|
-
* </sky-dropdown-item>
|
|
101
|
-
* </template>
|
|
102
|
-
* ```
|
|
103
|
-
* ```jsx
|
|
104
|
-
* export default function Demo() {
|
|
105
|
-
* return (
|
|
106
|
-
* <sky-dropdown-item type="info" badge="3" badge-variant="warning">
|
|
107
|
-
* <span slot="prefix">🔔</span>
|
|
108
|
-
* <span>Notifications</span>
|
|
109
|
-
* <span slot="description">3 unread messages</span>
|
|
110
|
-
* <span slot="suffix">⌘N</span>
|
|
111
|
-
* </sky-dropdown-item>
|
|
112
|
-
* );
|
|
113
|
-
* }
|
|
114
|
-
* ```
|
|
115
|
-
*/
|
|
116
|
-
export declare class SkyDropdownItem extends LitElement {
|
|
117
|
-
static dependencies: Record<string, CustomElementConstructor>;
|
|
118
|
-
/** @public Icon name for leading icon. */
|
|
119
|
-
iconL: string;
|
|
120
|
-
/** @public Icon name for trailing icon. */
|
|
121
|
-
iconR: string;
|
|
122
|
-
/** @public Primary text; if omitted, uses default slot text. */
|
|
123
|
-
label: string;
|
|
124
|
-
/** @public Stable id emitted by parent `sky-dropdown` on `dropdown-select`. */
|
|
125
|
-
value: string;
|
|
126
|
-
/** @public Secondary text; overridden by `description` slot. */
|
|
127
|
-
description: string;
|
|
128
|
-
/** @public Keyboard shortcut hint shown on the right. */
|
|
129
|
-
shortcut: string;
|
|
130
|
-
/** @public Small pill badge text shown on the right. */
|
|
131
|
-
badge: string;
|
|
132
|
-
/** @public Badge color variant. */
|
|
133
|
-
badgeVariant: SkyDropdownItemBadgeVariant;
|
|
134
|
-
/** @public Small meta text shown before the shortcut/badge. */
|
|
135
|
-
metaRight: string;
|
|
136
|
-
/** @public Non-interactive state; applies `aria-disabled="true"`. */
|
|
137
|
-
disabled: boolean;
|
|
138
|
-
/** @public Selected/active visual state. */
|
|
139
|
-
selected: boolean;
|
|
140
|
-
/** @public Visual variant. */
|
|
141
|
-
type: SkyDropdownItemType;
|
|
142
|
-
/** @public Density preset. */
|
|
143
|
-
size: SkyDropdownItemSize;
|
|
144
|
-
/** @private Internal: do we actually have slotted prefix content? */
|
|
145
|
-
private hasPrefix;
|
|
146
|
-
/** @private Internal: do we actually have slotted suffix content? */
|
|
147
|
-
private hasSuffix;
|
|
148
|
-
/** @private Internal: do we actually have slotted description content? */
|
|
149
|
-
private hasDescSlot;
|
|
150
|
-
static styles: import("lit").CSSResult;
|
|
151
|
-
/** @protected */
|
|
152
|
-
connectedCallback(): void;
|
|
153
|
-
/**
|
|
154
|
-
* Computes the effective label from prop or slot content.
|
|
155
|
-
* @returns Computed label string
|
|
156
|
-
* @private
|
|
157
|
-
*/
|
|
158
|
-
private _computedLabel;
|
|
159
|
-
/**
|
|
160
|
-
* Handles item activation via click or keyboard.
|
|
161
|
-
* @param e - Activation event
|
|
162
|
-
* @private
|
|
163
|
-
*/
|
|
164
|
-
private _onActivate;
|
|
165
|
-
/**
|
|
166
|
-
* Handles keyboard activation (Enter/Space).
|
|
167
|
-
* @param e - Keyboard event
|
|
168
|
-
* @private
|
|
169
|
-
*/
|
|
170
|
-
private _onKeyDown;
|
|
171
|
-
/**
|
|
172
|
-
* Slot change handler for prefix content.
|
|
173
|
-
* @param e - Slot change event
|
|
174
|
-
* @private
|
|
175
|
-
*/
|
|
176
|
-
private _onPrefixChange;
|
|
177
|
-
/**
|
|
178
|
-
* Slot change handler for suffix content.
|
|
179
|
-
* @param e - Slot change event
|
|
180
|
-
* @private
|
|
181
|
-
*/
|
|
182
|
-
private _onSuffixChange;
|
|
183
|
-
/**
|
|
184
|
-
* Slot change handler for description content.
|
|
185
|
-
* @param e - Slot change event
|
|
186
|
-
* @private
|
|
187
|
-
*/
|
|
188
|
-
private _onDescChange;
|
|
189
|
-
/**
|
|
190
|
-
* Gets the current computed label.
|
|
191
|
-
* @returns Current label
|
|
192
|
-
* @public
|
|
193
|
-
*/
|
|
194
|
-
getLabel(): string;
|
|
195
|
-
/**
|
|
196
|
-
* Programmatically activates the item (triggers click event).
|
|
197
|
-
* @public
|
|
198
|
-
*/
|
|
199
|
-
activate(): void;
|
|
200
|
-
/**
|
|
201
|
-
* Focuses the item for keyboard navigation.
|
|
202
|
-
* @public
|
|
203
|
-
*/
|
|
204
|
-
focusItem(): void;
|
|
205
|
-
/** @protected */
|
|
206
|
-
render(): import("lit-html").TemplateResult<1>;
|
|
207
|
-
}
|