From 8c8b3f1853ab8972e8ee76c57599fa33b22ab9c6 Mon Sep 17 00:00:00 2001
From: lindsaym-fa <dev@lindsaym.design>
Date: Tue, 23 Jan 2024 11:27:01 -0500
Subject: [PATCH 01/11] add custom properties to badge

---
 src/components/badge/badge.component.ts |  7 +++
 src/components/badge/badge.styles.ts    | 64 ++++++++++++++-----------
 2 files changed, 43 insertions(+), 28 deletions(-)

diff --git a/src/components/badge/badge.component.ts b/src/components/badge/badge.component.ts
index a1e56a2ed..53c967c99 100644
--- a/src/components/badge/badge.component.ts
+++ b/src/components/badge/badge.component.ts
@@ -14,6 +14,13 @@ import type { CSSResultGroup } from 'lit';
  * @slot - The badge's content.
  *
  * @csspart base - The component's base wrapper.
+ *
+ * @cssproperty --background - The badge's background styles.
+ * @cssproperty --border-color - The color of the badge's border.
+ * @cssproperty --border-radius - The radius of the badge's corners.
+ * @cssproperty --border-style - The style of the badge's border.
+ * @cssproperty --border-width - The width of the badge's border.
+ * @cssproperty --content-color - The color of the badge's content.
  */
 export default class WaBadge extends WebAwesomeElement {
   static styles: CSSResultGroup = styles;
diff --git a/src/components/badge/badge.styles.ts b/src/components/badge/badge.styles.ts
index e4ce52f43..978cbd687 100644
--- a/src/components/badge/badge.styles.ts
+++ b/src/components/badge/badge.styles.ts
@@ -5,9 +5,39 @@ export default css`
   ${componentStyles}
 
   :host {
+    --border-color: var(--wa-color-surface-default);
+    --border-radius: var(--wa-corners-xs);
+    --border-style: var(--wa-border-style);
+    --border-width: var(--wa-border-width-s);
+
     display: inline-flex;
   }
 
+  :host([variant='brand']) {
+    --background: var(--wa-color-brand-spot);
+    --content-color: var(--wa-color-brand-text-on-spot);
+  }
+
+  :host([variant='success']) {
+    --background: var(--wa-color-success-spot);
+    --content-color: var(--wa-color-success-text-on-spot);
+  }
+
+  :host([variant='warning']) {
+    --background: var(--wa-color-warning-spot);
+    --content-color: var(--wa-color-warning-text-on-spot);
+  }
+
+  :host([variant='neutral']) {
+    --background: var(--wa-color-neutral-spot);
+    --content-color: var(--wa-color-neutral-text-on-spot);
+  }
+
+  :host([variant='danger']) {
+    --background: var(--wa-color-danger-spot);
+    --content-color: var(--wa-color-danger-text-on-spot);
+  }
+
   .badge {
     display: inline-flex;
     align-items: center;
@@ -15,8 +45,12 @@ export default css`
     font-size: max(12px, 0.75em);
     font-weight: var(--wa-font-weight-medium);
     line-height: 1;
-    border-radius: var(--wa-corners-xs);
-    border: solid 1px var(--wa-color-surface-default);
+    background: var(--background);
+    border-color: var(--border-color);
+    border-radius: var(--border-radius);
+    border-style: var(--border-style);
+    border-width: var(--border-width);
+    color: var(--content-color);
     white-space: nowrap;
     padding: 0.35em 0.6em;
     user-select: none;
@@ -24,32 +58,6 @@ export default css`
     cursor: inherit;
   }
 
-  /* Variant modifiers */
-  .badge--brand {
-    background-color: var(--wa-color-brand-spot);
-    color: var(--wa-color-brand-text-on-spot);
-  }
-
-  .badge--success {
-    background-color: var(--wa-color-success-spot);
-    color: var(--wa-color-success-text-on-spot);
-  }
-
-  .badge--neutral {
-    background-color: var(--wa-color-neutral-spot);
-    color: var(--wa-color-neutral-text-on-spot);
-  }
-
-  .badge--warning {
-    background-color: var(--wa-color-warning-spot);
-    color: var(--wa-color-warning-text-on-spot);
-  }
-
-  .badge--danger {
-    background-color: var(--wa-color-danger-spot);
-    color: var(--wa-color-danger-text-on-spot);
-  }
-
   /* Pill modifier */
   .badge--pill {
     border-radius: var(--wa-corners-pill);

From 651eae8cb64cefb628479241b690b4fa6cb23d3e Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Wed, 24 Jan 2024 12:21:41 -0500
Subject: [PATCH 02/11] backport 1820

---
 docs/pages/resources/changelog.md         |  1 +
 src/components/option/option.component.ts | 17 ++++++++++++++++-
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/docs/pages/resources/changelog.md b/docs/pages/resources/changelog.md
index 46308231a..bbb2b6a86 100644
--- a/docs/pages/resources/changelog.md
+++ b/docs/pages/resources/changelog.md
@@ -32,6 +32,7 @@ New versions of Web Awesome are released as-needed and generally occur when a cr
 - Fixed a bug in `<sl-input>` and `<sl-textarea>` that made it work differently from `<input>` and `<textarea>` when using defaults [#1746]
 - Fixed a bug in `<sl-select>` that prevented it from closing when tabbing to another select inside a shadow root [#1763]
 - Fixed a bug in `<sl-spinner>` that caused the animation to appear strange in certain circumstances [#1787]
+- Fixed a bug in `<sl-option>` that caused slotted content to show up when calling `getTextLabel()` [#1730]
 - Improved the accessibility of `<sl-tooltip>` so they persist when hovering over the tooltip and dismiss when pressing [[Esc]] [#1734]
 
 ## 2.12.0
diff --git a/src/components/option/option.component.ts b/src/components/option/option.component.ts
index 561e1982c..438949ca0 100644
--- a/src/components/option/option.component.ts
+++ b/src/components/option/option.component.ts
@@ -106,7 +106,22 @@ export default class WaOption extends WebAwesomeElement {
 
   /** Returns a plain text label based on the option's content. */
   getTextLabel() {
-    return (this.textContent ?? '').trim();
+    const nodes = this.childNodes;
+    let label = '';
+
+    [...nodes].forEach(node => {
+      if (node.nodeType === Node.ELEMENT_NODE) {
+        if (!(node as HTMLElement).hasAttribute('slot')) {
+          label += (node as HTMLElement).outerHTML;
+        }
+      }
+
+      if (node.nodeType === Node.TEXT_NODE) {
+        label += node.textContent;
+      }
+    });
+
+    return label.trim();
   }
 
   render() {

From bfe05d0692138620806d36ee0fd75c776a87fed8 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Wed, 24 Jan 2024 12:25:13 -0500
Subject: [PATCH 03/11] backport 1821

---
 docs/pages/resources/changelog.md |  1 +
 src/themes/_utility.css           | 15 ++++++++++++---
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/docs/pages/resources/changelog.md b/docs/pages/resources/changelog.md
index bbb2b6a86..efb90ec16 100644
--- a/docs/pages/resources/changelog.md
+++ b/docs/pages/resources/changelog.md
@@ -32,6 +32,7 @@ New versions of Web Awesome are released as-needed and generally occur when a cr
 - Fixed a bug in `<sl-input>` and `<sl-textarea>` that made it work differently from `<input>` and `<textarea>` when using defaults [#1746]
 - Fixed a bug in `<sl-select>` that prevented it from closing when tabbing to another select inside a shadow root [#1763]
 - Fixed a bug in `<sl-spinner>` that caused the animation to appear strange in certain circumstances [#1787]
+- Fixed a bug that caused modal scroll locking to conflict with the `scrollbar-gutter` property [#1805]
 - Fixed a bug in `<sl-option>` that caused slotted content to show up when calling `getTextLabel()` [#1730]
 - Improved the accessibility of `<sl-tooltip>` so they persist when hovering over the tooltip and dismiss when pressing [[Esc]] [#1734]
 
diff --git a/src/themes/_utility.css b/src/themes/_utility.css
index abb609f6a..780dcdc2e 100644
--- a/src/themes/_utility.css
+++ b/src/themes/_utility.css
@@ -4,9 +4,18 @@
  * to reduce the possibility of collisions.
  */
 
-.wa-scroll-lock {
-  padding-right: var(--wa-scroll-lock-size) !important;
-  overflow: hidden !important;
+@supports (scrollbar-gutter: stable) {
+  .wa-scroll-lock {
+    scrollbar-gutter: stable !important;
+    overflow: hidden !important;
+  }
+}
+
+@supports not (scrollbar-gutter: stable) {
+  .wa-scroll-lock {
+    padding-right: var(--wa-scroll-lock-size) !important;
+    overflow: hidden !important;
+  }
 }
 
 .wa-toast-stack {

From 265e523a566f198d1cc3164fea4f07182411eb74 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Wed, 24 Jan 2024 13:16:38 -0500
Subject: [PATCH 04/11] backport 1822

---
 docs/pages/resources/changelog.md                   | 1 +
 src/components/radio-group/radio-group.component.ts | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/docs/pages/resources/changelog.md b/docs/pages/resources/changelog.md
index efb90ec16..fcefbfd9c 100644
--- a/docs/pages/resources/changelog.md
+++ b/docs/pages/resources/changelog.md
@@ -32,6 +32,7 @@ New versions of Web Awesome are released as-needed and generally occur when a cr
 - Fixed a bug in `<sl-input>` and `<sl-textarea>` that made it work differently from `<input>` and `<textarea>` when using defaults [#1746]
 - Fixed a bug in `<sl-select>` that prevented it from closing when tabbing to another select inside a shadow root [#1763]
 - Fixed a bug in `<sl-spinner>` that caused the animation to appear strange in certain circumstances [#1787]
+- Fixed a bug that caused empty `<sl-radio-group>` elements to log an error in the console [#1795]
 - Fixed a bug that caused modal scroll locking to conflict with the `scrollbar-gutter` property [#1805]
 - Fixed a bug in `<sl-option>` that caused slotted content to show up when calling `getTextLabel()` [#1730]
 - Improved the accessibility of `<sl-tooltip>` so they persist when hovering over the tooltip and dismiss when pressing [[Esc]] [#1734]
diff --git a/src/components/radio-group/radio-group.component.ts b/src/components/radio-group/radio-group.component.ts
index a05d2a0db..a18c693c8 100644
--- a/src/components/radio-group/radio-group.component.ts
+++ b/src/components/radio-group/radio-group.component.ts
@@ -218,7 +218,7 @@ export default class WaRadioGroup extends WebAwesomeElement implements WebAwesom
 
     this.hasButtonGroup = radios.some(radio => radio.tagName.toLowerCase() === 'wa-radio-button');
 
-    if (!radios.some(radio => radio.checked)) {
+    if (radios.length > 0 && !radios.some(radio => radio.checked)) {
       if (this.hasButtonGroup) {
         const buttonRadio = radios[0].shadowRoot?.querySelector('button');
 

From c67da1e8181ff89cf0bc6b7f6f7fd6b181abd283 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Wed, 24 Jan 2024 13:20:36 -0500
Subject: [PATCH 05/11] backport 1826

---
 docs/pages/resources/changelog.md |  3 ++
 src/internal/form.test.ts         | 60 +++++++++++++++++++++++++++++--
 src/internal/form.ts              |  9 ++++-
 3 files changed, 69 insertions(+), 3 deletions(-)

diff --git a/docs/pages/resources/changelog.md b/docs/pages/resources/changelog.md
index fcefbfd9c..cc5c39993 100644
--- a/docs/pages/resources/changelog.md
+++ b/docs/pages/resources/changelog.md
@@ -26,12 +26,15 @@ New versions of Web Awesome are released as-needed and generally occur when a cr
 
 ## Next
 
+- Added the `hover-bridge` feature to `<sl-popup>` to support better tooltip accessibility [#1734]
+- Added the `loading` attribute and the `spinner` and `spinner__base` part to `<sl-menu-item>` [#1700]
 - Fixed files that did not have `.js` extensions. [#1770]
 - Fixed `<sl-dialog>` not accounting for elements with hidden dialog controls like `<video>` [#1755]
 - Added the `hover-bridge` feature to `<sl-popup>` to support better tooltip accessibility [#1734]
 - Fixed a bug in `<sl-input>` and `<sl-textarea>` that made it work differently from `<input>` and `<textarea>` when using defaults [#1746]
 - Fixed a bug in `<sl-select>` that prevented it from closing when tabbing to another select inside a shadow root [#1763]
 - Fixed a bug in `<sl-spinner>` that caused the animation to appear strange in certain circumstances [#1787]
+- Fixed a bug that caused form controls to submit even after they were removed from the DOM [#1823]
 - Fixed a bug that caused empty `<sl-radio-group>` elements to log an error in the console [#1795]
 - Fixed a bug that caused modal scroll locking to conflict with the `scrollbar-gutter` property [#1805]
 - Fixed a bug in `<sl-option>` that caused slotted content to show up when calling `getTextLabel()` [#1730]
diff --git a/src/internal/form.test.ts b/src/internal/form.test.ts
index 382858e70..89369f992 100644
--- a/src/internal/form.test.ts
+++ b/src/internal/form.test.ts
@@ -1,6 +1,6 @@
 import '../../../dist/webawesome.js';
-
-import { expect, fixture, html } from '@open-wc/testing';
+import { expect, fixture, html, waitUntil } from '@open-wc/testing';
+import sinon from 'sinon';
 
 // Reproduction of this issue: https://github.com/shoelace-style/shoelace/issues/1703
 it('Should still run form validations if an element is removed', async () => {
@@ -19,3 +19,59 @@ it('Should still run form validations if an element is removed', async () => {
   expect(form.checkValidity()).to.equal(false);
   expect(form.reportValidity()).to.equal(false);
 });
+
+it('should submit the correct form values', async () => {
+  const form = await fixture<HTMLFormElement>(html`
+    <form>
+      <wa-input name="a" value="1"></wa-input>
+      <wa-input name="b" value="2"></wa-input>
+      <wa-input name="c" value="3"></wa-input>
+      <wa-button type="submit">Submit</wa-button>
+    </form>
+  `);
+
+  const button = form.querySelector('wa-button')!;
+  const submitHandler = sinon.spy((event: SubmitEvent) => {
+    formData = new FormData(form);
+    event.preventDefault();
+  });
+  let formData: FormData;
+
+  form.addEventListener('submit', submitHandler);
+  button.click();
+
+  await waitUntil(() => submitHandler.calledOnce);
+
+  expect(formData!.get('a')).to.equal('1');
+  expect(formData!.get('b')).to.equal('2');
+  expect(formData!.get('c')).to.equal('3');
+});
+
+it('should submit the correct form values when form controls are removed from the DOM', async () => {
+  const form = await fixture<HTMLFormElement>(html`
+    <form>
+      <wa-input name="a" value="1"></wa-input>
+      <wa-input name="b" value="2"></wa-input>
+      <wa-input name="c" value="3"></wa-input>
+      <wa-button type="submit">Submit</wa-button>
+    </form>
+  `);
+
+  const button = form.querySelector('wa-button')!;
+  const submitHandler = sinon.spy((event: SubmitEvent) => {
+    formData = new FormData(form);
+    event.preventDefault();
+  });
+  let formData: FormData;
+
+  form.addEventListener('submit', submitHandler);
+  form.querySelector('[name="b"]')!.remove();
+
+  button.click();
+
+  await waitUntil(() => submitHandler.calledOnce);
+
+  expect(formData!.get('a')).to.equal('1');
+  expect(formData!.get('b')).to.equal(null);
+  expect(formData!.get('c')).to.equal('3');
+});
diff --git a/src/internal/form.ts b/src/internal/form.ts
index 57c1cc993..afd8bafad 100644
--- a/src/internal/form.ts
+++ b/src/internal/form.ts
@@ -217,7 +217,14 @@ export class FormControlController implements ReactiveController {
     // injecting the name/value on a temporary button, so we can just skip them here.
     const isButton = this.host.tagName.toLowerCase() === 'wa-button';
 
-    if (!disabled && !isButton && typeof name === 'string' && name.length > 0 && typeof value !== 'undefined') {
+    if (
+      this.host.isConnected &&
+      !disabled &&
+      !isButton &&
+      typeof name === 'string' &&
+      name.length > 0 &&
+      typeof value !== 'undefined'
+    ) {
       if (Array.isArray(value)) {
         (value as unknown[]).forEach(val => {
           event.formData.append(name, (val as string | number | boolean).toString());

From b7541d240b92075852cb20d6033a39f6125dfa03 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Wed, 24 Jan 2024 13:21:27 -0500
Subject: [PATCH 06/11] backport 1828

---
 docs/pages/components/button.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/pages/components/button.md b/docs/pages/components/button.md
index f54fd5b83..beb0c413b 100644
--- a/docs/pages/components/button.md
+++ b/docs/pages/components/button.md
@@ -374,7 +374,7 @@ const App = () => (
 
 ### Loading
 
-Use the `loading` attribute to make a button busy. The width will remain the same as before, preventing adjacent elements from moving around. Clicks will be suppressed until the loading state is removed.
+Use the `loading` attribute to make a button busy. The width will remain the same as before, preventing adjacent elements from moving around.
 
 ```html:preview
 <wa-button variant="brand" loading>Brand</wa-button>

From 9b7aad71a96c69553fdf1221f39c885b51a331d9 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Wed, 24 Jan 2024 13:23:41 -0500
Subject: [PATCH 07/11] backport 1831

---
 src/components/color-picker/color-picker.component.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/color-picker/color-picker.component.ts b/src/components/color-picker/color-picker.component.ts
index 40ee87106..c0f781c60 100644
--- a/src/components/color-picker/color-picker.component.ts
+++ b/src/components/color-picker/color-picker.component.ts
@@ -667,7 +667,7 @@ export default class WaColorPicker extends WebAwesomeElement implements WebAweso
 
   /** Generates a hex string from HSV values. Hue must be 0-360. All other arguments must be 0-100. */
   private getHexString(hue: number, saturation: number, brightness: number, alpha = 100) {
-    const color = new TinyColor(`hsva(${hue}, ${saturation}, ${brightness}, ${alpha / 100})`);
+    const color = new TinyColor(`hsva(${hue}, ${saturation}%, ${brightness}%, ${alpha / 100})`);
     if (!color.isValid) {
       return '';
     }

From 52e2518365f300375651b5e4fc121ca6c6133cb4 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Wed, 24 Jan 2024 13:24:29 -0500
Subject: [PATCH 08/11] backport 1818

---
 src/components/radio-group/radio-group.component.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/radio-group/radio-group.component.ts b/src/components/radio-group/radio-group.component.ts
index a18c693c8..3bd48f09a 100644
--- a/src/components/radio-group/radio-group.component.ts
+++ b/src/components/radio-group/radio-group.component.ts
@@ -28,6 +28,7 @@ import type WaRadioButton from '../radio-button/radio-button.js';
  * @slot - The default slot where `<wa-radio>` or `<wa-radio-button>` elements are placed.
  * @slot label - The radio group's label. Required for proper accessibility. Alternatively, you can use the `label`
  *  attribute.
+ * @slot help-text - Text that describes how to use the radio group. Alternatively, you can use the `help-text` attribute.
  *
  * @event wa-change - Emitted when the radio group's selected value changes.
  * @event wa-input - Emitted when the radio group receives user input.

From ec613f8d32a71caf54312083d48c2287a9ae6a54 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Wed, 24 Jan 2024 13:31:42 -0500
Subject: [PATCH 09/11] backport 1797

---
 cspell.json                        |  1 +
 custom-elements-manifest.config.js |  7 +++++
 docs/pages/frameworks/vue.md       | 41 ++++++++++------------------
 package-lock.json                  | 43 ++++++++++++++++++++++++++++++
 package.json                       |  2 ++
 5 files changed, 67 insertions(+), 27 deletions(-)

diff --git a/cspell.json b/cspell.json
index 8d1293a94..ccaf8e4f9 100644
--- a/cspell.json
+++ b/cspell.json
@@ -173,6 +173,7 @@
     "valpha",
     "valuenow",
     "valuetext",
+    "Vuejs",
     "WCAG",
     "webawesome",
     "WEBP",
diff --git a/custom-elements-manifest.config.js b/custom-elements-manifest.config.js
index 303f036ed..5f1d028b0 100644
--- a/custom-elements-manifest.config.js
+++ b/custom-elements-manifest.config.js
@@ -1,6 +1,7 @@
 import * as path from 'path';
 import { customElementJetBrainsPlugin } from 'custom-element-jet-brains-integration';
 import { customElementVsCodePlugin } from 'custom-element-vs-code-integration';
+import { customElementVuejsPlugin } from 'custom-element-vuejs-integration';
 import { parse } from 'comment-parser';
 import { pascalCase } from 'pascal-case';
 import commandLineArgs from 'command-line-args';
@@ -218,6 +219,12 @@ export default {
           url: `https://shoelace.style/components/${tag.replace('wa-', '')}`
         };
       }
+    }),
+
+    customElementVuejsPlugin({
+      outdir: './dist/types/vue',
+      fileName: 'index.d.ts',
+      componentTypePath: (_, tag) => `../../components/${tag.replace('wa-', '')}/${tag.replace('wa-', '')}.component.js`
     })
   ]
 };
