@byline/admin 6.10.0 → 6.11.0

package/src/fields/file/file-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;
+
 /**
  * FileField — metadata tile + remove/upload affordances for arbitrary file
  * uploads (non-image). Mirrors `image-field.module.css` structurally; the
@@ -18,136 +32,138 @@
  *   .byline-field-file-meta-pending   — yellow text inside pending status
  */
 
-.header,
-:global(.byline-field-file-header) {
-  display: flex;
-  align-items: baseline;
-  gap: var(--spacing-8);
-  margin-bottom: 0.25rem;
-}
-
-.actions,
-:global(.byline-field-file-actions) {
-  position: absolute;
-  top: var(--spacing-6);
-  right: var(--spacing-6);
-  z-index: 1;
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-4);
-}
-
-:global(.byline-field-file-actions .byline-button) {
-  color: var(--gray-900);
-}
-
-:global(.dark .byline-field-file-actions .byline-button),
-:global([data-theme="dark"] .byline-field-file-actions .byline-button) {
-  color: var(--gray-200);
-}
-
-.empty,
-:global(.byline-field-file-empty) {
-  color: var(--gray-500);
-  font-size: var(--font-size-xs);
-  font-style: italic;
-}
-
-.tile,
-:global(.byline-field-file-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);
-}
-
-.uploading,
-:global(.byline-field-file-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);
-}
-
-.icon-wrap,
-:global(.byline-field-file-icon-wrap) {
-  position: relative;
-  flex-shrink: 0;
-  align-self: flex-start;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 4rem;
-  height: 4rem;
-  border: var(--border-width-thin) var(--border-style-solid) var(--gray-600);
-  border-radius: var(--border-radius-sm);
-  color: var(--gray-300);
-}
-
-/* Interactive affordance when the wrap is rendered as a link
+@layer byline-components.cms {
+  .header,
+  :global(.byline-field-file-header) {
+    display: flex;
+    align-items: baseline;
+    gap: var(--spacing-8);
+    margin-bottom: 0.25rem;
+  }
+
+  .actions,
+  :global(.byline-field-file-actions) {
+    position: absolute;
+    top: var(--spacing-6);
+    right: var(--spacing-6);
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-4);
+  }
+
+  :global(.byline-field-file-actions .byline-button) {
+    color: var(--gray-900);
+  }
+
+  :global(.dark .byline-field-file-actions .byline-button),
+  :global([data-theme="dark"] .byline-field-file-actions .byline-button) {
+    color: var(--gray-200);
+  }
+
+  .empty,
+  :global(.byline-field-file-empty) {
+    color: var(--gray-500);
+    font-size: var(--font-size-xs);
+    font-style: italic;
+  }
+
+  .tile,
+  :global(.byline-field-file-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);
+  }
+
+  .uploading,
+  :global(.byline-field-file-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);
+  }
+
+  .icon-wrap,
+  :global(.byline-field-file-icon-wrap) {
+    position: relative;
+    flex-shrink: 0;
+    align-self: flex-start;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 4rem;
+    height: 4rem;
+    border: var(--border-width-thin) var(--border-style-solid) var(--gray-600);
+    border-radius: var(--border-radius-sm);
+    color: var(--gray-300);
+  }
+
+  /* Interactive affordance when the wrap is rendered as a link
    (file is stored — clicking opens the asset in a new tab). */
-a.icon-wrap,
-:global(a.byline-field-file-icon-wrap) {
-  cursor: pointer;
-  text-decoration: none;
-  transition:
-    border-color 120ms ease,
-    color 120ms ease;
-}
-
-a.icon-wrap:hover,
-:global(a.byline-field-file-icon-wrap):hover {
-  border-color: var(--primary-500);
-  color: var(--primary-400);
-}
-
-a.icon-wrap:focus-visible,
-:global(a.byline-field-file-icon-wrap):focus-visible {
-  outline: 2px solid var(--primary-500);
-  outline-offset: 2px;
-}
-
-.icon,
-:global(.byline-field-file-icon) {
-  opacity: 0.85;
-}
-
-.pending,
-:global(.byline-field-file-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);
-}
-
-.meta,
-:global(.byline-field-file-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-file-meta-key) {
-  font-weight: var(--font-weight-semibold);
-}
-
-.meta-pending,
-:global(.byline-field-file-meta-pending) {
-  color: var(--yellow-400);
+  a.icon-wrap,
+  :global(a.byline-field-file-icon-wrap) {
+    cursor: pointer;
+    text-decoration: none;
+    transition:
+      border-color 120ms ease,
+      color 120ms ease;
+  }
+
+  a.icon-wrap:hover,
+  :global(a.byline-field-file-icon-wrap):hover {
+    border-color: var(--primary-500);
+    color: var(--primary-400);
+  }
+
+  a.icon-wrap:focus-visible,
+  :global(a.byline-field-file-icon-wrap):focus-visible {
+    outline: 2px solid var(--primary-500);
+    outline-offset: 2px;
+  }
+
+  .icon,
+  :global(.byline-field-file-icon) {
+    opacity: 0.85;
+  }
+
+  .pending,
+  :global(.byline-field-file-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);
+  }
+
+  .meta,
+  :global(.byline-field-file-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-file-meta-key) {
+    font-weight: var(--font-weight-semibold);
+  }
+
+  .meta-pending,
+  :global(.byline-field-file-meta-pending) {
+    color: var(--yellow-400);
+  }
 }

