@byline/ui 6.10.0 → 6.11.0

package/dist/dnd/draggable-sortable/demo/draggable-list-demo_module.css

@@ -1,39 +1,45 @@
-:is(.list-XHnsgb, .byline-demo-list) {
-  max-width: 600px;
-  margin-inline: auto;
-  position: relative;
-}
+@layer base, byline-base, theme, byline-theme, byline-functional, byline-typography, components, byline-components, overrides, byline-utilities, utilities;
 
-:is(.card-Ne0WSI, .byline-demo-card) {
-  min-width: 100%;
-  max-width: 24rem;
-  margin-bottom: var(--spacing-16);
-  border: var(--border-width-thin) var(--border-style-solid) var(--canvas-25);
-  border-radius: var(--border-radius-lg);
-  background-color: #fff;
-  flex-direction: column;
-  padding: 1.5rem;
-  text-decoration: none;
-  display: flex;
-  position: relative;
-  box-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
-}
+@layer byline-components.primitives {
+  :is(.list-XHnsgb, .byline-demo-list) {
+    max-width: 600px;
+    margin-inline: auto;
+    position: relative;
+  }
 
-:is(.card-dragging-JeByM5, .byline-demo-card-dragging) {
-  box-shadow: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
-}
+  :is(.card-Ne0WSI, .byline-demo-card) {
+    min-width: 100%;
+    max-width: 24rem;
+    margin-bottom: var(--spacing-16);
+    border: var(--border-width-thin) var(--border-style-solid) var(--canvas-25);
+    border-radius: var(--border-radius-lg);
+    background-color: #fff;
+    flex-direction: column;
+    padding: 1.5rem;
+    text-decoration: none;
+    display: flex;
+    position: relative;
+    box-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
+  }
 
-:is(.card-header-tGIJQP, .byline-demo-card-header) {
-  justify-content: flex-start;
-  align-items: center;
-  display: flex;
-}
+  :is(.card-dragging-JeByM5, .byline-demo-card-dragging) {
+    box-shadow: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
+  }
 
-:is(.card-grip-wNVZ2B, .byline-demo-card-grip) {
-  margin-right: var(--spacing-8);
-}
+  :is(.card-header-tGIJQP, .byline-demo-card-header) {
+    justify-content: flex-start;
+    align-items: center;
+    display: flex;
+  }
+
+  :is(.card-grip-wNVZ2B, .byline-demo-card-grip) {
+    margin-right: var(--spacing-8);
+  }
 
-:is(:is([data-theme="dark"], .dark) .card-Ne0WSI, :is([data-theme="dark"], .dark) .byline-demo-card) {
-  background-color: var(--canvas-800);
+  :is(:is([data-theme="dark"], .dark) .card-Ne0WSI, :is([data-theme="dark"], .dark) .byline-demo-card) {
+    background-color: var(--canvas-800);
+  }
 }
 
+@layer byline-components.cms;
+

package/dist/icons/icons_module.css

@@ -1,6 +1,6 @@
-@layer base, byline-base, theme, byline-theme, byline-functional, byline-typography, components;
+@layer base, byline-base, theme, byline-theme, byline-functional, byline-typography, components, byline-components, overrides, byline-utilities, utilities;
 
-@layer byline-components {
+@layer byline-components.primitives {
   .element-root-UxROLs {
     justify-content: center;
     align-items: center;
@@ -161,5 +161,5 @@
   }
 }
 
-@layer utilities, byline-utilities;
+@layer byline-components.cms;
 

package/dist/loaders/ellipses_module.css

@@ -1,6 +1,6 @@
-@layer base, byline-base, theme, byline-theme, byline-functional, byline-typography, components;
+@layer base, byline-base, theme, byline-theme, byline-functional, byline-typography, components, byline-components, overrides, byline-utilities, utilities;
 
-@layer byline-components {
+@layer byline-components.primitives {
   :is(.loader-ellipsis-KxN5UN, .byline-loader-ellipsis) {
     --_size: var(--loader-ellipsis-size, 80px);
     --_color: var(--loader-ellipsis-color, var(--loader-color, currentColor));
@@ -71,5 +71,5 @@
   }
 }
 
-@layer utilities, byline-utilities;
+@layer byline-components.cms;
 

package/dist/loaders/ring_module.css

@@ -1,6 +1,6 @@
-@layer base, byline-base, theme, byline-theme, byline-functional, byline-typography, components;
+@layer base, byline-base, theme, byline-theme, byline-functional, byline-typography, components, byline-components, overrides, byline-utilities, utilities;
 
-@layer byline-components {
+@layer byline-components.primitives {
   :is(.loader-ring-qd6bmX, .byline-loader-ring) {
     --_size: var(--loader-ring-size, 60px);
     --_color: var(--loader-ring-color, var(--loader-color, currentColor));
@@ -47,5 +47,5 @@
   }
 }
 
-@layer utilities, byline-utilities;
+@layer byline-components.cms;
 

package/dist/loaders/spinner_module.css

@@ -1,6 +1,6 @@
-@layer base, byline-base, theme, byline-theme, byline-functional, byline-typography, components;
+@layer base, byline-base, theme, byline-theme, byline-functional, byline-typography, components, byline-components, overrides, byline-utilities, utilities;
 
-@layer byline-components {
+@layer byline-components.primitives {
   :is(.loader-spinner-QHtGI_, .byline-loader-spinner) {
     --_size: var(--loader-spinner-size, 56px);
     --_color: var(--loader-spinner-color, var(--loader-color, currentColor));
@@ -97,5 +97,5 @@
   }
 }
 
-@layer utilities, byline-utilities;
+@layer byline-components.cms;
 

package/dist/styles/reset.css

@@ -212,4 +212,4 @@
   }
 }
 
-@layer theme, byline-theme, byline-functional, byline-typography, components, byline-components, utilities, byline-utilities;
+@layer theme, byline-theme, byline-functional, byline-typography, components, byline-components, overrides, byline-utilities, utilities, byline-components.primitives, byline-components.cms;

package/dist/styles/styles.css

@@ -382,6 +382,10 @@
     --z-index-popover: 1075;
     --z-index-toast: 1100;
   }
+
+  .byline-ui {
+    isolation: isolate;
+  }
 }
 
 @layer theme;
@@ -1494,9 +1498,25 @@
   }
 }
 
