@wpmoo/ui 1.0.0-rc.3 → 1.0.0-rc.4

package/scss/components/_button.scss

@@ -0,0 +1,228 @@
+// Bootstrap owns button geometry through its --bs-btn-* consumption values.
+// Moo adds only icon composition and the missing xs/icon-only variants.
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  gap: $icon-link-gap;
+  white-space: nowrap;
+}
+
+.btn:not(.btn-icon, .btn-icon-xs, .btn-icon-sm, .btn-icon-lg):has(> [data-icon="inline-start"]) {
+  padding-inline-start: $spacer * 0.5;
+}
+
+.btn:not(.btn-icon, .btn-icon-xs, .btn-icon-sm, .btn-icon-lg):has(> [data-icon="inline-end"]) {
+  padding-inline-end: $spacer * 0.5;
+}
+
+button.btn:not(:disabled),
+input.btn:not(:disabled),
+label.btn {
+  cursor: default;
+}
+
+// Bootstrap provides sm/lg; xs and icon-only variants reuse the same
+// consumption properties instead of introducing a parallel size system.
+.btn-xs,
+.btn-icon-xs {
+  --bs-btn-padding-y: #{$spacer * 0.1875};
+  --bs-btn-padding-x: #{$spacer * 0.5};
+  --bs-btn-font-size: #{$spacer * 0.75};
+  --bs-btn-line-height: #{$spacer};
+  --bs-btn-border-radius: var(--bs-border-radius-sm);
+  gap: #{$spacer * 0.25};
+}
+
+.btn-sm,
+.btn-icon-sm,
+.btn-group-sm > .btn,
+.btn-group-sm > .btn-group > .btn {
+  --bs-btn-padding-y: #{$btn-padding-y-sm};
+  --bs-btn-padding-x: #{$btn-padding-x-sm};
+  --bs-btn-font-size: #{$btn-font-size-sm};
+  --bs-btn-line-height: #{$spacer};
+  --bs-btn-border-radius: var(--bs-border-radius-sm);
+  gap: #{$spacer * 0.25};
+}
+
+.btn-lg,
+.btn-icon-lg,
+.btn-group-lg > .btn,
+.btn-group-lg > .btn-group > .btn {
+  --bs-btn-padding-y: #{$btn-padding-y-lg};
+  --bs-btn-padding-x: #{$btn-padding-x-lg};
+  --bs-btn-font-size: #{$btn-font-size-lg};
+  --bs-btn-line-height: #{$btn-line-height};
+  --bs-btn-border-radius: var(--bs-border-radius-lg);
+}
+
+:is(.btn-xs, .btn-sm, .btn-group-sm > .btn, .btn-group-sm > .btn-group > .btn):not(.btn-icon, .btn-icon-xs, .btn-icon-sm, .btn-icon-lg):has(> [data-icon="inline-start"]) {
+  padding-inline-start: $icon-link-gap;
+}
+
+:is(.btn-xs, .btn-sm, .btn-group-sm > .btn, .btn-group-sm > .btn-group > .btn):not(.btn-icon, .btn-icon-xs, .btn-icon-sm, .btn-icon-lg):has(> [data-icon="inline-end"]) {
+  padding-inline-end: $icon-link-gap;
+}
+
+// Icon-only buttons become squares whose side equals the token-driven
+// button height (line-height + 2*padding-y + 2*border), so they always match
+// the height of sibling text buttons. --bs-btn-line-height is a length in
+// Moo, making this calc valid. No hard-coded dimensions.
+.btn-icon {
+  // Icon-only buttons become squares whose side equals the token-driven
+  // button height (line-height + 2*padding-y + 2*border), so they always
+  // match the height of sibling text buttons. The default button exposes no
+  // --bs-btn-line-height / --bs-btn-padding-y custom properties (Bootstrap
+  // compiles those from Sass), so only the default size declares them here;
+  // xs/sm/lg already set their own values in their own blocks above and
+  // must not be overridden back to the default by this shared rule.
+  --bs-btn-line-height: #{$btn-line-height};
+  --bs-btn-padding-y: #{$btn-padding-y};
+}
+
+.btn-icon,
+.btn-icon-xs,
+.btn-icon-sm,
+.btn-icon-lg {
+  // The side is computed once into --moo-btn-icon-size and consumed on both
+  // axes (and by .btn-group-vertical) so the two cannot diverge.
+  --moo-btn-icon-size: #{$moo-btn-icon-size};
+  padding-inline: 0;
+  inline-size: var(--moo-btn-icon-size);
+  block-size: var(--moo-btn-icon-size);
+}
+
+:is(.btn-icon, .btn-icon-xs, .btn-icon-sm, .btn-icon-lg)::after {
+  display: none;
+}
+
+.btn > [data-icon="inline-start"],
+.btn > [data-icon="inline-end"] {
+  width: $spacer;
+  height: $spacer;
+  flex: 0 0 auto;
+}
+
+:is(.btn-xs, .btn-icon-xs) > [data-icon] {
+  width: $spacer * 0.75;
+  height: $spacer * 0.75;
+}
+
+:is(.btn-sm, .btn-icon-sm, .btn-group-sm > .btn, .btn-group-sm > .btn-group > .btn) > [data-icon] {
+  width: $font-size-base;
+  height: $font-size-base;
+}
+
+// The loading state swaps icon_start for the same loader-circle icon the
+// standalone Spinner uses; aria-busy doubles as the accessible loading
+// signal and the hook that scopes the spin to only that icon. The
+// rotation uses Bootstrap's own spinner-border keyframe in the standalone
+// build and the namespaced Moo keyframe in the scoped core build.
+.btn[aria-busy="true"] > [data-icon="inline-start"] {
+  animation: $moo-spinner-animation-name $spinner-animation-speed linear infinite;
+}
+
+.btn:disabled,
+.btn.disabled,
+.btn[aria-disabled="true"] {
+  pointer-events: none;
+  opacity: var(--moo-disabled-control-opacity);
+}
+
+.btn-check:disabled + .btn {
+  pointer-events: none;
+  opacity: var(--moo-disabled-control-opacity);
+}
+
+// Replaces Bootstrap's native inset active shadow disabled in
+// _bootstrap_overrides.scss; 0.5px keeps the press visible without shifting
+// adjacent inline controls.
+.btn:not(:disabled):not(.disabled):not([aria-disabled="true"]):active {
+  transform: translateY($moo-control-active-translate-y);
+}
+
+// Bootstrap consumes these properties; owned variants supply only exceptions.
+:is(.btn-primary, .btn-secondary, .btn-outline-secondary, .btn-outline-primary, .btn-ghost, .btn-danger) {
+  --bs-btn-border-color: var(--bs-btn-bg);
+  --bs-btn-hover-color: var(--bs-btn-color);
+  --bs-btn-hover-border-color: var(--bs-btn-hover-bg);
+  --bs-btn-active-color: var(--bs-btn-hover-color);
+  --bs-btn-active-bg: var(--bs-btn-hover-bg);
+  --bs-btn-active-border-color: var(--bs-btn-active-bg);
+  --bs-btn-disabled-color: var(--bs-btn-color);
+  --bs-btn-disabled-border-color: var(--bs-btn-border-color);
+}
+
+:is(.btn-primary, .btn-secondary, .btn-danger) {
+  --bs-btn-disabled-bg: var(--bs-btn-bg);
+}
+
+:is(.btn-outline-secondary, .btn-outline-primary, .btn-ghost) {
+  --bs-btn-disabled-bg: transparent;
+}
+
+.btn-primary {
+  --bs-btn-color: var(--moo-primary-foreground);
+  --bs-btn-bg: var(--moo-primary);
+  --bs-btn-hover-bg: color-mix(in srgb, var(--moo-primary) 80%, var(--moo-surface));
+  --bs-btn-active-bg: color-mix(in srgb, var(--moo-primary) 72%, var(--moo-surface));
+}
+
+.btn-secondary {
+  --bs-btn-color: var(--moo-foreground);
+  // The reference's secondary button is the surface color (white in light)
+  // with a hairline border (bg-background + border-border), not a tinted
+  // fill; the shared muted surface stays the hover/active step.
+  --bs-btn-bg: var(--moo-surface);
+  --bs-btn-border-color: var(--moo-border);
+  --bs-btn-hover-bg: color-mix(in srgb, var(--moo-muted-surface) 95%, var(--moo-foreground));
+  --bs-btn-hover-border-color: color-mix(in srgb, var(--moo-border) 90%, var(--moo-foreground));
+  --bs-btn-active-bg: color-mix(in srgb, var(--moo-muted-surface) 88%, var(--moo-foreground));
+  --bs-btn-active-border-color: color-mix(in srgb, var(--moo-border) 82%, var(--moo-foreground));
+}
+
+.btn-outline-secondary {
+  --bs-btn-color: var(--moo-foreground);
+  --bs-btn-border-color: var(--moo-border);
+  --bs-btn-hover-bg: var(--moo-muted-surface);
+  --bs-btn-hover-border-color: var(--moo-border);
+  --bs-btn-active-border-color: var(--moo-border);
+}
+
+.btn-outline-primary {
+  --bs-btn-color: var(--moo-foreground);
+  --bs-btn-border-color: var(--moo-foreground);
+  --bs-btn-hover-color: var(--moo-surface);
+  --bs-btn-hover-bg: var(--moo-foreground);
+}
+
+.btn-ghost {
+  --bs-btn-color: var(--moo-foreground);
+  --bs-btn-bg: transparent;
+  --bs-btn-hover-bg: var(--moo-muted-surface);
+  --bs-btn-hover-border-color: transparent;
+  --bs-btn-active-bg: var(--bs-btn-hover-bg);
+  --bs-btn-active-color: var(--bs-btn-color);
+  --bs-btn-active-border-color: transparent;
+  --bs-btn-disabled-color: var(--moo-disabled-foreground);
+}
+
+.btn-danger {
+  --bs-btn-color: var(--moo-destructive-foreground);
+  --bs-btn-bg: var(--moo-destructive-surface);
+  --bs-btn-border-color: transparent;
+  --bs-btn-hover-color: var(--moo-destructive-foreground);
+  --bs-btn-hover-bg: var(--moo-destructive-surface-hover);
+  --bs-btn-hover-border-color: transparent;
+  --bs-btn-active-color: var(--moo-destructive-foreground);
+  --bs-btn-active-bg: var(--moo-destructive-surface-hover);
+  --bs-btn-active-border-color: transparent;
+}
+
+.btn-link {
+  --bs-btn-color: var(--moo-foreground);
+  --bs-btn-hover-color: var(--moo-muted-foreground);
+  text-underline-offset: $spacer * 0.25;
+}

