@operato/input 2.0.0-alpha.57 → 2.0.0-alpha.62

package/src/ox-input-partition-keys.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, nothing } from 'lit'
 import { customElement, property, queryAll } from 'lit/decorators.js'
@@ -50,9 +50,7 @@ export class OxInputPartitionKeys extends OxFormField {
     button + button {
       margin-left: -5px;
     }
-    button mwc-icon {
-      font-size: var(--fontsize-default);
-    }
+
     button:focus,
     button:hover,
     button:active {
@@ -109,7 +107,7 @@ export class OxInputPartitionKeys extends OxFormField {
               tabindex="-1"
               ?disabled=${this.disabled}
             >
-              <mwc-icon>remove</mwc-icon>
+              <md-icon>remove</md-icon>
             </button>
             <button
               class="record-action"
@@ -117,7 +115,7 @@ export class OxInputPartitionKeys extends OxFormField {
               tabindex="-1"
               ?disabled=${this.disabled}
             >
-              <mwc-icon>arrow_upward</mwc-icon>
+              <md-icon>arrow_upward</md-icon>
             </button>
             <button
               class="record-action"
@@ -125,7 +123,7 @@ export class OxInputPartitionKeys extends OxFormField {
               tabindex="-1"
               ?disabled=${this.disabled}
             >
-              <mwc-icon>arrow_downward</mwc-icon>
+              <md-icon>arrow_downward</md-icon>
             </button>
           </div>
         `
@@ -137,10 +135,10 @@ export class OxInputPartitionKeys extends OxFormField {
               <input type="text" data-key placeholder="key" value="" />
               <input type="text" data-value placeholder="value" value="" list="value-template" />
               <button class="record-action" @click=${(e: MouseEvent) => this._add()} tabindex="-1">
-                <mwc-icon>add</mwc-icon>
+                <md-icon>add</md-icon>
               </button>
-              <button class="hidden"><mwc-icon>add</mwc-icon></button>
-              <button class="hidden"><mwc-icon>add</mwc-icon></button>
+              <button class="hidden"><md-icon>add</md-icon></button>
+              <button class="hidden"><md-icon>add</md-icon></button>
             </div>
           `}
 
@@ -261,13 +259,16 @@ export class OxInputPartitionKeys extends OxFormField {
     const deleted = array.splice(index, 1)
     array.splice(index + 1, 0, ...deleted)
 
-    this.value = array.reduce((sum, record) => {
-      const key = (record.querySelector('[data-key]') as HTMLInputElement).value
-      const value = (record.querySelector('[data-value]') as HTMLInputElement).value
+    this.value = array.reduce(
+      (sum, record) => {
+        const key = (record.querySelector('[data-key]') as HTMLInputElement).value
+        const value = (record.querySelector('[data-value]') as HTMLInputElement).value
 
-      sum[key] = value
-      return sum
-    }, {} as { [key: string]: string })
+        sum[key] = value
+        return sum
+      },
+      {} as { [key: string]: string }
+    )
 
     this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))
   }
@@ -284,13 +285,16 @@ export class OxInputPartitionKeys extends OxFormField {
     array.splice(index, 1)
     array.splice(index + 1, 0, record)
 
-    this.value = array.reduce((sum, record) => {
-      const key = (record.querySelector('[data-key]') as HTMLInputElement).value
-      const value = (record.querySelector('[data-value]') as HTMLInputElement).value
+    this.value = array.reduce(
+      (sum, record) => {
+        const key = (record.querySelector('[data-key]') as HTMLInputElement).value
+        const value = (record.querySelector('[data-value]') as HTMLInputElement).value
 
-      sum[key] = value
-      return sum
-    }, {} as { [key: string]: string })
+        sum[key] = value
+        return sum
+      },
+      {} as { [key: string]: string }
+    )
 
     this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))
   }

package/src/ox-input-privilege.ts

@@ -2,8 +2,6 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
-import '@material/mwc-button'
-
 import { css, html } from 'lit'
 import { customElement, property, query } from 'lit/decorators.js'
 import { ifDefined } from 'lit/directives/if-defined.js'

package/src/ox-input-search.ts

@@ -2,7 +2,7 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 
 import debounce from 'lodash-es/debounce'
 import { css, html } from 'lit'
