@hyalo/angular 0.0.0-stage → 0.3.1

package/styles/parts/presence.css

@@ -0,0 +1,55 @@
+/*
+ * Tooltip, popover and select panels render in CDK overlays. They enter and
+ * leave through data-state (see HyPresence): `closed` and `closing` are the
+ * hidden pose, `open` the shown one. CDK sets transform-origin on each panel
+ * to the side that faces its trigger, so the scale grows out of the trigger.
+ *
+ * Transitions rather than keyframes, so a panel reopened mid-exit turns
+ * around from where it is. With reduced motion only the fade is left.
+ */
+:is(.hy-tooltip, .hy-popover, .hy-select__panel) {
+  transition:
+    opacity var(--hy-dur-enter) var(--hy-ease-out),
+    scale var(--hy-dur-enter) var(--hy-ease-out);
+}
+
+:is(.hy-tooltip, .hy-popover, .hy-select__panel):is([data-state='closed'], [data-state='closing']) {
+  opacity: 0;
+  scale: calc(1 - 0.06 * var(--hy-move));
+}
+
+:is(.hy-popover, .hy-select__panel) {
+  transition:
+    opacity var(--hy-dur-enter) var(--hy-ease-out),
+    scale var(--hy-dur-enter) var(--hy-ease-out),
+    backdrop-filter var(--hy-dur-enter) var(--hy-ease-out),
+    -webkit-backdrop-filter var(--hy-dur-enter) var(--hy-ease-out);
+}
+
+/* The glass materialises: the blur grows in with the panel. */
+:is(.hy-popover, .hy-select__panel):is([data-state='closed'], [data-state='closing']) {
+  backdrop-filter: blur(0) saturate(100%);
+  -webkit-backdrop-filter: blur(0) saturate(100%);
+}
+
+/*
+ * CDK can attach a panel before its overlay is rendered, so the closed pose
+ * set first is never seen. The starting style gives the open state a pose
+ * to transition from on its first frame.
+ */
+@starting-style {
+  :is(.hy-tooltip, .hy-popover, .hy-select__panel)[data-state='open'] {
+    opacity: 0;
+    scale: calc(1 - 0.06 * var(--hy-move));
+  }
+
+  :is(.hy-popover, .hy-select__panel)[data-state='open'] {
+    backdrop-filter: blur(0) saturate(100%);
+    -webkit-backdrop-filter: blur(0) saturate(100%);
+  }
+}
+
+:is(.hy-tooltip, .hy-popover, .hy-select__panel)[data-state='closing'] {
+  transition-duration: var(--hy-dur-exit);
+  transition-timing-function: var(--hy-ease-inout);
+}

package/styles/parts/reset.css

@@ -0,0 +1,42 @@
+/* A small reset. It sits in the lowest layer so any app style wins over it. */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  background: var(--hy-bg);
+  color: var(--hy-ink);
+  font-family: var(--hy-font-body);
+  font-size: var(--hy-step-0);
+  line-height: var(--hy-leading);
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+
+:where(h1, h2, h3, h4, h5, h6) {
+  font-family: var(--hy-font-display);
+  line-height: var(--hy-leading-tight);
+  text-wrap: balance;
+}
+
+:where(p) {
+  text-wrap: pretty;
+}
+
+:where(img, svg, video, canvas) {
+  display: block;
+  max-inline-size: 100%;
+}
+
+:where(button, input, select, textarea) {
+  font: inherit;
+  color: inherit;
+}
+
+:where(:focus-visible) {
+  outline: 2px solid var(--hy-primary);
+  outline-offset: 2px;
+}

package/styles/parts/select.css

@@ -0,0 +1,46 @@
+/* The select dropdown renders in a CDK overlay, outside the component. */
+.hy-select__panel {
+  /* The pane is a flex row sized to the trigger; fill it. */
+  flex: 1;
+  max-block-size: min(20rem, 60vh);
+  overflow-y: auto;
+  padding: var(--hy-space-1);
+  border-radius: var(--hy-select-panel-radius, var(--hy-radius-m));
+  outline: none;
+}
+
+.hy-select__option {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--hy-space-3);
+  min-block-size: 2.5rem;
+  padding-inline: var(--hy-space-3);
+  border-radius: var(--hy-select-option-radius, var(--hy-radius-s));
+  color: var(--hy-ink);
+  cursor: pointer;
+}
+
+.hy-select__option[data-active='true'] {
+  background: color-mix(in srgb, var(--hy-ink) 8%, transparent);
+  outline: 2px solid var(--hy-primary);
+  outline-offset: -2px;
+}
+
+.hy-select__option[aria-selected='true'] {
+  font-weight: 600;
+}
+
+.hy-select__check {
+  visibility: hidden;
+  color: var(--hy-primary);
+}
+
+.hy-select__option[aria-selected='true'] .hy-select__check {
+  visibility: visible;
+}
+
+.hy-select__option[aria-disabled='true'] {
+  opacity: 0.45;
+  cursor: not-allowed;
+}

