baseline-foundry 0.1.3

package/dist/css-components/cards-options.js

@@ -0,0 +1,180 @@
+export function cardsOptionsCss(options) {
+    const { bodyStrongTypeStyles, bodyTypeStyles } = options;
+    return `:where(.bf-theme) :where(.bf-card, .bf-card.is-highlighted, .bf-card.is-overlay, .bf-card.is-muted) {
+  --bf-card-background: var(--bf-color-background-default);
+  --bf-card-border: var(--bf-color-border-default);
+  --bf-card-shadow: none;
+  background: var(--bf-card-background);
+  border: var(--bf-border-width) solid var(--bf-card-border);
+  box-shadow: var(--bf-card-shadow);
+  color: var(--bf-color-text-default);
+  display: flex;
+  flex-direction: column;
+  gap: var(--bf-field-gap);
+  max-inline-size: 100%;
+  overflow: auto;
+  padding-block-end: calc(var(--bf-panel-padding-block) - var(--bf-border-width));
+  padding-block-start: calc(var(--bf-panel-padding-block) - var(--bf-border-width));
+  padding-inline: var(--bf-panel-padding-inline);
+}
+
+:where(.bf-theme) :where(.bf-card.is-highlighted) {
+  --bf-card-background: color-mix(in srgb, var(--bf-color-background-default) 82%, white 18%);
+  --bf-card-shadow: 0 calc(var(--bf-control-visual-size) * 0.25) calc(var(--bf-control-visual-size) * 0.75) rgba(0, 0, 0, 0.16);
+}
+
+:where(.bf-theme) :where(.bf-card.is-overlay) {
+  --bf-card-background: var(--bf-color-background-alt);
+}
+
+:where(.bf-theme) :where(.bf-card.is-muted) {
+  --bf-card-background: color-mix(in srgb, var(--bf-color-background-default) 88%, black 12%);
+}
+
+:where(.bf-theme) :where(a.bf-card, a.bf-card.is-highlighted, a.bf-card.is-overlay, a.bf-card.is-muted) {
+  color: inherit;
+  cursor: pointer;
+  text-decoration: none;
+  transition: border-color 140ms ease, background-color 140ms ease, transform 140ms ease;
+}
+
+:where(.bf-theme) :where(a.bf-card:hover, a.bf-card.is-highlighted:hover, a.bf-card.is-overlay:hover, a.bf-card.is-muted:hover) {
+  border-color: var(--bf-color-focus);
+  transform: translateY(-1px);
+}
+
+:where(.bf-theme) :where(a.bf-card:focus:not(:focus-visible), a.bf-card.is-highlighted:focus:not(:focus-visible), a.bf-card.is-overlay:focus:not(:focus-visible), a.bf-card.is-muted:focus:not(:focus-visible)) {
+  outline: none;
+}
+
+:where(.bf-theme) :where(a.bf-card:focus-visible, a.bf-card.is-highlighted:focus-visible, a.bf-card.is-overlay:focus-visible, a.bf-card.is-muted:focus-visible) {
+  outline: 2px solid var(--bf-color-focus);
+  outline-offset: -2px;
+}
+
+:where(.bf-theme) :where(.bf-card.is-preview) {
+  align-content: start;
+  min-inline-size: 0;
+}
+
+:where(.bf-theme) :where(.bf-card-preview) {
+  aspect-ratio: 3 / 2;
+  background:
+    linear-gradient(180deg, color-mix(in srgb, var(--bf-color-background-default) 78%, var(--bf-color-background-alt) 22%), var(--bf-color-background-alt)),
+    var(--bf-color-background-alt);
+  border: var(--bf-border-width) solid var(--bf-color-border-low-contrast);
+  display: grid;
+  min-inline-size: 0;
+  overflow: hidden;
+  place-items: center;
+  position: relative;
+}
+
+:where(.bf-theme) :where(.bf-card-preview.is-missing)::after {
+  color: var(--bf-color-text-inactive);
+  content: "Capture missing";
+  font-size: 0.75rem;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+:where(.bf-theme) :where(.bf-card-preview-image) {
+  block-size: 100%;
+  display: block;
+  inline-size: 100%;
+  object-fit: contain;
+  object-position: center;
+}
+
+:where(.bf-theme) :where(.bf-card-image) {
+  display: block;
+  inline-size: 100%;
+  margin: 0;
+}
+
+:where(.bf-theme) :where(.bf-card-header) {
+  border-bottom: var(--bf-border-width) solid var(--bf-color-border-low-contrast);
+  display: grid;
+  gap: var(--bf-field-gap);
+  padding-block-end: calc(var(--bf-panel-padding-block) - var(--bf-border-width));
+}
+
+:where(.bf-theme) :where(.bf-card-inner) {
+  display: grid;
+  gap: var(--bf-field-gap);
+}
+
+:where(.bf-theme) :where(.bf-card-content) {
+  min-inline-size: 0;
+}
+
+:where(.bf-theme) :where(.bf-card-thumbnail) {
+  block-size: auto;
+  max-block-size: calc(var(--bf-control-visual-size) * 2);
+}
+
+:where(.bf-theme) :where(.bf-option-grid) {
+  display: grid;
+  gap: calc(var(--bf-baseline) * 2.5);
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
+}
+
+:where(.bf-theme) :where(.bf-option-card) {
+  align-content: start;
+  align-items: start;
+  background: color-mix(in srgb, var(--bf-color-background-default) 88%, black 12%);
+  border: var(--bf-border-width) solid var(--bf-color-border-default);
+  color: var(--bf-color-text-default);
+  display: grid;
+  gap: var(--bf-field-gap);
+  margin: 0;
+  min-block-size: calc((var(--bf-control-box-size) * 2) + var(--bf-baseline));
+  min-inline-size: 0;
+  padding-block-end: calc(var(--bf-panel-padding-block) - var(--bf-border-width));
+  padding-block-start: calc(var(--bf-panel-padding-block) - var(--bf-border-width));
+  padding-inline: var(--bf-panel-padding-inline);
+  text-align: left;
+}
+
+:where(.bf-theme) :where(button.bf-option-card) {
+  appearance: none;
+  cursor: pointer;
+  transition: border-color 140ms ease, background-color 140ms ease, transform 140ms ease;
+}
+
+:where(.bf-theme) :where(button.bf-option-card:hover:not(:disabled)) {
+  background: var(--bf-color-background-hover);
+  border-color: var(--bf-color-focus);
+  transform: translateY(-1px);
+}
+
+:where(.bf-theme) :where(.bf-option-card.is-active),
+:where(.bf-theme) :where(button.bf-option-card:disabled) {
+  background: color-mix(in srgb, var(--bf-color-background-active) 82%, var(--bf-color-focus) 18%);
+  border-color: var(--bf-color-focus);
+  color: var(--bf-color-text-default);
+}
+
+:where(.bf-theme) :where(button.bf-option-card:focus-visible) {
+  outline: 2px solid var(--bf-color-focus);
+  outline-offset: -2px;
+}
+
+:where(.bf-theme) :where(.bf-option-card-label) {
+${bodyStrongTypeStyles}  display: block;
+  margin: 0;
+  min-inline-size: 0;
+}
+
+:where(.bf-theme) :where(.bf-option-card-meta) {
+${bodyTypeStyles}  color: var(--bf-color-text-muted);
+  display: block;
+  margin: 0;
+  min-inline-size: 0;
+}
+
+:where(.bf-theme) :where(.bf-option-card-meta.is-quiet) {
+  color: var(--bf-color-text-inactive);
+}
+`;
+}

