@danielito1996/compose-svelted 0.2.7 → 0.2.8-alpha01

package/dist/core/modifier/ModifierImpl.js

@@ -1,3 +1,14 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
         if (ar || !(i in from)) {
@@ -8,6 +19,11 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 import { resolveColor } from "../theme/resolve";
+import { resolveBoxPlaceSelf, resolveColumnAlignSelf, resolveRowAlignSelf } from "../../components/layouts/resolveAlignment";
+function toCssLength(value, unit) {
+    if (unit === void 0) { unit = "px"; }
+    return typeof value === "number" ? "".concat(value).concat(unit) : value;
+}
 var ModifierImpl = /** @class */ (function () {
     function ModifierImpl(entries) {
         if (entries === void 0) { entries = []; }
@@ -16,198 +32,143 @@ var ModifierImpl = /** @class */ (function () {
     ModifierImpl.prototype.then = function (other) {
         return new ModifierImpl(__spreadArray(__spreadArray([], this.entries, true), other.entries, true));
     };
-    ModifierImpl.prototype.paddingHorizontal = function (value) {
-        return this.then(new ModifierImpl([
-            { style: "padding-left:".concat(value, "px;padding-right:").concat(value, "px;") },
-        ]));
-    };
-    ModifierImpl.prototype.verticalScroll = function (enabled) {
-        if (enabled === void 0) { enabled = true; }
-        return this.then(new ModifierImpl([{
-                style: enabled
-                    ? "overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;"
-                    : ''
-            }]));
-    };
-    ModifierImpl.prototype.horizontalScroll = function (enabled) {
-        if (enabled === void 0) { enabled = true; }
-        return this.then(new ModifierImpl([{
-                style: enabled
-                    ? "overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;white-space:nowrap;"
-                    : ''
-            }]));
-    };
-    ModifierImpl.prototype.paddingVertical = function (value) {
-        return this.then(new ModifierImpl([
-            { style: "padding-top:".concat(value, "px;padding-bottom:").concat(value, "px;") },
-        ]));
-    };
     ModifierImpl.prototype.fillMaxWidth = function () {
-        return this.then(new ModifierImpl([{ style: "width:100%;" }]));
+        // En flexbox, width:100% y align-self:stretch aseguran ocupar el ancho
+        return this.then(new ModifierImpl([{ style: "width:100%;align-self:stretch;" }]));
     };
     ModifierImpl.prototype.fillMaxHeight = function () {
-        return this.then(new ModifierImpl([{ style: "height:100%;" }]));
+        // En flexbox (como Row), align-self:stretch es clave para llenar el alto transversal
+        // height:100% ayuda en contextos de bloque o flex-direction: column
+        return this.then(new ModifierImpl([{ style: "height:100%;align-self:stretch;" }]));
     };
     ModifierImpl.prototype.fillMaxSize = function () {
-        return this.then(new ModifierImpl([{ style: "width:100%;height:100%;" }]));
+        return this.then(new ModifierImpl([{ style: "width:100%;height:100%;align-self:stretch;" }]));
     };
-    ModifierImpl.prototype.background = function (color) {
-        var resolved;
-        if (typeof color === "string" &&
-            (color.startsWith("#") ||
-                color.startsWith("rgb") ||
-                color.startsWith("hsl") ||
-                color === "transparent" ||
-                color === "currentColor")) {
-            // Color CSS directo
-            resolved = color;
-        }
-        else {
-            // Token de ComposeTheme
-            resolved = resolveColor(color);
-        }
-        return this.then(new ModifierImpl([
-            { style: "background:".concat(resolved, ";") }
-        ]));
+    ModifierImpl.prototype.width = function (value, unit) {
+        if (unit === void 0) { unit = "px"; }
+        return this.then(new ModifierImpl([{ style: "width:".concat(toCssLength(value, unit), ";") }]));
+    };
+    ModifierImpl.prototype.height = function (value, unit) {
+        if (unit === void 0) { unit = "px"; }
+        return this.then(new ModifierImpl([{ style: "height:".concat(toCssLength(value, unit), ";") }]));
+    };
+    ModifierImpl.prototype.size = function (value, unit) {
+        if (unit === void 0) { unit = "px"; }
+        var cssValue = toCssLength(value, unit);
+        return this.then(new ModifierImpl([{ style: "width:".concat(cssValue, ";height:").concat(cssValue, ";") }]));
     };
     ModifierImpl.prototype.weight = function (weight, fill) {
         if (fill === void 0) { fill = true; }
         if (weight <= 0) {
-            console.warn("Modifier.weight() debe ser > 0");
             return this;
         }
-        var styleParts = [
-            "flex-grow: ".concat(weight, ";"),
-            "flex-shrink: ".concat(fill ? 1 : 0, ";"),
-            "flex-basis: 0%;" // importante para que el peso funcione bien
-        ];
-        return this.then(new ModifierImpl([{ style: styleParts.join(" ") }]));
-    };
-    ModifierImpl.prototype.align = function (alignment) {
-        var parts = alignment.split(' ');
-        var horizontal = parts[0]; // flex-start, center, flex-end
-        var vertical = parts[1] || parts[0]; // para casos simples como "center"
-        var style = 'position: absolute;';
-        // Vertical
-        if (vertical === 'flex-start') {
-            style += 'top: 0;';
-        }
-        else if (vertical === 'flex-end') {
-            style += 'bottom: 0;';
-        }
-        else if (vertical === 'center') {
-            style += 'top: 50%; transform: translateY(-50%);';
-        }
-        // Horizontal
-        if (horizontal === 'flex-start') {
-            style += 'left: 0;';
-        }
-        else if (horizontal === 'flex-end') {
-            style += 'right: 0;';
-        }
-        else if (horizontal === 'center') {
-            style += 'left: 50%;';
-            // Combinar transform si ya hay translateY
-            if (style.includes('translateY')) {
-                style = style.replace('translateY(-50%)', 'translate(-50%, -50%)');
-            }
-            else {
-                style += 'transform: translateX(-50%);';
+        return this.then(new ModifierImpl([
+            {
+                style: "flex-grow:".concat(weight, ";flex-shrink:").concat(fill ? 1 : 0, ";flex-basis:0%;")
             }
-        }
-        return this.then(new ModifierImpl([{ style: style }]));
+        ]));
     };
     ModifierImpl.prototype.padding = function (valueOrParams, unit) {
         if (valueOrParams === void 0) { valueOrParams = 0; }
-        if (unit === void 0) { unit = 'px'; }
-        var style = '';
-        if (typeof valueOrParams === 'number') {
-            // Padding uniforme
-            style = "padding:".concat(valueOrParams).concat(unit, ";");
-        }
-        else {
-            // Padding direccional
-            var _a = valueOrParams.top, top = _a === void 0 ? 0 : _a, _b = valueOrParams.bottom, bottom = _b === void 0 ? 0 : _b, _c = valueOrParams.start, start = _c === void 0 ? 0 : _c, _d = valueOrParams.end, end = _d === void 0 ? 0 : _d;
-            style = "\n                padding-top:".concat(top).concat(unit, ";\n                padding-bottom:").concat(bottom).concat(unit, ";\n                padding-left:").concat(start).concat(unit, ";\n                //padding-right:").concat(end).concat(unit, ";\n    ").trim();
+        if (unit === void 0) { unit = "px"; }
+        if (typeof valueOrParams === "number") {
+            return this.then(new ModifierImpl([{ style: "padding:".concat(valueOrParams).concat(unit, ";") }]));
         }
-        return this.then(new ModifierImpl([{ style: style }]));
+        var _a = valueOrParams.top, top = _a === void 0 ? 0 : _a, _b = valueOrParams.bottom, bottom = _b === void 0 ? 0 : _b, _c = valueOrParams.start, start = _c === void 0 ? 0 : _c, _d = valueOrParams.end, end = _d === void 0 ? 0 : _d;
+        return this.then(new ModifierImpl([
+            {
+                style: [
+                    "padding-top:".concat(top).concat(unit, ";"),
+                    "padding-bottom:".concat(bottom).concat(unit, ";"),
+                    "padding-left:".concat(start).concat(unit, ";"),
+                    "padding-right:".concat(end).concat(unit, ";")
+                ].join("")
+            }
+        ]));
     };
-    ModifierImpl.prototype.width = function (value, unit) {
-        if (unit === void 0) { unit = 'px'; }
-        var size = typeof value === 'number' ? "".concat(value).concat(unit) : value;
-        return this.then(new ModifierImpl([{ style: "width:".concat(size, ";") }]));
+    ModifierImpl.prototype.paddingHorizontal = function (value) {
+        return this.then(new ModifierImpl([
+            { style: "padding-left:".concat(value, "px;padding-right:").concat(value, "px;") }
+        ]));
     };
-    ModifierImpl.prototype.height = function (value, unit) {
-        if (unit === void 0) { unit = 'px'; }
-        var size = typeof value === 'number' ? "".concat(value).concat(unit) : value;
-        return this.then(new ModifierImpl([{ style: "height:".concat(size, ";") }]));
+    ModifierImpl.prototype.paddingVertical = function (value) {
+        return this.then(new ModifierImpl([
+            { style: "padding-top:".concat(value, "px;padding-bottom:").concat(value, "px;") }
+        ]));
     };
     ModifierImpl.prototype.marginTop = function (value, unit) {
-        if (unit === void 0) { unit = 'px'; }
+        if (unit === void 0) { unit = "px"; }
         return this.then(new ModifierImpl([{ style: "margin-top:".concat(value).concat(unit, ";") }]));
     };
-    ModifierImpl.prototype.clip = function (shape) {
-        return this.then(new ModifierImpl([
-            {
-                style: "\n                    border-radius:".concat(shape.toCssBorderRadius(), ";\n                    overflow:hidden;\n                ")
-            }
-        ]));
+    ModifierImpl.prototype.background = function (color) {
+        var resolved = typeof color === "string" ? color : resolveColor(color);
+        return this.then(new ModifierImpl([{ style: "background:".concat(resolved, ";") }]));
     };
-    ModifierImpl.prototype.size = function (value, unit) {
-        if (unit === void 0) { unit = "px"; }
-        if (value === null || value === undefined) {
+    ModifierImpl.prototype.border = function (width, color, shape) {
+        if (width <= 0) {
             return this;
         }
-        var resolved;
-        if (typeof value === "number") {
-            if (isNaN(value))
-                return this;
-            resolved = "".concat(value).concat(unit);
-        }
-        else {
-            if (value.trim() === "")
-                return this;
-            resolved = value;
-        }
+        var borderRadius = shape ? "border-radius:".concat(shape.toCssBorderRadius(), ";") : "";
         return this.then(new ModifierImpl([
-            {
-                style: "width:".concat(resolved, ";height:").concat(resolved, ";")
-            }
+            { style: "border:".concat(width, "px solid ").concat(color, ";").concat(borderRadius) }
         ]));
     };
-    ModifierImpl.prototype.offset = function (x, y) {
-        if (isNaN(x) || isNaN(y))
-            return this;
+    ModifierImpl.prototype.clip = function (shape) {
         return this.then(new ModifierImpl([
-            {
-                style: "transform: translate(".concat(x, "px, ").concat(y, "px);")
-            }
+            { style: "border-radius:".concat(shape.toCssBorderRadius(), ";overflow:hidden;") }
         ]));
     };
-    ModifierImpl.prototype.clickable = function (onClick) {
+    ModifierImpl.prototype.offset = function (x, y) {
         return this.then(new ModifierImpl([
-            {
-                className: "compose-clickable",
-                style: "\n                    cursor: pointer;\n                    user-select: none;\n                "
-            }
+            { style: "transform:translate(".concat(x, "px, ").concat(y, "px);") }
         ]));
     };
-    ModifierImpl.prototype.border = function (width, color, shape) {
-        if (width <= 0)
-            return this;
-        var radius = shape ? shape.toCssBorderRadius() : undefined;
+    /**
+     * Sobreescribe la alineación de este hijo dentro de un contenedor (Box, Column, Row).
+     * Equivalente a Modifier.align() en Jetpack Compose.
+     */
+    ModifierImpl.prototype.align = function (alignment) {
+        return this.then(new ModifierImpl([{ meta: { align: alignment } }]));
+    };
+    ModifierImpl.prototype.clickable = function (_onClick) {
         return this.then(new ModifierImpl([
-            {
-                style: "\n                    border:".concat(width, "px solid ").concat(color, ";\n                    ").concat(radius ? "border-radius:".concat(radius, ";") : "", "\n                ")
-            }
+            { className: "compose-clickable", style: "cursor:pointer;user-select:none;" }
         ]));
     };
-    // ---- consumo interno ----
+    ModifierImpl.prototype.verticalScroll = function (enabled) {
+        if (enabled === void 0) { enabled = true; }
+        return enabled
+            ? this.then(new ModifierImpl([{ style: "overflow-y:auto;" }]))
+            : this;
+    };
+    ModifierImpl.prototype.horizontalScroll = function (enabled) {
+        if (enabled === void 0) { enabled = true; }
+        return enabled
+            ? this.then(new ModifierImpl([{ style: "overflow-x:auto;" }]))
+            : this;
+    };
     ModifierImpl.prototype.toStyle = function () {
-        return this.entries.map(function (e) { var _a; return (_a = e.style) !== null && _a !== void 0 ? _a : ""; }).join("");
+        var meta = this.getMeta();
+        var alignStyle = "";
+        if (meta.align) {
+            var a = meta.align;
+            if (a._brand === 'BoxAlignment') {
+                alignStyle = resolveBoxPlaceSelf(a);
+            }
+            else if (a._brand === 'HorizontalAlignment') {
+                alignStyle = resolveColumnAlignSelf(a);
+            }
+            else if (a._brand === 'VerticalAlignment') {
+                alignStyle = resolveRowAlignSelf(a);
+            }
+        }
+        return this.entries.map(function (entry) { var _a; return (_a = entry.style) !== null && _a !== void 0 ? _a : ""; }).join("") + alignStyle;
     };
     ModifierImpl.prototype.toClass = function () {
-        return this.entries.map(function (e) { var _a; return (_a = e.className) !== null && _a !== void 0 ? _a : ""; }).join(" ");
+        return this.entries.map(function (entry) { var _a; return (_a = entry.className) !== null && _a !== void 0 ? _a : ""; }).filter(Boolean).join(" ");
+    };
+    ModifierImpl.prototype.getMeta = function () {
+        return this.entries.reduce(function (acc, entry) { var _a; return (__assign(__assign({}, acc), ((_a = entry.meta) !== null && _a !== void 0 ? _a : {}))); }, {});
     };
     return ModifierImpl;
 }());

package/dist/core/motion/AnimationSpec.d.ts

@@ -1,6 +1 @@
-export type AnimationSpec = {
-    base: string;
-    from: string;
-    to: string;
-    duration: number;
-};
+export type { AnimationSpec } from "../../components/motion/motion/AnimationSpec";

package/dist/core/motion/ContentTransition.d.ts

@@ -1,5 +1 @@
-export type ContentTransition = {
-    enter: string;
-    exit: string;
-    duration: number;
-};
+export type { ContentTransition } from "../../components/motion/motion/ContentTransition";

package/dist/core/motion/applyAnimation.d.ts

@@ -0,0 +1,2 @@
+import type { AnimationSpec } from "./AnimationSpec";
+export declare function applyAnimation(spec: AnimationSpec): string;

package/dist/core/motion/applyAnimation.js

@@ -0,0 +1,3 @@
+export function applyAnimation(spec) {
+    return [spec.base, spec.to].filter(Boolean).join(" ");
+}

package/dist/core/motion/contentTransitions.d.ts

@@ -1,4 +1 @@
-import type { ContentTransition } from "./ContentTransition";
-export declare function slideHorizontal(): ContentTransition;
-export declare function scaleFade(): ContentTransition;
-export declare function fade(duration?: number): ContentTransition;
+export { fade, scaleFade, slideHorizontal } from "../../components/motion/motion/contentTransitions";

package/dist/core/motion/contentTransitions.js

@@ -1,22 +1 @@
-export function slideHorizontal() {
-    return {
-        enter: "transition-transform duration-200 ease-out translate-x-0",
-        exit: "transition-transform duration-200 ease-in -translate-x-full",
-        duration: 200
-    };
-}
-export function scaleFade() {
-    return {
-        enter: "transition-all duration-220 ease-out opacity-100 scale-100",
-        exit: "transition-all duration-180 ease-in opacity-0 scale-95",
-        duration: 220
-    };
-}
-export function fade(duration) {
-    if (duration === void 0) { duration = 300; }
-    return {
-        enter: "animate-fade-in",
-        exit: "animate-fade-out",
-        duration: duration
-    };
-}
+export { fade, scaleFade, slideHorizontal } from "../../components/motion/motion/contentTransitions";

package/dist/core/motion/transitions.d.ts

@@ -1,7 +1 @@
-import type { AnimationSpec } from "./AnimationSpec";
-export declare function fadeIn(duration?: number): AnimationSpec;
-export declare function fadeOut(duration?: number): AnimationSpec;
-export declare function scaleIn(duration?: number): AnimationSpec;
-export declare function scaleOut(duration?: number): AnimationSpec;
-export declare function slideIn(duration?: number, direction?: "left" | "right" | "up" | "down"): AnimationSpec;
-export declare function slideOut(duration?: number, direction?: "left" | "right" | "up" | "down"): AnimationSpec;
+export { fadeIn, fadeOut, scaleIn, scaleOut, slideIn, slideOut } from "../../components/motion/motion/transitions";

package/dist/core/motion/transitions.js

@@ -1,70 +1 @@
-var defaultEnter = 280;
-var defaultExit = 220;
-export function fadeIn(duration) {
-    if (duration === void 0) { duration = defaultEnter; }
-    return {
-        base: "transition-opacity duration-[".concat(duration, "ms] ease-out"),
-        from: "opacity-0",
-        to: "opacity-100",
-        duration: duration
-    };
-}
-export function fadeOut(duration) {
-    if (duration === void 0) { duration = defaultExit; }
-    return {
-        base: "transition-opacity duration-[".concat(duration, "ms] ease-in"),
-        from: "opacity-100",
-        to: "opacity-0",
-        duration: duration
-    };
-}
-export function scaleIn(duration) {
-    if (duration === void 0) { duration = defaultEnter; }
-    return {
-        base: "transition-all duration-[".concat(duration, "ms] ease-out"),
-        from: "opacity-0 scale-95",
-        to: "opacity-100 scale-100",
-        duration: duration
-    };
-}
-export function scaleOut(duration) {
-    if (duration === void 0) { duration = defaultExit; }
-    return {
-        base: "transition-all duration-[".concat(duration, "ms] ease-in"),
-        from: "opacity-100 scale-100",
-        to: "opacity-0 scale-95",
-        duration: duration
-    };
-}
-export function slideIn(duration, direction) {
-    if (duration === void 0) { duration = defaultEnter; }
-    if (direction === void 0) { direction = "right"; }
-    var fromMap = {
-        left: "-translate-x-4",
-        right: "translate-x-4",
-        up: "-translate-y-4",
-        down: "translate-y-4"
-    };
-    return {
-        base: "transition-all duration-[".concat(duration, "ms] ease-out"),
-        from: "opacity-0 ".concat(fromMap[direction]),
-        to: "opacity-100 translate-x-0 translate-y-0",
-        duration: duration
-    };
-}
-export function slideOut(duration, direction) {
-    if (duration === void 0) { duration = defaultExit; }
-    if (direction === void 0) { direction = "right"; }
-    var toMap = {
-        left: "-translate-x-4",
-        right: "translate-x-4",
-        up: "-translate-y-4",
-        down: "translate-y-4"
-    };
-    return {
-        base: "transition-all duration-[".concat(duration, "ms] ease-in"),
-        from: "opacity-100 translate-x-0 translate-y-0",
-        to: "opacity-0 ".concat(toMap[direction]),
-        duration: duration
-    };
-}
+export { fadeIn, fadeOut, scaleIn, scaleOut, slideIn, slideOut } from "../../components/motion/motion/transitions";

package/dist/core/navigation/NavHost.svelte

@@ -1,45 +1,46 @@
-<script lang="ts">
-    import { Modifier } from "../modifier/Modifier";
-    import type { NavController } from "./NavController";
-    import AnimatedContent from "../../components/motion/AnimatedContent.svelte";
-    import type { ContentTransition } from "../motion/ContentTransition";
-    import { fade } from "../motion/contentTransitions";
-
-    export let navController: NavController;
-
-    export let routes: {
-        route: { path: string };
-        component: any;
-    }[];
-
-    // 🔹 Transición única, Compose-like
-    export let transition: ContentTransition = fade(320);
-
-    export let modifier: Modifier = Modifier.empty();
-
-    // 🔹 Store interno (estable)
-    const stackStore = navController._getStackStore();
-
-    $: stack = $stackStore;
-    $: currentEntry = stack.at(-1);
-
-    $: active =
-        routes.find(r => r.route.path === currentEntry?.route);
-</script>
-
-<div style={modifier.toStyle()}>
-    <AnimatedContent
-            targetState={currentEntry?.route}
-            transition={transition}
-            modifier={Modifier.fillMaxSize()}
-            let:value
-    >
-        {#if active}
-            <svelte:component
-                    this={active.component}
-                    navController={navController}
-                    navBackStackEntry={currentEntry}
-            />
-        {/if}
-    </AnimatedContent>
-</div>
+<script lang="ts">
+    import { Modifier } from "../modifier/Modifier";
+    import type { NavController } from "./NavController";
+    import AnimatedContent from "../../components/motion/motion/AnimatedContent.svelte";
+    import type { ContentTransition } from "../motion/ContentTransition";
+    import { fade } from "../motion/contentTransitions";
+
+    export let navController: NavController;
+
+    export let routes: {
+        route: { path: string };
+        component: any;
+    }[];
+
+    // Transición única, Compose-like
+    export let transition: ContentTransition = fade(320);
+
+    export let modifier: Modifier = Modifier.empty();
+
+    const stackStore = navController._getStackStore();
+
+    $: stack = $stackStore;
+    $: currentEntry = stack.at(-1);
+
+    $: active =
+        routes.find(r => r.route.path === currentEntry?.route);
+</script>
+
+<!--
+    NavHost ocupa todo el espacio disponible del padre.
+    Cada screen registrada recibe navController y navBackStackEntry como props.
+-->
+<div style={`width:100%;height:100%;position:relative;${modifier.toStyle()}`}>
+    <AnimatedContent
+            targetState={currentEntry?.route}
+            transition={transition}
+    >
+        {#if active}
+            <svelte:component
+                    this={active.component}
+                    navController={navController}
+                    navBackStackEntry={currentEntry}
+            />
+        {/if}
+    </AnimatedContent>
+</div>

package/dist/core/styles/baseline-safe.css

@@ -0,0 +1,34 @@
+/**
+ * compose-svelted — baseline-safe.css
+ *
+ * Variante conservadora para apps existentes:
+ * - Mantiene contrato mínimo de layout (box-sizing + root 100%)
+ * - No fuerza overflow global
+ * - No normaliza media globalmente
+ * - No aplica min-width/min-height universal
+ */
+
+* ,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
+
+html,
+body,
+#app {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+}
+
+.cs-clickable {
+    cursor: pointer;
+    user-select: none;
+    -webkit-user-select: none;
+}
+
+.cs-relative {
+    position: relative;
+}

package/dist/core/styles/baseline.css

@@ -0,0 +1,45 @@
+/**
+ * compose-svelted — baseline.css
+ *
+ * Este CSS establece la base mínima necesaria para que los layouts de
+ * compose-svelted funcionen con la filosofía de Jetpack Compose:
+ *
+ *  • El viewport es la unidad raíz — html/body/app ocupan exactamente 100%.
+ *  • NO hay scroll por defecto — el overflow está bloqueado en el root.
+ *    El scroll solo ocurre cuando el layout o Modifier lo habilitan
+ *    explícitamente (verticalScroll, LazyColumn, LazyRow).
+ *  • Los layouts controlan tamaños y alineaciones — el CSS global no impone
+ *    ninguna opinión sobre disposición de hijos.
+ *  • box-sizing: border-box universal — padding no suma al ancho declarado.
+ *  • min-width/min-height: 0 universal — los hijos flex/grid no desbordan
+ *    si su contenido es mayor que el espacio asignado.
+ */
+
+/* ── 1. Box model consistente ──────────────────────────────────────────────── */
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
+
+/* 2) Root sizing + bloqueo de overflow global */
+html,
+body,
+#app {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+}
+
+/* 3) Utilidades internas usadas por la librería */
+.cs-clickable {
+    cursor: pointer;
+    user-select: none;
+    -webkit-user-select: none;
+}
+
+.cs-relative {
+    position: relative;
+}

package/dist/core/theme/ColorScheme.d.ts

@@ -11,6 +11,8 @@ export declare const ColorScheme: {
     readonly OnSurface: "onSurface";
     readonly SurfaceVariant: "surfaceVariant";
     readonly OnSurfaceVariant: "onSurfaceVariant";
+    readonly Tertiary: "tertiary";
+    readonly OnTertiary: "onTertiary";
     readonly Outline: "outline";
     readonly Error: "error";
     readonly OnError: "onError";

package/dist/core/theme/ColorScheme.js

@@ -9,6 +9,8 @@ export var ColorScheme = {
     OnSurface: "onSurface",
     SurfaceVariant: "surfaceVariant",
     OnSurfaceVariant: "onSurfaceVariant",
+    Tertiary: "tertiary",
+    OnTertiary: "onTertiary",
     Outline: "outline",
     Error: "error",
     OnError: "onError",