kigumi 0.9.2 → 0.10.0

package/dist/index.js

@@ -2485,6 +2485,55 @@ var LOCAL_REGISTRY = {
         type: "string",
         description: "Link relationship (when href is set)",
         required: false
+      },
+      {
+        name: "type",
+        type: "string",
+        values: ["button", "submit", "reset"],
+        default: "button",
+        description: "The button's type for form submission"
+      },
+      {
+        name: "name",
+        type: "string",
+        description: "The name of the button for form submission",
+        required: false
+      },
+      {
+        name: "value",
+        type: "string",
+        description: "The value of the button for form submission",
+        required: false
+      },
+      {
+        name: "formaction",
+        type: "string",
+        description: "Override the form's action attribute",
+        required: false
+      },
+      {
+        name: "formenctype",
+        type: "string",
+        description: "Override the form's enctype attribute",
+        required: false
+      },
+      {
+        name: "formmethod",
+        type: "string",
+        description: "Override the form's method attribute",
+        required: false
+      },
+      {
+        name: "formnovalidate",
+        type: "boolean",
+        default: "false",
+        description: "Bypass form validation when this button submits"
+      },
+      {
+        name: "formtarget",
+        type: "string",
+        description: "Override the form's target attribute",
+        required: false
       }
     ],
     importPath: `${WEB_AWESOME_FREE_PACKAGE}/dist/components/button/button.js`,
@@ -2609,6 +2658,121 @@ var LOCAL_REGISTRY = {
         default: "false",
         description: "Adds a toggle button for password visibility",
         required: false
+      },
+      {
+        name: "password-visible",
+        type: "boolean",
+        default: "false",
+        description: "Shows the password as plain text when set"
+      },
+      {
+        name: "readonly",
+        type: "boolean",
+        default: "false",
+        description: "Makes the input readonly"
+      },
+      {
+        name: "required",
+        type: "boolean",
+        default: "false",
+        description: "Makes the input required"
+      },
+      {
+        name: "name",
+        type: "string",
+        description: "The name of the input for form submission",
+        required: false
+      },
+      {
+        name: "pattern",
+        type: "string",
+        description: "A regular expression pattern the value must match",
+        required: false
+      },
+      {
+        name: "minlength",
+        type: "number",
+        description: "Minimum string length",
+        required: false
+      },
+      {
+        name: "maxlength",
+        type: "number",
+        description: "Maximum string length",
+        required: false
+      },
+      {
+        name: "min",
+        type: "string",
+        description: "Minimum value for numeric and date types",
+        required: false
+      },
+      {
+        name: "max",
+        type: "string",
+        description: "Maximum value for numeric and date types",
+        required: false
+      },
+      {
+        name: "step",
+        type: "string",
+        description: "Step increment for numeric types",
+        required: false
+      },
+      {
+        name: "without-spin-buttons",
+        type: "boolean",
+        default: "false",
+        description: "Hides the browser's built-in spin buttons"
+      },
+      {
+        name: "autocomplete",
+        type: "string",
+        description: "Hint for autocomplete behavior",
+        required: false
+      },
+      {
+        name: "autocapitalize",
+        type: "string",
+        values: ["off", "none", "on", "sentences", "words", "characters"],
+        description: "Controls automatic capitalization",
+        required: false
+      },
+      {
+        name: "autocorrect",
+        type: "string",
+        values: ["off", "on"],
+        description: "Hint for autocorrect behavior",
+        required: false
+      },
+      {
+        name: "autofocus",
+        type: "boolean",
+        default: "false",
+        description: "Automatically focuses the input on page load"
+      },
+      {
+        name: "inputmode",
+        type: "string",
+        values: [
+          "none",
+          "text",
+          "decimal",
+          "numeric",
+          "tel",
+          "search",
+          "email",
+          "url"
+        ],
+        description: "Hint for virtual keyboard type",
+        required: false
+      },
+      {
+        name: "enterkeyhint",
+        type: "string",
+        values: ["enter", "done", "go", "next", "previous", "search", "send"],
+        description: "Hint for Enter key label on virtual keyboards",
+        required: false
       }
     ],
     importPath: `${WEB_AWESOME_FREE_PACKAGE}/dist/components/input/input.js`,
