@hyalo/angular 0.0.0-stage → 0.1.0

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,64 @@
+/* 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);
+}

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";
+/**
+ * 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];

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

@@ -0,0 +1,88 @@
+import * as i1 from "@hyalo/angular";
+import { HySize, HyTone } from "@hyalo/angular";
+import * as i0 from "@angular/core";
+/**
+ * - `solid`: filled with the tone colour. The main action on a view.
+ * - `glass`: a glass surface with tone-coloured text.
+ * - `soft`: a light wash of the tone colour.
+ * - `ghost`: text only, a surface appears on hover.
+ */
+export type HyButtonVariant = 'solid' | 'glass' | 'soft' | 'ghost';
+/**
+ * Button and link button.
+ *
+ * ```html
+ * <button hyButton (click)="save()">Save</button>
+ * <a hyButton variant="glass" routerLink="/pricing">Pricing</a>
+ * <button hyButton iconOnly aria-label="Close"><hy-icon name="x" /></button>
+ * ```
+ *
+ * It stays a native `<button>` or `<a>`, so forms, routing and keyboard
+ * behaviour work as usual. A press dims and shrinks it the moment the
+ * pointer goes down. Add `hyMagnetic` for the magnetic hover effect, or
+ * `hyRipple` for a press ripple.
+ *
+ * While `loading`, the button keeps its focus and width, sets `aria-busy`
+ * and ignores clicks. A disabled link gets `aria-disabled` and leaves the
+ * tab order, since links have no native disabled state.
+ */
+export declare class HyButton {
+  private readonly config;
+  private readonly fidelity;
+  private readonly el;
+  protected readonly isButton: boolean;
+  /** Visual style. */
+  readonly variant: import("@angular/core").InputSignal<HyButtonVariant>;
+  /** Height and padding. Defaults to the configured size. */
+  readonly size: import("@angular/core").InputSignal<HySize>;
+  /** Colour role. Defaults to the configured tone. */
+  readonly tone: import("@angular/core").InputSignal<HyTone>;
+  /** Square button for a single icon. Give it an `aria-label`. */
+  readonly iconOnly: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** Shows a spinner and blocks clicks without dropping focus. */
+  readonly loading: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** Disables the button. On links this sets `aria-disabled`. */
+  readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** Glass follows the configured material and goes solid on the low tier. */
+  protected readonly material: import("@angular/core").Signal<import("@hyalo/angular").HyMaterial | null>;
+  /** True when clicks should be ignored. */
+  protected readonly blocked: import("@angular/core").Signal<boolean>;
+  constructor();
+  static ɵfac: i0.ɵɵFactoryDeclaration<HyButton, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<HyButton, "button[hyButton], a[hyButton]", never, {
+    "variant": {
+      "alias": "variant";
+      "required": false;
+      "isSignal": true;
+    };
+    "size": {
+      "alias": "size";
+      "required": false;
+      "isSignal": true;
+    };
+    "tone": {
+      "alias": "tone";
+      "required": false;
+      "isSignal": true;
+    };
+    "iconOnly": {
+      "alias": "iconOnly";
+      "required": false;
+      "isSignal": true;
+    };
+    "loading": {
+      "alias": "loading";
+      "required": false;
+      "isSignal": true;
+    };
+    "disabled": {
+      "alias": "disabled";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, ["*"], true, [{
+    directive: typeof i1.HyInteractive;
+    inputs: {};
+    outputs: {};
+  }]>;
+}

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

@@ -0,0 +1,61 @@
+import * as i0 from "@angular/core";
+import * as i1 from "@hyalo/angular";
+/** Inner spacing of a card. */
+export type HyCardPadding = 'none' | 'sm' | 'md' | 'lg';
+/** Full-bleed media at the top of a card: an image, video or canvas. */
+export declare class HyCardMedia {
+  static ɵfac: i0.ɵɵFactoryDeclaration<HyCardMedia, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<HyCardMedia, "[hyCardMedia]", never, {}, {}, never, never, true, never>;
+}
+/** Title area. Put the card's heading here. */
+export declare class HyCardHeader {
+  static ɵfac: i0.ɵɵFactoryDeclaration<HyCardHeader, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<HyCardHeader, "[hyCardHeader]", never, {}, {}, never, never, true, never>;
+}
+/** Actions or meta at the bottom. */
+export declare class HyCardFooter {
+  static ɵfac: i0.ɵɵFactoryDeclaration<HyCardFooter, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<HyCardFooter, "[hyCardFooter]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * Makes one link inside the card cover the whole card, so the card is
+ * clickable while screen readers still hear a single, well-named link.
+ * Other buttons in the card stay clickable on top of it.
+ */
+export declare class HyCardLink {
+  static ɵfac: i0.ɵɵFactoryDeclaration<HyCardLink, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<HyCardLink, "a[hyCardLink]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * The kit's signature surface: a glass panel with optional media, header,
+ * body and footer.
+ *
+ * ```html
+ * <hy-card material="clear" hyTilt>
+ *   <img hyCardMedia src="watch.avif" alt="" />
+ *   <h3 hyCardHeader><a hyCardLink routerLink="/watch/1">Calibre 7</a></h3>
+ *   <p>Hand-wound, 42 mm, sapphire caseback.</p>
+ *   <div hyCardFooter>From 4 200 EUR</div>
+ * </hy-card>
+ * ```
+ */
+export declare class HyCard {
+  /** Inner spacing. Media always stays full bleed. */
+  readonly padding: import("@angular/core").InputSignal<HyCardPadding>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<HyCard, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<HyCard, "hy-card", never, {
+    "padding": {
+      "alias": "padding";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, ["[hyCardMedia]", "[hyCardHeader]", "*", "[hyCardFooter]"], true, [{
+    directive: typeof i1.HyMaterialDirective;
+    inputs: {
+      "hyMaterial": "material";
+    };
+    outputs: {};
+  }]>;
+}
+/** Everything needed to build a card. */
+export declare const HY_CARD: readonly [typeof HyCard, typeof HyCardMedia, typeof HyCardHeader, typeof HyCardFooter, typeof HyCardLink];