@byline/admin 6.10.0 → 6.11.0

package/src/forms/document-actions.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;
+
 /**
  * DocumentActions — overflow menu (Unpublish / Delete) on the form chrome.
  *
@@ -13,148 +27,150 @@
  *   .byline-form-actions-sr-only      — visually-hidden autofocus shim
  */
 
-.icon,
-:global(.byline-form-actions-icon) {
-  transform: rotate(90deg);
-  color: var(--primary-500);
-}
+@layer byline-components.cms {
+  .icon,
+  :global(.byline-form-actions-icon) {
+    transform: rotate(90deg);
+    color: var(--primary-500);
+  }
 
-.menu,
-:global(.byline-form-actions-menu) {
-  min-width: 140px;
-}
+  .menu,
+  :global(.byline-form-actions-menu) {
+    min-width: 140px;
+  }
 
-.item,
-:global(.byline-form-actions-item) {
-  display: flex;
-  align-items: center;
-  margin-left: var(--spacing-8);
-}
+  .item,
+  :global(.byline-form-actions-item) {
+    display: flex;
+    align-items: center;
+    margin-left: var(--spacing-8);
+  }
 
-.item-icon,
-:global(.byline-form-actions-item-icon) {
-  display: inline-block;
-  width: 28px;
-}
+  .item-icon,
+  :global(.byline-form-actions-item-icon) {
+    display: inline-block;
+    width: 28px;
+  }
 
-.item-text,
-:global(.byline-form-actions-item-text) {
-  display: inline-block;
-  width: 100%;
-  flex: 1;
-  font-size: var(--font-size-sm);
-  text-align: left;
-}
+  .item-text,
+  :global(.byline-form-actions-item-text) {
+    display: inline-block;
+    width: 100%;
+    flex: 1;
+    font-size: var(--font-size-sm);
+    text-align: left;
+  }
 
-.delete,
-:global(.byline-form-actions-delete) {
-  flex: 1;
-  width: 100%;
-  border: none;
-  background: none;
-  padding: 0;
-  color: var(--red-600);
-  line-height: 1;
-  text-align: left;
-  cursor: pointer;
-}
+  .delete,
+  :global(.byline-form-actions-delete) {
+    flex: 1;
+    width: 100%;
+    border: none;
+    background: none;
+    padding: 0;
+    color: var(--red-600);
+    line-height: 1;
+    text-align: left;
+    cursor: pointer;
+  }
 
-.modal-head,
-:global(.byline-form-actions-modal-head) {
-  padding-top: 1rem;
-  margin-bottom: var(--spacing-8);
-}
+  .modal-head,
+  :global(.byline-form-actions-modal-head) {
+    padding-top: 1rem;
+    margin-bottom: var(--spacing-8);
+  }
 
-.modal-title,
-:global(.byline-form-actions-modal-title) {
-  margin: 0 0 var(--spacing-8) 0;
-  font-size: var(--font-size-2xl);
-}
+  .modal-title,
+  :global(.byline-form-actions-modal-title) {
+    margin: 0 0 var(--spacing-8) 0;
+    font-size: var(--font-size-2xl);
+  }
 
-.sr-only,
-:global(.byline-form-actions-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-actions-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;
+  }
 
-.list,
-:global(.byline-form-actions-list) {
-  margin: var(--spacing-8) 0;
-  padding-left: 1.25rem;
-  font-size: var(--font-size-sm);
-}
+  .list,
+  :global(.byline-form-actions-list) {
+    margin: var(--spacing-8) 0;
+    padding-left: 1.25rem;
+    font-size: var(--font-size-sm);
+  }
 
-.preview,
-:global(.byline-form-actions-preview) {
-  margin-top: var(--spacing-16);
-  padding: var(--spacing-8) var(--spacing-12);
-  background: var(--surface-2, rgba(0, 0, 0, 0.03));
-  border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
-  border-radius: var(--radius-md, 4px);
-  font-size: var(--font-size-sm);
-}
+  .preview,
+  :global(.byline-form-actions-preview) {
+    margin-top: var(--spacing-16);
+    padding: var(--spacing-8) var(--spacing-12);
+    background: var(--surface-2, rgba(0, 0, 0, 0.03));
+    border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
+    border-radius: var(--radius-md, 4px);
+    font-size: var(--font-size-sm);
+  }
 
-.preview-label,
-:global(.byline-form-actions-preview-label) {
-  font-weight: 500;
-  margin-bottom: var(--spacing-4);
-  opacity: 0.75;
-}
+  .preview-label,
+  :global(.byline-form-actions-preview-label) {
+    font-weight: 500;
+    margin-bottom: var(--spacing-4);
+    opacity: 0.75;
+  }
 
-.preview-row,
-:global(.byline-form-actions-preview-row) {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-8);
-  flex-wrap: wrap;
-}
+  .preview-row,
+  :global(.byline-form-actions-preview-row) {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-8);
+    flex-wrap: wrap;
+  }
 
