voa-ds-core 1.0.8 → 1.0.10

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

@@ -0,0 +1,204 @@
+/* 
+ * 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

@@ -0,0 +1,307 @@
+/* 
+ * 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

@@ -0,0 +1,34 @@
+/* 
+ * 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);
+}
+