@wirecore/wirelayer-vue 0.6.0 → 0.8.0

package/llms.txt

@@ -169,8 +169,8 @@ Full API (props, events, slots, examples) in llms-full.txt next to this file. MC
 - [MonthPicker](https://wirecore.github.io/WireLayer/?path=/story/vue_forms-monthpicker--playground): Month field ("10.2026"): type the digits in one go, or pick from the month grid; range: start – end (`@wirecore/wirelayer-vue`)
 - [MultiSelect](https://wirecore.github.io/WireLayer/?path=/story/vue_forms-multiselect--playground): Select with several values: the list stays open while choosing, Space/Enter toggle an option (`@wirecore/wirelayer-vue`)
 - [NativeSelect](https://wirecore.github.io/WireLayer/?path=/story/vue_forms-nativeselect--playground): The browser's select: its own keyboard and mobile pickers; inside a Field it is labelled and described (`@wirecore/wirelayer-vue`)
-- [NumberInput](https://wirecore.github.io/WireLayer/?path=/story/vue_forms-numberinput--playground): Number field with − / + buttons, arrow keys and locale formatting ("1,234.5") (`@wirecore/wirelayer-vue`)
-- [PasswordInput](https://wirecore.github.io/WireLayer/?path=/story/vue_forms-passwordinput--playground): Password field with a button that shows/hides the password (named "Show/Hide password") (`@wirecore/wirelayer-vue`)
+- [NumberInput](https://wirecore.github.io/WireLayer/?path=/story/vue_forms-numberinput--playground): Number field with − / + buttons, arrow keys and locale formatting ("1,234.5"); `ref` reaches the native input (`@wirecore/wirelayer-vue`)
+- [PasswordInput](https://wirecore.github.io/WireLayer/?path=/story/vue_forms-passwordinput--playground): Password field with a button that shows/hides the password (named "Show/Hide password"); `ref` reaches the native input (`@wirecore/wirelayer-vue`)
 - [PhoneInput](https://wirecore.github.io/WireLayer/?path=/story/vue_forms-phoneinput--playground): Country (flag and calling code, searchable) and the number, formatted for the country; the value is E.164 (`@wirecore/wirelayer-vue`)
 - [PinInput](https://wirecore.github.io/WireLayer/?path=/story/vue_forms-pininput--playground): Code input (OTP, PIN): one box per character, typing moves on, pasting fills all boxes (`@wirecore/wirelayer-vue`)
 - [QuarterPicker](https://wirecore.github.io/WireLayer/?path=/story/vue_forms-quarterpicker--playground): Quarter field: type "Q4 2026" (also "2026-Q4", "4/2026") or pick from the four quarters of a year; with range a start and an end quarter. Arrow keys move between the quarters and on into the next or previous year. (`@wirecore/wirelayer-vue`)
@@ -182,10 +182,10 @@ Full API (props, events, slots, examples) in llms-full.txt next to this file. MC
 - [Select](https://wirecore.github.io/WireLayer/?path=/story/vue_forms-select--playground): Dropdown list for one option: arrow keys, typeahead, Escape; native select hidden for forms (`@wirecore/wirelayer-vue`)
 - [SignaturePad](https://wirecore.github.io/WireLayer/?path=/story/vue_forms-signaturepad--playground): Signature field (role="application"): draw with mouse, pen or finger; "Undo" removes the last stroke. With typedAlternative the name can be typed instead – the field shows it in a handwriting font. (`@wirecore/wirelayer-vue`)
 - [Slider](https://wirecore.github.io/WireLayer/?path=/story/vue_forms-slider--playground): Range: "Price, Minimum" / "Price, Maximum" (`@wirecore/wirelayer-vue`)
-- [Switch](https://wirecore.github.io/WireLayer/?path=/story/vue_forms-switch--playground): Ark renders a plain checkbox; role="switch" makes screen readers announce it as a switch (`@wirecore/wirelayer-vue`)
+- [Switch](https://wirecore.github.io/WireLayer/?path=/story/vue_forms-switch--playground): Without a text the label is left out: Ark names the input by it, an empty one would hide a <label for> (`@wirecore/wirelayer-vue`)
 - [SwitchGroup](https://wirecore.github.io/WireLayer/?path=/story/vue_forms-switchgroup--playground): role="group" named by its label, described by helper and error text; Switches with a value inside (`@wirecore/wirelayer-vue`)
 - [TagsInput](https://wirecore.github.io/WireLayer/?path=/story/vue_forms-tagsinput--playground): Free entries: Enter or "," adds, Backspace on the empty field selects the last entry (again removes it), arrow keys move between entries; additions and removals are announced. With suggestions the field is a combobox: Arrow down opens them, Enter adds the highlighted one. (`@wirecore/wirelayer-vue`)
-- [Textarea](https://wirecore.github.io/WireLayer/?path=/story/vue_forms-textarea--auto-resize): Multi-line text field, optionally growing with the text (autoResize) and with a counter; works inside Field (`@wirecore/wirelayer-vue`)
+- [Textarea](https://wirecore.github.io/WireLayer/?path=/story/vue_forms-textarea--auto-resize): Multi-line text field, optionally growing with the text (autoResize) and with a counter; works inside Field. `ref` reaches the native textarea (`@wirecore/wirelayer-vue`)
 - [TimeGrid](https://wirecore.github.io/WireLayer/?path=/story/vue_forms-timegrid--playground): Free time slots for a booking: radio buttons for one time (arrow keys move and choose), toggle buttons for a range (start, then end). Taken slots stay visible but cannot be chosen. (`@wirecore/wirelayer-vue`)
 - [TimePicker](https://wirecore.github.io/WireLayer/?path=/story/vue_forms-timepicker--playground): Time field: type the digits one after another ("1430"), arrow keys change hour or minute – or pick from the list of times (every `step` minutes). Gives "HH:mm". (`@wirecore/wirelayer-vue`)
 - [TimeRangePicker](https://wirecore.github.io/WireLayer/?path=/story/vue_forms-timerangepicker--playground): Start and end time in one field ("09:00 – 17:30"): typing runs on from start to end (`@wirecore/wirelayer-vue`)
@@ -274,7 +274,7 @@ Full API (props, events, slots, examples) in llms-full.txt next to this file. MC
 ## Other
 
 - FilterChips: The active filters as a list of chips with remove buttons ("Remove filter Location: Frankfurt") (`@wirecore/wirelayer-vue`)
-- Input: Text field with sizes, leading icon, prefix and suffix; works inside Field (`@wirecore/wirelayer-vue`)
+- Input: Text field with sizes, leading icon, prefix and suffix; works inside Field. `ref` reaches the native input (focus, select, setSelectionRange) (`@wirecore/wirelayer-vue`)
 - KeyValueEditor: Key-value pairs (FormList preset): two inputs per row, duplicate keys marked (`@wirecore/wirelayer-vue/form`)
 - LocaleProvider: Renders nothing itself; Ark's provider passes locale and direction (keyboard order) on to Ark (`@wirecore/wirelayer-vue`)
 
@@ -308,4 +308,8 @@ Full API (props, events, slots, examples) in llms-full.txt next to this file. MC
 - React Native (Expo)
 - HTML and server templates
 - License
+- Components and APIs side by side
+- Pitfalls
+- Desktop apps (dense UI, many dialogs)
 - Custom theme
+- Component sizes and shapes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wirecore/wirelayer-vue",
-  "version": "0.6.0",
+  "version": "0.8.0",
   "description": "WireLayer components for Vue 3",
   "license": "MIT",
   "repository": {
@@ -55,12 +55,16 @@
     },
     "./styles.css": "./styles.css",
     "./styles-core.css": "./styles-core.css",
+    "./theme.css": "./theme.css",
+    "./fonts.css": "./fonts.css",
     "./sources/*": "./dist/sources/*"
   },
   "files": [
     "dist",
     "styles.css",
     "styles-core.css",
+    "theme.css",
+    "fonts.css",
     "llms.txt",
     "llms-full.txt"
   ],
@@ -162,8 +166,8 @@
     "@ark-ui/vue": "^5.39.3",
     "@internationalized/date": "^3.12.4",
     "@lucide/vue": "^1.59.0",
-    "@wirecore/wirelayer-recipes": "^0.5.0",
-    "@wirecore/wirelayer-tokens": "^0.3.0"
+    "@wirecore/wirelayer-recipes": "^0.7.0",
+    "@wirecore/wirelayer-tokens": "^0.4.0"
   },
   "devDependencies": {
     "@storybook/addon-a11y": "^10.6.2",

package/theme.css

@@ -0,0 +1,14 @@
+/*
+ * WireLayer theme without fonts and without the classes of the components – for an app with its own font
+ * (@theme { --font-sans: … }) and the classes of the components it uses: by hand, or with the Vite plugin
+ * (@wirecore/wirelayer-recipes/vite) that adds them to this file:
+ *   @import 'tailwindcss';
+ *   @import '@wirecore/wirelayer-vue/theme.css';
+ *   @import '@wirecore/wirelayer-vue/fonts.css';   (the WireLayer fonts, if you want them)
+ */
+@import '@wirecore/wirelayer-tokens/theme.css';
+
+/* Lets the components warn in development when the classes of a recipe they render were not imported */
+:root {
+    --wc-recipe-sources: 1;
+}