@@ -3012,6 +3176,25 @@ var LOCAL_REGISTRY = {
         type: "boolean",
         default: "false",
         description: "Swaps the opacity of duotone icons"
+      },
+      {
+        name: "rotate",
+        type: "number",
+        description: "Rotate the icon by this many degrees",
+        required: false
+      },
+      {
+        name: "flip",
+        type: "string",
+        values: ["horizontal", "vertical", "both"],
+        description: "Flip the icon horizontally, vertically, or both",
+        required: false
+      },
+      {
+        name: "animation",
+        type: "string",
+        description: "The name of a built-in animation to apply",
+        required: false
       }
     ],
     importPath: `${WEB_AWESOME_FREE_PACKAGE}/dist/components/icon/icon.js`,
@@ -3248,6 +3431,12 @@ var LOCAL_REGISTRY = {
         type: "boolean",
         default: "false",
         description: "Hides the format toggle button"
+      },
+      {
+        name: "inline",
+        type: "boolean",
+        default: "false",
+        description: "Renders the color picker inline instead of in a dropdown"
       }
     ],
     importPath: `${WEB_AWESOME_FREE_PACKAGE}/dist/components/color-picker/color-picker.js`,
@@ -3362,6 +3551,12 @@ var LOCAL_REGISTRY = {
         type: "boolean",
         default: "false",
         description: "Shows clear button"
+      },
+      {
+        name: "value",
+        type: "string",
+        default: "''",
+        description: "Current value of the combobox"
       }
     ],
     importPath: `${WEB_AWESOME_FREE_PACKAGE}/dist/components/combobox/combobox.js`,
@@ -3678,6 +3873,13 @@ var LOCAL_REGISTRY = {
         type: "boolean",
         default: "false",
         description: "Hoists the dropdown panel to the body"
+      },
+      {
+        name: "size",
+        type: "string",
+        values: ["small", "medium", "large"],
+        default: "medium",
+        description: "Dropdown size"
       }
     ],
     importPath: `${WEB_AWESOME_FREE_PACKAGE}/dist/components/dropdown/dropdown.js`,
@@ -3723,6 +3925,13 @@ var LOCAL_REGISTRY = {
         type: "boolean",
         default: "false",
         description: "Draws the item in a loading state"
+      },
+      {
+        name: "variant",
+        type: "string",
+        values: ["neutral", "danger"],
+        default: "neutral",
+        description: "The dropdown item variant"
       }
     ],
     importPath: `${WEB_AWESOME_FREE_PACKAGE}/dist/components/dropdown-item/dropdown-item.js`,
@@ -4001,6 +4210,11 @@ var LOCAL_REGISTRY = {
         type: "string",
         default: "0px",
         description: "Root element margin"
+      },
+      {
+        name: "intersect-class",
+        type: "string",
+        description: "CSS class to apply when intersecting"
       }
     ],
     importPath: `${WEB_AWESOME_FREE_PACKAGE}/dist/components/intersection-observer/intersection-observer.js`,
@@ -4149,6 +4363,17 @@ var LOCAL_REGISTRY = {
         type: "boolean",
         default: "false",
         description: "Shows an arrow"
+      },
+      {
+        name: "without-arrow",
+        type: "boolean",
+        default: "false",
+        description: "Hides the arrow"
+      },
+      {
+        name: "for",
+        type: "string",
+        description: "The ID of the element the popover is anchored to"
       }
     ],
     importPath: `${WEB_AWESOME_FREE_PACKAGE}/dist/components/popover/popover.js`,
@@ -4452,6 +4677,31 @@ var LOCAL_REGISTRY = {
         type: "boolean",
         default: "false",
         description: "Makes selection required"
+      },
+      {
+        name: "orientation",
+        type: "string",
+        values: ["horizontal", "vertical"],
+        default: "vertical",
+        description: "Layout direction"
+      },
+      {
+        name: "disabled",
+        type: "boolean",
+        default: "false",
+        description: "Disables the group"
+      },
+      {
+        name: "invalid",
+        type: "boolean",
+        default: "false",
+        description: "Shows invalid/error state"
+      },
+      {
+        name: "help-text",
+        type: "string",
+        default: "''",
+        description: "Help text below the group"
       }
     ],
     importPath: `${WEB_AWESOME_FREE_PACKAGE}/dist/components/radio-group/radio-group.js`,
