fokus-styles 2.6.2 → 2.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fokus-styles",
-  "version": "2.6.2",
+  "version": "2.7.0",
   "description": "Fokus Styles is a complete CSS framework with components, utilities, vanilla JavaScript, icons, React wrappers, and a CLI.",
   "keywords": [
     "css",
@@ -65,6 +65,7 @@
     "./forms.css": "./dist/css/forms.css",
     "./components.css": "./dist/css/components.css",
     "./helpers.css": "./dist/css/helpers.css",
+    "./helpers-only.css": "./dist/css/fokus-helpers.css",
     "./core": "./dist/css/fokus-core.css",
     "./components": "./dist/css/fokus-components.css",
     "./utilities": "./dist/css/fokus-utilities.css",

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

@@ -11,4 +11,16 @@
   .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%; }
+
+  .fs-button-group[role="group"] {
+    isolation: isolate;
+  }
+
+  .fs-button-group > .fs-btn:focus-visible { z-index: 2; }
+
+  .fs-button-group > .fs-btn[aria-pressed="true"] {
+    --fs-btn-bg: var(--fs-color-primary);
+    --fs-btn-color: var(--fs-color-on-primary);
+    --fs-btn-border-color: var(--fs-color-primary);
+  }
 }

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

@@ -17,7 +17,9 @@
     justify-content: center;
     gap: var(--fs-space-1);
     min-height: var(--fs-control-height);
-    padding: 0 var(--fs-control-padding-x);
+    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-btn-border-color);
     border-radius: var(--fs-radius-sm);
     color: var(--fs-btn-color);
@@ -26,10 +28,8 @@
     font-weight: $font-weight-medium;
     text-decoration: none;
     cursor: pointer;
-    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);
+    transition: var(--fs-control-transition);
+    white-space: nowrap;
   }
 
   .fs-btn:hover {
@@ -45,11 +45,42 @@
   }
 
   .fs-btn:disabled,
