@sky.ui/core 0.0.8 → 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/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 +24 -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,167 +0,0 @@
|
|
|
1
|
-
import{__decorate as t,__metadata as e}from"tslib";import{LitElement as i,css as s,html as r}from"lit";import{property as a,state as n,customElement as o}from"lit/decorators.js";import{when as l}from"lit/directives/when.js";import{repeat as d}from"lit/directives/repeat.js";import{styleMap as h}from"lit/directives/style-map.js";import{resolveColor as p,resolveTextColorForToken as c}from"../helper/utils/color-resolver.js";import{resolveRadius as m}from"../helper/utils/size-resolver.js";import{SkyIcon as u}from"../sky-icon/sky-icon.js";const y={xs:28,sm:36,md:44,lg:52,xl:60};let b=class extends i{constructor(){super(...arguments),this.states=[],this.value="",this.disabled=!1,this.size="sm",this.radius="full",this.showCurrentLabelOnly=!1,this.color="primary",this._labelWidths=new Map,this._ready=!1,this._containerWidth=0,this._itemsCache=[],this.#t=!1,this._labelAnimations=new Map,this._updateScheduled=!1,this._visibilityRetryAttempts=0,this.#e=()=>{this._windowResizeTimeout&&window.clearTimeout(this._windowResizeTimeout),this._windowResizeTimeout=window.setTimeout(()=>{this._windowResizeTimeout=void 0,this.#i()},50)},this.#s=t=>{const e=t.target.closest?.(".btn");if(!e||this.disabled)return;const i=parseInt(e.getAttribute("data-index")??"-1",10);if(i<0)return;const s=this.items[i];s?.disabled||(this.index=i)},this.#r=t=>{if(this.disabled)return;const e=this.items;if(!e.length)return;let i=this.index;switch(t.key){case"ArrowRight":case"ArrowDown":case" ":case"Enter":i=this.#a(this.index,1);break;case"ArrowLeft":case"ArrowUp":i=this.#a(this.index,-1);break;case"Home":i=e.findIndex(t=>!t.disabled),i<0&&(i=this.index);break;case"End":i=[...e].map((t,e)=>({it:t,idx:e})).reverse().find(t=>!t.it.disabled)?.idx??this.index;break;default:return}t.preventDefault(),i!==this.index&&(this.index=i),this.updateComplete.then(()=>{const t=this.renderRoot.querySelectorAll(".btn");t[i]?.focus()})}}static{this.dependencies={"sky-icon":u}}#n;#o;#l;#t;static{this.styles=s`
|
|
2
|
-
:host {
|
|
3
|
-
display: inline-block;
|
|
4
|
-
--anim-ms: 220ms;
|
|
5
|
-
--anim-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
.wrap {
|
|
9
|
-
position: relative;
|
|
10
|
-
display: inline-flex;
|
|
11
|
-
gap: var(--gap);
|
|
12
|
-
padding: var(--pad);
|
|
13
|
-
border-radius: var(--tab-radius, var(--sky-radius-full));
|
|
14
|
-
align-items: center;
|
|
15
|
-
background: var(--sky-glass-primary);
|
|
16
|
-
border: var(--sky-border-primary);
|
|
17
|
-
box-shadow: var(--sky-box-shadow-inset);
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
.wrap::before{
|
|
21
|
-
content: "";
|
|
22
|
-
position: absolute;
|
|
23
|
-
inset: 0;
|
|
24
|
-
border-radius: inherit;
|
|
25
|
-
pointer-events: none;
|
|
26
|
-
backdrop-filter: var(--sky-blur-primary) var(--sky-brightness-primary) var(--sky-saturation-primary);
|
|
27
|
-
z-index: -1;
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
.thumb {
|
|
31
|
-
position: absolute;
|
|
32
|
-
border-radius: var(--tab-radius, var(--sky-radius-full));
|
|
33
|
-
background: var(--sky-tab-color);
|
|
34
|
-
pointer-events: none;
|
|
35
|
-
z-index: 0;
|
|
36
|
-
opacity: 0; /* Start hidden, WAAPI will show it */
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
/* Fallback for reduced motion */
|
|
40
|
-
@media (prefers-reduced-motion: reduce) {
|
|
41
|
-
.wrap[data-ready="true"] .thumb {
|
|
42
|
-
transition:
|
|
43
|
-
transform var(--anim-ms) var(--anim-ease),
|
|
44
|
-
width var(--anim-ms) var(--anim-ease),
|
|
45
|
-
height var(--anim-ms) var(--anim-ease);
|
|
46
|
-
opacity: 1;
|
|
47
|
-
}
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
.btn {
|
|
51
|
-
position: relative;
|
|
52
|
-
z-index: 1;
|
|
53
|
-
appearance: none;
|
|
54
|
-
border: 0;
|
|
55
|
-
background: transparent;
|
|
56
|
-
border-radius: var(--tab-radius, var(--sky-radius-full));
|
|
57
|
-
font: inherit;
|
|
58
|
-
font-weight: var(--sky-font-weight-medium, 500);
|
|
59
|
-
color: var(--sky-text-primary, currentColor);
|
|
60
|
-
cursor: pointer;
|
|
61
|
-
display: inline-flex;
|
|
62
|
-
align-items: center;
|
|
63
|
-
justify-content: center;
|
|
64
|
-
gap: 6px;
|
|
65
|
-
transition: color var(--anim-ms) var(--anim-ease);
|
|
66
|
-
outline: none;
|
|
67
|
-
padding: var(--item-pad);
|
|
68
|
-
min-width: var(--item-min-w);
|
|
69
|
-
min-height: var(--item-min-h);
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
.btn[aria-checked="true"] {
|
|
73
|
-
color: var(--sky-tab-text-color-active, currentColor);
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
.btn:focus-visible {
|
|
77
|
-
box-shadow: 0 0 0 2px var(--sky-tab-color, currentColor);
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
.btn[disabled] {
|
|
81
|
-
cursor: not-allowed;
|
|
82
|
-
opacity: 0.6;
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
:host([disabled]) .btn {
|
|
86
|
-
cursor: not-allowed;
|
|
87
|
-
opacity: 0.6;
|
|
88
|
-
}
|
|
89
|
-
:host([disabled]) .wrap {
|
|
90
|
-
opacity: 0.8;
|
|
91
|
-
}
|
|
92
|
-
|
|
93
|
-
sky-icon {
|
|
94
|
-
display: inline-block;
|
|
95
|
-
width: 1em;
|
|
96
|
-
height: 1em;
|
|
97
|
-
}
|
|
98
|
-
|
|
99
|
-
.label {
|
|
100
|
-
display: inline-block;
|
|
101
|
-
overflow: hidden;
|
|
102
|
-
white-space: nowrap;
|
|
103
|
-
opacity: 1;
|
|
104
|
-
max-width: none;
|
|
105
|
-
/* No CSS transition - WAAPI handles it */
|
|
106
|
-
}
|
|
107
|
-
|
|
108
|
-
/* Fallback for reduced motion */
|
|
109
|
-
@media (prefers-reduced-motion: reduce) {
|
|
110
|
-
.wrap[data-ready="true"] .label {
|
|
111
|
-
transition:
|
|
112
|
-
max-width var(--anim-ms) var(--anim-ease),
|
|
113
|
-
opacity var(--anim-ms) var(--anim-ease);
|
|
114
|
-
}
|
|
115
|
-
}
|
|
116
|
-
|
|
117
|
-
.label[data-hidden="true"] {
|
|
118
|
-
opacity: 0;
|
|
119
|
-
max-width: 0;
|
|
120
|
-
}
|
|
121
|
-
`}connectedCallback(){super.connectedCallback(),this.#d(),this._itemsCache=(this.states??[]).map(t=>"string"==typeof t?{value:t,label:t}:{...t}),this.#h();const t=document.createElement("canvas");this._canvasContext=t.getContext("2d")||void 0,this.#n=new ResizeObserver(()=>{this._resizeTimeout&&window.clearTimeout(this._resizeTimeout),this._resizeTimeout=window.setTimeout(()=>{this._containerWidth=this.offsetWidth,this.#i()},50)}),this.#o=new IntersectionObserver(t=>{t.forEach(()=>{this.#t&&(this.#i(),this.#p())})},{threshold:[0,.01,.1,1]}),requestAnimationFrame(()=>{this.#n&&this.#n.observe(this),this.#o&&this.#o.observe(this),this.#c(),this.#i()}),window.addEventListener("resize",this.#e,{passive:!0})}disconnectedCallback(){super.disconnectedCallback(),this.#n?.disconnect(),this.#o?.disconnect(),this.#l?.disconnect(),this.#m(),this._thumbAnimation&&this._thumbAnimation.cancel(),this._labelAnimations.forEach(t=>t.cancel()),this._labelAnimations.clear(),this._resizeTimeout&&window.clearTimeout(this._resizeTimeout),this._windowResizeTimeout&&window.clearTimeout(this._windowResizeTimeout),window.removeEventListener("resize",this.#e)}#u(){const t=this.#y,e=p(t),i=c(t);this.style.setProperty("--sky-tab-color",e),this.style.setProperty("--sky-tab-text-color-active",i)}firstUpdated(t){this.#u(),requestAnimationFrame(()=>{this.#b(),this._ready=!0,this.#t=!0,this.updateComplete.then(()=>{this.#i()})})}willUpdate(t){this._itemsCache=(this.states??[]).map(t=>"string"==typeof t?{value:t,label:t}:{...t}),(t.has("size")||t.has("radius"))&&(this.#d(),t.has("size")&&this.#t&&this.#i()),t.has("states")&&(this.#h(),this.#t&&this.#i())}updated(t){(t.has("color")||t.has("value")||t.has("states"))&&this.#u(),(t.has("states")||t.has("showCurrentLabelOnly"))&&this.#i(),t.has("value")&&this.#t&&this.#i()}#e;#s;#i(){this._updateScheduled||(this._updateScheduled=!0,requestAnimationFrame(()=>{this.#v(),this._updateScheduled=!1}))}get items(){return this._itemsCache}get#y(){const t=this.items[this.index];return(t?.color??this.color)||"primary"}#h(){const t=this.items.map(t=>t.value);t.length?t.includes(this.value)||(this.value=t[0]):this.value=""}#d(){const t={xs:{pad:"2px",gap:"2px",font:"11px",itemPad:"4px 8px",minW:"28px",minH:"22px"},sm:{pad:"3px",gap:"3px",font:"12px",itemPad:"6px 10px",minW:"36px",minH:"26px"},md:{pad:"4px",gap:"4px",font:"13px",itemPad:"8px 14px",minW:"44px",minH:"32px"},lg:{pad:"5px",gap:"5px",font:"14px",itemPad:"10px 16px",minW:"52px",minH:"38px"},xl:{pad:"6px",gap:"6px",font:"15px",itemPad:"12px 20px",minW:"60px",minH:"44px"}},e=t[this.size]??t.md,i=this.style;i.setProperty("--pad",e.pad),i.setProperty("--gap",e.gap),i.setProperty("--font-size",e.font),i.setProperty("--item-pad",e.itemPad),i.setProperty("--item-min-w",e.minW),i.setProperty("--item-min-h",e.minH),i.setProperty("--tab-radius",m(this.radius))}get index(){return Math.max(0,this.items.findIndex(t=>t.value===this.value))}set index(t){const e=this.items;if(!e.length)return;const i=Math.max(0,Math.min(e.length-1,t)),s=e[i].value;s!==this.value&&(this.value=s,this.dispatchEvent(new CustomEvent("state-change",{detail:{value:this.value,index:i,item:e[i]},bubbles:!0,composed:!0})))}#b(){const t=this.items,e=new Map,i=this.renderRoot.querySelector(".wrap"),s=i?window.getComputedStyle(i):null,r=this._canvasContext;s&&r&&(r.font=`${s.fontWeight} ${s.fontSize} ${s.fontFamily}`);const a=parseFloat(this.style.getPropertyValue("--font-size")||"12");for(let i=0;i<t.length;i++){const n=t[i];if(n.label)if(r&&s){const t=r.measureText(n.label).width;e.set(i,Math.ceil(t))}else e.set(i,Math.ceil(n.label.length*a*.6));else e.set(i,0)}this._labelWidths=e}#c(){this.#l?.disconnect(),this.#l=new MutationObserver(()=>{this.#t&&(this.#i(),this.#p())});let t=this.parentElement;for(let e=0;t&&e<8;e++)this.#l.observe(t,{attributes:!0,attributeFilter:["class","style","aria-hidden","hidden","open"]}),t=t.parentElement}#m(){void 0!==this._visibilityRetryTimer&&(window.clearTimeout(this._visibilityRetryTimer),this._visibilityRetryTimer=void 0),this._visibilityRetryAttempts=0}#p(){if(void 0!==this._visibilityRetryTimer)return;const t=()=>{if(this._visibilityRetryTimer=void 0,!this.isConnected)return;this.#v();const e=this.renderRoot.querySelector(".thumb"),i=!e||parseFloat(e.style.opacity||"0")<.01;if(this._ready&&this.items.length>0&&i&&this._visibilityRetryAttempts<30)return this._visibilityRetryAttempts++,void(this._visibilityRetryTimer=window.setTimeout(t,100));i||(this._visibilityRetryAttempts=0)};this._visibilityRetryTimer=window.setTimeout(t,50)}#x(){if(!this.isConnected)return!1;let t=this;for(;t&&t!==document.documentElement;){const e=window.getComputedStyle(t);if("none"===e.display||"hidden"===e.visibility)return!1;t=t.parentElement}const e=this.closest("sky-dialog, dialog");return!(e&&!e.hasAttribute("open"))}#v(){const t=this.renderRoot.querySelector(".wrap"),e=this.renderRoot.querySelectorAll(".btn")[this.index],i=t?.querySelector(".thumb");if(!(t&&e&&i&&this._ready))return void(this.#t&&!this._updateScheduled&&requestAnimationFrame(()=>this.#v()));if(!this.#x())return i.style.opacity="0",void this.#p();const s=t.getBoundingClientRect(),r=e.getBoundingClientRect();if(0===s.width||0===s.height||0===r.width||0===r.height)return void(this.#t&&this.#p());const a=getComputedStyle(t),n=parseFloat(a.paddingLeft||"0"),o=parseFloat(a.paddingTop||"0"),l=t.clientWidth||s.width,d=t.clientHeight||s.height,h=l?s.width/l:1,p=d?s.height/d:1,c=(r.left-s.left-n*h)/(h||1),m=(r.top-s.top-o*p)/(p||1),u=Math.max(1,r.width/(h||1)),y=Math.max(1,r.height/(p||1));if(window.matchMedia("(prefers-reduced-motion: reduce)").matches)return i.style.transform=`translate(${c-1}px, ${m-1}px)`,i.style.width=`${u}px`,i.style.height=`${y}px`,void(i.style.opacity="1");const b=[{transform:i.style.transform||"translate(0, 0)",width:i.style.width||"0px",height:i.style.height||"0px",opacity:parseFloat(i.style.opacity||"0")},{transform:`translate(${c-1}px, ${m-1}px)`,width:`${u}px`,height:`${y}px`,opacity:1}];this._thumbAnimation&&this._thumbAnimation.cancel(),this._thumbAnimation=i.animate(b,{duration:220,easing:"cubic-bezier(0.2, 0.8, 0.2, 1)",fill:"forwards"}),i.style.transform=`translate(${c-1}px, ${m-1}px)`,i.style.width=`${u}px`,i.style.height=`${y}px`,i.style.opacity="1",this._visibilityRetryAttempts=0}refresh(){this.#i(),this.#p()}#a(t,e){const i=this.items,s=i.length;for(let r=1;r<=s;r++){const a=(t+e*r+s)%s;if(!i[a].disabled)return a}return t}#r;render(){const t=this.index,e=this.items;return r`
|
|
122
|
-
<div
|
|
123
|
-
class="wrap"
|
|
124
|
-
part="wrap"
|
|
125
|
-
role="radiogroup"
|
|
126
|
-
style=${h({fontSize:"var(--font-size)"})}
|
|
127
|
-
data-ready=${String(this._ready)}
|
|
128
|
-
@keydown=${this.#r}
|
|
129
|
-
@click=${this.#s}
|
|
130
|
-
>
|
|
131
|
-
<span class="thumb" part="thumb" aria-hidden="true"></span>
|
|
132
|
-
|
|
133
|
-
${d(e,t=>t.value,(e,i)=>{const s=i===t,a=!this.showCurrentLabelOnly||s,n=this.showCurrentLabelOnly&&!s,o=this._labelWidths.get(i)||0,d=e.icon?16:0,p=y[this.size]??44,c=Math.max(p,o+d+12+(e.icon&&e.label?6:0)),m=this.disabled||!!e.disabled;return r`
|
|
134
|
-
<button
|
|
135
|
-
class="btn"
|
|
136
|
-
part="btn"
|
|
137
|
-
role="radio"
|
|
138
|
-
aria-checked=${s}
|
|
139
|
-
aria-disabled=${m?"true":"false"}
|
|
140
|
-
tabindex=${s?"0":"-1"}
|
|
141
|
-
data-index=${i}
|
|
142
|
-
?disabled=${m}
|
|
143
|
-
style=${h({minWidth:`${c}px`})}
|
|
144
|
-
>
|
|
145
|
-
${l(e.icon,()=>r`
|
|
146
|
-
<sky-icon
|
|
147
|
-
icon=${e.icon}
|
|
148
|
-
part="icon"
|
|
149
|
-
aria-hidden="true"
|
|
150
|
-
></sky-icon>
|
|
151
|
-
`)}
|
|
152
|
-
${l(e.label,()=>r`
|
|
153
|
-
<span
|
|
154
|
-
class="label"
|
|
155
|
-
part="label"
|
|
156
|
-
data-hidden=${String(n)}
|
|
157
|
-
data-index=${i}
|
|
158
|
-
style=${h({maxWidth:a?"none":"0"})}
|
|
159
|
-
>
|
|
160
|
-
${e.label}
|
|
161
|
-
</span>
|
|
162
|
-
`)}
|
|
163
|
-
</button>
|
|
164
|
-
`})}
|
|
165
|
-
</div>
|
|
166
|
-
`}focusButton(){const t=this.renderRoot.querySelector('.btn[aria-checked="true"]');t?.focus()}};t([a({type:Array}),e("design:type",Array)],b.prototype,"states",void 0),t([a({type:String,reflect:!0}),e("design:type",String)],b.prototype,"value",void 0),t([a({type:Boolean,reflect:!0}),e("design:type",Object)],b.prototype,"disabled",void 0),t([a({type:String}),e("design:type",String)],b.prototype,"size",void 0),t([a({type:String}),e("design:type",String)],b.prototype,"radius",void 0),t([a({type:Boolean}),e("design:type",Object)],b.prototype,"showCurrentLabelOnly",void 0),t([a({type:String}),e("design:type",String)],b.prototype,"color",void 0),t([n(),e("design:type",Object)],b.prototype,"_labelWidths",void 0),t([n(),e("design:type",Object)],b.prototype,"_ready",void 0),t([n(),e("design:type",Object)],b.prototype,"_containerWidth",void 0),b=t([o("sky-tab-button")],b);export{b as SkyTabButton};
|
|
167
|
-
//# sourceMappingURL=sky-tab-button.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"sky-tab-button.js","sources":["../../src/sky-tab-button/sky-tab-button.ts"],"sourcesContent":[null],"names":["SIZE_MIN_WIDTHS","xs","sm","md","lg","xl","SkyTabButton","LitElement","constructor","this","states","value","disabled","size","radius","showCurrentLabelOnly","color","_labelWidths","Map","_ready","_containerWidth","_itemsCache","initialRenderComplete","_labelAnimations","_updateScheduled","_visibilityRetryAttempts","onResize","_windowResizeTimeout","window","clearTimeout","setTimeout","undefined","scheduleUpdate","onWrapClick","e","btn","target","closest","i","parseInt","getAttribute","item","items","index","onKeydown","length","next","key","findNextEnabled","findIndex","map","it","idx","reverse","find","x","preventDefault","updateComplete","then","btns","renderRoot","querySelectorAll","focus","dependencies","SkyIcon","ro","io","displayContextObserver","styles","css","connectedCallback","super","applyVars","s","label","ensureValue","canvas","document","createElement","_canvasContext","getContext","ResizeObserver","_resizeTimeout","offsetWidth","IntersectionObserver","entries","forEach","scheduleVisibilityRetry","threshold","requestAnimationFrame","observe","observeDisplayContext","addEventListener","passive","disconnectedCallback","disconnect","clearVisibilityRetry","_thumbAnimation","cancel","anim","clear","removeEventListener","applyEffectiveColor","token","effectiveColor","baseColor","resolveColor","activeTextColor","resolveTextColorForToken","style","setProperty","firstUpdated","_changed","calculateLabelWidths","willUpdate","changed","has","updated","positionThumb","selected","vals","includes","vars","pad","gap","font","itemPad","minW","minH","v","resolveRadius","Math","max","clamped","min","dispatchEvent","CustomEvent","detail","bubbles","composed","newWidths","wrap","querySelector","computedStyle","getComputedStyle","ctx","fontWeight","fontSize","fontFamily","fallbackFontSize","parseFloat","getPropertyValue","width","measureText","set","ceil","MutationObserver","node","parentElement","depth","attributes","attributeFilter","_visibilityRetryTimer","attempt","isConnected","thumb","thumbHidden","opacity","isElementVisible","documentElement","display","visibility","dialog","hasAttribute","active","wr","getBoundingClientRect","ar","height","cs","padL","paddingLeft","padT","paddingTop","localW","clientWidth","localH","clientHeight","scaleX","scaleY","xLocal","left","yLocal","top","thumbWidth","thumbHeight","matchMedia","matches","transform","keyframes","animate","duration","easing","fill","refresh","start","dir","n","step","j","render","html","styleMap","String","repeat","showLabel","labelHidden","labelWidth","get","iconWidth","icon","sizeMinW","approxButtonWidth","isDisabled","minWidth","when","maxWidth","focusButton","__decorate","property","type","Array","prototype","reflect","Boolean","state","customElement"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from "./sky-theme-switcher";
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './sky-theme-switcher.js';
|
|
@@ -1,92 +0,0 @@
|
|
|
1
|
-
import { LitElement } from "lit";
|
|
2
|
-
import { ThemePreference } from "../sky-theme-provider/sky-theme-provider";
|
|
3
|
-
type radiusSize = "none" | "sm" | "md" | "lg" | "full";
|
|
4
|
-
type Size = "xs" | "sm" | "md" | "lg" | "xl";
|
|
5
|
-
export type SkyThemeSwitcherChangeDetail = {
|
|
6
|
-
preference: ThemePreference;
|
|
7
|
-
mode: "light" | "dark";
|
|
8
|
-
};
|
|
9
|
-
/**
|
|
10
|
-
* `<sky-theme-switcher>` — A theme switching component that integrates with `<sky-theme-provider>`.
|
|
11
|
-
* Supports both button and switch styles for toggling between light, dark, and system themes.
|
|
12
|
-
*
|
|
13
|
-
* @element sky-theme-switcher
|
|
14
|
-
* @status stable
|
|
15
|
-
* @since 1.0.0
|
|
16
|
-
*
|
|
17
|
-
* @summary Theme switcher for light, dark, and system preferences.
|
|
18
|
-
*
|
|
19
|
-
* @documentation https://library.sky-ui.com/components/theme-switcher
|
|
20
|
-
* @dependency sky-tab-button
|
|
21
|
-
* @dependency sky-button
|
|
22
|
-
* @dependency sky-icon
|
|
23
|
-
*
|
|
24
|
-
* @slot - Default slot for additional content (not typically used).
|
|
25
|
-
* @slot icon - Optional slot to override the theme icon.
|
|
26
|
-
*
|
|
27
|
-
* @csspart container - The wrapper container for the theme switcher.
|
|
28
|
-
* @csspart button - The button element when type="button".
|
|
29
|
-
* @csspart switch - The tab button element when type="switch".
|
|
30
|
-
* @csspart icon - The icon element displaying current theme.
|
|
31
|
-
*
|
|
32
|
-
* @property {string} darkIcon - Iconify icon name for dark theme. Default: "ion:moon-outline"
|
|
33
|
-
* @property {string} lightIcon - Iconify icon name for light theme. Default: "ion:sunny-outline"
|
|
34
|
-
* @property {string} systemIcon - Iconify icon name for system/auto theme. Default: "ion:desktop"
|
|
35
|
-
* @property {"switch"|"button"} type - Display type: "switch" shows all three options as tabs, "button" cycles through options on click. Default: "button"
|
|
36
|
-
* @property {"none"|"sm"|"md"|"lg"|"full"} radius - Border radius for the component. Default: "md"
|
|
37
|
-
* @property {string} color - Button color when type="button". Default: "dark"
|
|
38
|
-
* @property {boolean} disabled - Whether the theme switcher is disabled. Default: false
|
|
39
|
-
* @property {"xs"|"sm"|"md"|"lg"|"xl"} size - Size of the component. Default: "md"
|
|
40
|
-
* @property {string} variant - Button variant when type="button". Default: "transparent"
|
|
41
|
-
*
|
|
42
|
-
* @fires {CustomEvent<SkyThemeSwitcherChangeDetail>} theme-change - Fired when theme preference changes.
|
|
43
|
-
* @method toggleTheme Cycles to the next theme preference.
|
|
44
|
-
*
|
|
45
|
-
* @Behavior
|
|
46
|
-
* - Consumes `sky-theme-provider` context for preference and mode.
|
|
47
|
-
* - Supports button (cycle) and segmented switch interaction styles.
|
|
48
|
-
* - Emits `theme-change` for host synchronization.
|
|
49
|
-
*
|
|
50
|
-
* @example
|
|
51
|
-
* ```html
|
|
52
|
-
* <sky-theme-switcher type="switch" size="md"></sky-theme-switcher>
|
|
53
|
-
* ```
|
|
54
|
-
* ```vue
|
|
55
|
-
* <template>
|
|
56
|
-
* <sky-theme-switcher type="switch" size="md" radius="full"></sky-theme-switcher>
|
|
57
|
-
* </template>
|
|
58
|
-
* ```
|
|
59
|
-
* ```jsx
|
|
60
|
-
* export default function Demo() {
|
|
61
|
-
* return <sky-theme-switcher type="switch" size="md" radius="full"></sky-theme-switcher>;
|
|
62
|
-
* }
|
|
63
|
-
* ```
|
|
64
|
-
*/
|
|
65
|
-
export declare class SkyThemeSwitcher extends LitElement {
|
|
66
|
-
static dependencies: Record<string, CustomElementConstructor>;
|
|
67
|
-
static styles: import("lit").CSSResult;
|
|
68
|
-
/** Display options */
|
|
69
|
-
darkIcon: string;
|
|
70
|
-
lightIcon: string;
|
|
71
|
-
systemIcon: string;
|
|
72
|
-
/** "switch" | "button" */
|
|
73
|
-
type: "switch" | "button";
|
|
74
|
-
radius: radiusSize;
|
|
75
|
-
color: string;
|
|
76
|
-
disabled: boolean;
|
|
77
|
-
size: Size;
|
|
78
|
-
variant: string;
|
|
79
|
-
iconOnly: boolean;
|
|
80
|
-
/** Live theme context from <sky-theme-provider>. */
|
|
81
|
-
private themeCtx?;
|
|
82
|
-
private get preference();
|
|
83
|
-
private get mode();
|
|
84
|
-
private iconForPref;
|
|
85
|
-
/** Cycle order + safe next */
|
|
86
|
-
private readonly cycle;
|
|
87
|
-
private nextPref;
|
|
88
|
-
private handleButtonClick;
|
|
89
|
-
toggleTheme(): void;
|
|
90
|
-
render(): import("lit-html").TemplateResult<1>;
|
|
91
|
-
}
|
|
92
|
-
export {};
|
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
import{__decorate as t,__metadata as e}from"tslib";import{LitElement as i,css as s,html as o}from"lit";import{property as n,customElement as r}from"lit/decorators.js";import{when as h}from"lit/directives/when.js";import{classMap as c}from"lit/directives/class-map.js";import{styleMap as l}from"lit/directives/style-map.js";import{consume as d}from"@lit/context";import{themeContext as a}from"../sky-theme-provider/sky-theme-provider.js";import{SkyTabButton as p}from"../sky-tab-button/sky-tab-button.js";import{SkyButton as y}from"../sky-button/sky-button.js";import{SkyIcon as m}from"../sky-icon/sky-icon.js";let u=class extends i{constructor(){super(...arguments),this.darkIcon="ion:moon-outline",this.lightIcon="ion:sunny-outline",this.systemIcon="ion:desktop",this.type="button",this.radius="md",this.color="dark",this.disabled=!1,this.size="md",this.variant="transparent",this.iconOnly=!0,this.cycle=["light","system","dark"],this.handleButtonClick=()=>{if(!this.themeCtx)return;const t=this.preference,e=this.nextPref(t);this.themeCtx.setPreference(e),this.requestUpdate(),this.dispatchEvent(new CustomEvent("theme-change",{detail:{preference:e,mode:this.themeCtx.mode??this.mode},bubbles:!0,composed:!0}))}}static{this.dependencies={"sky-tab-button":p,"sky-button":y,"sky-icon":m}}static{this.styles=s`
|
|
2
|
-
:host {
|
|
3
|
-
display: inline-block;
|
|
4
|
-
}
|
|
5
|
-
:host[disabled] {
|
|
6
|
-
pointer-events: none;
|
|
7
|
-
opacity: 0.6;
|
|
8
|
-
}
|
|
9
|
-
.wrap {
|
|
10
|
-
display: inline-flex;
|
|
11
|
-
align-items: center;
|
|
12
|
-
}
|
|
13
|
-
sky-icon{
|
|
14
|
-
display:inline-flex;
|
|
15
|
-
}
|
|
16
|
-
`}get preference(){return this.themeCtx?.preference??"system"}get mode(){return this.themeCtx?.mode??"light"}iconForPref(t){switch(t){case"system":return this.systemIcon;case"dark":return this.darkIcon;default:return this.lightIcon}}nextPref(t){const e=this.cycle.indexOf(t);return this.cycle[(e+1)%this.cycle.length]}toggleTheme(){this.handleButtonClick()}render(){const t=this.preference,e=this.iconForPref(t),i=!this.themeCtx,s=[{value:"light",...this.iconOnly?{}:{label:"Light"},icon:`${this.lightIcon}`},{value:"system",...this.iconOnly?{}:{label:"Auto"},icon:`${this.systemIcon}`},{value:"dark",...this.iconOnly?{}:{label:"Dark"},icon:`${this.darkIcon}`}],n=c({"theme-light":"light"===t,"theme-dark":"dark"===t,"theme-system":"system"===t});return o`
|
|
17
|
-
<div class=${n} style=${l({"--btn-radius":this.radius})}>
|
|
18
|
-
${h("switch"===this.type,()=>o`
|
|
19
|
-
<sky-tab-button
|
|
20
|
-
.value=${t}
|
|
21
|
-
.size=${this.size}
|
|
22
|
-
.states=${s}
|
|
23
|
-
?disabled=${i}
|
|
24
|
-
.radius=${this.radius}
|
|
25
|
-
@state-change=${t=>{this.themeCtx?.setPreference(t.detail.value),this.dispatchEvent(new CustomEvent("theme-change",{detail:{preference:t.detail.value,mode:this.themeCtx?.mode??this.mode},bubbles:!0,composed:!0}))}}
|
|
26
|
-
></sky-tab-button>
|
|
27
|
-
`,()=>o`
|
|
28
|
-
<sky-button
|
|
29
|
-
variant="${this.variant}"
|
|
30
|
-
radius="${this.radius}"
|
|
31
|
-
color="${this.color}"
|
|
32
|
-
.size=${this.size}
|
|
33
|
-
?disabled=${i}
|
|
34
|
-
aria-label=${`Theme: ${t}. Click to change.`}
|
|
35
|
-
title=${`Theme: ${t}. Click to change.`}
|
|
36
|
-
@click=${this.handleButtonClick}
|
|
37
|
-
>
|
|
38
|
-
<sky-icon .icon=${e}></sky-icon>
|
|
39
|
-
</sky-button>
|
|
40
|
-
`)}
|
|
41
|
-
</div>
|
|
42
|
-
`}};t([n({type:String}),e("design:type",Object)],u.prototype,"darkIcon",void 0),t([n({type:String}),e("design:type",Object)],u.prototype,"lightIcon",void 0),t([n({type:String}),e("design:type",Object)],u.prototype,"systemIcon",void 0),t([n({type:String}),e("design:type",String)],u.prototype,"type",void 0),t([n({type:String}),e("design:type",String)],u.prototype,"radius",void 0),t([n({type:String}),e("design:type",String)],u.prototype,"color",void 0),t([n({type:Boolean,reflect:!0}),e("design:type",Boolean)],u.prototype,"disabled",void 0),t([n({type:String}),e("design:type",String)],u.prototype,"size",void 0),t([n({type:String}),e("design:type",String)],u.prototype,"variant",void 0),t([n({type:Boolean}),e("design:type",Boolean)],u.prototype,"iconOnly",void 0),t([d({context:a,subscribe:!0}),e("design:type",Object)],u.prototype,"themeCtx",void 0),u=t([r("sky-theme-switcher")],u);export{u as SkyThemeSwitcher};
|
|
43
|
-
//# sourceMappingURL=sky-theme-switcher.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"sky-theme-switcher.js","sources":["../../src/sky-theme-switcher/sky-theme-switcher.ts"],"sourcesContent":[null],"names":["SkyThemeSwitcher","LitElement","constructor","this","darkIcon","lightIcon","systemIcon","type","radius","color","disabled","size","variant","iconOnly","cycle","handleButtonClick","themeCtx","curr","preference","next","nextPref","setPreference","requestUpdate","dispatchEvent","CustomEvent","detail","mode","bubbles","composed","dependencies","SkyTabButton","SkyButton","SkyIcon","styles","css","iconForPref","pref","i","indexOf","length","toggleTheme","render","icon","noProvider","states","value","label","wrapClasses","classMap","html","styleMap","when","e","__decorate","property","String","prototype","Boolean","reflect","consume","context","themeContext","subscribe","customElement"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from "./sky-tooltip";
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './sky-tooltip.js';
|
|
@@ -1,156 +0,0 @@
|
|
|
1
|
-
import { LitElement } from "lit";
|
|
2
|
-
/**
|
|
3
|
-
* Variants supported by <sky-tooltip>.
|
|
4
|
-
* Matches <sky-button> style system for consistency.
|
|
5
|
-
*/
|
|
6
|
-
export type Variant = "solid" | "faded" | "bordered" | "transparent" | "flat" | "ghost" | "relief" | "gradient" | "shadow";
|
|
7
|
-
type Place = "top" | "bottom" | "left" | "right" | "auto";
|
|
8
|
-
export type SkyTooltipPosition = Place;
|
|
9
|
-
export type SkyTooltipTrigger = "hover" | "click" | "both";
|
|
10
|
-
/**
|
|
11
|
-
* `<sky-tooltip>` — A flexible tooltip with auto-repositioning, variants, and gradient support.
|
|
12
|
-
* Supports multiple trigger methods, visual variants, and automatic positioning with fallback.
|
|
13
|
-
*
|
|
14
|
-
* @element sky-tooltip
|
|
15
|
-
* @status stable
|
|
16
|
-
* @since 1.0.0
|
|
17
|
-
*
|
|
18
|
-
* @summary Tooltip component with automatic positioning, variants, and slot content.
|
|
19
|
-
*
|
|
20
|
-
* @documentation https://library.sky-ui.com/components/tooltip
|
|
21
|
-
* @dependency popover-controller
|
|
22
|
-
*
|
|
23
|
-
* @slot - The trigger content to hover/click (e.g., a button or icon).
|
|
24
|
-
* @slot tooltip - Optional tooltip body; if omitted, the `label` property is used.
|
|
25
|
-
*
|
|
26
|
-
* @csspart trigger - Wrapper around the trigger (default slot).
|
|
27
|
-
* @csspart tooltip - Absolutely-positioned tooltip container (positioning shell).
|
|
28
|
-
* @csspart tooltip-inner - Tooltip bubble surface (padding, border, radius, animations).
|
|
29
|
-
* @csspart tooltip-content - Wrapper for the tooltip's slotted content/text.
|
|
30
|
-
*
|
|
31
|
-
* @property {SkyTooltipPosition} position - Preferred tooltip placement.
|
|
32
|
-
* @property {boolean} visible - Current tooltip visibility state.
|
|
33
|
-
* @property {SkyTooltipTrigger} trigger - Visibility trigger behavior.
|
|
34
|
-
* @property {string} label - Fallback tooltip text.
|
|
35
|
-
* @property {Variant} variant - Tooltip visual variant.
|
|
36
|
-
* @property {string} color - Tooltip color token or CSS color.
|
|
37
|
-
* @property {string} colors - Gradient descriptor used by `gradient` variant.
|
|
38
|
-
* @property {boolean} noAutoTrigger - Disables hover/click auto triggers.
|
|
39
|
-
* @property {number} delay - Hover dwell time (ms) before open (native `title`–like). `0` = immediate.
|
|
40
|
-
* @property {number} closeDelay - Ms after pointer leaves before close starts (hover path only). `0` = immediate.
|
|
41
|
-
* @property {boolean} showArrow - Whether the placement arrow is drawn.
|
|
42
|
-
* @property {boolean} interactive - Allows pointer interaction with tooltip content.
|
|
43
|
-
* @method show Shows tooltip programmatically.
|
|
44
|
-
* @method hide Hides tooltip programmatically.
|
|
45
|
-
* @method toggle Toggles tooltip visibility programmatically.
|
|
46
|
-
*
|
|
47
|
-
* @Behavior
|
|
48
|
-
* - Supports programmatic `show`, `hide`, and `toggle`.
|
|
49
|
-
* - Repositions through `PopoverController` when anchors or placement change.
|
|
50
|
-
* - Keeps arrow alignment synchronized with resolved placement.
|
|
51
|
-
*
|
|
52
|
-
* @example
|
|
53
|
-
* ```html
|
|
54
|
-
* <sky-tooltip label="View details" position="top" trigger="hover">
|
|
55
|
-
* <button>Hover me</button>
|
|
56
|
-
* </sky-tooltip>
|
|
57
|
-
* ```
|
|
58
|
-
* ```vue
|
|
59
|
-
* <template>
|
|
60
|
-
* <sky-tooltip trigger="click" interactive variant="gradient" colors="linear@120deg: primary, #0af 70%">
|
|
61
|
-
* <button>Info</button>
|
|
62
|
-
* <div slot="tooltip">Interactive tooltip content</div>
|
|
63
|
-
* </sky-tooltip>
|
|
64
|
-
* </template>
|
|
65
|
-
* ```
|
|
66
|
-
* ```jsx
|
|
67
|
-
* export default function Demo() {
|
|
68
|
-
* return <sky-tooltip trigger="click" interactive label="Pinned tooltip"><button>Click me</button></sky-tooltip>;
|
|
69
|
-
* }
|
|
70
|
-
* ```
|
|
71
|
-
*/
|
|
72
|
-
export declare class SkyTooltip extends LitElement {
|
|
73
|
-
/** Preferred tooltip position relative to trigger. Auto-fallback if not enough space. */
|
|
74
|
-
position: Place;
|
|
75
|
-
/** Whether tooltip is currently visible (controlled internally by triggers). */
|
|
76
|
-
visible: boolean;
|
|
77
|
-
/** Trigger type: "hover", "click", or "both". */
|
|
78
|
-
trigger: SkyTooltipTrigger;
|
|
79
|
-
/** Tooltip text (if no slot content is provided). */
|
|
80
|
-
label: string;
|
|
81
|
-
/** Visual variant (mirrors <sky-button>). */
|
|
82
|
-
variant: Variant;
|
|
83
|
-
/** Base color token or custom CSS color. */
|
|
84
|
-
color: string;
|
|
85
|
-
/**
|
|
86
|
-
* Gradient specification.
|
|
87
|
-
* Format: "<kind>@<args>: stop1, stop2, stop3"
|
|
88
|
-
* Example: "linear@120deg: primary, #0af 70%"
|
|
89
|
-
*/
|
|
90
|
-
colors: string;
|
|
91
|
-
noAutoTrigger: boolean;
|
|
92
|
-
/**
|
|
93
|
-
* How long the pointer must stay on the trigger before the tooltip opens (hover / `both`),
|
|
94
|
-
* similar to the browser’s native `title` tooltip. Moving away before this time elapses
|
|
95
|
-
* cancels the open. Default ~0ms. Set to `0` for an immediate open.
|
|
96
|
-
* Does not apply to `trigger="click"` or programmatic `show()` / `toggle()` from click.
|
|
97
|
-
*/
|
|
98
|
-
delay: number;
|
|
99
|
-
/**
|
|
100
|
-
* Ms to wait after the pointer leaves the trigger (or the interactive tooltip surface)
|
|
101
|
-
* before starting to hide. `0` hides immediately (plus the short exit animation).
|
|
102
|
-
* Programmatic `hide()` is not delayed.
|
|
103
|
-
*/
|
|
104
|
-
closeDelay: number;
|
|
105
|
-
/** Renders the small triangle pointing at the anchor. */
|
|
106
|
-
showArrow: boolean;
|
|
107
|
-
private triggerEl;
|
|
108
|
-
private tooltipEl;
|
|
109
|
-
private _actualPlace;
|
|
110
|
-
private _arrowAlign;
|
|
111
|
-
interactive: boolean;
|
|
112
|
-
private exiting;
|
|
113
|
-
private closeTimer;
|
|
114
|
-
private openTimer;
|
|
115
|
-
private hideDelayTimer;
|
|
116
|
-
private popoverCtrl;
|
|
117
|
-
static styles: import("lit").CSSResult;
|
|
118
|
-
connectedCallback(): void;
|
|
119
|
-
disconnectedCallback(): void;
|
|
120
|
-
firstUpdated(): void;
|
|
121
|
-
private syncArrowAndPlaceFromController;
|
|
122
|
-
willUpdate(_changed: Map<string, unknown>): void;
|
|
123
|
-
updated(changed: Map<string, unknown>): void;
|
|
124
|
-
/** Begin exit animation (keeps popover open briefly so animation is visible). */
|
|
125
|
-
private triggerExit;
|
|
126
|
-
private clearOpenTimer;
|
|
127
|
-
private clearHideDelayTimer;
|
|
128
|
-
/** Pointer leave → hide after `closeDelay` ms (hover path only). */
|
|
129
|
-
private scheduleHideAfterLeave;
|
|
130
|
-
/** Hover in → show only after `delay` ms dwell on the trigger (native `title`–like). */
|
|
131
|
-
private handleMouseEnter;
|
|
132
|
-
/** Hover out → hide tooltip */
|
|
133
|
-
private handleMouseLeave;
|
|
134
|
-
/** Click → toggle tooltip, but not when clicking inside tooltip content */
|
|
135
|
-
private handleClick;
|
|
136
|
-
private handleTooltipMouseEnter;
|
|
137
|
-
private handleTooltipMouseLeave;
|
|
138
|
-
/**
|
|
139
|
-
* Show the tooltip programmatically
|
|
140
|
-
*/
|
|
141
|
-
show(): void;
|
|
142
|
-
/**
|
|
143
|
-
* Hide the tooltip programmatically (immediate; ignores `closeDelay`).
|
|
144
|
-
*/
|
|
145
|
-
hide(): void;
|
|
146
|
-
/**
|
|
147
|
-
* Toggle the tooltip programmatically
|
|
148
|
-
*/
|
|
149
|
-
toggle(): void;
|
|
150
|
-
/**
|
|
151
|
-
* Show tooltip with custom content (optional enhancement)
|
|
152
|
-
*/
|
|
153
|
-
showWithContent(content: string | HTMLElement): void;
|
|
154
|
-
render(): import("lit-html").TemplateResult<1>;
|
|
155
|
-
}
|
|
156
|
-
export {};
|