@byline/admin 6.10.1 → 6.11.0

package/src/fields/relation/relation-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;
+
 /**
  * RelationField — widget for `type: 'relation'` fields.
  *
@@ -16,70 +30,71 @@
  * relation-specific help class.
  */
 
-.header,
-:global(.byline-field-relation-header) {
-  display: flex;
-  align-items: baseline;
-  gap: var(--spacing-8);
-  margin-bottom: 0.25rem;
-}
-
-.error-tile,
-:global(.byline-field-relation-error-tile) {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-  margin-top: 0.25rem;
-  padding: var(--spacing-8);
-  border: var(--border-width-thin) var(--border-style-solid) var(--red-700);
-  background-color: oklch(from var(--red-900) l c h / 0.2);
-  border-radius: var(--border-radius-md);
-  color: var(--red-200);
-  font-size: var(--font-size-xs);
-}
-
-.error-text,
-:global(.byline-field-relation-error-text) {
-  color: oklch(from var(--red-400) l c h / 0.8);
-}
-
-.tile,
-:global(.byline-field-relation-tile) {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: var(--spacing-8);
-  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);
-  color: var(--gray-200);
-  font-size: var(--font-size-xs);
-}
-
-.actions,
-:global(.byline-field-relation-actions) {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-4);
-  flex-shrink: 0;
-}
-
-:global(.byline-field-relation-actions .byline-button) {
-  color: var(--gray-900);
-}
-
-:global(.dark .byline-field-relation-actions .byline-button),
-:global([data-theme="dark"] .byline-field-relation-actions .byline-button) {
-  color: var(--gray-200);
-}
-
-.mono,
-:global(.byline-field-relation-mono) {
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
-}
-
-/* ---------------------------------------------------------------------------
+@layer byline-components.cms {
+  .header,
+  :global(.byline-field-relation-header) {
+    display: flex;
+    align-items: baseline;
+    gap: var(--spacing-8);
+    margin-bottom: 0.25rem;
+  }
+
+  .error-tile,
+  :global(.byline-field-relation-error-tile) {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    margin-top: 0.25rem;
+    padding: var(--spacing-8);
+    border: var(--border-width-thin) var(--border-style-solid) var(--red-700);
+    background-color: oklch(from var(--red-900) l c h / 0.2);
+    border-radius: var(--border-radius-md);
+    color: var(--red-200);
+    font-size: var(--font-size-xs);
+  }
+
+  .error-text,
+  :global(.byline-field-relation-error-text) {
+    color: oklch(from var(--red-400) l c h / 0.8);
+  }
+
+  .tile,
+  :global(.byline-field-relation-tile) {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: var(--spacing-8);
+    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);
+    color: var(--gray-200);
+    font-size: var(--font-size-xs);
+  }
+
+  .actions,
+  :global(.byline-field-relation-actions) {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-4);
+    flex-shrink: 0;
+  }
+
+  :global(.byline-field-relation-actions .byline-button) {
+    color: var(--gray-900);
+  }
+
+  :global(.dark .byline-field-relation-actions .byline-button),
+  :global([data-theme="dark"] .byline-field-relation-actions .byline-button) {
+    color: var(--gray-200);
+  }
+
+  .mono,
+  :global(.byline-field-relation-mono) {
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  }
+
+  /* ---------------------------------------------------------------------------
  * hasMany — ordered list of relation tiles with drag-reorder + remove.
  *
  * Override handles:
@@ -91,76 +106,76 @@
  *   .byline-field-relation-many-add    — add-item button row
  * --------------------------------------------------------------------------- */
 
