do-ui-design-system 1.0.11 → 1.0.12

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

@@ -0,0 +1,35 @@
+import type { Snippet } from 'svelte';
+import type { iProps } from './iProps.ts';
+type $$ComponentProps = {
+    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;
+};
+/**
+ * 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
+ */
+declare const Chip: import("svelte").Component<$$ComponentProps, {}, "">;
+type Chip = ReturnType<typeof Chip>;
+export default Chip;
+//# sourceMappingURL=Chip.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Chip.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/atoms/Chip/Chip.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,SAAS,CAAC,EAAE,MAAM,CAAC,WAAW,CAAC,CAAC;IAChC,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC,UAAU,CAAC,CAAC;IAC9B,EAAE,CAAC,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC,WAAW,CAAC,CAAC;IAChC,OAAO,CAAC,EAAE,MAAM,CAAC,SAAS,CAAC,CAAC;IAC5B,WAAW,CAAC,EAAE,MAAM,CAAC,aAAa,CAAC,CAAC;IACpC,UAAU,CAAC,EAAE,MAAM,CAAC,YAAY,CAAC,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAwCH;;;;;;;;;;;;;;;;GAgBG;AACH,QAAA,MAAM,IAAI,sDAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}

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

@@ -0,0 +1,12 @@
+export interface iProps {
+    label?: string;
+    ariaLabel?: string;
+    role?: 'status' | 'note' | 'button';
+    tabIndex?: -1 | 0 | number;
+    id?: string;
+    maxLength?: number | null | undefined;
+    variant?: 'do-chip-primary' | 'do-chip-secondary' | 'do-chip-accent';
+    customClass?: string;
+    dataTestId?: string;
+}
+//# sourceMappingURL=iProps.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"iProps.d.ts","sourceRoot":"","sources":["../../../src/lib/atoms/Chip/iProps.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,MAAM;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,QAAQ,CAAC;IACpC,QAAQ,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC;IAC3B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IACtC,OAAO,CAAC,EAAE,iBAAiB,GAAG,mBAAmB,GAAG,gBAAgB,CAAC;IACrE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;CACpB"}

package/dist/atoms/Icons/Icon.svelte

@@ -1,27 +1,57 @@
 <script lang="ts">
-    import { type iProps } from "./iProps.ts";
+	import type { iProps } from './iProps.ts';
 
-    export let name: iProps['name'] = "icon-contrast";
-    export let color: iProps['color'] = "inherit";
-    export let size: iProps['size'] = "inherit";
-    export let customStyles: iProps['customStyles'] = '';
-    export let customClass: iProps['customClass'] = '';
+	let {
+		name = 'icon-contrast',
+		color = 'inherit',
+		size = 'inherit',
+		ariaHidden,
+		role,
+		ariaLabel,
+		title,
+		tabIndex,
+		id,
+		customStyles,
+		customClass
+	}: {
+		name: iProps['name'];
+		color?: iProps['color'];
+		size?: iProps['size'];
+		ariaHidden?: iProps['ariaHidden'];
+		role?: iProps['role'];
+		ariaLabel?: iProps['ariaLabel'];
+		title?: iProps['title'];
+		tabIndex?: iProps['tabIndex'];
+		id?: iProps['id'];
+		customStyles?: iProps['customStyles'];
+		customClass?: iProps['customClass'];
+	} = $props();
+</script>
 
