fix(core): remove deprecations

Signed-off-by: Cory Rylan <crylan@nvidia.com>

Author: coryrylan

projects/core/.visual/accordion.dark.png

@@ -88,9 +88,6 @@ export const ICON_IMPORTS = {\n${sortIconKeys(Object.keys(icons))
 
 export type IconName = keyof typeof ICON_IMPORTS;
 
-/** @deprecated */
-export type IconNames = IconName;
-
 export const ICON_NAMES = Object.keys(ICON_IMPORTS) as IconName[];
 `,
       { encoding: 'utf-8' },

projects/core/.visual/accordion.png

@@ -14,35 +14,9 @@
   justify-content: space-between;
   align-items: center;
   gap: var(--nve-ref-space-xs);
+}
 
-  ::slotted([slot='title']) {
-    margin: 0;
-    font-size: var(--nve-ref-font-size-200);
-    font-weight: var(--nve-ref-font-weight-medium);
-  }
-
-  ::slotted([slot='subtitle']) {
-    margin: 0;
-    font-size: var(--nve-ref-font-size-100);
-    font-weight: var(--nve-ref-font-weight-regular);
-    color: var(--nve-sys-text-muted-color);
-  }
-
-  ::part(icon-button) {
-    --width: var(--nve-ref-size-400);
-    --height: var(--nve-ref-size-400);
-  }
-
-  #titles {
-    display: flex;
-    flex-direction: column;
-    gap: var(--nve-ref-space-xxxs);
-  }
-
-  #actions {
-    display: flex;
-    flex-direction: row;
-    gap: var(--nve-ref-space-xs);
-    margin-inline-start: auto;
-  }
+slot:not([name]) {
+  display: block;
+  flex: 1;
 }

projects/core/build/icons.js

@@ -36,12 +36,6 @@
   padding: var(--header-padding);
 }
 
-[internal-host].has-action #header {
-  flex-direction: row-reverse;
-  justify-content: start;
-  gap: var(--nve-ref-space-xxs);
-}
-
 #content {
   display: block;
   height: 0;

projects/core/src/accordion/accordion-header.css

@@ -19,7 +19,7 @@ export const Default = {
 <nve-accordion-group behavior-expand>
   <nve-accordion>
     <nve-accordion-header>
-      <h2 nve-text="heading xs medium" slot="prefix">Workspace Settings</h2>
+      <h2 nve-text="heading xs medium">Workspace Settings</h2>
     </nve-accordion-header>
     <nve-accordion-content>Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content>
   </nve-accordion>
@@ -196,26 +196,6 @@ export const NestedOpenEvent = {
   `
 };
 
-/**
- * @summary Legacy slot patterns (title, subtitle, actions) for backward compatibility. Deprecated in favor of prefix/suffix slots for more flexible content layout, but maintained to support existing implementations during migration.
- * @tags test-case
-*/
-export const DeprecatedSlots = {
-  /* eslint-disable @nvidia-elements/lint/no-deprecated-slots */
-  /* eslint-disable @nvidia-elements/lint/no-unexpected-slot-value */
-  render: () => html`
-    <nve-accordion behavior-expand>
-      <nve-accordion-header>
-        <div slot="title">Project Details</div>
-        <div slot="subtitle">Last modified today</div>
-        <nve-icon-button container="flat" icon-name="add" size="sm" slot="actions"></nve-icon-button>
-        <nve-icon-button container="flat" icon-name="delete" size="sm" slot="actions"></nve-icon-button>
-      </nve-accordion-header>
-      <nve-accordion-content>Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content>
-    </nve-accordion>
-  `
-};
-
 /**
  * @summary Basic accordion component for collapsible content sections with expand/collapse functionality.
  * @tags test-case
@@ -254,4 +234,4 @@ export const Multiple = {
   </nve-accordion>
 </nve-accordion-group>
   `
-};
+};

projects/core/src/accordion/accordion.css

@@ -1,7 +1,7 @@
 <template name="Accordion" prefix="accordion" description="Basic accordion with title and content slot." type="pattern">
   <nve-accordion behavior-expand container="${1:flat}">
     <nve-accordion-header>
-      <div slot="title">${2:Title}</div>
+      <div>${2:Title}</div>
     </nve-accordion-header>
 
     <nve-accordion-content> ${3:Content} </nve-accordion-content>
@@ -16,10 +16,10 @@
   type="pattern">
   <nve-accordion behavior-expand container="${1:flat}">
     <nve-accordion-header>
-      <div slot="title">${2:Title}</div>
+      <div>${2:Title}</div>
 
-      <nve-icon-button container="flat" icon-name="${3:add}" size="sm" slot="actions"></nve-icon-button>
-      <nve-icon-button container="flat" icon-name="${4:delete}" size="sm" slot="actions"></nve-icon-button>
+      <nve-icon-button container="flat" icon-name="${3:add}" size="sm" slot="suffix"></nve-icon-button>
+      <nve-icon-button container="flat" icon-name="${4:delete}" size="sm" slot="suffix"></nve-icon-button>
     </nve-accordion-header>
 
     <nve-accordion-content> ${5:Content} </nve-accordion-content>
@@ -35,23 +35,23 @@
   <nve-accordion-group behavior-expand-single container="${1:flat}">
     <nve-accordion>
       <nve-accordion-header>
-        <div slot="title">${2:Title}</div>
+        <div>${2:Title}</div>
       </nve-accordion-header>
 
       <nve-accordion-content> ${3:Content} </nve-accordion-content>
     </nve-accordion>
 
     <nve-accordion>
       <nve-accordion-header>
-        <div slot="title">${4:Title}</div>
+        <div>${4:Title}</div>
       </nve-accordion-header>
 
       <nve-accordion-content> ${5:Content} </nve-accordion-content>
     </nve-accordion>
 
     <nve-accordion>
       <nve-accordion-header>
-        <div slot="title">${6:Title}</div>
+        <div>${6:Title}</div>
       </nve-accordion-header>
 
       <nve-accordion-content> ${7:Content} </nve-accordion-content>

projects/core/src/accordion/accordion.examples.ts

@@ -249,15 +249,13 @@ describe(`${Accordion.metadata.tag} - Actions`, () => {
   let fixture: HTMLElement;
   let element: Accordion;
 
-  /* eslint-disable @nvidia-elements/lint/no-deprecated-slots */
-  /* eslint-disable @nvidia-elements/lint/no-unexpected-slot-value */
   beforeEach(async () => {
     fixture = await createFixture(html`
     <nve-accordion-group>
       <nve-accordion>
         <nve-accordion-header>
           heading
-          <nve-icon-button container="flat" icon-name="add" size="sm" slot="actions"></nve-icon-button>
+          <nve-icon-button container="flat" icon-name="add" size="sm" slot="suffix"></nve-icon-button>
         </nve-accordion-header>
         <nve-accordion-content>content</nve-accordion-content>
       </nve-accordion>
@@ -271,16 +269,45 @@ describe(`${Accordion.metadata.tag} - Actions`, () => {
     removeFixture(fixture);
   });
 
-  it('should align caret icon button to left side if an action is provided by consumer', () => {
-    expect(element.shadowRoot.querySelector('.has-action')).toBeTruthy();
+  it('should not align caret icon button to left side if an action is provided by consumer', () => {
+    expect(element.shadowRoot.querySelector('.has-suffix')).toBeNull();
   });
 
-  it('should keep the action caret pointing down when expanded', async () => {
+  it('should not align caret icon button to left side for suffix content outside the assigned header', async () => {
+    removeFixture(fixture);
+    fixture = await createFixture(html`
+    <nve-accordion>
+      <nve-accordion-header>heading</nve-accordion-header>
+      <nve-accordion-content>
+        content
+        <nve-accordion-header>
+          nested heading
+          <span slot="suffix">nested suffix</span>
+        </nve-accordion-header>
+      </nve-accordion-content>
+    </nve-accordion>
+    `);
+    element = fixture.querySelector<Accordion>(Accordion.metadata.tag);
+    await elementIsStable(element);
+
+    expect(element.shadowRoot.querySelector('.has-suffix')).toBeNull();
+  });
+
+  it('should point the action caret up when expanded', async () => {
     element.expanded = true;
     await elementIsStable(element);
 
     const iconButton = element.shadowRoot.querySelector<IconButton>(IconButton.metadata.tag);
-    expect(iconButton.direction).toBe('down');
+    expect(iconButton.direction).toBe('up');
+  });
+
+  it('should not render deprecated header slots', async () => {
+    const header = fixture.querySelector<AccordionHeader>(AccordionHeader.metadata.tag);
+    await elementIsStable(header);
+
+    expect(header.shadowRoot.querySelector('slot[name="title"]')).toBeNull();
+    expect(header.shadowRoot.querySelector('slot[name="subtitle"]')).toBeNull();
+    expect(header.shadowRoot.querySelector('slot[name="actions"]')).toBeNull();
   });
 });
 

projects/core/src/accordion/accordion.snippets.html

@@ -16,9 +16,6 @@ describe('accordion visual', () => {
   });
 });
 
-/* eslint-disable @nvidia-elements/lint/no-deprecated-slots */
-/* eslint-disable @nvidia-elements/lint/no-unexpected-slot-value */
-
 function template(theme: '' | 'dark' = '') {
   return /* html */ `
   <script type="module">
@@ -81,8 +78,10 @@ function template(theme: '' | 'dark' = '') {
 
   <nve-accordion>
     <nve-accordion-header>
-      <div slot="title">•︎•︎•︎</div>
-      <div slot="subtitle">•︎•︎•︎</div>
+      <div>
+        <div>•︎•︎•︎</div>
+        <div>•︎•︎•︎</div>
+      </div>
       <nve-icon-button container="flat" icon-name="add" size="sm" slot="suffix"></nve-icon-button>
       <nve-icon-button container="flat" icon-name="delete" size="sm" slot="suffix"></nve-icon-button>
     </nve-accordion-header>

projects/core/src/accordion/accordion.test.ts

@@ -32,9 +32,6 @@ import accordionGroupStyleSheet from './accordion-group.css?inline';
  * @slot - default content slot
  * @slot prefix - slot for prefix content
  * @slot suffix - slot for suffix content
- * @slot title - (deprecated)
- * @slot subtitle - (deprecated)
- * @slot actions - (deprecated)
  * @cssprop --cursor
  * @aria https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/
  */
@@ -53,14 +50,7 @@ export class AccordionHeader extends LitElement {
     return html`
       <div internal-host>
         <slot name="prefix"></slot>
-        <div id="titles">
-          <slot name="title"></slot>
-          <slot name="subtitle"></slot>
-        </div>
         <slot></slot>
-        <div id="actions">
-          <slot name="actions"></slot>
-        </div>
         <slot name="suffix"></slot>
       </div>
     `;
@@ -168,11 +158,6 @@ export class Accordion extends LitElement implements ContainerElement {
    */
   @property({ type: Boolean, attribute: 'behavior-expand' }) behaviorExpand = false;
 
-  get #hasAction(): boolean {
-    return !!(this?.querySelectorAll ? Array.from(this?.querySelectorAll<HTMLSlotElement>('[slot="actions"]')) : [])
-      .length;
-  }
-
   get #header() {
     return this.shadowRoot?.querySelector<HTMLSlotElement>('slot[name=header]')?.assignedElements()[0];
   }
@@ -185,7 +170,7 @@ export class Accordion extends LitElement implements ContainerElement {
 
   render() {
     return html`
-      <div internal-host class=${this.#hasAction ? 'has-action' : ''}>
+      <div internal-host>
         <div id="header"
           @click=${(e: Event) => this.#toggle(e.target as HTMLElement)}
           .ariaLabel=${this.expanded ? this.i18n.close : this.i18n.expand}
@@ -199,7 +184,7 @@ export class Accordion extends LitElement implements ContainerElement {
               id="internal-trigger"
               container="inline"
               icon-name="caret"
-              direction=${this.expanded ? (this.#hasAction ? 'down' : 'up') : this.#hasAction ? 'right' : 'down'}
+              direction=${this.expanded ? 'up' : 'down'}
               ?disabled=${this.disabled}
               ?pressed=${this.expanded}
               .expanded=${this.expanded}