ds-tis 1.0.0-beta.10

package/css/components/accordion.css

@@ -0,0 +1,153 @@
+/* ==========================================================================
+   Accordion
+   ========================================================================== */
+
+.ds-accordion {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ds-space-2xs);
+  inline-size: 100%;
+  color: var(--ds-accordion-content-color-default);
+}
+
+.ds-accordion__item {
+  overflow: hidden;
+  border: var(--ds-accordion-item-border-width-default) solid var(--ds-accordion-item-border-color-default);
+  border-radius: var(--ds-accordion-item-radius-default);
+  background: var(--ds-accordion-item-bg-default);
+  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);
+}
+
+.ds-accordion__item:hover:not(.ds-accordion__item--disabled):not([aria-disabled="true"]) {
+  border-color: var(--ds-accordion-item-border-color-hover);
+  background: var(--ds-accordion-item-bg-hover);
+}
+
+.ds-accordion__item:has(.ds-accordion__trigger:focus-visible) {
+  border-color: var(--ds-accordion-item-border-color-focus);
+}
+
+.ds-accordion__item--disabled,
+.ds-accordion__item[aria-disabled="true"] {
+  border-color: var(--ds-accordion-item-border-color-default);
+  background: var(--ds-accordion-item-bg-disabled);
+}
+
+.ds-accordion__trigger {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: var(--ds-accordion-trigger-gap-md);
+  inline-size: 100%;
+  min-block-size: var(--ds-accordion-trigger-height-md);
+  padding: var(--ds-accordion-trigger-padding-y-md) var(--ds-accordion-trigger-padding-x-md);
+  border: 0;
+  background: transparent;
+  color: var(--ds-accordion-trigger-content-color-default);
+  font-family: var(--ds-body-font-family-sans);
+  font-size: var(--ds-body-font-size-md);
+  font-weight: var(--ds-body-font-weight-semibold);
+  line-height: var(--ds-body-line-height-md);
+  text-align: start;
+  cursor: pointer;
+}
+
+.ds-accordion__trigger:focus-visible {
+  outline: none;
+}
+
+.ds-accordion__trigger:focus-visible::after {
+  content: "";
+  position: absolute;
+  inset: calc(var(--ds-focus-ring-width) * -1);
+  border: var(--ds-focus-ring-width) solid var(--ds-focus-ring-color-default);
+  border-radius: var(--ds-accordion-focus-ring-radius-default);
+  pointer-events: none;
+}
+
+.ds-accordion__title {
+  flex: 1;
+  min-inline-size: 0;
+  overflow-wrap: anywhere;
+}
+
+.ds-accordion__leading-icon,
+.ds-accordion__chevron {
+  flex: 0 0 auto;
+  inline-size: var(--ds-accordion-leading-icon-size-md);
+  block-size: var(--ds-accordion-leading-icon-size-md);
+  color: var(--ds-accordion-leading-icon-color-default);
+  fill: none;
+  stroke: currentColor;
+  stroke-width: var(--ds-accordion-leading-icon-stroke-width-md);
+}
+
+.ds-accordion__chevron {
+  inline-size: var(--ds-accordion-chevron-size-md);
+  block-size: var(--ds-accordion-chevron-size-md);
+  color: var(--ds-accordion-chevron-color-default);
+  stroke-width: var(--ds-accordion-chevron-stroke-width-md);
+  transition: transform var(--ds-motion-duration-fast) var(--ds-motion-ease-default);
+}
+
+.ds-accordion__trigger[aria-expanded="true"] .ds-accordion__chevron,
+.ds-accordion__item[data-state="open"] .ds-accordion__chevron,
+.ds-accordion__item[open] .ds-accordion__chevron {
+  transform: rotate(180deg);
+}
+
+.ds-accordion__panel {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ds-accordion-content-gap-md);
+  padding: 0 var(--ds-accordion-content-padding-x-md) var(--ds-accordion-content-padding-bottom-md);
+  color: var(--ds-accordion-content-color-default);
+  font-family: var(--ds-body-font-family-sans);
+  font-size: var(--ds-body-font-size-sm);
+  font-weight: var(--ds-body-font-weight-regular);
+  line-height: var(--ds-body-line-height-sm);
+}
+
+.ds-accordion__panel[hidden] {
+  display: none;
+}
+
+.ds-accordion__panel > :where(p, ul, ol, dl, blockquote, figure) {
+  margin: 0;
+}
+
+.ds-accordion__item--disabled .ds-accordion__trigger,
+.ds-accordion__trigger:disabled,
+.ds-accordion__trigger[aria-disabled="true"],
+.ds-accordion__item[aria-disabled="true"] .ds-accordion__trigger {
+  color: var(--ds-accordion-trigger-content-color-disabled);
+  cursor: not-allowed;
+}
+
+.ds-accordion__item--disabled .ds-accordion__panel,
+.ds-accordion__item[aria-disabled="true"] .ds-accordion__panel {
+  color: var(--ds-accordion-content-color-disabled);
+}
+
+.ds-accordion__item--disabled .ds-accordion__leading-icon,
+.ds-accordion__trigger:disabled .ds-accordion__leading-icon,
+.ds-accordion__trigger[aria-disabled="true"] .ds-accordion__leading-icon,
+.ds-accordion__item[aria-disabled="true"] .ds-accordion__leading-icon {
+  color: var(--ds-accordion-leading-icon-color-disabled);
+}
+
+.ds-accordion__item--disabled .ds-accordion__chevron,
+.ds-accordion__trigger:disabled .ds-accordion__chevron,
+.ds-accordion__trigger[aria-disabled="true"] .ds-accordion__chevron,
+.ds-accordion__item[aria-disabled="true"] .ds-accordion__chevron {
+  color: var(--ds-accordion-chevron-color-disabled);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ds-accordion__item,
+  .ds-accordion__chevron {
+    transition: none;
+  }
+}

