@weeehaoooz/talos-ui 0.1.0 → 0.1.2

package/styles/_spinner.scss

@@ -0,0 +1,58 @@
+/* ==========================================================================
+   Talos UI Loading Spinner Styles & Directives
+   ========================================================================== */
+
+:root {
+  --talos-spinner-size-xs: 16px;
+  --talos-spinner-size-sm: 20px;
+  --talos-spinner-size-md: 28px;
+  --talos-spinner-size-lg: 40px;
+  --talos-spinner-size-xl: 56px;
+
+  --talos-spinner-track-bg: rgba(226, 232, 240, 0.8);
+  --talos-spinner-overlay-bg: rgba(255, 255, 255, 0.78);
+  --talos-spinner-overlay-bg-dark: rgba(15, 23, 42, 0.78);
+}
+
+[data-theme='dark'],
+[data-mode='dark'],
+.dark,
+.dark-theme {
+  --talos-spinner-track-bg: rgba(255, 255, 255, 0.12);
+  --talos-spinner-overlay-bg: rgba(15, 23, 42, 0.78);
+}
+
+// ── Global Directive Attached Styles ([talosSpinnerOverlay], [talosLoading]) ──
+.talos-spinner-overlay-host {
+  position: relative !important;
+
+  &--active {
+    pointer-events: auto;
+  }
+
+  &--blur > *:not(.talos-spinner-overlay) {
+    filter: blur(3px);
+    pointer-events: none;
+    user-select: none;
+    transition: filter 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+}
+
+.talos-spinner-overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 20;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1.25rem;
+  background-color: var(--talos-spinner-overlay-bg, rgba(255, 255, 255, 0.78));
+  border-radius: inherit;
+  box-sizing: border-box;
+  animation: talos-spinner-fade 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+
+  &--blur {
+    backdrop-filter: blur(4px);
+    -webkit-backdrop-filter: blur(4px);
+  }
+}

package/styles/_variables.scss

@@ -21,6 +21,7 @@
   --talos-radius-full: 9999px;
 
   /* Metric & Sizing Scale */
+  --talos-height-xs: 1.625rem; /* 26px */
   --talos-height-sm: 2rem;     /* 32px */
   --talos-height-md: 2.25rem;  /* 36px */
   --talos-height-lg: 2.625rem; /* 42px */
@@ -295,14 +296,17 @@
   --talos-btn-success-active: var(--talos-success-active);
   --talos-btn-success-text: var(--talos-success-solid-text);
 
+  --talos-btn-height-xs: var(--talos-height-xs, 1.625rem);
   --talos-btn-height-sm: var(--talos-height-sm);
   --talos-btn-height-md: var(--talos-height-md);
   --talos-btn-height-lg: var(--talos-height-lg);
 
+  --talos-btn-padding-x-xs: 0.5rem;
   --talos-btn-padding-x-sm: 0.625rem;
   --talos-btn-padding-x-md: 0.875rem;
   --talos-btn-padding-x-lg: 1.125rem;
 
+  --talos-btn-font-size-xs: var(--talos-font-size-2xs, 0.6875rem);
   --talos-btn-font-size-sm: var(--talos-font-size-xs);
   --talos-btn-font-size-md: var(--talos-font-size-sm);
   --talos-btn-font-size-lg: var(--talos-font-size-md);
@@ -419,6 +423,15 @@
   --talos-text-muted: #94a3b8;
   --talos-text-inverse: #090d16;
 
+  /* Aliases for global consistency in Dark Mode */
+  --talos-bg-color: var(--talos-bg-canvas);
+  --talos-card-bg: var(--talos-bg-surface);
+  --talos-card-bg-subtle: var(--talos-bg-subtle);
+  --talos-border-color: var(--talos-border-default);
+  --talos-text-color: var(--talos-text-primary);
+  --talos-primary-color: var(--talos-primary);
+  --talos-primary-light: var(--talos-primary-subtle-bg);
+
   /* Shadows */
   --talos-shadow-dropdown: 0 16px 32px -4px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.08);
   --talos-shadow-dialog: 0 25px 50px -12px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.1);
