@v-ibe/core 0.1.0

package/dist/styles/decorators/keyframes.d.ts

@@ -0,0 +1,238 @@
+/**
+ * Comprehensive CSS Properties Interface
+ * Provides type safety and autocomplete for CSS declarations
+ */
+export interface CSSProperties {
+    display?: 'block' | 'inline' | 'inline-block' | 'flex' | 'inline-flex' | 'grid' | 'inline-grid' | 'none' | 'contents' | 'table' | 'table-row' | 'table-cell' | string;
+    visibility?: 'visible' | 'hidden' | 'collapse';
+    opacity?: number | string;
+    position?: 'static' | 'relative' | 'absolute' | 'fixed' | 'sticky';
+    top?: number | string;
+    right?: number | string;
+    bottom?: number | string;
+    left?: number | string;
+    inset?: number | string;
+    zIndex?: number | string;
+    flexDirection?: 'row' | 'row-reverse' | 'column' | 'column-reverse';
+    flexWrap?: 'nowrap' | 'wrap' | 'wrap-reverse';
+    justifyContent?: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly' | 'stretch';
+    alignItems?: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';
+    alignContent?: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'stretch';
+    gap?: number | string;
+    rowGap?: number | string;
+    columnGap?: number | string;
+    flex?: number | string;
+    flexGrow?: number;
+    flexShrink?: number;
+    flexBasis?: number | string;
+    alignSelf?: 'auto' | 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';
+    order?: number;
+    gridTemplateColumns?: string;
+    gridTemplateRows?: string;
+    gridTemplateAreas?: string;
+    gridAutoColumns?: string;
+    gridAutoRows?: string;
+    gridAutoFlow?: 'row' | 'column' | 'dense' | 'row dense' | 'column dense';
+    gridArea?: string;
+    gridColumn?: string;
+    gridRow?: string;
+    gridColumnStart?: string | number;
+    gridColumnEnd?: string | number;
+    gridRowStart?: string | number;
+    gridRowEnd?: string | number;
+    width?: number | string;
+    height?: number | string;
+    minWidth?: number | string;
+    maxWidth?: number | string;
+    minHeight?: number | string;
+    maxHeight?: number | string;
+    boxSizing?: 'content-box' | 'border-box';
+    margin?: number | string;
+    marginTop?: number | string;
+    marginRight?: number | string;
+    marginBottom?: number | string;
+    marginLeft?: number | string;
+    marginBlock?: number | string;
+    marginInline?: number | string;
+    padding?: number | string;
+    paddingTop?: number | string;
+    paddingRight?: number | string;
+    paddingBottom?: number | string;
+    paddingLeft?: number | string;
+    paddingBlock?: number | string;
+    paddingInline?: number | string;
+    color?: string;
+    fontSize?: number | string;
+    fontFamily?: string;
+    fontWeight?: number | 'normal' | 'bold' | 'lighter' | 'bolder' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900';
+    fontStyle?: 'normal' | 'italic' | 'oblique';
+    lineHeight?: number | string;
+    letterSpacing?: number | string;
+    textAlign?: 'left' | 'right' | 'center' | 'justify' | 'start' | 'end';
+    textDecoration?: string;
+    textTransform?: 'none' | 'capitalize' | 'uppercase' | 'lowercase';
+    textOverflow?: 'clip' | 'ellipsis' | string;
+    whiteSpace?: 'normal' | 'nowrap' | 'pre' | 'pre-wrap' | 'pre-line' | 'break-spaces';
+    wordBreak?: 'normal' | 'break-all' | 'keep-all' | 'break-word';
+    wordWrap?: 'normal' | 'break-word';
+    background?: string;
+    backgroundColor?: string;
+    backgroundImage?: string;
+    backgroundSize?: string;
+    backgroundPosition?: string;
+    backgroundRepeat?: 'repeat' | 'repeat-x' | 'repeat-y' | 'no-repeat' | 'space' | 'round';
+    backgroundAttachment?: 'scroll' | 'fixed' | 'local';
+    backgroundClip?: 'border-box' | 'padding-box' | 'content-box' | 'text';
+    border?: string;
+    borderWidth?: number | string;
+    borderStyle?: 'none' | 'solid' | 'dashed' | 'dotted' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset';
+    borderColor?: string;
+    borderRadius?: number | string;
+    borderTop?: string;
+    borderRight?: string;
+    borderBottom?: string;
+    borderLeft?: string;
+    borderTopWidth?: number | string;
+    borderRightWidth?: number | string;
+    borderBottomWidth?: number | string;
+    borderLeftWidth?: number | string;
+    borderTopColor?: string;
+    borderRightColor?: string;
+    borderBottomColor?: string;
+    borderLeftColor?: string;
+    borderTopLeftRadius?: number | string;
+    borderTopRightRadius?: number | string;
+    borderBottomLeftRadius?: number | string;
+    borderBottomRightRadius?: number | string;
+    outline?: string;
+    outlineWidth?: number | string;
+    outlineStyle?: 'none' | 'solid' | 'dashed' | 'dotted' | 'double';
+    outlineColor?: string;
+    outlineOffset?: number | string;
+    boxShadow?: string;
+    textShadow?: string;
+    filter?: string;
+    backdropFilter?: string;
+    transform?: string;
+    transformOrigin?: string;
+    transition?: string;
+    transitionProperty?: string;
+    transitionDuration?: string;
+    transitionTimingFunction?: string;
+    transitionDelay?: string;
+    animation?: string;
+    animationName?: string;
+    animationDuration?: string;
+    animationTimingFunction?: string;
+    animationDelay?: string;
+    animationIterationCount?: number | 'infinite';
+    animationDirection?: 'normal' | 'reverse' | 'alternate' | 'alternate-reverse';
+    animationFillMode?: 'none' | 'forwards' | 'backwards' | 'both';
+    animationPlayState?: 'running' | 'paused';
+    overflow?: 'visible' | 'hidden' | 'scroll' | 'auto' | 'clip';
+    overflowX?: 'visible' | 'hidden' | 'scroll' | 'auto' | 'clip';
+    overflowY?: 'visible' | 'hidden' | 'scroll' | 'auto' | 'clip';
+    clip?: string;
+    clipPath?: string;
+    cursor?: 'auto' | 'default' | 'pointer' | 'wait' | 'text' | 'move' | 'not-allowed' | 'help' | 'grab' | 'grabbing' | string;
+    pointerEvents?: 'auto' | 'none' | 'visiblePainted' | 'visibleFill' | 'visibleStroke' | 'visible' | 'painted' | 'fill' | 'stroke' | 'all';
+    userSelect?: 'none' | 'auto' | 'text' | 'contain' | 'all';
+    content?: string;
+    listStyle?: string;
+    listStyleType?: string;
+    listStylePosition?: 'inside' | 'outside';
+    listStyleImage?: string;
+    tableLayout?: 'auto' | 'fixed';
+    borderCollapse?: 'collapse' | 'separate';
+    borderSpacing?: number | string;
+    captionSide?: 'top' | 'bottom';
+    emptyCells?: 'show' | 'hide';
+    verticalAlign?: 'baseline' | 'sub' | 'super' | 'top' | 'text-top' | 'middle' | 'bottom' | 'text-bottom' | number | string;
+    objectFit?: 'fill' | 'contain' | 'cover' | 'none' | 'scale-down';
+    objectPosition?: string;
+    float?: 'none' | 'left' | 'right';
+    clear?: 'none' | 'left' | 'right' | 'both';
+    resize?: 'none' | 'both' | 'horizontal' | 'vertical';
+    [key: `--${string}`]: string | number;
+    [key: string]: any;
+}
+/**
+ * Keyframe selector type
+ * Supports percentage values ('0%', '50%', '100%') and keywords ('from', 'to')
+ */
+export type KeyframeSelector = 'from' | 'to' | `${number}%`;
+/**
+ * Keyframes definition type
+ * Maps keyframe selectors to CSS properties
+ *
+ * @example
+ * {
+ *   '0%': { transform: 'rotate(0deg)' },
+ *   '100%': { transform: 'rotate(360deg)' },
+ * }
+ *
+ * @example
+ * {
+ *   'from': { opacity: 0 },
+ *   'to': { opacity: 1 },
+ * }
+ */
+export type KeyframesDefinition = {
+    [K in KeyframeSelector]?: CSSProperties;
+} & {
+    [key: string]: CSSProperties | undefined;
+};
+/**
+ * @Keyframes Decorator - Type-safe reactive CSS keyframe animations
+ *
+ * Creates a @keyframes CSS rule that can be referenced by animation properties.
+ * Supports reactive values - keyframes will update when signals change.
+ *
+ * @param name - The animation name to use in CSS (e.g., 'spin', 'fadeIn')
+ *
+ * Usage:
+ * ```typescript
+ * class MyStyles extends BaseStyleSheet {
+ *   @State rotationEnd = 360;
+ *
+ *   @Keyframes('spin')
+ *   get spinAnimation() {
+ *     return {
+ *       '0%': { transform: 'rotate(0deg)' },
+ *       '100%': { transform: `rotate(${this.rotationEnd}deg)` },  // Reactive!
+ *     };
+ *   }
+ *
+ *   @Rule('.spinner')
+ *   get spinnerStyles() {
+ *     return {
+ *       animation: 'spin 1s linear infinite',
+ *     };
+ *   }
+ * }
+ * ```
+ *
+ * @example Multiple keyframe stops
+ * ```typescript
+ * @Keyframes('bounce')
+ * get bounceAnimation() {
+ *   return {
+ *     '0%': { transform: 'translateY(0)' },
+ *     '50%': { transform: 'translateY(-20px)' },
+ *     '100%': { transform: 'translateY(0)' },
+ *   };
+ * }
+ * ```
+ *
+ * @example Using 'from' and 'to' keywords
+ * ```typescript
+ * @Keyframes('fadeIn')
+ * get fadeInAnimation() {
+ *   return {
+ *     'from': { opacity: 0 },
+ *     'to': { opacity: 1 },
+ *   };
+ * }
+ * ```
+ */
+export declare function Keyframes(name: string): <This extends object, Value extends KeyframesDefinition | undefined>(target: (this: This) => Value, context: ClassGetterDecoratorContext<This, Value>) => (this: This) => Value;

