From 6b625df82dafd871d1abaac3f8855f715e5d42ab Mon Sep 17 00:00:00 2001
From: Mohammad Taherian <mhmdtaherian@gmail.com>
Date: Thu, 22 Dec 2022 14:15:56 -0500
Subject: [PATCH 01/13] cleaned up Fieldset

---
 src/components/Fieldset/Fieldset.svelte       | 14 ++++++++
 src/components/Fieldset/Fieldset.types.ts     |  3 ++
 src/components/Fieldset/index.ts              |  2 ++
 src/components/Form/Form.types.ts             | 15 ++++++--
 src/components/Form/FormFieldset.svelte       | 36 +++++--------------
 src/components/index.ts                       |  1 +
 .../docs/components/fieldsets/+page.svelte    | 14 ++++++++
 .../fieldsets/FieldsetDefault.svelte          | 11 ++++++
 .../docs/form/form-fieldsets/+page.svelte     | 14 ++++++++
 .../form-fieldsets/FormFieldsetDefault.svelte | 11 ++++++
 src/routes/docs/index.ts                      | 10 ++++++
 src/scss/tabler/_variables.scss               |  1 +
 src/scss/tabler/components/_fieldset.scss     |  7 ++++
 src/scss/tabler/components/index.scss         |  1 +
 14 files changed, 111 insertions(+), 29 deletions(-)
 create mode 100644 src/components/Fieldset/Fieldset.svelte
 create mode 100644 src/components/Fieldset/Fieldset.types.ts
 create mode 100644 src/components/Fieldset/index.ts
 create mode 100644 src/routes/docs/components/fieldsets/+page.svelte
 create mode 100644 src/routes/docs/components/fieldsets/FieldsetDefault.svelte
 create mode 100644 src/routes/docs/form/form-fieldsets/+page.svelte
 create mode 100644 src/routes/docs/form/form-fieldsets/FormFieldsetDefault.svelte
 create mode 100644 src/scss/tabler/components/_fieldset.scss

