@redvars/peacock 3.1.2 → 3.1.3

package/dist/utils-DD_cg6Ms.js

@@ -0,0 +1,157 @@
+import { n } from './property-BXcRN0hQ.js';
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */function r(r){return n({...r,state:true,attribute:false})}
+
+async function createCacheFetch(name) {
+    let cache = null;
+    // This map tracks requests currently being processed
+    const inFlightRequests = new Map();
+    try {
+        cache = await window.caches.open(name);
+    }
+    catch (e) {
+        console.warn('window.caches access not allowed');
+    }
+    return async (url) => {
+        // 1. Check if we are already fetching this URL
+        if (inFlightRequests.has(url)) {
+            // Return the existing promise instead of starting a new one
+            return inFlightRequests.get(url);
+        }
+        // 2. Create the main logic as a promise
+        const fetchPromise = (async () => {
+            const request = new Request(url);
+            // Check Cache first
+            if (cache) {
+                const cachedResponse = await cache.match(request);
+                if (cachedResponse) {
+                    return cachedResponse.text();
+                }
+            }
+            // Prepare network request
+            const urlObj = new URL(request.url);
+            const isSameOrigin = urlObj.origin === window.location.origin;
+            const response = await fetch(request.url, {
+                method: 'GET',
+                mode: isSameOrigin ? 'no-cors' : 'cors',
+                credentials: isSameOrigin ? 'same-origin' : 'omit',
+            });
+            // --- Handle 404 ---
+            if (response.status === 404) {
+                console.error(`[Fetch Error] Resource not found (404): ${url}`);
+                return ''; // Return empty string as requested
+            }
+            const result = await response.text();
+            // Update Cache if applicable
+            if (cache && response.status === 200) {
+                // We clone the response logic by creating a new Response with the text body
+                await cache.put(request, new Response(result, {
+                    status: response.status,
+                    statusText: response.statusText,
+                    headers: response.headers,
+                }));
+            }
+            return result;
+        })();
+        // 3. Store the promise in the map
+        inFlightRequests.set(url, fetchPromise);
+        try {
+            // 4. Wait for the result
+            return await fetchPromise;
+        }
+        finally {
+            // 5. Clean up: Remove the promise from the map when done
+            // This ensures subsequent calls (after this one finishes) can start fresh
+            inFlightRequests.delete(url);
+        }
+    };
+}
+// Basic sanitization: remove <script>, <foreignObject>, event handler attributes (on*), and iframes
+function sanitizeSvg(rawSvg) {
+    try {
+        const parser = new DOMParser();
+        const doc = parser.parseFromString(rawSvg, 'image/svg+xml');
+        // remove script tags
+        const scripts = Array.from(doc.querySelectorAll('script'));
+        scripts.forEach(n => n.remove());
+        // remove foreignObject and iframe-like elements
+        const foreigns = Array.from(doc.querySelectorAll('foreignObject, iframe'));
+        foreigns.forEach(n => n.remove());
+        // remove event handler attributes like onload, onclick, etc.
+        const all = Array.from(doc.querySelectorAll('*'));
+        all.forEach(el => {
+            const attrs = Array.from(el.attributes).filter(a => /^on/i.test(a.name));
+            attrs.forEach(a => el.removeAttribute(a.name));
+        });
+        const el = doc.documentElement;
+        if (!el)
+            return '';
+        // serialize back to string
+        const serializer = new XMLSerializer();
+        return serializer.serializeToString(el);
+    }
+    catch (e) {
+        // parsing failed; fall back to empty content to avoid injecting unsafe content
+        return '';
+    }
+}
+function __hasMeaningfulContent(slotElement) {
+    const nodes = slotElement.assignedNodes({ flatten: true });
+    for (const node of nodes) {
+        // If it's an element node, it has content
+        if (node.nodeType === Node.ELEMENT_NODE) {
+            return true;
+        }
+        // If it's a text node and contains non-whitespace characters, it has content
+        if (node.nodeType === Node.TEXT_NODE &&
+            node.textContent.trim().length > 0) {
+            return true;
+        }
+    }
+    // No meaningful content found
+    return false;
+}
+function observerSlotChangesWithCallback(slot, callback) {
+    const observer = new MutationObserver(() => {
+        callback(__hasMeaningfulContent(slot));
+    });
+    // Observe the elements currently assigned to the slot
+    const assignedNodes = slot?.assignedNodes({ flatten: true }) || [];
+    assignedNodes.forEach(node => {
+        observer.observe(node, {
+            attributes: true,
+            childList: true,
+            characterData: true,
+            subtree: true,
+        });
+    });
+    callback(__hasMeaningfulContent(slot));
+}
+function throttle(func, delay, options = { leading: true, trailing: true }) {
+    let timerId;
+    let lastExec = 0;
+    return function (...args) {
+        // @ts-ignore
+        const context = this;
+        const now = Date.now();
+        const shouldCallNow = options.leading && now - lastExec >= delay;
+        if (shouldCallNow) {
+            func.apply(context, args);
+            lastExec = now;
+        }
+        else if (options.trailing && !timerId) {
+            timerId = setTimeout(() => {
+                func.apply(context, args);
+                lastExec = Date.now();
+                timerId = null;
+            }, delay);
+        }
+    };
+}
+
+export { createCacheFetch as c, observerSlotChangesWithCallback as o, r, sanitizeSvg as s, throttle as t };
+//# sourceMappingURL=utils-DD_cg6Ms.js.map

