@byline/ui 6.10.0 → 6.11.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 (132) hide show
  1. package/dist/components/accordion/accordion_module.css +3 -3
  2. package/dist/components/avatar/avatar_module.css +3 -3
  3. package/dist/components/badge/badge_module.css +3 -3
  4. package/dist/components/button/button-group_module.css +3 -3
  5. package/dist/components/button/button_module.css +3 -3
  6. package/dist/components/button/combo-button_module.css +3 -3
  7. package/dist/components/button/control-buttons_module.css +3 -3
  8. package/dist/components/button/copy-button_module.css +3 -3
  9. package/dist/components/card/card_module.css +3 -3
  10. package/dist/components/chips/chip_module.css +3 -3
  11. package/dist/components/container/container_module.css +3 -3
  12. package/dist/components/dropdown/dropdown_module.css +3 -3
  13. package/dist/components/hamburger/hamburger_module.css +3 -3
  14. package/dist/components/inputs/autocomplete_module.css +3 -3
  15. package/dist/components/inputs/calendar_module.css +3 -3
  16. package/dist/components/inputs/checkbox-group_module.css +3 -3
  17. package/dist/components/inputs/checkbox_module.css +3 -3
  18. package/dist/components/inputs/error-text_module.css +3 -3
  19. package/dist/components/inputs/help-text_module.css +3 -3
  20. package/dist/components/inputs/input-adornment_module.css +3 -3
  21. package/dist/components/inputs/input-password_module.css +5 -1
  22. package/dist/components/inputs/input_module.css +3 -3
  23. package/dist/components/inputs/label_module.css +3 -3
  24. package/dist/components/inputs/radio-group_module.css +3 -3
  25. package/dist/components/inputs/select_module.css +3 -3
  26. package/dist/components/inputs/text-area_module.css +3 -3
  27. package/dist/components/notifications/alert_module.css +3 -3
  28. package/dist/components/notifications/toast_module.css +3 -3
  29. package/dist/components/pager/pagination_module.css +3 -3
  30. package/dist/components/scroll-area/scroll-area_module.css +3 -3
  31. package/dist/components/scroll-to-top/scroll-to-top_module.css +3 -3
  32. package/dist/components/section/section_module.css +3 -3
  33. package/dist/components/shimmer/shimmer_module.css +3 -3
  34. package/dist/components/table/table_module.css +3 -3
  35. package/dist/components/tabs/tabs_module.css +3 -3
  36. package/dist/components/tooltip/tooltip_module.css +3 -3
  37. package/dist/css-layers.d.ts +11 -0
  38. package/dist/css-layers.js +19 -0
  39. package/dist/dnd/draggable-sortable/demo/draggable-list-demo_module.css +38 -32
  40. package/dist/icons/icons_module.css +3 -3
  41. package/dist/loaders/ellipses_module.css +3 -3
  42. package/dist/loaders/ring_module.css +3 -3
  43. package/dist/loaders/spinner_module.css +3 -3
  44. package/dist/styles/reset.css +1 -1
  45. package/dist/styles/styles.css +35 -31
  46. package/dist/styles/typography.css +1 -1
  47. package/dist/widgets/datepicker/datepicker_module.css +3 -3
  48. package/dist/widgets/drawer/drawer_module.css +3 -3
  49. package/dist/widgets/image-lightbox/image-lightbox_module.css +3 -3
  50. package/dist/widgets/modal/modal_module.css +3 -3
  51. package/dist/widgets/timeline/timeline_module.css +3 -3
  52. package/package.json +18 -4
  53. package/src/components/accordion/accordion.module.css +5 -3
  54. package/src/components/avatar/avatar.module.css +5 -4
  55. package/src/components/badge/badge.module.css +5 -4
  56. package/src/components/button/button-group.module.css +5 -3
  57. package/src/components/button/button.module.css +5 -4
  58. package/src/components/button/combo-button.module.css +5 -3
  59. package/src/components/button/control-buttons.module.css +5 -3
  60. package/src/components/button/copy-button.module.css +5 -4
  61. package/src/components/card/card.module.css +5 -4
  62. package/src/components/chips/chip.module.css +5 -4
  63. package/src/components/container/container.module.css +5 -4
  64. package/src/components/dropdown/dropdown.module.css +5 -4
  65. package/src/components/hamburger/hamburger.module.css +5 -4
  66. package/src/components/inputs/autocomplete.module.css +6 -3
  67. package/src/components/inputs/calendar.module.css +5 -4
  68. package/src/components/inputs/checkbox-group.module.css +5 -4
  69. package/src/components/inputs/checkbox.module.css +5 -4
  70. package/src/components/inputs/error-text.module.css +5 -4
  71. package/src/components/inputs/help-text.module.css +5 -4
  72. package/src/components/inputs/input-adornment.module.css +5 -4
  73. package/src/components/inputs/input-password.module.css +15 -1
  74. package/src/components/inputs/input.module.css +5 -4
  75. package/src/components/inputs/label.module.css +5 -4
  76. package/src/components/inputs/radio-group.module.css +5 -4
  77. package/src/components/inputs/select.module.css +5 -4
  78. package/src/components/inputs/text-area.module.css +5 -4
  79. package/src/components/notifications/alert.module.css +5 -4
  80. package/src/components/notifications/toast.module.css +6 -3
  81. package/src/components/pager/pagination.module.css +5 -4
  82. package/src/components/scroll-area/scroll-area.module.css +5 -4
  83. package/src/components/scroll-to-top/scroll-to-top.module.css +5 -3
  84. package/src/components/section/section.module.css +5 -4
  85. package/src/components/shimmer/shimmer.module.css +5 -4
  86. package/src/components/table/table.module.css +5 -4
  87. package/src/components/tabs/tabs.module.css +5 -4
  88. package/src/components/tooltip/tooltip.module.css +5 -4
  89. package/src/css-layers.ts +25 -0
  90. package/src/dnd/draggable-sortable/demo/draggable-list-demo.module.css +72 -56
  91. package/src/icons/icons.module.css +5 -3
  92. package/src/loaders/ellipses.module.css +5 -4
  93. package/src/loaders/ring.module.css +5 -4
  94. package/src/loaders/spinner.module.css +5 -4
  95. package/src/styles/base/animations.css +12 -0
  96. package/src/styles/base/base.css +12 -0
  97. package/src/styles/base/borders.css +12 -0
  98. package/src/styles/base/breakpoints.css +12 -0
  99. package/src/styles/base/colors.css +12 -0
  100. package/src/styles/base/opacity.css +12 -0
  101. package/src/styles/base/shadows.css +12 -0
  102. package/src/styles/base/size.css +12 -0
  103. package/src/styles/base/spacing.css +12 -0
  104. package/src/styles/base/transitions.css +12 -0
  105. package/src/styles/base/typography.css +12 -0
  106. package/src/styles/base/z-index.css +12 -0
  107. package/src/styles/components/components.css +12 -0
  108. package/src/styles/components/fade-in-lift.css +29 -13
  109. package/src/styles/components/hamburger.css +9 -5
  110. package/src/styles/components/loaders.css +169 -155
  111. package/src/styles/functional/borders.css +14 -0
  112. package/src/styles/functional/colors.css +14 -0
  113. package/src/styles/functional/functional.css +12 -0
  114. package/src/styles/functional/grid-flex.css +12 -0
  115. package/src/styles/functional/shadcn-compat.css +14 -0
  116. package/src/styles/functional/surfaces.css +14 -0
  117. package/src/styles/functional/typography.css +14 -0
  118. package/src/styles/local-fonts.css +14 -0
  119. package/src/styles/reset.css +18 -24
  120. package/src/styles/styles.css +20 -15
  121. package/src/styles/theme/autofill.css +12 -0
  122. package/src/styles/theme/defaults.css +14 -0
  123. package/src/styles/theme/scrollers.css +12 -0
  124. package/src/styles/theme/theme.css +14 -0
  125. package/src/styles/typography/fonts.css +12 -0
  126. package/src/styles/typography/prose.css +14 -0
  127. package/src/styles/typography.css +4 -3
  128. package/src/widgets/datepicker/datepicker.module.css +5 -3
  129. package/src/widgets/drawer/drawer.module.css +7 -3
  130. package/src/widgets/image-lightbox/image-lightbox.module.css +5 -3
  131. package/src/widgets/modal/modal.module.css +7 -3
  132. package/src/widgets/timeline/timeline.module.css +5 -4
