@byline/admin 6.10.1 → 6.12.0

package/src/forms/path-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;
+
 /**
  * PathWidget — system-managed `documentVersions.path` form widget.
  *
@@ -8,34 +22,36 @@
  *   .byline-form-path-sr-only          — visually-hidden screen-reader hint
  */
 
-.header,
-:global(.byline-form-path-header) {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--spacing-8);
-}
+@layer byline-components.cms {
+  .header,
+  :global(.byline-form-path-header) {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--spacing-8);
+  }
 
-.regenerate,
-:global(.byline-form-path-regenerate) {
-  background: none;
-  border: none;
-  padding: 0;
-  color: inherit;
-  font-size: 0.8rem;
-  text-decoration: underline;
-  cursor: pointer;
-}
+  .regenerate,
+  :global(.byline-form-path-regenerate) {
+    background: none;
+    border: none;
+    padding: 0;
+    color: inherit;
+    font-size: 0.8rem;
+    text-decoration: underline;
+    cursor: pointer;
+  }
 
-.sr-only,
-:global(.byline-form-path-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-path-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;
+  }
 }

package/src/forms/scheduled-publication-control.module.css

@@ -1,3 +1,15 @@
+@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;
 /**
  * Scheduled publication — editor surfaces.
  *
@@ -8,142 +20,143 @@
  *   .byline-scheduled-publication-notice        — needs-reconfirm / overdue Alert
  *   .byline-scheduled-publication-notice-actions — that Alert's action row
  */
-
-/* ---------------------------------------------------------------------------
+@layer byline-components.cms {
+  /* ---------------------------------------------------------------------------
    Status-bar cell — deliberately matches .byline-form-status-cell so an armed
    schedule reads as one more fact about the document, not as a control.
    --------------------------------------------------------------------------- */
 
-/* Sits inside the status cell, continuing the line that starts "Status: Draft".
+  /* Sits inside the status cell, continuing the line that starts "Status: Draft".
    The success colour carries the meaning: among facts reporting what the
    document already is, this is the one reporting what it is about to do.
    `--text-success` is defined for both themes, so no dark-mode override.
 
    Wraps rather than ellipsizing — the instant and its IANA zone are the whole
    message, and half a zone name is worse than a second line. */
-.cell {
-  /* Own line while the meta row is stacked. Sharing one line with the status
+  .cell {
+    /* Own line while the meta row is stacked. Sharing one line with the status
      value at narrow widths starved it — the ellipsis fell on "Draft" itself,
      which is the last thing that should be abbreviated. */
-  flex-basis: 100%;
-  color: var(--text-success);
-  font-weight: 600;
-  overflow-wrap: anywhere;
-  white-space: normal;
-}
+    flex-basis: 100%;
+    color: var(--text-success);
+    font-weight: 600;
+    overflow-wrap: anywhere;
+    white-space: normal;
+  }
 
-@media (min-width: 66rem) {
-  /* Once the meta row lays out horizontally there is room to sit on the same
+  @media (min-width: 66rem) {
+    /* Once the meta row lays out horizontally there is room to sit on the same
      line as the status, continuing its sentence. */
-  .cell {
-    flex-basis: auto;
-    margin-left: var(--spacing-4);
-  }
+    .cell {
+      flex-basis: auto;
+      margin-left: var(--spacing-4);
+    }
 
-  /* When the phrase runs to a second line, "Status: Draft" belongs level with
+    /* When the phrase runs to a second line, "Status: Draft" belongs level with
      its first line — centring leaves the label floating against the middle of
      a two-line block. Scoped with :has so the timestamp cells, which never
      wrap, keep their existing alignment. */
-  :global(.byline-form-status-cell):has(> .cell) {
-    align-items: flex-start;
+    :global(.byline-form-status-cell):has(> .cell) {
+      align-items: flex-start;
+    }
   }
-}
 
-/* ---------------------------------------------------------------------------
+  /* ---------------------------------------------------------------------------
    Notice — the escalated states. Sits below the sticky status bar, full width.
    --------------------------------------------------------------------------- */
 
