From a739d35b5635c74f3846feb3cee3485e5db2929d Mon Sep 17 00:00:00 2001
From: Michael Wilson <michael_wilson@sil.org>
Date: Thu, 11 Apr 2024 10:36:06 +0930
Subject: [PATCH 1/9] fix(Select): update to match installed version of
 material/select

---
 components/mdc/Select/Select.svelte | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/components/mdc/Select/Select.svelte b/components/mdc/Select/Select.svelte
index d9879e3..e93c592 100644
--- a/components/mdc/Select/Select.svelte
+++ b/components/mdc/Select/Select.svelte
@@ -63,11 +63,18 @@ afterUpdate(() => {
 
 <div class="mdc-select mdc-select--outlined {$$props.class || ''}" bind:this={element} style="width: {width}">
   <div class="mdc-select__anchor" role="button" aria-haspopup="listbox" aria-labelledby="{labelID} {selectedTextID}">
+    <span class="mdc-notched-outline">
+      <span class="mdc-notched-outline__leading" />
+      <span class="mdc-notched-outline__notch">
+        <span id={labelID} class="mdc-floating-label">{label}</span>
+      </span>
+      <span class="mdc-notched-outline__trailing" />
+    </span>
     <span class="mdc-select__selected-text-container">
       <span id={selectedTextID} class="mdc-select__selected-text" />
     </span>
     <span class="mdc-select__dropdown-icon">
-      <svg class="mdc-select__dropdown-icon-graphic" viewBox="7 10 10 5">
+      <svg class="mdc-select__dropdown-icon-graphic" viewBox="7 10 10 5" focusable="false">
         <polygon
           class="mdc-select__dropdown-icon-inactive"
           stroke="none"
@@ -77,17 +84,10 @@ afterUpdate(() => {
         <polygon class="mdc-select__dropdown-icon-active" stroke="none" fill-rule="evenodd" points="7 15 12 10 17 15" />
       </svg>
     </span>
-    <span class="mdc-notched-outline">
-      <span class="mdc-notched-outline__leading" />
-      <span class="mdc-notched-outline__notch">
-        <span id={labelID} class="mdc-floating-label">{label}</span>
-      </span>
-      <span class="mdc-notched-outline__trailing" />
-    </span>
   </div>
 
-  <div class="mdc-select__menu mdc-menu mdc-menu-surface" style="width: {width}" role="listbox">
-    <ul class="mdc-deprecated-list">
+  <div class="mdc-select__menu mdc-menu mdc-menu-surface" style="width: {width}">
+    <ul class="mdc-deprecated-list" role="listbox" aria-label={label + ' picker listbox'}>
       {#each options as { id, name } (id)}
         <li class="mdc-deprecated-list-item" data-value={id} role="option" aria-selected={isOptionSelected(id)}>
           <span class="mdc-deprecated-list-item__text">{name}</span>

From 23d2e78261ef0a30fe54b779ee24c4a8f7d0abc3 Mon Sep 17 00:00:00 2001
From: Michael Wilson <michael_wilson@sil.org>
Date: Thu, 11 Apr 2024 10:41:40 +0930
Subject: [PATCH 2/9] use mdc-menu-surface--fullwidth

---
 components/mdc/Select/Select.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/mdc/Select/Select.svelte b/components/mdc/Select/Select.svelte
index e93c592..97471cd 100644
--- a/components/mdc/Select/Select.svelte
+++ b/components/mdc/Select/Select.svelte
@@ -86,7 +86,7 @@ afterUpdate(() => {
     </span>
   </div>
 
-  <div class="mdc-select__menu mdc-menu mdc-menu-surface" style="width: {width}">
+  <div class="mdc-select__menu mdc-menu mdc-menu-surface mdc-menu-surface--fullwidth">
     <ul class="mdc-deprecated-list" role="listbox" aria-label={label + ' picker listbox'}>
       {#each options as { id, name } (id)}
         <li class="mdc-deprecated-list-item" data-value={id} role="option" aria-selected={isOptionSelected(id)}>

From 94bab918ba3a6560c49670622802aa942ee32628 Mon Sep 17 00:00:00 2001
From: Michael Wilson <michael_wilson@sil.org>
Date: Thu, 11 Apr 2024 12:29:04 +0930
Subject: [PATCH 3/9] feat(Select): Add Select.required prop

---
 components/mdc/Select/Select.svelte | 16 ++++++++++++++--
 components/mdc/Select/_index.scss   |  2 +-
 index.d.ts                          |  5 +++--
 stories/Select.stories.svelte       |  4 ++++
 4 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/components/mdc/Select/Select.svelte b/components/mdc/Select/Select.svelte
index 97471cd..8cb658e 100644
--- a/components/mdc/Select/Select.svelte
+++ b/components/mdc/Select/Select.svelte
@@ -15,6 +15,8 @@ export let width = '280px'
 export let disabled = false
 /** @type {string} The ID of the selected option. */
 export let selectedID = ''
+/** @type {boolean} makes a selection required and adds invalid class when none selected */
+export let required = false
 
 const dispatch = createEventDispatcher()
 const labelID = generateRandomID('select-label-')
@@ -61,8 +63,18 @@ afterUpdate(() => {
 })
 </script>
 
-<div class="mdc-select mdc-select--outlined {$$props.class || ''}" bind:this={element} style="width: {width}">
-  <div class="mdc-select__anchor" role="button" aria-haspopup="listbox" aria-labelledby="{labelID} {selectedTextID}">
+<div
+  class="mdc-select mdc-select--outlined {$$props.class || ''}"
+  class:mdc-select--required={required}
+  bind:this={element}
+  style="width: {width}"
+>
+  <div
+    class="mdc-select__anchor"
+    aria-required={required}
+    aria-haspopup="listbox"
+    aria-labelledby="{labelID} {selectedTextID}"
+  >
     <span class="mdc-notched-outline">
       <span class="mdc-notched-outline__leading" />
       <span class="mdc-notched-outline__notch">
diff --git a/components/mdc/Select/_index.scss b/components/mdc/Select/_index.scss
index 881464a..7ff7969 100644
--- a/components/mdc/Select/_index.scss
+++ b/components/mdc/Select/_index.scss
@@ -4,6 +4,6 @@
 @use '@material/select/styles';
 
 /* MDC select floating label */
-.mdc-select:not(.mdc-select--disabled).mdc-select--focused .mdc-floating-label {
+.mdc-select:not(.mdc-select--disabled, .mdc-select--invalid).mdc-select--focused .mdc-floating-label {
   color: var(--mdc-theme-primary);
 }
diff --git a/index.d.ts b/index.d.ts
index 9eaf73b..d0995e2 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -235,11 +235,12 @@ declare module '@silintl/ui-components' {
   }
 
   interface SelectProps {
+    disabled?: boolean
     label?: string
     options?: { name: string; id: string }[]
-    width?: string
-    disabled?: boolean
+    required?: boolean
     selectedID?: string
+    width?: string
     class?: string
   }
   export class Select extends SvelteComponentTyped<SelectProps> {}
diff --git a/stories/Select.stories.svelte b/stories/Select.stories.svelte
index 8e546bd..62210b0 100644
--- a/stories/Select.stories.svelte
+++ b/stories/Select.stories.svelte
@@ -26,8 +26,12 @@ const args = {
 
 <Story name="Default" {args} />
 
+<Story name="selectedID" args={copyAndModifyArgs(args, { selectedID: '5' })} />
+
 <Story name="Label" args={copyAndModifyArgs(args, { label: 'Label' })} />
 
 <Story name="Width" args={copyAndModifyArgs(args, { width: '560px' })} />
 
 <Story name="Disabled" args={copyAndModifyArgs(args, { disabled: true })} />
+
+<Story name="required" args={copyAndModifyArgs(args, { required: true })} />

From 3d8f95d4657a1ee99f6900522a3449126790f20e Mon Sep 17 00:00:00 2001
From: Michael Wilson <michael_wilson@sil.org>
Date: Thu, 11 Apr 2024 12:36:31 +0930
Subject: [PATCH 4/9] feat(Select): Add Select.ShowError prop which applies the
 mdc-select--invalid class to the

---
 components/mdc/Select/Select.svelte | 3 +++
 index.d.ts                          | 1 +
 stories/Select.stories.svelte       | 2 ++
 3 files changed, 6 insertions(+)

diff --git a/components/mdc/Select/Select.svelte b/components/mdc/Select/Select.svelte
index 8cb658e..d7cbb16 100644
--- a/components/mdc/Select/Select.svelte
+++ b/components/mdc/Select/Select.svelte
@@ -17,6 +17,8 @@ export let disabled = false
 export let selectedID = ''
 /** @type {boolean} makes a selection required and adds invalid class when none selected */
 export let required = false
+/** @type {boolean} applies the mdc-select--invalid class */
+export let showError = false
 
 const dispatch = createEventDispatcher()
 const labelID = generateRandomID('select-label-')
@@ -66,6 +68,7 @@ afterUpdate(() => {
 <div
   class="mdc-select mdc-select--outlined {$$props.class || ''}"
   class:mdc-select--required={required}
+  class:mdc-select--invalid={showError}
   bind:this={element}
   style="width: {width}"
 >
diff --git a/index.d.ts b/index.d.ts
index d0995e2..e5d5360 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -239,6 +239,7 @@ declare module '@silintl/ui-components' {
     label?: string
     options?: { name: string; id: string }[]
     required?: boolean
+    showError?: boolean
     selectedID?: string
     width?: string
     class?: string
diff --git a/stories/Select.stories.svelte b/stories/Select.stories.svelte
index 62210b0..3b45dce 100644
--- a/stories/Select.stories.svelte
+++ b/stories/Select.stories.svelte
@@ -35,3 +35,5 @@ const args = {
 <Story name="Disabled" args={copyAndModifyArgs(args, { disabled: true })} />
 
 <Story name="required" args={copyAndModifyArgs(args, { required: true })} />
+
+<Story name="showError" args={copyAndModifyArgs(args, { showError: true })} />

From 8f7380bcd34df41600d3be7bbe9fafc3187c4df8 Mon Sep 17 00:00:00 2001
From: Michael Wilson <michael_wilson@sil.org>
Date: Thu, 11 Apr 2024 13:20:58 +0930
Subject: [PATCH 5/9] feat(Select): Add Select.name for convenient form
 submission

---
 components/mdc/Select/Select.svelte |  3 +++
 index.d.ts                          |  1 +
 stories/Select.stories.svelte       | 14 ++++++++++++--
 3 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/components/mdc/Select/Select.svelte b/components/mdc/Select/Select.svelte
index d7cbb16..08c09c4 100644
--- a/components/mdc/Select/Select.svelte
+++ b/components/mdc/Select/Select.svelte
@@ -19,6 +19,8 @@ export let selectedID = ''
 export let required = false
 /** @type {boolean} applies the mdc-select--invalid class */
 export let showError = false
+/** @type {string} a name for the hidden input field for form submission*/
+export let name = ''
 
 const dispatch = createEventDispatcher()
 const labelID = generateRandomID('select-label-')
@@ -72,6 +74,7 @@ afterUpdate(() => {
   bind:this={element}
   style="width: {width}"
 >
+  <input {required} type="hidden" {name} />
   <div
     class="mdc-select__anchor"
     aria-required={required}
diff --git a/index.d.ts b/index.d.ts
index e5d5360..c35c995 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -237,6 +237,7 @@ declare module '@silintl/ui-components' {
   interface SelectProps {
     disabled?: boolean
     label?: string
+    name?: string
     options?: { name: string; id: string }[]
     required?: boolean
     showError?: boolean
diff --git a/stories/Select.stories.svelte b/stories/Select.stories.svelte
index 3b45dce..7818706 100644
--- a/stories/Select.stories.svelte
+++ b/stories/Select.stories.svelte
@@ -1,7 +1,8 @@
 <script>
 import { Meta, Template, Story } from '@storybook/addon-svelte-csf'
-import { Select } from '../components/mdc'
+import { Button, Select, Snackbar, setNotice } from '../components/mdc'
 import { copyAndModifyArgs } from './helpers.js'
+import { Form } from '../components/custom'
 
 const args = {
   options: [
@@ -21,7 +22,14 @@ const args = {
 <Meta title="Atoms/Select" component={Select} />
 
 <Template let:args>
-  <Select {...args} on:change={args['on:change']} on:populated={args['on:populated']} />
+  <Form on:submit={(e) => setNotice('submitted')}>
+    <p>
+      <Select {...args} on:change={args['on:change']} on:populated={args['on:populated']} />
+    </p>
+    <Button raised>Submit</Button>
+  </Form>
+
+  <Snackbar />
 </Template>
 
 <Story name="Default" {args} />
@@ -37,3 +45,5 @@ const args = {
 <Story name="required" args={copyAndModifyArgs(args, { required: true })} />
 
 <Story name="showError" args={copyAndModifyArgs(args, { showError: true })} />
+
+<Story name="name" args={copyAndModifyArgs(args, { name: 'category' })} />

From d0edde2e9a3da677ff4b92c24dd8f26853130c0b Mon Sep 17 00:00:00 2001
From: semantic-release-bot <semantic-release-bot@martynus.net>
Date: Tue, 16 Apr 2024 04:02:26 +0000
Subject: [PATCH 6/9] chore(release): 11.2.0 [skip ci]

## [11.2.0](https://github.com/silinternational/ui-components/compare/v11.1.2...v11.2.0) (2024-04-16)

### Fixed

* **Select:** update to match installed version of material/select ([a739d35](https://github.com/silinternational/ui-components/commit/a739d35b5635c74f3846feb3cee3485e5db2929d))
* **TextInputs:** use latest material docs to fix icon spacing issues on TextField and MoneyInput ([2df920b](https://github.com/silinternational/ui-components/commit/2df920bf89df513213bc99067a565112850d5439))

### Added

* **Select:** Add Select.name for convenient form submission ([8f7380b](https://github.com/silinternational/ui-components/commit/8f7380bcd34df41600d3be7bbe9fafc3187c4df8))
* **Select:** Add Select.required prop ([94bab91](https://github.com/silinternational/ui-components/commit/94bab918ba3a6560c49670622802aa942ee32628))
* **Select:** Add Select.ShowError prop which applies the mdc-select--invalid class to the ([3d8f95d](https://github.com/silinternational/ui-components/commit/3d8f95d4657a1ee99f6900522a3449126790f20e))
* **TextInputs:** add showError, showWarn props to MoneyInput, TextArea and TextField ([c143895](https://github.com/silinternational/ui-components/commit/c143895280c354e586e20c614919b1130d3e66e6))
---
 CHANGELOG.md | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0b0815e..8f8d902 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,22 @@
 All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/) and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html), enforced with [semantic-release](https://github.com/semantic-release/semantic-release).
 
+## [11.2.0](https://github.com/silinternational/ui-components/compare/v11.1.2...v11.2.0) (2024-04-16)
+
+
+### Fixed
+
+* **Select:** update to match installed version of material/select ([a739d35](https://github.com/silinternational/ui-components/commit/a739d35b5635c74f3846feb3cee3485e5db2929d))
+* **TextInputs:** use latest material docs to fix icon spacing issues on TextField and MoneyInput ([2df920b](https://github.com/silinternational/ui-components/commit/2df920bf89df513213bc99067a565112850d5439))
+
+
+### Added
+
+* **Select:** Add Select.name for convenient form submission ([8f7380b](https://github.com/silinternational/ui-components/commit/8f7380bcd34df41600d3be7bbe9fafc3187c4df8))
+* **Select:** Add Select.required prop ([94bab91](https://github.com/silinternational/ui-components/commit/94bab918ba3a6560c49670622802aa942ee32628))
+* **Select:** Add Select.ShowError prop which applies the mdc-select--invalid class to the ([3d8f95d](https://github.com/silinternational/ui-components/commit/3d8f95d4657a1ee99f6900522a3449126790f20e))
+* **TextInputs:** add showError, showWarn props to MoneyInput, TextArea and TextField ([c143895](https://github.com/silinternational/ui-components/commit/c143895280c354e586e20c614919b1130d3e66e6))
+
 ## [11.2.0](https://github.com/silinternational/ui-components/compare/v11.1.2...v11.2.0) (2024-04-09)
 
 

From 244d6c4b309ac1fba449206d97b2ce40d41818ae Mon Sep 17 00:00:00 2001
From: Michael Wilson <michael_wilson@sil.org>
Date: Tue, 16 Apr 2024 14:56:48 +0930
Subject: [PATCH 7/9] manually bump version [skip ci]

---
 CHANGELOG.md      | 3 +--
 package-lock.json | 4 ++--
 package.json      | 2 +-
 3 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8f8d902..3b8fde4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,13 +2,12 @@
 All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/) and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html), enforced with [semantic-release](https://github.com/semantic-release/semantic-release).
 
-## [11.2.0](https://github.com/silinternational/ui-components/compare/v11.1.2...v11.2.0) (2024-04-16)
+## [11.3.0](https://github.com/silinternational/ui-components/compare/v11.1.2...v11.2.0) (2024-04-16)
 
 
 ### Fixed
 
 * **Select:** update to match installed version of material/select ([a739d35](https://github.com/silinternational/ui-components/commit/a739d35b5635c74f3846feb3cee3485e5db2929d))
-* **TextInputs:** use latest material docs to fix icon spacing issues on TextField and MoneyInput ([2df920b](https://github.com/silinternational/ui-components/commit/2df920bf89df513213bc99067a565112850d5439))
 
 
 ### Added
diff --git a/package-lock.json b/package-lock.json
index f1e5f8f..4ac187e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@silintl/ui-components",
-  "version": "11.2.0",
+  "version": "11.3.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@silintl/ui-components",
-      "version": "11.2.0",
+      "version": "11.3.0",
       "license": "MIT",
       "dependencies": {
         "material-components-web": "^14.0.0",
diff --git a/package.json b/package.json
index bd9ce4f..40fbfa9 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@silintl/ui-components",
-  "version": "11.2.0",
+  "version": "11.3.0",
   "description": "Reusable Svelte components for some internal applications",
   "main": "index.mjs",
   "module": "index.mjs",

From 6ebc3ff9594fa265b242eb668f2e8486bdbea00b Mon Sep 17 00:00:00 2001
From: Michael Wilson <michael_wilson@sil.org>
Date: Tue, 16 Apr 2024 14:58:35 +0930
Subject: [PATCH 8/9] dedupe change in changelog [skip ci]

---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3b8fde4..ca9e8a0 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -15,7 +15,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 * **Select:** Add Select.name for convenient form submission ([8f7380b](https://github.com/silinternational/ui-components/commit/8f7380bcd34df41600d3be7bbe9fafc3187c4df8))
 * **Select:** Add Select.required prop ([94bab91](https://github.com/silinternational/ui-components/commit/94bab918ba3a6560c49670622802aa942ee32628))
 * **Select:** Add Select.ShowError prop which applies the mdc-select--invalid class to the ([3d8f95d](https://github.com/silinternational/ui-components/commit/3d8f95d4657a1ee99f6900522a3449126790f20e))
-* **TextInputs:** add showError, showWarn props to MoneyInput, TextArea and TextField ([c143895](https://github.com/silinternational/ui-components/commit/c143895280c354e586e20c614919b1130d3e66e6))
+
 
 ## [11.2.0](https://github.com/silinternational/ui-components/compare/v11.1.2...v11.2.0) (2024-04-09)
 

From a857080933b6c506edbd9daa7e2ec137ec59683c Mon Sep 17 00:00:00 2001
From: Michael Wilson <michael_wilson@sil.org>
Date: Tue, 16 Apr 2024 14:59:31 +0930
Subject: [PATCH 9/9] fix compare versions [skip ci]

---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ca9e8a0..2a8eb2c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,7 +2,7 @@
 All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/) and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html), enforced with [semantic-release](https://github.com/semantic-release/semantic-release).
 
-## [11.3.0](https://github.com/silinternational/ui-components/compare/v11.1.2...v11.2.0) (2024-04-16)
+## [11.3.0](https://github.com/silinternational/ui-components/compare/v11.2.0...v11.3.0) (2024-04-16)
 
 
 ### Fixed