@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.
Files changed (218) hide show
  1. package/auto-import.js +1 -31
  2. package/dist/custom-elements.json +7115 -21498
  3. package/dist/helper/utils/color-resolver.d.ts +12 -0
  4. package/dist/helper/utils/color-resolver.js +1 -1
  5. package/dist/helper/utils/color-resolver.js.map +1 -1
  6. package/dist/index.d.ts +1 -31
  7. package/dist/index.js +1 -1
  8. package/dist/sky-alert/sky-alert.js +32 -42
  9. package/dist/sky-alert/sky-alert.js.map +1 -1
  10. package/dist/sky-appbar/sky-appbar.d.ts +5 -0
  11. package/dist/sky-appbar/sky-appbar.js +63 -21
  12. package/dist/sky-appbar/sky-appbar.js.map +1 -1
  13. package/dist/sky-avatar/sky-avatar.d.ts +2 -2
  14. package/dist/sky-avatar/sky-avatar.js +36 -28
  15. package/dist/sky-avatar/sky-avatar.js.map +1 -1
  16. package/dist/sky-badge/sky-badge.d.ts +2 -0
  17. package/dist/sky-badge/sky-badge.js +21 -19
  18. package/dist/sky-badge/sky-badge.js.map +1 -1
  19. package/dist/sky-button/sky-button.d.ts +4 -0
  20. package/dist/sky-button/sky-button.js +85 -26
  21. package/dist/sky-button/sky-button.js.map +1 -1
  22. package/dist/sky-card/sky-card.d.ts +7 -1
  23. package/dist/sky-card/sky-card.js +72 -40
  24. package/dist/sky-card/sky-card.js.map +1 -1
  25. package/dist/sky-checkbox/sky-checkbox.js +34 -23
  26. package/dist/sky-checkbox/sky-checkbox.js.map +1 -1
  27. package/dist/sky-chip/sky-chip.js +53 -35
  28. package/dist/sky-chip/sky-chip.js.map +1 -1
  29. package/dist/sky-combobox/sky-combobox.d.ts +6 -2
  30. package/dist/sky-combobox/sky-combobox.js +92 -262
  31. package/dist/sky-combobox/sky-combobox.js.map +1 -1
  32. package/dist/sky-dialog/sky-dialog.d.ts +4 -11
  33. package/dist/sky-dialog/sky-dialog.js +78 -131
  34. package/dist/sky-dialog/sky-dialog.js.map +1 -1
  35. package/dist/sky-flexbox/sky-flexbox.js.map +1 -1
  36. package/dist/sky-form/sky-form.js +21 -19
  37. package/dist/sky-form/sky-form.js.map +1 -1
  38. package/dist/sky-image/sky-image.d.ts +1 -0
  39. package/dist/sky-image/sky-image.js +14 -7
  40. package/dist/sky-image/sky-image.js.map +1 -1
  41. package/dist/sky-input/sky-input.d.ts +15 -2
  42. package/dist/sky-input/sky-input.js +188 -193
  43. package/dist/sky-input/sky-input.js.map +1 -1
  44. package/dist/sky-list/sky-list.d.ts +11 -2
  45. package/dist/sky-list/sky-list.js +15 -25
  46. package/dist/sky-list/sky-list.js.map +1 -1
  47. package/dist/sky-listitem/sky-listitem.js +62 -30
  48. package/dist/sky-listitem/sky-listitem.js.map +1 -1
  49. package/dist/sky-radio/sky-radio.d.ts +2 -0
  50. package/dist/sky-radio/sky-radio.js +29 -9
  51. package/dist/sky-radio/sky-radio.js.map +1 -1
  52. package/dist/sky-sheet/sky-sheet.d.ts +1 -1
  53. package/dist/sky-sheet/sky-sheet.js +68 -22
  54. package/dist/sky-sheet/sky-sheet.js.map +1 -1
  55. package/dist/sky-simple-table/index.d.ts +1 -0
  56. package/dist/sky-simple-table/index.js +1 -0
  57. package/dist/sky-simple-table/sky-simple-table.d.ts +68 -0
  58. package/dist/sky-simple-table/sky-simple-table.js +100 -0
  59. package/dist/sky-simple-table/sky-simple-table.js.map +1 -0
  60. package/dist/sky-theme-provider/sky-theme-provider.d.ts +10 -1
  61. package/dist/sky-theme-provider/sky-theme-provider.js +2 -2
  62. package/dist/sky-theme-provider/sky-theme-provider.js.map +1 -1
  63. package/package.json +24 -269
  64. package/dist/sky-accordion/index.d.ts +0 -1
  65. package/dist/sky-accordion/index.js +0 -1
  66. package/dist/sky-accordion/sky-accordion.d.ts +0 -201
  67. package/dist/sky-accordion/sky-accordion.js +0 -84
  68. package/dist/sky-accordion/sky-accordion.js.map +0 -1
  69. package/dist/sky-accordion-item/index.d.ts +0 -1
  70. package/dist/sky-accordion-item/index.js +0 -1
  71. package/dist/sky-accordion-item/sky-accordion-item.d.ts +0 -161
  72. package/dist/sky-accordion-item/sky-accordion-item.js +0 -191
  73. package/dist/sky-accordion-item/sky-accordion-item.js.map +0 -1
  74. package/dist/sky-breadcrumb/index.d.ts +0 -1
  75. package/dist/sky-breadcrumb/index.js +0 -1
  76. package/dist/sky-breadcrumb/sky-breadcrumb.d.ts +0 -111
  77. package/dist/sky-breadcrumb/sky-breadcrumb.js +0 -230
  78. package/dist/sky-breadcrumb/sky-breadcrumb.js.map +0 -1
  79. package/dist/sky-button-group/index.d.ts +0 -1
  80. package/dist/sky-button-group/index.js +0 -1
  81. package/dist/sky-button-group/sky-button-group.d.ts +0 -93
  82. package/dist/sky-button-group/sky-button-group.js +0 -281
  83. package/dist/sky-button-group/sky-button-group.js.map +0 -1
  84. package/dist/sky-carousel/index.d.ts +0 -1
  85. package/dist/sky-carousel/index.js +0 -1
  86. package/dist/sky-carousel/sky-carousel.d.ts +0 -265
  87. package/dist/sky-carousel/sky-carousel.js +0 -211
  88. package/dist/sky-carousel/sky-carousel.js.map +0 -1
  89. package/dist/sky-counter/index.d.ts +0 -1
  90. package/dist/sky-counter/index.js +0 -1
  91. package/dist/sky-counter/sky-counter.d.ts +0 -130
  92. package/dist/sky-counter/sky-counter.js +0 -101
  93. package/dist/sky-counter/sky-counter.js.map +0 -1
  94. package/dist/sky-drawer/index.d.ts +0 -1
  95. package/dist/sky-drawer/index.js +0 -1
  96. package/dist/sky-drawer/sky-drawer.d.ts +0 -161
  97. package/dist/sky-drawer/sky-drawer.js +0 -175
  98. package/dist/sky-drawer/sky-drawer.js.map +0 -1
  99. package/dist/sky-dropdown/index.d.ts +0 -1
  100. package/dist/sky-dropdown/index.js +0 -1
  101. package/dist/sky-dropdown/sky-dropdown.d.ts +0 -254
  102. package/dist/sky-dropdown/sky-dropdown.js +0 -61
  103. package/dist/sky-dropdown/sky-dropdown.js.map +0 -1
  104. package/dist/sky-dropdown-item/index.d.ts +0 -1
  105. package/dist/sky-dropdown-item/index.js +0 -1
  106. package/dist/sky-dropdown-item/sky-dropdown-item.d.ts +0 -207
  107. package/dist/sky-dropdown-item/sky-dropdown-item.js +0 -341
  108. package/dist/sky-dropdown-item/sky-dropdown-item.js.map +0 -1
  109. package/dist/sky-flexbar/index.d.ts +0 -1
  110. package/dist/sky-flexbar/index.js +0 -1
  111. package/dist/sky-flexbar/sky-flexbar.d.ts +0 -189
  112. package/dist/sky-flexbar/sky-flexbar.js +0 -157
  113. package/dist/sky-flexbar/sky-flexbar.js.map +0 -1
  114. package/dist/sky-flexitem/index.d.ts +0 -1
  115. package/dist/sky-flexitem/index.js +0 -1
  116. package/dist/sky-flexitem/sky-flexitem.d.ts +0 -114
  117. package/dist/sky-flexitem/sky-flexitem.js +0 -52
  118. package/dist/sky-flexitem/sky-flexitem.js.map +0 -1
  119. package/dist/sky-navbar/index.d.ts +0 -1
  120. package/dist/sky-navbar/index.js +0 -1
  121. package/dist/sky-navbar/sky-navbar.d.ts +0 -211
  122. package/dist/sky-navbar/sky-navbar.js +0 -521
  123. package/dist/sky-navbar/sky-navbar.js.map +0 -1
  124. package/dist/sky-navpanel/index.d.ts +0 -1
  125. package/dist/sky-navpanel/index.js +0 -1
  126. package/dist/sky-navpanel/sky-navpanel.d.ts +0 -187
  127. package/dist/sky-navpanel/sky-navpanel.js +0 -404
  128. package/dist/sky-navpanel/sky-navpanel.js.map +0 -1
  129. package/dist/sky-notification/index.d.ts +0 -1
  130. package/dist/sky-notification/index.js +0 -1
  131. package/dist/sky-notification/sky-notification.d.ts +0 -152
  132. package/dist/sky-notification/sky-notification.js +0 -456
  133. package/dist/sky-notification/sky-notification.js.map +0 -1
  134. package/dist/sky-otp/index.d.ts +0 -1
  135. package/dist/sky-otp/index.js +0 -1
  136. package/dist/sky-otp/sky-otp.d.ts +0 -101
  137. package/dist/sky-otp/sky-otp.js +0 -96
  138. package/dist/sky-otp/sky-otp.js.map +0 -1
  139. package/dist/sky-overlay/index.d.ts +0 -1
  140. package/dist/sky-overlay/index.js +0 -1
  141. package/dist/sky-overlay/sky-overlay.d.ts +0 -71
  142. package/dist/sky-overlay/sky-overlay.js +0 -26
  143. package/dist/sky-overlay/sky-overlay.js.map +0 -1
  144. package/dist/sky-pagination/index.d.ts +0 -1
  145. package/dist/sky-pagination/index.js +0 -1
  146. package/dist/sky-pagination/sky-pagination.d.ts +0 -167
  147. package/dist/sky-pagination/sky-pagination.js +0 -453
  148. package/dist/sky-pagination/sky-pagination.js.map +0 -1
  149. package/dist/sky-progress/index.d.ts +0 -1
  150. package/dist/sky-progress/index.js +0 -1
  151. package/dist/sky-progress/sky-progress.d.ts +0 -70
  152. package/dist/sky-progress/sky-progress.js +0 -87
  153. package/dist/sky-progress/sky-progress.js.map +0 -1
  154. package/dist/sky-radio-group/index.d.ts +0 -1
  155. package/dist/sky-radio-group/index.js +0 -1
  156. package/dist/sky-radio-group/sky-radio-group.d.ts +0 -186
  157. package/dist/sky-radio-group/sky-radio-group.js +0 -239
  158. package/dist/sky-radio-group/sky-radio-group.js.map +0 -1
  159. package/dist/sky-range/index.d.ts +0 -1
  160. package/dist/sky-range/index.js +0 -1
  161. package/dist/sky-range/sky-range.d.ts +0 -110
  162. package/dist/sky-range/sky-range.js +0 -196
  163. package/dist/sky-range/sky-range.js.map +0 -1
  164. package/dist/sky-serial/index.d.ts +0 -1
  165. package/dist/sky-serial/index.js +0 -1
  166. package/dist/sky-serial/sky-serial.d.ts +0 -127
  167. package/dist/sky-serial/sky-serial.js +0 -133
  168. package/dist/sky-serial/sky-serial.js.map +0 -1
  169. package/dist/sky-skeleton/index.d.ts +0 -1
  170. package/dist/sky-skeleton/index.js +0 -1
  171. package/dist/sky-skeleton/sky-skeleton.d.ts +0 -80
  172. package/dist/sky-skeleton/sky-skeleton.js +0 -233
  173. package/dist/sky-skeleton/sky-skeleton.js.map +0 -1
  174. package/dist/sky-slider/index.d.ts +0 -1
  175. package/dist/sky-slider/index.js +0 -1
  176. package/dist/sky-slider/sky-slider.d.ts +0 -96
  177. package/dist/sky-slider/sky-slider.js +0 -139
  178. package/dist/sky-slider/sky-slider.js.map +0 -1
  179. package/dist/sky-speeddial/index.d.ts +0 -1
  180. package/dist/sky-speeddial/index.js +0 -1
  181. package/dist/sky-speeddial/sky-speeddial.d.ts +0 -86
  182. package/dist/sky-speeddial/sky-speeddial.js +0 -154
  183. package/dist/sky-speeddial/sky-speeddial.js.map +0 -1
  184. package/dist/sky-spinner/index.d.ts +0 -1
  185. package/dist/sky-spinner/index.js +0 -1
  186. package/dist/sky-spinner/sky-spinner.d.ts +0 -87
  187. package/dist/sky-spinner/sky-spinner.js +0 -334
  188. package/dist/sky-spinner/sky-spinner.js.map +0 -1
  189. package/dist/sky-steps/index.d.ts +0 -1
  190. package/dist/sky-steps/index.js +0 -1
  191. package/dist/sky-steps/sky-steps.d.ts +0 -170
  192. package/dist/sky-steps/sky-steps.js +0 -455
  193. package/dist/sky-steps/sky-steps.js.map +0 -1
  194. package/dist/sky-switch/index.d.ts +0 -1
  195. package/dist/sky-switch/index.js +0 -1
  196. package/dist/sky-switch/sky-switch.d.ts +0 -116
  197. package/dist/sky-switch/sky-switch.js +0 -191
  198. package/dist/sky-switch/sky-switch.js.map +0 -1
  199. package/dist/sky-tab/index.d.ts +0 -1
  200. package/dist/sky-tab/index.js +0 -1
  201. package/dist/sky-tab/sky-tab.d.ts +0 -188
  202. package/dist/sky-tab/sky-tab.js +0 -390
  203. package/dist/sky-tab/sky-tab.js.map +0 -1
  204. package/dist/sky-tab-button/index.d.ts +0 -1
  205. package/dist/sky-tab-button/index.js +0 -1
  206. package/dist/sky-tab-button/sky-tab-button.d.ts +0 -114
  207. package/dist/sky-tab-button/sky-tab-button.js +0 -167
  208. package/dist/sky-tab-button/sky-tab-button.js.map +0 -1
  209. package/dist/sky-theme-switcher/index.d.ts +0 -1
  210. package/dist/sky-theme-switcher/index.js +0 -1
  211. package/dist/sky-theme-switcher/sky-theme-switcher.d.ts +0 -92
  212. package/dist/sky-theme-switcher/sky-theme-switcher.js +0 -43
  213. package/dist/sky-theme-switcher/sky-theme-switcher.js.map +0 -1
  214. package/dist/sky-tooltip/index.d.ts +0 -1
  215. package/dist/sky-tooltip/index.js +0 -1
  216. package/dist/sky-tooltip/sky-tooltip.d.ts +0 -156
  217. package/dist/sky-tooltip/sky-tooltip.js +0 -242
  218. 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 {};