Skip to content

Commit 6b299e3

Browse files
committed
fix(core): improve api custom elements schema
Update slot descriptions across multiple components for clarity and consistency. Enhanced documentation for slots in Accordion, Avatar, Badge, Card, Chat Message, Copy Button, Dialog, Drawer, Dropdown, Grid, Menu Item, Notification, Toast, and others to specify expected content types and usage. Signed-off-by: Cory Rylan <crylan@nvidia.com>
1 parent d6ce1a6 commit 6b299e3

42 files changed

Lines changed: 952 additions & 224 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎projects/core/src/accordion/accordion.ts‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ import accordionGroupStyleSheet from './accordion-group.css?inline';
3030
* @documentation https://nvidia.github.io/elements/docs/elements/accordion/
3131
* @since 0.12.0
3232
* @entrypoint \@nvidia-elements/core/accordion
33-
* @slot - default content slot
33+
* @slot - Heading text and supporting content that labels the accordion section.
3434
* @slot prefix - slot for prefix content
3535
* @slot suffix - slot for suffix content
3636
* @cssprop --cursor
@@ -57,6 +57,7 @@ export class AccordionHeader extends LitElement {
5757
`;
5858
}
5959

60+
/** @private */
6061
@hostAttr()slot='header';
6162

6263
connectedCallback(){
@@ -101,14 +102,13 @@ export class AccordionContent extends LitElement {
101102
* @command --open - use to open the accordion
102103
* @command --close - use to close the accordion
103104
* @command --toggle - use to toggle the accordion
104-
* @slot - This is a default/unnamed slot for accordion content
105+
* @slot - Content displayed in the collapsible region, typically an `nve-accordion-content` element.
105106
* @slot icon-button - icon elements to display for expand/collapse
106107
* @slot header - header element (Use `accordion-header` or custom content)
107-
* @slot content - content element (Use `accordion-content` or custom content)
108108
* @cssprop --background
109109
* @cssprop --color
110110
* @cssprop --border-radius
111-
* @cssprop --header-padding
111+
* @cssprop --header-padding - Padding around the header content.
112112
* @cssprop --cursor
113113
* @cssprop --transition
114114
* @csspart icon-button - The toggle icon button element
@@ -244,7 +244,9 @@ export class AccordionGroup extends LitElement {
244244
*/
245245
@property({type: Boolean,attribute: 'behavior-expand-single'})behaviorExpandSingle=false;
246246

247-
/** flat (Borderless, container-less accordions), full (default), or inset (Rounded corner, contained accordion) */
247+
/**
248+
* Controls the container style applied to child accordions. `flat` removes the visual container, `inset` adds rounded containment, and omission uses the default divided presentation.
249+
*/
248250
@property({type: String,reflect: true})container?: Extract<Container,'flat'|'inset'>;
249251

250252
staticreadonlymetadata={

‎projects/core/src/avatar/avatar-group.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import styles from './avatar-group.css?inline';
1010
* @description An avatar group displays a collection of user avatars in a compact and organized layout, showcasing many participants or contributors in a space-efficient way.
1111
* @since 1.20.0
1212
* @entrypoint \@nvidia-elements/core/avatar
13-
* @slot - default slot for content
13+
* @slot - `nve-avatar` elements that represent the group members.
1414
* @aria https://www.w3.org/WAI/ARIA/apg/patterns/alert/
1515
*
1616
*/

‎projects/core/src/avatar/avatar.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import styles from './avatar.css?inline';
1414
* @documentation https://nvidia.github.io/elements/docs/elements/avatar/
1515
* @since 1.20.0
1616
* @entrypoint \@nvidia-elements/core/avatar
17-
* @slot - default slot for content
17+
* @slot - Initials, an image, or other content that identifies the represented user or bot.
1818
* @cssprop --background
1919
* @cssprop --color
2020
* @cssprop --border-radius

‎projects/core/src/badge/badge.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ import styles from './badge.css?inline';
2525
* @documentation https://nvidia.github.io/elements/docs/elements/badge/
2626
* @since 0.11.0
2727
* @entrypoint \@nvidia-elements/core/badge
28-
* @slot - default slot for content
28+
* @slot - Short text that communicates the badge status.
2929
* @slot prefix-icon - slot for prefix icon
3030
* @slot suffix-icon - slot for suffix icon
3131
* @cssprop --background

‎projects/core/src/card/card.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ export class Card extends LitElement implements ContainerElement {
5555
* @documentation https://nvidia.github.io/elements/docs/elements/card/
5656
* @since 0.1.3
5757
* @entrypoint \@nvidia-elements/core/card
58-
* @slot - default slot
58+
* @slot - Card title, supporting text, and optional action controls.
5959
* @cssprop --padding
6060
* @cssprop --border-bottom
6161
* @cssprop --line-height
@@ -72,6 +72,7 @@ export class CardHeader extends LitElement {
7272
parents: ['nve-card']
7373
};
7474

75+
/** @private */
7576
@hostAttr()slot='header';
7677

7778
render(){
@@ -133,6 +134,7 @@ export class CardFooter extends LitElement {
133134
parents: ['nve-card']
134135
};
135136

137+
/** @private */
136138
@hostAttr()slot='footer';
137139

138140
render(){

‎projects/core/src/chat-message/chat-message.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import globalStyles from './chat-message.global.css?inline';
1515
* @documentation https://nvidia.github.io/elements/docs/elements/chat-message/
1616
* @since 1.25.0
1717
* @entrypoint \@nvidia-elements/core/chat-message
18-
* @slot - default slot for content
18+
* @slot - The message body displayed between the prefix and suffix content.
1919
* @slot prefix - for avatar/img content
2020
* @slot suffix - for avatar/img content
2121
* @cssprop --background
@@ -37,10 +37,12 @@ export class ChatMessage extends LitElement {
3737
version: '0.0.0'
3838
};
3939

40+
/** Applies a transparent background and reduced horizontal padding for embedding the message in another container. */
4041
@property({type: String,reflect: true})container: 'flat';
4142

4243
@property({type: String,reflect: true})color: Color;
4344

45+
/** Removes the border radius from the selected message corner to indicate the speaker direction. */
4446
@property({type: String,reflect: true,attribute: 'arrow-position'})arrowPosition:
4547
|'top-start'
4648
|'top-end'

‎projects/core/src/copy-button/copy-button.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ import styles from './copy-button.css?inline';
1717
* @documentation https://nvidia.github.io/elements/docs/elements/copy-button/
1818
* @since 1.1.4
1919
* @entrypoint \@nvidia-elements/core/copy-button
20-
* @slot - default
20+
* @slot - Text label displayed before the copy icon.
2121
* @slot icon - slot for custom icon
2222
* @cssprop --color
2323
* @cssprop --background

‎projects/core/src/dialog/dialog.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ import styles from './dialog.css?inline';
2929
* @event toggle - Dispatched on a popover element just after showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/toggle_event)
3030
* @event open - Dispatched when the dialog opens.
3131
* @event close - Dispatched when the dialog closes.
32-
* @slot - default content slot
32+
* @slot - Dialog body content displayed between the header and footer.
3333
* @cssprop --border
3434
* @cssprop --border-radius
3535
* @cssprop --background

‎projects/core/src/drawer/drawer.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ import styles from './drawer.css?inline';
2626
* @event toggle - Dispatched on a popover element just after showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/toggle_event)
2727
* @event open - Dispatched when the drawer opens.
2828
* @event close - Dispatched when the drawer closes.
29-
* @slot - default content slot
29+
* @slot - Drawer body content displayed between the header and footer.
3030
* @cssprop --border
3131
* @cssprop --background
3232
* @cssprop --color

‎projects/core/src/dropdown-group/dropdown-group.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,6 @@ import globalStyles from './dropdown-group.global.css?inline';
2323
* @slot - default slot for dropdown content
2424
* @event open - Dispatched when a dropdown in the group opens
2525
* @event close - Dispatched when a dropdown in the group closes
26-
* @cssprop --nve-dropdown-group-spacing
27-
* @cssprop --nve-dropdown-group-transition
2826
* @cssprop --arrow-transform - Transform applied to the popover arrow
2927
* @aria https://www.w3.org/WAI/ARIA/apg/patterns/menubar/
3028
*/
@@ -114,6 +112,7 @@ export class DropdownGroup extends LitElement {
114112
}
115113
}
116114

115+
/** Closes every descendant dropdown in the group. */
117116
close(){
118117
this.querySelectorAll('nve-dropdown').forEach(d=>d.hidePopover());
119118
}

0 commit comments

Comments
 (0)