@byline/admin 6.10.1 → 6.12.0

package/src/fields/sortable-item.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;
+
 /**
  * SortableItem — drag-card wrapping array/blocks list rows.
  *
@@ -16,152 +30,154 @@
  *   .byline-sortable-content-hidden   — collapsed body state
  */
 
-.root,
-:global(.byline-sortable) {
-  padding: var(--spacing-16);
-  padding-top: var(--spacing-8);
-  border: var(--border-width-thin) dashed var(--gray-600);
-  border-radius: var(--border-radius-md);
-  background-color: oklch(from var(--canvas-50) l c h / 0.5);
-  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-}
+@layer byline-components.cms {
+  .root,
+  :global(.byline-sortable) {
+    padding: var(--spacing-16);
+    padding-top: var(--spacing-8);
+    border: var(--border-width-thin) dashed var(--gray-600);
+    border-radius: var(--border-radius-md);
+    background-color: oklch(from var(--canvas-50) l c h / 0.5);
+    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  }
 
-.dragging,
-:global(.byline-sortable-dragging) {
-  background-color: oklch(from var(--canvas-50) l c h / 0.8);
-  box-shadow:
-    0 4px 6px -1px rgb(0 0 0 / 0.1),
-    0 2px 4px -2px rgb(0 0 0 / 0.1);
-}
+  .dragging,
+  :global(.byline-sortable-dragging) {
+    background-color: oklch(from var(--canvas-50) l c h / 0.8);
+    box-shadow:
+      0 4px 6px -1px rgb(0 0 0 / 0.1),
+      0 2px 4px -2px rgb(0 0 0 / 0.1);
+  }
 
-.collapsed,
-:global(.byline-sortable-collapsed) {
-  padding-top: var(--spacing-8);
-  padding-bottom: var(--spacing-8);
-}
+  .collapsed,
+  :global(.byline-sortable-collapsed) {
+    padding-top: var(--spacing-8);
+    padding-bottom: var(--spacing-8);
+  }
 
-.header,
-:global(.byline-sortable-header) {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-8);
-  margin-bottom: 0;
-  margin-left: -0.75rem;
-}
+  .header,
+  :global(.byline-sortable-header) {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-8);
+    margin-bottom: 0;
+    margin-left: -0.75rem;
+  }
 
-.header-expanded,
-:global(.byline-sortable-header-expanded) {
-  margin-bottom: var(--spacing-8);
-}
+  .header-expanded,
+  :global(.byline-sortable-header-expanded) {
+    margin-bottom: var(--spacing-8);
+  }
 
-.grip,
-:global(.byline-sortable-grip) {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0.25rem;
-  border: none;
-  background: none;
-  border-radius: var(--border-radius-sm);
-  color: var(--gray-400);
-  cursor: grab;
-}
+  .grip,
+  :global(.byline-sortable-grip) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.25rem;
+    border: none;
+    background: none;
+    border-radius: var(--border-radius-sm);
+    color: var(--gray-400);
+    cursor: grab;
+  }
 
-.grip:hover,
-:global(.byline-sortable-grip):hover {
-  background-color: var(--gray-100);
-}
+  .grip:hover,
+  :global(.byline-sortable-grip):hover {
+    background-color: var(--gray-100);
+  }
 
-.grip:active,
-:global(.byline-sortable-grip):active {
-  cursor: grabbing;
-}
+  .grip:active,
+  :global(.byline-sortable-grip):active {
+    cursor: grabbing;
+  }
 
-.grip-icon,
-:global(.byline-sortable-grip-icon) {
-  width: 1rem;
-  height: 1rem;
-  color: var(--primary-500);
-}
+  .grip-icon,
+  :global(.byline-sortable-grip-icon) {
+    width: 1rem;
+    height: 1rem;
+    color: var(--primary-500);
+  }
 
