@hyalo/angular 0.0.0-stage → 0.1.0

package/styles/hyalo-core.css

@@ -0,0 +1,25 @@
+/*
+ * @hyalo/angular core stylesheet: reset, tokens, themes, glass, motion,
+ * typography, and the slot styles of card, navbar and field. Use it instead
+ * of hyalo.css to leave out the overlay styles, and add the ones the app
+ * uses from overlays/:
+ *
+ *   "styles": [
+ *     "node_modules/@hyalo/angular/styles/hyalo-core.css",
+ *     "node_modules/@hyalo/angular/styles/overlays/dialog.css",
+ *     "src/styles.css"
+ *   ]
+ *
+ * Everything sits in cascade layers, so unlayered app CSS always wins.
+ */
+@layer hy.reset, hy.tokens, hy.base, hy.utilities;
+
+@import './parts/reset.css' layer(hy.reset);
+@import './parts/tokens.css' layer(hy.tokens);
+@import './parts/themes.css' layer(hy.tokens);
+@import './parts/glass.css' layer(hy.base);
+@import './parts/motion.css' layer(hy.base);
+@import './parts/card.css' layer(hy.base);
+@import './parts/navbar.css' layer(hy.base);
+@import './parts/field.css' layer(hy.base);
+@import './parts/typography.css' layer(hy.utilities);

package/styles/hyalo.css

@@ -0,0 +1,17 @@
+/*
+ * @hyalo/angular stylesheet. Add it once to the app's global styles:
+ *
+ *   "styles": ["node_modules/@hyalo/angular/styles/hyalo.css", "src/styles.css"]
+ *
+ * It is hyalo-core.css plus every file in overlays/. To ship only the
+ * overlays the app uses, list those next to hyalo-core.css instead.
+ *
+ * Everything sits in cascade layers, so unlayered app CSS always wins.
+ */
+@layer hy.reset, hy.tokens, hy.base, hy.utilities;
+
+@import './hyalo-core.css';
+@import './overlays/select.css';
+@import './overlays/dialog.css';
+@import './overlays/popover.css';
+@import './overlays/toast.css';

package/styles/overlays/dialog.css

@@ -0,0 +1,9 @@
+/*
+ * Panel styles for HyDialog and HyDrawer from @hyalo/angular/dialog,
+ * which render in CDK overlays.
+ * Add it next to hyalo-core.css. hyalo.css already includes it.
+ */
+@layer hy.reset, hy.tokens, hy.base, hy.utilities;
+
+@import '../parts/dialog.css' layer(hy.base);
+@import '../parts/drawer.css' layer(hy.base);

package/styles/overlays/popover.css

@@ -0,0 +1,9 @@
+/*
+ * Panel styles for hyTooltip and hyPopover from @hyalo/angular/popover,
+ * which render in CDK overlays.
+ * Add it next to hyalo-core.css. hyalo.css already includes it.
+ */
+@layer hy.reset, hy.tokens, hy.base, hy.utilities;
+
+@import '../parts/presence.css' layer(hy.base);
+@import '../parts/popover.css' layer(hy.base);

package/styles/overlays/select.css

@@ -0,0 +1,9 @@
+/*
+ * Panel styles for hy-select from @hyalo/angular/select, which renders
+ * in a CDK overlay.
+ * Add it next to hyalo-core.css. hyalo.css already includes it.
+ */
+@layer hy.reset, hy.tokens, hy.base, hy.utilities;
+
+@import '../parts/select.css' layer(hy.base);
+@import '../parts/presence.css' layer(hy.base);

package/styles/overlays/toast.css

@@ -0,0 +1,8 @@
+/*
+ * Styles for HyToaster from @hyalo/angular/toast, which renders in a CDK
+ * overlay.
+ * Add it next to hyalo-core.css. hyalo.css already includes it.
+ */
+@layer hy.reset, hy.tokens, hy.base, hy.utilities;
+
+@import '../parts/toast.css' layer(hy.base);

package/styles/palettes/aurora.css