@@ -504,6 +517,18 @@
   /* Component adjustments for Dark Mode */
   --talos-loading-overlay-bg: rgba(9, 13, 22, 0.8);
   --talos-range-thumb-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
+
+  /* High-Contrast Button & Dropdown Tokens in Dark Mode */
+  --talos-btn-secondary-bg: #334155;
+  --talos-btn-secondary-hover: #475569;
+  --talos-btn-secondary-active: #1e293b;
+  --talos-btn-secondary-text: #f8fafc;
+  --talos-btn-outline-hover-bg: #1e293b;
+  --talos-btn-outline-hover-border: rgba(255, 255, 255, 0.28);
+  --talos-btn-outline-hover-text: #f8fafc;
+  --talos-btn-ghost-hover-bg: #1e293b;
+  --talos-btn-ghost-hover-text: #f8fafc;
+  --talos-dropdown-hover-bg: #1e293b;
 }
 
 /* System Dark Mode Fallback */
@@ -586,5 +611,17 @@
     --talos-range-tooltip-bg: #1e293b;
     --talos-range-tooltip-text: #f8fafc;
     --talos-range-tick-active-color: #f8fafc;
+
+    /* High-Contrast Button & Dropdown Tokens in Dark Mode Fallback */
+    --talos-btn-secondary-bg: #334155;
+    --talos-btn-secondary-hover: #475569;
+    --talos-btn-secondary-active: #1e293b;
+    --talos-btn-secondary-text: #f8fafc;
+    --talos-btn-outline-hover-bg: #1e293b;
+    --talos-btn-outline-hover-border: rgba(255, 255, 255, 0.28);
+    --talos-btn-outline-hover-text: #f8fafc;
+    --talos-btn-ghost-hover-bg: #1e293b;
+    --talos-btn-ghost-hover-text: #f8fafc;
+    --talos-dropdown-hover-bg: #1e293b;
   }
 }

package/styles/index.scss

@@ -12,4 +12,9 @@
 @use './drop-zone';
 @use './badge';
 @use './alert';
-@use './timeline';
+@use './timeline';
+@use './dropdown';
+@use './breadcrumb';
+@use './skeleton';
+@use './progress-bar';
+@use './spinner';

package/types/weeehaoooz-talos-ui-button.d.ts