package/dist/css-components/chip-badge-status.d.ts

@@ -0,0 +1,10 @@
+type ChipBadgeStatusCssOptions = {
+    bodyCaseTypeStyles: string;
+    bodyLineHeight: string;
+    bodySelectedStartNudge: string;
+    h5SelectedEndNudge: string;
+    h5SelectedStartNudge: string;
+    bodyTypeStyles: string;
+};
+export declare function chipBadgeStatusCss(options: ChipBadgeStatusCssOptions): string;
+export {};

package/dist/css-components/chip-badge-status.js

@@ -0,0 +1,162 @@
+export function chipBadgeStatusCss(options) {
+    const { bodyCaseTypeStyles, bodyLineHeight, bodySelectedStartNudge, h5SelectedEndNudge, h5SelectedStartNudge, bodyTypeStyles, } = options;
+    return `:where(.bf-theme) :where(.bf-chip, .bf-chip.is-positive, .bf-chip.is-caution, .bf-chip.is-negative, .bf-chip.is-information) {
+  --bf-ui-chip-border: var(--bf-color-border-neutral);
+  --bf-ui-chip-border-hover: var(--bf-color-border-neutral);
+  --bf-ui-chip-border-active: var(--bf-color-border-neutral);
+  --bf-ui-chip-background: var(--bf-color-background-neutral-default);
+  --bf-ui-chip-background-hover: var(--bf-color-background-neutral-hover);
+  --bf-ui-chip-background-active: var(--bf-color-background-neutral-active);
+${bodyTypeStyles}  align-items: baseline;
+  background-color: var(--bf-ui-chip-background);
+  border: var(--bf-border-width) solid var(--bf-ui-chip-border);
+  border-radius: 1rem;
+  color: var(--bf-color-text-default);
+  display: inline-flex;
+  gap: 0;
+  inline-size: fit-content;
+  justify-self: start;
+  margin: 0 var(--bf-ui-chip-padding-inline) var(--bf-field-gap) 0;
+  max-inline-size: 100%;
+  min-block-size: var(--bf-ui-chip-block-size);
+  padding-block: var(--bf-ui-chip-padding-block);
+  padding-inline: var(--bf-ui-chip-padding-inline);
+  position: relative;
+  text-decoration: none;
+  user-select: none;
+  vertical-align: calc(var(--bf-border-width) - ${bodySelectedStartNudge});
+  white-space: nowrap;
+}
+
+:where(.bf-theme) :where(.bf-chip.is-positive) {
+  --bf-ui-chip-border: var(--bf-color-border-positive);
+  --bf-ui-chip-border-hover: var(--bf-color-border-positive);
+  --bf-ui-chip-border-active: var(--bf-color-border-positive);
+  --bf-ui-chip-background: var(--bf-color-background-positive-default);
+  --bf-ui-chip-background-hover: var(--bf-color-background-positive-hover);
+  --bf-ui-chip-background-active: var(--bf-color-background-positive-active);
+}
+
+:where(.bf-theme) :where(.bf-chip.is-caution) {
+  --bf-ui-chip-border: var(--bf-color-border-caution);
+  --bf-ui-chip-border-hover: var(--bf-color-border-caution);
+  --bf-ui-chip-border-active: var(--bf-color-border-caution);
+  --bf-ui-chip-background: var(--bf-color-background-caution-default);
+  --bf-ui-chip-background-hover: var(--bf-color-background-caution-hover);
+  --bf-ui-chip-background-active: var(--bf-color-background-caution-active);
+}
+
+:where(.bf-theme) :where(.bf-chip.is-negative) {
+  --bf-ui-chip-border: var(--bf-color-border-negative);
+  --bf-ui-chip-border-hover: var(--bf-color-border-negative);
+  --bf-ui-chip-border-active: var(--bf-color-border-negative);
+  --bf-ui-chip-background: var(--bf-color-background-negative-default);
+  --bf-ui-chip-background-hover: var(--bf-color-background-negative-hover);
+  --bf-ui-chip-background-active: var(--bf-color-background-negative-active);
+}
+
+:where(.bf-theme) :where(.bf-chip.is-information) {
+  --bf-ui-chip-border: var(--bf-color-border-information);
+  --bf-ui-chip-border-hover: var(--bf-color-border-information);
+  --bf-ui-chip-border-active: var(--bf-color-border-information);
+  --bf-ui-chip-background: var(--bf-color-background-information-default);
+  --bf-ui-chip-background-hover: var(--bf-color-background-information-hover);
+  --bf-ui-chip-background-active: var(--bf-color-background-information-active);
+}
+
+:where(.bf-theme) :where(.bf-chip, .bf-chip.is-positive, .bf-chip.is-caution, .bf-chip.is-negative, .bf-chip.is-information):hover {
+  background-color: var(--bf-ui-chip-background-hover);
+  border-color: var(--bf-ui-chip-border-hover);
+  text-decoration: none;
+}
+
+:where(.bf-theme) :where(.bf-chip, .bf-chip.is-positive, .bf-chip.is-caution, .bf-chip.is-negative, .bf-chip.is-information):is(:active, [aria-pressed='true'], .is-selected) {
+  background-color: var(--bf-ui-chip-background-active);
+  border-color: var(--bf-ui-chip-border-active);
+}
+
+:where(.bf-theme) :where(.bf-chip-lead, .bf-chip-value) {
+${bodyTypeStyles}  color: var(--bf-color-text-default);
+  display: inline;
+  margin: 0;
+  min-inline-size: 0;
+  overflow: hidden;
+  padding: 0;
+  text-overflow: ellipsis;
+  vertical-align: baseline;
+}
+
+:where(.bf-theme) :where(.bf-chip-lead) {
+${bodyCaseTypeStyles}  color: var(--bf-color-text-muted);
+}
+
+:where(.bf-theme) :where(.bf-chip-lead + .bf-chip-value)::before {
+${bodyTypeStyles}  color: var(--bf-color-text-muted);
+  color: var(--bf-color-text-muted);
+  content: ": ";
+}
+
+:where(.bf-theme) :where(.bf-badge, .bf-badge.is-negative) {
+${bodyTypeStyles}  align-items: center;
+  background-color: var(--bf-color-text-default);
+  border-radius: 1rem;
+  box-sizing: content-box;
+  color: var(--bf-color-background-default);
+  display: inline-block;
+  margin: 0;
+  max-inline-size: 4ch;
+  min-width: calc(${bodyLineHeight} - (var(--bf-ui-badge-padding-inline) * 2));
+  overflow: hidden;
+  padding-block: 0;
+  padding-inline: var(--bf-ui-badge-padding-inline);
+  text-align: center;
+  text-indent: 0;
+}
+
+:where(.bf-theme) :where(.bf-badge.is-negative) {
+  background-color: var(--bf-color-button-negative-default);
+  color: var(--bf-color-button-negative-text);
+}
+
+:where(.bf-theme) :where(.bf-chip, .bf-chip.is-positive, .bf-chip.is-caution, .bf-chip.is-negative, .bf-chip.is-information) :where(.bf-badge, .bf-badge.is-negative) {
+  align-self: center;
+  margin-inline-end: var(--bf-ui-badge-overhang);
+  margin-inline-start: var(--bf-ui-chip-padding-inline);
+}
+
+:where(.bf-theme) :where(.bf-status-label, .bf-status-label.is-positive, .bf-status-label.is-caution, .bf-status-label.is-information, .bf-status-label.is-negative) {
+  --bf-ui-status-background: color-mix(in srgb, var(--bf-color-background-alt) 70%, black);
+  --bf-ui-status-color: var(--bf-color-button-positive-text);
+  background-color: var(--bf-ui-status-background);
+  color: var(--bf-ui-status-color);
+  display: inline-block;
+${bodyTypeStyles}  margin: 0;
+  padding-block-end: ${h5SelectedEndNudge};
+  padding-block-start: ${h5SelectedStartNudge};
+  padding-inline: var(--bf-ui-chip-padding-inline);
+  text-align: center;
+  text-decoration: none;
+  white-space: nowrap;
+}
+
+:where(.bf-theme) :where(.bf-status-label.is-positive) {
+  --bf-ui-status-background: var(--bf-color-border-positive);
+  --bf-ui-status-color: var(--bf-color-button-positive-text);
+}
+
+:where(.bf-theme) :where(.bf-status-label.is-caution) {
+  --bf-ui-status-background: var(--bf-color-border-caution);
+  --bf-ui-status-color: #111111;
+}
+
+:where(.bf-theme) :where(.bf-status-label.is-information) {
+  --bf-ui-status-background: var(--bf-color-border-information);
+  --bf-ui-status-color: var(--bf-color-button-positive-text);
+}
+
+:where(.bf-theme) :where(.bf-status-label.is-negative) {
+  --bf-ui-status-background: var(--bf-color-border-negative);
+  --bf-ui-status-color: var(--bf-color-button-negative-text);
+}
+`;
+}

