@citolab/qti-components 6.9.1-beta.51 → 6.9.1-beta.53

package/dist/item.css

@@ -1949,11 +1949,13 @@ qti-response-declaration {
           display: none;
         }
 
+        &:state(checked),
         &[aria-checked='true'] {
           border-color: var(--qti-bg-primary);
           background-color: var(--qti-primary-light);
         }
 
+        &:state(readonly),
         &[aria-readonly='true'] {
           cursor: pointer;
           background-color: white;
@@ -1961,6 +1963,7 @@ qti-response-declaration {
           border: none;
         }
 
+        &:state(disabled),
         &[aria-disabled='true'] {
           cursor: not-allowed;
           background-color: var(--qti-bg-gray-100);
@@ -1984,7 +1987,7 @@ qti-response-declaration {
     &:not(.qti-input-control-hidden) {
       & qti-simple-choice {
 
-        &:not([aria-disabled='true'], [aria-readonly='true'], [aria-checked='true']):hover {
+        &:not([aria-disabled='true'], [aria-readonly='true'], :state(checked)):hover {
           background-color: var(--qti-bg-gray-50);
         }
 
@@ -1992,11 +1995,13 @@ qti-response-declaration {
           outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
         }
 
+        &:state(checked),
         &[aria-checked='true'] {
           border-color: var(--qti-bg-primary);
           background-color: var(--qti-primary-light);
         }
 
+        &:state(readonly),
         &[aria-readonly='true'] {
           cursor: pointer;
           background-color: white;
@@ -2004,6 +2009,7 @@ qti-response-declaration {
           border: none;
         }
 
+        &:state(disabled),
         &[aria-disabled='true'] {
           cursor: not-allowed;
           background-color: var(--qti-bg-gray-100);
@@ -2017,7 +2023,7 @@ qti-response-declaration {
           height: calc(var(--qti-form-size) - 6px);
         }
 
-        &[role='radio']::part(ch) {
+        &:state(radio)::part(ch) {
           border-radius: var(--qti-border-radius-full);
           display: grid;
           place-content: center;
@@ -2027,12 +2033,12 @@ qti-response-declaration {
           outline: none;
         }
 
-        &[role='radio'][aria-checked='true']::part(cha) {
+        &:state(radio):state(--checked)::part(cha) {
           background-color: var(--qti-bg-primary);
           border-radius: var(--qti-border-radius-full);
         }
 
-        &[role='checkbox']::part(ch) {
+        &:state(checkbox)::part(ch) {
           display: flex;
           place-items: center;
           border-radius: var(--qti-border-radius-sm);
@@ -2044,7 +2050,7 @@ qti-response-declaration {
           outline: none;
         }
 
-        &[role='checkbox'][aria-checked='true']::part(cha) {
+        &:state(checkbox):state(--checked)::part(cha) {
           background-color: var(--qti-bg-primary);
           -webkit-mask-image: var(--check-mask);
                   mask-image: var(--check-mask);
@@ -2391,7 +2397,7 @@ qti-response-declaration {
         height: calc(var(--qti-form-size) - 6px);
       }
 
-      &[role='radio']::part(ch) {
+      &:state(radio)::part(ch) {
         border-radius: var(--qti-border-radius-full);
         display: grid;
         place-content: center;
@@ -2401,12 +2407,12 @@ qti-response-declaration {
         outline: none;
       }
 
-      &[role='radio'][aria-checked='true']::part(cha) {
+      &:state(radio):state(--checked)::part(cha) {
         background-color: var(--qti-bg-primary);
         border-radius: var(--qti-border-radius-full);
       }
 
-      &[role='checkbox']::part(ch) {
+      &:state(checkbox)::part(ch) {
         display: flex;
         place-items: center;
         border-radius: var(--qti-border-radius-sm);
@@ -2418,7 +2424,7 @@ qti-response-declaration {
         outline: none;
       }
 
-      &[role='checkbox'][aria-checked='true']::part(cha) {
+      &:state(checkbox):state(--checked)::part(cha) {
         background-color: var(--qti-bg-primary);
         -webkit-mask-image: var(--check-mask);
                 mask-image: var(--check-mask);
@@ -2460,7 +2466,7 @@ qti-response-declaration {
           display: none;
         }
 
-        &[aria-checked='true'] {
+        :state(--checked) {
           border-color: var(--qti-bg-primary);
           background-color: var(--qti-primary-light);
         }
@@ -2510,7 +2516,7 @@ qti-response-declaration {
           display: none;
         }
 
-        &[aria-checked='true'] {
+        :state(--checked) {
           background-color: var(--qti-primary-light); /* bg-blue-200 */
         }
 

package/dist/qti-components/index.d.ts

@@ -1,5 +1,5 @@
-import { a as QtiRule, b as QtiRuleBase, c as QtiExpressionBase, d as QtiExpression, B as BaseType, e as QtiConditionExpression, R as ResponseVariable, V as VariableDeclaration, I as ItemContext } from '../qti-simple-choice-l6mkNq6T.js';
-export { A as ActiveElementMixin, C as Calculate, n as Cardinality, r as ChoiceInterface, ae as Interaction, f as InteractionChangedDetails, U as MockQtiExpression, M as Multiple, m as Ordered, O as OutcomeChangedDetails, p as OutcomeVariable, T as QtiAnd, Q as QtiAssessmentItem, q as QtiAssessmentStimulusRef, af as QtiAssociableHotspot, Z as QtiAssociateInteraction, K as QtiChoiceInteraction, w as QtiCompanionMaterialsInfo, x as QtiContentBody, _ as QtiCustomInteraction, ad as QtiCustomOperator, $ as QtiEndAttemptInteraction, F as QtiExtendedTextInteraction, z as QtiFeedbackBlock, D as QtiFeedbackInline, ag as QtiGap, ah as QtiGapImg, a0 as QtiGapMatchInteraction, ai as QtiGapText, a1 as QtiGraphicAssociateInteraction, a2 as QtiGraphicGapMatchInteraction, a3 as QtiGraphicOrderInteraction, aj as QtiHotspotChoice, a4 as QtiHotspotInteraction, ak as QtiHottext, H as QtiHottextInteraction, al as QtiInlineChoice, J as QtiInlineChoiceInteraction, g as QtiInteractionChanged, S as QtiLookupOutcomeValue, X as QtiMapping, a5 as QtiMatchInteraction, a6 as QtiMediaInteraction, E as QtiModalFeedback, a7 as QtiOrderInteraction, h as QtiOutcomeChanged, u as QtiOutcomeDeclaration, L as QtiOutcomeProcessing, N as QtiOutcomeProcessingProcessor, Y as QtiPortableCustomInteraction, a8 as QtiPositionObjectStage, s as QtiPrompt, v as QtiResponseDeclaration, P as QtiResponseProcessing, y as QtiRubricBlock, a9 as QtiSelectPointInteraction, am as QtiSimpleAssociableChoice, an as QtiSimpleChoice, aa as QtiSliderInteraction, t as QtiStylesheet, G as QtiTextEntryInteraction, j as ResponseInteraction, o as VariableValue, i as directedPair, k as float, l as integer, ac as itemContext, ab as itemContextVariables, W as qtiAndMixin } from '../qti-simple-choice-l6mkNq6T.js';
+import { Q as QtiRule, a as QtiRuleBase, b as QtiExpressionBase, c as QtiExpression, B as BaseType, d as QtiConditionExpression, R as ResponseVariable, V as VariableDeclaration, I as ItemContext } from '../qti-simple-choice-CFhbe77e.js';
+export { s as ActiveElementMixin, A as ActiveElementMixinInterface, C as Calculate, m as Cardinality, r as ChoiceInterface, ag as Interaction, e as InteractionChangedDetails, X as MockQtiExpression, M as Multiple, l as Ordered, O as OutcomeChangedDetails, o as OutcomeVariable, W as QtiAnd, p as QtiAssessmentItem, q as QtiAssessmentStimulusRef, ah as QtiAssociableHotspot, $ as QtiAssociateInteraction, N as QtiChoiceInteraction, y as QtiCompanionMaterialsInfo, z as QtiContentBody, a0 as QtiCustomInteraction, af as QtiCustomOperator, a1 as QtiEndAttemptInteraction, H as QtiExtendedTextInteraction, E as QtiFeedbackBlock, F as QtiFeedbackInline, ai as QtiGap, aj as QtiGapImg, a2 as QtiGapMatchInteraction, ak as QtiGapText, a3 as QtiGraphicAssociateInteraction, a4 as QtiGraphicGapMatchInteraction, a5 as QtiGraphicOrderInteraction, al as QtiHotspotChoice, a6 as QtiHotspotInteraction, am as QtiHottext, K as QtiHottextInteraction, an as QtiInlineChoice, L as QtiInlineChoiceInteraction, f as QtiInteractionChanged, t as QtiItemBody, U as QtiLookupOutcomeValue, Z as QtiMapping, a7 as QtiMatchInteraction, a8 as QtiMediaInteraction, G as QtiModalFeedback, a9 as QtiOrderInteraction, g as QtiOutcomeChanged, w as QtiOutcomeDeclaration, P as QtiOutcomeProcessing, S as QtiOutcomeProcessingProcessor, _ as QtiPortableCustomInteraction, aa as QtiPositionObjectStage, u as QtiPrompt, x as QtiResponseDeclaration, T as QtiResponseProcessing, D as QtiRubricBlock, ab as QtiSelectPointInteraction, ao as QtiSimpleAssociableChoice, ap as QtiSimpleChoice, ac as QtiSliderInteraction, v as QtiStylesheet, J as QtiTextEntryInteraction, i as ResponseInteraction, n as VariableValue, h as directedPair, j as float, k as integer, ae as itemContext, ad as itemContextVariables, Y as qtiAndMixin } from '../qti-simple-choice-CFhbe77e.js';
 import * as lit_html from 'lit-html';
 import * as lit from 'lit';
 import { LitElement } from 'lit';