@skewedaspect/sleekspace-ui 0.8.1 → 0.9.1

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 (191) hide show
  1. package/dist/components/Dropdown/SkDropdown.vue.d.ts +9 -1
  2. package/dist/components/Dropdown/types.d.ts +2 -1
  3. package/dist/components/NavBar/SkNavBar.vue.d.ts +9 -1
  4. package/dist/components/NavBar/context.d.ts +2 -0
  5. package/dist/components/NavBar/types.d.ts +5 -1
  6. package/dist/components/NumberInput/SkNumberInput.vue.d.ts +8 -0
  7. package/dist/components/Page/SkPage.vue.d.ts +9 -0
  8. package/dist/components/ScrollArea/SkScrollArea.vue.d.ts +105 -4
  9. package/dist/composables/useCustomColors.d.ts +18 -56
  10. package/{src → dist}/global.d.ts +6 -2
  11. package/dist/sleekspace-ui.css +4257 -1253
  12. package/dist/sleekspace-ui.es.js +300 -170
  13. package/dist/sleekspace-ui.umd.js +299 -169
  14. package/dist/static/classes.d.ts +18 -0
  15. package/dist/static/components/alert.d.ts +12 -0
  16. package/dist/static/components/avatar.d.ts +9 -0
  17. package/dist/static/components/breadcrumbs.d.ts +6 -0
  18. package/dist/static/components/button.d.ts +13 -0
  19. package/dist/static/components/card.d.ts +5 -0
  20. package/dist/static/components/checkbox.d.ts +10 -0
  21. package/dist/static/components/colorPicker.d.ts +8 -0
  22. package/dist/static/components/divider.d.ts +8 -0
  23. package/dist/static/components/dropdown.d.ts +8 -0
  24. package/dist/static/components/field.d.ts +15 -0
  25. package/dist/static/components/group.d.ts +5 -0
  26. package/dist/static/components/input.d.ts +14 -0
  27. package/dist/static/components/navBar.d.ts +16 -0
  28. package/dist/static/components/numberInput.d.ts +15 -0
  29. package/dist/static/components/page.d.ts +9 -0
  30. package/dist/static/components/pagination.d.ts +5 -0
  31. package/dist/static/components/panel.d.ts +11 -0
  32. package/dist/static/components/progress.d.ts +9 -0
  33. package/dist/static/components/radio.d.ts +11 -0
  34. package/dist/static/components/select.d.ts +10 -0
  35. package/dist/static/components/sidebar.d.ts +9 -0
  36. package/dist/static/components/skeleton.d.ts +11 -0
  37. package/dist/static/components/slider.d.ts +12 -0
  38. package/dist/static/components/spinner.d.ts +12 -0
  39. package/dist/static/components/switchInput.d.ts +10 -0
  40. package/dist/static/components/table.d.ts +12 -0
  41. package/dist/static/components/tag.d.ts +8 -0
  42. package/dist/static/components/tagsInput.d.ts +7 -0
  43. package/dist/static/components/textarea.d.ts +12 -0
  44. package/dist/static/components/toolbar.d.ts +12 -0
  45. package/dist/static/components/tooltip.d.ts +7 -0
  46. package/dist/static/escape.d.ts +2 -0
  47. package/dist/static/index.cjs.js +1 -0
  48. package/dist/static/index.d.ts +68 -0
  49. package/dist/static/index.es.js +732 -0
  50. package/dist/static/render.d.ts +12 -0
  51. package/dist/static/specs.d.ts +2 -0
  52. package/dist/static/types.d.ts +43 -0
  53. package/dist/tokens.css +322 -0
  54. package/dist/types/index.d.ts +36 -0
  55. package/dist/utils/slots.d.ts +6 -0
  56. package/docs/guides/installation.md +8 -2
  57. package/docs/guides/pure-css/_meta.yaml +8 -0
  58. package/docs/guides/pure-css/class-api.md +1070 -0
  59. package/docs/guides/pure-css/custom-elements.md +574 -0
  60. package/docs/guides/pure-css/index.md +86 -0
  61. package/docs/guides/pure-css/limitations.md +152 -0
  62. package/docs/guides/pure-css/static-helpers.md +1203 -0
  63. package/llms-full.txt +3739 -261
  64. package/package.json +19 -5
  65. package/src/components/Alert/SkAlert.vue +4 -2
  66. package/src/components/Breadcrumbs/SkBreadcrumbs.vue +6 -12
  67. package/src/components/Button/SkButton.vue +8 -5
  68. package/src/components/Card/SkCard.vue +13 -5
  69. package/src/components/Checkbox/SkCheckbox.vue +9 -2
  70. package/src/components/ContextMenu/SkContextMenuRadioGroup.vue +4 -1
  71. package/src/components/Dropdown/SkDropdown.vue +20 -3
  72. package/src/components/Dropdown/SkDropdownRadioGroup.vue +4 -1
  73. package/src/components/Dropdown/types.ts +2 -1
  74. package/src/components/Modal/SkModal.vue +11 -4
  75. package/src/components/NavBar/SkNavBar.vue +19 -8
  76. package/src/components/NavBar/context.ts +4 -2
  77. package/src/components/NavBar/types.ts +6 -1
  78. package/src/components/NumberInput/SkNumberInput.vue +10 -1
  79. package/src/components/Page/SkPage.vue +29 -15
  80. package/src/components/Panel/SkPanel.vue +2 -1
  81. package/src/components/Popover/SkPopover.vue +11 -4
  82. package/src/components/Radio/SkRadio.vue +9 -2
  83. package/src/components/ScrollArea/SkScrollArea.vue +78 -5
  84. package/src/components/Switch/SkSwitch.vue +14 -13
  85. package/src/components/Tabs/SkTab.vue +7 -2
  86. package/src/components/TreeView/SkTreeItem.vue +10 -2
  87. package/src/components/TreeView/SkTreeView.vue +7 -2
  88. package/src/composables/useCustomColors.ts +86 -77
  89. package/src/composables/usePortalContext.test.ts +0 -2
  90. package/src/shims.d.ts +10 -0
  91. package/src/static/__tests__/parity.test.ts +717 -0
  92. package/src/static/__tests__/parityHarness.test.ts +98 -0
  93. package/src/static/__tests__/parityHarness.ts +260 -0
  94. package/src/static/classes.test.ts +82 -0
  95. package/src/static/classes.ts +111 -0
  96. package/src/static/components/__tests__/helpers.test.ts +837 -0
  97. package/src/static/components/alert.ts +117 -0
  98. package/src/static/components/avatar.ts +86 -0
  99. package/src/static/components/breadcrumbs.ts +28 -0
  100. package/src/static/components/button.ts +75 -0
  101. package/src/static/components/card.ts +27 -0
  102. package/src/static/components/checkbox.ts +48 -0
  103. package/src/static/components/colorPicker.ts +45 -0
  104. package/src/static/components/divider.ts +39 -0
  105. package/src/static/components/dropdown.ts +36 -0
  106. package/src/static/components/field.ts +86 -0
  107. package/src/static/components/group.ts +27 -0
  108. package/src/static/components/input.ts +55 -0
  109. package/src/static/components/navBar.ts +94 -0
  110. package/src/static/components/numberInput.ts +64 -0
  111. package/src/static/components/page.ts +31 -0
  112. package/src/static/components/pagination.ts +27 -0
  113. package/src/static/components/panel.ts +33 -0
  114. package/src/static/components/progress.ts +31 -0
  115. package/src/static/components/radio.ts +53 -0
  116. package/src/static/components/select.ts +51 -0
  117. package/src/static/components/sidebar.ts +85 -0
  118. package/src/static/components/skeleton.ts +66 -0
  119. package/src/static/components/slider.ts +50 -0
  120. package/src/static/components/spinner.ts +94 -0
  121. package/src/static/components/switchInput.ts +49 -0
  122. package/src/static/components/table.ts +88 -0
  123. package/src/static/components/tag.ts +76 -0
  124. package/src/static/components/tagsInput.ts +35 -0
  125. package/src/static/components/textarea.ts +53 -0
  126. package/src/static/components/toolbar.ts +74 -0
  127. package/src/static/components/tooltip.ts +29 -0
  128. package/src/static/escape.test.ts +53 -0
  129. package/src/static/escape.ts +28 -0
  130. package/src/static/generated/defaults.ts +379 -0
  131. package/src/static/generated/propTypes.ts +426 -0
  132. package/src/static/index.ts +116 -0
  133. package/src/static/render.test.ts +83 -0
  134. package/src/static/render.ts +76 -0
  135. package/src/static/specs.test.ts +58 -0
  136. package/src/static/specs.ts +230 -0
  137. package/src/static/types.ts +176 -0
  138. package/src/styles/__tests__/testHelpers.ts +97 -0
  139. package/src/styles/base/_custom-elements.scss +51 -0
  140. package/src/styles/base/_index.scss +4 -0
  141. package/src/styles/components/__tests__/componentSelectors.test.ts +2575 -0
  142. package/src/styles/components/_alert.scss +82 -39
  143. package/src/styles/components/_avatar.scss +102 -47
  144. package/src/styles/components/_breadcrumbs.scss +39 -37
  145. package/src/styles/components/_button.scss +58 -5
  146. package/src/styles/components/_card.scss +64 -2
  147. package/src/styles/components/_checkbox.scss +35 -5
  148. package/src/styles/components/_color-picker.scss +48 -13
  149. package/src/styles/components/_divider.scss +86 -52
  150. package/src/styles/components/_dropdown.scss +214 -0
  151. package/src/styles/components/_field.scss +76 -23
  152. package/src/styles/components/_group.scss +190 -79
  153. package/src/styles/components/_index.scss +1 -0
  154. package/src/styles/components/_input.scss +81 -5
  155. package/src/styles/components/_menu.scss +1 -1
  156. package/src/styles/components/_navbar.scss +76 -45
  157. package/src/styles/components/_number-input.scss +98 -85
  158. package/src/styles/components/_page.scss +82 -23
  159. package/src/styles/components/_pagination.scss +240 -212
  160. package/src/styles/components/_panel.scss +268 -122
  161. package/src/styles/components/_progress.scss +120 -70
  162. package/src/styles/components/_radio.scss +35 -5
  163. package/src/styles/components/_scroll-area.scss +50 -22
  164. package/src/styles/components/_select.scss +40 -9
  165. package/src/styles/components/_sidebar.scss +59 -34
  166. package/src/styles/components/_skeleton.scss +111 -65
  167. package/src/styles/components/_slider.scss +34 -10
  168. package/src/styles/components/_spinner.scss +107 -56
  169. package/src/styles/components/_switch.scss +36 -5
  170. package/src/styles/components/_table.scss +150 -166
  171. package/src/styles/components/_tag.scss +244 -154
  172. package/src/styles/components/_tags-input.scss +46 -12
  173. package/src/styles/components/_textarea.scss +36 -5
  174. package/src/styles/components/_toolbar.scss +85 -31
  175. package/src/styles/components/_tooltip.scss +172 -3
  176. package/src/styles/mixins/_cut-border.scss +18 -4
  177. package/src/styles/mixins/_dual-selector.scss +192 -0
  178. package/src/styles/mixins/_index.scss +1 -0
  179. package/src/styles/mixins/dualSelector.test.ts +151 -0
  180. package/src/styles/themes/_colorful.scss +25 -0
  181. package/src/styles/themes/_greyscale.scss +25 -0
  182. package/src/styles/themes/_shade-scale.scss +39 -0
  183. package/src/styles/tokens/_semantic-color-kinds.scss +66 -0
  184. package/src/{types.ts → types/index.ts} +19 -11
  185. package/src/utils/slots.ts +75 -0
  186. package/web-types.json +980 -137
  187. package/dist/composables/useCustomColors.test.d.ts +0 -1
  188. package/dist/composables/useFocusTrap.test.d.ts +0 -1
  189. package/dist/composables/usePortalContext.test.d.ts +0 -1
  190. package/dist/styles/mixins/fluidSize.test.d.ts +0 -1
  191. package/dist/types.d.ts +0 -29
