@qwickapps/react-framework 1.8.1 → 1.9.0

package/dist/palettes/palette-ocean.1.8.0.css

@@ -0,0 +1,174 @@
+/**
+ * Ocean Color Palette
+ * 
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ * 
+ * Deep blues, aqua teals, and seafoam greens - inspired by ocean depths
+ */
+
+/* ===== OCEAN PALETTE - LIGHT THEME ===== */
+html[data-palette="ocean"]:not([data-theme="dark"]), 
+html[data-palette="ocean"][data-theme="light"] {
+  /* Primary palette - Deep ocean */
+  --palette-primary-main: #0891b2;
+  --palette-primary-light: #22d3ee;
+  --palette-primary-dark: #164e63;
+  --palette-on-primary: #ffffff;
+
+  /* Secondary palette - Deep teal */
+  --palette-secondary-main: #0f766e;
+  --palette-secondary-light: #14b8a6;
+  --palette-secondary-dark: #134e4a;
+  --palette-on-secondary: #ffffff;
+
+  /* Surface palette - Sea foam */
+  --palette-surface-main: #f0fdfa;
+  --palette-surface-variant: #ccfbf1;
+  --palette-surface-elevated: #ffffff;
+  --palette-on-surface: #164e63;
+
+  /* Background palette - Shallow water */
+  --palette-background-main: #ecfeff;
+  --palette-background-dark: #cffafe;
+  --palette-background-overlay: rgba(236, 254, 255, 0.95);
+  --palette-on-background: #0f766e;
+
+  /* Header background with transparency */
+  --palette-header-bg-start: rgba(236, 254, 255, 0.98);
+  --palette-header-bg-end: rgba(236, 254, 255, 0.95);
+  --palette-header-collapsed-bg-start: rgba(236, 254, 255, 0.99);
+  --palette-header-collapsed-bg-end: rgba(236, 254, 255, 0.96);
+  
+  /* Text palette - Deep sea */
+  --palette-text-primary: #164e63;
+  --palette-text-secondary: #0891b2;
+  --palette-text-disabled: rgba(22, 78, 99, 0.38);
+  --palette-text-inverted: #ffffff;
+  
+  /* Border palette - Tide line */
+  --palette-border-main: #a7f3d0;
+  --palette-border-light: rgba(22, 78, 99, 0.12);
+  --palette-border-lighter: rgba(22, 78, 99, 0.05);
+  --palette-border-medium: #67e8f9;
+  
+  /* Success palette - Kelp green */
+  --palette-success-main: #059669;
+  --palette-success-light: #d1fae5;
+  --palette-success-dark: #065f46;
+  --palette-success-border: #a7f3d0;
+  
+  /* Error palette - Coral */
+  --palette-error-main: #ef4444;
+  --palette-error-light: #fee2e2;
+  --palette-error-dark: #7f1d1d;
+  --palette-on-error: #ffffff;
+  --palette-error-border: #fecaca;
+
+  /* Warning palette - Sandy yellow */
+  --palette-warning-main: #f59e0b;
+  --palette-warning-light: #fef3c7;
+  --palette-warning-dark: #78350f;
+  --palette-on-warning: #000000;
+  --palette-warning-border: #fde68a;
+  
+  /* Info palette - Crystal blue */
+  --palette-info-main: #0ea5e9;
+  --palette-info-light: #e0f2fe;
+  --palette-info-dark: #0c4a6e;
+  --palette-on-info: #ffffff;
+  --palette-info-border: #7dd3fc;
+  
+  /* Accent palette - Coral reef */
+  --palette-accent-main: #f97316;
+  --palette-accent-light: #fb923c;
+  --palette-accent-dark: #ea580c;
+  --palette-on-accent: #ffffff;
+  
+  /* Control palette - Depth */
+  --palette-control-main: #0c4a6e;
+  --palette-control-light: #075985;
+  --palette-control-text: #cffafe;
+  --palette-control-border: #0891b2;
+}
+
+/* ===== OCEAN PALETTE - DARK THEME ===== */
+html[data-palette="ocean"][data-theme="dark"] {
+  /* Primary palette - Bioluminescent */
+  --palette-primary-main: #22d3ee;
+  --palette-primary-light: #67e8f9;
+  --palette-primary-dark: #0891b2;
+  --palette-on-primary: #0a1a1f;
+
+  /* Secondary palette - Deep current */
+  --palette-secondary-main: #5eead4;
+  --palette-secondary-light: #99f6e4;
+  --palette-secondary-dark: #14b8a6;
+  --palette-on-secondary: #0a1a1f;
+
+  /* Surface palette - Abyss */
+  --palette-surface-main: #122830;
+  --palette-surface-variant: #1a3a45;
+  --palette-surface-elevated: #0e7490;
+  --palette-on-surface: #cffafe;
+
+  /* Background palette - Ocean floor */
+  --palette-background-main: #040a0d;
+  --palette-background-dark: #0a1418;
+  --palette-background-overlay: rgba(10, 26, 31, 0.95);
+  --palette-on-background: #5eead4;
+
+  /* Header background with transparency */
+  --palette-header-bg-start: rgba(4, 10, 13, 0.98);
+  --palette-header-bg-end: rgba(4, 10, 13, 0.95);
+  --palette-header-collapsed-bg-start: rgba(4, 10, 13, 0.99);
+  --palette-header-collapsed-bg-end: rgba(4, 10, 13, 0.96);
+  
+  /* Text palette - Phosphorescent */
+  --palette-text-primary: #cffafe;
+  --palette-text-secondary: #a5f3fc;
+  --palette-text-disabled: rgba(207, 250, 254, 0.38);
+  --palette-text-inverted: #020617;
+  
+  /* Border palette - Deep current */
+  --palette-border-main: #155e75;
+  --palette-border-light: rgba(207, 250, 254, 0.12);
+  --palette-border-lighter: rgba(207, 250, 254, 0.05);
+  --palette-border-medium: #0c4a6e;
+  
+  /* Success palette - Algae glow */
+  --palette-success-main: #34d399;
+  --palette-success-light: #065f46;
+  --palette-success-dark: #10b981;
+  --palette-success-border: #047857;
+  
+  /* Error palette - Red tide */
+  --palette-error-main: #f87171;
+  --palette-error-light: #7f1d1d;
+  --palette-error-dark: #ef4444;
+  --palette-error-border: #991b1b;
+  
+  /* Warning palette - Sunset reflection */
+  --palette-warning-main: #fb7185;
+  --palette-warning-light: #881337;
+  --palette-warning-dark: #e11d48;
+  --palette-warning-border: #be123c;
+  
+  /* Info palette - Electric blue */
+  --palette-info-main: #0ea5e9;
+  --palette-info-light: #0c4a6e;
+  --palette-info-dark: #38bdf8;
+  --palette-on-info: #020617;
+  --palette-info-border: #0284c7;
+  
+  /* Accent palette - Warm coral */
+  --palette-accent-main: #ea580c;
+  --palette-accent-light: #fb923c;
+  --palette-accent-dark: #c2410c;
+  --palette-on-accent: #cffafe;
+  
+  /* Control palette - Midnight depth */
+  --palette-control-main: #164e63;
+  --palette-control-light: #0e7490;
+  --palette-control-text: #ecfeff;
+  --palette-control-border: #155e75;
+}

