@byline/ui 1.7.4 → 1.7.6

package/src/components/hamburger/hamburger.module.css

@@ -1,6 +1,6 @@
-@layer base, byline-base, components, byline-components,
-  byline-functional, utilities, byline-utilities,
-  theme, byline-theme, byline-typography;
+@layer base, byline-base, theme, byline-theme,
+  byline-functional, components, byline-components,
+  utilities, byline-utilities, byline-typography;
 
 @layer byline-components {
   .hamburger,

package/src/components/inputs/autocomplete.module.css

@@ -1,6 +1,6 @@
-@layer base, byline-base, components, byline-components,
-  byline-functional, utilities, byline-utilities,
-  theme, byline-theme, byline-typography;
+@layer base, byline-base, theme, byline-theme,
+  byline-functional, components, byline-components,
+  utilities, byline-utilities, byline-typography;
 
 @layer byline-components {
   /* ── Wrapper ── */

package/src/components/inputs/calendar.module.css

@@ -1,6 +1,6 @@
-@layer base, byline-base, components, byline-components,
-  byline-functional, utilities, byline-utilities,
-  theme, byline-theme, byline-typography;
+@layer base, byline-base, theme, byline-theme,
+  byline-functional, components, byline-components,
+  utilities, byline-utilities, byline-typography;
 
 @layer byline-components {
   .day-picker {

package/src/components/inputs/checkbox-group.module.css

@@ -1,6 +1,6 @@
-@layer base, byline-base, components, byline-components,
-  byline-functional, utilities, byline-utilities,
-  theme, byline-theme, byline-typography;
+@layer base, byline-base, theme, byline-theme,
+  byline-functional, components, byline-components,
+  utilities, byline-utilities, byline-typography;
 
 @layer byline-components {
   :global(.infonomic-checkbox-group),

package/src/components/inputs/checkbox.module.css

@@ -1,6 +1,6 @@
-@layer base, byline-base, components, byline-components,
-  byline-functional, utilities, byline-utilities,
-  theme, byline-theme, byline-typography;
+@layer base, byline-base, theme, byline-theme,
+  byline-functional, components, byline-components,
+  utilities, byline-utilities, byline-typography;
 
 @layer byline-components {
   .container,

package/src/components/inputs/error-text.module.css

@@ -1,6 +1,6 @@
-@layer base, byline-base, components, byline-components,
-  byline-functional, utilities, byline-utilities,
-  theme, byline-theme, byline-typography;
+@layer base, byline-base, theme, byline-theme,
+  byline-functional, components, byline-components,
+  utilities, byline-utilities, byline-typography;
 
 @layer byline-components {
   .text,

package/src/components/inputs/help-text.module.css

@@ -1,6 +1,6 @@
-@layer base, byline-base, components, byline-components,
-  byline-functional, utilities, byline-utilities,
-  theme, byline-theme, byline-typography;
+@layer base, byline-base, theme, byline-theme,
+  byline-functional, components, byline-components,
+  utilities, byline-utilities, byline-typography;
 
 @layer byline-components {
   .text,

package/src/components/inputs/input-adornment.module.css

@@ -1,6 +1,6 @@
-@layer base, byline-base, components, byline-components,
-  byline-functional, utilities, byline-utilities,
-  theme, byline-theme, byline-typography;
+@layer base, byline-base, theme, byline-theme,
+  byline-functional, components, byline-components,
+  utilities, byline-utilities, byline-typography;
 
 @layer byline-components {
   .adornment,

package/src/components/inputs/input.module.css

@@ -1,6 +1,6 @@
-@layer base, byline-base, components, byline-components,
-  byline-functional, utilities, byline-utilities,
-  theme, byline-theme, byline-typography;
+@layer base, byline-base, theme, byline-theme,
+  byline-functional, components, byline-components,
+  utilities, byline-utilities, byline-typography;
 
 @layer byline-components {
   .input-wrapper,

package/src/components/inputs/label.module.css

@@ -1,6 +1,6 @@
-@layer base, byline-base, components, byline-components,
-  byline-functional, utilities, byline-utilities,
-  theme, byline-theme, byline-typography;
+@layer base, byline-base, theme, byline-theme,
+  byline-functional, components, byline-components,
+  utilities, byline-utilities, byline-typography;
 
 @layer byline-components {
   .label,

package/src/components/inputs/radio-group.module.css

@@ -1,6 +1,6 @@
-@layer base, byline-base, components, byline-components,
-  byline-functional, utilities, byline-utilities,
-  theme, byline-theme, byline-typography;
+@layer base, byline-base, theme, byline-theme,
+  byline-functional, components, byline-components,
+  utilities, byline-utilities, byline-typography;
 
 /* 'border-collapse w-full text-sm text-left text-gray-700 dark:text-gray-400 m-0', */
 @layer byline-components {

package/src/components/inputs/select.module.css

@@ -1,6 +1,6 @@
-@layer base, byline-base, components, byline-components,
-  byline-functional, utilities, byline-utilities,
-  theme, byline-theme, byline-typography;
+@layer base, byline-base, theme, byline-theme,
+  byline-functional, components, byline-components,
+  utilities, byline-utilities, byline-typography;
 
 @layer byline-components {
   .positioner,

package/src/components/inputs/text-area.module.css

@@ -1,6 +1,6 @@
-@layer base, byline-base, components, byline-components,
-  byline-functional, utilities, byline-utilities,
-  theme, byline-theme, byline-typography;
+@layer base, byline-base, theme, byline-theme,
+  byline-functional, components, byline-components,
+  utilities, byline-utilities, byline-typography;
 
 @layer byline-components {
   .text-area,

package/src/components/notifications/alert.module.css

@@ -1,6 +1,6 @@
-@layer base, byline-base, components, byline-components,
-  byline-functional, utilities, byline-utilities,
-  theme, byline-theme, byline-typography;
+@layer base, byline-base, theme, byline-theme,
+  byline-functional, components, byline-components,
+  utilities, byline-utilities, byline-typography;
 
 @layer byline-components {
   .alert,

package/src/components/notifications/toast.module.css

@@ -1,6 +1,6 @@
-@layer base, byline-base, components, byline-components,
-  byline-functional, utilities, byline-utilities,
-  theme, byline-theme, byline-typography;
+@layer base, byline-base, theme, byline-theme,
+  byline-functional, components, byline-components,
+  utilities, byline-utilities, byline-typography;
 
 @layer byline-components {
   /* ============================================

package/src/components/pager/pagination.module.css

@@ -1,6 +1,6 @@
-@layer base, byline-base, components, byline-components,
-  byline-functional, utilities, byline-utilities,
-  theme, byline-theme, byline-typography;
+@layer base, byline-base, theme, byline-theme,
+  byline-functional, components, byline-components,
+  utilities, byline-utilities, byline-typography;
 
 @layer byline-components {
   .pagination-root,

package/src/components/scroll-area/scroll-area.module.css

@@ -1,6 +1,6 @@
-@layer base, byline-base, components, byline-components,
-  byline-functional, utilities, byline-utilities,
-  theme, byline-theme, byline-typography;
+@layer base, byline-base, theme, byline-theme,
+  byline-functional, components, byline-components,
+  utilities, byline-utilities, byline-typography;
 
 @layer byline-components {
   .root,

package/src/components/scroll-to-top/scroll-to-top.module.css

@@ -1,6 +1,6 @@
-@layer base, byline-base, components, byline-components,
-  byline-functional, utilities, byline-utilities,
-  theme, byline-theme, byline-typography;
+@layer base, byline-base, theme, byline-theme,
+  byline-functional, components, byline-components,
+  utilities, byline-utilities, byline-typography;
 @layer byline-components {
   .scroll-to-top,
   :global(.infonomic-scroll-to-top) {

package/src/components/section/section.module.css

@@ -1,6 +1,6 @@
-@layer base, byline-base, components, byline-components,
-  byline-functional, utilities, byline-utilities,
-  theme, byline-theme, byline-typography;
+@layer base, byline-base, theme, byline-theme,
+  byline-functional, components, byline-components,
+  utilities, byline-utilities, byline-typography;
 
 @layer byline-components {
   .section,

package/src/components/shimmer/shimmer.module.css

@@ -1,6 +1,6 @@
-@layer base, byline-base, components, byline-components,
-  byline-functional, utilities, byline-utilities,
-  theme, byline-theme, byline-typography;
+@layer base, byline-base, theme, byline-theme,
+  byline-functional, components, byline-components,
+  utilities, byline-utilities, byline-typography;
 
 /* 'border-collapse w-full text-sm text-left text-gray-700 dark:text-gray-400 m-0', */
 @layer byline-components {

package/src/components/table/table.module.css

@@ -1,6 +1,6 @@
-@layer base, byline-base, components, byline-components,
-  byline-functional, utilities, byline-utilities,
-  theme, byline-theme, byline-typography;
+@layer base, byline-base, theme, byline-theme,
+  byline-functional, components, byline-components,
+  utilities, byline-utilities, byline-typography;
 
 /* 'border-collapse w-full text-sm text-left text-gray-700 dark:text-gray-400 m-0', */
 @layer byline-components {

package/src/components/tabs/tabs.module.css

@@ -1,6 +1,6 @@
-@layer base, byline-base, components, byline-components,
-  byline-functional, utilities, byline-utilities,
-  theme, byline-theme, byline-typography;
+@layer base, byline-base, theme, byline-theme,
+  byline-functional, components, byline-components,
+  utilities, byline-utilities, byline-typography;
 
 @layer byline-components {
   .tabs-root,

package/src/components/tooltip/tooltip.module.css

@@ -1,6 +1,6 @@
-@layer base, byline-base, components, byline-components,
-  byline-functional, utilities, byline-utilities,
-  theme, byline-theme, byline-typography;
+@layer base, byline-base, theme, byline-theme,
+  byline-functional, components, byline-components,
+  utilities, byline-utilities, byline-typography;
 
 @layer byline-components {
   .tooltip,

package/src/icons/icons.module.css

@@ -1,6 +1,6 @@
-@layer base, byline-base, components, byline-components,
-  byline-functional, utilities, byline-utilities,
-  theme, byline-theme, byline-typography;
+@layer base, byline-base, theme, byline-theme,
+  byline-functional, components, byline-components,
+  utilities, byline-utilities, byline-typography;
 @layer byline-components {
   .element-root {
     width: 1.375rem;

package/src/loaders/ellipses.module.css

@@ -1,6 +1,6 @@
-@layer base, byline-base, components, byline-components,
-  byline-functional, utilities, byline-utilities,
-  theme, byline-theme, byline-typography;
+@layer base, byline-base, theme, byline-theme,
+  byline-functional, components, byline-components,
+  utilities, byline-utilities, byline-typography;
 
 @layer byline-components {
   .loader-ellipsis,

package/src/loaders/ring.module.css

@@ -1,6 +1,6 @@
-@layer base, byline-base, components, byline-components,
-  byline-functional, utilities, byline-utilities,
-  theme, byline-theme, byline-typography;
+@layer base, byline-base, theme, byline-theme,
+  byline-functional, components, byline-components,
+  utilities, byline-utilities, byline-typography;
 
 @layer byline-components {
   .loader-ring,

package/src/loaders/spinner.module.css

@@ -1,6 +1,6 @@
-@layer base, byline-base, components, byline-components,
-  byline-functional, utilities, byline-utilities,
-  theme, byline-theme, byline-typography;
+@layer base, byline-base, theme, byline-theme,
+  byline-functional, components, byline-components,
+  utilities, byline-utilities, byline-typography;
 
 @layer byline-components {
   .loader-spinner,

package/src/styles/components/hamburger.css

@@ -1,8 +1,8 @@
 /* No longer used in our actual hamburger React and Astro components
 but left here as a reference. */
-@layer base, byline-base, components, byline-components,
-  byline-functional, utilities, byline-utilities,
-  theme, byline-theme, byline-typography;
+@layer base, byline-base, theme, byline-theme,
+  byline-functional, components, byline-components,
+  utilities, byline-utilities, byline-typography;
 
 @layer byline-components {
   .component--hamburger {

package/src/styles/reset.css

@@ -7,11 +7,13 @@
  * area only, or on <html> to apply it everywhere (in which case the host
  * should NOT also import tailwindcss/preflight.css).
  *
- * The preamble below pins the cascade-layer order, interleaving byline
- * layers with their Tailwind equivalents by type so each byline layer sits
- * just above its matching Tailwind layer:
- *   base < byline-base < components < byline-components < byline-functional
- *   < utilities < byline-utilities < theme < byline-theme < byline-typography
+ * The preamble below pins the cascade-layer order. Theme sits below
+ * components so theme tokens cannot override component styles, and byline
+ * layers are interleaved with their Tailwind equivalents by type so each
+ * byline layer sits just above its matching Tailwind layer:
+ *   base < byline-base < theme < byline-theme < byline-functional
+ *   < components < byline-components < utilities < byline-utilities
+ *   < byline-typography
  *
  * This ensures byline-base beats Tailwind preflight, byline-components beats
  * Tailwind components, byline-utilities beats Tailwind utilities — each in
@@ -20,9 +22,9 @@
  *
  * Hosts using Tailwind don't need to declare layer order themselves.
 */
-@layer base, byline-base, components, byline-components,
-  byline-functional, utilities, byline-utilities,
-  theme, byline-theme, byline-typography;
+@layer base, byline-base, theme, byline-theme,
+  byline-functional, components, byline-components,
+  utilities, byline-utilities, byline-typography;
 
 @layer byline-base {
   @scope (.byline-ui) {

package/src/styles/styles.css

@@ -1,6 +1,6 @@
-@layer base, byline-base, components, byline-components,
-  byline-functional, utilities, byline-utilities,
-  theme, byline-theme, byline-typography;
+@layer base, byline-base, theme, byline-theme,
+  byline-functional, components, byline-components,
+  utilities, byline-utilities, byline-typography;
 
 @import "./base/base.css";
 @import "./functional/functional.css";

package/src/styles/typography.css

@@ -1,6 +1,6 @@
-@layer base, byline-base, components, byline-components,
-  byline-functional, utilities, byline-utilities,
-  theme, byline-theme, byline-typography;
+@layer base, byline-base, theme, byline-theme,
+  byline-functional, components, byline-components,
+  utilities, byline-utilities, byline-typography;
 
 @import "./typography/fonts.css";
 @import "./typography/prose.css";

package/src/widgets/datepicker/datepicker.module.css

@@ -1,6 +1,6 @@
-@layer base, byline-base, components, byline-components,
-  byline-functional, utilities, byline-utilities,
-  theme, byline-theme, byline-typography;
+@layer base, byline-base, theme, byline-theme,
+  byline-functional, components, byline-components,
+  utilities, byline-utilities, byline-typography;
 @layer byline-components {
   .container,
   :global(.infonomic-datepicker-container) {

package/src/widgets/drawer/drawer.module.css

@@ -1,6 +1,6 @@
-@layer base, byline-base, components, byline-components,
-  byline-functional, utilities, byline-utilities,
-  theme, byline-theme, byline-typography;
+@layer base, byline-base, theme, byline-theme,
+  byline-functional, components, byline-components,
+  utilities, byline-utilities, byline-typography;
 @layer byline-components {
   /* Backdrop overlay (replaces previous Overlay component) */
 

package/src/widgets/image-lightbox/image-lightbox.module.css

@@ -1,6 +1,6 @@
-@layer base, byline-base, components, byline-components,
-  byline-functional, utilities, byline-utilities,
-  theme, byline-theme, byline-typography;
+@layer base, byline-base, theme, byline-theme,
+  byline-functional, components, byline-components,
+  utilities, byline-utilities, byline-typography;
 @layer byline-components {
   .container {
     width: auto;

package/src/widgets/modal/modal.module.css

@@ -1,6 +1,6 @@
-@layer base, byline-base, components, byline-components,
-  byline-functional, utilities, byline-utilities,
-  theme, byline-theme, byline-typography;
+@layer base, byline-base, theme, byline-theme,
+  byline-functional, components, byline-components,
+  utilities, byline-utilities, byline-typography;
 @layer byline-components {
   /* Backdrop overlay */
 

package/src/widgets/timeline/timeline.module.css

@@ -1,6 +1,6 @@
-@layer base, byline-base, components, byline-components,
-  byline-functional, utilities, byline-utilities,
-  theme, byline-theme, byline-typography;
+@layer base, byline-base, theme, byline-theme,
+  byline-functional, components, byline-components,
+  utilities, byline-utilities, byline-typography;
 
 @layer byline-components {
   .timeline,