ds-tis 1.0.0-beta.10

package/css/components/skeleton.css

@@ -0,0 +1,52 @@
+/* ============================================================
+   COMPONENT: Skeleton
+   ============================================================ */
+
+@keyframes ds-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.4; }
+}
+
+/* Base skeleton — Figma: fill via component tokens */
+.ds-skeleton {
+  display: block;
+  animation: ds-pulse 1.5s ease-in-out infinite;
+}
+
+/* ---------------------------------------------------------
+   Variants
+   --------------------------------------------------------- */
+
+/* Text skeleton — Figma: 12px height, radius/md */
+.ds-skeleton--text {
+  background-color: var(--ds-skeleton-text-fill-default);
+  height: var(--ds-skeleton-text-height-default);
+  width: 100%;
+  border-radius: var(--ds-skeleton-text-radius-default);
+}
+
+/* Circle skeleton */
+.ds-skeleton--circle {
+  background-color: var(--ds-skeleton-circle-fill-default);
+  width: var(--ds-skeleton-circle-size-default);
+  height: var(--ds-skeleton-circle-size-default);
+  border-radius: var(--ds-skeleton-circle-radius-default);
+  flex-shrink: 0;
+}
+
+/* Rectangle skeleton */
+.ds-skeleton--rectangle {
+  background-color: var(--ds-skeleton-rectangle-fill-default);
+  width: 100%;
+  height: var(--ds-skeleton-rectangle-height-default);
+  border-radius: var(--ds-skeleton-rectangle-radius-default);
+}
+
+/* ---------------------------------------------------------
+   Reduced motion
+   --------------------------------------------------------- */
+@media (prefers-reduced-motion: reduce) {
+  .ds-skeleton {
+    animation: none;
+  }
+}

package/css/components/spinner.css

@@ -0,0 +1,59 @@
+/* ============================================================
+   COMPONENT: Spinner
+   ============================================================ */
+
+@keyframes ds-spin {
+  to { transform: rotate(360deg); }
+}
+
+/* Base spinner — Figma: track + indicator via component tokens */
+.ds-spinner {
+  display: inline-block;
+  border-radius: var(--ds-spinner-radius-default);
+  border: var(--ds-spinner-ring-stroke-width-default) solid var(--ds-spinner-track-border-color-default);
+  border-top-color: var(--ds-spinner-indicator-border-color-default);
+  /* motion.duration.slower (600ms) e motion.ease.linear são tokens
+     dedicados a loops contínuos. NÃO usar duration.fast/normal/slow
+     (são pra transições de estado, 150-300ms) nem ease.default (curva
+     quebra rotação constante). */
+  animation: ds-spin var(--ds-motion-duration-slower) var(--ds-motion-ease-linear) infinite;
+  flex-shrink: 0;
+}
+
+/* Default size: md */
+.ds-spinner,
+.ds-spinner--md {
+  width: var(--ds-spinner-size-md);
+  height: var(--ds-spinner-size-md);
+}
+
+/* ---------------------------------------------------------
+   Sizes
+   --------------------------------------------------------- */
+.ds-spinner--sm {
+  width: var(--ds-spinner-size-sm);
+  height: var(--ds-spinner-size-sm);
+}
+
+.ds-spinner--lg {
+  width: var(--ds-spinner-size-lg);
+  height: var(--ds-spinner-size-lg);
+}
+
+/* ---------------------------------------------------------
+   Styles
+   --------------------------------------------------------- */
+.ds-spinner--on-color {
+  border-color: var(--ds-spinner-track-border-color-on-color);
+  border-top-color: var(--ds-spinner-indicator-border-color-on-color);
+}
+
+/* ---------------------------------------------------------
+   Reduced motion
+   --------------------------------------------------------- */
+@media (prefers-reduced-motion: reduce) {
+  .ds-spinner {
+    animation: none;
+    opacity: var(--ds-opacity-disabled);
+  }
+}

package/css/components/tabs.css

