@citolab/qti-components 7.0.1 → 7.0.2

package/dist/item.css

@@ -2093,37 +2093,44 @@ qti-response-declaration {
     }
   }
 
-  qti-graphic-gap-match-interaction:state(--dragzone-active)::part(drags) {
-    border-color: var(--qti-border-active);
-    background-color: var(--qti-bg-active);
+  .hover-border {
+    border: 2px solid #000; /* Adjust the border style and color as needed */
   }
 
-  qti-graphic-gap-match-interaction:state(--dragzone-enabled)::part(drags) {
-    background-color: var(--qti-bg-active);
-  }
+  qti-graphic-gap-match-interaction {
+    position: relative;
 
-  /* Active state */
-  qti-graphic-gap-match-interaction.qti-selections-light:state(--dragzone-active)::part(drags) {
-    background-color: var(--qti-light-bg-active);
-    border-color: var(--qti-light-border-active);
-  }
+    &.qti-selections-light {
+      &:state(--dragzone-active)::part(drags) {
+        background-color: var(--qti-light-bg-active);
+        border-color: var(--qti-light-border-active);
+      }
 
-  qti-graphic-gap-match-interaction.qti-selections-dark:state(--dragzone-active)::part(drags) {
-    background-color: var(--qti-dark-bg-active);
-    border-color: var(--qti-dark-border-active);
-  }
+      &:state(--dragzone-enabled)::part(drags) {
+        background-color: var(--qti-light-bg-active);
+      }
+    }
 
-  /* Enabled state */
-  qti-graphic-gap-match-interaction.qti-selections-light:state(--dragzone-enabled)::part(drags) {
-    background-color: var(--qti-light-bg-active);
-  }
+    &.qti-selections-dark {
+      &:state(--dragzone-active)::part(drags) {
+        background-color: var(--qti-dark-bg-active);
+        border-color: var(--qti-dark-border-active);
+      }
 
-  qti-graphic-gap-match-interaction.qti-selections-dark:state(--dragzone-enabled)::part(drags) {
-    background-color: var(--qti-dark-bg-active);
-  }
+      &:state(--dragzone-enabled)::part(drags) {
+        background-color: var(--qti-dark-bg-active);
+      }
+    }
 
-  qti-graphic-gap-match-interaction {
-    position: relative;
+    /* General styles for active and enabled states */
+    &:state(--dragzone-active)::part(drags) {
+      border-color: var(--qti-border-active);
+      background-color: var(--qti-bg-active);
+    }
+
+    &:state(--dragzone-enabled)::part(drags) {
+      background-color: var(--qti-bg-active);
+    }
 
     & qti-gap-img,
     qti-gap-text {
@@ -2254,16 +2261,39 @@ qti-response-declaration {
     }
   }
 
-  qti-gap-match-interaction:state(--dragzone-active)::part(drags) {
-    border-color: var(--qti-border-active);
-    background-color: var(--qti-bg-active);
-  }
+  qti-gap-match-interaction {
+    &.qti-selections-light {
+      &:state(--dragzone-active)::part(drags) {
+        background-color: var(--qti-light-bg-active);
+        border-color: var(--qti-light-border-active);
+      }
 
-  qti-gap-match-interaction:state(--dragzone-enabled)::part(drags) {
-    background-color: var(--qti-bg-active);
-  }
+      &:state(--dragzone-enabled)::part(drags) {
+        background-color: var(--qti-light-bg-active);
+      }
+    }
+
+    &.qti-selections-dark {
+      &:state(--dragzone-active)::part(drags) {
+        background-color: var(--qti-dark-bg-active);
+        border-color: var(--qti-dark-border-active);
+      }
+
+      &:state(--dragzone-enabled)::part(drags) {
+        background-color: var(--qti-dark-bg-active);
+      }
+    }
+
+    /* General styles for active and enabled states */
+    &:state(--dragzone-active)::part(drags) {
+      border-color: var(--qti-border-active);
+      background-color: var(--qti-bg-active);
+    }
+
+    &:state(--dragzone-enabled)::part(drags) {
+      background-color: var(--qti-bg-active);
+    }
 
-  qti-gap-match-interaction {
     & qti-gap-text {
 
       &[dragging] {
@@ -2919,6 +2949,15 @@ qti-response-declaration {
     }
   }
 
+  qti-order-interaction:state(--dragzone-active)::part(drags) {
+    border-color: var(--qti-border-active);
+    background-color: var(--qti-bg-active);
+  }
+
+  qti-order-interaction:state(--dragzone-enabled)::part(drags) {
+    background-color: var(--qti-bg-active);
+  }
+
   qti-order-interaction {
     &::part(qti-simple-choice),
     & qti-simple-choice {
@@ -3026,6 +3065,94 @@ qti-response-declaration {
       border-color: var(--qti-border-active);
       background-color: var(--qti-bg-active);
     }
+
+    & drop-list {
+      &[shape='circle'] {
+
+        &:hover {
+          background-color: var(--qti-hover-bg);
+        }
+
+        &:focus {
+          box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
+        }
+
+        &[aria-checked='true'] {
+          border-color: var(--qti-border-active);
+          background-color: var(--qti-bg-active);
+        }
+
+        &[aria-readonly='true'] {
+          cursor: pointer;
+          background-color: var(--qti-bg);
+          outline: 0;
+          border: none;
+        }
+
+        &[aria-disabled='true'] {
+          cursor: not-allowed;
+          background-color: var(--qti-disabled-bg);
+          color: var(--qti-disabled-color);
+          border-color: var(--qti-border-color);
+          outline: 4px solid var(--qti-disabled-bg);
+        }
+
+        width: 100%;
+
+        height: 100%;
+
+        background-color: transparent;
+
+        padding: 0;
+
+        border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
+
+        outline: none
+      }
+
+      &[shape='square'] {
+
+        &:hover {
+          background-color: var(--qti-hover-bg);
+        }
+
+        &:focus {
+          box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
+        }
+
+        &[aria-checked='true'] {
+          border-color: var(--qti-border-active);
+          background-color: var(--qti-bg-active);
+        }
+
+        &[aria-readonly='true'] {
+          cursor: pointer;
+          background-color: var(--qti-bg);
+          outline: 0;
+          border: none;
+        }
+
+        &[aria-disabled='true'] {
+          cursor: not-allowed;
+          background-color: var(--qti-disabled-bg);
+          color: var(--qti-disabled-color);
+          border-color: var(--qti-border-color);
+          outline: 4px solid var(--qti-disabled-bg);
+        }
+
+        width: 100%;
+
+        height: 100%;
+
+        background-color: transparent;
+
+        padding: 0;
+
+        border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
+
+        outline: none
+      }
+    }
   }
 
   qti-associate-interaction {
@@ -3171,6 +3298,38 @@ qti-response-declaration {
 
       outline: none
     }
+
+    &.qti-selections-light {
+      &:state(--dragzone-active)::part(drags) {
+        background-color: var(--qti-light-bg-active);
+        border-color: var(--qti-light-border-active);
+      }
+
+      &:state(--dragzone-enabled)::part(drags) {
+        background-color: var(--qti-light-bg-active);
+      }
+    }
+
+    &.qti-selections-dark {
+      &:state(--dragzone-active)::part(drags) {
+        background-color: var(--qti-dark-bg-active);
+        border-color: var(--qti-dark-border-active);
+      }
+
+      &:state(--dragzone-enabled)::part(drags) {
+        background-color: var(--qti-dark-bg-active);
+      }
+    }
+
+    /* General styles for active and enabled states */
+    &:state(--dragzone-active)::part(drags) {
+      border-color: var(--qti-border-active);
+      background-color: var(--qti-bg-active);
+    }
+
+    &:state(--dragzone-enabled)::part(drags) {
+      background-color: var(--qti-bg-active);
+    }
   }
 
   qti-graphic-associate-interaction {
@@ -3264,6 +3423,38 @@ qti-response-declaration {
         outline: none
       }
     }
+
+    &.qti-selections-light {
+      &:state(--dragzone-active)::part(drags) {
+        background-color: var(--qti-light-bg-active);
+        border-color: var(--qti-light-border-active);
+      }
+
+      &:state(--dragzone-enabled)::part(drags) {
+        background-color: var(--qti-light-bg-active);
+      }
+    }
+
+    &.qti-selections-dark {
+      &:state(--dragzone-active)::part(drags) {
+        background-color: var(--qti-dark-bg-active);
+        border-color: var(--qti-dark-border-active);
+      }
+
+      &:state(--dragzone-enabled)::part(drags) {
+        background-color: var(--qti-dark-bg-active);
+      }
+    }
+
+    /* General styles for active and enabled states */
+    &:state(--dragzone-active)::part(drags) {
+      border-color: var(--qti-border-active);
+      background-color: var(--qti-bg-active);
+    }
+
+    &:state(--dragzone-enabled)::part(drags) {
+      background-color: var(--qti-bg-active);
+    }
   }
 
   qti-slider-interaction {

package/dist/{qti-loader → loader}/index.d.ts

@@ -1,4 +1,4 @@
-import { p as QtiAssessmentItem } from '../qti-simple-choice-CynLWb8d.js';
+import { e as QtiAssessmentItem } from '../qti-simple-choice-DG8ImdPz.js';
 import 'lit-html';
 import 'lit';
 import 'lit-html/directives/ref.js';

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

@@ -1003,6 +1003,8 @@ export type QtiInlineChoiceProps = {
 };
 
 export type TestElementProps = {
+  /**  */
+  class?: string;
   /** <span style="color:blue">some *blue* text</span>. Does not work in storybook */
   shuffle?: "true" | "false";
   /**  */
@@ -1022,6 +1024,8 @@ export type TestElementProps = {
 };
 
 export type TestElementProps = {
+  /**  */
+  class?: string;
   /** <span style="color:blue">some *blue* text</span>. Does not work in storybook */
   shuffle?: "true" | "false";
   /**  */
@@ -1031,8 +1035,6 @@ export type TestElementProps = {
   /**  */
   readonly?: boolean;
   /**  */
-  class?: string;
-  /**  */
   value?: string | string[];
   /**  */
   correctResponse?: string | string[];
@@ -1043,6 +1045,8 @@ export type TestElementProps = {
 };
 
 export type TestElementProps = {
+  /**  */
+  class?: string;
   /** <span style="color:blue">some *blue* text</span>. Does not work in storybook */
   shuffle?: "true" | "false";
   /**  */
@@ -1061,19 +1065,6 @@ export type TestElementProps = {
   "onqti-interaction-response"?: (e: CustomEvent<CustomEvent>) => void;
 };
 
-export type QtiItemProps = {
-  /**  */
-  identifier?: string | undefined;
-  /**  */
-  href?: string | undefined;
-  /**  */
-  xmlDoc?: DocumentFragment;
-  /**  */
-  assessmentItem?: QtiAssessmentItem | null;
-  /**  */
-  "onqti-item-connected"?: (e: CustomEvent<CustomEvent>) => void;
-};
-
 export type QtiAssessmentItemRefProps = {
   /**  */
   category?: string | undefined;
@@ -1242,6 +1233,19 @@ export type TestPagingButtonsStampProps = {
   "onqti-request-test-item"?: (e: CustomEvent<CustomEvent>) => void;
 };
 
+export type QtiItemProps = {
+  /**  */
+  identifier?: string | undefined;
+  /**  */
+  href?: string | undefined;
+  /**  */
+  xmlDoc?: DocumentFragment;
+  /**  */
+  assessmentItem?: QtiAssessmentItem | null;
+  /**  */
+  "onqti-item-connected"?: (e: CustomEvent<CustomEvent>) => void;
+};
+
 export type CustomElements = {
   /**
    *
@@ -2013,16 +2017,6 @@ export type CustomElements = {
    */
   "test-element": Partial<TestElementProps & BaseProps & BaseEvents>;
 
-  /**
-   *
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **qti-item-connected**
-   */
-  "qti-item": Partial<QtiItemProps & BaseProps & BaseEvents>;
-
   /**
    *
    * ---
@@ -2167,4 +2161,14 @@ export type CustomElements = {
    * - **qti-request-test-item**
    */
   "test-paging-buttons-stamp": Partial<TestPagingButtonsStampProps & BaseProps & BaseEvents>;
+
+  /**
+   *
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **qti-item-connected**
+   */
+  "qti-item": Partial<QtiItemProps & BaseProps & BaseEvents>;
 };

package/dist/{qti-simple-choice-CynLWb8d.d.cts → qti-simple-choice-DG8ImdPz.d.ts}

@@ -940,13 +940,13 @@ declare global {
 
 declare const QtiOrderInteraction_base: (abstract new (...args: any[]) => {}) & (abstract new (...args: any[]) => IInteraction) & typeof Interaction;
 declare class QtiOrderInteraction extends QtiOrderInteraction_base {
+    static styles: lit.CSSResult;
     childrenMap: Element[];
     nrChoices: number;
     correctResponses: string[];
     showCorrectResponses: boolean;
     /** orientation of choices */
     orientation: 'horizontal' | 'vertical';
-    static styles: lit.CSSResult[];
     render(): lit_html.TemplateResult<1>;
     set correctResponse(value: string | string[]);
     protected getResponse(): string[];
@@ -1182,4 +1182,4 @@ declare global {
     }
 }
 
-export { qtiSubtractMixin as $, type ActiveElementMixinInterface as A, type BaseType as B, type Calculate as C, QtiRubricBlock as D, QtiFeedbackBlock as E, QtiFeedbackInline as F, QtiModalFeedback as G, QtiExtendedTextInteraction as H, type ItemContext as I, QtiTextEntryInteraction as J, QtiHottextInteraction as K, QtiInlineChoiceInteraction as L, type Multiple as M, type Orientation as N, type OutcomeChangedDetails as O, QtiChoiceInteraction as P, QtiRule as Q, type ResponseVariable as R, QtiOutcomeProcessing as S, QtiOutcomeProcessingProcessor as T, QtiResponseProcessing as U, type VariableDeclaration as V, QtiLookupOutcomeValue as W, QtiAnd as X, qtiAndMixin as Y, QtiMapping as Z, QtiSubtract as _, type QtiRuleBase as a, QtiPortableCustomInteraction as a0, QtiAssociateInteraction as a1, QtiCustomInteraction as a2, QtiEndAttemptInteraction as a3, QtiGapMatchInteraction as a4, QtiGraphicAssociateInteraction as a5, QtiGraphicGapMatchInteraction as a6, QtiGraphicOrderInteraction as a7, QtiHotspotInteraction as a8, QtiMatchInteraction as a9, QtiMediaInteraction as aa, QtiOrderInteraction as ab, QtiPositionObjectStage as ac, QtiSelectPointInteraction as ad, QtiSliderInteraction as ae, itemContextVariables as af, itemContext as ag, QtiCustomOperator as ah, Interaction as ai, QtiAssociableHotspot as aj, QtiGap as ak, QtiGapImg as al, QtiGapText as am, QtiHotspotChoice as an, QtiHottext as ao, QtiInlineChoice as ap, QtiSimpleAssociableChoice as aq, QtiSimpleChoice as ar, type QtiExpressionBase as b, QtiExpression as c, QtiConditionExpression as d, type InteractionChangedDetails as e, type QtiInteractionChanged as f, type QtiOutcomeChanged as g, type directedPair as h, type ResponseInteraction as i, type float as j, type integer as k, type Ordered as l, type Cardinality as m, type VariableValue as n, type OutcomeVariable as o, QtiAssessmentItem as p, QtiAssessmentStimulusRef as q, type ChoiceInterface as r, ActiveElementMixin as s, QtiItemBody as t, QtiPrompt as u, QtiStylesheet as v, QtiOutcomeDeclaration as w, QtiResponseDeclaration as x, QtiCompanionMaterialsInfo as y, QtiContentBody as z };
+export { qtiSubtractMixin as $, type ActiveElementMixinInterface as A, type BaseType as B, type Calculate as C, QtiRubricBlock as D, QtiFeedbackBlock as E, QtiFeedbackInline as F, QtiModalFeedback as G, QtiExtendedTextInteraction as H, type ItemContext as I, QtiTextEntryInteraction as J, QtiHottextInteraction as K, QtiInlineChoiceInteraction as L, type Multiple as M, type Orientation as N, type OutcomeChangedDetails as O, QtiChoiceInteraction as P, QtiRule as Q, type ResponseVariable as R, QtiOutcomeProcessing as S, QtiOutcomeProcessingProcessor as T, QtiResponseProcessing as U, type VariableDeclaration as V, QtiLookupOutcomeValue as W, QtiAnd as X, qtiAndMixin as Y, QtiMapping as Z, QtiSubtract as _, type QtiRuleBase as a, QtiPortableCustomInteraction as a0, QtiAssociateInteraction as a1, QtiCustomInteraction as a2, QtiEndAttemptInteraction as a3, QtiGapMatchInteraction as a4, QtiGraphicAssociateInteraction as a5, QtiGraphicGapMatchInteraction as a6, QtiGraphicOrderInteraction as a7, QtiHotspotInteraction as a8, QtiMatchInteraction as a9, QtiMediaInteraction as aa, QtiOrderInteraction as ab, QtiPositionObjectStage as ac, QtiSelectPointInteraction as ad, QtiSliderInteraction as ae, itemContextVariables as af, itemContext as ag, QtiCustomOperator as ah, Interaction as ai, QtiAssociableHotspot as aj, QtiGap as ak, QtiGapImg as al, QtiGapText as am, QtiHotspotChoice as an, QtiHottext as ao, QtiInlineChoice as ap, QtiSimpleAssociableChoice as aq, QtiSimpleChoice as ar, type QtiExpressionBase as b, QtiExpression as c, QtiConditionExpression as d, QtiAssessmentItem as e, type InteractionChangedDetails as f, type QtiInteractionChanged as g, type QtiOutcomeChanged as h, type directedPair as i, type ResponseInteraction as j, type float as k, type integer as l, type Ordered as m, type Cardinality as n, type VariableValue as o, type OutcomeVariable as p, QtiAssessmentStimulusRef as q, type ChoiceInterface as r, ActiveElementMixin as s, QtiItemBody as t, QtiPrompt as u, QtiStylesheet as v, QtiOutcomeDeclaration as w, QtiResponseDeclaration as x, QtiCompanionMaterialsInfo as y, QtiContentBody as z };

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

@@ -754,6 +754,7 @@
       "name": "test-element",
       "description": "\n---\n\n\n### **Events:**\n - **qti-register-interaction**\n- **qti-interaction-response**",
       "attributes": [
+        { "name": "class", "values": [] },
         {
           "name": "shuffle",
           "description": "<span style=\"color:blue\">some *blue* text</span>. Does not work in storybook",
@@ -769,6 +770,7 @@
       "name": "test-element",
       "description": "\n---\n\n\n### **Events:**\n - **qti-register-interaction**\n- **qti-interaction-response**",
       "attributes": [
+        { "name": "class", "values": [] },
         {
           "name": "shuffle",
           "description": "<span style=\"color:blue\">some *blue* text</span>. Does not work in storybook",
@@ -784,6 +786,7 @@
       "name": "test-element",
       "description": "\n---\n\n\n### **Events:**\n - **qti-register-interaction**\n- **qti-interaction-response**",
       "attributes": [
+        { "name": "class", "values": [] },
         {
           "name": "shuffle",
           "description": "<span style=\"color:blue\">some *blue* text</span>. Does not work in storybook",
@@ -795,15 +798,6 @@
       ],
       "references": []
     },
-    {
-      "name": "qti-item",
-      "description": "\n---\n\n\n### **Events:**\n - **qti-item-connected**",
-      "attributes": [
-        { "name": "identifier", "values": [] },
-        { "name": "href", "values": [] }
-      ],
-      "references": []
-    },
     {
       "name": "qti-assessment-item-ref",
       "description": "\n---\n\n\n### **Events:**\n - **qti-assessment-item-ref-connected**",
@@ -909,6 +903,15 @@
         { "name": "skip-on-category", "values": [] }
       ],
       "references": []
+    },
+    {
+      "name": "qti-item",
+      "description": "\n---\n\n\n### **Events:**\n - **qti-item-connected**",
+      "attributes": [
+        { "name": "identifier", "values": [] },
+        { "name": "href", "values": [] }
+      ],
+      "references": []
     }
   ]
 }

package/package.json

@@ -21,51 +21,34 @@
   "engines": {
     "node": ">=20.0.0"
   },
-  "version": "7.0.1",
+  "version": "7.0.2",
+  "main": "dist/index.js",
   "type": "module",
   "exports": {
-    "./qti-components": {
-      "import": "./dist/qti-components/index.js",
-      "require": "./dist/qti-components/index.cjs"
+    ".": {
+      "import": "./dist/index.js"
     },
-    "./qti-transformers": {
-      "import": "./dist/qti-transformers/index.js",
-      "require": "./dist/qti-transformers/index.cjs"
+    "./transformers": {
+      "import": "./dist/transformers/index.js"
     },
-    "./qti-item": {
-      "import": "./dist/qti-item/index.js",
-      "require": "./dist/qti-item/index.cjs"
-    },
-    "./qti-test": {
-      "import": "./dist/qti-test/index.js",
-      "require": "./dist/qti-test/index.cjs"
-    },
-    "./qti-loader": {
-      "import": "./dist/qti-loader/index.js",
-      "require": "./dist/qti-loader/index.cjs"
+    "./loader": {
+      "import": "./dist/loader/index.js"
     },
     "./item.css": "./dist/item.css",
-    "./cdn/index.js": "./dist/cdn/index.js",
-    "./cdn/index.min.js": "./dist/cdn/index.min.js",
-    "./cdn/index.global.js": "./dist/cdn/index.global.js"
+    "./cdn/index.js": "./cdn/index.js",
+    "./cdn/index.global.js": "./cdn/index.global.js"
   },
   "types": "./dist/qti-components/index.d.ts",
   "typesVersions": {
     "*": {
-      "qti-components": [
-        "./dist/qti-components/index.d.ts"
-      ],
-      "qti-transformers": [
-        "./dist/qti-transformers/index.d.ts"
+      ".": [
+        "./dist/index.d.ts"
       ],
-      "qti-item": [
-        "./dist/qti-item/index.d.ts"
+      "transformers": [
+        "./dist/transformers/index.d.ts"
       ],
-      "qti-test": [
-        "./dist/qti-test/index.d.ts"
-      ],
-      "qti-loader": [
-        "./dist/qti-loader/index.d.ts"
+      "loader": [
+        "./dist/loader/index.d.ts"
       ]
     }
   },
@@ -75,20 +58,21 @@
   ],
   "scripts": {
     "storybook": "wireit",
-    "watch:build": "npm run build --watch",
+    "storybook:docs": "wireit",
+    "build:watch": "npm run build --watch",
     "npm:publish": "np",
     "---": "-",
     "build": "wireit",
     "test": "wireit",
     "attw": "wireit",
-    "lint": "wireit",
+    "lint": "eslint src/**/*.ts",
     "cem": "wireit",
+    "css": "wireit",
     "act": "act",
     "vite": "vite",
     "stylelint": "stylelint \"src/**/*.css\"",
     "build-storybook": "storybook build",
     "storybook:test": "test-storybook",
-    "storybook:docs": "wireit",
     "storybook:docs:build": "wireit",
     "chromatic": "node chromatic-runner.cjs",
     "----hooks----": "-",
@@ -99,7 +83,7 @@
     "storybook": {
       "command": "storybook dev -p 6006",
       "dependencies": [
-        "cem:watch"
+        "storybook:cem:watch"
       ]
     },
     "build": {
@@ -112,16 +96,22 @@
         "css"
       ],
       "files": [
-        "src/**/*.{ts,css}",
+        "src/**/*.{ts}",
+        "tsconfig.json",
         "!src/**/*.{test,spec,stories}.ts"
-      ],
-      "output": [
-        "dist/**/*",
-        "cdn/**/*",
-        "!dist/item.css",
-        "!dist/vscode.*",
-        "!dist/qti-components-jsx.d.ts",
-        "!dist/custom-element-eslint-rules.js"
+      ]
+    },
+    "cem": {
+      "command": "cem analyze",
+      "files": [
+        "src/**/*.ts",
+        "!src/**/*.{test,spec,stories}.ts"
+      ]
+    },
+    "css": {
+      "command": "postcss src/item.css -d dist -m",
+      "files": [
+        "src/**/*.css"
       ]
     },
     "test": {
@@ -133,7 +123,7 @@
     "storybook:docs": {
       "command": "storybook dev --docs -c .storybook-docs",
       "dependencies": [
-        "cem:watch"
+        "storybook:cem:watch"
       ]
     },
     "storybook:docs:build": {
@@ -142,13 +132,7 @@
         "cem"
       ]
     },
-    "lint": {
-      "command": "eslint --color --cache --cache-location .eslintcache src/lib/**/*.ts"
-    },
-    "cem": {
-      "command": "cem analyze"
-    },
-    "cem:watch": {
+    "storybook:cem:watch": {
       "command": "cem analyze --watch",
       "service": {
         "readyWhen": {
@@ -156,11 +140,8 @@
         }
       }
     },
-    "css": {
-      "command": "postcss src/item.css -d dist -m"
-    },
     "attw": {
-      "command": "attw --pack --exclude-entrypoints ./item.css ./cdn/index.js ./cdn/index.global.js ./cdn/index.min.js",
+      "command": "attw --profile esm-only --pack --exclude-entrypoints  ./item.css ./cdn/index.js ./cdn/index.global.js ./cdn/index.min.js",
       "dependencies": [
         "build"
       ]
@@ -251,7 +232,7 @@
   "optionalDependencies": {
     "@rollup/rollup-linux-x64-gnu": "^4.28.1"
   },
-  "customElements": "custom-elements.json",
+  "customElements": "dist/custom-elements.json",
   "bugs": {
     "url": "https://github.com/Citolab/qti-components/issues"
   },