chore: adding docs notes and todos to 2nd gen

Author: castastrophe

first-gen/packages/badge/src/badge-overrides.css

@@ -57,9 +57,9 @@ export type FixedValues = (typeof FIXED_VALUES)[number];
 
 /**
  * @element sp-badge-base
- * @property {BadgeVariant} variant - The variant of the badge.
- * @property {FixedValues} fixed - The fixed position of the badge.
- * @property {string[]} customStyles - The custom styles of the badge.
+ * @attribute {ElementSize} size - The size of the badge.
+ * @attribute {BadgeVariant} variant - The variant of the badge.
+ * @attribute {FixedValues} fixed - The fixed position of the badge.
  */
 export abstract class BadgeBase extends SizedMixin(
     ObserveSlotText(ObserveSlotPresence(SpectrumElement, '[slot="icon"]'), ''),
@@ -73,6 +73,9 @@ export abstract class BadgeBase extends SizedMixin(
     @property({ type: String, reflect: true })
     public fixed?: FixedValues;
 
+    /**
+     * @internal Used for rendering gap when the badge has an icon.
+     */
     protected get hasIcon(): boolean {
         return this.slotContentIsPresent;
     }

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

@@ -7,6 +7,11 @@ const config = {
     core: {
         disableTelemetry: true,
     },
+    addons: [
+        '@storybook/addon-docs',
+        '@storybook/addon-a11y',
+        '@storybook/addon-designs',
+    ],
     viteFinal: async (config) => {
         config.resolve = config.resolve || {};
         config.resolve.alias = {

second-gen/packages/swc/.storybook/main.ts

@@ -5,7 +5,6 @@ import '../tokens/light-vars.css';
 import '../tokens/medium-vars.css';
 import '../tokens/global-vars.css';
 
-import { html } from 'lit';
 import { setCustomElementsManifest } from '@storybook/web-components';
 import customElements from './custom-elements.json';
 
@@ -14,6 +13,7 @@ setCustomElementsManifest(customElements);
 
 const preview = {
     parameters: {
+        layout: 'centered',
         controls: {
             expanded: true,
             matchers: {
@@ -29,6 +29,7 @@ const preview = {
             },
         },
     },
+    tags: ['autodocs'],
 };
 
 export default preview;

second-gen/packages/swc/.storybook/preview.ts

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import { CSSResultArray, html, TemplateResult } from 'lit';
+import { CSSResultArray, html, PropertyValues, TemplateResult } from 'lit';
 import { property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { when } from 'lit/directives/when.js';
@@ -55,18 +55,14 @@ export type { FixedValues } from '@swc/core/components/badge';
  * @github https://github.com/adobe/spectrum-web-components/tree/main/...
  * @figma https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=36806-6551
  *
- * @property {BadgeVariant} variant - The variant of the badge.
- * @property {boolean} subtle - Whether the badge is subtle.
- * @property {boolean} outline - Whether the badge is outlined.
- * @property {FixedValues} fixed - The fixed position of the badge.
- * @property {string[]} customStyles - The custom styles of the badge.
+ * @attribute {BadgeVariant} variant - The variant of the badge.
+ * @attribute {boolean} subtle - Whether the badge is subtle.
+ * @attribute {boolean} outline - Whether the badge is outlined.
+ * @attribute {FixedValues} fixed - The fixed position of the badge.
  *
  * @slot - Text label of the badge
  * @slot icon - Optional icon that appears to the left of the label
  *
- * @csspart label - The text content area of the badge
- * @csspart icon - The icon area of the badge (when present)
- *
  * @example
  * <swc-badge variant="positive">New</swc-badge>
  *
@@ -122,4 +118,23 @@ export class Badge extends BadgeBase {
             </div>
         `;
     }
+
+    protected override update(changedProperties: PropertyValues): void {
+        super.update(changedProperties);
+        if (window.__swc?.DEBUG) {
+            if (
+                this.outline &&
+                !BADGE_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: [...BADGE_VARIANTS_SEMANTIC],
+                    }
+                );
+            }
+        }
+    }
 }