@brad-frost-web/eddie-web-components 0.17.0 → 0.19.0

package/.eslintignore

@@ -0,0 +1,5 @@
+node_modules/*
+docs/*
+docs-src/*
+rollup-config.js
+custom-elements.json

package/.eslintrc.js

@@ -0,0 +1,67 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+  },
+  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier', 'plugin:storybook/recommended'],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaVersion: 2020,
+    sourceType: 'module',
+  },
+  plugins: ['@typescript-eslint', 'decorator-position', 'prettier'],
+  rules: {
+    'no-prototype-builtins': 'off',
+    '@typescript-eslint/ban-types': 'off',
+    '@typescript-eslint/explicit-function-return-type': 'off',
+    '@typescript-eslint/explicit-module-boundary-types': 'off',
+    '@typescript-eslint/no-explicit-any': 'error',
+    '@typescript-eslint/no-empty-function': 'off',
+    '@typescript-eslint/no-non-null-assertion': 'off',
+    eqeqeq: 'error',
+    'padding-line-between-statements': [
+      'error',
+      {
+        blankLine: 'always',
+        prev: '*',
+        next: 'return',
+      },
+    ],
+    'max-len': [
+      'error',
+      {
+        code: 150,
+        tabWidth: 2,
+      },
+    ],
+    'decorator-position/decorator-position': [
+      'error',
+      {
+        properties: 'above',
+      },
+    ],
+    '@typescript-eslint/no-unused-vars': [
+      'warn',
+      {
+        argsIgnorePattern: '^_',
+      },
+    ],
+    'prettier/prettier': 'error',
+  },
+  overrides: [
+    {
+      files: ['**/*.ts', '**/*.tsx', '**/*.js'],
+    },
+    {
+      files: [
+        '*_test.ts',
+        '**/custom_typings/*.ts',
+        'packages/lit-ssr/src/test/integration/tests/**',
+        'packages/lit-ssr/src/lib/util/parse5-utils.ts',
+      ],
+      rules: {
+        '@typescript-eslint/no-explicit-any': 'off',
+      },
+    },
+  ],
+};

package/.nvmrc

@@ -0,0 +1 @@
+v16.16.0

package/.storybook/BFWTheme.js

@@ -0,0 +1,8 @@
+import {create} from 'storybook/theming';
+
+export default create({
+  base: 'light',
+  brandTitle: `<img src="images/Logo.svg" alt="BFW Design System" style="max-width: 6rem;" />`,
+  brandUrl: '/',
+  brandTarget: '_self',
+});

