@openreachtech/furo-vue 1.6.0 → 1.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openreachtech/furo-vue",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "description": "furo for Vue",
   "main": "index.js",
   "types": "./types/index.d.ts",
@@ -39,6 +39,8 @@
     "nuxt/",
     "types/",
     "public/furo-vue/",
+    "docs/design-tokens.md",
+    "docs/furo-*.md",
     "!**/.directorykeeper",
     "!types/jest.d.ts"
   ],
@@ -77,22 +79,22 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@iconify/vue": "^5.0.3",
+    "@iconify/vue": "^5.0.4",
     "@openreachtech/furo": "^1.11.0",
-    "@tiptap/core": "^3.31.4",
-    "@tiptap/extension-highlight": "^3.31.4",
-    "@tiptap/extension-image": "^3.31.4",
-    "@tiptap/extension-mention": "^3.31.4",
-    "@tiptap/extension-text-align": "^3.31.4",
-    "@tiptap/extension-text-style": "^3.31.4",
-    "@tiptap/extension-typography": "^3.31.4",
-    "@tiptap/extensions": "^3.31.4",
-    "@tiptap/pm": "^3.31.4",
-    "@tiptap/starter-kit": "^3.31.4",
-    "@tiptap/vue-3": "^3.31.4",
-    "marked": "^18.1.0",
+    "@tiptap/core": "^3.32.0",
+    "@tiptap/extension-highlight": "^3.32.0",
+    "@tiptap/extension-image": "^3.32.0",
+    "@tiptap/extension-mention": "^3.32.0",
+    "@tiptap/extension-text-align": "^3.32.0",
+    "@tiptap/extension-text-style": "^3.32.0",
+    "@tiptap/extension-typography": "^3.32.0",
+    "@tiptap/extensions": "^3.32.0",
+    "@tiptap/pm": "^3.32.0",
+    "@tiptap/starter-kit": "^3.32.0",
+    "@tiptap/vue-3": "^3.32.0",
+    "marked": "^18.1.2",
     "reka-ui": "^2.11.0",
