@flitsmeister/design-system 2.2.30 → 2.2.34

package/README.md

@@ -28,13 +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 } from "@flitsmeister/design-system";
+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:
+
+- **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
 
@@ -52,7 +58,7 @@ You can also reference icons by their path for use in `<img>`, `<svg>`, or as as
 
 ## About the Design System
 
-- Provides Flitsmeister design system colors, typography, buttons, icons, and input components.
+- Provides Flitsmeister design system colors, typography, buttons, icons, input, and dropdown components.
 - Design tokens are managed and exported from Figma, with automated scripts generating platform-specific outputs (CSS, iOS JSON, Android XML, etc.).
 - See the `/tokens/schema_exports/` directory for all available exports.
 

package/index.js

@@ -1,3 +1,4 @@
 export { default as fmxInput } from './web/components/fmxInput.vue';
 export { default as fmxButton } from './web/components/fmxButton.vue';
+export { default as fmxDropdown } from './web/components/fmxDropdown.vue';
 

package/package.json

@@ -1,12 +1,13 @@
 {
     "name": "@flitsmeister/design-system",
-    "version": "2.2.30",
+    "version": "2.2.34",
     "description": "Flitsmeister design system and demo site",
     "main": "index.js",
     "exports": {
         ".": "./index.js",
         "./fmxInput": "./web/components/fmxInput.vue",
         "./fmxButton": "./web/components/fmxButton.vue",
+        "./fmxDropdown": "./web/components/fmxDropdown.vue",
         "./main.css": "./dist-lib/main.css",
         "./themes/*": "./tokens/schema_exports/*",
         "./components/*": "./web/components/*",

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/fmxDropdown.vue

@@ -0,0 +1,226 @@
+<template>
+  <div class="fmx-dropdown relative" ref="dropdownRoot">
+    <label
+      v-if="label"
+      class="block px-1 left-2.5 text-content-defaultalt text-lg mb-1"
+    >
+      {{ label }}
+    </label>
+    <button
+      type="button"
+      :disabled="disabled"
+      :aria-expanded="isOpen"
+      aria-haspopup="listbox"
+      class="fmx-dropdown-trigger w-full bg-surface-defaulthighest text-content-default text-lg leading-snug border-2 rounded-2xl px-3 py-3 h-[60px] focus:outline-none focus:border-out hover:border-outline-brand inline-flex items-center justify-between disabled:opacity-50 disabled:cursor-not-allowed"
+      :class="[triggerClass, { 'fmx-dropdown-trigger--just-changed': justChanged }]"
+      @click="toggle"
+    >
+      <span class="truncate text-left flex-1">
+        {{ selectedLabel }}
+      </span>
+      <svg
+        class="fmx-dropdown-chevron h-5 w-5 flex-shrink-0 ml-2 transition-transform"
+        :class="{ 'rotate-180': isOpen }"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 20 20"
+        fill="currentColor"
+        aria-hidden="true"
+      >
+        <path
+          fill-rule="evenodd"
+          d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+          clip-rule="evenodd"
+        />
+      </svg>
+    </button>
+
+    <transition name="fmx-dropdown">
+      <div
+        v-if="isOpen && !fullScreen"
+        class="fmx-dropdown-panel absolute left-0 right-0 mt-2 rounded-2xl shadow-lg bg-surface-defaulthighest border-2 border-surface-neutral-default overflow-hidden z-10"
+        role="listbox"
+      >
+        <div class="py-1 max-h-[250px] overflow-y-auto">
+          <button
+            v-for="opt in options"
+            :key="opt.value"
+            type="button"
+            role="option"
+            :aria-selected="opt.value === modelValue"
+            class="fmx-dropdown-option block w-full text-left px-4 py-3 text-lg text-content-default hover:bg-surface-defaulthigher focus:bg-surface-defaulthigher focus:outline-none"
+            :class="{ 'bg-surface-defaulthigher': opt.value === modelValue }"
+            @click="select(opt)"
+          >
+            <slot name="option" :option="opt" :selected="opt.value === modelValue">
+              {{ opt.label }}
+            </slot>
+          </button>
+        </div>
+      </div>
+    </transition>
+
+    <Teleport to="body">
+      <transition name="fmx-dropdown-modal">
+        <div
+          v-if="isOpen && fullScreen"
+          class="fmx-dropdown-overlay fixed inset-0 z-50 flex items-center justify-center backdrop-blur-sm bg-white/30"
+          @click.self="close"
+        >
+          <div
+            class="fmx-dropdown-modal-panel bg-surface-defaulthighest rounded-2xl shadow-lg border-2 border-surface-neutral-default overflow-hidden w-[min(300px,90vw)] max-h-[80vh] flex flex-col"
+            role="listbox"
+          >
+            <div class="py-1 overflow-y-auto max-h-[250px]">
+              <button
+                v-for="opt in options"
+                :key="opt.value"
+                type="button"
+                role="option"
+                :aria-selected="opt.value === modelValue"
+                class="fmx-dropdown-option block w-full text-left px-4 py-3 text-lg text-content-default hover:bg-surface-defaulthigher focus:bg-surface-defaulthigher focus:outline-none"
+                :class="{ 'bg-surface-defaulthigher': opt.value === modelValue }"
+                @click="select(opt)"
+              >
+                <slot name="option" :option="opt" :selected="opt.value === modelValue">
+                  {{ opt.label }}
+                </slot>
+              </button>
+            </div>
+          </div>
+        </div>
+      </transition>
+    </Teleport>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'fmxDropdown',
+  props: {
+    modelValue: {
+      type: [String, Number],
+      default: null,
+    },
+    options: {
+      type: Array,
+      default: () => [],
+      validator(opts) {
+        return opts.every((o) => o && typeof o.value !== 'undefined' && typeof o.label === 'string')
+      },
+    },
+    label: {
+      type: String,
+      default: '',
+    },
+    placeholder: {
+      type: String,
+      default: '',
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    triggerClass: {
+      type: [String, Array, Object],
+      default: '',
+    },
+    fullScreen: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: ['update:modelValue'],
+  data() {
+    return {
+      isOpen: false,
+      justChanged: false,
+      changeTimeout: null,
+    }
+  },
+  computed: {
+    selectedLabel() {
+      const opt = this.options.find((o) => o.value === this.modelValue)
+      return opt ? opt.label : this.placeholder
+    },
+  },
+  methods: {
+    toggle() {
+      if (this.disabled) return
+      this.isOpen = !this.isOpen
+    },
+    close() {
+      this.isOpen = false
+    },
+    select(opt) {
+      const changed = opt.value !== this.modelValue
+      this.$emit('update:modelValue', opt.value)
+      this.isOpen = false
+      if (!changed) return
+      if (this.changeTimeout) clearTimeout(this.changeTimeout)
+      this.justChanged = true
+      this.changeTimeout = setTimeout(() => {
+        this.justChanged = false
+        this.changeTimeout = null
+      }, 200)
+    },
+    handleClickOutside(e) {
+      if (this.$refs.dropdownRoot && !this.$refs.dropdownRoot.contains(e.target)) {
+        this.isOpen = false
+      }
+    },
+  },
+  mounted() {
+    document.addEventListener('click', this.handleClickOutside)
+  },
+  beforeUnmount() {
+    document.removeEventListener('click', this.handleClickOutside)
+    if (this.changeTimeout) clearTimeout(this.changeTimeout)
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.fmx-dropdown-trigger {
+  border-color: var(--color-surface-neutral-default);
+  transition: background-color 0.2s ease-out, border-color 0.2s ease-out;
+}
+.fmx-dropdown-trigger--just-changed {
+  background-color: var(--color-surface-defaulthigher);
+}
+.fmx-dropdown-panel,
+.fmx-dropdown-modal-panel {
+  border-color: var(--color-surface-neutral-default);
+}
+@media (prefers-reduced-motion: reduce) {
+  .fmx-dropdown-trigger {
+    transition-duration: 0.01ms;
+  }
+}
+</style>
+
+<style lang="scss">
+.fmx-dropdown-enter-active,
+.fmx-dropdown-leave-active {
+  transition: opacity 0.15s ease, transform 0.15s ease;
+}
+.fmx-dropdown-enter-from,
+.fmx-dropdown-leave-to {
+  opacity: 0;
+  transform: translateY(-4px);
+}
+
+.fmx-dropdown-modal-enter-active,
+.fmx-dropdown-modal-leave-active {
+  &,
+  .fmx-dropdown-modal-panel {
+    transition: all 0.2s ease-out;
+  }
+}
+.fmx-dropdown-modal-enter-from,
+.fmx-dropdown-modal-leave-to {
+  opacity: 0;
+  .fmx-dropdown-modal-panel {
+    transform: scale(1.05) translateY(-12px);
+  }
+}
+</style>

package/web/components/fmxInput.vue

@@ -1,49 +1,99 @@
 <template>
   <div
-    class="inputgroup w-full max-w-sm min-w-[200px] mb-6"
+    class="inputgroup w-full mb-6"
     :class="[customClass]"
     :data-inputgroup-type="type"
+    :data-size="size"
   >
     <div class="relative">
       <input
         :type="type"
         :value="modelValue"
         @input="handleInput"
+        @focus="handleFocus"
         @blur="handleBlur"
         :disabled="disabled"
         :readonly="readonly"
-        class="peer w-full bg-surface-defaulthighest text-content-default text-lg leading-snug border-2 rounded-2xl px-3 pt-6 pb-1 transition duration-300 ease focus:outline-none focus:border-out"
-        :class="inputClass"
+        :maxlength="maxLength"
+        :autocomplete="autocomplete"
+        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,
+          placeholder ? sizeConfig.inputWithPlaceholder : sizeConfig.inputWithoutPlaceholder,
+          inputClass,
+        ]"
+        :style="{ letterSpacing: letterSpacing + 'em' }"
       />
       <label
+        v-if="placeholder"
         :class="[
-          'absolute px-1 left-2.5 top-3.5 text-content-defaultalt text-lg transition-all transform origin-left pointer-events-none',
-          labelClass,
+          'absolute px-1 left-2.5 text-content-defaultalt transition-all transform origin-left pointer-events-none',
+          sizeConfig.label,
+          sizeConfig.labelText,
+          sizeConfig.labelFocused,
+          labelFilledClass,
         ]"
       >
         {{ placeholder }}
       </label>
       <transition name="icon-scale">
         <span
-          class="iconwrapper absolute right-3 top-2.5"
-          :class="iconClass"
+          v-if="icon"
+          class="iconwrapper absolute"
+          :class="[sizeConfig.icon, iconClass]"
         >
           <Icon :name="icon" />
         </span>
       </transition>
     </div>
     <p
-      v-if="errorMessage"
+      v-if="errorMessage && !isFocused"
       class="text-content-danger text-sm font-bold mt-1"
-    >
-      {{ errorMessage }}
-    </p>
+      v-html="errorMessage"
+    />
   </div>
 </template>
 
 <script>
   import Icon from "./Icon.vue";
 
+  const SIZE_CONFIG = {
+    sm: {
+      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",
+      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",
+      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",
+      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",
+      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",
+      labelFilled: "top-[8px] left-2.5 text-sm font-bold",
+      icon: "right-3 top-5 text-2xl leading-none",
+    },
+  };
+
   export default {
     name: "fmxInput",
     components: {
@@ -60,7 +110,7 @@
       },
       placeholder: {
         type: String,
-        default: "Type Here...",
+        default: "",
       },
       modelValue: {
         type: [String, Number],
@@ -78,68 +128,179 @@
         type: Boolean,
         default: false,
       },
+      maxLength: {
+        type: Number,
+        default: null,
+      },
+      letterSpacing: {
+        type: Number,
+        default: 0,
+      },
+      autocomplete: {
+        type: String,
+        default: "",
+      },
       customClass: {
         type: String,
         default: "",
       },
+      inputClass: {
+        type: [String, Array, Object],
+        default: "",
+      },
+      size: {
+        type: String,
+        default: "md",
+        validator: (value) => ["sm", "md", "lg"].includes(value),
+      },
     },
+    emits: ["update:modelValue", "focus", "blur"],
     data() {
       return {
         errorMessage: "",
         icon: "",
         iconClass: "text-current",
+        isFocused: false,
       };
     },
+    watch: {
+      modelValue: {
+        immediate: true,
+        handler(newValue) {
+          if (!this.isFocused && newValue?.length > 0) {
+            this.runValidation(newValue);
+          }
+        },
+      },
+    },
     computed: {
-      inputClass() {
-        return {
-          "border-outline-danger": this.errorMessage,
-          "border-transparent focus:border-outline-brand hover:border-outline-brand":
-            !this.errorMessage,
-        };
+      sizeConfig() {
+        return SIZE_CONFIG[this.size] || SIZE_CONFIG.md;
       },
-      labelClass() {
+      inputStateClass() {
         return {
-          "peer-focus:top-[6px] peer-focus:left-2.5 peer-focus:text-sm peer-focus:font-bold": true,
-          "top-[6px] left-2.5 text-sm font-bold":
-            this.modelValue && this.modelValue.length > 0,
+          "border-outline-danger": this.errorMessage && !this.isFocused,
         };
       },
+      labelFilledClass() {
+        return this.modelValue && this.modelValue.length > 0
+          ? this.sizeConfig.labelFilled
+          : "";
+      },
     },
     methods: {
       handleInput(event) {
-        this.$emit("update:modelValue", event.target.value);
+        const value = event.target.value;
+        this.$emit("update:modelValue", value);
+      },
+      handleFocus(event) {
+        this.isFocused = true;
+        this.iconClass = "";
+        this.icon = "";
+        this.$emit("focus", event);
       },
-      handleBlur() {
+      handleBlur(event) {
+        this.isFocused = false;
         this.runValidation(this.modelValue);
+        this.$emit("blur", event);
       },
       runValidation(value) {
-        for (let rule of this.rules) {
+        for (const rule of this.rules) {
           const error = rule(value);
           if (error) {
             this.errorMessage = error;
             this.iconClass = "text-content-danger";
             this.icon = "stroke-warning";
             return;
-          } else {
-            this.errorMessage = "";
-            this.iconClass = "text-content-brand";
-            this.icon = "bold-check";
           }
+          this.errorMessage = "";
+          this.iconClass = "text-content-brand";
+          this.icon = "bold-check";
         }
       },
+      validate() {
+        this.runValidation(this.modelValue);
+      },
     },
   };
 </script>
 
 <style scoped>
+  .inputgroup {
+    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);
   }
-  .icon-scale-enter-from, .icon-scale-leave-to /* .icon-scale-leave-active in <2.1.8 */ {
-    transform: scale(0);
+
+  .icon-scale-enter-from,
+  .icon-scale-leave-to {
+    transform: scale(0) translateX(100%);
   }
+
   .icon-scale-enter-to,
   .icon-scale-leave-from {
     transform: scale(1);
@@ -147,11 +308,12 @@
 
   span.iconwrapper {
     display: block;
-    height: 2.25rem;
-    width: 2.25rem;
-    svg {
-      width: 100%;
-      height: 100%;
-    }
+    height: 1.5rem;
+    width: 1.5rem;
+  }
+
+  span.iconwrapper svg {
+    width: 100%;
+    height: 100%;
   }
 </style>