package/.storybook/assets/images/1200x650.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="650" viewBox="0 0 1200 650"><rect width="100%" height="100%" fill="#DDDDDD"/><path fill="#999999" d="M290.395 362.93h18.33v13.04h-56.4v-13.04h20.66V303.5q0-3.53.21-7.27l-14.66 12.27q-1.27.99-2.5 1.24-1.24.24-2.33.03t-1.94-.74-1.27-1.16l-5.5-7.55 31.09-26.43h14.31zm70.15-3.18h26.16q2.82 0 4.47 1.59 1.66 1.59 1.66 4.2v10.43h-69.93v-5.78q0-1.76.74-3.7t2.36-3.49l30.95-31.02q3.87-3.95 6.94-7.55 3.07-3.59 5.11-7.12 2.05-3.52 3.14-7.15t1.09-7.65q0-3.67-1.06-6.45-1.05-2.79-2.99-4.69t-4.65-2.86q-2.72-.95-6.1-.95-3.1 0-5.75.88-2.64.89-4.69 2.47-2.04 1.59-3.45 3.7-1.41 2.12-2.12 4.66-1.19 3.24-3.1 4.3-1.9 1.05-5.5.49l-9.16-1.62q1.06-7.33 4.09-12.87 3.03-5.53 7.58-9.23 4.54-3.7 10.43-5.57t12.65-1.87q7.05 0 12.91 2.08 5.85 2.08 10.01 5.89 4.16 3.8 6.48 9.16 2.33 5.36 2.33 11.91 0 5.64-1.66 10.44-1.65 4.79-4.44 9.16-2.78 4.37-6.52 8.46t-7.83 8.32l-22.98 23.48q3.31-.99 6.59-1.52t6.24-.53M477.575 325q0 13.32-2.85 23.16-2.86 9.83-7.9 16.25-5.04 6.41-11.91 9.55-6.88 3.14-14.84 3.14-7.97 0-14.77-3.14-6.81-3.14-11.81-9.55-5.01-6.42-7.83-16.25-2.82-9.84-2.82-23.16 0-13.4 2.82-23.2t7.83-16.21q5-6.42 11.81-9.55 6.8-3.14 14.77-3.14 7.96 0 14.84 3.14 6.87 3.13 11.91 9.55 5.04 6.41 7.9 16.21 2.85 9.8 2.85 23.2m-17.98 0q0-11.07-1.62-18.33t-4.33-11.56q-2.72-4.3-6.24-6.03-3.53-1.73-7.33-1.73-3.74 0-7.23 1.73t-6.17 6.03-4.26 11.56q-1.59 7.26-1.59 18.33t1.59 18.33q1.58 7.26 4.26 11.56t6.17 6.03 7.23 1.73q3.8 0 7.33-1.73 3.52-1.73 6.24-6.03 2.71-4.3 4.33-11.56t1.62-18.33m99.76 0q0 13.32-2.85 23.16-2.86 9.83-7.9 16.25-5.04 6.41-11.91 9.55-6.88 3.14-14.84 3.14-7.97 0-14.77-3.14-6.81-3.14-11.81-9.55-5.01-6.42-7.83-16.25-2.82-9.84-2.82-23.16 0-13.4 2.82-23.2t7.83-16.21q5-6.42 11.81-9.55 6.8-3.14 14.77-3.14 7.96 0 14.84 3.14 6.87 3.13 11.91 9.55 5.04 6.41 7.9 16.21 2.85 9.8 2.85 23.2m-17.98 0q0-11.07-1.62-18.33t-4.33-11.56q-2.72-4.3-6.24-6.03-3.53-1.73-7.33-1.73-3.74 0-7.23 1.73t-6.17 6.03-4.26 11.56q-1.59 7.26-1.59 18.33t1.59 18.33q1.58 7.26 4.26 11.56t6.17 6.03 7.23 1.73q3.8 0 7.33-1.73 3.52-1.73 6.24-6.03 2.71-4.3 4.33-11.56t1.62-18.33m129.94 27.63-9.24 9.1-23.9-23.9-24.11 24.04-9.24-9.09 24.12-24.19-22.99-22.98 9.17-9.16 22.98 22.98 22.84-22.84 9.31 9.16-22.91 22.91zm108.92-78.6-30.25 37.01-3.52 4.37q2.96-1.48 6.38-2.29t7.37-.81q5.78 0 11.24 1.9 5.47 1.91 9.62 5.75 4.16 3.84 6.7 9.55t2.54 13.32q0 7.13-2.61 13.36-2.61 6.24-7.33 10.9-4.72 4.65-11.39 7.33-6.66 2.68-14.7 2.68-8.17 0-14.66-2.61t-11.07-7.3-7.01-11.28-2.43-14.63q0-7.19 2.92-14.77 2.93-7.57 9.06-15.75l24.32-32.64q1.27-1.7 3.7-2.89 2.44-1.2 5.61-1.2zm-26.3 88.83q4.16 0 7.65-1.41t5.99-3.95q2.51-2.54 3.92-5.96t1.41-7.44q0-4.37-1.34-7.86t-3.81-5.92-5.92-3.7q-3.46-1.27-7.62-1.27t-7.54 1.41-5.78 3.91q-2.4 2.51-3.74 5.93-1.34 3.41-1.34 7.36 0 4.23 1.17 7.72 1.16 3.49 3.45 5.96t5.68 3.84q3.38 1.38 7.82 1.38m73.25-73.04-3.59 21.22q3.38-.71 6.48-1.02 3.1-.32 5.99-.32 8.04 0 14.18 2.4 6.13 2.39 10.29 6.62t6.27 9.91q2.12 5.67 2.12 12.23 0 8.11-2.86 14.81-2.85 6.69-7.93 11.45-5.07 4.76-12.02 7.37-6.94 2.61-15.12 2.61-4.8 0-9.1-.99t-8.07-2.64q-3.77-1.66-6.98-3.81t-5.74-4.55l5.35-7.4q1.7-2.4 4.45-2.4 1.76 0 3.59 1.13t4.2 2.47q2.36 1.34 5.57 2.47 3.2 1.12 7.72 1.12 4.79 0 8.46-1.55 3.66-1.55 6.09-4.33 2.44-2.79 3.67-6.63t1.23-8.35q0-8.32-4.83-13.01-4.82-4.69-14.27-4.69-7.26 0-14.88 2.68l-10.85-3.1 8.46-49.49h50.33v7.4q0 3.74-2.32 6.06-2.33 2.33-7.9 2.33zM955.005 325q0 13.32-2.86 23.16-2.85 9.83-7.89 16.25-5.04 6.41-11.92 9.55-6.87 3.14-14.84 3.14-7.96 0-14.77-3.14-6.8-3.14-11.81-9.55-5-6.42-7.82-16.25-2.82-9.84-2.82-23.16 0-13.4 2.82-23.2t7.82-16.21q5.01-6.42 11.81-9.55 6.81-3.14 14.77-3.14 7.97 0 14.84 3.14 6.88 3.13 11.92 9.55 5.04 6.41 7.89 16.21 2.86 9.8 2.86 23.2m-17.98 0q0-11.07-1.62-18.33t-4.34-11.56q-2.71-4.3-6.24-6.03-3.52-1.73-7.33-1.73-3.73 0-7.22 1.73t-6.17 6.03-4.27 11.56q-1.58 7.26-1.58 18.33t1.58 18.33q1.59 7.26 4.27 11.56t6.17 6.03 7.22 1.73q3.81 0 7.33-1.73 3.53-1.73 6.24-6.03 2.72-4.3 4.34-11.56t1.62-18.33"/></svg>