package/dist/utils-DD_cg6Ms.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils-DD_cg6Ms.js","sources":["../node_modules/@lit/reactive-element/decorators/state.js","../../src/utils.ts"],"sourcesContent":["import{property as t}from\"./property.js\";\n/**\n * @license\n * Copyright 2017 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */function r(r){return t({...r,state:!0,attribute:!1})}export{r as state};\n//# sourceMappingURL=state.js.map\n","export async function createCacheFetch(name: string) {\n  let cache: Cache | null = null;\n  // This map tracks requests currently being processed\n  const inFlightRequests = new Map<string, Promise<string>>();\n\n  try {\n    cache = await window.caches.open(name);\n  } catch (e) {\n    console.warn('window.caches access not allowed');\n  }\n\n  return async (url: string): Promise<string> => {\n    // 1. Check if we are already fetching this URL\n    if (inFlightRequests.has(url)) {\n      // Return the existing promise instead of starting a new one\n      return inFlightRequests.get(url)!;\n    }\n\n    // 2. Create the main logic as a promise\n    const fetchPromise = (async () => {\n      const request = new Request(url);\n\n      // Check Cache first\n      if (cache) {\n        const cachedResponse = await cache.match(request);\n        if (cachedResponse) {\n          return cachedResponse.text();\n        }\n      }\n\n      // Prepare network request\n      const urlObj = new URL(request.url);\n      const isSameOrigin = urlObj.origin === window.location.origin;\n\n      const response = await fetch(request.url, {\n        method: 'GET',\n        mode: isSameOrigin ? 'no-cors' : 'cors',\n        credentials: isSameOrigin ? 'same-origin' : 'omit',\n      });\n\n      // --- Handle 404 ---\n      if (response.status === 404) {\n        console.error(`[Fetch Error] Resource not found (404): ${url}`);\n        return ''; // Return empty string as requested\n      }\n\n      const result = await response.text();\n\n      // Update Cache if applicable\n      if (cache && response.status === 200) {\n        // We clone the response logic by creating a new Response with the text body\n        await cache.put(\n          request,\n          new Response(result, {\n            status: response.status,\n            statusText: response.statusText,\n            headers: response.headers,\n          }),\n        );\n      }\n\n      return result;\n    })();\n\n    // 3. Store the promise in the map\n    inFlightRequests.set(url, fetchPromise);\n\n    try {\n      // 4. Wait for the result\n      return await fetchPromise;\n    } finally {\n      // 5. Clean up: Remove the promise from the map when done\n      // This ensures subsequent calls (after this one finishes) can start fresh\n      inFlightRequests.delete(url);\n    }\n  };\n}\n\n// Basic sanitization: remove <script>, <foreignObject>, event handler attributes (on*), and iframes\nexport function sanitizeSvg(rawSvg: string) {\n  try {\n    const parser = new DOMParser();\n    const doc = parser.parseFromString(rawSvg, 'image/svg+xml');\n\n    // remove script tags\n    const scripts = Array.from(doc.querySelectorAll('script'));\n    scripts.forEach(n => n.remove());\n\n    // remove foreignObject and iframe-like elements\n    const foreigns = Array.from(doc.querySelectorAll('foreignObject, iframe'));\n    foreigns.forEach(n => n.remove());\n\n    // remove event handler attributes like onload, onclick, etc.\n    const all = Array.from(doc.querySelectorAll('*'));\n    all.forEach(el => {\n      const attrs = Array.from(el.attributes).filter(a => /^on/i.test(a.name));\n      attrs.forEach(a => el.removeAttribute(a.name));\n    });\n\n    const el = doc.documentElement;\n    if (!el) return '';\n\n    // serialize back to string\n    const serializer = new XMLSerializer();\n    return serializer.serializeToString(el);\n  } catch (e) {\n    // parsing failed; fall back to empty content to avoid injecting unsafe content\n    return '';\n  }\n}\n\nfunction __hasMeaningfulContent(slotElement: any) {\n  const nodes = slotElement.assignedNodes({ flatten: true });\n\n  for (const node of nodes) {\n    // If it's an element node, it has content\n    if (node.nodeType === Node.ELEMENT_NODE) {\n      return true;\n    }\n    // If it's a text node and contains non-whitespace characters, it has content\n    if (\n      node.nodeType === Node.TEXT_NODE &&\n      node.textContent.trim().length > 0\n    ) {\n      return true;\n    }\n  }\n\n  // No meaningful content found\n  return false;\n}\n\nexport function observerSlotChangesWithCallback(\n  slot: HTMLSlotElement | null,\n  callback: (hasContent: boolean) => void,\n) {\n  const observer = new MutationObserver(() => {\n    callback(__hasMeaningfulContent(slot));\n  });\n\n  // Observe the elements currently assigned to the slot\n  const assignedNodes = slot?.assignedNodes({ flatten: true }) || [];\n  assignedNodes.forEach(node => {\n    observer.observe(node, {\n      attributes: true,\n      childList: true,\n      characterData: true,\n      subtree: true,\n    });\n  });\n\n  callback(__hasMeaningfulContent(slot));\n}\n\nexport function throttle(\n  func: Function,\n  delay: number,\n  options = { leading: true, trailing: true },\n) {\n  let timerId: any;\n  let lastExec = 0;\n\n  return function (...args: any[]) {\n    // @ts-ignore\n    const context = this;\n    const now = Date.now();\n\n    const shouldCallNow = options.leading && now - lastExec >= delay;\n\n    if (shouldCallNow) {\n      func.apply(context, args);\n      lastExec = now;\n    } else if (options.trailing && !timerId) {\n      timerId = setTimeout(() => {\n        func.apply(context, args);\n        lastExec = Date.now();\n        timerId = null;\n      }, delay);\n    }\n  };\n}\n"],"names":["t"],"mappings":"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","x_google_ignoreList":[0]}