@@ -4484,6 +4734,13 @@ var LOCAL_REGISTRY = {
         values: ["small", "medium", "large"],
         default: "medium",
         description: "Radio size"
+      },
+      {
+        name: "appearance",
+        type: "string",
+        values: ["default", "button"],
+        default: "default",
+        description: "Radio appearance style"
       }
     ],
     importPath: `${WEB_AWESOME_FREE_PACKAGE}/dist/components/radio/radio.js`,
@@ -4534,6 +4791,13 @@ var LOCAL_REGISTRY = {
         type: "boolean",
         default: "false",
         description: "Disables the rating"
+      },
+      {
+        name: "size",
+        type: "string",
+        values: ["small", "medium", "large"],
+        default: "medium",
+        description: "Rating size"
       }
     ],
     importPath: `${WEB_AWESOME_FREE_PACKAGE}/dist/components/rating/rating.js`,
@@ -4605,6 +4869,18 @@ var LOCAL_REGISTRY = {
         type: "boolean",
         default: "false",
         description: "Shows shadow indicators"
+      },
+      {
+        name: "without-scrollbar",
+        type: "boolean",
+        default: "false",
+        description: "Hides the scrollbar"
+      },
+      {
+        name: "without-shadow",
+        type: "boolean",
+        default: "false",
+        description: "Hides shadow indicators"
       }
     ],
     importPath: `${WEB_AWESOME_FREE_PACKAGE}/dist/components/scroller/scroller.js`,
@@ -4717,6 +4993,18 @@ var LOCAL_REGISTRY = {
         type: "boolean",
         default: "false",
         description: "Makes selection required"
+      },
+      {
+        name: "invalid",
+        type: "boolean",
+        default: "false",
+        description: "Shows invalid/error state"
+      },
+      {
+        name: "help-text",
+        type: "string",
+        default: "''",
+        description: "Help text below the control"
       }
     ],
     importPath: `${WEB_AWESOME_FREE_PACKAGE}/dist/components/select/select.js`,
@@ -4743,6 +5031,18 @@ var LOCAL_REGISTRY = {
         type: "boolean",
         default: "false",
         description: "Disables the option"
+      },
+      {
+        name: "selected",
+        type: "boolean",
+        default: "false",
+        description: "Draws the option in a selected state"
+      },
+      {
+        name: "label",
+        type: "string",
+        description: "A custom label for the option (used by select's display input)",
+        required: false
       }
     ],
     importPath: `${WEB_AWESOME_FREE_PACKAGE}/dist/components/option/option.js`,
@@ -4822,17 +5122,60 @@ var LOCAL_REGISTRY = {
         description: "Step increment"
       },
       {
-        name: "tooltip",
+        name: "orientation",
         type: "string",
-        values: ["top", "bottom", "none"],
-        default: "top",
-        description: "Tooltip position"
+        values: ["horizontal", "vertical"],
+        default: "horizontal",
+        description: "The orientation of the slider"
       },
       {
         name: "disabled",
         type: "boolean",
         default: "false",
         description: "Disables the slider"
+      },
+      {
+        name: "readonly",
+        type: "boolean",
+        default: "false",
+        description: "Makes the slider readonly"
+      },
+      {
+        name: "required",
+        type: "boolean",
+        default: "false",
+        description: "Makes the slider required"
+      },
+      {
+        name: "range",
+        type: "boolean",
+        default: "false",
+        description: "Converts to a range slider with two thumbs"
+      },
+      {
+        name: "with-markers",
+        type: "boolean",
+        default: "false",
+        description: "Draws markers at each step"
+      },
+      {
+        name: "with-tooltip",
+        type: "boolean",
+        default: "true",
+        description: "Draws a tooltip above the thumb"
+      },
+      {
+        name: "size",
+        type: "string",
+        values: ["small", "medium", "large"],
+        default: "medium",
+        description: "Slider size"
+      },
+      {
+        name: "autofocus",
+        type: "boolean",
+        default: "false",
+        description: "Automatically focuses the slider on page load"
       }
     ],
     importPath: `${WEB_AWESOME_FREE_PACKAGE}/dist/components/slider/slider.js`,
