@bitforgehq/ui 0.5.0-next.3 → 0.5.0-next.4

package/ai/reference/bf-image-tile-aspect.md

@@ -0,0 +1,28 @@
+# BfImageTileAspect
+
+The four aspect ratios of an image tile's picture, square by default
+
+Type from `@bitforgehq/ui` · since 0.5.0
+
+The aspect ratio of a `bf-image-tile`'s picture: square (default), 4:3, 16:9 or 3:4.
+
+```ts
+import { type BfImageTileAspect } from '@bitforgehq/ui';
+```
+
+## Signature
+
+```ts
+type BfImageTileAspect = '1/1' | '4/3' | '16/9' | '3/4'
+```
+
+## Values
+
+- `1/1`
+- `4/3`
+- `16/9`
+- `3/4`
+
+## Used by
+
+- [bf-image-tile](../components/image-tile.md)

package/ai/reference/bf-image-tile-caption-placement.md

@@ -0,0 +1,27 @@
+# BfImageTileCaptionPlacement
+
+Where an image tile's caption sits, below the picture or over it
+
+Type from `@bitforgehq/ui` · since 0.5.0
+
+Where a `bf-image-tile`'s title and meta line sit: `below` the picture (default), or `overlay`,
+on a soft gradient over the bottom of the picture.
+
+```ts
+import { type BfImageTileCaptionPlacement } from '@bitforgehq/ui';
+```
+
+## Signature
+
+```ts
+type BfImageTileCaptionPlacement = 'below' | 'overlay'
+```
+
+## Values
+
+- `below`
+- `overlay`
+
+## Used by
+
+- [bf-image-tile](../components/image-tile.md)

package/ai/reference/bf-image-tile-harness.md

@@ -0,0 +1,70 @@
+# BfImageTileHarness
+
+Test harness for an image tile: its picture state, title, meta, selection and action
+
+Class from `@bitforgehq/ui/testing` · since 0.5.0
+
+Harness for `bf-image-tile`. jsdom never loads images, so `loadImage()` and `failImage()` fire
+the picture's `load` and `error` events the way a browser would; `getState()` then tells what
+the tile shows. `click()` clicks the tile's `bfAction` link or button.
+
+```ts
+import { BfImageTileHarness } from '@bitforgehq/ui/testing';
+```
+
+## Signature
+
+```ts
+class BfImageTileHarness extends ComponentHarness
+```
+
+## Methods
+
+### `getTitle(): Promise<string>`
+
+The tile's title: the text of its default slot.
+
+### `getMeta(): Promise<string>`
+
+The meta line under the title.
+
+### `getState(): Promise<'empty' | 'loading' | 'loaded' | 'failed'>`
+
+What the picture area shows: `empty` (the placeholder), `loading` (the skeleton), `loaded`
+(the picture) or `failed` (the failure message).
+
+### `getSrc(): Promise<string>`
+
+The URL of the picture.
+
+### `getAlt(): Promise<string>`
+
+The alternative text of the picture.
+
+### `getPlaceholderText(): Promise<string>`
+
+The placeholder text while there is no picture.
+
+### `getFailedMessage(): Promise<string>`
+
+The failure message.
+
+### `isSelected(): Promise<boolean>`
+
+Whether the tile is marked selected.
+
+### `isClickable(): Promise<boolean>`
+
+Whether the tile is clickable (has a `bfAction` link or button).
+
+### `click(): Promise<void>`
+
+Clicks the tile's `bfAction` link or button. Throws for a tile without one.
+
+### `loadImage(): Promise<void>`
+
+Fires the picture's `load` event, as a browser does when it arrives. Throws without one.
+
+### `failImage(): Promise<void>`
+
+Fires the picture's `error` event, as a browser does when it fails. Throws without one.

package/ai/reference/bf-labels.md

@@ -111,7 +111,9 @@ import { type BfLabels } from '@bitforgehq/ui';
 | `chatSend`              | `string`                                      | `'Send'`                                                                                | bf-chat-composer's send button.                                                                                |
 | `chatStop`              | `string`                                      | `'Stop'`                                                                                | bf-chat-composer's stop button, shown in place of send while a reply runs.                                     |
 | `mediaCardSelect`       | `string`                                      | `'Select'`                                                                              | bf-media-card's select button, read before the card's name ("Select Starfall").                                |
-| `imageLoadFailed`       | `string`                                      | `'The image could not be loaded'`                                                       | bf-media-card's and bf-image-viewer's message for an image that failed to load.                                |
+| `imageLoadFailed`       | `string`                                      | `'The image could not be loaded'`                                                       | bf-media-card's, bf-image-tile's and bf-image-viewer's message for an image that failed to load.               |
+| `imageTileEmpty`        | `string`                                      | `'No image yet'`                                                                        | bf-image-tile's placeholder text while it has no image yet.                                                    |
+| `imageTileSelected`     | `string`                                      | `'Selected'`                                                                            | bf-image-tile's selected state, read before the tile's title ("Selected, Dragon").                             |
 | `imageViewer`           | `string`                                      | `'Image viewer'`                                                                        | bf-image-viewer's name.                                                                                        |
 | `imageViewerPrevious`   | `string`                                      | `'Previous image'`                                                                      | bf-image-viewer's button that shows the previous image.                                                        |
 | `imageViewerNext`       | `string`                                      | `'Next image'`                                                                          | bf-image-viewer's button that shows the next image.                                                            |