diff --git a/docs/pages/frameworks/vue.md b/docs/pages/frameworks/vue.md
index 3348eb7d3..56daf4908 100644
--- a/docs/pages/frameworks/vue.md
+++ b/docs/pages/frameworks/vue.md
@@ -35,35 +35,22 @@ If you'd rather not use the CDN for assets, you can create a build task that cop
 
 ## Configuration
 
-You'll need to tell Vue to ignore Web Awesome components. This is pretty easy because they all start with `sl-`.
-
-```js
-import { fileURLToPath, URL } from 'url';
-
-import { defineConfig } from 'vite';
-import vue from '@vitejs/plugin-vue';
-
-// https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [
-    vue({
-      template: {
-        compilerOptions: {
-          isCustomElement: tag => tag.startsWith('wa-')
-        }
-      }
-    })
-  ],
-  resolve: {
-    alias: {
-      '@': fileURLToPath(new URL('./src', import.meta.url))
-    }
-  }
-});
-```
+If you haven't configured your Vue.js project to work with custom elements/web components, follow [the instructions here](https://vuejs.org/guide/extras/web-components.html#using-custom-elements-in-vue) based on your project type to ensure your project will not throw an error when it encounters a custom element.
 
 Now you can start using Web Awesome components in your app!
 
+## Types
+
+Once you have configured your application for custom elements, you should be able to use Shoelace in your application without it causing any errors. Unfortunately, this doesn't register the custom elements to behave like components built using Vue. To provide autocomplete information and type safety for your components, you can import the Shoelace Vue types into your `tsconfig.json` to get better integration in your standard Vue and JSX templates.
+
+```json
+{
+  "compilerOptions": {
+    "types": ["@shoelace-style/shoelace/dist/types/vue"]
+  }
+}
+```
+
 ## Usage
 
 ### QR code generator example