-  </script>
-
-  <!-- @component
+<!-- @component
     ```Svelte
       <Icon name={icon} color?={color} size?={size}/>
     ```
     - `name`: one of the .icon classes suggested by the component.
     - `color?`: Any color style (ex. #000).
     - `size?`: Any size style (ex. 1rem).
+	- `ariaHidden?`: boolean
+	- `role?`: 'img' | 'presentation' | 'none'
+	- `ariaLabel?`: string
+	- `title?`: string
+	- `tabIndex?`: -1 | 0 | number
+	- `id?`: string
     - `customClass?`: string
     - `customStyles?`: any CSS style
   -->
 
-  <i    
-    {...$$restProps}
-    class={[`${name}`, `${customClass}`].join(' ')}
-    style={[`color:${color};font-size:${size};line-height:1;`, `${customStyles}`].join(' ')}
-  ></i> 
+<i
+	aria-hidden={ariaHidden}
+	{role}
+	aria-label={ariaLabel}
+	{title}
+	{...tabIndex === 0 ? { tabindex: 0 } : {}}
+	{id}
+	class={[`${name}`, `${customClass}`].join(' ')}
+	style={[`color:${color};font-size:${size};line-height:1;`, `${customStyles}`].join(' ')}
+></i>

package/dist/atoms/Icons/Icon.svelte.d.ts

@@ -1,37 +1,34 @@
-import { type iProps } from "./iProps.ts";
-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;
-}
+import type { iProps } from './iProps.ts';
+type $$ComponentProps = {
+    name: iProps['name'];
+    color?: iProps['color'];
+    size?: iProps['size'];
+    ariaHidden?: iProps['ariaHidden'];
+    role?: iProps['role'];
+    ariaLabel?: iProps['ariaLabel'];
+    title?: iProps['title'];
+    tabIndex?: iProps['tabIndex'];
+    id?: iProps['id'];
+    customStyles?: iProps['customStyles'];
+    customClass?: iProps['customClass'];
+};
 /**
  * ```Svelte
- *   <Icon name={icon} color?={color} size?={size}/>
- * ```
- * - `name`: one of the .icon classes suggested by the component.
- * - `color?`: Any color style (ex. #000).
- * - `size?`: Any size style (ex. 1rem).
- * - `customClass?`: string
- * - `customStyles?`: any CSS style
+ *      <Icon name={icon} color?={color} size?={size}/>
+ *    ```
+ *    - `name`: one of the .icon classes suggested by the component.
+ *    - `color?`: Any color style (ex. #000).
+ *    - `size?`: Any size style (ex. 1rem).
+ * - `ariaHidden?`: boolean
+ * - `role?`: 'img' | 'presentation' | 'none'
+ * - `ariaLabel?`: string
+ * - `title?`: string
+ * - `tabIndex?`: -1 | 0 | number
+ * - `id?`: string
+ *    - `customClass?`: string
+ *    - `customStyles?`: any CSS style
  */
-declare const Icon: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: any;
-    name?: iProps["name"] | undefined;
-    color?: string | undefined;
-    size?: string | undefined;
-    customStyles?: string | undefined;
-    customClass?: string | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Icon = InstanceType<typeof Icon>;
+declare const Icon: import("svelte").Component<$$ComponentProps, {}, "">;
+type Icon = ReturnType<typeof Icon>;
 export default Icon;
 //# sourceMappingURL=Icon.svelte.d.ts.map

package/dist/atoms/Icons/Icon.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/atoms/Icons/Icon.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,MAAM,EAAE,MAAM,aAAa,CAAC;AAkB1C,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;AAKD;;;;;;;;;GASG;AACH,QAAA,MAAM,IAAI;;WApBkH,MAAM,CAAC,MAAM,CAAC;;;;;;;kBAoB1B,CAAC;AAC/F,KAAK,IAAI,GAAG,YAAY,CAAC,OAAO,IAAI,CAAC,CAAC;AACxC,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Icon.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/atoms/Icons/Icon.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAEzC,KAAK,gBAAgB,GAAI;IACxB,IAAI,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC;IACxB,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC,YAAY,CAAC,CAAC;IAClC,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,EAAE,CAAC,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC,cAAc,CAAC,CAAC;IACtC,WAAW,CAAC,EAAE,MAAM,CAAC,aAAa,CAAC,CAAC;CACpC,CAAC;AAyBH;;;;;;;;;;;;;;;GAeG;AACH,QAAA,MAAM,IAAI,sDAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}

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

