From 6da5c662cf9ea6d29b73525bf0bd6428847b70ba Mon Sep 17 00:00:00 2001
From: mantou132 <709922234@qq.com>
Date: Sun, 31 Dec 2023 16:05:44 +0800
Subject: [PATCH] [duoyun-ui] Fixed `document.createElement` error

---
 .../duoyun-ui/src/elements/action-text.ts     |  3 +-
 packages/duoyun-ui/src/elements/button.ts     |  4 +-
 .../duoyun-ui/src/elements/cascader-picker.ts |  5 +-
 packages/duoyun-ui/src/elements/checkbox.ts   |  4 +-
 .../duoyun-ui/src/elements/color-picker.ts    |  5 +-
 .../duoyun-ui/src/elements/contextmenu.ts     |  6 +--
 .../duoyun-ui/src/elements/date-picker.ts     |  5 +-
 .../src/elements/date-range-picker.ts         |  5 +-
 packages/duoyun-ui/src/elements/drawer.ts     |  2 +-
 .../duoyun-ui/src/elements/file-picker.ts     | 16 ++++---
 packages/duoyun-ui/src/elements/input.ts      |  3 +-
 packages/duoyun-ui/src/elements/link.ts       |  2 +
 packages/duoyun-ui/src/elements/options.ts    |  3 +-
 packages/duoyun-ui/src/elements/picker.ts     |  6 +--
 packages/duoyun-ui/src/elements/radio.ts      |  4 +-
 packages/duoyun-ui/src/elements/rate.ts       |  3 +-
 packages/duoyun-ui/src/elements/segmented.ts  |  3 +-
 packages/duoyun-ui/src/elements/select.ts     |  3 +-
 .../duoyun-ui/src/elements/shortcut-record.ts | 10 +---
 packages/duoyun-ui/src/elements/slider.ts     |  8 ++--
 packages/duoyun-ui/src/elements/switch.ts     |  4 +-
 .../duoyun-ui/src/elements/time-picker.ts     |  5 +-
 packages/duoyun-ui/src/elements/tree.ts       |  3 +-
 packages/duoyun-ui/src/elements/wait.ts       |  2 +-
 .../gem-book/src/element/elements/footer.ts   |  1 -
 packages/gem-book/src/element/helper/i18n.ts  |  2 +
 .../gem/docs/en/003-api/001-gem-element.md    |  1 +
 .../004-blog/001-create-standard-element.md   | 10 ++--
 .../gem/docs/zh/003-api/001-gem-element.md    |  1 +
 .../004-blog/001-create-standard-element.md   |  8 +++-
 packages/gem/src/elements/base/dialog.ts      |  5 +-
 packages/gem/src/elements/base/link.ts        |  3 +-
 packages/gem/src/elements/base/reflect.ts     | 26 ++++++++---
 packages/gem/src/elements/base/title.ts       | 10 +++-
 packages/gem/src/helper/ssr-shim.ts           | 18 ++++++--
 packages/gem/src/lib/element.ts               | 46 +++++++++++++++----
 packages/gem/src/lib/utils.ts                 | 12 ++++-
 37 files changed, 163 insertions(+), 94 deletions(-)

