@byline/admin 6.10.1 → 6.11.0

package/src/presentation/tabs.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;
+
 /**
  * Tabs — navigation bar for admin form layouts.
  *
@@ -21,285 +35,287 @@
  *   .byline-admin-tabs-overflow-item     — each menu item
  */
 
-.tabs,
-:global(.byline-admin-tabs) {
-  position: relative;
-  display: flex;
-  align-items: stretch;
-  gap: var(--byline-admin-tabs-trigger-gap, 12px);
-}
+@layer byline-components.cms {
+  .tabs,
+  :global(.byline-admin-tabs) {
+    position: relative;
+    display: flex;
+    align-items: stretch;
+    gap: var(--byline-admin-tabs-trigger-gap, 12px);
+  }
 
-/* The strip's hairline, drawn as a pseudo-element rather than a border so it
+  /* The strip's hairline, drawn as a pseudo-element rather than a border so it
    spans the viewport and the trigger together and so the active tab's 2px
    underline can paint over it. */
-.tabs::after,
-:global(.byline-admin-tabs)::after {
-  content: "";
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 0;
-  height: var(--border-width-thin);
-  background-color: var(--gray-200);
-}
+  .tabs::after,
+  :global(.byline-admin-tabs)::after {
+    content: "";
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 0;
+    height: var(--border-width-thin);
+    background-color: var(--gray-200);
+  }
 
-.viewport,
-:global(.byline-admin-tabs-viewport) {
-  position: relative;
-  z-index: 1;
-  flex: 1 1 auto;
-  /* A flex item refuses to shrink below its content's min-content width
+  .viewport,
+  :global(.byline-admin-tabs-viewport) {
+    position: relative;
+    z-index: 1;
+    flex: 1 1 auto;
+    /* A flex item refuses to shrink below its content's min-content width
      unless told otherwise, which would push the row past the column instead
      of scrolling it. */
-  min-width: 0;
-  overflow-x: auto;
-  overflow-y: hidden;
-  /* Stops a horizontal flick or trackpad swipe at either end of the strip
+    min-width: 0;
+    overflow-x: auto;
+    overflow-y: hidden;
+    /* Stops a horizontal flick or trackpad swipe at either end of the strip
      from chaining into the browser's back/forward navigation. */
-  overscroll-behavior-x: contain;
-  scrollbar-width: none;
-}
+    overscroll-behavior-x: contain;
+    scrollbar-width: none;
+  }
 
-.viewport::-webkit-scrollbar,
-:global(.byline-admin-tabs-viewport)::-webkit-scrollbar {
-  display: none;
-}
+  .viewport::-webkit-scrollbar,
+  :global(.byline-admin-tabs-viewport)::-webkit-scrollbar {
+    display: none;
+  }
 
-/* Drag-to-scroll affordance. Only an overflowing strip has anywhere to go, so
+  /* Drag-to-scroll affordance. Only an overflowing strip has anywhere to go, so
    only an overflowing strip offers the grab cursor. The tabs keep their own
    pointer cursor, so they still read as clickable. */
-.viewport[data-draggable="true"],
-:global(.byline-admin-tabs-viewport)[data-draggable="true"] {
-  cursor: grab;
-}
+  .viewport[data-draggable="true"],
+  :global(.byline-admin-tabs-viewport)[data-draggable="true"] {
+    cursor: grab;
+  }
 
-.viewport[data-dragging="true"],
-:global(.byline-admin-tabs-viewport)[data-dragging="true"] {
-  cursor: grabbing;
-  /* Suppress text selection for the duration: without this a drag across the
+  .viewport[data-dragging="true"],
+  :global(.byline-admin-tabs-viewport)[data-dragging="true"] {
+    cursor: grabbing;
+    /* Suppress text selection for the duration: without this a drag across the
      labels selects them, and the selection highlight follows the pointer. */
-  user-select: none;
-  -webkit-user-select: none;
-}
+    user-select: none;
+    -webkit-user-select: none;
+  }
 
-.viewport[data-dragging="true"] :global(.byline-admin-tab),
-:global(.byline-admin-tabs-viewport)[data-dragging="true"] :global(.byline-admin-tab) {
-  cursor: grabbing;
-}
+  .viewport[data-dragging="true"] :global(.byline-admin-tab),
+  :global(.byline-admin-tabs-viewport)[data-dragging="true"] :global(.byline-admin-tab) {
+    cursor: grabbing;
+  }
 
-/* Edge fades, applied as a mask so they neither scroll with the content nor
+  /* Edge fades, applied as a mask so they neither scroll with the content nor
    need elements of their own. Each side is sized to zero unless that edge has
    something beyond it, which tabs.tsx reports via the data attributes. */
