@weeehaoooz/talos-ui 0.1.0 → 0.1.2

package/styles/_dropdown.scss

@@ -0,0 +1,438 @@
+/* ==========================================================================
+   Talos UI Dropdown & Cascading Sub-Menu - Design System Tokens & Theming
+   ========================================================================== */
+
+@keyframes talos-dropdown-enter {
+  0% {
+    opacity: 0;
+    transform: scale(0.96) translateY(-4px);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+@keyframes talos-submenu-enter {
+  0% {
+    opacity: 0;
+    transform: scale(0.96) translateX(-4px);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1) translateX(0);
+  }
+}
+
+/* Base CDK Overlay Pane Container for Dropdowns & Sub-menus */
+.cdk-overlay-pane:has(.talos-dropdown-panel) {
+  z-index: 1050;
+  pointer-events: auto;
+}
+
+/* Floating Dropdown Panel Container */
+.talos-dropdown-panel {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  background-color: var(--talos-dropdown-bg, var(--talos-card-bg, var(--talos-bg-surface, #ffffff)));
+  border: 1px solid var(--talos-dropdown-border, var(--talos-border-default, #cbd5e1));
+  border-radius: var(--talos-dropdown-radius, var(--talos-radius-md, 0.375rem));
+  box-shadow: var(--talos-dropdown-shadow, var(--talos-shadow-dropdown, 0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04)));
+  padding: var(--talos-dropdown-padding, 0.25rem);
+  outline: none;
+  overflow: visible;
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  animation: talos-dropdown-enter 0.16s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+  user-select: none;
+}
+
+/* Dropdown Section Header */
+.talos-dropdown-header {
+  display: flex;
+  align-items: center;
+  padding: 0.375rem 0.5rem 0.1875rem;
+  font-family: var(--talos-font-sans, inherit);
+  font-size: var(--talos-font-size-2xs, 0.6875rem);
+  font-weight: var(--talos-font-weight-bold, 700);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--talos-text-muted, #64748b);
+  box-sizing: border-box;
+}
+
+/* Dropdown Item Host */
+.talos-dropdown-item-host {
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+
+  /* Button / Link Base */
+  .talos-dropdown-item-btn,
+  .talos-dropdown-item-link {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    min-height: var(--talos-dropdown-item-height, 1.875rem);
+    padding: 0.25rem 0.5rem;
+    border-radius: var(--talos-dropdown-item-radius, var(--talos-radius-sm, 0.25rem));
+    border: 1px solid transparent;
+    background: transparent;
+    color: var(--talos-text-primary, #0f172a);
+    font-family: var(--talos-font-sans, inherit);
+    font-size: var(--talos-font-size-sm, 0.8125rem);
+    font-weight: var(--talos-font-weight-medium, 500);
+    text-align: left;
+    text-decoration: none;
+    line-height: var(--talos-line-height-tight, 1.25);
+    cursor: pointer;
+    box-sizing: border-box;
+    transition: background-color var(--talos-transition, 0.15s ease),
+      color var(--talos-transition, 0.15s ease),
+      border-color var(--talos-transition, 0.15s ease);
+    gap: 0.4375rem;
+
+    &:hover,
+    &:focus-visible {
+      background-color: var(--talos-dropdown-hover-bg, var(--talos-bg-subtle, #f1f5f9));
+      color: var(--talos-text-primary, #0f172a);
+      outline: none;
+    }
+
+    &:active {
+      background-color: var(--talos-dropdown-active-bg, var(--talos-border-subtle, #e2e8f0));
+    }
+  }
+
+  /* Submenu is open active state on parent item */
+  &.is-submenu-open {
+    .talos-dropdown-item-btn,
+    .talos-dropdown-item-link {
+      background-color: var(--talos-dropdown-hover-bg, var(--talos-bg-subtle, #f1f5f9));
+      color: var(--talos-primary, #2563eb);
+
+      .talos-dropdown-item-submenu-arrow {
+        color: var(--talos-primary, #2563eb);
+        transform: translateX(1px);
+      }
+    }
+  }
+
+  /* Checkmark Container */
+  .talos-dropdown-item-check {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 0.9375rem;
+    height: 0.9375rem;
+    margin-right: -0.125rem;
+    flex-shrink: 0;
+    color: var(--talos-primary, #2563eb);
+
+    svg,
+    lucide-icon,
+    > * {
+      width: 0.8125rem !important;
+      height: 0.8125rem !important;
+      display: block;
+      stroke-width: 2.25px;
+    }
+  }
+
+  /* Prefix Icon */
+  .talos-dropdown-item-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: 0.9375rem;
+    height: 0.9375rem;
+    color: var(--talos-text-muted, #64748b);
+    transition: color var(--talos-transition, 0.15s ease);
+
+    svg,
+    lucide-icon,
+    > * {
+      width: 0.9375rem !important;
+      height: 0.9375rem !important;
+      max-width: 0.9375rem !important;
+      max-height: 0.9375rem !important;
+      display: block;
+      flex-shrink: 0;
+      stroke-width: 1.85px;
+    }
+  }
+
+  .talos-dropdown-item-btn:hover .talos-dropdown-item-icon,
+  .talos-dropdown-item-link:hover .talos-dropdown-item-icon {
+    color: var(--talos-text-primary, #0f172a);
+  }
+
+  /* Main Label */
+  .talos-dropdown-item-label {
+    flex: 1;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  /* Badges */
+  .talos-dropdown-item-badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: var(--talos-font-size-2xs, 0.6875rem);
+    font-weight: var(--talos-font-weight-semibold, 600);
+    padding: 0.0625rem 0.375rem;
+    border-radius: var(--talos-radius-full, 9999px);
+    line-height: 1.2;
+    flex-shrink: 0;
+
+    &.badge-primary {
+      background-color: var(--talos-primary-subtle-bg, #eff6ff);
+      color: var(--talos-primary, #2563eb);
+    }
+    &.badge-secondary {
+      background-color: var(--talos-neutral-subtle-bg, #f8fafc);
+      color: var(--talos-neutral-text, #475569);
+    }
+    &.badge-success {
+      background-color: var(--talos-success-subtle-bg, #f0fdf4);
+      color: var(--talos-success, #16a34a);
+    }
+    &.badge-info {
+      background-color: var(--talos-info-subtle-bg, #f0f9ff);
+      color: var(--talos-info, #0284c7);
+    }
+    &.badge-warning {
+      background-color: var(--talos-warning-subtle-bg, #fffbeb);
+      color: var(--talos-warning, #d97706);
+    }
+    &.badge-danger {
+      background-color: var(--talos-danger-subtle-bg, #fef2f2);
+      color: var(--talos-danger, #ef4444);
+    }
+    &.badge-subtle {
+      background-color: var(--talos-bg-subtle, #f1f5f9);
+      color: var(--talos-text-muted, #64748b);
+    }
+  }
+
+  /* Keyboard Shortcut */
+  .talos-dropdown-item-shortcut {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    margin-left: auto;
+    font-family: var(--talos-font-mono, monospace);
+    font-size: var(--talos-font-size-2xs, 0.6875rem);
+    font-weight: var(--talos-font-weight-medium, 500);
+    color: var(--talos-text-muted, #64748b);
+    background-color: var(--talos-bg-subtle, rgba(0, 0, 0, 0.04));
+    border: 1px solid var(--talos-border-subtle, rgba(0, 0, 0, 0.06));
+    border-radius: var(--talos-radius-xs, 0.125rem);
+    padding: 0.0625rem 0.25rem;
+    line-height: 1;
+    letter-spacing: 0.02em;
+  }
+
+  /* Sub-menu Chevron Arrow */
+  .talos-dropdown-item-submenu-arrow {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    margin-left: auto;
+    width: 0.8125rem;
+    height: 0.8125rem;
+    color: var(--talos-text-muted, #64748b);
+    transition: transform var(--talos-transition, 0.15s ease), color var(--talos-transition, 0.15s ease);
+
+    svg,
+    lucide-icon,
+    > * {
+      width: 0.75rem !important;
+      height: 0.75rem !important;
+      display: block;
+      stroke-width: 2px;
+    }
+  }
+
+  .talos-dropdown-item-btn:hover .talos-dropdown-item-submenu-arrow,
+  .talos-dropdown-item-link:hover .talos-dropdown-item-submenu-arrow {
+    color: var(--talos-text-primary, #0f172a);
+    transform: translateX(1px);
+  }
+
+  /* Danger / Destructive Variant */
+  &.is-danger {
+    .talos-dropdown-item-btn,
+    .talos-dropdown-item-link {
+      color: var(--talos-danger, #ef4444);
+
+      .talos-dropdown-item-icon {
+        color: var(--talos-danger, #ef4444);
+      }
+
+      &:hover,
+      &:focus-visible {
+        background-color: var(--talos-danger-subtle-bg, #fef2f2);
+        color: var(--talos-danger-hover, #dc2626);
+
+        .talos-dropdown-item-icon {
+          color: var(--talos-danger-hover, #dc2626);
+        }
+      }
+
+      &:active {
+        background-color: var(--talos-danger-subtle-bg-hover, #fee2e2);
+      }
+    }
+  }
+
+  /* Disabled State */
+  &.is-disabled {
+    pointer-events: none;
+    opacity: 0.45;
+
+    .talos-dropdown-item-btn,
+    .talos-dropdown-item-link {
+      cursor: not-allowed;
+      color: var(--talos-text-muted, #64748b);
+    }
+  }
+}
+
+/* Hairline Divider */
+.talos-dropdown-divider {
+  display: block;
+  width: 100%;
+  height: 1px;
+  margin: 0.25rem 0;
+  background-color: var(--talos-dropdown-border, var(--talos-border-subtle, #f1f5f9));
+  border: none;
+  box-sizing: border-box;
+}
+
+/* Dark Mode Token Enforcement Layer */
+:root[data-theme="dark"],
+:root.dark,
+[data-theme="dark"],
+[data-mode="dark"],
+.dark,
+.dark-theme {
+  .talos-dropdown-panel {
+    background-color: var(--talos-dropdown-bg, var(--talos-card-bg, #0f172a));
+    border-color: var(--talos-dropdown-border, var(--talos-border-default, rgba(255, 255, 255, 0.1)));
+    box-shadow: 0 20px 40px -8px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.05);
+  }
+
+  .talos-dropdown-header {
+    color: var(--talos-text-muted, #94a3b8);
+  }
+
+  .talos-dropdown-item-host {
+    .talos-dropdown-item-btn,
+    .talos-dropdown-item-link {
+      color: var(--talos-text-primary, #f8fafc);
+
+      &:hover,
+      &:focus-visible {
+        background-color: var(--talos-dropdown-hover-bg, var(--talos-bg-subtle, rgba(255, 255, 255, 0.08)));
+        color: #ffffff;
+      }
+
+      &:active {
+        background-color: var(--talos-neutral-subtle-bg-hover, rgba(255, 255, 255, 0.12));
+      }
+    }
+
+    &.is-submenu-open {
+      .talos-dropdown-item-btn,
+      .talos-dropdown-item-link {
+        background-color: var(--talos-dropdown-hover-bg, var(--talos-bg-subtle, rgba(255, 255, 255, 0.08)));
+        color: var(--talos-primary, #3b82f6);
+
+        .talos-dropdown-item-submenu-arrow {
+          color: var(--talos-primary, #3b82f6);
+        }
+      }
+    }
+
+    .talos-dropdown-item-icon {
+      color: var(--talos-text-muted, #94a3b8);
+    }
+
+    .talos-dropdown-item-btn:hover .talos-dropdown-item-icon,
+    .talos-dropdown-item-link:hover .talos-dropdown-item-icon {
+      color: #ffffff;
+    }
+
+    .talos-dropdown-item-submenu-arrow {
+      color: var(--talos-text-muted, #94a3b8);
+    }
+
+    .talos-dropdown-item-btn:hover .talos-dropdown-item-submenu-arrow,
+    .talos-dropdown-item-link:hover .talos-dropdown-item-submenu-arrow {
+      color: #ffffff;
+    }
+
+    .talos-dropdown-item-shortcut {
+      color: var(--talos-text-muted, #94a3b8);
+      background-color: var(--talos-bg-subtle, rgba(255, 255, 255, 0.08));
+      border-color: rgba(255, 255, 255, 0.06);
+    }
+
+    .talos-dropdown-item-badge {
+      &.badge-primary {
+        background-color: var(--talos-primary-subtle-bg, rgba(59, 130, 246, 0.2));
+        color: var(--talos-primary-text, #93c5fd);
+      }
+      &.badge-secondary {
+        background-color: var(--talos-neutral-subtle-bg, rgba(148, 163, 184, 0.15));
+        color: var(--talos-neutral-text, #e2e8f0);
+      }
+      &.badge-success {
+        background-color: var(--talos-success-subtle-bg, rgba(22, 163, 74, 0.2));
+        color: #86efac;
+      }
+      &.badge-warning {
+        background-color: var(--talos-warning-subtle-bg, rgba(217, 119, 6, 0.2));
+        color: #fde68a;
+      }
+      &.badge-danger {
+        background-color: var(--talos-danger-subtle-bg, rgba(239, 68, 68, 0.2));
+        color: #fca5a5;
+      }
+      &.badge-subtle {
+        background-color: var(--talos-bg-subtle, rgba(255, 255, 255, 0.08));
+        color: var(--talos-text-muted, #94a3b8);
+      }
+    }
+
+    &.is-danger {
+      .talos-dropdown-item-btn,
+      .talos-dropdown-item-link {
+        color: var(--talos-danger, #ef4444);
+
+        .talos-dropdown-item-icon {
+          color: var(--talos-danger, #ef4444);
+        }
+
+        &:hover,
+        &:focus-visible {
+          background-color: var(--talos-danger-subtle-bg, rgba(239, 68, 68, 0.16));
+          color: #fca5a5;
+
+          .talos-dropdown-item-icon {
+            color: #fca5a5;
+          }
+        }
+      }
+    }
+  }
+
+  .talos-dropdown-divider {
+    background-color: var(--talos-dropdown-border, var(--talos-border-subtle, rgba(255, 255, 255, 0.08)));
+  }
+}

package/styles/_form-controls.scss

@@ -194,6 +194,19 @@ textarea[talosTextarea] {
   resize: vertical;
 }
 
+/* Number Input Normalization (Suppress tiny browser spinners in favor of Talos steppers) */
+input[type="number"].form-control,
+input[type="number"].talos-input,
+input[type="number"][talosInput] {
+  -moz-appearance: textfield;
+
+  &::-webkit-outer-spin-button,
+  &::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+}
+
 /* Sizing Variations for Inputs & Textareas */
 .form-control-sm,
 .input-sm {

package/styles/_progress-bar.scss

@@ -0,0 +1,43 @@
+/* ==========================================================================
+   Talos UI Progress Bar Styles & Tokens
+   ========================================================================== */
+
+:root {
+  --talos-progress-height-xs: 2px;
+  --talos-progress-height-sm: 4px;
+  --talos-progress-height-md: 8px;
+  --talos-progress-height-lg: 12px;
+  --talos-progress-height-xl: 18px;
+
+  --talos-progress-track-bg: #e2e8f0;
+  --talos-progress-fill-bg: var(--talos-primary, #2563eb);
+  --talos-progress-buffer-bg: #93c5fd;
+
+  --talos-progress-buffer-primary: #93c5fd;
+  --talos-progress-buffer-secondary: #94a3b8;
+  --talos-progress-buffer-neutral: #94a3b8;
+  --talos-progress-buffer-success: #86efac;
+  --talos-progress-buffer-warning: #fcd34d;
+  --talos-progress-buffer-danger: #fca5a5;
+  --talos-progress-buffer-info: #7dd3fc;
+  --talos-progress-buffer-gradient: #c4b5fd;
+}
+
+[data-theme='dark'],
+[data-mode='dark'],
+.dark,
+.dark-theme {
+  --talos-progress-track-bg: rgba(255, 255, 255, 0.1);
+  --talos-progress-fill-bg: var(--talos-primary, #3b82f6);
+  --talos-progress-buffer-bg: rgba(59, 130, 246, 0.35);
+
+  --talos-progress-buffer-primary: rgba(59, 130, 246, 0.35);
+  --talos-progress-buffer-secondary: rgba(148, 163, 184, 0.25);
+  --talos-progress-buffer-neutral: rgba(148, 163, 184, 0.25);
+  --talos-progress-buffer-success: rgba(34, 197, 94, 0.35);
+  --talos-progress-buffer-warning: rgba(245, 158, 11, 0.35);
+  --talos-progress-buffer-danger: rgba(239, 68, 68, 0.35);
+  --talos-progress-buffer-info: rgba(14, 165, 233, 0.35);
+  --talos-progress-buffer-gradient: rgba(99, 102, 241, 0.35);
+}
+

package/styles/_skeleton.scss

@@ -0,0 +1,176 @@
+/* ==========================================================================
+   Talos UI Skeleton Loader Styles & Directives
+   ========================================================================== */
+
+@keyframes talos-skeleton-shimmer {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+
+@keyframes talos-skeleton-shimmer-slide {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+@keyframes talos-skeleton-pulse {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.45;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+// ── Global Directive Attached Styles ([talosSkeleton]) ──
+.talos-skeleton-attached.talos-skeleton-active {
+  position: relative !important;
+  pointer-events: none !important;
+  user-select: none !important;
+  cursor: default !important;
+  color: transparent !important;
+  background-color: var(--talos-border-subtle, #e2e8f0) !important;
+  border-color: transparent !important;
+  box-shadow: none !important;
+  overflow: hidden !important;
+
+  // Mask all child elements (SVGs, icons, nested spans, badges)
+  * {
+    visibility: hidden !important;
+  }
+
+  // Handle replaced elements (img, video) so the image disappears and the skeleton shines
+  &[src],
+  &:is(img),
+  &:is(video) {
+    object-position: -99999px -99999px !important;
+    background: linear-gradient(
+      90deg,
+      #e2e8f0 0%,
+      #ffffff 50%,
+      #e2e8f0 100%
+    ) !important;
+    background-size: 200% 100% !important;
+    animation: talos-skeleton-shimmer 1.5s infinite linear !important;
+  }
+
+  // Shapes
+  &.talos-skeleton--circular {
+    border-radius: 50% !important;
+    aspect-ratio: 1 / 1 !important;
+  }
+
+  &.talos-skeleton--rounded {
+    border-radius: var(--talos-radius-md, 0.375rem) !important;
+  }
+
+  &.talos-skeleton--rectangular {
+    border-radius: var(--talos-radius-xs, 0.125rem) !important;
+  }
+
+  // Shimmer Wave Animation
+  &.talos-skeleton--shimmer {
+    background: linear-gradient(
+      90deg,
+      #e2e8f0 0%,
+      #f8fafc 50%,
+      #e2e8f0 100%
+    ) !important;
+    background-size: 200% 100% !important;
+    animation: talos-skeleton-shimmer 1.5s infinite linear !important;
+
+    // Glowing beam slide overlay across all tag elements
+    &::after {
+      content: '' !important;
+      position: absolute !important;
+      top: 0 !important;
+      left: 0 !important;
+      width: 100% !important;
+      height: 100% !important;
+      transform: translateX(-100%);
+      background: linear-gradient(
+        90deg,
+        rgba(255, 255, 255, 0) 0%,
+        rgba(255, 255, 255, 0.75) 50%,
+        rgba(255, 255, 255, 0) 100%
+      ) !important;
+      animation: talos-skeleton-shimmer-slide 1.5s infinite ease-in-out !important;
+      pointer-events: none !important;
+      z-index: 2 !important;
+    }
+  }
+
+  // Pulse Breathing Animation
+  &.talos-skeleton--pulse {
+    animation: talos-skeleton-pulse 1.8s ease-in-out 0.5s infinite !important;
+  }
+
+  // Static / No Animation
+  &.talos-skeleton--no-animation {
+    animation: none !important;
+
+    &::after {
+      display: none !important;
+    }
+  }
+}
+
+// ── Dark Mode Overrides for Directive Skeleton ──
+:root[data-theme="dark"],
+[data-theme="dark"],
+.dark {
+  .talos-skeleton-attached.talos-skeleton-active {
+    background-color: var(--talos-bg-subtle, #1e293b) !important;
+
+    &[src],
+    &:is(img),
+    &:is(video) {
+      background: linear-gradient(
+        90deg,
+        #1e293b 0%,
+        #334155 50%,
+        #1e293b 100%
+      ) !important;
+    }
+
+    &.talos-skeleton--shimmer {
+      background: linear-gradient(
+        90deg,
+        #1e293b 0%,
+        #334155 50%,
+        #1e293b 100%
+      ) !important;
+
+      &::after {
+        background: linear-gradient(
+          90deg,
+          rgba(255, 255, 255, 0) 0%,
+          rgba(255, 255, 255, 0.16) 50%,
+          rgba(255, 255, 255, 0) 100%
+        ) !important;
+      }
+    }
+  }
+}
+
+// ── Reduced Motion Accessibility ──
+@media (prefers-reduced-motion: reduce) {
+  .talos-skeleton-attached.talos-skeleton-active {
+    animation: none !important;
+    opacity: 0.85 !important;
+
+    &::after {
+      display: none !important;
+    }
+  }
+}