slicejs-web-framework 4.0.1 → 4.0.2

package/src/Components/AppComponents/HomeSection/HomeSection.css

@@ -1,20 +1,20 @@
-.home {
-  text-align: center;
-  padding: 32px 0;
-}
-
-.home__title {
-  font-size: 2rem;
-  margin-bottom: 12px;
-}
-
-.home__lead {
-  color: var(--font-secondary-color);
-  max-width: 60ch;
-  margin: 0 auto 24px;
-  line-height: 1.6;
-}
-
-.home__lead code {
-  color: var(--font-primary-color);
-}
+.home {
+  text-align: center;
+  padding: 32px 0;
+}
+
+.home__title {
+  font-size: 2rem;
+  margin-bottom: 12px;
+}
+
+.home__lead {
+  color: var(--font-secondary-color);
+  max-width: 60ch;
+  margin: 0 auto 24px;
+  line-height: 1.6;
+}
+
+.home__lead code {
+  color: var(--font-primary-color);
+}

package/src/Components/AppComponents/HomeSection/HomeSection.html

@@ -1,10 +1,10 @@
-<section class="home">
-  <h1 class="home__title">Welcome to your Slice app</h1>
-  <p class="home__lead">
-    This is the App Shell + MultiRoute starter. Edit
-    <code>src/Components/AppComponents/HomeSection/</code> to change this page, or add a
-    section: create an AppComponent, then register it in <code>src/routes.js</code> and in
-    the AppShell's MultiRoute.
-  </p>
-  <div class="home__cta"></div>
-</section>
+<section class="home">
+  <h1 class="home__title">Welcome to your Slice app</h1>
+  <p class="home__lead">
+    This is the App Shell + MultiRoute starter. Edit
+    <code>src/Components/AppComponents/HomeSection/</code> to change this page, or add a
+    section: create an AppComponent, then register it in <code>src/routes.js</code> and in
+    the AppShell's MultiRoute.
+  </p>
+  <div class="home__cta"></div>
+</section>

package/src/Components/AppComponents/HomeSection/HomeSection.js

@@ -1,19 +1,19 @@
-export default class HomeSection extends HTMLElement {
-   constructor(props) {
-      super();
-      slice.attachTemplate(this);
-      this.$cta = this.querySelector('.home__cta');
-      slice.controller.setComponentProps(this, props);
-   }
-
-   async init() {
-      // Build child components with slice.build (always await).
-      const button = await slice.build('Button', {
-         value: 'Go to About',
-         onClickCallback: () => slice.router.navigate('/about')
-      });
-      this.$cta.appendChild(button);
-   }
-}
-
-customElements.define('slice-home-section', HomeSection);
+export default class HomeSection extends HTMLElement {
+   constructor(props) {
+      super();
+      slice.attachTemplate(this);
+      this.$cta = this.querySelector('.home__cta');
+      slice.controller.setComponentProps(this, props);
+   }
+
+   async init() {
+      // Build child components with slice.build (always await).
+      const button = await slice.build('Button', {
+         value: 'Go to About',
+         onClickCallback: () => slice.router.navigate('/about')
+      });
+      this.$cta.appendChild(button);
+   }
+}
+
+customElements.define('slice-home-section', HomeSection);

package/src/Components/components.js

@@ -1,8 +1,8 @@
-// Template registry: only the AppComponents the starter ships in-tree.
-// Visual and Service components are installed from the registry by `slice init`
-// (and any later `slice get`), which registers them here automatically.
-const components = {
-  "AppShell": "AppComponents",
-  "HomeSection": "AppComponents",
-  "AboutSection": "AppComponents"
-}; export default components;
+// Template registry: only the AppComponents the starter ships in-tree.
+// Visual and Service components are installed from the registry by `slice init`
+// (and any later `slice get`), which registers them here automatically.
+const components = {
+  "AppShell": "AppComponents",
+  "HomeSection": "AppComponents",
+  "AboutSection": "AppComponents"
+}; export default components;

package/src/public/Styles/sliceStyles.css

