@flux-ui/components 3.0.0-next.66 → 3.0.0-next.68

package/dist/component/primitive/SliderTrack.vue.d.ts

@@ -3,19 +3,15 @@ type __VLS_Props = {
     readonly percentageLower: number;
     readonly percentageUpper: number;
 };
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        default?(_: {}): any;
-    };
-    refs: {};
-    rootEl: HTMLDivElement;
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
 };
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+declare const __VLS_base: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
 export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
+type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;
     };

package/dist/component/primitive/TreeNodeRenderer.vue.d.ts

@@ -1,21 +1,19 @@
 import { FluxColor } from '@flux-ui/types';
 import { TreeBaseOption, TreeFlatNode } from '../../composable/private';
-import { VNodeProps, AllowedComponentProps, ComponentCustomProps, PublicProps, ShallowUnwrapRef, VNode } from 'vue';
-declare const _default: <TOption extends TreeBaseOption>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
-        readonly onExpandClick?: (args_0: MouseEvent) => any;
-    } & VNodeProps & AllowedComponentProps & ComponentCustomProps, never>, "onExpandClick"> & {
+import { PublicProps, VNode } from 'vue';
+declare const __VLS_export: <TOption extends TreeBaseOption>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: PublicProps & __VLS_PrettifyLocal<{
         readonly node: TreeFlatNode<TOption>;
         readonly expanded: boolean;
         readonly levelColors?: (FluxColor | string)[];
-    } & Partial<{}>> & PublicProps;
-    expose(exposed: ShallowUnwrapRef<{}>): void;
+    } & {
+        onExpandClick?: (args_0: MouseEvent) => any;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
     attrs: any;
-    slots: Readonly<{
-        trailing?(props: {
-            node: TreeFlatNode<TOption>;
-        }): any;
-    }> & {
+    slots: {
         trailing?(props: {
             node: TreeFlatNode<TOption>;
         }): any;
@@ -24,7 +22,10 @@ declare const _default: <TOption extends TreeBaseOption>(__VLS_props: NonNullabl
 }>) => VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
+declare const _default: typeof __VLS_export;
 export default _default;
-type __VLS_PrettifyLocal<T> = {
+type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];
-} & {};
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/index.css

@@ -663,7 +663,7 @@
 
 .overlay-shade {
   background: var(--overlay);
-  backdrop-filter: blur(3px) saturate(180%);
+  backdrop-filter: blur(3px) grayscale(0.5) saturate(180%);
   pointer-events: none;
   transition: opacity 600ms var(--swift-out);
 }
@@ -704,8 +704,8 @@
   background: var(--overlay-secondary);
   opacity: 0;
   pointer-events: none;
-  transition: opacity 420ms var(--swift-out);
-  z-index: 1;
+  transition: opacity 600ms var(--swift-out);
+  z-index: 1000;
 }
 .overlay.is-current > .base-pane-structure {
   pointer-events: auto;
@@ -744,6 +744,7 @@
   max-height: calc(100% - 18px);
   width: min(100dvw, 720px);
   contain: paint;
+  transition-duration: 600ms;
   overflow: auto;
 }
 .slide-over > .base-pane-structure > .pane-header,
@@ -779,11 +780,11 @@
 
 .overlay-transition-enter-active,
 .overlay-transition-leave-active {
-  transition: opacity 420ms var(--swift-out);
+  transition: opacity 300ms var(--swift-out);
 }
 .overlay-transition-enter-active > .base-pane-structure,
 .overlay-transition-leave-active > .base-pane-structure {
-  transition: 420ms var(--swift-out);
+  transition: 300ms var(--swift-out);
   transition-property: opacity, scale;
 }
 
@@ -805,11 +806,11 @@
 
 .slide-over-transition-enter-active,
 .slide-over-transition-leave-active {
-  transition: opacity 600ms var(--swift-out);
+  transition: opacity 480ms var(--swift-out);
 }
 .slide-over-transition-enter-active > .base-pane-structure,
 .slide-over-transition-leave-active > .base-pane-structure {
-  transition: 600ms var(--swift-out);
+  transition: 480ms var(--swift-out);
   transition-property: opacity, transform;
 }
 
@@ -1266,13 +1267,13 @@
 .vertical-window-transition-enter-active,
 .vertical-window-transition-back-enter-active {
   contain: paint;
-  transition: 120ms var(--deceleration-curve);
+  transition: 105ms var(--deceleration-curve);
   transition-property: opacity, transform;
 }
 
 .vertical-window-transition-leave-active,
 .vertical-window-transition-back-leave-active {
-  transition: 120ms var(--acceleration-curve);
+  transition: 105ms var(--acceleration-curve);
   transition-property: opacity, transform;
 }
 
@@ -1290,13 +1291,13 @@
 
 .window-transition-enter-active,
 .window-transition-back-enter-active {
-  transition: 120ms var(--deceleration-curve);
+  transition: 105ms var(--deceleration-curve);
   transition-property: height, opacity, transform;
 }
 
 .window-transition-leave-active,
 .window-transition-back-leave-active {
-  transition: 120ms var(--acceleration-curve);
+  transition: 105ms var(--acceleration-curve);
   transition-property: height, opacity, transform;
 }
 