package/src/styles/functional/typography.css CHANGED
@@ -1,3 +1,17 @@
1
+ @layer base,
2
+ byline-base,
3
+ theme,
4
+ byline-theme,
5
+ byline-functional,
6
+ byline-typography,
7
+ components,
8
+ byline-components,
9
+ overrides,
10
+ byline-utilities,
11
+ utilities;
12
+
13
+ @layer byline-components.primitives, byline-components.cms;
14
+
1
15
  /**
2
16
  * TYPOGRAPHY FUNCTIONAL TOKENS
3
17
  *
package/src/styles/local-fonts.css CHANGED
@@ -1,3 +1,17 @@
1
+ @layer base,
2
+ byline-base,
3
+ theme,
4
+ byline-theme,
5
+ byline-functional,
6
+ byline-typography,
7
+ components,
8
+ byline-components,
9
+ overrides,
10
+ byline-utilities,
11
+ utilities;
12
+
13
+ @layer byline-components.primitives, byline-components.cms;
14
+
1
15
  @font-face {
2
16
  font-family: "Inter";
3
17
  src: url("/fonts/Inter/Inter-VariableFont_opsz_wght.woff2") format("woff2");
package/src/styles/reset.css CHANGED
@@ -1,3 +1,17 @@
1
+ @layer base,
2
+ byline-base,
3
+ theme,
4
+ byline-theme,
5
+ byline-functional,
6
+ byline-typography,
7
+ components,
8
+ byline-components,
9
+ overrides,
10
+ byline-utilities,
11
+ utilities;
12
+
13
+ @layer byline-components.primitives, byline-components.cms;
14
+
1
15
  /*
2
16
  * Based on Tailwind reset / preflight
3
17
  * Copyright (c) Tailwind Labs, Inc.
@@ -7,31 +21,11 @@
7
21
  * area only, or on <html> to apply it everywhere (in which case the host
8
22
  * should NOT also import tailwindcss/preflight.css).
9
23
  *
10
- * The preamble below pins the cascade-layer order. Theme sits below
11
- * components so theme tokens cannot override component styles, and byline
12
- * layers are interleaved with their Tailwind equivalents by type so each
13
- * byline layer sits just above its matching Tailwind layer:
14
- * base < byline-base < theme < byline-theme < byline-functional
15
- * < components < byline-components < utilities < byline-utilities
16
- * < byline-typography
17
- *
18
- * This ensures byline-base beats Tailwind preflight, byline-components beats
19
- * Tailwind components, byline-utilities beats Tailwind utilities — each in
20
- * their own "tier" — rather than every byline layer winning over every
21
- * Tailwind layer (which would let byline-base win over Tailwind utilities).
22
- *
23
- * Hosts using Tailwind don't need to declare layer order themselves.
24
+ * The preamble reserves the host overrides slot below Tailwind utilities.
25
+ * Hosts also use @byline/ui/css-layers in the document head and their CSS
26
+ * build pipeline, so a host or vendor stylesheet cannot establish a partial
27
+ * order first. See the UI-kit documentation for the integration contract.
24
28
  */
