snice 4.15.0 → 4.16.0

package/dist/transitions.esm.js

@@ -1,5 +1,5 @@
 /*!
- * snice v4.14.0
+ * snice v4.15.0
  * Imperative TypeScript framework for building vanilla web components with decorators, differential rendering, routing, and controllers. No virtual DOM, no build complexity.
  * (c) 2024
  * Released under the MIT License.

package/docs/ai/components/input.md

@@ -30,6 +30,8 @@ maxlength: number = -1;
 pattern: string = '';
 autocomplete: string = '';
 name: string = '';
+align: 'top'|'center'|'bottom'|'' = '';  // vertical alignment when host has explicit height
+stretch: boolean = false;                 // input fills full host height
 ```
 
 ## Slots
@@ -119,6 +121,14 @@ inp.addEventListener('input-change', (e) => console.log('Change:', e.detail.valu
   <span slot="prefix-icon" class="material-symbols-outlined">search</span>
   <span slot="suffix-icon" class="material-symbols-outlined">person</span>
 </snice-input>
+
+<!-- Vertical alignment (when host has explicit height) -->
+<snice-input style="height:200px" align="top"></snice-input>
+<snice-input style="height:200px" align="center"></snice-input>
+<snice-input style="height:200px" align="bottom"></snice-input>
+
+<!-- Stretch input to fill height -->
+<snice-input style="height:200px" stretch></snice-input>
 ```
 
 ## Features

package/docs/components/input.md

@@ -156,6 +156,24 @@ Use `name` and `required` for native form participation.
 </form>
 ```
 
+### Vertical Alignment
+
+When the input has an explicit height, use `align` to control vertical positioning of the inner input field.
+
+```html
+<snice-input style="height: 200px" align="top" label="Top"></snice-input>
+<snice-input style="height: 200px" align="center" label="Center"></snice-input>
+<snice-input style="height: 200px" align="bottom" label="Bottom"></snice-input>
+```
+
+### Stretch
+
+Use the `stretch` attribute to make the inner input fill the full height of the host.
+
+```html
+<snice-input style="height: 200px" stretch label="Stretched"></snice-input>
+```
+
 ### Event Handling
 
 Listen for input events using `input-input` and `input-change`.
@@ -205,6 +223,8 @@ inp.addEventListener('input-change', (e) => console.log('Change:', e.detail.valu
 | `name` | `name` | `string` | `''` | Form field name |
 | `prefixIcon` | `prefix-icon` | `string` | `''` | Prefix icon (emoji, URL, or ligature) |
 | `suffixIcon` | `suffix-icon` | `string` | `''` | Suffix icon (emoji, URL, or ligature) |
+| `align` | `align` | `'top' \| 'center' \| 'bottom' \| ''` | `''` | Vertical alignment when host has explicit height (default centers) |
+| `stretch` | `stretch` | `boolean` | `false` | Input fills the full host height |
 
 ## Events
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "snice",
-  "version": "4.15.0",
+  "version": "4.16.0",
   "type": "module",
   "description": "Imperative TypeScript framework for building vanilla web components with decorators, differential rendering, routing, and controllers. No virtual DOM, no build complexity.",
   "main": "dist/index.cjs",