@@ -126,7 +113,7 @@ Are you using Web Awesome with Vue? [Help us improve this page!](https://github.
 
 ### Slots
 
-To use Web Awesome components with slots, follow the Vue documentation on using [slots with custom elements](https://vuejs.org/guide/extras/web-components.html#building-custom-elements-with-vue).
+Slots in Web Awesome (and web components in general) are functionally the same as basic slots in Vue. Slots can be assigned to elements using the `slot` attribute followed by the name of the slot it is being assigned to.
 
 Here is an example:
 
diff --git a/package-lock.json b/package-lock.json
index 41b00ad1e..24beeadba 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7,6 +7,7 @@
     "": {
       "name": "@shoelace-style/shoelace",
       "version": "2.8.0",
+      "hasInstallScript": true,
       "license": "MIT",
       "dependencies": {
         "@ctrl/tinycolor": "^4.0.2",
@@ -39,6 +40,7 @@
         "cspell": "^6.18.1",
         "custom-element-jet-brains-integration": "^1.4.0",
         "custom-element-vs-code-integration": "^1.2.1",
+        "custom-element-vuejs-integration": "^1.0.0",
         "del": "^7.1.0",
         "download": "^8.0.0",
         "esbuild": "^0.19.4",
@@ -6760,6 +6762,30 @@
         "url": "https://github.com/prettier/prettier?sponsor=1"
       }
     },
+    "node_modules/custom-element-vuejs-integration": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/custom-element-vuejs-integration/-/custom-element-vuejs-integration-1.0.1.tgz",
+      "integrity": "sha512-whoB5DqPNIxaltlvTuOXrP543o5dHKV1ae3a3qFHwKKKwDSCU9vtTOIZpZ4NdRmBPDbaCOgQvYxCJmjdDXrC+g==",
+      "dev": true,
+      "dependencies": {
+        "prettier": "^2.7.1"
+      }
+    },
+    "node_modules/custom-element-vuejs-integration/node_modules/prettier": {
+      "version": "2.8.8",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz",
+      "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==",
+      "dev": true,
+      "bin": {
+        "prettier": "bin-prettier.js"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
     "node_modules/custom-elements-manifest": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/custom-elements-manifest/-/custom-elements-manifest-1.0.0.tgz",
@@ -23702,6 +23728,23 @@
         }
       }
     },
