baseline-foundry 0.1.4 → 0.1.5

package/dist/css-components/document-navigation.js

@@ -13,11 +13,15 @@ export function documentNavigationCss(options) {
 :where(.bf-theme) :where(.bf-in-page-navigation) {
   container-name: bf-in-page-navigation;
   container-type: inline-size;
-  margin-block: 0 var(--bf-section-space-shallow);
+  margin: 0;
   min-inline-size: 0;
 }
 
 :where(.bf-theme) :where(.bf-in-page-navigation-nav) {
+  --bf-stack-space: var(--bf-space-1);
+  align-content: start;
+  display: grid;
+  gap: var(--bf-stack-space);
   max-block-size: 100dvb;
   min-inline-size: 0;
   overflow: auto;
@@ -28,12 +32,17 @@ export function documentNavigationCss(options) {
 :where(.bf-theme) :where(.bf-in-page-navigation-heading) {
 ${headingTypeStyles}  color: var(--bf-color-text-muted);
   display: block;
-  margin: 0 0 var(--bf-space-1);
-  padding-block: var(--bf-h6-nudge-start) var(--bf-h6-nudge-end);
+  margin-block: 0 var(--bf-h6-margin-bottom);
+  padding-block-end: 0;
+  padding-block-start: var(--bf-h6-nudge-start);
 }
 
 :where(.bf-theme) :where(.bf-in-page-navigation-list) {
+  --bf-stack-space: var(--bf-space-1);
+  align-content: start;
   border-inline-start: var(--bf-bar-thickness) solid var(--bf-color-border-low-contrast);
+  display: grid;
+  gap: var(--bf-stack-space);
   list-style: none;
   margin: 0;
   min-inline-size: 0;
@@ -41,13 +50,16 @@ ${headingTypeStyles}  color: var(--bf-color-text-muted);
 }
 
 :where(.bf-theme) :where(.bf-in-page-navigation-item) {
+  align-content: start;
+  display: grid;
+  gap: var(--bf-stack-space);
   margin: 0;
   min-inline-size: 0;
   padding: 0;
   position: relative;
 }
 
-:where(.bf-theme) :where(.bf-in-page-navigation-link) {
+:where(.bf-theme) :where(a.bf-in-page-navigation-link) {
 ${bodyTypeStyles}  color: var(--bf-color-text-muted);
   display: -webkit-box;
   line-clamp: 2;
@@ -55,7 +67,7 @@ ${bodyTypeStyles}  color: var(--bf-color-text-muted);
   min-inline-size: 0;
   overflow: hidden;
   overflow-wrap: anywhere;
-  padding-block: calc(var(--bf-body-nudge-start) + var(--bf-space-half)) calc(var(--bf-body-nudge-end) + var(--bf-space-half));
+  padding-block: var(--bf-body-nudge-start) var(--bf-body-nudge-end);
   padding-inline: var(--bf-space-2) 0;
   position: relative;
   text-decoration: none;
@@ -63,7 +75,7 @@ ${bodyTypeStyles}  color: var(--bf-color-text-muted);
   -webkit-box-orient: vertical;
 }
 
-:where(.bf-theme) :where(.bf-in-page-navigation-link:hover) {
+:where(.bf-theme) :where(a.bf-in-page-navigation-link:hover) {
   color: var(--bf-color-text-default);
   text-decoration: none;
 }
@@ -73,8 +85,8 @@ ${bodyTypeStyles}  color: var(--bf-color-text-muted);
 }
 
 :where(.bf-theme) :where(.bf-in-page-navigation-link:focus-visible) {
-  outline: 2px solid var(--bf-color-focus);
-  outline-offset: 2px;
+  outline: 0.125rem solid var(--bf-color-focus);
+  outline-offset: 0.125rem;
 }
 
 :where(.bf-theme) :where(.bf-in-page-navigation-link.is-active, .bf-in-page-navigation-link[aria-current]) {
@@ -125,8 +137,8 @@ ${bodyCaseTypeStyles}  align-items: center;
 }
 
 :where(.bf-theme) :where(.bf-in-page-navigation-toggle:focus-visible) {
-  outline: 2px solid var(--bf-color-focus);
-  outline-offset: -2px;
+  outline: 0.125rem solid var(--bf-color-focus);
+  outline-offset: -0.125rem;
 }
 
 :where(.bf-theme) :where(.bf-in-page-navigation-toggle > .bf-icon) {
@@ -140,6 +152,7 @@ ${bodyCaseTypeStyles}  align-items: center;
     border-block-end: var(--bf-border-width) solid var(--bf-color-border-low-contrast);
     display: grid;
     grid-template-columns: minmax(0, 1fr) auto;
+    row-gap: 0;
     max-block-size: none;
     overflow: visible;
     position: static;
@@ -152,6 +165,7 @@ ${bodyCaseTypeStyles}  align-items: center;
   :where(.bf-theme) :where(.bf-in-page-navigation-list) {
     border: 0;
     display: flex;
+    gap: 0;
     grid-column: 1;
     grid-row: 1;
     margin: 0;
@@ -216,7 +230,8 @@ ${bodyCaseTypeStyles}  align-items: center;
   :where(.bf-theme) :where(.bf-in-page-navigation.is-expanded > .bf-in-page-navigation-nav > .bf-in-page-navigation-list, .bf-in-page-navigation:has(.bf-in-page-navigation-toggle[aria-expanded='true']) > .bf-in-page-navigation-nav > .bf-in-page-navigation-list) {
     background: var(--bf-color-background-alt);
     border-inline-start: var(--bf-bar-thickness) solid var(--bf-color-border-low-contrast);
-    display: block;
+    display: grid;
+    gap: var(--bf-stack-space);
     grid-column: 1 / -1;
     grid-row: 2;
     /* The mobile nav owns a bottom rule; reserve its thickness within the
@@ -227,20 +242,21 @@ ${bodyCaseTypeStyles}  align-items: center;
   }
 
   :where(.bf-theme) :where(.bf-in-page-navigation.is-expanded .bf-in-page-navigation-item, .bf-in-page-navigation:has(.bf-in-page-navigation-toggle[aria-expanded='true']) .bf-in-page-navigation-item) {
-    display: block;
+    display: grid;
     max-inline-size: none;
   }
 
   :where(.bf-theme) :where(.bf-in-page-navigation.is-expanded .bf-in-page-navigation-link, .bf-in-page-navigation:has(.bf-in-page-navigation-toggle[aria-expanded='true']) .bf-in-page-navigation-link) {
     display: -webkit-box;
     overflow-wrap: anywhere;
-    padding-block: calc(var(--bf-body-nudge-start) + var(--bf-space-half)) calc(var(--bf-body-nudge-end) + var(--bf-space-half));
+    padding-block: var(--bf-body-nudge-start) var(--bf-body-nudge-end);
     padding-inline: var(--bf-space-2) 0;
     white-space: normal;
   }
 
   :where(.bf-theme) :where(.bf-in-page-navigation.is-expanded .bf-in-page-navigation-list .bf-in-page-navigation-list, .bf-in-page-navigation:has(.bf-in-page-navigation-toggle[aria-expanded='true']) .bf-in-page-navigation-list .bf-in-page-navigation-list) {
-    display: block;
+    display: grid;
+    gap: var(--bf-stack-space);
   }
 
   :where(.bf-theme) :where(.bf-in-page-navigation.is-expanded .bf-in-page-navigation-link.is-active, .bf-in-page-navigation.is-expanded .bf-in-page-navigation-link[aria-current], .bf-in-page-navigation:has(.bf-in-page-navigation-toggle[aria-expanded='true']) .bf-in-page-navigation-link.is-active, .bf-in-page-navigation:has(.bf-in-page-navigation-toggle[aria-expanded='true']) .bf-in-page-navigation-link[aria-current])::before {
@@ -323,30 +339,47 @@ ${bodyCaseTypeStyles}  align-items: center;
 /* ------------------------------------------------------------------ */
 
 :where(.bf-theme) :where(.bf-table-of-contents) {
+  --bf-table-of-contents-section-gap: var(--bf-section-space-shallow);
+  align-content: start;
   container-name: bf-table-of-contents;
   container-type: inline-size;
-  margin-block: 0 var(--bf-section-space-shallow);
+  display: grid;
+  gap: var(--bf-table-of-contents-section-gap);
+  margin: 0;
   min-inline-size: 0;
 }
 
 :where(.bf-theme) :where(.bf-table-of-contents-section) {
+  --bf-stack-space: 0rem;
+  align-content: start;
+  display: grid;
+  gap: var(--bf-stack-space);
   margin: 0;
   min-inline-size: 0;
-  padding-block-end: var(--bf-space-2);
+  padding: 0;
+  position: relative;
 }
 
-:where(.bf-theme) :where(.bf-table-of-contents-section + .bf-table-of-contents-section) {
-  border-block-start: var(--bf-border-width) solid var(--bf-color-border-low-contrast);
-  padding-block-start: calc(var(--bf-space-2) - var(--bf-border-width));
+:where(.bf-theme) :where(.bf-table-of-contents-section + .bf-table-of-contents-section)::before {
+  background: var(--bf-color-border-low-contrast);
+  block-size: var(--bf-border-width);
+  content: "";
+  inset-block-start: 0;
+  inset-inline: 0;
+  position: absolute;
 }
 
 :where(.bf-theme) :where(.bf-table-of-contents-heading) {
-${headingTypeStyles}  color: var(--bf-color-text-muted);
-  margin: 0 0 var(--bf-space-1);
-  padding-block: var(--bf-h6-nudge-start) var(--bf-h6-nudge-end);
+  color: var(--bf-color-text-default);
+  margin: 0;
+  padding-block-end: 0;
 }
 
 :where(.bf-theme) :where(.bf-table-of-contents-list) {
+  --bf-stack-space: 0rem;
+  align-content: start;
+  display: grid;
+  gap: var(--bf-stack-space);
   list-style: none;
   margin: 0;
   min-inline-size: 0;
@@ -354,21 +387,25 @@ ${headingTypeStyles}  color: var(--bf-color-text-muted);
 }
 
 :where(.bf-theme) :where(.bf-table-of-contents-item) {
+  align-content: start;
+  display: grid;
+  gap: var(--bf-stack-space);
   margin: 0;
   min-inline-size: 0;
   padding: 0;
 }
 
-:where(.bf-theme) :where(.bf-table-of-contents-link) {
-${bodyTypeStyles}  color: var(--bf-color-link-default);
+:where(.bf-theme) :where(a.bf-table-of-contents-link) {
+${bodyTypeStyles}  border-block: var(--bf-border-width) solid transparent;
+  color: var(--bf-color-link-default);
   display: block;
-  margin: 0;
+  margin: 0 0 var(--bf-single-line-row-margin-block-end);
   overflow-wrap: anywhere;
-  padding-block: calc(var(--bf-body-nudge-start) + var(--bf-space-half)) calc(var(--bf-body-nudge-end) + var(--bf-space-half));
+  padding-block: var(--bf-single-line-row-padding-block);
   text-decoration: none;
 }
 
-:where(.bf-theme) :where(.bf-table-of-contents-link:hover) {
+:where(.bf-theme) :where(a.bf-table-of-contents-link:hover) {
   color: var(--bf-color-text-default);
   text-decoration: underline;
 }
@@ -378,8 +415,8 @@ ${bodyTypeStyles}  color: var(--bf-color-link-default);
 }
 
 :where(.bf-theme) :where(.bf-table-of-contents-link:focus-visible) {
-  outline: 2px solid var(--bf-color-focus);
-  outline-offset: 2px;
+  outline: 0.125rem solid var(--bf-color-focus);
+  outline-offset: 0.125rem;
 }
 
 :where(.bf-theme) :where(.bf-table-of-contents-link.is-active, .bf-table-of-contents-link[aria-current]) {

package/dist/css-components/editorial-content.js

@@ -12,7 +12,7 @@ export function editorialContentCss(options) {
   border-inline-start: var(--bf-bar-thickness) solid var(--bf-notice-border);
   color: var(--bf-color-text-default);
   display: flow-root;
-  margin-block: 0 var(--bf-section-space-shallow);
+  margin: 0;
   max-inline-size: 100%;
   padding-block: var(--bf-space-2);
   padding-inline: var(--bf-space-2);

package/dist/css-components/interactive-feedback.js

@@ -77,12 +77,13 @@ export function interactiveFeedbackCss() {
   border: var(--bf-border-width) solid var(--bf-color-border-default);
   border-inline-start: var(--bf-bar-thickness) solid var(--bf-notification-accent);
   color: var(--bf-color-text-default);
-  margin-block: 0 var(--bf-space-3);
+  margin-block: 0;
   max-inline-size: 100%;
   min-inline-size: 0;
   overflow-wrap: anywhere;
-  padding-block: calc(var(--bf-space-1) - var(--bf-border-width));
-  padding-inline: calc((var(--bf-space-2) * 2) + var(--bf-icon-size-default)) 0;
+  padding-block-end: max(0rem, calc(var(--bf-space-half) - var(--bf-border-width)));
+  padding-block-start: 0;
+  padding-inline: calc(var(--bf-icon-label-inline-offset) - var(--bf-bar-thickness)) var(--bf-space-1);
   position: relative;
 }
 
@@ -105,14 +106,14 @@ export function interactiveFeedbackCss() {
 :where(.bf-theme) :where(.bf-notification.is-borderless) {
   border: 0;
   padding-block: 0;
-  padding-inline: calc(var(--bf-space-2) * 2) 0;
+  padding-inline: calc(var(--bf-icon-size-default) + var(--bf-space-1)) 0;
 }
 
 :where(.bf-theme) :where(.bf-notification-icon) {
   background-color: var(--bf-notification-accent);
   background-image: none;
-  inset-block-start: calc(var(--bf-space-1) + ((var(--bf-body-line-height) - var(--bf-icon-size-default)) / 2) + var(--bf-body-nudge-start));
-  inset-inline-start: var(--bf-space-2);
+  inset-block-start: calc(((var(--bf-h6-line-height) - var(--bf-icon-size-default)) / 2) + var(--bf-h6-nudge-start) - var(--bf-border-width));
+  inset-inline-start: calc(var(--bf-icon-label-inline-offset) - var(--bf-bar-thickness) - var(--bf-icon-size-default) - var(--bf-space-1));
   mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zm0 1.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13zm-.75 5.25h1.5v5h-1.5v-5zM8 3.5a1 1 0 1 1 0 2 1 1 0 0 1 0-2z'/%3E%3C/svg%3E");
   mask-position: center;
   mask-repeat: no-repeat;
@@ -133,22 +134,52 @@ export function interactiveFeedbackCss() {
 }
 
 :where(.bf-theme) :where(.bf-notification.is-borderless > .bf-notification-icon) {
-  inset-block-start: calc(((var(--bf-body-line-height) - var(--bf-icon-size-default)) / 2) + var(--bf-body-nudge-start));
+  inset-block-start: calc(((var(--bf-h6-line-height) - var(--bf-icon-size-default)) / 2) + var(--bf-h6-nudge-start));
   inset-inline-start: 0;
 }
 
+:where(.bf-theme) :where(.bf-notification.is-inline > .bf-notification-icon) {
+  inset-block-start: calc(((var(--bf-body-line-height) - var(--bf-icon-size-default)) / 2) + var(--bf-body-nudge-start) - var(--bf-border-width));
+}
+
 :where(.bf-theme) :where(.bf-notification-content, .bf-notification-meta) {
   max-inline-size: 100%;
   min-inline-size: 0;
 }
 
 :where(.bf-theme) :where(.bf-notification-content) {
-  margin-block-end: calc(var(--bf-space-2) - var(--bf-body-nudge-start));
-  padding-block-start: var(--bf-body-nudge-start);
-  padding-inline-end: var(--bf-space-4);
+  /* Neutralise the shell's top border so the first metric role starts on-grid. */
+  margin-block: calc(var(--bf-border-width) * -1) 0;
+  padding-block-start: 0;
+  padding-inline-end: calc(var(--bf-icon-size-default) + var(--bf-space-1));
+}
+
+:where(.bf-theme) :where(.bf-notification.is-borderless .bf-notification-content) {
+  --bf-stack-space: 0rem;
+  margin-block-start: 0;
+}
+
+/* Metadata-bearing notifications use a full baseline between title and copy,
+   and pair it with the full end inset. This keeps both the metadata boundary
+   and the complete shell on-grid; simpler messages retain compact rhythm. */
+:where(.bf-theme) :where(.bf-notification:has(> .bf-notification-meta)) {
+  padding-block-end: calc(var(--bf-space-1) - var(--bf-border-width));
+}
+
+:where(.bf-theme) :where(.bf-notification.is-inline) {
+  padding-block-end: calc(var(--bf-space-1) - var(--bf-border-width));
+}
+
+/* Return the cancelled H6/body metric edges to the shell boundary. The
+ * Documentation tier deliberately gives those roles different metrics, so
+ * deriving this inset keeps every bordered notification on-grid without
+ * reopening the visible title/copy gap. Keep this after the shell variants so
+ * the metric relationship owns their final compensation. */
+:where(.bf-theme) :where(.bf-notification:has(> .bf-notification-content.is-metric-flush):not(.is-borderless)) {
+  padding-block-end: calc(var(--bf-space-1) - var(--bf-border-width) + var(--bf-baseline) - var(--bf-h6-nudge-start) - var(--bf-body-margin-bottom));
 }
 
-:where(.bf-theme) :where(.bf-notification-title, .bf-notification-message, .bf-notification-timestamp) {
+:where(.bf-theme) :where(.bf-notification-message, .bf-notification-timestamp) {
   font-family: var(--bf-body-font-family);
   font-size: var(--bf-body-font-size);
   font-style: var(--bf-body-font-style);
@@ -156,20 +187,11 @@ export function interactiveFeedbackCss() {
   max-inline-size: 100%;
 }
 
-:where(.bf-theme) :where(.bf-notification-title) {
-  font-weight: 600;
-  margin-block: 0;
-  padding-block: 0;
-}
-
 :where(.bf-theme) :where(.bf-notification-message) {
   font-weight: var(--bf-body-font-weight);
-  margin-block: 0;
-  padding-block: 0;
-}
-
-:where(.bf-theme) :where(.bf-notification.is-inline .bf-notification-title, .bf-notification.is-inline .bf-notification-message) {
-  display: inline;
+  margin-block: 0 var(--bf-body-margin-bottom);
+  padding-block-end: 0;
+  padding-block-start: var(--bf-body-nudge-start);
 }
 
 :where(.bf-theme) :where(.bf-notification-close) {
@@ -179,8 +201,8 @@ export function interactiveFeedbackCss() {
   margin-block-end: 0;
   padding: 0;
   position: absolute;
-  inset-block-start: var(--bf-space-1);
-  inset-inline-end: var(--bf-space-1);
+  inset-block-start: 0;
+  inset-inline-end: 0;
 }
 
 :where(.bf-theme) :where(.bf-notification.is-borderless .bf-notification-close) {
@@ -195,7 +217,7 @@ export function interactiveFeedbackCss() {
   flex-wrap: wrap;
   gap: var(--bf-space-1) var(--bf-space-2);
   justify-content: space-between;
-  margin-block-end: var(--bf-space-1);
+  margin-block-end: 0;
   padding-block-start: calc(var(--bf-space-1) - var(--bf-border-width));
   padding-inline-end: var(--bf-space-2);
 }
@@ -208,7 +230,7 @@ export function interactiveFeedbackCss() {
 :where(.bf-theme) :where(.bf-notification-timestamp) {
   color: var(--bf-color-text-muted);
   font-weight: var(--bf-body-font-weight);
-  margin-block: 0 calc(var(--bf-space-2) - var(--bf-body-nudge-start));
+  margin-block: 0 var(--bf-body-margin-bottom);
   padding-block: var(--bf-body-nudge-start) 0;
 }
 
@@ -223,7 +245,7 @@ export function interactiveFeedbackCss() {
 
 :where(.bf-theme) :where(.bf-notification-actions > .bf-button.is-link) {
   flex: 0 0 auto;
-  margin-block-end: calc(var(--bf-space-2) - var(--bf-body-nudge-start));
+  margin-block-end: var(--bf-body-margin-bottom);
   padding-block: var(--bf-body-nudge-start) 0;
 }
 `;

package/dist/css-components/interactive-tables.js

@@ -20,10 +20,10 @@ export function interactiveTablesCss() {
   cursor: inherit;
   display: inline-block;
   font: inherit;
-  margin: -2px calc(var(--bf-space-half) * -1);
+  margin: -0.125rem calc(var(--bf-space-half) * -1);
   max-inline-size: 100%;
   overflow: hidden;
-  padding: 2px var(--bf-space-half);
+  padding: 0.125rem var(--bf-space-half);
   text-align: inherit;
   text-decoration: inherit;
   text-overflow: inherit;
@@ -34,7 +34,7 @@ export function interactiveTablesCss() {
 :where(.bf-theme) :where(.bf-table.is-sortable th[aria-sort]:hover, .bf-table-sort-button:focus-visible) {
   color: var(--bf-color-link-default);
   text-decoration: underline;
-  text-decoration-thickness: 1px;
+  text-decoration-thickness: 0.0625rem;
   text-underline-offset: 0.075em;
 }
 
@@ -43,11 +43,11 @@ export function interactiveTablesCss() {
 }
 
 :where(.bf-theme) :where(.bf-table-sort-button:focus-visible) {
-  outline: 2px solid var(--bf-color-focus);
-  outline-offset: -2px;
+  outline: 0.125rem solid var(--bf-color-focus);
+  outline-offset: -0.125rem;
 }
 
-:where(.bf-theme) :where(.bf-table.is-sortable th[aria-sort='ascending'], .bf-table.is-sortable th[aria-sort='descending'])::after {
+:where(.bf-theme) :where(.bf-table.is-sortable th[aria-sort])::after {
   background-image: var(--bf-ui-icon-chevron-down);
   background-position: center;
   background-repeat: no-repeat;
@@ -57,9 +57,14 @@ export function interactiveTablesCss() {
   display: inline-block;
   inline-size: var(--bf-icon-size-default);
   margin-inline-start: var(--bf-space-half);
+  opacity: 0;
   vertical-align: calc((1cap - var(--bf-icon-size-default)) / 2);
 }
 
+:where(.bf-theme) :where(.bf-table.is-sortable th[aria-sort='ascending'], .bf-table.is-sortable th[aria-sort='descending'])::after {
+  opacity: 1;
+}
+
 :where(.bf-theme) :where(.bf-table.is-sortable th[aria-sort='ascending'])::after {
   transform: rotate(180deg);
 }
@@ -96,9 +101,9 @@ export function interactiveTablesCss() {
   }
 
   :where(.bf-theme) :where(.bf-table-mobile-card-frame > .bf-table.is-mobile-card > thead) {
-    block-size: 1px;
+    block-size: 0.0625rem;
     clip-path: inset(50%);
-    inline-size: 1px;
+    inline-size: 0.0625rem;
     overflow: hidden;
     position: absolute;
     white-space: nowrap;

package/dist/css-components/legacy-navigation.d.ts

@@ -4,6 +4,5 @@ export interface LegacyNavigationCssOptions {
     bodyTypeStyles: string;
     buttonMarginBottom: string;
     buttonPadding: string;
-    compactButtonPadding: string;
 }
 export declare function legacyNavigationCss(options: LegacyNavigationCssOptions): string;