@energysage/es-ds-components 6.2.0 → 6.3.1

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [6.3.1](https://github.com/EnergySage/es-ds/compare/es-ds-components-v6.3.0...es-ds-components-v6.3.1) (2026-10-12)
+
+
+### Bug Fixes
+
+* EsAutocomplete now works in Safari inside a position fixed container with transform ([#1794](https://github.com/EnergySage/es-ds/issues/1794)) ([233fa49](https://github.com/EnergySage/es-ds/commit/233fa49838d3abf9fb956317c73ef920c5862c11))
+
+## [6.3.0](https://github.com/EnergySage/es-ds/compare/es-ds-components-v6.2.0...es-ds-components-v6.3.0) (2026-10-07)
+
+
+### Features
+
+* added EsAutocomplete ([#1777](https://github.com/EnergySage/es-ds/issues/1777)) ([2bf3f1e](https://github.com/EnergySage/es-ds/commit/2bf3f1ec79a1af24c96508cdb3662b5503f64700))
+
 ## [6.2.0](https://github.com/EnergySage/es-ds/compare/es-ds-components-v6.1.1...es-ds-components-v6.2.0) (2026-10-02)
 
 

package/app/components/es-autocomplete-clear-button.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+interface Props {
+    clearText?: string;
+}
+
+defineProps<Props>();
+
+const emit = defineEmits<{
+    clear: [];
+}>();
+</script>
+
+<template>
+    <!-- out of the tab order, not out of the accessibility tree: a screen reader
+         cursor, click, or tap still work, while a keyboard user can use select-all
+         and delete to clear the text and doesn't have tabbing to the next field impeded
+         by the clear button -->
+    <button
+        class="es-autocomplete-clear align-items-center bg-transparent border-0 d-flex flex-shrink-0 h-100 justify-content-center p-0 rounded-xs text-gray-700"
+        tabindex="-1"
+        type="button"
+        :aria-label="clearText"
+        @click="emit('clear')">
+        <icon-x
+            height="20px"
+            width="20px" />
+    </button>
+</template>
+
+<style lang="scss" scoped>
+@use '@energysage/es-ds-styles/scss/variables' as variables;
+
+/* ≥44px square so it is comfortably tappable; a flex sibling of the input, so
+ * it can never overlap the entered text */
+.es-autocomplete-clear {
+    cursor: pointer;
+    width: 2.75rem;
+
+    &:hover {
+        color: variables.$gray-900;
+    }
+
+    &:focus-visible {
+        outline: 0.125rem solid variables.$blue-600;
+        outline-offset: -0.25rem;
+    }
+}
+</style>