+    "custom-element-vuejs-integration": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/custom-element-vuejs-integration/-/custom-element-vuejs-integration-1.0.1.tgz",
+      "integrity": "sha512-whoB5DqPNIxaltlvTuOXrP543o5dHKV1ae3a3qFHwKKKwDSCU9vtTOIZpZ4NdRmBPDbaCOgQvYxCJmjdDXrC+g==",
+      "dev": true,
+      "requires": {
+        "prettier": "^2.7.1"
+      },
+      "dependencies": {
+        "prettier": {
+          "version": "2.8.8",
+          "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz",
+          "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==",
+          "dev": true
+        }
+      }
+    },
     "custom-elements-manifest": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/custom-elements-manifest/-/custom-elements-manifest-1.0.0.tgz",
diff --git a/package.json b/package.json
index db5fdd43d..86c336f90 100644
--- a/package.json
+++ b/package.json
@@ -45,6 +45,7 @@
     "start": "node scripts/build.js --serve",
     "build": "node scripts/build.js",
     "verify": "npm run prettier:check && npm run lint && npm run build && npm run test",
+    "postinstall": "npx playwright install",
     "prepublishOnly": "npm run verify",
     "prettier": "prettier --write --log-level warn .",
     "prettier:check": "prettier --check --log-level warn .",
