@flux-ui/components 3.0.0-next.72 → 3.0.0-next.73

package/dist/component/FluxFormField.vue.d.ts

@@ -4,7 +4,7 @@ type __VLS_Props = {
     readonly error?: string;
     readonly hint?: string;
     readonly isOptional?: boolean;
-    readonly label: string;
+    readonly label?: string;
     readonly maxLength?: number;
 };
 type __VLS_Slots = {
@@ -28,7 +28,7 @@ type __VLS_Slots = {
         readonly maxLength?: number;
     }): VNode[];
 };
-declare const __VLS_base: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {

package/dist/index.css

@@ -440,6 +440,179 @@
 .icon-boxed-warning {
   background: var(--warning-100);
   color: var(--warning-900);
+}.overlay-view {
+  position: fixed;
+  inset: 0;
+  height: 100dvh;
+  width: 100dvw;
+}
+
+.overlay-provider {
+  pointer-events: none;
+  z-index: 10000;
+}
+
+.overlay-shade {
+  background: var(--overlay);
+  backdrop-filter: blur(3px) grayscale(0.5) saturate(180%);
+  pointer-events: none;
+  transition: opacity 600ms var(--swift-out);
+}
+
+.overlay-provider:not(:has(.overlay:not(.overlay-transition-leave-active):not(.slide-over-transition-leave-active))) .overlay-shade {
+  opacity: 0;
+}
+
+.overlay {
+  position: fixed;
+  display: flex;
+  inset: 0;
+  height: 100dvh;
+  width: 100dvw;
+  outline: 0;
+}
+.overlay > .base-pane-structure {
+  display: flex;
+  margin: auto;
+  max-height: min(840px, 100dvh - 180px);
+  width: calc(100dvw - 90px);
+  flex-flow: column nowrap;
+  box-shadow: var(--shadow-lg);
+  overflow: auto;
+  transition: 420ms var(--swift-out);
+  transition-property: filter, scale;
+}
+.overlay > .base-pane-structure .pane-footer {
+  position: sticky;
+  bottom: 0;
+  margin-top: auto;
+}
+.overlay > .base-pane-structure::after {
+  position: absolute;
+  display: block;
+  inset: 0;
+  content: "";
+  background: var(--overlay-secondary);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 600ms var(--swift-out);
+  z-index: 1000;
+}
+.overlay.is-current > .base-pane-structure {
+  pointer-events: auto;
+}
+.overlay:not(.is-current) > .base-pane-structure {
+  filter: blur(3px);
+  scale: 0.95;
+}
+.overlay:not(.is-current) > .base-pane-structure::after {
+  opacity: 1;
+}
+
+.overlay-small {
+}
+.overlay-small > .base-pane-structure {
+  max-width: 420px;
+}
+
+.overlay-medium {
+}
+.overlay-medium > .base-pane-structure {
+  max-width: 540px;
+}
+
+.overlay-large {
+}
+.overlay-large > .base-pane-structure {
+  max-width: 720px;
+}
+
+.slide-over {
+  justify-content: flex-end;
+}
+.slide-over > .base-pane-structure {
+  margin: 9px;
+  max-height: calc(100% - 18px);
+  width: min(100dvw, 720px);
+  contain: paint;
+  transition-duration: 600ms;
+  overflow: auto;
+}
+.slide-over > .base-pane-structure > .pane-header,
+.slide-over > .base-pane-structure > .pane-footer {
+  position: sticky;
+  z-index: 100;
+}
+.slide-over > .base-pane-structure > .pane-header {
+  top: 0;
+  padding-bottom: 18px;
+  border-bottom: 1px solid var(--gray-100);
+  box-shadow: var(--shadow-xs);
+}
+.slide-over > .base-pane-structure > .pane-header:has(+ :where(.tabs, .tab-bar-default)) {
+  padding-bottom: 0;
+  border-bottom: 0;
+  box-shadow: none;
+}
+.slide-over > .base-pane-structure > .pane-header:not(:has(+ :where(.tabs, .tab-bar-default))) {
+  background: inherit;
+}
+.slide-over > .base-pane-structure > .pane-header + .tab-bar-default {
+  position: sticky;
+  top: 60px;
+  z-index: 100;
+}
+.slide-over > .base-pane-structure > .pane-header:has(.pane-header-caption > :is(span)) + .tab-bar-default {
+  top: 66px;
+}
+.slide-over > .base-pane-structure > .pane-footer {
+  bottom: 0;
+}
+
+.overlay-transition-enter-active,
+.overlay-transition-leave-active {
+  transition: opacity 300ms var(--swift-out);
+}
+.overlay-transition-enter-active > .base-pane-structure,
+.overlay-transition-leave-active > .base-pane-structure {
+  transition: 300ms var(--swift-out);
+  transition-property: opacity, scale;
+}
+
+.overlay-transition-enter-from {
+  opacity: 0;
+}
+.overlay-transition-enter-from > .base-pane-structure {
+  opacity: 0;
+  scale: 0.9;
+}
+
+.overlay-transition-leave-to {
+  opacity: 0;
+}
+.overlay-transition-leave-to > .base-pane-structure {
+  opacity: 0;
+  scale: 0.95;
+}
+
+.slide-over-transition-enter-active,
+.slide-over-transition-leave-active {
+  transition: opacity 480ms var(--swift-out);
+}
+.slide-over-transition-enter-active > .base-pane-structure,
+.slide-over-transition-leave-active > .base-pane-structure {
+  transition: 480ms var(--swift-out);
+  transition-property: opacity, transform;
+}
+
+.slide-over-transition-enter-from,
+.slide-over-transition-leave-to {
+  opacity: 0;
+  transition-delay: 210ms;
+}
+.slide-over-transition-enter-from > .base-pane-structure,
+.slide-over-transition-leave-to > .base-pane-structure {
+  transform: translate3d(100%, 0, 0);
 }.spinner {
   --track: var(--gray-100);
   --value: var(--primary-600);
@@ -658,186 +831,13 @@
     grid-template-columns: 1fr;
   }
 }
