[gem][duoyun-ui] Remove css state compatible mode

Closed #167

packages/duoyun-ui/docs/en/02-elements/link.md

@@ -10,7 +10,7 @@ See [`<gem-link>`](https://gemjs.org/zh/api/built-in-element)
 [
   {
     "tagName": "style",
-    "innerHTML": "dy-active-link:where([data-active],:state(active)){color: red})"
+    "innerHTML": "dy-active-link:state(active){color: red})"
   },
   {
     "path": "/test/test",

packages/duoyun-ui/docs/zh/02-elements/link.md

@@ -10,7 +10,7 @@ See [`<gem-link>`](https://gemjs.org/zh/api/built-in-element)
 [
   {
     "tagName": "style",
-    "innerHTML": "dy-active-link:where([data-active],:state(active)){color: red})"
+    "innerHTML": "dy-active-link:state(active){color: red})"
   },
   {
     "path": "/test/test",

packages/duoyun-ui/src/elements/action-text.ts

@@ -17,7 +17,7 @@ const style = createCSSSheet(css`
     color: var(--color, inherit);
     border-radius: ${theme.normalRound};
   }
-  :host(:where(:hover, [data-active], :state(active))) {
+  :host(:where(:hover, :state(active))) {
     color: var(--color, ${theme.primaryColor});
     text-decoration: underline;
   }

packages/duoyun-ui/src/elements/badge.ts

@@ -47,7 +47,7 @@ const style = createCSSSheet(css`
     width: 1em;
   }
   @supports (anchor-name: --foo) {
-    :host(:where(:where([data-inline], :state(inline)):not([hidden]))) {
+    :host(:where(:state(inline):not([hidden]))) {
       display: inline;
       anchor-name: --anchor;
     }

packages/duoyun-ui/src/elements/base/chart.ts

@@ -37,7 +37,7 @@ const style = createCSSSheet(css`
     justify-content: center;
     font-size: 0.75em;
   }
-  :host(:where([data-loading], :state(loading), [data-no-data], :state(no-data))) {
+  :host(:where(:state(loading), :state(no-data))) {
     aspect-ratio: 2 / 1;
   }
   svg {

packages/duoyun-ui/src/elements/base/scroll.ts

@@ -20,35 +20,24 @@ const style = createCSSSheet(css`
     --mask-start: var(--mask-top);
     --mask-end: var(--mask-bottom);
   }
-  :host(:where([data-top-overflow], :state(top-overflow))) {
+  :host(:state(top-overflow)) {
     --mask-top: var(--mask-width);
   }
-  :host(:where([data-bottom-overflow], :state(bottom-overflow))) {
+  :host(:state(bottom-overflow)) {
     --mask-bottom: calc(100% - var(--mask-width));
   }
-  :host(:where([data-left-overflow], :state(left-overflow), [data-right-overflow], :state(right-overflow))) {
+  :host(:where(:state(left-overflow), :state(right-overflow))) {
     --mask-dir: right;
     --mask-start: var(--mask-left);
     --mask-end: var(--mask-right);
   }
-  :host(:where([data-left-overflow], :state(left-overflow))) {
+  :host(:state(left-overflow)) {
     --mask-left: var(--mask-width);
   }
-  :host(:where([data-right-overflow], :state(right-overflow))) {
+  :host(:state(right-overflow)) {
     --mask-right: calc(100% - var(--mask-width));
   }
-  :host(
-      :where(
-          [data-top-overflow],
-          :state(top-overflow),
-          [data-bottom-overflow],
-          :state(bottom-overflow),
-          [data-left-overflow],
-          :state(left-overflow),
-          [data-right-overflow],
-          :state(right-overflow)
-        )
-    ) {
+  :host(:where(:state(top-overflow), :state(bottom-overflow), :state(left-overflow), :state(right-overflow))) {
     --m: linear-gradient(to var(--mask-dir), #fff0, #000 var(--mask-start), #000 var(--mask-end), #fff0 100%);
     -webkit-mask-image: var(--m);
     mask-image: var(--m);

packages/duoyun-ui/src/elements/button.ts

@@ -111,11 +111,7 @@ const style = createCSSSheet(css`
     cursor: not-allowed;
     --bg: ${theme.disabledColor};
   }
-  :where(
-      :host(:where([data-active], :state(active))) .content,
-      .content:where(:hover),
-      .dropdown:where(:hover, [data-active], :state(active))
-    )::after {
+  :where(:host(:state(active)) .content, .content:where(:hover), .dropdown:where(:hover, :state(active)))::after {
     content: '';
     position: absolute;
     inset: -1px;

packages/duoyun-ui/src/elements/card.ts

@@ -68,7 +68,7 @@ const style = createCSSSheet(css`
     border-radius: ${theme.normalRound};
     align-self: center;
   }
-  .actions:where(:hover, [data-active], :state(active)) {
+  .actions:where(:hover, :state(active)) {
     background-color: ${theme.hoverBackgroundColor};
   }
   slot[name='body']::slotted(*),

packages/duoyun-ui/src/elements/drop-area.ts

@@ -34,7 +34,7 @@ const style = createCSSSheet(css`
     display: none;
     pointer-events: none;
   }
-  :host(:where([data-allow-drop], :state(allow-drop))) .content {
+  :host(:state(allow-drop)) .content {
     display: block;
   }
   .tip {

packages/duoyun-ui/src/elements/form.ts

@@ -71,7 +71,7 @@ const formStyle = createCSSSheet(css`
     top: 100%;
     left: 0;
   }
-  dy-form-item:where([data-invalid], :state(invalid)) * {
+  dy-form-item:state(invalid) * {
     border-color: ${theme.negativeColor};
   }
   @media not ${mediaQuery.PHONE} {
@@ -182,7 +182,7 @@ const formItemStyle = createCSSSheet(css`
   .label:empty {
     display: none;
   }
-  :host(:where([data-invalid], :state(invalid))) .input {
+  :host(:state(invalid)) .input {
     border-color: ${theme.negativeColor};
   }
   .input {

packages/duoyun-ui/src/elements/input.ts

@@ -416,7 +416,7 @@ const inputGroupStyle = createCSSSheet(css`
   dy-input-group {
     display: flex;
   }
-  dy-input-group :where(dy-input, dy-select):where(:focus, :focus-within, :hover, [data-active], :state(active)) {
+  dy-input-group :where(dy-input, dy-select):where(:focus, :focus-within, :hover, :state(active)) {
     position: relative;
     z-index: 1;
   }

packages/duoyun-ui/src/elements/modal.ts

@@ -42,7 +42,7 @@ const style = createCSSSheet(css`
     align-items: center;
     justify-content: center;
   }
-  :host(:not([hidden]):where([open], :where([data-closing], :state(closing)))) {
+  :host(:not([hidden]):where([open], :state(closing))) {
     display: flex;
   }
   .absolute {

packages/duoyun-ui/src/elements/pagination.ts

@@ -47,7 +47,7 @@ const style = createCSSSheet(css`
     border: 1px solid transparent;
   }
   .item:where(:not(.disabled, .current)):hover,
-  .item:where([data-active], :state(active)) {
+  .item:where(:state(active)) {
     color: ${theme.highlightColor};
     background-color: ${theme.hoverBackgroundColor};
   }

packages/duoyun-ui/src/elements/picker.ts

@@ -38,7 +38,7 @@ export const pickerStyle = createCSSSheet(css`
   :host(:not([borderless], [disabled])) {
     box-shadow: ${theme.controlShadow};
   }
-  :host(:where([data-active], :state(active))) {
+  :host(:state(active)) {
     background: ${theme.lightBackgroundColor};
   }
   :host([disabled]) {
@@ -59,10 +59,10 @@ export const pickerStyle = createCSSSheet(css`
     width: 1.2em;
     color: ${theme.borderColor};
   }
-  :host(:not([disabled], [borderless]):where(:hover, [data-active], :state(active))) {
+  :host(:not([disabled], [borderless]):where(:hover, :state(active))) {
     border-color: ${theme.primaryColor};
   }
-  :host(:not([disabled]):where(:hover, [data-active], :state(active))) dy-use {
+  :host(:not([disabled]):where(:hover, :state(active))) dy-use {
     color: ${theme.textColor};
   }
 `);

packages/duoyun-ui/src/elements/segmented.ts

@@ -54,7 +54,7 @@ const style = createCSSSheet(css`
     border-radius: var(--inner-radius);
     min-width: 5em;
   }
-  :host(:where(:not([disabled], :where([data-animating], :state(animating))))) .segment:hover {
+  :host(:where(:not([disabled], :state(animating)))) .segment:hover {
     background: color-mix(in srgb, ${theme.hoverBackgroundColor}, currentColor 6%);
     &:active {
       background: color-mix(in srgb, ${theme.hoverBackgroundColor}, currentColor 10%);

packages/duoyun-ui/src/elements/select.ts

@@ -38,7 +38,7 @@ const style = createCSSSheet(css`
   :host {
     width: 15em;
   }
-  :host(:where(:hover, [data-active], :state(active))) {
+  :host(:where(:hover, :state(active))) {
     background: none;
     border-color: ${theme.textColor};
   }
@@ -98,7 +98,7 @@ const style = createCSSSheet(css`
   .search::part(input) {
     padding: 0;
   }
-  .search:where([data-filled], :state(filled), [data-composing], :state(composing)) + .placeholder {
+  .search:where(:state(filled), :state(composing)) + .placeholder {
     display: none;
   }
 `);

packages/duoyun-ui/src/elements/side-navigation.ts

@@ -91,10 +91,10 @@ const style = createCSSSheet(css`
     overflow: hidden;
     text-overflow: ellipsis;
   }
-  :host(:not(:where([data-compact], :state(:compact)))) .children .item {
+  :host(:not(:state(compact))) .children .item {
     padding-inline-start: calc(0.75em + 1em);
   }
-  .item:where(:hover, [data-active], :state(active)) {
+  .item:where(:hover, :state(active)) {
     background-color: ${theme.hoverBackgroundColor};
     &:active {
       background: color-mix(in srgb, ${theme.hoverBackgroundColor}, currentColor 3%);
@@ -113,10 +113,10 @@ const style = createCSSSheet(css`
     font-size: 0.7em;
     color: ${theme.describeColor};
   }
-  :host(:where([data-compact], :state(:compact))) :where(.group-title, .title, .title-wrap + *) {
+  :host(:state(compact)) :where(.group-title, .title, .title-wrap + *) {
     display: none;
   }
-  :host(:where([data-compact], :state(:compact))) :where(.item, .title-wrap) {
+  :host(:state(compact)) :where(.item, .title-wrap) {
     justify-content: center;
   }
 `);

packages/duoyun-ui/src/elements/table.ts

@@ -105,7 +105,7 @@ const styles = createCSSSheet(css`
     padding: 4px;
     border-radius: ${theme.normalRound};
   }
-  .action:where(:hover, [data-active], :state(active)) {
+  .action:where(:hover, :state(active)) {
     background-color: ${theme.hoverBackgroundColor};
   }
   .side {

packages/duoyun-ui/src/elements/tabs.ts

@@ -212,7 +212,7 @@ const panelStyle = createCSSSheet(css`
     line-height: 1.5;
     margin-block-start: 1em;
   }
-  :host(:where([data-vertical], :state(vertical))) {
+  :host(:state(vertical)) {
     margin-inline-start: 1em;
     margin-block-start: 0em;
   }

packages/duoyun-ui/src/elements/tree.ts

@@ -57,7 +57,7 @@ const itemStyle = createCSSSheet(css`
     line-height: 2;
     user-select: none;
   }
-  :host(:where(:hover, [data-active], :state(active))) {
+  :host(:where(:hover, :state(active))) {
     background-color: ${theme.lightBackgroundColor};
   }
   :host([highlight]) {

packages/duoyun-ui/src/elements/wait.ts

@@ -26,7 +26,7 @@ const style = createCSSSheet(css`
   dy-loading {
     padding: 1em;
   }
-  :host(:where([data-modal], :state(modal))) {
+  :host(:state(modal)) {
     pointer-events: all;
     background-color: rgba(0, 0, 0, ${theme.maskAlpha});
   }

packages/duoyun-ui/src/patterns/console.ts

@@ -98,7 +98,7 @@ const rules = css`
     padding: 4px;
     border-radius: ${theme.normalRound};
   }
-  dy-pat-console .menu:where(:hover, :state(active), [data-active]) {
+  dy-pat-console .menu:where(:hover, :state(active)) {
     background-color: ${theme.hoverBackgroundColor};
   }
   dy-pat-console .main-container {

packages/duoyun-ui/src/patterns/nav.ts

@@ -1,6 +1,6 @@
 import { history } from '@mantou/gem/lib/history';
 import { GemElement, TemplateResult, html, render } from '@mantou/gem/lib/element';
-import { adoptedStyle, attribute, connectStore, customElement, property } from '@mantou/gem/lib/decorators';
+import { adoptedStyle, attribute, connectStore, customElement, property, state } from '@mantou/gem/lib/decorators';
 import { addListener, classMap, createCSSSheet, css } from '@mantou/gem/lib/utils';
 import { mediaQuery } from '@mantou/gem/helper/mediaquery';
 
@@ -90,7 +90,7 @@ const style = createCSSSheet(css`
     filter: drop-shadow(${theme.borderColor} 0px 0px 1px)
       drop-shadow(rgba(0, 0, 0, calc(${theme.maskAlpha} - 0.1)) 0px 7px 10px);
   }
-  dy-pat-nav:where(:not([data-switching])) :where(.navbar-item-wrap:where(:hover, :focus-within)) .dropdown {
+  dy-pat-nav:where(:not(:state(switching))) :where(.navbar-item-wrap:where(:hover, :focus-within)) .dropdown {
     display: flex;
   }
   dy-pat-nav .dropdown dy-link {
@@ -195,13 +195,15 @@ export class DyPatNavElement extends GemElement<State> {
   @property logo?: string | Element | DocumentFragment;
   @property renderSlot?: (ele: Element) => TemplateResult | undefined;
 
+  @state switching: boolean;
+
   constructor() {
     super({ isLight: true });
     const blur = () => {
       this.setState({ drawerOpen: false });
       (this.getRootNode() as any).activeElement?.blur();
-      this.dataset.switching = '';
-      setTimeout(() => delete this.dataset.switching, 60);
+      this.switching = true;
+      setTimeout(() => (this.switching = false), 60);
     };
     this.effect(
       () => blur(),

packages/gem-book/src/element/elements/nav.ts

@@ -140,10 +140,10 @@ export class Nav extends GemElement {
           width: 1em;
           margin-left: 0.3rem;
         }
-        :host(:where([data-compact], :state(compact))) .external:not(.icon) {
+        :host(:state(compact)) .external:not(.icon) {
           display: none;
         }
-        :host(:where([data-compact], :state(compact))) .left .item {
+        :host(:state(compact)) .left .item {
           padding: 0 0.5rem;
         }
         gem-link,
@@ -155,10 +155,10 @@ export class Nav extends GemElement {
           background: rgba(${theme.primaryColorRGB}, 0.1);
         }
         gem-active-link:not(.icon):hover,
-        gem-active-link:where(:state(active), [data-active]) {
+        gem-active-link:state(active) {
           color: ${theme.primaryColor};
         }
-        gem-active-link:where(:state(active), [data-active])::after {
+        gem-active-link:state(active)::after {
           content: '';
           position: absolute;
           left: 0;

packages/gem-book/src/element/elements/sidebar.ts

@@ -42,7 +42,7 @@ export class SideBar extends GemElement {
   @state open: boolean;
 
   get #currentLink() {
-    return this.shadowRoot?.querySelector(':where(:state(active), [data-active])');
+    return this.shadowRoot?.querySelector(':state(active)');
   }
 
   #closeSidebar = () => updateSidebarStore({ open: false });
@@ -166,7 +166,7 @@ export class SideBar extends GemElement {
           border-radius: 10em;
           background: rgba(${theme.primaryColorRGB}, 0.1);
         }
-        .top-nav gem-active-link:where(:state(active), [data-active]) {
+        .top-nav gem-active-link:state(active) {
           color: ${theme.primaryColor};
         }
         .link {
@@ -176,11 +176,11 @@ export class SideBar extends GemElement {
           line-height: 1.5;
           padding: 0.25em 0;
         }
-        .file:where(:state(active), [data-active]) {
+        .file:state(active) {
           color: ${theme.primaryColor};
         }
-        .heading:not(:where(:state(active), [data-active])):not(:hover),
-        .file:not(:where(:state(active), [data-active])):hover {
+        .heading:not(:state(active)):not(:hover),
+        .file:not(:state(active)):hover {
           transition: opacity 0.1s;
           opacity: 0.6;
         }
@@ -251,7 +251,7 @@ export class SideBar extends GemElement {
           margin-bottom: 2rem;
         }
         @media not ${`(${mediaQuery.DESKTOP})`} {
-          .link:where(:state(match), [data-match]) + .hash {
+          .link:state(match) + .hash {
             display: block;
           }
         }
@@ -264,7 +264,7 @@ export class SideBar extends GemElement {
             top: ${theme.headerHeight};
             z-index: 3;
           }
-          :host(:not(:where([data-open], :state(open)))) {
+          :host(:not(:state(open))) {
             display: none;
           }
           .nav {