-.notice {
-  margin-top: var(--spacing-8);
-  margin-bottom: var(--spacing-8);
-}
+  .notice {
+    margin-top: var(--spacing-8);
+    margin-bottom: var(--spacing-8);
+  }
 
-.notice-body,
-.notice-instant,
-.notice-attempts,
-.notice-error {
-  margin: 0 0 var(--spacing-4);
-  font-size: var(--font-size-sm);
-}
+  .notice-body,
+  .notice-instant,
+  .notice-attempts,
+  .notice-error {
+    margin: 0 0 var(--spacing-4);
+    font-size: var(--font-size-sm);
+  }
 
-.notice-instant {
-  font-weight: 600;
-}
+  .notice-instant {
+    font-weight: 600;
+  }
 
-.notice-attempts {
-  color: var(--gray-500);
-}
+  .notice-attempts {
+    color: var(--gray-500);
+  }
 
-.notice-error {
-  font-family: var(--font-family-mono, monospace);
-  overflow-wrap: anywhere;
-}
+  .notice-error {
+    font-family: var(--font-family-mono, monospace);
+    overflow-wrap: anywhere;
+  }
 
-.notice-actions {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: var(--spacing-8);
-  margin-top: var(--spacing-8);
-}
+  .notice-actions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--spacing-8);
+    margin-top: var(--spacing-8);
+  }
 
-/* ---------------------------------------------------------------------------
+  /* ---------------------------------------------------------------------------
    Schedule / reschedule modal
    --------------------------------------------------------------------------- */
 
-.modalHead {
-  padding-top: 1rem;
-  margin-bottom: var(--spacing-8);
-}
+  .modalHead {
+    padding-top: 1rem;
+    margin-bottom: var(--spacing-8);
+  }
 
-.modalTitle {
-  margin: 0 0 var(--spacing-8) 0;
-  font-size: var(--font-size-2xl);
-}
+  .modalTitle {
+    margin: 0 0 var(--spacing-8) 0;
+    font-size: var(--font-size-2xl);
+  }
 
-.field {
-  display: block;
-}
+  .field {
+    display: block;
+  }
 
-.help,
-.validation,
-.warningText {
-  font-size: var(--font-size-sm);
-}
+  .help,
+  .validation,
+  .warningText {
+    font-size: var(--font-size-sm);
+  }
 
-/* Belongs to the field above it — the zone qualifies every time shown in the
+  /* Belongs to the field above it — the zone qualifies every time shown in the
    picker, so it sits tight under the input and reads at full strength rather
    than as an aside. */
-.help {
-  margin: var(--spacing-4) 0 0;
-}
+  .help {
+    margin: var(--spacing-4) 0 0;
+  }
 
-/* Standing guidance, not a warning about anything that has happened yet, so it
+  /* Standing guidance, not a warning about anything that has happened yet, so it
    is muted rather than claiming an alert colour. */
-.warningText {
-  margin: var(--spacing-12) 0 0;
-  color: var(--gray-500);
-}
+  .warningText {
+    margin: var(--spacing-12) 0 0;
+    color: var(--gray-500);
+  }
 
-.validation {
-  margin: var(--spacing-8) 0 0;
-  color: var(--red-600);
-}
+  .validation {
+    margin: var(--spacing-8) 0 0;
+    color: var(--red-600);
+  }
 
-.choice {
-  margin-top: var(--spacing-12);
-}
+  .choice {
+    margin-top: var(--spacing-12);
+  }
 
-/* The offset chooser only appears for a daylight-saving overlap, and its two
+  /* The offset chooser only appears for a daylight-saving overlap, and its two
    options carry the whole decision — give it room to show them rather than
    collapsing to a bare chevron. */
-.choice-select {
-  min-width: 16rem;
-  max-width: 100%;
-}
+  .choice-select {
+    min-width: 16rem;
+    max-width: 100%;
+  }
 