diff --git a/src/components/Fieldset/Fieldset.svelte b/src/components/Fieldset/Fieldset.svelte
new file mode 100644
index 00000000..a58232c3
--- /dev/null
+++ b/src/components/Fieldset/Fieldset.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+	import { El, type FieldsetProps } from '$lib/components'
+
+	type $$Props = FieldsetProps
+
+	/**
+	 * Set Css Prefix for the Fieldset
+	 */
+	export let cssPrefix: $$Props['cssPrefix'] = 'fieldset'
+</script>
+
+<El {...$$restProps} {cssPrefix}>
+	<slot />
+</El>
diff --git a/src/components/Fieldset/Fieldset.types.ts b/src/components/Fieldset/Fieldset.types.ts
new file mode 100644
index 00000000..a0131962
--- /dev/null
+++ b/src/components/Fieldset/Fieldset.types.ts
@@ -0,0 +1,3 @@
+import type { ElProps } from '$lib/components'
+
+export interface FieldsetProps extends Partial<ElProps> {}
diff --git a/src/components/Fieldset/index.ts b/src/components/Fieldset/index.ts
new file mode 100644
index 00000000..aef1afe2
--- /dev/null
+++ b/src/components/Fieldset/index.ts
@@ -0,0 +1,2 @@
+export { default as Fieldset } from './Fieldset.svelte'
+export * from './Fieldset.types'
diff --git a/src/components/Form/Form.types.ts b/src/components/Form/Form.types.ts
index fd25015f..52dfd0bf 100644
--- a/src/components/Form/Form.types.ts
+++ b/src/components/Form/Form.types.ts
@@ -1,4 +1,13 @@
-import type { CheckboxGroupProps, CheckboxProps, ElProps, InputProps, InputStates, RadioGroupProps, SelectProps } from '$lib/components'
+import type {
+	CheckboxGroupProps,
+	CheckboxProps,
+	ElProps,
+	FieldsetProps,
+	InputProps,
+	InputStates,
+	RadioGroupProps,
+	SelectProps,
+} from '$lib/components'
 
 export interface FormFieldProps extends Partial<ElProps> {
 	label?: string
@@ -18,4 +27,6 @@ export interface FormTextAreaProps extends Partial<FormInputProps> {
 
 export interface FormRadioGroupProps extends Partial<FormFieldProps>, Partial<RadioGroupProps> {}
 
-export interface FormSelectProps extends Partial<FormFieldProps>, Partial<SelectProps> {}
\ No newline at end of file
+export interface FormSelectProps extends Partial<FormFieldProps>, Partial<SelectProps> {}
+
+export interface FormFieldsetProps extends Partial<FormFieldProps>, Partial<FieldsetProps> {}
diff --git a/src/components/Form/FormFieldset.svelte b/src/components/Form/FormFieldset.svelte
index 9948dd49..efc2f3e0 100644
--- a/src/components/Form/FormFieldset.svelte
+++ b/src/components/Form/FormFieldset.svelte
@@ -1,32 +1,14 @@
 <script lang="ts">
-	import { get_current_component } from 'svelte/internal'
+	import { Fieldset, FormField, type FormFieldsetProps } from '$lib/components'
 
-	import { nanoid } from 'nanoid'
-
-	import { Label } from '$lib/components'
-	import { forwardEventsBuilder } from '$lib/directives'
-	import { classname } from '$lib/utils'
-
-	/**
-	 * Set id for HTML element
-	 */
-	export let id: string = nanoid(10)
-
-	/**
-	 * Set label for filedset
-	 */
-	export let label: string | undefined = undefined
-
-	const forwardEvents = forwardEventsBuilder(get_current_component())
-
-	$: classes = classname('form-fieldset', undefined, $$props.class)
+	type $$Props = FormFieldsetProps
+	export let cssPrefix: $$Props['cssPrefix'] = 'form-fieldset'
 </script>
 
-<div use:forwardEvents {...$$restProps} class={classes}>
-	{#if label}
-		<Label for={id}>{label}</Label>
-	{/if}
-	<fieldset>
+<FormField {...$$restProps} {cssPrefix}>
+	<slot name="label" />
+	<Fieldset>
 		<slot />
-	</fieldset>
-</div>
+	</Fieldset>
+	<slot name="hint" />
+</FormField>
diff --git a/src/components/index.ts b/src/components/index.ts
index 3ecae90b..3b088e5f 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -16,6 +16,7 @@ export * from './Dialog'
 export * from './Divider'
 export * from './Doc'
 export * from './Dot'
+export * from './Fieldset'
 export * from './FileUploader'
 export * from './Form'
 export * from './Footer'
diff --git a/src/routes/docs/components/fieldsets/+page.svelte b/src/routes/docs/components/fieldsets/+page.svelte
new file mode 100644
index 00000000..24ad2d33
--- /dev/null
+++ b/src/routes/docs/components/fieldsets/+page.svelte
@@ -0,0 +1,14 @@
+<script>
+	import { Doc, Preview } from '$lib/components'
+	import FieldsetDefault from './FieldsetDefault.svelte'
+</script>
+
+<h1>Fieldset</h1>
+<p>
+	Group parts of your form to make it well-structured and clearer for users, using the <code>fieldset</code> element.
+</p>
+
+<Doc title="Defaults" />
+<Preview src="./FieldsetDefault.svelte">
+	<FieldsetDefault />
+</Preview>
diff --git a/src/routes/docs/components/fieldsets/FieldsetDefault.svelte b/src/routes/docs/components/fieldsets/FieldsetDefault.svelte
new file mode 100644
index 00000000..ff1dc3cf
--- /dev/null
+++ b/src/routes/docs/components/fieldsets/FieldsetDefault.svelte
@@ -0,0 +1,11 @@
+<script>
+	import { Fieldset, Input, Checkbox } from '@ubeac/svelte'
+</script>
+
+<Fieldset>
+	<Input placeholder="Full name" mb="2" />
+	<Input placeholder="Company" mb="2" />
+	<Input placeholder="Email" mb="2" />
+	<Input placeholder="Phone number" mb="2" />
+	<Checkbox mb="2">I agree to the terms and conditions</Checkbox>
+</Fieldset>
diff --git a/src/routes/docs/form/form-fieldsets/+page.svelte b/src/routes/docs/form/form-fieldsets/+page.svelte
new file mode 100644
index 00000000..ed6c4759
--- /dev/null
+++ b/src/routes/docs/form/form-fieldsets/+page.svelte
@@ -0,0 +1,14 @@
+<script>
+	import { Doc, Preview } from '$lib/components'
+	import FormFieldsetDefault from './FormFieldsetDefault.svelte'
+</script>
+
+<h1>Form Fieldset</h1>
+<p>
+	Group parts of your form to make it well-structured and clearer for users, using the <code>fieldset</code> element.
+</p>
+
+<Doc title="Defaults" />
+<Preview src="./FormFieldsetDefault.svelte">
+	<FormFieldsetDefault />
+</Preview>
diff --git a/src/routes/docs/form/form-fieldsets/FormFieldsetDefault.svelte b/src/routes/docs/form/form-fieldsets/FormFieldsetDefault.svelte
new file mode 100644
index 00000000..0bedf9dd
--- /dev/null
+++ b/src/routes/docs/form/form-fieldsets/FormFieldsetDefault.svelte
@@ -0,0 +1,11 @@
+<script>
+	import { FormFieldset, FormInput, FormCheckbox } from '@ubeac/svelte'
+</script>
+
+<FormFieldset label="Contact Information">
+	<FormInput placeholder="Full name" mb="2" />
+	<FormInput placeholder="Company" mb="2" />
+	<FormInput placeholder="Email" mb="2" />
+	<FormInput placeholder="Phone number" mb="2" />
+	<FormCheckbox mb="2">I agree to the terms and conditions</FormCheckbox>
+</FormFieldset>
diff --git a/src/routes/docs/index.ts b/src/routes/docs/index.ts
index c997414b..6c7ddba9 100644
--- a/src/routes/docs/index.ts
+++ b/src/routes/docs/index.ts
@@ -105,6 +105,11 @@ export const navigations = [
 				title: 'El',
 				icon: 'star',
 			},
+			{
+				route: base_component_path + 'fieldsets',
+				title: 'Fieldset',
+				icon: 'star',
+			},
 			{
 				route: base_component_path + 'file-uploader',
 				title: 'FileUploader',
@@ -267,6 +272,11 @@ export const navigations = [
 				title: 'FormDatePicker',
 				icon: 'star',
 			},
+			{
+				route: base_form_path + 'form-fieldsets',
+				title: 'FormFieldset',
+				icon: 'star',
+			},
 			{
 				route: base_form_path + 'form-input',
 				title: 'Form Input',
diff --git a/src/scss/tabler/_variables.scss b/src/scss/tabler/_variables.scss
index 6d236b74..d5cc9f7c 100644
--- a/src/scss/tabler/_variables.scss
+++ b/src/scss/tabler/_variables.scss
@@ -20,6 +20,7 @@ $prefix-divider: $prefix + 'divider' !default;
 $prefix-dialog: $prefix + 'dialog' !default;
 $prefix-dialog-container: $prefix + 'dialog-container' !default;
 $prefix-dot: $prefix + 'dot' !default;
+$prefix-fieldset: $prefix + 'fieldset' !default;
 $prefix-footer: $prefix + 'footer' !default;
 $prefix-icon: $prefix + 'icon' !default;
 $prefix-input: $prefix + 'input' !default;
diff --git a/src/scss/tabler/components/_fieldset.scss b/src/scss/tabler/components/_fieldset.scss
new file mode 100644
index 00000000..d20f5f85
--- /dev/null
+++ b/src/scss/tabler/components/_fieldset.scss
@@ -0,0 +1,7 @@
+//
+// Fieldset
+//
+
+.#{$prefix-fieldset} {
+    @extend .form-fieldset;
+}
\ No newline at end of file
diff --git a/src/scss/tabler/components/index.scss b/src/scss/tabler/components/index.scss
index a44f6290..aad75b96 100644
--- a/src/scss/tabler/components/index.scss
+++ b/src/scss/tabler/components/index.scss
@@ -16,6 +16,7 @@
 @import './dialog';
 @import './divider';
 @import './dot';
+@import './fieldset';
 @import './form';
 @import './footer';
 @import './google-map';

From 9d4bc1f0dfdfc5bd0a8937c1fd25f72fab489321 Mon Sep 17 00:00:00 2001
From: Amir Pournasserian <amir.pournasserian@live.com>
Date: Thu, 22 Dec 2022 17:13:42 -0500
Subject: [PATCH 02/13] #702 #703 documentation for Color & Typography

---
 src/app.d.ts                                  |  7 +-
 src/components/Base/El.types.ts               |  3 -
 src/components/Divider/Divider.svelte         |  3 +-
 src/routes/+layout.svelte                     | 15 ----
 src/routes/docs/+layout.svelte                |  8 +++
 src/routes/docs/components/alert/+page.svelte |  2 +-
 .../docs/components/alert/AlertColor.svelte   | 10 +--
 .../components/alert/AlertDismissible.svelte  | 10 +--
 .../docs/components/alert/AlertIcon.svelte    | 10 +--
 .../docs/components/alert/AlertLink.svelte    | 16 +++--
 .../docs/components/alert/AlertShow.svelte    | 16 ++---
 .../docs/{components/el => core}/+page.svelte |  0
 .../el => core}/BackgroundColor.svelte        |  0
 .../el => core}/BackgroundGradient.svelte     |  0
 .../el => core}/BackgroundOpacity.svelte      |  0
 .../el => core}/BorderAdditive.svelte         |  0
 .../el => core}/BorderColor.svelte            |  0
 .../el => core}/BorderRadius.svelte           |  0
 .../el => core}/BorderRadiusSize.svelte       |  0
 .../el => core}/BorderSubtractive.svelte      |  0
 .../el => core}/BorderWidth.svelte            |  0
 .../docs/core/contents/colors/+page.svelte    | 37 ++++++++++
 .../core/contents/colors/ColorsBrand.svelte   | 19 ++++++
 .../core/contents/colors/ColorsNamed.svelte   | 29 ++++++++
 .../core/contents/colors/ColorsTheme.svelte   | 12 ++++
 .../core/contents/typography/+page.svelte     | 68 +++++++++++++++++++
 .../typography/TypographyDivider.svelte       | 23 +++++++
 .../typography/TypographyHeadings.svelte      | 10 +++
 .../typography/TypographyParagraph.svelte     | 10 +++
 .../typography/TypographySemantic.svelte      | 21 ++++++
 .../typography/TypographyTextTransform.svelte |  7 ++
 src/routes/docs/index.ts                      | 22 ++++--
 src/scss/tabler/components/el.scss            | 39 ++++-------
 33 files changed, 308 insertions(+), 89 deletions(-)
 rename src/routes/docs/{components/el => core}/+page.svelte (100%)
 rename src/routes/docs/{components/el => core}/BackgroundColor.svelte (100%)
 rename src/routes/docs/{components/el => core}/BackgroundGradient.svelte (100%)
 rename src/routes/docs/{components/el => core}/BackgroundOpacity.svelte (100%)
 rename src/routes/docs/{components/el => core}/BorderAdditive.svelte (100%)
 rename src/routes/docs/{components/el => core}/BorderColor.svelte (100%)
 rename src/routes/docs/{components/el => core}/BorderRadius.svelte (100%)
 rename src/routes/docs/{components/el => core}/BorderRadiusSize.svelte (100%)
 rename src/routes/docs/{components/el => core}/BorderSubtractive.svelte (100%)
 rename src/routes/docs/{components/el => core}/BorderWidth.svelte (100%)
 create mode 100644 src/routes/docs/core/contents/colors/+page.svelte
 create mode 100644 src/routes/docs/core/contents/colors/ColorsBrand.svelte
 create mode 100644 src/routes/docs/core/contents/colors/ColorsNamed.svelte
 create mode 100644 src/routes/docs/core/contents/colors/ColorsTheme.svelte
 create mode 100644 src/routes/docs/core/contents/typography/+page.svelte
 create mode 100644 src/routes/docs/core/contents/typography/TypographyDivider.svelte
 create mode 100644 src/routes/docs/core/contents/typography/TypographyHeadings.svelte
 create mode 100644 src/routes/docs/core/contents/typography/TypographyParagraph.svelte
 create mode 100644 src/routes/docs/core/contents/typography/TypographySemantic.svelte
 create mode 100644 src/routes/docs/core/contents/typography/TypographyTextTransform.svelte

diff --git a/src/app.d.ts b/src/app.d.ts
index 7f184808..0d4e2c9e 100644
--- a/src/app.d.ts
+++ b/src/app.d.ts
@@ -41,9 +41,6 @@ declare type NamedColors =
 	| 'green'
 	| 'teal'
 	| 'cyan'
-	| 'black'
-	| 'white'
-	| 'transparent'
 	| undefined
 
 declare type SocialMediaColors =
@@ -60,13 +57,15 @@ declare type SocialMediaColors =
 	| 'rss'
 	| 'flickr'
 	| 'bitbucket'
+	| 'linkedin'
+	| 'tabler'
 	| undefined
 
 declare type Colors = ThemeColors | NamedColors | SocialMediaColors
 
 declare type TextColors = Colors
 
-declare type BackgroundColors = ThemeColors | NamedColors | 'body'
+declare type BackgroundColors = ThemeColors | NamedColors | SocialMediaColors | 'body'
 
 declare type Opacities = '10' | '25' | '50' | '75' | undefined
 declare type TextOpacities = '25' | '50' | '75' | undefined
diff --git a/src/components/Base/El.types.ts b/src/components/Base/El.types.ts
index 3f25423f..df433874 100644
--- a/src/components/Base/El.types.ts
+++ b/src/components/Base/El.types.ts
@@ -183,9 +183,6 @@ export const NAMED_COLOR_TYPES: NamedColors[] = [
 	'green',
 	'teal',
 	'cyan',
-	'black',
-	'white',
-	'transparent',
 ]
 
 export const BACKGROUND_COLOR_TYPES: BackgroundColors[] = [...THEME_COLOR_TYPES, ...NAMED_COLOR_TYPES, 'body']
