Lexicon

Being thoughtful of the words we choose acknowledges the importance of a shared language. Naming something brings it into existence and gives it shape. Words with a consistent understanding help connect the different elements of the system.

In short, it allows us to communicate well.

Please refer to the listing below when applying names to your elements. When in doubt, reach out to the working group for help.

Can't find a word you need? Please collaborate with the working group, reach a consensus, and update the listing before introducing a new term into the codebase.

Aa

...

Cc

Clear

Clear is an action that removes one or more selections from a context.

Not to be confused with Close which implies an ability to open and close an element

Example

Clear is used to describe an event that is dispatched when the target element is removed from its context:

_handleClear() {
  this.dispatchEvent(
    new CustomEvent('clear'),
  );
}

Dd

Ee

End

End signals the logical ending point of an element independent of its orientation. E.g., end in a right-to-left context would appear on the left side of the screen, and in a left-to-right context, it would appear on the right side of the screen.

See also Start

Example

End is used to describe the logical ending slot of a custom element:

<host>
  <slot></slot>
  <slot name="end"></slot>
</host>

End is used to identify the logical ending point of a Styling Hook:

:host {
  --sds-g-foo-spacing-block-end: 1rem;
}

Ff

...

Ss

Start

Start signals the logical beginning of an element independent of its orientation. E.g., start in a right-to-left context would appear on the right side of the screen, and in a left-to-right context, it would appear on the left side of the screen.

See also End

Example

Start is used to describe the logical beginning slot of a custom element:

<host>
  <slot name="start"></slot>
  <slot></slot>
</host>

Start is used to identify the logical beginning of a Styling Hook:

:host {
  --sds-g-foo-spacing-block-start: 1rem;
}

...

Zz