-  .fs-btn.is-disabled {
+  .fs-btn.is-disabled,
+  .fs-btn[aria-disabled="true"] {
     opacity: var(--fs-disabled-opacity);
+    cursor: not-allowed;
+  }
+
+  .fs-btn[aria-disabled="true"] {
+    pointer-events: none;
+  }
+
+  .fs-btn.is-loading,
+  .fs-btn[aria-busy="true"] {
+    cursor: wait;
     pointer-events: none;
   }
 
+  .fs-btn.is-loading::after,
+  .fs-btn[aria-busy="true"]::after {
+    width: 1em;
+    height: 1em;
+    border: 2px solid currentcolor;
+    border-inline-end-color: transparent;
+    border-radius: 50%;
+    content: "";
+    animation: fokus-spin 650ms linear infinite;
+  }
+
+  .fs-btn-icon {
+    display: inline-grid;
+    width: var(--fs-control-touch-target);
+    min-width: var(--fs-control-touch-target);
+    min-height: var(--fs-control-touch-target);
+    padding: 0;
+    place-items: center;
+  }
+
   @each $name, $color in $theme-colors {
     .fs-btn-#{$name} {
       --fs-btn-color: var(--fs-color-on-#{$name});
@@ -74,12 +105,14 @@
 
   .fs-btn-sm {
     min-height: var(--fs-control-height-sm);
+    min-block-size: var(--fs-control-height-sm);
     padding: 0 var(--fs-control-padding-x-sm);
     font-size: $font-size-sm;
   }
 
   .fs-btn-lg {
     min-height: var(--fs-control-height-lg);
+    min-block-size: var(--fs-control-height-lg);
     padding: 0 var(--fs-control-padding-x-lg);
     font-size: $font-size-lg;
   }

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

@@ -7,10 +7,32 @@
   // (chrome do SO, não estilizável via token), que fica invisível sobre
   // --fs-color-surface escuro sem essa correção.
   [data-theme="dark"] .fs-form-control[type="date"]::-webkit-calendar-picker-indicator,
-  [data-theme="dark"] .fs-form-control[type="time"]::-webkit-calendar-picker-indicator {
+  [data-theme="dark"] .fs-form-control[type="time"]::-webkit-calendar-picker-indicator,
+  [data-theme="dark"] .fs-form-date::-webkit-calendar-picker-indicator,
+  [data-theme="dark"] .fs-form-time::-webkit-calendar-picker-indicator {
     filter: invert(1);
   }
 
+  .fs-form-date,
+  .fs-form-time {
+    appearance: auto;
+    color-scheme: light;
+  }
+
+  [data-theme="dark"] .fs-form-date,
+  [data-theme="dark"] .fs-form-time,
+  [data-fs-theme="dark"] .fs-form-date,
+  [data-fs-theme="dark"] .fs-form-time,
+  [data-theme="dark"] .fs-datepicker-panel,
+  [data-fs-theme="dark"] .fs-datepicker-panel {
+    color-scheme: dark;
+  }
+
+  .fs-form-date::-webkit-calendar-picker-indicator,
+  .fs-form-time::-webkit-calendar-picker-indicator {
+    cursor: pointer;
+  }
+
   .fs-datepicker {
     position: relative;
     display: inline-flex;
@@ -27,6 +49,7 @@
     background-color: var(--fs-color-surface);
     box-shadow: var(--fs-shadow-md);
     z-index: var(--fs-z-dropdown);
+    color-scheme: light;
   }
 
   .fs-datepicker-panel.is-open {
@@ -134,4 +157,27 @@
     pointer-events: none;
     opacity: 0.4;
   }
+
+  .fs-datepicker-day[aria-current="date"] {
+    outline: var(--fs-border-width) solid var(--fs-color-primary);
+    outline-offset: -2px;
+  }
+
+  .fs-datepicker-title[aria-live="polite"] {
+    min-inline-size: 8rem;
+    text-align: center;
+  }
+
+  @media (forced-colors: active) {
+    .fs-datepicker-panel {
+      border: 1px solid CanvasText;
+      background: Canvas;
+      color: CanvasText;
+    }
+
+    .fs-datepicker-day.is-selected {
+      background: Highlight;
+      color: HighlightText;
+    }
+  }
 }

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

@@ -22,11 +22,21 @@
   }
 
   .fs-dropdown-menu {
+    --fs-dropdown-min-inline-size: 12rem;
+    --fs-dropdown-max-block-size: min(70vh, 28rem);
+    --fs-dropdown-offset: 0.25rem;
+    --fs-dropdown-padding-block: 0.375rem;
+    --fs-dropdown-item-padding-block: 0.5rem;
+    --fs-dropdown-item-padding-inline: 1rem;
+
     position: absolute;
     display: none;
-    min-width: 180px;
+    min-inline-size: var(--fs-dropdown-min-inline-size);
+    max-block-size: var(--fs-dropdown-max-block-size);
+    overflow-y: auto;
     margin: 0;
-    padding: 6px 0;
+    padding-block: var(--fs-dropdown-padding-block);
+    padding-inline: 0;
     border: var(--fs-border-width) solid var(--fs-color-border-default);
     border-radius: var(--fs-radius-md);
     color: var(--fs-color-text);
@@ -35,6 +45,23 @@
     z-index: var(--fs-z-dropdown);
   }
 
+  .fs-dropdown-menu[data-placement="top"] { transform-origin: bottom center; }
+  .fs-dropdown-menu[data-placement="bottom"] { transform-origin: top center; }
+  .fs-dropdown-menu[data-placement="left"] { transform-origin: right center; }
+  .fs-dropdown-menu[data-placement="right"] { transform-origin: left center; }
+
+  .fs-dropdown-menu.fs-dropdown-menu-sm {
+    --fs-dropdown-min-inline-size: 10rem;
+    --fs-dropdown-item-padding-block: 0.375rem;
+    --fs-dropdown-item-padding-inline: 0.75rem;
+  }
+
+  .fs-dropdown-menu.fs-dropdown-menu-lg {
+    --fs-dropdown-min-inline-size: 16rem;
+    --fs-dropdown-item-padding-block: 0.625rem;
+    --fs-dropdown-item-padding-inline: 1.25rem;
+  }
+
   .fs-dropdown-menu.is-open {
     display: block;
   }
@@ -43,12 +70,14 @@
     display: flex;
     align-items: center;
     width: 100%;
-    padding: 8px 16px;
+    min-block-size: 2.5rem;
+    padding-block: var(--fs-dropdown-item-padding-block);
+    padding-inline: var(--fs-dropdown-item-padding-inline);
     border: 0;
     color: var(--fs-color-text);
     background-color: var(--fs-color-surface-raised);
     font-size: $font-size-md;
-    text-align: left;
+    text-align: start;
     text-decoration: none;
     cursor: pointer;
   }
@@ -71,18 +100,195 @@
     opacity: 0.6;
   }
 