package/src/styles/components/_pagination.scss CHANGED
@@ -4,11 +4,15 @@
4
4
  // Follows button styling patterns with size system and variants.
5
5
  //----------------------------------------------------------------------------------------------------------------------
6
6
 
7
+ @use '../theme/variables' as *;
7
8
  @use '../mixins' as *;
8
9
 
10
+ //----------------------------------------------------------------------------------------------------------------------
11
+ // Pagination Root
9
12
  //----------------------------------------------------------------------------------------------------------------------
10
13
 
11
- .sk-pagination
14
+ .sk-pagination,
15
+ sk-pagination
12
16
  {
13
17
  // Layout
14
18
  display: flex;
@@ -19,51 +23,51 @@
19
23
  // Color tokens - Default to neutral
20
24
  --sk-pagination-color-base: var(--sk-neutral-base);
21
25
  --sk-pagination-fg: var(--sk-neutral-text);
26
+ }
22
27
 
23
- // Semantic kind variants
24
- &.sk-neutral
25
- {
26
- --sk-pagination-color-base: var(--sk-neutral-base);
27
- --sk-pagination-fg: var(--sk-neutral-text);
28
- }
28
+ //----------------------------------------------------------------------------------------------------------------------
29
+ // Kind Variants
30
+ //----------------------------------------------------------------------------------------------------------------------
29
31
 