package/dist/utils.d.ts

@@ -0,0 +1,8 @@
+export declare function createCacheFetch(name: string): Promise<(url: string) => Promise<string>>;
+export declare function sanitizeSvg(rawSvg: string): string;
+export declare function observerSlotChangesWithCallback(slot: HTMLSlotElement | null, callback: (hasContent: boolean) => void): void;
+export declare function throttle(func: Function, delay: number, options?: {
+    leading: boolean;
+    trailing: boolean;
+}): (...args: any[]) => void;
+//# sourceMappingURL=utils.d.ts.map

package/dist/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAAA,wBAAsB,gBAAgB,CAAC,IAAI,EAAE,MAAM,iBAW9B,MAAM,KAAG,OAAO,CAAC,MAAM,CAAC,EAiE5C;AAGD,wBAAgB,WAAW,CAAC,MAAM,EAAE,MAAM,UA8BzC;AAuBD,wBAAgB,+BAA+B,CAC7C,IAAI,EAAE,eAAe,GAAG,IAAI,EAC5B,QAAQ,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,QAkBxC;AAED,wBAAgB,QAAQ,CACtB,IAAI,EAAE,QAAQ,EACd,KAAK,EAAE,MAAM,EACb,OAAO;;;CAAoC,IAK1B,GAAG,MAAM,GAAG,EAAE,UAkBhC"}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@redvars/peacock",
   "description": "The foundation for beautiful user interfaces",
   "license": "Apache-2.0",