-.label,
-:global(.byline-sortable-label) {
-  flex: 1;
-  min-width: 0;
-  font-size: 1rem;
-  font-weight: var(--font-weight-medium);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
+  .label,
+  :global(.byline-sortable-label) {
+    flex: 1;
+    min-width: 0;
+    font-size: 1rem;
+    font-weight: var(--font-weight-medium);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
 
-.toggle,
-:global(.byline-sortable-toggle) {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0.25rem;
-  border: none;
-  background: none;
-  border-radius: var(--border-radius-sm);
-  color: var(--gray-400);
-  cursor: pointer;
-}
+  .toggle,
+  :global(.byline-sortable-toggle) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.25rem;
+    border: none;
+    background: none;
+    border-radius: var(--border-radius-sm);
+    color: var(--gray-400);
+    cursor: pointer;
+  }
 
-.toggle:hover,
-:global(.byline-sortable-toggle):hover {
-  background-color: var(--gray-800);
-}
+  .toggle:hover,
+  :global(.byline-sortable-toggle):hover {
+    background-color: var(--gray-800);
+  }
 
-.toggle-icon,
-:global(.byline-sortable-toggle-icon) {
-  width: 1rem;
-  height: 1rem;
-  transition: transform 150ms ease;
-}
+  .toggle-icon,
+  :global(.byline-sortable-toggle-icon) {
+    width: 1rem;
+    height: 1rem;
+    transition: transform 150ms ease;
+  }
 
-.toggle-icon-rotated,
-:global(.byline-sortable-toggle-icon-rotated) {
-  transform: rotate(180deg);
-}
+  .toggle-icon-rotated,
+  :global(.byline-sortable-toggle-icon-rotated) {
+    transform: rotate(180deg);
+  }
 
-.content,
-:global(.byline-sortable-content) {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-16);
-  transition: all 200ms ease;
-  opacity: 1;
-}
+  .content,
+  :global(.byline-sortable-content) {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-16);
+    transition: all 200ms ease;
+    opacity: 1;
+  }
 
-.content-hidden,
-:global(.byline-sortable-content-hidden) {
-  max-height: 0;
-  opacity: 0;
-  z-index: -10;
-}
+  .content-hidden,
+  :global(.byline-sortable-content-hidden) {
+    max-height: 0;
+    opacity: 0;
+    z-index: -10;
+  }
 
-/* ─── Dark theme variants ───────────────────────────────────── */
+  /* ─── Dark theme variants ───────────────────────────────────── */
 
-:is([data-theme="dark"], :global(.dark)) {
-  .root,
-  :global(.byline-sortable) {
-    background-color: var(--canvas-800);
-  }
+  :is([data-theme="dark"], :global(.dark)) {
+    .root,
+    :global(.byline-sortable) {
+      background-color: var(--canvas-800);
+    }
 
-  .dragging,
-  :global(.byline-sortable-dragging) {
-    background-color: oklch(from var(--canvas-700) l c h / 0.3);
-  }
+    .dragging,
+    :global(.byline-sortable-dragging) {
+      background-color: oklch(from var(--canvas-700) l c h / 0.3);
+    }
 
-  .grip:hover,
-  :global(.byline-sortable-grip):hover {
-    background-color: var(--gray-800);
-  }
+    .grip:hover,
+    :global(.byline-sortable-grip):hover {
+      background-color: var(--gray-800);
+    }
 
-  .grip-icon,
-  :global(.byline-sortable-grip-icon) {
-    color: var(--primary-200);
+    .grip-icon,
+    :global(.byline-sortable-grip-icon) {
+      color: var(--primary-200);
+    }
   }
 }

package/src/fields/text/text-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;
+
 /**
  * TextField — single-line text input wrapper.
  *
@@ -6,9 +20,11 @@
  *   .byline-field-text-label-row   — the label + locale-badge row
  */
 
-.label-row,
-:global(.byline-field-text-label-row) {
-  display: flex;
-  align-items: center;
-  margin-bottom: 0.25rem;
+@layer byline-components.cms {
+  .label-row,
+  :global(.byline-field-text-label-row) {
+    display: flex;
+    align-items: center;
+    margin-bottom: 0.25rem;
+  }
 }

package/src/fields/text-area/text-area-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;
+
 /**
  * TextAreaField — multi-line text input wrapper.
  *
@@ -6,9 +20,11 @@
  *   .byline-field-text-area-label-row   — the label + locale-badge row
  */
 
-.label-row,
-:global(.byline-field-text-area-label-row) {
-  display: flex;
-  align-items: center;
-  margin-bottom: 0.25rem;
+@layer byline-components.cms {
+  .label-row,
+  :global(.byline-field-text-area-label-row) {
+    display: flex;
+    align-items: center;
+    margin-bottom: 0.25rem;
+  }
 }

package/src/forms/available-locales-widget.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;
+
 /**
  * AvailableLocalesWidget — system-managed `availableLocales` form widget.
  *
@@ -11,29 +25,31 @@
  *   .byline-form-available-locales-sr-only — visually-hidden screen-reader hint
  */
 
-.container,
-:global(.byline-form-available-locales) {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-8);
-}
+@layer byline-components.cms {
+  .container,
+  :global(.byline-form-available-locales) {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-8);
+  }
 
-.list,
-:global(.byline-form-available-locales-list) {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-8);
-}
+  .list,
+  :global(.byline-form-available-locales-list) {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-8);
+  }
 
-.sr-only,
-:global(.byline-form-available-locales-sr-only) {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
+  .sr-only,
+  :global(.byline-form-available-locales-sr-only) {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
 }