package/dist/css-components/content-card.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Rich content-card parity with current Vanilla. This intentionally remains a
+ * separate family from the general-purpose `bf-card` primitive.
+ *
+ * Vanilla -> BF rhythm mapping (Vanilla's spacing unit is 0.5rem):
+ * - 16px content padding/gap -> `--bf-space-2`.
+ * - 8px footer/image spacing -> `--bf-space-1`.
+ * - 32px wrapper separation -> `--bf-space-4`.
+ * - 380px vertical minimum -> 48 BF baselines (384px in editorial), avoiding
+ *   Vanilla's half-baseline ending while retaining its occupied silhouette.
+ * - 192px horizontal/text minimum -> 24 BF baselines.
+ * - 352px eight-column minimum -> 44 BF baselines.
+ * - 284px horizontal media width -> 36 BF baselines (288px in editorial).
+ *
+ * The root card establishes a named query container. Only descendants change
+ * inside container queries; this avoids the invalid query-the-container-itself
+ * pattern. Global media queries are retained only where Vanilla's behaviour is
+ * genuinely viewport/input based (grid span, hover reveal and line clamping).
+ *
+ * The expanded click target is a pseudo-element of the one real main link,
+ * rather than a duplicate aria-hidden overlay anchor. Nested controls are
+ * raised above it, so every distinct action stays pointer- and keyboard-
+ * reachable.
+ */
+export declare function contentCardCss(): string;