@vollowx/seele 0.12.5 → 0.12.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vollowx/seele",
-  "version": "0.12.5",
+  "version": "0.12.7",
   "description": "A extensible Web Components library, with Material Design 3 components pre-provided.",
   "author": "vollowx",
   "license": "Apache-2.0",
@@ -14,7 +14,7 @@
   },
   "files": [
     "src/**/*.js",
-    "src/**/*.d.ts",
+    "src/m3/system/*.css",
     "custom-elements.json",
     "LICENSE",
     "README.md"
@@ -27,7 +27,7 @@
     "lit",
     "ui-components"
   ],
-  "homepage": "https://seele.v9.nz",
+  "homepage": "https://seele.projects.v9.nz",
   "repository": {
     "type": "git",
     "url": "https://github.com/vollowx/seele.git"
@@ -38,31 +38,25 @@
     "build": "bun run build:styles && bun run build:compile",
     "build:compile": "bun scripts/build.ts",
     "build:styles": "bun scripts/build-styles.ts --minify",
-    "cleanup": "bun run cleanup:compile && bun run cleanup:styles",
-    "cleanup:compile": "bun scripts/cleanup.ts compile",
-    "cleanup:styles": "bun scripts/cleanup.ts styles",
-    "prepublishOnly": "bun cleanup && bun run build",
+    "clean": "./scripts/clean.sh",
+    "prepublishOnly": "bun clean && bun run build",
     "format": "prettier . --check",
-    "format:fix": "prettier . --check --write",
-    "format:sortcss": "bunx postcss \"src/**/*.css\" --replace --no-map",
-    "cem": "bunx cem analyze --litelement --globs 'src/m3/*.ts' --exclude 'src/m3/*.css.ts'"
+    "format:write": "prettier . --check --write",
+    "cem": "cem analyze --litelement --globs './src/m3/**/*.ts' --exclude './src/**/*.css.ts'"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.11.0",
-    "@swc/core": "^1.15.30",
-    "@types/bun": "^1.3.13",
+    "@swc/core": "^1.15.40",
+    "@types/bun": "^1.3.14",
     "@web/dev-server": "^0.4.6",
     "@web/dev-server-esbuild": "^1.0.5",
     "chokidar": "^5.0.0",
     "lightningcss": "^1.32.0",
-    "postcss": "^8.5.10",
-    "postcss-cli": "^11.0.1",
-    "postcss-sorting": "^9.1.0",
     "prettier": "^3.8.3"
   },
   "dependencies": {
     "@floating-ui/dom": "^1.7.6",
-    "@swc/helpers": "^0.5.21",
-    "lit": "^3.3.2"
+    "@swc/helpers": "^0.5.23",
+    "lit": "^3.3.3"
   }
 }

package/src/base/tab-group.js

@@ -0,0 +1,3 @@
+import { LitElement } from "lit";
+export class TabGroup extends LitElement {
+}

package/src/m3/checkbox/checkbox.js

@@ -1,6 +1,6 @@
 import { _ as _ts_decorate } from "@swc/helpers/_/_ts_decorate";
 import { html } from 'lit';
-import { customElement, property, query } from 'lit/decorators.js';
+import { customElement, property } from 'lit/decorators.js';
 import { Checkbox } from '../../base/checkbox.js';
 import '../focus-ring/focus-ring.js';
 import { checkboxStyles } from './checkbox-styles.css.js';
