srcdev-nuxt-components 9.6.12 → 9.6.14

package/.vscode/srcdev-component-content-docs.code-snippets

@@ -4,49 +4,51 @@
     "scope": "vue,html",
     "body": [
       "<ContentDocs",
-      "  v-model:active-nav-item=\"$1activeNavItem\"",
-      "  v-model:active-page-nav-item=\"$2activePageNavItem\"",
-      "  :docs-nav-items=\"$3docsNavItems\"",
-      "  :docs-page-nav-items=\"$4docsPageNavItems\"",
+      "  v-model:active-nav-item=\"${1:activeNavItem}\"",
+      "  v-model:active-page-nav-item=\"${2:activePageNavItem}\"",
+      "  :docs-nav-items=\"${3:docsNavItems}\"",
+      "  :docs-page-nav-items=\"${4:docsPageNavItems}\"",
       ">",
       "  <template #docsContent>",
-      "    <p>$5Page content goes here.</p>",
+      "    <p>${5:Page content goes here.}</p>",
       "  </template>",
       "</ContentDocs>"
     ]
   },
-  "SRCDEV ContentDocs Custom Labels" : {
+  "SRCDEV ContentDocs Custom Labels": {
     "description": "ContentDocs with custom docsNav / docsPageNav panel headings",
     "scope": "vue,html",
     "body": [
       "<ContentDocs",
-      "  v-model:active-nav-item=\"$1activeNavItem\"",
-      "  v-model:active-page-nav-item=\"$2activePageNavItem\"",
-      "  :docs-nav-items=\"$3docsNavItems\"",
-      "  :docs-page-nav-items=\"$4docsPageNavItems\"",
-      "  docs-nav-label=\"$5Sections\"",
-      "  docs-page-nav-label=\"$6Contents\"",
+      "  v-model:active-nav-item=\"${1:activeNavItem}\"",
+      "  v-model:active-page-nav-item=\"${2:activePageNavItem}\"",
+      "  :docs-nav-items=\"${3:docsNavItems}\"",
+      "  :docs-page-nav-items=\"${4:docsPageNavItems}\"",
+      "  docs-nav-label=\"${5:Sections}\"",
+      "  docs-page-nav-label=\"${6:Contents}\"",
       ">",
       "  <template #docsContent>",
-      "    <p>$7Page content goes here.</p>",
+      "    <p>${7:Page content goes here.}</p>",
       "  </template>",
       "</ContentDocs>"
     ]
   },
   "SRCDEV ContentDocs Localised Nav Labels": {
-    "description": "ContentDocs with localised aria-labels on the docsNav/docsPageNav <nav> landmarks",
+    "description": "ContentDocs with localised headings and aria-labels on the docsNav/docsPageNav <nav> landmarks",
     "scope": "vue,html",
     "body": [
       "<ContentDocs",
-      "  v-model:active-nav-item=\"$1activeNavItem\"",
-      "  v-model:active-page-nav-item=\"$2activePageNavItem\"",
-      "  :docs-nav-items=\"$3docsNavItems\"",
-      "  :docs-page-nav-items=\"$4docsPageNavItems\"",
-      "  docs-nav-aria-label=\"${5:Docs navigation}\"",
-      "  docs-page-nav-aria-label=\"${6:On this page}\"",
+      "  v-model:active-nav-item=\"${1:activeNavItem}\"",
+      "  v-model:active-page-nav-item=\"${2:activePageNavItem}\"",
+      "  :docs-nav-items=\"${3:docsNavItems}\"",
+      "  :docs-page-nav-items=\"${4:docsPageNavItems}\"",
+      "  :docs-nav-label=\"${5:t('docs.navLabel')}\"",
+      "  :docs-page-nav-label=\"${6:t('docs.pageNavLabel')}\"",
+      "  :docs-nav-aria-label=\"${7:t('docs.navAriaLabel')}\"",
+      "  :docs-page-nav-aria-label=\"${8:t('docs.pageNavAriaLabel')}\"",
       ">",
       "  <template #docsContent>",
-      "    <p>$7Page content goes here.</p>",
+      "    <p>${9:Page content goes here.}</p>",
       "  </template>",
       "</ContentDocs>"
     ]
@@ -56,11 +58,11 @@
     "scope": "typescript,vue",
     "body": [
       "const docsNavItems: DocsNavItem[] = [",
-      "  { label: \"$1Getting started\", to: \"$2/docs\" },",
+      "  { label: \"${1:Getting started}\", to: \"${2:/docs}\" },",
       "];",
       "",
       "const docsPageNavItems: DocsNavItem[] = [",
-      "  { label: \"$3Overview\", to: \"$2/docs#overview\" },",
+      "  { label: \"${3:Overview}\", to: \"${2:/docs}#overview\" },",
       "];",
       "",
       "const activeNavItem = ref<string | undefined>(docsNavItems[0]?.to);",
@@ -72,11 +74,11 @@
     "scope": "typescript,vue",
     "body": [
       "const docsNavItems: DocsNavItem[] = [",
-      "  { label: \"$1Getting started\", to: \"$2/docs\", icon: \"$3lucide:rocket\" },",
+      "  { label: \"${1:Getting started}\", to: \"${2:/docs}\", icon: \"${3:lucide:rocket}\" },",
       "];",
       "",
       "const docsPageNavItems: DocsNavItem[] = [",
-      "  { label: \"$4Overview\", to: \"$2/docs#overview\", icon: \"$5lucide:list\" },",
+      "  { label: \"${4:Overview}\", to: \"${2:/docs}#overview\", icon: \"${5:lucide:list}\" },",
       "];",
       "",
       "const activeNavItem = ref<string | undefined>(docsNavItems[0]?.to);",
@@ -87,13 +89,11 @@
     "description": "CSS override scaffold for ContentDocs nav-link icon tokens (gap, size, and start/end order)",
     "scope": "css",
     "body": [
-      ".$1my-content-docs {",
-      "  .content-docs {",
-      "    --content-docs-link-icon-gap: $2;",
-      "    --content-docs-link-icon-size: $3;",
-      "    --content-docs-nav-link-icon-order: $4rtl; /* icon at the end */",
-      "    --content-docs-page-nav-link-icon-order: $5ltr; /* icon at the start (default) */",
-      "  }",
+      ".${1:my-content-docs} {",
+      "  --content-docs-link-icon-gap: $2;",
+      "  --content-docs-link-icon-size: $3;",
+      "  --content-docs-nav-link-icon-order: ${4:rtl}; /* icon at the end */",
+      "  --content-docs-page-nav-link-icon-order: ${5:ltr}; /* icon at the start (default) */",
       "}"
     ]
   },
@@ -101,27 +101,26 @@
     "description": "CSS override scaffold for ContentDocs heading/panel/link tokens, applied to both docsNav and docsPageNav at once",
     "scope": "css",
     "body": [
-      ".$1my-content-docs {",
-      "  .content-docs {",
-      "    --content-docs-heading-font-size: $2;",
-      "    --content-docs-heading-color: $3;",
-      "    --content-docs-heading-bg: $4;",
-      "    --content-docs-heading-padding-block: $5;",
+      ".${1:my-content-docs} {",
+      "  --content-docs-heading-font-size: $2;",
+      "  --content-docs-heading-color: $3;",
+      "  --content-docs-heading-bg: $4;",
+      "  --content-docs-heading-padding-block: $5;",
       "",
-      "    --content-docs-panel-bg: $6;",
-      "    --content-docs-panel-padding-block: $7;",
-      "    --content-docs-panel-padding-inline: $8;",
+      "  --content-docs-panel-bg: $6;",
+      "  --content-docs-panel-padding-block: $7;",
+      "  --content-docs-panel-padding-inline: $8;",
       "",
-      "    --content-docs-link-font-size: $9;",
-      "    --content-docs-link-color: $10;",
-      "    --content-docs-link-hover-bg: $11;",
-      "    --content-docs-link-active-bg: $12;",
-      "    --content-docs-link-active-color: $13;",
+      "  --content-docs-link-font-size: $9;",
+      "  --content-docs-link-color: $10;",
+      "  --content-docs-link-hover-bg: $11;",
+      "  --content-docs-link-active-bg: $12;",
+      "  --content-docs-link-active-color: $13;",
+      "  --content-docs-link-focus-outline-color: $14;",
       "",
-      "    --content-docs-nav-column-width: $14;",
-      "    --content-docs-page-nav-column-width: $15;",
-      "    --content-docs-page-nav-column-width-tablet: $16;",
-      "  }",
+      "  --content-docs-nav-column-width: $15;",
+      "  --content-docs-page-nav-column-width: $16;",
+      "  --content-docs-page-nav-column-width-tablet: $17;",
       "}"
     ]
   },
@@ -129,17 +128,27 @@
     "description": "CSS override scaffold for independently theming docsNav vs docsPageNav heading/panel/link tokens",
     "scope": "css",
     "body": [
-      ".$1my-content-docs {",
-      "  .content-docs {",
-      "    /* docsNav (primary) */",
-      "    --content-docs-nav-heading-color: $2;",
-      "    --content-docs-nav-panel-bg: $3;",
-      "    --content-docs-nav-link-active-bg: $4;",
+      ".${1:my-content-docs} {",
+      "  /* docsNav (primary) */",
+      "  --content-docs-nav-heading-color: $2;",
+      "  --content-docs-nav-panel-bg: $3;",
+      "  --content-docs-nav-link-active-bg: $4;",
       "",
-      "    /* docsPageNav (on-this-page / secondary) */",
-      "    --content-docs-page-nav-heading-color: $5;",
-      "    --content-docs-page-nav-panel-bg: $6;",
-      "    --content-docs-page-nav-link-active-bg: $7;",
+      "  /* docsPageNav (on-this-page / secondary) */",
+      "  --content-docs-page-nav-heading-color: $5;",
+      "  --content-docs-page-nav-panel-bg: $6;",
+      "  --content-docs-page-nav-link-active-bg: $7;",
+      "}"
+    ]
+  },
+  "SRCDEV ContentDocs CSS Override — Active Link": {
+    "description": "Style the active ContentDocs link beyond its tokens: select [aria-current=\"page\"], there is no .is-active class",
+    "scope": "css",
+    "body": [
+      ".${1:my-content-docs} {",
+      "  .content-docs-nav-link[aria-current=\"page\"],",
+      "  .content-docs-page-nav-link[aria-current=\"page\"] {",
+      "    $2",
       "  }",
       "}"
     ]

package/.vscode/srcdev-component-display-dialog.code-snippets

@@ -19,7 +19,7 @@
     ]
   },
   "SRCDEV DisplayDialog Confirm Template": {
-    "description": "DisplayDialog confirm variant — content-sized, requires explicit action",
+    "description": "DisplayDialog confirm variant — compact (max 48rem), dismissable with Escape or outside-click",
     "scope": "vue,html",
     "body": [
       "<DisplayDialog",
@@ -114,10 +114,12 @@
       "    --display-dialog-backdrop-blur: ;",
       "    --display-dialog-transition-duration: ;",
       "",
-      "    .inner {",
-      "      .header {}",
-      "      .dialog-content {}",
-      "      .footer {}",
+      "    --display-dialog-header-accent-color: ;",
+      "",
+      "    .display-dialog-inner {",
+      "      .display-dialog-header {}",
+      "      .display-dialog-content {}",
+      "      .display-dialog-footer {}",
       "    }",
       "  }",
       "}"

package/.vscode/srcdev-component-display-qr-code.code-snippets

@@ -15,8 +15,19 @@
       "  aria-label=\"$2\"",
       "  black-color=\"${3:currentColor}\"",
       "  :radius=\"${4:0.5}\"",
-      "  :variant=\"{ inner: '${5|default,circle,rounded,dots,classy,classy-rounded|}', marker: '${6|default,circle,rounded,dots,classy,classy-rounded|}', pixel: '${7|default,circle,rounded,dots,classy,classy-rounded|}' }\"",
+      "  :variant=\"{ inner: '${5|default,circle,rounded,dots,pixelated|}', marker: '${6|default,circle,rounded,dots,pixelated|}', pixel: '${7|default,circle,rounded,dots,pixelated|}' }\"",
       "/>"
     ]
+  },
+  "SRCDEV DisplayQrCode Fallback": {
+    "description": "DisplayQrCode with a fallback for values too long to encode",
+    "scope": "vue,html",
+    "body": [
+      "<DisplayQrCode :qr-value=\"${1:url}\" aria-label=\"${2:QR code}\" @error=\"${3:onQrError}\">",
+      "  <template #fallback>",
+      "    $0",
+      "  </template>",
+      "</DisplayQrCode>"
+    ]
   }
 }

