ecmc-design-core 0.0.3 → 0.0.5

package/dist/atoms/button/Button.svelte

@@ -1,13 +1,23 @@
+<!--
+	@component
+	# Button
+	
+	A foundational button component supporting multiple visual variants.
+	
+	@param {Snippet} [children] - The content to be rendered inside the button
+	@param {'primary' | 'secondary' | 'disabled'} [variant='primary'] - Visual variant: 'primary' (main action with --red-500/600/700), 'secondary' (alternative with --neutral-100/300/400), 'disabled' (non-interactive with reduced opacity)
+	@param {(event: MouseEvent) => void} [onclick] - Click handler for button interactions
+-->
 <script lang="ts">
-	import Centered from '../container/sub/centered.container.svelte';
-	import Text from '../text/Text.svelte';
 	import { cn } from '../../utils/cn.js';
+	import { Centered, Text } from '../../index.js';
+
 	import { buttonVariantClasses, defaultProps } from './constants.js';
 	import type { ButtonProps } from './types.js';
 
 	let { children, onclick, variant = defaultProps.variant! }: ButtonProps = $props();
 
-	let computedClasses = $derived(cn(buttonVariantClasses[variant]));
+	let computedClasses = $derived(cn('ecmc', 'ecmc-button', buttonVariantClasses[variant]));
 </script>
 
 <button class={computedClasses} disabled={variant === 'disabled'} {onclick}>