package/styles/parts/themes.css

@@ -0,0 +1,105 @@
+/*
+ * Dark theme ("obsidian"). Set data-hy-theme="dark" on <html> to force it,
+ * data-hy-theme="light" to opt out, or leave it unset to follow the OS.
+ * The same values are repeated for both selectors because CSS has no mixins.
+ */
+:root {
+  color-scheme: light;
+}
+
+:root[data-hy-theme='dark'],
+.hy-theme-dark {
+  color-scheme: dark;
+  --hy-bg: #0a0c11;
+  --hy-surface-1: #13161d;
+  --hy-surface-2: #1a1e26;
+  --hy-surface-3: #222731;
+  --hy-surface-4: #2c323e;
+  --hy-ink: #eef1f6;
+  --hy-ink-2: #b9c2ce;
+  --hy-ink-3: #8f99a8;
+  --hy-ink-2-glass: #cdd4de;
+  --hy-ink-3-glass: #a7b1be;
+  --hy-line: rgb(238 241 246 / 0.12);
+  --hy-line-strong: rgb(238 241 246 / 0.26);
+  --hy-primary: #8e9cff;
+  --hy-primary-hover: #a5b0ff;
+  --hy-primary-ink: #0a0c11;
+  --hy-primary-wash: rgb(142 156 255 / 0.16);
+  --hy-success: #4fd1a5;
+  --hy-success-wash: rgb(79 209 165 / 0.14);
+  --hy-warning: #f2b45a;
+  --hy-warning-wash: rgb(242 180 90 / 0.14);
+  --hy-danger: #ff7a70;
+  --hy-danger-ink: #0a0c11;
+  --hy-danger-wash: rgb(255 122 112 / 0.15);
+  --hy-scrim: rgb(0 0 0 / 0.55);
+  --hy-glass-tint: 255 255 255;
+  --hy-glass-fill-top: 0.12;
+  --hy-glass-fill-bottom: 0.06;
+  --hy-glass-edge: inset 0 1px 0 rgb(255 255 255 / 0.16), inset 0 0 0 1px rgb(255 255 255 / 0.07);
+  --hy-glass-border: rgb(255 255 255 / 0.08);
+  --hy-glass-shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 16px 40px -16px rgb(0 0 0 / 0.6);
+  --hy-glass-shadow-thin: 0 1px 2px rgb(0 0 0 / 0.3), 0 6px 16px -8px rgb(0 0 0 / 0.5);
+  --hy-glass-shadow-thick: 0 2px 4px rgb(0 0 0 / 0.3), 0 28px 72px -20px rgb(0 0 0 / 0.7);
+  --hy-glass-reflection: linear-gradient(
+    to bottom,
+    rgb(255 255 255 / 0.08),
+    rgb(255 255 255 / 0) 40%
+  );
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-hy-theme='light']) {
+    color-scheme: dark;
+    --hy-bg: #0a0c11;
+    --hy-surface-1: #13161d;
+    --hy-surface-2: #1a1e26;
+    --hy-surface-3: #222731;
+    --hy-surface-4: #2c323e;
+    --hy-ink: #eef1f6;
+    --hy-ink-2: #b9c2ce;
+    --hy-ink-3: #8f99a8;
+    --hy-ink-2-glass: #cdd4de;
+    --hy-ink-3-glass: #a7b1be;
+    --hy-line: rgb(238 241 246 / 0.12);
+    --hy-line-strong: rgb(238 241 246 / 0.26);
+    --hy-primary: #8e9cff;
+    --hy-primary-hover: #a5b0ff;
+    --hy-primary-ink: #0a0c11;
+    --hy-primary-wash: rgb(142 156 255 / 0.16);
+    --hy-success: #4fd1a5;
+    --hy-success-wash: rgb(79 209 165 / 0.14);
+    --hy-warning: #f2b45a;
+    --hy-warning-wash: rgb(242 180 90 / 0.14);
+    --hy-danger: #ff7a70;
+    --hy-danger-ink: #0a0c11;
+    --hy-danger-wash: rgb(255 122 112 / 0.15);
+    --hy-scrim: rgb(0 0 0 / 0.55);
+    --hy-glass-tint: 255 255 255;
+    --hy-glass-fill-top: 0.12;
+    --hy-glass-fill-bottom: 0.06;
+    --hy-glass-edge: inset 0 1px 0 rgb(255 255 255 / 0.16), inset 0 0 0 1px rgb(255 255 255 / 0.07);
+    --hy-glass-border: rgb(255 255 255 / 0.08);
+    --hy-glass-shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 16px 40px -16px rgb(0 0 0 / 0.6);
+    --hy-glass-shadow-thin: 0 1px 2px rgb(0 0 0 / 0.3), 0 6px 16px -8px rgb(0 0 0 / 0.5);
+    --hy-glass-shadow-thick: 0 2px 4px rgb(0 0 0 / 0.3), 0 28px 72px -20px rgb(0 0 0 / 0.7);
+    --hy-glass-reflection: linear-gradient(
+      to bottom,
+      rgb(255 255 255 / 0.08),
+      rgb(255 255 255 / 0) 40%
+    );
+  }
+}
+
+/*
+ * Higher contrast: stronger lines, no see-through surfaces. The selector has
+ * the same weight as the dark theme selectors above, so it wins in both themes.
+ */
+@media (prefers-contrast: more) {
+  :root:is([data-hy-theme], :not([data-hy-theme])),
+  .hy-theme-dark {
+    --hy-line: var(--hy-line-strong);
+    --hy-ink-3: var(--hy-ink-2);
+  }
+}