package/css/components/alert.css

@@ -0,0 +1,161 @@
+/* ============================================================
+   COMPONENT: Alert
+   ============================================================ */
+
+.ds-alert {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--ds-alert-gap-default);
+  padding: var(--ds-alert-padding-default);
+  border-radius: var(--ds-alert-radius-default);
+  font-size: var(--ds-alert-description-font-size-default);
+  line-height: var(--ds-alert-description-line-height-default);
+}
+
+/* Icon — Figma: container size/md (24), ícone 20 (size/sm) */
+.ds-alert__icon {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--ds-alert-icon-size-default);
+  height: var(--ds-alert-icon-size-default);
+}
+
+.ds-alert__icon .ds-icon {
+  width: var(--ds-alert-icon-size-default);
+  height: var(--ds-alert-icon-size-default);
+  color: currentColor;
+  stroke-width: var(--ds-alert-icon-stroke-width-default);
+}
+
+/* Icon color em Subtle — tematizado por feedback via component tokens.
+   Em Filled, icon herda `color` do wrapper que já é content-contrast. */
+.ds-alert--success.ds-alert--subtle .ds-alert__icon {
+  color: var(--ds-alert-icon-color-success-subtle);
+}
+.ds-alert--warning.ds-alert--subtle .ds-alert__icon {
+  color: var(--ds-alert-icon-color-warning-subtle);
+}
+.ds-alert--error.ds-alert--subtle .ds-alert__icon {
+  color: var(--ds-alert-icon-color-error-subtle);
+}
+.ds-alert--info.ds-alert--subtle .ds-alert__icon {
+  color: var(--ds-alert-icon-color-info-subtle);
+}
+
+.ds-alert__content {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--ds-alert-content-gap-default);
+}
+
+/* Title — label/md: 14px Bold / 20px */
+.ds-alert__title {
+  font-size: var(--ds-alert-title-font-size-default);
+  font-weight: var(--ds-alert-title-font-weight-default);
+  line-height: var(--ds-alert-title-line-height-default);
+}
+
+.ds-alert__description {
+  font-size: var(--ds-alert-description-font-size-default);
+  font-weight: var(--ds-alert-description-font-weight-default);
+  line-height: var(--ds-alert-description-line-height-default);
+}
+
+.ds-alert__close {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--ds-alert-close-icon-size-default);
+  height: var(--ds-alert-close-icon-size-default);
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  color: inherit;
+  opacity: 0.7;
+  transition: opacity var(--ds-motion-duration-fast) var(--ds-motion-ease-default);
+}
+
+.ds-alert__close:hover {
+  opacity: 1;
+}
+
+.ds-alert__close .ds-icon {
+  width: var(--ds-alert-close-icon-size-default);
+  height: var(--ds-alert-close-icon-size-default);
+  color: currentColor;
+  stroke-width: var(--ds-alert-close-icon-stroke-width-default);
+}
+
+.ds-alert__close:focus-visible {
+  outline: var(--ds-focus-ring-width) solid var(--ds-focus-ring-color-default);
+  outline-offset: var(--ds-focus-ring-width);
+  border-radius: var(--ds-radius-sm);
+}
+
+/* ---------------------------------------------------------
+   Filled style
+   --------------------------------------------------------- */
+.ds-alert--success.ds-alert--filled {
+  background-color: var(--ds-alert-bg-success-filled);
+  color: var(--ds-alert-description-color-success-filled);
+}
+
+.ds-alert--warning.ds-alert--filled {
+  background-color: var(--ds-alert-bg-warning-filled);
+  color: var(--ds-alert-description-color-warning-filled);
+}
+
+.ds-alert--error.ds-alert--filled {
+  background-color: var(--ds-alert-bg-error-filled);
+  color: var(--ds-alert-description-color-error-filled);
+}
+
+.ds-alert--info.ds-alert--filled {
+  background-color: var(--ds-alert-bg-info-filled);
+  color: var(--ds-alert-description-color-info-filled);
+}
+
+/* ---------------------------------------------------------
+   Subtle style
+   --------------------------------------------------------- */
+.ds-alert--success.ds-alert--subtle {
+  background-color: var(--ds-alert-bg-success-subtle);
+  color: var(--ds-alert-description-color-subtle);
+  border: var(--ds-alert-border-width-default) solid var(--ds-alert-border-color-success-subtle);
+}
+
+.ds-alert--warning.ds-alert--subtle {
+  background-color: var(--ds-alert-bg-warning-subtle);
+  color: var(--ds-alert-description-color-subtle);
+  border: var(--ds-alert-border-width-default) solid var(--ds-alert-border-color-warning-subtle);
+}
+
+.ds-alert--error.ds-alert--subtle {
+  background-color: var(--ds-alert-bg-error-subtle);
+  color: var(--ds-alert-description-color-subtle);
+  border: var(--ds-alert-border-width-default) solid var(--ds-alert-border-color-error-subtle);
+}
+
+.ds-alert--info.ds-alert--subtle {
+  background-color: var(--ds-alert-bg-info-subtle);
+  color: var(--ds-alert-description-color-subtle);
+  border: var(--ds-alert-border-width-default) solid var(--ds-alert-border-color-info-subtle);
+}
+
+/* Description uses secondary content tone in subtle variants */
+.ds-alert--subtle .ds-alert__description {
+  color: var(--ds-alert-description-color-subtle);
+}
+
+/* ---------------------------------------------------------
+   Reduced motion
+   --------------------------------------------------------- */
+@media (prefers-reduced-motion: reduce) {
+  .ds-alert__close { transition: none; }
+}