package/.vscode/srcdev-component-display-tooltip-rich.code-snippets

@@ -0,0 +1,50 @@
+{
+  "SRCDEV DisplayTooltipRich Basic": {
+    "description": "DisplayTooltipRich — structured title/body/action tooltip",
+    "scope": "vue,html",
+    "body": [
+      "<DisplayTooltipRich",
+      "  :content-text=\"{",
+      "    tooltipTitle: { tag: 'h4', text: '$1' },",
+      "    tooltipContent: { tag: 'p', text: '$0' },",
+      "  }\"",
+      "/>"
+    ]
+  },
+  "SRCDEV DisplayTooltipRich Localised Copy": {
+    "description": "DisplayTooltipRich with localised trigger/close-button copy and a custom trigger icon",
+    "scope": "vue,html",
+    "body": [
+      "<DisplayTooltipRich",
+      "  :content-text=\"{",
+      "    tooltipTitle: { tag: 'h4', text: '$1' },",
+      "    tooltipContent: { tag: 'p', text: '$2' },",
+      "  }\"",
+      "  trigger-aria-label=\"${3:Toggle the popover}\"",
+      "  close-button-text=\"${4:Close}\"",
+      "  close-button-aria-label=\"${5:Close tool tip}\"",
+      "  trigger-icon=\"${6:fa7-solid:circle-question}\"",
+      "/>"
+    ]
+  },
+  "SRCDEV DisplayTooltipRich CSS Override": {
+    "description": "CSS override scaffold for DisplayTooltipRich, scoped to a page or section class",
+    "scope": "css",
+    "body": [
+      ".${1:my-page} {",
+      "  .display-tooltip-rich {",
+      "    --display-tooltip-rich-content-gap: ;",
+      "    --display-tooltip-rich-title-colour: ;",
+      "    --display-tooltip-rich-title-font-size: ;",
+      "    --display-tooltip-rich-title-line-clamp: ${2:none};",
+      "    --display-tooltip-rich-body-font-size: ;",
+      "    --display-tooltip-rich-body-line-clamp: ${3:none};",
+      "    --display-tooltip-rich-action-colour: ;",
+      "    --display-tooltip-rich-action-line-clamp: ${4:none};",
+      "    --display-tooltip-popover-background-colour: ;",
+      "    --display-tooltip-popover-text-colour: ;",
+      "  }",
+      "}"
+    ]
+  }
+}

