Gnorton/badge and progress circle to barebones poc

first-gen/packages/badge/src/Badge.ts

@@ -17,12 +17,46 @@ import {
     TemplateResult,
 } from '@spectrum-web-components/base';
 
-import { BadgeBase } from '@swc/core/components/badge';
+import { property } from '@spectrum-web-components/base/src/decorators.js';
+
+import {
+    BADGE_VARIANTS_COLOR_S1,
+    BADGE_VARIANTS_S1,
+    BadgeBase,
+    type BadgeVariantS1,
+    FIXED_VALUES as FIXED_VALUES_BASE,
+    type FixedValues as FixedValuesBase,
+} from '@swc/core/components/badge';
+
 import styles from './badge.css.js';
 
-// Export types and values to avoid breaking changes
-export { BADGE_VARIANTS, FIXED_VALUES } from '@swc/core/components/badge';
-export type { BadgeVariant, FixedValues } from '@swc/core/components/badge';
+/**
+ * @deprecated The `BADGE_VARIANTS` export is deprecated and will be removed
+ * in a future release. If needed, you can access the internal
+ * `Badge.VARIANTS` property from the constructor.
+ */
+export const BADGE_VARIANTS = BADGE_VARIANTS_S1;
+
+/**
+ * @deprecated The `FIXED_VALUES` export is deprecated and will be removed
+ * in a future release. If needed, you can access the internal
+ * `Badge.FIXED_VALUES` property from the constructor.
+ */
+export const FIXED_VALUES = FIXED_VALUES_BASE;
+
+/**
+ * @deprecated The `BadgeVariant` type export is deprecated and will be removed
+ * in a future release. If needed, you can infer this type from the `Badge`
+ * prototype as follows: `typeof Badge.prototype.variant`
+ */
+export type BadgeVariant = BadgeVariantS1;
+
+/**
+ * @deprecated The `FixedValues` type export is deprecated and will be removed
+ * in a future release. If needed, you can infer this type from the `Badge`
+ * constructor as follows: `typeof Badge.FIXED_VALUES`
+ */
+export type FixedValues = FixedValuesBase;
 
 /**
  * @element sp-badge
@@ -31,6 +65,30 @@ export type { BadgeVariant, FixedValues } from '@swc/core/components/badge';
  * @slot icon - Optional icon that appears to the left of the label
  */
 export class Badge extends BadgeBase {
+    // ────────────────────
+    //     API OVERRIDES
+    // ────────────────────
+
+    /**
+     * @internal
+     */
+    static override readonly VARIANTS_COLOR = BADGE_VARIANTS_COLOR_S1;
+
+    /**
+     * @internal
+     */
+    static override readonly VARIANTS = BADGE_VARIANTS_S1;
+
+    /**
+     * The variant of the badge.
+     */
+    @property({ type: String, reflect: true })
+    public override variant: BadgeVariantS1 = 'informative';
+
+    // ──────────────────────────────
+    //     RENDERING & STYLING
+    // ──────────────────────────────
+
     public static override get styles(): CSSResultArray {
         return [styles];
     }

first-gen/packages/progress-circle/src/ProgressCircle.ts

@@ -16,14 +16,40 @@ import {
     TemplateResult,
 } from '@spectrum-web-components/base';
 import { ifDefined } from '@spectrum-web-components/base/src/directives.js';
-import { ProgressCircleBase } from '@swc/core/components/progress-circle';
+import { property } from '@spectrum-web-components/base/src/decorators.js';
+import {
+    PROGRESS_CIRCLE_STATIC_COLORS_S1,
+    ProgressCircleBase,
+    type ProgressCircleStaticColorS1,
+} from '@swc/core/components/progress-circle';
 
 import progressCircleStyles from './progress-circle.css.js';
 
 /**
  * @element sp-progress-circle
  */
 export class ProgressCircle extends ProgressCircleBase {
+    // ────────────────────
+    //     API OVERRIDES
+    // ────────────────────
+
+    /**
+     * @internal
+     */
+    static override readonly STATIC_COLORS = PROGRESS_CIRCLE_STATIC_COLORS_S1;
+
+    /**
+     * Static color variant for use on different backgrounds.
+     *
+     * When set to 'white', the component uses white styling for images with a dark tinted background.
+     */
+    @property({ type: String, reflect: true, attribute: 'static-color' })
+    public override staticColor?: ProgressCircleStaticColorS1;
+
+    // ──────────────────────────────
+    //     RENDERING & STYLING
+    // ──────────────────────────────
+
     public static override get styles(): CSSResultArray {
         return [progressCircleStyles];
     }

second-gen/packages/core/components/badge/Badge.base.ts

@@ -16,51 +16,94 @@ import { SizedMixin, SpectrumElement } from '@swc/core/shared/base';
 import { ObserveSlotPresence } from '@swc/core/shared/observe-slot-presence';
 import { ObserveSlotText } from '@swc/core/shared/observe-slot-text';
 
-export const BADGE_VARIANTS = [
-    'accent',
-    'neutral',
-    'informative',
-    'positive',
-    'negative',
-    'notice',
-    'fuchsia',
-    'indigo',
-    'magenta',
-    'purple',
-    'seafoam',
-    'yellow',
-    'gray',
-    'red',
-    'orange',
-    'chartreuse',
-    'celery',
-    'green',
-    'cyan',
-    'blue',
-] as const;
-export type BadgeVariant = (typeof BADGE_VARIANTS)[number];
-export const FIXED_VALUES = [
-    'inline-start',
-    'inline-end',
-    'block-start',
-    'block-end',
-] as const;
-export type FixedValues = (typeof FIXED_VALUES)[number];
+import {
+    BADGE_VARIANTS_SEMANTIC,
+    type BadgeVariant,
+    FIXED_VALUES,
+    type FixedValues,
+} from './Badge.types';
 
 /**
- * @element sp-badge-base
- * @slot - The text label to display in the badge.
- * @slot icon - The icon to display in the badge.
+ * A badge component that displays short, descriptive information about an element.
+ * Badges are typically used to indicate status, categories, or provide supplementary information.
+ *
+ * @attribute {ElementSize} size - The size of the badge.
+ *
+ * @slot - Text label of the badge.
+ * @slot icon - Optional icon that appears to the left of the label
  */
 export abstract class BadgeBase extends SizedMixin(
     ObserveSlotText(ObserveSlotPresence(SpectrumElement, '[slot="icon"]'), ''),
     {
         noDefaultSize: true,
     }
 ) {
+    // ─────────────────────────
+    //     API TO OVERRIDE
+    // ─────────────────────────
+
+    /**
+     * @internal
+     *
+     * A readonly array of the valid color variants for the badge.
+     *
+     * 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[];
+
+    /**
+     * @internal
+     *
+     * A readonly array of all valid variants for the badge.
+     *
+     * 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.
+     */
+    static readonly VARIANTS: readonly string[];
+
+    /**
+     * @internal
+     *
+     * The variant of the badge.
+     *
+     * 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: BadgeVariant = 'informative';
 
+    // ──────────────────
+    //     SHARED API
+    // ──────────────────
+
+    /**
+     * @internal
+     */
+    static readonly FIXED_VALUES: readonly string[] = FIXED_VALUES;
+
+    /**
+     * @internal
+     */
+    static readonly VARIANTS_SEMANTIC: readonly string[] =
+        BADGE_VARIANTS_SEMANTIC;
+
+    /**
+     * The fixed position of the badge.
+     *
+     * @todo The purpose of the bespoke getter and setter is unclear, as it
+     * looks like they may be behaving just like a standard Lit reactive
+     * property. Explore replacing after the Barebones milestone.
+     */
     @property({ reflect: true })
     public get fixed(): FixedValues | undefined {
         return this._fixed;
@@ -82,20 +125,43 @@ export abstract class BadgeBase extends SizedMixin(
 
     private _fixed?: FixedValues;
 
+    // ──────────────────────
+    //     IMPLEMENTATION
+    // ──────────────────────
+
+    /**
+     * @internal Used for rendering gap when the badge has an icon.
+     */
     protected get hasIcon(): boolean {
         return this.slotContentIsPresent;
     }
 
     protected override update(changedProperties: PropertyValues): void {
         super.update(changedProperties);
         if (window.__swc?.DEBUG) {
-            if (!BADGE_VARIANTS.includes(this.variant)) {
+            const constructor = this.constructor as typeof BadgeBase;
+            if (!constructor.VARIANTS.includes(this.variant)) {
                 window.__swc.warn(
                     this,
                     `<${this.localName}> element expect the "variant" attribute to be one of the following:`,
                     'https://opensource.adobe.com/spectrum-web-components/components/badge/#variants',
                     {
-                        issues: [...BADGE_VARIANTS],
+                        issues: [...constructor.VARIANTS],
+                    }
+                );
+            }
+            // Check outline property if it exists (S2 only)
+            if (
+                '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],
                     }
                 );
             }

second-gen/packages/core/components/badge/Badge.types.ts

@@ -0,0 +1,73 @@
+/**
+ * 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 FIXED_VALUES = [
+    'inline-start',
+    'inline-end',
+    'block-start',
+    'block-end',
+] as const;
+
+export type FixedValues = (typeof FIXED_VALUES)[number];
+
+export const BADGE_VARIANTS_SEMANTIC = [
+    'accent',
+    'neutral',
+    'informative',
+    'positive',
+    'negative',
+    'notice',
+] as const;
+
+export const BADGE_VARIANTS_COLOR_S1 = [
+    'fuchsia',
+    'indigo',
+    'magenta',
+    'purple',
+    'seafoam',
+    'yellow',
+    'gray',
+    'red',
+    'orange',
+    'chartreuse',
+    'celery',
+    'green',
+    'cyan',
+    'blue',
+] as const;
+
+export const BADGE_VARIANTS_COLOR_S2 = [
+    ...BADGE_VARIANTS_COLOR_S1,
+    'pink',
+    'turquoise',
+    'brown',
+    'cinnamon',
+    'silver',
+] as const;
+
+export const BADGE_VARIANTS_S1 = [
+    ...BADGE_VARIANTS_SEMANTIC,
+    ...BADGE_VARIANTS_COLOR_S1,
+] as const;
+
+export const BADGE_VARIANTS_S2 = [
+    ...BADGE_VARIANTS_SEMANTIC,
+    ...BADGE_VARIANTS_COLOR_S2,
+] as const;
+
+export type BadgeVariantS1 = (typeof BADGE_VARIANTS_S1)[number];
+export type BadgeVariantS2 = (typeof BADGE_VARIANTS_S2)[number];
+export type BadgeVariant = BadgeVariantS1 | BadgeVariantS2;

second-gen/packages/core/components/badge/index.ts

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