@citolab/qti-components 6.5.1 → 6.5.3

package/dist/styles.bundled.css

@@ -2689,3 +2689,6 @@ qti-item-body :where(.prose > :first-child):not(:where([class~="not-prose"],[cla
 qti-item-body :where(.prose > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
   margin-bottom: 0;
 }
+qti-item-body{
+  max-width: none;
+}

package/package.json

@@ -12,7 +12,7 @@
   "engines": {
     "node": ">=16.0.0"
   },
-  "version": "6.5.1",
+  "version": "6.5.3",
   "type": "module",
   "main": "dist/index.js",
   "exports": {
@@ -28,10 +28,8 @@
       "import": "./dist/qti-transformers/index.js",
       "require": "./dist/qti-transformers/index.cjs"
     },
-    "./*.css": {
-      "import": "./src/**/*.css",
-      "require": "./src/**/*.css"
-    }
+    "./styles.bundled.css": "./dist/styles.bundled.css",
+    "./styles.css": "./dist/styles.css"
   },
   "types": "./dist/qti-components/index.d.ts",
   "typesVersions": {
@@ -51,8 +49,7 @@
     "dist",
     "types",
     "./dist/styles.css",
-    "./dist/styles.bundled.css",
-    "./src/styles/**/*.css"
+    "./dist/styles.bundled.css"
   ],
   "scripts": {
     "test": "jest",

package/src/styles/qti/qti-input-width.css

@@ -1,36 +0,0 @@
-/* .qti-input-width-1 {
-  width: 1ch;
-  min-width: 1ch;
-}
-.qti-input-width-2 {
-  width: 2ch;
-  min-width: 2ch;
-}
-.qti-input-width-3 {
-  width: 3ch;
-  min-width: 3ch;
-}
-.qti-input-width-4 {
-  width: 4ch;
-  min-width: 4ch;
-}
-.qti-input-width-6 {
-  width: 6ch;
-  min-width: 6ch;
-}
-.qti-input-width-10 {
-  width: 10ch;
-  min-width: 10ch;
-}
-.qti-input-width-15 {
-  width: 15ch;
-  min-width: 15ch;
-}
-.qti-input-width-20 {
-  width: 20ch;
-  min-width: 20ch;
-}
-.qti-input-width-72 {
-  width: 72ch;
-  min-width: 72ch;
-} */

package/src/styles/qti/qti-layout.css

@@ -1,119 +0,0 @@
-.qti-layout-row {
-  display: flow-root;
-  width: 100%;
-}
-.qti-layout-row [class*='qti-layout-col'] {
-  margin-left: 2.1276595745%;
-  float: left;
-}
-.qti-layout-row [class*='qti-layout-col']:first-child {
-  margin-left: 0;
-}
-.qti-layout-row .qti-layout-col12 {
-  width: 100%;
-}
-.qti-layout-row .qti-layout-offset12 {
-  margin-left: 104.2553191489%;
-}
-.qti-layout-row .qti-layout-offset12:first-child {
-  margin-left: 102.1276595745%;
-}
-.qti-layout-row .qti-layout-col11 {
-  width: 91.4893617021%;
-}
-.qti-layout-row .qti-layout-offset11 {
-  margin-left: 95.7446808511%;
-}
-.qti-layout-row .qti-layout-offset11:first-child {
-  margin-left: 93.6170212766%;
-}
-.qti-layout-row .qti-layout-col10 {
-  width: 82.9787234043%;
-}
-.qti-layout-row .qti-layout-offset10 {
-  margin-left: 87.2340425532%;
-}
-.qti-layout-row .qti-layout-offset10:first-child {
-  margin-left: 85.1063829787%;
-}
-.qti-layout-row .qti-layout-col9 {
-  width: 74.4680851064%;
-}
-.qti-layout-row .qti-layout-offset9 {
-  margin-left: 78.7234042553%;
-}
-.qti-layout-row .qti-layout-offset9:first-child {
-  margin-left: 76.5957446809%;
-}
-.qti-layout-row .qti-layout-col8 {
-  width: 65.9574468085%;
-}
-.qti-layout-row .qti-layout-offset8 {
-  margin-left: 70.2127659574%;
-}
-.qti-layout-row .qti-layout-offset8:first-child {
-  margin-left: 68.085106383%;
-}
-.qti-layout-row .qti-layout-col7 {
-  width: 57.4468085106%;
-}
-.qti-layout-row .qti-layout-offset7 {
-  margin-left: 61.7021276596%;
-}
-.qti-layout-row .qti-layout-offset7:first-child {
-  margin-left: 59.5744680851%;
-}
-.qti-layout-row .qti-layout-col6 {
-  width: 48.9361702128%;
-}
-.qti-layout-row .qti-layout-offset6 {
-  margin-left: 53.1914893617%;
-}
-.qti-layout-row .qti-layout-offset6:first-child {
-  margin-left: 51.0638297872%;
-}
-.qti-layout-row .qti-layout-col5 {
-  width: 40.4255319149%;
-}
-.qti-layout-row .qti-layout-offset5 {
-  margin-left: 44.6808510638%;
-}
-.qti-layout-row .qti-layout-offset5:first-child {
-  margin-left: 42.5531914894%;
-}
-.qti-layout-row .qti-layout-col4 {
-  width: 31.914893617%;
-}
-.qti-layout-row .qti-layout-offset4 {
-  margin-left: 36.170212766%;
-}
-.qti-layout-row .qti-layout-offset4:first-child {
-  margin-left: 34.0425531915%;
-}
-.qti-layout-row .qti-layout-col3 {
-  width: 23.4042553191%;
-}
-.qti-layout-row .qti-layout-offset3 {
-  margin-left: 27.6595744681%;
-}
-.qti-layout-row .qti-layout-offset3:first-child {
-  margin-left: 25.5319148936%;
-}
-.qti-layout-row .qti-layout-col2 {
-  width: 14.8936170213%;
-}
-.qti-layout-row .qti-layout-offset2 {
-  margin-left: 19.1489361702%;
-}
-.qti-layout-row .qti-layout-offset2:first-child {
-  margin-left: 17.0212765957%;
-}
-.qti-layout-row .qti-layout-col1 {
-  width: 6.3829787234%;
-}
-.qti-layout-row .qti-layout-offset1 {
-  margin-left: 10.6382978723%;
-}
-.qti-layout-row .qti-layout-offset1:first-child {
-  margin-left: 8.5106382979%;
-}

package/src/styles/qti/qti-styles.css

@@ -1,58 +0,0 @@
-.qti-underline {
-  text-decoration: underline;
-}
-
-.qti-align-left {
-  text-align: left;
-}
-
-.qti-align-center {
-  text-align: center;
-}
-
-.qti-align-right {
-  text-align: right;
-}
-
-.qti-valign-top {
-  vertical-align: top;
-}
-
-.qti-valign-middle {
-  vertical-align: middle;
-}
-
-.qti-valign-baseline {
-  vertical-align: baseline;
-}
-
-.qti-valign-bottom {
-  vertical-align: bottom;
-}
-
-.qti-fullwidth {
-  width: 100%;
-}
-
-.qti-hidden {
-  display: none;
-}
-
-.qti-visually-hidden {
-  position: fixed !important;
-  overflow: hidden;
-  width: 1px;
-  height: 1px;
-  border: 0;
-  margin: -1px;
-  clip: rect(1px 1px 1px 1px);
-}
-
-.qti-bordered {
-  padding: 2px;
-  border: 1px solid #888;
-}
-
-.qti-well {
-  @apply base inline-block rounded border border-gray-300 bg-gray-100 px-3 py-2 text-gray-600;
-}

package/src/styles/qti-components.css

@@ -1,158 +0,0 @@
-@layer base {
-  /** default styles for all components */
-  .base {
-    @apply cursor-pointer rounded-md 
-      outline-none ring-1 ring-inset ring-gray-300;
-  }
-}
-
-@layer components {
-  /** The different components, you can choose only one */
-
-  /* - button  : .input-control-hidden qti-choice, qti-hotspot */
-  .button {
-    @apply base px-3 py-2 font-semibold shadow-sm;
-    /* @apply select-none; */
-  }
-
-  /*  - select  : inline-choice */
-  .select {
-    @apply base relative appearance-none  px-3 py-2 pr-7 shadow-sm;
-    background: url("data:image/svg+xml,%3Csvg fill='currentColor' width='22' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' aria-hidden='true'%3E%3Cpath clip-rule='evenodd' fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z'%3E%3C/path%3E%3C/svg%3E")
-      no-repeat center right 6px;
-  }
-
-  /* - check   : qti-choice, qti-hotspot */
-  .check {
-    @apply base flex items-center gap-2 px-1 py-0.5 shadow-none;
-    @apply !ring-0; /* !important, remove for checkbox and radio the active ring, the radio and checkbox will be selected instead */
-    /* @apply select-none; */
-
-    &::part(cha) {
-      /* let the checkmark or radio circle already take up space, else when checking everyhing collapses */
-      @apply h-2/3 w-2/3;
-    }
-    &[role='radio']::part(ch) {
-      @apply flex h-5 w-5 shrink-0 items-center justify-center rounded-full shadow-sm ring-2 ring-inset ring-gray-300;
-    }
-    &[role='radio'][aria-checked='true']::part(cha) {
-      @apply rounded-full bg-primary-500;
-    }
-    &[role='checkbox']::part(ch) {
-      @apply flex h-5 w-5 shrink-0 items-center justify-center rounded shadow-sm ring-2 ring-inset ring-gray-300;
-    }
-    &[role='checkbox'][aria-checked='true']::part(cha) {
-      @apply bg-primary-500;
-      -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' width='100%' height='100%' viewBox='0 0 24 24'%3E%3Cpath d='M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z'/%3E%3C/svg%3E");
-    }
-  }
-  /* - text    : text-entry and extended-text */
-  .text {
-    @apply base cursor-text rounded-sm border-0 p-3 text-gray-600 shadow-inner;
-  }
-
-  /* - spot    : gap-select-point, graphic-order, qti-graphic-associate */
-  .spot {
-    @apply base h-full w-full bg-transparent p-0 ring-2 ring-gray-900;
-  }
-
-  .point {
-    @apply base h-6 w-6 bg-transparent p-0 ring-2 ring-gray-900;
-  }
-
-  /* - drag    : gap-match, match, order, associate */
-  .drag {
-    @apply base inline-block cursor-grab bg-white py-1 pl-4 pr-2 font-semibold shadow-sm;
-    /* @apply select-none; */
-    background-image: radial-gradient(
-      circle at center,
-      rgba(0, 0, 0, 0.1) 0,
-      rgb(0, 0, 0, 0.1) 2px,
-      white 2px,
-      white 100%
-    );
-    background-repeat: repeat-y;
-    background-position: left 2px;
-    background-size: 14px 8px;
-  }
-
-  /* - drop    : gap-match, match, order, associate */
-  .drop {
-    @apply base ring-outset relative bg-gray-50 shadow-inner ring-2 ring-gray-300 ring-offset-1;
-  }
-
-  .order {
-    @apply h-6 w-6 rounded-full bg-primary-500 text-white;
-  }
-  /** End components */
-}
-
-@layer utilities {
-  /* hover, every element has a hover, except disabled( which overrides hover */
-  .hov {
-    @apply bg-gray-50;
-  }
-  .hov-ring {
-    @apply ring-primary-500;
-  }
-  /* focus, every element has a focus, even drop ( for keyboard access, eventually ) */
-  .foc {
-    @apply outline-2 outline-primary-300;
-  }
-  /* active, choice active class and, used on checkbox and radio where not .qti-input-choice-hidden */
-  .act {
-    @apply ring-2 ring-primary-400;
-  }
-  /* readonly, overwrites cursor, hover background, outline for focus and ring */
-  .rdo {
-    @apply cursor-pointer bg-white shadow-none outline-0 ring-0;
-  }
-  /* disabled, make gray state */
-  .dis {
-    @apply cursor-not-allowed bg-gray-100 text-gray-500 shadow-none ring-gray-400;
-    /* drag in the drop, else the drag in the drop was black and not gray */
-    & > * {
-      @apply !text-gray-500;
-    }
-  }
-}
-
-@layer utilities {
-  /** Modifiers */
-
-  /* PK: There was no utility to reset the ring-inset
-  We use this for the drop container, where we want the ring to have an outset
-  So the drag, with ring-inset, snugs neatly into the drop with ring-'outset' 
-  by unsetting the ring-inset */
-  .ring-outset {
-    --tw-ring-inset: unset;
-  }
-
-  /* intext for elements which has to appear in text
-  - intext    : gap-match > qti-gap, hottext > hottext, select
-  */
-  .button-in {
-    @apply inline-flex;
-
-    /* @apply inline-flex gap-1 px-1 py-0 align-bottom font-normal ring-offset-0; */
-  }
-  .check-in {
-    @apply inline-flex;
-
-    /* @apply inline-flex gap-1 px-1 py-0 align-bottom font-normal ring-offset-0; */
-  }
-
-  /* small for elements which has to appear in text
-  - intext    : gap-match > qti-gap, hottext > hottext, select
-*/
-  .button-sm {
-    /* @apply gap-0.5 rounded !px-1 !py-0 outline-offset-0 ring-1; */
-  }
-  .check-sm {
-    @apply gap-0.5 outline-offset-0 ring-1;
-    /* @apply gap-0.5 rounded !px-1 !py-0 outline-offset-0 ring-1; */
-    &::part(ch) {
-      @apply !h-4 !w-4 !ring-1;
-    }
-  }
-}

package/src/styles/qti-interactions.css

@@ -1,299 +0,0 @@
-qti-choice-interaction {
-  @apply my-2 gap-2;
-
-  &.qti-input-control-hidden {
-    qti-simple-choice {
-      @apply button hover:hov focus:foc aria-checked:act aria-readonly:rdo aria-disabled:dis;
-    }
-  }
-
-  &:not(.qti-input-control-hidden) {
-    qti-simple-choice {
-      @apply check hover:hov focus:foc aria-checked:act aria-readonly:rdo aria-disabled:dis;
-    }
-  }
-
-  qti-simple-choice {
-    &[data-correct-response='true'] {
-      &::after {
-        content: '\02714';
-        @apply text-green-600;
-      }
-      /* @apply bg-green-100 text-green-600; */
-    }
-  }
-
-  qti-simple-choice > p {
-    @apply m-0 p-0;
-  }
-}
-
-qti-text-entry-interaction {
-  @apply my-2;
-  &::part(input) {
-    @apply text hover:hov focus:foc;
-  }
-}
-
-qti-extended-text-interaction {
-  @apply my-2;
-  &::part(textarea) {
-    @apply text hover:hov focus:foc;
-  }
-}
-
-qti-gap-match-interaction {
-  @apply my-2 leading-8;
-  qti-gap-text {
-    @apply drag hover:hov focus:foc pl-3 pr-2 leading-normal;
-  }
-  qti-gap {
-    @apply drop hover:hov focus:foc inline-flex leading-normal;
-    @apply w-32; /* PK: should be set in the javascript, default 100px, or listening to data-width attribute according to the spec */
-    &:empty:after {
-      content: '\0000a0'; /* when empty, put a space in it */
-    }
-    &:not(:empty) {
-      @apply inline-flex w-auto p-0 shadow-none;
-    }
-    &:not(:empty) > * {
-      @apply flex-1 rotate-0 shadow-none ring-gray-200;
-    }
-  }
-}
-
-qti-hotspot-interaction {
-  @apply my-2;
-
-  qti-hotspot-choice {
-    @apply hover:bg-blue-100 hover:bg-opacity-30;
-
-    &[shape='circle'] {
-      @apply spot hover:hov-ring focus:foc aria-checked:act aria-readonly:rdo aria-disabled:dis rounded-full;
-    }
-
-    &[shape='rect'] {
-      @apply spot hover:hov-ring focus:foc aria-checked:act aria-readonly:rdo aria-disabled:dis;
-    }
-
-    &[shape='poly'] {
-      @apply hover:hov focus:foc aria-checked:act aria-readonly:rdo aria-disabled:dis;
-      &[aria-checked='true'] {
-        @apply bg-primary-500;
-      }
-    }
-
-    /* &::after {
-        content: '';
-        @apply absolute top-0 block origin-center bg-white;
-        height: 95%;
-        width: 95%;
-        clip-path: inherit;
-      } */
-  }
-}
-
-qti-hottext-interaction {
-  @apply my-2;
-
-  &.qti-input-control-hidden {
-    qti-hottext {
-      @apply button button-sm button-in  hover:hov focus:foc aria-checked:act aria-readonly:rdo aria-disabled:dis;
-      &::part(ch) {
-        @apply !hidden;
-      }
-    }
-  }
-
-  &:not(.qti-input-control-hidden) {
-    qti-hottext {
-      @apply check check-sm check-in hover:hov focus:foc aria-checked:act aria-readonly:rdo aria-disabled:dis;
-    }
-  }
-}
-
-qti-inline-choice-interaction {
-  &::part(select) {
-    @apply select hover:hov focus:foc; /* aria-checked:act aria-readonly:rdo aria-disabled:dis; */
-  }
-}
-
-qti-match-interaction:not(.qti-match-tabular) {
-  qti-simple-match-set:first-of-type {
-    @apply flex flex-wrap gap-2 pb-4;
-
-    qti-simple-associable-choice {
-      @apply drag hover:hov focus:foc py-2 pl-4 pr-3;
-    }
-  }
-
-  qti-simple-match-set:last-of-type {
-    @apply grid auto-cols-fr grid-flow-col gap-2;
-
-    qti-simple-associable-choice {
-      @apply drop hover:hov focus:foc;
-      /* @apply flex h-32  flex-col gap-2; */
-      @apply flex h-32 flex-col;
-    }
-
-    qti-simple-associable-choice > qti-simple-associable-choice {
-      @apply drag hover:hov focus:foc py-2 pl-4 pr-3;
-      flex-basis: fit-content;
-    }
-  }
-}
-
-qti-order-interaction {
-  &::part(qti-simple-choice),
-  qti-simple-choice {
-    @apply drag hover:hov focus:foc py-2 pl-4 pr-3;
-  }
-  &::part(qti-simple-choice) {
-    @apply flex w-full items-center overflow-hidden text-ellipsis;
-  }
-  &::part(drops) {
-    @apply gap-2;
-  }
-  &::part(drags) {
-    @apply gap-2;
-  }
-  &::part(drop-list) {
-    @apply drop hover:hov focus:foc flex min-h-[4rem];
-  }
-  &::part(active) {
-    @apply ring-2 ring-primary-400;
-  }
-}
-
-qti-associate-interaction {
-  &::part(qti-simple-associable-choice),
-  qti-simple-associable-choice {
-    @apply drag hover:hov focus:foc flex items-center overflow-hidden text-ellipsis py-2 pl-4 pr-3;
-  }
-  &::part(associables-container) {
-    @apply my-2 flex w-full justify-between;
-    background: linear-gradient(
-      180deg,
-      rgb(0 0 0 / 0%) calc(50% - 1px),
-      #000000 calc(50%),
-      rgb(0 0 0 / 0%) calc(50% + 1px)
-    );
-  }
-  &::part(active) {
-    @apply ring-2 ring-primary-400;
-  }
-  &::part(drop-list) {
-    @apply drop grid h-[3rem] w-1/3;
-  }
-}
-
-qti-graphic-order-interaction {
-  /* @apply my-2; */
-
-  qti-hotspot-choice {
-    @apply spot hover:hov focus:foc aria-checked:act aria-readonly:rdo aria-disabled:dis;
-    /* &::after {
-        content: '';
-        @apply absolute top-0 block scale-75 bg-white;
-        height: inherit;
-        width: inherit;
-        clip-path: inherit;
-      } */
-    &[aria-ordervalue] {
-      @apply order flex items-center justify-center;
-    }
-    &[aria-ordervalue]::after {
-      content: attr(aria-ordervalue) !important;
-    }
-  }
-}
-
-qti-graphic-associate-interaction {
-  @apply relative block;
-
-  qti-associable-hotspot {
-    &[shape='circle'] {
-      /* border-radius: 100%;
-        background-color: green; */
-      @apply spot hover:hov focus:foc aria-checked:act aria-readonly:rdo aria-disabled:dis;
-    }
-
-    &[shape='square'] {
-      /* border-radius: 0; */
-      /* background-color: green; */
-      @apply spot hover:hov focus:foc aria-checked:act aria-readonly:rdo aria-disabled:dis;
-    }
-  }
-}
-
-qti-graphic-gap-match-interaction {
-  @apply relative;
-  img {
-    @apply m-0 p-0;
-  }
-}
-
-qti-slider-interaction {
-  @apply block; /* else no screenshot will be made with html-to-image */
-
-  /* @apply hover:hov focus:foc aria-checked:act aria-readonly:rdo aria-disabled:dis; */
-
-  --qti-tick-color: rgb(229 231 235 / 1);
-  --qti-tick-width: 1px;
-
-  &::part(slider) {
-    @apply mx-8; /* so the slider stays INSIDE of the qti-slider-interaction */
-    @apply pb-4 pt-5; /* this keeps all content in the qti-slider interaction, also for html-to-image */
-  }
-
-  --show-bounds: true;
-  &::part(bounds) {
-    @apply flex w-full justify-between; /* the two divs with value lower and upper will now be at start and end of this bounds container */
-    @apply mb-2; /* just so it aligns with the value 'knob' */
-  }
-
-  --show-ticks: true;
-  &::part(ticks) {
-    @apply mx-0.5 mb-1 h-2; /* absolute height for the ticks, and keep distance of the rail. push them 0.5 inward */
-    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%;
-  }
-
-  &::part(rail) {
-    @apply flex items-center; /* so the knob is neatly centered vertically */
-    /* DESIGN */
-    @apply box-border; /* if you have a border in the design apply, this box-border will make the border stay INSIDE the rail */
-    @apply h-1.5 w-full cursor-pointer rounded-full border border-solid border-gray-300 bg-gray-200;
-  }
-
-  &::part(knob) {
-    @apply relative h-4 w-4 origin-center -translate-x-1/2 cursor-pointer rounded-full bg-primary-500;
-    left: var(--value-percentage);
-  }
-
-  --show-value: true;
-  &::part(value) {
-    @apply absolute bottom-8; /* align the value, which you can drag, on top of the knob, so it aligns with the rest of the values */
-    @apply left-2; /* should be half width of the knob if you want to center these two */
-    @apply -translate-x-1/2 cursor-pointer rounded bg-gray-100 px-2 py-1 text-center text-gray-500;
-  }
-}
-
-qti-select-point-interaction {
-  &::part(point) {
-    @apply hover:bg-blue-100 hover:bg-opacity-30;
-    @apply point hover:hov-ring focus:foc rounded-full; /* aria-checked:act aria-readonly:rdo aria-disabled:dis ;*/
-  }
-}
-
-qti-position-object-stage {
-  qti-position-object-interaction {
-    /* no styles necessary, only layout styles, defined in the component */
-    /* height: 40px; */
-  }
-}
-
-qti-prompt {
-  @apply my-2 block w-full;
-}