@shortfuse/materialdesignweb 0.7.6 → 0.9.0

package/mixins/TouchTargetMixin.js

@@ -1,12 +1,13 @@
 /** @param {typeof import('../core/CustomElement.js').default} Base */
 export default function TouchTargetMixin(Base) {
   return Base
-    .extend()
-    .html/* html */`<div id=touch-target class=touch-target></div>`
+    .html`<div id=touch-target class=touch-target></div>`
     .css`
+        /* stylelint-disable liberty/use-logical-spec */
       .touch-target {
         position: absolute;
-        inset: 50%;
+        top: 50%;
+        left: 50%;
         /* --mdw-device-pixel-ratio: 1; */
       
         block-size: 100%;
@@ -25,7 +26,7 @@ export default function TouchTargetMixin(Base) {
         pointer-events: auto;
       
         transform: translateX(-50%) translateY(-50%);
-        visibility: visible;
+        visibility: inherit;
         z-index: 1;
       
         border-radius: inherit;

package/mixins/TypographyMixin.js

@@ -0,0 +1,121 @@
+import DelegatesFocusMixin from './DelegatesFocusMixin.js';
+
+/**
+ * @param {string} input
+ * @return {string}
+ */
+function parseSize(input) {
+  if (!input) return '';
+  if (input.includes('px')) return input;
+  if (input.includes('em')) return input;
+  if (input.includes('ex')) return input;
+  return `calc(${input.replace('sp', '')} * 0.0625rem)`;
+}
+
+/** @param {typeof import('../core/CustomElement.js').default} Base */
+export default function TypographyMixin(Base) {
+  return Base
+    .mixin(DelegatesFocusMixin)
+    .observe({
+      textPadding: 'string',
+      textPaddingTop: 'string',
+      textLeading: 'string',
+      textPaddingBottom: 'string',
+    })
+    .observe({
+      _computedTextPaddingTop({ textPaddingTop, textPadding }) {
+        return parseSize(textPaddingTop ?? textPadding);
+      },
+      _computedTextPaddingBottom({ textPaddingBottom, textPadding }) {
+        return parseSize(textPaddingBottom ?? textPadding);
+      },
+      _computedTextLeading({ textLeading }) {
+        return parseSize(textLeading);
+      },
+    })
+    .observe({
+      _beforeStyle({ _computedTextPaddingTop, _computedTextLeading }) {
+        if (_computedTextLeading) {
+          return `margin-top:${_computedTextLeading}`;
+        }
+        if (_computedTextPaddingTop) {
+          return `margin-top:${_computedTextPaddingTop}`;
+        }
+        return '';
+      },
+      _afterStyle({ _computedTextPaddingBottom }) {
+        if (_computedTextPaddingBottom) {
+          return `vertical-align:calc(-1em + (-1 * ${_computedTextPaddingBottom}));`;
+        }
+        return '';
+      },
+    })
+    .html`
+      <div id=wrapper style={_wrapperStyle} before={!!_beforeStyle} after={!!_afterStyle}
+        ><span id=before mdw-if={!!_beforeStyle} style={_beforeStyle} text-leading={textLeading}></span
+        ><span id=content before={!!_beforeStyle} after={!!_afterStyle}><span id=after mdw-if={!!_afterStyle} style={_afterStyle}></span></span
+      ></div>
+      `
+    .recompose(({ refs: { content, slot } }) => {
+      content.prepend(slot);
+    })
+    .css`
+      :host {
+        display: block;
+      }
+
+      :host(:where([text-padding],[text-padding-top],[text-padding-bottom])) {
+        display: flex;
+      }
+
+      #wrapper {
+        display: contents;
+
+      }
+      
+      #wrapper:where([before], [after]) {
+        display: flex;
+        align-items: baseline; /* Allows growing element upwards without affecting text selection */
+
+      }
+
+      #wrapper[before] {
+        margin-block-start: -1em;
+      }
+
+      #wrapper[after] {
+        margin-block-end: -1em;
+      }
+
+      #before {
+        display: inline-block;
+
+        block-size: 1.4ex; /* Estimate */
+        padding-block-start: 1em; /* Padding to be cropped by wrapper */
+      }
+      @supports(height:1cap) {
+        #before {
+          block-size: 1cap;
+        }
+      }
+
+      #before[text-leading] {
+        block-size: 0;
+      }
+
+      #content {
+        display: contents;
+      }
+      
+      #content:where([before], [after]) {
+        display: block;
+      }
+
+      #after {
+        display: inline-block;
+
+        padding-block-end: 1em; /* Padding to be cropped by wrapper */
+      }
+
+    `;
+}

package/package.json

@@ -1,96 +1,136 @@
 {
-  "name": "@shortfuse/materialdesignweb",
-  "version": "0.7.6",
-  "description": "Material Design for Web",
-  "type": "module",
+  "author": "Carlos Lopez Jr. <clshortfuse@gmail.com> (https://shortfuse.org/)",
   "bin": {
     "mdw-css": "./bin/mdw-css.js"
   },
-  "scripts": {
-    "prepublishOnly": "node build/esbuild.js index.js --outdir=dist --minify --metafile --production",
-    "predocs": "node bin/mdw-css.js --custom=yellow,orange:orange,green:0f0,alias:aqua | npx esbuild --minify --loader=css > docs/theme.css",
-    "predocs-alt": "node bin/mdw-css.js --color=a46750 --custom=yellow,orange:orange,green:0f0,alias:aqua | npx esbuild --minify --loader=css > docs/alt-theme.css",
-    "docs": "node build/esbuild.js docs/demo.js --outdir=docs --minify --metafile",
-    "watch": "node build/esbuild.js docs/demo.js --outdir=docs --watch --metafile",
-    "serve": "node build/esbuild.js docs/demo.js --outdir=docs --watch --metafile --serve --live",
-    "pretest": "eslint --ignore-path .gitignore",
-    "test": "web-test-runner \"test/**/*.test.js\" --node-resolve",
-    "test:watch": "web-test-runner \"test/**/*.test.js\" --node-resolve --watch"
-  },
   "browser": "dist/index.min.js",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/clshortfuse/materialdesignweb.git"
-  },
-  "keywords": [
-    "material",
-    "design",
-    "web",
-    "materialyou",
-    "md3",
-    "web-components"
-  ],
-  "files": [
-    "/bin",
-    "/dist",
-    "/components",
-    "/core",
-    "/theming",
-    "/mixins",
-    "/utils"
-  ],
-  "exports": {
-    "/components": "./components",
-    "/core": "./core",
-    "/theming": "./theming",
-    "/mixins": "./mixins",
-    "/utils": "./utils"
-  },
-  "author": "Carlos Lopez Jr. <clshortfuse@gmail.com> (https://shortfuse.org/)",
-  "license": "ISC",
-  "sideEffects": [
-    "./polyfills.js",
-    "./components/*.js",
-    "./utils/metadata.js",
-    "./theming/loader.js",
-    "./docs/demo/*.js"
-  ],
   "bugs": {
     "url": "https://github.com/clshortfuse/materialdesignweb/issues"
   },
-  "homepage": "https://github.com/clshortfuse/materialdesignweb#readme",
+  "description": "Material Design for Web",
   "devDependencies": {
+    "@babel/preset-env": "^7.22.9",
     "@esm-bundle/chai": "^4.3.4-fix.0",
+    "@playwright/test": "^1.36.1",
+    "@rollup/plugin-babel": "^6.0.3",
+    "@rollup/plugin-node-resolve": "^15.1.0",
+    "@rollup/plugin-terser": "^0.4.3",
+    "@stylistic/stylelint-plugin": "^3.0.0",
+    "@types/clean-css": "^4.2.6",
     "@types/html-minifier-terser": "^7.0.0",
     "@types/mocha": "^10.0.1",
     "@types/tap": "^15.0.7",
-    "@typescript-eslint/eslint-plugin": "^5.30.7",
-    "@typescript-eslint/parser": "^5.30.7",
-    "@web/test-runner": "^0.15.2",
-    "@web/test-runner-playwright": "^0.9.0",
+    "@typescript-eslint/eslint-plugin": "^7.3.1",
+    "@typescript-eslint/parser": "^7.3.1",
+    "@web/test-runner": "^0.18.1",
+    "@web/test-runner-commands": "^0.9.0",
+    "@web/test-runner-playwright": "^0.11.0",
     "acorn": "^8.8.2",
     "acorn-walk": "^8.2.0",
-    "browserslist-to-esbuild": "^1.1.1",
-    "c8": "^7.12.0",
+    "browserslist-to-esbuild": "^2.1.1",
+    "clean-css": "^5.3.2",
     "element-internals-polyfill": "^1.1.11",
-    "esbuild": "^0.17.12",
-    "eslint": "^8.24.0",
+    "esbuild": "^0.20.2",
+    "esbuild-postcss": "^0.0.4",
+    "eslint": "^8.45.0",
     "eslint-config-airbnb-base": "^15.0.0",
-    "eslint-plugin-compat": "^4.0.2",
-    "eslint-plugin-github": "^4.3.5",
     "eslint-plugin-import": "^2.27.5",
-    "eslint-plugin-jsdoc": "^40.0.3",
+    "eslint-plugin-jsdoc": "^48.2.1",
     "eslint-plugin-sort-class-members": "^1.15.2",
-    "eslint-plugin-unicorn": "^46.0.0",
+    "eslint-plugin-unicorn": "^51.0.1",
     "html-minifier-terser": "^7.1.0",
     "http-server": "^14.1.1",
     "magic-string": "^0.30.0",
-    "postcss-styled": "^0.34.0",
-    "postcss-styled-syntax": "^0.4.0",
-    "stylelint": "^15.2.0",
-    "stylelint-no-unsupported-browser-features": "github:clshortfuse/stylelint-no-unsupported-browser-features#0a51157",
+    "playwright": "^1.32.2",
+    "postcss-jsx": "^0.36.4",
+    "rollup-plugin-output-size": "^1.2.1",
+    "rollup-plugin-serve": "^2.0.2",
+    "stylelint": "^16.8.1",
+    "stylelint-no-unsupported-browser-features": "^8.0.1",
     "stylelint-order": "^6.0.2",
     "stylelint-use-logical-spec": "^5.0.0",
-    "typescript": "^5.0.2"
-  }
+    "typescript": "^5.4.2"
+  },
+  "exports": {
+    "./constants/*": "./constants/*",
+    "./components/*": "./components/*",
+    "./core/*": "./core/*",
+    "./dom/*": "./dom/*",
+    "./loaders/*": "./loaders/*",
+    "./mixins/*": "./mixins/*",
+    "./services/*": "./services/*",
+    "./utils/*": "./utils/*"
+  },
+  "files": [
+    "/bin",
+    "/dist",
+    "/constants",
+    "/components",
+    "/core",
+    "/dom",
+    "/loaders",
+    "/mixins",
+    "/services",
+    "/types",
+    "/utils"
+  ],
+  "homepage": "https://github.com/clshortfuse/materialdesignweb#readme",
+  "keywords": [
+    "material",
+    "design",
+    "web",
+    "materialyou",
+    "md3",
+    "web-components"
+  ],
+  "license": "ISC",
+  "name": "@shortfuse/materialdesignweb",
+  "overrides": {
+    "stylelint-no-unsupported-browser-features": {
+      "doiuse": "^6.0.2"
+    }
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/clshortfuse/materialdesignweb.git"
+  },
+  "scripts": {
+    "docs": "node build/esbuild.js docs/demo.js --outdir=docs --minify --metafile",
+    "docs:rollup": "rollup -c build/rollup.config.js docs/demo.js --dir=docs --compact",
+    "predocs": "node bin/mdw-css.js --custom=yellow,orange:orange,green:0f0,alias:aqua | npx esbuild --minify --loader=css > docs/theme.css",
+    "predocs-alt": "node bin/mdw-css.js --color=a46750 --custom=yellow,orange:orange,green:0f0,alias:aqua | npx esbuild --minify --loader=css > docs/alt-theme.css",
+    "prepublishOnly": "node build/esbuild.js index.js --outdir=dist --minify --metafile --production",
+    "pretest": "eslint --ignore-path .gitignore",
+    "serve": "node build/esbuild.js docs/demo.js --outdir=docs --metafile --serve --live --tree-shaking=true",
+    "serve:rollup": "rollup -c build/rollup.config.js docs/demo.js --dir=docs --watch --environment SERVE",
+    "test": "web-test-runner \"test/**/*.test.js\" --node-resolve --playwright --browsers chromium firefox webkit --concurrency 1",
+    "test:custom": "web-test-runner \"test/**/*.test.js\" --node-resolve --concurrency 1",
+    "test:chromium": "web-test-runner \"test/**/*.test.js\" --node-resolve --playwright --browsers chromium",
+    "test:firefox": "web-test-runner \"test/**/*.test.js\" --node-resolve --playwright --browsers firefox --concurrency 1",
+    "test:webkit": "web-test-runner \"test/**/*.test.js\" --node-resolve --playwright --browsers webkit",
+    "test:screenshot": "web-test-runner \"test/screenshot/**/*.test.js\" --node-resolve --playwright --browsers chromium firefox webkit --concurrency 1",
+    "test:spec": "web-test-runner \"test/spec/**/*.test.js\" --node-resolve --playwright --browsers chromium firefox webkit",
+    "test:watch": "web-test-runner \"test/**/*.test.js\" --node-resolve --concurrency 1 --watch",
+    "test:path": "web-test-runner --node-resolve --playwright --browsers chromium firefox webkit --concurrency 1",
+    "types": "rm -Rf types && tsc --emitDeclarationOnly",
+    "watch": "node build/esbuild.js docs/demo.js --outdir=docs --watch --metafile",
+    "sample": "node build/esbuild.js docs/sample/sample.js --outdir=docs/sample --watch --metafile --serve --live",
+    "benchmark": "node build/esbuild.js docs/benchmark/main.js --outdir=docs/benchmark --minify --production --metafile --serve --watch"
+  },
+  "sideEffects": [
+    "./components/*.js",
+    "./loaders/*.js",
+    "./polyfills/*.js",
+    "./docs/custom.js",
+    "./docs/demo/*.js"
+  ],
+  "type": "module",
+  "typesVersions": {
+    "*": {
+      "*": [
+        "types/*"
+      ]
+    }
+  },
+  "version": "0.9.0"
 }

package/services/rtl.js

@@ -0,0 +1,10 @@
+import { addGlobalCss } from '../core/css.js';
+
+let globalStylesLoaded = false;
+
+/** @return {void} */
+export function loadGlobalStyles() {
+  if (globalStylesLoaded) return;
+  addGlobalCss('html[dir="rtl"]{--mdw-dir: -1;}');
+  globalStylesLoaded = true;
+}

package/services/svgAlias.js

@@ -0,0 +1,17 @@
+/** @type {Map<string, {path:string, viewBox:string}>} */
+export const svgAliasMap = new Map();
+export const unaliased = new Set();
+
+/**
+ * @param {string} name
+ * @param {string} path
+ * @param {string} [viewBox]
+ */
+export function addSVGAlias(name, path, viewBox = '0 0 24 24') {
+  name = name.toLowerCase();
+  if (path) {
+    svgAliasMap.set(name, { path, viewBox });
+  } else {
+    svgAliasMap.delete(name);
+  }
+}

package/{theming/index.js → services/theme.js}

@@ -1,7 +1,25 @@
-import { COLOR_KEYWORDS } from '../utils/color_keywords.js';
-import { getScheme } from '../utils/hct/helper.js';
+import { COLOR_KEYWORDS } from '../constants/colorKeywords.js';
+import { SHAPE_ROUNDED_DEFAULT } from '../constants/shapes.js';
+import { TYPOGRAPHY_DEFAULT } from '../constants/typography.js';
+import { getScheme } from '../utils/material-color/helper.js';
 import { svgToCSSURL } from '../utils/svg.js';
 
+export const PALETTES = [
+  'primary',
+  'secondary',
+  'tertiary',
+  'error',
+  'surface',
+];
+
+export const TYPE_STYLES = [
+  'display',
+  'headline',
+  'title',
+  'label',
+  'body',
+];
+
 /**
  * @typedef {Object} ThemeOptions
  * @prop {string} [color]
@@ -71,174 +89,6 @@ function getShapeEdgesSVGs() {
   ].join('');
 }
 
-const CIRCLE_PATH = 'M0 12A12 12 0 1012 0 12 12 0 000 12Z';
-// const SQUIRCLE_PATH = 'M12 24C17.2583 24 20.1815 24 22.0908 22.0908 24 20.1815 24 17.2583 24 12 24 6.7417 24 3.8185 22.0908 1.9092 20.1815-0 17.2583-0 12-0 6.7417-0 3.8185-0 1.9092 1.9092-0 3.8185-0 6.7417-0 12-0 17.2583-0 20.1815 1.9092 22.0908 3.8185 24 6.7417 24 12 24Z';
-const DIAMOND_PATH = 'M 0 12 12 0 24 12 12 24 Z';
-const SQUIRCLE_PATH = 'M12 24C17.2583 24 20.1815 24 22.0908 22.0908 24 20.1815 24 17.2583 24 12 24 6.7417 24 3.8185 22.0908 1.9092 20.1815-0 17.2583-0 12-0 6.7417-0 3.8185-0 1.9092 1.9092-0 3.8185-0 6.7417-0 12-0 17.2583-0 20.1815 1.9092 22.0908 3.8185 24 6.7417 24 12 24Z';
-const HALF_NOTCH_PATH = 'M0 6H6V0H18V6H24V18H18V24H6V18H0Z';
-
-const SHAPE_ROUNDED_DEFAULT = {
-  size: {
-    extraSmall: '4px',
-    small: '8px',
-    medium: '12px',
-    large: '16px',
-    extraLarge: '28px',
-    full: '32px',
-  },
-  /** @type {string?} */
-  mask: CIRCLE_PATH, // CIRCLE_PATH
-  convex: false,
-};
-
-const SHAPE_CUT_DEFAULT = {
-  ...SHAPE_ROUNDED_DEFAULT,
-  size: {
-    extraSmall: '4px',
-    small: '8px',
-    medium: '12px',
-    large: '16px',
-    extraLarge: '28px',
-    full: '32px',
-  },
-  mask: DIAMOND_PATH,
-};
-
-const SHAPE_SQUIRCLE_DEFAULT = {
-  ...SHAPE_ROUNDED_DEFAULT,
-  mask: SQUIRCLE_PATH,
-};
-
-const SP = 1 / 16;
-
-const TYPOGRAPHY_DEFAULT = {
-  face: {
-    brand: '"Roboto Medium", Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", Helvetica, "Segoe UI", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
-    plain: '"Roboto Regular", Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", Helvetica, "Segoe UI", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
-    weight: {
-      regular: 400,
-      medium: 500,
-    },
-  },
-  scale: {
-    display: {
-      large: {
-        fontFamily: 'var(--mdw-typeface__brand)',
-        lineHeight: 64,
-        fontSize: 57,
-        letterSpacing: 0,
-        weight: 'var(--mdw-typeface__weight-regular)',
-      },
-      medium: {
-        fontFamily: 'var(--mdw-typeface__brand)',
-        lineHeight: 52,
-        fontSize: 45,
-        letterSpacing: 0,
-        weight: 'var(--mdw-typeface__weight-regular)',
-      },
-      small: {
-        fontFamily: 'var(--mdw-typeface__brand)',
-        lineHeight: 44,
-        fontSize: 36,
-        letterSpacing: 0,
-        weight: 'var(--mdw-typeface__weight-regular)',
-      },
-    },
-    headline: {
-      large: {
-        fontFamily: 'var(--mdw-typeface__brand)',
-        lineHeight: 40,
-        fontSize: 32,
-        letterSpacing: 0,
-        weight: 'var(--mdw-typeface__weight-regular)',
-      },
-      medium: {
-        fontFamily: 'var(--mdw-typeface__brand)',
-        lineHeight: 36,
-        fontSize: 28,
-        letterSpacing: 0,
-        weight: 'var(--mdw-typeface__weight-regular)',
-      },
-      small: {
-        fontFamily: 'var(--mdw-typeface__brand)',
-        lineHeight: 32,
-        fontSize: 24,
-        letterSpacing: 0,
-        weight: 'var(--mdw-typeface__weight-regular)',
-      },
-    },
-    title: {
-      large: {
-        fontFamily: 'var(--mdw-typeface__brand)',
-        lineHeight: 28,
-        fontSize: 22,
-        letterSpacing: 0,
-        weight: 'var(--mdw-typeface__weight-medium)', // Figma style has regular
-      },
-      medium: {
-        fontFamily: 'var(--mdw-typeface__plain)',
-        lineHeight: 24,
-        fontSize: 16,
-        letterSpacing: 0.15,
-        weight: 'var(--mdw-typeface__weight-medium)',
-      },
-      small: {
-        fontFamily: 'var(--mdw-typeface__plain)',
-        lineHeight: 20,
-        fontSize: 14,
-        letterSpacing: 0.1,
-        weight: 'var(--mdw-typeface__weight-medium)',
-      },
-    },
-    label: {
-      large: {
-        fontFamily: 'var(--mdw-typeface__plain)',
-        lineHeight: 20,
-        fontSize: 14,
-        letterSpacing: 0.1,
-        weight: 'var(--mdw-typeface__weight-medium)',
-      },
-      medium: {
-        fontFamily: 'var(--mdw-typeface__plain)',
-        lineHeight: 16,
-        fontSize: 12,
-        letterSpacing: 0.5,
-        weight: 'var(--mdw-typeface__weight-medium)',
-      },
-      small: {
-        fontFamily: 'var(--mdw-typeface__plain)',
-        lineHeight: 16,
-        fontSize: 11,
-        letterSpacing: 0.5,
-        weight: 'var(--mdw-typeface__weight-medium)',
-      },
-    },
-    body: {
-      large: {
-        fontFamily: 'var(--mdw-typeface__plain)',
-        lineHeight: 24,
-        fontSize: 16,
-        letterSpacing: 0.5, // Figma text has 0.15
-        weight: 'var(--mdw-typeface__weight-regular)',
-      },
-      medium: {
-        fontFamily: 'var(--mdw-typeface__plain)',
-        lineHeight: 20,
-        fontSize: 14,
-        letterSpacing: 0.25,
-        weight: 'var(--mdw-typeface__weight-regular)',
-      },
-      small: {
-        fontFamily: 'var(--mdw-typeface__brand)',
-        lineHeight: 16,
-        fontSize: 12,
-        letterSpacing: 0.4,
-        weight: 'var(--mdw-typeface__weight-regular)',
-      },
-    },
-  },
-};
-
 /**
  * @param {typeof TYPOGRAPHY_DEFAULT} config
  * @return {string}
@@ -359,7 +209,7 @@ export function generateTypographyGlobalCSS() {
 }
 
 /**
- * @param {typeof SHAPE_ROUNDED_DEFAULT} config
+ * @param {typeof SHAPE_ROUNDED_DEFAULT} [config]
  * @return {string}
  */
 export function generateShapeCSS(config = SHAPE_ROUNDED_DEFAULT) {
@@ -436,14 +286,14 @@ export function setupTheme({ color = '#6750A4', custom = [], lightness = 'auto'
  * @return {ThemeOptions}
  */
 export function themeOptionsFromSearchParams(searchParams) {
-  const color = searchParams.get('color') || '#6750A4';
+  const color = searchParams?.get('color') || '#6750A4';
 
   /** @type {[string,string?][]} */
-  const custom = searchParams.getAll('custom')
+  const custom = searchParams?.getAll('custom')
     .flatMap((c) => c.split(','))
-    .map((c) => c.split(':'));
+    .map((c) => c.split(':')) ?? [];
 
-  const lightness = searchParams.get('lightness') ?? 'auto';
+  const lightness = searchParams?.get('lightness') ?? 'auto';
   return { color, custom, lightness };
 }
 

package/types/bin/mdw-css.d.ts

@@ -0,0 +1,3 @@
+#!/usr/bin/env node
+export {};
+//# sourceMappingURL=mdw-css.d.ts.map

package/types/bin/mdw-css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mdw-css.d.ts","sourceRoot":"","sources":["../../bin/mdw-css.js"],"names":[],"mappings":""}

package/types/components/Badge.d.ts

@@ -0,0 +1,39 @@
+declare const _default: typeof CustomElement & import("../core/CustomElement.js").Class<{
+    disabled: boolean;
+    focused: boolean;
+    hovered: boolean;
+    pressed: boolean;
+    _lastInteraction: "key" | "mouse" | "touch" | "pen";
+    _hovered: boolean;
+    _focused: boolean;
+    _focusedSynthetic: boolean;
+    _keyPressed: boolean;
+    _keyReleased: boolean;
+    _pointerPressed: boolean;
+    stateLayer: boolean;
+}, any[]> & import("../core/CustomElement.js").Class<{
+    disabledState: boolean;
+    hoveredState: boolean;
+    focusedState: boolean;
+    pressedState: boolean;
+    touchedState: boolean;
+    pointedState: boolean;
+}, any[]> & import("../core/CustomElement.js").Class<{
+    stateTargetElement: HTMLElement;
+}, any[]> & import("../core/CustomElement.js").Class<{
+    color: string;
+    ink: string;
+    typeStyle: string;
+}, any[]> & import("../core/CustomElement.js").Class<{
+    shapeTop: boolean;
+    shapeBottom: boolean;
+    shapeStart: boolean;
+    shapeEnd: boolean;
+    shapeStyle: string;
+    outlined: boolean;
+}, any[]> & import("../core/CustomElement.js").Class<{
+    density: number;
+}, any[]>;
+export default _default;
+import CustomElement from '../core/CustomElement.js';
+//# sourceMappingURL=Badge.d.ts.map

package/types/components/Badge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../components/Badge.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0BAA0B,0BAA0B"}