fokus-styles 2.0.0 → 2.4.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # Changelog
 
+## [2.4.0] - 2026-09-07
+
+- adiciona preset `fokus-rtl.css` e export `fokus-styles/rtl.css`;
+- amplia tokens para `prefers-contrast: more` e regras de `forced-colors: active`;
+- documenta RTL, alto contraste, foco e preferências de movimento/cor do sistema.
+
+## [2.3.0] - 2026-09-07
+
+- adiciona registro compartilhado de overlays, evitando múltiplos Modal/Offcanvas concorrentes;
+- amplia o contrato TypeScript do núcleo de overlay;
+- mantém o gerenciamento de foco, `inert`, scroll lock e eventos `fs:*` coordenados entre componentes.
+
+## [2.2.0] - 2026-09-07
+
+- adiciona Utility API Sass configurável para cores, espaçamento, sizing e variantes responsivas;
+- adiciona tokens de configuração para presets e inclusão seletiva de famílias de utilitários;
+- adiciona `Spinner`, `Pagination` dinâmica e fallback de Scrollspy sem `IntersectionObserver`;
+- adiciona suporte a `inert`/`aria-hidden` no focus trap e estilos do spinner com redução de movimento.
+
 ## Unreleased
 
 - refina o Carousel com tokens locais, controles compactos, indicadores em

package/README.md

@@ -24,7 +24,7 @@ profissionais, e é distribuído publicamente como produto para qualquer
 desenvolvedor que precise construir interfaces consistentes sem carregar
 React, Vue, Angular, jQuery ou qualquer outra dependência de runtime.
 
-> **Status:** `2.0.0`. O Fokus Styles consolida CSS, JavaScript, ícones, React
+> **Status:** `2.1.0`. O Fokus Styles consolida CSS, JavaScript, ícones, React
 > e CLI em um único pacote npm. O foco atual é consolidar o núcleo CSS e os componentes
 > essenciais antes de ampliar o catálogo. O framework já possui componentes
 > avançados, mas eles são tratados como extensões e não definem o caminho
