@hyalo/angular 0.1.0 → 0.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyalo/angular",
-  "version": "0.1.0",
+  "version": "0.3.1",
   "description": "Liquid glass components for Angular. Signals, zoneless, SSR-safe, accessible, RTL-ready.",
   "license": "MIT",
   "author": "HamedRsl",
@@ -29,11 +29,19 @@
     "@angular/core": "^22.2.0",
     "@angular/forms": "^22.2.0",
     "gsap": "^3.12.0",
-    "rxjs": "^7.4.0"
+    "rxjs": "^7.4.0",
+    "chart.js": "^4.6.1",
+    "highlight.js": "^11.11.1"
   },
   "peerDependenciesMeta": {
     "gsap": {
       "optional": true
+    },
+    "chart.js": {
+      "optional": true
+    },
+    "highlight.js": {
+      "optional": true
     }
   },
   "dependencies": {
@@ -66,46 +74,202 @@
       "types": "./types/hyalo-angular-accordion.d.ts",
       "default": "./fesm2022/hyalo-angular-accordion.mjs"
     },
+    "./alert": {
+      "types": "./types/hyalo-angular-alert.d.ts",
+      "default": "./fesm2022/hyalo-angular-alert.mjs"
+    },
+    "./aspect-ratio": {
+      "types": "./types/hyalo-angular-aspect-ratio.d.ts",
+      "default": "./fesm2022/hyalo-angular-aspect-ratio.mjs"
+    },
+    "./avatar": {
+      "types": "./types/hyalo-angular-avatar.d.ts",
+      "default": "./fesm2022/hyalo-angular-avatar.mjs"
+    },
+    "./badge": {
+      "types": "./types/hyalo-angular-badge.d.ts",
+      "default": "./fesm2022/hyalo-angular-badge.mjs"
+    },
+    "./bento": {
+      "types": "./types/hyalo-angular-bento.d.ts",
+      "default": "./fesm2022/hyalo-angular-bento.mjs"
+    },
+    "./blocks": {
+      "types": "./types/hyalo-angular-blocks.d.ts",
+      "default": "./fesm2022/hyalo-angular-blocks.mjs"
+    },
+    "./border-beam": {
+      "types": "./types/hyalo-angular-border-beam.d.ts",
+      "default": "./fesm2022/hyalo-angular-border-beam.mjs"
+    },
+    "./breadcrumb": {
+      "types": "./types/hyalo-angular-breadcrumb.d.ts",
+      "default": "./fesm2022/hyalo-angular-breadcrumb.mjs"
+    },
     "./button": {
       "types": "./types/hyalo-angular-button.d.ts",
       "default": "./fesm2022/hyalo-angular-button.mjs"
     },
+    "./button-group": {
+      "types": "./types/hyalo-angular-button-group.d.ts",
+      "default": "./fesm2022/hyalo-angular-button-group.mjs"
+    },
     "./card": {
       "types": "./types/hyalo-angular-card.d.ts",
       "default": "./fesm2022/hyalo-angular-card.mjs"
     },
+    "./carousel": {
+      "types": "./types/hyalo-angular-carousel.d.ts",
+      "default": "./fesm2022/hyalo-angular-carousel.mjs"
+    },
+    "./chapter-nav": {
+      "types": "./types/hyalo-angular-chapter-nav.d.ts",
+      "default": "./fesm2022/hyalo-angular-chapter-nav.mjs"
+    },
+    "./chart": {
+      "types": "./types/hyalo-angular-chart.d.ts",
+      "default": "./fesm2022/hyalo-angular-chart.mjs"
+    },
     "./choice": {
       "types": "./types/hyalo-angular-choice.d.ts",
       "default": "./fesm2022/hyalo-angular-choice.mjs"
     },
+    "./code-block": {
+      "types": "./types/hyalo-angular-code-block.d.ts",
+      "default": "./fesm2022/hyalo-angular-code-block.mjs"
+    },
+    "./command": {
+      "types": "./types/hyalo-angular-command.d.ts",
+      "default": "./fesm2022/hyalo-angular-command.mjs"
+    },
+    "./copy": {
+      "types": "./types/hyalo-angular-copy.d.ts",
+      "default": "./fesm2022/hyalo-angular-copy.mjs"
+    },
+    "./core": {
+      "types": "./types/hyalo-angular-core.d.ts",
+      "default": "./fesm2022/hyalo-angular-core.mjs"
+    },
+    "./description-list": {
+      "types": "./types/hyalo-angular-description-list.d.ts",
+      "default": "./fesm2022/hyalo-angular-description-list.mjs"
+    },
     "./dialog": {
       "types": "./types/hyalo-angular-dialog.d.ts",
       "default": "./fesm2022/hyalo-angular-dialog.mjs"
     },
