@surflane/ui 0.5.0 → 0.7.0

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 (175) hide show
  1. package/README.md +1 -1
  2. package/dist/app-shell.d.ts +44 -3
  3. package/dist/app-shell.js +81 -8
  4. package/dist/bottom-navigation.d.ts +66 -0
  5. package/dist/bottom-navigation.js +36 -0
  6. package/dist/chart.d.ts +16 -0
  7. package/dist/chart.js +103 -48
  8. package/dist/css/accordion.css +11 -0
  9. package/dist/css/alert-dialog.css +11 -0
  10. package/{src → dist/css}/all.css +1 -1
  11. package/dist/css/app-shell.css +12 -0
  12. package/dist/css/autocomplete.css +15 -0
  13. package/dist/css/avatar.css +10 -0
  14. package/dist/css/badge.css +10 -0
  15. package/dist/css/bottom-navigation.css +8 -0
  16. package/dist/css/breadcrumbs.css +12 -0
  17. package/dist/css/button.css +8 -0
  18. package/dist/css/card.css +11 -0
  19. package/dist/css/chart.css +13 -0
  20. package/dist/css/checkbox-group.css +9 -0
  21. package/dist/css/checkbox.css +9 -0
  22. package/dist/css/choice-label.css +9 -0
  23. package/dist/css/code.css +13 -0
  24. package/dist/css/collapsible.css +11 -0
  25. package/dist/css/combobox.css +14 -0
  26. package/dist/css/context-menu.css +15 -0
  27. package/dist/css/date-picker.css +12 -0
  28. package/dist/css/dialog.css +10 -0
  29. package/dist/css/drawer.css +11 -0
  30. package/dist/css/empty-state.css +9 -0
  31. package/dist/css/field.css +10 -0
  32. package/dist/css/fieldset.css +8 -0
  33. package/dist/css/file-upload.css +17 -0
  34. package/dist/css/filter-bar.css +8 -0
  35. package/dist/css/form.css +8 -0
  36. package/dist/css/icon.css +8 -0
  37. package/dist/css/inline-message.css +10 -0
  38. package/dist/css/input.css +9 -0
  39. package/dist/css/layout.css +9 -0
  40. package/dist/css/link.css +9 -0
  41. package/dist/css/list.css +9 -0
  42. package/dist/css/markdown.css +18 -0
  43. package/dist/css/menu.css +14 -0
  44. package/dist/css/menubar.css +9 -0
  45. package/dist/css/meter.css +9 -0
  46. package/dist/css/native-select.css +13 -0
  47. package/dist/css/navigation-menu.css +11 -0
  48. package/dist/css/number-field.css +11 -0
  49. package/dist/css/otp-field.css +10 -0
  50. package/dist/css/page-header.css +11 -0
  51. package/dist/css/pagination.css +11 -0
  52. package/dist/css/popover.css +9 -0
  53. package/dist/css/preview-card.css +11 -0
  54. package/dist/css/progress.css +9 -0
  55. package/dist/css/radio-group.css +9 -0
  56. package/dist/css/rules/accordion.css +21 -0
  57. package/dist/css/rules/alert-dialog.css +23 -0
  58. package/dist/css/rules/app-shell.css +227 -0
  59. package/dist/css/rules/autocomplete.css +3 -0
  60. package/dist/css/rules/avatar.css +17 -0
  61. package/dist/css/rules/badge.css +17 -0
  62. package/dist/css/rules/bar.css +38 -0
  63. package/dist/css/rules/base.css +46 -0
  64. package/dist/css/rules/bottom-navigation.css +142 -0
  65. package/dist/css/rules/breadcrumbs.css +9 -0
  66. package/dist/css/rules/button.css +131 -0
  67. package/dist/css/rules/card.css +10 -0
  68. package/dist/css/rules/chart.css +264 -0
  69. package/dist/css/rules/checkbox-group.css +3 -0
  70. package/dist/css/rules/checkbox.css +25 -0
  71. package/dist/css/rules/choice-label.css +52 -0
  72. package/dist/css/rules/choice.css +104 -0
  73. package/dist/css/rules/code.css +9 -0
  74. package/dist/css/rules/collapsible.css +12 -0
  75. package/dist/css/rules/combobox.css +177 -0
  76. package/dist/css/rules/context-menu.css +9 -0
  77. package/dist/css/rules/date-picker.css +301 -0
  78. package/dist/css/rules/dialog.css +160 -0
  79. package/dist/css/rules/disclosure.css +107 -0
  80. package/dist/css/rules/drawer.css +18 -0
  81. package/dist/css/rules/empty-state.css +9 -0
  82. package/dist/css/rules/field-control.css +70 -0
  83. package/dist/css/rules/field.css +56 -0
  84. package/dist/css/rules/fieldset.css +23 -0
  85. package/dist/css/rules/file-upload.css +156 -0
  86. package/dist/css/rules/filter-bar.css +56 -0
  87. package/dist/css/rules/form.css +15 -0
  88. package/dist/css/rules/gauge.css +61 -0
  89. package/dist/css/rules/icon.css +27 -0
  90. package/dist/css/rules/inline-message.css +10 -0
  91. package/dist/css/rules/input-group.css +69 -0
  92. package/dist/css/rules/input.css +33 -0
  93. package/dist/css/rules/item.css +14 -0
  94. package/dist/css/rules/layout.css +3 -0
  95. package/dist/css/rules/link.css +9 -0
  96. package/dist/css/rules/list.css +10 -0
  97. package/dist/css/rules/markdown.css +63 -0
  98. package/dist/css/rules/menu.css +97 -0
  99. package/dist/css/rules/menubar.css +18 -0
  100. package/dist/css/rules/meter.css +3 -0
  101. package/dist/css/rules/native-select.css +3 -0
  102. package/dist/css/rules/navigation-menu.css +159 -0
  103. package/dist/css/rules/number-field.css +55 -0
  104. package/dist/css/rules/otp-field.css +68 -0
  105. package/dist/css/rules/page-header.css +3 -0
  106. package/dist/css/rules/pagination.css +3 -0
  107. package/dist/css/rules/panel.css +221 -0
  108. package/dist/css/rules/popover.css +41 -0
  109. package/dist/css/rules/popup.css +27 -0
  110. package/dist/css/rules/preview-card.css +60 -0
  111. package/dist/css/rules/progress.css +14 -0
  112. package/dist/css/rules/radio-group.css +26 -0
  113. package/dist/css/rules/scroll-area.css +101 -0
  114. package/dist/css/rules/select.css +88 -0
  115. package/dist/css/rules/separator.css +3 -0
  116. package/dist/css/rules/sheet.css +3 -0
  117. package/dist/css/rules/sizing.css +140 -0
  118. package/dist/css/rules/skeleton.css +41 -0
  119. package/dist/css/rules/slider.css +123 -0
  120. package/dist/css/rules/sparkline.css +52 -0
  121. package/dist/css/rules/spinner.css +38 -0
  122. package/dist/css/rules/stat.css +59 -0
  123. package/dist/css/rules/switch.css +50 -0
  124. package/dist/css/rules/syntax-highlighter.css +82 -0
  125. package/dist/css/rules/table.css +28 -0
  126. package/dist/css/rules/tabs.css +126 -0
  127. package/dist/css/rules/textarea.css +21 -0
  128. package/dist/css/rules/toast.css +247 -0
  129. package/dist/css/rules/toggle-group.css +3 -0
  130. package/dist/css/rules/toggle.css +27 -0
  131. package/dist/css/rules/toolbar.css +62 -0
  132. package/dist/css/rules/tooltip.css +38 -0
  133. package/dist/css/rules/tree.css +98 -0
  134. package/dist/css/rules/typography.css +3 -0
  135. package/dist/css/scroll-area.css +8 -0
  136. package/dist/css/select.css +12 -0
  137. package/dist/css/separator.css +9 -0
  138. package/dist/css/sheet.css +11 -0
  139. package/dist/css/sizing.css +7 -0
  140. package/dist/css/skeleton.css +8 -0
  141. package/dist/css/slider.css +8 -0
  142. package/dist/css/sparkline.css +8 -0
  143. package/dist/css/spinner.css +8 -0
  144. package/dist/css/stat.css +9 -0
  145. package/dist/css/styles.css +100 -0
  146. package/dist/css/switch.css +9 -0
  147. package/dist/css/syntax-highlighter.css +9 -0
  148. package/dist/css/table.css +12 -0
  149. package/dist/css/tabs.css +8 -0
  150. package/dist/css/textarea.css +10 -0
  151. package/dist/css/toast.css +11 -0
  152. package/dist/css/toggle-group.css +9 -0
  153. package/dist/css/toggle.css +10 -0
  154. package/dist/css/toolbar.css +12 -0
  155. package/dist/css/tooltip.css +9 -0
  156. package/dist/css/tree.css +10 -0
  157. package/dist/css/typography.css +9 -0
  158. package/dist/format.d.ts +25 -0
  159. package/dist/format.js +42 -0
  160. package/dist/icon.d.ts +1 -0
  161. package/dist/icon.js +1 -0
  162. package/dist/index.d.ts +7 -3
  163. package/dist/index.js +6 -2
  164. package/dist/sparkline.d.ts +41 -0
  165. package/dist/sparkline.js +50 -0
  166. package/dist/stat.d.ts +59 -0
  167. package/dist/stat.js +26 -0
  168. package/dist/status.d.ts +1 -1
  169. package/dist/status.js +1 -0
  170. package/dist/toast.d.ts +57 -1
  171. package/dist/toast.js +73 -2
  172. package/dist/tooltip.d.ts +9 -3
  173. package/dist/tooltip.js +4 -4
  174. package/package.json +90 -7
  175. package/src/styles.css +0 -3948
