@vollowx/seele 0.12.4 → 0.12.6

package/LICENSE

@@ -186,7 +186,7 @@
       same "printed page" as the copyright notice for easier
       identification within third-party archives.
 
-   Copyright 2023-2026 Vollow
+   Copyright 2023-2026 Lucas X. Zhao
 
    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.

package/README.md

@@ -1,19 +1,20 @@
 # Standard Extensible Elements
 
-**SEELE** is a modern, lightweight and accessible
+SEELE (**S**tandard **E**xtensible **Ele**ments) is a extensible
 [Web Components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components)
-library. It provides a set of highly customizable UI components that follow the
-[Material Design 3](https://m3.material.io/) guidelines out of the box, while
-being designed for easy extension and restyling.
+library with a focus on accessibility and keyboard-control.
 
-Visit the [website of SEELE](https://seele.v9.nz/) for documentation and demos.
+It also provides styled components in the following design guideline(s):
+- [Material You Expressive](https://m3.material.io/)
+
+Documentations and demos are at [seele.projects.v9.nz](https://seele.projects.v9.nz/).
 
 ## Installation
 
 SEELE is published on [npm](https://www.npmjs.com/package/@vollowx/seele),
 install with your preferred package manager:
 
-```bash
+```sh
 npm install @vollowx/seele
 
 yarn add @vollowx/seele
@@ -21,18 +22,18 @@ yarn add @vollowx/seele
 bun add @vollowx/seele
 ```
 
-## Usage
+## Quickstart
 
 ### Importing
 
-You can import the entire library or individual components to keep your bundle size small.
+You can import the entire library or import as needed.
 
 ```javascript
 // Import all components
 import '@vollowx/seele';
 
 // Or import specific components (recommended)
-// They all follow such path :@/catagory/group/component.js
+// They all follow such path: @/catagory/group/component.js
 import '@vollowx/seele/m3/button/common-button.js';
 import '@vollowx/seele/m3/checkbox/checkbox.js';
 ```
@@ -53,25 +54,33 @@ Once imported, the components can be used just like standard HTML elements.
 
 ### Theming
 
-SEELE components use CSS variables for styling.
-
-Currently, Material Design 3 token variables are not yet included in the source
-code.
-
-To style the components correctly, you need to define the necessary CSS
-variables in your project. You can find reference implementations in
-[vollowx/seele-docs](https://github.com/vollowx/seele-docs/) or the `dev` folder
-of this repository.
+SEELE components use CSS variables for styling. To include the systems, add
+this to your style files.
+
+```css
+@import '@vollowx/seele/m3/systems/base.css';
+/* This includes basic system variables like motion system and typography system */
+@import '@vollowx/seele/m3/systems/defaults.css';
+/* (Optional) This includes basic styling for body, selection and links */
+
+/*
+ * Note that there is no default color system since the way you implement theme
+ * switching and color changing varies.
+ *
+ * You can still find some references in dev/shared.css
+ */
+```
 
-## Browser Supporty
+## Browser Support
 
 SEELE relies on modern web standards like `ElementInternals`.
+However in 2026 you don't really need to worry about this.
 
-- **Chromium**: `>= 125.0`
-- **Firefox**: `>= 126.0`
+- Chromium-based ones: >= 125.0
+- Firefox-based ones: >= 126.0
 
-## Resources
+## Other Information
 
 - [Roadmap](./ROADMAP.md)
 - [Contributing](./CONTRIBUTING.md)
-- [License](./LICENSE)
+- [License (Apache-2.0)](./LICENSE)

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vollowx/seele",
-  "version": "0.12.4",
-  "description": "Standard Extensible Elements. A web components library that can be styled and extended freely, pre-providing components in Material Design 3.",
+  "version": "0.12.6",
+  "description": "A extensible Web Components library, with Material Design 3 components pre-provided.",
   "author": "vollowx",
   "license": "Apache-2.0",
   "type": "module",
@@ -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"
@@ -49,20 +49,20 @@
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.11.0",
-    "@swc/core": "^1.15.18",
-    "@types/bun": "^1.3.11",
+    "@swc/core": "^1.15.30",
+    "@types/bun": "^1.3.13",
     "@web/dev-server": "^0.4.6",
     "@web/dev-server-esbuild": "^1.0.5",
     "chokidar": "^5.0.0",
     "lightningcss": "^1.32.0",
-    "postcss": "^8.5.8",
+    "postcss": "^8.5.10",
     "postcss-cli": "^11.0.1",
     "postcss-sorting": "^9.1.0",
-    "prettier": "^3.8.1"
+    "prettier": "^3.8.3"
   },
   "dependencies": {
     "@floating-ui/dom": "^1.7.6",
-    "@swc/helpers": "^0.5.19",
+    "@swc/helpers": "^0.5.21",
     "lit": "^3.3.2"
   }
 }

package/src/m3/list/list-item-styles.css.js

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export const listItemStyles = css`:host{--md-focus-ring-shape:12px;--md-focus-ring-inward-offset:-3px;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;border-radius:4px;outline:0;display:flex}:host(:not([hidden]):first-of-type){border-radius:12px 12px 4px 4px}:host(:not([hidden]):last-of-type){border-radius:4px 4px 12px 12px}:host(:state(selected)){--md-item-supporting-text-color:var(--md-sys-color-on-tertiary-container);background-color:var(--md-sys-color-tertiary-container);color:var(--md-sys-color-on-tertiary-container);border-radius:12px}:host(:disabled){cursor:default;opacity:.3;pointer-events:none}md-item,md-item div[slot=container]{border-radius:inherit}`;
+export const listItemStyles = css`:host{--md-focus-ring-shape:12px;--md-focus-ring-inward-offset:-3px;background-color:var(--_background,transparent);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;border-radius:4px;outline:0;display:flex}:host(:not([hidden]):first-of-type){border-radius:12px 12px 4px 4px}:host(:not([hidden]):last-of-type){border-radius:4px 4px 12px 12px}:host(:state(selected)){--md-item-supporting-text-color:var(--md-sys-color-on-tertiary-container);background-color:var(--md-sys-color-tertiary-container);color:var(--md-sys-color-on-tertiary-container);border-radius:12px}:host(:disabled){cursor:default;opacity:.3;pointer-events:none}md-item,md-item div[slot=container]{border-radius:inherit}`;

package/src/m3/list/list-styles.css.js

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export const listStyles = css`:host{box-sizing:border-box;-webkit-user-select:none;user-select:none;outline:0;flex-direction:column;gap:2px;min-width:112px;height:max-content;padding:4px;display:flex;position:relative;overflow-y:auto}`;
+export const listStyles = css`:host{box-sizing:border-box;-webkit-user-select:none;user-select:none;outline:0;flex-direction:column;gap:2px;min-width:112px;height:max-content;padding:4px;display:flex;position:relative;overflow-y:auto}:host([color=segmented]) ::slotted(md-list-item){--_background:var(--md-sys-color-surface-container)}`;

package/src/m3/list/list.js

@@ -1,5 +1,5 @@
 import { _ as _ts_decorate } from "@swc/helpers/_/_ts_decorate";
-import { customElement } from 'lit/decorators.js';
+import { customElement, property } from 'lit/decorators.js';
 import { List } from '../../base/list.js';
 import { listStyles } from './list-styles.css.js';
 export class M3List extends List {
@@ -15,9 +15,14 @@ export class M3List extends List {
             'md-list-item',
             'md-list-item-checkbox',
             'md-list-item-radio'
-        ];
+        ], this.color = 'standard';
     }
 }
+_ts_decorate([
+    property({
+        reflect: true
+    })
+], M3List.prototype, "color", void 0);
 M3List = _ts_decorate([
     customElement('md-list')
 ], M3List);

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/core/shared.d.ts

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