package/scss/components/_button_group.scss

@@ -0,0 +1,51 @@
+// Button Group adds no visual tokens of its own: Bootstrap's extend chain
+// (group sizes extend the button sizes) plus the grouped size selectors in
+// the button partial deliver one shared scale. Only RTL geometry lives here:
+// joined borders keep LTR order while labels render bidi-correctly.
+[dir="rtl"] .btn-group,
+[dir="rtl"] .btn-toolbar {
+  direction: ltr;
+}
+
+[dir="rtl"] .btn-group > .btn,
+[dir="rtl"] .btn-toolbar > .btn {
+  unicode-bidi: plaintext;
+}
+
+// Icon buttons in button groups should stay square, not stretch to fill
+// the group width (Bootstrap's flex: 1 1 auto makes them rectangular).
+.btn-group > .btn-icon,
+.btn-group > .btn-icon-xs,
+.btn-group > .btn-icon-sm,
+.btn-group > .btn-icon-lg,
+.btn-group-vertical > .btn-icon,
+.btn-group-vertical > .btn-icon-xs,
+.btn-group-vertical > .btn-icon-sm,
+.btn-group-vertical > .btn-icon-lg {
+  flex: 0 0 auto;
+}
+
+// Bootstrap's .btn-group-vertical > .btn { width: 100% } would stretch icon
+// buttons; re-assert the token-derived square so vertical rails stay square.
+.btn-group-vertical > .btn-icon,
+.btn-group-vertical > .btn-icon-xs,
+.btn-group-vertical > .btn-icon-sm,
+.btn-group-vertical > .btn-icon-lg {
+  width: var(--moo-btn-icon-size);
+}
+
+// Select inside a button group: compact and content-sized, matching the
+// compact currency selector pattern. Bootstrap's flex defaults would shrink
+// it below its longest option; flex: 0 0 auto keeps the intrinsic (content)
+// width. The min-width floor derives from Bootstrap's form-select caret-space
+// token, not magic numbers. Focus keeps Bootstrap's default visible treatment.
+//
+// The input-group override matches Bootstrap's own `.input-group > .form-select`
+// specificity (0,2,0) which would otherwise stretch the select with flex: 1 1 auto.
+.btn-group-select,
+.input-group > .btn-group-select {
+  flex: 0 0 auto;
+  width: auto;
+  min-width: calc(#{$form-select-indicator-padding} + #{$spacer});
+  padding-inline-end: $form-select-indicator-padding;
+}

package/scss/components/_card.scss

@@ -0,0 +1,142 @@
+// Card: bridge Bootstrap's consumption variables to shared primitives
+// (UI-wide shadow and radius) and runtime theme tokens, then add the minimal
+// structure that gives Bootstrap's native card the reference silhouette.
+// The reference card is a rounded surface with a hairline ring and a
+// theme-adaptive muted footer tint; its geometry is the source of the values
+// chosen here (verified against the live reference page).
+.card {
+  --bs-card-bg: color-mix(in srgb, var(--bs-secondary-bg) #{$moo-card-bg-mix}, var(--bs-body-bg));
+  --bs-card-color: var(--moo-foreground);
+  --bs-card-border-color: color-mix(in srgb, var(--bs-body-color) #{$moo-card-border-mix}, #{$moo-card-border-mix-base});
+  // The reference uses a 14px corner; Bootstrap's shared radius-xl is the
+  // closest token and wins the delta (12px here) per the token-first rule.
+  --bs-card-border-radius: var(--bs-border-radius-xl);
+  --bs-card-inner-border-radius: calc(var(--bs-card-border-radius) - var(--bs-card-border-width));
+  --bs-card-box-shadow: var(--bs-box-shadow-sm);
+  --bs-card-cap-bg: transparent;
+  --bs-card-cap-color: var(--moo-foreground);
+  --bs-card-title-color: var(--moo-foreground);
+  --bs-card-subtitle-color: var(--moo-muted-foreground);
+  --moo-card-footer-bg: #{$moo-card-footer-bg};
+  // The reference card lets consumers retune section rhythm and inset in one
+  // place; the default matches the 16px step Bootstrap's own spacer scale
+  // already carries. Declared on the selector that consumes it, like
+  // Bootstrap's own component custom properties.
+  --moo-card-spacing: #{$moo-card-spacing};
+
+  // One vertical rhythm owned by the card; sections add only inline padding.
+  gap: var(--moo-card-spacing);
+  padding-block: var(--moo-card-spacing);
+
+  // A footer strip owns its own bottom padding; with one present the card
+  // drops its trailing rhythm so the muted strip touches the card edge
+  // (mirrors the reference's has-data-[slot=card-footer]:pb-0).
+  &:has(.card-footer) {
+    padding-block-end: 0;
+  }
+
+  // A leading image frame owns the top edge; with one present the card drops
+  // its leading rhythm so the image touches the card corner (mirrors the
+  // reference's has-[>img:first-child]:pt-0).
+  &:has(> .card-image) {
+    padding-block-start: 0;
+  }
+
+  // Keep the Bootstrap border box visible with a soft tokenized color, then
+  // let the shared shadow token supply the subtle card depth.
+  border: var(--bs-card-border-width) solid var(--bs-card-border-color);
+  box-shadow: var(--bs-card-box-shadow);
+
+  &[data-bs-theme="dark"],
+  :where([data-bs-theme="dark"]) &:not([data-bs-theme="light"]):not([data-bs-theme="light"] *) {
+    --bs-card-bg: color-mix(in srgb, var(--bs-secondary-bg) #{$moo-card-bg-mix-dark}, var(--bs-body-bg));
+    --moo-card-footer-bg: #{$moo-card-footer-bg-dark};
+  }
+}
+
+.card--sm {
+  --moo-card-spacing: #{$moo-card-spacing-sm};
+}
+
+// The reference header lays title/description in a grid; an optional action
+// occupies the trailing auto column on the same row as the title.
+.card-header {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  column-gap: var(--moo-card-spacing);
+  align-items: flex-start;
+  border-bottom: 0;
+}
+
+.card-header__text {
+  display: flex;
+  flex-direction: column;
+  gap: $spacer * 0.25;
+  min-width: 0;
+  grid-column: 1;
+}
+
+.card-action {
+  grid-column: 2;
+  grid-row: 1;
+}
+
+.card-header,
+.card-body,
+.card-footer {
+  padding-block: 0;
+}
+
+.card-header,
+.card-body {
+  padding-inline: var(--moo-card-spacing);
+}
+
+// Use a separately mixed footer surface so tuning the main card fill does not
+// collapse the footer contrast.
+.card-footer {
+  display: flex;
+  align-items: center;
+  gap: $spacer * 0.5;
+  padding: var(--moo-card-spacing);
+  border-top: var(--bs-card-border-width) solid var(--bs-card-border-color);
+  background-color: var(--moo-card-footer-bg);
+}
+
+.card-img-top {
+  // The reference clips a leading image to the card's top corners; the shared
+  // radius keeps it aligned with the rounded surface.
+  border-top-left-radius: var(--bs-card-border-radius);
+  border-top-right-radius: var(--bs-card-border-radius);
+}
+
+// A leading image sits in a 16:9 frame; the frame owns a theme-adaptive
+// surface so a non-cover image never leaves an unstyled gap.
+.card-image {
+  aspect-ratio: 16 / 9;
+  overflow: hidden;
+  border-top-left-radius: var(--bs-card-border-radius);
+  border-top-right-radius: var(--bs-card-border-radius);
+  background-color: var(--moo-muted-surface);
+}
+
+.card-image .card-img-top {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 0;
+}
+
+.card-title {
+  margin-bottom: 0;
+  font-size: $card-title-font-size;
+  font-weight: $headings-font-weight;
+  line-height: $line-height-sm;
+  letter-spacing: $card-title-letter-spacing;
+}
+
+.card-subtitle {
+  margin-top: 0;
+  font-size: $font-size-base;
+  color: var(--moo-muted-foreground);
+}

package/scss/components/_checkbox.scss

@@ -0,0 +1,115 @@
+// Bootstrap's margin-top (0.25rem = 4px) was computed for the old 1em
+// checkbox (14px at the catalog's 0.875rem body font). The override to
+// 1rem (16px) shifted the geometric center by 1px; tightening the top
+// margin to 0.125rem (2px) re-centres the 16px control within the
+// .form-check min-height so it aligns with the label text.
+.form-check-input {
+  margin-top: 0.125rem;
+}
+
+// Bootstrap's checkbox/radio glyphs are SVG data URIs whose stroke/fill color
+// is fixed at compile time. Draw the checkbox mark as an overlay so it follows
+// the runtime primary foreground when Theme color changes.
+.form-check-input[type="checkbox"]:checked:not([role="switch"]) {
+  --#{$prefix}form-check-bg-image: none;
+
+  position: relative;
+  overflow: hidden;
+}
+
+.form-check-input[type="checkbox"]:checked:not([role="switch"])::after {
+  position: absolute;
+  top: 45%;
+  left: 50%;
+  width: 0.32em;
+  height: 0.58em;
+  border-color: var(--moo-primary-foreground);
+  border-style: solid;
+  border-width: $moo-form-checkmark-border-width;
+  content: "";
+  transform: translate(-50%, -55%) rotate(45deg);
+  transform-origin: center;
+}
+
+.form-check-input[type="checkbox"]:indeterminate:not([role="switch"]) {
+  --#{$prefix}form-check-bg-image: linear-gradient(var(--moo-primary-foreground), var(--moo-primary-foreground));
+
+  background-size: $moo-form-check-indeterminate-bg-size;
+  background-position: $moo-form-check-indeterminate-bg-position;
+}
+
+.form-check-input[type="radio"]:checked {
+  --#{$prefix}form-check-bg-image: radial-gradient(circle at center, var(--moo-primary-foreground) 0 34%, transparent 36%);
+}
+
+// Covers checkbox, switch (also type="checkbox"), and radio alike so
+// mouse-triggered focus never shows a ring on any form-check control,
+// matching Input/Textarea/Select's own :focus:not(:focus-visible) rule
+// in foundations/_focus.scss. Invalid checkboxes are excluded — their
+// persistent validation ring is restored by the rules at the bottom.
+.form-check-input:is([type="checkbox"], [type="radio"]):not(.is-invalid):focus:active,
+.form-check-input:is([type="checkbox"], [type="radio"]):not(.is-invalid):focus:not(:focus-visible) {
+  border-color: var(--bs-border-color);
+  box-shadow: none;
+}
+
+.form-check-input:is([type="checkbox"], [type="radio"]):checked:not(.is-invalid):focus:active,
+.form-check-input:is([type="checkbox"], [type="radio"]):checked:not(.is-invalid):focus:not(:focus-visible) {
+  border-color: $form-check-input-checked-border-color;
+}
+
+.form-check-input[type="checkbox"]:not(.is-invalid):indeterminate:focus:active,
+.form-check-input[type="checkbox"]:not(.is-invalid):indeterminate:focus:not(:focus-visible) {
+  border-color: $form-check-input-indeterminate-border-color;
+}
+
+// Invalid ("destructive") checkboxes are an exception to the mouse-click
+// focus-ring suppression above. The validation ring stays visible at all
+// times — not just on :focus — so the error state is never silently
+// dismissed. This matches the reference's aria-invalid ring pattern and
+// mirrors the destructive ring that foundations/_focus.scss already
+// paints on .form-control.is-invalid and .form-select.is-invalid. Border
+// color is left to Bootstrap's own native .is-invalid rule (compiled from
+// vendor/bootstrap/scss/mixins/_forms.scss's form-validation-state(),
+// already themed to --bs-form-invalid-border-color); only the ring is
+// added on top of it here.
+.form-check-input.is-invalid {
+  box-shadow: 0 0 0 #{$moo-form-focus-ring-width} var(--moo-form-invalid-ring-color);
+}
+
+// The focus-suppression rules above have specificity (0,4,0) which
+// beats .is-invalid's (0,2,0). These :focus variants sit after the
+// suppression block and carry (0,5,0), so the destructive ring stays
+// visible during mouse click and programmatic focus alike.
+.form-check-input.is-invalid:focus:active,
+.form-check-input.is-invalid:focus:not(:focus-visible) {
+  box-shadow: 0 0 0 #{$moo-form-focus-ring-width} var(--moo-form-invalid-ring-color);
+}
+
+.form-check-input:is([type="checkbox"], [type="radio"]).is-invalid:checked:focus:active,
+.form-check-input:is([type="checkbox"], [type="radio"]).is-invalid:checked:focus:not(:focus-visible) {
+  box-shadow: 0 0 0 #{$moo-form-focus-ring-width} var(--moo-form-invalid-ring-color);
+}
+
+.form-check-input[type="checkbox"].is-invalid:indeterminate:focus:active,
+.form-check-input[type="checkbox"].is-invalid:indeterminate:focus:not(:focus-visible) {
+  box-shadow: 0 0 0 #{$moo-form-focus-ring-width} var(--moo-form-invalid-ring-color);
+}
+
+// The reference keeps a checked control's own border and fill at the
+// normal checked color even inside an invalid group -- only unchecked
+// siblings' solid border and the ring (kept above) flag the error, so the
+// user's actual selection never reads as "wrong" by itself. Overrides two
+// separate Bootstrap native rules: the base .is-invalid border-color
+// above (which does not itself distinguish :checked) and .is-invalid:
+// checked's own background-color: var(--bs-form-invalid-color) (also
+// compiled from form-validation-state(), which paints a checked+invalid
+// control's fill destructive-red by default). Repeats the :focus variants
+// verbatim so this wins the same specificity tie by source order, focused
+// or not.
+.form-check-input:is([type="checkbox"], [type="radio"]):not([role="switch"]).is-invalid:checked,
+.form-check-input:is([type="checkbox"], [type="radio"]):not([role="switch"]).is-invalid:checked:focus:active,
+.form-check-input:is([type="checkbox"], [type="radio"]):not([role="switch"]).is-invalid:checked:focus:not(:focus-visible) {
+  border-color: var(--moo-primary);
+  background-color: var(--moo-primary);
+}

package/scss/components/_close_button.scss

@@ -0,0 +1,59 @@
+.btn-close {
+  --bs-btn-close-color: var(--moo-foreground);
+  --bs-btn-hover-color: var(--bs-btn-close-color);
+  --bs-btn-hover-bg: var(--moo-muted-surface);
+  --bs-btn-hover-border-color: #{$moo-close-button-border-color};
+  // Replace Bootstrap's filled-path X with a Lucide-style stroke-based icon
+  // (thinner, more delicate — matches the reference's feel).
+  --bs-btn-close-bg: #{escape-svg($moo-close-button-bg-image)};
+
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  border-width: var(--bs-border-width);
+  border-style: var(--bs-border-style);
+  border-color: $moo-close-button-border-color;
+  border-radius: var(--bs-border-radius-xl);
+  color: var(--bs-btn-close-color);
+  background-image: none;
+  transition: $btn-transition;
+}
+
+.btn-close::before {
+  width: $btn-close-width;
+  height: $btn-close-height;
+  content: "";
+  background-color: currentColor;
+  -webkit-mask: var(--bs-btn-close-bg) center / contain no-repeat;
+  mask: var(--bs-btn-close-bg) center / contain no-repeat;
+}
+
+// Bootstrap's dark rule filters the whole element to recolor its background
+// image. The glyph above uses currentColor through a mask, so filtering would
+// incorrectly invert the token-driven hover surface as well.
+[data-bs-theme="dark"] .btn-close {
+  filter: none;
+}
+
+.btn-close:hover {
+  border-color: var(--bs-btn-hover-border-color);
+  color: var(--bs-btn-hover-color);
+  background-color: var(--bs-btn-hover-bg);
+}
+
+.btn-close:focus-visible {
+  border-color: var(--moo-ring);
+  color: var(--bs-btn-hover-color);
+  background-color: var(--bs-btn-hover-bg);
+}
+
+.btn-close:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
+.btn-close:disabled,
+.btn-close.disabled {
+  pointer-events: none;
+  opacity: var(--moo-disabled-control-opacity);
+}

package/scss/components/_collapsible.scss

@@ -0,0 +1,43 @@
+.collapsible {
+  display: flex;
+  flex-direction: column;
+  gap: $spacer * 0.5;
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+}
+
+.collapsible-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-inline: $spacer * 0.5;
+  gap: $spacer * 0.5;
+}
+
+.collapsible-title {
+  margin-bottom: 0;
+  font-size: $font-size-sm;
+  font-weight: $font-weight-medium;
+  color: var(--moo-foreground);
+}
+
+.collapsible .btn[data-bs-toggle='collapse'] {
+  color: var(--moo-muted-foreground);
+  line-height: 1;
+}
+
+.collapsible .btn[data-bs-toggle='collapse'] [data-icon] {
+  width: $font-size-base;
+  height: $font-size-base;
+}
+
+
+.collapsible-content {
+  padding: $spacer * 0.5 $spacer * 0.75;
+  border: var(--bs-border-width) solid var(--bs-border-color);
+  border-radius: var(--bs-border-radius);
+  font-size: $font-size-sm;
+  color: var(--moo-muted-foreground);
+  width: 100%;
+}