package/css/components/avatar.css

@@ -0,0 +1,76 @@
+/* ============================================================
+   COMPONENT: Avatar
+   ============================================================ */
+
+/* Base avatar */
+.ds-avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--ds-avatar-radius-default);
+  background-color: var(--ds-avatar-bg-default);
+  color: var(--ds-avatar-content-color-default);
+  font-family: var(--ds-body-font-family-sans);
+  font-weight: var(--ds-avatar-initials-font-weight-md);
+  flex-shrink: 0;
+  overflow: hidden;
+  user-select: none;
+}
+
+/* Default size: md (Figma: 40×40, initials 14/20 Bold) */
+.ds-avatar {
+  width: var(--ds-avatar-size-md);
+  height: var(--ds-avatar-size-md);
+  font-size: var(--ds-avatar-initials-font-size-md);
+  line-height: var(--ds-avatar-initials-line-height-md);
+}
+
+/* ---------------------------------------------------------
+   Sizes — Figma initials scale 14/14/20 (sm/md/lg)
+   --------------------------------------------------------- */
+.ds-avatar--sm {
+  width: var(--ds-avatar-size-sm);
+  height: var(--ds-avatar-size-sm);
+  font-size: var(--ds-avatar-initials-font-size-sm);
+  line-height: var(--ds-avatar-initials-line-height-sm);
+  font-weight: var(--ds-avatar-initials-font-weight-sm);
+}
+
+.ds-avatar--lg {
+  width: var(--ds-avatar-size-lg);
+  height: var(--ds-avatar-size-lg);
+  font-size: var(--ds-avatar-initials-font-size-lg);
+  line-height: var(--ds-avatar-initials-line-height-lg);
+  font-weight: var(--ds-avatar-initials-font-weight-lg);
+}
+
+/* ---------------------------------------------------------
+   Types
+   --------------------------------------------------------- */
+
+/* Image avatar */
+.ds-avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+/* Icon avatar */
+.ds-avatar--icon .ds-icon {
+  width: var(--ds-avatar-icon-size-md);
+  height: var(--ds-avatar-icon-size-md);
+  color: currentColor;
+  stroke-width: var(--ds-avatar-icon-stroke-width-md);
+}
+
+.ds-avatar--sm.ds-avatar--icon .ds-icon {
+  width: var(--ds-avatar-icon-size-sm);
+  height: var(--ds-avatar-icon-size-sm);
+  stroke-width: var(--ds-avatar-icon-stroke-width-sm);
+}
+
+.ds-avatar--lg.ds-avatar--icon .ds-icon {
+  width: var(--ds-avatar-icon-size-lg);
+  height: var(--ds-avatar-icon-size-lg);
+  stroke-width: var(--ds-avatar-icon-stroke-width-lg);
+}

