@maggioli-design-system/mds-push-notification 5.2.1 → 5.2.2

package/dist/collection/components/mds-push-notification/test/mds-push-notification.stories.js

@@ -30,14 +30,14 @@ const exampleNotifications = [
     },
 ];
 const PushNotificationElement = ({ index }) => {
-    return h("mds-push-notification-item", { icon: "mi/baseline/attachment", subject: `Notification ${index + 1}`, message: "Sto preparando il documento che mi hai richiesto, dovrei finire in giornata, fammi sapere se hai altri aggiornamenti al riguardo cos\u00EC non mi perdo pezzi per la strada." });
+    return (h("mds-push-notification-item", { icon: "mi/baseline/attachment", subject: `Notification ${index + 1}`, message: "Sto preparando il documento che mi hai richiesto, dovrei finire in giornata, fammi sapere se hai altri aggiornamenti al riguardo cos\u00EC non mi perdo pezzi per la strada." }));
 };
 const GetNotifications = ({ notifications }) => {
     // console.log('getNotifications', notifications)
     if (notifications.length > 0) {
-        return h(Fragment, null, notifications.map((n, i) => {
-            return h("mds-push-notification-item", { key: i, preview: n.preview, src: n.src, subject: n.subject, message: n.message }, h("mds-button", { slot: "actions", variant: "primary", tone: "weak", size: "sm" }, "Rispondi"));
-        }));
+        return (h(Fragment, null, notifications.map((n, i) => {
+            return (h("mds-push-notification-item", { key: i, preview: n.preview, src: n.src, subject: n.subject, message: n.message }, h("mds-button", { slot: "actions", variant: "primary", tone: "weak", size: "sm" }, "Rispondi")));
+        })));
     }
 };
 const Template = args => {
@@ -70,30 +70,36 @@ const Template = args => {
         setNotifications([...notifications, n]);
         // console.log(notifications)
     }
-    return h("div", { class: "-m-600" }, h("div", { class: "fixed top-600 left-600 flex gap-100" }, visible
-        ? h("mds-button", { class: "shadow-outline-50 shadow-tone-neutral", onClick: () => setVisible(false), icon: "mdi/eye-off-outline", variant: "error" }, "Hide notifications")
-        : h("mds-button", { class: "shadow-outline-50 shadow-tone-neutral", onClick: () => setVisible(true), icon: "mi/baseline/remove-red-eye", variant: "primary" }, "Show notifications"), h("mds-button", { class: "shadow-outline-50 shadow-tone-neutral", variant: "success", onClick: pushN }, "Carica altre...")), h("mds-push-notification", { class: "mds-push-notification", visible: visible === false ? undefined : true, behavior: args.behavior }, h(GetNotifications, { notifications: notifications })), h("div", { class: "p-1200 flex justify-center" }, h("div", { class: "grid gap-600 grid-cols-3 mobile:grid-cols-1 max-w-screen-desktop" }, Array(18).fill(null).map((_item, index) => {
-        return (h("div", { class: "grid gap-25", key: index }, h("mds-text", { typography: 'h5', tag: "h2" }, "This is a section title"), h("mds-text", null, "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus iure, ratione beatae quam optio cumque rerum modi consectetur odit eligendi omnis veniam fuga non ipsam voluptatum a ut neque illum.")));
-    }))));
+    return (h("div", { class: "-m-600" }, h("div", { class: "fixed top-600 left-600 flex gap-100" }, visible ? (h("mds-button", { class: "shadow-outline-50 shadow-tone-neutral", onClick: () => setVisible(false), icon: "mdi/eye-off-outline", variant: "error" }, "Hide notifications")) : (h("mds-button", { class: "shadow-outline-50 shadow-tone-neutral", onClick: () => setVisible(true), icon: "mi/baseline/remove-red-eye", variant: "primary" }, "Show notifications")), h("mds-button", { class: "shadow-outline-50 shadow-tone-neutral", variant: "success", onClick: pushN }, "Carica altre...")), h("mds-push-notification", { class: "mds-push-notification", visible: visible === false ? undefined : true, behavior: args.behavior }, h(GetNotifications, { notifications: notifications })), h("div", { class: "p-1200 flex justify-center" }, h("div", { class: "grid gap-600 grid-cols-3 max-mobile:grid-cols-1 max-w-screen-desktop" }, Array(18)
+        .fill(null)
+        .map((_item, index) => {
+        return (h("div", { class: "grid gap-25", key: index }, h("mds-text", { typography: "h5", tag: "h2" }, "This is a section title"), h("mds-text", null, "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus iure, ratione beatae quam optio cumque rerum modi consectetur odit eligendi omnis veniam fuga non ipsam voluptatum a ut neque illum.")));
+    })))));
 };
 const TemplateAddNotifications = () => {
     const [items, setItem] = useState(0);
-    return h("div", null, h("mds-button", { onClick: () => setItem(items + 1) }, "Add notifications"), h("mds-push-notification", null, Array.from(Array(items).keys()).map((_item, index) => h(PushNotificationElement, { index: index }))));
+    return (h("div", null, h("mds-button", { onClick: () => setItem(items + 1) }, "Add notifications"), h("mds-push-notification", null, Array.from(Array(items).keys()).map((_item, index) => (h(PushNotificationElement, { index: index }))))));
 };
 const TemplateAddMultipleNotifications = args => {
     const [items, setItem] = useState(0);
     const addItems = () => {
         setItem(items + 3);
     };
-    return h("div", null, h("mds-button", { onClick: addItems.bind(this) }, "Carica notifiche..."), h("mds-push-notification", Object.assign({}, args), h("mds-button", { slot: "top", variant: "dark", onClick: addItems.bind(this) }, "Carica notifiche..."), Array.from(Array(items).keys()).map((_item, index) => h(PushNotificationElement, { index: index })), h("mds-button", { slot: "bottom", variant: "dark" }, "Cancella notifiche")));
+    return (h("div", null, h("mds-button", { onClick: addItems.bind(this) }, "Carica notifiche..."), h("mds-push-notification", Object.assign({}, args), h("mds-button", { slot: "top", variant: "dark", onClick: addItems.bind(this) }, "Carica notifiche..."), Array.from(Array(items).keys()).map((_item, index) => (h(PushNotificationElement, { index: index }))), h("mds-button", { slot: "bottom", variant: "dark" }, "Cancella notifiche"))));
 };
