scu-web-components 0.0.41 → 0.0.43

package/dist/chunks/chunk.ZTRQFSO3.js

@@ -1,2 +0,0 @@
-import{a as i,b as u}from"./chunk.F6VIM5PL.js";import{a as n}from"./chunk.2T4VPIKP.js";var s=class{constructor(e){this.tabbablelist=["menu-item","icon","link","button","BUTTON","A"];this.ignorelist=["scw-menu"];this.menu=e,this.handleKeydown=this.handleKeydown.bind(this),this.initKeyboard(),this.documentClickHandler=this.documentClickHandler.bind(this)}initKeyboard(){this.menu.addEventListener("focusin",e=>{e.target===this.menu&&this.focusOnNextTabbableElement(this.menu),this.menu.setAttribute("tabindex","-1"),n("scw-app-mode-on",this.menu),this.menu.isSubMenu()&&document.addEventListener("click",this.documentClickHandler)}),this.menu.addEventListener("focusout",e=>{e.relatedTarget&&this.menu.contains(e.relatedTarget)||(this.menu.setAttribute("tabindex","0"),n("scw-app-mode-off",this.menu))}),this.menu.addEventListener("keydown",e=>{this.handleKeydown(e)}),this.menu.addEventListener("click",e=>{this.clickHandler(e)})}documentClickHandler(e){let t=e.target;this.menu.contains(t)||this.closeMenu()}closeMenu(e=!1){if(this.menu.isSubMenu()&&(document.removeEventListener("click",this.documentClickHandler),this.menu.ariaHidden="true",this.menu.setAttribute("aria-hidden","true"),e)){let t=this.menu.previousElementSibling;t&&t.element==="menu-item"&&t.focus()}}clickHandler(e){let t=e.target;t&&t.element==="menu-item"&&(t.focus(),this.toggleSubMenu())}toggleSubMenu(){let e=this.findSubmenu();return e?(e.ariaHidden==="false"?(e.ariaHidden="true",e.setAttribute("aria-hidden","true")):(e.ariaHidden="false",e.setAttribute("aria-hidden","false"),setTimeout(()=>{e.focus()},0)),!0):!1}focusOnNextTabbableElement(e){i(this.menu,e,"forwards")}focusOnPreviousTabbableElement(e){i(this.menu,e,"backwards")}stopEvent(e){e.stopPropagation(),e.preventDefault()}handleKeydown(e){if(this.menu.isSubMenu()&&e.key==="Tab")if(e.shiftKey){this.focusOnPreviousTabbableElement(),this.stopEvent(e);return}else{this.focusOnNextTabbableElement(),this.stopEvent(e);return}switch(e.key){case"ArrowRight":this.menu.keyboardDirection==="vertical"?this.toggleSubMenu():this.focusOnNextTabbableElement(),this.stopEvent(e);break;case"ArrowDown":this.menu.keyboardDirection==="horizontal"?this.toggleSubMenu():this.focusOnNextTabbableElement(),this.stopEvent(e);break;case"ArrowLeft":this.menu.keyboardDirection==="vertical"?this.toggleSubMenu()||this.closeMenu(!0):this.focusOnPreviousTabbableElement(),this.stopEvent(e);break;case"ArrowUp":this.menu.keyboardDirection==="horizontal"?this.toggleSubMenu()||this.closeMenu(!0):this.focusOnPreviousTabbableElement(),this.stopEvent(e);break;case"Escape":this.closeMenu(!0),this.stopEvent(e);break;case"Home":this.focusOnNextTabbableElement(this.menu),this.stopEvent(e);break;case"End":this.focusOnPreviousTabbableElement(this.menu),this.stopEvent(e);break}}findSubmenu(){let e=u(this.menu);if(e){let t=e.nextElementSibling;if(t&&t.element==="menu")return t}}};export{s as a};
-//# sourceMappingURL=chunk.ZTRQFSO3.js.map

