@websolutespa/bom-llm 0.0.23 → 0.0.25

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @websolutespa/bom-llm
 
+## 0.0.25
+
+### Patch Changes
+
+- f5d0129: Added: Product Card & Product Card Group
+
+## 0.0.24
+
+### Patch Changes
+
+- Added: markdown llm_pill click handler
+
 ## 0.0.23
 
 ### Patch Changes

package/dist/umd/index.css

@@ -1056,8 +1056,8 @@ llm-embed {
   margin: 12px auto 0 auto;
   padding: 10px 20px;
   border-radius: 40px;
-  background: var(--llm-color-neutral-100);
-  color: var(--llm-color-base-100);
+  background: var(--llm-trigger-cta-background);
+  color: var(--llm-trigger-cta-foreground);
   font-weight: 800;
   font-size: inherit;
 }
@@ -1471,6 +1471,14 @@ llm-embed {
   background: var(--llm-input-background);
   width: 100%;
 }
+.llm .llm__prompt-input.-speech-supported > .llm__prompt-textarea {
+  padding: 10px 40px;
+}
+@media (min-width: 1024px) {
+  .llm .llm__prompt-input.-speech-supported > .llm__prompt-textarea {
+    padding: 18px 40px;
+  }
+}
 .llm .llm__prompt-textarea {
   appearance: none;
   display: block;
@@ -1508,14 +1516,6 @@ llm-embed {
     max-height: 220px;
   }
 }