@@ -92,6 +93,7 @@
     "cspell": "^6.18.1",
     "custom-element-jet-brains-integration": "^1.4.0",
     "custom-element-vs-code-integration": "^1.2.1",
+    "custom-element-vuejs-integration": "^1.0.0",
     "del": "^7.1.0",
     "download": "^8.0.0",
     "esbuild": "^0.19.4",

From d6cfa1ab2488cf30a443c8f8195efd58743d6890 Mon Sep 17 00:00:00 2001
From: lindsaym-fa <dev@lindsaym.design>
Date: Wed, 24 Jan 2024 16:40:25 -0500
Subject: [PATCH 10/11] add custom properties to tag

---
 src/components/tag/tag.component.ts |   7 ++
 src/components/tag/tag.styles.ts    | 113 +++++++++++-----------------
 2 files changed, 49 insertions(+), 71 deletions(-)

diff --git a/src/components/tag/tag.component.ts b/src/components/tag/tag.component.ts
index 5dbb18fef..4acc43bce 100644
--- a/src/components/tag/tag.component.ts
+++ b/src/components/tag/tag.component.ts
@@ -23,6 +23,13 @@ import type { CSSResultGroup } from 'lit';
  * @csspart content - The tag's content.
  * @csspart remove-button - The tag's remove button, an `<wa-icon-button>`.
  * @csspart remove-button__base - The remove button's exported `base` part.