package/dist/chunks/chunk.ZTRQFSO3.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/scw-menu/keyboard/scw-menu-keyboard.ts"],
-  "sourcesContent": ["import ScwMenu from '../ScwMenu';\n// import ScwMenuItem from '../scw-menu-item/scw-menu-item';\n// import {dispatchCustomEvent} from '../../utils/customEvents';\n// import ScwComponent from '../scw-component/scw-component';\nimport {emit, ScwEvents} from '../../utils/events/event';\nimport\nfocusOnTabbableElement,\n{\n  findActiveMenuElement,\n} from './keyboardElements';\nimport {ScwMenuDirections} from '../scw-menu-enums';\nimport ScwComponent from '../../scw-component/ScwComponent';\nimport {Components} from '../../utils/enums/Components';\n\n/**\n * ScwMenuKeyboard\n * manages all the keyboard events for ScwMenu\n */\nexport default class ScwMenuKeyboard {\n  /** menu to manage */\n  menu : ScwMenu;\n\n  /** list of elements that are tabbable */\n  tabbablelist = [\n    Components.menuItem,\n    Components.icon,\n    Components.link,\n    Components.button,\n    'BUTTON',\n    'A',\n  ];\n\n  /** list of elements that should be ignored */\n  ignorelist = ['scw-menu'];\n\n  /**\n  * constructor\n  * @param {ScwMenu} menu\n  */\n  constructor( menu: ScwMenu) {\n    this.menu = menu;\n    this.handleKeydown = this.handleKeydown.bind(this);\n    this.initKeyboard();\n    this.documentClickHandler = this.documentClickHandler.bind(this);\n    // TODO: capture all menuItems at beginning.\n  }\n\n  /**\n  * initialize keyboard event handling for ScwMenu\n  */\n  initKeyboard() {\n    this.menu.addEventListener('focusin', (evt) => {\n      if (evt.target === this.menu) {\n        this.focusOnNextTabbableElement(this.menu);\n      }\n      // take menu out of tab index so we can tab out smoothly\n      this.menu.setAttribute('tabindex', '-1');\n      emit(\n          ScwEvents.appModeOn,\n          this.menu,\n      );\n      if (this.menu.isSubMenu()) {\n        document.addEventListener('click', this.documentClickHandler );\n      }\n    });\n\n    this.menu.addEventListener('focusout', (evt) => {\n      if ( // don't matter if it is still within menu\n        evt.relatedTarget &&\n        this.menu.contains( evt.relatedTarget as unknown as HTMLElement)\n      ) {\n        return;\n      }\n      this.menu.setAttribute('tabindex', '0');\n\n      emit(\n          ScwEvents.appModeOff,\n          this.menu,\n      );\n    });\n\n    this.menu.addEventListener('keydown', (evt: KeyboardEvent) => {\n      this.handleKeydown(evt);\n    });\n\n    this.menu.addEventListener('click', (evt: MouseEvent) => {\n      this.clickHandler(evt);\n    });\n  }\n\n  /**\n   * close menu if clicked anywhere but menu\n   * @param {MouseEvent} evt\n   */\n  documentClickHandler(evt: MouseEvent) {\n    const target = evt.target as unknown as HTMLElement;\n    if (!this.menu.contains(target)) {\n      this.closeMenu();\n    }\n  }\n\n  /**\n   * closes menu if it is a submenu\n   * @param {boolean} doFocus\n   */\n  closeMenu(doFocus = false) {\n    if (this.menu.isSubMenu()) {\n      document.removeEventListener('click', this.documentClickHandler );\n      this.menu.ariaHidden = 'true';\n      this.menu.setAttribute('aria-hidden', 'true');\n\n      if (doFocus) {\n        const menuItem =\n          this.menu.previousElementSibling as unknown as ScwComponent;\n        if (\n          menuItem && menuItem.element === Components.menuItem\n        ) {\n          menuItem.focus();\n        }\n      }\n    }\n  }\n\n  /**\n   * handle clicks within the menu\n   * @param {MouseEvent} evt\n   */\n  clickHandler(evt : MouseEvent) {\n    const target = evt.target as unknown as ScwComponent;\n    if (target && target.element === Components.menuItem) {\n      target.focus();\n      this.toggleSubMenu();\n    }\n  }\n\n  /**\n   * opens/closes submenu if there is one\n   * @return {boolean}\n   */\n  toggleSubMenu() : boolean {\n    const subMenu = this.findSubmenu();\n    if (subMenu) {\n      if (subMenu.ariaHidden === 'false') {\n        subMenu.ariaHidden = 'true';\n        subMenu.setAttribute('aria-hidden', 'true');\n      } else {\n        subMenu.ariaHidden = 'false';\n        subMenu.setAttribute('aria-hidden', 'false');\n        setTimeout(() => {\n          subMenu.focus();\n        }, 0);\n      }\n      return true;\n    }\n    return false;\n  }\n\n  /**\n  * Focus on the next tabbable element\n  * @param {HTMLElement} ele\n  */\n  focusOnNextTabbableElement(ele?: HTMLElement) {\n    focusOnTabbableElement( this.menu, ele, 'forwards' );\n  }\n\n  /**\n  * Focus on the previous tabbable element\n  * @param {HTMLElement} ele\n  */\n  focusOnPreviousTabbableElement(ele?: HTMLElement) {\n    focusOnTabbableElement( this.menu, ele, 'backwards' );\n  }\n\n  /**\n  * Fully stops event\n  * @param {KeyboardEvent} evt\n  */\n  stopEvent(evt: Event) {\n    evt.stopPropagation();\n    evt.preventDefault();\n  }\n\n  /**\n  * Handle keyboard down events\n  * @param {KeyboardEvent} evt\n  */\n  handleKeydown(evt : KeyboardEvent) {\n    // figure out extents of Tab\n    if (\n      this.menu.isSubMenu() &&\n      evt.key === 'Tab'\n    ) {\n      if (evt.shiftKey) {// backwards....\n        // const prevTabbable = findPrevTabbableEle( this.menu );\n        // if (!prevTabbable) this.closeMenu();\n        this.focusOnPreviousTabbableElement();\n        this.stopEvent(evt);\n        return;\n      } else {\n        // const nextTabbable = findNextTabbableEle( this.menu );\n        // if (!nextTabbable) this.closeMenu();\n        this.focusOnNextTabbableElement();\n        this.stopEvent(evt);\n        return;\n      }\n    }\n\n    // Otherwise look for keys\n    switch (evt.key) {\n      case 'ArrowRight':\n        if (\n          this.menu.keyboardDirection === ScwMenuDirections.vertical\n        ) {\n          this.toggleSubMenu();\n        } else { // horizontal, either\n          this.focusOnNextTabbableElement();\n        }\n        this.stopEvent(evt);\n        break;\n      case 'ArrowDown':\n        if (\n          this.menu.keyboardDirection === ScwMenuDirections.horizontal\n        ) {\n          this.toggleSubMenu();\n        } else { // vertical, either\n          this.focusOnNextTabbableElement();\n        }\n        this.stopEvent(evt);\n        break;\n      case 'ArrowLeft':\n        if (\n          this.menu.keyboardDirection === ScwMenuDirections.vertical\n        ) {\n          if ( !this.toggleSubMenu() ) {\n            this.closeMenu(true);\n          }\n        } else { // horizontal, either\n          this.focusOnPreviousTabbableElement();\n        }\n        this.stopEvent(evt);\n        break;\n      case 'ArrowUp':\n        if (\n          this.menu.keyboardDirection === ScwMenuDirections.horizontal\n        ) {\n          if ( !this.toggleSubMenu() ) {\n            this.closeMenu(true);\n          }\n        } else { // horizontal, either\n          this.focusOnPreviousTabbableElement();\n        }\n        this.stopEvent(evt);\n        break;\n      case 'Escape':\n        this.closeMenu(true);\n        this.stopEvent(evt);\n        break;\n      case 'Home':\n        this.focusOnNextTabbableElement(this.menu);\n        this.stopEvent(evt);\n        break;\n      case 'End':\n        this.focusOnPreviousTabbableElement(this.menu);\n        this.stopEvent(evt);\n        break;\n    }\n  }\n\n  /**\n  * find the submenu of the focused ScwMenuItem\n  * @return {ScwMenu | undefined}\n  */\n  findSubmenu() : ScwMenu | undefined {\n    const focusedElement = findActiveMenuElement(this.menu);\n    if (focusedElement) {\n      const nextSibling =\n      focusedElement.nextElementSibling;\n      if ( nextSibling && nextSibling['element'] === Components.menu ) {\n        return nextSibling as unknown as ScwMenu;\n      }\n    }\n    return undefined;\n  }\n}\n\n\n"],
-  "mappings": "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",
-  "names": ["ScwMenuKeyboard", "menu", "evt", "emit", "target", "doFocus", "menuItem", "subMenu", "ele", "focusOnTabbableElement", "focusedElement", "findActiveMenuElement", "nextSibling"]
-}

package/dist/chunks/chunk.ZXF75OFN.js

@@ -1,2 +0,0 @@
-import{a as e}from"./chunk.25Y56VFF.js";customElements.define("scw-menu-item",e);
-//# sourceMappingURL=chunk.ZXF75OFN.js.map

package/dist/chunks/chunk.ZYN4B53C.js

@@ -1,2 +0,0 @@
-import{a as c}from"./chunk.HXKNXPNI.js";customElements.define("scw-icon",c);
-//# sourceMappingURL=chunk.ZYN4B53C.js.map

package/dist/docs/components/ScwResponsive.json

