feat(status-light)!: migrate status-light to s2 styles and second-gen architecture

first-gen/packages/status-light/src/StatusLight.ts

@@ -13,17 +13,100 @@
 import {
     CSSResultArray,
     html,
+    PropertyValues,
     TemplateResult,
 } from '@spectrum-web-components/base';
-import { StatusLightBase } from '@swc/core/components/status-light';
+
+import { property } from '@spectrum-web-components/base/src/decorators.js';
+
+import {
+    STATUSLIGHT_VARIANTS_COLOR_S1,
+    STATUSLIGHT_VARIANTS_S1,
+    STATUSLIGHT_VARIANTS_SEMANTIC_S1,
+    StatusLightBase,
+    type StatusLightVariantS1,
+} from '@swc/core/components/status-light';
+
 import statusLightStyles from './status-light.css.js';
 
+/**
+ * @deprecated The `STATUSLIGHT_VARIANTS` export is deprecated and will be removed
+ * in a future release. If needed, you can access the internal
+ * `StatusLight.VARIANTS` property from the constructor.
+ */
+export const STATUSLIGHT_VARIANTS = STATUSLIGHT_VARIANTS_S1;
+
+/**
+ * @deprecated The `StatusLightVariant` type export is deprecated and will be removed
+ * in a future release. If needed, you can infer this type from the `StatusLight`
+ * prototype as follows: `typeof StatusLight.prototype.variant`
+ */
+export type StatusLightVariant = StatusLightVariantS1;
+
 /**
  * @element sp-status-light
  *
  * @slot - text label of the Status Light
  */
 export class StatusLight extends StatusLightBase {
+    // ────────────────────
+    //     API OVERRIDES
+    // ────────────────────
+
+    /**
+     * @internal
+     */
+    static override readonly VARIANTS_COLOR = STATUSLIGHT_VARIANTS_COLOR_S1;
+
+    /**
+     * @internal
+     */
+    static override readonly VARIANTS_SEMANTIC =
+        STATUSLIGHT_VARIANTS_SEMANTIC_S1;
+
+    /**
+     * @internal
+     */
+    static override readonly VARIANTS = STATUSLIGHT_VARIANTS_S1;
+
+    /**
+     * The variant of the status light.
+     */
+    @property({ type: String, reflect: true })
+    public override variant: StatusLightVariantS1 = 'info';
+
+    // ───────────────────────
+    //     API ADDITIONS
+    // ───────────────────────
+
+    /**
+     * @deprecated The `disabled` property is is deprecated and will be removed
+     * in a future release.
+     *
+     * A status light in a disabled state shows that a status exists, but is not available in that circumstance. This can be used to maintain layout continuity and communicate that a status may become available later.
+     *
+     */
+    @property({ type: Boolean, reflect: true })
+    public disabled = false;
+
+    // ──────────────────────
+    //     IMPLEMENTATION
+    // ──────────────────────
+
+    protected override updated(changes: PropertyValues): void {
+        super.updated(changes);
+        if (changes.has('disabled')) {
+            if (this.disabled) {
+                this.setAttribute('aria-disabled', 'true');
+            } else {
+                this.removeAttribute('aria-disabled');
+            }
+        }
+    }
+    // ──────────────────────────────
+    //     RENDERING & STYLING
+    // ──────────────────────────────
+
     public static override get styles(): CSSResultArray {
         return [statusLightStyles];
     }

first-gen/packages/status-light/test/status-light.test.ts

@@ -12,6 +12,7 @@
 import '@spectrum-web-components/status-light/sp-status-light.js';
 import { StatusLight } from '@spectrum-web-components/status-light';
 import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
+import { spy } from 'sinon';
 
 describe('Status Light', () => {
     it('loads correctly', async () => {
@@ -41,4 +42,41 @@ describe('Status Light', () => {
         expect(el.hasAttribute('aria-disabled')).to.be.true;
         expect(el.getAttribute('aria-disabled')).to.equal('true');
     });
+
+    describe('dev mode warnings', () => {
+        let warningMessage: typeof window.__swc.warn;
+
+        beforeEach(() => {
+            // Create __swc if it doesn't exist
+            window.__swc = window.__swc || { warn: () => {} };
+            // Store original warn function
+            warningMessage = window.__swc.warn;
+            // Reset issued warnings to avoid dedupe interference
+            window.__swc.issuedWarnings = new Set();
+            // Enable debug guard
+            window.__swc.DEBUG = true;
+        });
+
+        afterEach(() => {
+            // Restore original warn function
+            window.__swc.warn = warningMessage;
+        });
+
+        it('warns when unsupported variant is used (brown)', async () => {
+            const warnSpy = spy();
+            window.__swc.warn = warnSpy as unknown as typeof window.__swc.warn;
+
+            const el = await fixture<StatusLight>(html`
+                <sp-status-light variant="brown"></sp-status-light>
+            `);
+
+            await elementUpdated(el);
+
+            expect(warnSpy.called).to.be.true;
+            expect(warnSpy.firstCall.args[0]).to.equal(el);
+            expect(warnSpy.firstCall.args[1]).to.equal(
+                `<${el.localName}> element expects the "variant" attribute to be one of the following:`
+            );
+        });
+    });
 });

second-gen/packages/core/components/status-light/StatusLight.base.ts

@@ -9,52 +9,108 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
 import { PropertyValues } from 'lit';
 import { property } from 'lit/decorators.js';
 
 import { SizedMixin, SpectrumElement } from '@swc/core/shared/base';
 
+import { type StatusLightVariant } from './StatusLight.types';
+
 /**
- * @element sp-status-light
+ * A status light is a great way to convey semantic meaning and the condition of an entity, such as statuses and categories. It provides visual indicators through colored dots accompanied by descriptive text.
  *
- * @slot - text label of the Status Light
+ * @slot - The text label of the status light.
  */
 export abstract class StatusLightBase extends SizedMixin(SpectrumElement, {
     noDefaultSize: true,
 }) {
+    // ─────────────────────────
+    //     API TO OVERRIDE
+    // ─────────────────────────
+
+    /**
+     * @internal
+     *
+     * A readonly array of the valid color variants for the status light.
+     *
+     * This is an actual internal property, intended not for customer use
+     * but for use in internal validation logic, stories, tests, etc.
+     *
+     * Because S1 and S2 support different color variants, the value of this
+     * property must be set in each subclass.
+     */
+    static readonly VARIANTS_COLOR: readonly string[];
+
     /**
-     * A status light in a disabled state shows that a status exists, but is not available in that circumstance. This can be used to maintain layout continuity and communicate that a status may become available later.
+     * @internal
+     *
+     * A readonly array of the valid semantic variants for the status light.
+     *
+     * This is an actual internal property, intended not for customer use
+     * but for use in internal validation logic, stories, tests, etc.
+     *
+     * Because S1 and S2 support different semantic variants, the value of this
+     * property must be set in each subclass.
      */
-    @property({ type: Boolean, reflect: true })
-    public disabled = false;
+    static readonly VARIANTS_SEMANTIC: readonly string[];
 
     /**
-     * The visual variant to apply to this status light.
+     * @internal
+     *
+     * A readonly array of all valid variants for the status light.
+     *
+     * This is an actual internal property, intended not for customer use
+     * but for use in internal validation logic, stories, tests, etc.
+     *
+     * Because S1 and S2 support different variants, the value of this
+     * property must be set in each subclass.
      */
-    @property({ reflect: true })
-    public variant:
-        | 'negative'
-        | 'notice'
-        | 'positive'
-        | 'info'
-        | 'neutral'
-        | 'yellow'
-        | 'fuchsia'
-        | 'indigo'
-        | 'seafoam'
-        | 'chartreuse'
-        | 'magenta'
-        | 'celery'
-        | 'purple' = 'info';
+    static readonly VARIANTS: readonly string[];
+
+    /**
+     * @internal
+     *
+     * The variant of the status light.
+     *
+     * This is a public property, but its valid values vary between S1 and S2,
+     * so the property (and its docs) need to be redefined in each subclass.
+     *
+     * The type declared here is a union of the valid values for S1 and S2,
+     * and should be narrowed in each subclass.
+     */
+    @property({ type: String, reflect: true })
+    public variant: StatusLightVariant = 'info';
+
+    // ──────────────────────
+    //     IMPLEMENTATION
+    // ──────────────────────
 
     protected override updated(changes: PropertyValues): void {
         super.updated(changes);
-        if (changes.has('disabled')) {
-            if (this.disabled) {
-                this.setAttribute('aria-disabled', 'true');
-            } else {
-                this.removeAttribute('aria-disabled');
+        if (window.__swc?.DEBUG) {
+            const constructor = this.constructor as typeof StatusLightBase;
+            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/status-light/#variants',
+                    {
+                        issues: [...constructor.VARIANTS],
+                    }
+                );
+            }
+            // Check disabled property if it exists (S1 only)
+            if (this.hasAttribute('disabled') && !('disabled' in this)) {
+                window.__swc.warn(
+                    this,
+                    `<${this.localName}> element does not support the disabled state.`,
+                    'https://opensource.adobe.com/spectrum-web-components/components/status-light/#states',
+                    {
+                        issues: [
+                            'disabled is not a supported property in Spectrum 2',
+                        ],
+                    }
+                );
             }
         }
     }

second-gen/packages/core/components/status-light/StatusLight.types.ts

@@ -0,0 +1,67 @@
+/**
+ * Copyright 2025 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+/*
+ * @todo The S1 types can be removed once we are no longer maintaining 1st-gen.
+ */
+
+export const STATUSLIGHT_VARIANTS_SEMANTIC = [
+    'neutral',
+    'info',
+    'positive',
+    'negative',
+    'notice',
+] as const;
+
+export const STATUSLIGHT_VARIANTS_SEMANTIC_S1 = [
+    ...STATUSLIGHT_VARIANTS_SEMANTIC,
+    'accent',
+] as const;
+
+export const STATUSLIGHT_VARIANTS_SEMANTIC_S2 = [
+    ...STATUSLIGHT_VARIANTS_SEMANTIC,
+] as const;
+
+export const STATUSLIGHT_VARIANTS_COLOR_S1 = [
+    'fuchsia',
+    'indigo',
+    'magenta',
+    'purple',
+    'seafoam',
+    'yellow',
+    'chartreuse',
+    'celery',
+    'cyan',
+] as const;
+
+export const STATUSLIGHT_VARIANTS_COLOR_S2 = [
+    ...STATUSLIGHT_VARIANTS_COLOR_S1,
+    'pink',
+    'turquoise',
+    'brown',
+    'cinnamon',
+    'silver',
+] as const;
+
+export const STATUSLIGHT_VARIANTS_S1 = [
+    ...STATUSLIGHT_VARIANTS_SEMANTIC_S1,
+    ...STATUSLIGHT_VARIANTS_COLOR_S1,
+] as const;
+
+export const STATUSLIGHT_VARIANTS_S2 = [
+    ...STATUSLIGHT_VARIANTS_SEMANTIC_S2,
+    ...STATUSLIGHT_VARIANTS_COLOR_S2,
+] as const;
+
+export type StatusLightVariantS1 = (typeof STATUSLIGHT_VARIANTS_S1)[number];
+export type StatusLightVariantS2 = (typeof STATUSLIGHT_VARIANTS_S2)[number];
+export type StatusLightVariant = StatusLightVariantS1 | StatusLightVariantS2;

second-gen/packages/core/components/status-light/index.ts

@@ -10,3 +10,4 @@
  * governing permissions and limitations under the License.
  */
 export * from './StatusLight.base';
+export * from './StatusLight.types';