scu-web-components 0.0.21 → 0.0.24

package/dist/docs/components/ScwAlert.json

@@ -85,6 +85,17 @@
         "module": "src/scw-link-base/ScwLinkBase.ts"
       }
     },
+    {
+      "kind": "field",
+      "name": "linkAnchor",
+      "type": {
+        "text": "HTMLAnchorElement | undefined"
+      },
+      "inheritedFrom": {
+        "name": "ScwLinkBase",
+        "module": "src/scw-link-base/ScwLinkBase.ts"
+      }
+    },
     {
       "kind": "method",
       "name": "cancelEvent",
@@ -154,6 +165,20 @@
         "module": "src/scw-link-base/ScwLinkBase.ts"
       }
     },
+    {
+      "kind": "method",
+      "name": "focus",
+      "return": {
+        "type": {
+          "text": "void"
+        }
+      },
+      "description": "focus",
+      "inheritedFrom": {
+        "name": "ScwLinkBase",
+        "module": "src/scw-link-base/ScwLinkBase.ts"
+      }
+    },
     {
       "kind": "field",
       "name": "responsive",

package/dist/docs/components/ScwButton.json

@@ -216,6 +216,17 @@
         "module": "src/scw-link-base/ScwLinkBase.ts"
       }
     },
+    {
+      "kind": "field",
+      "name": "linkAnchor",
+      "type": {
+        "text": "HTMLAnchorElement | undefined"
+      },
+      "inheritedFrom": {
+        "name": "ScwLinkBase",
+        "module": "src/scw-link-base/ScwLinkBase.ts"
+      }
+    },
     {
       "kind": "method",
       "name": "cancelEvent",
@@ -276,6 +287,20 @@
         "module": "src/scw-link-base/ScwLinkBase.ts"
       }
     },
+    {
+      "kind": "method",
+      "name": "focus",
+      "return": {
+        "type": {
+          "text": "void"
+        }
+      },
+      "description": "focus",
+      "inheritedFrom": {
+        "name": "ScwLinkBase",
+        "module": "src/scw-link-base/ScwLinkBase.ts"
+      }
+    },
     {
       "kind": "field",
       "name": "responsive",

package/dist/docs/components/ScwCard.json

@@ -84,6 +84,16 @@
       "description": "(ScwCard) Label on the link",
       "attribute": "linkLabel"
     },
+    {
+      "kind": "field",
+      "name": "preload",
+      "type": {
+        "text": "boolean"
+      },
+      "default": "false",
+      "description": "(ScwCard) whether to preload image or not",
+      "attribute": "preload"
+    },
     {
       "kind": "field",
       "name": "size",
@@ -279,6 +289,17 @@
         "module": "src/scw-link-base/ScwLinkBase.ts"
       }
     },
+    {
+      "kind": "field",
+      "name": "linkAnchor",
+      "type": {
+        "text": "HTMLAnchorElement | undefined"
+      },
+      "inheritedFrom": {
+        "name": "ScwLinkBase",
+        "module": "src/scw-link-base/ScwLinkBase.ts"
+      }
+    },
     {
       "kind": "method",
       "name": "cancelEvent",
@@ -339,6 +360,20 @@
         "module": "src/scw-link-base/ScwLinkBase.ts"
       }
     },
+    {
+      "kind": "method",
+      "name": "focus",
+      "return": {
+        "type": {
+          "text": "void"
+        }
+      },
+      "description": "focus",
+      "inheritedFrom": {
+        "name": "ScwLinkBase",
+        "module": "src/scw-link-base/ScwLinkBase.ts"
+      }
+    },
     {
       "kind": "field",
       "name": "responsive",
@@ -461,6 +496,15 @@
       "description": "(ScwCard) Label on the link",
       "fieldName": "linkLabel"
     },
+    {
+      "name": "preload",
+      "type": {
+        "text": "boolean"
+      },
+      "default": "false",
+      "description": "(ScwCard) whether to preload image or not",
+      "fieldName": "preload"
+    },
     {
       "name": "size",
       "type": {

package/dist/docs/components/ScwHeading.json

@@ -116,6 +116,17 @@
         "module": "src/scw-link-base/ScwLinkBase.ts"
       }
     },
