@hyalo/angular 0.0.0-stage → 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,41 @@
+# Changelog
+
+All notable changes to `@hyalo/angular` are listed here. The format follows [Keep a Changelog](https://keepachangelog.com), and versions follow [Semantic Versioning](https://semver.org). Until 1.0, a minor version can include breaking changes.
+
+## 0.1.0 (unreleased)
+
+The first release.
+
+### Foundations (`@hyalo/angular`)
+
+- `provideHyalo()` for global config, with the material, size and tone axes.
+- `HyFidelity`, which steps the glass down on devices or settings where blur would hurt.
+- `HyMotion` with motion presets, a spring helper and an optional, lazily loaded GSAP.
+- The glass material directive and interaction state.
+
+### Components
+
+Each one is standalone and has its own entry point.
+
+- `@hyalo/angular/accordion`: `hy-accordion` and `hy-accordion-item` on Angular Aria.
+- `@hyalo/angular/button`: `hyButton` for buttons and link buttons, with an inline loading spinner.
+- `@hyalo/angular/card`: `hy-card` with media, header, body and footer slots.
+- `@hyalo/angular/choice`: `hy-checkbox`, `hy-radio-group` with `hy-radio`, and `hy-switch`.
+- `@hyalo/angular/dialog`: the `HyDialog` and `HyDrawer` services, content parts, a confirm helper, side drawers and bottom sheets.
+- `@hyalo/angular/field`: `hy-field` and `hyInput` for text fields, with Signal Forms support.
+- `@hyalo/angular/icon`: `hy-icon` with a name registry and Lucide-compatible data.
+- `@hyalo/angular/interaction`: reveal, tilt, magnetic and ripple directives.
+- `@hyalo/angular/navbar`: `hy-navbar` with a collapsible menu and scroll behaviour.
+- `@hyalo/angular/overlay`: logical placement helpers for CDK overlays.
+- `@hyalo/angular/popover`: `hyTooltip` and `hyPopover`, loading the CDK overlay on first open.
+- `@hyalo/angular/segmented`: `hy-segmented`.
+- `@hyalo/angular/select`: `hy-select` on the Angular Aria combobox and listbox.
+- `@hyalo/angular/tabs`: `hy-tabs` on Angular Aria.
+- `@hyalo/angular/theme`: `HyPalette` for switching palettes at runtime.
+- `@hyalo/angular/toast`: the `HyToaster` service with swipe to dismiss.
+
+### Styles
+
+- `styles/hyalo.css` with everything, or `styles/hyalo-core.css` plus one file per overlay from `styles/overlays/`.
+- Design tokens, light and dark themes, and component tokens, all in cascade layers.
+- Six on-demand palettes in `styles/palettes/`: aurora, ember, orchid, ocean, rose and graphite.

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 HamedRsl
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,32 @@
-# Temporary Holding Version
-
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+<p align="center">
+  <img src="https://raw.githubusercontent.com/HamedRsl/Hyalo/main/.github/assets/hyalo-logo.jpg" alt="Hyalo, Angular UI kit" width="240" />
+</p>
+
+# @hyalo/angular
+
+Liquid glass components for Angular, built on Angular Aria and the CDK. Signal based, zoneless, server-render safe, accessible, and ready for RTL.
+
+```sh
+npm install @hyalo/angular @angular/cdk @angular/aria
+```
+
+Add the stylesheet before your own styles in `angular.json`:
+
+```json
+"styles": ["node_modules/@hyalo/angular/styles/hyalo.css", "src/styles.css"]
+```
+
+`hyalo.css` includes every overlay's styles. To leave out the ones you don't use, list `hyalo-core.css` plus the files you need from `styles/overlays/` (`select.css`, `popover.css`, `dialog.css`, `toast.css`) instead.
+
+Then import the standalone components you need. Each one has its own entry point, so a lazy route only loads what it uses:
+
+```ts
+import { HyButton } from '@hyalo/angular/button';
+import { HY_CARD } from '@hyalo/angular/card';
+```
+
+`@hyalo/angular` itself holds the shared foundations, such as `provideHyalo()`, `HyFidelity` and `HyMotion`.
+
+Configuration, theming, RTL, motion and the full component list are in the [repository README](https://github.com/HamedRsl/Hyalo#readme).
+
+MIT licensed.

package/fesm2022/hyalo-angular-accordion.mjs

@@ -0,0 +1,230 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, booleanAttribute, input, model, numberAttribute } from "@angular/core";
+import * as i1 from "@angular/aria/accordion";
+import { AccordionGroup, AccordionPanel, AccordionTrigger } from "@angular/aria/accordion";
+import { HyIcon } from "@hyalo/angular/icon";
+import * as i2 from "@hyalo/angular";
+import { HyMaterialDirective } from "@hyalo/angular";
+var HyAccordionItem = class HyAccordionItem {
+	heading = input("", ...ngDevMode ? [{ debugName: "heading" }] : /* istanbul ignore next */ []);
+	headingLevel = input(3, {
+		...ngDevMode ? { debugName: "headingLevel" } : /* istanbul ignore next */ {},
+		transform: numberAttribute
+	});
+	expanded = model(false, ...ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []);
+	disabled = input(false, {
+		...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: HyAccordionItem,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.3",
+		type: HyAccordionItem,
+		isStandalone: true,
+		selector: "hy-accordion-item",
+		inputs: {
+			heading: {
+				classPropertyName: "heading",
+				publicName: "heading",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			headingLevel: {
+				classPropertyName: "headingLevel",
+				publicName: "headingLevel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			expanded: {
+				classPropertyName: "expanded",
+				publicName: "expanded",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { expanded: "expandedChange" },
+		host: {
+			properties: { "attr.data-open": "expanded() || null" },
+			classAttribute: "hy-accordion-item"
+		},
+		ngImport: i0,
+		template: "<div class=\"hy-accordion__heading\" role=\"heading\" [attr.aria-level]=\"headingLevel()\">\r\n  <button\r\n    type=\"button\"\r\n    class=\"hy-accordion__trigger\"\r\n    ngAccordionTrigger\r\n    [panel]=\"panel\"\r\n    [(expanded)]=\"expanded\"\r\n    [disabled]=\"disabled()\"\r\n  >\r\n    <span class=\"hy-accordion__label\">\r\n      {{ heading() }}\r\n      <ng-content select=\"[hyAccordionHeading]\" />\r\n    </span>\r\n    <hy-icon class=\"hy-accordion__chevron\" name=\"chevron-down\" />\r\n  </button>\r\n</div>\r\n<div ngAccordionPanel #panel=\"ngAccordionPanel\" class=\"hy-accordion__panel\">\r\n  <div class=\"hy-accordion__body\">\r\n    <div class=\"hy-accordion__content\"><ng-content /></div>\r\n  </div>\r\n</div>\r\n",
+		styles: [":host{display:block}:host+:host{border-block-start:1px solid var(--hy-accordion-divider, var(--hy-line))}.hy-accordion__heading{margin:0}.hy-accordion__trigger{display:flex;align-items:center;justify-content:space-between;gap:var(--hy-space-4);inline-size:100%;min-block-size:var(--hy-accordion-trigger-height, 3.5rem);padding:var(--hy-space-3) 0;border:0;background:transparent;color:var(--hy-ink);font:inherit;font-size:var(--hy-step-1);font-weight:580;text-align:start;cursor:pointer}.hy-accordion__trigger:focus-visible{outline:none;border-radius:var(--hy-radius-s);box-shadow:var(--hy-focus-ring)}.hy-accordion__trigger[aria-disabled=true]{opacity:.45;cursor:not-allowed}.hy-accordion__chevron{flex:none;color:var(--hy-ink-3);transition:rotate var(--hy-dur-settle) var(--hy-ease-out)}:host([data-open]) .hy-accordion__chevron{rotate:180deg}.hy-accordion__body{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--hy-dur-settle) var(--hy-ease-out)}:host([data-open]) .hy-accordion__body{grid-template-rows:1fr}.hy-accordion__content{min-block-size:0;overflow:hidden;color:var(--hy-ink-2)}:host([data-open]) .hy-accordion__content{padding-block-end:var(--hy-space-5)}.hy-accordion__panel[inert] .hy-accordion__content{visibility:hidden;transition:visibility 0s linear var(--hy-dur-settle)}@media print{.hy-accordion__body{grid-template-rows:1fr}.hy-accordion__panel[inert] .hy-accordion__content{visibility:visible}}\n"],
+		dependencies: [
+			{
+				kind: "directive",
+				type: AccordionTrigger,
+				selector: "[ngAccordionTrigger]",
+				inputs: [
+					"panel",
+					"id",
+					"disabled",
+					"expanded"
+				],
+				outputs: ["expandedChange"],
+				exportAs: ["ngAccordionTrigger"]
+			},
+			{
+				kind: "directive",
+				type: AccordionPanel,
+				selector: "[ngAccordionPanel]",
+				inputs: ["id"],
+				exportAs: ["ngAccordionPanel"]
+			},
+			{
+				kind: "component",
+				type: HyIcon,
+				selector: "hy-icon",
+				inputs: [
+					"name",
+					"icon",
+					"label",
+					"size",
+					"strokeWidth"
+				]
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: HyAccordionItem,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "hy-accordion-item",
+			imports: [
+				AccordionTrigger,
+				AccordionPanel,
+				HyIcon
+			],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				class: "hy-accordion-item",
+				"[attr.data-open]": "expanded() || null"
+			},
+			template: "<div class=\"hy-accordion__heading\" role=\"heading\" [attr.aria-level]=\"headingLevel()\">\r\n  <button\r\n    type=\"button\"\r\n    class=\"hy-accordion__trigger\"\r\n    ngAccordionTrigger\r\n    [panel]=\"panel\"\r\n    [(expanded)]=\"expanded\"\r\n    [disabled]=\"disabled()\"\r\n  >\r\n    <span class=\"hy-accordion__label\">\r\n      {{ heading() }}\r\n      <ng-content select=\"[hyAccordionHeading]\" />\r\n    </span>\r\n    <hy-icon class=\"hy-accordion__chevron\" name=\"chevron-down\" />\r\n  </button>\r\n</div>\r\n<div ngAccordionPanel #panel=\"ngAccordionPanel\" class=\"hy-accordion__panel\">\r\n  <div class=\"hy-accordion__body\">\r\n    <div class=\"hy-accordion__content\"><ng-content /></div>\r\n  </div>\r\n</div>\r\n",
+			styles: [":host{display:block}:host+:host{border-block-start:1px solid var(--hy-accordion-divider, var(--hy-line))}.hy-accordion__heading{margin:0}.hy-accordion__trigger{display:flex;align-items:center;justify-content:space-between;gap:var(--hy-space-4);inline-size:100%;min-block-size:var(--hy-accordion-trigger-height, 3.5rem);padding:var(--hy-space-3) 0;border:0;background:transparent;color:var(--hy-ink);font:inherit;font-size:var(--hy-step-1);font-weight:580;text-align:start;cursor:pointer}.hy-accordion__trigger:focus-visible{outline:none;border-radius:var(--hy-radius-s);box-shadow:var(--hy-focus-ring)}.hy-accordion__trigger[aria-disabled=true]{opacity:.45;cursor:not-allowed}.hy-accordion__chevron{flex:none;color:var(--hy-ink-3);transition:rotate var(--hy-dur-settle) var(--hy-ease-out)}:host([data-open]) .hy-accordion__chevron{rotate:180deg}.hy-accordion__body{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--hy-dur-settle) var(--hy-ease-out)}:host([data-open]) .hy-accordion__body{grid-template-rows:1fr}.hy-accordion__content{min-block-size:0;overflow:hidden;color:var(--hy-ink-2)}:host([data-open]) .hy-accordion__content{padding-block-end:var(--hy-space-5)}.hy-accordion__panel[inert] .hy-accordion__content{visibility:hidden;transition:visibility 0s linear var(--hy-dur-settle)}@media print{.hy-accordion__body{grid-template-rows:1fr}.hy-accordion__panel[inert] .hy-accordion__content{visibility:visible}}\n"]
+		}]
+	}],
+	propDecorators: {
+		heading: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "heading",
+				required: false
+			}]
+		}],
+		headingLevel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "headingLevel",
+				required: false
+			}]
+		}],
+		expanded: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "expanded",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["expandedChange"]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}]
+	}
+});
+var HyAccordion = class HyAccordion {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: HyAccordion,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "14.0.0",
+		version: "22.2.3",
+		type: HyAccordion,
+		isStandalone: true,
+		selector: "hy-accordion",
+		host: { classAttribute: "hy-accordion" },
+		hostDirectives: [{
+			directive: i1.AccordionGroup,
+			inputs: [
+				"multiExpandable",
+				"multiple",
+				"disabled",
+				"disabled"
+			]
+		}, {
+			directive: i2.HyMaterialDirective,
+			inputs: ["hyMaterial", "material"]
+		}],
+		ngImport: i0,
+		template: `<ng-content />`,
+		isInline: true,
+		styles: [":host{display:block;border-radius:var(--hy-radius-l);padding-inline:var(--hy-space-5)}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: HyAccordion,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "hy-accordion",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			hostDirectives: [{
+				directive: AccordionGroup,
+				inputs: ["multiExpandable: multiple", "disabled"]
+			}, {
+				directive: HyMaterialDirective,
+				inputs: ["hyMaterial: material"]
+			}],
+			host: { class: "hy-accordion" },
+			template: `<ng-content />`,
+			styles: [":host{display:block;border-radius:var(--hy-radius-l);padding-inline:var(--hy-space-5)}\n"]
+		}]
+	}]
+});
+const HY_ACCORDION = [HyAccordion, HyAccordionItem];
+export { HY_ACCORDION, HyAccordion, HyAccordionItem };
+
+//# sourceMappingURL=hyalo-angular-accordion.mjs.map