package/.vscode/srcdev-component-display-tooltip.code-snippets

@@ -34,5 +34,36 @@
       "  </template>",
       "</DisplayTooltip>"
     ]
+  },
+  "SRCDEV DisplayTooltip Custom Icon": {
+    "description": "DisplayTooltip with a custom trigger icon and localised label",
+    "scope": "vue,html",
+    "body": [
+      "<DisplayTooltip trigger-icon=\"${1:lucide:info}\" trigger-aria-label=\"${2:More information}\">",
+      "  <template #triggerContent>",
+      "    <span>$3</span>",
+      "  </template>",
+      "  <template #tooltipContent>",
+      "    <p>$0</p>",
+      "  </template>",
+      "</DisplayTooltip>"
+    ]
+  },
+  "SRCDEV DisplayTooltip CSS Override": {
+    "description": "CSS override scaffold for DisplayTooltip, scoped to a page or section class",
+    "scope": "css",
+    "body": [
+      ".${1:my-page} {",
+      "  .display-tooltip {",
+      "    --display-tooltip-trigger-icon-box-size: ;",
+      "    --display-tooltip-trigger-icon-colour: ;",
+      "    --display-tooltip-popover-width: ;",
+      "    --display-tooltip-popover-background-colour: ;",
+      "    --display-tooltip-popover-text-colour: ;",
+      "    --display-tooltip-popover-outline-colour: ;",
+      "    --display-tooltip-popover-border-radius: ;",
+      "  }",
+      "}"
+    ]
   }
 }

