fokus-styles 2.6.2 → 2.7.0

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

@@ -9,9 +9,47 @@
 @layer components {
   .fs-tabs {
     display: flex;
+    max-inline-size: 100%;
+    overflow-x: auto;
+    scrollbar-width: thin;
     border-bottom: var(--fs-border-width) solid var(--fs-color-border-default);
   }
 
+  .fs-tabs .fs-nav-link { flex: 0 0 auto; }
+
+  .fs-tabs-boxed {
+    border: var(--fs-border-width) solid var(--fs-color-border-default);
+    border-radius: var(--fs-radius-md);
+    padding: 0.25rem;
+  }
+
+  .fs-tabs-boxed .fs-nav-link,
+  .fs-tabs-toggle .fs-nav-link {
+    margin-block-end: 0;
+    border: 0;
+    border-radius: var(--fs-radius-sm);
+  }
+
+  .fs-tabs-boxed .fs-nav-link.is-active,
+  .fs-tabs-toggle .fs-nav-link.is-active {
+    color: var(--fs-color-text);
+    background-color: var(--fs-color-surface);
+    box-shadow: var(--fs-shadow-sm);
+  }
+
+  .fs-tabs-toggle {
+    gap: 0;
+    padding: 0.25rem;
+    border: 0;
+    border-radius: var(--fs-radius-md);
+    background-color: var(--fs-color-subtle);
+  }
+
+  .fs-tabs-toggle .fs-nav-link {
+    flex: 1 1 0;
+    justify-content: center;
+  }
+
   .fs-tabs .fs-nav-link {
     margin-bottom: -1px;
     border-bottom: 2px solid transparent;
@@ -77,6 +115,26 @@
     text-align: center;
   }
 
+  .fs-tabs-vertical {
+    flex-direction: column;
+    align-items: stretch;
+    overflow-x: visible;
+    border-inline-start: var(--fs-border-width) solid var(--fs-color-border-default);
+    border-block-end: 0;
+  }
+
+  .fs-tabs-vertical .fs-nav-link {
+    justify-content: flex-start;
+    margin-block-end: 0;
+    margin-inline-start: -1px;
+    border-block-end: 0;
+    border-inline-start: 2px solid transparent;
+  }
+
+  .fs-tabs-vertical .fs-nav-link.is-active {
+    border-inline-start-color: var(--fs-color-primary);
+  }
+
   // Tamanhos — mesma escala sm/lg dos outros componentes.
   .fs-tabs-sm .fs-nav-link {
     padding: 6px 10px;

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

@@ -22,6 +22,38 @@
     padding-inline-end: var(--fs-tag-padding-inline-end);
   }
 
+  .fs-tag-rounded {
+    --fs-badge-radius: 999px;
+    --fs-tag-padding-inline-start: 8px;
+    --fs-tag-padding-inline-end: 8px;
+  }
+
+  .fs-tag-addons {
+    --fs-tag-addon-padding-inline: 8px;
+
+    display: inline-flex;
+    align-items: stretch;
+    gap: 0;
+  }
+
+  .fs-tag-addons > .fs-tag {
+    --fs-tag-padding-inline-start: var(--fs-tag-addon-padding-inline);
+    --fs-tag-padding-inline-end: var(--fs-tag-addon-padding-inline);
+
+    min-inline-size: 0;
+    border-radius: 0;
+  }
+
+  .fs-tag-addons > .fs-tag:first-child {
+    border-start-start-radius: var(--fs-badge-radius);
+    border-end-start-radius: var(--fs-badge-radius);
+  }
+
+  .fs-tag-addons > .fs-tag:last-child {
+    border-start-end-radius: var(--fs-badge-radius);
+    border-end-end-radius: var(--fs-badge-radius);
+  }
+
   // O texto fica em um elemento próprio quando a tag puder ser truncada. A
   // string integral permanece no DOM, portanto continua disponível para AT.
   .fs-tag-label {

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

@@ -90,39 +90,87 @@
     display: block;
   }
 
-  .fs-form-control {
+  .fs-form-control,
+  .fs-form-textarea,
+  .fs-form-date,
+  .fs-form-time {
     width: 100%;
     min-width: 0;
     height: var(--fs-control-height);
-    padding: 0 7px;
-    border: var(--fs-border-width) solid var(--fs-color-border-default);
-    border-radius: var(--fs-radius-sm);
+    min-block-size: var(--fs-control-height);
+    padding-block: 0;
+    padding-inline: var(--fs-control-padding-x);
+    border: var(--fs-border-width) solid var(--fs-control-border-color);
+    border-radius: var(--fs-control-radius);
     color: var(--fs-color-text);
-    background-color: var(--fs-color-surface);
+    background-color: var(--fs-control-bg);
     font-size: $font-size-md;
     font-weight: $font-weight-medium;
+    line-height: 1.35;
+    transition: var(--fs-control-transition);
+    color-scheme: light;
   }
 
-  .fs-form-control::placeholder {
-    color: var(--fs-color-muted);
+  [data-theme="dark"] .fs-form-control,
+  [data-theme="dark"] .fs-form-textarea,
+  [data-theme="dark"] .fs-form-date,
+  [data-theme="dark"] .fs-form-time,
+  [data-fs-theme="dark"] .fs-form-control,
+  [data-fs-theme="dark"] .fs-form-textarea,
+  [data-fs-theme="dark"] .fs-form-date,
+  [data-fs-theme="dark"] .fs-form-time {
+    color-scheme: dark;
+  }
+
+  .fs-form-textarea {
+    height: auto;
+    min-block-size: 96px;
+    padding-block: var(--fs-space-2);
+    resize: vertical;
+  }
+
+  .fs-form-control::placeholder,
+  .fs-form-textarea::placeholder {
+    color: var(--fs-control-placeholder-color);
+    opacity: 1;
   }
 
-  .fs-form-control:focus-visible {
+  .fs-form-control:focus-visible,
+  .fs-form-textarea:focus-visible,
+  .fs-form-date:focus-visible,
+  .fs-form-time:focus-visible {
     @include focus-ring;
   }
 
-  .fs-form-control:disabled {
+  .fs-form-control:disabled,
+  .fs-form-textarea:disabled,
+  .fs-form-date:disabled,
+  .fs-form-time:disabled {
     color: var(--fs-color-muted);
     background-color: var(--fs-color-subtle);
-    opacity: var(--fs-disabled-opacity);
+    opacity: var(--fs-control-disabled-opacity);
     pointer-events: none;
   }
 
-  .fs-form-control:read-only {
+  .fs-form-control:read-only,
+  .fs-form-textarea:read-only,
+  .fs-form-date:read-only,
+  .fs-form-time:read-only {
     background-color: var(--fs-color-subtle);
     cursor: default;
   }
 
+  .fs-form-control[type="search"] {
+    appearance: auto;
+  }
+
+  .fs-form-control[type="date"],
+  .fs-form-control[type="time"],
+  .fs-form-date,
+  .fs-form-time {
+    accent-color: var(--fs-color-primary);
+  }
+
   .fs-floating-label {
     position: relative;
   }
@@ -143,25 +191,49 @@
   }
 
   .fs-form-control[aria-invalid="true"],
+  .fs-form-textarea[aria-invalid="true"],
+  .fs-form-date[aria-invalid="true"],
+  .fs-form-time[aria-invalid="true"],
   .fs-was-validated .fs-form-control:invalid {
-    border-color: var(--fs-color-danger);
+    border-color: var(--fs-control-invalid-color);
   }
 
   .fs-form-control[aria-invalid="false"],
+  .fs-form-textarea[aria-invalid="false"],
+  .fs-form-date[aria-invalid="false"],
+  .fs-form-time[aria-invalid="false"],
   .fs-was-validated .fs-form-control:valid {
-    border-color: var(--fs-color-success);
+    border-color: var(--fs-control-valid-color);
   }
 
   .fs-form-control-sm {
     height: var(--fs-control-height-sm);
+    min-block-size: var(--fs-control-height-sm);
+    padding-inline: var(--fs-control-padding-x-sm);
     font-size: $font-size-xs;
   }
 
   .fs-form-control-lg {
     height: var(--fs-control-height-lg);
+    min-block-size: var(--fs-control-height-lg);
+    padding-inline: var(--fs-control-padding-x-lg);
     font-size: $font-size-md;
   }
 
+  .fs-form-control-xs {
+    height: var(--fs-control-height-xs);
+    min-block-size: var(--fs-control-height-xs);
+    padding-inline: var(--fs-control-padding-x-xs);
+    font-size: $font-size-xs;
+  }
+
+  .fs-form-control-xl {
+    height: var(--fs-control-height-xl);
+    min-block-size: var(--fs-control-height-xl);
+    padding-inline: var(--fs-control-padding-x-xl);
+    font-size: $font-size-lg;
+  }
+
   .fs-form-size-sm {
     width: 120px;
   }
@@ -205,15 +277,24 @@
     justify-content: space-between;
     width: 100%;
     height: var(--fs-control-height);
-    padding: 0 7px;
-    border: var(--fs-border-width) solid var(--fs-color-border-default);
-    border-radius: var(--fs-radius-sm);
+    min-block-size: var(--fs-control-height);
+    padding-block: 0;
+    padding-inline: var(--fs-control-padding-x);
+    border: var(--fs-border-width) solid var(--fs-control-border-color);
+    border-radius: var(--fs-control-radius);
     color: var(--fs-color-text);
-    background-color: var(--fs-color-surface);
+    background-color: var(--fs-control-bg);
     font-size: $font-size-md;
     font-weight: $font-weight-medium;
     text-align: left;
     cursor: pointer;
+    transition: var(--fs-control-transition);
+    color-scheme: light;
+  }
+
+  [data-theme="dark"] .fs-form-select,
+  [data-fs-theme="dark"] .fs-form-select {
+    color-scheme: dark;
   }
 
   .fs-form-select::after {
@@ -241,14 +322,32 @@
 
   .fs-form-select-sm {
     height: var(--fs-control-height-sm);
+    min-block-size: var(--fs-control-height-sm);
+    padding-inline: var(--fs-control-padding-x-sm);
     font-size: $font-size-xs;
   }
 
   .fs-form-select-lg {
     height: var(--fs-control-height-lg);
+    min-block-size: var(--fs-control-height-lg);
+    padding-inline: var(--fs-control-padding-x-lg);
     font-size: $font-size-md;
   }
 
+  .fs-form-select-xs {
+    height: var(--fs-control-height-xs);
+    min-block-size: var(--fs-control-height-xs);
+    padding-inline: var(--fs-control-padding-x-xs);
+    font-size: $font-size-xs;
+  }
+
+  .fs-form-select-xl {
+    height: var(--fs-control-height-xl);
+    min-block-size: var(--fs-control-height-xl);
+    padding-inline: var(--fs-control-padding-x-xl);
+    font-size: $font-size-lg;
+  }
+
   .fs-file-upload {
     position: relative;
     display: inline-flex;
@@ -356,10 +455,11 @@
   .fs-input-group-text {
     display: flex;
     align-items: center;
-    padding: 0 12px;
-    border: 1px solid var(--fs-color-border);
+    min-block-size: var(--fs-control-height);
+    padding-inline: var(--fs-control-padding-x);
+    border: var(--fs-border-width) solid var(--fs-control-border-color);
     color: var(--fs-color-muted);
-    background-color: var(--fs-color-subtle);
+    background-color: var(--fs-control-addon-bg);
     font-size: $font-size-md;
     font-weight: $font-weight-medium;
     white-space: nowrap;
@@ -383,28 +483,55 @@
   }
 
   .fs-input-group > :first-child {
-    border-top-left-radius: var(--fs-radius-sm);
-    border-bottom-left-radius: var(--fs-radius-sm);
+    border-start-start-radius: var(--fs-control-radius);
+    border-end-start-radius: var(--fs-control-radius);
   }
 
   .fs-input-group > :last-child {
-    border-top-right-radius: var(--fs-radius-sm);
-    border-bottom-right-radius: var(--fs-radius-sm);
+    border-start-end-radius: var(--fs-control-radius);
+    border-end-end-radius: var(--fs-control-radius);
+  }
+
+  .fs-input-group:focus-within {
+    --fs-control-border-color: var(--fs-focus-color);
+  }
+
+  .fs-input-group.is-invalid,
+  .fs-input-group:has([aria-invalid="true"], .is-invalid) {
+    --fs-control-border-color: var(--fs-control-invalid-color);
+  }
+
+  .fs-input-group.is-valid,
+  .fs-input-group:has([aria-invalid="false"], .is-valid) {
+    --fs-control-border-color: var(--fs-control-valid-color);
+  }
+
+  .fs-input-group-stack-sm {
+    flex-wrap: wrap;
+  }
+
+  .fs-input-group-stack-sm > * {
+    flex: 1 1 100%;
+    width: 100%;
+    margin-inline-start: 0;
+    border-radius: var(--fs-control-radius);
   }
 
   .fs-input-group-sm > .fs-form-control,
   .fs-input-group-sm > .fs-form-select,
   .fs-input-group-sm > .fs-input-group-text {
-    height: 30px;
-    padding: 0 8px;
+    height: var(--fs-control-height-sm);
+    min-block-size: var(--fs-control-height-sm);
+    padding-inline: var(--fs-control-padding-x-sm);
     font-size: $font-size-xs;
   }
 
   .fs-input-group-lg > .fs-form-control,
   .fs-input-group-lg > .fs-form-select,
   .fs-input-group-lg > .fs-input-group-text {
-    height: 46px;
-    padding: 0 16px;
+    height: var(--fs-control-height-lg);
+    min-block-size: var(--fs-control-height-lg);
+    padding-inline: var(--fs-control-padding-x-lg);
     font-size: $font-size-lg;
   }
 }

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

@@ -25,6 +25,34 @@
     background: transparent;
     appearance: none;
     cursor: pointer;
+    accent-color: var(--fs-range-fill-color);
+  }
+
+  .fs-form-range-xs {
+    --fs-range-track-height: 4px;
+    --fs-range-thumb-size: 14px;
+  }
+
+  .fs-form-range-sm {
+    --fs-range-track-height: 5px;
+    --fs-range-thumb-size: 16px;
+  }
+
+  .fs-form-range-lg {
+    --fs-range-track-height: 8px;
+    --fs-range-thumb-size: 22px;
+  }
+
+  .fs-form-range-xl {
+    --fs-range-track-height: 10px;
+    --fs-range-thumb-size: 26px;
+  }
+
+  .fs-form-range-vertical {
+    width: var(--fs-range-thumb-size);
+    height: 160px;
+    writing-mode: vertical-lr;
+    direction: rtl;
   }
 
   .fs-form-range::-webkit-slider-runnable-track {
@@ -96,4 +124,5 @@
     font-weight: $font-weight-medium;
     text-align: center;
   }
+
 }

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

@@ -1,7 +1,8 @@
 // Respeita a preferência do sistema sem remover a funcionalidade dos
 // componentes: apenas reduz transições e animações ao estado final.
 @layer base {
-  @media (prefers-reduced-motion: reduce) {
+  @if fs-feature-enabled(reduced-motion, true) {
+    @media (prefers-reduced-motion: reduce) {
     *,
     *::before,
     *::after {
@@ -21,4 +22,5 @@
       animation-iteration-count: infinite !important;
     }
   }
+  }
 }

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

@@ -7,16 +7,40 @@ $fs-config: (
   preset: full,
   components: all,
   utilities: all,
+  helpers: all,
   colors: all,
+  layout: all,
+  columns: all,
   spacing: all,
   sizing: all,
+  typography: all,
+  borders: all,
+  effects: all,
+  motion: all,
+  interactivity: all,
+  display: all,
+  flex: all,
+  grid: all,
   responsive: true,
   states: true,
   pseudo-variants: (responsive, focus-visible, disabled, checked, hover, print),
   fluid-type: true,
-  color-modes: true
+  color-modes: true,
+  print: true,
+  rtl: true,
+  dark-mode: true,
+  reduced-motion: true,
+  important-utilities: true
 ) !default;
 
+$fs-enable-dark-mode: true !default;
+$fs-enable-rounded: true !default;
+$fs-enable-shadows: true !default;
+$fs-enable-important-utilities: true !default;
+$fs-enable-helpers: true !default;
+$fs-enable-print-utilities: true !default;
+$fs-enable-rtl: true !default;
+
 @function fs-config-list-enabled($key, $item) {
 
   $value: fs-config-get($key, all);
@@ -39,5 +63,19 @@ $fs-config: (
 @function fs-feature-enabled($feature, $fallback: true) {
   $value: fs-config-get($feature, $fallback);
 
+  @if $feature == dark-mode and $fs-enable-dark-mode == false { @return false; }
+
+  @if $feature == helpers and $fs-enable-helpers == false { @return false; }
+
+  @if $feature == print and $fs-enable-print-utilities == false { @return false; }
+
+  @if $feature == rtl and $fs-enable-rtl == false { @return false; }
+
+  @if $feature == important-utilities and $fs-enable-important-utilities == false { @return false; }
+
+  @if $feature == rounded and $fs-enable-rounded == false { @return false; }
+
+  @if $feature == shadows and $fs-enable-shadows == false { @return false; }
+
   @return $value != false;
 }

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

@@ -4,3 +4,4 @@
 @forward "container-queries";
 @forward "spacing";
 @forward "typography";
+@forward "utilities";

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

@@ -0,0 +1,86 @@
+// Mapas públicos que alimentam os utilitários atômicos. Todos usam !default
+// para que consumidores possam estender a escala antes do entry-point Sass.
+$fs-utility-sizes: (
+  0: 0,
+  25: 25%,
+  50: 50%,
+  75: 75%,
+  100: 100%,
+  auto: auto,
+  full: 100%,
+  screen: 100vw,
+  svh: 100svh,
+  dvh: 100dvh,
+  lvh: 100lvh
+) !default;
+
+$fs-utility-border-widths: (
+  0: 0,
+  1: 1px,
+  2: 2px,
+  4: 4px,
+  8: 8px
+) !default;
+
+$fs-utility-radii: (
+  none: 0,
+  sm: var(--fs-radius-sm),
+  md: var(--fs-radius-md),
+  lg: var(--fs-radius-lg),
+  full: 9999px
+) !default;
+
+$fs-utility-transition-durations: (
+  none: 0ms,
+  fast: var(--fs-transition-fast),
+  normal: var(--fs-transition-normal),
+  slow: 500ms
+) !default;
+
+$fs-utility-easings: (
+  standard: var(--fs-ease-standard),
+  entrance: cubic-bezier(0, 0, 0.2, 1),
+  exit: cubic-bezier(0.4, 0, 1, 1),
+  linear: linear
+) !default;
+
+// Registro declarativo para extensões simples. Os módulos de categoria
+// continuam sendo responsáveis pelas APIs históricas; este mapa é a nova
+// superfície de extensão para consumidores e para utilitários sem aliases.
+$fs-utility-object-values: (
+  contain: contain,
+  cover: cover,
+  fill: fill,
+  none: none,
+  "scale-down": scale-down
+) !default;
+
+$fs-utility-z-values: (
+  base: var(--fs-z-base, 0),
+  dropdown: var(--fs-z-dropdown, 1000),
+  sticky: var(--fs-z-sticky, 1020),
+  modal: var(--fs-z-modal, 1050),
+  offcanvas: var(--fs-z-offcanvas, 1060),
+  notification: var(--fs-z-notification, 1080),
+  toast: var(--fs-z-toast, 1090),
+  tooltip: var(--fs-z-tooltip, 1100)
+) !default;
+
+$fs-utilities: (
+  object-fit: (
+    property: object-fit,
+    class: object,
+    values: $fs-utility-object-values,
+    category: layout,
+    responsive: false,
+    important: true
+  ),
+  z-index: (
+    property: z-index,
+    class: z,
+    values: $fs-utility-z-values,
+    category: interactivity,
+    responsive: false,
+    important: true
+  )
+) !default;

package/packages/fokus-core/scss/themes/_dark.scss

@@ -12,6 +12,7 @@
 // contraste com o branco); `info` não tem margem e fica sem alteração (100%).
 // Misturas em `$method: oklch` (ver tools/_mixins.scss) — recalibrado e
 // revalidado com `npm run contrast` após a migração para OKLCH.
+@if fs-feature-enabled(dark-mode, true) {
 @layer tokens {
   $dark-color-weights: (
     primary: 95%,
@@ -51,6 +52,13 @@
     --fs-color-focus: var(--fs-color-primary);
     --fs-color-action-primary: var(--fs-color-primary);
     --fs-color-action-danger: var(--fs-color-danger);
+    --fs-control-bg: var(--fs-color-surface);
+    --fs-control-border-color: var(--fs-color-border);
+    --fs-control-hover-bg: var(--fs-color-subtle);
+    --fs-control-placeholder-color: var(--fs-color-muted);
+    --fs-control-invalid-color: var(--fs-color-danger);
+    --fs-control-valid-color: var(--fs-color-success);
+    --fs-control-addon-bg: var(--fs-color-subtle);
     --fs-shadow-sm: 0 1px 3px rgb(0 0 0 / 50%), 0 1px 2px rgb(0 0 0 / 40%);
     --fs-shadow-md: 0 6px 12px rgb(0 0 0 / 55%), 0 3px 6px rgb(0 0 0 / 45%);
     --fs-shadow-lg: 0 15px 30px rgb(0 0 0 / 60%), 0 6px 12px rgb(0 0 0 / 50%);
@@ -129,3 +137,4 @@
     }
   }
 }
+}

package/packages/fokus-core/scss/tokens/_root.scss

@@ -50,9 +50,26 @@
     --fs-control-height: 38px;
     --fs-control-height-sm: 30px;
     --fs-control-height-lg: 46px;
+    --fs-control-height-xs: 26px;
+    --fs-control-height-xl: 52px;
     --fs-control-padding-x: 12px;
     --fs-control-padding-x-sm: 8px;
     --fs-control-padding-x-lg: 16px;
+    --fs-control-padding-x-xs: 6px;
+    --fs-control-padding-x-xl: 20px;
+    --fs-control-border-color: var(--fs-color-border);
+    --fs-control-bg: var(--fs-color-surface);
+    --fs-control-hover-bg: var(--fs-color-subtle);
+    --fs-control-placeholder-color: var(--fs-color-muted);
+    --fs-control-focus-color: var(--fs-focus-color);
+    --fs-control-invalid-color: var(--fs-color-danger);
+    --fs-control-valid-color: var(--fs-color-success);
+    --fs-control-disabled-opacity: var(--fs-disabled-opacity);
+    --fs-control-radius: var(--fs-radius-sm);
+    --fs-control-touch-target: 44px;
+    --fs-control-transition: color var(--fs-transition-fast) var(--fs-ease-standard), background-color var(--fs-transition-fast) var(--fs-ease-standard), border-color var(--fs-transition-fast) var(--fs-ease-standard), box-shadow var(--fs-transition-fast) var(--fs-ease-standard);
+    --fs-control-option-gap: var(--fs-space-2);
+    --fs-control-addon-bg: var(--fs-color-subtle);
     --fs-focus-width: 2px;
     --fs-focus-offset: 2px;
     --fs-focus-color: var(--fs-color-primary);
@@ -103,6 +120,12 @@
     @each $name, $bg in $theme-bg-colors {
       --fs-feedback-#{$name}-bg: #{rgb-fallback($bg)};
     }
+
+    @each $name, $color in $theme-colors {
+      --fs-color-#{$name}-bg-subtle: var(--fs-feedback-#{$name}-bg);
+      --fs-color-#{$name}-border-subtle: var(--fs-color-#{$name});
+      --fs-color-#{$name}-text-emphasis: var(--fs-alert-#{$name}-text);
+    }
   }
 
   // Bloco condicional: valores nativos em OKLCH. `@supports (color: oklch(0%