package/fesm2022/hyalo-angular-accordion.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"hyalo-angular-accordion.mjs","names":[],"sources":["../../../projects/hyalo/accordion/accordion.ts","../../../projects/hyalo/accordion/accordion-item.html"],"sourcesContent":["import {\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  booleanAttribute,\r\n  input,\r\n  model,\r\n  numberAttribute,\r\n} from '@angular/core';\r\nimport { AccordionGroup, AccordionPanel, AccordionTrigger } from '@angular/aria/accordion';\r\nimport { HyIcon } from '@hyalo/angular/icon';\r\n\r\nimport { HyMaterialDirective } from '@hyalo/angular';\r\n\r\n/**\r\n * One collapsible section. The panel content stays in the DOM while closed\r\n * (marked `inert`), so in-page search and FAQ structured data still see it.\r\n */\r\n@Component({\r\n  selector: 'hy-accordion-item',\r\n  imports: [AccordionTrigger, AccordionPanel, HyIcon],\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  host: {\r\n    class: 'hy-accordion-item',\r\n    '[attr.data-open]': 'expanded() || null',\r\n  },\r\n  templateUrl: './accordion-item.html',\r\n  styleUrl: './accordion.css',\r\n})\r\nexport class HyAccordionItem {\r\n  /** Text of the header button. */\r\n  readonly heading = input('');\r\n  /** Heading level of the header, 2 to 6. Pick the one that fits the page outline. */\r\n  readonly headingLevel = input(3, { transform: numberAttribute });\r\n  /** Whether the section is open. Two-way bindable. */\r\n  readonly expanded = model(false);\r\n  readonly disabled = input(false, { transform: booleanAttribute });\r\n}\r\n\r\n/**\r\n * A stack of collapsible sections on Angular Aria. Arrow keys move between\r\n * headers, Home and End jump to the ends, Enter or Space toggles.\r\n *\r\n * ```html\r\n * <hy-accordion>\r\n *   <hy-accordion-item heading=\"How long does delivery take?\">Three to five working days.</hy-accordion-item>\r\n *   <hy-accordion-item heading=\"Can I return it?\">Within 30 days, free of charge.</hy-accordion-item>\r\n * </hy-accordion>\r\n * ```\r\n *\r\n * Only one section is open at a time unless `multiple` is set. Opening and\r\n * closing animate the height with CSS grid, which costs no layout script.\r\n */\r\n@Component({\r\n  selector: 'hy-accordion',\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  hostDirectives: [\r\n    { directive: AccordionGroup, inputs: ['multiExpandable: multiple', 'disabled'] },\r\n    { directive: HyMaterialDirective, inputs: ['hyMaterial: material'] },\r\n  ],\r\n  host: { class: 'hy-accordion' },\r\n  template: `<ng-content />`,\r\n  styles: `\r\n    :host {\r\n      display: block;\r\n      border-radius: var(--hy-radius-l);\r\n      padding-inline: var(--hy-space-5);\r\n    }\r\n  `,\r\n})\r\nexport class HyAccordion {}\r\n\r\n/** Everything needed to build an accordion. */\r\nexport const HY_ACCORDION = [HyAccordion, HyAccordionItem] as const;\r\n","<div class=\"hy-accordion__heading\" role=\"heading\" [attr.aria-level]=\"headingLevel()\">\r\n  <button\r\n    type=\"button\"\r\n    class=\"hy-accordion__trigger\"\r\n    ngAccordionTrigger\r\n    [panel]=\"panel\"\r\n    [(expanded)]=\"expanded\"\r\n    [disabled]=\"disabled()\"\r\n  >\r\n    <span class=\"hy-accordion__label\">\r\n      {{ heading() }}\r\n      <ng-content select=\"[hyAccordionHeading]\" />\r\n    </span>\r\n    <hy-icon class=\"hy-accordion__chevron\" name=\"chevron-down\" />\r\n  </button>\r\n</div>\r\n<div ngAccordionPanel #panel=\"ngAccordionPanel\" class=\"hy-accordion__panel\">\r\n  <div class=\"hy-accordion__body\">\r\n    <div class=\"hy-accordion__content\"><ng-content /></div>\r\n  </div>\r\n</div>\r\n"],"mappings":"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"}

