Merge branch 'next' into combobox-free

package-lock.json

@@ -14053,8 +14053,7 @@
       "devDependencies": {
         "@wc-toolkit/jsx-types": "^1.3.0",
         "eleventy-plugin-git-commit-date": "^0.1.3",
-        "esbuild": "^0.25.11",
-        "npm-check-updates": "^19.1.2"
+        "esbuild": "^0.25.11"
       },
       "engines": {
         "node": ">=14.17.0"
@@ -14527,21 +14526,6 @@
         "node": "^18 || >=20"
       }
     },
-    "packages/webawesome-pro/node_modules/npm-check-updates": {
-      "version": "19.1.2",
-      "resolved": "https://registry.npmjs.org/npm-check-updates/-/npm-check-updates-19.1.2.tgz",
-      "integrity": "sha512-FNeFCVgPOj0fz89hOpGtxP2rnnRHR7hD2E8qNU8SMWfkyDZXA/xpgjsL3UMLSo3F/K13QvJDnbxPngulNDDo/g==",
-      "dev": true,
-      "license": "Apache-2.0",
-      "bin": {
-        "ncu": "build/cli.js",
-        "npm-check-updates": "build/cli.js"
-      },
-      "engines": {
-        "node": ">=20.0.0",
-        "npm": ">=8.12.1"
-      }
-    },
     "packages/webawesome/node_modules/@esbuild/aix-ppc64": {
       "version": "0.25.11",
       "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.11.tgz",

package.json

@@ -2,7 +2,7 @@
   "name": "@webawesome/monorepo",
   "private": true,
   "description": "A forward-thinking library of web components.",
-  "version": "3.0.0",
+  "version": "3.0.0-alpha.13",
   "homepage": "https://webawesome.com/",
   "author": "Web Awesome",
   "license": "MIT",
@@ -85,4 +85,4 @@
       "prettier --write"
     ]
   }
-}
+}

packages/webawesome/docs/docs/resources/changelog.md

@@ -14,8 +14,6 @@ Components with the <wa-badge variant="warning">Experimental</wa-badge> badge sh
 ## Next
 
 - Added `<wa-combobox>` as an experimental pro component [issue:1074]
-- Added version 2.0.0 of the [official Web Awesome Figma Design Kit](/docs/resources/figma)
-- Added npm support for Web Awesome Pro
 - Added `layers.css` to define cascade layer order and updated palettes, themes, native styles, and utilities to import the new rule for more fail-safe modularity [pr:1793]
 - Fixed a bug in `<wa-slider>` that caused some touch devices to end up with the incorrect value [issue:1703]
 - Fixed a bug in `<wa-card>` that prevented some slots from being detected correctly [discuss:1450]
@@ -27,9 +25,6 @@ Components with the <wa-badge variant="warning">Experimental</wa-badge> badge sh
 - Fixed a bug in `<wa-select>` that prevented clicks on the tag's remove button from removing options in multiple mode
 - Fixed a bug in `<wa-select>` that caused tags to appear in alphabetical order instead of selection order when using `multiple`
 - Improved performance of `<wa-icon>` so initial rendering occurs faster, especially with multiple icons on the page [issue:1729]
-- Improved `<wa-slider>` to not throw an error when string values are passed to the `min`, `max`, and `step` properties [issue:1823]
-- Fixed a bug in Web Awesome form controls that caused `<wa-input form="foo">` to set the form property to equal `"foo"` instead of returning an `HTMLFormElement` breaking platform expectations. [pr:1815]
-- Fixed a bug in `<wa-button>` causing it to not copy over attributes for form submissions. [pr:1815]
 - Improved performance of all components by fixing how CSS is imported and reused [issue:1812]
 - Modified the default `transition` styles of `<wa-dropdown-item>` to use design tokens [pr:1693]
 
@@ -515,4 +510,4 @@ Many of these changes and improvements were the direct result of feedback from u
 
 </details>
 
