@byline/admin 6.10.0 → 6.11.0

package/src/modules/auth/components/passkey-manager.module.css

@@ -1,37 +1,50 @@
-.manager {
-  padding: 1.25rem;
-  border: 1px solid var(--border-color, #8885);
-  border-radius: 0.5rem;
-}
-.list {
-  list-style: none;
-  padding: 0;
-  margin: 1rem 0;
-}
-.empty + .add {
-  margin-top: 0.25rem;
-}
-.row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  flex-wrap: wrap;
-  gap: 0.75rem;
-  padding: 0.75rem 0;
-  border-bottom: 1px solid var(--border-color, #8885);
-  overflow-wrap: anywhere;
-}
-.row p {
-  font-size: 0.875rem;
-  margin: 0.25rem 0;
-}
-.actions {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.5rem;
-}
+@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;
+@layer byline-components.cms {
+  .manager {
+    padding: 1.25rem;
+    border: 1px solid var(--border-color, #8885);
+    border-radius: 0.5rem;
+  }
+  .list {
+    list-style: none;
+    padding: 0;
+    margin: 1rem 0;
+  }
+  .empty + .add {
+    margin-top: 0.25rem;
+  }
+  .row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    gap: 0.75rem;
+    padding: 0.75rem 0;
+    border-bottom: 1px solid var(--border-color, #8885);
+    overflow-wrap: anywhere;
+  }
+  .row p {
+    font-size: 0.875rem;
+    margin: 0.25rem 0;
+  }
+  .actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+  }
 
-/*
+  /*
  * Add and rename open in a drawer, matching the other account and user edit
  * panels; remove opens a modal, matching other destructive confirmations.
  * Both share the action row below: below 40rem the actions stack full-width
@@ -41,60 +54,61 @@
  * 48rem (40px wider than the account drawers) so the three proof actions fit
  * one row in French.
  */
-.modal {
-  width: calc(100% - 2 * var(--spacing-8));
-  max-width: 540px;
-  margin-bottom: var(--spacing-8);
-}
-.drawer-body {
-  padding: var(--spacing-8);
-}
-.drawer-form {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-16);
-  padding-top: var(--spacing-8);
-}
-.drawer-actions {
-  display: flex;
-  justify-content: flex-end;
-  gap: var(--spacing-12);
-  margin-top: var(--spacing-8);
-}
-.drawer-skip {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}
-.modal-actions {
-  flex-direction: column-reverse;
-  align-items: stretch;
-}
-@media (max-width: 39.99rem) {
-  .modal-actions > * {
-    min-height: 2.5rem;
-  }
-}
-@media (min-width: 40rem) {
   .modal {
-    width: 100%;
-    margin-bottom: 0;
+    width: calc(100% - 2 * var(--spacing-8));
+    max-width: 540px;
+    margin-bottom: var(--spacing-8);
+  }
+  .drawer-body {
+    padding: var(--spacing-8);
+  }
+  .drawer-form {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-16);
+    padding-top: var(--spacing-8);
+  }
+  .drawer-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: var(--spacing-12);
+    margin-top: var(--spacing-8);
+  }
+  .drawer-skip {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
   }
   .modal-actions {
-    flex-direction: row;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: var(--spacing-8);
+    flex-direction: column-reverse;
+    align-items: stretch;
   }
-}
-@media (min-width: 48rem) {
-  .drawer {
-    width: 540px;
+  @media (max-width: 39.99rem) {
+    .modal-actions > * {
+      min-height: 2.5rem;
+    }
+  }
+  @media (min-width: 40rem) {
+    .modal {
+      width: 100%;
+      margin-bottom: 0;
+    }
+    .modal-actions {
+      flex-direction: row;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: var(--spacing-8);
+    }
+  }
+  @media (min-width: 48rem) {
+    .drawer {
+      width: 540px;
+    }
   }
 }

package/src/modules/auth/components/sign-in-form.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;
+
 /**
  * SignInForm — admin sign-in card form.
  *
@@ -14,86 +28,88 @@
  *   .byline-passkey-sign-in-button — full-width passkey button
  */
 
-.card,
-:global(.byline-sign-in-card) {
-  width: 100%;
-}
-
-@media (min-width: 40rem) {
+@layer byline-components.cms {
   .card,
   :global(.byline-sign-in-card) {
-    max-width: 380px;
+    width: 100%;
   }
-}
 
-.alert,
-:global(.byline-sign-in-alert) {
-  margin-top: var(--spacing-12);
-}
+  @media (min-width: 40rem) {
+    .card,
+    :global(.byline-sign-in-card) {
+      max-width: 380px;
+    }
+  }
 
-.form,
-:global(.byline-sign-in-form) {
-  padding-top: var(--spacing-8);
-  margin-bottom: var(--spacing-8);
-}
+  .alert,
+  :global(.byline-sign-in-alert) {
+    margin-top: var(--spacing-12);
+  }
 
-.fields,
-:global(.byline-sign-in-fields) {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-16);
-}
+  .form,
+  :global(.byline-sign-in-form) {
+    padding-top: var(--spacing-8);
+    margin-bottom: var(--spacing-8);
+  }
 
-.actions,
-:global(.byline-sign-in-actions) {
-  display: flex;
-  align-items: center;
-  margin-top: var(--spacing-24);
-}
+  .fields,
+  :global(.byline-sign-in-fields) {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-16);
+  }
 