+  .fs-dropdown-item[aria-disabled="true"],
+  .fs-dropdown-item:disabled {
+    color: var(--fs-color-muted);
+    pointer-events: none;
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+
+  .fs-dropdown-item .fs-icon,
+  .fs-dropdown-item > svg {
+    flex: 0 0 auto;
+  }
+
   .fs-dropdown-divider {
     height: 1px;
-    margin: 6px 0;
+    margin-block: 6px;
+    margin-inline: 0;
     border: none;
     background-color: var(--fs-color-border);
   }
 
   .fs-dropdown-header {
-    padding: 4px 16px;
+    padding-block: 4px;
+    padding-inline: var(--fs-dropdown-item-padding-inline);
     color: var(--fs-color-muted);
     font-size: $font-size-xs;
     font-weight: $font-weight-medium;
     text-transform: uppercase;
   }
+
+  .fs-dropdown-content {
+    padding-block: var(--fs-dropdown-padding-block);
+  }
+
+  .fs-dropdown-content > .fs-dropdown-item {
+    min-block-size: auto;
+  }
+
+  // Conteúdo rico: painel composto com identidade, metadados e ações
+  // secundárias. Os itens continuam sendo links/botões reais, mas não
+  // recebem a aparência de uma lista simples quando carregam descrição.
+  .fs-dropdown-menu.fs-dropdown-rich {
+    --fs-dropdown-rich-inline-size: 22rem;
+
+    inline-size: min(var(--fs-dropdown-rich-inline-size), calc(100vw - 2rem));
+    min-inline-size: 0;
+    max-inline-size: calc(100vw - 2rem);
+    padding-block: 0;
+    overflow: hidden;
+  }
+
+  .fs-dropdown-rich-header {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.75rem;
+    padding: 1rem;
+  }
+
+  .fs-dropdown-rich-avatar {
+    display: inline-grid;
+    flex: 0 0 2.25rem;
+    width: 2.25rem;
+    height: 2.25rem;
+    place-items: center;
+    border-radius: 50%;
+    color: var(--fs-color-on-primary);
+    background: var(--fs-color-primary);
+    font-size: $font-size-sm;
+    font-weight: $font-weight-bold;
+  }
+
+  .fs-dropdown-rich-heading {
+    display: grid;
+    min-inline-size: 0;
+    flex: 1 1 auto;
+    gap: 0.125rem;
+  }
+
+  .fs-dropdown-rich-title,
+  .fs-dropdown-rich-description,
+  .fs-dropdown-rich-item-title,
+  .fs-dropdown-rich-item-description {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .fs-dropdown-rich-title {
+    color: var(--fs-color-text);
+    font-size: $font-size-sm;
+    font-weight: $font-weight-semibold;
+  }
+
+  .fs-dropdown-rich-description,
+  .fs-dropdown-rich-item-description {
+    color: var(--fs-color-muted);
+    font-size: $font-size-xs;
+  }
+
+  .fs-dropdown-rich-status {
+    flex: 0 0 auto;
+  }
+
+  .fs-dropdown-rich-list {
+    display: grid;
+    gap: 0.25rem;
+    padding: 0.5rem;
+  }
+
+  .fs-dropdown-rich-list > .fs-dropdown-item {
+    min-block-size: 3.25rem;
+    gap: 0.75rem;
+    padding: 0.625rem 0.75rem;
+    border-radius: var(--fs-radius-sm);
+    background: transparent;
+  }
+
+  .fs-dropdown-rich-list > .fs-dropdown-item:hover,
+  .fs-dropdown-rich-list > .fs-dropdown-item:focus-visible {
+    background: var(--fs-color-subtle);
+  }
+
+  .fs-dropdown-rich-icon {
+    display: inline-grid;
+    flex: 0 0 2rem;
+    width: 2rem;
+    height: 2rem;
+    place-items: center;
+    border: 1px solid var(--fs-color-border-default);
+    border-radius: var(--fs-radius-sm);
+    color: var(--fs-color-primary);
+    background: var(--fs-color-surface);
+  }
+
+  .fs-dropdown-rich-icon > svg {
+    width: 1rem;
+    height: 1rem;
+    stroke: currentcolor;
+  }
+
+  .fs-dropdown-rich-copy {
+    display: grid;
+    min-inline-size: 0;
+    flex: 1 1 auto;
+    gap: 0.125rem;
+  }
+
+  .fs-dropdown-rich-item-title {
+    color: inherit;
+    font-size: $font-size-sm;
+    font-weight: $font-weight-semibold;
+  }
+
+  .fs-dropdown-rich-chevron {
+    flex: 0 0 auto;
+    color: var(--fs-color-muted);
+    font-size: $font-size-lg;
+    line-height: 1;
+  }
+
+  .fs-dropdown-rich-footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.75rem;
+    padding: 0.75rem 1rem;
+    color: var(--fs-color-muted);
+    background: var(--fs-color-subtle);
+    font-size: $font-size-xs;
+  }
+
+  .fs-dropdown-rich-footer a {
+    color: var(--fs-color-primary);
+    font-weight: $font-weight-semibold;
+    text-decoration: none;
+  }
+
+  .fs-dropdown-rich-footer a:hover,
+  .fs-dropdown-rich-footer a:focus-visible {
+    text-decoration: underline;
+  }
+
+  .fs-dropdown-item.fs-dropdown-item-danger {
+    color: var(--fs-color-danger);
+  }
+
+  .fs-dropdown-item.fs-dropdown-item-danger:hover,
+  .fs-dropdown-item.fs-dropdown-item-danger:focus-visible {
+    color: var(--fs-color-on-danger);
+    background-color: var(--fs-color-danger);
+  }
 }

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

