@flux-ui/components 3.0.0-next.7 → 3.0.0-next.70

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

@@ -0,0 +1,78 @@
+.splitView {
+    display: grid;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+}
+
+.splitViewHorizontal {
+    composes: splitView;
+
+    grid-auto-flow: column;
+}
+
+.splitViewVertical {
+    composes: splitView;
+
+    grid-auto-flow: row;
+}
+
+.splitViewDragging {
+    user-select: none;
+
+    & * {
+        pointer-events: none;
+    }
+}
+
+.splitViewPane {
+    min-width: 0;
+    min-height: 0;
+    overflow: auto;
+}
+
+.splitViewHandle {
+    appearance: none;
+    position: relative;
+
+    display: block;
+    border: 0;
+    margin: 0;
+    padding: 0;
+
+    background: transparent;
+    cursor: col-resize;
+
+    &::before {
+        position: absolute;
+        top: 0;
+        left: calc(50% - 1px);
+        height: 100%;
+        width: 2px;
+        content: '';
+        background: var(--surface-stroke);
+        transition: background .15s var(--swift-out);
+    }
+
+    &:hover::before,
+    &:focus-visible::before {
+        background: var(--primary-500);
+    }
+
+    &:focus-visible {
+        outline: none;
+    }
+}
+
+.splitViewHandleVertical {
+    composes: splitViewHandle;
+
+    cursor: row-resize;
+
+    &::before {
+        top: calc(50% - 1px);
+        left: 0;
+        height: 2px;
+        width: 100%;
+    }
+}

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

@@ -1,36 +1,8 @@
 .statistic {
-    padding: 21px;
-    gap: 21px;
-
-    &.isGray .statisticIcon {
-        background: rgb(var(--gray-2));
-        color: rgb(var(--gray-7));
-    }
-
-    &.isPrimary .statisticIcon {
-        background: rgb(var(--primary-2));
-        color: rgb(var(--primary-7));
-    }
-
-    &.isDanger .statisticIcon {
-        background: rgb(var(--danger-2));
-        color: rgb(var(--danger-7));
-    }
-
-    &.isInfo .statisticIcon {
-        background: rgb(var(--info-2));
-        color: rgb(var(--info-7));
-    }
-
-    &.isSuccess .statisticIcon {
-        background: rgb(var(--success-2));
-        color: rgb(var(--success-7));
-    }
-
-    &.isWarning .statisticIcon {
-        background: rgb(var(--warning-2));
-        color: rgb(var(--warning-7));
-    }
+    padding: 18px;
+    flex-basis: 0;
+    flex-grow: 1;
+    gap: 18px;
 }
 
 .statisticChange {
@@ -47,23 +19,23 @@
     }
 
     &.isPrimary {
-        color: rgb(var(--primary-7));
+        color: var(--primary-600);
     }
 
     &.isDanger {
-        color: rgb(var(--danger-7));
+        color: var(--danger-600);
     }
 
     &.isInfo {
-        color: rgb(var(--info-7));
+        color: var(--info-600);
     }
 
     &.isSuccess {
-        color: rgb(var(--success-7));
+        color: var(--success-600);
     }
 
     &.isWarning {
-        color: rgb(var(--warning-7));
+        color: var(--warning-600);
     }
 }
 
@@ -85,12 +57,13 @@
     }
 }
 
-.statisticIcon {
-    display: flex;
+.statisticIcon :local(.icon) {
+    font-size: .45em;
+}
+
+.statisticImage {
     height: 48px;
     width: 48px;
-    align-items: center;
-    justify-content: center;
     border-radius: var(--radius);
 }
 

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

@@ -29,12 +29,12 @@
 
     &::before {
         width: var(--max);
-        background: rgb(var(--gray-2));
+        background: var(--gray-100);
     }
 
     &::after {
         width: calc(min(1, var(--progress)) * var(--max));
-        background: rgb(var(--primary-7));
+        background: var(--primary-600);
         transition: width 300ms var(--swift-out);
     }
 }
@@ -48,9 +48,9 @@
     width: 33px;
     align-items: center;
     justify-content: center;
-    background: rgb(var(--gray-3));
+    background: var(--gray-100);
     border: 0;
-    border-radius: 99px;
+    border-radius: var(--radius-full);
     color: var(--foreground);
     cursor: default;
     font-size: 14px;
@@ -75,17 +75,17 @@
     composes: sparklesContainerActive from './base/Effect.module.scss';
     composes: stepperStepsItem;
 
-    background: rgb(var(--primary-7));
-    border-color: rgb(var(--primary-7));
-    color: rgb(var(--primary-0));
+    background: var(--primary-600);
+    border-color: var(--primary-600);
+    color: var(--primary-25);
 }
 
 .stepperStepsItemCurrent {
     composes: stepperStepsItem;
 
-    background: rgb(var(--gray-1));
+    background: var(--gray-100);
     color: var(--foreground-prominent);
-    outline-color: rgb(var(--primary-7));
+    outline-color: var(--primary-600);
     outline-width: 2px;
     transition-delay: 75ms;
 }
