@veluai/velu 0.2.25 → 0.2.27

package/runtime/velu-ui/components/field.css

@@ -1,82 +1,82 @@
-/* Field — parameter docs row. All values are tokens; light/dark via
-   [data-theme]. The chip / pill recipes are kept simple so they read
-   identically against both `--surface-color` and `--page-bg`. */
-
-.velu-field {
-  display: block;
-}
-
-/* Header row of chips + name + type + required + default + post.
-   flex-wrap so a long set of badges falls cleanly onto a second line
-   on narrow widths. Items align on text baseline so the bold `name`
-   never visually shifts when chips have different padding. */
-/* The chip row layout lives in <Cluster> now (primitives/Cluster.jsx) —
-   no .velu-field__head selector needed. */
-
-/* Generic chip — used for pre / type / post. Hugs the line-height
-   vertically (zero block padding) with 8px / --s-3 horizontal padding;
-   reads as a tiny code-like badge. */
-.velu-field__chip {
-  display: inline-flex;
-  align-items: center;
-  padding-block: 0;
-  padding-inline: var(--s-3);
-  background: var(--surface-color);
-  border-radius: var(--radius-sm);
-  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
-  font-size: var(--f-h6);
-  line-height: var(--lh-h6);
-  color: var(--muted-color);
-}
-
-/* The parameter name — accent, medium weight, slightly larger than the
-   chips so it reads as the row's primary token. */
-.velu-field__name {
-  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
-  font-size: var(--f-h5);
-  line-height: var(--lh-h5);
-  font-weight: var(--weight-medium);
-  color: var(--accent-color);
-}
-
-/* Required pill — accent-tinted background + accent text. Same hugging
-   line-height as the generic chip. */
-.velu-field__required {
-  display: inline-flex;
-  align-items: center;
-  padding-block: 0;
-  padding-inline: var(--s-3);
-  background: color-mix(in srgb, var(--accent-color) 18%, transparent);
-  border-radius: var(--radius-sm);
-  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
-  font-size: var(--f-h6);
-  line-height: var(--lh-h6);
-  color: var(--accent-color);
-}
-
-/* default: VALUE — light italic Google Sans Code, regular text color
-   (not muted). */
-.velu-field__default {
-  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
-  font-style: italic;
-  font-weight: var(--weight-light);
-  font-size: var(--f-h6);
-  line-height: var(--lh-h6);
-  color: var(--text-color);
-}
-
-/* Description block beneath the chip row. */
-.velu-field__body {
-  margin-block-start: var(--s-1);
-  color: var(--text-color);
-  font-size: var(--f-body);
-  line-height: var(--lh-body);
-}
-
-/* Sibling separator — drop two <Field> next to each other and the
-   hairline divider appears between them. No wrapper component needed. */
-.velu-field + .velu-field {
-  margin-block-start: var(--s2);
-  padding-block-start: var(--s2);
-  border-block-start: var(--border-width) solid var(--border-color);
-}
+/* Field — parameter docs row. All values are tokens; light/dark via
+   [data-theme]. The chip / pill recipes are kept simple so they read
+   identically against both `--surface-color` and `--page-bg`. */
+
+.velu-field {
+  display: block;
+}
+
+/* Header row of chips + name + type + required + default + post.
+   flex-wrap so a long set of badges falls cleanly onto a second line
+   on narrow widths. Items align on text baseline so the bold `name`
+   never visually shifts when chips have different padding. */
+/* The chip row layout lives in <Cluster> now (primitives/Cluster.jsx) —
+   no .velu-field__head selector needed. */
+
+/* Generic chip — used for pre / type / post. Hugs the line-height
+   vertically (zero block padding) with 8px / --s-3 horizontal padding;
+   reads as a tiny code-like badge. */
+.velu-field__chip {
+  display: inline-flex;
+  align-items: center;
+  padding-block: 0;
+  padding-inline: var(--s-3);
+  background: var(--surface-color);
+  border-radius: var(--radius-sm);
+  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
+  font-size: var(--f-h6);
+  line-height: var(--lh-h6);
+  color: var(--muted-color);
+}
+
+/* The parameter name — accent, medium weight, slightly larger than the
+   chips so it reads as the row's primary token. */
+.velu-field__name {
+  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
+  font-size: var(--f-h5);
+  line-height: var(--lh-h5);
+  font-weight: var(--weight-medium);
+  color: var(--accent-color);
+}
+
+/* Required pill — accent-tinted background + accent text. Same hugging
+   line-height as the generic chip. */
+.velu-field__required {
+  display: inline-flex;
+  align-items: center;
+  padding-block: 0;
+  padding-inline: var(--s-3);
+  background: color-mix(in srgb, var(--accent-color) 18%, transparent);
+  border-radius: var(--radius-sm);
+  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
+  font-size: var(--f-h6);
+  line-height: var(--lh-h6);
+  color: var(--accent-color);
+}
+
+/* default: VALUE — light italic Google Sans Code, regular text color
+   (not muted). */
+.velu-field__default {
+  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
+  font-style: italic;
+  font-weight: var(--weight-light);
+  font-size: var(--f-h6);
+  line-height: var(--lh-h6);
+  color: var(--text-color);
+}
+
+/* Description block beneath the chip row. */
+.velu-field__body {
+  margin-block-start: var(--s-1);
+  color: var(--text-color);
+  font-size: var(--f-body);
+  line-height: var(--lh-body);
+}
+
+/* Sibling separator — drop two <Field> next to each other and the
+   hairline divider appears between them. No wrapper component needed. */
+.velu-field + .velu-field {
+  margin-block-start: var(--s2);
+  padding-block-start: var(--s2);
+  border-block-start: var(--border-width) solid var(--border-color);
+}

