orio-ui 1.16.2 → 1.18.0

package/dist/runtime/components/Popover.d.vue.ts

@@ -1,3 +1,20 @@
+type PopoverPosition = "top" | "bottom" | "left" | "right" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "left-top" | "left-bottom" | "right-top" | "right-bottom";
+interface PopoverProps {
+    /**
+     * Defines where the popover is placed relative to the trigger.
+     * Acceptable single values: 'top', 'bottom', 'left', 'right'
+     * Acceptable combos: 'top-left', 'top-right', 'bottom-left', 'bottom-right',
+     *                    'left-top', 'left-bottom', 'right-top', 'right-bottom'
+     * If you only provide 'top', 'bottom', 'left', or 'right',
+     * it aligns center by default.
+     */
+    position?: PopoverPosition;
+    /**
+     * Distance (in px) between the popover and the trigger element.
+     */
+    offset?: number;
+    disabled?: boolean;
+}
 /**
  * Toggles popover visibility.
  * @param {boolean|null} force - If `true`/`false`, force that state; if `null`, toggle.
@@ -5,67 +22,21 @@
 declare function togglePopover(force?: boolean | null): Promise<void>;
 declare var __VLS_1: {
     toggle: typeof togglePopover;
+    isOpen: boolean;
 }, __VLS_15: {
     toggle: typeof togglePopover;
+    isOpen: true;
 };
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 } & {
     content?: (props: typeof __VLS_15) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    /**
-     * Defines where the popover is placed relative to the trigger.
-     * Acceptable single values: 'top', 'bottom', 'left', 'right'
-     * Acceptable combos: 'top-left', 'top-right', 'bottom-left', 'bottom-right',
-     *                    'left-top', 'left-bottom', 'right-top', 'right-bottom'
-     * If you only provide 'top', 'bottom', 'left', or 'right',
-     * it aligns center by default.
-     */
-    position: {
-        type: StringConstructor;
-        default: string;
-    };
-    /**
-     * Distance (in px) between the popover and the trigger element.
-     */
-    offset: {
-        type: NumberConstructor;
-        default: number;
-    };
-    disabled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    /**
-     * Defines where the popover is placed relative to the trigger.
-     * Acceptable single values: 'top', 'bottom', 'left', 'right'
-     * Acceptable combos: 'top-left', 'top-right', 'bottom-left', 'bottom-right',
-     *                    'left-top', 'left-bottom', 'right-top', 'right-bottom'
-     * If you only provide 'top', 'bottom', 'left', or 'right',
-     * it aligns center by default.
-     */
-    position: {
-        type: StringConstructor;
-        default: string;
-    };
-    /**
-     * Distance (in px) between the popover and the trigger element.
-     */
-    offset: {
-        type: NumberConstructor;
-        default: number;
-    };
-    disabled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>> & Readonly<{}>, {
+declare const __VLS_base: import("vue").DefineComponent<PopoverProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<PopoverProps> & Readonly<{}>, {
     disabled: boolean;
-    position: string;
+    position: PopoverPosition;
     offset: number;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/Popover.vue

@@ -1,18 +1,18 @@
 <template>
   <div>
-    <div ref="trigger">
-      <slot :toggle="togglePopover" />
+    <div ref="triggerRef">
+      <slot :toggle="togglePopover" :is-open="showPopover" />
     </div>
 
     <Teleport to="body">
       <Transition name="animate-fade-slide" appear>
         <div
           v-if="showPopover"
-          ref="popover"
+          ref="containerRef"
           class="popover"
           :style="popoverStyle"
         >
-          <slot name="content" :toggle="togglePopover" />
+          <slot name="content" :toggle="togglePopover" :is-open="showPopover" />
         </div>
       </Transition>
     </Teleport>
@@ -20,43 +20,20 @@
 </template>
 
 <script setup>
+import { ref, computed, nextTick, useTemplateRef, watch } from "vue";
 import {
-  ref,
-  computed,
-  nextTick,
-  onMounted,
-  onBeforeUnmount,
-  watch
-} from "vue";
-import { useElementBounding } from "@vueuse/core";
+  useElementBounding,
+  onClickOutside,
+  useEventListener
+} from "@vueuse/core";
 const props = defineProps({
-  /**
-   * Defines where the popover is placed relative to the trigger.
-   * Acceptable single values: 'top', 'bottom', 'left', 'right'
-   * Acceptable combos: 'top-left', 'top-right', 'bottom-left', 'bottom-right',
-   *                    'left-top', 'left-bottom', 'right-top', 'right-bottom'
-   * If you only provide 'top', 'bottom', 'left', or 'right',
-   * it aligns center by default.
-   */
-  position: {
-    type: String,
-    default: "bottom-left"
-  },
-  /**
-   * Distance (in px) between the popover and the trigger element.
-   */
-  offset: {
-    type: Number,
-    default: 10
-  },
-  disabled: {
-    type: Boolean,
-    default: false
-  }
+  position: { type: String, required: false, default: "bottom-left" },
+  offset: { type: Number, required: false, default: 10 },
+  disabled: { type: Boolean, required: false, default: false }
 });
-const trigger = ref(null);
-const popover = ref(null);
-const { width: popoverWidth, height: popoverHeight } = useElementBounding(popover);
+const triggerRef = useTemplateRef("triggerRef");
+const containerRef = useTemplateRef("containerRef");
+const { width: popoverWidth, height: popoverHeight } = useElementBounding(containerRef);
 const showPopover = ref(false);
 const triggerRect = ref(null);
 const popoverRect = ref(null);
@@ -96,7 +73,7 @@ const popoverStyle = computed(() => {
 });
 const currentPosition = ref(props.position);
 const getFallbackPositions = (pos) => {
-  const [main, sub = "center"] = pos.split("-");
+  const [main = "", sub = "center"] = pos.split("-");
   const opposites = {
     top: "bottom",
     bottom: "top",
@@ -107,15 +84,19 @@ const getFallbackPositions = (pos) => {
     `${main}-${sub}`,
     `${opposites[main]}-${sub}`,
     `${main}-center`,
-    `${opposites[main]}-center`,
-    `${sub}-${main}`,
-    // e.g. left-top
-    `${sub}-${opposites[main]}`
+    `${opposites[main]}-center`
   ];
+  if (sub !== "center") {
+    allPositions.push(
+      `${sub}-${main}`,
+      // e.g. left-top
+      `${sub}-${opposites[main]}`
+    );
+  }
   return [...new Set(allPositions)];
 };
 function checkIfFits(position, tRect, pRect, offset) {
-  const [main, sub = "center"] = position.split("-");
+  const [main] = position.split("-");
   const space = {
     top: tRect.top,
     bottom: window.innerHeight - tRect.bottom,
@@ -130,15 +111,14 @@ function checkIfFits(position, tRect, pRect, offset) {
 }
 async function updateRects() {
   await nextTick();
-  const triggerEl = trigger.value;
-  const popoverEl = popover.value?.firstElementChild || popover.value;
+  const triggerEl = triggerRef.value;
+  const popoverEl = containerRef.value;
   if (!triggerEl || !popoverEl) return;
   const tRect = triggerEl.getBoundingClientRect();
   triggerRect.value = tRect;
   const fallbacks = getFallbackPositions(props.position);
+  popoverEl.style.visibility = "hidden";
   for (const pos of fallbacks) {
-    popoverEl.style.visibility = "hidden";
-    popoverEl.style.display = "block";
     const pRect = popoverEl.getBoundingClientRect();
     const fits = checkIfFits(pos, tRect, pRect, props.offset);
     if (fits) {
@@ -150,6 +130,7 @@ async function updateRects() {
   }
   popoverRect.value = popoverEl.getBoundingClientRect();
   currentPosition.value = props.position;
+  popoverEl.style.visibility = "";
 }
 async function togglePopover(force = null) {
   if (props.disabled) return;
@@ -158,29 +139,20 @@ async function togglePopover(force = null) {
   await nextTick();
   updateRects();
 }
-function handleDocumentClick(e) {
-  if (!showPopover.value) return;
-  const clickedInsideTrigger = trigger.value && trigger.value.contains(e.target);
-  const clickedInsidePopover = popover.value && popover.value.contains(e.target);
-  if (!clickedInsideTrigger && !clickedInsidePopover) {
+onClickOutside(
+  containerRef,
+  () => {
     showPopover.value = false;
-  }
-}
+  },
+  { ignore: [triggerRef] }
+);
 function redrawPopover() {
   if (!showPopover.value) return;
   updateRects();
 }
 watch([popoverWidth, popoverHeight], redrawPopover);
-onMounted(() => {
-  document.addEventListener("click", handleDocumentClick);
-  window.addEventListener("scroll", redrawPopover, true);
-  window.addEventListener("resize", redrawPopover, true);
-});
-onBeforeUnmount(() => {
-  document.removeEventListener("click", handleDocumentClick);
-  window.removeEventListener("scroll", redrawPopover, true);
-  window.removeEventListener("resize", redrawPopover, true);
-});
+useEventListener(window, "scroll", redrawPopover, { capture: true });
+useEventListener(window, "resize", redrawPopover, { capture: true });
 </script>
 
 <style scoped>

package/dist/runtime/components/Popover.vue.d.ts

@@ -1,3 +1,20 @@
+type PopoverPosition = "top" | "bottom" | "left" | "right" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "left-top" | "left-bottom" | "right-top" | "right-bottom";
+interface PopoverProps {
+    /**
+     * Defines where the popover is placed relative to the trigger.
+     * Acceptable single values: 'top', 'bottom', 'left', 'right'
+     * Acceptable combos: 'top-left', 'top-right', 'bottom-left', 'bottom-right',
+     *                    'left-top', 'left-bottom', 'right-top', 'right-bottom'
+     * If you only provide 'top', 'bottom', 'left', or 'right',
+     * it aligns center by default.
+     */
+    position?: PopoverPosition;
+    /**
+     * Distance (in px) between the popover and the trigger element.
+     */
+    offset?: number;
+    disabled?: boolean;
+}
 /**
  * Toggles popover visibility.
  * @param {boolean|null} force - If `true`/`false`, force that state; if `null`, toggle.
@@ -5,67 +22,21 @@
 declare function togglePopover(force?: boolean | null): Promise<void>;
 declare var __VLS_1: {
     toggle: typeof togglePopover;
+    isOpen: boolean;
 }, __VLS_15: {
     toggle: typeof togglePopover;
+    isOpen: true;
 };
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 } & {
     content?: (props: typeof __VLS_15) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    /**
-     * Defines where the popover is placed relative to the trigger.
-     * Acceptable single values: 'top', 'bottom', 'left', 'right'
-     * Acceptable combos: 'top-left', 'top-right', 'bottom-left', 'bottom-right',
-     *                    'left-top', 'left-bottom', 'right-top', 'right-bottom'
-     * If you only provide 'top', 'bottom', 'left', or 'right',
-     * it aligns center by default.
-     */
-    position: {
-        type: StringConstructor;
-        default: string;
-    };
-    /**
-     * Distance (in px) between the popover and the trigger element.
-     */
-    offset: {
-        type: NumberConstructor;
-        default: number;
-    };
-    disabled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    /**
-     * Defines where the popover is placed relative to the trigger.
-     * Acceptable single values: 'top', 'bottom', 'left', 'right'
-     * Acceptable combos: 'top-left', 'top-right', 'bottom-left', 'bottom-right',
-     *                    'left-top', 'left-bottom', 'right-top', 'right-bottom'
-     * If you only provide 'top', 'bottom', 'left', or 'right',
-     * it aligns center by default.
-     */
-    position: {
-        type: StringConstructor;
-        default: string;
-    };
-    /**
-     * Distance (in px) between the popover and the trigger element.
-     */
-    offset: {
-        type: NumberConstructor;
-        default: number;
-    };
-    disabled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>> & Readonly<{}>, {
+declare const __VLS_base: import("vue").DefineComponent<PopoverProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<PopoverProps> & Readonly<{}>, {
     disabled: boolean;
-    position: string;
+    position: PopoverPosition;
     offset: number;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/RadioButton.d.vue.ts

@@ -1,10 +1,11 @@
-export interface RadioButtonProps {
+import type { ControlProps } from "./ControlElement.vue.js";
+export interface RadioButtonProps extends ControlProps {
     /** The value this radio represents; compared to v-model to determine checked state */
     value?: unknown;
     /** HTML name attribute — groups radios together so only one is selected at a time */
     name?: string;
     /** Inline label text (alternative to default slot) */
-    label?: string;
+    text?: string;
     /** Visually hides the label while keeping it accessible to SR (screen readers) */
     hideLabel?: boolean;
 }

package/dist/runtime/components/RadioButton.vue

@@ -1,15 +1,22 @@
 <script setup>
 const modelValue = defineModel({ type: null });
-defineProps({
+const props = defineProps({
   value: { type: null, required: false },
   name: { type: String, required: false },
+  text: { type: String, required: false },
+  hideLabel: { type: Boolean, required: false },
+  appearance: { type: String, required: false },
+  error: { type: [String, null], required: false },
+  group: { type: Boolean, required: false },
+  id: { type: String, required: false },
   label: { type: String, required: false },
-  hideLabel: { type: Boolean, required: false }
+  layout: { type: String, required: false },
+  size: { type: String, required: false }
 });
 </script>
 
 <template>
-  <orio-control-element class="radio">
+  <orio-control-element v-bind="props" class="radio">
     <label class="radio-label">
       <input
         v-model="modelValue"
@@ -21,11 +28,11 @@ defineProps({
       />
       <span class="radio-box" />
       <span
-        v-if="label || $slots.default"
+        v-if="text || $slots.default"
         class="radio-text"
         :class="{ 'sr-only': hideLabel }"
       >
-        <slot>{{ label }}</slot>
+        <slot>{{ text }}</slot>
       </span>
     </label>
   </orio-control-element>

package/dist/runtime/components/RadioButton.vue.d.ts

@@ -1,10 +1,11 @@
-export interface RadioButtonProps {
+import type { ControlProps } from "./ControlElement.vue.js";
+export interface RadioButtonProps extends ControlProps {
     /** The value this radio represents; compared to v-model to determine checked state */
     value?: unknown;
     /** HTML name attribute — groups radios together so only one is selected at a time */
     name?: string;
     /** Inline label text (alternative to default slot) */
-    label?: string;
+    text?: string;
     /** Visually hides the label while keeping it accessible to SR (screen readers) */
     hideLabel?: boolean;
 }

package/dist/runtime/components/Selector.d.vue.ts

@@ -1,5 +1,6 @@
+import type { ControlProps } from "./ControlElement.vue.js";
 export type SelectableOption<T extends object = object> = string | T;
-export interface SelectProps<T extends object = object> {
+export interface SelectProps<T extends object = object> extends ControlProps {
     options: SelectableOption[];
     multiple?: boolean;
     field?: string;

package/dist/runtime/components/Selector.vue

@@ -1,11 +1,19 @@
 <script setup>
-import { computed, toRefs } from "vue";
+import { computed, ref, toRefs } from "vue";
+import { useListKeyboard } from "../composables/useListKeyboard";
 const props = defineProps({
   options: { type: Array, required: true },
   multiple: { type: Boolean, required: false },
   field: { type: String, required: false, default: "id" },
   optionName: { type: String, required: false },
-  placeholder: { type: String, required: false, default: "Select an option" }
+  placeholder: { type: String, required: false, default: "Select an option" },
+  appearance: { type: String, required: false },
+  error: { type: [String, null], required: false },
+  group: { type: Boolean, required: false },
+  id: { type: String, required: false },
+  label: { type: String, required: false },
+  layout: { type: String, required: false },
+  size: { type: String, required: false }
 });
 const { field, optionName, placeholder } = toRefs(props);
 const modelValue = defineModel({ type: null, ...{
@@ -59,15 +67,53 @@ function getOptionKey(option) {
   if (typeof option === "string") return option;
   return String(option[key.value]);
 }
+const controlProps = computed(() => {
+  const {
+    options: _options,
+    multiple: _multiple,
+    field: _field,
+    optionName: _optionName,
+    placeholder: _placeholder,
+    ...rest
+  } = props;
+  return rest;
+});
 const selectorAttrs = computed(() => ({ getOptionKey, getOptionLabel }));
+const popoverToggleRef = ref(() => {
+});
+const {
+  highlightedIndex,
+  listRef,
+  onKeydown,
+  reset: resetHighlight
+} = useListKeyboard({
+  count: () => props.options.length,
+  onSelect: (index) => toggleOption(props.options[index], () => popoverToggleRef.value(false)),
+  onOpen: () => {
+    popoverToggleRef.value(true);
+    resetHighlight();
+  },
+  onClose: () => popoverToggleRef.value(false),
+  initialIndex: () => props.options.findIndex(isOptionSelected)
+});
 </script>
 
 <template>
-  <orio-control-element>
+  <orio-control-element v-bind="controlProps">
     <orio-popover position="bottom-right" :offset="5">
-      <template #default="{ toggle }">
+      <template #default="{ toggle, isOpen }">
         <slot name="trigger" :toggle>
-          <div class="selector-trigger" @click="toggle()">
+          <button
+            :id="props.id"
+            type="button"
+            class="selector-trigger"
+            aria-haspopup="listbox"
+            :aria-expanded="isOpen"
+            @click="toggle();
+  !isOpen && resetHighlight()"
+            @keydown="popoverToggleRef = toggle;
+  onKeydown($event, isOpen)"
+          >
             <slot
               name="trigger-content"
               :toggle
@@ -91,18 +137,29 @@ const selectorAttrs = computed(() => ({ getOptionKey, getOptionLabel }));
               </div>
               <orio-icon name="chevron-down" />
             </slot>
-          </div>
+          </button>
         </slot>
       </template>
 
       <template #content="{ toggle }">
         <div class="selector-content">
-          <ul v-if="options.length">
+          <ul
+            v-if="options.length"
+            ref="listRef"
+            role="listbox"
+            :aria-multiselectable="multiple || void 0"
+          >
             <li
-              v-for="option in options"
+              v-for="(option, index) in options"
               :key="getOptionKey(option)"
-              :class="{ selected: isOptionSelected(option) }"
+              role="option"
+              :aria-selected="isOptionSelected(option)"
+              :class="{
+  selected: isOptionSelected(option),
+  highlighted: index === highlightedIndex
+}"
               @click="toggleOption(option, toggle)"
+              @mouseenter="highlightedIndex = index"
             >
               <slot
                 name="option"
@@ -127,6 +184,7 @@ const selectorAttrs = computed(() => ({ getOptionKey, getOptionLabel }));
 
 <style scoped>
 .selector-trigger {
+  width: 100%;
   z-index: 1;
   min-height: 1.5rem;
   user-select: none;
@@ -178,7 +236,7 @@ const selectorAttrs = computed(() => ({ getOptionKey, getOptionLabel }));
   transition: background-color 0.15s ease, color 0.15s ease;
   color: var(--color-text);
 }
-.selector-content ul li:hover {
+.selector-content ul li:hover, .selector-content ul li.highlighted {
   background-color: var(--color-surface); /* neutral lift */
 }
 .selector-content ul li.selected {

package/dist/runtime/components/Selector.vue.d.ts

@@ -1,5 +1,6 @@
+import type { ControlProps } from "./ControlElement.vue.js";
 export type SelectableOption<T extends object = object> = string | T;
-export interface SelectProps<T extends object = object> {
+export interface SelectProps<T extends object = object> extends ControlProps {
     options: SelectableOption[];
     multiple?: boolean;
     field?: string;

package/dist/runtime/components/SwitchButton.d.vue.ts

@@ -1,4 +1,5 @@
-interface Props {
+import type { ControlProps } from "./ControlElement.vue.js";
+interface Props extends ControlProps {
     disabled?: boolean;
 }
 type __VLS_Props = Props;

package/dist/runtime/components/SwitchButton.vue

@@ -1,6 +1,13 @@
 <script setup>
 const props = defineProps({
-  disabled: { type: Boolean, required: false, default: false }
+  disabled: { type: Boolean, required: false, default: false },
+  appearance: { type: String, required: false },
+  error: { type: [String, null], required: false },
+  group: { type: Boolean, required: false },
+  id: { type: String, required: false },
+  label: { type: String, required: false },
+  layout: { type: String, required: false },
+  size: { type: String, required: false }
 });
 const modelValue = defineModel({ type: Boolean, ...{ required: false } });
 function toggle() {
@@ -10,9 +17,10 @@ function toggle() {
 </script>
 
 <template>
-  <orio-control-element v-slot="{ id }">
+  <orio-control-element v-slot="{ id }" v-bind="props">
     <button
       :id
+      v-bind="$attrs"
       class="switch-button"
       :class="{ active: modelValue, disabled }"
       :disabled="disabled"

package/dist/runtime/components/SwitchButton.vue.d.ts

@@ -1,4 +1,5 @@
-interface Props {
+import type { ControlProps } from "./ControlElement.vue.js";
+interface Props extends ControlProps {
     disabled?: boolean;
 }
 type __VLS_Props = Props;

package/dist/runtime/components/Textarea.d.vue.ts

@@ -1,5 +1,6 @@
+import type { ControlProps } from "./ControlElement.vue.js";
 import type { InputLayout } from "./Input.vue.js";
-interface Props {
+interface Props extends Omit<ControlProps, "layout"> {
     layout?: InputLayout;
 }
 type __VLS_Props = Props;

package/dist/runtime/components/Textarea.vue

@@ -1,20 +1,24 @@
 <script setup>
-import { useAttrs } from "vue";
-const attrs = useAttrs();
 const modelValue = defineModel({ type: String, ...{ default: "" } });
-defineProps({
-  layout: { type: String, required: false, default: "vertical" }
+const props = defineProps({
+  layout: { type: String, required: false, default: "vertical" },
+  appearance: { type: String, required: false },
+  error: { type: [String, null], required: false },
+  group: { type: Boolean, required: false },
+  id: { type: String, required: false },
+  label: { type: String, required: false },
+  size: { type: String, required: false }
 });
 </script>
 
 <template>
   <orio-control-element
     v-slot="{ id }"
-    v-bind="attrs"
+    v-bind="props"
     :layout="layout === 'inner' ? 'vertical' : layout"
     :class="{ inner: layout === 'inner' }"
   >
-    <textarea v-bind="attrs" :id v-model="modelValue" rows="4" />
+    <textarea :id v-model="modelValue" rows="4" v-bind="$attrs" />
   </orio-control-element>
 </template>
 
@@ -67,7 +71,6 @@ textarea {
 .inner :deep(.control-label) {
   position: absolute;
   z-index: 1;
-  pointer-events: none;
   left: var(--control-px);
   top: var(--control-label-block-start);
   color: var(--color-muted);