fixes #798

cspell.json

@@ -110,6 +110,7 @@
     "templating",
     "tera",
     "textareas",
+    "textfield",
     "transitionend",
     "Triaging",
     "turbolinks",

docs/resources/changelog.md

@@ -12,6 +12,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 - Added the `--sl-input-required-content` design token
 - Added the `required` attribute to `<sl-radio-group>` and fixed constraint validation logic to support custom validation
 - Added the `checked-icon` part to `<sl-menu-item>`
+- Added the `no-spin-buttons` attribute to `<sl-input type="number">` [#798](https://github.com/shoelace-style/shoelace/issues/798)
 - Fixed a bug where a duplicate clear button showed in Firefox [#791](https://github.com/shoelace-style/shoelace/issues/791)
 - Fixed a bug where setting `valueAsDate` or `valueAsNumber` too early on `<sl-input>` would throw an error [#796](https://github.com/shoelace-style/shoelace/issues/796)
 - Fixed a bug in `<sl-color-picker>` where empty values weren't properly supported [#797](https://github.com/shoelace-style/shoelace/issues/797)

docs/resources/contributing.md

@@ -204,7 +204,9 @@ Internally, each component uses the [BEM methodology](http://getbem.com/) for cl
 
 ### Boolean Props
 
-Boolean props should _always_ default to `false`, otherwise there's no way for the user to unset the, without JavaScript. To keep the API as friendly and consistent as possible, use a name like `noHeader` with a default value of `false` instead of `header` with a default value of `true`.
+Boolean props should _always_ default to `false`, otherwise there's no way for the user to unset them using only attributes. To keep the API as friendly and consistent as possible, use a property such as `noHeader` and a corresponding kebab-case attribute such as `no-header`.
+
+When naming boolean props that hide or disable things, prefix them with `no-`, e.g. `no-spin-buttons` and avoid using other verbs such as `hide-` and `disable-` for consistency.
 
 ### Conditional Slots
 

src/components/input/input.styles.ts

@@ -281,9 +281,20 @@ export default css`
     display: none;
   }
 
-  /** Hide Firefox's clear button on date and time inputs */
+  /* Hide Firefox's clear button on date and time inputs */
   .input--is-firefox input[type='date'],
   .input--is-firefox input[type='time'] {
     clip-path: inset(0 2em 0 0);
   }
+
+  /* Hide the built-in number spinner */
+  .input--no-spin-buttons input[type='number']::-webkit-outer-spin-button,
+  .input--no-spin-buttons input[type='number']::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    display: none;
+  }
+
+  .input--no-spin-buttons input[type='number'] {
+    -moz-appearance: textfield;
+  }
 `;

src/components/input/input.ts

@@ -95,6 +95,9 @@ export default class SlInput extends LitElement {
   /** Adds a password toggle button to password inputs. */
   @property({ attribute: 'toggle-password', type: Boolean }) togglePassword = false;
 
+  /** Hides the browser's built-in increment/decrement spin buttons for number inputs. */
+  @property({ attribute: 'no-spin-buttons', type: Boolean }) noSpinButtons = false;
+
   /** The input's placeholder text. */
   @property() placeholder: string;
 
@@ -348,6 +351,7 @@ export default class SlInput extends LitElement {
               'input--focused': this.hasFocus,
               'input--empty': !this.value,
               'input--invalid': this.invalid,
+              'input--no-spin-buttons': this.noSpinButtons,
 
               // It's currently impossible to hide Firefox's built-in clear icon when using <input type="date|time">, so
               // we need this check to apply a clip-path to hide it. I know, I know...user agent sniffing is nasty but