@repobit/dex-system-design 1.0.1 → 2.0.0

package/CHANGELOG.md

@@ -3,6 +3,87 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.0.0](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@1.0.1...@repobit/dex-system-design@2.0.0) (2026-10-15)
+
+### ⚠ BREAKING CHANGES
+
+* **DEX-1014:** bd-custom-input-clipboard no longer dispatches a custom
+"input" event with the string as detail. Listen for bd-input or
+bd-change and read detail.value. Nothing in this repository listened for
+the old event.
+
+Co-Authored-By: Claude <noreply@anthropic.com>
+
+### Features
+
+* **DEX-1014:** a dark-surface focus ring, because the white band merged into light controls
+* **DEX-1014:** bd-button and bd-button-link take a description for their inner control
+* **DEX-1014:** bd-custom-dropdown has a value and fires bd-input / bd-change
+* **DEX-1014:** bd-link takes a description too, so a bd-link tooltip trigger is described
+* **DEX-1014:** bd-link takes an arrow, because three components hand-drew a chevron instead
+* **DEX-1014:** bd-p takes color and an eyebrow variant, so all five eyebrows read 500
+* **DEX-1014:** bd-pagination-dots runs autoplay, with the progress in the current pill
+* **DEX-1014:** bd-pagination-dots, an atom for the slide indicator only awards-flex could draw
+* **DEX-1014:** bd-tooltip dismisses on Escape, the rest of WCAG 1.4.13
+* **DEX-1014:** check:docs reads docs/README.md and checks Markdown links
+* **DEX-1014:** the awards carousel shows one award per slide on a phone
+* **DEX-1014:** the eyebrow steps down to 14px below lg, as the tablet and mobile frames draw it
+
+### Bug Fixes
+
+* **DEX-1014:** a bd-code block is a group, not a landmark, and a tab stop only when it scrolls
+* **DEX-1014:** a bd-link with no href is not a link to the top of the page
+* **DEX-1014:** a bd-picture source with no type is used, not skipped as type="undefined"
+* **DEX-1014:** a select's descenders no longer clip; fields give text their full line box
+* **DEX-1014:** a standalone link takes its own role's weight, 500 rather than the inline 400
+* **DEX-1014:** an input's focused prop means focused, not a ring on a field that is not
+* **DEX-1014:** atom focus rings survive forced-colors mode, because box-shadow is not painted there
+* **DEX-1014:** bd-alert's dismiss button has a 24px target, not a 16px one
+* **DEX-1014:** bd-avatar falls back to initials on a broken image, and stays quiet without a name
+* **DEX-1014:** bd-back with an href is a real link, not a button that sets location
+* **DEX-1014:** bd-badge icons render at 16px, not the 32px they fell back to
+* **DEX-1014:** bd-blockquote credits the quote from outside it, in a figcaption
+* **DEX-1014:** bd-button focus is an offset outline, because code can leave the gap unpainted
+* **DEX-1014:** bd-caption size="sm" takes the caption-small role whole, and the docs say what it is
+* **DEX-1014:** bd-custom-dropdown announces invalid and its hint, not only draws them
+* **DEX-1014:** bd-custom-dropdown renders an empty field, not nothing, on non-JSON options
+* **DEX-1014:** bd-custom-input-clipboard announces invalid and its hint, not only draws them
+* **DEX-1014:** bd-custom-input-clipboard fires bd-input / bd-change, like its siblings
+* **DEX-1014:** bd-custom-input-clipboard gets its own export, ./input-clipboard
+* **DEX-1014:** bd-divider-vertical's thickness is a border-width step, not a length written as given
+* **DEX-1014:** bd-highlight keeps text after a repeated phrase, and adds no spaces round the mark
+* **DEX-1014:** bd-highlight keeps the headline's markup when it marks the phrase
+* **DEX-1014:** bd-label's for names and activates its control, as a native label's does
+* **DEX-1014:** bd-li's color is a text role, not a string written into its style, closes [#f00](https://github.com/bitdefender/dex-core/issues/f00)
+* **DEX-1014:** bd-list falls back to a styled value instead of carrying one nothing styles
+* **DEX-1014:** bd-progress clamps the value it reports, not only the fill it draws
+* **DEX-1014:** bd-progress clears a tone it does not style
+* **DEX-1014:** bd-radio keeps one tab stop per group when another radio changes
+* **DEX-1014:** bd-radio reflects name, so a radio named by property joins its group
+* **DEX-1014:** bd-spinner announces its label, which an empty status region never did
+* **DEX-1014:** bd-spinner keeps its arc under reduced motion and pulses the disc instead
+* **DEX-1014:** bd-switch thumb stays on its track when the reader enlarges text
+* **DEX-1014:** bd-switch's bd-change bubbles and is composed, like its siblings
+* **DEX-1014:** bd-terminal-cursor holds still under prefers-reduced-motion
+* **DEX-1014:** bd-toggle-radio's change event carries the name it declares
+* **DEX-1014:** bd-tooltip describes its trigger, so a screen reader hears the tooltip
+* **DEX-1014:** bd-tooltip re-places itself after it is moved in the DOM
+* **DEX-1014:** bd-tooltip stays open while the pointer moves onto the bubble
+* **DEX-1014:** bd-video reaches its player: captions, muted and controls="false" all work
+* **DEX-1014:** component focus rings survive forced-colors mode too
+* **DEX-1014:** custom-click bubbles and is composed, so a wrapper can hear it
+* **DEX-1014:** dividers draw a role at full strength, and opacity is only what a caller asks for
+* **DEX-1014:** eight Code Connect templates emit markup their element honours
+* **DEX-1014:** icons leave their host's style attribute alone, so a page's colour survives
+* **DEX-1014:** numbered bd-li items count 1, 2, 3 instead of all reading "1."
+* **DEX-1014:** stacked static quote cards take their own height on a phone
+* **DEX-1014:** surface="dark" buttons take the inverse ring, because blue vanished on a brand hero
+* **DEX-1014:** the awards pause toggle keeps 3:1 on the tint, and two band rules are written down
+* **DEX-1014:** the bd-contact-button manifest entry lists what the element has
+* **DEX-1014:** the current pagination pill takes a 2px edge, drawn inside so the fill keeps 8px
+* **DEX-1014:** the touch-target tokens read the dimension scale instead of px literals
+
+
 ## [1.0.1](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@1.0.0...@repobit/dex-system-design@1.0.1) (2026-10-15)
 
 **Note:** Version bump only for package @repobit/dex-system-design

