npm - @websolutespa/bom-llm - Versions diffs - 0.0.29 → 0.0.30 - Mend

@websolutespa/bom-llm 0.0.29 → 0.0.30

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/CHANGELOG.md CHANGED Viewed

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

package/dist/umd/index.css CHANGED Viewed

@@ -997,6 +997,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);
@@ -1007,8 +1033,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;
@@ -1308,15 +1335,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 {
@@ -1432,6 +1537,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);
@@ -1443,8 +1574,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 {
@@ -1482,7 +1614,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%;
 }
@@ -1494,6 +1626,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;
@@ -1502,7 +1646,6 @@ llm-embed {
   width: 100%;
   max-height: 120px;
   min-height: 45px;
-  outline: none;
   border: none;
   resize: none;
   border-radius: 0;
@@ -1515,8 +1658,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);
@@ -1532,6 +1683,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;
@@ -1543,8 +1720,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;
@@ -1561,6 +1739,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;
@@ -1571,8 +1775,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 {
@@ -1615,10 +1820,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);
@@ -1632,28 +1866,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;
   }
 }
@@ -1675,13 +1947,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;