diff --git a/src/components/Divider/Divider.svelte b/src/components/Divider/Divider.svelte
index 8181b7ca..763c9bff 100644
--- a/src/components/Divider/Divider.svelte
+++ b/src/components/Divider/Divider.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
-	import { El } from '$lib/components'
-	import type { DividerProps } from '$lib/components'
+	import { type DividerProps, El } from '$lib/components'
 
 	type $$Props = DividerProps
 
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 6b00e83c..a53b22d7 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -637,18 +637,3 @@
 		</El>
 	</AppFooter>
 </App>
-
-<style global>
-	.u-preview-body > * {
-		margin: 0 0.2rem 0.8rem 0.2rem;
-		vertical-align: top;
-	}
-
-	.u-card-body > h2 {
-		margin-top: 1.75rem !important;
-	}
-	.u-preview-body > :last-child {
-		margin: 0 0.2rem 0 0.2rem !important;
-		vertical-align: top !important;
-	}
-</style>
diff --git a/src/routes/docs/+layout.svelte b/src/routes/docs/+layout.svelte
index 2ecaeb08..3957deb8 100644
--- a/src/routes/docs/+layout.svelte
+++ b/src/routes/docs/+layout.svelte
@@ -71,4 +71,12 @@
 		margin: 0 0.2rem 0 0.2rem !important;
 		vertical-align: top !important;
 	}
+
+	.u-card-body > h2 {
+		margin-top: 1.75rem !important;
+	}
+	.u-preview-body > :last-child {
+		margin: 0 0.2rem 0 0.2rem !important;
+		vertical-align: top !important;
+	}
 </style>
diff --git a/src/routes/docs/components/alert/+page.svelte b/src/routes/docs/components/alert/+page.svelte
index 370d492e..1edd9798 100644
--- a/src/routes/docs/components/alert/+page.svelte
+++ b/src/routes/docs/components/alert/+page.svelte
@@ -68,7 +68,7 @@
 	<AlertImportant />
 </Preview>
 
-<Doc title="Alret Show/Hide">If you want show or hide your alert you can do it with if property.</Doc>
+<Doc title="Alert Show/Hide">If you want show or hide your alert you can do it with if property.</Doc>
 <Preview src="./AlertShow.svelte">
 	<AlertShow />
 </Preview>
diff --git a/src/routes/docs/components/alert/AlertColor.svelte b/src/routes/docs/components/alert/AlertColor.svelte
index 90e9c005..b65704a2 100644
--- a/src/routes/docs/components/alert/AlertColor.svelte
+++ b/src/routes/docs/components/alert/AlertColor.svelte
@@ -1,16 +1,16 @@
 <script lang="ts">
-	import { Alert, COLORS } from '@ubeac/svelte'
+	import { Alert, El } from '@ubeac/svelte'
 </script>
 
 <Alert title="Wow! Everything worked!" color="success">
-	<div class="text-muted">Your account has been saved!</div>
+	<El textMuted>Your account has been saved!</El>
 </Alert>
 <Alert title="Wow! Everything worked!" color="info">
-	<div class="text-muted">Here is something that you might like to know.</div>
+	<El textMuted>Here is something that you might like to know.</El>
 </Alert>
 <Alert title="Wow! Everything worked!" color="warning">
-	<div class="text-muted">Sorry! There was a problem with your request.</div>
+	<El textMuted>Sorry! There was a problem with your request.</El>
 </Alert>
 <Alert title="I'm so sorry…" color="danger">
-	<div class="text-muted">Your account has been deleted and can't be restored.</div>
+	<El textMuted>Your account has been deleted and can't be restored.</El>
 </Alert>
diff --git a/src/routes/docs/components/alert/AlertDismissible.svelte b/src/routes/docs/components/alert/AlertDismissible.svelte
index 01f0e5cb..b57ec9f6 100644
--- a/src/routes/docs/components/alert/AlertDismissible.svelte
+++ b/src/routes/docs/components/alert/AlertDismissible.svelte
@@ -1,16 +1,16 @@
 <script lang="ts">
-	import { Alert, COLORS } from '@ubeac/svelte'
+	import { Alert, El } from '@ubeac/svelte'
 </script>
 
 <Alert dismissible title="Wow! Everything worked!" color="success">
-	<div class="text-muted">Your account has been saved!</div>
+	<El textMuted>Your account has been saved!</El>
 </Alert>
 <Alert dismissible title="Wow! Everything worked!" color="info">
-	<div class="text-muted">Here is something that you might like to know.</div>
+	<El textMuted>Here is something that you might like to know.</El>
 </Alert>
 <Alert dismissible title="Wow! Everything worked!" color="warning">
-	<div class="text-muted">Sorry! There was a problem with your request.</div>
+	<El textMuted>Sorry! There was a problem with your request.</El>
 </Alert>
 <Alert dismissible title="I'm so sorry…" color="danger">
-	<div class="text-muted">Your account has been deleted and can't be restored.</div>
+	<El textMuted>Your account has been deleted and can't be restored.</El>
 </Alert>
diff --git a/src/routes/docs/components/alert/AlertIcon.svelte b/src/routes/docs/components/alert/AlertIcon.svelte
index d716d9bb..f78a2858 100644
--- a/src/routes/docs/components/alert/AlertIcon.svelte
+++ b/src/routes/docs/components/alert/AlertIcon.svelte
@@ -1,16 +1,16 @@
 <script lang="ts">
-	import { Alert } from '@ubeac/svelte'
+	import { Alert, El } from '@ubeac/svelte'
 </script>
 
 <Alert title="Wow! Everything worked!" color="success" icon="check">
-	<div class="text-muted">Your account has been saved!</div>
+	<El textMuted>Your account has been saved!</El>
 </Alert>
 <Alert title="Wow! Everything worked!" color="info" icon="info-circle">
-	<div class="text-muted">Here is something that you might like to know.</div>
+	<El textMuted>Here is something that you might like to know.</El>
 </Alert>
 <Alert title="Wow! Everything worked!" color="warning" icon="alert-triangle">
-	<div class="text-muted">Sorry! There was a problem with your request.</div>
+	<El textMuted>Sorry! There was a problem with your request.</El>
 </Alert>
 <Alert title="I'm so sorry…" color="danger" icon="alert-circle">
-	<div class="text-muted">Your account has been deleted and can't be restored.</div>
+	<El textMuted>Your account has been deleted and can't be restored.</El>
 </Alert>
diff --git a/src/routes/docs/components/alert/AlertLink.svelte b/src/routes/docs/components/alert/AlertLink.svelte
index a097238c..e6675a13 100644
--- a/src/routes/docs/components/alert/AlertLink.svelte
+++ b/src/routes/docs/components/alert/AlertLink.svelte
@@ -1,20 +1,22 @@
 <script lang="ts">
-	import { Alert } from '@ubeac/svelte'
+	import { Alert, El } from '@ubeac/svelte'
 </script>
 
 <Alert title="Wow! Everything worked!" color="success">
 	This is a info alert — <a class="alert-link" href="/"> check it out!</a>
 </Alert>
 <Alert title="Wow! Everything worked!" color="info">
-	<svelte:fragment slot="title"
-		>This is a info alert — <a class="alert-link" href="/"> check it out!</a></svelte:fragment>
-	<div class="text-muted">Here is something that you might like to know.</div>
+	<svelte:fragment slot="title">
+		This is a info alert — <a class="alert-link" href="/"> check it out!</a>
+	</svelte:fragment>
+	<El textMuted>Here is something that you might like to know.</El>
 </Alert>
 <Alert title="Wow! Everything worked!" color="warning">
 	This is a info alert — <a class="alert-link" href="/"> check it out!</a>
 </Alert>
 <Alert title="I'm so sorry…" color="danger">
-	<svelte:fragment slot="title"
-		>This is a info alert — <a class="alert-link" href="/"> check it out!</a></svelte:fragment>
-	<div class="text-muted">Your account has been deleted and can't be restored.</div>
+	<svelte:fragment slot="title">
+		This is a info alert — <a class="alert-link" href="/"> check it out!</a>
+	</svelte:fragment>
+	<El textMuted>Your account has been deleted and can't be restored.</El>
 </Alert>
diff --git a/src/routes/docs/components/alert/AlertShow.svelte b/src/routes/docs/components/alert/AlertShow.svelte
index 772e7681..a10987fc 100644
--- a/src/routes/docs/components/alert/AlertShow.svelte
+++ b/src/routes/docs/components/alert/AlertShow.svelte
@@ -7,15 +7,7 @@
 	let value = false
 </script>
 
