@muonic/muon 0.0.2-experimental-186-333208e.0 → 0.0.2-experimental-188-d0239e8.0

package/css/global.css

@@ -3,23 +3,33 @@
 /**
   * [1] Apply a natural box layout model to all elements
   */
-html {
-  box-sizing: border-box; /* [1] */
-}
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box; /* [1] */
+  }
 
-*,
-*::before,
-*::after {
-  box-sizing: inherit; /* [1] */
-}
+/**
+  * [1] Remove the user agent margin
+  * [2] Default font family and base size
+  * [3] Disallow any content to overflow the width
+  * [4] TODO: Tokenise the global line-height
+  * [5] TODO: Investigate this property as it may not be necessary
+  */
+  body {
+    margin: 0; /* [1] */
+    font-family: $THEME_FONT_FAMILY_DEFAULT; /* [2] */
+    font-size: 16px; /* [2] */
+    overflow-x: hidden; /* [3] */
+    line-height: 1.5; /* [4] */
+    min-height: 100vh; /* [5] */
+  }
 
-body {
-  margin: 0;
-  font-family: $THEME_FONT_FAMILY_DEFAULT;
-  font-size: 16px;
-  overflow-x: hidden;
-  line-height: 1.5;
-  min-height: 100vh;
-}
+  /**
+    * [1] Reset the user agent margin to 0 for figure
+    */
+  figure {
+    margin: 0; /* [1] */
+  }
 
-/* global.css END */
+  /* global.css END */

package/directives/svg-loader-directive.js

@@ -1,4 +1,7 @@
 import { AsyncDirective, directive, html, unsafeSVG, until } from '@muonic/muon';
+import {
+  SVG_CONFIG_CACHE
+} from '@muon/tokens';
 
 export class SVGLoaderDirective extends AsyncDirective {
   constructor(partInfo) {
@@ -20,7 +23,7 @@ export class SVGLoaderDirective extends AsyncDirective {
 
     try {
       cacheAvailable = 'caches' in self;
-      cache = cacheAvailable && await caches?.open('muon');
+      cache = cacheAvailable && await caches?.open(SVG_CONFIG_CACHE);
       const cacheData = await cache.match(url);
 
       response = cache && cacheData ? cacheData : undefined;
@@ -30,10 +33,9 @@ export class SVGLoaderDirective extends AsyncDirective {
     }
 
     if (!response) {
-      response = await window.fetch(url);
-
-      response = new Response(response.body, response);
-      response.headers.append('Cache-Control', 'max-age=100000');
+      response = await window.fetch(url, {
+        cache: 'no-store'
+      });
 
       if (cache && response.body) {
         cache.put(url, response.clone())

package/directives/tokens.json

@@ -0,0 +1,9 @@
+{
+  "svg": {
+    "config": {
+      "cache": {
+        "value": "muon"
+      }
+    }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@muonic/muon",
-  "version": "0.0.2-experimental-186-333208e.0",
+  "version": "0.0.2-experimental-188-d0239e8.0",
   "description": "",
   "main": "index.js",
   "scripts": {

package/scripts/style-dictionary.mjs

@@ -9,7 +9,7 @@ const root = path.join(__filename, '..', '..');
 const buildPath = path.join(root, 'build', 'tokens');
 
 export default {
-  include: [root + '/tokens/**/*.js', root + '/tokens/**/*.json', root + '/tokens/*.json', root + '/components/**/**/config-tokens.json', root + '/components/**/**/design-tokens.json'],
+  include: [root + '/tokens/**/*.js', root + '/tokens/**/*.json', root + '/tokens/*.json', root + '/components/**/**/config-tokens.json', root + '/components/**/**/design-tokens.json', root + '/directives/tokens.json'],
   platforms: {
     js: {
       buildPath: path.join(buildPath, 'es6/'),