-.preview-before,
-:global(.byline-form-actions-preview-before) {
-  font-family: var(--font-mono, monospace);
-  opacity: 0.7;
-}
+  .preview-before,
+  :global(.byline-form-actions-preview-before) {
+    font-family: var(--font-mono, monospace);
+    opacity: 0.7;
+  }
 
-.preview-arrow,
-:global(.byline-form-actions-preview-arrow) {
-  opacity: 0.5;
-}
+  .preview-arrow,
+  :global(.byline-form-actions-preview-arrow) {
+    opacity: 0.5;
+  }
 
-.preview-after,
-:global(.byline-form-actions-preview-after) {
-  font-family: var(--font-mono, monospace);
-  font-weight: 500;
-}
+  .preview-after,
+  :global(.byline-form-actions-preview-after) {
+    font-family: var(--font-mono, monospace);
+    font-weight: 500;
+  }
 
-.copy-row,
-:global(.byline-form-actions-copy-row) {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-}
+  .copy-row,
+  :global(.byline-form-actions-copy-row) {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+  }
 
-.copy-label,
-:global(.byline-form-actions-copy-label) {
-  /* Layout-only handle; spacing is set inline alongside the field. */
-}
+  .copy-label,
+  :global(.byline-form-actions-copy-label) {
+    /* Layout-only handle; spacing is set inline alongside the field. */
+  }
 
-.copy-source,
-:global(.byline-form-actions-copy-source) {
-  font-family: var(--font-mono, monospace);
-}
+  .copy-source,
+  :global(.byline-form-actions-copy-source) {
+    font-family: var(--font-mono, monospace);
+  }
 
-/* ─── Dark theme variants ───────────────────────────────────── */
+  /* ─── Dark theme variants ───────────────────────────────────── */
 
-:is([data-theme="dark"], :global(.dark)) {
-  .delete,
-  :global(.byline-form-actions-delete) {
-    color: var(--red-400);
+  :is([data-theme="dark"], :global(.dark)) {
+    .delete,
+    :global(.byline-form-actions-delete) {
+      color: var(--red-400);
+    }
   }
 }

package/src/forms/form-layout-styles.test.node.ts

@@ -9,6 +9,7 @@
 import { readFileSync } from 'node:fs'
 import { join } from 'node:path'
 
+import postcss from 'postcss'
 import { describe, expect, it } from 'vitest'
 
 // jsdom applies no stylesheet, so the one-column guarantee of the stacked
@@ -24,9 +25,16 @@ describe('stacked form layout styles', () => {
   })
 
   it('does not put the stacked class in the two-column grid rule', () => {
-    const desktop = css.slice(css.indexOf('@media (min-width: 60rem)'))
-    const gridRule = desktop.slice(0, desktop.indexOf('}\n}') + 3)
-    expect(gridRule).toContain('grid-template-columns')
-    expect(gridRule).not.toContain('layout-stacked')
+    const gridSelectors: string[] = []
+    postcss.parse(css).walkAtRules('media', (media) => {
+      if (media.params !== '(min-width: 60rem)') return
+      media.walkRules((rule) => {
+        rule.walkDecls('grid-template-columns', () => {
+          gridSelectors.push(rule.selector)
+        })
+      })
+    })
+    expect(gridSelectors.length).toBeGreaterThan(0)
+    for (const selector of gridSelectors) expect(selector).not.toContain('layout-stacked')
   })
 })