+    {
+      "kind": "field",
+      "name": "linkAnchor",
+      "type": {
+        "text": "HTMLAnchorElement | undefined"
+      },
+      "inheritedFrom": {
+        "name": "ScwLinkBase",
+        "module": "src/scw-link-base/ScwLinkBase.ts"
+      }
+    },
     {
       "kind": "method",
       "name": "cancelEvent",
@@ -176,6 +187,20 @@
         "module": "src/scw-link-base/ScwLinkBase.ts"
       }
     },
+    {
+      "kind": "method",
+      "name": "focus",
+      "return": {
+        "type": {
+          "text": "void"
+        }
+      },
+      "description": "focus",
+      "inheritedFrom": {
+        "name": "ScwLinkBase",
+        "module": "src/scw-link-base/ScwLinkBase.ts"
+      }
+    },
     {
       "kind": "field",
       "name": "responsive",

package/dist/docs/components/ScwIcon.json

@@ -130,6 +130,17 @@
         "module": "src/scw-link-base/ScwLinkBase.ts"
       }
     },
+    {
+      "kind": "field",
+      "name": "linkAnchor",
+      "type": {
+        "text": "HTMLAnchorElement | undefined"
+      },
+      "inheritedFrom": {
+        "name": "ScwLinkBase",
+        "module": "src/scw-link-base/ScwLinkBase.ts"
+      }
+    },
     {
       "kind": "method",
       "name": "cancelEvent",
@@ -190,6 +201,20 @@
         "module": "src/scw-link-base/ScwLinkBase.ts"
       }
     },
+    {
+      "kind": "method",
+      "name": "focus",
+      "return": {
+        "type": {
+          "text": "void"
+        }
+      },
+      "description": "focus",
+      "inheritedFrom": {
+        "name": "ScwLinkBase",
+        "module": "src/scw-link-base/ScwLinkBase.ts"
+      }
+    },
     {
       "kind": "field",
       "name": "responsive",

package/dist/docs/components/ScwImage.json

@@ -61,6 +61,25 @@
       "description": "(ScwImage) src of image",
       "attribute": "src"
     },
+    {
+      "kind": "field",
+      "name": "alt",
+      "type": {
+        "text": "string | undefined"
+      },
+      "description": "(ScwImage) alt of image",
+      "attribute": "alt"
+    },
+    {
+      "kind": "field",
+      "name": "preload",
+      "type": {
+        "text": "boolean"
+      },
+      "default": "false",
+      "description": "(ScwImage) whether to preload image or not",
+      "attribute": "preload"
+    },
     {
       "kind": "field",
       "name": "noLazyLoading",
@@ -173,6 +192,16 @@
       },
       "description": "Css for image"
     },
+    {
+      "kind": "method",
+      "name": "renderPreload",
+      "return": {
+        "type": {
+          "text": "object"
+        }
+      },
+      "description": "render preload link"
+    },
     {
       "kind": "method",
       "name": "renderContent",
@@ -254,6 +283,17 @@
         "module": "src/scw-link-base/ScwLinkBase.ts"
       }
     },
+    {
+      "kind": "field",
+      "name": "linkAnchor",
+      "type": {
+        "text": "HTMLAnchorElement | undefined"
+      },
+      "inheritedFrom": {
+        "name": "ScwLinkBase",
+        "module": "src/scw-link-base/ScwLinkBase.ts"
+      }
+    },
     {
       "kind": "method",
       "name": "cancelEvent",
@@ -314,6 +354,20 @@
         "module": "src/scw-link-base/ScwLinkBase.ts"
       }
     },
+    {
+      "kind": "method",
+      "name": "focus",
+      "return": {
+        "type": {
+          "text": "void"
+        }
+      },
+      "description": "focus",
+      "inheritedFrom": {
+        "name": "ScwLinkBase",
+        "module": "src/scw-link-base/ScwLinkBase.ts"
+      }
+    },
     {
       "kind": "field",
       "name": "responsive",
@@ -438,6 +492,23 @@
       "description": "(ScwImage) src of image",
       "fieldName": "src"
     },