@@ -1,34 +1,34 @@
-@import url("https://fonts.googleapis.com/css2?family=Montserrat&family=Poppins&family=Roboto&display=swap");
-
-:root {
-  --font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
-    Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
-  --border-radius-slice: 5px;
-  --slice-border: 1px;
-}
-body {
-  margin: 0;
-  background-color: var(--primary-background-color);
-}
-.caret {
-  cursor: pointer;
-  width: 0;
-  height: 0;
-  border-left: 5px solid transparent;
-  border-right: 5px solid transparent;
-  border-top: 6px solid;
-  transition: transform 0.3s;
-}
-.caret_open {
-  transform: rotate(180deg);
-}
-*::-webkit-scrollbar {
-  width: 5px;
-}
-*::-webkit-scrollbar:horizontal {
-  height: 3px;
-}
-*::-webkit-scrollbar-thumb {
-  background: var(--secondary-color);
-  border-radius: var(--border-radius-slice);
-}
+@import url("https://fonts.googleapis.com/css2?family=Montserrat&family=Poppins&family=Roboto&display=swap");
+
+:root {
+  --font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
+    Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --border-radius-slice: 5px;
+  --slice-border: 1px;
+}
+body {
+  margin: 0;
+  background-color: var(--primary-background-color);
+}
+.caret {
+  cursor: pointer;
+  width: 0;
+  height: 0;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  border-top: 6px solid;
+  transition: transform 0.3s;
+}
+.caret_open {
+  transform: rotate(180deg);
+}
+*::-webkit-scrollbar {
+  width: 5px;
+}
+*::-webkit-scrollbar:horizontal {
+  height: 3px;
+}
+*::-webkit-scrollbar-thumb {
+  background: var(--secondary-color);
+  border-radius: var(--border-radius-slice);
+}

package/src/public/Themes/Dark.css

@@ -1,42 +1,42 @@
-:root {
-  --font-primary-color: #fff;
-
-  /** primary **/
-  --primary-color: #0066ff;
-  --primary-color-rgb: rgb(0, 102, 255);
-  /* Se reemplaza el negro puro por un gris muy oscuro, más cálido y agradable */
-  --primary-background-color: #282828; /* antes: #000 */
-  --primary-color-contrast: #000;
-  /* Ajustamos la sombra para que armonice con el fondo aclarado */
-  --primary-color-shade: #383838; /* antes: #222 */
-
-  /** secondary **/
-  --secondary-color: #63ccfd;
-  --secondary-color-rgb: rgb(99, 204, 253);
-  /* Se aclara el fondo secundario para suavizar el efecto general */
-  --secondary-background-color: #333333; /* antes: #222 */
-  --secondary-color-contrast: #fff;
-
-  /** tertiary **/
-  /* Se levanta ligeramente el fondo terciario para mantener la coherencia visual */
-  --tertiary-background-color: #555555; /* antes: #444 */
-
-  /** success **/
-  --success-color: #00ff40;
-  --success-contrast: #000;
-
-  /** warning **/
-  --warning-color: #ffff40;
-  --warning-contrast: #000;
-
-  /** danger **/
-  --danger-color: #ff0000;
-  --danger-contrast: #000;
-
-  /** medium **/
-  --medium-color: #92949c;
-  --medium-contrast: #fff;
-
-  /* Disabled color */
-  --disabled-color: #7f7f7f;
-}
+:root {
+  --font-primary-color: #fff;
+
+  /** primary **/
+  --primary-color: #0066ff;
+  --primary-color-rgb: rgb(0, 102, 255);
+  /* Se reemplaza el negro puro por un gris muy oscuro, más cálido y agradable */
+  --primary-background-color: #282828; /* antes: #000 */
+  --primary-color-contrast: #000;
+  /* Ajustamos la sombra para que armonice con el fondo aclarado */
+  --primary-color-shade: #383838; /* antes: #222 */
+
+  /** secondary **/
+  --secondary-color: #63ccfd;
+  --secondary-color-rgb: rgb(99, 204, 253);
+  /* Se aclara el fondo secundario para suavizar el efecto general */
+  --secondary-background-color: #333333; /* antes: #222 */
+  --secondary-color-contrast: #fff;
+
+  /** tertiary **/
+  /* Se levanta ligeramente el fondo terciario para mantener la coherencia visual */
+  --tertiary-background-color: #555555; /* antes: #444 */
+
+  /** success **/
+  --success-color: #00ff40;
+  --success-contrast: #000;
+
+  /** warning **/
+  --warning-color: #ffff40;
+  --warning-contrast: #000;
+
+  /** danger **/
+  --danger-color: #ff0000;
+  --danger-contrast: #000;
+
+  /** medium **/
+  --medium-color: #92949c;
+  --medium-contrast: #fff;
+
+  /* Disabled color */
+  --disabled-color: #7f7f7f;
+}