-.-speech-supported .llm .llm__prompt-textarea {
-  padding: 10px 40px;
-}
-@media (min-width: 1024px) {
-  .-speech-supported .llm .llm__prompt-textarea {
-    padding: 18px 40px;
-  }
-}
 .llm .llm__prompt-speak, .llm .llm__prompt-microphone {
   position: absolute;
   display: flex;
@@ -1817,6 +1817,10 @@ llm-embed {
   height: 320px;
   object-fit: cover;
 }
+.llm .llm__message--assistant .llm__inner--string .llm__text .llm__text-body .llm__pill {
+  max-width: max(400px, 30vw);
+  margin-bottom: 1em;
+}
 .llm .llm__text-disclaimer {
   line-height: 1;
   font-family: var(--llm-font-secondary);
@@ -2206,6 +2210,379 @@ llm-embed {
   z-index: 10000;
 }
 
+.llm .llm__gridrow {
+  --grid-columns: var(--llm-grid-columns, 12);
+  --grid-size: var(--llm-grid-size, 1fr);
+  --grid-column-gap: var(--llm-grid-column-gap, 2rem);
+  --grid-row-gap: var(--llm-grid-row-gap, 2rem);
+  display: grid;
+  grid-template-columns: repeat(var(--grid-columns), var(--grid-size));
+  grid-column-gap: var(--grid-column-gap);
+  grid-row-gap: var(--grid-row-gap);
+}
+.llm .llm__grid {
+  --grid-column: var(--llm-grid-columns, 12);
+  grid-column: span var(--grid-column);
+}
+.llm .llm__grid.--xs-1 {
+  --grid-column: 1;
+}
+.llm .llm__grid.--xs-2 {
+  --grid-column: 2;
+}
+.llm .llm__grid.--xs-3 {
+  --grid-column: 3;
+}
+.llm .llm__grid.--xs-4 {
+  --grid-column: 4;
+}
+@media (min-width: 768px) {
+  .llm .llm__grid.--sm-1 {
+    --grid-column: 1;
+  }
+}
+@media (min-width: 768px) {
+  .llm .llm__grid.--sm-2 {
+    --grid-column: 2;
+  }
+}
+@media (min-width: 768px) {
+  .llm .llm__grid.--sm-3 {
+    --grid-column: 3;
+  }
+}
+@media (min-width: 768px) {
+  .llm .llm__grid.--sm-4 {
+    --grid-column: 4;
+  }
+}
+@media (min-width: 1024px) {
+  .llm .llm__grid.--md-1 {
+    --grid-column: 1;
+  }
+}
+@media (min-width: 1024px) {
+  .llm .llm__grid.--md-2 {
+    --grid-column: 2;
+  }
+}
+@media (min-width: 1024px) {
+  .llm .llm__grid.--md-3 {
+    --grid-column: 3;
+  }
+}
+@media (min-width: 1024px) {
+  .llm .llm__grid.--md-4 {
+    --grid-column: 4;
+  }
+}
+@media (min-width: 1024px) {
+  .llm .llm__grid.--md-5 {
+    --grid-column: 5;
+  }
+}
+@media (min-width: 1024px) {
+  .llm .llm__grid.--md-6 {
+    --grid-column: 6;
+  }
+}
+@media (min-width: 1024px) {
+  .llm .llm__grid.--md-7 {
+    --grid-column: 7;
+  }
+}
+@media (min-width: 1024px) {
+  .llm .llm__grid.--md-8 {
+    --grid-column: 8;
+  }
+}
+@media (min-width: 1024px) {
+  .llm .llm__grid.--md-9 {
+    --grid-column: 9;
+  }
+}
+@media (min-width: 1024px) {
+  .llm .llm__grid.--md-10 {
+    --grid-column: 10;
+  }
+}
+@media (min-width: 1024px) {
+  .llm .llm__grid.--md-11 {
+    --grid-column: 11;
+  }
+}
+@media (min-width: 1024px) {
+  .llm .llm__grid.--md-12 {
+    --grid-column: 12;
+  }
+}
+@media (min-width: 1440px) {
+  .llm .llm__grid.--lg-1 {
+    --grid-column: 1;
+  }
+}
+@media (min-width: 1440px) {
+  .llm .llm__grid.--lg-2 {
+    --grid-column: 2;
+  }
+}
+@media (min-width: 1440px) {
+  .llm .llm__grid.--lg-3 {
+    --grid-column: 3;
+  }
+}
+@media (min-width: 1440px) {
+  .llm .llm__grid.--lg-4 {
+    --grid-column: 4;
+  }
+}
+@media (min-width: 1440px) {
+  .llm .llm__grid.--lg-5 {
+    --grid-column: 5;
+  }
+}
+@media (min-width: 1440px) {
+  .llm .llm__grid.--lg-6 {
+    --grid-column: 6;
+  }
+}
+@media (min-width: 1440px) {
+  .llm .llm__grid.--lg-7 {
+    --grid-column: 7;
+  }
+}
+@media (min-width: 1440px) {
+  .llm .llm__grid.--lg-8 {
+    --grid-column: 8;
+  }
+}
+@media (min-width: 1440px) {
+  .llm .llm__grid.--lg-9 {
+    --grid-column: 9;
+  }
+}
+@media (min-width: 1440px) {
+  .llm .llm__grid.--lg-10 {
+    --grid-column: 10;
+  }
+}
+@media (min-width: 1440px) {
+  .llm .llm__grid.--lg-11 {
+    --grid-column: 11;
+  }
+}
+@media (min-width: 1440px) {
+  .llm .llm__grid.--lg-12 {
+    --grid-column: 12;
+  }
+}
+@media (min-width: 1600px) {
+  .llm .llm__grid.--xl-1 {
+    --grid-column: 1;
+  }
+}
+@media (min-width: 1600px) {
+  .llm .llm__grid.--xl-2 {
+    --grid-column: 2;
+  }
+}
+@media (min-width: 1600px) {
+  .llm .llm__grid.--xl-3 {
+    --grid-column: 3;
+  }
+}
+@media (min-width: 1600px) {
+  .llm .llm__grid.--xl-4 {
+    --grid-column: 4;
+  }
+}
+@media (min-width: 1600px) {
+  .llm .llm__grid.--xl-5 {
+    --grid-column: 5;
+  }
+}
+@media (min-width: 1600px) {
+  .llm .llm__grid.--xl-6 {
+    --grid-column: 6;
+  }
+}
+@media (min-width: 1600px) {
+  .llm .llm__grid.--xl-7 {
+    --grid-column: 7;
+  }
+}
+@media (min-width: 1600px) {
+  .llm .llm__grid.--xl-8 {
+    --grid-column: 8;
+  }
+}
+@media (min-width: 1600px) {
+  .llm .llm__grid.--xl-9 {
+    --grid-column: 9;
+  }
+}
+@media (min-width: 1600px) {
+  .llm .llm__grid.--xl-10 {
+    --grid-column: 10;
+  }
+}
+@media (min-width: 1600px) {
+  .llm .llm__grid.--xl-11 {
+    --grid-column: 11;
+  }
+}
+@media (min-width: 1600px) {
+  .llm .llm__grid.--xl-12 {
+    --grid-column: 12;
+  }
+}
+
+.llm .llm__product {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  border-radius: 0.6rem;
+  border: 1px solid var(--llm-product-border);
+  background: var(--llm-product-background);
+  color: var(--llm-product-foreground);
+  overflow: hidden;
+  font-weight: 100;
+}
+.llm .llm__product-media {
+  position: relative;
+  padding: 1rem;
+}
+.llm .llm__product-asset {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  aspect-ratio: var(--llm-product-aspect-ratio);
+  overflow: hidden;
+  background: var(--llm-color-neutral-200);
+}
+.llm .llm__product-asset > img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  background: var(--llm-color-neutral-200);
+}
+.llm .llm__product-content {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  padding: 1rem;
+  row-gap: 0.5em;
+  height: 100%;
+}
+.llm .llm__product-label {
+  font-size: 0.8rem;
+  line-height: 1.25;
+  position: absolute;
+  top: 1rem;
+  left: 1rem;
+  padding: 0.4rem 0.8rem;
+  border-radius: 0.5rem;
+  letter-spacing: 0.05rem;
+  font-weight: 400;
+  background: var(--llm-product-label-background);
+  color: var(--llm-product-label-foreground);
+}
+.llm .llm__product-sku {
+  line-height: 1;
+  font-family: var(--llm-font-primary);
+  font-weight: var(--llm-typography-label1-font-weight);
+  line-height: var(--llm-typography-label1-line-height);
+  letter-spacing: var(--llm-typography-label1-letter-spacing);
+  font-size: clamp(var(--llm-typography-label1-font-size-min) * 1px, var(--llm-typography-label1-font-size-min) * 1px + (100vw - 375px) / 1545 * (var(--llm-typography-label1-font-size-max) - var(--llm-typography-label1-font-size-min)), var(--llm-typography-label1-font-size-max) * 1px);
+  font-weight: 700;
+}
+.llm .llm__product-title {
+  line-height: 1;
+  font-family: var(--llm-font-primary);
+  font-weight: var(--llm-typography-body4-font-weight);
+  line-height: var(--llm-typography-body4-line-height);
+  letter-spacing: var(--llm-typography-body4-letter-spacing);
+  font-size: clamp(var(--llm-typography-body4-font-size-min) * 1px, var(--llm-typography-body4-font-size-min) * 1px + (100vw - 375px) / 1545 * (var(--llm-typography-body4-font-size-max) - var(--llm-typography-body4-font-size-min)), var(--llm-typography-body4-font-size-max) * 1px);
+  font-weight: 100;
+  flex-grow: 1;
+}
+.llm .llm__product-title:hover {
+  text-decoration: underline;
+}
+.llm .llm__product-abstract {
+  line-height: 1;
+  font-family: var(--llm-font-secondary);
+  font-weight: var(--llm-typography-body5-font-weight);
+  line-height: var(--llm-typography-body5-line-height);
+  letter-spacing: var(--llm-typography-body5-letter-spacing);
+  font-size: clamp(var(--llm-typography-body5-font-size-min) * 1px, var(--llm-typography-body5-font-size-min) * 1px + (100vw - 375px) / 1545 * (var(--llm-typography-body5-font-size-max) - var(--llm-typography-body5-font-size-min)), var(--llm-typography-body5-font-size-max) * 1px);
+  font-weight: 100;
+  flex-grow: 1;
+}
+.llm .llm__product-prices {
+  display: flex;
+  column-gap: 1em;
+}
+.llm .llm__product-price {
+  line-height: 1;
+  font-family: var(--llm-font-primary);
+  font-weight: var(--llm-typography-label1-font-weight);
+  line-height: var(--llm-typography-label1-line-height);
+  letter-spacing: var(--llm-typography-label1-letter-spacing);
+  font-size: clamp(var(--llm-typography-label1-font-size-min) * 1px, var(--llm-typography-label1-font-size-min) * 1px + (100vw - 375px) / 1545 * (var(--llm-typography-label1-font-size-max) - var(--llm-typography-label1-font-size-min)), var(--llm-typography-label1-font-size-max) * 1px);
+  font-weight: 400;
+}
+.llm .llm__product-fullprice {
+  line-height: 1;
+  font-family: var(--llm-font-primary);
+  font-weight: var(--llm-typography-label1-font-weight);
+  line-height: var(--llm-typography-label1-line-height);
+  letter-spacing: var(--llm-typography-label1-letter-spacing);
+  font-size: clamp(var(--llm-typography-label1-font-size-min) * 1px, var(--llm-typography-label1-font-size-min) * 1px + (100vw - 375px) / 1545 * (var(--llm-typography-label1-font-size-max) - var(--llm-typography-label1-font-size-min)), var(--llm-typography-label1-font-size-max) * 1px);
+  text-decoration: line-through;
+  opacity: 0.5;
+}
+.llm .llm__product-available {
+  color: var(--llm-product-available);
+}
+.llm .llm__product-soldout {
+  color: var(--llm-product-soldout);
+}
+.llm .llm__product-ctas {
+  display: flex;
+  justify-content: center;
+  gap: clamp(24px, 24px + (100vw - 375px) / 1545 * 8, 32px);
+  padding-top: clamp(8px, 8px + (100vw - 375px) / 1545 * 8, 16px);
+  margin-top: auto;
+}
+.llm .llm__product-cta {
+  display: flex;
+  align-items: center;
+  gap: 0.5em;
+  margin: 0 auto;
+  line-height: 1;
+  font-family: var(--llm-font-primary);
+  font-weight: var(--llm-typography-body4-font-weight);
+  line-height: var(--llm-typography-body4-line-height);
+  letter-spacing: var(--llm-typography-body4-letter-spacing);
+  font-size: clamp(var(--llm-typography-body4-font-size-min) * 1px, var(--llm-typography-body4-font-size-min) * 1px + (100vw - 375px) / 1545 * (var(--llm-typography-body4-font-size-max) - var(--llm-typography-body4-font-size-min)), var(--llm-typography-body4-font-size-max) * 1px);
+  font-weight: 700;
+}
+.llm .llm__product-cta svg {
+  fill: currentColor;
+  width: 24px;
+  height: 24px;
+}
+
+.llm .llm__products {
+  width: 100%;
+  margin: 3rem 0;
+}
+.llm .llm__product {
+  height: 100%;
+}
+
 .llm .llm__event-inner {
   border-radius: 5px;
   background: rgba(0, 60, 140, 0.8);
@@ -2696,7 +3073,6 @@ llm-embed {
   margin-bottom: 20vh;
 }
 .llm .llm__inner {
-  width: 100%;
   margin: 0 clamp(20px, 20px + (100vw - 375px) / 1545 * 90, 110px);
 }
 .llm .llm__inner--cardGroup {