@flux-ui/components 3.0.0-next.26 → 3.0.0-next.28

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

@@ -4,6 +4,7 @@ type __VLS_Props = {
     readonly incrementor?: number;
     readonly opacity?: number;
     readonly seed?: number;
+    readonly static?: boolean;
 };
 declare const _default: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {
     canvas: HTMLCanvasElement;

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

@@ -44,9 +44,9 @@ declare const _default: DefineComponent<ExtractPropTypes<{
         type: NumberConstructor;
     };
 }>> & Readonly<{}>, {
-    colors: string[];
     duration: number;
     width: number;
+    colors: string[];
     offset: number;
     radius: string | number;
 }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;

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

@@ -7,6 +7,7 @@ type __VLS_Props = {
     readonly iconTrailing?: FluxIconName;
     readonly disabled?: boolean;
     readonly isCondensed?: boolean;
+    readonly isLoading?: boolean;
     readonly isReadonly?: boolean;
     readonly isSecondary?: boolean;
     readonly max?: string | number;

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

@@ -19,11 +19,11 @@ declare function __VLS_template(): {
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
-    delete: (args_0: number) => any;
     upload: (args_0: File[]) => any;
+    delete: (args_0: number) => any;
 }, string, PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onDelete?: (args_0: number) => any;
     onUpload?: (args_0: File[]) => any;
+    onDelete?: (args_0: number) => any;
 }>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, HTMLDivElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;

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

