fix(ld-button): spacings and colors

emdgroup-liquid · May 29, 2021 · 7eee836 · 7eee836
1 parent fb268b7
commit 7eee836
Show file tree

Hide file tree

Showing 87 changed files with 467 additions and 535 deletions.
diff --git a/screenshot/builds/master.json b/screenshot/builds/master.json
diff --git a/screenshot/images/009f05efc0c22431df62166cabe00371.png b/screenshot/images/009f05efc0c22431df62166cabe00371.png
diff --git a/screenshot/images/02470276653aaa7e4d70491025b68d0e.png b/screenshot/images/02470276653aaa7e4d70491025b68d0e.png
diff --git a/screenshot/images/045b58706fa819565250478534607569.png b/screenshot/images/045b58706fa819565250478534607569.png
diff --git a/screenshot/images/0bac0e949d5b2d70a84c3b249a05ae2d.png b/screenshot/images/0bac0e949d5b2d70a84c3b249a05ae2d.png
diff --git a/screenshot/images/0ca5370cdd9cb2a9f7627b0b728dee05.png b/screenshot/images/0ca5370cdd9cb2a9f7627b0b728dee05.png
diff --git a/screenshot/images/129e04a08f398cf09dd21d71baaf9f9d.png b/screenshot/images/129e04a08f398cf09dd21d71baaf9f9d.png
diff --git a/screenshot/images/143aac3080c65342e39a523d3a27f71f.png b/screenshot/images/143aac3080c65342e39a523d3a27f71f.png
diff --git a/screenshot/images/167c8ae07f163df8d13442b4d933d1ce.png b/screenshot/images/167c8ae07f163df8d13442b4d933d1ce.png
diff --git a/screenshot/images/16803870b822372443f63150f0ca0493.png b/screenshot/images/16803870b822372443f63150f0ca0493.png
diff --git a/screenshot/images/1a4f2dc86406ac647ed874affe583e8f.png b/screenshot/images/1a4f2dc86406ac647ed874affe583e8f.png
diff --git a/...ages/7ae5d204ab3da70e33440a5ae1278611.png → ...ages/1a59ffcdd42f86b6529a1cada4fef369.png b/...ages/7ae5d204ab3da70e33440a5ae1278611.png → ...ages/1a59ffcdd42f86b6529a1cada4fef369.png
diff --git a/...ages/2bcebc7324214743056683d987ebcb7d.png → ...ages/1f72afe6d3b14bbd80bebd1c8be0bfd7.png b/...ages/2bcebc7324214743056683d987ebcb7d.png → ...ages/1f72afe6d3b14bbd80bebd1c8be0bfd7.png
diff --git a/...ages/80c811ae629f2f8e8269e48e2ff45bd3.png → ...ages/20ebb313631bc1971be4cda997af6082.png b/...ages/80c811ae629f2f8e8269e48e2ff45bd3.png → ...ages/20ebb313631bc1971be4cda997af6082.png
diff --git a/...ages/0647a512571f34734d4879fc841dcf84.png → ...ages/26d82ef589a1e76a054656d52fbb8e71.png b/...ages/0647a512571f34734d4879fc841dcf84.png → ...ages/26d82ef589a1e76a054656d52fbb8e71.png
diff --git a/screenshot/images/28324464a5d07c0f4bede2c7b526703e.png b/screenshot/images/28324464a5d07c0f4bede2c7b526703e.png
diff --git a/screenshot/images/335d8c456df48da488e8b0a378c7014a.png b/screenshot/images/335d8c456df48da488e8b0a378c7014a.png
diff --git a/...ages/e7b8a3c34482ea3342237a2f5128c657.png → ...ages/3572efe606d2bb0ca0ccf260ded7172d.png b/...ages/e7b8a3c34482ea3342237a2f5128c657.png → ...ages/3572efe606d2bb0ca0ccf260ded7172d.png
diff --git a/...ages/81d23c641a0c52fc1269796953b6ffc4.png → ...ages/36f4389db43bb9acd26912e605c3d95f.png b/...ages/81d23c641a0c52fc1269796953b6ffc4.png → ...ages/36f4389db43bb9acd26912e605c3d95f.png
diff --git a/screenshot/images/383ae217dd25325b35297c32a22a52ab.png b/screenshot/images/383ae217dd25325b35297c32a22a52ab.png
diff --git a/...ages/9844eeeead21a6aa429af75548b76e82.png → ...ages/39116c8c8e8b8b4be6c9c28315a15212.png b/...ages/9844eeeead21a6aa429af75548b76e82.png → ...ages/39116c8c8e8b8b4be6c9c28315a15212.png
diff --git a/screenshot/images/3b2dcc33764d5e4acd82ec581227211c.png b/screenshot/images/3b2dcc33764d5e4acd82ec581227211c.png
diff --git a/...ages/52823d49f4ba0c070e43d4f5f4980d29.png → ...ages/3ce4c9a6859245c74a0d367aad859fec.png b/...ages/52823d49f4ba0c070e43d4f5f4980d29.png → ...ages/3ce4c9a6859245c74a0d367aad859fec.png
diff --git a/...ages/2666aac7e73356908e94be97bcc04625.png → ...ages/40023a11c146c9bf7f2fde76ec965f77.png b/...ages/2666aac7e73356908e94be97bcc04625.png → ...ages/40023a11c146c9bf7f2fde76ec965f77.png
diff --git a/screenshot/images/4087be6f84789013f65510feef29be0f.png b/screenshot/images/4087be6f84789013f65510feef29be0f.png
diff --git a/screenshot/images/40f216762b2a211efd88002eb9352906.png b/screenshot/images/40f216762b2a211efd88002eb9352906.png
diff --git a/screenshot/images/45760915c535b183beb0b7cd316ac4fa.png b/screenshot/images/45760915c535b183beb0b7cd316ac4fa.png
diff --git a/screenshot/images/4f4d131f6328f836ac2e95f015e43d19.png b/screenshot/images/4f4d131f6328f836ac2e95f015e43d19.png
diff --git a/screenshot/images/53496bd83c2ac451d7aeeda6677b3f0f.png b/screenshot/images/53496bd83c2ac451d7aeeda6677b3f0f.png
diff --git a/screenshot/images/5ec119e352f0367cc5eaf9f68a8e3fe4.png b/screenshot/images/5ec119e352f0367cc5eaf9f68a8e3fe4.png
diff --git a/screenshot/images/669cd3c64207e86084fa7623c1dedae9.png b/screenshot/images/669cd3c64207e86084fa7623c1dedae9.png
diff --git a/screenshot/images/68636f42615c3cb588a04f20f3306fa6.png b/screenshot/images/68636f42615c3cb588a04f20f3306fa6.png
diff --git a/screenshot/images/6e93a54f779b00cec8d51d80b2c578c6.png b/screenshot/images/6e93a54f779b00cec8d51d80b2c578c6.png
diff --git a/...ages/8c3d604d95a79ac6c4fbd23d207b6c7c.png → ...ages/7366120792d63f00c3a9ca7731c50f33.png b/...ages/8c3d604d95a79ac6c4fbd23d207b6c7c.png → ...ages/7366120792d63f00c3a9ca7731c50f33.png
diff --git a/screenshot/images/79f682da086ab3fcee6af78af07fb066.png b/screenshot/images/79f682da086ab3fcee6af78af07fb066.png
diff --git a/...ages/40aaefdc5d47995c4eb734317a081ce9.png → ...ages/7a99d9aa994471c67ecca1f916e8f0ff.png b/...ages/40aaefdc5d47995c4eb734317a081ce9.png → ...ages/7a99d9aa994471c67ecca1f916e8f0ff.png
diff --git a/screenshot/images/7cbaf9d3b9f4da2ceff9521569809d88.png b/screenshot/images/7cbaf9d3b9f4da2ceff9521569809d88.png
diff --git a/screenshot/images/80515cceb0232303ee2d0005dfa097b3.png b/screenshot/images/80515cceb0232303ee2d0005dfa097b3.png
diff --git a/screenshot/images/869cfaa8b74376167eb14a2693c15ce8.png b/screenshot/images/869cfaa8b74376167eb14a2693c15ce8.png
diff --git a/...ages/5ea363dd138e40a9b80af55cfd291ea3.png → ...ages/8a1a2a191e8b1d290c24daa84517e509.png b/...ages/5ea363dd138e40a9b80af55cfd291ea3.png → ...ages/8a1a2a191e8b1d290c24daa84517e509.png
diff --git a/screenshot/images/8d25f06c063ad644469784bd306d0bc8.png b/screenshot/images/8d25f06c063ad644469784bd306d0bc8.png
diff --git a/...ages/99ab8cc8d334f4e83cf180a63bfc23a6.png → ...ages/8de38dfab443605086ae977d9d06368a.png b/...ages/99ab8cc8d334f4e83cf180a63bfc23a6.png → ...ages/8de38dfab443605086ae977d9d06368a.png
diff --git a/screenshot/images/907825a19bdfc00ef0d800e4f96614a2.png b/screenshot/images/907825a19bdfc00ef0d800e4f96614a2.png
diff --git a/...ages/9abbd8195ec1b5ac719d9675cdaabd0e.png → ...ages/90e532be7c15847a8cec2daf4da09dd2.png b/...ages/9abbd8195ec1b5ac719d9675cdaabd0e.png → ...ages/90e532be7c15847a8cec2daf4da09dd2.png
diff --git a/...ages/96d2bdbe43aec7805e6ca6a3483d40d0.png → ...ages/9655297d582edbb4a7c2849dfcfcb888.png b/...ages/96d2bdbe43aec7805e6ca6a3483d40d0.png → ...ages/9655297d582edbb4a7c2849dfcfcb888.png
diff --git a/screenshot/images/9bd98c2d005a9cddef8f0feedd13e29e.png b/screenshot/images/9bd98c2d005a9cddef8f0feedd13e29e.png
diff --git a/screenshot/images/9e7ca7a75b11dc909e477e9a2f26b54d.png b/screenshot/images/9e7ca7a75b11dc909e477e9a2f26b54d.png
diff --git a/screenshot/images/9eea95dc924100b40b363f56e0487b1f.png b/screenshot/images/9eea95dc924100b40b363f56e0487b1f.png
diff --git a/screenshot/images/9fd9cfa3b5f2619b4439de6e01fdbedd.png b/screenshot/images/9fd9cfa3b5f2619b4439de6e01fdbedd.png
diff --git a/screenshot/images/a0884e58321c0482d3302d6dee52bfda.png b/screenshot/images/a0884e58321c0482d3302d6dee52bfda.png
diff --git a/...ages/2d2031db22632c0f2daa6226d40ff257.png → ...ages/a1c5b61e0c70f34493aaf6873de5eacc.png b/...ages/2d2031db22632c0f2daa6226d40ff257.png → ...ages/a1c5b61e0c70f34493aaf6873de5eacc.png
diff --git a/screenshot/images/a20f8ed63ad4bae81a313ac99c701186.png b/screenshot/images/a20f8ed63ad4bae81a313ac99c701186.png
diff --git a/screenshot/images/a3fb299f87b7e8bc030dc71cac3f752a.png b/screenshot/images/a3fb299f87b7e8bc030dc71cac3f752a.png
diff --git a/...ages/4113480796ade538fb554059212166ee.png → ...ages/a85f9d5d5bfc1fa543dc2e8d946554ee.png b/...ages/4113480796ade538fb554059212166ee.png → ...ages/a85f9d5d5bfc1fa543dc2e8d946554ee.png
diff --git a/...ages/97a716a3a0c761abe2defea560b2c7da.png → ...ages/ad93236838471a2cb53afeb25c17f0e3.png b/...ages/97a716a3a0c761abe2defea560b2c7da.png → ...ages/ad93236838471a2cb53afeb25c17f0e3.png
diff --git a/...ages/f145a51a6d0c5ab4d2f390f1d3afad18.png → ...ages/af8bffad5f55c4520f4ce1b5b7243212.png b/...ages/f145a51a6d0c5ab4d2f390f1d3afad18.png → ...ages/af8bffad5f55c4520f4ce1b5b7243212.png
diff --git a/...ages/3e7646453541988ff57de81e4bc6d244.png → ...ages/b1986c1d65f99e1d8cc0aeec3b15e3f6.png b/...ages/3e7646453541988ff57de81e4bc6d244.png → ...ages/b1986c1d65f99e1d8cc0aeec3b15e3f6.png
diff --git a/screenshot/images/bb05192add7f798647392b1f00dfd984.png b/screenshot/images/bb05192add7f798647392b1f00dfd984.png
diff --git a/...ages/bcec50b8b9f30595fccd1179b6d1b7ea.png → ...ages/bbbad7a9a9a37e3ca52ef77f764e62f2.png b/...ages/bcec50b8b9f30595fccd1179b6d1b7ea.png → ...ages/bbbad7a9a9a37e3ca52ef77f764e62f2.png
diff --git a/screenshot/images/c05b2a1926d380c4e8e4d8b667ac5554.png b/screenshot/images/c05b2a1926d380c4e8e4d8b667ac5554.png
diff --git a/screenshot/images/c56aae91c71df562a7ec10c1eae18a12.png b/screenshot/images/c56aae91c71df562a7ec10c1eae18a12.png
diff --git a/screenshot/images/c66b4286753c072cfc4023fb474308bf.png b/screenshot/images/c66b4286753c072cfc4023fb474308bf.png
diff --git a/screenshot/images/c6d5f5c1c2fbdeaed5adfc06d360b3d3.png b/screenshot/images/c6d5f5c1c2fbdeaed5adfc06d360b3d3.png
diff --git a/screenshot/images/c887f125986d10587a5b3253634773c0.png b/screenshot/images/c887f125986d10587a5b3253634773c0.png
diff --git a/...ages/36b0f1e8591a1eee7397eeed0f88049f.png → ...ages/cb26e9492a452a31bb8e1622fdc94a76.png b/...ages/36b0f1e8591a1eee7397eeed0f88049f.png → ...ages/cb26e9492a452a31bb8e1622fdc94a76.png
diff --git a/screenshot/images/cefce692f38edb6369ff1f228277ffb2.png b/screenshot/images/cefce692f38edb6369ff1f228277ffb2.png
diff --git a/screenshot/images/d014bdfc76e9b40cedc3ef59cf436854.png b/screenshot/images/d014bdfc76e9b40cedc3ef59cf436854.png
diff --git a/screenshot/images/d31892764a57234de8d9b1fd3af75ec3.png b/screenshot/images/d31892764a57234de8d9b1fd3af75ec3.png
diff --git a/screenshot/images/d36a42de24f4e1d037bd33789810827c.png b/screenshot/images/d36a42de24f4e1d037bd33789810827c.png
diff --git a/screenshot/images/d6126f0feeccee33d7092762e1ffbb5b.png b/screenshot/images/d6126f0feeccee33d7092762e1ffbb5b.png
diff --git a/screenshot/images/da3728e28228aa0f20dc900a7b91d3b2.png b/screenshot/images/da3728e28228aa0f20dc900a7b91d3b2.png
diff --git a/...ages/03d088e16c64e29528d9d39f590098ae.png → ...ages/dbc217a6bf99c2c739a4cb57bb9d2bfd.png b/...ages/03d088e16c64e29528d9d39f590098ae.png → ...ages/dbc217a6bf99c2c739a4cb57bb9d2bfd.png
diff --git a/screenshot/images/e0e1557c3a45f27ade172aa858faec81.png b/screenshot/images/e0e1557c3a45f27ade172aa858faec81.png
diff --git a/screenshot/images/e25c7c3ea49b07322dea2e07c4c5c8a4.png b/screenshot/images/e25c7c3ea49b07322dea2e07c4c5c8a4.png
diff --git a/screenshot/images/e9a95483c68063dd7790d5c741d41278.png b/screenshot/images/e9a95483c68063dd7790d5c741d41278.png
diff --git a/screenshot/images/eee8ae4374be87a69717776f77d7d008.png b/screenshot/images/eee8ae4374be87a69717776f77d7d008.png
diff --git a/screenshot/images/f006daadb8ff3ec9fbec86b0266ddd74.png b/screenshot/images/f006daadb8ff3ec9fbec86b0266ddd74.png
diff --git a/...ages/162b99c27f005b1e9acbcf3cadc11c98.png → ...ages/f5671d3dff2cb83516495ad7731ba80b.png b/...ages/162b99c27f005b1e9acbcf3cadc11c98.png → ...ages/f5671d3dff2cb83516495ad7731ba80b.png
diff --git a/screenshot/images/f894fefbb00198580e2d54bc54890893.png b/screenshot/images/f894fefbb00198580e2d54bc54890893.png
diff --git a/...ages/fbdedacf70e74abe938dae9d2412291f.png → ...ages/fd2671ab5f946f1aa38a8b8fa989f313.png b/...ages/fbdedacf70e74abe938dae9d2412291f.png → ...ages/fd2671ab5f946f1aa38a8b8fa989f313.png
diff --git a/src/docs/components/docs-copy-to-cb/docs-copy-to-cb.tsx b/src/docs/components/docs-copy-to-cb/docs-copy-to-cb.tsx
@@ -30,11 +30,11 @@ export class DocsCopyToCb {
       textArea.value = textToCopy
       textArea.classList.add('ld-sr-only')
       document.body.appendChild(textArea)
-      textArea.focus()
+      textArea.focus({ preventScroll: true })
       textArea.select()
       await document.execCommand('copy')
       textArea.remove()
-      this.el.querySelector('button').focus()
+      this.el.querySelector('button').focus({ preventScroll: true })
     }
   }
 