+    {
+      "name": "alt",
+      "type": {
+        "text": "string | undefined"
+      },
+      "description": "(ScwImage) alt of image",
+      "fieldName": "alt"
+    },
+    {
+      "name": "preload",
+      "type": {
+        "text": "boolean"
+      },
+      "default": "false",
+      "description": "(ScwImage) whether to preload image or not",
+      "fieldName": "preload"
+    },
     {
       "name": "no-lazy-loading",
       "type": {
@@ -560,42 +631,42 @@
     {
       "title": "Simple",
       "description": "\n        scw-image acts mosly like an img tag (versus a picture tag) with\n        many added features and ADA requirements.",
-      "code": "\n        <scw-image\n          aria-label=\"scw-image example\"\n          style=\"width: 200px; height: 100px;\"\n          src=\"https://dummyimage.com/200x100\">\n        </scw-image>"
+      "code": "\n        <scw-image\n          alt=\"scw-image example\"\n          style=\"width: 200px; height: 100px;\"\n          src=\"https://dummyimage.com/200x100\">\n        </scw-image>"
     },
     {
       "title": "Sizing",
       "description": "\n        scw-image forces you to establish the size of the image or it will\n         not show up correctly. This minimizes layout shifts.\n         \"aspect-ratio\" has been added to help \n         size images abstractly. The image in the middle is collasped because\n         it only defines the width.",
-      "code": "\n      <scw-flex-h\n        scw-gap-2s>\n        <scw-image\n          aria-label=\"scw-image example\"\n          style=\"width: 200px; height: 100px;\"\n          src=\"https://dummyimage.com/200x100\">\n        </scw-image>\n        <scw-image\n          aria-label=\"scw-image example\"\n          style=\"width: 200px;\"\n          src=\"https://dummyimage.com/200x100\">\n        </scw-image>\n        <scw-image\n          aria-label=\"scw-image example\"\n          style=\"width: 200px;\"\n          aspect-ratio=\"2:1\"\n          src=\"https://dummyimage.com/200x100\">\n        </scw-image>\n      </scw-flex>"
+      "code": "\n      <scw-flex-h\n        scw-gap-2s>\n        <scw-image\n          alt=\"scw-image example\"\n          style=\"width: 200px; height: 100px;\"\n          src=\"https://dummyimage.com/200x100\">\n        </scw-image>\n        <scw-image\n          alt=\"scw-image example\"\n          style=\"width: 200px;\"\n          src=\"https://dummyimage.com/200x100\">\n        </scw-image>\n        <scw-image\n          alt=\"scw-image example\"\n          style=\"width: 200px;\"\n          aspect-ratio=\"2:1\"\n          src=\"https://dummyimage.com/200x100\">\n        </scw-image>\n      </scw-flex>"
     },
     {
       "title": "scrset",
       "description": "\n        This includes using srcset. However, it does NOT use the default \n        combination of \"srcset\" and \"sizes\"\n        to determine which image to use. Instead it establishes the image's\n        \"sizes\" by the size of the image itself that is updated at specific\n        breakpoints (\"sm, md, lg\" by default). The size established within \n        srcset will determine when it is used. To see this work with this \n        example, shrink the browser down, refresh, and then resize the browser \n        outward. Caching will effect predictable changes.",
-      "code": "\n        <scw-image\n          aria-label=\"scw-image example\"\n          style=\"width: 70%;\"\n          aspect-ratio=\"3:1\"\n          resize-breakpoints=\"sm, 04, 05, md, lg, 09, 10\"\n          srcset=\"\n            https://dummyimage.com/100x33 100w,\n            https://dummyimage.com/200x66 200w,\n            https://dummyimage.com/300x100 300w,\n            https://dummyimage.com/400x133 400w\">\n        </scw-image>"
+      "code": "\n        <scw-image\n          alt=\"scw-image example\"\n          style=\"width: 70%;\"\n          aspect-ratio=\"3:1\"\n          resize-breakpoints=\"sm, 04, 05, md, lg, 09, 10\"\n          srcset=\"\n            https://dummyimage.com/100x33 100w,\n            https://dummyimage.com/200x66 200w,\n            https://dummyimage.com/300x100 300w,\n            https://dummyimage.com/400x133 400w\">\n        </scw-image>"
     },
     {
       "title": "lazy loading",
       "description": "\n        scw-image only loads it's images if it knows it is on the screen (or \n          close to being visible on the screen). If you scroll the page you \n          may notice the images loading during scroll. You can turn this \n          off with \"no-lazy-loading\". It's recommended to use aspect-ratio\n          and a defined width when using lazy loading.",
-      "code": "\n        <scw-image\n          aria-label=\"scw-image example\"\n          style=\"width: 300px;\"\n          aspect-ratio=\"3:1\"\n          no-lazy-loading\n          src=\"https://dummyimage.com/300x100\">\n        </scw-image>"
+      "code": "\n        <scw-image\n          alt=\"scw-image example\"\n          style=\"width: 300px;\"\n          aspect-ratio=\"3:1\"\n          no-lazy-loading\n          src=\"https://dummyimage.com/300x100\">\n        </scw-image>"
     },
     {
       "title": "aspect-ratio",
       "description": "\n        scw-image also has 'aspect-ratio' which will render the component at\n        a specific height relative to it's width. You will have to declare some\n        kind of width for this to work. However, this is recommended \n        because it will avoid the page jumping after the image loads and also\n        allows for srcset to use different resolution images.",
-      "code": "\n        <scw-image\n          aria-label=\"scw-image example\"\n          style=\"width: var( --col-4 );\"\n          aspect-ratio=\"3:1\"\n          src=\"https://dummyimage.com/300x100\">\n        </scw-image>"
+      "code": "\n        <scw-image\n          alt=\"scw-image example\"\n          style=\"width: var( --col-4 );\"\n          aspect-ratio=\"3:1\"\n          src=\"https://dummyimage.com/300x100\">\n        </scw-image>"
     },
     {
       "title": "object-fit and object-position",
       "description": "\n        With the aspect-ratio tag it becomes easier to use object-fit and\n        object-position (native css properties). Note that\n        these are attributes, not css properties.",
-      "code": "\n        <scw-image\n          aria-label=\"scw-image example\"\n          style=\"\n            width: 200px; float: left; clear: left;\n            background-color: var( --color-primary-09 )\"\n          aspect-ratio=\"1:1\"\n          object-fit=\"none\"\n          object-position=\"right top\"\n          src=\"https://dummyimage.com/100x100\">\n        </scw-image>\n        <scw-float\n          style=\"\n            float: right; clear: right;\n            width: var( --col-6 );\n            --gap: var( --scw-spacing-1 );\">\n          <scw-link \n            aria-label=\"none, right top\"\n            onclick=\"\n            this.parentElement.previousElementSibling.src = \n              'https://dummyimage.com/100x100';\n            this.parentElement.previousElementSibling.objectFit = 'none';\n            this.parentElement.previousElementSibling.objectPosition = \n              'right top';\"\n            \">\n          </scw-link>\n          <scw-link \n            aria-label=\"scale-down, top\"\n            onclick=\"\n            this.parentElement.previousElementSibling.src = \n              'https://dummyimage.com/500x200';\n            this.parentElement.previousElementSibling.objectFit = 'scale-down';\n            this.parentElement.previousElementSibling.objectPosition = \n              'top';\"\n            \">\n          </scw-link>\n          <scw-link \n            aria-label=\"cover\"\n            onclick=\"\n            this.parentElement.previousElementSibling.src = \n              'https://dummyimage.com/400x400';\n            this.parentElement.previousElementSibling.objectFit = 'cover';\n            this.parentElement.previousElementSibling.objectPosition = '';\">\n          </scw-link>\n          <scw-link \n            aria-label=\"cover, right\"\n            onclick=\"\n            this.parentElement.previousElementSibling.src = \n              'https://dummyimage.com/400x200';\n            this.parentElement.previousElementSibling.objectFit = 'cover';\n            this.parentElement.previousElementSibling.objectPosition = \n              'right';\">\n          </scw-link>\n          <scw-link \n            aria-label=\"fill\"\n            onclick=\"\n            this.parentElement.previousElementSibling.src = \n              'https://dummyimage.com/100x200';\n            this.parentElement.previousElementSibling.objectFit = 'fill';\n            this.parentElement.previousElementSibling.objectPosition = '';\">\n          </scw-link>\n        </scw-float>"
+      "code": "\n        <scw-image\n          alt=\"scw-image example\"\n          style=\"\n            width: 200px; float: left; clear: left;\n            background-color: var( --color-primary-09 )\"\n          aspect-ratio=\"1:1\"\n          object-fit=\"none\"\n          object-position=\"right top\"\n          src=\"https://dummyimage.com/100x100\">\n        </scw-image>\n        <scw-float\n          style=\"\n            float: right; clear: right;\n            width: var( --col-6 );\n            --gap: var( --scw-spacing-1 );\">\n          <scw-link \n            aria-label=\"none, right top\"\n            onclick=\"\n            this.parentElement.previousElementSibling.src = \n              'https://dummyimage.com/100x100';\n            this.parentElement.previousElementSibling.objectFit = 'none';\n            this.parentElement.previousElementSibling.objectPosition = \n              'right top';\"\n            \">\n          </scw-link>\n          <scw-link \n            aria-label=\"scale-down, top\"\n            onclick=\"\n            this.parentElement.previousElementSibling.src = \n              'https://dummyimage.com/500x200';\n            this.parentElement.previousElementSibling.objectFit = 'scale-down';\n            this.parentElement.previousElementSibling.objectPosition = \n              'top';\"\n            \">\n          </scw-link>\n          <scw-link \n            aria-label=\"cover\"\n            onclick=\"\n            this.parentElement.previousElementSibling.src = \n              'https://dummyimage.com/400x400';\n            this.parentElement.previousElementSibling.objectFit = 'cover';\n            this.parentElement.previousElementSibling.objectPosition = '';\">\n          </scw-link>\n          <scw-link \n            aria-label=\"cover, right\"\n            onclick=\"\n            this.parentElement.previousElementSibling.src = \n              'https://dummyimage.com/400x200';\n            this.parentElement.previousElementSibling.objectFit = 'cover';\n            this.parentElement.previousElementSibling.objectPosition = \n              'right';\">\n          </scw-link>\n          <scw-link \n            aria-label=\"fill\"\n            onclick=\"\n            this.parentElement.previousElementSibling.src = \n              'https://dummyimage.com/100x200';\n            this.parentElement.previousElementSibling.objectFit = 'fill';\n            this.parentElement.previousElementSibling.objectPosition = '';\">\n          </scw-link>\n        </scw-float>"
     },
     {
       "title": "link",
-      "description": "\n        scw-image controls it's own linking behavior (versus wrapping it in\n          an anchor tag). Do this with a \"link\" attribute and either \n          a nested anchor or adding a click event.",
-      "code": "\n        <scw-flex-h\n          scw-gap-2s>\n          <scw-image\n            aria-label=\"scw-image example\"\n            style=\"width: 100px;\"\n            aspect-ratio=\"1:1\"\n            src=\"https://dummyimage.com/100x100\"\n            href=\"https://www.summitcreditunion.com\"\n            target=\"_blank\">\n          </scw-image>\n          <scw-image\n            aria-label=\"scw-image example\"\n            style=\"width: 100px;\"\n            aspect-ratio=\"1:1\"\n            src=\"https://dummyimage.com/100x100\">\n            <a href=\"https://www.summitcreditunion.com\"\n              target=\"_blank\">\n              Summit Credit Union\n            </a>\n          </scw-image>\n          <scw-image\n            aria-label=\"scw-image example\"\n            style=\"width: 100px;\"\n            aspect-ratio=\"1:1\"\n            src=\"https://dummyimage.com/100x100\"\n            onclick=\"alert('clicked')\">\n          </scw-image>\n        </scw-flex-h>"
+      "description": "\n        scw-image controls it's own linking behavior (versus wrapping it in\n          an anchor tag). Do this with the link attributes, a nested\n          anchor tag, or adding a click event.",
+      "code": "\n        <scw-flex-h\n          scw-gap-2s>\n          <scw-image\n            alt=\"scw-image example\"\n            aria-label=\"Summit Credit Union\"\n            style=\"width: 100px;\"\n            aspect-ratio=\"1:1\"\n            src=\"https://dummyimage.com/100x100\"\n            href=\"https://www.summitcreditunion.com\"\n            target=\"_blank\">\n          </scw-image>\n          <scw-image\n            alt=\"scw-image example\"\n            style=\"width: 100px;\"\n            aspect-ratio=\"1:1\"\n            src=\"https://dummyimage.com/100x100\">\n            <a href=\"https://www.summitcreditunion.com\"\n              target=\"_blank\">\n              Summit Credit Union\n            </a>\n          </scw-image>\n          <scw-image\n            alt=\"scw-image example\"\n            aria-label=\"Summit Credit Union\"\n            style=\"width: 100px;\"\n            aspect-ratio=\"1:1\"\n            src=\"https://dummyimage.com/100x100\"\n            onclick=\"alert('clicked')\">\n          </scw-image>\n        </scw-flex-h>"
     },
     {
       "title": "errors",
-      "description": "Hover image to see error. scw-image requires aria-label and\n      image information.",
-      "code": "\n      <scw-flex-h\n        scw-gap-2s>\n        <scw-image\n          style=\"width: 100px; height: 100px;\"\n          src=\"https://dummyimage.com/100x100\">\n        </scw-image>\n        <scw-image\n          aria-label=\"No image information\"\n          style=\"width: 100px; height: 100px;\">\n        </scw-image>\n      </scw-flex-h>"
+      "description": "Hover image to see error. scw-image requires alt and\n      image information.",
+      "code": "\n      <scw-flex-h\n        scw-gap-2s>\n        <scw-image\n          style=\"width: 100px; height: 100px;\"\n          src=\"https://dummyimage.com/100x100\">\n        </scw-image>\n        <scw-image\n          alt=\"No image information\"\n          style=\"width: 100px; height: 100px;\">\n        </scw-image>\n      </scw-flex-h>"
     }
   ]
 }

