@pictogrammers/components 0.4.8 → 0.4.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (70) hide show
  1. package/index.html +1 -1
  2. package/main.js +1 -1
  3. package/package.json +1 -1
  4. package/pg/inputPixelEditor/inputPixelEditor.ts +3 -2
  5. package/pg/inputPixelEditor/utils/getEllipsePixels.ts +131 -19
  6. package/pg/modal/README.md +29 -0
  7. package/pg/modal/__examples__/basic/basic.html +4 -0
  8. package/pg/modal/__examples__/basic/basic.ts +42 -0
  9. package/pg/modal/index.ts +3 -0
  10. package/pg/modal/modal.css +40 -0
  11. package/pg/modal/modal.html +9 -0
  12. package/pg/modal/modal.ts +14 -0
  13. package/pg/tree/README.md +10 -1
  14. package/pg/tree/__examples__/basic/basic.html +1 -0
  15. package/pg/tree/__examples__/basic/basic.ts +6 -0
  16. package/pg/tree/tree.css +1 -0
  17. package/pgAnnoy.js +1 -1
  18. package/pgApp.js +1 -1
  19. package/pgAvatar.js +1 -1
  20. package/pgButton.js +1 -1
  21. package/pgButtonGroup.js +1 -1
  22. package/pgButtonLink.js +1 -1
  23. package/pgButtonMenu.js +1 -1
  24. package/pgButtonToggle.js +1 -1
  25. package/pgCard.js +1 -1
  26. package/pgCardUser.js +1 -1
  27. package/pgColor.js +1 -1
  28. package/pgDatabase.js +1 -1
  29. package/pgDropdown.js +1 -1
  30. package/pgGrid.js +1 -1
  31. package/pgHeader.js +1 -1
  32. package/pgIcon.js +1 -1
  33. package/pgInputCheck.js +1 -1
  34. package/pgInputCheckList.js +1 -1
  35. package/pgInputFileLocal.js +1 -1
  36. package/pgInputHexRgb.js +1 -1
  37. package/pgInputPixelEditor.js +1 -1
  38. package/pgInputRange.js +1 -1
  39. package/pgInputSelect.js +1 -1
  40. package/pgInputText.js +1 -1
  41. package/pgInputTextIcon.js +1 -1
  42. package/pgInputUserSelect.js +1 -1
  43. package/pgListTag.js +1 -1
  44. package/pgMarkdown.js +1 -1
  45. package/pgMenu.js +1 -1
  46. package/pgMenuDivider.js +1 -1
  47. package/pgMenuIcon.js +1 -1
  48. package/pgMenuItem.js +1 -1
  49. package/pgMenuItemIcon.js +1 -1
  50. package/pgModal.js +1 -0
  51. package/pgModalAlert.js +1 -1
  52. package/pgModification.js +1 -1
  53. package/pgNav.js +1 -1
  54. package/pgOverlay.js +1 -1
  55. package/pgOverlayContextMenu.js +1 -1
  56. package/pgOverlayMenu.js +1 -1
  57. package/pgOverlaySelectMenu.js +1 -1
  58. package/pgOverlaySubMenu.js +1 -1
  59. package/pgPicker.js +1 -1
  60. package/pgPreview.js +1 -1
  61. package/pgScroll.js +1 -1
  62. package/pgSearch.js +1 -1
  63. package/pgTab.js +1 -1
  64. package/pgTabs.js +1 -1
  65. package/pgToast.js +1 -1
  66. package/pgToasts.js +1 -1
  67. package/pgTooltip.js +1 -1
  68. package/pgTree.js +1 -1
  69. package/pgTreeButtonIcon.js +1 -1
  70. package/pgTreeItem.js +1 -1
package/index.html CHANGED
@@ -318,4 +318,4 @@
318
318
  setTheme(themeCache);
319
319
  themeSelect.value = themeCache;
320
320
  }