@@ -0,0 +1,92 @@
+import * as _angular_core from '@angular/core';
+import { ElementRef } from '@angular/core';
+
+type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'subtle' | 'danger' | 'success' | 'link';
+type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';
+type ButtonAnimation = 'spin' | 'spin-once' | 'pop' | 'shake' | 'pulse' | 'bounce' | 'none';
+type ButtonFeedbackState = 'success' | 'error' | null;
+declare class TalosButtonDirective {
+    private readonly elementRef;
+    /** Button visual style variant */
+    readonly variant: _angular_core.InputSignal<ButtonVariant>;
+    /** Button size variant */
+    readonly size: _angular_core.InputSignal<ButtonSize>;
+    /** Whether button has square aspect ratio for icon-only display */
+    readonly iconOnly: _angular_core.InputSignal<boolean>;
+    /** Expand button to fill 100% width of parent container */
+    readonly fullWidth: _angular_core.InputSignal<boolean>;
+    /** Apply fully rounded pill shape */
+    readonly pill: _angular_core.InputSignal<boolean>;
+    /** Show loading spinner and disable interactive events */
+    readonly loading: _angular_core.InputSignal<boolean>;
+    /** Disable button interaction */
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    /** Micro-interaction animation preset to apply */
+    readonly animation: _angular_core.InputSignal<ButtonAnimation>;
+    /** Convenience boolean signal for spinning icon / continuous refresh state */
+    readonly spinning: _angular_core.InputSignal<boolean>;
+    /** Convenience boolean signal for pop / scale bounce feedback */
+    readonly popping: _angular_core.InputSignal<boolean>;
+    /** Contextual temporary feedback state (e.g. green success pop or red error shake) */
+    readonly feedback: _angular_core.InputSignal<ButtonFeedbackState>;
+    onPointerDown(event: Event): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TalosButtonDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TalosButtonDirective, "button[talosButton], a[talosButton], button[talos-btn], a[talos-btn]", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "iconOnly": { "alias": "iconOnly"; "required": false; "isSignal": true; }; "fullWidth": { "alias": "fullWidth"; "required": false; "isSignal": true; }; "pill": { "alias": "pill"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "animation": { "alias": "animation"; "required": false; "isSignal": true; }; "spinning": { "alias": "spinning"; "required": false; "isSignal": true; }; "popping": { "alias": "popping"; "required": false; "isSignal": true; }; "feedback": { "alias": "feedback"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare class TalosButtonGroupItemDirective {
+    readonly elementRef: ElementRef<HTMLElement>;
+    /** Value associated with this button item in selection mode */
+    readonly value: _angular_core.InputSignal<any>;
+    /** Explicit selected / active state override */
+    readonly selected: _angular_core.WritableSignal<boolean>;
+    /** Focus target method */
+    focus(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TalosButtonGroupItemDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TalosButtonGroupItemDirective, "button[talosButtonGroupItem], a[talosButtonGroupItem], [talos-button-group-item]", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+type ButtonGroupOrientation = 'horizontal' | 'vertical';
+type ButtonGroupVariant = 'attached' | 'segmented' | 'outline' | 'subtle' | 'pill' | 'glow';
+type ButtonGroupSelectionMode = 'none' | 'single' | 'multiple';
+declare class TalosButtonGroupComponent {
+    readonly elementRef: ElementRef<HTMLElement>;
+    /** Layout orientation: horizontal or vertical */
+    readonly orientation: _angular_core.InputSignal<ButtonGroupOrientation>;
+    /** Visual variant style */
+    readonly variant: _angular_core.InputSignal<ButtonGroupVariant>;
+    /** Button size propagation */
+    readonly size: _angular_core.InputSignal<ButtonSize>;
+    /** Selection behavior: none, single (radio), or multiple (checkbox) */
+    readonly selectionMode: _angular_core.InputSignal<ButtonGroupSelectionMode>;
+    /** Model value for single or multiple selection */
+    readonly value: _angular_core.ModelSignal<any>;
+    /** Apply fully rounded pill shape */
+    readonly pill: _angular_core.InputSignal<boolean>;
+    /** Allow mouse wheel vertical scrolling to translate to horizontal scrolling when overflowing on hover */
+    readonly mouseWheelScroll: _angular_core.InputSignal<boolean>;
+    /** Disable all buttons in group */
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    /** Child items using TalosButtonGroupItemDirective */
+    readonly items: _angular_core.Signal<readonly TalosButtonGroupItemDirective[]>;
+    /** Child directives using TalosButtonDirective */
+    readonly buttons: _angular_core.Signal<readonly TalosButtonDirective[]>;
+    private selectionModel;
+    constructor();
+    private syncChildSelectionStates;
+    onClick(event: MouseEvent): void;
+    onKeydown(event: KeyboardEvent): void;
+    onWheel(event: WheelEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TalosButtonGroupComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TalosButtonGroupComponent, "talos-button-group", ["talosButtonGroup"], { "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "selectionMode": { "alias": "selectionMode"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "pill": { "alias": "pill"; "required": false; "isSignal": true; }; "mouseWheelScroll": { "alias": "mouseWheelScroll"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, ["items", "buttons"], ["*"], true, never>;
+}
+
+declare class TalosButtonGroupModule {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TalosButtonGroupModule, never>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<TalosButtonGroupModule, never, [typeof TalosButtonGroupComponent, typeof TalosButtonGroupItemDirective, typeof TalosButtonDirective], [typeof TalosButtonGroupComponent, typeof TalosButtonGroupItemDirective, typeof TalosButtonDirective]>;
+    static ɵinj: _angular_core.ɵɵInjectorDeclaration<TalosButtonGroupModule>;
+}
+
+export { TalosButtonDirective, TalosButtonGroupComponent, TalosButtonGroupItemDirective, TalosButtonGroupModule };
+export type { ButtonAnimation, ButtonFeedbackState, ButtonGroupOrientation, ButtonGroupSelectionMode, ButtonGroupVariant, ButtonSize, ButtonVariant };
+//# sourceMappingURL=weeehaoooz-talos-ui-button.d.ts.map

package/types/weeehaoooz-talos-ui-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"weeehaoooz-talos-ui-button.d.ts","sources":["../../../projects/talos-ui/button/button/button.directive.ts","../../../projects/talos-ui/button/button-group/button-group-item/button-group-item.directive.ts","../../../projects/talos-ui/button/button-group/button-group/button-group.component.ts","../../../projects/talos-ui/button/button-group/button-group.module.ts"],"mappings":";;;KAEY,aAAa;AACnB,KAAM,UAAU;KACV,eAAe;AACrB,KAAM,mBAAmB;AAE/B,cAgCa,oBAAoB;AAC/B;;sBAGgB,aAAA,CAAA,WAAA,CAAA,aAAA;;mBAGH,aAAA,CAAA,WAAA,CAAA,UAAA;;uBAGI,aAAA,CAAA,WAAA;;wBAGC,aAAA,CAAA,WAAA;;mBAGL,aAAA,CAAA,WAAA;;sBAGG,aAAA,CAAA,WAAA;;uBAGC,aAAA,CAAA,WAAA;;wBAGC,aAAA,CAAA,WAAA,CAAA,eAAA;;uBAGD,aAAA,CAAA,WAAA;;sBAGD,aAAA,CAAA,WAAA;;uBAGC,aAAA,CAAA,WAAA,CAAA,mBAAA;AAEjB,yBAAqB,KAAK;oDApCf,oBAAoB;sDAApB,oBAAoB;AA8ChC;;ACnFD,cASa,6BAA6B;yBACrB,UAAA,CAAA,WAAA;;oBAGL,aAAA,CAAA,WAAA;;uBAGG,aAAA,CAAA,cAAA;;AAGjB;oDAVW,6BAA6B;sDAA7B,6BAA6B;AAazC;;KCTW,sBAAsB;AAC5B,KAAM,kBAAkB;AACxB,KAAM,wBAAwB;AAEpC,cAwBa,yBAAyB;AACpC,yBAA0B,UAAA,CAAA,WAAA;;0BAGN,aAAA,CAAA,WAAA,CAAA,sBAAA;;sBAGJ,aAAA,CAAA,WAAA,CAAA,kBAAA;;mBAGH,aAAA,CAAA,WAAA,CAAA,UAAA;;4BAGS,aAAA,CAAA,WAAA,CAAA,wBAAA;;oBAGR,aAAA,CAAA,WAAA;;mBAGD,aAAA,CAAA,WAAA;;+BAGY,aAAA,CAAA,WAAA;;uBAGR,aAAA,CAAA,WAAA;;oBAGH,aAAA,CAAA,MAAA,UAAA,6BAAA;;sBAGE,aAAA,CAAA,MAAA,UAAA,oBAAA;;;AAqChB;AAWA,mBAAe,UAAU;AA8CzB,qBAAiB,aAAa;AA+B9B,mBAAe,UAAU;oDA5Jd,yBAAyB;sDAAzB,yBAAyB;AA6KrC;;ACnND,cAYa,sBAAsB;oDAAtB,sBAAsB;qDAAtB,sBAAsB,iBAAAA,yBAAA,SAAAC,6BAAA,SAAAC,oBAAA,WAAAF,yBAAA,SAAAC,6BAAA,SAAAC,oBAAA;qDAAtB,sBAAsB;AAAI;;;;","names":["i1.TalosButtonGroupComponent","i2.TalosButtonGroupItemDirective","i3.TalosButtonDirective"]}