@openreachtech/furo-vue 1.4.0 → 1.6.0

package/lib/assets/css/furo/0040.variables-component-furo.css

@@ -1,28 +1,30 @@
-:root {
-  /* Checkbox */
-  --furo-checkbox-size: 1.125rem;
-  --furo-checkbox-icon-size: 1rem;
+@layer furo {
+  :root {
+    /* Checkbox */
+    --furo-checkbox-size: 1.125rem;
+    --furo-checkbox-icon-size: 1rem;
 
-  /* Dialog */
-  --furo-dialog-overlay-background: rgba(0, 0, 0, 0.5);
+    /* Dialog */
+    --furo-dialog-overlay-background: rgba(0, 0, 0, 0.5);
 
-  /* Toast — per-type icon accent (the toast body stays neutral) */
-  --furo-toast-info-accent: var(--color-muted-foreground);
-  --furo-toast-success-accent: #16a34a;
-  --furo-toast-warning-accent: #d97706;
-  --furo-toast-error-accent: var(--color-destructive);
+    /* Toast — per-type icon accent (the toast body stays neutral) */
+    --furo-toast-info-accent: var(--color-muted-foreground);
+    --furo-toast-success-accent: #16a34a;
+    --furo-toast-warning-accent: #d97706;
+    --furo-toast-error-accent: var(--color-destructive);
 
-  /* Toast — rich colors (full type-colored surface, opt-in) */
-  --furo-toast-info-bg: #eff6ff;
-  --furo-toast-info-border: #bfdbfe;
-  --furo-toast-info-foreground: #1e40af;
-  --furo-toast-success-bg: #f0fdf4;
-  --furo-toast-success-border: #bbf7d0;
-  --furo-toast-success-foreground: #166534;
-  --furo-toast-warning-bg: #fffbeb;
-  --furo-toast-warning-border: #fde68a;
-  --furo-toast-warning-foreground: #92400e;
-  --furo-toast-error-bg: #fef2f2;
-  --furo-toast-error-border: #fecaca;
-  --furo-toast-error-foreground: #991b1b;
+    /* Toast — rich colors (full type-colored surface, opt-in) */
+    --furo-toast-info-bg: #eff6ff;
+    --furo-toast-info-border: #bfdbfe;
+    --furo-toast-info-foreground: #1e40af;
+    --furo-toast-success-bg: #f0fdf4;
+    --furo-toast-success-border: #bbf7d0;
+    --furo-toast-success-foreground: #166534;
+    --furo-toast-warning-bg: #fffbeb;
+    --furo-toast-warning-border: #fde68a;
+    --furo-toast-warning-foreground: #92400e;
+    --furo-toast-error-bg: #fef2f2;
+    --furo-toast-error-border: #fecaca;
+    --furo-toast-error-foreground: #991b1b;
+  }
 }

package/lib/components/atoms/FuroIcon/FuroIcon.vue

@@ -68,7 +68,7 @@ export default defineComponent({
   }
 
   .unit-icon.unresolved {
-    color: var(--color-warning);
+    color: var(--color-warning-text);
   }
 }
 </style>

package/lib/components/molecules/FuroAttachment/FuroAttachment.vue

@@ -348,7 +348,7 @@ export default defineComponent({
     width: 1.5rem;
     height: 1.5rem;
 
-    color: var(--color-info);
+    color: var(--color-info-text);
   }
 
   .unit-attachment .action-icon {

package/lib/components/molecules/FuroBreadcrumb/FuroBreadcrumb.vue

@@ -207,7 +207,7 @@ export default defineComponent({
     display: inline-flex;
     align-items: center;
 
-    color: var(--color-foreground-tertiary);
+    color: var(--color-foreground-glyph);
   }
 
   .unit-breadcrumb .separator-icon,

package/lib/components/molecules/FuroControlBlock/FuroControlBlock.vue

@@ -125,7 +125,7 @@ export default defineComponent({
   .unit-form-control-block > .label > .required-mark {
     margin-inline-start: 0.125rem;
 
-    color: var(--color-destructive);
+    color: var(--color-destructive-text);
   }
 
   .unit-form-control-block.horizontal > .control {
@@ -138,7 +138,7 @@ export default defineComponent({
 
     list-style: none;
 
-    color: var(--color-destructive);
+    color: var(--color-destructive-text);
     font: var(--font-body-small);
   }
 

package/lib/components/molecules/FuroDropdownMenu/FuroDropdownMenu.vue

@@ -309,7 +309,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);
 
     user-select: none;
     cursor: default;
@@ -329,7 +329,7 @@ export default defineComponent({
   }
 
   .unit-dropdown-menu-content > .menu-option.destructive {
-    color: var(--color-destructive);
+    color: var(--color-destructive-text);
   }
 
   .unit-dropdown-menu-content > .menu-option.destructive[data-highlighted]:not([data-disabled]) {

package/lib/components/molecules/FuroErrorState/FuroErrorState.vue

@@ -98,7 +98,7 @@ export default defineComponent({
   .unit-error-state > .icon {
     display: flex;
 
-    color: var(--color-destructive);
+    color: var(--color-destructive-text);
     font-size: 2rem;
   }
 

package/lib/components/molecules/FuroSearchField/FuroSearchField.vue

@@ -128,7 +128,7 @@ export default defineComponent({
     display: inline-flex;
     align-items: center;
 
-    color: var(--color-foreground-tertiary);
+    color: var(--color-foreground-glyph);
   }
 
   .unit-form-control.search > .leading > .leading-icon {

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%;
 
@@ -270,7 +271,7 @@ export default defineComponent({
     padding-block: 0.5rem;
     padding-inline: 0.5rem;
 
-    color: var(--color-foreground-tertiary);
+    color: var(--color-foreground-secondary);
     font: var(--font-label-tiny);
   }
 
@@ -292,6 +293,7 @@ export default defineComponent({
     border: none;
     border-radius: var(--size-border-radius-large);
 
+    box-sizing: border-box;
     width: 100%;
 
     display: flex;
@@ -379,7 +381,7 @@ export default defineComponent({
     width: 0.875rem;
     height: 0.875rem;
 
-    color: var(--color-foreground-tertiary);
+    color: var(--color-foreground-glyph);
   }
 
   /* nested sub-rows */
@@ -425,6 +427,7 @@ export default defineComponent({
     border: none;
     border-radius: var(--size-border-radius-large);
 
+    box-sizing: border-box;
     width: 100%;
 
     display: flex;
@@ -435,7 +438,7 @@ export default defineComponent({
 
     background-color: transparent;
 
-    color: var(--color-foreground-tertiary);
+    color: var(--color-foreground-secondary);
     font: var(--font-label-small);
     text-align: start;
 

package/lib/components/organisms/FuroTable/FuroTable.vue

@@ -673,7 +673,7 @@ export default defineComponent({
   }
 
   .unit-table .state-row.error > td {
-    color: var(--color-destructive);
+    color: var(--color-destructive-text);
   }
 
   .unit-table .spinner-icon {

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,
 }