@ixfx/components 0.8.5 → 0.8.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (65) hide show
  1. package/bundle/index.d.ts.map +1 -1
  2. package/bundle/index.js +4 -13
  3. package/bundle/index.js.map +1 -1
  4. package/dist/ac-text.d.ts +1 -1
  5. package/dist/{ac-token-TCLAZeVg.d.ts → ac-token--_vCHXWw.d.ts} +2 -2
  6. package/dist/{ac-token-TCLAZeVg.d.ts.map → ac-token--_vCHXWw.d.ts.map} +1 -1
  7. package/dist/ac-token.d.ts +1 -1
  8. package/dist/button.d.ts +1 -1
  9. package/dist/button.d.ts.map +1 -1
  10. package/dist/colour-picker.d.ts +1 -1
  11. package/dist/crumbs.d.ts +1 -1
  12. package/dist/{data-grid-DCt0oack.d.ts → data-grid-D-z7bx5-.d.ts} +2 -2
  13. package/dist/{data-grid-DCt0oack.d.ts.map → data-grid-D-z7bx5-.d.ts.map} +1 -1
  14. package/dist/data-grid.d.ts +1 -1
  15. package/dist/{detail-list-CqRzhFnv.d.ts → detail-list-_ZJHYEBr.d.ts} +2 -2
  16. package/dist/{detail-list-CqRzhFnv.d.ts.map → detail-list-_ZJHYEBr.d.ts.map} +1 -1
  17. package/dist/detail-list.d.ts +1 -1
  18. package/dist/{grouped-item-lister-CEZ72VOs.d.ts → grouped-item-lister-fdZHVxFM.d.ts} +2 -2
  19. package/dist/{grouped-item-lister-CEZ72VOs.d.ts.map → grouped-item-lister-fdZHVxFM.d.ts.map} +1 -1
  20. package/dist/grouped-item-lister.d.ts +1 -1
  21. package/dist/{icon-DR_3rSyZ.d.ts → icon-CDGprSdE.d.ts} +2 -2
  22. package/dist/icon-CDGprSdE.d.ts.map +1 -0
  23. package/dist/icons.d.ts +2 -2
  24. package/dist/{index-C59-JEPl.d.ts → index-9AhaHIT2.d.ts} +3 -3
  25. package/dist/{index-C59-JEPl.d.ts.map → index-9AhaHIT2.d.ts.map} +1 -1
  26. package/dist/{index-DsjpDksO.d.ts → index-CS9yM8L-.d.ts} +2 -2
  27. package/dist/{index-DsjpDksO.d.ts.map → index-CS9yM8L-.d.ts.map} +1 -1
  28. package/dist/{index-BUB5SICW.d.ts → index-CoqtMSd9.d.ts} +2 -2
  29. package/dist/{index-BUB5SICW.d.ts.map → index-CoqtMSd9.d.ts.map} +1 -1
  30. package/dist/{index-CJ5fshD3.d.ts → index-UvnoZUAo.d.ts} +2 -2
  31. package/dist/{index-CJ5fshD3.d.ts.map → index-UvnoZUAo.d.ts.map} +1 -1
  32. package/dist/{index-BOUaDIW-.d.ts → index-tq6f8007.d.ts} +2 -2
  33. package/dist/{index-BOUaDIW-.d.ts.map → index-tq6f8007.d.ts.map} +1 -1
  34. package/dist/index.d.ts +14 -14
  35. package/dist/index.d.ts.map +1 -1
  36. package/dist/index.js +4 -13
  37. package/dist/index.js.map +1 -1
  38. package/dist/{labelled-input-base-Dp_9KP0G.d.ts → labelled-input-base-DiTme1JO.d.ts} +2 -2
  39. package/dist/{labelled-input-base-Dp_9KP0G.d.ts.map → labelled-input-base-DiTme1JO.d.ts.map} +1 -1
  40. package/dist/labelled-radial-input.d.ts +2 -2
  41. package/dist/labelled-radial-input.d.ts.map +1 -1
  42. package/dist/labelled-range-input.d.ts +1 -1
  43. package/dist/labelled-slider-input.d.ts +1 -1
  44. package/dist/{menu-item-ZmkXNjek.d.ts → menu-item-CZi9vy5O.d.ts} +2 -2
  45. package/dist/{menu-item-ZmkXNjek.d.ts.map → menu-item-CZi9vy5O.d.ts.map} +1 -1
  46. package/dist/menu.d.ts +2 -2
  47. package/dist/panel.d.ts +1 -1
  48. package/dist/{split-layout-C5SYbDrq.d.ts → split-layout-JK3xWVX2.d.ts} +2 -2
  49. package/dist/{split-layout-C5SYbDrq.d.ts.map → split-layout-JK3xWVX2.d.ts.map} +1 -1
  50. package/dist/split-layout.d.ts +1 -1
  51. package/dist/{tab-list-DbMIL520.d.ts → tab-list-CGyPt07Z.d.ts} +2 -2
  52. package/dist/{tab-list-DbMIL520.d.ts.map → tab-list-CGyPt07Z.d.ts.map} +1 -1
  53. package/dist/tabs.d.ts +1 -1
  54. package/dist/{titlebar-B5zSTZnF.d.ts → titlebar-Tqu-VvMU.d.ts} +2 -2
  55. package/dist/{titlebar-B5zSTZnF.d.ts.map → titlebar-Tqu-VvMU.d.ts.map} +1 -1
  56. package/dist/titlebar.d.ts +1 -1
  57. package/docs-user/README.md +3 -0
  58. package/docs-user/bottom-drawer.md +150 -0
  59. package/docs-user/index.json +17 -2
  60. package/docs-user/llms.txt +3 -0
  61. package/docs-user/pan-text.md +103 -0
  62. package/docs-user/text-shimmer.md +56 -0
  63. package/llms.txt +3 -0
  64. package/package.json +1 -1
  65. package/dist/icon-DR_3rSyZ.d.ts.map +0 -1
@@ -33,9 +33,9 @@ declare abstract class LabelledInputBase extends LitElement {
33
33
  value: number;
34
34
  }>) => void;
35
35
  protected _syncValue(v: number): void;
36
- protected _renderEditableNumber(): import("lit").TemplateResult<1> | typeof nothing;
36
+ protected _renderEditableNumber(): typeof nothing | import("lit").TemplateResult<1>;
37
37
  updated(changedProperties: Map<string, unknown>): void;
38
38
  }
39
39
  //#endregion
40
40
  export { LabelledInputBase as t };