package/src/public/Themes/Light.css

@@ -1,31 +1,31 @@
-:root {
-  --font-primary-color: #000;
-  --font-secondary-color: #474747;
-  /** primary **/
-  --primary-color: #0066ff;
-  --primary-color-rgb: rgb(0, 102, 255);
-  --primary-background-color: #fff;
-  --primary-color-contrast: #fff;
-  --primary-color-shade: #ddd;
-  /** secondary **/
-  --secondary-color: #63ccfd;
-  --secondary-color-rgb: rgb(99, 204, 253);
-  --secondary-background-color: #ddd;
-  --secondary-color-contrast: #fff;
-  /** tertiary **/
-  --tertiary-background-color: #c4c4c4;
-  /** success **/
-  --success-color: #00ff40;
-  --success-contrast: #fff;
-  /** warning **/
-  --warning-color: #ffff40;
-  --warning-contrast: #000;
-  /** danger **/
-  --danger-color: #ff0000;
-  --danger-contrast: #fff;
-  /** medium **/
-  --medium-color: #92949c;
-  --medium--contrast: #000;
-
-  --disabled-color: #7f7f7f;
-}
+:root {
+  --font-primary-color: #000;
+  --font-secondary-color: #474747;
+  /** primary **/
+  --primary-color: #0066ff;
+  --primary-color-rgb: rgb(0, 102, 255);
+  --primary-background-color: #fff;
+  --primary-color-contrast: #fff;
+  --primary-color-shade: #ddd;
+  /** secondary **/
+  --secondary-color: #63ccfd;
+  --secondary-color-rgb: rgb(99, 204, 253);
+  --secondary-background-color: #ddd;
+  --secondary-color-contrast: #fff;
+  /** tertiary **/
+  --tertiary-background-color: #c4c4c4;
+  /** success **/
+  --success-color: #00ff40;
+  --success-contrast: #fff;
+  /** warning **/
+  --warning-color: #ffff40;
+  --warning-contrast: #000;
+  /** danger **/
+  --danger-color: #ff0000;
+  --danger-contrast: #fff;
+  /** medium **/
+  --medium-color: #92949c;
+  --medium--contrast: #000;
+
+  --disabled-color: #7f7f7f;
+}

package/src/public/Themes/Slice.css

