fokus-styles 2.4.0 → 2.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fokus-styles",
-  "version": "2.4.0",
+  "version": "2.6.0",
   "description": "Fokus Styles is a complete CSS framework with components, utilities, vanilla JavaScript, icons, React wrappers, and a CLI.",
   "keywords": [
     "css",
@@ -82,25 +82,27 @@
     "fokus": "packages/fokus-cli/bin/fokus.mjs"
   },
   "files": [
-    "assets",
-    "dist",
-    "scss",
+    "assets/fonts",
+    "dist/css/*.css",
+    "dist/js/*.js",
+    "scss/**/*.scss",
     "packages/fokus-core/scss",
     "packages/fokus-components/scss",
     "packages/fokus-utilities/scss",
     "packages/fokus-fonts/scss",
-    "packages/fokus-js/js",
-    "packages/fokus-icons",
-    "packages/fokus-react/src",
-    "packages/fokus-cli/bin",
-    "packages/fokus-cli/lib",
-    "docs",
-    "scripts/migrate-fokus.mjs",
-    "scripts/migrate-fokus-map.json",
-    "mockup",
+    "packages/fokus-js/js/**/*.js",
+    "packages/fokus-js/js/**/*.d.ts",
+    "packages/fokus-icons/index.js",
+    "packages/fokus-icons/icons/**/*.js",
+    "packages/fokus-icons/svg/**/*.svg",
+    "packages/fokus-icons/LICENSE",
+    "packages/fokus-icons/LICENSE-LUCIDE.txt",
+    "packages/fokus-react/src/**/*.js",
+    "packages/fokus-react/src/**/*.d.ts",
+    "packages/fokus-cli/bin/**/*.mjs",
+    "packages/fokus-cli/lib/**/*.mjs",
     "LICENSE",
-    "README.md",
-    "CHANGELOG.md"
+    "README.md"
   ],
   "engines": {
     "node": ">=18"

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

@@ -2,23 +2,145 @@
 
 @layer components {
   .fs-alert {
+    --fs-alert-padding-block: 12px;
+    --fs-alert-padding-inline: 16px;
+    --fs-alert-gap: 12px;
+    --fs-alert-radius: var(--fs-radius-md, 6px);
+    --fs-alert-border-width: 1px;
+    --fs-alert-accent-width: 4px;
+    --fs-alert-icon-size: 20px;
+    --fs-alert-heading-gap: 4px;
+    --fs-alert-actions-gap: 8px;
+
     display: flex;
     align-items: flex-start;
-    gap: 8px;
-    padding: 12px 16px;
-    border: 1px solid var(--fs-color-border);
-    border-left: 5px solid var(--fs-color-border);
-    border-radius: 0;
+    gap: var(--fs-alert-gap);
+    min-inline-size: 0;
+    padding-block: var(--fs-alert-padding-block);
+    padding-inline: var(--fs-alert-padding-inline);
+    border: var(--fs-alert-border-width) solid var(--fs-color-border);
+    border-inline-start: var(--fs-alert-accent-width) solid var(--fs-color-border);
+    border-radius: var(--fs-alert-radius);
     color: var(--fs-color-text);
     background-color: var(--fs-color-surface-raised);
     font-size: $font-size-sm;
   }
 
+  .fs-alert-inline {
+    --fs-alert-padding-block: 8px;
+    --fs-alert-padding-inline: 12px;
+    --fs-alert-gap: 8px;
+    --fs-alert-accent-width: 3px;
+    --fs-alert-icon-size: 16px;
+  }
+
+  .fs-alert-group {
+    display: grid;
+    gap: 12px;
+    min-inline-size: 0;
+  }
+
+  .fs-alert[aria-busy="true"],
+  .fs-alert.is-loading {
+    cursor: progress;
+  }
+
+  .fs-alert[aria-busy="true"] .fs-alert-actions,
+  .fs-alert.is-loading .fs-alert-actions {
+    opacity: 0.75;
+  }
+
+  .fs-alert .fs-spinner {
+    flex: 0 0 auto;
+    align-self: flex-start;
+    margin-block: 2px;
+  }
+
+  .fs-alert-icon {
+    display: inline-flex;
+    flex: 0 0 var(--fs-alert-icon-size);
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--fs-alert-icon-size);
+    block-size: var(--fs-alert-icon-size);
+    color: currentcolor;
+  }
+
+  .fs-alert-icon .fs-icon,
+  .fs-alert-icon > svg {
+    inline-size: 100%;
+    block-size: 100%;
+  }
+
+  .fs-alert-content {
+    flex: 1 1 auto;
+    min-inline-size: 0;
+  }
+
+  .fs-alert-heading {
+    margin: 0 0 var(--fs-alert-heading-gap);
+    color: inherit;
+    font-size: inherit;
+    font-weight: $font-weight-semibold;
+    line-height: 1.35;
+  }
+
+  .fs-alert-text {
+    margin: 0;
+    line-height: 1.5;
+  }
+
+  .fs-alert-actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--fs-alert-actions-gap);
+    align-items: center;
+    margin-block-start: var(--fs-alert-actions-gap);
+  }
+
+  .fs-alert-link {
+    color: inherit;
+    font-weight: $font-weight-medium;
+    text-decoration: underline;
+    text-underline-offset: 2px;
+  }
+
+  .fs-alert-close {
+    flex: 0 0 auto;
+    margin-inline-start: auto;
+    color: inherit;
+  }
+
   @each $name, $color in $theme-colors {
     .fs-alert-#{$name} {
       color: var(--fs-alert-#{$name}-text);
       background-color: var(--fs-alert-#{$name}-bg);
-      border-color: var(--fs-color-#{$name});
+      border-color: var(--fs-color-border);
+      border-inline-start-color: var(--fs-color-#{$name});
+    }
+  }
+
+  @media (width <= 480px) {
+    .fs-alert {
+      --fs-alert-padding-inline: 12px;
+    }
+
+    .fs-alert-actions {
+      align-items: flex-start;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .fs-alert {
+      border-color: CanvasText;
+      border-inline-start-color: Highlight;
+      color: CanvasText;
+      background-color: Canvas;
+    }
+
+    .fs-alert-link,
+    .fs-alert .fs-btn {
+      forced-color-adjust: none;
     }
   }
 }

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

@@ -10,7 +10,10 @@
     --fs-badge-bg: var(--fs-color-subtle);
     --fs-badge-border: transparent;
     --fs-badge-height: 22px;
-    --fs-badge-radius: 0;
+    --fs-badge-radius: var(--fs-radius-sm);
+    --fs-badge-padding-inline: 8px;
+    --fs-badge-padding-block-start: 2px;
+    --fs-badge-padding-block-end: 2px;
 
     display: inline-flex;
     align-items: center;
@@ -18,9 +21,8 @@
     justify-content: center;
     min-height: var(--fs-badge-height);
 
-    // O peso óptico da fonte fica ligeiramente abaixo do centro geométrico.
-    // Um pixel extra abaixo reposiciona a linha de texto para cima.
-    padding: 1px 8px 3px;
+    // O padding vertical simétrico mantém a linha de texto no centro geométrico.
+    padding: var(--fs-badge-padding-block-start) var(--fs-badge-padding-inline) var(--fs-badge-padding-block-end);
     border: 1px solid var(--fs-badge-border);
     border-radius: var(--fs-badge-radius);
     color: var(--fs-badge-color);
@@ -53,15 +55,19 @@
 
   .fs-badge-sm {
     --fs-badge-height: 18px;
+    --fs-badge-padding-inline: 6px;
+    --fs-badge-padding-block-start: 1px;
+    --fs-badge-padding-block-end: 1px;
 
-    padding: 0 6px 2px;
     font-size: $font-size-xs;
   }
 
   .fs-badge-lg {
     --fs-badge-height: 26px;
+    --fs-badge-padding-inline: 10px;
+    --fs-badge-padding-block-start: 3px;
+    --fs-badge-padding-block-end: 3px;
 
-    padding: 2px 10px 4px;
     font-size: $font-size-md;
   }
 
@@ -81,13 +87,20 @@
     font-variant-numeric: tabular-nums;
   }
 
+  .fs-badge-count-circle {
+    aspect-ratio: 1;
+    min-width: var(--fs-badge-height);
+    padding-inline: 0;
+    border-radius: 50%;
+  }
+
   .fs-badge-split {
     --fs-badge-split-label-bg: var(--fs-color-black);
     --fs-badge-split-label-color: var(--fs-color-white);
     --fs-badge-split-value-bg: var(--fs-color-primary);
     --fs-badge-split-value-color: #{color-contrast(map.get($theme-colors, primary))};
     --fs-badge-split-height: 22px;
-    --fs-badge-split-radius: 0;
+    --fs-badge-split-radius: var(--fs-radius-sm);
 
     display: inline-flex;
     min-height: var(--fs-badge-split-height);
@@ -105,7 +118,8 @@
     display: inline-flex;
     align-items: center;
     min-height: var(--fs-badge-split-height);
-    padding: 1px 8px 3px;
+    padding-block: 2px;
+    padding-inline: 8px;
   }
 
   .fs-badge-split-label {
@@ -143,11 +157,13 @@
 
   .fs-badge-split.fs-badge-sm .fs-badge-split-label,
   .fs-badge-split.fs-badge-sm .fs-badge-split-value {
-    padding: 0 6px 2px;
+    padding-block: 1px;
+    padding-inline: 6px;
   }
 
   .fs-badge-split.fs-badge-lg .fs-badge-split-label,
   .fs-badge-split.fs-badge-lg .fs-badge-split-value {
-    padding: 2px 10px 4px;
+    padding-block: 3px;
+    padding-inline: 10px;
   }
 }

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

@@ -44,3 +44,4 @@
 @use "placeholder";
 @use "progress";
 @use "scrollspy";
+@use "responsive";

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

@@ -9,15 +9,31 @@
 
 @layer components {
   .fs-popover {
+    --fs-popover-width: 320px;
+    --fs-popover-max-width: min(var(--fs-popover-width), calc(100vw - 32px));
+    --fs-popover-padding-block: 12px;
+    --fs-popover-padding-inline: 14px;
+    --fs-popover-gap: 10px;
+    --fs-popover-radius: var(--fs-radius-md, 6px);
+    --fs-popover-shadow: var(--fs-shadow-md);
+    --fs-popover-icon-size: 20px;
+    --fs-popover-heading-gap: 4px;
+    --fs-popover-footer-gap: 8px;
+    --fs-popover-arrow-size: 8px;
+    --fs-popover-border-width: 1px;
+
     position: absolute;
     z-index: var(--fs-z-offcanvas);
     display: none;
-    max-width: 280px;
+    inline-size: var(--fs-popover-width);
+    max-inline-size: var(--fs-popover-max-width);
+    min-inline-size: 0;
     color: var(--fs-color-text);
     background-color: var(--fs-color-surface);
-    border: 1px solid var(--fs-color-border);
-    border-radius: var(--fs-radius-md);
-    box-shadow: var(--fs-shadow-md);
+    border: var(--fs-popover-border-width) solid var(--fs-color-border);
+    border-radius: var(--fs-popover-radius);
+    box-shadow: var(--fs-popover-shadow);
+    overflow-wrap: anywhere;
   }
 
   .fs-popover.is-open {
@@ -25,32 +41,89 @@
   }
 
   .fs-popover-header {
-    padding: 10px 14px;
+    display: flex;
+    align-items: center;
+    gap: var(--fs-popover-gap);
+    min-inline-size: 0;
+    padding-block: var(--fs-popover-padding-block);
+    padding-inline: var(--fs-popover-padding-inline);
     background-color: var(--fs-color-subtle);
     border-bottom: 1px solid var(--fs-color-border);
-    border-radius: var(--fs-radius-md) var(--fs-radius-md) 0 0;
+    border-radius: var(--fs-popover-radius) var(--fs-popover-radius) 0 0;
     font-size: $font-size-sm;
     font-weight: $font-weight-medium;
   }
 
   .fs-popover-body {
-    padding: 14px;
+    min-inline-size: 0;
+    padding-block: var(--fs-popover-padding-block);
+    padding-inline: var(--fs-popover-padding-inline);
     font-size: $font-size-sm;
+    line-height: 1.5;
+  }
+
+  .fs-popover-icon {
+    display: inline-flex;
+    flex: 0 0 var(--fs-popover-icon-size);
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--fs-popover-icon-size);
+    block-size: var(--fs-popover-icon-size);
+    color: currentcolor;
+  }
+
+  .fs-popover-icon .fs-icon,
+  .fs-popover-icon > svg {
+    inline-size: 100%;
+    block-size: 100%;
+  }
+
+  .fs-popover-heading {
+    display: flex;
+    flex: 1 1 auto;
+    flex-wrap: wrap;
+    align-items: baseline;
+    gap: var(--fs-popover-heading-gap);
+    min-inline-size: 0;
+  }
+
+  .fs-popover-title,
+  .fs-popover-meta,
+  .fs-popover-text {
+    min-inline-size: 0;
+  }
+
+  .fs-popover-meta {
+    color: var(--fs-color-muted);
+    font-size: $font-size-xs;
+    font-weight: $font-weight-regular;
+  }
+
+  .fs-popover-text {
+    margin: 0;
+  }
+
+  .fs-popover-close {
+    flex: 0 0 auto;
+    margin-inline-start: auto;
+    color: inherit;
   }
 
   .fs-popover-footer {
     display: flex;
     align-items: center;
     justify-content: flex-end;
-    gap: 8px;
-    padding: 10px 14px;
+    flex-wrap: wrap;
+    gap: var(--fs-popover-footer-gap);
+    padding-block: var(--fs-popover-padding-block);
+    padding-inline: var(--fs-popover-padding-inline);
     border-top: 1px solid var(--fs-color-border);
   }
 
   .fs-popover-arrow {
     position: absolute;
-    width: 8px;
-    height: 8px;
+    inline-size: var(--fs-popover-arrow-size);
+    block-size: var(--fs-popover-arrow-size);
     background-color: var(--fs-color-surface);
     border: 1px solid var(--fs-color-border);
     transform: rotate(45deg);
@@ -58,32 +131,32 @@
 
   .fs-popover[data-placement="top"] .fs-popover-arrow {
     bottom: -5px;
-    left: 50%;
-    margin-left: -4px;
+    inset-inline-start: var(--fs-popover-arrow-offset, 50%);
+    margin-inline-start: calc(var(--fs-popover-arrow-size) / -2);
     border-top: 0;
     border-left: 0;
   }
 
   .fs-popover[data-placement="bottom"] .fs-popover-arrow {
     top: -5px;
-    left: 50%;
-    margin-left: -4px;
+    inset-inline-start: var(--fs-popover-arrow-offset, 50%);
+    margin-inline-start: calc(var(--fs-popover-arrow-size) / -2);
     border-right: 0;
     border-bottom: 0;
   }
 
   .fs-popover[data-placement="left"] .fs-popover-arrow {
-    top: 50%;
-    right: -5px;
-    margin-top: -4px;
+    inset-block-start: var(--fs-popover-arrow-offset, 50%);
+    inset-inline-end: calc(var(--fs-popover-arrow-size) / -2 - 1px);
+    margin-block-start: calc(var(--fs-popover-arrow-size) / -2);
     border-bottom: 0;
     border-left: 0;
   }
 
   .fs-popover[data-placement="right"] .fs-popover-arrow {
-    top: 50%;
-    left: -5px;
-    margin-top: -4px;
+    inset-block-start: var(--fs-popover-arrow-offset, 50%);
+    inset-inline-start: calc(var(--fs-popover-arrow-size) / -2 - 1px);
+    margin-block-start: calc(var(--fs-popover-arrow-size) / -2);
     border-top: 0;
     border-right: 0;
   }
@@ -100,4 +173,41 @@
     display: flex;
     gap: 12px;
   }
+
+  .fs-popover[aria-busy="true"] {
+    cursor: progress;
+  }
+
+  @media (width <= 480px) {
+    .fs-popover {
+      --fs-popover-padding-inline: 12px;
+      --fs-popover-max-width: calc(100vw - 24px);
+    }
+
+    .fs-popover-footer {
+      align-items: flex-start;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .fs-popover {
+      transition: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .fs-popover,
+    .fs-popover-arrow {
+      border-color: CanvasText;
+      color: CanvasText;
+      background-color: Canvas;
+      box-shadow: none;
+    }
+
+    .fs-popover-header,
+    .fs-popover-footer {
+      border-color: CanvasText;
+      background-color: Canvas;
+    }
+  }
 }

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

@@ -0,0 +1,23 @@
+/* stylelint-disable declaration-block-single-line-max-declarations */
+@layer components {
+  .fs-stack { display: flex; flex-direction: column; gap: var(--fs-stack-gap, var(--fs-space-3)); }
+  .fs-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fs-cluster-gap, var(--fs-space-2)); }
+  .fs-responsive-media { width: 100%; height: auto; object-fit: cover; }
+
+  @media (width <= 639.98px) {
+    .fs-modal-dialog, .fs-offcanvas { max-width: 100%; margin-inline: 0; border-radius: 0; }
+    .fs-table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
+    .fs-btn-group-responsive, .fs-btn-group-responsive > .fs-btn { width: 100%; }
+    .fs-btn-group-responsive { flex-direction: column; }
+  }
+
+  @media (width >= 640px) {
+    .fs-stack-md-row { flex-direction: row; align-items: center; }
+  }
+
+  @media (prefers-reduced-motion: reduce) { .fs-stack, .fs-cluster { scroll-behavior: auto; } }
+
+  @media (forced-colors: active) {
+    .fs-card, .fs-dropdown-menu, .fs-modal-content, .fs-offcanvas, .fs-toast { border: 1px solid CanvasText; box-shadow: none; }
+  }
+}

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

@@ -8,8 +8,18 @@
 // o texto e o "x". O dismiss em si é feito por js/tag.js (FokusStyles.Tag).
 @layer components {
   .fs-tag {
+    --fs-tag-icon-size: var(--fs-tag-close-size);
+    --fs-tag-icon-glyph-size: 12px;
+    --fs-tag-icon-gap: 4px;
+    --fs-tag-icon-color: currentcolor;
+    --fs-tag-close-size: calc(var(--fs-badge-height) - 2px);
+    --fs-tag-close-gap: 4px;
+    --fs-tag-padding-inline-start: 8px;
+    --fs-tag-padding-inline-end: 2px;
+
     gap: 0;
-    padding: 0 0 0 8px;
+    padding-inline-start: var(--fs-tag-padding-inline-start);
+    padding-inline-end: var(--fs-tag-padding-inline-end);
   }
 
   // O texto fica em um elemento próprio quando a tag puder ser truncada. A
@@ -30,25 +40,32 @@
 
   .fs-tag-icon {
     display: inline-grid;
-    width: 12px;
-    height: 12px;
-    flex: 0 0 12px;
-    margin-right: 4px;
+    width: var(--fs-tag-icon-size);
+    height: var(--fs-tag-icon-size);
+    flex: 0 0 var(--fs-tag-icon-size);
     place-items: center;
+    color: var(--fs-tag-icon-color);
+    margin-inline-end: var(--fs-tag-icon-gap);
+  }
+
+  .fs-tag-icon-end {
+    margin-inline-start: auto;
+    margin-inline-end: var(--fs-tag-icon-gap);
   }
 
   .fs-tag-icon .fs-icon {
-    width: 12px;
-    height: 12px;
+    display: block;
+    width: var(--fs-tag-icon-glyph-size);
+    height: var(--fs-tag-icon-glyph-size);
     stroke: currentcolor;
   }
 
   .fs-tag .fs-btn-close {
-    width: calc(var(--fs-badge-height) - 2px);
-    height: calc(var(--fs-badge-height) - 2px);
-    flex: 0 0 calc(var(--fs-badge-height) - 2px);
-    margin-left: 4px;
-    border-radius: 0;
+    width: var(--fs-tag-close-size);
+    height: var(--fs-tag-close-size);
+    flex: 0 0 var(--fs-tag-close-size);
+    margin-inline-start: var(--fs-tag-close-gap);
+    border-radius: var(--fs-badge-radius);
     background-color: transparent;
 
     // Herda a cor de texto do badge (contraste automático por variante) em vez
@@ -61,7 +78,7 @@
 
   .fs-tag .fs-btn-close::before,
   .fs-tag .fs-btn-close::after {
-    top: calc(50% + 1px);
+    top: 50%;
     width: 8px;
   }
 
@@ -143,6 +160,12 @@
     background-color: color-mix(in srgb, currentcolor 18%, transparent);
   }
 
+  // Um ícone inicial ocupa a área reservada à esquerda; reduzir o padding
+  // mantém a composição equilibrada sem empurrar o texto para dentro.
+  .fs-tag:has(> .fs-tag-icon:not(.fs-tag-icon-end)) {
+    --fs-tag-padding-inline-start: 2px;
+  }
+
   // Um botão de overflow representa as tags não exibidas. A abertura da lista
   // ou popover é responsabilidade da composição que o utiliza.
   .fs-tag-overflow {
@@ -200,7 +223,7 @@
     display: inline-grid;
     width: calc(var(--fs-badge-height) - 2px);
     height: calc(var(--fs-badge-height) - 2px);
-    margin-left: 4px;
+    margin-inline-start: var(--fs-tag-close-gap);
     place-items: center;
   }