package/README.md

@@ -18,7 +18,7 @@ import '@repobit/dex-system-design/button';
 ```
 
 ```html
-<bd-button kind="primary" size="md">Buy now</bd-button>
+<bd-button variant="primary" size="md">Buy now</bd-button>
 ```
 
 Each component is a separate entry point — see the `exports` map in
@@ -33,29 +33,43 @@ cascade layer. Importing any component installs them; nothing else is required.
 .thing {
   padding: var(--spacing-16);
   border-radius: var(--radius-md);
-  color: var(--color-neutral-900);
+  color: var(--color-text-primary);
+  background: var(--color-surface-container);
 }
 ```
 
+For colour, use the **semantic roles** — `--color-text-*`, `--color-surface-*`,
+`--color-border-*`, `--status-*` — rather than the palette steps
+(`--color-neutral-900`, `--color-blue-500`) behind them. A role names the job,
+so it keeps its contrast when a theme or a single value changes; a palette
+step is only today's value. `Foundations/Color/Responsibilities` and
+`Foundations/Surfaces` list which role answers which question.
+
 ### Overriding a token
 
 Because the tokens sit in a cascade layer, and unlayered CSS beats any layer,
-your own stylesheet wins with no special syntax:
+your own stylesheet wins with no special syntax. Override a role, not a
+palette step:
 
 ```css
 :root {
-  --color-blue-500: #0a58ca;
+  --color-text-brand: var(--color-blue-700);
 }
 ```
 
-Dark mode is the same mechanism:
+Recolouring a palette step (`--color-blue-500: …`) changes every role built on
+it at once, including ones whose contrast was measured against that exact
+value, such as white text on a blue button.
+
+**If your own CSS uses `@layer`**, declare the order first. The tokens' layer is
+installed after your stylesheets, so it is declared last and an override
+inside one of your layers silently loses to it:
 
 ```css
-@media (prefers-color-scheme: dark) {
-  :root {
-    --color-neutral-0: #111418;
-    --color-neutral-900: #e8eaed;
-  }
+@layer bd-tokens, app;   /* bd-tokens first, so app wins */
+
+@layer app {
+  :root { --color-text-brand: var(--color-blue-700); }
 }
 ```
 
