@motifx-community/ui 0.1.0-beta.0 → 0.1.0-beta.1

package/dist/locales/en.json

@@ -8,6 +8,7 @@
   "close": "Close",
   "loading": "Loading…",
   "noItems": "No items",
+  "notInList": "Not found in the list",
   "search": "Search",
   "notifications": "Notifications",
   "previousMonth": "Previous month",

package/dist/locales/tr.json

@@ -8,6 +8,7 @@
   "close": "Kapat",
   "loading": "Yükleniyor…",
   "noItems": "Öğe yok",
+  "notInList": "Listede bulunamadı",
   "search": "Ara",
   "notifications": "Bildirimler",
   "previousMonth": "Önceki ay",

package/dist/parts/data/DataItems.d.ts

@@ -1,6 +1,7 @@
 import { type Event as MotifEvent, type IDisposable } from '@motifx/core';
 import type { data } from '@motifx-community/data';
 import type { ItemSource } from '../list/item-source';
+import type { KeyedItem } from './keyed-item';
 type Source<T> = data.DataSource<T, unknown>;
 /**
  * The items of a list control, from an array in memory or from a `DataSource` of the data layer
@@ -42,6 +43,10 @@ export declare class DataItems<T> implements ItemSource<T>, IDisposable {
      */
     find(value: unknown, valueOf: (item: T) => unknown, same?: (a: unknown, b: unknown) => boolean): Promise<T | undefined>;
     findLoaded(value: unknown, valueOf: (item: T) => unknown, same?: (a: unknown, b: unknown) => boolean): T | undefined;
+    /** What is known of the item `find` asked the data source for: still asked for, found, or not in the source. */
+    known(value: unknown): KeyedItem<T> | undefined;
+    /** Asks the data source again for the item of `value` after its request failed. */
+    retry(value: unknown): Promise<T | undefined>;
     reload(): Promise<void>;
     dispose(): void;
     private detach;

package/dist/parts/data/KeyedItems.d.ts

