@kubex/zinc 1.1.177 → 1.1.178

package/dist/custom-elements.json

@@ -5887,8 +5887,8 @@
           "name": "ZnChip",
           "cssProperties": [
             {
-              "description": "An example CSS custom property.",
-              "name": "--example"
+              "description": "The text, icon and tinted background colour of a `custom` chip.",
+              "name": "--chip-color-override"
             }
           ],
           "cssParts": [
@@ -6054,7 +6054,7 @@
           "tagNameWithoutPrefix": "chip",
           "tagName": "zn-chip",
           "customElement": true,
-          "jsDoc": "/**\n * @summary Short summary of the component's intended use.\n * @documentation https://zinc.style/components/chip\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-example\n *\n * @event zn-event-name - Emitted as an example.\n *\n * @slot - The default slot.\n * @slot example - An example slot.\n *\n * @csspart base - The component's base wrapper.\n *\n * @cssproperty --example - An example CSS custom property.\n */",
+          "jsDoc": "/**\n * @summary Short summary of the component's intended use.\n * @documentation https://zinc.style/components/chip\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-example\n *\n * @event zn-event-name - Emitted as an example.\n *\n * @slot - The default slot.\n * @slot example - An example slot.\n *\n * @csspart base - The component's base wrapper.\n *\n * @cssproperty --chip-color-override - The text, icon and tinted background colour of a `custom` chip.\n */",
           "documentation": "https://zinc.style/components/chip",
           "status": "experimental",
           "since": "1.0",
@@ -53936,7 +53936,7 @@
   "package": {
     "name": "@kubex/zinc",
     "description": "A collection of web components for building web applications based off of @shoelace-style/Shoelace",
-    "version": "1.1.177",
+    "version": "1.1.178",
     "author": "",
     "license": "MIT"
   }

package/dist/vscode.html-custom-data.json

@@ -857,7 +857,7 @@
     },
     {
       "name": "zn-chip",
-      "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+      "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--chip-color-override** - The text, icon and tinted background colour of a `custom` chip. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
       "attributes": [
         { "name": "icon", "values": [] },
         { "name": "caption", "values": [] },

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@kubex/zinc",
-  "version": "1.1.177",
+  "version": "1.1.178",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -1862,7 +1862,7 @@
         },
         {
           "name": "zn-chip",
-          "description": "Short summary of the component's intended use.\n\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+          "description": "Short summary of the component's intended use.\n\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--chip-color-override** - The text, icon and tinted background colour of a `custom` chip. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
           "doc-url": "",
           "attributes": [
             { "name": "icon", "value": { "type": "string", "default": "''" } },

package/dist/zn.d.ts

@@ -1743,7 +1743,7 @@ declare module "components/chip/chip.component" {
      *
      * @csspart base - The component's base wrapper.
      *
-     * @cssproperty --example - An example CSS custom property.
+     * @cssproperty --chip-color-override - The text, icon and tinted background colour of a `custom` chip.
      */
     export default class ZnChip extends ZincElement {
         static styles: CSSResultGroup;

package/dist/zn.min.js

@@ -258,8 +258,8 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
           <zn-icon part="icon" class="paperclip@lu" src=${this.icon} size="20"></zn-icon>`:V}
         <span part="label" class="attachment__label"><slot>${this.name}</slot></span>
       </a>
-    `}};Ui.styles=k(ky),Ui.dependencies={"zn-icon":he},c([p()],Ui.prototype,"href",2),c([p()],Ui.prototype,"name",2),c([p()],Ui.prototype,"icon",2),c([p({reflect:!0})],Ui.prototype,"target",2),c([p({type:Boolean})],Ui.prototype,"download",2);var Y9=Ui;Ui.define("zn-chat-message-attachment");var Sy=S`@keyframes rotate-gradient{from{--rotate:0deg}to{--rotate:360deg}}:host{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-transform:none}*,*::before,*::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:rgb(var(--zn-border-color))}[hidden]{display:none !important}.width-container,.form-container,.wide-form-container{height:100%;width:100%;margin:var(--zn-default-margin,0 auto)}.width-container{max-width:var(--zn-container)}.form-container{max-width:var(--zn-container-ph)}.wide-form-container{max-width:var(--zn-container-lg)}:host{display:inline-flex;vertical-align:middle}.chip{display:inline-flex;font-size:var(--zn-text-chip-font-size);font-family:var(--zn-font-family-sans);font-weight:var(--zn-text-chip-font-weight);border-radius:var(--zn-border-radius-x-large);padding-inline:var(--zn-spacing-x-small);padding-block:0;height:var(--zn-spacing-medium);text-align:center;gap:var(--zn-spacing-x-small);width:-moz-fit-content;width:fit-content;justify-content:center;align-items:center;line-height:var(--zn-text-chip-line-height);letter-spacing:var(--zn-letter-spacing-loose);white-space:nowrap}.chip--flush{padding:0;height:auto}.chip--flush-x{padding-inline:0}.chip--flush-y{padding-block:0;height:auto}.chip--primary{color:rgba(var(--zn-primary),0.9);background:rgba(var(--zn-primary),0.1)}.chip--error{color:rgb(var(--zn-color-error));background:rgba(var(--zn-color-error),0.1)}.chip--info{color:rgb(var(--zn-color-info));background:rgba(var(--zn-color-info),0.1)}.chip--warning{color:rgb(var(--zn-color-warning));background:rgba(var(--zn-color-warning),0.1)}.chip--success{color:rgb(var(--zn-color-success));background:rgba(var(--zn-color-success),0.1)}.chip--neutral{color:rgb(var(--zn-text));background:rgba(var(--zn-border-color),0.1)}.chip--transparent{color:rgb(var(--zn-text));background:transparent}.chip--custom{color:rgb(var(--zn-text));background-color:hsl(from var(--chip-color-override,inherit) h s l/0.1)}.chip__value{overflow:hidden;text-overflow:ellipsis;text-transform:var(--zn-text-chip-transform)}.chip__caption{opacity:0.7;font-weight:var(--zn-text-chip-font-weight);text-transform:var(--zn-text-chip-transform)}.chip__caption::after{content:":"}.chip--no-content{padding:var(--zn-spacing-3x-small) var(--zn-spacing-2x-small)}.chip--with-icon{padding-left:var(--zn-spacing-2x-small)}`;var yi=class extends T{constructor(){super(...arguments);this.icon="";this.caption="";this.iconSize=18;this.type="neutral";this.flush=!1;this.flushX=!1;this.flushY=!1;this.hasSlotController=new te(this,"[default]","action")}render(){let t=this.hasSlotController.test("[default]");return u`
-      <div class="${q({chip:!0,"chip--with-content":t,"chip--no-content":!t,"chip--with-icon":this.icon,"chip--flush":this.flush,"chip--flush-x":this.flushX,"chip--flush-y":this.flushY,"chip--info":this.type==="info","chip--success":this.type==="success","chip--warning":this.type==="warning","chip--error":this.type==="error","chip--primary":this.type==="primary","chip--transparent":this.type==="transparent","chip--custom":this.type==="custom","chip--neutral":this.type==="neutral"})}">
+    `}};Ui.styles=k(ky),Ui.dependencies={"zn-icon":he},c([p()],Ui.prototype,"href",2),c([p()],Ui.prototype,"name",2),c([p()],Ui.prototype,"icon",2),c([p({reflect:!0})],Ui.prototype,"target",2),c([p({type:Boolean})],Ui.prototype,"download",2);var Y9=Ui;Ui.define("zn-chat-message-attachment");var Sy=S`@keyframes rotate-gradient{from{--rotate:0deg}to{--rotate:360deg}}:host{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-transform:none}*,*::before,*::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:rgb(var(--zn-border-color))}[hidden]{display:none !important}.width-container,.form-container,.wide-form-container{height:100%;width:100%;margin:var(--zn-default-margin,0 auto)}.width-container{max-width:var(--zn-container)}.form-container{max-width:var(--zn-container-ph)}.wide-form-container{max-width:var(--zn-container-lg)}:host{display:inline-flex;vertical-align:middle}.chip{display:inline-flex;font-size:var(--zn-text-chip-font-size);font-family:var(--zn-font-family-sans);font-weight:var(--zn-text-chip-font-weight);border-radius:var(--zn-border-radius-x-large);padding-inline:var(--zn-spacing-x-small);padding-block:0;height:var(--zn-spacing-medium);text-align:center;gap:var(--zn-spacing-x-small);width:-moz-fit-content;width:fit-content;justify-content:center;align-items:center;line-height:var(--zn-text-chip-line-height);letter-spacing:var(--zn-letter-spacing-loose);white-space:nowrap}.chip--flush{padding:0;height:auto}.chip--flush-x{padding-inline:0}.chip--flush-y{padding-block:0;height:auto}.chip--primary{color:rgba(var(--zn-primary),0.9);background:rgba(var(--zn-primary),0.1)}.chip--error{color:rgb(var(--zn-color-error));background:rgba(var(--zn-color-error),0.1)}.chip--info{color:rgb(var(--zn-color-info));background:rgba(var(--zn-color-info),0.1)}.chip--warning{color:rgb(var(--zn-color-warning));background:rgba(var(--zn-color-warning),0.1)}.chip--success{color:rgb(var(--zn-color-success));background:rgba(var(--zn-color-success),0.1)}.chip--neutral{color:rgb(var(--zn-text));background:rgba(var(--zn-border-color),0.1)}.chip--transparent{color:rgb(var(--zn-text));background:transparent}.chip--custom{color:var(--chip-color-override,rgb(var(--zn-text)));background-color:hsl(from var(--chip-color-override,inherit) h s l/0.1)}.chip__value{overflow:hidden;text-overflow:ellipsis;text-transform:var(--zn-text-chip-transform)}.chip__caption{opacity:0.7;font-weight:var(--zn-text-chip-font-weight);text-transform:var(--zn-text-chip-transform)}.chip__caption::after{content:":"}.chip--no-content{padding:var(--zn-spacing-3x-small) var(--zn-spacing-2x-small)}.chip--with-icon{padding-left:var(--zn-spacing-2x-small)}`;var yi=class extends T{constructor(){super(...arguments);this.icon="";this.caption="";this.iconSize=18;this.type="neutral";this.flush=!1;this.flushX=!1;this.flushY=!1;this.hasSlotController=new te(this,"[default]","action")}render(){let t=this.hasSlotController.test("[default]");return u`
+      <div part="base" class="${q({chip:!0,"chip--with-content":t,"chip--no-content":!t,"chip--with-icon":this.icon,"chip--flush":this.flush,"chip--flush-x":this.flushX,"chip--flush-y":this.flushY,"chip--info":this.type==="info","chip--success":this.type==="success","chip--warning":this.type==="warning","chip--error":this.type==="error","chip--primary":this.type==="primary","chip--transparent":this.type==="transparent","chip--custom":this.type==="custom","chip--neutral":this.type==="neutral"})}">
         ${this.icon?u`
           <zn-icon src="${this.icon}" size="${this.iconSize}"></zn-icon>`:""}
         ${this.caption?u`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubex/zinc",
-  "version": "1.1.177",
+  "version": "1.1.178",
   "description": "A collection of web components for building web applications based off of @shoelace-style/Shoelace",
   "keywords": [
     "web components",

package/src/components/chip/chip.component.ts

@@ -21,7 +21,7 @@ import styles from './chip.scss';
  *
  * @csspart base - The component's base wrapper.
  *
- * @cssproperty --example - An example CSS custom property.
+ * @cssproperty --chip-color-override - The text, icon and tinted background colour of a `custom` chip.
  */
 export default class ZnChip extends ZincElement {
   static styles: CSSResultGroup = unsafeCSS(styles);
@@ -43,7 +43,7 @@ export default class ZnChip extends ZincElement {
   render() {
     const hasContent = this.hasSlotController.test('[default]')
     return html`
-      <div class="${classMap({
+      <div part="base" class="${classMap({
         'chip': true,
         'chip--with-content': hasContent,
         'chip--no-content': !hasContent,

package/src/components/chip/chip.scss

@@ -74,7 +74,7 @@
 }
 
 .chip--custom {
-  color: rgb(var(--zn-text));
+  color: var(--chip-color-override, rgb(var(--zn-text)));
   background-color: hsl(from var(--chip-color-override, inherit) h s l / 0.1);
 }
 

package/src/components/chip/chip.test.ts

@@ -7,4 +7,21 @@ describe('<zn-chip>', () => {
 
     expect(el).to.exist;
   });
+
+  it('should colour a custom chip from its override', async () => {
+    const el = await fixture<HTMLElement>(html`
+      <zn-chip type="custom" style="--chip-color-override: rgb(15, 118, 110)">Ticket</zn-chip>`);
+    const base = el.shadowRoot!.querySelector<HTMLElement>('[part="base"]')!;
+
+    expect(getComputedStyle(base).color).to.equal('rgb(15, 118, 110)');
+    expect(getComputedStyle(base).backgroundColor).to.match(/0\.1\)$/);
+  });
+
+  it('should use the text colour for a custom chip without an override', async () => {
+    const el = await fixture<HTMLElement>(html`<zn-chip type="custom">Ticket</zn-chip>`);
+    const neutral = await fixture<HTMLElement>(html`<zn-chip>Ticket</zn-chip>`);
+    const colour = (chip: HTMLElement) => getComputedStyle(chip.shadowRoot!.querySelector('[part="base"]')!).color;
+
+    expect(colour(el)).to.equal(colour(neutral));
+  });
 });