diff --git a/src/liquid/components/ld-button/ld-button.css b/src/liquid/components/ld-button/ld-button.css
@@ -12,13 +12,16 @@
   --ld-icon-size-lg: 1.5rem;
   --ld-padding-sm-x: 0.625rem;
   --ld-padding-sm-y: 0.5rem;
-  --ld-padding-md-x: 0.75rem;
+  --ld-padding-md-x: 0.875rem;
   --ld-padding-md-y: 0.625rem;
-  --ld-padding-lg-x: 1rem;
+  --ld-padding-lg-x: 1.3125rem;
   --ld-padding-lg-y: 0.75rem;
-  --ld-gap-sm: 0.5625rem;
-  --ld-gap-md: 0.75rem;
-  --ld-gap-lg: 0.75rem;
+  --ld-gap-sm: 0.625rem;
+  --ld-gap-md: 0.875rem;
+  --ld-gap-lg: 1.1875rem;
+  --ld-icon-margin-x-sm: -0.125rem;
+  --ld-icon-margin-x-md: -0.25rem;
+  --ld-icon-margin-x-lg: -0.5rem;
   font: var(--ld-typo-body-m);
   border: 0;
   padding: var(--ld-padding-md-y) var(--ld-padding-md-x);
@@ -59,7 +62,7 @@
   }
 
   :where(.ld-icon) {
-    margin: auto -0.125rem;
+    margin: auto var(--ld-icon-margin-x-md);
   }
 
   &:where(.ld-button--sm) {
@@ -71,6 +74,10 @@
     line-height: 1;
     gap: var(--ld-gap-sm);
 
+    :where(.ld-icon) {
+      margin: auto var(--ld-icon-margin-x-sm);
+    }
+
     .ld-icon,
     .ld-icon :where(svg) {
       width: var(--ld-icon-size-sm);
@@ -87,6 +94,10 @@
     line-height: 1;
     gap: var(--ld-gap-lg);
 
+    :where(.ld-icon) {
+      margin: auto var(--ld-icon-margin-x-lg);
+    }
+
     .ld-icon,
     .ld-icon :where(svg) {
       width: var(--ld-icon-size-lg);
@@ -196,7 +207,7 @@
 
 .ld-button--highlight {
   background-color: var(--ld-col-vy-default);
-  color: var(--ld-col-rblck-default);
+  color: var(--ld-col-vy6);
 
   &:where(:not(:disabled):not([aria-disabled='true'])) {
     &:focus:focus-visible {
@@ -210,7 +221,7 @@
     &:active,
     &:active:focus-visible {
       background-color: var(--ld-col-vy-active);
-      color: var(--ld-col-wht);
+      color: var(--ld-col-vy4);
     }
   }
 }

diff --git a/src/liquid/components/ld-button/readme.md b/src/liquid/components/ld-button/readme.md
@@ -9,8 +9,8 @@ permalink: liquid/components/ld-button/
 
 # Button
 
-Buttons are used for triggering important user actions. A button text should be speaking in the sense of the user’s understanding, rather than in the system’s language.
-Icon-buttons without visual text should contain a screen-reader-only text.
+Buttons are used for triggering events on the user interface. A button's text should express what the button does.
+Icon-buttons without visual text should contain a screen-reader-only text, have an aria-label, a `title` element within the svg icon or an `alt` text on an `img` element.
 
 ---
 
@@ -436,23 +436,6 @@ You can align the text inside the button using the `align-text` propperty.
 | `target`         | `target`          | The `target` attributed can be used in conjunction with the `href` attribute. See [mdn docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target) for more information on the `target` attribute. | `"_blank" \| "_parent" \| "_self" \| "_top"`                                                          | `undefined` |
 
 
-## Dependencies
-
-### Used by
-
- - docs-copy-to-cb
- - docs-edit-on-github
- - docs-toggle-code
-
-### Graph
-```mermaid
-graph TD;
-  docs-copy-to-cb --> ld-button
-  docs-edit-on-github --> ld-button
-  docs-toggle-code --> ld-button
-  style ld-button fill:#f9f,stroke:#333,stroke-width:4px
-```
-
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*
diff --git a/src/liquid/components/ld-heading/readme.md b/src/liquid/components/ld-heading/readme.md
@@ -236,19 +236,6 @@ Here are some examples on how you can apply different colors on headings:
 | `visualLevel`        | `visual-level` | The heading style. Overrides the style inferred from the heading level.                                                                                                                                                                                                                                                                                                                                                                                                                                                   | `"h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6" \| "b1" \| "b2" \| "b3" \| "b4" \| "b5" \| "b6" \| "xb1" \| "xb2" \| "xb3" \| "xh1" \| "xh2" \| "xh3" \| "xh4" \| "xh5" \| "xh6"` | `undefined` |
 
 
-## Dependencies
-
-### Used by
-
- - docs-nav
-
-### Graph
-```mermaid
-graph TD;
-  docs-nav --> ld-heading
-  style ld-heading fill:#f9f,stroke:#333,stroke-width:4px
-```
-
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*
diff --git a/src/liquid/components/ld-icon/readme.md b/src/liquid/components/ld-icon/readme.md
@@ -65,23 +65,6 @@ Liquid's icons use the [`currentColor`](https://developer.mozilla.org/en-US/docs
 |      | (optional) Custom SVG icon (only valid without name prop). |
 
 
-## Dependencies
-
-### Used by
-
- - docs-copy-to-cb
- - docs-edit-on-github
- - docs-toggle-code
-
-### Graph
-```mermaid
-graph TD;
-  docs-copy-to-cb --> ld-icon
-  docs-edit-on-github --> ld-icon
-  docs-toggle-code --> ld-icon
-  style ld-icon fill:#f9f,stroke:#333,stroke-width:4px
-```
-
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*
diff --git a/src/liquid/components/ld-input/readme.md b/src/liquid/components/ld-input/readme.md
@@ -342,19 +342,6 @@ If you'd rather like to use the CSS component, inspect and copy the markup and C
 | `"start"` | The purpose of this slot is to add icons or buttons to the input, __justifying the item to the end of the component__. Styling for `ld-icon` and `ld-button` is provided within the `ld-input` component. If you choose to place something different into the slot, you will probably need to adjust some styles on the slotted item in order to make it fit right.   |
 
 
-## Dependencies
-
-### Used by
-
- - docs-search
-
-### Graph
-```mermaid
-graph TD;
-  docs-search --> ld-input
-  style ld-input fill:#f9f,stroke:#333,stroke-width:4px
-```
-
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*
diff --git a/src/liquid/components/ld-sr-only/readme.md b/src/liquid/components/ld-sr-only/readme.md
@@ -28,25 +28,6 @@ The CSS class `ld-sr-only` works the same way as its web component counterpart,
 <!-- Auto Generated Below -->
 
 
-## Dependencies
-
-### Used by
-
- - docs-copy-to-cb
- - docs-pick-theme
- - docs-switch-web-css
- - docs-toggle-code
-
-### Graph
-```mermaid
-graph TD;
-  docs-copy-to-cb --> ld-sr-only
-  docs-pick-theme --> ld-sr-only
-  docs-switch-web-css --> ld-sr-only
-  docs-toggle-code --> ld-sr-only
-  style ld-sr-only fill:#f9f,stroke:#333,stroke-width:4px
-```
-
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*