@byline/admin 6.10.0 → 6.11.0

package/src/fields/image/image-field.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;
+
 /**
  * ImageField — image preview + metadata + remove/upload affordances.
  *
@@ -16,140 +30,142 @@
  *   .byline-field-image-meta-pending   — yellow text inside pending status
  */
 
-.header,
-:global(.byline-field-image-header) {
-  display: flex;
-  align-items: baseline;
-  gap: var(--spacing-8);
-  margin-bottom: 0.25rem;
-}
-
-.remove,
-:global(.byline-field-image-remove) {
-  position: absolute;
-  top: var(--spacing-6);
-  right: var(--spacing-6);
-  z-index: 1;
-}
-
-:global(.byline-field-image-remove .byline-button) {
-  color: var(--gray-900);
-}
-
-:global(.dark .byline-field-image-remove .byline-button),
-:global([data-theme="dark"] .byline-field-image-remove .byline-button) {
-  color: var(--gray-200);
-}
-
-.empty,
-:global(.byline-field-image-empty) {
-  color: var(--gray-500);
-  font-size: var(--font-size-xs);
-  font-style: italic;
-}
-
-.tile,
-:global(.byline-field-image-tile) {
-  position: relative;
-  display: flex;
-  gap: var(--spacing-16);
-  margin-top: 0.25rem;
-  padding: var(--spacing-8);
-  border: var(--border-width-thin) var(--border-style-solid) var(--primary-500);
-  border-radius: var(--border-radius-md);
-}
-
-.preview-wrap,
-:global(.byline-field-image-preview-wrap) {
-  position: relative;
-}
-
-.preview-button,
-:global(.byline-field-image-preview-button) {
-  appearance: none;
-  background: none;
-  border: none;
-  padding: 0;
-  margin: 0;
-  display: block;
-  cursor: pointer;
-  border-radius: var(--border-radius-sm);
-}
-
-.preview-button:focus-visible,
-:global(.byline-field-image-preview-button):focus-visible {
-  outline: 2px solid var(--primary-500);
-  outline-offset: 2px;
-}
-
-.preview-button img,
-:global(.byline-field-image-preview-button) img {
-  transition: opacity 120ms ease;
-}
-
-.preview-button:hover img,
-:global(.byline-field-image-preview-button):hover img {
-  opacity: 0.85;
-}
-
-.preview,
-:global(.byline-field-image-preview) {
-  max-height: 10rem;
-  min-height: 4rem;
-  min-width: 4rem;
-  border: var(--border-width-thin) var(--border-style-solid) var(--gray-600);
-  border-radius: var(--border-radius-sm);
-  object-fit: contain;
-}
-
-.preview-svg,
-:global(.byline-field-image-preview-svg) {
-  width: 271px;
-  height: 159px;
-  max-height: none;
-}
-
-.pending,
-:global(.byline-field-image-pending) {
-  position: absolute;
-  top: 0.25rem;
-  left: 0.25rem;
-  padding: 0.125rem 0.375rem;
-  background-color: oklch(from var(--yellow-600) l c h / 0.9);
-  color: var(--yellow-100);
-  font-size: 0.6rem;
-  font-weight: var(--font-weight-medium);
-  border-radius: var(--border-radius-sm);
-}
-
-.uploading,
-:global(.byline-field-image-uploading) {
-  position: absolute;
-  inset: 0;
-  z-index: 2;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: oklch(from var(--gray-950) l c h / 0.5);
-  border-radius: var(--border-radius-md);
-}
-
-.meta,
-:global(.byline-field-image-meta) {
-  display: flex;
-  flex-direction: column;
-  gap: 0.125rem;
-  padding-right: var(--spacing-32);
-  color: var(--gray-200);
-  font-size: var(--font-size-xs);
-}
-
-.meta-key,
-:global(.byline-field-image-meta-key) {
-  font-weight: var(--font-weight-semibold);
-}
-
-.meta-pending,
-:global(.byline-field-image-meta-pending) {
-  color: var(--yellow-400);
+@layer byline-components.cms {
+  .header,
+  :global(.byline-field-image-header) {
+    display: flex;
+    align-items: baseline;
+    gap: var(--spacing-8);
+    margin-bottom: 0.25rem;
+  }
+
+  .remove,
+  :global(.byline-field-image-remove) {
+    position: absolute;
+    top: var(--spacing-6);
+    right: var(--spacing-6);
+    z-index: 1;
+  }
+
+  :global(.byline-field-image-remove .byline-button) {
+    color: var(--gray-900);
+  }
+
+  :global(.dark .byline-field-image-remove .byline-button),
+  :global([data-theme="dark"] .byline-field-image-remove .byline-button) {
+    color: var(--gray-200);
+  }
+
+  .empty,
+  :global(.byline-field-image-empty) {
+    color: var(--gray-500);
+    font-size: var(--font-size-xs);
+    font-style: italic;
+  }
+
+  .tile,
+  :global(.byline-field-image-tile) {
+    position: relative;
+    display: flex;
+    gap: var(--spacing-16);
+    margin-top: 0.25rem;
+    padding: var(--spacing-8);
+    border: var(--border-width-thin) var(--border-style-solid) var(--primary-500);
+    border-radius: var(--border-radius-md);
+  }
+
+  .preview-wrap,
+  :global(.byline-field-image-preview-wrap) {
+    position: relative;
+  }
+
+  .preview-button,
+  :global(.byline-field-image-preview-button) {
+    appearance: none;
+    background: none;
+    border: none;
+    padding: 0;
+    margin: 0;
+    display: block;
+    cursor: pointer;
+    border-radius: var(--border-radius-sm);
+  }
+
+  .preview-button:focus-visible,
+  :global(.byline-field-image-preview-button):focus-visible {
+    outline: 2px solid var(--primary-500);
+    outline-offset: 2px;
+  }
+
+  .preview-button img,
+  :global(.byline-field-image-preview-button) img {
+    transition: opacity 120ms ease;
+  }
+
+  .preview-button:hover img,
+  :global(.byline-field-image-preview-button):hover img {
+    opacity: 0.85;
+  }
+
+  .preview,
+  :global(.byline-field-image-preview) {
+    max-height: 10rem;
+    min-height: 4rem;
+    min-width: 4rem;
+    border: var(--border-width-thin) var(--border-style-solid) var(--gray-600);
+    border-radius: var(--border-radius-sm);
+    object-fit: contain;
+  }
+
+  .preview-svg,
+  :global(.byline-field-image-preview-svg) {
+    width: 271px;
+    height: 159px;
+    max-height: none;
+  }
+
+  .pending,
+  :global(.byline-field-image-pending) {
+    position: absolute;
+    top: 0.25rem;
+    left: 0.25rem;
+    padding: 0.125rem 0.375rem;
+    background-color: oklch(from var(--yellow-600) l c h / 0.9);
+    color: var(--yellow-100);
+    font-size: 0.6rem;
+    font-weight: var(--font-weight-medium);
+    border-radius: var(--border-radius-sm);
+  }
+
+  .uploading,
+  :global(.byline-field-image-uploading) {
+    position: absolute;
+    inset: 0;
+    z-index: 2;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: oklch(from var(--gray-950) l c h / 0.5);
+    border-radius: var(--border-radius-md);
+  }
+
+  .meta,
+  :global(.byline-field-image-meta) {
+    display: flex;
+    flex-direction: column;
+    gap: 0.125rem;
+    padding-right: var(--spacing-32);
+    color: var(--gray-200);
+    font-size: var(--font-size-xs);
+  }
+
+  .meta-key,
+  :global(.byline-field-image-meta-key) {
+    font-weight: var(--font-weight-semibold);
+  }
+
+  .meta-pending,
+  :global(.byline-field-image-meta-pending) {
+    color: var(--yellow-400);
+  }
 }

package/src/fields/image/image-upload-field.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;
+
 /**
  * ImageUploadField — drag-and-drop image picker that registers a deferred
  * upload in form context.
@@ -16,108 +30,110 @@
  *   .byline-field-image-upload-error          — error message paragraph
  */
 
-.root,
-:global(.byline-field-image-upload) {
-  margin-top: 0.25rem;
-}
+@layer byline-components.cms {
+  .root,
+  :global(.byline-field-image-upload) {
+    margin-top: 0.25rem;
+  }
 
-.input,
-:global(.byline-field-image-upload-input) {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}
+  .input,
+  :global(.byline-field-image-upload-input) {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
 
-.zone,
-:global(.byline-field-image-upload-zone) {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: var(--spacing-8);
-  padding: 1.5rem 1rem;
-  border: 2px dashed var(--gray-600);
-  border-radius: var(--border-radius-lg);
-  color: var(--gray-400);
-  text-align: center;
-  cursor: pointer;
-  user-select: none;
-  transition:
-    color 150ms ease,
-    background-color 150ms ease,
-    border-color 150ms ease;
-}
+  .zone,
+  :global(.byline-field-image-upload-zone) {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: var(--spacing-8);
+    padding: 1.5rem 1rem;
+    border: 2px dashed var(--gray-600);
+    border-radius: var(--border-radius-lg);
+    color: var(--gray-400);
+    text-align: center;
+    cursor: pointer;
+    user-select: none;
+    transition:
+      color 150ms ease,
+      background-color 150ms ease,
+      border-color 150ms ease;
+  }
 
-.zone:hover,
-:global(.byline-field-image-upload-zone):hover {
-  border-color: var(--primary-500);
-  background-color: oklch(from var(--primary-900) l c h / 0.1);
-}
+  .zone:hover,
+  :global(.byline-field-image-upload-zone):hover {
+    border-color: var(--primary-500);
+    background-color: oklch(from var(--primary-900) l c h / 0.1);
+  }
 
-.zone-active,
-:global(.byline-field-image-upload-zone-active) {
-  border-color: var(--primary-400);
-  background-color: oklch(from var(--primary-900) l c h / 0.2);
-  color: var(--primary-300);
-}
+  .zone-active,
+  :global(.byline-field-image-upload-zone-active) {
+    border-color: var(--primary-400);
+    background-color: oklch(from var(--primary-900) l c h / 0.2);
+    color: var(--primary-300);
+  }
 
-.zone-busy,
-:global(.byline-field-image-upload-zone-busy) {
-  border-color: var(--gray-700);
-  background-color: oklch(from var(--canvas-800) l c h / 0.5);
-  color: var(--gray-600);
-  cursor: not-allowed;
-}
+  .zone-busy,
+  :global(.byline-field-image-upload-zone-busy) {
+    border-color: var(--gray-700);
+    background-color: oklch(from var(--canvas-800) l c h / 0.5);
+    color: var(--gray-600);
+    cursor: not-allowed;
+  }
 
-.spinner,
-:global(.byline-field-image-upload-spinner) {
-  width: 1.5rem;
-  height: 1.5rem;
-  color: var(--primary-400);
-  animation: byline-image-upload-spin 1s linear infinite;
-}
+  .spinner,
+  :global(.byline-field-image-upload-spinner) {
+    width: 1.5rem;
+    height: 1.5rem;
+    color: var(--primary-400);
+    animation: byline-image-upload-spin 1s linear infinite;
+  }
 
-@keyframes byline-image-upload-spin {
-  to {
-    transform: rotate(360deg);
+  @keyframes byline-image-upload-spin {
+    to {
+      transform: rotate(360deg);
+    }
   }
-}
 
-.icon,
-:global(.byline-field-image-upload-icon) {
-  width: 1.75rem;
-  height: 1.75rem;
-  opacity: 0.6;
-}
+  .icon,
+  :global(.byline-field-image-upload-icon) {
+    width: 1.75rem;
+    height: 1.75rem;
+    opacity: 0.6;
+  }
 
-.label,
-:global(.byline-field-image-upload-label) {
-  font-size: var(--font-size-xs);
-  font-weight: var(--font-weight-medium);
-}
+  .label,
+  :global(.byline-field-image-upload-label) {
+    font-size: var(--font-size-xs);
+    font-weight: var(--font-weight-medium);
+  }
 
-.action,
-:global(.byline-field-image-upload-action) {
-  color: var(--primary-400);
-  text-decoration: underline;
-  text-underline-offset: 2px;
-}
+  .action,
+  :global(.byline-field-image-upload-action) {
+    color: var(--primary-400);
+    text-decoration: underline;
+    text-underline-offset: 2px;
+  }
 
-.hint,
-:global(.byline-field-image-upload-hint) {
-  color: var(--gray-500);
-  font-size: 0.65rem;
-}
+  .hint,
+  :global(.byline-field-image-upload-hint) {
+    color: var(--gray-500);
+    font-size: 0.65rem;
+  }
 
-.error,
-:global(.byline-field-image-upload-error) {
-  margin-top: 0.375rem;
-  color: var(--red-400);
-  font-size: var(--font-size-xs);
+  .error,
+  :global(.byline-field-image-upload-error) {
+    margin-top: 0.375rem;
+    color: var(--red-400);
+    font-size: var(--font-size-xs);
+  }
 }

package/src/fields/locale-badge.module.css

@@ -1,37 +1,53 @@
+@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;
+
 /**
  * LocaleBadge — small inline badge shown next to a localised field label.
  *
  * Override handle: `.byline-locale-badge`
  */
 
-.badge,
-:global(.byline-locale-badge) {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.125rem;
-  margin-left: 0.375rem;
-  padding: 0.125rem 0.375rem;
-  border: var(--border-width-thin) var(--border-style-solid) var(--yellow-400);
-  border-radius: var(--border-radius-sm);
-  background-color: var(--yellow-100);
-  color: var(--yellow-800);
-  font-size: 0.6rem;
-  font-weight: var(--font-weight-semibold);
-  line-height: 1;
-  letter-spacing: var(--letter-spacing-wide);
-  text-transform: uppercase;
-  pointer-events: none;
-  user-select: none;
-  vertical-align: middle;
-}
-
-/* ─── Dark theme variants ───────────────────────────────────── */
-
-:is([data-theme="dark"], :global(.dark)) {
+@layer byline-components.cms {
   .badge,
   :global(.byline-locale-badge) {
-    border-color: var(--yellow-700);
-    background-color: oklch(from var(--yellow-900) l c h / 0.4);
-    color: var(--yellow-400);
+    display: inline-flex;
+    align-items: center;
+    gap: 0.125rem;
+    margin-left: 0.375rem;
+    padding: 0.125rem 0.375rem;
+    border: var(--border-width-thin) var(--border-style-solid) var(--yellow-400);
+    border-radius: var(--border-radius-sm);
+    background-color: var(--yellow-100);
+    color: var(--yellow-800);
+    font-size: 0.6rem;
+    font-weight: var(--font-weight-semibold);
+    line-height: 1;
+    letter-spacing: var(--letter-spacing-wide);
+    text-transform: uppercase;
+    pointer-events: none;
+    user-select: none;
+    vertical-align: middle;
+  }
+
+  /* ─── Dark theme variants ───────────────────────────────────── */
+
+  :is([data-theme="dark"], :global(.dark)) {
+    .badge,
+    :global(.byline-locale-badge) {
+      border-color: var(--yellow-700);
+      background-color: oklch(from var(--yellow-900) l c h / 0.4);
+      color: var(--yellow-400);
+    }
   }
 }

package/src/fields/relation/relation-display.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;
+
 /**
  * RelationDisplay — shared cell renderer for relation picker rows and the
  * relation-summary selected-value tile.
@@ -8,29 +22,31 @@
  *   .byline-relation-cell-right     — cell with align: right
  */
 
-.cell,
-:global(.byline-relation-cell) {
-  min-width: 0;
-  color: var(--gray-700);
-  font-size: var(--font-size-sm);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
+@layer byline-components.cms {
+  .cell,
+  :global(.byline-relation-cell) {
+    min-width: 0;
+    color: var(--gray-700);
+    font-size: var(--font-size-sm);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
 
-.cell-center,
-:global(.byline-relation-cell-center) {
-  text-align: center;
-}
+  .cell-center,
+  :global(.byline-relation-cell-center) {
+    text-align: center;
+  }
 
-.cell-right,
-:global(.byline-relation-cell-right) {
-  text-align: right;
-}
+  .cell-right,
+  :global(.byline-relation-cell-right) {
+    text-align: right;
+  }
 
-:is([data-theme="dark"], :global(.dark)) {
-  .cell,
-  :global(.byline-relation-cell) {
-    color: var(--gray-100);
+  :is([data-theme="dark"], :global(.dark)) {
+    .cell,
+    :global(.byline-relation-cell) {
+      color: var(--gray-100);
+    }
   }
 }