-
-.action-pane-body {
-  position: relative;
-  text-wrap: pretty;
-}
-.action-pane-body.pane-body {
-  padding: 0;
-}.overlay-view {
-  position: fixed;
-  inset: 0;
-  height: 100dvh;
-  width: 100dvw;
-}
-
-.overlay-provider {
-  pointer-events: none;
-  z-index: 10000;
-}
-
-.overlay-shade {
-  background: var(--overlay);
-  backdrop-filter: blur(3px) grayscale(0.5) saturate(180%);
-  pointer-events: none;
-  transition: opacity 600ms var(--swift-out);
-}
-
-.overlay-provider:not(:has(.overlay:not(.overlay-transition-leave-active):not(.slide-over-transition-leave-active))) .overlay-shade {
-  opacity: 0;
-}
-
-.overlay {
-  position: fixed;
-  display: flex;
-  inset: 0;
-  height: 100dvh;
-  width: 100dvw;
-  outline: 0;
-}
-.overlay > .base-pane-structure {
-  display: flex;
-  margin: auto;
-  max-height: min(840px, 100dvh - 180px);
-  width: calc(100dvw - 90px);
-  flex-flow: column nowrap;
-  box-shadow: var(--shadow-lg);
-  overflow: auto;
-  transition: 420ms var(--swift-out);
-  transition-property: filter, scale;
-}
-.overlay > .base-pane-structure .pane-footer {
-  position: sticky;
-  bottom: 0;
-  margin-top: auto;
-}
-.overlay > .base-pane-structure::after {
-  position: absolute;
-  display: block;
-  inset: 0;
-  content: "";
-  background: var(--overlay-secondary);
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity 600ms var(--swift-out);
-  z-index: 1000;
-}
-.overlay.is-current > .base-pane-structure {
-  pointer-events: auto;
-}
-.overlay:not(.is-current) > .base-pane-structure {
-  filter: blur(3px);
-  scale: 0.95;
-}
-.overlay:not(.is-current) > .base-pane-structure::after {
-  opacity: 1;
-}
-
-.overlay-small {
-}
-.overlay-small > .base-pane-structure {
-  max-width: 420px;
-}
-
-.overlay-medium {
-}
-.overlay-medium > .base-pane-structure {
-  max-width: 540px;
-}
-
-.overlay-large {
-}
-.overlay-large > .base-pane-structure {
-  max-width: 720px;
-}
-
-.slide-over {
-  justify-content: flex-end;
-}
-.slide-over > .base-pane-structure {
-  margin: 9px;
-  max-height: calc(100% - 18px);
-  width: min(100dvw, 720px);
-  contain: paint;
-  transition-duration: 600ms;
-  overflow: auto;
-}
-.slide-over > .base-pane-structure > .pane-header,
-.slide-over > .base-pane-structure > .pane-footer {
-  position: sticky;
-  z-index: 100;
-}
-.slide-over > .base-pane-structure > .pane-header {
-  top: 0;
-  padding-bottom: 18px;
-  border-bottom: 1px solid var(--gray-100);
-  box-shadow: var(--shadow-xs);
-}
-.slide-over > .base-pane-structure > .pane-header:has(+ :where(.tabs, .tab-bar-default)) {
-  padding-bottom: 0;
-  border-bottom: 0;
-  box-shadow: none;
-}
-.slide-over > .base-pane-structure > .pane-header:not(:has(+ :where(.tabs, .tab-bar-default))) {
-  background: inherit;
-}
-.slide-over > .base-pane-structure > .pane-header + .tab-bar-default {
-  position: sticky;
-  top: 60px;
-  z-index: 100;
-}
-.slide-over > .base-pane-structure > .pane-header:has(.pane-header-caption > :is(span)) + .tab-bar-default {
-  top: 66px;
-}
-.slide-over > .base-pane-structure > .pane-footer {
-  bottom: 0;
-}
-
-.overlay-transition-enter-active,
-.overlay-transition-leave-active {
-  transition: opacity 300ms var(--swift-out);
-}
-.overlay-transition-enter-active > .base-pane-structure,
-.overlay-transition-leave-active > .base-pane-structure {
-  transition: 300ms var(--swift-out);
-  transition-property: opacity, scale;
-}
-
-.overlay-transition-enter-from {
-  opacity: 0;
-}
-.overlay-transition-enter-from > .base-pane-structure {
-  opacity: 0;
-  scale: 0.9;
-}
-
-.overlay-transition-leave-to {
-  opacity: 0;
-}
-.overlay-transition-leave-to > .base-pane-structure {
-  opacity: 0;
-  scale: 0.95;
-}
-
-.slide-over-transition-enter-active,
-.slide-over-transition-leave-active {
-  transition: opacity 480ms var(--swift-out);
-}
-.slide-over-transition-enter-active > .base-pane-structure,
-.slide-over-transition-leave-active > .base-pane-structure {
-  transition: 480ms var(--swift-out);
-  transition-property: opacity, transform;
-}
-
-.slide-over-transition-enter-from,
-.slide-over-transition-leave-to {
-  opacity: 0;
-  transition-delay: 210ms;
-}
-.slide-over-transition-enter-from > .base-pane-structure,
-.slide-over-transition-leave-to > .base-pane-structure {
-  transform: translate3d(100%, 0, 0);
+
+.action-pane-body {
+  position: relative;
+  text-wrap: pretty;
+}
+.action-pane-body.pane-body {
+  padding: 0;
 }.primary-button {
   background: var(--primary-600);
   border-color: var(--primary-700);
@@ -3916,129 +3916,6 @@
     box-shadow: -9px 0 var(--gray-200), 9px -4px var(--gray-300);
     translate: 0 0;
   }
-}.slider {
-  position: relative;
-  display: flex;
-  margin: 6px;
-  flex-flow: column;
-  gap: 9px;
-  touch-action: pan-y;
-}
-.slider.is-disabled {
-  cursor: not-allowed;
-}
-.slider.is-dragging {
-  cursor: grabbing;
-}
-
-.slider-thumb {
-  position: absolute;
-  top: 50%;
-  height: 24px;
-  width: 24px;
-  padding: 0;
-  background: var(--surface);
-  background-clip: padding-box;
-  border: 1px solid var(--surface-stroke-out);
-  border-radius: var(--radius-full);
-  box-shadow: var(--shadow-sm);
-  cursor: grab;
-  outline: 0;
-  translate: -50% -50%;
-  transition: var(--transition-default);
-  transition-property: outline-color, outline-offset;
-  outline: 2px solid rgb(from var(--primary-600) r g b/0);
-  outline-offset: 0;
-}
-.slider-thumb:focus-visible {
-  outline-color: var(--primary-600);
-  outline-offset: 2px;
-}
-@media (hover: hover) {
-  .slider-thumb:hover {
-    background-color: var(--surface-hover);
-  }
-}
-.slider-thumb.is-disabled {
-  background-color: var(--surface-disabled);
-  box-shadow: none;
-  pointer-events: none;
-}
-.slider-thumb.is-dragging {
-  box-shadow: var(--shadow-md);
-  cursor: grabbing;
-}
-
-.slider-track {
-  position: relative;
-  height: 12px;
-  background: var(--gray-50);
-  background-clip: padding-box;
-  border-radius: var(--radius-half);
-  box-shadow: inset 0 0 0 1px var(--surface-stroke-out);
-}
-
-.slider-track-value {
-  position: absolute;
-  display: block;
-  top: 0;
-  height: inherit;
-  background: var(--primary-600);
-  border-radius: inherit;
-}
-
-.slider.is-disabled .slider-track-value {
-  background: var(--gray-300);
-}
-
-.tick {
-  position: absolute;
-  left: calc(var(--position) * 100% - 1px);
-  bottom: 0;
-  height: 9px;
-  width: 2px;
-  background: var(--gray-300);
-  border-radius: var(--radius-full);
-  color: var(--foreground-prominent);
-  font-size: 10px;
-  font-weight: 600;
-  pointer-events: none;
-}
-
-.tick-large {
-}
-.tick-large :is(span) {
-  position: relative;
-  display: inline-block;
-  translate: -50% -100%;
-}
-
-.tick-small {
-  height: 6px;
-  opacity: 0.5;
-}
-
-.ticks {
-  position: relative;
-  display: block;
-  height: 21px;
-}.coordinate-picker {
-  position: relative;
-  aspect-ratio: 5/3;
-  background: var(--gray-50);
-  border: 1px solid var(--surface-stroke-out);
-  border-radius: var(--radius-half);
-  z-index: 0;
-}
-
-.coordinate-picker-thumb {
-  z-index: 1;
-}
-.coordinate-picker-thumb.is-disabled {
-  counter-reset: t;
-}
-.coordinate-picker-thumb.is-dragging {
-  counter-reset: t;
 }.filter {
   max-height: 50dvh;
   max-width: 100%;
@@ -4455,6 +4332,112 @@
 .expandable-body > .menu > :where(.divider, .separator) {
   margin-left: 18px;
   margin-right: 18px;
+}.slider {
+  position: relative;
+  display: flex;
+  margin: 6px;
+  flex-flow: column;
+  gap: 9px;
+  touch-action: pan-y;
+}
+.slider.is-disabled {
+  cursor: not-allowed;
+}
+.slider.is-dragging {
+  cursor: grabbing;
+}
+
+.slider-thumb {
+  position: absolute;
+  top: 50%;
+  height: 24px;
+  width: 24px;
+  padding: 0;
+  background: var(--surface);
+  background-clip: padding-box;
+  border: 1px solid var(--surface-stroke-out);
+  border-radius: var(--radius-full);
+  box-shadow: var(--shadow-sm);
+  cursor: grab;
+  outline: 0;
+  translate: -50% -50%;
+  transition: var(--transition-default);
+  transition-property: outline-color, outline-offset;
+  outline: 2px solid rgb(from var(--primary-600) r g b/0);
+  outline-offset: 0;
+}
+.slider-thumb:focus-visible {
+  outline-color: var(--primary-600);
+  outline-offset: 2px;
+}
+@media (hover: hover) {
+  .slider-thumb:hover {
+    background-color: var(--surface-hover);
+  }
+}
+.slider-thumb.is-disabled {
+  background-color: var(--surface-disabled);
+  box-shadow: none;
+  pointer-events: none;
+}
+.slider-thumb.is-dragging {
+  box-shadow: var(--shadow-md);
+  cursor: grabbing;
+}
+
+.slider-track {
+  position: relative;
+  height: 12px;
+  background: var(--gray-50);
+  background-clip: padding-box;
+  border-radius: var(--radius-half);
+  box-shadow: inset 0 0 0 1px var(--surface-stroke-out);
+}
+
+.slider-track-value {
+  position: absolute;
+  display: block;
+  top: 0;
+  height: inherit;
+  background: var(--primary-600);
+  border-radius: inherit;
+}
+
+.slider.is-disabled .slider-track-value {
+  background: var(--gray-300);
+}
+
+.tick {
+  position: absolute;
+  left: calc(var(--position) * 100% - 1px);
+  bottom: 0;
+  height: 9px;
+  width: 2px;
+  background: var(--gray-300);
+  border-radius: var(--radius-full);
+  color: var(--foreground-prominent);
+  font-size: 10px;
+  font-weight: 600;
+  pointer-events: none;
+}
+
+.tick-large {
+}
+.tick-large :is(span) {
+  position: relative;
+  display: inline-block;
+  translate: -50% -100%;
+}
+
+.tick-small {
+  height: 6px;
+  opacity: 0.5;
+}
+
+.ticks {
+  position: relative;
+  display: block;
+  height: 21px;
 }.tree-node {
   display: flex;
   width: 100%;
@@ -4616,6 +4599,23 @@
 
 .separator-vertical {
   width: 1px;
+}.coordinate-picker {
+  position: relative;
+  aspect-ratio: 5/3;
+  background: var(--gray-50);
+  border: 1px solid var(--surface-stroke-out);
+  border-radius: var(--radius-half);
+  z-index: 0;
+}
+
+.coordinate-picker-thumb {
+  z-index: 1;
+}
+.coordinate-picker-thumb.is-disabled {
+  counter-reset: t;
+}
+.coordinate-picker-thumb.is-dragging {
+  counter-reset: t;
 }.color-picker {
   --transparent: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMElEQVQ4T2N89uzZfwY8QFJSEp80A+OoAcMiDP7//483HTx//hx/Ohg1gIFx6IcBALl+VXknOCvFAAAAAElFTkSuQmCC);
   display: flex;