@operato/app 2.0.0-alpha.11 → 2.0.0-alpha.111

package/package.json

@@ -2,7 +2,7 @@
   "name": "@operato/app",
   "description": "WebApplication production supporting components following open-wc recommendations",
   "author": "heartyoh",
-  "version": "2.0.0-alpha.11",
+  "version": "2.0.0-alpha.111",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "exports": {
@@ -133,46 +133,43 @@
     "@codemirror/view": "^6.22.1",
     "@graphql-tools/delegate": "^10.0.1",
     "@graphql-tools/wrap": "^8.5.0",
-    "@material/mwc-button": "^0.27.0",
-    "@material/mwc-icon": "^0.27.0",
-    "@material/mwc-icon-button": "^0.27.0",
-    "@operato/attachment": "^2.0.0-alpha.11",
-    "@operato/data-grist": "^2.0.0-alpha.11",
-    "@operato/font": "^2.0.0-alpha.11",
-    "@operato/form": "^2.0.0-alpha.8",
-    "@operato/graphql": "^2.0.0-alpha.0",
-    "@operato/i18n": "^2.0.0-alpha.0",
-    "@operato/input": "^2.0.0-alpha.11",
-    "@operato/layout": "^2.0.0-alpha.9",
-    "@operato/property-editor": "^2.0.0-alpha.11",
-    "@operato/shell": "^2.0.0-alpha.8",
-    "@operato/styles": "^2.0.0-alpha.0",
-    "@operato/utils": "^2.0.0-alpha.8",
-    "cm6-graphql": "^0.0.12",
+    "@material/web": "^1.4.0",
+    "@operato/attachment": "^2.0.0-alpha.111",
+    "@operato/data-grist": "^2.0.0-alpha.111",
+    "@operato/font": "^2.0.0-alpha.111",
+    "@operato/form": "^2.0.0-alpha.111",
+    "@operato/graphql": "^2.0.0-alpha.111",
+    "@operato/i18n": "^2.0.0-alpha.111",
+    "@operato/input": "^2.0.0-alpha.111",
+    "@operato/layout": "^2.0.0-alpha.111",
+    "@operato/property-editor": "^2.0.0-alpha.111",
+    "@operato/shell": "^2.0.0-alpha.111",
+    "@operato/styles": "^2.0.0-alpha.111",
+    "@operato/utils": "^2.0.0-alpha.111",
+    "cm6-graphql": "^0.0.14",
     "codemirror": "^6.0.1",
     "cronstrue": "^2.2.0",
-    "cross-fetch": "^3.1.5",
     "graphql": "^16.5.0",
     "graphql-config": "^5.0.2",
     "graphql-tag": "^2.12.6",
-    "lit": "^2.5.0"
+    "lit": "^3.1.2"
   },
   "devDependencies": {
-    "@custom-elements-manifest/analyzer": "^0.8.1",
+    "@custom-elements-manifest/analyzer": "^0.9.2",
     "@hatiolab/prettier-config": "^1.0.0",
-    "@open-wc/eslint-config": "^10.0.0",
+    "@open-wc/eslint-config": "^12.0.3",
     "@open-wc/testing": "^3.1.6",
-    "@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"
   },
@@ -189,5 +186,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "5eceb2cf6973a59f0d927801accb2e52afbb5720"
+  "gitHead": "3525a4247ad184a8d4de91d81db3f72f0e940c79"
 }

package/src/filters-form/filter-resource-select.ts

@@ -6,22 +6,16 @@ import { html } from 'lit-html'
 import { FilterConfig, FilterSelectRenderer } from '@operato/form'
 import { i18next } from '@operato/i18n'
 import { openPopup } from '@operato/layout'
+import { GristRecord } from '@operato/data-grist'
 
