@malilion/block-ui-react 0.3.0 → 0.5.0

package/dist/styles.css

@@ -829,6 +829,10 @@
   background-color: var(--block-shadow-bevel-dark);
   box-shadow: inset -2px -2px 0 var(--block-shadow-bevel-light);
 }
+/* The area takes the size of its content; it adds no visual of its own. */
+.block-area-Zq0O2 {
+  display: contents;
+}
 .block-field-mjy2g {
   display: flex;
   flex-direction: column;
@@ -1415,6 +1419,46 @@
 .block-slider-RnmGA:active::-webkit-slider-thumb {
   filter: brightness(1.15);
 }
+.block-wrapper-b-npH {
+  display: flex;
+  align-items: stretch;
+  gap: var(--block-space-1);
+}
+
+.block-input-cg-Fv {
+  flex: 1;
+  min-width: 0;
+  height: var(--block-size-control-md);
+  text-align: center;
+  font-variant-numeric: tabular-nums;
+}
+
+.block-button-8xOEk {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: var(--block-size-control-md);
+  padding: 0;
+  color: var(--block-text);
+  background-color: var(--block-surface-alt);
+  border: var(--block-border-width-thin) solid var(--block-border);
+  box-shadow: var(--block-shadow-bevel);
+  cursor: pointer;
+}
+
+.block-button-8xOEk:hover:not(:disabled) {
+  background-color: var(--block-slot-hover);
+}
+
+.block-button-8xOEk:active:not(:disabled) {
+  box-shadow: var(--block-shadow-inset);
+}
+
+.block-button-8xOEk:disabled {
+  cursor: not-allowed;
+  opacity: 0.45;
+}
 .block-root-Adx9O {
   display: flex;
   align-items: center;
@@ -4177,6 +4221,173 @@ div.block-slot-ZIG6g:not([role="gridcell"]):not([tabindex]) {
   /* Lightened so it stays above 4.5:1 on every theme's panel colour. */
   color: color-mix(in srgb, var(--block-redstone-light) 65%, var(--block-white));
 }
+.block-avatar-9s1vM {
+  --avatar-size: 32px;
+  position: relative;
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: var(--avatar-size);
+  height: var(--avatar-size);
+  color: var(--block-mat-on);
+  background-color: var(--block-mat);
+  border: var(--block-border-width-thin) solid var(--block-black);
+  box-shadow:
+    inset 2px 2px 0 var(--block-mat-light),
+    inset -2px -2px 0 var(--block-mat-dark);
+  vertical-align: middle;
+}
+
+.block-avatar-9s1vM[data-size="sm"] {
+  --avatar-size: 24px;
+}
+
+.block-avatar-9s1vM[data-size="lg"] {
+  --avatar-size: 48px;
+}
+
+.block-avatar-9s1vM[data-size="xl"] {
+  --avatar-size: 64px;
+}
+
+.block-image-RZELF {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  image-rendering: pixelated;
+}
+
+.block-icon-mq-FE {
+  display: inline-flex;
+  width: 70%;
+  height: 70%;
+}
+
+.block-icon-mq-FE > * {
+  width: 100%;
+  height: 100%;
+}
+
+.block-initials-siD-X {
+  font-family: var(--block-font-display);
+  font-size: calc(var(--avatar-size) * 0.4);
+  font-weight: var(--block-font-weight-bold);
+  line-height: 1;
+  text-shadow: var(--block-mat-text-shadow, none);
+}
+
+/* Presence dot, a quarter of the avatar, in the bottom-right corner. */
+.block-status-CalIQ {
+  position: absolute;
+  right: -3px;
+  bottom: -3px;
+  width: max(8px, calc(var(--avatar-size) * 0.3));
+  height: max(8px, calc(var(--avatar-size) * 0.3));
+  border: 2px solid var(--block-black);
+}
+
+.block-status-CalIQ[data-status="online"] {
+  background-color: var(--block-emerald-light);
+}
+
+.block-status-CalIQ[data-status="away"] {
+  background-color: var(--block-gold-light);
+}
+
+.block-status-CalIQ[data-status="busy"] {
+  background-color: var(--block-redstone-light);
+}
+
+.block-status-CalIQ[data-status="offline"] {
+  background-color: var(--block-stone);
+}
+.block-anchor-Hc2xy {
+  display: inline-flex;
+  vertical-align: middle;
+}
+
+.block-panel-hIYiA {
+  position: fixed;
+  top: var(--block-float-y, 0);
+  left: var(--block-float-x, 0);
+  z-index: var(--block-z-dropdown);
+  display: flex;
+  flex-direction: column;
+  gap: var(--block-space-2);
+  width: max-content;
+  min-width: 200px;
+  max-width: min(360px, calc(100vw - var(--block-space-4)));
+  max-height: calc(100vh - var(--block-space-4));
+  padding: var(--block-space-3);
+  overflow-y: auto;
+  color: var(--block-text);
+  background-color: var(--block-surface);
+  border: var(--block-border-width) solid var(--block-border);
+  box-shadow: var(--block-shadow-bevel), var(--block-shadow-drop);
+}
+
+.block-panel-hIYiA:focus-visible {
+  outline: 3px solid var(--block-focus);
+  outline-offset: 2px;
+}
+
+.block-title-0MX0a {
+  margin: 0;
+  font-family: var(--block-font-display);
+  font-size: var(--block-font-size-sm);
+  font-weight: var(--block-font-weight-bold);
+  letter-spacing: var(--block-letter-spacing-wide);
+  text-transform: uppercase;
+  text-shadow: var(--block-shadow-text);
+}
+
+.block-body-K6cco {
+  font-size: var(--block-font-size-sm);
+}
+.block-key-FLsly {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 28px;
+  min-height: 28px;
+  padding: 0 var(--block-space-1);
+  font-family: var(--block-font-display);
+  font-size: var(--block-font-size-xs);
+  font-weight: var(--block-font-weight-bold);
+  line-height: 1;
+  text-transform: uppercase;
+  white-space: nowrap;
+  color: var(--block-text);
+  background-color: var(--block-surface-alt);
+  border: var(--block-border-width-thin) solid var(--block-border);
+  box-shadow:
+    inset 2px 2px 0 var(--block-shadow-bevel-light),
+    inset -2px -4px 0 var(--block-shadow-bevel-dark);
+  padding-bottom: 2px;
+  vertical-align: middle;
+}
+
+.block-key-FLsly[data-size="sm"],
+[data-size="sm"] > .block-key-FLsly {
+  min-width: 22px;
+  min-height: 22px;
+  font-size: 0.625rem;
+}
+
+.block-combo-xCqO- {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--block-space-1);
+  font: inherit;
+  vertical-align: middle;
+}
+
+.block-plus-OaCLf {
+  font-family: var(--block-font-display);
+  font-size: var(--block-font-size-xs);
+  color: var(--block-text-muted);
+}
 .block-chat-Q0XDo {
   --chat-height: 240px;
   display: flex;
@@ -4898,80 +5109,222 @@ div.block-slot-ZIG6g:not([role="gridcell"]):not([tabindex]) {
   white-space: nowrap;
   color: var(--block-text);
 }
-.block-stack-z5qhc {
+.block-stepper-AFyIV {
+  width: 100%;
+}
+
+.block-list-O8q0K {
   display: flex;
-  flex-direction: column;
-  min-width: 0;
+  gap: var(--block-space-2);
   margin: 0;
   padding: 0;
   list-style: none;
 }
 
-.block-stack-z5qhc[data-direction="row"] {
-  flex-direction: row;
+.block-stepper-AFyIV[data-orientation="vertical"] .block-list-O8q0K {
+  flex-direction: column;
 }
 
-.block-stack-z5qhc[data-wrap] {
-  flex-wrap: wrap;
+.block-step-yvErb {
+  position: relative;
+  display: flex;
+  flex: 1;
+  min-width: 0;
 }
 
-.block-stack-z5qhc[data-gap="0"] {
-  gap: var(--block-space-0);
+/* Connector to the next step. */
+.block-stepper-AFyIV[data-orientation="horizontal"] .block-step-yvErb:not(:last-child)::after {
+  content: "";
+  position: absolute;
+  top: 15px;
+  left: calc(32px + var(--block-space-2));
+  right: var(--block-space-2);
+  height: 4px;
+  background-color: var(--block-border);
 }
 
-.block-stack-z5qhc[data-gap="1"] {
-  gap: var(--block-space-1);
+.block-stepper-AFyIV[data-orientation="horizontal"] .block-step-yvErb[data-state="complete"]::after {
+  background-color: var(--block-emerald);
 }
 
-.block-stack-z5qhc[data-gap="2"] {
-  gap: var(--block-space-2);
+.block-stepper-AFyIV[data-orientation="vertical"] .block-step-yvErb:not(:last-child)::after {
+  content: "";
+  position: absolute;
+  top: 36px;
+  bottom: calc(-1 * var(--block-space-2) + 4px);
+  left: 14px;
+  width: 4px;
+  background-color: var(--block-border);
 }
 
-.block-stack-z5qhc[data-gap="3"] {
-  gap: var(--block-space-3);
+.block-stepper-AFyIV[data-orientation="vertical"] .block-step-yvErb[data-state="complete"]::after {
+  background-color: var(--block-emerald);
 }
 
-.block-stack-z5qhc[data-gap="4"] {
-  gap: var(--block-space-4);
+.block-content-BWfnF {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: flex-start;
+  gap: var(--block-space-2);
+  padding: 0;
+  font: inherit;
+  text-align: left;
+  color: inherit;
+  background: none;
+  border: 0;
 }
 
-.block-stack-z5qhc[data-gap="5"] {
-  gap: var(--block-space-5);
+.block-stepper-AFyIV[data-orientation="horizontal"] .block-content-BWfnF {
+  flex-direction: column;
 }
 
-.block-stack-z5qhc[data-gap="6"] {
-  gap: var(--block-space-6);
+button.block-content-BWfnF {
+  cursor: pointer;
 }
 
-.block-stack-z5qhc[data-gap="8"] {
-  gap: var(--block-space-8);
+button.block-content-BWfnF:focus-visible {
+  outline: 3px solid var(--block-focus);
+  outline-offset: 2px;
 }
 
-.block-stack-z5qhc[data-gap="10"] {
-  gap: var(--block-space-10);
+.block-marker-THwA7 {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  font-family: var(--block-font-display);
+  font-size: var(--block-font-size-sm);
+  font-weight: var(--block-font-weight-bold);
+  color: var(--block-text-muted);
+  background-color: var(--block-slot);
+  border: var(--block-border-width-thin) solid var(--block-border);
+  box-shadow: var(--block-shadow-inset);
 }
 
-.block-stack-z5qhc[data-gap="12"] {
-  gap: var(--block-space-12);
+.block-step-yvErb[data-state="current"] .block-marker-THwA7 {
+  color: var(--block-text);
+  background-color: var(--block-surface-alt);
+  border-color: var(--block-gold);
+  box-shadow: var(--block-shadow-bevel);
 }
 
-.block-stack-z5qhc[data-align="start"] {
-  align-items: flex-start;
+.block-step-yvErb[data-state="complete"] .block-marker-THwA7 {
+  color: var(--block-on-emerald);
+  background-color: var(--block-emerald);
+  border-color: var(--block-emerald-dark);
 }
 
-.block-stack-z5qhc[data-align="center"] {
-  align-items: center;
+.block-text-Fys8d {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
 }
 
-.block-stack-z5qhc[data-align="end"] {
-  align-items: flex-end;
+.block-label-loKfO {
+  font-family: var(--block-font-display);
+  font-size: var(--block-font-size-xs);
+  font-weight: var(--block-font-weight-bold);
+  text-transform: uppercase;
+  color: var(--block-text-muted);
+  overflow-wrap: anywhere;
 }
 
-.block-stack-z5qhc[data-align="stretch"] {
-  align-items: stretch;
+.block-step-yvErb[data-state="current"] .block-label-loKfO,
+.block-step-yvErb[data-state="complete"] .block-label-loKfO {
+  color: var(--block-text);
 }
 
-.block-stack-z5qhc[data-align="baseline"] {
+button.block-content-BWfnF:hover .block-label-loKfO {
+  text-decoration: underline;
+}
+
+.block-description-TR0zD {
+  font-size: var(--block-font-size-xs);
+  color: var(--block-text-muted);
+}
+
+@media (max-width: 767.98px) {
+  .block-stepper-AFyIV[data-orientation="horizontal"] .block-description-TR0zD {
+    display: none;
+  }
+}
+.block-stack-z5qhc {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.block-stack-z5qhc[data-direction="row"] {
+  flex-direction: row;
+}
+
+.block-stack-z5qhc[data-wrap] {
+  flex-wrap: wrap;
+}
+
+.block-stack-z5qhc[data-gap="0"] {
+  gap: var(--block-space-0);
+}
+
+.block-stack-z5qhc[data-gap="1"] {
+  gap: var(--block-space-1);
+}
+
+.block-stack-z5qhc[data-gap="2"] {
+  gap: var(--block-space-2);
+}
+
+.block-stack-z5qhc[data-gap="3"] {
+  gap: var(--block-space-3);
+}
+
+.block-stack-z5qhc[data-gap="4"] {
+  gap: var(--block-space-4);
+}
+
+.block-stack-z5qhc[data-gap="5"] {
+  gap: var(--block-space-5);
+}
+
+.block-stack-z5qhc[data-gap="6"] {
+  gap: var(--block-space-6);
+}
+
+.block-stack-z5qhc[data-gap="8"] {
+  gap: var(--block-space-8);
+}
+
+.block-stack-z5qhc[data-gap="10"] {
+  gap: var(--block-space-10);
+}
+
+.block-stack-z5qhc[data-gap="12"] {
+  gap: var(--block-space-12);
+}
+
+.block-stack-z5qhc[data-align="start"] {
+  align-items: flex-start;
+}
+
+.block-stack-z5qhc[data-align="center"] {
+  align-items: center;
+}
+
+.block-stack-z5qhc[data-align="end"] {
+  align-items: flex-end;
+}
+
+.block-stack-z5qhc[data-align="stretch"] {
+  align-items: stretch;
+}
+
+.block-stack-z5qhc[data-align="baseline"] {
   align-items: baseline;
 }
 
@@ -5069,6 +5422,135 @@ div.block-slot-ZIG6g:not([role="gridcell"]):not([tabindex]) {
   letter-spacing: var(--block-letter-spacing-wide);
   text-transform: uppercase;
 }
+.block-accordion-u7KUD {
+  display: flex;
+  flex-direction: column;
+  gap: var(--block-space-1);
+  width: 100%;
+}
+
+.block-item-Anf9u {
+  background-color: var(--block-surface);
+  border: var(--block-border-width) solid var(--block-border);
+  box-shadow: var(--block-shadow-bevel);
+}
+
+.block-heading-YzlrO {
+  margin: 0;
+}
+
+.block-trigger-r-rVI {
+  display: flex;
+  align-items: center;
+  gap: var(--block-space-2);
+  width: 100%;
+  min-height: 44px;
+  padding: var(--block-space-2) var(--block-space-3);
+  font-family: var(--block-font-display);
+  font-size: var(--block-font-size-sm);
+  font-weight: var(--block-font-weight-bold);
+  letter-spacing: var(--block-letter-spacing-wide);
+  text-align: left;
+  text-transform: uppercase;
+  color: var(--block-text);
+  background-color: var(--block-surface-header);
+  border: 0;
+  cursor: pointer;
+}
+
+.block-trigger-r-rVI:hover:not(:disabled) {
+  background-color: var(--block-slot-hover);
+}
+
+.block-trigger-r-rVI:focus-visible {
+  outline: 3px solid var(--block-focus);
+  outline-offset: -3px;
+}
+
+.block-trigger-r-rVI:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.block-icon-ja4pL {
+  display: inline-flex;
+  flex-shrink: 0;
+}
+
+.block-title-xq19m {
+  flex: 1;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.block-chevron-hKGfT {
+  display: inline-flex;
+  flex-shrink: 0;
+  transition: transform var(--block-duration-instant) var(--block-ease-step);
+}
+
+.block-item-Anf9u[data-open] .block-chevron-hKGfT {
+  transform: rotate(180deg);
+}
+
+.block-panel-wcIDx {
+  padding: var(--block-space-3);
+  border-top: var(--block-border-width-thin) solid var(--block-border);
+  color: var(--block-text);
+}
+
+.block-panel-wcIDx[hidden] {
+  display: none;
+}
+.block-grid-skICT {
+  display: grid;
+  gap: var(--block-grid-gap);
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.block-grid-skICT[data-mode="fixed"] {
+  grid-template-columns: repeat(var(--block-grid-columns), minmax(0, 1fr));
+}
+
+.block-grid-skICT[data-mode="auto"] {
+  grid-template-columns: repeat(auto-fill, minmax(min(var(--block-grid-min), 100%), 1fr));
+}
+
+@media (max-width: 767.98px) {
+  .block-grid-skICT[data-stack-mobile] {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+.block-container-UJuv- {
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 1024px;
+  margin-inline: auto;
+  padding-inline: var(--block-space-4);
+}
+
+.block-container-UJuv-[data-size="sm"] {
+  max-width: 640px;
+}
+
+.block-container-UJuv-[data-size="md"] {
+  max-width: 768px;
+}
+
+.block-container-UJuv-[data-size="xl"] {
+  max-width: 1280px;
+}
+
+.block-container-UJuv-[data-size="full"] {
+  max-width: none;
+}
+
+.block-container-UJuv-[data-flush] {
+  padding-inline: 0;
+}
 .block-overlay-gc2QW {
   position: fixed;
   inset: 0;
@@ -5274,4 +5756,262 @@ div.block-slot-ZIG6g:not([role="gridcell"]):not([tabindex]) {
 .block-bar-oFS7J {
   width: 100%;
 }
+.block-overlay-MaF41 {
+  position: fixed;
+  inset: 0;
+  z-index: var(--block-z-modal);
+  display: flex;
+  justify-content: flex-end;
+  background-color: var(--block-overlay);
+  animation: block-block-drawer-fade-4rcmM var(--block-duration-fast) steps(3, end);
+}
+
+.block-overlay-MaF41[data-side="left"] {
+  justify-content: flex-start;
+}
+
+.block-overlay-MaF41[data-side="bottom"] {
+  flex-direction: column;
+  justify-content: flex-end;
+}
+
+.block-drawer-aWDC6 {
+  --drawer-size: 360px;
+  display: flex;
+  flex-direction: column;
+  width: min(var(--drawer-size), 100%);
+  height: 100%;
+  color: var(--block-text);
+  background-color: var(--block-surface);
+  background-image:
+    linear-gradient(
+      color-mix(in srgb, var(--block-surface) 88%, transparent),
+      color-mix(in srgb, var(--block-surface) 88%, transparent)
+    ),
+    var(--block-texture);
+  background-size:
+    auto,
+    64px 64px;
+  border-left: var(--block-border-width) solid var(--block-border);
+  box-shadow: var(--block-shadow-bevel);
+  outline: none;
+  animation: block-block-drawer-in-right-Krar9 var(--block-duration-normal) steps(4, end);
+}
+
+.block-drawer-aWDC6[data-size="sm"] {
+  --drawer-size: 280px;
+}
+
+.block-drawer-aWDC6[data-size="lg"] {
+  --drawer-size: 520px;
+}
+
+.block-drawer-aWDC6[data-side="left"] {
+  border-left: 0;
+  border-right: var(--block-border-width) solid var(--block-border);
+  animation-name: block-block-drawer-in-left-EnlSn;
+}
+
+.block-drawer-aWDC6[data-side="bottom"] {
+  --drawer-size: 50dvh;
+  width: 100%;
+  height: min(var(--drawer-size), 100%);
+  border-left: 0;
+  border-top: var(--block-border-width) solid var(--block-border);
+  animation-name: block-block-drawer-in-bottom-yyZ8z;
+}
+
+.block-drawer-aWDC6[data-side="bottom"][data-size="sm"] {
+  --drawer-size: 33dvh;
+}
+
+.block-drawer-aWDC6[data-side="bottom"][data-size="lg"] {
+  --drawer-size: 80dvh;
+}
+
+.block-header-FheCx {
+  display: flex;
+  align-items: center;
+  gap: var(--block-space-2);
+  margin: 3px 3px 0;
+  padding: var(--block-space-2) var(--block-space-3);
+  background-color: var(--block-surface-header);
+  border-bottom: var(--block-border-width-thin) solid var(--block-border);
+}
+
+.block-title-4QE9I {
+  flex: 1;
+  margin: 0;
+  font-family: var(--block-font-display);
+  font-size: var(--block-font-size-lg);
+  font-weight: var(--block-font-weight-bold);
+  letter-spacing: var(--block-letter-spacing-wide);
+  text-transform: uppercase;
+  text-shadow: var(--block-shadow-text);
+}
+
+.block-close-fdVrq {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  color: var(--block-text);
+  background-color: var(--block-slot);
+  border: var(--block-border-width-thin) solid var(--block-border);
+  box-shadow: var(--block-shadow-inset);
+  cursor: pointer;
+}
+
+.block-close-fdVrq:focus-visible {
+  outline: 3px solid var(--block-focus);
+  outline-offset: 2px;
+}
+
+.block-body-aFN-w {
+  flex: 1;
+  min-height: 0;
+  padding: var(--block-space-4);
+  overflow-y: auto;
+}
+
+.block-footer-m9z0P {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: var(--block-space-2);
+  padding: var(--block-space-3) var(--block-space-4);
+  border-top: var(--block-border-width-thin) solid var(--block-border);
+}
+
+@keyframes block-block-drawer-fade-4rcmM {
+  from {
+    opacity: 0;
+  }
+}
+
+@keyframes block-block-drawer-in-right-Krar9 {
+  from {
+    transform: translateX(100%);
+  }
+}
+
+@keyframes block-block-drawer-in-left-EnlSn {
+  from {
+    transform: translateX(-100%);
+  }
+}
+
+@keyframes block-block-drawer-in-bottom-yyZ8z {
+  from {
+    transform: translateY(100%);
+  }
+}
+.block-empty-CypAE {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--block-space-2);
+  width: 100%;
+  padding: var(--block-space-8) var(--block-space-4);
+  text-align: center;
+  color: var(--block-text);
+  background-color: var(--block-slot);
+  border: var(--block-border-width-thin) dashed var(--block-border);
+}
+
+.block-empty-CypAE[data-size="sm"] {
+  padding: var(--block-space-4) var(--block-space-3);
+}
+
+.block-icon-RT29d {
+  display: inline-flex;
+  opacity: 0.6;
+  filter: grayscale(0.5);
+}
+
+.block-title-gsp4I {
+  margin: 0;
+  font-family: var(--block-font-display);
+  font-size: var(--block-font-size-md);
+  font-weight: var(--block-font-weight-bold);
+  letter-spacing: var(--block-letter-spacing-wide);
+  text-transform: uppercase;
+  text-shadow: var(--block-shadow-text);
+}
+
+.block-empty-CypAE[data-size="sm"] .block-title-gsp4I {
+  font-size: var(--block-font-size-sm);
+}
+
+.block-description-es-JM {
+  max-width: 42ch;
+  margin: 0;
+  font-size: var(--block-font-size-sm);
+  color: var(--block-text-muted);
+}
+
+.block-action-TqLZE {
+  margin-top: var(--block-space-2);
+}
+.block-skeleton-iGMZW {
+  display: flex;
+  flex-direction: column;
+  gap: var(--block-space-2);
+  width: var(--block-skeleton-width, 100%);
+  max-width: 100%;
+}
+
+.block-bone-cYRm- {
+  display: block;
+  height: 12px;
+  background-color: var(--block-slot);
+  background-image: linear-gradient(
+    90deg,
+    transparent 0 40%,
+    color-mix(in srgb, var(--block-text) 12%, transparent) 40% 60%,
+    transparent 60%
+  );
+  background-size: 300% 100%;
+  border: var(--block-border-width-thin) solid var(--block-border);
+  animation: block-block-skeleton-sweep-8kYA1 1.2s steps(8, end) infinite;
+}
+
+.block-bone-cYRm-[data-last] {
+  width: 60%;
+}
+
+.block-skeleton-iGMZW[data-variant="block"] .block-bone-cYRm- {
+  height: var(--block-skeleton-height, 96px);
+}
+
+.block-skeleton-iGMZW[data-variant="slot"] {
+  width: var(--block-skeleton-width, var(--block-size-slot-md));
+}
+
+.block-skeleton-iGMZW[data-variant="slot"] .block-bone-cYRm- {
+  aspect-ratio: 1;
+  height: auto;
+  box-shadow: var(--block-shadow-inset);
+}
+
+.block-skeleton-iGMZW[data-variant="avatar"] {
+  width: var(--block-skeleton-width, 48px);
+}
+
+.block-skeleton-iGMZW[data-variant="avatar"] .block-bone-cYRm- {
+  aspect-ratio: 1;
+  height: auto;
+}
+
+/* A stepped highlight sweep; reduced motion stops it (base.css). */
+@keyframes block-block-skeleton-sweep-8kYA1 {
+  from {
+    background-position: 100% 0;
+  }
+  to {
+    background-position: 0 0;
+  }
+}
 /*$vite$:1*/