@nectary/components 5.14.1 → 5.14.2

package/bundle.js

@@ -3798,6 +3798,45 @@ class Chip extends NectaryElement {
   };
 }
 defineCustomElement("sinch-chip", Chip);
+const SKINTONE_SWATCH_COLORS = [
+  "skintone-dark",
+  "skintone-default",
+  "skintone-light",
+  "skintone-light-medium",
+  "skintone-medium",
+  "skintone-medium-dark"
+];
+const SWATCH_COLORS = [
+  "blue",
+  "dark-blue",
+  "dark-gray",
+  "dark-green",
+  "dark-orange",
+  "dark-pink",
+  "dark-red",
+  "dark-violet",
+  "dark-yellow",
+  "default",
+  "gray",
+  "green",
+  "light-blue",
+  "light-gray",
+  "light-green",
+  "light-orange",
+  "light-pink",
+  "light-red",
+  "light-violet",
+  "light-yellow",
+  "orange",
+  "pink",
+  "red",
+  "violet",
+  "yellow",
+  ...SKINTONE_SWATCH_COLORS
+];
+const isSwatchColor = (value = "") => {
+  return SWATCH_COLORS.includes(value);
+};
 const getSwatchColorBg = (id) => {
   return `var(--sinch-comp-color-swatch-color-${id}-background)`;
 };