@@ -21,39 +31,39 @@
 <style>
 	button {
 		border: none;
-		border-radius: var(--rounding-size-1);
+		border-radius: var(--ecmc-rounding-size-1);
 		cursor: pointer;
 	}
 
 	.button--primary {
-		background-color: var(--primary-600);
+		background-color: var(--ecmc-primary-600);
 		color: var(--neutral-100);
 	}
 
 	.button--primary:hover {
-		background-color: var(--primary-700);
+		background-color: var(--ecmc-primary-700);
 	}
 
 	.button--primary:active {
-		background-color: var(--primary-900);
+		background-color: var(--ecmc-primary-900);
 	}
 
 	.button--secondary {
-		background-color: var(--neutral-400);
+		background-color: var(--ecmc-neutral-400);
 		color: var(--neutral-100);
 	}
 
 	.button--secondary:hover {
-		background-color: var(--neutral-500);
+		background-color: var(--ecmc-neutral-500);
 		color: var(--neutral-100);
 	}
 
 	.button--secondary:active {
-		background-color: var(--neutral-600);
+		background-color: var(--ecmc-neutral-600);
 	}
 
 	.button--disabled {
-		background-color: var(--neutral-300);
+		background-color: var(--ecmc-neutral-300);
 		color: var(--neutral-600);
 		cursor: not-allowed;
 		opacity: 0.6;

package/dist/atoms/button/Button.svelte.d.ts

@@ -1,4 +1,13 @@
 import type { ButtonProps } from './types.js';
+/**
+ * # Button
+ *
+ * A foundational button component supporting multiple visual variants.
+ *
+ * @param {Snippet} [children] - The content to be rendered inside the button
+ * @param {'primary' | 'secondary' | 'disabled'} [variant='primary'] - Visual variant: 'primary' (main action with --red-500/600/700), 'secondary' (alternative with --neutral-100/300/400), 'disabled' (non-interactive with reduced opacity)
+ * @param {(event: MouseEvent) => void} [onclick] - Click handler for button interactions
+ */
 declare const Button: import("svelte").Component<ButtonProps, {}, "">;
 type Button = ReturnType<typeof Button>;
 export default Button;

package/dist/atoms/container/Container.svelte

@@ -1,7 +1,20 @@
+<!--
+	@component
+	# Container
+	
+	A flexible container component with real-time DOM metrics tracking and extensive styling options.
+	
+	@param {Snippet} [children] - The content to be rendered inside the container
+	@param {'none' | 'xsm' | 'sm' | 'md' | 'lg' | 'xl'} [padding='none'] - Padding size mapped to CSS --spacing-* variables
+	@param {boolean} [fill=false] - Whether to make the container fill its parent dimensions (sets width and height to 100%)
+	@param {boolean} [bg=false] - Whether to apply a background color (neutral-200 in light mode, neutral-800 in dark mode)
+	@param {boolean} [rounding=false] - Whether to apply border radius using var(--rounding-size-1) which is 5px
+	@param {ContainerMetrics} [metrics] - Bindable prop to track real-time container element metrics (dimensions, position, scroll state)
+-->
 <script lang="ts">
 	import { cn } from '../../utils/cn.js';
-	import type { ContainerProps } from './types.js';
 	import { defaultProps, paddingClasses } from './constants.js';
+	import type { ContainerProps } from './types.js';
 
 	// Props with defaults
 	let {
@@ -16,6 +29,8 @@
 
 	let computedClasses = $derived(
 		cn(
+			'ecmc',
+			'ecmc-container',
 			paddingClasses[padding],
 			fill ? 'container--fill' : '',
 			bg ? 'container--bg' : '',
@@ -78,27 +93,27 @@
 
 <style>
 	.container--padding-none {
-		padding: var(--spacing-none);
+		padding: var(--ecmc-spacing-none);
 	}
 
 	.container--padding-xsm {
-		padding: var(--spacing-xsm);
+		padding: var(--ecmc-spacing-xsm);
 	}
 
 	.container--padding-sm {
-		padding: var(--spacing-sm);
+		padding: var(--ecmc-spacing-sm);
 	}
 
 	.container--padding-md {
-		padding: var(--spacing-md);
+		padding: var(--ecmc-spacing-md);
 	}
 
 	.container--padding-lg {
-		padding: var(--spacing-lg);
+		padding: var(--ecmc-spacing-lg);
 	}
 
 	.container--padding-xl {
-		padding: var(--spacing-xl);
+		padding: var(--ecmc-spacing-xl);
 	}
 
 	.container--fill {
@@ -107,10 +122,10 @@
 	}
 
 	.container--bg {
-		background-color: light-dark(var(--neutral-200), var(--neutral-800));
+		background-color: light-dark(var(--ecmc-neutral-200), var(--ecmc-neutral-800));
 	}
 
 	.container--rounding {
-		border-radius: var(--rounding-size-1);
+		border-radius: var(--ecmc-rounding-size-1);
 	}
 </style>

package/dist/atoms/container/Container.svelte.d.ts

@@ -1,4 +1,16 @@
 import type { ContainerProps } from './types.js';
+/**
+ * # Container
+ *
+ * A flexible container component with real-time DOM metrics tracking and extensive styling options.
+ *
+ * @param {Snippet} [children] - The content to be rendered inside the container
+ * @param {'none' | 'xsm' | 'sm' | 'md' | 'lg' | 'xl'} [padding='none'] - Padding size mapped to CSS --spacing-* variables
+ * @param {boolean} [fill=false] - Whether to make the container fill its parent dimensions (sets width and height to 100%)
+ * @param {boolean} [bg=false] - Whether to apply a background color (neutral-200 in light mode, neutral-800 in dark mode)
+ * @param {boolean} [rounding=false] - Whether to apply border radius using var(--rounding-size-1) which is 5px
+ * @param {ContainerMetrics} [metrics] - Bindable prop to track real-time container element metrics (dimensions, position, scroll state)
+ */
 declare const Container: import("svelte").Component<ContainerProps, {}, "metrics">;
 type Container = ReturnType<typeof Container>;
 export default Container;

package/dist/atoms/container/sub/box.container.svelte

@@ -20,7 +20,7 @@
 <Container bind:metrics {...containerProps}>
 	<div
 		class="box"
-		style="gap: var(--spacing-{gap}); align-items: {align}; justify-content: {justify}; flex-wrap: {flexWrap}; flex-direction: {flexDirection};"
+		style="gap: var(--ecmc-spacing-{gap}); align-items: {align}; justify-content: {justify}; flex-wrap: {flexWrap}; flex-direction: {flexDirection};"
 	>
 		{@render children?.()}
 	</div>

package/dist/atoms/container/sub/centered.container.svelte

@@ -1,3 +1,15 @@
+<!--
+	@component
+	# Centered
+	
+	A container component that centers content horizontally and/or vertically using flexbox.
+	
+	@param {Snippet} [children] - The content to be rendered inside the centered container
+	@param {boolean} [horizontal=true] - Whether to center content horizontally
+	@param {boolean} [vertical=true] - Whether to center content vertically
+	@param {ContainerMetrics} [metrics] - Bindable prop to track real-time container element metrics
+	@param {ContainerProps} [...containerProps] - All standard Container props (padding, fill, bg, rounding, etc.)
+-->
 <script lang="ts">
 	import Container from '../Container.svelte';
 	import type { CenteredProps } from '../types.js';

package/dist/atoms/container/sub/centered.container.svelte.d.ts

@@ -1,4 +1,15 @@
 import type { CenteredProps } from '../types.js';
+/**
+ * # Centered
+ *
+ * A container component that centers content horizontally and/or vertically using flexbox.
+ *
+ * @param {Snippet} [children] - The content to be rendered inside the centered container
+ * @param {boolean} [horizontal=true] - Whether to center content horizontally
+ * @param {boolean} [vertical=true] - Whether to center content vertically
+ * @param {ContainerMetrics} [metrics] - Bindable prop to track real-time container element metrics
+ * @param {ContainerProps} [...containerProps] - All standard Container props (padding, fill, bg, rounding, etc.)
+ */
 declare const Centered: import("svelte").Component<CenteredProps, {}, "metrics">;
 type Centered = ReturnType<typeof Centered>;
 export default Centered;

package/dist/atoms/container/sub/gridbox.container.svelte

@@ -1,3 +1,16 @@
+<!--
+	@component
+	# GridBox
+	
+	A CSS Grid container with customizable columns, gap spacing, and auto-flow behavior.
+	
+	@param {Snippet} [children] - The content to be rendered inside the grid box
+	@param {number | string} [columns=2] - Number of columns (e.g., 3 → repeat(3, 1fr)) or custom grid-template-columns value
+	@param {'none' | 'xsm' | 'sm' | 'md' | 'lg' | 'xl'} [gap='md'] - Gap spacing between grid items mapped to CSS --spacing-* variables
+	@param {'row' | 'column' | 'dense' | 'row dense' | 'column dense'} [autoFlow='row'] - Controls how auto-placed items flow into the grid
+	@param {ContainerMetrics} [metrics] - Bindable prop to track real-time container element metrics
+	@param {ContainerProps} [...containerProps] - All standard Container props (padding, fill, bg, rounding, etc.)
+-->
 <script lang="ts">
 	import Container from '../Container.svelte';
 	import type { GridBoxProps } from '../types.js';
@@ -19,7 +32,7 @@
 <Container bind:metrics {...containerProps}>
 	<div
 		class="gridbox"
-		style="grid-template-columns: {gridTemplateColumns}; gap: var(--spacing-{gap}); grid-auto-flow: {autoFlow};"
+		style="grid-template-columns: {gridTemplateColumns}; gap: var(--ecmc-spacing-{gap}); grid-auto-flow: {autoFlow};"
 	>
 		{@render children?.()}
 	</div>

package/dist/atoms/container/sub/gridbox.container.svelte.d.ts

@@ -1,4 +1,16 @@
 import type { GridBoxProps } from '../types.js';
+/**
+ * # GridBox
+ *
+ * A CSS Grid container with customizable columns, gap spacing, and auto-flow behavior.
+ *
+ * @param {Snippet} [children] - The content to be rendered inside the grid box
+ * @param {number | string} [columns=2] - Number of columns (e.g., 3 → repeat(3, 1fr)) or custom grid-template-columns value
+ * @param {'none' | 'xsm' | 'sm' | 'md' | 'lg' | 'xl'} [gap='md'] - Gap spacing between grid items mapped to CSS --spacing-* variables
+ * @param {'row' | 'column' | 'dense' | 'row dense' | 'column dense'} [autoFlow='row'] - Controls how auto-placed items flow into the grid
+ * @param {ContainerMetrics} [metrics] - Bindable prop to track real-time container element metrics
+ * @param {ContainerProps} [...containerProps] - All standard Container props (padding, fill, bg, rounding, etc.)
+ */
 declare const Gridbox: import("svelte").Component<GridBoxProps, {}, "metrics">;
 type Gridbox = ReturnType<typeof Gridbox>;
 export default Gridbox;

package/dist/atoms/container/sub/hbox.container.svelte

@@ -1,3 +1,17 @@
+<!--
+	@component
+	# HBox
+	
+	A horizontal flexbox container (row layout) with customizable gap, alignment, and wrapping.
+	
+	@param {Snippet} [children] - The content to be rendered inside the horizontal box
+	@param {'none' | 'xsm' | 'sm' | 'md' | 'lg' | 'xl'} [gap] - Gap spacing between flex items mapped to CSS --spacing-* variables
+	@param {'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline'} [align='flex-start'] - Cross-axis alignment of flex items
+	@param {'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly'} [justify='flex-start'] - Main-axis justification of flex items
+	@param {boolean} [wrap=false] - Whether flex items should wrap to multiple lines
+	@param {ContainerMetrics} [metrics] - Bindable prop to track real-time container element metrics
+	@param {ContainerProps} [...props] - All standard Container props (padding, fill, bg, rounding, etc.)
+-->
 <script lang="ts">
 	import Box from './box.container.svelte';
 	import type { BoxProps } from '../types.js';

package/dist/atoms/container/sub/hbox.container.svelte.d.ts

@@ -1,4 +1,17 @@
 import type { BoxProps } from '../types.js';
+/**
+ * # HBox
+ *
+ * A horizontal flexbox container (row layout) with customizable gap, alignment, and wrapping.
+ *
+ * @param {Snippet} [children] - The content to be rendered inside the horizontal box
+ * @param {'none' | 'xsm' | 'sm' | 'md' | 'lg' | 'xl'} [gap] - Gap spacing between flex items mapped to CSS --spacing-* variables
+ * @param {'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline'} [align='flex-start'] - Cross-axis alignment of flex items
+ * @param {'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly'} [justify='flex-start'] - Main-axis justification of flex items
+ * @param {boolean} [wrap=false] - Whether flex items should wrap to multiple lines
+ * @param {ContainerMetrics} [metrics] - Bindable prop to track real-time container element metrics
+ * @param {ContainerProps} [...props] - All standard Container props (padding, fill, bg, rounding, etc.)
+ */
 declare const Hbox: import("svelte").Component<BoxProps, {}, "metrics">;
 type Hbox = ReturnType<typeof Hbox>;
 export default Hbox;

package/dist/atoms/container/sub/vbox.container.svelte

@@ -1,3 +1,17 @@
+<!--
+	@component
+	# VBox
+	
+	A vertical flexbox container (column layout) with customizable gap, alignment, and wrapping.
+	
+	@param {Snippet} [children] - The content to be rendered inside the vertical box
+	@param {'none' | 'xsm' | 'sm' | 'md' | 'lg' | 'xl'} [gap] - Gap spacing between flex items mapped to CSS --spacing-* variables
+	@param {'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline'} [align='flex-start'] - Cross-axis alignment of flex items
+	@param {'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly'} [justify='flex-start'] - Main-axis justification of flex items
+	@param {boolean} [wrap=false] - Whether flex items should wrap to multiple lines
+	@param {ContainerMetrics} [metrics] - Bindable prop to track real-time container element metrics
+	@param {ContainerProps} [...props] - All standard Container props (padding, fill, bg, rounding, etc.)
+-->
 <script lang="ts">
 	import Box from './box.container.svelte';
 	import type { BoxProps } from '../types.js';

package/dist/atoms/container/sub/vbox.container.svelte.d.ts

@@ -1,4 +1,17 @@
 import type { BoxProps } from '../types.js';
+/**
+ * # VBox
+ *
+ * A vertical flexbox container (column layout) with customizable gap, alignment, and wrapping.
+ *
+ * @param {Snippet} [children] - The content to be rendered inside the vertical box
+ * @param {'none' | 'xsm' | 'sm' | 'md' | 'lg' | 'xl'} [gap] - Gap spacing between flex items mapped to CSS --spacing-* variables
+ * @param {'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline'} [align='flex-start'] - Cross-axis alignment of flex items
+ * @param {'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly'} [justify='flex-start'] - Main-axis justification of flex items
+ * @param {boolean} [wrap=false] - Whether flex items should wrap to multiple lines
+ * @param {ContainerMetrics} [metrics] - Bindable prop to track real-time container element metrics
+ * @param {ContainerProps} [...props] - All standard Container props (padding, fill, bg, rounding, etc.)
+ */
 declare const Vbox: import("svelte").Component<BoxProps, {}, "metrics">;
 type Vbox = ReturnType<typeof Vbox>;
 export default Vbox;

package/dist/atoms/input/Input.svelte

@@ -1,3 +1,17 @@
+<!--
+	@component
+	# Input
+	
+	A form input field with label support, multiple input types, and responsive label positioning.
+	Automatically repositions labels on small screens (< 640px) for better mobile UX.
+	
+	@param {'text' | 'email' | 'password'} [type='text'] - Type of input field: 'text' (standard), 'email' (with validation), 'password' (masked characters)
+	@param {string} [label=''] - Label text displayed above or beside the input, also used for aria-label accessibility
+	@param {boolean} [labelLeft=false] - Position label to the left (horizontal layout on desktop, automatically reverts to vertical on screens < 640px)
+	@param {string} [placeholder=''] - Placeholder text shown when the input is empty
+	@param {string} value - The current value of the input field (bindable using bind:value)
+	@param {string} [id] - HTML id attribute for the input element, auto-generated from label if not provided
+-->
 <script lang="ts">
 	import { HBox, VBox, Centered } from '../../index.js';
 	import Text from '../text/Text.svelte';
@@ -45,31 +59,33 @@
 	/>
 {/snippet}
 
-{#if effectiveLabelLeft}
-	<HBox gap="xsm">
-		{@render contents()}
-	</HBox>
-{:else}
-	<VBox gap="none">
-		{@render contents()}
-	</VBox>
-{/if}
+<div class="ecmc ecmc-input">
+	{#if effectiveLabelLeft}
+		<HBox gap="xsm">
+			{@render contents()}
+		</HBox>
+	{:else}
+		<VBox gap="none">
+			{@render contents()}
+		</VBox>
+	{/if}
+</div>
 
 <style>
 	input {
-		padding: var(--spacing-xsm);
-		background-color: light-dark(var(--neutral-300), var(--neutral-700));
-		border: 1px solid light-dark(var(--neutral-300), var(--neutral-700));
+		padding: var(--ecmc-spacing-xsm);
+		background-color: light-dark(var(--ecmc-neutral-300), var(--ecmc-neutral-700));
+		border: 1px solid light-dark(var(--ecmc-neutral-300), var(--ecmc-neutral-700));
 		outline: none;
 		width: 100%;
 	}
 
 	input::placeholder {
-		color: light-dark(var(--neutral-500), var(--neutral-400));
+		color: light-dark(var(--ecmc-neutral-500), var(--ecmc-neutral-400));
 		opacity: 0.7;
 	}
 
 	input:focus {
-		border-color: light-dark(var(--neutral-900), var(--neutral-300));
+		border-color: light-dark(var(--ecmc-neutral-900), var(--ecmc-neutral-300));
 	}
 </style>

package/dist/atoms/input/Input.svelte.d.ts

@@ -1,4 +1,17 @@
 import type { InputProps } from './types.js';
+/**
+ * # Input
+ *
+ * A form input field with label support, multiple input types, and responsive label positioning.
+ * Automatically repositions labels on small screens (< 640px) for better mobile UX.
+ *
+ * @param {'text' | 'email' | 'password'} [type='text'] - Type of input field: 'text' (standard), 'email' (with validation), 'password' (masked characters)
+ * @param {string} [label=''] - Label text displayed above or beside the input, also used for aria-label accessibility
+ * @param {boolean} [labelLeft=false] - Position label to the left (horizontal layout on desktop, automatically reverts to vertical on screens < 640px)
+ * @param {string} [placeholder=''] - Placeholder text shown when the input is empty
+ * @param {string} value - The current value of the input field (bindable using bind:value)
+ * @param {string} [id] - HTML id attribute for the input element, auto-generated from label if not provided
+ */
 declare const Input: import("svelte").Component<InputProps, {}, "value">;
 type Input = ReturnType<typeof Input>;
 export default Input;

package/dist/atoms/kbd/Kbd.svelte

@@ -1,3 +1,14 @@
+<!--
+	@component
+	# Kbd
+	
+	Represents keyboard keys or shortcuts with visual styling that resembles physical keyboard keys.
+	Useful for displaying keyboard shortcuts, hotkeys, or keyboard-related instructions.
+	
+	@param {Snippet} [children] - The content to be rendered inside the kbd element (typically key labels like "Ctrl", "⌘", etc.)
+	@param {'small' | 'medium' | 'large'} [size='small'] - Size variant: 'small' (compact for inline usage), 'medium' (standard), 'large' (emphasis)
+	@param {HTMLAttributes<HTMLElement>} [...restProps] - All standard HTML kbd element attributes
+-->
 <script lang="ts">
 	import { cn } from '../../utils/cn.js';
 	import type { KbdProps } from './types.js';
@@ -6,7 +17,7 @@
 
 	let { children, size = defaultProps.size!, ...restProps }: KbdProps = $props();
 
-	let computedClasses = $derived(cn(kbdSizeClasses[size]));
+	let computedClasses = $derived(cn('ecmc', 'ecmc-kbd', kbdSizeClasses[size]));
 </script>
 
 <Centered padding="none" fill={false}>
@@ -17,27 +28,27 @@
 
 <style>
 	kbd {
-		background-color: light-dark(var(--neutral-100), var(--neutral-700));
-		color: light-dark(var(--neutral-900), var(--neutral-100));
-		border-color: light-dark(var(--neutral-300), var(--neutral-500));
+		background-color: light-dark(var(--ecmc-neutral-100), var(--ecmc-neutral-700));
+		color: light-dark(var(--ecmc-neutral-900), var(--ecmc-neutral-100));
+		border-color: light-dark(var(--ecmc-neutral-300), var(--ecmc-neutral-500));
 		display: inline-block;
 		line-height: 1;
-		border-radius: var(--rounding-size-1);
+		border-radius: var(--ecmc-rounding-size-1);
 		border: 1px solid;
 	}
 
 	.kbd--small {
-		padding: calc(var(--spacing-xsm) * 0.5) var(--spacing-xsm);
-		font-size: var(--font-size-0);
+		padding: calc(var(--ecmc-spacing-xsm) * 0.5) var(--ecmc-spacing-xsm);
+		font-size: var(--ecmc-font-size-0);
 	}
 
 	.kbd--medium {
-		padding: var(--spacing-xsm) var(--spacing-sm);
-		font-size: var(--font-size-1);
+		padding: var(--ecmc-spacing-xsm) var(--ecmc-spacing-sm);
+		font-size: var(--ecmc-font-size-1);
 	}
 
 	.kbd--large {
-		padding: var(--spacing-sm) var(--spacing-md);
-		font-size: var(--font-size-2);
+		padding: var(--ecmc-spacing-sm) var(--ecmc-spacing-md);
+		font-size: var(--ecmc-font-size-2);
 	}
 </style>

package/dist/atoms/kbd/Kbd.svelte.d.ts

@@ -1,4 +1,14 @@
 import type { KbdProps } from './types.js';
+/**
+ * # Kbd
+ *
+ * Represents keyboard keys or shortcuts with visual styling that resembles physical keyboard keys.
+ * Useful for displaying keyboard shortcuts, hotkeys, or keyboard-related instructions.
+ *
+ * @param {Snippet} [children] - The content to be rendered inside the kbd element (typically key labels like "Ctrl", "⌘", etc.)
+ * @param {'small' | 'medium' | 'large'} [size='small'] - Size variant: 'small' (compact for inline usage), 'medium' (standard), 'large' (emphasis)
+ * @param {HTMLAttributes<HTMLElement>} [...restProps] - All standard HTML kbd element attributes
+ */
 declare const Kbd: import("svelte").Component<KbdProps, {}, "">;
 type Kbd = ReturnType<typeof Kbd>;
 export default Kbd;

package/dist/atoms/text/Text.svelte

@@ -1,3 +1,17 @@
+<!--
+	@component
+	# Text
+	
+	Provides typography with various size variants, alignment, and styling options.
+	Renders as block-level div or inline span based on the inline prop.
+	
+	@param {Snippet} [children] - The content to be rendered inside the text element
+	@param {'headline' | 'subtitle' | 'body' | 'bodyPlus' | 'half'} [variant='body'] - Text variant: 'headline' (3rem/48px), 'subtitle' (2.5rem/40px), 'body' (1rem/16px), 'bodyPlus' (1.2rem/19.2px)
+	@param {boolean} [italic=false] - Whether the text should be rendered in italic style
+	@param {boolean} [inline=false] - Whether to render as inline span (true) or block-level div (false)
+	@param {'left' | 'center' | 'right'} [align='left'] - Horizontal text alignment
+	@param {HTMLAttributes<HTMLElement>} [...restProps] - All standard HTML element attributes
+-->
 <script lang="ts">
 	import { cn } from '../../utils/cn.js';
 	import type { TextProps } from './types.js';
@@ -14,7 +28,13 @@
 	}: TextProps = $props();
 
 	let computedClasses = $derived(
-		cn(textAlignClasses[align], textVariantClasses[variant], italic ? 'text--italic' : '')
+		cn(
+			'ecmc',
+			'ecmc-text',
+			textAlignClasses[align],
+			textVariantClasses[variant],
+			italic ? 'text--italic' : ''
+		)
 	);
 </script>
 
@@ -31,27 +51,27 @@
 <style>
 	.text--headline {
 		font-weight: 700;
-		font-size: var(--font-size-4);
+		font-size: var(--ecmc-font-size-4);
 	}
 
 	.text--subtitle {
 		font-weight: 500;
-		font-size: var(--font-size-3);
+		font-size: var(--ecmc-font-size-3);
 	}
 
 	.text--body-plus {
 		font-weight: 300;
-		font-size: var(--font-size-2);
+		font-size: var(--ecmc-font-size-2);
 	}
 
 	.text--body {
 		font-weight: 300;
-		font-size: var(--font-size-1);
+		font-size: var(--ecmc-font-size-1);
 	}
 
 	.text--half {
 		font-weight: 100;
-		font-size: var(--font-size-0);
+		font-size: var(--ecmc-font-size-0);
 	}
 
 	.text--italic {

package/dist/atoms/text/Text.svelte.d.ts

@@ -1,4 +1,17 @@
 import type { TextProps } from './types.js';
+/**
+ * # Text
+ *
+ * Provides typography with various size variants, alignment, and styling options.
+ * Renders as block-level div or inline span based on the inline prop.
+ *
+ * @param {Snippet} [children] - The content to be rendered inside the text element
+ * @param {'headline' | 'subtitle' | 'body' | 'bodyPlus' | 'half'} [variant='body'] - Text variant: 'headline' (3rem/48px), 'subtitle' (2.5rem/40px), 'body' (1rem/16px), 'bodyPlus' (1.2rem/19.2px)
+ * @param {boolean} [italic=false] - Whether the text should be rendered in italic style
+ * @param {boolean} [inline=false] - Whether to render as inline span (true) or block-level div (false)
+ * @param {'left' | 'center' | 'right'} [align='left'] - Horizontal text alignment
+ * @param {HTMLAttributes<HTMLElement>} [...restProps] - All standard HTML element attributes
+ */
 declare const Text: import("svelte").Component<TextProps, {}, "">;
 type Text = ReturnType<typeof Text>;
 export default Text;

package/dist/utils/ecmc.css

@@ -1,20 +1,14 @@
 @import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');
 
-*,
-*::before,
-*::after {
+.ecmc,
+.ecmc::before,
+.ecmc::after {
 	box-sizing: border-box;
 }
 
-* {
+.ecmc {
 	margin: 0;
 	padding: 0;
-	font: inherit;
-}
-
-body {
-	min-height: 100vh;
-	background-color: light-dark(var(--neutral-100), var(--neutral-900));
 }
 
 html {
@@ -30,97 +24,100 @@ video {
 }
 
 /* ---- ATOMS ---- */
-
 /* Font Atoms */
-:root {
-	font-family: 'Roboto Mono', monospace;
+.ecmc {
+	--ecmc-font-root: 16px;
+	--ecmc-font-size-0: 0.7em;
+	--ecmc-font-size-1: 1em;
+	--ecmc-font-size-2: 1.2em;
+	--ecmc-font-size-3: 2.5em;
+	--ecmc-font-size-4: 3em;
+
+	--ecmc-font-face-main: 'Roboto Mono', monospace;
+	--ecmc-font-face-weight-main: 300;
+
+	font-family: var(--ecmc-font-face-main);
+	font-weight: var(--ecmc-font-face-weight-main);
+	font-size: var(--ecmc-font-root);
+	color: light-dark(var(--neutral-900), var(--neutral-100));
 	font-optical-sizing: auto;
-	font-weight: 300;
 	font-style: normal;
-	font-size: 16px;
-	color: light-dark(var(--neutral-900), var(--neutral-100));
-
-	--font-size-0: 0.7rem;
-	--font-size-1: 1rem;
-	--font-size-2: 1.2rem;
-	--font-size-3: 2.5rem;
-	--font-size-4: 3rem;
 }
 
 /* Colour Atoms */
-:root {
-	--neutral-50: #f5f7fa;
-	--neutral-100: #dfe2e6;
-	--neutral-200: #c0c5ce;
-	--neutral-300: #a7adba;
-	--neutral-400: #65737e;
-	--neutral-500: #4f5b66;
-	--neutral-600: #343d46;
-	--neutral-700: #23292f;
-	--neutral-800: #1a1e23;
-	--neutral-900: #111417;
-
-	--primary-900: #660708;
-	--primary-700: #a4161a;
-	--primary-600: #ba181b;
-	--primary-500: #e5383b;
+.ecmc {
+	--ecmc-neutral-50: #f5f7fa;
+	--ecmc-neutral-100: #dfe2e6;
+	--ecmc-neutral-200: #c0c5ce;
+	--ecmc-neutral-300: #a7adba;
+	--ecmc-neutral-400: #65737e;
+	--ecmc-neutral-500: #4f5b66;
+	--ecmc-neutral-600: #343d46;
+	--ecmc-neutral-700: #23292f;
+	--ecmc-neutral-800: #1a1e23;
+	--ecmc-neutral-900: #111417;
+
+	--ecmc-primary-900: #660708;
+	--ecmc-primary-700: #a4161a;
+	--ecmc-primary-600: #ba181b;
+	--ecmc-primary-500: #e5383b;
 }
 
 /* Spacing Atoms */
-:root {
-	--spacing-none: 0rem;
-	--spacing-xsm: 0.5rem;
-	--spacing-sm: 1rem;
-	--spacing-md: 1.5rem;
-	--spacing-lg: 2rem;
-	--spacing-xl: 3rem;
+.ecmc {
+	--ecmc-spacing-none: 0em;
+	--ecmc-spacing-xsm: 0.5em;
+	--ecmc-spacing-sm: 1em;
+	--ecmc-spacing-md: 1.5em;
+	--ecmc-spacing-lg: 2em;
+	--ecmc-spacing-xl: 3em;
 }
 
 /* Rounding Atoms */
-:root {
-	--rounding-size-1: 5px;
-	--rounding-size-2: 15px;
+.ecmc {
+	--ecmc-rounding-size-1: 5px;
+	--ecmc-rounding-size-2: 15px;
 }
 
 /* responsive breakpoints (mobile-first) */
 @media (min-width: 480px) {
-	:root {
-		--font-size-2: 1.1rem;
-		--spacing-md: 1.25rem;
+	.ecmc {
+		--ecmc-font-size-2: 1.1em;
+		--ecmc-spacing-md: 1.25em;
 	}
 }
 
 @media (min-width: 640px) {
-	:root {
-		--font-size-3: 2.3rem;
-		--spacing-lg: 2.25rem;
+	.ecmc {
+		--ecmc-font-size-3: 2.3em;
+		--ecmc-spacing-lg: 2.25em;
 	}
 }
 
 @media (min-width: 768px) {
-	:root {
-		--font-size-2: 1.2rem;
-		--font-size-3: 2.5rem;
-		--spacing-xl: 3.25rem;
+	.ecmc {
+		--ecmc-font-size-2: 1.2em;
+		--ecmc-font-size-3: 2.5em;
+		--ecmc-spacing-xl: 3.25em;
 	}
 }
 
 @media (min-width: 1024px) {
-	:root {
-		--font-size-4: 3.25rem;
+	.ecmc {
+		--ecmc-font-size-4: 3.25em;
 	}
 }
 
 @media (min-width: 1280px) {
-	:root {
-		--font-size-3: 2.7rem;
-		--font-size-4: 3.5rem;
+	.ecmc {
+		--ecmc-font-size-3: 2.7em;
+		--ecmc-font-size-4: 3.5em;
 	}
 }
 
 @media (min-width: 1536px) {
-	:root {
-		--font-size-3: 2.9rem;
-		--font-size-4: 3.75rem;
+	.ecmc {
+		--ecmc-font-size-3: 2.9em;
+		--ecmc-font-size-4: 3.75em;
 	}
 }

package/package.json

@@ -2,7 +2,7 @@
 	"name": "ecmc-design-core",
 	"description": "Atoms and molecules for ecmc design system",
 	"license": "MIT",
-	"version": "0.0.3",
+	"version": "0.0.5",
 	"author": {
 		"name": "Arad Fadaei",
 		"url": "https://www.fadaei.dev"
@@ -40,7 +40,8 @@
 		".": {
 			"types": "./dist/index.d.ts",
 			"svelte": "./dist/index.js"
-		}
+		},
+		"./ecmc.css": "./dist/utils/ecmc.css"
 	},
 	"peerDependencies": {
 		"svelte": "^5.0.0"