ds-tis 1.0.0-beta.10

package/css/components/menu.css

@@ -0,0 +1,246 @@
+/* ============================================================
+   COMPONENT: Menu / Action Menu
+   Base para listas de comandos e composicao menu button.
+   ============================================================ */
+
+.ds-menu {
+  --_ds-menu-min-width: var(--ds-size-layout-xs);
+  --_ds-menu-item-height: var(--ds-menu-item-height-md);
+  --_ds-menu-item-gap: var(--ds-menu-item-gap-md);
+  --_ds-menu-item-padding-x: var(--ds-menu-item-padding-x-md);
+  --_ds-menu-item-icon-size: var(--ds-menu-item-icon-size-md);
+  --_ds-menu-item-icon-stroke-width: var(--ds-menu-item-icon-stroke-width-md);
+
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: var(--ds-menu-surface-gap-default);
+  inline-size: max-content;
+  min-inline-size: min(100%, var(--_ds-menu-min-width));
+  max-inline-size: 100%;
+  padding: var(--ds-menu-surface-padding-default);
+  margin: 0;
+  list-style: none;
+  background: var(--ds-menu-surface-bg-default);
+  color: var(--ds-menu-item-content-color-default);
+  border: var(--ds-menu-surface-border-width-default) solid var(--ds-menu-surface-border-color-default);
+  border-radius: var(--ds-menu-surface-radius-default);
+  box-shadow: var(--ds-menu-surface-shadow-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);
+  z-index: var(--ds-z-tooltip);
+}
+
+.ds-menu--sm {
+  --_ds-menu-min-width: var(--ds-size-5xl);
+  --_ds-menu-item-height: var(--ds-menu-item-height-sm);
+  --_ds-menu-item-gap: var(--ds-menu-item-gap-sm);
+  --_ds-menu-item-padding-x: var(--ds-menu-item-padding-x-sm);
+  --_ds-menu-item-icon-size: var(--ds-menu-item-icon-size-sm);
+  --_ds-menu-item-icon-stroke-width: var(--ds-menu-item-icon-stroke-width-sm);
+}
+
+.ds-menu--lg {
+  --_ds-menu-item-height: var(--ds-menu-item-height-lg);
+  --_ds-menu-item-gap: var(--ds-menu-item-gap-lg);
+  --_ds-menu-item-padding-x: var(--ds-menu-item-padding-x-lg);
+  --_ds-menu-item-icon-size: var(--ds-menu-item-icon-size-lg);
+  --_ds-menu-item-icon-stroke-width: var(--ds-menu-item-icon-stroke-width-lg);
+}
+
+.ds-menu--full {
+  inline-size: 100%;
+}
+
+.ds-menu__group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ds-menu-surface-gap-default);
+}
+
+.ds-menu__label {
+  padding: var(--ds-space-xs) var(--ds-space-md);
+  color: var(--ds-content-subtle);
+  font-size: var(--ds-body-font-size-xs);
+  font-weight: var(--ds-body-font-weight-semibold);
+  line-height: var(--ds-body-line-height-xs);
+}
+
+.ds-menu__separator {
+  block-size: var(--ds-menu-surface-border-width-default);
+  margin: var(--ds-space-xs) var(--ds-space-sm);
+  background: var(--ds-menu-surface-border-color-default);
+}
+
+.ds-menu__item {
+  box-sizing: border-box;
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+  gap: var(--_ds-menu-item-gap);
+  min-block-size: var(--_ds-menu-item-height);
+  inline-size: 100%;
+  padding: 0 var(--_ds-menu-item-padding-x);
+  border: 0;
+  border-radius: var(--ds-menu-item-radius-default);
+  background: var(--ds-menu-item-bg-default);
+  color: var(--ds-menu-item-content-color-default);
+  font: inherit;
+  text-align: start;
+  text-decoration: none;
+  cursor: pointer;
+  transition: background-color var(--ds-motion-duration-fast) var(--ds-motion-ease-default),
+              color var(--ds-motion-duration-fast) var(--ds-motion-ease-default);
+}
+
+.ds-menu__item:hover:not([disabled]):not([aria-disabled="true"]),
+.ds-menu__item[data-active="true"] {
+  background: var(--ds-menu-item-bg-hover-default);
+  color: var(--ds-menu-item-content-color-hover);
+}
+
+.ds-menu__item:focus-visible {
+  background: var(--ds-menu-item-bg-focused);
+  color: var(--ds-menu-item-content-color-focused);
+  outline: var(--ds-focus-ring-width) solid var(--ds-focus-ring-color-default);
+  outline-offset: var(--ds-focus-ring-width);
+  border-radius: var(--ds-menu-focus-ring-radius-default);
+}
+
+.ds-menu__item[disabled],
+.ds-menu__item[aria-disabled="true"] {
+  background: var(--ds-menu-item-bg-disabled);
+  color: var(--ds-menu-item-content-color-disabled);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.ds-menu__item--destructive {
+  color: var(--ds-menu-item-content-color-destructive);
+}
+
+.ds-menu__item--destructive:hover:not([disabled]):not([aria-disabled="true"]),
+.ds-menu__item--destructive[data-active="true"] {
+  background: var(--ds-feedback-error-background-subtle);
+  color: var(--ds-menu-item-content-color-destructive);
+}
+
+.ds-menu__item--destructive:focus-visible {
+  outline-color: var(--ds-focus-ring-color-error);
+}
+
+.ds-menu__item-label {
+  min-inline-size: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: var(--ds-body-font-weight-medium);
+}
+
+.ds-menu__item-description {
+  display: block;
+  margin-block-start: var(--ds-space-2xs);
+  color: var(--ds-menu-item-meta-color-default);
+  font-size: var(--ds-body-font-size-xs);
+  font-weight: var(--ds-body-font-weight-regular);
+  line-height: var(--ds-body-line-height-xs);
+  white-space: normal;
+}
+
+.ds-menu__item:hover:not([disabled]):not([aria-disabled="true"]) .ds-menu__item-description,
+.ds-menu__item[data-active="true"] .ds-menu__item-description {
+  color: var(--ds-menu-item-content-color-default);
+}
+
+.ds-menu__icon,
+.ds-menu__check {
+  inline-size: var(--_ds-menu-item-icon-size);
+  block-size: var(--_ds-menu-item-icon-size);
+  flex-shrink: 0;
+  color: var(--ds-menu-item-icon-color-default);
+  fill: none;
+  stroke: currentColor;
+  stroke-width: var(--_ds-menu-item-icon-stroke-width);
+}
+
+.ds-menu__shortcut {
+  justify-self: end;
+  color: var(--ds-menu-item-meta-color-default);
+  font-size: var(--ds-body-font-size-xs);
+  line-height: var(--ds-body-line-height-xs);
+}
+
+.ds-menu__item:hover:not([disabled]):not([aria-disabled="true"]) .ds-menu__shortcut,
+.ds-menu__item[data-active="true"] .ds-menu__shortcut {
+  color: var(--ds-menu-item-content-color-default);
+}
+
+.ds-menu__item[disabled] .ds-menu__icon,
+.ds-menu__item[aria-disabled="true"] .ds-menu__icon,
+.ds-menu__item[disabled] .ds-menu__check,
+.ds-menu__item[aria-disabled="true"] .ds-menu__check {
+  color: var(--ds-menu-item-icon-color-disabled);
+}
+
+.ds-menu__item[disabled] .ds-menu__shortcut,
+.ds-menu__item[aria-disabled="true"] .ds-menu__shortcut,
+.ds-menu__item[disabled] .ds-menu__item-description,
+.ds-menu__item[aria-disabled="true"] .ds-menu__item-description {
+  color: var(--ds-menu-item-meta-color-disabled);
+}
+
+.ds-menu__item--destructive .ds-menu__icon,
+.ds-menu__item--destructive .ds-menu__check {
+  color: var(--ds-menu-item-icon-color-destructive);
+}
+
+.ds-menu__item--destructive .ds-menu__shortcut,
+.ds-menu__item--destructive .ds-menu__item-description {
+  color: var(--ds-menu-item-meta-color-destructive);
+}
+
+.ds-menu__check {
+  visibility: hidden;
+}
+
+.ds-menu__item[aria-checked="true"] .ds-menu__check {
+  visibility: visible;
+}
+
+.ds-action-menu {
+  position: relative;
+  display: inline-block;
+}
+
+.ds-action-menu__content {
+  position: absolute;
+  inset-block-start: calc(100% + var(--ds-action-menu-overlay-gap-default));
+  inset-inline-end: 0;
+  visibility: hidden;
+  opacity: 0;
+  transform: translateY(calc(-1 * var(--ds-action-menu-overlay-gap-default)));
+  transition: opacity var(--ds-motion-duration-fast) var(--ds-motion-ease-default),
+              transform var(--ds-motion-duration-fast) var(--ds-motion-ease-default),
+              visibility var(--ds-motion-duration-fast) var(--ds-motion-ease-default);
+}
+
+.ds-action-menu[data-open="true"] .ds-action-menu__content,
+.ds-action-menu__trigger[aria-expanded="true"] + .ds-action-menu__content {
+  visibility: visible;
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.ds-action-menu--start .ds-action-menu__content {
+  inset-inline-end: auto;
+  inset-inline-start: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ds-menu__item,
+  .ds-action-menu__content {
+    transition: none;
+  }
+}

package/css/components/modal.css

@@ -0,0 +1,236 @@
+/* ============================================================
+   COMPONENT: Modal / Dialog
+   ============================================================ */
+
+/* Overlay */
+.ds-modal-overlay {
+  position: fixed;
+  inset: 0;
+  background-color: var(--ds-modal-overlay-bg-default);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: var(--ds-modal-overlay-z-index-default);
+  padding: var(--ds-modal-overlay-padding-default);
+}
+
+/* display:flex acima vence o [hidden] do UA sem !important — consumers
+   que usam o atributo hidden precisam desta regra explícita. */
+.ds-modal-overlay[hidden] {
+  display: none;
+}
+
+/* Dialog */
+.ds-modal {
+  --_ds-modal-focus-ring-bleed: calc(var(--ds-focus-ring-width) * 2);
+
+  background-color: var(--ds-modal-bg-default);
+  border-radius: var(--ds-modal-radius-default);
+  box-shadow: var(--ds-modal-shadow-default);
+  width: 100%;
+  max-height: calc(100vh - var(--ds-space-section-sm));
+  padding: var(--ds-modal-container-padding-sm);
+  display: flex;
+  flex-direction: column;
+  gap: var(--ds-modal-container-gap-sm);
+  overflow: visible;
+}
+
+/* Sizes */
+.ds-modal--sm { max-width: var(--ds-modal-max-width-sm); }
+.ds-modal--md {
+  max-width: var(--ds-modal-max-width-md);
+  padding: var(--ds-modal-container-padding-md);
+  gap: var(--ds-modal-container-gap-md);
+}
+
+.ds-modal--lg {
+  max-width: var(--ds-modal-max-width-lg);
+  padding: var(--ds-modal-container-padding-lg);
+  gap: var(--ds-modal-container-gap-lg);
+}
+
+/* Header */
+.ds-modal__header {
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--ds-modal-header-gap-default);
+}
+
+.ds-modal__heading {
+  min-width: 0;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: var(--ds-modal-heading-gap-default);
+  padding-right: calc(var(--ds-modal-close-size-sm) + var(--ds-modal-header-gap-default));
+}
+
+.ds-modal--md .ds-modal__heading {
+  padding-right: calc(var(--ds-modal-close-size-md) + var(--ds-modal-header-gap-default));
+}
+
+.ds-modal--lg .ds-modal__heading {
+  padding-right: calc(var(--ds-modal-close-size-lg) + var(--ds-modal-header-gap-default));
+}
+
+.ds-modal__title {
+  margin: 0;
+  font-size: var(--ds-body-font-size-xl);
+  font-weight: var(--ds-body-font-weight-semibold);
+  color: var(--ds-modal-title-color-default);
+  line-height: var(--ds-body-line-height-xl);
+  letter-spacing: var(--ds-body-letter-spacing-normal);
+  padding-right: calc(var(--ds-modal-close-size-sm) + var(--ds-modal-header-gap-default));
+}
+
+.ds-modal__heading .ds-modal__title {
+  padding-right: 0;
+}
+
+.ds-modal--md .ds-modal__title {
+  font-size: var(--ds-body-font-size-2xl);
+  line-height: var(--ds-body-line-height-2xl);
+  letter-spacing: var(--ds-body-letter-spacing-normal);
+  padding-right: calc(var(--ds-modal-close-size-md) + var(--ds-modal-header-gap-default));
+}
+
+.ds-modal--lg .ds-modal__title {
+  font-size: var(--ds-body-font-size-3xl);
+  line-height: var(--ds-body-line-height-3xl);
+  letter-spacing: var(--ds-body-letter-spacing-tight);
+  padding-right: calc(var(--ds-modal-close-size-lg) + var(--ds-modal-header-gap-default));
+}
+
+.ds-modal--md .ds-modal__heading .ds-modal__title,
+.ds-modal--lg .ds-modal__heading .ds-modal__title {
+  padding-right: 0;
+}
+
+.ds-modal__description {
+  margin: 0;
+  color: var(--ds-modal-description-color-default);
+  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-modal--md .ds-modal__description {
+  font-size: var(--ds-body-font-size-sm);
+  line-height: var(--ds-body-line-height-sm);
+}
+
+.ds-modal--lg .ds-modal__description {
+  font-size: var(--ds-body-font-size-md);
+  line-height: var(--ds-body-line-height-md);
+}
+
+.ds-modal__close {
+  position: absolute;
+  top: calc(var(--ds-space-sm) - var(--ds-modal-container-padding-sm));
+  right: calc(var(--ds-space-sm) - var(--ds-modal-container-padding-sm));
+  flex-shrink: 0;
+  width: var(--ds-modal-close-size-sm);
+  height: var(--ds-modal-close-size-sm);
+  background: none;
+  border: none;
+  padding: var(--ds-modal-close-padding-sm);
+  cursor: pointer;
+  color: var(--ds-modal-close-color-default);
+  border-radius: var(--ds-radius-sm);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: color var(--ds-motion-duration-fast) var(--ds-motion-ease-default);
+}
+
+.ds-modal__close .ds-icon {
+  width: var(--ds-modal-close-icon-size-sm);
+  height: var(--ds-modal-close-icon-size-sm);
+  color: currentColor;
+  stroke-width: var(--ds-modal-close-icon-stroke-width-default);
+}
+
+.ds-modal--md .ds-modal__close {
+  top: calc(var(--ds-space-sm) - var(--ds-modal-container-padding-md));
+  right: calc(var(--ds-space-sm) - var(--ds-modal-container-padding-md));
+  width: var(--ds-modal-close-size-md);
+  height: var(--ds-modal-close-size-md);
+  padding: var(--ds-modal-close-padding-md);
+}
+
+.ds-modal--md .ds-modal__close .ds-icon {
+  width: var(--ds-modal-close-icon-size-md);
+  height: var(--ds-modal-close-icon-size-md);
+}
+
+.ds-modal--lg .ds-modal__close {
+  top: calc(var(--ds-space-sm) - var(--ds-modal-container-padding-lg));
+  right: calc(var(--ds-space-sm) - var(--ds-modal-container-padding-lg));
+  width: var(--ds-modal-close-size-lg);
+  height: var(--ds-modal-close-size-lg);
+  padding: var(--ds-modal-close-padding-lg);
+}
+
+.ds-modal--lg .ds-modal__close .ds-icon {
+  width: var(--ds-modal-close-icon-size-lg);
+  height: var(--ds-modal-close-icon-size-lg);
+}
+
+.ds-modal__close:hover {
+  color: var(--ds-content-strong);
+}
+
+.ds-modal__close:focus-visible {
+  outline: var(--ds-focus-ring-width) solid var(--ds-focus-ring-color-default);
+  outline-offset: var(--ds-focus-ring-width);
+}
+
+/* Body — escala por size do modal (espelha Figma):
+   sm → font-size sm + line-height sm
+   md → font-size md + line-height md
+   lg → font-size lg + line-height xl */
+.ds-modal__body {
+  overflow-y: auto;
+  margin: calc(var(--_ds-modal-focus-ring-bleed) * -1);
+  padding: var(--_ds-modal-focus-ring-bleed);
+  color: var(--ds-modal-body-color-default);
+  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-modal--md .ds-modal__body {
+  font-size: var(--ds-body-font-size-md);
+  line-height: var(--ds-body-line-height-md);
+}
+
+.ds-modal--lg .ds-modal__body {
+  font-size: var(--ds-body-font-size-lg);
+  line-height: var(--ds-body-line-height-xl);
+}
+
+/* Footer */
+.ds-modal__footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--ds-modal-footer-gap-sm);
+  /* Figma: footer não tem divider/border-top. */
+}
+
+.ds-modal--md .ds-modal__footer {
+  gap: var(--ds-modal-footer-gap-md);
+}
+
+.ds-modal--lg .ds-modal__footer {
+  gap: var(--ds-modal-footer-gap-lg);
+}
+
+/* ---------------------------------------------------------
+   Reduced motion
+   --------------------------------------------------------- */
+@media (prefers-reduced-motion: reduce) {
+  .ds-modal__close { transition: none; }
+}

package/css/components/pagination.css

@@ -0,0 +1,132 @@
+/* ==========================================================================
+   Pagination
+   ========================================================================== */
+
+.ds-pagination {
+  display: flex;
+  align-items: center;
+  gap: var(--ds-pagination-gap-default);
+}
+
+.ds-pagination__list {
+  display: flex;
+  align-items: center;
+  gap: var(--ds-pagination-gap-default);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.ds-pagination__item {
+  display: flex;
+  align-items: center;
+}
+
+/* Page number
+   ========================================================================== */
+
+.ds-pagination__page {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  min-width: var(--ds-pagination-item-min-width-md);
+  height: var(--ds-pagination-item-height-md);
+  padding: 0 var(--ds-space-2xs);
+  border: none;
+  border-radius: var(--ds-pagination-item-radius-default);
+  background: var(--ds-pagination-item-bg-default);
+  color: var(--ds-pagination-item-content-color-default);
+  font-family: var(--ds-pagination-item-font-family-default);
+  font-size: var(--ds-pagination-item-font-size-md);
+  font-weight: var(--ds-pagination-item-font-weight-default);
+  line-height: var(--ds-pagination-item-line-height-md);
+  text-decoration: none;
+  cursor: pointer;
+  transition:
+    background-color var(--ds-motion-duration-fast) var(--ds-motion-ease-default),
+    color var(--ds-motion-duration-fast) var(--ds-motion-ease-default);
+}
+
+a.ds-pagination__page:hover:not(.ds-pagination__page--current):not(:disabled):not([aria-disabled="true"]) {
+  background: var(--ds-pagination-item-bg-hover);
+  color: var(--ds-pagination-item-content-color-hover);
+}
+
+.ds-pagination__page--current {
+  background: var(--ds-pagination-item-bg-current);
+  color: var(--ds-pagination-item-content-color-current);
+  font-weight: var(--ds-pagination-item-font-weight-current);
+  cursor: default;
+  pointer-events: none;
+}
+
+.ds-pagination__page:disabled,
+.ds-pagination__page[aria-disabled="true"] {
+  background: var(--ds-pagination-item-bg-disabled);
+  color: var(--ds-pagination-item-content-color-disabled);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.ds-pagination__page:focus-visible {
+  outline: none;
+}
+
+.ds-pagination__page:focus-visible::after {
+  content: "";
+  position: absolute;
+  inset: calc(var(--ds-focus-ring-width) * -1);
+  box-sizing: border-box;
+  border: var(--ds-focus-ring-width) solid var(--ds-focus-ring-color-default);
+  border-radius: var(--ds-pagination-focus-ring-radius-default);
+  pointer-events: none;
+}
+
+/* Ellipsis (non-interactive)
+   ========================================================================== */
+
+.ds-pagination__ellipsis {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: var(--ds-pagination-item-min-width-md);
+  height: var(--ds-pagination-item-height-md);
+  color: var(--ds-pagination-icon-color-default);
+  pointer-events: none;
+}
+
+.ds-pagination__ellipsis .ds-icon {
+  width: var(--ds-pagination-icon-size-sm);
+  height: var(--ds-pagination-icon-size-sm);
+  stroke-width: var(--ds-pagination-icon-stroke-width-sm);
+}
+
+/* Sizes
+   ========================================================================== */
+
+.ds-pagination--sm .ds-pagination__page,
+.ds-pagination--sm .ds-pagination__ellipsis {
+  min-width: var(--ds-pagination-item-min-width-sm);
+  height: var(--ds-pagination-item-height-sm);
+  font-size: var(--ds-pagination-item-font-size-sm);
+  line-height: var(--ds-pagination-item-line-height-sm);
+}
+
+.ds-pagination--lg .ds-pagination__page,
+.ds-pagination--lg .ds-pagination__ellipsis {
+  min-width: var(--ds-pagination-item-min-width-lg);
+  height: var(--ds-pagination-item-height-lg);
+  font-size: var(--ds-pagination-item-font-size-lg);
+  line-height: var(--ds-pagination-item-line-height-lg);
+}
+
+/* Reduced motion
+   ========================================================================== */
+
+@media (prefers-reduced-motion: reduce) {
+  .ds-pagination__page {
+    transition: none;
+  }
+}