package/.vscode/srcdev-component-hero-text.code-snippets

@@ -4,11 +4,27 @@
     "scope": "vue,html",
     "body": [
       "<HeroText",
-      "  tag=\"$1h1\"",
-      "  fontSize=\"$2title\"",
-      "  :textContent=\"[",
-      "    { text: '$3Designing', styleClass: 'normal' },",
-      "    { text: '$4Artistry', styleClass: 'accent' },",
+      "  tag=\"${1|h1,h2,h3,h4,h5,h6|}\"",
+      "  font-size=\"${2|title,display,heading,subheading,label|}\"",
+      "  :text-content=\"[",
+      "    { text: '${3:Designing}', styleClass: 'normal' },",
+      "    { text: '${4:Artistry}', styleClass: 'accent' },",
+      "  ]\"",
+      "/>"
+    ]
+  },
+  "SRCDEV HeroText Vertical With Icon": {
+    "description": "HeroText stacked vertically with a decorative icon",
+    "scope": "vue,html",
+    "body": [
+      "<HeroText",
+      "  tag=\"${1|h2,h1,h3,h4,h5,h6|}\"",
+      "  axis=\"vertical\"",
+      "  icon=\"${2:lucide:sparkles}\"",
+      "  font-size=\"${3|display,title,heading,subheading,label|}\"",
+      "  :text-content=\"[",
+      "    { text: '${4:Modern}', styleClass: 'normal' },",
+      "    { text: '${5:Living}', styleClass: 'accent' },",
       "  ]\"",
       "/>"
     ]

package/.vscode/srcdev-component-link-text.code-snippets

@@ -19,11 +19,11 @@
     "description": "CSS override scaffold for LinkText tokens",
     "scope": "css",
     "body": [
-      ".$1my-page {",
+      ".${1:my-page} {",
       "  --link-text-colour: $2;",
       "  --link-text-colour-hover: $3;",
-      "  --link-text-decoration: $4underline;",
-      "  --link-text-decoration-hover: $5none;",
+      "  --link-text-decoration: ${4:underline};",
+      "  --link-text-decoration-hover: ${5:none};",
       "}"
     ]
   }