-.many,
-:global(.byline-field-relation-many) {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-4);
-  margin-top: 0.25rem;
-}
-
-.many-empty,
-:global(.byline-field-relation-many-empty) {
-  margin: 0.25rem 0;
-  color: var(--gray-400);
-  font-size: var(--font-size-xs);
-}
-
-.many-tile,
-:global(.byline-field-relation-many-tile) {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-8);
-  padding: var(--spacing-4) var(--spacing-8);
-  border: var(--border-width-thin) var(--border-style-solid) var(--primary-500);
-  border-radius: var(--border-radius-md);
-  background-color: var(--surface-100, transparent);
-  color: var(--gray-200);
-  font-size: var(--font-size-xs);
-}
-
-.many-tile-dragging,
-:global(.byline-field-relation-many-tile-dragging) {
-  opacity: 0.85;
-  box-shadow: var(--shadow-md, 0 4px 12px rgb(0 0 0 / 0.2));
-}
-
-.many-grip,
-:global(.byline-field-relation-many-grip) {
-  display: inline-flex;
-  align-items: center;
-  flex-shrink: 0;
-  padding: 0;
-  border: none;
-  background: none;
-  color: var(--gray-400);
-  cursor: grab;
-  touch-action: none;
-}
-
-.many-grip:active,
-:global(.byline-field-relation-many-grip:active) {
-  cursor: grabbing;
-}
-
-.many-body,
-:global(.byline-field-relation-many-body) {
-  flex: 1 1 auto;
-  min-width: 0;
-}
-
-.many-remove,
-:global(.byline-field-relation-many-remove) {
-  flex-shrink: 0;
-}
-
-.many-add,
-:global(.byline-field-relation-many-add) {
-  display: flex;
-  margin-top: 0.25rem;
-}
-
-/* ---------------------------------------------------------------------------
+  .many,
+  :global(.byline-field-relation-many) {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-4);
+    margin-top: 0.25rem;
+  }
+
+  .many-empty,
+  :global(.byline-field-relation-many-empty) {
+    margin: 0.25rem 0;
+    color: var(--gray-400);
+    font-size: var(--font-size-xs);
+  }
+
+  .many-tile,
+  :global(.byline-field-relation-many-tile) {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-8);
+    padding: var(--spacing-4) var(--spacing-8);
+    border: var(--border-width-thin) var(--border-style-solid) var(--primary-500);
+    border-radius: var(--border-radius-md);
+    background-color: var(--surface-100, transparent);
+    color: var(--gray-200);
+    font-size: var(--font-size-xs);
+  }
+
+  .many-tile-dragging,
+  :global(.byline-field-relation-many-tile-dragging) {
+    opacity: 0.85;
+    box-shadow: var(--shadow-md, 0 4px 12px rgb(0 0 0 / 0.2));
+  }
+
+  .many-grip,
+  :global(.byline-field-relation-many-grip) {
+    display: inline-flex;
+    align-items: center;
+    flex-shrink: 0;
+    padding: 0;
+    border: none;
+    background: none;
+    color: var(--gray-400);
+    cursor: grab;
+    touch-action: none;
+  }
+
+  .many-grip:active,
+  :global(.byline-field-relation-many-grip:active) {
+    cursor: grabbing;
+  }
+
+  .many-body,
+  :global(.byline-field-relation-many-body) {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
+  .many-remove,
+  :global(.byline-field-relation-many-remove) {
+    flex-shrink: 0;
+  }
+
+  .many-add,
+  :global(.byline-field-relation-many-add) {
+    display: flex;
+    margin-top: 0.25rem;
+  }
+
+  /* ---------------------------------------------------------------------------
  * Frame — rounded border around the field's interactive body (tiles and/or
  * buttons), rendered BELOW the label / help text, mirroring the framing
  * convention of composite inputs like the partial-date widget. Bordered with
@@ -171,24 +186,25 @@
  *   .byline-field-relation-frame — the framing box
  * --------------------------------------------------------------------------- */
 
-.frame,
-:global(.byline-field-relation-frame) {
-  margin-top: 0.25rem;
-  border: var(--border-width-thin) var(--border-style-solid) var(--field-border);
-  border-radius: var(--border-radius-md, 6px);
-  padding: 0.5rem;
-}
+  .frame,
+  :global(.byline-field-relation-frame) {
+    margin-top: 0.25rem;
+    border: var(--border-width-thin) var(--border-style-solid) var(--field-border);
+    border-radius: var(--border-radius-md, 6px);
+    padding: 0.5rem;
+  }
 
-/* The frame now supplies the label → content separation, so zero the legacy
+  /* The frame now supplies the label → content separation, so zero the legacy
    top margins on children rendered inside it. */
-.frame > .tile,
-.frame > .many,
-:global(.byline-field-relation-frame > .byline-field-relation-tile),
-:global(.byline-field-relation-frame > .byline-field-relation-many) {
-  margin-top: 0;
-}
-
-.frame > .many-empty,
-:global(.byline-field-relation-frame > .byline-field-relation-many-empty) {
-  margin-top: 0;
+  .frame > .tile,
+  .frame > .many,
+  :global(.byline-field-relation-frame > .byline-field-relation-tile),
+  :global(.byline-field-relation-frame > .byline-field-relation-many) {
+    margin-top: 0;
+  }
+
+  .frame > .many-empty,
+  :global(.byline-field-relation-frame > .byline-field-relation-many-empty) {
+    margin-top: 0;
+  }
 }