@@ -67,8 +67,9 @@ Ou direto via CDN (jsDelivr/unpkg), sem instalar nada:
 <script src="https://cdn.jsdelivr.net/npm/fokus-styles/dist/js/fokus.js"></script>
 ```
 
-O CSS também é distribuído em arquivos separados (`layout.css`, `forms.css`,
-`components.css`, `helpers.css`), e o ponto de entrada Sass está disponível para
+O CSS também é distribuído em arquivos separados (`fokus-core.css`,
+`fokus-components.css`, `fokus-utilities.css`, `fokus-dark.css`, além de
+`layout.css`, `forms.css`, `components.css`, `helpers.css`), e o ponto de entrada Sass está disponível para
 compilar com suas próprias variáveis. Detalhes em
 [Instalação](docs/getting-started/installation.md) e
 [Formas de uso](docs/getting-started/usage.md).

package/dist/css/components.css

@@ -48,12 +48,28 @@
     --fs-control-padding-x-lg: 16px;
     --fs-focus-width: 2px;
     --fs-focus-offset: 2px;
+    --fs-focus-color: var(--fs-color-primary);
+    --fs-focus-ring-size: 3px;
+    --fs-focus-ring-color: color-mix(in srgb, var(--fs-focus-color) 22%, transparent);
     --fs-focus-ring-alpha: 22%;
     --fs-transition-fast: 150ms;
     --fs-transition-normal: 220ms;
+    --fs-motion-duration-fast: var(--fs-transition-fast);
+    --fs-motion-duration-normal: var(--fs-transition-normal);
+    --fs-motion-ease-standard: var(--fs-ease-standard);
     --fs-ease-standard: cubic-bezier(0.2, 0, 0, 1);
     --fs-border-width: 1px;
     --fs-disabled-opacity: 0.5;
+    --fs-safe-area-top: env(safe-area-inset-top, 0px);
+    --fs-safe-area-right: env(safe-area-inset-right, 0px);
+    --fs-safe-area-bottom: env(safe-area-inset-bottom, 0px);
+    --fs-safe-area-left: env(safe-area-inset-left, 0px);
+    --fs-component-control-height: var(--fs-control-height);
+    --fs-component-overlay-backdrop: rgb(0 0 0 / 55%);
+    --fs-component-panel-radius: var(--fs-radius-md);
+    --fs-component-panel-shadow: var(--fs-shadow-lg);
+    --fs-contrast-border-width: var(--fs-border-width);
+    --fs-contrast-focus-width: var(--fs-focus-width);
     --fs-cq-sm: 320px;
     --fs-cq-md: 480px;
     --fs-cq-lg: 640px;
@@ -132,6 +148,14 @@
       --fs-feedback-info-bg: oklch(96.4918490239% 0.0173174767 286.0707018324deg);
     }
   }
+  @media (prefers-contrast: more) {
+    :root {
+      --fs-contrast-border-width: 2px;
+      --fs-contrast-focus-width: 3px;
+      --fs-focus-width: var(--fs-contrast-focus-width);
+      --fs-border-width: var(--fs-contrast-border-width);
+    }
+  }
 }
 @layer tokens {
   :root {
@@ -243,6 +267,59 @@
     }
   }
 }
+/* stylelint-disable property-no-deprecated, selector-not-notation */
+@layer reset {
+  :focus-visible {
+    outline: var(--fs-focus-width) solid var(--fs-focus-color);
+    outline-offset: var(--fs-focus-offset);
+  }
+  @media (forced-colors: active) {
+    :focus-visible {
+      outline: 2px solid CanvasText;
+      outline-offset: 2px;
+    }
+    button,
+    [role=button],
+    input,
+    select,
+    textarea,
+    .fs-btn {
+      border-color: ButtonText;
+      forced-color-adjust: auto;
+    }
+    .fs-u-focus-ring:focus-visible {
+      outline: 3px solid Highlight;
+    }
+  }
+}
+@layer utilities {
+  .fs-u-visually-hidden:not(:focus):not(:focus-within),
+  .fs-u-visually-hidden-focusable:not(:focus):not(:focus-within) {
+    position: absolute !important;
+    width: 1px !important;
+    height: 1px !important;
+    padding: 0 !important;
+    margin: -1px !important;
+    overflow: hidden !important;
+    clip-path: inset(50%) !important;
+    white-space: nowrap !important;
+    border: 0 !important;
+  }
+  .fs-skip-link {
+    position: fixed;
+    z-index: 1000;
+    inset-block-start: var(--fs-space-2);
+    inset-inline-start: var(--fs-space-2);
+    transform: translateY(-200%);
+    padding: var(--fs-space-2) var(--fs-space-3);
+    color: var(--fs-color-on-primary);
+    background: var(--fs-color-primary);
+    border-radius: var(--fs-radius-sm);
+  }
+  .fs-skip-link:focus {
+    transform: translateY(0);
+  }
+}
 @layer components {
   .fs-btn {
     --fs-btn-color: var(--fs-color-text-primary);
@@ -847,6 +924,23 @@
   .fs-table-responsive {
     overflow-x: auto;
   }
+  .fs-table-caption {
+    caption-side: top;
+    padding: var(--fs-space-2) 0;
+    color: var(--fs-color-muted);
+    text-align: start;
+  }
+  .fs-table-empty {
+    padding: var(--fs-space-5);
+    color: var(--fs-color-muted);
+    text-align: center;
+  }
+  @media (width < 640px) {
+    .fs-table-priority th:nth-child(n+4),
+    .fs-table-priority td:nth-child(n+4) {
+      display: none;
+    }
+  }
 }
 @layer components {
   .fs-navbar {
@@ -873,6 +967,47 @@
     padding: 0;
     list-style: none;
   }
+  .fs-navbar-toggler {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 44px;
+    min-height: 44px;
+    padding: 8px;
+    color: var(--fs-color-text);
+    background: transparent;
+    border: 1px solid var(--fs-color-border);
+    border-radius: var(--fs-radius-sm);
+    cursor: pointer;
+  }
+  .fs-navbar-collapse {
+    flex-basis: 100%;
+    width: 100%;
+  }
+  .fs-navbar-collapse:not(.is-open) {
+    display: none;
+  }
+  .fs-navbar-collapse.is-open .fs-navbar-nav {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  @media (width >= 768px) {
+    .fs-navbar-toggler {
+      display: none;
+    }
+    .fs-navbar-collapse,
+    .fs-navbar-collapse:not(.is-open),
+    .fs-navbar-collapse[hidden] {
+      display: flex;
+      flex: 1 1 auto;
+      align-items: center;
+      justify-content: flex-end;
+      width: auto;
+    }
+    .fs-navbar-collapse .fs-navbar-nav {
+      flex-direction: row;
+    }
+  }
   .fs-nav-link {
     display: inline-flex;
     align-items: center;
@@ -1286,6 +1421,13 @@
   .fs-modal-dialog.fs-modal-lg {
     max-width: 720px;
   }
+  .fs-modal-dialog.fs-modal-xl {
+    max-width: 1140px;
+  }
+  .fs-modal-dialog.fs-modal-fullscreen {
+    max-width: none;
+    height: 100%;
+  }
   .fs-modal-content {
     display: flex;
     flex-direction: column;
@@ -1312,6 +1454,28 @@
     padding: 20px;
     overflow-y: auto;
   }
+  .fs-modal-scrollable .fs-modal-content {
+    overflow: hidden;
+  }
+  .fs-modal-scrollable .fs-modal-body {
+    overflow-y: auto;
+  }
+  @media (width < 640px) {
+    .fs-modal {
+      align-items: flex-end;
+      padding: 0;
+    }
+    .fs-modal-dialog,
+    .fs-modal-dialog.fs-modal-sm,
+    .fs-modal-dialog.fs-modal-lg,
+    .fs-modal-dialog.fs-modal-xl {
+      max-width: none;
+    }
+    .fs-modal-content {
+      max-height: calc(100dvh - var(--fs-safe-area-top));
+      border-radius: var(--fs-radius-md) var(--fs-radius-md) 0 0;
+    }
+  }
   .fs-modal-footer {
     display: flex;
     align-items: center;
@@ -1675,6 +1839,22 @@
     padding: 16px 20px;
     border-top: 1px solid var(--fs-color-border);
   }
+  .fs-offcanvas-responsive {
+    width: min(100%, 420px);
+  }
+  @media (width >= 1024px) {
+    .fs-offcanvas-lg {
+      position: static;
+      width: auto;
+      height: auto;
+      visibility: visible;
+      transform: none;
+      box-shadow: none;
+    }
+    .fs-offcanvas-lg + .fs-offcanvas-backdrop {
+      display: none;
+    }
+  }
   @media (prefers-reduced-motion: reduce) {
     .fs-offcanvas,
     .fs-offcanvas-backdrop {
@@ -1703,6 +1883,16 @@
     border-bottom-right-radius: var(--fs-radius-md);
     border-bottom-left-radius: var(--fs-radius-md);
   }
+  .fs-accordion-flush .fs-accordion-item {
+    border-inline: 0;
+    border-radius: 0;
+  }
+  .fs-accordion-flush .fs-accordion-item:first-child {
+    border-block-start: 0;
+  }
+  .fs-accordion-always-open .fs-accordion-button[aria-expanded=true]::after {
+    transform: rotate(-135deg);
+  }
   .fs-accordion-header {
     margin: 0;
   }
@@ -1751,6 +1941,11 @@
     border-top: 1px solid var(--fs-color-border);
     background-color: var(--fs-color-surface-raised);
   }
+  @media (prefers-reduced-motion: reduce) {
+    .fs-accordion-button::after {
+      transition: none;
+    }
+  }
 }
 @layer components {
   .fs-tabs {
@@ -2012,6 +2207,14 @@
     padding: 0;
     list-style: none;
   }
+  .fs-pagination-scroll {
+    max-width: 100%;
+    overflow-x: auto;
+    padding-block: 2px;
+  }
+  .fs-pagination-scroll .fs-pagination {
+    width: max-content;
+  }
   .fs-page-link {
     display: inline-flex;
     align-items: center;
@@ -2240,6 +2443,9 @@
     --fs-progress-bar-bg: var(--fs-color-info);
     --fs-progress-color: #ffffff;
   }
+  .fs-spinner[data-fs-loading=false] {
+    display: none;
+  }
   .fs-progress-sm {
     --fs-progress-height: 4px;
   }
@@ -2965,6 +3171,22 @@
   .fs-skeleton-rect {
     border-radius: var(--fs-radius-md);
   }
+  .fs-skeleton-card {
+    display: grid;
+    gap: var(--fs-space-3);
+    min-height: 10rem;
+    padding: var(--fs-space-4);
+    border-radius: var(--fs-radius-md);
+  }
+  .fs-skeleton-table {
+    height: 1.25rem;
+    margin-block-end: var(--fs-space-2);
+  }
+  .fs-skeleton-avatar {
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: 50%;
+  }
   @keyframes fokus-skeleton-pulse {
     0%, 100% {
       opacity: 1;
@@ -3352,6 +3574,280 @@
     font-size: 1rem;
   }
 }
+/* stylelint-disable declaration-block-single-line-max-declarations */
+@layer components {
+  .fs-avatar {
+    display: inline-flex;
+    flex: 0 0 auto;
+    align-items: center;
+    justify-content: center;
+    width: 2.5rem;
+    height: 2.5rem;
+    overflow: hidden;
+    color: var(--fs-color-on-primary);
+    font-weight: 600;
+    background: var(--fs-color-primary);
+    border-radius: 50%;
+    object-fit: cover;
+  }
+  .fs-avatar-sm {
+    width: 2rem;
+    height: 2rem;
+    font-size: 0.8125rem;
+  }
+  .fs-avatar-lg {
+    width: 3.5rem;
+    height: 3.5rem;
+    font-size: 1.25rem;
+  }
+  .fs-avatar-square {
+    border-radius: var(--fs-radius-md);
+  }
+  .fs-avatar img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
+/* stylelint-disable declaration-block-single-line-max-declarations */
+@layer components {
+  .fs-button-group {
+    display: inline-flex;
+    vertical-align: middle;
+  }
+  .fs-button-group > .fs-btn {
+    border-radius: 0;
+  }
+  .fs-button-group > .fs-btn:first-child {
+    border-start-start-radius: var(--fs-radius-sm);
+    border-end-start-radius: var(--fs-radius-sm);
+  }
+  .fs-button-group > .fs-btn:last-child {
+    border-start-end-radius: var(--fs-radius-sm);
+    border-end-end-radius: var(--fs-radius-sm);
+  }
+  .fs-button-group > .fs-btn + .fs-btn {
+    margin-inline-start: -1px;
+  }
+  .fs-button-group-vertical {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  .fs-button-group-vertical > .fs-btn {
+    width: 100%;
+  }
+}
+/* stylelint-disable declaration-block-single-line-max-declarations */
+@layer components {
+  .fs-close {
+    display: inline-grid;
+    width: 2rem;
+    height: 2rem;
+    place-items: center;
+    padding: 0;
+    color: currentcolor;
+    font-size: 1.5rem;
+    line-height: 1;
+    background: transparent;
+    border: 0;
+    border-radius: 50%;
+    cursor: pointer;
+    opacity: 0.72;
+  }
+  .fs-close::before {
+    content: "×";
+  }
+  .fs-close:hover {
+    opacity: 1;
+    background: var(--fs-color-subtle);
+  }
+  .fs-close:focus-visible {
+    outline: var(--fs-focus-width) solid var(--fs-focus-color);
+    outline-offset: var(--fs-focus-offset);
+  }
+}
+/* stylelint-disable declaration-block-single-line-max-declarations */
+@layer components {
+  .fs-list-group {
+    display: flex;
+    flex-direction: column;
+    padding: 0;
+    margin: 0;
+    list-style: none;
+    border: 1px solid var(--fs-color-border);
+    border-radius: var(--fs-radius-md);
+  }
+  .fs-list-group-item {
+    position: relative;
+    display: block;
+    padding: var(--fs-space-3) var(--fs-space-4);
+    color: var(--fs-color-text);
+    background: var(--fs-color-surface);
+    border-block-end: 1px solid var(--fs-color-border);
+  }
+  .fs-list-group-item:last-child {
+    border-block-end: 0;
+  }
+  button.fs-list-group-item, a.fs-list-group-item {
+    width: 100%;
+    text-align: start;
+    cursor: pointer;
+  }
+  .fs-list-group-item:hover {
+    background: var(--fs-color-subtle);
+  }
+  .fs-list-group-item.is-active {
+    color: var(--fs-color-on-primary);
+    background: var(--fs-color-primary);
+  }
+}
+@layer components {
+  .fs-code {
+    padding: 0.125em 0.35em;
+    color: var(--fs-color-danger);
+    background: var(--fs-color-subtle);
+    border-radius: var(--fs-radius-sm);
+  }
+  .fs-pre {
+    display: block;
+    max-width: 100%;
+    padding: var(--fs-space-4);
+    overflow: auto;
+    color: var(--fs-color-text);
+    background: var(--fs-color-subtle);
+    border: 1px solid var(--fs-color-border);
+    border-radius: var(--fs-radius-md);
+  }
+}
+/* stylelint-disable declaration-block-single-line-max-declarations */
+@layer components {
+  .fs-ratio {
+    position: relative;
+    width: 100%;
+  }
+  .fs-ratio::before {
+    display: block;
+    padding-top: var(--fs-ratio, 56.25%);
+    content: "";
+  }
+  .fs-ratio > * {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+  .fs-ratio-1x1 {
+    --fs-ratio: 100%;
+  }
+  .fs-ratio-4x3 {
+    --fs-ratio: 75%;
+  }
+  .fs-ratio-16x9 {
+    --fs-ratio: 56.25%;
+  }
+  .fs-ratio-21x9 {
+    --fs-ratio: 42.857%;
+  }
+}
+/* stylelint-disable declaration-block-single-line-max-declarations */
+@layer components {
+  .fs-icon-link {
+    display: inline-flex;
+    gap: 0.5em;
+    align-items: center;
+  }
+  .fs-icon-link svg {
+    width: 1em;
+    height: 1em;
+    flex: 0 0 auto;
+  }
+  .fs-icon-link:hover svg {
+    transform: translateX(0.15em);
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .fs-icon-link svg {
+      transition: none;
+    }
+  }
+}
+/* stylelint-disable declaration-block-single-line-max-declarations */
+@layer components {
+  .fs-placeholder {
+    display: inline-block;
+    min-height: 1em;
+    vertical-align: middle;
+    cursor: wait;
+    background: currentcolor;
+    opacity: 0.18;
+  }
+  .fs-placeholder-glow {
+    animation: fs-placeholder-glow 1.5s ease-in-out infinite;
+  }
+  .fs-placeholder-wave {
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent), currentcolor;
+    background-size: 200% 100%;
+    animation: fs-placeholder-wave 1.5s linear infinite;
+  }
+  .fs-placeholder-btn {
+    width: 6rem;
+    height: 2.5rem;
+    border-radius: var(--fs-radius-sm);
+  }
+  @keyframes fs-placeholder-glow {
+    50% {
+      opacity: 0.08;
+    }
+  }
+  @keyframes fs-placeholder-wave {
+    to {
+      background-position: -200% 0;
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .fs-placeholder-glow, .fs-placeholder-wave {
+      animation: none;
+    }
+  }
+}
+/* stylelint-disable declaration-block-single-line-max-declarations */
+@layer components {
+  .fs-progress {
+    display: flex;
+    height: 0.75rem;
+    overflow: hidden;
+    background: var(--fs-color-subtle);
+    border-radius: 999px;
+  }
+  .fs-progress-bar {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--fs-color-on-primary);
+    background: var(--fs-color-primary);
+    transition: width var(--fs-motion-duration-normal) var(--fs-motion-ease-standard);
+  }
+  .fs-progress-bar-striped {
+    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%);
+    background-size: 1rem 1rem;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .fs-progress-bar {
+      transition: none;
+    }
+  }
+}
+/* stylelint-disable declaration-block-single-line-max-declarations */
+@layer components {
+  [data-fs-scrollspy] .is-active {
+    color: var(--fs-color-primary);
+    font-weight: 600;
+  }
+  .fs-scrollspy-nav {
+    position: sticky;
+    inset-block-start: var(--fs-space-4);
+  }
+}
 @layer tokens {
   [data-fs-brand=violet] {
     --fs-color-primary: #6d28d9;
@@ -3447,7 +3943,8 @@
   }
 }
 @layer tokens {
-  [data-theme=dark] {
+  [data-theme=dark],
+  [data-fs-theme=dark] {
     --fs-color-text: #f1f3f4;
     --fs-color-muted: #bdc1c6;
     --fs-color-border: #3c4043;
@@ -3494,7 +3991,8 @@
     --fs-feedback-info-bg: rgb(35.0058091619, 49.6887857769, 78.5757788254);
   }
   @supports (color: oklch(0% 0 0deg)) {
-    [data-theme=dark] {
+    [data-theme=dark],
+    [data-fs-theme=dark] {
       --fs-color-text: oklch(96.2913383165% 0.002529697 228.7848682695deg);
       --fs-color-muted: oklch(80.9268110646% 0.0083071608 253.8653061211deg);
       --fs-color-border: oklch(36.8827622528% 0.0074489239 240.018838067deg);
@@ -3538,5 +4036,37 @@
       --fs-feedback-info-bg: oklch(31.7574919059% 0.0556228738 263.0598185246deg);
     }
   }
+  @media (prefers-color-scheme: dark) {
+    [data-fs-theme=auto] {
+      --fs-color-text: #f1f3f4;
+      --fs-color-muted: #bdc1c6;
+      --fs-color-border: #3c4043;
+      --fs-color-surface: #202124;
+      --fs-color-subtle: #2b2c2f;
+      --fs-color-bg-surface: var(--fs-color-surface);
+      --fs-color-bg-subtle: var(--fs-color-subtle);
+      --fs-color-surface-raised: var(--fs-color-surface);
+      --fs-color-surface-interactive: var(--fs-color-subtle);
+      --fs-color-text-primary: var(--fs-color-text);
+      --fs-color-text-muted: var(--fs-color-muted);
+      --fs-color-border-default: var(--fs-color-border);
+      --fs-color-focus: var(--fs-color-primary);
+      --fs-tooltip-bg: #f8fafc;
+      --fs-tooltip-text: #1e293b;
+    }
+  }
+  @media (forced-colors: active) {
+    :root,
+    [data-theme=dark],
+    [data-fs-theme=light],
+    [data-fs-theme=dark],
+    [data-fs-theme=auto] {
+      --fs-color-border: CanvasText;
+      --fs-color-text: CanvasText;
+      --fs-color-surface: Canvas;
+      --fs-color-subtle: Canvas;
+      --fs-focus-color: Highlight;
+    }
+  }
 }
 /*# sourceMappingURL=components.css.map */