@openreachtech/furo-vue 1.4.0 → 1.5.0

package/lib/components/molecules/FuroSelect/FuroSelect.vue

@@ -19,6 +19,7 @@ export default defineComponent({
     SelectTrigger: RekaSelect['Trigger'],
     SelectValue: RekaSelect['Value'],
     SelectIcon: RekaSelect['Icon'],
+    SelectPortal: RekaSelect['Portal'],
     SelectContent: RekaSelect['Content'],
     SelectViewport: RekaSelect['Viewport'],
     SelectScrollUpButton: RekaSelect['ScrollUpButton'],
@@ -150,163 +151,165 @@ export default defineComponent({
         </slot>
       </SelectTrigger>
 
-      <SelectContent
-        class="unit-select-content"
-        :side-offset="4"
-        v-bind="context.extractContentAttributes()"
-      >
-        <slot name="content-before" />
-
-        <SelectScrollUpButton class="scroll-up-button">
-          <slot name="scroll-up-button">
-            <FuroIcon name="ph:caret-up" />
-          </slot>
-        </SelectScrollUpButton>
-
-        <SelectViewport class="viewport">
-          <template
-            v-for="(option, index) in context.parcel?.options"
-            :key="index"
-          >
-            <template v-if="context.shouldShowGroupOption({ option })">
-              <SelectGroup
-                class="group"
-                :disabled="option.disabled"
-              >
-                <slot
-                  name="group"
-                  :group="option"
-                  :group-index="index"
-                >
-                  <SelectLabel class="label">
-                    <slot
-                      name="group-label"
-                      :group="option"
-                      :group-index="index"
-                    >
-                      {{ context.resolveOptionLabel({ option }) }}
-                    </slot>
-                  </SelectLabel>
+      <SelectPortal v-bind="context.extractPortalAttributes()">
+        <SelectContent
+          class="unit-select-content"
+          :side-offset="4"
+          v-bind="context.extractContentAttributes()"
+        >
+          <slot name="content-before" />
+
+          <SelectScrollUpButton class="scroll-up-button">
+            <slot name="scroll-up-button">
+              <FuroIcon name="ph:caret-up" />
+            </slot>
+          </SelectScrollUpButton>
 
-                  <template
-                    v-for="(groupChildOption, groupChildIndex) in context.extractGroupOptions({ option })"
-                    :key="groupChildIndex"
+          <SelectViewport class="viewport">
+            <template
+              v-for="(option, index) in context.parcel?.options"
+              :key="index"
+            >
+              <template v-if="context.shouldShowGroupOption({ option })">
+                <SelectGroup
+                  class="group"
+                  :disabled="option.disabled"
+                >
+                  <slot
+                    name="group"
+                    :group="option"
+                    :group-index="index"
                   >
-                    <SelectOption
-                      class="option"
-                      :value="context.resolveOptionValue({ option: groupChildOption })"
-                      :disabled="groupChildOption.disabled || option.disabled"
-                    >
+                    <SelectLabel class="label">
                       <slot
-                        name="option"
+                        name="group-label"
                         :group="option"
                         :group-index="index"
-                        :option="groupChildOption"
-                        :option-index="groupChildIndex"
                       >
-                        <SelectOptionText>
-                          <slot
-                            name="option-text"
-                            :option="groupChildOption"
-                            :option-index="groupChildIndex"
-                          >
-                            {{ context.resolveOptionLabel({ option: groupChildOption }) }}
-                          </slot>
-                        </SelectOptionText>
-
-                        <SelectOptionIndicator class="select-indicator">
-                          <slot
-                            name="option-indicator"
-                            :option="groupChildOption"
-                            :option-index="groupChildIndex"
-                          >
-                            <FuroIcon name="ph:check" />
-                          </slot>
-                        </SelectOptionIndicator>
+                        {{ context.resolveOptionLabel({ option }) }}
                       </slot>
-                    </SelectOption>
+                    </SelectLabel>
 
-                    <slot
-                      v-if="groupChildOption.separator"
-                      name="separator"
-                      :option="groupChildOption"
-                      :option-index="groupChildIndex"
+                    <template
+                      v-for="(groupChildOption, groupChildIndex) in context.extractGroupOptions({ option })"
+                      :key="groupChildIndex"
                     >
-                      <SelectSeparator class="separator" />
-                    </slot>
-                  </template>
-                </slot>
-              </SelectGroup>
-            </template>
+                      <SelectOption
+                        class="option"
+                        :value="context.resolveOptionValue({ option: groupChildOption })"
+                        :disabled="groupChildOption.disabled || option.disabled"
+                      >
+                        <slot
+                          name="option"
+                          :group="option"
+                          :group-index="index"
+                          :option="groupChildOption"
+                          :option-index="groupChildIndex"
+                        >
+                          <SelectOptionText>
+                            <slot
+                              name="option-text"
+                              :option="groupChildOption"
+                              :option-index="groupChildIndex"
+                            >
+                              {{ context.resolveOptionLabel({ option: groupChildOption }) }}
+                            </slot>
+                          </SelectOptionText>
+
+                          <SelectOptionIndicator class="select-indicator">
+                            <slot
+                              name="option-indicator"
+                              :option="groupChildOption"
+                              :option-index="groupChildIndex"
+                            >
+                              <FuroIcon name="ph:check" />
+                            </slot>
+                          </SelectOptionIndicator>
+                        </slot>
+                      </SelectOption>
 
-            <template v-else>
-              <SelectOption
-                :value="context.resolveOptionValue({ option })"
-                class="option"
-                :disabled="option.disabled"
-              >
-                <slot
-                  name="option"
-                  :option="option"
-                  :option-index="index"
+                      <slot
+                        v-if="groupChildOption.separator"
+                        name="separator"
+                        :option="groupChildOption"
+                        :option-index="groupChildIndex"
+                      >
+                        <SelectSeparator class="separator" />
+                      </slot>
+                    </template>
+                  </slot>
+                </SelectGroup>
+              </template>
+
+              <template v-else>
+                <SelectOption
+                  :value="context.resolveOptionValue({ option })"
+                  class="option"
+                  :disabled="option.disabled"
                 >
-                  <SelectOptionText>
-                    <slot
-                      name="option-text"
-                      :option="option"
-                      :option-index="index"
-                    >
-                      {{ context.resolveOptionLabel({ option }) }}
-                    </slot>
-                  </SelectOptionText>
-
-                  <SelectOptionIndicator class="select-indicator">
-                    <slot
-                      name="option-indicator"
-                      :option="option"
-                      :option-index="index"
-                    >
-                      <FuroIcon
-                        name="ph:check"
-                      />
-                    </slot>
-                  </SelectOptionIndicator>
-                </slot>
-              </SelectOption>
+                  <slot
+                    name="option"
+                    :option="option"
+                    :option-index="index"
+                  >
+                    <SelectOptionText>
+                      <slot
+                        name="option-text"
+                        :option="option"
+                        :option-index="index"
+                      >
+                        {{ context.resolveOptionLabel({ option }) }}
+                      </slot>
+                    </SelectOptionText>
+
+                    <SelectOptionIndicator class="select-indicator">
+                      <slot
+                        name="option-indicator"
+                        :option="option"
+                        :option-index="index"
+                      >
+                        <FuroIcon
+                          name="ph:check"
+                        />
+                      </slot>
+                    </SelectOptionIndicator>
+                  </slot>
+                </SelectOption>
+              </template>
+
+              <slot
+                v-if="option.separator"
+                name="separator"
+                :option="option"
+                :option-index="index"
+              >
+                <SelectSeparator class="separator" />
+              </slot>
             </template>
 
-            <slot
-              v-if="option.separator"
-              name="separator"
-              :option="option"
-              :option-index="index"
+            <SelectOption
+              v-if="context.hasEmptyOptions()"
+              :value="null"
+              class="option"
+              @select.stop.prevent
             >
-              <SelectSeparator class="separator" />
+              <SelectOptionText class="empty-text">
+                <slot name="empty">
+                  No options
+                </slot>
+              </SelectOptionText>
+            </SelectOption>
+          </SelectViewport>
+
+          <SelectScrollDownButton class="scroll-down-button">
+            <slot name="scroll-down-button">
+              <FuroIcon name="ph:caret-down" />
             </slot>
-          </template>
+          </SelectScrollDownButton>
 
-          <SelectOption
-            v-if="context.hasEmptyOptions()"
-            :value="null"
-            class="option"
-            @select.stop.prevent
-          >
-            <SelectOptionText class="empty-text">
-              <slot name="empty">
-                No options
-              </slot>
-            </SelectOptionText>
-          </SelectOption>
-        </SelectViewport>
-
-        <SelectScrollDownButton class="scroll-down-button">
-          <slot name="scroll-down-button">
-            <FuroIcon name="ph:caret-down" />
-          </slot>
-        </SelectScrollDownButton>
-
-        <slot name="content-after" />
-      </SelectContent>
+          <slot name="content-after" />
+        </SelectContent>
+      </SelectPortal>
     </SelectRoot>
   </div>
 </template>
@@ -426,7 +429,7 @@ export default defineComponent({
     padding-block: 0.25rem;
     padding-inline: 0.375rem;
 
-    min-height: calc(var(--size-input-height) - 0.5rem);
+    min-height: var(--size-option-height);
 
     font: var(--font-body-medium);
     user-select: none;

package/lib/components/molecules/FuroSelect/FuroSelectContext.js

@@ -369,6 +369,15 @@ export default class FuroSelectContext extends BaseFuroContext {
     return this.triggerParcel
   }
 
+  /**
+   * Extract portal attributes.
+   *
+   * @returns {Props['portalParcel']}
+   */
+  extractPortalAttributes () {
+    return this.portalParcel
+  }
+
   /**
    * Extract content attributes.
    *

package/lib/components/molecules/FuroToggleGroup/FuroToggleGroupContext.js

@@ -437,7 +437,9 @@ export default class FuroToggleGroupContext extends BaseFuroContext {
     const value = rawValue
       ?? this.resolveDefaultValue()
 
-    this.internalValueRef.value = value
+    if (!this.isControlled()) {
+      this.internalValueRef.value = value
+    }
 
     const customEvent = this.buildCustomEvent({
       name: this.EMIT_EVENT_NAME.CHANGE_VALUE,

package/lib/components/organisms/FuroDialog/FuroDialog.vue

@@ -278,8 +278,8 @@ export default defineComponent({
     align-items: center;
     justify-content: center;
 
-    width: 1.75rem;
-    height: 1.75rem;
+    width: var(--size-close-button-medium);
+    height: var(--size-close-button-medium);
 
     border: none;
     border-radius: var(--size-border-radius-small);

package/lib/components/organisms/FuroDrawer/FuroDrawer.vue

@@ -479,8 +479,8 @@ export default defineComponent({
     align-items: center;
     justify-content: center;
 
-    width: 1.75rem;
-    height: 1.75rem;
+    width: var(--size-close-button-medium);
+    height: var(--size-close-button-medium);
 
     border: none;
     border-radius: var(--size-border-radius-small);

package/lib/components/organisms/FuroSidebar/FuroSidebar.vue

@@ -217,6 +217,7 @@ export default defineComponent({
   .unit-sidebar {
     border-inline-end: var(--size-thinnest) solid var(--color-border);
 
+    box-sizing: border-box;
     width: var(--size-sidebar-width);
     height: 100%;
 
@@ -292,6 +293,7 @@ export default defineComponent({
     border: none;
     border-radius: var(--size-border-radius-large);
 
+    box-sizing: border-box;
     width: 100%;
 
     display: flex;
@@ -425,6 +427,7 @@ export default defineComponent({
     border: none;
     border-radius: var(--size-border-radius-large);
 
+    box-sizing: border-box;
     width: 100%;
 
     display: flex;

package/lib/components/organisms/FuroToast/FuroToast.vue

@@ -524,8 +524,8 @@ export default defineComponent({
     align-items: center;
     justify-content: center;
 
-    width: 1.25rem;
-    height: 1.25rem;
+    width: var(--size-close-button-small);
+    height: var(--size-close-button-small);
 
     border: none;
     border-radius: var(--size-border-radius-small);

package/lib/components/organisms/FuroToast/FuroToastContext.js

@@ -306,6 +306,17 @@ export default class FuroToastContext extends BaseFuroContext {
     }
   }
 
+  /**
+   * get: explicitLabel
+   *
+   * @returns {string | null} Label the app set, without the default, so an unset label keeps the hotkey in the default name.
+   */
+  get explicitLabel () {
+    return this.props.parcel
+      ?.label
+      ?? null
+  }
+
   /**
    * Resolve the swipe-to-dismiss direction. Honors an explicit
    * `parcel.swipeDirection`; otherwise derives it from the position so a
@@ -606,6 +617,7 @@ export default class FuroToastContext extends BaseFuroContext {
    */
   extractViewportAttributes () {
     const entries = [
+      ['label', this.explicitLabel],
       ['hotkey', this.parcel?.hotkey ?? null],
     ]
       .filter(([, attributeValue]) => attributeValue !== null)

package/lib/components/organisms/FuroToast/ToastQueue.js

@@ -14,7 +14,6 @@ const DEFAULT_CONFIG = {
   position: 'bottom-right',
   durationInMilliseconds: 4000,
   maxVisible: 3,
-  label: 'Notifications',
   hotkey: null,
   richColors: false,
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openreachtech/furo-vue",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "furo for Vue",
   "main": "index.js",
   "types": "./types/index.d.ts",
@@ -77,22 +77,22 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@iconify/vue": "^5.0.1",
-    "@openreachtech/furo": "^1.10.1",
-    "@tiptap/core": "^3.30.5",
-    "@tiptap/extension-highlight": "^3.30.5",
-    "@tiptap/extension-image": "^3.30.5",
-    "@tiptap/extension-mention": "^3.30.5",
-    "@tiptap/extension-text-align": "^3.30.5",
-    "@tiptap/extension-text-style": "^3.30.5",
-    "@tiptap/extension-typography": "^3.30.5",
-    "@tiptap/extensions": "^3.30.5",
-    "@tiptap/pm": "^3.30.5",
-    "@tiptap/starter-kit": "^3.30.5",
-    "@tiptap/vue-3": "^3.30.5",
-    "marked": "^18.0.9",
-    "reka-ui": "^2.10.3",
-    "vue": "^3.5.41"
+    "@iconify/vue": "^5.0.3",
+    "@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",
+    "reka-ui": "^2.11.0",
+    "vue": "^3.5.43"
   },
   "peerDependencies": {
     "@nuxt/icon": "^1.0.0",
@@ -108,27 +108,27 @@
   },
   "devDependencies": {
     "@babel/core": "^7.29.7",
-    "@babel/eslint-parser": "^7.29.7",
+    "@babel/eslint-parser": "^7.29.9",
     "@babel/preset-env": "^7.29.7",
     "@iconify-json/ph": "^1.2.2",
     "@nuxt/icon": "^1.15.0",
     "@openreachtech/eslint-config": "^3.0.2",
-    "@openreachtech/jest-constructor-spy": "^1.1.0",
-    "@openreachtech/jest-deep-containing": "^1.0.1",
+    "@openreachtech/jest-constructor-spy": "^1.1.2",
+    "@openreachtech/jest-deep-containing": "^1.0.2",
     "@types/jest": "^30.0.0",
-    "@vue/test-utils": "^2.4.11",
+    "@vue/test-utils": "^2.5.1",
     "@vue/vue3-jest": "^29.2.6",
     "babel-jest": "^29.7.0",
     "core-js": "^3.50.0",
     "eslint": "^9.39.5",
     "eslint-plugin-eslint-comments": "^3.2.0",
     "eslint-plugin-vue": "^9.33.0",
-    "globals": "^17.11.0",
+    "globals": "^17.13.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "nuxt": "^3.21.11",
     "typescript": "^5.9.3",
-    "vue-tsc": "^3.3.9",
+    "vue-tsc": "^3.3.12",
     "whatwg-fetch": "^3.6.20"
   },
   "overrides": {

package/public/furo-vue/components.json

@@ -1,6 +1,6 @@
 {
   "library": "@openreachtech/furo-vue",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "generatedFrom": "app/docs/component-registry.js",
   "layers": [
     "foundation",
@@ -1610,7 +1610,7 @@
           "name": "portalParcel",
           "type": "object | null",
           "default": "null",
-          "description": "Extra attributes applied to the portal part."
+          "description": "Attributes of the portal the option list renders in, such as to or disabled. The list renders at body by default."
         },
         {
           "name": "contentParcel",
@@ -4547,7 +4547,7 @@
           "name": "label",
           "type": "string",
           "default": "'Notifications'",
-          "description": "Accessible label for the region."
+          "description": "Accessible name of the toast region, in the app's own language. It also prefixes the announcement of each toast. When unset, the region keeps its default name, Notifications (F8)."
         },
         {
           "name": "hotkey",

package/types/generated/components/atoms/FuroAvatar/FuroAvatar.vue.d.ts

@@ -1,5 +1,22 @@
 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_StyleScopedClasses = {} & {
+    "unit-avatar": boolean;
+} & {
+    "circle": boolean;
+} & {
+    "square": boolean;
+} & {
+    "image": boolean;
+} & {
+    "fallback": boolean;
+};
+export type __VLS_Slots = {} & {
+    fallback?: (props: typeof __VLS_18) => any;
+};
 declare const __VLS_export: import("vue").DefineComponent<{
     parcel: import("./FuroAvatarContext.js").FuroAvatarParcel | null;
 }, {
@@ -71,4 +88,68 @@ declare const __VLS_export: import("vue").DefineComponent<{
         };
     });
 }, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare namespace __VLS_componentsOption {
+    let AvatarRoot: {
+        new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("reka-ui").AvatarRootProps> & 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").AvatarRootProps> & Readonly<{}>, {}, {}, {}, {}, {}>;
+        __isFragment?: never;
+        __isTeleport?: never;
+        __isSuspense?: never;
+    } & import("vue").ComponentOptionsBase<Readonly<import("reka-ui").AvatarRootProps> & 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;
+        };
+    });
+    let AvatarImage: {
+        new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("reka-ui").AvatarImageProps> & Readonly<{
+            onLoadingStatusChange?: ((value: "idle" | "loading" | "loaded" | "error") => any) | undefined;
+        }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+            loadingStatusChange: (value: "idle" | "loading" | "loaded" | "error") => any;
+        }, 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").AvatarImageProps> & Readonly<{
+            onLoadingStatusChange?: ((value: "idle" | "loading" | "loaded" | "error") => any) | undefined;
+        }>, {}, {}, {}, {}, {}>;
+        __isFragment?: never;
+        __isTeleport?: never;
+        __isSuspense?: never;
+    } & import("vue").ComponentOptionsBase<Readonly<import("reka-ui").AvatarImageProps> & Readonly<{
+        onLoadingStatusChange?: ((value: "idle" | "loading" | "loaded" | "error") => any) | undefined;
+    }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+        loadingStatusChange: (value: "idle" | "loading" | "loaded" | "error") => any;
+    }, 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;
+        };
+    });
+    let AvatarFallback: {
+        new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("reka-ui").AvatarFallbackProps> & 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").AvatarFallbackProps> & Readonly<{}>, {}, {}, {}, {}, {}>;
+        __isFragment?: never;
+        __isTeleport?: never;
+        __isSuspense?: never;
+    } & import("vue").ComponentOptionsBase<Readonly<import("reka-ui").AvatarFallbackProps> & 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_18: {};
 import FuroAvatarContext from './FuroAvatarContext.js';