@@ -1557,7 +1558,7 @@
   animation: close 210ms var(--swift-out) both;
 }
 .flyout-pane.is-opening {
-  animation: open 210ms var(--deceleration-curve) both;
+  animation: open 210ms var(--swift-out) both;
 }
 
 @keyframes close {
@@ -2538,23 +2539,68 @@
 }.layer-pane {
   display: flex;
   flex-flow: column;
-  border: 1px solid var(--surface-stroke-out);
-  border-radius: var(--radius);
-  background: var(--gray-50);
   background-clip: padding-box;
+  border: 1px solid;
+  border-radius: var(--radius);
+  contain: paint;
+}
+.layer-pane > .base-pane-structure {
+  border-color: inherit;
+}
+
+.layer-pane-gray {
+  background-color: var(--gray-50);
+  border-color: var(--surface-stroke-out);
+}
+
+.layer-pane-primary {
+  background-color: var(--primary-100);
+  border-color: var(--primary-200);
+}
+
+.layer-pane-danger {
+  background-color: var(--danger-100);
+  border-color: var(--danger-200);
+}
+.layer-pane-danger .pane-header-icon {
+  color: var(--danger-600);
+}
+
+.layer-pane-info {
+  background-color: var(--info-100);
+  border-color: var(--info-200);
+}
+.layer-pane-info .pane-header-icon {
+  color: var(--info-600);
+}
+
+.layer-pane-success {
+  background-color: var(--success-100);
+  border-color: var(--success-200);
+}
+.layer-pane-success .pane-header-icon {
+  color: var(--success-600);
+}
+
+.layer-pane-warning {
+  background-color: var(--warning-100);
+  border-color: var(--warning-200);
+}
+.layer-pane-warning .pane-header-icon {
+  color: var(--warning-600);
 }
 
 .layer-pane > .base-pane-structure {
-  border-right-width: 0;
-  border-left-width: 0;
+  margin-left: -1px;
+  margin-right: -1px;
 }
 
 .layer-pane > .base-pane-structure:first-child {
-  border-top-width: 0;
+  margin-top: -1px;
 }
 
 .layer-pane > .base-pane-structure:last-child {
-  border-bottom-width: 0;
+  margin-bottom: -1px;
 }
 
 .layer-pane > .base-pane-structure + .base-pane-structure {
@@ -3152,7 +3198,7 @@
   transition-property: opacity;
 }
 .checkbox-element .icon :is(path) {
-  stroke: white;
+  stroke: currentColor;
   stroke-width: 54px;
 }
 
@@ -3181,6 +3227,14 @@
   outline-color: var(--primary-600);
   outline-offset: 2px;
 }
+.checkbox-native:disabled {
+  cursor: not-allowed;
+}
+.checkbox-native:disabled + .checkbox-element {
+  background: var(--gray-100);
+  border-color: var(--gray-200);
+  color: var(--foreground-secondary);
+}
 
 .quantity-selector {
   min-width: max-content;
@@ -3299,6 +3353,12 @@
   border: 1px solid var(--gray-200);
   border-radius: var(--radius-full);
   contain: paint;
+  outline: 2px solid rgb(from var(--primary-600) r g b/0);
+  outline-offset: 0;
+}
+.toggle:has(.toggle-input:focus-visible) {
+  outline-color: var(--primary-600);
+  outline-offset: 2px;
 }
 .toggle.is-checked {
   border-color: transparent;
@@ -3361,12 +3421,6 @@
   border-radius: inherit;
   cursor: pointer;
   outline: 0;
-  outline: 2px solid rgb(from var(--primary-600) r g b/0);
-  outline-offset: 0;
-}
-.toggle-input:focus-visible {
-  outline-color: var(--primary-600);
-  outline-offset: 2px;
 }
 .toggle-input::after {
   position: absolute;

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 export * from './component';
 export * from './composable';
 export * from './transition';
-export { fluxRegisterIcons, isFluxFormSelectGroup, isFluxFormSelectOption, showAlert, showConfirm, showPrompt, showSnackbar, useFluxStore } from './data';
+export { fluxRegisterIcons, iconRegistry, isFluxFormSelectGroup, isFluxFormSelectOption, showAlert, showConfirm, showPrompt, showSnackbar, useFluxStore } from './data';
 export type { FluxAdaptiveGroupChild, FluxAdaptiveGroupInjection, FluxExpandableGroupInjection, FluxFilterInjection, FluxFlyoutInjection, FluxFormFieldInjection, FluxTooltipInjection, FluxState, FluxStore } from './data';
 export { defineFilter, isFluxFilterOptionHeader, isFluxFilterOptionItem, pickFilterCommon } from './util';
 export type { FluxFilterDefinitionFactory } from './util';