js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 04:09:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor parts and exported parts

Browse Source
This commit is contained in:
Cory LaViska
2022-03-09 15:54:18 -05:00
parent c5fe481c33
commit a5cd9a4968
45 changed files with 180 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
docs/assets/plugins/metadata/metadata.js
View File

@@ -7,6 +7,7 @@
function createPropsTable(props) {
const table = document.createElement('table');
table.classList.add('metadata-table');
table.innerHTML = `
<thead>
<tr>
@@ -64,6 +65,7 @@
function createEventsTable(events) {
const table = document.createElement('table');
table.classList.add('metadata-table');
table.innerHTML = `
<thead>
<tr>
@@ -94,6 +96,7 @@
function createMethodsTable(methods) {
const table = document.createElement('table');
table.classList.add('metadata-table');
table.innerHTML = `
<thead>
<tr>
@@ -132,6 +135,7 @@
function createSlotsTable(slots) {
const table = document.createElement('table');
table.classList.add('metadata-table');
table.innerHTML = `
<thead>
<tr>
@@ -158,6 +162,7 @@
function createCustomPropertiesTable(styles) {
const table = document.createElement('table');
table.classList.add('metadata-table');
table.innerHTML = `
<thead>
<tr>
@@ -186,6 +191,7 @@
function createPartsTable(parts) {
const table = document.createElement('table');
table.classList.add('metadata-table');
table.innerHTML = `
<thead>
<tr>
@@ -212,6 +218,7 @@
function createAnimationsTable(animations) {
const table = document.createElement('table');
table.classList.add('metadata-table');
table.innerHTML = `
<thead>
<tr>
@@ -456,6 +463,8 @@
result += `
## Properties
${createPropsTable(props)}
_Learn more about [properties and attributes](/getting-started/usage#properties)._
`;
}
@@ -463,6 +472,8 @@
result += `
## Events
${createEventsTable(component.events)}
_Learn more about [listening to events](/getting-started/usage#events)._
`;
}
@@ -470,18 +481,9 @@
result += `
## Methods
<p data-flavor="html">
Methods can be called by obtaining a reference to the element and calling
<code>el.methodName()</code>.
</p>
<p data-flavor="react">
Methods can be called by obtaining a <code>ref</code> to the element and calling
<code>ref.current.methodName()</code>.
</p>
${createMethodsTable(methods)}
_Learn more about [calling methods](/getting-started/usage#methods)._
`;
}
@@ -489,6 +491,8 @@
result += `
## Slots
${createSlotsTable(component.slots)}
_Learn more about [using slots](/getting-started/usage#slots)._
`;
}
@@ -496,6 +500,8 @@
result += `
## CSS Custom Properties
${createCustomPropertiesTable(component.cssProperties)}
_Learn more about [customizing CSS Custom Properties](/getting-started/customizing#custom-properties)._
`;
}
@@ -503,6 +509,8 @@
result += `
## CSS Parts
${createPartsTable(component.cssParts)}
_Learn more about [customizing CSS Parts](/getting-started/customizing#component-parts)._
`;
}
@@ -511,7 +519,7 @@
## Animations
${createAnimationsTable(component.animations)}
Learn how to [customize animations](/getting-started/customizing#animations).
_Learn more about [customizing animations](/getting-started/customizing#animations)._
`;
}

4
docs/assets/styles/docs.css
View File

@@ -437,6 +437,10 @@ kbd,
cursor: help;
}
.markdown-section .metadata-table {
margin-bottom: 0rem;
}
/* Iframes */
.markdown-section iframe {
border: none;

9
docs/resources/changelog.md
View File

@@ -8,6 +8,15 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
## Next
- 🚨 BREAKING: refactored exported parts to ensure composed components and their parts can be targeted via CSS
- Refactored the `eye-dropper-button` part and added `eye-dropper-button__base`, `eye-dropper-button__prefix`, `eye-dropper-button__label`, `eye-dropper-button__suffix`, and `eye-dropper-button__caret` parts to `<sl-color-picker>`
- Refactored the `format-button` part and added `format-button__base`, `format-button__prefix`, `format-button__label`, `format-button__suffix`, and `format-button__caret` parts to `<sl-color-picker>`
- Moved the `close-button` part in `<sl-alert>` to the internal `<sl-icon-button>` and removed the `<span>` that wrapped it
- Moved the `close-button` part in `<sl-dialog>` and `<sl-drawer>` to point to the host element and added the `close-button__base` part
- Renamed parts in `<sl-select>` from `tag-base` to `tag__base`, `tag-content` to `tag__content`, and `tag-remove-button` to `tag__remove-button`
- Moved the `close-button` part in `<sl-tab>` to the internal `<sl-icon-button>` and added the `close-button__base` part
- Moved the `scroll-button` part in `<sl-tab-group>` to the internal `<sl-icon-button>` and added the `scroll-button__base`, `scroll-button--start`, and `scroll-button--end` parts
- Moved the `remove-button` part in `<sl-tag>` to the internal `<sl-icon-button>` and added the `remove-button__base` part
- 🚨 BREAKING: removed `checked-icon` part from `<sl-menu-item>` in preparation for parts refactor
- 🚨 BREAKING: changed the `typeToSelect()` method's argument from `String` to `KeyboardEvent` in `<sl-menu>` to support more advanced key combinations
- Added `form`, `formaction`, `formmethod`, `formnovalidate`, and `formtarget` attributes to `<sl-button>` [#699](https://github.com/shoelace-style/shoelace/issues/699)

18
docs/resources/contributing.md
View File

@@ -262,6 +262,24 @@ Parts let you target a specific element inside the component's shadow DOM but, b
This convention can be relaxed when the developer experience is greatly improved by not following these suggestions.
### Naming CSS Parts
While CSS parts can be named [virtually anything](https://www.abeautifulsite.net/posts/valid-names-for-css-parts/), within Shoelace they must use the kebab-case convention and lowercase letters. Modifiers must be delimited by `--` like in BEM. This is useful for allowing users to target parts with various states, such as `my-part--focus`.
When composing elements, use `part` to export the host element and `exportparts` to export its parts.
```js
render() {
return html`
<div part="base">
<sl-icon part="icon" exportparts="base:icon__base" ...></sl-icon>
</div>
`;
}
```
This results in a consistent, easy to understand structure for parts. In this example, the `icon` part will target the host element and the `icon__base` part will target the icon's `base` part.
### Form Controls
Form controls should support submission and validation through the following conventions:

1
scripts/plop/plopfile.js
View File

@@ -1,6 +1,5 @@
export default function (plop) {
plop.setHelper('tagWithoutPrefix', tag => tag.replace(/^sl-/, ''));
plop.setHelper('tagToHumanReadableName', tag => tag.replace(/^sl-/, '').replace(/-/g, ' '));
plop.setHelper('tagToTitle', tag => {
const withoutPrefix = plop.getHelper('tagWithoutPrefix');

2
scripts/plop/templates/component/component.hbs
View File

@@ -15,7 +15,7 @@ import styles from './{{ tagWithoutPrefix tag }}.styles';
* @slot - The default slot.
* @slot example - An example slot.
*
* @csspart {{ tagWithoutPrefix tag }} - The internal wrapper for the {{ tagToHumanReadableName tag }}.
* @csspart base - The component's internal wrapper.
*
* @cssproperty --example - An example CSS custom property.
*/

12
src/components/alert/alert.styles.ts
View File

@@ -28,15 +28,17 @@ export default css`
margin: inherit;
}
.alert:not(.alert--has-icon) .alert__icon,
.alert:not(.alert--closable) .alert__close-button {
display: none;
}
.alert__icon {
flex: 0 0 auto;
display: flex;
align-items: center;
font-size: var(--sl-font-size-large);
}
.alert__icon ::slotted(*) {
margin-left: var(--sl-spacing-large);
padding-left: var(--sl-spacing-large);
}
.alert--primary {
@@ -85,7 +87,7 @@ export default css`
overflow: hidden;
}
.alert__close {
.alert__close-button {
flex: 0 0 auto;
display: flex;
align-items: center;

22
src/components/alert/alert.ts
View File

@@ -4,6 +4,7 @@ import { classMap } from 'lit/directives/class-map.js';
import '~/components/icon-button/icon-button';
import { animateTo, stopAnimations } from '~/internal/animate';
import { emit, waitForEvent } from '~/internal/event';
import { HasSlotController } from '~/internal/slot';
import { watch } from '~/internal/watch';
import { getAnimation, setDefaultAnimation } from '~/utilities/animation-registry';
import styles from './alert.styles';
@@ -24,10 +25,11 @@ const toastStack = Object.assign(document.createElement('div'), { className: 'sl
* @event sl-hide - Emitted when the alert closes.
* @event sl-after-hide - Emitted after the alert closes and all animations are complete.
*
* @csspart base - The component's base wrapper.
* @csspart base - The component's internal wrapper.
* @csspart icon - The container that wraps the alert icon.
* @csspart message - The alert message.
* @csspart close-button - The close button.
* @csspart close-button__base - The close button's `base` part.
*
* @cssproperty --box-shadow - The alert's box shadow.
*
@@ -40,6 +42,7 @@ export default class SlAlert extends LitElement {
static styles = styles;
private autoHideTimeout: number;
private readonly hasSlotController = new HasSlotController(this, 'icon', 'suffix');
@query('[part="base"]') base: HTMLElement;
@@ -177,6 +180,7 @@ export default class SlAlert extends LitElement {
alert: true,
'alert--open': this.open,
'alert--closable': this.closable,
'alert--has-icon': this.hasSlotController.test('icon'),
'alert--primary': this.variant === 'primary',
'alert--success': this.variant === 'success',
'alert--neutral': this.variant === 'neutral',
@@ -199,14 +203,14 @@ export default class SlAlert extends LitElement {
${this.closable
? html`
<span class="alert__close">
<sl-icon-button
exportparts="base:close-button"
name="x"
library="system"
@click=${this.handleCloseClick}
></sl-icon-button>
</span>
<sl-icon-button
part="close-button"
exportparts="base:close-button__base"
class="alert__close-button"
name="x"
library="system"
@click=${this.handleCloseClick}
></sl-icon-button>
`
: ''}
</div>

2
src/components/avatar/avatar.ts
View File

@@ -12,7 +12,7 @@ import styles from './avatar.styles';
*
* @slot icon - The default icon to use when no image or initials are present.
*
* @csspart base - The component's base wrapper.
* @csspart base - The component's internal wrapper.
* @csspart icon - The container that wraps the avatar icon.
* @csspart initials - The container that wraps the avatar initials.
* @csspart image - The avatar image.

2
src/components/badge/badge.ts
View File

@@ -9,7 +9,7 @@ import styles from './badge.styles';
*
* @slot - The badge's content.
*
* @csspart base - The base wrapper
* @csspart base - The component's internal wrapper.
*/
@customElement('sl-badge')
export default class SlBadge extends LitElement {

2
src/components/breadcrumb-item/breadcrumb-item.ts
View File

@@ -15,7 +15,7 @@ import styles from './breadcrumb-item.styles';
* @slot separator - The separator to use for the breadcrumb item. This will only change the separator for this item. If
* you want to change it for all items in the group, set the separator on `<sl-breadcrumb>` instead.
*
* @csspart base - The component's base wrapper.
* @csspart base - The component's internal wrapper.
* @csspart label - The breadcrumb item's label.
* @csspart prefix - The container that wraps the prefix slot.
* @csspart suffix - The container that wraps the suffix slot.

2
src/components/breadcrumb/breadcrumb.ts
View File

@@ -13,7 +13,7 @@ import styles from './breadcrumb.styles';
*
* @dependency sl-icon
*
* @csspart base - The component's base wrapper.
* @csspart base - The component's internal wrapper.
*/
@customElement('sl-breadcrumb')
export default class SlBreadcrumb extends LitElement {

2
src/components/button-group/button-group.ts
View File

@@ -8,7 +8,7 @@ import styles from './button-group.styles';
*
* @slot - One or more `<sl-button>` elements to display in the button group.
*
* @csspart base - The component's base wrapper.
* @csspart base - The component's internal wrapper.
*/
@customElement('sl-button-group')
export default class SlButtonGroup extends LitElement {

2
src/components/button/button.ts
View File

@@ -22,7 +22,7 @@ import styles from './button.styles';
* @slot prefix - Used to prepend an icon or similar element to the button.
* @slot suffix - Used to append an icon or similar element to the button.
*
* @csspart base - The component's base wrapper.
* @csspart base - The component's internal wrapper.
* @csspart prefix - The prefix container.
* @csspart label - The button's label.
* @csspart suffix - The suffix container.

2
src/components/card/card.ts
View File

@@ -13,7 +13,7 @@ import styles from './card.styles';
* @slot footer - The card's footer.
* @slot image - The card's image.
*
* @csspart base - The component's base wrapper.
* @csspart base - The component's internal wrapper.
* @csspart image - The card's image, if present.
* @csspart header - The card's header, if present.
* @csspart body - The card's body.

2
src/components/checkbox/checkbox.ts
View File

@@ -18,7 +18,7 @@ import styles from './checkbox.styles';
* @event sl-change - Emitted when the control's checked state changes.
* @event sl-focus - Emitted when the control gains focus.
*
* @csspart base - The component's base wrapper.
* @csspart base - The component's internal wrapper.
* @csspart control - The checkbox control.
* @csspart checked-icon - The container the wraps the checked icon.
* @csspart indeterminate-icon - The container that wraps the indeterminate icon.

37
src/components/color-picker/color-picker.ts
View File

@@ -43,7 +43,7 @@ declare const EyeDropper: EyeDropperConstructor;
*
* @event sl-change Emitted when the color picker's value changes.
*
* @csspart base - The component's base wrapper
* @csspart base - The component's internal wrapper.
* @csspart trigger - The color picker's dropdown trigger.
* @csspart swatches - The container that holds swatches.
* @csspart swatch - Each individual swatch.
@@ -55,8 +55,18 @@ declare const EyeDropper: EyeDropperConstructor;
* @csspart slider-handle - Hue and opacity slider handles.
* @csspart preview - The preview color.
* @csspart input - The text input.
* @csspart eye-dropper-button - The toggle format button's base.
* @csspart format-button - The toggle format button's base.
* @csspart eye-dropper-button - The eye dropper button.
* @csspart eye-dropper-button__button - The eye dropper button's `button` part.
* @csspart eye-dropper-button__prefix - The eye dropper button's `prefix` part.
* @csspart eye-dropper-button__label - The eye dropper button's `label` part.
* @csspart eye-dropper-button__button-suffix - The eye dropper button's `suffix` part.
* @csspart eye-dropper-button__caret - The eye dropper button's `caret` part.
* @csspart format-button - The format button.
* @csspart format-button__button - The format button's `button` part.
* @csspart format-button__prefix - The format button's `prefix` part.
* @csspart format-button__label - The format button's `label` part.
* @csspart format-button__button-suffix - The format button's `suffix` part.
* @csspart format-button__caret - The format button's `caret` part.
*
* @cssproperty --grid-width - The width of the color grid.
* @cssproperty --grid-height - The height of the color grid.
@@ -732,8 +742,15 @@ export default class SlColorPicker extends LitElement {
${!this.noFormatToggle
? html`
<sl-button
part="format-button"
aria-label=${this.localize.term('toggleColorFormat')}
exportparts="base:format-button"
exportparts="
base:format-button__base,
prefix:format-button__prefix,
label:format-button__label,
suffix:format-button__suffix,
caret:format-button__caret
"
@click=${this.handleFormatToggle}
>
${this.setLetterCase(this.format)}
@@ -742,7 +759,17 @@ export default class SlColorPicker extends LitElement {
: ''}
${hasEyeDropper
? html`
<sl-button exportparts="base:eye-dropper-button" @click=${this.handleEyeDropper}>
<sl-button
part="eye-dropper-button"
exportparts="
base:eye-dropper-button__base,
prefix:eye-dropper-button__prefix,
label:eye-dropper-button__label,
suffix:eye-dropper-button__suffix,
caret:eye-dropper-button__caret
"
@click=${this.handleEyeDropper}
>
<sl-icon
library="system"
name="eyedropper"

2
src/components/details/details.ts
View File

@@ -22,7 +22,7 @@ import styles from './details.styles';
* @event sl-hide - Emitted when the details closes.
* @event sl-after-hide - Emitted after the details closes and all animations are complete.
*
* @csspart base - The component's base wrapper.
* @csspart base - The component's internal wrapper.
* @csspart header - The summary header.
* @csspart summary - The details summary.
* @csspart summary-icon - The expand/collapse summary icon.

6
src/components/dialog/dialog.ts
View File

@@ -34,12 +34,13 @@ import styles from './dialog.styles';
* `event.preventDefault()` will keep the dialog open. Avoid using this unless closing the dialog will result in
* destructive behavior such as data loss.
*
* @csspart base - The component's base wrapper.
* @csspart base - The component's internal wrapper.
* @csspart overlay - The overlay.
* @csspart panel - The dialog panel (where the dialog and its content is rendered).
* @csspart header - The dialog header.
* @csspart title - The dialog title.
* @csspart close-button - The close button.
* @csspart close-button__base - The close button's `base` part.
* @csspart body - The dialog body.
* @csspart footer - The dialog footer.
*
@@ -251,7 +252,8 @@ export default class SlDialog extends LitElement {
<slot name="label"> ${this.label.length > 0 ? this.label : String.fromCharCode(65279)} </slot>
</h2>
<sl-icon-button
exportparts="base:close-button"
part="close-button"
exportparts="base:close-button__base"
class="dialog__close"
name="x"
label=${this.localize.term('close')}

6
src/components/drawer/drawer.ts
View File

@@ -35,12 +35,13 @@ import styles from './drawer.styles';
* `event.preventDefault()` will keep the drawer open. Avoid using this unless closing the drawer will result in
* destructive behavior such as data loss.
*
* @csspart base - The component's base wrapper.
* @csspart base - The component's internal wrapper.
* @csspart overlay - The overlay.
* @csspart panel - The drawer panel (where the drawer and its content is rendered).
* @csspart header - The drawer header.
* @csspart title - The drawer title.
* @csspart close-button - The close button.
* @csspart close-button__base - The close button's `base` part.
* @csspart body - The drawer body.
* @csspart footer - The drawer footer.
*
@@ -278,7 +279,8 @@ export default class SlDrawer extends LitElement {
<slot name="label"> ${this.label.length > 0 ? this.label : String.fromCharCode(65279)} </slot>
</h2>
<sl-icon-button
exportparts="base:close-button"
part="close-button"
exportparts="base:close-button__base"
class="drawer__close"
name="x"
label=${this.localize.term('close')}

2
src/components/dropdown/dropdown.ts
View File

@@ -24,7 +24,7 @@ import styles from './dropdown.styles';
* @event sl-hide - Emitted when the dropdown closes.
* @event sl-after-hide - Emitted after the dropdown closes and all animations are complete.
*
* @csspart base - The component's base wrapper.
* @csspart base - The component's internal wrapper.
* @csspart trigger - The container that wraps the trigger.
* @csspart panel - The panel that gets shown when the dropdown is open.
*

2
src/components/icon-button/icon-button.ts
View File

@@ -11,7 +11,7 @@ import styles from './icon-button.styles';
*
* @dependency sl-icon
*
* @csspart base - The component's base wrapper.
* @csspart base - The component's internal wrapper.
*/
@customElement('sl-icon-button')
export default class SlIconButton extends LitElement {

2
src/components/icon/icon.ts
View File

@@ -17,7 +17,7 @@ const parser = new DOMParser();
* @event sl-load - Emitted when the icon has loaded.
* @event {{ status: number }} sl-error - Emitted when the icon fails to load due to an error.
*
* @csspart base - The component's base wrapper.
* @csspart base - The component's internal wrapper.
*/
@customElement('sl-icon')
export default class SlIcon extends LitElement {

2
src/components/image-comparer/image-comparer.ts
View File

@@ -20,7 +20,7 @@ import styles from './image-comparer.styles';
*
* @event sl-change - Emitted when the position changes.
*
* @csspart base - The component's base wrapper.
* @csspart base - The component's internal wrapper.
* @csspart before - The container that holds the "before" image.
* @csspart after - The container that holds the "after" image.
* @csspart divider - The divider that separates the images.

2
src/components/input/input.ts
View File

@@ -30,7 +30,7 @@ import styles from './input.styles';
* @event sl-focus - Emitted when the control gains focus.
* @event sl-blur - Emitted when the control loses focus.
*
* @csspart base - The component's base wrapper.
* @csspart base - The component's internal wrapper.
* @csspart form-control - The form control that wraps the label, input, and help-text.
* @csspart label - The input label.
* @csspart input - The input control.

2
src/components/menu-item/menu-item.ts
View File

@@ -15,7 +15,7 @@ import styles from './menu-item.styles';
* @slot prefix - Used to prepend an icon or similar element to the menu item.
* @slot suffix - Used to append an icon or similar element to the menu item.
*
* @csspart base - The component's base wrapper.
* @csspart base - The component's internal wrapper.
* @csspart prefix - The prefix container.
* @csspart label - The menu item label.
* @csspart suffix - The suffix container.

2
src/components/menu-label/menu-label.ts
View File

@@ -8,7 +8,7 @@ import styles from './menu-label.styles';
*
* @slot - The menu label's content.
*
* @csspart base - The component's base wrapper.
* @csspart base - The component's internal wrapper.
*/
@customElement('sl-menu-label')
export default class SlMenuLabel extends LitElement {

2
src/components/menu/menu.ts
View File

@@ -17,7 +17,7 @@ export interface MenuSelectEventDetail {
*
* @event {{ item: SlMenuItem }} sl-select - Emitted when a menu item is selected.
*
* @csspart base - The component's base wrapper.
* @csspart base - The component's internal wrapper.
*/
@customElement('sl-menu')
export default class SlMenu extends LitElement {

2
src/components/progress-bar/progress-bar.ts
View File

@@ -12,7 +12,7 @@ import styles from './progress-bar.styles';
*
* @slot - A label to show inside the indicator.
*
* @csspart base - The component's base wrapper.
* @csspart base - The component's internal wrapper.
* @csspart indicator - The progress bar indicator.
* @csspart label - The progress bar label.
*

2
src/components/progress-ring/progress-ring.ts
View File

@@ -9,7 +9,7 @@ import styles from './progress-ring.styles';
*
* @slot - A label to show inside the ring.
*
* @csspart base - The component's base wrapper.
* @csspart base - The component's internal wrapper.
* @csspart label - The progress ring label.
*
* @cssproperty --size - The diameter of the progress ring (cannot be a percentage).

2
src/components/qr-code/qr-code.ts
View File

@@ -9,7 +9,7 @@ import styles from './qr-code.styles';
* @since 2.0
* @status stable
*
* @csspart base - The component's base wrapper.
* @csspart base - The component's internal wrapper.
*/
@customElement('sl-qr-code')
export default class SlQrCode extends LitElement {

2
src/components/radio-group/radio-group.ts
View File

@@ -11,7 +11,7 @@ import styles from './radio-group.styles';
* @slot - The default slot where radio controls are placed.
* @slot label - The radio group label. Required for proper accessibility. Alternatively, you can use the label prop.
*
* @csspart base - The component's base wrapper.
* @csspart base - The component's internal wrapper.
* @csspart label - The radio group label.
*/
@customElement('sl-radio-group')

2
src/components/radio/radio.ts
View File

@@ -18,7 +18,7 @@ import styles from './radio.styles';
* @event sl-change - Emitted when the control's checked state changes.
* @event sl-focus - Emitted when the control gains focus.
*
* @csspart base - The component's base wrapper.
* @csspart base - The component's internal wrapper.
* @csspart control - The radio control.
* @csspart checked-icon - The container the wraps the checked icon.
* @csspart label - The radio label.

2
src/components/range/range.ts
View File

@@ -20,7 +20,7 @@ import styles from './range.styles';
* @event sl-blur - Emitted when the control loses focus.
* @event sl-focus - Emitted when the control gains focus.
*
* @csspart base - The component's base wrapper.
* @csspart base - The component's internal wrapper.
* @csspart input - The native range input.
* @csspart tooltip - The range tooltip.
*

2
src/components/rating/rating.ts
View File

@@ -17,7 +17,7 @@ import styles from './rating.styles';
*
* @event sl-change - Emitted when the rating's value changes.
*
* @csspart base - The component's base wrapper.
* @csspart base - The component's internal wrapper.
*
* @cssproperty --symbol-color - The inactive color for symbols.
* @cssproperty --symbol-color-active - The active color for symbols.

27
src/components/select/select.ts
View File

@@ -39,7 +39,7 @@ import type { TemplateResult } from 'lit';
* @event sl-focus - Emitted when the control gains focus.
* @event sl-blur - Emitted when the control loses focus.
*
* @csspart base - The component's base wrapper.
* @csspart base - The component's internal wrapper.
* @csspart clear-button - The clear button.
* @csspart control - The container that holds the prefix, label, and suffix.
* @csspart display-label - The label that displays the current selection. Not available when used with `multiple`.
@@ -51,9 +51,9 @@ import type { TemplateResult } from 'lit';
* @csspart suffix - The select's suffix.
* @csspart menu - The select menu, an `<sl-menu>` element.
* @csspart tag - The multi select option, an `<sl-tag>` element.
* @csspart tag-base - The tag's `base` part.
* @csspart tag-content - The tag's `content` part.
* @csspart tag-remove-button - The tag's `remove-button` part.
* @csspart tag__base - The tag's `base` part.
* @csspart tag__content - The tag's `content` part.
* @csspart tag__remove-button - The tag's `remove-button` part.
* @csspart tags - The container in which multi select options are rendered.
*/
@customElement('sl-select')
@@ -381,7 +381,11 @@ export default class SlSelect extends LitElement {
return html`
<sl-tag
part="tag"
exportparts="base:tag-base, content:tag-content, remove-button:tag-remove-button"
exportparts="
base:tag__base,
content:tag__content,
remove-button:tag__remove-button
"
variant="neutral"
size=${this.size}
?pill=${this.pill}
@@ -406,7 +410,18 @@ export default class SlSelect extends LitElement {
this.displayLabel = '';
this.displayTags = this.displayTags.slice(0, this.maxTagsVisible);
this.displayTags.push(html`
<sl-tag exportparts="base:tag" variant="neutral" size=${this.size}> +${total - this.maxTagsVisible} </sl-tag>
<sl-tag
part="tag"
exportparts="
base:tag__base,
content:tag__content,
remove-button:tag__remove-button
"
variant="neutral"
size=${this.size}
>
+${total - this.maxTagsVisible}
</sl-tag>
`);
}
} else {

2
src/components/skeleton/skeleton.ts
View File

@@ -7,7 +7,7 @@ import styles from './skeleton.styles';
* @since 2.0
* @status stable
*
* @csspart base - The component's base wrapper.
* @csspart base - The component's internal wrapper.
* @csspart indicator - The skeleton's indicator which is responsible for its color and animation.
*
* @cssproperty --border-radius - The skeleton's border radius.

2
src/components/spinner/spinner.ts
View File

@@ -6,7 +6,7 @@ import styles from './spinner.styles';
* @since 2.0
* @status stable
*
* @csspart base - The component's base wrapper.
* @csspart base - The component's internal wrapper.
*
* @cssproperty --track-width - The width of the track.
* @cssproperty --track-color - The color of the track.

2
src/components/switch/switch.ts
View File

@@ -18,7 +18,7 @@ import styles from './switch.styles';
* @event sl-change - Emitted when the control's checked state changes.
* @event sl-focus - Emitted when the control gains focus.
*
* @csspart base - The component's base wrapper.
* @csspart base - The component's internal wrapper.
* @csspart control - The switch control.
* @csspart thumb - The switch position indicator.
* @csspart label - The switch label.

11
src/components/tab-group/tab-group.ts
View File

@@ -22,12 +22,15 @@ import styles from './tab-group.styles';
* @event {{ name: String }} sl-tab-show - Emitted when a tab is shown.
* @event {{ name: String }} sl-tab-hide - Emitted when a tab is hidden.
*
* @csspart base - The component's base wrapper.
* @csspart base - The component's internal wrapper.
* @csspart nav - The tab group navigation container.
* @csspart tabs - The container that wraps the slotted tabs.
* @csspart active-tab-indicator - An element that displays the currently selected tab. This is a child of the tabs container.
* @csspart body - The tab group body where tab panels are slotted in.
* @csspart scroll-button - The previous and next scroll buttons that appear when tabs are scrollable.
* @csspart scroll-button--start - Targets the starting scroll button.
* @csspart scroll-button--end - Targets the ending scroll button.
* @csspart scroll-button__base - The scroll button's `base` part.
*
* @cssproperty --indicator-color - The color of the active tab indicator.
* @cssproperty --track-color - The color of the indicator's track (i.e. the line that separates tabs from panels).
@@ -361,8 +364,9 @@ export default class SlTabGroup extends LitElement {
${this.hasScrollControls
? html`
<sl-icon-button
part="scroll-button scroll-button--start"
exportparts="base:scroll-button__base"
class="tab-group__scroll-button tab-group__scroll-button--start"
exportparts="base:scroll-button"
name="chevron-left"
library="system"
label=${this.localize.term('scrollToStart')}
@@ -381,8 +385,9 @@ export default class SlTabGroup extends LitElement {
${this.hasScrollControls
? html`
<sl-icon-button
part="scroll-button scroll-button--end"
exportparts="base:scroll-button__base"
class="tab-group__scroll-button tab-group__scroll-button--end"
exportparts="base:scroll-button"
name="chevron-right"
library="system"
label=${this.localize.term('scrollToEnd')}

2
src/components/tab-panel/tab-panel.ts
View File

@@ -9,7 +9,7 @@ import styles from './tab-panel.styles';
*
* @slot - The tab panel's content.
*
* @csspart base - The component's base wrapper.
* @csspart base - The component's internal wrapper.
*
* @cssproperty --padding - The tab panel's padding.
*/

8
src/components/tab/tab.ts
View File

@@ -17,8 +17,9 @@ import styles from './tab.styles';
*
* @event sl-close - Emitted when the tab is closable and the close button is activated.
*
* @csspart base - The component's base wrapper.
* @csspart close-button - The close button, which is the icon button's base wrapper.
* @csspart base - The component's internal wrapper.
* @csspart close-button - The close button.
* @csspart close-button__base - The close button's `base` part.
*/
@customElement('sl-tab')
export default class SlTab extends LitElement {
@@ -81,10 +82,11 @@ export default class SlTab extends LitElement {
${this.closable
? html`
<sl-icon-button
part="close-button"
exportparts="base:close-button__base"
name="x"
library="system"
label=${this.localize.term('close')}
exportparts="base:close-button"
class="tab__close-button"
@click=${this.handleCloseClick}
tabindex="-1"

6
src/components/tag/tag.ts
View File

@@ -15,9 +15,10 @@ import styles from './tag.styles';
*
* @event sl-remove - Emitted when the remove button is activated.
*
* @csspart base - The component's base wrapper.
* @csspart base - The component's internal wrapper.
* @csspart content - The tag content.
* @csspart remove-button - The remove button.
* @csspart remove-button__base - The remove button's `base` part.
*/
@customElement('sl-tag')
export default class SlTag extends LitElement {
@@ -71,7 +72,8 @@ export default class SlTag extends LitElement {
${this.removable
? html`
<sl-icon-button
exportparts="base:remove-button"
part="remove-button"
exportparts="base:remove-button__base"
name="x"
library="system"
class="tag__remove"

2
src/components/textarea/textarea.ts
View File

@@ -21,7 +21,7 @@ import styles from './textarea.styles';
* @event sl-focus - Emitted when the control gains focus.
* @event sl-blur - Emitted when the control loses focus.
*
* @csspart base - The component's base wrapper.
* @csspart base - The component's internal wrapper.
* @csspart form-control - The form control that wraps the label, textarea, and help text.
* @csspart label - The textarea label.
* @csspart textarea - The textarea control.

2
src/components/tooltip/tooltip.ts
View File

@@ -20,7 +20,7 @@ import styles from './tooltip.styles';
* @event sl-hide - Emitted when the tooltip begins to hide.
* @event sl-after-hide - Emitted after the tooltip has hidden and all animations are complete.
*
* @csspart base - The component's base wrapper.
* @csspart base - The component's internal wrapper.
*
* @cssproperty --max-width - The maximum width of the tooltip.
* @cssproperty --hide-delay - The amount of time to wait before hiding the tooltip when hovering.