package/dist/styles/decorators/keyframes.js

@@ -0,0 +1,79 @@
+import { effect } from "../../reactivity/signals/effect.js";
+function camelToKebab(str) {
+  return str.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);
+}
+const unitlessProperties = /* @__PURE__ */ new Set([
+  "opacity",
+  "z-index",
+  "font-weight",
+  "line-height",
+  "flex-grow",
+  "flex-shrink",
+  "flex",
+  "order",
+  "zoom",
+  "grid-column",
+  "grid-row",
+  "grid-column-start",
+  "grid-column-end",
+  "grid-row-start",
+  "grid-row-end",
+  "animation-iteration-count"
+]);
+function formatCSSValue(property, value) {
+  if (value === null || value === void 0) {
+    return "";
+  }
+  if (typeof value === "number" && !unitlessProperties.has(property)) {
+    return `${value}px`;
+  }
+  return String(value);
+}
+function cssObjectToString(styles) {
+  return Object.entries(styles).filter(([_, value]) => value !== null && value !== void 0).map(([property, value]) => {
+    const cssProperty = camelToKebab(property);
+    const cssValue = formatCSSValue(cssProperty, value);
+    return `${cssProperty}: ${cssValue}`;
+  }).join("; ");
+}
+function keyframesObjectToString(name, keyframes) {
+  const keyframeRules = Object.entries(keyframes).filter(([_, styles]) => styles !== null && styles !== void 0).map(([selector, styles]) => {
+    const cssContent = cssObjectToString(styles);
+    return `${selector} { ${cssContent}; }`;
+  }).join(" ");
+  return `@keyframes ${name} { ${keyframeRules} }`;
+}
+function Keyframes(name) {
+  return function(target, context) {
+    if (context.kind !== "getter") {
+      throw new Error("@Keyframes can only be applied to getters");
+    }
+    const getterName = String(context.name);
+    context.addInitializer(function() {
+      const keyframesSelector = `@keyframes ${name}`;
+      const indexSymbol = Symbol(`css_keyframes_${name}_${getterName}`);
+      const cleanup = effect(() => {
+        const keyframesObject = target.call(this);
+        if (!keyframesObject || typeof keyframesObject !== "object") {
+          console.warn(`@Keyframes('${name}'): Getter '${getterName}' must return a KeyframesDefinition object`);
+          return;
+        }
+        const cssText = keyframesObjectToString(name, keyframesObject);
+        if (typeof this.updateSpecificRule === "function") {
+          this.updateSpecificRule(keyframesSelector, cssText, indexSymbol);
+        } else {
+          console.error(`@Keyframes decorator requires BaseStyleSheet.updateSpecificRule method`);
+        }
+      });
+      if (typeof this.registerCleanup === "function") {
+        this.registerCleanup(cleanup.dispose);
+      } else {
+        console.error(`@Keyframes decorator requires BaseStyleSheet.registerCleanup method`);
+      }
+    });
+    return target;
+  };
+}
+export {
+  Keyframes
+};