diff --git a/packages/duoyun-ui/src/elements/action-text.ts b/packages/duoyun-ui/src/elements/action-text.ts
index fe2c8a71..124565dc 100644
--- a/packages/duoyun-ui/src/elements/action-text.ts
+++ b/packages/duoyun-ui/src/elements/action-text.ts
@@ -41,8 +41,7 @@ export class DuoyunActionTextElement extends GemElement {
   @state active: boolean;
 
   constructor() {
-    super();
-    this.tabIndex = 0;
+    super({ focusable: true });
     this.internals.role = 'button';
     this.addEventListener('keydown', commonHandle);
   }
diff --git a/packages/duoyun-ui/src/elements/button.ts b/packages/duoyun-ui/src/elements/button.ts
index af9a5089..e6eb152a 100644
--- a/packages/duoyun-ui/src/elements/button.ts
+++ b/packages/duoyun-ui/src/elements/button.ts
@@ -208,8 +208,8 @@ export class DuoyunButtonElement extends GemElement {
         }
       </style>
       <div
-        tabindex="0"
         role="button"
+        tabindex=${-Number(this.disabled)}
         aria-disabled=${this.disabled}
         @keydown=${commonHandle}
         class="content"
@@ -234,9 +234,9 @@ export class DuoyunButtonElement extends GemElement {
               ref=${this.dropdownRef.ref}
               class="dropdown"
               part=${DuoyunButtonElement.dropdown}
-              tabindex="0"
               @keydown=${commonHandle}
               role="button"
+              tabindex=${-Number(this.disabled)}
               aria-disabled=${this.disabled}
               @click=${this.#onClickDropdown}
               .element=${icons.expand}
diff --git a/packages/duoyun-ui/src/elements/cascader-picker.ts b/packages/duoyun-ui/src/elements/cascader-picker.ts
index 04bf2a5c..5244accf 100644
--- a/packages/duoyun-ui/src/elements/cascader-picker.ts
+++ b/packages/duoyun-ui/src/elements/cascader-picker.ts
@@ -51,7 +51,7 @@ const style = createCSSSheet(css`
 @adoptedStyle(style)
 @adoptedStyle(pickerStyle)
 @adoptedStyle(focusStyle)
-export class DuoyunCascaderPickElement extends GemElement implements BasePickerElement {
+export class DuoyunCascaderPickerElement extends GemElement implements BasePickerElement {
   @attribute placeholder: string;
   @boolattribute fit: boolean;
   @boolattribute disabled: boolean;
@@ -65,10 +65,9 @@ export class DuoyunCascaderPickElement extends GemElement implements BasePickerE
   @emitter expand: Emitter<Option>;
 
   constructor() {
-    super();
+    super({ focusable: true });
     this.addEventListener('click', this.#onOpen);
     this.addEventListener('keydown', commonHandle);
-    this.tabIndex = 0;
     this.internals.role = 'combobox';
   }
 
diff --git a/packages/duoyun-ui/src/elements/checkbox.ts b/packages/duoyun-ui/src/elements/checkbox.ts
index 92a17f72..0fe1b181 100644
--- a/packages/duoyun-ui/src/elements/checkbox.ts
+++ b/packages/duoyun-ui/src/elements/checkbox.ts
@@ -89,12 +89,12 @@ export class DuoyunCheckboxElement extends GemElement {
     return html`
       <dy-use
         role="checkbox"
-        tabindex="0"
-        @keydown=${commonHandle}
+        tabindex=${-Number(this.disabled)}
         aria-disabled=${this.disabled}
         aria-labelledby="label"
         aria-checked=${this.indeterminate ? 'mixed' : this.checked}
         class="checkbox"
+        @keydown=${commonHandle}
         .element=${this.checked ? icons.check : undefined}
       ></dy-use>
       <slot id="label"></slot>
diff --git a/packages/duoyun-ui/src/elements/color-picker.ts b/packages/duoyun-ui/src/elements/color-picker.ts
index ff8ee2f9..6209c8c0 100644
--- a/packages/duoyun-ui/src/elements/color-picker.ts
+++ b/packages/duoyun-ui/src/elements/color-picker.ts
@@ -56,7 +56,7 @@ const style = createCSSSheet(css`
 @customElement('dy-color-picker')
 @adoptedStyle(style)
 @adoptedStyle(focusStyle)
-export class DuoyunColorPickElement extends GemElement implements BasePickerElement {
+export class DuoyunColorPickerElement extends GemElement implements BasePickerElement {
   @attribute value: HexColor;
   @boolattribute alpha: boolean;
   @refobject popoverRef: RefObject<DuoyunPopoverElement>;
@@ -85,7 +85,8 @@ export class DuoyunColorPickElement extends GemElement implements BasePickerElem
       >
         <div
           role="combobox"
-          tabindex="0"
+          tabindex=${-Number(this.disabled)}
+          aria-disabled=${this.disabled}
           @keydown=${commonHandle}
           class="picker"
           style=${styleMap({ backgroundColor: this.value })}
diff --git a/packages/duoyun-ui/src/elements/contextmenu.ts b/packages/duoyun-ui/src/elements/contextmenu.ts
index 3881c46d..b91f7928 100644
--- a/packages/duoyun-ui/src/elements/contextmenu.ts
+++ b/packages/duoyun-ui/src/elements/contextmenu.ts
@@ -113,10 +113,10 @@ const style = createCSSSheet(css`
 @customElement('dy-contextmenu')
 @connectStore(contextmenuStore)
 @adoptedStyle(style)
-export class DuoyunContextMenuElement extends GemElement {
+export class DuoyunContextmenuElement extends GemElement {
   @refobject optionsRef: RefObject<DuoyunOptionsElement>;
 
-  static instance?: DuoyunContextMenuElement;
+  static instance?: DuoyunContextmenuElement;
 
   static async open(contextmenu: Menu, options: ContextMenuOptions = {}) {
     const {
@@ -365,4 +365,4 @@ export class DuoyunContextMenuElement extends GemElement {
   };
 }
 
-export const ContextMenu = DuoyunContextMenuElement;
+export const ContextMenu = DuoyunContextmenuElement;
diff --git a/packages/duoyun-ui/src/elements/date-picker.ts b/packages/duoyun-ui/src/elements/date-picker.ts
index 019d583c..f5571973 100644
--- a/packages/duoyun-ui/src/elements/date-picker.ts
+++ b/packages/duoyun-ui/src/elements/date-picker.ts
@@ -69,7 +69,7 @@ const style = createCSSSheet(css`
 @adoptedStyle(style)
 @adoptedStyle(focusStyle)
 @connectStore(icons)
-export class DuoyunDatePickElement extends GemElement implements BasePickerElement {
+export class DuoyunDatePickerElement extends GemElement implements BasePickerElement {
   @attribute placeholder: string;
   @boolattribute time: boolean;
   @boolattribute clearable: boolean;
@@ -89,10 +89,9 @@ export class DuoyunDatePickElement extends GemElement implements BasePickerEleme
   }
 
   constructor() {
-    super();
+    super({ focusable: true });
     this.addEventListener('click', this.#onOpen);
     this.addEventListener('keydown', commonHandle);
-    this.tabIndex = 0;
     this.internals.role = 'combobox';
   }
 
diff --git a/packages/duoyun-ui/src/elements/date-range-picker.ts b/packages/duoyun-ui/src/elements/date-range-picker.ts
index 8e7911da..38695067 100644
--- a/packages/duoyun-ui/src/elements/date-range-picker.ts
+++ b/packages/duoyun-ui/src/elements/date-range-picker.ts
@@ -66,7 +66,7 @@ const style = createCSSSheet(css`
 @adoptedStyle(style)
 @adoptedStyle(pickerStyle)
 @adoptedStyle(focusStyle)
-export class DuoyunDateRangePickElement extends GemElement implements BasePickerElement {
+export class DuoyunDateRangePickerElement extends GemElement implements BasePickerElement {
   @attribute placeholder: string;
   @boolattribute clearable: boolean;
   @boolattribute disabled: boolean;
@@ -78,10 +78,9 @@ export class DuoyunDateRangePickElement extends GemElement implements BasePicker
   @emitter clear: Emitter;
 
   constructor() {
-    super();
+    super({ focusable: true });
     this.addEventListener('click', this.#onOpen);
     this.addEventListener('keydown', commonHandle);
-    this.tabIndex = 0;
     this.internals.role = 'combobox';
   }
 
diff --git a/packages/duoyun-ui/src/elements/drawer.ts b/packages/duoyun-ui/src/elements/drawer.ts
index cd1a8a8f..c044a3ac 100644
--- a/packages/duoyun-ui/src/elements/drawer.ts
+++ b/packages/duoyun-ui/src/elements/drawer.ts
@@ -27,7 +27,7 @@ const style = createCSSSheet(css`
 @customElement('dy-drawer')
 @adoptedStyle(style)
 export class DuoyunDrawerElement extends DuoyunModalElement {
-  constructor(options: ModalOptions) {
+  constructor(options: ModalOptions = {}) {
     super(options);
     this.addEventListener('maskclick', () => this.close(null));
     this.openAnimation = slideInLeft;
diff --git a/packages/duoyun-ui/src/elements/file-picker.ts b/packages/duoyun-ui/src/elements/file-picker.ts
index 66f9e5b7..5ceeeed9 100644
--- a/packages/duoyun-ui/src/elements/file-picker.ts
+++ b/packages/duoyun-ui/src/elements/file-picker.ts
@@ -120,7 +120,7 @@ export interface FileItem extends File {
 @customElement('dy-file-picker')
 @adoptedStyle(style)
 @adoptedStyle(focusStyle)
-export class DuoyunFilePickElement extends GemElement implements BasePickerElement {
+export class DuoyunFilePickerElement extends GemElement implements BasePickerElement {
   @part static button: string;
   @part static item: string;
 
@@ -131,6 +131,7 @@ export class DuoyunFilePickElement extends GemElement implements BasePickerEleme
   /**@deprecated Use children*/
   @attribute placeholder: string;
   @boolattribute directory: boolean;
+  @boolattribute disabled: boolean;
   @boolattribute multiple: boolean;
   @globalemitter change: Emitter<FileItem[]>;
   @refobject inputRef: RefObject<HTMLInputElement>;
@@ -173,13 +174,14 @@ export class DuoyunFilePickElement extends GemElement implements BasePickerEleme
       }
     };
     return html`
-      <div role="listitem" class="item" part=${DuoyunFilePickElement.item} style=${styleMap({ color: getColor() })}>
+      <div role="listitem" class="item" part=${DuoyunFilePickerElement.item} style=${styleMap({ color: getColor() })}>
         <div class="name">${name}</div>
         ${progress ? html`<div role="progressbar">${Math.floor(progress)}%</div>` : ''}
         <slot name=${utf8ToB64(name, true)}></slot>
         <dy-use
           role="button"
-          tabindex="0"
+          tabindex=${-Number(this.disabled)}
+          aria-disabled=${this.disabled}
           @keydown=${commonHandle}
           class="icon"
           .element=${icons.delete}
@@ -204,7 +206,7 @@ export class DuoyunFilePickElement extends GemElement implements BasePickerEleme
       <dy-image-preview
         role="listitem"
         class="item"
-        part=${DuoyunFilePickElement.item}
+        part=${DuoyunFilePickerElement.item}
         .status=${getStatus()}
         .progress=${item.progress || 0}
         .file=${item}
@@ -221,15 +223,17 @@ export class DuoyunFilePickElement extends GemElement implements BasePickerEleme
         hidden
         type="file"
         ?multiple=${this.multiple}
+        ?disabled=${this.disabled}
         ref=${this.inputRef.ref}
         @change=${this.#onChange}
         .webkitdirectory=${this.directory}
         accept=${this.#accept}>
       </input>
       <div
-        tabindex="0"
         role="button"
-        part=${DuoyunFilePickElement.button}
+        tabindex=${-Number(this.disabled)}
+        aria-disabled=${this.disabled}
+        part=${DuoyunFilePickerElement.button}
         class="item button"
         @keydown=${commonHandle}
         @click=${() => this.showPicker()}>
diff --git a/packages/duoyun-ui/src/elements/input.ts b/packages/duoyun-ui/src/elements/input.ts
index 6637e4d5..2a3c4d99 100644
--- a/packages/duoyun-ui/src/elements/input.ts
+++ b/packages/duoyun-ui/src/elements/input.ts
@@ -388,8 +388,9 @@ export class DuoyunInputElement extends GemElement {
       ${this.clearable && (this.alwayclearable || this.value)
         ? html`
             <dy-use
-              tabindex="0"
               role="button"
+              tabindex=${-Number(this.disabled)}
+              aria-disabled=${this.disabled}
               @keydown=${commonHandle}
               @click=${this.#onClear}
               part=${DuoyunInputElement.clear}
diff --git a/packages/duoyun-ui/src/elements/link.ts b/packages/duoyun-ui/src/elements/link.ts
index ba8365cc..6d3c2c92 100644
--- a/packages/duoyun-ui/src/elements/link.ts
+++ b/packages/duoyun-ui/src/elements/link.ts
@@ -4,6 +4,7 @@ import { GemLinkElement, GemActiveLinkElement } from '@mantou/gem/elements/base/
 
 import { commonHandle } from '../lib/hotkeys';
 import { focusStyle } from '../lib/styles';
+import { theme } from '../lib/theme';
 
 export * from '@mantou/gem/elements/base/link';
 
@@ -11,6 +12,7 @@ const style = createCSSSheet(css`
   :host {
     color: inherit;
     text-decoration: inherit;
+    border-radius: ${theme.normalRound};
   }
 `);
 
diff --git a/packages/duoyun-ui/src/elements/options.ts b/packages/duoyun-ui/src/elements/options.ts
index a26fe287..55372280 100644
--- a/packages/duoyun-ui/src/elements/options.ts
+++ b/packages/duoyun-ui/src/elements/options.ts
@@ -164,8 +164,7 @@ export class DuoyunOptionsElement extends GemElement<State> {
   };
 
   constructor() {
-    super();
-    this.tabIndex = 0;
+    super({ focusable: true });
     this.internals.role = 'listbox';
   }
 
diff --git a/packages/duoyun-ui/src/elements/picker.ts b/packages/duoyun-ui/src/elements/picker.ts
index 3cb65ede..9ec66d0d 100644
--- a/packages/duoyun-ui/src/elements/picker.ts
+++ b/packages/duoyun-ui/src/elements/picker.ts
@@ -61,6 +61,7 @@ export const pickerStyle = createCSSSheet(css`
 `);
 
 export abstract class BasePickerElement {
+  disabled: boolean;
   showPicker: () => void;
 }
 
@@ -99,7 +100,7 @@ export interface Option<T = any> {
 @adoptedStyle(pickerStyle)
 @adoptedStyle(focusStyle)
 @connectStore(icons)
-export class DuoyunPickElement extends GemElement implements BasePickerElement {
+export class DuoyunPickerElement extends GemElement implements BasePickerElement {
   @attribute placeholder: string;
   @boolattribute disabled: boolean;
   @boolattribute borderless: boolean;
@@ -113,10 +114,9 @@ export class DuoyunPickElement extends GemElement implements BasePickerElement {
   @globalemitter change: Emitter<any>;
 
   constructor() {
-    super();
+    super({ focusable: true });
     this.addEventListener('click', this.#onOpen);
     this.addEventListener('keydown', commonHandle);
-    this.tabIndex = 0;
     this.internals.role = 'combobox';
   }
 
diff --git a/packages/duoyun-ui/src/elements/radio.ts b/packages/duoyun-ui/src/elements/radio.ts
index 1e043e40..96fe6ea4 100644
--- a/packages/duoyun-ui/src/elements/radio.ts
+++ b/packages/duoyun-ui/src/elements/radio.ts
@@ -80,11 +80,11 @@ export class DuoyunRadioElement extends GemElement {
     return html`
       <div
         role="radio"
-        tabindex="0"
         @keydown=${commonHandle}
-        aria-labelledby="label"
+        tabindex=${-Number(this.disabled)}
         aria-disabled=${this.disabled}
         aria-checked=${this.checked}
+        aria-labelledby="label"
         class="radio"
       ></div>
       <slot id="label"></slot>
diff --git a/packages/duoyun-ui/src/elements/rate.ts b/packages/duoyun-ui/src/elements/rate.ts
index f326d352..49be3a1a 100644
--- a/packages/duoyun-ui/src/elements/rate.ts
+++ b/packages/duoyun-ui/src/elements/rate.ts
@@ -116,7 +116,8 @@ export class DuoyunRateElement extends GemElement {
               fill: this.value >= this.#total - index,
               mask: this.value < this.#total - index && this.value > this.#total - 1 - index,
             })}
-            tabindex="0"
+            tabindex=${-Number(this.disabled)}
+            aria-disabled=${this.disabled}
             @keydown=${commonHandle}
             @click=${() => this.#onClick(this.#total - index)}
             .element=${icons.star}
diff --git a/packages/duoyun-ui/src/elements/segmented.ts b/packages/duoyun-ui/src/elements/segmented.ts
index 9ad176f5..c0930bdf 100644
--- a/packages/duoyun-ui/src/elements/segmented.ts
+++ b/packages/duoyun-ui/src/elements/segmented.ts
@@ -148,7 +148,8 @@ export class DuoyunSegmentedElement extends GemElement {
         return html`
           <div
             role="radio"
-            tabindex="0"
+            tabindex=${-Number(this.disabled)}
+            aria-disabled=${this.disabled}
             style=${styleMap({ anchorName: getAnchorName(index) })}
             class=${classMap({ segment: true, current: index === currentIndex })}
             part=${partMap({
diff --git a/packages/duoyun-ui/src/elements/select.ts b/packages/duoyun-ui/src/elements/select.ts
index 6da8c270..004647f3 100644
--- a/packages/duoyun-ui/src/elements/select.ts
+++ b/packages/duoyun-ui/src/elements/select.ts
@@ -173,8 +173,7 @@ export class DuoyunSelectElement extends GemElement<State> implements BasePicker
   }
 
   constructor() {
-    super();
-    this.tabIndex = 0;
+    super({ focusable: true });
     this.effect(() => {
       this.internals.role = this.inline ? null : 'combobox';
       this.internals.ariaExpanded = String(this.state.open);
diff --git a/packages/duoyun-ui/src/elements/shortcut-record.ts b/packages/duoyun-ui/src/elements/shortcut-record.ts
index 576c82eb..8f694768 100644
--- a/packages/duoyun-ui/src/elements/shortcut-record.ts
+++ b/packages/duoyun-ui/src/elements/shortcut-record.ts
@@ -111,17 +111,9 @@ export class DuoyunShortcutRecordElement extends GemElement {
   }
 
   constructor() {
-    super();
+    super({ focusable: true });
     this.internals.role = 'input';
     this.addEventListener('keydown', this.#onKeydown);
-    this.effect(() => {
-      if (this.disabled) {
-        this.removeAttribute('tabindex');
-      } else {
-        this.tabIndex = 0;
-      }
-      this.internals.ariaDisabled = String(this.disabled);
-    });
   }
 
   #onKeydown = (evt: KeyboardEvent) => {
diff --git a/packages/duoyun-ui/src/elements/slider.ts b/packages/duoyun-ui/src/elements/slider.ts
index aeaeab29..87c68894 100644
--- a/packages/duoyun-ui/src/elements/slider.ts
+++ b/packages/duoyun-ui/src/elements/slider.ts
@@ -128,18 +128,16 @@ export class DuoyunSliderElement extends GemElement {
   }
 
   constructor() {
-    super();
-    this.tabIndex = 0;
-    this.addEventListener('keydown', this.#onKeydown);
+    super({ focusable: true });
     this.internals.role = 'slider';
+    this.addEventListener('keydown', this.#onKeydown);
     this.effect(
       () => {
-        this.internals.ariaDisabled = String(this.disabled);
         this.internals.ariaValueText = String(this.value);
         const position = this.#getValue(clamp(this.min, this.value, this.#max)) / this.#diff;
         this.setState({ position, displayPosition: position });
       },
-      () => [this.value, this.disabled],
+      () => [this.value],
     );
   }
 
diff --git a/packages/duoyun-ui/src/elements/switch.ts b/packages/duoyun-ui/src/elements/switch.ts
index 01e52149..5bebf3e6 100644
--- a/packages/duoyun-ui/src/elements/switch.ts
+++ b/packages/duoyun-ui/src/elements/switch.ts
@@ -101,9 +101,9 @@ export class DuoyunSwitchElement extends GemElement {
       </style>
       <div
         class="switch"
-        role="switch"
-        tabindex="0"
         @keydown=${commonHandle}
+        role="switch"
+        tabindex=${-Number(this.disabled)}
         aria-disabled=${this.disabled}
         aria-labelledby="label"
         aria-checked=${this.checked}
diff --git a/packages/duoyun-ui/src/elements/time-picker.ts b/packages/duoyun-ui/src/elements/time-picker.ts
index 1b55507e..604462f5 100644
--- a/packages/duoyun-ui/src/elements/time-picker.ts
+++ b/packages/duoyun-ui/src/elements/time-picker.ts
@@ -59,7 +59,7 @@ const style = createCSSSheet(css`
 @adoptedStyle(style)
 @adoptedStyle(pickerStyle)
 @adoptedStyle(focusStyle)
-export class DuoyunTimePickElement extends GemElement implements BasePickerElement {
+export class DuoyunTimePickerElement extends GemElement implements BasePickerElement {
   @attribute placeholder: string;
   @boolattribute clearable: boolean;
   @boolattribute disabled: boolean;
@@ -78,10 +78,9 @@ export class DuoyunTimePickElement extends GemElement implements BasePickerEleme
   }
 
   constructor() {
-    super();
+    super({ focusable: true });
     this.addEventListener('click', this.#onOpen);
     this.addEventListener('keydown', commonHandle);
-    this.tabIndex = 0;
     this.internals.role = 'combobox';
   }
 
diff --git a/packages/duoyun-ui/src/elements/tree.ts b/packages/duoyun-ui/src/elements/tree.ts
index 7d4c2a86..f04b0b2d 100644
--- a/packages/duoyun-ui/src/elements/tree.ts
+++ b/packages/duoyun-ui/src/elements/tree.ts
@@ -111,8 +111,7 @@ class _DuoyunTreeItemElement extends GemElement {
   @state active: boolean;
 
   constructor() {
-    super();
-    this.tabIndex = 0;
+    super({ focusable: true });
     this.internals.role = 'treeitem';
   }
 
diff --git a/packages/duoyun-ui/src/elements/wait.ts b/packages/duoyun-ui/src/elements/wait.ts
index 5e0711ce..1fa107bc 100644
--- a/packages/duoyun-ui/src/elements/wait.ts
+++ b/packages/duoyun-ui/src/elements/wait.ts
@@ -101,7 +101,7 @@ export class DuoyunWaitElement extends GemElement<State> {
 
   @state modal: boolean;
 
-  constructor(state: State) {
+  constructor(state: State = {}) {
     super();
     this.state = state;
     this.internals.role = 'alert';
diff --git a/packages/gem-book/src/element/elements/footer.ts b/packages/gem-book/src/element/elements/footer.ts
index 881ff00e..a7da1685 100644
--- a/packages/gem-book/src/element/elements/footer.ts
+++ b/packages/gem-book/src/element/elements/footer.ts
@@ -1,5 +1,4 @@
 import { html, GemElement, customElement, connectStore, css } from '@mantou/gem';
-import { mediaQuery } from '@mantou/gem/helper/mediaquery';
 
 import { selfI18n } from '../helper/i18n';
 import { theme } from '../helper/theme';
diff --git a/packages/gem-book/src/element/helper/i18n.ts b/packages/gem-book/src/element/helper/i18n.ts
index 57638a89..c3cee734 100644
--- a/packages/gem-book/src/element/helper/i18n.ts
+++ b/packages/gem-book/src/element/helper/i18n.ts
@@ -18,4 +18,6 @@ export const Resources = {
 export const selfI18n = new I18n<typeof Resources.en>({
   fallbackLanguage: 'en',
   resources: Resources,
+  // 默认是自动识别，如果不是多语言版本使用 `--template` 模版指定语言
+  currentLanguage: document.documentElement.lang,
 });
diff --git a/packages/gem/docs/en/003-api/001-gem-element.md b/packages/gem/docs/en/003-api/001-gem-element.md
index afaddf2d..51f2f033 100644
--- a/packages/gem/docs/en/003-api/001-gem-element.md
+++ b/packages/gem/docs/en/003-api/001-gem-element.md
@@ -17,6 +17,7 @@ class GemElement<State> extends HTMLElement {
 | ---------------- | ------------------------------------------------------------------------- |
 | `isLight`        | Whether to render as Light DOM                                            |
 | `isAsync`        | Whether to use non-blocking rendering mode                                |
+| `focusable`      | Make elements focusable using `tabIndex`                                  |
 | `delegatesFocus` | When the element attempts to focus, the automatic proxy to the focus part |
 | `slotAssignment` | Allow manual allocation of slot                                           |
 
diff --git a/packages/gem/docs/en/004-blog/001-create-standard-element.md b/packages/gem/docs/en/004-blog/001-create-standard-element.md
index 64d7c11a..eb84be48 100644
--- a/packages/gem/docs/en/004-blog/001-create-standard-element.md
+++ b/packages/gem/docs/en/004-blog/001-create-standard-element.md
@@ -205,23 +205,27 @@ When users use custom elements, they can use the `role`,`aria-*` attributes to s
 html`<my-element role="region" aria-label="my profile"></my-element>`;
 ```
 
-Use [`ElementInternals`](https://html.spec.whatwg.org/multipage/custom-elements.html#elementinternals) to define the default semantics of custom elements, use [`delegatesFocus`](https://developer.mozilla.org/en-US/docs/Web/API/Element/attachShadow#delegatesfocus) or `tabIndex` focus:
+Use [`ElementInternals`](https://html.spec.whatwg.org/multipage/custom-elements.html#elementinternals) to define the default semantics of custom elements, use [`delegatesFocus`](https://developer.mozilla.org/en-US/docs/Web/API/Element/attachShadow#delegatesfocus) or `focusable` focus:
 
 ```ts
 @customElement('my-element')
 class MyElement extends GemElement {
+  @boolattribute disabled: boolean;
   constructor() {
+    // or super({ focusable: true });
     super({ delegatesFocus: true });
     this.internals.role = 'region';
     this.internals.ariaLabel = 'my profile';
   }
   render() {
-    return html`<div tabindex="0">Focusable</div>`;
+    return html`<div tabindex=${-Number(this.disabled)}>Focusable</div>`;
   }
 }
 ```
 
-Resources:
+> [!NOTE] `delegatesFocus` or `focusable` elements with the `disabled` attribute will not trigger the `click` event just like [native elements](https://github.com/whatwg/html/issues/5886).
+>
+> Resources:
 
 - https://w3c.github.io/html-aria
 - https://w3c.github.io/using-aria/
diff --git a/packages/gem/docs/zh/003-api/001-gem-element.md b/packages/gem/docs/zh/003-api/001-gem-element.md
index 2dacb436..8d5356f2 100644
--- a/packages/gem/docs/zh/003-api/001-gem-element.md
+++ b/packages/gem/docs/zh/003-api/001-gem-element.md
@@ -17,6 +17,7 @@ class GemElement<State> extends HTMLElement {
 | ---------------- | ------------------------------------ |
 | `isLight`        | 是否渲染成 Light DOM                 |
 | `isAsync`        | 是否使用非阻塞渲染模式               |
+| `focusable`      | 使用 `tabIndex` 让元素可聚焦         |
 | `delegatesFocus` | 当元素尝试聚焦时自动代理到可聚焦部分 |
 | `slotAssignment` | 允许手动分配插槽                     |
 
diff --git a/packages/gem/docs/zh/004-blog/001-create-standard-element.md b/packages/gem/docs/zh/004-blog/001-create-standard-element.md
index 15b1e611..33db0175 100644
--- a/packages/gem/docs/zh/004-blog/001-create-standard-element.md
+++ b/packages/gem/docs/zh/004-blog/001-create-standard-element.md
@@ -205,22 +205,26 @@ html`<my-element hidden>My content</my-element>`;
 html`<my-element role="region" aria-label="my profile"></my-element>`;
 ```
 
-使用 [`ElementInternals`](https://html.spec.whatwg.org/multipage/custom-elements.html#elementinternals) 可以定义自定义元素的默认语义，用 [`delegatesFocus`](https://developer.mozilla.org/en-US/docs/Web/API/Element/attachShadow#delegatesfocus) 或者 `tabIndex` 处理聚焦：
+使用 [`ElementInternals`](https://html.spec.whatwg.org/multipage/custom-elements.html#elementinternals) 可以定义自定义元素的默认语义，用 [`delegatesFocus`](https://developer.mozilla.org/en-US/docs/Web/API/Element/attachShadow#delegatesfocus) 或者 `focusable` 处理聚焦：
 
 ```ts
 @customElement('my-element')
 class MyElement extends GemElement {
+  @boolattribute disabled: boolean;
   constructor() {
+    // or super({ focusable: true });
     super({ delegatesFocus: true });
     this.internals.role = 'region';
     this.internals.ariaLabel = 'my profile';
   }
   render() {
-    return html`<div tabindex="0">Focusable</div>`;
+    return html`<div tabindex=${-Number(this.disabled)}>Focusable</div>`;
   }
 }
 ```
 
+> [!NOTE] `delegatesFocus` 或者 `focusable` 元素当有 `disabled` 属性时会像[原生元素](https://github.com/whatwg/html/issues/5886)一样不会触发 `click` 事件
+
 资源：
 
 - https://w3c.github.io/html-aria
diff --git a/packages/gem/src/elements/base/dialog.ts b/packages/gem/src/elements/base/dialog.ts
index e49a93bf..57e20881 100644
--- a/packages/gem/src/elements/base/dialog.ts
+++ b/packages/gem/src/elements/base/dialog.ts
@@ -23,7 +23,10 @@ export abstract class GemDialogBaseElement extends GemElement {
 
   constructor() {
     super();
-    this.inert = true;
+    this.effect(
+      () => (this.inert = true),
+      () => [],
+    );
     this.internals.role = 'dialog';
     this.internals.ariaModal = 'true';
   }
diff --git a/packages/gem/src/elements/base/link.ts b/packages/gem/src/elements/base/link.ts
index 736cf8ed..73a9538c 100644
--- a/packages/gem/src/elements/base/link.ts
+++ b/packages/gem/src/elements/base/link.ts
@@ -50,8 +50,7 @@ export class GemLinkElement extends GemElement {
   }
 
   constructor() {
-    super();
-    this.tabIndex = 0;
+    super({ focusable: true });
     this.addEventListener('click', this.#onClick);
   }
 
diff --git a/packages/gem/src/elements/base/reflect.ts b/packages/gem/src/elements/base/reflect.ts
index c8f6b670..ff15e503 100644
--- a/packages/gem/src/elements/base/reflect.ts
+++ b/packages/gem/src/elements/base/reflect.ts
@@ -1,25 +1,37 @@
 import { GemElement } from '../../lib/element';
 import { property } from '../../lib/decorators';
 
+// 注意，预渲染可能造成重复的元素，在序列化时要手动移除 `dataset.reflect` 元素
+// 不能在顶部根据 `dataset` 标记清除这些元素，因为延时加载时会把正常 reflect 元素清除，
+// 比如 duoyun-ui 文档站加载示例元素时把 gem-book 的 reflect 元素清除
+// ref 读取时需要用到 `target` `dataset`
 export class GemReflectElement extends GemElement {
   @property target: HTMLElement = document.head;
 
   constructor() {
     super({ isLight: true });
-    this.hidden = true;
-    this.dataset.gemReflect = '';
+
+    this.effect(
+      () => {
+        this.hidden = true;
+        this.dataset.gemReflect = '';
+      },
+      () => [],
+    );
+
+    // 依赖于 lit-html 的 comment 标签
+    // 动态数量的子元素不支持换 target
+    let childNodes: ChildNode[] | undefined;
     this.effect(
       () => {
-        const childNodes = [...this.childNodes];
+        childNodes = childNodes || [...this.childNodes];
         childNodes.forEach((node) => {
-          if (node instanceof HTMLElement) {
+          if (node instanceof HTMLElement || node instanceof SVGElement) {
             node.dataset.reflect = '';
           }
           this.target.append(node);
         });
-        return () => {
-          childNodes.forEach((node) => node.remove());
-        };
+        return () => childNodes!.forEach((node) => node.remove());
       },
       () => [this.target],
     );
diff --git a/packages/gem/src/elements/base/title.ts b/packages/gem/src/elements/base/title.ts
index 1c663a9e..56eb8965 100644
--- a/packages/gem/src/elements/base/title.ts
+++ b/packages/gem/src/elements/base/title.ts
@@ -17,18 +17,24 @@ import { GemElement, html } from '../../lib/element';
 import { attribute, boolattribute } from '../../lib/decorators';
 import { updateStore, connect } from '../../lib/store';
 import { titleStore } from '../../lib/history';
+import { addMicrotask } from '../../lib/utils';
 
 const defaultTitle = document.title;
 
+let documentTitle = '';
+const setTitle = () => (document.title = documentTitle);
+
 function setDocumentTitle(str?: string | null, prefix = '', suffix = '') {
   const title = titleStore.title || str;
   if (title && title !== defaultTitle) {
     GemTitleElement.title = title;
-    document.title = prefix + GemTitleElement.title + suffix;
+    documentTitle = prefix + GemTitleElement.title + suffix;
   } else {
     GemTitleElement.title = defaultTitle;
-    document.title = GemTitleElement.title;
+    documentTitle = GemTitleElement.title;
   }
+  // 避免重定向时的中间状态
+  addMicrotask(setTitle);
 }
 
 connect(titleStore, setDocumentTitle);
diff --git a/packages/gem/src/helper/ssr-shim.ts b/packages/gem/src/helper/ssr-shim.ts
index 53c6935b..f5a9b43f 100644
--- a/packages/gem/src/helper/ssr-shim.ts
+++ b/packages/gem/src/helper/ssr-shim.ts
@@ -2,7 +2,10 @@
 // @ts-nocheck
 if (typeof window === 'undefined') {
   const getAny = () => {
-    const anonymous = () => getAny();
+    // constructable
+    function anonymous() {
+      return getAny();
+    }
     Object.defineProperties(anonymous, {
       length: { writable: true },
       name: { writable: true },
@@ -16,14 +19,21 @@ if (typeof window === 'undefined') {
   };
   const any = getAny();
 
+  globalThis.window = globalThis;
+  globalThis.location = new URL('about:blank');
+  globalThis.HTMLElement = null;
+
   globalThis.document = any;
   globalThis.addEventListener = any;
   globalThis.history = any;
   globalThis.navigator = any;
   globalThis.customElements = any;
-  globalThis.HTMLElement = null;
-  globalThis.location = new URL('about:blank');
-  globalThis.window = globalThis;
+
+  // duoyun-ui
+  globalThis.CSSStyleSheet = any;
+  globalThis.Document = any;
+  globalThis.Element = any;
+  globalThis.MutationObserver = any;
 }
 
 export {};
diff --git a/packages/gem/src/lib/element.ts b/packages/gem/src/lib/element.ts
index df39a85d..2c1f5d89 100644
--- a/packages/gem/src/lib/element.ts
+++ b/packages/gem/src/lib/element.ts
@@ -13,6 +13,7 @@ import {
   kebabToCamelCase,
   PropProxyMap,
   removeItems,
+  addListener,
 } from './utils';
 import * as GemExports from './element';
 import * as VersionExports from './version';
@@ -75,12 +76,10 @@ const constructorSymbol = Symbol('constructor');
 const initSymbol = Symbol('init');
 const updateSymbol = Symbol('update');
 
-export interface GemElementOptions {
+export interface GemElementOptions extends Partial<ShadowRootInit> {
   isLight?: boolean;
   isAsync?: boolean;
-  // https://developer.mozilla.org/en-US/docs/Web/API/Element/attachShadow#options
-  delegatesFocus?: boolean;
-  slotAssignment?: 'named' | 'manual';
+  focusable?: boolean;
 }
 
 export abstract class GemElement<T = Record<string, unknown>> extends HTMLElement {
@@ -117,7 +116,7 @@ export abstract class GemElement<T = Record<string, unknown>> extends HTMLElemen
   #memoList?: EffectItem<any>[];
   #unmountCallback?: any;
 
-  constructor({ isAsync, isLight, delegatesFocus, slotAssignment }: GemElementOptions = {}) {
+  constructor(options: GemElementOptions = {}) {
     super();
 
     // 外部不可见，但允许类外面使用
@@ -130,8 +129,37 @@ export abstract class GemElement<T = Record<string, unknown>> extends HTMLElemen
       }
     });
 
-    this.#isAsync = isAsync;
-    this.#renderRoot = isLight ? this : this.attachShadow({ mode: 'open', delegatesFocus, slotAssignment });
+    this.#isAsync = options.isAsync;
+    this.#renderRoot = options.isLight
+      ? this
+      : this.attachShadow({
+          mode: options.mode || 'open',
+          delegatesFocus: options.delegatesFocus,
+          slotAssignment: options.slotAssignment,
+        });
+
+    // https://stackoverflow.com/questions/43836886/failed-to-construct-customelement-error-when-javascript-file-is-placed-in-head
+    // focusable 元素一般同时具备 disabled 属性
+    // 和原生元素行为保持一致，disabled 时不触发 click 事件
+    let hasInitTabIndex: boolean | undefined;
+    this.effect(
+      ([disabled = false]) => {
+        if (hasInitTabIndex === undefined) hasInitTabIndex = this.hasAttribute('tabindex');
+
+        this.internals.ariaDisabled = String(disabled);
+
+        if (options.focusable && !hasInitTabIndex) {
+          this.tabIndex = -Number(disabled);
+        }
+
+        if ((options.focusable || options.delegatesFocus) && disabled) {
+          return addListener(this, 'click', (e: Event) => e.isTrusted && e.stopImmediatePropagation(), {
+            capture: true,
+          });
+        }
+      },
+      () => [Reflect.get(this, 'disabled')],
+    );
 
     const { adoptedStyleSheets } = new.target;
     if (adoptedStyleSheets) {
@@ -555,9 +583,7 @@ export function defineRef(target: GemElement, prop: string, ref: string) {
             return ref;
           },
           get element() {
-            const gemReflects = ([...ele.querySelectorAll('[data-gem-reflect]')] as GemReflectElement[]).map(
-              (e) => e.target,
-            );
+            const gemReflects = [...ele.querySelectorAll<GemReflectElement>('[data-gem-reflect]')].map((e) => e.target);
             for (const e of [ele, ...gemReflects]) {
               const result = e.querySelector(`[ref=${ref}]`);
               if (result) return result;
diff --git a/packages/gem/src/lib/utils.ts b/packages/gem/src/lib/utils.ts
index 57b4cfc0..ac5418f0 100644
--- a/packages/gem/src/lib/utils.ts
+++ b/packages/gem/src/lib/utils.ts
@@ -40,6 +40,16 @@ export function absoluteLocation(currentPath = '', relativePath = '') {
 // eslint-disable-next-line @typescript-eslint/ban-types
 export type NonPrimitive = object;
 
+export function addListener<T extends EventTarget, A extends Parameters<T['addEventListener']>>(
+  target: T,
+  type: A[0],
+  listener: A[1],
+  options?: A[2],
+) {
+  target.addEventListener(type, listener, options);
+  return () => target.removeEventListener(type, listener, options);
+}
+
 interface LinkedListEventMap {
   start: Event;
   end: Event;
@@ -49,7 +59,7 @@ export interface LinkedListItem<T> {
   prev?: LinkedListItem<T>;
   next?: LinkedListItem<T>;
 }
-// work on nodejs
+
 export class LinkedList<T = any> extends EventTarget {
   declare addEventListener: <K extends keyof LinkedListEventMap>(
     type: K,