package/dist/docs/components/ScwLink.json

@@ -174,6 +174,17 @@
         "module": "src/scw-link-base/ScwLinkBase.ts"
       }
     },
+    {
+      "kind": "field",
+      "name": "linkAnchor",
+      "type": {
+        "text": "HTMLAnchorElement | undefined"
+      },
+      "inheritedFrom": {
+        "name": "ScwLinkBase",
+        "module": "src/scw-link-base/ScwLinkBase.ts"
+      }
+    },
     {
       "kind": "method",
       "name": "cancelEvent",
@@ -234,6 +245,20 @@
         "module": "src/scw-link-base/ScwLinkBase.ts"
       }
     },
+    {
+      "kind": "method",
+      "name": "focus",
+      "return": {
+        "type": {
+          "text": "void"
+        }
+      },
+      "description": "focus",
+      "inheritedFrom": {
+        "name": "ScwLinkBase",
+        "module": "src/scw-link-base/ScwLinkBase.ts"
+      }
+    },
     {
       "kind": "field",
       "name": "responsive",

package/dist/docs/components/ScwLinkBase.json

@@ -57,6 +57,13 @@
       "attribute": "target",
       "reflects": true
     },
+    {
+      "kind": "field",
+      "name": "linkAnchor",
+      "type": {
+        "text": "HTMLAnchorElement | undefined"
+      }
+    },
     {
       "kind": "method",
       "name": "cancelEvent",
@@ -114,6 +121,16 @@
       ],
       "description": "renderLink"
     },
