feat(timepicker): support "sm", "xl" size variants

COMPONENT_INDEX.md

@@ -4987,6 +4987,7 @@ import { TimePicker } from "carbon-components-svelte";
 
 | Prop name   | Type                                      | Default value | Description                                    |
 | :---------- | :---------------------------------------- | :------------ | :--------------------------------------------- |
+| size        | <code>"sm" &#124; "xl"</code>             | --            | Specify the size of the input.                 |
 | value       | <code>string</code>                       | `""`          | Specify the input value.                       |
 | type        | <code>string</code>                       | `"text"`      | Specify the input type.                        |
 | placeholder | <code>string</code>                       | `"hh=mm"`     | Specify the input placeholder text.            |

docs/src/PUBLIC_API.json

@@ -14581,6 +14581,14 @@
     "TimePicker": {
       "moduleName": "TimePicker",
       "props": [
+        [
+          "size",
+          {
+            "kind": "let",
+            "type": "\"sm\" | \"xl\"",
+            "description": "Specify the size of the input"
+          }
+        ],
         [
           "value",
           {
@@ -14721,8 +14729,8 @@
         [
           "click",
           {
-            "start": 1853,
-            "end": 1861,
+            "start": 1965,
+            "end": 1973,
             "type": "EventHandler",
             "name": "click",
             "modifiers": [],
@@ -14732,8 +14740,8 @@
         [
           "mouseover",
           {
-            "start": 1864,
-            "end": 1876,
+            "start": 1976,
+            "end": 1988,
             "type": "EventHandler",
             "name": "mouseover",
             "modifiers": [],
@@ -14743,8 +14751,8 @@
         [
           "mouseenter",
           {
-            "start": 1879,
-            "end": 1892,
+            "start": 1991,
+            "end": 2004,
             "type": "EventHandler",
             "name": "mouseenter",
             "modifiers": [],
@@ -14754,8 +14762,8 @@
         [
           "mouseleave",
           {
-            "start": 1895,
-            "end": 1908,
+            "start": 2007,
+            "end": 2020,
             "type": "EventHandler",
             "name": "mouseleave",
             "modifiers": [],
@@ -14765,8 +14773,8 @@
         [
           "change",
           {
-            "start": 2830,
-            "end": 2839,
+            "start": 3036,
+            "end": 3045,
             "type": "EventHandler",
             "name": "change",
             "modifiers": [],
@@ -14776,8 +14784,8 @@
         [
           "input",
           {
-            "start": 2848,
-            "end": 2856,
+            "start": 3054,
+            "end": 3062,
             "type": "EventHandler",
             "name": "input",
             "modifiers": [],
@@ -14787,8 +14795,8 @@
         [
           "focus",
           {
-            "start": 2946,
-            "end": 2954,
+            "start": 3152,
+            "end": 3160,
             "type": "EventHandler",
             "name": "focus",
             "modifiers": [],
@@ -14798,8 +14806,8 @@
         [
           "blur",
           {
-            "start": 2963,
-            "end": 2970,
+            "start": 3169,
+            "end": 3176,
             "type": "EventHandler",
             "name": "blur",
             "modifiers": [],

docs/src/pages/components/TimePicker.svx

@@ -33,6 +33,32 @@ components: ["TimePicker", "TimePickerSelect", "SelectItem"]
   </TimePickerSelect>
 </TimePicker>
 
+### Extra-large size
+
+<TimePicker size="xl" labelText="Cron job" placeholder="hh:mm">
+  <TimePickerSelect value="PM">
+    <SelectItem value="am" text="AM" />
+    <SelectItem value="pm" text="PM" />
+  </TimePickerSelect>
+  <TimePickerSelect value="PDT">
+    <SelectItem value="pdt" text="PDT" />
+    <SelectItem value="gmt" text="GMT" />
+  </TimePickerSelect>
+</TimePicker>
+
+### Small size
+
+<TimePicker size="sm" labelText="Cron job" placeholder="hh:mm">
+  <TimePickerSelect value="PM">
+    <SelectItem value="am" text="AM" />
+    <SelectItem value="pm" text="PM" />
+  </TimePickerSelect>
+  <TimePickerSelect value="PDT">
+    <SelectItem value="pdt" text="PDT" />
+    <SelectItem value="gmt" text="GMT" />
+  </TimePickerSelect>
+</TimePicker>
+
 ### Disabled
 
 <TimePicker labelText="Cron job" placeholder="hh:mm" disabled>

src/TimePicker/TimePicker.svelte

@@ -1,4 +1,10 @@
 <script>
+  /**
+   * Specify the size of the input
+   * @type {"sm" | "xl"} [size]
+   */
+  export let size = undefined;
+
   /**
    * Specify the input value
    * @type {string} [value=""]
@@ -95,6 +101,8 @@
   <div
     class:bx--time-picker="{true}"
     class:bx--time-picker--light="{light}"
+    class:bx--time-picker--sm="{size === 'sm'}"
+    class:bx--time-picker--xl="{size === 'xl'}"
     class:bx--select--light="{light}"
   >
     <div class:bx--time-picker__input="{true}">

types/index.d.ts

@@ -4794,6 +4794,11 @@ export class TileGroup extends CarbonSvelteComponent {
 
 export class TimePicker extends CarbonSvelteComponent {
   $$prop_def: {
+    /**
+     * Specify the size of the input
+     */
+    size?: "sm" | "xl";
+
     /**
      * Specify the input value
      * @default ""