ng-hub-ui-buttons 22.7.0 → 22.8.0

package/README.md

@@ -51,7 +51,7 @@ This library is part of the **ng-hub-ui** ecosystem:
 ## Features
 
 - **Signal-based API** — all inputs use `input()`, `model()` and `output()`; fully `OnPush`-safe and compatible with zoneless apps.
-- **Five variants × six colours** — `solid`, `outline`, `soft`, `ghost` and `link`, each available in `primary`, `secondary`, `success`, `danger`, `warning` and `info`.
+- **Five variants × nine colours** — `solid`, `outline`, `soft`, `ghost` and `link`, each available in `primary`, `secondary`, `success`, `danger`, `warning`, `info`, `neutral`, `light` and `dark`.
 - **Four sizes** — `sm`, `md`, `lg`, `xl` with proportional padding and font scaling.
 - **FAB with nine positions** — fixed-viewport placement at any corner, edge-center or screen-center via CSS logical properties (RTL-ready).
 - **Speed Dial** — expandable FAB menu with `isOpen` two-way model, directional expansion and Escape close.
@@ -117,10 +117,9 @@ A single component with a dual selector — use it as an **element** or as an **
 | Input | Type | Default | Description |
 |-------|------|---------|-------------|
 | `variant` | `solid \| outline \| soft \| ghost \| link` | `solid` | Visual style |
-| `color` | `primary \| secondary \| success \| danger \| warning \| info` | `primary` | Semantic colour |
+| `color` | `HubSemanticColor` — the nine built-ins (`primary \| secondary \| success \| danger \| warning \| info \| neutral \| light \| dark`) **or any custom accent** registered with `hub-btn-color-rules()` | `primary` | Semantic colour (open set) |
 | `size` | `sm \| md \| lg \| xl` | `md` | Size scale |
-| `iconOnly` | `boolean` | `false` | Equal-padding square button for icon-only use |
-| `loading` | `boolean` | `false` | Shows spinner and blocks interaction |
+| `loading` | `boolean` | `false` | Shows the spinner and marks the button **busy + disabled** — non-focusable, inert to pointer/keyboard, reflects `aria-busy="true"` and the `disabled` attribute |
 | `disabled` | `boolean` | `false` | Disables the button and sets the `disabled` attribute |
 
 ```html
@@ -132,10 +131,27 @@ A single component with a dual selector — use it as an **element** or as an **
 <a hubButton variant="link" color="primary" href="/docs">Read more</a>
 ```
 
-> **Tip:** prefer the attribute form on a native `<button>` / `<a>` when you need real button semantics (focus, keyboard activation, form submission). `<hub-button>` is a styling host without native button behaviour.
+> **Tip:** prefer the attribute form on a native `<button>` / `<a>` when you need real button semantics (focus, keyboard activation, form submission). The `<hub-button>` element form is a styling host, but it self-advertises `role="button"`, a focusable `tabindex` and Enter/Space activation so it stays keyboard-accessible; because it then reports as a button, don't nest it inside another interactive element.
 >
 > **Deprecated aliases:** `HubBtnComponent` and `HubBtnDirective` still export (pointing to `HubButtonComponent`) for backward compatibility — migrate to `HubButtonComponent`.
 