@@ -4991,6 +5334,11 @@ var LOCAL_REGISTRY = {
         type: "boolean",
         default: "false",
         description: "Disables scroll buttons"
+      },
+      {
+        name: "active",
+        type: "string",
+        description: "The name of the active tab"
       }
     ],
     importPath: `${WEB_AWESOME_FREE_PACKAGE}/dist/components/tab-group/tab-group.js`,
@@ -5208,19 +5556,6 @@ var LOCAL_REGISTRY = {
       react: ["components/Tooltip.tsx", "types/tooltip.d.ts"]
     },
     props: [
-      {
-        name: "for",
-        type: "string",
-        default: "''",
-        description: "The id of the element the tooltip will target",
-        required: false
-      },
-      {
-        name: "content",
-        type: "string",
-        default: "''",
-        description: "Tooltip content"
-      },
       {
         name: "placement",
         type: "string",
@@ -5288,6 +5623,11 @@ var LOCAL_REGISTRY = {
         type: "number",
         default: "0",
         description: "Hide delay (ms)"
+      },
+      {
+        name: "for",
+        type: "string",
+        description: "The ID of the element the tooltip is anchored to"
       }
     ],
     importPath: `${WEB_AWESOME_FREE_PACKAGE}/dist/components/tooltip/tooltip.js`,
@@ -5511,25 +5851,6 @@ var LOCAL_REGISTRY = {
         values: ["small", "medium", "large"],
         default: "medium",
         description: "Input size"
-      },
-      {
-        name: "appearance",
-        type: "string",
-        values: ["filled", "outlined", "filled-outlined"],
-        default: "outlined",
-        description: "Visual appearance"
-      },
-      {
-        name: "max-file-size",
-        type: "number",
-        description: "Maximum file size in bytes",
-        required: false
-      },
-      {
-        name: "max-files",
-        type: "number",
-        description: "Maximum number of files",
-        required: false
       }
     ],
     importPath: `${WEB_AWESOME_FREE_PACKAGE}/dist/components/file-input/file-input.js`,
@@ -5615,10 +5936,10 @@ var LOCAL_REGISTRY = {
         description: "Visual appearance"
       },
       {
-        name: "no-spin-buttons",
+        name: "without-steppers",
         type: "boolean",
         default: "false",
-        description: "Hides the spin buttons"
+        description: "Hides the stepper buttons"
       }
     ],
     importPath: `${WEB_AWESOME_FREE_PACKAGE}/dist/components/number-input/number-input.js`,
@@ -5638,51 +5959,35 @@ var LOCAL_REGISTRY = {
       {
         name: "data",
         type: "string",
-        description: "Comma-separated data points or JSON array",
+        description: "Space-separated numeric data points",
         required: false
       },
       {
-        name: "type",
+        name: "label",
         type: "string",
-        values: ["line", "bar", "area"],
-        default: "line",
-        description: "Chart type"
-      },
-      {
-        name: "width",
-        type: "number",
-        description: "Width in pixels",
-        required: false
-      },
-      {
-        name: "height",
-        type: "number",
-        description: "Height in pixels",
+        description: "An accessible label for assistive devices",
         required: false
       },
       {
-        name: "color",
+        name: "appearance",
         type: "string",
-        description: "Line/bar color",
-        required: false
+        values: ["gradient", "line", "solid"],
+        default: "line",
+        description: "Visual style of the sparkline"
       },
       {
-        name: "fill-color",
+        name: "trend",
         type: "string",
-        description: "Fill color (for area type)",
+        values: ["positive", "negative", "neutral"],
+        description: "Trend direction, used for coloring",
         required: false
       },
       {
-        name: "line-width",
-        type: "number",
-        default: "2",
-        description: "Line width in pixels"
-      },
-      {
-        name: "show-tooltip",
-        type: "boolean",
-        default: "false",
-        description: "Shows value tooltip on hover"
+        name: "curve",
+        type: "string",
+        values: ["linear", "natural", "step"],
+        default: "natural",
+        description: "Interpolation curve style"
       }
     ],
     importPath: `${WEB_AWESOME_FREE_PACKAGE}/dist/components/sparkline/sparkline.js`,