@@ -1,9 +1,15 @@
-import type { HTMLLabelAttributes } from "svelte/elements";
-import { type IconNames } from "./../../do-theme/icomoon/iconList.ts";
+import type { HTMLLabelAttributes } from 'svelte/elements';
+import { type IconNames } from './../../do-theme/icomoon/iconList.ts';
 export interface iProps extends HTMLLabelAttributes {
-    name: IconNames | "";
+    name: IconNames | '';
     color?: string;
     size?: string;
+    ariaHidden?: boolean;
+    role?: 'img' | 'presentation' | 'none';
+    ariaLabel?: string;
+    title?: string;
+    tabIndex?: -1 | 0 | number;
+    id?: string;
     customClass?: string;
     customStyles?: string;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"iProps.d.ts","sourceRoot":"","sources":["../../../src/lib/atoms/Icons/iProps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,sCAAsC,CAAC;AAEtE,MAAM,WAAW,MAAO,SAAQ,mBAAmB;IAC/C,IAAI,EAAE,SAAS,GAAG,EAAE,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;CACzB"}
+{"version":3,"file":"iProps.d.ts","sourceRoot":"","sources":["../../../src/lib/atoms/Icons/iProps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,sCAAsC,CAAC;AAEtE,MAAM,WAAW,MAAO,SAAQ,mBAAmB;IAClD,IAAI,EAAE,SAAS,GAAG,EAAE,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,KAAK,GAAG,cAAc,GAAG,MAAM,CAAC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC;IAC3B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;CACtB"}

package/dist/atoms/Icons/iProps.js

@@ -1 +1 @@
-import {} from "./../../do-theme/icomoon/iconList.ts";
+import {} from './../../do-theme/icomoon/iconList.ts';

package/dist/atoms/index.d.ts

@@ -1,6 +1,7 @@
-import Button from "./Button/Button.svelte";
-import Icon from "./Icons/Icon.svelte";
-import Badge from "./Badge/Badge.svelte";
-import Counter from "./Counter/Counter.svelte";
-export { Button, Icon, Badge, Counter };
+import Badge from './Badge/Badge.svelte';
+import Button from './Button/Button.svelte';
+import Card from './Card/Card.svelte';
+import Chip from './Chip/Chip.svelte';
+import Icon from './Icons/Icon.svelte';
+export { Card, Chip, Badge, Button, Icon };
 //# sourceMappingURL=index.d.ts.map

package/dist/atoms/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/lib/atoms/index.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,wBAAwB,CAAC;AAC5C,OAAO,IAAI,MAAM,qBAAqB,CAAC;AACvC,OAAO,KAAK,MAAM,sBAAsB,CAAC;AACzC,OAAO,OAAO,MAAM,0BAA0B,CAAC;AAE/C,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/lib/atoms/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,sBAAsB,CAAC;AACzC,OAAO,MAAM,MAAM,wBAAwB,CAAC;AAC5C,OAAO,IAAI,MAAM,oBAAoB,CAAC;AACtC,OAAO,IAAI,MAAM,oBAAoB,CAAC;AACtC,OAAO,IAAI,MAAM,qBAAqB,CAAC;AAEvC,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC"}

package/dist/atoms/index.js

@@ -1,5 +1,6 @@
-import Button from "./Button/Button.svelte";
-import Icon from "./Icons/Icon.svelte";
-import Badge from "./Badge/Badge.svelte";
-import Counter from "./Counter/Counter.svelte";
-export { Button, Icon, Badge, Counter };
+import Badge from './Badge/Badge.svelte';
+import Button from './Button/Button.svelte';
+import Card from './Card/Card.svelte';
+import Chip from './Chip/Chip.svelte';
+import Icon from './Icons/Icon.svelte';
+export { Card, Chip, Badge, Button, Icon };

package/dist/do-theme/badge.css

@@ -1,67 +1,23 @@
-.do-badge--wrapper {
-  position: relative;
-  display: inline-block;
-}
-
 .do-badge {
 	display: inline-flex;
-	padding: 6px 10px;
+	padding: 2px 6px;
+	flex-direction: column;
 	justify-content: center;
 	align-items: center;
-	border: 1px solid;
-	gap: 4px;
-	border-radius: 24px;
+	border-radius: 48px;
 	font-size: 12px;
 	font-style: normal;
-	font-weight: 500;
+	font-weight: 400;
 	line-height: normal;
-  white-space: nowrap;
-}
-
-.do-badge__tooltip {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  background: var(--do-badge-tooltip-bg);
-  color: var(--do-badge-tooltip-content);
-  font-size: 12px;
-  padding: 4px 8px;
-  border-radius: 4px;
-  white-space: nowrap;
-  margin-top: 4px;
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity 0.2s ease-in-out;
-  z-index: 10;
-}
-
-.do-badge--wrapper:hover .do-badge__tooltip {
-  opacity: 1;
-  pointer-events: auto;
+	align-self: stretch;
 }
 
 .do-badge-primary {
-	color: var(--do-badge-primary-content);
-	border-color: var(--do-badge-primary-border);
-	background-color: var(--do-badge-primary-bg);
-}
-
-.do-badge-primary:hover,
-.do-badge-primary:focus {
-	color: var(--do-badge-primary-hover-content);
-	border-color: var(--do-badge-primary-border);
-	background-color: var(--do-badge-primary-hover-bg);
+    color: var(--do-badge-primary-content);
+    background-color: var(--do-badge-primary-bg);
 }
 
 .do-badge-accent {
 	color: var(--do-badge-accent-content);
-	border-color: var(--do-badge-accent-border);
 	background-color: var(--do-badge-accent-bg);
-}
-
-.do-badge-accent:hover,
-.do-badge-accent:focus {
-	color: var(--do-badge-accent-hover-content);
-	border-color: var(--do-badge-accent-border);
-	background-color: var(--do-badge-accent-hover-bg);
-}
+}

package/dist/do-theme/button.css

@@ -151,6 +151,19 @@ background-color: var(--do-chip-bg);
 	background-color: var(--do-chip-bg-hover);
 }
 
