baseline-foundry 0.1.3 → 0.1.5

package/dist/css-components/linked-logo-site-layout.d.ts

@@ -8,10 +8,10 @@
  * link/mark contract; the additional card slots are semantic link content,
  * not the deprecated `logo-block` API.
  *
- * Vanilla → BF mapping (Vanilla's 8px spacing unit):
+ * Vanilla → BF mapping (Vanilla's 0.5rem spacing unit):
  * - linked-logo image container: retained 16:9 aspect relationship;
- * - muted rule to copy: 8px → `--bf-space-1`, compensating its border;
- * - grid gutter: 24px / 32px breakpoint values → existing
+ * - muted rule to copy: 0.5rem → `--bf-space-1`, compensating its border;
+ * - grid gutter: 1.5rem / 2rem breakpoint values → existing
  *   `--bf-grid-gap-inline` (BF's tier-aware grid geometry);
  * - macro section boundaries: existing shallow/default/deep section tokens.
  *

package/dist/css-components/linked-logo-site-layout.js

@@ -8,10 +8,10 @@
  * link/mark contract; the additional card slots are semantic link content,
  * not the deprecated `logo-block` API.
  *
- * Vanilla → BF mapping (Vanilla's 8px spacing unit):
+ * Vanilla → BF mapping (Vanilla's 0.5rem spacing unit):
  * - linked-logo image container: retained 16:9 aspect relationship;
- * - muted rule to copy: 8px → `--bf-space-1`, compensating its border;
- * - grid gutter: 24px / 32px breakpoint values → existing
+ * - muted rule to copy: 0.5rem → `--bf-space-1`, compensating its border;
+ * - grid gutter: 1.5rem / 2rem breakpoint values → existing
  *   `--bf-grid-gap-inline` (BF's tier-aware grid geometry);
  * - macro section boundaries: existing shallow/default/deep section tokens.
  *
@@ -19,177 +19,174 @@
  * changes the document body merely because a tier stylesheet is imported.
  */
 export function linkedLogoSiteLayoutCss() {
-    return `/* ------------------------------------------------------------------ */
-/* Linked logo section — Sites composition of BF logo and content slots. */
-/* ------------------------------------------------------------------ */
-
-:where(.bf-theme) :where(.bf-linked-logo-section) {
-  container-name: bf-linked-logo-section;
-  container-type: inline-size;
-  margin-block-end: var(--bf-section-space);
-  min-inline-size: 0;
-}
-
-:where(.bf-theme) :where(.bf-linked-logo-section.is-shallow) {
-  margin-block-end: var(--bf-section-space-shallow);
-}
-
-:where(.bf-theme) :where(.bf-linked-logo-section.is-deep) {
-  margin-block-end: var(--bf-section-space-deep);
-}
-
-:where(.bf-theme) :where(.bf-linked-logo-section-layout) {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr);
-  min-inline-size: 0;
-}
-
-:where(.bf-theme) :where(.bf-linked-logo-section-header, .bf-linked-logo-section-content) {
-  min-inline-size: 0;
-  overflow-wrap: anywhere;
-}
-
-/* The card list is a contextual use of bf-logo-section. Its links and marks
-   preserve that component's focus and accessible-image treatment, while a
-   grid gives the Sites pattern its 16:9 linked destinations. */
-:where(.bf-theme) :where(.bf-linked-logo-section) :where(.bf-logo-section.bf-linked-logo-section-logos) {
-  margin-block-end: 0;
-}
-
-:where(.bf-theme) :where(.bf-linked-logo-section-logos) :where(.bf-logo-section-items) {
-  align-items: stretch;
-  column-gap: var(--bf-grid-gap-inline);
-  display: grid;
-  grid-template-columns: minmax(0, 1fr);
-  padding-block: 0;
-  row-gap: var(--bf-section-space-shallow);
-}
-
-:where(.bf-theme) :where(.bf-linked-logo-section-logos) :where(.bf-logo-section-item) {
-  block-size: auto;
-  inline-size: auto;
-  margin-block: 0;
-  max-inline-size: none;
-}
-
-:where(.bf-theme) :where(.bf-linked-logo-section-card) {
-  align-content: start;
-  align-items: stretch;
-  color: inherit;
-  container-type: inline-size;
-  display: grid;
-  grid-template-rows: auto auto auto;
-  inline-size: 100%;
-  min-inline-size: 0;
-  text-decoration: none;
-}
-
-:where(.bf-theme) :where(.bf-linked-logo-section-card:hover) :where(.bf-linked-logo-section-card-copy) {
-  text-decoration: underline;
-}
-
-:where(.bf-theme) :where(.bf-linked-logo-section-mark) {
-  aspect-ratio: 16 / 9;
-  background: var(--bf-color-background-active);
-  display: grid;
-  inline-size: 100%;
-  max-inline-size: 100%;
-  min-inline-size: 0;
-  overflow: hidden;
-  place-items: center;
-}
-
-/* Card tracks are fluid, so an exact 16:9 mark is often a fractional number
-   of baselines tall. Keep the visual ratio exact and put only the residual
-   rhythm compensation after the mark; the copy keeps its own semantic
-   spacing and the occupied card still lands on the tier grid. */
-@supports (margin-block-end: round(up, 1px, 1px)) {
-  :where(.bf-theme) :where(.bf-linked-logo-section-mark) {
-    margin-block-end: calc(
-      round(up, calc(100cqi * 9 / 16), var(--bf-baseline))
-      - calc(100cqi * 9 / 16)
-    );
-  }
-}
-
-:where(.bf-theme) :where(.bf-linked-logo-section-mark) > :where(img, svg) {
-  block-size: 100%;
-  display: block;
-  inline-size: 100%;
-  max-inline-size: 100%;
-  min-inline-size: 0;
-  object-fit: contain;
-}
-
-:where(.bf-theme) :where(.bf-linked-logo-section-card-rule) {
-  border-block-start: var(--bf-border-width) solid var(--bf-color-border-low-contrast);
-  display: block;
-  margin-block-start: var(--bf-space-1);
-}
-
-/* A span inherits the real body role from the page; it owns only the
-   relationship to its preceding divider, not an alternative type scale. */
-:where(.bf-theme) :where(.bf-linked-logo-section-card-copy) {
-  display: block;
-  margin-block-start: calc(var(--bf-space-1) - var(--bf-border-width));
-  overflow-wrap: anywhere;
-}
-
-/* Vanilla's linked-logo block moves from one to two cards per row at the
-   4-column medium grid.  The section itself does not split until the 8-column
-   large grid: its macro uses large-only grid columns for the 50/50 and 25/75
-   rails.  The root establishes the query context; only descendants change. */
-@container bf-linked-logo-section (width >= 38.75rem) {
-  :where(.bf-theme) :where(.bf-linked-logo-section-logos) :where(.bf-logo-section-items) {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-}
-
-@container bf-linked-logo-section (width >= 64.75rem) {
-  :where(.bf-theme) :where(.bf-linked-logo-section.is-50-50) :where(.bf-linked-logo-section-layout) {
-    column-gap: var(--bf-grid-gap-inline);
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-
-  :where(.bf-theme) :where(.bf-linked-logo-section.is-25-75) :where(.bf-linked-logo-section-layout) {
-    column-gap: var(--bf-grid-gap-inline);
-    grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
-  }
-
-  :where(.bf-theme) :where(.bf-linked-logo-section.is-full) :where(.bf-linked-logo-section-logos) :where(.bf-logo-section-items) {
-    grid-template-columns: repeat(4, minmax(0, 1fr));
-  }
-
-  :where(.bf-theme) :where(.bf-linked-logo-section.is-50-50) :where(.bf-linked-logo-section-logos) :where(.bf-logo-section-items) {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-
-  :where(.bf-theme) :where(.bf-linked-logo-section.is-25-75) :where(.bf-linked-logo-section-logos) :where(.bf-logo-section-items) {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-  }
-}
-
-/* ------------------------------------------------------------------ */
-/* Site / sticky-footer layout.                                        */
-/* ------------------------------------------------------------------ */
-
-/* The sticky-footer contract is explicitly opt-in, so it remains useful at
-   every viewport width.  The descendant selector intentionally retains the
-   shell classes' specificity: a shell may also be a bf-panel-content region,
-   whose later min-block-size reset must not disable the site layout. */
-:where(.bf-theme.bf-page-shell.is-site-layout),
-:where(.bf-theme) .bf-page-shell.is-site-layout {
-  display: flex;
-  flex-direction: column;
-  min-block-size: 100dvb;
-}
-
-:where(.bf-theme.bf-page-shell.is-site-layout) > :where(.bf-site-main),
-:where(.bf-theme) .bf-page-shell.is-site-layout > :where(.bf-site-main) {
-  flex: 0 0 auto;
-  min-inline-size: 0;
-}
-
+    return `/* ------------------------------------------------------------------ */
+/* Linked logo section — Sites composition of BF logo and content slots. */
+/* ------------------------------------------------------------------ */
+
+:where(.bf-theme) :where(.bf-linked-logo-section) {
+  container-name: bf-linked-logo-section;
+  container-type: inline-size;
+  margin: 0;
+  min-inline-size: 0;
+}
+
+:where(.bf-theme) :where(.bf-linked-logo-section-layout) {
+  display: grid;
+  gap: var(--bf-section-space-shallow);
+  grid-template-columns: minmax(0, 1fr);
+  min-inline-size: 0;
+}
+
+:where(.bf-theme) :where(.bf-linked-logo-section-header, .bf-linked-logo-section-content) {
+  min-inline-size: 0;
+  overflow-wrap: anywhere;
+}
+
+/* The card list is a contextual use of bf-logo-section. Its links and marks
+   preserve that component's focus and accessible-image treatment, while a
+   grid gives the Sites pattern its 16:9 linked destinations. */
+:where(.bf-theme) :where(.bf-linked-logo-section) :where(.bf-logo-section.bf-linked-logo-section-logos) {
+  margin-block-end: 0;
+}
+
+:where(.bf-theme) :where(.bf-linked-logo-section-logos) :where(.bf-logo-section-items) {
+  align-items: stretch;
+  column-gap: var(--bf-grid-gap-inline);
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  padding-block: 0;
+  row-gap: var(--bf-section-space-shallow);
+}
+
+:where(.bf-theme) :where(.bf-linked-logo-section-logos) :where(.bf-logo-section-item) {
+  block-size: auto;
+  inline-size: auto;
+  margin-block: 0;
+  max-inline-size: none;
+}
+
+:where(.bf-theme) :where(a.bf-linked-logo-section-card) {
+  align-content: start;
+  align-items: stretch;
+  color: inherit;
+  container-type: inline-size;
+  display: grid;
+  grid-template-rows: auto auto auto;
+  inline-size: 100%;
+  min-inline-size: 0;
+  text-decoration: none;
+}
+
+:where(.bf-theme) :where(a.bf-linked-logo-section-card:hover) :where(.bf-linked-logo-section-card-copy) {
+  text-decoration: underline;
+}
+
+:where(.bf-theme) :where(.bf-linked-logo-section-mark) {
+  aspect-ratio: 16 / 9;
+  background: var(--bf-color-background-active);
+  display: grid;
+  inline-size: 100%;
+  max-inline-size: 100%;
+  min-inline-size: 0;
+  overflow: hidden;
+  place-items: center;
+}
+
+/* Card tracks are fluid, so an exact 16:9 mark is often a fractional number
+   of baselines tall. Keep the visual ratio exact and put only the residual
+   rhythm compensation after the mark; the copy keeps its own semantic
+   spacing and the occupied card still lands on the tier grid. */
+@supports (margin-block-end: round(up, 0.0625rem, 0.0625rem)) {
+  :where(.bf-theme) :where(.bf-linked-logo-section-mark) {
+    margin-block-end: calc(
+      round(up, calc(100cqi * 9 / 16), var(--bf-baseline))
+      - calc(100cqi * 9 / 16)
+    );
+  }
+}
+
+:where(.bf-theme) :where(.bf-linked-logo-section-mark) > :where(img, svg) {
+  block-size: 100%;
+  display: block;
+  inline-size: 100%;
+  max-inline-size: 100%;
+  min-inline-size: 0;
+  object-fit: contain;
+}
+
+:where(.bf-theme) :where(.bf-linked-logo-section-card-rule) {
+  border-block-start: var(--bf-border-width) solid var(--bf-color-border-low-contrast);
+  display: block;
+  margin-block-start: var(--bf-space-1);
+}
+
+/* A span inherits the real body role from the page; it owns only the
+   relationship to its preceding divider, not an alternative type scale. */
+:where(.bf-theme) :where(.bf-linked-logo-section-card-copy) {
+  display: block;
+  margin-block-start: calc(var(--bf-space-1) - var(--bf-border-width));
+  overflow-wrap: anywhere;
+}
+
+/* The linked-logo block moves from one to two cards per row at the 4-column
+   medium grid. The balanced 50/50 section split uses the shared readable
+   threshold; the 25/75 content rail and four-card density retain their
+   separately measured wide threshold. The root establishes the query context;
+   only descendants change. */
+@container bf-linked-logo-section (width >= 38.75rem) {
+  :where(.bf-theme) :where(.bf-linked-logo-section-logos) :where(.bf-logo-section-items) {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@container bf-linked-logo-section (width >= 45rem) {
+  :where(.bf-theme) :where(.bf-linked-logo-section.is-50-50) :where(.bf-linked-logo-section-layout) {
+    column-gap: var(--bf-grid-gap-inline);
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@container bf-linked-logo-section (width >= 64.75rem) {
+
+  :where(.bf-theme) :where(.bf-linked-logo-section.is-25-75) :where(.bf-linked-logo-section-layout) {
+    column-gap: var(--bf-grid-gap-inline);
+    grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
+  }
+
+  :where(.bf-theme) :where(.bf-linked-logo-section.is-full) :where(.bf-linked-logo-section-logos) :where(.bf-logo-section-items) {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+
+  :where(.bf-theme) :where(.bf-linked-logo-section.is-50-50) :where(.bf-linked-logo-section-logos) :where(.bf-logo-section-items) {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  :where(.bf-theme) :where(.bf-linked-logo-section.is-25-75) :where(.bf-linked-logo-section-logos) :where(.bf-logo-section-items) {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+
+/* ------------------------------------------------------------------ */
+/* Site / sticky-footer layout.                                        */
+/* ------------------------------------------------------------------ */
+
+/* The sticky-footer contract is explicitly opt-in, so it remains useful at
+   every viewport width.  The descendant selector intentionally retains the
+   shell classes' specificity: a shell may also be a bf-panel-content region,
+   whose later min-block-size reset must not disable the site layout. */
+:where(.bf-theme.bf-page-shell.is-site-layout),
+:where(.bf-theme) .bf-page-shell.is-site-layout {
+  display: flex;
+  flex-direction: column;
+  min-block-size: 100dvb;
+}
+
+:where(.bf-theme.bf-page-shell.is-site-layout) > :where(.bf-site-main),
+:where(.bf-theme) .bf-page-shell.is-site-layout > :where(.bf-site-main) {
+  flex: 0 0 auto;
+  min-inline-size: 0;
+}
+
 /* When a site main also consumes panel padding, pull its first text line up
    one baseline so it shares the tagged navigation brand's optical top. */
 :where(.bf-theme.bf-page-shell.is-site-layout) > :where(.bf-site-main.bf-panel-content),
@@ -200,15 +197,15 @@ export function linkedLogoSiteLayoutCss() {
 /* An application main already represents the available viewport remainder
    and owns scrolling. A directly nested site shell fills that region instead
    of claiming a second dynamic viewport; long content can still grow the
-   shell beyond the region and remains reachable through bf-main. */
+   shell beyond the region and remains reachable through bf-main. */
 :where(.bf-theme.bf-application) > :where(.bf-main) > .bf-page-shell.is-site-layout,
 :where(.bf-theme) :where(.bf-application) > :where(.bf-main) > .bf-page-shell.is-site-layout {
   min-block-size: 100%;
 }
-
-:where(.bf-theme.bf-page-shell.is-site-layout) > :where(.bf-site-footer.is-sticky),
-:where(.bf-theme) .bf-page-shell.is-site-layout > :where(.bf-site-footer.is-sticky) {
-  margin-block-start: auto;
-}
+
+:where(.bf-theme.bf-page-shell.is-site-layout) > :where(.bf-site-footer.is-sticky),
+:where(.bf-theme) .bf-page-shell.is-site-layout > :where(.bf-site-footer.is-sticky) {
+  margin-block-start: auto;
+}
 `;
 }

package/dist/css-components/list-tree.js

@@ -1,98 +1,100 @@
 export function listTreeCss(options) {
     const { bodyTypeStyles } = options;
-    return `:where(.bf-theme) :where(.bf-list-tree) {
-  list-style: none;
-  margin: 0;
-  padding-left: calc(var(--bf-baseline) * 0.5);
-}
-
-:where(.bf-theme) :where(.bf-list-tree) :where(.bf-list-tree) {
-  display: none;
-  margin: 0;
-  padding-left: 0;
-}
-
-:where(.bf-theme) :where(.bf-list-tree) :where(.bf-list-tree[aria-hidden='false']) {
-  display: block;
-}
-
-:where(.bf-theme) :where(.bf-list-tree-item) {
-  margin: 0;
-  padding-left: calc(var(--bf-baseline) * 1.5);
-  position: relative;
-}
-
-:where(.bf-theme) :where(.bf-list-tree-link) {
-${bodyTypeStyles}  color: var(--bf-color-text-default);
-  cursor: pointer;
-  display: block;
-  margin: 0;
-  min-block-size: var(--bf-control-box-size-compact);
-  padding-block: var(--bf-control-block-padding-compact);
-  text-decoration: none;
-}
-
-:where(.bf-theme) :where(.bf-list-tree-link):hover {
-  color: var(--bf-color-link-default);
-  text-decoration: underline;
-}
-
-:where(.bf-theme) :where(.bf-list-tree-link.is-active) {
-  color: var(--bf-color-link-default);
-}
-
-:where(.bf-theme) :where(.bf-list-tree-link):focus:not(:focus-visible) {
-  outline: none;
-}
-
-:where(.bf-theme) :where(.bf-list-tree-link):focus-visible {
-  outline: 2px solid var(--bf-color-focus);
-  outline-offset: -2px;
-}
-
-:where(.bf-theme) :where(.bf-list-tree-toggle) {
-${bodyTypeStyles}  align-items: center;
-  background: transparent;
-  border: 0;
-  color: var(--bf-color-text-default);
-  cursor: pointer;
-  display: inline-flex;
-  gap: calc(var(--bf-baseline) * 0.5);
-  margin: 0 0 0 calc(var(--bf-baseline) * -1.5);
-  min-block-size: var(--bf-control-box-size-compact);
-  padding-block: var(--bf-control-block-padding-compact);
-  padding-inline: calc(var(--bf-baseline) * 0.25) calc(var(--bf-baseline) * 0.5);
-  text-align: left;
-  width: 100%;
-}
-
-:where(.bf-theme) :where(.bf-list-tree-toggle):hover {
-  background: var(--bf-color-background-hover);
-}
-
-:where(.bf-theme) :where(.bf-list-tree-toggle):focus:not(:focus-visible) {
-  outline: none;
-}
-
-:where(.bf-theme) :where(.bf-list-tree-toggle):focus-visible {
-  outline: 2px solid var(--bf-color-focus);
-  outline-offset: -2px;
-}
-
-:where(.bf-theme) :where(.bf-list-tree-toggle)::before {
-  background-image: var(--bf-ui-icon-chevron-down);
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: 1rem 1rem;
-  block-size: 1rem;
-  content: "";
-  flex: 0 0 1rem;
-  inline-size: 1rem;
-  transform: rotate(-90deg);
-}
-
-:where(.bf-theme) :where(.bf-list-tree-toggle[aria-expanded='true'])::before {
-  transform: rotate(0deg);
-}
+    return `:where(.bf-theme) :where(.bf-list-tree) {
+  list-style: none;
+  margin: 0;
+  padding-left: 0;
+}
+
+:where(.bf-theme) :where(.bf-list-tree) :where(.bf-list-tree) {
+  display: none;
+  margin: 0;
+  padding-left: 0;
+}
+
+:where(.bf-theme) :where(.bf-list-tree) :where(.bf-list-tree[aria-hidden='false']) {
+  display: block;
+}
+
+:where(.bf-theme) :where(.bf-list-tree-item) {
+  display: grid;
+  margin: 0;
+  padding-left: 0;
+  position: relative;
+}
+
+:where(.bf-theme) :where(a.bf-list-tree-link) {
+${bodyTypeStyles}  color: var(--bf-color-text-default);
+  border-block: var(--bf-border-width) solid transparent;
+  cursor: pointer;
+  display: block;
+  margin: 0 0 var(--bf-single-line-row-margin-block-end);
+  padding-block: var(--bf-single-line-row-padding-block);
+  padding-inline: var(--bf-component-inline-inset-continuation) var(--bf-component-inline-inset-action);
+  text-decoration: none;
+}
+
+:where(.bf-theme) :where(a.bf-list-tree-link:hover) {
+  color: var(--bf-color-link-default);
+  text-decoration: underline;
+}
+
+:where(.bf-theme) :where(.bf-list-tree-link.is-active) {
+  color: var(--bf-color-link-default);
+}
+
+:where(.bf-theme) :where(.bf-list-tree-link):focus:not(:focus-visible) {
+  outline: none;
+}
+
+:where(.bf-theme) :where(.bf-list-tree-link):focus-visible {
+  outline: 0.125rem solid var(--bf-color-focus);
+  outline-offset: -0.125rem;
+}
+
+:where(.bf-theme) :where(.bf-list-tree-toggle) {
+${bodyTypeStyles}  align-items: center;
+  background: transparent;
+  border: 0;
+  border-block: var(--bf-border-width) solid transparent;
+  color: var(--bf-color-text-default);
+  cursor: pointer;
+  display: flex;
+  gap: var(--bf-disclosure-gap);
+  margin: 0 0 var(--bf-single-line-row-margin-block-end);
+  padding-block: var(--bf-single-line-row-padding-block);
+  padding-inline: 0 calc(var(--bf-baseline) * 0.5);
+  text-align: left;
+  width: 100%;
+}
+
+:where(.bf-theme) :where(.bf-list-tree-toggle):hover {
+  background: var(--bf-color-background-hover);
+}
+
+:where(.bf-theme) :where(.bf-list-tree-toggle):focus:not(:focus-visible) {
+  outline: none;
+}
+
+:where(.bf-theme) :where(.bf-list-tree-toggle):focus-visible {
+  outline: 0.125rem solid var(--bf-color-focus);
+  outline-offset: -0.125rem;
+}
+
+:where(.bf-theme) :where(.bf-list-tree-toggle)::before {
+  background-image: var(--bf-ui-icon-chevron-down);
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 1rem 1rem;
+  block-size: 1rem;
+  content: "";
+  flex: 0 0 1rem;
+  inline-size: 1rem;
+  transform: translateY(var(--bf-disclosure-icon-optical-offset-block)) rotate(-90deg);
+}
+
+:where(.bf-theme) :where(.bf-list-tree-toggle[aria-expanded='true'])::before {
+  transform: translateY(var(--bf-disclosure-icon-optical-offset-block)) rotate(0deg);
+}
 `;
 }

package/dist/css-components/list.js

@@ -7,6 +7,10 @@ export function listCss({ bodyTypeStyles }) {
   padding: 0;
 }
 
+:where(.bf-theme) :where(.bf-list:has(> .bf-list-item:is(.is-ticked, .is-crossed)), ol.bf-list.is-divided) {
+  padding-inline-start: var(--bf-leading-mark-group-inset);
+}
+
 :where(.bf-theme) :where(.bf-list-item) {
 ${bodyTypeStyles}  color: var(--bf-color-text-default);
   margin: 0 0 var(--bf-body-margin-bottom);
@@ -17,8 +21,10 @@ ${bodyTypeStyles}  color: var(--bf-color-text-default);
 }
 
 :where(.bf-theme) :where(.bf-list.is-divided) > :where(.bf-list-item) {
-  box-shadow: inset 0 1px 0 var(--bf-color-border-low-contrast);
-  padding-block-end: var(--bf-baseline);
+  border-block: var(--bf-border-width) solid transparent;
+  box-shadow: inset 0 0.0625rem 0 var(--bf-color-border-low-contrast);
+  margin-block-end: var(--bf-single-line-row-margin-block-end);
+  padding-block: var(--bf-single-line-row-padding-block);
 }
 
 :where(.bf-theme) :where(.bf-list.is-divided) > :where(.bf-list-item:first-child) {
@@ -26,7 +32,7 @@ ${bodyTypeStyles}  color: var(--bf-color-text-default);
 }
 
 :where(.bf-theme) :where(.bf-list-item.is-ticked, .bf-list-item.is-crossed) {
-  padding-inline-start: calc(var(--bf-leading-icon-size) + var(--bf-leading-icon-gap));
+  padding-inline-start: var(--bf-leading-mark-offset);
   position: relative;
 }
 
@@ -51,10 +57,6 @@ ${bodyTypeStyles}  color: var(--bf-color-text-default);
   background-image: var(--bf-ui-icon-error-grey);
 }
 
-:where(.bf-theme) :where(.bf-list.is-divided) > :where(.bf-list-item.is-ticked, .bf-list-item.is-crossed)::before {
-  top: calc(var(--bf-leading-icon-offset) + (var(--bf-baseline) * 0.5));
-}
-
 :where(.bf-theme) :where(ol.bf-list.is-divided) {
   counter-reset: bf-list-counter;
 }