package/.storybook/assets/images/120x40.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="120" height="40" viewBox="0 0 120 40"><rect width="100%" height="100%" fill="#DDDDDD"/><path fill="#999999" d="M29.305 25.11h2.47v1.76h-7.6v-1.76h2.78V17.1q0-.47.03-.97l-1.98 1.65q-.17.13-.34.16-.16.04-.31.01t-.26-.1-.17-.16l-.74-1.01 4.19-3.57h1.93zm9.45-.43h3.52q.38 0 .61.22.22.21.22.56v1.41h-9.42v-.78q0-.24.09-.5.1-.26.32-.47l4.17-4.18q.53-.53.94-1.01.41-.49.69-.96.27-.48.42-.97t.15-1.03q0-.49-.14-.87-.15-.37-.41-.63t-.63-.38q-.36-.13-.82-.13-.42 0-.77.12-.36.11-.63.33-.28.21-.47.5-.19.28-.28.62-.16.44-.42.58-.26.15-.74.07l-1.24-.22q.15-.99.55-1.73.41-.75 1.02-1.25.62-.5 1.41-.75t1.71-.25q.95 0 1.73.28.79.28 1.35.79.56.52.88 1.24.31.72.31 1.61 0 .76-.22 1.4-.23.65-.6 1.24-.38.58-.88 1.14-.5.55-1.05 1.12l-3.1 3.16q.45-.13.89-.2.44-.08.84-.08M54.525 20q0 1.8-.39 3.12-.38 1.33-1.06 2.19-.68.87-1.61 1.29-.92.42-2 .42-1.07 0-1.99-.42-.91-.42-1.59-1.29-.67-.86-1.05-2.19-.38-1.32-.38-3.12t.38-3.12 1.05-2.19q.68-.86 1.59-1.29.92-.42 1.99-.42 1.08 0 2 .42.93.43 1.61 1.29.68.87 1.06 2.19.39 1.32.39 3.12m-2.42 0q0-1.49-.22-2.47t-.59-1.56q-.36-.58-.84-.81-.47-.23-.99-.23-.5 0-.97.23t-.83.81-.58 1.56q-.21.98-.21 2.47t.21 2.47q.22.98.58 1.56t.83.81.97.23q.52 0 .99-.23.48-.23.84-.81.37-.58.59-1.56t.22-2.47m17.5 3.73-1.24 1.22-3.22-3.22-3.25 3.24-1.24-1.23 3.24-3.25-3.09-3.1 1.23-1.24 3.1 3.1 3.08-3.08 1.25 1.24-3.09 3.09zm8.23-2.04h4.18V17.2q0-.64.09-1.41zm6.22 0h1.73v1.36q0 .19-.12.33t-.35.14h-1.26v3.35h-2.04v-3.35h-5.79q-.24 0-.42-.15t-.23-.37l-.25-1.18 6.51-8.7h2.22zM96.815 20q0 1.8-.38 3.12-.39 1.33-1.07 2.19-.68.87-1.6 1.29-.93.42-2 .42-1.08 0-1.99-.42-.92-.42-1.59-1.29-.68-.86-1.06-2.19-.38-1.32-.38-3.12t.38-3.12 1.06-2.19q.67-.86 1.59-1.29.91-.42 1.99-.42 1.07 0 2 .42.92.43 1.6 1.29.68.87 1.07 2.19.38 1.32.38 3.12m-2.42 0q0-1.49-.22-2.47t-.58-1.56q-.37-.58-.84-.81-.48-.23-.99-.23t-.98.23-.83.81-.57 1.56q-.22.98-.22 2.47t.22 2.47q.21.98.57 1.56t.83.81.98.23.99-.23q.47-.23.84-.81.36-.58.58-1.56t.22-2.47"/></svg>