package/.vscode/srcdev-component-pop-over.code-snippets

@@ -40,5 +40,33 @@
       "  </template>",
       "</PopOver>"
     ]
+  },
+  "SRCDEV PopOver Localised Close": {
+    "description": "PopOver with a localised close label and a custom close icon",
+    "scope": "vue,html",
+    "body": [
+      "<PopOver close-button-aria-label=\"${1:Close}\" close-icon=\"${2:lucide:x}\">",
+      "  <template #trigger>",
+      "    <span>$3</span>",
+      "  </template>",
+      "  <template #content>",
+      "    <p>$0</p>",
+      "  </template>",
+      "</PopOver>"
+    ]
+  },
+  "SRCDEV PopOver CSS Overrides": {
+    "description": "Unlayered CSS override scaffold for PopOver public tokens",
+    "scope": "css,vue",
+    "body": [
+      ".${1:my-section} {",
+      "  --pop-over-width: ${2:30rem};",
+      "  --pop-over-gap: ${3:1rem};",
+      "  --pop-over-background-colour: ${4:var(--slate-00)};",
+      "  --pop-over-text-colour: ${5:var(--slate-09)};",
+      "  --pop-over-border-colour: ${6:var(--slate-02)};",
+      "  --pop-over-content-padding: ${7:1.6rem};$0",
+      "}"
+    ]
   }
 }

package/.vscode/srcdev-component-skip-links.code-snippets

@@ -34,7 +34,7 @@
     "description": "CSS override scaffold for SkipLinks — scope to a page or section class",
     "scope": "css",
     "body": [
-      ".$1my-page {",
+      ".${1:my-page} {",
       "  .skip-links {",
       "    --skip-links-z-index: ;",
       "    --skip-links-gap: ;",

package/app/components/01.atoms/banner-video/BannerVideo.vue

@@ -5,7 +5,7 @@
     :class="elementClasses"
     :data-depth="depth"
     :style="{
-      '--_aspect-ratio': aspectRatio,
+      '--_aspect-ratio': safeAspectRatio,
       '--_align-self': verticalPosition,
       '--_justify-self': horizontalPosition,
     }"
@@ -13,7 +13,7 @@
     <video
       :key="src"
       ref="videoEl"
-      class="video"
+      class="banner-video-media"
       autoplay
       muted
       loop
@@ -30,7 +30,7 @@
       <source :src="src" type="video/mp4" />
     </video>
     <NuxtImg
-      class="fallback"
+      class="banner-video-fallback"
       :src="poster"
       :alt="alt"
       :width="imgWidth"
@@ -40,16 +40,19 @@
       decoding="async"
       :style="{ objectFit: props.objectFit, objectPosition: imgObjectPosition }"
     />
-    <button
+    <InputButton
       type="button"
-      class="banner-video__toggle"
-      :aria-label="isPlaying ? 'Pause background video' : 'Play background video'"
+      variant="inline"
+      :button-text="isPlaying ? pauseLabel : playLabel"
+      style-class-passthrough="banner-video-toggle"
       @click="togglePlayback"
     >
-      <slot name="toggle-icon" :is-playing="isPlaying">
-        <Icon :name="isPlaying ? pauseIcon : playIcon" aria-hidden="true" />
-      </slot>
-    </button>
+      <template #iconOnly>
+        <slot name="toggle-icon" :is-playing="isPlaying">
+          <Icon :name="isPlaying ? pauseIcon : playIcon" aria-hidden="true" />
+        </slot>
+      </template>
+    </InputButton>
   </component>
 </template>
 