package/dist/palettes/palette-ocean.1.8.0.min.css

@@ -0,0 +1 @@
+html[data-palette="ocean"]:not([data-theme="dark"]),html[data-palette="ocean"][data-theme="light"]{--palette-primary-main:#0891b2;--palette-primary-light:#22d3ee;--palette-primary-dark:#164e63;--palette-on-primary:#ffffff;--palette-secondary-main:#0f766e;--palette-secondary-light:#14b8a6;--palette-secondary-dark:#134e4a;--palette-on-secondary:#ffffff;--palette-surface-main:#f0fdfa;--palette-surface-variant:#ccfbf1;--palette-surface-elevated:#ffffff;--palette-on-surface:#164e63;--palette-background-main:#ecfeff;--palette-background-dark:#cffafe;--palette-background-overlay:rgba(236,254,255,0.95);--palette-on-background:#0f766e;--palette-header-bg-start:rgba(236,254,255,0.98);--palette-header-bg-end:rgba(236,254,255,0.95);--palette-header-collapsed-bg-start:rgba(236,254,255,0.99);--palette-header-collapsed-bg-end:rgba(236,254,255,0.96);--palette-text-primary:#164e63;--palette-text-secondary:#0891b2;--palette-text-disabled:rgba(22,78,99,0.38);--palette-text-inverted:#ffffff;--palette-border-main:#a7f3d0;--palette-border-light:rgba(22,78,99,0.12);--palette-border-lighter:rgba(22,78,99,0.05);--palette-border-medium:#67e8f9;--palette-success-main:#059669;--palette-success-light:#d1fae5;--palette-success-dark:#065f46;--palette-success-border:#a7f3d0;--palette-error-main:#ef4444;--palette-error-light:#fee2e2;--palette-error-dark:#7f1d1d;--palette-on-error:#ffffff;--palette-error-border:#fecaca;--palette-warning-main:#f59e0b;--palette-warning-light:#fef3c7;--palette-warning-dark:#78350f;--palette-on-warning:#000000;--palette-warning-border:#fde68a;--palette-info-main:#0ea5e9;--palette-info-light:#e0f2fe;--palette-info-dark:#0c4a6e;--palette-on-info:#ffffff;--palette-info-border:#7dd3fc;--palette-accent-main:#f97316;--palette-accent-light:#fb923c;--palette-accent-dark:#ea580c;--palette-on-accent:#ffffff;--palette-control-main:#0c4a6e;--palette-control-light:#075985;--palette-control-text:#cffafe;--palette-control-border:#0891b2}html[data-palette="ocean"][data-theme="dark"]{--palette-primary-main:#22d3ee;--palette-primary-light:#67e8f9;--palette-primary-dark:#0891b2;--palette-on-primary:#0a1a1f;--palette-secondary-main:#5eead4;--palette-secondary-light:#99f6e4;--palette-secondary-dark:#14b8a6;--palette-on-secondary:#0a1a1f;--palette-surface-main:#122830;--palette-surface-variant:#1a3a45;--palette-surface-elevated:#0e7490;--palette-on-surface:#cffafe;--palette-background-main:#040a0d;--palette-background-dark:#0a1418;--palette-background-overlay:rgba(10,26,31,0.95);--palette-on-background:#5eead4;--palette-header-bg-start:rgba(4,10,13,0.98);--palette-header-bg-end:rgba(4,10,13,0.95);--palette-header-collapsed-bg-start:rgba(4,10,13,0.99);--palette-header-collapsed-bg-end:rgba(4,10,13,0.96);--palette-text-primary:#cffafe;--palette-text-secondary:#a5f3fc;--palette-text-disabled:rgba(207,250,254,0.38);--palette-text-inverted:#020617;--palette-border-main:#155e75;--palette-border-light:rgba(207,250,254,0.12);--palette-border-lighter:rgba(207,250,254,0.05);--palette-border-medium:#0c4a6e;--palette-success-main:#34d399;--palette-success-light:#065f46;--palette-success-dark:#10b981;--palette-success-border:#047857;--palette-error-main:#f87171;--palette-error-light:#7f1d1d;--palette-error-dark:#ef4444;--palette-error-border:#991b1b;--palette-warning-main:#fb7185;--palette-warning-light:#881337;--palette-warning-dark:#e11d48;--palette-warning-border:#be123c;--palette-info-main:#0ea5e9;--palette-info-light:#0c4a6e;--palette-info-dark:#38bdf8;--palette-on-info:#020617;--palette-info-border:#0284c7;--palette-accent-main:#ea580c;--palette-accent-light:#fb923c;--palette-accent-dark:#c2410c;--palette-on-accent:#cffafe;--palette-control-main:#164e63;--palette-control-light:#0e7490;--palette-control-text:#ecfeff;--palette-control-border:#155e75}

package/dist/palettes/palette-spring.1.8.0.css

@@ -0,0 +1,168 @@
+/**
+ * Spring Color Palette
+ * 
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ * 
+ * Fresh greens, soft pinks, and bright yellows - inspired by spring blooms
+ */
+
+/* ===== SPRING PALETTE - LIGHT THEME ===== */
+html[data-palette="spring"]:not([data-theme="dark"]), 
+html[data-palette="spring"][data-theme="light"] {
+  /* Primary palette - Fresh green */
+  --palette-primary-main: #16a34a;
+  --palette-primary-light: #4ade80;
+  --palette-primary-dark: #15803d;
+  --palette-on-primary: #ffffff;
+
+  /* Secondary palette - Blossom pink */
+  --palette-secondary-main: #ec4899;
+  --palette-secondary-light: #f472b6;
+  --palette-secondary-dark: #be185d;
+  --palette-on-secondary: #ffffff;
+
+  /* Surface palette - Soft white */
+  --palette-surface-main: #f7fee7;
+  --palette-surface-variant: #d9f7be; /* Improved contrast with subtle green tint */
+  --palette-surface-elevated: #ffffff;
+  --palette-on-surface: #14532d;
+
+  /* Background palette - Morning dew */
+  --palette-background-main: #f0fdf4;
+  --palette-background-dark: #dcfce7;
+  --palette-background-overlay: rgba(240, 253, 244, 0.95);
+  --palette-on-background: #166534;
+
+  /* Text palette - Deep forest */
+  --palette-text-primary: #14532d;
+  --palette-text-secondary: #166534;
+  --palette-text-disabled: rgba(20, 83, 45, 0.38);
+  --palette-text-inverted: #ffffff;
+  
+  /* Border palette - Sage */
+  --palette-border-main: #bbf7d0;
+  --palette-border-light: rgba(20, 83, 45, 0.12);
+  --palette-border-lighter: rgba(20, 83, 45, 0.05);
+  --palette-border-medium: #86efac;
+  
+  /* Success palette - Vibrant green */
+  --palette-success-main: #22c55e;
+  --palette-success-light: #dcfce7;
+  --palette-success-dark: #15803d;
+  --palette-success-border: #bbf7d0;
+  
+  /* Error palette - Cherry blossom */
+  --palette-error-main: #f43f5e;
+  --palette-error-light: #ffe4e6;
+  --palette-error-dark: #881337;
+  --palette-on-error: #ffffff;
+  --palette-error-border: #fecdd3;
+
+  /* Warning palette - Daffodil */
+  --palette-warning-main: #eab308;
+  --palette-warning-light: #fefce8;
+  --palette-warning-dark: #713f12;
+  --palette-on-warning: #000000;
+  --palette-warning-border: #fef08a;
+  
+  /* Info palette - Sky blue */
+  --palette-info-main: #0ea5e9;
+  --palette-info-light: #e0f2fe;
+  --palette-info-dark: #0c4a6e;
+  --palette-on-info: #14532d;
+  --palette-info-border: #7dd3fc;
+  
+  /* Accent palette - Cherry blossom */
+  --palette-accent-main: #ec4899;
+  --palette-accent-light: #fce7f3;
+  --palette-accent-dark: #be185d;
+  --palette-on-accent: #ffffff;
+  
+  /* Control palette - Rich earth */
+  --palette-control-main: #365314;
+  --palette-control-light: #4d7c0f;
+  --palette-control-text: #ecfdf5;
+  --palette-control-border: #65a30d;
+}
+
+/* ===== SPRING PALETTE - DARK THEME ===== */
+html[data-palette="spring"][data-theme="dark"] {
+  /* Primary palette - Neon leaf */
+  --palette-primary-main: #4ade80;
+  --palette-primary-light: #86efac;
+  --palette-primary-dark: #16a34a;
+  --palette-on-primary: #0f1f0f;
+
+  /* Secondary palette - Neon bloom */
+  --palette-secondary-main: #f472b6;
+  --palette-secondary-light: #f9a8d4;
+  --palette-secondary-dark: #ec4899;
+  --palette-on-secondary: #0f1f0f;
+
+  /* Surface palette - Dark moss */
+  --palette-surface-main: #162816;
+  --palette-surface-variant: #1f351f;
+  --palette-surface-elevated: #2d4a2d;
+  --palette-on-surface: #dcfce7;
+
+  /* Background palette - Deep forest */
+  --palette-background-main: #060b06;
+  --palette-background-dark: #0c140c;
+  --palette-background-overlay: rgba(6, 11, 6, 0.95);
+  --palette-on-background: #bbf7d0;
+
+  /* Header background with transparency */
+  --palette-header-bg-start: rgba(6, 11, 6, 0.98);
+  --palette-header-bg-end: rgba(6, 11, 6, 0.95);
+  --palette-header-collapsed-bg-start: rgba(6, 11, 6, 0.99);
+  --palette-header-collapsed-bg-end: rgba(6, 11, 6, 0.96);
+
+  /* Text palette - Moonlit green */
+  --palette-text-primary: #dcfce7;
+  --palette-text-secondary: #bbf7d0;
+  --palette-text-disabled: rgba(220, 252, 231, 0.38);
+  --palette-text-inverted: #0a120a;
+  
+  /* Border palette - Night vine */
+  --palette-border-main: #166534;
+  --palette-border-light: rgba(220, 252, 231, 0.12);
+  --palette-border-lighter: rgba(220, 252, 231, 0.05);
+  --palette-border-medium: #14532d;
+  
+  /* Success palette - Electric green */
+  --palette-success-main: #22c55e;
+  --palette-success-light: #14532d;
+  --palette-success-dark: #4ade80;
+  --palette-success-border: #166534;
+  
+  /* Error palette - Neon pink */
+  --palette-error-main: #f472b6;
+  --palette-error-light: #881337;
+  --palette-error-dark: #ec4899;
+  --palette-error-border: #be185d;
+  
+  /* Warning palette - Electric yellow */
+  --palette-warning-main: #facc15;
+  --palette-warning-light: #713f12;
+  --palette-warning-dark: #eab308;
+  --palette-warning-border: #a16207;
+  
+  /* Info palette - Electric cyan */
+  --palette-info-main: #06b6d4;
+  --palette-info-light: #164e63;
+  --palette-info-dark: #22d3ee;
+  --palette-on-info: #0a120a;
+  --palette-info-border: #0891b2;
+  
+  /* Accent palette - Electric bloom */
+  --palette-accent-main: #f472b6;
+  --palette-accent-light: #fce7f3;
+  --palette-accent-dark: #db2777;
+  --palette-on-accent: #dcfce7;
+  
+  /* Control palette - Deep forest */
+  --palette-control-main: #1a2e1a;
+  --palette-control-light: #2d4a2d;
+  --palette-control-text: #dcfce7;
+  --palette-control-border: #166534;
+}

package/dist/palettes/palette-spring.1.8.0.min.css

@@ -0,0 +1 @@
+html[data-palette="spring"]:not([data-theme="dark"]),html[data-palette="spring"][data-theme="light"]{--palette-primary-main:#16a34a;--palette-primary-light:#4ade80;--palette-primary-dark:#15803d;--palette-on-primary:#ffffff;--palette-secondary-main:#ec4899;--palette-secondary-light:#f472b6;--palette-secondary-dark:#be185d;--palette-on-secondary:#ffffff;--palette-surface-main:#f7fee7;--palette-surface-variant:#d9f7be;--palette-surface-elevated:#ffffff;--palette-on-surface:#14532d;--palette-background-main:#f0fdf4;--palette-background-dark:#dcfce7;--palette-background-overlay:rgba(240,253,244,0.95);--palette-on-background:#166534;--palette-text-primary:#14532d;--palette-text-secondary:#166534;--palette-text-disabled:rgba(20,83,45,0.38);--palette-text-inverted:#ffffff;--palette-border-main:#bbf7d0;--palette-border-light:rgba(20,83,45,0.12);--palette-border-lighter:rgba(20,83,45,0.05);--palette-border-medium:#86efac;--palette-success-main:#22c55e;--palette-success-light:#dcfce7;--palette-success-dark:#15803d;--palette-success-border:#bbf7d0;--palette-error-main:#f43f5e;--palette-error-light:#ffe4e6;--palette-error-dark:#881337;--palette-on-error:#ffffff;--palette-error-border:#fecdd3;--palette-warning-main:#eab308;--palette-warning-light:#fefce8;--palette-warning-dark:#713f12;--palette-on-warning:#000000;--palette-warning-border:#fef08a;--palette-info-main:#0ea5e9;--palette-info-light:#e0f2fe;--palette-info-dark:#0c4a6e;--palette-on-info:#14532d;--palette-info-border:#7dd3fc;--palette-accent-main:#ec4899;--palette-accent-light:#fce7f3;--palette-accent-dark:#be185d;--palette-on-accent:#ffffff;--palette-control-main:#365314;--palette-control-light:#4d7c0f;--palette-control-text:#ecfdf5;--palette-control-border:#65a30d}html[data-palette="spring"][data-theme="dark"]{--palette-primary-main:#4ade80;--palette-primary-light:#86efac;--palette-primary-dark:#16a34a;--palette-on-primary:#0f1f0f;--palette-secondary-main:#f472b6;--palette-secondary-light:#f9a8d4;--palette-secondary-dark:#ec4899;--palette-on-secondary:#0f1f0f;--palette-surface-main:#162816;--palette-surface-variant:#1f351f;--palette-surface-elevated:#2d4a2d;--palette-on-surface:#dcfce7;--palette-background-main:#060b06;--palette-background-dark:#0c140c;--palette-background-overlay:rgba(6,11,6,0.95);--palette-on-background:#bbf7d0;--palette-header-bg-start:rgba(6,11,6,0.98);--palette-header-bg-end:rgba(6,11,6,0.95);--palette-header-collapsed-bg-start:rgba(6,11,6,0.99);--palette-header-collapsed-bg-end:rgba(6,11,6,0.96);--palette-text-primary:#dcfce7;--palette-text-secondary:#bbf7d0;--palette-text-disabled:rgba(220,252,231,0.38);--palette-text-inverted:#0a120a;--palette-border-main:#166534;--palette-border-light:rgba(220,252,231,0.12);--palette-border-lighter:rgba(220,252,231,0.05);--palette-border-medium:#14532d;--palette-success-main:#22c55e;--palette-success-light:#14532d;--palette-success-dark:#4ade80;--palette-success-border:#166534;--palette-error-main:#f472b6;--palette-error-light:#881337;--palette-error-dark:#ec4899;--palette-error-border:#be185d;--palette-warning-main:#facc15;--palette-warning-light:#713f12;--palette-warning-dark:#eab308;--palette-warning-border:#a16207;--palette-info-main:#06b6d4;--palette-info-light:#164e63;--palette-info-dark:#22d3ee;--palette-on-info:#0a120a;--palette-info-border:#0891b2;--palette-accent-main:#f472b6;--palette-accent-light:#fce7f3;--palette-accent-dark:#db2777;--palette-on-accent:#dcfce7;--palette-control-main:#1a2e1a;--palette-control-light:#2d4a2d;--palette-control-text:#dcfce7;--palette-control-border:#166534}

package/dist/palettes/palette-winter.1.8.0.css

@@ -0,0 +1,174 @@
+/**
+ * Winter Color Palette
+ * 
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ * 
+ * Cool blues, icy whites, and frosty grays - inspired by winter landscapes
+ */
+
+/* ===== WINTER PALETTE - LIGHT THEME ===== */
+html[data-palette="winter"]:not([data-theme="dark"]), 
+html[data-palette="winter"][data-theme="light"] {
+  /* Primary palette - Ice blue */
+  --palette-primary-main: #0077be;
+  --palette-primary-light: #5ba3d0;
+  --palette-primary-dark: #005082;
+  --palette-on-primary: #ffffff;
+
+  /* Secondary palette - Steel blue */
+  --palette-secondary-main: #4682b4;
+  --palette-secondary-light: #7ba7cc;
+  --palette-secondary-dark: #2e5984;
+  --palette-on-secondary: #ffffff;
+
+  /* Surface palette - Snow white */
+  --palette-surface-main: #fafbfc;
+  --palette-surface-variant: #e2e8f0; /* Improved contrast with cooler tone */
+  --palette-surface-elevated: #ffffff;
+  --palette-on-surface: #0f172a;
+
+  /* Background palette - Frosty */
+  --palette-background-main: #f8fafc;
+  --palette-background-dark: #f1f5f9;
+  --palette-background-overlay: rgba(248, 250, 252, 0.95);
+  --palette-on-background: #475569;
+
+  /* Header background with transparency */
+  --palette-header-bg-start: rgba(248, 250, 252, 0.98);
+  --palette-header-bg-end: rgba(248, 250, 252, 0.95);
+  --palette-header-collapsed-bg-start: rgba(248, 250, 252, 0.99);
+  --palette-header-collapsed-bg-end: rgba(248, 250, 252, 0.96);
+  
+  /* Text palette - Winter tones */
+  --palette-text-primary: #0f172a;
+  --palette-text-secondary: #475569;
+  --palette-text-disabled: rgba(15, 23, 42, 0.38);
+  --palette-text-inverted: #ffffff;
+  
+  /* Border palette - Icy */
+  --palette-border-main: #cbd5e1;
+  --palette-border-light: rgba(15, 23, 42, 0.12);
+  --palette-border-lighter: rgba(15, 23, 42, 0.05);
+  --palette-border-medium: #94a3b8;
+  
+  /* Success palette - Pine green */
+  --palette-success-main: #059669;
+  --palette-success-light: #d1fae5;
+  --palette-success-dark: #064e3b;
+  --palette-success-border: #a7f3d0;
+  
+  /* Error palette - Winter berry */
+  --palette-error-main: #dc2626;
+  --palette-error-light: #fee2e2;
+  --palette-error-dark: #7f1d1d;
+  --palette-on-error: #ffffff;
+  --palette-error-border: #fecaca;
+
+  /* Warning palette - Amber frost */
+  --palette-warning-main: #d97706;
+  --palette-warning-light: #fef3c7;
+  --palette-warning-dark: #92400e;
+  --palette-on-warning: #000000;
+  --palette-warning-border: #fde68a;
+  
+  /* Info palette - Arctic blue */
+  --palette-info-main: #0284c7;
+  --palette-info-light: #e0f2fe;
+  --palette-info-dark: #0c4a6e;
+  --palette-on-info: #ffffff;
+  --palette-info-border: #7dd3fc;
+  
+  /* Accent palette - Aurora colors */
+  --palette-accent-main: #ec4899;
+  --palette-accent-light: #fce7f3;
+  --palette-accent-dark: #be185d;
+  --palette-on-accent: #ffffff;
+  
+  /* Control palette - Charcoal */
+  --palette-control-main: #1e293b;
+  --palette-control-light: #334155;
+  --palette-control-text: #e2e8f0;
+  --palette-control-border: #475569;
+}
+
+/* ===== WINTER PALETTE - DARK THEME ===== */
+html[data-palette="winter"][data-theme="dark"] {
+  /* Primary palette - Arctic glow */
+  --palette-primary-main: #7dd3fc;
+  --palette-primary-light: #bae6fd;
+  --palette-primary-dark: #0369a1;
+  --palette-on-primary: #020617;
+
+  /* Secondary palette - Moonlight */
+  --palette-secondary-main: #94a3b8;
+  --palette-secondary-light: #cbd5e1;
+  --palette-secondary-dark: #64748b;
+  --palette-on-secondary: #020617;
+
+  /* Surface palette - Dark frost */
+  --palette-surface-main: #172033;
+  --palette-surface-variant: #1e293b;
+  --palette-surface-elevated: #334155;
+  --palette-on-surface: #f8fafc;
+
+  /* Background palette - Winter night */
+  --palette-background-main: #04080f;
+  --palette-background-dark: #0a1018;
+  --palette-background-overlay: rgba(15, 23, 42, 0.95);
+  --palette-on-background: #cbd5e1;
+
+  /* Header background with transparency */
+  --palette-header-bg-start: rgba(4, 8, 15, 0.98);
+  --palette-header-bg-end: rgba(4, 8, 15, 0.95);
+  --palette-header-collapsed-bg-start: rgba(4, 8, 15, 0.99);
+  --palette-header-collapsed-bg-end: rgba(4, 8, 15, 0.96);
+  
+  /* Text palette - Snow and ice */
+  --palette-text-primary: #f8fafc;
+  --palette-text-secondary: #cbd5e1;
+  --palette-text-disabled: rgba(248, 250, 252, 0.38);
+  --palette-text-inverted: #020617;
+  
+  /* Border palette - Dark ice */
+  --palette-border-main: #475569;
+  --palette-border-light: rgba(248, 250, 252, 0.12);
+  --palette-border-lighter: rgba(248, 250, 252, 0.05);
+  --palette-border-medium: #334155;
+  
+  /* Success palette - Aurora green */
+  --palette-success-main: #34d399;
+  --palette-success-light: #064e3b;
+  --palette-success-dark: #10b981;
+  --palette-success-border: #065f46;
+  
+  /* Error palette - Northern lights red */
+  --palette-error-main: #f87171;
+  --palette-error-light: #7f1d1d;
+  --palette-error-dark: #ef4444;
+  --palette-error-border: #991b1b;
+  
+  /* Warning palette - Aurora orange */
+  --palette-warning-main: #fb923c;
+  --palette-warning-light: #9a3412;
+  --palette-warning-dark: #f97316;
+  --palette-warning-border: #c2410c;
+  
+  /* Info palette - Polar blue */
+  --palette-info-main: #38bdf8;
+  --palette-info-light: #0c4a6e;
+  --palette-info-dark: #0ea5e9;
+  --palette-on-info: #020617;
+  --palette-info-border: #0284c7;
+  
+  /* Accent palette - Northern lights */
+  --palette-accent-main: #f472b6;
+  --palette-accent-light: #fce7f3;
+  --palette-accent-dark: #db2777;
+  --palette-on-accent: #f8fafc;
+  
+  /* Control palette - Midnight */
+  --palette-control-main: #1e293b;
+  --palette-control-light: #334155;
+  --palette-control-text: #e2e8f0;
+  --palette-control-border: #475569;
+}

package/dist/palettes/palette-winter.1.8.0.min.css

@@ -0,0 +1 @@
+html[data-palette="winter"]:not([data-theme="dark"]),html[data-palette="winter"][data-theme="light"]{--palette-primary-main:#0077be;--palette-primary-light:#5ba3d0;--palette-primary-dark:#005082;--palette-on-primary:#ffffff;--palette-secondary-main:#4682b4;--palette-secondary-light:#7ba7cc;--palette-secondary-dark:#2e5984;--palette-on-secondary:#ffffff;--palette-surface-main:#fafbfc;--palette-surface-variant:#e2e8f0;--palette-surface-elevated:#ffffff;--palette-on-surface:#0f172a;--palette-background-main:#f8fafc;--palette-background-dark:#f1f5f9;--palette-background-overlay:rgba(248,250,252,0.95);--palette-on-background:#475569;--palette-header-bg-start:rgba(248,250,252,0.98);--palette-header-bg-end:rgba(248,250,252,0.95);--palette-header-collapsed-bg-start:rgba(248,250,252,0.99);--palette-header-collapsed-bg-end:rgba(248,250,252,0.96);--palette-text-primary:#0f172a;--palette-text-secondary:#475569;--palette-text-disabled:rgba(15,23,42,0.38);--palette-text-inverted:#ffffff;--palette-border-main:#cbd5e1;--palette-border-light:rgba(15,23,42,0.12);--palette-border-lighter:rgba(15,23,42,0.05);--palette-border-medium:#94a3b8;--palette-success-main:#059669;--palette-success-light:#d1fae5;--palette-success-dark:#064e3b;--palette-success-border:#a7f3d0;--palette-error-main:#dc2626;--palette-error-light:#fee2e2;--palette-error-dark:#7f1d1d;--palette-on-error:#ffffff;--palette-error-border:#fecaca;--palette-warning-main:#d97706;--palette-warning-light:#fef3c7;--palette-warning-dark:#92400e;--palette-on-warning:#000000;--palette-warning-border:#fde68a;--palette-info-main:#0284c7;--palette-info-light:#e0f2fe;--palette-info-dark:#0c4a6e;--palette-on-info:#ffffff;--palette-info-border:#7dd3fc;--palette-accent-main:#ec4899;--palette-accent-light:#fce7f3;--palette-accent-dark:#be185d;--palette-on-accent:#ffffff;--palette-control-main:#1e293b;--palette-control-light:#334155;--palette-control-text:#e2e8f0;--palette-control-border:#475569}html[data-palette="winter"][data-theme="dark"]{--palette-primary-main:#7dd3fc;--palette-primary-light:#bae6fd;--palette-primary-dark:#0369a1;--palette-on-primary:#020617;--palette-secondary-main:#94a3b8;--palette-secondary-light:#cbd5e1;--palette-secondary-dark:#64748b;--palette-on-secondary:#020617;--palette-surface-main:#172033;--palette-surface-variant:#1e293b;--palette-surface-elevated:#334155;--palette-on-surface:#f8fafc;--palette-background-main:#04080f;--palette-background-dark:#0a1018;--palette-background-overlay:rgba(15,23,42,0.95);--palette-on-background:#cbd5e1;--palette-header-bg-start:rgba(4,8,15,0.98);--palette-header-bg-end:rgba(4,8,15,0.95);--palette-header-collapsed-bg-start:rgba(4,8,15,0.99);--palette-header-collapsed-bg-end:rgba(4,8,15,0.96);--palette-text-primary:#f8fafc;--palette-text-secondary:#cbd5e1;--palette-text-disabled:rgba(248,250,252,0.38);--palette-text-inverted:#020617;--palette-border-main:#475569;--palette-border-light:rgba(248,250,252,0.12);--palette-border-lighter:rgba(248,250,252,0.05);--palette-border-medium:#334155;--palette-success-main:#34d399;--palette-success-light:#064e3b;--palette-success-dark:#10b981;--palette-success-border:#065f46;--palette-error-main:#f87171;--palette-error-light:#7f1d1d;--palette-error-dark:#ef4444;--palette-error-border:#991b1b;--palette-warning-main:#fb923c;--palette-warning-light:#9a3412;--palette-warning-dark:#f97316;--palette-warning-border:#c2410c;--palette-info-main:#38bdf8;--palette-info-light:#0c4a6e;--palette-info-dark:#0ea5e9;--palette-on-info:#020617;--palette-info-border:#0284c7;--palette-accent-main:#f472b6;--palette-accent-light:#fce7f3;--palette-accent-dark:#db2777;--palette-on-accent:#f8fafc;--palette-control-main:#1e293b;--palette-control-light:#334155;--palette-control-text:#e2e8f0;--palette-control-border:#475569}

package/dist/schemas/FormFieldSchema.d.ts

@@ -18,6 +18,7 @@ export declare class FormFieldModel extends ViewSchema {
     multiline?: boolean;
     rows?: number;
     placeholder?: string;
+    name?: string;
 }
 export default FormFieldModel;
 //# sourceMappingURL=FormFieldSchema.d.ts.map

package/dist/schemas/FormFieldSchema.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormFieldSchema.d.ts","sourceRoot":"","sources":["../../src/schemas/FormFieldSchema.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,kBAAkB,CAAC;AAE1B,OAAO,UAAU,MAAM,cAAc,CAAC;AAEtC,qBACa,cAAe,SAAQ,UAAU;IAS5C,KAAK,EAAG,MAAM,CAAC;IAUf,KAAK,EAAG,MAAM,GAAG,MAAM,CAAC;IAUxB,IAAI,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,UAAU,GAAG,OAAO,GAAG,KAAK,CAAC;IAWxD,UAAU,CAAC,EAAE,MAAM,CAAC;IAUpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAUnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAUnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAWnB,aAAa,CAAC,EAAE,MAAM,CAAC;IAUvB,SAAS,CAAC,EAAE,OAAO,CAAC;IAUpB,SAAS,CAAC,EAAE,OAAO,CAAC;IAYpB,IAAI,CAAC,EAAE,MAAM,CAAC;IAWd,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAe,cAAc,CAAC"}
+{"version":3,"file":"FormFieldSchema.d.ts","sourceRoot":"","sources":["../../src/schemas/FormFieldSchema.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,kBAAkB,CAAC;AAE1B,OAAO,UAAU,MAAM,cAAc,CAAC;AAEtC,qBACa,cAAe,SAAQ,UAAU;IAS5C,KAAK,EAAG,MAAM,CAAC;IAUf,KAAK,EAAG,MAAM,GAAG,MAAM,CAAC;IAUxB,IAAI,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,UAAU,GAAG,OAAO,GAAG,KAAK,CAAC;IAWxD,UAAU,CAAC,EAAE,MAAM,CAAC;IAUpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAUnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAUnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAWnB,aAAa,CAAC,EAAE,MAAM,CAAC;IAUvB,SAAS,CAAC,EAAE,OAAO,CAAC;IAUpB,SAAS,CAAC,EAAE,OAAO,CAAC;IAYpB,IAAI,CAAC,EAAE,MAAM,CAAC;IAWd,WAAW,CAAC,EAAE,MAAM,CAAC;IAWrB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,eAAe,cAAc,CAAC"}

package/dist/schemas/FormSelectSchema.d.ts

@@ -15,6 +15,7 @@ export declare class FormSelectModel extends ViewSchema {
     fullWidth?: boolean;
     size?: 'small' | 'medium';
     placeholder?: string;
+    name?: string;
 }
 export default FormSelectModel;
 //# sourceMappingURL=FormSelectSchema.d.ts.map

package/dist/schemas/FormSelectSchema.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormSelectSchema.d.ts","sourceRoot":"","sources":["../../src/schemas/FormSelectSchema.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,kBAAkB,CAAC;AAE1B,OAAO,UAAU,MAAM,cAAc,CAAC;AAEtC,qBACa,eAAgB,SAAQ,UAAU;IAU7C,KAAK,CAAC,EAAE,MAAM,CAAC;IAUf,KAAK,EAAG,MAAM,GAAG,MAAM,CAAC;IAUxB,OAAO,EAAG,MAAM,CAAC;IAWjB,UAAU,CAAC,EAAE,MAAM,CAAC;IAUpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAUnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAUnB,SAAS,CAAC,EAAE,OAAO,CAAC;IAUpB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAW1B,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAe,eAAe,CAAC"}
+{"version":3,"file":"FormSelectSchema.d.ts","sourceRoot":"","sources":["../../src/schemas/FormSelectSchema.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,kBAAkB,CAAC;AAE1B,OAAO,UAAU,MAAM,cAAc,CAAC;AAEtC,qBACa,eAAgB,SAAQ,UAAU;IAU7C,KAAK,CAAC,EAAE,MAAM,CAAC;IAUf,KAAK,EAAG,MAAM,GAAG,MAAM,CAAC;IAUxB,OAAO,EAAG,MAAM,CAAC;IAWjB,UAAU,CAAC,EAAE,MAAM,CAAC;IAUpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAUnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAUnB,SAAS,CAAC,EAAE,OAAO,CAAC;IAUpB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAW1B,WAAW,CAAC,EAAE,MAAM,CAAC;IAWrB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,eAAe,eAAe,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qwickapps/react-framework",
-  "version": "1.8.1",
+  "version": "1.9.0",
   "description": "Complete React framework with responsive navigation, flexible layouts, theming system, and reusable components for building modern applications.",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
@@ -37,6 +37,24 @@
     "scripts",
     "QUICK_START_GUIDE.md"
   ],
+  "scripts": {
+    "build": "rollup -c && npm run build-palettes",
+    "build-palettes": "node scripts/build-palettes.cjs",
+    "build:dev": "NODE_ENV=development rollup -c && npm run build-palettes",
+    "build:prod": "NODE_ENV=production STRIP_LOGS=true rollup -c && npm run build-palettes",
+    "dev": "rollup -c -w",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "test:coverage": "jest --coverage",
+    "clean": "rm -rf dist node_modules .rollup.cache storybook-static",
+    "create-project": "node scripts/create-qwickapps-project.js",
+    "validate:clean-install": "./qa/clean-install/validate.sh",
+    "prepublishOnly": "npm run build && npm run validate:clean-install",
+    "publish": "npm publish",
+    "publish:palettes": "../../products/qwickapps/anvil/publish-palettes.sh",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
   "keywords": [
     "react",
     "framework",
@@ -164,21 +182,5 @@
     "type": "git",
     "url": "https://github.com/qwickapps/react-framework.git"
   },
-  "homepage": "https://github.com/qwickapps/react-framework#readme",
-  "scripts": {
-    "build": "rollup -c && npm run build-palettes",
-    "build-palettes": "node scripts/build-palettes.cjs",
-    "build:dev": "NODE_ENV=development rollup -c && npm run build-palettes",
-    "build:prod": "NODE_ENV=production STRIP_LOGS=true rollup -c && npm run build-palettes",
-    "dev": "rollup -c -w",
-    "test": "jest",
-    "test:watch": "jest --watch",
-    "test:coverage": "jest --coverage",
-    "clean": "rm -rf dist node_modules .rollup.cache storybook-static",
-    "create-project": "node scripts/create-qwickapps-project.js",
-    "validate:clean-install": "./qa/clean-install/validate.sh",
-    "publish:palettes": "../../products/qwickapps/anvil/publish-palettes.sh",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
-  }
-}
+  "homepage": "https://github.com/qwickapps/react-framework#readme"
+}

package/src/components/Html.tsx

@@ -137,7 +137,13 @@ function HtmlView({
           ...styleProps.sx
         }}
       >
-        {components}
+        {Array.isArray(components)
+          ? components.map((child, idx) =>
+              React.isValidElement(child) && child.key == null
+                ? React.cloneElement(child as ReactElement, { key: `html-child-${idx}` })
+                : child
+            )
+          : components}
       </Box>
     );
 

package/src/components/Logo.tsx

@@ -233,7 +233,7 @@ function LogoView({
       setCalculatedBadgePosition(badgePos);
       setSvgWidth(requiredWidth);
     }
-  }, [name, badge, badgeOffset, calculateBadgePosition, fontSize, height, parseNameParts, svgWidth]);
+  }, [name, badge, badgeOffset, calculateBadgePosition, fontSize, height, parseNameParts]);
   
   // Determine CSS class for variant
   let variantClass = '';