@@ -19,7 +19,7 @@ export class OxInputSearch extends OxFormField {
         position: relative;
         align-items: center;
 
-        --mdc-icon-size: 20px;
+        --md-icon-size: 20px;
       }
 
       [type='text'] {
@@ -38,7 +38,7 @@ export class OxInputSearch extends OxFormField {
         border-bottom: var(--input-search-focus-border-bottom, 1px solid var(--primary-color));
       }
 
-      mwc-icon {
+      md-icon {
         position: absolute;
         color: var(--secondary-color);
       }
@@ -54,7 +54,7 @@ export class OxInputSearch extends OxFormField {
 
   render() {
     return html`
-      <mwc-icon @click=${(e: Event) => !this.disabled && this._onClickSearch(e)}>search</mwc-icon>
+      <md-icon @click=${(e: Event) => !this.disabled && this._onClickSearch(e)}>search</md-icon>
       <input
         type="text"
         .value=${this.value || ''}

package/src/ox-input-table.ts

@@ -2,7 +2,7 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 import '@polymer/paper-dropdown-menu/paper-dropdown-menu'
 import '@polymer/paper-item/paper-item'
 import '@operato/i18n/ox-i18n.js'
@@ -74,7 +74,7 @@ class OxInputTable extends OxFormField {
           line-height: 1.5;
         }
 
-        #border-set > mwc-icon {
+        #border-set > md-icon {
           grid-column: span 2;
           margin: 0 0 0 8px;
           width: 32px;
@@ -216,16 +216,16 @@ class OxInputTable extends OxFormField {
           border-style-btn"
           @click=${(e: Event) => this._onClickType(e)}
         >
-          <mwc-icon data-value="out">border_outer</mwc-icon>
-          <mwc-icon data-value="in">border_inner</mwc-icon>
-          <mwc-icon data-value="all">border_all</mwc-icon>
-          <mwc-icon data-value="left">border_left</mwc-icon>
-          <mwc-icon data-value="center">border_vertical</mwc-icon>
-          <mwc-icon data-value="right">border_right</mwc-icon>
-          <mwc-icon data-value="top">border_top</mwc-icon>
-          <mwc-icon data-value="middle">border_horizontal</mwc-icon>
-          <mwc-icon data-value="bottom">border_bottom</mwc-icon>
-          <mwc-icon data-value="clear">border_clear</mwc-icon>
+          <md-icon data-value="out">border_outer</md-icon>
+          <md-icon data-value="in">border_inner</md-icon>
+          <md-icon data-value="all">border_all</md-icon>
+          <md-icon data-value="left">border_left</md-icon>
+          <md-icon data-value="center">border_vertical</md-icon>
+          <md-icon data-value="right">border_right</md-icon>
+          <md-icon data-value="top">border_top</md-icon>
+          <md-icon data-value="middle">border_horizontal</md-icon>
+          <md-icon data-value="bottom">border_bottom</md-icon>
+          <md-icon data-value="clear">border_clear</md-icon>
         </div>
 
         <div class="property-grid">

package/src/ox-input-unit-number.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, PropertyValues } from 'lit'
 import { customElement, property, query } from 'lit/decorators.js'
@@ -217,7 +217,7 @@ export class OxInputUnitNumber extends OxFormField {
         min-width: 24px;
       }
 
-      mwc-icon {
+      md-icon {
         font-size: 18px;
         color: var(--primary-color, #3c3938);
         margin-left: auto;
@@ -272,7 +272,7 @@ export class OxInputUnitNumber extends OxFormField {
           <div option value=${this.stdUnit}>${this.stdUnit}</div>
           ${units.map(unit => html`<div option value=${unit}>${unit}</div>`)}
         </ox-popup-list>
-        <mwc-icon>expand_more</mwc-icon>
+        <md-icon>expand_more</md-icon>
       </div>
     `
   }

package/src/ox-input-value-map.ts

@@ -63,9 +63,7 @@ export class OxInputValueMap extends OxFormField {
     button + button {
       margin-left: -5px;
     }
-    button mwc-icon {
-      font-size: var(--fontsize-default);
-    }
+
     button:focus,
     button:hover,
     button:active {
@@ -144,17 +142,17 @@ export class OxInputValueMap extends OxFormField {
           />
         `
       : this.valuetype == 'color'
-      ? html` <ox-input-color data-value value=${ifDefined(value)} ?disabled=${this.disabled}> </ox-input-color> `
-      : html`
-          <input
-            type="text"
-            data-value
-            placeholder="value"
-            value=${ifDefined(value)}
-            data-value-type=${this.valuetype}
-            ?disabled=${this.disabled}
-          />
-        `
+        ? html` <ox-input-color data-value value=${ifDefined(value)} ?disabled=${this.disabled}> </ox-input-color> `
+        : html`
+            <input
+              type="text"
+              data-value
+              placeholder="value"
+              value=${ifDefined(value)}
+              data-value-type=${this.valuetype}
+              ?disabled=${this.disabled}
+            />
+          `
   }
 
   render() {
@@ -170,7 +168,7 @@ export class OxInputValueMap extends OxFormField {
               tabindex="-1"
               ?disabled=${this.disabled}
             >
-              <mwc-icon>remove</mwc-icon>
+              <md-icon>remove</md-icon>
             </button>
           </div>
         `
@@ -185,7 +183,7 @@ export class OxInputValueMap extends OxFormField {
 
                 ${this.valueInputTemplate()}
                 <button class="record-action" @click=${(e: MouseEvent) => this._add()} tabindex="-1">
-                  <mwc-icon>add</mwc-icon>
+                  <md-icon>add</md-icon>
                 </button>
               </div>
             `
@@ -196,7 +194,7 @@ export class OxInputValueMap extends OxFormField {
 
         ${this.valueInputTemplate((this.value && this.value.default) || this._defaultValue())}
         <button class="record-action" @click=${() => this._sort()} tabindex="-1">
-          <mwc-icon>chevron_right</mwc-icon>
+          <md-icon>chevron_right</md-icon>
         </button>
       </div>
     `

package/src/ox-input-value-ranges.ts

@@ -63,9 +63,7 @@ export class OxInputValueRange extends OxFormField {
     button + button {
       margin-left: -5px;
     }
-    button mwc-icon {
-      font-size: var(--fontsize-default);
-    }
+
     button:focus,
     button:hover,
     button:active {
@@ -153,17 +151,17 @@ export class OxInputValueRange extends OxFormField {
           />
         `
       : this.valuetype == 'color'
-      ? html` <ox-input-color data-value value=${ifDefined(value)} ?disabled=${this.disabled}> </ox-input-color> `
-      : html`
-          <input
-            type="text"
-            data-value
-            placeholder="value"
-            value=${ifDefined(value)}
-            data-value-type=${this.valuetype}
-            ?disabled=${this.disabled}
-          />
-        `
+        ? html` <ox-input-color data-value value=${ifDefined(value)} ?disabled=${this.disabled}> </ox-input-color> `
+        : html`
+            <input
+              type="text"
+              data-value
+              placeholder="value"
+              value=${ifDefined(value)}
+              data-value-type=${this.valuetype}
+              ?disabled=${this.disabled}
+            />
+          `
   }
 
   render() {
@@ -181,7 +179,7 @@ export class OxInputValueRange extends OxFormField {
               tabindex="-1"
               ?disabled=${this.disabled}
             >
-              <mwc-icon>remove</mwc-icon>
+              <md-icon>remove</md-icon>
             </button>
           </div>
         `
@@ -197,7 +195,7 @@ export class OxInputValueRange extends OxFormField {
 
                 ${this.valueInputTemplate()}
                 <button class="record-action" @click=${(e: Event) => this._add()} tabindex="-1">
-                  <mwc-icon>add</mwc-icon>
+                  <md-icon>add</md-icon>
                 </button>
               </div>
             `
@@ -209,7 +207,7 @@ export class OxInputValueRange extends OxFormField {
 
         ${this.valueInputTemplate((this.value && this.value.default) || this._defaultValue())}
         <button class="record-action" @click=${(e: Event) => this._sort()} ?disabled=${this.disabled}>
-          <mwc-icon>chevron_right</mwc-icon>
+          <md-icon>chevron_right</md-icon>
         </button>
       </div>
     `

package/src/ox-input-work-shift.ts

@@ -94,9 +94,6 @@ export class OxInputWorkShift extends OxFormField {
       color: var(--button-color);
       cursor: pointer;
     }
-    button mwc-icon {
-      font-size: var(--fontsize-default);
-    }
     button:focus,
     button:hover,
     button:active {
@@ -156,7 +153,7 @@ export class OxInputWorkShift extends OxFormField {
               tabindex="-1"
               ?disabled=${this.disabled}
             >
-              <mwc-icon>remove</mwc-icon>
+              <md-icon>remove</md-icon>
             </button>
           </div>
         `
@@ -182,7 +179,7 @@ export class OxInputWorkShift extends OxFormField {
               <input type="time" data-to-time step="1800" />
 
               <button class="record-action" @click=${(e: Event) => this._add()} tabindex="-1">
-                <mwc-icon>add</mwc-icon>
+                <md-icon>add</md-icon>
               </button>
             </div>
           `}

package/src/ox-select.ts

@@ -2,7 +2,7 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 import '@operato/popup/ox-popup-list.js'
 
 import { css, html, PropertyValues } from 'lit'
@@ -58,7 +58,7 @@ export class Select extends OxFormField {
         white-space: nowrap;
       }
 
-      mwc-icon {
+      md-icon {
         display: block;
         width: 24px;
         text-align: right;
@@ -67,7 +67,7 @@ export class Select extends OxFormField {
         opacity: 0.7;
       }
 
-      div:hover mwc-icon {
+      div:hover md-icon {
         color: var(--primary-color);
       }
 
@@ -92,7 +92,7 @@ export class Select extends OxFormField {
     return html`
       <div @click=${this.expand}>
         <span @mouseover=${onmouseover} @mouseout=${onmouseout}>${label}</span>
-        <mwc-icon>expand_more</mwc-icon>
+        <md-icon>expand_more</md-icon>
       </div>
 
       <slot></slot>

package/stories/ox-input-3axis.stories.ts

@@ -25,7 +25,20 @@ interface ArgTypes {
 
 const Template: Story<ArgTypes> = ({ value = {}, disabled }: ArgTypes) => html`
   <link href="/themes/app-theme.css" rel="stylesheet" />
-  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+
   <style>
     body {
     }

package/stories/ox-input-3dish.stories.ts

@@ -27,7 +27,20 @@ interface ArgTypes {
 
 const Template: Story<ArgTypes> = ({ name = '3dish', value = [], disabled }: ArgTypes) => html`
   <link href="/themes/app-theme.css" rel="stylesheet" />
-  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+
   <style>
     body {
     }

package/stories/ox-input-angle.stories.ts

@@ -27,7 +27,19 @@ interface ArgTypes {
 
 const Template: Story<ArgTypes> = ({ name = '3dish', value = 0, disabled }: ArgTypes) => html`
   <link href="/themes/app-theme.css" rel="stylesheet" />
-  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
   <style>
     body {
     }

package/stories/ox-input-barcode.stories.ts

@@ -41,7 +41,19 @@ const Template: Story<ArgTypes> = ({
   disabled
 }: ArgTypes) => html`
   <link href="/themes/app-theme.css" rel="stylesheet" />
-  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
   <style>
     #root {
       height: 500px;

package/stories/ox-input-code.stories.ts

@@ -9,6 +9,7 @@ export default {
     value: { control: 'text' },
     name: { control: 'text' },
     language: { control: 'select', options: ['javascript', 'sql', 'json'] },
+    showLineNumbers: { control: 'boolean' },
     disabled: { control: 'boolean' }
   }
 }
@@ -23,12 +24,31 @@ interface ArgTypes {
   name?: string
   value?: string
   language: 'javascript' | 'sql' | 'json'
+  showLineNumbers?: boolean
   disabled?: boolean
 }
 
-const Template: Story<ArgTypes> = ({ name = 'code', language = 'javascript', value = '', disabled }: ArgTypes) => html`
+const Template: Story<ArgTypes> = ({
+  name = 'code',
+  language = 'javascript',
+  value = '',
+  showLineNumbers,
+  disabled
+}: ArgTypes) => html`
   <link href="/themes/app-theme.css" rel="stylesheet" />
-  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
   <style>
     body {
     }
@@ -44,6 +64,7 @@ const Template: Story<ArgTypes> = ({ name = 'code', language = 'javascript', val
     name=${name}
     language=${language}
     .value=${value}
+    ?show-line-numbers=${showLineNumbers}
     ?disabled=${disabled}
   >
   </ox-input-code>
@@ -53,5 +74,6 @@ export const Regular = Template.bind({})
 Regular.args = {
   name: 'code',
   value: '',
-  language: 'javascript'
+  language: 'javascript',
+  showLineNumbers: true
 }

package/stories/ox-input-crontab.stories.ts

@@ -26,7 +26,19 @@ interface ArgTypes {
 
 const Template: Story<ArgTypes> = ({ name = 'crontab', value = '* * * * * *', disabled }: ArgTypes) => html`
   <link href="/themes/app-theme.css" rel="stylesheet" />
-  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
   <style>
     body {
     }

package/stories/ox-input-data.stories.ts

@@ -8,7 +8,6 @@ export default {
   argTypes: {
     value: { control: 'text' },
     name: { control: 'text' },
-    language: { control: 'select', options: ['javascript', 'sql', 'json'] },
     disabled: { control: 'boolean' }
   }
 }
@@ -27,7 +26,19 @@ interface ArgTypes {
 
 const Template: Story<ArgTypes> = ({ name = 'code', value = '', disabled }: ArgTypes) => html`
   <link href="/themes/app-theme.css" rel="stylesheet" />
-  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
   <style>
     body {
     }
@@ -50,6 +61,5 @@ const Template: Story<ArgTypes> = ({ name = 'code', value = '', disabled }: ArgT
 
 export const Regular = Template.bind({})
 Regular.args = {
-  name: 'data',
-  value: ''
+  name: 'data'
 }

package/stories/ox-input-duration.stories.ts

@@ -27,7 +27,19 @@ interface ArgTypes {
 
 const Template: Story<ArgTypes> = ({ name = 'duration', value = 3601, disabled }: ArgTypes) => html`
   <link href="/themes/app-theme.css" rel="stylesheet" />
-  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
   <style>
     body {
     }