@@ -0,0 +1,15 @@
1
+ /* Autocomplete, with the styles of what it renders. */
2
+ @layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
3
+ surflane.sizes;
4
+ @import '@surflane/design-tokens/tokens.css';
5
+ @import '@surflane/design-tokens/presentation/base.css';
6
+ @import './rules/base.css';
7
+ @import './rules/field-control.css';
8
+ @import './rules/sizing.css';
9
+ @import './rules/input.css';
10
+ @import './rules/popup.css';
11
+ @import './rules/item.css';
12
+ @import './rules/icon.css';
13
+ @import './rules/input-group.css';
14
+ @import './rules/combobox.css';
15
+ @import './rules/autocomplete.css';
@@ -0,0 +1,10 @@
1
+ /* Avatar, with the styles of what it renders. */
2
+ @layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
3
+ surflane.sizes;
4
+ @import '@surflane/design-tokens/tokens.css';
5
+ @import '@surflane/design-tokens/presentation/base.css';
6
+ @import './rules/base.css';
7
+ @import './rules/sizing.css';
8
+ @import './rules/icon.css';
9
+ @import '@surflane/design-tokens/presentation/avatar.css';
10
+ @import './rules/avatar.css';
@@ -0,0 +1,10 @@
1
+ /* Badge / Status, with the styles of what it renders. */
2
+ @layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
3
+ surflane.sizes;
4
+ @import '@surflane/design-tokens/tokens.css';
5
+ @import '@surflane/design-tokens/presentation/base.css';
6
+ @import './rules/base.css';
7
+ @import './rules/sizing.css';
8
+ @import './rules/icon.css';
9
+ @import '@surflane/design-tokens/presentation/badge.css';
10
+ @import './rules/badge.css';
@@ -0,0 +1,8 @@
1
+ /* Bottom navigation, with the styles of what it renders. */
2
+ @layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
3
+ surflane.sizes;
4
+ @import '@surflane/design-tokens/tokens.css';
5
+ @import '@surflane/design-tokens/presentation/base.css';
6
+ @import './rules/base.css';
7
+ @import './rules/sizing.css';
8
+ @import './rules/bottom-navigation.css';
@@ -0,0 +1,12 @@
1
+ /* Breadcrumbs, with the styles of what it renders. */
2
+ @layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
3
+ surflane.sizes;
4
+ @import '@surflane/design-tokens/tokens.css';
5
+ @import '@surflane/design-tokens/presentation/base.css';
6
+ @import './rules/base.css';
7
+ @import './rules/sizing.css';
8
+ @import './rules/icon.css';
9
+ @import '@surflane/design-tokens/presentation/link.css';
10
+ @import './rules/link.css';
11
+ @import '@surflane/design-tokens/presentation/breadcrumbs.css';
12
+ @import './rules/breadcrumbs.css';
@@ -0,0 +1,8 @@
1
+ /* Button, with the styles of what it renders. */
2
+ @layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
3
+ surflane.sizes;
4
+ @import '@surflane/design-tokens/tokens.css';
5
+ @import '@surflane/design-tokens/presentation/base.css';
6
+ @import './rules/base.css';
7
+ @import './rules/sizing.css';
8
+ @import './rules/button.css';
@@ -0,0 +1,11 @@
1
+ /* Card / Surface, with the styles of what it renders. */
2
+ @layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
3
+ surflane.sizes;
4
+ @import '@surflane/design-tokens/tokens.css';
5
+ @import '@surflane/design-tokens/presentation/base.css';
6
+ @import './rules/base.css';
7
+ @import './rules/sizing.css';
8
+ @import '@surflane/design-tokens/foundations/layout.css';
9
+ @import './rules/layout.css';
10
+ @import '@surflane/design-tokens/presentation/card.css';
11
+ @import './rules/card.css';
@@ -0,0 +1,13 @@
1
+ /* Chart, with the styles of what it renders. */
2
+ @layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
3
+ surflane.sizes;
4
+ @import '@surflane/design-tokens/tokens.css';
5
+ @import '@surflane/design-tokens/presentation/base.css';
6
+ @import './rules/base.css';
7
+ @import './rules/sizing.css';
8
+ @import './rules/icon.css';
9
+ @import './rules/button.css';
10
+ @import './rules/scroll-area.css';
11
+ @import '@surflane/design-tokens/presentation/table.css';
12
+ @import './rules/table.css';
13
+ @import './rules/chart.css';
@@ -0,0 +1,9 @@
1
+ /* Checkbox Group, with the styles of what it renders. */
2
+ @layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
3
+ surflane.sizes;
4
+ @import '@surflane/design-tokens/tokens.css';
5
+ @import '@surflane/design-tokens/presentation/base.css';
6
+ @import './rules/base.css';
7
+ @import './rules/sizing.css';
8
+ @import './rules/choice.css';
9
+ @import './rules/checkbox-group.css';
@@ -0,0 +1,9 @@
1
+ /* Checkbox, with the styles of what it renders. */
2
+ @layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
3
+ surflane.sizes;
4
+ @import '@surflane/design-tokens/tokens.css';
5
+ @import '@surflane/design-tokens/presentation/base.css';
6
+ @import './rules/base.css';
7
+ @import './rules/sizing.css';
8
+ @import './rules/choice.css';
9
+ @import './rules/checkbox.css';
@@ -0,0 +1,9 @@
1
+ /* ChoiceLabel, with the styles of what it renders. */
2
+ @layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
3
+ surflane.sizes;
4
+ @import '@surflane/design-tokens/tokens.css';
5
+ @import '@surflane/design-tokens/presentation/base.css';
6
+ @import './rules/base.css';
7
+ @import './rules/sizing.css';
8
+ @import './rules/choice.css';
9
+ @import './rules/choice-label.css';
@@ -0,0 +1,13 @@
1
+ /* Code block, with the styles of what it renders. */
2
+ @layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
3
+ surflane.sizes;
4
+ @import '@surflane/design-tokens/tokens.css';
5
+ @import '@surflane/design-tokens/presentation/base.css';
6
+ @import './rules/base.css';
7
+ @import './rules/sizing.css';
8
+ @import './rules/icon.css';
9
+ @import './rules/button.css';
10
+ @import './rules/scroll-area.css';
11
+ @import './rules/syntax-highlighter.css';
12
+ @import '@surflane/design-tokens/presentation/code.css';
13
+ @import './rules/code.css';
@@ -0,0 +1,11 @@
1
+ /* Collapsible, with the styles of what it renders. */
2
+ @layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
3
+ surflane.sizes;
4
+ @import '@surflane/design-tokens/tokens.css';
5
+ @import '@surflane/design-tokens/presentation/base.css';
6
+ @import './rules/base.css';
7
+ @import './rules/sizing.css';
8
+ @import './rules/icon.css';
9
+ @import './rules/button.css';
10
+ @import './rules/disclosure.css';
11
+ @import './rules/collapsible.css';
@@ -0,0 +1,14 @@
1
+ /* Combobox, with the styles of what it renders. */
2
+ @layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
3
+ surflane.sizes;
4
+ @import '@surflane/design-tokens/tokens.css';
5
+ @import '@surflane/design-tokens/presentation/base.css';
6
+ @import './rules/base.css';
7
+ @import './rules/field-control.css';
8
+ @import './rules/sizing.css';
9
+ @import './rules/input.css';
10
+ @import './rules/popup.css';
11
+ @import './rules/item.css';
12
+ @import './rules/icon.css';
13
+ @import './rules/input-group.css';
14
+ @import './rules/combobox.css';
@@ -0,0 +1,15 @@
1
+ /* Context Menu, with the styles of what it renders. */
2
+ @layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
3
+ surflane.sizes;
4
+ @import '@surflane/design-tokens/tokens.css';
5
+ @import '@surflane/design-tokens/presentation/base.css';
6
+ @import './rules/base.css';
7
+ @import './rules/field-control.css';
8
+ @import './rules/sizing.css';
9
+ @import './rules/input.css';
10
+ @import './rules/popup.css';
11
+ @import './rules/item.css';
12
+ @import './rules/icon.css';
13
+ @import './rules/button.css';
14
+ @import './rules/menu.css';
15
+ @import './rules/context-menu.css';
@@ -0,0 +1,12 @@
1
+ /* Date / time picker, with the styles of what it renders. */
2
+ @layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
3
+ surflane.sizes;
4
+ @import '@surflane/design-tokens/tokens.css';
5
+ @import '@surflane/design-tokens/presentation/base.css';
6
+ @import './rules/base.css';
7
+ @import './rules/field-control.css';
8
+ @import './rules/sizing.css';
9
+ @import './rules/input.css';
10
+ @import './rules/icon.css';
11
+ @import './rules/field.css';
12
+ @import './rules/date-picker.css';
@@ -0,0 +1,10 @@
1
+ /* Dialog, with the styles of what it renders. */
2
+ @layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
3
+ surflane.sizes;
4
+ @import '@surflane/design-tokens/tokens.css';
5
+ @import '@surflane/design-tokens/presentation/base.css';
6
+ @import './rules/base.css';
7
+ @import './rules/sizing.css';
8
+ @import './rules/icon.css';
9
+ @import '@surflane/design-tokens/controls.css';
10
+ @import './rules/dialog.css';
@@ -0,0 +1,11 @@
1
+ /* Drawer, with the styles of what it renders. */
2
+ @layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
3
+ surflane.sizes;
4
+ @import '@surflane/design-tokens/tokens.css';
5
+ @import '@surflane/design-tokens/presentation/base.css';
6
+ @import './rules/base.css';
7
+ @import './rules/sizing.css';
8
+ @import './rules/icon.css';
9
+ @import '@surflane/design-tokens/controls.css';
10
+ @import './rules/panel.css';
11
+ @import './rules/drawer.css';
@@ -0,0 +1,9 @@
1
+ /* Empty state, with the styles of what it renders. */
2
+ @layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
3
+ surflane.sizes;
4
+ @import '@surflane/design-tokens/tokens.css';
5
+ @import '@surflane/design-tokens/presentation/base.css';
6
+ @import './rules/base.css';
7
+ @import './rules/sizing.css';
8
+ @import '@surflane/design-tokens/presentation/empty-state.css';
9
+ @import './rules/empty-state.css';
@@ -0,0 +1,10 @@
1
+ /* Field, with the styles of what it renders. */
2
+ @layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
3
+ surflane.sizes;
4
+ @import '@surflane/design-tokens/tokens.css';
5
+ @import '@surflane/design-tokens/presentation/base.css';
6
+ @import './rules/base.css';
7
+ @import './rules/field-control.css';
8
+ @import './rules/sizing.css';
9
+ @import './rules/input.css';
10
+ @import './rules/field.css';
@@ -0,0 +1,8 @@
1
+ /* Fieldset, with the styles of what it renders. */
2
+ @layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
3
+ surflane.sizes;
4
+ @import '@surflane/design-tokens/tokens.css';
5
+ @import '@surflane/design-tokens/presentation/base.css';
6
+ @import './rules/base.css';
7
+ @import './rules/sizing.css';
8
+ @import './rules/fieldset.css';
@@ -0,0 +1,17 @@
1
+ /* File upload, with the styles of what it renders. */
2
+ @layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
3
+ surflane.sizes;
4
+ @import '@surflane/design-tokens/tokens.css';
5
+ @import '@surflane/design-tokens/presentation/base.css';
6
+ @import './rules/base.css';
7
+ @import './rules/field-control.css';
8
+ @import './rules/sizing.css';
9
+ @import './rules/input.css';
10
+ @import './rules/icon.css';
11
+ @import './rules/button.css';
12
+ @import './rules/field.css';
13
+ @import './rules/gauge.css';
14
+ @import './rules/progress.css';
15
+ @import '@surflane/design-tokens/presentation/badge.css';
16
+ @import './rules/badge.css';
17
+ @import './rules/file-upload.css';
@@ -0,0 +1,8 @@
1
+ /* Search / filter bar, with the styles of what it renders. */
2
+ @layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
3
+ surflane.sizes;
4
+ @import '@surflane/design-tokens/tokens.css';
5
+ @import '@surflane/design-tokens/presentation/base.css';
6
+ @import './rules/base.css';
7
+ @import './rules/sizing.css';
8
+ @import './rules/filter-bar.css';
@@ -0,0 +1,8 @@
1
+ /* Form, with the styles of what it renders. */
2
+ @layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
3
+ surflane.sizes;
4
+ @import '@surflane/design-tokens/tokens.css';
5
+ @import '@surflane/design-tokens/presentation/base.css';
6
+ @import './rules/base.css';
7
+ @import './rules/sizing.css';
8
+ @import './rules/form.css';
@@ -0,0 +1,8 @@
1
+ /* Icon, with the styles of what it renders. */
2
+ @layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
3
+ surflane.sizes;
4
+ @import '@surflane/design-tokens/tokens.css';
5
+ @import '@surflane/design-tokens/presentation/base.css';
6
+ @import './rules/base.css';
7
+ @import './rules/sizing.css';
8
+ @import './rules/icon.css';
@@ -0,0 +1,10 @@
1
+ /* Inline message, with the styles of what it renders. */
2
+ @layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
3
+ surflane.sizes;
4
+ @import '@surflane/design-tokens/tokens.css';
5
+ @import '@surflane/design-tokens/presentation/base.css';
6
+ @import './rules/base.css';
7
+ @import './rules/sizing.css';
8
+ @import './rules/icon.css';
9
+ @import '@surflane/design-tokens/presentation/inline-message.css';
10
+ @import './rules/inline-message.css';
@@ -0,0 +1,9 @@
1
+ /* Input, with the styles of what it renders. */
2
+ @layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
3
+ surflane.sizes;
4
+ @import '@surflane/design-tokens/tokens.css';
5
+ @import '@surflane/design-tokens/presentation/base.css';
6
+ @import './rules/base.css';
7
+ @import './rules/field-control.css';
8
+ @import './rules/sizing.css';
9
+ @import './rules/input.css';
@@ -0,0 +1,9 @@
1
+ /* Container, Stack, Inline, Grid and Surface, with the styles of what it renders. */
2
+ @layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
3
+ surflane.sizes;
4
+ @import '@surflane/design-tokens/tokens.css';
5
+ @import '@surflane/design-tokens/presentation/base.css';
6
+ @import './rules/base.css';
7
+ @import './rules/sizing.css';
8
+ @import '@surflane/design-tokens/foundations/layout.css';
9
+ @import './rules/layout.css';
@@ -0,0 +1,9 @@
1
+ /* Link, with the styles of what it renders. */
2
+ @layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
3
+ surflane.sizes;
4
+ @import '@surflane/design-tokens/tokens.css';
5
+ @import '@surflane/design-tokens/presentation/base.css';
6
+ @import './rules/base.css';
7
+ @import './rules/sizing.css';
8
+ @import '@surflane/design-tokens/presentation/link.css';
9
+ @import './rules/link.css';
@@ -0,0 +1,9 @@
1
+ /* List, with the styles of what it renders. */
2
+ @layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
3
+ surflane.sizes;
4
+ @import '@surflane/design-tokens/tokens.css';
5
+ @import '@surflane/design-tokens/presentation/base.css';
6
+ @import './rules/base.css';
7
+ @import './rules/sizing.css';
8
+ @import '@surflane/design-tokens/presentation/list.css';
9
+ @import './rules/list.css';
@@ -0,0 +1,18 @@
1
+ /* Markdown, with the styles of what it renders. */
2
+ @layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
3
+ surflane.sizes;
4
+ @import '@surflane/design-tokens/tokens.css';
5
+ @import '@surflane/design-tokens/presentation/base.css';
6
+ @import './rules/base.css';
7
+ @import './rules/sizing.css';
8
+ @import './rules/icon.css';
9
+ @import './rules/button.css';
10
+ @import './rules/scroll-area.css';
11
+ @import '@surflane/design-tokens/presentation/table.css';
12
+ @import './rules/table.css';
13
+ @import './rules/syntax-highlighter.css';
14
+ @import '@surflane/design-tokens/presentation/code.css';
15
+ @import './rules/code.css';
16
+ @import '@surflane/design-tokens/foundations/typography.css';
17
+ @import './rules/typography.css';
18
+ @import './rules/markdown.css';
@@ -0,0 +1,14 @@
1
+ /* Menu, with the styles of what it renders. */
2
+ @layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
3
+ surflane.sizes;
4
+ @import '@surflane/design-tokens/tokens.css';
5
+ @import '@surflane/design-tokens/presentation/base.css';
6
+ @import './rules/base.css';
7
+ @import './rules/field-control.css';
8
+ @import './rules/sizing.css';
9
+ @import './rules/input.css';
10
+ @import './rules/popup.css';
11
+ @import './rules/item.css';
12
+ @import './rules/icon.css';
13
+ @import './rules/button.css';
14
+ @import './rules/menu.css';
@@ -0,0 +1,9 @@
1
+ /* Menubar, with the styles of what it renders. */
2
+ @layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
3
+ surflane.sizes;
4
+ @import '@surflane/design-tokens/tokens.css';
5
+ @import '@surflane/design-tokens/presentation/base.css';
6
+ @import './rules/base.css';
7
+ @import './rules/sizing.css';
8
+ @import './rules/bar.css';
9
+ @import './rules/menubar.css';
@@ -0,0 +1,9 @@
1
+ /* Meter, with the styles of what it renders. */
2
+ @layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
3
+ surflane.sizes;
4
+ @import '@surflane/design-tokens/tokens.css';
5
+ @import '@surflane/design-tokens/presentation/base.css';
6
+ @import './rules/base.css';
7
+ @import './rules/sizing.css';
8
+ @import './rules/gauge.css';
9
+ @import './rules/meter.css';
@@ -0,0 +1,13 @@
1
+ /* NativeSelect adapter, with the styles of what it renders. */
2
+ @layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
3
+ surflane.sizes;
4
+ @import '@surflane/design-tokens/tokens.css';
5
+ @import '@surflane/design-tokens/presentation/base.css';
6
+ @import './rules/base.css';
7
+ @import './rules/field-control.css';
8
+ @import './rules/sizing.css';
9
+ @import './rules/popup.css';
10
+ @import './rules/item.css';
11
+ @import './rules/icon.css';
12
+ @import './rules/select.css';
13
+ @import './rules/native-select.css';
@@ -0,0 +1,11 @@
1
+ /* Navigation Menu, with the styles of what it renders. */
2
+ @layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
3
+ surflane.sizes;
4
+ @import '@surflane/design-tokens/tokens.css';
5
+ @import '@surflane/design-tokens/presentation/base.css';
6
+ @import './rules/base.css';
7
+ @import './rules/sizing.css';
8
+ @import './rules/popup.css';
9
+ @import './rules/icon.css';
10
+ @import './rules/button.css';
11
+ @import './rules/navigation-menu.css';
@@ -0,0 +1,11 @@
1
+ /* Number Field, with the styles of what it renders. */
2
+ @layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
3
+ surflane.sizes;
4
+ @import '@surflane/design-tokens/tokens.css';
5
+ @import '@surflane/design-tokens/presentation/base.css';
6
+ @import './rules/base.css';
7
+ @import './rules/field-control.css';
8
+ @import './rules/sizing.css';
9
+ @import './rules/icon.css';
10
+ @import './rules/input-group.css';
11
+ @import './rules/number-field.css';
@@ -0,0 +1,10 @@
1
+ /* OTP Field, with the styles of what it renders. */
2
+ @layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
3
+ surflane.sizes;
4
+ @import '@surflane/design-tokens/tokens.css';
5
+ @import '@surflane/design-tokens/presentation/base.css';
6
+ @import './rules/base.css';
7
+ @import './rules/field-control.css';
8
+ @import './rules/sizing.css';
9
+ @import './rules/input.css';
10
+ @import './rules/otp-field.css';
@@ -0,0 +1,11 @@
1
+ /* Page header, with the styles of what it renders. */
2
+ @layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
3
+ surflane.sizes;
4
+ @import '@surflane/design-tokens/tokens.css';
5
+ @import '@surflane/design-tokens/presentation/base.css';
6
+ @import './rules/base.css';
7
+ @import './rules/sizing.css';
8
+ @import '@surflane/design-tokens/foundations/typography.css';
9
+ @import './rules/typography.css';
10
+ @import '@surflane/design-tokens/foundations/page-header.css';
11
+ @import './rules/page-header.css';
@@ -0,0 +1,11 @@
1
+ /* Pagination, with the styles of what it renders. */
2
+ @layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
3
+ surflane.sizes;
4
+ @import '@surflane/design-tokens/tokens.css';
5
+ @import '@surflane/design-tokens/presentation/base.css';
6
+ @import './rules/base.css';
7
+ @import './rules/sizing.css';
8
+ @import './rules/icon.css';
9
+ @import './rules/button.css';
10
+ @import '@surflane/design-tokens/presentation/pagination.css';
11
+ @import './rules/pagination.css';
@@ -0,0 +1,9 @@
1
+ /* Popover, with the styles of what it renders. */
2
+ @layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
3
+ surflane.sizes;
4
+ @import '@surflane/design-tokens/tokens.css';
5
+ @import '@surflane/design-tokens/presentation/base.css';
6
+ @import './rules/base.css';
7
+ @import './rules/sizing.css';
8
+ @import './rules/popup.css';
9
+ @import './rules/popover.css';
@@ -0,0 +1,11 @@
1
+ /* Preview Card, with the styles of what it renders. */
2
+ @layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
3
+ surflane.sizes;
4
+ @import '@surflane/design-tokens/tokens.css';
5
+ @import '@surflane/design-tokens/presentation/base.css';
6
+ @import './rules/base.css';
7
+ @import './rules/sizing.css';
8
+ @import './rules/popup.css';
9
+ @import '@surflane/design-tokens/presentation/link.css';
10
+ @import './rules/link.css';
11
+ @import './rules/preview-card.css';
@@ -0,0 +1,9 @@
1
+ /* Progress, with the styles of what it renders. */
2
+ @layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
3
+ surflane.sizes;
4
+ @import '@surflane/design-tokens/tokens.css';
5
+ @import '@surflane/design-tokens/presentation/base.css';
6
+ @import './rules/base.css';
7
+ @import './rules/sizing.css';
8
+ @import './rules/gauge.css';
9
+ @import './rules/progress.css';
@@ -0,0 +1,9 @@
1
+ /* Radio Group, with the styles of what it renders. */
2
+ @layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
3
+ surflane.sizes;
4
+ @import '@surflane/design-tokens/tokens.css';
5
+ @import '@surflane/design-tokens/presentation/base.css';
6
+ @import './rules/base.css';
7
+ @import './rules/sizing.css';
8
+ @import './rules/choice.css';
9
+ @import './rules/radio-group.css';
@@ -0,0 +1,21 @@
1
+ /* Accordion, with the styles of what it renders. */
2
+ @layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
3
+ surflane.sizes;
4
+
5
+ @layer surflane.components {
6
+ .pui-accordion {
7
+ display: grid;
8
+ gap: var(--space-2);
9
+ min-width: 0;
10
+ }
11
+ .pui-accordion-header {
12
+ margin: 0;
13
+ font: inherit;
14
+ }
15
+ .pui-accordion-panel {
16
+ height: var(--accordion-panel-height);
17
+ }
18
+ .pui-accordion-panel[data-ending-style] {
19
+ pointer-events: none;
20
+ }
21
+ }
@@ -0,0 +1,23 @@
1
+ /* Alert Dialog, with the styles of what it renders. */
2
+ @layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
3
+ surflane.sizes;
4
+
5
+ @layer surflane.components {
6
+ .pui-confirm-content {
7
+ --dialog-width: var(--size-dialog-small);
8
+ }
9
+ .pui-confirm-content .pui-dialog-footer {
10
+ border-top: 0;
11
+ padding-top: var(--space-2);
12
+ }
13
+ }
14
+ @layer surflane.sizes {
15
+ .pui-confirm-content .pui-dialog-header {
16
+ padding-inline-end: var(--space-6);
17
+ border-bottom: 0;
18
+ }
19
+ :where([data-ui-size], [data-ui-size] *).pui-confirm-content
20
+ .pui-dialog-header {
21
+ padding-inline-end: var(--ui-card-padding);
22
+ }
23
+ }