@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,157 +0,0 @@
1
- import{__decorate as e,__metadata as t}from"tslib";import{LitElement as r,css as i,html as s}from"lit";import{property as o,state as a,query as n,customElement as d}from"lit/decorators.js";import{when as l}from"lit/directives/when.js";import{PopoverController as p}from"../helper/controllers/popover-controller.js";import{SkyIcon as h}from"../sky-icon/sky-icon.js";let c=class extends r{constructor(){super(...arguments),this.isHamburgerOpen=!1,this.isFullyHidden=!1,this.gapThreshold=100,this.flexDirection="horizontal",this.stackAt=500,this.partialIcon="ion:ellipsis-horizontal",this.fullIcon="ion:menu",this._itemElements=[],this._scheduled=!1,this._initialized=!1,this.dropdownPopover=new p(this,{getAnchor:()=>this,getPopover:()=>this.hamburgerEl,cssVarLeft:"--sky-dd-left",cssVarTop:"--sky-dd-top",cssVarWidth:"--sky-dd-width",getPlacement:()=>"bottom",getAlign:()=>"start",getGap:()=>6,getPadding:()=>8,getMatchAnchorWidth:()=>!0,getMaxWidthToViewport:()=>!0,getMaxWidthMode:()=>"cap",getFlip:()=>!0,getFlipOrder:()=>[],getAnimateReposition:()=>!0,getRepositionMs:()=>160,getCloseOnEscape:()=>!0,getCloseOnOutside:()=>!0,getRestoreFocusOnClose:()=>!0,onOpenChange:(e,t)=>{this.isHamburgerOpen=e,this.dispatchEvent(new CustomEvent("menu-toggle",{detail:{open:e},bubbles:!0,composed:!0}))}})}static{this.dependencies={"sky-icon":h}}static{this.styles=i`
2
- :host {
3
- display: flex;
4
- align-items: center;
5
- gap: 8px;
6
- width: 100%;
7
- position: relative;
8
- box-sizing: border-box;
9
- font-family: var(--sky-font);
10
- color: var(--sky-text-primary, #000);
11
- border: var(--sky-border-primary);
12
- background-color: var(--sky-glass-primary);
13
- padding: 5px;
14
- border-radius: var(--sky-radius-secondary);
15
- box-shadow: var(--sky-box-shadow-primary);
16
- transition: border-radius 0.3s ease;
17
-
18
- }
19
-
20
- :host::before {
21
- content: "";
22
- position: absolute;
23
- inset: 0;
24
- z-index: -1;
25
- backdrop-filter: var(--sky-blur-primary) var(--sky-brightness-primary)
26
- var(--sky-saturation-primary);
27
- -webkit-backdrop-filter: var(--sky-blur-primary)
28
- var(--sky-brightness-primary) var(--sky-saturation-primary);
29
- border-radius: inherit;
30
- }
31
-
32
- .main-container {
33
- display: flex;
34
- align-items: center;
35
- gap: 8px;
36
- flex: 1;
37
- min-width: 0;
38
- }
39
-
40
- .main-items {
41
- display: flex;
42
- align-items: center;
43
- gap: 8px;
44
- flex: 1;
45
- min-width: 0;
46
- white-space: nowrap;
47
- }
48
-
49
- slot:not([name])::slotted(*) {
50
- white-space: nowrap;
51
- }
52
-
53
- .spacer {
54
- flex: 1 1 auto;
55
- }
56
-
57
- .hamburger-btn {
58
- display: none;
59
- align-items: center;
60
- justify-content: center;
61
- cursor: pointer;
62
- padding: 6px;
63
- width: 28px;
64
- height: 28px;
65
- min-width: 28px;
66
- min-height: 28px;
67
- flex: 0 0 auto;
68
- margin-left: auto;
69
- line-height: 1;
70
- font-size: 16px;
71
- color: var(--sky-text-primary);
72
- background: var(--sky-hover-primary);
73
- border: var(--sky-border-primary);
74
- border-radius: var(--sky-radius-secondary);
75
- transition:
76
- background-color 0.2s ease,
77
- color 0.2s ease;
78
- }
79
-
80
- .hamburger-btn:hover {
81
- color: var(--sky-active-primary);
82
- }
83
-
84
- sky-icon {
85
- display: inline-block;
86
- width: 1em;
87
- height: 1em;
88
- }
89
-
90
- .hamburger-menu {
91
- position: fixed;
92
- top: var(--sky-dd-top);
93
- left: var(--sky-dd-left);
94
- width: var(--sky-dd-width);
95
- margin: 0;
96
- box-shadow: var(--sky-box-shadow-primary);
97
- border-radius: var(--sky-radius-secondary);
98
- background-color: var(--sky-glass-primary);
99
- backdrop-filter: var(--sky-blur-primary) var(--sky-brightness-primary)
100
- var(--sky-saturation-primary);
101
- -webkit-backdrop-filter: var(--sky-blur-primary)
102
- var(--sky-brightness-primary) var(--sky-saturation-primary);
103
- border: var(--sky-border-primary);
104
-
105
- }
106
-
107
- .hamburger-inner {
108
- display: flex;
109
- flex-wrap: wrap;
110
- gap: 8px;
111
- box-sizing: border-box;
112
- }
113
-
114
- slot[name="hamburger"]::slotted(*) {
115
- white-space: nowrap;
116
- }
117
- `}firstUpdated(e){super.firstUpdated(e),this.dropdownPopover.refreshTargets()}connectedCallback(){super.connectedCallback(),this._ro=new ResizeObserver(()=>this._scheduleMeasure()),this._ro.observe(this),this._mo=new MutationObserver(()=>this._collectItems()),this._mo.observe(this,{childList:!0,subtree:!0}),this._collectItems(),this.updateComplete.then(()=>this._measure())}disconnectedCallback(){super.disconnectedCallback(),this._ro?.disconnect(),this._mo?.disconnect()}_collectItems(){this._itemElements=Array.from(this.querySelectorAll(".menu-parent")),this._scheduleMeasure()}_scheduleMeasure(){this._scheduled||(this._scheduled=!0,requestAnimationFrame(()=>{this._scheduled=!1,this._measure()}))}_measure(){if(0===this._itemElements.length)return;for(const e of this._itemElements)e.removeAttribute("slot");const e=this.getBoundingClientRect().width,t=this.stackAt>0&&e<this.stackAt?"vertical":"horizontal";this._initialized&&t!==this.flexDirection?(this.flexDirection=t,this.dispatchEvent(new CustomEvent("flex-direction-changed",{detail:{flexDirection:t},bubbles:!0,composed:!0}))):this.flexDirection=t;const r=this.shadowRoot?.querySelector(".main-container"),i=this.shadowRoot?.querySelector(".hamburger-btn"),s=i&&i.offsetWidth||28,o=r?r.offsetWidth-this.gapThreshold-(s+8):0;let a=0;const n=[];for(const e of this._itemElements){a+=e.getBoundingClientRect().width,a>o&&n.push(e)}const d=n.length>0;i&&(i.style.display=d?"flex":"none");for(const e of n)e.setAttribute("slot","hamburger");this.isFullyHidden=n.length===this._itemElements.length,d||this.dropdownPopover.closePopover(),this._initialized||(this._initialized=!0)}openMenu(){this.dropdownPopover.openPopover()}closeMenu(){this.dropdownPopover.closePopover()}toggleMenu(){this.dropdownPopover.toggle()}recalculateLayout(){this._measure()}render(){const e="menu-"+(this.id||Math.random().toString(36).slice(2));return s`
118
- <div class="main-container" part="container">
119
- <div class="main-items">
120
- <!-- visible items -->
121
- <slot></slot>
122
- </div>
123
-
124
- <div class="spacer"></div>
125
-
126
- <button
127
- class="hamburger-btn"
128
- part="hamburger-button"
129
- @click=${()=>this.dropdownPopover.toggle()}
130
- @keydown=${e=>("Enter"===e.key||" "===e.key)&&(e.preventDefault(),this.dropdownPopover.toggle())}
131
- aria-label="More"
132
- aria-haspopup="menu"
133
- .aria-expanded=${String(this.isHamburgerOpen)}
134
- aria-controls=${e}
135
- tabindex="0"
136
- >
137
- ${l(this.isFullyHidden,()=>s`<sky-icon icon="${this.fullIcon}"></sky-icon>`,()=>s`<sky-icon icon="${this.partialIcon}"></sky-icon>`)}
138
- </button>
139
- </div>
140
-
141
- <div
142
- id=${e}
143
- class="hamburger-menu"
144
- @toggle=${this.dropdownPopover.onToggle}
145
- popover="manual"
146
- part="menu"
147
- role="menu"
148
- ?inert=${!this.isHamburgerOpen}
149
- aria-label="Additional menu items"
150
- >
151
- <div class="hamburger-inner" part="menu-inner">
152
- <!-- overflow items (same nodes, just slot="hamburger") -->
153
- <slot name="hamburger"></slot>
154
- </div>
155
- </div>
156
- `}};e([o({type:Boolean}),t("design:type",Object)],c.prototype,"isHamburgerOpen",void 0),e([o({type:Boolean}),t("design:type",Object)],c.prototype,"isFullyHidden",void 0),e([o({type:Number}),t("design:type",Object)],c.prototype,"gapThreshold",void 0),e([o({type:String,reflect:!0}),t("design:type",String)],c.prototype,"flexDirection",void 0),e([o({type:Number}),t("design:type",Object)],c.prototype,"stackAt",void 0),e([o({type:String}),t("design:type",Object)],c.prototype,"partialIcon",void 0),e([o({type:String}),t("design:type",Object)],c.prototype,"fullIcon",void 0),e([a(),t("design:type",ResizeObserver)],c.prototype,"_ro",void 0),e([a(),t("design:type",Array)],c.prototype,"_itemElements",void 0),e([n(".hamburger-menu"),t("design:type",HTMLElement)],c.prototype,"hamburgerEl",void 0),c=e([d("sky-flexbar")],c);export{c as SkyFlexbar};
157
- //# sourceMappingURL=sky-flexbar.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"sky-flexbar.js","sources":["../../src/sky-flexbar/sky-flexbar.ts"],"sourcesContent":[null],"names":["SkyFlexbar","LitElement","constructor","this","isHamburgerOpen","isFullyHidden","gapThreshold","flexDirection","stackAt","partialIcon","fullIcon","_itemElements","_scheduled","_initialized","dropdownPopover","PopoverController","getAnchor","getPopover","hamburgerEl","cssVarLeft","cssVarTop","cssVarWidth","getPlacement","getAlign","getGap","getPadding","getMatchAnchorWidth","getMaxWidthToViewport","getMaxWidthMode","getFlip","getFlipOrder","getAnimateReposition","getRepositionMs","getCloseOnEscape","getCloseOnOutside","getRestoreFocusOnClose","onOpenChange","open","meta","dispatchEvent","CustomEvent","detail","bubbles","composed","dependencies","SkyIcon","styles","css","firstUpdated","_changedProperties","super","refreshTargets","connectedCallback","_ro","ResizeObserver","_scheduleMeasure","observe","_mo","MutationObserver","_collectItems","childList","subtree","updateComplete","then","_measure","disconnectedCallback","disconnect","Array","from","querySelectorAll","requestAnimationFrame","length","item","removeAttribute","w","getBoundingClientRect","width","newDir","mainContainer","shadowRoot","querySelector","btn","btnWidth","offsetWidth","available","total","hidden","el","push","showHamburger","style","display","setAttribute","closePopover","openMenu","openPopover","closeMenu","toggleMenu","toggle","recalculateLayout","render","menuId","id","Math","random","toString","slice","html","e","key","preventDefault","String","when","onToggle","__decorate","property","type","Boolean","prototype","Number","reflect","state","query","HTMLElement","customElement"],"mappings":"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"}
@@ -1 +0,0 @@
1
- export * from "./sky-flexitem";
@@ -1 +0,0 @@
1
- export * from './sky-flexitem.js';
@@ -1,114 +0,0 @@
1
- import { LitElement } from "lit";
2
- export type SkyFlexitemDirection = "horizontal" | "vertical";
3
- export type SkyFlexitemSizeDetail = {
4
- element: SkyFlexitem;
5
- width: number;
6
- height: number;
7
- flexDirection: SkyFlexitemDirection;
8
- };
9
- /**
10
- * @element sky-flexitem
11
- *
12
- * @summary Flex item for `sky-flexbar` that adapts orientation and reports size changes.
13
- *
14
- * @status stable
15
- * @since 1.0.0
16
- *
17
- * @documentation https://library.sky-ui.com/components/flexbar
18
- *
19
- * @slot title - The title/content slot for the flex item.
20
- * @slot content - The main content slot for the flex item.
21
- * @slot hamburger - Special slot for hamburger menu context.
22
- *
23
- * @property {SkyFlexitemDirection} flexDirection - Layout direction used by the internal item container.
24
- * @fires {CustomEvent<SkyFlexitemSizeDetail>} flexitem-size - Fired when the component size changes.
25
- * @method getSize Returns the current element bounding rect.
26
- * @method isInHamburger Returns whether the item is in hamburger-menu context.
27
- *
28
- * @csspart item - The main container element.
29
- * @csspart in-hamburger - Applied when item is in hamburger menu context.
30
- * @csspart in-bar - Applied when item is in navigation bar context.
31
- *
32
- * @Behavior
33
- * - Dynamically adjusts layout direction based on parent flex direction
34
- * - Supports both horizontal and vertical orientations
35
- * - Automatically reports size changes via ResizeObserver
36
- * - Responds to flex-direction-changed events from parent components
37
- * - Provides different styling based on slot assignment (hamburger vs bar)
38
- *
39
- * - `title`: Typically used for labels, icons, or short text
40
- * - `content`: Main content area for longer text or complex content
41
- * - `hamburger`: Special slot for items within a hamburger menu context
42
- *
43
- * @example
44
- * ```html
45
- * <sky-flexitem flexdirection="horizontal">
46
- * <span slot="title">Item 1</span>
47
- * <div slot="content">Content for item 1</div>
48
- * </sky-flexitem>
49
- * ```
50
- * ```vue
51
- * <template>
52
- * <sky-flexitem flexdirection="horizontal">
53
- * <span slot="title">Item 1</span>
54
- * <span slot="content">Content for item 1</span>
55
- * </sky-flexitem>
56
- * </template>
57
- * ```
58
- * ```jsx
59
- * export default function Demo() {
60
- * return (
61
- * <sky-flexitem flexdirection="horizontal">
62
- * <span slot="title">Item 1</span>
63
- * <span slot="content">Content for item 1</span>
64
- * </sky-flexitem>
65
- * );
66
- * }
67
- * ```
68
- */
69
- export declare class SkyFlexitem extends LitElement {
70
- /**
71
- * Layout direction of the flex item.
72
- * @public
73
- */
74
- flexDirection: SkyFlexitemDirection;
75
- /**
76
- * Internal state tracking if item is in hamburger menu.
77
- * @private
78
- */
79
- private _inHamburger;
80
- /** @private */
81
- private _resizeObserver?;
82
- static styles: import("lit").CSSResult;
83
- static get observedAttributes(): string[];
84
- /** @protected */
85
- attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null): void;
86
- /**
87
- * Handles flex direction changes from parent components.
88
- * @param {Event} e - The flex-direction-changed event
89
- * @private
90
- */
91
- private _onFlexDir;
92
- /**
93
- * Measures and reports the current size of the flex item.
94
- * @private
95
- */
96
- private _measureAndReportSize;
97
- /** @protected */
98
- connectedCallback(): void;
99
- /** @protected */
100
- disconnectedCallback(): void;
101
- /**
102
- * Gets the current size of the flex item.
103
- * @returns {DOMRect} The bounding rectangle of the element
104
- * @public
105
- */
106
- getSize(): DOMRect;
107
- /**
108
- * Checks if the item is currently in hamburger menu context.
109
- * @returns {boolean} True if in hamburger menu
110
- * @public
111
- */
112
- isInHamburger(): boolean;
113
- render(): import("lit-html").TemplateResult<1>;
114
- }
@@ -1,52 +0,0 @@
1
- import{__decorate as e,__metadata as t}from"tslib";import{LitElement as i,css as r,html as s}from"lit";import{property as n,state as o,customElement as l}from"lit/decorators.js";let a=class extends i{constructor(){super(...arguments),this.flexDirection="vertical",this._inHamburger=!1,this._onFlexDir=e=>{const t=e;t.detail&&(this.flexDirection=t.detail.flexDirection)}}static{this.styles=r`
2
- :host {
3
- display: block;
4
- box-sizing: border-box;
5
- }
6
-
7
- .flex-item-container {
8
- display: flex;
9
- align-items: center;
10
- gap: 8px;
11
- width: 100%;
12
- height: 100%;
13
- white-space: nowrap;
14
- }
15
-
16
- :host([flexdirection="vertical"]) .flex-item-container {
17
- flex-direction: column;
18
- align-items: flex-start;
19
- }
20
-
21
- .content {
22
- display: block;
23
- flex: 1;
24
- min-width: 0;
25
- white-space: nowrap;
26
- }
27
-
28
- ::slotted([slot="title"]),
29
- ::slotted([slot="content"]) {
30
- white-space: nowrap;
31
- }
32
-
33
- /* RTL support */
34
- :host([dir="rtl"]) .flex-item-container {
35
- flex-direction: row-reverse;
36
- }
37
-
38
- :host([dir="rtl"][flexdirection="vertical"]) .flex-item-container {
39
- align-items: flex-end;
40
- }
41
- `}static get observedAttributes(){return[...super.observedAttributes,"slot"]}attributeChangedCallback(e,t,i){super.attributeChangedCallback(e,t,i),"slot"===e&&t!==i&&(this._inHamburger="hamburger"===i,this.requestUpdate())}_measureAndReportSize(){const e=this.offsetWidth,t=this.offsetHeight;this.dispatchEvent(new CustomEvent("flexitem-size",{bubbles:!0,composed:!0,detail:{element:this,width:e,height:t,flexDirection:this.flexDirection}}))}connectedCallback(){super.connectedCallback(),this.classList.add("menu-parent"),this._inHamburger="hamburger"===this.slot,this._resizeObserver=new ResizeObserver(()=>this._measureAndReportSize()),this._resizeObserver.observe(this),this.addEventListener("flex-direction-changed",this._onFlexDir),this.updateComplete.then(()=>this._measureAndReportSize())}disconnectedCallback(){super.disconnectedCallback(),this._resizeObserver?.disconnect(),this.removeEventListener("flex-direction-changed",this._onFlexDir)}getSize(){return this.getBoundingClientRect()}isInHamburger(){return this._inHamburger}render(){const e=this._inHamburger?"item in-hamburger":"item in-bar";return s`
42
- <div
43
- part=${e}
44
- class="flex-item-container"
45
- role="${this._inHamburger?"menuitem":"listitem"}"
46
- aria-orientation="${this.flexDirection}"
47
- >
48
- <slot name="title"></slot>
49
- <slot name="content" class="content"></slot>
50
- </div>
51
- `}};e([n({type:String,reflect:!0}),t("design:type",String)],a.prototype,"flexDirection",void 0),e([o(),t("design:type",Object)],a.prototype,"_inHamburger",void 0),a=e([l("sky-flexitem")],a);export{a as SkyFlexitem};
52
- //# sourceMappingURL=sky-flexitem.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"sky-flexitem.js","sources":["../../src/sky-flexitem/sky-flexitem.ts"],"sourcesContent":[null],"names":["SkyFlexitem","LitElement","constructor","this","flexDirection","_inHamburger","_onFlexDir","e","ce","detail","styles","css","observedAttributes","super","attributeChangedCallback","name","oldVal","newVal","requestUpdate","_measureAndReportSize","width","offsetWidth","height","offsetHeight","dispatchEvent","CustomEvent","bubbles","composed","element","connectedCallback","classList","add","slot","_resizeObserver","ResizeObserver","observe","addEventListener","updateComplete","then","disconnectedCallback","disconnect","removeEventListener","getSize","getBoundingClientRect","isInHamburger","render","partTokens","html","__decorate","property","type","String","reflect","prototype","state","customElement"],"mappings":"kLAwEO,IAAMA,EAAN,cAA0BC,EAA1B,WAAAC,uBAMLC,KAAAC,cAAsC,WAO9BD,KAAAE,cAAe,EAkEfF,KAAAG,WAAcC,IACpB,MAAMC,EAAKD,EACNC,EAAGC,SACRN,KAAKC,cAAgBI,EAAGC,OAAOL,eAgFnC,QAhJkBD,KAAAO,OAASC,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwC1B,CAGF,6BAAoBC,GAClB,MAAO,IAAIC,MAAMD,mBAAoB,OACvC,CAGS,wBAAAE,CAAyBC,EAAcC,EAAuBC,GACrEJ,MAAMC,yBAAyBC,EAAMC,EAAQC,GAChC,SAATF,GAAmBC,IAAWC,IAChCd,KAAKE,aAA0B,cAAXY,EACpBd,KAAKe,gBAET,CAiBQ,qBAAAC,GACN,MAAMC,EAAQjB,KAAKkB,YACbC,EAASnB,KAAKoB,aACpBpB,KAAKqB,cACH,IAAIC,YAAmC,gBAAiB,CACtDC,SAAS,EACTC,UAAU,EACVlB,OAAQ,CACNmB,QAASzB,KACTiB,QACAE,SACAlB,cAAeD,KAAKC,iBAI5B,CAGS,iBAAAyB,GACPhB,MAAMgB,oBAEN1B,KAAK2B,UAAUC,IAAI,eAGnB5B,KAAKE,aAA6B,cAAdF,KAAK6B,KAEzB7B,KAAK8B,gBAAkB,IAAIC,eAAe,IAAM/B,KAAKgB,yBACrDhB,KAAK8B,gBAAgBE,QAAQhC,MAE7BA,KAAKiC,iBAAiB,yBAA0BjC,KAAKG,YAErDH,KAAKkC,eAAeC,KAAK,IAAMnC,KAAKgB,wBACtC,CAGS,oBAAAoB,GACP1B,MAAM0B,uBACNpC,KAAK8B,iBAAiBO,aACtBrC,KAAKsC,oBAAoB,yBAA0BtC,KAAKG,WAC1D,CAOO,OAAAoC,GACL,OAAOvC,KAAKwC,uBACd,CAOO,aAAAC,GACL,OAAOzC,KAAKE,YACd,CAES,MAAAwC,GACP,MAAMC,EAAa3C,KAAKE,aAAe,oBAAsB,cAC7D,OAAO0C,CAAI;;eAEAD;;gBAEC3C,KAAKE,aAAe,WAAa;4BACrBF,KAAKC;;;;;KAM/B,GA3JA4C,EAAA,CADCC,EAAS,CAAEC,KAAMC,OAAQC,SAAS,6BACcpD,EAAAqD,UAAA,wBAOzCL,EAAA,CADPM,6BAC4BtD,EAAAqD,UAAA,uBAblBrD,EAAWgD,EAAA,CADvBO,EAAc,iBACFvD"}
@@ -1 +0,0 @@
1
- export * from "./sky-navbar";
@@ -1 +0,0 @@
1
- export * from './sky-navbar.js';
@@ -1,211 +0,0 @@
1
- import { LitElement, TemplateResult } from "lit";
2
- export type NavIcon = string | TemplateResult | HTMLElement | {
3
- icon: string;
4
- inline?: boolean;
5
- flip?: string;
6
- rotate?: number;
7
- };
8
- export type NavAction =
9
- /** Action identifier — handled via `item-activate`; never executed as code. */
10
- string | ((ctx: {
11
- item: NavItem;
12
- path: string | null;
13
- host: SkyNavbar;
14
- event?: Event;
15
- }) => any);
16
- export type NavItem = {
17
- id?: string;
18
- label?: string;
19
- sublabel?: string;
20
- iconL?: NavIcon;
21
- iconR?: NavIcon;
22
- disabled?: boolean;
23
- route?: string;
24
- submenu?: NavItem[];
25
- divider?: boolean;
26
- action?: NavAction;
27
- };
28
- export type SkyNavbarItemActivateDetail = {
29
- item: NavItem;
30
- path: string | null;
31
- };
32
- /**
33
- * @element sky-navbar
34
- *
35
- * @summary Responsive navbar with desktop/mobile layouts, nested menus, and overflow handling.
36
- *
37
- * @status stable
38
- * @since 1.0.0
39
- *
40
- * @documentation https://library.sky-ui.com/components/navbar
41
- * @dependency sky-icon
42
- * @dependency sky-button
43
- * @dependency sky-drawer
44
- * @dependency sky-navpanel
45
- *
46
- * @uiVModel activeRoute route-change
47
- *
48
- * @slot prepend - Content placed before the navigation items on desktop.
49
- * @slot append - Content placed after the navigation items on desktop.
50
- * @slot prepend-mobile - Content placed before navigation items in mobile mode.
51
- * @slot append-mobile - Content placed after navigation items in mobile mode.
52
- * @slot header - Header content for mobile drawer.
53
- * @slot footer - Footer content for mobile drawer.
54
- *
55
- * @csspart nav-desktop - Desktop navigation container.
56
- * @csspart nav-mobile - Mobile navigation container.
57
- * @csspart nav-bar - Navigation bar container.
58
- *
59
- * @property {NavItem[]} items - Full menu item model.
60
- * @property {string | null} activeRoute - Active route used for highlighting.
61
- * @property {number} breakpoint - Mobile breakpoint in pixels.
62
- * @property {boolean} isMobile - Whether the navbar is currently in mobile layout.
63
- * @property {number} overflowThreshold - Minimum visible desktop items before full overflow mode.
64
- * @property {string} justifyBar - CSS `justify-content` for the outer bar.
65
- * @property {string} justifyBarItems - CSS `justify-content` for the main item row.
66
- * @property {boolean} pwaOverlay - Enables window-controls-overlay placement behavior.
67
- * @property {boolean} customEvent - Uses item activation events instead of route navigation flow.
68
- *
69
- * @fires {CustomEvent<string>} route-change - Dispatched when a route is changed.
70
- * @fires {CustomEvent<SkyNavbarItemActivateDetail>} item-activate - Dispatched when an item is activated.
71
- * @method openMenu Opens the mobile drawer menu.
72
- * @method closeMenu Closes mobile drawer and desktop submenus.
73
- * @method toggleMenu Toggles mobile drawer menu.
74
- * @method closeMenus Closes all open menus.
75
- *
76
- * @Behavior
77
- * - Switches desktop/mobile rendering based on viewport width and `breakpoint`.
78
- * - Mobile menu uses `sky-drawer` + `sky-navpanel` (maps `items` to navpanel rows).
79
- * - Supports nested submenu navigation with keyboard and pointer interaction.
80
- * - Applies overflow collapsing when top-level items exceed available space.
81
- *
82
- * @example
83
- * ```html
84
- * <sky-navbar breakpoint="1024" pwa-overlay>
85
- * <div slot="prepend">Logo</div>
86
- * <div slot="append">User Menu</div>
87
- * </sky-navbar>
88
- * ```
89
- * ```vue
90
- * <template>
91
- * <sky-navbar :items="items" @route-change="onRouteChange">
92
- * <div slot="prepend">Logo</div>
93
- * <div slot="append">User Menu</div>
94
- * </sky-navbar>
95
- * </template>
96
- * ```
97
- * ```jsx
98
- * export default function Demo({ items }) {
99
- * return (
100
- * <sky-navbar items={items}>
101
- * <div slot="prepend">Logo</div>
102
- * <div slot="append">User Menu</div>
103
- * </sky-navbar>
104
- * );
105
- * }
106
- * ```
107
- */
108
- export declare class SkyNavbar extends LitElement {
109
- openMenu(): void;
110
- closeMenu(): void;
111
- toggleMenu(): void;
112
- closeMenus(): void;
113
- static dependencies: Record<string, CustomElementConstructor>;
114
- /** Full menu model */
115
- items: NavItem[];
116
- /** Current active route for styling */
117
- activeRoute: string | null;
118
- /** Mobile breakpoint */
119
- breakpoint: number;
120
- /** Whether we are in mobile mode */
121
- isMobile: boolean;
122
- /** Minimum visible items on desktop before collapsing all into ⋯ */
123
- overflowThreshold: number;
124
- justifyBar: string;
125
- justifyBarItems: string;
126
- /** Keep existing prop only — no new props added */
127
- pwaOverlay: boolean;
128
- /** Desktop open path (topId[/childId[/...]]). Also drives which nested panels are open */
129
- private activePath;
130
- private isSubmenuOpen;
131
- /** Desktop overflow split */
132
- private visibleItems;
133
- private overflowItems;
134
- customEvent: boolean;
135
- /** Desktop thumb highlight */
136
- private focusedIndex;
137
- /** Persist last top submenu host for animated repositioning */
138
- private lastTopId;
139
- private lastTopHadSubmenuOpen;
140
- /** Mobile drawer open */
141
- private drawerOpen;
142
- /** Geometry caches for nested flyouts */
143
- private anchorRects;
144
- private anchorOffsets;
145
- private _submenuPosition;
146
- private static readonly OVERFLOW_ID;
147
- private barEl;
148
- /** Non-reactive; avoids Lit change-in-update when toggled during measurement */
149
- private _isMeasuring;
150
- private _measurementRequested;
151
- private _resizeObs?;
152
- private static _historyPatched;
153
- private _winResize;
154
- static styles: import("lit").CSSResult;
155
- constructor();
156
- connectedCallback(): void;
157
- disconnectedCallback(): void;
158
- private _onGlobalPointerDown;
159
- private debounce;
160
- firstUpdated(): void;
161
- protected willUpdate(changed: Map<string, unknown>): void;
162
- private _onLocationChange;
163
- private _syncResponsive;
164
- private _setRootPadding;
165
- private _runAction;
166
- /** Scroll to a hash fragment using a validated element id (never querySelector). */
167
- private _scrollToHash;
168
- render(): TemplateResult<1>;
169
- private _renderDesktopBar;
170
- private _renderTopButton;
171
- private _norm;
172
- private _routeActive;
173
- private _renderTopPanel;
174
- private _renderRow;
175
- private _renderNested;
176
- private _onDrawerChange;
177
- private _navIconToString;
178
- private _itemsHaveAction;
179
- private _mapNavItemsToSidebarPages;
180
- private _findNavItem;
181
- private _mobileNavUsesActions;
182
- private _onNavpanelRouteChange;
183
- private _onNavpanelAction;
184
- private _renderMobile;
185
- private _onTopEnter;
186
- private _onTopClick;
187
- private _onRowEnter;
188
- private _onRowClick;
189
- private _navigate;
190
- private _openTop;
191
- private _openNested;
192
- private _collapseTo;
193
- private _closeAll;
194
- private _positionNested;
195
- private _getPanelEl;
196
- private _cell;
197
- private _activate;
198
- /** Lock body scroll when mobile drawer is open. */
199
- private _lockBodyScroll;
200
- /** Unlock body scroll when no dialogs/navbars need it anymore. */
201
- private _unlockBodyScroll;
202
- private _slug;
203
- private _path;
204
- private _ensurePath;
205
- private _topItems;
206
- private _shallowEqual;
207
- private _applyOverflow;
208
- private _closeMobileOverlay;
209
- private _measureOverflow;
210
- private _scheduleMeasureIfNeeded;
211
- }