package/dist/styles/decorators/rule.d.ts

@@ -0,0 +1,177 @@
+/**
+ * Comprehensive CSS Properties Interface
+ * Provides type safety and autocomplete for CSS declarations
+ */
+export interface CSSProperties {
+    display?: 'block' | 'inline' | 'inline-block' | 'flex' | 'inline-flex' | 'grid' | 'inline-grid' | 'none' | 'contents' | 'table' | 'table-row' | 'table-cell' | string;
+    visibility?: 'visible' | 'hidden' | 'collapse';
+    opacity?: number | string;
+    position?: 'static' | 'relative' | 'absolute' | 'fixed' | 'sticky';
+    top?: number | string;
+    right?: number | string;
+    bottom?: number | string;
+    left?: number | string;
+    inset?: number | string;
+    zIndex?: number | string;
+    flexDirection?: 'row' | 'row-reverse' | 'column' | 'column-reverse';
+    flexWrap?: 'nowrap' | 'wrap' | 'wrap-reverse';
+    justifyContent?: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly' | 'stretch';
+    alignItems?: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';
+    alignContent?: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'stretch';
+    gap?: number | string;
+    rowGap?: number | string;
+    columnGap?: number | string;
+    flex?: number | string;
+    flexGrow?: number;
+    flexShrink?: number;
+    flexBasis?: number | string;
+    alignSelf?: 'auto' | 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';
+    order?: number;
+    gridTemplateColumns?: string;
+    gridTemplateRows?: string;
+    gridTemplateAreas?: string;
+    gridAutoColumns?: string;
+    gridAutoRows?: string;
+    gridAutoFlow?: 'row' | 'column' | 'dense' | 'row dense' | 'column dense';
+    gridArea?: string;
+    gridColumn?: string;
+    gridRow?: string;
+    gridColumnStart?: string | number;
+    gridColumnEnd?: string | number;
+    gridRowStart?: string | number;
+    gridRowEnd?: string | number;
+    width?: number | string;
+    height?: number | string;
+    minWidth?: number | string;
+    maxWidth?: number | string;
+    minHeight?: number | string;
+    maxHeight?: number | string;
+    boxSizing?: 'content-box' | 'border-box';
+    margin?: number | string;
+    marginTop?: number | string;
+    marginRight?: number | string;
+    marginBottom?: number | string;
+    marginLeft?: number | string;
+    marginBlock?: number | string;
+    marginInline?: number | string;
+    padding?: number | string;
+    paddingTop?: number | string;
+    paddingRight?: number | string;
+    paddingBottom?: number | string;
+    paddingLeft?: number | string;
+    paddingBlock?: number | string;
+    paddingInline?: number | string;
+    color?: string;
+    fontSize?: number | string;
+    fontFamily?: string;
+    fontWeight?: number | 'normal' | 'bold' | 'lighter' | 'bolder' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900';
+    fontStyle?: 'normal' | 'italic' | 'oblique';
+    lineHeight?: number | string;
+    letterSpacing?: number | string;
+    textAlign?: 'left' | 'right' | 'center' | 'justify' | 'start' | 'end';
+    textDecoration?: string;
+    textTransform?: 'none' | 'capitalize' | 'uppercase' | 'lowercase';
+    textOverflow?: 'clip' | 'ellipsis' | string;
+    whiteSpace?: 'normal' | 'nowrap' | 'pre' | 'pre-wrap' | 'pre-line' | 'break-spaces';
+    wordBreak?: 'normal' | 'break-all' | 'keep-all' | 'break-word';
+    wordWrap?: 'normal' | 'break-word';
+    background?: string;
+    backgroundColor?: string;
+    backgroundImage?: string;
+    backgroundSize?: string;
+    backgroundPosition?: string;
+    backgroundRepeat?: 'repeat' | 'repeat-x' | 'repeat-y' | 'no-repeat' | 'space' | 'round';
+    backgroundAttachment?: 'scroll' | 'fixed' | 'local';
+    backgroundClip?: 'border-box' | 'padding-box' | 'content-box' | 'text';
+    border?: string;
+    borderWidth?: number | string;
+    borderStyle?: 'none' | 'solid' | 'dashed' | 'dotted' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset';
+    borderColor?: string;
+    borderRadius?: number | string;
+    borderTop?: string;
+    borderRight?: string;
+    borderBottom?: string;
+    borderLeft?: string;
+    borderTopWidth?: number | string;
+    borderRightWidth?: number | string;
+    borderBottomWidth?: number | string;
+    borderLeftWidth?: number | string;
+    borderTopColor?: string;
+    borderRightColor?: string;
+    borderBottomColor?: string;
+    borderLeftColor?: string;
+    borderTopLeftRadius?: number | string;
+    borderTopRightRadius?: number | string;
+    borderBottomLeftRadius?: number | string;
+    borderBottomRightRadius?: number | string;
+    outline?: string;
+    outlineWidth?: number | string;
+    outlineStyle?: 'none' | 'solid' | 'dashed' | 'dotted' | 'double';
+    outlineColor?: string;
+    outlineOffset?: number | string;
+    boxShadow?: string;
+    textShadow?: string;
+    filter?: string;
+    backdropFilter?: string;
+    transform?: string;
+    transformOrigin?: string;
+    transition?: string;
+    transitionProperty?: string;
+    transitionDuration?: string;
+    transitionTimingFunction?: string;
+    transitionDelay?: string;
+    animation?: string;
+    animationName?: string;
+    animationDuration?: string;
+    animationTimingFunction?: string;
+    animationDelay?: string;
+    animationIterationCount?: number | 'infinite';
+    animationDirection?: 'normal' | 'reverse' | 'alternate' | 'alternate-reverse';
+    animationFillMode?: 'none' | 'forwards' | 'backwards' | 'both';
+    animationPlayState?: 'running' | 'paused';
+    overflow?: 'visible' | 'hidden' | 'scroll' | 'auto' | 'clip';
+    overflowX?: 'visible' | 'hidden' | 'scroll' | 'auto' | 'clip';
+    overflowY?: 'visible' | 'hidden' | 'scroll' | 'auto' | 'clip';
+    clip?: string;
+    clipPath?: string;
+    cursor?: 'auto' | 'default' | 'pointer' | 'wait' | 'text' | 'move' | 'not-allowed' | 'help' | 'grab' | 'grabbing' | string;
+    pointerEvents?: 'auto' | 'none' | 'visiblePainted' | 'visibleFill' | 'visibleStroke' | 'visible' | 'painted' | 'fill' | 'stroke' | 'all';
+    userSelect?: 'none' | 'auto' | 'text' | 'contain' | 'all';
+    content?: string;
+    listStyle?: string;
+    listStyleType?: string;
+    listStylePosition?: 'inside' | 'outside';
+    listStyleImage?: string;
+    tableLayout?: 'auto' | 'fixed';
+    borderCollapse?: 'collapse' | 'separate';
+    borderSpacing?: number | string;
+    captionSide?: 'top' | 'bottom';
+    emptyCells?: 'show' | 'hide';
+    verticalAlign?: 'baseline' | 'sub' | 'super' | 'top' | 'text-top' | 'middle' | 'bottom' | 'text-bottom' | number | string;
+    objectFit?: 'fill' | 'contain' | 'cover' | 'none' | 'scale-down';
+    objectPosition?: string;
+    float?: 'none' | 'left' | 'right';
+    clear?: 'none' | 'left' | 'right' | 'both';
+    resize?: 'none' | 'both' | 'horizontal' | 'vertical';
+    [key: `--${string}`]: string | number;
+    [key: string]: any;
+}
+/**
+ * @Rule Decorator - Type-safe reactive CSS rules
+ *
+ * Usage:
+ * ```typescript
+ * class MyStyles extends BaseStyleSheet {
+ *   @State width = 100;
+ *
+ *   @Rule(':host')
+ *   get hostStyles() {
+ *     return {
+ *       display: 'grid',
+ *       width: this.width,  // Reactive!
+ *     };
+ *   }
+ * }
+ * ```
+ */
+export declare function Rule(selector: string): <This extends object, Value extends CSSProperties | undefined>(target: (this: This) => Value, context: ClassGetterDecoratorContext<This, Value>) => (this: This) => Value;

