voa-ds-core 1.0.11 → 1.0.13

package/dist/collection/styles/external/voa-select.external.css

@@ -1,568 +0,0 @@
-/**
- * External Styling for VoaSelect Component
- * 
- * This file demonstrates how to style the voa-select component
- * using CSS Parts API and semantic design tokens.
- * 
- * Based on Figma design:
- * https://www.figma.com/design/wDStUEuqpl7Tu1oHpiAml6/Voa-Design-System?node-id=607-1011&m=dev
- * 
- * Usage:
- * @import '@voa-ds/tokens/global.css';
- * @import '@voa-ds/styles/voa-select.css';
- * 
- * DESIGN TOKEN MAPPING (Figma → CSS Variables):
- * 
- * Typography (from Figma):
- * - Label: family-name:var(--base/family/family-sans,'Lato:SemiBold') 20px / 32px (Desktop/Body-lg/Bold)
- * - Input: family-name:var(--base/family/family-sans,'Lato:Regular') 16px / 24px (Desktop/Body-md/Regular)
- * - Info: Lato Regular 14px / 16px
- * - Error: Lato Regular 12px / 16px
- * 
- * Colors (from Figma):
- * - Background: var(--structure-colors/bg-base, #ffffff)
- * - Border: var(--structure-colors/border-color, #adb5bd)
- * - Border Active: var(--asset-colors/brand-base, #0064cb)
- * - Text Primary: var(--asset-colors/text-primary, #0b1215)
- * - Text Secondary: var(--asset-colors/text-secondary, #495057)
- * - Text Placeholder: var(--asset-colors/text-placeholder, #9f9fa8)
- * - Text Disabled: rgba(11, 18, 21, 0.25)
- * - Background Disabled: rgba(255, 255, 255, 0.25)
- * - Border Disabled: rgba(24, 24, 27, 0.06)
- * - Focus Shadow: rgba(0, 100, 203, 0.5) - Input/active effect
- * 
- * Spacing (from Figma):
- * - Gap header to input: 6px
- * - Gap label to info: var(--spacing/spacing-xs, 4px)
- * - Input padding: 12px
- * - Input gap: 8px
- * - Badge gap: var(--spacing/spacing-xs, 4px)
- * 
- * Border Radius (from Figma):
- * - Input: 15.75px
- * - Badge: var(--radius-round, 1024px)
- * 
- * Border Width (from Figma):
- * - Input: 1.125px
- * - Badge: 1px dashed
- */
-
-/* ============================================
-   BASE - Container principal do select
-   ============================================ */
-voa-select::part(base) {
-  /* Estrutura apenas - estilos visuais aplicados via parts específicos */
-  box-sizing: border-box;
-}
-
-/* ============================================
-   HEADER - Container do label e info
-   ============================================ */
-voa-select::part(header) {
-  /* Gap entre header e input - valor específico do Figma (6px) */
-  margin-bottom: var(--structure-slim-spacing-xs);
-
-  /* Gap entre label e info - Figma: spacing/spacing-xs (4px) */
-  gap: var(--structure-large-spacing-xs);
-
-  box-sizing: border-box;
-}
-
-/* ============================================
-   LABEL - Label text
-   ============================================ */
-voa-select::part(label) {
-  /* Typography - Figma: Desktop/Body-lg/Bold (Lato SemiBold 20px / 32px) */
-  font-family: var(--branding-coi-type-family-sans, 'Lato', sans-serif);
-  font-size: 20px;
-  font-weight: var(--typography-base-body-sm-bold-weight);
-  line-height: 32px;
-  font-style: normal;
-
-  /* Color - Figma: asset-colors/text-primary */
-  color: var(--text-primary, #0b1215);
-
-  box-sizing: border-box;
-}
-
-/* ============================================
-   INFO - Container de informação
-   ============================================ */
-voa-select::part(info) {
-  /* Gap entre texto e ícone - Figma: spacing/spacing-xs (4px) */
-  gap: var(--structure-large-spacing-xs, 4px);
-
-  box-sizing: border-box;
-}
-
-voa-select::part(info) .voa-select__info-message {
-  /* Typography - Figma: Lato Regular 14px / 16px */
-  font-family: var(--branding-coi-type-family-sans, 'Lato', sans-serif);
-  font-size: var(--typography-base-body-sm-regular-size);
-  font-weight: var(--typography-base-body-sm-regular-weight);
-  line-height: var(--line-height-body-sm);
-  font-style: normal;
-
-  /* Color - Figma: asset-colors/text-secondary */
-  color: var(--text-secondary, #495057);
-}
-
-voa-select::part(info) svg {
-  /* Icon size - Figma: 16px */
-  width: 16px;
-  height: 16px;
-
-  /* Color - Figma: asset-colors/text-secondary */
-  color: var(--text-secondary, #495057);
-}
-
-/* ============================================
-   INPUT - Input container (with border)
-   ============================================ */
-voa-select::part(input) {
-  /* Background - Figma: structure-colors/bg-base */
-  background-color: var(--colors-structure-bg-base, #ffffff);
-
-  /* Border - Figma: 1.125px solid border-color */
-  border: var(--border-width-medium) solid var(--colors-structure-border-color, #adb5bd);
-
-  /* Border-radius - Figma: 15.75px */
-  border-radius: var(--structure-large-radius-lg);
-
-  /* Padding - Figma: 12px */
-  padding: 0 var(--structure-large-spacing-rg, 12px);
-
-  /* CSS variable for dropdown positioning (inherited to shadow DOM via scoped: false) */
-  --select-input-padding: 12px;
-
-  /* Allow input to wrap content dynamically (especially for multi-select) */
-  min-height: 48px;
-  height: auto;
-
-  /* Box-sizing */
-  box-sizing: border-box;
-
-  /* Transitions for state changes */
-  transition: border-color 0.2s ease, box-shadow 0.2s ease;
-}
-
-/* ============================================
-   INPUT WRAPPER - Container interno com flexbox
-   ============================================ */
-voa-select::part(input-wrapper) {
-  /* Gap entre ícone e conteúdo - Figma: 8px */
-  gap: var(--structure-large-spacing-sm, 8px);
-
-  box-sizing: border-box;
-}
-
-/* ============================================
-   ICON - Left icon slot
-   ============================================ */
-voa-select::part(icon) {
-  /* Icon size - Figma: 24px */
-  width: 24px;
-  height: 24px;
-  flex-shrink: 0;
-
-  /* Color - Figma: asset-colors/text-secondary */
-  color: var(--text-secondary, #495057);
-
-  box-sizing: border-box;
-}
-
-voa-select [slot="icon"],
-voa-select [slot="prefix"] {
-  width: 100%;
-  height: 100%;
-  display: block;
-}
-
-/* ============================================
-   INPUT STATES
-   ============================================ */
-
-/* State: Default - already applied above */
-
-/* State: Selected/Filled - Item selected (blue border) */
-voa-select[data-state="selected"]::part(input),
-voa-select[data-state="filled"]::part(input) {
-  /* Border-color - Figma: asset-colors/brand-base */
-  border-color: var(--branding-coi-colors-light-primary-light, #0064cb);
-}
-
-/* State: Focused - Field in focus (blue border + inner shadow) */
-voa-select[data-state="focused"]::part(input),
-voa-select::part(input):focus-within {
-  /* Border-color - Figma: asset-colors/brand-base */
-  border-color: var(--branding-coi-colors-light-primary-light, #0064cb);
-
-  /* Box-shadow - Figma: Input/active effect (inset 0px 0px 8px 2px rgba(0,100,203,0.5)) */
-  box-shadow: inset 0px 0px 8px 2px var(--branding-coi-colors-light-primary-light-opacity-50, rgba(0, 100, 203, 0.5));
-}
-
-/* State: Disabled - Field disabled */
-voa-select[disabled]::part(input),
-voa-select[data-state="disabled"]::part(input) {
-  /* Background - Figma: structure-colors/bg-base-disabled */
-  background-color: var(--colors-structure-bg-base-disabled, var(--branding-coi-colors-light-primary-light-opacity-15, rgba(255, 255, 255, 0.25)));
-
-  /* Border-color - Figma: structure-colors/fill-secondary */
-  border-color: var(--colors-structure-fill-secondary, var(--colors-structure-fill-15, rgba(24, 24, 27, 0.06)));
-
-  cursor: not-allowed;
-}
-
-/* State: Error - Field with error */
-voa-select[error]::part(input) {
-  /* Border-color - Use danger color or keep brand-base per Figma */
-  border-color: var(--colors-semantic-danger, var(--branding-coi-colors-light-primary-light, #0064cb));
-}
-
-/* ============================================
-   SUBCOMPONENT STYLES - voa-select-base
-   ============================================ */
-
-/* Control button - the clickable trigger */
-voa-select-base::part(control) {
-  /* Make it fill the container */
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-
-  /* Remove button styling */
-  background: transparent;
-  border: none;
-  padding: 0;
-  cursor: pointer;
-
-  /* Typography inherited from parent */
-  font-family: inherit;
-  font-size: inherit;
-  color: inherit;
-  text-align: left;
-
-  box-sizing: border-box;
-}
-
-/* Placeholder and text inside select-base */
-voa-select-base::part(value) {
-  /* Typography - Figma: Desktop/Body-md/Regular (Lato Regular 16px / 24px) */
-  font-family: var(--branding-coi-type-family-sans, 'Lato', sans-serif);
-  font-size: var(--typography-base-type-scale-6);
-  font-weight: var(--typography-base-body-sm-regular-weight);
-  line-height: var(--line-height-body-md);
-  font-style: normal;
-
-  /* Color - Figma: asset-colors/text-placeholder */
-  color: var(--text-placeholder, #9f9fa8);
-
-  /* Text alignment */
-  text-align: left;
-
-  box-sizing: border-box;
-}
-
-/* When value is selected (filled) */
-voa-select-base[value]::part(value) {
-  /* Color - Figma: asset-colors/text-primary */
-  color: var(--text-primary, #0b1215);
-}
-
-/* Disabled state for label */
-voa-select[disabled]::part(label),
-voa-select[data-state="disabled"]::part(label) {
-  /* Color - Figma: text-disabled with opacity */
-  color: var(--text-disabled-with-opacity, rgba(11, 18, 21, 0.25));
-}
-
-/* Disabled state for placeholder and content */
-voa-select[disabled] voa-select-base::part(value),
-voa-select[data-state="disabled"] voa-select-base::part(value) {
-  /* Color - Figma: text-disabled with opacity */
-  color: var(--text-disabled-with-opacity, rgba(11, 18, 21, 0.25));
-}
-
-/* ============================================
-   ERROR MESSAGE - Error message
-   ============================================ */
-voa-select::part(error-message) {
-  /* Typography - Figma: Lato Regular 12px / 16px */
-  font-family: var(--branding-coi-type-family-sans, 'Lato', sans-serif);
-  font-size: var(--typography-base-type-scale-8);
-  font-weight: var(--typography-base-body-sm-regular-weight);
-  line-height: var(--line-height-body-sm);
-  font-style: normal;
-
-  /* Color - Figma: asset-colors/text-secondary */
-  color: var(--text-secondary, #495057);
-
-  /* Margin-top - Figma: 6px gap after input */
-  margin-top: 6px;
-
-  box-sizing: border-box;
-}
-
-/* ============================================
-   MULTI-SELECT STYLES
-   ============================================ */
-
-/* Remove vertical padding from input when multi-select */
-voa-select[type="multi"]::part(input) {
-  /* Remove vertical padding (top and bottom), keep only horizontal - Figma: 12px */
-  padding-top: 0;
-  padding-bottom: 0;
-  padding-left: var(--structure-large-spacing-rg, 12px);
-  padding-right: var(--structure-large-spacing-rg, 12px);
-}
-
-/* Multi-select container inside input */
-voa-select .voa-select__content voa-container-multi-select::part(base) {
-  /* Layout adjustments if needed */
-  box-sizing: border-box;
-}
-
-/* ============================================
-   BADGES INSIDE MULTI-SELECT - voa-badge styling
-   ============================================ */
-/* 
- * IMPORTANT: Since badges are inside the Shadow DOM of voa-container-multi-select,
- * and voa-container-multi-select is inside the Shadow DOM of voa-select,
- * we need to apply badge styles here as well (external CSS).
- * 
- * Base badge styles are applied in voa-container-multi-select.css (inside Shadow DOM),
- * but we apply them here too to ensure they work even when the container CSS
- * cannot fully penetrate the badge's Shadow DOM.
- */
-
-/* Badge base inside multi-select */
-voa-select voa-container-multi-select .voa-container-multi-select__badge-wrapper voa-badge::part(base) {
-  /* Background - Figma: brand-base with 15% opacity */
-  background-color: var(--branding-coi-colors-light-primary-light-opacity-15, rgba(0, 100, 203, 0.15)) !important;
-
-  /* Border - Figma: 1px dashed brand-base */
-  border: var(--border-width-thin) dashed var(--branding-coi-colors-light-primary-light, #0064cb) !important;
-
-  /* Border-radius - Figma: pill shape (1024px from tokens) */
-  border-radius: var(--structure-large-radius-round) !important;
-
-  /* Padding - Figma: 2px vertical, 4px horizontal */
-  padding-block: var(--structure-large-spacing-xxs) !important;
-  padding-inline: var(--structure-large-spacing-xs) !important;
-
-  /* Typography - Figma: Lato Regular 16px / 24px */
-  font-family: var(--branding-coi-type-family-sans, 'Lato', sans-serif) !important;
-  font-size: var(--typography-base-type-scale-6) !important;
-  font-weight: var(--typography-base-body-sm-regular-weight) !important;
-  line-height: var(--line-height-body-md) !important;
-  font-style: normal !important;
-
-  /* Text color - Figma: brand-base */
-  color: var(--branding-coi-colors-light-primary-light, #0064cb) !important;
-
-  /* Display and layout */
-  display: inline-flex !important;
-  align-items: center !important;
-  gap: var(--structure-large-spacing-xxs, 2px) !important;
-
-  /* Transitions */
-  transition: background-color 0.2s ease, border-color 0.2s ease !important;
-}
-
-/* Badge hover state */
-voa-select voa-container-multi-select .voa-container-multi-select__badge-wrapper:hover voa-badge::part(base) {
-  background-color: var(--branding-coi-colors-light-primary-light-opacity-25, rgba(0, 100, 203, 0.25)) !important;
-  border-color: var(--branding-coi-colors-light-primary-light-400, #0071c8) !important;
-}
-
-/* Badge label */
-voa-select voa-container-multi-select .voa-container-multi-select__badge-wrapper voa-badge::part(label) {
-  color: var(--branding-coi-colors-light-primary-light, #0064cb) !important;
-  white-space: nowrap;
-}
-
-/* Leading icon - hide */
-voa-select voa-container-multi-select .voa-container-multi-select__badge-wrapper voa-badge::part(icon-leading) {
-  display: none !important;
-}
-
-/* Trailing icon (close) of badge */
-voa-select voa-container-multi-select .voa-container-multi-select__badge-wrapper voa-badge::part(icon-trailing) {
-  display: inline-flex !important;
-  align-items: center !important;
-  justify-content: center !important;
-  cursor: pointer !important;
-  color: var(--branding-coi-colors-light-primary-light, #0064cb) !important;
-  flex-shrink: 0;
-  margin-left: var(--structure-large-spacing-xxs, 2px);
-}
-
-voa-select voa-container-multi-select .voa-container-multi-select__badge-wrapper voa-badge::part(icon-trailing) svg {
-  width: 12px !important;
-  height: 12px !important;
-  display: block !important;
-  flex-shrink: 0;
-}
-
-/* Close icon hover */
-voa-select voa-container-multi-select .voa-container-multi-select__badge-wrapper:hover voa-badge::part(icon-trailing) {
-  opacity: 0.8;
-}
-
-/* Disabled state */
-voa-select[disabled] voa-container-multi-select .voa-container-multi-select__badge-wrapper voa-badge::part(base) {
-  opacity: 0.5 !important;
-  cursor: not-allowed !important;
-  pointer-events: none !important;
-}
-
-/* ============================================
-   DROPDOWN - Options menu
-   ============================================ */
-
-/* Animation for dropdown entrance and exit */
-@keyframes dropdownEnter {
-  from {
-    opacity: 0;
-    transform: translateY(-8px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes dropdownExit {
-  from {
-    opacity: 1;
-    transform: translateY(0);
-  }
-  to {
-    opacity: 0;
-    transform: translateY(-8px);
-  }
-}
-
-/* Dropdown inside voa-select-base - visual styles only */
-/* Structural positioning is in voa-select-base.css */
-/* Listbox container (role="listbox") */
-voa-select-base::part(dropdown) {
-  /* Visual styles - Figma specs */
-  background-color: var(--colors-structure-bg-base, #ffffff);
-  
-  /* Outline - 1.125px border using design token */
-  border: var(--border-width-medium) solid var(--colors-structure-border-color, #adb5bd);
-  border-radius: 15.75px;
-
-  /* Shadow for elevation - Figma: drop shadow effect with enhanced depth */
-  box-shadow: var(--voa-shadow-option, 0px 8px 16px rgba(0, 0, 0, 0.15)), 
-              0px 0px 0px 0.5px var(--colors-structure-border-color, #adb5bd),
-              inset 0px 0px 0px 1px var(--colors-structure-border-color, #adb5bd);
-
-  /* Padding inside dropdown - vertical only */
-  padding: var(--structure-large-spacing-sm, 8px) 0;
-
-  /* Animation - entrance effect */
-  animation: dropdownEnter 0.2s ease-out forwards;
-  opacity: 1;
-  transform: translateY(0);
-
-  /* Box-sizing */
-  box-sizing: border-box;
-  
-  /* Ensure proper stacking context */
-  position: relative;
-  z-index: 1000;
-}
-
-/* Exit animation state - when dropdown is hidden */
-voa-select-base::part(dropdown).voa-select__dropdown--hidden {
-  animation: dropdownExit 0.15s ease-in forwards;
-  visibility: hidden;
-  pointer-events: none;
-}
-
-/* ============================================
-   DROPDOWN OPTION - Individual option
-   ============================================ */
-
-voa-select-base::part(option) {
-  /* Padding for options - Figma: 8px vertical, 12px horizontal */
-  padding: 8px 12px;
-
-  /* Typography - Figma: Lato Regular 16px / 24px */
-  font-family: var(--branding-coi-type-family-sans, 'Lato', sans-serif);
-  font-size: 16px;
-  font-weight: var(--typography-base-body-sm-regular-weight);
-  line-height: 24px;
-  font-style: normal;
-
-  /* Color - Figma: text-primary */
-  color: var(--text-primary, #0b1215);
-
-  /* Box-sizing */
-  box-sizing: border-box;
-
-  /* Smooth transitions for all state changes */
-  transition: background-color 0.2s ease, color 0.2s ease;
-}
-
-/* Hover state for options */
-voa-select-base::part(option):hover {
-  background-color: var(--colors-structure-bg-container, #f1f3f5);
-  cursor: pointer;
-}
-
-/* Active state for options (keyboard navigation highlight) */
-voa-select-base .voa-select__option--active {
-  background-color: var(--colors-structure-bg-container, #f1f3f5);
-}
-
-/* Selected state for options */
-voa-select-base .voa-select__option--selected {
-  background-color: var(--branding-coi-colors-light-primary-light-opacity-15, rgba(0, 100, 203, 0.15));
-  color: var(--branding-coi-colors-light-primary-light, #0064cb);
-}
-
-/* Disabled state for options */
-voa-select-base .voa-select__option--disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-/* ============================================
-   DROPDOWN INDICATOR - Dropdown icon
-   ============================================ */
-
-/* Dropdown icon is inside voa-select-base */
-voa-select-base::part(indicator) {
-  /* Icon size - Figma: 24px */
-  width: 24px;
-  height: 24px;
-  flex-shrink: 0;
-
-  /* Color - Figma: text-primary */
-  color: var(--text-primary, #0b1215);
-
-  /* Ensure proper display */
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  box-sizing: border-box;
-}
-
-voa-select-base::part(indicator) svg {
-  width: 100%;
-  height: 100%;
-  display: block;
-}
-
-/* Disabled state for dropdown indicator */
-voa-select[disabled] voa-select-base::part(indicator),
-voa-select[data-state="disabled"] voa-select-base::part(indicator) {
-  /* Color - Figma: text-disabled with opacity */
-  color: var(--text-disabled-with-opacity, rgba(11, 18, 21, 0.25));
-}