25
- @layer base,
26
- byline-base,
27
- theme,
28
- byline-theme,
29
- byline-functional,
30
- byline-typography,
31
- components,
32
- byline-components,
33
- utilities,
34
- byline-utilities;
35
29
 
36
30
  @layer byline-base {
37
31
  @scope (.byline-ui) {
package/src/styles/styles.css CHANGED
@@ -6,26 +6,31 @@
6
6
  byline-typography,
7
7
  components,
8
8
  byline-components,
9
- utilities,
10
- byline-utilities;
11
-
9
+ overrides,
10
+ byline-utilities,
11
+ utilities;
12
+ @layer byline-components.primitives, byline-components.cms;
12
13
  @import "./base/base.css";
13
14
  @import "./functional/functional.css";
14
15
  @import "./theme/theme.css";
15
16
  @import "./components/components.css";
16
17
 
17
- .byline-ui {
18
- isolation: isolate;
18
+ @layer byline-base {
19
+ .byline-ui {
20
+ isolation: isolate;
21
+ }
19
22
  }
20
23
 
21
- .sr-only {
22
- position: absolute;
23
- width: 1px;
24
- height: 1px;
25
- padding: 0;
26
- margin: -1px;
27
- overflow: hidden;
28
- clip: rect(0, 0, 0, 0);
29
- white-space: nowrap;
30
- border-width: 0;
24
+ @layer byline-utilities {
25
+ .sr-only {
26
+ position: absolute;
27
+ width: 1px;
28
+ height: 1px;
29
+ padding: 0;
30
+ margin: -1px;
31
+ overflow: hidden;
32
+ clip: rect(0, 0, 0, 0);
33
+ white-space: nowrap;
34
+ border-width: 0;
35
+ }
31
36
  }
package/src/styles/theme/autofill.css CHANGED
@@ -1,3 +1,15 @@
1
+ @layer base,
2
+ byline-base,
3
+ theme,
4
+ byline-theme,
5
+ byline-functional,
6
+ byline-typography,
7
+ components,
8
+ byline-components,
9
+ overrides,
10
+ byline-utilities,
11
+ utilities;
12
+ @layer byline-components.primitives, byline-components.cms;
1
13
  @layer byline-theme {
2
14
  /* Autofill styling is scoped — without this, host inputs outside the
3
15
  admin area would also pick up the byline autofill colors. */
package/src/styles/theme/defaults.css CHANGED
@@ -1,3 +1,17 @@
1
+ @layer base,
2
+ byline-base,
3
+ theme,
4
+ byline-theme,
5
+ byline-functional,
6
+ byline-typography,
7
+ components,
8
+ byline-components,
9
+ overrides,
10
+ byline-utilities,
11
+ utilities;
12
+
13
+ @layer byline-components.primitives, byline-components.cms;
14
+
1
15
  /**
2
16
  * HTML ELEMENT DEFAULTS
3
17
  *
package/src/styles/theme/scrollers.css CHANGED
@@ -1,3 +1,15 @@
1
+ @layer base,
2
+ byline-base,
3
+ theme,
4
+ byline-theme,
5
+ byline-functional,
6
+ byline-typography,
7
+ components,
8
+ byline-components,
9
+ overrides,
10
+ byline-utilities,
11
+ utilities;
12
+ @layer byline-components.primitives, byline-components.cms;
1
13
  @layer byline-theme {
2
14
  /* Custom property declarations stay on :root so they cascade everywhere.
3
15
  They don't conflict with host CSS and are read by .component--scroller
package/src/styles/theme/theme.css CHANGED
@@ -1,3 +1,17 @@
1
+ @layer base,
2
+ byline-base,
3
+ theme,
4
+ byline-theme,
5
+ byline-functional,
6
+ byline-typography,
7
+ components,
8
+ byline-components,
9
+ overrides,
10
+ byline-utilities,
11
+ utilities;
12
+
13
+ @layer byline-components.primitives, byline-components.cms;
14
+
1
15
  /**
2
16
  * THEME
3
17
  *
package/src/styles/typography/fonts.css CHANGED
@@ -1,3 +1,15 @@
1
+ @layer base,
2
+ byline-base,
3
+ theme,
4
+ byline-theme,
5
+ byline-functional,
6
+ byline-typography,
7
+ components,
8
+ byline-components,
9
+ overrides,
10
+ byline-utilities,
11
+ utilities;
12
+ @layer byline-components.primitives, byline-components.cms;
1
13
  @layer byline-typography {
2
14
  :root {
3
15
  --font-sans:
package/src/styles/typography/prose.css CHANGED
@@ -1,3 +1,17 @@
1
+ @layer base,
2
+ byline-base,
3
+ theme,
4
+ byline-theme,
5
+ byline-functional,
6
+ byline-typography,
7
+ components,
8
+ byline-components,
9
+ overrides,
10
+ byline-utilities,
11
+ utilities;
12
+
13
+ @layer byline-components.primitives, byline-components.cms;
14
+
1
15
  /*
2
16
  * Adapted from Tailwind typography plugin
3
17
  * Portions copyright (c) Tailwind Labs, Inc.
package/src/styles/typography.css CHANGED
@@ -6,9 +6,10 @@
6
6
  byline-typography,
7
7
  components,
8
8
  byline-components,
9
- utilities,
10
- byline-utilities;
11
-
9
+ overrides,
10
+ byline-utilities,
11
+ utilities;
12
+ @layer byline-components.primitives, byline-components.cms;
12
13
  @import "./typography/fonts.css";
13
14
  @import "./typography/prose.css";
14
15
 
package/src/widgets/datepicker/datepicker.module.css CHANGED
@@ -6,9 +6,11 @@
6
6
  byline-typography,
7
7
  components,
8
8
  byline-components,
9
- utilities,
10
- byline-utilities;
11
- @layer byline-components {
9
+ overrides,
10
+ byline-utilities,
11
+ utilities;
12
+ @layer byline-components.primitives, byline-components.cms;
13
+ @layer byline-components.primitives {
12
14
  .container,
13
15
  :global(.byline-datepicker-container) {
14
16
  position: relative;
package/src/widgets/drawer/drawer.module.css CHANGED
@@ -6,9 +6,13 @@
6
6
  byline-typography,
7
7
  components,
8
8
  byline-components,
9
- utilities,
10
- byline-utilities;
11
- @layer byline-components {
9
+ overrides,
10
+ byline-utilities,
11
+ utilities;
12
+
13
+ @layer byline-components.primitives, byline-components.cms;
14
+
15
+ @layer byline-components.primitives {
12
16
  /* Backdrop overlay (replaces previous Overlay component) */
13
17
 
14
18
  .backdrop,
package/src/widgets/image-lightbox/image-lightbox.module.css CHANGED
@@ -6,9 +6,11 @@
6
6
  byline-typography,
7
7
  components,
8
8
  byline-components,
9
- utilities,
10
- byline-utilities;
11
- @layer byline-components {
9
+ overrides,
10
+ byline-utilities,
11
+ utilities;
12
+ @layer byline-components.primitives, byline-components.cms;
13
+ @layer byline-components.primitives {
12
14
  .container {
13
15
  width: auto;
14
16
  max-width: 96vw;
package/src/widgets/modal/modal.module.css CHANGED
@@ -6,9 +6,13 @@
6
6
  byline-typography,
7
7
  components,
8
8
  byline-components,
9
- utilities,
10
- byline-utilities;
11
- @layer byline-components {
9
+ overrides,
10
+ byline-utilities,
11
+ utilities;
12
+
13
+ @layer byline-components.primitives, byline-components.cms;
14
+
15
+ @layer byline-components.primitives {
12
16
  /* Backdrop overlay */
13
17
 
14
18
  .backdrop,
package/src/widgets/timeline/timeline.module.css CHANGED
@@ -6,10 +6,11 @@
6
6
  byline-typography,
7
7
  components,
8
8
  byline-components,
9
- utilities,
10
- byline-utilities;
11
-
12
- @layer byline-components {
9
+ overrides,
10
+ byline-utilities,
11
+ utilities;
12
+ @layer byline-components.primitives, byline-components.cms;
13
+ @layer byline-components.primitives {
13
14
  .timeline,
14
15
  :global(.byline-timeline) {
15
16
  margin-left: var(--spacing-8);