fix(m3:checkbox): use :state(xxx) instead of :--xxx

vollowx · Apr 13, 2024 · d5d8b98 · d5d8b98
1 parent aa5c353
commit d5d8b98
Show file tree

Hide file tree

Showing 11 changed files with 51 additions and 31 deletions.
diff --git a/.babelrc b/.babelrc
diff --git a/.github/README.md b/.github/README.md
@@ -1,6 +1,6 @@
 # SEE
 
-SEE stands for _Standard Extensible Elements_, which is a [web components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components) library that can be styled freely, while it pre-provides components in [Material 3](https://m3.material.io/) design guideline.
+SEE stands for _Standard Extensible Elements_, which is a [web components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components) library that can be styled and extended freely, while pre-providing components in [Material 3](https://m3.material.io/) design guideline.
 
 **Resources**
 
@@ -11,8 +11,5 @@ SEE stands for _Standard Extensible Elements_, which is a [web components](https
 
 **Compatibility**
 
-- Chromium `not yet implemented`
-  - [New spec of `ElementInternals.states`](https://html.spec.whatwg.org/multipage/custom-elements.html)
-- Firefox `>= 126`
-  - [`ElementInternals.states` at Firefox Nightly 126.0a1 release notes](https://www.mozilla.org/en-US/firefox/126.0a1/releasenotes/)
-  - [`ElementInternals.states` at Bugzilla](https://bugzilla.mozilla.org/show_bug.cgi?id=1887467)
+- Chromium `>= 125.0.6415.0`
+- Firefox `>= 126.0a1`
diff --git a/.github/TODO.md b/.github/TODO.md
@@ -1,6 +1,5 @@
 # Todo
 
 - [ ] Unify component variable rules
-- [x] Unify component style sorting rules
 - [x] `hidden` support
 - [ ] Form support
diff --git a/.stylelintrc b/.stylelintrc
diff --git a/bun.lockb b/bun.lockb
diff --git a/dev/index.html b/dev/index.html
@@ -283,6 +283,20 @@
     </style>
   </head>
   <body>
+    <md-icon-button-toggle id="opt-dark" checked>
+      <md-icon>dark_mode</md-icon>
+      <md-icon slot="checked">light_mode</md-icon>
+    </md-icon-button-toggle>
+
+    <md-tooltip for="opt-dark"></md-tooltip>
+
+    <md-icon-button-toggle id="opt-rtl">
+      <md-icon>format_textdirection_r_to_l</md-icon>
+      <md-icon slot="checked">format_textdirection_l_to_r</md-icon>
+    </md-icon-button-toggle>
+
+    <md-tooltip for="opt-rtl"></md-tooltip>
+
     <md-button>Filled</md-button>
     <md-button variant="tonal">Tonal</md-button>
     <md-button variant="elevated">Elevated</md-button>
@@ -349,5 +363,29 @@
       <summary>Guess what?</summary>
       <twdne-viewer></twdne-viewer>
     </details>
+
+    <script>
+      const tooltipTexts = {
+        'opt-dark': ['Dark mode', 'Light mode'],
+        'opt-rtl': ['Set direction to RTL', 'Set direction to LTR'],
+      };
+      const updateTooltip = (id) => {
+        const control = document.querySelector(`#${id}`);
+        const tooltip = document.querySelector(`md-tooltip[for="${id}"]`);
+        tooltip.textContent = tooltipTexts[id][control.checked ? 1 : 0];
+      };
+      updateTooltip('opt-dark');
+      updateTooltip('opt-rtl');
+      document.querySelector('#opt-dark').addEventListener('change', (e) => {
+        document.documentElement.dataset['mdTheme'] = e.detail
+          ? 'dark'
+          : 'light';
+        updateTooltip('opt-dark');
+      });
+      document.querySelector('#opt-rtl').addEventListener('change', (e) => {
+        document.documentElement.dir = e.detail ? 'rtl' : 'ltr';
+        updateTooltip('opt-rtl');
+      });
+    </script>
   </body>
 </html>
diff --git a/dev/thiswaifudoesntexist-viewer.ts b/dev/thiswaifudoesntexist-viewer.ts
@@ -94,7 +94,7 @@ export class ThisWaifuDoesNotExist extends LitElement {
   }
 
   @property({ type: Boolean }) loading = true;
-  @property({ type: Number }) nth = Math.floor(Math.random() * 100000);
+  @property({ type: Number }) nth = 50000;
 
   private handleLoad() {
     this.loading = false;

diff --git a/package.json b/package.json
@@ -15,10 +15,7 @@
     "build:docs": "vite build docs",
     "preview:docs": "vite preview docs",
     "prettier": "prettier . --check",
-    "prettier:fix": "prettier . --check --write",
-    "lint:style": "stylelint '**/*.css'",
-    "lint:style:fix": "stylelint '**/*.css' --fix",
-    "lint:type": "tsc"
+    "prettier:fix": "prettier . --check --write"
   },
   "devDependencies": {
     "@11ty/eleventy": "^2.0.1",

diff --git a/src/base/attachable.ts b/src/base/attachable.ts
@@ -15,11 +15,11 @@ export const Attachable = <T extends Constructor<LitElement>>(
   superClass: T
 ) => {
   class AttachableElement extends superClass {
-    connectedCallback() {
+    override connectedCallback() {
       super.connectedCallback();
       this.setCurrentControl(this.$control);
     }
-    disconnectedCallback() {
+    override disconnectedCallback() {
       this.setCurrentControl(null);
       super.disconnectedCallback();
     }

diff --git a/src/m3/checkbox-styles.ts b/src/m3/checkbox-styles.ts
@@ -127,7 +127,9 @@ export const checkboxStyles = css`
   }
   :host(:not(:state(checked)):not(:state(indeterminate)):state(was-checked))
     [part~='mark'],
-  :host(:not(:state(checked)):not(:state(indeterminate)):--was-indeterminate)
+  :host(
+      :not(:state(checked)):not(:state(indeterminate)):state(was-indeterminate)
+    )
     [part~='mark'] {
     transition-delay: 150ms;
   }

diff --git a/tsconfig.json b/tsconfig.json
@@ -1,13 +1,11 @@
 {
   "compilerOptions": {
     "allowImportingTsExtensions": true,
-    "baseUrl": ".",
     "experimentalDecorators": true,
     "importHelpers": true,
     "isolatedModules": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "lib": ["ESNext", "DOM", "DOM.Iterable"],
     "moduleResolution": "bundler",
-    "noEmit": true,
     "noImplicitAny": false,
     "noImplicitOverride": true,
     "noImplicitReturns": true,
@@ -16,8 +14,8 @@
     "strict": true,
     "strictNullChecks": false,
     "target": "ESNext",
-    "useDefineForClassFields": false,
+    "useDefineForClassFields": false
   },
-  "include": ["src/**/*.ts", "dev/**/*.ts"],
+  "include": ["src/**/*.ts"],
   "exclude": []
 }