package/dist/styles/decorators/rule.js

@@ -0,0 +1,72 @@
+import { effect } from "../../reactivity/signals/effect.js";
+function camelToKebab(str) {
+  return str.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);
+}
+const unitlessProperties = /* @__PURE__ */ new Set([
+  "opacity",
+  "z-index",
+  "font-weight",
+  "line-height",
+  "flex-grow",
+  "flex-shrink",
+  "flex",
+  "order",
+  "zoom",
+  "grid-column",
+  "grid-row",
+  "grid-column-start",
+  "grid-column-end",
+  "grid-row-start",
+  "grid-row-end",
+  "animation-iteration-count"
+]);
+function formatCSSValue(property, value) {
+  if (value === null || value === void 0) {
+    return "";
+  }
+  if (typeof value === "number" && !unitlessProperties.has(property)) {
+    return `${value}px`;
+  }
+  return String(value);
+}
+function cssObjectToString(styles) {
+  return Object.entries(styles).filter(([_, value]) => value !== null && value !== void 0).map(([property, value]) => {
+    const cssProperty = camelToKebab(property);
+    const cssValue = formatCSSValue(cssProperty, value);
+    return `${cssProperty}: ${cssValue}`;
+  }).join("; ");
+}
+function Rule(selector) {
+  return function(target, context) {
+    if (context.kind !== "getter") {
+      throw new Error("@Rule can only be applied to getters");
+    }
+    const getterName = String(context.name);
+    context.addInitializer(function() {
+      const indexSymbol = Symbol(`css_rule_${selector}_${getterName}`);
+      const cleanup = effect(() => {
+        const stylesObject = target.call(this);
+        if (!stylesObject || typeof stylesObject !== "object") {
+          console.warn(`@Rule('${selector}'): Getter '${getterName}' must return a CSSProperties object`);
+          return;
+        }
+        const cssContent = cssObjectToString(stylesObject);
+        const cssText = `${selector} { ${cssContent}; }`;
+        if (typeof this.updateSpecificRule === "function") {
+          this.updateSpecificRule(selector, cssText, indexSymbol);
+        } else {
+          console.error(`@Rule decorator requires BaseStyleSheet.updateSpecificRule method`);
+        }
+      });
+      if (typeof this.registerCleanup === "function") {
+        this.registerCleanup(cleanup.dispose);
+      } else {
+        console.error(`@Rule decorator requires BaseStyleSheet.registerCleanup method`);
+      }
+    });
+    return target;
+  };
+}
+export {
+  Rule
+};