@@ -63,6 +77,16 @@ This works because a token is declared once, on the document, rather than on
 each component's `:host`. A `:host` declaration would beat an inherited value
 and make the token unoverridable.
 
+### Dark mode
+
+No dark theme ships yet. **Do not build one by swapping palette steps** — for
+example exchanging `--color-neutral-0` and `--color-neutral-900`. The roles
+that sit on coloured fills do not flip with them. Measured with exactly that
+swap: a primary button's label falls to 4.07:1, and 2.99:1 on hover; text on an
+error fill to 3.39:1; brand text on the page to 2.99:1 — all under the 4.5:1
+text minimum. A dark theme has to remap the semantic roles, and
+`Foundations/Theming/Dark mode` is the study of how.
+
 You can also import the tokens directly if you need them without a component:
 
 ```js
@@ -83,8 +107,13 @@ npm run storybook
 ```
 
 `Foundations/` documents every primitive — colour, spacing, typography,
-fonts, grid, shape, elevation, focus, motion and dimension. Those pages read
-the loaded token CSS at render time, so they cannot drift from the tokens.
+fonts, grid, shape, elevation, focus, motion and dimension. Their swatches and
+values are read from the loaded token CSS at render time, so those cannot drift
+from the tokens; the explanatory prose beside them can, and is checked only for
+the files and references it cites.
+
+The full set of rules for working in this package — and the reasoning behind
+each — is in [`CLAUDE.md`](./CLAUDE.md).
 
 ## Page generation
 
@@ -129,6 +158,8 @@ foundation**. Everything is built and styled from them and from nothing else.
 | `npm run build:tokens` | regenerate the CSS token files from their JS sources |
 | `npm run build:tokens:check` | fail if a generated file is stale (CI) |
 | `npm run check:manifest` | verify the component manifest against the components |
+| `npm run check:ds` | every design-system gate — run before finishing any change |
+| `npm test` | `check:ds` plus the browser checks (needs Playwright's Chromium) |
 
 `src/tokens/tokens.js` is the source of truth for tokens; `tokens.css` is
 generated from it. Edit the JS and run `npm run build:tokens`.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@repobit/dex-system-design",
-  "version": "1.0.1",
+  "version": "2.0.0",
   "description": "Design system based on Web Components.",
   "author": "Iordache Matei Cezar <miordache@bitdefender.com>",
   "homepage": "https://github.com/bitdefender/dex-core#readme",
@@ -55,6 +55,7 @@
     "./marks": "./src/components/icons/marks.js",
     "./image": "./src/components/image/image.js",
     "./input": "./src/components/input/input.js",
+    "./input-clipboard": "./src/components/input/input-clipboard.js",
     "./label": "./src/components/label/label.js",
     "./light-carousel": "./src/components/light-carousel/light-carousel.js",
     "./link": "./src/components/link/link.js",
@@ -62,6 +63,7 @@
     "./list-item": "./src/components/list/list-item/list-item.js",
     "./modal": "./src/components/modal/modal.js",
     "./page-schema": "./schemas/page-schema.json",
+    "./pagination-dots": "./src/components/pagination-dots/pagination-dots.js",
     "./paragraph": "./src/components/paragraph/paragraph.js",
     "./picture": "./src/components/picture/picture.js",
     "./pricing-cards": "./src/components/pricing-cards/pricing-card.js",
@@ -177,5 +179,5 @@
   "volta": {
     "node": "24.14.0"
   },
-  "gitHead": "0f98fab9d1ac999edbab07fff948e9135368bd01"
+  "gitHead": "2d3b6d84d6e805628c3b6448429fb190beff3e78"
 }

package/schemas/component-manifest.json