@@ -0,0 +1,47 @@
+/*
+ * Aurora palette: teal on cool sea-glass neutrals.
+ *
+ * Loaded on demand, never part of hyalo.css. Set data-hy-palette="aurora" 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='aurora'],
+  [data-hy-palette='aurora'] .hy-theme-dark {
+    --hy-bg: light-dark(#ecf3f2, #081110);
+    --hy-surface-1: light-dark(#ffffff, #0f1a19);
+    --hy-surface-2: light-dark(#f4f9f8, #152321);
+    --hy-surface-3: light-dark(#e2ecea, #1c2c2a);
+    --hy-surface-4: light-dark(#d3e0dd, #263735);
+    --hy-ink: light-dark(#0c1c1b, #e8f3f1);
+    --hy-ink-2: light-dark(#344a48, #b2c6c3);
+    --hy-ink-3: light-dark(#4d6462, #87a09c);
+    --hy-ink-2-glass: light-dark(#273c3a, #c6d8d5);
+    --hy-ink-3-glass: light-dark(#3d5351, #a0b6b2);
+    --hy-line: light-dark(rgb(12 28 27 / 0.12), rgb(232 243 241 / 0.12));
+    --hy-line-strong: light-dark(rgb(12 28 27 / 0.24), rgb(232 243 241 / 0.26));
+    --hy-primary: light-dark(#0f766e, #2dd4bf);
+    --hy-primary-hover: light-dark(#0b625b, #5eead4);
+    --hy-primary-ink: light-dark(#ffffff, #04201d);
+    --hy-primary-wash: light-dark(rgb(15 118 110 / 0.12), rgb(45 212 191 / 0.16));
+    --hy-secondary: light-dark(#6d3fc4, #b9a2ff);
+    --hy-secondary-ink: light-dark(#ffffff, #1a0f33);
+    --hy-glass-border: light-dark(rgb(12 28 27 / 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='aurora'],
+    [data-hy-palette='aurora'] .hy-theme-dark {
+      --hy-line: var(--hy-line-strong);
+      --hy-ink-3: var(--hy-ink-2);
+    }
+  }
+}

package/styles/palettes/ember.css

@@ -0,0 +1,47 @@
+/*
+ * Ember palette: burnt orange on warm stone.
+ *
+ * Loaded on demand, never part of hyalo.css. Set data-hy-palette="ember" 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='ember'],
+  [data-hy-palette='ember'] .hy-theme-dark {
+    --hy-bg: light-dark(#f6f1ec, #120c08);
+    --hy-surface-1: light-dark(#fffdfb, #1b1410);
+    --hy-surface-2: light-dark(#faf6f2, #231a15);
+    --hy-surface-3: light-dark(#efe7df, #2c221b);
+    --hy-surface-4: light-dark(#e4d9ce, #382c24);
+    --hy-ink: light-dark(#1f1610, #f6eee8);
+    --hy-ink-2: light-dark(#4d3f35, #cdbfb4);
+    --hy-ink-3: light-dark(#67584c, #a3948a);
+    --hy-ink-2-glass: light-dark(#3f3229, #dccfc5);
+    --hy-ink-3-glass: light-dark(#554739, #b6a79c);
+    --hy-line: light-dark(rgb(31 22 16 / 0.12), rgb(246 238 232 / 0.12));
+    --hy-line-strong: light-dark(rgb(31 22 16 / 0.24), rgb(246 238 232 / 0.26));
+    --hy-primary: light-dark(#b33b0a, #fb923c);
+    --hy-primary-hover: light-dark(#983209, #fdba74);
+    --hy-primary-ink: light-dark(#ffffff, #1f0f04);
+    --hy-primary-wash: light-dark(rgb(179 59 10 / 0.12), rgb(251 146 60 / 0.16));
+    --hy-secondary: light-dark(#365a85, #9dbbe0);
+    --hy-secondary-ink: light-dark(#ffffff, #0b1626);
+    --hy-glass-border: light-dark(rgb(31 22 16 / 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='ember'],
+    [data-hy-palette='ember'] .hy-theme-dark {
+      --hy-line: var(--hy-line-strong);
+      --hy-ink-3: var(--hy-ink-2);
+    }
+  }
+}

package/styles/palettes/graphite.css

@@ -0,0 +1,47 @@
+/*
+ * Graphite palette: monochrome, ink as the primary.
+ *
+ * Loaded on demand, never part of hyalo.css. Set data-hy-palette="graphite" 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='graphite'],
+  [data-hy-palette='graphite'] .hy-theme-dark {
+    --hy-bg: light-dark(#f0f0f1, #0b0b0c);
+    --hy-surface-1: light-dark(#ffffff, #141416);
+    --hy-surface-2: light-dark(#f7f7f8, #1b1b1e);
+    --hy-surface-3: light-dark(#e8e8ea, #232327);
+    --hy-surface-4: light-dark(#dcdcdf, #2d2d32);
+    --hy-ink: light-dark(#111113, #f1f1f3);
+    --hy-ink-2: light-dark(#3d3d43, #c0c0c6);
+    --hy-ink-3: light-dark(#5a5a62, #95959d);
+    --hy-ink-2-glass: light-dark(#2f2f34, #d0d0d5);
+    --hy-ink-3-glass: light-dark(#48484f, #aaaab1);
+    --hy-line: light-dark(rgb(17 17 19 / 0.12), rgb(241 241 243 / 0.12));
+    --hy-line-strong: light-dark(rgb(17 17 19 / 0.24), rgb(241 241 243 / 0.26));
+    --hy-primary: light-dark(#1f1f23, #ececef);
+    --hy-primary-hover: light-dark(#38383e, #ffffff);
+    --hy-primary-ink: light-dark(#ffffff, #111113);
+    --hy-primary-wash: light-dark(rgb(31 31 35 / 0.1), rgb(236 236 239 / 0.14));
+    --hy-secondary: light-dark(#1f5fd1, #82aaff);
+    --hy-secondary-ink: light-dark(#ffffff, #0a1530);
+    --hy-glass-border: light-dark(rgb(17 17 19 / 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='graphite'],
+    [data-hy-palette='graphite'] .hy-theme-dark {
+      --hy-line: var(--hy-line-strong);
+      --hy-ink-3: var(--hy-ink-2);
+    }
+  }
+}

package/styles/palettes/ocean.css

@@ -0,0 +1,47 @@
+/*
+ * Ocean palette: deep sky blue on misty slate.
+ *
+ * Loaded on demand, never part of hyalo.css. Set data-hy-palette="ocean" 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='ocean'],
+  [data-hy-palette='ocean'] .hy-theme-dark {
+    --hy-bg: light-dark(#edf3f8, #07101a);
+    --hy-surface-1: light-dark(#ffffff, #0e1824);
+    --hy-surface-2: light-dark(#f5f9fc, #14202e);
+    --hy-surface-3: light-dark(#e3ecf3, #1b2938);
+    --hy-surface-4: light-dark(#d4e0ea, #253446);
+    --hy-ink: light-dark(#0b1926, #e9f2fa);
+    --hy-ink-2: light-dark(#344757, #b3c4d4);
+    --hy-ink-3: light-dark(#4e6274, #889bad);
+    --hy-ink-2-glass: light-dark(#273a4a, #c7d6e3);
+    --hy-ink-3-glass: light-dark(#3e5164, #a1b3c4);
+    --hy-line: light-dark(rgb(11 25 38 / 0.12), rgb(233 242 250 / 0.12));
+    --hy-line-strong: light-dark(rgb(11 25 38 / 0.24), rgb(233 242 250 / 0.26));
+    --hy-primary: light-dark(#0369a1, #38bdf8);
+    --hy-primary-hover: light-dark(#025a8a, #7dd3fc);
+    --hy-primary-ink: light-dark(#ffffff, #041826);
+    --hy-primary-wash: light-dark(rgb(3 105 161 / 0.12), rgb(56 189 248 / 0.16));
+    --hy-secondary: light-dark(#b13f22, #ff9f80);
+    --hy-secondary-ink: light-dark(#ffffff, #2a0c04);
+    --hy-glass-border: light-dark(rgb(11 25 38 / 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='ocean'],
+    [data-hy-palette='ocean'] .hy-theme-dark {
+      --hy-line: var(--hy-line-strong);
+      --hy-ink-3: var(--hy-ink-2);
+    }
+  }
+}

package/styles/palettes/orchid.css

@@ -0,0 +1,47 @@
+/*
+ * Orchid palette: violet on lilac-grey.
+ *
+ * Loaded on demand, never part of hyalo.css. Set data-hy-palette="orchid" 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='orchid'],
+  [data-hy-palette='orchid'] .hy-theme-dark {
+    --hy-bg: light-dark(#f3f0f8, #0e0b14);
+    --hy-surface-1: light-dark(#ffffff, #17131f);
+    --hy-surface-2: light-dark(#f8f6fb, #1e1928);
+    --hy-surface-3: light-dark(#ebe6f3, #272132);
+    --hy-surface-4: light-dark(#ded7ea, #322a3f);
+    --hy-ink: light-dark(#1a1426, #f2eefa);
+    --hy-ink-2: light-dark(#463d55, #c4bbd4);
+    --hy-ink-3: light-dark(#605670, #9a90ac);
+    --hy-ink-2-glass: light-dark(#372e45, #d3cbe1);
+    --hy-ink-3-glass: light-dark(#4e445d, #afa5c1);
+    --hy-line: light-dark(rgb(26 20 38 / 0.12), rgb(242 238 250 / 0.12));
+    --hy-line-strong: light-dark(rgb(26 20 38 / 0.24), rgb(242 238 250 / 0.26));
+    --hy-primary: light-dark(#7634cc, #c39bff);
+    --hy-primary-hover: light-dark(#632bb0, #d5b8ff);
+    --hy-primary-ink: light-dark(#ffffff, #160a2a);
+    --hy-primary-wash: light-dark(rgb(118 52 204 / 0.12), rgb(195 155 255 / 0.16));
+    --hy-secondary: light-dark(#0f6f66, #5fd8c8);
+    --hy-secondary-ink: light-dark(#ffffff, #04201d);
+    --hy-glass-border: light-dark(rgb(26 20 38 / 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='orchid'],
+    [data-hy-palette='orchid'] .hy-theme-dark {
+      --hy-line: var(--hy-line-strong);
+      --hy-ink-3: var(--hy-ink-2);
+    }
+  }
+}

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));
+  }
+}