@@ -768,7 +772,11 @@ export default class SlColorPicker extends LitElement {
${hasEyeDropper
? html`
-
+
`
: ''}
diff --git a/src/components/progress-bar/progress-bar.ts b/src/components/progress-bar/progress-bar.ts
index ec8a1a7a0..540c00c1c 100644
--- a/src/components/progress-bar/progress-bar.ts
+++ b/src/components/progress-bar/progress-bar.ts
@@ -3,6 +3,7 @@ import { customElement, property } from 'lit/decorators.js';
import { ifDefined } from 'lit/directives/if-defined.js';
import { classMap } from 'lit/directives/class-map.js';
import { styleMap } from 'lit/directives/style-map.js';
+import { LocalizeController } from '../../utilities/localize';
import styles from './progress-bar.styles';
/**
@@ -23,6 +24,7 @@ import styles from './progress-bar.styles';
@customElement('sl-progress-bar')
export default class SlProgressBar extends LitElement {
static styles = styles;
+ private localize = new LocalizeController(this);
/** The current progress, 0 to 100. */
@property({ type: Number, reflect: true }) value = 0;
@@ -30,8 +32,11 @@ export default class SlProgressBar extends LitElement {
/** When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state. */
@property({ type: Boolean, reflect: true }) indeterminate = false;
- /** The progress bar's aria label. */
- @property() label = 'Progress'; // TODO - i18n
+ /** A custom label for the progress bar's aria label. */
+ @property() label: string;
+
+ /** The locale to render the component in. */
+ @property() lang: string;
render() {
return html`
@@ -43,7 +48,7 @@ export default class SlProgressBar extends LitElement {
})}
role="progressbar"
title=${ifDefined(this.title)}
- aria-label=${ifDefined(this.label)}
+ aria-label=${this.label || this.localize.term('progress')}
aria-valuemin="0"
aria-valuemax="100"
aria-valuenow=${this.indeterminate ? 0 : this.value}
diff --git a/src/components/progress-ring/progress-ring.ts b/src/components/progress-ring/progress-ring.ts
index 11ab3b609..3d31a7832 100644
--- a/src/components/progress-ring/progress-ring.ts
+++ b/src/components/progress-ring/progress-ring.ts
@@ -1,6 +1,6 @@
import { LitElement, html } from 'lit';
import { customElement, property, query, state } from 'lit/decorators.js';
-import { ifDefined } from 'lit/directives/if-defined.js';
+import { LocalizeController } from '../../utilities/localize';
import styles from './progress-ring.styles';
/**
@@ -20,6 +20,7 @@ import styles from './progress-ring.styles';
@customElement('sl-progress-ring')
export default class SlProgressRing extends LitElement {
static styles = styles;
+ private localize = new LocalizeController(this);
@query('.progress-ring__indicator') indicator: SVGCircleElement;
@@ -28,8 +29,11 @@ export default class SlProgressRing extends LitElement {
/** The current progress, 0 to 100. */
@property({ type: Number, reflect: true }) value = 0;
- /** The progress ring's aria label. */
- @property() label = 'Progress'; // TODO - i18n
+ /** A custom label for the progress ring's aria label. */
+ @property() label: string;
+
+ /** The locale to render the component in. */
+ @property() lang: string;
updated(changedProps: Map
) {
super.updated(changedProps);
@@ -54,7 +58,7 @@ export default class SlProgressRing extends LitElement {
part="base"
class="progress-ring"
role="progressbar"
- aria-label=${ifDefined(this.label)}
+ aria-label=${this.label || this.localize.term('progress')}
aria-valuemin="0"
aria-valuemax="100"
aria-valuenow="${this.value}"
diff --git a/src/components/tab-group/tab-group.ts b/src/components/tab-group/tab-group.ts
index ef13a2b58..42d9da6f0 100644
--- a/src/components/tab-group/tab-group.ts
+++ b/src/components/tab-group/tab-group.ts
@@ -5,6 +5,7 @@ import { emit } from '../../internal/event';
import { watch } from '../../internal/watch';
import { getOffset } from '../../internal/offset';
import { scrollIntoView } from '../../internal/scroll';
+import { LocalizeController } from '../../utilities/localize';
import type SlTab from '../tab/tab';
import type SlTabPanel from '../tab-panel/tab-panel';
import styles from './tab-group.styles';
@@ -36,6 +37,7 @@ import '../icon-button/icon-button';
@customElement('sl-tab-group')
export default class SlTabGroup extends LitElement {
static styles = styles;
+ private localize = new LocalizeController(this);
@query('.tab-group') tabGroup: HTMLElement;
@query('.tab-group__body') body: HTMLElement;
@@ -62,6 +64,9 @@ export default class SlTabGroup extends LitElement {
/** Disables the scroll arrows that appear when tabs overflow. */
@property({ attribute: 'no-scroll-controls', type: Boolean }) noScrollControls = false;
+ /** The locale to render the component in. */
+ @property() lang: string;
+
connectedCallback() {
super.connectedCallback();
@@ -339,7 +344,6 @@ export default class SlTabGroup extends LitElement {
this.syncIndicator();
}
- // TODO - i18n scroll to start/end labels
render() {
return html`
`
@@ -383,7 +387,7 @@ export default class SlTabGroup extends LitElement {
exportparts="base:scroll-button"
name="chevron-right"
library="system"
- label="Scroll to end"
+ label=${this.localize.term('scroll_to_end')}
@click=${this.handleScrollToEnd}
>
`
diff --git a/src/components/tab/tab.ts b/src/components/tab/tab.ts
index 5c41821fc..80a6a6d38 100644
--- a/src/components/tab/tab.ts
+++ b/src/components/tab/tab.ts
@@ -2,6 +2,7 @@ import { LitElement, html } from 'lit';
import { customElement, property, query } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import { emit } from '../../internal/event';
+import { LocalizeController } from '../../utilities/localize';
import styles from './tab.styles';
import '../icon-button/icon-button';
@@ -24,6 +25,7 @@ let id = 0;
@customElement('sl-tab')
export default class SlTab extends LitElement {
static styles = styles;
+ private localize = new LocalizeController(this);
@query('.tab') tab: HTMLElement;
@@ -41,6 +43,9 @@ export default class SlTab extends LitElement {
/** Draws the tab in a disabled state. */
@property({ type: Boolean, reflect: true }) disabled = false;
+ /** The locale to render the component in. */
+ @property() lang: string;
+
/** Sets focus to the tab. */
focus(options?: FocusOptions) {
this.tab.focus(options);
@@ -59,7 +64,6 @@ export default class SlTab extends LitElement {
// If the user didn't provide an ID, we'll set one so we can link tabs and tab panels with aria labels
this.id = this.id || this.componentId;
- // TODO - i18n close label
return html`