-    "vue": "^3.5.43"
+    "vue": "^3.5.44"
   },
   "peerDependencies": {
     "@nuxt/icon": "^1.0.0",
@@ -112,13 +114,13 @@
     "@babel/preset-env": "^7.29.7",
     "@iconify-json/ph": "^1.2.2",
     "@nuxt/icon": "^1.15.0",
-    "@openreachtech/eslint-config": "^3.0.2",
+    "@openreachtech/eslint-config": "^4.5.0",
     "@openreachtech/jest-constructor-spy": "^1.1.2",
     "@openreachtech/jest-deep-containing": "^1.0.2",
     "@types/jest": "^30.0.0",
     "@vue/test-utils": "^2.5.1",
     "babel-jest": "^30.5.2",
-    "core-js": "^3.50.0",
+    "core-js": "^3.51.0",
     "eslint": "^9.39.5",
     "eslint-plugin-eslint-comments": "^3.2.0",
     "eslint-plugin-vue": "^9.33.0",

package/public/furo-vue/components.json

@@ -1,6 +1,6 @@
 {
   "library": "@openreachtech/furo-vue",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "generatedFrom": "app/docs/component-registry.js",
   "layers": [
     "foundation",

package/types/generated/components/atoms/FuroButton/FuroButtonContext.d.ts

@@ -104,13 +104,13 @@ export default class FuroButtonContext extends BaseFuroContext<null, Props, "CLI
      * Extract ARIA attributes for the button root.
      *
      * @returns {{
-     *   'aria-disabled': 'true' | undefined
-     *   'aria-busy': 'true' | undefined
+     *   'aria-disabled'?: 'true'
+     *   'aria-busy'?: 'true'
      * }}
      */
     extractAriaAttributes(): {
-        "aria-disabled": "true" | undefined;
-        "aria-busy": "true" | undefined;
+        "aria-disabled"?: "true";
+        "aria-busy"?: "true";
     };
     /**
      * Handle native click on the button root.

package/types/generated/components/molecules/FuroSelect/FuroSelect.vue.d.ts

@@ -461,6 +461,27 @@ declare const __VLS_export: import("vue").DefineComponent<{
     }> & Readonly<{}>, {
         size: string | number;
     }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+    FuroSelectOptionText: import("vue").DefineComponent<{}, {
+        context: import("./FuroSelectOptionTextContext.js").default;
+    }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {
+        SelectOptionText: {
+            new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("reka-ui").SelectItemTextProps> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {}, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+                P: {};
+                B: {};
+                D: {};
+                C: {};
+                M: {};
+                Defaults: {};
+            }, Readonly<import("reka-ui").SelectItemTextProps> & Readonly<{}>, {}, {}, {}, {}, {}>;
+            __isFragment?: never;
+            __isTeleport?: never;
+            __isSuspense?: never;
+        } & import("vue").ComponentOptionsBase<Readonly<import("reka-ui").SelectItemTextProps> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+            $slots: {
+                default?: (props: {}) => any;
+            };
+        });
+    }, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
     SelectRoot: <T extends import("reka-ui").AcceptableValue = import("reka-ui").AcceptableValue>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: {
         attrs: any;
         slots: {
@@ -780,6 +801,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
 }, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare namespace __VLS_componentsOption {
     export { FuroIcon };
+    export { FuroSelectOptionText };
     export let SelectRoot: <T extends import("reka-ui").AcceptableValue = import("reka-ui").AcceptableValue>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: {
         attrs: any;
         slots: {
@@ -1169,3 +1191,4 @@ declare var __VLS_197: {};
 import FuroSelectContext from './FuroSelectContext.js';
 import type { FuroSelectSlots } from './FuroSelectContext.js';
 import FuroIcon from '../../atoms/FuroIcon/FuroIcon.vue';
+import FuroSelectOptionText from './FuroSelectOptionText.vue';

package/types/generated/components/molecules/FuroSelect/FuroSelectContext.d.ts

@@ -165,6 +165,20 @@ export default class FuroSelectContext extends BaseFuroContext<null, Props, "CHA
     resolveOptionValue({ option, }: {
         option: FuroSelectOption;
     }): FuroSelectValue;
+    /**
+     * Build an option's render key from its value and label, so a change to either
+     * remounts the item, because the item records both only when it mounts.
+     *
+     * @param {{
+     *   option: FuroSelectOption
+     *   index: number
+     * }} params - Parameters of this method.
+     * @returns {string} Render key.
+     */
+    generateOptionKey({ option, index, }: {
+        option: FuroSelectOption;
+        index: number;
+    }): string;
     /**
      * Setup component context.
      *

package/types/generated/components/molecules/FuroSelect/FuroSelectOptionText.vue.d.ts

@@ -0,0 +1,50 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+export type __VLS_LocalComponents = typeof __VLS_componentsOption;
+export type __VLS_GlobalComponents = import("vue").GlobalComponents;
+export type __VLS_LocalDirectives = {};
+export type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_7) => any;
+};
+declare const __VLS_export: import("vue").DefineComponent<{}, {
+    context: FuroSelectOptionTextContext;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {
+    SelectOptionText: {
+        new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("reka-ui").SelectItemTextProps> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {}, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+            P: {};
+            B: {};
+            D: {};
+            C: {};
+            M: {};
+            Defaults: {};
+        }, Readonly<import("reka-ui").SelectItemTextProps> & Readonly<{}>, {}, {}, {}, {}, {}>;
+        __isFragment?: never;
+        __isTeleport?: never;
+        __isSuspense?: never;
+    } & import("vue").ComponentOptionsBase<Readonly<import("reka-ui").SelectItemTextProps> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+        $slots: {
+            default?: (props: {}) => any;
+        };
+    });
+}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare namespace __VLS_componentsOption {
+    let SelectOptionText: {
+        new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("reka-ui").SelectItemTextProps> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {}, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+            P: {};
+            B: {};
+            D: {};
+            C: {};
+            M: {};
+            Defaults: {};
+        }, Readonly<import("reka-ui").SelectItemTextProps> & Readonly<{}>, {}, {}, {}, {}, {}>;
+        __isFragment?: never;
+        __isTeleport?: never;
+        __isSuspense?: never;
+    } & import("vue").ComponentOptionsBase<Readonly<import("reka-ui").SelectItemTextProps> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+        $slots: {
+            default?: (props: {}) => any;
+        };
+    });
+}
+declare var __VLS_7: {};
+import FuroSelectOptionTextContext from './FuroSelectOptionTextContext.js';

package/types/generated/components/molecules/FuroSelect/FuroSelectOptionTextContext.d.ts

@@ -0,0 +1,141 @@
+/**
+ * Context class for the text of one FuroSelect option.
+ *
+ * @extends {BaseFuroContext<null, {}, never>}
+ */
+export default class FuroSelectOptionTextContext extends BaseFuroContext<null, {}, never> {
+    /**
+     * Factory method.
+     *
+     * @template {X extends typeof FuroSelectOptionTextContext ? X : never} T, X
+     * @override
+     * @param {FuroSelectOptionTextContextFactoryParams} params - Parameters of this factory method.
+     * @returns {InstanceType<T>} An instance of this class.
+     * @this {T}
+     */
+    static override create<T extends X extends typeof FuroSelectOptionTextContext ? X : never, X>(this: T, { props, componentContext, refHash, selectRootContext, selectItemContext, }: FuroSelectOptionTextContextFactoryParams): InstanceType<T>;
+    /**
+     * Build ref hash.
+     *
+     * @override
+     * @returns {FuroSelectOptionTextContextParams['refHash']}
+     */
+    static override buildRefHash(): FuroSelectOptionTextContextParams["refHash"];
+    /**
+     * Inject the select root context, which holds the text the trigger shows.
+     *
+     * @returns {FuroSelectRootContext}
+     */
+    static injectSelectRootContext(): FuroSelectRootContext;
+    /**
+     * Inject the context of the option that holds this text.
+     *
+     * @returns {FuroSelectItemContext}
+     */
+    static injectSelectItemContext(): FuroSelectItemContext;
+    /**
+     * Constructor.
+     *
+     * @param {FuroSelectOptionTextContextParams} params - Parameters of this constructor.
+     */
+    constructor({ props, componentContext, refHash, selectRootContext, selectItemContext, }: FuroSelectOptionTextContextParams);
+    refHash: {
+        textComponentRef: import("vue").ShallowRef<{
+            $el: HTMLElement;
+        } | null>;
+        observerRef: import("vue").ShallowRef<MutationObserver | null>;
+        recordedTextRef: import("vue").Ref<string | null>;
+    };
+    selectRootContext: FuroSelectRootContext;
+    selectItemContext: FuroSelectItemContext;
+    /**
+     * get: Ctor
+     *
+     * @override
+     * @returns {typeof FuroSelectOptionTextContext}
+     */
+    override get Ctor(): typeof FuroSelectOptionTextContext;
+    /**
+     * get: textComponentRef
+     *
+     * @returns {import('vue').ShallowRef<{ $el: HTMLElement } | null>}
+     */
+    get textComponentRef(): import("vue").ShallowRef<{
+        $el: HTMLElement;
+    } | null>;
+    /**
+     * get: observerRef
+     *
+     * @returns {import('vue').ShallowRef<MutationObserver | null>}
+     */
+    get observerRef(): import("vue").ShallowRef<MutationObserver | null>;
+    /**
+     * get: recordedTextRef
+     *
+     * @returns {import('vue').Ref<string | null>}
+     */
+    get recordedTextRef(): import("vue").Ref<string | null>;
+    /**
+     * Setup component context.
+     *
+     * @template {X extends FuroSelectOptionTextContext ? X : never} T, X
+     * @override
+     * @returns {T} - For method chaining.
+     * @this {T}
+     */
+    override setupComponent<T extends X extends FuroSelectOptionTextContext ? X : never, X>(this: T): T;
+    /**
+     * Extract the rendered text element.
+     *
+     * @returns {HTMLElement | null}
+     */
+    extractTextElement(): HTMLElement | null;
+    /**
+     * Extract the rendered text.
+     *
+     * @returns {string | null}
+     */
+    extractText(): string | null;
+    /**
+     * Watch the rendered text for changes.
+     */
+    observeTextElement(): void;
+    /**
+     * Replace the recorded option text when the rendered text differs from it.
+     */
+    syncText(): void;
+    /**
+     * Stop watching the rendered text.
+     */
+    disconnectObserver(): void;
+}
+export type FuroSelectRootContext = {
+    onOptionAdd: (option: {
+        value: unknown;
+        disabled: boolean;
+        textContent: string;
+    }) => void;
+};
+export type FuroSelectItemContext = {
+    value: unknown;
+    disabled: import("vue").Ref<boolean>;
+};
+export type FuroSelectOptionTextContextParams = import("../../../contexts/BaseFuroContext.js").BaseFuroContextParams & {
+    props: {};
+    componentContext: import("vue").SetupContext;
+    refHash: {
+        textComponentRef: import("vue").ShallowRef<{
+            $el: HTMLElement;
+        } | null>;
+        observerRef: import("vue").ShallowRef<MutationObserver | null>;
+        recordedTextRef: import("vue").Ref<string | null>;
+    };
+    selectRootContext: FuroSelectRootContext;
+    selectItemContext: FuroSelectItemContext;
+};
+export type FuroSelectOptionTextContextFactoryParams = Omit<FuroSelectOptionTextContextParams, "refHash" | "selectRootContext" | "selectItemContext"> & {
+    refHash?: FuroSelectOptionTextContextParams["refHash"];
+    selectRootContext?: FuroSelectRootContext;
+    selectItemContext?: FuroSelectItemContext;
+};
+import BaseFuroContext from '../../../contexts/BaseFuroContext.js';

package/types/generated/components/organisms/FuroTable/FuroTableContext.d.ts

@@ -31,10 +31,10 @@ export default class FuroTableContext extends BaseFuroContext<null, Props, "SORT
      * Wrapped as a static hook so scroll throttling can be driven deterministically
      * in tests (spy on this method) instead of depending on the browser global.
      *
-     * @param {FrameRequestCallback} callback - Callback to run on the next frame.
+     * @param {FrameRequestCallback} frameCallback - Callback to run on the next frame.
      * @returns {number} The frame request id.
      */
-    static requestFrame(callback: FrameRequestCallback): number;
+    static requestFrame(frameCallback: FrameRequestCallback): number;
     /**
      * Cancel a scheduled animation frame.
      *