+    "./divider": {
+      "types": "./types/hyalo-angular-divider.d.ts",
+      "default": "./fesm2022/hyalo-angular-divider.mjs"
+    },
+    "./empty-state": {
+      "types": "./types/hyalo-angular-empty-state.d.ts",
+      "default": "./fesm2022/hyalo-angular-empty-state.mjs"
+    },
     "./field": {
       "types": "./types/hyalo-angular-field.d.ts",
       "default": "./fesm2022/hyalo-angular-field.mjs"
     },
+    "./filter": {
+      "types": "./types/hyalo-angular-filter.d.ts",
+      "default": "./fesm2022/hyalo-angular-filter.mjs"
+    },
+    "./hotspot": {
+      "types": "./types/hyalo-angular-hotspot.d.ts",
+      "default": "./fesm2022/hyalo-angular-hotspot.mjs"
+    },
+    "./hover-card": {
+      "types": "./types/hyalo-angular-hover-card.d.ts",
+      "default": "./fesm2022/hyalo-angular-hover-card.mjs"
+    },
     "./icon": {
       "types": "./types/hyalo-angular-icon.d.ts",
       "default": "./fesm2022/hyalo-angular-icon.mjs"
     },
+    "./image-compare": {
+      "types": "./types/hyalo-angular-image-compare.d.ts",
+      "default": "./fesm2022/hyalo-angular-image-compare.mjs"
+    },
     "./interaction": {
       "types": "./types/hyalo-angular-interaction.d.ts",
       "default": "./fesm2022/hyalo-angular-interaction.mjs"
     },
+    "./kbd": {
+      "types": "./types/hyalo-angular-kbd.d.ts",
+      "default": "./fesm2022/hyalo-angular-kbd.mjs"
+    },
+    "./lightbox": {
+      "types": "./types/hyalo-angular-lightbox.d.ts",
+      "default": "./fesm2022/hyalo-angular-lightbox.mjs"
+    },
+    "./link": {
+      "types": "./types/hyalo-angular-link.d.ts",
+      "default": "./fesm2022/hyalo-angular-link.mjs"
+    },
+    "./list": {
+      "types": "./types/hyalo-angular-list.d.ts",
+      "default": "./fesm2022/hyalo-angular-list.mjs"
+    },
+    "./marquee": {
+      "types": "./types/hyalo-angular-marquee.d.ts",
+      "default": "./fesm2022/hyalo-angular-marquee.mjs"
+    },
+    "./menu": {
+      "types": "./types/hyalo-angular-menu.d.ts",
+      "default": "./fesm2022/hyalo-angular-menu.mjs"
+    },
+    "./mesh": {
+      "types": "./types/hyalo-angular-mesh.d.ts",
+      "default": "./fesm2022/hyalo-angular-mesh.mjs"
+    },
+    "./motion": {
+      "types": "./types/hyalo-angular-motion.d.ts",
+      "default": "./fesm2022/hyalo-angular-motion.mjs"
+    },
     "./navbar": {
       "types": "./types/hyalo-angular-navbar.d.ts",
       "default": "./fesm2022/hyalo-angular-navbar.mjs"
     },
+    "./navigation-menu": {
+      "types": "./types/hyalo-angular-navigation-menu.d.ts",
+      "default": "./fesm2022/hyalo-angular-navigation-menu.mjs"
+    },
+    "./number-ticker": {
+      "types": "./types/hyalo-angular-number-ticker.d.ts",
+      "default": "./fesm2022/hyalo-angular-number-ticker.mjs"
+    },
     "./overlay": {
       "types": "./types/hyalo-angular-overlay.d.ts",
       "default": "./fesm2022/hyalo-angular-overlay.mjs"
     },
+    "./pagination": {
+      "types": "./types/hyalo-angular-pagination.d.ts",
+      "default": "./fesm2022/hyalo-angular-pagination.mjs"
+    },
     "./popover": {
       "types": "./types/hyalo-angular-popover.d.ts",
       "default": "./fesm2022/hyalo-angular-popover.mjs"
     },
+    "./progress": {
+      "types": "./types/hyalo-angular-progress.d.ts",
+      "default": "./fesm2022/hyalo-angular-progress.mjs"
+    },
+    "./progressive-blur": {
+      "types": "./types/hyalo-angular-progressive-blur.d.ts",
+      "default": "./fesm2022/hyalo-angular-progressive-blur.mjs"
+    },
+    "./refraction": {
+      "types": "./types/hyalo-angular-refraction.d.ts",
+      "default": "./fesm2022/hyalo-angular-refraction.mjs"
+    },
+    "./scroll-area": {
+      "types": "./types/hyalo-angular-scroll-area.d.ts",
+      "default": "./fesm2022/hyalo-angular-scroll-area.mjs"
+    },
+    "./scroll-to-top": {
+      "types": "./types/hyalo-angular-scroll-to-top.d.ts",
+      "default": "./fesm2022/hyalo-angular-scroll-to-top.mjs"
+    },
     "./segmented": {
       "types": "./types/hyalo-angular-segmented.d.ts",
       "default": "./fesm2022/hyalo-angular-segmented.mjs"
@@ -114,6 +278,34 @@
       "types": "./types/hyalo-angular-select.d.ts",
       "default": "./fesm2022/hyalo-angular-select.mjs"
     },
