@flux-ui/components 3.1.0 → 3.1.3

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

@@ -1878,6 +1878,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 +4982,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 +5163,6 @@
 .menu-group-vertical {
   display: flex;
   flex-flow: column;
-  gap: 1px;
 }
 
 .menu-item {
@@ -5183,6 +5248,10 @@
   margin-left: 33px;
 }
 
+.menu-cone-active .menu-item {
+  pointer-events: none;
+}
+
 .menu-collapsible {
   display: flex;
   flex-flow: column;
@@ -5637,6 +5706,7 @@
 }
 
 .separator {
+  flex-shrink: 0;
   background: var(--gray-200);
 }
 
@@ -5817,6 +5887,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;
@@ -6110,6 +6194,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;
@@ -6445,6 +6638,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;
@@ -6696,6 +6935,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;
@@ -6955,6 +7239,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;
@@ -8518,6 +8835,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;
@@ -8534,4 +8959,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*/