[gem] Remove @focusable

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

@@ -1,14 +1,5 @@
 import { GemElement, html, createCSSSheet } from '@mantou/gem/lib/element';
-import {
-  adoptedStyle,
-  customElement,
-  attribute,
-  state,
-  slot,
-  focusable,
-  aria,
-  shadow,
-} from '@mantou/gem/lib/decorators';
+import { adoptedStyle, customElement, attribute, state, slot, aria, shadow } from '@mantou/gem/lib/decorators';
 import { css } from '@mantou/gem/lib/utils';
 
 import { theme, getSemanticColor } from '../lib/theme';
@@ -43,9 +34,8 @@ const style = createCSSSheet(css`
 @customElement('dy-action-text')
 @adoptedStyle(style)
 @adoptedStyle(focusStyle)
-@focusable()
-@aria({ role: 'button' })
 @shadow()
+@aria({ focusable: true, role: 'button' })
 export class DuoyunActionTextElement extends GemElement {
   @slot static unnamed: string;
 

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

@@ -8,7 +8,6 @@ import {
   boolattribute,
   state,
   emitter,
-  focusable,
   aria,
   shadow,
 } from '@mantou/gem/lib/decorators';
@@ -64,9 +63,8 @@ const style = createCSSSheet(css`
 @adoptedStyle(style)
 @adoptedStyle(pickerStyle)
 @adoptedStyle(focusStyle)
-@focusable()
-@aria({ role: 'combobox' })
 @shadow()
+@aria({ focusable: true, role: 'combobox' })
 export class DuoyunCascaderPickerElement extends GemElement implements BasePickerElement {
   @attribute placeholder: string;
   @boolattribute fit: boolean;

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

@@ -9,7 +9,6 @@ import {
   property,
   boolattribute,
   state,
-  focusable,
   aria,
   shadow,
 } from '@mantou/gem/lib/decorators';
@@ -72,9 +71,8 @@ const style = createCSSSheet(css`
 @adoptedStyle(style)
 @adoptedStyle(focusStyle)
 @connectStore(icons)
-@focusable()
-@aria({ role: 'combobox' })
 @shadow()
+@aria({ focusable: true, role: 'combobox' })
 export class DuoyunDatePickerElement extends GemElement implements BasePickerElement {
   @attribute placeholder: string;
   @boolattribute time: boolean;

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

@@ -8,7 +8,6 @@ import {
   property,
   boolattribute,
   state,
-  focusable,
   aria,
   shadow,
 } from '@mantou/gem/lib/decorators';
@@ -69,9 +68,8 @@ const style = createCSSSheet(css`
 @adoptedStyle(style)
 @adoptedStyle(pickerStyle)
 @adoptedStyle(focusStyle)
-@focusable()
-@aria({ role: 'combobox' })
 @shadow()
+@aria({ focusable: true, role: 'combobox' })
 export class DuoyunDateRangePickerElement extends GemElement implements BasePickerElement {
   @attribute placeholder: string;
   @boolattribute clearable: boolean;

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

@@ -1,13 +1,4 @@
-import {
-  adoptedStyle,
-  customElement,
-  property,
-  boolattribute,
-  slot,
-  focusable,
-  aria,
-  shadow,
-} from '@mantou/gem/lib/decorators';
+import { adoptedStyle, customElement, property, boolattribute, slot, aria, shadow } from '@mantou/gem/lib/decorators';
 import { GemElement, html, TemplateResult, createCSSSheet } from '@mantou/gem/lib/element';
 import { css, classMap } from '@mantou/gem/lib/utils';
 
@@ -161,9 +152,8 @@ type State = {
 @customElement('dy-options')
 @adoptedStyle(style)
 @adoptedStyle(focusStyle)
-@focusable()
-@aria({ role: 'listbox' })
 @shadow()
+@aria({ focusable: true, role: 'listbox' })
 export class DuoyunOptionsElement extends GemElement<State> {
   @slot static unnamed: string;
 

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

@@ -8,7 +8,6 @@ import {
   property,
   boolattribute,
   state,
-  focusable,
   aria,
   shadow,
 } from '@mantou/gem/lib/decorators';
@@ -115,9 +114,8 @@ export interface Option<T = any> {
 @adoptedStyle(pickerStyle)
 @adoptedStyle(focusStyle)
 @connectStore(icons)
-@focusable()
-@aria({ role: 'combobox' })
 @shadow()
+@aria({ focusable: true, role: 'combobox' })
 export class DuoyunPickerElement extends GemElement implements BasePickerElement {
   @attribute placeholder: string;
   @boolattribute disabled: boolean;

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

@@ -11,8 +11,8 @@ import {
   RefObject,
   state,
   part,
-  focusable,
   shadow,
+  aria,
 } from '@mantou/gem/lib/decorators';
 import { createCSSSheet, GemElement, html, TemplateResult } from '@mantou/gem/lib/element';
 import { addListener, css, styleMap, StyleObject } from '@mantou/gem/lib/utils';
@@ -137,8 +137,8 @@ type State = {
 @adoptedStyle(pickerStyle)
 @adoptedStyle(focusStyle)
 @connectStore(icons)
-@focusable()
 @shadow()
+@aria({ focusable: true })
 export class DuoyunSelectElement extends GemElement<State> implements BasePickerElement {
   @boolattribute multiple: boolean;
   @boolattribute disabled: boolean;

packages/duoyun-ui/src/elements/shortcut-record.ts

@@ -8,7 +8,6 @@ import {
   boolattribute,
   part,
   emitter,
-  focusable,
   aria,
   shadow,
 } from '@mantou/gem/lib/decorators';
@@ -102,9 +101,8 @@ const style = createCSSSheet(css`
 @customElement('dy-shortcut-record')
 @adoptedStyle(style)
 @adoptedStyle(focusStyle)
-@focusable()
-@aria({ role: 'input' })
 @shadow()
+@aria({ focusable: true, role: 'input' })
 export class DuoyunShortcutRecordElement extends GemElement {
   @part static kbd: string;
 

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

@@ -10,7 +10,6 @@ import {
   numattribute,
   refobject,
   RefObject,
-  focusable,
   aria,
   shadow,
 } from '@mantou/gem/lib/decorators';
@@ -98,9 +97,8 @@ const style = createCSSSheet(css`
 @customElement('dy-slider')
 @adoptedStyle(style)
 @adoptedStyle(focusStyle)
-@focusable()
-@aria({ role: 'slider' })
 @shadow()
+@aria({ focusable: true, role: 'slider' })
 export class DuoyunSliderElement extends GemElement {
   @attribute label: string;
   @attribute orientation: 'horizontal' | 'vertical';

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

@@ -8,7 +8,6 @@ import {
   property,
   boolattribute,
   state,
-  focusable,
   aria,
   shadow,
 } from '@mantou/gem/lib/decorators';
@@ -62,9 +61,8 @@ const style = createCSSSheet(css`
 @adoptedStyle(style)
 @adoptedStyle(pickerStyle)
 @adoptedStyle(focusStyle)
-@focusable()
-@aria({ role: 'combobox' })
 @shadow()
+@aria({ focusable: true, role: 'combobox' })
 export class DuoyunTimePickerElement extends GemElement implements BasePickerElement {
   @attribute placeholder: string;
   @boolattribute clearable: boolean;

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

@@ -11,7 +11,6 @@ import {
   numattribute,
   shadow,
   aria,
-  focusable,
 } from '@mantou/gem/lib/decorators';
 import { createCSSSheet, GemElement, html, TemplateResult } from '@mantou/gem/lib/element';
 import { css, styleMap } from '@mantou/gem/lib/utils';
@@ -103,9 +102,8 @@ const itemStyle = createCSSSheet(css`
  */
 @customElement('dy-tree-item')
 @adoptedStyle(itemStyle)
-@focusable()
-@aria({ role: 'treeitem' })
 @shadow()
+@aria({ focusable: true, role: 'treeitem' })
 class _DuoyunTreeItemElement extends GemElement {
   @boolattribute expanded: boolean;
   @boolattribute highlight: boolean;

packages/gem-book/docs/hello.ts

@@ -14,7 +14,7 @@ customElements.whenDefined('gem-book').then(() => {
           my-plugin-hello {
             display: block;
             border-radius: ${theme.normalRound};
-            background: rgba(${theme.textColorRGB}, 0.05);
+            background: rgb(from ${theme.textColor} r g b / 0.05);
             padding: 1rem;
           }
         </style>