@codeenvision/ui-webcomponents 1.0.10 → 1.0.13

package/dist/styles/ce-webcomponents.css

@@ -11719,10 +11719,32 @@ input:checked + .ce-form__checkbox-box {
   position: relative;
   overflow: hidden;
 }
+.ce-form-builder--premium::before, .ce-form-builder--premium--high-contrast::before, .ce-form-builder--premium--dark::before, .ce-form-builder--premium--light::before {
+  content: "";
+  position: absolute;
+  inset: 0 0 auto;
+  height: 0.35rem;
+  background: linear-gradient(90deg, #0e7490, #2563eb, #06b6d4);
+}
 .ce-form-builder--premium .ce-form-builder__header, .ce-form-builder--premium--high-contrast .ce-form-builder__header, .ce-form-builder--premium--dark .ce-form-builder__header, .ce-form-builder--premium--light .ce-form-builder__header {
   border-bottom: 1px solid color-mix(in srgb, var(--ce-form-builder-border-color) 70%, transparent);
   padding-bottom: var(--ce-form-builder-header-gap);
 }
+.ce-form-builder--premium .ce-form-builder__step, .ce-form-builder--premium--high-contrast .ce-form-builder__step, .ce-form-builder--premium--dark .ce-form-builder__step, .ce-form-builder--premium--light .ce-form-builder__step {
+  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.07);
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+.ce-form-builder--premium .ce-form-builder__step:hover, .ce-form-builder--premium--high-contrast .ce-form-builder__step:hover, .ce-form-builder--premium--dark .ce-form-builder__step:hover, .ce-form-builder--premium--light .ce-form-builder__step:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.11);
+}
+.ce-form-builder--premium .ce-form-builder__step.is-active, .ce-form-builder--premium--high-contrast .ce-form-builder__step.is-active, .ce-form-builder--premium--dark .ce-form-builder__step.is-active, .ce-form-builder--premium--light .ce-form-builder__step.is-active {
+  box-shadow: 0 12px 28px rgba(14, 116, 144, 0.2);
+}
+.ce-form-builder--premium .ce-form-builder__form, .ce-form-builder--premium--high-contrast .ce-form-builder__form, .ce-form-builder--premium--dark .ce-form-builder__form, .ce-form-builder--premium--light .ce-form-builder__form {
+  background: rgba(255, 255, 255, 0.72);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
+}
 .ce-form-builder--premium .ce-form-builder__title, .ce-form-builder--premium--high-contrast .ce-form-builder__title, .ce-form-builder--premium--dark .ce-form-builder__title, .ce-form-builder--premium--light .ce-form-builder__title {
   color: var(--ce-form-builder-header-color);
   text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
@@ -19819,6 +19841,7 @@ ce-icon,
 }
 
 .ce-radio {
+  --ce-radio-input-size: 1.2rem;
   display: var(--ce-radio-display, flex);
   align-items: var(--ce-radio-align, center);
   cursor: var(--ce-radio-cursor, pointer);
@@ -19829,21 +19852,52 @@ ce-icon,
   -webkit-user-select: var(--ce-radio-user-select, none);
   user-select: var(--ce-radio-user-select, none);
 }
