@operato/board 2.0.0-alpha.7 → 2.0.0-alpha.71

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@operato/board",
-  "version": "2.0.0-alpha.7",
+  "version": "2.0.0-alpha.71",
   "description": "Webcomponent for board following open-wc recommendations",
   "author": "heartyoh",
   "main": "dist/src/index.js",
@@ -92,50 +92,49 @@
   },
   "dependencies": {
     "@open-wc/scoped-elements": "^2.0.0-next.6",
-    "@operato/app": "^2.0.0-alpha.7",
-    "@operato/data-grist": "^2.0.0-alpha.7",
-    "@operato/font": "^2.0.0-alpha.7",
-    "@operato/graphql": "^2.0.0-alpha.0",
-    "@operato/i18n": "^2.0.0-alpha.0",
-    "@operato/input": "^2.0.0-alpha.4",
-    "@operato/layout": "^2.0.0-alpha.4",
-    "@operato/markdown": "^2.0.0-alpha.0",
-    "@operato/popup": "^2.0.0-alpha.4",
-    "@operato/property-editor": "^2.0.0-alpha.7",
-    "@operato/styles": "^2.0.0-alpha.0",
-    "@operato/utils": "^2.0.0-alpha.0",
+    "@operato/app": "^2.0.0-alpha.71",
+    "@operato/data-grist": "^2.0.0-alpha.68",
+    "@operato/font": "^2.0.0-alpha.71",
+    "@operato/graphql": "^2.0.0-alpha.57",
+    "@operato/i18n": "^2.0.0-alpha.59",
+    "@operato/input": "^2.0.0-alpha.68",
+    "@operato/layout": "^2.0.0-alpha.69",
+    "@operato/markdown": "^2.0.0-alpha.68",
+    "@operato/popup": "^2.0.0-alpha.68",
+    "@operato/property-editor": "^2.0.0-alpha.71",
+    "@operato/styles": "^2.0.0-alpha.68",
+    "@operato/utils": "^2.0.0-alpha.68",
     "@polymer/paper-dropdown-menu": "^3.2.0",
     "@types/file-saver": "^2.0.4",
     "@types/sortablejs": "^1.10.7",
     "dexie": "^3.2.2",
     "file-saver": "^2.0.5",
-    "lit": "^2.5.0",
+    "lit": "^3.1.2",
     "lodash-es": "^4.17.21",
     "sortablejs": "^1.14.0"
   },
   "devDependencies": {
-    "@custom-elements-manifest/analyzer": "^0.8.1",
+    "@custom-elements-manifest/analyzer": "^0.9.2",
     "@hatiolab/prettier-config": "^1.0.0",
     "@hatiolab/things-scene": "^3.2.0",
-    "@material/mwc-fab": "^0.27.0",
-    "@material/mwc-icon": "^0.27.0",
-    "@open-wc/eslint-config": "^10.0.0",
+    "@material/web": "^1.4.0",
+    "@open-wc/eslint-config": "^12.0.3",
     "@open-wc/testing": "^3.1.6",
     "@rollup/plugin-image": "^2.1.1",
     "@rollup/plugin-json": "^4.1.0",
     "@types/lodash-es": "^4.17.6",
     "@types/w3c-web-usb": "^1.0.5",
-    "@typescript-eslint/eslint-plugin": "^5.59.1",
-    "@typescript-eslint/parser": "^5.59.1",
+    "@typescript-eslint/eslint-plugin": "^7.0.1",
+    "@typescript-eslint/parser": "^7.0.1",
     "@web/dev-server": "^0.3.0",
-    "@web/dev-server-storybook": "^0.7.4",
-    "@web/test-runner": "^0.17.0",
+    "@web/dev-server-storybook": "^2.0.1",
+    "@web/test-runner": "^0.18.0",
     "concurrently": "^8.0.1",
     "eslint": "^8.39.0",
-    "eslint-config-prettier": "^8.3.0",
-    "husky": "^8.0.1",
-    "lint-staged": "^13.2.2",
-    "prettier": "^2.4.1",
+    "eslint-config-prettier": "^9.1.0",
+    "husky": "^9.0.11",
+    "lint-staged": "^15.2.2",
+    "prettier": "^3.2.5",
     "tslib": "^2.3.1",
     "typescript": "^5.0.4"
   },
