@kubex/zinc 1.1.78 → 1.1.79

package/dist/custom-elements.json

@@ -47,79 +47,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/action-bar/action-bar.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "ZnActionBar",
-          "cssProperties": [
-            {
-              "description": "An example CSS custom property.",
-              "name": "--example"
-            }
-          ],
-          "cssParts": [
-            {
-              "description": "The component's base wrapper.",
-              "name": "base"
-            }
-          ],
-          "slots": [
-            {
-              "description": "The default slot.",
-              "name": ""
-            },
-            {
-              "description": "An example slot.",
-              "name": "example"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "localize",
-              "privacy": "private",
-              "readonly": true,
-              "default": "new LocalizeController(this)"
-            }
-          ],
-          "events": [
-            {
-              "description": "Emitted as an example.",
-              "name": "zn-event-name"
-            }
-          ],
-          "superclass": {
-            "name": "ZincElement",
-            "module": "/src/internal/zinc-element"
-          },
-          "summary": "Short summary of the component's intended use.",
-          "tagNameWithoutPrefix": "action-bar",
-          "tagName": "zn-action-bar",
-          "customElement": true,
-          "jsDoc": "/**\n * @summary Short summary of the component's intended use.\n * @documentation https://zinc.style/components/action-bar\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 */",
-          "documentation": "https://zinc.style/components/action-bar",
-          "status": "experimental",
-          "since": "1.0",
-          "dependencies": [
-            "zn-example"
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "ZnActionBar",
-            "module": "components/action-bar/action-bar.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/alert/alert.js",
@@ -314,6 +241,79 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/action-bar/action-bar.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "ZnActionBar",
+          "cssProperties": [
+            {
+              "description": "An example CSS custom property.",
+              "name": "--example"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The component's base wrapper.",
+              "name": "base"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The default slot.",
+              "name": ""
+            },
+            {
+              "description": "An example slot.",
+              "name": "example"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "localize",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new LocalizeController(this)"
+            }
+          ],
+          "events": [
+            {
+              "description": "Emitted as an example.",
+              "name": "zn-event-name"
+            }
+          ],
+          "superclass": {
+            "name": "ZincElement",
+            "module": "/src/internal/zinc-element"
+          },
+          "summary": "Short summary of the component's intended use.",
+          "tagNameWithoutPrefix": "action-bar",
+          "tagName": "zn-action-bar",
+          "customElement": true,
+          "jsDoc": "/**\n * @summary Short summary of the component's intended use.\n * @documentation https://zinc.style/components/action-bar\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 */",
+          "documentation": "https://zinc.style/components/action-bar",
+          "status": "experimental",
+          "since": "1.0",
+          "dependencies": [
+            "zn-example"
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "ZnActionBar",
+            "module": "components/action-bar/action-bar.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/animated-button/animated-button.js",
@@ -44468,7 +44468,7 @@
   "package": {
     "name": "@kubex/zinc",
     "description": "A collection of web components for building web applications based off of @shoelace-style/Shoelace",
-    "version": "1.1.78",
+    "version": "1.1.79",
     "author": "",
     "license": "MIT"
   }

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

@@ -13,17 +13,6 @@
         }
       ]
     },
-    {
-      "name": "zn-action-bar",
-      "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.",
-      "attributes": [],
-      "references": [
-        {
-          "name": "Documentation",
-          "url": "https://zinc.style/components/action-bar"
-        }
-      ]
-    },
     {
       "name": "zn-alert",
       "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.",
@@ -64,6 +53,17 @@
         }
       ]
     },
+    {
+      "name": "zn-action-bar",
+      "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.",
+      "attributes": [],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://zinc.style/components/action-bar"
+        }
+      ]
+    },
     {
       "name": "zn-animated-button",
       "description": "\n---\n\n\n### **Methods:**\n - **purchase(): _void_** - Programmatically trigger the purchase flow\n- **setSuccess(): _void_** - Set the button to success state manually\n- **setFailure(message): _void_** - Set the button to failure state manually with optional error message\n- **reset(): _void_** - Reset the button to idle state",

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.78",
+  "version": "1.1.79",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -15,28 +15,6 @@
           "events": [],
           "js": { "properties": [], "events": [] }
         },
