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