@@ -1,248 +0,0 @@
-{
-  "path": "src/scw-responsive/scw-responsive.ts",
-  "kind": "class",
-  "description": "",
-  "name": "ScwResponsive",
-  "members": [
-    {
-      "kind": "field",
-      "name": "selector",
-      "type": {
-        "text": "string | undefined"
-      },
-      "description": "(ScwResponsive) the selector (querySelector) of the client of the\nresponsive element",
-      "attribute": "selector"
-    },
-    {
-      "kind": "field",
-      "name": "element",
-      "type": {
-        "text": "string"
-      },
-      "description": "(ScwComponent) contains the root element name for each component\n(enum Components)",
-      "attribute": "element",
-      "reflects": true,
-      "inheritedFrom": {
-        "name": "ScwComponent",
-        "module": "src/scw-component/ScwComponent.ts"
-      }
-    },
-    {
-      "kind": "field",
-      "name": "responsive",
-      "type": {
-        "text": "string"
-      },
-      "default": "true",
-      "description": "(ScwComponent) whether or not to look to attributes for responsive sizing\nviewport | element | none",
-      "attribute": "responsive",
-      "inheritedFrom": {
-        "name": "ScwComponent",
-        "module": "src/scw-component/ScwComponent.ts"
-      }
-    },
-    {
-      "kind": "field",
-      "name": "ariaLabel",
-      "type": {
-        "text": "string"
-      },
-      "default": "''",
-      "description": "(ScwComponent) Main text within component",
-      "attribute": "aria-label",
-      "reflects": true,
-      "inheritedFrom": {
-        "name": "ScwComponent",
-        "module": "src/scw-component/ScwComponent.ts"
-      }
-    },
-    {
-      "kind": "field",
-      "name": "ariaDisabled",
-      "type": {
-        "text": "string"
-      },
-      "default": "'false'",
-      "description": "(ScwComponent) Disables the component however it disables",
-      "attribute": "aria-disabled",
-      "inheritedFrom": {
-        "name": "ScwComponent",
-        "module": "src/scw-component/ScwComponent.ts"
-      }
-    },
-    {
-      "kind": "field",
-      "name": "responsiveElement",
-      "type": {
-        "text": "ResponsiveElement | undefined"
-      },
-      "description": "responsive element",
-      "inheritedFrom": {
-        "name": "ScwComponent",
-        "module": "src/scw-component/ScwComponent.ts"
-      }
-    },
-    {
-      "kind": "field",
-      "name": "_lightDomMutationObserver",
-      "type": {
-        "text": "LightDomMutationObserver | undefined"
-      },
-      "description": "(ScwComponent) Light Dom Mutation Observer",
-      "inheritedFrom": {
-        "name": "ScwComponent",
-        "module": "src/scw-component/ScwComponent.ts"
-      }
-    },
-    {
-      "kind": "field",
-      "name": "dynamic",
-      "type": {
-        "text": "boolean"
-      },
-      "default": "false",
-      "description": "(ScwComponent) Determines whether to watch for changes\nin children. (not all components use light DOM for inputs)",
-      "attribute": "dynamic",
-      "inheritedFrom": {
-        "name": "ScwComponent",
-        "module": "src/scw-component/ScwComponent.ts"
-      }
-    },
-    {
-      "kind": "method",
-      "name": "parseAndValidateLightDom",
-      "description": "parseLightDom is a hook for classes extending this one to add\nother parsers and validations",
-      "inheritedFrom": {
-        "name": "ScwComponent",
-        "module": "src/scw-component/ScwComponent.ts"
-      }
-    },
-    {
-      "kind": "method",
-      "name": "warn",
-      "parameters": [
-        {
-          "name": "message",
-          "type": {
-            "text": "string"
-          },
-          "description": "describing warning"
-        }
-      ],
-      "description": "handles warnings...things wrong with formatting, ADA, etc...",
-      "inheritedFrom": {
-        "name": "ScwComponent",
-        "module": "src/scw-component/ScwComponent.ts"
-      }
-    },
-    {
-      "kind": "field",
-      "name": "_lastWarning",
-      "type": {
-        "text": "string | undefined"
-      },
-      "description": "retain the last warning sent...good for testing.",
-      "inheritedFrom": {
-        "name": "ScwComponent",
-        "module": "src/scw-component/ScwComponent.ts"
-      }
-    }
-  ],
-  "attributes": [
-    {
-      "name": "selector",
-      "type": {
-        "text": "string | undefined"
-      },
-      "description": "(ScwResponsive) the selector (querySelector) of the client of the\nresponsive element",
-      "fieldName": "selector"
-    },
-    {
-      "name": "aria-label",
-      "type": {
-        "text": "string"
-      },
-      "default": "''",
-      "description": "(ScwComponent) Main text within component",
-      "fieldName": "ariaLabel",
-      "inheritedFrom": {
-        "name": "ScwComponent",
-        "module": "src/scw-component/ScwComponent.ts"
-      }
-    },
-    {
-      "name": "aria-disabled",
-      "type": {
-        "text": "string"
-      },
-      "default": "'false'",
-      "description": "(ScwComponent) Disables the component however it disables",
-      "fieldName": "ariaDisabled",
-      "inheritedFrom": {
-        "name": "ScwComponent",
-        "module": "src/scw-component/ScwComponent.ts"
-      }
-    },
-    {
-      "name": "responsive",
-      "type": {
-        "text": "string"
-      },
-      "default": "false",
-      "description": "(ScwComponent) whether or not to look to attributes for responsive sizing\nviewport | element | none",
-      "fieldName": "responsive",
-      "inheritedFrom": {
-        "name": "ScwComponent",
-        "module": "src/scw-component/ScwComponent.ts"
-      }
-    },
-    {
-      "name": "dynamic",
-      "type": {
-        "text": "boolean"
-      },
-      "default": "false",
-      "description": "(ScwComponent) Determines whether to watch for changes\nin children. (not all components use light DOM for inputs)",
-      "fieldName": "dynamic",
-      "inheritedFrom": {
-        "name": "ScwComponent",
-        "module": "src/scw-component/ScwComponent.ts"
-      }
-    },
-    {
-      "name": "element",
-      "type": {
-        "text": "string"
-      },
-      "description": "(ScwComponent) contains the root element name for each component\n(enum Components)",
-      "fieldName": "element",
-      "inheritedFrom": {
-        "name": "ScwComponent",
-        "module": "src/scw-component/ScwComponent.ts"
-      }
-    }
-  ],
-  "superclass": {
-    "name": "ScwComponent",
-    "module": "/src/scw-component/ScwComponent"
-  },
-  "tagName": "scw-responsive",
-  "customElement": true,
-  "category": "layouts",
-  "status": "alpha.review",
-  "releasedInVersion": "v0.0.5",
-  "adaStatus": "",
-  "overview": "",
-  "examples": [
-    {
-      "title": "Simple",
-      "description": "You can organize responsive commands into one place with\n      'scw-responsive. It takes a selector (querySelector) and operates on \n      the result. The queries are scoped from the parent of the \n      'scw-responsive'.",
-      "code": "\n        <scw-responsive\n          selector=\"#example\"\n          class=\"scw-color-primary\"\n          class-bp-07=\"scw-color-accent-mortgage-06\"\n          class-bp-05=\"scw-color-accent-mortgage-04\">\n        </scw-responsive>\n        <scw-element\n          id=\"example\"\n          scw-padding-1s\n          scw-border-grey>\n          Hello, World\n        </scw-element>"
-    },
-    {
-      "title": "Responsive Attributes",
-      "description": "'scw-responsive' operates on attributes, so any attribute\n      of a component can be hooked up to a breakpoint.",
-      "code": "\n        <scw-flex-h-component\n          scw-gap-2s>\n          <scw-responsive\n            selector=\"#example\"\n            aria-label=\"Hello\"\n            aria-label-bp-07=\"Hello bp-07\"\n            aria-label-bp-05=\"Hello bp-05\">\n          </scw-responsive>\n          <scw-button\n            id=\"example\"\n            aria-label=\"Hello\">\n          </scw-button>\n          <scw-element\n            id=\"example2\"\n            scw-padding-1s\n            scw-border-grey>\n            World\n          </scw-element>\n        </scw-flex-h-component>"
-    }
-  ]
-}

package/dist/docs/js/app.9855d80d.js

