@citolab/qti-components 6.9.1-beta.71 → 6.9.1-beta.73

package/dist/index.min.js

@@ -23,7 +23,7 @@ Make sure to test your application with a production build as repeat registratio
     <xsl:apply-templates/>
   </xsl:element>
 </xsl:template>
-</xsl:stylesheet>`;function mi(s,t,e){s.querySelectorAll(t).forEach(r=>{let i=`${t}-${e}`,o=gi(r,i);r.replaceWith(o)})}function fi(s,t){s.querySelectorAll("*").forEach(e=>{let r=e.classList;r&&r.forEach(i=>{if(i.startsWith(`${t}:`)){let o=i.slice(`${t}:`.length),n=`${e.nodeName}-${o}`,a=gi(e,n);e.replaceWith(a)}})})}function gi(s,t){let e=document.createElement(t);for(let r of s.attributes)e.setAttribute(r.name,r.value);for(;s.firstChild;)e.appendChild(s.firstChild);return e}function bi(s){let t=[];return s.querySelectorAll("qti-assessment-item-ref").forEach(e=>{let r=e.getAttribute("identifier"),i=e.getAttribute("href"),o=e.getAttribute("category");t.push({identifier:r,href:i,category:o})}),t}var lr=null;function qe(s,t=!1){return t&&lr!==null&&lr.abort(),new Promise((e,r)=>{let i=new XMLHttpRequest;lr=i,i.open("GET",s,!0),i.responseType="document",i.onload=()=>{i.status>=200&&i.status<300?e(i.responseXML):r(i.statusText)},i.onerror=()=>{r(i.statusText)},i.send()})}function Ae(s){return new DOMParser().parseFromString(s,"text/xml")}function Te(s){let t=new XSLTProcessor,e=new DOMParser().parseFromString(hs,"text/xml");return t.importStylesheet(e),t.transformToFragment(s,document)}function vi(s,t){t.endsWith("/")||(t+="/"),s.querySelectorAll("[src],[href],[primary-path]").forEach(e=>{var o;let r="";e.getAttribute("src")&&(r="src"),e.getAttribute("href")&&(r="href"),e.getAttribute("primary-path")&&(r="primary-path");let i=(o=e.getAttribute(r))==null?void 0:o.trim();if(!i.startsWith("data:")&&!i.startsWith("http")){let n=t+encodeURI(i);e.setAttribute(r,n)}})}function yi(s){s.querySelectorAll('qti-custom-operator[class="js.org"] > qti-base-value').forEach(e=>{let r=document.createComment(e.textContent);e.replaceChild(r,e.firstChild)})}function xi(s){s.querySelectorAll("qti-stylesheet").forEach(t=>t.remove())}var St=()=>{let s,t={async load(e,r=!1){return new Promise((i,o)=>{qe(e,r).then(n=>(s=n,t.path(e.substring(0,e.lastIndexOf("/"))),i(t)))})},parse(e){return s=Ae(e),t},path:e=>(vi(s,e),t),fn(e){return e(s),t},pciHooks(e){let r=["hook","module"],i=e.substring(0,e.lastIndexOf("/"));for(let o of r)s.querySelectorAll("["+o+"]").forEach(a=>{let c=a.getAttribute(o);!c.startsWith("data:")&&!c.startsWith("http")&&(a.setAttribute("base-url",e),a.setAttribute("module",i+"/"+encodeURI(c+(c.endsWith(".js")?"":".js"))))});return t},extendElementName:(e,r)=>(mi(s,e,r),t),extendElementsWithClass:(e="extend")=>(fi(s,e),t),customInteraction(e,r){let i=s.querySelector("qti-custom-interaction"),o=i.querySelector("object");return i.setAttribute("data-base-ref",e),i.setAttribute("data-base-item",e+r),i.setAttribute("data",o.getAttribute("data")),i.setAttribute("width",o.getAttribute("width")),i.setAttribute("height",o.getAttribute("height")),i.removeChild(o),t},convertCDATAtoComment(){return yi(s),t},stripStyleSheets(){return xi(s),t},html(){return new XMLSerializer().serializeToString(Te(s))},xml(){return new XMLSerializer().serializeToString(s)},htmlDoc(){return Te(s)},xmlDoc(){return s}};return t};var Ei=()=>{let s,t={async load(e){return new Promise((r,i)=>{qe(e).then(o=>(s=o,r(t)))})},parse(e){s=Ae(e)},assessmentTest(){let e=s.querySelector('resource[type="imsqti_test_xmlv3p0"]');return{href:e.getAttribute("href"),identifier:e.getAttribute("identifier")}}};return t};var cr=()=>{let s,t={async load(e){return new Promise((r,i)=>{qe(e).then(o=>(s=o,r(t)))})},parse(e){return s=Ae(e),t},fn(e){return e(s),t},items(){return bi(s)},html(){return new XMLSerializer().serializeToString(Te(s))},xml(){return new XMLSerializer().serializeToString(s)},htmlDoc(){return Te(s)},xmlDoc(){return s}};return t};var Se=class extends v{constructor(){super(...arguments);this.identifier="";this.href=""}async connectedCallback(){super.connectedCallback();let e=new Event("qti-assessment-stimulus-ref-connected",{cancelable:!0,bubbles:!0});if(this.dispatchEvent(e)){let o=this.closest("qti-assessment-item").querySelector(`[data-stimulus-idref=${this.identifier}]`);o?await this.updateStimulusRef(o):console.warn(`Stimulus with data-stimulus-idref ${this.identifier} not found`)}}async updateStimulusRef(e){let r=this.href.substring(0,this.href.lastIndexOf("/")),i=await St().load(this.href).then(o=>o.path(r).htmlDoc());if(i){let o=i.querySelectorAll("qti-stimulus-body, qti-stylesheet");e.innerHTML="",e.append(...o)}}};l([d({type:String})],Se.prototype,"identifier",2),l([d({type:String})],Se.prototype,"href",2),Se=l([h("qti-assessment-stimulus-ref")],Se);var Ci={toAttribute:s=>s?"true":"false",fromAttribute:s=>s==="true"};function O(s,t){class e extends s{constructor(...o){super(...o);this.identifier="";this.tabIndex=0;this.disabled=!1;this.readonly=!1;this.internals=this.attachInternals()}handleDisabledChange(o,n){this.tabIndex=n?-1:0,n&&this.blur()}connectedCallback(){super.connectedCallback(),this.addEventListener("keyup",this._onKeyUp),this.addEventListener("click",this._onClick),this.dispatchEvent(new CustomEvent(`register-${t}`,{bubbles:!0,composed:!0}))}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("keyup",this._onKeyUp),this.removeEventListener("click",this._onClick),this.dispatchEvent(new CustomEvent(`unregister-${t}`,{bubbles:!0,composed:!0}))}_onKeyUp(o){o.altKey||o.code==="Space"&&(o.preventDefault(),this._activate())}_onClick(){this.disabled||this.readonly||(this.focus(),this._activate())}_activate(){this.disabled||this.readonly||this.dispatchEvent(new CustomEvent(`activate-${t}`,{bubbles:!0,composed:!0,detail:{identifier:this.identifier}}))}render(){return u`<slot></slot>`}}return l([d({type:String})],e.prototype,"identifier",2),l([d({type:Number,reflect:!0,attribute:"tabindex"})],e.prototype,"tabIndex",2),l([d({type:Boolean,reflect:!0,attribute:"aria-disabled",converter:Ci})],e.prototype,"disabled",2),l([d({type:Boolean,reflect:!0,attribute:"aria-readonly",converter:Ci})],e.prototype,"readonly",2),l([M("disabled",{waitUntilFirstUpdate:!0})],e.prototype,"handleDisabledChange",1),e}var _i=g`
+</xsl:stylesheet>`;function mi(s,t,e){s.querySelectorAll(t).forEach(r=>{let i=`${t}-${e}`,o=gi(r,i);r.replaceWith(o)})}function fi(s,t){s.querySelectorAll("*").forEach(e=>{let r=e.classList;r&&r.forEach(i=>{if(i.startsWith(`${t}:`)){let o=i.slice(`${t}:`.length),n=`${e.nodeName}-${o}`,a=gi(e,n);e.replaceWith(a)}})})}function gi(s,t){let e=document.createElement(t);for(let r of s.attributes)e.setAttribute(r.name,r.value);for(;s.firstChild;)e.appendChild(s.firstChild);return e}function bi(s){let t=[];return s.querySelectorAll("qti-assessment-item-ref").forEach(e=>{let r=e.getAttribute("identifier"),i=e.getAttribute("href"),o=e.getAttribute("category");t.push({identifier:r,href:i,category:o})}),t}var lr=null;function qe(s,t=!1){return t&&lr!==null&&lr.abort(),new Promise((e,r)=>{let i=new XMLHttpRequest;lr=i,i.open("GET",s,!0),i.responseType="document",i.onload=()=>{i.status>=200&&i.status<300?e(i.responseXML):r(i.statusText)},i.onerror=()=>{r(i.statusText)},i.send()})}function Ae(s){return new DOMParser().parseFromString(s,"text/xml")}function Te(s){let t=new XSLTProcessor,e=new DOMParser().parseFromString(hs,"text/xml");return t.importStylesheet(e),t.transformToFragment(s,document)}function vi(s,t){t.endsWith("/")||(t+="/"),s.querySelectorAll("[src],[href],[primary-path]").forEach(e=>{var o;let r="";e.getAttribute("src")&&(r="src"),e.getAttribute("href")&&(r="href"),e.getAttribute("primary-path")&&(r="primary-path");let i=(o=e.getAttribute(r))==null?void 0:o.trim();if(!i.startsWith("data:")&&!i.startsWith("http")){let n=t+encodeURI(i);e.setAttribute(r,n)}})}function yi(s){s.querySelectorAll('qti-custom-operator[class="js.org"] > qti-base-value').forEach(e=>{let r=document.createComment(e.textContent);e.replaceChild(r,e.firstChild)})}function xi(s){s.querySelectorAll("qti-stylesheet").forEach(t=>t.remove())}var St=()=>{let s,t={async load(e,r=!1){return new Promise((i,o)=>{qe(e,r).then(n=>(s=n,t.path(e.substring(0,e.lastIndexOf("/"))),i(t)))})},parse(e){return s=Ae(e),t},path:e=>(vi(s,e),t),fn(e){return e(s),t},pciHooks(e){let r=["hook","module"],i=e.substring(0,e.lastIndexOf("/"));for(let o of r)s.querySelectorAll("["+o+"]").forEach(a=>{let c=a.getAttribute(o);!c.startsWith("data:")&&!c.startsWith("http")&&(a.setAttribute("base-url",e),a.setAttribute("module",i+"/"+encodeURI(c+(c.endsWith(".js")?"":".js"))))});return t},extendElementName:(e,r)=>(mi(s,e,r),t),extendElementsWithClass:(e="extend")=>(fi(s,e),t),customInteraction(e,r){let i=s.querySelector("qti-custom-interaction"),o=i.querySelector("object");return i.setAttribute("data-base-ref",e),i.setAttribute("data-base-item",e+r),i.setAttribute("data",o.getAttribute("data")),i.setAttribute("width",o.getAttribute("width")),i.setAttribute("height",o.getAttribute("height")),i.removeChild(o),t},convertCDATAtoComment(){return yi(s),t},stripStyleSheets(){return xi(s),t},html(){return new XMLSerializer().serializeToString(Te(s))},xml(){return new XMLSerializer().serializeToString(s)},htmlDoc(){return Te(s)},xmlDoc(){return s}};return t};var Ei=()=>{let s,t={async load(e){return new Promise((r,i)=>{qe(e).then(o=>(s=o,r(t)))})},parse(e){s=Ae(e)},assessmentTest(){let e=s.querySelector('resource[type="imsqti_test_xmlv3p0"]');return{href:e.getAttribute("href"),identifier:e.getAttribute("identifier")}}};return t};var cr=()=>{let s,t={async load(e){return new Promise((r,i)=>{qe(e).then(o=>(s=o,r(t)))})},parse(e){return s=Ae(e),t},fn(e){return e(s),t},items(){return bi(s)},html(){return new XMLSerializer().serializeToString(Te(s))},xml(){return new XMLSerializer().serializeToString(s)},htmlDoc(){return Te(s)},xmlDoc(){return s}};return t};var Se=class extends v{constructor(){super(...arguments);this.identifier="";this.href=""}async connectedCallback(){super.connectedCallback();let e=new Event("qti-assessment-stimulus-ref-connected",{cancelable:!0,bubbles:!0});if(this.dispatchEvent(e)){let o=this.closest("qti-assessment-item").querySelector(`[data-stimulus-idref=${this.identifier}]`);o?await this.updateStimulusRef(o):console.warn(`Stimulus with data-stimulus-idref ${this.identifier} not found`)}}async updateStimulusRef(e){let r=this.href.substring(0,this.href.lastIndexOf("/")),i=await St().load(this.href).then(o=>o.htmlDoc());if(i){let o=i.querySelectorAll("qti-stimulus-body, qti-stylesheet");e.innerHTML="",e.append(...o)}}};l([d({type:String})],Se.prototype,"identifier",2),l([d({type:String})],Se.prototype,"href",2),Se=l([h("qti-assessment-stimulus-ref")],Se);var Ci={toAttribute:s=>s?"true":"false",fromAttribute:s=>s==="true"};function O(s,t){class e extends s{constructor(...o){super(...o);this.identifier="";this.tabIndex=0;this.disabled=!1;this.readonly=!1;this.internals=this.attachInternals()}handleDisabledChange(o,n){this.tabIndex=n?-1:0,n&&this.blur()}connectedCallback(){super.connectedCallback(),this.addEventListener("keyup",this._onKeyUp),this.addEventListener("click",this._onClick),this.dispatchEvent(new CustomEvent(`register-${t}`,{bubbles:!0,composed:!0}))}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("keyup",this._onKeyUp),this.removeEventListener("click",this._onClick),this.dispatchEvent(new CustomEvent(`unregister-${t}`,{bubbles:!0,composed:!0}))}_onKeyUp(o){o.altKey||o.code==="Space"&&(o.preventDefault(),this._activate())}_onClick(){this.disabled||this.readonly||(this.focus(),this._activate())}_activate(){this.disabled||this.readonly||this.dispatchEvent(new CustomEvent(`activate-${t}`,{bubbles:!0,composed:!0,detail:{identifier:this.identifier}}))}render(){return u`<slot></slot>`}}return l([d({type:String})],e.prototype,"identifier",2),l([d({type:Number,reflect:!0,attribute:"tabindex"})],e.prototype,"tabIndex",2),l([d({type:Boolean,reflect:!0,attribute:"aria-disabled",converter:Ci})],e.prototype,"disabled",2),l([d({type:Boolean,reflect:!0,attribute:"aria-readonly",converter:Ci})],e.prototype,"readonly",2),l([M("disabled",{waitUntilFirstUpdate:!0})],e.prototype,"handleDisabledChange",1),e}var _i=g`
   :host {
     display: block;
   }