-type SelectedCallback = (value: { id: string; name: string; description: string }) => void
+type SelectedCallback = (value?: Partial<GristRecord>) => void
 
 function openResourceSelector(filter: FilterConfig, value: any, confirmCallback: SelectedCallback) {
-  const { queryName, select, list, basicArgs, valueField = 'id', title } = filter.options || {}
-
-  var actualValue
-  if (typeof valueField === 'function') {
-    actualValue = valueField(value)
-  } else {
-    actualValue = value?.[valueField]
-  }
+  const { queryName, select, list, basicArgs, valueField = 'id', title } = filter.options || ({} as any)
 
   var template = html`
     <ox-selector-resource-object
-      .value=${actualValue}
+      .value=${value}
       .confirmCallback=${confirmCallback}
       .queryName=${queryName}
       .columns=${select}
@@ -53,9 +47,9 @@ function openResourceSelector(filter: FilterConfig, value: any, confirmCallback:
 
 export const FilterResourceSelect: FilterSelectRenderer = (filter, value, owner: any) => {
   const { name, operator = 'like' } = filter
-  var { idField = 'id', nameField = 'name', descriptionField = 'description' } = filter.options || {};
-  const hideValue = value ? value[idField] : '';
-  const text = value ? value[nameField] : '';
+  var { idField = 'id', nameField = 'name', descriptionField = 'description' } = filter.options || ({} as any)
+  const hideValue = value ? value[idField] : ''
+  const text = value ? value[nameField] : ''
 
   return operator === 'like'
     ? html` <input
@@ -78,35 +72,42 @@ export const FilterResourceSelect: FilterSelectRenderer = (filter, value, owner:
         }}
       />`
     : operator == 'in'
-    ? html``
-    : operator === 'eq'
-    ? html`
+      ? html``
+      : operator === 'eq'
+        ? html`
         <input name='${name}' .value=${hideValue} type="text" hidden></input>
         <input 
           type="text"
           name='${name}_disp'
           .value=${text}
           readonly
+          @change=${() => false}
           @click=${(e: Event) => {
             e.stopPropagation()
-            const input = e.target as HTMLInputElement;
+
+            const input = e.target as HTMLInputElement
+            const codeInput =
+              owner.tagName.toLowerCase() == 'ox-grid-header'
+                ? owner.renderRoot.querySelector(`[name="${name}"]`)
+                : owner.renderRoot.querySelector(`form [name="${name}"]`)
 
             const confirmCallback = (selected?: { [field: string]: any }) => {
-              let disp = selected ? selected[idField] : '';
+              let disp = selected ? selected[idField] : ''
 
-              if(selected && nameField){
-                disp = selected[nameField];
+              if (selected && nameField) {
+                disp = selected[nameField]
               }
-              input.value = disp;
-
-              let codeInput = owner.tagName.toLowerCase() == 'ox-grid-header' 
-                            ? owner.renderRoot.querySelector(`[name="${name}"]`)
-                            : owner.renderRoot.querySelector(`form [name="${name}"]`);
+              input.value = disp
 
-              const objectValue = selected ? selected[idField] : '';
-              codeInput.value = objectValue;
+              const value = selected ? selected[idField] : ''
+              codeInput.value = value
 
-              input.dispatchEvent(new Event('change', { bubbles: true }))
+              codeInput.dispatchEvent(
+                new Event('change', {
+                  bubbles: true,
+                  composed: true
+                })
+              )
 
               owner.dispatchEvent(
                 new CustomEvent('filter-change', {
@@ -115,15 +116,15 @@ export const FilterResourceSelect: FilterSelectRenderer = (filter, value, owner:
                   detail: {
                     name: name,
                     operator,
-                    value: objectValue
+                    value
                   }
                 })
               )
             }
 
-            openResourceSelector(filter, value, confirmCallback)
+            openResourceSelector(filter, codeInput.value, confirmCallback)
           }}
         />
       `
-    : html``
+        : html``
 }

package/src/grist-editor/ox-grist-editor-resource-code.ts

@@ -1,4 +1,4 @@
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 import { OxGristEditor, RecordConfig } from '@operato/data-grist'
 
 import { customElement } from 'lit/decorators.js'
