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

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/FilterBadge.vue.d.ts

@@ -0,0 +1,12 @@
+import { FluxFilterItem, FluxFilterValue } from '@flux-ui/types';
+import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+type __VLS_Props = {
+    readonly item: FluxFilterItem;
+    readonly value: FluxFilterValue;
+};
+declare const _default: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+    click: (args_0: MouseEvent) => any;
+}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClick?: (args_0: MouseEvent) => any;
+}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+export default _default;

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/component/primitive/index.d.ts

@@ -1,5 +1,7 @@
 export { default as Anchor } from './Anchor.vue';
 export { default as AnchorPopup } from './AnchorPopup.vue';
+export { default as FilterBadge } from './FilterBadge.vue';
+export { default as FilterItem } from './FilterItem.vue';
 export { default as FilterOptionBase } from './FilterOptionBase.vue';
 export { default as SelectBase } from './SelectBase.vue';
 export { default as SliderBase } from './SliderBase.vue';

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);
@@ -258,7 +258,7 @@
   }
   h1 {
     color: var(--foreground-prominent);
-    font-size: 30px;
+    font-size: 27px;
   }
   h2 {
     color: var(--foreground-prominent);
@@ -280,8 +280,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;
   }
   a:not([class]):hover, a[class=""]:hover {
     text-decoration: none;
@@ -289,6 +291,9 @@
   p {
     line-height: 1.6;
   }
+  small {
+    font-size: 14px;
+  }
   blockquote {
     position: relative;
     margin: 0 0 0 30px;
@@ -538,46 +543,31 @@
 .base-pane > .base-pane-element:only-child,
 .base-pane > .form > .base-pane-element:only-child {
   border: 0;
-}.icon {
-  height: 1em;
-  width: 1em;
-  flex-shrink: 0;
-  font-size: 20px;
-  line-height: 1;
-  overflow: visible;
-}
-
-.font-awesome-icon {
-  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;
-  width: 1em;
-  align-items: center;
-  flex-shrink: 0;
-  justify-content: center;
-  font-size: 42px;
-}
-.icon-boxed .icon {
-  font-size: 0.45em;
-}
-.icon-boxed .material-symbol-icon {
-  font-size: 0.5em;
+}@layer flux-base {
+  .icon {
+    height: 1em;
+    width: 1em;
+    flex-shrink: 0;
+    font-size: 20px;
+    line-height: 1;
+    overflow: visible;
+  }
+  .font-awesome-icon {
+    display: inline-block;
+  }
+  .icon-boxed {
+    display: flex;
+    height: 1em;
+    width: 1em;
+    align-items: center;
+    flex-shrink: 0;
+    justify-content: center;
+    font-size: 42px;
+  }
+  .icon-boxed .icon {
+    font-size: 0.45em;
+  }
 }
-
 .icon-boxed-default {
   box-shadow: var(--shadow-sm);
 }
@@ -723,6 +713,12 @@
     margin-right: 6px;
     min-width: 42px;
   }
+  .badge:first-child {
+    margin-left: -6px;
+  }
+  .badge:last-child {
+    margin-right: -6px;
+  }
 }.action {
   height: 30px;
   width: 30px;
@@ -1097,12 +1093,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;
@@ -1791,6 +1796,7 @@
   color: var(--foreground-prominent);
   font-size: 13px;
   font-weight: 500;
+  font-variant-numeric: tabular-nums;
 }
 .badge:is(a) {
   color: var(--foreground-prominent);
@@ -1861,7 +1867,7 @@
 }
 
 .badge-gray {
-  --color: var(--gray-700);
+  --color: var(--foreground);
 }
 .badge-gray .badge-label {
   color: var(--foreground-prominent);
@@ -1926,6 +1932,111 @@
 }
 
 .tag-warning {
+}.filter {
+  max-height: 50dvh;
+  max-width: 100%;
+  padding: 9px;
+  width: 270px;
+  overflow: auto;
+  scrollbar-width: none;
+  transition: height 150ms var(--deceleration-curve);
+  z-index: 0;
+}
+.filter::-webkit-scrollbar {
+  display: none;
+  height: 0;
+  width: 0;
+}
+.filter .menu > :where(.divider, .separator) {
+  margin: 3px -9px;
+}
+.filter .menu > .menu-group > .menu-sub-header {
+  top: 51px;
+}
+.filter .menu > .menu-group:has(.filter-search) > .menu-sub-header {
+  top: 105px;
+}
+.filter .menu .menu-item-label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.filter .pane-body {
+  margin: -9px;
+}
+
+.filter-badge {
+  padding-left: 6px;
+  padding-right: 6px;
+  background: var(--primary-50);
+  border: 1px dashed var(--primary-300);
+  font-weight: 500;
+}
+.filter-badge .badge-label {
+  color: var(--primary-900);
+}
+
+.filter-button {
+  border: 1px solid var(--surface-stroke);
+  box-shadow: none;
+}
+.filter-button .badge {
+  border-radius: var(--radius-half);
+}
+.filter-button .button-icon {
+  color: var(--primary-700);
+  font-size: 16px;
+}
+
+.filter-header {
+  position: sticky;
+  margin: -9px -9px 3px;
+  padding: 9px;
+  top: -9px;
+  background: var(--surface);
+  border-bottom: 1px solid var(--surface-stroke);
+  z-index: 2;
+}
+.filter-header:first-child {
+  border-top-left-radius: var(--radius);
+  border-top-right-radius: var(--radius);
+}
+
+.filter-back {
+  flex-grow: 1;
+}
+
+.filter-reset {
+  width: 42px;
+  justify-content: center;
+}
+
+.filter-date-picker {
+  margin: -9px;
+}
+
+.filter-search {
+  position: sticky;
+  margin: -9px -9px 0;
+  padding: 9px;
+  background: linear-gradient(to bottom, var(--surface) 75%, transparent);
+  z-index: 1;
+}
+
+.filter-header + .menu-group .filter-search {
+  top: 52px;
+}
+
+.filter-bar {
+  display: flex;
+  flex-flow: row nowrap;
+  flex-grow: 1;
+  gap: 15px;
+}
+
+.filter-bar-search {
+  max-width: 300px;
 }.menu {
   display: flex;
   flex-flow: column;
@@ -1978,7 +2089,10 @@
 }
 
 .menu-item-icon {
+  margin-left: 2px;
+  margin-right: 2px;
   color: var(--foreground-prominent);
+  font-size: 16px;
 }
 
 .menu-item-label {
@@ -2954,85 +3068,6 @@
 .toggle-input::after {
   transition: 210ms var(--swift-out);
   transition-property: background, border-color, color, opacity, scale, translate, outline-color, outline-offset;
-}.filter {
-  max-height: 50dvh;
-  max-width: 100%;
-  padding: 9px;
-  width: 300px;
-  overflow: auto;
-  scrollbar-width: none;
-  transition: height 150ms var(--deceleration-curve);
-  z-index: 0;
-}
-.filter::-webkit-scrollbar {
-  display: none;
-  height: 0;
-  width: 0;
-}
-.filter .menu > :where(.divider, .separator) {
-  margin: 3px -9px;
-}
-.filter .menu > .menu-group > .menu-sub-header {
-  top: 51px;
-}
-.filter .menu > .menu-group:has(.filter-search) > .menu-sub-header {
-  top: 105px;
-}
-.filter .menu .menu-item-label {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.filter .pane-body {
-  margin: -9px;
-}
-
-.filter-header {
-  position: sticky;
-  margin: -9px -9px 3px;
-  padding: 9px;
-  top: -9px;
-  background: var(--surface);
-  border-bottom: 1px solid var(--surface-stroke);
-  z-index: 2;
-}
-.filter-header:first-child {
-  border-top-left-radius: var(--radius);
-  border-top-right-radius: var(--radius);
-}
-
-.filter-back {
-  flex-grow: 1;
-}
-
-.filter-reset {
-  width: 42px;
-  justify-content: center;
-}
-
-.filter-date-picker {
-  margin: -9px;
-}
-
-.filter-search {
-  position: sticky;
-  top: 52px;
-  margin: -9px -9px 0;
-  padding: 9px;
-  background: linear-gradient(to bottom, var(--surface) 75%, transparent);
-  z-index: 1;
-}
-
-.filter-bar {
-  display: flex;
-  flex-flow: row nowrap;
-  flex-grow: 1;
-  gap: 15px;
-}
-
-.filter-bar-search {
-  max-width: 300px;
 }.slider {
   position: relative;
   display: flex;
@@ -4006,7 +4041,7 @@ tfoot .table-cell {
 }
 
 .table-actions {
-  margin: -3px 0 -3px -3px;
+  margin: -4px 0 -4px -3px;
 }
 
 .table-fill {
@@ -4634,6 +4669,7 @@ tfoot .table-cell {
   display: flex;
   flex-flow: row nowrap;
   gap: 21px;
+  text-align: left;
 }
 
 .item-actions {
@@ -4643,30 +4679,39 @@ 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 {
-  font-size: 24px;
+  margin: 1px;
+  font-size: 20px;
 }
 
 .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 +4730,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 +5775,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);
@@ -5843,14 +5897,18 @@ tfoot .table-cell {
 
 .timeline-item-body {
   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;
 }
 
 .timeline-item-header {
   display: flex;
-  margin-bottom: 9px;
+  margin-bottom: -9px;
   flex-flow: column;
 }
 .timeline-item-header :is(strong) {