fokus-styles 2.0.0 → 2.4.0

package/packages/fokus-components/scss/components/_avatar.scss

@@ -0,0 +1,22 @@
+/* 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: .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; }
+}

package/packages/fokus-components/scss/components/_button-group.scss

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

package/packages/fokus-components/scss/components/_close-button.scss

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

package/packages/fokus-components/scss/components/_code.scss

@@ -0,0 +1,19 @@
+@layer components {
+  .fs-code {
+    padding: .125em .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);
+  }
+}

package/packages/fokus-components/scss/components/_icon-link.scss

@@ -0,0 +1,8 @@
+/* stylelint-disable declaration-block-single-line-max-declarations */
+@layer components {
+  .fs-icon-link { display: inline-flex; gap: .5em; align-items: center; }
+  .fs-icon-link svg { width: 1em; height: 1em; flex: 0 0 auto; }
+  .fs-icon-link:hover svg { transform: translateX(.15em); }
+
+  @media (prefers-reduced-motion: reduce) { .fs-icon-link svg { transition: none; } }
+}

package/packages/fokus-components/scss/components/_index.scss

@@ -34,3 +34,13 @@
 @use "notification-center";
 @use "nested-menu";
 @use "tile";
+@use "avatar";
+@use "button-group";
+@use "close-button";
+@use "list-group";
+@use "code";
+@use "ratio";
+@use "icon-link";
+@use "placeholder";
+@use "progress";
+@use "scrollspy";

package/packages/fokus-components/scss/components/_list-group.scss

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

package/packages/fokus-components/scss/components/_modal.scss

@@ -29,6 +29,15 @@
     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;
@@ -59,6 +68,33 @@
     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;

package/packages/fokus-components/scss/components/_navbar.scss

@@ -29,6 +29,54 @@
     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;

package/packages/fokus-components/scss/components/_offcanvas.scss

@@ -92,6 +92,25 @@
     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 {

package/packages/fokus-components/scss/components/_pagination.scss

@@ -10,6 +10,16 @@
     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;

package/packages/fokus-components/scss/components/_placeholder.scss

@@ -0,0 +1,13 @@
+/* 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: .18; }
+  .fs-placeholder-glow { animation: fs-placeholder-glow 1.5s ease-in-out infinite; }
+  .fs-placeholder-wave { background: linear-gradient(90deg, transparent, rgb(255 255 255 / 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: .08; } }
+
+  @keyframes fs-placeholder-wave { to { background-position: -200% 0; } }
+
+  @media (prefers-reduced-motion: reduce) { .fs-placeholder-glow, .fs-placeholder-wave { animation: none; } }
+}

package/packages/fokus-components/scss/components/_progress.scss

@@ -0,0 +1,8 @@
+/* stylelint-disable declaration-block-single-line-max-declarations */
+@layer components {
+  .fs-progress { display: flex; height: .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, rgb(255 255 255 / 15%) 25%, transparent 25%, transparent 50%, rgb(255 255 255 / 15%) 50%, rgb(255 255 255 / 15%) 75%, transparent 75%); background-size: 1rem 1rem; }
+
+  @media (prefers-reduced-motion: reduce) { .fs-progress-bar { transition: none; } }
+}

package/packages/fokus-components/scss/components/_ratio.scss

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

package/packages/fokus-components/scss/components/_scrollspy.scss

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

package/packages/fokus-components/scss/components/_skeleton.scss

@@ -35,6 +35,25 @@
     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% {

package/packages/fokus-components/scss/components/_spinner.scss

@@ -1,10 +1,6 @@
 @use "../../../fokus-core/scss/settings" as *;
 @use "../../../fokus-core/scss/tools" as *;
 
-// Spinner giratório: trilho discreto + segmento ativo. A cor herda de
-// `currentColor`, permitindo usar as variantes semânticas ou utilitários de
-// cor de texto.
-
 @layer components {
   .fs-spinner {
     --fs-spinner-size: 20px;
@@ -39,14 +35,8 @@
     }
   }
 
-  @keyframes fokus-spin {
-    to {
-      transform: rotate(360deg);
-    }
-  }
+  @keyframes fokus-spin { to { transform: rotate(360deg); } }
 
-  // Barra de progresso linear. A largura do `.fs-progress-bar` é controlada por
-  // `--fs-progress-value` (0–100) ou diretamente por `style="width"`.
   .fs-progress {
     --fs-progress-height: 8px;
     --fs-progress-track: var(--fs-color-subtle);
@@ -87,6 +77,10 @@
     }
   }
 
