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

package/src/css/component/Icon.module.scss

@@ -1,48 +1,33 @@
-.icon {
-    height: 1em;
-    width: 1em;
-    flex-shrink: 0;
-    font-size: 20px;
-    line-height: 1;
-    overflow: visible;
-}
-
-.fontAwesomeIcon {
-    composes: icon;
-
-    display: inline-block;
-}
+@layer flux-base {
+    .icon {
+        height: 1em;
+        width: 1em;
+        flex-shrink: 0;
+        font-size: 20px;
+        line-height: 1;
+        overflow: visible;
+    }
 
-.materialSymbolIcon {
-    composes: 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;
-}
+    .fontAwesomeIcon {
+        composes: icon;
 
-.iconBoxed {
-    composes: basePane from './base/Pane.module.scss';
+        display: inline-block;
+    }
 
-    display: flex;
-    height: 1em;
-    width: 1em;
-    align-items: center;
-    flex-shrink: 0;
-    justify-content: center;
-    font-size: 42px;
+    .iconBoxed {
+        composes: basePane from './base/Pane.module.scss';
 
-    .icon {
-        font-size: .45em;
-    }
+        display: flex;
+        height: 1em;
+        width: 1em;
+        align-items: center;
+        flex-shrink: 0;
+        justify-content: center;
+        font-size: 42px;
 
-    .materialSymbolIcon {
-        font-size: .5em;
+        .icon {
+            font-size: .45em;
+        }
     }
 }
 

package/src/css/component/Item.module.scss

@@ -4,6 +4,7 @@
     display: flex;
     flex-flow: row nowrap;
     gap: 21px;
+    text-align: left;
 }
 
 .itemActions {
@@ -13,30 +14,40 @@
 .itemContent {
     display: flex;
     flex-flow: column;
+    flex-grow: 1;
     gap: 3px;
 }
 
 .itemMedia {
+    --size: 48px;
+
     flex-shrink: 0;
 }
 
 .itemMedia > img {
-    height: 48px;
-    width: 48px;
+    height: var(--size);
+    width: var(--size);
     object-fit: cover;
     object-position: center;
 }
 
 .itemMedia > .avatar {
-    font-size: 48px;
+    font-size: var(--size);
 }
 
 .itemMedia > .icon {
-    font-size: 24px;
+    margin: 1px;
+    font-size: 20px;
 }
 
 .itemMedia > .iconBoxed {
-    font-size: 48px;
+    font-size: var(--size);
+}
+
+.itemActions.isCenter,
+.itemContent.isCenter,
+.itemMedia.isCenter {
+    align-self: center;
 }
 
 .itemStack {
@@ -57,3 +68,7 @@
 .basePaneStructure > .itemStack > .item {
     margin: 0;
 }
+
+.basePaneStructure:is(a, button):hover:has(> .item) {
+    background-color: color-mix(in srgb, rgb(from var(--surface-hover) r g b / .125), var(--surface));
+}

package/src/css/component/Menu.module.scss

@@ -65,7 +65,10 @@
 .menuItemIcon {
     composes: buttonIcon from './base/Button.module.scss';
 
+    margin-left: 2px;
+    margin-right: 2px;
     color: var(--foreground-prominent);
+    font-size: 16px;
 }
 
 .menuItemLabel {

package/src/css/component/Pane.module.scss

@@ -18,13 +18,22 @@
     --surface: var(--background);
 }
 
+:is(.paneDefault, .paneFlat, .paneWell):is(button) {
+    padding: 0;
+}
 
 :is(.paneDefault, .paneFlat, .paneWell):is(a, button) {
-    transition: box-shadow 210ms var(--swift-out);
+    cursor: pointer;
+    transition: 210ms var(--swift-out);
+    transition-property: background, box-shadow;
 
     &:hover {
         box-shadow: var(--shadow-lg);
     }
+
+    &:active {
+        box-shadow: var(--shadow-xs);
+    }
 }
 
 .paneHeader {

package/src/css/component/Tab.module.scss

@@ -108,6 +108,13 @@
             border-color: var(--foreground);
         }
     }
+
+    &:disabled,
+    &[aria-disabled=true] {
+        box-shadow: none;
+        opacity: .5;
+        pointer-events: none;
+    }
 }
 
 .tabBarItemActive {

package/src/css/component/Table.module.scss

@@ -106,7 +106,7 @@ tfoot .tableCell {
 }
 
 .tableActions {
-    margin: -3px 0 -3px -3px;
+    margin: -4px 0 -4px -3px;
 }
 
 .tableFill {

package/src/css/component/Timeline.module.scss

@@ -57,14 +57,18 @@
 
 .timelineItemBody {
     position: relative;
-    align-self: center;
+    display: flex;
     padding-top: 9px;
     padding-bottom: 9px;
+    align-items: flex-start;
+    align-self: center;
+    flex-flow: column;
+    gap: 15px;
 }
 
 .timelineItemHeader {
     display: flex;
-    margin-bottom: 9px;
+    margin-bottom: -9px;
     flex-flow: column;
 
     :is(strong) {

package/src/css/component/base/Button.module.scss

@@ -84,4 +84,14 @@
             min-width: 42px;
         }
     }
+
+    .badge {
+        &:first-child {
+            margin-left: -6px;
+        }
+
+        &:last-child {
+            margin-right: -6px;
+        }
+    }
 }

package/src/css/typography.scss

@@ -7,7 +7,7 @@
 
     h1 {
         color: var(--foreground-prominent);
-        font-size: 30px;
+        font-size: 27px;
     }
 
     h2 {
@@ -35,8 +35,10 @@
     a:not([class]), a[class=""] {
         color: var(--primary-600);
         text-decoration: underline;
+        text-decoration-color: var(--primary-400);
+        text-decoration-skip: auto;
         text-decoration-thickness: 1px;
-        text-underline-offset: 4px;
+        text-underline-offset: 2px;
 
         &:hover {
             text-decoration: none;
@@ -47,6 +49,10 @@
         line-height: 1.6;
     }
 
+    small {
+        font-size: 14px;
+    }
+
     blockquote {
         position: relative;
         margin: 0 0 0 30px;

package/src/css/variables.scss

@@ -205,7 +205,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);

package/src/util/createDialogRenderer.ts

@@ -11,8 +11,10 @@ type Props = {
 };
 
 const TARGET_SELECTOR = `.${$style.overlayProvider.replaceAll(' ', '.')}`;
+let DIALOG_ID = 0;
 
 export default function (attrs: object, props: Props, emit: Emit, slots: Slots, className: string, transition: Component): RenderFunction {
+    const dialogId = `flux-dialog:${DIALOG_ID++}`;
     let unregister: Function | null = null;
     let zIndex = 0;
 
@@ -58,7 +60,7 @@ export default function (attrs: object, props: Props, emit: Emit, slots: Slots,
             }
 
             content = h('div', {
-                key: props.viewKey,
+                key: props.viewKey ?? dialogId,
                 ref: dialogRef,
                 class: [className, zIndex === dialogCount && $style.isCurrent],
                 style: {

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

@@ -1,5 +0,0 @@
-import { ComputedRef } from 'vue';
-export default function (): {
-    isLoading: ComputedRef<boolean>;
-    loaded: <T extends Function>(fn: T) => T;
-};

package/src/composable/private/useLoaded.ts

@@ -1,21 +0,0 @@
-import { computed, shallowRef, unref } from 'vue';
-
-export default function () {
-    const tasks = shallowRef(0);
-
-    const isLoading = computed(() => unref(tasks) > 0);
-
-    function loaded<T extends Function>(fn: T): T {
-        return (async (...args: any[]) => {
-            tasks.value++;
-
-            return await fn(...args)
-                .finally(() => tasks.value--);
-        }) as unknown as T;
-    }
-
-    return {
-        isLoading,
-        loaded
-    };
-}