@spectrum-web-components/badge 1.7.0 → 1.9.0-nightly.20251013134115

package/README.md

@@ -1,4 +1,4 @@
-## Description
+## Overview
 
 `<sp-badge>` elements display a small amount of color-categorized metadata. They're ideal for getting a user's attention.
 
@@ -7,23 +7,50 @@
 [![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/badge?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/badge)
 [![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/badge?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/badge)
 
-```
+```bash
 yarn add @spectrum-web-components/badge
 ```
 
 Import the side effectful registration of `<sp-badge>` via:
 
-```
+```js
 import '@spectrum-web-components/badge/sp-badge.js';
 ```
 
 When looking to leverage the `Badge` base class as a type and/or for extension purposes, do so via:
 
-```
+```js
 import { Badge } from '@spectrum-web-components/badge';
 ```
 
-## Sizes
+### Anatomy
+
+A badge is made up of the following parts:
+
+- **Icon**: an `<sp-icon-*>` element can be used to display an icon within the badge.
+- **Label**: text can be displayed within the badge by using the default slot.
+
+Badges can contain either a label, an icon, or both.
+
+```html demo
+<sp-badge size="s">Label only</sp-badge>
+<sp-badge size="s">
+    <sp-icon-checkmark-circle
+        label="Icon-only badge"
+        slot="icon"
+    ></sp-icon-checkmark-circle>
+</sp-badge>
+<sp-badge size="s">
+    <sp-icon-settings slot="icon"></sp-icon-settings>
+    Icon and label
+</sp-badge>
+```
+
+### Options
+
+It is not recommended to make badges interactive. Consider using a different component if you need interactivity, such as buttons, tags, or links.
+
+#### Sizes
 
 <sp-tabs selected="m" auto label="Size Attribute Options">
 <sp-tab value="s">Small</sp-tab>
@@ -32,6 +59,12 @@ import { Badge } from '@spectrum-web-components/badge';
 ```html demo
 <div style="display: flex; gap: var(--spectrum-spacing-75);">
     <sp-badge size="s">Label</sp-badge>
+    <sp-badge size="s">
+        <sp-icon-checkmark-circle
+            label="Icon-only badge"
+            slot="icon"
+        ></sp-icon-checkmark-circle>
+    </sp-badge>
     <sp-badge size="s">
         <sp-icon-checkmark-circle slot="icon"></sp-icon-checkmark-circle>
         Icon and label
@@ -46,6 +79,12 @@ import { Badge } from '@spectrum-web-components/badge';
 ```html demo
 <div style="display: flex; gap: var(--spectrum-spacing-75);">
     <sp-badge size="m">Label</sp-badge>
+    <sp-badge size="m">
+        <sp-icon-checkmark-circle
+            label="Icon-only badge"
+            slot="icon"
+        ></sp-icon-checkmark-circle>
+    </sp-badge>
     <sp-badge size="m">
         <sp-icon-checkmark-circle slot="icon"></sp-icon-checkmark-circle>
         Icon and label
@@ -60,6 +99,12 @@ import { Badge } from '@spectrum-web-components/badge';
 ```html demo
 <div style="display: flex; gap: var(--spectrum-spacing-75);">
     <sp-badge size="l">Label</sp-badge>
+    <sp-badge size="l">
+        <sp-icon-checkmark-circle
+            label="Icon-only badge"
+            slot="icon"
+        ></sp-icon-checkmark-circle>
+    </sp-badge>
     <sp-badge size="l">
         <sp-icon-checkmark-circle slot="icon"></sp-icon-checkmark-circle>
         Icon and label
@@ -74,6 +119,12 @@ import { Badge } from '@spectrum-web-components/badge';
 ```html demo
 <div style="display: flex; gap: var(--spectrum-spacing-75);">
     <sp-badge size="xl">Label</sp-badge>
+    <sp-badge size="xl">
+        <sp-icon-checkmark-circle
+            label="Icon-only badge"
+            slot="icon"
+        ></sp-icon-checkmark-circle>
+    </sp-badge>
     <sp-badge size="xl">
         <sp-icon-checkmark-circle slot="icon"></sp-icon-checkmark-circle>
         Icon and label
@@ -84,15 +135,24 @@ import { Badge } from '@spectrum-web-components/badge';
 </sp-tab-panel>
 </sp-tabs>
 
-## Variants
+#### Variants
+
+The `<sp-badge>` can be customized with either semantic or non-semantic variants. Badges are intended as display elements (like status lights), so avoid using badges for critical actions.
 
-The `<sp-badge>` can be customized with either semantic or non-semantic variants.
+<sp-tabs selected="semantic" auto label="Semantic and non-semantic variants">
+<sp-tab value="semantic">Semantic</sp-tab>
+<sp-tab-panel value="semantic">
 
-### Semantic
+When badges have a semantic meaning, they use semantic colors. Use these variants for the following statuses:
+
+- **Positive**: approved, complete, success, new, purchased, licensed
+- **Informative**: active, in use, live, published
+- **Negative**: error, alert, rejected, failed
+- **Neutral**: archived, deleted, paused, draft, not started, ended
 
 ```html demo
 <div style="display: flex; gap: var(--spectrum-spacing-75);">
-    <sp-badge variant="accent">Informative</sp-badge>
+    <sp-badge variant="accent">Accent</sp-badge>
     <sp-badge variant="neutral">Neutral</sp-badge>
     <sp-badge variant="informative">Informative</sp-badge>
     <sp-badge variant="positive">Positive</sp-badge>
@@ -101,9 +161,11 @@ The `<sp-badge>` can be customized with either semantic or non-semantic variants
 </div>
 ```
 
-### Non-Semantic
+</sp-tab-panel>
+<sp-tab value="nonsemantic">Non-semantic</sp-tab>
+<sp-tab-panel value="nonsemantic">
 
-Non-semantic badge colors are no longer supported directly by Spectrum and Spectrum Web Components. You can mimic their delivery via the following CSS Custom Properties. These values for the `variant` attribute/property have not been marked as deprecated, but will no longer achieve the results you may have relied on in the past.
+When badges are for color-coded categories, they use non-semantic colors. Non-semantic variants are ideally used for when there are 8 categories or less.
 
 ```html demo
 <div style="display: flex; gap: var(--spectrum-spacing-75); flex-wrap:wrap;">
@@ -124,9 +186,12 @@ Non-semantic badge colors are no longer supported directly by Spectrum and Spect
 </div>
 ```
 
-## Fixed
+</sp-tab-panel>
+</sp-tabs>
+
+#### Fixed positioning
 
-When you'd like to have the `<sp-badge>` display as if "fixed" to the edge of a UI, the `fixed` attribute/property can be leveraged to alter the border rounding based on the position you would like to achieve:
+`<sp-badge>` can be displayed as if it is "fixed" to the edge of a UI. The `fixed` attribute can be leveraged to alter the border rounding based on the position you would like to achieve. Fixed positioning options include `block-start`, `block-end`, `inline-start`, and `inline-end`.
 
 ```html
 <div
@@ -159,3 +224,81 @@ When you'd like to have the `<sp-badge>` display as if "fixed" to the edge of a
     </sp-badge>
 </div>
 ```
+
+### Behaviors
+
+Badges are not interactive by default.
+
+When a badge's label is too long for the available horizontal space, it wraps to form another line. Text wrapping can be enforced when a `max-inline-size` is applied to the badge. If there is no room for a second line of text, the badge should truncate and include a tooltip to expose the full text upon hover.
+
+```html demo
+<overlay-trigger>
+    <sp-badge style="max-inline-size: 350px;" slot="trigger">
+        Wikipedia is the best thing ever. Anyone in the world can write anything
+        they want about any subject so you know you are getting the best
+        possible information.
+    </sp-badge>
+    <sp-tooltip slot="hover-content">
+        Wikipedia is the best thing ever. Anyone in the world can write anything
+        they want about any subject so you know you are getting the best
+        possible information.
+    </sp-tooltip>
+</overlay-trigger>
+```
+
+### Accessibility
+
+<div style="margin-block-end: 2rem">
+<sp-table>
+    <sp-table-head>
+        <sp-table-head-cell>Do ✅</sp-table-head-cell>
+        <sp-table-head-cell>Don't ❌</sp-table-head-cell>
+    </sp-table-head>
+    <sp-table-body>
+        <sp-table-row>
+            <sp-table-cell>Use badges for status indication</sp-table-cell>
+            <sp-table-cell>Use badges for critical actions</sp-table-cell>
+        </sp-table-row>
+        <sp-table-row>
+            <sp-table-cell>Use visible labels most often</sp-table-cell>
+            <sp-table-cell>Overwhelm a user with too much critical information</sp-table-cell>
+        </sp-table-row>
+        <sp-table-row>
+        <sp-table-cell>Use icon-only badges with aria-label</sp-table-cell>
+        </sp-table-row>
+        <sp-table-row>
+            <sp-table-cell>Use badges for supplemental information</sp-table-cell>
+        </sp-table-row>
+    </sp-table-body>
+</sp-table>
+</div>
+
+#### Always include a label
+
+Badges should always have a label for accessibility and clear comprehension. When the label is not defined, a badge becomes icon-only. If a visible label isn't specified, an `aria-label` must be provided to the icon for accessibility. An icon-only badge is best for very small spaces, and it should include a tooltip on hover to provide more context for the icon's meaning.
+
+Remember that a tooltip does not replace an accessible label.
+
+```html demo
+<overlay-trigger>
+    <sp-badge size="m" slot="trigger">
+        <sp-icon-checkmark-circle
+            label="Labels are important"
+            slot="icon"
+        ></sp-icon-checkmark-circle>
+    </sp-badge>
+    <sp-tooltip placement="top" slot="hover-content">
+        <sp-icon-checkmark-circle slot="icon"></sp-icon-checkmark-circle>
+        Labels are important
+    </sp-tooltip>
+</overlay-trigger>
+```
+
+#### Keyboard interactions
+
+- <kbd>Tab</kbd>: Places focus on the badge if it is interactive.
+- <kbd>Space</kbd> or <kbd>Enter</kbd>: Filters results by the selected badge or performs the action associated with the badge.
+
+#### Don't override semantic colors
+
+The badge's variants provide semantic meaning through both color and ARIA attributes, ensuring that information is not conveyed through color alone.

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@spectrum-web-components/badge",
-    "version": "1.7.0",
+    "version": "1.9.0-nightly.20251013134115",
     "publishConfig": {
         "access": "public"
     },
@@ -9,7 +9,7 @@
     "repository": {
         "type": "git",
         "url": "https://github.com/adobe/spectrum-web-components.git",
-        "directory": "packages/badge"
+        "directory": "first-gen/packages/badge"
     },
     "author": "Adobe",
     "homepage": "https://opensource.adobe.com/spectrum-web-components/components/badge",
@@ -26,8 +26,8 @@
         },
         "./package.json": "./package.json",
         "./src/Badge.js": {
-            "development": "./src/Badge.dev.js",
-            "default": "./src/Badge.js"
+            "default": "./src/Badge.js",
+            "development": "./src/Badge.dev.js"
         },
         "./src/badge-overrides.css.js": "./src/badge-overrides.css.js",
         "./src/badge.css.js": "./src/badge.css.js",
@@ -64,8 +64,9 @@
         "css"
     ],
     "dependencies": {
-        "@spectrum-web-components/base": "1.7.0",
-        "@spectrum-web-components/shared": "1.7.0"
+        "@spectrum-web-components/base": "1.9.0-nightly.20251013134115",
+        "@spectrum-web-components/core-next": "workspace:*",
+        "@spectrum-web-components/shared": "1.9.0-nightly.20251013134115"
     },
     "types": "./src/index.d.ts",
     "customElements": "custom-elements.json",

package/sp-badge.d.ts

@@ -1,3 +1,14 @@
+/**
+ * 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.
+ */
 import { Badge } from './src/Badge.js';
 declare global {
     interface HTMLElementTagNameMap {

package/sp-badge.dev.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["sp-badge.ts"],
-  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { Badge } from './src/Badge.dev.js'\nimport { defineElement } from '@spectrum-web-components/base/src/define-element.js';\n\ndefineElement('sp-badge', Badge);\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'sp-badge': Badge;\n    }\n}\n"],
+  "sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport { Badge } from './src/Badge.dev.js'\nimport { defineElement } from '@spectrum-web-components/base/src/define-element.js';\n\ndefineElement('sp-badge', Badge);\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'sp-badge': Badge;\n    }\n}\n"],
   "mappings": ";AAYA,SAAS,aAAa;AACtB,SAAS,qBAAqB;AAE9B,cAAc,YAAY,KAAK;",
   "names": []
 }

package/sp-badge.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["sp-badge.ts"],
-  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { Badge } from './src/Badge.js';\nimport { defineElement } from '@spectrum-web-components/base/src/define-element.js';\n\ndefineElement('sp-badge', Badge);\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'sp-badge': Badge;\n    }\n}\n"],
+  "sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport { Badge } from './src/Badge.js';\nimport { defineElement } from '@spectrum-web-components/base/src/define-element.js';\n\ndefineElement('sp-badge', Badge);\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'sp-badge': Badge;\n    }\n}\n"],
   "mappings": "aAYA,OAAS,SAAAA,MAAa,iBACtB,OAAS,iBAAAC,MAAqB,sDAE9BA,EAAc,WAAYD,CAAK",
   "names": ["Badge", "defineElement"]
 }

package/src/Badge.d.ts

@@ -1,31 +1,59 @@
-import { CSSResultArray, SpectrumElement, TemplateResult } from '@spectrum-web-components/base';
+/**
+ * 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.
+ */
+import { CSSResultArray, TemplateResult } from '@spectrum-web-components/base';
+import { BadgeBase, type BadgeVariantS1, type FixedValues as FixedValuesBase } from '@spectrum-web-components/core-next/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 declare const BADGE_VARIANTS: readonly ["accent", "neutral", "informative", "positive", "negative", "notice", "fuchsia", "indigo", "magenta", "purple", "seafoam", "yellow", "gray", "red", "orange", "chartreuse", "celery", "green", "cyan", "blue"];
-export type BadgeVariant = (typeof BADGE_VARIANTS)[number];
+/**
+ * @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 declare const FIXED_VALUES: readonly ["inline-start", "inline-end", "block-start", "block-end"];
-export type FixedValues = (typeof FIXED_VALUES)[number];
-declare const Badge_base: typeof SpectrumElement & {
-    new (...args: any[]): import("@spectrum-web-components/shared/src/observe-slot-presence.js").SlotPresenceObservingInterface;
-    prototype: import("@spectrum-web-components/shared/src/observe-slot-presence.js").SlotPresenceObservingInterface;
-} & {
-    new (...args: any[]): import("@spectrum-web-components/shared/src/observe-slot-text.js").SlotTextObservingInterface;
-    prototype: import("@spectrum-web-components/shared/src/observe-slot-text.js").SlotTextObservingInterface;
-} & {
-    new (...args: any[]): import("@spectrum-web-components/base").SizedElementInterface;
-    prototype: import("@spectrum-web-components/base").SizedElementInterface;
-};
+/**
+ * @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
  *
  * @slot - Text label of the badge
  * @slot icon - Optional icon that appears to the left of the label
  */
-export declare class Badge extends Badge_base {
+export declare class Badge extends BadgeBase {
+    /**
+     * @internal
+     */
+    static readonly VARIANTS_COLOR: readonly ["fuchsia", "indigo", "magenta", "purple", "seafoam", "yellow", "gray", "red", "orange", "chartreuse", "celery", "green", "cyan", "blue"];
+    /**
+     * @internal
+     */
+    static readonly VARIANTS: readonly ["accent", "neutral", "informative", "positive", "negative", "notice", "fuchsia", "indigo", "magenta", "purple", "seafoam", "yellow", "gray", "red", "orange", "chartreuse", "celery", "green", "cyan", "blue"];
+    /**
+     * The variant of the badge.
+     */
+    variant: BadgeVariantS1;
     static get styles(): CSSResultArray;
-    get fixed(): FixedValues | undefined;
-    set fixed(fixed: FixedValues | undefined);
-    private _fixed?;
-    variant: BadgeVariant;
-    protected get hasIcon(): boolean;
     protected render(): TemplateResult;
 }
-export {};

package/src/Badge.dev.js

@@ -11,85 +11,30 @@ var __decorateClass = (decorators, target, key, kind) => {
 };
 import {
   html,
-  nothing,
-  SizedMixin,
-  SpectrumElement
+  nothing
 } from "@spectrum-web-components/base";
 import { property } from "@spectrum-web-components/base/src/decorators.js";
-import { ObserveSlotText } from "@spectrum-web-components/shared/src/observe-slot-text.js";
-import { ObserveSlotPresence } from "@spectrum-web-components/shared/src/observe-slot-presence.js";
+import {
+  BADGE_VARIANTS_COLOR_S1,
+  BADGE_VARIANTS_S1,
+  BadgeBase,
+  FIXED_VALUES as FIXED_VALUES_BASE
+} from "@spectrum-web-components/core-next/components/badge";
 import styles from "./badge.css.js";
-export const BADGE_VARIANTS = [
-  "accent",
-  "neutral",
-  "informative",
-  "positive",
-  "negative",
-  "notice",
-  "fuchsia",
-  "indigo",
-  "magenta",
-  "purple",
-  "seafoam",
-  "yellow",
-  "gray",
-  "red",
-  "orange",
-  "chartreuse",
-  "celery",
-  "green",
-  "cyan",
-  "blue"
-];
-export const FIXED_VALUES = [
-  "inline-start",
-  "inline-end",
-  "block-start",
-  "block-end"
-];
-export class Badge extends SizedMixin(
-  ObserveSlotText(ObserveSlotPresence(SpectrumElement, '[slot="icon"]'), ""),
-  {
-    noDefaultSize: true
-  }
-) {
+export const BADGE_VARIANTS = BADGE_VARIANTS_S1;
+export const FIXED_VALUES = FIXED_VALUES_BASE;
+export class Badge extends BadgeBase {
   constructor() {
     super(...arguments);
     this.variant = "informative";
   }
+  // ──────────────────────────────
+  //     RENDERING & STYLING
+  // ──────────────────────────────
   static get styles() {
     return [styles];
   }
-  get fixed() {
-    return this._fixed;
-  }
-  set fixed(fixed) {
-    if (fixed === this.fixed) return;
-    const oldValue = this.fixed;
-    this._fixed = fixed;
-    if (fixed) {
-      this.setAttribute("fixed", fixed);
-    } else {
-      this.removeAttribute("fixed");
-    }
-    this.requestUpdate("fixed", oldValue);
-  }
-  get hasIcon() {
-    return this.slotContentIsPresent;
-  }
   render() {
-    if (true) {
-      if (!BADGE_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]
-          }
-        );
-      }
-    }
     return html`
             ${this.hasIcon ? html`
                       <slot
@@ -103,9 +48,17 @@ export class Badge extends SizedMixin(
         `;
   }
 }
-__decorateClass([
-  property({ reflect: true })
-], Badge.prototype, "fixed", 1);
+// ────────────────────
+//     API OVERRIDES
+// ────────────────────
+/**
+ * @internal
+ */
+Badge.VARIANTS_COLOR = BADGE_VARIANTS_COLOR_S1;
+/**
+ * @internal
+ */
+Badge.VARIANTS = BADGE_VARIANTS_S1;
 __decorateClass([
   property({ type: String, reflect: true })
 ], Badge.prototype, "variant", 2);

package/src/Badge.dev.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["Badge.ts"],
-  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n    CSSResultArray,\n    html,\n    nothing,\n    SizedMixin,\n    SpectrumElement,\n    TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\n\nimport { ObserveSlotText } from '@spectrum-web-components/shared/src/observe-slot-text.js';\nimport { ObserveSlotPresence } from '@spectrum-web-components/shared/src/observe-slot-presence.js';\nimport styles from './badge.css.js';\n\nexport const BADGE_VARIANTS = [\n    'accent',\n    'neutral',\n    'informative',\n    'positive',\n    'negative',\n    'notice',\n    'fuchsia',\n    'indigo',\n    'magenta',\n    'purple',\n    'seafoam',\n    'yellow',\n    'gray',\n    'red',\n    'orange',\n    'chartreuse',\n    'celery',\n    'green',\n    'cyan',\n    'blue',\n] as const;\nexport type BadgeVariant = (typeof BADGE_VARIANTS)[number];\nexport const FIXED_VALUES = [\n    'inline-start',\n    'inline-end',\n    'block-start',\n    'block-end',\n] as const;\nexport type FixedValues = (typeof FIXED_VALUES)[number];\n\n/**\n * @element sp-badge\n *\n * @slot - Text label of the badge\n * @slot icon - Optional icon that appears to the left of the label\n */\nexport class Badge extends SizedMixin(\n    ObserveSlotText(ObserveSlotPresence(SpectrumElement, '[slot=\"icon\"]'), ''),\n    {\n        noDefaultSize: true,\n    }\n) {\n    public static override get styles(): CSSResultArray {\n        return [styles];\n    }\n\n    @property({ reflect: true })\n    public get fixed(): FixedValues | undefined {\n        return this._fixed;\n    }\n\n    public set fixed(fixed: FixedValues | undefined) {\n        if (fixed === this.fixed) return;\n        const oldValue = this.fixed;\n        this._fixed = fixed;\n        if (fixed) {\n            this.setAttribute('fixed', fixed);\n        } else {\n            this.removeAttribute('fixed');\n        }\n        this.requestUpdate('fixed', oldValue);\n    }\n\n    private _fixed?: FixedValues;\n\n    @property({ type: String, reflect: true })\n    public variant: BadgeVariant = 'informative';\n\n    protected get hasIcon(): boolean {\n        return this.slotContentIsPresent;\n    }\n\n    protected override render(): TemplateResult {\n        if (window.__swc.DEBUG) {\n            if (!BADGE_VARIANTS.includes(this.variant)) {\n                window.__swc.warn(\n                    this,\n                    `<${this.localName}> element expect the \"variant\" attribute to be one of the following:`,\n                    'https://opensource.adobe.com/spectrum-web-components/components/badge/#variants',\n                    {\n                        issues: [...BADGE_VARIANTS],\n                    }\n                );\n            }\n        }\n        return html`\n            ${this.hasIcon\n                ? html`\n                      <slot\n                          name=\"icon\"\n                          ?icon-only=${!this.slotHasContent}\n                      ></slot>\n                  `\n                : nothing}\n            <div class=\"label\">\n                <slot></slot>\n            </div>\n        `;\n    }\n}\n"],
-  "mappings": ";;;;;;;;;;;AAYA;AAAA,EAEI;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEG;AACP,SAAS,gBAAgB;AAEzB,SAAS,uBAAuB;AAChC,SAAS,2BAA2B;AACpC,OAAO,YAAY;AAEZ,aAAM,iBAAiB;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ;AAEO,aAAM,eAAe;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ;AASO,aAAM,cAAc;AAAA,EACvB,gBAAgB,oBAAoB,iBAAiB,eAAe,GAAG,EAAE;AAAA,EACzE;AAAA,IACI,eAAe;AAAA,EACnB;AACJ,EAAE;AAAA,EALK;AAAA;AA8BH,SAAO,UAAwB;AAAA;AAAA,EAxB/B,WAA2B,SAAyB;AAChD,WAAO,CAAC,MAAM;AAAA,EAClB;AAAA,EAGA,IAAW,QAAiC;AACxC,WAAO,KAAK;AAAA,EAChB;AAAA,EAEA,IAAW,MAAM,OAAgC;AAC7C,QAAI,UAAU,KAAK,MAAO;AAC1B,UAAM,WAAW,KAAK;AACtB,SAAK,SAAS;AACd,QAAI,OAAO;AACP,WAAK,aAAa,SAAS,KAAK;AAAA,IACpC,OAAO;AACH,WAAK,gBAAgB,OAAO;AAAA,IAChC;AACA,SAAK,cAAc,SAAS,QAAQ;AAAA,EACxC;AAAA,EAOA,IAAc,UAAmB;AAC7B,WAAO,KAAK;AAAA,EAChB;AAAA,EAEmB,SAAyB;AACxC,QAAI,MAAoB;AACpB,UAAI,CAAC,eAAe,SAAS,KAAK,OAAO,GAAG;AACxC,eAAO,MAAM;AAAA,UACT;AAAA,UACA,IAAI,KAAK,SAAS;AAAA,UAClB;AAAA,UACA;AAAA,YACI,QAAQ,CAAC,GAAG,cAAc;AAAA,UAC9B;AAAA,QACJ;AAAA,MACJ;AAAA,IACJ;AACA,WAAO;AAAA,cACD,KAAK,UACD;AAAA;AAAA;AAAA,uCAGqB,CAAC,KAAK,cAAc;AAAA;AAAA,sBAGzC,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EAKrB;AACJ;AApDe;AAAA,EADV,SAAS,EAAE,SAAS,KAAK,CAAC;AAAA,GAVlB,MAWE;AAmBJ;AAAA,EADN,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GA7BhC,MA8BF;",
+  "sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n    CSSResultArray,\n    html,\n    nothing,\n    TemplateResult,\n} from '@spectrum-web-components/base';\n\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\n\nimport {\n    BADGE_VARIANTS_COLOR_S1,\n    BADGE_VARIANTS_S1,\n    BadgeBase,\n    type BadgeVariantS1,\n    FIXED_VALUES as FIXED_VALUES_BASE,\n    type FixedValues as FixedValuesBase,\n} from '@spectrum-web-components/core-next/components/badge';\n\nimport styles from './badge.css.js';\n\n/**\n * @deprecated The `BADGE_VARIANTS` export is deprecated and will be removed\n * in a future release. If needed, you can access the internal\n * `Badge.VARIANTS` property from the constructor.\n */\nexport const BADGE_VARIANTS = BADGE_VARIANTS_S1;\n\n/**\n * @deprecated The `FIXED_VALUES` export is deprecated and will be removed\n * in a future release. If needed, you can access the internal\n * `Badge.FIXED_VALUES` property from the constructor.\n */\nexport const FIXED_VALUES = FIXED_VALUES_BASE;\n\n/**\n * @deprecated The `BadgeVariant` type export is deprecated and will be removed\n * in a future release. If needed, you can infer this type from the `Badge`\n * prototype as follows: `typeof Badge.prototype.variant`\n */\nexport type BadgeVariant = BadgeVariantS1;\n\n/**\n * @deprecated The `FixedValues` type export is deprecated and will be removed\n * in a future release. If needed, you can infer this type from the `Badge`\n * constructor as follows: `typeof Badge.FIXED_VALUES`\n */\nexport type FixedValues = FixedValuesBase;\n\n/**\n * @element sp-badge\n *\n * @slot - Text label of the badge\n * @slot icon - Optional icon that appears to the left of the label\n */\nexport class Badge extends BadgeBase {\n    // \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n    //     API OVERRIDES\n    // \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\n    /**\n     * @internal\n     */\n    static override readonly VARIANTS_COLOR = BADGE_VARIANTS_COLOR_S1;\n\n    /**\n     * @internal\n     */\n    static override readonly VARIANTS = BADGE_VARIANTS_S1;\n\n    /**\n     * The variant of the badge.\n     */\n    @property({ type: String, reflect: true })\n    public override variant: BadgeVariantS1 = 'informative';\n\n    // \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n    //     RENDERING & STYLING\n    // \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\n    public static override get styles(): CSSResultArray {\n        return [styles];\n    }\n\n    protected override render(): TemplateResult {\n        return html`\n            ${this.hasIcon\n                ? html`\n                      <slot\n                          name=\"icon\"\n                          ?icon-only=${!this.slotHasContent}\n                      ></slot>\n                  `\n                : nothing}\n            <div class=\"label\">\n                <slot></slot>\n            </div>\n        `;\n    }\n}\n"],
+  "mappings": ";;;;;;;;;;;AAYA;AAAA,EAEI;AAAA,EACA;AAAA,OAEG;AAEP,SAAS,gBAAgB;AAEzB;AAAA,EACI;AAAA,EACA;AAAA,EACA;AAAA,EAEA,gBAAgB;AAAA,OAEb;AAEP,OAAO,YAAY;AAOZ,aAAM,iBAAiB;AAOvB,aAAM,eAAe;AAsBrB,aAAM,cAAc,UAAU;AAAA,EAA9B;AAAA;AAmBH,SAAgB,UAA0B;AAAA;AAAA;AAAA;AAAA;AAAA,EAM1C,WAA2B,SAAyB;AAChD,WAAO,CAAC,MAAM;AAAA,EAClB;AAAA,EAEmB,SAAyB;AACxC,WAAO;AAAA,cACD,KAAK,UACD;AAAA;AAAA;AAAA,uCAGqB,CAAC,KAAK,cAAc;AAAA;AAAA,sBAGzC,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EAKrB;AACJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA5Ca,MAQgB,iBAAiB;AAAA;AAAA;AAAA;AARjC,MAagB,WAAW;AAMpB;AAAA,EADf,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAlBhC,MAmBO;",
   "names": []
 }

