@flux-ui/components 3.1.2 → 3.1.4

package/dist/data/di.d.ts

@@ -11,6 +11,7 @@ export declare const FluxFilterInjectionKey: InjectionKey<FluxFilterInjection>;
 export declare const FluxFormCheckboxGroupInjectionKey: InjectionKey<FluxFormCheckboxGroupInjection>;
 export declare const FluxFormFieldInjectionKey: InjectionKey<FluxFormFieldInjection>;
 export declare const FluxFormRadioGroupInjectionKey: InjectionKey<FluxFormRadioGroupInjection>;
+export declare const FluxMenuFlyoutInjectionKey: InjectionKey<FluxMenuFlyoutInjection>;
 export declare const FluxSegmentedControlInjectionKey: InjectionKey<FluxSegmentedControlInjection>;
 export declare const FluxSplitViewInjectionKey: InjectionKey<FluxSplitViewInjection>;
 export declare const FluxTabBarInjectionKey: InjectionKey<FluxTabBarInjection>;
@@ -128,6 +129,40 @@ export type FluxFlyoutInjection = {
     readonly isOpen: Ref<boolean>;
     readonly isOpening: Ref<boolean>;
 };
+export type FluxMenuFlyoutPointer = {
+    readonly x: number;
+    readonly y: number;
+    readonly px: number;
+    readonly py: number;
+};
+export type FluxMenuFlyoutCone = {
+    readonly id: number;
+    readonly ax: number;
+    readonly ay: number;
+    readonly bx: number;
+    readonly by: number;
+    readonly cx: number;
+    readonly cy: number;
+};
+export type FluxMenuFlyoutEntry = {
+    getTrigger(): HTMLElement | null;
+    getPopup(): HTMLElement | null;
+    readonly isOpen: Ref<boolean>;
+    close(): void;
+};
+export type FluxMenuFlyoutInjection = {
+    readonly debugCone: Ref<boolean>;
+    readonly pointer: Readonly<Ref<FluxMenuFlyoutPointer>>;
+    readonly activeCone: Ref<FluxMenuFlyoutCone | null>;
+    readonly keyboardStack: Ref<number[]>;
+    register(entry: FluxMenuFlyoutEntry): void;
+    unregister(entry: FluxMenuFlyoutEntry): void;
+    closeOthers(self: FluxMenuFlyoutEntry): void;
+    hasOpenDescendant(self: FluxMenuFlyoutEntry): boolean;
+    isAimingAtOpenSubmenu(): boolean;
+    isInsidePopups(target: Node | null): boolean;
+    closeAll(): void;
+};
 export type FluxFormFieldInjection = {
     readonly id?: string;
     readonly labelId?: string;

package/dist/data/i18n.d.ts

@@ -4,10 +4,14 @@ export declare const english: {
     readonly 'flux.back': "Back";
     readonly 'flux.cancel': "Cancel";
     readonly 'flux.close': "Close";
+    readonly 'flux.collapseRow': "Collapse row";
+    readonly 'flux.expandRow': "Expand row";
     readonly 'flux.comingSoon': "Coming soon";
     readonly 'flux.continue': "Continue";
+    readonly 'flux.createOption': "Create \"{value}\"";
     readonly 'flux.customPeriod': "Custom period";
     readonly 'flux.delete': "Delete";
+    readonly 'flux.done': "Done";
     readonly 'flux.filter': "Filter";
     readonly 'flux.filterReset': "Reset filters";
     readonly 'flux.justNow': "Just now";
@@ -20,6 +24,7 @@ export declare const english: {
     readonly 'flux.previewClose': "Close preview";
     readonly 'flux.displayingOf': "{from}–{to} of {total}";
     readonly 'flux.showN': "Show {n}";
+    readonly 'flux.skip': "Skip";
     readonly 'flux.next': "Next";
     readonly 'flux.noItems': "There are no items (left).";
     readonly 'flux.pagination': "Pagination";
@@ -32,6 +37,7 @@ export declare const english: {
     readonly 'flux.sortAscending': "Ascending";
     readonly 'flux.sortDescending': "Descending";
     readonly 'flux.sortRemove': "Remove sorting";
+    readonly 'flux.submenu': "Submenu";
     readonly 'flux.today': "Today";
     readonly 'flux.selectMonth': "Select month";
     readonly 'flux.selectYear': "Select year";
@@ -41,6 +47,7 @@ export declare const english: {
     readonly 'flux.previousYears': "Previous years";
     readonly 'flux.nextYears': "Next years";
     readonly 'flux.allDay': "All day";
+    readonly 'flux.andNMore': "{n} more";
     readonly 'flux.grabbedAnnounce': "Item grabbed. Use arrow keys to move, Enter to drop, Escape to cancel.";
     readonly 'flux.releasedAnnounce': "Item released.";
     readonly 'flux.goToPage': "Go to page {page}";

package/dist/index.css

@@ -850,8 +850,9 @@
     border-color: var(--primary-800);
   }
 }
-.primary-button:active {
+.primary-button:active, .primary-button.is-active {
   background: var(--primary-800);
+  box-shadow: none;
   scale: 0.9875;
 }
 .primary-button .spinner {
@@ -876,8 +877,9 @@
     background: var(--surface-hover);
   }
 }
-.secondary-button:active {
+.secondary-button:active, .secondary-button.is-active {
   background: var(--surface-active);
+  box-shadow: none;
   scale: 0.9875;
 }
 
@@ -898,8 +900,9 @@
     background: var(--surface-hover);
   }
 }
-.destructive-button:active {
+.destructive-button:active, .destructive-button.is-active {
   background: var(--surface-active);
+  box-shadow: none;
   scale: 0.9875;
 }
 .destructive-button .spinner {
@@ -931,8 +934,9 @@
     background: var(--surface-hover);
   }
 }
-.base-link-button:active {
+.base-link-button:active, .base-link-button.is-active {
   background: var(--surface-active);
+  box-shadow: none;
   scale: 0.9875;
 }
 
@@ -1878,6 +1882,25 @@
 .persona-details :is(span) {
   color: var(--foreground);
   font-size: 14px;
+}.avatar-group {
+  display: inline-flex;
+  align-items: center;
+  flex-flow: row nowrap;
+}
+
+.avatar-group-item {
+  position: relative;
+  display: inline-flex;
+  margin-left: calc(var(--overlap, 0.3) * -1em);
+  border-radius: 0.3em;
+  box-shadow: 0 0 0 0.125em var(--gray-25);
+  transition: translate 0.2s var(--swift-out);
+}
+.avatar-group-item:first-child {
+  margin-left: 0;
+}
+.avatar-group-item:hover {
+  z-index: 1;
 }.badge {
   display: inline-flex;
   height: 28px;
@@ -4963,6 +4986,53 @@
 .form-toggle-input::after {
   transition: 210ms var(--swift-out);
   transition-property: background, border-color, color, opacity, scale, translate, outline-color, outline-offset;
+}
+
+.form-tags-input {
+  display: flex;
+  height: unset;
+  min-height: 42px;
+  padding: 4px 6px;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 6px;
+  cursor: text;
+}
+.form-tags-input:not(.form-tags-input-disabled) {
+  outline: 2px solid rgb(from var(--primary-600) r g b/0);
+  outline-offset: 0;
+}
+.form-tags-input:not(.form-tags-input-disabled):focus-visible, .form-tags-input:not(.form-tags-input-disabled):focus-within {
+  outline-color: var(--primary-600);
+  outline-offset: -1px;
+}
+
+.form-tags-input-enabled {
+}
+
+.form-tags-input-disabled {
+  background: var(--gray-100);
+  cursor: not-allowed;
+}
+
+.form-tags-input-field {
+  height: 30px;
+  min-width: 60px;
+  flex: 1 1 60px;
+  background: none;
+  border: 0;
+  color: inherit;
+  font: inherit;
+  outline: 0;
+}
+.form-tags-input-field::placeholder {
+  color: var(--foreground-secondary);
+}
+.form-tags-input-field:disabled {
+  cursor: not-allowed;
+}
+
+.form-tags-input-popup {
 }.filter {
   max-height: 50dvh;
   max-width: 100%;
@@ -5097,7 +5167,6 @@
 .menu-group-vertical {
   display: flex;
   flex-flow: column;
-  gap: 1px;
 }
 
 .menu-item {
@@ -5183,6 +5252,10 @@
   margin-left: 33px;
 }
 
+.menu-cone-active .menu-item {
+  pointer-events: none;
+}
+
 .menu-collapsible {
   display: flex;
   flex-flow: column;
@@ -5818,6 +5891,20 @@
 .color-select-check :is(path) {
   stroke: currentColor;
   stroke-width: 54px;
+}.context-menu {
+  display: contents;
+}
+
+.context-menu-popup {
+  position: fixed;
+  top: 0;
+  left: 0;
+  min-width: 270px;
+  max-height: max(330px, 50dvh);
+  overflow: auto;
+  box-shadow: var(--shadow-md);
+  translate: var(--x) var(--y);
+  z-index: 10000;
 }.pagination {
   display: flex;
   gap: 1px;
@@ -6111,6 +6198,115 @@ tfoot .table-cell {
 
 :not(.base-pane-structure) > .table .table-cell:not(.is-bordered):last-child .table-cell-content {
   padding-right: 0;
+}
+
+.table-cell-expand {
+  width: 0;
+}
+
+.table-expand-toggle svg {
+  transition: rotate 0.2s var(--swift-out);
+}
+
+.table-expand-toggle.is-expanded svg {
+  rotate: 90deg;
+}
+
+.table-expand-content {
+  padding: 12px 15px;
+}.description-list {
+  display: flex;
+  flex-flow: column;
+  gap: 12px;
+}
+
+.description-list-header {
+  color: var(--foreground-secondary);
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.description-list-items {
+  display: flex;
+  margin: 0;
+  flex-flow: column;
+  gap: 12px;
+}
+
+.description-item {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+}
+
+.description-item.is-stacked {
+  gap: 2px;
+  align-items: stretch;
+  flex-flow: column;
+}
+
+.description-item.is-stacked .description-item-value {
+  margin-left: 0;
+  justify-content: flex-start;
+  text-align: left;
+}
+
+.description-item-term {
+  display: flex;
+  gap: 9px;
+  align-items: center;
+  color: var(--foreground);
+  font-size: 15px;
+}
+
+.description-item-icon {
+  flex-shrink: 0;
+  color: var(--foreground);
+  font-size: 16px;
+}
+
+.description-item-label {
+  overflow-wrap: anywhere;
+}
+
+.description-item-value {
+  display: flex;
+  margin: 0;
+  margin-left: auto;
+  gap: 6px;
+  align-items: center;
+  color: var(--foreground-prominent);
+  font-size: 15px;
+  font-weight: 600;
+  text-align: right;
+  overflow-wrap: anywhere;
+}
+
+.description-list-items.is-horizontal {
+  gap: 0;
+  flex-flow: row;
+}
+.description-list-items.is-horizontal .description-item {
+  gap: 6px;
+  align-items: stretch;
+  flex: 1 1 0;
+  flex-flow: column;
+  padding-right: 24px;
+  padding-left: 24px;
+  border-left: 1px solid var(--gray-100);
+}
+.description-list-items.is-horizontal .description-item:first-child {
+  padding-left: 0;
+  border-left: 0;
+}
+.description-list-items.is-horizontal .description-item-term {
+  font-size: 14px;
+}
+.description-list-items.is-horizontal .description-item-value {
+  margin-left: 0;
+  justify-content: flex-start;
+  font-weight: 500;
+  text-align: left;
 }.drop-zone {
   --dz-fill: transparent;
   --dz-stroke: transparent;
@@ -6446,6 +6642,52 @@ tfoot .table-cell {
   100% {
     aspect-ratio: var(--aspect-ratio);
   }
+}.form-rating {
+  display: inline-flex;
+  gap: 0.15em;
+  font-size: 24px;
+  line-height: 1;
+  border-radius: 4px;
+  outline: 2px solid rgb(from var(--primary-600) r g b/0);
+  outline-offset: 0;
+}
+.form-rating:focus-visible {
+  outline-color: var(--primary-600);
+  outline-offset: 4px;
+}
+.form-rating.is-disabled {
+  opacity: 0.6;
+}
+
+.form-rating-star {
+  position: relative;
+  display: inline-flex;
+  padding: 0;
+  border: 0;
+  background: none;
+  line-height: 0;
+  cursor: pointer;
+}
+.form-rating-star:disabled {
+  cursor: default;
+}
+
+.form-rating-star-empty {
+  color: var(--gray-300);
+}
+
+.form-rating-star-full {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  color: var(--warning-400);
+  clip-path: inset(0 calc((1 - var(--fill, 0)) * 100%) 0 0);
+  pointer-events: none;
+}
+
+.is-invalid .form-rating-star-empty {
+  color: var(--danger-200);
 }.tree-view-select-value {
   margin-left: 6px;
   overflow: hidden;
@@ -6697,6 +6939,51 @@ tfoot .table-cell {
 
 .info-body {
   align-items: center;
+}.inline-edit {
+  display: flex;
+  gap: 6px;
+  align-items: flex-start;
+}
+
+.inline-edit-field {
+  min-width: 0;
+  flex: 1 1 auto;
+}
+
+.inline-edit-actions {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.inline-edit-display {
+  display: inline-flex;
+  min-height: 30px;
+  padding: 3px 6px;
+  align-items: center;
+  border-radius: 6px;
+  color: var(--foreground);
+  line-height: 21px;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+.inline-edit-display.is-interactive {
+  cursor: text;
+  outline: 2px solid rgb(from var(--primary-600) r g b/0);
+  outline-offset: 0;
+}
+.inline-edit-display.is-interactive:focus-visible {
+  outline-color: var(--primary-600);
+  outline-offset: 2px;
+}
+@media (hover: hover) {
+  .inline-edit-display.is-interactive:hover {
+    background: var(--surface-hover);
+  }
+}
+.inline-edit-display.is-placeholder {
+  color: var(--foreground-secondary);
 }.kanban {
   position: relative;
   display: grid;
@@ -6956,6 +7243,39 @@ tfoot .table-cell {
 
 .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));
+}.menu-flyout-popup {
+  position: fixed;
+  top: 0;
+  left: 0;
+  min-width: 270px;
+  max-height: max(330px, 50dvh);
+  overflow: auto;
+  box-shadow: var(--shadow-md);
+  translate: var(--x) var(--y);
+  z-index: 10000;
+}
+
+.menu-flyout-trigger-open {
+  background: var(--gray-100);
+}
+
+.menu-flyout-cone-debug {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  pointer-events: none;
+  z-index: 20000;
+}
+.menu-flyout-cone-debug polygon {
+  fill: var(--primary-500);
+  fill-opacity: 0.15;
+  stroke: var(--primary-500);
+  stroke-width: 1.5;
+}
+.menu-flyout-cone-debug circle {
+  fill: var(--danger-500);
 }.notice {
   display: flex;
   padding: 12px 15px;
@@ -8519,6 +8839,114 @@ tfoot .table-cell {
 
 .pane-header + .toolbar-flat {
   margin-top: 18px;
+}.tour {
+  position: fixed;
+  inset: 0;
+  pointer-events: auto;
+  z-index: 9999;
+}
+
+.tour-spotlight {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: var(--w);
+  height: var(--h);
+  border-radius: 8px;
+  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.55);
+  pointer-events: none;
+  translate: var(--x) var(--y);
+  transition: translate 0.25s var(--swift-out), width 0.25s var(--swift-out), height 0.25s var(--swift-out);
+}
+
+.tour-popover {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 321px;
+  max-width: calc(100vw - 24px);
+  translate: var(--x) var(--y);
+  z-index: 1;
+}
+.tour-popover.is-stepping {
+  transition: translate 0.25s var(--swift-out);
+}
+
+.tour-pane {
+  overflow: hidden;
+}
+
+.tour-body-viewport {
+  position: relative;
+  overflow: hidden;
+  transition: height 0.25s var(--swift-out);
+}
+
+.tour-body {
+  display: flex;
+  padding: 15px 18px;
+  flex-flow: column;
+  gap: 6px;
+  transition: opacity 0.15s var(--swift-out);
+}
+.tour-body.v-leave-active {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+}
+.tour-body.v-enter-from, .tour-body.v-leave-to {
+  opacity: 0;
+}
+
+.tour-title {
+  color: var(--foreground-prominent);
+  font-size: 15px;
+  font-weight: 600;
+}
+
+.tour-content {
+  font-size: 14px;
+  line-height: 21px;
+  color: var(--foreground);
+}
+
+.tour-footer {
+  display: flex;
+  padding: 12px 18px;
+  gap: 6px;
+  align-items: center;
+  border-top: 1px solid var(--surface-stroke);
+}
+
+.tour-progress {
+  color: var(--foreground-secondary);
+  font-size: 13px;
+}
+
+.tour-skip {
+  font: inherit;
+  font-size: 13px;
+  margin-right: 12px;
+  padding: 0;
+  cursor: pointer;
+  transition: color 0.15s var(--swift-out);
+  color: var(--foreground-secondary);
+  border: 0;
+  background: none;
+}
+@media (hover: hover) {
+  .tour-skip:hover {
+    color: var(--foreground);
+  }
+}
+.tour-skip {
+  outline: 2px solid rgb(from var(--primary-600) r g b/0);
+  outline-offset: 0;
+}
+.tour-skip:focus-visible {
+  outline-color: var(--primary-600);
+  outline-offset: 2px;
 }.tree-view {
   display: flex;
   flex-flow: column;
@@ -8535,4 +8963,20 @@ tfoot .table-cell {
 }
 .tree-node.is-highlighted {
   background: var(--surface-hover);
+}.virtual-scroller {
+  position: relative;
+  height: 100%;
+  overflow: auto;
+}
+
+.virtual-scroller-spacer {
+  position: relative;
+  width: 100%;
+}
+
+.virtual-scroller-window {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
 }/*$vite$:1*/