slicejs-web-framework 4.0.2 → 4.1.1

package/src/Components/AppComponents/AppShell/AppShell.js

@@ -1,36 +1,36 @@
-export default class AppShell extends HTMLElement {
-   constructor(props) {
-      super();
-      slice.attachTemplate(this);
-      this.$header = this.querySelector('.app-shell__header');
-      this.$content = this.querySelector('.app-shell__content');
-      slice.controller.setComponentProps(this, props);
-   }
-
-   async init() {
-      // Persistent navbar — built once, stays across navigations.
-      const navbar = await slice.build('Navbar', {
-         sliceId: 'app-navbar',
-         position: 'fixed',
-         items: [
-            { text: 'Home', path: '/' },
-            { text: 'About', path: '/about' }
-         ]
-      });
-      this.$header.appendChild(navbar);
-
-      // Content area — a MultiRoute swaps the matching section by URL.
-      // MultiRoute caches each section instance, so give sections an update()
-      // method if they show dynamic data.
-      const content = await slice.build('MultiRoute', {
-         sliceId: 'app-content',
-         routes: [
-            { path: '/', component: 'HomeSection' },
-            { path: '/about', component: 'AboutSection' }
-         ]
-      });
-      this.$content.appendChild(content);
-   }
-}
-
-customElements.define('slice-app-shell', AppShell);
+export default class AppShell extends HTMLElement {
+   constructor(props) {
+      super();
+      slice.attachTemplate(this);
+      this.$header = this.querySelector('.app-shell__header');
+      this.$content = this.querySelector('.app-shell__content');
+      slice.controller.setComponentProps(this, props);
+   }
+
+   async init() {
+      // Persistent navbar — built once, stays across navigations.
+      const navbar = await slice.build('Navbar', {
+         sliceId: 'app-navbar',
+         position: 'fixed',
+         items: [
+            { text: 'Home', path: '/' },
+            { text: 'About', path: '/about' }
+         ]
+      });
+      this.$header.appendChild(navbar);
+
+      // Content area — a MultiRoute swaps the matching section by URL.
+      // MultiRoute caches each section instance, so give sections an update()
+      // method if they show dynamic data.
+      const content = await slice.build('MultiRoute', {
+         sliceId: 'app-content',
+         routes: [
+            { path: '/', component: 'HomeSection' },
+            { path: '/about', component: 'AboutSection' }
+         ]
+      });
+      this.$content.appendChild(content);
+   }
+}
+
+customElements.define('slice-app-shell', AppShell);

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;