-:is([data-theme="dark"], :global(.dark)) {
-  .validation {
-    color: var(--red-400, #f87171);
+  :is([data-theme="dark"], :global(.dark)) {
+    .validation {
+      color: var(--red-400, #f87171);
+    }
   }
 }

package/src/forms/tree-placement-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;
+
 /**
  * TreePlacementWidget — sidebar widget for placing a document within its
  * collection's single-parent tree (the `tree: true` primitive).
@@ -10,78 +24,80 @@
  *   .byline-form-tree-error     — inline error
  */
 
-.tree,
-:global(.byline-form-tree) {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-8);
-}
+@layer byline-components.cms {
+  .tree,
+  :global(.byline-form-tree) {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-8);
+  }
 
-.heading,
-:global(.byline-form-tree-heading) {
-  font-size: 0.875rem;
-  font-weight: 600;
-}
+  .heading,
+  :global(.byline-form-tree-heading) {
+    font-size: 0.875rem;
+    font-weight: 600;
+  }
 
-.current,
-:global(.byline-form-tree-current) {
-  font-size: 0.875rem;
-}
+  .current,
+  :global(.byline-form-tree-current) {
+    font-size: 0.875rem;
+  }
 
-.parentLabel {
-  color: var(--gray-500);
-}
+  .parentLabel {
+    color: var(--gray-500);
+  }
 
-.parentValue {
-  font-weight: 500;
-}
+  .parentValue {
+    font-weight: 500;
+  }
 
-.root {
-  font-style: italic;
-  font-weight: 400;
-  color: var(--gray-500);
-}
+  .root {
+    font-style: italic;
+    font-weight: 400;
+    color: var(--gray-500);
+  }
 
-.actions,
-:global(.byline-form-tree-actions) {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 0.75rem;
-}
+  .actions,
+  :global(.byline-form-tree-actions) {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 0.75rem;
+  }
 
-.link,
-:global(.byline-form-tree-link) {
-  background: none;
-  border: none;
-  padding: 0;
-  color: inherit;
-  font-size: 0.8rem;
-  text-decoration: underline;
-  cursor: pointer;
-}
+  .link,
+  :global(.byline-form-tree-link) {
+    background: none;
+    border: none;
+    padding: 0;
+    color: inherit;
+    font-size: 0.8rem;
+    text-decoration: underline;
+    cursor: pointer;
+  }
 
-.link:disabled,
-:global(.byline-form-tree-link):disabled {
-  opacity: 0.5;
-  cursor: default;
-}
+  .link:disabled,
+  :global(.byline-form-tree-link):disabled {
+    opacity: 0.5;
+    cursor: default;
+  }
 
-.error,
-:global(.byline-form-tree-error) {
-  margin: 0;
-  font-size: 0.8rem;
-  color: var(--danger-600, #c0392b);
-}
+  .error,
+  :global(.byline-form-tree-error) {
+    margin: 0;
+    font-size: 0.8rem;
+    color: var(--danger-600, #c0392b);
+  }
 
-.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 {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
 }

package/src/modules/admin-account/components/change-password.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;
+
 /**
  * ChangeAccountPassword — self-service password-change form (drawer body).
  *
@@ -8,33 +22,35 @@
  *   .byline-account-change-password-action   — buttons in the actions row
  */
 
-.wrap,
-:global(.byline-account-change-password-wrap) {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-8);
-  padding: var(--spacing-4);
-  margin-top: var(--spacing-4);
-}
+@layer byline-components.cms {
+  .wrap,
+  :global(.byline-account-change-password-wrap) {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-8);
+    padding: var(--spacing-4);
+    margin-top: var(--spacing-4);
+  }
 
-.form,
-:global(.byline-account-change-password-form) {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-16);
-  padding-top: var(--spacing-8);
-}
+  .form,
+  :global(.byline-account-change-password-form) {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-16);
+    padding-top: var(--spacing-8);
+  }
 
-.actions,
-:global(.byline-account-change-password-actions) {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: var(--spacing-8);
-  margin-top: var(--spacing-16);
-}
+  .actions,
+  :global(.byline-account-change-password-actions) {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--spacing-8);
+    margin-top: var(--spacing-16);
+  }
 
-.action,
-:global(.byline-account-change-password-action) {
-  min-width: 4rem;
+  .action,
+  :global(.byline-account-change-password-action) {
+    min-width: 4rem;
+  }
 }