30
- &.sk-primary
32
+ @each $kind in $semantic-kinds
33
+ {
34
+ @include kind-variant('pagination', $kind)
31
35
  {
32
- --sk-pagination-color-base: var(--sk-primary-base);
33
- --sk-pagination-fg: var(--sk-primary-text);
36
+ --sk-pagination-color-base: var(--sk-#{ $kind }-base);
37
+ --sk-pagination-fg: var(--sk-#{ $kind }-text);
34
38
  }
39
+ }
35
40
 
36
- &.sk-accent
37
- {
38
- --sk-pagination-color-base: var(--sk-accent-base);
39
- --sk-pagination-fg: var(--sk-accent-text);
40
- }
41
+ //----------------------------------------------------------------------------------------------------------------------
42
+ // Defaults When Absent
43
+ //----------------------------------------------------------------------------------------------------------------------
41
44
 
42
- &.sk-info
43
- {
44
- --sk-pagination-color-base: var(--sk-info-base);
45
- --sk-pagination-fg: var(--sk-info-text);
46
- }
45
+ // Default kind: neutral — explicit :not() chain for zero-specificity default.
46
+ $_pagination-kind-not: '';
47
+ @each $kind in $semantic-kinds
48
+ {
49
+ $_pagination-kind-not: $_pagination-kind-not + ':not(.sk-' + $kind + ')';
50
+ }
47
51
 
48
- &.sk-success
49
- {
50
- --sk-pagination-color-base: var(--sk-success-base);
51
- --sk-pagination-fg: var(--sk-success-text);
52
- }
52
+ .sk-pagination:where(#{ $_pagination-kind-not })
53
+ {
54
+ --sk-pagination-color-base: var(--sk-neutral-base);
55
+ --sk-pagination-fg: var(--sk-neutral-text);
56
+ }
53
57
 
54
- &.sk-warning
55
- {
56
- --sk-pagination-color-base: var(--sk-warning-base);
57
- --sk-pagination-fg: var(--sk-warning-text);
58
- }
58
+ //----------------------------------------------------------------------------------------------------------------------
59
+ // Custom-Element API Defaults (attribute-absence path)
60
+ //----------------------------------------------------------------------------------------------------------------------
59
61
 
60
- &.sk-danger
61
- {
62
- --sk-pagination-color-base: var(--sk-danger-base);
63
- --sk-pagination-fg: var(--sk-danger-text);
64
- }
62
+ // Default kind: neutral — fires when <sk-pagination> has no kind attribute.
63
+ @include defaults-when-no-attr('pagination', 'kind')
64
+ {
65
+ --sk-pagination-color-base: var(--sk-neutral-base);
66
+ --sk-pagination-fg: var(--sk-neutral-text);
65
67
  }
66
68
 
69
+ //----------------------------------------------------------------------------------------------------------------------
70
+ // Pagination Item
67
71
  //----------------------------------------------------------------------------------------------------------------------
68
72
 
69
73
  .sk-pagination-item
@@ -194,227 +198,251 @@
194
198
  border-color: transparent !important;
195
199
  --sk-pagination-border-color: transparent;
196
200
  }
201
+ }
197
202
 
198
- //------------------------------------------------------------------------------------------------------------------
199
- // Size Variants
200
- //------------------------------------------------------------------------------------------------------------------
203
+ //----------------------------------------------------------------------------------------------------------------------
204
+ // Pagination Item — Size Variants
205
+ //----------------------------------------------------------------------------------------------------------------------
201
206
 
202
- &.sk-xs
203
- {
204
- --sk-pagination-current-height: calc(var(--sk-pagination-height-base) * var(--sk-pagination-scale-xs));
205
- --sk-pagination-current-font-size: calc(var(--sk-pagination-font-size-base) * var(--sk-pagination-font-scale-xs));
206
- --sk-pagination-cut-size: calc(var(--sk-pagination-current-height) / var(--sk-pagination-radius-factor));
207
-
208
- @include cut-border(
209
- $cut: var(--sk-pagination-cut-size),
210
- $border-width: var(--sk-pagination-border-width),
211
- $border-color: var(--sk-pagination-border-color),
212
- $corners: (top-left, bottom-right)
213
- );
214
- }
207
+ @include size-variant('pagination-item', 'xs')
208
+ {
209
+ --sk-pagination-current-height: calc(var(--sk-pagination-height-base) * var(--sk-pagination-scale-xs));
210
+ --sk-pagination-current-font-size: calc(var(--sk-pagination-font-size-base) * var(--sk-pagination-font-scale-xs));
211
+ --sk-pagination-cut-size: calc(var(--sk-pagination-current-height) / var(--sk-pagination-radius-factor));
215
212
 
216
- &.sk-sm
217
- {
218
- --sk-pagination-current-height: calc(var(--sk-pagination-height-base) * var(--sk-pagination-scale-sm));
219
- --sk-pagination-current-font-size: calc(var(--sk-pagination-font-size-base) * var(--sk-pagination-font-scale-sm));
220
- --sk-pagination-cut-size: calc(var(--sk-pagination-current-height) / var(--sk-pagination-radius-factor));
221
-
222
- @include cut-border(
223
- $cut: var(--sk-pagination-cut-size),
224
- $border-width: var(--sk-pagination-border-width),
225
- $border-color: var(--sk-pagination-border-color),
226
- $corners: (top-left, bottom-right)
227
- );
228
- }
213
+ @include cut-border(
214
+ $cut: var(--sk-pagination-cut-size),
215
+ $border-width: var(--sk-pagination-border-width),
216
+ $border-color: var(--sk-pagination-border-color),
217
+ $corners: (top-left, bottom-right)
218
+ );
219
+ }
220
+
221
+ @include size-variant('pagination-item', 'sm')
222
+ {
223
+ --sk-pagination-current-height: calc(var(--sk-pagination-height-base) * var(--sk-pagination-scale-sm));
224
+ --sk-pagination-current-font-size: calc(var(--sk-pagination-font-size-base) * var(--sk-pagination-font-scale-sm));
225
+ --sk-pagination-cut-size: calc(var(--sk-pagination-current-height) / var(--sk-pagination-radius-factor));
226
+
227
+ @include cut-border(
228
+ $cut: var(--sk-pagination-cut-size),
229
+ $border-width: var(--sk-pagination-border-width),
230
+ $border-color: var(--sk-pagination-border-color),
231
+ $corners: (top-left, bottom-right)
232
+ );
233
+ }
234
+
235
+ @include size-variant('pagination-item', 'md')
236
+ {
237
+ --sk-pagination-current-height: calc(var(--sk-pagination-height-base) * var(--sk-pagination-scale-md));
238
+ --sk-pagination-current-font-size: calc(var(--sk-pagination-font-size-base) * var(--sk-pagination-font-scale-md));
239
+ --sk-pagination-cut-size: calc(var(--sk-pagination-current-height) / var(--sk-pagination-radius-factor));
240
+
241
+ @include cut-border(
242
+ $cut: var(--sk-pagination-cut-size),
243
+ $border-width: var(--sk-pagination-border-width),
244
+ $border-color: var(--sk-pagination-border-color),
245
+ $corners: (top-left, bottom-right)
246
+ );
247
+ }
248
+
249
+ @include size-variant('pagination-item', 'lg')
250
+ {
251
+ --sk-pagination-current-height: calc(var(--sk-pagination-height-base) * var(--sk-pagination-scale-lg));
252
+ --sk-pagination-current-font-size: calc(var(--sk-pagination-font-size-base) * var(--sk-pagination-font-scale-lg));
253
+ --sk-pagination-cut-size: calc(var(--sk-pagination-current-height) / var(--sk-pagination-radius-factor));
254
+
255
+ @include cut-border(
256
+ $cut: var(--sk-pagination-cut-size),
257
+ $border-width: var(--sk-pagination-border-width),
258
+ $border-color: var(--sk-pagination-border-color),
259
+ $corners: (top-left, bottom-right)
260
+ );
261
+ }
262
+
263
+ @include size-variant('pagination-item', 'xl')
264
+ {
265
+ --sk-pagination-current-height: calc(var(--sk-pagination-height-base) * var(--sk-pagination-scale-xl));
266
+ --sk-pagination-current-font-size: calc(var(--sk-pagination-font-size-base) * var(--sk-pagination-font-scale-xl));
267
+ --sk-pagination-cut-size: calc(var(--sk-pagination-current-height) / var(--sk-pagination-radius-factor));
229
268
 
230
- &.sk-md
269
+ @include cut-border(
270
+ $cut: var(--sk-pagination-cut-size),
271
+ $border-width: var(--sk-pagination-border-width),
272
+ $border-color: var(--sk-pagination-border-color),
273
+ $corners: (top-left, bottom-right)
274
+ );
275
+ }
276
+
277
+ //----------------------------------------------------------------------------------------------------------------------
278
+ // Pagination Item — Variant: Solid
279
+ //----------------------------------------------------------------------------------------------------------------------
280
+
281
+ @include variant-variant('pagination-item', 'solid')
282
+ {
283
+ --sk-pagination-border-color: var(--sk-pagination-color-base);
284
+
285
+ background-color: var(--sk-pagination-bg);
286
+ color: var(--sk-pagination-fg);
287
+
288
+ &:hover:not(:disabled):not(.sk-ellipsis)
231
289
  {
232
- --sk-pagination-current-height: calc(var(--sk-pagination-height-base) * var(--sk-pagination-scale-md));
233
- --sk-pagination-current-font-size: calc(var(--sk-pagination-font-size-base) * var(--sk-pagination-font-scale-md));
234
- --sk-pagination-cut-size: calc(var(--sk-pagination-current-height) / var(--sk-pagination-radius-factor));
235
-
236
- @include cut-border(
237
- $cut: var(--sk-pagination-cut-size),
238
- $border-width: var(--sk-pagination-border-width),
239
- $border-color: var(--sk-pagination-border-color),
240
- $corners: (top-left, bottom-right)
241
- );
290
+ --sk-pagination-border-color: var(--sk-pagination-border-hover);
291
+ --sk-pagination-glow-shadow: 0 0 var(--sk-pagination-glow-size) oklch(from var(--sk-pagination-color-base) l c h / var(--sk-pagination-glow-opacity));
292
+
293
+ background-color: var(--sk-pagination-bg-hover);
242
294
  }
243
295
 
244
- &.sk-lg
296
+ &:active:not(:disabled):not(.sk-ellipsis)
245
297
  {
246
- --sk-pagination-current-height: calc(var(--sk-pagination-height-base) * var(--sk-pagination-scale-lg));
247
- --sk-pagination-current-font-size: calc(var(--sk-pagination-font-size-base) * var(--sk-pagination-font-scale-lg));
248
- --sk-pagination-cut-size: calc(var(--sk-pagination-current-height) / var(--sk-pagination-radius-factor));
249
-
250
- @include cut-border(
251
- $cut: var(--sk-pagination-cut-size),
252
- $border-width: var(--sk-pagination-border-width),
253
- $border-color: var(--sk-pagination-border-color),
254
- $corners: (top-left, bottom-right)
255
- );
298
+ --sk-pagination-border-color: var(--sk-pagination-border-hover);
299
+ --sk-pagination-glow-shadow: 0 0 0 transparent;
300
+
301
+ background-color: var(--sk-pagination-bg);
302
+ color: var(--sk-pagination-color-base);
256
303
  }
257
304
 
258
- &.sk-xl
305
+ // Active page (selected)
306
+ &.sk-active
259
307
  {
260
- --sk-pagination-current-height: calc(var(--sk-pagination-height-base) * var(--sk-pagination-scale-xl));
261
- --sk-pagination-current-font-size: calc(var(--sk-pagination-font-size-base) * var(--sk-pagination-font-scale-xl));
262
- --sk-pagination-cut-size: calc(var(--sk-pagination-current-height) / var(--sk-pagination-radius-factor));
263
-
264
- @include cut-border(
265
- $cut: var(--sk-pagination-cut-size),
266
- $border-width: var(--sk-pagination-border-width),
267
- $border-color: var(--sk-pagination-border-color),
268
- $corners: (top-left, bottom-right)
269
- );
308
+ background-color: var(--sk-pagination-color-base);
309
+ color: white;
270
310
  }
311
+ }
271
312
 
272
- //------------------------------------------------------------------------------------------------------------------
273
- // Variant: Solid
274
- //------------------------------------------------------------------------------------------------------------------
313
+ //----------------------------------------------------------------------------------------------------------------------
314
+ // Pagination Item — Variant: Outline
315
+ //----------------------------------------------------------------------------------------------------------------------
316
+
317
+ @include variant-variant('pagination-item', 'outline')
318
+ {
319
+ --sk-pagination-border-color: var(--sk-pagination-color-base);
320
+
321
+ background-color: var(--sk-pagination-outline-bg);
322
+ color: var(--sk-pagination-color-base);
275
323
 
276
- &.sk-solid
324
+ &:hover:not(:disabled):not(.sk-ellipsis)
277
325
  {
278
- --sk-pagination-border-color: var(--sk-pagination-color-base);
326
+ --sk-pagination-border-color: var(--sk-pagination-border-hover);
327
+ --sk-pagination-glow-shadow: 0 0 var(--sk-pagination-glow-size) oklch(from var(--sk-pagination-color-base) l c h / var(--sk-pagination-glow-opacity));
279
328
 
280
329
  background-color: var(--sk-pagination-bg);
330
+ }
331
+
332
+ &:active:not(:disabled):not(.sk-ellipsis)
333
+ {
334
+ --sk-pagination-border-color: var(--sk-pagination-border-hover);
335
+ --sk-pagination-glow-shadow: 0 0 0 transparent;
336
+
337
+ background-color: var(--sk-pagination-bg-hover);
281
338
  color: var(--sk-pagination-fg);
339
+ }
282
340
 
283
- &:hover:not(:disabled):not(.sk-ellipsis)
284
- {
285
- --sk-pagination-border-color: var(--sk-pagination-border-hover);
286
- --sk-pagination-glow-shadow: 0 0 var(--sk-pagination-glow-size) oklch(from var(--sk-pagination-color-base) l c h / var(--sk-pagination-glow-opacity));
287
-
288
- background-color: var(--sk-pagination-bg-hover);
289
- }
290
-
291
- &:active:not(:disabled):not(.sk-ellipsis)
292
- {
293
- --sk-pagination-border-color: var(--sk-pagination-border-hover);
294
- --sk-pagination-glow-shadow: 0 0 0 transparent;
295
-
296
- background-color: var(--sk-pagination-bg);
297
- color: var(--sk-pagination-color-base);
298
- }
299
-
300
- // Active page (selected)
301
- &.sk-active
302
- {
303
- background-color: var(--sk-pagination-color-base);
304
- color: white;
305
- }
341
+ // Active page (selected)
342
+ &.sk-active
343
+ {
344
+ background-color: var(--sk-pagination-color-base);
345
+ color: white;
306
346
  }
347
+ }
307
348
 
308
- //------------------------------------------------------------------------------------------------------------------
309
- // Variant: Outline
310
- //------------------------------------------------------------------------------------------------------------------
349
+ //----------------------------------------------------------------------------------------------------------------------
350
+ // Pagination Item — Variant: Subtle
351
+ //----------------------------------------------------------------------------------------------------------------------
311
352
 
312
- &.sk-outline
313
- {
314
- --sk-pagination-border-color: var(--sk-pagination-color-base);
353
+ @include variant-variant('pagination-item', 'subtle')
354
+ {
355
+ --sk-pagination-border-color: oklch(from var(--sk-pagination-color-base) l c h / var(--sk-pagination-subtle-border-opacity));
315
356
 
316
- background-color: var(--sk-pagination-outline-bg);
317
- color: var(--sk-pagination-color-base);
357
+ background-color: oklch(from var(--sk-pagination-bg) l c h / var(--sk-pagination-subtle-opacity));
358
+ color: var(--sk-pagination-color-base);
318
359
 
319
- &:hover:not(:disabled):not(.sk-ellipsis)
320
- {
321
- --sk-pagination-border-color: var(--sk-pagination-border-hover);
322
- --sk-pagination-glow-shadow: 0 0 var(--sk-pagination-glow-size) oklch(from var(--sk-pagination-color-base) l c h / var(--sk-pagination-glow-opacity));
323
-
324
- background-color: var(--sk-pagination-bg);
325
- }
326
-
327
- &:active:not(:disabled):not(.sk-ellipsis)
328
- {
329
- --sk-pagination-border-color: var(--sk-pagination-border-hover);
330
- --sk-pagination-glow-shadow: 0 0 0 transparent;
331
-
332
- background-color: var(--sk-pagination-bg-hover);
333
- color: var(--sk-pagination-fg);
334
- }
335
-
336
- // Active page (selected)
337
- &.sk-active
338
- {
339
- background-color: var(--sk-pagination-color-base);
340
- color: white;
341
- }
342
- }
360
+ &:hover:not(:disabled):not(.sk-ellipsis)
361
+ {
362
+ --sk-pagination-border-color: oklch(from var(--sk-pagination-color-base) l c h / var(--sk-pagination-subtle-border-opacity-hover));
363
+ --sk-pagination-glow-shadow: 0 0 var(--sk-pagination-glow-size) oklch(from var(--sk-pagination-color-base) l c h / var(--sk-pagination-glow-opacity));
343
364
 
344
- //------------------------------------------------------------------------------------------------------------------
345
- // Variant: Subtle
346
- //------------------------------------------------------------------------------------------------------------------
365
+ background-color: oklch(from var(--sk-pagination-bg) l c h / var(--sk-pagination-subtle-opacity-hover));
366
+ }
347
367
 
348
- &.sk-subtle
368
+ &:active:not(:disabled):not(.sk-ellipsis)
349
369
  {
350
- --sk-pagination-border-color: oklch(from var(--sk-pagination-color-base) l c h / var(--sk-pagination-subtle-border-opacity));
370
+ --sk-pagination-border-color: var(--sk-pagination-color-base);
371
+ --sk-pagination-glow-shadow: 0 0 0 transparent;
351
372
 
352
- background-color: oklch(from var(--sk-pagination-bg) l c h / var(--sk-pagination-subtle-opacity));
353
- color: var(--sk-pagination-color-base);
373
+ background-color: var(--sk-pagination-bg);
374
+ color: var(--sk-pagination-fg);
375
+ }
376
+
377
+ // Active page (selected)
378
+ &.sk-active
379
+ {
380
+ --sk-pagination-border-color: var(--sk-pagination-color-base);
354
381
 
355
- &:hover:not(:disabled):not(.sk-ellipsis)
356
- {
357
- --sk-pagination-border-color: oklch(from var(--sk-pagination-color-base) l c h / var(--sk-pagination-subtle-border-opacity-hover));
358
- --sk-pagination-glow-shadow: 0 0 var(--sk-pagination-glow-size) oklch(from var(--sk-pagination-color-base) l c h / var(--sk-pagination-glow-opacity));
382
+ background-color: var(--sk-pagination-color-base);
383
+ color: white;
384
+ }
385
+ }
359
386
 
360
- background-color: oklch(from var(--sk-pagination-bg) l c h / var(--sk-pagination-subtle-opacity-hover));
361
- }
387
+ //----------------------------------------------------------------------------------------------------------------------
388
+ // Pagination Item — Variant: Ghost
389
+ //----------------------------------------------------------------------------------------------------------------------
362
390
 
363
- &:active:not(:disabled):not(.sk-ellipsis)
364
- {
365
- --sk-pagination-border-color: var(--sk-pagination-color-base);
366
- --sk-pagination-glow-shadow: 0 0 0 transparent;
391
+ @include variant-variant('pagination-item', 'ghost')
392
+ {
393
+ --sk-pagination-border-color: transparent;
367
394
 
368
- background-color: var(--sk-pagination-bg);
369
- color: var(--sk-pagination-fg);
370
- }
395
+ background-color: transparent;
396
+ color: var(--sk-pagination-color-base);
371
397
 
372
- // Active page (selected)
373
- &.sk-active
374
- {
375
- --sk-pagination-border-color: var(--sk-pagination-color-base);
398
+ &:hover:not(:disabled):not(.sk-ellipsis)
399
+ {
400
+ --sk-pagination-glow-shadow: 0 0 var(--sk-pagination-glow-size) oklch(from var(--sk-pagination-color-base) l c h / var(--sk-pagination-glow-opacity));
376
401
 
377
- background-color: var(--sk-pagination-color-base);
378
- color: white;
379
- }
402
+ background-color: var(--sk-pagination-bg-hover);
380
403
  }
381
404
 
382
- //------------------------------------------------------------------------------------------------------------------
383
- // Variant: Ghost
384
- //------------------------------------------------------------------------------------------------------------------
385
-
386
- &.sk-ghost
405
+ &:active:not(:disabled):not(.sk-ellipsis)
387
406
  {
388
- --sk-pagination-border-color: transparent;
407
+ --sk-pagination-border-color: var(--sk-pagination-border-hover);
408
+ --sk-pagination-glow-shadow: 0 0 0 transparent;
389
409
 
390
- background-color: transparent;
391
- color: var(--sk-pagination-color-base);
410
+ background-color: var(--sk-pagination-bg-hover);
411
+ color: var(--sk-pagination-fg);
412
+ }
392
413
 
393
- &:hover:not(:disabled):not(.sk-ellipsis)
394
- {
395
- --sk-pagination-glow-shadow: 0 0 var(--sk-pagination-glow-size) oklch(from var(--sk-pagination-color-base) l c h / var(--sk-pagination-glow-opacity));
414
+ // Active page (selected)
415
+ &.sk-active
416
+ {
417
+ --sk-pagination-border-color: var(--sk-pagination-color-base);
396
418
 
397
- background-color: var(--sk-pagination-bg-hover);
398
- }
419
+ background-color: var(--sk-pagination-color-base);
420
+ color: white;
421
+ }
422
+ }
399
423
 
400
- &:active:not(:disabled):not(.sk-ellipsis)
401
- {
402
- --sk-pagination-border-color: var(--sk-pagination-border-hover);
403
- --sk-pagination-glow-shadow: 0 0 0 transparent;
424
+ //----------------------------------------------------------------------------------------------------------------------
425
+ // Pagination Item — Defaults When Absent
426
+ //----------------------------------------------------------------------------------------------------------------------
404
427
 
405
- background-color: var(--sk-pagination-bg-hover);
406
- color: var(--sk-pagination-fg);
407
- }
428
+ // Default size: md — fires when no sk-size-* class is present.
429
+ @include defaults-when-absent('pagination-item', 'sk-size-')
430
+ {
431
+ --sk-pagination-current-height: calc(var(--sk-pagination-height-base) * var(--sk-pagination-scale-md));
432
+ --sk-pagination-current-font-size: calc(var(--sk-pagination-font-size-base) * var(--sk-pagination-font-scale-md));
433
+ --sk-pagination-cut-size: calc(var(--sk-pagination-current-height) / var(--sk-pagination-radius-factor));
434
+ }
408
435
 
409
- // Active page (selected)
410
- &.sk-active
411
- {
412
- --sk-pagination-border-color: var(--sk-pagination-color-base);
436
+ //----------------------------------------------------------------------------------------------------------------------
437
+ // Pagination Item — Custom-Element API Defaults (attribute-absence path)
438
+ //----------------------------------------------------------------------------------------------------------------------
413
439
 
414
- background-color: var(--sk-pagination-color-base);
415
- color: white;
416
- }
417
- }
440
+ // Default size: md — fires when <sk-pagination-item> has no size attribute.
441
+ @include defaults-when-no-attr('pagination-item', 'size')
442
+ {
443
+ --sk-pagination-current-height: calc(var(--sk-pagination-height-base) * var(--sk-pagination-scale-md));
444
+ --sk-pagination-current-font-size: calc(var(--sk-pagination-font-size-base) * var(--sk-pagination-font-scale-md));
445
+ --sk-pagination-cut-size: calc(var(--sk-pagination-current-height) / var(--sk-pagination-radius-factor));
418
446
  }
419
447
 
420
448
  //----------------------------------------------------------------------------------------------------------------------