-  "version": "3.1.2",
+  "version": "3.1.3",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -28,7 +28,9 @@
   },
   "dependencies": {
     "@redvars/peacock-design-tokens": "^0.1.0",
-    "lit": "^3.1.4"
+    "lit": "^3.1.4",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-postcss-lit": "^2.2.0"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.10.3",

package/readme.md

@@ -45,7 +45,7 @@ Visit [https://peacock.redvars.com](https://goatui.com) to view the documentatio
   <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wght@100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
 
   <script type='module'
-          src='https://cdn.jsdelivr.net/npm/@redvars/peacock@3.1.1/dist/peacock-loader.js'></script>
+          src='https://cdn.jsdelivr.net/npm/@redvars/peacock@3.1.2/dist/peacock-loader.js'></script>
 </head>
 
 <p-avatar name="Shivaji Varma"></p-avatar>

package/rollup.config.js

@@ -4,6 +4,9 @@ import css from 'rollup-plugin-import-css';
 import copy from 'rollup-plugin-copy';
 import { readFile } from 'node:fs/promises';
 import { glob } from 'glob';
+import postcssLit from 'rollup-plugin-postcss-lit';
+import postcss from 'rollup-plugin-postcss';
+import commonjs from '@rollup/plugin-commonjs';
 
 export default async function () {
   const files = await findLitComponents();
@@ -17,8 +20,13 @@ export default async function () {
       },
       plugins: [
         typescript(), // The plugin loads options from tsconfig.json by default
-        css(),
         nodeResolve(),
+        commonjs(),
+        postcss(),
+        postcssLit({
+          include: 'src/**/*.scss',
+        }),
+
         copy({
           targets: [
             {

package/scss/mixin.scss

@@ -0,0 +1,50 @@
+
+@mixin get-typography($name) {
+  font-family: var(--typography-#{$name}-font-family) !important;
+  font-size:  var(--typography-#{$name}-font-size) !important;
+  font-weight: var(--typography-#{$name}-font-weight) !important;
+  line-height: var(--typography-#{$name}-line-height) !important;
+  letter-spacing: var(--typography-#{$name}-letter-spacing) !important;
+}
+
+@mixin get-typography-not-important($name) {
+  font-family: var(--typography-#{$name}-font-family);
+  font-size:  var(--typography-#{$name}-font-size);
+  font-weight: var(--typography-#{$name}-font-weight);
+  line-height: var(--typography-#{$name}-line-height);
+  letter-spacing: var(--typography-#{$name}-letter-spacing);
+}
+
+@mixin focus-ring($color:var(--color-black)) {
+  outline: 2px solid $color;
+}
+
+@mixin for-phone-only {
+  @media (max-width: 671px) {
+    @content;
+  }
+}
+
+@mixin for-tablet-portrait-up {
+  @media (min-width: 672px) {
+    @content;
+  }
+}
+
+@mixin for-tablet-landscape-up {
+  @media (min-width: 1056px) {
+    @content;
+  }
+}
+
+@mixin for-desktop-up {
+  @media (min-width: 1312px) {
+    @content;
+  }
+}
+
+@mixin for-big-desktop-up {
+  @media (min-width: 1584px) {
+    @content;
+  }
+}

package/src/LoaderUtils.ts

@@ -1,122 +1,122 @@
-interface ComponentConfig {
-  CustomElementClass?: any; // earger load
-  importPath?: string; // lazy load
-  dependencies?: string[];
-}
-
-interface LoaderConfig {
-  prefix?: string;
-  components?: Record<string, ComponentConfig>;
-}
-
-export { LoaderConfig };
-
-export class LoaderUtils {
-  private _loaderConfig: LoaderConfig;
-
-  private _observer: MutationObserver | undefined;
-
-  constructor(private loaderConfig: LoaderConfig) {
-    this._loaderConfig = loaderConfig;
-  }
-
-  static registerComponent(tagName: string, CustomElementClass: any) {
-    if (CustomElementClass && !customElements.get(tagName)) {
-      customElements.define(tagName, CustomElementClass);
-    }
-  }
-
-  start() {
-    this.eagerLoadComponents();
-    this.lazyLoadComponents(document);
-  }
-
-  eagerLoadComponents() {
-    if (!this._loaderConfig.components) return;
-    for (const [name, value] of Object.entries(this._loaderConfig.components)) {
-      if (value.CustomElementClass)
-        LoaderUtils.registerComponent(
-          this.getFullTagName(name),
-          value.CustomElementClass,
-        );
-    }
-  }
-
-  getFullTagName(name: string) {
-    return `${this._loaderConfig.prefix}-${name}`;
-  }
-
-  async registerAsync(tagName: string): Promise<void> {
-    if (customElements.get(tagName)) return;
-
-    const baseName = tagName.replace(`${this._loaderConfig.prefix}-`, '');
-
-    if (!this._loaderConfig.components) return;
-
-    const config = this._loaderConfig.components[baseName];
-    if (!config || !config.importPath) return;
-
-    try {
-      const module = await import(config.importPath);
-
-      // Runtime definition: grabbing the class from the module
-      const CustomElementClass =
-        module.default || module[Object.keys(module)[0]];
-
-      if (CustomElementClass && !customElements.get(tagName)) {
-        customElements.define(tagName, CustomElementClass);
-      }
-
-      // Handle dependencies recursively
-      if (config.dependencies) {
-        for (const dep of config.dependencies) {
-          // eslint-disable-next-line no-await-in-loop
-          await this.registerAsync(this.getFullTagName(dep));
-        }
-      }
-    } catch (error) {
-      console.error(
-        `Unable to load <${tagName}> from ${config.importPath}`,
-        error,
-      );
-    }
-  }
-
-  async load(root: Element | Document): Promise<void> {
-    const rootTagName =
-      root instanceof Element ? root.tagName.toLowerCase() : '';
-
-    const tags = Array.from(root.querySelectorAll(':not(:defined)')).map(el =>
-      el.tagName.toLowerCase(),
-    );
-
-    if (rootTagName.includes('-') && !customElements.get(rootTagName)) {
-      tags.push(rootTagName);
-    }
-
-    const tagsToRegister = [...new Set(tags)];
-    await Promise.allSettled(
-      tagsToRegister.map(tagName => this.registerAsync(tagName)),
-    );
-  }
-
-  lazyLoadComponents(root: any) {
-    this._observer = new MutationObserver(mutations => {
-      for (const { addedNodes } of mutations) {
-        for (const node of addedNodes) {
-          if (node.nodeType === Node.ELEMENT_NODE) {
-            this.load(node as Element);
-          }
-        }
-      }
-    });
-
-    const target = root instanceof Document ? root.documentElement : root;
-    this.load(target);
-
-    this._observer.observe(target, {
-      subtree: true,
-      childList: true,
-    });
-  }
-}
+interface ComponentConfig {
+  CustomElementClass?: any; // earger load
+  importPath?: string; // lazy load
+  dependencies?: string[];
+}
+
+interface LoaderConfig {
+  prefix?: string;
+  components?: Record<string, ComponentConfig>;
+}
+
+export { LoaderConfig };
+
+export class LoaderUtils {
+  private _loaderConfig: LoaderConfig;
+
+  private _observer: MutationObserver | undefined;
+
+  constructor(loaderConfig: LoaderConfig) {
+    this._loaderConfig = loaderConfig;
+  }
+
+  static registerComponent(tagName: string, CustomElementClass: any) {
+    if (CustomElementClass && !customElements.get(tagName)) {
+      customElements.define(tagName, CustomElementClass);
+    }
+  }
+
+  start() {
+    this.eagerLoadComponents();
+    this.lazyLoadComponents(document);
+  }
+
+  eagerLoadComponents() {
+    if (!this._loaderConfig.components) return;
+    for (const [name, value] of Object.entries(this._loaderConfig.components)) {
+      if (value.CustomElementClass)
+        LoaderUtils.registerComponent(
+          this.getFullTagName(name),
+          value.CustomElementClass,
+        );
+    }
+  }
+
+  getFullTagName(name: string) {
+    return `${this._loaderConfig.prefix}-${name}`;
+  }
+
+  async registerAsync(tagName: string): Promise<void> {
+    if (customElements.get(tagName)) return;
+
+    const baseName = tagName.replace(`${this._loaderConfig.prefix}-`, '');
+
+    if (!this._loaderConfig.components) return;
+
+    const config = this._loaderConfig.components[baseName];
+    if (!config || !config.importPath) return;
+
+    try {
+      const module = await import(config.importPath);
+
+      // Runtime definition: grabbing the class from the module
+      const CustomElementClass =
+        module.default || module[Object.keys(module)[0]];
+
+      if (CustomElementClass && !customElements.get(tagName)) {
+        customElements.define(tagName, CustomElementClass);
+      }
+
+      // Handle dependencies recursively
+      if (config.dependencies) {
+        for (const dep of config.dependencies) {
+          // eslint-disable-next-line no-await-in-loop
+          await this.registerAsync(this.getFullTagName(dep));
+        }
+      }
+    } catch (error) {
+      console.error(
+        `Unable to load <${tagName}> from ${config.importPath}`,
+        error,
+      );
+    }
+  }
+
+  async load(root: Element | Document): Promise<void> {
+    const rootTagName =
+      root instanceof Element ? root.tagName.toLowerCase() : '';
+
+    const tags = Array.from(root.querySelectorAll(':not(:defined)')).map(el =>
+      el.tagName.toLowerCase(),
+    );
+
+    if (rootTagName.includes('-') && !customElements.get(rootTagName)) {
+      tags.push(rootTagName);
+    }
+
+    const tagsToRegister = [...new Set(tags)];
+    await Promise.allSettled(
+      tagsToRegister.map(tagName => this.registerAsync(tagName)),
+    );
+  }
+
+  lazyLoadComponents(root: any) {
+    this._observer = new MutationObserver(mutations => {
+      for (const { addedNodes } of mutations) {
+        for (const node of addedNodes) {
+          if (node.nodeType === Node.ELEMENT_NODE) {
+            this.load(node as Element);
+          }
+        }
+      }
+    });
+
+    const target = root instanceof Document ? root.documentElement : root;
+    this.load(target);
+
+    this._observer.observe(target, {
+      subtree: true,
+      childList: true,
+    });
+  }
+}

package/src/avatar/avatar.scss

@@ -0,0 +1,38 @@
+@use '../../scss/mixin';
+
+:host {
+  display: inline-block;
+  pointer-events: none;
+  --avatar-size: 2rem;
+  --avatar-background-color: var(--color-primary);
+  --avatar-text-color: var(--color-on-primary);
+  --avatar-border-radius: var(--global-avatar-border-radius);
+}
+
+.avatar-container {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-050);
+  line-height: 0;
+}
+
+.avatar {
+  border-radius: var(--avatar-border-radius);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: var(--avatar-text-color);
+  width: var(--avatar-size);
+  height: var(--avatar-size);
+  @include mixin.get-typography('body-large-emphasized');
+  background-color: var(--avatar-background-color);
+
+  font-size: calc(var(--avatar-size) * 0.4);
+
+  .image {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    border-radius: inherit;
+  }
+}

package/src/avatar/avatar.ts

@@ -1,7 +1,7 @@
 import { html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { styles } from './avatar.css.js';
+import styles from './avatar.scss';
 
 /**
  * @label Avatar

package/src/badge/badge.scss

@@ -0,0 +1,31 @@
+@use '../../scss/mixin';
+
+:host {
+  display: inline-block;
+  --badge-color: var(--global-badge-color);
+}
+
+.badge {
+  pointer-events: none;
+  z-index: var(--z-index-badge);
+  color: var(--color-white);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: var(--badge-color);
+  border-radius: var(--shape-corner-full);
+  box-sizing: border-box;
+
+  &.slot-has-content {
+    height: 1rem;
+    min-width: 1rem;
+    padding-inline: var(--spacing-050);
+    @include mixin.get-typography('label-small');
+    color: var(--color-on-error);
+  }
+
+  &:not(.slot-has-content) {
+    height: 0.375rem;
+    width: 0.375rem;
+  }
+}

package/src/badge/badge.ts

@@ -1,7 +1,7 @@
 import { html, LitElement } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { styles } from './badge.css.js';
+import styles from './badge.scss';
 import { observerSlotChangesWithCallback } from '../utils.js';
 
 /**