package/.storybook/assets/images/600x400.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="600" height="400" viewBox="0 0 600 400"><rect width="100%" height="100%" fill="#DDDDDD"/><path fill="#999999" d="m155.52 171.08-17.16 21-2 2.48q1.68-.84 3.62-1.3t4.18-.46q3.28 0 6.38 1.08t5.46 3.26 3.8 5.42 1.44 7.56q0 4.04-1.48 7.58t-4.16 6.18-6.46 4.16-8.34 1.52q-4.64 0-8.32-1.48t-6.28-4.14-3.98-6.4-1.38-8.3q0-4.08 1.66-8.38t5.14-8.94l13.8-18.52q.72-.96 2.1-1.64t3.18-.68zm-14.92 50.4q2.36 0 4.34-.8t3.4-2.24 2.22-3.38.8-4.22q0-2.48-.76-4.46t-2.16-3.36-3.36-2.1-4.32-.72-4.28.8-3.28 2.22-2.12 3.36-.76 4.18q0 2.4.66 4.38t1.96 3.38 3.22 2.18 4.44.78M208.28 200q0 7.56-1.62 13.14t-4.48 9.22-6.76 5.42-8.42 1.78-8.38-1.78-6.7-5.42-4.44-9.22-1.6-13.14q0-7.6 1.6-13.16t4.44-9.2 6.7-5.42 8.38-1.78 8.42 1.78 6.76 5.42 4.48 9.2 1.62 13.16m-10.2 0q0-6.28-.92-10.4t-2.46-6.56-3.54-3.42-4.16-.98q-2.12 0-4.1.98t-3.5 3.42-2.42 6.56-.9 10.4.9 10.4 2.42 6.56 3.5 3.42 4.1.98q2.16 0 4.16-.98t3.54-3.42 2.46-6.56.92-10.4m56.6 0q0 7.56-1.62 13.14t-4.48 9.22-6.76 5.42-8.42 1.78-8.38-1.78-6.7-5.42-4.44-9.22-1.6-13.14q0-7.6 1.6-13.16t4.44-9.2 6.7-5.42 8.38-1.78 8.42 1.78 6.76 5.42 4.48 9.2 1.62 13.16m-10.2 0q0-6.28-.92-10.4t-2.46-6.56-3.54-3.42-4.16-.98q-2.12 0-4.1.98t-3.5 3.42-2.42 6.56-.9 10.4.9 10.4 2.42 6.56 3.5 3.42 4.1.98q2.16 0 4.16-.98t3.54-3.42 2.46-6.56.92-10.4m73.72 15.68-5.24 5.16-13.56-13.56-13.68 13.64-5.24-5.16 13.68-13.72L281.12 189l5.2-5.2 13.04 13.04 12.96-12.96 5.28 5.2-13 13zm34.64-8.56h17.6V188.2q0-2.68.36-5.92zm26.2 0h7.28v5.72q0 .8-.52 1.38t-1.48.58h-5.28v14.12h-8.6V214.8h-24.4q-1 0-1.76-.62t-.96-1.54l-1.04-5 27.4-36.6h9.36zm53.72-7.12q0 7.56-1.62 13.14t-4.48 9.22-6.76 5.42-8.42 1.78-8.38-1.78-6.7-5.42-4.44-9.22-1.6-13.14q0-7.6 1.6-13.16t4.44-9.2 6.7-5.42 8.38-1.78 8.42 1.78 6.76 5.42 4.48 9.2 1.62 13.16m-10.2 0q0-6.28-.92-10.4t-2.46-6.56-3.54-3.42-4.16-.98q-2.12 0-4.1.98t-3.5 3.42-2.42 6.56-.9 10.4.9 10.4 2.42 6.56 3.5 3.42 4.1.98q2.16 0 4.16-.98t3.54-3.42 2.46-6.56.92-10.4m56.6 0q0 7.56-1.62 13.14t-4.48 9.22-6.76 5.42-8.42 1.78-8.38-1.78-6.7-5.42-4.44-9.22-1.6-13.14q0-7.6 1.6-13.16t4.44-9.2 6.7-5.42 8.38-1.78 8.42 1.78 6.76 5.42 4.48 9.2 1.62 13.16m-10.2 0q0-6.28-.92-10.4t-2.46-6.56-3.54-3.42-4.16-.98q-2.12 0-4.1.98t-3.5 3.42-2.42 6.56-.9 10.4.9 10.4 2.42 6.56 3.5 3.42 4.1.98q2.16 0 4.16-.98t3.54-3.42 2.46-6.56.92-10.4"/></svg>

