@onlive.ai/common-121 0.2.192 → 0.2.198

package/themes/custom/seat.theme.js

@@ -1,4 +1,4 @@
-/*! @onlive.ai/common-121 v0.2.192 | © 2026 Onlive.ai */
+/*! @onlive.ai/common-121 v0.2.198 | © 2026 Onlive.ai */
 import{css as o}from"lit";var l=o`
 /**
  * Seat Theme
@@ -59,6 +59,22 @@ import{css as o}from"lit";var l=o`
    CORE ONLIVE UI COMPONENTS
    ======================================================================== */
 
+[slot="label"] h3 {
+  font-family: var(--seat-font-family-medium);
+  font-size: var(--ol-font-size-medium);
+  color: var(--ol-color-neutral-900);
+  margin: 0;
+  line-height: var(--ol-line-height-dense);
+}
+
+[slot="label"] p {
+  font-family: var(--seat-font-family-regular);
+  font-size: var(--ol-font-size-small);
+  color: var(--ol-color-neutral-500);
+  margin: var(--ol-spacing-2x-small) 0 0;
+  line-height: var(--ol-line-height-dense);
+}
+
 /* Spinner */
 ol-spinner {
   --track-width: 3px;
@@ -223,12 +239,6 @@ ol-carousel::part(pagination-item--active) {
 .ofl__carousel--showcase-mode .ofl__carousel__item-label {
   display: none;
 }
-.ofl__carousel--showcase-mode::part(pagination) {
-  position: absolute;
-  bottom: 90px;
-  left: 0;
-  right: 0;
-}
 .ofl__carousel--showcase-mode::part(navigation-button) {
   background: var(--ol-color-neutral-1000);
   color: var(--ol-color-neutral-50);
@@ -259,9 +269,10 @@ ol-radio-group::part(form-control-label) {
   font-family: var(--seat-font-family-regular);
   font-size: var(--ol-font-size-small);
   color: var(--ol-color-neutral-500);
+  margin-bottom: var(--ol-spacing-small);
 }
-ol-radio-group ol-radio {
-  line-height: 2.5;
+ol-radio-group ol-radio + ol-radio {
+  margin-top: var(--ol-spacing-x-small);
 }
 ol-radio-group ol-radio::part(control) {
   --toggle-size: 20px;
@@ -309,11 +320,13 @@ ol-dialog::part(panel) {
 
 /* Loading state */
 .ofl__flow__loading,
-.ofl__flow__loading-overlay {
+.ofl__flow__loading-overlay,
+.ofl__flow__transition-overlay {
   font-size: var(--ol-spacing-2x-large);
 }
 .ofl__flow__loading ol-spinner,
-.ofl__flow__loading-overlay ol-spinner {
+.ofl__flow__loading-overlay ol-spinner,
+.ofl__flow__transition-overlay ol-spinner {
   --track-width: 6px;
 }
 .ofl__flow--theme-dark .ofl__flow__loading-overlay {
@@ -422,27 +435,54 @@ ol-dialog::part(panel) {
   gap: var(--ol-spacing-2x-small);
 }
 
+/* Rating Component Styling */
+.ofl__rating {
+  --symbol-color: var(--ol-color-neutral-900);
+  --symbol-size: 2em;
+  --symbol-spacing: 0 var(--ol-spacing-medium) 0 0;
+  margin-bottom: var(--ol-spacing-large);
+}
+.ofl__rating__label {
+  margin-bottom: var(--ol-spacing-large);
+  margin-top: var(--ol-spacing-large);
+}
+
 /* ========================================================================
    PAGE LAYOUT
    ======================================================================== */
 
 /* Landing installations */
-
+.oip__page {
+  background-color: transparent;
+}
+.oip__page__header {
+  max-width: 1400px;
+  margin: 0 auto;
+  width: 100%;
+  backdrop-filter: blur(12px);
+}
 .oip__page__content {
+  flex: 1;
+  max-width: 1400px;
+  margin: 0 auto;
+  align-items: center;
   background-color: transparent;
 }
 .oip__page__content .oip__page__installation {
   display: flex;
-  align-items: center;
+  align-items: self-start;
   justify-content: center;
   width: 50%;
-  padding: var(--ol-spacing-2x-large);
-  height: calc(100vh - 2 * var(--ol-spacing-2x-large));
+  padding: var(--ol-spacing-large);
+}
+.oip__page__content .oip__page__image_container {
+  background: transparent;
 }
 .oip__page__content .oip__page__image_container .oip__page__image {
   background-color: transparent;
   object-fit: contain;
 }
+
 .ofl__widget,
 .ofl__flow {
   max-width: 100%;
@@ -468,6 +508,7 @@ ol-dialog::part(panel) {
 .ofl__flow__actions--bottom {
   margin-top: var(--ol-spacing-2x-large);
 }
+.ofl__actions__item,
 .ofl__actions__button {
   width: 100%;
   max-width: 500px;
@@ -619,14 +660,21 @@ ol-dialog::part(panel) {
     --ol-calendar-day-font-size: var(--ol-font-size-small);
   }
 
+  .oip__page__header {
+    width: auto;
+    margin: 0;
+    position: sticky;
+    top: 0;
+  }
   .oip__page__content {
-    height: 100vh;
+    height: 100%;
     justify-content: center;
     align-items: center;
   }
   .oip__page__content .oip__page__installation {
     height: auto;
-    width: calc(100% - 2 * var(--ol-spacing-2x-large));
+    width: 100%;
+    align-items: center;
   }
 
   ol-carousel::part(navigation) {
@@ -793,7 +841,7 @@ ol-dialog::part(panel) {
   margin: 0;
 }
 .ofl__form__field[name="carouselLabel"] {
-  margin-bottom: -100px;
+  margin-bottom: 0;
 }
 .olcs__model-image {
   width: 100%;
@@ -827,6 +875,7 @@ h3.olcs__label {
   gap: var(--ol-spacing-large);
 }
 .olcs__row__text h4 {
+  font-family: var(--seat-font-family-bold);
   width: 50px;
 }
 .olcs__row__text h4,

package/themes/custom/transparency.theme.cjs

@@ -0,0 +1,294 @@
+/*! @onlive.ai/common-121 v0.2.198 | © 2026 Onlive.ai */
+"use strict";var e=Object.defineProperty;var n=Object.getOwnPropertyDescriptor;var _=Object.getOwnPropertyNames;var b=Object.prototype.hasOwnProperty;var f=(r,o)=>{for(var l in o)e(r,l,{get:o[l],enumerable:!0})},p=(r,o,l,c)=>{if(o&&typeof o=="object"||typeof o=="function")for(let a of _(o))!b.call(r,a)&&a!==l&&e(r,a,{get:()=>o[a],enumerable:!(c=n(o,a))||c.enumerable});return r};var d=r=>p(e({},"__esModule",{value:!0}),r);var g={};f(g,{styles:()=>i});module.exports=d(g);var t=require("lit"),i=t.css`
+/**
+ * Transparency / Glass Effect Theme
+ * ==================================
+ *
+ * Provides glassmorphism styling for flow components when rendered
+ * in maximized or fullscreen states with transparent backgrounds.
+ *
+ * Applied via themeName: "transparency" in FlowOptions, or as part of
+ * a theme array (e.g., themeName: ["audi", "transparency"]).
+ *
+ * Covers: input, textarea, select/group, rating, phone-input,
+ * calendar, map, stripe, button group, checkbox, radio, carousel.
+ */
+
+/* ========================================================================
+   INPUT
+   ======================================================================== */
+
+.ofl__input::part(base) {
+  background: rgba(0, 0, 0, 0.25);
+  backdrop-filter: blur(16px);
+}
+
+.ofl__input::part(input) {
+  color: #fff;
+}
+
+.ofl__input::part(input)::placeholder {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.ofl__input::part(form-control-label) {
+  color: rgba(255, 255, 255, 0.9);
+}
+
+.ofl__input::part(form-control-help-text) {
+  color: rgba(255, 255, 255, 0.6);
+}
+
+/* ========================================================================
+   TEXTAREA
+   ======================================================================== */
+
+.ofl__textarea::part(base) {
+  background: rgba(0, 0, 0, 0.25);
+  backdrop-filter: blur(16px);
+}
+
+.ofl__textarea::part(textarea) {
+  color: #fff;
+}
+
+.ofl__textarea::part(textarea)::placeholder {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.ofl__textarea::part(form-control-label) {
+  color: rgba(255, 255, 255, 0.9);
+}
+
+.ofl__textarea::part(form-control-help-text) {
+  color: rgba(255, 255, 255, 0.6);
+}
+
+/* ========================================================================
+   SELECT / GROUP
+   ======================================================================== */
+
+.ofl__group::part(combobox),
+.ofl__group ol-options,
+.ofl__group::part(display-input) {
+  background: rgba(0, 0, 0, 0.25);
+  backdrop-filter: blur(16px);
+  color: #fff;
+}
+
+.ofl__group::part(listbox) {
+  background: rgba(0, 0, 0, 0.75);
+  backdrop-filter: blur(16px);
+  color: #fff;
+}
+
+.ofl__group ol-option::part(base) {
+  color: #fff;
+}
+
+.ofl__group ol-option::part(base):hover {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.ofl__group::part(form-control-label) {
+  color: rgba(255, 255, 255, 0.9);
+}
+
+.ofl__group::part(form-control-help-text) {
+  color: rgba(255, 255, 255, 0.6);
+}
+
+/* ========================================================================
+   RATING
+   ======================================================================== */
+
+.ofl__rating {
+  color: #fff;
+}
+
+.ofl__rating .ofl__rating__label {
+  color: rgba(255, 255, 255, 0.9);
+}
+
+/* ========================================================================
+   PHONE INPUT
+   ======================================================================== */
+
+.ofl__phone-input ol-input::part(base) {
+  background: rgba(0, 0, 0, 0.25);
+  backdrop-filter: blur(16px);
+}
+
+.ofl__phone-input ol-input::part(input) {
+  color: #fff;
+}
+
+.ofl__phone-input ol-input::part(input)::placeholder {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.ofl__phone-input ol-select::part(combobox) {
+  background: rgba(0, 0, 0, 0.25);
+  backdrop-filter: blur(16px);
+  color: #fff;
+}
+
+.ofl__phone-input ol-select::part(listbox) {
+  background: rgba(0, 0, 0, 0.75);
+  backdrop-filter: blur(16px);
+}
+
+.ofl__phone-input::part(form-control-label) {
+  color: rgba(255, 255, 255, 0.9);
+}
+
+/* ========================================================================
+   CALENDAR
+   ======================================================================== */
+
+.ofl__calendar-container {
+  --ol-calendar-background-color: rgba(0, 0, 0, 0.25);
+  --ol-calendar-color: #fff;
+  --ol-calendar-day-background-color: rgba(0, 0, 0, 0.1);
+  --ol-calendar-day-color: #fff;
+  --ol-calendar-day-hover-background-color: rgba(255, 255, 255, 0.15);
+  --ol-calendar-day-today-color: var(--ol-color-primary-400);
+  --ol-calendar-day-today-background-color: rgba(255, 255, 255, 0.1);
+  --ol-calendar-day-today-inactive-color: rgba(255, 255, 255, 0.3);
+  --ol-calendar-day-weekend-color: var(--ol-color-rose-400);
+  --ol-calendar-day-weekend-hover-background-color: rgba(255, 255, 255, 0.15);
+  --ol-calendar-inactive-color: rgba(255, 255, 255, 0.3);
+  --ol-calendar-inactive-background-color: transparent;
+  --ol-calendar-inactive-selected-color: rgba(255, 255, 255, 0.4);
+  --ol-calendar-inactive-selected-background-color: rgba(255, 255, 255, 0.08);
+  --ol-calendar-header-color: #fff;
+  --ol-calendar-header-hover-color: rgba(255, 255, 255, 0.8);
+  --ol-calendar-header-inactive-color: rgba(255, 255, 255, 0.5);
+  --ol-calendar-week-color: rgba(255, 255, 255, 0.7);
+  --ol-calendar-week-hover-color: rgba(255, 255, 255, 0.9);
+  --ol-calendar-arrow-color: #fff;
+  --ol-calendar-arrow-disabled-color: rgba(255, 255, 255, 0.3);
+  --ol-calendar-month-background-color: transparent;
+  --ol-calendar-month-color: rgba(255, 255, 255, 0.9);
+  --ol-calendar-month-hover-background-color: rgba(255, 255, 255, 0.15);
+  --ol-calendar-year-background-color: transparent;
+  --ol-calendar-year-color: rgba(255, 255, 255, 0.9);
+  --ol-calendar-year-hover-background-color: rgba(255, 255, 255, 0.15);
+  --ol-calendar-popup-background-color: rgba(0, 0, 0, 0.75);
+  --ol-calendar-popup-color: #fff;
+  --ol-calendar-day-popup-background-color: rgba(255, 255, 255, 0.15);
+  --ol-calendar-focus-outline-color: rgba(255, 255, 255, 0.5);
+}
+
+.ofl__calendar-container .ofl__calendar__label {
+  color: rgba(255, 255, 255, 0.9);
+}
+
+.ofl__calendar-container .ofl__calendar__time-label {
+  color: rgba(255, 255, 255, 0.9);
+}
+
+.ofl__calendar-container .ofl__calendar__time-list--carousel::part(navigation-button) {
+  color: #fff;
+}
+
+.ofl__calendar-container .ofl__calendar__time-item__content {
+  background-color: var(--ol-color-primary-600);
+  color: var(--ol-color-neutral-0);
+}
+
+.ofl__calendar-container .ofl__calendar__time-list--list .ofl__calendar__time-item::part(button) {
+  color: #fff;
+  border-color: rgba(255, 255, 255, 0.4);
+}
+
+.ofl__calendar-container
+  .ofl__calendar__time-list--list
+  .ofl__calendar__time-item:hover:not([disabled], [checked])::part(button) {
+  color: #fff;
+}
+
+.ofl__calendar-container
+  .ofl__calendar__time-list--list
+  .ofl__calendar__time-item:hover:not([disabled], [checked])::part(button)::after {
+  border-color: #fff;
+}
+
+/* ========================================================================
+   MAP
+   ======================================================================== */
+
+.ofl__map .ofl__map__label {
+  color: rgba(255, 255, 255, 0.9);
+}
+
+/* ========================================================================
+   STRIPE
+   ======================================================================== */
+
+.ofl__stripe .ofl__stripe__label {
+  color: rgba(255, 255, 255, 0.9);
+}
+
+/* ========================================================================
+   BUTTON GROUP
+   ======================================================================== */
+
+.ofl__group ol-button[variant="default"]::part(base) {
+  background: rgba(255, 255, 255, 0.1);
+  color: #fff;
+  border-color: rgba(255, 255, 255, 0.2);
+}
+
+.ofl__group ol-button[variant="default"]::part(base):hover {
+  background: rgba(255, 255, 255, 0.2);
+}
+
+/* ========================================================================
+   CHECKBOX
+   ======================================================================== */
+
+.ofl__checkbox__checkbox::part(label),
+.ofl__checkbox__list .ofl__checkbox__checkbox::part(label) {
+  color: rgba(255, 255, 255, 0.9);
+}
+
+.ofl__checkbox__list .ofl__checkbox__label {
+  color: rgba(255, 255, 255, 0.9);
+}
+
+/* ========================================================================
+   RADIO
+   ======================================================================== */
+
+.ofl__radio__list ol-radio::part(control) {
+  background: rgba(0, 0, 0, 0.25);
+  border-color: rgba(255, 255, 255, 0.3);
+}
+
+.ofl__radio__list ol-radio::part(label) {
+  color: rgba(255, 255, 255, 0.9);
+}
+
+.ofl__radio__list::part(form-control-label) {
+  color: rgba(255, 255, 255, 0.9);
+}
+
+/* ========================================================================
+   CAROUSEL
+   ======================================================================== */
+
+.ofl__carousel::part(navigation-button),
+.ofl__carousel::part(navigation-button--next),
+.ofl__carousel::part(navigation-button--previous) {
+  color: #fff;
+}
+
+.ofl__carousel .ofl__carousel__label {
+  color: rgba(255, 255, 255, 0.9);
+}
+
+.ofl__carousel__nav ol-radio-button::part(label) {
+  color: rgba(255, 255, 255, 0.9);
+}
+`;0&&(module.exports={styles});