package/css/components/badge.css

@@ -0,0 +1,83 @@
+/* ============================================================
+   COMPONENT: Badge
+   ============================================================ */
+
+.ds-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ds-badge-gap-default);
+  padding: var(--ds-badge-padding-y-default) var(--ds-badge-padding-x-default);
+  /* Figma: Badge label = Inter Bold 12 / 18 (label/xs) */
+  font-size: var(--ds-badge-label-font-size-default);
+  font-weight: var(--ds-badge-label-font-weight-default);
+  line-height: var(--ds-badge-label-line-height-default);
+  border-radius: var(--ds-badge-radius-default);
+  white-space: nowrap;
+}
+
+/* ---------------------------------------------------------
+   Solid style (filled background)
+   --------------------------------------------------------- */
+.ds-badge--brand.ds-badge--solid {
+  background-color: var(--ds-badge-bg-brand-solid);
+  color: var(--ds-badge-label-color-brand-solid);
+}
+
+.ds-badge--success.ds-badge--solid {
+  background-color: var(--ds-badge-bg-success-solid);
+  color: var(--ds-badge-label-color-success-solid);
+}
+
+.ds-badge--warning.ds-badge--solid {
+  background-color: var(--ds-badge-bg-warning-solid);
+  color: var(--ds-badge-label-color-warning-solid);
+}
+
+.ds-badge--error.ds-badge--solid {
+  background-color: var(--ds-badge-bg-error-solid);
+  color: var(--ds-badge-label-color-error-solid);
+}
+
+.ds-badge--info.ds-badge--solid {
+  background-color: var(--ds-badge-bg-info-solid);
+  color: var(--ds-badge-label-color-info-solid);
+}
+
+.ds-badge--neutral.ds-badge--solid {
+  background-color: var(--ds-badge-bg-neutral-default);
+  color: var(--ds-badge-label-color-neutral-solid);
+}
+
+/* ---------------------------------------------------------
+   Subtle style (light background)
+   --------------------------------------------------------- */
+.ds-badge--brand.ds-badge--subtle {
+  background-color: var(--ds-badge-bg-brand-subtle);
+  color: var(--ds-badge-label-color-brand-subtle);
+}
+
+.ds-badge--success.ds-badge--subtle {
+  background-color: var(--ds-badge-bg-success-subtle);
+  color: var(--ds-badge-label-color-success-subtle);
+}
+
+.ds-badge--warning.ds-badge--subtle {
+  background-color: var(--ds-badge-bg-warning-subtle);
+  color: var(--ds-badge-label-color-warning-subtle);
+}
+
+.ds-badge--error.ds-badge--subtle {
+  background-color: var(--ds-badge-bg-error-subtle);
+  color: var(--ds-badge-label-color-error-subtle);
+}
+
+.ds-badge--info.ds-badge--subtle {
+  background-color: var(--ds-badge-bg-info-subtle);
+  color: var(--ds-badge-label-color-info-subtle);
+}
+
+.ds-badge--neutral.ds-badge--subtle {
+  background-color: var(--ds-badge-bg-neutral-default);
+  color: var(--ds-badge-label-color-neutral-subtle);
+  border: var(--ds-badge-border-width-default) solid var(--ds-badge-border-color-neutral-subtle);
+}