package/dist/templates/AGENTS.md

@@ -6,13 +6,20 @@
 
 ```
 templates/
-└── react/
+├── react/
+│   └── {Component}/
+│       ├── {Component}.tsx.hbs    # TypeScript (with interfaces)
+│       ├── {Component}.jsx.hbs    # JavaScript (with JSDoc)
+│       ├── {Component}.test.tsx.hbs
+│       ├── {Component}.test.jsx.hbs
+│       └── {Component}.css.hbs
+└── vue/
     └── {Component}/
-        ├── {Component}.tsx.hbs    # TypeScript (with interfaces)
-        ├── {Component}.jsx.hbs    # JavaScript (with JSDoc)
-        ├── {Component}.test.tsx.hbs
-        ├── {Component}.test.jsx.hbs
-        └── {Component}.css.hbs
+        ├── {Component}.vue.hbs      # TypeScript (Options API + defineExpose)
+        ├── {Component}.js.vue.hbs   # JavaScript (no types)
+        ├── {Component}.test.ts.hbs
+        ├── {Component}.test.js.hbs
+        └── {Component}.css.hbs      # Identical content to react CSS template
 ```
 
 ## Template Variables
@@ -196,13 +203,23 @@ export interface DialogProps extends Omit<HTMLAttributes<HTMLElement>, 'onLoad'
 
 1. **Check Web Awesome docs** at `https://webawesome.com/docs/components/{name}`
 2. **Update registry** in `src/utils/registry.ts`
-3. **Create template folder** in `templates/react/{Name}/`
-4. **Create all files:**
+3. **Create template folders** in `templates/react/{Name}/` and `templates/vue/{Name}/`
+4. **Create all files — both frameworks:**
+
+   React (`templates/react/{Name}/`):
    - `{Name}.tsx.hbs` (TypeScript)
    - `{Name}.jsx.hbs` (JavaScript)
    - `{Name}.test.tsx.hbs`
    - `{Name}.test.jsx.hbs`
    - `{Name}.css.hbs`
+
+   Vue (`templates/vue/{Name}/`):
+   - `{Name}.vue.hbs` (TypeScript)
+   - `{Name}.js.vue.hbs` (JavaScript)
+   - `{Name}.test.ts.hbs`
+   - `{Name}.test.js.hbs`
+   - `{Name}.css.hbs` (same content as React CSS template)
+
 5. **Build and test:**
    ```bash
    pnpm build
@@ -213,12 +230,12 @@ export interface DialogProps extends Omit<HTMLAttributes<HTMLElement>, 'onLoad'
 
 ## Reference Templates
 
-| Pattern                   | Example                          |
-| ------------------------- | -------------------------------- |
-| Simple                    | `Button/Button.tsx.hbs`          |
-| Complex (events)          | `Dialog/Dialog.tsx.hbs`          |
-| Complex (two-way binding) | `Input/Input.tsx.hbs`            |
-| Sub-components            | `Breadcrumb/`, `BreadcrumbItem/` |
+| Pattern                   | React                            | Vue                              |
+| ------------------------- | -------------------------------- | -------------------------------- |
+| Simple                    | `Button/Button.tsx.hbs`          | `Button/Button.vue.hbs`          |
+| Complex (events)          | `Dialog/Dialog.tsx.hbs`          | `Dialog/Dialog.vue.hbs`          |
+| Complex (two-way binding) | `Input/Input.tsx.hbs`            | `Input/Input.vue.hbs`            |
+| Sub-components            | `Breadcrumb/`, `BreadcrumbItem/` | `Breadcrumb/`, `BreadcrumbItem/` |
 
 ---
 

package/dist/templates/react/AnimatedImage/AnimatedImage.css.hbs

@@ -3,8 +3,11 @@
  * Documentation: https://webawesome.com/docs/components/animated-image
  *
  * CSS Custom Properties:
- * (No custom properties defined for this component)
+ * --control-box-size: Size of the icon box that holds the play/pause controls
+ * --icon-size: Size of the play/pause icons inside the control box
  *
+ * CSS Parts:
+ * control-box — Container surrounding the pause/play icons and their background
  */
 .AnimatedImage {
   /* Add your custom styles here */