@3fn/core 14.1.0 → 15.0.0

package/src/components/core/Button-VerticalList-Item/platforms/web/.gitkeep

@@ -1,2 +0,0 @@
-# Web Platform Implementation
-# This file ensures the directory is tracked by git

package/src/components/core/Button-VerticalList-Item/platforms/web/ButtonVerticalListItem.styles.css

@@ -1,459 +0,0 @@
-/**
- * Button-VerticalList-Item Component Styles for Web Platform
- * 
- * Token-based styling using CSS custom properties from the mathematical token system.
- * All values reference semantic or primitive tokens - zero hard-coded values.
- * 
- * Stemma System Naming: [Family]-[Type] = Button-VerticalList-Item
- * Component Type: Primitive (foundational component)
- * Custom Element Tag: <button-vertical-list-item>
- * 
- * Key Design Decisions:
- * - CSS logical properties for RTL support (padding-block, padding-inline)
- * - Padding compensation for height stability (11px rest, 10px selected)
- * - Blend tokens for hover/pressed overlays
- * - Accessibility tokens for focus-visible outline
- * - No disabled state by design (unavailable options should be hidden)
- * 
- * @module Button-VerticalList-Item/platforms/web/styles
- * @see Requirements: 5.1, 5.2, 5.3, 5.4, 8.1, 8.2, 8.3, 8.4
- */
-
-/* ==========================================================================
-   CSS Custom Properties (Token References)
-   ========================================================================== */
-
-/**
- * Component-level custom properties for token consumption.
- * These map semantic tokens to component-specific usage.
- * 
- * Component tokens are set inline via style attribute for state-specific values:
- * - --_vlbi-background: Background color for current visual state
- * - --_vlbi-border-width: Border width for current visual state
- * - --_vlbi-border-color: Border color for current visual state
- * - --_vlbi-padding-block: Padding block for current visual state (padding compensation)
- * - --_vlbi-label-color: Label text color for current visual state
- * - --_vlbi-icon-color: Icon color for current visual state
- * 
- * Naming Convention: --_[abbrev]-* pattern signals component-scoped (internal) properties
- * @see Requirements: 7.2, 7.4 - CSS custom property naming convention
- */
-:host {
-  /* Display */
-  display: block;
-  width: 100%;
-  
-  /* Focus ring tokens */
-  --_vlbi-focus-offset: var(--accessibility-focus-offset);
-  --_vlbi-focus-width: var(--accessibility-focus-width);
-  --_vlbi-focus-color: var(--accessibility-focus-color);
-  
-  /* Sizing tokens */
-  --_vlbi-min-height: var(--tap-area-recommended);
-  --_vlbi-radius: var(--radius-normal);
-  --_vlbi-padding-inline: var(--space-inset-200);
-  --_vlbi-gap: var(--space-grouped-loose);
-  
-  /* Typography tokens */
-  --_vlbi-label-font-size: var(--typography-button-md-font-size);
-  --_vlbi-label-font-weight: var(--typography-button-md-font-weight);
-  --_vlbi-label-line-height: var(--typography-button-md-line-height);
-  --_vlbi-description-font-size: var(--typography-body-sm-font-size);
-  --_vlbi-description-font-weight: var(--typography-body-sm-font-weight);
-  --_vlbi-description-line-height: var(--typography-body-sm-line-height);
-  --_vlbi-description-color: var(--color-text-muted);
-  
-  /* Transition tokens - using motion.selectionTransition semantic token */
-  /* @see Requirement 7.1, New Tokens Required (motion.selectionTransition) */
-  /* No fallbacks - fail loudly if tokens not loaded */
-  --_vlbi-transition-duration: var(--motion-selection-transition-duration);
-  --_vlbi-transition-easing: var(--motion-selection-transition-easing);
-  
-  /* Blend colors for interactive states are set via inline style from JS */
-  /* These use blend utilities for mathematically correct state colors */
-  /* @see Requirements: 1.3, 1.4, 1.5, 1.6 - Blend utility adoption */
-  /* --_vlbi-hover-bg: set by component via blend utilities */
-  /* --_vlbi-pressed-bg: set by component via blend utilities */
-}
-
-/* ==========================================================================
-   Base Button Styles
-   ========================================================================== */
-
-/**
- * Base button element styling.
- * 
- * - Flexbox layout for content alignment
- * - Token-based sizing and spacing
- * - CSS logical properties for RTL support
- * - Smooth transitions for interaction states
- * - Semantic button element with proper cursor
- * 
- * @see Requirements 5.1, 5.2, 5.3, 5.4
- */
-.vertical-list-item {
-  /* Reset browser defaults */
-  appearance: none;
-  margin: 0;
-  font: inherit;
-  
-  /* Layout - flexbox for icon/content/checkmark alignment */
-  display: flex;
-  align-items: center;
-  gap: var(--_vlbi-gap);
-  width: 100%;
-  
-  /* Sizing - minimum height for touch target */
-  /* @see Requirement 5.1 */
-  min-height: var(--_vlbi-min-height);
-  
-  /* Spacing - CSS logical properties for RTL support */
-  /* @see Requirement 11.1 */
-  padding-block: var(--_vlbi-padding-block);
-  padding-inline: var(--_vlbi-padding-inline);
-  
-  /* Visual - token-based styling */
-  /* @see Requirement 5.3 */
-  background: var(--_vlbi-background);
-  border: var(--_vlbi-border-width) solid var(--_vlbi-border-color);
-  border-radius: var(--_vlbi-radius);
-  
-  /* Typography */
-  text-align: start;
-  
-  /* Interaction */
-  cursor: pointer;
-  
-  /* Animation - smooth state transitions */
-  /* @see Requirement 7.1 */
-  transition: 
-    background var(--_vlbi-transition-duration) var(--_vlbi-transition-easing),
-    background-color var(--_vlbi-transition-duration) var(--_vlbi-transition-easing),
-    border-color var(--_vlbi-transition-duration) var(--_vlbi-transition-easing),
-    border-width var(--_vlbi-transition-duration) var(--_vlbi-transition-easing),
-    padding var(--_vlbi-transition-duration) var(--_vlbi-transition-easing),
-    color var(--_vlbi-transition-duration) var(--_vlbi-transition-easing);
-  
-  /* Focus outline reset (custom focus ring implemented below) */
-  outline: none;
-}
-
-/* ==========================================================================
-   Interactive States - Hover
-   ========================================================================== */
-
-/**
- * Hover state styling.
- * 
- * Uses blend utility calculated color via CSS custom property instead of
- * CSS filter: brightness(). This ensures mathematically correct state colors
- * that are consistent with iOS and Android implementations.
- * 
- * @see Requirement 1.3, 1.5 - Blend utility adoption, no filter: brightness()
- */
-.vertical-list-item:hover {
-  /* Apply blend.hoverDarker (8% darker) via calculated CSS custom property */
-  background-color: var(--_vlbi-hover-bg);
-}
-
-/* ==========================================================================
-   Interactive States - Pressed/Active
-   ========================================================================== */
-
-/**
- * Pressed/active state styling.
- * 
- * Uses blend utility calculated color via CSS custom property instead of
- * CSS filter: brightness(). This ensures mathematically correct state colors
- * that are consistent with iOS and Android implementations.
- * 
- * @see Requirement 1.4, 1.5 - Blend utility adoption, no filter: brightness()
- */
-.vertical-list-item:active {
-  /* Apply blend.pressedDarker (12% darker) via calculated CSS custom property */
-  background-color: var(--_vlbi-pressed-bg);
-}
-
-/* ==========================================================================
-   Focus State
-   ========================================================================== */
-
-/**
- * Focus state (keyboard navigation only).
- * 
- * - Uses :focus-visible for keyboard-only focus indicators
- * - Outline: accessibility.focus.width
- * - Color: accessibility.focus.color
- * - Offset: accessibility.focus.offset
- * - Meets WCAG 2.1 AA contrast requirements (3:1 minimum)
- * 
- * @see Requirements 8.3, 8.4
- */
-.vertical-list-item:focus-visible {
-  outline: var(--_vlbi-focus-width) solid var(--_vlbi-focus-color);
-  outline-offset: var(--_vlbi-focus-offset);
-}
-
-/**
- * Remove focus outline on mouse click.
- * 
- * :focus-visible handles this automatically in modern browsers,
- * but this provides fallback for older browsers.
- * 
- * @see Requirement 8.4
- */
-.vertical-list-item:focus:not(:focus-visible) {
-  outline: none;
-}
-
-/* ==========================================================================
-   Visual State Modifier Classes
-   ========================================================================== */
-
-/*
- * Visual State Modifier Classes
- * 
- * These classes are applied to the button element based on the current visual state.
- * The actual styling values are applied via inline CSS custom properties (--_vlbi-*)
- * which are set dynamically based on the visual state mapping in visualStateMapping.ts.
- * 
- * This approach allows:
- * 1. Dynamic state-based styling without CSS class switching overhead
- * 2. Smooth CSS transitions between states
- * 3. Error state overlay without additional class complexity
- * 
- * The classes below serve as semantic markers for:
- * - Testing (can query by class to verify state)
- * - Debugging (visible in DevTools)
- * - Future extension (can add state-specific overrides if needed)
- * 
- * @see visualStateMapping.ts for the CSS variable values per state
- * @see Requirements 1.1, 1.2, 1.3, 1.4, 1.5, 3.1, 3.2, 3.3
- */
-
-/* ==========================================================================
-   Content Container Styling
-   ========================================================================== */
-
-/**
- * Content container (label + description).
- * 
- * - Flexbox column layout for stacking label and description
- * - Flex: 1 to fill available space between icons
- * - min-width: 0 to allow text truncation
- * 
- * @see Requirement 4.1, 4.2
- */
-.vertical-list-item__content {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  min-width: 0; /* Allow text truncation */
-}
-
-/* ==========================================================================
-   Label Styling
-   ========================================================================== */
-
-/**
- * Label text styling.
- * 
- * - Typography: typography.buttonMd
- * - Color: Inherits from visual state (via --_vlbi-label-color)
- * - Truncation: Single line with ellipsis for overflow
- * 
- * @see Requirement 4.1
- */
-.vertical-list-item__label {
-  color: var(--_vlbi-label-color);
-  font-size: var(--_vlbi-label-font-size);
-  font-weight: var(--_vlbi-label-font-weight);
-  line-height: var(--_vlbi-label-line-height);
-  
-  /* Text truncation for long labels */
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-/* ==========================================================================
-   Description Styling
-   ========================================================================== */
-
-/**
- * Description text styling.
- * 
- * - Typography: typography.bodySm
- * - Color: color.text.muted (always, regardless of visual state)
- * - Wrapping: Allows multiple lines
- * 
- * @see Requirements 4.2, 4.3
- */
-.vertical-list-item__description {
-  color: var(--_vlbi-description-color);
-  font-size: var(--_vlbi-description-font-size);
-  font-weight: var(--_vlbi-description-font-weight);
-  line-height: var(--_vlbi-description-line-height);
-}
-
-/* ==========================================================================
-   Leading Icon Styling
-   ========================================================================== */
-
-/**
- * Leading icon container styling.
- * 
- * - Flex-shrink: 0 to prevent icon from shrinking
- * - Color: Passed directly to Icon-Base with optical balance applied via blend utilities
- * - Position: Far left, vertically centered (handled by parent flexbox)
- * 
- * Note: Optical balance (8% lighter) is applied at render time using the blend
- * utilities' iconColor() function, not via CSS filter. This ensures mathematical
- * consistency with the design system's color.icon.opticalBalance token.
- * 
- * @see Requirements 4.4, 4.5, 9.1
- */
-.vertical-list-item__leading-icon {
-  flex-shrink: 0;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
-/* ==========================================================================
-   Checkmark (Selection Indicator) Styling
-   ========================================================================== */
-
-/**
- * Checkmark container styling.
- * 
- * - Flex-shrink: 0 to prevent icon from shrinking
- * - Color: Inherits from visual state (via --_vlbi-icon-color)
- * - Position: Far right, vertically centered (handled by parent flexbox)
- * - Marked as decorative (aria-hidden="true" in HTML)
- * - Base transition for fade-in (always applied, regardless of checkmarkTransition prop)
- * 
- * @see Requirements 2.1, 2.2, 2.3, 2.4, 2.5
- * @see Requirement 7.2 - Checkmark always fades in
- */
-.vertical-list-item__checkmark {
-  flex-shrink: 0;
-  color: var(--_vlbi-icon-color);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  /* Base transition for fade-in (always applied) */
-  transition: opacity var(--_vlbi-transition-duration) var(--_vlbi-transition-easing),
-              visibility var(--_vlbi-transition-duration) var(--_vlbi-transition-easing);
-}
-
-/**
- * Checkmark fade transition mode.
- * 
- * When checkmarkTransition='fade', both fade-in and fade-out are animated.
- * The transition is inherited from the base .vertical-list-item__checkmark class.
- * 
- * @see Requirement 7.3 - Fade out when checkmarkTransition='fade'
- */
-.vertical-list-item__checkmark--fade {
-  /* Inherits transition from base class - both fade-in and fade-out animated */
-  /* This class exists as a semantic marker and for specificity matching with --instant */
-  opacity: inherit;
-}
-
-/**
- * Checkmark instant hide transition mode.
- * 
- * When checkmarkTransition='instant', the checkmark hides immediately without animation.
- * However, fade-IN is still animated (asymmetric behavior).
- * 
- * This is achieved by:
- * 1. Base class provides fade-in transition
- * 2. When hidden, we override with instant transition for immediate hide
- * 
- * @see Requirement 7.2 - Checkmark always fades in
- * @see Requirement 7.4 - Instant hide when checkmarkTransition='instant'
- */
-.vertical-list-item__checkmark--instant.vertical-list-item__checkmark--hidden {
-  /* Override transition to none for instant hide */
-  transition: none;
-}
-
-/**
- * Checkmark hidden state.
- * 
- * @see Requirement 2.2
- */
-.vertical-list-item__checkmark--hidden {
-  opacity: 0;
-  visibility: hidden;
-}
-
-/**
- * Checkmark visible state.
- * 
- * @see Requirement 2.1
- */
-.vertical-list-item__checkmark--visible {
-  opacity: 1;
-  visibility: visible;
-}
-
-/* ==========================================================================
-   High Contrast Mode Support
-   ========================================================================== */
-
-/**
- * Ensure buttons remain visible in Windows High Contrast Mode.
- * 
- * - Force borders for all button styles
- * - Ensure focus indicators are visible
- * - Use border.borderEmphasis (2px) for visibility
- */
-@media (prefers-contrast: high) {
-  .vertical-list-item {
-    border-width: 2px !important;
-  }
-  
-  .vertical-list-item:focus-visible {
-    outline-width: 4px; /* border.borderHeavy equivalent */
-  }
-}
-
-/* ==========================================================================
-   Reduced Motion Support
-   ========================================================================== */
-
-/**
- * Respect user preference for reduced motion.
- * 
- * - Remove transitions and animations
- * - Maintain functionality without motion
- * 
- * @see Requirement 7.1 (motion.selectionTransition)
- */
-@media (prefers-reduced-motion: reduce) {
-  .vertical-list-item,
-  .vertical-list-item__checkmark--fade {
-    transition: none;
-  }
-}
-
-/* ==========================================================================
-   Print Styles
-   ========================================================================== */
-
-/**
- * Optimize button appearance for print.
- * 
- * - Remove interactive states
- * - Ensure visibility with border
- * - Simplify visual styling
- */
-@media print {
-  .vertical-list-item {
-    background-color: transparent !important;
-    border: 1px solid currentColor !important;
-    filter: none !important;
-  }
-}