+.do-btn-ghost {
+	background-color: transparent;
+	border-color: none;
+	color: inherit;
+}
+
+.do-btn-ghost:hover {
+	background-color: transparent;
+	border-color: none;
+	backdrop-filter: blur(0.5rem);
+	color: #FFF8;
+}
+
 @keyframes rotation {
 	0% {
 		transform: rotate(0deg);

package/dist/do-theme/chip.css

@@ -0,0 +1,67 @@
+.do-chip--wrapper {
+  position: relative;
+  display: inline-flex;
+}
+
+.do-chip {
+	display: inline-flex;
+	padding: 6px 10px;
+	justify-content: center;
+	align-items: center;
+	border: 1px solid;
+	gap: 4px;
+	border-radius: 24px;
+	font-size: 12px;
+	font-style: normal;
+	font-weight: 500;
+	line-height: normal;
+  white-space: nowrap;
+}
+
+.do-chip__tooltip {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  background: var(--do-chip-tooltip-bg);
+  color: var(--do-chip-tooltip-content);
+  font-size: 12px;
+  padding: 4px 8px;
+  border-radius: 4px;
+  white-space: nowrap;
+  margin-top: 4px;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.2s ease-in-out;
+  z-index: 10;
+}
+
+.do-chip--wrapper:hover .do-chip__tooltip {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.do-chip-primary {
+	color: var(--do-chip-primary-content);
+	border: 1px solid var(--do-chip-primary-border);
+	background-color: var(--do-chip-primary-bg);
+}
+
+.do-chip-primary:hover,
+.do-chip-primary:focus {
+	color: var(--do-chip-primary-hover-content);
+	border-color: var(--do-chip-primary-border);
+	background-color: var(--do-chip-primary-hover-bg);
+}
+
+.do-chip-accent {
+	color: var(--do-chip-accent-content);
+	border-color: var(--do-chip-accent-border);
+	background-color: var(--do-chip-accent-bg);
+}
+
+.do-chip-accent:hover,
+.do-chip-accent:focus {
+	color: var(--do-chip-accent-hover-content);
+	border-color: var(--do-chip-accent-border);
+	background-color: var(--do-chip-accent-hover-bg);
+}

package/dist/do-theme/index.css

@@ -9,8 +9,8 @@
 @import "./button.css";
 @import "./border.css";
 @import "./card.css";
+@import "./chip.css";
 @import "./color.css";
-@import "./counter.css";
 
 /* 
   To modify themes (light and dark):

package/dist/do-theme/var-dark.css

@@ -50,24 +50,26 @@
 	--do-chip-content-hover: #FAFAFA;
 	--do-chip-bg-hover: #27272A;
 	
-	/*badge colors*/
-	--do-badge-primary-content: #FAFAFA;
-	--do-badge-primary-bg: #52525B;
-	--do-badge-primary-hover-content: #FAFAFA;
-	--do-badge-primary-hover-bg: #27272A;
-	--do-badge-primary-border: #71717A;
-	--do-badge-tooltip-content:#FAFAFA;
-	--do-badge-tooltip-bg:#71717A;
-	--do-badge-accent-content: #FAFAFA;
-	--do-badge-accent-bg: #3B82F6;
-	--do-badge-accent-hover-content: #FAFAFA;
-	--do-badge-accent-hover-bg: #1D4ED8;
-	--do-badge-accent-border: #1D4ED8;
-	--do-badge-accent-hover-border: #1E40AF;
+	/*chip colors*/
+	--do-chip-primary-content: #FAFAFA;
+	--do-chip-primary-bg: #52525B;
+	--do-chip-primary-hover-content: #FAFAFA;
+	--do-chip-primary-hover-bg: #27272A;
+	--do-chip-primary-border: #71717A;
+	--do-chip-tooltip-content:#FAFAFA;
+	--do-chip-tooltip-bg:#71717A;
+	--do-chip-accent-content: #FAFAFA;
+	--do-chip-accent-bg: #3B82F6;
+	--do-chip-accent-hover-content: #FAFAFA;
+	--do-chip-accent-hover-bg: #1D4ED8;
+	--do-chip-accent-border: #1D4ED8;
+	--do-chip-accent-hover-border: #1E40AF;
 
-	/*counter colors*/
-	--do-counter-primary-content:#FAFAFA;
-	--do-counter-primary-bg:#71717A;
+	/*badge colors*/
+	--do-badge-primary-content:#FAFAFA;
+	--do-badge-primary-bg:#71717A;
+	--do-badge-accent-content:#2563EB;
+	--do-badge-accent-bg:#FAFAFA;
 
 	/* base sizes */
 	--size-selector: 0.25rem;

package/dist/do-theme/var-light.css

@@ -12,8 +12,8 @@
 	--do-color-white: #fff;
 	--do-color-black: #000;
 	--do-color-grey-border: #e4e4e7;
-	--do-color-grey: #F4F4F5;
-	--color-dark-grey: #18181B;
+	--do-color-grey: #f4f4f5;
+	--color-dark-grey: #18181b;
 	--color-dark-grey-border: #303030;
 
 	/*buttons variables*/
@@ -52,24 +52,26 @@
 	--do-chip-content-hover: #fafafa;
 	--do-chip-bg-hover: #27272a;
 
-	/*badge colors*/
-	--do-badge-primary-content: #3F3F46;
-	--do-badge-primary-bg: #FAFAFA;
-	--do-badge-primary-hover-content:#FAFAFA;
-	--do-badge-primary-hover-bg: #52525B;
-	--do-badge-primary-border: #A3A3A3;
-	--do-badge-tooltip-content: #3F3F46;
-	--do-badge-tooltip-bg: #D4D4D8;
-	--do-badge-accent-content: #1D4ED8;
-	--do-badge-accent-bg: #DBEAFE;
-	--do-badge-accent-hover-content: #FAFAFA;
-	--do-badge-accent-hover-bg: #1D4ED8;
-	--do-badge-accent-border: #BFDBFE;
-	--do-badge-accent-hover-border: #1E40AF;
+	/*chip colors*/
+	--do-chip-primary-content: #3f3f46;
+	--do-chip-primary-bg: #fafafa;
+	--do-chip-primary-hover-content: #fafafa;
+	--do-chip-primary-hover-bg: #52525b;
+	--do-chip-primary-border: #a3a3a3;
+	--do-chip-tooltip-content: #3f3f46;
+	--do-chip-tooltip-bg: #d4d4d8;
+	--do-chip-accent-content: #1d4ed8;
+	--do-chip-accent-bg: #dbeafe;
+	--do-chip-accent-hover-content: #fafafa;
+	--do-chip-accent-hover-bg: #1d4ed8;
+	--do-chip-accent-border: #bfdbfe;
+	--do-chip-accent-hover-border: #1e40af;
 
-	/*counter colors*/
-	--do-counter-primary-content: #3F3F46;
-	--do-counter-primary-bg: #D4D4D8;
+	/*badge colors*/
+	--do-badge-primary-content: #3f3f46;
+	--do-badge-primary-bg: #d4d4d8;
+	--do-badge-accent-content: #EFF6FF;
+	--do-badge-accent-bg: #1D4ED8;
 
 	/* base sizes */
 	--size-selector: 0.25rem;
@@ -88,7 +90,7 @@
 	--do-card-secondary-border: var(--do-color-grey-border);
 
 	/*styles*/
-	--do-text-base: #18181B;
+	--do-text-base: #18181b;
 	--do-text-contrast: #fff;
 	--do-transparent: transparent;
 

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { Button, Icon, Counter, Badge } from './atoms/index.js';
-import { IconButton, CounterBadge } from './molecules/index.js';
-export { Button, Icon, Counter, Badge, IconButton, CounterBadge };
+import { Badge, Button, Card, Chip, Icon } from './atoms/index.js';
+import { IconButton } from './molecules/index.js';
+export { Button, Icon, Badge, IconButton, Card, Chip };
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/lib/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAC,MAAM,kBAAkB,CAAC;AAC9D,OAAO,EAAC,UAAU,EAAE,YAAY,EAAC,MAAM,sBAAsB,CAAC;AAE9D,OAAO,EAAC,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,YAAY,EAAC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/lib/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACnE,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAElD,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC"}

package/dist/index.js

@@ -1,3 +1,3 @@
-import { Button, Icon, Counter, Badge } from './atoms/index.js';
-import { IconButton, CounterBadge } from './molecules/index.js';
-export { Button, Icon, Counter, Badge, IconButton, CounterBadge };
+import { Badge, Button, Card, Chip, Icon } from './atoms/index.js';
+import { IconButton } from './molecules/index.js';
+export { Button, Icon, Badge, IconButton, Card, Chip };

package/dist/molecules/ActionChip/ActionChip.svelte.d.ts

@@ -40,7 +40,7 @@ declare const ActionChip: $$__sveltets_2_IsomorphicComponent<{
     labelStyles?: string | undefined;
     labelClass?: string | undefined;
 }, {
-    click: MouseEvent;
+    click: any;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;

package/dist/molecules/IconButton/IconButton.svelte.d.ts

@@ -53,7 +53,7 @@ declare const IconButton: $$__sveltets_2_IsomorphicComponent<{
     btnCustomStyles?: string | undefined;
     iCustomStyles?: string | undefined;
 }, {
-    click: MouseEvent;
+    click: any;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;

package/dist/molecules/index.d.ts

@@ -1,4 +1,3 @@
 import IconButton from "./IconButton/IconButton.svelte";
-import CounterBadge from "./CounterBadge/CounterBadge.svelte";
-export { IconButton, CounterBadge };
+export { IconButton };
 //# sourceMappingURL=index.d.ts.map

package/dist/molecules/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/lib/molecules/index.ts"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,gCAAgC,CAAC;AAExD,OAAO,YAAY,MAAM,oCAAoC,CAAC;AAE9D,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/lib/molecules/index.ts"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,gCAAgC,CAAC;AAGxD,OAAO,EAAE,UAAU,EAAE,CAAC"}

package/dist/molecules/index.js

@@ -1,4 +1,3 @@
 import IconButton from "./IconButton/IconButton.svelte";
 // import ActionChip from "./ActionChip/ActionChip.svelte"; //agregar cuando se implemente en el figma del ds
-import CounterBadge from "./CounterBadge/CounterBadge.svelte";
-export { IconButton, CounterBadge };
+export { IconButton };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "do-ui-design-system",
-	"version": "1.0.11",
+	"version": "1.0.12",
 	"description": "Design system en Svelte + CSS + Storybook",
 	"author": "Data Observatory",
 	"license": "MIT",

package/dist/atoms/Counter/Counter.svelte

@@ -1,15 +0,0 @@
-<script lang="ts">
-	export let label: string = '10';
-</script>
-
-<!-- @component Counter
-  ```Svelte
-    <Counter label={label} />
-  	```
-	- `label?`: string - the text to display in the counter
-  - *If `label` is not provided, it defaults to '10'
--->
-
-<div class="do-counter do-counter-primary">
-	<span>{label}</span>
-</div>