@hyalo/angular 0.0.0-stage → 0.3.1

package/styles/palettes/rose.css

@@ -0,0 +1,47 @@
+/*
+ * Rose palette: raspberry on blush.
+ *
+ * Loaded on demand, never part of hyalo.css. Set data-hy-palette="rose" on
+ * <html> after this file has loaded, and remove the attribute to go back to
+ * the built-in palette. HyPalette does both for you.
+ *
+ * Each colour is written once with light-dark(), which resolves against the
+ * color-scheme that themes.css sets. Forced themes, the OS setting and
+ * .hy-theme-dark islands all keep working without repeating the values.
+ *
+ * The html in the selector outranks the dark theme rules in themes.css, so
+ * the palette wins in whatever order the two stylesheets load.
+ */
+@layer hy.tokens {
+  html:root[data-hy-palette='rose'],
+  [data-hy-palette='rose'] .hy-theme-dark {
+    --hy-bg: light-dark(#f8f0f2, #130a0e);
+    --hy-surface-1: light-dark(#ffffff, #1c1217);
+    --hy-surface-2: light-dark(#fcf6f7, #24181e);
+    --hy-surface-3: light-dark(#f1e5e8, #2e1f26);
+    --hy-surface-4: light-dark(#e7d6db, #3a2931);
+    --hy-ink: light-dark(#22121a, #f9edf1);
+    --hy-ink-2: light-dark(#523b45, #d3bcc5);
+    --hy-ink-3: light-dark(#6c535e, #a8919b);
+    --hy-ink-2-glass: light-dark(#432f38, #e0ccd4);
+    --hy-ink-3-glass: light-dark(#5a434d, #bba3ad);
+    --hy-line: light-dark(rgb(34 18 26 / 0.12), rgb(249 237 241 / 0.12));
+    --hy-line-strong: light-dark(rgb(34 18 26 / 0.24), rgb(249 237 241 / 0.26));
+    --hy-primary: light-dark(#b8175a, #f472b6);
+    --hy-primary-hover: light-dark(#9e134d, #f9a8d4);
+    --hy-primary-ink: light-dark(#ffffff, #2a0718);
+    --hy-primary-wash: light-dark(rgb(184 23 90 / 0.12), rgb(244 114 182 / 0.16));
+    --hy-secondary: light-dark(#4b44b5, #aaa6ff);
+    --hy-secondary-ink: light-dark(#ffffff, #120f33);
+    --hy-glass-border: light-dark(rgb(34 18 26 / 0.08), rgb(255 255 255 / 0.08));
+  }
+
+  /* Same as the high contrast rule in themes.css, which this file outranks. */
+  @media (prefers-contrast: more) {
+    html:root[data-hy-palette='rose'],
+    [data-hy-palette='rose'] .hy-theme-dark {
+      --hy-line: var(--hy-line-strong);
+      --hy-ink-3: var(--hy-ink-2);
+    }
+  }
+}

package/styles/parts/card.css

@@ -0,0 +1,49 @@
+/*
+ * Card slots. These classes come from directives on projected content, so
+ * they are styled globally instead of from inside the component.
+ */
+.hy-card__media {
+  display: block;
+  margin-block: calc(var(--_pad) * -1) var(--hy-space-2);
+  margin-inline: calc(var(--_pad) * -1);
+  inline-size: calc(100% + var(--_pad) * 2);
+  max-inline-size: none;
+  aspect-ratio: var(--hy-card-media-ratio, 16 / 10);
+  object-fit: cover;
+}
+
+.hy-card__header {
+  margin: 0;
+  font-size: var(--hy-step-2);
+  font-weight: 620;
+  line-height: var(--hy-leading-tight);
+  color: var(--hy-ink);
+}
+
+.hy-card__footer {
+  display: flex;
+  align-items: center;
+  gap: var(--hy-space-3);
+  margin-block-start: var(--hy-space-2);
+}
+
+.hy-card__link {
+  color: inherit;
+  text-decoration: none;
+}
+
+.hy-card__link::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+}
+
+.hy-card__link:focus-visible {
+  outline: none;
+}
+
+.hy-card :is(button, a:not(.hy-card__link), input, select, textarea, label) {
+  position: relative;
+  z-index: 1;
+}

package/styles/parts/dialog.css

@@ -0,0 +1,116 @@
+/*
+ * Dialogs and drawers. Both render in CDK overlays, so their styles live
+ * here. The panel is the .cdk-dialog-container inside the pane.
+ *
+ * The CDK injects its structural overlay styles without a layer, and
+ * unlayered rules beat everything in ours. That is why the container's
+ * display needs !important and the dialog widths are set inline from
+ * HyDialog instead of here.
+ */
+.hy-dialog-pane,
+.hy-drawer-pane {
+  max-inline-size: 100vw;
+}
+
+.hy-dialog-pane > .cdk-dialog-container,
+.hy-drawer-pane > .cdk-dialog-container {
+  display: flex !important;
+  flex-direction: column;
+  gap: var(--hy-space-4);
+  inline-size: 100%;
+  max-block-size: inherit;
+  padding: var(--hy-dialog-padding, var(--hy-space-7));
+  overflow: auto;
+  color: var(--hy-ink);
+  outline: none;
+}
+
+/*
+ * Content opened as a component puts its own host element in between.
+ * Let the parts inside it join the panel's flex layout.
+ */
+:is(.hy-dialog-pane, .hy-drawer-pane)
+  > .cdk-dialog-container
+  > :not(.hy-dialog__title, .hy-dialog__content, .hy-dialog__actions, .hy-drawer__grabber) {
+  display: contents;
+}
+
+/*
+ * The animation runs on the glass panel, not the pane. An ancestor with
+ * opacity below 1 becomes the backdrop root, so the panel's blur would see
+ * nothing behind it until the fade ended, then snap in.
+ */
+.hy-dialog-pane > .cdk-dialog-container {
+  border-radius: var(--hy-dialog-radius, var(--hy-radius-l));
+  max-block-size: calc(100dvh - 2 * var(--hy-space-6));
+  animation: hy-dialog-in var(--hy-dur-enter) var(--hy-ease-out);
+}
+
+.hy-dialog-pane[data-state='closing'] > .cdk-dialog-container {
+  animation: hy-dialog-out var(--hy-dur-exit) var(--hy-ease-inout) forwards;
+}
+
+.hy-dialog-pane {
+  inline-size: calc(100vw - 2 * var(--hy-space-4));
+  max-block-size: calc(100dvh - 2 * var(--hy-space-6));
+}
+
+@media (max-width: 40rem) {
+  .hy-dialog--full {
+    inline-size: 100vw;
+    block-size: 100dvh;
+    max-block-size: none;
+  }
+
+  .hy-dialog--full > .cdk-dialog-container {
+    border-radius: 0;
+    max-block-size: none;
+  }
+}
+
+/* Content parts */
+.hy-dialog__title {
+  margin: 0;
+  font-size: var(--hy-step-2);
+  font-weight: 640;
+  line-height: var(--hy-leading-tight);
+}
+
+.hy-dialog__content {
+  margin: 0;
+  flex: 1;
+  color: var(--hy-ink-2);
+}
+
+.hy-dialog__actions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: var(--hy-space-2);
+  margin-block-start: var(--hy-space-2);
+}
+
+/*
+ * Out the way it came in. The blur grows with the panel, so the glass reads
+ * as material arriving rather than a picture fading in. With reduced motion
+ * --hy-move is 0 and only the fade is left.
+ */
+@keyframes hy-dialog-in {
+  from {
+    opacity: 0;
+    translate: 0 calc(0.75rem * var(--hy-move));
+    scale: calc(1 - 0.03 * var(--hy-move));
+    backdrop-filter: blur(0) saturate(100%);
+    -webkit-backdrop-filter: blur(0) saturate(100%);
+  }
+}
+
+@keyframes hy-dialog-out {
+  to {
+    opacity: 0;
+    translate: 0 calc(0.75rem * var(--hy-move));
+    scale: calc(1 - 0.03 * var(--hy-move));
+    backdrop-filter: blur(0) saturate(100%);
+    -webkit-backdrop-filter: blur(0) saturate(100%);
+  }
+}

package/styles/parts/drawer.css

@@ -0,0 +1,124 @@
+/*
+ * Drawers and bottom sheets. Shares the panel and content styles in dialog.css.
+ *
+ * With motion on, the panel runs on a spring from TypeScript (see sheet.ts)
+ * and gets .hy-sheet-driven, which turns the keyframes off. The keyframes
+ * here are the reduced-motion path: a cross-fade, since --hy-move is 0.
+ * Like dialogs, the panel animates and not the pane, so its blur works.
+ */
+.hy-drawer-pane > .cdk-dialog-container {
+  block-size: 100%;
+  padding: var(--hy-drawer-padding, var(--hy-space-7));
+  border-radius: 0;
+  /* Side drawers are dragged sideways; vertical touches still scroll. */
+  touch-action: pan-y;
+  animation: hy-drawer-in var(--hy-dur-enter) var(--hy-ease-out);
+}
+
+.hy-drawer-pane > .cdk-dialog-container.hy-sheet-driven {
+  animation: none;
+}
+
+.hy-drawer-pane > .cdk-dialog-container[data-dragging] {
+  user-select: none;
+  cursor: grabbing;
+}
+
+.hy-drawer--start > .cdk-dialog-container {
+  border-start-end-radius: var(--hy-drawer-radius, var(--hy-radius-l));
+  border-end-end-radius: var(--hy-drawer-radius, var(--hy-radius-l));
+}
+
+.hy-drawer--end > .cdk-dialog-container {
+  border-start-start-radius: var(--hy-drawer-radius, var(--hy-radius-l));
+  border-end-start-radius: var(--hy-drawer-radius, var(--hy-radius-l));
+}
+
+.hy-drawer--bottom > .cdk-dialog-container {
+  position: relative;
+  max-block-size: 85dvh;
+  border-start-start-radius: var(--hy-drawer-radius, var(--hy-radius-l));
+  border-start-end-radius: var(--hy-drawer-radius, var(--hy-radius-l));
+  padding-block-end: max(var(--hy-drawer-padding, var(--hy-space-7)), env(safe-area-inset-bottom));
+  touch-action: pan-x pan-y;
+  animation-name: hy-sheet-in;
+}
+
+/* The handle that says "this can be pulled down". */
+.hy-drawer__grabber {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline: 0;
+  block-size: var(--hy-space-6);
+  touch-action: none;
+  cursor: grab;
+}
+
+.hy-drawer__grabber::before {
+  content: '';
+  position: absolute;
+  inset-block-start: var(--hy-space-2);
+  inset-inline-start: 50%;
+  inline-size: 2.25rem;
+  block-size: 0.3125rem;
+  translate: -50% 0;
+  border-radius: var(--hy-radius-pill);
+  background: color-mix(in srgb, var(--hy-ink) 28%, transparent);
+}
+
+.hy-drawer__grabber:dir(rtl)::before {
+  translate: 50% 0;
+}
+
+.hy-drawer--start {
+  --_from: -100%;
+}
+
+.hy-drawer--end {
+  --_from: 100%;
+}
+
+[dir='rtl'] .hy-drawer--start {
+  --_from: 100%;
+}
+
+[dir='rtl'] .hy-drawer--end {
+  --_from: -100%;
+}
+
+.hy-drawer-pane[data-state='closing'] > .cdk-dialog-container {
+  animation: hy-drawer-out var(--hy-dur-exit) var(--hy-ease-inout) forwards;
+}
+
+.hy-drawer--bottom[data-state='closing'] > .cdk-dialog-container {
+  animation-name: hy-sheet-out;
+}
+
+/* Without movement (--hy-move: 0) these fade instead of slide. */
+@keyframes hy-drawer-in {
+  from {
+    opacity: var(--hy-move);
+    translate: calc(var(--_from) * var(--hy-move)) 0;
+  }
+}
+
+@keyframes hy-drawer-out {
+  to {
+    opacity: var(--hy-move);
+    translate: calc(var(--_from) * var(--hy-move)) 0;
+  }
+}
+
+@keyframes hy-sheet-in {
+  from {
+    opacity: var(--hy-move);
+    translate: 0 calc(100% * var(--hy-move));
+  }
+}
+
+@keyframes hy-sheet-out {
+  to {
+    opacity: var(--hy-move);
+    translate: 0 calc(100% * var(--hy-move));
+  }
+}

package/styles/parts/field.css

@@ -0,0 +1,44 @@
+/* Controls projected into hy-field. */
+.hy-input {
+  flex: 1;
+  min-inline-size: 0;
+  align-self: stretch;
+  padding: 0;
+  border: 0;
+  border-radius: inherit;
+  outline: 0;
+  appearance: none;
+  background: transparent;
+  color: var(--hy-ink);
+  font: inherit;
+}
+
+/* The enclosing field owns the rounded focus ring, including search inputs. */
+.hy-field__box .hy-input:focus-visible {
+  outline: none;
+  box-shadow: none;
+}
+
+.hy-input::placeholder {
+  color: var(--hy-ink-3);
+  opacity: 1;
+}
+
+textarea.hy-input {
+  padding-block: var(--hy-space-2);
+  min-block-size: 5rem;
+  resize: vertical;
+  line-height: var(--hy-leading);
+}
+
+.hy-input:disabled {
+  cursor: not-allowed;
+}
+
+.hy-field__prefix,
+.hy-field__suffix {
+  display: inline-flex;
+  align-items: center;
+  flex: none;
+  color: var(--hy-ink-3);
+}

package/styles/parts/glass.css

@@ -0,0 +1,139 @@
+/*
+ * The glass material. Any element with .hy-glass and data-material gets it,
+ * usually through the hyMaterial directive.
+ *
+ * Layers, from top to bottom: a pointer glow (driven by --hy-px / --hy-py
+ * from the tilt directive), a reflection gradient, and the fill itself.
+ *
+ * Materials and thicknesses only change custom properties, never the
+ * `background` itself. That keeps the fallbacks at the bottom, which do set
+ * it, in charge for every material.
+ */
+
+/* Registered so hover and tilt can fade the glow instead of switching it. */
+@property --hy-glow {
+  syntax: '<number>';
+  inherits: true;
+  initial-value: 0;
+}
+
+.hy-glass {
+  --_fill-top: var(--hy-glass-fill-top);
+  --_fill-bottom: var(--hy-glass-fill-bottom);
+  --_tint: var(--hy-glass-tint);
+  --_fill: linear-gradient(
+    160deg,
+    rgb(var(--_tint) / var(--_fill-top)),
+    rgb(var(--_tint) / var(--_fill-bottom))
+  );
+  /* Thicker glass blurs more; clear glass blurs less. */
+  --_depth: 1;
+  --_clarity: 1;
+  --_blur: calc(var(--hy-glass-blur) * var(--_depth) * var(--_clarity));
+  --_shadow: var(--hy-glass-shadow);
+  /* The backdrop keeps changing, so secondary text gets more contrast. */
+  --hy-ink-2: var(--hy-ink-2-glass);
+  --hy-ink-3: var(--hy-ink-3-glass);
+  background:
+    radial-gradient(
+      circle at var(--hy-px, 50%) var(--hy-py, -30%),
+      rgb(var(--hy-glass-glow) / var(--hy-glow, 0)),
+      transparent 55%
+    ),
+    var(--hy-glass-reflection), var(--_fill);
+  backdrop-filter: blur(var(--_blur)) saturate(var(--hy-glass-saturate));
+  -webkit-backdrop-filter: blur(var(--_blur)) saturate(var(--hy-glass-saturate));
+  border: 1px solid var(--hy-glass-border);
+  box-shadow: var(--hy-glass-edge), var(--_shadow);
+}
+
+/* Thickness: bigger surfaces read as heavier material. */
+.hy-glass[data-thickness='thin'] {
+  --_depth: 0.5;
+  --_shadow: var(--hy-glass-shadow-thin);
+}
+
+.hy-glass[data-thickness='thick'] {
+  --_depth: 1.6;
+  --_shadow: var(--hy-glass-shadow-thick);
+}
+
+.hy-glass[data-material='clear'] {
+  --_fill-top: calc(var(--hy-glass-fill-top) * 0.4);
+  --_fill-bottom: calc(var(--hy-glass-fill-bottom) * 0.3);
+  --_clarity: 0.4;
+}
+
+.hy-glass[data-material='tinted'] {
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+  --_fill: linear-gradient(
+    160deg,
+    color-mix(in srgb, var(--hy-primary) 22%, transparent),
+    color-mix(in srgb, var(--hy-primary) 8%, transparent)
+  );
+}
+
+.hy-glass[data-material='solid'] {
+  --_fill: linear-gradient(var(--hy-surface-1), var(--hy-surface-1));
+  --hy-ink-2: inherit;
+  --hy-ink-3: inherit;
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+}
+
+/* No blur support, or the user asked for less transparency: go solid. */
+@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+  .hy-glass {
+    background: var(--hy-surface-1);
+  }
+}
+
+@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
+  .hy-glass {
+    background: var(--hy-surface-1);
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+    border-color: var(--hy-line-strong);
+  }
+}
+
+@media (forced-colors: active) {
+  .hy-glass {
+    border: 1px solid CanvasText;
+    background: Canvas;
+  }
+}
+
+/*
+ * Wrap the page content in .hy-glass-scope when glass overlays (popovers,
+ * menus, dialogs) open above glass content. Chrome redraws only a rectangle
+ * around a change, grown by each blur it touches. A hover inside a glass
+ * overlay can grow it across the edge of glass below, which is then redrawn
+ * in part and shows a brighter box.
+ *
+ * Any filter gives the content its own layer, so changes in an overlay never
+ * redraw it. It is also a backdrop root, so glass inside blurs only what is
+ * in the scope; painting the page background here keeps that identical.
+ * Like any filter, it is the containing block for fixed elements inside it.
+ */
+.hy-glass-scope {
+  filter: blur(0);
+  background: var(--hy-bg);
+}
+
+/* Overlay panels and backdrops from CDK. */
+.hy-backdrop {
+  background: var(--hy-scrim);
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+}
+
+/* Set by HyDialogRef while a dialog or drawer plays its exit animation. */
+.hy-backdrop[data-state='closing'] {
+  opacity: 0;
+}
+
+.hy-backdrop-transparent {
+  background: transparent;
+}

package/styles/parts/motion.css

@@ -0,0 +1,101 @@
+/* Styles for the interaction directives: reveal, tilt, magnetic, ripple. */
+
+[data-hy-reveal] {
+  transition:
+    opacity var(--hy-dur-scene) var(--hy-ease-out) var(--hy-reveal-delay, 0ms),
+    translate var(--hy-dur-scene) var(--hy-ease-out) var(--hy-reveal-delay, 0ms),
+    scale var(--hy-dur-scene) var(--hy-ease-out) var(--hy-reveal-delay, 0ms);
+}
+
+[data-hy-reveal='hidden'] {
+  opacity: 0;
+}
+
+[data-hy-reveal='hidden'][data-hy-reveal-from='up'] {
+  translate: 0 1.5rem;
+}
+
+[data-hy-reveal='hidden'][data-hy-reveal-from='scale'] {
+  scale: 0.96;
+}
+
+@media print {
+  [data-hy-reveal] {
+    opacity: 1 !important;
+    translate: none !important;
+    scale: none !important;
+  }
+}
+
+.hy-tilt {
+  transform: perspective(900px) rotateX(var(--hy-rx, 0deg)) rotateY(var(--hy-ry, 0deg));
+  transform-style: preserve-3d;
+  transition:
+    transform var(--hy-dur-settle) var(--hy-ease-out),
+    --hy-glow var(--hy-dur-settle) var(--hy-ease-out);
+}
+
+.hy-magnetic {
+  translate: var(--hy-mx, 0px) var(--hy-my, 0px);
+  transition: translate var(--hy-dur-settle) var(--hy-ease-out);
+}
+
+/* GSAP already smooths these values, so the CSS transition would lag. */
+.hy-tilt.hy-gsap {
+  transition: --hy-glow var(--hy-dur-settle) var(--hy-ease-out);
+}
+
+.hy-magnetic.hy-gsap {
+  transition: none;
+}
+
+.hy-ripple-host {
+  position: relative;
+  overflow: hidden;
+  isolation: isolate;
+}
+
+.hy-ripple {
+  position: absolute;
+  /* Pointer coordinates are physical, so the ripple is placed physically. */
+  top: calc(var(--hy-ripple-y) - var(--hy-ripple-size) / 2);
+  left: calc(var(--hy-ripple-x) - var(--hy-ripple-size) / 2); /* physical-ok */
+  inline-size: var(--hy-ripple-size);
+  block-size: var(--hy-ripple-size);
+  border-radius: 50%;
+  background: radial-gradient(closest-side, currentColor, transparent);
+  opacity: 0;
+  pointer-events: none;
+  z-index: -1;
+  animation: hy-ripple var(--hy-dur-scene) var(--hy-ease-out);
+}
+
+@keyframes hy-ripple {
+  from {
+    scale: 0;
+    opacity: 0.18;
+  }
+  to {
+    scale: 1;
+    opacity: 0;
+  }
+}
+
+:root:is([data-hy-motion='reduced'], [data-hy-fidelity='low']) .hy-tilt {
+  transform: none;
+  transition: none;
+}
+:root:is([data-hy-motion='reduced'], [data-hy-fidelity='low']) .hy-magnetic {
+  translate: none;
+  transition: none;
+}
+@media (prefers-reduced-motion: reduce) {
+  :root:not([data-hy-motion='full']) .hy-tilt {
+    transform: none;
+    transition: none;
+  }
+  :root:not([data-hy-motion='full']) .hy-magnetic {
+    translate: none;
+    transition: none;
+  }
+}

package/styles/parts/navbar.css

@@ -0,0 +1,55 @@
+/*
+ * Navbar slots. Links and brand are projected content, so their styles are
+ * global. The collapse rule uses the navbar's container query.
+ */
+.hy-navbar__brand {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--hy-space-2);
+  color: var(--hy-ink);
+  font-weight: 650;
+  font-size: var(--hy-step-1);
+  text-decoration: none;
+  white-space: nowrap;
+}
+
+.hy-navbar__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--hy-space-2);
+}
+
+.hy-navbar__links > a {
+  display: inline-flex;
+  align-items: center;
+  min-block-size: 2.25rem;
+  padding-inline: var(--hy-space-3);
+  border-radius: var(--hy-navbar-link-radius, var(--hy-radius-pill));
+  color: var(--hy-ink-2);
+  font-weight: 520;
+  text-decoration: none;
+  transition:
+    color var(--hy-dur-quick) var(--hy-ease-out),
+    background-color var(--hy-dur-quick) var(--hy-ease-out);
+}
+
+.hy-navbar__links > a:hover,
+.hy-navbar__links > a[aria-current] {
+  color: var(--hy-ink);
+  background-color: color-mix(in srgb, var(--hy-ink) 7%, transparent);
+}
+
+.hy-navbar__links > a:focus-visible {
+  outline: none;
+  box-shadow: var(--hy-focus-ring);
+}
+
+@container hy-navbar (max-width: 48rem) {
+  .hy-navbar__actions {
+    margin-inline-start: auto;
+  }
+
+  .hy-navbar__links > a {
+    min-block-size: 2.75rem;
+  }
+}

package/styles/parts/popover.css

@@ -0,0 +1,27 @@
+/* Tooltip and popover panels. Their enter and exit live in presence.css. */
+
+.hy-tooltip {
+  display: block;
+  max-inline-size: 18rem;
+  padding: var(--hy-space-1) var(--hy-space-3);
+  border-radius: var(--hy-tooltip-radius, var(--hy-radius-s));
+  background: var(--hy-tooltip-bg, color-mix(in srgb, var(--hy-ink) 92%, transparent));
+  color: var(--hy-tooltip-ink, var(--hy-bg));
+  font-size: var(--hy-step--1);
+  letter-spacing: var(--hy-tracking-small);
+  line-height: 1.4;
+  box-shadow: 0 6px 20px -8px rgb(0 0 0 / 0.4);
+}
+
+.hy-tooltip-pane {
+  z-index: var(--hy-z-tooltip);
+}
+
+.hy-popover {
+  min-inline-size: 12rem;
+  max-inline-size: min(22rem, 100vw - 1.5rem);
+  padding: var(--hy-popover-padding, var(--hy-space-4));
+  border-radius: var(--hy-popover-radius, var(--hy-radius-m));
+  color: var(--hy-ink);
+  outline: none;
+}