@@ -1,7 +1,7 @@
 {
   "manifestVersion": 1,
   "package": "@repobit/dex-system-design",
-  "packageVersion": "1.0.1",
+  "packageVersion": "2.0.0",
   "generatedFrom": [
     "package.json exports",
     "Lit static properties",
@@ -188,7 +188,7 @@
     },
     {
       "tag": "bd-custom-input-clipboard",
-      "packageExport": "./input",
+      "packageExport": "./input-clipboard",
       "module": "./src/components/input/input-clipboard.js",
       "role": "form",
       "contentModel": "none",
@@ -231,7 +231,8 @@
         },
         {
           "name": "focused",
-          "type": "boolean"
+          "type": "boolean",
+          "description": "Has keyboard focus. Setting it moves focus into the field and clearing it blurs the field; it reflects whether the field is focused. Set it on at most one field, since only one can hold focus."
         },
         {
           "name": "tooltip",
@@ -253,7 +254,16 @@
           "name": "value",
           "type": "string",
           "description": "The field contents. A paste button sits over the right-hand end and fills it from the clipboard."
+        },
+        {
+          "name": "name",
+          "type": "string",
+          "description": "Carried on the bd-input and bd-change event detail. NOT submitted with a form — the input lives in a shadow root."
         }
+      ],
+      "events": [
+        "bd-input",
+        "bd-change"
       ]
     },
     {
@@ -479,10 +489,11 @@
           "name": "size",
           "type": "string",
           "enum": [
-            "small",
-            "default",
-            "large"
-          ]
+            "sm",
+            "md",
+            "lg"
+          ],
+          "description": "A size step. small, default and large still resolve, and are rewritten to these."
         }
       ]
     },
@@ -622,6 +633,11 @@
         "custom-click"
       ],
       "props": [
+        {
+          "name": "description",
+          "type": "string",
+          "description": "Extra text a screen reader reads after the name, wired with aria-describedby inside the shadow root, where the control is. bd-tooltip sets it on a trigger."
+        },
         {
           "name": "variant",
           "type": "string",
@@ -767,6 +783,11 @@
         "custom-click"
       ],
       "props": [
+        {
+          "name": "description",
+          "type": "string",
+          "description": "Extra text a screen reader reads after the name, wired with aria-describedby inside the shadow root, where the control is. bd-tooltip sets it on a trigger."
+        },
         {
           "name": "variant",
           "type": "string",
@@ -933,9 +954,10 @@
           "name": "size",
           "type": "string",
           "enum": [
-            "default",
-            "small"
-          ]
+            "sm",
+            "md"
+          ],
+          "description": "A size step; only sm has a rule of its own. default and small still resolve, and are rewritten to these."
         }
       ]
     },
@@ -1154,28 +1176,15 @@
       "role": "action",
       "contentModel": "none",
       "props": [
-        {
-          "name": "variant",
-          "type": "string",
-          "enum": [
-            "primary",
-            "secondary",
-            "tertiary",
-            "ghost",
-            "accent",
-            "white",
-            "outline-white"
-          ],
-          "description": "Visual variant. Replaces kind, which meant appearance here and size or marker elsewhere; kind still resolves. tertiary is a blue outline, ghost a dark outline, accent the red conversion fill — red is not a danger signal in this system. white and outline-white are fixed presets for a solid-colour banner and ignore surface on purpose."
-        },
         {
           "name": "label",
           "type": "string",
-          "description": "Both the visible text and the accessible name for this preset."
+          "description": "Both the visible text and the accessible name. Defaults to \"Contact us\"."
         },
         {
           "name": "href",
-          "type": "string"
+          "type": "string",
+          "description": "Where the CTA goes. It renders an <a>, so without one it is not a link."
         },
         {
           "name": "align",
@@ -1184,7 +1193,8 @@
             "left",
             "center",
             "right"
-          ]
+          ],
+          "description": "Horizontal placement, as on bd-button. Set it as an attribute."
         },
         {
           "name": "shape",
@@ -1195,6 +1205,9 @@
           ],
           "description": "Corner shape. rounded takes --radius-3xl whatever the size; default keeps the size band's radius."
         }