@@ -20,7 +20,7 @@ export class OxGristEditorResourceCode extends OxGristEditor {
         ${(codes || []).map(
           (code: CommonCodeDetail) => html`
             <option ?selected=${code.name == this.value} value=${code.name}>
-            ${code.name == '' ? '' : selectDispOpt.replace('name',code.description).replace('code',code.name)}
+              ${code.name == '' ? '' : selectDispOpt.replace('name', code.description).replace('code', code.name)}
             </option>
           `
         )}

package/src/grist-editor/ox-grist-editor-resource-id.ts

@@ -1,4 +1,4 @@
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 import '../selector/ox-selector-resource-id.js'
 
 import { html } from 'lit'
@@ -19,7 +19,7 @@ export class OxGristEditorResourceId extends OxGristEditor {
       ${!value
         ? html`<span tabindex="0"></span>`
         : html` <span tabindex="0">${value[nameField]} (${value[descriptionField]})</span> `}
-      <mwc-icon>arrow_drop_down</mwc-icon>
+      <md-icon>arrow_drop_down</md-icon>
     `
   }
 

package/src/grist-editor/ox-popup-code-input.ts

@@ -1,3 +1,4 @@
+import '@material/web/icon/icon.js'
 import '@operato/input/ox-input-code.js'
 
 import { css, html, LitElement } from 'lit'
@@ -5,11 +6,12 @@ import { customElement, property } from 'lit/decorators.js'
 
 import { i18next } from '@operato/i18n'
 import { closePopup } from '@operato/popup'
-import { ScrollbarStyles } from '@operato/styles'
+import { ButtonContainerStyles, ScrollbarStyles } from '@operato/styles'
 
 @customElement('ox-popup-code-input')
 export class OxPopupCodeInput extends LitElement {
   static styles = [
+    ButtonContainerStyles,
     ScrollbarStyles,
     css`
       :host {
@@ -26,11 +28,6 @@ export class OxPopupCodeInput extends LitElement {
         flex: 1;
         overflow-y: auto;
       }
-
-      .button-container {
-        display: flex;
-        margin-left: auto;
-      }
     `
   ]
 
@@ -45,8 +42,10 @@ export class OxPopupCodeInput extends LitElement {
       </ox-input-code>
 
       <div class="button-container">
-        <mwc-button @click=${this.onCancel.bind(this)}>${i18next.t('button.cancel')}</mwc-button>
-        <mwc-button @click=${this.onConfirm.bind(this)}>${i18next.t('button.confirm')}</mwc-button>
+        <button @click=${this.onCancel.bind(this)} danger>
+          <md-icon>cancel</md-icon>${i18next.t('button.cancel')}
+        </button>
+        <button @click=${this.onConfirm.bind(this)}><md-icon>done</md-icon>${i18next.t('button.confirm')}</button>
       </div>
     `
   }

package/src/grist-editor/ox-popup-privilege-input.ts

@@ -1,3 +1,4 @@
+import '@material/web/icon/icon.js'
 import '@operato/input/ox-input-privilege.js'
 
 import gql from 'graphql-tag'
@@ -6,12 +7,13 @@ import { customElement, property, state } from 'lit/decorators.js'
 
 import { i18next } from '@operato/i18n'
 import { closePopup } from '@operato/popup'
-import { ScrollbarStyles } from '@operato/styles'
+import { ButtonContainerStyles, ScrollbarStyles } from '@operato/styles'
 import { client } from '@operato/graphql'
 
 @customElement('ox-popup-privilege-input')
 export class OxPopupPrivilegeInput extends LitElement {
   static styles = [
+    ButtonContainerStyles,
     ScrollbarStyles,
     css`
       :host {
@@ -28,15 +30,6 @@ export class OxPopupPrivilegeInput extends LitElement {
         flex: 1;
         overflow-y: auto;
       }
-
-      .button-container {
-        display: flex;
-        flex-direction: row;
-      }
-
-      div[padding] {
-        flex: 1;
-      }
     `
   ]
 
@@ -51,11 +44,11 @@ export class OxPopupPrivilegeInput extends LitElement {
       <ox-input-privilege .value=${this.value} .privileges=${this.privileges} @change=${this.onChange.bind(this)}>
       </ox-input-privilege>
 
-      <div class="button-container">
-        <mwc-button @click=${this.onReset.bind(this)}>${i18next.t('button.reset')}</mwc-button>
-        <div padding></div>
-        <mwc-button @click=${this.onCancel.bind(this)}>${i18next.t('button.cancel')}</mwc-button>
-        <mwc-button @click=${this.onConfirm.bind(this)}>${i18next.t('button.confirm')}</mwc-button>
+      <div class="button-container" style="margin-left: unset;">
+        <button @click=${this.onReset.bind(this)}><md-icon>restart_alt</md-icon>${i18next.t('button.reset')}</button>
+        <div filler></div>
+        <button @click=${this.onCancel.bind(this)}><md-icon>cancel</md-icon>${i18next.t('button.cancel')}</button>
+        <button @click=${this.onConfirm.bind(this)}><md-icon>done</md-icon>${i18next.t('button.confirm')}</button>
       </div>
     `
   }

package/src/input/ox-input-graphql.ts

@@ -2,7 +2,6 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
-import { fetch } from 'cross-fetch'
 import { print } from 'graphql'
 import { css, html, PropertyValues } from 'lit'
 import { customElement, property, query } from 'lit/decorators.js'
@@ -12,7 +11,7 @@ import { history, historyKeymap, indentWithTab } from '@codemirror/commands'
 import { autocompletion, closeBrackets } from '@codemirror/autocomplete'
 import { bracketMatching, syntaxHighlighting } from '@codemirror/language'
 import { oneDarkHighlightStyle, oneDark } from '@codemirror/theme-one-dark'
-import { EditorView, highlightActiveLine, keymap } from '@codemirror/view'
+import { EditorView, highlightActiveLine, keymap, lineNumbers } from '@codemirror/view'
 
 import { introspectSchema, wrapSchema } from '@graphql-tools/wrap'
 import { GRAPHQL_URI } from '@operato/graphql'
@@ -50,6 +49,7 @@ export default class OxInputGraphql extends OxFormField {
    */
   @property({ type: String }) value?: string
   @property({ type: String }) link?: string
+  @property({ type: Boolean, attribute: 'show-line-numbers' }) showLineNumbers: boolean = false
 
   private _self_changing: boolean = false
   private _editor?: EditorView
@@ -98,6 +98,7 @@ export default class OxInputGraphql extends OxFormField {
       this._editor = new EditorView({
         doc: this.value,
         extensions: [
+          ...(this.showLineNumbers ? [lineNumbers()] : []),
           bracketMatching(),
           closeBrackets(),
           history(),

package/src/selector/ox-selector-resource-id.ts

@@ -1,3 +1,4 @@
+import '@material/web/icon/icon.js'
 import '@operato/data-grist'
 
 import gql from 'graphql-tag'
@@ -39,11 +40,6 @@ export class OxSelectorResourceId extends LitElement {
       #filters > * {
         padding: var(--padding-default) var(--padding-wide);
       }
-
-      .button-container {
-        display: flex;
-        margin-left: auto;
-      }
     `
   ]
 
@@ -71,10 +67,13 @@ export class OxSelectorResourceId extends LitElement {
         </div>
       </ox-grist>
 
-      <div class="button-container">
-        <mwc-button @click=${this.onEmpty.bind(this)}>${i18next.t('button.empty')}</mwc-button>
-        <mwc-button @click=${this.onCancel.bind(this)}>${i18next.t('button.cancel')}</mwc-button>
-        <mwc-button @click=${this.onConfirm.bind(this)}>${i18next.t('button.confirm')}</mwc-button>
+      <div class="button-container" style="margin-left: unset;">
+        <button @click=${this.onEmpty.bind(this)}>
+          <md-icon>check_box_outline_blank</md-icon>${i18next.t('button.empty')}
+        </button>
+        <div filler></div>
+        <button @click=${this.onCancel.bind(this)}><md-icon>cancel</md-icon>${i18next.t('button.cancel')}</button>
+        <button @click=${this.onConfirm.bind(this)}><md-icon>done</md-icon>${i18next.t('button.confirm')}</button>
       </div>
     `
   }

package/src/selector/ox-selector-resource-object-legacy.ts

@@ -1,3 +1,4 @@
+import '@material/web/icon/icon.js'
 import '@operato/data-grist'
 import '@operato/form/ox-search-form.js'
 
@@ -16,7 +17,7 @@ import {
   InheritedValueType,
   ZERO_DATA
 } from '@operato/data-grist'
-import { MultiColumnFormStyles, SearchForm } from '@operato/form'
+import { MultiColumnFormStyles, OxSearchForm } from '@operato/form'
 import { buildArgs, client, gqlContext } from '@operato/graphql'
 import { i18next } from '@operato/i18n'
 import { closePopup } from '@operato/popup'
@@ -40,11 +41,6 @@ export class OxSelectorResourceObjectLegacy extends LitElement {
         flex: 1;
       }
 
-      .button-container {
-        display: flex;
-        margin-left: auto;
-      }
-
       form {
         position: relative;
       }
@@ -80,7 +76,7 @@ export class OxSelectorResourceObjectLegacy extends LitElement {
   @property({ type: String }) valueField: string | ((item: any) => any) = 'id'
 
   @query('ox-grist') grist!: DataGrist
-  @query('ox-search-form') searchForm!: SearchForm
+  @query('ox-search-form') searchForm!: OxSearchForm
 
   render() {
     return html`
@@ -110,10 +106,13 @@ export class OxSelectorResourceObjectLegacy extends LitElement {
         </div>
       </ox-grist>
 
-      <div class="button-container">
-        <mwc-button @click=${this.onEmpty.bind(this)}>${i18next.t('button.empty')}</mwc-button>
-        <mwc-button @click=${this.onCancel.bind(this)}>${i18next.t('button.cancel')}</mwc-button>
-        <mwc-button @click=${this.onConfirm.bind(this)}>${i18next.t('button.confirm')}</mwc-button>
+      <div class="button-container" style="margin-left: unset;">
+        <button @click=${this.onEmpty.bind(this)}>
+          <md-icon>check_box_outline_blank</md-icon>${i18next.t('button.empty')}
+        </button>
+        <div filler></div>
+        <button @click=${this.onCancel.bind(this)}><md-icon>cancel</md-icon>${i18next.t('button.cancel')}</button>
+        <button @click=${this.onConfirm.bind(this)}><md-icon>done</md-icon>${i18next.t('button.confirm')}</button>
       </div>
     `
   }
@@ -223,17 +222,17 @@ export class OxSelectorResourceObjectLegacy extends LitElement {
             fieldType === 'string'
               ? 'text'
               : numberTypes.indexOf(fieldType) >= 0
-              ? 'number'
-              : fieldType === 'boolean'
-              ? 'checkbox'
-              : fieldType,
+                ? 'number'
+                : fieldType === 'boolean'
+                  ? 'checkbox'
+                  : fieldType,
           queryName: selectField.queryName,
           props:
             fieldType === 'string'
               ? { searchOper: 'i_like' }
               : fieldType === 'object'
-              ? { searchOper: 'in' }
-              : { searchOper: 'eq' },
+                ? { searchOper: 'in' }
+                : { searchOper: 'eq' },
           attrs: fieldType === 'boolean' ? ['indeterminated'] : []
         }
       })

package/src/selector/ox-selector-resource-object.ts

@@ -1,3 +1,4 @@
+import '@material/web/icon/icon.js'
 import '@operato/data-grist'
 
 import gql from 'graphql-tag'
@@ -47,11 +48,6 @@ export class OxSelectorResourceObject extends LitElement {
       #filters > * {
         padding: var(--padding-default) var(--padding-wide);
       }
-
-      .button-container {
-        display: flex;
-        margin-left: auto;
-      }
     `
   ]
 
@@ -61,7 +57,7 @@ export class OxSelectorResourceObject extends LitElement {
   @property({ type: String }) queryName!: string
   @property({ type: Object }) basicArgs: any
   @property({ type: String }) inherited?: InheritedValueType = InheritedValueType.Include
-  @property({ type: Object }) confirmCallback?: (record?: GristRecord | null) => void
+  @property({ type: Object }) confirmCallback?: (record?: Partial<GristRecord>) => void
   @property({ type: Array }) selectedRecords: GristRecord[] = []
 
   @property({ type: Array }) searchFields: any
@@ -97,10 +93,13 @@ export class OxSelectorResourceObject extends LitElement {
         </div>
       </ox-grist>
 
-      <div class="button-container">
-        <mwc-button @click=${this.onEmpty.bind(this)}>${i18next.t('button.empty')}</mwc-button>
-        <mwc-button @click=${this.onCancel.bind(this)}>${i18next.t('button.cancel')}</mwc-button>
-        <mwc-button @click=${this.onConfirm.bind(this)}>${i18next.t('button.confirm')}</mwc-button>
+      <div class="button-container" style="margin-left: unset;">
+        <button @click=${this.onEmpty.bind(this)}>
+          <md-icon>check_box_outline_blank</md-icon>${i18next.t('button.empty')}
+        </button>
+        <div filler></div>
+        <button @click=${this.onCancel.bind(this)}><md-icon>cancel</md-icon>${i18next.t('button.cancel')}</button>
+        <button @click=${this.onConfirm.bind(this)}><md-icon>done</md-icon>${i18next.t('button.confirm')}</button>
       </div>
     `
   }
@@ -114,7 +113,7 @@ export class OxSelectorResourceObject extends LitElement {
   }
 
   onEmpty() {
-    this.confirmCallback && this.confirmCallback(null)
+    this.confirmCallback && this.confirmCallback()
     closePopup(this)
   }
 

package/stories/graphql-client.stories.ts

@@ -0,0 +1,73 @@
+import { setClientLink, createMockLink } from '@operato/graphql/graphql-env.js'
+import '@operato/graphql/graphql-client.js'
+import '../src/input/ox-input-graphql.js'
+
+// TODO cm6-graphql에서 사용하는 nullthrows 관련 모듈 오류로 스토리북 테스트가 안됨.
+
+import { html, TemplateResult } from 'lit'
+
+setClientLink(
+  createMockLink({
+    request: {
+      query: ''
+    },
+    result: {
+      data: {
+        viewer: null
+      }
+    }
+  })
+)
+
+export default {
+  title: 'graphql-client',
+  component: 'graphql-client',
+  argTypes: {
+    value: { control: 'text' },
+    name: { control: 'text' }
+  }
+}
+
+interface Story<T> {
+  (args: T): TemplateResult
+  args?: Partial<T>
+  argTypes?: Record<string, unknown>
+}
+
+interface ArgTypes {
+  name?: string
+  value?: string
+}
+
+const Template: Story<ArgTypes> = ({ name = 'code', value = '' }: ArgTypes) => html`
+  <style>
+    body {
+    }
+  </style>
+
+  <ox-input-graphql
+    @change=${(e: Event) => {
+      console.log((e.target as HTMLInputElement).value)
+    }}
+    name=${name}
+    .value=${value}
+  >
+  </ox-input-graphql>
+`
+
+export const Regular = Template.bind({})
+Regular.args = {
+  name: 'code',
+  value: `
+query privileges {
+  privileges {
+    items {
+      privilege
+      category
+      description
+    }
+    total
+  }
+}
+`
+}

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

@@ -24,7 +24,19 @@ interface ArgTypes {
 
 const Template: Story<ArgTypes> = ({ name = 'code', value = '' }: 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 {
     }