-.viewport,
-:global(.byline-admin-tabs-viewport) {
-  --fade-start: 0px;
-  --fade-end: 0px;
-  -webkit-mask-image: linear-gradient(
-    to right,
-    transparent 0,
-    black var(--fade-start),
-    black calc(100% - var(--fade-end)),
-    transparent 100%
-  );
-  mask-image: linear-gradient(
-    to right,
-    transparent 0,
-    black var(--fade-start),
-    black calc(100% - var(--fade-end)),
-    transparent 100%
-  );
-}
+  .viewport,
+  :global(.byline-admin-tabs-viewport) {
+    --fade-start: 0px;
+    --fade-end: 0px;
+    -webkit-mask-image: linear-gradient(
+      to right,
+      transparent 0,
+      black var(--fade-start),
+      black calc(100% - var(--fade-end)),
+      transparent 100%
+    );
+    mask-image: linear-gradient(
+      to right,
+      transparent 0,
+      black var(--fade-start),
+      black calc(100% - var(--fade-end)),
+      transparent 100%
+    );
+  }
 
-.viewport[data-at-start="false"],
-:global(.byline-admin-tabs-viewport)[data-at-start="false"] {
-  --fade-start: 1.5rem;
-}
+  .viewport[data-at-start="false"],
+  :global(.byline-admin-tabs-viewport)[data-at-start="false"] {
+    --fade-start: 1.5rem;
+  }
 
-.viewport[data-at-end="false"],
-:global(.byline-admin-tabs-viewport)[data-at-end="false"] {
-  --fade-end: 1.5rem;
-}
+  .viewport[data-at-end="false"],
+  :global(.byline-admin-tabs-viewport)[data-at-end="false"] {
+    --fade-end: 1.5rem;
+  }
 