package/runtime/velu-ui/components/image.css

@@ -1,237 +1,237 @@
-/* Image — plain / captioned / window-chrome / device-frame variants.
-   Tokenized; light/dark via [data-theme]. The window + frame variants share
-   an accent-glow + noise backdrop, plus the liquid-glass layered surface
-   (effect/tint/shine/content) for chrome bar + device bezel — SVG
-   feTurbulence→feDisplacementMap provides the actual refraction. */
-
-.velu-image {
-  display: block;
-  margin: 0; /* reset <figure> default margin */
-}
-/* Chrome variants: figure hugs the contained card so the caption
-   naturally centers under it instead of under the full content column. */
-.velu-image--chrome {
-  inline-size: fit-content;
-  margin-inline: auto;
-}
-
-.velu-image__img {
-  display: block;
-  inline-size: 100%;
-  block-size: auto;
-  border-radius: var(--radius-md);
-  object-fit: cover;
-}
-.velu-image__img--flush {
-  border-radius: 0;
-}
-
-.velu-image__caption {
-  margin-block-start: var(--s-1);
-  text-align: center;
-  font-size: var(--f-h6);
-  line-height: var(--lh-h6);
-  color: var(--muted-color);
-}
-
-/* ── Accent glow + noise grain (shared by window + frame) ────────────────── */
-/* Big soft blob peeking from outside the container. The position uses
-   negative insets so the blob's center is outside; overflow:hidden on
-   the parent clips it to a quarter visible. */
-.velu-image__glow {
-  position: absolute;
-  inset-block-start: calc(var(--s4) * -1);
-  inset-inline-start: calc(var(--s4) * -1);
-  inline-size: calc(var(--s5) * 5);
-  block-size: calc(var(--s5) * 5);
-  background: var(--accent-color);
-  border-radius: 50%;
-  filter: blur(var(--s3));
-  opacity: 0.95;
-  pointer-events: none;
-  z-index: 0;
-}
-.velu-image__noise {
-  position: absolute;
-  inset: 0;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
-  opacity: 0.6;
-  mix-blend-mode: overlay;
-  pointer-events: none;
-  z-index: 0;
-}
-
-/* ── Liquid-glass surface (lucasromerodb pattern) ────────────────────────── */
-/* Four-layer stack: effect (backdrop-blur + SVG displacement filter),
-   tint (translucent white), shine (inset highlights), content (children).
-   Stays usable across themes — tint+shine are universal optical constants
-   (white), not palette tokens. */
-.velu-glass {
-  position: relative;
-  display: flex;
-  /* No overflow:hidden — each inner layer rounds itself via
-     `border-radius: inherit`, so we don't need to clip at the parent.
-     Skipping the clip lets children's box-shadows (e.g. the raised
-     screen inside the bezel) extend outside the glass surface. */
-  box-shadow:
-    0 var(--s-1) var(--s-1) color-mix(in srgb, #000 20%, transparent),
-    0 0 var(--s1) color-mix(in srgb, #000 10%, transparent);
-}
-/* Each layer rounds itself rather than relying on parent overflow:hidden —
-   Chrome doesn't reliably clip backdrop-filter / inset-box-shadow to a
-   rounded parent, which produces 90° corners poking through curves. */
-.velu-glass__effect,
-.velu-glass__tint,
-.velu-glass__shine,
-.velu-glass__content {
-  border-radius: inherit;
-}
-/* Displacement must be applied to the BACKDROP (what's behind the element),
-   not to the element itself. `filter: url()` would apply to the (empty)
-   effect div; `backdrop-filter: url()` refracts the actual backdrop.
-   Chromium-only; Safari/Firefox fall back to plain blur. */
-.velu-glass__effect {
-  position: absolute;
-  inset: 0;
-  z-index: 0;
-  -webkit-backdrop-filter: blur(3px) url(#velu-glass-distortion);
-  backdrop-filter: blur(3px) url(#velu-glass-distortion);
-  isolation: isolate;
-}
-.velu-glass__tint {
-  position: absolute;
-  inset: 0;
-  z-index: 1;
-  background: rgba(255, 255, 255, 0.25);
-}
-.velu-glass__shine {
-  position: absolute;
-  inset: 0;
-  z-index: 2;
-  box-shadow:
-    inset 2px 2px 1px 0 rgba(255, 255, 255, 0.5),
-    inset -1px -1px 1px 1px rgba(255, 255, 255, 0.5);
-}
-.velu-glass__content {
-  position: relative;
-  z-index: 3;
-  inline-size: 100%;
-}
-
-/* ── Window-chrome variant ──────────────────────────────────────────────── */
-/* Outer = grey card. Nested radii are properly concentric:
-   outer_radius ▸ surface_radius (= outer - outer_padding) ▸
-   inner_radius (= surface - surface_padding). Padding is kept small
-   enough that every level's curve stays positive. */
-.velu-image__window {
-  position: relative;
-  padding: var(--s-1);
-  border-radius: var(--radius-lg);
-  overflow: hidden;
-  background: var(--surface-color);
-  max-inline-size: 36rem;
-  margin-inline: auto;
-}
-/* Glass surface (tray) that the chrome+image card sits on. Peeks out
-   around the inner card as a visible glass border.
-   radius = outer_radius - outer_padding (concentric with outer card). */
-.velu-image__window-surface {
-  position: relative;
-  z-index: 1;
-  inline-size: 100%;
-  border-radius: calc(var(--radius-lg) - var(--s-1));
-}
-.velu-image__window-surface > .velu-glass__content {
-  padding: var(--s-2);
-}
-/* Inner card holds the chrome bar + image.
-   radius = surface_radius - surface_padding (concentric with surface).
-   A soft drop-shadow lifts it off the glass tray. */
-.velu-image__window-inner {
-  position: relative;
-  inline-size: 100%;
-  border-radius: calc(var(--radius-lg) - var(--s-1) - var(--s-2));
-  overflow: hidden;
-  box-shadow:
-    0 var(--s-2) var(--s-1) color-mix(in srgb, #000 18%, transparent),
-    0 var(--s-4) var(--s-3) color-mix(in srgb, #000 12%, transparent);
-}
-/* Chrome bar sits ABOVE the image (in flow, no overlap). The image
-   renders below it. Chrome is glass-styled via the Glass wrapper.
-   Top corners match the window's radius; bottom stays flat where it
-   meets the image. Inner glass layers inherit via `border-radius:
-   inherit`. */
-.velu-image__chrome {
-  border-start-start-radius: calc(var(--radius-lg) - var(--s-1) - var(--s-2));
-  border-start-end-radius: calc(var(--radius-lg) - var(--s-1) - var(--s-2));
-  /* The default `.velu-glass` drop-shadow casts a dark line onto the
-     image below — undesired here since the chrome meets the image
-     directly. The bezel keeps its shadow because it sits in a padded
-     grey card that absorbs it. */
-  box-shadow: none;
-}
-.velu-image__chrome > .velu-glass__content {
-  display: flex;
-  align-items: center;
-  gap: var(--s-1);
-  padding: var(--s-1);
-}
-.velu-image__dots {
-  display: inline-flex;
-  gap: var(--s-3);
-  padding-inline: var(--s-3);
-}
-.velu-image__dot {
-  inline-size: 0.75em;
-  block-size: 0.75em;
-  border-radius: 50%;
-}
-.velu-image__dot--red    { background: #ff5f57; }
-.velu-image__dot--yellow { background: #febc2e; }
-.velu-image__dot--green  { background: #28c840; }
-/* URL bar is absolutely centered in the chrome regardless of the dots'
-   width on the left — the .velu-glass__content already has
-   position: relative, so this anchors to that. */
-.velu-image__urlbar {
-  position: absolute;
-  inset-inline-start: 50%;
-  transform: translateX(-50%);
-  inline-size: 15%;
-  block-size: 0.5em;
-  border-radius: 999px;
-  background: color-mix(in srgb, var(--text-color) 14%, transparent);
-}
-
-/* ── Device-frame variant ───────────────────────────────────────────────── */
-/* Outer = grey card. Concentric nesting: outer → bezel → screen, each
-   radius = parent_radius - padding so all corner curves align. */
-.velu-image__frame {
-  position: relative;
-  display: flex;
-  justify-content: center;
-  padding: var(--s-1);
-  border-radius: var(--radius-lg);
-  overflow: hidden;
-  background: var(--surface-color);
-  max-inline-size: 18rem;
-  margin-inline: auto;
-}
-/* Bezel: concentric with outer card. */
-.velu-image__frame-bezel {
-  position: relative;
-  z-index: 1;
-  inline-size: 13rem;
-  max-inline-size: 100%;
-  border-radius: calc(var(--radius-lg) - var(--s-1));
-}
-.velu-image__frame-bezel > .velu-glass__content {
-  padding: var(--s-2);
-}
-/* Screen: concentric with bezel. Soft drop-shadow lifts it off the bezel. */
-.velu-image__frame-screen {
-  border-radius: calc(var(--radius-lg) - var(--s-1) - var(--s-2));
-  overflow: hidden;
-  box-shadow:
-    0 var(--s-2) var(--s-1) color-mix(in srgb, #000 18%, transparent),
-    0 var(--s-4) var(--s-3) color-mix(in srgb, #000 12%, transparent);
-}
+/* Image — plain / captioned / window-chrome / device-frame variants.
+   Tokenized; light/dark via [data-theme]. The window + frame variants share
+   an accent-glow + noise backdrop, plus the liquid-glass layered surface
+   (effect/tint/shine/content) for chrome bar + device bezel — SVG
+   feTurbulence→feDisplacementMap provides the actual refraction. */
+
+.velu-image {
+  display: block;
+  margin: 0; /* reset <figure> default margin */
+}
+/* Chrome variants: figure hugs the contained card so the caption
+   naturally centers under it instead of under the full content column. */
+.velu-image--chrome {
+  inline-size: fit-content;
+  margin-inline: auto;
+}
+
+.velu-image__img {
+  display: block;
+  inline-size: 100%;
+  block-size: auto;
+  border-radius: var(--radius-md);
+  object-fit: cover;
+}
+.velu-image__img--flush {
+  border-radius: 0;
+}
+
+.velu-image__caption {
+  margin-block-start: var(--s-1);
+  text-align: center;
+  font-size: var(--f-h6);
+  line-height: var(--lh-h6);
+  color: var(--muted-color);
+}
+
+/* ── Accent glow + noise grain (shared by window + frame) ────────────────── */
+/* Big soft blob peeking from outside the container. The position uses
+   negative insets so the blob's center is outside; overflow:hidden on
+   the parent clips it to a quarter visible. */
+.velu-image__glow {
+  position: absolute;
+  inset-block-start: calc(var(--s4) * -1);
+  inset-inline-start: calc(var(--s4) * -1);
+  inline-size: calc(var(--s5) * 5);
+  block-size: calc(var(--s5) * 5);
+  background: var(--accent-color);
+  border-radius: 50%;
+  filter: blur(var(--s3));
+  opacity: 0.95;
+  pointer-events: none;
+  z-index: 0;
+}
+.velu-image__noise {
+  position: absolute;
+  inset: 0;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+  opacity: 0.6;
+  mix-blend-mode: overlay;
+  pointer-events: none;
+  z-index: 0;
+}
+
+/* ── Liquid-glass surface (lucasromerodb pattern) ────────────────────────── */
+/* Four-layer stack: effect (backdrop-blur + SVG displacement filter),
+   tint (translucent white), shine (inset highlights), content (children).
+   Stays usable across themes — tint+shine are universal optical constants
+   (white), not palette tokens. */
+.velu-glass {
+  position: relative;
+  display: flex;
+  /* No overflow:hidden — each inner layer rounds itself via
+     `border-radius: inherit`, so we don't need to clip at the parent.
+     Skipping the clip lets children's box-shadows (e.g. the raised
+     screen inside the bezel) extend outside the glass surface. */
+  box-shadow:
+    0 var(--s-1) var(--s-1) color-mix(in srgb, #000 20%, transparent),
+    0 0 var(--s1) color-mix(in srgb, #000 10%, transparent);
+}
+/* Each layer rounds itself rather than relying on parent overflow:hidden —
+   Chrome doesn't reliably clip backdrop-filter / inset-box-shadow to a
+   rounded parent, which produces 90° corners poking through curves. */
+.velu-glass__effect,
+.velu-glass__tint,
+.velu-glass__shine,
+.velu-glass__content {
+  border-radius: inherit;
+}
+/* Displacement must be applied to the BACKDROP (what's behind the element),
+   not to the element itself. `filter: url()` would apply to the (empty)
+   effect div; `backdrop-filter: url()` refracts the actual backdrop.
+   Chromium-only; Safari/Firefox fall back to plain blur. */
+.velu-glass__effect {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  -webkit-backdrop-filter: blur(3px) url(#velu-glass-distortion);
+  backdrop-filter: blur(3px) url(#velu-glass-distortion);
+  isolation: isolate;
+}
+.velu-glass__tint {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  background: rgba(255, 255, 255, 0.25);
+}
+.velu-glass__shine {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  box-shadow:
+    inset 2px 2px 1px 0 rgba(255, 255, 255, 0.5),
+    inset -1px -1px 1px 1px rgba(255, 255, 255, 0.5);
+}
+.velu-glass__content {
+  position: relative;
+  z-index: 3;
+  inline-size: 100%;
+}
+
+/* ── Window-chrome variant ──────────────────────────────────────────────── */
+/* Outer = grey card. Nested radii are properly concentric:
+   outer_radius ▸ surface_radius (= outer - outer_padding) ▸
+   inner_radius (= surface - surface_padding). Padding is kept small
+   enough that every level's curve stays positive. */
+.velu-image__window {
+  position: relative;
+  padding: var(--s-1);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+  background: var(--surface-color);
+  max-inline-size: 36rem;
+  margin-inline: auto;
+}
+/* Glass surface (tray) that the chrome+image card sits on. Peeks out
+   around the inner card as a visible glass border.
+   radius = outer_radius - outer_padding (concentric with outer card). */
+.velu-image__window-surface {
+  position: relative;
+  z-index: 1;
+  inline-size: 100%;
+  border-radius: calc(var(--radius-lg) - var(--s-1));
+}
+.velu-image__window-surface > .velu-glass__content {
+  padding: var(--s-2);
+}
+/* Inner card holds the chrome bar + image.
+   radius = surface_radius - surface_padding (concentric with surface).
+   A soft drop-shadow lifts it off the glass tray. */
+.velu-image__window-inner {
+  position: relative;
+  inline-size: 100%;
+  border-radius: calc(var(--radius-lg) - var(--s-1) - var(--s-2));
+  overflow: hidden;
+  box-shadow:
+    0 var(--s-2) var(--s-1) color-mix(in srgb, #000 18%, transparent),
+    0 var(--s-4) var(--s-3) color-mix(in srgb, #000 12%, transparent);
+}
+/* Chrome bar sits ABOVE the image (in flow, no overlap). The image
+   renders below it. Chrome is glass-styled via the Glass wrapper.
+   Top corners match the window's radius; bottom stays flat where it
+   meets the image. Inner glass layers inherit via `border-radius:
+   inherit`. */
+.velu-image__chrome {
+  border-start-start-radius: calc(var(--radius-lg) - var(--s-1) - var(--s-2));
+  border-start-end-radius: calc(var(--radius-lg) - var(--s-1) - var(--s-2));
+  /* The default `.velu-glass` drop-shadow casts a dark line onto the
+     image below — undesired here since the chrome meets the image
+     directly. The bezel keeps its shadow because it sits in a padded
+     grey card that absorbs it. */
+  box-shadow: none;
+}
+.velu-image__chrome > .velu-glass__content {
+  display: flex;
+  align-items: center;
+  gap: var(--s-1);
+  padding: var(--s-1);
+}
+.velu-image__dots {
+  display: inline-flex;
+  gap: var(--s-3);
+  padding-inline: var(--s-3);
+}
+.velu-image__dot {
+  inline-size: 0.75em;
+  block-size: 0.75em;
+  border-radius: 50%;
+}
+.velu-image__dot--red    { background: #ff5f57; }
+.velu-image__dot--yellow { background: #febc2e; }
+.velu-image__dot--green  { background: #28c840; }
+/* URL bar is absolutely centered in the chrome regardless of the dots'
+   width on the left — the .velu-glass__content already has
+   position: relative, so this anchors to that. */
+.velu-image__urlbar {
+  position: absolute;
+  inset-inline-start: 50%;
+  transform: translateX(-50%);
+  inline-size: 15%;
+  block-size: 0.5em;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--text-color) 14%, transparent);
+}
+
+/* ── Device-frame variant ───────────────────────────────────────────────── */
+/* Outer = grey card. Concentric nesting: outer → bezel → screen, each
+   radius = parent_radius - padding so all corner curves align. */
+.velu-image__frame {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  padding: var(--s-1);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+  background: var(--surface-color);
+  max-inline-size: 18rem;
+  margin-inline: auto;
+}
+/* Bezel: concentric with outer card. */
+.velu-image__frame-bezel {
+  position: relative;
+  z-index: 1;
+  inline-size: 13rem;
+  max-inline-size: 100%;
+  border-radius: calc(var(--radius-lg) - var(--s-1));
+}
+.velu-image__frame-bezel > .velu-glass__content {
+  padding: var(--s-2);
+}
+/* Screen: concentric with bezel. Soft drop-shadow lifts it off the bezel. */
+.velu-image__frame-screen {
+  border-radius: calc(var(--radius-lg) - var(--s-1) - var(--s-2));
+  overflow: hidden;
+  box-shadow:
+    0 var(--s-2) var(--s-1) color-mix(in srgb, #000 18%, transparent),
+    0 var(--s-4) var(--s-3) color-mix(in srgb, #000 12%, transparent);
+}