@byline/ui 6.10.1 → 6.11.0

package/src/components/inputs/checkbox.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-checkbox-container) {
     width: 100%;

package/src/components/inputs/error-text.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 {
   .text,
   :global(.byline-error-text) {
     font-size: 0.875rem;

package/src/components/inputs/help-text.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 {
   .text,
   :global(.byline-help-text) {
     font-size: 0.875rem;

package/src/components/inputs/input-adornment.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 {
   .adornment,
   :global(.byline-input-adornment) {
     display: flex;

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

@@ -1,3 +1,17 @@
+@layer base,
+  byline-base,
+  theme,
+  byline-theme,
+  byline-functional,
+  byline-typography,
+  components,
+  byline-components,
+  overrides,
+  byline-utilities,
+  utilities;
+
+@layer byline-components.primitives, byline-components.cms;
+
 /**
  * InputPassword — the reveal toggle inside the input's end adornment.
  *
@@ -9,7 +23,7 @@
  * what the bare icon used to look like.
  */
 
-@layer byline-components {
+@layer byline-components.primitives {
   .toggle,
   :global(.byline-input-password-toggle) {
     display: flex;

package/src/components/inputs/input.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 {
   .input-wrapper,
   :global(.byline-input-wrapper) {
     display: flex;

package/src/components/inputs/label.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 {
   .label,
   :global(.byline-label) {
     display: block;

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

@@ -6,11 +6,12 @@
   byline-typography,
   components,
   byline-components,
-  utilities,
-  byline-utilities;
-
+  overrides,
+  byline-utilities,
+  utilities;
+@layer byline-components.primitives, byline-components.cms;
 /* 'border-collapse w-full text-sm text-left text-gray-700 dark:text-gray-400 m-0', */
-@layer byline-components {
+@layer byline-components.primitives {
   .column,
   :global(.byline-radio-group-column) {
     display: flex;

package/src/components/inputs/select.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 {
   .positioner,
   :global(.byline-select-positioner) {
     z-index: var(--z-index-popover);

package/src/components/inputs/text-area.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 {
   .text-area,
   :global(.byline-text-area) {
     font-size: 1rem;

package/src/components/notifications/alert.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 {
   .alert,
   :global(.infonomic-alert) {
     display: flex;

package/src/components/notifications/toast.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 {
   /* ============================================
      Viewport — fixed-position container for toasts.
      Position classes are applied here.

package/src/components/pager/pagination.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 {
   .pagination-root,
   :global(.byline-pagination-root) {
     display: flex;

package/src/components/scroll-area/scroll-area.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 {
   .root,
   :global(.byline-scroll-area) {
     border-radius: 4px;

package/src/components/scroll-to-top/scroll-to-top.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 {
   .scroll-to-top,
   :global(.byline-scroll-to-top) {
     display: flex;

package/src/components/section/section.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 {
   .section,
   :global(.byline-section) {
     width: 100%;

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

@@ -6,11 +6,12 @@
   byline-typography,
   components,
   byline-components,
-  utilities,
-  byline-utilities;
-
+  overrides,
+  byline-utilities,
+  utilities;
+@layer byline-components.primitives, byline-components.cms;
 /* 'border-collapse w-full text-sm text-left text-gray-700 dark:text-gray-400 m-0', */
-@layer byline-components {
+@layer byline-components.primitives {
   .shimmer,
   :global(.byline-shimmer) {
     position: relative;

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

@@ -6,11 +6,12 @@
   byline-typography,
   components,
   byline-components,
-  utilities,
-  byline-utilities;
-
+  overrides,
+  byline-utilities,
+  utilities;
+@layer byline-components.primitives, byline-components.cms;
 /* 'border-collapse w-full text-sm text-left text-gray-700 dark:text-gray-400 m-0', */
-@layer byline-components {
+@layer byline-components.primitives {
   /* 'table--container break-normal overflow-hidden relative shadow-md rounded-md my-[16px] dark:border dark:border-canvas-700', */
   .table-container,
   :global(.byline-table-container) {

package/src/components/tabs/tabs.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 {
   .tabs-root,
   :global(.byline-tabs-root) {
     display: flex;

package/src/components/tooltip/tooltip.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 {
   .tooltip,
   :global(.byline-tooltip) {
     font-size: 0.75rem;

package/src/css-layers.ts

@@ -0,0 +1,25 @@
+import type { Plugin } from 'postcss'
+
+const layers =
+  'base, byline-base, theme, byline-theme, byline-functional, byline-typography, components, byline-components, overrides, byline-utilities, utilities'
+const componentLayers = 'byline-components.primitives, byline-components.cms'
+
+/** Low-to-high precedence for ordinary declarations, shared by packages and hosts. */
+export const BYLINE_LAYER_ORDER = `@layer ${layers}; @layer ${componentLayers};`
+
+/**
+ * Reserve parent layers and the primitive/CMS sublayers before each stylesheet
+ * is hashed by the host bundler. Also render BYLINE_LAYER_ORDER early in the
+ * document head for injected CSS. Repeated declarations are harmless, but an
+ * existing partial order cannot be repaired after the browser has seen it.
+ * This entry does not import the React component graph at runtime.
+ */
+export function bylineLayerOrder(): Plugin {
+  return {
+    postcssPlugin: 'byline-layer-order',
+    Once(root, { AtRule }) {
+      root.prepend(new AtRule({ name: 'layer', params: componentLayers }))
+      root.prepend(new AtRule({ name: 'layer', params: layers }))
+    },
+  }
+}

package/src/dnd/draggable-sortable/demo/draggable-list-demo.module.css

@@ -1,65 +1,81 @@
-/**
- * DraggableList demo — example of how to assemble DraggableSortable +
- * useSortable into a working list. Not part of the public surface; kept as
- * a documentation example.
- *
- * Override handles:
- *   .byline-demo-list           — root list container
- *   .byline-demo-card           — single draggable card
- *   .byline-demo-card-dragging  — added while the card is mid-drag
- *   .byline-demo-card-header    — gripper + title row
- *   .byline-demo-card-grip      — drag handle column
- */
+@layer base,
+  byline-base,
+  theme,
+  byline-theme,
+  byline-functional,
+  byline-typography,
+  components,
+  byline-components,
+  overrides,
+  byline-utilities,
+  utilities;
 
-.list,
-:global(.byline-demo-list) {
-  position: relative;
-  margin-inline: auto;
-  max-width: 600px;
-}
+@layer byline-components.primitives, byline-components.cms;
 
-.card,
-:global(.byline-demo-card) {
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  min-width: 100%;
-  max-width: 24rem;
-  margin-bottom: var(--spacing-16);
-  padding: 1.5rem;
-  border: var(--border-width-thin) var(--border-style-solid) var(--canvas-25);
-  border-radius: var(--border-radius-lg);
-  background-color: white;
-  box-shadow:
-    0 4px 6px -1px rgb(0 0 0 / 0.1),
-    0 2px 4px -2px rgb(0 0 0 / 0.1);
-  text-decoration: none;
-}
+@layer byline-components.primitives {
+  /**
+   * DraggableList demo — example of how to assemble DraggableSortable +
+   * useSortable into a working list. Not part of the public surface; kept as
+   * a documentation example.
+   *
+   * Override handles:
+   *   .byline-demo-list           — root list container
+   *   .byline-demo-card           — single draggable card
+   *   .byline-demo-card-dragging  — added while the card is mid-drag
+   *   .byline-demo-card-header    — gripper + title row
+   *   .byline-demo-card-grip      — drag handle column
+   */
 
-.card-dragging,
-:global(.byline-demo-card-dragging) {
-  box-shadow:
-    0 10px 15px -3px rgb(0 0 0 / 0.1),
-    0 4px 6px -4px rgb(0 0 0 / 0.1);
-}
+  .list,
+  :global(.byline-demo-list) {
+    position: relative;
+    margin-inline: auto;
+    max-width: 600px;
+  }
 
-.card-header,
-:global(.byline-demo-card-header) {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-}
+  .card,
+  :global(.byline-demo-card) {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    min-width: 100%;
+    max-width: 24rem;
+    margin-bottom: var(--spacing-16);
+    padding: 1.5rem;
+    border: var(--border-width-thin) var(--border-style-solid) var(--canvas-25);
+    border-radius: var(--border-radius-lg);
+    background-color: white;
+    box-shadow:
+      0 4px 6px -1px rgb(0 0 0 / 0.1),
+      0 2px 4px -2px rgb(0 0 0 / 0.1);
+    text-decoration: none;
+  }
 
-.card-grip,
-:global(.byline-demo-card-grip) {
-  margin-right: var(--spacing-8);
-}
+  .card-dragging,
+  :global(.byline-demo-card-dragging) {
+    box-shadow:
+      0 10px 15px -3px rgb(0 0 0 / 0.1),
+      0 4px 6px -4px rgb(0 0 0 / 0.1);
+  }
 
-/* ─── Dark theme variants ───────────────────────────────────── */
+  .card-header,
+  :global(.byline-demo-card-header) {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+  }
 
-:is([data-theme="dark"], :global(.dark)) {
-  .card,
-  :global(.byline-demo-card) {
-    background-color: var(--canvas-800);
+  .card-grip,
+  :global(.byline-demo-card-grip) {
+    margin-right: var(--spacing-8);
+  }
+
+  /* ─── Dark theme variants ───────────────────────────────────── */
+
+  :is([data-theme="dark"], :global(.dark)) {
+    .card,
+    :global(.byline-demo-card) {
+      background-color: var(--canvas-800);
+    }
   }
 }

package/src/icons/icons.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 {
   .element-root {
     width: 1.375rem;
     height: 1.375rem;

package/src/loaders/ellipses.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 {
   .loader-ellipsis,
   :global(.byline-loader-ellipsis) {
     --_size: var(--loader-ellipsis-size, 80px);

package/src/loaders/ring.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 {
   .loader-ring,
   :global(.byline-loader-ring) {
     --_size: var(--loader-ring-size, 60px);

package/src/loaders/spinner.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 {
   .loader-spinner,
   :global(.byline-loader-spinner) {
     --_size: var(--loader-spinner-size, 56px);

package/src/styles/base/animations.css

@@ -1,3 +1,15 @@
+@layer base,
+  byline-base,
+  theme,
+  byline-theme,
+  byline-functional,
+  byline-typography,
+  components,
+  byline-components,
+  overrides,
+  byline-utilities,
+  utilities;
+@layer byline-components.primitives, byline-components.cms;
 @layer byline-base {
   @keyframes enterFromRight {
     from {

package/src/styles/base/base.css

@@ -1,3 +1,15 @@
+@layer base,
+  byline-base,
+  theme,
+  byline-theme,
+  byline-functional,
+  byline-typography,
+  components,
+  byline-components,
+  overrides,
+  byline-utilities,
+  utilities;
+@layer byline-components.primitives, byline-components.cms;
 @import "./animations.css";
 @import "./borders.css";
 @import "./breakpoints.css";

package/src/styles/base/borders.css

@@ -1,3 +1,15 @@
+@layer base,
+  byline-base,
+  theme,
+  byline-theme,
+  byline-functional,
+  byline-typography,
+  components,
+  byline-components,
+  overrides,
+  byline-utilities,
+  utilities;
+@layer byline-components.primitives, byline-components.cms;
 @layer byline-base {
   :root {
     /* ========================================

package/src/styles/base/breakpoints.css

@@ -1,3 +1,15 @@
+@layer base,
+  byline-base,
+  theme,
+  byline-theme,
+  byline-functional,
+  byline-typography,
+  components,
+  byline-components,
+  overrides,
+  byline-utilities,
+  utilities;
+@layer byline-components.primitives, byline-components.cms;
 @layer byline-base {
   :root {
     /* ========================================

package/src/styles/base/colors.css

@@ -1,3 +1,15 @@
+@layer base,
+  byline-base,
+  theme,
+  byline-theme,
+  byline-functional,
+  byline-typography,
+  components,
+  byline-components,
+  overrides,
+  byline-utilities,
+  utilities;
+@layer byline-components.primitives, byline-components.cms;
 @layer byline-base {
   :root {
     /* Theme base color */