-<El row>
-	<El col mb="4">
-		<Alert dismissible bind:value title="Wow! Everything worked!" color="success">
-			<div class="text-muted">Your account has been saved!</div>
-		</Alert>
-	</El>
-</El>
-<El row>
-	<El col>
-		<Button on:click={toggle}>Toggle</Button>
-	</El>
-</El>
+<Alert dismissible bind:value title="Wow! Everything worked!" color="success">
+	<El textMuted>Your account has been saved!</El>
+</Alert>
+<Button on:click={toggle}>Toggle Alert</Button>
diff --git a/src/routes/docs/components/el/+page.svelte b/src/routes/docs/core/+page.svelte
similarity index 100%
rename from src/routes/docs/components/el/+page.svelte
rename to src/routes/docs/core/+page.svelte
diff --git a/src/routes/docs/components/el/BackgroundColor.svelte b/src/routes/docs/core/BackgroundColor.svelte
similarity index 100%
rename from src/routes/docs/components/el/BackgroundColor.svelte
rename to src/routes/docs/core/BackgroundColor.svelte
diff --git a/src/routes/docs/components/el/BackgroundGradient.svelte b/src/routes/docs/core/BackgroundGradient.svelte
similarity index 100%
rename from src/routes/docs/components/el/BackgroundGradient.svelte
rename to src/routes/docs/core/BackgroundGradient.svelte
diff --git a/src/routes/docs/components/el/BackgroundOpacity.svelte b/src/routes/docs/core/BackgroundOpacity.svelte
similarity index 100%
rename from src/routes/docs/components/el/BackgroundOpacity.svelte
rename to src/routes/docs/core/BackgroundOpacity.svelte
diff --git a/src/routes/docs/components/el/BorderAdditive.svelte b/src/routes/docs/core/BorderAdditive.svelte
similarity index 100%
rename from src/routes/docs/components/el/BorderAdditive.svelte
rename to src/routes/docs/core/BorderAdditive.svelte
diff --git a/src/routes/docs/components/el/BorderColor.svelte b/src/routes/docs/core/BorderColor.svelte
similarity index 100%
rename from src/routes/docs/components/el/BorderColor.svelte
rename to src/routes/docs/core/BorderColor.svelte
diff --git a/src/routes/docs/components/el/BorderRadius.svelte b/src/routes/docs/core/BorderRadius.svelte
similarity index 100%
rename from src/routes/docs/components/el/BorderRadius.svelte
rename to src/routes/docs/core/BorderRadius.svelte
diff --git a/src/routes/docs/components/el/BorderRadiusSize.svelte b/src/routes/docs/core/BorderRadiusSize.svelte
similarity index 100%
rename from src/routes/docs/components/el/BorderRadiusSize.svelte
rename to src/routes/docs/core/BorderRadiusSize.svelte
diff --git a/src/routes/docs/components/el/BorderSubtractive.svelte b/src/routes/docs/core/BorderSubtractive.svelte
similarity index 100%
rename from src/routes/docs/components/el/BorderSubtractive.svelte
rename to src/routes/docs/core/BorderSubtractive.svelte
diff --git a/src/routes/docs/components/el/BorderWidth.svelte b/src/routes/docs/core/BorderWidth.svelte
similarity index 100%
rename from src/routes/docs/components/el/BorderWidth.svelte
rename to src/routes/docs/core/BorderWidth.svelte
diff --git a/src/routes/docs/core/contents/colors/+page.svelte b/src/routes/docs/core/contents/colors/+page.svelte
new file mode 100644
index 00000000..b6e103ab
--- /dev/null
+++ b/src/routes/docs/core/contents/colors/+page.svelte
@@ -0,0 +1,37 @@
+<script lang="ts">
+	import { Doc, Preview } from '@ubeac/svelte'
+
+	import ColorsBrand from './ColorsBrand.svelte'
+	import ColorsNamed from './ColorsNamed.svelte'
+	import ColorsTheme from './ColorsTheme.svelte'
+</script>
+
+<h1>Colors</h1>
+
+<Doc title="Theme colors" />
+<Preview src="./ColorsTheme.svelte">
+	<div class="custom-class text-light">
+		<ColorsTheme />
+	</div>
+</Preview>
+
+<Doc title="Named colors" />
+<Preview src="./ColorsNamed.svelte">
+	<div class="custom-class text-light">
+		<ColorsNamed />
+	</div>
+</Preview>
+
+<Doc title="Brancd colors" />
+<Preview src="./ColorsBrand.svelte">
+	<div class="custom-class text-light">
+		<ColorsBrand />
+	</div>
+</Preview>
+
+<style>
+	.custom-class :global(*) {
+		padding: 1rem;
+		margin: 1rem;
+	}
+</style>
diff --git a/src/routes/docs/core/contents/colors/ColorsBrand.svelte b/src/routes/docs/core/contents/colors/ColorsBrand.svelte
new file mode 100644
index 00000000..316dd2c7
--- /dev/null
+++ b/src/routes/docs/core/contents/colors/ColorsBrand.svelte
@@ -0,0 +1,19 @@
+<script>
+	import { El } from '@ubeac/svelte'
+</script>
+
+<El bgColor="facebook">facebook</El>
+<El bgColor="twitter">twitter</El>
+<El bgColor="google">google</El>
+<El bgColor="youtube">youtube</El>
+<El bgColor="vimeo">vimeo</El>
+<El bgColor="linkedin">linkedin</El>
+<El bgColor="dribbble">dribbble</El>
+<El bgColor="github">github</El>
+<El bgColor="instagram">instagram</El>
+<El bgColor="pinterest">pinterest</El>
+<El bgColor="vk">vk</El>
+<El bgColor="rss">rss</El>
+<El bgColor="flickr">flickr</El>
+<El bgColor="bitbucket">bitbucket</El>
+<El bgColor="tabler">tabler</El>
diff --git a/src/routes/docs/core/contents/colors/ColorsNamed.svelte b/src/routes/docs/core/contents/colors/ColorsNamed.svelte
new file mode 100644
index 00000000..d3c59d72
--- /dev/null
+++ b/src/routes/docs/core/contents/colors/ColorsNamed.svelte
@@ -0,0 +1,29 @@
+<script>
+	import { El } from '@ubeac/svelte'
+</script>
+
+<El bgColor="blue">Blue</El>
+<El bgColor="azure">Azure</El>
+<El bgColor="indigo">Indigo</El>
+<El bgColor="purple">Purple</El>
+<El bgColor="pink">Pink</El>
+<El bgColor="red">Red</El>
+<El bgColor="orange">Orange</El>
+<El bgColor="yellow">Yellow</El>
+<El bgColor="lime">Lime</El>
+<El bgColor="green">Green</El>
+<El bgColor="teal">Teal</El>
+<El bgColor="cyan">Cyan</El>
+
+<El bgColor="blue-lt">Blue</El>
+<El bgColor="azure-lt">Azure</El>
+<El bgColor="indigo-lt">Indigo</El>
+<El bgColor="purple-lt">Purple</El>
+<El bgColor="pink-lt">Pink</El>
+<El bgColor="red-lt">Red</El>
+<El bgColor="orange-lt">Orange</El>
+<El bgColor="yellow-lt">Yellow</El>
+<El bgColor="lime-lt">Lime</El>
+<El bgColor="green-lt">Green</El>
+<El bgColor="teal-lt">Teal</El>
+<El bgColor="cyan-lt">Cyan</El>
diff --git a/src/routes/docs/core/contents/colors/ColorsTheme.svelte b/src/routes/docs/core/contents/colors/ColorsTheme.svelte
new file mode 100644
index 00000000..708aa2f3
--- /dev/null
+++ b/src/routes/docs/core/contents/colors/ColorsTheme.svelte
@@ -0,0 +1,12 @@
+<script>
+	import { El } from '@ubeac/svelte'
+</script>
+
+<El bgColor="primary">Primary</El>
+<El bgColor="secondary">Secondary</El>
+<El bgColor="success">Success</El>
+<El bgColor="warning">Warning</El>
+<El bgColor="danger">Danger</El>
+<El bgColor="info">Info</El>
+<El bgColor="light" textColor="dark">Light</El>
+<El bgColor="dark">Dark</El>
diff --git a/src/routes/docs/core/contents/typography/+page.svelte b/src/routes/docs/core/contents/typography/+page.svelte
new file mode 100644
index 00000000..623cc9ff
--- /dev/null
+++ b/src/routes/docs/core/contents/typography/+page.svelte
@@ -0,0 +1,68 @@
+<script lang="ts">
+	import { Doc, Preview } from '@ubeac/svelte'
+
+	import TypographyDivider from './TypographyDivider.svelte'
+	import TypographyHeadings from './TypographyHeadings.svelte'
+	import TypographyParagraph from './TypographyParagraph.svelte'
+	import TypographySemantic from './TypographySemantic.svelte'
+	import TypographyTextTransform from './TypographyTextTransform.svelte'
+</script>
+
+<h1>Typography</h1>
+<p>
+	<code>El</code> component has a <code>tag</code> string property. This property can be used to create any HTML
+	element. For example, to create a <code>h1</code> element, you can use the following code:
+</p>
+
+<Doc title="Headings">
+	<code>El</code> component can be used to create headings. Headings are used to create a hierarchy of information on a page.
+	They are used to create a visual hierarchy of information on a page.
+</Doc>
+<Preview src="./TypographyHeadings.svelte">
+	<TypographyHeadings />
+</Preview>
+
+<Doc title="Paragraphs">
+	Organize longer pieces of text into paragraphs using <code>El</code> component by setting <code>tag="p"</code>.
+</Doc>
+<Preview src="./TypographyParagraph.svelte">
+	<TypographyParagraph />
+</Preview>
+
+<Doc title="Semantic text elements">
+	Use a variety of semantic text elements, depending of how you want to display particular fragments of content.
+	<code>El</code> component can be used to create semantic text elements. For example, to create a <code>strong</code>
+	element, you can use the following code:
+	<code>
+		{`<El tag="strong">This text is important</El>`}
+	</code>
+</Doc>
+<Preview src="./TypographySemantic.svelte">
+	<div class="custom-class">
+		<TypographySemantic />
+	</div>
+</Preview>
+
+<Doc title="Horizontal Rules">
+	We have a <code>Divider</code> component to create horizontal rules. The default <code>slot</code> can be used to
+	create a label for the divider. For more information, see <a href="/docs/components/dividers">Divider</a> component.
+</Doc>
+<Preview src="./TypographyDivider.svelte">
+	<TypographyDivider />
+</Preview>
+
+<Doc title="Text transform">
+	<code>El</code> component has a <code>textTransform</code> property. This property can be used to transform text into
+	<code>uppercase</code>,
+	<code>lowercase</code>, or <code>capitalize</code>.
+</Doc>
+<Preview src="./TypographyTextTransform.svelte">
+	<TypographyTextTransform />
+</Preview>
+
+<style>
+	.custom-class :global(*) {
+		display: table;
+		margin: 0.5rem;
+	}
+</style>
diff --git a/src/routes/docs/core/contents/typography/TypographyDivider.svelte b/src/routes/docs/core/contents/typography/TypographyDivider.svelte
new file mode 100644
index 00000000..d004e455
--- /dev/null
+++ b/src/routes/docs/core/contents/typography/TypographyDivider.svelte
@@ -0,0 +1,23 @@
+<script>
+	import { Divider, El } from '@ubeac/svelte'
+</script>
+
+<El tag="p">
+	Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
+	magna aliquyam erat, sed diam voluptua.
+</El>
+<El tag="hr" />
+<El tag="p">
+	At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
+	ipsum dolor sit amet.
+</El>
+<Divider>Rule text</Divider>
+<El tag="p">
+	Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
+	magna aliquyam erat, sed diam voluptua.
+</El>
+<Divider color="warning">Rule text</Divider>
+<El tag="p">
+	At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
+	ipsum dolor sit amet.
+</El>
diff --git a/src/routes/docs/core/contents/typography/TypographyHeadings.svelte b/src/routes/docs/core/contents/typography/TypographyHeadings.svelte
new file mode 100644
index 00000000..46ee78da
--- /dev/null
+++ b/src/routes/docs/core/contents/typography/TypographyHeadings.svelte
@@ -0,0 +1,10 @@
+<script>
+	import { El } from '@ubeac/svelte'
+</script>
+
+<El tag="h1">H1 Heading</El>
+<El tag="h2">H2 Heading</El>
+<El tag="h3">H3 Heading</El>
+<El tag="h4">H4 Heading</El>
+<El tag="h5">H5 Heading</El>
+<El tag="h6">H6 Heading</El>
diff --git a/src/routes/docs/core/contents/typography/TypographyParagraph.svelte b/src/routes/docs/core/contents/typography/TypographyParagraph.svelte
new file mode 100644
index 00000000..0934182d
--- /dev/null
+++ b/src/routes/docs/core/contents/typography/TypographyParagraph.svelte
@@ -0,0 +1,10 @@
+<script>
+	import { El } from '@ubeac/svelte'
+</script>
+
+<El tag="p">
+	Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
+	magna aliquyam erat, sed diam voluptua.
+</El>
+
+<El tag="p">At vero eos et accusam et justo duo dolores et ea rebum.</El>
diff --git a/src/routes/docs/core/contents/typography/TypographySemantic.svelte b/src/routes/docs/core/contents/typography/TypographySemantic.svelte
new file mode 100644
index 00000000..0217c271
--- /dev/null
+++ b/src/routes/docs/core/contents/typography/TypographySemantic.svelte
@@ -0,0 +1,21 @@
+<script>
+	import { El } from '@ubeac/svelte'
+</script>
+
+<El tag="abbr" title="Internationalization">I18N</El>
+<El tag="strong">Bold</El>
+<El tag="cite">Citation</El>
+<El tag="code">Hello World!</El>
+<El tag="del">Deleted</El>
+<El tag="em">Emphasis</El>
+<El tag="i">Italic</El>
+<El tag="ins">Inserted</El>
+<El tag="kbd">Ctrl + S</El>
+<El tag="mark">Highlighted</El>
+<El tag="s">Strikethrough</El>
+<El tag="samp">Sample</El>
+<El>Text <El tag="sub">Subscripted</El></El>
+<El>Text <El tag="sup">Superscripted</El></El>
+<El tag="time">20:00</El>
+<El tag="u">Underline</El>
+<El><El tag="var">x</El> = <El tag="var">y</El> + 2</El>
diff --git a/src/routes/docs/core/contents/typography/TypographyTextTransform.svelte b/src/routes/docs/core/contents/typography/TypographyTextTransform.svelte
new file mode 100644
index 00000000..1edfd457
--- /dev/null
+++ b/src/routes/docs/core/contents/typography/TypographyTextTransform.svelte
@@ -0,0 +1,7 @@
+<script>
+	import { El } from '@ubeac/svelte'
+</script>
+
+<El tag="p" textTransform="lowercase">Lowercased text.</El>
+<El tag="p" textTransform="uppercase">Uppercased text.</El>
+<El tag="p" textTransform="capitalize">Capitalized text.</El>
diff --git a/src/routes/docs/index.ts b/src/routes/docs/index.ts
index c997414b..8ddc1c16 100644
--- a/src/routes/docs/index.ts
+++ b/src/routes/docs/index.ts
@@ -1,5 +1,6 @@
 export const base_path: string = '/docs/'
 export const base_component_path: string = base_path + 'components/'