@@ -485,7 +485,7 @@ Make sure to test your application with a production build as repeat registratio
       <!-- slot for the prompt -->
       <slot></slot>
       <!-- slot for the image and hotspots -->
-    `}positionHotspotOnRegister(t){let e=this.querySelector("img"),r=t.target,i=r.getAttribute("coords"),o=r.getAttribute("shape"),n=i.split(",").map(a=>parseInt(a));De(o,n,e,r)}connectedCallback(){super.connectedCallback(),this.addEventListener("qti-register-choice",this.positionHotspotOnRegister)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("qti-register-choice",this.positionHotspotOnRegister)}};pt.styles=[g`
+    `}positionHotspotOnRegister(t){let e=this.querySelector("img"),r=t.target,i=r.getAttribute("coords"),o=r.getAttribute("shape"),n=i.split(",").map(a=>parseInt(a));De(o,n,e,r)}connectedCallback(){super.connectedCallback(),this.addEventListener("register-qti-hotspot-choice",this.positionHotspotOnRegister)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("unregister-qti-hotspot-choice",this.positionHotspotOnRegister)}};pt.styles=[g`
       slot:not([name='prompt']) {
         position: relative; /* qti-hotspot-choice relative to the slot */
         display: block;

package/dist/item.css

@@ -304,6 +304,14 @@
   background-color: var(--qti-bg-active);
 }
 