-.home-link,
-:global(.byline-sign-in-home-link) {
-  font-size: 0.9rem;
-  text-decoration: underline;
-}
+  .actions,
+  :global(.byline-sign-in-actions) {
+    display: flex;
+    align-items: center;
+    margin-top: var(--spacing-24);
+  }
 
-.button,
-:global(.byline-sign-in-button) {
-  min-width: 5rem;
-  /* Always floats right whether or not a Home link is present on the left. */
-  margin-left: auto;
-}
+  .home-link,
+  :global(.byline-sign-in-home-link) {
+    font-size: 0.9rem;
+    text-decoration: underline;
+  }
 
-.alternate,
-:global(.byline-sign-in-alternate) {
-  flex-direction: column;
-  align-items: stretch;
-  gap: var(--spacing-16);
-  padding-bottom: var(--spacing-24);
-}
+  .button,
+  :global(.byline-sign-in-button) {
+    min-width: 5rem;
+    /* Always floats right whether or not a Home link is present on the left. */
+    margin-left: auto;
+  }
 
-.divider,
-:global(.byline-sign-in-divider) {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-12);
-  color: var(--gray-500);
-  font-size: var(--font-size-xs);
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-}
+  .alternate,
+  :global(.byline-sign-in-alternate) {
+    flex-direction: column;
+    align-items: stretch;
+    gap: var(--spacing-16);
+    padding-bottom: var(--spacing-24);
+  }
 
-.divider::before,
-.divider::after,
-:global(.byline-sign-in-divider)::before,
-:global(.byline-sign-in-divider)::after {
-  content: "";
-  flex: 1;
-  border-top: var(--border-width-thin) var(--border-style-solid) var(--border-color, #8885);
-}
+  .divider,
+  :global(.byline-sign-in-divider) {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-12);
+    color: var(--gray-500);
+    font-size: var(--font-size-xs);
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+  }
 
-.passkey-button,
-:global(.byline-passkey-sign-in-button) {
-  width: 100%;
-  gap: var(--spacing-8);
+  .divider::before,
+  .divider::after,
+  :global(.byline-sign-in-divider)::before,
+  :global(.byline-sign-in-divider)::after {
+    content: "";
+    flex: 1;
+    border-top: var(--border-width-thin) var(--border-style-solid) var(--border-color, #8885);
+  }
+
+  .passkey-button,
+  :global(.byline-passkey-sign-in-button) {
+    width: 100%;
+    gap: var(--spacing-8);
+  }
 }

package/src/presentation/group.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;
+
 /**
  * Group — labelled fieldset clustering related fields together.
  *
@@ -14,28 +28,30 @@
  * the namespaces disambiguated.
  */
 
-.group,
-:global(.byline-admin-group) {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-16);
-  padding: var(--spacing-12);
-  border: var(--border-width-thin) var(--border-style-solid) var(--gray-200);
-  border-radius: var(--border-radius-md);
-}
+@layer byline-components.cms {
+  .group,
+  :global(.byline-admin-group) {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-16);
+    padding: var(--spacing-12);
+    border: var(--border-width-thin) var(--border-style-solid) var(--gray-200);
+    border-radius: var(--border-radius-md);
+  }
 
-.legend,
-:global(.byline-admin-group-legend) {
-  padding-inline: var(--spacing-4);
-  font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-medium);
-}
+  .legend,
+  :global(.byline-admin-group-legend) {
+    padding-inline: var(--spacing-4);
+    font-size: var(--font-size-sm);
+    font-weight: var(--font-weight-medium);
+  }
 
-/* ─── Dark theme variants ───────────────────────────────────── */
+  /* ─── Dark theme variants ───────────────────────────────────── */
 
-:is([data-theme="dark"], :global(.dark)) {
-  .group,
-  :global(.byline-admin-group) {
-    border-color: var(--gray-700);
+  :is([data-theme="dark"], :global(.dark)) {
+    .group,
+    :global(.byline-admin-group) {
+      border-color: var(--gray-700);
+    }
   }
 }

package/src/presentation/row.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;
+
 /**
  * Row — horizontal flex layout for admin form fields.
  *
@@ -10,23 +24,25 @@
  * without referring to the hashed local name.
  */
 
-.row,
-:global(.byline-admin-row) {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: var(--spacing-16);
-}
-
-.row > *,
-:global(.byline-admin-row) > * {
-  flex: 1;
-  min-width: 0;
-}
-
-@media (min-width: 40rem) {
+@layer byline-components.cms {
   .row,
   :global(.byline-admin-row) {
-    flex-direction: row;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--spacing-16);
+  }
+
+  .row > *,
+  :global(.byline-admin-row) > * {
+    flex: 1;
+    min-width: 0;
+  }
+
+  @media (min-width: 40rem) {
+    .row,
+    :global(.byline-admin-row) {
+      flex-direction: row;
+    }
   }
 }