do-ui-design-system 1.0.11 → 1.0.12

package/dist/atoms/Badge/Badge.svelte

@@ -1,45 +1,56 @@
 <script lang="ts">
-	import type { Snippet } from "svelte";
+	import type { iProps } from './iProps.ts';
 
-
-	let {variant = 'do-badge-primary', label = 'Texto', maxLength = null, customClass = '', enableTooltip = false, tooltipContent = '', children}: {variant?: 'do-badge-primary' | 'do-badge-secondary' | 'do-badge-accent', label?: string, maxLength?: number | null, customClass?: string, enableTooltip?: boolean, tooltipContent?: string, children?: Snippet} = $props();
-
-	let displayedText: string = $state("");
-	let isTruncated: boolean = $state(false);
-
-	$effect(() => {
-		displayedText =
-		maxLength && label.length > maxLength ? label.slice(0, maxLength) + '…' : label;	
-	})
-
-	$effect(() => {
-		isTruncated = maxLength && label.length > maxLength || false;	
-	})
+	let {
+		label = '10',
+		variant = 'do-badge-primary',
+		role,
+		ariaLabel,
+		title,
+		tabIndex,
+		ariaHidden,
+		dataTestId,
+		customClass,
+		customStyles
+	}: {
+		label: iProps['label'];
+		variant?: iProps['variant'];
+		role?: iProps['role'];
+		ariaLabel?: iProps['ariaLabel'];
+		title?: iProps['title'];
+		tabIndex?: iProps['tabIndex'];
+		ariaHidden?: iProps['ariaHidden'];
+		dataTestId?: iProps['dataTestId'];
+		customClass?: iProps['customClass'];
+		customStyles?: iProps['customStyles'];
+	} = $props();
 </script>
 
 <!-- @component Badge
   ```Svelte
-    <Badge label={label} maxLength={maxLength} customClass={customClass} enableTooltip={enableTooltip} tooltipContent={tooltipContent}>
-        {@render children()} // render custom content inside Badge tags
-    </Badge>
+    <Badge label={label} variant={variant} role={role} aria-label={ariaLabel} title={title} tabindex={tabIndex} aria-hidden={ariaHidden} data-testid={dataTestId} style={customStyles} class={customClass}/>
   	```
-	- `label?`: string
-	- `maxLength?`: number | null - max length of the text, if exceeded it will be truncated and "…" will be added
-    - `customClass?`: string - additional custom class for styling
-	- `enableTooltip?`: boolean - if true, the tooltipContent content will be displayed
-	- `tooltipContent?`: any HTML content. The display will be triggered while hovering over the component
-
+	- `label`: string - the text to display in the counter
+	- `variant?`: 'do-badge-primary' | 'do-badge-accent'
+	- `role?`: 'status' | 'alert' | 'tooltip'
+	- `ariaLabel?`: string
+	- `title?`: string
+	- `tabIndex?`: -1 | 0 | number
+	- `ariaHidden?`: boolean
+	- `dataTestId?`: string
+	- `customClass?`: string
+	- `customStyles?`: any CSS style
 -->
