add date to input

docs/components/input.md

@@ -54,6 +54,18 @@ Use the `pill` attribute to give inputs rounded edges.
 <sl-input placeholder="Large" size="large" pill></sl-input>
 ```
 
+### Input Types
+
+The `type` attribute controls the type of input the browser renders.
+
+```html preview
+<sl-input type="email" Placeholder="Email"></sl-input>
+<br>
+<sl-input type="number" Placeholder="Number"></sl-input>
+<br>
+<sl-input type="date" Placeholder="Date"></sl-input>
+```
+
 ### Disabled
 
 Use the `disabled` attribute to disable an input.

docs/resources/changelog.md

@@ -9,6 +9,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 ## Next
 
 - Added `--swatch-size` custom property to `sl-color-picker`
+- Added `date` to `sl-input` as a supported `type`
 - Adjusted elevation tokens to use neutral in light mode and black in dark mode
 - Adjusted `--sl-overlay-background-color` in dark theme to be black instead of gray
 - Fixed a bug in `sl-color-picker` where the opacity slider wasn't showing the current color

src/components/input/input.ts

@@ -61,7 +61,8 @@ export default class SlInput extends LitElement {
   @state() private isPasswordVisible = false;
 
   /** The input's type. */
-  @property({ reflect: true }) type: 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url' = 'text';
+  @property({ reflect: true }) type: 'date' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url' =
+    'text';
 
   /** The input's size. */
   @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';