41
- //# sourceMappingURL=labelled-input-base-Dp_9KP0G.d.ts.map
41
+ //# sourceMappingURL=labelled-input-base-DiTme1JO.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"labelled-input-base-Dp_9KP0G.d.ts","names":[],"sources":["../src/mixins/labelled-input-base.ts"],"mappings":";;uBAIsB,0BAA0B;EAClC;EAEgB;EACA;EACA;EACA;EACA;EAC+B;EAEI;EACC;EAEjB;YAE5B;YACA;YACA,cAAc;UAEzB;UACA;oBAEU;MAEd,cAAc;MAId,UAAU,SAAS;gBAIT;EAIL;EAMA;YAMC,cAAc,SAAS;YAcvB,sBAAuB,GAAG;IAAc;;YAWxC,qBAAsB,GAAG;IAAc;;YAavC,qBAAsB,GAAG;IAAc;;YAYvC,WAAW;YAYX,uCAAqB,2BAAA;EAuBtB,QAAQ,mBAAmB"}
1
+ {"version":3,"file":"labelled-input-base-DiTme1JO.d.ts","names":[],"sources":["../src/mixins/labelled-input-base.ts"],"mappings":";;uBAIsB,0BAA0B;EAClC;EAEgB;EACA;EACA;EACA;EACA;EAC+B;EAEI;EACC;EAEjB;YAE5B;YACA;YACA,cAAc;UAEzB;UACA;oBAEU;MAEd,cAAc;MAId,UAAU,SAAS;gBAIT;EAIL;EAMA;YAMC,cAAc,SAAS;YAcvB,sBAAuB,GAAG;IAAc;;YAWxC,qBAAsB,GAAG;IAAc;;YAavC,qBAAsB,GAAG;IAAc;;YAYvC,WAAW;YAYX,gCAAqB,wBAAA;EAuBtB,QAAQ,mBAAmB"}
@@ -1,4 +1,4 @@
1
- import { t as LabelledInputBase } from "./labelled-input-base-Dp_9KP0G.js";
1
+ import { t as LabelledInputBase } from "./labelled-input-base-DiTme1JO.js";
2
2
  import { i as MarkerStyle, l as ValueMode } from "./radial-input-DU6t2hYO.js";
3
3
  import { CSSResultGroup, nothing } from "lit";
4
4
  //#region src/labelled-radial-input/labelled-radial-input.d.ts