-<div class="do-badge--wrapper">
-	<div class={`do-badge ${variant} ${customClass}`} {...isTruncated ? { title: label } : {}}>
-		<span>
-			{displayedText}
-		</span>
-		{@render children?.()}
-		{#if enableTooltip}
-			<div class="do-badge__tooltip">
-				{@html tooltipContent}
-			</div>
-		{/if}
-	</div>
+
+<div
+	class={['do-badge', `${variant}`, `${customClass}`].join(' ')}
+	style={customStyles}
+	{role}
+	aria-label={ariaLabel}
+	{title}
+	{...tabIndex === 0 ? { tabindex: 0 } : {}}
+	aria-hidden={ariaHidden}
+	data-testid={dataTestId}
+>
+	<span>{label}</span>
 </div>

package/dist/atoms/Badge/Badge.svelte.d.ts

@@ -1,25 +1,31 @@
-import type { Snippet } from "svelte";
+import type { iProps } from './iProps.ts';
 type $$ComponentProps = {
-    variant?: 'do-badge-primary' | 'do-badge-secondary' | 'do-badge-accent';
-    label?: string;
-    maxLength?: number | null;
-    customClass?: string;
-    enableTooltip?: boolean;
-    tooltipContent?: string;
-    children?: Snippet;
+    label: iProps['label'];
+    variant?: iProps['variant'];
+    role?: iProps['role'];
+    ariaLabel?: iProps['ariaLabel'];
+    title?: iProps['title'];
+    tabIndex?: iProps['tabIndex'];
+    ariaHidden?: iProps['ariaHidden'];
+    dataTestId?: iProps['dataTestId'];
+    customClass?: iProps['customClass'];
+    customStyles?: iProps['customStyles'];
 };
 /**
  * Badge
  *  ```Svelte
- *    <Badge label={label} maxLength={maxLength} customClass={customClass} enableTooltip={enableTooltip} tooltipContent={tooltipContent}>
- *        {@render children()} // render custom content inside Badge tags
- *    </Badge>
+ *    <Badge label={label} variant={variant} role={role} aria-label={ariaLabel} title={title} tabindex={tabIndex} aria-hidden={ariaHidden} data-testid={dataTestId} style={customStyles} class={customClass}/>
  *  	```
- * - `label?`: string
- * - `maxLength?`: number | null - max length of the text, if exceeded it will be truncated and "…" will be added
- *    - `customClass?`: string - additional custom class for styling
- * - `enableTooltip?`: boolean - if true, the tooltipContent content will be displayed
- * - `tooltipContent?`: any HTML content. The display will be triggered while hovering over the component
+ * - `label`: string - the text to display in the counter
+ * - `variant?`: 'do-badge-primary' | 'do-badge-accent'
+ * - `role?`: 'status' | 'alert' | 'tooltip'
+ * - `ariaLabel?`: string
+ * - `title?`: string
+ * - `tabIndex?`: -1 | 0 | number
+ * - `ariaHidden?`: boolean
+ * - `dataTestId?`: string
+ * - `customClass?`: string
+ * - `customStyles?`: any CSS style
  */
 declare const Badge: import("svelte").Component<$$ComponentProps, {}, "">;
 type Badge = ReturnType<typeof Badge>;

package/dist/atoms/Badge/Badge.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/atoms/Badge/Badge.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAErC,KAAK,gBAAgB,GAAI;IAAC,OAAO,CAAC,EAAE,kBAAkB,GAAG,oBAAoB,GAAG,iBAAiB,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAAC,aAAa,CAAC,EAAE,OAAO,CAAC;IAAC,cAAc,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAC,CAAC;AAqC3O;;;;;;;;;;;;GAYG;AACH,QAAA,MAAM,KAAK,sDAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Badge.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/atoms/Badge/Badge.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAEzC,KAAK,gBAAgB,GAAI;IACxB,KAAK,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,CAAC,SAAS,CAAC,CAAC;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC,WAAW,CAAC,CAAC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC,UAAU,CAAC,CAAC;IAC9B,UAAU,CAAC,EAAE,MAAM,CAAC,YAAY,CAAC,CAAC;IAClC,UAAU,CAAC,EAAE,MAAM,CAAC,YAAY,CAAC,CAAC;IAClC,WAAW,CAAC,EAAE,MAAM,CAAC,aAAa,CAAC,CAAC;IACpC,YAAY,CAAC,EAAE,MAAM,CAAC,cAAc,CAAC,CAAC;CACtC,CAAC;AA0BH;;;;;;;;;;;;;;;GAeG;AACH,QAAA,MAAM,KAAK,sDAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}

package/dist/atoms/Badge/iProps.d.ts

@@ -1,8 +1,13 @@
 export interface iProps {
     label: string;
-    maxLength: number | null | undefined;
+    variant?: 'do-badge-primary' | 'do-badge-accent';
+    role?: 'status' | 'alert' | 'tooltip';
+    ariaLabel?: string;
+    title?: string;
+    tabIndex?: -1 | 0 | number;
+    ariaHidden?: boolean;
+    dataTestId?: string;
     customClass?: string;
-    enableTooltip?: boolean;
-    tooltipContent?: string;
+    customStyles?: string;
 }
 //# sourceMappingURL=iProps.d.ts.map