@@ -0,0 +1,79 @@
+/* ============================================================
+   COMPONENT: Tabs
+   ============================================================ */
+
+.ds-tabs {
+  display: flex;
+  border-bottom: var(--ds-tabs-list-border-width-default) solid var(--ds-overlay-default);
+  gap: 0;
+}
+
+/* Tab — Figma: padding pl/pr space/lg, pt space/md (12), pb 0
+   Gap: 10px before the 2px indicator; Label: label/md (14px Bold / 20px) */
+.ds-tab {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  padding: var(--ds-tabs-item-padding-top-default) var(--ds-tabs-item-padding-x-default) var(--ds-tabs-item-indicator-gap-default);
+  font-size: var(--ds-tabs-label-font-size-default);
+  font-weight: var(--ds-tabs-label-font-weight-default);
+  line-height: var(--ds-tabs-label-line-height-default);
+  letter-spacing: var(--ds-tabs-label-letter-spacing-default);
+  color: var(--ds-tabs-label-color-default);
+  background: none;
+  border: none;
+  border-bottom: var(--ds-tabs-indicator-height-default) solid transparent;
+  border-radius: 0;
+  cursor: pointer;
+  transition: color var(--ds-motion-duration-fast) var(--ds-motion-ease-default),
+              border-color var(--ds-motion-duration-fast) var(--ds-motion-ease-default);
+  margin-bottom: calc(var(--ds-tabs-list-border-width-default) * -1);
+}
+
+.ds-tab:hover:not(:disabled):not(.ds-tab--active) {
+  color: var(--ds-tabs-label-color-hover);
+}
+
+.ds-tab--active {
+  color: var(--ds-tabs-label-color-active);
+  border-bottom-color: var(--ds-tabs-indicator-fill-active);
+}
+
+.ds-tab:focus-visible {
+  outline: none;
+}
+
+.ds-tab:focus-visible::after {
+  content: "";
+  position: absolute;
+  top: calc(var(--ds-focus-ring-width) * -2);
+  right: calc(var(--ds-focus-ring-width) * -2);
+  bottom: calc((var(--ds-focus-ring-width) * -2) - var(--ds-tabs-indicator-height-default));
+  left: calc(var(--ds-focus-ring-width) * -2);
+  box-sizing: border-box;
+  border: var(--ds-focus-ring-width) solid var(--ds-focus-ring-color-default);
+  border-radius: var(--ds-tabs-focus-ring-radius-default);
+  pointer-events: none;
+}
+
+.ds-tab:disabled {
+  color: var(--ds-tabs-label-color-disabled);
+  cursor: not-allowed;
+}
+
+/* Tab panel */
+.ds-tab-panel {
+  padding: var(--ds-tabs-panel-padding-y-default) 0;
+}
+
+.ds-tab-panel[hidden] {
+  display: none;
+}
+
+/* ---------------------------------------------------------
+   Reduced motion
+   --------------------------------------------------------- */
+@media (prefers-reduced-motion: reduce) {
+  .ds-tab { transition: none; }
+}

package/css/components/textarea.css