+    "./sidebar": {
+      "types": "./types/hyalo-angular-sidebar.d.ts",
+      "default": "./fesm2022/hyalo-angular-sidebar.mjs"
+    },
+    "./skeleton": {
+      "types": "./types/hyalo-angular-skeleton.d.ts",
+      "default": "./fesm2022/hyalo-angular-skeleton.mjs"
+    },
+    "./sparkline": {
+      "types": "./types/hyalo-angular-sparkline.d.ts",
+      "default": "./fesm2022/hyalo-angular-sparkline.mjs"
+    },
+    "./split-text": {
+      "types": "./types/hyalo-angular-split-text.d.ts",
+      "default": "./fesm2022/hyalo-angular-split-text.mjs"
+    },
+    "./stat": {
+      "types": "./types/hyalo-angular-stat.d.ts",
+      "default": "./fesm2022/hyalo-angular-stat.mjs"
+    },
+    "./stepper": {
+      "types": "./types/hyalo-angular-stepper.d.ts",
+      "default": "./fesm2022/hyalo-angular-stepper.mjs"
+    },
+    "./table": {
+      "types": "./types/hyalo-angular-table.d.ts",
+      "default": "./fesm2022/hyalo-angular-table.mjs"
+    },
     "./tabs": {
       "types": "./types/hyalo-angular-tabs.d.ts",
       "default": "./fesm2022/hyalo-angular-tabs.mjs"
@@ -122,6 +314,10 @@
       "types": "./types/hyalo-angular-theme.d.ts",
       "default": "./fesm2022/hyalo-angular-theme.mjs"
     },
