feat(media): init

knip.config.js

@@ -160,6 +160,7 @@ export default {
       entry: [
         ...PACKAGE_FILES,
         ...SOURCE_INDEX,
+        ...EXAMPLE_ENTRIES,
         ...TEST_ENTRIES,
         ...TEST_VARIANT_ENTRIES,
         ...VITE_CONFIGS,

package.json

@@ -156,6 +156,7 @@
         "release:lint",
         "release:labs-forms",
         "release:markdown",
+        "release:media",
         "release:monaco",
         "release:styles"
       ]

projects/forms/src/mixins/checkbox.test.ts

@@ -206,6 +206,15 @@ describe('CheckboxFormControlMixin', () => {
     expect(element.checked).toBe(false);
   });
 
+  it('should not toggle when the event default is prevented', () => {
+    const event = new Event('click', { cancelable: true });
+    event.preventDefault();
+
+    element.toggle(event);
+
+    expect(element.checked).toBe(false);
+  });
+
   it('should request updates for checkbox state changes', () => {
     vi.spyOn(element, 'requestUpdate');
 

projects/forms/src/mixins/checkbox.ts

@@ -39,7 +39,7 @@ export interface CheckboxFormControlMixinInstance extends FormControlMixinInstan
   /**
    * Toggles the checked state.
    */
-  toggle(): void;
+  toggle(event?: Event): void;
 }
 
 export type CheckboxFormControlMixinReturn<TBase extends Constructor> = (new (
@@ -196,8 +196,8 @@ export function CheckboxFormControlMixin<TBase extends Constructor>(
       this.checkValidity();
     }
 
-    toggle() {
-      if (this.disabled || this.readOnly) {
+    toggle(event?: Event) {
+      if (this.disabled || this.readOnly || event?.defaultPrevented) {
         return;
       }
 

projects/internals/metadata/package.json

@@ -109,6 +109,8 @@
         "../../forms/dist/custom-elements.json",
         "../../markdown/package.json",
         "../../markdown/dist/custom-elements.json",
+        "../../media/package.json",
+        "../../media/dist/custom-elements.json",
         "../../monaco/package.json",
         "../../monaco/dist/custom-elements.json",
         "../../patterns/package.json",
@@ -142,6 +144,10 @@
           "script": "../../markdown:build",
           "cascade": false
         },
+        {
+          "script": "../../media:build",
+          "cascade": false
+        },
         {
           "script": "../../monaco:build",
           "cascade": false
@@ -171,6 +177,9 @@
         "../../markdown/package.json",
         "../../markdown/README.md",
         "../../markdown/CHANGELOG.md",
+        "../../media/package.json",
+        "../../media/README.md",
+        "../../media/CHANGELOG.md",
         "../../monaco/package.json",
         "../../monaco/README.md",
         "../../monaco/CHANGELOG.md",
@@ -212,6 +221,11 @@
         "../../markdown/coverage/unit/summary.json",
         "../../markdown/coverage/visual/summary.json",
         "../../markdown/coverage/ssr/summary.json",
+        "../../media/coverage/unit/coverage-summary.json",
+        "../../media/coverage/unit/summary.json",
+        "../../media/coverage/axe/summary.json",
+        "../../media/coverage/visual/summary.json",
+        "../../media/coverage/ssr/summary.json",
         "../../monaco/coverage/unit/coverage-summary.json",
         "../../monaco/coverage/unit/summary.json",
         "../../monaco/coverage/visual/summary.json",
@@ -259,6 +273,22 @@
           "script": "../../markdown:test:coverage",
           "cascade": false
         },
+        {
+          "script": "../../media:test:coverage",
+          "cascade": false
+        },
+        {
+          "script": "../../media:test:axe",
+          "cascade": false
+        },
+        {
+          "script": "../../media:test:ssr",
+          "cascade": false
+        },
+        {
+          "script": "../../media:test:visual",
+          "cascade": false
+        },
         {
           "script": "../../monaco:test:coverage",
           "cascade": false
@@ -291,7 +321,8 @@
         "../../monaco/dist/**/*.examples.json",
         "../../code/dist/**/*.examples.json",
         "../../forms/dist/**/*.examples.json",
-        "../../markdown/dist/**/*.examples.json"
+        "../../markdown/dist/**/*.examples.json",
+        "../../media/dist/**/*.examples.json"
       ],
       "output": [
         "static/examples.json"
@@ -321,6 +352,10 @@
           "script": "../../monaco:build",
           "cascade": false
         },
+        {
+          "script": "../../media:build",
+          "cascade": false
+        },
         {
           "script": "../patterns:build",
           "cascade": false

projects/internals/metadata/src/services/api.service.test.ts

@@ -1,7 +1,8 @@
 // SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.
 // SPDX-License-Identifier: Apache-2.0
 
-import { describe, expect, it } from 'vitest';
+import MiniSearch from 'minisearch';
+import { describe, expect, it, vi } from 'vitest';
 import { ApiService } from './api.service.js';
 
 describe('ApiService', () => {
@@ -41,7 +42,12 @@ describe('ApiService', () => {
   });
 
   it('should prioritize exact matches over fuzzy matches', async () => {
+    const searchSpy = vi.spyOn(MiniSearch.prototype, 'search').mockReturnValue([
+      { id: 'nve-button-group', terms: ['button'], queryTerms: ['button'], score: 2, match: {} },
+      { id: 'nve-button', terms: ['button'], queryTerms: ['button'], score: 1, match: {} }
+    ]);
     const results = await ApiService.search('nve-button');
+    searchSpy.mockRestore();
 
     expect(results[0]?.name).toBe('nve-button');
   });

projects/internals/metadata/src/tasks/api.utils.test.ts

@@ -4,8 +4,65 @@
 import { describe, expect, it } from 'vitest';
 import { getApi } from './api.utils.js';
 
+type Api = Awaited<ReturnType<typeof getApi>>;
+type ApiElement = Api['data']['elements'][number];
+
+function getElement(api: Api, name: string) {
+  return api.data.elements.find(element => element.name === name);
+}
+
+function getMember(element: ApiElement | undefined, name: string) {
+  return element?.manifest?.members.find(member => member.name === name);
+}
+
+function getAttribute(element: ApiElement | undefined, name: string) {
+  return element?.manifest?.attributes?.find(attribute => attribute.name === name);
+}
+
 describe('ApiUtils', () => {
   it('should return the api json', async () => {
     expect(getApi).toBeDefined();
   });
+
+  it('should include attribute names for inherited button members', async () => {
+    const api = await getApi();
+    const button = getElement(api, 'nve-button');
+
+    expect(getMember(button, 'pressed')?.attribute).toBe('pressed');
+    expect(getMember(button, 'readOnly')?.attribute).toBe('readonly');
+    expect(getMember(button, 'commandForElement')?.attribute).toBe('commandfor');
+    expect(button?.markdown).toContain('| readOnly (readonly) |');
+  });
+
+  it('should project checkbox and button mixin APIs onto media mute button', async () => {
+    const api = await getApi();
+    const muteButton = getElement(api, 'nve-media-mute-button');
+
+    expect(getMember(muteButton, 'pressed')?.attribute).toBe('pressed');
+    expect(getMember(muteButton, 'checked')?.attribute).toBe('checked');
+    expect(getMember(muteButton, 'readOnly')?.attribute).toBe('readonly');
+    expect(getMember(muteButton, 'commandForElement')?.attribute).toBe('commandfor');
+    expect(getAttribute(muteButton, 'commandForElement')).toBeUndefined();
+    expect(muteButton?.markdown).toContain('| checked |');
+  });
+
+  it('should project slider mixin APIs onto media time range', async () => {
+    const api = await getApi();
+    const timeRange = getElement(api, 'nve-media-time-range');
+
+    expect(getMember(timeRange, 'min')?.attribute).toBe('min');
+    expect(getMember(timeRange, 'valueAsNumber')?.attribute).toBeUndefined();
+    expect(getAttribute(timeRange, 'commandForElement')).toBeUndefined();
+    expect(timeRange?.markdown).toContain('| valueAsNumber |');
+  });
+
+  it('should project select mixin APIs onto media playback rate select', async () => {
+    const api = await getApi();
+    const playbackRateSelect = getElement(api, 'nve-media-playback-rate-select');
+
+    expect(getMember(playbackRateSelect, 'selectedIndex')?.attribute).toBeUndefined();
+    expect(getMember(playbackRateSelect, 'value')?.attribute).toBe('value');
+    expect(getAttribute(playbackRateSelect, 'commandForElement')).toBeUndefined();
+    expect(playbackRateSelect?.markdown).toContain('| selectedIndex |');
+  });
 });

projects/internals/metadata/src/tasks/api.utils.ts

@@ -133,6 +133,7 @@ export async function getApi(): Promise<{
     '../../../../themes',
     '../../../../code',
     '../../../../markdown',
+    '../../../../media',
     '../../../../monaco'
   ];