@websolutespa/bom-mixer-llm 1.8.6 → 1.8.8

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @websolutespa/bom-mixer-llm
 
+## 1.8.8
+
+### Patch Changes
+
+- 8024a99: Added: useFocusTrap, regExpMapper, a11y
+
+## 1.8.7
+
+### Patch Changes
+
+- Modified: theme settings, Added: Font component
+
 ## 1.8.6
 
 ### Patch Changes

package/dist/cjs/index.css

@@ -1,33 +1,43 @@
-@import url("https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap");
+/*
+@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');
+
 @font-face {
-  font-family: "Aeonik";
-  src: url("https://design.wslabs.it/llm/fonts/Aeonik-Medium.woff2") format("woff2"), url("https://design.wslabs.it/llm/fonts/Aeonik-Medium.woff2") format("woff");
+  font-family: 'Aeonik';
+  src:
+    url('https://design.wslabs.it/llm/fonts/Aeonik-Medium.woff2') format('woff2'),
+    url('https://design.wslabs.it/llm/fonts/Aeonik-Medium.woff2') format('woff');
   font-weight: 500;
   font-style: normal;
   font-display: swap;
 }
+
 @font-face {
-  font-family: "Aeonik";
-  src: url("https://design.wslabs.it/llm/fonts/Aeonik-Bold.woff2") format("woff2"), url("https://design.wslabs.it/llm/fonts/Aeonik-Bold.woff") format("woff");
+  font-family: 'Aeonik';
+  src:
+    url('https://design.wslabs.it/llm/fonts/Aeonik-Bold.woff2') format('woff2'),
+    url('https://design.wslabs.it/llm/fonts/Aeonik-Bold.woff') format('woff');
   font-weight: 700;
   font-style: normal;
   font-display: swap;
 }
+
 @font-face {
-  font-family: "Capraia";
-  src: url("https://design.wslabs.it/llm/fonts/Capraia-Regular.woff2") format("woff2");
+  font-family: 'Capraia';
+  src: url('https://design.wslabs.it/llm/fonts/Capraia-Regular.woff2') format('woff2');
   font-style: normal;
   font-weight: 400;
   font-display: swap;
 }
+
 @font-face {
-  font-family: "Capraia";
-  src: url("https://design.wslabs.it/llm/fonts/Capraia-Light_W.woff2") format("woff2");
+  font-family: 'Capraia';
+  src: url('https://design.wslabs.it/llm/fonts/Capraia-Light_W.woff2') format('woff2');
   font-weight: 300;
   font-style: normal;
   font-display: swap;
 }
+*/
 /*
 @font-face {
   font-family: 'Capraia';
@@ -853,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);
@@ -863,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;
@@ -881,16 +918,16 @@ llm-embed {
   }
 }
 @media (hover: hover) {
-  .llm .llm__trigger-btn--hover:hover + .llm__trigger-welcome > div {
+  .llm .llm__trigger-btn--hover:hover + .llm__trigger-popup > div {
     opacity: 0;
     translate: -50% 10%;
   }
-  .llm .llm__trigger-btn--hover:hover + .llm__trigger-welcome > div + div {
+  .llm .llm__trigger-btn--hover:hover + .llm__trigger-popup > div + div {
     opacity: 1;
     translate: -50% 0%;
   }
 }
-.llm .llm__trigger-welcome > div {
+.llm .llm__trigger-popup > div {
   position: absolute;
   padding: clamp(16px, 16px + (100vw - 375px) / 1545 * 8, 24px);
   width: calc(100vw - 40px);
@@ -900,23 +937,24 @@ llm-embed {
   translate: -50% 0%;
   border-radius: 12px;
   text-align: center;
-  background: var(--llm-color-background);
-  color: var(--llm-color-foreground);
+  background: var(--llm-popup-background);
+  color: var(--llm-popup-foreground);
+  border: var(--llm-popup-border, none);
   transition: 0.4s;
   pointer-events: auto;
   overflow: hidden;
   cursor: pointer;
 }
-.llm .llm__trigger-welcome > div > span {
+.llm .llm__trigger-popup > div > span {
   position: relative;
 }
-.llm .llm__trigger-welcome > div + div {
+.llm .llm__trigger-popup > div + div {
   width: calc(100vw - 40px);
   max-width: var(--llm-popup-max-width);
   translate: -50% 10%;
   opacity: 0;
 }
-.llm .llm__trigger-welcome-cta {
+.llm .llm__trigger-cta {
   position: relative;
   display: block;
   margin: 12px auto 0 auto;
@@ -1163,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-foreground);
-  pointer-events: auto;
-  cursor: pointer;
+  color: var(--llm-color-title-foreground);
+}
+.llm .llm__header-back:focus {
+  outline-color: currentColor;
 }
 
 .llm .llm__scroller {
@@ -1245,6 +1361,7 @@ llm-embed {
   display: flex;
   flex-direction: column;
   gap: clamp(24px, 24px + (100vw - 375px) / 1545 * 16, 40px);
+  color: var(--llm-color-title-foreground);
 }
 .llm .llm__intro-hints {
   margin-top: clamp(24px, 24px + (100vw - 375px) / 1545 * 16, 40px);
@@ -1286,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);
@@ -1297,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 {
@@ -1310,11 +1454,14 @@ llm-embed {
   align-items: center;
   gap: clamp(8px, 8px + (100vw - 375px) / 1545 * 8, 16px);
   text-transform: uppercase;
+  color: var(--llm-hint-title-color, inherit);
 }
 .llm .llm__hint-title i {
+  flex-shrink: 0;
   display: block;
-  width: 18px;
-  height: 18px;
+  width: var(--llm-hint-icon-width, 18px);
+  height: var(--llm-hint-icon-height, 18px);
+  color: var(--llm-hint-icon-color, inherit);
 }
 .llm .llm__hint-title i svg {
   fill: currentColor;
@@ -1333,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%;
 }
@@ -1345,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;
@@ -1353,7 +1512,6 @@ llm-embed {
   width: 100%;
   max-height: 120px;
   min-height: 45px;
-  outline: none;
   border: none;
   resize: none;
   border-radius: 0;
@@ -1366,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);
@@ -1383,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;
@@ -1394,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;
@@ -1412,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;
@@ -1422,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 {
@@ -1466,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);
@@ -1483,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;
   }
 }
@@ -1519,19 +1806,21 @@ llm-embed {
   line-height: var(--llm-typography-body1-line-height);
   letter-spacing: var(--llm-typography-body1-letter-spacing);
   font-size: clamp(var(--llm-typography-body1-font-size-min) * 1px, var(--llm-typography-body1-font-size-min) * 1px + (100vw - 375px) / 1545 * (var(--llm-typography-body1-font-size-max) - var(--llm-typography-body1-font-size-min)), var(--llm-typography-body1-font-size-max) * 1px);
-  background: linear-gradient(rgba(154, 154, 154, 0.2) 10%, rgba(221, 221, 221, 0.1) 80%);
-  border: 1px solid rgba(237, 237, 237, 0.3);
+  background: var(--llm-user-background);
+  color: var(--llm-user-foreground);
+  border: var(--llm-user-border);
   backdrop-filter: blur(20px);
   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;
@@ -1543,6 +1832,9 @@ llm-embed {
 }
 .llm .llm__message--assistant .llm__inner--string .llm__text .llm__text-body {
   font-family: var(--llm-font-primary);
+  background: var(--llm-assistant-background);
+  color: var(--llm-assistant-foreground);
+  border: var(--llm-assistant-border);
   /*
   &,
   p {
@@ -1618,7 +1910,7 @@ llm-embed {
 }
 .llm .llm__message--assistant .llm__inner--string .llm__text .llm__text-body b,
 .llm .llm__message--assistant .llm__inner--string .llm__text .llm__text-body strong {
-  font-weight: 900;
+  font-weight: var(--llm-typography-cta2-font-weight);
 }
 .llm .llm__message--assistant .llm__inner--string .llm__text .llm__text-body h1,
 .llm .llm__message--assistant .llm__inner--string .llm__text .llm__text-body h2,
@@ -1654,11 +1946,11 @@ llm-embed {
 .llm .llm__message--assistant .llm__inner--string .llm__text .llm__text-body blockquote {
   margin-bottom: var(--llm-markdown-margin-bottom);
   padding-left: 0.5em;
-  border-left: 4px solid rgba(255, 255, 255, 0.2);
+  border-left: var(--llm-markdown-border);
 }
 .llm .llm__message--assistant .llm__inner--string .llm__text .llm__text-body hr {
   border: none;
-  border-top: 2px solid rgba(255, 255, 255, 0.2);
+  border-top: var(--llm-markdown-border);
   margin-top: var(--llm-markdown-margin-top);
   margin-bottom: var(--llm-markdown-margin-bottom);
 }
@@ -1666,13 +1958,13 @@ llm-embed {
   text-decoration: underline;
 }
 .llm .llm__message--assistant .llm__inner--string .llm__text .llm__text-body a:link, .llm .llm__message--assistant .llm__inner--string .llm__text .llm__text-body a:active, .llm .llm__message--assistant .llm__inner--string .llm__text .llm__text-body a:visited, .llm .llm__message--assistant .llm__inner--string .llm__text .llm__text-body a:hover {
-  color: var(--llm-color-neutral-100);
+  color: var(--llm-markdown-accent);
 }
 .llm .llm__message--assistant .llm__inner--string .llm__text .llm__text-body img {
   max-width: 320px;
   padding: 8px;
   border-radius: 8px;
-  border: var(--llm-pill-border);
+  border: var(--llm-markdown-border);
 }
 .llm .llm__message--assistant .llm__inner--string .llm__text .llm__text-body .llm__text-img {
   display: block;
@@ -1703,6 +1995,7 @@ llm-embed {
   display: flex;
   gap: clamp(8px, 8px + (100vw - 375px) / 1545 * 8, 16px);
   padding-top: clamp(16px, 16px + (100vw - 375px) / 1545 * 8, 24px);
+  color: var(--llm-color-foreground);
 }
 .llm .llm__text-disclaimer a {
   text-decoration: underline;
@@ -1712,6 +2005,7 @@ llm-embed {
   width: 18px;
   height: 18px;
   flex-shrink: 0;
+  color: var(--llm-color-accent-foreground);
 }
 .llm .llm__text-disclaimer i svg {
   display: block;