-.tablist,
-:global(.byline-admin-tablist) {
-  /* `max-content` keeps the row at its intrinsic width whatever the viewport
+  .tablist,
+  :global(.byline-admin-tablist) {
+    /* `max-content` keeps the row at its intrinsic width whatever the viewport
      is doing. A row that shrank to fit would report the viewport's width back
      to the overflow geometry, which could then never detect overflow. It also
      makes the row the offset parent the reveal arithmetic measures against. */
-  position: relative;
-  display: flex;
-  width: max-content;
-  gap: var(--spacing-16);
-}
-
-.tab,
-:global(.byline-admin-tab) {
-  position: relative;
-  flex: none;
-  padding: 0.625rem 0;
-  border-bottom: 2px solid transparent;
-  background: none;
-  color: var(--gray-500);
-  font-size: 1.1rem;
-  font-weight: var(--font-weight-medium);
-  white-space: nowrap;
-  cursor: pointer;
-  transition:
-    color 150ms ease,
-    border-color 150ms ease;
-  outline: none;
-}
-
-.tab:hover,
-:global(.byline-admin-tab):hover {
-  color: var(--gray-800);
-  border-bottom-color: var(--gray-300);
-}
-
-/* An inset ring rather than an outset one: the viewport clips overflow, and an
-   outset focus ring on the first or last tab would be cut in half. */
-.tab:focus-visible,
-:global(.byline-admin-tab):focus-visible {
-  box-shadow: inset 0 0 0 2px var(--blue-500);
-  border-radius: var(--radius-sm, 3px);
-}
-
-.tab-active,
-:global(.byline-admin-tab-active) {
-  color: var(--primary-600);
-  border-bottom-color: var(--primary-400);
-}
-
-.tab-active:hover,
-:global(.byline-admin-tab-active):hover {
-  color: var(--primary-600);
-  border-bottom-color: var(--primary-400);
-}
-
-.label,
-:global(.byline-admin-tab-label) {
-  display: flex;
-  align-items: center;
-  gap: 0.375rem;
-}
-
-.badge,
-:global(.byline-admin-tab-badge) {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 1.25rem;
-  height: 1.25rem;
-  padding: 0 0.375rem;
-  font-size: 0.7rem;
-}
-
-.overflow-trigger,
-:global(.byline-admin-tabs-overflow-trigger) {
-  position: relative;
-  z-index: 1;
-  flex: none;
-  align-self: center;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--byline-admin-tabs-trigger-size, 32px);
-  height: var(--byline-admin-tabs-trigger-size, 32px);
-  padding: 0;
-  border: var(--border-width-thin) var(--border-style-solid) transparent;
-  border-radius: var(--radius-sm, 3px);
-  background: none;
-  color: var(--gray-500);
-  cursor: pointer;
-  transition:
-    color 150ms ease,
-    background-color 150ms ease;
-}
-
-.overflow-trigger:hover,
-:global(.byline-admin-tabs-overflow-trigger):hover {
-  color: var(--gray-800);
-  background-color: var(--gray-100);
-}
-
-.overflow-trigger:focus-visible,
-:global(.byline-admin-tabs-overflow-trigger):focus-visible {
-  outline: 2px solid var(--blue-500);
-  outline-offset: 1px;
-}
-
-.overflow-icon,
-:global(.byline-admin-tabs-overflow-icon) {
-  width: 1.125rem;
-  height: 1.125rem;
-}
-
-.overflow-menu,
-:global(.byline-admin-tabs-overflow-menu) {
-  min-width: 12rem;
-  max-height: 60vh;
-  overflow-y: auto;
-}
-
-.overflow-item,
-:global(.byline-admin-tabs-overflow-item) {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--spacing-8);
-}
-
-.overflow-item[data-active="true"],
-:global(.byline-admin-tabs-overflow-item)[data-active="true"] {
-  color: var(--primary-600);
-  font-weight: var(--font-weight-medium);
-}
-
-/* ─── Dark theme variants ───────────────────────────────────── */
-
-:is([data-theme="dark"], :global(.dark)) {
-  .tabs::after,
-  :global(.byline-admin-tabs)::after {
-    background-color: var(--gray-700);
+    position: relative;
+    display: flex;
+    width: max-content;
+    gap: var(--spacing-16);
   }
 
   .tab,
   :global(.byline-admin-tab) {
-    color: var(--gray-400);
+    position: relative;
+    flex: none;
+    padding: 0.625rem 0;
+    border-bottom: 2px solid transparent;
+    background: none;
+    color: var(--gray-500);
+    font-size: 1.1rem;
+    font-weight: var(--font-weight-medium);
+    white-space: nowrap;
+    cursor: pointer;
+    transition:
+      color 150ms ease,
+      border-color 150ms ease;
+    outline: none;
   }
 
   .tab:hover,
   :global(.byline-admin-tab):hover {
-    color: var(--gray-200);
-    border-bottom-color: var(--gray-600);
+    color: var(--gray-800);
+    border-bottom-color: var(--gray-300);
+  }
+
+  /* An inset ring rather than an outset one: the viewport clips overflow, and an
+   outset focus ring on the first or last tab would be cut in half. */
+  .tab:focus-visible,
+  :global(.byline-admin-tab):focus-visible {
+    box-shadow: inset 0 0 0 2px var(--blue-500);
+    border-radius: var(--radius-sm, 3px);
   }
 
   .tab-active,
   :global(.byline-admin-tab-active) {
-    color: var(--primary-200);
+    color: var(--primary-600);
     border-bottom-color: var(--primary-400);
   }
 
   .tab-active:hover,
   :global(.byline-admin-tab-active):hover {
-    color: var(--primary-200);
+    color: var(--primary-600);
     border-bottom-color: var(--primary-400);
   }
 
+  .label,
+  :global(.byline-admin-tab-label) {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+  }
+
+  .badge,
+  :global(.byline-admin-tab-badge) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 1.25rem;
+    height: 1.25rem;
+    padding: 0 0.375rem;
+    font-size: 0.7rem;
+  }
+
   .overflow-trigger,
   :global(.byline-admin-tabs-overflow-trigger) {
-    color: var(--gray-400);
+    position: relative;
+    z-index: 1;
+    flex: none;
+    align-self: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--byline-admin-tabs-trigger-size, 32px);
+    height: var(--byline-admin-tabs-trigger-size, 32px);
+    padding: 0;
+    border: var(--border-width-thin) var(--border-style-solid) transparent;
+    border-radius: var(--radius-sm, 3px);
+    background: none;
+    color: var(--gray-500);
+    cursor: pointer;
+    transition:
+      color 150ms ease,
+      background-color 150ms ease;
   }
 
   .overflow-trigger:hover,
   :global(.byline-admin-tabs-overflow-trigger):hover {
-    color: var(--gray-200);
-    background-color: var(--gray-800);
+    color: var(--gray-800);
+    background-color: var(--gray-100);
+  }
+
+  .overflow-trigger:focus-visible,
+  :global(.byline-admin-tabs-overflow-trigger):focus-visible {
+    outline: 2px solid var(--blue-500);
+    outline-offset: 1px;
+  }
+
+  .overflow-icon,
+  :global(.byline-admin-tabs-overflow-icon) {
+    width: 1.125rem;
+    height: 1.125rem;
+  }
+
+  .overflow-menu,
+  :global(.byline-admin-tabs-overflow-menu) {
+    min-width: 12rem;
+    max-height: 60vh;
+    overflow-y: auto;
+  }
+
+  .overflow-item,
+  :global(.byline-admin-tabs-overflow-item) {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--spacing-8);
   }
 
   .overflow-item[data-active="true"],
   :global(.byline-admin-tabs-overflow-item)[data-active="true"] {
-    color: var(--primary-200);
+    color: var(--primary-600);
+    font-weight: var(--font-weight-medium);
+  }
+
+  /* ─── Dark theme variants ───────────────────────────────────── */
+
+  :is([data-theme="dark"], :global(.dark)) {
+    .tabs::after,
+    :global(.byline-admin-tabs)::after {
+      background-color: var(--gray-700);
+    }
+
+    .tab,
+    :global(.byline-admin-tab) {
+      color: var(--gray-400);
+    }
+
+    .tab:hover,
+    :global(.byline-admin-tab):hover {
+      color: var(--gray-200);
+      border-bottom-color: var(--gray-600);
+    }
+
+    .tab-active,
+    :global(.byline-admin-tab-active) {
+      color: var(--primary-200);
+      border-bottom-color: var(--primary-400);
+    }
+
+    .tab-active:hover,
+    :global(.byline-admin-tab-active):hover {
+      color: var(--primary-200);
+      border-bottom-color: var(--primary-400);
+    }
+
+    .overflow-trigger,
+    :global(.byline-admin-tabs-overflow-trigger) {
+      color: var(--gray-400);
+    }
+
+    .overflow-trigger:hover,
+    :global(.byline-admin-tabs-overflow-trigger):hover {
+      color: var(--gray-200);
+      background-color: var(--gray-800);
+    }
+
+    .overflow-item[data-active="true"],
+    :global(.byline-admin-tabs-overflow-item)[data-active="true"] {
+      color: var(--primary-200);
+    }
   }
 }