@@ -29,14 +29,6 @@ export class M3Checkbox extends Checkbox {
       </svg>
     `;
     }
-    connectedCallback() {
-        super.connectedCallback();
-        // TODO: Since Ripple is no longer rendered server-side, this might be unnecessary
-        // SSR'd <md-checkbox> components don't have their labels set up on time
-        this.updateComplete.then(()=>{
-            this.$ripple.attach(this, true);
-        });
-    }
     constructor(...args){
         super(...args), this.error = false;
     }
@@ -47,9 +39,6 @@ _ts_decorate([
         reflect: true
     })
 ], M3Checkbox.prototype, "error", void 0);
-_ts_decorate([
-    query('md-ripple')
-], M3Checkbox.prototype, "$ripple", void 0);
 M3Checkbox = _ts_decorate([
     customElement('md-checkbox')
 ], M3Checkbox);

package/src/m3/system/base.css

@@ -0,0 +1,3 @@
+@import './elevation.css';
+@import './motion.css';
+@import './typography.css';

package/src/m3/system/defaults.css

@@ -0,0 +1,15 @@
+body {
+  accent-color: var(--md-sys-color-primary);
+  background-color: var(--md-sys-color-background);
+  color: var(--md-sys-color-on-background);
+  font-family: var(--md-sys-typography-family);
+}
+
+::selection {
+  background-color: var(--md-sys-color-tertiary-container);
+  color: var(--md-sys-color-on-tertiary-container);
+}
+
+a {
+  color: var(--md-sys-color-primary);
+}

package/src/m3/system/elevation.css

@@ -0,0 +1,18 @@
+:root {
+  --md-sys-elevation-level-0: 0;
+  --md-sys-elevation-level-1: 1;
+  --md-sys-elevation-level-2: 3;
+  --md-sys-elevation-level-3: 6;
+  --md-sys-elevation-level-4: 8;
+  --md-sys-elevation-level-5: 12;
+  --md-sys-elevation-shadow-1:
+    0px 1px 3px 1px rgba(0, 0, 0, 0.15), 0px 1px 2px rgba(0, 0, 0, 0.3);
+  --md-sys-elevation-shadow-2:
+    0px 2px 6px 2px rgba(0, 0, 0, 0.15), 0px 1px 2px rgba(0, 0, 0, 0.3);
+  --md-sys-elevation-shadow-3:
+    0px 4px 8px 3px rgba(0, 0, 0, 0.15), 0px 1px 3px rgba(0, 0, 0, 0.3);
+  --md-sys-elevation-shadow-4:
+    0px 6px 10px 4px rgba(0, 0, 0, 0.15), 0px 2px 3px rgba(0, 0, 0, 0.3);
+  --md-sys-elevation-shadow-5:
+    0px 8px 12px 6px rgba(0, 0, 0, 0.15), 0px 4px 4px rgba(0, 0, 0, 0.3);
+}

package/src/m3/system/motion.css

@@ -0,0 +1,30 @@
+:root {
+  /* std: standard, exp: expressive, mot: motion */
+  --md-sys-motion-exp-spatial-fast: cubic-bezier(0.42, 1.67, 0.21, 0.9);
+  --md-sys-motion-exp-spatial-fast-duration: 350ms;
+  --md-sys-motion-exp-spatial-default: cubic-bezier(0.38, 1.21, 0.22, 1);
+  --md-sys-motion-exp-spatial-default-duration: 500ms;
+  --md-sys-motion-exp-spatial-slow: cubic-bezier(0.39, 1.29, 0.35, 0.98);
+  --md-sys-motion-exp-spatial-slow-duration: 650ms;
+
+  --md-sys-motion-exp-effects-fast: cubic-bezier(0.31, 0.94, 0.34, 1);
+  --md-sys-motion-exp-effects-fast-duration: 150ms;
+  --md-sys-motion-exp-effects-default: cubic-bezier(0.34, 0.8, 0.34, 1);
+  --md-sys-motion-exp-effects-default-duration: 200ms;
+  --md-sys-motion-exp-effects-slow: cubic-bezier(0.34, 0.88, 0.34, 1);
+  --md-sys-motion-exp-effects-slow-duration: 300ms;
+
+  --md-sys-motion-std-spatial-fast: cubic-bezier(0.27, 1.06, 0.18, 1);
+  --md-sys-motion-std-spatial-fast-duration: 350ms;
+  --md-sys-motion-std-spatial-default: cubic-bezier(0.27, 1.06, 0.18, 1);
+  --md-sys-motion-std-spatial-default-duration: 500ms;
+  --md-sys-motion-std-spatial-slow: cubic-bezier(0.27, 1.06, 0.18, 1);
+  --md-sys-motion-std-spatial-slow-duration: 750ms;
+
+  --md-sys-motion-std-effects-fast: cubic-bezier(0.31, 0.94, 0.34, 1);
+  --md-sys-motion-std-effects-fast-duration: 150ms;
+  --md-sys-motion-std-effects-default: cubic-bezier(0.34, 0.8, 0.34, 1);
+  --md-sys-motion-std-effects-default-duration: 200ms;
+  --md-sys-motion-std-effects-slow: cubic-bezier(0.34, 0.88, 0.34, 1);
+  --md-sys-motion-std-effects-slow-duration: 300ms;
+}

package/src/m3/system/typography.css

@@ -0,0 +1,34 @@
+:root {
+  --md-sys-typography-family: sans-serif;
+
+  --md-sys-typography-display-large: 400 3.5625rem / 4rem
+    var(--md-sys-typography-family);
+  --md-sys-typography-display-medium: 400 2.8125rem / 3.5rem
+    var(--md-sys-typography-family);
+  --md-sys-typography-display-small: 400 2.25rem / 3rem
+    var(--md-sys-typography-family);
+  --md-sys-typography-headline-large: 400 2.5rem / 3.125rem
+    var(--md-sys-typography-family);
+  --md-sys-typography-headline-medium: 400 2.25rem / 2.75rem
+    var(--md-sys-typography-family);
+  --md-sys-typography-headline-small: 400 2rem / 2.5rem
+    var(--md-sys-typography-family);
+  --md-sys-typography-title-large: 400 1.375rem / 1.75rem
+    var(--md-sys-typography-family);
+  --md-sys-typography-title-medium: 500 1rem / 1.25rem
+    var(--md-sys-typography-family);
+  --md-sys-typography-title-small: 500 0.875rem / 1.125rem
+    var(--md-sys-typography-family);
+  --md-sys-typography-label-large: 500 0.875rem / 1.25rem
+    var(--md-sys-typography-family);
+  --md-sys-typography-label-medium: 500 0.75rem / 1rem
+    var(--md-sys-typography-family);
+  --md-sys-typography-label-small: 500 0.6875rem / 0.875rem
+    var(--md-sys-typography-family);
+  --md-sys-typography-body-large: 400 1rem / 1.5rem
+    var(--md-sys-typography-family);
+  --md-sys-typography-body-medium: 400 0.875rem / 1.25rem
+    var(--md-sys-typography-family);
+  --md-sys-typography-body-small: 400 0.75rem / 1rem
+    var(--md-sys-typography-family);
+}

package/src/m3/tooltip/tooltip.js

@@ -1,5 +1,5 @@
 import { _ as _ts_decorate } from "@swc/helpers/_/_ts_decorate";
-import { customElement } from 'lit/decorators.js';
+import { customElement } from '../../core/decorators.js';
 import { Tooltip } from '../../base/tooltip.js';
 import { tooltipStyles } from './tooltip-styles.css.js';
 export class M3Tooltip extends Tooltip {
@@ -16,5 +16,5 @@ export class M3Tooltip extends Tooltip {
     }
 }
 M3Tooltip = _ts_decorate([
-    customElement('md-tooltip')
+    customElement('md-tooltip', false)
 ], M3Tooltip);

package/src/core/shared.d.ts

@@ -1 +0,0 @@
-type Constructor<T> = new (...args: any[]) => T;