321
- });</script><div class="wrapper"><header><svg viewBox="0 0 64 64"><path fill="currentColor" d="M 8,0L 56,0C 60.4183,0 64,3.58173 64,8L 64,56C 64,60.4183 60.4183,64 56,64L 8,64C 3.58172,64 0,60.4183 0,56L 0,8C 0,3.58173 3.58172,0 8,0 Z M 8,44.0001L 14,44.0001L 14,32.0001L 20,32.0001C 26.6274,32.0001 32,26.6275 32,20.0001C 32,13.3726 26.6274,8.00006 20,8.00006L 8,8.00003L 8,44.0001 Z M 20,26.0003L 14,26.0003L 14,14.0003L 20,14.0003C 23.3137,14.0003 26,16.6866 26,20.0003C 26,23.314 23.3137,26.0003 20,26.0003 Z M 44,44.0001L 45.9999,44.0003C 48.2091,44.0003 49.9999,42.2094 49.9999,40.0003L 50,44.0001C 50,49.5231 45.5228,54.0002 40,54.0002C 36.085,54.0002 32.6955,51.7505 31.0537,48.4732L 25.686,51.1571C 28.3128,56.4006 33.736,60.0002 40,60.0002C 48.8365,60.0002 56,52.8368 56,44.0001L 56,24.0001C 56,21.791 54.2092,20.0001 52,20.0001L 44,20.0001C 37.3726,20.0001 32,25.3727 32,32.0001C 32,38.6275 37.3726,44.0001 44,44.0001 Z M 50,26L 49.9999,38.0001L 44,38C 40.6863,38 38,35.3137 38,32C 38,28.6863 40.6863,26 44,26L 50,26 Z"/></svg><h1>Pictogrammers Components</h1><span></span> <label><select id="theme"><option value="">None</option><option value="ui3">UI3</option></select></label> <a href="https://github.com/Pictogrammers/Components"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z"/></svg> <span>View on GitHub</span></a></header><aside><div>Components</div><ul><li><a href="#pg-annoy">annoy</a></li><li><a href="#pg-app">app</a></li><li><a href="#pg-avatar">avatar</a></li><li><a href="#pg-button">button</a></li><li><a href="#pg-button-group">button-group</a></li><li><a href="#pg-button-link">button-link</a></li><li><a href="#pg-button-menu">button-menu</a></li><li><a href="#pg-button-toggle">button-toggle</a></li><li><a href="#pg-card">card</a></li><li><a href="#pg-card-user">card-user</a></li><li><a href="#pg-color">color</a></li><li><a href="#pg-database">database</a></li><li><a href="#pg-dropdown">dropdown</a></li><li><a href="#pg-grid">grid</a></li><li><a href="#pg-header">header</a></li><li><a href="#pg-icon">icon</a></li><li><a href="#pg-input-check">input-check</a></li><li><a href="#pg-input-check-list">input-check-list</a></li><li><a href="#pg-input-file-local">input-file-local</a></li><li><a href="#pg-input-hex-rgb">input-hex-rgb</a></li><li><a href="#pg-input-pixel-editor">input-pixel-editor</a></li><li><a href="#pg-input-range">input-range</a></li><li><a href="#pg-input-select">input-select</a></li><li><a href="#pg-input-text">input-text</a></li><li><a href="#pg-input-text-icon">input-text-icon</a></li><li><a href="#pg-input-user-select">input-user-select</a></li><li><a href="#pg-list-tag">list-tag</a></li><li><a href="#pg-markdown">markdown</a></li><li><a href="#pg-menu">menu</a></li><li><a href="#pg-menu-divider">menu-divider</a></li><li><a href="#pg-menu-icon">menu-icon</a></li><li><a href="#pg-menu-item">menu-item</a></li><li><a href="#pg-menu-item-icon">menu-item-icon</a></li><li><a href="#pg-modification">modification</a></li><li><a href="#pg-nav">nav</a></li><li><a href="#pg-overlay">overlay</a></li><li><a href="#pg-picker">picker</a></li><li><a href="#pg-preview">preview</a></li><li><a href="#pg-scroll">scroll</a></li><li><a href="#pg-search">search</a></li><li><a href="#pg-tab">tab</a></li><li><a href="#pg-tabs">tabs</a></li><li><a href="#pg-toasts">toasts</a></li><li><a href="#pg-tooltip">tooltip</a></li><li><a href="#pg-tree">tree</a></li><li><a href="#pg-tree-button-icon">tree-button-icon</a></li><li><a href="#pg-tree-item">tree-item</a></li></ul><div>Overlays</div><ul><li><a href="#pg-modal-alert">modal-alert</a></li><li><a href="#pg-overlay-context-menu">overlay-context-menu</a></li><li><a href="#pg-overlay-menu">overlay-menu</a></li><li><a href="#pg-overlay-select-menu">overlay-select-menu</a></li><li><a href="#pg-overlay-sub-menu">overlay-sub-menu</a></li><li><a href="#pg-toast">toast</a></li></ul><div>Shared</div><ul></ul></aside><main><p>This page is generated from <code>npm start</code>. To render only specific components use <code>npm start pg-button</code>.</p><h2 id="pgAnnoyH2">pg-annoy<a title="Link to pg-annoy" href="#pg-annoy" id="pg-annoy"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z"></path></svg></a><a title="View Code" href="https://github.com/Pictogrammers/Components/tree/master/src/pg/annoy" target="_blank"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M9.54 15.65L11.63 17.74L10.35 19L7 15.65L10.35 12.3L11.63 13.56L9.54 15.65M17 15.65L13.65 19L12.38 17.74L14.47 15.65L12.38 13.56L13.65 12.3L17 15.65Z"></path></svg></a><span class="label">component</span><button id="pgAnnoyReadme" title="Expand Documentation"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z"></path></svg></button><span class="line"></span></h2><div class="markdown" id="pgAnnoyContainer"></div><script>markdown("pgAnnoy", "\r\n\r\nThe `pg-annoy` component is the clippy of the the website. It shows annoying notifications in the corner of the page that the user has to close. This rotates on every page view using `localStorage` to track the previously show item.\r\n\r\n```typescript\r\nimport '@pictogrammers/components/pgAnnoy';\r\n```\r\n\r\n```html\r\n<pg-annoy></pg-annoy>\r\n```\r\n\r\nA `localStorage` variable switches between the list of items below.\r\n")</script><section><h3><span>basic</span></h3><x-pg-annoy-basic></x-pg-annoy-basic></section><h2 id="pgAppH2">pg-app<a title="Link to pg-app" href="#pg-app" id="pg-app"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z"></path></svg></a><a title="View Code" href="https://github.com/Pictogrammers/Components/tree/master/src/pg/app" target="_blank"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M9.54 15.65L11.63 17.74L10.35 19L7 15.65L10.35 12.3L11.63 13.56L9.54 15.65M17 15.65L13.65 19L12.38 17.74L14.47 15.65L12.38 13.56L13.65 12.3L17 15.65Z"></path></svg></a><span class="label">component</span><button id="pgAppReadme" title="Expand Documentation"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z"></path></svg></button><span class="line"></span></h2><div class="markdown" id="pgAppContainer"></div><script>markdown("pgApp", "\r\n\r\nThe `pg-app` component is a wrapper that allows an app icon and tabs.\r\n\r\n```typescript\r\nimport '@pictogrammers/components/pg/app';\r\n```\r\n\r\n```html\r\n<pg-app></pg-app>\r\n```\r\n")</script><section><h3><span>basic</span></h3><x-pg-app-basic></x-pg-app-basic></section><h2 id="pgAvatarH2">pg-avatar<a title="Link to pg-avatar" href="#pg-avatar" id="pg-avatar"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z"></path></svg></a><a title="View Code" href="https://github.com/Pictogrammers/Components/tree/master/src/pg/avatar" target="_blank"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M9.54 15.65L11.63 17.74L10.35 19L7 15.65L10.35 12.3L11.63 13.56L9.54 15.65M17 15.65L13.65 19L12.38 17.74L14.47 15.65L12.38 13.56L13.65 12.3L17 15.65Z"></path></svg></a><span class="label">component</span><button id="pgAvatarReadme" title="Expand Documentation"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z"></path></svg></button><span class="line"></span></h2><div class="markdown" id="pgAvatarContainer"></div><script>markdown("pgAvatar", "\r\n\r\nThe `pg-avatar` component takes a user object and renders an avatar circle.\r\n\r\n```typescript\r\nimport '@pictogrammers/components/pg/avatar';\r\nimport PgAvatar from '@pictogrammers/components/pg/avatar';\r\n```\r\n\r\n```html\r\n<pg-avatar user=\"...\"></pg-avatar>\r\n```\r\n\r\n| Attributes | Tested | Description |\r\n| ---------- | -------- | ----------- |\r\n| user | &#x2705; | User object with `user.base64` defined. |\r\n\r\n\r\n| CSS Variable | Default | Description |\r\n| ------------------- | --------- | ----------- |\r\n| `--pg-avatar-border-color` | `#453C4F` | Color |\r\n| `--pg-avatar-width` | `3rem` | Width |\r\n| `--pg-avatar-height` | `3rem` | Height |")</script><section><h3><span>basic</span></h3><x-pg-avatar-basic></x-pg-avatar-basic></section><h2 id="pgButtonH2">pg-button<a title="Link to pg-button" href="#pg-button" id="pg-button"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z"></path></svg></a><a title="View Code" href="https://github.com/Pictogrammers/Components/tree/master/src/pg/button" target="_blank"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M9.54 15.65L11.63 17.74L10.35 19L7 15.65L10.35 12.3L11.63 13.56L9.54 15.65M17 15.65L13.65 19L12.38 17.74L14.47 15.65L12.38 13.56L13.65 12.3L17 15.65Z"></path></svg></a><span class="label">component</span><button id="pgButtonReadme" title="Expand Documentation"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z"></path></svg></button><span class="line"></span></h2><div class="markdown" id="pgButtonContainer"></div><script>markdown("pgButton", "\r\n\r\nThe `pg-button` component is essentially just a styled button, but it also allows special rendering for `pg-button-group` and `pg-icon`.\r\n\r\n```typescript\r\nimport '@pictogrammers/components/pg/button';\r\nimport PgButton from '@pictogrammers/components/pg/button';\r\n```\r\n\r\n```html\r\n<pg-button>Click Me!</pg-button>\r\n```\r\n\r\n| Slots | Tested | Description |\r\n| ----------- | -------- | ----------- |\r\n| default | &#x2705; | Button contents. |\r\n\r\n| Attribute | Tested | Description |\r\n| ---------- | -------- | ----------- |\r\n| block | | block sizing |\r\n| active | | Depressed visual state. |\r\n| start | | Internal Only |\r\n| end | | Internal Only |\r\n| center | | Internal Only |\r\n\r\n| Events | Tested | Description |\r\n| ---------- | -------- | ----------- |\r\n| click | &#x2705; | Standard click. |\r\n\r\n| CSS Variables | Default | Description |\r\n| ------------------- | --------- | ----------- |\r\n| `--pg-button-color` | `#453C4F` | Text color |\r\n| `--pg-button-background-color` | `#fff` | Background color |\r\n| `--pg-button-border-color` | `#453C4F` | Border color |\r\n| `--pg-button-hover-color` | `#fff` | `:hover` Text color |\r\n| `--pg-button-hover-background-color` | `#453C4F` | `:hover` Background color |\r\n| `--pg-button-hover-border-color` | `#453C4F` | `:hover` Border color |\r\n| `--pg-button-active-color` | `#fff` | `active` Text color |\r\n| `--pg-button-active-background-color` | `#453C4F` | `active` Background color |\r\n| `--pg-button-active-border-color` | `#453C4F` | `active` Border color |\r\n| `--pg-button-padding` | `0.25rem 0.5rem` | Padding. |\r\n| `--pg-button-font-size` | `1rem` | Font size. |\r\n| `--pg-button-line-height` | `1.5rem` | Line height. |\r\n\r\n### Slots\r\n\r\nSpecial styling is applied for `pg-icon`.\r\n\r\n```html\r\n<pg-button>\r\n <pg-icon path=\"M...Z\"></pg-icon>\r\n Hello!\r\n</pg-button>\r\n```")</script><section><h3><span>basic</span></h3><x-pg-button-basic></x-pg-button-basic></section><section><h3><span>states</span></h3><x-pg-button-states></x-pg-button-states></section><h2 id="pgButtonGroupH2">pg-button-group<a title="Link to pg-button-group" href="#pg-button-group" id="pg-button-group"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z"></path></svg></a><a title="View Code" href="https://github.com/Pictogrammers/Components/tree/master/src/pg/buttonGroup" target="_blank"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M9.54 15.65L11.63 17.74L10.35 19L7 15.65L10.35 12.3L11.63 13.56L9.54 15.65M17 15.65L13.65 19L12.38 17.74L14.47 15.65L12.38 13.56L13.65 12.3L17 15.65Z"></path></svg></a><span class="label">component</span><button id="pgButtonGroupReadme" title="Expand Documentation"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z"></path></svg></button><span class="line"></span></h2><div class="markdown" id="pgButtonGroupContainer"></div><script>markdown("pgButtonGroup", "\r\n\r\nThe `pg-button-group` wraps the `pg-button` component.\r\n\r\n```typescript\r\nimport '@pictogrammers/components/pg/buttonGroup';\r\nimport PgButtonGroup from '@pictogrammers/components/pg/buttonGroup';\r\n```\r\n\r\n```html\r\n<pg-button-group>\r\n <pg-button active>Hello</pg-button>\r\n <pg-button>World</pg-button>\r\n</pg-button-group>\r\n```\r\n\r\n### Slots\r\n\r\nSpecial styling is applied for `pg-button`.\r\n\r\n```html\r\n<pg-button-group>\r\n <pg-button>\r\n <pg-icon path=\"M...Z\"></pg-icon>\r\n With Icons\r\n </pg-button>\r\n</pg-button-group>\r\n```")</script><section><h3><span>basic</span></h3><x-pg-button-group-basic></x-pg-button-group-basic></section><h2 id="pgButtonLinkH2">pg-button-link<a title="Link to pg-button-link" href="#pg-button-link" id="pg-button-link"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z"></path></svg></a><a title="View Code" href="https://github.com/Pictogrammers/Components/tree/master/src/pg/buttonLink" target="_blank"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M9.54 15.65L11.63 17.74L10.35 19L7 15.65L10.35 12.3L11.63 13.56L9.54 15.65M17 15.65L13.65 19L12.38 17.74L14.47 15.65L12.38 13.56L13.65 12.3L17 15.65Z"></path></svg></a><span class="label">component</span><button id="pgButtonLinkReadme" title="Expand Documentation"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z"></path></svg></button><span class="line"></span></h2><div class="markdown" id="pgButtonLinkContainer"></div><script>markdown("pgButtonLink", "\r\n\r\nThe `pg-button-link` component is essentially just a styled anchor, but it also allows special rendering for `pg-button-group` and `pg-icon`.\r\n\r\n```typescript\r\nimport '@pictogrammers/components/pg/buttonLink';\r\nimport PgButtonLink from '@pictogrammers/components/pg/buttonLink';\r\n```\r\n\r\n```html\r\n<pg-button-link>Click Me!</pg-button-link>\r\n```\r\n\r\n| Slots | Tested | Description |\r\n| ----------- | -------- | ----------- |\r\n| default | &#x2705; | Button contents. |\r\n\r\n| Attribute | Tested | Description |\r\n| ---------- | -------- | ----------- |\r\n| block | | block sizing |\r\n| active | | Depressed visual state. |\r\n| start | | Internal Only |\r\n| end | | Internal Only |\r\n| center | | Internal Only |\r\n\r\n| Events | Tested | Description |\r\n| ---------- | -------- | ----------- |\r\n| click | &#x2705; | Standard click. |\r\n\r\n| CSS Variables | Default | Description |\r\n| ------------------- | --------- | ----------- |\r\n| `--pg-button-color` | `#453C4F` | Text color |\r\n| `--pg-button-background-color` | `#fff` | Background color |\r\n| `--pg-button-border-color` | `#453C4F` | Border color |\r\n| `--pg-button-hover-color` | `#fff` | `:hover` Text color |\r\n| `--pg-button-hover-background-color` | `#453C4F` | `:hover` Background color |\r\n| `--pg-button-hover-border-color` | `#453C4F` | `:hover` Border color |\r\n| `--pg-button-active-color` | `#fff` | `active` Text color |\r\n| `--pg-button-active-background-color` | `#453C4F` | `active` Background color |\r\n| `--pg-button-active-border-color` | `#453C4F` | `active` Border color |\r\n\r\n### Slots\r\n\r\nSpecial styling is applied for `pg-icon`.\r\n\r\n```html\r\n<pg-button-link>\r\n <pg-icon path=\"M...Z\"></pg-icon>\r\n Hello!\r\n</pg-button-link>\r\n```")</script><section><h3><span>basic</span></h3><x-pg-button-link-basic></x-pg-button-link-basic></section><h2 id="pgButtonMenuH2">pg-button-menu<a title="Link to pg-button-menu" href="#pg-button-menu" id="pg-button-menu"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z"></path></svg></a><a title="View Code" href="https://github.com/Pictogrammers/Components/tree/master/src/pg/buttonMenu" target="_blank"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M9.54 15.65L11.63 17.74L10.35 19L7 15.65L10.35 12.3L11.63 13.56L9.54 15.65M17 15.65L13.65 19L12.38 17.74L14.47 15.65L12.38 13.56L13.65 12.3L17 15.65Z"></path></svg></a><span class="label">component</span><button id="pgButtonMenuReadme" title="Expand Documentation"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z"></path></svg></button><span class="line"></span></h2><div class="markdown" id="pgButtonMenuContainer"></div><script>markdown("pgButtonMenu", "\r\n\r\nThe `pg-button-toggle` component is essentially just a button with swappable slotted content. Commonly used with icons, but using `span` elements will allow assigning text content.\r\n\r\n```typescript\r\nimport '@pictogrammers/components/pg/buttonToggle';\r\nimport PgButtonToggle from '@pictogrammers/components/pg/buttonToggle';\r\n```\r\n\r\n```html\r\n<pg-button-toggle>\r\n <pg-icon slot=\"active\" path=\"M...Z\"></pg-icon>\r\n <pg-icon slot=\"inactive\" path=\"M...Z\"></pg-icon>\r\n</pg-button-toggle>\r\n```\r\n\r\n| Slots | Tested | Description |\r\n| ----------- | -------- | ----------- |\r\n| default | &#x2705; | Button contents. |\r\n\r\n| Attribute | Tested | Description |\r\n| ---------- | -------- | ----------- |\r\n| block | | block sizing |\r\n| active | | Depressed visual state. |\r\n| start | | Internal Only |\r\n| end | | Internal Only |\r\n| center | | Internal Only |\r\n\r\n| Events | Tested | Description |\r\n| ---------- | -------- | ----------- |\r\n| click | &#x2705; | Standard click. |\r\n\r\n| CSS Variables | Default | Description |\r\n| ------------------- | --------- | ----------- |\r\n| `--pg-button-color` | `#453C4F` | Text color |\r\n| `--pg-button-background-color` | `#fff` | Background color |\r\n| `--pg-button-border-color` | `#453C4F` | Border color |\r\n| `--pg-button-hover-color` | `#fff` | `:hover` Text color |\r\n| `--pg-button-hover-background-color` | `#453C4F` | `:hover` Background color |\r\n| `--pg-button-hover-border-color` | `#453C4F` | `:hover` Border color |\r\n| `--pg-button-active-color` | `#fff` | `active` Text color |\r\n| `--pg-button-active-background-color` | `#453C4F` | `active` Background color |\r\n| `--pg-button-active-border-color` | `#453C4F` | `active` Border color |\r\n\r\n### Slots\r\n\r\nSpecial styling is applied for `pg-icon`.\r\n\r\n```html\r\n<pg-button-toggle>\r\n <pg-icon slot=\"active\" path=\"M...Z\"></pg-icon>\r\n <pg-icon slot=\"inactive\" path=\"M...Z\"></pg-icon>\r\n</pg-button-toggle>\r\n```")</script><section><h3><span>basic</span></h3><x-pg-button-menu-basic></x-pg-button-menu-basic></section><h2 id="pgButtonToggleH2">pg-button-toggle<a title="Link to pg-button-toggle" href="#pg-button-toggle" id="pg-button-toggle"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z"></path></svg></a><a title="View Code" href="https://github.com/Pictogrammers/Components/tree/master/src/pg/buttonToggle" target="_blank"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M9.54 15.65L11.63 17.74L10.35 19L7 15.65L10.35 12.3L11.63 13.56L9.54 15.65M17 15.65L13.65 19L12.38 17.74L14.47 15.65L12.38 13.56L13.65 12.3L17 15.65Z"></path></svg></a><span class="label">component</span><button id="pgButtonToggleReadme" title="Expand Documentation"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z"></path></svg></button><span class="line"></span></h2><div class="markdown" id="pgButtonToggleContainer"></div><script>markdown("pgButtonToggle", "\r\n\r\nThe `pg-button-toggle` component is essentially just a button with swappable slotted content. Commonly used with icons, but using `span` elements will allow assigning text content.\r\n\r\n```typescript\r\nimport '@pictogrammers/components/pg/buttonToggle';\r\nimport PgButtonToggle from '@pictogrammers/components/pg/buttonToggle';\r\n```\r\n\r\n```html\r\n<pg-button-toggle>\r\n <pg-icon slot=\"active\" path=\"M...Z\"></pg-icon>\r\n <pg-icon slot=\"inactive\" path=\"M...Z\"></pg-icon>\r\n</pg-button-toggle>\r\n```\r\n\r\n| Slots | Tested | Description |\r\n| ----------- | -------- | ----------- |\r\n| default | &#x2705; | Button contents. |\r\n\r\n| Attribute | Tested | Description |\r\n| ---------- | -------- | ----------- |\r\n| block | | block sizing |\r\n| active | | Depressed visual state. |\r\n| start | | Internal Only |\r\n| end | | Internal Only |\r\n| center | | Internal Only |\r\n\r\n| Events | Tested | Description |\r\n| ---------- | -------- | ----------- |\r\n| click | &#x2705; | Standard click. |\r\n\r\n| CSS Variables | Default | Description |\r\n| ------------------- | --------- | ----------- |\r\n| `--pg-button-color` | `#453C4F` | Text color |\r\n| `--pg-button-background-color` | `#fff` | Background color |\r\n| `--pg-button-border-color` | `#453C4F` | Border color |\r\n| `--pg-button-hover-color` | `#fff` | `:hover` Text color |\r\n| `--pg-button-hover-background-color` | `#453C4F` | `:hover` Background color |\r\n| `--pg-button-hover-border-color` | `#453C4F` | `:hover` Border color |\r\n| `--pg-button-active-color` | `#fff` | `active` Text color |\r\n| `--pg-button-active-background-color` | `#453C4F` | `active` Background color |\r\n| `--pg-button-active-border-color` | `#453C4F` | `active` Border color |\r\n\r\n### Slots\r\n\r\nSpecial styling is applied for `pg-icon`.\r\n\r\n```html\r\n<pg-button-toggle>\r\n <pg-icon slot=\"active\" path=\"M...Z\"></pg-icon>\r\n <pg-icon slot=\"inactive\" path=\"M...Z\"></pg-icon>\r\n</pg-button-toggle>\r\n```")</script><section><h3><span>basic</span></h3><x-pg-button-toggle-basic></x-pg-button-toggle-basic></section><section><h3><span>persist</span></h3><x-pg-button-toggle-persist></x-pg-button-toggle-persist></section><h2 id="pgCardH2">pg-card<a title="Link to pg-card" href="#pg-card" id="pg-card"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z"></path></svg></a><a title="View Code" href="https://github.com/Pictogrammers/Components/tree/master/src/pg/card" target="_blank"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M9.54 15.65L11.63 17.74L10.35 19L7 15.65L10.35 12.3L11.63 13.56L9.54 15.65M17 15.65L13.65 19L12.38 17.74L14.47 15.65L12.38 13.56L13.65 12.3L17 15.65Z"></path></svg></a><span class="label">component</span><button id="pgCardReadme" title="Expand Documentation"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z"></path></svg></button><span class="line"></span></h2><div class="markdown" id="pgCardContainer"></div><script>markdown("pgCard", "\r\n\r\nThe `pg-card` component is a presentational component for adding a shadow with rounded corners.\r\n\r\n```typescript\r\nimport '@pictogrammers/components/pg/icon';\r\nimport PgIcon from '@pictogrammers/components/pg/icon';\r\n```\r\n\r\n```html\r\n<pg-card>\r\n Body\r\n</pg-card>\r\n```\r\n\r\n## CSS Variables\r\n\r\n| CSS Variables | Default | Description |\r\n| --------------------- | ----------- | ----------- |\r\n| `--pg-card-color` | `'#453C4F'` | Color |\r\n| `--pg-card-padding` | `0` | Padding |")</script><section><h3><span>basic</span></h3><x-pg-card-basic></x-pg-card-basic></section><h2 id="pgCardUserH2">pg-card-user<a title="Link to pg-card-user" href="#pg-card-user" id="pg-card-user"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z"></path></svg></a><a title="View Code" href="https://github.com/Pictogrammers/Components/tree/master/src/pg/cardUser" target="_blank"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M9.54 15.65L11.63 17.74L10.35 19L7 15.65L10.35 12.3L11.63 13.56L9.54 15.65M17 15.65L13.65 19L12.38 17.74L14.47 15.65L12.38 13.56L13.65 12.3L17 15.65Z"></path></svg></a><span class="label">component</span><button id="pgCardUserReadme" title="Expand Documentation"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z"></path></svg></button><span class="line"></span></h2><div class="markdown" id="pgCardUserContainer"></div><script>markdown("pgCardUser", "\r\n\r\nThe `pg-card-user` component lets one display a `User` type in a visual card.\r\n\r\n```typescript\r\nimport '@pictogrammers/components/pg/cardUser';\r\nimport PgIcon from '@pictogrammers/components/pg/cardUser';\r\n```\r\n\r\n```html\r\n<pg-card-user></pg-card-user>\r\n```\r\n\r\n## Attributes\r\n\r\n| Attributes | Tested | Description |\r\n| ---------- | -------- | ----------- |\r\n| user | &#x2705; | `User` |\r\n\r\n## CSS Variables\r\n\r\nSee `pg-card`.")</script><section><h3><span>basic</span></h3><x-pg-card-user-basic></x-pg-card-user-basic></section><h2 id="pgColorH2">pg-color<a title="Link to pg-color" href="#pg-color" id="pg-color"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z"></path></svg></a><a title="View Code" href="https://github.com/Pictogrammers/Components/tree/master/src/pg/color" target="_blank"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M9.54 15.65L11.63 17.74L10.35 19L7 15.65L10.35 12.3L11.63 13.56L9.54 15.65M17 15.65L13.65 19L12.38 17.74L14.47 15.65L12.38 13.56L13.65 12.3L17 15.65Z"></path></svg></a><span class="label">component</span><button id="pgColorReadme" title="Expand Documentation"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z"></path></svg></button><span class="line"></span></h2><div class="markdown" id="pgColorContainer"></div><script>markdown("pgColor", "\r\n\r\nVisual color picker using the standard Material Design pallet.\r\n\r\n```typescript\r\nimport '@pictogrammers/components/pg/color';\r\n```\r\n\r\n## Usage\r\n\r\n| Events | Description |\r\n| ------ | ----------- |\r\n| `onchange` | `event = { detail: { r, g, b, hex } }` |\r\n")</script><section><h3><span>basic</span></h3><x-pg-color-basic></x-pg-color-basic></section><h2 id="pgDatabaseH2">pg-database<a title="Link to pg-database" href="#pg-database" id="pg-database"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z"></path></svg></a><a title="View Code" href="https://github.com/Pictogrammers/Components/tree/master/src/pg/database" target="_blank"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M9.54 15.65L11.63 17.74L10.35 19L7 15.65L10.35 12.3L11.63 13.56L9.54 15.65M17 15.65L13.65 19L12.38 17.74L14.47 15.65L12.38 13.56L13.65 12.3L17 15.65Z"></path></svg></a><span class="label">component</span><button id="pgDatabaseReadme" title="Expand Documentation"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z"></path></svg></button><span class="line"></span></h2><div class="markdown" id="pgDatabaseContainer"></div><script>markdown("pgDatabase", "\r\n\r\nOut of all the components this is the most useful one as it controls the local cache of icon data. From a high level this component gives access to a `DatabaseService` instance.\r\n\r\n```typescript\r\nimport '@pictogrammers/components/pgDatabase.js';\r\n```\r\n\r\n## Usage\r\n\r\n| Events | Description |\r\n| ------ | ----------- |\r\n| `onsync` | `event = { detail: { db } }` |\r\n| `onerror` | `event = { detail: { message }}` |\r\n\r\n> Note: We will try to recover and if there is no way the database is deleted and resynced. Onerror is only called on failure to serialize data not on network issues!\r\n\r\n\r\n## Development\r\n\r\nUnderstanding the data workflow will give you an idea of all the steps of syncing icon data.\r\n\r\n```\r\n# Set some kind of isLoading\r\nconnect -> data exists\r\n -> true -> onsync -> sync data -> onsync\r\n -> sync data -> onsync\r\n```")</script><section><h3><span>basic</span></h3><x-pg-database-basic></x-pg-database-basic></section><h2 id="pgDropdownH2">pg-dropdown<a title="Link to pg-dropdown" href="#pg-dropdown" id="pg-dropdown"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z"></path></svg></a><a title="View Code" href="https://github.com/Pictogrammers/Components/tree/master/src/pg/dropdown" target="_blank"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M9.54 15.65L11.63 17.74L10.35 19L7 15.65L10.35 12.3L11.63 13.56L9.54 15.65M17 15.65L13.65 19L12.38 17.74L14.47 15.65L12.38 13.56L13.65 12.3L17 15.65Z"></path></svg></a><span class="label">component</span><button id="pgDropdownReadme" title="Expand Documentation"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z"></path></svg></button><span class="line"></span></h2><div class="markdown" id="pgDropdownContainer"></div><script>markdown("pgDropdown", "\r\n\r\nVisual color picker using the standard Material Design pallet.\r\n\r\n```typescript\r\nimport '@pictogrammers/components/pg/dropdown';\r\n```\r\n\r\n## Usage\r\n\r\n| Events | Description |\r\n| ------ | ----------- |\r\n| `onchange` | `event = { detail: { r, g, b, hex } }` |\r\n")</script><section><h3><span>basic</span></h3><x-pg-dropdown-basic></x-pg-dropdown-basic></section><h2 id="pgGridH2">pg-grid<a title="Link to pg-grid" href="#pg-grid" id="pg-grid"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z"></path></svg></a><a title="View Code" href="https://github.com/Pictogrammers/Components/tree/master/src/pg/grid" target="_blank"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M9.54 15.65L11.63 17.74L10.35 19L7 15.65L10.35 12.3L11.63 13.56L9.54 15.65M17 15.65L13.65 19L12.38 17.74L14.47 15.65L12.38 13.56L13.65 12.3L17 15.65Z"></path></svg></a><span class="label">component</span><button id="pgGridReadme" title="Expand Documentation"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z"></path></svg></button><span class="line"></span></h2><div class="markdown" id="pgGridContainer"></div><script>markdown("pgGrid", "\r\n\r\nThe `pg-grid` component allows a standard way to render a configurable grid of icons.\r\n\r\n- Performance\r\n - Two events are used to track all interactions\r\n - `mousemove` tracks mouse within the grid\r\n - `mouseleave` tracks mouse leaving grid\r\n - When icons are added or removed this means no dom events are binded\r\n - Virtual icon grid\r\n - Grid height is calculated based on icons present and dynamic container width\r\n - Debounced `300` for resize of grid\r\n- Size\r\n - `pg-scroll` is the only dependency\r\n - Grid tests can handle grid specific logic\r\n - Complex viewport and overflow container logic is centralized\r\n - Tooltips and other interacts are handled via events\r\n - Allows more customization in other use cases\r\n\r\n> Note: Context menus and tooltips can be triggered with events described below. These are outside of the component so they can be rendered elsewhere in the DOM.\r\n\r\n```typescript\r\nimport '@pictogrammers/components/pgGrid';\r\nimport PgGrid from '@pictogrammers/components/pgGrid';\r\n```\r\n\r\n```html\r\n<pg-grid></pg-grid>\r\n```\r\n\r\n## Attributes\r\n\r\n| Attributes | Tested | Description | Default |\r\n| ---------- | -------- | ----------- | ------ |\r\n| icons | | Set icon data | `[]` |\r\n| size | | Set icon size | `24` |\r\n| padding | | Set icon padding | `8` |\r\n| gap | | Set icon gap | `4` |\r\n| width | | Set grid width | `'auto'` |\r\n| height | | Set grid height | `'auto'` |\r\n\r\n### `icons`\r\n\r\nThe minimal data set must contain the `id`, `name` and `data` field.\r\n\r\n```json\r\n[{\r\n \"id\": \"uuid\",\r\n \"name\": \"account\",\r\n \"data\": \"...\"\r\n}]\r\n```\r\n\r\n## Events\r\n\r\n| Events | Tested | Description |\r\n| ---------- | -------- | ----------- |\r\n| select | | Fired on icon selections |\r\n| openmenu | | Right click on icon |\r\n| closemenu | | Right click on icon |\r\n| entericon | | Keyboard / Mouse on icon |\r\n| leaveicon | | Keyboard / Mouse off icon |\r\n\r\n### All Events\r\n\r\nThe `x` and `y` properties are the calculated `top` and `left` in pixels relative to the grid. The `width` and `height` include the `padding`.\r\n\r\nThe `gridX` and `gridY` are relative to the grid container.\r\n\r\nThe `gap + extra` will give the remaining space between icons. Note: The left of the first icon is always just the `gap`.\r\n\r\n```javascript\r\ninterface MouseMeta {\r\n gridX: number,\r\n gridY: number,\r\n x: number,\r\n y: number,\r\n width: number,\r\n height: number,\r\n column: number,\r\n row: number,\r\n index: number,\r\n gap: number,\r\n extra: number\r\n}\r\n\r\ne = {\r\n detail: MouseMeta\r\n}\r\n```\r\n\r\n## Accessibility\r\n\r\nToDo...\r\n\r\n- Arrow key navigation\r\n- Should typing filter grid?")</script><section><h3><span>basic</span></h3><x-pg-grid-basic></x-pg-grid-basic></section><h2 id="pgHeaderH2">pg-header<a title="Link to pg-header" href="#pg-header" id="pg-header"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z"></path></svg></a><a title="View Code" href="https://github.com/Pictogrammers/Components/tree/master/src/pg/header" target="_blank"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M9.54 15.65L11.63 17.74L10.35 19L7 15.65L10.35 12.3L11.63 13.56L9.54 15.65M17 15.65L13.65 19L12.38 17.74L14.47 15.65L12.38 13.56L13.65 12.3L17 15.65Z"></path></svg></a><span class="label">component</span><button id="pgHeaderReadme" title="Expand Documentation"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z"></path></svg></button><span class="line"></span></h2><div class="markdown" id="pgHeaderContainer"></div><script>markdown("pgHeader", "\r\n\r\nThe `pg-header` component renders the logo and header with a slot for search and nav.\r\n\r\n```typescript\r\nimport '@pictogrammers/components/pgHeader.js';\r\n```\r\n\r\n```html\r\n<pg-header\r\n logo=\"...svg path...\"\r\n name=\"Material Design Icons\"></pg-nav>\r\n```\r\n\r\n| Slots | Tested | Description |\r\n| ---------- | -------- | ----------- |\r\n| search | &#x2705; | Global search |\r\n| nav | &#x2705; | Navigation |\r\n\r\n| Attributes | Tested | Description |\r\n| ---------- | -------- | ----------- |\r\n| name | &#x2705; | Set website name |\r\n| logo | &#x2705; | Set path data |")</script><section><h3><span>basic</span></h3><x-pg-header-basic></x-pg-header-basic></section><h2 id="pgIconH2">pg-icon<a title="Link to pg-icon" href="#pg-icon" id="pg-icon"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z"></path></svg></a><a title="View Code" href="https://github.com/Pictogrammers/Components/tree/master/src/pg/icon" target="_blank"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M9.54 15.65L11.63 17.74L10.35 19L7 15.65L10.35 12.3L11.63 13.56L9.54 15.65M17 15.65L13.65 19L12.38 17.74L14.47 15.65L12.38 13.56L13.65 12.3L17 15.65Z"></path></svg></a><span class="label">component</span><button id="pgIconReadme" title="Expand Documentation"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z"></path></svg></button><span class="line"></span></h2><div class="markdown" id="pgIconContainer"></div><script>markdown("pgIcon", "\r\n\r\nThe `pg-icon` component allows a standard way to render [MaterialDesignIcons.com](https://materialdesignicons.com) icons.\r\n\r\n```typescript\r\nimport '@pictogrammers/components/pg/icon';\r\nimport PgIcon from '@pictogrammers/components/pg/icon';\r\n```\r\n\r\n```html\r\n<pg-icon path=\"...\"></pg-icon>\r\n```\r\n\r\n## Attributes\r\n\r\n| Attributes | Tested | Description |\r\n| ---------- | -------- | ----------- |\r\n| path | &#x2705; | Set path data |\r\n\r\n## CSS Variables\r\n\r\n| CSS Variables | Default | Description |\r\n| ------------------- | ----------- | ----------- |\r\n| `--pg-icon-color` | `#453C4F` | Color |\r\n| `--pg-icon-viewbox` | `0 0 24 24` | SVG viewBox |\r\n| `--pg-icon-width` | `1.5rem` | Width |\r\n| `--pg-icon-height` | `1.5rem` | Height |\r\n")</script><section><h3><span>basic</span></h3><x-pg-icon-basic></x-pg-icon-basic></section><h2 id="pgInputCheckH2">pg-input-check<a title="Link to pg-input-check" href="#pg-input-check" id="pg-input-check"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z"></path></svg></a><a title="View Code" href="https://github.com/Pictogrammers/Components/tree/master/src/pg/inputCheck" target="_blank"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M9.54 15.65L11.63 17.74L10.35 19L7 15.65L10.35 12.3L11.63 13.56L9.54 15.65M17 15.65L13.65 19L12.38 17.74L14.47 15.65L12.38 13.56L13.65 12.3L17 15.65Z"></path></svg></a><span class="label">component</span><button id="pgInputCheckReadme" title="Expand Documentation"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z"></path></svg></button><span class="line"></span></h2><div class="markdown" id="pgInputCheckContainer"></div><script>markdown("pgInputCheck", "\r\n\r\nThe `pg-input-check` component is a styled checkbox.\r\n\r\n```typescript\r\nimport '@pictogrammers/components/pg/inputCheck';\r\nimport PgInputCheck from '@pictogrammers/components/pg/inputCheck';\r\n```\r\n\r\n```html\r\n<pg-input-check></pg-input-check>\r\n```\r\n\r\n## Attributes\r\n\r\n| Attributes | Tested | Description |\r\n| ---------- | -------- | ----------- |\r\n| value | &#x2705; | `true` or `false` |\r\n\r\n## Events\r\n\r\n| Attributes | Tested | Description |\r\n| ---------- | -------- | ----------- |\r\n| change | &#x2705; | Click toggles boolean. |\r\n\r\n## CSS Variables\r\n\r\n| CSS Variables | Default | Description |\r\n| ------------------- | --------- | ----------- |\r\n| `--pg-input-check-blank-color` | `#453C4F` | Color |\r\n| `--pg-input-check-chcked-color` | `#453C4F` | Color |\r\n| `--pg-icon-size` | `1.5rem` | Width / Height |")</script><section><h3><span>basic</span></h3><x-pg-input-check-basic></x-pg-input-check-basic></section><h2 id="pgInputCheckListH2">pg-input-check-list<a title="Link to pg-input-check-list" href="#pg-input-check-list" id="pg-input-check-list"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z"></path></svg></a><a title="View Code" href="https://github.com/Pictogrammers/Components/tree/master/src/pg/inputCheckList" target="_blank"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M9.54 15.65L11.63 17.74L10.35 19L7 15.65L10.35 12.3L11.63 13.56L9.54 15.65M17 15.65L13.65 19L12.38 17.74L14.47 15.65L12.38 13.56L13.65 12.3L17 15.65Z"></path></svg></a><span class="label">component</span><button id="pgInputCheckListReadme" title="Expand Documentation"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z"></path></svg></button><span class="line"></span></h2><div class="markdown" id="pgInputCheckListContainer"></div><script>markdown("pgInputCheckList", "\r\n\r\nThe `pg-input-check-list` component is a list of checkboxes.\r\n\r\n```typescript\r\nimport '@pictogrammers/components/pg/inputCheck';\r\nimport PgInputCheck from '@pictogrammers/components/pg/inputCheck';\r\n```\r\n\r\n```html\r\n<pg-input-check-list></pg-input-check-list>\r\n```\r\n\r\n## Attributes\r\n\r\n| Attributes | Tested | Description |\r\n| ---------- | -------- | ----------- |\r\n| value | &#x2705; | Array of checked values. |\r\n| options | &#x2705; | Array of items. |\r\n\r\nEach option object must have a `value`. Optionally a `label` and `disabled`.\r\n\r\n## Events\r\n\r\n| Attributes | Tested | Description |\r\n| ---------- | -------- | ----------- |\r\n| change | &#x2705; | Any change in the list checks. |\r\n\r\n## CSS Variables\r\n\r\n| CSS Variables | Default | Description |\r\n| ------------------- | --------- | ----------- |\r\n| `--pg-input-check-blank-color` | `#453C4F` | Color |\r\n| `--pg-input-check-chcked-color` | `#453C4F` | Color |\r\n| `--pg-icon-size` | `1.5rem` | Width / Height |")</script><section><h3><span>basic</span></h3><x-pg-input-check-list-basic></x-pg-input-check-list-basic></section><h2 id="pgInputFileLocalH2">pg-input-file-local<a title="Link to pg-input-file-local" href="#pg-input-file-local" id="pg-input-file-local"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z"></path></svg></a><a title="View Code" href="https://github.com/Pictogrammers/Components/tree/master/src/pg/inputFileLocal" target="_blank"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M9.54 15.65L11.63 17.74L10.35 19L7 15.65L10.35 12.3L11.63 13.56L9.54 15.65M17 15.65L13.65 19L12.38 17.74L14.47 15.65L12.38 13.56L13.65 12.3L17 15.65Z"></path></svg></a><span class="label">component</span><button id="pgInputFileLocalReadme" title="Expand Documentation"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z"></path></svg></button><span class="line"></span></h2><div class="markdown" id="pgInputFileLocalContainer"></div><script>markdown("pgInputFileLocal", "\r\n\r\nThe `pg-input-file-local` component allows a quick way to read uploaded files for local processing. Such as reading a JSON file or text based file. It can also take in image files.\r\n\r\n```typescript\r\nimport '@pictogrammers/components/pg/inputLocalFile';\r\nimport PgInputFileLocal from '@pictogrammers/components/pg/inputLocalFile';\r\n```\r\n\r\n```html\r\n<pg-input-file-local\r\n acceptsFileType=\"json,txt\">\r\n</pg-input-file-local>\r\n```\r\n\r\n## Attributes\r\n\r\n| Attributes | Tested | Description |\r\n| ------------------- | -------- | ----------- |\r\n| `accepts-file-type` | &#x2705; | Allowed files. |\r\n\r\n## Events\r\n\r\n| Events | Detail |\r\n| ---------- | ------ |\r\n| `change` | `{ value, name }` |\r\n\r\n## CSS Variables\r\n\r\nFor CSS Variables please look at the `pg-button` as all CSS styles are shared.")</script><section><h3><span>basic</span></h3><x-pg-input-file-local-basic></x-pg-input-file-local-basic></section><h2 id="pgInputHexRgbH2">pg-input-hex-rgb<a title="Link to pg-input-hex-rgb" href="#pg-input-hex-rgb" id="pg-input-hex-rgb"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z"></path></svg></a><a title="View Code" href="https://github.com/Pictogrammers/Components/tree/master/src/pg/inputHexRgb" target="_blank"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M9.54 15.65L11.63 17.74L10.35 19L7 15.65L10.35 12.3L11.63 13.56L9.54 15.65M17 15.65L13.65 19L12.38 17.74L14.47 15.65L12.38 13.56L13.65 12.3L17 15.65Z"></path></svg></a><span class="label">component</span><button id="pgInputHexRgbReadme" title="Expand Documentation"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z"></path></svg></button><span class="line"></span></h2><div class="markdown" id="pgInputHexRgbContainer"></div><script>markdown("pgInputHexRgb", "\r\n\r\nThe `pg-input-hex-rgb` component allows quick input of hex or RGB color input. This is commonly placed above the `pg-color` selection.\r\n\r\n```typescript\r\nimport '@pictogrammers/components/pgInputHexRgb.js';\r\n```\r\n\r\n```html\r\n<pg-input-hex-rgb value=\"#000000\"></pg-input-hex-rgb>\r\n```\r\n\r\n| Attributes | Tested | Description |\r\n| ---------- | -------- | ----------- |\r\n| value | | Hex |")</script><section><h3><span>basic</span></h3><x-pg-input-hex-rgb-basic></x-pg-input-hex-rgb-basic></section><h2 id="pgInputPixelEditorH2">pg-input-pixel-editor<a title="Link to pg-input-pixel-editor" href="#pg-input-pixel-editor" id="pg-input-pixel-editor"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z"></path></svg></a><a title="View Code" href="https://github.com/Pictogrammers/Components/tree/master/src/pg/inputPixelEditor" target="_blank"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M9.54 15.65L11.63 17.74L10.35 19L7 15.65L10.35 12.3L11.63 13.56L9.54 15.65M17 15.65L13.65 19L12.38 17.74L14.47 15.65L12.38 13.56L13.65 12.3L17 15.65Z"></path></svg></a><span class="label">component</span><button id="pgInputPixelEditorReadme" title="Expand Documentation"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z"></path></svg></button><span class="line"></span></h2><div class="markdown" id="pgInputPixelEditorContainer"></div><script>markdown("pgInputPixelEditor", "\r\n\r\nThe `pg-input-pixel-editor` component is used to edit images. Tailored for pen or mouse input the editor can be used for various image editing tasks.\r\n\r\n```typescript\r\nimport '@pictogrammers/components/pgInputPixelEditor';\r\nimport { PgInputPixelEditor } from '@pictogrammers/components/pgInputPixelEditor';\r\n```\r\n\r\n```html\r\n<pg-input-pixel-editor></pg-input-pixel-editor>\r\n```\r\n\r\n## Attributes\r\n\r\n| Attributes | Tested | Description |\r\n| ----------- | -------- | ----------- |\r\n| `name` | | Unique name in `pg-form` |\r\n| `width` | | Pixel width. Default `10` |\r\n| `height` | | Pixel height. Default `10` |\r\n| `size` | | Pixel size, minimum value `4`. Default `10` |\r\n| `gridSize` | | Grid spacing between cells. Default `1` |\r\n\r\n## Events\r\n\r\n| Events | Tested | Description |\r\n| ---------- | -------- | ----------- |\r\n| `change` | | `{ detail: { value }` |\r\n| `input` | | `{ detail: { value }` |\r\n\r\n## Methods\r\n\r\nSee usage for each method below.\r\n\r\n| Method | Tested | Description |\r\n| ---------- | -------- | ----------- |\r\n| `save(options)` | - | Save file. |\r\n| `open(json)` | - | Open file. |\r\n| `undo()` | - | Undo. |\r\n| `hasUndo()` | - | Has undo |\r\n| `hasRedo()` | - | Has redo |\r\n| `redo()` | - | Redo. |\r\n| `selectLayer()` | - | Select layer. |\r\n| `getLayers()` | - | Get layer array. |\r\n| `addLayer(option)` | - | Add layer. |\r\n| `removeLayer(index)` | - | Remove layer. |\r\n| `flattenLayers(layerIndexes)` | - | Flatten layers. |\r\n| `moveLayer(startIndex, endIndex)` | - | Move layer. |\r\n| `getColors()` | - | Get colors. |\r\n| `addColor(r, g, b, a)` | - | Add color. |\r\n| `removeColor(index)` | - | Remove color. |\r\n| `moveColor(startIndex, endIndex)` | - | Move index. |\r\n| `rotateClockwise()` | - | Rotate. |\r\n| `rotateCounterclockwise()` | - | Rotate. |\r\n| `move(x, y[, layer])` | - | Move. |\r\n| `flipHorizontal()` | - | Flip horizontal. |\r\n| `flipVertical()` | - | Flip vertical. |\r\n| `invert()` | - | Invert layer. |\r\n\r\n### `save(options)` Method\r\n\r\nThe save method allows getting the JSON representation of the current editor.\r\n\r\n```typescript\r\n@Part() $editor: PgInputPixelEditor;\r\n\r\nhandleSave() {\r\n const json = await this.$editor.save({\r\n // Include history\r\n history: true,\r\n });\r\n // use json\r\n}\r\n```\r\n\r\n### `open(json)` Method\r\n\r\nThe open method allows loading json for previously created images.\r\n\r\n```typescript\r\n@Part() $editor: PgInputPixelEditor;\r\n\r\nhandleOpen() {\r\n const error = await this.$editor.open(json);\r\n if (error) {\r\n throw new Error(error.message);\r\n }\r\n}\r\n```\r\n\r\n## JSON Format\r\n\r\n- `width` - Image width.\r\n- `height` - Image width.\r\n- `transparent` - Render transparent background.\r\n\r\nA complete JSON storage for a 10x10 image.\r\n\r\n```json\r\n{\r\n \"width\": 10,\r\n \"height\": 10,\r\n \"transparent\": true,\r\n \"colors\": [\r\n [0, 0, 0, 0],\r\n [0, 0, 0, 1]\r\n ],\r\n \"layers\": [\r\n {\r\n \"name\": \"Layer 1\",\r\n \"export\": true,\r\n \"locked\": false,\r\n \"visible\": true,\r\n \"opacity\": 1\r\n }\r\n ],\r\n \"data\": [\r\n [\r\n [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],\r\n [0, 1, 1, 1, 1, 1, 1, 1, 1, 0],\r\n [0, 1, 0, 0, 0, 0, 0, 0, 1, 0],\r\n [0, 1, 0, 0, 0, 0, 0, 0, 1, 0],\r\n [0, 1, 0, 0, 0, 0, 0, 0, 1, 0],\r\n [0, 1, 0, 0, 0, 0, 0, 0, 1, 0],\r\n [0, 1, 0, 0, 0, 0, 0, 0, 1, 0],\r\n [0, 1, 0, 0, 0, 0, 0, 0, 1, 0],\r\n [0, 1, 1, 1, 1, 1, 1, 1, 1, 0],\r\n [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]\r\n ]\r\n ]\r\n}\r\n```\r\n")</script><section><h3><span>basic</span></h3><x-pg-input-pixel-editor-basic></x-pg-input-pixel-editor-basic></section><h2 id="pgInputRangeH2">pg-input-range<a title="Link to pg-input-range" href="#pg-input-range" id="pg-input-range"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z"></path></svg></a><a title="View Code" href="https://github.com/Pictogrammers/Components/tree/master/src/pg/inputRange" target="_blank"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M9.54 15.65L11.63 17.74L10.35 19L7 15.65L10.35 12.3L11.63 13.56L9.54 15.65M17 15.65L13.65 19L12.38 17.74L14.47 15.65L12.38 13.56L13.65 12.3L17 15.65Z"></path></svg></a><span class="label">component</span><button id="pgInputRangeReadme" title="Expand Documentation"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z"></path></svg></button><span class="line"></span></h2><div class="markdown" id="pgInputRangeContainer"></div><script>markdown("pgInputRange", "\r\n\r\nThe `pg-input-range` component creates an input range slider.\r\n\r\n```typescript\r\nimport '@pictogrammers/components/pgInputRange';\r\nimport { PgInputRange } from '@pictogrammers/components/pgInputRange';\r\n```\r\n\r\n```html\r\n<pg-input-range value=\"50\" min=\"1\" max=\"100\"></pg-input-range>\r\n```\r\n\r\n| Attributes | Tested | Description |\r\n| ---------- | -------- | ----------- |\r\n| min | | Min |\r\n| max | | Max |\r\n| step | | Step = 1 |")</script><section><h3><span>basic</span></h3><x-pg-input-range-basic></x-pg-input-range-basic></section><h2 id="pgInputSelectH2">pg-input-select<a title="Link to pg-input-select" href="#pg-input-select" id="pg-input-select"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z"></path></svg></a><a title="View Code" href="https://github.com/Pictogrammers/Components/tree/master/src/pg/inputSelect" target="_blank"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M9.54 15.65L11.63 17.74L10.35 19L7 15.65L10.35 12.3L11.63 13.56L9.54 15.65M17 15.65L13.65 19L12.38 17.74L14.47 15.65L12.38 13.56L13.65 12.3L17 15.65Z"></path></svg></a><span class="label">component</span><button id="pgInputSelectReadme" title="Expand Documentation"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z"></path></svg></button><span class="line"></span></h2><div class="markdown" id="pgInputSelectContainer"></div><script>markdown("pgInputSelect", "\r\n\r\nThe `pg-input-select` component creates an select drop down.\r\n\r\n```typescript\r\nimport '@pictogrammers/components/pgInputSelect';\r\nimport { PgInputSelect } '@pictogrammers/components/pgInputSelect';\r\n```\r\n\r\n```html\r\n<pg-input-select></pg-input-select>\r\n```\r\n\r\n## Attributes\r\n\r\n| Attributes | Tested | Description |\r\n| ---------- | -------- | ----------- |\r\n| options | | `[{ label: 'hello', value: 'world' }]` |\r\n| value | | `world` |\r\n\r\n## Events\r\n\r\n| Event | Tested | Detail |\r\n| --------- | -------- | ----------- |\r\n| change | | `{ label: 'hello', value: 'world' }` |\r\n")</script><section><h3><span>basic</span></h3><x-pg-input-select-basic></x-pg-input-select-basic></section><h2 id="pgInputTextH2">pg-input-text<a title="Link to pg-input-text" href="#pg-input-text" id="pg-input-text"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z"></path></svg></a><a title="View Code" href="https://github.com/Pictogrammers/Components/tree/master/src/pg/inputText" target="_blank"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M9.54 15.65L11.63 17.74L10.35 19L7 15.65L10.35 12.3L11.63 13.56L9.54 15.65M17 15.65L13.65 19L12.38 17.74L14.47 15.65L12.38 13.56L13.65 12.3L17 15.65Z"></path></svg></a><span class="label">component</span><button id="pgInputTextReadme" title="Expand Documentation"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z"></path></svg></button><span class="line"></span></h2><div class="markdown" id="pgInputTextContainer"></div><script>markdown("pgInputText", "\r\n\r\nThe `pg-input-text` component creates an input that accepts text input.\r\n\r\n```typescript\r\nimport '@pictogrammers/components/pgInputText';\r\nimport { PgInputText } from '@pictogrammers/components/pgInputText';\r\n```\r\n\r\n```html\r\n<pg-input-text value=\"50\"></pg-input-text>\r\n```\r\n\r\n## Attributes\r\n\r\n| Attributes | Tested | Description |\r\n| ----------- | -------- | ----------- |\r\n| name | | Unique name in `pg-form` |\r\n| value | | Field value |\r\n| placeholder | | Placeholder text |\r\n\r\n## Events\r\n\r\n| Events | Tested | Description |\r\n| ---------- | -------- | ----------- |\r\n| change | | `{ detail: { value }` |\r\n| input | | `{ detail: { value }` |\r\n")</script><section><h3><span>basic</span></h3><x-pg-input-text-basic></x-pg-input-text-basic></section><h2 id="pgInputTextIconH2">pg-input-text-icon<a title="Link to pg-input-text-icon" href="#pg-input-text-icon" id="pg-input-text-icon"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z"></path></svg></a><a title="View Code" href="https://github.com/Pictogrammers/Components/tree/master/src/pg/inputTextIcon" target="_blank"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M9.54 15.65L11.63 17.74L10.35 19L7 15.65L10.35 12.3L11.63 13.56L9.54 15.65M17 15.65L13.65 19L12.38 17.74L14.47 15.65L12.38 13.56L13.65 12.3L17 15.65Z"></path></svg></a><span class="label">component</span><button id="pgInputTextIconReadme" title="Expand Documentation"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z"></path></svg></button><span class="line"></span></h2><div class="markdown" id="pgInputTextIconContainer"></div><script>markdown("pgInputTextIcon", "\r\n\r\nThe `pg-input-text` component creates an input that accepts text input.\r\n\r\n```typescript\r\nimport '@pictogrammers/components/pgInputText';\r\nimport { PgInputRange } from '@pictogrammers/components/pgInputText';\r\n```\r\n\r\n```html\r\n<pg-input-text value=\"50\"></pg-input-text>\r\n```\r\n\r\n## Attributes\r\n\r\n| Attributes | Tested | Description |\r\n| ---------- | -------- | ----------- |\r\n| name | | Unique name in `pg-form` |\r\n| value | | Field value |\r\n\r\n## Events\r\n\r\n| Events | Tested | Description |\r\n| ---------- | -------- | ----------- |\r\n| change | | `{ detail: { value }` |\r\n| input | | `{ detail: { value }` |\r\n")</script><h2 id="pgInputUserSelectH2">pg-input-user-select<a title="Link to pg-input-user-select" href="#pg-input-user-select" id="pg-input-user-select"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z"></path></svg></a><a title="View Code" href="https://github.com/Pictogrammers/Components/tree/master/src/pg/inputUserSelect" target="_blank"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M9.54 15.65L11.63 17.74L10.35 19L7 15.65L10.35 12.3L11.63 13.56L9.54 15.65M17 15.65L13.65 19L12.38 17.74L14.47 15.65L12.38 13.56L13.65 12.3L17 15.65Z"></path></svg></a><span class="label">component</span><button id="pgInputUserSelectReadme" title="Expand Documentation"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z"></path></svg></button><span class="line"></span></h2><div class="markdown" id="pgInputUserSelectContainer"></div><script>markdown("pgInputUserSelect", "\r\n\r\nThe `pg-input-user-select` component creates an select drop down.\r\n\r\n```typescript\r\nimport '@pictogrammers/components/pgInputUserSelect';\r\nimport { PgInputUserSelect } '@pictogrammers/components/pgInputUserSelect';\r\n```\r\n\r\n```html\r\n<pg-input-user-select></pg-input-user-select>\r\n```\r\n\r\n## Attributes\r\n\r\n| Attributes | Tested | Description |\r\n| ---------- | -------- | ----------- |\r\n| options | | `[User, ...]` |\r\n| value | | `world` |\r\n\r\n## Events\r\n\r\n| Event | Tested | Detail |\r\n| --------- | -------- | ----------- |\r\n| change | | `User` |\r\n\r\n## Models\r\n\r\n```yaml\r\n$ref: '#/api/model/user'\r\n```")</script><section><h3><span>basic</span></h3><x-pg-input-user-select-basic></x-pg-input-user-select-basic></section><h2 id="pgListTagH2">pg-list-tag<a title="Link to pg-list-tag" href="#pg-list-tag" id="pg-list-tag"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z"></path></svg></a><a title="View Code" href="https://github.com/Pictogrammers/Components/tree/master/src/pg/listTag" target="_blank"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M9.54 15.65L11.63 17.74L10.35 19L7 15.65L10.35 12.3L11.63 13.56L9.54 15.65M17 15.65L13.65 19L12.38 17.74L14.47 15.65L12.38 13.56L13.65 12.3L17 15.65Z"></path></svg></a><span class="label">component</span><button id="pgListTagReadme" title="Expand Documentation"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z"></path></svg></button><span class="line"></span></h2><div class="markdown" id="pgListTagContainer"></div><script>markdown("pgListTag", "\r\n\r\nThe `pg-icon` component allows a standard way to render [MaterialDesignIcons.com](https://materialdesignicons.com) icons.\r\n\r\n```typescript\r\nimport '@pictogrammers/components/pg/icon';\r\nimport PgIcon from '@pictogrammers/components/pg/icon';\r\n```\r\n\r\n```html\r\n<pg-icon path=\"...\"></pg-icon>\r\n```\r\n\r\n## Attributes\r\n\r\n| Attributes | Tested | Description |\r\n| ---------- | -------- | ----------- |\r\n| path | &#x2705; | Set path data |\r\n\r\n## CSS Variables\r\n\r\n| CSS Variables | Default | Description |\r\n| ------------------- | --------- | ----------- |\r\n| `--pg-icon-color` | `#453C4F` | Color |\r\n| `--pg-icon-width` | `1.5rem` | Width |\r\n| `--pg-icon-height` | `1.5rem` | Height |")</script><section><h3><span>basic</span></h3><x-pg-list-tag-basic></x-pg-list-tag-basic></section><h2 id="pgMarkdownH2">pg-markdown<a title="Link to pg-markdown" href="#pg-markdown" id="pg-markdown"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z"></path></svg></a><a title="View Code" href="https://github.com/Pictogrammers/Components/tree/master/src/pg/markdown" target="_blank"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M9.54 15.65L11.63 17.74L10.35 19L7 15.65L10.35 12.3L11.63 13.56L9.54 15.65M17 15.65L13.65 19L12.38 17.74L14.47 15.65L12.38 13.56L13.65 12.3L17 15.65Z"></path></svg></a><span class="label">component</span><button id="pgMarkdownReadme" title="Expand Documentation"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z"></path></svg></button><span class="line"></span></h2><div class="markdown" id="pgMarkdownContainer"></div><script>markdown("pgMarkdown", "\r\n\r\nRender markdown text with rich formatting.\r\n\r\n```typescript\r\nimport '@pictogrammers/components/pg/markdown';\r\n```\r\n\r\n## Usage\r\n\r\nAll markdown formatting is supported. Code blocks support:\r\n\r\n- css\r\n- groovy\r\n- javascript\r\n- json\r\n- jsx\r\n- tsx\r\n- java\r\n- markup (aka html, xml)\r\n- typescript\r\n- sass\r\n- scss\r\n- yaml (with a custom viewer)\r\n- php\r\n- bash\r\n- markdown")</script><section><h3><span>basic</span></h3><x-pg-markdown-basic></x-pg-markdown-basic></section><h2 id="pgMenuH2">pg-menu<a title="Link to pg-menu" href="#pg-menu" id="pg-menu"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z"></path></svg></a><a title="View Code" href="https://github.com/Pictogrammers/Components/tree/master/src/pg/menu" target="_blank"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M9.54 15.65L11.63 17.74L10.35 19L7 15.65L10.35 12.3L11.63 13.56L9.54 15.65M17 15.65L13.65 19L12.38 17.74L14.47 15.65L12.38 13.56L13.65 12.3L17 15.65Z"></path></svg></a><span class="label">component</span><button id="pgMenuReadme" title="Expand Documentation"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z"></path></svg></button><span class="line"></span></h2><div class="markdown" id="pgMenuContainer"></div><script>markdown("pgMenu", "\r\n\r\nThe `pg-menu` component renders a menu list. Menus can be used inline, but are usually created by a parent component. For example:\r\n\r\n- `pg-button-menu` - Button Menu\r\n - Default item `type` is `PgMenuItem`\r\n- `pg-button-icon-menu` - Button Icon Menu\r\n - Default item `type` is `PgMenuItem`\r\n- `PgMenuOverlay` Utility overlay for menus.\r\n - The item `type` is required.\r\n\r\n```typescript\r\nimport '@pictogrammers/components/pg/menu';\r\n```\r\n\r\n```html\r\n<pg-menu part=\"menu\"></pg-menu>\r\n```\r\n\r\n| Attributes | Tested | Description |\r\n| ---------- | -------- | ----------- |\r\n| `items` | | Set items list. Ex: `{ type: PgMenuItem }` |\r\n\r\n```typescript\r\nimport PgMenuItem from '@pictogrammers/components/pg/menuItem';\r\n\r\n// ...\r\n@Part() $menu: PgMenu;\r\n\r\nconnectedCallback() {\r\n this.$menu.items = [{\r\n label: 'Item 1',\r\n value: 'item1',\r\n type: PgMenuItem\r\n }];\r\n}\r\n```\r\n\r\n## CSS Variables\r\n\r\n| Variable | Default |\r\n| -------- | ------- |\r\n| `--pg-menu-padding` | `0.25rem` |\r\n| `--pg-menu-border-width` | `0` |\r\n| `--pg-menu-background-color` | `transparent` |\r\n| `--pg-menu-box-shadow` | `none` |")</script><section><h3><span>basic</span></h3><x-pg-menu-basic></x-pg-menu-basic></section><h2 id="pgMenuDividerH2">pg-menu-divider<a title="Link to pg-menu-divider" href="#pg-menu-divider" id="pg-menu-divider"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z"></path></svg></a><a title="View Code" href="https://github.com/Pictogrammers/Components/tree/master/src/pg/menuDivider" target="_blank"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M9.54 15.65L11.63 17.74L10.35 19L7 15.65L10.35 12.3L11.63 13.56L9.54 15.65M17 15.65L13.65 19L12.38 17.74L14.47 15.65L12.38 13.56L13.65 12.3L17 15.65Z"></path></svg></a><span class="label">component</span><button id="pgMenuDividerReadme" title="Expand Documentation"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z"></path></svg></button><span class="line"></span></h2><div class="markdown" id="pgMenuDividerContainer"></div><script>markdown("pgMenuDivider", "\r\n\r\nThe `PgMenuDivider` is used as a `type: PgMenuDivider` with the `pg-menu` component items.\r\n\r\n```typescript\r\nimport '@pictogrammers/components/pgMenuDivider.js';\r\n```\r\n")</script><section><h3><span>basic</span></h3><x-pg-menu-divider-basic></x-pg-menu-divider-basic></section><h2 id="pgMenuIconH2">pg-menu-icon<a title="Link to pg-menu-icon" href="#pg-menu-icon" id="pg-menu-icon"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z"></path></svg></a><a title="View Code" href="https://github.com/Pictogrammers/Components/tree/master/src/pg/menuIcon" target="_blank"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M9.54 15.65L11.63 17.74L10.35 19L7 15.65L10.35 12.3L11.63 13.56L9.54 15.65M17 15.65L13.65 19L12.38 17.74L14.47 15.65L12.38 13.56L13.65 12.3L17 15.65Z"></path></svg></a><span class="label">component</span><button id="pgMenuIconReadme" title="Expand Documentation"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z"></path></svg></button><span class="line"></span></h2><div class="markdown" id="pgMenuIconContainer"></div><script>markdown("pgMenuIcon", "\r\n\r\nVisual color picker using the standard Material Design pallet.\r\n\r\n```typescript\r\nimport '@pictogrammers/components/pg/menuIcon';\r\n```\r\n\r\n## Usage\r\n\r\n| Events | Description |\r\n| ------ | ----------- |\r\n| `onchange` | `event = { detail: { r, g, b, hex } }` |\r\n")</script><section><h3><span>basic</span></h3><x-pg-menu-icon-basic></x-pg-menu-icon-basic></section><h2 id="pgMenuItemH2">pg-menu-item<a title="Link to pg-menu-item" href="#pg-menu-item" id="pg-menu-item"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z"></path></svg></a><a title="View Code" href="https://github.com/Pictogrammers/Components/tree/master/src/pg/menuItem" target="_blank"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M9.54 15.65L11.63 17.74L10.35 19L7 15.65L10.35 12.3L11.63 13.56L9.54 15.65M17 15.65L13.65 19L12.38 17.74L14.47 15.65L12.38 13.56L13.65 12.3L17 15.65Z"></path></svg></a><span class="label">component</span><button id="pgMenuItemReadme" title="Expand Documentation"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z"></path></svg></button><span class="line"></span></h2><div class="markdown" id="pgMenuItemContainer"></div><script>markdown("pgMenuItem", "\r\n\r\nThe `PgMenuItem` is used with the `pg-menu` as a `type: PgMenuItem`.\r\n\r\nFor icon support use `PgMenuItemIcon`.\r\n\r\n## Usage\r\n\r\n```typescript\r\nimport '@pictogrammers/components/pgMenuItem.js';\r\n```\r\n\r\n```typescript\r\nthis.$items = [{\r\n type: PgMenuItem,\r\n label: 'Item 1'\r\n}];\r\n```\r\n\r\n| Attributes | Tested | Description |\r\n| ---------- | -------- | ----------- |\r\n| `label` | | Item label. |\r\n| `checked` | | Item checked. |\r\n| `disabled` | | Item disabled. |\r\n\r\n## Events\r\n\r\n```typescript\r\nthis.$item.addEventListener('select', (e: any) => {\r\n const { index } = e.detail;\r\n});\r\n```")</script><section><h3><span>basic</span></h3><x-pg-menu-item-basic></x-pg-menu-item-basic></section><h2 id="pgMenuItemIconH2">pg-menu-item-icon<a title="Link to pg-menu-item-icon" href="#pg-menu-item-icon" id="pg-menu-item-icon"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z"></path></svg></a><a title="View Code" href="https://github.com/Pictogrammers/Components/tree/master/src/pg/menuItemIcon" target="_blank"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M9.54 15.65L11.63 17.74L10.35 19L7 15.65L10.35 12.3L11.63 13.56L9.54 15.65M17 15.65L13.65 19L12.38 17.74L14.47 15.65L12.38 13.56L13.65 12.3L17 15.65Z"></path></svg></a><span class="label">component</span><button id="pgMenuItemIconReadme" title="Expand Documentation"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z"></path></svg></button><span class="line"></span></h2><div class="markdown" id="pgMenuItemIconContainer"></div><script>markdown("pgMenuItemIcon", "\r\n\r\nThe `PgMenuItemIcon` is the `PgMenuItem` with icon support. The `pg-menu` can use both in the same list, but this component has the overhead of includig `PgIcon`.\r\n\r\n## Usage\r\n\r\n```typescript\r\nimport '@pictogrammers/components/pgMenuItemIcon.js';\r\n```\r\n\r\n```typescript\r\nthis.$items = [{\r\n type: PgMenuItemIcon,\r\n icon: '',\r\n label: 'Item 1'\r\n}];\r\n```\r\n\r\n| Attributes | Tested | Description |\r\n| ---------- | -------- | ----------- |\r\n| `label` | | Item label. |\r\n| `icon` | | Item icon. |\r\n| `checked` | | Item checked. |\r\n| `disabled` | | Item disabled. |\r\n\r\n## Events\r\n\r\n```typescript\r\nthis.$item.addEventListener('select', (e: any) => {\r\n const { index } = e.detail;\r\n});\r\n```")</script><section><h3><span>basic</span></h3><x-pg-menu-item-icon-basic></x-pg-menu-item-icon-basic></section><h2 id="pgModalAlertH2">pg-modal-alert<a title="Link to pg-modal-alert" href="#pg-modal-alert" id="pg-modal-alert"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z"></path></svg></a><a title="View Code" href="https://github.com/Pictogrammers/Components/tree/master/src/pg/modalAlert" target="_blank"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M9.54 15.65L11.63 17.74L10.35 19L7 15.65L10.35 12.3L11.63 13.56L9.54 15.65M17 15.65L13.65 19L12.38 17.74L14.47 15.65L12.38 13.56L13.65 12.3L17 15.65Z"></path></svg></a><span class="label">component</span><button id="pgModalAlertReadme" title="Expand Documentation"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z"></path></svg></button><span class="line"></span></h2><div class="markdown" id="pgModalAlertContainer"></div><script>markdown("pgModalAlert", "\r\n\r\nThe `PgModalAlert` creates a alert box above everything.\r\n\r\n```typescript\r\nimport PgModalAlert from '@pictogrammers/components/pgModalAlert';\r\n```\r\n\r\n```typescript\r\nconst result = await PgModalAlert.open({\r\n header: 'Delete Item',\r\n message: 'Are you sure you want to delete the item?'\r\n});\r\nif (result) {\r\n console.log('Item has been deleted.');\r\n}\r\n```\r\n")</script><section><h3><span>basic</span></h3><x-pg-modal-alert-basic></x-pg-modal-alert-basic></section><h2 id="pgModificationH2">pg-modification<a title="Link to pg-modification" href="#pg-modification" id="pg-modification"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z"></path></svg></a><a title="View Code" href="https://github.com/Pictogrammers/Components/tree/master/src/pg/modification" target="_blank"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M9.54 15.65L11.63 17.74L10.35 19L7 15.65L10.35 12.3L11.63 13.56L9.54 15.65M17 15.65L13.65 19L12.38 17.74L14.47 15.65L12.38 13.56L13.65 12.3L17 15.65Z"></path></svg></a><span class="label">component</span><button id="pgModificationReadme" title="Expand Documentation"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z"></path></svg></button><span class="line"></span></h2><div class="markdown" id="pgModificationContainer"></div><script>markdown("pgModification", "\r\n\r\nThe `pg-modification` component takes an array of modifications and displays the values.\r\n\r\n```typescript\r\nimport '@pictogrammers/components/pg/modification';\r\nimport PgModification from '@pictogrammers/components/pg/modification';\r\n```\r\n\r\n```html\r\n<pg-modification></pg-modification>\r\n```\r\n\r\n## Attributes\r\n\r\n| Attributes | Tested | Default | Description |\r\n| ---------- | -------- | ----------- |\r\n| modifications | &#x2705; | Set modification array |\r\n| edit | &#x2705; | `false` | Toggle edit mode |\r\n\r\n## Events\r\n\r\n| Attributes | Tested | Description |\r\n| ---------- | -------- | ----------- |\r\n| issue | &#x2705; | Issue number clicked. |\r\n| edit | &#x2705; | Edit clicked. |\r\n\r\n## CSS Variables\r\n\r\n| CSS Variables | Default | Description |\r\n| ------------------- | --------- | ----------- |\r\n| `--pg-icon-color` | `#453C4F` | Color |\r\n| `--pg-icon-width` | `1.5rem` | Width |\r\n| `--pg-icon-height` | `1.5rem` | Height |")</script><section><h3><span>basic</span></h3><x-pg-modification-basic></x-pg-modification-basic></section><h2 id="pgNavH2">pg-nav<a title="Link to pg-nav" href="#pg-nav" id="pg-nav"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z"></path></svg></a><a title="View Code" href="https://github.com/Pictogrammers/Components/tree/master/src/pg/nav" target="_blank"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M9.54 15.65L11.63 17.74L10.35 19L7 15.65L10.35 12.3L11.63 13.56L9.54 15.65M17 15.65L13.65 19L12.38 17.74L14.47 15.65L12.38 13.56L13.65 12.3L17 15.65Z"></path></svg></a><span class="label">component</span><button id="pgNavReadme" title="Expand Documentation"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z"></path></svg></button><span class="line"></span></h2><div class="markdown" id="pgNavContainer"></div><script>markdown("pgNav", "\r\n\r\nThe `pg-nav` component renders the navigation for the site. This includes `pg-search`.\r\n\r\n```typescript\r\nimport '@pictogrammers/components/pgNav.js';\r\n```\r\n\r\n```html\r\n<pg-nav name=\"Material Design Icons\"></pg-nav>\r\n```\r\n\r\n| Attributes | Tested | Description |\r\n| ---------- | -------- | ----------- |\r\n| name | &#x2705; | Set website name |\r\n| logo | &#x2705; | Set path data |")</script><section><h3><span>basic</span></h3><x-pg-nav-basic></x-pg-nav-basic></section><h2 id="pgOverlayH2">pg-overlay<a title="Link to pg-overlay" href="#pg-overlay" id="pg-overlay"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z"></path></svg></a><a title="View Code" href="https://github.com/Pictogrammers/Components/tree/master/src/pg/overlay" target="_blank"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M9.54 15.65L11.63 17.74L10.35 19L7 15.65L10.35 12.3L11.63 13.56L9.54 15.65M17 15.65L13.65 19L12.38 17.74L14.47 15.65L12.38 13.56L13.65 12.3L17 15.65Z"></path></svg></a><span class="label">component</span><button id="pgOverlayReadme" title="Expand Documentation"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z"></path></svg></button><span class="line"></span></h2><div class="markdown" id="pgOverlayContainer"></div><script>markdown("pgOverlay", "\r\n\r\nThe `PgOverlay` class provides a way to create an element on the body element. Elements that should be attached at the body root should extend `PgOverlay`.\r\n\r\n\r\n## Example Modal\r\n\r\n```typescript\r\nimport { Component, Prop } from '@pictogrammers/element';\r\nimport PgOverlay from '@pictogrammers/components/pgOverlay';\r\n\r\nimport template from './modal.html';\r\nimport style from './modal.css';\r\n\r\n@Component({\r\n selector: 'pg-modal',\r\n template,\r\n style\r\n})\r\nexport default class PgModal extends PgOverlay {\r\n // This will render attached to the body. To close call\r\n // this.close(result);\r\n\r\n @Prop() foo: string = 'Default';\r\n}\r\n```\r\n\r\nWhile this component can be inlined still it will mostly be opened via the a static open method which will create an instance and attach it to the `<body>` tag.\r\n\r\n```typescript\r\nimport PgModal from './../modal/modal';\r\n\r\nconst result = await PgModal.open({\r\n foo: 'bar'\r\n});\r\nconsole.log(result);\r\n```")</script><section><h3><span>basic</span></h3><x-pg-overlay-basic></x-pg-overlay-basic></section><h2 id="pgOverlayContextMenuH2">pg-overlay-context-menu<a title="Link to pg-overlay-context-menu" href="#pg-overlay-context-menu" id="pg-overlay-context-menu"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z"></path></svg></a><a title="View Code" href="https://github.com/Pictogrammers/Components/tree/master/src/pg/overlayContextMenu" target="_blank"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M9.54 15.65L11.63 17.74L10.35 19L7 15.65L10.35 12.3L11.63 13.56L9.54 15.65M17 15.65L13.65 19L12.38 17.74L14.47 15.65L12.38 13.56L13.65 12.3L17 15.65Z"></path></svg></a><span class="label">component</span><button id="pgOverlayContextMenuReadme" title="Expand Documentation"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z"></path></svg></button><span class="line"></span></h2><div class="markdown" id="pgOverlayContextMenuContainer"></div><script>markdown("pgOverlayContextMenu", "\r\n\r\nThe `PgOverlayContextMenu` creates an overlay menu above a source element. For standard menu lists use the `PgMenuItem` for the check.\r\n\r\nComponents that use `PgOverlayContextMenu` include:\r\n\r\n- `pg-input-select`\r\n\r\n## Usage\r\n\r\n```typescript\r\nimport PgMenuItem from '@pictogrammers/components/pg/menuItem';\r\n\r\n#isOpen: false;\r\nhandleSourceClick(e: MouseEvent) {\r\n if (this.#isOpen) { return; }\r\n this.#isOpen = true;\r\n const result = await PgOverlayContextMenu.open({\r\n source: this.$element,\r\n x: e.clientX,\r\n y: e.clientY,\r\n items: [{\r\n label: 'Item 1',\r\n value: 'item1',\r\n type: PgMenuItem\r\n }, {\r\n label: 'Item 2',\r\n value: 'item2',\r\n type: PgMenuItem\r\n }]\r\n });\r\n this.#isOpen = false;\r\n console.log(result);\r\n}\r\n```\r\n")</script><section><h3><span>basic</span></h3><x-pg-overlay-context-menu-basic></x-pg-overlay-context-menu-basic></section><h2 id="pgOverlayMenuH2">pg-overlay-menu<a title="Link to pg-overlay-menu" href="#pg-overlay-menu" id="pg-overlay-menu"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z"></path></svg></a><a title="View Code" href="https://github.com/Pictogrammers/Components/tree/master/src/pg/overlayMenu" target="_blank"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M9.54 15.65L11.63 17.74L10.35 19L7 15.65L10.35 12.3L11.63 13.56L9.54 15.65M17 15.65L13.65 19L12.38 17.74L14.47 15.65L12.38 13.56L13.65 12.3L17 15.65Z"></path></svg></a><span class="label">component</span><button id="pgOverlayMenuReadme" title="Expand Documentation"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z"></path></svg></button><span class="line"></span></h2><div class="markdown" id="pgOverlayMenuContainer"></div><script>markdown("pgOverlayMenu", "\r\n\r\nThe `PgOverlayMenu` creates an overlay menu above a source element. For standard menu lists use the `PgMenuItem` for the check.\r\n\r\nComponents that use `PgOverlayMenu` include:\r\n\r\n- `pg-button-menu`\r\n\r\n## Usage\r\n\r\n```typescript\r\nimport PgMenuItem from '@pictogrammers/components/pg/menuItem';\r\n\r\n#isOpen: false;\r\nhandleSourceClick() {\r\n if (this.#isOpen) { return; }\r\n this.#isOpen = true;\r\n const result = await PgOverlayMenu.open({\r\n source: this.$element,\r\n items: [{\r\n label: 'Item 1',\r\n value: 'item1',\r\n type: PgMenuItem\r\n }, {\r\n label: 'Item 2',\r\n value: 'item2',\r\n type: PgMenuItem\r\n }]\r\n });\r\n this.#isOpen = false;\r\n console.log(result);\r\n}\r\n```\r\n")</script><section><h3><span>basic</span></h3><x-pg-overlay-menu-basic></x-pg-overlay-menu-basic></section><h2 id="pgOverlaySelectMenuH2">pg-overlay-select-menu<a title="Link to pg-overlay-select-menu" href="#pg-overlay-select-menu" id="pg-overlay-select-menu"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z"></path></svg></a><a title="View Code" href="https://github.com/Pictogrammers/Components/tree/master/src/pg/overlaySelectMenu" target="_blank"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M9.54 15.65L11.63 17.74L10.35 19L7 15.65L10.35 12.3L11.63 13.56L9.54 15.65M17 15.65L13.65 19L12.38 17.74L14.47 15.65L12.38 13.56L13.65 12.3L17 15.65Z"></path></svg></a><span class="label">component</span><button id="pgOverlaySelectMenuReadme" title="Expand Documentation"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z"></path></svg></button><span class="line"></span></h2><div class="markdown" id="pgOverlaySelectMenuContainer"></div><script>markdown("pgOverlaySelectMenu", "\r\n\r\nThe `PgOverlaySelectMenu` creates an overlay menu above a source element. For standard menu lists use the `PgMenuItem` for the check.\r\n\r\nComponents that use `PgOverlaySelectMenu` include:\r\n\r\n- `pg-input-select`\r\n\r\n## Usage\r\n\r\n```typescript\r\nimport PgMenuItem from '@pictogrammers/components/pg/menuItem';\r\n\r\n#isOpen: false;\r\nhandleSourceClick() {\r\n if (this.#isOpen) { return; }\r\n this.#isOpen = true;\r\n const result = await PgOverlayMenu.open({\r\n source: this.$element,\r\n items: [{\r\n label: 'Item 1',\r\n value: 'item1',\r\n type: PgMenuItem\r\n }, {\r\n label: 'Item 2',\r\n value: 'item2',\r\n type: PgMenuItem\r\n }]\r\n });\r\n this.#isOpen = false;\r\n console.log(result);\r\n}\r\n```\r\n")</script><section><h3><span>basic</span></h3><x-pg-overlay-select-menu-basic></x-pg-overlay-select-menu-basic></section><h2 id="pgOverlaySubMenuH2">pg-overlay-sub-menu<a title="Link to pg-overlay-sub-menu" href="#pg-overlay-sub-menu" id="pg-overlay-sub-menu"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z"></path></svg></a><a title="View Code" href="https://github.com/Pictogrammers/Components/tree/master/src/pg/overlaySubMenu" target="_blank"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M9.54 15.65L11.63 17.74L10.35 19L7 15.65L10.35 12.3L11.63 13.56L9.54 15.65M17 15.65L13.65 19L12.38 17.74L14.47 15.65L12.38 13.56L13.65 12.3L17 15.65Z"></path></svg></a><span class="label">component</span><button id="pgOverlaySubMenuReadme" title="Expand Documentation"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z"></path></svg></button><span class="line"></span></h2><div class="markdown" id="pgOverlaySubMenuContainer"></div><script>markdown("pgOverlaySubMenu", "\r\n\r\nThe `PgOverlaySubMenu` creates an overlay menu above a source element. For standard menu lists use the `PgMenuItem` for the check.\r\n\r\nComponents that use `PgOverlaySubMenu` include:\r\n\r\n- `pg-input-select`\r\n\r\n## Usage\r\n\r\n```typescript\r\nimport PgMenuItem from '@pictogrammers/components/pg/overlaySubMenu';\r\n\r\n#isOpen: false;\r\nhandleSourceClick(e: MouseEvent) {\r\n if (this.#isOpen) { return; }\r\n this.#isOpen = true;\r\n const result = await PgOverlaySubMenu.open({\r\n source: this.$element,\r\n x: e.clientX,\r\n y: e.clientY,\r\n items: [{\r\n label: 'Item 1',\r\n value: 'item1',\r\n type: PgMenuItem\r\n }, {\r\n label: 'Item 2',\r\n value: 'item2',\r\n type: PgMenuItem\r\n }]\r\n });\r\n this.#isOpen = false;\r\n console.log(result);\r\n}\r\n```\r\n")</script><h2 id="pgPickerH2">pg-picker<a title="Link to pg-picker" href="#pg-picker" id="pg-picker"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z"></path></svg></a><a title="View Code" href="https://github.com/Pictogrammers/Components/tree/master/src/pg/picker" target="_blank"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M9.54 15.65L11.63 17.74L10.35 19L7 15.65L10.35 12.3L11.63 13.56L9.54 15.65M17 15.65L13.65 19L12.38 17.74L14.47 15.65L12.38 13.56L13.65 12.3L17 15.65Z"></path></svg></a><span class="label">component</span><button id="pgPickerReadme" title="Expand Documentation"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z"></path></svg></button><span class="line"></span></h2><div class="markdown" id="pgPickerContainer"></div><script>markdown("pgPicker", "\r\n\r\nDeprecated\r\n\r\n```typescript\r\nimport '@pictogrammers/components/pg/color';\r\n```\r\n\r\n## Usage\r\n\r\n| Events | Description |\r\n| ------ | ----------- |\r\n| `onchange` | `event = { detail: { r, g, b, hex } }` |\r\n")</script><h2 id="pgPreviewH2">pg-preview<a title="Link to pg-preview" href="#pg-preview" id="pg-preview"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z"></path></svg></a><a title="View Code" href="https://github.com/Pictogrammers/Components/tree/master/src/pg/preview" target="_blank"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M9.54 15.65L11.63 17.74L10.35 19L7 15.65L10.35 12.3L11.63 13.56L9.54 15.65M17 15.65L13.65 19L12.38 17.74L14.47 15.65L12.38 13.56L13.65 12.3L17 15.65Z"></path></svg></a><span class="label">component</span><button id="pgPreviewReadme" title="Expand Documentation"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z"></path></svg></button><span class="line"></span></h2><div class="markdown" id="pgPreviewContainer"></div><script>markdown("pgPreview", "\r\n\r\nThe `pg-preview` component allows a standard way to render a grid behind an icon.\r\n\r\n```typescript\r\nimport '@pictogrammers/components/pg/preview';\r\nimport PgIcon from '@pictogrammers/components/pg/preview';\r\n```\r\n\r\n```html\r\n<pg-preview path=\"...\" size=\"4\"></pg-preview>\r\n```\r\n\r\n| Attributes | Tested | Default | Description |\r\n| ---------- | -------- | ------- | ----------- |\r\n| path | &#x2705; | | Set path data |\r\n| size | &#x2705; | 4 | |\r\n| width | | 24 | |\r\n| height | | 24 | |")</script><section><h3><span>basic</span></h3><x-pg-preview-basic></x-pg-preview-basic></section><h2 id="pgScrollH2">pg-scroll<a title="Link to pg-scroll" href="#pg-scroll" id="pg-scroll"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z"></path></svg></a><a title="View Code" href="https://github.com/Pictogrammers/Components/tree/master/src/pg/scroll" target="_blank"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M9.54 15.65L11.63 17.74L10.35 19L7 15.65L10.35 12.3L11.63 13.56L9.54 15.65M17 15.65L13.65 19L12.38 17.74L14.47 15.65L12.38 13.56L13.65 12.3L17 15.65Z"></path></svg></a><span class="label">component</span><button id="pgScrollReadme" title="Expand Documentation"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z"></path></svg></button><span class="line"></span></h2><div class="markdown" id="pgScrollContainer"></div><script>markdown("pgScroll", "\r\n\r\nThe `pg-scroll` component handles scrolling data in the viewport. This component has 2 use cases.\r\n\r\n- Basic: Detecting when a element is in view and reacting differently. Useful to cut down CPU intensive things.\r\n- Advanced: Unlimited lists of data only rendered when in the viewport to cut down DOM elements.\r\n\r\n```typescript\r\nimport '@pictogrammers/components/pgScroll.js';\r\n```\r\n\r\n```html\r\n<pg-scroll></pg-scroll>\r\n```\r\n\r\n| Events | Tested | Description |\r\n| ---------- | -------- | ----------- |\r\n| enter | &#x2705; | Fired when element enters viewport |\r\n| leave | &#x2705; | Fired when mouse leaves viewport |\r\n| calculate | &#x2705; | `{ offsetY, viewHeight, height }` |\r\n\r\n## Basic\r\n\r\nTo detect and manage viewport visability listen to the `enter` and `leave` events. For instance JS heavy animations or scrolling a carousel may not make sense while off screen especially if one wants to see the first slide first.\r\n\r\n> Note do not use lots of these as they do need to check on very scroll operation.\r\n\r\n## Advanced\r\n\r\nTo create virtual items or scroll containers where only items in the viewport are rendered listen to the `offset` event.\r\n\r\nThe slotted content will need to dispatch `height` event for the `pg-scroll` to capture.\r\n\r\n```typescript\r\nthis.$scroll.height = 2000;\r\n```\r\n\r\nDuring resizing/scrolling the `calculate` event will fire rapidly. The container will need to in a performant way render content handling the offset data.\r\n\r\n- `height` The height calculated and sent from the child content.\r\n- `viewHeight` This is either equal to `height` or the viewport height.\r\n- `offsetY` Distance from the top. Items in the list should use this to calculate the first item position.")</script><section><h3><span>basic</span></h3><x-pg-scroll-basic></x-pg-scroll-basic></section><h2 id="pgSearchH2">pg-search<a title="Link to pg-search" href="#pg-search" id="pg-search"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z"></path></svg></a><a title="View Code" href="https://github.com/Pictogrammers/Components/tree/master/src/pg/search" target="_blank"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M9.54 15.65L11.63 17.74L10.35 19L7 15.65L10.35 12.3L11.63 13.56L9.54 15.65M17 15.65L13.65 19L12.38 17.74L14.47 15.65L12.38 13.56L13.65 12.3L17 15.65Z"></path></svg></a><span class="label">component</span><button id="pgSearchReadme" title="Expand Documentation"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z"></path></svg></button><span class="line"></span></h2><div class="markdown" id="pgSearchContainer"></div><script>markdown("pgSearch", "\r\n\r\nThe `pg-search` component allows a standard way to search all content on the site.\r\n\r\n- Search Guides\r\n- Search General Pages\r\n- Search Icons by Name\r\n\r\n```typescript\r\nimport '@pictogrammers/components/pgSearch.js';\r\n```\r\n\r\n```html\r\n<pg-search></pg-search>\r\n```\r\n\r\n| Attribute | Required | Description |\r\n| --------- | -------- | ----------- |\r\n| icons | Required | Pass in icon array. |\r\n| items | - | Pass in other items. |\r\n\r\n| Events | Tested | Description |\r\n| ---------- | -------- | ----------- |\r\n| onsearch | | Called on enter key. |\r\n\r\n## Schemas\r\n\r\n### Icons\r\n\r\n```json\r\n[\r\n {\r\n \"id\": \"uuid1\",\r\n \"name\": \"account\",\r\n \"aliases\": [\r\n {\r\n \"name\": \"user\"\r\n }\r\n ]\r\n }\r\n]\r\n```\r\n\r\n### Items\r\n\r\n```json\r\n[\r\n {\r\n \"name\": \"Web Component\",\r\n \"url\": \"/getting-started/web-component\",\r\n \"type\": \"Documentation\"\r\n }\r\n]\r\n```\r\n\r\n## Accessibility\r\n\r\n- Keyboard Navigation with Up/Down\r\n- Focus States")</script><section><h3><span>basic</span></h3><x-pg-search-basic></x-pg-search-basic></section><h2 id="pgTabH2">pg-tab<a title="Link to pg-tab" href="#pg-tab" id="pg-tab"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z"></path></svg></a><a title="View Code" href="https://github.com/Pictogrammers/Components/tree/master/src/pg/tab" target="_blank"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M9.54 15.65L11.63 17.74L10.35 19L7 15.65L10.35 12.3L11.63 13.56L9.54 15.65M17 15.65L13.65 19L12.38 17.74L14.47 15.65L12.38 13.56L13.65 12.3L17 15.65Z"></path></svg></a><span class="label">component</span><button id="pgTabReadme" title="Expand Documentation"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z"></path></svg></button><span class="line"></span></h2><div class="markdown" id="pgTabContainer"></div><script>markdown("pgTab", "\r\n\r\nThe `pg-tab` component is used within a `pg-tabs` parent\r\n\r\n```typescript\r\nimport '@pictogrammers/components/pg/tab';\r\nimport PgTab from '@pictogrammers/components/pg/tab';\r\n```\r\n\r\n> See `pg-tabs` for examples.\r\n\r\n\r\n| Attribute | Description |\r\n| ---------- | ------------- |\r\n| label | Tab label |\r\n\r\n\r\n> See `pg-tabs` for CSS Variables.")</script><h2 id="pgTabsH2">pg-tabs<a title="Link to pg-tabs" href="#pg-tabs" id="pg-tabs"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z"></path></svg></a><a title="View Code" href="https://github.com/Pictogrammers/Components/tree/master/src/pg/tabs" target="_blank"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M9.54 15.65L11.63 17.74L10.35 19L7 15.65L10.35 12.3L11.63 13.56L9.54 15.65M17 15.65L13.65 19L12.38 17.74L14.47 15.65L12.38 13.56L13.65 12.3L17 15.65Z"></path></svg></a><span class="label">component</span><button id="pgTabsReadme" title="Expand Documentation"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z"></path></svg></button><span class="line"></span></h2><div class="markdown" id="pgTabsContainer"></div><script>markdown("pgTabs", "\r\n\r\nThe `pg-tabs` component allows a standard way to render tabs.\r\n\r\n```typescript\r\nimport '@pictogrammers/components/pg/tabs';\r\nimport PgTabs from '@pictogrammers/components/pg/tabs';\r\n```\r\n\r\n```html\r\n<pg-tabs>\r\n <pg-tab label=\"Tab 1\">\r\n Content 1\r\n </pg-tab>\r\n <pg-tab label=\"Tab 2\">\r\n Content 2\r\n </pg-tab>\r\n</pg-tabs>\r\n```\r\n\r\n\r\n| Events | Description |\r\n| ---------- | ------------- |\r\n| onselect | Set path data |\r\n\r\n\r\n| CSS Variable | Default | Description |\r\n| ------------------- | --------- | ----------- |\r\n| `--pg-icon-color` | `#453C4F` | Color |\r\n| `--pg-icon-width` | `1.5rem` | Width |\r\n| `--pg-icon-height` | `1.5rem` | Height |")</script><section><h3><span>basic</span></h3><x-pg-tabs-basic></x-pg-tabs-basic></section><h2 id="pgToastH2">pg-toast<a title="Link to pg-toast" href="#pg-toast" id="pg-toast"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z"></path></svg></a><a title="View Code" href="https://github.com/Pictogrammers/Components/tree/master/src/pg/toast" target="_blank"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M9.54 15.65L11.63 17.74L10.35 19L7 15.65L10.35 12.3L11.63 13.56L9.54 15.65M17 15.65L13.65 19L12.38 17.74L14.47 15.65L12.38 13.56L13.65 12.3L17 15.65Z"></path></svg></a><span class="label">component</span><button id="pgToastReadme" title="Expand Documentation"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z"></path></svg></button><span class="line"></span></h2><div class="markdown" id="pgToastContainer"></div><script>markdown("pgToast", "\r\n\r\nThe `PgToast` utility will open a toast in the top right of the page.\r\n\r\n```typescript\r\nimport PgToast from '@pictogrammers/components/pgToast';\r\n```\r\n\r\n```typescript\r\nPgToast.open({\r\n type: 'info',\r\n message: 'Loading...',\r\n loading: true\r\n});\r\n\r\n// On Success\r\nthis.handleToast.resolve({\r\n type: 'success',\r\n message: 'Saved',\r\n timeout: 5\r\n});\r\n// On Error\r\nthis.handleToast.reject({\r\n type: 'error',\r\n message: 'Saved',\r\n timeout: 5\r\n});\r\n// Close open toast with no config\r\ndisconnectedCallback() {\r\n this.handleToast?.resolve();\r\n}\r\n```\r\n\r\n| Prop | default | Description |\r\n| ---- | ------- | ----------- |\r\n| `type` | `info` | `info`, `warning`, `success`, `error` |\r\n| `message` | `''` | Message string. |\r\n| `timeout` | `undefined` | Timeout in seconds |\r\n\r\nToasts can be updated in place without adding to the queue by using the `handleToast` config.\r\n\r\nToasts with a `timeout` will automatically hide and any future `handleToast` executions will add to the queue as a new toast.")</script><section><h3><span>basic</span></h3><x-pg-toast-basic></x-pg-toast-basic></section><h2 id="pgToastsH2">pg-toasts<a title="Link to pg-toasts" href="#pg-toasts" id="pg-toasts"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z"></path></svg></a><a title="View Code" href="https://github.com/Pictogrammers/Components/tree/master/src/pg/toasts" target="_blank"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M9.54 15.65L11.63 17.74L10.35 19L7 15.65L10.35 12.3L11.63 13.56L9.54 15.65M17 15.65L13.65 19L12.38 17.74L14.47 15.65L12.38 13.56L13.65 12.3L17 15.65Z"></path></svg></a><span class="label">component</span><button id="pgToastsReadme" title="Expand Documentation"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z"></path></svg></button><span class="line"></span></h2><div class="markdown" id="pgToastsContainer"></div><script>markdown("pgToasts", "\r\n\r\nThe `pg-toasts` will create instances of `pg-toast`.\r\n\r\n```typescript\r\nimport '@pictogrammers/components/pgToast.js';\r\n```\r\n\r\n```html\r\n<pg-toasts></pg-toasts>\r\n```\r\n\r\n## Open Toast\r\n\r\nAll of these functions will return the unique key used to track them. Note by default toasts disappear after `3` seconds. Setting `0` seconds will keep the toast opened indefinitely.\r\n\r\n```js\r\nimport { addToast, addInfoToast } from '@pictogrammers/web-component';\r\n// Info\r\naddInfoToast(message, seconds = 3);\r\naddInfoToast('Hello World!');\r\n// Generic\r\nconst key = addToast({\r\n message: 'Hello World!',\r\n seconds: 10,\r\n loading: true\r\n});\r\n// removeToast(key)\r\n```\r\n\r\n## Close or Remove Toast\r\n\r\nToasts that define an `key` can also be removed.\r\n\r\n```js\r\nremoveToast(key);\r\n```")</script><section><h3><span>basic</span></h3><x-pg-toasts-basic></x-pg-toasts-basic></section><h2 id="pgTooltipH2">pg-tooltip<a title="Link to pg-tooltip" href="#pg-tooltip" id="pg-tooltip"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z"></path></svg></a><a title="View Code" href="https://github.com/Pictogrammers/Components/tree/master/src/pg/tooltip" target="_blank"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M9.54 15.65L11.63 17.74L10.35 19L7 15.65L10.35 12.3L11.63 13.56L9.54 15.65M17 15.65L13.65 19L12.38 17.74L14.47 15.65L12.38 13.56L13.65 12.3L17 15.65Z"></path></svg></a><span class="label">component</span><button id="pgTooltipReadme" title="Expand Documentation"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z"></path></svg></button><span class="line"></span></h2><div class="markdown" id="pgTooltipContainer"></div><script>markdown("pgTooltip", "\r\n\r\nThe `pg-tooltip` component should be placed on the top level. It then is wired to a shared event.\r\n\r\n```typescript\r\nimport '@pictogrammers/components/pg/tooltip';\r\nimport PgTooltip from '@pictogrammers/components/pg/tooltip';\r\nimport { addTooltip } from '@pictogrammers/components/pg/addTooltip';\r\n```\r\n\r\n```html\r\n<pg-icon path=\"...\"></pg-icon>\r\n```\r\n\r\n| Attributes | Tested | Description |\r\n| ---------- | -------- | ----------- |\r\n| path | &#x2705; | Set path data |\r\n\r\n\r\n## Usage\r\n\r\nWire up the tooltip listener.\r\n\r\n```javascript\r\n@Part() $tooltip: PgTooltip;\r\n\r\nconnectedCallback() {\r\n this.addEventListener('tooltip', this.handleTooltip.bind(this));\r\n}\r\n\r\nhandleTooltip(e) {\r\n const { visible, rect, text, position } = e.detail;\r\n this.$tooltip.visible = visible;\r\n this.$tooltip.rect = rect;\r\n this.$tooltip.text = text;\r\n this.$tooltip.position = position;\r\n e.stopPropagation();\r\n}\r\n```\r\n\r\nTriggering a tooltip on a part.\r\n\r\n```javascript\r\nimport { addTooltip } from '@pictogrammers/components/pg/tooltip/addTooltip';\r\n\r\nconnectedCallback() {\r\n addTooltip(this.$partName, () => {\r\n return `Sponsor ${this.user.name} on GitHub`;\r\n });\r\n}\r\n```")</script><section><h3><span>basic</span></h3><x-pg-tooltip-basic></x-pg-tooltip-basic></section><h2 id="pgTreeH2">pg-tree<a title="Link to pg-tree" href="#pg-tree" id="pg-tree"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z"></path></svg></a><a title="View Code" href="https://github.com/Pictogrammers/Components/tree/master/src/pg/tree" target="_blank"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M9.54 15.65L11.63 17.74L10.35 19L7 15.65L10.35 12.3L11.63 13.56L9.54 15.65M17 15.65L13.65 19L12.38 17.74L14.47 15.65L12.38 13.56L13.65 12.3L17 15.65Z"></path></svg></a><span class="label">component</span><button id="pgTreeReadme" title="Expand Documentation"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z"></path></svg></button><span class="line"></span></h2><div class="markdown" id="pgTreeContainer"></div><script>markdown("pgTree", "\r\n\r\nThe `pg-tree` is used to render a tree list of items.\r\n\r\n- Folder / Item symbols\r\n- Drag and Drop\r\n- Context Menu\r\n\r\n## Usage\r\n\r\nWhile setup for a normal file tree this can be used for any folder structure.\r\n\r\n## Events\r\n\r\n- select\r\n- rename\r\n- menu\r\n- action\r\n- drop\r\n\r\n```typescript\r\nthis.$tree.addEventListener('select', (e: any) => {\r\n const { items } = e.detail;\r\n this.selectedItems = items;\r\n});\r\n```\r\n\r\n```typescript\r\nthis.$tree.addEventListener('rename', (e: any) => {\r\n const { indexes, label } = e.detail;\r\n const item = this.#getItem(indexes);\r\n item.label = label;\r\n});\r\n```\r\n\r\n```typescript\r\nthis.$tree.addEventListener('menu', (e: any) => {\r\n // menu item click\r\n});\r\n```\r\n\r\n```typescript\r\nthis.$tree.addEventListener('action', (e: any) => {\r\n const { item, actionIndex } = e.detail;\r\n // item is a wrapper with all utility functions\r\n switch(actionIndex) {\r\n case 0:\r\n // select in view\r\n break;\r\n case 1:\r\n item.remove();\r\n break;\r\n }\r\n});\r\n```\r\n\r\n```typescript\r\nthis.$tree.addEventListener('drop', (e: any) => {\r\n // cancelable\r\n const { items, dropIndexes } = e.detail;\r\n // If folder ignore items under folder\r\n\r\n items.forEach(() => {\r\n item.move(dropIndexes);\r\n })\r\n});\r\n```")</script><section><h3><span>basic</span></h3><x-pg-tree-basic></x-pg-tree-basic></section><h2 id="pgTreeButtonIconH2">pg-tree-button-icon<a title="Link to pg-tree-button-icon" href="#pg-tree-button-icon" id="pg-tree-button-icon"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z"></path></svg></a><a title="View Code" href="https://github.com/Pictogrammers/Components/tree/master/src/pg/treeButtonIcon" target="_blank"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M9.54 15.65L11.63 17.74L10.35 19L7 15.65L10.35 12.3L11.63 13.56L9.54 15.65M17 15.65L13.65 19L12.38 17.74L14.47 15.65L12.38 13.56L13.65 12.3L17 15.65Z"></path></svg></a><span class="label">component</span><button id="pgTreeButtonIconReadme" title="Expand Documentation"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z"></path></svg></button><span class="line"></span></h2><div class="markdown" id="pgTreeButtonIconContainer"></div><script>markdown("pgTreeButtonIcon", "\r\n\r\nTree button icons are used in the `pg-tree` component for actions. See `pg-tree` for documentation.\r\n\r\n## Usage\r\n\r\n```typescript\r\nthis.$tree.items = [{\r\n icon: {\r\n path: IconFile\r\n },\r\n label,\r\n actions: [{\r\n type: PgTreeButtonIcon,\r\n label: 'Select in View',\r\n icon: IconSelect,\r\n enabled: true\r\n },\r\n {\r\n type: PgTreeButtonIcon,\r\n label: 'Delete',\r\n icon: IconTrash,\r\n enabled: true\r\n }]\r\n}];\r\n\r\nthis.$tree.addEventListener('action', (e: any) => {\r\n const { item, actionIndex } = e.detail;\r\n // item is a wrapper with all utility functions\r\n switch(actionIndex) {\r\n case 0:\r\n // select in view\r\n break;\r\n case 1:\r\n item.remove();\r\n break;\r\n }\r\n});\r\n```")</script><h2 id="pgTreeItemH2">pg-tree-item<a title="Link to pg-tree-item" href="#pg-tree-item" id="pg-tree-item"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z"></path></svg></a><a title="View Code" href="https://github.com/Pictogrammers/Components/tree/master/src/pg/treeItem" target="_blank"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M9.54 15.65L11.63 17.74L10.35 19L7 15.65L10.35 12.3L11.63 13.56L9.54 15.65M17 15.65L13.65 19L12.38 17.74L14.47 15.65L12.38 13.56L13.65 12.3L17 15.65Z"></path></svg></a><span class="label">component</span><button id="pgTreeItemReadme" title="Expand Documentation"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z"></path></svg></button><span class="line"></span></h2><div class="markdown" id="pgTreeItemContainer"></div><script>markdown("pgTreeItem", "\r\n\r\nTree items are used in the `pg-tree` component. See `pg-tree` for documentation.")</script></main></div></body></html>
321
+ });</script><div class="wrapper"><header><svg viewBox="0 0 64 64"><path fill="currentColor" d="M 8,0L 56,0C 60.4183,0 64,3.58173 64,8L 64,56C 64,60.4183 60.4183,64 56,64L 8,64C 3.58172,64 0,60.4183 0,56L 0,8C 0,3.58173 3.58172,0 8,0 Z M 8,44.0001L 14,44.0001L 14,32.0001L 20,32.0001C 26.6274,32.0001 32,26.6275 32,20.0001C 32,13.3726 26.6274,8.00006 20,8.00006L 8,8.00003L 8,44.0001 Z M 20,26.0003L 14,26.0003L 14,14.0003L 20,14.0003C 23.3137,14.0003 26,16.6866 26,20.0003C 26,23.314 23.3137,26.0003 20,26.0003 Z M 44,44.0001L 45.9999,44.0003C 48.2091,44.0003 49.9999,42.2094 49.9999,40.0003L 50,44.0001C 50,49.5231 45.5228,54.0002 40,54.0002C 36.085,54.0002 32.6955,51.7505 31.0537,48.4732L 25.686,51.1571C 28.3128,56.4006 33.736,60.0002 40,60.0002C 48.8365,60.0002 56,52.8368 56,44.0001L 56,24.0001C 56,21.791 54.2092,20.0001 52,20.0001L 44,20.0001C 37.3726,20.0001 32,25.3727 32,32.0001C 32,38.6275 37.3726,44.0001 44,44.0001 Z M 50,26L 49.9999,38.0001L 44,38C 40.6863,38 38,35.3137 38,32C 38,28.6863 40.6863,26 44,26L 50,26 Z"/></svg><h1>Pictogrammers Components</h1><span></span> <label><select id="theme"><option value="">None</option><option value="ui3">UI3</option></select></label> <a href="https://github.com/Pictogrammers/Components"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z"/></svg> <span>View on GitHub</span></a></header><aside><div>Components</div><ul><li><a href="#pg-annoy">annoy</a></li><li><a href="#pg-app">app</a></li><li><a href="#pg-avatar">avatar</a></li><li><a href="#pg-button">button</a></li><li><a href="#pg-button-group">button-group</a></li><li><a href="#pg-button-link">button-link</a></li><li><a href="#pg-button-menu">button-menu</a></li><li><a href="#pg-button-toggle">button-toggle</a></li><li><a href="#pg-card">card</a></li><li><a href="#pg-card-user">card-user</a></li><li><a href="#pg-color">color</a></li><li><a href="#pg-database">database</a></li><li><a href="#pg-dropdown">dropdown</a></li><li><a href="#pg-grid">grid</a></li><li><a href="#pg-header">header</a></li><li><a href="#pg-icon">icon</a></li><li><a href="#pg-input-check">input-check</a></li><li><a href="#pg-input-check-list">input-check-list</a></li><li><a href="#pg-input-file-local">input-file-local</a></li><li><a href="#pg-input-hex-rgb">input-hex-rgb</a></li><li><a href="#pg-input-pixel-editor">input-pixel-editor</a></li><li><a href="#pg-input-range">input-range</a></li><li><a href="#pg-input-select">input-select</a></li><li><a href="#pg-input-text">input-text</a></li><li><a href="#pg-input-text-icon">input-text-icon</a></li><li><a href="#pg-input-user-select">input-user-select</a></li><li><a href="#pg-list-tag">list-tag</a></li><li><a href="#pg-markdown">markdown</a></li><li><a href="#pg-menu">menu</a></li><li><a href="#pg-menu-divider">menu-divider</a></li><li><a href="#pg-menu-icon">menu-icon</a></li><li><a href="#pg-menu-item">menu-item</a></li><li><a href="#pg-menu-item-icon">menu-item-icon</a></li><li><a href="#pg-modification">modification</a></li><li><a href="#pg-nav">nav</a></li><li><a href="#pg-overlay">overlay</a></li><li><a href="#pg-picker">picker</a></li><li><a href="#pg-preview">preview</a></li><li><a href="#pg-scroll">scroll</a></li><li><a href="#pg-search">search</a></li><li><a href="#pg-tab">tab</a></li><li><a href="#pg-tabs">tabs</a></li><li><a href="#pg-toasts">toasts</a></li><li><a href="#pg-tooltip">tooltip</a></li><li><a href="#pg-tree">tree</a></li><li><a href="#pg-tree-button-icon">tree-button-icon</a></li><li><a href="#pg-tree-item">tree-item</a></li></ul><div>Overlays</div><ul><li><a href="#pg-modal">modal</a></li><li><a href="#pg-modal-alert">modal-alert</a></li><li><a href="#pg-overlay-context-menu">overlay-context-menu</a></li><li><a href="#pg-overlay-menu">overlay-menu</a></li><li><a href="#pg-overlay-select-menu">overlay-select-menu</a></li><li><a href="#pg-overlay-sub-menu">overlay-sub-menu</a></li><li><a href="#pg-toast">toast</a></li></ul><div>Shared</div><ul></ul></aside><main><p>This page is generated from <code>npm start</code>. To render only specific components use <code>npm start pg-button</code>.</p><h2 id="pgAnnoyH2">pg-annoy<a title="Link to pg-annoy" href="#pg-annoy" id="pg-annoy"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z"></path></svg></a><a title="View Code" href="https://github.com/Pictogrammers/Components/tree/master/src/pg/annoy" target="_blank"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M9.54 15.65L11.63 17.74L10.35 19L7 15.65L10.35 12.3L11.63 13.56L9.54 15.65M17 15.65L13.65 19L12.38 17.74L14.47 15.65L12.38 13.56L13.65 12.3L17 15.65Z"></path></svg></a><span class="label">component</span><button id="pgAnnoyReadme" title="Expand Documentation"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z"></path></svg></button><span class="line"></span></h2><div class="markdown" id="pgAnnoyContainer"></div><script>markdown("pgAnnoy", "\r\n\r\nThe `pg-annoy` component is the clippy of the the website. It shows annoying notifications in the corner of the page that the user has to close. This rotates on every page view using `localStorage` to track the previously show item.\r\n\r\n```typescript\r\nimport '@pictogrammers/components/pgAnnoy';\r\n```\r\n\r\n```html\r\n<pg-annoy></pg-annoy>\r\n```\r\n\r\nA `localStorage` variable switches between the list of items below.\r\n")</script><section><h3><span>basic</span></h3><x-pg-annoy-basic></x-pg-annoy-basic></section><h2 id="pgAppH2">pg-app<a title="Link to pg-app" href="#pg-app" id="pg-app"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z"></path></svg></a><a title="View Code" href="https://github.com/Pictogrammers/Components/tree/master/src/pg/app" target="_blank"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M9.54 15.65L11.63 17.74L10.35 19L7 15.65L10.35 12.3L11.63 13.56L9.54 15.65M17 15.65L13.65 19L12.38 17.74L14.47 15.65L12.38 13.56L13.65 12.3L17 15.65Z"></path></svg></a><span class="label">component</span><button id="pgAppReadme" title="Expand Documentation"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z"></path></svg></button><span class="line"></span></h2><div class="markdown" id="pgAppContainer"></div><script>markdown("pgApp", "\r\n\r\nThe `pg-app` component is a wrapper that allows an app icon and tabs.\r\n\r\n```typescript\r\nimport '@pictogrammers/components/pg/app';\r\n```\r\n\r\n```html\r\n<pg-app></pg-app>\r\n```\r\n")</script><section><h3><span>basic</span></h3><x-pg-app-basic></x-pg-app-basic></section><h2 id="pgAvatarH2">pg-avatar<a title="Link to pg-avatar" href="#pg-avatar" id="pg-avatar"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z"></path></svg></a><a title="View Code" href="https://github.com/Pictogrammers/Components/tree/master/src/pg/avatar" target="_blank"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M9.54 15.65L11.63 17.74L10.35 19L7 15.65L10.35 12.3L11.63 13.56L9.54 15.65M17 15.65L13.65 19L12.38 17.74L14.47 15.65L12.38 13.56L13.65 12.3L17 15.65Z"></path></svg></a><span class="label">component</span><button id="pgAvatarReadme" title="Expand Documentation"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z"></path></svg></button><span class="line"></span></h2><div class="markdown" id="pgAvatarContainer"></div><script>markdown("pgAvatar", "\r\n\r\nThe `pg-avatar` component takes a user object and renders an avatar circle.\r\n\r\n```typescript\r\nimport '@pictogrammers/components/pg/avatar';\r\nimport PgAvatar from '@pictogrammers/components/pg/avatar';\r\n```\r\n\r\n```html\r\n<pg-avatar user=\"...\"></pg-avatar>\r\n```\r\n\r\n| Attributes | Tested | Description |\r\n| ---------- | -------- | ----------- |\r\n| user | &#x2705; | User object with `user.base64` defined. |\r\n\r\n\r\n| CSS Variable | Default | Description |\r\n| ------------------- | --------- | ----------- |\r\n| `--pg-avatar-border-color` | `#453C4F` | Color |\r\n| `--pg-avatar-width` | `3rem` | Width |\r\n| `--pg-avatar-height` | `3rem` | Height |")</script><section><h3><span>basic</span></h3><x-pg-avatar-basic></x-pg-avatar-basic></section><h2 id="pgButtonH2">pg-button<a title="Link to pg-button" href="#pg-button" id="pg-button"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z"></path></svg></a><a title="View Code" href="https://github.com/Pictogrammers/Components/tree/master/src/pg/button" target="_blank"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M9.54 15.65L11.63 17.74L10.35 19L7 15.65L10.35 12.3L11.63 13.56L9.54 15.65M17 15.65L13.65 19L12.38 17.74L14.47 15.65L12.38 13.56L13.65 12.3L17 15.65Z"></path></svg></a><span class="label">component</span><button id="pgButtonReadme" title="Expand Documentation"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z"></path></svg></button><span class="line"></span></h2><div class="markdown" id="pgButtonContainer"></div><script>markdown("pgButton", "\r\n\r\nThe `pg-button` component is essentially just a styled button, but it also allows special rendering for `pg-button-group` and `pg-icon`.\r\n\r\n```typescript\r\nimport '@pictogrammers/components/pg/button';\r\nimport PgButton from '@pictogrammers/components/pg/button';\r\n```\r\n\r\n```html\r\n<pg-button>Click Me!</pg-button>\r\n```\r\n\r\n| Slots | Tested | Description |\r\n| ----------- | -------- | ----------- |\r\n| default | &#x2705; | Button contents. |\r\n\r\n| Attribute | Tested | Description |\r\n| ---------- | -------- | ----------- |\r\n| block | | block sizing |\r\n| active | | Depressed visual state. |\r\n| start | | Internal Only |\r\n| end | | Internal Only |\r\n| center | | Internal Only |\r\n\r\n| Events | Tested | Description |\r\n| ---------- | -------- | ----------- |\r\n| click | &#x2705; | Standard click. |\r\n\r\n| CSS Variables | Default | Description |\r\n| ------------------- | --------- | ----------- |\r\n| `--pg-button-color` | `#453C4F` | Text color |\r\n| `--pg-button-background-color` | `#fff` | Background color |\r\n| `--pg-button-border-color` | `#453C4F` | Border color |\r\n| `--pg-button-hover-color` | `#fff` | `:hover` Text color |\r\n| `--pg-button-hover-background-color` | `#453C4F` | `:hover` Background color |\r\n| `--pg-button-hover-border-color` | `#453C4F` | `:hover` Border color |\r\n| `--pg-button-active-color` | `#fff` | `active` Text color |\r\n| `--pg-button-active-background-color` | `#453C4F` | `active` Background color |\r\n| `--pg-button-active-border-color` | `#453C4F` | `active` Border color |\r\n| `--pg-button-padding` | `0.25rem 0.5rem` | Padding. |\r\n| `--pg-button-font-size` | `1rem` | Font size. |\r\n| `--pg-button-line-height` | `1.5rem` | Line height. |\r\n\r\n### Slots\r\n\r\nSpecial styling is applied for `pg-icon`.\r\n\r\n```html\r\n<pg-button>\r\n <pg-icon path=\"M...Z\"></pg-icon>\r\n Hello!\r\n</pg-button>\r\n```")</script><section><h3><span>basic</span></h3><x-pg-button-basic></x-pg-button-basic></section><section><h3><span>states</span></h3><x-pg-button-states></x-pg-button-states></section><h2 id="pgButtonGroupH2">pg-button-group<a title="Link to pg-button-group" href="#pg-button-group" id="pg-button-group"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z"></path></svg></a><a title="View Code" href="https://github.com/Pictogrammers/Components/tree/master/src/pg/buttonGroup" target="_blank"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M9.54 15.65L11.63 17.74L10.35 19L7 15.65L10.35 12.3L11.63 13.56L9.54 15.65M17 15.65L13.65 19L12.38 17.74L14.47 15.65L12.38 13.56L13.65 12.3L17 15.65Z"></path></svg></a><span class="label">component</span><button id="pgButtonGroupReadme" title="Expand Documentation"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z"></path></svg></button><span class="line"></span></h2><div class="markdown" id="pgButtonGroupContainer"></div><script>markdown("pgButtonGroup", "\r\n\r\nThe `pg-button-group` wraps the `pg-button` component.\r\n\r\n```typescript\r\nimport '@pictogrammers/components/pg/buttonGroup';\r\nimport PgButtonGroup from '@pictogrammers/components/pg/buttonGroup';\r\n```\r\n\r\n```html\r\n<pg-button-group>\r\n <pg-button active>Hello</pg-button>\r\n <pg-button>World</pg-button>\r\n</pg-button-group>\r\n```\r\n\r\n### Slots\r\n\r\nSpecial styling is applied for `pg-button`.\r\n\r\n```html\r\n<pg-button-group>\r\n <pg-button>\r\n <pg-icon path=\"M...Z\"></pg-icon>\r\n With Icons\r\n </pg-button>\r\n</pg-button-group>\r\n```")</script><section><h3><span>basic</span></h3><x-pg-button-group-basic></x-pg-button-group-basic></section><h2 id="pgButtonLinkH2">pg-button-link<a title="Link to pg-button-link" href="#pg-button-link" id="pg-button-link"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z"></path></svg></a><a title="View Code" href="https://github.com/Pictogrammers/Components/tree/master/src/pg/buttonLink" target="_blank"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M9.54 15.65L11.63 17.74L10.35 19L7 15.65L10.35 12.3L11.63 13.56L9.54 15.65M17 15.65L13.65 19L12.38 17.74L14.47 15.65L12.38 13.56L13.65 12.3L17 15.65Z"></path></svg></a><span class="label">component</span><button id="pgButtonLinkReadme" title="Expand Documentation"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z"></path></svg></button><span class="line"></span></h2><div class="markdown" id="pgButtonLinkContainer"></div><script>markdown("pgButtonLink", "\r\n\r\nThe `pg-button-link` component is essentially just a styled anchor, but it also allows special rendering for `pg-button-group` and `pg-icon`.\r\n\r\n```typescript\r\nimport '@pictogrammers/components/pg/buttonLink';\r\nimport PgButtonLink from '@pictogrammers/components/pg/buttonLink';\r\n```\r\n\r\n```html\r\n<pg-button-link>Click Me!</pg-button-link>\r\n```\r\n\r\n| Slots | Tested | Description |\r\n| ----------- | -------- | ----------- |\r\n| default | &#x2705; | Button contents. |\r\n\r\n| Attribute | Tested | Description |\r\n| ---------- | -------- | ----------- |\r\n| block | | block sizing |\r\n| active | | Depressed visual state. |\r\n| start | | Internal Only |\r\n| end | | Internal Only |\r\n| center | | Internal Only |\r\n\r\n| Events | Tested | Description |\r\n| ---------- | -------- | ----------- |\r\n| click | &#x2705; | Standard click. |\r\n\r\n| CSS Variables | Default | Description |\r\n| ------------------- | --------- | ----------- |\r\n| `--pg-button-color` | `#453C4F` | Text color |\r\n| `--pg-button-background-color` | `#fff` | Background color |\r\n| `--pg-button-border-color` | `#453C4F` | Border color |\r\n| `--pg-button-hover-color` | `#fff` | `:hover` Text color |\r\n| `--pg-button-hover-background-color` | `#453C4F` | `:hover` Background color |\r\n| `--pg-button-hover-border-color` | `#453C4F` | `:hover` Border color |\r\n| `--pg-button-active-color` | `#fff` | `active` Text color |\r\n| `--pg-button-active-background-color` | `#453C4F` | `active` Background color |\r\n| `--pg-button-active-border-color` | `#453C4F` | `active` Border color |\r\n\r\n### Slots\r\n\r\nSpecial styling is applied for `pg-icon`.\r\n\r\n```html\r\n<pg-button-link>\r\n <pg-icon path=\"M...Z\"></pg-icon>\r\n Hello!\r\n</pg-button-link>\r\n```")</script><section><h3><span>basic</span></h3><x-pg-button-link-basic></x-pg-button-link-basic></section><h2 id="pgButtonMenuH2">pg-button-menu<a title="Link to pg-button-menu" href="#pg-button-menu" id="pg-button-menu"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z"></path></svg></a><a title="View Code" href="https://github.com/Pictogrammers/Components/tree/master/src/pg/buttonMenu" target="_blank"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M9.54 15.65L11.63 17.74L10.35 19L7 15.65L10.35 12.3L11.63 13.56L9.54 15.65M17 15.65L13.65 19L12.38 17.74L14.47 15.65L12.38 13.56L13.65 12.3L17 15.65Z"></path></svg></a><span class="label">component</span><button id="pgButtonMenuReadme" title="Expand Documentation"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z"></path></svg></button><span class="line"></span></h2><div class="markdown" id="pgButtonMenuContainer"></div><script>markdown("pgButtonMenu", "\r\n\r\nThe `pg-button-toggle` component is essentially just a button with swappable slotted content. Commonly used with icons, but using `span` elements will allow assigning text content.\r\n\r\n```typescript\r\nimport '@pictogrammers/components/pg/buttonToggle';\r\nimport PgButtonToggle from '@pictogrammers/components/pg/buttonToggle';\r\n```\r\n\r\n```html\r\n<pg-button-menu part=\"menu\"></pg-button-toggle>\r\n```\r\n\r\n| Attribute | Tested | Description |\r\n| ---------- | -------- | ----------- |\r\n| menu | | block sizing |\r\n| start | | Internal Only |\r\n| end | | Internal Only |\r\n| center | | Internal Only |\r\n\r\n| Events | Tested | Description |\r\n| ---------- | -------- | ----------- |\r\n| open | &#x2705; | Menu open. |\r\n| close | &#x2705; | Menu close. |\r\n\r\n| CSS Variables | Default | Description |\r\n| ------------------- | --------- | ----------- |\r\n| `--pg-button-color` | `#453C4F` | Text color |\r\n| `--pg-button-background-color` | `#fff` | Background color |\r\n| `--pg-button-border-color` | `#453C4F` | Border color |\r\n| `--pg-button-hover-color` | `#fff` | `:hover` Text color |\r\n| `--pg-button-hover-background-color` | `#453C4F` | `:hover` Background color |\r\n| `--pg-button-hover-border-color` | `#453C4F` | `:hover` Border color |\r\n| `--pg-button-active-color` | `#fff` | `active` Text color |\r\n| `--pg-button-active-background-color` | `#453C4F` | `active` Background color |\r\n| `--pg-button-active-border-color` | `#453C4F` | `active` Border color |\r\n\r\n### Slots\r\n\r\nSpecial styling is applied for `pg-icon`.\r\n\r\n```html\r\n<pg-button-toggle>\r\n <pg-icon slot=\"active\" path=\"M...Z\"></pg-icon>\r\n <pg-icon slot=\"inactive\" path=\"M...Z\"></pg-icon>\r\n</pg-button-toggle>\r\n```")</script><section><h3><span>basic</span></h3><x-pg-button-menu-basic></x-pg-button-menu-basic></section><h2 id="pgButtonToggleH2">pg-button-toggle<a title="Link to pg-button-toggle" href="#pg-button-toggle" id="pg-button-toggle"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z"></path></svg></a><a title="View Code" href="https://github.com/Pictogrammers/Components/tree/master/src/pg/buttonToggle" target="_blank"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M9.54 15.65L11.63 17.74L10.35 19L7 15.65L10.35 12.3L11.63 13.56L9.54 15.65M17 15.65L13.65 19L12.38 17.74L14.47 15.65L12.38 13.56L13.65 12.3L17 15.65Z"></path></svg></a><span class="label">component</span><button id="pgButtonToggleReadme" title="Expand Documentation"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z"></path></svg></button><span class="line"></span></h2><div class="markdown" id="pgButtonToggleContainer"></div><script>markdown("pgButtonToggle", "\r\n\r\nThe `pg-button-toggle` component is essentially just a button with swappable slotted content. Commonly used with icons, but using `span` elements will allow assigning text content.\r\n\r\n```typescript\r\nimport '@pictogrammers/components/pg/buttonToggle';\r\nimport PgButtonToggle from '@pictogrammers/components/pg/buttonToggle';\r\n```\r\n\r\n```html\r\n<pg-button-toggle>\r\n <pg-icon slot=\"active\" path=\"M...Z\"></pg-icon>\r\n <pg-icon slot=\"inactive\" path=\"M...Z\"></pg-icon>\r\n</pg-button-toggle>\r\n```\r\n\r\n| Slots | Tested | Description |\r\n| ----------- | -------- | ----------- |\r\n| default | &#x2705; | Button contents. |\r\n\r\n| Attribute | Tested | Description |\r\n| ---------- | -------- | ----------- |\r\n| block | | block sizing |\r\n| active | | Depressed visual state. |\r\n| start | | Internal Only |\r\n| end | | Internal Only |\r\n| center | | Internal Only |\r\n\r\n| Events | Tested | Description |\r\n| ---------- | -------- | ----------- |\r\n| click | &#x2705; | Standard click. |\r\n\r\n| CSS Variables | Default | Description |\r\n| ------------------- | --------- | ----------- |\r\n| `--pg-button-color` | `#453C4F` | Text color |\r\n| `--pg-button-background-color` | `#fff` | Background color |\r\n| `--pg-button-border-color` | `#453C4F` | Border color |\r\n| `--pg-button-hover-color` | `#fff` | `:hover` Text color |\r\n| `--pg-button-hover-background-color` | `#453C4F` | `:hover` Background color |\r\n| `--pg-button-hover-border-color` | `#453C4F` | `:hover` Border color |\r\n| `--pg-button-active-color` | `#fff` | `active` Text color |\r\n| `--pg-button-active-background-color` | `#453C4F` | `active` Background color |\r\n| `--pg-button-active-border-color` | `#453C4F` | `active` Border color |\r\n\r\n### Slots\r\n\r\nSpecial styling is applied for `pg-icon`.\r\n\r\n```html\r\n<pg-button-toggle>\r\n <pg-icon slot=\"active\" path=\"M...Z\"></pg-icon>\r\n <pg-icon slot=\"inactive\" path=\"M...Z\"></pg-icon>\r\n</pg-button-toggle>\r\n```")</script><section><h3><span>basic</span></h3><x-pg-button-toggle-basic></x-pg-button-toggle-basic></section><section><h3><span>persist</span></h3><x-pg-button-toggle-persist></x-pg-button-toggle-persist></section><h2 id="pgCardH2">pg-card<a title="Link to pg-card" href="#pg-card" id="pg-card"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z"></path></svg></a><a title="View Code" href="https://github.com/Pictogrammers/Components/tree/master/src/pg/card" target="_blank"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M9.54 15.65L11.63 17.74L10.35 19L7 15.65L10.35 12.3L11.63 13.56L9.54 15.65M17 15.65L13.65 19L12.38 17.74L14.47 15.65L12.38 13.56L13.65 12.3L17 15.65Z"></path></svg></a><span class="label">component</span><button id="pgCardReadme" title="Expand Documentation"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z"></path></svg></button><span class="line"></span></h2><div class="markdown" id="pgCardContainer"></div><script>markdown("pgCard", "\r\n\r\nThe `pg-card` component is a presentational component for adding a shadow with rounded corners.\r\n\r\n```typescript\r\nimport '@pictogrammers/components/pg/icon';\r\nimport PgIcon from '@pictogrammers/components/pg/icon';\r\n```\r\n\r\n```html\r\n<pg-card>\r\n Body\r\n</pg-card>\r\n```\r\n\r\n## CSS Variables\r\n\r\n| CSS Variables | Default | Description |\r\n| --------------------- | ----------- | ----------- |\r\n| `--pg-card-color` | `'#453C4F'` | Color |\r\n| `--pg-card-padding` | `0` | Padding |")</script><section><h3><span>basic</span></h3><x-pg-card-basic></x-pg-card-basic></section><h2 id="pgCardUserH2">pg-card-user<a title="Link to pg-card-user" href="#pg-card-user" id="pg-card-user"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z"></path></svg></a><a title="View Code" href="https://github.com/Pictogrammers/Components/tree/master/src/pg/cardUser" target="_blank"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M9.54 15.65L11.63 17.74L10.35 19L7 15.65L10.35 12.3L11.63 13.56L9.54 15.65M17 15.65L13.65 19L12.38 17.74L14.47 15.65L12.38 13.56L13.65 12.3L17 15.65Z"></path></svg></a><span class="label">component</span><button id="pgCardUserReadme" title="Expand Documentation"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z"></path></svg></button><span class="line"></span></h2><div class="markdown" id="pgCardUserContainer"></div><script>markdown("pgCardUser", "\r\n\r\nThe `pg-card-user` component lets one display a `User` type in a visual card.\r\n\r\n```typescript\r\nimport '@pictogrammers/components/pg/cardUser';\r\nimport PgIcon from '@pictogrammers/components/pg/cardUser';\r\n```\r\n\r\n```html\r\n<pg-card-user></pg-card-user>\r\n```\r\n\r\n## Attributes\r\n\r\n| Attributes | Tested | Description |\r\n| ---------- | -------- | ----------- |\r\n| user | &#x2705; | `User` |\r\n\r\n## CSS Variables\r\n\r\nSee `pg-card`.")</script><section><h3><span>basic</span></h3><x-pg-card-user-basic></x-pg-card-user-basic></section><h2 id="pgColorH2">pg-color<a title="Link to pg-color" href="#pg-color" id="pg-color"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z"></path></svg></a><a title="View Code" href="https://github.com/Pictogrammers/Components/tree/master/src/pg/color" target="_blank"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M9.54 15.65L11.63 17.74L10.35 19L7 15.65L10.35 12.3L11.63 13.56L9.54 15.65M17 15.65L13.65 19L12.38 17.74L14.47 15.65L12.38 13.56L13.65 12.3L17 15.65Z"></path></svg></a><span class="label">component</span><button id="pgColorReadme" title="Expand Documentation"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z"></path></svg></button><span class="line"></span></h2><div class="markdown" id="pgColorContainer"></div><script>markdown("pgColor", "\r\n\r\nVisual color picker using the standard Material Design pallet.\r\n\r\n```typescript\r\nimport '@pictogrammers/components/pg/color';\r\n```\r\n\r\n## Usage\r\n\r\n| Events | Description |\r\n| ------ | ----------- |\r\n| `onchange` | `event = { detail: { r, g, b, hex } }` |\r\n")</script><section><h3><span>basic</span></h3><x-pg-color-basic></x-pg-color-basic></section><h2 id="pgDatabaseH2">pg-database<a title="Link to pg-database" href="#pg-database" id="pg-database"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z"></path></svg></a><a title="View Code" href="https://github.com/Pictogrammers/Components/tree/master/src/pg/database" target="_blank"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M9.54 15.65L11.63 17.74L10.35 19L7 15.65L10.35 12.3L11.63 13.56L9.54 15.65M17 15.65L13.65 19L12.38 17.74L14.47 15.65L12.38 13.56L13.65 12.3L17 15.65Z"></path></svg></a><span class="label">component</span><button id="pgDatabaseReadme" title="Expand Documentation"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z"></path></svg></button><span class="line"></span></h2><div class="markdown" id="pgDatabaseContainer"></div><script>markdown("pgDatabase", "\r\n\r\nOut of all the components this is the most useful one as it controls the local cache of icon data. From a high level this component gives access to a `DatabaseService` instance.\r\n\r\n```typescript\r\nimport '@pictogrammers/components/pgDatabase.js';\r\n```\r\n\r\n## Usage\r\n\r\n| Events | Description |\r\n| ------ | ----------- |\r\n| `onsync` | `event = { detail: { db } }` |\r\n| `onerror` | `event = { detail: { message }}` |\r\n\r\n> Note: We will try to recover and if there is no way the database is deleted and resynced. Onerror is only called on failure to serialize data not on network issues!\r\n\r\n\r\n## Development\r\n\r\nUnderstanding the data workflow will give you an idea of all the steps of syncing icon data.\r\n\r\n```\r\n# Set some kind of isLoading\r\nconnect -> data exists\r\n -> true -> onsync -> sync data -> onsync\r\n -> sync data -> onsync\r\n```")</script><section><h3><span>basic</span></h3><x-pg-database-basic></x-pg-database-basic></section><h2 id="pgDropdownH2">pg-dropdown<a title="Link to pg-dropdown" href="#pg-dropdown" id="pg-dropdown"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z"></path></svg></a><a title="View Code" href="https://github.com/Pictogrammers/Components/tree/master/src/pg/dropdown" target="_blank"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M9.54 15.65L11.63 17.74L10.35 19L7 15.65L10.35 12.3L11.63 13.56L9.54 15.65M17 15.65L13.65 19L12.38 17.74L14.47 15.65L12.38 13.56L13.65 12.3L17 15.65Z"></path></svg></a><span class="label">component</span><button id="pgDropdownReadme" title="Expand Documentation"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z"></path></svg></button><span class="line"></span></h2><div class="markdown" id="pgDropdownContainer"></div><script>markdown("pgDropdown", "\r\n\r\nVisual color picker using the standard Material Design pallet.\r\n\r\n```typescript\r\nimport '@pictogrammers/components/pg/dropdown';\r\n```\r\n\r\n## Usage\r\n\r\n| Events | Description |\r\n| ------ | ----------- |\r\n| `onchange` | `event = { detail: { r, g, b, hex } }` |\r\n")</script><section><h3><span>basic</span></h3><x-pg-dropdown-basic></x-pg-dropdown-basic></section><h2 id="pgGridH2">pg-grid<a title="Link to pg-grid" href="#pg-grid" id="pg-grid"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z"></path></svg></a><a title="View Code" href="https://github.com/Pictogrammers/Components/tree/master/src/pg/grid" target="_blank"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M9.54 15.65L11.63 17.74L10.35 19L7 15.65L10.35 12.3L11.63 13.56L9.54 15.65M17 15.65L13.65 19L12.38 17.74L14.47 15.65L12.38 13.56L13.65 12.3L17 15.65Z"></path></svg></a><span class="label">component</span><button id="pgGridReadme" title="Expand Documentation"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z"></path></svg></button><span class="line"></span></h2><div class="markdown" id="pgGridContainer"></div><script>markdown("pgGrid", "\r\n\r\nThe `pg-grid` component allows a standard way to render a configurable grid of icons.\r\n\r\n- Performance\r\n - Two events are used to track all interactions\r\n - `mousemove` tracks mouse within the grid\r\n - `mouseleave` tracks mouse leaving grid\r\n - When icons are added or removed this means no dom events are binded\r\n - Virtual icon grid\r\n - Grid height is calculated based on icons present and dynamic container width\r\n - Debounced `300` for resize of grid\r\n- Size\r\n - `pg-scroll` is the only dependency\r\n - Grid tests can handle grid specific logic\r\n - Complex viewport and overflow container logic is centralized\r\n - Tooltips and other interacts are handled via events\r\n - Allows more customization in other use cases\r\n\r\n> Note: Context menus and tooltips can be triggered with events described below. These are outside of the component so they can be rendered elsewhere in the DOM.\r\n\r\n```typescript\r\nimport '@pictogrammers/components/pgGrid';\r\nimport PgGrid from '@pictogrammers/components/pgGrid';\r\n```\r\n\r\n```html\r\n<pg-grid></pg-grid>\r\n```\r\n\r\n## Attributes\r\n\r\n| Attributes | Tested | Description | Default |\r\n| ---------- | -------- | ----------- | ------ |\r\n| icons | | Set icon data | `[]` |\r\n| size | | Set icon size | `24` |\r\n| padding | | Set icon padding | `8` |\r\n| gap | | Set icon gap | `4` |\r\n| width | | Set grid width | `'auto'` |\r\n| height | | Set grid height | `'auto'` |\r\n\r\n### `icons`\r\n\r\nThe minimal data set must contain the `id`, `name` and `data` field.\r\n\r\n```json\r\n[{\r\n \"id\": \"uuid\",\r\n \"name\": \"account\",\r\n \"data\": \"...\"\r\n}]\r\n```\r\n\r\n## Events\r\n\r\n| Events | Tested | Description |\r\n| ---------- | -------- | ----------- |\r\n| select | | Fired on icon selections |\r\n| openmenu | | Right click on icon |\r\n| closemenu | | Right click on icon |\r\n| entericon | | Keyboard / Mouse on icon |\r\n| leaveicon | | Keyboard / Mouse off icon |\r\n\r\n### All Events\r\n\r\nThe `x` and `y` properties are the calculated `top` and `left` in pixels relative to the grid. The `width` and `height` include the `padding`.\r\n\r\nThe `gridX` and `gridY` are relative to the grid container.\r\n\r\nThe `gap + extra` will give the remaining space between icons. Note: The left of the first icon is always just the `gap`.\r\n\r\n```javascript\r\ninterface MouseMeta {\r\n gridX: number,\r\n gridY: number,\r\n x: number,\r\n y: number,\r\n width: number,\r\n height: number,\r\n column: number,\r\n row: number,\r\n index: number,\r\n gap: number,\r\n extra: number\r\n}\r\n\r\ne = {\r\n detail: MouseMeta\r\n}\r\n```\r\n\r\n## Accessibility\r\n\r\nToDo...\r\n\r\n- Arrow key navigation\r\n- Should typing filter grid?")</script><section><h3><span>basic</span></h3><x-pg-grid-basic></x-pg-grid-basic></section><h2 id="pgHeaderH2">pg-header<a title="Link to pg-header" href="#pg-header" id="pg-header"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z"></path></svg></a><a title="View Code" href="https://github.com/Pictogrammers/Components/tree/master/src/pg/header" target="_blank"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M9.54 15.65L11.63 17.74L10.35 19L7 15.65L10.35 12.3L11.63 13.56L9.54 15.65M17 15.65L13.65 19L12.38 17.74L14.47 15.65L12.38 13.56L13.65 12.3L17 15.65Z"></path></svg></a><span class="label">component</span><button id="pgHeaderReadme" title="Expand Documentation"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z"></path></svg></button><span class="line"></span></h2><div class="markdown" id="pgHeaderContainer"></div><script>markdown("pgHeader", "\r\n\r\nThe `pg-header` component renders the logo and header with a slot for search and nav.\r\n\r\n```typescript\r\nimport '@pictogrammers/components/pgHeader.js';\r\n```\r\n\r\n```html\r\n<pg-header\r\n logo=\"...svg path...\"\r\n name=\"Material Design Icons\"></pg-nav>\r\n```\r\n\r\n| Slots | Tested | Description |\r\n| ---------- | -------- | ----------- |\r\n| search | &#x2705; | Global search |\r\n| nav | &#x2705; | Navigation |\r\n\r\n| Attributes | Tested | Description |\r\n| ---------- | -------- | ----------- |\r\n| name | &#x2705; | Set website name |\r\n| logo | &#x2705; | Set path data |")</script><section><h3><span>basic</span></h3><x-pg-header-basic></x-pg-header-basic></section><h2 id="pgIconH2">pg-icon<a title="Link to pg-icon" href="#pg-icon" id="pg-icon"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z"></path></svg></a><a title="View Code" href="https://github.com/Pictogrammers/Components/tree/master/src/pg/icon" target="_blank"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M9.54 15.65L11.63 17.74L10.35 19L7 15.65L10.35 12.3L11.63 13.56L9.54 15.65M17 15.65L13.65 19L12.38 17.74L14.47 15.65L12.38 13.56L13.65 12.3L17 15.65Z"></path></svg></a><span class="label">component</span><button id="pgIconReadme" title="Expand Documentation"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z"></path></svg></button><span class="line"></span></h2><div class="markdown" id="pgIconContainer"></div><script>markdown("pgIcon", "\r\n\r\nThe `pg-icon` component allows a standard way to render [MaterialDesignIcons.com](https://materialdesignicons.com) icons.\r\n\r\n```typescript\r\nimport '@pictogrammers/components/pg/icon';\r\nimport PgIcon from '@pictogrammers/components/pg/icon';\r\n```\r\n\r\n```html\r\n<pg-icon path=\"...\"></pg-icon>\r\n```\r\n\r\n## Attributes\r\n\r\n| Attributes | Tested | Description |\r\n| ---------- | -------- | ----------- |\r\n| path | &#x2705; | Set path data |\r\n\r\n## CSS Variables\r\n\r\n| CSS Variables | Default | Description |\r\n| ------------------- | ----------- | ----------- |\r\n| `--pg-icon-color` | `#453C4F` | Color |\r\n| `--pg-icon-viewbox` | `0 0 24 24` | SVG viewBox |\r\n| `--pg-icon-width` | `1.5rem` | Width |\r\n| `--pg-icon-height` | `1.5rem` | Height |\r\n")</script><section><h3><span>basic</span></h3><x-pg-icon-basic></x-pg-icon-basic></section><h2 id="pgInputCheckH2">pg-input-check<a title="Link to pg-input-check" href="#pg-input-check" id="pg-input-check"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z"></path></svg></a><a title="View Code" href="https://github.com/Pictogrammers/Components/tree/master/src/pg/inputCheck" target="_blank"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M9.54 15.65L11.63 17.74L10.35 19L7 15.65L10.35 12.3L11.63 13.56L9.54 15.65M17 15.65L13.65 19L12.38 17.74L14.47 15.65L12.38 13.56L13.65 12.3L17 15.65Z"></path></svg></a><span class="label">component</span><button id="pgInputCheckReadme" title="Expand Documentation"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z"></path></svg></button><span class="line"></span></h2><div class="markdown" id="pgInputCheckContainer"></div><script>markdown("pgInputCheck", "\r\n\r\nThe `pg-input-check` component is a styled checkbox.\r\n\r\n```typescript\r\nimport '@pictogrammers/components/pg/inputCheck';\r\nimport PgInputCheck from '@pictogrammers/components/pg/inputCheck';\r\n```\r\n\r\n```html\r\n<pg-input-check></pg-input-check>\r\n```\r\n\r\n## Attributes\r\n\r\n| Attributes | Tested | Description |\r\n| ---------- | -------- | ----------- |\r\n| value | &#x2705; | `true` or `false` |\r\n\r\n## Events\r\n\r\n| Attributes | Tested | Description |\r\n| ---------- | -------- | ----------- |\r\n| change | &#x2705; | Click toggles boolean. |\r\n\r\n## CSS Variables\r\n\r\n| CSS Variables | Default | Description |\r\n| ------------------- | --------- | ----------- |\r\n| `--pg-input-check-blank-color` | `#453C4F` | Color |\r\n| `--pg-input-check-chcked-color` | `#453C4F` | Color |\r\n| `--pg-icon-size` | `1.5rem` | Width / Height |")</script><section><h3><span>basic</span></h3><x-pg-input-check-basic></x-pg-input-check-basic></section><h2 id="pgInputCheckListH2">pg-input-check-list<a title="Link to pg-input-check-list" href="#pg-input-check-list" id="pg-input-check-list"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z"></path></svg></a><a title="View Code" href="https://github.com/Pictogrammers/Components/tree/master/src/pg/inputCheckList" target="_blank"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M9.54 15.65L11.63 17.74L10.35 19L7 15.65L10.35 12.3L11.63 13.56L9.54 15.65M17 15.65L13.65 19L12.38 17.74L14.47 15.65L12.38 13.56L13.65 12.3L17 15.65Z"></path></svg></a><span class="label">component</span><button id="pgInputCheckListReadme" title="Expand Documentation"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z"></path></svg></button><span class="line"></span></h2><div class="markdown" id="pgInputCheckListContainer"></div><script>markdown("pgInputCheckList", "\r\n\r\nThe `pg-input-check-list` component is a list of checkboxes.\r\n\r\n```typescript\r\nimport '@pictogrammers/components/pg/inputCheck';\r\nimport PgInputCheck from '@pictogrammers/components/pg/inputCheck';\r\n```\r\n\r\n```html\r\n<pg-input-check-list></pg-input-check-list>\r\n```\r\n\r\n## Attributes\r\n\r\n| Attributes | Tested | Description |\r\n| ---------- | -------- | ----------- |\r\n| value | &#x2705; | Array of checked values. |\r\n| options | &#x2705; | Array of items. |\r\n\r\nEach option object must have a `value`. Optionally a `label` and `disabled`.\r\n\r\n## Events\r\n\r\n| Attributes | Tested | Description |\r\n| ---------- | -------- | ----------- |\r\n| change | &#x2705; | Any change in the list checks. |\r\n\r\n## CSS Variables\r\n\r\n| CSS Variables | Default | Description |\r\n| ------------------- | --------- | ----------- |\r\n| `--pg-input-check-blank-color` | `#453C4F` | Color |\r\n| `--pg-input-check-chcked-color` | `#453C4F` | Color |\r\n| `--pg-icon-size` | `1.5rem` | Width / Height |")</script><section><h3><span>basic</span></h3><x-pg-input-check-list-basic></x-pg-input-check-list-basic></section><h2 id="pgInputFileLocalH2">pg-input-file-local<a title="Link to pg-input-file-local" href="#pg-input-file-local" id="pg-input-file-local"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z"></path></svg></a><a title="View Code" href="https://github.com/Pictogrammers/Components/tree/master/src/pg/inputFileLocal" target="_blank"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M9.54 15.65L11.63 17.74L10.35 19L7 15.65L10.35 12.3L11.63 13.56L9.54 15.65M17 15.65L13.65 19L12.38 17.74L14.47 15.65L12.38 13.56L13.65 12.3L17 15.65Z"></path></svg></a><span class="label">component</span><button id="pgInputFileLocalReadme" title="Expand Documentation"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z"></path></svg></button><span class="line"></span></h2><div class="markdown" id="pgInputFileLocalContainer"></div><script>markdown("pgInputFileLocal", "\r\n\r\nThe `pg-input-file-local` component allows a quick way to read uploaded files for local processing. Such as reading a JSON file or text based file. It can also take in image files.\r\n\r\n```typescript\r\nimport '@pictogrammers/components/pg/inputLocalFile';\r\nimport PgInputFileLocal from '@pictogrammers/components/pg/inputLocalFile';\r\n```\r\n\r\n```html\r\n<pg-input-file-local\r\n acceptsFileType=\"json,txt\">\r\n</pg-input-file-local>\r\n```\r\n\r\n## Attributes\r\n\r\n| Attributes | Tested | Description |\r\n| ------------------- | -------- | ----------- |\r\n| `accepts-file-type` | &#x2705; | Allowed files. |\r\n\r\n## Events\r\n\r\n| Events | Detail |\r\n| ---------- | ------ |\r\n| `change` | `{ value, name }` |\r\n\r\n## CSS Variables\r\n\r\nFor CSS Variables please look at the `pg-button` as all CSS styles are shared.")</script><section><h3><span>basic</span></h3><x-pg-input-file-local-basic></x-pg-input-file-local-basic></section><h2 id="pgInputHexRgbH2">pg-input-hex-rgb<a title="Link to pg-input-hex-rgb" href="#pg-input-hex-rgb" id="pg-input-hex-rgb"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z"></path></svg></a><a title="View Code" href="https://github.com/Pictogrammers/Components/tree/master/src/pg/inputHexRgb" target="_blank"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M9.54 15.65L11.63 17.74L10.35 19L7 15.65L10.35 12.3L11.63 13.56L9.54 15.65M17 15.65L13.65 19L12.38 17.74L14.47 15.65L12.38 13.56L13.65 12.3L17 15.65Z"></path></svg></a><span class="label">component</span><button id="pgInputHexRgbReadme" title="Expand Documentation"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z"></path></svg></button><span class="line"></span></h2><div class="markdown" id="pgInputHexRgbContainer"></div><script>markdown("pgInputHexRgb", "\r\n\r\nThe `pg-input-hex-rgb` component allows quick input of hex or RGB color input. This is commonly placed above the `pg-color` selection.\r\n\r\n```typescript\r\nimport '@pictogrammers/components/pgInputHexRgb.js';\r\n```\r\n\r\n```html\r\n<pg-input-hex-rgb value=\"#000000\"></pg-input-hex-rgb>\r\n```\r\n\r\n| Attributes | Tested | Description |\r\n| ---------- | -------- | ----------- |\r\n| value | | Hex |")</script><section><h3><span>basic</span></h3><x-pg-input-hex-rgb-basic></x-pg-input-hex-rgb-basic></section><h2 id="pgInputPixelEditorH2">pg-input-pixel-editor<a title="Link to pg-input-pixel-editor" href="#pg-input-pixel-editor" id="pg-input-pixel-editor"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z"></path></svg></a><a title="View Code" href="https://github.com/Pictogrammers/Components/tree/master/src/pg/inputPixelEditor" target="_blank"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M9.54 15.65L11.63 17.74L10.35 19L7 15.65L10.35 12.3L11.63 13.56L9.54 15.65M17 15.65L13.65 19L12.38 17.74L14.47 15.65L12.38 13.56L13.65 12.3L17 15.65Z"></path></svg></a><span class="label">component</span><button id="pgInputPixelEditorReadme" title="Expand Documentation"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z"></path></svg></button><span class="line"></span></h2><div class="markdown" id="pgInputPixelEditorContainer"></div><script>markdown("pgInputPixelEditor", "\r\n\r\nThe `pg-input-pixel-editor` component is used to edit images. Tailored for pen or mouse input the editor can be used for various image editing tasks.\r\n\r\n```typescript\r\nimport '@pictogrammers/components/pgInputPixelEditor';\r\nimport { PgInputPixelEditor } from '@pictogrammers/components/pgInputPixelEditor';\r\n```\r\n\r\n```html\r\n<pg-input-pixel-editor></pg-input-pixel-editor>\r\n```\r\n\r\n## Attributes\r\n\r\n| Attributes | Tested | Description |\r\n| ----------- | -------- | ----------- |\r\n| `name` | | Unique name in `pg-form` |\r\n| `width` | | Pixel width. Default `10` |\r\n| `height` | | Pixel height. Default `10` |\r\n| `size` | | Pixel size, minimum value `4`. Default `10` |\r\n| `gridSize` | | Grid spacing between cells. Default `1` |\r\n\r\n## Events\r\n\r\n| Events | Tested | Description |\r\n| ---------- | -------- | ----------- |\r\n| `change` | | `{ detail: { value }` |\r\n| `input` | | `{ detail: { value }` |\r\n\r\n## Methods\r\n\r\nSee usage for each method below.\r\n\r\n| Method | Tested | Description |\r\n| ---------- | -------- | ----------- |\r\n| `save(options)` | - | Save file. |\r\n| `open(json)` | - | Open file. |\r\n| `undo()` | - | Undo. |\r\n| `hasUndo()` | - | Has undo |\r\n| `hasRedo()` | - | Has redo |\r\n| `redo()` | - | Redo. |\r\n| `selectLayer()` | - | Select layer. |\r\n| `getLayers()` | - | Get layer array. |\r\n| `addLayer(option)` | - | Add layer. |\r\n| `removeLayer(index)` | - | Remove layer. |\r\n| `flattenLayers(layerIndexes)` | - | Flatten layers. |\r\n| `moveLayer(startIndex, endIndex)` | - | Move layer. |\r\n| `getColors()` | - | Get colors. |\r\n| `addColor(r, g, b, a)` | - | Add color. |\r\n| `removeColor(index)` | - | Remove color. |\r\n| `moveColor(startIndex, endIndex)` | - | Move index. |\r\n| `rotateClockwise()` | - | Rotate. |\r\n| `rotateCounterclockwise()` | - | Rotate. |\r\n| `move(x, y[, layer])` | - | Move. |\r\n| `flipHorizontal()` | - | Flip horizontal. |\r\n| `flipVertical()` | - | Flip vertical. |\r\n| `invert()` | - | Invert layer. |\r\n\r\n### `save(options)` Method\r\n\r\nThe save method allows getting the JSON representation of the current editor.\r\n\r\n```typescript\r\n@Part() $editor: PgInputPixelEditor;\r\n\r\nhandleSave() {\r\n const json = await this.$editor.save({\r\n // Include history\r\n history: true,\r\n });\r\n // use json\r\n}\r\n```\r\n\r\n### `open(json)` Method\r\n\r\nThe open method allows loading json for previously created images.\r\n\r\n```typescript\r\n@Part() $editor: PgInputPixelEditor;\r\n\r\nhandleOpen() {\r\n const error = await this.$editor.open(json);\r\n if (error) {\r\n throw new Error(error.message);\r\n }\r\n}\r\n```\r\n\r\n## JSON Format\r\n\r\n- `width` - Image width.\r\n- `height` - Image width.\r\n- `transparent` - Render transparent background.\r\n\r\nA complete JSON storage for a 10x10 image.\r\n\r\n```json\r\n{\r\n \"width\": 10,\r\n \"height\": 10,\r\n \"transparent\": true,\r\n \"colors\": [\r\n [0, 0, 0, 0],\r\n [0, 0, 0, 1]\r\n ],\r\n \"layers\": [\r\n {\r\n \"name\": \"Layer 1\",\r\n \"export\": true,\r\n \"locked\": false,\r\n \"visible\": true,\r\n \"opacity\": 1\r\n }\r\n ],\r\n \"data\": [\r\n [\r\n [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],\r\n [0, 1, 1, 1, 1, 1, 1, 1, 1, 0],\r\n [0, 1, 0, 0, 0, 0, 0, 0, 1, 0],\r\n [0, 1, 0, 0, 0, 0, 0, 0, 1, 0],\r\n [0, 1, 0, 0, 0, 0, 0, 0, 1, 0],\r\n [0, 1, 0, 0, 0, 0, 0, 0, 1, 0],\r\n [0, 1, 0, 0, 0, 0, 0, 0, 1, 0],\r\n [0, 1, 0, 0, 0, 0, 0, 0, 1, 0],\r\n [0, 1, 1, 1, 1, 1, 1, 1, 1, 0],\r\n [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]\r\n ]\r\n ]\r\n}\r\n```\r\n")</script><section><h3><span>basic</span></h3><x-pg-input-pixel-editor-basic></x-pg-input-pixel-editor-basic></section><h2 id="pgInputRangeH2">pg-input-range<a title="Link to pg-input-range" href="#pg-input-range" id="pg-input-range"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z"></path></svg></a><a title="View Code" href="https://github.com/Pictogrammers/Components/tree/master/src/pg/inputRange" target="_blank"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M9.54 15.65L11.63 17.74L10.35 19L7 15.65L10.35 12.3L11.63 13.56L9.54 15.65M17 15.65L13.65 19L12.38 17.74L14.47 15.65L12.38 13.56L13.65 12.3L17 15.65Z"></path></svg></a><span class="label">component</span><button id="pgInputRangeReadme" title="Expand Documentation"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z"></path></svg></button><span class="line"></span></h2><div class="markdown" id="pgInputRangeContainer"></div><script>markdown("pgInputRange", "\r\n\r\nThe `pg-input-range` component creates an input range slider.\r\n\r\n```typescript\r\nimport '@pictogrammers/components/pgInputRange';\r\nimport { PgInputRange } from '@pictogrammers/components/pgInputRange';\r\n```\r\n\r\n```html\r\n<pg-input-range value=\"50\" min=\"1\" max=\"100\"></pg-input-range>\r\n```\r\n\r\n| Attributes | Tested | Description |\r\n| ---------- | -------- | ----------- |\r\n| min | | Min |\r\n| max | | Max |\r\n| step | | Step = 1 |")</script><section><h3><span>basic</span></h3><x-pg-input-range-basic></x-pg-input-range-basic></section><h2 id="pgInputSelectH2">pg-input-select<a title="Link to pg-input-select" href="#pg-input-select" id="pg-input-select"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z"></path></svg></a><a title="View Code" href="https://github.com/Pictogrammers/Components/tree/master/src/pg/inputSelect" target="_blank"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M9.54 15.65L11.63 17.74L10.35 19L7 15.65L10.35 12.3L11.63 13.56L9.54 15.65M17 15.65L13.65 19L12.38 17.74L14.47 15.65L12.38 13.56L13.65 12.3L17 15.65Z"></path></svg></a><span class="label">component</span><button id="pgInputSelectReadme" title="Expand Documentation"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z"></path></svg></button><span class="line"></span></h2><div class="markdown" id="pgInputSelectContainer"></div><script>markdown("pgInputSelect", "\r\n\r\nThe `pg-input-select` component creates an select drop down.\r\n\r\n```typescript\r\nimport '@pictogrammers/components/pgInputSelect';\r\nimport { PgInputSelect } '@pictogrammers/components/pgInputSelect';\r\n```\r\n\r\n```html\r\n<pg-input-select></pg-input-select>\r\n```\r\n\r\n## Attributes\r\n\r\n| Attributes | Tested | Description |\r\n| ---------- | -------- | ----------- |\r\n| options | | `[{ label: 'hello', value: 'world' }]` |\r\n| value | | `world` |\r\n\r\n## Events\r\n\r\n| Event | Tested | Detail |\r\n| --------- | -------- | ----------- |\r\n| change | | `{ label: 'hello', value: 'world' }` |\r\n")</script><section><h3><span>basic</span></h3><x-pg-input-select-basic></x-pg-input-select-basic></section><h2 id="pgInputTextH2">pg-input-text<a title="Link to pg-input-text" href="#pg-input-text" id="pg-input-text"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z"></path></svg></a><a title="View Code" href="https://github.com/Pictogrammers/Components/tree/master/src/pg/inputText" target="_blank"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M9.54 15.65L11.63 17.74L10.35 19L7 15.65L10.35 12.3L11.63 13.56L9.54 15.65M17 15.65L13.65 19L12.38 17.74L14.47 15.65L12.38 13.56L13.65 12.3L17 15.65Z"></path></svg></a><span class="label">component</span><button id="pgInputTextReadme" title="Expand Documentation"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z"></path></svg></button><span class="line"></span></h2><div class="markdown" id="pgInputTextContainer"></div><script>markdown("pgInputText", "\r\n\r\nThe `pg-input-text` component creates an input that accepts text input.\r\n\r\n```typescript\r\nimport '@pictogrammers/components/pgInputText';\r\nimport { PgInputText } from '@pictogrammers/components/pgInputText';\r\n```\r\n\r\n```html\r\n<pg-input-text value=\"50\"></pg-input-text>\r\n```\r\n\r\n## Attributes\r\n\r\n| Attributes | Tested | Description |\r\n| ----------- | -------- | ----------- |\r\n| name | | Unique name in `pg-form` |\r\n| value | | Field value |\r\n| placeholder | | Placeholder text |\r\n\r\n## Events\r\n\r\n| Events | Tested | Description |\r\n| ---------- | -------- | ----------- |\r\n| change | | `{ detail: { value }` |\r\n| input | | `{ detail: { value }` |\r\n")</script><section><h3><span>basic</span></h3><x-pg-input-text-basic></x-pg-input-text-basic></section><h2 id="pgInputTextIconH2">pg-input-text-icon<a title="Link to pg-input-text-icon" href="#pg-input-text-icon" id="pg-input-text-icon"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z"></path></svg></a><a title="View Code" href="https://github.com/Pictogrammers/Components/tree/master/src/pg/inputTextIcon" target="_blank"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M9.54 15.65L11.63 17.74L10.35 19L7 15.65L10.35 12.3L11.63 13.56L9.54 15.65M17 15.65L13.65 19L12.38 17.74L14.47 15.65L12.38 13.56L13.65 12.3L17 15.65Z"></path></svg></a><span class="label">component</span><button id="pgInputTextIconReadme" title="Expand Documentation"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z"></path></svg></button><span class="line"></span></h2><div class="markdown" id="pgInputTextIconContainer"></div><script>markdown("pgInputTextIcon", "\r\n\r\nThe `pg-input-text` component creates an input that accepts text input.\r\n\r\n```typescript\r\nimport '@pictogrammers/components/pgInputText';\r\nimport { PgInputRange } from '@pictogrammers/components/pgInputText';\r\n```\r\n\r\n```html\r\n<pg-input-text value=\"50\"></pg-input-text>\r\n```\r\n\r\n## Attributes\r\n\r\n| Attributes | Tested | Description |\r\n| ---------- | -------- | ----------- |\r\n| name | | Unique name in `pg-form` |\r\n| value | | Field value |\r\n\r\n## Events\r\n\r\n| Events | Tested | Description |\r\n| ---------- | -------- | ----------- |\r\n| change | | `{ detail: { value }` |\r\n| input | | `{ detail: { value }` |\r\n")</script><h2 id="pgInputUserSelectH2">pg-input-user-select<a title="Link to pg-input-user-select" href="#pg-input-user-select" id="pg-input-user-select"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z"></path></svg></a><a title="View Code" href="https://github.com/Pictogrammers/Components/tree/master/src/pg/inputUserSelect" target="_blank"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M9.54 15.65L11.63 17.74L10.35 19L7 15.65L10.35 12.3L11.63 13.56L9.54 15.65M17 15.65L13.65 19L12.38 17.74L14.47 15.65L12.38 13.56L13.65 12.3L17 15.65Z"></path></svg></a><span class="label">component</span><button id="pgInputUserSelectReadme" title="Expand Documentation"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z"></path></svg></button><span class="line"></span></h2><div class="markdown" id="pgInputUserSelectContainer"></div><script>markdown("pgInputUserSelect", "\r\n\r\nThe `pg-input-user-select` component creates an select drop down.\r\n\r\n```typescript\r\nimport '@pictogrammers/components/pgInputUserSelect';\r\nimport { PgInputUserSelect } '@pictogrammers/components/pgInputUserSelect';\r\n```\r\n\r\n```html\r\n<pg-input-user-select></pg-input-user-select>\r\n```\r\n\r\n## Attributes\r\n\r\n| Attributes | Tested | Description |\r\n| ---------- | -------- | ----------- |\r\n| options | | `[User, ...]` |\r\n| value | | `world` |\r\n\r\n## Events\r\n\r\n| Event | Tested | Detail |\r\n| --------- | -------- | ----------- |\r\n| change | | `User` |\r\n\r\n## Models\r\n\r\n```yaml\r\n$ref: '#/api/model/user'\r\n```")</script><section><h3><span>basic</span></h3><x-pg-input-user-select-basic></x-pg-input-user-select-basic></section><h2 id="pgListTagH2">pg-list-tag<a title="Link to pg-list-tag" href="#pg-list-tag" id="pg-list-tag"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z"></path></svg></a><a title="View Code" href="https://github.com/Pictogrammers/Components/tree/master/src/pg/listTag" target="_blank"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M9.54 15.65L11.63 17.74L10.35 19L7 15.65L10.35 12.3L11.63 13.56L9.54 15.65M17 15.65L13.65 19L12.38 17.74L14.47 15.65L12.38 13.56L13.65 12.3L17 15.65Z"></path></svg></a><span class="label">component</span><button id="pgListTagReadme" title="Expand Documentation"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z"></path></svg></button><span class="line"></span></h2><div class="markdown" id="pgListTagContainer"></div><script>markdown("pgListTag", "\r\n\r\nThe `pg-icon` component allows a standard way to render [MaterialDesignIcons.com](https://materialdesignicons.com) icons.\r\n\r\n```typescript\r\nimport '@pictogrammers/components/pg/icon';\r\nimport PgIcon from '@pictogrammers/components/pg/icon';\r\n```\r\n\r\n```html\r\n<pg-icon path=\"...\"></pg-icon>\r\n```\r\n\r\n## Attributes\r\n\r\n| Attributes | Tested | Description |\r\n| ---------- | -------- | ----------- |\r\n| path | &#x2705; | Set path data |\r\n\r\n## CSS Variables\r\n\r\n| CSS Variables | Default | Description |\r\n| ------------------- | --------- | ----------- |\r\n| `--pg-icon-color` | `#453C4F` | Color |\r\n| `--pg-icon-width` | `1.5rem` | Width |\r\n| `--pg-icon-height` | `1.5rem` | Height |")</script><section><h3><span>basic</span></h3><x-pg-list-tag-basic></x-pg-list-tag-basic></section><h2 id="pgMarkdownH2">pg-markdown<a title="Link to pg-markdown" href="#pg-markdown" id="pg-markdown"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z"></path></svg></a><a title="View Code" href="https://github.com/Pictogrammers/Components/tree/master/src/pg/markdown" target="_blank"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M9.54 15.65L11.63 17.74L10.35 19L7 15.65L10.35 12.3L11.63 13.56L9.54 15.65M17 15.65L13.65 19L12.38 17.74L14.47 15.65L12.38 13.56L13.65 12.3L17 15.65Z"></path></svg></a><span class="label">component</span><button id="pgMarkdownReadme" title="Expand Documentation"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z"></path></svg></button><span class="line"></span></h2><div class="markdown" id="pgMarkdownContainer"></div><script>markdown("pgMarkdown", "\r\n\r\nRender markdown text with rich formatting.\r\n\r\n```typescript\r\nimport '@pictogrammers/components/pg/markdown';\r\n```\r\n\r\n## Usage\r\n\r\nAll markdown formatting is supported. Code blocks support:\r\n\r\n- css\r\n- groovy\r\n- javascript\r\n- json\r\n- jsx\r\n- tsx\r\n- java\r\n- markup (aka html, xml)\r\n- typescript\r\n- sass\r\n- scss\r\n- yaml (with a custom viewer)\r\n- php\r\n- bash\r\n- markdown")</script><section><h3><span>basic</span></h3><x-pg-markdown-basic></x-pg-markdown-basic></section><h2 id="pgMenuH2">pg-menu<a title="Link to pg-menu" href="#pg-menu" id="pg-menu"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z"></path></svg></a><a title="View Code" href="https://github.com/Pictogrammers/Components/tree/master/src/pg/menu" target="_blank"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M9.54 15.65L11.63 17.74L10.35 19L7 15.65L10.35 12.3L11.63 13.56L9.54 15.65M17 15.65L13.65 19L12.38 17.74L14.47 15.65L12.38 13.56L13.65 12.3L17 15.65Z"></path></svg></a><span class="label">component</span><button id="pgMenuReadme" title="Expand Documentation"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z"></path></svg></button><span class="line"></span></h2><div class="markdown" id="pgMenuContainer"></div><script>markdown("pgMenu", "\r\n\r\nThe `pg-menu` component renders a menu list. Menus can be used inline, but are usually created by a parent component. For example:\r\n\r\n- `pg-button-menu` - Button Menu\r\n - Default item `type` is `PgMenuItem`\r\n- `pg-button-icon-menu` - Button Icon Menu\r\n - Default item `type` is `PgMenuItem`\r\n- `PgMenuOverlay` Utility overlay for menus.\r\n - The item `type` is required.\r\n\r\n```typescript\r\nimport '@pictogrammers/components/pg/menu';\r\n```\r\n\r\n```html\r\n<pg-menu part=\"menu\"></pg-menu>\r\n```\r\n\r\n| Attributes | Tested | Description |\r\n| ---------- | -------- | ----------- |\r\n| `items` | | Set items list. Ex: `{ type: PgMenuItem }` |\r\n\r\n```typescript\r\nimport PgMenuItem from '@pictogrammers/components/pg/menuItem';\r\n\r\n// ...\r\n@Part() $menu: PgMenu;\r\n\r\nconnectedCallback() {\r\n this.$menu.items = [{\r\n label: 'Item 1',\r\n value: 'item1',\r\n type: PgMenuItem\r\n }];\r\n}\r\n```\r\n\r\n## CSS Variables\r\n\r\n| Variable | Default |\r\n| -------- | ------- |\r\n| `--pg-menu-padding` | `0.25rem` |\r\n| `--pg-menu-border-width` | `0` |\r\n| `--pg-menu-background-color` | `transparent` |\r\n| `--pg-menu-box-shadow` | `none` |")</script><section><h3><span>basic</span></h3><x-pg-menu-basic></x-pg-menu-basic></section><h2 id="pgMenuDividerH2">pg-menu-divider<a title="Link to pg-menu-divider" href="#pg-menu-divider" id="pg-menu-divider"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z"></path></svg></a><a title="View Code" href="https://github.com/Pictogrammers/Components/tree/master/src/pg/menuDivider" target="_blank"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M9.54 15.65L11.63 17.74L10.35 19L7 15.65L10.35 12.3L11.63 13.56L9.54 15.65M17 15.65L13.65 19L12.38 17.74L14.47 15.65L12.38 13.56L13.65 12.3L17 15.65Z"></path></svg></a><span class="label">component</span><button id="pgMenuDividerReadme" title="Expand Documentation"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z"></path></svg></button><span class="line"></span></h2><div class="markdown" id="pgMenuDividerContainer"></div><script>markdown("pgMenuDivider", "\r\n\r\nThe `PgMenuDivider` is used as a `type: PgMenuDivider` with the `pg-menu` component items.\r\n\r\n```typescript\r\nimport '@pictogrammers/components/pgMenuDivider.js';\r\n```\r\n")</script><section><h3><span>basic</span></h3><x-pg-menu-divider-basic></x-pg-menu-divider-basic></section><h2 id="pgMenuIconH2">pg-menu-icon<a title="Link to pg-menu-icon" href="#pg-menu-icon" id="pg-menu-icon"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z"></path></svg></a><a title="View Code" href="https://github.com/Pictogrammers/Components/tree/master/src/pg/menuIcon" target="_blank"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M9.54 15.65L11.63 17.74L10.35 19L7 15.65L10.35 12.3L11.63 13.56L9.54 15.65M17 15.65L13.65 19L12.38 17.74L14.47 15.65L12.38 13.56L13.65 12.3L17 15.65Z"></path></svg></a><span class="label">component</span><button id="pgMenuIconReadme" title="Expand Documentation"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z"></path></svg></button><span class="line"></span></h2><div class="markdown" id="pgMenuIconContainer"></div><script>markdown("pgMenuIcon", "\r\n\r\nVisual color picker using the standard Material Design pallet.\r\n\r\n```typescript\r\nimport '@pictogrammers/components/pg/menuIcon';\r\n```\r\n\r\n## Usage\r\n\r\n| Events | Description |\r\n| ------ | ----------- |\r\n| `onchange` | `event = { detail: { r, g, b, hex } }` |\r\n")</script><section><h3><span>basic</span></h3><x-pg-menu-icon-basic></x-pg-menu-icon-basic></section><h2 id="pgMenuItemH2">pg-menu-item<a title="Link to pg-menu-item" href="#pg-menu-item" id="pg-menu-item"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z"></path></svg></a><a title="View Code" href="https://github.com/Pictogrammers/Components/tree/master/src/pg/menuItem" target="_blank"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M9.54 15.65L11.63 17.74L10.35 19L7 15.65L10.35 12.3L11.63 13.56L9.54 15.65M17 15.65L13.65 19L12.38 17.74L14.47 15.65L12.38 13.56L13.65 12.3L17 15.65Z"></path></svg></a><span class="label">component</span><button id="pgMenuItemReadme" title="Expand Documentation"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z"></path></svg></button><span class="line"></span></h2><div class="markdown" id="pgMenuItemContainer"></div><script>markdown("pgMenuItem", "\r\n\r\nThe `PgMenuItem` is used with the `pg-menu` as a `type: PgMenuItem`.\r\n\r\nFor icon support use `PgMenuItemIcon`.\r\n\r\n## Usage\r\n\r\n```typescript\r\nimport '@pictogrammers/components/pgMenuItem.js';\r\n```\r\n\r\n```typescript\r\nthis.$items = [{\r\n type: PgMenuItem,\r\n label: 'Item 1'\r\n}];\r\n```\r\n\r\n| Attributes | Tested | Description |\r\n| ---------- | -------- | ----------- |\r\n| `label` | | Item label. |\r\n| `checked` | | Item checked. |\r\n| `disabled` | | Item disabled. |\r\n\r\n## Events\r\n\r\n```typescript\r\nthis.$item.addEventListener('select', (e: any) => {\r\n const { index } = e.detail;\r\n});\r\n```")</script><section><h3><span>basic</span></h3><x-pg-menu-item-basic></x-pg-menu-item-basic></section><h2 id="pgMenuItemIconH2">pg-menu-item-icon<a title="Link to pg-menu-item-icon" href="#pg-menu-item-icon" id="pg-menu-item-icon"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z"></path></svg></a><a title="View Code" href="https://github.com/Pictogrammers/Components/tree/master/src/pg/menuItemIcon" target="_blank"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M9.54 15.65L11.63 17.74L10.35 19L7 15.65L10.35 12.3L11.63 13.56L9.54 15.65M17 15.65L13.65 19L12.38 17.74L14.47 15.65L12.38 13.56L13.65 12.3L17 15.65Z"></path></svg></a><span class="label">component</span><button id="pgMenuItemIconReadme" title="Expand Documentation"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z"></path></svg></button><span class="line"></span></h2><div class="markdown" id="pgMenuItemIconContainer"></div><script>markdown("pgMenuItemIcon", "\r\n\r\nThe `PgMenuItemIcon` is the `PgMenuItem` with icon support. The `pg-menu` can use both in the same list, but this component has the overhead of includig `PgIcon`.\r\n\r\n## Usage\r\n\r\n```typescript\r\nimport '@pictogrammers/components/pgMenuItemIcon.js';\r\n```\r\n\r\n```typescript\r\nthis.$items = [{\r\n type: PgMenuItemIcon,\r\n icon: '',\r\n label: 'Item 1'\r\n}];\r\n```\r\n\r\n| Attributes | Tested | Description |\r\n| ---------- | -------- | ----------- |\r\n| `label` | | Item label. |\r\n| `icon` | | Item icon. |\r\n| `checked` | | Item checked. |\r\n| `disabled` | | Item disabled. |\r\n\r\n## Events\r\n\r\n```typescript\r\nthis.$item.addEventListener('select', (e: any) => {\r\n const { index } = e.detail;\r\n});\r\n```")</script><section><h3><span>basic</span></h3><x-pg-menu-item-icon-basic></x-pg-menu-item-icon-basic></section><h2 id="pgModalH2">pg-modal<a title="Link to pg-modal" href="#pg-modal" id="pg-modal"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z"></path></svg></a><a title="View Code" href="https://github.com/Pictogrammers/Components/tree/master/src/pg/modal" target="_blank"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M9.54 15.65L11.63 17.74L10.35 19L7 15.65L10.35 12.3L11.63 13.56L9.54 15.65M17 15.65L13.65 19L12.38 17.74L14.47 15.65L12.38 13.56L13.65 12.3L17 15.65Z"></path></svg></a><span class="label">component</span><button id="pgModalReadme" title="Expand Documentation"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z"></path></svg></button><span class="line"></span></h2><div class="markdown" id="pgModalContainer"></div><script>markdown("pgModal", "\r\n\r\nThe `PgModal` is a base class for creating modals.\r\n\r\n```typescript\r\nimport '@pictogrammers/components/pgModal';\r\nimport PgModal from '@pictogrammers/components/pgModal';\r\n```\r\n\r\n```typescript\r\nimport { Component, Prop, Part } from '@pictogrammers/element';\r\n\r\nimport template from './modal.html';\r\nimport style from './modal.css';\r\n\r\n@Component({\r\n selector: 'my-modal',\r\n template,\r\n style\r\n})\r\nexport default class MyModal extends PgModal {\r\n @Part() $close: HTMLButtonElement;\r\n connectedCallback() {\r\n this.$close.addEventListener('click', () => {\r\n this.close();\r\n });\r\n }\r\n}\r\n```\r\n")</script><section><h3><span>basic</span></h3><x-pg-modal-basic></x-pg-modal-basic></section><h2 id="pgModalAlertH2">pg-modal-alert<a title="Link to pg-modal-alert" href="#pg-modal-alert" id="pg-modal-alert"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z"></path></svg></a><a title="View Code" href="https://github.com/Pictogrammers/Components/tree/master/src/pg/modalAlert" target="_blank"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M9.54 15.65L11.63 17.74L10.35 19L7 15.65L10.35 12.3L11.63 13.56L9.54 15.65M17 15.65L13.65 19L12.38 17.74L14.47 15.65L12.38 13.56L13.65 12.3L17 15.65Z"></path></svg></a><span class="label">component</span><button id="pgModalAlertReadme" title="Expand Documentation"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z"></path></svg></button><span class="line"></span></h2><div class="markdown" id="pgModalAlertContainer"></div><script>markdown("pgModalAlert", "\r\n\r\nThe `PgModalAlert` creates a alert box above everything.\r\n\r\n```typescript\r\nimport PgModalAlert from '@pictogrammers/components/pgModalAlert';\r\n```\r\n\r\n```typescript\r\nconst result = await PgModalAlert.open({\r\n header: 'Delete Item',\r\n message: 'Are you sure you want to delete the item?'\r\n});\r\nif (result) {\r\n console.log('Item has been deleted.');\r\n}\r\n```\r\n")</script><section><h3><span>basic</span></h3><x-pg-modal-alert-basic></x-pg-modal-alert-basic></section><h2 id="pgModificationH2">pg-modification<a title="Link to pg-modification" href="#pg-modification" id="pg-modification"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z"></path></svg></a><a title="View Code" href="https://github.com/Pictogrammers/Components/tree/master/src/pg/modification" target="_blank"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M9.54 15.65L11.63 17.74L10.35 19L7 15.65L10.35 12.3L11.63 13.56L9.54 15.65M17 15.65L13.65 19L12.38 17.74L14.47 15.65L12.38 13.56L13.65 12.3L17 15.65Z"></path></svg></a><span class="label">component</span><button id="pgModificationReadme" title="Expand Documentation"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z"></path></svg></button><span class="line"></span></h2><div class="markdown" id="pgModificationContainer"></div><script>markdown("pgModification", "\r\n\r\nThe `pg-modification` component takes an array of modifications and displays the values.\r\n\r\n```typescript\r\nimport '@pictogrammers/components/pg/modification';\r\nimport PgModification from '@pictogrammers/components/pg/modification';\r\n```\r\n\r\n```html\r\n<pg-modification></pg-modification>\r\n```\r\n\r\n## Attributes\r\n\r\n| Attributes | Tested | Default | Description |\r\n| ---------- | -------- | ----------- |\r\n| modifications | &#x2705; | Set modification array |\r\n| edit | &#x2705; | `false` | Toggle edit mode |\r\n\r\n## Events\r\n\r\n| Attributes | Tested | Description |\r\n| ---------- | -------- | ----------- |\r\n| issue | &#x2705; | Issue number clicked. |\r\n| edit | &#x2705; | Edit clicked. |\r\n\r\n## CSS Variables\r\n\r\n| CSS Variables | Default | Description |\r\n| ------------------- | --------- | ----------- |\r\n| `--pg-icon-color` | `#453C4F` | Color |\r\n| `--pg-icon-width` | `1.5rem` | Width |\r\n| `--pg-icon-height` | `1.5rem` | Height |")</script><section><h3><span>basic</span></h3><x-pg-modification-basic></x-pg-modification-basic></section><h2 id="pgNavH2">pg-nav<a title="Link to pg-nav" href="#pg-nav" id="pg-nav"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z"></path></svg></a><a title="View Code" href="https://github.com/Pictogrammers/Components/tree/master/src/pg/nav" target="_blank"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M9.54 15.65L11.63 17.74L10.35 19L7 15.65L10.35 12.3L11.63 13.56L9.54 15.65M17 15.65L13.65 19L12.38 17.74L14.47 15.65L12.38 13.56L13.65 12.3L17 15.65Z"></path></svg></a><span class="label">component</span><button id="pgNavReadme" title="Expand Documentation"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z"></path></svg></button><span class="line"></span></h2><div class="markdown" id="pgNavContainer"></div><script>markdown("pgNav", "\r\n\r\nThe `pg-nav` component renders the navigation for the site. This includes `pg-search`.\r\n\r\n```typescript\r\nimport '@pictogrammers/components/pgNav.js';\r\n```\r\n\r\n```html\r\n<pg-nav name=\"Material Design Icons\"></pg-nav>\r\n```\r\n\r\n| Attributes | Tested | Description |\r\n| ---------- | -------- | ----------- |\r\n| name | &#x2705; | Set website name |\r\n| logo | &#x2705; | Set path data |")</script><section><h3><span>basic</span></h3><x-pg-nav-basic></x-pg-nav-basic></section><h2 id="pgOverlayH2">pg-overlay<a title="Link to pg-overlay" href="#pg-overlay" id="pg-overlay"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z"></path></svg></a><a title="View Code" href="https://github.com/Pictogrammers/Components/tree/master/src/pg/overlay" target="_blank"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M9.54 15.65L11.63 17.74L10.35 19L7 15.65L10.35 12.3L11.63 13.56L9.54 15.65M17 15.65L13.65 19L12.38 17.74L14.47 15.65L12.38 13.56L13.65 12.3L17 15.65Z"></path></svg></a><span class="label">component</span><button id="pgOverlayReadme" title="Expand Documentation"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z"></path></svg></button><span class="line"></span></h2><div class="markdown" id="pgOverlayContainer"></div><script>markdown("pgOverlay", "\r\n\r\nThe `PgOverlay` class provides a way to create an element on the body element. Elements that should be attached at the body root should extend `PgOverlay`.\r\n\r\n\r\n## Example Modal\r\n\r\n```typescript\r\nimport { Component, Prop } from '@pictogrammers/element';\r\nimport PgOverlay from '@pictogrammers/components/pgOverlay';\r\n\r\nimport template from './modal.html';\r\nimport style from './modal.css';\r\n\r\n@Component({\r\n selector: 'pg-modal',\r\n template,\r\n style\r\n})\r\nexport default class PgModal extends PgOverlay {\r\n // This will render attached to the body. To close call\r\n // this.close(result);\r\n\r\n @Prop() foo: string = 'Default';\r\n}\r\n```\r\n\r\nWhile this component can be inlined still it will mostly be opened via the a static open method which will create an instance and attach it to the `<body>` tag.\r\n\r\n```typescript\r\nimport PgModal from './../modal/modal';\r\n\r\nconst result = await PgModal.open({\r\n foo: 'bar'\r\n});\r\nconsole.log(result);\r\n```")</script><section><h3><span>basic</span></h3><x-pg-overlay-basic></x-pg-overlay-basic></section><h2 id="pgOverlayContextMenuH2">pg-overlay-context-menu<a title="Link to pg-overlay-context-menu" href="#pg-overlay-context-menu" id="pg-overlay-context-menu"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z"></path></svg></a><a title="View Code" href="https://github.com/Pictogrammers/Components/tree/master/src/pg/overlayContextMenu" target="_blank"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M9.54 15.65L11.63 17.74L10.35 19L7 15.65L10.35 12.3L11.63 13.56L9.54 15.65M17 15.65L13.65 19L12.38 17.74L14.47 15.65L12.38 13.56L13.65 12.3L17 15.65Z"></path></svg></a><span class="label">component</span><button id="pgOverlayContextMenuReadme" title="Expand Documentation"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z"></path></svg></button><span class="line"></span></h2><div class="markdown" id="pgOverlayContextMenuContainer"></div><script>markdown("pgOverlayContextMenu", "\r\n\r\nThe `PgOverlayContextMenu` creates an overlay menu above a source element. For standard menu lists use the `PgMenuItem` for the check.\r\n\r\nComponents that use `PgOverlayContextMenu` include:\r\n\r\n- `pg-input-select`\r\n\r\n## Usage\r\n\r\n```typescript\r\nimport PgMenuItem from '@pictogrammers/components/pg/menuItem';\r\n\r\n#isOpen: false;\r\nhandleSourceClick(e: MouseEvent) {\r\n if (this.#isOpen) { return; }\r\n this.#isOpen = true;\r\n const result = await PgOverlayContextMenu.open({\r\n source: this.$element,\r\n x: e.clientX,\r\n y: e.clientY,\r\n items: [{\r\n label: 'Item 1',\r\n value: 'item1',\r\n type: PgMenuItem\r\n }, {\r\n label: 'Item 2',\r\n value: 'item2',\r\n type: PgMenuItem\r\n }]\r\n });\r\n this.#isOpen = false;\r\n console.log(result);\r\n}\r\n```\r\n")</script><section><h3><span>basic</span></h3><x-pg-overlay-context-menu-basic></x-pg-overlay-context-menu-basic></section><h2 id="pgOverlayMenuH2">pg-overlay-menu<a title="Link to pg-overlay-menu" href="#pg-overlay-menu" id="pg-overlay-menu"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z"></path></svg></a><a title="View Code" href="https://github.com/Pictogrammers/Components/tree/master/src/pg/overlayMenu" target="_blank"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M9.54 15.65L11.63 17.74L10.35 19L7 15.65L10.35 12.3L11.63 13.56L9.54 15.65M17 15.65L13.65 19L12.38 17.74L14.47 15.65L12.38 13.56L13.65 12.3L17 15.65Z"></path></svg></a><span class="label">component</span><button id="pgOverlayMenuReadme" title="Expand Documentation"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z"></path></svg></button><span class="line"></span></h2><div class="markdown" id="pgOverlayMenuContainer"></div><script>markdown("pgOverlayMenu", "\r\n\r\nThe `PgOverlayMenu` creates an overlay menu above a source element. For standard menu lists use the `PgMenuItem` for the check.\r\n\r\nComponents that use `PgOverlayMenu` include:\r\n\r\n- `pg-button-menu`\r\n\r\n## Usage\r\n\r\n```typescript\r\nimport PgMenuItem from '@pictogrammers/components/pg/menuItem';\r\n\r\n#isOpen: false;\r\nhandleSourceClick() {\r\n if (this.#isOpen) { return; }\r\n this.#isOpen = true;\r\n const result = await PgOverlayMenu.open({\r\n source: this.$element,\r\n items: [{\r\n label: 'Item 1',\r\n value: 'item1',\r\n type: PgMenuItem\r\n }, {\r\n label: 'Item 2',\r\n value: 'item2',\r\n type: PgMenuItem\r\n }]\r\n });\r\n this.#isOpen = false;\r\n console.log(result);\r\n}\r\n```\r\n")</script><section><h3><span>basic</span></h3><x-pg-overlay-menu-basic></x-pg-overlay-menu-basic></section><h2 id="pgOverlaySelectMenuH2">pg-overlay-select-menu<a title="Link to pg-overlay-select-menu" href="#pg-overlay-select-menu" id="pg-overlay-select-menu"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z"></path></svg></a><a title="View Code" href="https://github.com/Pictogrammers/Components/tree/master/src/pg/overlaySelectMenu" target="_blank"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M9.54 15.65L11.63 17.74L10.35 19L7 15.65L10.35 12.3L11.63 13.56L9.54 15.65M17 15.65L13.65 19L12.38 17.74L14.47 15.65L12.38 13.56L13.65 12.3L17 15.65Z"></path></svg></a><span class="label">component</span><button id="pgOverlaySelectMenuReadme" title="Expand Documentation"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z"></path></svg></button><span class="line"></span></h2><div class="markdown" id="pgOverlaySelectMenuContainer"></div><script>markdown("pgOverlaySelectMenu", "\r\n\r\nThe `PgOverlaySelectMenu` creates an overlay menu above a source element. For standard menu lists use the `PgMenuItem` for the check.\r\n\r\nComponents that use `PgOverlaySelectMenu` include:\r\n\r\n- `pg-input-select`\r\n\r\n## Usage\r\n\r\n```typescript\r\nimport PgMenuItem from '@pictogrammers/components/pg/menuItem';\r\n\r\n#isOpen: false;\r\nhandleSourceClick() {\r\n if (this.#isOpen) { return; }\r\n this.#isOpen = true;\r\n const result = await PgOverlayMenu.open({\r\n source: this.$element,\r\n items: [{\r\n label: 'Item 1',\r\n value: 'item1',\r\n type: PgMenuItem\r\n }, {\r\n label: 'Item 2',\r\n value: 'item2',\r\n type: PgMenuItem\r\n }]\r\n });\r\n this.#isOpen = false;\r\n console.log(result);\r\n}\r\n```\r\n")</script><section><h3><span>basic</span></h3><x-pg-overlay-select-menu-basic></x-pg-overlay-select-menu-basic></section><h2 id="pgOverlaySubMenuH2">pg-overlay-sub-menu<a title="Link to pg-overlay-sub-menu" href="#pg-overlay-sub-menu" id="pg-overlay-sub-menu"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z"></path></svg></a><a title="View Code" href="https://github.com/Pictogrammers/Components/tree/master/src/pg/overlaySubMenu" target="_blank"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M9.54 15.65L11.63 17.74L10.35 19L7 15.65L10.35 12.3L11.63 13.56L9.54 15.65M17 15.65L13.65 19L12.38 17.74L14.47 15.65L12.38 13.56L13.65 12.3L17 15.65Z"></path></svg></a><span class="label">component</span><button id="pgOverlaySubMenuReadme" title="Expand Documentation"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z"></path></svg></button><span class="line"></span></h2><div class="markdown" id="pgOverlaySubMenuContainer"></div><script>markdown("pgOverlaySubMenu", "\r\n\r\nThe `PgOverlaySubMenu` creates an overlay menu above a source element. For standard menu lists use the `PgMenuItem` for the check.\r\n\r\nComponents that use `PgOverlaySubMenu` include:\r\n\r\n- `pg-input-select`\r\n\r\n## Usage\r\n\r\n```typescript\r\nimport PgMenuItem from '@pictogrammers/components/pg/overlaySubMenu';\r\n\r\n#isOpen: false;\r\nhandleSourceClick(e: MouseEvent) {\r\n if (this.#isOpen) { return; }\r\n this.#isOpen = true;\r\n const result = await PgOverlaySubMenu.open({\r\n source: this.$element,\r\n x: e.clientX,\r\n y: e.clientY,\r\n items: [{\r\n label: 'Item 1',\r\n value: 'item1',\r\n type: PgMenuItem\r\n }, {\r\n label: 'Item 2',\r\n value: 'item2',\r\n type: PgMenuItem\r\n }]\r\n });\r\n this.#isOpen = false;\r\n console.log(result);\r\n}\r\n```\r\n")</script><h2 id="pgPickerH2">pg-picker<a title="Link to pg-picker" href="#pg-picker" id="pg-picker"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z"></path></svg></a><a title="View Code" href="https://github.com/Pictogrammers/Components/tree/master/src/pg/picker" target="_blank"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M9.54 15.65L11.63 17.74L10.35 19L7 15.65L10.35 12.3L11.63 13.56L9.54 15.65M17 15.65L13.65 19L12.38 17.74L14.47 15.65L12.38 13.56L13.65 12.3L17 15.65Z"></path></svg></a><span class="label">component</span><button id="pgPickerReadme" title="Expand Documentation"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z"></path></svg></button><span class="line"></span></h2><div class="markdown" id="pgPickerContainer"></div><script>markdown("pgPicker", "\r\n\r\nDeprecated\r\n\r\n```typescript\r\nimport '@pictogrammers/components/pg/color';\r\n```\r\n\r\n## Usage\r\n\r\n| Events | Description |\r\n| ------ | ----------- |\r\n| `onchange` | `event = { detail: { r, g, b, hex } }` |\r\n")</script><h2 id="pgPreviewH2">pg-preview<a title="Link to pg-preview" href="#pg-preview" id="pg-preview"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z"></path></svg></a><a title="View Code" href="https://github.com/Pictogrammers/Components/tree/master/src/pg/preview" target="_blank"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M9.54 15.65L11.63 17.74L10.35 19L7 15.65L10.35 12.3L11.63 13.56L9.54 15.65M17 15.65L13.65 19L12.38 17.74L14.47 15.65L12.38 13.56L13.65 12.3L17 15.65Z"></path></svg></a><span class="label">component</span><button id="pgPreviewReadme" title="Expand Documentation"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z"></path></svg></button><span class="line"></span></h2><div class="markdown" id="pgPreviewContainer"></div><script>markdown("pgPreview", "\r\n\r\nThe `pg-preview` component allows a standard way to render a grid behind an icon.\r\n\r\n```typescript\r\nimport '@pictogrammers/components/pg/preview';\r\nimport PgIcon from '@pictogrammers/components/pg/preview';\r\n```\r\n\r\n```html\r\n<pg-preview path=\"...\" size=\"4\"></pg-preview>\r\n```\r\n\r\n| Attributes | Tested | Default | Description |\r\n| ---------- | -------- | ------- | ----------- |\r\n| path | &#x2705; | | Set path data |\r\n| size | &#x2705; | 4 | |\r\n| width | | 24 | |\r\n| height | | 24 | |")</script><section><h3><span>basic</span></h3><x-pg-preview-basic></x-pg-preview-basic></section><h2 id="pgScrollH2">pg-scroll<a title="Link to pg-scroll" href="#pg-scroll" id="pg-scroll"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z"></path></svg></a><a title="View Code" href="https://github.com/Pictogrammers/Components/tree/master/src/pg/scroll" target="_blank"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M9.54 15.65L11.63 17.74L10.35 19L7 15.65L10.35 12.3L11.63 13.56L9.54 15.65M17 15.65L13.65 19L12.38 17.74L14.47 15.65L12.38 13.56L13.65 12.3L17 15.65Z"></path></svg></a><span class="label">component</span><button id="pgScrollReadme" title="Expand Documentation"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z"></path></svg></button><span class="line"></span></h2><div class="markdown" id="pgScrollContainer"></div><script>markdown("pgScroll", "\r\n\r\nThe `pg-scroll` component handles scrolling data in the viewport. This component has 2 use cases.\r\n\r\n- Basic: Detecting when a element is in view and reacting differently. Useful to cut down CPU intensive things.\r\n- Advanced: Unlimited lists of data only rendered when in the viewport to cut down DOM elements.\r\n\r\n```typescript\r\nimport '@pictogrammers/components/pgScroll.js';\r\n```\r\n\r\n```html\r\n<pg-scroll></pg-scroll>\r\n```\r\n\r\n| Events | Tested | Description |\r\n| ---------- | -------- | ----------- |\r\n| enter | &#x2705; | Fired when element enters viewport |\r\n| leave | &#x2705; | Fired when mouse leaves viewport |\r\n| calculate | &#x2705; | `{ offsetY, viewHeight, height }` |\r\n\r\n## Basic\r\n\r\nTo detect and manage viewport visability listen to the `enter` and `leave` events. For instance JS heavy animations or scrolling a carousel may not make sense while off screen especially if one wants to see the first slide first.\r\n\r\n> Note do not use lots of these as they do need to check on very scroll operation.\r\n\r\n## Advanced\r\n\r\nTo create virtual items or scroll containers where only items in the viewport are rendered listen to the `offset` event.\r\n\r\nThe slotted content will need to dispatch `height` event for the `pg-scroll` to capture.\r\n\r\n```typescript\r\nthis.$scroll.height = 2000;\r\n```\r\n\r\nDuring resizing/scrolling the `calculate` event will fire rapidly. The container will need to in a performant way render content handling the offset data.\r\n\r\n- `height` The height calculated and sent from the child content.\r\n- `viewHeight` This is either equal to `height` or the viewport height.\r\n- `offsetY` Distance from the top. Items in the list should use this to calculate the first item position.")</script><section><h3><span>basic</span></h3><x-pg-scroll-basic></x-pg-scroll-basic></section><h2 id="pgSearchH2">pg-search<a title="Link to pg-search" href="#pg-search" id="pg-search"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z"></path></svg></a><a title="View Code" href="https://github.com/Pictogrammers/Components/tree/master/src/pg/search" target="_blank"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M9.54 15.65L11.63 17.74L10.35 19L7 15.65L10.35 12.3L11.63 13.56L9.54 15.65M17 15.65L13.65 19L12.38 17.74L14.47 15.65L12.38 13.56L13.65 12.3L17 15.65Z"></path></svg></a><span class="label">component</span><button id="pgSearchReadme" title="Expand Documentation"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z"></path></svg></button><span class="line"></span></h2><div class="markdown" id="pgSearchContainer"></div><script>markdown("pgSearch", "\r\n\r\nThe `pg-search` component allows a standard way to search all content on the site.\r\n\r\n- Search Guides\r\n- Search General Pages\r\n- Search Icons by Name\r\n\r\n```typescript\r\nimport '@pictogrammers/components/pgSearch.js';\r\n```\r\n\r\n```html\r\n<pg-search></pg-search>\r\n```\r\n\r\n| Attribute | Required | Description |\r\n| --------- | -------- | ----------- |\r\n| icons | Required | Pass in icon array. |\r\n| items | - | Pass in other items. |\r\n\r\n| Events | Tested | Description |\r\n| ---------- | -------- | ----------- |\r\n| onsearch | | Called on enter key. |\r\n\r\n## Schemas\r\n\r\n### Icons\r\n\r\n```json\r\n[\r\n {\r\n \"id\": \"uuid1\",\r\n \"name\": \"account\",\r\n \"aliases\": [\r\n {\r\n \"name\": \"user\"\r\n }\r\n ]\r\n }\r\n]\r\n```\r\n\r\n### Items\r\n\r\n```json\r\n[\r\n {\r\n \"name\": \"Web Component\",\r\n \"url\": \"/getting-started/web-component\",\r\n \"type\": \"Documentation\"\r\n }\r\n]\r\n```\r\n\r\n## Accessibility\r\n\r\n- Keyboard Navigation with Up/Down\r\n- Focus States")</script><section><h3><span>basic</span></h3><x-pg-search-basic></x-pg-search-basic></section><h2 id="pgTabH2">pg-tab<a title="Link to pg-tab" href="#pg-tab" id="pg-tab"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z"></path></svg></a><a title="View Code" href="https://github.com/Pictogrammers/Components/tree/master/src/pg/tab" target="_blank"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M9.54 15.65L11.63 17.74L10.35 19L7 15.65L10.35 12.3L11.63 13.56L9.54 15.65M17 15.65L13.65 19L12.38 17.74L14.47 15.65L12.38 13.56L13.65 12.3L17 15.65Z"></path></svg></a><span class="label">component</span><button id="pgTabReadme" title="Expand Documentation"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z"></path></svg></button><span class="line"></span></h2><div class="markdown" id="pgTabContainer"></div><script>markdown("pgTab", "\r\n\r\nThe `pg-tab` component is used within a `pg-tabs` parent\r\n\r\n```typescript\r\nimport '@pictogrammers/components/pg/tab';\r\nimport PgTab from '@pictogrammers/components/pg/tab';\r\n```\r\n\r\n> See `pg-tabs` for examples.\r\n\r\n\r\n| Attribute | Description |\r\n| ---------- | ------------- |\r\n| label | Tab label |\r\n\r\n\r\n> See `pg-tabs` for CSS Variables.")</script><h2 id="pgTabsH2">pg-tabs<a title="Link to pg-tabs" href="#pg-tabs" id="pg-tabs"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z"></path></svg></a><a title="View Code" href="https://github.com/Pictogrammers/Components/tree/master/src/pg/tabs" target="_blank"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M9.54 15.65L11.63 17.74L10.35 19L7 15.65L10.35 12.3L11.63 13.56L9.54 15.65M17 15.65L13.65 19L12.38 17.74L14.47 15.65L12.38 13.56L13.65 12.3L17 15.65Z"></path></svg></a><span class="label">component</span><button id="pgTabsReadme" title="Expand Documentation"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z"></path></svg></button><span class="line"></span></h2><div class="markdown" id="pgTabsContainer"></div><script>markdown("pgTabs", "\r\n\r\nThe `pg-tabs` component allows a standard way to render tabs.\r\n\r\n```typescript\r\nimport '@pictogrammers/components/pg/tabs';\r\nimport PgTabs from '@pictogrammers/components/pg/tabs';\r\n```\r\n\r\n```html\r\n<pg-tabs>\r\n <pg-tab label=\"Tab 1\">\r\n Content 1\r\n </pg-tab>\r\n <pg-tab label=\"Tab 2\">\r\n Content 2\r\n </pg-tab>\r\n</pg-tabs>\r\n```\r\n\r\n\r\n| Events | Description |\r\n| ---------- | ------------- |\r\n| onselect | Set path data |\r\n\r\n\r\n| CSS Variable | Default | Description |\r\n| ------------------- | --------- | ----------- |\r\n| `--pg-icon-color` | `#453C4F` | Color |\r\n| `--pg-icon-width` | `1.5rem` | Width |\r\n| `--pg-icon-height` | `1.5rem` | Height |")</script><section><h3><span>basic</span></h3><x-pg-tabs-basic></x-pg-tabs-basic></section><h2 id="pgToastH2">pg-toast<a title="Link to pg-toast" href="#pg-toast" id="pg-toast"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z"></path></svg></a><a title="View Code" href="https://github.com/Pictogrammers/Components/tree/master/src/pg/toast" target="_blank"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M9.54 15.65L11.63 17.74L10.35 19L7 15.65L10.35 12.3L11.63 13.56L9.54 15.65M17 15.65L13.65 19L12.38 17.74L14.47 15.65L12.38 13.56L13.65 12.3L17 15.65Z"></path></svg></a><span class="label">component</span><button id="pgToastReadme" title="Expand Documentation"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z"></path></svg></button><span class="line"></span></h2><div class="markdown" id="pgToastContainer"></div><script>markdown("pgToast", "\r\n\r\nThe `PgToast` utility will open a toast in the top right of the page.\r\n\r\n```typescript\r\nimport PgToast from '@pictogrammers/components/pgToast';\r\n```\r\n\r\n```typescript\r\nPgToast.open({\r\n type: 'info',\r\n message: 'Loading...',\r\n loading: true\r\n});\r\n\r\n// On Success\r\nthis.handleToast.resolve({\r\n type: 'success',\r\n message: 'Saved',\r\n timeout: 5\r\n});\r\n// On Error\r\nthis.handleToast.reject({\r\n type: 'error',\r\n message: 'Saved',\r\n timeout: 5\r\n});\r\n// Close open toast with no config\r\ndisconnectedCallback() {\r\n this.handleToast?.resolve();\r\n}\r\n```\r\n\r\n| Prop | default | Description |\r\n| ---- | ------- | ----------- |\r\n| `type` | `info` | `info`, `warning`, `success`, `error` |\r\n| `message` | `''` | Message string. |\r\n| `timeout` | `undefined` | Timeout in seconds |\r\n\r\nToasts can be updated in place without adding to the queue by using the `handleToast` config.\r\n\r\nToasts with a `timeout` will automatically hide and any future `handleToast` executions will add to the queue as a new toast.")</script><section><h3><span>basic</span></h3><x-pg-toast-basic></x-pg-toast-basic></section><h2 id="pgToastsH2">pg-toasts<a title="Link to pg-toasts" href="#pg-toasts" id="pg-toasts"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z"></path></svg></a><a title="View Code" href="https://github.com/Pictogrammers/Components/tree/master/src/pg/toasts" target="_blank"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M9.54 15.65L11.63 17.74L10.35 19L7 15.65L10.35 12.3L11.63 13.56L9.54 15.65M17 15.65L13.65 19L12.38 17.74L14.47 15.65L12.38 13.56L13.65 12.3L17 15.65Z"></path></svg></a><span class="label">component</span><button id="pgToastsReadme" title="Expand Documentation"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z"></path></svg></button><span class="line"></span></h2><div class="markdown" id="pgToastsContainer"></div><script>markdown("pgToasts", "\r\n\r\nThe `pg-toasts` will create instances of `pg-toast`.\r\n\r\n```typescript\r\nimport '@pictogrammers/components/pgToast.js';\r\n```\r\n\r\n```html\r\n<pg-toasts></pg-toasts>\r\n```\r\n\r\n## Open Toast\r\n\r\nAll of these functions will return the unique key used to track them. Note by default toasts disappear after `3` seconds. Setting `0` seconds will keep the toast opened indefinitely.\r\n\r\n```js\r\nimport { addToast, addInfoToast } from '@pictogrammers/web-component';\r\n// Info\r\naddInfoToast(message, seconds = 3);\r\naddInfoToast('Hello World!');\r\n// Generic\r\nconst key = addToast({\r\n message: 'Hello World!',\r\n seconds: 10,\r\n loading: true\r\n});\r\n// removeToast(key)\r\n```\r\n\r\n## Close or Remove Toast\r\n\r\nToasts that define an `key` can also be removed.\r\n\r\n```js\r\nremoveToast(key);\r\n```")</script><section><h3><span>basic</span></h3><x-pg-toasts-basic></x-pg-toasts-basic></section><h2 id="pgTooltipH2">pg-tooltip<a title="Link to pg-tooltip" href="#pg-tooltip" id="pg-tooltip"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z"></path></svg></a><a title="View Code" href="https://github.com/Pictogrammers/Components/tree/master/src/pg/tooltip" target="_blank"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M9.54 15.65L11.63 17.74L10.35 19L7 15.65L10.35 12.3L11.63 13.56L9.54 15.65M17 15.65L13.65 19L12.38 17.74L14.47 15.65L12.38 13.56L13.65 12.3L17 15.65Z"></path></svg></a><span class="label">component</span><button id="pgTooltipReadme" title="Expand Documentation"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z"></path></svg></button><span class="line"></span></h2><div class="markdown" id="pgTooltipContainer"></div><script>markdown("pgTooltip", "\r\n\r\nThe `pg-tooltip` component should be placed on the top level. It then is wired to a shared event.\r\n\r\n```typescript\r\nimport '@pictogrammers/components/pg/tooltip';\r\nimport PgTooltip from '@pictogrammers/components/pg/tooltip';\r\nimport { addTooltip } from '@pictogrammers/components/pg/addTooltip';\r\n```\r\n\r\n```html\r\n<pg-icon path=\"...\"></pg-icon>\r\n```\r\n\r\n| Attributes | Tested | Description |\r\n| ---------- | -------- | ----------- |\r\n| path | &#x2705; | Set path data |\r\n\r\n\r\n## Usage\r\n\r\nWire up the tooltip listener.\r\n\r\n```javascript\r\n@Part() $tooltip: PgTooltip;\r\n\r\nconnectedCallback() {\r\n this.addEventListener('tooltip', this.handleTooltip.bind(this));\r\n}\r\n\r\nhandleTooltip(e) {\r\n const { visible, rect, text, position } = e.detail;\r\n this.$tooltip.visible = visible;\r\n this.$tooltip.rect = rect;\r\n this.$tooltip.text = text;\r\n this.$tooltip.position = position;\r\n e.stopPropagation();\r\n}\r\n```\r\n\r\nTriggering a tooltip on a part.\r\n\r\n```javascript\r\nimport { addTooltip } from '@pictogrammers/components/pg/tooltip/addTooltip';\r\n\r\nconnectedCallback() {\r\n addTooltip(this.$partName, () => {\r\n return `Sponsor ${this.user.name} on GitHub`;\r\n });\r\n}\r\n```")</script><section><h3><span>basic</span></h3><x-pg-tooltip-basic></x-pg-tooltip-basic></section><h2 id="pgTreeH2">pg-tree<a title="Link to pg-tree" href="#pg-tree" id="pg-tree"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z"></path></svg></a><a title="View Code" href="https://github.com/Pictogrammers/Components/tree/master/src/pg/tree" target="_blank"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M9.54 15.65L11.63 17.74L10.35 19L7 15.65L10.35 12.3L11.63 13.56L9.54 15.65M17 15.65L13.65 19L12.38 17.74L14.47 15.65L12.38 13.56L13.65 12.3L17 15.65Z"></path></svg></a><span class="label">component</span><button id="pgTreeReadme" title="Expand Documentation"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z"></path></svg></button><span class="line"></span></h2><div class="markdown" id="pgTreeContainer"></div><script>markdown("pgTree", "\r\n\r\nThe `pg-tree` is used to render a tree list of items.\r\n\r\n- Folder / Item symbols\r\n- Drag and Drop\r\n- Context Menu\r\n\r\n## Usage\r\n\r\nWhile setup for a normal file tree this can be used for any folder structure.\r\n\r\n```typescript\r\nimport '@pictogrammers/components/pg/tree';\r\nimport '@pictogrammers/components/pg/treeItem';\r\nimport '@pictogrammers/components/pg/treeButtonIcon';\r\nimport PgTree, { SelectedTreeItem } from '@pictogrammers/components/pg/tree';\r\n```\r\n\r\n## Events\r\n\r\n- select\r\n- rename\r\n- menu\r\n- action\r\n- drop\r\n\r\n```typescript\r\nthis.$tree.addEventListener('select', (e: any) => {\r\n const { items } = e.detail;\r\n // items is a\r\n this.selectedItems = items;\r\n});\r\n```\r\n\r\n```typescript\r\nthis.$tree.addEventListener('rename', (e: any) => {\r\n const { item, label } = e.detail;\r\n const itemData = item.getData();\r\n itemData.label = label;\r\n});\r\n```\r\n\r\n```typescript\r\nthis.$tree.addEventListener('menu', (e: any) => {\r\n // menu item click\r\n});\r\n```\r\n\r\n```typescript\r\nthis.$tree.addEventListener('action', (e: any) => {\r\n const { item, actionIndex } = e.detail;\r\n // item is a wrapper with all utility functions\r\n switch(actionIndex) {\r\n case 0:\r\n // select in view\r\n break;\r\n case 1:\r\n item.remove();\r\n break;\r\n }\r\n});\r\n```\r\n\r\n```typescript\r\nthis.$tree.addEventListener('drop', (e: any) => {\r\n // cancelable\r\n const { items, dropIndexes } = e.detail;\r\n // If folder ignore items under folder\r\n\r\n items.forEach(() => {\r\n item.move(dropIndexes);\r\n })\r\n});\r\n```\r\n\r\n## Custom Size\r\n\r\nResize from the default 32px height all the way down to 24px tall via a CSS Variable.\r\n\r\n```css\r\n--pg-icon-width: 1rem;\r\n--pg-icon-height: 1rem;\r\n```\r\n")</script><section><h3><span>basic</span></h3><x-pg-tree-basic></x-pg-tree-basic></section><h2 id="pgTreeButtonIconH2">pg-tree-button-icon<a title="Link to pg-tree-button-icon" href="#pg-tree-button-icon" id="pg-tree-button-icon"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z"></path></svg></a><a title="View Code" href="https://github.com/Pictogrammers/Components/tree/master/src/pg/treeButtonIcon" target="_blank"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M9.54 15.65L11.63 17.74L10.35 19L7 15.65L10.35 12.3L11.63 13.56L9.54 15.65M17 15.65L13.65 19L12.38 17.74L14.47 15.65L12.38 13.56L13.65 12.3L17 15.65Z"></path></svg></a><span class="label">component</span><button id="pgTreeButtonIconReadme" title="Expand Documentation"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z"></path></svg></button><span class="line"></span></h2><div class="markdown" id="pgTreeButtonIconContainer"></div><script>markdown("pgTreeButtonIcon", "\r\n\r\nTree button icons are used in the `pg-tree` component for actions. See `pg-tree` for documentation.\r\n\r\n## Usage\r\n\r\n```typescript\r\nthis.$tree.items = [{\r\n icon: {\r\n path: IconFile\r\n },\r\n label,\r\n actions: [{\r\n type: PgTreeButtonIcon,\r\n label: 'Select in View',\r\n icon: IconSelect,\r\n enabled: true\r\n },\r\n {\r\n type: PgTreeButtonIcon,\r\n label: 'Delete',\r\n icon: IconTrash,\r\n enabled: true\r\n }]\r\n}];\r\n\r\nthis.$tree.addEventListener('action', (e: any) => {\r\n const { item, actionIndex } = e.detail;\r\n // item is a wrapper with all utility functions\r\n switch(actionIndex) {\r\n case 0:\r\n // select in view\r\n break;\r\n case 1:\r\n item.remove();\r\n break;\r\n }\r\n});\r\n```")</script><h2 id="pgTreeItemH2">pg-tree-item<a title="Link to pg-tree-item" href="#pg-tree-item" id="pg-tree-item"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z"></path></svg></a><a title="View Code" href="https://github.com/Pictogrammers/Components/tree/master/src/pg/treeItem" target="_blank"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M9.54 15.65L11.63 17.74L10.35 19L7 15.65L10.35 12.3L11.63 13.56L9.54 15.65M17 15.65L13.65 19L12.38 17.74L14.47 15.65L12.38 13.56L13.65 12.3L17 15.65Z"></path></svg></a><span class="label">component</span><button id="pgTreeItemReadme" title="Expand Documentation"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z"></path></svg></button><span class="line"></span></h2><div class="markdown" id="pgTreeItemContainer"></div><script>markdown("pgTreeItem", "\r\n\r\nTree items are used in the `pg-tree` component. See `pg-tree` for documentation.")</script></main></div></body></html>