Use with- and without- consistently (#977)

* use with- and without- consistently

* fix test

* cleanup

* remove console

docs/_includes/search.njk

@@ -8,7 +8,7 @@
           type="search"
           appearance="filled"
           size="large"
-          clearable
+          with-clear
           placeholder="Search"
           autofocus
           autocomplete="off"

docs/_layouts/overview.njk

@@ -7,7 +7,7 @@ layout: page-outline
 {% endif %}
 
 <div id="block-filter">
-  <wa-input type="search" placeholder="Search {{ title }}" clearable autofocus>
+  <wa-input type="search" placeholder="Search {{ title }}" with-clear autofocus>
 	<wa-icon slot="prefix" name="search"></wa-icon>
   </wa-input>
 </div>

docs/_layouts/palette.njk

@@ -68,7 +68,7 @@
   <wa-icon name="sliders-simple" slot="icon" variant="regular"></wa-icon>
    This palette has been tweaked.
    <div class="wa-cluster wa-gap-xs">
-    <wa-tag v-for="tweakHumanReadable, param in tweaksHumanReadable" removable @wa-remove="reset(param)" v-content="tweakHumanReadable"></wa-tag>
+    <wa-tag v-for="tweakHumanReadable, param in tweaksHumanReadable" with-remove @wa-remove="reset(param)" v-content="tweakHumanReadable"></wa-tag>
    </div>
 
   <wa-button @click="reset()" appearance="outlined" variant="danger">

docs/_layouts/theme.njk

@@ -28,7 +28,7 @@ if (location.pathname.endsWith('/custom/') && !location.search) {
     <wa-tooltip for="what-is-remixing">Customize this theme by changing its colors and/or remixing it with design elements from other themes!</wa-tooltip>
   </h4>
 
-  <wa-select name="palette" label="Color palette" clearable v-model="theme.palette">
+  <wa-select name="palette" label="Color palette" with-clear v-model="theme.palette">
     <wa-icon name="swatchbook" slot="prefix" variant="regular"></wa-icon>
     <wa-option v-for="(palette, paletteId) in palettes" :label="palette.title" :value="paletteId === baseTheme.palette ? '' : paletteId">
       <palette-card :palette="paletteId" size="small">
@@ -42,7 +42,7 @@ if (location.pathname.endsWith('/custom/') && !location.search) {
   <color-select :model-value="computed.brand" @update:model-value="value => theme.brand = value" label="Brand color"
                 :values="hues"></color-select>
 
-  <wa-select name="colors" class="theme-colors-select" label="Color contrast from…" value="" clearable v-model="theme.colors">
+  <wa-select name="colors" class="theme-colors-select" label="Color contrast from…" value="" with-clear v-model="theme.colors">
     <wa-icon name="palette" slot="prefix" variant="regular"></wa-icon>
     <template v-for="(themeMeta, themeId) in themes">
       <wa-option v-if="themeId !== 'custom'" :label="themeMeta.title" :value="themeId === computed.colors ? '' : themeId">
@@ -55,7 +55,7 @@ if (location.pathname.endsWith('/custom/') && !location.search) {
     </template>
   </wa-select>
 
-  <wa-select name="typography" label="Typography from…" clearable v-model="theme.typography">
+  <wa-select name="typography" label="Typography from…" with-clear v-model="theme.typography">
     <wa-icon name="font-case" slot="prefix"></wa-icon>
 
     <wa-option v-for="(themeMeta, themeId) in themes" :label="themeMeta.title" :value="themeId === theme.base ? '' : themeId">

docs/docs/components/cheatsheet/index.njk

@@ -17,7 +17,7 @@ table code {
 
 <fieldset id="name_search_group">
 	<legend>Filter by name</legend>
-	<wa-input type=search clearable id="name_search"></wa-input>
+	<wa-input type="search" with-clear id="name_search"></wa-input>
 	<wa-checkbox id="name_search_i" checked>Case sensitive</wa-checkbox>
 	<wa-checkbox id="name_search_regexp">Regular expression</wa-checkbox>
 </fieldset>

docs/docs/components/color-picker.md

@@ -36,7 +36,7 @@ Use the `opacity` attribute to enable the opacity slider. When this is enabled,
 
 Set the color picker's format with the `format` attribute. Valid options include `hex`, `rgb`, `hsl`, and `hsv`. Note that the color picker's input will accept any parsable format (including CSS color names) regardless of this option.
 
-To prevent users from toggling the format themselves, add the `no-format-toggle` attribute.
+To prevent users from toggling the format themselves, add the `without-format-toggle` attribute.
 
 ```html {.example}
 <div class="wa-grid" style="--min-column-size: 12ch;">

docs/docs/components/input.md

@@ -43,10 +43,10 @@ Use the `placeholder` attribute to add a placeholder.
 
 ### Clearable
 
-Add the `clearable` attribute to add a clear button when the input has content.
+Add the `with-clear` attribute to add a clear button when the input has content.
 
 ```html {.example}
-<wa-input placeholder="Clearable" clearable></wa-input>
+<wa-input placeholder="Clearable" with-clear></wa-input>
 ```
 
 ### Toggle Password

docs/docs/components/qr-code.md

@@ -12,7 +12,7 @@ QR codes are useful for providing small pieces of information to users who can q
   <wa-qr-code value="https://shoelace.style/" label="Scan this code to visit Web Awesome on the web!"></wa-qr-code>
   <br />
 
-  <wa-input maxlength="255" clearable label="Value">
+  <wa-input maxlength="255" with-clear label="Value">
     <wa-icon slot="prefix" name="link"></wa-icon>
   </wa-input>
 </div>

docs/docs/components/select.md

@@ -61,10 +61,10 @@ Use the `placeholder` attribute to add a placeholder.
 
 ### Clearable
 
-Use the `clearable` attribute to make the control clearable. The clear button only appears when an option is selected.
+Use the `with-clear` attribute to make the control clearable. The clear button only appears when an option is selected.
 
 ```html {.example}
-<wa-select clearable value="option-1">
+<wa-select with-clear value="option-1">
   <wa-option value="option-1">Option 1</wa-option>
   <wa-option value="option-2">Option 2</wa-option>
   <wa-option value="option-3">Option 3</wa-option>
@@ -109,10 +109,10 @@ Use the `disabled` attribute to disable a select.
 
 ### Multiple
 
-To allow multiple options to be selected, use the `multiple` attribute. It's a good practice to use `clearable` when this option is enabled. To set multiple values at once, set `value` to a space-delimited list of values.
+To allow multiple options to be selected, use the `multiple` attribute. It's a good practice to use `with-clear` when this option is enabled. To set multiple values at once, set `value` to a space-delimited list of values.
 
 ```html {.example}
-<wa-select label="Select a Few" value="option-1 option-2 option-3" multiple clearable>
+<wa-select label="Select a Few" value="option-1 option-2 option-3" multiple with-clear>
   <wa-option value="option-1">Option 1</wa-option>
   <wa-option value="option-2">Option 2</wa-option>
   <wa-option value="option-3">Option 3</wa-option>
@@ -142,7 +142,7 @@ Use the `value` attribute to set the initial selection.
 When using `multiple`, the `value` _attribute_ uses space-delimited values to select more than one option. Because of this, `<wa-option>` values cannot contain spaces. If you're accessing the `value` _property_ through Javascript, it will be an array.
 
 ```html {.example}
-<wa-select value="option-1 option-2" multiple clearable>
+<wa-select value="option-1 option-2" multiple with-clear>
   <wa-option value="option-1">Option 1</wa-option>
   <wa-option value="option-2">Option 2</wa-option>
   <wa-option value="option-3">Option 3</wa-option>
@@ -213,21 +213,21 @@ The preferred placement of the select's listbox can be set with the `placement`
 Use the `prefix` slot to prepend an icon to the control.
 
 ```html {.example}
-<wa-select placeholder="Small" size="small" clearable>
+<wa-select placeholder="Small" size="small" with-clear>
   <wa-icon slot="prefix" name="house" variant="solid"></wa-icon>
   <wa-option value="option-1">Option 1</wa-option>
   <wa-option value="option-2">Option 2</wa-option>
   <wa-option value="option-3">Option 3</wa-option>
 </wa-select>
 <br />
-<wa-select placeholder="Medium" size="medium" clearable>
+<wa-select placeholder="Medium" size="medium" with-clear>
   <wa-icon slot="prefix" name="house" variant="solid"></wa-icon>
   <wa-option value="option-1">Option 1</wa-option>
   <wa-option value="option-2">Option 2</wa-option>
   <wa-option value="option-3">Option 3</wa-option>
 </wa-select>
 <br />
-<wa-select placeholder="Large" size="large" clearable>
+<wa-select placeholder="Large" size="large" with-clear>
   <wa-icon slot="prefix" name="house" variant="solid"></wa-icon>
   <wa-option value="option-1">Option 1</wa-option>
   <wa-option value="option-2">Option 2</wa-option>
@@ -240,21 +240,21 @@ Use the `prefix` slot to prepend an icon to the control.
 Use the `suffix` slot to append an icon to the control.
 
 ```html {.example}
-<wa-select placeholder="Small" size="small" clearable>
+<wa-select placeholder="Small" size="small" with-clear>
   <wa-icon name="house" slot="suffix"></wa-icon>
   <wa-option value="option-1">Option 1</wa-option>
   <wa-option value="option-2">Option 2</wa-option>
   <wa-option value="option-3">Option 3</wa-option>
 </wa-select>
 <br />
-<wa-select placeholder="Medium" size="medium" clearable>
+<wa-select placeholder="Medium" size="medium" with-clear>
   <wa-icon name="house" slot="suffix"></wa-icon>
   <wa-option value="option-1">Option 1</wa-option>
   <wa-option value="option-2">Option 2</wa-option>
   <wa-option value="option-3">Option 3</wa-option>
 </wa-select>
 <br />
-<wa-select placeholder="Large" size="large" clearable>
+<wa-select placeholder="Large" size="large" with-clear>
   <wa-icon name="house" slot="suffix"></wa-icon>
   <wa-option value="option-1">Option 1</wa-option>
   <wa-option value="option-2">Option 2</wa-option>
@@ -273,7 +273,7 @@ Remember that custom tags are rendered in a shadow root. To style them, you can
   placeholder="Select one"
   value="email phone"
   multiple
-  clearable
+  with-clear
   class="custom-tag"
 >
   <wa-option value="email">
@@ -301,7 +301,7 @@ Remember that custom tags are rendered in a shadow root. To style them, you can
 
     // You can return a string, a Lit Template, or an HTMLElement here
     return `
-      <wa-tag removable>
+      <wa-tag with-remove>
         <wa-icon name="${name}" style="padding-inline-end: .5rem;"></wa-icon>
         ${option.label}
       </wa-tag>

docs/docs/components/tag.md

@@ -78,13 +78,13 @@ Use the `pill` attribute to give tabs rounded edges.
 
 ### Removable
 
-Use the `removable` attribute to add a remove button to the tag.
+Use the `with-remove` attribute to add a remove button to the tag.
 
 ```html {.example}
 <div class="tags-removable">
-  <wa-tag size="small" removable>Small</wa-tag>
-  <wa-tag size="medium" removable>Medium</wa-tag>
-  <wa-tag size="large" removable>Large</wa-tag>
+  <wa-tag size="small" with-remove>Small</wa-tag>
+  <wa-tag size="medium" with-remove>Medium</wa-tag>
+  <wa-tag size="large" with-remove>Large</wa-tag>
 </div>
 
 <script>

docs/docs/experimental/themer.md

@@ -670,7 +670,7 @@ hasOutline: false
 <wa-dialog id="icon-chooser" label="Browse Icons">
   <div style="display: grid; grid-template-rows: minmax(0, auto) minmax(0, 1fr); height: 100%; gap: 1rem;">
     <div style="display: flex; gap: 1.25rem;">
-      <wa-input name="icon-search" autofocus placeholder="Search Icons" clearable style="flex: 1 1 auto;">
+      <wa-input name="icon-search" autofocus placeholder="Search Icons" with-clear style="flex: 1 1 auto;">
         <wa-icon slot="prefix" name="magnifying-glass"></wa-icon>
       </wa-input>
       <wa-select name="icon-variant" value="solid" style="flex: 0 1 auto;">

docs/docs/form-controls.md

@@ -28,7 +28,7 @@ To make a field required, use the `required` attribute. Required fields will aut
 <form class="input-validation-required">
   <wa-input name="name" label="Name" required></wa-input>
   <br />
-  <wa-select label="Favorite Animal" clearable required>
+  <wa-select label="Favorite Animal" with-clear required>
     <wa-option value="birds">Birds</wa-option>
     <wa-option value="cats">Cats</wa-option>
     <wa-option value="dogs">Dogs</wa-option>

docs/docs/resources/changelog.md

@@ -18,6 +18,14 @@ During the alpha period, things might break! We take breaking changes very serio
 - 🚨 BREAKING: Renamed the `classic` theme to `shoelace`
 - 🚨 BREAKING: Renamed `pulse` attribute in `<wa-badge>` to `attention="pulse"` and added `attention="bounce"` [issue:#940]
 - 🚨 BREAKING: Renamed the `vertical` attribute to `orientation="vertical"` in `<wa-split-panel>` and `<wa-divider>` to align with other components and the platform [issue:674]
+- 🚨 BREAKING: Renamed certain boolean attributes to be more consistent using the `with-*` and `without-*` pattern:
+  - `<wa-color-picker no-format-toggle>` => `<wa-color-picker without-format-toggle>`
+  - `<wa-format-number no-grouping>` => `<wa-format-number without-grouping>`
+  - `<wa-input no-spin-buttons>` => `<wa-input without-spin-buttons>`
+  - `<wa-input clearable>` => `<wa-input with-clear>`
+  - `<wa-select clearable>` => `<wa-select with-clear>`
+  - `<wa-tab-group no-scroll-controls>` => `<wa-tab-group without-scroll-controls>`
+  - `<wa-tag removable>` => `<wa-tag with-remove>`
 - Added a `min-block-size` to `<wa-divider orientation="vertical">` to ensure the divider is visible regardless of container height [issue:675]
 - Fixed a bug in `<wa-radio-group>` that caused radios to uncheck when assigning a numeric value [issue:924]
 - Fixed `<wa-button-group>` so dividers properly show between buttons

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

@@ -202,7 +202,7 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
   @property({ reflect: true, initial: 'medium' }) size: 'small' | 'medium' | 'large' | 'inherit' = 'inherit';
 
   /** Removes the button that lets users toggle between format.   */
-  @property({ attribute: 'no-format-toggle', type: Boolean }) noFormatToggle = false;
+  @property({ attribute: 'without-format-toggle', type: Boolean }) withoutFormatToggle = false;
 
   /** The name of the form control, submitted as a name/value pair with form data. */
   @property({ reflect: true }) name: string | null = null;
@@ -1003,7 +1003,7 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
           ></wa-input>
 
           <wa-button-group>
-            ${!this.noFormatToggle
+            ${!this.withoutFormatToggle
               ? html`
                   <wa-button
                     part="format-button"

src/components/format-number/format-number.test.ts

@@ -13,7 +13,7 @@ describe('<wa-format-number>', () => {
 
           expect(el.lang).to.be.undefined;
           expect(el.type).to.equal('decimal');
-          expect(el.noGrouping).to.be.false;
+          expect(el.withoutGrouping).to.be.false;
           expect(el.currency).to.equal('USD');
           expect(el.currencyDisplay).to.equal('symbol');
           expect(el.minimumIntegerDigits).to.be.undefined;
@@ -48,10 +48,10 @@ describe('<wa-format-number>', () => {
         });
       });
 
-      describe('noGrouping property', () => {
+      describe('withoutGrouping property', () => {
         it(`number has correct grouping format: no grouping`, async () => {
           const el = await fixture<WaFormatNumber>(html`
-            <wa-format-number value="1000" no-grouping></wa-format-number>
+            <wa-format-number value="1000" without-grouping></wa-format-number>
           `);
           const expected = new Intl.NumberFormat('en-US', { useGrouping: false }).format(1000);
           expect(el.shadowRoot?.textContent).to.equal(expected);

src/components/format-number/format-number.ts

@@ -23,7 +23,7 @@ export default class WaFormatNumber extends WebAwesomeElement {
   @property() type: 'currency' | 'decimal' | 'percent' = 'decimal';
 
   /** Turns off grouping separators. */
-  @property({ attribute: 'no-grouping', type: Boolean }) noGrouping = false;
+  @property({ attribute: 'without-grouping', type: Boolean }) withoutGrouping = false;
 
   /** The [ISO 4217](https://en.wikipedia.org/wiki/ISO_4217) currency code to use when formatting. */
   @property() currency = 'USD';
@@ -55,7 +55,7 @@ export default class WaFormatNumber extends WebAwesomeElement {
       style: this.type,
       currency: this.currency,
       currencyDisplay: this.currencyDisplay,
-      useGrouping: !this.noGrouping,
+      useGrouping: !this.withoutGrouping,
       minimumIntegerDigits: this.minimumIntegerDigits,
       minimumFractionDigits: this.minimumFractionDigits,
       maximumFractionDigits: this.maximumFractionDigits,

src/components/input/input.css

@@ -98,7 +98,7 @@ input:focus {
 }
 
 /* Hide the built-in number spinner */
-:host([no-spin-buttons]) input[type='number'] {
+:host([without-spin-buttons]) input[type='number'] {
   -moz-appearance: textfield;
 
   &::-webkit-outer-spin-button,

src/components/input/input.test.ts

@@ -32,10 +32,10 @@ describe('<wa-input>', () => {
         expect(el.pill).to.equal(false);
         expect(el.label).to.equal('');
         expect(el.hint).to.equal('');
-        expect(el.clearable).to.equal(false);
+        expect(el.withClear).to.equal(false);
         expect(el.passwordToggle).to.equal(false);
         expect(el.passwordVisible).to.equal(false);
-        expect(el.noSpinButtons).to.equal(false);
+        expect(el.withoutSpinButtons).to.equal(false);
         expect(el.placeholder).to.equal('');
         expect(el.disabled).to.equal(false);
         expect(el.readonly).to.equal(false);

src/components/input/input.ts

@@ -130,7 +130,7 @@ export default class WaInput extends WebAwesomeFormAssociatedElement {
   @property({ attribute: 'hint' }) hint = '';
 
   /** Adds a clear button when the input is not empty. */
-  @property({ type: Boolean }) clearable = false;
+  @property({ attribute: 'with-clear', type: Boolean }) withClear = false;
 
   /** Placeholder text to show as a hint when the input is empty. */
   @property() placeholder = '';
@@ -145,7 +145,7 @@ export default class WaInput extends WebAwesomeFormAssociatedElement {
   @property({ attribute: 'password-visible', type: Boolean }) passwordVisible = false;
 
   /** Hides the browser's built-in increment/decrement spin buttons for number inputs. */
-  @property({ attribute: 'no-spin-buttons', type: Boolean }) noSpinButtons = false;
+  @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
@@ -388,7 +388,7 @@ export default class WaInput extends WebAwesomeFormAssociatedElement {
     const hasHintSlot = this.hasUpdated ? this.hasSlotController.test('hint') : this.withHint;
     const hasLabel = this.label ? true : !!hasLabelSlot;
     const hasHint = this.hint ? true : !!hasHintSlot;
-    const hasClearIcon = this.clearable && !this.disabled && !this.readonly;
+    const hasClearIcon = this.withClear && !this.disabled && !this.readonly;
     const isClearIconVisible =
       // prevents hydration mismatch errors.
       (isServer || this.hasUpdated) &&

src/components/select/select.test.ts

@@ -557,7 +557,7 @@ describe('<wa-select>', () => {
 
       it('should emit wa-clear when the clear button is clicked', async () => {
         const el = await fixture<WaSelect>(html`
-          <wa-select value="option-1" clearable>
+          <wa-select value="option-1" with-clear>
             <wa-option value="option-1">Option 1</wa-option>
             <wa-option value="option-2">Option 2</wa-option>
             <wa-option value="option-3">Option 3</wa-option>

src/components/select/select.ts

@@ -222,7 +222,7 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
   @property({ type: Boolean }) disabled = false;
 
   /** Adds a clear button when the select is not empty. */
-  @property({ type: Boolean }) clearable = false;
+  @property({ attribute: 'with-clear', type: Boolean }) withClear = false;
 
   /**
    * Indicates whether or not the select is open. You can toggle this attribute to show and hide the menu, or you can
@@ -286,7 +286,7 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
           "
           ?pill=${this.pill}
           size=${this.size}
-          removable
+          with-remove
         >
           ${option.label}
         </wa-tag>
@@ -855,7 +855,7 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
     const hasLabel = this.label ? true : !!hasLabelSlot;
     const hasHint = this.hint ? true : !!hasHintSlot;
     const hasClearIcon =
-      (this.hasUpdated || isServer) && this.clearable && !this.disabled && this.value && this.value.length > 0;
+      (this.hasUpdated || isServer) && this.withClear && !this.disabled && this.value && this.value.length > 0;
     const isPlaceholderVisible = Boolean(this.placeholder && (!this.value || this.value.length === 0));
 
     return html`

src/components/tab-group/tab-group.test.ts

@@ -244,7 +244,7 @@ describe('<wa-tab-group>', () => {
           // @TODO: Investigate why this fails with hydratedFixture (generateTabs()) [Konnor]
           // https://github.com/lit/lit/issues/4739
           const tabGroup = await clientFixture<WaTabGroup>(html`<wa-tab-group> ${generateTabs(30)} </wa-tab-group>`);
-          tabGroup.noScrollControls = true;
+          tabGroup.withoutScrollControls = true;
 
           await aTimeout(0);
 

src/components/tab-group/tab-group.ts

@@ -75,7 +75,7 @@ export default class WaTabGroup extends WebAwesomeElement {
   @property() activation: 'auto' | 'manual' = 'auto';
 
   /** Disables the scroll arrows that appear when tabs overflow. */
-  @property({ attribute: 'no-scroll-controls', type: Boolean }) noScrollControls = false;
+  @property({ attribute: 'without-scroll-controls', type: Boolean }) withoutScrollControls = false;
 
   connectedCallback() {
     super.connectedCallback();
@@ -365,9 +365,9 @@ export default class WaTabGroup extends WebAwesomeElement {
     }
   }
 
-  @watch('noScrollControls', { waitUntilFirstUpdate: true })
+  @watch('withoutScrollControls', { waitUntilFirstUpdate: true })
   updateScrollControls() {
-    if (this.noScrollControls) {
+    if (this.withoutScrollControls) {
       this.hasScrollControls = false;
     } else {
       // In most cases, we can compare scrollWidth to clientWidth to determine if scroll controls should show. However,

src/components/tag/tag.test.ts

@@ -30,16 +30,16 @@ describe('<wa-tag>', () => {
       });
 
       it('should set removable by attribute', async () => {
-        const el = await fixture<WaTag>(html` <wa-tag removable>Test</wa-tag> `);
+        const el = await fixture<WaTag>(html` <wa-tag with-remove>Test</wa-tag> `);
         const removeButton = el.shadowRoot!.querySelector('wa-icon-button');
 
-        expect(el.removable).to.be.true;
+        expect(el.withRemove).to.be.true;
         expect(removeButton).to.exist;
       });
 
       describe('removable', () => {
         it('should emit remove event when remove button clicked', async () => {
-          const el = await fixture<WaTag>(html` <wa-tag removable>Test</wa-tag> `);
+          const el = await fixture<WaTag>(html` <wa-tag with-remove>Test</wa-tag> `);
           const removeButton = el.shadowRoot!.querySelector('wa-icon-button');
           const spy = sinon.spy();
 

src/components/tag/tag.ts

@@ -52,7 +52,7 @@ export default class WaTag extends WebAwesomeElement {
   @property({ type: Boolean, reflect: true }) pill = false;
 
   /** Makes the tag removable and shows a remove button. */
-  @property({ type: Boolean }) removable = false;
+  @property({ attribute: 'with-remove', type: Boolean }) withRemove = false;
 
   private handleRemoveClick() {
     this.dispatchEvent(new WaRemoveEvent());
@@ -62,7 +62,7 @@ export default class WaTag extends WebAwesomeElement {
     return html`
       <slot part="content" class="content"></slot>
 
-      ${this.removable
+      ${this.withRemove
         ? html`
             <wa-icon-button
               part="remove-button"