package/dist/styles/decorators/scope.d.ts

@@ -0,0 +1,66 @@
+/**
+ * Decoradores de Scope para Estilos
+ *
+ * Estos decoradores marcan las clases de estilos con su alcance (scope):
+ * - @Shared: Los estilos se aplican a todos los shadow roots (compartidos globalmente)
+ * - @ForDocument: Los estilos se aplican al documento real (en el <head>)
+ *
+ * Si una clase de estilos no tiene ningún decorador, se considera "local"
+ * y solo se aplica al componente específico que la declara.
+ */
+export type StyleScope = 'local' | 'shared' | 'document';
+/**
+ * Marca una clase de estilos como compartida globalmente.
+ * Los estilos @Shared se insertan en todos los shadow roots de la aplicación.
+ *
+ * Uso:
+ * ```typescript
+ * @Shared
+ * class GlobalTheme extends BaseStyleSheet {
+ *   styles() {
+ *     return (
+ *       <>
+ *         <Rule selector=":host">
+ *           color: {() => this.theme.primaryColor};
+ *         </Rule>
+ *       </>
+ *     );
+ *   }
+ * }
+ * ```
+ */
+export declare function Shared<T extends {
+    new (...args: any[]): {};
+}>(target: T, context?: ClassDecoratorContext): T;
+/**
+ * Marca una clase de estilos para aplicarse al documento completo.
+ * Los estilos @ForDocument se insertan en el <head> del documento.
+ *
+ * Uso:
+ * ```typescript
+ * @ForDocument
+ * class DocumentReset extends BaseStyleSheet {
+ *   styles() {
+ *     return (
+ *       <>
+ *         <Rule selector="*, *::before, *::after">
+ *           box-sizing: border-box;
+ *         </Rule>
+ *         <Rule selector="body">
+ *           margin: 0;
+ *           padding: 0;
+ *         </Rule>
+ *       </>
+ *     );
+ *   }
+ * }
+ * ```
+ */
+export declare function ForDocument<T extends {
+    new (...args: any[]): {};
+}>(target: T, context?: ClassDecoratorContext): T;
+/**
+ * Obtiene el scope de una clase de estilos.
+ * Si no tiene decorador, retorna 'local' por defecto.
+ */
+export declare function getStyleScope(StyleClass: any): StyleScope;

