@websolutespa/bom-mixer-llm 1.8.7 → 1.8.8

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @websolutespa/bom-mixer-llm
 
+## 1.8.8
+
+### Patch Changes
+
+- 8024a99: Added: useFocusTrap, regExpMapper, a11y
+
 ## 1.8.7
 
 ### Patch Changes

package/dist/cjs/index.css

@@ -863,6 +863,32 @@ llm-embed {
   cursor: pointer;
 }
 .llm .llm__trigger-btn {
+  margin: 0;
+  padding: 0;
+  border: none;
+  text-decoration: none;
+  background: none;
+  appearance: none;
+  font-family: inherit;
+  font-style: inherit;
+  font-variant-ligatures: inherit;
+  font-variant-caps: inherit;
+  font-variant-numeric: inherit;
+  font-variant-east-asian: inherit;
+  font-weight: inherit;
+  font-stretch: inherit;
+  text-rendering: inherit;
+  letter-spacing: inherit;
+  word-spacing: inherit;
+  line-height: inherit;
+  text-transform: none;
+  text-indent: inherit;
+  text-shadow: none;
+  text-align: inherit;
+  pointer-events: auto;
+  cursor: pointer;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
   position: relative;
   width: var(--llm-trigger-size);
   height: var(--llm-trigger-size);
@@ -873,8 +899,9 @@ llm-embed {
   will-change: transform;
   transition: 0.4s;
   box-shadow: var(--llm-trigger-box-shadow);
-  pointer-events: auto;
-  cursor: pointer;
+}
+.llm .llm__trigger-btn:focus {
+  outline-color: currentColor;
 }
 .llm .llm__trigger-btn > span {
   line-height: 1;
@@ -1174,15 +1201,93 @@ llm-embed {
 .llm .llm__header-logo-mini > img {
   object-fit: contain;
 }
+.llm .llm__header-skip {
+  margin: 0;
+  padding: 0;
+  border: none;
+  text-decoration: none;
+  background: none;
+  appearance: none;
+  font-family: inherit;
+  font-style: inherit;
+  font-variant-ligatures: inherit;
+  font-variant-caps: inherit;
+  font-variant-numeric: inherit;
+  font-variant-east-asian: inherit;
+  font-weight: inherit;
+  font-stretch: inherit;
+  text-rendering: inherit;
+  letter-spacing: inherit;
+  word-spacing: inherit;
+  line-height: inherit;
+  text-transform: none;
+  text-indent: inherit;
+  text-shadow: none;
+  text-align: inherit;
+  pointer-events: auto;
+  cursor: pointer;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  background-color: var(--llm-color-background);
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  padding: 0 !important;
+  position: absolute !important;
+  width: 1px !important;
+  white-space: nowrap !important;
+}
+.llm .llm__header-skip:focus {
+  outline-color: currentColor;
+}
+.llm .llm__header-skip:focus, .llm .llm__header-skip:active {
+  clip: auto !important;
+  clip-path: none !important;
+  height: auto !important;
+  margin: auto !important;
+  overflow: visible !important;
+  width: auto !important;
+  white-space: normal !important;
+}
 .llm .llm__header-back {
+  margin: 0;
+  padding: 0;
+  border: none;
+  text-decoration: none;
+  background: none;
+  appearance: none;
+  font-family: inherit;
+  font-style: inherit;
+  font-variant-ligatures: inherit;
+  font-variant-caps: inherit;
+  font-variant-numeric: inherit;
+  font-variant-east-asian: inherit;
+  font-weight: inherit;
+  font-stretch: inherit;
+  text-rendering: inherit;
+  letter-spacing: inherit;
+  word-spacing: inherit;
+  line-height: inherit;
+  text-transform: none;
+  text-indent: inherit;
+  text-shadow: none;
+  text-align: inherit;
+  pointer-events: auto;
+  cursor: pointer;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
   display: inline-flex;
   align-items: center;
   gap: clamp(8px, 8px + (100vw - 375px) / 1545 * 0, 8px);
   text-transform: uppercase;
   user-select: none;
   color: var(--llm-color-title-foreground);
-  pointer-events: auto;
-  cursor: pointer;
+}
+.llm .llm__header-back:focus {
+  outline-color: currentColor;
 }
 
 .llm .llm__scroller {
@@ -1298,6 +1403,32 @@ llm-embed {
   height: auto;
 }
 .llm .llm__hint {
+  margin: 0;
+  padding: 0;
+  border: none;
+  text-decoration: none;
+  background: none;
+  appearance: none;
+  font-family: inherit;
+  font-style: inherit;
+  font-variant-ligatures: inherit;
+  font-variant-caps: inherit;
+  font-variant-numeric: inherit;
+  font-variant-east-asian: inherit;
+  font-weight: inherit;
+  font-stretch: inherit;
+  text-rendering: inherit;
+  letter-spacing: inherit;
+  word-spacing: inherit;
+  line-height: inherit;
+  text-transform: none;
+  text-indent: inherit;
+  text-shadow: none;
+  text-align: inherit;
+  pointer-events: auto;
+  cursor: pointer;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
   display: flex;
   flex-direction: column;
   gap: clamp(8px, 8px + (100vw - 375px) / 1545 * 8, 16px);
@@ -1309,8 +1440,9 @@ llm-embed {
   border: var(--llm-hint-border);
   font-family: var(--llm-hint-font-family);
   backdrop-filter: blur(20px);
-  pointer-events: auto;
-  cursor: pointer;
+}
+.llm .llm__hint:focus {
+  outline-color: currentColor;
 }
 @media (min-width: 768px) {
   .llm .llm__hint:first-child {
@@ -1348,7 +1480,7 @@ llm-embed {
   position: relative;
   box-shadow: -4px 4px 50px 0px rgba(8, 20, 62, 0.08);
   border-radius: 8px;
-  overflow: hidden;
+  overflow: visible;
   background: var(--llm-input-background);
   width: 100%;
 }
@@ -1360,6 +1492,18 @@ llm-embed {
     padding: 18px 40px;
   }
 }
+.llm .llm__prompt-label {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  padding: 0 !important;
+  position: absolute !important;
+  width: 1px !important;
+  white-space: nowrap !important;
+}
 .llm .llm__prompt-textarea {
   appearance: none;
   display: block;
@@ -1368,7 +1512,6 @@ llm-embed {
   width: 100%;
   max-height: 120px;
   min-height: 45px;
-  outline: none;
   border: none;
   resize: none;
   border-radius: 0;
@@ -1381,8 +1524,16 @@ llm-embed {
   font-family: var(--llm-input-font-family);
   font-size: 16px;
   line-height: 1.3;
+  border-radius: 8px;
   background: transparent;
   color: var(--llm-input-foreground);
+  pointer-events: auto;
+  cursor: pointer;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+.llm .llm__prompt-textarea:focus {
+  outline-color: currentColor;
 }
 .llm .llm__prompt-textarea::placeholder {
   font-family: var(--llm-input-font-family);
@@ -1398,6 +1549,32 @@ llm-embed {
   }
 }
 .llm .llm__prompt-speak, .llm .llm__prompt-microphone {
+  margin: 0;
+  padding: 0;
+  border: none;
+  text-decoration: none;
+  background: none;
+  appearance: none;
+  font-family: inherit;
+  font-style: inherit;
+  font-variant-ligatures: inherit;
+  font-variant-caps: inherit;
+  font-variant-numeric: inherit;
+  font-variant-east-asian: inherit;
+  font-weight: inherit;
+  font-stretch: inherit;
+  text-rendering: inherit;
+  letter-spacing: inherit;
+  word-spacing: inherit;
+  line-height: inherit;
+  text-transform: none;
+  text-indent: inherit;
+  text-shadow: none;
+  text-align: inherit;
+  pointer-events: auto;
+  cursor: pointer;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
   position: absolute;
   display: flex;
   align-items: center;
@@ -1409,8 +1586,9 @@ llm-embed {
   border-radius: 50%;
   font-size: 16px;
   color: var(--llm-input-accent);
-  pointer-events: auto;
-  cursor: pointer;
+}
+.llm .llm__prompt-speak:focus, .llm .llm__prompt-microphone:focus {
+  outline-color: currentColor;
 }
 .llm .llm__prompt-speak svg, .llm .llm__prompt-microphone svg {
   width: 18px;
@@ -1427,6 +1605,32 @@ llm-embed {
   outline: 2px solid var(--llm-color-base-100);
 }
 .llm .llm__prompt-submit, .llm .llm__prompt-stop {
+  margin: 0;
+  padding: 0;
+  border: none;
+  text-decoration: none;
+  background: none;
+  appearance: none;
+  font-family: inherit;
+  font-style: inherit;
+  font-variant-ligatures: inherit;
+  font-variant-caps: inherit;
+  font-variant-numeric: inherit;
+  font-variant-east-asian: inherit;
+  font-weight: inherit;
+  font-stretch: inherit;
+  text-rendering: inherit;
+  letter-spacing: inherit;
+  word-spacing: inherit;
+  line-height: inherit;
+  text-transform: none;
+  text-indent: inherit;
+  text-shadow: none;
+  text-align: inherit;
+  pointer-events: auto;
+  cursor: pointer;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
   flex-shrink: 0;
   width: 45px;
   height: 45px;
@@ -1437,8 +1641,9 @@ llm-embed {
   background: var(--llm-trigger-background);
   color: var(--llm-trigger-foreground);
   border-radius: 50%;
-  pointer-events: auto;
-  cursor: pointer;
+}
+.llm .llm__prompt-submit:focus, .llm .llm__prompt-stop:focus {
+  outline-color: currentColor;
 }
 @media (min-width: 1024px) {
   .llm .llm__prompt-submit, .llm .llm__prompt-stop {
@@ -1481,10 +1686,39 @@ llm-embed {
 .llm .llm__prompt-suggestions .llm__suggestions {
   margin: 0 calc(clamp(20px, 20px + (100vw - 375px) / 1545 * 90, 110px) * -1);
 }
+.llm .llm__prompt-suggestions .swiper {
+  overflow: visible;
+}
 .llm .llm__prompt-suggestions .swiper-slide {
   width: auto;
 }
 .llm .llm__pill {
+  margin: 0;
+  padding: 0;
+  border: none;
+  text-decoration: none;
+  background: none;
+  appearance: none;
+  font-family: inherit;
+  font-style: inherit;
+  font-variant-ligatures: inherit;
+  font-variant-caps: inherit;
+  font-variant-numeric: inherit;
+  font-variant-east-asian: inherit;
+  font-weight: inherit;
+  font-stretch: inherit;
+  text-rendering: inherit;
+  letter-spacing: inherit;
+  word-spacing: inherit;
+  line-height: inherit;
+  text-transform: none;
+  text-indent: inherit;
+  text-shadow: none;
+  text-align: inherit;
+  pointer-events: auto;
+  cursor: pointer;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
   line-height: 1;
   font-family: var(--llm-font-primary);
   font-weight: var(--llm-typography-cta2-font-weight);
@@ -1498,28 +1732,66 @@ llm-embed {
   color: var(--llm-pill-foreground);
   font-family: var(--llm-pill-font-family);
   backdrop-filter: blur(20px);
-  pointer-events: auto;
-  cursor: pointer;
 }
-.llm .llm__prompt-powered-by {
+.llm .llm__pill:focus {
+  outline-color: currentColor;
+}
+.llm .llm__prompt-footer {
   position: absolute;
   display: flex;
   justify-content: center;
   align-items: center;
-  column-gap: 4px;
   right: 0;
   left: 0;
+  padding: 4px 0 0 0;
+}
+@media (min-width: 1024px) {
+  .llm .llm__prompt-footer {
+    padding: 6px 0;
+  }
+}
+.llm .llm__prompt-powered-by {
+  margin: 0;
+  padding: 0;
+  border: none;
+  text-decoration: none;
+  background: none;
+  appearance: none;
+  font-family: inherit;
+  font-style: inherit;
+  font-variant-ligatures: inherit;
+  font-variant-caps: inherit;
+  font-variant-numeric: inherit;
+  font-variant-east-asian: inherit;
+  font-weight: inherit;
+  font-stretch: inherit;
+  text-rendering: inherit;
+  letter-spacing: inherit;
+  word-spacing: inherit;
+  line-height: inherit;
+  text-transform: none;
+  text-indent: inherit;
+  text-shadow: none;
+  text-align: inherit;
+  pointer-events: auto;
+  cursor: pointer;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  column-gap: 4px;
   color: var(--llm-color-foreground);
   opacity: 0.4;
   transition: opacity ease-in-out 250ms;
-  pointer-events: auto;
-  cursor: pointer;
-  padding: 4px 0 0 0;
   font-size: 11px;
+  padding: 0 0.3em;
+}
+.llm .llm__prompt-powered-by:focus {
+  outline-color: currentColor;
 }
 @media (min-width: 1024px) {
   .llm .llm__prompt-powered-by {
-    padding: 6px 0;
     font-size: 12px;
   }
 }
@@ -1541,13 +1813,14 @@ llm-embed {
   border-radius: 12px;
   padding: clamp(16px, 16px + (100vw - 375px) / 1545 * 8, 24px) clamp(24px, 24px + (100vw - 375px) / 1545 * 8, 32px);
 }
-.llm .llm__message--assistant .llm__inner--string:first-child .llm__text .llm__text-body {
+.llm .llm__message--assistant .llm__inner--string:first-child .llm__text .llm__text-body, .llm .llm__message--assistant .llm__inner--string:first-child .llm__text .llm__text-body > p, .llm .llm__message--assistant .llm__inner--string:first-child .llm__text .llm__text-body > h2 {
   line-height: 1;
   font-family: var(--llm-font-primary);
   font-weight: var(--llm-typography-display3-font-weight);
   line-height: var(--llm-typography-display3-line-height);
   letter-spacing: var(--llm-typography-display3-letter-spacing);
   font-size: clamp(var(--llm-typography-display3-font-size-min) * 1px, var(--llm-typography-display3-font-size-min) * 1px + (100vw - 375px) / 1545 * (var(--llm-typography-display3-font-size-max) - var(--llm-typography-display3-font-size-min)), var(--llm-typography-display3-font-size-max) * 1px);
+  margin: 0;
 }
 .llm .llm__message--assistant .llm__inner--string:not(:first-child) .llm__text .llm__text-body {
   line-height: 1;