package/.storybook/assets/images/800x400.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="800" height="400" viewBox="0 0 800 400"><rect width="100%" height="100%" fill="#DDDDDD"/><path fill="#999999" d="M189.055 228.94q3.23 0 5.67-.93t4.11-2.57 2.52-3.92.85-4.93q0-6.31-3.5-9.54t-9.65-3.23-9.64 3.23q-3.5 3.23-3.5 9.54 0 2.65.85 4.93.84 2.28 2.51 3.92t4.11 2.57 5.67.93m0-58.25q-2.91 0-5.03.9t-3.53 2.41q-1.4 1.52-2.06 3.48-.67 1.96-.67 4.13 0 2.28.56 4.43.56 2.14 1.88 3.81 1.33 1.67 3.5 2.68t5.35 1.01 5.35-1.01q2.18-1.01 3.5-2.68 1.33-1.67 1.88-3.81.56-2.15.56-4.43 0-2.17-.69-4.13t-2.07-3.48q-1.37-1.51-3.49-2.41t-5.04-.9m12.93 27.67q7 2.28 10.34 6.97t3.34 11.47q0 5.09-1.94 9.22-1.93 4.14-5.43 7.05-3.5 2.92-8.4 4.51t-10.84 1.59q-5.93 0-10.84-1.59-4.9-1.59-8.4-4.51-3.5-2.91-5.43-7.05-1.93-4.13-1.93-9.22 0-6.78 3.33-11.47 3.34-4.69 10.34-6.97-5.57-2.33-8.35-6.63-2.78-4.29-2.78-10.33 0-4.35 1.78-8.11 1.77-3.76 4.95-6.55 3.18-2.78 7.61-4.34 4.42-1.57 9.72-1.57t9.73 1.57q4.42 1.56 7.6 4.34 3.18 2.79 4.96 6.55 1.77 3.76 1.77 8.11 0 6.04-2.78 10.33-2.78 4.3-8.35 6.63m76.64 1.64q0 10.02-2.14 17.41-2.15 7.4-5.94 12.22t-8.96 7.18-11.15 2.36q-5.99 0-11.11-2.36-5.11-2.36-8.88-7.18-3.76-4.82-5.88-12.22-2.12-7.39-2.12-17.41 0-10.07 2.12-17.44 2.12-7.36 5.88-12.19 3.77-4.82 8.88-7.18 5.12-2.36 11.11-2.36 5.98 0 11.15 2.36t8.96 7.18q3.79 4.83 5.94 12.19 2.14 7.37 2.14 17.44m-13.51 0q0-8.32-1.22-13.78t-3.26-8.69-4.69-4.53-5.51-1.3q-2.81 0-5.44 1.3-2.62 1.3-4.63 4.53-2.02 3.23-3.21 8.69t-1.19 13.78 1.19 13.78 3.21 8.69q2.01 3.24 4.63 4.53 2.63 1.3 5.44 1.3 2.86 0 5.51-1.3 2.65-1.29 4.69-4.53 2.04-3.23 3.26-8.69t1.22-13.78m74.99 0q0 10.02-2.14 17.41-2.15 7.4-5.94 12.22t-8.96 7.18-11.15 2.36q-5.99 0-11.11-2.36-5.11-2.36-8.88-7.18-3.76-4.82-5.88-12.22-2.12-7.39-2.12-17.41 0-10.07 2.12-17.44 2.12-7.36 5.88-12.19 3.77-4.82 8.88-7.18 5.12-2.36 11.11-2.36 5.98 0 11.15 2.36t8.96 7.18q3.79 4.83 5.94 12.19 2.14 7.37 2.14 17.44m-13.51 0q0-8.32-1.22-13.78t-3.26-8.69-4.69-4.53-5.51-1.3q-2.81 0-5.44 1.3-2.62 1.3-4.63 4.53-2.02 3.23-3.21 8.69t-1.19 13.78 1.19 13.78 3.21 8.69q2.01 3.24 4.63 4.53 2.63 1.3 5.44 1.3 2.86 0 5.51-1.3 2.65-1.29 4.69-4.53 2.04-3.23 3.26-8.69t1.22-13.78m97.68 20.78-6.95 6.83-17.96-17.96-18.13 18.07-6.94-6.84 18.12-18.18-17.28-17.27 6.89-6.89 17.28 17.27 17.17-17.17 7 6.89-17.22 17.23zm45.89-11.34h23.32v-25.07q0-3.55.48-7.85zm34.72 0h9.64v7.57q0 1.06-.68 1.83-.69.77-1.97.77h-6.99v18.71h-11.4v-18.71h-32.33q-1.32 0-2.33-.82t-1.27-2.04l-1.38-6.63 36.31-48.49h12.4zm71.18-9.44q0 10.02-2.15 17.41-2.15 7.4-5.93 12.22-3.79 4.82-8.96 7.18t-11.16 2.36-11.1-2.36q-5.12-2.36-8.88-7.18t-5.88-12.22q-2.12-7.39-2.12-17.41 0-10.07 2.12-17.44 2.12-7.36 5.88-12.19 3.76-4.82 8.88-7.18 5.11-2.36 11.1-2.36t11.16 2.36 8.96 7.18q3.78 4.83 5.93 12.19 2.15 7.37 2.15 17.44m-13.52 0q0-8.32-1.22-13.78t-3.26-8.69-4.69-4.53-5.51-1.3q-2.81 0-5.43 1.3t-4.64 4.53q-2.01 3.23-3.2 8.69-1.2 5.46-1.2 13.78t1.2 13.78q1.19 5.46 3.2 8.69 2.02 3.24 4.64 4.53 2.62 1.3 5.43 1.3 2.86 0 5.51-1.3 2.65-1.29 4.69-4.53 2.04-3.23 3.26-8.69t1.22-13.78m75 0q0 10.02-2.15 17.41-2.15 7.4-5.93 12.22-3.79 4.82-8.96 7.18t-11.16 2.36-11.1-2.36q-5.12-2.36-8.88-7.18t-5.88-12.22q-2.12-7.39-2.12-17.41 0-10.07 2.12-17.44 2.12-7.36 5.88-12.19 3.76-4.82 8.88-7.18 5.11-2.36 11.1-2.36t11.16 2.36 8.96 7.18q3.78 4.83 5.93 12.19 2.15 7.37 2.15 17.44m-13.52 0q0-8.32-1.22-13.78t-3.26-8.69-4.69-4.53-5.51-1.3q-2.81 0-5.43 1.3t-4.64 4.53q-2.01 3.23-3.2 8.69-1.2 5.46-1.2 13.78t1.2 13.78q1.19 5.46 3.2 8.69 2.02 3.24 4.64 4.53 2.62 1.3 5.43 1.3 2.86 0 5.51-1.3 2.65-1.29 4.69-4.53 2.04-3.23 3.26-8.69t1.22-13.78"/></svg>

package/.storybook/assets/images/Logo.svg