+      ],
+      "events": [
+        "custom-click"
       ]
     },
     {
@@ -1245,7 +1258,21 @@
         {
           "name": "disabled",
           "type": "boolean"
+        },
+        {
+          "name": "value",
+          "type": "string",
+          "description": "The chosen option. Read it, or set it to choose one; unset, or set to an option that is not there, it is the first. Carried on the bd-input / bd-change detail."
+        },
+        {
+          "name": "name",
+          "type": "string",
+          "description": "Carried on the bd-input and bd-change event detail. NOT submitted with a form — the select lives in a shadow root."
         }
+      ],
+      "events": [
+        "bd-input",
+        "bd-change"
       ]
     },
     {
@@ -1287,7 +1314,8 @@
         },
         {
           "name": "focused",
-          "type": "boolean"
+          "type": "boolean",
+          "description": "Has keyboard focus. Setting it moves focus into the field and clearing it blurs the field; it reflects whether the field is focused. Set it on at most one field, since only one can hold focus."
         },
         {
           "name": "tooltip",
@@ -1488,7 +1516,16 @@
         },
         {
           "name": "thickness",
-          "type": "string"
+          "type": "string",
+          "enum": [
+            "0",
+            "1",
+            "2",
+            "3",
+            "4",
+            "8"
+          ],
+          "description": "A border-width step, resolved to var(--border-width-N). \"1px\" and the other px spellings are read as their step; anything else is the 1px step."
         },
         {
           "name": "color",
@@ -2061,7 +2098,15 @@
         },
         {
           "name": "fit",
-          "type": "string"
+          "type": "string",
+          "enum": [
+            "cover",
+            "contain",
+            "fill",
+            "none",
+            "scale-down"
+          ],
+          "description": "object-fit for the image. Applied as a class; any other value falls back to \"cover\"."
         },
         {
           "name": "radius",
@@ -2080,7 +2125,15 @@
         },
         {
           "name": "shadow",
-          "type": "string"
+          "type": "string",
+          "enum": [
+            "none",
+            "sm",
+            "md",
+            "lg",
+            "xl"
+          ],
+          "description": "A shadow step. Applied as a class; any other value falls back to \"none\"."
         }
       ]
     },
@@ -2133,10 +2186,11 @@
           "name": "size",
           "type": "string",
           "enum": [
-            "small",
-            "default",
-            "large"
-          ]
+            "sm",
+            "md",
+            "lg"
+          ],
+          "description": "A size step. small, default and large still resolve, and are rewritten to these."
         },
         {
           "name": "for",
@@ -2320,6 +2374,11 @@
       "role": "content",
       "contentModel": "text-or-children",
       "props": [
+        {
+          "name": "description",
+          "type": "string",
+          "description": "Extra text a screen reader reads after the link's name, wired with aria-describedby inside the shadow root, where the <a> is. bd-tooltip sets it on a trigger."
+        },
         {
           "name": "variant",
           "type": "string",
@@ -2401,6 +2460,11 @@
             "error"
           ],
           "description": "A semantic colour role, not a CSS colour. Resolves to a palette token."
+        },
+        {
+          "name": "arrow",
+          "type": "boolean",
+          "description": "A trailing arrow after the label, for a standalone call-to-action link such as Read more. Every variant, state and surface applies; the arrow takes the link's ink. Slot a bd-*-icon into slot=\"icon\" to swap the glyph. It is decorative: the label must say where the link goes."
         }
       ]
     },
@@ -2413,15 +2477,32 @@
       "props": [
         {
           "name": "type",
-          "type": "string"
+          "type": "string",
+          "enum": [
+            "unordered",
+            "ordered"
+          ],
+          "description": "The tag: <ul> or <ol>. Any other value falls back to \"unordered\"."
         },
         {
           "name": "spacing",
-          "type": "string"
+          "type": "string",
+          "enum": [
+            "sm",
+            "md",
+            "lg"
+          ],
+          "description": "The gap between items when horizontal. Any other value falls back to \"md\"."
         },
         {
           "name": "variant",
-          "type": "string"
+          "type": "string",
+          "enum": [
+            "default",
+            "compact",
+            "spacious"
+          ],
+          "description": "The gap between items. Any other value falls back to \"default\"."
         },
         {
           "name": "start",
@@ -2429,7 +2510,12 @@
         },
         {
           "name": "orientation",
-          "type": "string"
+          "type": "string",
+          "enum": [
+            "vertical",
+            "horizontal"
+          ],
+          "description": "Flow of the items. Any other value falls back to \"vertical\"."
         }
       ]
     },
@@ -2549,9 +2635,10 @@
             "small",
             "regular",
             "large",