package/fesm2022/hyalo-angular-button.mjs

@@ -0,0 +1,203 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, ElementRef, booleanAttribute, computed, inject, input } from "@angular/core";
+import * as i1 from "@hyalo/angular";
+import { HY_CONFIG, HyFidelity, HyInteractive } from "@hyalo/angular";
+var HyButton = class HyButton {
+	config = inject(HY_CONFIG);
+	fidelity = inject(HyFidelity);
+	el = inject(ElementRef).nativeElement;
+	isButton = this.el.tagName === "BUTTON";
+	variant = input("solid", ...ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []);
+	size = input(this.config.size, ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+	tone = input(this.config.tone, ...ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []);
+	iconOnly = input(false, {
+		...ngDevMode ? { debugName: "iconOnly" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	loading = input(false, {
+		...ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	disabled = input(false, {
+		...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	material = computed(() => {
+		if (this.variant() !== "glass") return null;
+		return this.fidelity.tier() === "low" ? "solid" : this.config.material;
+	}, ...ngDevMode ? [{ debugName: "material" }] : /* istanbul ignore next */ []);
+	blocked = computed(() => this.loading() || !this.isButton && this.disabled(), ...ngDevMode ? [{ debugName: "blocked" }] : /* istanbul ignore next */ []);
+	constructor() {
+		this.el.addEventListener("click", (event) => {
+			if (!this.blocked()) return;
+			event.preventDefault();
+			event.stopImmediatePropagation();
+		}, { capture: true });
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: HyButton,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.3",
+		type: HyButton,
+		isStandalone: true,
+		selector: "button[hyButton], a[hyButton]",
+		inputs: {
+			variant: {
+				classPropertyName: "variant",
+				publicName: "variant",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			size: {
+				classPropertyName: "size",
+				publicName: "size",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			tone: {
+				classPropertyName: "tone",
+				publicName: "tone",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			iconOnly: {
+				classPropertyName: "iconOnly",
+				publicName: "iconOnly",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			loading: {
+				classPropertyName: "loading",
+				publicName: "loading",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			properties: {
+				"class.hy-glass": "variant() === \"glass\"",
+				"attr.data-material": "material()",
+				"attr.data-thickness": "variant() === \"glass\" ? \"thin\" : null",
+				"attr.data-variant": "variant()",
+				"attr.data-size": "size()",
+				"attr.data-tone": "tone()",
+				"attr.data-icon-only": "iconOnly() || null",
+				"attr.data-loading": "loading() || null",
+				"attr.aria-busy": "loading() || null",
+				"attr.aria-disabled": "blocked() || null",
+				"attr.disabled": "isButton && disabled() ? \"\" : null",
+				"attr.tabindex": "!isButton && disabled() ? -1 : null"
+			},
+			classAttribute: "hy-button"
+		},
+		hostDirectives: [{ directive: i1.HyInteractive }],
+		ngImport: i0,
+		template: "<span class=\"hy-button__label\"><ng-content /></span>\r\n@if (loading()) {\r\n  <!-- Inline, so a button does not pull in the icon registry. -->\r\n  <span class=\"hy-button__spinner\" aria-hidden=\"true\">\r\n    <svg viewBox=\"0 0 24 24\"><path d=\"M21 12a9 9 0 1 1-6.219-8.56\" /></svg>\r\n  </span>\r\n}\r\n",
+		styles: [":host{--_c: var(--hy-primary);--_on: var(--hy-primary-ink);--_h: var(--hy-control-md);--_px: var(--hy-space-4);position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--hy-space-2);block-size:var(--_h);min-inline-size:var(--_h);padding-inline:var(--_px);border:1px solid transparent;border-radius:var(--hy-button-radius, var(--hy-radius-pill));font:inherit;font-size:var(--hy-step-0);font-weight:var(--hy-button-font-weight, 560);line-height:1;white-space:nowrap;text-decoration:none;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;transition:background-color var(--hy-dur-quick) var(--hy-ease-out),color var(--hy-dur-quick) var(--hy-ease-out),box-shadow var(--hy-dur-quick) var(--hy-ease-out),scale var(--hy-dur-quick) var(--hy-ease-out),translate var(--hy-dur-settle) var(--hy-ease-out),--hy-glow var(--hy-dur-settle) var(--hy-ease-out)}:host([data-size=\"sm\"]){--_h: var(--hy-control-sm);--_px: var(--hy-space-3);font-size:var(--hy-step--1);letter-spacing:var(--hy-tracking-small)}:host([data-size=\"lg\"]){--_h: var(--hy-control-lg);--_px: var(--hy-space-6);font-size:var(--hy-step-1)}:host([data-icon-only]){padding-inline:0;inline-size:var(--_h)}:host([data-tone=\"secondary\"]){--_c: var(--hy-secondary, var(--hy-primary));--_on: var(--hy-secondary-ink, var(--hy-primary-ink))}:host([data-tone=\"neutral\"]){--_c: var(--hy-ink);--_on: var(--hy-bg)}:host([data-tone=\"danger\"]){--_c: var(--hy-danger);--_on: var(--hy-danger-ink)}:host([data-tone=\"success\"]){--_c: var(--hy-success);--_on: var(--hy-bg)}:host([data-tone=\"warning\"]){--_c: var(--hy-warning);--_on: var(--hy-bg)}:host([data-variant=\"solid\"]){background-color:var(--_c);color:var(--_on);box-shadow:inset 0 1px #ffffff38,0 6px 16px -8px color-mix(in srgb,var(--_c) 70%,transparent)}:host([data-variant=\"solid\"][data-hover]){background-color:color-mix(in srgb,var(--_c) 88%,var(--hy-ink))}:host([data-variant=\"glass\"]){color:var(--hy-ink)}:host([data-variant=\"glass\"][data-hover]){--hy-glow: .25}:host([data-variant=\"soft\"]){background-color:color-mix(in srgb,var(--_c) 13%,transparent);color:var(--_c)}:host([data-variant=\"soft\"][data-hover]){background-color:color-mix(in srgb,var(--_c) 20%,transparent)}:host([data-variant=\"ghost\"]){background-color:transparent;color:var(--_c)}:host([data-variant=\"ghost\"][data-hover]){background-color:color-mix(in srgb,var(--_c) 10%,transparent)}:host([data-press]){scale:.97;transition-duration:min(.1s,var(--hy-dur-quick))}:host([data-variant=\"solid\"][data-press]){background-color:color-mix(in srgb,var(--_c) 78%,var(--hy-ink))}:host([data-variant=\"soft\"][data-press]){background-color:color-mix(in srgb,var(--_c) 26%,transparent)}:host([data-variant=\"ghost\"][data-press]){background-color:color-mix(in srgb,var(--_c) 16%,transparent)}:host([data-variant=\"glass\"][data-press]){--hy-glow: .45}:host(:focus-visible){outline:none;box-shadow:var(--hy-focus-ring)}:host(:disabled),:host([aria-disabled=\"true\"]:not([data-loading])){opacity:.45;cursor:not-allowed;pointer-events:none}:host([data-loading]){cursor:progress}.hy-button__label{display:inline-flex;align-items:center;gap:inherit}:host([data-loading]) .hy-button__label{visibility:hidden}.hy-button__spinner{position:absolute;inset:0;display:grid;place-items:center}.hy-button__spinner svg{inline-size:1.25em;block-size:1.25em;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;animation:hy-spin .8s linear infinite}@keyframes hy-spin{to{rotate:1turn}}@media(prefers-reduced-motion:reduce){.hy-button__spinner svg{animation-duration:2.4s}}@media(forced-colors:active){:host{border-color:ButtonText}}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: HyButton,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "button[hyButton], a[hyButton]",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			hostDirectives: [HyInteractive],
+			host: {
+				class: "hy-button",
+				"[class.hy-glass]": "variant() === \"glass\"",
+				"[attr.data-material]": "material()",
+				"[attr.data-thickness]": "variant() === \"glass\" ? \"thin\" : null",
+				"[attr.data-variant]": "variant()",
+				"[attr.data-size]": "size()",
+				"[attr.data-tone]": "tone()",
+				"[attr.data-icon-only]": "iconOnly() || null",
+				"[attr.data-loading]": "loading() || null",
+				"[attr.aria-busy]": "loading() || null",
+				"[attr.aria-disabled]": "blocked() || null",
+				"[attr.disabled]": "isButton && disabled() ? \"\" : null",
+				"[attr.tabindex]": "!isButton && disabled() ? -1 : null"
+			},
+			template: "<span class=\"hy-button__label\"><ng-content /></span>\r\n@if (loading()) {\r\n  <!-- Inline, so a button does not pull in the icon registry. -->\r\n  <span class=\"hy-button__spinner\" aria-hidden=\"true\">\r\n    <svg viewBox=\"0 0 24 24\"><path d=\"M21 12a9 9 0 1 1-6.219-8.56\" /></svg>\r\n  </span>\r\n}\r\n",
+			styles: [":host{--_c: var(--hy-primary);--_on: var(--hy-primary-ink);--_h: var(--hy-control-md);--_px: var(--hy-space-4);position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--hy-space-2);block-size:var(--_h);min-inline-size:var(--_h);padding-inline:var(--_px);border:1px solid transparent;border-radius:var(--hy-button-radius, var(--hy-radius-pill));font:inherit;font-size:var(--hy-step-0);font-weight:var(--hy-button-font-weight, 560);line-height:1;white-space:nowrap;text-decoration:none;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;transition:background-color var(--hy-dur-quick) var(--hy-ease-out),color var(--hy-dur-quick) var(--hy-ease-out),box-shadow var(--hy-dur-quick) var(--hy-ease-out),scale var(--hy-dur-quick) var(--hy-ease-out),translate var(--hy-dur-settle) var(--hy-ease-out),--hy-glow var(--hy-dur-settle) var(--hy-ease-out)}:host([data-size=\"sm\"]){--_h: var(--hy-control-sm);--_px: var(--hy-space-3);font-size:var(--hy-step--1);letter-spacing:var(--hy-tracking-small)}:host([data-size=\"lg\"]){--_h: var(--hy-control-lg);--_px: var(--hy-space-6);font-size:var(--hy-step-1)}:host([data-icon-only]){padding-inline:0;inline-size:var(--_h)}:host([data-tone=\"secondary\"]){--_c: var(--hy-secondary, var(--hy-primary));--_on: var(--hy-secondary-ink, var(--hy-primary-ink))}:host([data-tone=\"neutral\"]){--_c: var(--hy-ink);--_on: var(--hy-bg)}:host([data-tone=\"danger\"]){--_c: var(--hy-danger);--_on: var(--hy-danger-ink)}:host([data-tone=\"success\"]){--_c: var(--hy-success);--_on: var(--hy-bg)}:host([data-tone=\"warning\"]){--_c: var(--hy-warning);--_on: var(--hy-bg)}:host([data-variant=\"solid\"]){background-color:var(--_c);color:var(--_on);box-shadow:inset 0 1px #ffffff38,0 6px 16px -8px color-mix(in srgb,var(--_c) 70%,transparent)}:host([data-variant=\"solid\"][data-hover]){background-color:color-mix(in srgb,var(--_c) 88%,var(--hy-ink))}:host([data-variant=\"glass\"]){color:var(--hy-ink)}:host([data-variant=\"glass\"][data-hover]){--hy-glow: .25}:host([data-variant=\"soft\"]){background-color:color-mix(in srgb,var(--_c) 13%,transparent);color:var(--_c)}:host([data-variant=\"soft\"][data-hover]){background-color:color-mix(in srgb,var(--_c) 20%,transparent)}:host([data-variant=\"ghost\"]){background-color:transparent;color:var(--_c)}:host([data-variant=\"ghost\"][data-hover]){background-color:color-mix(in srgb,var(--_c) 10%,transparent)}:host([data-press]){scale:.97;transition-duration:min(.1s,var(--hy-dur-quick))}:host([data-variant=\"solid\"][data-press]){background-color:color-mix(in srgb,var(--_c) 78%,var(--hy-ink))}:host([data-variant=\"soft\"][data-press]){background-color:color-mix(in srgb,var(--_c) 26%,transparent)}:host([data-variant=\"ghost\"][data-press]){background-color:color-mix(in srgb,var(--_c) 16%,transparent)}:host([data-variant=\"glass\"][data-press]){--hy-glow: .45}:host(:focus-visible){outline:none;box-shadow:var(--hy-focus-ring)}:host(:disabled),:host([aria-disabled=\"true\"]:not([data-loading])){opacity:.45;cursor:not-allowed;pointer-events:none}:host([data-loading]){cursor:progress}.hy-button__label{display:inline-flex;align-items:center;gap:inherit}:host([data-loading]) .hy-button__label{visibility:hidden}.hy-button__spinner{position:absolute;inset:0;display:grid;place-items:center}.hy-button__spinner svg{inline-size:1.25em;block-size:1.25em;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;animation:hy-spin .8s linear infinite}@keyframes hy-spin{to{rotate:1turn}}@media(prefers-reduced-motion:reduce){.hy-button__spinner svg{animation-duration:2.4s}}@media(forced-colors:active){:host{border-color:ButtonText}}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		variant: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "variant",
+				required: false
+			}]
+		}],
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}],
+		tone: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "tone",
+				required: false
+			}]
+		}],
+		iconOnly: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "iconOnly",
+				required: false
+			}]
+		}],
+		loading: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "loading",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}]
+	}
+});
+export { HyButton };
+
+//# sourceMappingURL=hyalo-angular-button.mjs.map

