@hxdhxd/harmony-flow-ui 0.1.1 → 0.1.2

package/dist/index.css

@@ -1076,6 +1076,15 @@
 .hf-picker-trigger.is-error {
   border-color: #e5484d;
 }
+.hf-picker-trigger__chevron {
+  color: var(--hf-color-primary);
+  flex: 0 0 auto;
+  transition: transform var(--hf-motion-duration);
+}
+.hf-picker-trigger[aria-expanded=true] .hf-picker-trigger__chevron,
+.hf-color-picker__trigger[aria-expanded=true] .hf-picker-trigger__chevron {
+  transform: rotate(180deg);
+}
 .hf-date-picker,
 .hf-time-picker {
   position: relative;
@@ -1366,19 +1375,37 @@
   overflow: hidden;
   white-space: nowrap;
 }
-.hf-sidebar__top button {
-  background: var(--hf-color-background);
-  border: 0;
-  border-radius: 10px;
-  color: var(--hf-color-text-muted);
+.hf-sidebar__collapse {
+  align-items: center;
+  background: color-mix(in srgb, var(--hf-color-primary) 7%, var(--hf-color-surface));
+  border: 1px solid color-mix(in srgb, var(--hf-color-primary) 16%, var(--hf-color-border));
+  border-radius: var(--hf-radius-control);
+  color: var(--hf-color-primary);
   cursor: pointer;
-  flex: 0 0 30px;
-  font-size: 22px;
-  height: 30px;
-  transition: transform var(--hf-motion-duration);
+  display: inline-flex;
+  flex: 0 0 34px;
+  height: 34px;
+  justify-content: center;
+  padding: 0;
+  transition:
+    background var(--hf-motion-duration),
+    border-color var(--hf-motion-duration),
+    color var(--hf-motion-duration);
 }
-.hf-sidebar--collapsed .hf-sidebar__top button {
+.hf-sidebar__collapse .hf-icon {
   transform: rotate(180deg);
+  transition: transform var(--hf-motion-duration) cubic-bezier(.2, .8, .2, 1);
+}
+.hf-sidebar--collapsed .hf-sidebar__collapse .hf-icon {
+  transform: rotate(0deg);
+}
+.hf-sidebar__collapse:hover {
+  background: color-mix(in srgb, var(--hf-color-primary) 13%, var(--hf-color-surface));
+  border-color: color-mix(in srgb, var(--hf-color-primary) 28%, var(--hf-color-border));
+}
+.hf-sidebar__collapse:focus-visible {
+  outline: 2px solid color-mix(in srgb, var(--hf-color-primary) 42%, transparent);
+  outline-offset: 2px;
 }
 .hf-sidebar--collapsed .hf-sidebar__brand {
   display: none;
@@ -1462,28 +1489,39 @@
 }
 .hf-menu > button {
   align-items: center;
-  background: transparent;
-  border: 0;
-  border-radius: 12px;
+  background: var(--hf-color-surface);
+  border: 1px solid var(--hf-color-border);
+  border-radius: var(--hf-radius-control);
   color: var(--hf-color-text);
   cursor: pointer;
-  display: flex;
+  display: inline-flex;
   font: inherit;
   font-weight: 650;
-  gap: 7px;
-  padding: 9px 12px;
+  gap: 9px;
+  min-height: 40px;
+  padding: 7px 9px 7px 13px;
 }
 .hf-menu > button:hover,
 .hf-menu > button[aria-expanded=true] {
   background: color-mix(in srgb, var(--hf-color-primary) 9%, transparent);
   color: var(--hf-color-primary);
 }
-.hf-menu > button span {
-  transition: transform var(--hf-motion-duration);
+.hf-menu__chevron {
+  background: color-mix(in srgb, var(--hf-color-primary) 8%, transparent);
+  border-radius: 7px;
+  box-sizing: content-box;
+  color: var(--hf-color-primary);
+  padding: 3px;
+  transition: background var(--hf-motion-duration), transform var(--hf-motion-duration);
 }
-.hf-menu > button[aria-expanded=true] span {
+.hf-menu > button[aria-expanded=true] .hf-menu__chevron {
+  background: color-mix(in srgb, var(--hf-color-primary) 15%, transparent);
   transform: rotate(180deg);
 }
+.hf-menu > button:focus-visible {
+  outline: 2px solid color-mix(in srgb, var(--hf-color-primary) 42%, transparent);
+  outline-offset: 2px;
+}
 .hf-menu__panel,
 .hf-mega-menu__panel {
   animation: hf-nav-panel-in var(--hf-motion-duration) cubic-bezier(.2, .9, .2, 1);
@@ -1745,6 +1783,10 @@
   .hf-mega-menu__panel {
     animation: none;
   }
+  .hf-sidebar__collapse .hf-icon,
+  .hf-menu__chevron {
+    transition: none;
+  }
 }
 
 /* src/batch-two.parts/part-01.css */
@@ -2713,10 +2755,16 @@
   min-width: 160px;
   padding: 6px;
   position: absolute;
-  right: 0;
+  left: 0;
   top: calc(100% + 6px);
   z-index: 80;
 }
+.hf-split-button > .hf-button:nth-child(2) .hf-icon {
+  transition: transform var(--hf-motion-duration);
+}
+.hf-split-button > .hf-button:nth-child(2)[aria-expanded=true] .hf-icon {
+  transform: rotate(180deg);
+}
 .hf-split-button__menu button {
   background: transparent;
   border: 0;
@@ -3131,6 +3179,14 @@
   min-height: 32px;
   width: 40px;
 }
+.hf-combobox__control > button .hf-icon {
+  display: block;
+  margin: auto;
+  transition: transform var(--hf-motion-duration);
+}
+.hf-combobox__control.is-open > button .hf-icon {
+  transform: rotate(180deg);
+}
 .hf-combobox__menu {
   background: var(--hf-color-surface);
   border: 1px solid var(--hf-color-border);
@@ -3244,12 +3300,53 @@
   text-align: left;
   width: 100%;
 }
-.hf-accordion h3 button span:last-child {
-  transition: transform var(--hf-motion-duration);
+.hf-accordion__toggle {
+  align-items: center;
+  background: color-mix(in srgb, var(--hf-color-primary) 8%, var(--hf-color-surface));
+  border: 1px solid color-mix(in srgb, var(--hf-color-primary) 14%, var(--hf-color-border));
+  border-radius: var(--hf-radius-control);
+  color: var(--hf-color-primary);
+  display: inline-flex;
+  flex: 0 0 30px;
+  height: 30px;
+  justify-content: center;
+  margin-left: 12px;
+  position: relative;
+  transition: background var(--hf-motion-duration), border-color var(--hf-motion-duration);
+}
+.hf-accordion__toggle i {
+  background: currentColor;
+  border-radius: 1px;
+  height: 1.5px;
+  position: absolute;
+  transition: opacity var(--hf-motion-duration), transform var(--hf-motion-duration) cubic-bezier(.2, .8, .2, 1);
+  width: 12px;
+}
+.hf-accordion__toggle i:last-child {
+  transform: rotate(90deg);
+}
+.hf-accordion section.is-open .hf-accordion__toggle {
+  background: color-mix(in srgb, var(--hf-color-primary) 14%, var(--hf-color-surface));
 }
-.hf-accordion section.is-open h3 button span:last-child {
+.hf-accordion section.is-open .hf-accordion__toggle i:first-child {
   transform: rotate(180deg);
 }
+.hf-accordion section.is-open .hf-accordion__toggle i:last-child {
+  opacity: 0;
+  transform: rotate(180deg) scaleX(.45);
+}
+.hf-accordion h3 button:hover .hf-accordion__toggle {
+  background: color-mix(in srgb, var(--hf-color-primary) 14%, var(--hf-color-surface));
+}
+.hf-accordion h3 button:focus-visible {
+  outline: 2px solid color-mix(in srgb, var(--hf-color-primary) 42%, transparent);
+  outline-offset: -3px;
+}
+@media (prefers-reduced-motion: reduce) {
+  .hf-accordion__toggle i {
+    transition: none;
+  }
+}
 .hf-accordion__panel {
   background: #f8fbfe;
   color: var(--hf-color-text-muted);
@@ -3510,6 +3607,7 @@
 }
 .hf-steps li {
   flex: 1;
+  min-width: 0;
   position: relative;
 }
 .hf-steps li:not(:last-child):after {
@@ -3532,7 +3630,10 @@
   display: flex;
   gap: 10px;
   padding: 0 14px 0 0;
+  position: relative;
   text-align: left;
+  width: 100%;
+  z-index: 1;
 }
 .hf-steps button > span:first-child {
   background: #edf3f8;
@@ -3552,12 +3653,20 @@
   color: #fff;
 }
 .hf-steps button > span:last-child {
+  background: var(--hf-color-surface);
   display: grid;
   gap: 3px;
+  min-width: 0;
+  padding-right: 8px;
   padding-top: 7px;
+  position: relative;
+  z-index: 2;
 }
 .hf-steps strong {
+  display: block;
   font-size: 13px;
+  line-height: 20px;
+  overflow-wrap: anywhere;
 }
 .hf-steps small {
   color: var(--hf-color-text-muted);
@@ -3736,7 +3845,7 @@
   display: flex;
   gap: 8px;
 }
-.hf-cascader select,
+.hf-cascader__level,
 .hf-date-range input {
   background: var(--hf-color-surface);
   border: 1px solid var(--hf-color-border);
@@ -3745,6 +3854,12 @@
   min-height: 42px;
   padding: 8px 10px;
 }
+.hf-cascader__level {
+  min-width: 110px;
+}
+.hf-cascader__level .hf-select {
+  min-height: 42px;
+}
 .hf-date-range > div {
   align-items: center;
 }
@@ -4086,7 +4201,7 @@
   border: 1px solid var(--hf-color-border);
   border-radius: 14px;
   color: var(--hf-color-text);
-  overflow: hidden;
+  overflow: visible;
 }
 .hf-rich-editor__header,
 .hf-code-editor > header,
@@ -4302,7 +4417,6 @@
   justify-content: flex-start;
   gap: 8px;
 }
-.hf-query-builder select,
 .hf-query-builder input {
   background: var(--hf-color-surface);
   border: 1px solid var(--hf-color-border);
@@ -4311,6 +4425,16 @@
   min-height: 35px;
   padding: 6px 8px;
 }
+.hf-query-builder__select {
+  min-width: 0;
+}
+.hf-query-builder__select .hf-select {
+  padding-block: 6px;
+}
+.hf-query-builder__select .hf-select-shell {
+  border-radius: 8px;
+  min-height: 35px;
+}
 .hf-query-builder > div {
   display: grid;
   gap: 7px;
@@ -4689,9 +4813,9 @@
   border: 1px solid var(--hf-color-border);
   border-radius: 10px;
   display: flex;
-  overflow: hidden;
+  overflow: visible;
 }
-.hf-filter-builder__item select,
+.hf-filter-builder__select .hf-select,
 .hf-filter-builder__item input {
   background: transparent;
   border: 0;
@@ -4700,6 +4824,16 @@
   min-height: 37px;
   padding: 7px 9px;
 }
+.hf-filter-builder__select {
+  min-width: 110px;
+}
+.hf-filter-builder__select .hf-select-shell {
+  min-width: 110px;
+}
+.hf-filter-builder__select .hf-select {
+  border-radius: 0;
+  min-height: 37px;
+}
 .hf-filter-builder__item input {
   max-width: 150px;
 }
@@ -5336,8 +5470,25 @@
   display: grid;
   flex: 0 0 42px;
   height: 42px;
+  line-height: 0;
+  padding: 0;
   place-items: center;
 }
+.hf-voice-input__record-icon,
+.hf-voice-input__stop-icon {
+  background: currentColor;
+  display: block;
+}
+.hf-voice-input__record-icon {
+  clip-path: circle(50%);
+  height: 10px;
+  width: 10px;
+}
+.hf-voice-input__stop-icon {
+  border-radius: 2px;
+  height: 9px;
+  width: 9px;
+}
 .hf-voice-input.is-listening .hf-voice-input__main {
   animation: hf-voice-pulse 1.5s infinite;
   background: #e5484d;
@@ -5413,6 +5564,13 @@
   color: var(--hf-color-text-muted);
   font-style: normal;
 }
+.hf-model-selector__chevron {
+  color: var(--hf-color-primary);
+  transition: transform var(--hf-motion-duration);
+}
+.hf-model-selector__trigger[aria-expanded=true] .hf-model-selector__chevron {
+  transform: rotate(180deg);
+}
 .hf-model-selector__menu {
   background: var(--hf-color-surface);
   border: 1px solid var(--hf-color-border);
@@ -6141,9 +6299,59 @@
   display: grid;
   padding: 5px;
   position: absolute;
+  left: 0;
+  top: calc(100% + 6px);
   width: 100%;
   z-index: 170;
 }
+.hf-member-picker__menu > button {
+  align-items: center;
+  background: transparent;
+  border: 0;
+  border-radius: 8px;
+  color: var(--hf-color-text);
+  cursor: pointer;
+  display: flex;
+  gap: 8px;
+  min-height: 40px;
+  padding: 7px 10px;
+  text-align: left;
+  width: 100%;
+}
+.hf-member-picker__menu > button:hover,
+.hf-member-picker__menu > button:focus-visible {
+  background: color-mix(in srgb, var(--hf-color-primary) 8%, var(--hf-color-surface));
+  outline: 0;
+}
+.hf-member-picker__menu > button > span {
+  display: grid;
+  gap: 2px;
+}
+.hf-member-picker__menu small {
+  color: var(--hf-color-text-muted);
+}
+.hf-member-picker > div:first-child > span {
+  align-items: center;
+  display: inline-flex;
+  gap: 5px;
+}
+.hf-member-picker > div:first-child > span > button {
+  align-items: center;
+  background: color-mix(in srgb, var(--hf-color-primary) 7%, var(--hf-color-surface));
+  border: 0;
+  border-radius: var(--hf-radius-control);
+  color: var(--hf-color-text-muted);
+  cursor: pointer;
+  display: inline-flex;
+  height: 26px;
+  justify-content: center;
+  padding: 0;
+  width: 26px;
+}
+.hf-member-picker > div:first-child > span > button:hover {
+  background: color-mix(in srgb, var(--hf-color-primary) 12%, var(--hf-color-surface));
+  color: var(--hf-color-primary);
+}
 .hf-share-panel > header,
 .hf-share-panel > footer {
   border-bottom: 1px solid var(--hf-color-border);
@@ -6151,6 +6359,11 @@
   justify-content: space-between;
   padding: 12px;
 }
+.hf-share-panel > footer {
+  align-items: center;
+  border-bottom: 0;
+  border-top: 1px solid var(--hf-color-border);
+}
 .hf-share-panel__scope {
   display: grid;
   padding: 8px;
@@ -6212,15 +6425,23 @@
   display: flex;
   gap: 8px;
 }
-.hf-recurrence select,
-.hf-recurrence input,
-.hf-timezone {
+.hf-recurrence input {
   background: var(--hf-color-surface);
   border: 1px solid var(--hf-color-border);
   border-radius: 9px;
   color: var(--hf-color-text);
   padding: 8px;
 }
+.hf-recurrence__select .hf-select-shell,
+.hf-timezone .hf-select-shell {
+  border-radius: 9px;
+}
+.hf-recurrence__select {
+  min-width: 112px;
+}
+.hf-timezone {
+  width: 100%;
+}
 .hf-availability {
   overflow: auto;
 }