-@layer byline-typography, components;
+@layer byline-typography, components, byline-components, overrides;
+
+@layer byline-utilities {
+  .sr-only {
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    position: absolute;
+    overflow: hidden;
+  }
+}
+
+@layer utilities;
 
-@layer byline-components {
+@layer byline-components.primitives {
   .component--hamburger {
     z-index: 200;
     cursor: pointer;
@@ -1582,36 +1602,20 @@
     bottom: 0;
     transform: rotate(-90deg);
   }
-}
 
-@layer utilities, byline-utilities;
-
-.component--fade-in-lift {
-  opacity: 0;
-  visibility: hidden;
-  will-change: opacity, visibility;
-  transition: opacity .5s ease-out, transform .7s ease-out;
-  transform: matrix(1, 0, 0, 1, 0, 18);
-}
-
-.component--fade-in-lift.is-visible {
-  opacity: 1;
-  visibility: visible;
-  transform: matrix(1, 0, 0, 1, 0, 0);
-}
+  .component--fade-in-lift {
+    opacity: 0;
+    visibility: hidden;
+    will-change: opacity, visibility;
+    transition: opacity .5s ease-out, transform .7s ease-out;
+    transform: matrix(1, 0, 0, 1, 0, 18);
+  }
 
-.byline-ui {
-  isolation: isolate;
+  .component--fade-in-lift.is-visible {
+    opacity: 1;
+    visibility: visible;
+    transform: matrix(1, 0, 0, 1, 0, 0);
+  }
 }
 
-.sr-only {
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border-width: 0;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  padding: 0;
-  position: absolute;
-  overflow: hidden;
-}
+@layer byline-components.cms;

package/dist/styles/typography.css

@@ -406,4 +406,4 @@
   }
 }
 
