opus-react 0.2.15 → 0.2.17

package/dist/index.css

@@ -82,6 +82,10 @@
   position: relative;
 }
 
+.opus_R70RbH_triggerWrap {
+  display: inline-flex;
+}
+
 .opus_R70RbH_trigger {
   border: 1px solid color-mix(in srgb, var(--opus-accent) 42%, transparent);
   background: color-mix(in srgb, var(--opus-accent) 12%, transparent);
@@ -107,7 +111,7 @@
 }
 
 .opus_R70RbH_popup {
-  z-index: 20;
+  z-index: 30;
   border: 1px solid var(--opus-border-strong);
   border-radius: var(--opus-input-radius);
   background: var(--opus-panel);
@@ -116,30 +120,79 @@
   box-shadow: var(--opus-shadow);
   color: var(--opus-muted);
   text-align: left;
+  pointer-events: none;
   padding: 8px 10px;
   font-size: .76rem;
   font-style: normal;
   font-weight: 400;
   line-height: 1.45;
   position: absolute;
-  bottom: calc(100% + 8px);
-  left: 50%;
-  transform: translateX(-50%);
 }
 
 .opus_R70RbH_popup:after {
   content: "";
-  border-right: 1px solid var(--opus-border-strong);
-  border-bottom: 1px solid var(--opus-border-strong);
   background: var(--opus-panel);
   width: 8px;
   height: 8px;
   position: absolute;
+}
+
+.opus_R70RbH_top {
+  bottom: calc(100% + 8px);
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.opus_R70RbH_top:after {
+  border-right: 1px solid var(--opus-border-strong);
+  border-bottom: 1px solid var(--opus-border-strong);
   top: 100%;
   left: 50%;
   transform: translate(-50%, -50%) rotate(45deg);
 }
 
+.opus_R70RbH_bottom {
+  top: calc(100% + 8px);
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.opus_R70RbH_bottom:after {
+  border-left: 1px solid var(--opus-border-strong);
+  border-top: 1px solid var(--opus-border-strong);
+  bottom: 100%;
+  left: 50%;
+  transform: translate(-50%, 50%) rotate(45deg);
+}
+
+.opus_R70RbH_left {
+  top: 50%;
+  right: calc(100% + 8px);
+  transform: translateY(-50%);
+}
+
+.opus_R70RbH_left:after {
+  border-top: 1px solid var(--opus-border-strong);
+  border-right: 1px solid var(--opus-border-strong);
+  top: 50%;
+  left: 100%;
+  transform: translate(-50%, -50%) rotate(45deg);
+}
+
+.opus_R70RbH_right {
+  top: 50%;
+  left: calc(100% + 8px);
+  transform: translateY(-50%);
+}
+
+.opus_R70RbH_right:after {
+  border-bottom: 1px solid var(--opus-border-strong);
+  border-left: 1px solid var(--opus-border-strong);
+  top: 50%;
+  right: 100%;
+  transform: translate(50%, -50%) rotate(45deg);
+}
+
 /* components/fields/FieldShell/FieldShell.module.css */
 .opus_zNi12Z_root {
   gap: 8px;
@@ -177,7 +230,7 @@
 
 .opus_zNi12Z_flagged {
   align-items: start;
-  gap: 8px 12px;
+  gap: 0 12px;
   width: 100%;
   display: grid;
 }
@@ -277,6 +330,7 @@
 
 .opus_zNi12Z_errorFlagged {
   grid-area: opus_zNi12Z_error;
+  margin-top: 8px;
 }
 
 .opus_zNi12Z_required {
@@ -1281,11 +1335,6 @@
   cursor: not-allowed;
 }
 
-.opus_6HFqZH_buttonWrap {
-  display: inline-flex;
-  position: relative;
-}
-
 .opus_6HFqZH_toolbarButton {
   width: 24px;
   height: 24px;
@@ -1358,43 +1407,6 @@
   cursor: not-allowed;
 }
 
-.opus_6HFqZH_tooltip {
-  z-index: 30;
-  background: var(--opus-tooltip-bg, #1f2430);
-  color: var(--opus-tooltip-text, #fff);
-  white-space: nowrap;
-  pointer-events: none;
-  opacity: 0;
-  visibility: hidden;
-  border-radius: 6px;
-  padding: 4px 8px;
-  font-size: .7rem;
-  font-weight: 600;
-  line-height: 1.2;
-  transition: opacity .12s, transform .12s;
-  position: absolute;
-  top: calc(100% + 6px);
-  left: 50%;
-  transform: translateX(-50%) translateY(2px);
-  box-shadow: 0 6px 18px #00000038;
-}
-
-.opus_6HFqZH_tooltip:before {
-  content: "";
-  border: 4px solid #0000;
-  border-bottom-color: var(--opus-tooltip-bg, #1f2430);
-  position: absolute;
-  bottom: 100%;
-  left: 50%;
-  transform: translateX(-50%);
-}
-
-.opus_6HFqZH_buttonWrap:hover .opus_6HFqZH_tooltip, .opus_6HFqZH_toolbarButton:focus-visible + .opus_6HFqZH_tooltip {
-  opacity: 1;
-  visibility: visible;
-  transform: translateX(-50%) translateY(0);
-}
-
 .opus_6HFqZH_editor {
   min-height: 180px;
   color: var(--opus-text);
@@ -1657,79 +1669,6 @@
   border-color: color-mix(in srgb, var(--opus-error) 75%, transparent);
 }
 
-/* components/fields/ThemeToggleField/ThemeToggleField.module.css */
-.opus_SwerMA_toggle {
-  --theme-option-size: calc(var(--opus-control-height) + 2px);
-  --theme-option-gap: 2px;
-  align-items: center;
-  gap: var(--theme-option-gap);
-  min-height: var(--opus-control-height);
-  border: 1px solid var(--opus-border-strong);
-  background: color-mix(in srgb, var(--opus-input-bg) 88%, transparent);
-  border-radius: 999px;
-  padding: 2px;
-  transition: background .22s, border-color .22s, box-shadow .22s;
-  display: inline-flex;
-  position: relative;
-  box-shadow: inset 0 1px #ffffff0d, 0 8px 20px #0000000f;
-}
-
-.opus_SwerMA_indicator {
-  z-index: 0;
-  width: var(--theme-option-size);
-  height: calc(var(--opus-control-height) - 4px);
-  background: linear-gradient(135deg,
-    var(--opus-accent),
-    color-mix(in srgb, var(--opus-accent) 40%, #00d2ff));
-  box-shadow: 0 8px 18px color-mix(in srgb, var(--opus-accent) 28%, transparent);
-  border-radius: 999px;
-  transition: transform .22s cubic-bezier(.4, 0, .2, 1), background .22s, box-shadow .22s;
-  position: absolute;
-  top: 2px;
-  left: 2px;
-  transform: translateX(0);
-}
-
-.opus_SwerMA_indicator[data-active="dark"] {
-  transform: translateX(calc(var(--theme-option-size) + var(--theme-option-gap)));
-}
-
-.opus_SwerMA_option {
-  z-index: 1;
-  width: var(--theme-option-size);
-  height: calc(var(--opus-control-height) - 4px);
-  color: var(--opus-muted);
-  cursor: pointer;
-  background: none;
-  border: 0;
-  border-radius: 999px;
-  justify-content: center;
-  align-items: center;
-  font-size: .82rem;
-  transition: color .22s;
-  display: inline-flex;
-  position: relative;
-}
-
-.opus_SwerMA_option:hover {
-  color: var(--opus-text);
-}
-
-.opus_SwerMA_option.opus_SwerMA_active {
-  color: #fff;
-}
-
-.opus_SwerMA_option svg {
-  width: .9rem;
-  height: .9rem;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .opus_SwerMA_indicator {
-    transition: none;
-  }
-}
-
 /* components/fields/shared/fieldControl.module.css */
 .opus_1Q5xBh_input {
   width: 100%;
@@ -1759,6 +1698,51 @@
   border-color: color-mix(in srgb, var(--opus-error) 75%, transparent);
 }
 
+.opus_1Q5xBh_passwordWrap {
+  align-items: center;
+  width: 100%;
+  display: flex;
+  position: relative;
+}
+
+.opus_1Q5xBh_passwordInput {
+  padding-right: 38px;
+}
+
+.opus_1Q5xBh_passwordToggleSlot {
+  position: absolute;
+  top: 50%;
+  right: 6px;
+  transform: translateY(-50%);
+}
+
+.opus_1Q5xBh_passwordToggle {
+  border-radius: var(--opus-input-radius);
+  width: 22px;
+  height: 22px;
+  color: color-mix(in srgb, var(--opus-muted) 70%, transparent);
+  cursor: pointer;
+  background: none;
+  border: 0;
+  justify-content: center;
+  align-items: center;
+  padding: 0;
+  font-size: .5rem;
+  transition: color .16s, background .16s;
+  display: inline-flex;
+}
+
+.opus_1Q5xBh_passwordToggle:hover {
+  color: var(--opus-text);
+  background: color-mix(in srgb, var(--opus-accent-soft) 60%, transparent);
+}
+
+.opus_1Q5xBh_passwordToggle:focus-visible {
+  color: var(--opus-accent);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--opus-accent) 22%, transparent);
+  outline: none;
+}
+
 .opus_1Q5xBh_trigger {
   width: 100%;
   min-height: var(--opus-control-height);
@@ -1886,6 +1870,79 @@
   overflow: auto;
 }
 
+/* components/fields/ThemeToggleField/ThemeToggleField.module.css */
+.opus_SwerMA_toggle {
+  --theme-option-size: calc(var(--opus-control-height) + 2px);
+  --theme-option-gap: 2px;
+  align-items: center;
+  gap: var(--theme-option-gap);
+  min-height: var(--opus-control-height);
+  border: 1px solid var(--opus-border-strong);
+  background: color-mix(in srgb, var(--opus-input-bg) 88%, transparent);
+  border-radius: 999px;
+  padding: 2px;
+  transition: background .22s, border-color .22s, box-shadow .22s;
+  display: inline-flex;
+  position: relative;
+  box-shadow: inset 0 1px #ffffff0d, 0 8px 20px #0000000f;
+}
+
+.opus_SwerMA_indicator {
+  z-index: 0;
+  width: var(--theme-option-size);
+  height: calc(var(--opus-control-height) - 4px);
+  background: linear-gradient(135deg,
+    var(--opus-accent),
+    color-mix(in srgb, var(--opus-accent) 40%, #00d2ff));
+  box-shadow: 0 8px 18px color-mix(in srgb, var(--opus-accent) 28%, transparent);
+  border-radius: 999px;
+  transition: transform .22s cubic-bezier(.4, 0, .2, 1), background .22s, box-shadow .22s;
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  transform: translateX(0);
+}
+
+.opus_SwerMA_indicator[data-active="dark"] {
+  transform: translateX(calc(var(--theme-option-size) + var(--theme-option-gap)));
+}
+
+.opus_SwerMA_option {
+  z-index: 1;
+  width: var(--theme-option-size);
+  height: calc(var(--opus-control-height) - 4px);
+  color: var(--opus-muted);
+  cursor: pointer;
+  background: none;
+  border: 0;
+  border-radius: 999px;
+  justify-content: center;
+  align-items: center;
+  font-size: .82rem;
+  transition: color .22s;
+  display: inline-flex;
+  position: relative;
+}
+
+.opus_SwerMA_option:hover {
+  color: var(--opus-text);
+}
+
+.opus_SwerMA_option.opus_SwerMA_active {
+  color: #fff;
+}
+
+.opus_SwerMA_option svg {
+  width: .9rem;
+  height: .9rem;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .opus_SwerMA_indicator {
+    transition: none;
+  }
+}
+
 /* components/fields/FilterSelectField/FilterSelectField.module.css */
 .opus_rDiUV2_root {
   position: relative;
@@ -1997,11 +2054,25 @@
 
 .opus_S1A372_meterFill {
   border-radius: inherit;
-  background: linear-gradient(90deg,
-    color-mix(in srgb, var(--opus-error) 80%, var(--opus-accent)),
-    var(--opus-accent));
+  background: var(--opus-strength-color, transparent);
   height: 100%;
-  transition: width .18s;
+  transition: width .18s, background .18s;
+}
+
+.opus_S1A372_meterFill[data-level="weak"] {
+  --opus-strength-color: #ef4444;
+}
+
+.opus_S1A372_meterFill[data-level="fair"] {
+  --opus-strength-color: #f59e0b;
+}
+
+.opus_S1A372_meterFill[data-level="good"] {
+  --opus-strength-color: #84cc16;
+}
+
+.opus_S1A372_meterFill[data-level="strong"] {
+  --opus-strength-color: #22c55e;
 }
 
 .opus_S1A372_meterLabel {
@@ -2011,6 +2082,22 @@
   font-weight: 600;
 }
 
+.opus_S1A372_meterLabel[data-level="weak"] {
+  color: #ef4444;
+}
+
+.opus_S1A372_meterLabel[data-level="fair"] {
+  color: #f59e0b;
+}
+
+.opus_S1A372_meterLabel[data-level="good"] {
+  color: #84cc16;
+}
+
+.opus_S1A372_meterLabel[data-level="strong"] {
+  color: #22c55e;
+}
+
 .opus_S1A372_requirements {
   gap: 4px;
   margin: 0;