+ *
+ * @cssproperty --background - The tag's background styles.
+ * @cssproperty --border-color - The color of the tag's border.
+ * @cssproperty --border-radius - The radius of the tag's corners.
+ * @cssproperty --border-style - The style of the tag's border.
+ * @cssproperty --border-width - The width of the tag's border.
+ * @cssproperty --content-color - The color of the tag's content.
  */
 export default class WaTag extends WebAwesomeElement {
   static styles: CSSResultGroup = styles;
diff --git a/src/components/tag/tag.styles.ts b/src/components/tag/tag.styles.ts
index 043cfe994..9102d3a8e 100644
--- a/src/components/tag/tag.styles.ts
+++ b/src/components/tag/tag.styles.ts
@@ -5,13 +5,52 @@ export default css`
   ${componentStyles}
 
   :host {
+    --border-radius: var(--wa-corners-xs);
+    --border-style: var(--wa-border-style);
+    --border-width: var(--wa-border-width-s);
+
     display: inline-block;
   }
 
+  :host([variant='brand']) {
+    --background: var(--wa-color-brand-fill-subtle);
+    --border-color: var(--wa-color-brand-border-highlight);
+    --content-color: var(--wa-color-brand-text-on-fill);
+  }
+
+  :host([variant='success']) {
+    --background: var(--wa-color-success-fill-subtle);
+    --border-color: var(--wa-color-success-border-highlight);
+    --content-color: var(--wa-color-success-text-on-fill);
+  }
+
+  :host([variant='warning']) {
+    --background: var(--wa-color-warning-fill-subtle);
+    --border-color: var(--wa-color-warning-border-highlight);
+    --content-color: var(--wa-color-warning-text-on-fill);
+  }
+
+  :host([variant='neutral']) {
+    --background: var(--wa-color-neutral-fill-subtle);
+    --border-color: var(--wa-color-neutral-border-highlight);
+    --content-color: var(--wa-color-neutral-text-on-fill);
+  }
+
+  :host([variant='danger']) {
+    --background: var(--wa-color-danger-fill-subtle);
+    --border-color: var(--wa-color-danger-border-highlight);
+    --content-color: var(--wa-color-danger-text-on-fill);
+  }
+
   .tag {
     display: flex;
     align-items: center;
-    border: solid var(--wa-border-width-s);
+    background: var(--background);
+    border-color: var(--border-color);
+    border-radius: var(--border-radius);
+    border-style: var(--border-style);
+    border-width: var(--border-width);
+    color: var(--content-color);
     line-height: 1;
     white-space: nowrap;
     user-select: none;
@@ -23,82 +62,14 @@ export default css`
     padding: 0;
   }
 