package/styles/parts/toast.css

@@ -0,0 +1,128 @@
+/* The toast stack renders in a CDK overlay at the bottom inline-end corner. */
+.hy-toast-pane {
+  z-index: var(--hy-z-toast);
+  pointer-events: none;
+}
+
+.hy-toast-list {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: var(--hy-space-2);
+  margin: 0;
+  padding: var(--hy-space-4);
+  padding-block-end: max(var(--hy-space-4), env(safe-area-inset-bottom));
+  list-style: none;
+}
+
+.hy-toast {
+  --_c: var(--hy-ink-2);
+  display: flex;
+  align-items: flex-start;
+  gap: var(--hy-space-3);
+  inline-size: min(var(--hy-toast-width, 24rem), calc(100vw - 2 * var(--hy-space-4)));
+  padding-block: var(--hy-space-3);
+  padding-inline: var(--hy-space-4) var(--hy-space-3);
+  border-radius: var(--hy-toast-radius, var(--hy-radius-m));
+  color: var(--hy-ink);
+  pointer-events: auto;
+  touch-action: pan-y;
+  animation: hy-toast-in var(--hy-dur-enter) var(--hy-ease-out);
+}
+
+.hy-toast[data-tone='info'] {
+  --_c: var(--hy-primary);
+}
+
+.hy-toast[data-tone='success'] {
+  --_c: var(--hy-success);
+}
+
+.hy-toast[data-tone='warning'] {
+  --_c: var(--hy-warning);
+}
+
+.hy-toast[data-tone='danger'] {
+  --_c: var(--hy-danger);
+}
+
+/*
+ * Only the exit transitions. A swipe writes translate and opacity on every
+ * frame from a spring, and a transition there would make the toast trail
+ * the finger.
+ */
+.hy-toast[data-leaving] {
+  opacity: 0;
+  translate: 0 calc(0.5rem * var(--hy-move));
+  transition:
+    opacity var(--hy-dur-exit) var(--hy-ease-out),
+    translate var(--hy-dur-exit) var(--hy-ease-out);
+}
+
+.hy-toast__icon {
+  margin-block-start: 0.125rem;
+  color: var(--_c);
+}
+
+.hy-toast__text {
+  flex: 1;
+  min-inline-size: 0;
+}
+
+.hy-toast__title,
+.hy-toast__message {
+  margin: 0;
+}
+
+.hy-toast__title {
+  font-weight: 620;
+}
+
+.hy-toast__message {
+  color: var(--hy-ink-2);
+  font-size: var(--hy-step--1);
+  letter-spacing: var(--hy-tracking-small);
+}
+
+.hy-toast__title + .hy-toast__message {
+  margin-block-start: 0.125rem;
+}
+
+.hy-toast__action,
+.hy-toast__close {
+  flex: none;
+  display: inline-grid;
+  place-items: center;
+  min-block-size: 2rem;
+  min-inline-size: 2rem;
+  padding-inline: var(--hy-space-2);
+  border: 0;
+  border-radius: var(--hy-radius-s);
+  background: transparent;
+  color: var(--hy-ink-2);
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.hy-toast__action {
+  color: var(--hy-primary);
+}
+
+.hy-toast__action:hover,
+.hy-toast__close:hover {
+  background: color-mix(in srgb, var(--hy-ink) 8%, transparent);
+}
+
+.hy-toast__action:focus-visible,
+.hy-toast__close:focus-visible {
+  outline: none;
+  box-shadow: var(--hy-focus-ring);
+}
+
+@keyframes hy-toast-in {
+  from {
+    opacity: 0;
+    translate: 0 calc(1rem * var(--hy-move));
+    scale: calc(1 - 0.03 * var(--hy-move));
+  }
+}

package/styles/parts/tokens.css

@@ -0,0 +1,151 @@
+/*
+ * Design tokens. Every Hyalo component reads these, and a theme is only a
+ * different set of values for the same names. All names start with --hy-.
+ */
+:root {
+  /* Colour (light theme is the default) */
+  --hy-bg: #eef1f4;
+  --hy-surface-1: #ffffff;
+  --hy-surface-2: #f6f8fa;
+  --hy-surface-3: #e9edf1;
+  --hy-surface-4: #dce2e8;
+  --hy-ink: #0f1a24;
+  --hy-ink-2: #3b4856;
+  --hy-ink-3: #596775;
+  /* Secondary text on glass. Darker, because the backdrop keeps changing. */
+  --hy-ink-2-glass: #2c3845;
+  --hy-ink-3-glass: #45525f;
+  --hy-line: rgb(15 26 36 / 0.12);
+  --hy-line-strong: rgb(15 26 36 / 0.24);
+  --hy-primary: #3a4cd0;
+  --hy-primary-hover: #3141b8;
+  --hy-primary-ink: #ffffff;
+  --hy-primary-wash: rgb(58 76 208 / 0.12);
+  /*
+   * Secondary is optional, so it is not set here. Set --hy-secondary and
+   * --hy-secondary-ink to give a theme a second brand colour; until then,
+   * everything that reads them falls back to the primary pair.
+   */
+  --hy-success: #12735a;
+  --hy-success-wash: rgb(18 115 90 / 0.12);
+  --hy-warning: #8f5400;
+  --hy-warning-wash: rgb(143 84 0 / 0.12);
+  --hy-danger: #b93029;
+  --hy-danger-ink: #ffffff;
+  --hy-danger-wash: rgb(185 48 41 / 0.12);
+  --hy-scrim: rgb(9 14 20 / 0.38);
+
+  /* Glass */
+  --hy-glass-tint: 255 255 255;
+  --hy-glass-fill-top: 0.64;
+  --hy-glass-fill-bottom: 0.36;
+  --hy-glass-blur: 25px;
+  --hy-glass-saturate: 180%;
+  --hy-glass-edge: inset 0 1px 0 rgb(255 255 255 / 0.85), inset 0 0 0 1px rgb(255 255 255 / 0.4);
+  --hy-glass-border: rgb(15 26 36 / 0.08);
+  --hy-glass-shadow: 0 1px 2px rgb(15 26 36 / 0.06), 0 12px 32px -12px rgb(15 26 36 / 0.22);
+  /* Small chips read as thin glass, sheets and dialogs as thick. */
+  --hy-glass-shadow-thin: 0 1px 2px rgb(15 26 36 / 0.06), 0 4px 12px -6px rgb(15 26 36 / 0.16);
+  --hy-glass-shadow-thick: 0 2px 4px rgb(15 26 36 / 0.06), 0 24px 64px -20px rgb(15 26 36 / 0.32);
+  --hy-glass-reflection: linear-gradient(
+    to bottom,
+    rgb(255 255 255 / 0.5),
+    rgb(255 255 255 / 0) 42%
+  );
+  --hy-glass-glow: 255 255 255;
+
+  /* Type */
+  --hy-font-display: 'Inter Display', 'Inter', ui-sans-serif, system-ui, sans-serif;
+  --hy-font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
+  --hy-font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
+  --hy-font-fa: 'Vazirmatn', 'Estedad', Tahoma, sans-serif;
+  --hy-step--1: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
+  --hy-step-0: clamp(0.9375rem, 0.91rem + 0.15vw, 1rem);
+  --hy-step-1: clamp(1.0625rem, 1.02rem + 0.25vw, 1.1875rem);
+  --hy-step-2: clamp(1.25rem, 1.17rem + 0.4vw, 1.5rem);
+  --hy-step-3: clamp(1.5rem, 1.36rem + 0.7vw, 2rem);
+  --hy-step-4: clamp(1.875rem, 1.6rem + 1.3vw, 2.75rem);
+  --hy-step-5: clamp(2.25rem, 1.8rem + 2.2vw, 3.75rem);
+  --hy-step-6: clamp(2.75rem, 2rem + 3.6vw, 5.25rem);
+  --hy-leading-tight: 1.15;
+  --hy-leading: 1.55;
+  /* Small text opens up a little to stay legible. Headings tighten instead. */
+  --hy-tracking-small: 0.01em;
+
+  /* Shape and space (4px base) */
+  --hy-radius-s: 8px;
+  --hy-radius-m: 14px;
+  --hy-radius-l: 22px;
+  --hy-radius-pill: 999px;
+  --hy-space-1: 0.25rem;
+  --hy-space-2: 0.5rem;
+  --hy-space-3: 0.75rem;
+  --hy-space-4: 1rem;
+  --hy-space-5: 1.25rem;
+  --hy-space-6: 1.5rem;
+  --hy-space-7: 1.75rem;
+  --hy-space-8: 2rem;
+  --hy-space-9: 2.5rem;
+  --hy-space-10: 3rem;
+  --hy-space-11: 4rem;
+  --hy-space-12: 5rem;
+  --hy-container: 72rem;
+  --hy-gutter: clamp(1rem, 0.6rem + 2vw, 2rem);
+
+  /* Controls */
+  --hy-control-sm: 2rem;
+  --hy-control-md: 2.5rem;
+  --hy-control-lg: 3rem;
+  --hy-focus-ring: 0 0 0 2px var(--hy-bg), 0 0 0 4px var(--hy-primary);
+
+  /* Motion. Matches the MOTION constants in TypeScript. */
+  --hy-dur-quick: 0.22s;
+  --hy-dur-settle: 0.44s;
+  --hy-dur-scene: 0.9s;
+  --hy-ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
+  --hy-ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
+  --hy-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+  /*
+   * Overlays enter and leave with these. With reduced motion they turn into
+   * short cross-fades instead of disappearing: --hy-move scales every slide
+   * and scale in the overlay keyframes down to nothing.
+   */
+  --hy-dur-enter: 0.44s;
+  --hy-dur-exit: 0.22s;
+  --hy-move: 1;
+
+  /* Layers */
+  --hy-z-sticky: 100;
+  --hy-z-overlay: 1000;
+  --hy-z-toast: 1100;
+  --hy-z-tooltip: 1200;
+}
+
+/* Persian and Arabic text gets its own family. Sizes stay the same or larger. */
+:lang(fa),
+:lang(ar) {
+  --hy-font-body: var(--hy-font-fa);
+  --hy-font-display: var(--hy-font-fa);
+  --hy-leading: 1.75;
+  --hy-tracking-small: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :root:not([data-hy-motion='full']) {
+    --hy-dur-quick: 1ms;
+    --hy-dur-settle: 1ms;
+    --hy-dur-scene: 1ms;
+    --hy-dur-enter: 0.2s;
+    --hy-dur-exit: 0.15s;
+    --hy-move: 0;
+  }
+}
+
+:root[data-hy-motion='reduced'] {
+  --hy-dur-quick: 1ms;
+  --hy-dur-settle: 1ms;
+  --hy-dur-scene: 1ms;
+  --hy-dur-enter: 0.2s;
+  --hy-dur-exit: 0.15s;
+  --hy-move: 0;
+}

package/styles/parts/typography.css

@@ -0,0 +1,81 @@
+/* Typography helpers. */
+.hy-display {
+  font-family: var(--hy-font-display);
+  font-size: var(--hy-step-6);
+  line-height: 1.02;
+  letter-spacing: -0.03em;
+}
+
+.hy-h1 {
+  font-size: var(--hy-step-5);
+  letter-spacing: -0.025em;
+}
+
+.hy-h2 {
+  font-size: var(--hy-step-4);
+  letter-spacing: -0.02em;
+}
+
+.hy-h3 {
+  font-size: var(--hy-step-3);
+  letter-spacing: -0.015em;
+}
+
+.hy-lead {
+  font-size: var(--hy-step-1);
+  color: var(--hy-ink-2);
+}
+
+.hy-muted {
+  color: var(--hy-ink-3);
+}
+
+/* Letter spacing hurts connected scripts, so it is removed for them. */
+:lang(fa) :is(.hy-display, .hy-h1, .hy-h2, .hy-h3),
+:lang(ar) :is(.hy-display, .hy-h1, .hy-h2, .hy-h3) {
+  letter-spacing: 0;
+}
+
+.hy-clamp {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--hy-lines, 2);
+  line-clamp: var(--hy-lines, 2);
+  overflow: hidden;
+}
+
+.hy-visually-hidden {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.hy-mesh {
+  background:
+    radial-gradient(60% 50% at 15% 10%, rgb(34 197 140 / 0.28), transparent 70%),
+    radial-gradient(55% 55% at 90% 20%, rgb(88 101 242 / 0.3), transparent 70%),
+    radial-gradient(50% 60% at 60% 100%, rgb(56 189 248 / 0.22), transparent 70%), var(--hy-bg);
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-literal {
+  color: var(--hy-primary);
+}
+.hljs-string,
+.hljs-attr {
+  color: var(--hy-success);
+}
+.hljs-number,
+.hljs-type {
+  color: var(--hy-warning);
+}
+.hljs-comment {
+  color: var(--hy-ink-3);
+}

package/types/hyalo-angular-accordion.d.ts

@@ -0,0 +1,74 @@
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/aria/accordion";
+import * as i2 from "@hyalo/angular/core";
+/**
+ * One collapsible section. The panel content stays in the DOM while closed
+ * (marked `inert`), so in-page search and FAQ structured data still see it.
+ */
+export declare class HyAccordionItem {
+  /** Text of the header button. */
+  readonly heading: import("@angular/core").InputSignal<string>;
+  /** Heading level of the header, 2 to 6. Pick the one that fits the page outline. */
+  readonly headingLevel: import("@angular/core").InputSignalWithTransform<number, unknown>;
+  /** Whether the section is open. Two-way bindable. */
+  readonly expanded: import("@angular/core").ModelSignal<boolean>;
+  readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<HyAccordionItem, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<HyAccordionItem, "hy-accordion-item", never, {
+    "heading": {
+      "alias": "heading";
+      "required": false;
+      "isSignal": true;
+    };
+    "headingLevel": {
+      "alias": "headingLevel";
+      "required": false;
+      "isSignal": true;
+    };
+    "expanded": {
+      "alias": "expanded";
+      "required": false;
+      "isSignal": true;
+    };
+    "disabled": {
+      "alias": "disabled";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "expanded": "expandedChange";
+  }, never, ["[hyAccordionHeading]", "*"], true, never>;
+}
+/**
+ * A stack of collapsible sections on Angular Aria. Arrow keys move between
+ * headers, Home and End jump to the ends, Enter or Space toggles.
+ *
+ * ```html
+ * <hy-accordion>
+ *   <hy-accordion-item heading="How long does delivery take?">Three to five working days.</hy-accordion-item>
+ *   <hy-accordion-item heading="Can I return it?">Within 30 days, free of charge.</hy-accordion-item>
+ * </hy-accordion>
+ * ```
+ *
+ * Only one section is open at a time unless `multiple` is set. Opening and
+ * closing animate the height with CSS grid, which costs no layout script.
+ */
+export declare class HyAccordion {
+  static ɵfac: i0.ɵɵFactoryDeclaration<HyAccordion, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<HyAccordion, "hy-accordion", never, {}, {}, never, ["*"], true, [{
+    directive: typeof i1.AccordionGroup;
+    inputs: {
+      "multiExpandable": "multiple";
+      "disabled": "disabled";
+    };
+    outputs: {};
+  }, {
+    directive: typeof i2.HyMaterialDirective;
+    inputs: {
+      "hyMaterial": "material";
+    };
+    outputs: {};
+  }]>;
+}
+/** Everything needed to build an accordion. */
+export declare const HY_ACCORDION: readonly [typeof HyAccordion, typeof HyAccordionItem];