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

package/ui/components/atoms/vc-button/vc-button.vue

@@ -1,51 +1,57 @@
 <template>
   <button
     :class="buttonClass"
-    :disabled="disabled"
+    :type="type"
+    :disabled="disabled || loading"
+    :aria-label="ariaLabel"
+    :aria-busy="loading || undefined"
     @click="onClick"
   >
+    <!-- Loading: spinner replaces icon; shown inline next to text (shadcn pattern) -->
     <VcIcon
-      v-if="icon"
+      v-if="loading"
+      icon="lucide-loader-2"
+      class="vc-button__icon tw-animate-spin"
+      :size="iconSize"
+    />
+    <VcIcon
+      v-else-if="icon"
       :class="['vc-button__icon', iconClass]"
       :icon="icon"
       :size="iconSize"
-    ></VcIcon>
-    <p
+    />
+    <span
       v-if="$slots['default']"
       class="vc-button__title"
     >
-      <slot></slot>
-    </p>
+      <slot />
+    </span>
   </button>
 </template>
 <!-- eslint-disable @typescript-eslint/no-explicit-any -->
 <script lang="ts" setup>
-import { computed, type Component } from "vue";
+import { computed, inject, type Component } from "vue";
 import { VcIcon } from "./../vc-icon";
+import { ButtonGroupKey, type ButtonVariant, type ButtonSize } from "./types";
+
+// Normalize legacy size aliases to canonical shadcn names
+const SIZE_ALIAS: Record<string, string> = {
+  base: "default",
+  xs: "sm",
+};
+
 export interface Props {
   icon?: string | Component;
   iconClass?: string;
   iconSize?: InstanceType<typeof VcIcon>["$props"]["size"];
-  variant?: "primary" | "secondary";
+  variant?: ButtonVariant;
   disabled?: boolean;
-  size?: "xs" | "sm" | "base";
-  /**
-   * @deprecated Use `size` instead
-   * Whether the button is small
-   * */
-  small?: boolean;
-  /**
-   * @deprecated Use `variant` instead
-   * Whether the button is outlined
-   * */
-  outline?: boolean;
+  size?: ButtonSize;
   selected?: boolean;
   text?: boolean;
-  /**
-   * @deprecated Use `variant` instead
-   * Whether the button is raised
-   * */
-  raised?: boolean;
+  type?: "button" | "submit" | "reset";
+  loading?: boolean;
+  ariaLabel?: string;
 }
 
 export interface Emits {
@@ -58,7 +64,9 @@ export interface Emits {
 const props = withDefaults(defineProps<Props>(), {
   variant: "primary",
   iconSize: "s",
-  size: "base",
+  size: "default",
+  type: "button",
+  loading: false,
 });
 
 const emit = defineEmits<Emits>();
@@ -67,24 +75,29 @@ defineSlots<{
   default: (props?: any) => any;
 }>();
 
+const group = inject(ButtonGroupKey, null);
+
+const effectiveSize = computed(() => {
+  const raw = group?.size?.value ?? props.size;
+  return SIZE_ALIAS[raw as string] ?? raw;
+});
+
 const buttonClass = computed(() => {
   return [
     "vc-button",
     {
       [`vc-button-${props.variant}`]: props.variant,
-      [`vc-button_${props.size}`]: props.size,
-      // "vc-button_small": props.small,
-      // "vc-button_outline": props.outline,
+      [`vc-button_${effectiveSize.value}`]: effectiveSize.value,
       "vc-button_selected": props.selected,
       "vc-button_text": props.text,
-      "vc-button_disabled": props.disabled,
-      // "vc-button_raised": props.raised,
+      "vc-button_disabled": props.disabled || props.loading,
+      "vc-button_loading": props.loading,
     },
   ];
 });
 
 function onClick(e: Event): void {
-  if (!props.disabled) {
+  if (!props.disabled && !props.loading) {
     e.preventDefault();
     emit("click", e);
   }
@@ -93,17 +106,19 @@ function onClick(e: Event): void {
 
 <style lang="scss">
 :root {
-  --button-primary-background-color: var(--primary-500);
-  --button-primary-background-color-hover: var(--primary-600);
-  --button-primary-background-color-disabled: var(--primary-300);
+  // PRIMARY (WCAG AA: --primary-700 yields 4.77:1 contrast with white)
+  --button-primary-background-color: var(--primary-700);
+  --button-primary-background-color-hover: var(--primary-700);
+  --button-primary-background-color-disabled: var(--primary-700);
   --button-primary-text-color: var(--additional-50);
   --button-primary-text-color-disabled: var(--additional-50);
-  --button-primary-border-color: var(--primary-500);
-  --button-primary-border-color-hover: var(--primary-600);
-  --button-primary-border-color-disabled: var(--primary-300);
+  --button-primary-border-color: var(--primary-700);
+  --button-primary-border-color-hover: var(--primary-700);
+  --button-primary-border-color-disabled: var(--primary-700);
 
+  // SECONDARY (preserved from original)
   --button-secondary-background-color: var(--additional-50);
-  --button-secondary-background-color-hover: var(--primary-100);
+  --button-secondary-background-color-hover: var(--primary-50);
   --button-secondary-background-color-disabled: var(--additional-50);
   --button-secondary-text-color: var(--neutrals-700);
   --button-secondary-text-color-disabled: var(--neutrals-400);
@@ -111,84 +126,180 @@ function onClick(e: Event): void {
   --button-secondary-border-color-hover: var(--secondary-400);
   --button-secondary-border-color-disabled: var(--secondary-300);
 
-  --button-border-radius: 4px;
+  // DANGER
+  --button-danger-background-color: var(--danger-700);
+  --button-danger-background-color-hover: var(--danger-700);
+  --button-danger-background-color-disabled: var(--danger-700);
+  --button-danger-text-color: var(--additional-50);
+  --button-danger-text-color-disabled: var(--additional-50);
+  --button-danger-border-color: var(--danger-700);
+  --button-danger-border-color-hover: var(--danger-700);
+  --button-danger-border-color-disabled: var(--danger-700);
+
+  // WARNING (dark text on light background for contrast)
+  --button-warning-background-color: var(--warning-500);
+  --button-warning-background-color-hover: var(--warning-500);
+  --button-warning-background-color-disabled: var(--warning-500);
+  --button-warning-text-color: var(--neutrals-800);
+  --button-warning-text-color-disabled: var(--neutrals-800);
+  --button-warning-border-color: var(--warning-500);
+  --button-warning-border-color-hover: var(--warning-500);
+  --button-warning-border-color-disabled: var(--warning-500);
+
+  // SUCCESS
+  --button-success-background-color: var(--success-700);
+  --button-success-background-color-hover: var(--success-700);
+  --button-success-background-color-disabled: var(--success-700);
+  --button-success-text-color: var(--additional-50);
+  --button-success-text-color-disabled: var(--additional-50);
+  --button-success-border-color: var(--success-700);
+  --button-success-border-color-hover: var(--success-700);
+  --button-success-border-color-disabled: var(--success-700);
+
+  // INFO
+  --button-info-background-color: var(--info-700);
+  --button-info-background-color-hover: var(--info-700);
+  --button-info-background-color-disabled: var(--info-700);
+  --button-info-text-color: var(--additional-50);
+  --button-info-text-color-disabled: var(--additional-50);
+  --button-info-border-color: var(--info-700);
+  --button-info-border-color-hover: var(--info-700);
+  --button-info-border-color-disabled: var(--info-700);
+
+  // OUTLINE (transparent bg, border from secondary)
+  --button-outline-background-color: transparent;
+  --button-outline-background-color-hover: var(--primary-50);
+  --button-outline-background-color-disabled: transparent;
+  --button-outline-text-color: var(--neutrals-700);
+  --button-outline-text-color-disabled: var(--neutrals-400);
+  --button-outline-border-color: var(--secondary-300);
+  --button-outline-border-color-hover: var(--secondary-400);
+  --button-outline-border-color-disabled: var(--secondary-300);
 
-  --button-padding-hor: 14px;
-  --button-padding-vert: 10px;
+  // GHOST (no border, no bg)
+  --button-ghost-background-color: transparent;
+  --button-ghost-background-color-hover: var(--primary-50);
+  --button-ghost-background-color-disabled: transparent;
+  --button-ghost-text-color: var(--neutrals-700);
+  --button-ghost-text-color-disabled: var(--neutrals-400);
+  --button-ghost-border-color: transparent;
+  --button-ghost-border-color-hover: transparent;
+  --button-ghost-border-color-disabled: transparent;
 
-  --button-padding-hor-small: 12px;
-  --button-padding-vert-small: 8px;
+  // LINK (text link style)
+  --button-link-background-color: transparent;
+  --button-link-background-color-hover: transparent;
+  --button-link-background-color-disabled: transparent;
+  --button-link-text-color: var(--primary-700);
+  --button-link-text-color-disabled: var(--neutrals-400);
+  --button-link-border-color: transparent;
+  --button-link-border-color-hover: transparent;
+  --button-link-border-color-disabled: transparent;
 
-  --button-padding-vert-extra-small: 5px;
-  --button-padding-hor-extra-small: 12px;
+  // FOCUS RING
+  --button-focus-ring-color: var(--primary-300);
+  --button-focus-ring-width: 2px;
+  --button-focus-ring-offset: 2px;
 
-  --button-height: 36px;
-  --button-height-small: 28px;
-  --button-height-extra-small: 22px;
+  // SIZING — exact shadcn New York values
+  --button-border-radius: 6px;
+
+  // sm: h-8 px-3 text-xs (no vertical padding, fixed height)
+  --button-sm-height: 32px;
+  --button-sm-padding-hor: 12px;
+
+  // default: h-9 px-4 py-2
+  --button-default-height: 36px;
+  --button-default-padding-hor: 16px;
+  --button-default-padding-vert: 8px;
+
+  // lg: h-10 px-6 (no vertical padding, fixed height)
+  --button-lg-height: 40px;
+  --button-lg-padding-hor: 24px;
+
+  // icon: h-9 w-9 square
+  --button-icon-size: 36px;
 }
 
-$variants: primary, secondary;
+$variants: primary, secondary, danger, warning, success, info, outline, ghost, link;
 
 .vc-button {
   &__icon + &__title {
     @apply tw-ml-2 tw-text-left;
   }
 
+  &_loading {
+    @apply tw-cursor-wait #{!important};
+  }
+
   @each $variant in $variants {
     &.vc-button-#{$variant} {
-      @apply tw-inline-flex tw-items-center tw-font-semibold tw-cursor-pointer tw-box-border tw-transition tw-duration-200
-      tw-rounded-[var(--button-border-radius)]
-      tw-min-h-[var(--button-height)]
-      tw-bg-[color:var(--button-#{$variant}-background-color)]
-      tw-border tw-border-[color:var(--button-#{$variant}-border-color)] tw-border-solid
-      tw-flex tw-justify-center
-      tw-text-[color:var(--button-#{$variant}-text-color)];
-
-      &:hover {
-        @apply tw-bg-[color:var(--button-#{$variant}-background-color-hover)] tw-border-[color:var(--button-#{$variant}-border-color-hover)];
+      @apply tw-inline-flex tw-items-center tw-font-medium tw-cursor-pointer tw-box-border
+        tw-transition-colors tw-duration-150 tw-ease-in-out
+        tw-rounded-[var(--button-border-radius)]
+        tw-bg-[color:var(--button-#{$variant}-background-color)]
+        tw-border tw-border-[color:var(--button-#{$variant}-border-color)] tw-border-solid
+        tw-flex tw-justify-center
+        tw-text-[color:var(--button-#{$variant}-text-color)];
+
+      &:hover:not(:disabled) {
+        @apply tw-opacity-90;
       }
 
-      &:focus {
-        @apply tw-bg-[color:var(--button-#{$variant}-background-color-hover)] tw-border-[color:var(--button-#{$variant}-border-color-hover)];
+      // Keyboard focus only — shadcn focus-visible ring
+      &:focus-visible {
+        @apply tw-outline-none
+          tw-ring-[length:var(--button-focus-ring-width)]
+          tw-ring-offset-[length:var(--button-focus-ring-offset)]
+          tw-ring-[color:var(--button-focus-ring-color)];
       }
 
+      // Clean disabled — shadcn pattern
       &:disabled {
-        @apply tw-text-[color:var(--button-#{$variant}-text-color-disabled)] tw-bg-[color:var(--button-#{$variant}-background-color-disabled)] tw-border-[color:var(--button-#{$variant}-border-color-disabled)] tw-cursor-not-allowed;
+        @apply tw-opacity-50 tw-cursor-not-allowed tw-pointer-events-none;
       }
 
-      // TODO: remove this after the migration
-      // &.vc-button_small {
-      //   @apply tw-py-[var(--button-padding-vert-extra-small)] tw-min-h-[var(--button-height-extra-small)] tw-px-[var(--button-padding-hor-extra-small)] tw-text-xxs #{!important};
-      // }
-
+      // text modifier — ghost-like appearance (backward compat)
       &.vc-button_text {
         @apply tw-border-none tw-bg-transparent
-        tw-text-[color:var(--button-#{$variant}-background-color)]
-        hover:tw-text-[color:var(--button-#{$variant}-background-color-hover)]
-        focus:tw-text-[color:var(--button-#{$variant}-background-color-hover)]
-        disabled:tw-text-[color:rgb(from_var(--button-#{$variant}-background-color)_r_g_b/50%)];
+          tw-text-[color:var(--button-#{$variant}-background-color)]
+          hover:tw-text-[color:var(--button-#{$variant}-background-color-hover)]
+          focus:tw-text-[color:var(--button-#{$variant}-background-color-hover)]
+          disabled:tw-text-[color:var(--button-#{$variant}-text-color-disabled)] disabled:tw-opacity-50;
 
         @apply tw-p-0 tw-min-h-0 #{!important};
+
+        &:hover:not(:disabled) {
+          @apply tw-opacity-100;
+        }
       }
 
       &.vc-button_selected {
         @apply tw-bg-[color:var(--button-#{$variant}-background-color-hover)];
 
         &.vc-button_text {
-          @apply tw-bg-[color:rgb(from_var(--button-#{$variant}-background-color-hover)_r_g_b/7%)] tw-p-1;
+          @apply tw-bg-[color:var(--button-#{$variant}-background-color-hover)] tw-bg-opacity-[0.07] tw-p-1;
         }
       }
 
-      &.vc-button_xs {
-        @apply tw-py-[var(--button-padding-vert-extra-small)] tw-min-h-[var(--button-height-extra-small)] tw-px-[var(--button-padding-hor-extra-small)] tw-text-xxs #{!important};
+      // Size: sm — h-8 px-3 text-xs (no vertical padding)
+      &.vc-button_sm {
+        @apply tw-h-[var(--button-sm-height)] tw-px-[var(--button-sm-padding-hor)] tw-py-0 tw-text-xs #{!important};
       }
 
-      &.vc-button_sm {
-        @apply tw-py-[var(--button-padding-vert-small)] tw-min-h-[var(--button-height-small)] tw-px-[var(--button-padding-hor-small)] tw-text-xs #{!important};
+      // Size: default — h-9 px-4 py-2
+      &.vc-button_default {
+        @apply tw-h-[var(--button-default-height)] tw-py-[var(--button-default-padding-vert)] tw-px-[var(--button-default-padding-hor)] tw-text-sm tw-leading-4;
+      }
+
+      // Size: lg — h-10 px-6 (no vertical padding)
+      &.vc-button_lg {
+        @apply tw-h-[var(--button-lg-height)] tw-px-[var(--button-lg-padding-hor)] tw-py-0 tw-text-sm tw-leading-4 #{!important};
       }
 
-      &.vc-button_base {
-        @apply tw-py-[var(--button-padding-vert)] tw-min-h-[var(--button-height)] tw-px-[var(--button-padding-hor)] tw-text-sm tw-leading-4;
+      // Size: icon — h-9 w-9 square
+      &.vc-button_icon {
+        @apply tw-h-[var(--button-icon-size)] tw-w-[var(--button-icon-size)] tw-p-0 #{!important};
       }
 
       .vc-button__icon + .vc-button__title {
@@ -196,5 +307,34 @@ $variants: primary, secondary;
       }
     }
   }
+
+  // Special hover overrides for structural variants (bg change, not just opacity)
+  &.vc-button-secondary:hover:not(:disabled):not(.vc-button_text) {
+    @apply tw-opacity-100 tw-bg-[color:var(--button-secondary-background-color-hover)]
+      tw-border-[color:var(--button-secondary-border-color-hover)];
+  }
+
+  &.vc-button-outline:hover:not(:disabled):not(.vc-button_text) {
+    @apply tw-opacity-100 tw-bg-[color:var(--button-outline-background-color-hover)]
+      tw-border-[color:var(--button-outline-border-color-hover)];
+  }
+
+  &.vc-button-ghost:hover:not(:disabled):not(.vc-button_text) {
+    @apply tw-opacity-100 tw-bg-[color:var(--button-ghost-background-color-hover)];
+  }
+
+  &.vc-button-link {
+    // Link variant: no padding, no min-height — behaves like inline text
+    @apply tw-p-0 tw-h-auto tw-min-h-0 #{!important};
+
+    &:hover:not(:disabled):not(.vc-button_text) {
+      @apply tw-opacity-100;
+
+      // Underline only on text, not icon — prevents split underline with icon+text
+      .vc-button__title {
+        @apply tw-underline tw-underline-offset-4;
+      }
+    }
+  }
 }
 </style>

package/ui/components/atoms/vc-container/vc-container.stories.ts

@@ -4,7 +4,6 @@ import { VcContainer } from "./";
 /**
  * `VcContainer` is a scrollable container component that provides:
  * - Custom scrolling behavior
- * - Pull-to-refresh functionality for mobile
  * - Optional shadows to indicate scrollable content
  * - Configurable padding
  */
@@ -29,14 +28,6 @@ const meta: Meta<typeof VcContainer> = {
         defaultValue: { summary: "false" },
       },
     },
-    usePtr: {
-      description: "Enables pull-to-refresh functionality for mobile devices",
-      control: "boolean",
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: "false" },
-      },
-    },
     default: {
       description: "Default slot for content",
       table: {
@@ -47,7 +38,7 @@ const meta: Meta<typeof VcContainer> = {
   },
   parameters: {
     actions: {
-      handles: ["scroll:ptr", "scroll"],
+      handles: ["scroll"],
     },
     docs: {
       description: {
@@ -56,12 +47,10 @@ The VcContainer component is a versatile container for scrollable content with b
 
 - Wraps content in a scrollable container with customizable padding
 - Provides scroll shadows to indicate more content is available
-- Supports pull-to-refresh on mobile devices
-- Handles touch events and scroll behavior
+- Handles scroll behavior
 - Exposes methods for programmatic scrolling
 
 ## Events
-- \`scroll:ptr\`: Emitted when pull-to-refresh action is triggered
 - \`scroll\`: Emitted when container is scrolled
 
 ## Exposed Methods
@@ -100,7 +89,6 @@ export const Default: Story = {
   args: {
     shadow: false,
     noPadding: false,
-    usePtr: false,
   },
 };
 
@@ -128,7 +116,6 @@ export const WithShadow: Story = {
   args: {
     shadow: true,
     noPadding: false,
-    usePtr: false,
   },
   parameters: {
     docs: {
@@ -169,7 +156,6 @@ export const NoPadding: Story = {
   args: {
     shadow: true,
     noPadding: true,
-    usePtr: false,
   },
   parameters: {
     docs: {
@@ -181,49 +167,6 @@ export const NoPadding: Story = {
   },
 };
 
-/**
- * Container with pull-to-refresh functionality for mobile devices.
- */
-export const PullToRefresh: Story = {
-  render: (args) => ({
-    components: { VcContainer },
-    setup() {
-      function onPtrEvent() {
-        alert("Pull-to-refresh triggered! This would typically refresh content.");
-      }
-      return { args, onPtrEvent };
-    },
-    template: `
-      <div style="width: 400px; height: 300px; border: 1px solid #ccc; border-radius: 8px;">
-        <vc-container v-bind="args"
-          @scroll:ptr="onPtrEvent"
-          @scroll="(e) => console.log('Container scrolled', e)">
-          <div style="text-align: center; color: #666; padding: 8px 0 16px;">
-            ↓ Pull down to refresh (on mobile devices) ↓
-          </div>
-          <p>This container has pull-to-refresh functionality enabled for mobile devices.</p>
-          <p>On mobile, you can pull down on the content to trigger a refresh event.</p>
-          <p>The component provides visual feedback during the pull action.</p>
-          <p>When testing on desktop, this functionality is only visible on mobile devices or when using mobile device emulation in developer tools.</p>
-        </vc-container>
-      </div>
-    `,
-  }),
-  args: {
-    shadow: true,
-    noPadding: false,
-    usePtr: true,
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "Setting usePtr: true enables pull-to-refresh functionality for mobile devices. This example shows how to handle the scroll:ptr event.",
-      },
-    },
-  },
-};
-
 /**
  * Container used as a content panel with mixed content.
  */
@@ -264,7 +207,6 @@ export const ContentPanel: Story = {
   args: {
     shadow: true,
     noPadding: false,
-    usePtr: false,
   },
   parameters: {
     docs: {