package/fesm2022/hyalo-angular-button.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"hyalo-angular-button.mjs","names":[],"sources":["../../../projects/hyalo/button/button.ts","../../../projects/hyalo/button/button.html"],"sourcesContent":["import {\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  ElementRef,\r\n  booleanAttribute,\r\n  computed,\r\n  inject,\r\n  input,\r\n} from '@angular/core';\r\nimport { HY_CONFIG, HyFidelity, HyInteractive, type HySize, type HyTone } from '@hyalo/angular';\r\n\r\n/**\r\n * - `solid`: filled with the tone colour. The main action on a view.\r\n * - `glass`: a glass surface with tone-coloured text.\r\n * - `soft`: a light wash of the tone colour.\r\n * - `ghost`: text only, a surface appears on hover.\r\n */\r\nexport type HyButtonVariant = 'solid' | 'glass' | 'soft' | 'ghost';\r\n\r\n/**\r\n * Button and link button.\r\n *\r\n * ```html\r\n * <button hyButton (click)=\"save()\">Save</button>\r\n * <a hyButton variant=\"glass\" routerLink=\"/pricing\">Pricing</a>\r\n * <button hyButton iconOnly aria-label=\"Close\"><hy-icon name=\"x\" /></button>\r\n * ```\r\n *\r\n * It stays a native `<button>` or `<a>`, so forms, routing and keyboard\r\n * behaviour work as usual. A press dims and shrinks it the moment the\r\n * pointer goes down. Add `hyMagnetic` for the magnetic hover effect, or\r\n * `hyRipple` for a press ripple.\r\n *\r\n * While `loading`, the button keeps its focus and width, sets `aria-busy`\r\n * and ignores clicks. A disabled link gets `aria-disabled` and leaves the\r\n * tab order, since links have no native disabled state.\r\n */\r\n@Component({\r\n  // Attribute selector so the host stays a native <button> or <a>.\r\n  // eslint-disable-next-line @angular-eslint/component-selector\r\n  selector: 'button[hyButton], a[hyButton]',\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  hostDirectives: [HyInteractive],\r\n  host: {\r\n    class: 'hy-button',\r\n    '[class.hy-glass]': 'variant() === \"glass\"',\r\n    '[attr.data-material]': 'material()',\r\n    // Buttons are small chips of glass, so they get the thinnest material.\r\n    '[attr.data-thickness]': 'variant() === \"glass\" ? \"thin\" : null',\r\n    '[attr.data-variant]': 'variant()',\r\n    '[attr.data-size]': 'size()',\r\n    '[attr.data-tone]': 'tone()',\r\n    '[attr.data-icon-only]': 'iconOnly() || null',\r\n    '[attr.data-loading]': 'loading() || null',\r\n    '[attr.aria-busy]': 'loading() || null',\r\n    '[attr.aria-disabled]': 'blocked() || null',\r\n    '[attr.disabled]': 'isButton && disabled() ? \"\" : null',\r\n    '[attr.tabindex]': '!isButton && disabled() ? -1 : null',\r\n  },\r\n  templateUrl: './button.html',\r\n  styleUrl: './button.css',\r\n})\r\nexport class HyButton {\r\n  private readonly config = inject(HY_CONFIG);\r\n  private readonly fidelity = inject(HyFidelity);\r\n  private readonly el = inject<ElementRef<HTMLElement>>(ElementRef).nativeElement;\r\n  protected readonly isButton = this.el.tagName === 'BUTTON';\r\n\r\n  /** Visual style. */\r\n  readonly variant = input<HyButtonVariant>('solid');\r\n  /** Height and padding. Defaults to the configured size. */\r\n  readonly size = input<HySize>(this.config.size);\r\n  /** Colour role. Defaults to the configured tone. */\r\n  readonly tone = input<HyTone>(this.config.tone);\r\n  /** Square button for a single icon. Give it an `aria-label`. */\r\n  readonly iconOnly = input(false, { transform: booleanAttribute });\r\n  /** Shows a spinner and blocks clicks without dropping focus. */\r\n  readonly loading = input(false, { transform: booleanAttribute });\r\n  /** Disables the button. On links this sets `aria-disabled`. */\r\n  readonly disabled = input(false, { transform: booleanAttribute });\r\n\r\n  /** Glass follows the configured material and goes solid on the low tier. */\r\n  protected readonly material = computed(() => {\r\n    if (this.variant() !== 'glass') return null;\r\n    return this.fidelity.tier() === 'low' ? 'solid' : this.config.material;\r\n  });\r\n\r\n  /** True when clicks should be ignored. */\r\n  protected readonly blocked = computed(\r\n    () => this.loading() || (!this.isButton && this.disabled()),\r\n  );\r\n\r\n  constructor() {\r\n    // A capture listener on the element runs before the app's own (click)\r\n    // handlers, so a blocked click never reaches them.\r\n    this.el.addEventListener(\r\n      'click',\r\n      (event) => {\r\n        if (!this.blocked()) return;\r\n        event.preventDefault();\r\n        event.stopImmediatePropagation();\r\n      },\r\n      { capture: true },\r\n    );\r\n  }\r\n}\r\n","<span class=\"hy-button__label\"><ng-content /></span>\r\n@if (loading()) {\r\n  <!-- Inline, so a button does not pull in the icon registry. -->\r\n  <span class=\"hy-button__spinner\" aria-hidden=\"true\">\r\n    <svg viewBox=\"0 0 24 24\"><path d=\"M21 12a9 9 0 1 1-6.219-8.56\" /></svg>\r\n  </span>\r\n}\r\n"],"mappings":"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"}