@citizenplane/pimp 14.1.1 → 14.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citizenplane/pimp",
-  "version": "14.1.1",
+  "version": "14.1.3",
   "scripts": {
     "dev": "storybook dev -p 8080",
     "build-storybook": "storybook build --output-dir ./docs",

package/src/components/CpAccordion.vue

@@ -145,6 +145,11 @@ const handleClick = () => (isToggled.value = !isToggled.value)
     &:hover {
       background-color: var(--cp-background-primary-hover);
     }
+
+    &:focus-visible {
+      outline-offset: calc(var(--cp-spacing-sm) * -1);
+      border-radius: var(--cp-radius-md);
+    }
   }
 
   &__title {

package/src/components/CpSelect.vue

@@ -13,13 +13,12 @@
     <div class="cpSelect__container">
       <select
         :id="selectReferenceId"
+        v-model="selectModel"
         :autocomplete="autocomplete"
         class="cpSelect__inner"
         :disabled="disabled"
         :name="name"
         :required="required"
-        :value="modelValue"
-        @input="handleChange"
       >
         <option :disabled="hideDefaultValue" value="">{{ defaultValue }}</option>
         <option v-for="(option, index) in options" :key="index" :value="option.value">{{ option.label }}</option>
@@ -45,10 +44,6 @@ import CpTransitionExpand from '@/components/CpTransitionExpand.vue'
 import type { Sizes } from '@/constants'
 import { capitalizeFirstLetter } from '@/helpers'
 
-interface Emits {
-  (e: 'update:modelValue', value: string): void
-}
-
 interface SelectOption {
   label: string
   value: string | number
@@ -63,7 +58,6 @@ interface Props {
   hideDefaultValue?: boolean
   isInvalid?: boolean
   label?: string
-  modelValue?: string | number
   name?: string
   options: SelectOption[]
   required?: boolean
@@ -73,7 +67,6 @@ interface Props {
 
 const props = withDefaults(defineProps<Props>(), {
   label: '',
-  modelValue: '',
   hideDefaultValue: false,
   defaultValue: 'Select an option',
   name: undefined,
@@ -87,16 +80,13 @@ const props = withDefaults(defineProps<Props>(), {
   tooltip: '',
 })
 
-const emit = defineEmits<Emits>()
+const selectModel = defineModel<string | number>()
 
 const selectReferenceId = useId()
-
 const helpMessageId = useId()
 const errorMessageId = useId()
 
-const capitalizedLabel = computed(() => {
-  return capitalizeFirstLetter(props.label)
-})
+const capitalizedLabel = computed(() => capitalizeFirstLetter(props.label))
 
 const dynamicClasses = computed(() => {
   return [
@@ -110,11 +100,6 @@ const dynamicClasses = computed(() => {
 
 const displayHelp = computed(() => props.help?.length && !displayErrorMessage.value)
 const displayErrorMessage = computed(() => props.isInvalid && props.errorMessage.length)
-
-const handleChange = (e: Event): void => {
-  const target = e.target as HTMLSelectElement
-  emit('update:modelValue', target.value)
-}
 </script>
 
 <style lang="scss">

package/src/stories/CpSelect.stories.ts

@@ -96,7 +96,7 @@ export const Default: Story = {
   render: (args) => ({
     components: { CpSelect },
     setup() {
-      const value = ref('')
+      const value = ref('3')
       return { args, value }
     },
     template: `