+    "./timeline": {
+      "types": "./types/hyalo-angular-timeline.d.ts",
+      "default": "./fesm2022/hyalo-angular-timeline.mjs"
+    },
     "./toast": {
       "types": "./types/hyalo-angular-toast.d.ts",
       "default": "./fesm2022/hyalo-angular-toast.mjs"

package/styles/parts/field.css

@@ -1,36 +1,44 @@
-/* Controls projected into hy-field. */
-.hy-input {
-  flex: 1;
-  min-inline-size: 0;
-  align-self: stretch;
-  padding: 0;
-  border: 0;
-  outline: 0;
-  background: transparent;
-  color: var(--hy-ink);
-  font: inherit;
-}
-
-.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);
-}
+/* 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

@@ -65,6 +65,8 @@
 }
 
 .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),

package/styles/parts/motion.css

@@ -80,3 +80,22 @@
     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/typography.css

@@ -62,3 +62,20 @@
     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

@@ -1,6 +1,6 @@
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/aria/accordion";
-import * as i2 from "@hyalo/angular";
+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.

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

@@ -0,0 +1,47 @@
+import * as i0 from "@angular/core";
+export declare class HyAlert {
+  readonly heading: import("@angular/core").InputSignal<string>;
+  readonly tone: import("@angular/core").InputSignal<"info" | "success" | "warning" | "danger">;
+  readonly announce: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly dismissible: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly dismissLabel: import("@angular/core").InputSignal<string>;
+  readonly visible: import("@angular/core").ModelSignal<boolean>;
+  readonly dismissed: import("@angular/core").OutputEmitterRef<void>;
+  dismiss(): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<HyAlert, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<HyAlert, "hy-alert", never, {
+    "heading": {
+      "alias": "heading";
+      "required": false;
+      "isSignal": true;
+    };
+    "tone": {
+      "alias": "tone";
+      "required": false;
+      "isSignal": true;
+    };
+    "announce": {
+      "alias": "announce";
+      "required": false;
+      "isSignal": true;
+    };
+    "dismissible": {
+      "alias": "dismissible";
+      "required": false;
+      "isSignal": true;
+    };
+    "dismissLabel": {
+      "alias": "dismissLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "visible": {
+      "alias": "visible";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "visible": "visibleChange";
+    "dismissed": "dismissed";
+  }, never, ["*"], true, never>;
+}

package/types/hyalo-angular-aspect-ratio.d.ts

@@ -0,0 +1,13 @@
+import * as i0 from "@angular/core";
+export declare class HyAspectRatio {
+  readonly ratio: import("@angular/core").InputSignalWithTransform<number, unknown>;
+  protected readonly safeRatio: import("@angular/core").Signal<number>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<HyAspectRatio, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<HyAspectRatio, "hy-aspect-ratio", never, {
+    "ratio": {
+      "alias": "ratio";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, ["*"], true, never>;
+}

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

@@ -0,0 +1,39 @@
+import { HySize } from "@hyalo/angular/core";
+import * as i0 from "@angular/core";
+export declare class HyAvatar {
+  readonly name: import("@angular/core").InputSignal<string>;
+  readonly src: import("@angular/core").InputSignal<string>;
+  readonly size: import("@angular/core").InputSignal<HySize>;
+  protected readonly failedSrc: import("@angular/core").WritableSignal<string | null>;
+  protected readonly initials: import("@angular/core").Signal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<HyAvatar, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<HyAvatar, "hy-avatar", never, {
+    "name": {
+      "alias": "name";
+      "required": true;
+      "isSignal": true;
+    };
+    "src": {
+      "alias": "src";
+      "required": false;
+      "isSignal": true;
+    };
+    "size": {
+      "alias": "size";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}
+export declare class HyAvatarGroup {
+  readonly label: import("@angular/core").InputSignal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<HyAvatarGroup, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<HyAvatarGroup, "hy-avatar-group", never, {
+    "label": {
+      "alias": "label";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, ["*"], true, never>;
+}
+export declare const HY_AVATAR: readonly [typeof HyAvatar, typeof HyAvatarGroup];

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

@@ -0,0 +1,82 @@
+import * as i1 from "@hyalo/angular/core";
+import { HySize, HyTone } from "@hyalo/angular/core";
+import * as i0 from "@angular/core";
+export declare class HyBadge {
+  private readonly config;
+  readonly tone: import("@angular/core").InputSignal<HyTone>;
+  readonly size: import("@angular/core").InputSignal<HySize>;
+  readonly removable: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly removeLabel: import("@angular/core").InputSignal<string>;
+  readonly removed: import("@angular/core").OutputEmitterRef<void>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<HyBadge, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<HyBadge, "hy-badge", never, {
+    "tone": {
+      "alias": "tone";
+      "required": false;
+      "isSignal": true;
+    };
+    "size": {
+      "alias": "size";
+      "required": false;
+      "isSignal": true;
+    };
+    "removable": {
+      "alias": "removable";
+      "required": false;
+      "isSignal": true;
+    };
+    "removeLabel": {
+      "alias": "removeLabel";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "removed": "removed";
+  }, never, ["*"], true, [{
+    directive: typeof i1.HyMaterialDirective;
+    inputs: {
+      "hyMaterial": "material";
+    };
+    outputs: {};
+  }]>;
+}
+/** A native toggle button for selectable filters. */
+export declare class HyChip {
+  private readonly config;
+  readonly tone: import("@angular/core").InputSignal<HyTone>;
+  readonly size: import("@angular/core").InputSignal<HySize>;
+  readonly selected: import("@angular/core").ModelSignal<boolean>;
+  readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<HyChip, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<HyChip, "hy-chip", never, {
+    "tone": {
+      "alias": "tone";
+      "required": false;
+      "isSignal": true;
+    };
+    "size": {
+      "alias": "size";
+      "required": false;
+      "isSignal": true;
+    };
+    "selected": {
+      "alias": "selected";
+      "required": false;
+      "isSignal": true;
+    };
+    "disabled": {
+      "alias": "disabled";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "selected": "selectedChange";
+  }, never, ["*"], true, [{
+    directive: typeof i1.HyMaterialDirective;
+    inputs: {
+      "hyMaterial": "material";
+    };
+    outputs: {};
+  }]>;
+}
+export declare const HY_BADGE: readonly [typeof HyBadge, typeof HyChip];

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

@@ -0,0 +1,25 @@
+import * as i0 from "@angular/core";
+export declare class HyBento {
+  static ɵfac: i0.ɵɵFactoryDeclaration<HyBento, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<HyBento, "hy-bento", never, {}, {}, never, ["*"], true, never>;
+}
+export declare class HyBentoTile {
+  readonly columns: import("@angular/core").InputSignalWithTransform<number, unknown>;
+  readonly rows: import("@angular/core").InputSignalWithTransform<number, unknown>;
+  get safeColumns(): number;
+  get safeRows(): number;
+  static ɵfac: i0.ɵɵFactoryDeclaration<HyBentoTile, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<HyBentoTile, "[hyBentoTile]", never, {
+    "columns": {
+      "alias": "columns";
+      "required": false;
+      "isSignal": true;
+    };
+    "rows": {
+      "alias": "rows";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}
+export declare const HY_BENTO: readonly [typeof HyBento, typeof HyBentoTile];