From 6458c97c1ab6ab122c960d6a834b3d42361f566c Mon Sep 17 00:00:00 2001
From: brunnerh <brunnerh@users.noreply.github.com>
Date: Mon, 3 Jan 2022 19:46:12 +0100
Subject: [PATCH] Add `required` prop to Select. (#968)

Upgrade sveld to set paths correctly on Windows.
Make Prettier script compatible with Windows and run it.
---
 COMPONENT_INDEX.md                                |  1 +
 docs/src/COMPONENT_API.json                       | 11 +++++++++++
 .../src/pages/framed/Breakpoint/Breakpoint.svelte |  2 +-
 package.json                                      |  4 ++--
 src/CodeSnippet/CodeSnippet.svelte                | 15 +++++----------
 src/DatePicker/DatePicker.svelte                  |  3 +--
 src/Dropdown/Dropdown.svelte                      | 12 ++++--------
 src/MultiSelect/MultiSelect.svelte                | 12 ++++--------
 src/ProgressIndicator/ProgressStep.svelte         |  3 +--
 src/Select/Select.svelte                          |  5 +++++
 src/TextInput/PasswordInput.svelte                |  6 ++----
 src/TreeView/TreeViewNode.svelte                  |  9 ++-------
 types/Select/Select.svelte.d.ts                   |  6 ++++++
 yarn.lock                                         |  8 ++++----
 14 files changed, 49 insertions(+), 48 deletions(-)

diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index 0b59bc73..f70be063 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -3242,6 +3242,7 @@ None.
 | noLabel     | <code>let</code> | No       | <code>boolean</code>                       | <code>false</code>                               | Set to `true` to not render a label             |
 | labelText   | <code>let</code> | No       | <code>string</code>                        | <code>""</code>                                  | Specify the label text                          |
 | hideLabel   | <code>let</code> | No       | <code>boolean</code>                       | <code>false</code>                               | Set to `true` to visually hide the label text   |
+| required    | <code>let</code> | No       | <code>boolean</code>                       | <code>false</code>                               | Set to `true` to mark the field as required     |
 
 ### Slots
 
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index 69c3bfac..32415d3d 100644
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@@ -9419,6 +9419,17 @@
           "isFunctionDeclaration": false,
           "constant": false,
           "reactive": true
+        },
+        {
+          "name": "required",
+          "kind": "let",
+          "description": "Set to `true` to mark the field as required",
+          "type": "boolean",
+          "value": "false",
+          "isFunction": false,
+          "isFunctionDeclaration": false,
+          "constant": false,
+          "reactive": false
         }
       ],
       "slots": [
diff --git a/docs/src/pages/framed/Breakpoint/Breakpoint.svelte b/docs/src/pages/framed/Breakpoint/Breakpoint.svelte
index d47affd2..83116706 100644
--- a/docs/src/pages/framed/Breakpoint/Breakpoint.svelte
+++ b/docs/src/pages/framed/Breakpoint/Breakpoint.svelte
@@ -13,7 +13,7 @@
 
 <h6>on:match</h6>
 <pre>
-  {JSON.stringify(events,null, 2)}
+  {JSON.stringify(events, null, 2)}
 </pre>
 
 <style>
diff --git a/package.json b/package.json
index 7f3fc616..815cdc90 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,7 @@
     "build:api": "node scripts/build-api",
     "build:lib": "rollup -c",
     "prepack": "run-p build:*",
-    "format": "prettier --write './**/*.{svelte,js,md}'"
+    "format": "prettier --write \"./**/*.{svelte,js,md}\""
   },
   "dependencies": {
     "flatpickr": "4.6.9"
@@ -41,7 +41,7 @@
     "rollup-plugin-svelte": "^7.1.0",
     "rollup-plugin-terser": "^7.0.2",
     "sass": "^1.42.1",
-    "sveld": "^0.10.2",
+    "sveld": "^0.11.1",
     "svelte": "^3.44.3",
     "svelte-check": "^1.1.32",
     "typescript": "^4.1.3"
diff --git a/src/CodeSnippet/CodeSnippet.svelte b/src/CodeSnippet/CodeSnippet.svelte
index 8484d852..ca8c612f 100644
--- a/src/CodeSnippet/CodeSnippet.svelte
+++ b/src/CodeSnippet/CodeSnippet.svelte
@@ -150,14 +150,10 @@
       feedback="{feedback}"
       feedbackTimeout="{feedbackTimeout}"
       class="bx--snippet {type && `bx--snippet--${type}`}
-          {type ===
-        'inline' && 'bx--btn--copy'}
-          {expanded &&
-        'bx--snippet--expand'}
-          {light &&
-        'bx--snippet--light'}
-          {hideCopyButton &&
-        'bx--snippet--no-copy'}
+          {type === 'inline' && 'bx--btn--copy'}
+          {expanded && 'bx--snippet--expand'}
+          {light && 'bx--snippet--light'}
+          {hideCopyButton && 'bx--snippet--no-copy'}
           {wrapText && 'bx--snippet--wraptext'}"
       {...$$restProps}
       on:click
@@ -194,8 +190,7 @@
       class:bx--snippet-container="{true}"
       style="width: 100%; min-height: {minHeight}px; max-height: {maxHeight}"
     >
-      <pre
-        bind:this="{ref}">
+      <pre bind:this="{ref}">
         <code><slot>{code}</slot></code>
       </pre>
     </div>
diff --git a/src/DatePicker/DatePicker.svelte b/src/DatePicker/DatePicker.svelte
index e2444d20..cd4a7618 100644
--- a/src/DatePicker/DatePicker.svelte
+++ b/src/DatePicker/DatePicker.svelte
@@ -229,8 +229,7 @@
     class:bx--date-picker="{true}"
     class:bx--date-picker--short="{short}"
     class:bx--date-picker--light="{light}"
-    class="{datePickerType &&
-      `bx--date-picker--${datePickerType}`}
+    class="{datePickerType && `bx--date-picker--${datePickerType}`}
       {datePickerType === 'range' &&
       $labelTextEmpty &&
       'bx--date-picker--nolabel'}"
