feat(dev-validation): apply shared validation helpers across all Gen2 components

2nd-gen/packages/core/components/accordion/Accordion.base.ts

@@ -16,8 +16,10 @@ import { property } from 'lit/decorators.js';
 import { LiveSelectionController } from '@adobe/spectrum-wc-core/controllers/index.js';
 import { SpectrumElement } from '@adobe/spectrum-wc-core/element/index.js';
 import { SizedMixin } from '@adobe/spectrum-wc-core/mixins/index.js';
+import { validateEnum } from '@adobe/spectrum-wc-core/utils/index.js';
 
 import {
+  ACCORDION_DENSITIES,
   ACCORDION_VALID_SIZES,
   type AccordionDensity,
   type AccordionHeadingLevel,
@@ -132,6 +134,14 @@ export abstract class AccordionBase extends SizedMixin(SpectrumElement, {
   }
 
   protected override update(changedProperties: PropertyValues): void {
+    if (changedProperties.has('density')) {
+      validateEnum(this, {
+        prop: 'density',
+        value: this.density,
+        valid: ACCORDION_DENSITIES,
+        url: 'https://spectrum-web-components.adobe.com/?path=/docs/components-accordion--docs',
+      });
+    }
     if (changedProperties.has('level')) {
       const clamped = Math.min(
         6,

2nd-gen/packages/core/components/alert-banner/AlertBanner.base.ts

@@ -13,6 +13,7 @@ import { CSSResultArray, PropertyValues, TemplateResult } from 'lit';
 import { property } from 'lit/decorators.js';
 
 import { SpectrumElement } from '@adobe/spectrum-wc-core/element/index.js';
+import { validateEnum } from '@adobe/spectrum-wc-core/utils/index.js';
 
 import {
   ALERT_BANNER_VALID_VARIANTS,
@@ -67,16 +68,12 @@ export abstract class AlertBannerBase extends SpectrumElement {
       this.removeAttribute('variant');
       this._variant = '';
 
-      if (window.__swc?.DEBUG) {
-        window.__swc.warn(
-          this,
-          `<${this.localName}> element expects the "variant" attribute to be one of the following:`,
-          'https://opensource.adobe.com/spectrum-web-components/components/alert-banner/#variants',
-          {
-            issues: [...ALERT_BANNER_VALID_VARIANTS],
-          }
-        );
-      }
+      validateEnum(this, {
+        prop: 'variant',
+        value: variant,
+        valid: ALERT_BANNER_VALID_VARIANTS,
+        url: 'https://spectrum-web-components.adobe.com/?path=/docs/components-alert-banner--docs',
+      });
     }
     this.requestUpdate('variant', oldValue);
   }

2nd-gen/packages/core/components/asset/Asset.base.ts

@@ -14,6 +14,7 @@ import { PropertyValues } from 'lit';
 import { property } from 'lit/decorators.js';
 
 import { SpectrumElement } from '@adobe/spectrum-wc-core/element/index.js';
+import { validateEnum } from '@adobe/spectrum-wc-core/utils/index.js';
 
 import { ASSET_VARIANTS, type AssetVariant } from './Asset.types.js';
 
@@ -53,21 +54,14 @@ export abstract class AssetBase extends SpectrumElement {
 
   protected override updated(changes: PropertyValues): void {
     super.updated(changes);
-    if (window.__swc?.DEBUG) {
+    if (typeof this.variant !== 'undefined') {
       const constructor = this.constructor as typeof AssetBase;
-      if (
-        typeof this.variant !== 'undefined' &&
-        !constructor.VARIANTS.includes(this.variant)
-      ) {
-        window.__swc.warn(
-          this,
-          `<${this.localName}> element expects the "variant" attribute to be one of the following:`,
-          'https://opensource.adobe.com/spectrum-web-components/components/asset/',
-          {
-            issues: [...constructor.VARIANTS],
-          }
-        );
-      }
+      validateEnum(this, {
+        prop: 'variant',
+        value: this.variant,
+        valid: constructor.VARIANTS,
+        url: 'https://spectrum-web-components.adobe.com/?path=/docs/components-asset--docs',
+      });
     }
   }
 }

2nd-gen/packages/core/components/avatar/Avatar.base.ts

@@ -13,6 +13,7 @@ import { PropertyValues } from 'lit';
 import { property } from 'lit/decorators.js';
 
 import { SpectrumElement } from '@adobe/spectrum-wc-core/element/index.js';
+import { warnIf } from '@adobe/spectrum-wc-core/utils/index.js';
 
 import {
   AVATAR_DEFAULT_SIZE,
@@ -73,12 +74,21 @@ export abstract class AvatarBase extends SpectrumElement {
   }
 
   public set size(value: AvatarSize) {
-    const validSize = (AVATAR_VALID_SIZES as readonly number[]).includes(
+    const isValid = (AVATAR_VALID_SIZES as readonly number[]).includes(
       Number(value)
-    )
+    );
+    const validSize = isValid
       ? (Number(value) as AvatarSize)
       : AVATAR_DEFAULT_SIZE;
 
+    warnIf(
+      this,
+      !isValid,
+      `<${this.localName}> expects "size" to be one of: ${AVATAR_VALID_SIZES.join(', ')}. Received "${value}".`,
+      'https://spectrum-web-components.adobe.com/?path=/docs/components-avatar--docs',
+      { issues: [`size="${value}"`] }
+    );
+
     if (this._size === validSize) {
       return;
     }
@@ -126,17 +136,15 @@ export abstract class AvatarBase extends SpectrumElement {
       this.setAttribute('size', String(this.size));
     }
     this._syncAriaHidden();
-    if (window.__swc?.DEBUG) {
-      this._warnMissingAlt();
-    }
+    this._warnMissingAlt();
   }
 
   protected override updated(changes: PropertyValues): void {
     super.updated(changes);
     if (changes.has('decorative')) {
       this._syncAriaHidden();
     }
-    if (changes.has('alt') && window.__swc?.DEBUG) {
+    if (changes.has('alt')) {
       this._warnMissingAlt();
     }
   }
@@ -150,19 +158,18 @@ export abstract class AvatarBase extends SpectrumElement {
   }
 
   private _warnMissingAlt(): void {
-    if (this.alt === undefined && !this.decorative) {
-      window.__swc?.warn(
-        this,
-        `<${this.localName}> is missing an \`alt\` attribute. Provide a text description or pass \`alt=""\` and mark it as \`decorative\`.`,
-        'https://opensource.adobe.com/spectrum-web-components/components/avatar/#accessibility',
-        {
-          type: 'accessibility',
-          issues: [
-            'Provide an `alt` attribute with meaningful alternative text, or',
-            'Set `alt=""` and mark the image as `decorative` (hidden from screen readers).',
-          ],
-        }
-      );
-    }
+    warnIf(
+      this,
+      this.alt === undefined && !this.decorative,
+      `<${this.localName}> is missing an \`alt\` attribute. Provide a text description or pass \`alt=""\` and mark it as \`decorative\`.`,
+      'https://spectrum-web-components.adobe.com/?path=/docs/components-avatar--docs',
+      {
+        type: 'accessibility',
+        issues: [
+          'Provide an `alt` attribute with meaningful alternative text, or',
+          'Set `alt=""` and mark the image as `decorative` (hidden from screen readers).',
+        ],
+      }
+    );
   }
 }

2nd-gen/packages/core/components/badge/Badge.base.ts

@@ -16,6 +16,7 @@ import { SlotPresenceController } from '@adobe/spectrum-wc-core/controllers/slot
 import { SlotTextController } from '@adobe/spectrum-wc-core/controllers/slot-text-controller/index.js';
 import { SpectrumElement } from '@adobe/spectrum-wc-core/element/index.js';
 import { SizedMixin } from '@adobe/spectrum-wc-core/mixins/index.js';
+import { validateEnum, warnIf } from '@adobe/spectrum-wc-core/utils/index.js';
 
 import {
   BADGE_VALID_SIZES,
@@ -170,34 +171,23 @@ export abstract class BadgeBase extends SizedMixin(SpectrumElement, {
   }
 
   protected override update(changedProperties: PropertyValues): void {
-    if (window.__swc?.DEBUG) {
-      const constructor = this.constructor as typeof BadgeBase;
-      if (!constructor.VARIANTS.includes(this.variant)) {
-        window.__swc.warn(
-          this,
-          `<${this.localName}> element expects the "variant" attribute to be one of the following:`,
-          'https://opensource.adobe.com/spectrum-web-components/components/badge/#variants',
-          {
-            issues: [...constructor.VARIANTS],
-          }
-        );
-      }
-      // Check outline property if it exists (S2 only)
-      if (
-        'outline' in this &&
+    const constructor = this.constructor as typeof BadgeBase;
+    validateEnum(this, {
+      prop: 'variant',
+      value: this.variant,
+      valid: constructor.VARIANTS,
+      url: 'https://spectrum-web-components.adobe.com/?path=/docs/components-badge--docs',
+    });
+    // Check outline property if it exists (S2 only)
+    warnIf(
+      this,
+      'outline' in this &&
         (this as { outline: boolean }).outline === true &&
-        !constructor.VARIANTS_SEMANTIC.includes(this.variant)
-      ) {
-        window.__swc.warn(
-          this,
-          `<${this.localName}> element only supports the outline styling if the variant is a semantic color variant.`,
-          'https://opensource.adobe.com/spectrum-web-components/components/badge/#variants',
-          {
-            issues: [...constructor.VARIANTS_SEMANTIC],
-          }
-        );
-      }
-    }
+        !constructor.VARIANTS_SEMANTIC.includes(this.variant),
+      `<${this.localName}> element only supports the outline styling if the variant is a semantic color variant.`,
+      'https://spectrum-web-components.adobe.com/?path=/docs/components-badge--docs',
+      { issues: [...constructor.VARIANTS_SEMANTIC] }
+    );
     super.update(changedProperties);
   }
 }

2nd-gen/packages/core/components/button-group/ButtonGroup.base.ts

@@ -16,6 +16,7 @@ import { property, queryAssignedElements } from 'lit/decorators.js';
 import type { ButtonBase } from '@adobe/spectrum-wc-core/components/button';
 import { SpectrumElement } from '@adobe/spectrum-wc-core/element/index.js';
 import { SizedMixin } from '@adobe/spectrum-wc-core/mixins/index.js';
+import { validateEnum } from '@adobe/spectrum-wc-core/utils/index.js';
 
 import { SlotAttributePropagationController } from '../../controllers/slot-attribute-propagation-controller/index.js';
 import {
@@ -122,25 +123,19 @@ export abstract class ButtonGroupBase extends SizedMixin(SpectrumElement, {
   }
 
   protected override update(changedProperties: PropertyValues): void {
-    if (window.__swc?.DEBUG) {
-      const constructor = this.constructor as typeof ButtonGroupBase;
-      if (!constructor.ORIENTATIONS.includes(this.orientation)) {
-        window.__swc.warn(
-          this,
-          `<${this.localName}> element expects the "orientation" attribute to be one of the following:`,
-          'https://opensource.adobe.com/spectrum-web-components/components/button-group/',
-          { issues: [...constructor.ORIENTATIONS] }
-        );
-      }
-      if (!constructor.ALIGNMENTS.includes(this.align)) {
-        window.__swc.warn(
-          this,
-          `<${this.localName}> element expects the "align" attribute to be one of the following:`,
-          'https://opensource.adobe.com/spectrum-web-components/components/button-group/',
-          { issues: [...constructor.ALIGNMENTS] }
-        );
-      }
-    }
+    const constructor = this.constructor as typeof ButtonGroupBase;
+    validateEnum(this, {
+      prop: 'orientation',
+      value: this.orientation,
+      valid: constructor.ORIENTATIONS,
+      url: 'https://spectrum-web-components.adobe.com/?path=/docs/components-button-group--docs',
+    });
+    validateEnum(this, {
+      prop: 'align',
+      value: this.align,
+      valid: constructor.ALIGNMENTS,
+      url: 'https://spectrum-web-components.adobe.com/?path=/docs/components-button-group--docs',
+    });
     super.update(changedProperties);
   }
 

2nd-gen/packages/core/components/button/Button.base.ts

@@ -17,6 +17,7 @@ import { SlotPresenceController } from '@adobe/spectrum-wc-core/controllers/slot
 import { SlotTextController } from '@adobe/spectrum-wc-core/controllers/slot-text-controller/index.js';
 import { SpectrumElement } from '@adobe/spectrum-wc-core/element/index.js';
 import { SizedMixin } from '@adobe/spectrum-wc-core/mixins/index.js';
+import { warnIf } from '@adobe/spectrum-wc-core/utils/index.js';
 
 import { BUTTON_VALID_SIZES, type ButtonSize } from './Button.types.js';
 
@@ -140,15 +141,12 @@ export abstract class ButtonBase extends SizedMixin(SpectrumElement, {
 
   protected override update(changedProperties: PropertyValues): void {
     super.update(changedProperties);
-    if (window.__swc?.DEBUG) {
-      if (this.hasIcon && !this.hasLabel && !this.accessibleLabel) {
-        window.__swc.warn(
-          this,
-          `<${this.localName}> with an icon and no label must have an "accessible-label" attribute to be accessible.`,
-          'https://opensource.adobe.com/spectrum-web-components/components/button/#icon-only',
-          { issues: ['accessible-label'] }
-        );
-      }
-    }
+    warnIf(
+      this,
+      this.hasIcon && !this.hasLabel && !this.accessibleLabel,
+      `<${this.localName}> with an icon and no label must have an "accessible-label" attribute to be accessible.`,
+      'https://spectrum-web-components.adobe.com/?path=/docs/components-button--docs',
+      { type: 'accessibility', issues: ['accessible-label'] }
+    );
   }
 }

2nd-gen/packages/core/components/card/Card.base.ts

@@ -15,6 +15,7 @@ import { property } from 'lit/decorators.js';
 
 import { SpectrumElement } from '@adobe/spectrum-wc-core/element/index.js';
 import { SizedMixin } from '@adobe/spectrum-wc-core/mixins/index.js';
+import { validateEnum, warnIf } from '@adobe/spectrum-wc-core/utils/index.js';
 
 import {
   CARD_DENSITIES,
@@ -136,46 +137,35 @@ export abstract class CardBase extends SizedMixin(SpectrumElement, {
       }
     }
 
-    if (window.__swc?.DEBUG) {
-      const { VARIANTS, DENSITIES } = this.constructor as typeof CardBase;
+    const { VARIANTS, DENSITIES } = this.constructor as typeof CardBase;
 
-      if (
-        changedProperties.has('variant') &&
-        !VARIANTS.includes(this.variant)
-      ) {
-        window.__swc.warn(
-          this,
-          `<${this.localName}> received an invalid "variant" value of "${this.variant}". Valid values are ${VARIANTS.join(', ')}.`,
-          'https://opensource.adobe.com/spectrum-web-components/components/card/',
-          { issues: [`variant="${this.variant}"`] }
-        );
-      }
+    if (changedProperties.has('variant')) {
+      validateEnum(this, {
+        prop: 'variant',
+        value: this.variant,
+        valid: VARIANTS,
+        url: 'https://spectrum-web-components.adobe.com/?path=/docs/components-card--docs',
+      });
+    }
 
-      if (
-        changedProperties.has('density') &&
-        !DENSITIES.includes(this.density)
-      ) {
-        window.__swc.warn(
-          this,
-          `<${this.localName}> received an invalid "density" value of "${this.density}". Valid values are ${DENSITIES.join(', ')}.`,
-          'https://opensource.adobe.com/spectrum-web-components/components/card/',
-          { issues: [`density="${this.density}"`] }
-        );
-      }
+    if (changedProperties.has('density')) {
+      validateEnum(this, {
+        prop: 'density',
+        value: this.density,
+        valid: DENSITIES,
+        url: 'https://spectrum-web-components.adobe.com/?path=/docs/components-card--docs',
+      });
+    }
 
-      if (
-        changedProperties.has('titleAsLink') &&
+    warnIf(
+      this,
+      changedProperties.has('titleAsLink') &&
         this.titleAsLink &&
-        !this.getTitleLinkElement()
-      ) {
-        window.__swc.warn(
-          this,
-          `<${this.localName}> has "title-as-link" set but no link element was found in the "title" slot.`,
-          'https://opensource.adobe.com/spectrum-web-components/components/card/',
-          { issues: ['title-as-link'] }
-        );
-      }
-    }
+        !this.getTitleLinkElement(),
+      `<${this.localName}> has "title-as-link" set but no link element was found in the "title" slot.`,
+      'https://spectrum-web-components.adobe.com/?path=/docs/components-card--docs',
+      { issues: ['title-as-link'] }
+    );
   }
 
   /**