+.act-bg {
+  background-color: var(--qti-bg-active);
+}
+
+.act-bor {
+  border-color: var(--qti-border-active);
+}
+
 /* Apply .rdo for readonly state */
 
 .rdo {
@@ -1075,11 +1083,11 @@
 }
 
 .qti-height-1-3 {
-  height: 33.333333%;
+  height: 33.3333%;
 }
 
 .qti-height-2-3 {
-  height: 66.666667%;
+  height: 66.6667%;
 }
 
 .qti-height-1-4 {
@@ -1111,11 +1119,11 @@
 }
 
 .qti-height-1-6 {
-  height: 16.666667%;
+  height: 16.6667%;
 }
 
 .qti-height-2-6 {
-  height: 33.333333%;
+  height: 33.3333%;
 }
 
 .qti-height-3-6 {
@@ -1123,11 +1131,11 @@
 }
 
 .qti-height-4-6 {
-  height: 66.666667%;
+  height: 66.6667%;
 }
 
 .qti-height-5-6 {
-  height: 83.333333%;
+  height: 83.3333%;
 }
 
 .qti-height-auto {
@@ -1291,11 +1299,11 @@
 }
 
 .qti-width-1-3 {
-  width: 33.333333%;
+  width: 33.3333%;
 }
 
 .qti-width-2-3 {
-  width: 66.666667%;
+  width: 66.6667%;
 }
 
 .qti-width-1-4 {
@@ -1327,11 +1335,11 @@
 }
 
 .qti-width-1-6 {
-  width: 16.666667%;
+  width: 16.6667%;
 }
 
 .qti-width-2-6 {
-  width: 33.333333%;
+  width: 33.3333%;
 }
 
 .qti-width-3-6 {
@@ -1339,19 +1347,19 @@
 }
 
 .qti-width-4-6 {
-  width: 66.666667%;
+  width: 66.6667%;
 }
 
 .qti-width-5-6 {
-  width: 83.333333%;
+  width: 83.3333%;
 }
 
 .qti-width-1-12 {
-  width: 8.333333%;
+  width: 8.3333%;
 }
 
 .qti-width-2-12 {
-  width: 16.666667%;
+  width: 16.6667%;
 }
 
 .qti-width-3-12 {
@@ -1359,11 +1367,11 @@
 }
 
 .qti-width-4-12 {
-  width: 33.333333%;
+  width: 33.3333%;
 }
 
 .qti-width-5-12 {
-  width: 41.666667%;
+  width: 41.6667%;
 }
 
 .qti-width-6-12 {
@@ -1371,11 +1379,11 @@
 }
 
 .qti-width-7-12 {
-  width: 58.333333%;
+  width: 58.3333%;
 }
 
 .qti-width-8-12 {
-  width: 66.666667%;
+  width: 66.6667%;
 }
 
 .qti-width-9-12 {
@@ -1383,11 +1391,11 @@
 }
 
 .qti-width-10-12 {
-  width: 83.333333%;
+  width: 83.3333%;
 }
 
 .qti-width-11-12 {
-  width: 91.666667%;
+  width: 91.6667%;
 }
 
 .qti-width-full,
