@santi020k/lumen-astro 1.0.0 → 1.1.0

package/README.md

@@ -51,6 +51,15 @@ import { Button, Card, Input } from '@santi020k/lumen-astro'
 </Card>
 ```
 
+`Input` and `NativeSelect` preserve the native numeric `size` attribute. Use `visualSize="sm"` or
+`visualSize="lg"` for presentation. The pre-1.0 `size="sm|lg"` visual alias remains available for
+incremental migrations, but new code should keep native behavior and visual styling separate.
+
+```astro
+<Input size={32} visualSize="sm" />
+<NativeSelect size={8} visualSize="lg" />
+```
+
 ## Forms and Astro Actions
 
 `Form` renders a semantic form and preserves native `method`, `action`, `enctype`, autocomplete,

package/components/Input.astro

@@ -6,20 +6,33 @@ import { resolveLumenAstroProps } from '@santi020k/lumen-core'
 interface Props extends Omit<HTMLAttributes<'input'>, 'size'> {
   class?: string | null
   className?: string
-  size?: 'default' | 'lg' | 'sm'
+  size?: HTMLAttributes<'input'>['size']
+  visualSize?: 'default' | 'lg' | 'sm'
 }
 
-const { class: classProp = '', className = '', size = 'default', type = 'text', ...rest } = Astro.props
+const {
+  class: classProp = '',
+  className = '',
+  size,
+  type = 'text',
+  visualSize,
+  ...rest
+} = Astro.props
+
+const legacyVisualSize = size === 'default' || size === 'lg' || size === 'sm' ? size : undefined
+const resolvedVisualSize = visualSize ?? legacyVisualSize ?? 'default'
+const nativeSize = legacyVisualSize ? undefined : size
 
 const { classList, passthrough } = resolveLumenAstroProps(rest, [
   'ui-input',
-  size === 'sm' && 'ui-input--sm',
-  size === 'lg' && 'ui-input--lg'
+  resolvedVisualSize === 'sm' && 'ui-input--sm',
+  resolvedVisualSize === 'lg' && 'ui-input--lg'
 ], classProp, className)
 ---
 
 <input
   class:list={classList}
+  size={nativeSize}
   type={type}
   {...passthrough}
 />

package/components/NativeSelect.astro

@@ -14,20 +14,33 @@ type SelectOption = Option | string
 interface Props extends Omit<HTMLAttributes<'select'>, 'size'> {
   class?: string | null
   className?: string
-  size?: 'default' | 'lg' | 'sm'
+  size?: HTMLAttributes<'select'>['size']
   options?: SelectOption[]
   placeholder?: string
+  visualSize?: 'default' | 'lg' | 'sm'
 }
 
-const { class: classProp = '', className = '', options = [], placeholder, size = 'default', ...rest } = Astro.props
+const {
+  class: classProp = '',
+  className = '',
+  options = [],
+  placeholder,
+  size,
+  visualSize,
+  ...rest
+} = Astro.props
+
 const hasValue = Object.hasOwn(rest, 'value')
 const normalizedOptions = options.map(option => typeof option === 'string' ? { label: option, value: option } : option)
+const legacyVisualSize = size === 'default' || size === 'lg' || size === 'sm' ? size : undefined
+const resolvedVisualSize = visualSize ?? legacyVisualSize ?? 'default'
+const nativeSize = legacyVisualSize ? undefined : size
 
-const { classList, passthrough } = resolveLumenAstroProps(rest, ['ui-select', size === 'sm' && 'ui-select--sm', size === 'lg' && 'ui-select--lg'
+const { classList, passthrough } = resolveLumenAstroProps(rest, ['ui-select', resolvedVisualSize === 'sm' && 'ui-select--sm', resolvedVisualSize === 'lg' && 'ui-select--lg'
 ], classProp, className)
 ---
 
-<select class:list={classList} {...passthrough}>
+<select class:list={classList} size={nativeSize} {...passthrough}>
   {placeholder && <option disabled selected={!hasValue} value="">{placeholder}</option>}
   <slot />
   {normalizedOptions.map(option => (

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@santi020k/lumen-astro",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "publishConfig": {
     "access": "public"
   },
@@ -37,12 +37,12 @@
   ],
   "dependencies": {
     "uqr": "^0.1.3",
-    "@santi020k/lumen": "^1.0.0",
-    "@santi020k/lumen-core": "^1.0.0"
+    "@santi020k/lumen": "^1.1.0",
+    "@santi020k/lumen-core": "^1.1.0"
   },
   "devDependencies": {
     "@astrojs/ts-plugin": "^1.10.10",
-    "astro": "^7.1.3",
+    "astro": "^7.2.0",
     "typescript": "^6.0.3",
     "vitest": "^4.1.10"
   },