@flitsmeister/design-system 2.2.33 → 2.2.34

package/README.md

@@ -28,15 +28,19 @@ Design tokens are exported as platform-specific files in `tokens/schema_exports/
 
 ### 2. Using Vue Components
 
-You can import individual Vue components directly from the package:
+Import the components you need:
 
 ```js
 import { fmxButton, fmxInput, fmxDropdown } from "@flitsmeister/design-system";
 ```
 
-These are standard Vue 3 single-file components. Register and use them in your app as you would any other Vue component.
+Register and use them as standard Vue 3 single-file components. Overview of each:
 
-**fmxDropdown** is a v-model select component. Pass `options` as an array of `{ value, label }`, and bind `v-model` to the selected value. Use the `option` slot to customize option rendering. Set `fullScreen` to true for a mobile-friendly modal overlay.
+- **fmxButton** — Button with multiple visual variants. Props: `role` (e.g. primary, secondary, success, warning, danger, info, strong, weak), `buttontype` (filled, text, outline, squared), `size` (sm, md, lg, xl), `icon` (symbol id for your SVG sprite), `iconPosition` (prepend, append), `disabled`, `customClasses`. Use `href` and `target` for link-style buttons. If you use `icon`, the consuming app must provide an SVG sprite that includes the referenced symbol ids.
+
+- **fmxInput** — v-model text-style input with optional validation and floating placeholder. Props: `placeholder`, `rules` (array of validator functions), `customClass` (wrapper spacing/layout), `inputClass` (on the input element). To show a visible default border, set on a parent: `--fmx-input-border-default: var(--color-surface-neutral-default);` (focus and error states stay correct). To validate from a parent (e.g. on submit), use a ref and call `validate()`.
+
+- **fmxDropdown** — v-model select. Pass `options` as an array of `{ value, label }` and bind `v-model` to the selected value. Use the `option` slot to customize option rendering. Set `fullScreen` to true for a mobile-friendly modal overlay.
 
 ### 3. Using Icons
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@flitsmeister/design-system",
-    "version": "2.2.33",
+    "version": "2.2.34",
     "description": "Flitsmeister design system and demo site",
     "main": "index.js",
     "exports": {

package/web/components/fmxButton.vue

@@ -120,12 +120,12 @@
     }
 
     /*
-    SIZES
-    sm: 'text-base h-10 px-2 font-medium',
-    md: 'text-lg h-12 px-4 font-bold',
-    lg: 'text-2xl h-[60px] py-3 px-6 font-bold',
-    xl: 'text-3xl h-20 py-md px-8 font-extrabold'
-  */
+      SIZES
+      sm: 'text-base h-10 px-2 font-medium',
+      md: 'text-lg h-12 px-4 font-bold',
+      lg: 'text-2xl h-[60px] py-3 px-6 font-bold',
+      xl: 'text-3xl h-20 py-md px-8 font-extrabold'
+    */
     &[data-size="sm"] {
       @apply text-base h-10 px-3 font-medium;
     }
@@ -168,17 +168,17 @@
     }
 
     /*
-    ROLES
-    primary: 'bg-surface-brand  text-content-label',
-    secondary: 'bg-surface-brandalt  text-content-brand',
-    success: 'bg-surface-success  text-content-label',
-    warning: 'bg-surface-warning  text-content-label',
-    danger: 'bg-surface-danger  text-content-label',
-    dangeralt: 'bg-surface-dangeralt  text-content-danger',
-    info: 'bg-surface-info  text-content-label',
-    strong: 'bg-black text-white',
-    weak: 'bg-white text-content-brand'
-  */
+      ROLES
+      primary: 'bg-surface-brand  text-content-label',
+      secondary: 'bg-surface-brandalt  text-content-brand',
+      success: 'bg-surface-success  text-content-label',
+      warning: 'bg-surface-warning  text-content-label',
+      danger: 'bg-surface-danger  text-content-label',
+      dangeralt: 'bg-surface-dangeralt  text-content-danger',
+      info: 'bg-surface-info  text-content-label',
+      strong: 'bg-black text-white',
+      weak: 'bg-white text-content-brand'
+    */
 
     /* color schemes per variant */
     &[data-buttontype="filled"],
@@ -247,11 +247,7 @@
       }
     }
 
-    /*
-    TODO: where did active/hover states go?
-  */
-
-    body &[class][disabled] {
+    body &[class][disabled][data-buttontype][data-role] {
       @apply cursor-not-allowed;
       @apply bg-surface-default text-content-weak;
 

package/web/components/fmxInput.vue

@@ -3,6 +3,7 @@
     class="inputgroup w-full mb-6"
     :class="[customClass]"
     :data-inputgroup-type="type"
+    :data-size="size"
   >
     <div class="relative">
       <input
@@ -15,7 +16,7 @@
         :readonly="readonly"
         :maxlength="maxLength"
         :autocomplete="autocomplete"
-        class="peer w-full bg-surface-defaulthighest text-content-default border-2 transition duration-300 ease focus:outline-none focus:border-out autofill:bg-surface-defaulthighest autofill:text-content-default"
+        class="peer fmx-input-border w-full bg-surface-defaulthighest text-content-default border-2 transition duration-300 ease focus:outline-none focus:border-out fmx-input-autofill"
         :class="[
           inputStateClass,
           sizeConfig.input,
@@ -59,36 +60,35 @@
 
   const SIZE_CONFIG = {
     sm: {
-      input: "h-10 text-base rounded-2xl px-3 autofill:pt-5 autofill:pb-1",
+      input: "h-10 text-base rounded-2xl px-3",
       inputWithPlaceholder: "pt-5 pb-1",
       inputWithoutPlaceholder: "py-2 flex items-center justify-center",
       label: "top-2.5",
       labelText: "text-base",
       labelFocused:
-        "peer-focus:top-[4px] peer-focus:left-2.5 peer-focus:text-xs peer-focus:font-bold peer-autofill:top-[4px] peer-autofill:left-2.5 peer-autofill:text-xs peer-autofill:font-bold",
+        "peer-focus:top-[4px] peer-focus:left-2.5 peer-focus:text-xs peer-focus:font-bold",
       labelFilled: "top-[4px] left-2.5 text-xs font-bold",
       icon: "right-2 top-2.5 text-xl leading-none",
     },
     md: {
-      input:
-        "h-[60px] text-lg leading-snug rounded-2xl px-3 autofill:pt-6 autofill:pb-1",
+      input: "h-[60px] text-lg leading-snug rounded-2xl px-3",
       inputWithPlaceholder: "pt-6 pb-1",
       inputWithoutPlaceholder: "py-3 flex items-center justify-center",
       label: "top-3.5",
       labelText: "text-lg",
       labelFocused:
-        "peer-focus:top-[6px] peer-focus:left-2.5 peer-focus:text-sm peer-focus:font-bold peer-autofill:top-[6px] peer-autofill:left-2.5 peer-autofill:text-sm peer-autofill:font-bold",
+        "peer-focus:top-[6px] peer-focus:left-2.5 peer-focus:text-sm peer-focus:font-bold",
       labelFilled: "top-[6px] left-2.5 text-sm font-bold",
       icon: "right-2 top-4 text-2xl leading-none",
     },
     lg: {
-      input: "h-14 text-lg rounded-2xl px-4 autofill:pt-7 autofill:pb-1",
+      input: "h-14 text-lg rounded-2xl px-4",
       inputWithPlaceholder: "pt-7 pb-1",
       inputWithoutPlaceholder: "py-4 flex items-center justify-center",
       label: "top-4",
       labelText: "text-lg",
       labelFocused:
-        "peer-focus:top-[8px] peer-focus:left-2.5 peer-focus:text-sm peer-focus:font-bold peer-autofill:top-[8px] peer-autofill:left-2.5 peer-autofill:text-sm peer-autofill:font-bold",
+        "peer-focus:top-[8px] peer-focus:left-2.5 peer-focus:text-sm peer-focus:font-bold",
       labelFilled: "top-[8px] left-2.5 text-sm font-bold",
       icon: "right-3 top-5 text-2xl leading-none",
     },
@@ -180,9 +180,6 @@
       inputStateClass() {
         return {
           "border-outline-danger": this.errorMessage && !this.isFocused,
-          "border-outline-brand": this.isFocused,
-          "border-transparent focus:border-outline-brand hover:border-outline-brand":
-            !this.errorMessage,
         };
       },
       labelFilledClass() {
@@ -233,6 +230,67 @@
     min-width: 100px;
   }
 
+  .inputgroup .fmx-input-border {
+    border-color: var(--fmx-input-border-default, transparent);
+  }
+  .inputgroup .fmx-input-border:focus {
+    border-color: var(--color-outline-brand);
+  }
+  .inputgroup .fmx-input-border:hover:not(:focus) {
+    border-color: var(--color-outline-brand);
+  }
+  .inputgroup .fmx-input-border.border-outline-danger {
+    border-color: var(--color-outline-danger);
+  }
+
+  /* Autofill: we only override what applies to the host input (padding, label). Chrome
+   * renders the autofill value in Shadow DOM (-internal-input-suggested); we don’t
+   * style that, as it’s browser-specific and not reliably styleable. */
+  .inputgroup .fmx-input-autofill:-webkit-autofill,
+  .inputgroup .fmx-input-autofill:autofill {
+    color: var(--color-content-default) !important;
+    -webkit-text-fill-color: var(--color-content-default) !important;
+  }
+  .inputgroup[data-size="sm"] .fmx-input-autofill:-webkit-autofill,
+  .inputgroup[data-size="sm"] .fmx-input-autofill:autofill {
+    padding-top: 1.25rem;
+    padding-bottom: 0.25rem;
+    font-size: 16px;
+  }
+  .inputgroup[data-size="sm"] .fmx-input-autofill:-webkit-autofill ~ label,
+  .inputgroup[data-size="sm"] .fmx-input-autofill:autofill ~ label {
+    top: 4px;
+    left: 0.625rem;
+    font-size: 0.75rem;
+    font-weight: 700;
+  }
+  .inputgroup[data-size="md"] .fmx-input-autofill:-webkit-autofill,
+  .inputgroup[data-size="md"] .fmx-input-autofill:autofill {
+    padding-top: 1.5rem;
+    padding-bottom: 0.25rem;
+    font-size: 18px;
+  }
+  .inputgroup[data-size="md"] .fmx-input-autofill:-webkit-autofill ~ label,
+  .inputgroup[data-size="md"] .fmx-input-autofill:autofill ~ label {
+    top: 6px;
+    left: 0.625rem;
+    font-size: 0.875rem;
+    font-weight: 700;
+  }
+  .inputgroup[data-size="lg"] .fmx-input-autofill:-webkit-autofill,
+  .inputgroup[data-size="lg"] .fmx-input-autofill:autofill {
+    padding-top: 1.75rem;
+    padding-bottom: 0.25rem;
+    font-size: 18px;
+  }
+  .inputgroup[data-size="lg"] .fmx-input-autofill:-webkit-autofill ~ label,
+  .inputgroup[data-size="lg"] .fmx-input-autofill:autofill ~ label {
+    top: 8px;
+    left: 0.625rem;
+    font-size: 0.875rem;
+    font-weight: 700;
+  }
+
   .icon-scale-enter-active,
   .icon-scale-leave-active {
     transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);