@@ -52,6 +52,8 @@ export declare class KeyedItems<T = unknown> {
     get(key: unknown): KeyedItem<T> | undefined;
     /** Asks for the keys not known yet; resolves once every one of them is found or missing. */
     request(keys: Iterable<unknown>): Promise<void>;
+    /** Asks again for the keys whose last request failed (and for those never asked for). */
+    retry(keys: Iterable<unknown>): Promise<void>;
     /** Keeps what an editor chose for a key: its item, or its text. It shows at once, without a request. */
     remember(key: unknown, itemOrText: T | string): void;
     /** Items among those known whose text is exactly `text` (case aside, in the locale). */

package/dist/styles.css

@@ -404,8 +404,11 @@
     --mx-drop-down-field-box-cursor: default;
     --mx-drop-down-search-variant: outline;
     --mx-drop-down-search-size: sm;
+    --mx-drop-down-value-missing-text-decoration: underline;
     --mx-drop-down-chevron-icon: var(--mx-icon-chevron-down);
     --mx-drop-down-chevron-open-rotate: 0.5turn;
+    --mx-drop-down-spinner-border-end-color: rgb(0 0 0 / 0);
+    --mx-drop-down-spinner-shape-display: initial;
     --mx-field-width: 16rem;
     --mx-field-variant: outline;
     --mx-field-label-mode: top;
@@ -1695,6 +1698,9 @@
     --mx-drop-down-field-frame-focus-border-width: var(--mx-border-width-1);
     --mx-drop-down-field-frame-border-bottom-color: var(--mx-color-stroke-control-default);
     --mx-drop-down-chevron-size: var(--mx-icon-size-sm);
+    --mx-drop-down-spinner-size: var(--mx-icon-size-sm);
+    --mx-drop-down-spinner-border-width: var(--mx-border-width-2);
+    --mx-drop-down-spinner-radius: var(--mx-radius-full);
     --mx-field-border-width: var(--mx-border-width-1);
     --mx-field-gap: var(--mx-space-2);
     --mx-field-label-gap: var(--mx-space-1);
@@ -3014,8 +3020,10 @@
     --mx-drop-down-field-box-pressed-color: var(--mx-color-fg-primary);
     --mx-drop-down-field-frame-focus-border-bottom-color: var(--mx-color-accent-solid);
     --mx-drop-down-value-placeholder-color: var(--mx-color-fg-secondary);
+    --mx-drop-down-value-missing-color: var(--mx-color-fg-secondary);
     --mx-drop-down-chevron-color: var(--mx-color-fg-secondary);
     --mx-drop-down-chevron-disabled-color: var(--mx-color-fg-disabled);
+    --mx-drop-down-spinner-color: var(--mx-color-fg-secondary);
     --mx-field-box-bg: var(--mx-color-fill-control-default);
     --mx-field-box-color: var(--mx-color-fg-primary);
     --mx-field-box-hover-bg: var(--mx-color-fill-control-secondary);
@@ -4562,6 +4570,10 @@
     --mx-drop-down-field-box-shadow: 0px 0px 0px 0px rgb(0 0 0 / 0);
     --mx-drop-down-field-frame-focus-border-width: 3px;
     --mx-drop-down-search-variant: filled;
+    --mx-drop-down-spinner-border-width: initial;
+    --mx-drop-down-spinner-border-end-color: initial;
+    --mx-drop-down-spinner-radius: initial;
+    --mx-drop-down-spinner-shape-display: block;
     --mx-field-variant: filled;
     --mx-field-label-mode: floating;
     --mx-field-notch: cut;
@@ -6588,11 +6600,19 @@
   .mx-drop-down, .mx-drop-down__popup {
     --_drop-down-popup-gap: var(--mx-drop-down-popup-gap);
     --_drop-down-value-placeholder-color: var(--mx-drop-down-value-placeholder-color);
+    --_drop-down-value-missing-color: var(--mx-drop-down-value-missing-color);
+    --_drop-down-value-missing-text-decoration: var(--mx-drop-down-value-missing-text-decoration);
     --_drop-down-chevron-size: var(--mx-drop-down-chevron-size);
     --_drop-down-chevron-color: var(--mx-drop-down-chevron-color);
     --_drop-down-chevron-icon: var(--mx-drop-down-chevron-icon);
     --_drop-down-chevron-disabled-color: var(--mx-drop-down-chevron-disabled-color);
+    --_drop-down-spinner-size: var(--mx-drop-down-spinner-size);
+    --_drop-down-spinner-border-width: var(--mx-drop-down-spinner-border-width);
+    --_drop-down-spinner-border-end-color: var(--mx-drop-down-spinner-border-end-color);
+    --_drop-down-spinner-radius: var(--mx-drop-down-spinner-radius);
+    --_drop-down-spinner-color: var(--mx-drop-down-spinner-color);
     --_drop-down-chevron-open-rotate: var(--mx-drop-down-chevron-open-rotate);
+    --_drop-down-spinner-shape-display: var(--mx-drop-down-spinner-shape-display);
   }
 
   .mx-field {
@@ -7821,7 +7841,7 @@
     --_slider-stop-active-bg: var(--mx-slider-stop-active-bg);
   }
 
-  .mx-spinner, .mx-button__spinner {
+  .mx-spinner, .mx-button__spinner, .mx-drop-down__spinner {
     --_spinner-gap: var(--mx-spinner-gap);
     --_spinner-cover-padding: var(--mx-spinner-cover-padding);
     --_spinner-cover-background: var(--mx-spinner-cover-background);
@@ -10766,8 +10786,10 @@
 }
 
 /* DropDown: the field shows the chosen item; the list opens on a popup below it. The box's pointer
-   and the popup's search box are places. Only the layout is here: the chosen item's text and the
-   arrow are units of the drop-down's schema (`$units`), painted by units.css. */
+   and the popup's search box are places. Only the layout is here: the chosen item's text, the
+   arrow and the spinner are units of the drop-down's schema (`$units`), painted by units.css.
+   JS writes data-loading on the root while the value's item is asked for, data-missing on the
+   text when the data source does not have the key. */
 @layer mx.components {
   .mx-drop-down__display {
     display: flex;
@@ -10796,6 +10818,42 @@
     transition: rotate var(--mx-motion-duration-fast) var(--mx-motion-easing-standard);
   }
 
+  /* While the value's item is asked for: the spinner in the arrow's place, no clear button. */
+  .mx-drop-down__spinner {
+    display: none;
+    position: relative;
+    flex: none;
+    animation: mx-drop-down-spin var(--_spinner-duration) linear infinite;
+  }
+
+  /* A shape that becomes the next one, where the language draws the spinner as one (the spinner's shapes). */
+  .mx-drop-down__spinner::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    clip-path: var(--_spinner-shape-1);
+    animation: mx-spinner-morph var(--_spinner-morph-duration) infinite;
+  }
+
+  .mx-drop-down[data-loading] > :where(.mx-field__box) > * > .mx-drop-down__spinner {
+    display: block;
+  }
+
+  .mx-drop-down[data-loading] > :where(.mx-field__box) > * > :is(.mx-drop-down__chevron, .mx-drop-down__clear) {
+    display: none;
+  }
+
+  /* A key the data source does not have: the key itself, muted and underlined (`missing`); the title tells why. */
+  .mx-drop-down__text[data-missing] {
+    text-decoration-style: dotted;
+  }
+
+  @keyframes mx-drop-down-spin {
+    to {
+      rotate: 1turn;
+    }
+  }
+
   /* The search box stays; the list scrolls. */
   .mx-drop-down__popup {
     display: flex;
@@ -21412,6 +21470,11 @@
     color: var(--_drop-down-value-placeholder-color, inherit);
   }
 
+  .mx-drop-down__text[data-missing] {
+    color: var(--_drop-down-value-missing-color, inherit);
+    text-decoration-line: var(--_drop-down-value-missing-text-decoration, none);
+  }
+
   .mx-drop-down__chevron {
     inline-size: var(--_drop-down-chevron-size, auto);
     block-size: var(--_drop-down-chevron-size, auto);
@@ -21427,6 +21490,27 @@
     color: var(--_drop-down-chevron-disabled-color, var(--_drop-down-chevron-color, inherit));
   }
 
+  .mx-drop-down__spinner {
+    inline-size: var(--_drop-down-spinner-size, auto);
+    block-size: var(--_drop-down-spinner-size, auto);
+    border-style: solid;
+    border-block-start-width: var(--_drop-down-spinner-border-width, 0px);
+    border-inline-end-width: var(--_drop-down-spinner-border-width, 0px);
+    border-block-end-width: var(--_drop-down-spinner-border-width, 0px);
+    border-inline-start-width: var(--_drop-down-spinner-border-width, 0px);
+    border-inline-end-color: var(--_drop-down-spinner-border-end-color, currentcolor);
+    border-start-start-radius: var(--_drop-down-spinner-radius, 0px);
+    border-start-end-radius: var(--_drop-down-spinner-radius, 0px);
+    border-end-start-radius: var(--_drop-down-spinner-radius, 0px);
+    border-end-end-radius: var(--_drop-down-spinner-radius, 0px);
+    color: var(--_drop-down-spinner-color, inherit);
+  }
+
+  .mx-drop-down__spinner::before {
+    display: var(--_drop-down-spinner-shape-display, none);
+    background-color: currentcolor;
+  }
+
   :where(.mx-field) > .mx-field__box {
     min-block-size: var(--_box-height);
     padding-inline-end: var(--_padding-end);

package/dist/tokens/index.d.ts

@@ -6351,6 +6351,16 @@ export declare const tokens: {
         readonly type: 'color';
         readonly layer: 'component';
     };
+    readonly 'drop-down.value.missing.color': {
+        readonly cssVar: '--mx-drop-down-value-missing-color';
+        readonly type: 'color';
+        readonly layer: 'component';
+    };
+    readonly 'drop-down.value.missing.text-decoration': {
+        readonly cssVar: '--mx-drop-down-value-missing-text-decoration';
+        readonly type: 'keyword';
+        readonly layer: 'component';
+    };
     readonly 'drop-down.chevron.size': {
         readonly cssVar: '--mx-drop-down-chevron-size';
         readonly type: 'dimension';
@@ -6376,6 +6386,36 @@ export declare const tokens: {
         readonly type: 'color';
         readonly layer: 'component';
     };
+    readonly 'drop-down.spinner.size': {
+        readonly cssVar: '--mx-drop-down-spinner-size';
+        readonly type: 'dimension';
+        readonly layer: 'component';
+    };
+    readonly 'drop-down.spinner.border-width': {
+        readonly cssVar: '--mx-drop-down-spinner-border-width';
+        readonly type: 'dimension';
+        readonly layer: 'component';
+    };
+    readonly 'drop-down.spinner.border-end-color': {
+        readonly cssVar: '--mx-drop-down-spinner-border-end-color';
+        readonly type: 'color';
+        readonly layer: 'component';
+    };
+    readonly 'drop-down.spinner.radius': {
+        readonly cssVar: '--mx-drop-down-spinner-radius';
+        readonly type: 'dimension';
+        readonly layer: 'component';
+    };
+    readonly 'drop-down.spinner.color': {
+        readonly cssVar: '--mx-drop-down-spinner-color';
+        readonly type: 'color';
+        readonly layer: 'component';
+    };
+    readonly 'drop-down.spinner-shape.display': {
+        readonly cssVar: '--mx-drop-down-spinner-shape-display';
+        readonly type: 'keyword';
+        readonly layer: 'component';
+    };
     readonly 'field.width': {
         readonly cssVar: '--mx-field-width';
         readonly type: 'dimension';

package/dist/tokens/index.js

@@ -6347,6 +6347,16 @@ var componentTokens = {
 		type: "color",
 		layer: "component"
 	},
+	"drop-down.value.missing.color": {
+		cssVar: "--mx-drop-down-value-missing-color",
+		type: "color",
+		layer: "component"
+	},
+	"drop-down.value.missing.text-decoration": {
+		cssVar: "--mx-drop-down-value-missing-text-decoration",
+		type: "keyword",
+		layer: "component"
+	},
 	"drop-down.chevron.size": {
 		cssVar: "--mx-drop-down-chevron-size",
 		type: "dimension",
@@ -6372,6 +6382,36 @@ var componentTokens = {
 		type: "color",
 		layer: "component"
 	},
+	"drop-down.spinner.size": {
+		cssVar: "--mx-drop-down-spinner-size",
+		type: "dimension",
+		layer: "component"
+	},
+	"drop-down.spinner.border-width": {
+		cssVar: "--mx-drop-down-spinner-border-width",
+		type: "dimension",
+		layer: "component"
+	},
+	"drop-down.spinner.border-end-color": {
+		cssVar: "--mx-drop-down-spinner-border-end-color",
+		type: "color",
+		layer: "component"
+	},
+	"drop-down.spinner.radius": {
+		cssVar: "--mx-drop-down-spinner-radius",
+		type: "dimension",
+		layer: "component"
+	},
+	"drop-down.spinner.color": {
+		cssVar: "--mx-drop-down-spinner-color",
+		type: "color",
+		layer: "component"
+	},
+	"drop-down.spinner-shape.display": {
+		cssVar: "--mx-drop-down-spinner-shape-display",
+		type: "keyword",
+		layer: "component"
+	},
 	"field.width": {
 		cssVar: "--mx-field-width",
 		type: "dimension",