@vc-shell/framework 1.2.4-beta.2 → 1.2.4-beta.4

package/ui/components/molecules/vc-switch/vc-switch.vue

@@ -1,47 +1,89 @@
 <template>
-  <div class="vc-switch">
+  <div
+    class="vc-switch"
+    :class="{
+      'vc-switch--disabled': resolvedDisabled,
+      'vc-switch--error': invalid,
+    }"
+  >
     <!-- Switch label -->
     <VcLabel
       v-if="label"
       class="vc-switch__label"
       :required="required"
+      :error="invalid"
     >
       <span>{{ label }}</span>
+      <template
+        v-if="labelTooltip"
+        #tooltip
+        >{{ labelTooltip }}</template
+      >
     </VcLabel>
-    <div class="vc-switch__container">
-      <label>
+
+    <div class="vc-switch__track-wrapper">
+      <label class="vc-switch__track-label">
         <input
           :id="switchId"
           type="checkbox"
           class="vc-switch__input"
           role="switch"
           :checked="invertValue(modelValue)"
-          :disabled="disabled"
+          :disabled="resolvedDisabled"
           :aria-checked="!!invertValue(modelValue)"
+          :aria-invalid="invalid || undefined"
+          :aria-describedby="ariaDescribedBy"
           tabindex="0"
           @input="onInput"
         />
         <span class="vc-switch__slider"></span>
       </label>
-      <VcHint
-        v-if="tooltip"
-        class="vc-switch__hint"
-      >
-        {{ tooltip }}
-      </VcHint>
     </div>
