@weeehaoooz/talos-ui 0.1.0 → 0.1.2

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "@weeehaoooz/talos-ui",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "A modern, high-performance, and accessible UI component library for Angular 20+",
   "license": "MIT",
   "author": "weeehaoooz",
+  "homepage": "https://talos.weeehaooz.dev",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/weeehaoooz/talos-ui.git",
@@ -45,149 +46,33 @@
       "types": "./types/weeehaoooz-talos-ui.d.ts",
       "default": "./fesm2022/weeehaoooz-talos-ui.mjs"
     },
-    "./button/button": {
-      "types": "./types/weeehaoooz-talos-ui-button-button.d.ts",
-      "default": "./fesm2022/weeehaoooz-talos-ui-button-button.mjs"
-    },
-    "./button/button-group": {
-      "types": "./types/weeehaoooz-talos-ui-button-button-group.d.ts",
-      "default": "./fesm2022/weeehaoooz-talos-ui-button-button-group.mjs"
+    "./button": {
+      "types": "./types/weeehaoooz-talos-ui-button.d.ts",
+      "default": "./fesm2022/weeehaoooz-talos-ui-button.mjs"
     },
     "./core": {
       "types": "./types/weeehaoooz-talos-ui-core.d.ts",
       "default": "./fesm2022/weeehaoooz-talos-ui-core.mjs"
     },
-    "./data-display/badge": {
-      "types": "./types/weeehaoooz-talos-ui-data-display-badge.d.ts",
-      "default": "./fesm2022/weeehaoooz-talos-ui-data-display-badge.mjs"
-    },
-    "./data-display/status-tag": {
-      "types": "./types/weeehaoooz-talos-ui-data-display-status-tag.d.ts",
-      "default": "./fesm2022/weeehaoooz-talos-ui-data-display-status-tag.mjs"
-    },
-    "./data-display/timeline": {
-      "types": "./types/weeehaoooz-talos-ui-data-display-timeline.d.ts",
-      "default": "./fesm2022/weeehaoooz-talos-ui-data-display-timeline.mjs"
-    },
-    "./data-display/trend-indicator": {
-      "types": "./types/weeehaoooz-talos-ui-data-display-trend-indicator.d.ts",
-      "default": "./fesm2022/weeehaoooz-talos-ui-data-display-trend-indicator.mjs"
-    },
-    "./data-viz/category-bar": {
-      "types": "./types/weeehaoooz-talos-ui-data-viz-category-bar.d.ts",
-      "default": "./fesm2022/weeehaoooz-talos-ui-data-viz-category-bar.mjs"
-    },
-    "./data-viz/heatmap": {
-      "types": "./types/weeehaoooz-talos-ui-data-viz-heatmap.d.ts",
-      "default": "./fesm2022/weeehaoooz-talos-ui-data-viz-heatmap.mjs"
-    },
-    "./data-viz/mini-donut": {
-      "types": "./types/weeehaoooz-talos-ui-data-viz-mini-donut.d.ts",
-      "default": "./fesm2022/weeehaoooz-talos-ui-data-viz-mini-donut.mjs"
-    },
-    "./data-viz/mini-gauge": {
-      "types": "./types/weeehaoooz-talos-ui-data-viz-mini-gauge.d.ts",
-      "default": "./fesm2022/weeehaoooz-talos-ui-data-viz-mini-gauge.mjs"
-    },
-    "./data-viz/sparkline": {
-      "types": "./types/weeehaoooz-talos-ui-data-viz-sparkline.d.ts",
-      "default": "./fesm2022/weeehaoooz-talos-ui-data-viz-sparkline.mjs"
-    },
-    "./feedback/alert": {
-      "types": "./types/weeehaoooz-talos-ui-feedback-alert.d.ts",
-      "default": "./fesm2022/weeehaoooz-talos-ui-feedback-alert.mjs"
-    },
-    "./feedback/dialog": {
-      "types": "./types/weeehaoooz-talos-ui-feedback-dialog.d.ts",
-      "default": "./fesm2022/weeehaoooz-talos-ui-feedback-dialog.mjs"
-    },
-    "./feedback/snackbar": {
-      "types": "./types/weeehaoooz-talos-ui-feedback-snackbar.d.ts",
-      "default": "./fesm2022/weeehaoooz-talos-ui-feedback-snackbar.mjs"
-    },
-    "./feedback/tooltip": {
-      "types": "./types/weeehaoooz-talos-ui-feedback-tooltip.d.ts",
-      "default": "./fesm2022/weeehaoooz-talos-ui-feedback-tooltip.mjs"
-    },
-    "./form/affix": {
-      "types": "./types/weeehaoooz-talos-ui-form-affix.d.ts",
-      "default": "./fesm2022/weeehaoooz-talos-ui-form-affix.mjs"
-    },
-    "./form/autocomplete": {
-      "types": "./types/weeehaoooz-talos-ui-form-autocomplete.d.ts",
-      "default": "./fesm2022/weeehaoooz-talos-ui-form-autocomplete.mjs"
-    },
-    "./form/checkbox": {
-      "types": "./types/weeehaoooz-talos-ui-form-checkbox.d.ts",
-      "default": "./fesm2022/weeehaoooz-talos-ui-form-checkbox.mjs"
-    },
-    "./form/chips": {
-      "types": "./types/weeehaoooz-talos-ui-form-chips.d.ts",
-      "default": "./fesm2022/weeehaoooz-talos-ui-form-chips.mjs"
-    },
-    "./form/color-picker": {
-      "types": "./types/weeehaoooz-talos-ui-form-color-picker.d.ts",
-      "default": "./fesm2022/weeehaoooz-talos-ui-form-color-picker.mjs"
-    },
-    "./form/date-picker": {
-      "types": "./types/weeehaoooz-talos-ui-form-date-picker.d.ts",
-      "default": "./fesm2022/weeehaoooz-talos-ui-form-date-picker.mjs"
-    },
-    "./form/date-range-picker": {
-      "types": "./types/weeehaoooz-talos-ui-form-date-range-picker.d.ts",
-      "default": "./fesm2022/weeehaoooz-talos-ui-form-date-range-picker.mjs"
-    },
-    "./form/date-time-picker": {
-      "types": "./types/weeehaoooz-talos-ui-form-date-time-picker.d.ts",
-      "default": "./fesm2022/weeehaoooz-talos-ui-form-date-time-picker.mjs"
-    },
-    "./form/date-time-range-picker": {
-      "types": "./types/weeehaoooz-talos-ui-form-date-time-range-picker.d.ts",
-      "default": "./fesm2022/weeehaoooz-talos-ui-form-date-time-range-picker.mjs"
-    },
-    "./form/drop-zone": {
-      "types": "./types/weeehaoooz-talos-ui-form-drop-zone.d.ts",
-      "default": "./fesm2022/weeehaoooz-talos-ui-form-drop-zone.mjs"
-    },
-    "./form/form-field": {
-      "types": "./types/weeehaoooz-talos-ui-form-form-field.d.ts",
-      "default": "./fesm2022/weeehaoooz-talos-ui-form-form-field.mjs"
-    },
-    "./form/input": {
-      "types": "./types/weeehaoooz-talos-ui-form-input.d.ts",
-      "default": "./fesm2022/weeehaoooz-talos-ui-form-input.mjs"
-    },
-    "./form/otp": {
-      "types": "./types/weeehaoooz-talos-ui-form-otp.d.ts",
-      "default": "./fesm2022/weeehaoooz-talos-ui-form-otp.mjs"
-    },
-    "./form/password-input": {
-      "types": "./types/weeehaoooz-talos-ui-form-password-input.d.ts",
-      "default": "./fesm2022/weeehaoooz-talos-ui-form-password-input.mjs"
-    },
-    "./form/radio": {
-      "types": "./types/weeehaoooz-talos-ui-form-radio.d.ts",
-      "default": "./fesm2022/weeehaoooz-talos-ui-form-radio.mjs"
-    },
-    "./form/range-input": {
-      "types": "./types/weeehaoooz-talos-ui-form-range-input.d.ts",
-      "default": "./fesm2022/weeehaoooz-talos-ui-form-range-input.mjs"
+    "./data-display": {
+      "types": "./types/weeehaoooz-talos-ui-data-display.d.ts",
+      "default": "./fesm2022/weeehaoooz-talos-ui-data-display.mjs"
     },
-    "./form/rating": {
-      "types": "./types/weeehaoooz-talos-ui-form-rating.d.ts",
-      "default": "./fesm2022/weeehaoooz-talos-ui-form-rating.mjs"
+    "./data-viz": {
+      "types": "./types/weeehaoooz-talos-ui-data-viz.d.ts",
+      "default": "./fesm2022/weeehaoooz-talos-ui-data-viz.mjs"
     },
-    "./form/select-input": {
-      "types": "./types/weeehaoooz-talos-ui-form-select-input.d.ts",
-      "default": "./fesm2022/weeehaoooz-talos-ui-form-select-input.mjs"
+    "./dropdown": {
+      "types": "./types/weeehaoooz-talos-ui-dropdown.d.ts",
+      "default": "./fesm2022/weeehaoooz-talos-ui-dropdown.mjs"
     },
-    "./form/slide-toggle": {
-      "types": "./types/weeehaoooz-talos-ui-form-slide-toggle.d.ts",
-      "default": "./fesm2022/weeehaoooz-talos-ui-form-slide-toggle.mjs"
+    "./feedback": {
+      "types": "./types/weeehaoooz-talos-ui-feedback.d.ts",
+      "default": "./fesm2022/weeehaoooz-talos-ui-feedback.mjs"
     },
-    "./form/transfer-list": {
-      "types": "./types/weeehaoooz-talos-ui-form-transfer-list.d.ts",
-      "default": "./fesm2022/weeehaoooz-talos-ui-form-transfer-list.mjs"
+    "./form": {
+      "types": "./types/weeehaoooz-talos-ui-form.d.ts",
+      "default": "./fesm2022/weeehaoooz-talos-ui-form.mjs"
     },
     "./layout": {
       "types": "./types/weeehaoooz-talos-ui-layout.d.ts",

package/styles/_breadcrumb.scss

@@ -0,0 +1,16 @@
+/* Talos UI Breadcrumb Styles & Tokens */
+
+:root {
+  --talos-breadcrumb-text-color: var(--talos-text-color, #0f172a);
+  --talos-breadcrumb-link-color: var(--talos-text-muted, #64748b);
+  --talos-breadcrumb-link-hover: var(--talos-primary-color, #2563eb);
+  --talos-breadcrumb-separator-color: var(--talos-text-muted, #94a3b8);
+  --talos-breadcrumb-bg-contained: var(--talos-card-bg, #ffffff);
+  --talos-breadcrumb-border-contained: var(--talos-border-color, #e2e8f0);
+  --talos-breadcrumb-bg-subtle: var(--talos-bg-subtle, #f8fafc);
+}
+
+.talos-breadcrumb {
+  display: block;
+  box-sizing: border-box;
+}

package/styles/_button-group.scss

@@ -4,6 +4,22 @@
   display: inline-flex;
   position: relative;
   vertical-align: middle;
+  max-width: 100%;
+  min-width: 0;
+  box-sizing: border-box;
+
+  /* Group item anti-crush & alignment rules */
+  >.talos-btn,
+  >button,
+  >a,
+  >.talos-button-group-item {
+    flex-shrink: 0;
+    white-space: nowrap;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+  }
 
   /* Sizing Controls for Group Items */
   &.talos-button-group-sm {
@@ -61,6 +77,18 @@
   &.talos-button-group-horizontal {
     flex-direction: row;
     align-items: center;
+    max-width: 100%;
+
+    &.talos-button-group-segmented,
+    &.talos-button-group-pill {
+      overflow-x: auto;
+      -webkit-overflow-scrolling: touch;
+      scrollbar-width: none;
+
+      &::-webkit-scrollbar {
+        display: none;
+      }
+    }
 
     /* Attached Border Overlaps & Radius rules */
     &.talos-button-group-attached,
@@ -226,7 +254,8 @@
     &:focus,
     &:focus-visible,
     &.is-active,
-    &.is-selected {
+    &.is-selected,
+    &.talos-dropdown-open {
       z-index: 2;
     }
   }
@@ -238,6 +267,14 @@
     padding: 0.25rem;
     border-radius: 0.5rem;
     gap: 0.25rem;
+    max-width: 100%;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
 
     &.talos-button-group-pill {
       border-radius: 9999px;
@@ -343,8 +380,9 @@
       }
     }
 
-    /* Subtle Segmented Active Variant */
-    &.talos-button-group-subtle {
+    /* Subtle & Glow Segmented Active Variants */
+    &.talos-button-group-subtle,
+    &.talos-button-group-glow {
 
       >.talos-btn,
       >button,
@@ -355,12 +393,34 @@
         &.is-selected {
           background-color: var(--talos-card-bg, #ffffff);
           color: var(--talos-primary-color, #2563eb);
-          font-weight: 700;
-          border-color: rgba(37, 99, 235, 0.15);
-          box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
+          font-weight: 600;
+          border-color: var(--talos-border-color, rgba(0, 0, 0, 0.08));
+          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
+
+          &.talos-btn-primary,
+          &.talos-btn-secondary,
+          &.talos-btn-outline,
+          &.talos-btn-ghost,
+          &.talos-btn-subtle {
+            background-color: var(--talos-card-bg, #ffffff);
+            color: var(--talos-primary-color, #2563eb);
+            border-color: var(--talos-border-color, rgba(0, 0, 0, 0.08));
+            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
+
+            svg {
+              stroke: var(--talos-primary-color, #2563eb);
+              color: var(--talos-primary-color, #2563eb);
+            }
+          }
 
           &:hover:not(:disabled):not(.is-disabled) {
-            background-color: var(--talos-primary-light, #eff6ff);
+            background-color: var(--talos-card-bg, #ffffff);
+            color: var(--talos-primary-hover, #1d4ed8);
+
+            svg {
+              stroke: var(--talos-primary-hover, #1d4ed8);
+              color: var(--talos-primary-hover, #1d4ed8);
+            }
           }
 
           svg {
@@ -370,6 +430,31 @@
         }
       }
     }
+
+    /* Glow Variant - active item highlights with ambient border/glow */
+    &.talos-button-group-glow {
+
+      >.talos-btn,
+      >button,
+      >a,
+      >.talos-button-group-item {
+
+        &.is-active,
+        &.is-selected {
+          border-color: rgba(var(--talos-primary-rgb, 37, 99, 235), 0.35);
+          box-shadow: 0 0 12px rgba(var(--talos-primary-rgb, 37, 99, 235), 0.18), 0 1px 3px rgba(0, 0, 0, 0.08);
+
+          &.talos-btn-primary,
+          &.talos-btn-secondary,
+          &.talos-btn-outline,
+          &.talos-btn-ghost,
+          &.talos-btn-subtle {
+            border-color: rgba(var(--talos-primary-rgb, 37, 99, 235), 0.35);
+            box-shadow: 0 0 12px rgba(var(--talos-primary-rgb, 37, 99, 235), 0.18), 0 1px 3px rgba(0, 0, 0, 0.08);
+          }
+        }
+      }
+    }
   }
 
   /* Active & Hover Selection Styling for Attached/Outline Button Groups */
@@ -446,6 +531,70 @@
 }
 
 [data-theme='dark'] {
+  .talos-button-group.talos-button-group-segmented {
+    background-color: rgba(15, 23, 42, 0.7);
+    border-color: var(--talos-border-color, rgba(255, 255, 255, 0.1));
+
+    &.talos-button-group-subtle,
+    &.talos-button-group-glow {
+      >.talos-btn,
+      >button,
+      >a,
+      >.talos-button-group-item {
+        &.is-active,
+        &.is-selected {
+          background-color: var(--talos-card-bg, #1e293b);
+          border-color: rgba(255, 255, 255, 0.08);
+          color: var(--talos-primary-color, #38bdf8);
+          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
+
+          &.talos-btn-primary,
+          &.talos-btn-secondary,
+          &.talos-btn-outline,
+          &.talos-btn-ghost,
+          &.talos-btn-subtle {
+            background-color: var(--talos-card-bg, #1e293b);
+            border-color: rgba(255, 255, 255, 0.08);
+            color: var(--talos-primary-color, #38bdf8);
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
+
+            svg {
+              stroke: currentColor;
+              color: currentColor;
+            }
+          }
+
+          svg {
+            stroke: currentColor;
+            color: currentColor;
+          }
+        }
+      }
+    }
+
+    &.talos-button-group-glow {
+      >.talos-btn,
+      >button,
+      >a,
+      >.talos-button-group-item {
+        &.is-active,
+        &.is-selected {
+          border-color: rgba(var(--talos-primary-rgb, 56, 189, 248), 0.4);
+          box-shadow: 0 0 16px rgba(var(--talos-primary-rgb, 56, 189, 248), 0.22), 0 2px 8px rgba(0, 0, 0, 0.35);
+
+          &.talos-btn-primary,
+          &.talos-btn-secondary,
+          &.talos-btn-outline,
+          &.talos-btn-ghost,
+          &.talos-btn-subtle {
+            border-color: rgba(var(--talos-primary-rgb, 56, 189, 248), 0.4);
+            box-shadow: 0 0 16px rgba(var(--talos-primary-rgb, 56, 189, 248), 0.22), 0 2px 8px rgba(0, 0, 0, 0.35);
+          }
+        }
+      }
+    }
+  }
+
   .talos-btn-badge,
   .talos-btn .talos-btn-badge,
   .talos-btn > .talos-badge:not(.talos-badge-host > .talos-badge) {

package/styles/_buttons.scss

@@ -115,6 +115,55 @@
       flex-shrink: 0;
     }
   }
+  /* Dropdown Trigger Chevron & Justification */
+  .talos-dropdown-chevron-right,
+  .talos-chevron-end,
+  .talos-btn-chevron-end {
+    margin-left: auto;
+    transition: transform var(--talos-transition, 0.2s ease);
+  }
+
+  svg[lucideChevronDown],
+  .lucide-chevron-down {
+    transition: transform var(--talos-transition, 0.2s ease);
+  }
+
+  &.talos-btn-justify-between,
+  &.talos-btn-select-trigger {
+    justify-content: space-between;
+  }
+
+  /* When the dropdown associated with this trigger is open */
+  &.talos-dropdown-open {
+    .talos-dropdown-chevron-right,
+    .talos-chevron-end,
+    .talos-btn-chevron-end,
+    svg[lucideChevronDown],
+    .lucide-chevron-down {
+      transform: rotate(180deg);
+    }
+
+    &.talos-btn-primary {
+      background-color: var(--talos-btn-primary-active, var(--talos-primary-active, #1e40af));
+    }
+
+    &.talos-btn-secondary {
+      background-color: var(--talos-btn-secondary-hover, #475569);
+      color: var(--talos-btn-secondary-text, #ffffff);
+    }
+
+    &.talos-btn-outline {
+      background-color: var(--talos-btn-outline-hover-bg, var(--talos-bg-color, #f8fafc));
+      border-color: var(--talos-btn-outline-hover-border, var(--talos-border-hover, #64748b));
+      color: var(--talos-btn-outline-hover-text, var(--talos-text-color, #0f172a));
+    }
+
+    &.talos-btn-ghost,
+    &.talos-btn-subtle {
+      background-color: var(--talos-btn-ghost-hover-bg, var(--talos-bg-subtle, #f1f5f9));
+      color: var(--talos-btn-ghost-hover-text, var(--talos-text-color, #0f172a));
+    }
+  }
 }
 
 /* Variants */
@@ -141,10 +190,12 @@
 
   &:hover:not(:disabled):not(.is-disabled):not(.is-loading) {
     background-color: var(--talos-btn-secondary-hover, #334155);
+    color: var(--talos-btn-secondary-text, #ffffff);
   }
 
   &:active:not(:disabled):not(.is-disabled):not(.is-loading) {
     background-color: var(--talos-btn-secondary-active, #1e293b);
+    color: var(--talos-btn-secondary-text, #ffffff);
   }
 }
 
@@ -233,6 +284,15 @@
 }
 
 /* Sizes */
+.talos-btn-xs,
+.btn-xs {
+  height: var(--talos-btn-height-xs, 1.625rem);
+  padding: 0 var(--talos-btn-padding-x-xs, 0.5rem);
+  font-size: var(--talos-btn-font-size-xs, 0.6875rem);
+  gap: 0.35rem;
+  border-radius: var(--talos-btn-border-radius-xs, 0.25rem);
+}
+
 .talos-btn-sm,
 .btn-sm {
   height: var(--talos-btn-height-sm, 2rem);
@@ -254,6 +314,62 @@
   font-size: var(--talos-btn-font-size-lg, 0.875rem);
 }
 
+/* Icon Sizing inside Buttons */
+.talos-btn,
+.btn {
+  svg,
+  [lucideIcon],
+  i,
+  .lucide {
+    display: block;
+    flex-shrink: 0;
+  }
+
+  &.talos-btn-xs,
+  &.btn-xs {
+    svg,
+    [lucideIcon],
+    i,
+    .lucide {
+      width: 13px;
+      height: 13px;
+    }
+  }
+
+  &.talos-btn-sm,
+  &.btn-sm {
+    svg,
+    [lucideIcon],
+    i,
+    .lucide {
+      width: 14px;
+      height: 14px;
+    }
+  }
+
+  &.talos-btn-md,
+  &.btn-md {
+    svg,
+    [lucideIcon],
+    i,
+    .lucide {
+      width: 16px;
+      height: 16px;
+    }
+  }
+
+  &.talos-btn-lg,
+  &.btn-lg {
+    svg,
+    [lucideIcon],
+    i,
+    .lucide {
+      width: 18px;
+      height: 18px;
+    }
+  }
+}
+
 .talos-btn-icon,
 .btn-icon {
   padding: 0 !important;
@@ -263,6 +379,13 @@
   justify-content: center;
   flex-shrink: 0;
 
+  &.talos-btn-xs,
+  &.btn-xs {
+    width: var(--talos-btn-height-xs, 1.625rem);
+    height: var(--talos-btn-height-xs, 1.625rem);
+    min-width: var(--talos-btn-height-xs, 1.625rem);
+  }
+
   &.talos-btn-sm,
   &.btn-sm {
     width: var(--talos-btn-height-sm, 2rem);
@@ -302,6 +425,7 @@
   from {
     transform: rotate(0deg);
   }
+
   to {
     transform: rotate(360deg);
   }
@@ -311,9 +435,11 @@
   0% {
     transform: rotate(0deg) scale(0.92);
   }
+
   60% {
-    transform: rotate(380deg) scale(1.08);
+    transform: rotate(380deg) scale(1.0);
   }
+
   100% {
     transform: rotate(360deg) scale(1);
   }
@@ -323,31 +449,42 @@
   0% {
     transform: scale(0.85);
   }
+
   50% {
     transform: scale(1.18);
   }
+
   100% {
     transform: scale(1);
   }
 }
 
 @keyframes talos-shake {
-  0%, 100% {
+
+  0%,
+  100% {
     transform: translateX(0);
   }
-  20%, 60% {
+
+  20%,
+  60% {
     transform: translateX(-3px);
   }
-  40%, 80% {
+
+  40%,
+  80% {
     transform: translateX(3px);
   }
 }
 
 @keyframes talos-pulse {
-  0%, 100% {
+
+  0%,
+  100% {
     transform: scale(1);
     opacity: 1;
   }
+
   50% {
     transform: scale(1.06);
     opacity: 0.88;
@@ -355,12 +492,16 @@
 }
 
 @keyframes talos-bounce {
-  0%, 100% {
+
+  0%,
+  100% {
     transform: translateY(0);
   }
+
   40% {
     transform: translateY(-4px);
   }
+
   60% {
     transform: translateY(-2px);
   }
@@ -370,6 +511,7 @@
 .btn,
 .talos-affix-btn,
 .talos-affix-element {
+
   /* Continuous spin on icon inside button/affix */
   &.talos-anim-spin svg,
   &.talos-anim-spin [lucideIcon],
@@ -424,7 +566,10 @@
     color: var(--talos-success-color, #10b981) !important;
     animation: talos-pop 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 
-    svg, [lucideIcon], i, .lucide {
+    svg,
+    [lucideIcon],
+    i,
+    .lucide {
       color: var(--talos-success-color, #10b981) !important;
     }
   }
@@ -435,7 +580,10 @@
     color: var(--talos-error-color, #ef4444) !important;
     animation: talos-shake 0.4s ease-in-out;
 
-    svg, [lucideIcon], i, .lucide {
+    svg,
+    [lucideIcon],
+    i,
+    .lucide {
       color: var(--talos-error-color, #ef4444) !important;
     }
   }