@@ -2078,6 +2086,7 @@ qti-response-declaration {
       width: fit-content;
       cursor: pointer;
 
+      &:state(correct-response),
       &[data-correct-response='true'] {
         &::after {
           content: '\02714';
@@ -2093,14 +2102,6 @@ qti-response-declaration {
   }
 
   qti-text-entry-interaction {
-    &:hover {
-      background-color: var(--qti-hover-bg);
-    }
-
-    &:focus-within {
-      box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
-    }
-
     &::part(input) {
       border-radius: 0;
       cursor: text;
@@ -2109,6 +2110,17 @@ qti-response-declaration {
       border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
       outline: none;
     }
+
+    &:hover {
+      background-color: var(--qti-hover-bg);
+    }
+
+    &:focus-within {
+      &::part(input) {
+        box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
+        border-color: var(--qti-border-active);
+      }
+    }
   }
 
   qti-extended-text-interaction {
@@ -2126,7 +2138,10 @@ qti-response-declaration {
     }
 
     &:focus-within {
-      box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
+      &::part(textarea) {
+        box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
+        border-color: var(--qti-border-active);
+      }
     }
   }
 
@@ -2246,11 +2261,12 @@ qti-response-declaration {
           box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
         }
 
+        &:state(--checked),
         &[aria-checked='true'] {
           border-color: var(--qti-border-active);
-          background-color: var(--qti-bg-active);
         }
 
+        &:state(--readonly),
         &[aria-readonly='true'] {
           cursor: pointer;
           background-color: var(--qti-bg);
@@ -2258,6 +2274,7 @@ qti-response-declaration {
           border: none;
         }
 
+        &:state(--disabled),
         &[aria-disabled='true'] {
           cursor: not-allowed;
           background-color: var(--qti-disabled-bg);
@@ -2281,17 +2298,17 @@ qti-response-declaration {
 
       &[shape='rect'] {
 
-        &:hover {
-          background-color: var(--qti-hover-bg);
-        }
+        /* &:hover {
+          @apply hov;
+        } */
 
         &:focus {
           box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
         }
 
+        &:state(--checked),
         &[aria-checked='true'] {
           border-color: var(--qti-border-active);
-          background-color: var(--qti-bg-active);
         }
 
         &[aria-readonly='true'] {
@@ -2324,24 +2341,21 @@ qti-response-declaration {
 
       &[shape='poly'] {
         &:hover::after {
-
           content: '';
           width: 100%;
           height: 100%;
           background: repeating-linear-gradient(
             45deg,
-            var(--qti-primary),
-            var(--qti-primary) 5px,
+            var(--qti-border-active),
+            var(--qti-border-active) 5px,
             transparent 5px,
             transparent 10px
           );
           display: block;
-          border-color: var(--qti-border-active);
-          background-color: var(--qti-bg-active);
         }
 
+        &:state(--checked)::after,
         &[aria-checked='true']::after {
-
           content: '';
           width: 100%;
           height: 100%;
@@ -2349,17 +2363,10 @@ qti-response-declaration {
             45deg,
             transparent,
             transparent 5px,
-            var(--qti-primary) 5px,
-            var(--qti-primary) 10px
+            var(--qti-border-active) 5px,
+            var(--qti-border-active) 10px
           );
           display: block;
-          border-color: var(--qti-border-active);
-          background-color: var(--qti-bg-active);
-        }
-
-        &[aria-checked='true'] {
-          border-color: var(--qti-border-active);
-          background-color: var(--qti-bg-active);
         }
 
         &[aria-readonly='true'] {
@@ -2516,7 +2523,7 @@ qti-response-declaration {
         }
 
         &:state(--checked) {
-          background-color: var(--qti-primary-light); /* bg-blue-200 */
+          background-color: var(--qti-bg-active);
         }
 
         &[aria-readonly='true'] {
@@ -2772,7 +2779,7 @@ qti-response-declaration {
         box-shadow: 0 8px 12px rgb(0 0 0 / 20%),
     0 4px 8px rgb(0 0 0 / 10%);
       }
-      
+
       &:hover {
         background-color: var(--qti-hover-bg);
       }
@@ -2830,8 +2837,6 @@ qti-response-declaration {
       gap: 0.5rem; /* gap-2 */
     }
 
-
-    
     &::part(drop-list) {
 
       &[enabled] {
@@ -3104,7 +3109,7 @@ qti-response-declaration {
   qti-graphic-gap-match-interaction {
     position: relative;
 
-    & img {
+    &img {
       margin: 0;
       padding: 0;
     }
@@ -3139,9 +3144,8 @@ qti-response-declaration {
       margin-right: 0.125rem;
       margin-bottom: 0.25rem; /* mb-1 */
       height: 0.5rem; /* h-2 */
-      background-position: 0 center;
-      background: linear-gradient(to right, var(--qti-tick-color) var(--qti-tick-width), transparent 1px) repeat-x;
-      background-size: calc(calc(100% - var(--qti-tick-width)) / ((var(--max) - var(--min)) / var(--step))) 100%;
+      background: linear-gradient(to right, var(--qti-tick-color) var(--qti-tick-width), transparent 1px) repeat-x 0
+        center / calc(calc(100% - var(--qti-tick-width)) / ((var(--max) - var(--min)) / var(--step))) 100%;
     }
 
     &::part(rail) {