+export const base_core_path: string = base_path + 'core/'
 export const base_common_path: string = base_path + 'common/'
 export const base_form_path: string = base_path + 'form/'
 
@@ -16,6 +17,22 @@ export const navigations = [
 			},
 		],
 	},
+	{
+		title: 'Core Features',
+		id: 'core-features',
+		children: [
+			{
+				route: base_core_path + 'contents/typography',
+				title: 'Typography',
+				icon: 'icons',
+			},
+			{
+				route: base_core_path + 'contents/colors',
+				title: 'Colors',
+				icon: 'icons',
+			},
+		],
+	},
 	{
 		title: 'Components',
 		id: 'menu-components',
@@ -100,11 +117,6 @@ export const navigations = [
 				title: 'Dot',
 				icon: 'star',
 			},
-			{
-				route: base_component_path + 'el',
-				title: 'El',
-				icon: 'star',
-			},
 			{
 				route: base_component_path + 'file-uploader',
 				title: 'FileUploader',
diff --git a/src/scss/tabler/components/el.scss b/src/scss/tabler/components/el.scss
index a6a1f199..b119862c 100644
--- a/src/scss/tabler/components/el.scss
+++ b/src/scss/tabler/components/el.scss
@@ -203,7 +203,9 @@ $container-breakpoints: (
 );
 
 $props: (
-    bg-gradient: '.bg-gradient',
+    bg:(color: generate_props($theme_colors, ('.bg-')),
+        gradient: '.bg-gradient',
+    ),
     border: '.border',
     max-width-100: '.mw-100',
     max-height-100: '.mh-100',
@@ -212,10 +214,19 @@ $props: (
     show: '.show',
     lead: '.lead',
     blockquote: '.blockquote',
-    container: (generate_props($container-breakpoints, ('.container-')))
+    container: (generate_props($container-breakpoints, ('.container-'))),
+    text:(truncate: '.text-truncate',
+        muted: '.text-muted',
+        color: (generate_props($theme_colors, ('.text-'))),
+        opacity: (generate_props($text-opacities, ('.text-'))),
+        transform:(lowercase: '.text-lowercase',
+            uppercase: '.text-uppercase',
+            capitalize: '.text-capitalize',
+        ))
 );
 
 .#{$prefix-el} {
+    @include apply-props($props);
 
     &-col {
         @extend .col;
@@ -269,26 +280,11 @@ $props: (
 
     @each $key,
     $value in $theme_colors {
-        &-bg-color-#{$key} {
-            @extend .bg-#{$key};
-        }
-
         &-border-color-#{$key} {
             @extend .border-#{$key};
         }
     }
 
-    @each $key,
-    $value in $theme_colors {
-        &-text-color-#{$key} {
-            @extend .text-#{$key};
-        }
-    }
-
-    &-text-truncate {
-        @extend .text-truncate;
-    }
-
     @each $key,
     $value in $opacities {
         &-bg-opacity-#{$key} {
@@ -302,13 +298,6 @@ $props: (
         }
     }
 
-    @each $key,
-    $value in $text-opacities {
-        &-text-opacity-#{$key} {
-            @extend .text-opacity-#{$key};
-        }
-    }
-
     @each $display in $displays {
         @each $size in $displays-sizes {
             &-display-#{$size}-#{$display} {
@@ -490,5 +479,5 @@ $props: (
     }
 
 
-    @include apply-props($props);
+
 }
\ No newline at end of file

From f78f70c7718d363e62e5f693559e04978eb7cb3c Mon Sep 17 00:00:00 2001
From: pournasserian <pournasserian@users.noreply.github.com>
Date: Thu, 22 Dec 2022 22:17:17 +0000
Subject: [PATCH 03/13] Release 0.0.3-next.165

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index e7a4be98..4b9ec804 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@ubeac/svelte",
-	"version": "0.0.3-next.164",
+	"version": "0.0.3-next.165",
 	"type": "module",
 	"svelte": "index.js",
 	"publishConfig": {

From 0c20a94eccffbf1a287a3043821d2ea1f86863e8 Mon Sep 17 00:00:00 2001
From: Amir Pournasserian <amir.pournasserian@live.com>
Date: Thu, 22 Dec 2022 17:18:40 -0500
Subject: [PATCH 04/13] Update ColorsNamed.svelte

Removing unused example
---
 .../docs/core/contents/colors/ColorsNamed.svelte    | 13 -------------
 1 file changed, 13 deletions(-)

diff --git a/src/routes/docs/core/contents/colors/ColorsNamed.svelte b/src/routes/docs/core/contents/colors/ColorsNamed.svelte
index d3c59d72..820be054 100644
--- a/src/routes/docs/core/contents/colors/ColorsNamed.svelte
+++ b/src/routes/docs/core/contents/colors/ColorsNamed.svelte
@@ -14,16 +14,3 @@
 <El bgColor="green">Green</El>
 <El bgColor="teal">Teal</El>
 <El bgColor="cyan">Cyan</El>
-
-<El bgColor="blue-lt">Blue</El>
-<El bgColor="azure-lt">Azure</El>
-<El bgColor="indigo-lt">Indigo</El>
-<El bgColor="purple-lt">Purple</El>
-<El bgColor="pink-lt">Pink</El>
-<El bgColor="red-lt">Red</El>
-<El bgColor="orange-lt">Orange</El>
-<El bgColor="yellow-lt">Yellow</El>
-<El bgColor="lime-lt">Lime</El>
-<El bgColor="green-lt">Green</El>
-<El bgColor="teal-lt">Teal</El>
-<El bgColor="cyan-lt">Cyan</El>

From d794ae5ea2a2c8bd3225e4d3294b73c845182d02 Mon Sep 17 00:00:00 2001
From: pournasserian <pournasserian@users.noreply.github.com>
Date: Thu, 22 Dec 2022 22:19:09 +0000
Subject: [PATCH 05/13] Release 0.0.3-next.166

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 4b9ec804..29c70b0e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@ubeac/svelte",
-	"version": "0.0.3-next.165",
+	"version": "0.0.3-next.166",
 	"type": "module",
 	"svelte": "index.js",
 	"publishConfig": {

From 56110cda21525764f092207e047f3bb69214a5cb Mon Sep 17 00:00:00 2001
From: Amir Pournasserian <amir.pournasserian@live.com>
Date: Thu, 22 Dec 2022 17:44:06 -0500
Subject: [PATCH 06/13] Renaming Brand colors to Social

---
 src/routes/docs/core/contents/colors/+page.svelte         | 8 ++++----
 .../colors/{ColorsBrand.svelte => ColorsSocial.svelte}    | 0
 2 files changed, 4 insertions(+), 4 deletions(-)
 rename src/routes/docs/core/contents/colors/{ColorsBrand.svelte => ColorsSocial.svelte} (100%)

diff --git a/src/routes/docs/core/contents/colors/+page.svelte b/src/routes/docs/core/contents/colors/+page.svelte
index b6e103ab..6c67f9e0 100644
--- a/src/routes/docs/core/contents/colors/+page.svelte
+++ b/src/routes/docs/core/contents/colors/+page.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { Doc, Preview } from '@ubeac/svelte'
 
-	import ColorsBrand from './ColorsBrand.svelte'
 	import ColorsNamed from './ColorsNamed.svelte'
+	import ColorsSocial from './ColorsSocial.svelte'
 	import ColorsTheme from './ColorsTheme.svelte'
 </script>
 
@@ -22,10 +22,10 @@
 	</div>
 </Preview>
 
-<Doc title="Brancd colors" />
-<Preview src="./ColorsBrand.svelte">
+<Doc title="Social colors" />
+<Preview src="./ColorsSocial.svelte">
 	<div class="custom-class text-light">
-		<ColorsBrand />
+		<ColorsSocial />
 	</div>
 </Preview>
 
diff --git a/src/routes/docs/core/contents/colors/ColorsBrand.svelte b/src/routes/docs/core/contents/colors/ColorsSocial.svelte
similarity index 100%
rename from src/routes/docs/core/contents/colors/ColorsBrand.svelte
rename to src/routes/docs/core/contents/colors/ColorsSocial.svelte

From d7f6f4bb91bf5fe320963097bea795a8af516d6b Mon Sep 17 00:00:00 2001
From: pournasserian <pournasserian@users.noreply.github.com>
Date: Thu, 22 Dec 2022 22:44:40 +0000
Subject: [PATCH 07/13] Release 0.0.3-next.167

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 29c70b0e..08df7cb9 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@ubeac/svelte",
-	"version": "0.0.3-next.166",
+	"version": "0.0.3-next.167",
 	"type": "module",
 	"svelte": "index.js",
 	"publishConfig": {

From aa62cfd44c276b257f899edd7577037842f68518 Mon Sep 17 00:00:00 2001
From: Amir Pournasserian <amir.pournasserian@live.com>
Date: Thu, 22 Dec 2022 18:03:02 -0500
Subject: [PATCH 08/13] #712 Icon documentation moved to Core features

---
 src/routes/docs/components/icons/+page.svelte | 29 ----------
 .../docs/core/contents/icons/+page.svelte     | 57 +++++++++++++++++++
 .../contents}/icons/IconAnimation.svelte      |  0
 .../contents}/icons/IconColors.svelte         |  0
 .../contents}/icons/IconDefault.svelte        |  0
 .../contents}/icons/IconFilled.svelte         |  0
 .../contents}/icons/IconSizes.svelte          |  0
 src/routes/docs/icons/+page.svelte            | 33 -----------
 src/routes/docs/icons/IconColor.svelte        |  9 ---
 src/routes/docs/icons/IconDefault.svelte      |  9 ---
 src/routes/docs/icons/IconSize.svelte         | 19 -------
 src/routes/docs/index.ts                      | 27 +++------
 12 files changed, 65 insertions(+), 118 deletions(-)
 delete mode 100644 src/routes/docs/components/icons/+page.svelte
 create mode 100644 src/routes/docs/core/contents/icons/+page.svelte
 rename src/routes/docs/{components => core/contents}/icons/IconAnimation.svelte (100%)
 rename src/routes/docs/{components => core/contents}/icons/IconColors.svelte (100%)
 rename src/routes/docs/{components => core/contents}/icons/IconDefault.svelte (100%)
 rename src/routes/docs/{components => core/contents}/icons/IconFilled.svelte (100%)
 rename src/routes/docs/{components => core/contents}/icons/IconSizes.svelte (100%)
 delete mode 100644 src/routes/docs/icons/+page.svelte
 delete mode 100644 src/routes/docs/icons/IconColor.svelte
 delete mode 100644 src/routes/docs/icons/IconDefault.svelte
 delete mode 100644 src/routes/docs/icons/IconSize.svelte