@@ -93,7 +93,7 @@
 .stepperStepsItemIdle {
     composes: stepperStepsItem;
 
-    outline-color: rgb(var(--gray-0));
+    outline-color: var(--gray-25);
 }
 
 .stepperStepsItemParticles {

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

@@ -0,0 +1,35 @@
+.stickySentinel {
+    position: relative;
+
+    height: 1px;
+    width: 100%;
+
+    pointer-events: none;
+    visibility: hidden;
+}
+
+.sticky {
+    position: sticky;
+
+    z-index: 1;
+}
+
+.stickyTop {
+    composes: sticky;
+
+    top: var(--offset, 0);
+}
+
+.stickyBottom {
+    composes: sticky;
+
+    bottom: var(--offset, 0);
+}
+
+.hasShadow {
+    transition: box-shadow .15s var(--swift-out);
+}
+
+.hasShadow[data-stuck='true'] {
+    box-shadow: var(--surface-shadow-md, 0 4px 12px rgb(0 0 0 / 0.08));
+}

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

@@ -1,21 +1,37 @@
-@use '$flux/css/mixin';
+@use '~flux/components/css/mixin';
 
 .tab {
     position: relative;
+    display: flex;
+    flex-flow: column;
+    flex-grow: 1;
+    gap: 18px;
 }
 
-.tabBar {
-    --tab-padding: 12px;
-
+.baseTabBar {
     position: relative;
-    box-shadow: inset 0 -2px rgb(var(--gray-2));
     z-index: 0;
 }
 
+.tabBarDefault {
+    composes: baseTabBar;
+
+    --tab-padding: 12px;
+
+    box-shadow: inset 0 -2px var(--surface-stroke);
+}
+
+.tabBarPills {
+    composes: baseTabBar;
+
+    padding: 3px;
+    border-radius: var(--radius);
+}
+
 .tabBarArrow {
     position: absolute;
     display: flex;
-    top: 3px;
+    top: 2px;
     height: calc(100% - 6px);
     width: 30px;
     align-items: center;
@@ -26,41 +42,46 @@
     color: var(--foreground);
     cursor: pointer;
     outline: 0;
-    transition: background 180ms var(--swift-out);
+    transition: background var(--transition-default);
     z-index: 1;
 
-    @media (hover: hover) {
-        &:hover {
-            background: rgb(var(--gray-2));
-        }
+    @include mixin.hover {
+        background: var(--surface-stroke);
     }
 }
 
 .tabBarArrowStart {
     composes: tabBarArrow;
 
-    left: -6px;
+    left: 3px;
 }
 
 .tabBarArrowEnd {
     composes: tabBarArrow;
 
-    right: -6px;
+    right: 3px;
 }
 
-.tabBarTabs {
+.baseTabBarTabs {
+    position: relative;
+    display: flex;
+    align-items: center;
+    overflow: auto;
+    scrollbar-width: none;
+}
+
+.tabBarTabsDefault {
+    composes: baseTabBarTabs;
+
     --mask-start: 0%;
     --mask-end: 100%;
     --mask: linear-gradient(to right, transparent, black var(--mask-start), black, black var(--mask-end), transparent);
 
-    display: flex;
     margin-left: -3px;
     margin-right: -3px;
     padding-left: 3px;
     padding-right: 3px;
-    align-items: flex-end;
-    gap: 30px;
-    overflow: hidden;
+    gap: 27px;
 
     -webkit-mask-image: var(--mask);
     mask-image: var(--mask);
@@ -74,51 +95,129 @@
     }
 }
 
-.tabBarItem {
+.tabBarTabsPills {
+    composes: baseTabBarTabs;
+
+    gap: 0;
+}
+
+.baseTabBarItem {
     display: inline-flex;
-    padding: var(--tab-padding) 0;
     align-items: center;
-    gap: 9px;
     background: unset;
     border: 0;
-    border-bottom: 2px solid transparent;
     color: var(--foreground);
     contain: layout;
     cursor: pointer;
     font-weight: 500;
     outline: 0;
-    transition: 180ms var(--swift-out);
-    transition-property: border-color, color;
     white-space: nowrap;
 
     &::before {
         position: absolute;
         inset: 0;
         content: '';
-        border-radius: var(--radius);
         pointer-events: none;
-        transition: 180ms var(--swift-out) mixin.focus-ring-transition-properties();
+        transition: var(--transition-default) mixin.focus-ring-transition-properties();
+    }
+
+    @include mixin.focus-ring-pseudo(before, -2px);
+
+    // Inset offset zodat de focus-ring niet wordt weggeclipt
+    // door de overflow: auto op .tabBarTabs.
+    &::before {
+        outline-offset: -2px;
+    }
+
+    &:disabled,
+    &[aria-disabled=true] {
+        box-shadow: none;
+        opacity: .5;
+        pointer-events: none;
+    }
+}
+
+.tabBarItemDefault {
+    composes: baseTabBarItem;
+
+    padding: var(--tab-padding) 0;
+    gap: 9px;
+    border-bottom: 2px solid transparent;
+    transition: var(--transition-default);
+    transition-property: border-color, color;
+
+    &::before {
+        border-radius: var(--radius);
+    }
+
+    @include mixin.hover {
+        border-color: var(--foreground);
     }
+}
+
+.tabBarItemDefaultActive {
+    composes: tabBarItemDefault;
+
+    color: var(--foreground-prominent);
+}
+
+.tabBarItemPills {
+    composes: baseTabBarItem;
+
+    position: relative;
+    height: 36px;
+    padding: 0 12px;
+    gap: 6px;
+    border-radius: calc(var(--radius) - 2px);
+    transition: color 300ms var(--swift-out);
+    z-index: 1;
 
-    @include mixin.focus-ring-pseudo(before);
+    &::before {
+        border-radius: calc(var(--radius) - 2px);
+    }
 
-    @media (hover: hover) {
-        &:hover {
-            border-color: var(--foreground);
-        }
+    @include mixin.hover {
+        color: var(--foreground-prominent);
     }
 }
 
-.tabBarItemActive {
-    composes: tabBarItem;
+.tabBarItemPillsActive {
+    composes: tabBarItemPills;
 
-    border-color: rgb(var(--primary-7));
     color: var(--foreground-prominent);
+    cursor: default;
+}
+
+.baseTabBarHighlight {
+    position: absolute;
+    pointer-events: none;
+    transition: 300ms var(--swift-out);
+    transition-property: left, width;
+}
+
+.tabBarHighlightDefault {
+    composes: baseTabBarHighlight;
+
+    bottom: 0;
+    height: 2px;
+    background: var(--primary-600);
+    z-index: 1;
+}
+
+.tabBarHighlightPills {
+    composes: baseTabBarHighlight;
+
+    top: 0;
+    bottom: 0;
+    background: var(--gray-100);
+    border-radius: calc(var(--radius) - 2px);
+    z-index: 0;
 }
 
 .tabs {
     display: flex;
     flex-flow: column;
+    flex-grow: 1;
     overflow: visible;
 }
 
@@ -126,35 +225,49 @@
     margin-bottom: 18px;
 }
 
-.basePaneStructure > .tabBar,
-.basePaneStructure > .tabs >.tabBar {
+.basePaneStructure > .tabBarDefault,
+.basePaneStructure > .tabs > .tabBarDefault,
+.basePaneStructure > .form > .tabBarDefault,
+.basePaneStructure > .form > .tabs > .tabBarDefault {
     --tab-padding: 18px;
 
-    padding-left: 21px;
-    padding-right: 21px;
-    background: rgb(var(--gray-1));
+    padding-left: 18px;
+    padding-right: 18px;
+    background: var(--gray-50);
 
     &:first-child {
         border-radius: var(--radius) var(--radius) 0 0;
     }
 
     &:not(:first-child) {
-        border-top: 1px solid rgb(var(--gray-2));
+        border-top: 1px solid var(--surface-stroke);
     }
 }
 
-.basePaneStructure > .paneHeader + .tabBar,
-.basePaneStructure > .paneHeader + .tabs > .tabBar {
-    padding-top: 6px;
-
+.basePaneStructure > .paneHeader + .tabBarDefault,
+.basePaneStructure > .paneHeader + .tabs > .tabBarDefault,
+.basePaneStructure > .form > .paneHeader + .tabBarDefault,
+.basePaneStructure > .form > .paneHeader + .tabs > .tabBarDefault {
     &:not(:first-child) {
         border-top: 0;
     }
 }
 
-.paneHeader:has(+ .tabBar),
-.paneHeader:has(+ .tabs > .tabBar) {
-    background: rgb(var(--gray-1));
+.paneHeader:has(+ .tabBarDefault),
+.paneHeader:has(+ .tabs > .tabBarDefault) {
+    background: var(--gray-50);
+}
+
+.basePaneStructure > .tabBarPills,
+.basePaneStructure > .tabs > .tabBarPills,
+.basePaneStructure > .form > .tabBarPills,
+.basePaneStructure > .form > .tabs > .tabBarPills {
+    padding-left: 6px;
+    padding-right: 6px;
+
+    &:first-child {
+        padding-top: 6px;
+    }
 }
 
 .basePaneStructure > .tabs > .tabsBar {