[gem] Fixed Safari compatibility

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

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

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(:--loading, :state(loading), :--no-data, :state(nodata))) {
+  :host(:where([data-loading], :state(loading), [data-no-data], :state(no-data))) {
     aspect-ratio: 2 / 1;
   }
   svg {

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

@@ -21,32 +21,32 @@ const style = createCSSSheet(css`
     --mask-start: var(--mask-top);
     --mask-end: var(--mask-bottom);
   }
-  :host(:where(:--top-overflow, :state(top-overflow))) {
+  :host(:where([data-top-overflow], :state(top-overflow))) {
     --mask-top: var(--mask-width);
   }
-  :host(:where(:--bottom-overflow, :state(bottom-overflow))) {
+  :host(:where([data-bottom-overflow], :state(bottom-overflow))) {
     --mask-bottom: calc(100% - var(--mask-width));
   }
-  :host(:where(:--left-overflow, :state(left-overflow), :--right-overflow, :state(right-overflow))) {
+  :host(:where([data-left-overflow], :state(left-overflow), [data-right-overflow], :state(right-overflow))) {
     --mask-dir: right;
     --mask-start: var(--mask-left);
     --mask-end: var(--mask-right);
   }
-  :host(:where(:--left-overflow, :state(left-overflow))) {
+  :host(:where([data-left-overflow], :state(left-overflow))) {
     --mask-left: var(--mask-width);
   }
-  :host(:where(:--right-overflow, :state(right-overflow))) {
+  :host(:where([data-right-overflow], :state(right-overflow))) {
     --mask-right: calc(100% - var(--mask-width));
   }
   :host(
       :where(
-          :--top-overflow,
+          [data-top-overflow],
           :state(top-overflow),
-          :--bottom-overflow,
+          [data-bottom-overflow],
           :state(bottom-overflow),
-          :--left-overflow,
+          [data-left-overflow],
           :state(left-overflow),
-          :--right-overflow,
+          [data-right-overflow],
           :state(right-overflow)
         )
     ) {

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

@@ -93,9 +93,9 @@ const style = createCSSSheet(css`
     --bg: ${theme.disabledColor};
   }
   :where(
-      :host(:where(:--active, :state(active))) .content,
+      :host(:where([data-active], :state(active))) .content,
       .content:where(:hover),
-      .dropdown:where(:hover, :--active, :state(active))
+      .dropdown:where(:hover, [data-active], :state(active))
     )::after {
     content: '';
     position: absolute;

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, :--active, :state(active)) {
+  .actions:where(:hover, [data-active], :state(active)) {
     background-color: ${theme.hoverBackgroundColor};
   }
   slot[name='body']::slotted(*) {

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

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

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

@@ -73,7 +73,7 @@ const formStyle = createCSSSheet(css`
   dy-form-item[type='checkbox'] {
     flex-grow: 0;
   }
-  dy-form-item:where(:--invalid, :state(invalid)) * {
+  dy-form-item:where([data-invalid], :state(invalid)) * {
     border-color: ${theme.negativeColor};
   }
   dy-form-item-inline-group {
@@ -172,7 +172,7 @@ const formItemStyle = createCSSSheet(css`
   .label:empty {
     display: none;
   }
-  :host(:where(:--invalid, :state(invalid))) .input {
+  :host(:where([data-invalid], :state(invalid))) .input {
     border-color: ${theme.negativeColor};
   }
   .input {

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

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

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

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

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

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

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

@@ -34,7 +34,7 @@ export const pickerStyle = createCSSSheet(css`
     font-size: 0.875em;
     box-sizing: border-box;
   }
-  :host(:where(:--active, :state(active))) {
+  :host(:where([data-active], :state(active))) {
     background: ${theme.lightBackgroundColor};
   }
   :host([disabled]) {
@@ -55,7 +55,7 @@ export const pickerStyle = createCSSSheet(css`
     width: 1.2em;
     color: ${theme.borderColor};
   }
-  :host(:not([disabled]):where(:hover, :--active, :state(active))) dy-use {
+  :host(:not([disabled]):where(:hover, [data-active], :state(active))) dy-use {
     color: ${theme.textColor};
   }
 `);

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

@@ -36,7 +36,7 @@ const style = createCSSSheet(css`
   :host {
     width: 15em;
   }
-  :host(:where(:hover, :--active, :state(active))) {
+  :host(:where(:hover, [data-active], :state(active))) {
     background: none;
     border-color: ${theme.textColor};
   }
@@ -77,7 +77,7 @@ const style = createCSSSheet(css`
   .search::part(input) {
     padding: 0;
   }
-  .search:where(:--filled, :state(filled), :--composing, :state(composing)) + .value {
+  .search:where([data-filled], :state(filled), [data-composing], :state(composing)) + .value {
     display: none;
   }
   .value {
@@ -174,7 +174,7 @@ export class DuoyunSelectElement extends GemElement<State> implements BasePicker
     super();
     this.tabIndex = 0;
     this.effect(() => {
-      this.internals.role = this.inline ? undefined : 'combobox';
+      this.internals.role = this.inline ? null : 'combobox';
       this.internals.ariaExpanded = String(this.state.open);
       this.internals.ariaReadOnly = String(this.disabled);
     });

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

@@ -59,7 +59,7 @@ const style = createCSSSheet(css`
   .children .item {
     padding-inline-start: calc(0.75em + 1em);
   }
-  .item:where(:hover, :--active, :state(active)) {
+  .item:where(:hover, [data-active], :state(active)) {
     background-color: ${theme.hoverBackgroundColor};
   }
   .group {

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

@@ -45,7 +45,7 @@ const style = createCSSSheet(css`
     table-layout: fixed;
     border-collapse: collapse;
   }
-  .selection:where(:--selecting, :state(selecting)) ~ table {
+  .selection:where([data-selecting], :state(selecting)) ~ table {
     user-select: none;
   }
   .selection ~ table {
@@ -100,7 +100,7 @@ const style = createCSSSheet(css`
     padding: 4px;
     border-radius: ${theme.normalRound};
   }
-  .action:where(:hover, :--active, :state(active)) {
+  .action:where(:hover, [data-active], :state(active)) {
     background-color: ${theme.hoverBackgroundColor};
   }
   .side {

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

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

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

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

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

@@ -130,10 +130,10 @@ export class Nav extends GemElement {
           background: rgba(${theme.primaryColorRGB}, 0.1);
         }
         gem-active-link:hover,
-        gem-active-link:where(:state(active), :--active) {
+        gem-active-link:where(:state(active), [data-active]) {
           color: ${theme.primaryColor};
         }
-        gem-active-link:where(:state(active), :--active)::after {
+        gem-active-link:where(:state(active), [data-active])::after {
           content: '';
           position: absolute;
           left: 0;

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

@@ -489,22 +489,21 @@ export class Pre extends GemElement {
   }
 
   render() {
-    // Safari 精度问题
-    const lineHeight = 1.7;
-    const padding = 1;
+    // Safari 精度问题所以使用整数像素单位
+    const lineHeight = '24px';
+    const padding = '1em';
     return html`
       ${this.highlight
         ? this.#getRanges(this.highlight).map(
-            ([start, end]) =>
-              html`
-                <span
-                  class="gem-highlight"
-                  style=${styleMap({
-                    top: `${(start - 1) * lineHeight + padding}em`,
-                    height: `${(end - start + 1) * lineHeight}em`,
-                  })}
-                ></span>
-              `,
+            ([start, end]) => html`
+              <span
+                class="gem-highlight"
+                style=${styleMap({
+                  top: `calc(${start - 1} * ${lineHeight} + ${padding})`,
+                  height: `calc(${end - start + 1} * ${lineHeight})`,
+                })}
+              ></span>
+            `,
           )
         : ''}
       <code
@@ -518,7 +517,7 @@ export class Pre extends GemElement {
       >
       <style>
         code {
-          padding: ${padding}em;
+          padding: ${padding};
           line-height: ${lineHeight};
         }
       </style>

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

@@ -95,14 +95,14 @@ export class SideBar extends GemElement {
           padding: 0.15em 0;
           color: inherit;
         }
-        .file:where(:state(active), :--active) {
+        .file:where(:state(active), [data-active]) {
           font-weight: bolder;
         }
-        .link:where(:state(active), :--active) + .hash {
+        .link:where(:state(active), [data-active]) + .hash {
           display: block;
         }
-        .heading:not(:where(:state(active), :--active)):not(:hover),
-        .file:not(:where(:state(active), :--active)):hover {
+        .heading:not(:where(:state(active), [data-active])):not(:hover),
+        .file:not(:where(:state(active), [data-active])):hover {
           opacity: 0.6;
         }
         .arrow {
@@ -166,7 +166,7 @@ export class SideBar extends GemElement {
   }
 
   updated() {
-    const activeEle = this.shadowRoot?.querySelector(':where(:state(active), :--active)');
+    const activeEle = this.shadowRoot?.querySelector(':where(:state(active), [data-active])');
     const removeCloseClass = (e: Element | null | undefined) => {
       if (e) {
         e.classList.remove('close');

packages/gem-examples/src/decorator/index.ts

@@ -74,7 +74,7 @@ export class App extends GemElement {
     console.log('parent render');
     return html`
       <style>
-        app-children:where(:--odd, :state(odd))::part(${Children.paragraph}) {
+        app-children:where([data-odd], :state(odd))::part(${Children.paragraph}) {
           color: red;
         }
       </style>

packages/gem-examples/src/dialog/index.ts

@@ -71,7 +71,7 @@ class Dialog extends GemDialogBaseElement {
         :host {
           display: none;
         }
-        :host(:where(:--opened, :state(opened))) {
+        :host(:where([data-opened], :state(opened))) {
           display: block;
         }
         .root {

packages/gem-examples/src/ref-route/index.ts

@@ -37,7 +37,7 @@ export class RouteHome extends GemElement {
         gem-active-link {
           display: block;
         }
-        gem-active-link:where(:--active, :state(active)) {
+        gem-active-link:where([data-active], :state(active)) {
           color: inherit;
         }
       </style>
@@ -58,7 +58,7 @@ export class RouteA extends GemElement {
         gem-active-link {
           display: block;
         }
-        gem-active-link:where(:--active, :state(active)) {
+        gem-active-link:where([data-active], :state(active)) {
           color: inherit;
         }
       </style>