-            "lead"
+            "lead",
+            "eyebrow"
           ],
-          "description": "Body type role. Replaces kind, which still resolves."
+          "description": "Body type role. Replaces kind, which still resolves. eyebrow is the short brand-ink label above a section title, in text-brand: the label-large role (16px, Medium 500) from lg up, label-default (14px) below lg."
         },
         {
           "name": "kind",
@@ -2652,7 +2739,7 @@
             "warning",
             "error"
           ],
-          "description": "A text colour role, the same vocabulary as bd-h. Anything else is dropped."
+          "description": "A semantic colour role, not a CSS colour, the same set bd-h and bd-display take. primary is brand blue; inverse is white on a dark or brand band."
         }
       ]
     },
@@ -2732,6 +2819,66 @@
         }
       ]
     },
+    {
+      "tag": "bd-pagination-dots",
+      "packageExport": "./pagination-dots",
+      "module": "./src/components/pagination-dots/pagination-dots.js",
+      "role": "navigation",
+      "contentModel": "none",
+      "events": [
+        "bd-change",
+        "bd-toggle"
+      ],
+      "props": [
+        {
+          "name": "count",
+          "type": "number",
+          "description": "How many dots, one per slide or page. Below 2 nothing renders."
+        },
+        {
+          "name": "current",
+          "type": "number",
+          "description": "Which dot is current, 1-based, held between 1 and count. The owner of the slides sets it; a visitor's pick fires bd-change with detail.current."
+        },
+        {
+          "name": "label",
+          "type": "string",
+          "default": "Slides",
+          "description": "Accessible name of the group: what the dots move through. Set it in the page's language."
+        },
+        {
+          "name": "itemLabel",
+          "type": "string",
+          "attributeName": "item-label",
+          "default": "Go to slide",
+          "description": "Starts each dot's accessible name; the dot's number follows it. Set it in the page's language."
+        },
+        {
+          "name": "autoplay",
+          "type": "boolean",
+          "default": false,
+          "description": "The atom advances itself every delay ms, wrapping after the last slide, and the current pill fills as the time runs. Each advance fires bd-change like a click. Picking a dot stops it for good (WCAG 2.2.2); it never starts under prefers-reduced-motion."
+        },
+        {
+          "name": "delay",
+          "type": "number",
+          "default": 4000,
+          "description": "Milliseconds each slide shows under autoplay. Held at 1000 or more."
+        },
+        {
+          "name": "paused",
+          "type": "boolean",
+          "default": false,
+          "description": "Autoplay stopped for good: set when the visitor picks a dot, or under prefers-reduced-motion, and otherwise only by the owner. bd-toggle reports it."
+        },
+        {
+          "name": "held",
+          "type": "boolean",
+          "default": false,
+          "description": "A transient hold the owner sets while the pointer or focus is on its slides. The atom holds itself the same way while the pointer or focus is on the dots."
+        }
+      ]
+    },
     {
       "tag": "bd-picture",
       "packageExport": "./picture",
@@ -2767,7 +2914,15 @@
         },
         {
           "name": "fit",
-          "type": "string"
+          "type": "string",
+          "enum": [
+            "cover",
+            "contain",
+            "fill",
+            "none",
+            "scale-down"
+          ],
+          "description": "object-fit for the fallback image. Applied as a class; any other value falls back to \"cover\"."
         },
         {
           "name": "radius",
@@ -2886,7 +3041,8 @@
             "info",
             "success",
             "error"
-          ]
+          ],
+          "description": "Colour of the fill. Unset is the default fill; any other value is cleared."
         }
       ]
     },
@@ -2960,10 +3116,11 @@
           "name": "size",
           "type": "string",
           "enum": [
-            "small",
-            "default",
-            "large"
-          ]
+            "sm",
+            "md",
+            "lg"
+          ],
+          "description": "A size step. small, default and large still resolve, and are rewritten to these."
         },
         {
           "name": "surface",
@@ -3251,7 +3408,8 @@
         },
         {
           "name": "controls",
-          "type": "boolean"
+          "type": "boolean",
+          "description": "Native playback controls, on by default. In HTML, controls=\"false\" turns them off; leaving the attribute out does not. Off only for decoration that is muted and loops."
         },
         {
           "name": "muted",