+#### Loading / busy state
+
+```html
+<button hubButton color="primary" [loading]="saving()">Save</button>
+```
+
+While `loading` is `true` the button shows an animated spinner and is fully inert: it reflects `aria-busy="true"` and the native `disabled` attribute, drops out of the tab order and ignores pointer and keyboard activation — so an in-flight submit can't fire twice.
+
+The spinner glyph is the swappable `--hub-button-spinner` token (a `url("data:image/svg+xml,…")` painted through `mask`, so it inherits the button's text colour). Point it at any SVG to replace the loader, and tune `--hub-button-spinner-duration` / `--hub-button-spinner-size`:
+
+```css
+hub-button, [hubButton] {
+    --hub-button-spinner: url("data:image/svg+xml,%3Csvg …%3E"); /* your loader */
+    --hub-button-spinner-duration: 1s;
+}
+```
+
 ### `HubFabComponent` — `<hub-fab>`
 
 | Input | Type | Default | Description |
@@ -235,8 +251,18 @@ All visual properties are CSS custom properties scoped with `:where()` (zero spe
 --hub-button-gap:               0.375rem;
 --hub-button-transition:        all 0.15s ease;
 --hub-button-spinner-size:      0.875em;
+--hub-button-spinner-duration:  0.7s;
+--hub-button-spinner:           url("data:image/svg+xml,…"); /* the loading glyph — swap for any SVG */
 --hub-button-disabled-opacity:  0.55;
 
+/* Button interaction slots (overridable hover / pressed families) */
+--hub-btn-hover-bg:       var(--hub-btn-accent-subtle);
+--hub-btn-hover-border:   transparent;
+--hub-btn-hover-color:    var(--hub-btn-accent-emphasis);
+--hub-btn-active-bg:      color-mix(in oklch, var(--hub-btn-accent) 70%, var(--hub-sys-color-ink, #212529));
+--hub-btn-active-border:  transparent;
+--hub-btn-active-color:   var(--hub-btn-accent-on);
+
 /* FAB */
 --hub-fab-size-mini:          2.5rem;
 --hub-fab-size-standard:      3.5rem;
@@ -256,17 +282,17 @@ All visual properties are CSS custom properties scoped with `:where()` (zero spe
 /* Dropdown panel */
 --hub-dropdown-panel-min-width:      11.25rem;
 --hub-dropdown-panel-max-height:     20rem;
---hub-dropdown-panel-padding-y:      0.25rem;
---hub-dropdown-panel-bg:             var(--hub-sys-color-surface-default, #fff);
---hub-dropdown-panel-border-color:   var(--hub-sys-color-border-subtle, #e2e8f0);
---hub-dropdown-panel-border-radius:  var(--hub-sys-radius-md, 0.5rem);
---hub-dropdown-panel-shadow:         var(--hub-sys-shadow-lg);
---hub-dropdown-panel-zindex:        1000;
+--hub-dropdown-panel-padding-y:      var(--hub-ref-space-1, 0.25rem);
+--hub-dropdown-panel-bg:             var(--hub-sys-color-surface-default, #ffffff);
+--hub-dropdown-panel-border-color:   var(--hub-sys-color-border-subtle, #dee2e6);
+--hub-dropdown-panel-border-radius:  var(--hub-sys-radius-md, 0.375rem);
+--hub-dropdown-panel-shadow:         var(--hub-sys-shadow-lg, 0 1rem 3rem rgba(0, 0, 0, 0.175));
+--hub-dropdown-panel-zindex:        var(--hub-sys-zindex-dropdown, 1000);
 
 /* Dropdown item */
---hub-dropdown-item-padding-x:          0.875rem;
---hub-dropdown-item-padding-y:          0.4375rem;
---hub-dropdown-item-hover-bg:           var(--hub-sys-color-surface-subtle, #f8fafc);
+--hub-dropdown-item-padding-x:          var(--hub-ref-space-3, 1rem);
+--hub-dropdown-item-padding-y:          var(--hub-ref-space-2, 0.5rem);
+--hub-dropdown-item-hover-bg:           var(--hub-sys-color-surface-subtle, #f8f9fa);
 --hub-dropdown-item-border-radius:      var(--hub-sys-radius-sm, 0.25rem);
 --hub-dropdown-item-disabled-opacity:   0.45;
 ```
@@ -285,12 +311,15 @@ Register custom semantic colors without modifying the library. Import the mixin
 
 ### Add a custom color to all five button variants
 
+`hub-btn-color-rules('brand')` points the local `--hub-btn-accent` slot at
+`--hub-sys-color-brand`. You only define that **one** value — the button derives
+the whole role family (`-emphasis` / `-subtle` / `-on`) from it at runtime, so
+every appearance (solid/outline/soft/ghost/link) works and `color="brand"`
+type-checks (the `color` input is an open set):
+
 ```scss
 :root {
-    --hub-sys-color-brand-default:    #ff6b00;
-    --hub-sys-color-brand-emphasis:   #cc5500;
-    --hub-sys-color-brand-subtle:     #fff0e6;
-    --hub-sys-color-brand-on-default: #fff;
+    --hub-sys-color-brand: #ff6b00; // the single accent — that's all it needs
 }
 
 hub-button, [hubButton] {
@@ -305,17 +334,20 @@ hub-button, [hubButton] {
 
 ### Create a fully custom variant
 
-`hub-btn-variant-rules` is the generic primitive. Its defaults match the `ghost` variant — override only the values that differ:
+`hub-btn-variant-rules` is the generic primitive — **all parameters are named**
+(there is no positional `$type`). Its defaults match the `ghost` variant, and
+every colour reads the local `--hub-btn-accent*` slot family, so it stays
+accent-agnostic. Override only the values that differ:
 
 ```scss
 hub-button, [hubButton] {
     &.hub-btn-inverted.hub-btn-brand {
-        @include hub.hub-btn-variant-rules('brand',
-            $bg:          var(--hub-sys-color-brand-on-default),
-            $color:       var(--hub-sys-color-brand-default),
-            $border:      var(--hub-sys-color-brand-default),
-            $hover-bg:    var(--hub-sys-color-brand-default),
-            $hover-color: var(--hub-sys-color-brand-on-default)
+        @include hub.hub-btn-variant-rules(
+            $bg:          var(--hub-btn-accent-on),
+            $color:       var(--hub-btn-accent),
+            $border:      var(--hub-btn-accent),
+            $hover-bg:    var(--hub-btn-accent),
+            $hover-color: var(--hub-btn-accent-on)
         );
     }
 }
@@ -341,8 +373,8 @@ hub-button, [hubButton] {
 
 | Mixin | Context | Description |
 |---|---|---|
-| `hub-btn-variant-rules($type, ...)` | global `hub-button, [hubButton]` block | Generic primitive — all variant properties as named params |
-| `hub-btn-color-rules($type)` | global `hub-button, [hubButton]` block | All five built-in variants for one custom color |
+| `hub-btn-variant-rules($bg, $color, $border, $hover-*, $active-*, …)` | inside a `hub-button, [hubButton]` variant selector | Generic primitive — every appearance property as a **named** param (no positional `$type`) |
+| `hub-btn-color-rules($type)` | global `hub-button, [hubButton]` block | Registers one custom accent (`--hub-btn-accent` → `--hub-sys-color-$type`); all five appearances derive from it |
 | `hub-fab-color($type)` | root | Global `.hub-fab-{type}` color rule |
 | `hub-dropdown-panel-color($type)` | root | Global color rule for `hub-dropdown-panel` |
 | `hub-dropdown-panel-color-rules($type)` | inside `hub-dropdown-panel` selector | CSS properties only — bring your own selector |

package/fesm2022/ng-hub-ui-buttons.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, input, HostBinding, ChangeDetectionStrategy, Component, output, signal, inject, DestroyRef, ViewEncapsulation, model, PLATFORM_ID, ElementRef, ViewContainerRef, Directive } from '@angular/core';
+import { InjectionToken, inject, ElementRef, input, HostListener, HostBinding, ChangeDetectionStrategy, Component, output, signal, DestroyRef, ViewEncapsulation, model, PLATFORM_ID, ViewContainerRef, Directive } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { fromEvent } from 'rxjs';
 import { debounceTime, filter, take } from 'rxjs/operators';
@@ -18,8 +18,16 @@ const DROPDOWN_CONTEXT = new InjectionToken('HubDropdownContext');
  * - As an attribute on any host: `<button hubButton>Save</button>` / `<a hubButton href="…">Link</a>`.
  *
  * Prefer the attribute form on a native `<button>` / `<a>` when you need real button
- * semantics (focus, keyboard activation, form submission); the `<hub-button>` element is
- * a styling host without native button behaviour.
+ * semantics (focus, keyboard activation, form submission). The `<hub-button>` **element**
+ * form is only a styling host — a component cannot swap its own host tag for a native
+ * `<button>` — so it self-advertises `role="button"`, a focusable `tabindex`, and
+ * Enter/Space keyboard activation to stay accessible. The `[hubButton]` attribute form on
+ * a native `<button>`/`<a>` adds **none** of these bindings (the host is already
+ * interactive; a redundant `role`/`tabindex` would be harmful).
+ *
+ * **Accessibility caveat:** an element-form `<hub-button>` now reports `role="button"`,
+ * so it must not be nested inside another interactive element (a `<button>`, `<a>` or any
+ * host that is itself a control), which would produce an invalid nested-interactive tree.
  *
  * **Icons:** project whatever you want as content — the button is icon-library
  * agnostic. The icon's position follows the markup order, and the label/icon gap
@@ -32,6 +40,13 @@ const DROPDOWN_CONTEXT = new InjectionToken('HubDropdownContext');
  * ```
  */
 class HubButtonComponent {
+    /**
+     * Whether this instance renders as the `<hub-button>` element (vs `[hubButton]` on a
+     * native host). Read once from the host tag at construction — a static host fact that
+     * is available immediately (unlike input signals, which are not populated in the
+     * constructor). Gates the a11y host bindings so they only apply to the element form.
+     */
+    _isElementForm = inject(ElementRef).nativeElement.tagName === 'HUB-BUTTON';
     /** Visual style of the button. */
     variant = input('solid', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
@@ -41,12 +56,26 @@ class HubButtonComponent {
     /** Size token. */
     size = input('md', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
-    /** When true, shows a spinner and blocks pointer events. */
+    /**
+     * When true, shows the spinner and marks the button **busy and disabled**: it
+     * reflects `aria-busy="true"`, becomes non-focusable and inert to pointer and
+     * keyboard, and (like {@link disabled}) reflects the native `disabled` attribute
+     * so an in-flight submit button cannot be triggered twice.
+     */
     loading = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
     /** Mirrors the native disabled attribute on the host element. */
     disabled = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /**
+     * True while the button must not respond to interaction — either explicitly
+     * {@link disabled} or busy {@link loading}. Drives the native `disabled`
+     * reflection, the tab-order removal and the keyboard-activation guard so both
+     * states are inert through a single source of truth.
+     */
+    get _isInert() {
+        return this.disabled() || this.loading();
+    }
     /** Computed CSS classes applied to the host element via HostBinding. */
     get _hostClass() {
         return [
@@ -59,22 +88,85 @@ class HubButtonComponent {
             .filter(Boolean)
             .join(' ');
     }
-    /** Reflects the disabled state as a native HTML attribute. */
+    /** Reflects the inert state (disabled or loading) as the native `disabled` attribute. */
     get _disabledAttr() {
-        return this.disabled() ? true : null;
+        return this._isInert ? true : null;
+    }
+    /** Announces the busy state to assistive tech while loading. */
+    get _ariaBusy() {
+        return this.loading() ? 'true' : null;
+    }
+    /**
+     * Conveys the inert state to assistive tech on the element form, whose custom
+     * host tag does not natively expose `disabled`. Bound to nothing for the
+     * attribute form (its native host already exposes the state).
+     */
+    get _ariaDisabled() {
+        return this._isElementForm && this._isInert ? 'true' : null;
+    }
+    /**
+     * Advertises `role="button"` for the element form only. The attribute form binds
+     * nothing (its native host already exposes the correct role).
+     */
+    get _role() {
+        return this._isElementForm ? 'button' : null;
+    }
+    /**
+     * Makes the element form keyboard-focusable (`0`), or removes it from the tab order
+     * when inert — disabled or loading (`-1`). Bound to nothing for the attribute form.
+     */
+    get _tabindex() {
+        if (!this._isElementForm) {
+            return null;
+        }
+        return this._isInert ? -1 : 0;
+    }
+    /**
+     * Emulates native button keyboard activation for the element form: Enter or Space
+     * triggers a click. Space additionally calls `preventDefault()` to stop the page from
+     * scrolling. No-op for the attribute form (the native host already handles keys) and
+     * while inert (disabled or loading).
+     * @param event The originating keyboard event.
+     */
+    _onKeydown(event) {
+        if (!this._isElementForm || this._isInert) {
+            return;
+        }
+        const isSpace = event.key === ' ' || event.key === 'Spacebar';
+        if (event.key === 'Enter' || isSpace) {
+            if (isSpace) {
+                event.preventDefault();
+            }
+            event.currentTarget.click();
+        }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: HubButtonComponent, isStandalone: true, selector: "hub-button, [hubButton]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", 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": "this._hostClass", "attr.disabled": "this._disabledAttr" }, classAttribute: "hub-btn" }, ngImport: i0, template: "@if (loading()) {\n\t<span class=\"hub-btn__spinner\" aria-hidden=\"true\"></span>\n}\n<ng-content></ng-content>\n", styles: [":where(:host){--hub-button-padding-x: var(--hub-ref-space-3, 1rem);--hub-button-padding-y: var(--hub-ref-space-2, .5rem);--hub-button-border-radius: var(--hub-sys-radius-md, .375rem);--hub-button-border-width: 1.5px;--hub-button-font-size: var(--hub-ref-font-size-base, 1rem);--hub-button-font-weight: var(--hub-ref-font-weight-medium, 500);--hub-button-gap: var(--hub-ref-space-2, .5rem);--hub-button-transition: all .15s ease;--hub-button-spinner-size: .875em;--hub-button-disabled-opacity: var(--hub-sys-opacity-disabled, .65);--hub-btn-accent: var(--hub-sys-color-primary, #0d6efd);--hub-btn-accent-emphasis: color-mix(in oklch, var(--hub-btn-accent) 80%, var(--hub-sys-color-ink, #212529));--hub-btn-accent-subtle: color-mix(in oklch, var(--hub-btn-accent) 12%, var(--hub-sys-surface-page, #fff));--hub-btn-accent-on: oklch(from var(--hub-btn-accent) clamp(0, (.62 - l) * 1000, 1) 0 h)}:host{display:inline-flex;align-items:center;justify-content:center;gap:var(--hub-button-gap);padding:var(--hub-button-padding-y) var(--hub-button-padding-x);border-radius:var(--hub-button-border-radius);border:var(--hub-button-border-width) solid transparent;font-size:var(--hub-button-font-size);font-weight:var(--hub-button-font-weight);cursor:pointer;text-decoration:none;transition:var(--hub-button-transition);-webkit-user-select:none;user-select:none;white-space:nowrap}:host(.hub-btn-disabled),:host([disabled]){opacity:var(--hub-button-disabled-opacity);pointer-events:none}:host(.hub-btn-loading){pointer-events:none}:host(.hub-btn-sm){--hub-button-padding-x: var(--hub-ref-space-2, .5rem);--hub-button-padding-y: var(--hub-ref-space-1, .25rem);--hub-button-font-size: var(--hub-ref-font-size-sm, .875rem);--hub-button-border-radius: var(--hub-sys-radius-sm, .25rem)}:host(.hub-btn-lg){--hub-button-padding-x: var(--hub-ref-space-4, 1.5rem);--hub-button-padding-y: var(--hub-ref-space-2, .5rem);--hub-button-font-size: var(--hub-ref-font-size-lg, 1.25rem)}:host(.hub-btn-xl){--hub-button-padding-x: var(--hub-ref-space-4, 1.5rem);--hub-button-padding-y: var(--hub-ref-space-3, 1rem);--hub-button-font-size: var(--hub-ref-font-size-lg, 1.25rem)}.hub-btn__spinner{display:inline-block;width:var(--hub-button-spinner-size);height:var(--hub-button-spinner-size);border:2px solid color-mix(in oklch,currentColor 30%,transparent);border-top-color:currentColor;border-radius:50%;animation:hub-btn-spin .7s linear infinite}@keyframes hub-btn-spin{to{transform:rotate(360deg)}}:host(.hub-btn-primary){--hub-btn-accent: var(--hub-sys-color-primary, var(--hub-sys-color-primary))}:host(.hub-btn-secondary){--hub-btn-accent: var(--hub-sys-color-secondary, var(--hub-sys-color-primary))}:host(.hub-btn-success){--hub-btn-accent: var(--hub-sys-color-success, var(--hub-sys-color-primary))}:host(.hub-btn-danger){--hub-btn-accent: var(--hub-sys-color-danger, var(--hub-sys-color-primary))}:host(.hub-btn-warning){--hub-btn-accent: var(--hub-sys-color-warning, var(--hub-sys-color-primary))}:host(.hub-btn-info){--hub-btn-accent: var(--hub-sys-color-info, var(--hub-sys-color-primary))}:host(.hub-btn-neutral){--hub-btn-accent: var(--hub-sys-color-neutral, var(--hub-sys-color-primary))}:host(.hub-btn-light){--hub-btn-accent: var(--hub-sys-color-light, var(--hub-sys-color-primary))}:host(.hub-btn-dark){--hub-btn-accent: var(--hub-sys-color-dark, var(--hub-sys-color-primary))}:host(.hub-btn-solid){background:var(--hub-btn-accent);color:var(--hub-btn-accent-on);border-color:var(--hub-btn-accent)}:host(.hub-btn-solid):hover:not([disabled]):not(.hub-btn-disabled){background:var(--hub-btn-accent-emphasis);border-color:var(--hub-btn-accent-emphasis)}:host(.hub-btn-outline){background:transparent;color:var(--hub-btn-accent-emphasis);border-color:var(--hub-btn-accent)}:host(.hub-btn-outline):hover:not([disabled]):not(.hub-btn-disabled){background:var(--hub-btn-accent-subtle)}:host(.hub-btn-soft){background:var(--hub-btn-accent-subtle);color:var(--hub-btn-accent-emphasis);border-color:transparent}:host(.hub-btn-soft):hover:not([disabled]):not(.hub-btn-disabled){background:color-mix(in oklch,var(--hub-btn-accent-subtle) 80%,var(--hub-btn-accent))}:host(.hub-btn-ghost){background:transparent;color:var(--hub-btn-accent-emphasis);border-color:transparent}:host(.hub-btn-ghost):hover:not([disabled]):not(.hub-btn-disabled){background:var(--hub-btn-accent-subtle)}:host(.hub-btn-link){background:transparent;color:var(--hub-btn-accent-emphasis);border-color:transparent;text-decoration:underline;padding-inline:.125rem}:host(.hub-btn-link):hover:not([disabled]):not(.hub-btn-disabled){color:var(--hub-btn-accent)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: HubButtonComponent, isStandalone: true, selector: "hub-button, [hubButton]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", 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: { listeners: { "keydown": "_onKeydown($event)" }, properties: { "class": "this._hostClass", "attr.disabled": "this._disabledAttr", "attr.aria-busy": "this._ariaBusy", "attr.aria-disabled": "this._ariaDisabled", "attr.role": "this._role", "attr.tabindex": "this._tabindex" }, classAttribute: "hub-btn" }, ngImport: i0, template: "@if (loading()) {\n\t<span class=\"hub-btn__spinner\" aria-hidden=\"true\"></span>\n}\n<ng-content></ng-content>\n", styles: [":where(:host){--hub-button-padding-x: var(--hub-ref-space-3, 1rem);--hub-button-padding-y: var(--hub-ref-space-2, .5rem);--hub-button-border-radius: var(--hub-sys-radius-md, .375rem);--hub-button-border-width: 1.5px;--hub-button-font-size: var(--hub-ref-font-size-base, 1rem);--hub-button-font-weight: var(--hub-ref-font-weight-medium, 500);--hub-button-gap: var(--hub-ref-space-2, .5rem);--hub-button-transition: var(--hub-sys-transition-fast, all .15s ease-in-out);--hub-button-spinner-size: .875em;--hub-button-spinner-duration: .7s;--hub-button-spinner: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' d='M12 3a9 9 0 1 0 9 9'/%3E%3C/svg%3E\");--hub-button-disabled-opacity: var(--hub-sys-opacity-disabled, .65);--hub-btn-accent: var(--hub-sys-color-primary, #0d6efd);--hub-btn-accent-emphasis: color-mix(in oklch, var(--hub-btn-accent) 80%, var(--hub-sys-color-ink, #212529));--hub-btn-accent-subtle: color-mix(in oklch, var(--hub-btn-accent) 12%, var(--hub-sys-surface-page, #ffffff));--hub-btn-accent-on: oklch(from var(--hub-btn-accent) clamp(0, (.62 - l) * 1000, 1) 0 h);--hub-btn-hover-bg: var(--hub-btn-accent-subtle);--hub-btn-hover-border: transparent;--hub-btn-hover-color: var(--hub-btn-accent-emphasis);--hub-btn-active-bg: color-mix(in oklch, var(--hub-btn-accent) 70%, var(--hub-sys-color-ink, #212529));--hub-btn-active-border: transparent;--hub-btn-active-color: var(--hub-btn-accent-on)}:host{display:inline-flex;align-items:center;justify-content:center;gap:var(--hub-button-gap);padding:var(--hub-button-padding-y) var(--hub-button-padding-x);border-radius:var(--hub-button-border-radius);border:var(--hub-button-border-width) solid transparent;font-size:var(--hub-button-font-size);font-weight:var(--hub-button-font-weight);cursor:pointer;text-decoration:none;transition:var(--hub-button-transition);-webkit-user-select:none;user-select:none;white-space:nowrap}:host(.hub-btn-disabled),:host([disabled]){opacity:var(--hub-button-disabled-opacity);pointer-events:none}:host(.hub-btn-loading){pointer-events:none}:host(.hub-btn-sm){--hub-button-padding-x: var(--hub-ref-space-2, .5rem);--hub-button-padding-y: var(--hub-ref-space-1, .25rem);--hub-button-font-size: var(--hub-ref-font-size-sm, .875rem);--hub-button-border-radius: var(--hub-sys-radius-sm, .25rem)}:host(.hub-btn-lg){--hub-button-padding-x: var(--hub-ref-space-4, 1.5rem);--hub-button-padding-y: var(--hub-ref-space-2, .5rem);--hub-button-font-size: var(--hub-ref-font-size-lg, 1.25rem)}:host(.hub-btn-xl){--hub-button-padding-x: var(--hub-ref-space-4, 1.5rem);--hub-button-padding-y: var(--hub-ref-space-3, 1rem);--hub-button-font-size: var(--hub-ref-font-size-lg, 1.25rem)}.hub-btn__spinner{display:inline-block;width:var(--hub-button-spinner-size);height:var(--hub-button-spinner-size);background-color:currentColor;-webkit-mask:var(--hub-button-spinner) center/contain no-repeat;mask:var(--hub-button-spinner) center/contain no-repeat;animation:hub-btn-spin var(--hub-button-spinner-duration, .7s) linear infinite}@media(prefers-reduced-motion:reduce){.hub-btn__spinner{animation-duration:1.6s}}@keyframes hub-btn-spin{to{transform:rotate(360deg)}}:host(.hub-btn-primary){--hub-btn-accent: var(--hub-sys-color-primary, var(--hub-sys-color-primary))}:host(.hub-btn-secondary){--hub-btn-accent: var(--hub-sys-color-secondary, var(--hub-sys-color-primary))}:host(.hub-btn-success){--hub-btn-accent: var(--hub-sys-color-success, var(--hub-sys-color-primary))}:host(.hub-btn-danger){--hub-btn-accent: var(--hub-sys-color-danger, var(--hub-sys-color-primary))}:host(.hub-btn-warning){--hub-btn-accent: var(--hub-sys-color-warning, var(--hub-sys-color-primary))}:host(.hub-btn-info){--hub-btn-accent: var(--hub-sys-color-info, var(--hub-sys-color-primary))}:host(.hub-btn-neutral){--hub-btn-accent: var(--hub-sys-color-neutral, var(--hub-sys-color-primary))}:host(.hub-btn-light){--hub-btn-accent: var(--hub-sys-color-light, var(--hub-sys-color-primary))}:host(.hub-btn-dark){--hub-btn-accent: var(--hub-sys-color-dark, var(--hub-sys-color-primary))}:host(.hub-btn-solid){background:var(--hub-btn-accent);color:var(--hub-btn-accent-on);border-color:var(--hub-btn-accent);--hub-btn-hover-bg: var(--hub-btn-accent-emphasis);--hub-btn-hover-border: var(--hub-btn-accent-emphasis);--hub-btn-hover-color: var(--hub-btn-accent-on);--hub-btn-active-border: var(--hub-btn-active-bg);--hub-btn-active-color: var(--hub-btn-accent-on)}:host(.hub-btn-solid):hover:not([disabled]):not(.hub-btn-disabled){background:var(--hub-btn-hover-bg);border-color:var(--hub-btn-hover-border);color:var(--hub-btn-hover-color)}:host(.hub-btn-solid):active:not([disabled]):not(.hub-btn-disabled){background:var(--hub-btn-active-bg);border-color:var(--hub-btn-active-border);color:var(--hub-btn-active-color)}:host(.hub-btn-outline){background:transparent;color:var(--hub-btn-accent-emphasis);border-color:var(--hub-btn-accent);--hub-btn-hover-border: var(--hub-btn-accent);--hub-btn-active-bg: color-mix(in oklch, var(--hub-btn-accent-subtle) 70%, var(--hub-btn-accent));--hub-btn-active-border: var(--hub-btn-accent);--hub-btn-active-color: var(--hub-btn-accent-emphasis)}:host(.hub-btn-outline):hover:not([disabled]):not(.hub-btn-disabled){background:var(--hub-btn-hover-bg);border-color:var(--hub-btn-hover-border);color:var(--hub-btn-hover-color)}:host(.hub-btn-outline):active:not([disabled]):not(.hub-btn-disabled){background:var(--hub-btn-active-bg);border-color:var(--hub-btn-active-border);color:var(--hub-btn-active-color)}:host(.hub-btn-soft){background:var(--hub-btn-accent-subtle);color:var(--hub-btn-accent-emphasis);border-color:transparent;--hub-btn-hover-bg: color-mix(in oklch, var(--hub-btn-accent-subtle) 80%, var(--hub-btn-accent));--hub-btn-active-bg: color-mix(in oklch, var(--hub-btn-accent-subtle) 60%, var(--hub-btn-accent));--hub-btn-active-color: var(--hub-btn-accent-emphasis)}:host(.hub-btn-soft):hover:not([disabled]):not(.hub-btn-disabled){background:var(--hub-btn-hover-bg);border-color:var(--hub-btn-hover-border);color:var(--hub-btn-hover-color)}:host(.hub-btn-soft):active:not([disabled]):not(.hub-btn-disabled){background:var(--hub-btn-active-bg);border-color:var(--hub-btn-active-border);color:var(--hub-btn-active-color)}:host(.hub-btn-ghost){background:transparent;color:var(--hub-btn-accent-emphasis);border-color:transparent;--hub-btn-active-bg: color-mix(in oklch, var(--hub-btn-accent-subtle) 80%, var(--hub-btn-accent));--hub-btn-active-color: var(--hub-btn-accent-emphasis)}:host(.hub-btn-ghost):hover:not([disabled]):not(.hub-btn-disabled){background:var(--hub-btn-hover-bg);border-color:var(--hub-btn-hover-border);color:var(--hub-btn-hover-color)}:host(.hub-btn-ghost):active:not([disabled]):not(.hub-btn-disabled){background:var(--hub-btn-active-bg);border-color:var(--hub-btn-active-border);color:var(--hub-btn-active-color)}:host(.hub-btn-link){background:transparent;color:var(--hub-btn-accent-emphasis);border-color:transparent;text-decoration:underline;padding-inline:.125rem;--hub-btn-hover-bg: transparent;--hub-btn-hover-color: var(--hub-btn-accent);--hub-btn-active-bg: transparent;--hub-btn-active-color: color-mix(in oklch, var(--hub-btn-accent) 70%, var(--hub-sys-color-ink, #212529))}:host(.hub-btn-link):hover:not([disabled]):not(.hub-btn-disabled){background:var(--hub-btn-hover-bg);border-color:var(--hub-btn-hover-border);color:var(--hub-btn-hover-color)}:host(.hub-btn-link):active:not([disabled]):not(.hub-btn-disabled){background:var(--hub-btn-active-bg);border-color:var(--hub-btn-active-border);color:var(--hub-btn-active-color)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'hub-button, [hubButton]', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'hub-btn' }, template: "@if (loading()) {\n\t<span class=\"hub-btn__spinner\" aria-hidden=\"true\"></span>\n}\n<ng-content></ng-content>\n", styles: [":where(:host){--hub-button-padding-x: var(--hub-ref-space-3, 1rem);--hub-button-padding-y: var(--hub-ref-space-2, .5rem);--hub-button-border-radius: var(--hub-sys-radius-md, .375rem);--hub-button-border-width: 1.5px;--hub-button-font-size: var(--hub-ref-font-size-base, 1rem);--hub-button-font-weight: var(--hub-ref-font-weight-medium, 500);--hub-button-gap: var(--hub-ref-space-2, .5rem);--hub-button-transition: all .15s ease;--hub-button-spinner-size: .875em;--hub-button-disabled-opacity: var(--hub-sys-opacity-disabled, .65);--hub-btn-accent: var(--hub-sys-color-primary, #0d6efd);--hub-btn-accent-emphasis: color-mix(in oklch, var(--hub-btn-accent) 80%, var(--hub-sys-color-ink, #212529));--hub-btn-accent-subtle: color-mix(in oklch, var(--hub-btn-accent) 12%, var(--hub-sys-surface-page, #fff));--hub-btn-accent-on: oklch(from var(--hub-btn-accent) clamp(0, (.62 - l) * 1000, 1) 0 h)}:host{display:inline-flex;align-items:center;justify-content:center;gap:var(--hub-button-gap);padding:var(--hub-button-padding-y) var(--hub-button-padding-x);border-radius:var(--hub-button-border-radius);border:var(--hub-button-border-width) solid transparent;font-size:var(--hub-button-font-size);font-weight:var(--hub-button-font-weight);cursor:pointer;text-decoration:none;transition:var(--hub-button-transition);-webkit-user-select:none;user-select:none;white-space:nowrap}:host(.hub-btn-disabled),:host([disabled]){opacity:var(--hub-button-disabled-opacity);pointer-events:none}:host(.hub-btn-loading){pointer-events:none}:host(.hub-btn-sm){--hub-button-padding-x: var(--hub-ref-space-2, .5rem);--hub-button-padding-y: var(--hub-ref-space-1, .25rem);--hub-button-font-size: var(--hub-ref-font-size-sm, .875rem);--hub-button-border-radius: var(--hub-sys-radius-sm, .25rem)}:host(.hub-btn-lg){--hub-button-padding-x: var(--hub-ref-space-4, 1.5rem);--hub-button-padding-y: var(--hub-ref-space-2, .5rem);--hub-button-font-size: var(--hub-ref-font-size-lg, 1.25rem)}:host(.hub-btn-xl){--hub-button-padding-x: var(--hub-ref-space-4, 1.5rem);--hub-button-padding-y: var(--hub-ref-space-3, 1rem);--hub-button-font-size: var(--hub-ref-font-size-lg, 1.25rem)}.hub-btn__spinner{display:inline-block;width:var(--hub-button-spinner-size);height:var(--hub-button-spinner-size);border:2px solid color-mix(in oklch,currentColor 30%,transparent);border-top-color:currentColor;border-radius:50%;animation:hub-btn-spin .7s linear infinite}@keyframes hub-btn-spin{to{transform:rotate(360deg)}}:host(.hub-btn-primary){--hub-btn-accent: var(--hub-sys-color-primary, var(--hub-sys-color-primary))}:host(.hub-btn-secondary){--hub-btn-accent: var(--hub-sys-color-secondary, var(--hub-sys-color-primary))}:host(.hub-btn-success){--hub-btn-accent: var(--hub-sys-color-success, var(--hub-sys-color-primary))}:host(.hub-btn-danger){--hub-btn-accent: var(--hub-sys-color-danger, var(--hub-sys-color-primary))}:host(.hub-btn-warning){--hub-btn-accent: var(--hub-sys-color-warning, var(--hub-sys-color-primary))}:host(.hub-btn-info){--hub-btn-accent: var(--hub-sys-color-info, var(--hub-sys-color-primary))}:host(.hub-btn-neutral){--hub-btn-accent: var(--hub-sys-color-neutral, var(--hub-sys-color-primary))}:host(.hub-btn-light){--hub-btn-accent: var(--hub-sys-color-light, var(--hub-sys-color-primary))}:host(.hub-btn-dark){--hub-btn-accent: var(--hub-sys-color-dark, var(--hub-sys-color-primary))}:host(.hub-btn-solid){background:var(--hub-btn-accent);color:var(--hub-btn-accent-on);border-color:var(--hub-btn-accent)}:host(.hub-btn-solid):hover:not([disabled]):not(.hub-btn-disabled){background:var(--hub-btn-accent-emphasis);border-color:var(--hub-btn-accent-emphasis)}:host(.hub-btn-outline){background:transparent;color:var(--hub-btn-accent-emphasis);border-color:var(--hub-btn-accent)}:host(.hub-btn-outline):hover:not([disabled]):not(.hub-btn-disabled){background:var(--hub-btn-accent-subtle)}:host(.hub-btn-soft){background:var(--hub-btn-accent-subtle);color:var(--hub-btn-accent-emphasis);border-color:transparent}:host(.hub-btn-soft):hover:not([disabled]):not(.hub-btn-disabled){background:color-mix(in oklch,var(--hub-btn-accent-subtle) 80%,var(--hub-btn-accent))}:host(.hub-btn-ghost){background:transparent;color:var(--hub-btn-accent-emphasis);border-color:transparent}:host(.hub-btn-ghost):hover:not([disabled]):not(.hub-btn-disabled){background:var(--hub-btn-accent-subtle)}:host(.hub-btn-link){background:transparent;color:var(--hub-btn-accent-emphasis);border-color:transparent;text-decoration:underline;padding-inline:.125rem}:host(.hub-btn-link):hover:not([disabled]):not(.hub-btn-disabled){color:var(--hub-btn-accent)}\n"] }]
+            args: [{ selector: 'hub-button, [hubButton]', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'hub-btn' }, template: "@if (loading()) {\n\t<span class=\"hub-btn__spinner\" aria-hidden=\"true\"></span>\n}\n<ng-content></ng-content>\n", styles: [":where(:host){--hub-button-padding-x: var(--hub-ref-space-3, 1rem);--hub-button-padding-y: var(--hub-ref-space-2, .5rem);--hub-button-border-radius: var(--hub-sys-radius-md, .375rem);--hub-button-border-width: 1.5px;--hub-button-font-size: var(--hub-ref-font-size-base, 1rem);--hub-button-font-weight: var(--hub-ref-font-weight-medium, 500);--hub-button-gap: var(--hub-ref-space-2, .5rem);--hub-button-transition: var(--hub-sys-transition-fast, all .15s ease-in-out);--hub-button-spinner-size: .875em;--hub-button-spinner-duration: .7s;--hub-button-spinner: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' d='M12 3a9 9 0 1 0 9 9'/%3E%3C/svg%3E\");--hub-button-disabled-opacity: var(--hub-sys-opacity-disabled, .65);--hub-btn-accent: var(--hub-sys-color-primary, #0d6efd);--hub-btn-accent-emphasis: color-mix(in oklch, var(--hub-btn-accent) 80%, var(--hub-sys-color-ink, #212529));--hub-btn-accent-subtle: color-mix(in oklch, var(--hub-btn-accent) 12%, var(--hub-sys-surface-page, #ffffff));--hub-btn-accent-on: oklch(from var(--hub-btn-accent) clamp(0, (.62 - l) * 1000, 1) 0 h);--hub-btn-hover-bg: var(--hub-btn-accent-subtle);--hub-btn-hover-border: transparent;--hub-btn-hover-color: var(--hub-btn-accent-emphasis);--hub-btn-active-bg: color-mix(in oklch, var(--hub-btn-accent) 70%, var(--hub-sys-color-ink, #212529));--hub-btn-active-border: transparent;--hub-btn-active-color: var(--hub-btn-accent-on)}:host{display:inline-flex;align-items:center;justify-content:center;gap:var(--hub-button-gap);padding:var(--hub-button-padding-y) var(--hub-button-padding-x);border-radius:var(--hub-button-border-radius);border:var(--hub-button-border-width) solid transparent;font-size:var(--hub-button-font-size);font-weight:var(--hub-button-font-weight);cursor:pointer;text-decoration:none;transition:var(--hub-button-transition);-webkit-user-select:none;user-select:none;white-space:nowrap}:host(.hub-btn-disabled),:host([disabled]){opacity:var(--hub-button-disabled-opacity);pointer-events:none}:host(.hub-btn-loading){pointer-events:none}:host(.hub-btn-sm){--hub-button-padding-x: var(--hub-ref-space-2, .5rem);--hub-button-padding-y: var(--hub-ref-space-1, .25rem);--hub-button-font-size: var(--hub-ref-font-size-sm, .875rem);--hub-button-border-radius: var(--hub-sys-radius-sm, .25rem)}:host(.hub-btn-lg){--hub-button-padding-x: var(--hub-ref-space-4, 1.5rem);--hub-button-padding-y: var(--hub-ref-space-2, .5rem);--hub-button-font-size: var(--hub-ref-font-size-lg, 1.25rem)}:host(.hub-btn-xl){--hub-button-padding-x: var(--hub-ref-space-4, 1.5rem);--hub-button-padding-y: var(--hub-ref-space-3, 1rem);--hub-button-font-size: var(--hub-ref-font-size-lg, 1.25rem)}.hub-btn__spinner{display:inline-block;width:var(--hub-button-spinner-size);height:var(--hub-button-spinner-size);background-color:currentColor;-webkit-mask:var(--hub-button-spinner) center/contain no-repeat;mask:var(--hub-button-spinner) center/contain no-repeat;animation:hub-btn-spin var(--hub-button-spinner-duration, .7s) linear infinite}@media(prefers-reduced-motion:reduce){.hub-btn__spinner{animation-duration:1.6s}}@keyframes hub-btn-spin{to{transform:rotate(360deg)}}:host(.hub-btn-primary){--hub-btn-accent: var(--hub-sys-color-primary, var(--hub-sys-color-primary))}:host(.hub-btn-secondary){--hub-btn-accent: var(--hub-sys-color-secondary, var(--hub-sys-color-primary))}:host(.hub-btn-success){--hub-btn-accent: var(--hub-sys-color-success, var(--hub-sys-color-primary))}:host(.hub-btn-danger){--hub-btn-accent: var(--hub-sys-color-danger, var(--hub-sys-color-primary))}:host(.hub-btn-warning){--hub-btn-accent: var(--hub-sys-color-warning, var(--hub-sys-color-primary))}:host(.hub-btn-info){--hub-btn-accent: var(--hub-sys-color-info, var(--hub-sys-color-primary))}:host(.hub-btn-neutral){--hub-btn-accent: var(--hub-sys-color-neutral, var(--hub-sys-color-primary))}:host(.hub-btn-light){--hub-btn-accent: var(--hub-sys-color-light, var(--hub-sys-color-primary))}:host(.hub-btn-dark){--hub-btn-accent: var(--hub-sys-color-dark, var(--hub-sys-color-primary))}:host(.hub-btn-solid){background:var(--hub-btn-accent);color:var(--hub-btn-accent-on);border-color:var(--hub-btn-accent);--hub-btn-hover-bg: var(--hub-btn-accent-emphasis);--hub-btn-hover-border: var(--hub-btn-accent-emphasis);--hub-btn-hover-color: var(--hub-btn-accent-on);--hub-btn-active-border: var(--hub-btn-active-bg);--hub-btn-active-color: var(--hub-btn-accent-on)}:host(.hub-btn-solid):hover:not([disabled]):not(.hub-btn-disabled){background:var(--hub-btn-hover-bg);border-color:var(--hub-btn-hover-border);color:var(--hub-btn-hover-color)}:host(.hub-btn-solid):active:not([disabled]):not(.hub-btn-disabled){background:var(--hub-btn-active-bg);border-color:var(--hub-btn-active-border);color:var(--hub-btn-active-color)}:host(.hub-btn-outline){background:transparent;color:var(--hub-btn-accent-emphasis);border-color:var(--hub-btn-accent);--hub-btn-hover-border: var(--hub-btn-accent);--hub-btn-active-bg: color-mix(in oklch, var(--hub-btn-accent-subtle) 70%, var(--hub-btn-accent));--hub-btn-active-border: var(--hub-btn-accent);--hub-btn-active-color: var(--hub-btn-accent-emphasis)}:host(.hub-btn-outline):hover:not([disabled]):not(.hub-btn-disabled){background:var(--hub-btn-hover-bg);border-color:var(--hub-btn-hover-border);color:var(--hub-btn-hover-color)}:host(.hub-btn-outline):active:not([disabled]):not(.hub-btn-disabled){background:var(--hub-btn-active-bg);border-color:var(--hub-btn-active-border);color:var(--hub-btn-active-color)}:host(.hub-btn-soft){background:var(--hub-btn-accent-subtle);color:var(--hub-btn-accent-emphasis);border-color:transparent;--hub-btn-hover-bg: color-mix(in oklch, var(--hub-btn-accent-subtle) 80%, var(--hub-btn-accent));--hub-btn-active-bg: color-mix(in oklch, var(--hub-btn-accent-subtle) 60%, var(--hub-btn-accent));--hub-btn-active-color: var(--hub-btn-accent-emphasis)}:host(.hub-btn-soft):hover:not([disabled]):not(.hub-btn-disabled){background:var(--hub-btn-hover-bg);border-color:var(--hub-btn-hover-border);color:var(--hub-btn-hover-color)}:host(.hub-btn-soft):active:not([disabled]):not(.hub-btn-disabled){background:var(--hub-btn-active-bg);border-color:var(--hub-btn-active-border);color:var(--hub-btn-active-color)}:host(.hub-btn-ghost){background:transparent;color:var(--hub-btn-accent-emphasis);border-color:transparent;--hub-btn-active-bg: color-mix(in oklch, var(--hub-btn-accent-subtle) 80%, var(--hub-btn-accent));--hub-btn-active-color: var(--hub-btn-accent-emphasis)}:host(.hub-btn-ghost):hover:not([disabled]):not(.hub-btn-disabled){background:var(--hub-btn-hover-bg);border-color:var(--hub-btn-hover-border);color:var(--hub-btn-hover-color)}:host(.hub-btn-ghost):active:not([disabled]):not(.hub-btn-disabled){background:var(--hub-btn-active-bg);border-color:var(--hub-btn-active-border);color:var(--hub-btn-active-color)}:host(.hub-btn-link){background:transparent;color:var(--hub-btn-accent-emphasis);border-color:transparent;text-decoration:underline;padding-inline:.125rem;--hub-btn-hover-bg: transparent;--hub-btn-hover-color: var(--hub-btn-accent);--hub-btn-active-bg: transparent;--hub-btn-active-color: color-mix(in oklch, var(--hub-btn-accent) 70%, var(--hub-sys-color-ink, #212529))}:host(.hub-btn-link):hover:not([disabled]):not(.hub-btn-disabled){background:var(--hub-btn-hover-bg);border-color:var(--hub-btn-hover-border);color:var(--hub-btn-hover-color)}:host(.hub-btn-link):active:not([disabled]):not(.hub-btn-disabled){background:var(--hub-btn-active-bg);border-color:var(--hub-btn-active-border);color:var(--hub-btn-active-color)}\n"] }]
         }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], _hostClass: [{
                 type: HostBinding,
                 args: ['class']
             }], _disabledAttr: [{
                 type: HostBinding,
                 args: ['attr.disabled']
+            }], _ariaBusy: [{
+                type: HostBinding,
+                args: ['attr.aria-busy']
+            }], _ariaDisabled: [{
+                type: HostBinding,
+                args: ['attr.aria-disabled']
+            }], _role: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], _tabindex: [{
+                type: HostBinding,
+                args: ['attr.tabindex']
+            }], _onKeydown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
             }] } });
 
 /**

package/fesm2022/ng-hub-ui-buttons.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ng-hub-ui-buttons.mjs","sources":["../../../projects/buttons/src/lib/tokens/dropdown.token.ts","../../../projects/buttons/src/lib/components/btn/button.component.ts","../../../projects/buttons/src/lib/components/btn/button.component.html","../../../projects/buttons/src/lib/components/fab/fab.component.ts","../../../projects/buttons/src/lib/components/fab/fab.component.html","../../../projects/buttons/src/lib/components/speed-dial/speed-dial.component.ts","../../../projects/buttons/src/lib/components/speed-dial/speed-dial.component.html","../../../projects/buttons/src/lib/components/speed-dial/speed-dial-item/speed-dial-item.component.ts","../../../projects/buttons/src/lib/components/speed-dial/speed-dial-item/speed-dial-item.component.html","../../../projects/buttons/src/lib/components/dropdown-panel/dropdown-panel.component.ts","../../../projects/buttons/src/lib/components/dropdown-item/dropdown-item.component.ts","../../../projects/buttons/src/lib/components/dropdown-item/dropdown-item.component.html","../../../projects/buttons/src/lib/components/dropdown-divider/dropdown-divider.component.ts","../../../projects/buttons/src/lib/components/dropdown-header/dropdown-header.component.ts","../../../projects/buttons/src/lib/directives/dropdown.directive.ts","../../../projects/buttons/src/public-api.ts","../../../projects/buttons/src/ng-hub-ui-buttons.ts"],"sourcesContent":["import { InjectionToken, Signal } from '@angular/core';\n\n/**\n * Context shared between HubDropdownDirective and its panel/item descendants.\n * Injected by the directive; consumed by HubDropdownPanelComponent and\n * HubDropdownItemComponent to implement closeOnSelect without prop drilling.\n */\nexport interface DropdownContext {\n\t/** Whether clicking an item should close the dropdown. */\n\treadonly closeOnSelect: Signal<boolean>;\n\t/** Imperatively close the dropdown. */\n\tclose(): void;\n}\n\n/** Injection token for DropdownContext. */\nexport const DROPDOWN_CONTEXT = new InjectionToken<DropdownContext>('HubDropdownContext');\n","import { ChangeDetectionStrategy, Component, HostBinding, input } from '@angular/core';\nimport { HubBtnSize, HubBtnVariant, HubSemanticColor } from '../../models/button.types';\n\n/**\n * Styled button. Applies `hub-btn` CSS classes computed from signal inputs and\n * renders an optional loading spinner around the projected content.\n *\n * Usable in two interchangeable forms from the same class:\n * - As an element: `<hub-button variant=\"solid\" color=\"primary\">Save</hub-button>`.\n * - As an attribute on any host: `<button hubButton>Save</button>` / `<a hubButton href=\"…\">Link</a>`.\n *\n * Prefer the attribute form on a native `<button>` / `<a>` when you need real button\n * semantics (focus, keyboard activation, form submission); the `<hub-button>` element is\n * a styling host without native button behaviour.\n *\n * **Icons:** project whatever you want as content — the button is icon-library\n * agnostic. The icon's position follows the markup order, and the label/icon gap\n * is the `--hub-button-gap` token:\n *\n * ```html\n * <button hubButton><hub-icon name=\"floppy-disk\" /> Save</button>\n * <button hubButton>Next <hub-icon name=\"arrow-right\" /></button>\n * <button hubButton aria-label=\"Settings\"><hub-icon name=\"gear\" /></button>\n * ```\n */\n@Component({\n\tselector: 'hub-button, [hubButton]',\n\tstandalone: true,\n\ttemplateUrl: './button.component.html',\n\tstyleUrl: './button.component.scss',\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n\thost: { class: 'hub-btn' }\n})\nexport class HubButtonComponent {\n\t/** Visual style of the button. */\n\tvariant = input<HubBtnVariant>('solid');\n\n\t/** Semantic color token. */\n\tcolor = input<HubSemanticColor>('primary');\n\n\t/** Size token. */\n\tsize = input<HubBtnSize>('md');\n\n\t/** When true, shows a spinner and blocks pointer events. */\n\tloading = input(false);\n\n\t/** Mirrors the native disabled attribute on the host element. */\n\tdisabled = input(false);\n\n\t/** Computed CSS classes applied to the host element via HostBinding. */\n\t@HostBinding('class')\n\tprotected get _hostClass(): string {\n\t\treturn [\n\t\t\t`hub-btn-${this.variant()}`,\n\t\t\t`hub-btn-${this.color()}`,\n\t\t\t`hub-btn-${this.size()}`,\n\t\t\tthis.loading() ? 'hub-btn-loading' : '',\n\t\t\tthis.disabled() ? 'hub-btn-disabled' : ''\n\t\t]\n\t\t\t.filter(Boolean)\n\t\t\t.join(' ');\n\t}\n\n\t/** Reflects the disabled state as a native HTML attribute. */\n\t@HostBinding('attr.disabled')\n\tprotected get _disabledAttr(): true | null {\n\t\treturn this.disabled() ? true : null;\n\t}\n}\n","@if (loading()) {\n\t<span class=\"hub-btn__spinner\" aria-hidden=\"true\"></span>\n}\n<ng-content></ng-content>\n","import { ChangeDetectionStrategy, Component, DestroyRef, HostBinding, OnInit, ViewEncapsulation, inject, input, output, signal } from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { fromEvent } from 'rxjs';\nimport { debounceTime } from 'rxjs/operators';\nimport { HubFabPosition, HubFabSize, HubSemanticColor } from '../../models/button.types';\n\n/**\n * Floating Action Button component. Renders fixed in the viewport at the given position.\n * Supports circular and extended (pill with label) variants.\n * When collapseOnScroll is true, an extended FAB collapses to icon-only after 50px scroll.\n * Uses inset-inline-* / inset-block-* CSS logical properties for RTL support.\n */\n@Component({\n\tselector: 'hub-fab',\n\tstandalone: true,\n\ttemplateUrl: './fab.component.html',\n\tstyleUrl: './fab.component.scss',\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n\thost: { class: 'hub-fab' },\n\tencapsulation: ViewEncapsulation.None\n})\nexport class HubFabComponent implements OnInit {\n\tcolor = input<HubSemanticColor>('primary');\n\tsize = input<HubFabSize>('standard');\n\textended = input(false);\n\t/** Fixed viewport position. 9-slot grid including center. */\n\tposition = input<HubFabPosition>('bottom-end');\n\t/** When true, collapses an extended FAB to icon-only on page scroll. */\n\tcollapseOnScroll = input(false);\n\tdisabled = input(false);\n\tfabClick = output<void>();\n\n\t/** Collapse state driven by scroll — only active when extended + collapseOnScroll. */\n\tprotected readonly _collapsed = signal(false);\n\n\tprivate readonly _destroyRef = inject(DestroyRef);\n\n\t@HostBinding('class')\n\tprotected get _hostClass(): string {\n\t\treturn [\n\t\t\t`hub-fab-${this.color()}`,\n\t\t\t`hub-fab-${this.size()}`,\n\t\t\t`hub-fab-${this.position()}`,\n\t\t\tthis.extended() && !this._collapsed() ? 'hub-fab-extended' : '',\n\t\t\tthis.disabled() ? 'hub-fab-disabled' : ''\n\t\t]\n\t\t\t.filter(Boolean)\n\t\t\t.join(' ');\n\t}\n\n\tngOnInit(): void {\n\t\tif (!this.collapseOnScroll()) return;\n\n\t\tfromEvent(window, 'scroll', { passive: true })\n\t\t\t.pipe(debounceTime(50), takeUntilDestroyed(this._destroyRef))\n\t\t\t.subscribe(() => {\n\t\t\t\tthis._collapsed.set(window.scrollY > 50);\n\t\t\t});\n\t}\n}\n","<ng-content select=\"[slot=icon]\"></ng-content>\n\n@if (extended() && !_collapsed()) {\n\t<span class=\"hub-fab__label\">\n\t\t<ng-content select=\"[slot=label]\"></ng-content>\n\t</span>\n} @else if (!extended()) {\n\t<ng-content></ng-content>\n}\n","import { DOCUMENT, isPlatformBrowser } from '@angular/common';\nimport {\n\tChangeDetectionStrategy,\n\tComponent,\n\tDestroyRef,\n\tHostBinding,\n\tPLATFORM_ID,\n\tinject,\n\tinput,\n\tmodel,\n\toutput\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { fromEvent } from 'rxjs';\nimport { filter } from 'rxjs/operators';\nimport { HubFabPosition, HubFabSize, HubSemanticColor } from '../../models/button.types';\n\n/**\n * FAB that expands a stack of HubSpeedDialItemComponent children on click or hover.\n * Supports 4 expansion directions and all 9 FAB viewport positions.\n * Closes automatically on Escape key press.\n */\n@Component({\n\tselector: 'hub-speed-dial',\n\tstandalone: true,\n\ttemplateUrl: './speed-dial.component.html',\n\tstyleUrl: './speed-dial.component.scss',\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n\thost: { class: 'hub-speed-dial' }\n})\nexport class HubSpeedDialComponent {\n\tcolor = input<HubSemanticColor>('primary');\n\tsize = input<HubFabSize>('standard');\n\tposition = input<HubFabPosition>('bottom-end');\n\tdirection = input<'up' | 'down' | 'left' | 'right'>('up');\n\ttrigger = input<'click' | 'hover'>('click');\n\tisOpen = model(false);\n\topened = output<void>();\n\tclosed = output<void>();\n\n\tprivate readonly _destroyRef = inject(DestroyRef);\n\n\t@HostBinding('class')\n\tprotected get _hostClass(): string {\n\t\treturn [\n\t\t\t`hub-speed-dial-${this.color()}`,\n\t\t\t`hub-speed-dial-${this.position()}`,\n\t\t\t`hub-speed-dial-${this.direction()}`,\n\t\t\tthis.isOpen() ? 'hub-speed-dial-open' : ''\n\t\t]\n\t\t\t.filter(Boolean)\n\t\t\t.join(' ');\n\t}\n\n\tconstructor() {\n\t\t// Escape-to-close relies on DOM events; inert on the server (SSR/prerender).\n\t\tif (isPlatformBrowser(inject(PLATFORM_ID))) {\n\t\t\tfromEvent<KeyboardEvent>(inject(DOCUMENT), 'keydown')\n\t\t\t\t.pipe(\n\t\t\t\t\tfilter((e) => e.key === 'Escape' && this.isOpen()),\n\t\t\t\t\ttakeUntilDestroyed(this._destroyRef)\n\t\t\t\t)\n\t\t\t\t.subscribe(() => this.close());\n\t\t}\n\t}\n\n\t/** Toggle the speed dial open/closed. */\n\ttoggle(): void {\n\t\tthis.isOpen() ? this.close() : this.open();\n\t}\n\n\t/** Open the speed dial and emit the opened event. */\n\topen(): void {\n\t\tthis.isOpen.set(true);\n\t\tthis.opened.emit();\n\t}\n\n\t/** Close the speed dial and emit the closed event. */\n\tclose(): void {\n\t\tthis.isOpen.set(false);\n\t\tthis.closed.emit();\n\t}\n}\n","<button\n\tclass=\"hub-fab\"\n\t[class]=\"'hub-fab-' + color() + ' hub-fab-' + size()\"\n\t(click)=\"trigger() === 'click' && toggle()\"\n\t(mouseenter)=\"trigger() === 'hover' && open()\"\n\t(mouseleave)=\"trigger() === 'hover' && close()\"\n\ttype=\"button\"\n\t[attr.aria-expanded]=\"isOpen()\"\n\taria-haspopup=\"true\">\n\t<ng-content select=\"[hubTrigger]\"></ng-content>\n</button>\n\n@if (isOpen()) {\n\t<div class=\"hub-speed-dial__actions\" [attr.data-direction]=\"direction()\">\n\t\t<ng-content></ng-content>\n\t</div>\n}\n","import { ChangeDetectionStrategy, Component, HostBinding, input, output } from '@angular/core';\nimport { HubSemanticColor } from '../../../models/button.types';\n\n/**\n * Secondary action item rendered inside HubSpeedDialComponent.\n * Emits itemClick when activated. Supports an optional label tooltip.\n */\n@Component({\n\tselector: 'hub-speed-dial-item',\n\tstandalone: true,\n\ttemplateUrl: './speed-dial-item.component.html',\n\tstyleUrl: './speed-dial-item.component.scss',\n\tchangeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class HubSpeedDialItemComponent {\n\t/** Icon character or ligature string displayed in the action button. */\n\ticon = input.required<string>();\n\t/** Tooltip label shown next to the action button. */\n\tlabel = input('');\n\tcolor = input<HubSemanticColor | 'default'>('default');\n\tdisabled = input(false);\n\titemClick = output<void>();\n}\n","@if (label()) {\n\t<span class=\"hub-speed-dial-item__label\">{{ label() }}</span>\n}\n<button\n\tclass=\"hub-speed-dial-item__btn\"\n\t[class]=\"'hub-speed-dial-item__btn--' + color()\"\n\t[disabled]=\"disabled() || null\"\n\t(click)=\"itemClick.emit()\"\n\ttype=\"button\"\n\t[attr.aria-label]=\"label() || icon()\">\n\t<i [class]=\"icon()\" aria-hidden=\"true\"></i>\n</button>\n","import { ChangeDetectionStrategy, Component, HostBinding, input } from '@angular/core';\nimport { HubSemanticColor } from '../../models/button.types';\n\n/**\n * Styled container for dropdown content.\n * Renders a shadowed panel with an optional semantic color top-border accent.\n * Place hub-dropdown-item, hub-dropdown-divider, and hub-dropdown-header children inside.\n */\n@Component({\n\tselector: 'hub-dropdown-panel',\n\tstandalone: true,\n\ttemplate: `<ng-content></ng-content>`,\n\tstyleUrl: './dropdown-panel.component.scss',\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n\thost: { class: 'hub-dropdown-panel' }\n})\nexport class HubDropdownPanelComponent {\n\t/** Adds a semantic color accent to the panel top border. */\n\tcolor = input<HubSemanticColor | 'default'>('default');\n\n\t@HostBinding('class')\n\tprotected get _hostClass(): string {\n\t\treturn this.color() !== 'default' ? `hub-dropdown-panel-${this.color()}` : '';\n\t}\n}\n","import { ChangeDetectionStrategy, Component, HostBinding, input, output } from '@angular/core';\nimport { HubSemanticColor } from '../../models/button.types';\n\n/**\n * Menu item for use inside HubDropdownPanelComponent.\n * Emits itemClick when activated. Supports an optional icon, selected state and semantic color.\n */\n@Component({\n\tselector: 'hub-dropdown-item',\n\tstandalone: true,\n\ttemplateUrl: './dropdown-item.component.html',\n\tstyleUrl: './dropdown-item.component.scss',\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n\thost: { class: 'hub-dropdown-item' }\n})\nexport class HubDropdownItemComponent {\n\tcolor = input<HubSemanticColor | 'default'>('default');\n\t/** Optional icon character or ligature displayed before the label. */\n\ticon = input<string>();\n\tdisabled = input(false);\n\t/** Shows a checkmark indicator when selected. */\n\tselected = input(false);\n\titemClick = output<void>();\n\n\t@HostBinding('class')\n\tprotected get _hostClass(): string {\n\t\treturn [\n\t\t\tthis.color() !== 'default' ? `hub-dropdown-item-${this.color()}` : '',\n\t\t\tthis.disabled() ? 'hub-dropdown-item-disabled' : '',\n\t\t\tthis.selected() ? 'hub-dropdown-item-selected' : ''\n\t\t]\n\t\t\t.filter(Boolean)\n\t\t\t.join(' ');\n\t}\n\n\tprotected _handleClick(): void {\n\t\tif (this.disabled()) return;\n\t\tthis.itemClick.emit();\n\t}\n}\n","<button\n\tclass=\"hub-dropdown-item__inner\"\n\ttype=\"button\"\n\t[disabled]=\"disabled() || null\"\n\t(click)=\"_handleClick()\">\n\t@if (icon()) {\n\t\t<i [class]=\"icon()\" aria-hidden=\"true\"></i>\n\t}\n\t<span class=\"hub-dropdown-item__label\"><ng-content></ng-content></span>\n\t@if (selected()) {\n\t\t<span class=\"hub-dropdown-item__check\" aria-hidden=\"true\">✓</span>\n\t}\n</button>\n","import { ChangeDetectionStrategy, Component } from '@angular/core';\n\n/** Horizontal separator for grouping items inside HubDropdownPanelComponent. */\n@Component({\n\tselector: 'hub-dropdown-divider',\n\tstandalone: true,\n\ttemplate: '',\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n\thost: {\n\t\tclass: 'hub-dropdown-divider',\n\t\trole: 'separator',\n\t\t'aria-hidden': 'true'\n\t},\n\tstyles: [\n\t\t`\n\t\t\t:host {\n\t\t\t\tdisplay: block;\n\t\t\t\theight: 1px;\n\t\t\t\tbackground: var(--hub-dropdown-divider-color, var(--hub-sys-color-border-subtle, #dee2e6));\n\t\t\t\tmargin: var(--hub-ref-space-1, 0.25rem) 0;\n\t\t\t}\n\t\t`\n\t]\n})\nexport class HubDropdownDividerComponent {}\n","import { ChangeDetectionStrategy, Component } from '@angular/core';\n\n/** Group label for organizing items inside HubDropdownPanelComponent. */\n@Component({\n\tselector: 'hub-dropdown-header',\n\tstandalone: true,\n\ttemplate: `<ng-content></ng-content>`,\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n\thost: { class: 'hub-dropdown-header' },\n\tstyles: [\n\t\t`\n\t\t\t:host {\n\t\t\t\tdisplay: block;\n\t\t\t\tpadding: 0.375rem var(--hub-dropdown-header-padding-x, var(--hub-ref-space-3, 1rem)) 0.1875rem;\n\t\t\t\tfont-size: var(--hub-dropdown-header-font-size, var(--hub-ref-font-size-xs, 0.75rem));\n\t\t\t\tfont-weight: var(--hub-ref-font-weight-bold, 700);\n\t\t\t\tcolor: var(--hub-dropdown-header-color, var(--hub-sys-color-text-subtle, #6c757d));\n\t\t\t\ttext-transform: uppercase;\n\t\t\t\tletter-spacing: 0.06em;\n\t\t\t}\n\t\t`\n\t]\n})\nexport class HubDropdownHeaderComponent {}\n","import { DOCUMENT, isPlatformBrowser } from '@angular/common';\nimport {\n\tDestroyRef,\n\tDirective,\n\tElementRef,\n\tPLATFORM_ID,\n\tTemplateRef,\n\tViewContainerRef,\n\tinject,\n\tinput,\n\tmodel,\n\toutput,\n\tsignal\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { fromEvent } from 'rxjs';\nimport { filter, take } from 'rxjs/operators';\nimport { OverlayService } from 'ng-hub-ui-utils';\nimport type { OverlayRef, ConnectionPosition } from 'ng-hub-ui-utils';\nimport { HubDropdownPlacement } from '../models/button.types';\n\n/**\n * Turns any host element into a dropdown trigger.\n * Renders an ng-template in a body-level overlay managed by OverlayService (no CDK).\n * When closeOnSelect is true, any click inside the panel closes the overlay automatically.\n */\n@Directive({\n\tselector: '[hubDropdown]',\n\tstandalone: true,\n\texportAs: 'hubDropdown',\n\thost: {\n\t\t'(click)': '_onHostClick()',\n\t\t'(mouseenter)': '_onHostEnter()',\n\t\t'(mouseleave)': '_onHostLeave()'\n\t}\n})\nexport class HubDropdownDirective {\n\t/** The ng-template to render inside the overlay panel. */\n\ttpl = input.required<TemplateRef<any>>({ alias: 'hubDropdown' });\n\tplacement = input<HubDropdownPlacement>('bottom-start');\n\ttrigger = input<'click' | 'hover'>('click');\n\t/** When true, any click inside the panel content closes the dropdown. */\n\tcloseOnSelect = input(true);\n\tdisabled = input(false);\n\t/** Vertical offset in pixels between the trigger and the panel. */\n\toffsetY = input(4);\n\tpanelClass = input('');\n\tisOpen = model(false);\n\topened = output<void>();\n\tclosed = output<void>();\n\n\tprivate _overlayRef: OverlayRef | null = null;\n\n\tprivate readonly _el = inject(ElementRef<HTMLElement>);\n\tprivate readonly _vcr = inject(ViewContainerRef);\n\tprivate readonly _overlay = inject(OverlayService);\n\tprivate readonly _destroyRef = inject(DestroyRef);\n\tprivate readonly _document = inject(DOCUMENT);\n\n\tconstructor() {\n\t\t// Escape-to-close relies on DOM events; inert on the server (SSR/prerender).\n\t\tif (isPlatformBrowser(inject(PLATFORM_ID))) {\n\t\t\tfromEvent<KeyboardEvent>(this._document, 'keydown')\n\t\t\t\t.pipe(\n\t\t\t\t\tfilter((e) => e.key === 'Escape' && this.isOpen()),\n\t\t\t\t\ttakeUntilDestroyed(this._destroyRef)\n\t\t\t\t)\n\t\t\t\t.subscribe(() => this.close());\n\t\t}\n\t}\n\n\t/** Open the dropdown and mount the overlay. */\n\topen(): void {\n\t\tif (this.disabled() || this.isOpen()) return;\n\n\t\tconst positionStrategy = this._overlay.position().flexibleConnectedTo(this._el).withPositions(this._buildPositions());\n\n\t\tconst panelClasses = ['hub-dropdown-overlay'];\n\t\tif (this.panelClass()) panelClasses.push(this.panelClass());\n\n\t\tthis._overlayRef = this._overlay.create({ positionStrategy, panelClass: panelClasses });\n\n\t\tconst panelEl = this._overlayRef.attach(this.tpl(), this._vcr);\n\n\t\t// Close on click-outside via backdrop\n\t\tthis._overlayRef.onBackdropClick(() => this.close());\n\n\t\t// Close on click-inside when closeOnSelect is true\n\t\tif (this.closeOnSelect() && panelEl) {\n\t\t\tfromEvent<MouseEvent>(panelEl, 'click')\n\t\t\t\t.pipe(take(1), takeUntilDestroyed(this._destroyRef))\n\t\t\t\t.subscribe(() => this.close());\n\t\t}\n\n\t\tthis.isOpen.set(true);\n\t\tthis.opened.emit();\n\n\t\t// Close on scroll so the panel stays aligned with the trigger\n\t\tfromEvent(this._document, 'scroll', { passive: true, capture: true })\n\t\t\t.pipe(take(1), takeUntilDestroyed(this._destroyRef))\n\t\t\t.subscribe(() => this.close());\n\n\t\t// Click-outside detection (document-level)\n\t\tfromEvent<MouseEvent>(this._document, 'click')\n\t\t\t.pipe(\n\t\t\t\tfilter((e) => !this._el.nativeElement.contains(e.target as Node) && !!this._overlayRef?.hasAttached()),\n\t\t\t\ttake(1),\n\t\t\t\ttakeUntilDestroyed(this._destroyRef)\n\t\t\t)\n\t\t\t.subscribe(() => this.close());\n\t}\n\n\t/** Close the dropdown and destroy the overlay. */\n\tclose(): void {\n\t\tif (!this.isOpen()) return;\n\t\tthis._overlayRef?.detach();\n\t\tthis._overlayRef?.dispose();\n\t\tthis._overlayRef = null;\n\t\tthis.isOpen.set(false);\n\t\tthis.closed.emit();\n\t}\n\n\t/** Toggle between open and closed. */\n\ttoggle(): void {\n\t\tthis.isOpen() ? this.close() : this.open();\n\t}\n\n\tprotected _onHostClick(): void {\n\t\tif (this.trigger() === 'click') this.toggle();\n\t}\n\n\tprotected _onHostEnter(): void {\n\t\tif (this.trigger() === 'hover') this.open();\n\t}\n\n\tprotected _onHostLeave(): void {\n\t\tif (this.trigger() === 'hover') this.close();\n\t}\n\n\t/**\n\t * Translates HubDropdownPlacement tokens to ConnectionPosition arrays.\n\t * The OverlayPosition tries each entry in order, using the first that fits.\n\t */\n\tprivate _buildPositions(): ConnectionPosition[] {\n\t\tconst o = this.offsetY();\n\t\tconst map: Record<HubDropdownPlacement, ConnectionPosition[]> = {\n\t\t\t'bottom-start': [{ originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: o }],\n\t\t\tbottom: [{ originX: 'center', originY: 'bottom', overlayX: 'center', overlayY: 'top', offsetY: o }],\n\t\t\t'bottom-end': [{ originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top', offsetY: o }],\n\t\t\t'top-start': [{ originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -o }],\n\t\t\ttop: [{ originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom', offsetY: -o }],\n\t\t\t'top-end': [{ originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom', offsetY: -o }],\n\t\t\tstart: [{ originX: 'start', originY: 'center', overlayX: 'end', overlayY: 'center', offsetX: -o }],\n\t\t\tend: [{ originX: 'end', originY: 'center', overlayX: 'start', overlayY: 'center', offsetX: o }]\n\t\t};\n\t\treturn map[this.placement()];\n\t}\n}\n","/*\n * Public API Surface of ng-hub-ui-buttons\n */\n\n// Types\nexport * from './lib/models/button.types';\n\n// Tokens\nexport * from './lib/tokens/dropdown.token';\n\n// Components\nexport * from './lib/components/btn/button.component';\n/**\n * @deprecated Renamed to `HubButtonComponent`. The component now also matches the\n * `[hubButton]` attribute selector, so it replaces the former `HubBtnDirective`.\n */\nexport { HubButtonComponent as HubBtnComponent } from './lib/components/btn/button.component';\n/**\n * @deprecated Replaced by `HubButtonComponent`, which now matches `[hubButton]` itself\n * (and renders the loading spinner in the attribute form too).\n */\nexport { HubButtonComponent as HubBtnDirective } from './lib/components/btn/button.component';\nexport * from './lib/components/fab/fab.component';\nexport * from './lib/components/speed-dial/speed-dial.component';\nexport * from './lib/components/speed-dial/speed-dial-item/speed-dial-item.component';\nexport * from './lib/components/dropdown-panel/dropdown-panel.component';\nexport * from './lib/components/dropdown-item/dropdown-item.component';\nexport * from './lib/components/dropdown-divider/dropdown-divider.component';\nexport * from './lib/components/dropdown-header/dropdown-header.component';\n\n// Directives\nexport * from './lib/directives/dropdown.directive';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ng-hub-ui-buttons.mjs","sources":["../../../projects/buttons/src/lib/tokens/dropdown.token.ts","../../../projects/buttons/src/lib/components/btn/button.component.ts","../../../projects/buttons/src/lib/components/btn/button.component.html","../../../projects/buttons/src/lib/components/fab/fab.component.ts","../../../projects/buttons/src/lib/components/fab/fab.component.html","../../../projects/buttons/src/lib/components/speed-dial/speed-dial.component.ts","../../../projects/buttons/src/lib/components/speed-dial/speed-dial.component.html","../../../projects/buttons/src/lib/components/speed-dial/speed-dial-item/speed-dial-item.component.ts","../../../projects/buttons/src/lib/components/speed-dial/speed-dial-item/speed-dial-item.component.html","../../../projects/buttons/src/lib/components/dropdown-panel/dropdown-panel.component.ts","../../../projects/buttons/src/lib/components/dropdown-item/dropdown-item.component.ts","../../../projects/buttons/src/lib/components/dropdown-item/dropdown-item.component.html","../../../projects/buttons/src/lib/components/dropdown-divider/dropdown-divider.component.ts","../../../projects/buttons/src/lib/components/dropdown-header/dropdown-header.component.ts","../../../projects/buttons/src/lib/directives/dropdown.directive.ts","../../../projects/buttons/src/public-api.ts","../../../projects/buttons/src/ng-hub-ui-buttons.ts"],"sourcesContent":["import { InjectionToken, Signal } from '@angular/core';\n\n/**\n * Context shared between HubDropdownDirective and its panel/item descendants.\n * Injected by the directive; consumed by HubDropdownPanelComponent and\n * HubDropdownItemComponent to implement closeOnSelect without prop drilling.\n */\nexport interface DropdownContext {\n\t/** Whether clicking an item should close the dropdown. */\n\treadonly closeOnSelect: Signal<boolean>;\n\t/** Imperatively close the dropdown. */\n\tclose(): void;\n}\n\n/** Injection token for DropdownContext. */\nexport const DROPDOWN_CONTEXT = new InjectionToken<DropdownContext>('HubDropdownContext');\n","import { ChangeDetectionStrategy, Component, ElementRef, HostBinding, HostListener, inject, input } from '@angular/core';\nimport { HubBtnSize, HubBtnVariant, HubSemanticColor } from '../../models/button.types';\n\n/**\n * Styled button. Applies `hub-btn` CSS classes computed from signal inputs and\n * renders an optional loading spinner around the projected content.\n *\n * Usable in two interchangeable forms from the same class:\n * - As an element: `<hub-button variant=\"solid\" color=\"primary\">Save</hub-button>`.\n * - As an attribute on any host: `<button hubButton>Save</button>` / `<a hubButton href=\"…\">Link</a>`.\n *\n * Prefer the attribute form on a native `<button>` / `<a>` when you need real button\n * semantics (focus, keyboard activation, form submission). The `<hub-button>` **element**\n * form is only a styling host — a component cannot swap its own host tag for a native\n * `<button>` — so it self-advertises `role=\"button\"`, a focusable `tabindex`, and\n * Enter/Space keyboard activation to stay accessible. The `[hubButton]` attribute form on\n * a native `<button>`/`<a>` adds **none** of these bindings (the host is already\n * interactive; a redundant `role`/`tabindex` would be harmful).\n *\n * **Accessibility caveat:** an element-form `<hub-button>` now reports `role=\"button\"`,\n * so it must not be nested inside another interactive element (a `<button>`, `<a>` or any\n * host that is itself a control), which would produce an invalid nested-interactive tree.\n *\n * **Icons:** project whatever you want as content — the button is icon-library\n * agnostic. The icon's position follows the markup order, and the label/icon gap\n * is the `--hub-button-gap` token:\n *\n * ```html\n * <button hubButton><hub-icon name=\"floppy-disk\" /> Save</button>\n * <button hubButton>Next <hub-icon name=\"arrow-right\" /></button>\n * <button hubButton aria-label=\"Settings\"><hub-icon name=\"gear\" /></button>\n * ```\n */\n@Component({\n\tselector: 'hub-button, [hubButton]',\n\tstandalone: true,\n\ttemplateUrl: './button.component.html',\n\tstyleUrl: './button.component.scss',\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n\thost: { class: 'hub-btn' }\n})\nexport class HubButtonComponent {\n\t/**\n\t * Whether this instance renders as the `<hub-button>` element (vs `[hubButton]` on a\n\t * native host). Read once from the host tag at construction — a static host fact that\n\t * is available immediately (unlike input signals, which are not populated in the\n\t * constructor). Gates the a11y host bindings so they only apply to the element form.\n\t */\n\tprivate readonly _isElementForm = inject(ElementRef).nativeElement.tagName === 'HUB-BUTTON';\n\n\t/** Visual style of the button. */\n\tvariant = input<HubBtnVariant>('solid');\n\n\t/** Semantic color token. */\n\tcolor = input<HubSemanticColor>('primary');\n\n\t/** Size token. */\n\tsize = input<HubBtnSize>('md');\n\n\t/**\n\t * When true, shows the spinner and marks the button **busy and disabled**: it\n\t * reflects `aria-busy=\"true\"`, becomes non-focusable and inert to pointer and\n\t * keyboard, and (like {@link disabled}) reflects the native `disabled` attribute\n\t * so an in-flight submit button cannot be triggered twice.\n\t */\n\tloading = input(false);\n\n\t/** Mirrors the native disabled attribute on the host element. */\n\tdisabled = input(false);\n\n\t/**\n\t * True while the button must not respond to interaction — either explicitly\n\t * {@link disabled} or busy {@link loading}. Drives the native `disabled`\n\t * reflection, the tab-order removal and the keyboard-activation guard so both\n\t * states are inert through a single source of truth.\n\t */\n\tprivate get _isInert(): boolean {\n\t\treturn this.disabled() || this.loading();\n\t}\n\n\t/** Computed CSS classes applied to the host element via HostBinding. */\n\t@HostBinding('class')\n\tprotected get _hostClass(): string {\n\t\treturn [\n\t\t\t`hub-btn-${this.variant()}`,\n\t\t\t`hub-btn-${this.color()}`,\n\t\t\t`hub-btn-${this.size()}`,\n\t\t\tthis.loading() ? 'hub-btn-loading' : '',\n\t\t\tthis.disabled() ? 'hub-btn-disabled' : ''\n\t\t]\n\t\t\t.filter(Boolean)\n\t\t\t.join(' ');\n\t}\n\n\t/** Reflects the inert state (disabled or loading) as the native `disabled` attribute. */\n\t@HostBinding('attr.disabled')\n\tprotected get _disabledAttr(): true | null {\n\t\treturn this._isInert ? true : null;\n\t}\n\n\t/** Announces the busy state to assistive tech while loading. */\n\t@HostBinding('attr.aria-busy')\n\tprotected get _ariaBusy(): 'true' | null {\n\t\treturn this.loading() ? 'true' : null;\n\t}\n\n\t/**\n\t * Conveys the inert state to assistive tech on the element form, whose custom\n\t * host tag does not natively expose `disabled`. Bound to nothing for the\n\t * attribute form (its native host already exposes the state).\n\t */\n\t@HostBinding('attr.aria-disabled')\n\tprotected get _ariaDisabled(): 'true' | null {\n\t\treturn this._isElementForm && this._isInert ? 'true' : null;\n\t}\n\n\t/**\n\t * Advertises `role=\"button\"` for the element form only. The attribute form binds\n\t * nothing (its native host already exposes the correct role).\n\t */\n\t@HostBinding('attr.role')\n\tprotected get _role(): 'button' | null {\n\t\treturn this._isElementForm ? 'button' : null;\n\t}\n\n\t/**\n\t * Makes the element form keyboard-focusable (`0`), or removes it from the tab order\n\t * when inert — disabled or loading (`-1`). Bound to nothing for the attribute form.\n\t */\n\t@HostBinding('attr.tabindex')\n\tprotected get _tabindex(): number | null {\n\t\tif (!this._isElementForm) {\n\t\t\treturn null;\n\t\t}\n\n\t\treturn this._isInert ? -1 : 0;\n\t}\n\n\t/**\n\t * Emulates native button keyboard activation for the element form: Enter or Space\n\t * triggers a click. Space additionally calls `preventDefault()` to stop the page from\n\t * scrolling. No-op for the attribute form (the native host already handles keys) and\n\t * while inert (disabled or loading).\n\t * @param event The originating keyboard event.\n\t */\n\t@HostListener('keydown', ['$event'])\n\tprotected _onKeydown(event: KeyboardEvent): void {\n\t\tif (!this._isElementForm || this._isInert) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst isSpace = event.key === ' ' || event.key === 'Spacebar';\n\n\t\tif (event.key === 'Enter' || isSpace) {\n\t\t\tif (isSpace) {\n\t\t\t\tevent.preventDefault();\n\t\t\t}\n\n\t\t\t(event.currentTarget as HTMLElement).click();\n\t\t}\n\t}\n}\n","@if (loading()) {\n\t<span class=\"hub-btn__spinner\" aria-hidden=\"true\"></span>\n}\n<ng-content></ng-content>\n","import { ChangeDetectionStrategy, Component, DestroyRef, HostBinding, OnInit, ViewEncapsulation, inject, input, output, signal } from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { fromEvent } from 'rxjs';\nimport { debounceTime } from 'rxjs/operators';\nimport { HubFabPosition, HubFabSize, HubSemanticColor } from '../../models/button.types';\n\n/**\n * Floating Action Button component. Renders fixed in the viewport at the given position.\n * Supports circular and extended (pill with label) variants.\n * When collapseOnScroll is true, an extended FAB collapses to icon-only after 50px scroll.\n * Uses inset-inline-* / inset-block-* CSS logical properties for RTL support.\n */\n@Component({\n\tselector: 'hub-fab',\n\tstandalone: true,\n\ttemplateUrl: './fab.component.html',\n\tstyleUrl: './fab.component.scss',\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n\thost: { class: 'hub-fab' },\n\tencapsulation: ViewEncapsulation.None\n})\nexport class HubFabComponent implements OnInit {\n\tcolor = input<HubSemanticColor>('primary');\n\tsize = input<HubFabSize>('standard');\n\textended = input(false);\n\t/** Fixed viewport position. 9-slot grid including center. */\n\tposition = input<HubFabPosition>('bottom-end');\n\t/** When true, collapses an extended FAB to icon-only on page scroll. */\n\tcollapseOnScroll = input(false);\n\tdisabled = input(false);\n\tfabClick = output<void>();\n\n\t/** Collapse state driven by scroll — only active when extended + collapseOnScroll. */\n\tprotected readonly _collapsed = signal(false);\n\n\tprivate readonly _destroyRef = inject(DestroyRef);\n\n\t@HostBinding('class')\n\tprotected get _hostClass(): string {\n\t\treturn [\n\t\t\t`hub-fab-${this.color()}`,\n\t\t\t`hub-fab-${this.size()}`,\n\t\t\t`hub-fab-${this.position()}`,\n\t\t\tthis.extended() && !this._collapsed() ? 'hub-fab-extended' : '',\n\t\t\tthis.disabled() ? 'hub-fab-disabled' : ''\n\t\t]\n\t\t\t.filter(Boolean)\n\t\t\t.join(' ');\n\t}\n\n\tngOnInit(): void {\n\t\tif (!this.collapseOnScroll()) return;\n\n\t\tfromEvent(window, 'scroll', { passive: true })\n\t\t\t.pipe(debounceTime(50), takeUntilDestroyed(this._destroyRef))\n\t\t\t.subscribe(() => {\n\t\t\t\tthis._collapsed.set(window.scrollY > 50);\n\t\t\t});\n\t}\n}\n","<ng-content select=\"[slot=icon]\"></ng-content>\n\n@if (extended() && !_collapsed()) {\n\t<span class=\"hub-fab__label\">\n\t\t<ng-content select=\"[slot=label]\"></ng-content>\n\t</span>\n} @else if (!extended()) {\n\t<ng-content></ng-content>\n}\n","import { DOCUMENT, isPlatformBrowser } from '@angular/common';\nimport {\n\tChangeDetectionStrategy,\n\tComponent,\n\tDestroyRef,\n\tHostBinding,\n\tPLATFORM_ID,\n\tinject,\n\tinput,\n\tmodel,\n\toutput\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { fromEvent } from 'rxjs';\nimport { filter } from 'rxjs/operators';\nimport { HubFabPosition, HubFabSize, HubSemanticColor } from '../../models/button.types';\n\n/**\n * FAB that expands a stack of HubSpeedDialItemComponent children on click or hover.\n * Supports 4 expansion directions and all 9 FAB viewport positions.\n * Closes automatically on Escape key press.\n */\n@Component({\n\tselector: 'hub-speed-dial',\n\tstandalone: true,\n\ttemplateUrl: './speed-dial.component.html',\n\tstyleUrl: './speed-dial.component.scss',\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n\thost: { class: 'hub-speed-dial' }\n})\nexport class HubSpeedDialComponent {\n\tcolor = input<HubSemanticColor>('primary');\n\tsize = input<HubFabSize>('standard');\n\tposition = input<HubFabPosition>('bottom-end');\n\tdirection = input<'up' | 'down' | 'left' | 'right'>('up');\n\ttrigger = input<'click' | 'hover'>('click');\n\tisOpen = model(false);\n\topened = output<void>();\n\tclosed = output<void>();\n\n\tprivate readonly _destroyRef = inject(DestroyRef);\n\n\t@HostBinding('class')\n\tprotected get _hostClass(): string {\n\t\treturn [\n\t\t\t`hub-speed-dial-${this.color()}`,\n\t\t\t`hub-speed-dial-${this.position()}`,\n\t\t\t`hub-speed-dial-${this.direction()}`,\n\t\t\tthis.isOpen() ? 'hub-speed-dial-open' : ''\n\t\t]\n\t\t\t.filter(Boolean)\n\t\t\t.join(' ');\n\t}\n\n\tconstructor() {\n\t\t// Escape-to-close relies on DOM events; inert on the server (SSR/prerender).\n\t\tif (isPlatformBrowser(inject(PLATFORM_ID))) {\n\t\t\tfromEvent<KeyboardEvent>(inject(DOCUMENT), 'keydown')\n\t\t\t\t.pipe(\n\t\t\t\t\tfilter((e) => e.key === 'Escape' && this.isOpen()),\n\t\t\t\t\ttakeUntilDestroyed(this._destroyRef)\n\t\t\t\t)\n\t\t\t\t.subscribe(() => this.close());\n\t\t}\n\t}\n\n\t/** Toggle the speed dial open/closed. */\n\ttoggle(): void {\n\t\tthis.isOpen() ? this.close() : this.open();\n\t}\n\n\t/** Open the speed dial and emit the opened event. */\n\topen(): void {\n\t\tthis.isOpen.set(true);\n\t\tthis.opened.emit();\n\t}\n\n\t/** Close the speed dial and emit the closed event. */\n\tclose(): void {\n\t\tthis.isOpen.set(false);\n\t\tthis.closed.emit();\n\t}\n}\n","<button\n\tclass=\"hub-fab\"\n\t[class]=\"'hub-fab-' + color() + ' hub-fab-' + size()\"\n\t(click)=\"trigger() === 'click' && toggle()\"\n\t(mouseenter)=\"trigger() === 'hover' && open()\"\n\t(mouseleave)=\"trigger() === 'hover' && close()\"\n\ttype=\"button\"\n\t[attr.aria-expanded]=\"isOpen()\"\n\taria-haspopup=\"true\">\n\t<ng-content select=\"[hubTrigger]\"></ng-content>\n</button>\n\n@if (isOpen()) {\n\t<div class=\"hub-speed-dial__actions\" [attr.data-direction]=\"direction()\">\n\t\t<ng-content></ng-content>\n\t</div>\n}\n","import { ChangeDetectionStrategy, Component, HostBinding, input, output } from '@angular/core';\nimport { HubSemanticColor } from '../../../models/button.types';\n\n/**\n * Secondary action item rendered inside HubSpeedDialComponent.\n * Emits itemClick when activated. Supports an optional label tooltip.\n */\n@Component({\n\tselector: 'hub-speed-dial-item',\n\tstandalone: true,\n\ttemplateUrl: './speed-dial-item.component.html',\n\tstyleUrl: './speed-dial-item.component.scss',\n\tchangeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class HubSpeedDialItemComponent {\n\t/** Icon character or ligature string displayed in the action button. */\n\ticon = input.required<string>();\n\t/** Tooltip label shown next to the action button. */\n\tlabel = input('');\n\tcolor = input<HubSemanticColor | 'default'>('default');\n\tdisabled = input(false);\n\titemClick = output<void>();\n}\n","@if (label()) {\n\t<span class=\"hub-speed-dial-item__label\">{{ label() }}</span>\n}\n<button\n\tclass=\"hub-speed-dial-item__btn\"\n\t[class]=\"'hub-speed-dial-item__btn--' + color()\"\n\t[disabled]=\"disabled() || null\"\n\t(click)=\"itemClick.emit()\"\n\ttype=\"button\"\n\t[attr.aria-label]=\"label() || icon()\">\n\t<i [class]=\"icon()\" aria-hidden=\"true\"></i>\n</button>\n","import { ChangeDetectionStrategy, Component, HostBinding, input } from '@angular/core';\nimport { HubSemanticColor } from '../../models/button.types';\n\n/**\n * Styled container for dropdown content.\n * Renders a shadowed panel with an optional semantic color top-border accent.\n * Place hub-dropdown-item, hub-dropdown-divider, and hub-dropdown-header children inside.\n */\n@Component({\n\tselector: 'hub-dropdown-panel',\n\tstandalone: true,\n\ttemplate: `<ng-content></ng-content>`,\n\tstyleUrl: './dropdown-panel.component.scss',\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n\thost: { class: 'hub-dropdown-panel' }\n})\nexport class HubDropdownPanelComponent {\n\t/** Adds a semantic color accent to the panel top border. */\n\tcolor = input<HubSemanticColor | 'default'>('default');\n\n\t@HostBinding('class')\n\tprotected get _hostClass(): string {\n\t\treturn this.color() !== 'default' ? `hub-dropdown-panel-${this.color()}` : '';\n\t}\n}\n","import { ChangeDetectionStrategy, Component, HostBinding, input, output } from '@angular/core';\nimport { HubSemanticColor } from '../../models/button.types';\n\n/**\n * Menu item for use inside HubDropdownPanelComponent.\n * Emits itemClick when activated. Supports an optional icon, selected state and semantic color.\n */\n@Component({\n\tselector: 'hub-dropdown-item',\n\tstandalone: true,\n\ttemplateUrl: './dropdown-item.component.html',\n\tstyleUrl: './dropdown-item.component.scss',\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n\thost: { class: 'hub-dropdown-item' }\n})\nexport class HubDropdownItemComponent {\n\tcolor = input<HubSemanticColor | 'default'>('default');\n\t/** Optional icon character or ligature displayed before the label. */\n\ticon = input<string>();\n\tdisabled = input(false);\n\t/** Shows a checkmark indicator when selected. */\n\tselected = input(false);\n\titemClick = output<void>();\n\n\t@HostBinding('class')\n\tprotected get _hostClass(): string {\n\t\treturn [\n\t\t\tthis.color() !== 'default' ? `hub-dropdown-item-${this.color()}` : '',\n\t\t\tthis.disabled() ? 'hub-dropdown-item-disabled' : '',\n\t\t\tthis.selected() ? 'hub-dropdown-item-selected' : ''\n\t\t]\n\t\t\t.filter(Boolean)\n\t\t\t.join(' ');\n\t}\n\n\tprotected _handleClick(): void {\n\t\tif (this.disabled()) return;\n\t\tthis.itemClick.emit();\n\t}\n}\n","<button\n\tclass=\"hub-dropdown-item__inner\"\n\ttype=\"button\"\n\t[disabled]=\"disabled() || null\"\n\t(click)=\"_handleClick()\">\n\t@if (icon()) {\n\t\t<i [class]=\"icon()\" aria-hidden=\"true\"></i>\n\t}\n\t<span class=\"hub-dropdown-item__label\"><ng-content></ng-content></span>\n\t@if (selected()) {\n\t\t<span class=\"hub-dropdown-item__check\" aria-hidden=\"true\">✓</span>\n\t}\n</button>\n","import { ChangeDetectionStrategy, Component } from '@angular/core';\n\n/** Horizontal separator for grouping items inside HubDropdownPanelComponent. */\n@Component({\n\tselector: 'hub-dropdown-divider',\n\tstandalone: true,\n\ttemplate: '',\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n\thost: {\n\t\tclass: 'hub-dropdown-divider',\n\t\trole: 'separator',\n\t\t'aria-hidden': 'true'\n\t},\n\tstyles: [\n\t\t`\n\t\t\t:host {\n\t\t\t\tdisplay: block;\n\t\t\t\theight: 1px;\n\t\t\t\tbackground: var(--hub-dropdown-divider-color, var(--hub-sys-color-border-subtle, #dee2e6));\n\t\t\t\tmargin: var(--hub-ref-space-1, 0.25rem) 0;\n\t\t\t}\n\t\t`\n\t]\n})\nexport class HubDropdownDividerComponent {}\n","import { ChangeDetectionStrategy, Component } from '@angular/core';\n\n/** Group label for organizing items inside HubDropdownPanelComponent. */\n@Component({\n\tselector: 'hub-dropdown-header',\n\tstandalone: true,\n\ttemplate: `<ng-content></ng-content>`,\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n\thost: { class: 'hub-dropdown-header' },\n\tstyles: [\n\t\t`\n\t\t\t:host {\n\t\t\t\tdisplay: block;\n\t\t\t\tpadding: 0.375rem var(--hub-dropdown-header-padding-x, var(--hub-ref-space-3, 1rem)) 0.1875rem;\n\t\t\t\tfont-size: var(--hub-dropdown-header-font-size, var(--hub-ref-font-size-xs, 0.75rem));\n\t\t\t\tfont-weight: var(--hub-ref-font-weight-bold, 700);\n\t\t\t\tcolor: var(--hub-dropdown-header-color, var(--hub-sys-color-text-subtle, #6c757d));\n\t\t\t\ttext-transform: uppercase;\n\t\t\t\tletter-spacing: 0.06em;\n\t\t\t}\n\t\t`\n\t]\n})\nexport class HubDropdownHeaderComponent {}\n","import { DOCUMENT, isPlatformBrowser } from '@angular/common';\nimport {\n\tDestroyRef,\n\tDirective,\n\tElementRef,\n\tPLATFORM_ID,\n\tTemplateRef,\n\tViewContainerRef,\n\tinject,\n\tinput,\n\tmodel,\n\toutput,\n\tsignal\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { fromEvent } from 'rxjs';\nimport { filter, take } from 'rxjs/operators';\nimport { OverlayService } from 'ng-hub-ui-utils';\nimport type { OverlayRef, ConnectionPosition } from 'ng-hub-ui-utils';\nimport { HubDropdownPlacement } from '../models/button.types';\n\n/**\n * Turns any host element into a dropdown trigger.\n * Renders an ng-template in a body-level overlay managed by OverlayService (no CDK).\n * When closeOnSelect is true, any click inside the panel closes the overlay automatically.\n */\n@Directive({\n\tselector: '[hubDropdown]',\n\tstandalone: true,\n\texportAs: 'hubDropdown',\n\thost: {\n\t\t'(click)': '_onHostClick()',\n\t\t'(mouseenter)': '_onHostEnter()',\n\t\t'(mouseleave)': '_onHostLeave()'\n\t}\n})\nexport class HubDropdownDirective {\n\t/** The ng-template to render inside the overlay panel. */\n\ttpl = input.required<TemplateRef<any>>({ alias: 'hubDropdown' });\n\tplacement = input<HubDropdownPlacement>('bottom-start');\n\ttrigger = input<'click' | 'hover'>('click');\n\t/** When true, any click inside the panel content closes the dropdown. */\n\tcloseOnSelect = input(true);\n\tdisabled = input(false);\n\t/** Vertical offset in pixels between the trigger and the panel. */\n\toffsetY = input(4);\n\tpanelClass = input('');\n\tisOpen = model(false);\n\topened = output<void>();\n\tclosed = output<void>();\n\n\tprivate _overlayRef: OverlayRef | null = null;\n\n\tprivate readonly _el = inject(ElementRef<HTMLElement>);\n\tprivate readonly _vcr = inject(ViewContainerRef);\n\tprivate readonly _overlay = inject(OverlayService);\n\tprivate readonly _destroyRef = inject(DestroyRef);\n\tprivate readonly _document = inject(DOCUMENT);\n\n\tconstructor() {\n\t\t// Escape-to-close relies on DOM events; inert on the server (SSR/prerender).\n\t\tif (isPlatformBrowser(inject(PLATFORM_ID))) {\n\t\t\tfromEvent<KeyboardEvent>(this._document, 'keydown')\n\t\t\t\t.pipe(\n\t\t\t\t\tfilter((e) => e.key === 'Escape' && this.isOpen()),\n\t\t\t\t\ttakeUntilDestroyed(this._destroyRef)\n\t\t\t\t)\n\t\t\t\t.subscribe(() => this.close());\n\t\t}\n\t}\n\n\t/** Open the dropdown and mount the overlay. */\n\topen(): void {\n\t\tif (this.disabled() || this.isOpen()) return;\n\n\t\tconst positionStrategy = this._overlay.position().flexibleConnectedTo(this._el).withPositions(this._buildPositions());\n\n\t\tconst panelClasses = ['hub-dropdown-overlay'];\n\t\tif (this.panelClass()) panelClasses.push(this.panelClass());\n\n\t\tthis._overlayRef = this._overlay.create({ positionStrategy, panelClass: panelClasses });\n\n\t\tconst panelEl = this._overlayRef.attach(this.tpl(), this._vcr);\n\n\t\t// Close on click-outside via backdrop\n\t\tthis._overlayRef.onBackdropClick(() => this.close());\n\n\t\t// Close on click-inside when closeOnSelect is true\n\t\tif (this.closeOnSelect() && panelEl) {\n\t\t\tfromEvent<MouseEvent>(panelEl, 'click')\n\t\t\t\t.pipe(take(1), takeUntilDestroyed(this._destroyRef))\n\t\t\t\t.subscribe(() => this.close());\n\t\t}\n\n\t\tthis.isOpen.set(true);\n\t\tthis.opened.emit();\n\n\t\t// Close on scroll so the panel stays aligned with the trigger\n\t\tfromEvent(this._document, 'scroll', { passive: true, capture: true })\n\t\t\t.pipe(take(1), takeUntilDestroyed(this._destroyRef))\n\t\t\t.subscribe(() => this.close());\n\n\t\t// Click-outside detection (document-level)\n\t\tfromEvent<MouseEvent>(this._document, 'click')\n\t\t\t.pipe(\n\t\t\t\tfilter((e) => !this._el.nativeElement.contains(e.target as Node) && !!this._overlayRef?.hasAttached()),\n\t\t\t\ttake(1),\n\t\t\t\ttakeUntilDestroyed(this._destroyRef)\n\t\t\t)\n\t\t\t.subscribe(() => this.close());\n\t}\n\n\t/** Close the dropdown and destroy the overlay. */\n\tclose(): void {\n\t\tif (!this.isOpen()) return;\n\t\tthis._overlayRef?.detach();\n\t\tthis._overlayRef?.dispose();\n\t\tthis._overlayRef = null;\n\t\tthis.isOpen.set(false);\n\t\tthis.closed.emit();\n\t}\n\n\t/** Toggle between open and closed. */\n\ttoggle(): void {\n\t\tthis.isOpen() ? this.close() : this.open();\n\t}\n\n\tprotected _onHostClick(): void {\n\t\tif (this.trigger() === 'click') this.toggle();\n\t}\n\n\tprotected _onHostEnter(): void {\n\t\tif (this.trigger() === 'hover') this.open();\n\t}\n\n\tprotected _onHostLeave(): void {\n\t\tif (this.trigger() === 'hover') this.close();\n\t}\n\n\t/**\n\t * Translates HubDropdownPlacement tokens to ConnectionPosition arrays.\n\t * The OverlayPosition tries each entry in order, using the first that fits.\n\t */\n\tprivate _buildPositions(): ConnectionPosition[] {\n\t\tconst o = this.offsetY();\n\t\tconst map: Record<HubDropdownPlacement, ConnectionPosition[]> = {\n\t\t\t'bottom-start': [{ originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: o }],\n\t\t\tbottom: [{ originX: 'center', originY: 'bottom', overlayX: 'center', overlayY: 'top', offsetY: o }],\n\t\t\t'bottom-end': [{ originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top', offsetY: o }],\n\t\t\t'top-start': [{ originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -o }],\n\t\t\ttop: [{ originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom', offsetY: -o }],\n\t\t\t'top-end': [{ originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom', offsetY: -o }],\n\t\t\tstart: [{ originX: 'start', originY: 'center', overlayX: 'end', overlayY: 'center', offsetX: -o }],\n\t\t\tend: [{ originX: 'end', originY: 'center', overlayX: 'start', overlayY: 'center', offsetX: o }]\n\t\t};\n\t\treturn map[this.placement()];\n\t}\n}\n","/*\n * Public API Surface of ng-hub-ui-buttons\n */\n\n// Types\nexport * from './lib/models/button.types';\n\n// Tokens\nexport * from './lib/tokens/dropdown.token';\n\n// Components\nexport * from './lib/components/btn/button.component';\n/**\n * @deprecated Renamed to `HubButtonComponent`. The component now also matches the\n * `[hubButton]` attribute selector, so it replaces the former `HubBtnDirective`.\n */\nexport { HubButtonComponent as HubBtnComponent } from './lib/components/btn/button.component';\n/**\n * @deprecated Replaced by `HubButtonComponent`, which now matches `[hubButton]` itself\n * (and renders the loading spinner in the attribute form too).\n */\nexport { HubButtonComponent as HubBtnDirective } from './lib/components/btn/button.component';\nexport * from './lib/components/fab/fab.component';\nexport * from './lib/components/speed-dial/speed-dial.component';\nexport * from './lib/components/speed-dial/speed-dial-item/speed-dial-item.component';\nexport * from './lib/components/dropdown-panel/dropdown-panel.component';\nexport * from './lib/components/dropdown-item/dropdown-item.component';\nexport * from './lib/components/dropdown-divider/dropdown-divider.component';\nexport * from './lib/components/dropdown-header/dropdown-header.component';\n\n// Directives\nexport * from './lib/directives/dropdown.directive';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ng-hub-ui-buttons",
-  "version": "22.7.0",
+  "version": "22.8.0",
   "description": "Buttons, FAB, Speed Dial and Dropdown directive for Angular, part of the ng-hub-ui ecosystem",
   "author": "Carlos Morcillo <carlos.morcillo@me.com> (https://www.carlosmorcillo.com)",
   "repository": {

package/styles/_btn-mixins.scss

@@ -47,25 +47,42 @@
 //   }
 
 /// Outputs button appearance CSS rules from the local accent slot.
-/// Parameter defaults match the ghost variant — override only the values that differ.
-/// All colour inputs read the `--hub-btn-accent*` slot family, so the rules are
-/// accent-agnostic and work for any variant, known or user-registered.
+/// Parameter defaults match the ghost variant's resting/hover look — override
+/// only the values that differ. All colour inputs read the `--hub-btn-accent*`
+/// slot family, so the rules are accent-agnostic and work for any variant, known
+/// or user-registered.
+///
+/// INTERACTION SLOTS — the hover/active states are fully overridable
+/// -----------------------------------------------------------------
+/// The `:hover` and `:active` branches ALWAYS consume the overridable slots
+/// `--hub-btn-hover-*` / `--hub-btn-active-*` (defaults declared on the host in
+/// button.component.scss). Each `$hover-*` / `$active-*` parameter, when given,
+/// simply re-points the matching slot for this appearance, so a consumer can
+/// retune any interaction colour by setting the CSS variable — no recompilation:
+///
+///   hub-button.hub-btn-solid { --hub-btn-hover-bg: rebeccapurple; }
 ///
 /// @param {value}  $bg              - `background` in resting state.
 /// @param {value}  $color           - `color` in resting state.
 /// @param {value}  $border          - `border-color` in resting state.
-/// @param {value}  $hover-bg        - `background` on hover (null = skip).
-/// @param {value}  $hover-border    - `border-color` on hover (null = skip).
-/// @param {value}  $hover-color     - `color` on hover (null = skip).
+/// @param {value}  $hover-bg        - Override for `--hub-btn-hover-bg` (null = keep host default).
+/// @param {value}  $hover-border    - Override for `--hub-btn-hover-border` (null = keep host default).
+/// @param {value}  $hover-color     - Override for `--hub-btn-hover-color` (null = keep host default).
+/// @param {value}  $active-bg       - Override for `--hub-btn-active-bg` (null = keep host default).
+/// @param {value}  $active-border   - Override for `--hub-btn-active-border` (null = keep host default).
+/// @param {value}  $active-color    - Override for `--hub-btn-active-color` (null = keep host default).
 /// @param {value}  $text-decoration - Extra text-decoration (null = skip).
 /// @param {value}  $padding-inline  - Extra padding-inline override (null = skip).
 @mixin hub-btn-variant-rules(
 	$bg: transparent,
 	$color: var(--hub-btn-accent-emphasis),
 	$border: transparent,
-	$hover-bg: var(--hub-btn-accent-subtle),
+	$hover-bg: null,
 	$hover-border: null,
 	$hover-color: null,
+	$active-bg: null,
+	$active-border: null,
+	$active-color: null,
 	$text-decoration: null,
 	$padding-inline: null
 ) {
@@ -81,18 +98,42 @@
 		padding-inline: $padding-inline;
 	}
 
-	&:hover:not([disabled]):not(.hub-btn-disabled) {
-		@if $hover-bg {
-			background: $hover-bg;
-		}
+	// Per-appearance overrides of the interaction slots. When a value is given it
+	// re-points the slot for this appearance; when null the host default stands.
+	@if $hover-bg {
+		--hub-btn-hover-bg: #{$hover-bg};
+	}
+
+	@if $hover-border {
+		--hub-btn-hover-border: #{$hover-border};
+	}
+
+	@if $hover-color {
+		--hub-btn-hover-color: #{$hover-color};
+	}
 
-		@if $hover-border {
-			border-color: $hover-border;
-		}
+	@if $active-bg {
+		--hub-btn-active-bg: #{$active-bg};
+	}
+
+	@if $active-border {
+		--hub-btn-active-border: #{$active-border};
+	}
+
+	@if $active-color {
+		--hub-btn-active-color: #{$active-color};
+	}
+
+	&:hover:not([disabled]):not(.hub-btn-disabled) {
+		background: var(--hub-btn-hover-bg);
+		border-color: var(--hub-btn-hover-border);
+		color: var(--hub-btn-hover-color);
+	}
 
-		@if $hover-color {
-			color: $hover-color;
-		}
+	&:active:not([disabled]):not(.hub-btn-disabled) {
+		background: var(--hub-btn-active-bg);
+		border-color: var(--hub-btn-active-border);
+		color: var(--hub-btn-active-color);
 	}
 }
 

package/types/ng-hub-ui-buttons.d.ts

@@ -2,10 +2,24 @@ import * as _angular_core from '@angular/core';
 import { InjectionToken, Signal, OnInit, TemplateRef } from '@angular/core';
 
 /**
- * Semantic color tokens shared across all button-library components.
- * Maps to --hub-sys-color-<color>-* design-system token families.
+ * The nine canonical accents the button stylesheet registers out of the box,
+ * each mapping to a `--hub-sys-color-<color>` design-system family. Includes the
+ * three neutral accents (`neutral` / `light` / `dark`) the design-system already
+ * ships and the button accent loop already emits.
  */
-type HubSemanticColor = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
+type HubSemanticBuiltinColor = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'neutral' | 'light' | 'dark';
+/**
+ * Semantic color token shared across all button-library components
+ * (btn / fab / speed-dial / dropdown).
+ *
+ * OPEN SET: any of the nine built-in accents, **or any custom string** a product
+ * registers with the `hub-btn-color-rules('<name>')` mixin (or a bare
+ * `--hub-btn-accent` rule). The `(string & {})` arm keeps IntelliSense listing the
+ * built-ins while still accepting arbitrary values, so `color="brand"` type-checks
+ * once its accent is registered — the button derives the whole role family
+ * (emphasis / subtle / on) from that single slot at runtime.
+ */
+type HubSemanticColor = HubSemanticBuiltinColor | (string & {});
 /** Visual style variant of a button. Controls background, border and text treatment. */
 type HubBtnVariant = 'solid' | 'outline' | 'soft' | 'ghost' | 'link';
 /** Size token for standard buttons. */
@@ -46,8 +60,16 @@ declare const DROPDOWN_CONTEXT: InjectionToken<DropdownContext>;
  * - As an attribute on any host: `<button hubButton>Save</button>` / `<a hubButton href="…">Link</a>`.
  *
  * Prefer the attribute form on a native `<button>` / `<a>` when you need real button
- * semantics (focus, keyboard activation, form submission); the `<hub-button>` element is
- * a styling host without native button behaviour.
+ * semantics (focus, keyboard activation, form submission). The `<hub-button>` **element**
+ * form is only a styling host — a component cannot swap its own host tag for a native
+ * `<button>` — so it self-advertises `role="button"`, a focusable `tabindex`, and
+ * Enter/Space keyboard activation to stay accessible. The `[hubButton]` attribute form on
+ * a native `<button>`/`<a>` adds **none** of these bindings (the host is already
+ * interactive; a redundant `role`/`tabindex` would be harmful).
+ *
+ * **Accessibility caveat:** an element-form `<hub-button>` now reports `role="button"`,
+ * so it must not be nested inside another interactive element (a `<button>`, `<a>` or any
+ * host that is itself a control), which would produce an invalid nested-interactive tree.
  *
  * **Icons:** project whatever you want as content — the button is icon-library
  * agnostic. The icon's position follows the markup order, and the label/icon gap
@@ -60,20 +82,65 @@ declare const DROPDOWN_CONTEXT: InjectionToken<DropdownContext>;
  * ```
  */
 declare class HubButtonComponent {
+    /**
+     * Whether this instance renders as the `<hub-button>` element (vs `[hubButton]` on a
+     * native host). Read once from the host tag at construction — a static host fact that
+     * is available immediately (unlike input signals, which are not populated in the
+     * constructor). Gates the a11y host bindings so they only apply to the element form.
+     */
+    private readonly _isElementForm;
     /** Visual style of the button. */
     variant: _angular_core.InputSignal<HubBtnVariant>;
     /** Semantic color token. */
     color: _angular_core.InputSignal<HubSemanticColor>;
     /** Size token. */
     size: _angular_core.InputSignal<HubBtnSize>;
-    /** When true, shows a spinner and blocks pointer events. */
+    /**
+     * When true, shows the spinner and marks the button **busy and disabled**: it
+     * reflects `aria-busy="true"`, becomes non-focusable and inert to pointer and
+     * keyboard, and (like {@link disabled}) reflects the native `disabled` attribute
+     * so an in-flight submit button cannot be triggered twice.
+     */
     loading: _angular_core.InputSignal<boolean>;
     /** Mirrors the native disabled attribute on the host element. */
     disabled: _angular_core.InputSignal<boolean>;
+    /**
+     * True while the button must not respond to interaction — either explicitly
+     * {@link disabled} or busy {@link loading}. Drives the native `disabled`
+     * reflection, the tab-order removal and the keyboard-activation guard so both
+     * states are inert through a single source of truth.
+     */
+    private get _isInert();
     /** Computed CSS classes applied to the host element via HostBinding. */
     protected get _hostClass(): string;
-    /** Reflects the disabled state as a native HTML attribute. */
+    /** Reflects the inert state (disabled or loading) as the native `disabled` attribute. */
     protected get _disabledAttr(): true | null;
+    /** Announces the busy state to assistive tech while loading. */
+    protected get _ariaBusy(): 'true' | null;
+    /**
+     * Conveys the inert state to assistive tech on the element form, whose custom
+     * host tag does not natively expose `disabled`. Bound to nothing for the
+     * attribute form (its native host already exposes the state).
+     */
+    protected get _ariaDisabled(): 'true' | null;
+    /**
+     * Advertises `role="button"` for the element form only. The attribute form binds
+     * nothing (its native host already exposes the correct role).
+     */
+    protected get _role(): 'button' | null;
+    /**
+     * Makes the element form keyboard-focusable (`0`), or removes it from the tab order
+     * when inert — disabled or loading (`-1`). Bound to nothing for the attribute form.
+     */
+    protected get _tabindex(): number | null;
+    /**
+     * Emulates native button keyboard activation for the element form: Enter or Space
+     * triggers a click. Space additionally calls `preventDefault()` to stop the page from
+     * scrolling. No-op for the attribute form (the native host already handles keys) and
+     * while inert (disabled or loading).
+     * @param event The originating keyboard event.
+     */
+    protected _onKeydown(event: KeyboardEvent): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<HubButtonComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<HubButtonComponent, "hub-button, [hubButton]", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
@@ -234,4 +301,4 @@ declare class HubDropdownDirective {
 }
 
 export { DROPDOWN_CONTEXT, HubButtonComponent as HubBtnComponent, HubButtonComponent as HubBtnDirective, HubButtonComponent, HubDropdownDirective, HubDropdownDividerComponent, HubDropdownHeaderComponent, HubDropdownItemComponent, HubDropdownPanelComponent, HubFabComponent, HubSpeedDialComponent, HubSpeedDialItemComponent };
-export type { DropdownContext, HubBtnSize, HubBtnVariant, HubDropdownPlacement, HubFabPosition, HubFabSize, HubSemanticColor };
+export type { DropdownContext, HubBtnSize, HubBtnVariant, HubDropdownPlacement, HubFabPosition, HubFabSize, HubSemanticBuiltinColor, HubSemanticColor };