@@ -0,0 +1,218 @@
+/* ==========================================================================
+   Textarea – .ds-textarea
+   ========================================================================== */
+
+/* Wrapper
+   ========================================================================== */
+
+.ds-textarea {
+  display: flex;
+  width: 100%;
+  border: var(--ds-field-border-width) solid var(--ds-field-border-color-default);
+  border-radius: var(--ds-field-radius);
+  background: var(--ds-field-bg-default);
+  transition: border-color var(--ds-motion-duration-fast) var(--ds-motion-ease-default),
+              box-shadow var(--ds-motion-duration-fast) var(--ds-motion-ease-default);
+}
+
+/* Sizes
+   ========================================================================== */
+
+.ds-textarea,
+.ds-textarea--md {
+  font-size: var(--ds-textarea-text-font-size-md);
+  line-height: var(--ds-textarea-text-line-height-md);
+}
+
+.ds-textarea--sm {
+  font-size: var(--ds-textarea-text-font-size-sm);
+  line-height: var(--ds-textarea-text-line-height-sm);
+}
+
+.ds-textarea--lg {
+  font-size: var(--ds-textarea-text-font-size-lg);
+  line-height: var(--ds-textarea-text-line-height-lg);
+}
+
+/* Field
+   ========================================================================== */
+
+.ds-textarea__field {
+  flex: 1;
+  width: 100%;
+  box-sizing: border-box;
+  border: none;
+  background: transparent;
+  outline: none;
+  color: var(--ds-field-value-color-default);
+  font-size: inherit;
+  font-family: var(--ds-textarea-text-font-family-default);
+  font-weight: var(--ds-textarea-text-font-weight-default);
+  letter-spacing: var(--ds-textarea-text-letter-spacing-default);
+  resize: vertical;
+  min-height: var(--ds-textarea-field-min-height-md);
+  min-width: 0;
+  padding: var(--ds-field-padding-y-md) var(--ds-textarea-padding-x-md);
+  line-height: inherit;
+}
+
+.ds-textarea--sm .ds-textarea__field {
+  min-height: var(--ds-textarea-field-min-height-sm);
+  padding: var(--ds-field-padding-y-sm) var(--ds-textarea-padding-x-sm);
+}
+
+.ds-textarea--lg .ds-textarea__field {
+  min-height: var(--ds-textarea-field-min-height-lg);
+  padding: var(--ds-field-padding-y-lg) var(--ds-textarea-padding-x-lg);
+}
+
+.ds-textarea__field::placeholder {
+  color: var(--ds-field-placeholder-color-default);
+}
+
+/* States
+   ========================================================================== */
+
+/* Hover */
+.ds-textarea:hover:not(.ds-textarea--disabled):not(:focus-within) {
+  border-color: var(--ds-field-border-color-hover);
+}
+
+/* Focused */
+.ds-textarea:focus-within {
+  background: var(--ds-field-bg-default);
+  border-color: var(--ds-field-border-color-focus);
+  border-radius: var(--ds-field-radius);
+  outline: var(--ds-focus-ring-width) solid var(--ds-focus-ring-color-default);
+  outline-offset: var(--ds-focus-ring-width);
+}
+
+/* Error */
+.ds-textarea--error,
+.ds-field--error .ds-textarea {
+  background: var(--ds-field-bg-default);
+  border-color: var(--ds-field-border-color-error);
+}
+
+.ds-textarea--error:hover:not(.ds-textarea--disabled):not(:focus-within),
+.ds-field--error .ds-textarea:hover:not(.ds-textarea--disabled):not(:focus-within) {
+  background: var(--ds-field-bg-default);
+  border-color: var(--ds-field-border-color-error-hover);
+}
+
+.ds-textarea--error:focus-within,
+.ds-field--error .ds-textarea:focus-within {
+  border-color: var(--ds-field-border-color-error);
+  outline-color: var(--ds-focus-ring-color-error);
+}
+
+/* Filled */
+.ds-textarea--filled {
+  background: var(--ds-field-bg-default);
+  border-color: var(--ds-field-border-color-filled);
+}
+
+.ds-textarea--filled.ds-textarea--error,
+.ds-field--error .ds-textarea--filled {
+  background: var(--ds-field-bg-default);
+  border-color: var(--ds-field-border-color-error);
+}
+
+.ds-textarea--filled.ds-textarea--error:hover:not(.ds-textarea--disabled):not(:focus-within),
+.ds-field--error .ds-textarea--filled:hover:not(.ds-textarea--disabled):not(:focus-within) {
+  background: var(--ds-field-bg-default);
+  border-color: var(--ds-field-border-color-error-hover);
+}
+
+/* Disabled */
+.ds-textarea--disabled,
+.ds-textarea:has(.ds-textarea__field:disabled) {
+  background: var(--ds-field-bg-disabled);
+  border-color: var(--ds-field-border-color-disabled);
+  pointer-events: none;
+}
+
+.ds-textarea--disabled .ds-textarea__field,
+.ds-textarea__field:disabled {
+  color: var(--ds-field-value-color-disabled);
+  resize: none;
+}
+
+.ds-textarea--disabled .ds-textarea__field::placeholder,
+.ds-textarea__field:disabled::placeholder {
+  color: var(--ds-field-placeholder-color-disabled);
+}
+
+/* Readonly */
+.ds-textarea--readonly,
+.ds-textarea:has(.ds-textarea__field:read-only) {
+  background: var(--ds-field-bg-readonly);
+  border-color: var(--ds-field-border-color-readonly);
+}
+
+.ds-textarea--readonly .ds-textarea__field,
+.ds-textarea__field:read-only {
+  color: var(--ds-field-value-color-readonly);
+}
+
+.ds-textarea--readonly:focus-within,
+.ds-textarea:has(.ds-textarea__field:read-only):focus-within {
+  background: var(--ds-field-bg-readonly);
+  border-color: var(--ds-field-border-color-readonly);
+  outline-color: var(--ds-focus-ring-color-readonly);
+}
+
+/* Character Counter
+   ========================================================================== */
+
+.ds-field__counter {
+  font-size: var(--ds-body-font-size-xs);
+  color: var(--ds-content-default);
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+
+.ds-field__counter--over {
+  color: var(--ds-feedback-error-content-default);
+  font-weight: var(--ds-body-font-weight-medium);
+}
+
+/* ---------------------------------------------------------
+   Field anatomy — Label row, Required indicator
+   --------------------------------------------------------- */
+
+/*
+  Uses shared .ds-field wrapper and .ds-field__helper from form-field.css.
+  .ds-field__counter (above) is the character counter — separate from .ds-field__helper.
+
+  HTML structure:
+  <div class="ds-field">
+    <div class="ds-textarea__label-row">
+      <label class="ds-textarea__label" for="field-id">Rótulo</label>
+      <span class="ds-textarea__required" aria-hidden="true">*</span>
+    </div>
+    <div class="ds-textarea">
+      <textarea class="ds-textarea__field" id="field-id"
+                aria-required="true"
+                aria-describedby="field-id-helper"></textarea>
+    </div>
+    <div style="display:flex; justify-content:space-between">
+      <span class="ds-field__helper" id="field-id-helper">Texto auxiliar</span>
+      <span class="ds-field__counter">0/200</span>
+    </div>
+  </div>
+*/
+
+/*
+  Field anatomy (Label row, Required, Helper) uses shared .ds-field__* classes
+  defined in form-field.css. See form-field.css for .ds-field__label-row, .ds-field__label,
+  .ds-field__required, .ds-field__helper, .ds-field--no-label, .ds-field--no-helper.
+  .ds-field__counter (above) is the character counter — distinct from .ds-field__helper.
+*/
+
+/* ---------------------------------------------------------
+   Reduced motion
+   --------------------------------------------------------- */
+@media (prefers-reduced-motion: reduce) {
+  .ds-textarea { transition: none; }
+}

package/css/components/toggle.css

@@ -0,0 +1,202 @@
+/* ============================================================
+   COMPONENT: Toggle / Switch
+   ============================================================ */
+
+/**
+ * LÓGICA DE ALINHAMENTO (Figma spec):
+ * O Toggle segue o padrão "Content Frame". O interruptor (track) fica à esquerda
+ * e o conteúdo (Label + Desc + Helper) fica à direita em uma coluna flex.
+ * Alinhamento é sempre TOP (flex-start) para suportar textos multilinha.
+ *
+ * ESCALA DIMENSIONAL (ADR-013/015/019):
+ * Proporção corrigida (aprox 1.8x - 2x):
+ * Sm: 28x16px | Md: 44x24px | Lg: 56x32px (Grade 4px).
+ */
+
+.ds-toggle-label {
+  --toggle-target-height: var(--ds-toggle-target-height-md);
+  --toggle-thumb-size: var(--ds-toggle-thumb-size-md);
+
+  display: inline-flex;
+  align-items: flex-start;
+  gap: var(--ds-toggle-target-gap-default);
+  cursor: pointer;
+  padding: var(--ds-space-xs);
+  min-height: var(--toggle-target-height);
+  color: var(--ds-form-field-label-color-default);
+  user-select: none;
+}
+
+/* Track — Hidden native checkbox styled */
+.ds-toggle {
+  appearance: none;
+  -webkit-appearance: none;
+  position: relative;
+  background-color: var(--ds-toggle-track-fill-off-default);
+  border: var(--ds-toggle-track-border-width-default) solid var(--ds-toggle-track-border-color-off-default);
+  border-radius: var(--ds-toggle-track-radius-default);
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: background-color var(--ds-motion-duration-fast) var(--ds-motion-ease-default),
+              border-color var(--ds-motion-duration-fast) var(--ds-motion-ease-default);
+
+  --toggle-height: var(--ds-toggle-track-height-md);
+  --toggle-width: var(--ds-toggle-track-width-md);
+  --thumb-gap: var(--ds-toggle-thumb-inset-default);
+  --track-border-width: var(--ds-toggle-track-border-width-default);
+  
+  width: var(--toggle-width);
+  height: var(--toggle-height);
+}
+
+/* Thumb */
+.ds-toggle::after {
+  content: '';
+  position: absolute;
+  top: calc(var(--thumb-gap) - var(--track-border-width));
+  left: calc(var(--thumb-gap) - var(--track-border-width));
+  width: var(--toggle-thumb-size);
+  height: var(--toggle-thumb-size);
+  border-radius: var(--ds-toggle-thumb-radius-default);
+  background-color: var(--ds-toggle-thumb-fill-off-default);
+  box-shadow: var(--ds-shadow-card);
+  transition: transform var(--ds-motion-duration-fast) var(--ds-motion-ease-default),
+              background-color var(--ds-motion-duration-fast) var(--ds-motion-ease-default);
+}
+
+/* Checked (On) State */
+.ds-toggle:checked {
+  background-color: var(--ds-toggle-track-fill-on-default);
+  border-width: 0;
+  --track-border-width: 0px;
+}
+
+.ds-toggle:checked::after {
+  background-color: var(--ds-toggle-thumb-fill-on-default);
+  transform: translateX(calc(var(--toggle-width) - var(--toggle-thumb-size) - (var(--thumb-gap) * 2)));
+}
+
+/* Hover State */
+.ds-toggle:hover:not(:disabled) {
+  background-color: var(--ds-toggle-track-fill-off-hover);
+  border-color: var(--ds-toggle-track-border-color-off-hover);
+}
+
+.ds-toggle:hover:not(:disabled)::after {
+  background-color: var(--ds-toggle-thumb-fill-off-hover);
+}
+
+.ds-toggle:checked:hover:not(:disabled) {
+  background-color: var(--ds-toggle-track-fill-on-hover);
+}
+
+.ds-toggle:checked:hover:not(:disabled)::after {
+  background-color: var(--ds-toggle-thumb-fill-on-hover);
+}
+
+/* Focus State */
+.ds-toggle:focus-visible {
+  outline: var(--ds-focus-ring-width) solid var(--ds-focus-ring-color-default);
+  outline-offset: var(--ds-focus-ring-width);
+}
+
+/* Disabled State */
+.ds-toggle:disabled {
+  background-color: var(--ds-toggle-track-fill-off-disabled);
+  border-color: var(--ds-toggle-track-border-color-off-disabled);
+  cursor: not-allowed;
+}
+
+.ds-toggle:disabled::after {
+  background-color: var(--ds-toggle-thumb-fill-off-disabled);
+}
+
+.ds-toggle:checked:disabled {
+  background-color: var(--ds-toggle-track-fill-on-disabled);
+  border-width: 0;
+}
+
+.ds-toggle:checked:disabled::after {
+  background-color: var(--ds-toggle-thumb-fill-on-disabled);
+}
+
+.ds-toggle-label:has(.ds-toggle:disabled) {
+  cursor: not-allowed;
+  color: var(--ds-form-field-label-color-disabled);
+}
+
+/* ---------------------------------------------------------
+   Sizes (Figma Specs - Grid 4px)
+   --------------------------------------------------------- */
+
+/* Small (28x16px) */
+.ds-toggle-label:has(.ds-toggle--sm) {
+  --toggle-target-height: var(--ds-toggle-target-height-sm);
+  --toggle-thumb-size: var(--ds-toggle-thumb-size-sm);
+}
+
+.ds-toggle--sm {
+  --toggle-height: var(--ds-toggle-track-height-sm);
+  --toggle-width: var(--ds-toggle-track-width-sm);
+}
+
+/* Large (56x32px) */
+.ds-toggle-label:has(.ds-toggle--lg) {
+  --toggle-target-height: var(--ds-toggle-target-height-lg);
+  --toggle-thumb-size: var(--ds-toggle-thumb-size-lg);
+}
+
+.ds-toggle--lg {
+  --toggle-height: var(--ds-toggle-track-height-lg);
+  --toggle-width: var(--ds-toggle-track-width-lg);
+}
+
+/* ---------------------------------------------------------
+   Content Frame Anatomy
+   --------------------------------------------------------- */
+
+.ds-toggle__content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ds-toggle-content-gap-default);
+  min-width: 0;
+}
+
+/* Label text (label/md: 14px bold) */
+.ds-toggle__label {
+  font-family: var(--ds-form-field-label-font-family-default);
+  font-size: var(--ds-form-field-label-font-size-default);
+  font-weight: var(--ds-body-font-weight-bold);
+  line-height: var(--ds-form-field-label-line-height-default);
+  color: var(--ds-form-field-label-color-default);
+}
+
+/* Description (body/sm: 14px regular) */
+.ds-toggle__description {
+  font-size: var(--ds-body-font-size-sm);
+  font-weight: var(--ds-body-font-weight-regular);
+  line-height: var(--ds-body-line-height-sm);
+  color: var(--ds-form-field-description-color-default);
+  white-space: pre-wrap;
+}
+
+/* Helper text (caption/sm: 11px regular) */
+.ds-toggle__helper {
+  font-size: var(--ds-body-font-size-xs);
+  font-weight: var(--ds-body-font-weight-regular);
+  line-height: var(--ds-body-line-height-xs);
+  color: var(--ds-form-field-helper-color-default);
+}
+
+.ds-toggle-label:has(.ds-toggle:disabled) .ds-toggle__label {
+  color: var(--ds-form-field-label-color-disabled);
+}
+
+/* ---------------------------------------------------------
+   Reduced motion
+   --------------------------------------------------------- */
+@media (prefers-reduced-motion: reduce) {
+  .ds-toggle-label,
+  .ds-toggle,
+  .ds-toggle::after { transition: none; }
+}