@onlive.ai/common-121 0.2.192 → 0.2.196

package/themes/custom/transparency.theme.cjs

@@ -0,0 +1,294 @@
+/*! @onlive.ai/common-121 v0.2.196 | © 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.
+ *
+ * This theme is automatically applied via applyOptionalStyles() when
+ * the withTransparency option is enabled in FlowOptions.
+ *
+ * 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});

package/themes/custom/transparency.theme.css

@@ -0,0 +1,291 @@
+/**
+ * Transparency / Glass Effect Theme
+ * ==================================
+ *
+ * Provides glassmorphism styling for flow components when rendered
+ * in maximized or fullscreen states with transparent backgrounds.
+ *
+ * This theme is automatically applied via applyOptionalStyles() when
+ * the withTransparency option is enabled in FlowOptions.
+ *
+ * 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);
+}

package/themes/custom/transparency.theme.d.cts

@@ -0,0 +1,3 @@
+/*! @onlive.ai/common-121 v0.2.196 | © 2026 Onlive.ai */
+import 'lit';
+export { s as styles } from '../../transparency.theme-ClBpR42X.cjs';

package/themes/custom/transparency.theme.d.ts

@@ -0,0 +1,3 @@
+/*! @onlive.ai/common-121 v0.2.196 | © 2026 Onlive.ai */
+import 'lit';
+export { s as styles } from '../../transparency.theme-ClBpR42X.js';