@festo-ui/web-essentials 10.1.1 → 11.0.0-dev.934

package/llm-doc/utilities.md

@@ -0,0 +1,127 @@
+# Utilities
+
+## Display
+
+Responsive display classes:
+
+| Class | Description |
+|---|---|
+| `fwe-d-none` | Hidden |
+| `fwe-d-block` | Block |
+| `fwe-d-flex` | Flex |
+| `fwe-d-inline` | Inline |
+| `fwe-d-{bp}-none` | Hidden from breakpoint |
+| `fwe-d-{bp}-block` | Block from breakpoint |
+| `fwe-d-{bp}-flex` | Flex from breakpoint |
+
+Example: `fwe-d-none fwe-d-md-block` → hidden on mobile, visible from `md`.
+
+## Spacing (Margin & Padding)
+
+### Syntax: `fwe-{m|p}{side}-{size}`
+
+**Sides:** *(empty)* = all, `t` = top, `b` = bottom, `l` = left, `r` = right, `x` = horizontal, `y` = vertical
+
+**Sizes:**
+
+| Token | Value |
+|---|---|
+| `0` | 0 |
+| `xxxs` | 2px |
+| `xxs` | 4px |
+| `xs` | 8px |
+| `s` | 12px |
+| `m` | 16px |
+| `l` | 24px |
+| `xl` | 32px |
+| `xxl` | 48px |
+| `xxxl` | 64px |
+| `auto` | auto |
+
+Also numeric: `fwe-m-0` to `fwe-m-6`, `fwe-p-0` to `fwe-p-6`.
+
+### Responsive Spacing
+
+```html
+<div class="fwe-mt-xs fwe-mt-md-xl">
+  <!-- margin-top: 8px, from md: 32px -->
+</div>
+```
+
+### Examples
+
+```html
+<div class="fwe-m-0">No margin</div>
+<div class="fwe-p-4">Padding level 4</div>
+<div class="fwe-mt-xl fwe-mb-s">Margin top XL, bottom S</div>
+<div class="fwe-mx-auto">Horizontally centered</div>
+<div class="fwe-ml-auto">Pushed to the right</div>
+```
+
+## Borders
+
+| Class | Description |
+|---|---|
+| `fwe-b` | Border all sides |
+| `fwe-bt` | Border top |
+| `fwe-bb` | Border bottom |
+| `fwe-bl` | Border left |
+| `fwe-br` | Border right |
+| `fwe-bx` | Border left + right |
+| `fwe-by` | Border top + bottom |
+
+Responsive: `fwe-b-{bp}`, `fwe-bl-{bp}-none` etc.
+
+## Flex Utilities
+
+### Container & Direction
+
+| Class | Description |
+|---|---|
+| `fwe-d-flex` | Display flex |
+| `fwe-flex-row` | Row (default) |
+| `fwe-flex-row-reverse` | Row reversed |
+| `fwe-flex-column` | Column |
+| `fwe-flex-column-reverse` | Column reversed |
+
+### Justify Content
+
+`fwe-justify-content-{flex-start|flex-end|center|space-between|space-around|space-evenly}`
+
+### Align Items
+
+`fwe-align-items-{flex-start|flex-end|center|baseline|stretch}`
+
+### Align Self
+
+`fwe-align-self-{flex-start|flex-end|center}`
+
+### Grow & Shrink
+
+| Class | Description |
+|---|---|
+| `fwe-flex-grow-1` | flex-grow: 1 |
+| `fwe-flex-shrink-1` | flex-shrink: 1 |
+
+### Wrap
+
+| Class | Description |
+|---|---|
+| `fwe-flex-wrap` | Wrap enabled |
+| `fwe-flex-nowrap` | No wrap |
+| `fwe-flex-wrap-reverse` | Wrap reversed |
+
+### Order
+
+`fwe-order-{1|2|3}`
+
+### Align Content
+
+`fwe-align-content-{flex-start|flex-end|center|space-between|space-around|stretch}`
+
+## Other
+
+| Class | Description |
+|---|---|
+| `fwe-w-100` | width: 100% |
+| `fwe-sr-only` | Screen reader only (visually hidden) |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@festo-ui/web-essentials",
-  "version": "10.1.1",
+  "version": "11.0.0-dev.934",
   "description": "CSS framework and utils to build FESTO web applications",
   "keywords": [
     "css",
@@ -19,7 +19,8 @@
   "style": "dist/css/festo-web-essentials.css",
   "files": [
     "dist/{scss,css,js}/**/*.{scss,css,js,map}",
-    "scss"
+    "scss",
+    "llm-doc"
   ],
   "scripts": {
     "storybook": "storybook dev -p 6005",
@@ -46,6 +47,7 @@
     "@babel/preset-typescript": "^7.22.11",
     "@festo-ui/icon-font": "*",
     "@storybook/addon-docs": "^10.2.9",
+    "@storybook/addon-mcp": "^0.6.0",
     "@storybook/cli": "^10.2.9",
     "@storybook/html": "^10.2.9",
     "@storybook/html-vite": "^10.2.9",

package/scss/_breadcrumb.scss

@@ -20,7 +20,7 @@
     flex-shrink: 0;
     align-items: center;
     min-height: 24px;
-    color: variables.$text;
+    color: currentColor;
     font-size: variables.$font-size-md;
     line-height: calc(#{variables.$font-size-md} + 2px);
 
@@ -38,7 +38,7 @@
   a {
     display: block;
     align-items: center;
-    color: variables.$text;
+    color: currentColor;
     text-decoration: none;
     user-select: none;
 
@@ -68,7 +68,8 @@
       margin-right: 4px;
       height: 16px;
       width: 16px;
-      background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGRhdGEtbmFtZT0id2hpdGUgYmFja2dyb3VuZCIgdmlld0JveD0iMCAwIDE2IDE2Ij48cGF0aCBmaWxsPSJub25lIiBkPSJNMCAxNlYwaDE2djE2eiIvPjxwYXRoIGZpbGw9IiMzMzMiIGQ9Im0xMC43MDcgOC00LjM1MyA0LjM1NC0uNzA4LS43MDhMOS4yOTMgOCA1LjY0NiA0LjM1NGwuNzA4LS43MDhMMTAuNzA3IDh6Ii8+PC9zdmc+");
+      background: currentColor;
+      mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGRhdGEtbmFtZT0id2hpdGUgYmFja2dyb3VuZCIgdmlld0JveD0iMCAwIDE2IDE2Ij48cGF0aCBmaWxsPSJub25lIiBkPSJNMCAxNlYwaDE2djE2eiIvPjxwYXRoIGZpbGw9IiMzMzMiIGQ9Im0xMC43MDcgOC00LjM1MyA0LjM1NC0uNzA4LS43MDhMOS4yOTMgOCA1LjY0NiA0LjM1NGwuNzA4LS43MDhMMTAuNzA3IDh6Ii8+PC9zdmc+");
     }
   }
 

package/scss/_table.scss

@@ -41,9 +41,6 @@ table.fwe-table {
           position: relative;
           top: 2px;
           left: variables.$spacer-xxs;
-        }
-
-        &::before {
           background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2IiBmaWxsPSJub25lIj48cGF0aCBkPSJNOCAxMC43MDdMMy42NDYgNi4zNTRMNC4zNTQgNS42NDZMOCA5LjI5M0wxMS42NDYgNS42NDZMMTIuMzU0IDYuMzU0TDggMTAuNzA3WiIgZmlsbD0iIzMzMzMzMyIvPjwvc3ZnPg==");
         }
 
@@ -66,8 +63,8 @@ table.fwe-table {
     }
 
     td {
-      &.fwe-v-align-middle {
-        vertical-align: middle;
+      &.fwe-v-align-top {
+        vertical-align: top;
       }
 
       &.fwe-t-align-center {
@@ -84,7 +81,7 @@ table.fwe-table {
       padding-bottom: 12px;
       padding-left: 16px;
       padding-right: 16px;
-      vertical-align: top;
+      vertical-align: middle;
 
       img.fwe-td-img {
         display: block;

package/scss/_text-link.scss

@@ -28,7 +28,8 @@ a {
 .fwe-text-link {
   color: variables.$hero;
   text-decoration: underline;
-  text-decoration-thickness: auto;
+  text-decoration-thickness: 2px;
+  text-underline-offset: 2px;
 
   i.fwe-icon {
     vertical-align: text-top;
@@ -47,6 +48,7 @@ a {
   &:hover:not(.fwe-disabled) {
     color: variables.$hero-hover;
     text-decoration: underline;
-    text-decoration-thickness: auto;
+    text-decoration-thickness: 2px;
+    text-underline-offset: 2px;
   }
 }