+
+    <Transition
+      name="slide-up"
+      mode="out-in"
+    >
+      <div v-if="invalid && errorMessage">
+        <slot name="error">
+          <VcHint
+            :id="errorId"
+            class="vc-switch__error"
+            :error="true"
+          >
+            {{ errorMessage }}
+          </VcHint>
+        </slot>
+      </div>
+      <div v-else-if="hintText">
+        <VcHint
+          :id="hintId"
+          class="vc-switch__hint"
+        >
+          {{ hintText }}
+        </VcHint>
+      </div>
+    </Transition>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { useId, computed } from "vue";
-import { VcLabel, VcHint } from "./../../";
-export interface Props {
+import { computed } from "vue";
+import { VcLabel, VcHint } from "@ui/components";
+import { useFormField } from "@ui/composables/useFormField";
+import type { IFormFieldProps } from "@ui/types";
+
+export interface Props extends IFormFieldProps {
   modelValue: boolean | undefined;
-  disabled?: boolean;
+  /** Hint text displayed below the switch */
+  hint?: string;
+  /**
+   * @deprecated Use `hint` instead. Kept for backward compatibility.
+   * @override Overrides IFormFieldProps.tooltip — here it acts as hint text, not label tooltip.
+   */
   tooltip?: string;
-  required?: boolean;
-  label?: string;
+  /** Tooltip text shown on the label's info icon */
+  labelTooltip?: string;
   trueValue?: boolean;
   falseValue?: boolean;
 }
@@ -57,8 +99,10 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits<Emits>();
 
-const uid = useId();
-const switchId = computed(() => `vc-switch-${uid}`);
+const { fieldId: switchId, errorId, hintId, invalid, resolvedDisabled, ariaDescribedBy } = useFormField(props);
+
+// `tooltip` prop is kept for backward compat — treat as hint text
+const hintText = computed(() => props.hint || props.tooltip);
 
 const invertValue = (value: boolean | undefined) => {
   if (typeof value !== "undefined") {
@@ -75,47 +119,74 @@ function onInput(e: Event) {
 <style lang="scss">
 :root {
   --switch-width: 36px;
-  --switch-height: 22px;
+  --switch-height: 20px;
   --switch-thumb-size: 16px;
-  --switch-translate: 14px;
+  --switch-translate: 16px;
 
   --switch-active-color: var(--primary-500);
   --switch-inactive-color: var(--neutrals-300);
+  --switch-hover-active-color: var(--primary-600);
+  --switch-hover-inactive-color: var(--neutrals-400);
   --switch-thumb-color: var(--additional-50);
-  --switch-focus-ring-color: rgba(59, 130, 246, 0.3);
-  --switch-transition: all 0.2s ease-in-out;
+  --switch-thumb-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  --switch-focus-ring-color: var(--primary-100);
+  --switch-error-ring-color: var(--danger-100);
+  --switch-error-border-color: var(--danger-500);
+  --switch-border-radius: 9999px;
+  --switch-disabled-opacity: 0.5;
 }
 
 .vc-switch {
+  @apply tw-flex tw-flex-col;
+
   &__label {
     @apply tw-mb-2;
   }
 
-  &__container {
-    @apply tw-relative tw-inline-block tw-w-[var(--switch-width)] tw-h-[var(--switch-height)];
+  &__track-wrapper {
+    @apply tw-inline-flex tw-items-center;
+  }
+
+  &__track-label {
+    @apply tw-relative tw-inline-block tw-cursor-pointer;
+    width: var(--switch-width);
+    height: var(--switch-height);
   }
 
   &__hint {
-    @apply tw-mt-2 tw-w-max;
+    @apply tw-mt-1;
+  }
+
+  &__error {
+    @apply tw-mt-1 [--hint-error-color:var(--danger-500)];
   }
 
   &__input {
     @apply tw-w-0 tw-h-0 tw-opacity-0 tw-cursor-pointer;
 
     &:checked + .vc-switch__slider {
-      @apply tw-bg-[color:var(--switch-active-color)];
+      background-color: var(--switch-active-color);
 
       &::before {
         @apply [transform:translateX(var(--switch-translate))_translateY(-50%)];
       }
     }
 
+    &:checked:not(:disabled) + .vc-switch__slider:hover {
+      background-color: var(--switch-hover-active-color);
+    }
+
+    &:not(:checked):not(:disabled) + .vc-switch__slider:hover {
+      background-color: var(--switch-hover-inactive-color);
+    }
+
     &:focus-visible + .vc-switch__slider {
-      box-shadow: 0 0 0 3px var(--switch-focus-ring-color);
+      @apply tw-ring-[3px] tw-ring-[color:var(--switch-focus-ring-color)] tw-outline-none;
     }
 
     &:disabled + .vc-switch__slider {
-      @apply tw-bg-[color:var(--switch-inactive-color)] tw-cursor-not-allowed tw-opacity-50;
+      @apply tw-cursor-not-allowed;
+      opacity: var(--switch-disabled-opacity);
     }
 
     &:disabled {
@@ -124,11 +195,39 @@ function onInput(e: Event) {
   }
 
   &__slider {
-    @apply tw-absolute tw-inset-0 tw-bg-[color:var(--switch-inactive-color)] tw-rounded-full tw-transition tw-duration-200 tw-cursor-pointer;
+    @apply tw-absolute tw-inset-0 tw-rounded-[var(--switch-border-radius)] tw-cursor-pointer;
+    background-color: var(--switch-inactive-color);
+    transition: background-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
 
     &::before {
-      @apply tw-absolute tw-left-[3px] tw-top-1/2 tw-transition tw-duration-200 tw-bg-[color:var(--switch-thumb-color)] tw-rounded-full tw-w-[var(--switch-thumb-size)] tw-h-[var(--switch-thumb-size)] [content:''] [transform:translateX(0)_translateY(-50%)];
+      @apply tw-absolute tw-left-[2px] tw-top-1/2 tw-rounded-full tw-w-[var(--switch-thumb-size)] tw-h-[var(--switch-thumb-size)] [content:''] [transform:translateX(0)_translateY(-50%)];
+      background-color: var(--switch-thumb-color);
+      box-shadow: var(--switch-thumb-shadow);
+      transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
     }
   }
+
+  &--error {
+    .vc-switch__slider {
+      @apply tw-ring-[3px] tw-ring-[color:var(--switch-error-ring-color)];
+    }
+  }
+
+  &--disabled {
+    @apply tw-pointer-events-none;
+  }
+
+  .slide-up-enter-active,
+  .slide-up-leave-active {
+    @apply tw-transition-all tw-duration-[250ms] tw-ease-out;
+  }
+
+  .slide-up-enter-from {
+    @apply tw-opacity-0 tw-translate-y-[5px];
+  }
+
+  .slide-up-leave-to {
+    @apply tw-opacity-0 tw--translate-y-[5px];
+  }
 }
 </style>

package/ui/components/molecules/vc-textarea/index.ts

@@ -1 +1 @@
-export { default as VcTextarea } from "./vc-textarea.vue";
+export { default as VcTextarea } from "@ui/components/molecules/vc-textarea/vc-textarea.vue";

package/ui/components/molecules/vc-textarea/vc-textarea.stories.ts

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/vue3-vite";
-import { VcTextarea } from "./";
+import { VcTextarea } from "@ui/components/molecules/vc-textarea";
 import { ref } from "vue";
 
 /**

package/ui/components/molecules/vc-textarea/vc-textarea.vue

@@ -2,9 +2,9 @@
   <div
     class="vc-textarea"
     :class="{
-      'vc-textarea_error': error || !!errorMessage,
-      'vc-textarea_disabled': disabled,
-      'vc-textarea_focus': isFocused,
+      'vc-textarea_error': invalid,
+      'vc-textarea_disabled': resolvedDisabled,
+      'vc-textarea_focused': isFocused,
     }"
   >
     <!-- Textarea label -->
@@ -15,7 +15,7 @@
       :required="required"
       :multilanguage="multilanguage"
       :current-language="currentLanguage"
-      :error="error || !!errorMessage"
+      :error="invalid"
     >
       <span>{{ label }}</span>
       <template
@@ -34,9 +34,9 @@
         class="vc-textarea__field"
         :placeholder="placeholder"
         :value="modelValue"
-        :disabled="disabled"
+        :disabled="resolvedDisabled"
         :maxlength="maxlength"
-        :aria-invalid="(error || !!errorMessage) || undefined"
+        :aria-invalid="invalid || undefined"
         :aria-describedby="ariaDescribedBy"
         :aria-labelledby="label ? labelId : undefined"
         tabindex="0"
@@ -46,35 +46,49 @@
       ></textarea>
     </div>
 
-    <slot
-      v-if="error || !!errorMessage"
-      name="error"
+    <Transition
+      name="slide-up"
+      mode="out-in"
     >
-      <VcHint
-        :id="errorId"
-        class="vc-textarea__error"
-      >
-        {{ errorMessage }}
-      </VcHint>
-    </slot>
+      <div v-if="invalid && errorMessage">
+        <slot name="error">
+          <VcHint
+            v-if="errorMessage"
+            :id="errorId"
+            class="vc-textarea__hint-error"
+            :error="true"
+          >
+            {{ errorMessage }}
+          </VcHint>
+        </slot>
+      </div>
+      <div v-else>
+        <slot name="hint">
+          <VcHint
+            v-if="hint"
+            :id="hintId"
+            class="vc-textarea__desc"
+          >
+            {{ hint }}
+          </VcHint>
+        </slot>
+      </div>
+    </Transition>
   </div>
 </template>
 <!-- eslint-disable @typescript-eslint/no-explicit-any -->
 <script lang="ts" setup>
-import { computed, ref, useId } from "vue";
-import { VcHint, VcLabel } from "./../../";
+import { ref } from "vue";
+import { VcHint, VcLabel } from "@ui/components";
+import { useFormField } from "@ui/composables/useFormField";
+import type { IFormFieldProps } from "@ui/types";
 
-export interface Props {
+export interface Props extends IFormFieldProps {
   placeholder?: string;
   modelValue?: string;
-  required?: boolean;
-  disabled?: boolean;
-  label?: string;
-  tooltip?: string;
-  name?: string;
+  /** Helper text displayed below the textarea */
+  hint?: string;
   maxlength?: string;
-  error?: boolean;
-  errorMessage?: string;
   multilanguage?: boolean;
   currentLanguage?: string;
 }
@@ -85,6 +99,7 @@ export interface Emits {
 
 defineSlots<{
   error: (props: any) => any;
+  hint: (props: any) => any;
 }>();
 
 const props = withDefaults(defineProps<Props>(), {
@@ -94,21 +109,11 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits<Emits>();
 
+const { fieldId: textareaId, labelId, errorId, hintId, invalid, resolvedDisabled, ariaDescribedBy } = useFormField(props);
+
 const textareaRef = ref<HTMLTextAreaElement>();
 const isFocused = ref(false);
 
-// Accessibility IDs
-const uid = useId();
-const textareaId = computed(() => `vc-textarea-${uid}`);
-const labelId = computed(() => `vc-textarea-${uid}-label`);
-const errorId = computed(() => `vc-textarea-${uid}-error`);
-
-const ariaDescribedBy = computed(() => {
-  const ids: string[] = [];
-  if ((props.error || props.errorMessage) && props.errorMessage) ids.push(errorId.value);
-  return ids.length ? ids.join(" ") : undefined;
-});
-
 function onInput(e: Event) {
   const newValue = (e.target as HTMLInputElement).value;
   emit("update:modelValue", newValue);
@@ -131,11 +136,11 @@ defineExpose({
   // Error
   --textarea-text-color-error: var(--danger-500);
   --textarea-border-color-error: var(--danger-500);
-  --textarea-error-ring-color: rgba(239, 68, 68, 0.2);
+  --textarea-error-ring-color: var(--danger-100);
 
   // Focus
   --textarea-border-color-focus: var(--primary-500);
-  --textarea-focus-ring-color: rgba(59, 130, 246, 0.3);
+  --textarea-focus-ring-color: var(--primary-100);
 
   // Disabled
   --textarea-disabled-text-color: var(--neutrals-500);
@@ -168,8 +173,12 @@ defineExpose({
     @apply tw-text-[color:var(--textarea-text-color-error)];
   }
 
-  &__error {
-    @apply tw-text-[color:var(--textarea-border-color-error)] tw-mt-1;
+  &__hint-error {
+    @apply tw-mt-1 [--hint-error-color:var(--textarea-text-color-error)];
+  }
+
+  &__desc {
+    @apply tw-text-[color:var(--textarea-placeholder-color)] tw-text-sm tw-mt-1;
   }
 
   &__field {
@@ -200,10 +209,29 @@ defineExpose({
     @apply tw-cursor-not-allowed tw-pointer-events-none;
   }
 
-  &_focus &__field-wrapper {
+  &_focused &__field-wrapper {
     @apply tw-border-[color:var(--textarea-border-color-focus)]
       tw-ring-[3px] tw-ring-[color:var(--textarea-focus-ring-color)]
       tw-outline-none;
   }
+
+  /* Respond to aria-invalid on child textarea (future-proof for form systems) */
+  &__field-wrapper:has(textarea[aria-invalid="true"]) {
+    @apply tw-border-[color:var(--textarea-border-color-error)]
+      tw-ring-[3px] tw-ring-[color:var(--textarea-error-ring-color)];
+  }
+
+  .slide-up-enter-active,
+  .slide-up-leave-active {
+    @apply tw-transition-all tw-duration-[250ms] tw-ease-out;
+  }
+
+  .slide-up-enter-from {
+    @apply tw-opacity-0 tw-translate-y-[5px];
+  }
+
+  .slide-up-leave-to {
+    @apply tw-opacity-0 tw--translate-y-[5px];
+  }
 }
 </style>

package/ui/components/molecules/vc-toast/index.ts

@@ -1 +1 @@
-export { default as VcToast } from "./vc-toast.vue";
+export { default as VcToast } from "@ui/components/molecules/vc-toast/vc-toast.vue";

package/ui/components/molecules/vc-toast/vc-toast.stories.ts

@@ -1,7 +1,7 @@
 import { ref, defineComponent } from "vue";
 import type { Meta, StoryObj } from "@storybook/vue3-vite";
 import { VcToast } from ".";
-import { notification } from "../../../../shared/components/notifications";
+import { notification } from "@shared/components/notifications";
 
 /**
  * `VcToast` is a component for displaying toast notifications to users.
@@ -99,7 +99,7 @@ The component can be used directly as shown in the examples, but for application
 use the notification service:
 
 \`\`\`js
-import { notification } from "framework/shared/components/notifications";
+import { notification } from "@shared/components/notifications";
 
 // Show a notification
 notification("Default notification message");

package/ui/components/molecules/vc-toast/vc-toast.vue

@@ -4,16 +4,17 @@
     ref="nodeRef"
     class="vc-notification"
     :class="[`vc-notification--${position || 'top-center'}`, `vc-notification--${type || 'default'}`]"
+    :role="type === 'error' ? 'alert' : 'status'"
     @mouseenter="onMouseEnter"
     @mouseleave="onMouseLeave"
   >
-    <div class="vc-notification__type-indicator"></div>
     <div class="vc-notification__content-wrapper">
       <VcIcon
         :icon="types[type ?? 'default']?.icon"
         :style="{ color: types[type ?? 'default']?.color }"
         size="l"
         class="vc-notification__icon"
+        aria-hidden="true"
       ></VcIcon>
       <div
         v-if="typeof content === 'string'"
@@ -25,18 +26,25 @@
         <component :is="content"></component>
       </div>
     </div>
-    <VcIcon
-      icon="material-close"
-      class="vc-notification__dismiss-icon"
-      size="s"
+    <button
+      type="button"
+      class="vc-notification__dismiss-button"
+      aria-label="Dismiss notification"
       @click.stop="handleClose"
-    ></VcIcon>
+      @keydown.escape="handleClose"
+    >
+      <VcIcon
+        icon="lucide-x"
+        size="s"
+        aria-hidden="true"
+      ></VcIcon>
+    </button>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { Content, NotificationType, NotificationPosition } from "../../../../shared/components/notifications";
-import { VcIcon } from "../..";
+import { Content, NotificationType, NotificationPosition } from "@shared/components/notifications";
+import { VcIcon } from "@ui/components";
 import { Ref, onMounted, onBeforeUnmount, ref, toRefs, watch } from "vue";
 
 export interface Props {
@@ -58,10 +66,10 @@ const emit = defineEmits<{
 const props = defineProps<Props>();
 
 const types: Record<NotificationType, { icon: string; color: string }> = {
-  default: { icon: "material-info", color: "var(--notification-info)" },
-  success: { icon: "material-check_circle", color: "var(--notification-success)" },
-  error: { icon: "material-error", color: "var(--notification-error)" },
-  warning: { icon: "material-warning", color: "var(--notification-warning)" },
+  default: { icon: "lucide-info", color: "var(--notification-info)" },
+  success: { icon: "lucide-check-circle", color: "var(--notification-success)" },
+  error: { icon: "lucide-alert-circle", color: "var(--notification-error)" },
+  warning: { icon: "lucide-alert-triangle", color: "var(--notification-warning)" },
 };
 const { timeout } = toRefs(props);
 
@@ -154,10 +162,11 @@ function onMouseLeave() {
 :root {
   /* Main colors and styles */
   --notification-background: var(--additional-50);
-  --notification-border-radius: var(--multivalue-border-radius);
+  --notification-border-radius: 6px;
   --notification-border-color: var(--neutrals-200);
-  --notification-dismiss-color: var(--secondary-500);
-  --notification-content-color: var(--neutrals-600);
+  --notification-dismiss-color: var(--neutrals-400);
+  --notification-dismiss-hover-color: var(--neutrals-600);
+  --notification-content-color: var(--neutrals-800);
 
   /* Color indicators for types */
   --notification-warning: var(--warning-500);
@@ -166,25 +175,30 @@ function onMouseLeave() {
   --notification-info: var(--info-500);
 
   /* Effects */
-  --notification-shadow-color: var(--neutrals-300);
-  --notification-shadow: 2px 2px 11px rgb(from var(--notification-shadow-color) r g b / 40%);
-  --notification-hover-shadow: 2px 2px 15px rgb(from var(--notification-shadow-color) r g b / 60%);
+  --notification-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+  --notification-hover-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
 
   /* Variables for animation */
   --notification-animation-duration: 300ms;
-  --notification-animation-timing: cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Spring animation */
+  --notification-animation-timing: cubic-bezier(0.175, 0.885, 0.32, 1.275);
   --notification-slide-distance: 30px;
 
-  /* Sizes */
-  --notification-indicator-width: 4px;
+  /* Focus */
+  --notification-focus-ring-color: var(--primary-100);
+
+  /* Left accent border */
+  --notification-accent-width: 3px;
 }
 
 .vc-notification {
   @apply tw-flex tw-items-center tw-box-border tw-relative;
-  @apply tw-bg-[color:var(--notification-background)] tw-border tw-border-solid tw-border-[color:var(--notification-border-color)];
-  @apply tw-rounded-[var(--notification-border-radius)] tw-overflow-hidden tw-py-2 tw-px-4;
+  @apply tw-border tw-border-solid tw-overflow-hidden tw-py-3 tw-px-4;
   @apply tw-max-w-[600px] tw-justify-between;
-  @apply tw-shadow-[var(--notification-shadow)];
+  background-color: var(--notification-background);
+  border-color: var(--notification-border-color);
+  border-radius: var(--notification-border-radius);
+  box-shadow: var(--notification-shadow);
+  border-left: var(--notification-accent-width) solid var(--notification-info);
   pointer-events: all;
 
   /* Base animation properties */
@@ -201,33 +215,21 @@ function onMouseLeave() {
     box-shadow: var(--notification-hover-shadow);
   }
 
-  /* Notification type indicator */
-  &__type-indicator {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: var(--notification-indicator-width);
-    height: 100%;
-    background-color: var(--notification-info);
-    border-top-left-radius: var(--notification-border-radius);
-    border-bottom-left-radius: var(--notification-border-radius);
+  /* Type-specific left accent border */
+  &--success {
+    border-left-color: var(--notification-success);
   }
 
-  /* Styles for different types */
-  &--success .vc-notification__type-indicator {
-    background-color: var(--notification-success);
+  &--error {
+    border-left-color: var(--notification-error);
   }
 
-  &--error .vc-notification__type-indicator {
-    background-color: var(--notification-error);
+  &--warning {
+    border-left-color: var(--notification-warning);
   }
 
-  &--warning .vc-notification__type-indicator {
-    background-color: var(--notification-warning);
-  }
-
-  &--default .vc-notification__type-indicator {
-    background-color: var(--notification-info);
+  &--default {
+    border-left-color: var(--notification-info);
   }
 
   /* Animations for different positions */
@@ -256,26 +258,32 @@ function onMouseLeave() {
   }
 
   &__content-wrapper {
-    @apply tw-flex tw-items-center tw-flex-row;
-    padding-left: calc(var(--notification-indicator-width) + 8px);
+    @apply tw-flex tw-items-center tw-flex-row tw-gap-2;
   }
 
   &__icon {
-    @apply tw-mr-2;
+    @apply tw-shrink-0;
   }
 
   &__content {
-    @apply tw-text-[color:var(--notification-content-color)] tw-whitespace-pre-line tw-overflow-auto tw-text-sm tw-leading-5;
+    @apply tw-whitespace-pre-line tw-overflow-auto tw-text-sm tw-leading-5;
     @apply tw-max-h-[100px];
+    color: var(--notification-content-color);
   }
 
-  &__dismiss-icon {
-    @apply tw-cursor-pointer tw-text-[color:var(--notification-dismiss-color)] tw-ml-2;
-    @apply tw-transition-all tw-duration-200 tw-ease-in-out;
+  &__dismiss-button {
+    @apply tw-cursor-pointer tw-ml-2
+      tw-border-none tw-bg-transparent tw-outline-none tw-p-1 tw-rounded tw-flex tw-items-center tw-justify-center;
+    @apply tw-transition-colors tw-duration-150;
+    color: var(--notification-dismiss-color);
 
     &:hover {
-      @apply tw-text-[color:var(--secondary-600)];
-      transform: rotate(90deg);
+      color: var(--notification-dismiss-hover-color);
+    }
+
+    &:focus-visible {
+      @apply tw-ring-[3px] tw-outline-none;
+      ring-color: var(--notification-focus-ring-color);
     }
   }