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

package/shared/pages/LoginPage/components/login/Login.vue

@@ -6,7 +6,22 @@
     :subtitle="subtitle || $t('LOGIN.SUBTITLE')"
     class="vc-login-page"
   >
-    <VcForm @submit.prevent="login">
+    <!-- SSO Providers -->
+    <div
+      v-if="loginProviders && loginProviders.length"
+      class="vc-login-page__providers"
+    >
+      <ExternalProviders :providers="loginProviders" />
+
+      <div class="vc-login-page__separator-line">
+        {{ $t("LOGIN.OR") }}
+      </div>
+    </div>
+
+    <VcForm
+      @submit.prevent="login"
+      class="tw-gap-5"
+    >
       <Field
         v-slot="{ errorMessage, handleChange, errors }"
         :label="$t('LOGIN.FIELDS.LOGIN.LABEL')"
@@ -17,7 +32,6 @@
         <VcInput
           ref="loginField"
           v-model="form.username"
-          class="tw-mb-4"
           :label="$t('LOGIN.FIELDS.LOGIN.LABEL')"
           :placeholder="$t('LOGIN.FIELDS.LOGIN.PLACEHOLDER')"
           required
@@ -27,19 +41,6 @@
         />
       </Field>
 
-      <div class="tw-flex tw-items-center tw-justify-between tw-mb-2">
-        <label class="tw-text-sm tw-font-semibold">
-          {{ $t("LOGIN.FIELDS.PASSWORD.LABEL") }}
-        </label>
-        <VcButton
-          variant="link"
-          type="button"
-          @click="goToForgotPassword"
-        >
-          {{ $t("LOGIN.FORGOT_PASSWORD_BUTTON") }}
-        </VcButton>
-      </div>
-
       <Field
         v-slot="{ errorMessage, handleChange, errors }"
         :label="$t('LOGIN.FIELDS.PASSWORD.LABEL')"
@@ -50,7 +51,7 @@
         <VcInput
           ref="passwordField"
           v-model="form.password"
-          class="tw-mb-6"
+          :label="$t('LOGIN.FIELDS.PASSWORD.LABEL')"
           :placeholder="$t('LOGIN.FIELDS.PASSWORD.PLACEHOLDER')"
           type="password"
           required
@@ -70,25 +71,22 @@
       >
         {{ $t("LOGIN.BUTTON") }}
       </VcButton>
-    </VcForm>
 
-    <!-- SSO Providers -->
-    <div
-      v-if="loginProviders && loginProviders.length"
-      class="vc-login-page__separator"
-    >
-      <div class="vc-login-page__separator-line">
-        {{ $t("LOGIN.OR") }}
-      </div>
-
-      <ExternalProviders :providers="loginProviders" />
-    </div>
+      <VcButton
+        variant="link"
+        class="tw-w-full tw-justify-center"
+        type="button"
+        @click="goToForgotPassword"
+      >
+        {{ $t("LOGIN.FORGOT_PASSWORD_BUTTON") }}
+      </VcButton>
+    </VcForm>
 
     <!-- Plugin extension point -->
     <ExtensionPoint
       name="auth:after-form"
       separator
-      separator-class="tw-border-t tw-border-[color:var(--login-separator)] tw-border-solid tw-mb-4"
+      separator-class="tw-border-t tw-border-[color:var(--login-separator)] tw-border-solid tw-pb-5"
       wrapper-class="vc-login-page__separator"
     />
 
@@ -197,14 +195,14 @@ logger.debug("Init login-page");
 
 .vc-login-page {
   &__separator {
-    @apply tw-mt-6;
+    @apply tw-mt-5;
   }
 
   &__separator-line {
     @apply tw-flex tw-items-center tw-text-center tw-text-xs tw-text-[color:var(--login-separator-text)]
       before:tw-content-[''] before:tw-flex-1 before:tw-border-b before:tw-border-b-[color:var(--login-separator)] before:tw-mr-3
       after:tw-content-[''] after:tw-flex-1 after:tw-border-b after:tw-border-b-[color:var(--login-separator)] after:tw-ml-3;
-    @apply tw-mb-4;
+    @apply tw-my-4;
   }
 }
 </style>

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