-Did we miss something? [Let us know!](https://github.com/shoelace-style/webawesome/discussions)
+Did we miss something? [Let us know!](https://github.com/shoelace-style/webawesome/discussions)

packages/webawesome/package.json

@@ -67,7 +67,7 @@
     "check-updates": "npm-check-updates --cooldown 7 --interactive --format group",
     "print-version": "echo $npm_package_version",
     "tag-version": "git tag -a \"v$(npm run print-version | tail -n1)\" -m \"tag v$(npm run print-version | tail -n1)\"",
-    "postversion": "npm run tag-version && node ./scripts/update-root-version.js"
+    "postversion": "npm run tag-version"
   },
   "engines": {
     "node": ">=14.17.0"

packages/webawesome/scripts/update-root-version.js

@@ -1,27 +0,0 @@
-#!/usr/bin/env node
-
-import * as fs from 'node:fs';
-import * as path from 'node:path';
-import * as url from 'url';
-
-const __dirname = url.fileURLToPath(new URL('.', import.meta.url));
-
-const monorepoRoot = path.resolve(__dirname, '..', '..', '..');
-const rootPackageJSONFile = path.join(monorepoRoot, 'package.json');
-const webawesomePackageJSONFile = path.join(path.resolve(__dirname, '..'), 'package.json');
-
-const rootPackageJSON = JSON.parse(fs.readFileSync(rootPackageJSONFile));
-const webawesomePackageJSON = JSON.parse(fs.readFileSync(webawesomePackageJSONFile));
-
-const currentVersion = webawesomePackageJSON.version;
-rootPackageJSON.version = currentVersion;
-
-fs.writeFileSync(rootPackageJSONFile, JSON.stringify(rootPackageJSON, null, 2));
-
-const versionsFile = path.join(monorepoRoot, 'VERSIONS.txt');
-const versions = fs.readFileSync(versions).split(/\r?\n/);
-
-// TODO: Make this smart and understand semver and "insert" in the correct spot instead of appending.
-if (!versions.includes(currentVersion)) {
-  fs.appendFileSync(webawesomePackageJSON.version);
-}

packages/webawesome/src/components/button/button.ts

@@ -115,6 +115,7 @@ export default class WaButton extends WebAwesomeFormAssociatedElement {
    * The "form owner" to associate the button with. If omitted, the closest containing form will be used instead. The
    * value of this attribute must be an id of a form in the same document or shadow root as the button.
    */
+  @property({ reflect: true }) form: string | null = null;
 
   /** Used to override the form owner's `action` attribute. */
   @property({ attribute: 'formaction' }) formAction: string;
@@ -134,27 +135,24 @@ export default class WaButton extends WebAwesomeFormAssociatedElement {
 
   private constructLightDOMButton() {
     const button = document.createElement('button');
-
-    for (const attribute of this.attributes) {
-      if (attribute.name === 'style') {
-        // Skip style attributes as they *shouldn't* be necessary
-        continue;
-      }
-      button.setAttribute(attribute.name, attribute.value);
-    }
-
     button.type = this.type;
-    button.style.position = 'absolute !important';
-    button.style.width = '0 !important';
-    button.style.height = '0 !important';
-    button.style.clipPath = 'inset(50%) !important';
-    button.style.overflow = 'hidden !important';
-    button.style.whiteSpace = 'nowrap !important';
+    button.style.position = 'absolute';
+    button.style.width = '0';
+    button.style.height = '0';
+    button.style.clipPath = 'inset(50%)';
+    button.style.overflow = 'hidden';
+    button.style.whiteSpace = 'nowrap';
     if (this.name) {
       button.name = this.name;
     }
     button.value = this.value || '';
 
+    ['form', 'formaction', 'formenctype', 'formmethod', 'formnovalidate', 'formtarget'].forEach(attr => {
+      if (this.hasAttribute(attr)) {
+        button.setAttribute(attr, this.getAttribute(attr)!);
+      }
+    });
+
     return button;
   }
 

packages/webawesome/src/components/checkbox/checkbox.ts

@@ -108,6 +108,13 @@ export default class WaCheckbox extends WebAwesomeFormAssociatedElement {
   @property({ type: Boolean, reflect: true, attribute: 'checked' }) defaultChecked: boolean =
     this.hasAttribute('checked');
 
+  /**
+   * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
+   * to place the form control outside of a form and associate it with the form that has this `id`. The form must be in
+   * the same document or shadow root for this to work.
+   */
+  @property({ reflect: true }) form = null;
+
   /** Makes the checkbox a required field. */
   @property({ type: Boolean, reflect: true }) required = false;
 

packages/webawesome/src/components/color-picker/color-picker.ts

@@ -220,6 +220,13 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
    */
   @property() swatches: string | string[] = '';
 
+  /**
+   * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
+   * to place the form control outside of a form and associate it with the form that has this `id`. The form must be in
+   * the same document or shadow root for this to work.
+   */
+  @property({ reflect: true }) form = null;
+
   /** Makes the color picker a required field. */
   @property({ type: Boolean, reflect: true }) required = false;
 

packages/webawesome/src/components/input/input.ts

@@ -140,6 +140,13 @@ export default class WaInput extends WebAwesomeFormAssociatedElement {
   /** Hides the browser's built-in increment/decrement spin buttons for number inputs. */
   @property({ attribute: 'without-spin-buttons', type: Boolean }) withoutSpinButtons = false;
 
+  /**
+   * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
+   * to place the form control outside of a form and associate it with the form that has this `id`. The form must be in
+   * the same document or shadow root for this to work.
+   */
+  @property({ reflect: true }) form = null;
+
   /** Makes the input a required field. */
   @property({ type: Boolean, reflect: true }) required = false;
 

packages/webawesome/src/components/radio/radio.ts

@@ -39,6 +39,11 @@ export default class WaRadio extends WebAwesomeFormAssociatedElement {
   /** @internal Used by radio group to force disable radios while preserving their original disabled state. */
   @state() forceDisabled = false;
 
+  /**
+   * The string pointing to a form's id.
+   */
+  @property({ reflect: true }) form: string | null = null;
+
   /** The radio's value. When selected, the radio group will receive this value. */
   @property({ reflect: true }) value: string;
 

packages/webawesome/src/components/select/select.ts

@@ -257,6 +257,13 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
    */
   @property({ attribute: 'with-hint', type: Boolean }) withHint = false;
 
+  /**
+   * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
+   * to place the form control outside of a form and associate it with the form that has this `id`. The form must be in
+   * the same document or shadow root for this to work.
+   */
+  @property({ reflect: true }) form = null;
+
   /** The select's required attribute. */
   @property({ type: Boolean, reflect: true }) required = false;
 

packages/webawesome/src/components/slider/slider.ts

@@ -167,6 +167,12 @@ export default class WaSlider extends WebAwesomeFormAssociatedElement {
   /** The starting value from which to draw the slider's fill, which is based on its current value. */
   @property({ attribute: 'indicator-offset', type: Number }) indicatorOffset: number;
 
+  /**
+   * The form to associate this control with. If omitted, the closest containing `<form>` will be used. The value of
+   * this attribute must be an ID of a form in the same document or shadow root.
+   */
+  @property({ reflect: true }) form = null;
+
   /** The minimum value allowed. */
   @property({ type: Number }) min: number = 0;
 
@@ -431,14 +437,8 @@ export default class WaSlider extends WebAwesomeFormAssociatedElement {
   /** Clamps a number to min/max while ensuring it's a valid step interval. */
   private clampAndRoundToStep(value: number) {
     const stepPrecision = (String(this.step).split('.')[1] || '').replace(/0+$/g, '').length;
-
-    // Ensure we're working with numbers (in case the user passes strings to the respective properties)
-    const step = Number(this.step);
-    const min = Number(this.min);
-    const max = Number(this.max);
-
-    value = Math.round(value / step) * step;
-    value = clamp(value, min, max);
+    value = Math.round(value / this.step) * this.step;
+    value = clamp(value, this.min, this.max);
 
     return parseFloat(value.toFixed(stepPrecision));
   }

packages/webawesome/src/components/switch/switch.ts

@@ -80,6 +80,13 @@ export default class WaSwitch extends WebAwesomeFormAssociatedElement {
   @property({ type: Boolean, attribute: 'checked', reflect: true }) defaultChecked: boolean =
     this.hasAttribute('checked');
 
+  /**
+   * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
+   * to place the form control outside of a form and associate it with the form that has this `id`. The form must be in
+   * the same document or shadow root for this to work.
+   */
+  @property({ reflect: true }) form = null;
+
   /** Makes the switch a required field. */
   @property({ type: Boolean, reflect: true }) required = false;
 

packages/webawesome/src/components/textarea/textarea.ts

@@ -107,6 +107,13 @@ export default class WaTextarea extends WebAwesomeFormAssociatedElement {
   /** Makes the textarea readonly. */
   @property({ type: Boolean, reflect: true }) readonly = false;
 
+  /**
+   * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
+   * to place the form control outside of a form and associate it with the form that has this `id`. The form must be in
+   * the same document or shadow root for this to work.
+   */
+  @property({ reflect: true }) form = null;
+
   /** Makes the textarea a required field. */
   @property({ type: Boolean, reflect: true }) required = false;
 

packages/webawesome/src/internal/webawesome-form-associated-element.ts

@@ -23,8 +23,7 @@ export interface WebAwesomeFormControl extends WebAwesomeElement {
   checked?: boolean;
   defaultSelected?: boolean;
   selected?: boolean;
-  get form(): HTMLFormElement | null;
-  set form(val: string);
+  form?: string | null;
 
   value?: unknown;
 
@@ -204,23 +203,6 @@ export class WebAwesomeFormAssociatedElement
     return this.internals.form;
   }
 
-  /**
-   * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
-   * to place the form control outside of a form and associate it with the form that has this `id`. The form must be in
-   * the same document or shadow root for this to work.
-   */
-  set form(val: string) {
-    if (val) {
-      this.setAttribute('form', val);
-    } else {
-      this.removeAttribute('form');
-    }
-  }
-
-  get form(): HTMLFormElement | null {
-    return this.internals.form;
-  }
-
   @property({ attribute: false, state: true, type: Object })
   get validity() {
     return this.internals.validity;