@@ -0,0 +1,8 @@
+<svg width="502" height="502" viewBox="0 0 502 502" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="251.177" cy="250.62" r="250.62" fill="#BE6700"/>
+<circle cx="251.177" cy="250.62" r="210.521" fill="#FA8700"/>
+<circle cx="251.177" cy="250.62" r="170.422" fill="#FFA438"/>
+<circle cx="251.177" cy="250.62" r="130.322" fill="#FFC075"/>
+<circle cx="251.177" cy="250.62" r="90.2232" fill="#FFDCB3"/>
+<path d="M301.301 250.62C301.301 278.303 278.859 300.744 251.177 300.744C223.494 300.744 201.053 278.303 201.053 250.62C201.053 222.937 223.494 200.496 251.177 200.496C278.859 200.496 301.301 222.937 301.301 250.62Z" fill="#FFF8F0"/>
+</svg>

package/.storybook/components/f-po/f-po.scss

@@ -0,0 +1,17 @@
+@use '@brad-frost-web/eddie-design-tokens/core/scss/component.scss' as *;
+@use 'sass:color';
+
+:host {
+  width: 100%;
+}
+.f-po {
+  @include ed-theme-typography-body-default;
+  background: #e8f4f8;
+  border: 1px dashed #69b3e7;
+  width: 100%;
+  border-radius: 5px;
+  padding: 1rem;
+  font-weight: bold;
+  text-align: center;
+  color: color.adjust(#69b3e7, $lightness: -20%);
+}

package/.storybook/components/f-po/f-po.ts

@@ -0,0 +1,33 @@
+import { LitElement, html, unsafeCSS } from 'lit';
+import { property } from 'lit/decorators.js';
+import styles from './f-po.scss?inline';
+
+export class FPO extends LitElement {
+  static get styles() {
+    return unsafeCSS(styles.toString().replace(':root', ':host'));
+  }
+
+  @property()
+  styleModifier?: string;
+
+  @property()
+  inlineStyle?: string;
+
+  render() {
+    return html`
+      <div class="f-po ${this.styleModifier}" style="${this.inlineStyle}">
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+
+if (customElements.get('f-po') === undefined) {
+  customElements.define('f-po', FPO);
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'f-po': FPO;
+  }
+}

package/.storybook/components/system-docs/system-docs.scss

@@ -0,0 +1 @@
+@use '../../../components/text-passage/text-passage-light-dom.scss';

package/.storybook/components/system-docs/system-docs.stories.ts

@@ -0,0 +1,31 @@
+import '@brad-frost-web/eddie-web-components/components/layout-container/layout-container';
+import MarkdownIt from 'markdown-it';
+import Code from '../../../../../docs/CODE_GUIDELINES.md?raw';
+import ThemingDocus from '../../../../../docs/THEMING.md?raw';
+import TokenDocs from '../../../../../docs/TOKENS.md?raw';
+import './system-docs';
+
+export default {
+  title: 'Documentation/Guidelines',
+  component: 'system-docs',
+  tags: ['!autodocs']
+};
+
+const md = new MarkdownIt({
+  html: true
+});
+
+export const CodeGuidelines = () =>
+  `<system-docs><ed-layout-container><ed-text-passage><ed-linelength-container>` +
+  md.render(Code) +
+  `</ed-linelength-container></ed-text-passage></ed-layout-container></system-docs>`;
+
+export const Theming = () =>
+  `<system-docs><ed-layout-container><ed-text-passage><ed-linelength-container>` +
+  md.render(ThemingDocus) +
+  `</ed-linelength-container></ed-text-passage></ed-layout-container></system-docs>`;
+
+export const Tokens = () =>
+  `<system-docs><ed-layout-container><ed-text-passage><ed-linelength-container>` +
+  md.render(TokenDocs) +
+  `</ed-linelength-container></ed-text-passage></ed-layout-container></system-docs>`;

package/.storybook/components/system-docs/system-docs.ts

@@ -0,0 +1,31 @@
+import { LitElement, html, unsafeCSS } from 'lit';
+import Prism from 'prismjs';
+import styles from './system-docs.scss?inline';
+
+export class SystemDocs extends LitElement {
+  static get styles() {
+    return unsafeCSS(styles);
+  }
+
+  firstUpdated() {
+    Prism.highlightAll();
+  }
+
+  createRenderRoot() {
+    return this;
+  }
+
+  render() {
+    return html` <div class="system-docs"><slot></slot></div> `;
+  }
+}
+
+if (customElements.get('system-docs') === undefined) {
+  customElements.define('system-docs', SystemDocs);
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'system-docs': SystemDocs;
+  }
+}

package/.storybook/components/tier-1-tokens/animation.ts

@@ -0,0 +1,123 @@
+import {html, LitElement, unsafeCSS} from 'lit';
+import {customElement, state} from 'lit/decorators.js';
+import '../token-specimen/token-specimen';
+import '../../../components/heading/heading';
+import '../../../components/section/section';
+import '../../../components/text-passage/text-passage';
+import styles from './tier-1-tokens.scss?inline';
+
+@customElement('tier-1-animation')
+export class Tier1Animation extends LitElement {
+  static get styles() {
+    return unsafeCSS(styles);
+  }
+
+  /**
+   * Tokens state that loads in JSON parsed theme file
+   */
+  @state() tokens: any;
+
+  /**
+   * Loads theme tokens when they become available
+   * Uses a polling approach to check for themeTokens availability
+   */
+  connectedCallback(): void {
+    super.connectedCallback();
+    this.loadThemeTokens();
+  }
+
+  /**
+   * Loads theme tokens when they become available
+   * 1) Check if themeTokens is already available
+   * 2) If not, check for themeTokens availability again
+   */
+  private loadThemeTokens(): void {
+    // Check if themeTokens is already available
+    if (window['themeTokens']) {
+      this.tokens = JSON.parse(window['themeTokens']) ?? {};
+      return;
+    }
+
+    // Poll for themeTokens availability
+    const checkForTokens = () => {
+      if (window['themeTokens']) {
+        this.tokens = JSON.parse(window['themeTokens']) ?? {};
+      } else {
+        requestAnimationFrame(checkForTokens);
+      }
+    };
+
+    requestAnimationFrame(checkForTokens);
+  }
+
+  filterTokens(prefix) {
+    if (!this.tokens) return [];
+    const filtered = Object.entries(this.tokens)
+      .filter(([name]) => name.startsWith(prefix))
+      .map(([name, value]) => {
+        return {
+          name: `--${name}`,
+          value: value,
+          comment: '',
+        };
+      });
+
+    return filtered;
+  }
+
+  render() {
+    return html`
+      <div class="tier-1-animation" style="padding: 2rem;">
+        <ed-heading tagName="h1" variant="headline-lg">Animation</ed-heading>
+        <ed-text-passage>
+          <p>Animation token description</p>
+        </ed-text-passage>
+        <ed-section>
+          <ed-heading slot="header" tagName="h2" variant="title-default">Animation Duration</ed-heading>
+          <ed-text-passage slot="header"> <p>Animation token description/p></p></ed-text-passage>
+          <ul>
+            ${this.filterTokens('ed-animation-duration').map((item) => {
+              return html`
+                <li>
+                  <token-specimen
+                    variant="animation-move"
+                    name="${item.name}"
+                    value="${item.value}"
+                    inlineStyle="transition-duration: ${item.value}"
+                  ></token-specimen>
+                </li>
+              `;
+            })}
+          </ul>
+        </ed-section>
+
+        <ed-section>
+          <ed-heading slot="header" tagName="h2" variant="title-default">Animation Ease</ed-heading>
+          <ed-text-passage slot="header">
+            <p>Animation token description</p>
+          </ed-text-passage>
+          <ul>
+            ${this.filterTokens('ed-animation-easing').map((item) => {
+              return html`
+                <li>
+                  <token-specimen
+                    variant="animation-fade"
+                    name="${item.name}"
+                    value="${item.value}"
+                    inlineStyle="transition-timing-function: var(${item.name}"
+                  ></token-specimen>
+                </li>
+              `;
+            })}
+          </ul>
+        </ed-section>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'tier-1-animation': Tier1Animation;
+  }
+}

package/.storybook/components/tier-1-tokens/border.ts

@@ -0,0 +1,127 @@
+import {html, LitElement, unsafeCSS} from 'lit';
+import {customElement, state} from 'lit/decorators.js';
+
+import '../token-specimen/token-specimen';
+import styles from './tier-1-tokens.scss?inline';
+import '../../../components/heading/heading';
+import '../../../components/section/section';
+import '../../../components/text-passage/text-passage';
+
+@customElement('tier-1-border')
+export class Tier1Border extends LitElement {
+  static get styles() {
+    return unsafeCSS(styles);
+  }
+
+  /**
+   * Tokens state that loads in JSON parsed theme file
+   */
+  @state() tokens: any;
+
+  /**
+   * Loads theme tokens when they become available
+   * Uses a polling approach to check for themeTokens availability
+   */
+  connectedCallback(): void {
+    super.connectedCallback();
+    this.loadThemeTokens();
+  }
+
+  /**
+   * Loads theme tokens when they become available
+   * 1) Check if themeTokens is already available
+   * 2) If not, check for themeTokens availability again
+   */
+  private loadThemeTokens(): void {
+    // Check if themeTokens is already available
+    if (window['themeTokens']) {
+      this.tokens = JSON.parse(window['themeTokens']) ?? {};
+      return;
+    }
+
+    // Poll for themeTokens availability
+    const checkForTokens = () => {
+      if (window['themeTokens']) {
+        this.tokens = JSON.parse(window['themeTokens']) ?? {};
+      } else {
+        requestAnimationFrame(checkForTokens);
+      }
+    };
+
+    requestAnimationFrame(checkForTokens);
+  }
+
+  filterTokens(prefix) {
+    if (!this.tokens) return [];
+
+    const filtered = Object.entries(this.tokens)
+      .filter(([name]) => name.startsWith(prefix))
+      .map(([name, value]) => {
+        return {
+          name: `--${name}`,
+          value: value,
+          comment: '',
+        };
+      });
+
+    return filtered;
+  }
+
+  render() {
+    return html`
+      <div class="tier-1-border" style="padding: 2rem;">
+        <ed-heading tagName="h1" variant="headline-lg">Border</ed-heading>
+        <ed-section>
+          <ed-heading slot="header" tagName="h2" variant="title-default">Border width</ed-heading>
+          <ed-text-passage slot="header">
+            <p>Tier 1 Border width tokens define the border width options available.</p>
+          </ed-text-passage>
+          <ul>
+            ${this.filterTokens('ed-border-width').map((item) => {
+              return html`
+                <li>
+                  <token-specimen
+                    name="${item.name}"
+                    value="${item.value}"
+                    inlineStyles="background-color: transparent; border-width: var(${item.name}); border-style: solid; border-color: var(--ed-theme-color-border-brand);"
+                  ></token-specimen>
+                </li>
+              `;
+            })}
+          </ul>
+        </ed-section>
+
+        <ed-section>
+          <ed-heading slot="header" tagName="h2" variant="title-default">Border radius</ed-heading>
+          <ed-text-passage slot="header">
+            <p>Tier 1 Border width tokens define the border radius options available.</p>
+          </ed-text-passage>
+          <ul>
+            ${this.filterTokens('ed-border-radius').map((item) => {
+              return html`
+                <li>
+                  <token-specimen
+                    name="${item.name}"
+                    value="${item.value}"
+                    inlineStyles="
+                      background-color: 'transparent';
+                      border-width: '2px';
+                      border-style: 'solid';
+                      border-color: 'black';
+                      border-radius: var(${item.name});"
+                  ></token-specimen>
+                </li>
+              `;
+            })}
+          </ul>
+        </ed-section>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'tier-1-border': Tier1Border;
+  }
+}

package/.storybook/components/tier-1-tokens/breakpoints.ts

@@ -0,0 +1,116 @@
+import {html, LitElement, unsafeCSS} from 'lit';
+import {customElement, state} from 'lit/decorators.js';
+import '../token-specimen/token-specimen';
+import styles from './tier-1-tokens.scss?inline';
+import '../../../components/heading/heading';
+import '../../../components/section/section';
+import '../../../components/text-passage/text-passage';
+
+@customElement('tier-1-breakpoints')
+export class Tier1Breakpoints extends LitElement {
+  static get styles() {
+    return unsafeCSS(styles);
+  }
+
+  /**
+   * Tokens state that loads in JSON parsed theme file
+   */
+  @state() tokens: any;
+
+  /**
+   * Loads theme tokens when they become available
+   * Uses a polling approach to check for themeTokens availability
+   */
+  connectedCallback(): void {
+    super.connectedCallback();
+    this.loadThemeTokens();
+  }
+
+  /**
+   * Loads theme tokens when they become available
+   * 1) Check if themeTokens is already available
+   * 2) If not, check for themeTokens availability again
+   */
+  private loadThemeTokens(): void {
+    // Check if themeTokens is already available
+    if (window['themeTokens']) {
+      this.tokens = JSON.parse(window['themeTokens']) ?? {};
+      return;
+    }
+
+    // Poll for themeTokens availability
+    const checkForTokens = () => {
+      if (window['themeTokens']) {
+        this.tokens = JSON.parse(window['themeTokens']) ?? {};
+      } else {
+        requestAnimationFrame(checkForTokens);
+      }
+    };
+
+    requestAnimationFrame(checkForTokens);
+  }
+
+  filterTokens(prefix) {
+    return Object.entries(this.tokens)
+      .filter(([name]) => name.startsWith(prefix))
+      .map(([name, {value, comment}]) => ({
+        name: `--${name}`,
+        value,
+        comment,
+      }));
+  }
+
+  render() {
+    return html`
+      <div class="tier-1-breakpoints" style="padding: 2rem;">
+        <ed-heading tagName="h1" variant="headline-lg">Breakpoints</ed-heading>
+        <ed-text-passage>
+          <p>Breakpoints token description</p>
+        </ed-text-passage>
+        <ed-section>
+          <ed-heading slot="header" tagName="h2" variant="title-default">Breakpoint widths</ed-heading>
+          <ed-text-passage slot="header">
+            <p>Breakpoint widths token description</p>
+          </ed-text-passage>
+
+          <ul>
+            <li>
+              <token-specimen
+                name="$ed-bp-sm"
+                value="23.4375rem (375px)"
+                inlineStyle="height: 4rem; background: #ddd; display: flex; align-items: center; justify-content: center; font-weight: bold; width: 100%; max-width: 23.4375rem"
+              ></token-specimen>
+            </li>
+            <li>
+              <token-specimen
+                name="$ed-bp-md"
+                value="48rem (768px)"
+                inlineStyle="height: 4rem; background: #ddd; display: flex; align-items: center; justify-content: center; font-weight: bold; width: 100%; max-width: 48rem"
+              ></token-specimen>
+            </li>
+            <li>
+              <token-specimen
+                name="$ed-bp-md"
+                value="60rem (960px)"
+                inlineStyle="height: 4rem; background: #ddd; display: flex; align-items: center; justify-content: center; font-weight: bold; width: 100%; max-width: 60rem"
+              ></token-specimen>
+            </li>
+            <li>
+              <token-specimen
+                name="$ed-bp-xl"
+                value="75rem (1200px)"
+                inlineStyle="height: 4rem; background: #ddd; display: flex; align-items: center; justify-content: center; font-weight: bold; width: 100%; max-width: 75rem"
+              ></token-specimen>
+            </li>
+          </ul>
+        </ed-section>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'tier-1-breakpoints': Tier1Breakpoints;
+  }
+}