@@ -229,8 +229,7 @@ onMounted(() => {
     @apply tw-absolute tw-opacity-0 tw-w-0 tw-h-0;
 
     &:focus-visible + .vc-checkbox__custom-input {
-      @apply tw-ring-[3px] tw-outline-none;
-      ring-color: var(--checkbox-focus-ring-color);
+      @apply tw-ring-[3px] tw-ring-[color:var(--checkbox-focus-ring-color)] tw-outline-none;
     }
 
     &:not(:disabled):not(:checked) + .vc-checkbox__custom-input:hover {
@@ -303,9 +302,8 @@ onMounted(() => {
 
   &--error {
     .vc-checkbox__custom-input {
-      @apply tw-ring-[3px];
+      @apply tw-ring-[3px] tw-ring-[color:var(--checkbox-error-ring-color)];
       border-color: var(--checkbox-error-border-color);
-      ring-color: var(--checkbox-error-ring-color);
     }
   }
 

package/ui/components/molecules/vc-file-upload/vc-file-upload.vue

@@ -181,9 +181,9 @@ function dragLeave() {
   --file-upload-icon-color: var(--neutrals-400);
   --file-upload-text-color: var(--neutrals-400);
   --file-upload-error-color: var(--danger-500);
-  --file-upload-error-ring-color: rgba(239, 68, 68, 0.2);
+  --file-upload-error-ring-color: var(--danger-100);
   --file-upload-background-color: transparent;
-  --file-upload-focus-ring-color: rgba(59, 130, 246, 0.3);
+  --file-upload-focus-ring-color: var(--primary-100);
 }
 
 .vc-file-upload {
@@ -222,7 +222,7 @@ function dragLeave() {
     }
 
     &:focus-within {
-      @apply tw-border-primary-500
+      @apply tw-border-[color:var(--file-upload-border-color-dragover)]
         tw-ring-[3px] tw-ring-[color:var(--file-upload-focus-ring-color)]
         tw-outline-none;
     }

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

@@ -454,7 +454,7 @@ function onSearch(event: Event) {
       tw-border-[color:var(--multivalue-search-border-color)]
       tw-bg-transparent tw-rounded-[var(--multivalue-border-radius)] tw-h-8 tw-leading-8
       tw-outline-none tw-mb-2 tw-px-2 tw-text-sm
-      focus:tw-border-[color:var(--multivalue-border-color-focus)] focus:tw-ring-[2px] focus:tw-ring-[color:var(--multivalue-focus-ring-color)]
+      focus:tw-border-[color:var(--multivalue-border-color-focus)] focus:tw-ring-[3px] focus:tw-ring-[color:var(--multivalue-focus-ring-color)]
       tw-transition-[color,box-shadow] tw-duration-150 tw-ease-in-out;
   }
 

package/ui/components/molecules/vc-radio-button/vc-radio-button.vue

@@ -172,12 +172,12 @@ function onChange() {
     }
 
     &:focus-visible {
-      box-shadow: 0 0 0 3px var(--radio-focus-ring-color);
+      @apply tw-ring-[3px] tw-ring-[color:var(--radio-focus-ring-color)] tw-outline-none;
     }
 
     &.vc-radio-button_error {
       border-color: var(--radio-error);
-      box-shadow: 0 0 0 3px var(--radio-error-ring-color);
+      @apply tw-ring-[3px] tw-ring-[color:var(--radio-error-ring-color)];
     }
   }
 

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

@@ -750,7 +750,7 @@ watch(
 
   &__search-input {
     @apply tw-w-full tw-box-border tw-border tw-border-solid tw-border-[color:var(--select-search-border-color)] tw-bg-transparent tw-rounded-[var(--select-border-radius)] tw-h-8 tw-leading-8 tw-outline-none tw-mb-2 tw-px-2 tw-text-sm
-      focus:tw-border-[color:var(--select-border-color-focus)] focus:tw-ring-[2px] focus:tw-ring-[color:var(--select-focus-ring-color)]
+      focus:tw-border-[color:var(--select-border-color-focus)] focus:tw-ring-[3px] focus:tw-ring-[color:var(--select-focus-ring-color)]
       tw-transition-[color,box-shadow] tw-duration-150 tw-ease-in-out;
   }
 

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

@@ -96,7 +96,7 @@ const buttonsList = computed(() => ({
   --slider-button-text: var(--primary-500);
   --slider-button-text-disabled: var(--neutrals-400);
   --slider-button-border-radius: 6px;
-  --slider-focus-ring-color: rgba(59, 130, 246, 0.3);
+  --slider-focus-ring-color: var(--primary-100);
 }
 
 .vc-slider {

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

@@ -181,7 +181,7 @@ function onInput(e: Event) {
     }
 
     &: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 {
@@ -209,7 +209,7 @@ function onInput(e: Event) {
 
   &--error {
     .vc-switch__slider {
-      box-shadow: 0 0 0 3px var(--switch-error-ring-color);
+      @apply tw-ring-[3px] tw-ring-[color:var(--switch-error-ring-color)];
     }
   }
 

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

@@ -4,7 +4,7 @@
     :class="{
       'vc-textarea_error': invalid,
       'vc-textarea_disabled': resolvedDisabled,
-      'vc-textarea_focus': isFocused,
+      'vc-textarea_focused': isFocused,
     }"
   >
     <!-- Textarea label -->
@@ -209,12 +209,18 @@ 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;

package/ui/components/organisms/vc-app/_internal/app-bar/components/AppHubContent.test.ts

@@ -66,7 +66,6 @@ function mountHub(options?: { apps?: AppDescriptor[]; widgets?: registerAppBarWi
 
 describe("AppHubContent", () => {
   beforeEach(() => {
-    localStorage.removeItem("vc_app_hub_applications_view_mode");
     document.body.innerHTML = "";
   });
 
@@ -135,8 +134,8 @@ describe("AppHubContent", () => {
     expect(wrapper.text()).toContain("Import App");
   });
 
-  it("uses tiles mode automatically when application count is high", () => {
-    const apps = Array.from({ length: 14 }, (_, index) => ({
+  it("always renders applications in tiles mode", () => {
+    const apps = Array.from({ length: 3 }, (_, index) => ({
       id: `app-${index + 1}`,
       title: `App ${index + 1}`,
     })) as AppDescriptor[];
@@ -157,26 +156,6 @@ describe("AppHubContent", () => {
     expect(wrapper.findAll(".app-hub-content__item--app")).toHaveLength(120);
   });
 
-  it("persists manually selected application view mode", async () => {
-    const apps = Array.from({ length: 3 }, (_, index) => ({
-      id: `app-${index + 1}`,
-      title: `App ${index + 1}`,
-    })) as AppDescriptor[];
-
-    const wrapper = mountHub({ apps });
-
-    expect(wrapper.find(".app-hub-content__apps-list--tiles").exists()).toBe(false);
-
-    await wrapper.find("[data-test-id='app-hub-view-tiles']").trigger("click");
-
-    expect(wrapper.find(".app-hub-content__apps-list--tiles").exists()).toBe(true);
-
-    wrapper.unmount();
-
-    const remounted = mountHub({ apps });
-    expect(remounted.find(".app-hub-content__apps-list--tiles").exists()).toBe(true);
-  });
-
   it("renders separate scroll containers for applications and widgets", () => {
     const wrapper = mountHub({
       apps: [{ id: "commerce", title: "Commerce Manager" } as AppDescriptor],