-        {
-          "name": "zn-action-bar",
-          "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.",
-          "doc-url": "",
-          "attributes": [],
-          "slots": [
-            { "name": "", "description": "The default slot." },
-            { "name": "example", "description": "An example slot." }
-          ],
-          "events": [
-            { "name": "zn-event-name", "description": "Emitted as an example." }
-          ],
-          "js": {
-            "properties": [],
-            "events": [
-              {
-                "name": "zn-event-name",
-                "description": "Emitted as an example."
-              }
-            ]
-          }
-        },
         {
           "name": "zn-alert",
           "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.",
@@ -105,6 +83,28 @@
             ]
           }
         },
+        {
+          "name": "zn-action-bar",
+          "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.",
+          "doc-url": "",
+          "attributes": [],
+          "slots": [
+            { "name": "", "description": "The default slot." },
+            { "name": "example", "description": "An example slot." }
+          ],
+          "events": [
+            { "name": "zn-event-name", "description": "Emitted as an example." }
+          ],
+          "js": {
+            "properties": [],
+            "events": [
+              {
+                "name": "zn-event-name",
+                "description": "Emitted as an example."
+              }
+            ]
+          }
+        },
         {
           "name": "zn-animated-button",
           "description": "\n---\n\n\n### **Methods:**\n - **purchase(): _void_** - Programmatically trigger the purchase flow\n- **setSuccess(): _void_** - Set the button to success state manually\n- **setFailure(message): _void_** - Set the button to failure state manually with optional error message\n- **reset(): _void_** - Reset the button to idle state",

package/dist/zn.min.js

@@ -3431,7 +3431,7 @@ ${va(this.code(o,t))}
           </div>
         </label>
       </div>
-    `}};Wt.styles=E(Lw),Wt.dependencies={"zn-icon":ct},c([F('input[type="radio"]')],Wt.prototype,"input",2),c([O()],Wt.prototype,"hasFocus",2),c([p()],Wt.prototype,"title",2),c([p()],Wt.prototype,"name",2),c([p()],Wt.prototype,"value",2),c([p({reflect:!0})],Wt.prototype,"size",2),c([p({type:Boolean,reflect:!0})],Wt.prototype,"disabled",2),c([p({type:Boolean,reflect:!0})],Wt.prototype,"checked",2),c([p({type:Boolean,reflect:!0})],Wt.prototype,"contained",2),c([p({type:Boolean,reflect:!0})],Wt.prototype,"horizontal",2),c([ee("checked")],Wt.prototype,"defaultChecked",2),c([p({reflect:!0})],Wt.prototype,"form",2),c([p({type:Boolean,reflect:!0})],Wt.prototype,"required",2),c([p({attribute:"description"})],Wt.prototype,"description",2),c([p()],Wt.prototype,"label",2),c([p({attribute:"label-tooltip"})],Wt.prototype,"labelTooltip",2),c([K("disabled",{waitUntilFirstUpdate:!0})],Wt.prototype,"handleDisabledChange",1),c([K(["checked"],{waitUntilFirstUpdate:!0})],Wt.prototype,"handleStateChange",1);var lA=Wt;Wt.define("zn-radio");var qw=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}:host *,:host *::before,:host *::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)}.form-control-input{margin:var(--zn-spacing-2x-small) 3px 3px 0}.form-control-input--flush{margin:0}.form-control .form-control__label{display:none}.form-control .form-control__help-text{display:none}.form-control--has-label .form-control__label{display:inline-block;color:var(--zn-input-label-color);font-weight:var(--zn-input-label-font-weight);line-height:var(--zn-input-label-line-height);margin-bottom:var(--zn-spacing-x-small)}.form-control--has-label.form-control--medium .form-control__label{font-size:var(--zn-input-label-font-size-medium)}.form-control--has-label.form-control--large .form-control__label{font-size:var(--zn-input-label-font-size-large)}:host([required]) .form-control--has-label .form-control__label::after{content:var(--zn-input-required-content);margin-inline-start:var(--zn-input-required-content-offset);color:var(--zn-input-required-content-color)}.form-control--has-label.form-control--radio-group .form-control__label,.form-control--has-label.form-control--checkbox-group .form-control__label{margin-bottom:0}.form-control--has-label.form-control--has-label-tooltip .form-control__label{display:inline-flex;align-items:center;gap:var(--zn-spacing-2x-small)}.form-control--has-label.form-control--small .form-control__label{font-size:var(--zn-input-label-font-size-small)}.form-control--label-tooltip{color:var(--zn-color-neutral-700);font-size:var(--zn-font-size-small)}.form-control--label-tooltip zn-icon{--icon-color:var(--zn-color-neutral-700);--icon-size:var(--zn-font-size-small)}.form-control--has-label.form-control--has-context-note{display:flex;justify-content:space-between;flex-wrap:wrap}.form-control__label-context-note{color:var(--zn-input-help-text-color);font-size:var(--zn-font-size-small);margin-bottom:var(--zn-spacing-2x-small)}.form-control--has-label.form-control--has-context-note .form-control-input{width:100%}.form-control--has-help-text .form-control__help-text,.radio--has-description .radio__description,.checkbox--has-description .checkbox__description{display:block;color:var(--zn-input-help-text-color);margin-top:var(--zn-spacing-x-small)}.radio--has-description .radio__description,.checkbox--has-description .checkbox__description{margin-top:0.375rem}.radio--has-selected-content .radio__selected-content,.checkbox--has-selected-content .checkbox__selected-content{display:block;margin-top:var(--zn-spacing-small)}.form-control--has-help-text.form-control--small .form-control__help-text{font-size:var(--zn-input-help-text-font-size-small)}.form-control--has-help-text.form-control--medium .form-control__help-text,.radio--has-description .radio__description,.checkbox--has-description .checkbox__description{font-size:var(--zn-input-help-text-font-size-medium)}.form-control--has-help-text.form-control--large .form-control__help-text{font-size:var(--zn-input-help-text-font-size-large)}.form-control--has-help-text.form-control--radio-group .form-control__help-text,.form-control--has-help-text.form-control--checkbox-group .form-control__help-text{margin-top:var(--zn-spacing-medium)}.form-control--has-help-text .switch .form-control__help-text{margin-top:var(--zn-spacing-3x-small)}.form-control--checkbox-contained-wrapper{height:100%}:host{--symbol-color:rgb(var(--zn-border-color));--symbol-color-active:var(--zn-color-amber-400);--symbol-size:1.2rem;--symbol-spacing:4px;--preview-color:rgb(var(--zn-text));--preview-size:0.875rem;display:block}.rating{position:relative;display:inline-flex;align-items:center;border-radius:var(--zn-border-radius);vertical-align:middle}.rating:focus{outline:none}.rating:focus-visible{outline:rgb(var(--zn-primary));outline-offset:2px}.rating__symbols{display:inline-flex;position:relative;font-size:var(--symbol-size);line-height:0;color:var(--symbol-color);white-space:nowrap;cursor:pointer}.rating__symbols>*{padding:var(--symbol-spacing)}.rating__symbol--active,.rating__partial--filled{color:var(--symbol-color-active)}.rating__partial-symbol-container{position:relative}.rating__partial--filled{position:absolute;top:var(--symbol-spacing);left:var(--symbol-spacing)}.rating__symbol{transition:var(--zn-transition-fast) scale;pointer-events:none}.rating__symbol--hover{scale:1.2}.rating__preview{margin-left:var(--symbol-spacing);font-size:var(--preview-size);font-weight:var(--zn-font-weight-semibold);line-height:1;color:var(--preview-color);font-variant-numeric:tabular-nums;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.rating__preview--hover{color:var(--symbol-color-active)}.rating--disabled .rating__symbols,.rating--readonly .rating__symbols{cursor:default}.rating--disabled .rating__symbol--hover,.rating--readonly .rating__symbol--hover{scale:none}.rating--disabled .rating__preview--hover,.rating--readonly .rating__preview--hover{color:var(--preview-color)}.rating--disabled{opacity:0.5}.rating--disabled .rating__symbols{cursor:not-allowed}.rating--small{--symbol-size:1rem;--symbol-spacing:2px}.rating--medium{--symbol-size:1.2rem}.rating--large{--symbol-size:1.5rem;--symbol-spacing:6px}`;var ve=class extends C{constructor(){super(...arguments);this.formControlController=new ot(this,{assumeInteractionOn:["zn-blur","zn-input"]});this.hasSlotController=new Q(this,"help-text");this.hoverValue=0;this.isHovering=!1;this.helpText="";this.value=0;this.max=5;this.precision=1;this.readonly=!1;this.disabled=!1;this.preview=!1;this.size="medium";this.getSymbol=()=>'<zn-icon src="star" library="material"></zn-icon>'}get validity(){return ge}get validationMessage(){return""}checkValidity(){return!0}getForm(){return this.formControlController.getForm()}reportValidity(){return!0}setCustomValidity(){this.formControlController.updateValidity()}_roundToPrecision(t,r){let n=1/r;return Math.ceil(t*n)/n}_getValueFromXCoordinate(t){let{left:r,width:n}=this.symbols.getBoundingClientRect(),a=this._roundToPrecision((t-r)/n*this.max,this.precision);return Math.min(Math.max(a,0),this.max)}_formatValue(t){let r=String(this.precision).split(".")[1]?.length??0;return t.toFixed(r)}_getValueFromMousePosition(t){return this._getValueFromXCoordinate(t.clientX)}_getValueFromTouchPosition(t){return this._getValueFromXCoordinate(t.touches[0].clientX)}_setValue(t){this.disabled||this.readonly||(this.value=t===this.value?0:t,this.isHovering=!1)}_handleClick(t){this.readonly||this.disabled||this._setValue(this._getValueFromMousePosition(t))}_handleMouseEnter(t){this.isHovering=!0,this.hoverValue=this._getValueFromMousePosition(t)}_handleMouseMove(t){this.hoverValue=this._getValueFromMousePosition(t)}_handleMouseLeave(){this.isHovering=!1}_handleTouchStart(t){this.isHovering=!0,this.hoverValue=this._getValueFromTouchPosition(t)}_handleTouchMove(t){this.hoverValue=this._getValueFromTouchPosition(t)}_handleTouchEnd(t){this.isHovering=!1,this._setValue(this._getValueFromXCoordinate(t.changedTouches[0].clientX)),t.preventDefault()}render(){let t=Array.from(Array(this.max).keys()),r=this.helpText?!0:this.hasSlotController.test("help-text"),n=0;return this.disabled||this.readonly?n=this.value:n=this.isHovering?this.hoverValue:this.value,u`
+    `}};Wt.styles=E(Lw),Wt.dependencies={"zn-icon":ct},c([F('input[type="radio"]')],Wt.prototype,"input",2),c([O()],Wt.prototype,"hasFocus",2),c([p()],Wt.prototype,"title",2),c([p()],Wt.prototype,"name",2),c([p()],Wt.prototype,"value",2),c([p({reflect:!0})],Wt.prototype,"size",2),c([p({type:Boolean,reflect:!0})],Wt.prototype,"disabled",2),c([p({type:Boolean,reflect:!0})],Wt.prototype,"checked",2),c([p({type:Boolean,reflect:!0})],Wt.prototype,"contained",2),c([p({type:Boolean,reflect:!0})],Wt.prototype,"horizontal",2),c([ee("checked")],Wt.prototype,"defaultChecked",2),c([p({reflect:!0})],Wt.prototype,"form",2),c([p({type:Boolean,reflect:!0})],Wt.prototype,"required",2),c([p({attribute:"description"})],Wt.prototype,"description",2),c([p()],Wt.prototype,"label",2),c([p({attribute:"label-tooltip"})],Wt.prototype,"labelTooltip",2),c([K("disabled",{waitUntilFirstUpdate:!0})],Wt.prototype,"handleDisabledChange",1),c([K(["checked"],{waitUntilFirstUpdate:!0})],Wt.prototype,"handleStateChange",1);var lA=Wt;Wt.define("zn-radio");var qw=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}:host *,:host *::before,:host *::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)}.form-control-input{margin:var(--zn-spacing-2x-small) 3px 3px 0}.form-control-input--flush{margin:0}.form-control .form-control__label{display:none}.form-control .form-control__help-text{display:none}.form-control--has-label .form-control__label{display:inline-block;color:var(--zn-input-label-color);font-weight:var(--zn-input-label-font-weight);line-height:var(--zn-input-label-line-height);margin-bottom:var(--zn-spacing-x-small)}.form-control--has-label.form-control--medium .form-control__label{font-size:var(--zn-input-label-font-size-medium)}.form-control--has-label.form-control--large .form-control__label{font-size:var(--zn-input-label-font-size-large)}:host([required]) .form-control--has-label .form-control__label::after{content:var(--zn-input-required-content);margin-inline-start:var(--zn-input-required-content-offset);color:var(--zn-input-required-content-color)}.form-control--has-label.form-control--radio-group .form-control__label,.form-control--has-label.form-control--checkbox-group .form-control__label{margin-bottom:0}.form-control--has-label.form-control--has-label-tooltip .form-control__label{display:inline-flex;align-items:center;gap:var(--zn-spacing-2x-small)}.form-control--has-label.form-control--small .form-control__label{font-size:var(--zn-input-label-font-size-small)}.form-control--label-tooltip{color:var(--zn-color-neutral-700);font-size:var(--zn-font-size-small)}.form-control--label-tooltip zn-icon{--icon-color:var(--zn-color-neutral-700);--icon-size:var(--zn-font-size-small)}.form-control--has-label.form-control--has-context-note{display:flex;justify-content:space-between;flex-wrap:wrap}.form-control__label-context-note{color:var(--zn-input-help-text-color);font-size:var(--zn-font-size-small);margin-bottom:var(--zn-spacing-2x-small)}.form-control--has-label.form-control--has-context-note .form-control-input{width:100%}.form-control--has-help-text .form-control__help-text,.radio--has-description .radio__description,.checkbox--has-description .checkbox__description{display:block;color:var(--zn-input-help-text-color);margin-top:var(--zn-spacing-x-small)}.radio--has-description .radio__description,.checkbox--has-description .checkbox__description{margin-top:0.375rem}.radio--has-selected-content .radio__selected-content,.checkbox--has-selected-content .checkbox__selected-content{display:block;margin-top:var(--zn-spacing-small)}.form-control--has-help-text.form-control--small .form-control__help-text{font-size:var(--zn-input-help-text-font-size-small)}.form-control--has-help-text.form-control--medium .form-control__help-text,.radio--has-description .radio__description,.checkbox--has-description .checkbox__description{font-size:var(--zn-input-help-text-font-size-medium)}.form-control--has-help-text.form-control--large .form-control__help-text{font-size:var(--zn-input-help-text-font-size-large)}.form-control--has-help-text.form-control--radio-group .form-control__help-text,.form-control--has-help-text.form-control--checkbox-group .form-control__help-text{margin-top:var(--zn-spacing-medium)}.form-control--has-help-text .switch .form-control__help-text{margin-top:var(--zn-spacing-3x-small)}.form-control--checkbox-contained-wrapper{height:100%}:host{--symbol-color:rgb(var(--zn-border-color));--symbol-color-active:var(--zn-color-amber-400);--symbol-size:1.2rem;--symbol-spacing:var(--zn-spacing-x-small);--preview-color:rgb(var(--zn-text));--preview-size:0.875rem;display:block}.rating{position:relative;display:inline-flex;align-items:center;border-radius:var(--zn-border-radius);vertical-align:middle}.rating:focus{outline:none}.rating:focus-visible{outline:rgb(var(--zn-primary));outline-offset:2px}.rating__symbols{display:inline-flex;position:relative;gap:var(--symbol-spacing);font-size:var(--symbol-size);line-height:0;color:var(--symbol-color);white-space:nowrap;cursor:pointer}.rating__symbol--active,.rating__partial--filled{color:var(--symbol-color-active)}.rating__partial-symbol-container{position:relative}.rating__partial--filled{position:absolute;top:0;left:0}.rating__symbol{transition:var(--zn-transition-fast) scale;pointer-events:none}.rating__symbol--hover{scale:1.2}.rating__preview{margin-left:var(--symbol-spacing);font-size:var(--preview-size);font-weight:var(--zn-font-weight-semibold);line-height:1;color:var(--preview-color);font-variant-numeric:tabular-nums;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.rating__preview--hover{color:var(--symbol-color-active)}.rating--disabled .rating__symbols,.rating--readonly .rating__symbols{cursor:default}.rating--disabled .rating__symbol--hover,.rating--readonly .rating__symbol--hover{scale:none}.rating--disabled .rating__preview--hover,.rating--readonly .rating__preview--hover{color:var(--preview-color)}.rating--disabled{opacity:0.5}.rating--disabled .rating__symbols{cursor:not-allowed}.rating--small{--symbol-size:1rem;--symbol-spacing:var(--zn-spacing-2x-small)}.rating--medium{--symbol-size:1.2rem}.rating--large{--symbol-size:1.5rem;--symbol-spacing:12px}`;var ve=class extends C{constructor(){super(...arguments);this.formControlController=new ot(this,{assumeInteractionOn:["zn-blur","zn-input"]});this.hasSlotController=new Q(this,"help-text");this.hoverValue=0;this.isHovering=!1;this.helpText="";this.value=0;this.max=5;this.precision=1;this.readonly=!1;this.disabled=!1;this.preview=!1;this.size="medium";this.getSymbol=()=>'<zn-icon src="star" library="material"></zn-icon>'}get validity(){return ge}get validationMessage(){return""}checkValidity(){return!0}getForm(){return this.formControlController.getForm()}reportValidity(){return!0}setCustomValidity(){this.formControlController.updateValidity()}_roundToPrecision(t,r){let n=1/r;return Math.ceil(t*n)/n}_getValueFromXCoordinate(t){let{left:r,width:n}=this.symbols.getBoundingClientRect(),a=parseFloat(getComputedStyle(this.symbols).columnGap)||0,s=(n-a*(this.max-1))/this.max,l=s+a,d=Math.min(Math.max(t-r,0),n),h=Math.min(Math.floor(d/l),this.max-1),m=Math.min((d-h*l)/s,1),f=this._roundToPrecision(h+m,this.precision);return Math.min(Math.max(f,0),this.max)}_formatValue(t){let r=String(this.precision).split(".")[1]?.length??0;return t.toFixed(r)}_getValueFromMousePosition(t){return this._getValueFromXCoordinate(t.clientX)}_getValueFromTouchPosition(t){return this._getValueFromXCoordinate(t.touches[0].clientX)}_setValue(t){this.disabled||this.readonly||(this.value=t===this.value?0:t,this.isHovering=!1)}_handleClick(t){this.readonly||this.disabled||this._setValue(this._getValueFromMousePosition(t))}_handleMouseEnter(t){this.isHovering=!0,this.hoverValue=this._getValueFromMousePosition(t)}_handleMouseMove(t){this.hoverValue=this._getValueFromMousePosition(t)}_handleMouseLeave(){this.isHovering=!1}_handleTouchStart(t){this.isHovering=!0,this.hoverValue=this._getValueFromTouchPosition(t)}_handleTouchMove(t){this.hoverValue=this._getValueFromTouchPosition(t)}_handleTouchEnd(t){this.isHovering=!1,this._setValue(this._getValueFromXCoordinate(t.changedTouches[0].clientX)),t.preventDefault()}render(){let t=Array.from(Array(this.max).keys()),r=this.helpText?!0:this.hasSlotController.test("help-text"),n=0;return this.disabled||this.readonly?n=this.value:n=this.isHovering?this.hoverValue:this.value,u`
       <div
         part="form-control"
         class="${D({"form-control":!0,"form-control--small":this.size==="small","form-control--medium":this.size==="medium","form-control--large":this.size==="large","form-control--has-help-text":r})}">

package/docs/pages/components/rating.md

@@ -328,7 +328,8 @@ Available CSS custom properties:
 - `--symbol-color` - Color of unfilled symbols
 - `--symbol-color-active` - Color of filled/active symbols
 - `--symbol-size` - Size of the symbols
-- `--symbol-spacing` - Spacing between symbols
+- `--symbol-spacing` - Gap between symbols. The rating adds no padding of its own, so the first symbol sits flush with
+  the component's edge and lines up with other form controls.
 - `--preview-color` - Color of the preview value (see [Preview](#preview))
 - `--preview-size` - Font size of the preview value
 

package/package.json

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

package/src/components/rating/rating.component.ts

@@ -112,7 +112,16 @@ export default class ZnRating extends ZincElement implements ZincFormControl {
 
   private _getValueFromXCoordinate(coordinate: number): number {
     const {left, width} = this.symbols.getBoundingClientRect();
-    const value = this._roundToPrecision(((coordinate - left) / width) * this.max, this.precision);
+    // Symbols are spaced with a gap rather than padding, so the symbols only cover part of the
+    // container and a plain width-to-value ratio would skew fractions within each symbol.
+    const gap = parseFloat(getComputedStyle(this.symbols).columnGap) || 0;
+    const symbolWidth = (width - gap * (this.max - 1)) / this.max;
+    const stride = symbolWidth + gap;
+    const position = Math.min(Math.max(coordinate - left, 0), width);
+    const index = Math.min(Math.floor(position / stride), this.max - 1);
+    // Landing in a gap reads as the preceding symbol being complete.
+    const fraction = Math.min((position - index * stride) / symbolWidth, 1);
+    const value = this._roundToPrecision(index + fraction, this.precision);
 
     return Math.min(Math.max(value, 0), this.max);
   }

package/src/components/rating/rating.scss

@@ -5,7 +5,7 @@
   --symbol-color: rgb(var(--zn-border-color));
   --symbol-color-active: var(--zn-color-amber-400);
   --symbol-size: 1.2rem;
-  --symbol-spacing: 4px;
+  --symbol-spacing: var(--zn-spacing-x-small);
   --preview-color: rgb(var(--zn-text));
   --preview-size: 0.875rem;
 
@@ -31,15 +31,12 @@
   &__symbols {
     display: inline-flex;
     position: relative;
+    gap: var(--symbol-spacing);
     font-size: var(--symbol-size);
     line-height: 0;
     color: var(--symbol-color);
     white-space: nowrap;
     cursor: pointer;
-
-    > * {
-      padding: var(--symbol-spacing);
-    }
   }
 
   &__symbol--active,
@@ -53,8 +50,8 @@
 
   &__partial--filled {
     position: absolute;
-    top: var(--symbol-spacing);
-    left: var(--symbol-spacing);
+    top: 0;
+    left: 0;
   }
 
   &__symbol {
@@ -106,7 +103,7 @@
 
   &--small {
     --symbol-size: 1rem;
-    --symbol-spacing: 2px;
+    --symbol-spacing: var(--zn-spacing-2x-small);
   }
 
   &--medium {
@@ -115,6 +112,6 @@
 
   &--large {
     --symbol-size: 1.5rem;
-    --symbol-spacing: 6px;
+    --symbol-spacing: 12px;
   }
 }