voa-ds-core 1.0.10 → 1.0.12

package/dist/collection/styles/external/voa-input-addon.external.css

@@ -1,204 +0,0 @@
-/* 
- * VoaInputAddon Component Styles
- * 
- * Estilos aplicados via CSS Parts API usando design tokens semânticos.
- * Baseado no design do Figma: https://www.figma.com/design/wDStUEuqpl7Tu1oHpiAml6/Voa-Design-System?node-id=438-2157
- * 
- * Typography Tokens:
- * - Desktop/Body-md/Bold: font-family: var(--base/family/family-sans, 'Lato'), font-weight: var(--typography-base-body-sm-bold-weight), font-size: 16px, line-height: 24px
- * - Desktop/Body-sm/Regular: font-family: var(--base/family/family-sans, 'Lato'), font-weight: var(--typography-base-body-sm-regular-weight), font-size: 14px, line-height: 16px
- * - Desktop/Body-sm/Bold: font-family: var(--base/family/family-sans, 'Lato'), font-weight: var(--typography-base-body-sm-bold-weight), font-size: 14px, line-height: 16px
- */
-
-/* Base */
-voa-input-addon::part(base) {
-  display: flex;
-  align-items: center;
-  box-sizing: border-box;
-  flex-shrink: 0;
-  flex-grow: 0;
-  height: 46px;
-}
-
-voa-input-addon--interactive::part(base) {
-  cursor: pointer;
-  user-select: none;
-}
-
-voa-input-addon--interactive::part(base):hover {
-  opacity: 0.8;
-}
-
-voa-input-addon--interactive::part(base):focus-visible {
-  outline: 2px solid var(--brand-base);
-  outline-offset: 2px;
-}
-
-/* Content */
-voa-input-addon::part(content) {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-spacing-xxs, 2px);
-  height: 100%;
-  flex-shrink: 0;
-}
-
-/* Text - Desktop/Body-md/Bold */
-voa-input-addon::part(text) {
-  font-family: var(--typography-base-family-sans, 'Lato', sans-serif);
-  font-size: var(--typography-base-type-scale-6, 16px);
-  font-weight: var(--typography-base-body-sm-bold-weight, 600);
-  line-height: 24px;
-  color: var(--text-placeholder, #9f9fa8);
-}
-
-/* Variante: Label */
-voa-input-addon[variant="label"]::part(base) {
-  background-color: var(--palette-gray-gray-2, #e9ecef);
-  border-right: 1px solid var(--palette-gray-gray-2, #e9ecef);
-  padding: 10px var(--structure-large-spacing-rg, 12px) 10px 10px;
-}
-
-voa-input-addon[variant="label"]::part(content) {
-  gap: 10px;
-}
-
-/* Variante: Select */
-voa-input-addon[variant="select"]::part(base) {
-  background-color: var(--palette-gray-gray-2, #e9ecef);
-  border-right: 1px solid var(--palette-gray-gray-2, #e9ecef);
-  padding: 10px var(--spacing-spacing-xxs, 2px) 10px 10px;
-}
-
-voa-input-addon[variant="select"]::part(dropdown-icon) {
-  width: 24px;
-  height: 24px;
-  color: var(--text-placeholder, #9f9fa8);
-}
-
-/* Variante: Flags */
-voa-input-addon[variant="flags"]::part(base) {
-  background-color: var(--palette-gray-gray-2, #e9ecef);
-  padding: var(--structure-large-spacing-rg, 12px) 0 var(--structure-large-spacing-rg, 12px) var(--structure-large-spacing-rg, 12px);
-}
-
-voa-input-addon[variant="flags"]::part(content) {
-  gap: 0;
-}
-
-voa-input-addon[variant="flags"]::part(icon) {
-  width: 24px;
-  height: 24px;
-  background-color: var(--palette-gray-gray-6, #868e96);
-  border-radius: 100px;
-  flex-shrink: 0;
-}
-
-voa-input-addon[variant="flags"]::part(text) {
-  padding-left: var(--spacing-spacing-xs, 4px);
-  font-family: var(--typography-base-family-sans, 'Lato', sans-serif);
-  font-size: var(--typography-base-body-sm-regular-size, 14px);
-  font-weight: var(--typography-base-body-sm-regular-weight, 400);
-  line-height: var(--typography-base-body-sm-regular-line-height, 16px);
-  color: var(--palette-gray-gray-6, #868e96);
-}
-
-voa-input-addon[variant="flags"]::part(dropdown-icon) {
-  width: 24px;
-  height: 24px;
-  color: var(--text-placeholder, #9f9fa8);
-}
-
-/* Variante: Button */
-voa-input-addon[variant="button"]::part(base) {
-  padding: var(--spacing-spacing-xs, 4px);
-  gap: var(--spacing-spacing-xs, 4px);
-}
-
-voa-input-addon[variant="button"]::part(content) {
-  background-color: var(--palette-gray-gray-3, #dee2e6);
-  border: var(--border-width-thin) solid var(--palette-gray-gray-5, #adb5bd);
-  border-radius: var(--structure-large-radius-md, 12px);
-  padding: var(--spacing-spacing-xs, 4px) var(--spacing-spacing-sm, 8px);
-  gap: var(--spacing-spacing-xxs, 2px);
-  justify-content: center;
-  height: 100%;
-}
-
-voa-input-addon[variant="button"]::part(text) {
-  font-family: var(--typography-base-family-sans, 'Lato', sans-serif);
-  font-size: var(--typography-base-body-sm-regular-size, 14px);
-  font-weight: var(--typography-base-body-sm-bold-weight, 600);
-  line-height: var(--typography-base-body-sm-regular-line-height, 16px);
-  color: var(--palette-gray-gray-6, #868e96);
-}
-
-/* Variante: Clear */
-voa-input-addon[variant="clear"]::part(base) {
-  padding: 11px var(--structure-large-spacing-rg, 12px);
-  gap: 10px;
-}
-
-voa-input-addon[variant="clear"]::part(content) {
-  gap: 10px;
-}
-
-voa-input-addon[variant="clear"]::part(icon) {
-  width: 24px;
-  height: 24px;
-  color: #76767f; /* Figma spec: rgba(118, 118, 127, 1) */
-}
-
-/* Variante: Shortcut */
-voa-input-addon[variant="shortcut"]::part(base) {
-  gap: var(--spacing-spacing-xs, 4px);
-}
-
-voa-input-addon[variant="shortcut"]::part(content) {
-  gap: var(--spacing-spacing-xs, 4px);
-}
-
-/* Note: Shortcut variant uses voa-keybinding component internally */
-/* Style voa-keybinding separately if needed */
-
-/* Variante: Currency-pre */
-voa-input-addon[variant="currency-pre"]::part(base) {
-  padding: 10px;
-  gap: 10px;
-}
-
-voa-input-addon[variant="currency-pre"]::part(content) {
-  gap: 10px;
-}
-
-voa-input-addon[variant="currency-pre"]::part(text) {
-  font-family: 'Manrope', sans-serif;
-  font-size: var(--typography-base-type-scale-6, 16px);
-  font-weight: var(--typography-base-body-sm-bold-weight, 600);
-  line-height: 24px;
-  color: var(--text-placeholder, #9f9fa8);
-}
-
-/* Variante: Currency-post */
-voa-input-addon[variant="currency-post"]::part(base) {
-  gap: var(--spacing-spacing-sm, 8px);
-}
-
-voa-input-addon[variant="currency-post"]::part(content) {
-  gap: var(--spacing-spacing-sm, 8px);
-}
-
-voa-input-addon[variant="currency-post"]::part(text) {
-  font-family: var(--typography-base-family-sans, 'Lato', sans-serif);
-  font-size: var(--typography-base-body-sm-regular-size, 14px);
-  font-weight: var(--typography-base-body-sm-bold-weight, 600);
-  line-height: var(--typography-base-body-sm-regular-line-height, 16px);
-  color: var(--palette-gray-gray-6, #868e96);
-}
-
-voa-input-addon[variant="currency-post"]::part(dropdown-icon) {
-  width: 24px;
-  height: 24px;
-  color: var(--text-placeholder, #9f9fa8);
-}
-

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

@@ -1,307 +0,0 @@
-/* 
- * VoaInput Component Styles
- * 
- * Estilos aplicados via CSS Parts API usando design tokens semânticos.
- * Baseado no design do Figma: https://www.figma.com/design/wDStUEuqpl7Tu1oHpiAml6/Voa-Design-System?node-id=437-2006
- */
-
-/* Input Container */
-voa-input::part(container) {
-  background-color: var(--colors-structure-bg-base, #ffffff);
-  border: var(--border-width-medium) solid var(--structure-colors-border-color, #adb5bd);
-  border-radius: var(--structure-large-radius-lg, 16px);
-  padding: var(--structure-large-spacing-rg, 12px);
-  gap: var(--structure-large-spacing-sm, 8px);
-  transition: border-color 0.2s ease, box-shadow 0.2s ease;
-  box-shadow: var(--voa-shadow-input);
-}
-
-/* Quando há prefix ou suffix, remover padding do container mas manter altura */
-voa-input[data-has-prefix="true"]::part(container),
-voa-input[data-has-suffix="true"]::part(container) {
-  padding: 0;
-  gap: 0;
-  align-items: stretch;
-}
-
-/* Garantir que addons não redimensionem o container */
-voa-input[data-has-prefix="true"]::part(prefix),
-voa-input[data-has-suffix="true"]::part(suffix) {
-  align-self: stretch;
-  display: flex;
-  align-items: center;
-  margin: 0;
-  padding: 0;
-}
-
-/* Padding do input quando há addons - apenas nas laterais sem addon */
-voa-input[data-has-prefix="true"]:not([data-has-suffix="true"])::part(input) {
-  padding: 0;
-  padding-right: var(--structure-large-spacing-rg, 12px);
-}
-
-voa-input[data-has-suffix="true"]:not([data-has-prefix="true"])::part(input) {
-  padding: 0;
-  padding-left: var(--structure-large-spacing-rg, 12px);
-}
-
-voa-input[data-has-prefix="true"][data-has-suffix="true"]::part(input) {
-  padding: 0;
-}
-
-/* Padding padrão do input quando não há addons */
-voa-input:not([data-has-prefix="true"]):not([data-has-suffix="true"])::part(input) {
-  padding: 0 var(--structure-large-spacing-rg, 12px);
-}
-
-voa-input[size="sm"]::part(container) {
-  padding: var(--structure-large-spacing-sm, 8px);
-  height: 32px;
-  max-height: 32px;
-}
-
-voa-input[size="sm"][data-has-prefix="true"]::part(container),
-voa-input[size="sm"][data-has-suffix="true"]::part(container) {
-  padding: 0;
-  gap: 0;
-  height: 32px;
-  max-height: 32px;
-}
-
-voa-input[size="sm"][data-has-prefix="true"]:not([data-has-suffix="true"])::part(input) {
-  padding: 0;
-  padding-right: var(--structure-large-spacing-sm, 8px);
-}
-
-voa-input[size="sm"][data-has-suffix="true"]:not([data-has-prefix="true"])::part(input) {
-  padding: 0;
-  padding-left: var(--structure-large-spacing-sm, 8px);
-}
-
-voa-input[size="sm"][data-has-prefix="true"][data-has-suffix="true"]::part(input) {
-  padding: 0;
-}
-
-voa-input[size="sm"]:not([data-has-prefix="true"]):not([data-has-suffix="true"])::part(input) {
-  padding: 0 var(--structure-large-spacing-sm, 8px);
-}
-
-voa-input[size="md"]::part(container) {
-  padding: var(--structure-large-spacing-rg, 12px);
-  height: 48px;
-  max-height: 48px;
-}
-
-voa-input[size="md"][data-has-prefix="true"]::part(container),
-voa-input[size="md"][data-has-suffix="true"]::part(container) {
-  padding: 0;
-  gap: 0;
-  height: 48px;
-  max-height: 48px;
-}
-
-voa-input[size="md"][data-has-prefix="true"]:not([data-has-suffix="true"])::part(input) {
-  padding: 0;
-  padding-right: var(--structure-large-spacing-rg, 12px);
-}
-
-voa-input[size="md"][data-has-suffix="true"]:not([data-has-prefix="true"])::part(input) {
-  padding: 0;
-  padding-left: var(--structure-large-spacing-rg, 12px);
-}
-
-voa-input[size="md"][data-has-prefix="true"][data-has-suffix="true"]::part(input) {
-  padding: 0;
-}
-
-voa-input[size="md"]:not([data-has-prefix="true"]):not([data-has-suffix="true"])::part(input) {
-  padding: 0 var(--structure-large-spacing-rg, 12px);
-}
-
-voa-input[size="lg"]::part(container) {
-  padding: var(--structure-large-spacing-rg, 12px);
-  height: 56px;
-  max-height: 56px;
-}
-
-voa-input[size="lg"][data-has-prefix="true"]::part(container),
-voa-input[size="lg"][data-has-suffix="true"]::part(container) {
-  padding: 0;
-  gap: 0;
-  height: 56px;
-  max-height: 56px;
-}
-
-voa-input[size="lg"][data-has-prefix="true"]:not([data-has-suffix="true"])::part(input) {
-  padding: 0;
-  padding-right: var(--structure-large-spacing-rg, 12px);
-}
-
-voa-input[size="lg"][data-has-suffix="true"]:not([data-has-prefix="true"])::part(input) {
-  padding: 0;
-  padding-left: var(--structure-large-spacing-rg, 12px);
-}
-
-voa-input[size="lg"][data-has-prefix="true"][data-has-suffix="true"]::part(input) {
-  padding: 0;
-}
-
-voa-input[size="lg"]:not([data-has-prefix="true"]):not([data-has-suffix="true"])::part(input) {
-  padding: 0 var(--structure-large-spacing-rg, 12px);
-}
-
-/* Input element */
-voa-input::part(input) {
-  font-family: var(--typography-base-family-sans, 'Lato', sans-serif);
-  font-size: var(--typography-base-type-scale-6, 16px);
-  line-height: var(--typography-base-type-scale-4, 24px);
-  color: var(--text-primary, #0b1215);
-  background-color: transparent;
-  border: none;
-  outline: none;
-  flex: 1 1 0%;
-  min-width: 0;
-  width: 100%;
-  height: 100%;
-  box-sizing: border-box;
-  padding: 0;
-}
-
-voa-input::part(input)::placeholder {
-  color: var(--text-placeholder, #9f9fa8);
-}
-
-/* Title Row & Label */
-voa-input::part(title-row) {
-  margin-bottom: 6px;
-}
-
-voa-input::part(label) {
-  font-family: var(--typography-base-family-sans, 'Lato', sans-serif);
-  font-size: var(--typography-base-type-scale-5, 20px);
-  font-weight: var(--typography-base-body-sm-bold-weight);
-  line-height: 32px;
-  color: var(--text-secondary, #495057);
-  display: block;
-}
-
-/* Info */
-voa-input::part(info) {
-  color: var(--text-secondary, #495057);
-  font-family: var(--typography-base-family-sans, 'Lato', sans-serif);
-  font-size: var(--typography-base-type-scale-8, 12px);
-  line-height: var(--typography-base-body-sm-regular-line-height, 16px);
-  padding-bottom: 6px; /* Align with label baseline visually */
-}
-
-voa-input::part(info-icon) {
-  color: var(--text-secondary, #495057);
-}
-
-voa-input .voa-input__required-indicator {
-  color: var(--semantic-colors-danger, #e51937);
-  margin-left: var(--structure-large-spacing-xxs, 2px);
-}
-
-/* Helper text */
-voa-input::part(helper-text) {
-  font-family: var(--typography-base-family-sans, 'Lato', sans-serif);
-  font-size: var(--typography-base-body-sm-regular-size, 14px);
-  line-height: var(--typography-base-body-sm-regular-line-height, 16px);
-  color: var(--text-secondary, #495057);
-  margin-top: 6px;
-  display: block;
-}
-
-voa-input[error]::part(helper-text) {
-  color: var(--semantic-colors-danger, #e51937);
-}
-
-voa-input[valid]::part(helper-text) {
-  color: var(--semantic-colors-success, #109e7c);
-}
-
-voa-input[warning]::part(helper-text) {
-  color: var(--semantic-colors-warning, #ff9900);
-}
-
-/* States - Hover */
-voa-input:not([disabled]):not([readonly]):hover::part(container) {
-  border-color: var(--input-hover-border-color, var(--brand-base, #0064cb));
-  background-color: var(--palette-gray-gray-1, #f1f3f5);
-}
-
-/* States - Focused */
-voa-input:focus-within::part(container) {
-  border-color: var(--input-focus-border-color, var(--brand-base, #0064cb));
-  box-shadow: var(--input-active-inner-shadow, inset 0px 0px 8px 2px rgba(0, 100, 203, 0.5)),
-              var(--input-active-drop-shadow, 0px 4px 4px rgba(24, 24, 27, 0.15));
-}
-
-/* States - Error */
-voa-input[error]::part(container) {
-  border-color: var(--semantic-colors-danger, #e51937);
-}
-
-voa-input[error]:focus-within::part(container) {
-  border-color: var(--semantic-colors-danger, #e51937);
-  box-shadow: inset 0px 0px 8px 2px var(--semantic-colors-danger, #e51937),
-              var(--input-active-drop-shadow, 0px 4px 4px rgba(24, 24, 27, 0.15));
-}
-
-/* States - Valid */
-voa-input[valid]::part(container) {
-  border-color: var(--semantic-colors-success, #109e7c);
-}
-
-voa-input[valid]:focus-within::part(container) {
-  border-color: var(--semantic-colors-success, #109e7c);
-  box-shadow: inset 0px 0px 8px 2px var(--semantic-colors-success, #109e7c),
-              var(--input-active-drop-shadow, 0px 4px 4px rgba(24, 24, 27, 0.15));
-}
-
-/* States - Warning */
-voa-input[warning]::part(container) {
-  border-color: var(--semantic-colors-warning, #ff9900);
-}
-
-voa-input[warning]:focus-within::part(container) {
-  border-color: var(--semantic-colors-warning, #ff9900);
-  box-shadow: inset 0px 0px 8px 2px var(--semantic-colors-warning, #ff9900),
-              var(--input-active-drop-shadow, 0px 4px 4px rgba(24, 24, 27, 0.15));
-}
-
-/* States - Disabled */
-voa-input[disabled]::part(container) {
-  background-color: var(--colors-structure-bg-base-disabled, rgba(255, 255, 255, 0.25));
-  border-color: var(--structure-colors-border-color-secondary, #dee2e6);
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-
-voa-input[disabled]::part(input) {
-  color: var(--text-disabled, #0b1215);
-  cursor: not-allowed;
-}
-
-/* States - Readonly */
-voa-input[readonly]::part(container) {
-  background-color: var(--colors-structure-bg-container, #f1f3f5);
-}
-
-/* Prefix/Suffix slots */
-voa-input::part(prefix),
-voa-input::part(suffix) {
-  display: flex;
-  align-items: center;
-  flex-shrink: 0;
-  flex-grow: 0;
-  width: auto;
-  min-width: 0;
-}
-
-/* Unfilled variant */
-voa-input[fill="false"]::part(container) {
-  background-color: transparent;
-  box-shadow: none;
-}

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

@@ -1,34 +0,0 @@
-/* 
- * VoaKeybinding Component Styles
- * 
- * Estilos aplicados via CSS Parts API usando design tokens semânticos.
- * Baseado no design do Figma: https://www.figma.com/design/wDStUEuqpl7Tu1oHpiAml6/Voa-Design-System?node-id=439-2322
- */
-
-voa-keybinding::part(base) {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--spacing-spacing-xxs, 2px);
-  border: var(--border-width-thin) solid var(--structure-colors-border-color);
-  border-radius: var(--structure-large-radius-sm);
-  padding: var(--structure-large-radius-xs) var(--structure-large-spacing-xs);
-  background-color: transparent;
-}
-
-voa-keybinding::part(key-icon) {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 16px;
-  height: 16px;
-  color: var(--palette-gray-gray-6, #868e96);
-}
-
-voa-keybinding::part(key-text) {
-  font-family: var(--font-family-sans, 'Lato', sans-serif);
-  font-size: var(--typography-base-body-sm-regular-size);
-  font-weight: var(--typography-base-body-sm-bold-weight);
-  line-height: normal;
-  color: var(--palette-gray-gray-6, #868e96);
-}
-