@@ -1,47 +1,47 @@
-:root {
-  /* Tipografía */
-  --font-primary-color: #2E1A47; /* Uva oscuro, elegante para lectura */
-  --font-secondary-color: #7D3AC1; /* Uva brillante para títulos y resaltes */
-
-  /** Primary - Uva intenso **/
-  --primary-color: #7D3AC1;
-  --primary-color-rgb: 125, 58, 193;
-  --primary-background-color: #F8F4FF; /* Lila muy claro como fondo principal */
-  --primary-color-contrast: #ffffff;
-  --primary-color-shade: #4E2279;
-
-  /** Secondary - Lima vibrante **/
-  --secondary-color: #C6FF00; /* Amarillo lima brillante, capta la atención */
-  --secondary-color-rgb: 198, 255, 0;
-  --secondary-background-color: #F9FFE1;
-  --secondary-color-contrast: #2E2E2E;
-
-  /** Tertiary - Turquesa suave **/
-  --tertiary-background-color: #D0F4F2; /* Fondo suave, fresco y moderno */
-
-  /** Success - Verde esmeralda claro **/
-  --success-color: #00B894;
-  --success-contrast: #ffffff;
-
-  /** Warning - Amarillo más tradicional pero suave **/
-  --warning-color: #FFD54F;
-  --warning-contrast: #3E2723;
-
-  /** Danger - Coral vibrante (sin caer en rojo tradicional) **/
-  --danger-color: #FF6F61;
-  --danger-contrast: #ffffff;
-
-  /** Medium - Gris lavanda para texto secundario **/
-  --medium-color: #A89FB5;
-  --medium-contrast: #000000;
-
-  /** Disabled - Gris pastel lavanda **/
-  --disabled-color: #E6E0F1;
-
-  /** Accent - Turquesa brillante para detalles elegantes **/
-  --accent-color: #00CFC1;
-
-  /* Sombras */
-  --box-shadow-primary: 0px 4px 12px rgba(125, 58, 193, 0.15);
-  --box-shadow-secondary: 0px 3px 8px rgba(198, 255, 0, 0.1);
-}
+:root {
+  /* Tipografía */
+  --font-primary-color: #2E1A47; /* Uva oscuro, elegante para lectura */
+  --font-secondary-color: #7D3AC1; /* Uva brillante para títulos y resaltes */
+
+  /** Primary - Uva intenso **/
+  --primary-color: #7D3AC1;
+  --primary-color-rgb: 125, 58, 193;
+  --primary-background-color: #F8F4FF; /* Lila muy claro como fondo principal */
+  --primary-color-contrast: #ffffff;
+  --primary-color-shade: #4E2279;
+
+  /** Secondary - Lima vibrante **/
+  --secondary-color: #C6FF00; /* Amarillo lima brillante, capta la atención */
+  --secondary-color-rgb: 198, 255, 0;
+  --secondary-background-color: #F9FFE1;
+  --secondary-color-contrast: #2E2E2E;
+
+  /** Tertiary - Turquesa suave **/
+  --tertiary-background-color: #D0F4F2; /* Fondo suave, fresco y moderno */
+
+  /** Success - Verde esmeralda claro **/
+  --success-color: #00B894;
+  --success-contrast: #ffffff;
+
+  /** Warning - Amarillo más tradicional pero suave **/
+  --warning-color: #FFD54F;
+  --warning-contrast: #3E2723;
+
+  /** Danger - Coral vibrante (sin caer en rojo tradicional) **/
+  --danger-color: #FF6F61;
+  --danger-contrast: #ffffff;
+
+  /** Medium - Gris lavanda para texto secundario **/
+  --medium-color: #A89FB5;
+  --medium-contrast: #000000;
+
+  /** Disabled - Gris pastel lavanda **/
+  --disabled-color: #E6E0F1;
+
+  /** Accent - Turquesa brillante para detalles elegantes **/
+  --accent-color: #00CFC1;
+
+  /* Sombras */
+  --box-shadow-primary: 0px 4px 12px rgba(125, 58, 193, 0.15);
+  --box-shadow-secondary: 0px 3px 8px rgba(198, 255, 0, 0.1);
+}

package/src/public/manifest.json

@@ -1,15 +1,15 @@
-{
-  "name": "Slice.js Web Framework",
-  "short_name": "Slice.js",
-  "start_url": "/",
-  "display": "standalone",
-  "background_color": "#F8F4FF",
-  "theme_color": "#F8F4FF",
-  "icons": [
-    {
-      "src": "/images/favicon.ico",
-      "sizes": "192x192 512x512",
-      "type": "image/x-icon"
-    }
-  ]
-}
+{
+  "name": "Slice.js Web Framework",
+  "short_name": "Slice.js",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#F8F4FF",
+  "theme_color": "#F8F4FF",
+  "icons": [
+    {
+      "src": "/images/favicon.ico",
+      "sizes": "192x192 512x512",
+      "type": "image/x-icon"
+    }
+  ]
+}

package/src/public/robots.txt

@@ -1,4 +1,4 @@
-User-agent: *
-Allow: /
-
-Sitemap: https://slicejs.com/sitemap.xml
+User-agent: *
+Allow: /
+
+Sitemap: https://slicejs.com/sitemap.xml

package/src/public/sitemap.xml

@@ -1,8 +1,8 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
-  <url>
-    <loc>https://slicejs.com/</loc>
-    <priority>1.0</priority>
-    <changefreq>weekly</changefreq>
-  </url>
-</urlset>
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+  <url>
+    <loc>https://slicejs.com/</loc>
+    <priority>1.0</priority>
+    <changefreq>weekly</changefreq>
+  </url>
+</urlset>

package/src/routes.js

