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

package/scss/components/_slider.scss

@@ -0,0 +1,214 @@
+$slider-thumb-size: $form-range-thumb-width * 0.75;
+$slider-thumb-margin-top: ($progress-height - $slider-thumb-size) * 0.5;
+
+.slider {
+  display: grid;
+  gap: $form-text-margin-top;
+  width: 100%;
+}
+
+.slider-track {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: $form-range-track-width;
+  height: $slider-thumb-size;
+  cursor: $form-range-track-cursor;
+  touch-action: none;
+}
+
+.slider-track::before,
+.slider-range {
+  position: absolute;
+  inset-block-start: 50%;
+  height: $progress-height;
+  border-radius: var(--bs-border-radius-pill);
+  transform: translateY(-50%);
+  pointer-events: none;
+}
+
+.slider-track::before {
+  content: "";
+  inset-inline: 0;
+  background-color: $form-range-track-bg;
+  box-shadow: var(--bs-box-shadow-inset);
+}
+
+.slider-range {
+  inset-inline-start: var(--moo-slider-start, 0%);
+  inset-inline-end: calc(100% - var(--moo-slider-end, 0%));
+  background-color: var(--moo-primary);
+}
+
+.slider-input {
+  position: absolute;
+  inset: 0;
+  margin: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+
+.slider-input::-webkit-slider-runnable-track {
+  height: $progress-height;
+  background-color: transparent;
+  box-shadow: none;
+}
+
+.slider-input::-moz-range-track {
+  height: $progress-height;
+  background-color: transparent;
+  box-shadow: none;
+}
+
+.slider-input::-webkit-slider-thumb {
+  position: relative;
+  z-index: 1;
+  width: $slider-thumb-size;
+  height: $slider-thumb-size;
+  margin-top: $slider-thumb-margin-top;
+  background-color: var(--bs-body-bg);
+  border-width: var(--bs-border-width);
+  border-style: solid;
+  border-color: var(--moo-primary);
+  box-shadow: var(--bs-box-shadow-sm);
+  pointer-events: auto;
+}
+
+.slider-input::-moz-range-thumb {
+  position: relative;
+  z-index: 1;
+  width: $slider-thumb-size;
+  height: $slider-thumb-size;
+  background-color: var(--bs-body-bg);
+  border-width: var(--bs-border-width);
+  border-style: solid;
+  border-color: var(--moo-primary);
+  box-shadow: var(--bs-box-shadow-sm);
+  pointer-events: auto;
+}
+
+.slider-input::-webkit-slider-thumb:active {
+  background-color: var(--bs-body-bg);
+  border-color: var(--moo-primary);
+}
+
+.slider-input::-moz-range-thumb:active {
+  background-color: var(--bs-body-bg);
+  border-color: var(--moo-primary);
+}
+
+.slider-input:focus-visible::-webkit-slider-thumb {
+  box-shadow: 0 0 0 #{$moo-form-focus-ring-width} color-mix(in srgb, #{$moo-form-focus-ring-color} 50%, transparent);
+}
+
+.slider-input:focus-visible::-moz-range-thumb {
+  box-shadow: 0 0 0 #{$moo-form-focus-ring-width} color-mix(in srgb, #{$moo-form-focus-ring-color} 50%, transparent);
+}
+
+.slider[data-slider-dragging] .slider-input::-webkit-slider-thumb {
+  box-shadow: 0 0 0 #{$moo-form-focus-ring-width} color-mix(in srgb, #{$moo-form-focus-ring-color} 50%, transparent);
+}
+
+.slider[data-slider-dragging] .slider-input::-moz-range-thumb {
+  box-shadow: 0 0 0 #{$moo-form-focus-ring-width} color-mix(in srgb, #{$moo-form-focus-ring-color} 50%, transparent);
+}
+
+// Safari can keep pointer-driven range focus out of :focus-visible, while
+// Bootstrap's native .form-range:focus thumb halo still applies.
+.slider[data-slider-pointer-focus]:not([data-slider-dragging]) .slider-input:focus::-webkit-slider-thumb {
+  box-shadow: var(--bs-box-shadow-sm);
+}
+
+.slider[data-slider-pointer-focus]:not([data-slider-dragging]) .slider-input:focus::-moz-range-thumb {
+  box-shadow: var(--bs-box-shadow-sm);
+}
+
+.slider-input:disabled {
+  opacity: 1;
+}
+
+.slider-input:disabled::-webkit-slider-thumb {
+  background-color: var(--moo-muted-surface);
+  border-color: var(--moo-disabled-foreground);
+  box-shadow: none;
+  cursor: default;
+}
+
+.slider-input:disabled::-moz-range-thumb {
+  background-color: var(--moo-muted-surface);
+  border-color: var(--moo-disabled-foreground);
+  box-shadow: none;
+  cursor: default;
+}
+
+.slider-input:disabled:focus-visible::-webkit-slider-thumb,
+.slider[data-slider-dragging] .slider-input:disabled::-webkit-slider-thumb,
+.slider[data-slider-pointer-focus] .slider-input:disabled:focus-visible::-webkit-slider-thumb {
+  background-color: var(--moo-muted-surface);
+  border-color: var(--moo-disabled-foreground);
+  box-shadow: none;
+}
+
+.slider-input:disabled:focus-visible::-moz-range-thumb,
+.slider[data-slider-dragging] .slider-input:disabled::-moz-range-thumb,
+.slider[data-slider-pointer-focus] .slider-input:disabled:focus-visible::-moz-range-thumb {
+  background-color: var(--moo-muted-surface);
+  border-color: var(--moo-disabled-foreground);
+  box-shadow: none;
+}
+
+.slider:has(.slider-input:disabled) .slider-track {
+  cursor: default;
+}
+
+.slider:has(.slider-input:disabled) .slider-range {
+  background-color: var(--moo-disabled-foreground);
+}
+
+.slider--range .slider-input--upper {
+  z-index: 2;
+}
+
+.slider--vertical {
+  width: max-content;
+}
+
+.slider--vertical [data-slider-output] {
+  display: inline-block;
+  min-width: 3ch;
+  text-align: end;
+  font-variant-numeric: tabular-nums;
+}
+
+.slider--vertical .slider-track {
+  justify-content: center;
+  justify-self: center;
+  width: $slider-thumb-size;
+  height: $input-height * 4;
+}
+
+.slider--vertical .slider-track::before {
+  inset-block: 0;
+  inset-inline: auto;
+  width: $progress-height;
+  height: auto;
+  transform: none;
+}
+
+.slider--vertical .slider-range {
+  inset-block-start: calc(100% - var(--moo-slider-end, 0%));
+  inset-block-end: var(--moo-slider-start, 0%);
+  inset-inline-start: 50%;
+  inset-inline-end: auto;
+  width: $progress-height;
+  height: auto;
+  transform: translateX(-50%);
+}
+
+.slider--vertical .slider-input {
+  width: 100%;
+  height: 100%;
+  writing-mode: vertical-lr;
+  direction: rtl;
+}

package/scss/components/_spinner.scss

@@ -0,0 +1,17 @@
+// The design reference's Spinner is the Lucide loader-circle icon spun with
+// CSS, not Bootstrap's thicker spinner-border ring — render_icon already
+// emits the same stroke-width and line-cap Lucide markup the reference
+// uses, so only sizing
+// and rotation are needed here. The animation name is supplied by the active
+// build entry: Bootstrap's spinner-border for standalone, namespaced Moo for
+// the scoped core.
+.spinner [data-icon] {
+  width: $spacer;
+  height: $spacer;
+  animation: $moo-spinner-animation-name $spinner-animation-speed linear infinite;
+}
+
+.spinner-sm [data-icon] {
+  width: $spacer * 0.75;
+  height: $spacer * 0.75;
+}

package/scss/components/_switch.scss

@@ -0,0 +1,25 @@
+// Bootstrap's .form-switch only overrides width; height still comes from
+// the shared $form-check-input-width (also used by Checkbox and Radio
+// Group), so matching the design reference's taller track needs an
+// explicit height here instead of a shared Bootstrap variable.
+.form-switch .form-check-input {
+  height: $moo-switch-height;
+}
+
+:where([data-bs-theme="dark"]) .form-switch .form-check-input:checked {
+  --#{$prefix}form-switch-bg: #{escape-svg($moo-switch-checked-bg-image-dark)};
+
+  background-color: var(--moo-primary);
+  border-color: var(--moo-primary);
+  filter: none;
+}
+
+.form-switch .form-check-input:focus:active:not(:checked),
+.form-switch .form-check-input:focus:not(:focus-visible):not(:checked) {
+  --#{$prefix}form-switch-bg: #{escape-svg($form-switch-bg-image)};
+}
+
+:where([data-bs-theme="dark"]) .form-switch .form-check-input:focus:active:not(:checked),
+:where([data-bs-theme="dark"]) .form-switch .form-check-input:focus:not(:focus-visible):not(:checked) {
+  --#{$prefix}form-switch-bg: #{escape-svg($form-switch-bg-image-dark)};
+}

package/scss/components/_table.scss

@@ -0,0 +1,7 @@
+.table-responsive:not(.scroll-fade-x):has(.table-row-actions > [aria-expanded="true"]) {
+  overflow: visible;
+}
+
+.table-row-actions:has(> [aria-expanded="true"]) {
+  z-index: $zindex-dropdown;
+}

package/scss/components/_tabs.scss

@@ -0,0 +1,139 @@
+// The reference TabsList is a segmented control: a muted rounded track with an
+// inset, shadowed pill marking the active tab. Bootstrap's pills nav has
+// no shared track and colors the active pill with $primary directly, so
+// this styling is scoped to the tabs-list wrapper instead of the shared
+// pills class — Navigation's own pills variant already owns that class
+// and must keep its plain Bootstrap look.
+.tabs-list {
+  display: inline-flex;
+  gap: $moo-tabs-list-gap;
+  padding: $moo-tabs-list-padding;
+  background-color: var(--moo-muted-surface);
+  border-radius: var(--bs-border-radius-lg);
+}
+
+.tabs-list .nav-link {
+  padding: $moo-tabs-trigger-padding-y $moo-tabs-trigger-padding-x;
+  font-size: $font-size-base;
+  font-weight: 500;
+  // var(--moo-muted-foreground) on the track's own var(--moo-muted-surface)
+  // background measures 4.40:1 in light mode, under the 4.5:1 WCAG AA
+  // minimum for normal text (axe caught this in the certification fixture).
+  // var(--bs-secondary-color) is not a usable substitute here -- Moo UI's
+  // own theme sets --bs-secondary-color: var(--moo-muted-foreground)
+  // (scss/themes/_standalone_root.scss), so it resolves to the exact same
+  // failing color. var(--bs-secondary-text-emphasis) is a different,
+  // untouched Bootstrap token (Moo UI does not override it) built for
+  // accessible colored text against a tinted "subtle" surface -- the same
+  // category of fix the Kbd contrast defect used -- and measures 5.55:1
+  // light / 14.03:1 dark against this track's own background.
+  color: var(--bs-secondary-text-emphasis);
+  border-radius: var(--bs-border-radius);
+  cursor: default;
+  @include transition($transition-base);
+}
+
+.tabs-list .nav-link:hover {
+  color: var(--moo-foreground);
+}
+
+.tabs-list .nav-link:not(.active, .disabled):hover {
+  background-color: transparent;
+  box-shadow: none;
+}
+
+.tabs-list .nav-link:focus:not(:focus-visible) {
+  outline: 0;
+  box-shadow: none;
+}
+
+.tabs-list .nav-link.active {
+  color: var(--moo-foreground);
+  background-color: var(--moo-surface);
+  box-shadow: var(--bs-box-shadow-sm);
+}
+
+.tabs-list .nav-link.active:focus-visible {
+  border-color: var(--moo-ring);
+  outline: 0;
+  box-shadow: 0 0 0 #{$moo-form-focus-ring-width} color-mix(in srgb, #{$moo-form-focus-ring-color} 50%, transparent);
+}
+
+.tabs-list:has(.nav-link:hover) .nav-link.active:not(:hover) {
+  background-color: var(--moo-surface);
+  box-shadow: var(--bs-box-shadow-sm);
+}
+
+.tabs--vertical {
+  display: flex;
+  align-items: flex-start;
+  gap: $spacer;
+  width: 100%;
+  max-width: 100%;
+}
+
+.tabs--vertical .tabs-list {
+  flex: 0 0 auto;
+}
+
+.tabs--vertical .nav-link {
+  justify-content: flex-start;
+  text-align: start;
+}
+
+.tabs--vertical .tab-content {
+  flex: 1 1 auto;
+  min-width: 0;
+  margin-top: 0;
+}
+
+@include media-breakpoint-down(sm) {
+  .tabs--vertical {
+    flex-direction: column;
+  }
+
+  .tabs--vertical .tabs-list {
+    flex-direction: row !important;
+  }
+}
+
+.tabs-list .nav-link:disabled,
+.tabs-list .nav-link.disabled {
+  color: var(--moo-disabled-foreground);
+  opacity: var(--moo-disabled-control-opacity);
+  pointer-events: none;
+}
+
+// Bootstrap hides inactive panes with display:none, so the pane height
+// changes the moment a shorter or taller tab becomes active — the
+// surrounding page jumps to the new height on every switch. Stacking every
+// pane in the same grid cell sizes the row to the tallest pane once, so
+// switching only toggles visibility, never the container's height.
+.tab-content {
+  display: grid;
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+  margin-top: $moo-tabs-content-gap;
+}
+
+.tab-content > .tab-pane {
+  grid-area: 1 / 1;
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  // Slightly longer than Bootstrap's .15s fade so the content handoff feels
+  // intentional without adding any positional movement.
+  transition: opacity 0.16s ease, visibility 0s linear 0.16s;
+}
+
+.tab-content > .active {
+  opacity: 1;
+  visibility: visible;
+  pointer-events: auto;
+  transition-delay: 0s;
+}

package/scss/components/_textarea.scss

@@ -0,0 +1,7 @@
+textarea.form-control:not(.form-control-sm, .form-control-lg) {
+  padding: $input-btn-padding-y-lg $input-btn-padding-x;
+}
+
+textarea.form-control:disabled {
+  resize: none;
+}

package/scss/components/_toast.scss

@@ -0,0 +1,119 @@
+// Bootstrap owns Toast markup, lifecycle classes, placement utilities, and
+// autohide behavior. This partial only retunes the native surface and opts
+// an explicitly indexed bottom-end container into the catalog deck layout.
+.toast {
+  --bs-toast-border-radius: var(--bs-border-radius-lg);
+  --bs-toast-border-color: var(--moo-border);
+  --bs-toast-bg: var(--bs-body-bg);
+  --bs-toast-box-shadow: var(--bs-box-shadow-lg);
+  --bs-toast-header-bg: var(--bs-body-bg);
+  --bs-toast-padding-x: #{$spacer};
+}
+
+.toast-container {
+  z-index: var(--bs-toast-zindex, #{$zindex-toast});
+}
+
+.toast-header strong {
+  font-weight: $font-weight-medium;
+}
+
+.toast-status-icon {
+  display: inline-flex;
+  flex: 0 0 auto;
+  margin-inline-end: $moo-toast-status-icon-gap;
+  color: var(--bs-secondary-color);
+}
+
+.toast-status-icon [data-icon] {
+  width: $moo-toast-status-icon-size;
+  height: $moo-toast-status-icon-size;
+}
+
+.toast[data-toast-variant="success"] .toast-status-icon {
+  color: var(--moo-success);
+}
+
+.toast[data-toast-variant="info"] .toast-status-icon {
+  color: var(--moo-info);
+}
+
+.toast[data-toast-variant="warning"] .toast-status-icon {
+  color: var(--moo-warning);
+}
+
+.toast[data-toast-variant="destructive"] .toast-status-icon {
+  color: var(--moo-destructive);
+}
+
+.toast[data-toast-variant="loading"] .toast-status-icon [data-icon] {
+  animation: $moo-spinner-animation-name $spinner-animation-speed linear infinite;
+}
+
+.toast-container--stacked[data-toast-stack="deck"] {
+  --moo-toast-stack-gap: #{$moo-toast-stack-gap};
+  --moo-toast-stack-peek: #{$moo-toast-stack-peek};
+  --moo-toast-stack-scale-step: #{$moo-toast-stack-scale-step};
+  --moo-toast-stack-min-scale: #{$moo-toast-stack-min-scale};
+  --moo-toast-stack-enter-y: #{$moo-toast-stack-enter-y};
+}
+
+// Without runtime indexes, the container remains readable Bootstrap flow.
+.toast-container--stacked[data-toast-stack="deck"][data-toast-stack-active] {
+  bottom: 1rem !important;
+  inset-inline-end: 1rem !important;
+  height: 0;
+  max-width: calc(100vw - 2rem);
+  padding: 0 !important;
+  width: unquote("min(24rem, calc(100vw - 2rem))");
+}
+
+.toast-container--stacked[data-toast-stack="deck"][data-toast-stack-active] > .toast[data-toast-stack-index] {
+  inset-block-end: 0;
+  inset-inline-end: 0;
+  max-width: none;
+  margin-bottom: 0;
+  position: absolute;
+  width: 100%;
+  transform: translateY(var(--moo-toast-stack-collapsed-y, 0px))
+    scale(var(--moo-toast-stack-scale, 1));
+  transform-origin: bottom center;
+  z-index: var(--moo-toast-stack-z, 1);
+  transition:
+    transform $moo-toast-stack-transition-duration $moo-toast-stack-transition-timing-function,
+    opacity $moo-toast-stack-transition-duration ease,
+    height $moo-toast-stack-height-transition-duration ease;
+}
+
+.toast-container--stacked[data-toast-stack="deck"][data-toast-stack-active] > .toast[data-toast-stack-entering] {
+  transform: translateY(calc(var(--moo-toast-stack-collapsed-y, 0px) + var(--moo-toast-stack-enter-y, 150%)))
+    scale(var(--moo-toast-stack-scale, 1));
+}
+
+.toast-container--stacked[data-toast-stack="deck"][data-toast-stack-active] > .toast[data-toast-stack-limited] {
+  opacity: 0;
+  pointer-events: none;
+}
+
+.toast-container--stacked[data-toast-stack="deck"][data-toast-stack-active]:hover > .toast[data-toast-stack-index],
+.toast-container--stacked[data-toast-stack="deck"][data-toast-stack-active]:focus-within > .toast[data-toast-stack-index],
+.toast-container--stacked[data-toast-stack="deck"][data-toast-stack-active][data-toast-stack-hovering] > .toast[data-toast-stack-index] {
+  transform: translateY(var(--moo-toast-stack-expanded-y, 0px)) scale(1);
+}
+
+.toast-container--stacked[data-toast-stack="deck"][data-toast-stack-active]:hover > .toast[data-toast-stack-entering],
+.toast-container--stacked[data-toast-stack="deck"][data-toast-stack-active]:focus-within > .toast[data-toast-stack-entering],
+.toast-container--stacked[data-toast-stack="deck"][data-toast-stack-active][data-toast-stack-hovering] > .toast[data-toast-stack-entering] {
+  transform: translateY(calc(var(--moo-toast-stack-collapsed-y, 0px) + var(--moo-toast-stack-enter-y, 150%)))
+    scale(var(--moo-toast-stack-scale, 1));
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .toast[data-toast-variant="loading"] .toast-status-icon [data-icon] {
+    animation: none;
+  }
+
+  .toast-container--stacked[data-toast-stack="deck"][data-toast-stack-active] > .toast[data-toast-stack-index] {
+    transition: none;
+  }
+}

package/scss/components/_toggle_group.scss

@@ -0,0 +1,19 @@
+// Toggle Group uses Bootstrap's native .btn-check + label.btn contract, but
+// selected state should change in place instead of using the generic button
+// press nudge.
+.toggle-group > .btn:not(:disabled):not(.disabled):not([aria-disabled="true"]):active {
+  transform: none;
+}
+
+.toggle-group > .btn-check:checked + .btn {
+  --bs-btn-active-color: var(--moo-primary-foreground);
+  --bs-btn-active-bg: var(--moo-primary);
+  --bs-btn-active-border-color: var(--moo-primary);
+}
+
+.toggle-group > .btn-check:focus-visible + .btn,
+.toggle-group > .btn-check:checked:focus-visible + .btn {
+  border-color: var(--moo-ring);
+  outline: 0;
+  box-shadow: 0 0 0 #{$moo-form-focus-ring-width} color-mix(in srgb, #{$moo-form-focus-ring-color} 50%, transparent);
+}

package/scss/components/_tooltip.scss

@@ -0,0 +1,83 @@
+// Retuned against the design reference's tooltip (bg-foreground
+// text-background, px-3 py-1.5, text-xs, rounded-md, fully opaque,
+// max-w-xs): Bootstrap's own
+// defaults are narrower, tighter, and dimmed to 90% opacity. All four
+// overrides route through Bootstrap's existing custom properties, so no new
+// selectors or hardcoded colors are introduced.
+.tooltip {
+  --bs-tooltip-max-width: 20rem;
+  --bs-tooltip-padding-x: 0.75rem;
+  --bs-tooltip-padding-y: 0.375rem;
+  --bs-tooltip-font-size: 0.75rem;
+  --bs-tooltip-opacity: 1;
+  --moo-tooltip-motion-duration: #{$moo-tooltip-motion-duration};
+  --moo-tooltip-motion-easing: #{$moo-tooltip-motion-easing};
+  --moo-tooltip-motion-scale: #{$moo-tooltip-motion-scale};
+  --moo-tooltip-motion-translate: #{$moo-tooltip-motion-translate};
+  line-height: 1.333;
+}
+
+// Popper owns the wrapper transform for placement. Animate only the bubble
+// surface so the tooltip opens with the reference's subtle zoom/slide without
+// disturbing Bootstrap positioning.
+.tooltip.fade .tooltip-inner {
+  transition: transform var(--moo-tooltip-motion-duration) var(--moo-tooltip-motion-easing);
+  transform: scale(var(--moo-tooltip-motion-scale));
+  transform-origin: center;
+  will-change: transform;
+}
+
+.tooltip.show .tooltip-inner {
+  transform: translate3d(0, 0, 0) scale(1);
+}
+
+.bs-tooltip-top.fade:not(.show) .tooltip-inner,
+.bs-tooltip-auto[data-popper-placement^="top"].fade:not(.show) .tooltip-inner {
+  transform: translate3d(0, var(--moo-tooltip-motion-translate), 0) scale(var(--moo-tooltip-motion-scale));
+}
+
+.bs-tooltip-bottom.fade:not(.show) .tooltip-inner,
+.bs-tooltip-auto[data-popper-placement^="bottom"].fade:not(.show) .tooltip-inner {
+  transform: translate3d(0, calc(var(--moo-tooltip-motion-translate) * -1), 0) scale(var(--moo-tooltip-motion-scale));
+}
+
+.bs-tooltip-start.fade:not(.show) .tooltip-inner,
+.bs-tooltip-auto[data-popper-placement^="left"].fade:not(.show) .tooltip-inner {
+  transform: translate3d(var(--moo-tooltip-motion-translate), 0, 0) scale(var(--moo-tooltip-motion-scale));
+}
+
+.bs-tooltip-end.fade:not(.show) .tooltip-inner,
+.bs-tooltip-auto[data-popper-placement^="right"].fade:not(.show) .tooltip-inner {
+  transform: translate3d(calc(var(--moo-tooltip-motion-translate) * -1), 0, 0) scale(var(--moo-tooltip-motion-scale));
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .tooltip.fade .tooltip-inner {
+    transition: none;
+    transform: none;
+    will-change: auto;
+  }
+}
+
+// Bootstrap's tooltip bubble is fully token-driven already (see the vendored
+// Bootstrap tooltip partial), so this partial only owns the plain link
+// trigger's own text color. Unstyled, it falls through to Bootstrap's
+// un-themed --bs-link-color, which reads too low-contrast on dark surfaces;
+// a dotted underline also reads as "hover for more info" rather than a real
+// navigational link.
+.tooltip-trigger {
+  color: var(--moo-foreground);
+  text-decoration-line: underline;
+  text-decoration-style: dotted;
+  text-decoration-color: var(--moo-muted-foreground);
+  text-underline-offset: 0.2em;
+}
+
+// Tooltip shortcut hints render the Kbd component's native <kbd> element.
+// The catalog tooltip initializer extends Bootstrap's sanitizer allowlist
+// with the kbd tag so it survives data-bs-html sanitization; styling comes
+// from the shared Kbd component and Bootstrap's own reboot. A shortcut chip
+// after trailing prose keeps a readable gap from the surrounding text.
+.tooltip-inner kbd {
+  margin-inline-start: $kbd-padding-x;
+}