package/css/components/breadcrumb.css

@@ -0,0 +1,58 @@
+/* ==========================================================================
+   Breadcrumb
+   ========================================================================== */
+
+.ds-breadcrumb {
+  display: flex;
+  align-items: center;
+  gap: var(--ds-breadcrumb-gap-default);
+  font-size: var(--ds-breadcrumb-label-font-size-default);
+  font-weight: var(--ds-breadcrumb-label-font-weight-default);
+  line-height: var(--ds-breadcrumb-label-line-height-default);
+  letter-spacing: var(--ds-breadcrumb-label-letter-spacing-default);
+}
+
+/* Item
+   ========================================================================== */
+
+.ds-breadcrumb__item {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ds-breadcrumb-item-gap-default);
+  color: var(--ds-breadcrumb-label-color-link);
+  border-radius: var(--ds-breadcrumb-focus-ring-radius-default);
+  text-decoration: none;
+}
+
+.ds-breadcrumb__item:hover {
+  color: var(--ds-link-content-hover);
+  text-decoration: underline;
+}
+
+.ds-breadcrumb__item:active {
+  color: var(--ds-link-content-active);
+}
+
+.ds-breadcrumb__item:focus-visible {
+  outline: var(--ds-focus-ring-width) solid var(--ds-focus-ring-color-default);
+  outline-offset: var(--ds-focus-ring-width);
+}
+
+/* Current (last item)
+   ========================================================================== */
+
+.ds-breadcrumb__item--current {
+  color: var(--ds-breadcrumb-label-color-current);
+  pointer-events: none;
+}
+
+/* Separator
+   ========================================================================== */
+
+.ds-breadcrumb__separator {
+  color: var(--ds-content-subtle);
+  font-size: var(--ds-breadcrumb-separator-font-size-default);
+  font-weight: var(--ds-breadcrumb-separator-font-weight-default);
+  line-height: var(--ds-breadcrumb-separator-line-height-default);
+  letter-spacing: var(--ds-breadcrumb-separator-letter-spacing-default);
+}