package/src/widgets/diff-viewer/diff-modal.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;
+
 /**
  * DiffModal — side-by-side document version comparison modal.
  *
@@ -13,67 +27,69 @@
  *   .byline-diff-modal-viewer     — diff viewer wrapper
  */
 
-.header,
-:global(.byline-diff-modal-header) {
-  padding-top: var(--spacing-16);
-  margin-bottom: var(--spacing-8);
-  flex-shrink: 0;
-}
+@layer byline-components.cms {
+  .header,
+  :global(.byline-diff-modal-header) {
+    padding-top: var(--spacing-16);
+    margin-bottom: var(--spacing-8);
+    flex-shrink: 0;
+  }
 
-.title-stack,
-:global(.byline-diff-modal-title-stack) {
-  display: flex;
-  flex-direction: column;
-}
+  .title-stack,
+  :global(.byline-diff-modal-title-stack) {
+    display: flex;
+    flex-direction: column;
+  }
 
-.title,
-:global(.byline-diff-modal-title) {
-  margin: 0;
-  font-size: var(--font-size-xl);
-}
+  .title,
+  :global(.byline-diff-modal-title) {
+    margin: 0;
+    font-size: var(--font-size-xl);
+  }
 
-.subtitle,
-:global(.byline-diff-modal-subtitle) {
-  margin: 0;
-  font-size: var(--font-size-sm);
-  color: var(--gray-400);
-}
+  .subtitle,
+  :global(.byline-diff-modal-subtitle) {
+    margin: 0;
+    font-size: var(--font-size-sm);
+    color: var(--gray-400);
+  }
 
-.version,
-:global(.byline-diff-modal-version) {
-  font-family: var(--font-family-mono);
-  font-size: var(--font-size-xs);
-  background-color: var(--canvas-700);
-  padding: 0 var(--spacing-4);
-  border-radius: var(--border-radius-sm);
-}
+  .version,
+  :global(.byline-diff-modal-version) {
+    font-family: var(--font-family-mono);
+    font-size: var(--font-size-xs);
+    background-color: var(--canvas-700);
+    padding: 0 var(--spacing-4);
+    border-radius: var(--border-radius-sm);
+  }
 
-.content,
-:global(.byline-diff-modal-content) {
-  flex: 1 1 0;
-  overflow: auto;
-  padding: 0;
-  min-height: 0;
-}
+  .content,
+  :global(.byline-diff-modal-content) {
+    flex: 1 1 0;
+    overflow: auto;
+    padding: 0;
+    min-height: 0;
+  }
 
-.state,
-:global(.byline-diff-modal-state) {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  gap: var(--spacing-12);
-  color: var(--gray-400);
-}
+  .state,
+  :global(.byline-diff-modal-state) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    gap: var(--spacing-12);
+    color: var(--gray-400);
+  }
 
-.error,
-:global(.byline-diff-modal-error) {
-  color: var(--red-400);
-  gap: 0;
-}
+  .error,
+  :global(.byline-diff-modal-error) {
+    color: var(--red-400);
+    gap: 0;
+  }
 
-.viewer,
-:global(.byline-diff-modal-viewer) {
-  font-family: var(--font-family-mono);
-  font-size: var(--font-size-sm);
+  .viewer,
+  :global(.byline-diff-modal-viewer) {
+    font-family: var(--font-family-mono);
+    font-size: var(--font-size-sm);
+  }
 }