diff --git a/src/Dropdown/Dropdown.svelte b/src/Dropdown/Dropdown.svelte
index a7556237..0b503dd6 100644
--- a/src/Dropdown/Dropdown.svelte
+++ b/src/Dropdown/Dropdown.svelte
@@ -170,14 +170,10 @@
       'bx--dropdown--invalid'} {!invalid &&
       warn &&
       'bx--dropdown--warning'} {open && 'bx--dropdown--open'}
-      {size ===
-      'sm' && 'bx--dropdown--sm'}
-      {size === 'xl' &&
-      'bx--dropdown--xl'}
-      {inline &&
-      'bx--dropdown--inline'}
-      {disabled &&
-      'bx--dropdown--disabled'}
+      {size === 'sm' && 'bx--dropdown--sm'}
+      {size === 'xl' && 'bx--dropdown--xl'}
+      {inline && 'bx--dropdown--inline'}
+      {disabled && 'bx--dropdown--disabled'}
       {light && 'bx--dropdown--light'}"
     on:click="{({ target }) => {
       open = ref.contains(target) ? !open : false;
diff --git a/src/MultiSelect/MultiSelect.svelte b/src/MultiSelect/MultiSelect.svelte
index 0c5edf7a..add3a9a1 100644
--- a/src/MultiSelect/MultiSelect.svelte
+++ b/src/MultiSelect/MultiSelect.svelte
@@ -280,14 +280,10 @@
     warnText="{warnText}"
     class="bx--multi-select {direction === 'top' &&
       'bx--list-box--up'} {filterable && 'bx--combo-box'}