+    {
+      "kind": "method",
+      "name": "focus",
+      "return": {
+        "type": {
+          "text": "void"
+        }
+      },
+      "description": "focus"
+    },
     {
       "kind": "field",
       "name": "element",

package/dist/docs/components/ScwMenu.json

@@ -279,7 +279,7 @@
     {
       "title": "Keyboard Directions",
       "description": "scw-menu takes a keyboard-direction attribute. This changes\n      the way that the arrow keys will function. For instance using horizontal\n      will enable arrow right/left to move around the nav, but change \n      arrow up/down to trigger submenus.",
-      "code": "\n        <scw-menu\n          aria-label=\"keyboard directions menu\"\n          scw-flex-h\n          scw-gap-2s\n          keyboard-direction=\"horizontal\">\n          <scw-menu-item\n            aria-label=\"Sub Menu\"\n            design=\"main\">\n          </scw-menu-item>\n\n          <scw-menu\n            aria-label=\"utility\"\n            scw-flex-h\n            scw-gap-2s\n            scw-padding-2s\n            scw-border-primary\n            scw-background-color-grey-10\n            keyboard-direction=\"horizontal\"\n            aria-hidden=\"true\"\n            style=\"\n              position: absolute;\n              top: 100%;\n              display: none;\n              z-index: 100;\">\n            <scw-menu-item \n              aria-label=\"Home\"\n              design=\"utility\">\n            </scw-menu-item>\n            <scw-menu-item\n              aria-label=\"Page\"\n              design=\"utility\">\n            </scw-menu-item>\n            <scw-menu-item\n              aria-label=\"About\"\n              design=\"utility\">\n            </scw-menu-item>\n          </scw-menu>\n\n          <scw-menu-item \n            aria-label=\"Page\"\n            design=\"main\">\n          </scw-menu-item>\n          <scw-menu-item\n            aria-label=\"About\"\n            design=\"main\">\n          </scw-menu-item>\n        </scw-menu>"
+      "code": "\n        <scw-menu\n          aria-label=\"keyboard directions menu\"\n          scw-flex-h\n          scw-gap-2s\n          keyboard-direction=\"horizontal\">\n          <scw-menu-item\n            aria-label=\"Sub Menu\"\n            design=\"main\">\n          </scw-menu-item>\n          <scw-menu\n            aria-label=\"utility\"\n            scw-flex-h\n            scw-gap-2s\n            scw-padding-2s\n            scw-border-primary\n            scw-background-color-grey-10\n            keyboard-direction=\"horizontal\"\n            aria-hidden=\"true\"\n            style=\"\n              position: absolute;\n              top: 100%;\n              display: none;\n              z-index: 100;\">\n            <scw-menu-item \n              aria-label=\"Home\"\n              design=\"utility\">\n            </scw-menu-item>\n            <scw-menu-item\n              aria-label=\"Page\"\n              design=\"utility\">\n            </scw-menu-item>\n            <scw-menu-item\n              aria-label=\"About\"\n              design=\"utility\">\n            </scw-menu-item>\n          </scw-menu>\n          <scw-menu-item \n            aria-label=\"Page\"\n            design=\"main\">\n          </scw-menu-item>\n          <scw-menu-item\n            aria-label=\"About\"\n            design=\"main\">\n          </scw-menu-item>\n        </scw-menu>"
     },
     {
       "title": "Layouts",

package/dist/docs/components/ScwMenuItem.json

@@ -226,6 +226,17 @@
         "module": "src/scw-link-base/ScwLinkBase.ts"
       }
     },
