From 3890a2546a3a2adcd5db2c1b50e1fb5aff3005a6 Mon Sep 17 00:00:00 2001
From: Emir Yaman Gazaz <emiryaman.gazaz@ekinokssoftware.com>
Date: Fri, 26 Jun 2026 15:16:48 +0300
Subject: [PATCH 01/13] chore: consistent units

---
 src/ui/components/PTimer/PTimer.css | 2 +-
 src/ui/views/Consent.vue            | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/ui/components/PTimer/PTimer.css b/src/ui/components/PTimer/PTimer.css
index d92da09..65389a0 100644
--- a/src/ui/components/PTimer/PTimer.css
+++ b/src/ui/components/PTimer/PTimer.css
@@ -16,7 +16,7 @@
             margin: auto;
             padding-top: 0px;
             text-align: center;
-            font-size: 2em;
+            font-size: 2rem;
             font-family: var(--pa-font-family);
             font-weight: var(--pa-fw-h1);
         }
diff --git a/src/ui/views/Consent.vue b/src/ui/views/Consent.vue
index 6ba957a..742c901 100644
--- a/src/ui/views/Consent.vue
+++ b/src/ui/views/Consent.vue
@@ -123,9 +123,9 @@ const resolveClientLogo = resolveLogo;
   display: block;
   font-weight: 600;
   opacity: 0.6;
-  font-size: 0.8em;
+  font-size: 0.8rem;
   text-transform: uppercase;
-  letter-spacing: 0.05em;
+  letter-spacing: 0.05rem;
   margin-bottom: 4px;
 }
 </style>

From ece719d32d1861fce087e83450768bc20fb1169b Mon Sep 17 00:00:00 2001
From: Emir Yaman Gazaz <emiryaman.gazaz@ekinokssoftware.com>
Date: Mon, 29 Jun 2026 16:41:20 +0300
Subject: [PATCH 02/13] chore: align helper section items

---
 src/ui/styles/main.css | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/ui/styles/main.css b/src/ui/styles/main.css
index 98e137c..81da1ea 100644
--- a/src/ui/styles/main.css
+++ b/src/ui/styles/main.css
@@ -201,7 +201,7 @@
       display: flex;
       flex-direction: column;
       margin: auto 0;
-      width: min(600px, 100%);
+      width: min(500px, 100%);
       flex-grow: 0;
       justify-content: safe center;
       min-height: calc(var(--pa-widget-state, 0) * 100vh);
@@ -309,8 +309,9 @@
   }
 
   &-helpers-section {
-    @apply text-center pt-4;
+    @apply pt-4;
     line-height: 24px;
+    text-align: var(--pa-align-p);
 
     a {
       padding-left: 4px;
@@ -398,7 +399,8 @@
         color: #757575 !important;
         display: inline-block;
         transition: all .2s;
-        padding: 2px 4px;
+        padding-inline: 4px;
+        padding-block: 2px;
 
         &:hover,
         &.hover--demo {

From f6f3d1cd78af3d3c65c3a617d3584190494aa548 Mon Sep 17 00:00:00 2001
From: Emir Yaman Gazaz <emiryaman.gazaz@ekinokssoftware.com>
Date: Tue, 30 Jun 2026 16:30:00 +0300
Subject: [PATCH 03/13] chore: add demo error states

---
 src/ui/components/PTextField/PTextField.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/ui/components/PTextField/PTextField.css b/src/ui/components/PTextField/PTextField.css
index f5eab4e..37680d8 100644
--- a/src/ui/components/PTextField/PTextField.css
+++ b/src/ui/components/PTextField/PTextField.css
@@ -213,7 +213,7 @@
           color: rgb(var(--pa-color-primary)) !important;
         }
       }
-
+      &.error--demo,
       &.input--error {
         .input--wrap {
           border-bottom-color: rgb(var(--pa-color-error));
@@ -413,7 +413,7 @@
       font-size: 12px;
       font-family: var(--pa-font-family);
     }
-
+    &.error--demo,
     &--error {
       color: rgb(var(--pa-color-error)) !important;
 

From db25792edbf6496c5b1e4861f1e333b8773c82fb Mon Sep 17 00:00:00 2001
From: Emir Yaman Gazaz <emiryaman.gazaz@ekinokssoftware.com>
Date: Fri, 17 Jul 2026 17:11:08 +0300
Subject: [PATCH 04/13] feat: circle variant for social login button

---
 src/ui/components/SocialConnectionButton.vue | 31 +++++++---
 src/ui/interfaces/index.ts                   |  3 -
 src/ui/styles/main.css                       | 65 +++++++++++++++++---
 src/ui/utils/index.ts                        |  4 ++
 stories/02.GettingStarted.mdx                |  4 --
 5 files changed, 83 insertions(+), 24 deletions(-)

diff --git a/src/ui/components/SocialConnectionButton.vue b/src/ui/components/SocialConnectionButton.vue
index 7512849..fcc79bd 100644
--- a/src/ui/components/SocialConnectionButton.vue
+++ b/src/ui/components/SocialConnectionButton.vue
@@ -1,9 +1,14 @@
 <template>
   <p-btn
     class="pa__widget-social-button"
+    ref="btnRef"
     :block="mode === 'block'"
-    :class="{ 'pa__widget-social-button-circle': mode === 'circle' }"
+    :class="{
+      'pa__widget-social-button-circle': mode === 'circle'
+    }"
     :href="'social?provider=' + (typeof connection === 'string' ? connection : connection.name )"
+    :aria-label="mode === 'block' ? socialLabel : socialLabel"
+    :title="mode === 'block' ? socialLabel : socialLabel"
   >
     <span
       class="pa__widget-social-icon"
@@ -21,7 +26,7 @@
           args: [
             typeof connection === 'string'
               ? connection
-              : connection.branding?.display_name || connection.provider
+              : providerLabel
           ]
         }"
       />
@@ -30,11 +35,10 @@
 </template>
 
 <script setup lang="ts">
-import { inject } from 'vue';
-
-import type { IWidgetSettings } from '../interfaces';
+import { computed, onMounted, ref } from 'vue';
 
 import PBtn from './PBtn/PBtn.vue';
+import { resolveCssVariableVariant } from '../utils';
 
 const props = defineProps<{
   langKey: string,
@@ -49,9 +53,16 @@ const props = defineProps<{
     }
   }
 }>()
-const settings = inject('settings') as Partial<IWidgetSettings>
 
-const mode = settings.socialLogin?.buttonVariant || 'block'
+const btnRef = ref<any>();
+const iconVariants = ['block', 'circle'] as const;
+const mode = ref<typeof iconVariants[number]>(resolveCssVariableVariant('--pa-icon-variant', iconVariants));
+
+onMounted(() => {
+  const element = btnRef.value ? (btnRef.value.$el || btnRef.value) : undefined;
+  mode.value = resolveCssVariableVariant('--pa-icon-variant', iconVariants, element);
+});
+
 function iconUrl(provider: string){
   return `https://raw.githubusercontent.com/edent/SuperTinyIcons/master/images/svg/${provider}.svg`
 }