package/dist/styles/decorators/scope.js

@@ -0,0 +1,17 @@
+const STYLE_SCOPE_KEY = Symbol("styleScope");
+function Shared(target, context) {
+  target[STYLE_SCOPE_KEY] = "shared";
+  return target;
+}
+function ForDocument(target, context) {
+  target[STYLE_SCOPE_KEY] = "document";
+  return target;
+}
+function getStyleScope(StyleClass) {
+  return StyleClass[STYLE_SCOPE_KEY] || "local";
+}
+export {
+  ForDocument,
+  Shared,
+  getStyleScope
+};

package/dist/styles/decorators/style.d.ts

@@ -0,0 +1 @@
+export declare function Style(selector: string): <This extends object, Value>(target: (this: This) => Value, context: ClassGetterDecoratorContext<This, Value>) => void;

package/dist/styles/decorators/style.js

@@ -0,0 +1,20 @@
+function Style(selector) {
+  return function(target, context) {
+    if (context.kind !== "getter") {
+      throw new Error("@Rule solo se puede aplicar a getters de clase.");
+    }
+    context.addInitializer(function() {
+      if (!this.constructor.__pendingRules) {
+        this.constructor.__pendingRules = [];
+      }
+      this.constructor.__pendingRules.push({
+        selector,
+        styleGetter: target.bind(this),
+        ruleIndexKey: Symbol(`css_rule_index_${String(context.name)}`)
+      });
+    });
+  };
+}
+export {
+  Style
+};

package/dist/styles/decorators/useStyles.d.ts

@@ -0,0 +1,5 @@
+import { BaseComponent } from '../../components/base-component';
+import { BaseStyleSheet } from '../base-style-sheet';
+type BaseComponentConstructor = new (...args: any[]) => BaseComponent;
+export declare function UseStyles<StylesClass extends BaseStyleSheet>(StylesConstructor: new () => StylesClass): <T extends BaseComponentConstructor>(target: T, context: ClassDecoratorContext<T>) => T;
+export {};