+    {
+      "kind": "field",
+      "name": "linkAnchor",
+      "type": {
+        "text": "HTMLAnchorElement | undefined"
+      },
+      "inheritedFrom": {
+        "name": "ScwLinkBase",
+        "module": "src/scw-link-base/ScwLinkBase.ts"
+      }
+    },
     {
       "kind": "method",
       "name": "cancelEvent",
@@ -286,6 +297,20 @@
         "module": "src/scw-link-base/ScwLinkBase.ts"
       }
     },
+    {
+      "kind": "method",
+      "name": "focus",
+      "return": {
+        "type": {
+          "text": "void"
+        }
+      },
+      "description": "focus",
+      "inheritedFrom": {
+        "name": "ScwLinkBase",
+        "module": "src/scw-link-base/ScwLinkBase.ts"
+      }
+    },
     {
       "kind": "field",
       "name": "responsive",

package/dist/docs/components/ScwPageAlert.json

@@ -104,6 +104,17 @@
         "module": "src/scw-link-base/ScwLinkBase.ts"
       }
     },
+    {
+      "kind": "field",
+      "name": "linkAnchor",
+      "type": {
+        "text": "HTMLAnchorElement | undefined"
+      },
+      "inheritedFrom": {
+        "name": "ScwLinkBase",
+        "module": "src/scw-link-base/ScwLinkBase.ts"
+      }
+    },
     {
       "kind": "method",
       "name": "cancelEvent",
@@ -173,6 +184,20 @@
         "module": "src/scw-link-base/ScwLinkBase.ts"
       }
     },
+    {
+      "kind": "method",
+      "name": "focus",
+      "return": {
+        "type": {
+          "text": "void"
+        }
+      },
+      "description": "focus",
+      "inheritedFrom": {
+        "name": "ScwLinkBase",
+        "module": "src/scw-link-base/ScwLinkBase.ts"
+      }
+    },
     {
       "kind": "field",
       "name": "responsive",