package/ai/reference/bf-pagination-position-label.md

@@ -0,0 +1,22 @@
+# BfPaginationPositionLabel
+
+Function that writes a compact pager's position text, such as "v3 of 7"
+
+Type from `@bitforgehq/ui` · since 0.5.0
+
+Writes a compact `bf-pagination`'s position text from the current page and the page count, such
+as "v3 of 7" for page 3 of 7.
+
+```ts
+import { type BfPaginationPositionLabel } from '@bitforgehq/ui';
+```
+
+## Signature
+
+```ts
+type BfPaginationPositionLabel = (page: number, count: number) => string
+```
+
+## Used by
+
+- [bf-pagination](../components/pagination.md)

package/ai/reference/provide-bf-labels.md

@@ -23,7 +23,8 @@ every string. In a component's `providers` it covers that sub-tree's widgets and
 `fileRejectedType`, `fileRejectedSize`, `fileRejectedCount`,
 `imageInputChoose`, `imageInputUpload`, `imageInputReplace`, `imageInputRemove`,
 `chatThread`, `chatJumpToLatest`, `chatMessageStopped`, `chatMessageFailed`, `chatComposer`,
-`chatSend`, `chatStop`, `mediaCardSelect`, `imageLoadFailed`, `validation`); the overlay
+`chatSend`, `chatStop`, `mediaCardSelect`, `imageLoadFailed`, `imageTileEmpty`,
+`imageTileSelected`, `validation`); the overlay
 services (`ok`, `cancel`, `actions`, `sheet`, `modal`, `close`, `expand`, `collapse`,
 `sheetPosition`, `dialog`, `notifications`, `imageViewer`, `imageViewerPrevious`,
 `imageViewerNext`, `imageViewerPosition`) are root singletons and pick it up only when the caller passes its injector:

package/fesm2022/bitforgehq-ui-overlay.mjs

@@ -2624,6 +2624,10 @@ var BfMenuButtonComponent = class BfMenuButtonComponent {
 		...ngDevMode ? { debugName: "iconOnly" } : 		/* istanbul ignore next */ {},
 		transform: booleanAttribute
 	});
+	fullWidth = input(false, {
+		...ngDevMode ? { debugName: "fullWidth" } : 		/* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
 	disabled = input(false, {
 		...ngDevMode ? { debugName: "disabled" } : 		/* istanbul ignore next */ {},
 		transform: booleanAttribute
@@ -2631,6 +2635,8 @@ var BfMenuButtonComponent = class BfMenuButtonComponent {
 	opened = output();
 	closed = output();
 	resolvedSize = computed(() => this.size() ?? this.defaults.controlSize, ...ngDevMode ? [{ debugName: "resolvedSize" }] : 	/* istanbul ignore next */ []);
+	stretched = computed(() => this.fullWidth() && !this.iconOnly(), ...ngDevMode ? [{ debugName: "stretched" }] : 	/* istanbul ignore next */ []);
+	hostClasses = computed(() => this.stretched() ? "inline-flex max-w-full w-full" : "inline-flex max-w-full", ...ngDevMode ? [{ debugName: "hostClasses" }] : 	/* istanbul ignore next */ []);
 	labelClasses = computed(() => this.iconOnly() ? "contents" : "max-w-full min-w-0 truncate", ...ngDevMode ? [{ debugName: "labelClasses" }] : 	/* istanbul ignore next */ []);
 	classes = computed(() => {
 		const size = this.resolvedSize();
@@ -2655,7 +2661,8 @@ var BfMenuButtonComponent = class BfMenuButtonComponent {
 			pressed,
 			BUTTON$1.size[size],
 			padding,
-			hit
+			hit,
+			this.stretched() ? "w-full" : ""
 		].filter(Boolean).join(" ");
 	}, ...ngDevMode ? [{ debugName: "classes" }] : 	/* istanbul ignore next */ []);
 	static ɵfac = i0.ɵɵngDeclareFactory({
@@ -2715,6 +2722,13 @@ var BfMenuButtonComponent = class BfMenuButtonComponent {
 				isRequired: false,
 				transformFunction: null
 			},
+			fullWidth: {
+				classPropertyName: "fullWidth",
+				publicName: "fullWidth",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
 			disabled: {
 				classPropertyName: "disabled",
 				publicName: "disabled",
@@ -2727,7 +2741,7 @@ var BfMenuButtonComponent = class BfMenuButtonComponent {
 			opened: "opened",
 			closed: "closed"
 		},
-		host: { classAttribute: "inline-flex max-w-full" },
+		host: { properties: { "class": "hostClasses()" } },
 		ngImport: i0,
 		template: `
     <button
@@ -2770,7 +2784,7 @@ i0.ɵɵngDeclareClassMetadata({
 		args: [{
 			selector: "bf-menu-button",
 			imports: [BfMenuTriggerDirective],
-			host: { class: "inline-flex max-w-full" },
+			host: { "[class]": "hostClasses()" },
 			template: `
     <button
       type="button"
@@ -2844,6 +2858,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		fullWidth: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "fullWidth",
+				required: false
+			}]
+		}],
 		disabled: [{
 			type: i0.Input,
 			args: [{
@@ -3000,6 +3022,7 @@ var BfThemeMenuButtonComponent = class BfThemeMenuButtonComponent {
 					"placement",
 					"label",
 					"iconOnly",
+					"fullWidth",
 					"disabled"
 				],
 				outputs: ["opened", "closed"]