-@layer components, byline-components, utilities, byline-utilities;
+@layer components, byline-components, overrides, byline-utilities, utilities, byline-components.primitives, byline-components.cms;

package/dist/widgets/datepicker/datepicker_module.css

@@ -1,6 +1,6 @@
-@layer base, byline-base, theme, byline-theme, byline-functional, byline-typography, components;
+@layer base, byline-base, theme, byline-theme, byline-functional, byline-typography, components, byline-components, overrides, byline-utilities, utilities;
 
-@layer byline-components {
+@layer byline-components.primitives {
   :is(.container-u5_VUp, .byline-datepicker-container) {
     position: relative;
   }
@@ -189,5 +189,5 @@
   }
 }
 
-@layer utilities, byline-utilities;
+@layer byline-components.cms;
 

package/dist/widgets/drawer/drawer_module.css

@@ -1,6 +1,6 @@
-@layer base, byline-base, theme, byline-theme, byline-functional, byline-typography, components;
+@layer base, byline-base, theme, byline-theme, byline-functional, byline-typography, components, byline-components, overrides, byline-utilities, utilities;
 
-@layer byline-components {
+@layer byline-components.primitives {
   :is(.backdrop-Ga1s55, .byline-drawer-backdrop) {
     background-color: #f5f5f559;
     transition: opacity .2s;
@@ -131,5 +131,5 @@
   }
 }
 
-@layer utilities, byline-utilities;
+@layer byline-components.cms;
 

package/dist/widgets/image-lightbox/image-lightbox_module.css

@@ -1,6 +1,6 @@
-@layer base, byline-base, theme, byline-theme, byline-functional, byline-typography, components;
+@layer base, byline-base, theme, byline-theme, byline-functional, byline-typography, components, byline-components, overrides, byline-utilities, utilities;
 
-@layer byline-components {
+@layer byline-components.primitives {
   .container-E7tMnX {
     flex-direction: column;
     width: auto;
@@ -80,5 +80,5 @@
   }
 }
 
-@layer utilities, byline-utilities;
+@layer byline-components.cms;
 

package/dist/widgets/modal/modal_module.css

@@ -1,6 +1,6 @@
-@layer base, byline-base, theme, byline-theme, byline-functional, byline-typography, components;
+@layer base, byline-base, theme, byline-theme, byline-functional, byline-typography, components, byline-components, overrides, byline-utilities, utilities;
 
-@layer byline-components {
+@layer byline-components.primitives {
   :is(.backdrop-BgKon2, .byline-modal-backdrop) {
     z-index: var(--z-index-modal);
     background-color: #f5f5f559;
@@ -118,5 +118,5 @@
   }
 }
 
-@layer utilities, byline-utilities;
+@layer byline-components.cms;
 

package/dist/widgets/timeline/timeline_module.css

@@ -1,6 +1,6 @@
-@layer base, byline-base, theme, byline-theme, byline-functional, byline-typography, components;
+@layer base, byline-base, theme, byline-theme, byline-functional, byline-typography, components, byline-components, overrides, byline-utilities, utilities;
 
-@layer byline-components {
+@layer byline-components.primitives {
   :is(.timeline-qJOU85, .byline-timeline) {
     margin-left: var(--spacing-8);
   }
@@ -81,5 +81,5 @@
   }
 }
 
-@layer utilities, byline-utilities;
+@layer byline-components.cms;
 

package/package.json

@@ -3,7 +3,7 @@
   "private": false,
   "type": "module",
   "license": "MPL-2.0",
-  "version": "6.10.0",
+  "version": "6.11.0",
   "engines": {
     "node": ">=22.22.2"
   },
@@ -47,6 +47,11 @@
     "./typography.css": {
       "import": "./dist/styles/typography.css",
       "default": "./dist/styles/typography.css"
+    },
+    "./css-layers": {
+      "types": "./dist/css-layers.d.ts",
+      "import": "./dist/css-layers.js",
+      "default": "./dist/css-layers.js"
     }
   },
   "dependencies": {
@@ -61,7 +66,8 @@
   },
   "peerDependencies": {
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "postcss": "^8.5.0"
   },
   "devDependencies": {
     "@biomejs/biome": "2.6.2",
@@ -86,7 +92,8 @@
     "typescript": "^7.0.2",
     "typescript-plugin-css-modules": "^5.2.0",
     "vite": "^8.3.5",
-    "vitest": "^5.0.5"
+    "vitest": "^5.0.5",
+    "postcss": "^8.5.31"
   },
   "publishConfig": {
     "access": "public",
@@ -95,6 +102,11 @@
       "src/"
     ]
   },
+  "peerDependenciesMeta": {
+    "postcss": {
+      "optional": true
+    }
+  },
   "scripts": {
     "dev": "run-p dev:*",
     "dev:code": "rslib build --watch",
@@ -107,6 +119,8 @@
     "build-storybook": "storybook build",
     "clean": "node scripts/clean.js node_modules dist build types .turbo storybook-static",
     "lint": "biome check --write --unsafe --diagnostic-level=error",
-    "skip:test": "vitest"
+    "skip:test": "vitest",
+    "test": "node --test tests/*.test.mjs",
+    "test:css-build": "CSS_BUILD_CHECK=1 node --test tests/*.test.mjs"
   }
 }