+  .fs-spinner[data-fs-loading="false"] {
+    display: none;
+  }
+
   .fs-progress-sm {
     --fs-progress-height: 4px;
   }
@@ -100,8 +94,6 @@
     font-size: $font-size-xs;
   }
 
-  // Cabeçalho externo: preserva o valor legível sem comprimir texto dentro de
-  // barras compactas.
   .fs-progress-meta {
     display: flex;
     align-items: baseline;
@@ -118,8 +110,6 @@
     font-variant-numeric: tabular-nums;
   }
 
-  // Processo sem percentual conhecido: um preenchimento curto atravessa o
-  // trilho. Não combine com aria-valuenow, pois o valor é indeterminado.
   .fs-progress-indeterminate .fs-progress-bar {
     width: 36%;
     animation: fokus-progress-indeterminate 1.25s ease-in-out infinite;
@@ -129,17 +119,8 @@
     --fs-progress-track: color-mix(in srgb, var(--fs-color-primary) 18%, transparent);
   }
 
-  @keyframes fokus-progress-indeterminate {
-    from {
-      transform: translateX(-110%);
-    }
+  @keyframes fokus-progress-indeterminate { from { transform: translateX(-110%); } to { transform: translateX(290%); } }
 
-    to {
-      transform: translateX(290%);
-    }
-  }
-
-  // Estados semânticos para operações finalizadas ou interrompidas.
   .fs-progress-complete .fs-progress-bar {
     --fs-progress-bar-bg: var(--fs-color-success);
     --fs-progress-color: #{color-contrast($fokus-color-success)};
@@ -178,8 +159,6 @@
     color: var(--fs-alert-danger-text);
   }
 
-  // Marca uma meta/SLA no trilho. O valor usa a mesma escala percentual da
-  // barra e deve ser acompanhado por texto fora do componente.
   .fs-progress-marker {
     position: absolute;
     z-index: 1;
@@ -192,40 +171,17 @@
     transform: translateX(-1px);
   }
 
-  // Mantém progresso inicial perceptível sem alterar aria-valuenow. Use
-  // apenas quando o valor real já for maior que zero.
   .fs-progress-minimum .fs-progress-bar {
     width: max(calc(var(--fs-progress-value, 0) * 1%), 4px);
   }
 
-  // Faixas diagonais opcionais, animáveis com `.fs-progress-bar-animated`.
   .fs-progress-bar-striped {
-    background-image: linear-gradient(
-      45deg,
-      color-mix(in srgb, currentcolor 16%, transparent) 25%,
-      transparent 25%,
-      transparent 50%,
-      color-mix(in srgb, currentcolor 16%, transparent) 50%,
-      color-mix(in srgb, currentcolor 16%, transparent) 75%,
-      transparent 75%,
-      transparent
-    );
+    background-image: linear-gradient(45deg, color-mix(in srgb, currentcolor 16%, transparent) 25%, transparent 25%, transparent 50%, color-mix(in srgb, currentcolor 16%, transparent) 50%, color-mix(in srgb, currentcolor 16%, transparent) 75%, transparent 75%, transparent);
     background-size: 16px 16px;
   }
+  .fs-progress-bar-animated { animation: fokus-progress-stripes 1s linear infinite; }
 