@@ -3823,7 +3862,7 @@ class ColorSwatch extends NectaryElement {
     super.disconnectedCallback();
   }
   static get observedAttributes() {
-    return ["name"];
+    return ["name", "aria-label"];
   }
   attributeChangedCallback(name) {
     switch (name) {
@@ -3839,18 +3878,33 @@ class ColorSwatch extends NectaryElement {
   set name(value) {
     updateAttribute(this, "name", value);
   }
+  get "aria-label"() {
+    return getAttribute(this, "aria-label");
+  }
+  set "aria-label"(value) {
+    updateAttribute(this, "aria-label", value);
+  }
   #updateColor() {
     if (!this.isDomConnected) {
       return;
     }
     const colorName = this.name;
-    if (colorName !== null && colorName.length > 0) {
+    if (colorName === null || colorName.length === 0) {
+      this.#$wrapper.style.removeProperty("background-color");
+      setClass(this.#$wrapper, "no-color", true);
+      return;
+    }
+    if (isSwatchColor(colorName)) {
+      const exitingAriaLabel = getAttribute(this, "aria-label");
+      if (exitingAriaLabel == null || isSwatchColor(exitingAriaLabel)) {
+        updateAttribute(this, "aria-label", colorName);
+      }
       const bg = getSwatchColorBg(colorName);
       this.#$wrapper.style.setProperty("background-color", bg);
       setClass(this.#$wrapper, "no-color", false);
     } else {
-      this.#$wrapper.style.removeProperty("background-color");
-      setClass(this.#$wrapper, "no-color", true);
+      this.#$wrapper.style.setProperty("background-color", colorName);
+      setClass(this.#$wrapper, "no-color", false);
     }
   }
 }
@@ -3876,18 +3930,29 @@ class ColorMenuOption extends NectaryElement {
   disconnectedCallback() {
   }
   static get observedAttributes() {
-    return ["value"];
+    return ["value", "aria-label"];
   }
   attributeChangedCallback(name, _, newVal) {
     switch (name) {
       case "value": {
+        if (newVal == null) {
+          this.#$wrapper.style.removeProperty("--sinch-global-color-icon");
+          break;
+        }
+        if (!isSwatchColor(newVal)) {
+          this.#$wrapper.style.setProperty("--sinch-global-color-icon", newVal);
+          break;
+        }
         updateAttribute(this.#$tooltip, "text", newVal);
         updateAttribute(this.#$swatch, "name", newVal);
-        if (newVal !== null) {
-          this.#$wrapper.style.setProperty("--sinch-global-color-icon", getSwatchColorFg(newVal));
-        } else {
-          this.#$wrapper.style.removeProperty("--sinch-global-color-icon");
+        this.#$wrapper.style.setProperty("--sinch-global-color-icon", getSwatchColorFg(newVal));
+        break;
+      }
+      case "aria-label": {
+        if (newVal == null) {
+          break;
         }
+        updateAttribute(this.#$swatch, "aria-label", newVal);
         break;
       }
     }
@@ -13562,6 +13627,8 @@ export {
   RadioOption,
   RichText,
   RichTextarea,
+  SKINTONE_SWATCH_COLORS,
+  SWATCH_COLORS,
   SegmentCollapse,
   SegmentedControl,
   SegmentedControlOption,

package/color-menu-option/index.js

@@ -1,6 +1,6 @@
 import "../color-swatch/index.js";
 import "../tooltip/index.js";
-import { getSwatchColorFg } from "../color-swatch/utils.js";
+import { isSwatchColor, getSwatchColorFg } from "../color-swatch/utils.js";
 import { updateAttribute, getAttribute } from "../utils/dom.js";
 import { defineCustomElement, NectaryElement } from "../utils/element.js";
 const templateHTML = '<style>:host{display:block;outline:0}#wrapper{width:44px;height:56px;padding:12px 6px;box-sizing:border-box}#swatch-wrapper{position:relative;cursor:pointer;width:32px;height:32px}#swatch-wrapper::after{content:"";position:absolute;width:34px;height:34px;inset:-3px;border:2px solid var(--sinch-comp-color-menu-option-color-default-border-initial);border-radius:50%;pointer-events:none}:host([data-checked]) #swatch-wrapper::after{border-color:var(--sinch-comp-color-menu-option-color-default-border-selected)}:host([data-selected]) #swatch-wrapper::after{border-color:var(--sinch-comp-color-menu-option-color-default-border-focus)}:host(:hover) #swatch-wrapper::after{border-color:var(--sinch-comp-color-menu-option-color-default-border-hover)}:host(:active) #swatch-wrapper::after{border-color:var(--sinch-comp-color-menu-option-color-default-border-active)}</style><div id="wrapper"><sinch-tooltip id="tooltip"><div id="swatch-wrapper"><sinch-color-swatch id="swatch"></sinch-color-swatch></div></sinch-tooltip></div>';
@@ -24,18 +24,29 @@ class ColorMenuOption extends NectaryElement {
   disconnectedCallback() {
   }
   static get observedAttributes() {
-    return ["value"];
+    return ["value", "aria-label"];
   }
   attributeChangedCallback(name, _, newVal) {
     switch (name) {
       case "value": {
+        if (newVal == null) {
+          this.#$wrapper.style.removeProperty("--sinch-global-color-icon");
+          break;
+        }
+        if (!isSwatchColor(newVal)) {
+          this.#$wrapper.style.setProperty("--sinch-global-color-icon", newVal);
+          break;
+        }
         updateAttribute(this.#$tooltip, "text", newVal);
         updateAttribute(this.#$swatch, "name", newVal);
-        if (newVal !== null) {
-          this.#$wrapper.style.setProperty("--sinch-global-color-icon", getSwatchColorFg(newVal));
-        } else {
-          this.#$wrapper.style.removeProperty("--sinch-global-color-icon");
+        this.#$wrapper.style.setProperty("--sinch-global-color-icon", getSwatchColorFg(newVal));
+        break;
+      }
+      case "aria-label": {
+        if (newVal == null) {
+          break;
         }
+        updateAttribute(this.#$swatch, "aria-label", newVal);
         break;
       }
     }

package/color-menu-option/types.d.ts

@@ -2,6 +2,8 @@ import type { NectaryComponentReactByType, NectaryComponentVanillaByType, Nectar
 export type TSinchColorMenuOptionProps = {
     /** Value */
     value: string;
+    /** Aria label */
+    'aria-label'?: string;
 };
 export type TSinchColorMenuOptionStyle = {
     '--sinch-comp-color-menu-option-color-default-border-initial'?: string;

package/color-swatch/global/index.js

@@ -1,2 +1,7 @@
 import { defineCustomElement } from "../../utils/element.js";
+import { SKINTONE_SWATCH_COLORS, SWATCH_COLORS } from "../types.js";
 defineCustomElement("sinch-color-swatch");
+export {
+  SKINTONE_SWATCH_COLORS,
+  SWATCH_COLORS
+};

package/color-swatch/index.d.ts

@@ -10,4 +10,6 @@ export declare class ColorSwatch extends NectaryElement {
     attributeChangedCallback(name: string): void;
     get name(): string | null;
     set name(value: string | null);
+    get 'aria-label'(): string | null;
+    set 'aria-label'(value: string | null);
 }

package/color-swatch/index.js

@@ -1,7 +1,8 @@
 import "../text/index.js";
 import { getAttribute, updateAttribute, setClass } from "../utils/dom.js";
 import { defineCustomElement, NectaryElement } from "../utils/element.js";
-import { getSwatchColorBg } from "./utils.js";
+import { isSwatchColor, getSwatchColorBg } from "./utils.js";
+import { SKINTONE_SWATCH_COLORS, SWATCH_COLORS } from "./types.js";
 const templateHTML = '<style>:host{display:inline-block;vertical-align:middle}#wrapper{width:var(--sinch-global-size-icon,32px);height:var(--sinch-global-size-icon,32px);border-radius:50%}#wrapper.no-color{background:linear-gradient(45deg,var(--sinch-ref-color-violet-200),var(--sinch-ref-color-honey-200),var(--sinch-ref-color-grass-200),var(--sinch-ref-color-ocean-200),var(--sinch-ref-color-violet-200))}</style><div id="wrapper"></div>';
 const template = document.createElement("template");
 template.innerHTML = templateHTML;
@@ -21,7 +22,7 @@ class ColorSwatch extends NectaryElement {
     super.disconnectedCallback();
   }
   static get observedAttributes() {
-    return ["name"];
+    return ["name", "aria-label"];
   }
   attributeChangedCallback(name) {
     switch (name) {
@@ -37,22 +38,39 @@ class ColorSwatch extends NectaryElement {
   set name(value) {
     updateAttribute(this, "name", value);
   }
+  get "aria-label"() {
+    return getAttribute(this, "aria-label");
+  }
+  set "aria-label"(value) {
+    updateAttribute(this, "aria-label", value);
+  }
   #updateColor() {
     if (!this.isDomConnected) {
       return;
     }
     const colorName = this.name;
-    if (colorName !== null && colorName.length > 0) {
+    if (colorName === null || colorName.length === 0) {
+      this.#$wrapper.style.removeProperty("background-color");
+      setClass(this.#$wrapper, "no-color", true);
+      return;
+    }
+    if (isSwatchColor(colorName)) {
+      const exitingAriaLabel = getAttribute(this, "aria-label");
+      if (exitingAriaLabel == null || isSwatchColor(exitingAriaLabel)) {
+        updateAttribute(this, "aria-label", colorName);
+      }
       const bg = getSwatchColorBg(colorName);
       this.#$wrapper.style.setProperty("background-color", bg);
       setClass(this.#$wrapper, "no-color", false);
     } else {
-      this.#$wrapper.style.removeProperty("background-color");
-      setClass(this.#$wrapper, "no-color", true);
+      this.#$wrapper.style.setProperty("background-color", colorName);
+      setClass(this.#$wrapper, "no-color", false);
     }
   }
 }
 defineCustomElement("sinch-color-swatch", ColorSwatch);
 export {
-  ColorSwatch
+  ColorSwatch,
+  SKINTONE_SWATCH_COLORS,
+  SWATCH_COLORS
 };

package/color-swatch/types.d.ts

@@ -1,7 +1,13 @@
 import type { NectaryComponentReactByType, NectaryComponentVanillaByType, NectaryComponentReact, NectaryComponentVanilla } from '../types';
+export declare const SKINTONE_SWATCH_COLORS: readonly ["skintone-dark", "skintone-default", "skintone-light", "skintone-light-medium", "skintone-medium", "skintone-medium-dark"];
+export declare const SWATCH_COLORS: readonly ["blue", "dark-blue", "dark-gray", "dark-green", "dark-orange", "dark-pink", "dark-red", "dark-violet", "dark-yellow", "default", "gray", "green", "light-blue", "light-gray", "light-green", "light-orange", "light-pink", "light-red", "light-violet", "light-yellow", "orange", "pink", "red", "violet", "yellow", "skintone-dark", "skintone-default", "skintone-light", "skintone-light-medium", "skintone-medium", "skintone-medium-dark"];
+export type SkinToneColor = typeof SKINTONE_SWATCH_COLORS[number];
+export type SwatchColors = typeof SWATCH_COLORS[number];
 export type TSinchColorSwatchProps = {
     /** Color name */
     name?: string;
+    /** Aria label */
+    'aria-label'?: string;
 };
 export type TSinchColorSwatchStyle = {
     '--sinch-global-size-icon'?: string;

package/color-swatch/types.js

@@ -1 +1,40 @@
-
+const SKINTONE_SWATCH_COLORS = [
+  "skintone-dark",
+  "skintone-default",
+  "skintone-light",
+  "skintone-light-medium",
+  "skintone-medium",
+  "skintone-medium-dark"
+];
+const SWATCH_COLORS = [
+  "blue",
+  "dark-blue",
+  "dark-gray",
+  "dark-green",
+  "dark-orange",
+  "dark-pink",
+  "dark-red",
+  "dark-violet",
+  "dark-yellow",
+  "default",
+  "gray",
+  "green",
+  "light-blue",
+  "light-gray",
+  "light-green",
+  "light-orange",
+  "light-pink",
+  "light-red",
+  "light-violet",
+  "light-yellow",
+  "orange",
+  "pink",
+  "red",
+  "violet",
+  "yellow",
+  ...SKINTONE_SWATCH_COLORS
+];
+export {
+  SKINTONE_SWATCH_COLORS,
+  SWATCH_COLORS
+};

package/color-swatch/utils.d.ts

@@ -1,2 +1,4 @@
-export declare const getSwatchColorBg: (id: string) => string;
-export declare const getSwatchColorFg: (id: string) => string;
+import type { SwatchColors } from './types';
+export declare const isSwatchColor: (value?: string) => value is SwatchColors;
+export declare const getSwatchColorBg: (id: SwatchColors) => "var(--sinch-comp-color-swatch-color-blue-background)" | "var(--sinch-comp-color-swatch-color-dark-blue-background)" | "var(--sinch-comp-color-swatch-color-dark-gray-background)" | "var(--sinch-comp-color-swatch-color-dark-green-background)" | "var(--sinch-comp-color-swatch-color-dark-orange-background)" | "var(--sinch-comp-color-swatch-color-dark-pink-background)" | "var(--sinch-comp-color-swatch-color-dark-red-background)" | "var(--sinch-comp-color-swatch-color-dark-violet-background)" | "var(--sinch-comp-color-swatch-color-dark-yellow-background)" | "var(--sinch-comp-color-swatch-color-default-background)" | "var(--sinch-comp-color-swatch-color-gray-background)" | "var(--sinch-comp-color-swatch-color-green-background)" | "var(--sinch-comp-color-swatch-color-light-blue-background)" | "var(--sinch-comp-color-swatch-color-light-gray-background)" | "var(--sinch-comp-color-swatch-color-light-green-background)" | "var(--sinch-comp-color-swatch-color-light-orange-background)" | "var(--sinch-comp-color-swatch-color-light-pink-background)" | "var(--sinch-comp-color-swatch-color-light-red-background)" | "var(--sinch-comp-color-swatch-color-light-violet-background)" | "var(--sinch-comp-color-swatch-color-light-yellow-background)" | "var(--sinch-comp-color-swatch-color-orange-background)" | "var(--sinch-comp-color-swatch-color-pink-background)" | "var(--sinch-comp-color-swatch-color-red-background)" | "var(--sinch-comp-color-swatch-color-violet-background)" | "var(--sinch-comp-color-swatch-color-yellow-background)" | "var(--sinch-comp-color-swatch-color-skintone-dark-background)" | "var(--sinch-comp-color-swatch-color-skintone-default-background)" | "var(--sinch-comp-color-swatch-color-skintone-light-background)" | "var(--sinch-comp-color-swatch-color-skintone-light-medium-background)" | "var(--sinch-comp-color-swatch-color-skintone-medium-background)" | "var(--sinch-comp-color-swatch-color-skintone-medium-dark-background)";
+export declare const getSwatchColorFg: (id: SwatchColors) => "var(--sinch-comp-color-swatch-color-blue-foreground)" | "var(--sinch-comp-color-swatch-color-dark-blue-foreground)" | "var(--sinch-comp-color-swatch-color-dark-gray-foreground)" | "var(--sinch-comp-color-swatch-color-dark-green-foreground)" | "var(--sinch-comp-color-swatch-color-dark-orange-foreground)" | "var(--sinch-comp-color-swatch-color-dark-pink-foreground)" | "var(--sinch-comp-color-swatch-color-dark-red-foreground)" | "var(--sinch-comp-color-swatch-color-dark-violet-foreground)" | "var(--sinch-comp-color-swatch-color-dark-yellow-foreground)" | "var(--sinch-comp-color-swatch-color-default-foreground)" | "var(--sinch-comp-color-swatch-color-gray-foreground)" | "var(--sinch-comp-color-swatch-color-green-foreground)" | "var(--sinch-comp-color-swatch-color-light-blue-foreground)" | "var(--sinch-comp-color-swatch-color-light-gray-foreground)" | "var(--sinch-comp-color-swatch-color-light-green-foreground)" | "var(--sinch-comp-color-swatch-color-light-orange-foreground)" | "var(--sinch-comp-color-swatch-color-light-pink-foreground)" | "var(--sinch-comp-color-swatch-color-light-red-foreground)" | "var(--sinch-comp-color-swatch-color-light-violet-foreground)" | "var(--sinch-comp-color-swatch-color-light-yellow-foreground)" | "var(--sinch-comp-color-swatch-color-orange-foreground)" | "var(--sinch-comp-color-swatch-color-pink-foreground)" | "var(--sinch-comp-color-swatch-color-red-foreground)" | "var(--sinch-comp-color-swatch-color-violet-foreground)" | "var(--sinch-comp-color-swatch-color-yellow-foreground)" | "var(--sinch-comp-color-swatch-color-skintone-dark-foreground)" | "var(--sinch-comp-color-swatch-color-skintone-default-foreground)" | "var(--sinch-comp-color-swatch-color-skintone-light-foreground)" | "var(--sinch-comp-color-swatch-color-skintone-light-medium-foreground)" | "var(--sinch-comp-color-swatch-color-skintone-medium-foreground)" | "var(--sinch-comp-color-swatch-color-skintone-medium-dark-foreground)";

package/color-swatch/utils.js

@@ -1,3 +1,7 @@
+import { SWATCH_COLORS } from "./types.js";
+const isSwatchColor = (value = "") => {
+  return SWATCH_COLORS.includes(value);
+};
 const getSwatchColorBg = (id) => {
   return `var(--sinch-comp-color-swatch-color-${id}-background)`;
 };
@@ -6,5 +10,6 @@ const getSwatchColorFg = (id) => {
 };
 export {
   getSwatchColorBg,
-  getSwatchColorFg
+  getSwatchColorFg,
+  isSwatchColor
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nectary/components",
-  "version": "5.14.1",
+  "version": "5.14.2",
   "files": [
     "**/*/*.css",
     "**/*/*.json",