feat: rename tabs and list-item leading/trailing (deprecated) slots t…

…o start/end (#566)

src/dev/pages/tabs/tabs.html

@@ -12,8 +12,8 @@
       { type: 'switch', label: 'Inverted', id: 'opt-inverted' },
       { type: 'switch', label: 'Auto activate', id: 'opt-auto-activate' },
       { type: 'switch', label: 'Scroll buttons', id: 'opt-scroll-buttons' },
-      { type: 'switch', label: 'Show leading icon', id: 'opt-show-leading' },
-      { type: 'switch', label: 'Show trailing icon', id: 'opt-show-trailing' },
+      { type: 'switch', label: 'Show start icon', id: 'opt-show-start' },
+      { type: 'switch', label: 'Show end icon', id: 'opt-show-end' },
       {
         type: 'select',
         label: 'Clustered alignment',

src/dev/pages/tabs/tabs.ts

@@ -71,26 +71,26 @@ scrollButtonsToggle.addEventListener('forge-switch-change', ({ detail: selected
   tabBar.scrollButtons = selected;
 });
 
-const showLeadingToggle = document.getElementById('opt-show-leading') as ISwitchComponent;
-showLeadingToggle.addEventListener('forge-switch-change', ({ detail: selected }) => {
+const showStartToggle = document.getElementById('opt-show-start') as ISwitchComponent;
+showStartToggle.addEventListener('forge-switch-change', ({ detail: selected }) => {
   const tabElements = tabBar.querySelectorAll('forge-tab');
   tabElements.forEach(tab => {
     if (selected) {
-      tab.appendChild(createIcon('favorite', 'leading'));
+      tab.appendChild(createIcon('favorite', 'start'));
     } else {
-      tab.removeChild(tab.querySelector('forge-icon[slot=leading]'));
+      tab.removeChild(tab.querySelector('forge-icon[slot=start]'));
     }
   });
 });
 
-const showTrailingToggle = document.getElementById('opt-show-trailing') as ISwitchComponent;
-showTrailingToggle.addEventListener('forge-switch-change', ({ detail: selected }) => {
+const showEndToggle = document.getElementById('opt-show-end') as ISwitchComponent;
+showEndToggle.addEventListener('forge-switch-change', ({ detail: selected }) => {
   const tabElements = tabBar.querySelectorAll('forge-tab');
   tabElements.forEach(tab => {
     if (selected) {
-      tab.appendChild(createIcon('favorite', 'trailing'));
+      tab.appendChild(createIcon('favorite', 'end'));
     } else {
-      tab.removeChild(tab.querySelector('forge-icon[slot=trailing]'));
+      tab.removeChild(tab.querySelector('forge-icon[slot=end]'));
     }
   });
 });

src/lib/core/styles/tokens/list/list-item/_tokens.scss

@@ -26,8 +26,8 @@ $tokens: (
   // Selected
   selected-color: utils.module-val(list-item, selected-color, theme.variable(primary)),
   selected-opacity: utils.module-val(list-item, selected-opacity, theme.emphasis(lowest)),
-  selected-leading-color: utils.module-ref(list-item, selected-leading-color, selected-color),
-  selected-trailing-color: utils.module-ref(list-item, selected-trailing-color, selected-color),
+  selected-start-color: utils.module-ref(list-item, selected-start-color, selected-color),
+  selected-end-color: utils.module-ref(list-item, selected-end-color, selected-color),
   selected-text-color: utils.module-val(list-item, selected-text-color, theme.variable(text-medium)),
 
   // Disabled
@@ -47,11 +47,11 @@ $tokens: (
   dense-indent: utils.module-val(list-item, dense-indent, spacing.variable(xxlarge)),
   dense-gap: utils.module-val(list-item, dense-gap, spacing.variable(xsmall)),
 
-  // Leading
-  leading-selected-color: utils.module-ref(list-item, leading-selected-color, selected-color),
+  // Start
+  start-selected-color: utils.module-ref(list-item, start-selected-color, selected-color),
 
-  // Trailing
-  trailing-selected-color: utils.module-ref(list-item, trailing-selected-color, selected-color),
+  // end
+  end-selected-color: utils.module-ref(list-item, end-selected-color, selected-color),
 
   // Wrap
   wrap-padding: utils.module-val(list-item, wrap-padding, spacing.variable(xsmall) spacing.variable(medium)),

src/lib/list/list-item/_core.scss

@@ -89,19 +89,19 @@
   }
 }
 
-@mixin leading-selected {
-  color: #{token(leading-selected-color)};
+@mixin start-selected {
+  color: #{token(start-selected-color)};
 }
 
-@mixin trailing-selected {
-  color: #{token(trailing-selected-color)};
+@mixin end-selected {
+  color: #{token(end-selected-color)};
 }
 
 @mixin text-container-selected {
   color: #{token(selected-color)};
 }
 
-@mixin leading-trailing-selected {
+@mixin start-end-selected {
   color: #{token(selected-color)};
 }
 
@@ -156,7 +156,7 @@
   margin-inline-start: #{token(dense-indent)};
 }
 
-@mixin leading-trailing-base {
+@mixin start-end-base {
   color: #{token(text-color)};
   display: inline-flex;
   flex-shrink: 0;

src/lib/list/list-item/list-item-adapter.ts

@@ -25,8 +25,8 @@ export interface IListItemAdapter extends IBaseAdapter<IListItemComponent> {
 export class ListItemAdapter extends BaseAdapter<IListItemComponent> implements IListItemAdapter {
   private readonly _rootElement: HTMLElement;
   private readonly _defaultSlotElement: HTMLSlotElement;
-  private readonly _leadingSlotElement: HTMLSlotElement;
-  private readonly _trailingSlotElement: HTMLSlotElement;
+  private readonly _startSlotElement: HTMLSlotElement;
+  private readonly _endSlotElement: HTMLSlotElement;
   private _focusIndicatorElement: IFocusIndicatorComponent | undefined;
   private _stateLayerElement: IStateLayerComponent | undefined;
   private _disabledAttrObserver: MutationObserver | undefined;
@@ -39,8 +39,8 @@ export class ListItemAdapter extends BaseAdapter<IListItemComponent> implements
     super(component);
     this._rootElement = getShadowElement(component, LIST_ITEM_CONSTANTS.selectors.ROOT);
     this._defaultSlotElement = getShadowElement(component, 'slot:not([name])') as HTMLSlotElement;
-    this._leadingSlotElement = getShadowElement(component, 'slot[name=leading]') as HTMLSlotElement;
-    this._trailingSlotElement = getShadowElement(component, 'slot[name=trailing]') as HTMLSlotElement;
+    this._startSlotElement = getShadowElement(component, 'slot[name=start]') as HTMLSlotElement;
+    this._endSlotElement = getShadowElement(component, 'slot[name=end]') as HTMLSlotElement;
   }
 
   public get interactiveElement(): HTMLElement | HTMLAnchorElement | undefined {
@@ -113,8 +113,8 @@ export class ListItemAdapter extends BaseAdapter<IListItemComponent> implements
   }
 
   private _onSlotChange(evt: Event): void {
-    // We only care about slot changes in the default slot, leading slot, and trailing slot to search for interactive elements
-    const interactiveSlotNames = ['', 'leading', 'trailing'];
+    // We only care about slot changes in the default slot, start/leading slot, and end/trailing slot to search for interactive elements
+    const interactiveSlotNames = ['', 'start', 'end', 'leading', 'trailing'];
     const isInteractiveSlot = interactiveSlotNames.includes((evt.target as HTMLSlotElement).name);
     if (!isInteractiveSlot) {
       return;
@@ -127,10 +127,10 @@ export class ListItemAdapter extends BaseAdapter<IListItemComponent> implements
 
     // We always want to check for form control-like elements first as those take precedence over slotted anchor and button
     // elements as the interactive element.
-    const assignedLeadingElements = this._leadingSlotElement.assignedElements({ flatten: true });
-    const assignedTrailingElements = this._trailingSlotElement.assignedElements({ flatten: true });
-    const assignedLeadingTrailingElements = [...assignedLeadingElements, ...assignedTrailingElements];
-    const slottedFormControl = assignedLeadingTrailingElements.find(e => e.matches(LIST_ITEM_CONSTANTS.selectors.FORM_CONTROL_LIKE)) as HTMLElement | undefined;
+    const assignedStartElements = this._startSlotElement.assignedElements({ flatten: true });
+    const assignedEndElements = this._endSlotElement.assignedElements({ flatten: true });
+    const assignedStartEndElements = [...assignedStartElements, ...assignedEndElements];
+    const slottedFormControl = assignedStartEndElements.find(e => e.matches(LIST_ITEM_CONSTANTS.selectors.FORM_CONTROL_LIKE)) as HTMLElement | undefined;
     if (slottedFormControl) {
       this._attachInteractiveFormControl(slottedFormControl);
       return;

src/lib/list/list-item/list-item-constants.ts

@@ -31,11 +31,11 @@ const ids = {
 
 const selectors = {
   ROOT: `.${classes.ROOT}`,
-  FORM_CONTROL_LIKE: ':is([forge-list-item-interactive],forge-radio,forge-checkbox,forge-switch,input[type=checkbox],input[type=radio]):is([slot=leading],[slot=trailing]):not([forge-ignore])',
+  FORM_CONTROL_LIKE: ':is([forge-list-item-interactive],forge-radio,forge-checkbox,forge-switch,input[type=checkbox],input[type=radio]):is([slot=start],[slot=end],[slot=leading],[slot=trailing]):not([forge-ignore])',
   BUTTON_LIKE: ':is(button,[role=button][tabindex]:not([tabindex=-1]),[forge-list-item-interactive]):not([forge-ignore])',
   IGNORE: '[forge-ignore],[data-forge-ignore]',
   INTERNAL_ANCHOR: `#${ids.INTERNAL_ANCHOR}`,
-  SLOTTED_LEADING_TRAILING: ':is([slot=leading],[slot=trailing])'
+  SLOTTED_START_END: ':is([slot=start],[slot=end],[slot=leading],[slot=trailing])'
 };
 
 const events = {

src/lib/list/list-item/list-item-foundation.ts

@@ -56,13 +56,13 @@ export class ListItemFoundation implements IListItemFoundation {
 
   private _onKeydown(evt: KeyboardEvent): void {
     const composedElements = evt.composedPath().filter((el: Element) => el.nodeType === Node.ELEMENT_NODE);
-    const isFromLeadingTrailingSlot = composedElements.some((el: HTMLElement) => el.matches(LIST_ITEM_CONSTANTS.selectors.SLOTTED_LEADING_TRAILING));
+    const isFromStartEndSlot = composedElements.some((el: HTMLElement) => el.matches(LIST_ITEM_CONSTANTS.selectors.SLOTTED_START_END));
 
     if (evt.key === 'Enter' || evt.key === ' ') {
       evt.stopPropagation();
     }
 
-    if (isFromLeadingTrailingSlot) {
+    if (isFromStartEndSlot) {
       if (evt.key === 'Enter' || evt.key === ' ') {
         this._adapter.animateStateLayer();
       }

src/lib/list/list-item/list-item.html

@@ -1,11 +1,15 @@
 <template>
   <div class="forge-list-item" part="root">
-    <slot name="leading"></slot>
+    <slot name="start">
+      <slot name="leading"></slot>
+    </slot>
     <div class="text-container" part="text-container">
       <slot></slot>
       <slot name="secondary-text"></slot>
       <slot name="tertiary-text"></slot>
     </div>
-    <slot name="trailing"></slot>
+    <slot name="end">
+      <slot name="trailing"></slot>
+    </slot>
   </div>
 </template>

src/lib/list/list-item/list-item.scss

@@ -93,22 +93,26 @@ $_host-tokens: [indent dense-indent disabled-cursor];
   }
 }
 
-// Dense leading/trailing
+// Dense start/end
 :host([selected]) {
   .forge-list-item {
     @include selected;
 
+    ::slotted([slot=start]),
+    ::slotted([slot=end]),
     ::slotted([slot=leading]),
     ::slotted([slot=trailing]) {
-      @include leading-trailing-selected;
+      @include start-end-selected;
     }
 
+    ::slotted([slot=start]),
     ::slotted([slot=leading]) {
-      @include leading-selected;
+      @include start-selected;
     }
 
+    ::slotted([slot=end]),
     ::slotted([slot=trailing]) {
-      @include trailing-selected;
+      @include end-selected;
     }
   }
 
@@ -155,31 +159,35 @@ slot[name=tertiary-text] {
   @include anchor;
 }
 
-// Leading/trailing slotted elements
+// Start/end slotted elements
+::slotted([slot=start]),
+::slotted([slot=end]),
 ::slotted([slot=leading]),
 ::slotted([slot=trailing]) {
-  @include leading-trailing-base;
+  @include start-end-base;
 }
 
 // Interactive slotted form controls to hide state-layer and focus-indicator
 :host(:not([noninteractive])) {
-  ::slotted(:is(forge-checkbox,forge-radio,forge-switch):is([slot=leading],[slot=trailing]):not([forge-ignore])) {
+  ::slotted(:is(forge-checkbox,forge-radio,forge-switch):is([slot=start],[slot=end],[slot=leading],[slot=trailing]):not([forge-ignore])) {
     @include focus-indicator.provide-theme(( display: none ));
     @include state-layer.provide-theme(( display: none ));
   }
 }
 
-// Leading slotted elements
+// Start slotted elements
+::slotted([slot=start]),
 ::slotted([slot=leading]) {
   :host([selected]) & {
-    @include leading-selected;
+    @include start-selected;
   }
 }
 
-// Trailing slotted elements
+// End slotted elements
+::slotted([slot=end]),
 ::slotted([slot=trailing]) {
   :host([selected]) & {
-    @include trailing-selected;
+    @include end-selected;
   }
 }
 

src/lib/list/list-item/list-item.ts

@@ -63,15 +63,10 @@ declare global {
  * @event {CustomEvent<IListItemSelectEventData>} forge-list-item-select - Fires when the list item is selected.
  * 
  * @slot - The primary text.
- * @slot primary-text - The primary text. A named alias for the default slot.
  * @slot secondary-text - The secondary text.
  * @slot tertiary-text - The tertiary text.
- * @slot title - The title element. An alias for the primary-text slot for backwards compatibility.
- * @slot subtitle - The subtitle element. An alias for the secondary-text slot for backwards compatibility.
- * @slot tertiary-title - The tertiary title element. An alias for the tertiary-text slot for backwards compatibility.
- * @slot leading - The leading content.
- * @slot trailing - The trailing element.
- * @slot avatar - The avatar content.
+ * @slot start - The start content.
+ * @slot end - The end element.
  * 
  * @csspart root - The root container element.
  * @csspart text-container - The container for the text content.
@@ -94,8 +89,8 @@ declare global {
  * @cssproperty --forge-list-item-text-line-height - The line height of the text.
  * @cssproperty --forge-list-item-selected-color - The color when in the selected state.
  * @cssproperty --forge-list-item-opacity - The opacity of the background color when in the disabled state.
- * @cssproperty --forge-list-item-selected-leading-color - The color of the leading content when in the selected state.
- * @cssproperty --forge-list-item-selected-trailing-color - The color of the trailing content when in the selected state.
+ * @cssproperty --forge-list-item-selected-start-color - The color of the start content when in the selected state.
+ * @cssproperty --forge-list-item-selected-end-color - The color of the end content when in the selected state.
  * @cssproperty --forge-list-item-selected-text-color - The color of the text when in the selected state.
  * @cssproperty --forge-list-item-disabled-opacity - The opacity of the element when in the disabled state.
  * @cssproperty --forge-list-item-disabled-cursor - The cursor when in the disabled state.
@@ -108,8 +103,8 @@ declare global {
  * @cssproperty --forge-list-item-dense-font-size - The font size when in the dense state.
  * @cssproperty --forge-list-item-dense-indent - The margin inline state when in the dense indented state.
  * @cssproperty --forge-list-item-dense-gap - The gap between the slotted content when in the dense state.
- * @cssproperty --forge-list-item-leading-selected-color - The color of the leading content when in the selected state.
- * @cssproperty --forge-list-item-trailing-selected-color - The color of the trailing content when in the selected state.
+ * @cssproperty --forge-list-item-start-selected-color - The color of the start content when in the selected state.
+ * @cssproperty --forge-list-item-end-selected-color - The color of the end content when in the selected state.
  * @cssproperty --forge-list-item-avatar-background-color - The background color of the avatar container.
  * @cssproperty --forge-list-item-avatar-color - The foreground color of the avatar container.
  * @cssproperty --forge-list-item-avatar-shape - The shape of the avatar container.