diff --git a/src/color-swatch/README.md b/src/color-swatch/README.md index ebcaf84d..d95c4182 100644 --- a/src/color-swatch/README.md +++ b/src/color-swatch/README.md @@ -128,6 +128,64 @@ future_swatch_container.append(swatch); ``` +### The `label` attribute + +You can provide the color label via the `label` attribute. + + + + + + + + + + + + + + + + + + + + + +
DefaultLarge
Static + +```html +oklch(65% 0.15 210) +``` + + +```html +oklch(65% 0.15 210) +``` +
Editable + +```html + + + +``` + + +```html + + + +``` +
+ +If the attribute's value matches the element's content, no additional text with the label will be shown. + +```html +Turquoise +``` + +If used as a property and is not defined via the `label` attribute, its value is that of the element text content. + ### The `info` attribute You can use the `info` attribute to show information about the color. @@ -256,6 +314,7 @@ If you don’t, the `` element will be used. | `color` | `color` | `Color` | `string` | - | The current color value. | | `info` | `info` | `string` | - | Comma-separated list of coords of the current color to be shown. | | `value` | `value` | `string` | - | The current value of the swatch. | +| `label` | `label` | `string` | - | The label of the swatch (e.g., color name). Defaults to the element text content. | | `size` | - | `large` | - | The size of the swatch. Currently, it is used only to make a large swatch. | | `property` | `property` | `string` | - | CSS property to bind to. | | `scope` | `scope` | `string` | `:root` | CSS selector to use as the scope for the specified CSS property. | @@ -286,6 +345,7 @@ These properties are read-only. |------|-------------| | `swatch` | The swatch used to render the color. | | `details` | Wrapper around all non-swatch content (color name, info, etc) | +| `label` | The label of the swatch | | `color-wrapper` | Wrapper around the color name itself | | `gamut` | Gamut indicator | | `info` | Any info generateed by the `info` attribute | diff --git a/src/color-swatch/color-swatch.js b/src/color-swatch/color-swatch.js index b28dbda8..be64dce0 100644 --- a/src/color-swatch/color-swatch.js +++ b/src/color-swatch/color-swatch.js @@ -16,6 +16,7 @@ const Self = class ColorSwatch extends ColorElement {
+
@@ -27,6 +28,7 @@ const Self = class ColorSwatch extends ColorElement { this._el = { wrapper: this.shadowRoot.querySelector("#wrapper"), + label: this.shadowRoot.querySelector("[part=label]"), colorWrapper: this.shadowRoot.querySelector("[part=color]"), }; @@ -61,6 +63,11 @@ const Self = class ColorSwatch extends ColorElement { return this._el.gamutIndicator.gamut; } + get textContent () { + // Children that are not assigned to another slot + return [...this.childNodes].filter(n => !n.slot).map(n => n.textContent).join("").trim(); + } + propChangedCallback ({name, prop, detail: change}) { let input = this._el.input; @@ -101,6 +108,15 @@ const Self = class ColorSwatch extends ColorElement { } } + if (name === "label") { + if (this.label.length && this.label !== this.textContent) { + this._el.label.textContent = this.label; + } + else { + this._el.label.textContent = ""; + } + } + if (name === "color") { let isValid = this.color !== null || !this.value; @@ -155,13 +171,21 @@ const Self = class ColorSwatch extends ColorElement { return this._el.input.value; } - // Children that are not assigned to another slot - return [...this.childNodes].filter(n => !n.slot).map(n => n.textContent).join("").trim(); + return this.textContent; }, reflect: { from: true, }, }, + label: { + type: String, + default () { + return this.textContent; + }, + convert (value) { + return value.trim(); + }, + }, color: { get type () { return ColorSwatch.Color;