astro-component-kit 0.0.1 → 0.1.1

package/src/components/lib/cards/WeatherWidgetCard.astro

@@ -1,17 +1,43 @@
 ---
+/**
+ * WeatherWidgetCard — Glassmorphism card showing weather conditions.
+ * 
+ * @param {string} temp - The formatted temperature (e.g. "24°").
+ * @param {string} city - The location name.
+ * @param {string} condition - Short weather condition string (e.g. "Partly Cloudy").
+ * @param {string} icon - Emoji or symbol representing the weather.
+ */
+interface Props {
+  temp: string;
+  city: string;
+  condition: string;
+  icon: string;
+}
+
+const { temp, city, condition, icon } = Astro.props;
 ---
+
 <div class="weather-card">
-  <div class="temp">24°</div>
-  <div class="city">
-    <h4>Sunnyvale</h4>
-    <p>Partly Cloudy</p>
+  <div class="weather-card__temp">{temp}</div>
+  <div class="weather-card__city">
+    <h4 class="weather-card__name">{city}</h4>
+    <p class="weather-card__cond">{condition}</p>
   </div>
-  <div class="icon">☀️</div>
+  <div class="weather-card__icon" aria-hidden="true">{icon}</div>
 </div>
+
 <style>
-  .weather-card { display: flex; align-items: center; gap: 1.5rem; padding: 1.5rem; background: linear-gradient(135deg, rgba(99,102,241,0.2), rgba(192,132,252,0.2)); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.15); border-radius: 24px; color: #fff; }
-  .temp { font-size: 2.2rem; font-weight: 800; }
-  .city h4 { margin: 0; font-size: 1rem; }
-  .city p { margin: 0; font-size: 0.8rem; opacity: 0.7; }
-  .icon { font-size: 2.5rem; margin-left: auto; }
+  .weather-card { 
+    display: flex; align-items: center; gap: var(--sp-6, 1.5rem); 
+    padding: var(--sp-6, 1.5rem); 
+    background: linear-gradient(135deg, rgba(99,102,241,0.2), rgba(192,132,252,0.2)); 
+    backdrop-filter: blur(20px); 
+    border: 1px solid var(--c-border, rgba(255,255,255,0.15)); 
+    border-radius: var(--r-xl, 24px); 
+    color: var(--c-text-1, #fff); 
+  }
+  .weather-card__temp { font-size: 2.2rem; font-weight: 800; }
+  .weather-card__name { margin: 0; font-size: 1rem; }
+  .weather-card__cond { margin: 0; font-size: 0.8rem; opacity: 0.7; }
+  .weather-card__icon { font-size: 2.5rem; margin-left: auto; }
 </style>

package/src/components/lib/feedback/AnimatedCheckmark.astro

@@ -1,13 +1,62 @@
 ---
+/**
+ * AnimatedCheckmark — A decorative SVG checkmark with a circular fill and draw animation.
+ * 
+ * @param {number|string} size - The width/height of the checkmark in pixels. Default is 56.
+ * @param {string} color - The primary color of the success state. Default is '#7ac142'.
+ */
+interface Props {
+  size?: number | string;
+  color?: string;
+}
+
+const { size = 56, color = '#7ac142' } = Astro.props;
 ---
-<svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
-  <circle class="checkmark__circle" cx="26" cy="26" r="25" fill="none"/>
-  <path class="checkmark__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8"/>
-</svg>
+
+<div class="checkmark-container" style={`--check-size: ${size}px; --check-color: ${color};`}>
+  <svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
+    <circle class="checkmark__circle" cx="26" cy="26" r="25" fill="none"/>
+    <path class="checkmark__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8"/>
+  </svg>
+</div>
+
 <style>
-  .checkmark { width: 56px; height: 56px; border-radius: 50%; display: block; stroke-width: 2; stroke: #fff; stroke-miterlimit: 10; margin: 10% auto; box-shadow: inset 0px 0px 0px #7ac142; animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both; }
-  .checkmark__circle { stroke-dasharray: 166; stroke-dashoffset: 166; stroke-width: 2; stroke-miterlimit: 10; stroke: #7ac142; fill: none; animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards; }
-  .checkmark__check { transform-origin: 50% 50%; stroke-dasharray: 48; stroke-dashoffset: 48; animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards; }
-  @keyframes stroke { 100% { stroke-dashoffset: 0; } }
-  @keyframes fill { 100% { box-shadow: inset 0px 0px 0px 30px #7ac142; } }
+  .checkmark-container {
+    width: var(--check-size);
+    height: var(--check-size);
+    margin: var(--sp-4, 1rem) auto;
+  }
+  
+  .checkmark { 
+    width: 100%; 
+    height: 100%; 
+    border-radius: var(--r-full, 50%); 
+    display: block; 
+    stroke-width: 2; 
+    stroke: #fff; 
+    stroke-miterlimit: 10; 
+    box-shadow: inset 0px 0px 0px transparent; 
+    animation: checkmark-fill .4s ease-in-out .4s forwards, checkmark-scale .3s ease-in-out .9s both; 
+  }
+  
+  .checkmark__circle { 
+    stroke-dasharray: 166; 
+    stroke-dashoffset: 166; 
+    stroke-width: 2; 
+    stroke-miterlimit: 10; 
+    stroke: var(--check-color); 
+    fill: none; 
+    animation: checkmark-stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards; 
+  }
+  
+  .checkmark__check { 
+    transform-origin: 50% 50%; 
+    stroke-dasharray: 48; 
+    stroke-dashoffset: 48; 
+    animation: checkmark-stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards; 
+  }
+  
+  @keyframes checkmark-stroke { 100% { stroke-dashoffset: 0; } }
+  @keyframes checkmark-fill { 100% { box-shadow: inset 0px 0px 0px 30px var(--check-color); } }
+  @keyframes checkmark-scale { 0%, 100% { transform: none; } 50% { transform: scale3d(1.1, 1.1, 1); } }
 </style>

package/src/components/lib/feedback/Badge.astro

@@ -1,19 +1,54 @@
 ---
-interface Props { variant?: 'default' | 'success' | 'warning' | 'danger' | 'info'; dot?: boolean; pulse?: boolean; }
-const { variant = 'default', dot = false, pulse = false } = Astro.props;
+/**
+ * Badge — A compact visual indicator for labels, categories, or status tags.
+ * 
+ * @param {string} variant - Visual theme (default|success|warning|danger|info). Default is 'default'.
+ * @param {boolean} dot - If true, displays a small decorative circle inside the badge.
+ * @param {boolean} pulse - If true, adds a subtle breathing animation to the internal dot.
+ * @param {string} className - Optional additional CSS classes.
+ */
+interface Props {
+  variant?: 'default' | 'success' | 'warning' | 'danger' | 'info';
+  dot?: boolean;
+  pulse?: boolean;
+  className?: string;
+}
+
+const { variant = 'default', dot = false, pulse = false, className = '' } = Astro.props;
 ---
-<span class:list={['badge', `badge--${variant}`]}>
+
+<span class:list={['badge', `badge--${variant}`, className]}>
   {dot && <span class:list={['badge__dot', { 'badge__dot--pulse': pulse }]}></span>}
   <slot />
 </span>
+
 <style>
-  .badge { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.25rem 0.7rem; border-radius: 100px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; }
-  .badge--default { background: rgba(100, 116, 139, 0.18); color: #94a3b8; border: 1px solid rgba(100, 116, 139, 0.25); }
-  .badge--success { background: rgba(16, 185, 129, 0.12); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.25); }
-  .badge--warning { background: rgba(245, 158, 11, 0.12); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.25); }
-  .badge--danger { background: rgba(239, 68, 68, 0.12); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.25); }
-  .badge--info { background: rgba(99, 102, 241, 0.12); color: #818cf8; border: 1px solid rgba(99, 102, 241, 0.25); }
-  .badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
-  .badge__dot--pulse { animation: dot-pulse 1.8s ease-in-out infinite; }
-  @keyframes dot-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.7); } }
+  .badge { 
+    display: inline-flex; 
+    align-items: center; 
+    gap: var(--sp-2, 0.4rem); 
+    padding: var(--sp-1, 0.25rem) var(--sp-3, 0.7rem); 
+    border-radius: var(--r-full, 100px); 
+    font-size: 0.72rem; 
+    font-weight: 700; 
+    letter-spacing: 0.05em; 
+    text-transform: uppercase; 
+    white-space: nowrap; 
+    border: 1px solid transparent;
+    transition: 0.2s;
+  }
+  
+  .badge--default { background: rgba(148, 163, 184, 0.12); color: var(--c-text-2, #94a3b8); border-color: var(--c-border, rgba(148, 163, 184, 0.2)); }
+  .badge--success { background: rgba(52, 211, 153, 0.12); color: #34d399; border-color: rgba(52, 211, 153, 0.25); }
+  .badge--warning { background: rgba(251, 191, 36, 0.12); color: #fbbf24; border-color: rgba(251, 191, 36, 0.25); }
+  .badge--danger { background: rgba(248, 113, 113, 0.12); color: #f87171; border-color: rgba(248, 113, 113, 0.25); }
+  .badge--info { background: rgba(129, 140, 248, 0.12); color: var(--c-primary-light, #818cf8); border-color: rgba(129, 140, 248, 0.25); }
+  
+  .badge__dot { width: 6px; height: 6px; border-radius: var(--r-full, 50%); background: currentColor; flex-shrink: 0; }
+  .badge__dot--pulse { animation: badge-dot-pulse 2s ease-in-out infinite; }
+  
+  @keyframes badge-dot-pulse { 
+    0%, 100% { opacity: 1; transform: scale(1); } 
+    50% { opacity: 0.4; transform: scale(0.7); } 
+  }
 </style>

package/src/components/lib/feedback/CircleProgress.astro

@@ -1,22 +1,65 @@
 ---
-interface Props { percent: number; }
-const { percent } = Astro.props;
-const radius = 30;
+/**
+ * CircleProgress — A circular chart indicating a percentage of completion.
+ * 
+ * @param {number} percent - Completion percentage (0 to 100).
+ * @param {number} size - Pixel size of the square SVG container. Default is 80.
+ * @param {string} color - Primary gauge color. Default is 'var(--c-primary)'.
+ */
+interface Props {
+  percent: number;
+  size?: number;
+  color?: string;
+}
+
+const { percent, size = 80, color = 'var(--c-primary, #6366f1)' } = Astro.props;
+
+const radius = (size / 2) - 10;
 const circum = 2 * Math.PI * radius;
-const offset = circum - (percent / 100) * circum;
+const offset = circum - (Math.min(100, Math.max(0, percent)) / 100) * circum;
 ---
-<div class="circle-box">
-  <svg width="80" height="80">
-    <circle class="bg" cx="40" cy="40" r={radius} />
-    <circle class="val" cx="40" cy="40" r={radius} stroke-dasharray={circum} stroke-dashoffset={offset} />
+
+<div class="circle-box" style={`--gauge-size: ${size}px; --gauge-color: ${color};`}>
+  <svg width={size} height={size}>
+    <circle class="circle-bg" cx={size/2} cy={size/2} r={radius} />
+    <circle 
+      class="circle-val" 
+      cx={size/2} cy={size/2} r={radius} 
+      stroke-dasharray={circum} 
+      stroke-dashoffset={offset} 
+      stroke={color}
+    />
   </svg>
-  <div class="label">{percent}%</div>
+  <div class="circle-label" role="presentation">{percent}%</div>
 </div>
+
 <style>
-  .circle-box { position: relative; width: 80px; height: 80px; display: grid; place-items: center; }
+  .circle-box { 
+    position: relative; 
+    width: var(--gauge-size); 
+    height: var(--gauge-size); 
+    display: grid; place-items: center; 
+  }
+  
   svg { transform: rotate(-90deg); }
+  
   circle { fill: transparent; stroke-width: 6; stroke-linecap: round; }
-  .bg { stroke: rgba(255,255,255,0.05); }
-  .val { stroke: #6366f1; transition: stroke-dashoffset 1s ease; }
-  .label { position: absolute; font-size: 0.8rem; font-weight: 800; color: #fff; }
+  
+  .circle-bg { 
+    stroke: var(--c-bg-elev, rgba(255,255,255,0.05)); 
+    stroke-width: 5;
+  }
+  
+  .circle-val { 
+    transition: stroke-dashoffset 1s cubic-bezier(0.4, 0, 0.2, 1); 
+    filter: drop-shadow(0 0 3px var(--gauge-color));
+  }
+  
+  .circle-label { 
+    position: absolute; 
+    font-size: 0.85rem; 
+    font-weight: 800; 
+    color: var(--c-text-1, #fff); 
+    font-family: inherit;
+  }
 </style>

package/src/components/lib/feedback/ConfettiFeedback.astro

@@ -1,18 +1,81 @@
 ---
+/**
+ * ConfettiFeedback — A celebration component that triggers a falling confetti animation.
+ * 
+ * @param {string} label - Text to display briefly before/during confetti. Default is "Success!".
+ * @param {string} color - Primary color of the confetti pieces. Default is 'var(--c-primary)'.
+ * @param {boolean} active - If true, starts the animation immediately. Default is true.
+ */
+interface Props {
+  label?: string;
+  color?: string;
+  active?: boolean;
+}
+
+const { label = "Success!", color = 'var(--c-primary, #6366f1)', active = true } = Astro.props;
 ---
-<div class="confetti-btn-trigger">
-  <span>Success!</span>
-  <div class="confetti-container">
-    <div class="piece" style="--l: 10%; --d: 0.5s"></div>
-    <div class="piece" style="--l: 50%; --d: 1s"></div>
-    <div class="piece" style="--l: 80%; --d: 0.2s"></div>
+
+<div class:list={["confetti-trigger", { "confetti-trigger--active": active }]}>
+  <span class="confetti-label">{label}</span>
+  <div class="confetti-container" aria-hidden="true" style={`--confetti-color: ${color}`}>
+    {Array.from({ length: 12 }).map((_, i) => (
+      <div 
+        class="confetti-piece" 
+        style={`--l: ${Math.random() * 100}%; --d: ${Math.random() * 2}s; --r: ${Math.random() * 360}deg; --s: ${0.5 + Math.random()} `}
+      ></div>
+    ))}
   </div>
 </div>
+
 <style>
-  .confetti-container { position: absolute; inset: 0; pointer-events: none; }
-  .piece { position: absolute; left: var(--l); top: 0; width: 8px; height: 8px; background: #6366f1; border-radius: 2px; opacity: 0; animation: fall 2s infinite var(--d); }
-  @keyframes fall {
-    0% { transform: translateY(0) rotate(0); opacity: 1; }
-    100% { transform: translateY(100px) rotate(360deg); opacity: 0; }
+  .confetti-trigger { 
+    position: relative; 
+    display: flex; 
+    flex-direction: column; 
+    align-items: center; 
+    padding: var(--sp-4, 1rem);
+    width: fit-content;
+    overflow: hidden;
+  }
+  
+  .confetti-label { 
+    font-size: 1.25rem; 
+    font-weight: 800; 
+    color: var(--c-text-1, #fff); 
+    z-index: 1; 
+    text-shadow: 0 4px 10px rgba(0,0,0,0.3);
+  }
+  
+  .confetti-container { 
+    position: absolute; 
+    inset: 0; 
+    pointer-events: none; 
+    opacity: 0; 
+    transition: opacity 0.3s;
+  }
+  
+  .confetti-trigger--active .confetti-container { opacity: 1; }
+  
+  .confetti-piece { 
+    position: absolute; 
+    left: var(--l); 
+    top: -20px; 
+    width: 10px; height: 10px; 
+    background: var(--confetti-color); 
+    border-radius: 2px; 
+    transform: rotate(var(--r)) scale(var(--s));
+    opacity: 0; 
+  }
+  
+  .confetti-trigger--active .confetti-piece {
+    animation: confetti-fall 2.5s linear infinite var(--d); 
+  }
+  
+  @keyframes confetti-fall {
+    0% { transform: translateY(0) rotate(0deg) scale(var(--s)); opacity: 1; }
+    25% { transform: translateY(40px) rotate(90deg) translateX(10px); }
+    50% { transform: translateY(80px) rotate(180deg) translateX(-10px); }
+    75% { transform: translateY(120px) rotate(270deg) translateX(5px); }
+    100% { transform: translateY(160px) rotate(360deg); opacity: 0; }
   }
 </style>

package/src/components/lib/feedback/CyberGlitchAlert.astro

@@ -1,11 +1,74 @@
 ---
+/**
+ * CyberGlitchAlert — A loud, high-contrast alert box with a CSS glitch animation effect.
+ * 
+ * @param {string} message - Primary alert text. Default is "CRITICAL ERROR".
+ * @param {string} accentColor - The secondary glitch shadow color. Default is '#00e0ff'.
+ */
+interface Props {
+  message?: string;
+  accentColor?: string;
+}
+
+const { message = "CRITICAL ERROR", accentColor = "#00e0ff" } = Astro.props;
 ---
-<div class="glitch-alert">
-  <span class="glitch-text" data-text="CRITICAL ERROR">CRITICAL ERROR</span>
+
+<div class="glitch-alert" role="alert" style={`--glitch-accent: ${accentColor}`}>
+  <span class="glitch-text" data-text={message}>{message}</span>
 </div>
+
 <style>
-  .glitch-alert { background: #ff003c; padding: 1.5rem; border: 2px solid #fff; position: relative; overflow: hidden; }
-  .glitch-text { font-family: monospace; font-weight: 900; color: #fff; font-size: 1.2rem; }
-  .glitch-text::before { content: attr(data-text); position: absolute; left: -2px; text-shadow: 2px 0 #00e0ff; animation: glitch-anim 1s infinite linear alternate-reverse; }
-  @keyframes glitch-anim { 0% { clip: rect(44px, 450px, 56px, 0); } 100% { clip: rect(12px, 450px, 80px, 0); } }
+  .glitch-alert { 
+    background: var(--c-primary, #ff003c); 
+    padding: var(--sp-6, 1.5rem); 
+    border: 3px solid var(--c-text-1, #fff); 
+    position: relative; 
+    overflow: hidden; 
+    width: 100%;
+    box-sizing: border-box;
+    box-shadow: 8px 8px 0 rgba(0,0,0,0.5);
+  }
+  
+  .glitch-text { 
+    font-family: 'Courier New', Courier, monospace; 
+    font-weight: 900; 
+    color: var(--c-text-1, #fff); 
+    font-size: 1.25rem; 
+    display: block;
+    text-align: center;
+    position: relative;
+    letter-spacing: 0.1em;
+  }
+  
+  .glitch-text::before,
+  .glitch-text::after { 
+    content: attr(data-text); 
+    position: absolute; 
+    top: 0; left: 0; 
+    width: 100%; height: 100%;
+    background: var(--c-primary, #ff003c);
+  }
+
+  .glitch-text::before {
+    left: 2px;
+    text-shadow: -2px 0 var(--glitch-accent);
+    clip: rect(44px, 450px, 56px, 0);
+    animation: glitch-anim 2s infinite linear alternate-reverse;
+  }
+
+  .glitch-text::after {
+    left: -2px;
+    text-shadow: -2px 0 #fff;
+    clip: rect(12px, 450px, 80px, 0);
+    animation: glitch-anim 3s infinite linear alternate-reverse;
+  }
+  
+  @keyframes glitch-anim { 
+    0% { clip: rect(10px, 9999px, 30px, 0); }
+    20% { clip: rect(40px, 9999px, 60px, 0); }
+    40% { clip: rect(70px, 9999px, 10px, 0); }
+    60% { clip: rect(20px, 9999px, 50px, 0); }
+    80% { clip: rect(90px, 9999px, 20px, 0); }
+    100% { clip: rect(50px, 9999px, 80px, 0); }
+  }
 </style>

package/src/components/lib/feedback/EmptyStateCard.astro

@@ -1,13 +1,61 @@
 ---
+/**
+ * EmptyStateCard — A placeholder component for empty views or failed searches.
+ * 
+ * @param {string} icon - The emoji or symbol to display. Default is '📁'.
+ * @param {string} title - The primary bold headline. Default is 'No results found'.
+ * @param {string} message - Supporting descriptive text.
+ * @param {string} ctaLabel - Optional button text for an action.
+ */
+interface Props {
+  icon?: string;
+  title?: string;
+  message?: string;
+  ctaLabel?: string;
+}
+
+const { 
+  icon = "📁", 
+  title = "No results found", 
+  message = "Try adjusting your filters or adding a new item.",
+  ctaLabel
+} = Astro.props;
 ---
+
 <div class="empty-state">
-  <div class="ico">📁</div>
-  <h4>No results found</h4>
-  <p>Try adjusting your search filters or add a new item.</p>
+  <div class="empty-state__icon" aria-hidden="true">{icon}</div>
+  <h4 class="empty-state__title">{title}</h4>
+  <p class="empty-state__message">{message}</p>
+  {ctaLabel && <button class="empty-state__btn" type="button">{ctaLabel}</button>}
 </div>
+
 <style>
-  .empty-state { text-align: center; padding: 4rem 2rem; border: 2px dashed rgba(255,255,255,0.1); border-radius: 20px; color: #94a3b8; background: rgba(255,255,255,0.02); }
-  .ico { font-size: 3rem; margin-bottom: 1rem; opacity: 0.5; }
-  h4 { color: #fff; margin: 0; }
-  p { font-size: 0.9rem; margin-top: 0.5rem; }
+  .empty-state { 
+    text-align: center; 
+    padding: var(--sp-16, 4rem) var(--sp-8, 2rem); 
+    border: 2px dashed var(--c-border, rgba(255,255,255,0.1)); 
+    border-radius: var(--r-xl, 24px); 
+    color: var(--c-text-2, #94a3b8); 
+    background: var(--c-bg-elev, rgba(255,255,255,0.02)); 
+    width: 100%;
+    box-sizing: border-box;
+  }
+  
+  .empty-state__icon { font-size: 3.5rem; margin-bottom: var(--sp-4, 1rem); opacity: 0.6; filter: grayscale(0.5); }
+  
+  .empty-state__title { color: var(--c-text-1, #fff); margin: 0; font-size: 1.25rem; font-weight: 700; }
+  
+  .empty-state__message { font-size: 0.95rem; margin-top: 0.75rem; max-width: 320px; margin-inline: auto; line-height: 1.5; }
+  
+  .empty-state__btn { 
+    margin-top: var(--sp-6, 1.5rem); 
+    background: var(--c-primary, #6366f1); 
+    color: #fff; border: none; 
+    padding: 0.6rem 1.4rem; 
+    border-radius: var(--r-md, 8px); 
+    font-weight: 700; cursor: pointer; 
+    transition: transform 0.2s;
+  }
+  
+  .empty-state__btn:hover { transform: translateY(-2px); filter: brightness(1.1); }
 </style>

package/src/components/lib/feedback/GlassAlert.astro

@@ -1,20 +1,66 @@
 ---
-interface Props { type?: 'info' | 'success' | 'warning' | 'error'; title: string; }
+/**
+ * GlassAlert — A translucent feedback bar for displaying situational messages.
+ * 
+ * @param {'info'|'success'|'warning'|'error'} type - The severity or nature of the alert. Default is 'info'.
+ * @param {string} title - Bold header text for the alert.
+ */
+interface Props { 
+  type?: 'info' | 'success' | 'warning' | 'error'; 
+  title: string; 
+}
+
 const { type = 'info', title } = Astro.props;
+
+const icons = {
+  info: "i",
+  success: "✓",
+  warning: "!",
+  error: "✕"
+};
 ---
-<div class:list={['alert', `alert--${type}` ]}>
-  <div class="alert-icon">!</div>
-  <div class="alert-content">
-    <div class="alert-title">{title}</div>
-    <div class="alert-body"><slot /></div>
+
+<div class:list={['glass-alert', `glass-alert--${type}` ]} role="alert">
+  <div class="glass-alert__icon" aria-hidden="true">{icons[type]}</div>
+  <div class="glass-alert__content">
+    <div class="glass-alert__title">{title}</div>
+    <div class="glass-alert__body"><slot /></div>
   </div>
 </div>
+
 <style>
-  .alert { display: flex; gap: 1rem; padding: 1.25rem; border-radius: 16px; border: 1px solid rgba(255,255,255,0.1); backdrop-filter: blur(12px); background: rgba(255,255,255,0.03); }
-  .alert--success { border-color: rgba(52,211,153,0.3); background: rgba(52,211,153,0.05); }
-  .alert--warning { border-color: rgba(245,158,11,0.3); background: rgba(245,158,11,0.05); }
-  .alert--error { border-color: rgba(239,68,68,0.3); background: rgba(239,68,68,0.05); }
-  .alert-icon { font-weight: 900; background: rgba(255,255,255,0.1); width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; font-size: 0.8rem; }
-  .alert-title { font-weight: 700; color: #fff; margin-bottom: 2px; }
-  .alert-body { font-size: 0.85rem; color: #94a3b8; }
+  .glass-alert { 
+    display: flex; 
+    gap: var(--sp-4, 1rem); 
+    padding: var(--sp-5, 1.25rem); 
+    border-radius: var(--r-md, 16px); 
+    border: 1px solid var(--c-border, rgba(255,255,255,0.1)); 
+    backdrop-filter: blur(12px); 
+    background: var(--c-bg-elev, rgba(255,255,255,0.03)); 
+    width: 100%;
+    box-sizing: border-box;
+  }
+  
+  .glass-alert--success { border-color: rgba(52, 211, 153, 0.3); background: rgba(52, 211, 153, 0.05); }
+  .glass-alert--warning { border-color: rgba(245, 158, 11, 0.3); background: rgba(245, 158, 11, 0.05); }
+  .glass-alert--error { border-color: rgba(239, 68, 68, 0.3); background: rgba(239, 68, 68, 0.05); }
+  
+  .glass-alert__icon { 
+    font-weight: 900; 
+    background: rgba(255, 255, 255, 0.1); 
+    width: 24px; height: 24px; 
+    display: grid; place-items: center; 
+    border-radius: var(--r-full, 50%); 
+    font-size: 0.8rem; 
+    flex-shrink: 0;
+    font-family: monospace;
+    color: var(--c-text-1, #fff);
+  }
+  
+  .glass-alert--success .glass-alert__icon { background: #10b981; color: #fff; }
+  .glass-alert--warning .glass-alert__icon { background: #f59e0b; color: #fff; }
+  .glass-alert--error .glass-alert__icon { background: #ef4444; color: #fff; }
+  
+  .glass-alert__title { font-weight: 700; color: var(--c-text-1, #fff); margin-bottom: 2px; font-size: 0.95rem; }
+  .glass-alert__body { font-size: 0.85rem; color: var(--c-text-2, #94a3b8); line-height: 1.5; }
 </style>