@@ -68,6 +71,10 @@ interface Props {
   horizontalPosition?: "start" | "center" | "end";
   playIcon?: string;
   pauseIcon?: string;
+  /** Toggle button label while paused — override for localisation. */
+  playLabel?: string;
+  /** Toggle button label while playing — override for localisation. */
+  pauseLabel?: string;
   styleClassPassthrough?: string | string[];
 }
 
@@ -83,9 +90,22 @@ const props = withDefaults(defineProps<Props>(), {
   horizontalPosition: "center",
   playIcon: "mdi:play",
   pauseIcon: "mdi:pause",
+  playLabel: "Play background video",
+  pauseLabel: "Pause background video",
   styleClassPassthrough: () => [],
 });
 
+const DEFAULT_ASPECT_RATIO = "21/9";
+const ratioPattern = /^\s*(\d*\.?\d+)\s*(?:\/\s*(\d*\.?\d+)\s*)?$/;
+
+const safeAspectRatio = computed(() => {
+  const match = ratioPattern.exec(props.aspectRatio ?? "");
+  if (!match) return DEFAULT_ASPECT_RATIO;
+  const width = Number(match[1]);
+  const height = match[2] === undefined ? 1 : Number(match[2]);
+  return width > 0 && height > 0 ? props.aspectRatio.trim() : DEFAULT_ASPECT_RATIO;
+});
+
 const positionKeywordMap = {
   vertical: { start: "top", center: "center", end: "bottom" },
   horizontal: { start: "left", center: "center", end: "right" },
@@ -123,7 +143,7 @@ const tryPlay = async () => {
     v.muted = true;
     await v.play();
   } catch {
-    // Autoplay blocked or interrupted — fallback image will remain visible
+    // Autoplay blocked or interrupted: the video's poster stays visible
   }
 };
 
@@ -162,7 +182,7 @@ onActivated(() => {
 
     display: grid;
     grid-template-areas: "media";
-    aspect-ratio: var(--_aspect-ratio, 16/9);
+    aspect-ratio: var(--_aspect-ratio, 21/9);
     max-height: var(--_max-height);
     width: 100%;
     overflow: hidden;
@@ -183,7 +203,7 @@ onActivated(() => {
       --_max-height: var(--banner-video-max-height-xl, clamp(52rem, 65vw, 90rem));
     }
 
-    .video {
+    .banner-video-media {
       grid-area: media;
       display: block;
       width: 100%;
@@ -193,24 +213,26 @@ onActivated(() => {
       justify-self: var(--_justify-self, center);
     }
 
-    .fallback {
+    .banner-video-fallback {
       grid-area: media;
       display: none;
       width: 100%;
       height: 100%;
     }
 
-    .banner-video__toggle {
+    .banner-video-toggle.input-button {
       grid-area: media;
       align-self: end;
       justify-self: end;
       margin: var(--banner-video-toggle-offset, 1.2rem);
       z-index: 1;
 
+      box-sizing: border-box;
       display: grid;
       place-items: center;
       width: var(--banner-video-toggle-size, 3.2rem);
       height: var(--banner-video-toggle-size, 3.2rem);
+      min-height: auto;
       padding: 0;
 
       background-color: var(--banner-video-toggle-background, oklch(0% 0 0 / 0.4));
@@ -220,20 +242,30 @@ onActivated(() => {
       cursor: pointer;
       transition: background-color 0.2s ease;
 
-      &:hover,
+      & .input-button-icon {
+        margin: 0;
+      }
+
+      &:hover {
+        background-color: var(--banner-video-toggle-background-hover, oklch(0% 0 0 / 0.6));
+      }
+
       &:focus-visible {
         background-color: var(--banner-video-toggle-background-hover, oklch(0% 0 0 / 0.6));
+        outline: var(--banner-video-toggle-focus-outline-width, 2px) solid
+          var(--banner-video-toggle-focus-outline-color, currentColor);
+        outline-offset: var(--banner-video-toggle-focus-outline-offset, 2px);
       }
     }
 
     @media (prefers-reduced-motion: reduce) {
-      .video {
+      .banner-video-media {
         display: none;
       }
-      .fallback {
+      .banner-video-fallback {
         display: block;
       }
-      .banner-video__toggle {
+      .banner-video-toggle.input-button {
         display: none;
       }
     }