@skewedaspect/sleekspace-ui 0.2.0-beta.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 (266) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +111 -0
  3. package/dist/sleekspace-ui.css +12844 -0
  4. package/dist/sleekspace-ui.es.js +19021 -0
  5. package/dist/sleekspace-ui.umd.js +19040 -0
  6. package/docs/components/accordion.md +92 -0
  7. package/docs/components/alert.md +72 -0
  8. package/docs/components/avatar.md +69 -0
  9. package/docs/components/breadcrumbs.md +65 -0
  10. package/docs/components/button/_meta.yaml +12 -0
  11. package/docs/components/button/accessibility.md +16 -0
  12. package/docs/components/button/custom-colors.md +18 -0
  13. package/docs/components/button/icons.md +31 -0
  14. package/docs/components/button/intro.md +8 -0
  15. package/docs/components/button/kinds.md +25 -0
  16. package/docs/components/button/sizes.md +14 -0
  17. package/docs/components/button/states.md +12 -0
  18. package/docs/components/button/usage.md +23 -0
  19. package/docs/components/button/variants.md +14 -0
  20. package/docs/components/button.md +110 -0
  21. package/docs/components/card.md +87 -0
  22. package/docs/components/checkbox.md +77 -0
  23. package/docs/components/collapsible.md +71 -0
  24. package/docs/components/divider.md +62 -0
  25. package/docs/components/dropdown.md +88 -0
  26. package/docs/components/field.md +80 -0
  27. package/docs/components/group.md +41 -0
  28. package/docs/components/input.md +84 -0
  29. package/docs/components/listbox.md +82 -0
  30. package/docs/components/modal.md +101 -0
  31. package/docs/components/navbar.md +64 -0
  32. package/docs/components/number-input.md +78 -0
  33. package/docs/components/page.md +77 -0
  34. package/docs/components/pagination.md +88 -0
  35. package/docs/components/panel.md +74 -0
  36. package/docs/components/popover.md +93 -0
  37. package/docs/components/progress.md +76 -0
  38. package/docs/components/radio.md +86 -0
  39. package/docs/components/sidebar.md +74 -0
  40. package/docs/components/skeleton.md +76 -0
  41. package/docs/components/slider.md +94 -0
  42. package/docs/components/spinner.md +59 -0
  43. package/docs/components/switch.md +97 -0
  44. package/docs/components/table.md +91 -0
  45. package/docs/components/tabs.md +108 -0
  46. package/docs/components/tag.md +75 -0
  47. package/docs/components/tags-input.md +88 -0
  48. package/docs/components/textarea.md +80 -0
  49. package/docs/components/theme.md +65 -0
  50. package/docs/components/toast.md +95 -0
  51. package/docs/components/tooltip.md +90 -0
  52. package/docs/guides/custom-colors.md +84 -0
  53. package/docs/guides/design-tokens.md +105 -0
  54. package/docs/guides/getting-started.md +144 -0
  55. package/docs/guides/installation.md +62 -0
  56. package/docs/guides/theming.md +101 -0
  57. package/package.json +76 -0
  58. package/src/components/Accordion/SkAccordion.vue +133 -0
  59. package/src/components/Accordion/SkAccordionItem.vue +131 -0
  60. package/src/components/Accordion/index.ts +3 -0
  61. package/src/components/Accordion/types.ts +9 -0
  62. package/src/components/Alert/SkAlert.vue +137 -0
  63. package/src/components/Alert/types.ts +10 -0
  64. package/src/components/Avatar/SkAvatar.vue +141 -0
  65. package/src/components/Avatar/index.ts +8 -0
  66. package/src/components/Avatar/types.ts +31 -0
  67. package/src/components/Breadcrumbs/SkBreadcrumbItem.vue +76 -0
  68. package/src/components/Breadcrumbs/SkBreadcrumbSeparator.vue +38 -0
  69. package/src/components/Breadcrumbs/SkBreadcrumbs.vue +93 -0
  70. package/src/components/Breadcrumbs/index.ts +10 -0
  71. package/src/components/Breadcrumbs/types.ts +36 -0
  72. package/src/components/Button/SkButton.vue +148 -0
  73. package/src/components/Button/types.ts +21 -0
  74. package/src/components/Card/SkCard.vue +144 -0
  75. package/src/components/Card/types.ts +12 -0
  76. package/src/components/Checkbox/SkCheckbox.vue +136 -0
  77. package/src/components/Checkbox/index.ts +8 -0
  78. package/src/components/Checkbox/types.ts +10 -0
  79. package/src/components/Collapsible/SkCollapsible.vue +159 -0
  80. package/src/components/Collapsible/index.ts +2 -0
  81. package/src/components/Collapsible/types.ts +8 -0
  82. package/src/components/Divider/SkDivider.vue +63 -0
  83. package/src/components/Divider/types.ts +15 -0
  84. package/src/components/Dropdown/SkDropdown.vue +150 -0
  85. package/src/components/Dropdown/SkDropdownMenuItem.vue +58 -0
  86. package/src/components/Dropdown/SkDropdownMenuSeparator.vue +26 -0
  87. package/src/components/Dropdown/SkDropdownSubmenu.vue +107 -0
  88. package/src/components/Dropdown/index.ts +11 -0
  89. package/src/components/Dropdown/types.ts +11 -0
  90. package/src/components/Field/SkField.vue +152 -0
  91. package/src/components/Field/index.ts +8 -0
  92. package/src/components/Field/types.ts +7 -0
  93. package/src/components/Group/SkGroup.vue +52 -0
  94. package/src/components/Group/types.ts +10 -0
  95. package/src/components/Input/SkInput.vue +117 -0
  96. package/src/components/Input/index.ts +8 -0
  97. package/src/components/Input/types.ts +11 -0
  98. package/src/components/Listbox/SkListbox.vue +164 -0
  99. package/src/components/Listbox/SkListboxItem.vue +68 -0
  100. package/src/components/Listbox/SkListboxSeparator.vue +26 -0
  101. package/src/components/Listbox/index.ts +10 -0
  102. package/src/components/Listbox/types.ts +10 -0
  103. package/src/components/Modal/SkModal.vue +231 -0
  104. package/src/components/Modal/index.ts +8 -0
  105. package/src/components/Modal/types.ts +12 -0
  106. package/src/components/NavBar/SkNavBar.vue +83 -0
  107. package/src/components/NavBar/index.ts +8 -0
  108. package/src/components/NavBar/types.ts +15 -0
  109. package/src/components/NumberInput/SkNumberInput.vue +168 -0
  110. package/src/components/NumberInput/index.ts +8 -0
  111. package/src/components/NumberInput/types.ts +10 -0
  112. package/src/components/Page/SkPage.vue +94 -0
  113. package/src/components/Page/index.ts +8 -0
  114. package/src/components/Page/types.ts +21 -0
  115. package/src/components/Pagination/SkPagination.vue +185 -0
  116. package/src/components/Pagination/SkPaginationItem.vue +107 -0
  117. package/src/components/Pagination/index.ts +9 -0
  118. package/src/components/Pagination/types.ts +40 -0
  119. package/src/components/Panel/SkPanel.vue +96 -0
  120. package/src/components/Panel/types.ts +15 -0
  121. package/src/components/Popover/SkPopover.vue +185 -0
  122. package/src/components/Popover/index.ts +8 -0
  123. package/src/components/Popover/types.ts +11 -0
  124. package/src/components/Progress/SkProgress.vue +144 -0
  125. package/src/components/Progress/index.ts +8 -0
  126. package/src/components/Progress/types.ts +34 -0
  127. package/src/components/Radio/SkRadio.vue +110 -0
  128. package/src/components/Radio/SkRadioGroup.vue +92 -0
  129. package/src/components/Radio/index.ts +9 -0
  130. package/src/components/Radio/types.ts +11 -0
  131. package/src/components/Sidebar/README.md +405 -0
  132. package/src/components/Sidebar/SkSidebar.vue +88 -0
  133. package/src/components/Sidebar/SkSidebarItem.vue +58 -0
  134. package/src/components/Sidebar/SkSidebarSection.vue +40 -0
  135. package/src/components/Sidebar/types.ts +3 -0
  136. package/src/components/Skeleton/SkSkeleton.vue +171 -0
  137. package/src/components/Skeleton/index.ts +8 -0
  138. package/src/components/Skeleton/types.ts +31 -0
  139. package/src/components/Slider/SkSlider.vue +165 -0
  140. package/src/components/Slider/index.ts +8 -0
  141. package/src/components/Slider/types.ts +44 -0
  142. package/src/components/Spinner/SkSpinner.vue +105 -0
  143. package/src/components/Spinner/index.ts +8 -0
  144. package/src/components/Spinner/types.ts +28 -0
  145. package/src/components/Switch/SkSwitch.vue +215 -0
  146. package/src/components/Switch/index.ts +8 -0
  147. package/src/components/Switch/types.ts +12 -0
  148. package/src/components/Table/SkTable.vue +109 -0
  149. package/src/components/Table/index.ts +2 -0
  150. package/src/components/Table/types.ts +15 -0
  151. package/src/components/Tabs/README.md +331 -0
  152. package/src/components/Tabs/SkTab.vue +84 -0
  153. package/src/components/Tabs/SkTabList.vue +62 -0
  154. package/src/components/Tabs/SkTabPanel.vue +47 -0
  155. package/src/components/Tabs/SkTabPanels.vue +23 -0
  156. package/src/components/Tabs/SkTabs.vue +124 -0
  157. package/src/components/Tabs/types.ts +21 -0
  158. package/src/components/Tag/SkTag.vue +129 -0
  159. package/src/components/Tag/types.ts +15 -0
  160. package/src/components/TagsInput/SkTagsInput.vue +184 -0
  161. package/src/components/TagsInput/index.ts +8 -0
  162. package/src/components/TagsInput/types.ts +10 -0
  163. package/src/components/Textarea/SkTextarea.vue +117 -0
  164. package/src/components/Textarea/index.ts +8 -0
  165. package/src/components/Textarea/types.ts +10 -0
  166. package/src/components/Theme/SkTheme.vue +47 -0
  167. package/src/components/Theme/types.ts +17 -0
  168. package/src/components/Theme/useTheme.ts +131 -0
  169. package/src/components/Toast/SkToast.vue +156 -0
  170. package/src/components/Toast/SkToastProvider.vue +180 -0
  171. package/src/components/Toast/index.ts +15 -0
  172. package/src/components/Toast/types.ts +63 -0
  173. package/src/components/Toast/useToast.ts +78 -0
  174. package/src/components/Tooltip/SkTooltip.vue +162 -0
  175. package/src/components/Tooltip/SkTooltipProvider.vue +114 -0
  176. package/src/components/Tooltip/index.ts +9 -0
  177. package/src/components/Tooltip/types.ts +13 -0
  178. package/src/composables/useCustomColors.test.ts +505 -0
  179. package/src/composables/useCustomColors.ts +124 -0
  180. package/src/composables/usePortalContext.test.ts +402 -0
  181. package/src/composables/usePortalContext.ts +95 -0
  182. package/src/global.d.ts +76 -0
  183. package/src/index.ts +259 -0
  184. package/src/styles/_scrollbar.scss +100 -0
  185. package/src/styles/base/_fonts.scss +105 -0
  186. package/src/styles/base/_global.scss +47 -0
  187. package/src/styles/base/_index.scss +24 -0
  188. package/src/styles/base/_reset.scss +11 -0
  189. package/src/styles/base/_typography.scss +178 -0
  190. package/src/styles/components/_accordion.scss +250 -0
  191. package/src/styles/components/_alert.scss +239 -0
  192. package/src/styles/components/_avatar.scss +133 -0
  193. package/src/styles/components/_breadcrumbs.scss +137 -0
  194. package/src/styles/components/_button.scss +731 -0
  195. package/src/styles/components/_card.scss +141 -0
  196. package/src/styles/components/_checkbox.scss +232 -0
  197. package/src/styles/components/_collapsible.scss +158 -0
  198. package/src/styles/components/_divider.scss +121 -0
  199. package/src/styles/components/_field.scss +87 -0
  200. package/src/styles/components/_group.scss +138 -0
  201. package/src/styles/components/_index.scss +46 -0
  202. package/src/styles/components/_input.scss +205 -0
  203. package/src/styles/components/_listbox.scss +453 -0
  204. package/src/styles/components/_menu.scss +216 -0
  205. package/src/styles/components/_modal.scss +329 -0
  206. package/src/styles/components/_navbar.scss +258 -0
  207. package/src/styles/components/_number-input.scss +352 -0
  208. package/src/styles/components/_page.scss +98 -0
  209. package/src/styles/components/_pagination.scss +411 -0
  210. package/src/styles/components/_panel.scss +281 -0
  211. package/src/styles/components/_popover.scss +258 -0
  212. package/src/styles/components/_progress.scss +280 -0
  213. package/src/styles/components/_radio.scss +255 -0
  214. package/src/styles/components/_sidebar.scss +92 -0
  215. package/src/styles/components/_skeleton.scss +138 -0
  216. package/src/styles/components/_slider.scss +262 -0
  217. package/src/styles/components/_spinner.scss +331 -0
  218. package/src/styles/components/_switch.scss +370 -0
  219. package/src/styles/components/_table.scss +405 -0
  220. package/src/styles/components/_tabs.scss +486 -0
  221. package/src/styles/components/_tag.scss +425 -0
  222. package/src/styles/components/_tags-input.scss +279 -0
  223. package/src/styles/components/_textarea.scss +208 -0
  224. package/src/styles/components/_toast.scss +331 -0
  225. package/src/styles/components/_tooltip.scss +206 -0
  226. package/src/styles/fonts/Titillium_Web/OFL.txt +93 -0
  227. package/src/styles/fonts/Titillium_Web/TitilliumWeb-Black.ttf +0 -0
  228. package/src/styles/fonts/Titillium_Web/TitilliumWeb-Bold.ttf +0 -0
  229. package/src/styles/fonts/Titillium_Web/TitilliumWeb-BoldItalic.ttf +0 -0
  230. package/src/styles/fonts/Titillium_Web/TitilliumWeb-ExtraLight.ttf +0 -0
  231. package/src/styles/fonts/Titillium_Web/TitilliumWeb-ExtraLightItalic.ttf +0 -0
  232. package/src/styles/fonts/Titillium_Web/TitilliumWeb-Italic.ttf +0 -0
  233. package/src/styles/fonts/Titillium_Web/TitilliumWeb-Light.ttf +0 -0
  234. package/src/styles/fonts/Titillium_Web/TitilliumWeb-LightItalic.ttf +0 -0
  235. package/src/styles/fonts/Titillium_Web/TitilliumWeb-Regular.ttf +0 -0
  236. package/src/styles/fonts/Titillium_Web/TitilliumWeb-SemiBold.ttf +0 -0
  237. package/src/styles/fonts/Titillium_Web/TitilliumWeb-SemiBoldItalic.ttf +0 -0
  238. package/src/styles/index.scss +17 -0
  239. package/src/styles/mixins/_cut-border.scss +254 -0
  240. package/src/styles/mixins/_index.scss +7 -0
  241. package/src/styles/theme/_variables.scss +42 -0
  242. package/src/styles/themes/README.md +127 -0
  243. package/src/styles/themes/_colorful.scss +58 -0
  244. package/src/styles/themes/_greyscale.scss +58 -0
  245. package/src/styles/themes/index.scss +9 -0
  246. package/src/styles/tokens/README.md +268 -0
  247. package/src/styles/tokens/_foundation-borders.scss +26 -0
  248. package/src/styles/tokens/_foundation-colors.scss +169 -0
  249. package/src/styles/tokens/_foundation-glow.scss +36 -0
  250. package/src/styles/tokens/_foundation-radius.scss +53 -0
  251. package/src/styles/tokens/_foundation-scrollbar.scss +31 -0
  252. package/src/styles/tokens/_foundation-shadows.scss +37 -0
  253. package/src/styles/tokens/_foundation-space.scss +36 -0
  254. package/src/styles/tokens/_foundation-transitions.scss +37 -0
  255. package/src/styles/tokens/_foundation-typography.scss +58 -0
  256. package/src/styles/tokens/_semantic-color-kinds.scss +112 -0
  257. package/src/styles/tokens/_semantic-colors.scss +10 -0
  258. package/src/styles/tokens/_semantic-interactive.scss +29 -0
  259. package/src/styles/tokens/_semantic-scrollbar.scss +48 -0
  260. package/src/styles/tokens/_semantic-surfaces.scss +36 -0
  261. package/src/styles/tokens/index.scss +38 -0
  262. package/src/styles/tokens.scss +268 -0
  263. package/src/styles/utilities/_index.scss +9 -0
  264. package/src/styles/utilities/_typography.scss +121 -0
  265. package/src/types.ts +50 -0
  266. package/web-types.json +3524 -0