@@ -59,6 +70,12 @@ function iconUrl(provider: string){
 const iconLink = typeof props.connection === 'string'
   ? iconUrl(props.connection)
   : props.connection.branding?.logo_url || iconUrl(props.connection.provider)
+
+const providerLabel = computed(() => typeof props.connection === 'string'
+  ? props.connection
+  : props.connection.branding?.display_name || props.connection.provider)
+
+const socialLabel = computed(() => providerLabel.value)
 </script>
 
 <style scoped>
diff --git a/src/ui/interfaces/index.ts b/src/ui/interfaces/index.ts
index 2c0c9b2..6b4c373 100644
--- a/src/ui/interfaces/index.ts
+++ b/src/ui/interfaces/index.ts
@@ -159,9 +159,6 @@ export interface IWidgetSettings {
       fields: AdditionalFields
     ) => void
   }>>,
-  socialLogin?: {
-    buttonVariant?: 'circle' | 'block'
-  },
   footer?: {
     enabled?: boolean
   },
diff --git a/src/ui/styles/main.css b/src/ui/styles/main.css
index 81da1ea..0405148 100644
--- a/src/ui/styles/main.css
+++ b/src/ui/styles/main.css
@@ -329,36 +329,81 @@
   }
 
   &-social-button.btn {
-    @apply capitalize justify-start gap-2 bg-transparent text-gray-800 border border-gray-300 whitespace-normal;
+    @apply capitalize justify-start gap-3 bg-white text-gray-800 border border-gray-300 whitespace-normal;
+    box-shadow: 0 1px 2px rgb(15 23 42 / 0.06);
     word-break: auto-phrase;
     min-height: min-content;
     transition-property: all;
     transition-timing-function: var(--pa-ease, var(--default-transition-timingFunction));
     transition-duration: .2s;
-
+  
     &:hover,
     &.hover--demo {
       @apply bg-gray-50 border-gray-400;
+      box-shadow: 0 3px 8px rgb(15 23 42 / 0.1);
       opacity: 1;
     }
-
+  
     &:focus,
     &.focus--demo {
       @apply outline-none ring-2 ring-primary/20 border-primary/50;
     }
 
-    &-circle {
-      @apply w-10 h-10 p-0 rounded-full overflow-hidden;
+    &.widget-social-button-circle {
+      width: 44px !important;
+      height: 44px !important;
+      min-width: 44px !important;
+      min-height: 44px !important;
+      max-width: 44px;
+      max-height: 44px;
+      flex: 0 0 44px;
+      justify-content: center;
+      padding: 0;
+      gap: 0;
+      background: transparent !important;
+      box-shadow: none !important;
+      border: 0 !important;
+      outline: 0 !important;
+      transition: none !important;
+
+      .btn__content {
+        display: none;
+      }
 
       .widget-social-icon {
-        @apply w-10 h-10;
+        width: 44px;
+        height: 44px;
+        flex-shrink: 0;
+        background-size: contain;
       }
 
       &:hover,
-      &.hover--demo {
-        filter: brightness(0.9);
+      &.hover--demo,
+      &:focus,
+      &.focus--demo,
+      &:focus-visible {
+        background: transparent !important;
+        box-shadow: none !important;
+        border: 0 !important;
+        outline: 0 !important;
+        opacity: 1;
       }
     }
+
+    &.widget-social-button-circle {
+      border: 0 !important;
+      border-radius: 9999px !important;
+      overflow: hidden;
+    }
+
+
+    &.widget-social-button-circle:hover,
+    &.widget-social-button-circle.focus--demo,
+    &.widget-social-button-circle:focus,
+    &.widget-social-button-circle:focus-visible {
+      box-shadow: none !important;
+      border: 0 !important;
+    }
   }
 
   &-social-icon {
@@ -468,7 +513,7 @@
     object-position: center;
     max-width: 220px;
     max-height: 220px;
-    transition-property: transform, translate, scale, rotate;
+    transition-property: transform;
     transition-timing-function: var(--pa-ease, var(--default-transition-timingFunction));
     transition-duration: .3s;
 
@@ -489,7 +534,7 @@
       text-align: left;
       justify-content: start;
       color: rgb(var(--pa-color-primary));
-      transition-property: color, background-color, border-color, -webkit-text-decoration-color, text-decoration-color, fill, stroke, --pa-gradient-from, --pa-gradient-via, --pa-gradient-to;
+      transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
       transition-timing-function: var(--pa-ease, var(--default-transition-timingFunction));
       transition-duration: .2s;
 
diff --git a/src/ui/utils/index.ts b/src/ui/utils/index.ts
index 615c660..d272351 100644
--- a/src/ui/utils/index.ts
+++ b/src/ui/utils/index.ts
@@ -195,6 +195,10 @@ export function resolveCssVariableVariant<T extends readonly string[]>(
   }
   const index = Number(value)
 
+  if (variants.includes(value as T[number])) {
+    return value as T[number]
+  }
+
   return Number.isInteger(index) && index >= 0 && index < variants.length
     ? variants[index]
     : variants[0]
diff --git a/stories/02.GettingStarted.mdx b/stories/02.GettingStarted.mdx
index 8397f88..ba8da4d 100644
--- a/stories/02.GettingStarted.mdx
+++ b/stories/02.GettingStarted.mdx
@@ -160,16 +160,12 @@ You can configure social button appearance and footer behavior globally:
 
 ```javascript
 new PlusAuthWidget('#widget', {
-  socialLogin: {
-    buttonVariant: 'circle' // or 'block'
-  },
   footer: {
     enabled: false
   }
 }, window.PlusAuth)
 ```
 
-- `socialLogin.buttonVariant`: renders social buttons as `block` or `circle`
 - `footer.enabled`: hides or shows the footer locale/legal links area
 
 ## Development And Testing

From 2cf40e46b56e5d7983517d08181f8f7ceb702b4c Mon Sep 17 00:00:00 2001
From: Emir Yaman Gazaz <emiryaman.gazaz@ekinokssoftware.com>
Date: Fri, 17 Jul 2026 18:46:38 +0300
Subject: [PATCH 05/13] chore: lint

---
 index.html                                   |  5 ++-
 src/index.ts                                 | 17 ++++----
 src/ui/components/PSelect/PSelect.vue        |  2 +-
 src/ui/components/SocialConnectionButton.vue |  5 ++-
 src/ui/index.ts                              |  4 +-
 src/ui/widget.ts                             | 41 +++++++++-----------
 uno.config.ts                                | 37 +++++++++---------
 7 files changed, 53 insertions(+), 58 deletions(-)

diff --git a/index.html b/index.html
index eb9288b..bfc6781 100644
--- a/index.html
+++ b/index.html
@@ -17,14 +17,15 @@
             --pa-align-p: start;
             --pa-align-h1: center;
             --pa-align-h2: center;
-            --pa-input-radius: 12px;
+            --pa-input-radius: 0;
             --pa-input-border-w: 1px;
-            --pa-main-radius: 8px;
+            --pa-main-radius: 0;
             --pa-main-border-w: 1px;
             --pa-main-border-c: #e2e8f0;
             --pa-main-bg: #ffffff;
             --pa-widget-align: center;
             --pa-logo-align: center;
+            --pa-icon-variant: 1;
         }
         html, body {
             margin: 0;
diff --git a/src/index.ts b/src/index.ts
index f37d945..54c24e3 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -16,17 +16,16 @@ export default class PlusAuthWidget {
     settings: Partial<IWidgetSettings> = {},
     context: Partial<IPlusAuthContext>
   ) {
+    this.http = createFetchWrapper(settings.apiUrl);
 
-    this.http = createFetchWrapper(settings.apiUrl)
+    const reactiveSettings = reactive(settings);
 
-    const reactiveSettings = reactive(settings)
-
-    this.i18n = new Translator(reactiveSettings.locale)
-    if(context.params?.ui_locales){
-      const userPreferredLocales = context.params?.ui_locales?.split(' ') || []
+    this.i18n = new Translator(reactiveSettings.locale);
+    if (context.params?.ui_locales) {
+      const userPreferredLocales = context.params?.ui_locales?.split(' ') || [];
       for (let contextLocale of userPreferredLocales) {
-        if(this.i18n.locales[contextLocale]){
-          this.i18n.locale = contextLocale
+        if (this.i18n.locales[contextLocale]) {
+          this.i18n.locale = contextLocale;
           break;
         }
       }
@@ -34,7 +33,7 @@ export default class PlusAuthWidget {
     this._view = createWidget(container || document.body, reactiveSettings as any, context, {
       i18n: this.i18n,
       http: this.http,
-    })
+    });
   }
   get view(): IWidgetSettings {
     // expose settings rather than vue app
diff --git a/src/ui/components/PSelect/PSelect.vue b/src/ui/components/PSelect/PSelect.vue
index e0e5078..7faa251 100644
--- a/src/ui/components/PSelect/PSelect.vue
+++ b/src/ui/components/PSelect/PSelect.vue
@@ -137,7 +137,7 @@ function onBlur(e: FocusEvent) {
 
   if (
     pointerDownInside.value ||
-    (relatedTarget && inputRef.value?.contains(relatedTarget))
+    relatedTarget && inputRef.value?.contains(relatedTarget)
   ) {
     return;
   }
diff --git a/src/ui/components/SocialConnectionButton.vue b/src/ui/components/SocialConnectionButton.vue
index fcc79bd..8cb3577 100644
--- a/src/ui/components/SocialConnectionButton.vue
+++ b/src/ui/components/SocialConnectionButton.vue
@@ -37,9 +37,10 @@
 <script setup lang="ts">
 import { computed, onMounted, ref } from 'vue';
 
-import PBtn from './PBtn/PBtn.vue';
 import { resolveCssVariableVariant } from '../utils';
 
+import PBtn from './PBtn/PBtn.vue';
+
 const props = defineProps<{
   langKey: string,
   connection: string | {
@@ -59,7 +60,7 @@ const iconVariants = ['block', 'circle'] as const;
 const mode = ref<typeof iconVariants[number]>(resolveCssVariableVariant('--pa-icon-variant', iconVariants));
 
 onMounted(() => {
-  const element = btnRef.value ? (btnRef.value.$el || btnRef.value) : undefined;
+  const element = btnRef.value ? btnRef.value.$el || btnRef.value : undefined;
   mode.value = resolveCssVariableVariant('--pa-icon-variant', iconVariants, element);
 });
 
diff --git a/src/ui/index.ts b/src/ui/index.ts
index 7932f8c..7850376 100644
--- a/src/ui/index.ts
+++ b/src/ui/index.ts
@@ -6,7 +6,6 @@ import type { IPlusAuthContext, IWidgetSettings } from './interfaces';
 import { Theme } from './utils/theme';
 import { Translator, translatorKey } from './utils/translator';
 import { App } from './widget';
-import 'virtual:uno.css';
 
 export function createWidget(
   container: Element | string,
@@ -47,11 +46,12 @@ export function createWidget(
 
   const onDemoStateMessage = (event) => {
     if (event.data.type === 'SET_DEMO_STATES') {
-      const { hover, focus } = event.data.payload;
+      const { hover, focus, error } = event.data.payload;
       const all = targetElement.querySelectorAll('*');
       all.forEach((el) => {
         el.classList.toggle('pa__hover--demo', !!hover);
         el.classList.toggle('pa__focus--demo', !!focus);
+        el.classList.toggle('pa__error--demo', !!error);
       });
     }
   };
diff --git a/src/ui/widget.ts b/src/ui/widget.ts
index 8a12711..65335c4 100644
--- a/src/ui/widget.ts
+++ b/src/ui/widget.ts
@@ -1,8 +1,6 @@
 import { h, ref, onBeforeUnmount, inject, computed } from 'vue';
-import './styles/main.css'
+import './styles/main.css';
 
-import 'virtual:uno.css';
-import PFooter from './components/Footer.vue';
 import type { IWidgetSettings } from './interfaces';
 import { resolveView } from './utils/router';
 import type { Theme } from './utils/theme';
@@ -11,41 +9,38 @@ import { translatorKey } from './utils/translator';
 export function App(theme: Theme, settings: Partial<IWidgetSettings>): any {
   return {
     provide: {
-      theme
+      theme,
     },
-    setup(){
-      const isMobile = ref(false)
-      const i18n = inject(translatorKey) as Translator
+    setup() {
+      const isMobile = ref(false);
+      const i18n = inject(translatorKey) as Translator;
       function onResize() {
-        isMobile.value = window.innerWidth < 600
+        isMobile.value = window.innerWidth < 600;
       }
-      window.addEventListener('resize', onResize, { passive: true })
-      onResize()
+      window.addEventListener('resize', onResize, { passive: true });
+      onResize();
 
       onBeforeUnmount(() => {
         if (typeof window !== 'undefined') {
-          window.removeEventListener('resize', onResize)
+          window.removeEventListener('resize', onResize);
         }
-      })
+      });
 
       return {
-        resolvedView: computed(() => resolveView(settings.mode)) ,
+        resolvedView: computed(() => resolveView(settings.mode)),
         isMobile,
-        locale: i18n.localeRef
-      }
+        locale: i18n.localeRef,
+      };
     },
-    render(){
+    render() {
       return h(
         'div',
         {
           class: 'pa__widget',
-          key: this.locale
+          key: this.locale,
         },
-        this.resolvedView && h(
-          this.resolvedView
-        )
-      )
-    }
+        this.resolvedView && h(this.resolvedView)
+      );
+    },
   };
 }
-
diff --git a/uno.config.ts b/uno.config.ts
index 4ff9ef3..67db930 100644
--- a/uno.config.ts
+++ b/uno.config.ts
@@ -1,4 +1,4 @@
-import presetRemToPx from '@unocss/preset-rem-to-px'
+import presetRemToPx from '@unocss/preset-rem-to-px';
 import {
   defineConfig,
   presetIcons,
@@ -7,27 +7,26 @@ import {
   presetWebFonts,
   transformerDirectives,
   transformerVariantGroup,
-} from 'unocss'
+} from 'unocss';
 
 const colorRange = (name: string, prefix = 'pa-') => {
   const obj: Record<string, string> = {
-    DEFAULT: `rgb(var(--${prefix}color-${name}))`
-  }
-  const stops = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950]
-  stops.forEach(stop => {
-    obj[stop] = `rgb(var(--${prefix}color-${name}-${stop}))`
-  })
-  return obj
-}
+    DEFAULT: `rgb(var(--${prefix}color-${name}))`,
+  };
+  const stops = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
+  stops.forEach((stop) => {
+    obj[stop] = `rgb(var(--${prefix}color-${name}-${stop}))`;
+  });
+  return obj;
+};
 
 export default defineConfig({
-
   theme: {
     fontSize: {
-      base: '1.5rem'
+      base: '1.5rem',
     },
     width: {
-      '20': '20%'
+      '20': '20%',
     },
     colors: {
       primary: colorRange('primary'),
@@ -42,13 +41,13 @@ export default defineConfig({
   presets: [
     presetWind4({
       variablePrefix: 'pa-',
+      preflights: {
+        property: false,
+      },
     }),
     presetIcons(),
     presetTypography(),
-    presetRemToPx()
-  ],
-  transformers: [
-    transformerDirectives(),
-    transformerVariantGroup(),
+    presetRemToPx(),
   ],
-})
\ No newline at end of file
+  transformers: [transformerDirectives(), transformerVariantGroup()],
+});

From c052e5eb9f88d37e9d125f4dc6de9ca025a4580a Mon Sep 17 00:00:00 2001
From: Emir Yaman Gazaz <emiryaman.gazaz@ekinokssoftware.com>
Date: Wed, 22 Jul 2026 13:04:04 +0300
Subject: [PATCH 06/13] fix: no independent attribute to demo state

---
 src/ui/styles/main.css | 29 +++++++++++++++++++----------
 1 file changed, 19 insertions(+), 10 deletions(-)

diff --git a/src/ui/styles/main.css b/src/ui/styles/main.css
index 0405148..8adcfff 100644
--- a/src/ui/styles/main.css
+++ b/src/ui/styles/main.css
@@ -140,8 +140,7 @@
     border-width: var(--pa-input-border-w);
   }
 
-  :-moz-focusring,
-  .focus--demo {
+  :-moz-focusring {
     outline: auto;
   }
 
@@ -349,7 +348,8 @@
       @apply outline-none ring-2 ring-primary/20 border-primary/50;
     }
 
-    &.widget-social-button-circle {
+    &.pa__widget-social-button-circle,
+    &.pa__widget-social-button-square {
       width: 44px !important;
       height: 44px !important;
       min-width: 44px !important;
@@ -366,11 +366,11 @@
       outline: 0 !important;
       transition: none !important;
 
-      .btn__content {
+      .pa__btn__content {
         display: none;
       }
 
-      .widget-social-icon {
+      .pa__widget-social-icon {
         width: 44px;
         height: 44px;
         flex-shrink: 0;
@@ -390,17 +390,26 @@
       }
     }
 
-    &.widget-social-button-circle {
+    &.pa__widget-social-button-circle {
       border: 0 !important;
       border-radius: 9999px !important;
       overflow: hidden;
     }
 
+    &.pa__widget-social-button-square {
+      border: 0 !important;
+      border-radius: 0 !important;
+      overflow: hidden;
+    }
 
-    &.widget-social-button-circle:hover,
-    &.widget-social-button-circle.focus--demo,
-    &.widget-social-button-circle:focus,
-    &.widget-social-button-circle:focus-visible {
+    &.pa__widget-social-button-circle:hover,
+    &.pa__widget-social-button-circle.focus--demo,
+    &.pa__widget-social-button-circle:focus,
+    &.pa__widget-social-button-circle:focus-visible,
+    &.pa__widget-social-button-square:hover,
+    &.pa__widget-social-button-square.focus--demo,
+    &.pa__widget-social-button-square:focus,
+    &.pa__widget-social-button-square:focus-visible {
       box-shadow: none !important;
       border: 0 !important;
     }

From 41506fdd5d08b758b661692d34355d1a3785a49d Mon Sep 17 00:00:00 2001
From: Emir Yaman Gazaz <emiryaman.gazaz@ekinokssoftware.com>
Date: Wed, 29 Jul 2026 15:29:54 +0300
Subject: [PATCH 07/13] style: rounded borders for rounded icon variants

---
 src/ui/styles/main.css | 56 +++++++++++-------------------------------
 1 file changed, 14 insertions(+), 42 deletions(-)

diff --git a/src/ui/styles/main.css b/src/ui/styles/main.css
index 8adcfff..aabb0dc 100644
--- a/src/ui/styles/main.css
+++ b/src/ui/styles/main.css
@@ -297,7 +297,7 @@
       }
     }
 
-    &-social-icons {
+    .widget-social-icons {
       @apply py-2;
     }
   }
@@ -321,13 +321,13 @@
     }
   }
 
-  &-social-icons {
+  .widget-social-icons {
     @apply flex justify-center flex-wrap gap-2;
     padding-top: clamp(8px, 2.4vh, 16px);
     padding-bottom: clamp(8px, 2.4vh, 16px);
   }
 
-  &-social-button.btn {
+  .widget-social-button.btn {
     @apply capitalize justify-start gap-3 bg-white text-gray-800 border border-gray-300 whitespace-normal;
     box-shadow: 0 1px 2px rgb(15 23 42 / 0.06);
     word-break: auto-phrase;
@@ -349,7 +349,7 @@
     }
 
     &.pa__widget-social-button-circle,
-    &.pa__widget-social-button-square {
+    &.widget-social-button-circle {
       width: 44px !important;
       height: 44px !important;
       min-width: 44px !important;
@@ -360,62 +360,34 @@
       justify-content: center;
       padding: 0;
       gap: 0;
-      background: transparent !important;
-      box-shadow: none !important;
-      border: 0 !important;
-      outline: 0 !important;
-      transition: none !important;
 
       .pa__btn__content {
         display: none;
       }
 
-      .pa__widget-social-icon {
+      .pa__widget-social-icon,
+      .widget-social-icon {
         width: 44px;
         height: 44px;
         flex-shrink: 0;
         background-size: contain;
       }
-
-      &:hover,
-      &.hover--demo,
-      &:focus,
-      &.focus--demo,
-      &:focus-visible {
-        background: transparent !important;
-        box-shadow: none !important;
-        border: 0 !important;
-        outline: 0 !important;
-        opacity: 1;
-      }
     }
 
-    &.pa__widget-social-button-circle {
-      border: 0 !important;
+    &.pa__widget-social-button-circle,
+    &.widget-social-button-circle {
       border-radius: 9999px !important;
       overflow: hidden;
-    }
 
-    &.pa__widget-social-button-square {
-      border: 0 !important;
-      border-radius: 0 !important;
-      overflow: hidden;
-    }
-
-    &.pa__widget-social-button-circle:hover,
-    &.pa__widget-social-button-circle.focus--demo,
-    &.pa__widget-social-button-circle:focus,
-    &.pa__widget-social-button-circle:focus-visible,
-    &.pa__widget-social-button-square:hover,
-    &.pa__widget-social-button-square.focus--demo,
-    &.pa__widget-social-button-square:focus,
-    &.pa__widget-social-button-square:focus-visible {
-      box-shadow: none !important;
-      border: 0 !important;
+      .pa__widget-social-icon,
+      .widget-social-icon {
+        border-radius: 9999px !important;
+        overflow: hidden;
+      }
     }
   }
 
-  &-social-icon {
+  .widget-social-icon {
     @apply w-8 h-8 flex-shrink-0;
     background-repeat: no-repeat;
     background-position: center center;

From 8881a87f148601095318ffb9e8a8fa6bcd6d023f Mon Sep 17 00:00:00 2001
From: Emir Yaman Gazaz <emiryaman.gazaz@ekinokssoftware.com>
Date: Wed, 29 Jul 2026 15:30:20 +0300
Subject: [PATCH 08/13] chore: remove demo state setter from widget

---
 src/ui/components/PCheckBox/PCheckBox.css |  1 +
 src/ui/index.ts                           | 52 +++++++----------------
 2 files changed, 17 insertions(+), 36 deletions(-)

diff --git a/src/ui/components/PCheckBox/PCheckBox.css b/src/ui/components/PCheckBox/PCheckBox.css
index 2112da5..8cb6d35 100644
--- a/src/ui/components/PCheckBox/PCheckBox.css
+++ b/src/ui/components/PCheckBox/PCheckBox.css
@@ -75,6 +75,7 @@
             }
 
             &--error,
+            &.error--demo,
             &--dirty {
                 input[type=checkbox]:before {
                     border-color: currentColor;
diff --git a/src/ui/index.ts b/src/ui/index.ts
index 7850376..75f1660 100644
--- a/src/ui/index.ts
+++ b/src/ui/index.ts
@@ -1,11 +1,11 @@
-import { createApp, watch } from 'vue';
+import { createApp, watch } from "vue";
 
-import { installComponents } from './components';
-import { i18n } from './directives/i18n';
-import type { IPlusAuthContext, IWidgetSettings } from './interfaces';
-import { Theme } from './utils/theme';
-import { Translator, translatorKey } from './utils/translator';
-import { App } from './widget';
+import { installComponents } from "./components";
+import { i18n } from "./directives/i18n";
+import type { IPlusAuthContext, IWidgetSettings } from "./interfaces";
+import { Theme } from "./utils/theme";
+import { Translator, translatorKey } from "./utils/translator";
+import { App } from "./widget";
 
 export function createWidget(
   container: Element | string,
@@ -17,53 +17,33 @@ export function createWidget(
   const translator = inject.i18n || new Translator(settings.locale);
   const widget = createApp(App(theme, settings));
 
-  widget.directive('t', i18n);
+  widget.directive("t", i18n);
   widget.provide(translatorKey, translator);
-  widget.provide('http', inject.http);
-  widget.provide('context', context);
-  widget.provide('settings', settings);
+  widget.provide("http", inject.http);
+  widget.provide("context", context);
+  widget.provide("settings", settings);
   widget.config.globalProperties.$i18n = inject.i18n;
   widget.config.globalProperties.settings = settings;
 
   installComponents(widget);
 
   const targetElement =
-    typeof container === 'string' ? document.querySelector(container)! : container;
+    typeof container === "string" ? document.querySelector(container)! : container;
   const templates = {} as Record<string, Element>;
   const templateSelector = 'template[id^="pa-"], pa-template[id^="pa-"]';
 
   const registerTemplate = (temp: Element) => {
-    const key = temp.id.replace(/^pa-/, '');
+    const key = temp.id.replace(/^pa-/, "");
     if (!key || templates[key]) return;
     templates[key] = temp.cloneNode(true) as Element;
   };
 
   document.querySelectorAll(templateSelector).forEach(registerTemplate);
 
-  widget.provide('templates', templates);
+  widget.provide("templates", templates);
 
   widget.mount(targetElement);
 
-  const onDemoStateMessage = (event) => {
-    if (event.data.type === 'SET_DEMO_STATES') {
-      const { hover, focus, error } = event.data.payload;
-      const all = targetElement.querySelectorAll('*');
-      all.forEach((el) => {
-        el.classList.toggle('pa__hover--demo', !!hover);
-        el.classList.toggle('pa__focus--demo', !!focus);
-        el.classList.toggle('pa__error--demo', !!error);
-      });
-    }
-  };
-
-  window.addEventListener('message', onDemoStateMessage);
-
-  const originalUnmount = widget.unmount.bind(widget);
-  widget.unmount = (...args) => {
-    window.removeEventListener('message', onDemoStateMessage);
-    return originalUnmount(...args);
-  };
-
   watch(
     translator.localeRef,
     (locale) => {
@@ -71,12 +51,12 @@ export function createWidget(
         translator.locale = locale;
       }
       if (locale) {
-        document.querySelectorAll('[data-t]').forEach((el) => {
+        document.querySelectorAll("[data-t]").forEach((el) => {
           el.textContent = translator.t((el as HTMLElement).dataset.t);
         });
       }
     },
-    { immediate: true, flush: 'post' }
+    { immediate: true, flush: "post" }
   );
 
   return widget;

From b9916348ff2b7722363c9b5e2ab6ce24155f7c10 Mon Sep 17 00:00:00 2001
From: Emir Yaman Gazaz <emiryaman.gazaz@ekinokssoftware.com>
Date: Wed, 29 Jul 2026 15:32:30 +0300
Subject: [PATCH 09/13] chore: lint

---
 src/ui/index.ts | 32 ++++++++++++++++----------------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/src/ui/index.ts b/src/ui/index.ts
index 75f1660..91e2853 100644
--- a/src/ui/index.ts
+++ b/src/ui/index.ts
@@ -1,11 +1,11 @@
-import { createApp, watch } from "vue";
+import { createApp, watch } from 'vue';
 
-import { installComponents } from "./components";
-import { i18n } from "./directives/i18n";
-import type { IPlusAuthContext, IWidgetSettings } from "./interfaces";
-import { Theme } from "./utils/theme";
-import { Translator, translatorKey } from "./utils/translator";
-import { App } from "./widget";
+import { installComponents } from './components';
+import { i18n } from './directives/i18n';
+import type { IPlusAuthContext, IWidgetSettings } from './interfaces';
+import { Theme } from './utils/theme';
+import { Translator, translatorKey } from './utils/translator';
+import { App } from './widget';
 
 export function createWidget(
   container: Element | string,
@@ -17,30 +17,30 @@ export function createWidget(
   const translator = inject.i18n || new Translator(settings.locale);
   const widget = createApp(App(theme, settings));
 
-  widget.directive("t", i18n);
+  widget.directive('t', i18n);
   widget.provide(translatorKey, translator);
-  widget.provide("http", inject.http);
-  widget.provide("context", context);
-  widget.provide("settings", settings);
+  widget.provide('http', inject.http);
+  widget.provide('context', context);
+  widget.provide('settings', settings);
   widget.config.globalProperties.$i18n = inject.i18n;
   widget.config.globalProperties.settings = settings;
 
   installComponents(widget);
 
   const targetElement =
-    typeof container === "string" ? document.querySelector(container)! : container;
+    typeof container === 'string' ? document.querySelector(container)! : container;
   const templates = {} as Record<string, Element>;
   const templateSelector = 'template[id^="pa-"], pa-template[id^="pa-"]';
 
   const registerTemplate = (temp: Element) => {
-    const key = temp.id.replace(/^pa-/, "");
+    const key = temp.id.replace(/^pa-/, '');
     if (!key || templates[key]) return;
     templates[key] = temp.cloneNode(true) as Element;
   };
 
   document.querySelectorAll(templateSelector).forEach(registerTemplate);
 
-  widget.provide("templates", templates);
+  widget.provide('templates', templates);
 
   widget.mount(targetElement);
 
@@ -51,12 +51,12 @@ export function createWidget(
         translator.locale = locale;
       }
       if (locale) {
-        document.querySelectorAll("[data-t]").forEach((el) => {
+        document.querySelectorAll('[data-t]').forEach((el) => {
           el.textContent = translator.t((el as HTMLElement).dataset.t);
         });
       }
     },
-    { immediate: true, flush: "post" }
+    { immediate: true, flush: 'post' }
   );
 
   return widget;

From 2107d87cb3289812040087c920c64e7b996daa98 Mon Sep 17 00:00:00 2001
From: Emir Yaman Gazaz <emiryaman.gazaz@ekinokssoftware.com>
Date: Wed, 29 Jul 2026 15:55:03 +0300
Subject: [PATCH 10/13] chore: cleanup

---
 index.html | 21 ---------------------
 1 file changed, 21 deletions(-)

diff --git a/index.html b/index.html
index bfc6781..105148f 100644
--- a/index.html
+++ b/index.html
@@ -6,27 +6,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
     <title>Title</title>
     <style id="dev-style">
-        :root {
-            --pa-font-family: Tahoma, Verdana, sans-serif;
-            --pa-fs-p: 16px;
-            --pa-fs-h1: 22px;
-            --pa-fs-h2: 14px;
-            --pa-fw-p: 400;
-            --pa-fw-h1: 500;
-            --pa-fw-h2: 400;
-            --pa-align-p: start;
-            --pa-align-h1: center;
-            --pa-align-h2: center;
-            --pa-input-radius: 0;
-            --pa-input-border-w: 1px;
-            --pa-main-radius: 0;
-            --pa-main-border-w: 1px;
-            --pa-main-border-c: #e2e8f0;
-            --pa-main-bg: #ffffff;
-            --pa-widget-align: center;
-            --pa-logo-align: center;
-            --pa-icon-variant: 1;
-        }
         html, body {
             margin: 0;
             height: 100%;

From 40a9c332ba5192d1ea89fe720d307df352998c1e Mon Sep 17 00:00:00 2001
From: Emir Yaman Gazaz <emiryaman.gazaz@ekinokssoftware.com>
Date: Wed, 29 Jul 2026 22:26:52 +0300
Subject: [PATCH 11/13] chore: remove unnecessary !important tags

---
 .storybook/preview.css                      |  2 +-
 src/ui/components/PAlert/PAlert.css         |  7 +++----
 src/ui/components/PBtn/PBtn.css             | 14 ++++++--------
 src/ui/components/PCheckBox/PCheckBox.css   |  6 ++----
 src/ui/components/PCodeInput/PCodeInput.css |  2 +-
 src/ui/components/PSelect/PSelect.css       | 10 +++++-----
 6 files changed, 18 insertions(+), 23 deletions(-)

diff --git a/.storybook/preview.css b/.storybook/preview.css
index d2e9fcd..79ab5c4 100644
--- a/.storybook/preview.css
+++ b/.storybook/preview.css
@@ -38,7 +38,7 @@ html, body, #storybook-root, #wrapper {
   .hide-controls-column > div > table  {
     & > thead > tr > th:last-child,
     & > tbody > tr:not(:first-child) > td:last-child {
-      display: none !important;
+      display: none;
     }
 
     & > thead > tr th:nth-child(1),
diff --git a/src/ui/components/PAlert/PAlert.css b/src/ui/components/PAlert/PAlert.css
index a98cb9f..adc89ad 100644
--- a/src/ui/components/PAlert/PAlert.css
+++ b/src/ui/components/PAlert/PAlert.css
@@ -12,7 +12,7 @@
         }
 
         &.alert--text {
-            background-color: transparent !important;
+            background-color: transparent;
             color: inherit;
         }
 
@@ -25,8 +25,7 @@
             font-size: 32px;
 
             &:hover,
-            .hover--demo
-            {
+            &.input--hovered {
                 background-color: rgba(184, 184, 184, 0.30);
                 cursor: pointer;
             }
@@ -39,6 +38,6 @@
     }
 
     .input:not(.input--error) + .alert {
-        @apply mt-0 !important;
+        @apply mt-0;
     }
 }
diff --git a/src/ui/components/PBtn/PBtn.css b/src/ui/components/PBtn/PBtn.css
index 965491e..ee1fe3a 100644
--- a/src/ui/components/PBtn/PBtn.css
+++ b/src/ui/components/PBtn/PBtn.css
@@ -16,12 +16,11 @@
         transition-duration: 150ms;
 
         &:hover,
-        &.hover--demo {
+        &.btn--hovered {
             opacity: 0.8;
         }
 
-        &:focus,
-        &.focus--demo {
+        &:focus {
             --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
             --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
             box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
@@ -35,7 +34,7 @@
             color: #5f6368;
             display: flex;
             flex: 1 0 auto;
-            min-width: 100% !important;
+            min-width: 100%;
         }
 
         &--variant-flat {
@@ -50,7 +49,7 @@
             box-shadow: 0 3px 6px rgb(0 0 0 / 0.16), 0 3px 6px rgb(0 0 0 / 0.23);
 
             &:hover,
-            &.hover--demo {
+            &.btn--hovered {
                 box-shadow: 0 5px 10px rgb(0 0 0 / 0.18), 0 4px 6px rgb(0 0 0 / 0.22);
             }
         }
@@ -76,9 +75,8 @@
             opacity: 0.72;
 
             &:hover,
-            &.hover--demo,
-            &:focus,
-            &.focus--demo {
+            &.btn--hovered,
+            &:focus {
                 opacity: 1;
             }
         }
diff --git a/src/ui/components/PCheckBox/PCheckBox.css b/src/ui/components/PCheckBox/PCheckBox.css
index 8cb6d35..710eefc 100644
--- a/src/ui/components/PCheckBox/PCheckBox.css
+++ b/src/ui/components/PCheckBox/PCheckBox.css
@@ -7,7 +7,6 @@
                 @apply ring-0 border-0 items-center outline-none;
                 
                 &:focus,
-                .focus--demo,
                 &:focus-within {
                     @apply ring-0 outline-none;
                 }
@@ -38,8 +37,8 @@
                 &:focus,
                 &:focus-visible,
                 &:active {
-                    outline: none !important;
-                    box-shadow: none !important;
+                    outline: none;
+                    box-shadow: none;
                 }
             }
 
@@ -75,7 +74,6 @@
             }
 
             &--error,
-            &.error--demo,
             &--dirty {
                 input[type=checkbox]:before {
                     border-color: currentColor;
diff --git a/src/ui/components/PCodeInput/PCodeInput.css b/src/ui/components/PCodeInput/PCodeInput.css
index 323eb9a..5f49355 100644
--- a/src/ui/components/PCodeInput/PCodeInput.css
+++ b/src/ui/components/PCodeInput/PCodeInput.css
@@ -6,7 +6,7 @@
             @apply border-0 ring-0 flex flex-row justify-between;
 
             &:hover,
-            &.hover--demo {
+            &.input--hovered {
                 background-color: transparent;
                 border-color: transparent;
             }
diff --git a/src/ui/components/PSelect/PSelect.css b/src/ui/components/PSelect/PSelect.css
index 00af4c2..5586237 100644
--- a/src/ui/components/PSelect/PSelect.css
+++ b/src/ui/components/PSelect/PSelect.css
@@ -95,8 +95,8 @@
                 &:-webkit-autofill:hover,
                 &:-webkit-autofill:focus,
                 &:-webkit-autofill:active {
-                    font-family: var(--pa-font-family) !important;
-                    -webkit-box-shadow: 0 0 0 30px white inset !important;
+                    font-family: var(--pa-font-family);
+                    -webkit-box-shadow: 0 0 0 30px white inset;
                 }
             }
         }
@@ -106,13 +106,13 @@
         .input {
             &-select {
                 &-item {
-                    font-size: 12px !important;
-                    min-height: 16px !important;
+                    font-size: 12px;
+                    min-height: 16px;
                     padding: 0px 8px;
                 }
 
                 &-value {
-                    font-size: 12px !important;
+                    font-size: 12px;
                     min-height: 24px;
                     padding-left: 8px;
                 }

From ad64275fc901ba046f7e5960d82de11070173612 Mon Sep 17 00:00:00 2001
From: Emir Yaman Gazaz <emiryaman.gazaz@ekinokssoftware.com>
Date: Wed, 29 Jul 2026 22:28:52 +0300
Subject: [PATCH 12/13] chore: hover tracker

---
 src/ui/composables/hover.ts | 40 +++++++++++++++++++++++++++++++++++++
 1 file changed, 40 insertions(+)
 create mode 100644 src/ui/composables/hover.ts

diff --git a/src/ui/composables/hover.ts b/src/ui/composables/hover.ts
new file mode 100644
index 0000000..8a39d08
--- /dev/null
+++ b/src/ui/composables/hover.ts
@@ -0,0 +1,40 @@
+import { computed } from 'vue'
+
+import { getCurrentInstanceName } from '../utils/current_instance';
+import { EventProp } from '../utils/helpers';
+import { propsFactory } from '../utils/props_factory';
+
+import { useProxiedModel } from './proxied_model'
+
+
+export interface HoverProps {
+  hovered: boolean
+  'onUpdate:hovered': ((hovered: boolean) => any) | undefined
+}
+
+export const makeHoverProps = propsFactory({
+  hovered: Boolean,
+  'onUpdate:hovered': EventProp<[boolean]>(),
+}, 'hover')
+
+export function useHover(
+  props: HoverProps,
+  name = getCurrentInstanceName()
+) {
+  const isHovered = useProxiedModel(props, 'hovered')
+  const hoverClasses = computed(() => {
+    return {
+      [`${name}--hovered`]: isHovered.value,
+    }
+  })
+
+  function mouseenter() {
+    isHovered.value = true
+  }
+
+  function mouseleave() {
+    isHovered.value = false
+  }
+
+  return { hoverClasses, isHovered, mouseenter, mouseleave }
+}

From 32523221790989ccdda2a3b8b14677f78be05d9f Mon Sep 17 00:00:00 2001
From: Emir Yaman Gazaz <emiryaman.gazaz@ekinokssoftware.com>
Date: Thu, 30 Jul 2026 18:35:02 +0300
Subject: [PATCH 13/13] chore(css): cleanup

---
 src/ui/components/PTextField/PTextField.css | 67 +++++++++------------
 src/ui/styles/main.css                      | 44 ++++++--------
 2 files changed, 47 insertions(+), 64 deletions(-)

diff --git a/src/ui/components/PTextField/PTextField.css b/src/ui/components/PTextField/PTextField.css
index 37680d8..27dc845 100644
--- a/src/ui/components/PTextField/PTextField.css
+++ b/src/ui/components/PTextField/PTextField.css
@@ -16,7 +16,7 @@
       --input-ring-color: #d1d5db;
 
       &:hover,
-      &.hover--demo {
+      &.input--hovered {
         border-color: #9ca3af;
         background-color: rgba(0, 0, 0, 0.01);
       }
@@ -25,11 +25,11 @@
     input.text-field {
       @apply flex-1 bg-transparent px-3 min-w-0 text-black outline-none;
       height: 45px;
-      font: var(--pa-fw-p) var(--pa-fs-p) var(--pa-font-family) !important;
+      font: var(--pa-fw-p) var(--pa-fs-p) var(--pa-font-family);
       border-radius: inherit;
 
       &:-webkit-autofill {
-        -webkit-box-shadow: 0 0 0 30px white inset !important;
+        -webkit-box-shadow: 0 0 0 30px white inset;
       }
 
       & + .btn {
@@ -48,11 +48,10 @@
         opacity: 1;
 
         &:hover,
-        &.hover--demo {
+        &.input--hovered {
           background-color: rgba(0, 0, 0, 0.04);
         }
-        &:focus,
-        &.focus--demo {
+        &:focus {
           background-color: rgba(0, 0, 0, 0.06);
           box-shadow: inset 0 0 0 1px rgb(var(--pa-color-primary) / 0.35);
         }
@@ -70,12 +69,11 @@
         transform: translateY(-50%);
       }
 
-      &:has(.input--label):not(.input--focused):not(.focus--demo):not(.input--has-value) input.text-field::placeholder {
+      &:has(.input--label):not(.input--focused):not(.input--has-value) input.text-field::placeholder {
         opacity: 0;
       }
 
       &.input--focused,
-      &.focus--demo,
       &.input--has-value {
         .input--label {
           top: -12px;
@@ -91,7 +89,7 @@
         min-height: 54px;
 
         &:hover,
-        &.hover--demo {
+        &.input--hovered {
           background-color: #e5e7eb;
         }
       }
@@ -107,12 +105,11 @@
         height: 54px;
       }
 
-      &:has(.input--label):not(.input--focused):not(.focus--demo):not(.input--has-value) input.text-field::placeholder {
+      &:has(.input--label):not(.input--focused):not(.input--has-value) input.text-field::placeholder {
         opacity: 0;
       }
 
       &.input--focused,
-      &.focus--demo,
       &.input--has-value {
         .input--label {
           top: 5px;
@@ -146,7 +143,7 @@
         min-height: 46px;
 
         &:hover,
-        &.hover--demo {
+        &.input--hovered {
           background-color: transparent;
           border-bottom-color: #9ca3af;
         }
@@ -163,12 +160,11 @@
         @apply px-0;
       }
 
-      &:has(.input--label):not(.input--focused):not(.focus--demo):not(.input--has-value) input.text-field::placeholder {
+      &:has(.input--label):not(.input--focused):not(.input--has-value) input.text-field::placeholder {
         opacity: 0;
       }
 
       &.input--focused,
-      &.focus--demo,
       &.input--has-value {
         .input--label {
           top: -18px;
@@ -183,15 +179,13 @@
         border-radius: var(--pa-input-radius);
         color: rgb(var(--pa-color-primary));
 
-        &:focus,
-        &.focus--demo {
+        &:focus {
           box-shadow: none;
           outline: none;
         }
       }
 
-      &.input--focused:not(.input--error),
-      &.focus--demo:not(.input--error) {
+      &.input--focused:not(.input--error) {
         outline: none;
 
         .input--wrap {
@@ -210,10 +204,9 @@
         }
 
         .input--label {
-          color: rgb(var(--pa-color-primary)) !important;
+          color: rgb(var(--pa-color-primary));
         }
       }
-      &.error--demo,
       &.input--error {
         .input--wrap {
           border-bottom-color: rgb(var(--pa-color-error));
@@ -226,7 +219,7 @@
         }
 
         .input--label {
-          color: rgb(var(--pa-color-error)) !important;
+          color: rgb(var(--pa-color-error));
         }
       }
     }
@@ -239,7 +232,7 @@
         box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
 
         &:hover,
-        &.hover--demo {
+        &.input--hovered {
           background-color: #f9fafb;
           box-shadow: 0 4px 8px 0 rgb(0 0 0 / 0.12), 0 2px 4px -1px rgb(0 0 0 / 0.12);
         }
@@ -256,12 +249,11 @@
         height: 54px;
       }
 
-      &:has(.input--label):not(.input--focused):not(.focus--demo):not(.input--has-value) input.text-field::placeholder {
+      &:has(.input--label):not(.input--focused):not(.input--has-value) input.text-field::placeholder {
         opacity: 0;
       }
 
       &.input--focused,
-      &.focus--demo,
       &.input--has-value {
         .input--label {
           top: 5px;
@@ -283,8 +275,7 @@
         background-color: #f3f4f6;
       }
 
-      &.input--focused:not(.input--error),
-      &.focus--demo:not(.input--error) {
+      &.input--focused:not(.input--error) {
         .input--wrap {
           box-shadow: 0 0 0 1px rgb(var(--pa-color-primary)), 0 1px 3px 0 rgb(0 0 0 / 0.1);
         }
@@ -312,8 +303,7 @@
         color: rgb(var(--pa-color-primary));
       }
 
-      &.input--focused:not(.input--error),
-      &.focus--demo:not(.input--error) {
+      &.input--focused:not(.input--error) {
         .input--wrap {
           border-color: transparent;
           box-shadow: none;
@@ -332,7 +322,7 @@
         padding-top: 0;
 
         &:hover,
-        &.hover--demo {
+        &.input--hovered {
           background-color: #fff;
           border-color: #9ca3af;
         }
@@ -371,8 +361,7 @@
         border: 0;
       }
 
-      &.input--focused:not(.input--error),
-      &.focus--demo:not(.input--error) {
+      &.input--focused:not(.input--error) {
         .input--wrap {
           border-color: rgb(var(--pa-color-primary));
           box-shadow: 0 0 0 1px rgb(var(--pa-color-primary));
@@ -413,10 +402,7 @@
       font-size: 12px;
       font-family: var(--pa-font-family);
     }
-    &.error--demo,
     &--error {
-      color: rgb(var(--pa-color-error)) !important;
-
       .input--wrap {
         border-color: rgb(var(--pa-color-error));
         box-shadow: 0 0 0 1px rgb(var(--pa-color-error));
@@ -424,12 +410,15 @@
       }
 
       .input--label {
-        color: rgb(var(--pa-color-error)) !important;
+        color: rgb(var(--pa-color-error));
+      }
+
+      .input-details {
+        color: rgb(var(--pa-color-error));
       }
     }
 
-    &--focused:not(.input--error):not(.input--variant-underlined),
-    &.focus--demo:not(.input--error):not(.input--variant-underlined) {
+    &--focused:not(.input--error):not(.input--variant-underlined) {
       .input--wrap {
         border-color: rgb(var(--pa-color-primary));
         box-shadow: 0 0 0 1px rgb(var(--pa-color-primary));
@@ -437,7 +426,7 @@
       }
 
       .input--label {
-        color: rgb(var(--pa-color-primary)) !important;
+        color: rgb(var(--pa-color-primary));
       }
     }
 
@@ -449,8 +438,6 @@
       }
     }
 
-    &--variant-underlined.focus--demo,
-    &--variant-underlined .focus--demo,
     &--variant-underlined input.text-field:focus,
     &--variant-underlined input.text-field:focus-visible,
     &--variant-underlined .input--wrap:focus,
diff --git a/src/ui/styles/main.css b/src/ui/styles/main.css
index aabb0dc..8573568 100644
--- a/src/ui/styles/main.css
+++ b/src/ui/styles/main.css
@@ -38,13 +38,12 @@
     transition-duration: .2s;
 
     &:hover,
-    &.hover--demo {
+    &.hovered {
       filter: brightness(1.1);
       text-decoration: underline;
     }
 
-    &:focus,
-    &.focus--demo {
+    &:focus {
       outline: 2px solid rgba(var(--pa-color-primary), 0.5);
       outline-offset: 2px;
       border-radius: 2px;
@@ -337,23 +336,22 @@
     transition-duration: .2s;
   
     &:hover,
-    &.hover--demo {
+    &.btn--hovered {
       @apply bg-gray-50 border-gray-400;
       box-shadow: 0 3px 8px rgb(15 23 42 / 0.1);
       opacity: 1;
     }
   
-    &:focus,
-    &.focus--demo {
+    &:focus {
       @apply outline-none ring-2 ring-primary/20 border-primary/50;
     }
 
     &.pa__widget-social-button-circle,
     &.widget-social-button-circle {
-      width: 44px !important;
-      height: 44px !important;
-      min-width: 44px !important;
-      min-height: 44px !important;
+      width: 44px;
+      height: 44px;
+      min-width: 44px;
+      min-height: 44px;
       max-width: 44px;
       max-height: 44px;
       flex: 0 0 44px;
@@ -376,12 +374,12 @@
 
     &.pa__widget-social-button-circle,
     &.widget-social-button-circle {
-      border-radius: 9999px !important;
+      border-radius: 9999px;
       overflow: hidden;
 
       .pa__widget-social-icon,
       .widget-social-icon {
-        border-radius: 9999px !important;
+        border-radius: 9999px;
         overflow: hidden;
       }
     }
@@ -412,8 +410,8 @@
 
     .input {
       &--wrap {
-        border: none !important;
-        border-width: 0px !important;
+        border: none;
+        border-width: 0px;
         border-radius: var(--pa-input-radius);
       }
     }
@@ -422,21 +420,20 @@
       @apply flex gap-4 p-0 px-2 list-none my-0;
 
       a {
-        color: #757575 !important;
+        color: #757575;
         display: inline-block;
         transition: all .2s;
         padding-inline: 4px;
         padding-block: 2px;
 
         &:hover,
-        &.hover--demo {
-          color: #202124 !important;
+        &.hovered {
+          color: #202124;
           background-color: rgba(0, 0, 0, 0.05);
           border-radius: 4px;
         }
 
-        &:focus,
-        &.focus--demo {
+        &:focus {
           outline: none;
           background-color: rgba(0, 0, 0, 0.08);
           border-radius: 4px;
@@ -499,7 +496,7 @@
     transition-duration: .3s;
 
     &:hover,
-    &.hover--demo {
+    &.hovered {
       transform: scale(1.02);
     }
   }
@@ -520,7 +517,7 @@
       transition-duration: .2s;
 
       &:hover,
-      &.hover--demo {
+      &.btn--hovered {
         filter: brightness(0.9);
       }
     }
@@ -542,13 +539,12 @@
     transition-duration: .2s;
 
     &:hover,
-    &.hover--demo {
+    &.btn--hovered {
       background-color: #f8f9fa;
       border-color: #d1d5db;
     }
 
-    &:focus,
-    &.focus--demo {
+    &:focus {
       outline: none;
       border-color: rgb(var(--pa-color-primary));
       box-shadow: 0 0 0 1px rgb(var(--pa-color-primary));