diff --git a/src/routes/docs/components/icons/+page.svelte b/src/routes/docs/components/icons/+page.svelte
deleted file mode 100644
index 040096f5..00000000
--- a/src/routes/docs/components/icons/+page.svelte
+++ /dev/null
@@ -1,29 +0,0 @@
-<script>
-	import { Doc, Preview } from '@ubeac/svelte'
-	import IconColors from './IconColors.svelte'
-	import IconDefault from './IconDefault.svelte'
-	import IconFilled from './IconFilled.svelte'
-	import IconSizes from './IconSizes.svelte'
-</script>
-
-<h1>Icons</h1>
-
-<Doc title="Icon" />
-<Preview src="./IconDefault.svelte">
-	<IconDefault />
-</Preview>
-
-<Doc title="Icon colors" />
-<Preview src="./IconColors.svelte">
-	<IconColors />
-</Preview>
-
-<Doc title="Filled icons" />
-<Preview src="./IconFilled.svelte">
-	<IconFilled />
-</Preview>
-
-<Doc title="Icon sizes" />
-<Preview src="./IconSizes.svelte">
-	<IconSizes />
-</Preview>
diff --git a/src/routes/docs/core/contents/icons/+page.svelte b/src/routes/docs/core/contents/icons/+page.svelte
new file mode 100644
index 00000000..2bd3c073
--- /dev/null
+++ b/src/routes/docs/core/contents/icons/+page.svelte
@@ -0,0 +1,57 @@
+<script>
+	import { Doc, Preview } from '@ubeac/svelte'
+	import IconColors from './IconColors.svelte'
+	import IconDefault from './IconDefault.svelte'
+	import IconFilled from './IconFilled.svelte'
+	import IconSizes from './IconSizes.svelte'
+	import IconAnimation from './IconAnimation.svelte'
+</script>
+
+<h1>Icons</h1>
+<p>
+	Free and open source icons designed to make your website or app attractive, visually consistent and simply beautiful.
+	See the icons documentation from <a href="https://tabler-icons.io/" target="_blank">tabler-icons</a>.
+</p>
+
+<Doc title="Name">
+	To use an icon, set the <code>name</code> prop to the icon name.
+</Doc>
+<Preview src="./IconDefault.svelte">
+	<IconDefault />
+</Preview>
+
+<Doc title="Color">
+	Set the <code>color</code> prop to change your icons color.
+</Doc>
+<Preview src="./IconColors.svelte">
+	<IconColors />
+</Preview>
+
+<Doc title="Filled">
+	To use a filled icon, set the <code>filled</code> prop to <code>true</code>.
+</Doc>
+<Preview src="./IconFilled.svelte">
+	<IconFilled />
+</Preview>
+
+<Doc title="Size">
+	To use a different icon size, set the <code>size</code> prop to <code>sm</code>, <code>md</code> or <code>lg</code>,
+	<code>xl</code>,
+	<code>1x</code>,
+	<code>2x</code>,
+	<code>3x</code>,
+	<code>4x</code>,
+	<code>5x</code>,
+	<code>6x</code>,
+	<code>7x</code>,
+	<code>8x</code>,
+	<code>9x</code>.
+</Doc>
+<Preview src="./IconSizes.svelte">
+	<IconSizes />
+</Preview>
+
+<Doc title="Animate">TODO</Doc>
+<Preview src="./IconAnimation.svelte">
+	<IconAnimation />
+</Preview>
diff --git a/src/routes/docs/components/icons/IconAnimation.svelte b/src/routes/docs/core/contents/icons/IconAnimation.svelte
similarity index 100%
rename from src/routes/docs/components/icons/IconAnimation.svelte
rename to src/routes/docs/core/contents/icons/IconAnimation.svelte
diff --git a/src/routes/docs/components/icons/IconColors.svelte b/src/routes/docs/core/contents/icons/IconColors.svelte
similarity index 100%
rename from src/routes/docs/components/icons/IconColors.svelte
rename to src/routes/docs/core/contents/icons/IconColors.svelte
diff --git a/src/routes/docs/components/icons/IconDefault.svelte b/src/routes/docs/core/contents/icons/IconDefault.svelte
similarity index 100%
rename from src/routes/docs/components/icons/IconDefault.svelte
rename to src/routes/docs/core/contents/icons/IconDefault.svelte
diff --git a/src/routes/docs/components/icons/IconFilled.svelte b/src/routes/docs/core/contents/icons/IconFilled.svelte
similarity index 100%
rename from src/routes/docs/components/icons/IconFilled.svelte
rename to src/routes/docs/core/contents/icons/IconFilled.svelte
diff --git a/src/routes/docs/components/icons/IconSizes.svelte b/src/routes/docs/core/contents/icons/IconSizes.svelte
similarity index 100%
rename from src/routes/docs/components/icons/IconSizes.svelte
rename to src/routes/docs/core/contents/icons/IconSizes.svelte
diff --git a/src/routes/docs/icons/+page.svelte b/src/routes/docs/icons/+page.svelte
deleted file mode 100644
index 8cff8cb6..00000000
--- a/src/routes/docs/icons/+page.svelte
+++ /dev/null
@@ -1,33 +0,0 @@
-<script>
-	import { Preview } from '@ubeac/svelte'
-	import IconColor from './IconColor.svelte'
-	import IconDefault from './IconDefault.svelte'
-	import IconSize from './IconSize.svelte'
-</script>
-
-<h1>Icons</h1>
-<p>
-	Free and open source icons designed to make your website or app attractive, visually consistent and simply beautiful.
-	See the icons documentation from <a href="https://tabler-icons.io/" target="_blank">tabler-icons</a>.
-</p>
-
-<h2>Examples</h2>
-<Preview src="./IconDefault.svelte">
-	<IconDefault />
-</Preview>
-
-<h2>Color</h2>
-<p>
-	Set the <code>color</code> prop to change your icons color.
-</p>
-<Preview src="./IconColor.svelte">
-	<IconColor />
-</Preview>
-
-<h2>Size</h2>
-<p>
-	Set the <code>size</code> prop to change your icons size.
-</p>
-<Preview src="./IconSize.svelte">
-	<IconSize />
-</Preview>
diff --git a/src/routes/docs/icons/IconColor.svelte b/src/routes/docs/icons/IconColor.svelte
deleted file mode 100644
index 95154210..00000000
--- a/src/routes/docs/icons/IconColor.svelte
+++ /dev/null
@@ -1,9 +0,0 @@
-<script>
-	import { Icon } from '@ubeac/svelte'
-</script>
-
-<Icon name="user" color="danger" />
-<Icon name="star" color="warning" />
-<Icon name="package" color="success" />
-<Icon name="key" color="info" />
-<Icon name="lock" color="primary" />
diff --git a/src/routes/docs/icons/IconDefault.svelte b/src/routes/docs/icons/IconDefault.svelte
deleted file mode 100644
index e1cc109c..00000000
--- a/src/routes/docs/icons/IconDefault.svelte
+++ /dev/null
@@ -1,9 +0,0 @@
-<script>
-	import { Icon } from '@ubeac/svelte'
-</script>
-
-<Icon name="user" />
-<Icon name="star" />
-<Icon name="package" />
-<Icon name="key" />
-<Icon name="lock" />
diff --git a/src/routes/docs/icons/IconSize.svelte b/src/routes/docs/icons/IconSize.svelte
deleted file mode 100644
index 93f2abef..00000000
--- a/src/routes/docs/icons/IconSize.svelte
+++ /dev/null
@@ -1,19 +0,0 @@
-<script>
-	import { Icon } from '@ubeac/svelte'
-</script>
-
-<Icon name="user" size="auto" />
-<Icon name="user" size="xs" />
-<Icon name="user" size="sm" />
-<Icon name="user" size="md" />
-<Icon name="user" size="lg" />
-<Icon name="user" size="xl" />
-<Icon name="user" size="1x" />
-<Icon name="user" size="2x" />
-<Icon name="user" size="3x" />
-<Icon name="user" size="4x" />
-<Icon name="user" size="5x" />
-<Icon name="user" size="6x" />
-<Icon name="user" size="7x" />
-<Icon name="user" size="8x" />
-<Icon name="user" size="9x" />
diff --git a/src/routes/docs/index.ts b/src/routes/docs/index.ts
index 8ddc1c16..cc3c602f 100644
--- a/src/routes/docs/index.ts
+++ b/src/routes/docs/index.ts
@@ -13,7 +13,7 @@ export const navigations = [
 			{
 				route: base_path + 'getting-started/installation',
 				title: 'Installation',
-				icon: 'icons',
+				icon: 'star',
 			},
 		],
 	},