package/src/styles/components/_avatar.scss ADDED
@@ -0,0 +1,133 @@
1
+ //----------------------------------------------------------------------------------------------------------------------
2
+ // Avatar Component Styles
3
+ //----------------------------------------------------------------------------------------------------------------------
4
+
5
+ @use '@/styles/mixins/cut-border' as *;
6
+
7
+ //----------------------------------------------------------------------------------------------------------------------
8
+
9
+ $kinds: (neutral, primary, accent, info, success, warning, danger);
10
+
11
+ //----------------------------------------------------------------------------------------------------------------------
12
+ // Kind Mixin
13
+ //----------------------------------------------------------------------------------------------------------------------
14
+
15
+ @mixin avatar-kind($kind)
16
+ {
17
+ &.sk-#{ '' + $kind }
18
+ {
19
+ --sk-avatar-color-base: var(--sk-#{ $kind }-base);
20
+ --sk-avatar-fg: var(--sk-#{ $kind }-text);
21
+ }
22
+ }
23
+
24
+ //----------------------------------------------------------------------------------------------------------------------
25
+ // Avatar Root
26
+ //----------------------------------------------------------------------------------------------------------------------
27
+
28
+ .sk-avatar
29
+ {
30
+ // CSS Variables
31
+ --sk-avatar-color-base: var(--sk-neutral-base);
32
+ --sk-avatar-fg: var(--sk-neutral-text);
33
+ --sk-avatar-size: 2.5rem;
34
+ --sk-avatar-bevel: calc(var(--sk-avatar-size) * 0.25);
35
+
36
+ display: inline-flex;
37
+ align-items: center;
38
+ justify-content: center;
39
+ width: var(--sk-avatar-size);
40
+ height: var(--sk-avatar-size);
41
+ flex-shrink: 0;
42
+
43
+ // Darker background
44
+ background: oklch(from var(--sk-avatar-color-base) calc(l * 0.3) c h);
45
+ color: var(--sk-avatar-fg);
46
+
47
+ // Beveled top-left and bottom-right corners with visible border
48
+ @include cut-border(
49
+ var(--sk-avatar-bevel),
50
+ var(--sk-border-width-normal),
51
+ var(--sk-avatar-color-base),
52
+ (top-left bottom-right)
53
+ );
54
+
55
+ // Prevent image from overflowing the beveled corners
56
+ overflow: hidden;
57
+
58
+ //------------------------------------------------------------------------------------------------------------------
59
+ // Size Variants
60
+ //------------------------------------------------------------------------------------------------------------------
61
+
62
+ &.sk-xs
63
+ {
64
+ --sk-avatar-size: 1.5rem;
65
+ }
66
+
67
+ &.sk-sm
68
+ {
69
+ --sk-avatar-size: 2rem;
70
+ }
71
+
72
+ &.sk-md
73
+ {
74
+ --sk-avatar-size: 2.5rem;
75
+ }
76
+
77
+ &.sk-lg
78
+ {
79
+ --sk-avatar-size: 3rem;
80
+ }
81
+
82
+ &.sk-xl
83
+ {
84
+ --sk-avatar-size: 4rem;
85
+ }
86
+
87
+ //------------------------------------------------------------------------------------------------------------------
88
+ // Kind Variants
89
+ //------------------------------------------------------------------------------------------------------------------
90
+
91
+ @each $kind in $kinds
92
+ {
93
+ @include avatar-kind($kind);
94
+ }
95
+ }
96
+
97
+ //----------------------------------------------------------------------------------------------------------------------
98
+ // Avatar Image
99
+ //----------------------------------------------------------------------------------------------------------------------
100
+
101
+ .sk-avatar-image
102
+ {
103
+ width: 100%;
104
+ height: 100%;
105
+ object-fit: cover;
106
+ display: block;
107
+ }
108
+
109
+ //----------------------------------------------------------------------------------------------------------------------
110
+ // Avatar Initials
111
+ //----------------------------------------------------------------------------------------------------------------------
112
+
113
+ .sk-avatar-initials
114
+ {
115
+ font-weight: 600;
116
+ font-size: calc(var(--sk-avatar-size) * 0.4);
117
+ line-height: 1;
118
+ text-transform: uppercase;
119
+ user-select: none;
120
+ }
121
+
122
+ //----------------------------------------------------------------------------------------------------------------------
123
+ // Avatar Icon (Fallback)
124
+ //----------------------------------------------------------------------------------------------------------------------
125
+
126
+ .sk-avatar-icon
127
+ {
128
+ width: calc(var(--sk-avatar-size) * 0.6);
129
+ height: calc(var(--sk-avatar-size) * 0.6);
130
+ opacity: 0.7;
131
+ }
132
+
133
+ //----------------------------------------------------------------------------------------------------------------------
package/src/styles/components/_breadcrumbs.scss ADDED
@@ -0,0 +1,137 @@
1
+ //----------------------------------------------------------------------------------------------------------------------
2
+ // Breadcrumbs Styles
3
+ //----------------------------------------------------------------------------------------------------------------------
4
+
5
+ //----------------------------------------------------------------------------------------------------------------------
6
+
7
+ .sk-breadcrumbs
8
+ {
9
+ // Color tokens - Default to neutral
10
+ --sk-breadcrumbs-color-base: var(--sk-neutral-base);
11
+ --sk-breadcrumbs-fg: var(--sk-neutral-text);
12
+
13
+ // Semantic kind variants
14
+ &.sk-neutral
15
+ {
16
+ --sk-breadcrumbs-color-base: var(--sk-neutral-base);
17
+ --sk-breadcrumbs-fg: var(--sk-neutral-text);
18
+ }
19
+
20
+ &.sk-primary
21
+ {
22
+ --sk-breadcrumbs-color-base: var(--sk-primary-base);
23
+ --sk-breadcrumbs-fg: var(--sk-primary-text);
24
+ }
25
+
26
+ &.sk-accent
27
+ {
28
+ --sk-breadcrumbs-color-base: var(--sk-accent-base);
29
+ --sk-breadcrumbs-fg: var(--sk-accent-text);
30
+ }
31
+
32
+ &.sk-info
33
+ {
34
+ --sk-breadcrumbs-color-base: var(--sk-info-base);
35
+ --sk-breadcrumbs-fg: var(--sk-info-text);
36
+ }
37
+
38
+ &.sk-success
39
+ {
40
+ --sk-breadcrumbs-color-base: var(--sk-success-base);
41
+ --sk-breadcrumbs-fg: var(--sk-success-text);
42
+ }
43
+
44
+ &.sk-warning
45
+ {
46
+ --sk-breadcrumbs-color-base: var(--sk-warning-base);
47
+ --sk-breadcrumbs-fg: var(--sk-warning-text);
48
+ }
49
+
50
+ &.sk-danger
51
+ {
52
+ --sk-breadcrumbs-color-base: var(--sk-danger-base);
53
+ --sk-breadcrumbs-fg: var(--sk-danger-text);
54
+ }
55
+ }
56
+
57
+ //----------------------------------------------------------------------------------------------------------------------
58
+
59
+ .sk-breadcrumbs-list
60
+ {
61
+ display: flex;
62
+ align-items: center;
63
+ gap: var(--sk-space-xs);
64
+ list-style: none;
65
+ margin: 0;
66
+ padding: 0;
67
+ }
68
+
69
+ //----------------------------------------------------------------------------------------------------------------------
70
+
71
+ .sk-breadcrumb-item
72
+ {
73
+ display: inline-flex;
74
+ align-items: center;
75
+
76
+ .sk-breadcrumb-link
77
+ {
78
+ display: inline-flex;
79
+ align-items: center;
80
+ gap: var(--sk-space-xs);
81
+ padding: var(--sk-space-xs) var(--sk-space-sm);
82
+ color: var(--sk-breadcrumbs-fg);
83
+ font-size: 0.875rem;
84
+ text-decoration: none;
85
+ transition: color var(--sk-transition-duration-fast);
86
+ border: none;
87
+ background: transparent;
88
+ font-family: inherit;
89
+ cursor: pointer;
90
+
91
+ // Hover state (except for current page)
92
+ &:hover:not([aria-current])
93
+ {
94
+ color: var(--sk-breadcrumbs-color-base);
95
+ text-decoration: underline;
96
+ }
97
+
98
+ // Current page
99
+ &[aria-current="page"]
100
+ {
101
+ color: var(--sk-breadcrumbs-color-base);
102
+ font-weight: 600;
103
+ cursor: default;
104
+ pointer-events: none;
105
+ }
106
+
107
+ // Disabled state
108
+ &:disabled
109
+ {
110
+ opacity: 0.5;
111
+ cursor: not-allowed;
112
+ pointer-events: none;
113
+ }
114
+
115
+ // Focus state
116
+ &:focus-visible
117
+ {
118
+ outline: var(--sk-border-width-base) solid var(--sk-breadcrumbs-color-base);
119
+ outline-offset: 2px;
120
+ border-radius: var(--sk-radius-sm);
121
+ }
122
+ }
123
+ }
124
+
125
+ //----------------------------------------------------------------------------------------------------------------------
126
+
127
+ .sk-breadcrumb-separator
128
+ {
129
+ display: inline-flex;
130
+ align-items: center;
131
+ color: color-mix(in oklch, var(--sk-breadcrumbs-fg), transparent 50%);
132
+ font-size: 0.875rem;
133
+ user-select: none;
134
+ pointer-events: none;
135
+ }
136
+
137
+ //----------------------------------------------------------------------------------------------------------------------