@@ -19,7 +19,7 @@ declare class LabelledRadialInput extends LabelledInputBase {
19
19
  private _isWide;
20
20
  private _getEffectivePrecision;
21
21
  protected _handleResize(entries: ResizeObserverEntry[]): void;
22
- protected _renderEditableNumber(): import("lit").TemplateResult<1> | typeof nothing;
22
+ protected _renderEditableNumber(): typeof nothing | import("lit").TemplateResult<1>;
23
23
  render(): import("lit").TemplateResult<1>;
24
24
  private _getTooltipValue;
25
25
  static styles: CSSResultGroup;
@@ -1 +1 @@
1
- {"version":3,"file":"labelled-radial-input.d.ts","names":[],"sources":["../src/labelled-radial-input/labelled-radial-input.ts"],"mappings":";;;;cA0Da,4BAA4B;WAC9B;EAGA;EACA;EAEmB;EACA;EAC2B,aAAa;EACvC;EACwB,WAAW;EACnC;EACA;EAEoC;;EAGpC;UAEZ;UAIT;YAeW,cAAc,SAAS;YAMvB,uCAAqB,2BAAA;EA0B/B,wBAAM;UA6BP;SAYD,QAAQ;;QA0ET;YACI;IACR,8BAA8B"}
1
+ {"version":3,"file":"labelled-radial-input.d.ts","names":[],"sources":["../src/labelled-radial-input/labelled-radial-input.ts"],"mappings":";;;;cA0Da,4BAA4B;WAC9B;EAGA;EACA;EAEmB;EACA;EAC2B,aAAa;EACvC;EACwB,WAAW;EACnC;EACA;EAEoC;;EAGpC;UAEZ;UAIT;YAeW,cAAc,SAAS;YAMvB,gCAAqB,wBAAA;EA0B/B,wBAAM;UA6BP;SAYD,QAAQ;;QA0ET;YACI;IACR,8BAA8B"}
@@ -1,2 +1,2 @@
1
- import { t as LabelledRangeInput } from "./index-BUB5SICW.js";
1
+ import { t as LabelledRangeInput } from "./index-CoqtMSd9.js";
2
2
  export { LabelledRangeInput };
@@ -1,2 +1,2 @@
1
- import { t as LabelledSliderInput } from "./index-CJ5fshD3.js";
1
+ import { t as LabelledSliderInput } from "./index-UvnoZUAo.js";
2
2
  export { LabelledSliderInput };
@@ -1,4 +1,4 @@
1
- import "./icon-DR_3rSyZ.js";
1
+ import "./icon-CDGprSdE.js";
2
2
  import { LitElement } from "lit";
3
3
  import { CommandRegistry, KeyboardManager } from "@clinth/ui-commands";
4
4
  //#region src/menu/menu-container.d.ts
@@ -128,4 +128,4 @@ declare global {
128
128
  }
129
129
  //#endregion
130
130
  export { MenuContainer as i, MenuTrigger as n, MenuTriggerCommandDetail as r, MenuItem as t };
131
- //# sourceMappingURL=menu-item-ZmkXNjek.d.ts.map
131
+ //# sourceMappingURL=menu-item-CZi9vy5O.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"menu-item-ZmkXNjek.d.ts","names":[],"sources":["../src/menu/menu-container.ts","../src/menu/menu-trigger.ts","../src/menu/menu-item.ts"],"mappings":";;;;cASa,sBAAsB;EACgB;EACjB,WAAW;EACX,kBAAkB;UACvB;UAGnB;SAwBD,sBAAM;UA4BL;UAkDA;EAYC,QAAQ,mBAAmB;;;;EASpC,WAAW,SAAS,IAAI;EAOxB,wBAAM;UAaE;;;;;UAoCA;UAiCA;EA0BR;UAIQ;UAQA;UAUA;UAqDA;;QAqCF;YACI;IACR,uBAAuB;;;;;KCvWtB;KACA;KAEO;WACD;WACA;WACA;;cAME,oBAAoB;EACH,MAAM;EACN;;EAEwB;EACpB,WAAW;EACX,kBAAkB;EACtB,WAAW;;EAEa;UAEnC;UACA;UACA;UAEc;UACN;iBAEV;UAEP;UACA;EAER;EAOA;EAQA;EAkBA,QAAQ,mBAAmB;UAMnB;UAqBA;UAWA;UAOA;MAKJ;EAIJ;EAIA;EAIA;UAIQ;UAgBA;UAQA;UAYA;UAUA;UAYA;UAOA;UAeA;UAeA;UAkBA;SAiBD,sBAAM;EAgFb,wBAAM;;QAwBA;YACI;IACR,qBAAqB;;;;;cC3WZ,iBAAiB;EACA;EAC2B;EAC3B;EACC;EACuB;EACpB,WAAW;EACX,kBAAkB;EAClB,iBAAiB;UAEhC;UACM;UAEf;EAER;UAOQ;UAKA;UAWA;UAQA;UAUA;UAUA;UAWA;UASA;EASR,WAAW,mBAAmB;EAU9B,QAAQ,mBAAmB;UAInB;SAaQ,sBAAM;EAkEtB,wBAAM;;QAwBA;YACI;IACR,kBAAkB"}
1
+ {"version":3,"file":"menu-item-CZi9vy5O.d.ts","names":[],"sources":["../src/menu/menu-container.ts","../src/menu/menu-trigger.ts","../src/menu/menu-item.ts"],"mappings":";;;;cASa,sBAAsB;EACgB;EACjB,WAAW;EACX,kBAAkB;UACvB;UAGnB;SAwBD,sBAAM;UA4BL;UAkDA;EAYC,QAAQ,mBAAmB;;;;EASpC,WAAW,SAAS,IAAI;EAOxB,wBAAM;UAaE;;;;;UAoCA;UAiCA;EA0BR;UAIQ;UAQA;UAUA;UAqDA;;QAqCF;YACI;IACR,uBAAuB;;;;;KCvWtB;KACA;KAEO;WACD;WACA;WACA;;cAME,oBAAoB;EACH,MAAM;EACN;;EAEwB;EACpB,WAAW;EACX,kBAAkB;EACtB,WAAW;;EAEa;UAEnC;UACA;UACA;UAEc;UACN;iBAEV;UAEP;UACA;EAER;EAOA;EAQA;EAkBA,QAAQ,mBAAmB;UAMnB;UAqBA;UAWA;UAOA;MAKJ;EAIJ;EAIA;EAIA;UAIQ;UAgBA;UAQA;UAYA;UAUA;UAYA;UAOA;UAeA;UAeA;UAkBA;SAiBD,sBAAM;EAgFb,wBAAM;;QAwBA;YACI;IACR,qBAAqB;;;;;cC3WZ,iBAAiB;EACA;EAC2B;EAC3B;EACC;EACuB;EACpB,WAAW;EACX,kBAAkB;EAClB,iBAAiB;UAEhC;UACM;UAEf;EAER;UAOQ;UAKA;UAWA;UAQA;UAUA;UAUA;UAWA;UASA;EASR,WAAW,mBAAmB;EAU9B,QAAQ,mBAAmB;UAInB;SAaQ,sBAAM;EAkEtB,wBAAM;;QAwBA;YACI;IACR,kBAAkB"}
package/dist/menu.d.ts CHANGED
@@ -1,3 +1,3 @@
1
- import { i as MenuContainer, n as MenuTrigger, t as MenuItem } from "./menu-item-ZmkXNjek.js";
2
- import { a as menuFromTree, c as MenuSeparator, d as MenuCheckItem, f as MenuBar, i as MenuFromTreeOptions, l as MenuSubTrigger, n as MenuRadioGroup, o as menuFromTreeToElements, r as MenuRadioItem, s as MenuHeader, u as MenuCommandController } from "./index-C59-JEPl.js";
1
+ import { i as MenuContainer, n as MenuTrigger, t as MenuItem } from "./menu-item-CZi9vy5O.js";
2
+ import { a as menuFromTree, c as MenuSeparator, d as MenuCheckItem, f as MenuBar, i as MenuFromTreeOptions, l as MenuSubTrigger, n as MenuRadioGroup, o as menuFromTreeToElements, r as MenuRadioItem, s as MenuHeader, u as MenuCommandController } from "./index-9AhaHIT2.js";
3
3
  export { MenuBar, MenuCheckItem, MenuCommandController, MenuContainer, type MenuFromTreeOptions, MenuHeader, MenuItem, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuSubTrigger, MenuTrigger, menuFromTree, menuFromTreeToElements };
package/dist/panel.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { a as TitlebarToggleDetail, c as TitlebarVariant, i as TitlebarOrientation, o as TitlebarToggleEvent, s as TitlebarToggleInteraction, t as TitlebarCloseEvent } from "./titlebar-B5zSTZnF.js";
1
+ import { a as TitlebarToggleDetail, c as TitlebarVariant, i as TitlebarOrientation, o as TitlebarToggleEvent, s as TitlebarToggleInteraction, t as TitlebarCloseEvent } from "./titlebar-Tqu-VvMU.js";
2
2
  import { LitElement } from "lit";
3
3
  //#region src/panel/panel.d.ts
4
4
  /** Backwards-compatible aliases: canonical types now live in `../titlebar/titlebar.js`. */
@@ -156,7 +156,7 @@ declare class SplitLayoutElement extends LitElement {
156
156
  private _onPointerUp;
157
157
  private _emitResize;
158
158
  private _emitChange;
159
- protected render(): import("lit").TemplateResult<1> | typeof nothing;
159
+ protected render(): typeof nothing | import("lit").TemplateResult<1>;
160
160
  private _getTrackSizes;
161
161
  private _resolveTracks;
162
162
  private _renderGutter;
@@ -176,4 +176,4 @@ declare global {
176
176
  }
177
177
  //#endregion
178
178
  export { SplitExpandEvent as _, LayoutNode as a, SplitResizeEvent as b, PanelNode as c, SplitChangeEvent as d, SplitCloseDetail as f, SplitExpandDetail as g, SplitCollapseEvent as h, GroupNode as i, SnapshotNode as l, SplitCollapseDetail as m, SplitPanelElement as n, LayoutSnapshot as o, SplitCloseEvent as p, Axis as r, PanelInfo as s, SplitLayoutElement as t, SplitChangeDetail as u, SplitLayoutElementEventMap as v, WhenSmall as x, SplitResizeDetail as y };
179
- //# sourceMappingURL=split-layout-C5SYbDrq.d.ts.map
179
+ //# sourceMappingURL=split-layout-JK3xWVX2.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"split-layout-C5SYbDrq.d.ts","names":[],"sources":["../src/split-layout/types.ts","../src/split-layout/split-panel.ts","../src/split-layout/split-layout.ts"],"mappings":";;KAAY;KAEA;UAEK;EACf;EACA;EACA,IAAI;EACJ;EACA;EACA;EACA;EACA,WAAW;EACX;EACA;;UAGe;EACf;EACA;EACA,IAAI;EACJ,MAAM;EACN,UAAU;EACV;EACA;;KAGU,aAAa,YAAY;UAEpB;EACf;EACA;EACA;EACA;EACA,WAAW;;UAGI;EACf;EACA,MAAM;;UAGS;EACf;EACA,IAAI;EACJ;EACA;EACA;EACA;EACA;EACA;EACA,WAAW;;UAGI;EACf,OAAO;EACP;;KAGU,mBAAmB,YAAY;UAE1B;EACf;EACA;;KAGU,qBAAqB,YAAY;UAE5B;EACf;EACA;;KAGU,mBAAmB,YAAY;UAE1B;EACf;EACA;;KAGU,kBAAkB,YAAY;UAEzB;EACf,QAAQ;;KAGE,mBAAmB,YAAY;UAE1B;EACf,qBAAqB;EACrB,uBAAuB;EACvB,qBAAqB;EACrB,oBAAoB;EACpB,qBAAqB;;;;cCvFV,0BAA0B;EAErC;EAGA;EAGA;EAGA;EAGA;EAGA;EAGA;EAGA;EAGA;EAES,wBAAM;SAIC,sBAAM;;QAiBhB;YACI;IACR,oBAAoB;;;;;cC7CX,2BAA2B;EAEtC,WAAW;EAGX;EAGA;EAGA;UAGQ;UAGA;UAGA;UAEA;UACA;UACA;UACA;EASC;EAKA;EAKA;UAID;UAcA;MAaJ,UAAU;EAuBd,aAAa;EAMb,UAAU,GAAG;EAUb,SAAS,oBAAoB;EAY7B,SAAS,oBAAoB,wBAAwB;EA4BrD,SAAS,iBAAiB;EAI1B,OAAO,iBAAiB;EAIxB,OAAO,iBAAiB;EAOxB,WAAW,iBAAiB;;;;;;EAmC5B,kBAAkB;;;;;;;;;EAelB,gBAAgB,qBAAqB,mBAAmB,iBAAiB;UAwBjE;UAiDA;UAQA;UAOA;UAwBA;UAQA;UAKA;UAMA;UAiFA;UAWA;UAuBA;UAeA;UAsBA;UAIA;UAMA;UAcA;YAYW,wBAAM,2BAAA;UA2BjB;UAQA;UAgCA;SAuBQ,sBAAM;;QA0FhB;YACI;IACR,qBAAqB;;YAGb;IACR,qBAAqB,YAAY;IACjC,uBAAuB,YAAY;IACnC,qBAAqB,YAAY;IACjC,oBAAoB,YAAY;IAChC,qBAAqB,YAAY"}
1
+ {"version":3,"file":"split-layout-JK3xWVX2.d.ts","names":[],"sources":["../src/split-layout/types.ts","../src/split-layout/split-panel.ts","../src/split-layout/split-layout.ts"],"mappings":";;KAAY;KAEA;UAEK;EACf;EACA;EACA,IAAI;EACJ;EACA;EACA;EACA;EACA,WAAW;EACX;EACA;;UAGe;EACf;EACA;EACA,IAAI;EACJ,MAAM;EACN,UAAU;EACV;EACA;;KAGU,aAAa,YAAY;UAEpB;EACf;EACA;EACA;EACA;EACA,WAAW;;UAGI;EACf;EACA,MAAM;;UAGS;EACf;EACA,IAAI;EACJ;EACA;EACA;EACA;EACA;EACA;EACA,WAAW;;UAGI;EACf,OAAO;EACP;;KAGU,mBAAmB,YAAY;UAE1B;EACf;EACA;;KAGU,qBAAqB,YAAY;UAE5B;EACf;EACA;;KAGU,mBAAmB,YAAY;UAE1B;EACf;EACA;;KAGU,kBAAkB,YAAY;UAEzB;EACf,QAAQ;;KAGE,mBAAmB,YAAY;UAE1B;EACf,qBAAqB;EACrB,uBAAuB;EACvB,qBAAqB;EACrB,oBAAoB;EACpB,qBAAqB;;;;cCvFV,0BAA0B;EAErC;EAGA;EAGA;EAGA;EAGA;EAGA;EAGA;EAGA;EAGA;EAES,wBAAM;SAIC,sBAAM;;QAiBhB;YACI;IACR,oBAAoB;;;;;cC7CX,2BAA2B;EAEtC,WAAW;EAGX;EAGA;EAGA;UAGQ;UAGA;UAGA;UAEA;UACA;UACA;UACA;EASC;EAKA;EAKA;UAID;UAcA;MAaJ,UAAU;EAuBd,aAAa;EAMb,UAAU,GAAG;EAUb,SAAS,oBAAoB;EAY7B,SAAS,oBAAoB,wBAAwB;EA4BrD,SAAS,iBAAiB;EAI1B,OAAO,iBAAiB;EAIxB,OAAO,iBAAiB;EAOxB,WAAW,iBAAiB;;;;;;EAmC5B,kBAAkB;;;;;;;;;EAelB,gBAAgB,qBAAqB,mBAAmB,iBAAiB;UAwBjE;UAiDA;UAQA;UAOA;UAwBA;UAQA;UAKA;UAMA;UAiFA;UAWA;UAuBA;UAeA;UAsBA;UAIA;UAMA;UAcA;YAYW,iBAAM,wBAAA;UA2BjB;UAQA;UAgCA;SAuBQ,sBAAM;;QA0FhB;YACI;IACR,qBAAqB;;YAGb;IACR,qBAAqB,YAAY;IACjC,uBAAuB,YAAY;IACnC,qBAAqB,YAAY;IACjC,oBAAoB,YAAY;IAChC,qBAAqB,YAAY"}
@@ -1,2 +1,2 @@
1
- import { t as SplitLayoutElement } from "./split-layout-C5SYbDrq.js";
1
+ import { t as SplitLayoutElement } from "./split-layout-JK3xWVX2.js";
2
2
  export { SplitLayoutElement };
@@ -1,4 +1,4 @@
1
- import "./icon-DR_3rSyZ.js";
1
+ import "./icon-CDGprSdE.js";
2
2
  import { LitElement, PropertyValues } from "lit";
3
3
  import { CommandRegistry } from "@clinth/ui-commands";
4
4
  //#region src/tabs/tab-list-item.d.ts
@@ -86,4 +86,4 @@ declare global {
86
86
  }
87
87
  //#endregion
88
88
  export { TabListReorderDetail as a, TabListElement as i, TabListChangeEvent as n, TabListReorderEvent as o, TabListDragMode as r, TabListItemElement as s, TabListChangeDetail as t };
89
- //# sourceMappingURL=tab-list-DbMIL520.d.ts.map
89
+ //# sourceMappingURL=tab-list-CGyPt07Z.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"tab-list-DbMIL520.d.ts","names":[],"sources":["../src/tabs/tab-list-item.ts","../src/tabs/tab-list.ts"],"mappings":";;;;;;;;;;;cAiBa,2BAA2B;EAEtC;EAGA;EAGA;EAGA;EAGA;EAGA,UAAU;UAEO;UACA;UACT;UACA;UACA;EAEC;EAgBA;EAcA,QAAQ,SAAS;UAQlB;UAUA;UAWA;UAIA;;;;;UAQA;UAiBA;EAKC;EAKA,wBAAM;UA8BP;SAWQ,sBAAM;;QAmKhB;YACI;IACR,sBAAsB;;;;;;;;;;KC3Ud;WACD;WACA;WACA;;KAGC,qBAAqB,YAAY;KAEjC;WACD;WACA;WACA;;KAGC,sBAAsB,YAAY;KAElC;cAMC,uBAAuB;;EAElC;EAGA;EAGA;EAGA;EAGA;EAGA,UAAU;EA4BD,wBAAM;EAsDN;EAUA,QAAQ,mBAAmB;EAoGpC,sBAAkB;EAwBlB,cAAc,IAAI;SAwaX,sBAAM;;QAyKP;YACI;IACR,iBAAiB"}
1
+ {"version":3,"file":"tab-list-CGyPt07Z.d.ts","names":[],"sources":["../src/tabs/tab-list-item.ts","../src/tabs/tab-list.ts"],"mappings":";;;;;;;;;;;cAiBa,2BAA2B;EAEtC;EAGA;EAGA;EAGA;EAGA;EAGA,UAAU;UAEO;UACA;UACT;UACA;UACA;EAEC;EAgBA;EAcA,QAAQ,SAAS;UAQlB;UAUA;UAWA;UAIA;;;;;UAQA;UAiBA;EAKC;EAKA,wBAAM;UA8BP;SAWQ,sBAAM;;QAmKhB;YACI;IACR,sBAAsB;;;;;;;;;;KC3Ud;WACD;WACA;WACA;;KAGC,qBAAqB,YAAY;KAEjC;WACD;WACA;WACA;;KAGC,sBAAsB,YAAY;KAElC;cAMC,uBAAuB;;EAElC;EAGA;EAGA;EAGA;EAGA;EAGA,UAAU;EA4BD,wBAAM;EAsDN;EAUA,QAAQ,mBAAmB;EAoGpC,sBAAkB;EAwBlB,cAAc,IAAI;SAwaX,sBAAM;;QAyKP;YACI;IACR,iBAAiB"}
package/dist/tabs.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- import { a as TabListReorderDetail, i as TabListElement, n as TabListChangeEvent, o as TabListReorderEvent, r as TabListDragMode, t as TabListChangeDetail } from "./tab-list-DbMIL520.js";
1
+ import { a as TabListReorderDetail, i as TabListElement, n as TabListChangeEvent, o as TabListReorderEvent, r as TabListDragMode, t as TabListChangeDetail } from "./tab-list-CGyPt07Z.js";
2
2
  export { TabListChangeDetail, TabListChangeEvent, TabListDragMode, TabListElement, TabListReorderDetail, TabListReorderEvent };
@@ -1,4 +1,4 @@
1
- import "./icon-DR_3rSyZ.js";
1
+ import "./icon-CDGprSdE.js";
2
2
  import { LitElement } from "lit";
3
3
  //#region src/titlebar/titlebar.d.ts
4
4
  type TitlebarOrientation = `horizontal` | `vertical`;
@@ -51,4 +51,4 @@ interface TitlebarElement {
51
51
  }
52
52
  //#endregion
53
53
  export { TitlebarToggleDetail as a, TitlebarVariant as c, TitlebarOrientation as i, TitlebarElement as n, TitlebarToggleEvent as o, TitlebarElementEventMap as r, TitlebarToggleInteraction as s, TitlebarCloseEvent as t };
54
- //# sourceMappingURL=titlebar-B5zSTZnF.d.ts.map
54
+ //# sourceMappingURL=titlebar-Tqu-VvMU.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"titlebar-B5zSTZnF.d.ts","names":[],"sources":["../src/titlebar/titlebar.ts"],"mappings":";;;KAOY;KACA;KACA;UAEK;WACN;;KAGC,sBAAsB,YAAY;KAClC,qBAAqB;UAEhB;EACf,QAAQ;EACR,OAAO;;;;;;;;;;;;;;cAgBI,wBAAwB;EACP;EACwB;EACiB,aAAa;EACjB,SAAS;EAC7C;;EAEe;EACA;EACiB,mBAAmB;UAExE;UAaA;UASA;YAIW,wBAAM;SAkET,sBAAM;;QA4RhB;YACI;IACR,iBAAiB;;;UAIJ;EACf,oBAAoB,gBAAgB,yBAClC,MAAM,GACN,WAAW,MAAM,iBAAiB,OAAO,wBAAwB,aACjE,oBAAoB,sCAEpB,cACA,UAAU,oCACV,oBAAoB"}
1
+ {"version":3,"file":"titlebar-Tqu-VvMU.d.ts","names":[],"sources":["../src/titlebar/titlebar.ts"],"mappings":";;;KAOY;KACA;KACA;UAEK;WACN;;KAGC,sBAAsB,YAAY;KAClC,qBAAqB;UAEhB;EACf,QAAQ;EACR,OAAO;;;;;;;;;;;;;;cAgBI,wBAAwB;EACP;EACwB;EACiB,aAAa;EACjB,SAAS;EAC7C;;EAEe;EACA;EACiB,mBAAmB;UAExE;UAaA;UASA;YAIW,wBAAM;SAkET,sBAAM;;QA4RhB;YACI;IACR,iBAAiB;;;UAIJ;EACf,oBAAoB,gBAAgB,yBAClC,MAAM,GACN,WAAW,MAAM,iBAAiB,OAAO,wBAAwB,aACjE,oBAAoB,sCAEpB,cACA,UAAU,oCACV,oBAAoB"}
@@ -1,2 +1,2 @@
1
- import { a as TitlebarToggleDetail, c as TitlebarVariant, i as TitlebarOrientation, n as TitlebarElement, o as TitlebarToggleEvent, r as TitlebarElementEventMap, s as TitlebarToggleInteraction, t as TitlebarCloseEvent } from "./titlebar-B5zSTZnF.js";
1
+ import { a as TitlebarToggleDetail, c as TitlebarVariant, i as TitlebarOrientation, n as TitlebarElement, o as TitlebarToggleEvent, r as TitlebarElementEventMap, s as TitlebarToggleInteraction, t as TitlebarCloseEvent } from "./titlebar-Tqu-VvMU.js";
2
2
  export { TitlebarCloseEvent, TitlebarElement, TitlebarElementEventMap, TitlebarOrientation, TitlebarToggleDetail, TitlebarToggleEvent, TitlebarToggleInteraction, TitlebarVariant };
@@ -6,6 +6,7 @@ This directory contains documentation for each component and some architectural
6
6
 
7
7
  - [ac-text](./ac-text.md)
8
8
  - [ac-token](./ac-token.md)
9
+ - [bottom-drawer](./bottom-drawer.md)
9
10
  - [button](./button.md)
10
11
  - [checkbox](./checkbox.md)
11
12
  - [colour-picker](./colour-picker.md)
@@ -28,6 +29,7 @@ This directory contains documentation for each component and some architectural
28
29
  - [miller](./miller.md)
29
30
  - [narrowed-text](./narrowed-text.md)
30
31
  - [notifier](./notifier.md)
32
+ - [pan-text](./pan-text.md)
31
33
  - [panel](./panel.md)
32
34
  - [plots](./plots.md)
33
35
  - [polar-pad](./polar-pad.md)
@@ -42,6 +44,7 @@ This directory contains documentation for each component and some architectural
42
44
  - [split-layout](./split-layout.md)
43
45
  - [swipe](./swipe.md)
44
46
  - [tabs](./tabs.md)
47
+ - [text-shimmer](./text-shimmer.md)
45
48
  - [timeline](./timeline.md)
46
49
  - [titlebar](./titlebar.md)
47
50
  - [toolbar](./toolbar.md)
@@ -0,0 +1,150 @@
1
+ # Bottom Drawer
2
+
3
+ A slide-up drawer panel that slides over the bottom of its container. Place it as a **sibling** of the content it covers, inside a positioned container — the element stretches to fill that container and slides the drawer up over it. The drawer can be resized from its top edge and supports a floating handle mode.
4
+
5
+ ```html
6
+ <div class="panel" style="position: relative; overflow: hidden">
7
+ <div>Main content behind the drawer</div>
8
+ <ixfx-bottom-drawer label="Inspector" open>
9
+ Drawer content here
10
+ </ixfx-bottom-drawer>
11
+ </div>
12
+ ```
13
+
14
+ The container must establish a positioning context (`position: relative`, `absolute`, or `fixed`) and should set `overflow: hidden` so the drawer is clipped while closed or animating. The element itself is `pointer-events: none` except over the drawer, so the sibling content underneath stays interactive.
15
+
16
+ ---
17
+
18
+ ## `ixfx-bottom-drawer`
19
+
20
+ ### Properties / attributes
21
+
22
+ | Attribute / Property | Type | Default | Description |
23
+ |------------------------|--------------------|---------------|----------------------------------------------------------|
24
+ | `open` | boolean | `false` | Whether the drawer is visible |
25
+ | `height` | number | `320` | Drawer height in px |
26
+ | `min-height` | number | `160` | Minimum height before fade-out begins |
27
+ | `dismiss-threshold` | number | `96` | Drag below this height to close the drawer |
28
+ | `max-height-ratio` | number | `0.85` | Max height as a fraction of host height |
29
+ | `label` | string | `Drawer` | Header title and accessible label |
30
+ | `icon-name` | string | `''` | Header icon from the icon registry |
31
+ | `closable` | boolean | `true` | Show the header close button |
32
+ | `collapsible` | boolean | `true` | Show the expand/collapse caret |
33
+ | `maintain-handle` | boolean | `false` | Keep a drag handle docked to the bottom when collapsed |
34
+ | `name` | string | `''` | Command namespace (see Commands section) |
35
+ | `registry` | CommandRegistry | — | `@clinth/ui-commands` registry for named commands |
36
+
37
+ ### Slots
38
+
39
+ | Slot | Description |
40
+ |------------|-----------------------------------------------|
41
+ | default | Drawer body content |
42
+ | `toolbar` | Header toolbar items (forwarded to titlebar) |
43
+
44
+ ### Events
45
+
46
+ | Event | Detail | Description |
47
+ |------------------|-------------------------------|--------------------------------------|
48
+ | `drawer-close` | — | Fired when drawer is closed |
49
+ | `drawer-resize` | `{ height: number }` | Fired when drawer is resized |
50
+
51
+ ### Commands
52
+
53
+ When a `name` is set, the drawer registers commands as `<name>.<command>`:
54
+
55
+ | Command | Description |
56
+ |--------------|------------------------------------------|
57
+ | `expand` | Open the drawer |
58
+ | `collapse` | Close the drawer (fires `drawer-close`) |
59
+ | `toggle` | Toggle open/closed state |
60
+
61
+ ```js
62
+ // Invoke commands via the registry
63
+ drawer.registry?.invoke('inspector.expand');
64
+ drawer.registry?.invoke('inspector.toggle');
65
+ ```
66
+
67
+ Share a registry across multiple drawers to control them globally:
68
+
69
+ ```js
70
+ const shared = createCommandRegistry();
71
+ firstDrawer.registry = shared;
72
+ secondDrawer.registry = shared;
73
+ ```
74
+
75
+ ---
76
+
77
+ ## Resizing
78
+
79
+ The drawer's top edge is a resize handle. Drag it up or down to resize. Keyboard users can focus the handle and use:
80
+
81
+ - `Arrow Up` / `Arrow Down` — resize by 16px (64px with Shift)
82
+ - `Home` — resize to minimum height
83
+ - `End` — resize to maximum height
84
+
85
+ When closed, keyboard resize on the handle opens the drawer.
86
+
87
+ ---
88
+
89
+ ## Maintain handle mode
90
+
91
+ When `maintain-handle` is `true`, a small draggable tab remains docked at the bottom edge when the drawer is closed. Drag it up to reopen.
92
+
93
+ ```html
94
+ <div class="panel" style="position: relative; overflow: hidden">
95
+ <div>Main content</div>
96
+ <ixfx-bottom-drawer label="Inspector" maintain-handle>
97
+ Inspector content
98
+ </ixfx-bottom-drawer>
99
+ </div>
100
+ ```
101
+
102
+ ---
103
+
104
+ ## With toolbar
105
+
106
+ Toolbar items slotted into `toolbar` are forwarded into the `ixfx-titlebar` toolbar:
107
+
108
+ ```html
109
+ <div class="panel" style="position: relative; overflow: hidden">
110
+ <div>Main content</div>
111
+ <ixfx-bottom-drawer label="Inspector" open>
112
+ <div slot="toolbar">
113
+ <button type="button" data-tooltip="Refresh">
114
+ <ixfx-icon name="refresh"></ixfx-icon>
115
+ </button>
116
+ </div>
117
+ Inspector content
118
+ </ixfx-bottom-drawer>
119
+ </div>
120
+ ```
121
+
122
+ ---
123
+
124
+ ## CSS custom properties
125
+
126
+ | Property | Default | Description |
127
+ |----------------------------------------|----------------------------------------------|------------------------------------------|
128
+ | `--bottom-drawer-background` | `color-mix(in srgb, var(--surface-2) 84%, transparent)` | Drawer fill |
129
+ | `--bottom-drawer-border` | `1px solid color-mix(in srgb, var(--surface-2-text) 14%, transparent)` | Drawer border |
130
+ | `--bottom-drawer-radius` | `var(--radius-l)` | Top corner radius |
131
+ | `--bottom-drawer-blur` | `18px` | Backdrop blur amount |
132
+ | `--bottom-drawer-shadow` | `var(--shadow-l)` | Drop shadow |
133
+ | `--bottom-drawer-collapsed-width` | `96px` | Width of floating pill (maintain-handle) |
134
+ | `--bottom-drawer-title-background` | `transparent` | Header fill |
135
+ | `--ixfx-handle-*` | (see handle docs) | Resize grip styling |
136
+
137
+ ---
138
+
139
+ ## TypeScript types
140
+
141
+ ```ts
142
+ import type { BottomDrawerElement, BottomDrawerResizeDetail, BottomDrawerCloseEvent } from 'ixfxfun-components';
143
+ ```
144
+
145
+ ---
146
+
147
+ ## See also
148
+
149
+ - [`ixfx-titlebar`](../titlebar/README.md) — Header component used by the drawer
150
+ - [`ixfx-icon`](../icons/README.md) — Icon component for header icons
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@ixfx/components",
3
- "version": "0.8.4",
4
- "generated": "2026-09-09T19:06:27.918Z",
3
+ "version": "0.8.6",
4
+ "generated": "2026-09-09T19:21:17.170Z",
5
5
  "components": [
6
6
  {
7
7
  "name": "ac-text",
@@ -13,6 +13,11 @@
13
13
  "summary": "Token/tag input with per-token autocomplete. Looks like a text box — committed tokens appear as inline chips, and a suggestion popup follows the typing cursor. Typical use cases are email To: fields a",
14
14
  "path": "docs-user/ac-token.md"
15
15
  },
16
+ {
17
+ "name": "bottom-drawer",
18
+ "summary": "A slide-up drawer panel that slides over the bottom of its container. Place it as a **sibling** of the content it covers, inside a positioned container — the element stretches to fill that container a",
19
+ "path": "docs-user/bottom-drawer.md"
20
+ },
16
21
  {
17
22
  "name": "button",
18
23
  "summary": "Three related button components:",
@@ -123,6 +128,11 @@
123
128
  "summary": "A \"lookless\" app-wide notification system. `NotificationManager` is a singleton that owns notification state, queueing, and timing — it doesn't know how to draw anything. A `NotificationRenderer` (the",
124
129
  "path": "docs-user/notifier.md"
125
130
  },
131
+ {
132
+ "name": "pan-text",
133
+ "summary": "Pans overflowing text on hover or continuously in a loop. Use when a label is too long for its container and you want to reveal the full text without truncation.",
134
+ "path": "docs-user/pan-text.md"
135
+ },
126
136
  {
127
137
  "name": "panel",
128
138
  "summary": "An collapsible panel component with support for titles, icons, toolbars, and multiple visual variants.",
@@ -193,6 +203,11 @@
193
203
  "summary": "A complete tabbed interface system using several coordinated components:",
194
204
  "path": "docs-user/tabs.md"
195
205
  },
206
+ {
207
+ "name": "text-shimmer",
208
+ "summary": "A label with a sweeping highlight band across the text. Useful as a lightweight \"still working…\" or \"loading…\" indicator.",
209
+ "path": "docs-user/text-shimmer.md"
210
+ },
196
211
  {
197
212
  "name": "timeline",
198
213
  "summary": "A canvas-based timeline component with tracks, events, zoom/pan, and vertical track resizing. Suitable for visualizing time-series data, event logs, or scheduling.",
@@ -13,6 +13,7 @@ import '@ixfx/components/data-grid';
13
13
  ## Components
14
14
  - [ac-text](docs-user/ac-text.md): VS Code command-palette style autocomplete text input. Shows a popup with matching results as the user types.
15
15
  - [ac-token](docs-user/ac-token.md): Token/tag input with per-token autocomplete. Looks like a text box — committed tokens appear as inline chips, and a suggestion popup follows the typing cursor. Typical use cases are email To: fields a
16
+ - [bottom-drawer](docs-user/bottom-drawer.md): A slide-up drawer panel that slides over the bottom of its container. Place it as a **sibling** of the content it covers, inside a positioned container — the element stretches to fill that container a
16
17
  - [button](docs-user/button.md): Three related button components:
17
18
  - [checkbox](docs-user/checkbox.md): A custom checkbox with a diagonal line indicator and indeterminate state support. Uses shadow DOM with CSS variables for full appearance customization.
18
19
  - [colour-picker](docs-user/colour-picker.md): Two components for picking OKLCH colours. Use `ixfx-colour-picker` when you need a full inline picker; use `ixfx-colour-picker-popup` when you need a compact swatch that opens a picker in a popover.
@@ -35,6 +36,7 @@ import '@ixfx/components/data-grid';
35
36
  - [miller](docs-user/miller.md): A Miller column component displays hierarchical data as multiple vertical columns, like macOS Finder or email clients. Each column shows the children of the selected item in the previous column.
36
37
  - [narrowed-text](docs-user/narrowed-text.md): A filtered text selection component with inline search. Shows slotted items filtered by a query string as the user types.
37
38
  - [notifier](docs-user/notifier.md): A "lookless" app-wide notification system. `NotificationManager` is a singleton that owns notification state, queueing, and timing — it doesn't know how to draw anything. A `NotificationRenderer` (the
39
+ - [pan-text](docs-user/pan-text.md): Pans overflowing text on hover or continuously in a loop. Use when a label is too long for its container and you want to reveal the full text without truncation.
38
40
  - [panel](docs-user/panel.md): An collapsible panel component with support for titles, icons, toolbars, and multiple visual variants.
39
41
  - [plots](docs-user/plots.md): SVG-based plotting components for visualising data streams.
40
42
  - [polar-pad](docs-user/polar-pad.md): A circular pad for setting polar coordinates (angle + radius). The user clicks or drags within a circle to position a marker. The marker's position encodes an angle (degrees, 0 = right, clockwise) and
@@ -49,6 +51,7 @@ import '@ixfx/components/data-grid';
49
51
  - [split-layout](docs-user/split-layout.md): A Lit web component that lays out any number of panels along one axis with draggable gutters between them.
50
52
  - [swipe](docs-user/swipe.md): A touch-friendly swipe/nudge component. User taps and drags to generate a value in range [-1, 1]. Value is emitted only on pointer release.
51
53
  - [tabs](docs-user/tabs.md): A complete tabbed interface system using several coordinated components:
54
+ - [text-shimmer](docs-user/text-shimmer.md): A label with a sweeping highlight band across the text. Useful as a lightweight "still working…" or "loading…" indicator.
52
55
  - [timeline](docs-user/timeline.md): A canvas-based timeline component with tracks, events, zoom/pan, and vertical track resizing. Suitable for visualizing time-series data, event logs, or scheduling.
53
56
  - [titlebar](docs-user/titlebar.md): Standalone titlebar chrome extracted from `ixfx-panel`: title text, icon, toolbar slot, close button and an optional collapse/expand caret. Use it when you need a panel-style header without the collap
54
57
  - [toolbar](docs-user/toolbar.md): Two components for building toolbars:
@@ -0,0 +1,103 @@
1
+ # `ixfx-pan-text`
2
+
3
+ Pans overflowing text on hover or continuously in a loop. Use when a label is too long for its container and you want to reveal the full text without truncation.
4
+
5
+ ```html
6
+ <span style="max-width: 120px; display: inline-block; overflow: hidden;">
7
+ <ixfx-pan-text direction="end">A very long label that overflows</ixfx-pan-text>
8
+ </span>
9
+ ```
10
+
11
+ ---
12
+
13
+ ## Modes
14
+
15
+ ### `hover` (default)
16
+
17
+ Pans once while the cursor is over the element. Rests at the starting position when the cursor leaves.
18
+
19
+ ```html
20
+ <ixfx-pan-text mode="hover">Long notification text goes here</ixfx-pan-text>
21
+ ```
22
+
23
+ ### `loop`
24
+
25
+ Pans repeatedly: pauses 2 seconds at the end, snaps back to start, then pans again until `stopLoop()` is called.
26
+
27
+ ```html
28
+ <ixfx-pan-text mode="loop">Scrolling ticker text</ixfx-pan-text>
29
+ ```
30
+
31
+ ```js
32
+ const pan = document.querySelector('ixfx-pan-text');
33
+ pan.startLoop(); // Begin the loop
34
+ pan.stopLoop(); // Stop and snap back to rest position
35
+ ```
36
+
37
+ The loop starts automatically when `mode="loop"` is set on an already-connected element, and stops automatically when `disabled` is set to `true`.
38
+
39
+ ---
40
+
41
+ ## Direction
42
+
43
+ | Direction | Rest position | Pan direction |
44
+ |-----------|--------------------|---------------|
45
+ | `end` | Start of text | Left |
46
+ | `start` | End of text | Right |
47
+
48
+ ```html
49
+ <!-- Shows end of text at rest, pans left on hover -->
50
+ <ixfx-pan-text direction="end">Very long label</ixfx-pan-text>
51
+
52
+ <!-- Shows start of text at rest, pans right on hover -->
53
+ <ixfx-pan-text direction="start">Very long label</ixfx-pan-text>
54
+ ```
55
+
56
+ ---
57
+
58
+ ## Properties / attributes
59
+
60
+ | Attribute / Property | Type | Default | Description |
61
+ |---------------------|-----------------------|----------|-------------------------------------------------------|
62
+ | `direction` | `'start'` \| `'end'` | `'end'` | Which end of the text is visible at rest |
63
+ | `mode` | `'hover'` \| `'loop'` | `'hover'`| Interaction mode |
64
+ | `disabled` | boolean | `false` | Disables panning and applies reduced opacity |
65
+
66
+ ---
67
+
68
+ ## JavaScript API
69
+
70
+ ```ts
71
+ const pan = document.querySelector('ixfx-pan-text');
72
+
73
+ // Programmatic loop control
74
+ pan.startLoop(); // Begin continuous panning
75
+ pan.stopLoop(); // Stop and snap back
76
+
77
+ // Check current state
78
+ if (pan.looping) {
79
+ console.log('Pan is in loop mode');
80
+ }
81
+ ```
82
+
83
+ ---
84
+
85
+ ## Accessibility
86
+
87
+ Respects `prefers-reduced-motion`. When reduced motion is preferred, the text stays in its rest position without animation.
88
+
89
+ ---
90
+
91
+ ## CSS custom properties
92
+
93
+ | Property | Default | Description |
94
+ |---------------------|-----------|----------------------|
95
+ | `--disabled-opacity`| `0.5` | Opacity when disabled |
96
+
97
+ ---
98
+
99
+ ## TypeScript types
100
+
101
+ ```ts
102
+ import type { PanTextElement, PanTextMode } from 'ixfxfun-components';
103
+ ```
@@ -0,0 +1,56 @@
1
+ # `ixfx-text-shimmer`
2
+
3
+ A label with a sweeping highlight band across the text. Useful as a lightweight "still working…" or "loading…" indicator.
4
+
5
+ ```html
6
+ <ixfx-text-shimmer text="Thinking…"></ixfx-text-shimmer>
7
+ ```
8
+
9
+ Or using the default slot:
10
+
11
+ ```html
12
+ <ixfx-text-shimmer>Reticulating splines…</ixfx-text-shimmer>
13
+ ```
14
+
15
+ ---
16
+
17
+ ## Properties / attributes
18
+
19
+ | Attribute / Property | Type | Default | Description |
20
+ |---------------------|-----------|---------|------------------------------------------------|
21
+ | `text` | `string` | `''` | Label text. When empty, uses the default slot |
22
+ | `paused` | `boolean` | `false` | Stops the sweep and shows flat base colour |
23
+
24
+ ---
25
+
26
+ ## CSS custom properties
27
+
28
+ | Property | Default | Description |
29
+ |---------------------------------|--------------------------------|------------------------------------------|
30
+ | `--text-shimmer-color` | `var(--surface-3-text)` | Resting / base text colour |
31
+ | `--text-shimmer-gradient-color`| `var(--surface-2-text)` | Colour of the moving highlight |
32
+ | `--text-shimmer-duration` | `2s` | Time for one sweep |
33
+ | `--text-shimmer-spread` | `15%` | Half-width of the highlight band |
34
+
35
+ ```css
36
+ /* Example: warmer highlight colour */
37
+ ixfx-text-shimmer {
38
+ --text-shimmer-color: #666;
39
+ --text-shimmer-gradient-color: #f0a500;
40
+ --text-shimmer-duration: 1.5s;
41
+ }
42
+ ```
43
+
44
+ ---
45
+
46
+ ## Accessibility
47
+
48
+ Respects `prefers-reduced-motion`. When reduced motion is preferred, the sweep animation is disabled and the text shows its base colour.
49
+
50
+ ---
51
+
52
+ ## TypeScript types
53
+
54
+ ```ts
55
+ import type { TextShimmerElement } from 'ixfxfun-components';
56
+ ```
package/llms.txt CHANGED
@@ -13,6 +13,7 @@ import '@ixfx/components/data-grid';
13
13
  ## Components
14
14
  - [ac-text](docs-user/ac-text.md): VS Code command-palette style autocomplete text input. Shows a popup with matching results as the user types.
15
15
  - [ac-token](docs-user/ac-token.md): Token/tag input with per-token autocomplete. Looks like a text box — committed tokens appear as inline chips, and a suggestion popup follows the typing cursor. Typical use cases are email To: fields a
16
+ - [bottom-drawer](docs-user/bottom-drawer.md): A slide-up drawer panel that slides over the bottom of its container. Place it as a **sibling** of the content it covers, inside a positioned container — the element stretches to fill that container a
16
17
  - [button](docs-user/button.md): Three related button components:
17
18
  - [checkbox](docs-user/checkbox.md): A custom checkbox with a diagonal line indicator and indeterminate state support. Uses shadow DOM with CSS variables for full appearance customization.
18
19
  - [colour-picker](docs-user/colour-picker.md): Two components for picking OKLCH colours. Use `ixfx-colour-picker` when you need a full inline picker; use `ixfx-colour-picker-popup` when you need a compact swatch that opens a picker in a popover.
@@ -35,6 +36,7 @@ import '@ixfx/components/data-grid';
35
36
  - [miller](docs-user/miller.md): A Miller column component displays hierarchical data as multiple vertical columns, like macOS Finder or email clients. Each column shows the children of the selected item in the previous column.
36
37
  - [narrowed-text](docs-user/narrowed-text.md): A filtered text selection component with inline search. Shows slotted items filtered by a query string as the user types.
37
38
  - [notifier](docs-user/notifier.md): A "lookless" app-wide notification system. `NotificationManager` is a singleton that owns notification state, queueing, and timing — it doesn't know how to draw anything. A `NotificationRenderer` (the
39
+ - [pan-text](docs-user/pan-text.md): Pans overflowing text on hover or continuously in a loop. Use when a label is too long for its container and you want to reveal the full text without truncation.
38
40
  - [panel](docs-user/panel.md): An collapsible panel component with support for titles, icons, toolbars, and multiple visual variants.
39
41
  - [plots](docs-user/plots.md): SVG-based plotting components for visualising data streams.
40
42
  - [polar-pad](docs-user/polar-pad.md): A circular pad for setting polar coordinates (angle + radius). The user clicks or drags within a circle to position a marker. The marker's position encodes an angle (degrees, 0 = right, clockwise) and
@@ -49,6 +51,7 @@ import '@ixfx/components/data-grid';
49
51
  - [split-layout](docs-user/split-layout.md): A Lit web component that lays out any number of panels along one axis with draggable gutters between them.
50
52
  - [swipe](docs-user/swipe.md): A touch-friendly swipe/nudge component. User taps and drags to generate a value in range [-1, 1]. Value is emitted only on pointer release.
51
53
  - [tabs](docs-user/tabs.md): A complete tabbed interface system using several coordinated components:
54
+ - [text-shimmer](docs-user/text-shimmer.md): A label with a sweeping highlight band across the text. Useful as a lightweight "still working…" or "loading…" indicator.
52
55
  - [timeline](docs-user/timeline.md): A canvas-based timeline component with tracks, events, zoom/pan, and vertical track resizing. Suitable for visualizing time-series data, event logs, or scheduling.
53
56
  - [titlebar](docs-user/titlebar.md): Standalone titlebar chrome extracted from `ixfx-panel`: title text, icon, toolbar slot, close button and an optional collapse/expand caret. Use it when you need a panel-style header without the collap
54
57
  - [toolbar](docs-user/toolbar.md): Two components for building toolbars:
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@ixfx/components",
3
3
  "type": "module",
4
- "version": "0.8.5",
4
+ "version": "0.8.6",
5
5
  "packageManager": "pnpm@10.0.0",
6
6
  "description": "Web components for ixfx — Lit-based UI toolkit",
7
7
  "author": "Clint Heyer",
@@ -1 +0,0 @@
1
- {"version":3,"file":"icon-DR_3rSyZ.d.ts","names":[],"sources":["../src/icons/icon.ts"],"mappings":";;cAUa,wBAAwB;;EACvB;EACgB;EAChB;EAC0C;EACU;EAevD;EAMA;YAMU,wBAAM,2BAAA;YA4BN,QAAQ,SAAS;SAWpB,sBAAM;;QAiDhB;YACI;IACR,aAAa"}