@@ -4,6 +4,7 @@
 @use "badges";
 @use "tables";
 @use "navbar";
+@use "menu";
 @use "combobox";
 @use "datepicker";
 @use "datatable";

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

@@ -0,0 +1,95 @@
+@use "../../../fokus-core/scss/settings" as *;
+@use "../../../fokus-core/scss/tools" as *;
+
+@layer components {
+  .fs-menu {
+    --fs-menu-item-padding-block: 0.5rem;
+    --fs-menu-item-padding-inline: 0.75rem;
+    --fs-menu-item-radius: var(--fs-radius-sm);
+    --fs-menu-label-color: var(--fs-color-muted);
+    --fs-menu-nested-indent: 0.875rem;
+
+    min-inline-size: 12rem;
+  }
+
+  .fs-menu-label {
+    margin-block: 1rem 0.375rem;
+    padding-inline: var(--fs-menu-item-padding-inline);
+    color: var(--fs-menu-label-color);
+    font-size: $font-size-xs;
+    font-weight: $font-weight-medium;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+  }
+
+  .fs-menu-label:first-child { margin-block-start: 0; }
+
+  .fs-menu-list,
+  .fs-menu-list ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .fs-menu-list ul {
+    margin-block-start: 0.25rem;
+    padding-inline-start: var(--fs-menu-nested-indent);
+    border-inline-start: var(--fs-border-width) solid var(--fs-color-border-default);
+  }
+
+  .fs-menu-list a,
+  .fs-menu-list button {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    inline-size: 100%;
+    min-block-size: 2.5rem;
+    padding-block: var(--fs-menu-item-padding-block);
+    padding-inline: var(--fs-menu-item-padding-inline);
+    border: 0;
+    border-radius: var(--fs-menu-item-radius);
+    color: var(--fs-color-text);
+    background: transparent;
+    font: inherit;
+    text-align: start;
+    text-decoration: none;
+    cursor: pointer;
+  }
+
+  .fs-menu-list a:hover,
+  .fs-menu-list a:focus-visible,
+  .fs-menu-list button:hover,
+  .fs-menu-list button:focus-visible {
+    color: var(--fs-color-text);
+    background-color: var(--fs-color-subtle);
+    outline: none;
+  }
+
+  .fs-menu-list .is-active,
+  .fs-menu-list [aria-current="page"] {
+    color: var(--fs-alert-primary-text);
+    background-color: var(--fs-color-primary-bg-subtle);
+    font-weight: $font-weight-medium;
+  }
+
+  .fs-menu-list .is-disabled,
+  .fs-menu-list [aria-disabled="true"],
+  .fs-menu-list :disabled {
+    color: var(--fs-color-muted);
+    pointer-events: none;
+    opacity: 0.6;
+  }
+
+  .fs-menu-compact {
+    --fs-menu-item-padding-block: 0.375rem;
+    --fs-menu-item-padding-inline: 0.625rem;
+  }
+
+  .fs-menu-bordered {
+    padding: 0.375rem;
+    border: var(--fs-border-width) solid var(--fs-color-border-default);
+    border-radius: var(--fs-radius-md);
+    background-color: var(--fs-color-surface);
+    box-shadow: var(--fs-shadow-sm);
+  }
+}

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

@@ -8,6 +8,21 @@
     margin: 0;
     padding: 0;
     list-style: none;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+
