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

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

@@ -1,36 +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";
+  size?: ButtonSize;
   selected?: boolean;
   text?: boolean;
+  type?: "button" | "submit" | "reset";
+  loading?: boolean;
+  ariaLabel?: string;
 }
 
 export interface Emits {
@@ -43,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>();
@@ -52,21 +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_${effectiveSize.value}`]: effectiveSize.value,
       "vc-button_selected": props.selected,
       "vc-button_text": props.text,
-      "vc-button_disabled": props.disabled,
+      "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);
   }
@@ -75,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);
@@ -93,59 +126,152 @@ 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);
 
-  --button-padding-hor: 14px;
-  --button-padding-vert: 10px;
+  // 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);
 
-  --button-padding-hor-small: 12px;
-  --button-padding-vert-small: 8px;
+  // 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-vert-extra-small: 5px;
-  --button-padding-hor-extra-small: 12px;
+  // 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-height: 36px;
-  --button-height-small: 28px;
-  --button-height-extra-small: 22px;
+  // 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;
+
+  // FOCUS RING
+  --button-focus-ring-color: var(--primary-300);
+  --button-focus-ring-width: 2px;
+  --button-focus-ring-offset: 2px;
+
+  // 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;
       }
 
+      // 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:var(--button-#{$variant}-text-color-disabled)] disabled:tw-opacity-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 {
@@ -156,16 +282,24 @@ $variants: primary, secondary;
         }
       }
 
-      &.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;
       }
 
-      &.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: 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};
+      }
+
+      // 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 {
@@ -173,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: {

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

@@ -7,33 +7,10 @@
         'vc-container_nopadding': noPadding,
       },
     ]"
-    @touchstart="onTouchstart"
-    @touchmove="onTouchmove"
-    @touchend="onTouchend"
   >
-    <div
-      :class="['vc-container__overscroll', { 'vc-container__overscroll_touching': touching }]"
-      :style="{
-        top: -1 * pullDist + topOffset + 'px',
-        height: pullDist + 'px',
-      }"
-    >
-      <div class="vc-container__status">
-        <VcIcon
-          :icon="canRefresh || goingUp ? 'material-arrow_upward' : 'material-arrow_downward'"
-          class="vc-container__overscroll-icon"
-        ></VcIcon>
-        <span v-if="!(canRefresh || goingUp)">{{ $t("COMPONENTS.ATOMS.VC_CONTAINER.PULL_TO_REFRESH") }}</span>
-        <span v-else>{{ $t("COMPONENTS.ATOMS.VC_CONTAINER.REFRESHING") }}</span>
-      </div>
-    </div>
     <div
       ref="component"
       class="vc-container__inner"
-      :class="{
-        'vc-container__inner_touching': touching,
-      }"
-      :style="{ top: topOffset + 'px' }"
       @scroll="onScroll"
     >
       <slot></slot>
@@ -42,77 +19,32 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, onMounted, onBeforeUnmount, computed, shallowRef, watch, inject, Ref } from "vue";
-import { VcIcon } from "./../vc-icon";
+import { ref, onMounted, onBeforeUnmount } from "vue";
 
 export interface Props {
   shadow?: boolean;
   noPadding?: boolean;
-  usePtr?: boolean;
 }
 
 export interface Emits {
-  (event: "scroll:ptr"): void;
   (event: "scroll", e: Event): void;
 }
 
-const props = defineProps<Props>();
+defineProps<Props>();
 
 const emit = defineEmits<Emits>();
 
 const component = ref<HTMLElement>();
 const scroll = ref(false);
-const pullDist = ref(60);
-const touchDiff = shallowRef(0);
-let touchstartY = 0;
-const refreshing = shallowRef(false);
-const goingUp = shallowRef(false);
-const touching = shallowRef(false);
-const isMobile = inject("isMobile") as Ref<boolean>;
 
 let resizeObserver: ResizeObserver | null = null;
 
-const topOffset = computed(() => Math.max(0, Math.min(pullDist.value, touchDiff.value)));
-const canRefresh = computed(() => touchDiff.value >= pullDist.value && !refreshing.value);
-
 const scrollTop = () => {
   if (component.value) {
     component.value.scroll(0, 0);
   }
 };
 
-function onTouchstart(e: TouchEvent | MouseEvent) {
-  if (!isMobile.value || refreshing.value || !props.usePtr || (component.value && component.value.scrollTop > 0))
-    return;
-  touching.value = true;
-  touchstartY = "clientY" in e ? e.clientY : e.touches[0].clientY;
-}
-
-function onTouchmove(e: TouchEvent | MouseEvent) {
-  if (refreshing.value || !touching.value) return;
-
-  const touchY = "clientY" in e ? e.clientY : e.touches[0].clientY;
-
-  if (component.value && component.value.scrollTop === 0) {
-    touchDiff.value = touchY - touchstartY;
-  }
-}
-
-function onTouchend() {
-  if (refreshing.value) return;
-  touching.value = false;
-
-  if (canRefresh.value) {
-    touchDiff.value = 0;
-    refreshing.value = true;
-    emit("scroll:ptr");
-
-    refreshing.value = false;
-  } else {
-    touchDiff.value = 0;
-  }
-}
-
 function onScroll(e: Event) {
   emit("scroll", e);
 }
@@ -134,10 +66,6 @@ onBeforeUnmount(() => {
   }
 });
 
-watch(topOffset, (newVal, oldVal) => {
-  goingUp.value = newVal < oldVal;
-});
-
 defineExpose({
   scrollTop,
   component,
@@ -146,11 +74,7 @@ defineExpose({
 
 <style lang="scss">
 :root {
-  --container-overscroll-icon-color: var(--secondary-600);
-  --container-text-color: var(--neutrals-400);
   --container-padding: 16px;
-  --container-transition-duration: 0.3s;
-  --container-transition-ease: ease-out;
   --container-shadow-color: var(--additional-950);
   --container-shadow-opacity: 0.1;
   --container-shadow: 0 3px 2px rgba(var(--container-shadow-color), var(--container-shadow-opacity)) inset;
@@ -163,45 +87,14 @@ defineExpose({
     @apply tw-shadow-[--container-shadow];
   }
 
-  &__overscroll {
-    @apply tw-absolute tw-w-full;
-    transition: top var(--container-transition-duration) var(--container-transition-ease);
-
-    &_touching {
-      transition: none;
-    }
-  }
-
-  &__status {
-    @apply tw-flex tw-w-full tw-h-full tw-justify-center tw-items-center tw-pb-[10px];
-  }
-
-  &__overscroll-icon {
-    @apply tw-text-[color:var(--container-overscroll-icon-color)];
-  }
-
-  &__overscroll span {
-    @apply tw-ml-2 tw-text-sm;
-    color: var(--container-text-color);
-  }
-
   &__inner {
     @apply tw-relative tw-overflow-y-auto tw-overflow-x-hidden
     tw-flex-1;
-    transition: top var(--container-transition-duration) var(--container-transition-ease);
     padding: var(--container-padding);
-
-    &_touching {
-      transition: none;
-    }
   }
 
   &_nopadding &__inner {
     padding: 0;
   }
-
-  &_shadow {
-    @apply tw-shadow-[--container-shadow];
-  }
 }
 </style>