-export const Default = Template.bind({});
-export const AddNotifications = TemplateAddNotifications.bind({});
-AddNotifications.args = {
-    visible: true,
+export const Default = {
+    render: Template,
 };
-export const AddMultipleNotifications = TemplateAddMultipleNotifications.bind({});
-AddMultipleNotifications.args = {
-    visible: true,
+export const AddNotifications = {
+    render: TemplateAddNotifications,
+    args: {
+        visible: true,
+    },
+};
+export const AddMultipleNotifications = {
+    render: TemplateAddMultipleNotifications,
+    args: {
+        visible: true,
+    },
 };
 export const ManualNotification = Template.bind({}, { behavior: 'manual' });

package/dist/documentation.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2025-07-04T10:24:56",
+  "timestamp": "2026-01-16T15:19:56",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.27.2",

package/dist/stats.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2025-07-04T10:24:57",
+  "timestamp": "2026-01-16T15:19:56",
   "compiler": {
     "name": "node",
     "version": "22.15.0"

package/dist/types/components/mds-push-notification/test/mds-push-notification.stories.d.ts

@@ -10,7 +10,19 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const Default: any;
-export declare const AddNotifications: any;
-export declare const AddMultipleNotifications: any;
+export declare const Default: {
+    render: (args: any) => any;
+};
+export declare const AddNotifications: {
+    render: () => any;
+    args: {
+        visible: boolean;
+    };
+};
+export declare const AddMultipleNotifications: {
+    render: (args: any) => any;
+    args: {
+        visible: boolean;
+    };
+};
 export declare const ManualNotification: any;

package/dist/types/dictionary/icon.d.ts

@@ -1,4 +1,4 @@
-declare const iconsDictionary: string[];
+declare const iconsDictionary: any;
 declare const mggIconsDictionary: string[];
 declare const svgIconsDictionary: string[];
 export { iconsDictionary, mggIconsDictionary, svgIconsDictionary, };

package/documentation.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2025-07-04T09:57:56",
+  "timestamp": "2026-01-16T12:28:24",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.27.2",
@@ -425,7 +425,7 @@
       "path": "src/type/variant.ts"
     },
     "src/components/mds-chip/meta/interface.ts::MdsChipEvent": {
-      "declaration": "interface MdsChipEvent {\n  event: Event\n  element: HTMLMdsChipElement\n}",
+      "declaration": "interface MdsChipEvent {\n  event: Event\n  selected?: boolean\n  element: HTMLMdsChipElement\n}",
       "docstring": "",
       "path": "src/components/mds-chip/meta/interface.ts"
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maggioli-design-system/mds-push-notification",
-  "version": "5.2.1",
+  "version": "5.2.2",
   "description": "mds-push-notification is a web-component from Magma Design System, built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScript framework you are using.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -24,7 +24,7 @@
     "test": "stencil test --spec --e2e"
   },
   "dependencies": {
-    "@maggioli-design-system/mds-push-notification-item": "1.2.1",
+    "@maggioli-design-system/mds-push-notification-item": "1.2.2",
     "@maggioli-design-system/styles": "15.11.0",
     "@stencil/core": "4.27.2",
     "clsx": "2.1.0"

package/src/components/mds-push-notification/test/mds-push-notification.stories.tsx

@@ -12,21 +12,22 @@ export default {
   },
 }
 interface Notification {
-  message: string,
-
-  datetime?: string,
-  preview?: NotificationItemPreviewType,
-  icon?: string,
-  initial?: string
-  src?: string,
-  subject?: string,
+  message: string;
+
+  datetime?: string;
+  preview?: NotificationItemPreviewType;
+  icon?: string;
+  initial?: string;
+  src?: string;
+  subject?: string;
 }
 const exampleNotifications: Notification[] = [
   {
     preview: 'avatar',
     src: '/avatar-05-200x200.jpeg',
     subject: 'Sarah Ho',
-    message: 'Sto preparando il documento che mi hai richiesto, dovrei finire in giornata, fammi sapere se hai altri aggiornamenti al riguardo così non mi perdo pezzi per la strada.',
+    message:
+      'Sto preparando il documento che mi hai richiesto, dovrei finire in giornata, fammi sapere se hai altri aggiornamenti al riguardo così non mi perdo pezzi per la strada.',
   },
   {
     preview: 'avatar',
@@ -38,45 +39,75 @@ const exampleNotifications: Notification[] = [
     preview: 'avatar',
     src: '/avatar-06-200x200.jpeg',
     subject: 'JamPushNotificationElementes Millennial',
-    message: 'Domani ci sei alla riunione che ha organizzato Gigetto? Ho saputo che ci sarà anche Puppo.',
+    message:
+      'Domani ci sei alla riunione che ha organizzato Gigetto? Ho saputo che ci sarà anche Puppo.',
   },
 ]
 
-const PushNotificationElement = ( { index }) => {
-  return <mds-push-notification-item icon="mi/baseline/attachment" subject={`Notification ${index + 1}`} message="Sto preparando il documento che mi hai richiesto, dovrei finire in giornata, fammi sapere se hai altri aggiornamenti al riguardo così non mi perdo pezzi per la strada."></mds-push-notification-item>
+const PushNotificationElement = ({ index }) => {
+  return (
+    <mds-push-notification-item
+      icon="mi/baseline/attachment"
+      subject={`Notification ${index + 1}`}
+      message="Sto preparando il documento che mi hai richiesto, dovrei finire in giornata, fammi sapere se hai altri aggiornamenti al riguardo così non mi perdo pezzi per la strada."
+    ></mds-push-notification-item>
+  )
 }
 
 type GetNotificationsProps = {
-  notifications: Notification[]
-}
+  notifications: Notification[];
+};
 const GetNotifications = ({ notifications }: GetNotificationsProps) => {
   // console.log('getNotifications', notifications)
   if (notifications.length > 0) {
-    return <Fragment>
-      {notifications.map((n, i) => {
-        return <mds-push-notification-item key={i} preview={n.preview} src={n.src} subject={n.subject} message={n.message}>
-          <mds-button slot="actions" variant="primary" tone="weak" size="sm">Rispondi</mds-button>
-        </mds-push-notification-item>
-      })}
-    </Fragment>
+    return (
+      <Fragment>
+        {notifications.map((n, i) => {
+          return (
+            <mds-push-notification-item
+              key={i}
+              preview={n.preview}
+              src={n.src}
+              subject={n.subject}
+              message={n.message}
+            >
+              <mds-button
+                slot="actions"
+                variant="primary"
+                tone="weak"
+                size="sm"
+              >
+                Rispondi
+              </mds-button>
+            </mds-push-notification-item>
+          )
+        })}
+      </Fragment>
+    )
   }
 }
 
 const Template = args => {
-  const [notifications, setNotifications] = useState<Notification[]>(exampleNotifications)
+  const [notifications, setNotifications] =
+    useState<Notification[]>(exampleNotifications)
   const [visible, setVisible] = useState(args.visible || false)
 
   useEffect(() => {
-    const pushNotificationsElement = document.querySelector('.mds-push-notification')
+    const pushNotificationsElement = document.querySelector(
+      '.mds-push-notification',
+    )
     if (pushNotificationsElement === null) {
       // eslint-disable-next-line no-alert
       alert('Push notifications element not found')
       return
     }
-    pushNotificationsElement.addEventListener('mdsPushNotificationChange', (e: CustomEvent) => {
-      console.info('mdsPushNotificationChange', e.detail)
-      setVisible(e.detail)
-    })
+    pushNotificationsElement.addEventListener(
+      'mdsPushNotificationChange',
+      (e: CustomEvent) => {
+        console.info('mdsPushNotificationChange', e.detail)
+        setVisible(e.detail)
+      },
+    )
 
     pushNotificationsElement.addEventListener('mdsPushNotificationShow', () => {
       console.info('mdsPushNotificationShow')
@@ -91,48 +122,89 @@ const Template = args => {
 
   function pushN () {
     const n: Notification = {
-      message: 'Sto preparando il documento che mi hai richiesto, dovrei finire in giornata, fammi sapere se hai altri aggiornamenti al riguardo così non mi perdo pezzi per la strada.',
+      message:
+        'Sto preparando il documento che mi hai richiesto, dovrei finire in giornata, fammi sapere se hai altri aggiornamenti al riguardo così non mi perdo pezzi per la strada.',
     }
     setNotifications([...notifications, n])
     // console.log(notifications)
   }
-  return <div class="-m-600">
-    <div class="fixed top-600 left-600 flex gap-100">
-      { visible
-        ? <mds-button class="shadow-outline-50 shadow-tone-neutral" onClick={() => setVisible(false) } icon="mdi/eye-off-outline" variant="error">Hide notifications</mds-button>
-        : <mds-button class="shadow-outline-50 shadow-tone-neutral" onClick={() => setVisible(true) } icon="mi/baseline/remove-red-eye" variant="primary">Show notifications</mds-button>
-      }
-      <mds-button class="shadow-outline-50 shadow-tone-neutral" variant="success" onClick={pushN}>Carica altre...</mds-button>
-    </div>
-    <mds-push-notification class="mds-push-notification" visible={visible === false ? undefined : true} behavior={args.behavior}>
-      {/* <mds-button slot="top" variant="dark" onClick={deleteNotifications}>Cancella notifiche</mds-button> */}
-      <GetNotifications notifications={notifications}/>
-    </mds-push-notification>
-    <div class="p-1200 flex justify-center">
-      <div class="grid gap-600 grid-cols-3 mobile:grid-cols-1 max-w-screen-desktop">
-        { Array(18).fill(null).map((_item, index) => {
-          return (
-            <div class="grid gap-25" key={index}>
-              <mds-text typography='h5' tag="h2">This is a section title</mds-text>
-              <mds-text>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus iure, ratione beatae quam optio cumque rerum modi consectetur odit eligendi omnis veniam fuga non ipsam voluptatum a ut neque illum.</mds-text>
-            </div>
-          )
-        })}
+  return (
+    <div class="-m-600">
+      <div class="fixed top-600 left-600 flex gap-100">
+        {visible ? (
+          <mds-button
+            class="shadow-outline-50 shadow-tone-neutral"
+            onClick={() => setVisible(false)}
+            icon="mdi/eye-off-outline"
+            variant="error"
+          >
+            Hide notifications
+          </mds-button>
+        ) : (
+          <mds-button
+            class="shadow-outline-50 shadow-tone-neutral"
+            onClick={() => setVisible(true)}
+            icon="mi/baseline/remove-red-eye"
+            variant="primary"
+          >
+            Show notifications
+          </mds-button>
+        )}
+        <mds-button
+          class="shadow-outline-50 shadow-tone-neutral"
+          variant="success"
+          onClick={pushN}
+        >
+          Carica altre...
+        </mds-button>
+      </div>
+      <mds-push-notification
+        class="mds-push-notification"
+        visible={visible === false ? undefined : true}
+        behavior={args.behavior}
+      >
+        {/* <mds-button slot="top" variant="dark" onClick={deleteNotifications}>Cancella notifiche</mds-button> */}
+        <GetNotifications notifications={notifications} />
+      </mds-push-notification>
+      <div class="p-1200 flex justify-center">
+        <div class="grid gap-600 grid-cols-3 max-mobile:grid-cols-1 max-w-screen-desktop">
+          {Array(18)
+            .fill(null)
+            .map((_item, index) => {
+              return (
+                <div class="grid gap-25" key={index}>
+                  <mds-text typography="h5" tag="h2">
+                    This is a section title
+                  </mds-text>
+                  <mds-text>
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+                    Accusamus iure, ratione beatae quam optio cumque rerum modi
+                    consectetur odit eligendi omnis veniam fuga non ipsam
+                    voluptatum a ut neque illum.
+                  </mds-text>
+                </div>
+              )
+            })}
+        </div>
       </div>
     </div>
-  </div>
+  )
 }
 
 const TemplateAddNotifications = () => {
   const [items, setItem] = useState(0)
-  return <div>
-    <mds-button onClick={() => setItem(items + 1) }>Add notifications</mds-button>
-    <mds-push-notification>
-      { Array.from(Array(items).keys()).map((_item, index) =>
-        <PushNotificationElement index={index}/>,
-      ) }
-    </mds-push-notification>
-  </div>
+  return (
+    <div>
+      <mds-button onClick={() => setItem(items + 1)}>
+        Add notifications
+      </mds-button>
+      <mds-push-notification>
+        {Array.from(Array(items).keys()).map((_item, index) => (
+          <PushNotificationElement index={index} />
+        ))}
+      </mds-push-notification>
+    </div>
+  )
 }
 
 const TemplateAddMultipleNotifications = args => {
@@ -140,26 +212,42 @@ const TemplateAddMultipleNotifications = args => {
   const addItems = () => {
     setItem(items + 3)
   }
-  return <div>
-    <mds-button onClick={addItems.bind(this)}>Carica notifiche...</mds-button>
-    <mds-push-notification {...args}>
-      <mds-button slot="top" variant="dark" onClick={addItems.bind(this)}>Carica notifiche...</mds-button>
-      { Array.from(Array(items).keys()).map((_item, index) =>
-        <PushNotificationElement index={index}/>,
-      ) }
-      <mds-button slot="bottom" variant="dark">Cancella notifiche</mds-button>
-    </mds-push-notification>
-  </div>
+  return (
+    <div>
+      <mds-button onClick={addItems.bind(this)}>Carica notifiche...</mds-button>
+      <mds-push-notification {...args}>
+        <mds-button slot="top" variant="dark" onClick={addItems.bind(this)}>
+          Carica notifiche...
+        </mds-button>
+        {Array.from(Array(items).keys()).map((_item, index) => (
+          <PushNotificationElement index={index} />
+        ))}
+        <mds-button slot="bottom" variant="dark">
+          Cancella notifiche
+        </mds-button>
+      </mds-push-notification>
+    </div>
+  )
+}
+
+export const Default = {
+  render: Template,
 }
 
-export const Default = Template.bind({})
-export const AddNotifications = TemplateAddNotifications.bind({})
-AddNotifications.args = {
-  visible: true,
+export const AddNotifications = {
+  render: TemplateAddNotifications,
+
+  args: {
+    visible: true,
+  },
 }
-export const AddMultipleNotifications = TemplateAddMultipleNotifications.bind({})
-AddMultipleNotifications.args = {
-  visible: true,
+
+export const AddMultipleNotifications = {
+  render: TemplateAddMultipleNotifications,
+
+  args: {
+    visible: true,
+  },
 }
 
 export const ManualNotification = Template.bind({}, { behavior: 'manual' })

package/src/fixtures/icons.json

@@ -1,176 +0,0 @@
-[
-    "mdi/alien",
-    "mdi/apple",
-    "mdi/apple-keyboard-shift",
-    "mdi/barley",
-    "mdi/baseball",
-    "mdi/crown",
-    "mdi/delete",
-    "mdi/dots-vertical",
-    "mdi/email",
-    "mdi/eye-off-outline",
-    "mdi/file-document-remove-outline",
-    "mdi/file-download-outline",
-    "mdi/file-upload-outline",
-    "mdi/folder-open",
-    "mdi/handshake",
-    "mdi/harddisk",
-    "mdi/keyboard-space",
-    "mdi/license",
-    "mdi/map-marker",
-    "mdi/npm",
-    "mdi/numeric-1",
-    "mdi/numeric-2",
-    "mdi/numeric-3",
-    "mdi/numeric-4",
-    "mdi/numeric-5",
-    "mdi/numeric-6",
-    "mdi/numeric-7",
-    "mdi/numeric-8",
-    "mdi/replay",
-    "mdi/vector-curve",
-    "mgg/ai-brain",
-    "mgg/ai-chatbot",
-    "mgg/ai-chatbot-outline",
-    "mgg/check-small",
-    "mgg/consumption-high",
-    "mgg/consumption-low",
-    "mgg/consumption-medium",
-    "mgg/google-book-large",
-    "mgg/historic-building",
-    "mgg/list-dot",
-    "mi/baseline/account-balance",
-    "mi/baseline/account-balance-wallet",
-    "mi/baseline/add",
-    "mi/baseline/add-circle",
-    "mi/baseline/adobe",
-    "mi/baseline/agriculture",
-    "mi/baseline/alternate-email",
-    "mi/baseline/animation",
-    "mi/baseline/arrow-back",
-    "mi/baseline/arrow-back-ios-new",
-    "mi/baseline/arrow-forward",
-    "mi/baseline/arrow-forward-ios",
-    "mi/baseline/attach-file",
-    "mi/baseline/attachment",
-    "mi/baseline/audiotrack",
-    "mi/baseline/auto-awesome",
-    "mi/baseline/badge",
-    "mi/baseline/block",
-    "mi/baseline/book",
-    "mi/baseline/border-all",
-    "mi/baseline/broken-image",
-    "mi/baseline/calendar-today",
-    "mi/baseline/call",
-    "mi/baseline/cancel",
-    "mi/baseline/category",
-    "mi/baseline/check",
-    "mi/baseline/check-box",
-    "mi/baseline/check-box-outline-blank",
-    "mi/baseline/check-circle",
-    "mi/baseline/chevron-right",
-    "mi/baseline/close",
-    "mi/baseline/contrast",
-    "mi/baseline/css",
-    "mi/baseline/dark-mode",
-    "mi/baseline/delete",
-    "mi/baseline/description",
-    "mi/baseline/desk",
-    "mi/baseline/directions-run",
-    "mi/baseline/directions-walk",
-    "mi/baseline/done",
-    "mi/baseline/done-all",
-    "mi/baseline/downhill-skiing",
-    "mi/baseline/draw",
-    "mi/baseline/eco",
-    "mi/baseline/edit",
-    "mi/baseline/email",
-    "mi/baseline/error",
-    "mi/baseline/expand-more",
-    "mi/baseline/explore",
-    "mi/baseline/favorite",
-    "mi/baseline/favorite-border",
-    "mi/baseline/file-download-done",
-    "mi/baseline/folder",
-    "mi/baseline/folder-zip",
-    "mi/baseline/horizontal-rule",
-    "mi/baseline/indeterminate-check-box",
-    "mi/baseline/info",
-    "mi/baseline/insert-drive-file",
-    "mi/baseline/ios-share",
-    "mi/baseline/keyboard",
-    "mi/baseline/keyboard-arrow-down",
-    "mi/baseline/keyboard-arrow-left",
-    "mi/baseline/keyboard-arrow-right",
-    "mi/baseline/keyboard-arrow-up",
-    "mi/baseline/keyboard-capslock",
-    "mi/baseline/keyboard-command-key",
-    "mi/baseline/keyboard-option-key",
-    "mi/baseline/keyboard-return",
-    "mi/baseline/keyboard-tab",
-    "mi/baseline/light-mode",
-    "mi/baseline/list-alt",
-    "mi/baseline/local-activity",
-    "mi/baseline/location-city",
-    "mi/baseline/lock-open",
-    "mi/baseline/login",
-    "mi/baseline/logout",
-    "mi/baseline/meeting-room",
-    "mi/baseline/more-vert",
-    "mi/baseline/navigate-next",
-    "mi/baseline/north",
-    "mi/baseline/panorama",
-    "mi/baseline/person",
-    "mi/baseline/pets",
-    "mi/baseline/print",
-    "mi/baseline/privacy-tip",
-    "mi/baseline/radio-button-checked",
-    "mi/baseline/radio-button-unchecked",
-    "mi/baseline/remove",
-    "mi/baseline/remove-circle",
-    "mi/baseline/remove-red-eye",
-    "mi/baseline/route",
-    "mi/baseline/search",
-    "mi/baseline/send",
-    "mi/baseline/settings",
-    "mi/baseline/south",
-    "mi/baseline/sports",
-    "mi/baseline/sports-soccer",
-    "mi/baseline/stadium",
-    "mi/baseline/terminal",
-    "mi/baseline/text-format",
-    "mi/baseline/text-rotate-up",
-    "mi/baseline/timer",
-    "mi/baseline/tv",
-    "mi/baseline/undo",
-    "mi/baseline/unfold-less",
-    "mi/baseline/unfold-more",
-    "mi/baseline/vertical-align-bottom",
-    "mi/baseline/vertical-align-top",
-    "mi/baseline/videocam",
-    "mi/baseline/visibility",
-    "mi/baseline/visibility-off",
-    "mi/baseline/warning",
-    "mi/baseline/warning-amber",
-    "mi/baseline/web",
-    "mi/baseline/wrap-text",
-    "mi/baseline/wysiwyg",
-    "mi/outline/auto-awesome",
-    "mi/outline/backspace",
-    "mi/outline/circle",
-    "mi/outline/dark-mode",
-    "mi/outline/help-outline",
-    "mi/outline/ios-share",
-    "mi/outline/mic",
-    "mi/outline/mic-off",
-    "mi/outline/policy",
-    "mi/outline/schedule",
-    "mi/outline/thumb-down",
-    "mi/outline/thumb-up",
-    "mi/round/arrow-circle-down",
-    "mi/round/email",
-    "mi/round/menu",
-    "mi/round/more-vert",
-    "mi/round/person",
-    "mi/sharp/window"
-]