+  .fs-pagination-centered { justify-content: center; }
+  .fs-pagination-right { justify-content: flex-end; }
+
+  .fs-pagination-list {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 0.25rem;
+    margin: 0;
+    padding: 0;
+    list-style: none;
   }
 
   .fs-pagination-scroll {
@@ -24,19 +39,21 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    min-width: 32px;
-    height: 32px;
-    padding: 0 8px;
-    border: 1px solid var(--fs-color-border);
+    min-inline-size: 2rem;
+    min-block-size: 2rem;
+    padding-inline: 0.5rem;
+    border: var(--fs-border-width) solid var(--fs-color-border-default);
     border-radius: var(--fs-radius-sm);
     color: var(--fs-color-text);
     background-color: var(--fs-color-surface);
     text-decoration: none;
-    transition: background-color 0.15s ease-in-out;
+    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-page-link:hover {
+    color: var(--fs-color-primary);
     background-color: var(--fs-color-subtle);
+    border-color: var(--fs-color-primary);
   }
 
   .fs-page-link:focus-visible {
@@ -55,6 +72,16 @@
     pointer-events: none;
   }
 
+  .fs-page-item[aria-disabled="true"] .fs-page-link,
+  .fs-page-link[aria-disabled="true"] {
+    color: var(--fs-color-muted);
+    opacity: 0.6;
+    pointer-events: none;
+    cursor: not-allowed;
+  }
+
+  .fs-pagination-rounded .fs-page-link { border-radius: 999px; }
+
   // Bordered: itens colados (sem gap), borda contínua fundida (técnica do
   // Input Group — margin negativo + z-index no item ativo/hover), cantos
   // arredondados só nas pontas.
@@ -67,17 +94,17 @@
   }
 
   .fs-pagination-bordered .fs-page-item:not(:first-child) .fs-page-link {
-    margin-left: -1px;
+    margin-inline-start: -1px;
   }
 
   .fs-pagination-bordered .fs-page-item:first-child .fs-page-link {
-    border-top-left-radius: var(--fs-radius-sm);
-    border-bottom-left-radius: var(--fs-radius-sm);
+    border-start-start-radius: var(--fs-radius-sm);
+    border-end-start-radius: var(--fs-radius-sm);
   }
 
   .fs-pagination-bordered .fs-page-item:last-child .fs-page-link {
-    border-top-right-radius: var(--fs-radius-sm);
-    border-bottom-right-radius: var(--fs-radius-sm);
+    border-start-end-radius: var(--fs-radius-sm);
+    border-end-end-radius: var(--fs-radius-sm);
   }
 
   .fs-pagination-bordered .fs-page-link:hover,
@@ -88,16 +115,16 @@
 
   // Compacta / grande — mesma escala sm/lg dos outros componentes.
   .fs-pagination-sm .fs-page-link {
-    min-width: 26px;
-    height: 26px;
-    padding: 0 6px;
+    min-inline-size: 1.625rem;
+    min-block-size: 1.625rem;
+    padding-inline: 0.375rem;
     font-size: $font-size-xs;
   }
 
   .fs-pagination-lg .fs-page-link {
-    min-width: 40px;
-    height: 40px;
-    padding: 0 12px;
+    min-inline-size: 2.5rem;
+    min-block-size: 2.5rem;
+    padding-inline: 0.75rem;
     font-size: $font-size-md;
   }
 

package/packages/fokus-components/scss/components/_segmented-control.scss

@@ -13,8 +13,11 @@
     border: 1px solid var(--fs-color-border);
     border-radius: var(--fs-radius-sm);
     overflow: hidden;
+    max-inline-size: 100%;
   }
 
+  .fs-segmented-control-vertical { flex-direction: column; }
+
   .fs-segmented-item {
     display: flex;
   }
@@ -41,6 +44,7 @@
     align-items: center;
     justify-content: center;
     min-height: 38px;
+    min-block-size: var(--fs-control-touch-target);
     padding: 0 12px;
     color: var(--fs-color-text);
     background-color: var(--fs-color-surface);
@@ -50,7 +54,7 @@
     white-space: nowrap;
     cursor: pointer;
     user-select: none;
-    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
+    transition: var(--fs-control-transition);
   }
 
   .fs-segmented-label:hover {
@@ -74,6 +78,17 @@
     pointer-events: none;
   }
 
+  .fs-segmented-input[aria-invalid="true"] + .fs-segmented-label,
+  .fs-segmented-control.is-invalid {
+    outline: var(--fs-border-width) solid var(--fs-control-invalid-color);
+    outline-offset: var(--fs-focus-offset);
+  }
+
+  .fs-segmented-control-vertical .fs-segmented-item:not(:first-child) .fs-segmented-label {
+    border-block-start: 1px solid var(--fs-color-border);
+    border-inline-start: 0;
+  }
+
   .fs-segmented-control-sm .fs-segmented-label {
     min-height: 30px;
     padding: 0 8px;