-  /*
-   * Variant modifiers
-   */
-
-  .tag--brand {
-    background-color: var(--wa-color-brand-fill-subtle);
-    border-color: var(--wa-color-brand-border-highlight);
-    color: var(--wa-color-brand-text-on-fill);
-  }
-
-  .tag--brand:active > wa-icon-button {
-    color: var(--wa-color-brand-text-on-fill);
-  }
-
-  .tag--success {
-    background-color: var(--wa-color-success-fill-subtle);
-    border-color: var(--wa-color-success-border-highlight);
-    color: var(--wa-color-success-text-on-fill);
-  }
-
-  .tag--success:active > wa-icon-button {
-    color: var(--wa-color-success-text-on-fill);
-  }
-
-  .tag--neutral {
-    background-color: var(--wa-color-neutral-fill-subtle);
-    border-color: var(--wa-color-neutral-border-highlight);
-    color: var(--wa-color-neutral-text-on-fill);
-  }
-
-  .tag--neutral:active > wa-icon-button {
-    color: var(--wa-color-neutral-text-on-fill);
-  }
-
-  .tag--warning {
-    background-color: var(--wa-color-warning-fill-subtle);
-    border-color: var(--wa-color-warning-border-highlight);
-    color: var(--wa-color-warning-text-on-fill);
-  }
-
-  .tag--warning:active > wa-icon-button {
-    color: var(--wa-color-warning-text-on-fill);
-  }
-
-  .tag--danger {
-    background-color: var(--wa-color-danger-fill-subtle);
-    border-color: var(--wa-color-danger-border-highlight);
-    color: var(--wa-color-danger-text-on-fill);
-  }
-
-  .tag--danger:active > wa-icon-button {
-    color: var(--wa-color-danger-text-on-fill);
+  .tag:active > wa-icon-button {
+    color: var(--content-color);
   }
 
   /*
    * Size modifiers
    */
 
-  .tag--small {
-    font-size: var(--wa-font-size-xs);
-    border-radius: var(--wa-corners-s);
-    padding: var(--wa-space-3xs) var(--wa-space-2xs);
-  }
-
-  .tag--medium {
-    font-size: var(--wa-font-size-s);
-    border-radius: var(--wa-corners-s);
-    padding: var(--wa-space-2xs) var(--wa-space-xs);
-  }
-
-  .tag--large {
-    font-size: var(--wa-font-size-m);
-    border-radius: var(--wa-corners-s);
-    padding: var(--wa-space-2xs) var(--wa-space-xs);
-  }
-
   .tag--small {
     font-size: var(--wa-font-size-xs);
     height: calc(var(--wa-form-controls-height-s) * 0.8);

From 130844df1c264d8893dce8047a4d91ba9131d362 Mon Sep 17 00:00:00 2001
From: lindsaym-fa <dev@lindsaym.design>
Date: Thu, 25 Jan 2024 14:08:31 -0500
Subject: [PATCH 11/11] add custom properties to carousel

---
 src/components/carousel/carousel.component.ts |  5 ++++-
 src/components/carousel/carousel.styles.ts    | 16 ++++++++++------
 2 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/components/carousel/carousel.component.ts b/src/components/carousel/carousel.component.ts
index 5d32cf0b8..56748dcc7 100644
--- a/src/components/carousel/carousel.component.ts
+++ b/src/components/carousel/carousel.component.ts
@@ -41,10 +41,13 @@ import type WaCarouselItem from '../carousel-item/carousel-item.component.js';
  * @csspart navigation-button--previous - Applied to the previous button.
  * @csspart navigation-button--next - Applied to the next button.
  *
- * @cssproperty --slide-gap - The space between each slide.
  * @cssproperty [--aspect-ratio=16/9] - The aspect ratio of each slide.
+ * @cssproperty --navigation-color - The color of the navigation buttons.
+ * @cssproperty --pagination-color-activated - The color of the pagination dot for the current item.
+ * @cssproperty --pagination-color-resting - The color of the pagination dots for inactive items.
  * @cssproperty --scroll-hint - The amount of padding to apply to the scroll area, allowing adjacent slides to become
  *  partially visible as a scroll hint.
+ * @cssproperty --slide-gap - The space between each slide.
  */
 export default class WaCarousel extends WebAwesomeElement {
   static styles: CSSResultGroup = styles;
diff --git a/src/components/carousel/carousel.styles.ts b/src/components/carousel/carousel.styles.ts
index c0a4597e1..1885a8747 100644
--- a/src/components/carousel/carousel.styles.ts
+++ b/src/components/carousel/carousel.styles.ts
@@ -5,9 +5,12 @@ export default css`
   ${componentStyles}
 
   :host {
-    --slide-gap: var(--wa-space-m, 1rem);
     --aspect-ratio: 16 / 9;
+    --navigation-color: var(--wa-color-text-quiet);
+    --pagination-color-activated: var(--wa-form-controls-activated-color);
+    --pagination-color-resting: var(--wa-form-controls-resting-color);
     --scroll-hint: 0px;
+    --slide-gap: var(--wa-space-m, 1rem);
 
     display: flex;
   }
@@ -95,7 +98,7 @@ export default css`
   .carousel__navigation {
     grid-area: navigation;
     display: contents;
-    font-size: var(--wa-font-size-xl);
+    font-size: var(--wa-font-size-l);
   }
 
   .carousel__navigation-button {
@@ -106,7 +109,7 @@ export default css`
     border: none;
     border-radius: var(--wa-corners-s);
     font-size: inherit;
-    color: var(--wa-color-text-quiet);
+    color: var(--navigation-color);
     padding: var(--wa-space-xs);
     cursor: pointer;
     transition: var(--wa-transition-fast) color;
@@ -140,14 +143,15 @@ export default css`
     border-radius: var(--wa-corners-circle);
     width: var(--wa-space-s);
     height: var(--wa-space-s);
-    background-color: var(--wa-color-neutral-fill-highlight);
+    background-color: var(--pagination-color-resting);
     padding: 0;
     margin: 0;
+    transition: transform var(--wa-transition-normal);
   }
 
   .carousel__pagination-item--active {
-    background-color: var(--wa-color-brand-spot);
-    transform: scale(1.2);
+    background-color: var(--pagination-color-activated);
+    transform: scale(1.25);
   }
 
   /* Focus styles */