@@ -1,10 +1,10 @@
-// App Shell + MultiRoute starter.
-// Every section URL renders AppShell, which swaps the content area via a MultiRoute.
-// Dynamic params use ${name} (NOT :name). Keep the 404 route last.
-const routes = [
-   { path: '/',      component: 'AppShell', metadata: { title: 'Home' } },
-   { path: '/about', component: 'AppShell', metadata: { title: 'About' } },
-   { path: '/404',   component: 'NotFound', metadata: { title: 'Not Found' } }
-];
-
+// App Shell + MultiRoute starter.
+// Every section URL renders AppShell, which swaps the content area via a MultiRoute.
+// Dynamic params use ${name} (NOT :name). Keep the 404 route last.
+const routes = [
+   { path: '/',      component: 'AppShell', metadata: { title: 'Home' } },
+   { path: '/about', component: 'AppShell', metadata: { title: 'About' } },
+   { path: '/404',   component: 'NotFound', metadata: { title: 'Not Found' } }
+];
+
 export default routes;

package/src/sliceConfig.json

@@ -1,72 +1,72 @@
-{
-   "server": {
-      "port": 3001,
-      "host": "localhost"
-   },
-   "debugger": {
-      "enabled": false,
-      "click": "right",
-      "leakInspector": {
-         "enabled": true,
-         "shortcut": "alt+shift+k"
-      }
-   },
-   "events": {
-      "enabled": true,
-      "ui": {
-         "enabled": true,
-         "shortcut": "alt+shift+e"
-      }
-   },
-   "context": {
-      "enabled": true,
-      "ui": {
-         "enabled": true,
-         "shortcut": "alt+shift+c"
-      }
-   },
-   "stylesManager": {
-      "requestedStyles": ["sliceStyles"]
-   },
-   "themeManager": {
-      "enabled": true,
-      "defaultTheme": "Slice",
-      "saveThemeLocally": false,
-      "useBrowserTheme": false
-   },
-   "logger": {
-      "enabled": true,
-      "showLogs": {
-         "console": {
-            "error": true,
-            "warning": true,
-            "info": false
-         }
-      }
-   },
-   "paths": {
-      "components": {
-         "AppComponents": {
-            "path": "/Components/AppComponents",
-            "type": "Visual"
-         },
-         "Visual": {
-            "path": "/Components/Visual",
-            "type": "Visual"
-         },
-         "Service": {
-            "path": "/Components/Service",
-            "type": "Service"
-         }
-      },
-      "themes": "/Themes",
-      "styles": "/Styles",
-      "routesFile": "/routes.js"
-   },
-   "router": {
-      "defaultRoute": "/"
-   },
-  "loading": {
-     "enabled": true
-  }
-}
+{
+   "server": {
+      "port": 3001,
+      "host": "localhost"
+   },
+   "debugger": {
+      "enabled": false,
+      "click": "right",
+      "leakInspector": {
+         "enabled": true,
+         "shortcut": "alt+shift+k"
+      }
+   },
+   "events": {
+      "enabled": true,
+      "ui": {
+         "enabled": true,
+         "shortcut": "alt+shift+e"
+      }
+   },
+   "context": {
+      "enabled": true,
+      "ui": {
+         "enabled": true,
+         "shortcut": "alt+shift+c"
+      }
+   },
+   "stylesManager": {
+      "requestedStyles": ["sliceStyles"]
+   },
+   "themeManager": {
+      "enabled": true,
+      "defaultTheme": "Slice",
+      "saveThemeLocally": false,
+      "useBrowserTheme": false
+   },
+   "logger": {
+      "enabled": true,
+      "showLogs": {
+         "console": {
+            "error": true,
+            "warning": true,
+            "info": false
+         }
+      }
+   },
+   "paths": {
+      "components": {
+         "AppComponents": {
+            "path": "/Components/AppComponents",
+            "type": "Visual"
+         },
+         "Visual": {
+            "path": "/Components/Visual",
+            "type": "Visual"
+         },
+         "Service": {
+            "path": "/Components/Service",
+            "type": "Service"
+         }
+      },
+      "themes": "/Themes",
+      "styles": "/Styles",
+      "routesFile": "/routes.js"
+   },
+   "router": {
+      "defaultRoute": "/"
+   },
+  "loading": {
+     "enabled": true
+  }
+}