package/dist/atoms/Badge/iProps.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"iProps.d.ts","sourceRoot":"","sources":["../../../src/lib/atoms/Badge/iProps.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,MAAM;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;CACxB"}
+{"version":3,"file":"iProps.d.ts","sourceRoot":"","sources":["../../../src/lib/atoms/Badge/iProps.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,MAAM;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,kBAAkB,GAAG,iBAAiB,CAAC;IACjD,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;CACtB"}

package/dist/atoms/Button/Button.svelte

@@ -1,57 +1,110 @@
 <script lang="ts">
+	import type { Snippet } from 'svelte';
 	import type { iProps } from './iProps.ts';
 
-	export let variant: iProps['variant'] = 'do-btn-primary';
-	export let size: iProps['size'] = 'do-btn-md';
-	export let rounded: iProps['rounded'] = false;
-	export let label: iProps['label'] = '';
-	export let disabled: iProps['disabled'] = false;
-	export let loading: iProps['loading'] = false;
-	export let type: iProps['type'] = 'button';
-	export let circle: iProps['circle'] = false;
-	export let customStyles: iProps['customStyles'] = '';
-	export let customClass: iProps['class'] = '';
-	export let square: iProps['square'] = false;
+	let {
+		label = 'Label',
+		type = 'button',
+		ariaLabel,
+		onClick,
+		disabled,
+		title,
+		ariaDisabled,
+		name,
+		id,
+		variant = 'do-btn-primary',
+		size,
+		rounded,
+		loading,
+		circle,
+		customStyles,
+		customClass,
+		square,
+		noBorder,
+		dataTestId,
+		children
+	}: {
+		label?: iProps['label'];
+		type?: iProps['type'];
+		ariaLabel: iProps['ariaLabel'];
+		onClick: iProps['onClick'];
+		disabled?: iProps['disabled'];
+		title?: iProps['title'];
+		ariaDisabled?: iProps['ariaDisabled'];
+		name?: iProps['name'];
+		id?: iProps['id'];
+		variant?: iProps['variant'];
+		size?: iProps['size'];
+		rounded?: iProps['rounded'];
+		loading?: iProps['loading'];
+		circle?: iProps['circle'];
+		customStyles?: iProps['customStyles'];
+		customClass?: iProps['customClass'];
+		square?: iProps['square'];
+		noBorder?: iProps['noBorder'];
+		dataTestId?: iProps['dataTestId'];
+		children?: Snippet;
+	} = $props();
 
-	$: borderRadius = circle
-    ? 'border-radius:24px; padding: 6px; border: none;'
-    : rounded
-    ? 'border-radius:3rem;'
-	: square
-    ? 'border-radius:4px; padding: 8px;'
-    : '';
+	let borderRadius = $state('');
+	let mergedStyles = $state('');
 
-	$: mergedStyles = `${borderRadius} ${customStyles}`.trim();
+	$effect(() => {
+		borderRadius = circle
+			? 'border-radius:24px; padding: 6px; border: none;'
+			: rounded
+				? 'border-radius:3rem;'
+				: square
+					? 'border-radius:4px; padding: 8px;'
+					: noBorder
+						? 'border:none; padding: 8px;'
+						: '';
+	});
+
+	$effect(() => {
+		mergedStyles = `${borderRadius} ${customStyles}`.trim();
+	});
 </script>
 
 <!-- @component
   ```Svelte
   <Button variant?={variant} size?={size} label?={label} disabled?={disabled} loading?={loading} type?={type}/>
   	```
-	- `variant?`: 'do-btn-primary' | 'do-btn-secondary' | 'do-btn-tertiary' | 'do-btn-accent' | 'do-btn-link' | 'do-btn-link-accent'
-	- `size?`: 'do-btn-sm' | 'do-btn-md' | 'do-btn-lg'
 	- `label?`: string
+	- `type?`: 'button' | 'submit' | 'reset'
+	- `ariaLabel`: string
+	- `onClick`: () => void
 	- `disabled?`: boolean
+	- `title`?: string
+	- `ariaDisabled`?: boolean
+	- `name`?: string
+	- `id`?: string
+	- `variant?`: 'do-btn-primary' | 'do-btn-secondary' | 'do-btn-tertiary' | 'do-btn-accent' | 'do-btn-link' | 'do-btn-link-accent' | 'do-btn-ghost'
+	- `size?`: 'do-btn-sm' | 'do-btn-md' | 'do-btn-lg'
 	- `rounded?`: boolean
 	- `loading?`: boolean
-	- `type?`: 'button' | 'submit' | 'reset'
-	- `circle?`: boolean
-	- `type?`: any CSS style
 	- `customClass?`: string
 	- `customStyles?`: any CSS style
+	- `noBorder`?: boolean
+	- `dataTestId?`: string
 -->
 
 <button
-	{...$$restProps}
 	{type}
-	style={mergedStyles}
-	class={['do-btn', `${variant}`, `${size}`, `${customClass}`].join(' ')}
+	aria-label={ariaLabel}
+	onclick={onClick}
 	{disabled}
-	on:click
+	{title}
+	aria-disabled={ariaDisabled}
+	{name}
+	{id}
+	class={['do-btn', `${variant}`, `${size}`, `${customClass}`].join(' ')}
+	style={mergedStyles}
+	data-testid={dataTestId}
 >
-	<slot />
+	{@render children?.()}
 	{#if label}
 		<span>{label}</span>
 	{/if}
-	<i class="icon-loading do-loader" style="{loading ? 'display:inline-block;' : 'display:none;'}"></i>
-</button>
+	<i class="icon-loading do-loader" style={loading ? 'display:inline-block;' : 'display:none;'}></i>
+</button>

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

@@ -1,59 +1,50 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
+import type { Snippet } from 'svelte';
+import type { iProps } from './iProps.ts';
+type $$ComponentProps = {
+    label?: iProps['label'];
+    type?: iProps['type'];
+    ariaLabel: iProps['ariaLabel'];
+    onClick: iProps['onClick'];
+    disabled?: iProps['disabled'];
+    title?: iProps['title'];
+    ariaDisabled?: iProps['ariaDisabled'];
+    name?: iProps['name'];
+    id?: iProps['id'];
+    variant?: iProps['variant'];
+    size?: iProps['size'];
+    rounded?: iProps['rounded'];
+    loading?: iProps['loading'];
+    circle?: iProps['circle'];
+    customStyles?: iProps['customStyles'];
+    customClass?: iProps['customClass'];
+    square?: iProps['square'];
+    noBorder?: iProps['noBorder'];
+    dataTestId?: iProps['dataTestId'];
+    children?: Snippet;
+};
 /**
  * ```Svelte
  *  <Button variant?={variant} size?={size} label?={label} disabled?={disabled} loading?={loading} type?={type}/>
  *  	```
- * - `variant?`: 'do-btn-primary' | 'do-btn-secondary' | 'do-btn-tertiary' | 'do-btn-accent' | 'do-btn-link' | 'do-btn-link-accent'
- * - `size?`: 'do-btn-sm' | 'do-btn-md' | 'do-btn-lg'
  * - `label?`: string
+ * - `type?`: 'button' | 'submit' | 'reset'
+ * - `ariaLabel`: string
+ * - `onClick`: () => void
  * - `disabled?`: boolean
+ * - `title`?: string
+ * - `ariaDisabled`?: boolean
+ * - `name`?: string
+ * - `id`?: string
+ * - `variant?`: 'do-btn-primary' | 'do-btn-secondary' | 'do-btn-tertiary' | 'do-btn-accent' | 'do-btn-link' | 'do-btn-link-accent' | 'do-btn-ghost'
+ * - `size?`: 'do-btn-sm' | 'do-btn-md' | 'do-btn-lg'
  * - `rounded?`: boolean
  * - `loading?`: boolean
- * - `type?`: 'button' | 'submit' | 'reset'
- * - `circle?`: boolean
- * - `type?`: any CSS style
  * - `customClass?`: string
  * - `customStyles?`: any CSS style
+ * - `noBorder`?: boolean
+ * - `dataTestId?`: string
  */
-declare const Button: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    [x: string]: any;
-    variant?: "do-btn-primary" | "do-btn-secondary" | "do-btn-tertiary" | "do-btn-link" | "do-btn-accent" | "do-btn-link-accent" | undefined;
-    size?: "do-btn-sm" | "do-btn-md" | "do-btn-lg" | undefined;
-    rounded?: boolean | undefined;
-    label?: string | undefined;
-    disabled?: boolean | undefined;
-    loading?: boolean | undefined;
-    type?: "submit" | "reset" | "button" | undefined;
-    circle?: boolean | undefined;
-    customStyles?: string | undefined;
-    customClass?: import("svelte/elements").ClassValue | null | undefined;
-    square?: boolean | undefined;
-}, {
-    default: {};
-}>, {
-    click: MouseEvent;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type Button = InstanceType<typeof Button>;
+declare const Button: import("svelte").Component<$$ComponentProps, {}, "">;
+type Button = ReturnType<typeof Button>;
 export default Button;
 //# sourceMappingURL=Button.svelte.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Button.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/atoms/Button/Button.svelte.ts"],"names":[],"mappings":"AA0CA,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AACD,KAAK,gCAAgC,CAAC,KAAK,EAAE,KAAK,IAAI,KAAK,GACvD,CAAC,KAAK,SAAS;IAAE,OAAO,EAAE,GAAG,CAAA;CAAE,GACzB,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,GACnC,GAAG,GACH;IAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;CAAE,GAClB,EAAE,CAAC,CAAC;AAId;;;;;;;;;;;;;;;GAeG;AACH,QAAA,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;cAA4G,CAAC;AACvG,KAAK,MAAM,GAAG,YAAY,CAAC,OAAO,MAAM,CAAC,CAAC;AAC5C,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Button.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/atoms/Button/Button.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAEzC,KAAK,gBAAgB,GAAI;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC;IACxB,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC;IACtB,SAAS,EAAE,MAAM,CAAC,WAAW,CAAC,CAAC;IAC/B,OAAO,EAAE,MAAM,CAAC,SAAS,CAAC,CAAC;IAC3B,QAAQ,CAAC,EAAE,MAAM,CAAC,UAAU,CAAC,CAAC;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC,cAAc,CAAC,CAAC;IACtC,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC;IACtB,EAAE,CAAC,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC,SAAS,CAAC,CAAC;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC,SAAS,CAAC,CAAC;IAC5B,OAAO,CAAC,EAAE,MAAM,CAAC,SAAS,CAAC,CAAC;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAC,QAAQ,CAAC,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC,cAAc,CAAC,CAAC;IACtC,WAAW,CAAC,EAAE,MAAM,CAAC,aAAa,CAAC,CAAC;IACpC,MAAM,CAAC,EAAE,MAAM,CAAC,QAAQ,CAAC,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC,UAAU,CAAC,CAAC;IAC9B,UAAU,CAAC,EAAE,MAAM,CAAC,YAAY,CAAC,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AA4DH;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,QAAA,MAAM,MAAM,sDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/dist/atoms/Button/iProps.d.ts

@@ -1,16 +1,22 @@
-import type { HTMLButtonAttributes } from 'svelte/elements';
-export interface iProps extends HTMLButtonAttributes {
-    variant?: 'do-btn-primary' | 'do-btn-secondary' | 'do-btn-tertiary' | 'do-btn-link' | 'do-btn-accent' | 'do-btn-link-accent';
+export interface iProps {
+    label?: string;
     type?: 'button' | 'submit' | 'reset';
+    ariaLabel: string;
+    onClick: () => void;
+    disabled?: boolean;
+    title?: string;
+    ariaDisabled?: boolean;
+    name?: string;
+    id?: string;
+    variant?: 'do-btn-primary' | 'do-btn-secondary' | 'do-btn-tertiary' | 'do-btn-link' | 'do-btn-accent' | 'do-btn-link-accent' | 'do-btn-ghost';
     size?: 'do-btn-sm' | 'do-btn-md' | 'do-btn-lg';
     rounded?: boolean;
-    label?: string;
-    disabled?: boolean;
     loading?: boolean;
-    loadingIcon?: undefined;
     circle?: boolean;
     customStyles?: string;
     customClass?: string;
     square?: boolean;
+    noBorder?: boolean;
+    dataTestId?: string;
 }
 //# sourceMappingURL=iProps.d.ts.map

package/dist/atoms/Button/iProps.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"iProps.d.ts","sourceRoot":"","sources":["../../../src/lib/atoms/Button/iProps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAE5D,MAAM,WAAW,MAAO,SAAQ,oBAAoB;IACnD,OAAO,CAAC,EAAE,gBAAgB,GAAG,kBAAkB,GAAG,iBAAiB,GAAG,aAAa,GAAG,eAAe,GAAG,oBAAoB,CAAC;IAC7H,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC,IAAI,CAAC,EAAE,WAAW,GAAG,WAAW,GAAG,WAAW,CAAC;IAC/C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;CACjB"}
+{"version":3,"file":"iProps.d.ts","sourceRoot":"","sources":["../../../src/lib/atoms/Button/iProps.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,MAAM;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,EAAE,gBAAgB,GAAG,kBAAkB,GAAG,iBAAiB,GAAG,aAAa,GAAG,eAAe,GAAG,oBAAoB,GAAG,cAAc,CAAC;IAC9I,IAAI,CAAC,EAAE,WAAW,GAAG,WAAW,GAAG,WAAW,CAAC;IAC/C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;CACpB"}

package/dist/atoms/Card/Card.svelte

@@ -1,8 +1,20 @@
 <script lang="ts">
-	import type { Snippet } from "svelte";
-	import type { iProps } from "./iProps.ts";
+	import type { Snippet } from 'svelte';
+	import type { iProps } from './iProps.ts';
 
-	let { children, variant, customClass, ariaLabel }: {children: Snippet, variant: iProps['variant'], customClass?: iProps['customClass'], ariaLabel?: iProps['ariaLabel']} = $props();
+	let {
+		children,
+		variant,
+		customClass,
+		ariaLabel,
+		dataTestId
+	}: {
+		children: Snippet;
+		variant: iProps['variant'];
+		customClass?: iProps['customClass'];
+		ariaLabel?: iProps['ariaLabel'];
+		dataTestId?: iProps['dataTestId'];
+	} = $props();
 </script>
 
 <!-- @component Card
@@ -13,8 +25,9 @@
   	```
 	- `variant`:  'do-card-primary' | 'do-card-secondary'
     - `customClass?`: string - additional custom class for styling
+	- `ariaLabel?`: string
+	- `dataTestId?`: string
 -->
-<div 
-	class="do-card {variant} {customClass}" aria-label={ariaLabel}>
+<div class="do-card {variant} {customClass}" aria-label={ariaLabel} data-testid={dataTestId}>
 	{@render children?.()}
 </div>

package/dist/atoms/Card/Card.svelte.d.ts

@@ -1,10 +1,11 @@
-import type { Snippet } from "svelte";
-import type { iProps } from "./iProps.ts";
+import type { Snippet } from 'svelte';
+import type { iProps } from './iProps.ts';
 type $$ComponentProps = {
     children: Snippet;
     variant: iProps['variant'];
     customClass?: iProps['customClass'];
     ariaLabel?: iProps['ariaLabel'];
+    dataTestId?: iProps['dataTestId'];
 };
 /**
  * Card
@@ -15,6 +16,8 @@ type $$ComponentProps = {
  *  	```
  * - `variant`:  'do-card-primary' | 'do-card-secondary'
  *    - `customClass?`: string - additional custom class for styling
+ * - `ariaLabel?`: string
+ * - `dataTestId?`: string
  */
 declare const Card: import("svelte").Component<$$ComponentProps, {}, "">;
 type Card = ReturnType<typeof Card>;

package/dist/atoms/Card/Card.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Card.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/atoms/Card/Card.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAEzC,KAAK,gBAAgB,GAAI;IAAC,QAAQ,EAAE,OAAO,CAAC;IAAC,OAAO,EAAE,MAAM,CAAC,SAAS,CAAC,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,CAAC,aAAa,CAAC,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAC,WAAW,CAAC,CAAA;CAAC,CAAC;AAehJ;;;;;;;;;GASG;AACH,QAAA,MAAM,IAAI,sDAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Card.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/atoms/Card/Card.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAEzC,KAAK,gBAAgB,GAAI;IACxB,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC,SAAS,CAAC,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAC,aAAa,CAAC,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC,WAAW,CAAC,CAAC;IAChC,UAAU,CAAC,EAAE,MAAM,CAAC,YAAY,CAAC,CAAC;CAClC,CAAC;AAqBH;;;;;;;;;;;GAWG;AACH,QAAA,MAAM,IAAI,sDAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}

package/dist/atoms/Card/iProps.d.ts

@@ -2,5 +2,6 @@ export interface iProps {
     variant: 'do-card-primary' | 'do-card-secondary';
     customClass?: string;
     ariaLabel: string;
+    dataTestId?: string;
 }
 //# sourceMappingURL=iProps.d.ts.map

package/dist/atoms/Card/iProps.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"iProps.d.ts","sourceRoot":"","sources":["../../../src/lib/atoms/Card/iProps.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,MAAM;IACtB,OAAO,EAAE,iBAAiB,GAAG,mBAAmB,CAAC;IACjD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;CAClB"}
+{"version":3,"file":"iProps.d.ts","sourceRoot":"","sources":["../../../src/lib/atoms/Card/iProps.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,MAAM;IACtB,OAAO,EAAE,iBAAiB,GAAG,mBAAmB,CAAC;IACjD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;CACpB"}

package/dist/atoms/Chip/Chip.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { iProps } from './iProps.ts';
+
+	let {
+		label = 'Label',
+		ariaLabel,
+		role,
+		tabIndex,
+		id,
+		maxLength = null,
+		variant = 'do-chip-primary',
+		customClass = '',
+		dataTestId,
+		children
+	}: {
+		label?: iProps['label'];
+		ariaLabel?: iProps['ariaLabel'];
+		role?: iProps['role'];
+		tabIndex?: iProps['tabIndex'];
+		id?: iProps['id'];
+		maxLength?: iProps['maxLength'];
+		variant?: iProps['variant'];
+		customClass?: iProps['customClass'];
+		dataTestId?: iProps['dataTestId'];
+		children?: Snippet;
+	} = $props();
+
+	let displayedText: string = $state('');
+	let isTruncated: boolean = $state(false);
+
+	$effect(() => {
+		displayedText = maxLength && label.length > maxLength ? label.slice(0, maxLength) + '…' : label;
+	});
+
+	$effect(() => {
+		isTruncated = (maxLength && label.length > maxLength) || false;
+	});
+</script>
+
+<!-- @component Chip
+  ```Svelte
+    <Chip label={label} aria-label={ariaLabel} role={role} tabindex={tabIndex} id={id} maxLength={maxLength} variant={variant} customClass={customClass} data-testid={dataTestId}>
+        {@render children()} // render custom content inside Chip tags
+    </Chip>
+  	```
+	- `label?`: string
+	- `ariaLabel?`: string
+	- `role?`: 'status' | 'note' | 'button'
+	- `tabIndex?`: -1 | 0 | number
+	- `id?`: string
+	- `maxLength?`: number | null - max length of the text, if exceeded it will be truncated and "…" will be added
+	- `variant?`: 'do-chip-primary' | 'do-chip-secondary' | 'do-chip-accent'
+    - `customClass?`: string - additional custom class for styling
+	- `dataTestId?`: string
+
+-->
+<div
+	class={`do-chip ${variant} ${customClass}`}
+	{...isTruncated ? { title: label } : {}}
+	aria-label={ariaLabel}
+	{role}
+	{...tabIndex === 0 ? { tabindex: 0 } : {}}
+	{id}
+	data-testid={dataTestId}
+>
+	<span>
+		{displayedText}
+	</span>
+	{@render children?.()}
+</div>