package/src/fields/file/file-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;
+
 /**
  * FileUploadField — drag-and-drop file picker that registers a deferred
  * upload in form context.
@@ -14,88 +28,90 @@
  *   .byline-field-file-upload-error          — error message paragraph
  */
 
-.root,
-:global(.byline-field-file-upload) {
-  margin-top: 0.25rem;
-}
+@layer byline-components.cms {
+  .root,
+  :global(.byline-field-file-upload) {
+    margin-top: 0.25rem;
+  }
 
-.input,
-:global(.byline-field-file-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-file-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-file-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-file-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-file-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-file-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-file-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-file-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-file-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-file-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;
+  }
 
-.icon,
-:global(.byline-field-file-upload-icon) {
-  width: 1.75rem;
-  height: 1.75rem;
-  opacity: 0.6;
-}
+  .icon,
+  :global(.byline-field-file-upload-icon) {
+    width: 1.75rem;
+    height: 1.75rem;
+    opacity: 0.6;
+  }
 
-.label,
-:global(.byline-field-file-upload-label) {
-  font-size: var(--font-size-xs);
-  font-weight: var(--font-weight-medium);
-}
+  .label,
+  :global(.byline-field-file-upload-label) {
+    font-size: var(--font-size-xs);
+    font-weight: var(--font-weight-medium);
+  }
 
-.action,
-:global(.byline-field-file-upload-action) {
-  color: var(--primary-400);
-  text-decoration: underline;
-  text-underline-offset: 2px;
-}
+  .action,
+  :global(.byline-field-file-upload-action) {
+    color: var(--primary-400);
+    text-decoration: underline;
+    text-underline-offset: 2px;
+  }
 
-.error,
-:global(.byline-field-file-upload-error) {
-  margin-top: 0.375rem;
-  color: var(--red-400);
-  font-size: var(--font-size-xs);
+  .error,
+  :global(.byline-field-file-upload-error) {
+    margin-top: 0.375rem;
+    color: var(--red-400);
+    font-size: var(--font-size-xs);
+  }
 }

package/src/fields/group/group-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;
+
 /**
  * GroupField — fixed-order group of child fields.
  *
@@ -10,34 +24,36 @@
  *   .byline-field-group-body      — vertical stack of children
  */
 
-.header,
-:global(.byline-field-group-header) {
-  display: flex;
-  flex-direction: column;
-  gap: 0.125rem;
-  margin-bottom: var(--spacing-8);
-}
+@layer byline-components.cms {
+  .header,
+  :global(.byline-field-group-header) {
+    display: flex;
+    flex-direction: column;
+    gap: 0.125rem;
+    margin-bottom: var(--spacing-8);
+  }
 
-.title,
-:global(.byline-field-group-title) {
-  font-size: 1rem;
-  font-weight: var(--font-weight-medium);
-}
+  .title,
+  :global(.byline-field-group-title) {
+    font-size: 1rem;
+    font-weight: var(--font-weight-medium);
+  }
 
-.required,
-:global(.byline-field-group-required) {
-  color: var(--red-500);
-}
+  .required,
+  :global(.byline-field-group-required) {
+    color: var(--red-500);
+  }
 
-.help,
-:global(.byline-field-group-help) {
-  color: var(--gray-500);
-  font-size: var(--font-size-xs);
-}
+  .help,
+  :global(.byline-field-group-help) {
+    color: var(--gray-500);
+    font-size: var(--font-size-xs);
+  }
 
-.body,
-:global(.byline-field-group-body) {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-8);
+  .body,
+  :global(.byline-field-group-body) {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-8);
+  }
 }