@@ -1,2 +0,0 @@
-(function(e){function t(t){for(var c,i,a=t[0],r=t[1],l=t[2],u=0,b=[];u<a.length;u++)i=a[u],Object.prototype.hasOwnProperty.call(o,i)&&o[i]&&b.push(o[i][0]),o[i]=0;for(c in r)Object.prototype.hasOwnProperty.call(r,c)&&(e[c]=r[c]);d&&d(t);while(b.length)b.shift()();return n.push.apply(n,l||[]),s()}function s(){for(var e,t=0;t<n.length;t++){for(var s=n[t],c=!0,i=1;i<s.length;i++){var r=s[i];0!==o[r]&&(c=!1)}c&&(n.splice(t--,1),e=a(a.s=s[0]))}return e}var c={},o={app:0},n=[];function i(e){return a.p+"js/"+({about:"about"}[e]||e)+"."+{about:"690bcd4d","chunk-2d2080c7":"2d81d3f6","chunk-2d222769":"3af7d18c","chunk-2d22c823":"a09e9843","chunk-2d224ae2":"82b21f55","chunk-2d230e16":"ec745b24"}[e]+".js"}function a(t){if(c[t])return c[t].exports;var s=c[t]={i:t,l:!1,exports:{}};return e[t].call(s.exports,s,s.exports,a),s.l=!0,s.exports}a.e=function(e){var t=[],s=o[e];if(0!==s)if(s)t.push(s[2]);else{var c=new Promise((function(t,c){s=o[e]=[t,c]}));t.push(s[2]=c);var n,r=document.createElement("script");r.charset="utf-8",r.timeout=120,a.nc&&r.setAttribute("nonce",a.nc),r.src=i(e);var l=new Error;n=function(t){r.onerror=r.onload=null,clearTimeout(u);var s=o[e];if(0!==s){if(s){var c=t&&("load"===t.type?"missing":t.type),n=t&&t.target&&t.target.src;l.message="Loading chunk "+e+" failed.\n("+c+": "+n+")",l.name="ChunkLoadError",l.type=c,l.request=n,s[1](l)}o[e]=void 0}};var u=setTimeout((function(){n({type:"timeout",target:r})}),12e4);r.onerror=r.onload=n,document.head.appendChild(r)}return Promise.all(t)},a.m=e,a.c=c,a.d=function(e,t,s){a.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:s})},a.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,t){if(1&t&&(e=a(e)),8&t)return e;if(4&t&&"object"===typeof e&&e&&e.__esModule)return e;var s=Object.create(null);if(a.r(s),Object.defineProperty(s,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var c in e)a.d(s,c,function(t){return e[t]}.bind(null,c));return s},a.n=function(e){var t=e&&e.__esModule?function(){return e["default"]}:function(){return e};return a.d(t,"a",t),t},a.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},a.p="",a.oe=function(e){throw console.error(e),e};var r=window["webpackJsonp"]=window["webpackJsonp"]||[],l=r.push.bind(r);r.push=t,r=r.slice();for(var u=0;u<r.length;u++)t(r[u]);var d=l;n.push([0,"chunk-vendors"]),s()})({0:function(e,t,s){e.exports=s("cd49")},"1b69":function(e,t,s){"use strict";s("ea1c")},4045:function(e,t,s){},"836d":function(e,t,s){"use strict";s("4045")},bc66:function(e,t){function s(e){return Promise.resolve().then((function(){var t=new Error("Cannot find module '"+e+"'");throw t.code="MODULE_NOT_FOUND",t}))}s.keys=function(){return[]},s.resolve=s,e.exports=s,s.id="bc66"},cd49:function(e,t,s){"use strict";s.r(t);var c=s("7a23");const o={slot:"content"},n=Object(c["h"])("loading");function i(e,t,s,i,a,r){const l=Object(c["A"])("scu-nav-h-item-sds"),u=Object(c["A"])("scu-nav-sds"),d=Object(c["A"])("scu-fill-sds"),b=Object(c["A"])("scu-text-sds"),p=Object(c["A"])("scu-flex-h-sds"),h=Object(c["A"])("router-view"),j=Object(c["A"])("scu-app-sds"),O=Object(c["A"])("scu-icon-sds"),m=Object(c["A"])("scu-center-sds"),g=Object(c["A"])("clipboard");return Object(c["s"])(),Object(c["f"])(c["a"],null,[e.loading?Object(c["e"])("",!0):(Object(c["s"])(),Object(c["d"])(j,{key:0,style:{"--header-height":"60px"}},{default:Object(c["F"])(()=>[Object(c["i"])(p,{slot:"header","scu-background-color-primary-05":"","scu-alignment-stretch":"","scu-padding-width-2s":""},{default:Object(c["F"])(()=>[Object(c["i"])(u,{id:"mainNav","scu-theme-dark":"true",class:"scu-flex-h scu-alignment-stretch",value:e.focusedPage,onScuValueChange:t[0]||(t[0]=t=>e.handleNavChange(t))},{default:Object(c["F"])(()=>[Object(c["i"])(l,{class:"mainNav-item","nav-id":"reference",label:"Design System","scu-theme-dark":"true",dark:""}),e.getNavigation("tokens")?(Object(c["s"])(),Object(c["d"])(l,{key:0,class:"mainNav-item","nav-id":"tokens",label:e.getNavigationTitle("tokens"),"scu-theme-dark":"true",dark:""},null,8,["label"])):Object(c["e"])("",!0),e.getNavigation("title")?(Object(c["s"])(),Object(c["d"])(l,{key:1,class:"mainNav-item","nav-id":"css",label:e.getNavigationTitle("title"),"scu-theme-dark":"true",dark:""},null,8,["label"])):Object(c["e"])("",!0),Object(c["i"])(l,{class:"mainNav-item","nav-id":"components",label:"Components","scu-theme-dark":"true",dark:""})]),_:1},8,["value"]),Object(c["i"])(d),Object(c["i"])(p,{"scu-alignment-baseline":"","scu-color-grey-10":"","scu-gap-1s":"",style:{"align-self":"center"}},{default:Object(c["F"])(()=>[Object(c["i"])(b,{"scu-text-02":""},{default:Object(c["F"])(()=>[Object(c["h"])(Object(c["C"])(e.config.version),1)]),_:1}),Object(c["i"])(b,{"scu-text-06":""},{default:Object(c["F"])(()=>[Object(c["h"])(Object(c["C"])(e.config.title),1)]),_:1})]),_:1})]),_:1}),Object(c["g"])("div",o,[Object(c["i"])(h)])]),_:1})),e.loading?(Object(c["s"])(),Object(c["d"])(m,{key:1,"scu-fill-container":"","scu-gap-2s":""},{default:Object(c["F"])(()=>[Object(c["i"])(O,{"scu-icon-loading-spinner-32":"",animation:"spin"}),Object(c["i"])(b,null,{default:Object(c["F"])(()=>[n]),_:1})]),_:1})):Object(c["e"])("",!0),Object(c["i"])(g)],64)}var a=s("ade3"),r=(s("14d9"),s("9ab4")),l=s("ce1f"),u=s("5502");const d=e=>(Object(c["w"])("data-v-3d3cb8b4"),e=e(),Object(c["t"])(),e),b=Object(c["h"])(" clipboard "),p=d(()=>Object(c["g"])("span",{class:"copy-feedback","scu-text-bold-02":""}," (copied) ",-1));function h(e,t,s,o,n,i){const a=Object(c["A"])("scu-text-sds"),r=Object(c["A"])("scu-flex-h-sds"),l=Object(c["A"])("scu-stack-sds");return Object(c["s"])(),Object(c["d"])(l,{class:Object(c["o"])("clipboard "+(e.show?"show copied":"")),"scu-color-grey-10":"","scu-padding-3s":"","scu-padding-right-5s":""},{default:Object(c["F"])(()=>[Object(c["i"])(r,{class:"clipboard-title","scu-text-uppercase-02":"","scu-margin-bottom-1s":""},{default:Object(c["F"])(()=>[Object(c["i"])(a,{"scu-fill":""},{default:Object(c["F"])(()=>[b]),_:1}),p]),_:1}),Object(c["i"])(a,{class:"clipboard-copy-string",style:{"white-space":"pre-wrap"},"scu-text-bold-06":""},{default:Object(c["F"])(()=>[Object(c["h"])(Object(c["C"])(e.clipboardContent),1)]),_:1})]),_:1},8,["class"])}let j=class extends l["b"]{constructor(...e){super(...e),Object(a["a"])(this,"show",!1),Object(a["a"])(this,"timeout",void 0),Object(a["a"])(this,"clipboardContent",void 0),Object(a["a"])(this,"setClipboardContent",void 0)}handleClipboardContentChange(){this.copyText(this.clipboardContent),this.show=!!this.clipboardContent,this.show&&(clearTimeout(this.timeout),this.timeout=setTimeout(()=>{this.show=!1,setTimeout(()=>{this.setClipboardContent(null)},500)},2e3))}copyText(e){const t=document.createElement("textarea");t.value=e,t.setAttribute("readonly",""),t.style.position="absolute",t.style.left="-9999px",document.body.appendChild(t),t.select();try{document.execCommand("copy")}catch(s){console.error(s)}t.remove()}};j=Object(r["a"])([Object(l["a"])({computed:{...Object(u["c"])(["clipboardContent"])},methods:{...Object(u["b"])(["setClipboardContent"])},watch:{clipboardContent(){this.handleClipboardContentChange()}}})],j);var O=j,m=(s("1b69"),s("6b0d")),g=s.n(m);const f=g()(O,[["render",h],["__scopeId","data-v-3d3cb8b4"]]);var v=f;function y(e,t){const s=k(e,t);return s?s.title:""}function k(e,t){if(!e||!e.navigation)return;const s=e.navigation.find(e=>e.id===t);return s}let C=class extends l["b"]{constructor(...e){super(...e),Object(a["a"])(this,"loading",!0),Object(a["a"])(this,"components",void 0),Object(a["a"])(this,"config",void 0),Object(a["a"])(this,"focusedPage","reference"),Object(a["a"])(this,"setComponents",void 0),Object(a["a"])(this,"setConfig",void 0)}mounted(){document.addEventListener("scu-css-init",()=>{try{Promise.all([fetch("./config.json?"+Math.random()).then(e=>e.json()).then(e=>(this.setConfig(e),e)),fetch("./components/manifest.json?"+Math.random()).then(e=>e.json()).then(e=>(this.setComponents(e),e))]).then(e=>{this.loading=!1;const t=e[0],s=document.createElement("script");s.setAttribute("type","module");var c=document.createTextNode(t.moduleEmbed);if(s.appendChild(c),document.getElementsByTagName("head")[0].appendChild(s),t.cssLink){const e=document.createElement("link");e.setAttribute("rel","stylesheet"),e.setAttribute("href",t.cssLink),document.getElementsByTagName("head")[0].appendChild(e)}})}catch(e){}})}processNav(){const e=this.$route.path.split("/"),t=e[1];this.focusedPage=t}getNavigationTitle(e){return y(this.config,e)}getNavigation(e){return k(this.config,e)}handleNavChange(e){this.$router.push("/"+e.detail)}};C=Object(r["a"])([Object(l["a"])({computed:{...Object(u["c"])(["components","config"])},methods:{...Object(u["b"])(["setComponents","setConfig"])},components:{clipboard:v},watch:{$route(){this.processNav()}}})],C);var x=C;const w=g()(x,[["render",i]]);var D=w,S=s("6605");const A={"hide-header-shadow":"",style:{"--left-panel-width":"260px"}},P={slot:"left-panel","scu-background-color-grey-095":""},$={"scu-padding-2s":"","scu-padding-top-4s":""},E={"scu-text-uppercase-01":"","scu-color-grey-06":"","scu-padding-left-1-6s":""},N=["label","selected","onClick"],F={slot:"content"};function T(e,t,s,o,n,i){const a=Object(c["A"])("router-view");return Object(c["s"])(),Object(c["f"])("scu-app-sds",A,[Object(c["g"])("scu-pane-sds",P,[Object(c["g"])("scu-stack-sds",$,[(Object(c["s"])(!0),Object(c["f"])(c["a"],null,Object(c["z"])(e.categories,e=>(Object(c["s"])(),Object(c["f"])("scu-stack-sds",{key:e.name,"scu-gap-0-3s":"","scu-margin-bottom-2s":""},[Object(c["g"])("scu-text-sds",E,Object(c["C"])(e.name),1),(Object(c["s"])(!0),Object(c["f"])(c["a"],null,Object(c["z"])(e.components,e=>(Object(c["s"])(),Object(c["f"])("scu-link-sds",{key:e.name,label:e.tagName,selected:e.name===(!!this.$route.params&&this.$route.params.id),onClick:t=>this.changeComponent(e)},null,8,N))),128))]))),128))])]),Object(c["g"])("div",F,[Object(c["i"])(a)])])}let M=class extends l["b"]{constructor(...e){super(...e),Object(a["a"])(this,"components",void 0),Object(a["a"])(this,"categories",void 0),Object(a["a"])(this,"focusedComponent",void 0),Object(a["a"])(this,"setFocusedComponent",void 0)}mounted(){this.$route.params.id||this.$router.replace("/components/"+this.focusedComponent.name)}changeComponent(e){this.setFocusedComponent(e),this.$router.push("/components/"+e.name)}};M=Object(r["a"])([Object(l["a"])({components:{},computed:{...Object(u["c"])(["components","categories","focusedComponent"])},methods:{...Object(u["b"])(["setComponents","setFocusedComponent"])}})],M);var _=M;const I=g()(_,[["render",T]]);var H=I;const R=["src"];function L(e,t,s,o,n,i){return Object(c["s"])(),Object(c["f"])("iframe",{src:e.config.navigation.find(e=>"css"===e.id).url,style:{width:"100%",height:"calc( 100vh - 60px )",border:"0"}},"\n  ",8,R)}let z=class extends l["b"]{constructor(...e){super(...e),Object(a["a"])(this,"config",void 0)}};z=Object(r["a"])([Object(l["a"])({computed:{...Object(u["c"])(["config"])}})],z);var B=z;const K=g()(B,[["render",L]]);var V=K;const J=["src"];function U(e,t,s,o,n,i){return Object(c["s"])(),Object(c["f"])("iframe",{src:e.config.navigation.find(e=>"tokens"===e.id).url,style:{width:"100%",height:"calc( 100vh - 60px )",border:"0"}},"\n  ",8,J)}let q=class extends l["b"]{constructor(...e){super(...e),Object(a["a"])(this,"config",void 0)}};q=Object(r["a"])([Object(l["a"])({computed:{...Object(u["c"])(["config"])}})],q);var G=q;const Q=g()(G,[["render",U]]);var W=Q;const X={key:0,"scu-alignment-stretch":"","scu-fill-container":""},Y={"scu-fill":""},Z={"scu-padding-top-8s":"","scu-padding-bottom-4s":"","scu-gap-3s":"",style:{margin:"0 auto"}},ee=Object(c["g"])("scu-responsive-sds",{scope:"window","scu-width-colvw-7-1250-down":"","scu-width-colvw-6-1251-up":""},null,-1),te={"scu-gap-0-6s":""},se={"scu-margin-bottom-1-6s":"","scu-padding-bottom-1s":"","scu-border-bottom-grey-09":"","scu-alignment-baseline":""},ce={"scu-text-bold-10":"","scu-fill":""},oe={"scu-text-04":"","scu-color-grey-04":""},ne={"scu-text-04":"","scu-margin-bottom-1-6s":""},ie={"scu-gap-3s":""},ae=Object(c["g"])("scu-text-sds",{"scu-text-semibold-06":"","scu-margin-bottom-2s":""}," Examples ",-1),re=["id"],le=["onClick"],ue=Object(c["g"])("scu-icon-sds",{"scu-icon-location-24":""},null,-1),de=[ue],be={"scu-text-04":""},pe=["code"],he={"scu-width-colvw-2":"","scu-background-color-grey-095":""},je=Object(c["g"])("scu-responsive-sds",{scope:"window","style-1250-down":"display: none;"},null,-1),Oe={"scu-width-colvw-1-9":"","scu-padding-top-4s":"","scu-padding-bottom-4s":""},me=Object(c["g"])("scu-text-sds",{"scu-text-uppercase-01":"","scu-color-grey-06":"","scu-padding-left-1-6s":""}," Examples: ",-1),ge=["onClick"],fe={key:1,"scu-fill-container":"","scu-gap-2s":""},ve=Object(c["g"])("scu-icon-sds",{"scu-icon-loading-spinner-32":"",animation:"spin"},null,-1),ye=Object(c["g"])("scu-text-sds",null,"loading",-1),ke=[ve,ye],Ce={"scu-gap-0-6s":""},xe={"scu-fill":"","scu-text-semibold-05":""},we={"scu-text-04":""},De=["code"];function Se(e,t,s,o,n,i){const a=Object(c["A"])("comp-code-vis");return Object(c["s"])(),Object(c["f"])(c["a"],null,[e.loading?Object(c["e"])("",!0):(Object(c["s"])(),Object(c["f"])("scu-flex-h-sds",X,[Object(c["g"])("scu-pane-sds",Y,[Object(c["g"])("scu-stack-sds",Z,[ee,Object(c["g"])("scu-stack-sds",te,[Object(c["g"])("scu-flex-h-sds",se,[Object(c["g"])("scu-text-sds",ce," <"+Object(c["C"])(e.componentInfo.tagName)+" /> ",1),Object(c["g"])("scu-text-sds",oe," Extends: "+Object(c["C"])(e.componentInfo.superclass.name),1)]),Object(c["g"])("scu-text-sds",null,Object(c["C"])(e.componentInfo.description),1),Object(c["g"])("scu-text-sds",ne,Object(c["C"])(e.componentInfo.overview),1),Object(c["i"])(a,{comp:e.componentInfo},null,8,["comp"])]),Object(c["g"])("scu-stack-sds",ie,[ae,(Object(c["s"])(!0),Object(c["f"])(c["a"],null,Object(c["z"])(e.componentInfo.examples,(t,s)=>(Object(c["s"])(),Object(c["f"])("scu-stack-sds",{key:"example_"+s,"scu-gap-0-6s":""},[Object(c["g"])("scu-flex-h-sds",null,[Object(c["g"])("scu-text-sds",{"scu-fill":"","scu-text-semibold-05":"",id:t.title},Object(c["C"])(t.title),9,re),Object(c["g"])("scu-action-sds",{"aria-label":"view/pin icon",label:"view/pin icon",onClick:t=>e.pinExample(s)},de,8,le)]),Object(c["g"])("scu-text-sds",be,Object(c["C"])(t.description),1),Object(c["g"])("scu-code-sds",{code:t.code.replace("<","<").replace(">",">")},null,8,pe)]))),128))])])]),Object(c["g"])("scu-pane-sds",he,[je,Object(c["g"])("scu-stack-sds",Oe,[me,(Object(c["s"])(!0),Object(c["f"])(c["a"],null,Object(c["z"])(e.componentInfo.examples,(t,s)=>(Object(c["s"])(),Object(c["f"])("scu-stack-sds",{key:"index_"+s,"scu-gap-0-6s":""},[Object(c["g"])("scu-link-sds",{onClick:s=>e.scrollToExample(t.title),"scu-text-04":""},Object(c["C"])(t.title),9,ge)]))),128))])])])),e.loading?(Object(c["s"])(),Object(c["f"])("scu-center-sds",fe,ke)):Object(c["e"])("",!0),e.exampleDetail?(Object(c["s"])(),Object(c["f"])("scu-modal-sds",{key:2,type:"medium",show:"",style:{"--modal-container-width":"70vw"},onScuClose:t[0]||(t[0]=t=>e.clearExampleDetail())},[Object(c["g"])("scu-stack-sds",Ce,[Object(c["g"])("scu-flex-h-sds",null,[Object(c["g"])("scu-text-sds",xe,Object(c["C"])(e.exampleDetail.title),1)]),Object(c["g"])("scu-text-sds",we,Object(c["C"])(e.exampleDetail.description),1),Object(c["g"])("scu-code-sds",{code:e.exampleDetail.code.replace("<","<").replace(">",">")},null,8,De)])],32)):Object(c["e"])("",!0)],64)}const Ae=e=>(Object(c["w"])("data-v-442ddd00"),e=e(),Object(c["t"])(),e),Pe={class:"comp-code-vis","scu-padding-3s":"","scu-background-color-grey-02":"","scu-color-grey-10":"","scu-gap-0-6s":""},$e={key:0,class:"entireTagHighlight"},Ee={key:1,"scu-gap-0s":""},Ne={class:"stylesSection","scu-padding-left-3s":""},Fe={key:0,class:"stylesHighlight"},Te={"scu-padding-left-3s":""},Me=["onClick","onMouseover","onFocus"],_e=Ae(()=>Object(c["g"])("span",{"scu-color-accent-mortgage-08":""}," ...",-1)),Ie=Object(c["h"])(";"),He={key:0,"scu-color-grey-10":""},Re={key:1,"scu-text-semibold-07":""},Le={key:2,"scu-gap-0s":""},ze={"scu-padding-left-3s":""},Be=["onClick","onMouseover","onFocus"],Ke={class:"inheritedName"},Ve={class:"type"},Je={"scu-text-04":"","scu-color-accent-mortgage-08":""},Ue=Object(c["h"])('"'),qe={key:0,"scu-text-semibold-07":""},Ge={key:3,"scu-gap-0-6s":""},Qe={"scu-padding-left-3s":""},We=["onClick","onMouseover","onFocus"],Xe=Ae(()=>Object(c["g"])("span",{class:"type"}," (event) ",-1)),Ye=Ae(()=>Object(c["g"])("span",{"scu-text-04":"","scu-color-accent-mortgage-08":""}," (evt) => void",-1)),Ze=Object(c["h"])('"'),et={key:0,"scu-text-semibold-07":""},tt={key:4,"scu-gap-0-6s":""},st={"scu-padding-left-3s":""},ct=["onClick","onMouseover","onFocus"],ot={"scu-gap-0-4s":""},nt={"scu-text-semibold-08":""},it={"scu-text-uppercase-03":""},at={key:0,"scu-text-04":""};function rt(e,t,s,o,n,i){return Object(c["s"])(),Object(c["f"])("scu-stack-sds",Pe,[this.entireTagHighlighted?(Object(c["s"])(),Object(c["f"])("div",$e)):Object(c["e"])("",!0),Object(c["g"])("scu-text-sds",{class:"copyLink","scu-text-semibold-07":"",onClick:t[0]||(t[0]=e=>this.copyAll()),onKeypress:t[1]||(t[1]=(...t)=>e.keypress&&e.keypress(...t)),tabindex:"0",role:"button",onMouseover:t[2]||(t[2]=e=>this.highlightEntireTag(!0)),onMouseout:t[3]||(t[3]=e=>this.highlightEntireTag(!1))}," <"+Object(c["C"])(e.comp.tagName),33),e.comp.cssProperties&&this.showStyles?(Object(c["s"])(),Object(c["f"])("scu-stack-sds",Ee,[Object(c["g"])("scu-stack-sds",Ne,[this.stylesHighlighted?(Object(c["s"])(),Object(c["f"])("div",Fe)):Object(c["e"])("",!0),Object(c["g"])("scu-text-sds",{class:"copyLink",onClick:t[4]||(t[4]=e=>this.copyAllStyles()),onKeypress:t[5]||(t[5]=(...t)=>e.keypress&&e.keypress(...t)),tabindex:"0",role:"button",onMouseover:t[6]||(t[6]=e=>this.highlightStyles(!0)),onMouseout:t[7]||(t[7]=e=>this.highlightStyles(!1))},' style=" ',32),Object(c["g"])("scu-stack-sds",Te,[(Object(c["s"])(!0),Object(c["f"])(c["a"],null,Object(c["z"])(e.comp.cssProperties,(s,o)=>(Object(c["s"])(),Object(c["f"])("scu-text-sds",{key:""+s.name,class:"copyLink","scu-text-05":"","scu-color-accent-credit-cards-08":"",onClick:e=>this.copyStyle(s),onKeypress:t[8]||(t[8]=(...t)=>e.keypress&&e.keypress(...t)),onMouseover:e=>this.setDescription("CSS Variable",s.name,"","","",s.description),onMouseout:t[9]||(t[9]=(...t)=>e.removeDescription&&e.removeDescription(...t)),onFocus:e=>this.setDescription("CSS Variable",s.name,"","","",s.description),onBlur:t[10]||(t[10]=(...t)=>e.removeDescription&&e.removeDescription(...t)),tabindex:"0",role:"button"},[Object(c["h"])(Object(c["C"])(s.name)+": ",1),_e,Ie,o===e.comp.cssProperties.length-1?(Object(c["s"])(),Object(c["f"])("span",He,'"')):Object(c["e"])("",!0),!e.comp.cssProperties||o!==e.comp.cssProperties.length-1||e.comp.attributes||e.comp.events?Object(c["e"])("",!0):(Object(c["s"])(),Object(c["f"])("span",Re,">"))],40,Me))),128))])])])):Object(c["e"])("",!0),e.comp.attributes&&this.showAttrs?(Object(c["s"])(),Object(c["f"])("scu-stack-sds",Le,[Object(c["g"])("scu-stack-sds",ze,[(Object(c["s"])(!0),Object(c["f"])(c["a"],null,Object(c["z"])(e.comp.attributes,(s,o)=>(Object(c["s"])(),Object(c["f"])("scu-text-sds",{key:""+s.name,class:Object(c["o"])({copyLink:!0,inherited:s.inheritedFrom}),"scu-text-06":"",onClick:e=>this.copyAttr(s),onKeypress:t[11]||(t[11]=(...t)=>e.keypress&&e.keypress(...t)),onMouseover:e=>this.setDescription("Attribute",s.name,s.type?s.type.text:"",s.default,"",s.description),onMouseout:t[12]||(t[12]=(...t)=>e.removeDescription&&e.removeDescription(...t)),onFocus:e=>this.setDescription("Attribute",s.name,s.type?s.type.text:"",s.default,"",s.description),onBlur:t[13]||(t[13]=(...t)=>e.removeDescription&&e.removeDescription(...t)),tabindex:"0",role:"button"},[Object(c["h"])(Object(c["C"])(s.name)+'="',1),Object(c["g"])("span",Ke,Object(c["C"])(s.inheritedFrom?"["+s.inheritedFrom.name+"]":""),1),Object(c["g"])("span",Ve," ("+Object(c["C"])(s.type?s.type.text:"")+") ",1),Object(c["g"])("span",Je,"  "+Object(c["C"])(s.default),1),Ue,e.comp.attributes&&o===e.comp.attributes.length-1&&!e.comp.events?(Object(c["s"])(),Object(c["f"])("span",qe,">")):Object(c["e"])("",!0)],42,Be))),128))])])):Object(c["e"])("",!0),e.comp.events&&e.showEvents?(Object(c["s"])(),Object(c["f"])("scu-stack-sds",Ge,[Object(c["g"])("scu-stack-sds",Qe,[(Object(c["s"])(!0),Object(c["f"])(c["a"],null,Object(c["z"])(e.comp.events,(s,o)=>(Object(c["s"])(),Object(c["f"])("scu-text-sds",{key:""+s.name,class:"copyLink","scu-text-06":"",onClick:e=>this.copyEvent(s),onKeypress:t[14]||(t[14]=(...t)=>e.keypress&&e.keypress(...t)),onMouseover:e=>this.setDescription("Event",s.name,"event","(evt) => void","",s.description),onMouseout:t[15]||(t[15]=(...t)=>e.removeDescription&&e.removeDescription(...t)),onFocus:e=>this.setDescription("Event",s.name,"event","(evt) => void","",s.description),onBlur:t[16]||(t[16]=(...t)=>e.removeDescription&&e.removeDescription(...t)),tabindex:"0",role:"button"},[Object(c["h"])(" @"+Object(c["C"])(s.name)+'="',1),Xe,Ye,Ze,e.comp.events&&o===e.comp.events.length-1?(Object(c["s"])(),Object(c["f"])("span",et,">")):Object(c["e"])("",!0)],40,We))),128))])])):Object(c["e"])("",!0),e.comp.slots&&e.showSlots?(Object(c["s"])(),Object(c["f"])("scu-stack-sds",tt,[Object(c["g"])("scu-stack-sds",st,[(Object(c["s"])(!0),Object(c["f"])(c["a"],null,Object(c["z"])(e.comp.slots,s=>(Object(c["s"])(),Object(c["f"])("scu-text-sds",{key:""+s.name,class:"copyLink slot","scu-text-06":"","scu-color-primary-08":"",onClick:e=>this.copySlot(s),onKeypress:t[17]||(t[17]=(...t)=>e.keypress&&e.keypress(...t)),onMouseover:e=>this.setDescription("Slot",s.name,!1,!1,this.processSlotDefault(s),s.description),onMouseout:t[18]||(t[18]=(...t)=>e.removeDescription&&e.removeDescription(...t)),onFocus:e=>this.setDescription("Slot",s.name,!1,!1,this.processSlotDefault(s),s.description),onBlur:t[19]||(t[19]=(...t)=>e.removeDescription&&e.removeDescription(...t)),tabindex:"0",role:"button"},Object(c["C"])(this.processSlotDefault(s)),41,ct))),128))])])):Object(c["e"])("",!0),Object(c["g"])("scu-text-sds",{class:"copyLink","scu-text-semibold-07":"",onClick:t[20]||(t[20]=e=>this.copyTag()),onKeypress:t[21]||(t[21]=(...t)=>e.keypress&&e.keypress(...t)),tabindex:"0",role:"button"}," </"+Object(c["C"])(e.comp.tagName)+"> ",33),Object(c["g"])("scu-stack-sds",{class:Object(c["o"])({show:this.showDetail,detail:!0}),"scu-gap-1-6s":""},[Object(c["g"])("scu-stack-sds",ot,[Object(c["g"])("scu-text-sds",nt,Object(c["C"])(this.detailName),1),Object(c["g"])("scu-text-sds",it,Object(c["C"])(this.detailHeader),1)]),this.detailDescription?(Object(c["s"])(),Object(c["f"])("scu-text-sds",at,Object(c["C"])(this.detailDescription),1)):Object(c["e"])("",!0)],2)])}let lt=class extends l["b"]{constructor(...e){super(...e),Object(a["a"])(this,"comp",void 0),Object(a["a"])(this,"hasAttributes",!1),Object(a["a"])(this,"clipboardContent",void 0),Object(a["a"])(this,"setClipboardContent",void 0),Object(a["a"])(this,"showStyles",!0),Object(a["a"])(this,"showAttrs",!0),Object(a["a"])(this,"showEvents",!0),Object(a["a"])(this,"showSlots",!0),Object(a["a"])(this,"stylesHighlighted",!1),Object(a["a"])(this,"entireTagHighlighted",!1),Object(a["a"])(this,"showDetail",!1),Object(a["a"])(this,"detailHeader",""),Object(a["a"])(this,"detailName",""),Object(a["a"])(this,"detailExample",""),Object(a["a"])(this,"detailType",""),Object(a["a"])(this,"detailDefault",""),Object(a["a"])(this,"detailDescription","")}mounted(){this.hasAttributes=this.comp.attributes&&this.comp.attributes.length>0}copyAll(){this.setClipboardContent(`<${this.comp.tagName}${this.comp.cssProperties&&this.showStyles?`\n  style="${this.comp.cssProperties.map(e=>`\n    ${e.name}: ;`).join("")}"`:""}${this.comp.attributes&&this.showAttrs?this.comp.attributes.map(e=>`\n  ${e.name}=""`).join(""):""}${this.comp.events&&this.showEvents?this.comp.events.map(e=>`\n  ${e.name}=""`).join(""):""}>${this.comp.slots&&this.showSlots?this.comp.slots.map(e=>"\n  "+this.processSlotDefault(e)).join(""):""}\n</${this.comp.tagName}>\n`)}copyTag(){this.setClipboardContent(`<${this.comp.tagName}></${this.comp.tagName}>\n`)}keypress(e){"Enter"!==e.key&&"Space"!==e.key||e.target.click()}copyAttr(e){this.setClipboardContent(e.name+'=""')}copySlot(e){this.setClipboardContent(this.processSlotDefault(e))}processSlotDefault(e){return e.default?e.default.replace(/"/g,""):`<div slot='${e.name}'></div>`}setDescription(e,t,s,c,o,n){this.detailHeader=e,this.detailName=t,this.detailType=s,this.detailExample=o,this.detailDefault=c,this.detailDescription=n,this.showDetail=!0}removeDescription(){this.showDetail=!1}copyAllStyles(){this.setClipboardContent(`style="\n\t${this.comp.cssProperties.map(e=>e.name+": ;").join("\n\t")}"`)}copyStyle(e){this.setClipboardContent(e.name+": ;")}copyEvent(e){this.setClipboardContent(""+e.name)}toggleStyles(){this.showStyles=!this.showStyles}toggleAttrs(){this.showAttrs=!this.showAttrs}toggleEvents(){this.showEvents=!this.showEvents}toggleSlots(){this.showSlots=!this.showSlots}highlightStyles(e){this.stylesHighlighted=e}highlightEntireTag(e){this.entireTagHighlighted=e}toggleAll(){this.showStyles=!0,this.showAttrs=!0,this.showEvents=!0,this.showSlots=!0}toggleNone(){this.showStyles=!1,this.showAttrs=!1,this.showEvents=!1,this.showSlots=!1}};lt=Object(r["a"])([Object(l["a"])({props:{comp:Object},computed:{...Object(u["c"])(["clipboardContent"])},methods:{...Object(u["b"])(["setClipboardContent"])}})],lt);var ut=lt;s("836d");const dt=g()(ut,[["render",rt],["__scopeId","data-v-442ddd00"]]);var bt=dt;let pt=class extends l["b"]{constructor(...e){super(...e),Object(a["a"])(this,"config",void 0),Object(a["a"])(this,"$router",void 0),Object(a["a"])(this,"componentInfo",void 0),Object(a["a"])(this,"componentId",void 0),Object(a["a"])(this,"loading",!0),Object(a["a"])(this,"exampleDetail",!1)}mounted(){this.loadAndRenderComp()}async loadAndRenderComp(){if(!this.$route.params.id)return;this.componentId!==this.$route.params.id&&(this.loading=!0,this.componentId=this.$route.params.id,this.componentInfo=await fetch(`./components/${this.$route.params.id}.json?${Math.random()}`).then(e=>e.json()),this.loading=!1);const e=parseInt(this.$route.params.example);this.componentInfo&&this.componentInfo.examples?this.exampleDetail=!!this.componentInfo&&(!!this.componentInfo.examples[e]&&this.componentInfo.examples[e]):this.exampleDetail=!1}pinExample(e){this.$router.push(`/components/${this.$route.params.id}/${e}`)}clearExampleDetail(){this.$router.push("/components/"+this.$route.params.id)}scrollToExample(e){const t=document.getElementById(e);t&&t.scrollIntoView({block:"start",behavior:"smooth"})}};pt=Object(r["a"])([Object(l["a"])({computed:{...Object(u["c"])(["config"])},components:{"comp-code-vis":bt},watch:{$route(){this.loadAndRenderComp()}}})],pt);var ht=pt;const jt=g()(ht,[["render",Se]]);var Ot=jt;const mt={style:{"--left-panel-width":"240px"}},gt={slot:"left-panel","scu-background-color-grey-095":""},ft={"scu-padding-top-2s":""},vt=["label","selected","onClick"],yt={slot:"content"},kt=["innerHTML"];function Ct(e,t,s,o,n,i){return Object(c["s"])(),Object(c["f"])("scu-app-sds",mt,[Object(c["g"])("scu-pane-sds",gt,[Object(c["g"])("scu-stack-sds",ft,[(Object(c["s"])(!0),Object(c["f"])(c["a"],null,Object(c["z"])(e.config.documents,e=>(Object(c["s"])(),Object(c["f"])("scu-link-sds",{key:e.title,label:e.title,selected:e.title===this.$route.params?this.$route.params.page||!1:"",onClick:t=>this.changePage(e)},null,8,vt))),128))])]),Object(c["g"])("scu-pane-sds",yt,[Object(c["g"])("div",{innerHTML:e.referencePageHtml},null,8,kt)])])}let xt=class extends l["b"]{constructor(...e){super(...e),Object(a["a"])(this,"config",void 0),Object(a["a"])(this,"focusedReferencePage",void 0),Object(a["a"])(this,"setFocusedReferencePage",void 0),Object(a["a"])(this,"referencePageHtml","loading")}mounted(){this.$route.params.id||this.$router.replace("/reference/"+this.focusedReferencePage.title)}focusedReferencePageHandler(){this.focusedReferencePage&&fetch(this.focusedReferencePage.url).then(e=>e.text()).then(e=>{this.referencePageHtml=e})}changePage(e){this.setFocusedReferencePage(e),this.$router.push("/reference/"+e.title)}};xt=Object(r["a"])([Object(l["a"])({computed:{...Object(u["c"])(["config","focusedReferencePage"])},methods:{...Object(u["b"])(["setFocusedReferencePage"])},watch:{focusedReferencePage:{handler:"focusedReferencePageHandler",immediate:!0}}})],xt);var wt=xt;const Dt=g()(wt,[["render",Ct]]);var St=Dt;const At=[{path:"/components",name:"Components",component:H},{path:"/components/:id",component:H,children:[{path:"",component:Ot}]},{path:"/components/:id/:example",component:H,children:[{path:"",component:Ot}]},{path:"/:catchAll(.*)",redirect:"/reference"},{path:"/reference",name:"reference",component:St},{path:"/reference/:page",component:St,children:[{path:"",component:St}]},{path:"/css",name:"CSS",component:V},{path:"/tokens",name:"Tokens",component:W},{path:"/about",name:"About",component:()=>s.e("about").then(s.bind(null,"f820"))}],Pt=Object(S["a"])({history:Object(S["b"])(),routes:At});var $t=Pt,Et=Object(u["a"])({state(){return{components:null,categories:null,focusedComponent:null,config:null,clipboardContent:null,focusedReferencePage:null}},mutations:{setComponents(e,t){const s=[],c={};t.map(e=>{if(!c[e.category]){const t={name:e.category,components:[]};s.push(t),c[e.category]=t}const t=c[e.category];t.components.push(e)}),e.categories=s;const o=s.length>0?s[0]:null;o&&(e.focusedComponent=o.components.length>0?o.components[0]:null),e.components=t},setConfig(e,t){e.config=t,t&&t.documents&&t.documents.length>0&&(e.focusedReferencePage=t.documents[0])},setClipboardContent(e,t){e.clipboardContent=t},setFocusedComponent(e,t){e.focusedComponent=t},setFocusedReferencePage(e,t){e.focusedReferencePage=t}},actions:{},modules:{}}),Nt=s("614d"),Ft=s("2863"),Tt=s("7b99"),Mt=s("b93b"),_t=s("cf66"),It=s("f7c1"),Ht=s("695a"),Rt=s("bbe6"),Lt=s("7715"),zt=s("32d4"),Bt=s("34d3"),Kt=s("ab98"),Vt=s("3b43"),Jt=s("d053"),Ut=s("4b82"),qt=s("9392"),Gt=s("2f80"),Qt=s("b9bd"),Wt=s("a2d1"),Xt=s("f1f8"),Yt=s("a3c5"),Zt=s("0d73"),es=s("adbc"),ts=s("1bfc"),ss=s("e48e"),cs=s("4783"),os=s("f0b6"),ns=s("ca85"),is=s("4d39"),as=s("93f3"),rs=s("0414"),ls=s("f673"),us=s("5a8b"),ds=s("e737"),bs=s("c20d"),ps=s("1c8f"),hs=s("b17f"),js=s("450d"),Os=s("5c1b"),ms=s("59fa"),gs=s("34d34"),fs=s("fed2"),vs=s("8038"),ys=s("81e7"),ks=s("cbcc"),Cs=s("42d1"),xs=s("c32e"),ws=s("36a6");const Ds="sds";Object(Nt["a"])(Ds),Object(Ft["a"])(Ds),Object(Tt["a"])(Ds),Object(Mt["a"])(Ds),Object(_t["a"])(Ds),Object(It["a"])(Ds),Object(Ht["a"])(Ds),Object(Rt["a"])(Ds),Object(Lt["a"])(Ds),Object(zt["a"])(Ds),Object(Bt["a"])(Ds),Object(Kt["a"])(Ds),Object(Vt["a"])(Ds),Object(Jt["a"])(Ds),Object(Ut["a"])(Ds),Object(qt["a"])(Ds),Object(Gt["a"])(Ds),Object(Qt["a"])(Ds),Object(Wt["a"])(Ds),Object(Xt["a"])(Ds),Object(Yt["a"])(Ds),Object(Zt["a"])(Ds),Object(es["a"])(Ds),Object(ts["a"])(Ds),Object(ss["a"])(Ds),Object(cs["a"])(Ds),Object(os["a"])(Ds),Object(ns["a"])(Ds),Object(is["a"])(Ds),Object(as["a"])(Ds),Object(rs["a"])(Ds),Object(ls["a"])(Ds),Object(us["a"])(Ds),Object(ds["a"])(Ds),Object(bs["a"])(Ds),Object(ps["a"])(Ds),Object(hs["a"])(Ds),Object(js["a"])(Ds),Object(Os["a"])(Ds),Object(ms["a"])(Ds),Object(gs["a"])(Ds),Object(fs["a"])(Ds),Object(vs["a"])(Ds),Object(ys["a"])(Ds),Object(ks["a"])(Ds),Object(Cs["a"])(Ds),Object(xs["a"])(Ds),Object(ws["a"])(Ds),(async()=>{const e=Object(c["c"])(D);e.use(Et).use($t).mount("#app")})()},ea1c:function(e,t,s){}});
-//# sourceMappingURL=app.9855d80d.js.map