baseline-foundry 0.1.3 → 0.1.5

package/dist/css-components/article-pagination.js

@@ -7,145 +7,146 @@
  */
 export function articlePaginationCss(options) {
     const { bodyCaseTypeStyles, titleTypeStyles } = options;
-    return `:where(.bf-theme) :where(.bf-article-pagination) {
-  container-name: bf-article-pagination;
-  container-type: inline-size;
-  display: grid;
-  grid-template-columns: auto minmax(0, 1fr);
-  margin-block-end: var(--bf-section-space-shallow);
-  min-inline-size: 0;
-}
-
-:where(.bf-theme) :where(.bf-article-pagination-link) {
-  background-color: var(--bf-color-background-default);
-  border: var(--bf-border-width) solid transparent;
-  box-sizing: border-box;
-  color: var(--bf-color-text-default);
-  display: grid;
-  column-gap: var(--bf-space-2);
-  grid-template-rows: auto auto;
-  inline-size: calc((100cqi - var(--bf-space-2)) / 2);
-  min-inline-size: 0;
-  padding-block: calc(var(--bf-space-2) + (var(--bf-baseline) / 4) - var(--bf-border-width));
-  position: relative;
-  row-gap: var(--bf-space-half);
-  text-decoration: none;
-}
-
-:where(.bf-theme) :where(.bf-article-pagination-link:hover) {
-  background-color: var(--bf-color-background-hover);
-}
-
-:where(.bf-theme) :where(.bf-article-pagination-link:focus:not(:focus-visible)) {
-  outline: none;
-}
-
-:where(.bf-theme) :where(.bf-article-pagination-link:focus-visible) {
-  outline: 2px solid var(--bf-color-focus);
-  outline-offset: 2px;
-}
-
-:where(.bf-theme) :where(.bf-article-pagination-link.is-previous) {
-  grid-column: 1;
-  grid-template-columns: var(--bf-icon-size-default) minmax(0, 1fr);
-  padding-inline: var(--bf-space-1) var(--bf-space-2);
-  text-align: start;
-}
-
-:where(.bf-theme) :where(.bf-article-pagination-link.is-next) {
-  grid-column: 2;
-  grid-template-columns: minmax(0, 1fr) var(--bf-icon-size-default);
-  justify-self: end;
-  padding-inline: var(--bf-space-2) var(--bf-space-1);
-  text-align: end;
-}
-
-:where(.bf-theme) :where(.bf-article-pagination-direction) {
-${bodyCaseTypeStyles}  color: inherit;
-  display: contents;
-  margin: 0;
-  min-inline-size: 0;
-}
-
-:where(.bf-theme) :where(.bf-article-pagination-link.is-previous .bf-icon) {
-  align-self: center;
-  grid-column: 1;
-  grid-row: 1;
-  justify-self: start;
-}
-
-:where(.bf-theme) :where(.bf-article-pagination-link.is-previous .bf-article-pagination-label),
-:where(.bf-theme) :where(.bf-article-pagination-link.is-previous .bf-article-pagination-title) {
-  grid-column: 2;
-}
-
-:where(.bf-theme) :where(.bf-article-pagination-link.is-next .bf-icon) {
-  align-self: center;
-  grid-column: 2;
-  grid-row: 1;
-  justify-self: end;
-}
-
-:where(.bf-theme) :where(.bf-article-pagination-link.is-next .bf-article-pagination-label),
-:where(.bf-theme) :where(.bf-article-pagination-link.is-next .bf-article-pagination-title) {
-  grid-column: 1;
-}
-
-:where(.bf-theme) :where(.bf-article-pagination-direction > .bf-icon) {
-  --bf-icon-size: var(--bf-icon-size-default);
-}
-
-:where(.bf-theme) .bf-article-pagination:dir(rtl) .bf-article-pagination-link.is-previous .bf-icon {
-  --bf-icon-transform: rotate(-90deg);
-}
-
-:where(.bf-theme) .bf-article-pagination:dir(rtl) .bf-article-pagination-link.is-next .bf-icon {
-  --bf-icon-transform: rotate(90deg);
-}
-
-:where(.bf-theme) :where(.bf-article-pagination-label) {
-  grid-row: 1;
-  min-inline-size: 0;
-  overflow-wrap: anywhere;
-}
-
-:where(.bf-theme) :where(.bf-article-pagination-title) {
-${titleTypeStyles}  color: inherit;
-  grid-row: 2;
-  margin: 0;
-  overflow-wrap: anywhere;
-}
-
-@container bf-article-pagination (width < 28.75rem) {
-  :where(.bf-theme) :where(.bf-article-pagination-link:only-child) {
-    grid-column: 1 / -1;
-    inline-size: 100%;
-  }
-
-  :where(.bf-theme) :where(.bf-article-pagination-link.is-previous:not(:only-child)) {
-    grid-template-columns: var(--bf-icon-size-default);
-    inline-size: calc(var(--bf-space-6) + var(--bf-space-1));
-    padding-inline: var(--bf-space-1);
-  }
-
-  :where(.bf-theme) :where(.bf-article-pagination-link.is-next:not(:only-child)) {
-    inline-size: 100%;
-  }
-
-  :where(.bf-theme) :where(.bf-article-pagination-link.is-previous:not(:only-child) .bf-article-pagination-label),
-  :where(.bf-theme) :where(.bf-article-pagination-link.is-previous:not(:only-child) .bf-article-pagination-title) {
-    block-size: 1px;
-    border: 0;
-    clip: rect(0 0 0 0);
-    clip-path: inset(50%);
-    inline-size: 1px;
-    margin: -1px;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    white-space: nowrap;
-  }
-}
-
+    return `:where(.bf-theme) :where(.bf-article-pagination) {
+  container-name: bf-article-pagination;
+  container-type: inline-size;
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  margin: 0;
+  min-inline-size: 0;
+}
+
+:where(.bf-theme) :where(a.bf-article-pagination-link) {
+  background-color: var(--bf-color-background-default);
+  border: var(--bf-border-width) solid transparent;
+  box-sizing: border-box;
+  color: var(--bf-color-text-default);
+  display: grid;
+  column-gap: var(--bf-space-2);
+  grid-template-rows: auto auto;
+  inline-size: calc((100cqi - var(--bf-space-2)) / 2);
+  min-inline-size: 0;
+  padding-block: calc(var(--bf-space-2) + (var(--bf-baseline) / 4) - var(--bf-border-width));
+  position: relative;
+  row-gap: var(--bf-space-half);
+  text-decoration: none;
+}
+
+:where(.bf-theme) :where(a.bf-article-pagination-link:hover) {
+  background-color: var(--bf-color-background-hover);
+  text-decoration: none;
+}
+
+:where(.bf-theme) :where(.bf-article-pagination-link:focus:not(:focus-visible)) {
+  outline: none;
+}
+
+:where(.bf-theme) :where(.bf-article-pagination-link:focus-visible) {
+  outline: 0.125rem solid var(--bf-color-focus);
+  outline-offset: 0.125rem;
+}
+
+:where(.bf-theme) :where(.bf-article-pagination-link.is-previous) {
+  grid-column: 1;
+  grid-template-columns: var(--bf-icon-size-default) minmax(0, 1fr);
+  padding-inline: var(--bf-space-1) var(--bf-space-2);
+  text-align: start;
+}
+
+:where(.bf-theme) :where(.bf-article-pagination-link.is-next) {
+  grid-column: 2;
+  grid-template-columns: minmax(0, 1fr) var(--bf-icon-size-default);
+  justify-self: end;
+  padding-inline: var(--bf-space-2) var(--bf-space-1);
+  text-align: end;
+}
+
+:where(.bf-theme) :where(.bf-article-pagination-direction) {
+${bodyCaseTypeStyles}  color: inherit;
+  display: contents;
+  margin: 0;
+  min-inline-size: 0;
+}
+
+:where(.bf-theme) :where(.bf-article-pagination-link.is-previous .bf-icon) {
+  align-self: center;
+  grid-column: 1;
+  grid-row: 1;
+  justify-self: start;
+}
+
+:where(.bf-theme) :where(.bf-article-pagination-link.is-previous .bf-article-pagination-label),
+:where(.bf-theme) :where(.bf-article-pagination-link.is-previous .bf-article-pagination-title) {
+  grid-column: 2;
+}
+
+:where(.bf-theme) :where(.bf-article-pagination-link.is-next .bf-icon) {
+  align-self: center;
+  grid-column: 2;
+  grid-row: 1;
+  justify-self: end;
+}
+
+:where(.bf-theme) :where(.bf-article-pagination-link.is-next .bf-article-pagination-label),
+:where(.bf-theme) :where(.bf-article-pagination-link.is-next .bf-article-pagination-title) {
+  grid-column: 1;
+}
+
+:where(.bf-theme) :where(.bf-article-pagination-direction > .bf-icon) {
+  --bf-icon-size: var(--bf-icon-size-default);
+}
+
+:where(.bf-theme) .bf-article-pagination:dir(rtl) .bf-article-pagination-link.is-previous .bf-icon {
+  --bf-icon-transform: rotate(-90deg);
+}
+
+:where(.bf-theme) .bf-article-pagination:dir(rtl) .bf-article-pagination-link.is-next .bf-icon {
+  --bf-icon-transform: rotate(90deg);
+}
+
+:where(.bf-theme) :where(.bf-article-pagination-label) {
+  grid-row: 1;
+  min-inline-size: 0;
+  overflow-wrap: anywhere;
+}
+
+:where(.bf-theme) :where(.bf-article-pagination-title) {
+${titleTypeStyles}  color: inherit;
+  grid-row: 2;
+  margin: 0;
+  overflow-wrap: anywhere;
+}
+
+@container bf-article-pagination (width < 28.75rem) {
+  :where(.bf-theme) :where(.bf-article-pagination-link:only-child) {
+    grid-column: 1 / -1;
+    inline-size: 100%;
+  }
+
+  :where(.bf-theme) :where(.bf-article-pagination-link.is-previous:not(:only-child)) {
+    grid-template-columns: var(--bf-icon-size-default);
+    inline-size: calc(var(--bf-space-6) + var(--bf-space-1));
+    padding-inline: var(--bf-space-1);
+  }
+
+  :where(.bf-theme) :where(.bf-article-pagination-link.is-next:not(:only-child)) {
+    inline-size: 100%;
+  }
+
+  :where(.bf-theme) :where(.bf-article-pagination-link.is-previous:not(:only-child) .bf-article-pagination-label),
+  :where(.bf-theme) :where(.bf-article-pagination-link.is-previous:not(:only-child) .bf-article-pagination-title) {
+    block-size: 0.0625rem;
+    border: 0;
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
+    inline-size: 0.0625rem;
+    margin: -0.0625rem;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    white-space: nowrap;
+  }
+}
+
 `;
 }

package/dist/css-components/button-actions.js

@@ -1,165 +1,185 @@
 export function buttonActionsCss(options) {
     const { bodyTypeStyles, buttonMarginBottom, buttonPadding } = options;
-    return `:where(.bf-theme) :where(.bf-button, .bf-button.is-base) {
-${bodyTypeStyles}  appearance: none;
-  background-color: var(--bf-color-background-default);
-  border: var(--bf-border-width) solid var(--bf-color-border-high-contrast);
-  border-radius: var(--bf-radius);
-  color: var(--bf-color-text-default);
-  cursor: pointer;
-  display: inline-block;
-  margin-bottom: ${buttonMarginBottom};
-${buttonPadding}  padding-inline: var(--bf-control-inline-padding-action);
-  text-align: center;
-  text-decoration: none;
-}
-
-:where(.bf-theme) :where(.bf-button) {
-  background-color: var(--bf-color-background-default);
-}
-
-:where(.bf-theme) :where(.bf-button.is-base) {
-  background-color: transparent;
-  border-color: transparent;
-}
-
-:where(.bf-theme) :where(.bf-button:hover, .bf-button.is-base:hover) {
-  background-color: var(--bf-color-background-hover);
-}
-
-:where(.bf-theme) :where(.bf-button:not(.is-base):is(:active, [aria-pressed='true'])) {
-  background-color: var(--bf-color-background-active);
-}
-
-:where(.bf-theme) :where(.bf-button, .bf-button.is-base):focus:not(:focus-visible) {
-  outline: none;
-}
-
-:where(.bf-theme) :where(.bf-button, .bf-button.is-base):focus-visible {
-  outline: 2px solid var(--bf-color-focus);
-  outline-offset: 2px;
-}
-
-/* ------------------------------------------------------------------ */
-/* Button — semantic positive modifier (Vanilla parity).               */
-/* Vanilla uses themed positive tokens for default/hover/active        */
-/* backgrounds plus a white text colour on a coloured surface.         */
-/* ------------------------------------------------------------------ */
-
-:where(.bf-theme) :where(.bf-button.is-positive) {
-  background-color: var(--bf-color-button-positive-default);
-  border-color: var(--bf-color-button-positive-default);
-  color: var(--bf-color-button-positive-text);
-}
-
-:where(.bf-theme) :where(.bf-button.is-positive:hover) {
-  background-color: var(--bf-color-button-positive-hover);
-  border-color: var(--bf-color-button-positive-hover);
-  color: var(--bf-color-button-positive-text);
-}
-
-:where(.bf-theme) :where(.bf-button.is-positive:is(:active, [aria-pressed='true'])) {
-  background-color: var(--bf-color-button-positive-active);
-  border-color: var(--bf-color-button-positive-active);
-  color: var(--bf-color-button-positive-text);
-}
-
-/* ------------------------------------------------------------------ */
-/* Button — semantic negative modifier (Vanilla parity).               */
-/* Vanilla uses themed negative tokens for default/hover/active        */
-/* backgrounds plus a white text colour on a coloured surface.         */
-/* ------------------------------------------------------------------ */
-
-:where(.bf-theme) :where(.bf-button.is-negative) {
-  background-color: var(--bf-color-button-negative-default);
-  border-color: var(--bf-color-button-negative-default);
-  color: var(--bf-color-button-negative-text);
-}
-
-:where(.bf-theme) :where(.bf-button.is-negative:hover) {
-  background-color: var(--bf-color-button-negative-hover);
-  border-color: var(--bf-color-button-negative-hover);
-  color: var(--bf-color-button-negative-text);
-}
-
-:where(.bf-theme) :where(.bf-button.is-negative:is(:active, [aria-pressed='true'])) {
-  background-color: var(--bf-color-button-negative-active);
-  border-color: var(--bf-color-button-negative-active);
-  color: var(--bf-color-button-negative-text);
-}
-
-/* ------------------------------------------------------------------ */
-/* Button — link-style modifier (Vanilla parity).                      */
-/* BF starts from the shared button control contract, so the modifier  */
-/* has to strip control chrome and padding back down to inline-link    */
-/* behavior while reusing the shared link tokens.                      */
-/* ------------------------------------------------------------------ */
-
-:where(.bf-theme) :where(.bf-button.is-link) {
-  background-color: transparent;
-  border: 0;
-  border-radius: 0;
-  color: var(--bf-color-link-default);
-  margin-bottom: 0;
-  padding-block: 0;
-  padding-inline: 0;
-}
-
-:where(.bf-theme) :where(.bf-button.is-link:hover) {
-  background-color: transparent;
-  color: var(--bf-color-link-default);
-  text-decoration: underline;
-  text-decoration-thickness: 1px;
-  text-underline-offset: 0.075em;
-}
-
-:where(.bf-theme) :where(.bf-button.is-link:focus-visible) {
-  outline-offset: 0;
-}
-
-/* ------------------------------------------------------------------ */
-/* Button — icon-spacing modifier (Vanilla parity).                    */
-/* Icon buttons make the icon/label relationship explicit. Bare text   */
-/* nodes cannot be distinguished from icon-only buttons in CSS because */
-/* :first-child/:last-child ignore text nodes. A real label slot lets   */
-/* the component use one truthful, token-driven gap in either order.   */
-/* ------------------------------------------------------------------ */
-
-:where(.bf-theme) :where(.bf-button.is-icon) > :where(.bf-icon) {
-  margin: 0;
-}
-
-:where(.bf-theme) :where(.bf-button.is-icon) {
-  align-items: center;
-  column-gap: var(--bf-space-1);
-  display: inline-flex;
-  justify-content: center;
-}
-
-:where(.bf-theme) :where(.bf-button-label) {
-  min-inline-size: 0;
-}
-
-:where(.bf-theme) :where(.bf-actions) {
-  align-items: center;
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--bf-field-gap);
-  min-inline-size: 0;
-}
-
-:where(.bf-theme) :where(.bf-actions.is-end) {
-  justify-content: flex-end;
-}
-
-:where(.bf-theme) :where(.bf-actions.is-nowrap) {
-  flex-wrap: nowrap;
-  overflow-x: auto;
-  scrollbar-width: thin;
-}
-
-:where(.bf-theme) :where(.bf-actions.is-nowrap) > * {
-  flex: 0 0 auto;
-}
+    return `:where(.bf-theme) :where(.bf-button, .bf-button.is-base) {
+${bodyTypeStyles}  appearance: none;
+  background-color: var(--bf-color-background-default);
+  border: var(--bf-border-width) solid var(--bf-color-border-high-contrast);
+  border-radius: var(--bf-radius);
+  color: var(--bf-color-text-default);
+  cursor: pointer;
+  display: inline-block;
+  margin-bottom: ${buttonMarginBottom};
+${buttonPadding}  padding-inline: var(--bf-control-inline-padding-action-bordered);
+  text-align: center;
+  text-decoration: none;
+}
+
+:where(.bf-theme) :where(.bf-button) {
+  background-color: var(--bf-color-background-default);
+}
+
+:where(.bf-theme) :where(.bf-button.is-base) {
+  background-color: transparent;
+  border-color: transparent;
+}
+
+:where(.bf-theme) :where(.bf-button:hover, .bf-button.is-base:hover) {
+  background-color: var(--bf-color-background-hover);
+}
+
+/* Anchor buttons are controls, not prose links. Qualifying the element and
+ * its interaction states prevents the generic anchor underline from leaking
+ * through while leaving the explicit is-link variant unchanged. */
+:where(.bf-theme) :where(a.bf-button:not(.is-link):is(:hover, :active)) {
+  text-decoration: none;
+}
+
+:where(.bf-theme) :where(.bf-button:not(.is-base):is(:active, [aria-pressed='true'])) {
+  background-color: var(--bf-color-background-active);
+}
+
+:where(.bf-theme) :where(.bf-button, .bf-button.is-base):focus:not(:focus-visible) {
+  outline: none;
+}
+
+:where(.bf-theme) :where(.bf-button, .bf-button.is-base):focus-visible {
+  outline: 0.125rem solid var(--bf-color-focus);
+  outline-offset: 0.125rem;
+}
+
+/* ------------------------------------------------------------------ */
+/* Button — semantic positive modifier (Vanilla parity).               */
+/* Vanilla uses themed positive tokens for default/hover/active        */
+/* backgrounds plus a white text colour on a coloured surface.         */
+/* ------------------------------------------------------------------ */
+
+:where(.bf-theme) :where(.bf-button.is-positive) {
+  background-color: var(--bf-color-button-positive-default);
+  border-color: var(--bf-color-button-positive-default);
+  color: var(--bf-color-button-positive-text);
+}
+
+:where(.bf-theme) :where(.bf-button.is-positive:hover) {
+  background-color: var(--bf-color-button-positive-hover);
+  border-color: var(--bf-color-button-positive-hover);
+  color: var(--bf-color-button-positive-text);
+}
+
+:where(.bf-theme) :where(.bf-button.is-positive:is(:active, [aria-pressed='true'])) {
+  background-color: var(--bf-color-button-positive-active);
+  border-color: var(--bf-color-button-positive-active);
+  color: var(--bf-color-button-positive-text);
+}
+
+/* ------------------------------------------------------------------ */
+/* Button — semantic negative modifier (Vanilla parity).               */
+/* Vanilla uses themed negative tokens for default/hover/active        */
+/* backgrounds plus a white text colour on a coloured surface.         */
+/* ------------------------------------------------------------------ */
+
+:where(.bf-theme) :where(.bf-button.is-negative) {
+  background-color: var(--bf-color-button-negative-default);
+  border-color: var(--bf-color-button-negative-default);
+  color: var(--bf-color-button-negative-text);
+}
+
+:where(.bf-theme) :where(.bf-button.is-negative:hover) {
+  background-color: var(--bf-color-button-negative-hover);
+  border-color: var(--bf-color-button-negative-hover);
+  color: var(--bf-color-button-negative-text);
+}
+
+:where(.bf-theme) :where(.bf-button.is-negative:is(:active, [aria-pressed='true'])) {
+  background-color: var(--bf-color-button-negative-active);
+  border-color: var(--bf-color-button-negative-active);
+  color: var(--bf-color-button-negative-text);
+}
+
+/* ------------------------------------------------------------------ */
+/* Button — link-style modifier (Vanilla parity).                      */
+/* BF starts from the shared button control contract, so the modifier  */
+/* has to strip control chrome and padding back down to inline-link    */
+/* behavior while reusing the shared link tokens.                      */
+/* ------------------------------------------------------------------ */
+
+:where(.bf-theme) :where(.bf-button.is-link) {
+  background-color: transparent;
+  border: 0;
+  border-radius: 0;
+  color: var(--bf-color-link-default);
+  margin-bottom: 0;
+  padding-block: 0;
+  padding-inline: 0;
+}
+
+:where(.bf-theme) :where(.bf-button.is-link:hover) {
+  background-color: transparent;
+  color: var(--bf-color-link-default);
+  text-decoration: underline;
+  text-decoration-thickness: 0.0625rem;
+  text-underline-offset: 0.075em;
+}
+
+:where(.bf-theme) :where(.bf-button.is-link:focus-visible) {
+  outline-offset: 0;
+}
+
+/* ------------------------------------------------------------------ */
+/* Button — icon-spacing modifier (Vanilla parity).                    */
+/* Icon buttons make the icon/label relationship explicit. Bare text   */
+/* nodes cannot be distinguished from icon-only buttons in CSS because */
+/* :first-child/:last-child ignore text nodes. A real label slot lets   */
+/* the component use one truthful, token-driven gap in either order.   */
+/* ------------------------------------------------------------------ */
+
+:where(.bf-theme) :where(.bf-button.is-icon) > :where(.bf-icon) {
+  margin: 0;
+}
+
+:where(.bf-theme) :where(.bf-button.is-icon) {
+  align-items: center;
+  column-gap: var(--bf-space-1);
+  display: inline-flex;
+  justify-content: center;
+}
+
+/* An icon-only flex button has no text line box to preserve the occupied
+ * control rhythm. A zero-width metric strut restores the active body line
+ * without imposing a target block size or changing icon/label spacing. */
+:where(.bf-theme) :where(.bf-button.is-icon:not(:has(.bf-button-label))) {
+  column-gap: 0;
+}
+
+:where(.bf-theme) :where(.bf-button.is-icon:not(:has(.bf-button-label)))::before {
+  block-size: var(--bf-body-line-height);
+  content: "";
+  inline-size: 0;
+}
+
+:where(.bf-theme) :where(.bf-button-label) {
+  min-inline-size: 0;
+}
+
+:where(.bf-theme) :where(.bf-actions) {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--bf-field-gap);
+  min-inline-size: 0;
+}
+
+:where(.bf-theme) :where(.bf-actions.is-end) {
+  justify-content: flex-end;
+}
+
+:where(.bf-theme) :where(.bf-actions.is-nowrap) {
+  flex-wrap: nowrap;
+  overflow-x: auto;
+  scrollbar-width: thin;
+}
+
+:where(.bf-theme) :where(.bf-actions.is-nowrap) > * {
+  flex: 0 0 auto;
+}
 `;
 }