+.ce-radio__item {
+  display: var(--ce-radio-item-display, inline-flex);
+  align-items: var(--ce-radio-item-align, center);
+  gap: var(--ce-radio-item-gap, 0.5rem);
+  min-height: var(--ce-radio-item-min-height, 2rem);
+  cursor: var(--ce-radio-item-cursor, pointer);
+}
+.ce-radio--horizontal {
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: var(--ce-radio-horizontal-gap, 0.85rem);
+}
+.ce-radio--vertical {
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--ce-radio-vertical-gap, 0.55rem);
+}
 .ce-radio input[type=radio] {
   -webkit-appearance: var(--ce-radio-input-appearance, none);
   appearance: var(--ce-radio-input-appearance, none);
+  box-sizing: border-box;
+  display: inline-grid;
+  place-content: center;
+  flex: 0 0 auto;
+  aspect-ratio: 1/1;
+  inline-size: var(--ce-radio-input-size, 1.2rem);
+  block-size: var(--ce-radio-input-size, 1.2rem);
   width: var(--ce-radio-input-size, 1rem);
   height: var(--ce-radio-input-size, 1rem);
+  max-width: var(--ce-radio-input-size, 1.2rem);
+  max-height: var(--ce-radio-input-size, 1.2rem);
+  min-inline-size: var(--ce-radio-input-size, 1.2rem);
+  min-block-size: var(--ce-radio-input-size, 1.2rem);
+  min-width: var(--ce-radio-input-size, 1rem);
+  min-height: var(--ce-radio-input-size, 1rem);
+  padding: 0;
   margin: var(--ce-radio-input-margin, 0);
   border-width: var(--ce-radio-input-border-width, 2px);
   border-style: var(--ce-radio-input-border-style, solid);
   border-color: var(--ce-radio-input-border, var(--border-color, #ccc));
-  border-radius: var(--ce-radio-input-radius, 50%);
+  border-radius: var(--ce-radio-input-radius, 999px);
   position: var(--ce-radio-input-position, relative);
   cursor: var(--ce-radio-input-cursor, pointer);
   outline: var(--ce-radio-input-outline, none);
   transition: var(--ce-radio-input-transition, border-color 0.2s ease, box-shadow 0.2s ease);
-  margin-inline-end: var(--ce-radio-input-margin-right, 0.5rem);
+  margin-inline-end: var(--ce-radio-input-margin-right, 0);
   background-color: var(--ce-radio-input-bg, var(--surface));
 }
 .ce-radio input[type=radio]:checked {
@@ -19852,14 +19906,10 @@ ce-icon,
 }
 .ce-radio input[type=radio]:checked::before {
   content: var(--ce-radio-input-dot-content, "");
-  position: var(--ce-radio-input-dot-position, absolute);
-  top: var(--ce-radio-input-dot-top, 50%);
-  inset-inline-start: var(--ce-radio-input-dot-inline-start, var(--ce-radio-input-dot-left, 50%));
   width: var(--ce-radio-input-dot-size, 0.4rem);
   height: var(--ce-radio-input-dot-size, 0.4rem);
   background-color: var(--ce-radio-input-dot-color, var(--text-light));
   border-radius: var(--ce-radio-input-dot-radius, 50%);
-  transform: var(--ce-radio-input-dot-transform, translate(-50%, -50%));
 }
 .ce-radio input[type=radio]:hover {
   border-color: var(--ce-radio-input-hover-border, var(--primary));
@@ -23541,7 +23591,7 @@ ce-icon,
 }
 .ce-switch {
   display: var(--ce-switch-display, inline-flex);
-  align-items: var(--ce-switch-align, flex-start);
+  align-items: var(--ce-switch-align, center);
   gap: var(--ce-switch-gap, 0.75rem);
   cursor: var(--ce-switch-cursor, pointer);
   -webkit-user-select: var(--ce-switch-select, none);
@@ -23551,16 +23601,30 @@ ce-icon,
   display: var(--ce-switch-input-display, none);
 }
 .ce-switch__control {
+  all: unset;
+  -webkit-appearance: none;
+  appearance: none;
+  box-sizing: border-box;
   position: var(--ce-switch-control-position, relative);
   width: var(--ce-switch-control-width, 2.5rem);
   height: var(--ce-switch-control-height, 1.25rem);
+  min-width: var(--ce-switch-control-width, 2.5rem);
+  max-width: var(--ce-switch-control-width, 2.5rem);
+  min-height: var(--ce-switch-control-height, 1.25rem);
+  max-height: var(--ce-switch-control-height, 1.25rem);
   border: var(--ce-switch-control-border, 0);
   padding: var(--ce-switch-control-padding, 0);
   margin: var(--ce-switch-control-margin, 0);
-  background: var(--ce-switch-control-bg, transparent);
+  background: transparent;
   cursor: var(--ce-switch-control-cursor, pointer);
-  display: var(--ce-switch-control-display, inline-flex);
+  display: var(--ce-switch-control-display, inline-block);
   align-items: var(--ce-switch-control-align, center);
+  justify-content: var(--ce-switch-control-justify, center);
+  flex: var(--ce-switch-control-flex, 0 0 auto);
+  border-radius: var(--ce-switch-control-radius, var(--radius-full, 999px));
+  box-shadow: var(--ce-switch-control-shadow, none);
+  line-height: 0;
+  overflow: hidden;
   transition: filter var(--ce-switch-control-transition, 0.2s ease);
 }
 .ce-switch__control:focus-visible {
@@ -23573,7 +23637,10 @@ ce-icon,
   display: var(--ce-switch-slider-display, inline-block);
   width: var(--ce-switch-slider-width, 100%);
   height: var(--ce-switch-slider-height, 100%);
+  min-width: 100%;
+  min-height: 100%;
   box-sizing: border-box;
+  overflow: hidden;
   background-color: var(--ce-switch-slider-bg, var(--switch-track-off, #94a3b8));
   box-shadow: var(--ce-switch-slider-shadow, inset 0 0 0 1px rgba(15, 23, 42, 0.08));
   border-radius: var(--ce-switch-slider-radius, var(--radius-full, 999px));
@@ -23596,7 +23663,7 @@ ce-icon,
 .ce-switch__text {
   display: var(--ce-switch-text-display, flex);
   flex-direction: var(--ce-switch-text-direction, column);
-  gap: var(--ce-switch-text-gap, 0.125rem);
+  gap: var(--ce-switch-text-gap, 0.2rem);
   min-height: var(--ce-switch-text-min-height, 1.25rem);
 }
 .ce-switch__label {
@@ -23605,6 +23672,7 @@ ce-icon,
   color: var(--ce-switch-label-color, var(--text-primary));
 }
 .ce-switch__state-label {
+  display: var(--ce-switch-state-display, none);
   font-size: var(--ce-switch-state-size, 0.75rem);
   text-transform: var(--ce-switch-state-transform, uppercase);
   letter-spacing: var(--ce-switch-state-spacing, 0.08em);
@@ -24207,8 +24275,12 @@ ce-icon,
   --ce-table-radius: var(--ce-table-premium-radius, var(--radius-lg));
   --ce-table-shadow: var(
     --ce-table-premium-shadow,
-    0 22px 48px rgba(15, 23, 42, 0.14)
+    0 28px 60px rgba(15, 23, 42, 0.15)
   );
+  border-collapse: separate;
+  border-spacing: 0;
+  border: var(--ce-table-border);
+  overflow: hidden;
 }
 .ce-table--premium thead tr, .ce-table--premium--high-contrast thead tr, .ce-table--premium--dark thead tr, .ce-table--premium--light thead tr,
 .ce-table--premium tfoot tr,
@@ -24219,8 +24291,10 @@ ce-icon,
 }
 .ce-table--premium thead th, .ce-table--premium--high-contrast thead th, .ce-table--premium--dark thead th, .ce-table--premium--light thead th {
   position: var(--ce-table-premium-head-position, relative);
-  text-transform: var(--ce-table-premium-head-transform, none);
-  letter-spacing: var(--ce-table-premium-head-spacing, 0.005em);
+  text-transform: var(--ce-table-premium-head-transform, uppercase);
+  letter-spacing: var(--ce-table-premium-head-spacing, 0.08em);
+  font-size: var(--ce-table-premium-head-size, 0.75rem);
+  color: var(--ce-table-premium-head-color, #475569);
 }
 .ce-table--premium tbody td, .ce-table--premium--high-contrast tbody td, .ce-table--premium--dark tbody td, .ce-table--premium--light tbody td,
 .ce-table--premium tfoot td,
@@ -24229,6 +24303,12 @@ ce-icon,
 .ce-table--premium--light tfoot td {
   border-bottom: var(--ce-table-premium-cell-border, 1px solid rgba(226, 232, 240, 0.6));
 }
+.ce-table--premium tbody td, .ce-table--premium--high-contrast tbody td, .ce-table--premium--dark tbody td, .ce-table--premium--light tbody td {
+  background: rgba(255, 255, 255, 0.7);
+}
+.ce-table--premium tbody tr:last-child td, .ce-table--premium--high-contrast tbody tr:last-child td, .ce-table--premium--dark tbody tr:last-child td, .ce-table--premium--light tbody tr:last-child td {
+  border-bottom: 0;
+}
 .ce-table--premium tbody tr, .ce-table--premium--high-contrast tbody tr, .ce-table--premium--dark tbody tr, .ce-table--premium--light tbody tr {
   transition: var(--ce-table-premium-row-transition, background-color 0.2s ease, transform 0.2s ease);
 }
@@ -25471,6 +25551,20 @@ ce-icon,
   display: var(--ce-tooltip-display, inline-block);
   isolation: isolate;
 }
+.ce-tooltip__trigger {
+  display: var(--ce-tooltip-trigger-display, inline-flex);
+  align-items: var(--ce-tooltip-trigger-align, center);
+  justify-content: var(--ce-tooltip-trigger-justify, center);
+  min-height: var(--ce-tooltip-trigger-min-height, 2.25rem);
+  padding: var(--ce-tooltip-trigger-padding, 0.55rem 0.85rem);
+  border: var(--ce-tooltip-trigger-border, 1px solid rgba(37, 99, 235, 0.18));
+  border-radius: var(--ce-tooltip-trigger-radius, var(--radius-full, 999px));
+  background: var(--ce-tooltip-trigger-bg, linear-gradient(135deg, #ffffff, #eff6ff));
+  color: var(--ce-tooltip-trigger-color, var(--text-primary, #0f172a));
+  font-weight: var(--ce-tooltip-trigger-weight, 700);
+  box-shadow: var(--ce-tooltip-trigger-shadow, 0 10px 22px rgba(15, 23, 42, 0.08));
+  cursor: var(--ce-tooltip-trigger-cursor, help);
+}
 .ce-tooltip:focus-visible, .ce-tooltip:focus-within {
   outline: var(--ce-tooltip-wrapper-focus-outline, 2px solid var(--focus-ring-soft, rgba(37, 99, 235, 0.45)));
   outline-offset: var(--ce-tooltip-wrapper-focus-offset, 2px);
@@ -26936,12 +27030,69 @@ ce-icon,
 }
 
 .ce-vcard--premium, .ce-vcard--premium--high-contrast, .ce-vcard--premium--dark, .ce-vcard--premium--light {
-  --ce-vcard-width: calc(var(--ce-spacing-16, 1rem) * 22);
-  --ce-vcard-padding: calc(var(--ce-spacing-4, 0.25rem) * 6);
-  --ce-vcard-radius: var(--radius-2xl, 1rem);
-  --ce-vcard-bg: linear-gradient(140deg, #ffffff 0%, #f1f5f9 85%);
-  box-shadow: 0 22px 40px rgba(15, 23, 42, 0.14);
-  border-color: color-mix(in srgb, var(--primary) 22%, rgba(15, 23, 42, 0.12));
+  --ce-vcard-width: min(100%, calc(var(--ce-spacing-16, 1rem) * 25));
+  --ce-vcard-padding: calc(var(--ce-spacing-4, 0.25rem) * 7);
+  --ce-vcard-gap: var(--ce-spacing-16, 1rem);
+  --ce-vcard-radius: var(--radius-2xl, 1.25rem);
+  --ce-vcard-bg: radial-gradient(circle at 12% 15%, rgba(14, 165, 233, 0.24), transparent 34%),
+    linear-gradient(140deg, #ffffff 0%, #eef6ff 58%, #f8fafc 100%);
+  position: relative;
+  overflow: hidden;
+  box-shadow: 0 28px 58px rgba(15, 23, 42, 0.16);
+  border-color: color-mix(in srgb, var(--primary) 26%, rgba(15, 23, 42, 0.12));
+}
+.ce-vcard--premium::after, .ce-vcard--premium--high-contrast::after, .ce-vcard--premium--dark::after, .ce-vcard--premium--light::after {
+  content: "";
+  position: absolute;
+  inset: auto -12% -34% auto;
+  width: 12rem;
+  height: 12rem;
+  border-radius: 999px;
+  background: radial-gradient(circle, rgba(37, 99, 235, 0.18), transparent 66%);
+  pointer-events: none;
+}
+.ce-vcard--premium .ce-vcard__header, .ce-vcard--premium--high-contrast .ce-vcard__header, .ce-vcard--premium--dark .ce-vcard__header, .ce-vcard--premium--light .ce-vcard__header,
+.ce-vcard--premium .ce-vcard__company,
+.ce-vcard--premium--high-contrast .ce-vcard__company,
+.ce-vcard--premium--dark .ce-vcard__company,
+.ce-vcard--premium--light .ce-vcard__company,
+.ce-vcard--premium .ce-vcard__contacts,
+.ce-vcard--premium--high-contrast .ce-vcard__contacts,
+.ce-vcard--premium--dark .ce-vcard__contacts,
+.ce-vcard--premium--light .ce-vcard__contacts {
+  position: relative;
+  z-index: 1;
+}
+.ce-vcard--premium .ce-vcard__header, .ce-vcard--premium--high-contrast .ce-vcard__header, .ce-vcard--premium--dark .ce-vcard__header, .ce-vcard--premium--light .ce-vcard__header {
+  align-items: flex-start;
+}
+.ce-vcard--premium .ce-vcard__name, .ce-vcard--premium--high-contrast .ce-vcard__name, .ce-vcard--premium--dark .ce-vcard__name, .ce-vcard--premium--light .ce-vcard__name {
+  font-size: clamp(1.25rem, 2vw, 1.55rem);
+  letter-spacing: -0.035em;
+}
+.ce-vcard--premium .ce-vcard__role, .ce-vcard--premium--high-contrast .ce-vcard__role, .ce-vcard--premium--dark .ce-vcard__role, .ce-vcard--premium--light .ce-vcard__role {
+  color: #0369a1;
+  font-size: 0.9rem;
+}
+.ce-vcard--premium .ce-vcard__company, .ce-vcard--premium--high-contrast .ce-vcard__company, .ce-vcard--premium--dark .ce-vcard__company, .ce-vcard--premium--light .ce-vcard__company {
+  width: fit-content;
+  padding: 0.4rem 0.7rem;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.72);
+  border: 1px solid rgba(37, 99, 235, 0.14);
+}
+.ce-vcard--premium .ce-vcard__row, .ce-vcard--premium--high-contrast .ce-vcard__row, .ce-vcard--premium--dark .ce-vcard__row, .ce-vcard--premium--light .ce-vcard__row {
+  padding: 0.45rem 0;
+  border-top: 1px solid rgba(148, 163, 184, 0.24);
+}
+.ce-vcard--premium .ce-vcard__icon, .ce-vcard--premium--high-contrast .ce-vcard__icon, .ce-vcard--premium--dark .ce-vcard__icon, .ce-vcard--premium--light .ce-vcard__icon {
+  display: inline-grid;
+  place-items: center;
+  width: 1.65rem;
+  height: 1.65rem;
+  border-radius: 999px;
+  background: linear-gradient(135deg, #dbeafe, #cffafe);
+  color: #075985;
 }
 
 .ce-window {
@@ -27942,8 +28093,47 @@ ce-icon,
   --ce-workflow-builder-lane-radius: var(--radius-xl, 0.95rem);
   --ce-workflow-builder-node-radius: var(--radius-xl, 0.95rem);
   --ce-workflow-builder-edge-radius: var(--radius-lg, 0.65rem);
+  position: relative;
+  overflow: hidden;
   box-shadow: 0 24px 46px rgba(15, 23, 42, 0.14);
   border: 1px solid color-mix(in srgb, var(--primary) 24%, transparent);
 }
+.ce-workflow-builder--premium::before, .ce-workflow-builder--premium--high-contrast::before, .ce-workflow-builder--premium--dark::before, .ce-workflow-builder--premium--light::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: radial-gradient(circle at 18% 8%, rgba(14, 165, 233, 0.16), transparent 32%);
+  pointer-events: none;
+}
+.ce-workflow-builder--premium .ce-workflow-builder__header, .ce-workflow-builder--premium--high-contrast .ce-workflow-builder__header, .ce-workflow-builder--premium--dark .ce-workflow-builder__header, .ce-workflow-builder--premium--light .ce-workflow-builder__header,
+.ce-workflow-builder--premium .ce-workflow-builder__lanes,
+.ce-workflow-builder--premium--high-contrast .ce-workflow-builder__lanes,
+.ce-workflow-builder--premium--dark .ce-workflow-builder__lanes,
+.ce-workflow-builder--premium--light .ce-workflow-builder__lanes,
+.ce-workflow-builder--premium .ce-workflow-builder__edges,
+.ce-workflow-builder--premium--high-contrast .ce-workflow-builder__edges,
+.ce-workflow-builder--premium--dark .ce-workflow-builder__edges,
+.ce-workflow-builder--premium--light .ce-workflow-builder__edges {
+  position: relative;
+  z-index: 1;
+}
+.ce-workflow-builder--premium .ce-workflow-builder__lane, .ce-workflow-builder--premium--high-contrast .ce-workflow-builder__lane, .ce-workflow-builder--premium--dark .ce-workflow-builder__lane, .ce-workflow-builder--premium--light .ce-workflow-builder__lane,
+.ce-workflow-builder--premium .ce-workflow-builder__edges,
+.ce-workflow-builder--premium--high-contrast .ce-workflow-builder__edges,
+.ce-workflow-builder--premium--dark .ce-workflow-builder__edges,
+.ce-workflow-builder--premium--light .ce-workflow-builder__edges {
+  background: rgba(255, 255, 255, 0.72);
+  backdrop-filter: saturate(140%) blur(6px);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 14px 32px rgba(15, 23, 42, 0.08);
+}
+.ce-workflow-builder--premium .ce-workflow-builder__node, .ce-workflow-builder--premium--high-contrast .ce-workflow-builder__node, .ce-workflow-builder--premium--dark .ce-workflow-builder__node, .ce-workflow-builder--premium--light .ce-workflow-builder__node {
+  border-color: rgba(37, 99, 235, 0.16);
+  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.1);
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+.ce-workflow-builder--premium .ce-workflow-builder__node:hover, .ce-workflow-builder--premium--high-contrast .ce-workflow-builder__node:hover, .ce-workflow-builder--premium--dark .ce-workflow-builder__node:hover, .ce-workflow-builder--premium--light .ce-workflow-builder__node:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 18px 34px rgba(15, 23, 42, 0.14);
+}
 
 /*# sourceMappingURL=ce-webcomponents.css.map */