package/src/Badge.js

@@ -1,12 +1,12 @@
-"use strict";var u=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var a=(o,r,e,i)=>{for(var t=i>1?void 0:i?p(r,e):r,s=o.length-1,n;s>=0;s--)(n=o[s])&&(t=(i?n(r,e,t):n(t))||t);return i&&t&&u(r,e,t),t};import{html as l,nothing as d,SizedMixin as f,SpectrumElement as m}from"@spectrum-web-components/base";import{property as c}from"@spectrum-web-components/base/src/decorators.js";import{ObserveSlotText as h}from"@spectrum-web-components/shared/src/observe-slot-text.js";import{ObserveSlotPresence as b}from"@spectrum-web-components/shared/src/observe-slot-presence.js";import x from"./badge.css.js";export const BADGE_VARIANTS=["accent","neutral","informative","positive","negative","notice","fuchsia","indigo","magenta","purple","seafoam","yellow","gray","red","orange","chartreuse","celery","green","cyan","blue"],FIXED_VALUES=["inline-start","inline-end","block-start","block-end"];export class Badge extends f(h(b(m,'[slot="icon"]'),""),{noDefaultSize:!0}){constructor(){super(...arguments);this.variant="informative"}static get styles(){return[x]}get fixed(){return this._fixed}set fixed(e){if(e===this.fixed)return;const i=this.fixed;this._fixed=e,e?this.setAttribute("fixed",e):this.removeAttribute("fixed"),this.requestUpdate("fixed",i)}get hasIcon(){return this.slotContentIsPresent}render(){return l`
-            ${this.hasIcon?l`
+"use strict";var d=Object.defineProperty;var A=Object.getOwnPropertyDescriptor;var l=(a,t,o,r)=>{for(var e=r>1?void 0:r?A(t,o):t,s=a.length-1,i;s>=0;s--)(i=a[s])&&(e=(r?i(t,o,e):i(e))||e);return r&&e&&d(t,o,e),e};import{html as n,nothing as S}from"@spectrum-web-components/base";import{property as V}from"@spectrum-web-components/base/src/decorators.js";import{BADGE_VARIANTS_COLOR_S1 as c,BADGE_VARIANTS_S1 as p,BadgeBase as m,FIXED_VALUES as u}from"@spectrum-web-components/core-next/components/badge";import y from"./badge.css.js";export const BADGE_VARIANTS=p,FIXED_VALUES=u;export class Badge extends m{constructor(){super(...arguments);this.variant="informative"}static get styles(){return[y]}render(){return n`
+            ${this.hasIcon?n`
                       <slot
                           name="icon"
                           ?icon-only=${!this.slotHasContent}
                       ></slot>
-                  `:d}
+                  `:S}
             <div class="label">
                 <slot></slot>
             </div>
-        `}}a([c({reflect:!0})],Badge.prototype,"fixed",1),a([c({type:String,reflect:!0})],Badge.prototype,"variant",2);
+        `}}Badge.VARIANTS_COLOR=c,Badge.VARIANTS=p,l([V({type:String,reflect:!0})],Badge.prototype,"variant",2);
 //# sourceMappingURL=Badge.js.map

package/src/Badge.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["Badge.ts"],
-  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n    CSSResultArray,\n    html,\n    nothing,\n    SizedMixin,\n    SpectrumElement,\n    TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\n\nimport { ObserveSlotText } from '@spectrum-web-components/shared/src/observe-slot-text.js';\nimport { ObserveSlotPresence } from '@spectrum-web-components/shared/src/observe-slot-presence.js';\nimport styles from './badge.css.js';\n\nexport const BADGE_VARIANTS = [\n    'accent',\n    'neutral',\n    'informative',\n    'positive',\n    'negative',\n    'notice',\n    'fuchsia',\n    'indigo',\n    'magenta',\n    'purple',\n    'seafoam',\n    'yellow',\n    'gray',\n    'red',\n    'orange',\n    'chartreuse',\n    'celery',\n    'green',\n    'cyan',\n    'blue',\n] as const;\nexport type BadgeVariant = (typeof BADGE_VARIANTS)[number];\nexport const FIXED_VALUES = [\n    'inline-start',\n    'inline-end',\n    'block-start',\n    'block-end',\n] as const;\nexport type FixedValues = (typeof FIXED_VALUES)[number];\n\n/**\n * @element sp-badge\n *\n * @slot - Text label of the badge\n * @slot icon - Optional icon that appears to the left of the label\n */\nexport class Badge extends SizedMixin(\n    ObserveSlotText(ObserveSlotPresence(SpectrumElement, '[slot=\"icon\"]'), ''),\n    {\n        noDefaultSize: true,\n    }\n) {\n    public static override get styles(): CSSResultArray {\n        return [styles];\n    }\n\n    @property({ reflect: true })\n    public get fixed(): FixedValues | undefined {\n        return this._fixed;\n    }\n\n    public set fixed(fixed: FixedValues | undefined) {\n        if (fixed === this.fixed) return;\n        const oldValue = this.fixed;\n        this._fixed = fixed;\n        if (fixed) {\n            this.setAttribute('fixed', fixed);\n        } else {\n            this.removeAttribute('fixed');\n        }\n        this.requestUpdate('fixed', oldValue);\n    }\n\n    private _fixed?: FixedValues;\n\n    @property({ type: String, reflect: true })\n    public variant: BadgeVariant = 'informative';\n\n    protected get hasIcon(): boolean {\n        return this.slotContentIsPresent;\n    }\n\n    protected override render(): TemplateResult {\n        if (window.__swc.DEBUG) {\n            if (!BADGE_VARIANTS.includes(this.variant)) {\n                window.__swc.warn(\n                    this,\n                    `<${this.localName}> element expect the \"variant\" attribute to be one of the following:`,\n                    'https://opensource.adobe.com/spectrum-web-components/components/badge/#variants',\n                    {\n                        issues: [...BADGE_VARIANTS],\n                    }\n                );\n            }\n        }\n        return html`\n            ${this.hasIcon\n                ? html`\n                      <slot\n                          name=\"icon\"\n                          ?icon-only=${!this.slotHasContent}\n                      ></slot>\n                  `\n                : nothing}\n            <div class=\"label\">\n                <slot></slot>\n            </div>\n        `;\n    }\n}\n"],
-  "mappings": "qNAYA,OAEI,QAAAA,EACA,WAAAC,EACA,cAAAC,EACA,mBAAAC,MAEG,gCACP,OAAS,YAAAC,MAAgB,kDAEzB,OAAS,mBAAAC,MAAuB,2DAChC,OAAS,uBAAAC,MAA2B,+DACpC,OAAOC,MAAY,iBAEZ,aAAM,eAAiB,CAC1B,SACA,UACA,cACA,WACA,WACA,SACA,UACA,SACA,UACA,SACA,UACA,SACA,OACA,MACA,SACA,aACA,SACA,QACA,OACA,MACJ,EAEa,aAAe,CACxB,eACA,aACA,cACA,WACJ,EASO,aAAM,cAAcL,EACvBG,EAAgBC,EAAoBH,EAAiB,eAAe,EAAG,EAAE,EACzE,CACI,cAAe,EACnB,CACJ,CAAE,CALK,kCA8BH,KAAO,QAAwB,cAxB/B,WAA2B,QAAyB,CAChD,MAAO,CAACI,CAAM,CAClB,CAGA,IAAW,OAAiC,CACxC,OAAO,KAAK,MAChB,CAEA,IAAW,MAAMC,EAAgC,CAC7C,GAAIA,IAAU,KAAK,MAAO,OAC1B,MAAMC,EAAW,KAAK,MACtB,KAAK,OAASD,EACVA,EACA,KAAK,aAAa,QAASA,CAAK,EAEhC,KAAK,gBAAgB,OAAO,EAEhC,KAAK,cAAc,QAASC,CAAQ,CACxC,CAOA,IAAc,SAAmB,CAC7B,OAAO,KAAK,oBAChB,CAEmB,QAAyB,CAaxC,OAAOT;AAAA,cACD,KAAK,QACDA;AAAA;AAAA;AAAA,uCAGqB,CAAC,KAAK,cAAc;AAAA;AAAA,oBAGzCC,CAAO;AAAA;AAAA;AAAA;AAAA,SAKrB,CACJ,CApDeS,EAAA,CADVN,EAAS,CAAE,QAAS,EAAK,CAAC,GAVlB,MAWE,qBAmBJM,EAAA,CADNN,EAAS,CAAE,KAAM,OAAQ,QAAS,EAAK,CAAC,GA7BhC,MA8BF",
-  "names": ["html", "nothing", "SizedMixin", "SpectrumElement", "property", "ObserveSlotText", "ObserveSlotPresence", "styles", "fixed", "oldValue", "__decorateClass"]
+  "sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n    CSSResultArray,\n    html,\n    nothing,\n    TemplateResult,\n} from '@spectrum-web-components/base';\n\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\n\nimport {\n    BADGE_VARIANTS_COLOR_S1,\n    BADGE_VARIANTS_S1,\n    BadgeBase,\n    type BadgeVariantS1,\n    FIXED_VALUES as FIXED_VALUES_BASE,\n    type FixedValues as FixedValuesBase,\n} from '@spectrum-web-components/core-next/components/badge';\n\nimport styles from './badge.css.js';\n\n/**\n * @deprecated The `BADGE_VARIANTS` export is deprecated and will be removed\n * in a future release. If needed, you can access the internal\n * `Badge.VARIANTS` property from the constructor.\n */\nexport const BADGE_VARIANTS = BADGE_VARIANTS_S1;\n\n/**\n * @deprecated The `FIXED_VALUES` export is deprecated and will be removed\n * in a future release. If needed, you can access the internal\n * `Badge.FIXED_VALUES` property from the constructor.\n */\nexport const FIXED_VALUES = FIXED_VALUES_BASE;\n\n/**\n * @deprecated The `BadgeVariant` type export is deprecated and will be removed\n * in a future release. If needed, you can infer this type from the `Badge`\n * prototype as follows: `typeof Badge.prototype.variant`\n */\nexport type BadgeVariant = BadgeVariantS1;\n\n/**\n * @deprecated The `FixedValues` type export is deprecated and will be removed\n * in a future release. If needed, you can infer this type from the `Badge`\n * constructor as follows: `typeof Badge.FIXED_VALUES`\n */\nexport type FixedValues = FixedValuesBase;\n\n/**\n * @element sp-badge\n *\n * @slot - Text label of the badge\n * @slot icon - Optional icon that appears to the left of the label\n */\nexport class Badge extends BadgeBase {\n    // \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n    //     API OVERRIDES\n    // \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\n    /**\n     * @internal\n     */\n    static override readonly VARIANTS_COLOR = BADGE_VARIANTS_COLOR_S1;\n\n    /**\n     * @internal\n     */\n    static override readonly VARIANTS = BADGE_VARIANTS_S1;\n\n    /**\n     * The variant of the badge.\n     */\n    @property({ type: String, reflect: true })\n    public override variant: BadgeVariantS1 = 'informative';\n\n    // \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n    //     RENDERING & STYLING\n    // \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\n    public static override get styles(): CSSResultArray {\n        return [styles];\n    }\n\n    protected override render(): TemplateResult {\n        return html`\n            ${this.hasIcon\n                ? html`\n                      <slot\n                          name=\"icon\"\n                          ?icon-only=${!this.slotHasContent}\n                      ></slot>\n                  `\n                : nothing}\n            <div class=\"label\">\n                <slot></slot>\n            </div>\n        `;\n    }\n}\n"],
+  "mappings": "qNAYA,OAEI,QAAAA,EACA,WAAAC,MAEG,gCAEP,OAAS,YAAAC,MAAgB,kDAEzB,OACI,2BAAAC,EACA,qBAAAC,EACA,aAAAC,EAEA,gBAAgBC,MAEb,sDAEP,OAAOC,MAAY,iBAOZ,aAAM,eAAiBH,EAOjB,aAAeE,EAsBrB,aAAM,cAAcD,CAAU,CAA9B,kCAmBH,KAAgB,QAA0B,cAM1C,WAA2B,QAAyB,CAChD,MAAO,CAACE,CAAM,CAClB,CAEmB,QAAyB,CACxC,OAAOP;AAAA,cACD,KAAK,QACDA;AAAA;AAAA;AAAA,uCAGqB,CAAC,KAAK,cAAc;AAAA;AAAA,oBAGzCC,CAAO;AAAA;AAAA;AAAA;AAAA,SAKrB,CACJ,CA5Ca,MAQgB,eAAiBE,EARjC,MAagB,SAAWC,EAMpBI,EAAA,CADfN,EAAS,CAAE,KAAM,OAAQ,QAAS,EAAK,CAAC,GAlBhC,MAmBO",
+  "names": ["html", "nothing", "property", "BADGE_VARIANTS_COLOR_S1", "BADGE_VARIANTS_S1", "BadgeBase", "FIXED_VALUES_BASE", "styles", "__decorateClass"]
 }