@vollowx/seele 0.12.4 → 0.12.5

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.5",
+  "description": "A extensible Web Components library, with Material Design 3 components pre-provided.",
   "author": "vollowx",
   "license": "Apache-2.0",
   "type": "module",
@@ -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);