-      {filterable &&
-      'bx--multi-select--filterable'}
-      {invalid &&
-      'bx--multi-select--invalid'}
-      {inline &&
-      'bx--multi-select--inline'}
-      {checked.length > 0 &&
-      'bx--multi-select--selected'}"
+      {filterable && 'bx--multi-select--filterable'}
+      {invalid && 'bx--multi-select--invalid'}
+      {inline && 'bx--multi-select--inline'}
+      {checked.length > 0 && 'bx--multi-select--selected'}"
   >
     {#if invalid}
       <WarningFilled16 class="bx--list-box__invalid-icon" />
diff --git a/src/ProgressIndicator/ProgressStep.svelte b/src/ProgressIndicator/ProgressStep.svelte
index e9ca3298..fba6bb33 100644
--- a/src/ProgressIndicator/ProgressStep.svelte
+++ b/src/ProgressIndicator/ProgressStep.svelte
@@ -95,8 +95,7 @@
         <title>{description}</title>
         <path
           d="M8 1C4.1 1 1 4.1 1 8s3.1 7 7 7 7-3.1 7-7-3.1-7-7-7zm0 13c-3.3
-          0-6-2.7-6-6s2.7-6 6-6 6 2.7 6 6-2.7 6-6 6z"
-        ></path>
+          0-6-2.7-6-6s2.7-6 6-6 6 2.7 6 6-2.7 6-6 6z"></path>
       </svg>
     {/if}
     <slot props="{{ class: 'bx--progress-label' }}">
diff --git a/src/Select/Select.svelte b/src/Select/Select.svelte
index df300aed..4be2e18b 100644
--- a/src/Select/Select.svelte
+++ b/src/Select/Select.svelte
@@ -60,6 +60,9 @@
   /** Obtain a reference to the select HTML element */
   export let ref = null;
 
+  /** Set to `true` to mark the field as required */
+  export let required = false;
+
   import { createEventDispatcher, setContext, afterUpdate } from "svelte";
   import { writable } from "svelte/store";
   import ChevronDown16 from "../icons/ChevronDown16.svelte";
@@ -112,6 +115,7 @@
             aria-describedby="{invalid ? errorId : undefined}"
             aria-invalid="{invalid || undefined}"
             disabled="{disabled || undefined}"
+            required="{required || undefined}"
             id="{id}"
             name="{name}"
             class:bx--select-input="{true}"
@@ -156,6 +160,7 @@
           name="{name}"
           aria-describedby="{invalid ? errorId : undefined}"
           disabled="{disabled || undefined}"
+          required="{required || undefined}"
           aria-invalid="{invalid || undefined}"
           class:bx--select-input="{true}"
           class="{size && `bx--select-input--${size}`}"
diff --git a/src/TextInput/PasswordInput.svelte b/src/TextInput/PasswordInput.svelte
index 25064f66..6c417cc0 100644
--- a/src/TextInput/PasswordInput.svelte
+++ b/src/TextInput/PasswordInput.svelte
@@ -198,10 +198,8 @@
         class:bx--btn--disabled="{disabled}"
         class:bx--tooltip__trigger="{true}"
         class:bx--tooltip--a11y="{true}"
-        class="{tooltipPosition &&
-          `bx--tooltip--${tooltipPosition}`}
-        {tooltipAlignment &&
-          `bx--tooltip--align-${tooltipAlignment}`}"
+        class="{tooltipPosition && `bx--tooltip--${tooltipPosition}`}
+        {tooltipAlignment && `bx--tooltip--align-${tooltipAlignment}`}"
         on:click="{() => {
           type = type === 'password' ? 'text' : 'password';
         }}"
diff --git a/src/TreeView/TreeViewNode.svelte b/src/TreeView/TreeViewNode.svelte
index 3401627d..ffcd4ad1 100644
--- a/src/TreeView/TreeViewNode.svelte
+++ b/src/TreeView/TreeViewNode.svelte
@@ -55,13 +55,8 @@
   let refLabel = null;
   let prevActiveId = undefined;
 
-  const {
-    activeNodeId,
-    selectedNodeIds,
-    clickNode,
-    selectNode,
-    focusNode,
-  } = getContext("TreeView");
+  const { activeNodeId, selectedNodeIds, clickNode, selectNode, focusNode } =
+    getContext("TreeView");
   const offset = () =>
     computeTreeLeafDepth(refLabel) + (leaf && icon ? 2 : 2.5);
 
diff --git a/types/Select/Select.svelte.d.ts b/types/Select/Select.svelte.d.ts
index 2dd564f3..7d573125 100644
--- a/types/Select/Select.svelte.d.ts
+++ b/types/Select/Select.svelte.d.ts
@@ -95,6 +95,12 @@ export interface SelectProps
    * @default null
    */
   ref?: null | HTMLSelectElement;
+
+  /**
+   * Set to `true` to mark the field as required
+   * @default false
+   */
+  required?: boolean;
 }
 
 export default class Select extends SvelteComponentTyped<
diff --git a/yarn.lock b/yarn.lock
index 0a04610e..a5c392af 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2292,10 +2292,10 @@ supports-color@^7.0.0, supports-color@^7.1.0:
   dependencies:
     has-flag "^4.0.0"
 
-sveld@^0.10.2:
-  version "0.10.2"
-  resolved "https://registry.yarnpkg.com/sveld/-/sveld-0.10.2.tgz#24366250a2b8021d76a0c4c641adc4f858c2a56f"
-  integrity sha512-51pf6aNw9Ks13/7DiA7UvriqittW6320g/14a9XxiN5/f7Yg6/IfByoKkFHyTf2RdeREvjITuJT5G8Me0tDvxw==
+sveld@^0.11.1:
+  version "0.11.1"
+  resolved "https://registry.yarnpkg.com/sveld/-/sveld-0.11.1.tgz#2b24fb8dae6fcd9bb14f826c89480cf88b079dca"
+  integrity sha512-cb6sUB6yVomLgeDny0sXSGxgNGrwYPg8CHuI0k80DcGFNF2ML6k7yZeVeFjWjh2Tmj8+/PgSLJj5IYuZEjyQVA==
   dependencies:
     "@rollup/plugin-node-resolve" "^11.0.1"
     acorn "^8.4.1"