package/src/components/accordion/accordion.module.css

@@ -6,9 +6,11 @@
   byline-typography,
   components,
   byline-components,
-  utilities,
-  byline-utilities;
-@layer byline-components {
+  overrides,
+  byline-utilities,
+  utilities;
+@layer byline-components.primitives, byline-components.cms;
+@layer byline-components.primitives {
   .item,
   :global(.byline-accordion-item) {
     overflow: hidden;

package/src/components/avatar/avatar.module.css

@@ -6,10 +6,11 @@
   byline-typography,
   components,
   byline-components,
-  utilities,
-  byline-utilities;
-
-@layer byline-components {
+  overrides,
+  byline-utilities,
+  utilities;
+@layer byline-components.primitives, byline-components.cms;
+@layer byline-components.primitives {
   /* relative inline-flex h-10 w-10 rounded-full */
   .avatar-root,
   :global(.byline-avatar-root) {

package/src/components/badge/badge.module.css

@@ -6,10 +6,11 @@
   byline-typography,
   components,
   byline-components,
-  utilities,
-  byline-utilities;
-
-@layer byline-components {
+  overrides,
+  byline-utilities,
+  utilities;
+@layer byline-components.primitives, byline-components.cms;
+@layer byline-components.primitives {
   .badge,
   :global(.byline-badge) {
     display: inline-block;

package/src/components/button/button-group.module.css

@@ -6,9 +6,11 @@
   byline-typography,
   components,
   byline-components,
-  utilities,
-  byline-utilities;
-@layer byline-components {
+  overrides,
+  byline-utilities,
+  utilities;
+@layer byline-components.primitives, byline-components.cms;
+@layer byline-components.primitives {
   .button-group,
   :global(.byline-button-group) {
     display: flex;

package/src/components/button/button.module.css

@@ -6,10 +6,11 @@
   byline-typography,
   components,
   byline-components,
-  utilities,
-  byline-utilities;
-
-@layer byline-components {
+  overrides,
+  byline-utilities,
+  utilities;
+@layer byline-components.primitives, byline-components.cms;
+@layer byline-components.primitives {
   .button,
   :global(.byline-button) {
     border: none;

package/src/components/button/combo-button.module.css

@@ -6,9 +6,11 @@
   byline-typography,
   components,
   byline-components,
-  utilities,
-  byline-utilities;
-@layer byline-components {
+  overrides,
+  byline-utilities,
+  utilities;
+@layer byline-components.primitives, byline-components.cms;
+@layer byline-components.primitives {
   .combo-button-wrapper,
   :global(.byline-combo-button-wrapper) {
     display: flex;

package/src/components/button/control-buttons.module.css

@@ -6,9 +6,11 @@
   byline-typography,
   components,
   byline-components,
-  utilities,
-  byline-utilities;
-@layer byline-components {
+  overrides,
+  byline-utilities,
+  utilities;
+@layer byline-components.primitives, byline-components.cms;
+@layer byline-components.primitives {
   .stop-button,
   .play-button,
   .directional-button,

package/src/components/button/copy-button.module.css

@@ -6,10 +6,11 @@
   byline-typography,
   components,
   byline-components,
-  utilities,
-  byline-utilities;
-
-@layer byline-components {
+  overrides,
+  byline-utilities,
+  utilities;
+@layer byline-components.primitives, byline-components.cms;
+@layer byline-components.primitives {
   .copy-button-container,
   :global(.byline-copy-button-container) {
     display: inline-block;

package/src/components/card/card.module.css

@@ -6,10 +6,11 @@
   byline-typography,
   components,
   byline-components,
-  utilities,
-  byline-utilities;
-
-@layer byline-components {
+  overrides,
+  byline-utilities,
+  utilities;
+@layer byline-components.primitives, byline-components.cms;
+@layer byline-components.primitives {
   .card,
   :global(.byline-card) {
     display: flex;

package/src/components/chips/chip.module.css

@@ -6,10 +6,11 @@
   byline-typography,
   components,
   byline-components,
-  utilities,
-  byline-utilities;
-
-@layer byline-components {
+  overrides,
+  byline-utilities,
+  utilities;
+@layer byline-components.primitives, byline-components.cms;
+@layer byline-components.primitives {
   .chip,
   :global(.byline-chip) {
     --chip-font-size: 0.9rem;

package/src/components/container/container.module.css

@@ -6,10 +6,11 @@
   byline-typography,
   components,
   byline-components,
-  utilities,
-  byline-utilities;
-
-@layer byline-components {
+  overrides,
+  byline-utilities,
+  utilities;
+@layer byline-components.primitives, byline-components.cms;
+@layer byline-components.primitives {
   .container,
   :global(.byline-container) {
     width: 100%;

package/src/components/dropdown/dropdown.module.css

@@ -6,10 +6,11 @@
   byline-typography,
   components,
   byline-components,
-  utilities,
-  byline-utilities;
-
-@layer byline-components {
+  overrides,
+  byline-utilities,
+  utilities;
+@layer byline-components.primitives, byline-components.cms;
+@layer byline-components.primitives {
   .dropdown-content,
   .dropdown-subcontent,
   :global(.byline-dropdown-content),

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

@@ -6,10 +6,11 @@
   byline-typography,
   components,
   byline-components,
-  utilities,
-  byline-utilities;
-
-@layer byline-components {
+  overrides,
+  byline-utilities,
+  utilities;
+@layer byline-components.primitives, byline-components.cms;
+@layer byline-components.primitives {
   .hamburger,
   :global(.byline-hamburger) {
     --hamburger-color: currentColor;

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

@@ -6,10 +6,13 @@
   byline-typography,
   components,
   byline-components,
-  utilities,
-  byline-utilities;
+  overrides,
+  byline-utilities,
+  utilities;
 
-@layer byline-components {
+@layer byline-components.primitives, byline-components.cms;
+
+@layer byline-components.primitives {
   /* ── Wrapper ── */
 
   .autocomplete-wrapper,

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

@@ -6,10 +6,11 @@
   byline-typography,
   components,
   byline-components,
-  utilities,
-  byline-utilities;
-
-@layer byline-components {
+  overrides,
+  byline-utilities,
+  utilities;
+@layer byline-components.primitives, byline-components.cms;
+@layer byline-components.primitives {
   .day-picker {
     padding: var(--spacing-12);
   }

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

@@ -6,10 +6,11 @@
   byline-typography,
   components,
   byline-components,
-  utilities,
-  byline-utilities;
-
-@layer byline-components {
+  overrides,
+  byline-utilities,
+  utilities;
+@layer byline-components.primitives, byline-components.cms;
+@layer byline-components.primitives {
   :global(.byline-checkbox-group),
   .checkbox-group {
     display: flex;