@@ -152,5 +151,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "2507b451915b745adb249bf59eef586d7683531a"
+  "gitHead": "d3111bf8a6d3b17cc22c104e8aee5fb195683f1e"
 }

package/src/component/etc.ts

@@ -45,7 +45,7 @@ export const etc: ComponentGroup = {
       }
     },
     {
-      type: 'local reference',
+      type: 'local-ref',
       description: 'local reference',
       icon: localReference,
       group: 'etc',
@@ -65,7 +65,7 @@ export const etc: ComponentGroup = {
       }
     },
     {
-      type: 'global reference',
+      type: 'global-ref',
       description: 'global reference',
       icon: globalReference,
       group: 'etc',

package/src/modeller/component-toolbar/component-menu.ts

@@ -8,6 +8,7 @@ import { property, query, state } from 'lit/decorators.js'
 import { Scene } from '@hatiolab/things-scene'
 import { ScopedElementsMixin } from '@open-wc/scoped-elements'
 import { ScrollbarStyles } from '@operato/styles'
+import { i18next } from '@operato/i18n'
 
 import { Pallet, PalletItem } from '../../types'
 import { ComponentDetail } from './component-detail'
@@ -69,6 +70,7 @@ export class ComponentMenu extends ScopedElementsMixin(LitElement) {
         border-bottom: 1px solid rgba(0, 0, 0, 0.1);
         font-size: 11px;
         color: var(--component-menu-item-color);
+        text-transform: capitalize;
       }
 
       [template]:hover,
@@ -119,13 +121,15 @@ export class ComponentMenu extends ScopedElementsMixin(LitElement) {
           <h2 onclick=${(e: MouseEvent) => e.stopPropagation()}>${this.group} list</h2>
 
           <div templates @mouseover=${(e: MouseEvent) => this.onHoverComponent(e)}>
-            ${(this.templates || []).map(
-              template => html`
-                <div @click=${this.onClickTemplate} data-type=${template.type} template>
-                  <img src=${this.templateIcon(template)} />${template.type}
+            ${(this.templates || []).map(template => {
+              const { type } = template
+
+              return html`
+                <div @click=${this.onClickTemplate} data-type=${type} template>
+                  <img src=${String(this.templateIcon(template))} />${i18next.t(`component.${type}`)}
                 </div>
               `
-            )}
+            })}
           </div>
 
           <component-detail

package/src/modeller/property-sidebar/data-binding/data-binding.ts

@@ -2,7 +2,7 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 import '@operato/help/ox-title-with-help.js'
 import '@operato/input/ox-buttons-radio.js'
 import '@operato/input/ox-input-data.js'
@@ -55,7 +55,7 @@ export class PropertyDataBinding extends ScopedElementsMixin(AbstractProperty) {
         justify-content: space-between;
       }
 
-      #tab-header > mwc-icon {
+      #tab-header > md-icon {
         padding: 0;
         margin: 0;
         width: 25px;
@@ -69,7 +69,7 @@ export class PropertyDataBinding extends ScopedElementsMixin(AbstractProperty) {
         width: 100%;
       }
 
-      fieldset[collapsable] legend mwc-icon {
+      fieldset[collapsable] legend md-icon {
         float: right;
         font-size: medium;
         margin: 0;
@@ -130,20 +130,20 @@ export class PropertyDataBinding extends ScopedElementsMixin(AbstractProperty) {
         padding: 7px 5px 2px 5px;
       }
 
-      mwc-icon {
+      md-icon {
         margin-left: 5px;
         color: var(--secondary-color);
         opacity: 0.8;
         cursor: pointer;
-        --mdc-icon-size: 18px;
+        --md-icon-size: 18px;
       }
 
-      mwc-icon:hover {
+      md-icon:hover {
         color: var(--primary-color);
         opacity: 1;
       }
 
-      mwc-icon[disabled] {
+      md-icon[disabled] {
         color: rgba(0, 0, 0, 0.1);
       }
 
@@ -159,7 +159,7 @@ export class PropertyDataBinding extends ScopedElementsMixin(AbstractProperty) {
           font-size: 15px;
           font-weight: 300;
           -webkit-appearance: none;
-        }
+        };
       }
     `
   ]
@@ -252,11 +252,11 @@ export class PropertyDataBinding extends ScopedElementsMixin(AbstractProperty) {
           <ox-title-with-help topic="board-modeller/initial-data" msgid="label.initial-data"
             >initial value</ox-title-with-help
           >
-          <mwc-icon
+          <md-icon
             @click=${() => {
               this._dataExpanded = !this._dataExpanded
             }}
-            >${this._dataExpanded ? 'expand_less' : 'expand_more'}</mwc-icon
+            >${this._dataExpanded ? 'expand_less' : 'expand_more'}</md-icon
           >
         </legend>
         <ox-input-data value-key="data" .value=${value.data}> </ox-input-data>
@@ -270,13 +270,13 @@ export class PropertyDataBinding extends ScopedElementsMixin(AbstractProperty) {
         </legend>
 
         <div id="tab-header">
-          <mwc-icon
+          <md-icon
             id="tab-nav-left-button"
             @click=${() => {
               this._onTabScrollNavLeft()
             }}
             disabled
-            >chevron_left</mwc-icon
+            >chevron_left</md-icon
           >
 
           <ox-buttons-radio
@@ -291,23 +291,23 @@ export class PropertyDataBinding extends ScopedElementsMixin(AbstractProperty) {
             <div data-value=${this.mappings.length} data-mapping disabled>${this.mappings.length + 1}</div>
           </ox-buttons-radio>
 
-          <mwc-icon
+          <md-icon
             id="tab-nav-right-button"
             @click=${(e: Event) => {
               this._onTabScrollNavRight()
             }}
             disabled
-            >chevron_right</mwc-icon
+            >chevron_right</md-icon
           >
         </div>
 
         <div binding>
-          <mwc-icon style="font-size:19px" @click=${() => this._clearDataBindingMapper()} title="delete current tab"
-            >delete_forever</mwc-icon
+          <md-icon style="font-size:19px" @click=${() => this._clearDataBindingMapper()} title="delete current tab"
+            >delete_forever</md-icon
           >
-          <mwc-icon @click=${() => this._pasteDataBindingMapper()} title="replace current tab">content_paste</mwc-icon>
-          <mwc-icon style="font-size:17px" @click=${() => this._copyDataBindingMapper()} title="copy current tab"
-            >content_copy</mwc-icon
+          <md-icon @click=${() => this._pasteDataBindingMapper()} title="replace current tab">content_paste</md-icon>
+          <md-icon style="font-size:17px" @click=${() => this._copyDataBindingMapper()} title="copy current tab"
+            >content_copy</md-icon
           >
         </div>
 

package/src/modeller/property-sidebar/effects/property-animations.ts

@@ -2,7 +2,7 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 import '@operato/help/ox-title-with-help.js'
 
 import { css, html, LitElement } from 'lit'
@@ -24,7 +24,7 @@ export class PropertyAnimations extends ScopedElementsMixin(LitElement) {
         width: 100%;
       }
 
-      fieldset[collapsable] legend mwc-icon {
+      fieldset[collapsable] legend md-icon {
         float: right;
         font-size: medium;
         margin: 0;
@@ -61,11 +61,11 @@ export class PropertyAnimations extends ScopedElementsMixin(LitElement) {
           <ox-title-with-help topic="board-modeller/effects/animation" msgid="label.animation"
             >animation</ox-title-with-help
           >
-          <mwc-icon
+          <md-icon
             @click=${() => {
               this._expanded = !this._expanded
             }}
-            >${this._expanded ? 'expand_less' : 'expand_more'}</mwc-icon
+            >${this._expanded ? 'expand_less' : 'expand_more'}</md-icon
           >
         </legend>
 

package/src/modeller/property-sidebar/inspector/inspector.ts

@@ -391,7 +391,7 @@ export class SceneInspector extends LitElement {
         <span>
           ${depth > 0
             ? html`
-                <mwc-icon class="eye">${component.get('hidden') ? 'visibility_off' : 'visibility'}</mwc-icon>
+                <md-icon class="eye">${component.get('hidden') ? 'visibility_off' : 'visibility'}</md-icon>
                 <pre>${' '.repeat(depth)}</pre>
               `
             : html` <pre>${' '.repeat(depth + 2)}</pre> `}

package/src/modeller/property-sidebar/property-sidebar.ts

@@ -2,7 +2,7 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 
 import { css, html, LitElement, PropertyValues } from 'lit'
 import { property } from 'lit/decorators.js'
@@ -41,7 +41,7 @@ export class PropertySidebar extends ScopedElementsMixin(LitElement) {
         opacity: 0.85;
       }
 
-      [tab] mwc-icon {
+      [tab] md-icon {
         flex: 1;
 
         display: flex;
@@ -116,12 +116,12 @@ export class PropertySidebar extends ScopedElementsMixin(LitElement) {
           this.tabName = (e.target as HTMLElement).getAttribute('name')
         }}
       >
-        <mwc-icon name="shape" ?selected=${tabName == 'shape'}>format_shapes</mwc-icon>
-        <mwc-icon name="style" ?selected=${tabName == 'style'}>palette</mwc-icon>
-        <mwc-icon name="effect" ?selected=${tabName == 'effect'}>movie_filter</mwc-icon>
-        <mwc-icon name="specific" ?selected=${tabName == 'specific'}>tune</mwc-icon>
-        <mwc-icon name="data-binding" ?selected=${tabName == 'data-binding'}>share</mwc-icon>
-        <mwc-icon name="inspector" ?selected=${tabName == 'inspector'}>visibility</mwc-icon>
+        <md-icon name="shape" ?selected=${tabName == 'shape'}>format_shapes</md-icon>
+        <md-icon name="style" ?selected=${tabName == 'style'}>palette</md-icon>
+        <md-icon name="effect" ?selected=${tabName == 'effect'}>movie_filter</md-icon>
+        <md-icon name="specific" ?selected=${tabName == 'specific'}>tune</md-icon>
+        <md-icon name="data-binding" ?selected=${tabName == 'data-binding'}>share</md-icon>
+        <md-icon name="inspector" ?selected=${tabName == 'inspector'}>visibility</md-icon>
       </div>
 
       <div content>

package/src/modeller/property-sidebar/shapes/shapes.ts

@@ -4,7 +4,7 @@
 
 import '@operato/input/ox-input-angle.js'
 import '@operato/input/ox-buttons-radio.js'
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 import '@operato/i18n/ox-i18n.js'
 import '@operato/help/ox-title-with-help.js'
 
@@ -28,7 +28,7 @@ export class PropertyShapes extends AbstractProperty {
         width: 100%;
       }
 
-      fieldset[collapsable] legend mwc-icon {
+      fieldset[collapsable] legend md-icon {
         float: right;
         font-size: medium;
         margin: 0;
@@ -223,11 +223,11 @@ export class PropertyShapes extends AbstractProperty {
             <fieldset class="icon-label unit ratio" collapsable ?collapsed=${!this._3dExpanded}>
               <legend>
                 <ox-title-with-help topic="board-modeller/shapes/3dish" msgid="label.3dish">3D</ox-title-with-help>
-                <mwc-icon
+                <md-icon
                   @click=${(e: Event) => {
                     this._3dExpanded = !this._3dExpanded
                   }}
-                  >${this._3dExpanded ? 'expand_less' : 'expand_more'}</mwc-icon
+                  >${this._3dExpanded ? 'expand_less' : 'expand_more'}</md-icon
                 >
               </legend>
 
@@ -279,6 +279,17 @@ export class PropertyShapes extends AbstractProperty {
                   <label for="checkbox-textwrap"> <ox-i18n msgid="label.text-wrap">Text Wrap</ox-i18n> </label>
                 </div>
 
+                ${!value.textWrap
+                  ? html` <label for="checkbox-textOverflow">
+                        <ox-i18n msgid="label.text-overflow">Text Overflow</ox-i18n>
+                      </label>
+                      <select value-key="textOverflow" .value=${value.textOverflow || ''}>
+                        <option value="" selected>none</option>
+                        <option value="ellipsis">ellipsis</option>
+                        <option value="clip">clip</option>
+                      </select>`
+                  : ''}
+
                 <label> <ox-i18n msgid="label.padding">padding</ox-i18n> </label>
                 <table class="box-padding">
                   <tr>

package/src/modeller/property-sidebar/specifics/specifics.ts

@@ -10,6 +10,8 @@ import { property } from 'lit/decorators.js'
 import { Component, Scene } from '@hatiolab/things-scene'
 import { ScopedElementsMixin } from '@open-wc/scoped-elements'
 
+import { i18next } from '@operato/i18n'
+
 import { PropertySharedStyle } from '../property-shared-style'
 import { SpecificPropertiesBuilder } from './specific-properties-builder.js'
 
@@ -58,7 +60,9 @@ export class PropertySpecific extends ScopedElementsMixin(LitElement) {
     const value = this.value || {}
 
     return html`
-      <label>${value.type}<ox-help-icon .topic=${selected?.nature?.help}></ox-help-icon></label>
+      <label
+        >${i18next.t(`component.${value.type}`)}<ox-help-icon .topic=${selected?.nature?.help}></ox-help-icon
+      ></label>
 
       <specific-properties-builder .value=${value} .props=${this.props} .propertyEditor=${this.propertyEditor}>
       </specific-properties-builder>

package/src/ox-board-component-info.ts

@@ -1,5 +1,4 @@
-import '@material/mwc-icon'
-import '@material/mwc-button'
+import '@material/web/icon/icon.js'
 import '@operato/property-editor/ox-properties-dynamic-view.js'
 import '@operato/markdown'
 
@@ -23,7 +22,7 @@ export class BoardComponentInfo extends LitElement {
         border: 2px solid var(--primary-color);
         border-radius: 3px;
 
-        --mdc-icon-size: 12px;
+        --md-icon-size: 12px;
       }
 
       [header] {
@@ -36,7 +35,7 @@ export class BoardComponentInfo extends LitElement {
         display: flex;
       }
 
-      [header] mwc-icon {
+      [header] md-icon {
         margin-left: auto;
         align-self: center;
       }
@@ -101,8 +100,8 @@ export class BoardComponentInfo extends LitElement {
 
     return html`
       <div header @mousedown=${this.onDragStart.bind(this)} draggable="false">
-        Component Inspection<mwc-icon @click=${(e: MouseEvent) => this.dispatchEvent(new CustomEvent('close'))}
-          >close</mwc-icon
+        Component Inspection<md-icon @click=${(e: MouseEvent) => this.dispatchEvent(new CustomEvent('close'))}
+          >close</md-icon
         >
       </div>
       <div content @wheel=${(e: WheelEvent) => this.onWheel(e)}>

package/src/ox-board-list.ts

@@ -44,7 +44,7 @@ class BoardList extends LitElement {
 
     #filters {
       flex: 1;
-      --mdc-icon-size: 20px;
+      --md-icon-size: 20px;
     }
     #mode {
       width: 100px;
@@ -62,14 +62,14 @@ class BoardList extends LitElement {
       cursor: pointer;
     }
 
-    #modes > mwc-icon[active] {
+    #modes > md-icon[active] {
       border-radius: 9px;
       background-color: rgba(var(--primary-color-rgb), 0.05);
       opacity: 1;
       color: var(--secondary-text-color);
       cursor: default;
     }
-    #modes > mwc-icon:hover {
+    #modes > md-icon:hover {
       opacity: 1;
       color: var(--secondary-text-color);
     }
@@ -87,7 +87,7 @@ class BoardList extends LitElement {
       background-color: var(--focus-background-color);
       box-shadow: var(--box-shadow);
     }
-    #add button mwc-icon {
+    #add button md-icon {
       font-size: 2em;
       color: var(--theme-white-color);
     }
@@ -105,7 +105,7 @@ class BoardList extends LitElement {
     #filters [type='text']:focus {
       outline: none;
     }
-    #filters mwc-icon {
+    #filters md-icon {
       position: absolute;
       top: 3px;
       color: var(--secondary-color);
@@ -152,7 +152,7 @@ class BoardList extends LitElement {
       <ox-grist .config=${this.config} .mode=${mode} auto-fetch .fetchHandler=${this.fetchHandler.bind(this)}>
         <div slot="headroom" id="headroom">
           <div id="filters">
-            <mwc-icon>search</mwc-icon>
+            <md-icon>search</md-icon>
             <input type="text" />
 
             <select
@@ -163,22 +163,23 @@ class BoardList extends LitElement {
             >
               <option value="">*</option>
               ${this.groups.map(
-                group =>
-                  html` <option value=${group.id} ?selected=${group.id === this.groupId}>${group.description}</option> `
+                group => html`
+                  <option value=${group.id} ?selected=${group.id === this.groupId}>${group.description}</option>
+                `
               )}
             </select>
           </div>
 
           <div id="modes">
-            <mwc-icon @click=${() => (this.mode = 'GRID')} ?active=${mode == 'GRID'}>grid_on</mwc-icon>
-            <mwc-icon @click=${() => (this.mode = 'LIST')} ?active=${mode == 'LIST'}>format_list_bulleted</mwc-icon>
-            <mwc-icon @click=${() => (this.mode = 'CARD')} ?active=${mode == 'CARD'}>apps</mwc-icon>
+            <md-icon @click=${() => (this.mode = 'GRID')} ?active=${mode == 'GRID'}>grid_on</md-icon>
+            <md-icon @click=${() => (this.mode = 'LIST')} ?active=${mode == 'LIST'}>format_list_bulleted</md-icon>
+            <md-icon @click=${() => (this.mode = 'CARD')} ?active=${mode == 'CARD'}>apps</md-icon>
           </div>
 
           ${this.creatable
             ? html`
                 <div id="add">
-                  <button><mwc-icon @click=${() => this.onCreateBoard()}>add</mwc-icon></button>
+                  <button><md-icon @click=${() => this.onCreateBoard()}>add</md-icon></button>
                 </div>
               `
             : undefined}
@@ -422,11 +423,7 @@ class BoardList extends LitElement {
               thumbnail
             }
 
-            const { createBoard: created } = await createBoard(board)
-
-            // this.popup && this.popup.close()
-
-            // await sleep(100)
+            await createBoard(board)
 
             this.notify('info', 'new board created')
           } catch (ex: Error | any) {

package/src/ox-board-modeller.ts

@@ -1,4 +1,5 @@
-import '@material/mwc-fab'
+import '@material/web/icon/icon.js'
+import '@material/web/fab/fab.js'
 import '@hatiolab/things-scene'
 import './modeller/scene-viewer/ox-scene-handler.js'
 import './modeller/scene-viewer/ox-scene-layer.js'
@@ -85,7 +86,7 @@ export class BoardModeller extends ScopedElementsMixin(LitElement) {
         height: 100%;
       }
 
-      mwc-fab {
+      md-fab {
         position: absolute;
         right: 15px;
         bottom: 15px;
@@ -278,7 +279,9 @@ export class BoardModeller extends ScopedElementsMixin(LitElement) {
             <ox-scene-handler type="paste-handler"></ox-scene-handler>
           </ox-scene-viewer>
 
-          <mwc-fab icon="save" @click=${() => this.onTapSave()} title="save"> </mwc-fab>
+          <md-fab @click=${() => this.onTapSave()} title="save">
+            <md-icon slot="icon">save</md-icon>
+          </md-fab>
         </div>
 
         <property-sidebar

package/src/ox-board-player-style.ts

@@ -73,7 +73,7 @@ export const style = css`
     grid-row: 1 / span 3;
   }
 
-  #joystick mwc-icon {
+  #joystick md-icon {
     position: absolute;
     display: block;
     width: 20px;
@@ -82,17 +82,17 @@ export const style = css`
     line-height: 0.7;
   }
 
-  mwc-icon#up {
+  md-icon#up {
     left: 29px;
   }
 
-  mwc-icon#left {
+  md-icon#left {
     top: 32px;
     left: -2px;
   }
 
-  mwc-icon#play,
-  mwc-icon#pause {
+  md-icon#play,
+  md-icon#pause {
     left: 20px;
     top: 20px;
     width: 40px;
@@ -104,17 +104,17 @@ export const style = css`
     line-height: 0.9;
   }
 
-  mwc-icon#right {
+  md-icon#right {
     top: 31px;
     left: 60px;
   }
 
-  mwc-icon#down {
+  md-icon#down {
     left: 29px;
     top: 63px;
   }
 
-  mwc-icon#pause {
+  md-icon#pause {
     text-indent: -2px;
   }
 
@@ -139,7 +139,7 @@ export const style = css`
     grid-gap: 0 10px;
   }
 
-  #setting mwc-icon {
+  #setting md-icon {
     font-size: 22px;
     color: rgba(255, 174, 53, 0.8);
   }
@@ -183,7 +183,7 @@ export const style = css`
     justify-items: center;
   }
 
-  #etc mwc-icon {
+  #etc md-icon {
     font-size: 30px;
   }