@@ -1,4 +1,7 @@
 import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+type __VLS_Props = {
+    readonly isCenter?: boolean;
+};
 declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: {
@@ -8,7 +11,7 @@ declare function __VLS_template(): {
     rootEl: any;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
+declare const __VLS_component: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

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

@@ -1,4 +1,7 @@
 import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+type __VLS_Props = {
+    readonly isCenter?: boolean;
+};
 declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: {
@@ -8,7 +11,7 @@ declare function __VLS_template(): {
     rootEl: HTMLDivElement;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, HTMLDivElement>;
+declare const __VLS_component: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, HTMLDivElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

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

@@ -1,4 +1,8 @@
 import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+type __VLS_Props = {
+    readonly isCenter?: boolean;
+    readonly size?: number;
+};
 declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: {
@@ -8,7 +12,7 @@ declare function __VLS_template(): {
     rootEl: HTMLDivElement;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, HTMLDivElement>;
+declare const __VLS_component: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, HTMLDivElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

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

@@ -13,6 +13,7 @@ declare const _default: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOp
         readonly iconTrailing?: FluxIconName;
         readonly disabled?: boolean;
         readonly isCondensed?: boolean;
+        readonly isLoading?: boolean;
         readonly isReadonly?: boolean;
         readonly isSecondary?: boolean;
         readonly max?: string | number;
@@ -53,6 +54,7 @@ declare const _default: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOp
         readonly iconTrailing?: FluxIconName;
         readonly disabled?: boolean;
         readonly isCondensed?: boolean;
+        readonly isLoading?: boolean;
         readonly isReadonly?: boolean;
         readonly isSecondary?: boolean;
         readonly max?: string | number;

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

@@ -1,6 +1,7 @@
 import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
 type __VLS_Props = {
     readonly contentDirection?: 'column' | 'row';
+    readonly contentGap?: number;
 };
 declare function __VLS_template(): {
     attrs: Partial<{}>;

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

@@ -15,20 +15,20 @@ type __VLS_PublicProps = {
 } & __VLS_Props;
 declare const _default: DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
     close: () => any;
-    deselect: (args_0: string | number) => any;
     search: (args_0: string) => any;
     select: (args_0: string | number) => any;
     open: () => any;
     "update:searchQuery": (value: string) => any;
     keyDown: (args_0: KeyboardEvent) => any;
+    deselect: (args_0: string | number) => any;
 }, string, PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onClose?: () => any;
-    onDeselect?: (args_0: string | number) => any;
     onSearch?: (args_0: string) => any;
     onSelect?: (args_0: string | number) => any;
     onOpen?: () => any;
     "onUpdate:searchQuery"?: (value: string) => any;
     onKeyDown?: (args_0: KeyboardEvent) => any;
+    onDeselect?: (args_0: string | number) => any;
 }>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {
     anchor: {
         $: ComponentInternalInstance;
@@ -155,6 +155,7 @@ declare const _default: DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, Compo
         readonly iconTrailing?: FluxIconName;
         readonly disabled?: boolean;
         readonly isCondensed?: boolean;
+        readonly isLoading?: boolean;
         readonly isReadonly?: boolean;
         readonly isSecondary?: boolean;
         readonly max?: string | number;
@@ -195,6 +196,7 @@ declare const _default: DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, Compo
         readonly iconTrailing?: FluxIconName;
         readonly disabled?: boolean;
         readonly isCondensed?: boolean;
+        readonly isLoading?: boolean;
         readonly isReadonly?: boolean;
         readonly isSecondary?: boolean;
         readonly max?: string | number;
@@ -218,7 +220,6 @@ declare const _default: DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, Compo
         $data: {};
         $props: Partial<{}> & Omit<{
             readonly label?: string;
-            readonly target?: string;
             readonly disabled?: boolean;
             readonly to?: FluxTo;
             readonly tabindex?: string | number;
@@ -226,6 +227,7 @@ declare const _default: DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, Compo
             readonly isLoading?: boolean;
             readonly href?: string;
             readonly rel?: string;
+            readonly target?: string;
             readonly iconLeading?: FluxIconName | null;
             readonly iconTrailing?: FluxIconName | null;
             readonly command?: string;

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

@@ -19,11 +19,11 @@ declare function __VLS_template(): {
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
-    update: (args_0: number) => any;
     dragging: (args_0: boolean) => any;
+    update: (args_0: number) => any;
 }, string, PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onUpdate?: (args_0: number) => any;
     onDragging?: (args_0: boolean) => any;
+    onUpdate?: (args_0: number) => any;
 }>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {
     root: HTMLDivElement;
 }, HTMLDivElement>;

package/dist/composable/private/index.d.ts

@@ -1,3 +1,2 @@
 export { default as useFormSelect } from './useFormSelect';
-export { default as useLoaded } from './useLoaded';
 export { default as useTranslate } from './useTranslate';

package/dist/index.css

@@ -59,7 +59,7 @@
     --background: var(--gray-50);
     --foreground: var(--gray-700);
     --foreground-prominent: var(--gray-900);
-    --foreground-secondary: var(--gray-400);
+    --foreground-secondary: var(--gray-500);
     --surface: var(--gray-25);
     --surface-loader: rgb(from var(--gray-25) r g b / .75);
     --surface-stroke: var(--gray-200);
@@ -281,7 +281,7 @@
     color: var(--primary-600);
     text-decoration: underline;
     text-decoration-thickness: 1px;
-    text-underline-offset: 4px;
+    text-underline-offset: 3px;
   }
   a:not([class]):hover, a[class=""]:hover {
     text-decoration: none;
@@ -289,6 +289,9 @@
   p {
     line-height: 1.6;
   }
+  small {
+    font-size: 14px;
+  }
   blockquote {
     position: relative;
     margin: 0 0 0 30px;
@@ -551,17 +554,6 @@
   display: inline-block;
 }
 
-.material-symbol-icon {
-  display: inline-flex;
-  color: currentColor;
-  font-family: "Material Symbols Outlined", sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  user-select: none;
-  -webkit-font-feature-settings: "liga";
-  -webkit-font-smoothing: antialiased;
-}
-
 .icon-boxed {
   display: flex;
   height: 1em;
@@ -574,9 +566,6 @@
 .icon-boxed .icon {
   font-size: 0.45em;
 }
-.icon-boxed .material-symbol-icon {
-  font-size: 0.5em;
-}
 
 .icon-boxed-default {
   box-shadow: var(--shadow-sm);
@@ -1097,12 +1086,21 @@
   --surface: var(--background);
 }
 
+:is(.pane-default, .pane-flat, .pane-well):is(button) {
+  padding: 0;
+}
+
 :is(.pane-default, .pane-flat, .pane-well):is(a, button) {
-  transition: box-shadow 210ms var(--swift-out);
+  cursor: pointer;
+  transition: 210ms var(--swift-out);
+  transition-property: background, box-shadow;
 }
 :is(.pane-default, .pane-flat, .pane-well):is(a, button):hover {
   box-shadow: var(--shadow-lg);
 }
+:is(.pane-default, .pane-flat, .pane-well):is(a, button):active {
+  box-shadow: var(--shadow-xs);
+}
 
 .pane-header {
   display: flex;
@@ -1861,7 +1859,7 @@
 }
 
 .badge-gray {
-  --color: var(--gray-700);
+  --color: var(--foreground);
 }
 .badge-gray .badge-label {
   color: var(--foreground-prominent);
@@ -4006,7 +4004,7 @@ tfoot .table-cell {
 }
 
 .table-actions {
-  margin: -3px 0 -3px -3px;
+  margin: -4px 0 -4px -3px;
 }
 
 .table-fill {
@@ -4634,6 +4632,7 @@ tfoot .table-cell {
   display: flex;
   flex-flow: row nowrap;
   gap: 21px;
+  text-align: left;
 }
 
 .item-actions {
@@ -4643,22 +4642,24 @@ tfoot .table-cell {
 .item-content {
   display: flex;
   flex-flow: column;
+  flex-grow: 1;
   gap: 3px;
 }
 
 .item-media {
+  --size: 48px;
   flex-shrink: 0;
 }
 
 .item-media > img {
-  height: 48px;
-  width: 48px;
+  height: var(--size);
+  width: var(--size);
   object-fit: cover;
   object-position: center;
 }
 
 .item-media > .avatar {
-  font-size: 48px;
+  font-size: var(--size);
 }
 
 .item-media > .icon {
@@ -4666,7 +4667,13 @@ tfoot .table-cell {
 }
 
 .item-media > .icon-boxed {
-  font-size: 48px;
+  font-size: var(--size);
+}
+
+.item-actions.is-center,
+.item-content.is-center,
+.item-media.is-center {
+  align-self: center;
 }
 
 .item-stack {
@@ -4685,6 +4692,10 @@ tfoot .table-cell {
 
 .base-pane-structure > .item-stack > .item {
   margin: 0;
+}
+
+.base-pane-structure:is(a, button):hover:has(> .item) {
+  background-color: color-mix(in srgb, rgb(from var(--surface-hover) r g b/0.125), var(--surface));
 }.legend-horizontal {
   gap: 12px 21px;
 }
@@ -5726,6 +5737,11 @@ tfoot .table-cell {
     border-color: var(--foreground);
   }
 }
+.tab-bar-item:disabled, .tab-bar-item[aria-disabled=true] {
+  box-shadow: none;
+  opacity: 0.5;
+  pointer-events: none;
+}
 
 .tab-bar-item-active {
   border-color: var(--primary-600);