@@ -24,12 +24,17 @@ export const navigations = [
 			{
 				route: base_core_path + 'contents/typography',
 				title: 'Typography',
-				icon: 'icons',
+				icon: 'star',
 			},
 			{
 				route: base_core_path + 'contents/colors',
 				title: 'Colors',
-				icon: 'icons',
+				icon: 'star',
+			},
+			{
+				route: base_core_path + 'contents/icons',
+				title: 'Icons',
+				icon: 'star',
 			},
 		],
 	},
@@ -132,11 +137,6 @@ export const navigations = [
 				title: 'Grid',
 				icon: 'star',
 			},
-			{
-				route: base_component_path + 'icons',
-				title: 'Icon',
-				icon: 'star',
-			},
 			{
 				route: base_component_path + 'inputs',
 				title: 'Input',
@@ -306,17 +306,6 @@ export const navigations = [
 			},
 		],
 	},
-	{
-		title: 'Icons',
-		id: 'menu-icons',
-		children: [
-			{
-				route: base_path + 'icons',
-				title: 'Icons',
-				icon: 'icons',
-			},
-		],
-	},
 	{
 		title: 'Pages',
 		id: 'menu-pages',

From 0c6517538952fa0a700b19f56a76ff119e30e2c7 Mon Sep 17 00:00:00 2001
From: pournasserian <pournasserian@users.noreply.github.com>
Date: Thu, 22 Dec 2022 23:04:20 +0000
Subject: [PATCH 09/13] Release 0.0.3-next.168

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 08df7cb9..d1586fa0 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@ubeac/svelte",
-	"version": "0.0.3-next.167",
+	"version": "0.0.3-next.168",
 	"type": "module",
 	"svelte": "index.js",
 	"publishConfig": {

From 0aef1581c15b1bcc32af84e6ea96ef9e9c891efd Mon Sep 17 00:00:00 2001
From: Amir Pournasserian <amir.pournasserian@live.com>
Date: Thu, 22 Dec 2022 18:16:46 -0500
Subject: [PATCH 10/13] #715 FormGroup removed

---
 src/components/Form/FormGroup.svelte          | 31 ----------
 src/components/Form/index.ts                  |  1 -
 .../form-fieldsets/FormFieldsetDefault.svelte |  2 +-
 .../tabler/components/form/form-group.scss    | 59 -------------------
 src/scss/tabler/components/form/index.scss    |  1 -
 5 files changed, 1 insertion(+), 93 deletions(-)
 delete mode 100644 src/components/Form/FormGroup.svelte
 delete mode 100644 src/scss/tabler/components/form/form-group.scss

diff --git a/src/components/Form/FormGroup.svelte b/src/components/Form/FormGroup.svelte
deleted file mode 100644
index 4bc42758..00000000
--- a/src/components/Form/FormGroup.svelte
+++ /dev/null
@@ -1,31 +0,0 @@
-<script lang="ts">
-	import { Col } from '@ubeac/svelte/components/Grid'
-
-	import { classname } from '$lib/utils'
-
-	$: classes = classname('form-group', undefined, $$props.class)
-
-	$: col = $$props.col ?? '6'
-</script>
-
-<Col {col}>
-	<div class={classes}>
-		<slot name="label" />
-		<div class="outer">
-			<slot name="outer:start" />
-			<div class="middle">
-				<slot name="middle:start" />
-				<div class="inner">
-					<slot name="inner:start" />
-					<div class="input">
-						<slot />
-						<div class={classname('form-group-focus', undefined, $$props.class)} />
-					</div>
-					<slot name="inner:end" />
-				</div>
-				<slot name="middle:end" />
-			</div>
-			<slot name="outer:end" />
-		</div>
-	</div>
-</Col>
diff --git a/src/components/Form/index.ts b/src/components/Form/index.ts
index cdf6ca2c..ea70099b 100644
--- a/src/components/Form/index.ts
+++ b/src/components/Form/index.ts
@@ -4,7 +4,6 @@ export { default as FormCheckboxGroup } from './FormCheckboxGroup.svelte'
 export { default as FormDatePicker } from './FormDatePicker.svelte'
 export { default as FormFieldset } from './FormFieldset.svelte'
 export { default as FormFileUploader } from './FormFileUploader.svelte'
-export { default as FormGroup } from './FormGroup.svelte'
 export { default as FormHint } from './FormHint.svelte'
 export { default as FormInput } from './FormInput.svelte'
 export { default as FormRadioGroup } from './FormRadioGroup.svelte'
diff --git a/src/routes/docs/form/form-fieldsets/FormFieldsetDefault.svelte b/src/routes/docs/form/form-fieldsets/FormFieldsetDefault.svelte
index 0bedf9dd..35527853 100644
--- a/src/routes/docs/form/form-fieldsets/FormFieldsetDefault.svelte
+++ b/src/routes/docs/form/form-fieldsets/FormFieldsetDefault.svelte
@@ -7,5 +7,5 @@
 	<FormInput placeholder="Company" mb="2" />
 	<FormInput placeholder="Email" mb="2" />
 	<FormInput placeholder="Phone number" mb="2" />
-	<FormCheckbox mb="2">I agree to the terms and conditions</FormCheckbox>
+	<FormCheckbox>I agree to the terms and conditions</FormCheckbox>
 </FormFieldset>
diff --git a/src/scss/tabler/components/form/form-group.scss b/src/scss/tabler/components/form/form-group.scss
deleted file mode 100644
index 37dcdd50..00000000
--- a/src/scss/tabler/components/form/form-group.scss
+++ /dev/null
@@ -1,59 +0,0 @@
-.u-form-group {
-	.outer,
-	.middle,
-	.inner {
-		align-items: center;
-		display: flex;
-		flex-grow: 1;
-		flex-wrap: nowrap;
-	}
-
-	.outer {
-		column-gap: 10px;
-	}
-
-	.inner {
-		background-color: #ffffff;
-		border-radius: 4px;
-		column-gap: 8px;
-		position: relative;
-
-		& > *:not(.input):first-child {
-			margin-left: 10px;
-		}
-
-		& > *:not(.input):last-child {
-			margin-right: 10px;
-		}
-	}
-
-	.input {
-		flex-grow: 1;
-		& > *:not(.u-form-group-focus),
-		& > *:not(.u-form-group-focus):focus {
-			box-shadow: none;
-			border-color: transparent;
-		}
-
-		& > *:not(.u-form-group-focus):focus ~ .u-form-group-focus {
-			color: inherit;
-			border-color: #90b5e2;
-			outline: 0;
-			box-shadow: 0 0 0 0.25rem rgb(32 107 196 / 25%);
-		}
-
-		&:not(:first-child) > *:not(.u-form-group-focus) {
-			padding-right: 0;
-			padding-left: 0;
-		}
-	}
-
-	.u-form-group-focus {
-		position: absolute;
-		inset: 0;
-		border: 1px solid #d9dbde;
-		border-radius: 4px;
-		transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-		pointer-events: none;
-	}
-}
diff --git a/src/scss/tabler/components/form/index.scss b/src/scss/tabler/components/form/index.scss
index 9e2cceec..53868504 100644
--- a/src/scss/tabler/components/form/index.scss
+++ b/src/scss/tabler/components/form/index.scss
@@ -1,5 +1,4 @@
 @import './form-field';
 @import './form-fieldset';
-@import './form-group';
 @import './form-hint';
 @import './form-switch';
\ No newline at end of file

From 02098f31c1eacedc9b953a54d8863234cccb957f Mon Sep 17 00:00:00 2001
From: Amir Pournasserian <amir.pournasserian@live.com>
Date: Thu, 22 Dec 2022 18:20:42 -0500
Subject: [PATCH 11/13] #715 updating FormFileUploder for FormGroup unused ref.

---
 src/components/Form/FormFileUploader.svelte | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/src/components/Form/FormFileUploader.svelte b/src/components/Form/FormFileUploader.svelte
index a522594c..36cb8c5b 100644
--- a/src/components/Form/FormFileUploader.svelte
+++ b/src/components/Form/FormFileUploader.svelte
@@ -3,17 +3,11 @@
 
 	import { nanoid } from 'nanoid'
 
-	import { FormGroup, Icon, FileUploader, Label, Spinner } from '$lib/components'
+	import { FileUploader, FormField, Icon, Label, Spinner } from '$lib/components'
 	import { forwardEventsBuilder } from '$lib/directives'
 	import { classname } from '$lib/utils'
 
 	import { FormHint } from '.'
-	import FormField from './FormField.svelte'
-
-	/**
-	 * Set Column width
-	 */
-	export let cols: string | number | boolean = '12'
 
 	/**
 	 * Sets an icon inside component
@@ -60,7 +54,7 @@
 	$: classes = classname('form-file-uploader', undefined, $$props.class)
 </script>
 
-<FormField {cols} class={classes}>
+<FormField class={classes}>
 	<slot name="label">
 		{#if label}
 			<Label for="form-file-uploader-{id}" {required}>{label}</Label>

From 25037e0ceb5b9e980a184e89e73ab820b44dbe4a Mon Sep 17 00:00:00 2001
From: Amir Pournasserian <amir.pournasserian@live.com>
Date: Thu, 22 Dec 2022 18:28:02 -0500
Subject: [PATCH 12/13] #706 documentation cleanup

---
 skeleton.md                                            |  1 -
 .../form/form-fieldsets/FormFieldsetDefault.svelte     | 10 +++++-----
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/skeleton.md b/skeleton.md
index 4118e83b..f0cc4e64 100644
--- a/skeleton.md
+++ b/skeleton.md
@@ -77,7 +77,6 @@
 - DialogHeader
 - FormCheckboxGroup
 - FormFieldset
-- FormGroup
 - GoogleMapAutocomplete
 - Tab
 - TabHeader
diff --git a/src/routes/docs/form/form-fieldsets/FormFieldsetDefault.svelte b/src/routes/docs/form/form-fieldsets/FormFieldsetDefault.svelte
index 35527853..4afa96a7 100644
--- a/src/routes/docs/form/form-fieldsets/FormFieldsetDefault.svelte
+++ b/src/routes/docs/form/form-fieldsets/FormFieldsetDefault.svelte
@@ -3,9 +3,9 @@
 </script>
 
 <FormFieldset label="Contact Information">
-	<FormInput placeholder="Full name" mb="2" />
-	<FormInput placeholder="Company" mb="2" />
-	<FormInput placeholder="Email" mb="2" />
-	<FormInput placeholder="Phone number" mb="2" />
-	<FormCheckbox>I agree to the terms and conditions</FormCheckbox>
+	<FormInput placeholder="Full name" label="Full name" required />
+	<FormInput placeholder="Company" label="Company" />
+	<FormInput placeholder="Email" label="Email" required />
+	<FormInput placeholder="Phone number" label="Phone number" />
+	<FormCheckbox required>I agree to the terms and conditions</FormCheckbox>
 </FormFieldset>

From 122422f4b777aa01c6649be2ba17d9a18e956d07 Mon Sep 17 00:00:00 2001
From: pournasserian <pournasserian@users.noreply.github.com>
Date: Thu, 22 Dec 2022 23:30:10 +0000
Subject: [PATCH 13/13] Release 0.0.3-next.169

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index d1586fa0..2b452dab 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@ubeac/svelte",
-	"version": "0.0.3-next.168",
+	"version": "0.0.3-next.169",
 	"type": "module",
 	"svelte": "index.js",
 	"publishConfig": {