-  .fs-progress-bar-animated {
-    animation: fokus-progress-stripes 1s linear infinite;
-  }
-
-  @keyframes fokus-progress-stripes {
-    from {
-      background-position: 16px 0;
-    }
-
-    to {
-      background-position: 0 0;
-    }
-  }
+  @keyframes fokus-progress-stripes { from { background-position: 16px 0; } to { background-position: 0 0; } }
 
   @media (prefers-reduced-motion: reduce) {
     .fs-spinner {

package/packages/fokus-components/scss/components/_tables.scss

@@ -58,4 +58,24 @@
   .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;
+    }
+  }
 }

package/packages/fokus-components/scss/forms/_forms.scss

@@ -107,6 +107,35 @@
     cursor: default;
   }
 
+  .fs-floating-label {
+    position: relative;
+  }
+
+  .fs-floating-label > .fs-form-control {
+    height: 56px;
+    padding-top: 20px;
+  }
+
+  .fs-floating-label > .fs-form-label {
+    position: absolute;
+    z-index: 1;
+    top: 8px;
+    left: 8px;
+    color: var(--fs-color-muted);
+    font-size: $font-size-xs;
+    pointer-events: none;
+  }
+
+  .fs-form-control[aria-invalid="true"],
+  .fs-was-validated .fs-form-control:invalid {
+    border-color: var(--fs-color-danger);
+  }
+
+  .fs-form-control[aria-invalid="false"],
+  .fs-was-validated .fs-form-control:valid {
+    border-color: var(--fs-color-success);
+  }
+
   .fs-form-control-sm {
     height: var(--fs-control-height-sm);
     font-size: $font-size-xs;

package/packages/fokus-core/scss/base/_accessibility.scss

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

package/packages/fokus-core/scss/base/_index.scss

@@ -1,3 +1,4 @@
 @use "reset";
 @use "typography";
 @use "motion";
+@use "accessibility";

package/packages/fokus-core/scss/layout/_grid.scss

@@ -31,6 +31,24 @@
     $infix: breakpoint-infix($breakpoint);
 
     @include media-breakpoint-up($breakpoint) {
+      .fs-row-cols#{$infix}-auto > * {
+        flex: 0 0 auto;
+        width: auto;
+      }
+
+      @for $count from 1 through 6 {
+        .fs-row-cols#{$infix}-#{$count} > * {
+          flex: 0 0 auto;
+          width: math.percentage(math.div(1, $count));
+        }
+      }
+
+      @for $order from 0 through $grid-columns {
+        .fs-order#{$infix}-#{$order} {
+          order: $order;
+        }
+      }
+
       .fs-col#{$infix} {
         flex: 1 0 0%;
       }

package/packages/fokus-core/scss/settings/_config.scss

@@ -0,0 +1,43 @@
+@use "sass:map";
+@use "sass:list";
+
+// Configuration centralizada. O mapa pode ser sobrescrito antes de importar
+// qualquer entry-point, mantendo os presets previsíveis para consumidores.
+$fs-config: (
+  preset: full,
+  components: all,
+  utilities: all,
+  colors: all,
+  spacing: all,
+  sizing: all,
+  responsive: true,
+  states: true,
+  pseudo-variants: (responsive, focus-visible, disabled, checked, hover, print),
+  fluid-type: true,
+  color-modes: true
+) !default;
+
+@function fs-config-list-enabled($key, $item) {
+
+  $value: fs-config-get($key, all);
+
+  @if $value == all { @return true; }
+
+  @if $value == none or $value == false { @return false; }
+
+  @return list.index($value, $item) != null;
+}
+
+@function fs-config-get($key, $fallback: null) {
+  @if map.has-key($fs-config, $key) {
+    @return map.get($fs-config, $key);
+  }
+
+  @return $fallback;
+}
+
+@function fs-feature-enabled($feature, $fallback: true) {
+  $value: fs-config-get($feature, $fallback);
+
+  @return $value != false;
+}

package/packages/fokus-core/scss/settings/_index.scss

@@ -1,5 +1,6 @@
 @forward "breakpoints";
 @forward "colors";
+@forward "config";
 @forward "container-queries";
 @forward "spacing";
 @forward "typography";