@indielayer/ui 1.3.0 → 1.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indielayer/ui",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "Indielayer UI Components with Tailwind CSS build for Vue 3",
   "author": {
     "name": "João Teixeira",
@@ -20,6 +20,7 @@
   "files": [
     "lib",
     "src",
+    "docs",
     "*.d.ts",
     "exports",
     "README.md"
@@ -64,12 +65,14 @@
     "jsdom": "^22.1.0",
     "postcss": "^8.4.4",
     "rollup-plugin-visualizer": "^5.9.2",
+    "shiki": "1.0.0-beta.1",
     "stylelint": "^14.16.1",
     "tailwindcss": "^3.3.2",
     "typescript": "^5.2.2",
     "vite": "^4.4.11",
     "vitest": "^0.32.2",
     "vue": "^3.3.9",
+    "vue-router": "^4.2.2",
     "vue-tsc": "^1.8.2"
   },
   "browserslist": [
@@ -90,9 +93,11 @@
     "access": "public"
   },
   "scripts": {
-    "dev": "pnpm generate && vite build --watch",
+    "dev": "vite dev --mode docs",
     "build": "pnpm generate && vite build",
+    "build:docs": "pnpm build --mode docs",
     "build:prod": "pnpm build && pnpm gen-types",
+    "build:watch": "pnpm generate && vite build --watch",
     "build:only": "vite build",
     "build:stats": "VITE_VISUALIZER=Y npm run build",
     "generate": "pnpm gen-version",

package/src/common/icons.ts

@@ -11,5 +11,8 @@ export const dotsIcon = '<path d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2
 export const prevIcon = '<path d="M15 19l-7-7 7-7" />'
 export const nextIcon = '<path d="M9 5l7 7-7 7" />'
 export const checkIcon = '<path d="M5 13l4 4L19 7" />'
-export const chevronDownIcon = '<path d="M8 9l4-4 4 4m0 6l-4 4-4-4" />'
+export const selectIcon = '<path d="M8 9l4-4 4 4m0 6l-4 4-4-4" />'
 export const externalIcon = '<line x1="7" y1="17" x2="17" y2="7" /><polyline points="7 7 17 7 17 17" />'
+export const stepperPristineIcon = '<path d="M7.5 4.21v.01M4.21 7.5v.01M3 12v.01m1.21 4.49v.01m3.29 3.28v.01M12 21v.01m4.5-1.22v.01m3.29-3.3v.01M21 12v.01M19.79 7.5v.01m-3.29-3.3v.01M12 3v.01"/>'
+export const stepperIncompleteIcon = '<svg focusable="false" preserveAspectRatio="xMidYMid meet" fill="currentColor" viewBox="0 0 32 32" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><path d="M23.7642 6.8593l1.2851-1.5315A13.976 13.976 0 0020.8672 2.887l-.6836 1.8776A11.9729 11.9729 0 0123.7642 6.8593zM27.81 14l1.9677-.4128A13.8888 13.8888 0 0028.14 9.0457L26.4087 10A12.52 12.52 0 0127.81 14zM20.1836 27.2354l.6836 1.8776a13.976 13.976 0 004.1821-2.4408l-1.2851-1.5315A11.9729 11.9729 0 0120.1836 27.2354zM26.4087 22L28.14 23a14.14 14.14 0 001.6382-4.5872L27.81 18.0659A12.1519 12.1519 0 0126.4087 22zM16 30V2a14 14 0 000 28z"></path></svg>'
+export const chevronDownIcon = '<path d="M19 9l-7 7-7-7" />'

package/src/components/accordion/Accordion.vue

@@ -0,0 +1,55 @@
+<script lang="ts">
+const accordionProps = {
+  tag: {
+    type: String,
+    default: 'div',
+  },
+  disabled: Boolean,
+  expanded: Boolean,
+  showIcon: {
+    type: Boolean,
+    default: true,
+  },
+  icon: String,
+  iconAlign: String as PropType<AccordionItemAlign>,
+}
+
+export type AccordionProps = ExtractPublicPropTypes<typeof accordionProps>
+
+export type AccordionInjection = AccordionProps & {
+  isInsideAccordion: boolean;
+}
+
+type InternalClasses = 'wrapper'
+export interface AccordionTheme extends ThemeComponent<AccordionProps, InternalClasses> {}
+
+export default {
+  name: 'XAccordion',
+  validators: {},
+}
+</script>
+
+<script setup lang="ts">
+import { type ExtractPublicPropTypes, type PropType, provide } from 'vue'
+import { useTheme, type ThemeComponent } from '../../composables/useTheme'
+import type { AccordionItemAlign } from './AccordionItem.vue'
+import { injectAccordionKey } from '../../composables/keys'
+
+const props = defineProps(accordionProps)
+
+provide(injectAccordionKey, { ...props, isInsideAccordion: true })
+
+const { styles, classes, className } = useTheme('Accordion', {}, props)
+</script>
+
+<template>
+  <div
+    :style="styles"
+    :class="[
+      className,
+      classes.wrapper,
+    ]"
+  >
+    <slot></slot>
+  </div>
+</template>

package/src/components/{collapse/Collapse.vue → accordion/AccordionItem.vue}

@@ -1,35 +1,61 @@
 <script lang="ts">
-const collapseProps = {
-  ...useColors.props(),
+const accordionItemAlign = ['left', 'right'] as const
+const accordionItemProps = {
   tag: {
     type: String,
     default: 'div',
   },
   disabled: Boolean,
   expanded: Boolean,
-  showIcon: Boolean,
+  showIcon: {
+    type: Boolean,
+    default: true,
+  },
   icon: String,
+  iconAlign: {
+    type: String as PropType<AccordionItemAlign>,
+    default: 'right',
+  },
 }
 
-export type CollapseProps = ExtractPublicPropTypes<typeof collapseProps>
+export type AccordionItemAlign = typeof accordionItemAlign[number]
+export type AccordionItemProps = ExtractPublicPropTypes<typeof accordionItemProps>
 
 type InternalClasses = 'wrapper' | 'icon' | 'content'
-export interface CollapseTheme extends ThemeComponent<CollapseProps, InternalClasses> {}
+type InternalData = {
+  collapsed: boolean;
+  isInsideAccordion: boolean;
+}
+export interface AccordionItemTheme extends ThemeComponent<AccordionItemProps, InternalClasses, InternalData> {}
 
-export default { name: 'XCollapse' }
+export default {
+  name: 'XAccordionItem',
+  validators: {
+    iconAlign: accordionItemAlign,
+  },
+}
 </script>
 
 <script setup lang="ts">
-import { ref, watch, type ExtractPublicPropTypes } from 'vue'
+import { ref, watch, type ExtractPublicPropTypes, type PropType, inject, computed, reactive } from 'vue'
 import { useTheme, type ThemeComponent } from '../../composables/useTheme'
-import { useColors } from '../../composables/useColors'
 
 import XIcon from '../../components/icon/Icon.vue'
+import { injectAccordionKey } from '../../composables/keys'
 
-const props = defineProps(collapseProps)
+const props = defineProps(accordionItemProps)
 
 const emit = defineEmits(['expand'])
 
+const accordionProps = inject(injectAccordionKey, {
+  isInsideAccordion: false,
+})
+
+const computedIconAlign = computed(() => accordionProps.iconAlign || props.iconAlign)
+const computedProps = reactive({
+  iconAlign: computedIconAlign,
+})
+
 const collapsed = ref(!props.expanded)
 const animated = ref(true)
 
@@ -101,7 +127,10 @@ function onExpand(anim = true) {
   emit('expand')
 }
 
-const { styles, classes, className } = useTheme('Collapse', {}, props)
+const { styles, classes, className } = useTheme('AccordionItem', {}, {
+  ...props,
+  ...computedProps,
+}, { collapsed, isInsideAccordion: accordionProps.isInsideAccordion })
 
 defineExpose({ toggle, open, close })
 </script>
@@ -114,7 +143,7 @@ defineExpose({ toggle, open, close })
     :aria-disabled="disabled"
     :aria-expanded="collapsed ? 'false' : 'true'"
   >
-    <div
+    <button
       :class="classes.wrapper"
       @click="toggle"
     >
@@ -123,29 +152,19 @@ defineExpose({ toggle, open, close })
       </div>
 
       <div v-if="showIcon" :class="classes.icon">
-        <span
-          class="flex transform transition-transform duration-150"
-          :class="[
-            {
-              'rotate-180': !collapsed,
-              'text-gray-300': disabled
-            }
-          ]"
+        <x-icon v-if="icon" :icon="icon" />
+        <svg
+          v-else
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+          fill="none"
+          role="presentation"
+          class="stroke-2 w-4 h-4"
         >
-          <x-icon v-if="icon" :icon="icon" />
-          <svg
-            v-else
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-            fill="none"
-            role="presentation"
-            class="stroke-2 w-5 h-5"
-          >
-            <path d="M19 9l-7 7-7-7" />
-          </svg>
-        </span>
+          <path d="M19 9l-7 7-7-7" />
+        </svg>
       </div>
-    </div>
+    </button>
 
     <template v-if="$slots.summary">
       <slot name="summary"></slot>

package/src/components/accordion/__tests__/Accordion.spec.ts

@@ -0,0 +1,11 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import Accordion from '../Accordion.vue'
+
+describe('Accordion', () => {
+  it('renders properly', () => {
+    const wrapper = mount(Accordion)
+
+    expect(wrapper.vm).toBeTruthy()
+  })
+})

package/src/components/accordion/index.ts

@@ -0,0 +1,4 @@
+export { default as XAccordion } from './Accordion.vue'
+export type { AccordionProps, AccordionInjection, AccordionTheme } from './Accordion.vue'
+export { default as XAccordionItem } from './AccordionItem.vue'
+export type { AccordionItemProps, AccordionItemTheme } from './AccordionItem.vue'

package/src/components/accordion/theme/Accordion.base.theme.ts

@@ -0,0 +1,9 @@
+import type { AccordionTheme } from '../Accordion.vue'
+
+const theme: AccordionTheme = {
+  classes: {
+    wrapper: 'grid grid-cols-1 divide-y',
+  },
+}
+
+export default theme

package/src/components/accordion/theme/Accordion.carbon.theme.ts

@@ -0,0 +1,7 @@
+import type { AccordionTheme } from '../Accordion.vue'
+
+import BaseTheme from './Accordion.base.theme'
+
+const theme: AccordionTheme = BaseTheme
+
+export default theme

package/src/components/accordion/theme/AccordionItem.base.theme.ts

@@ -0,0 +1,38 @@
+import type { AccordionItemTheme } from '../AccordionItem.vue'
+
+const theme: AccordionItemTheme = {
+  classes: {
+    wrapper: ({ props, slots, data }) => {
+      const classes = ['relative flex items-center w-full text-left']
+
+      if (!data.isInsideAccordion) return classes
+
+      if (slots.default) {
+        if (props.iconAlign === 'left') classes.push('pl-8 pr-4')
+        else classes.push('pr-8 pl-4')
+        classes.push('py-2')
+        if (!props.disabled) classes.push('hover:bg-gray-50 dark:hover:bg-gray-600')
+      }
+
+      if (!props.disabled) classes.push('cursor-pointer')
+
+      return classes
+    },
+
+    icon: ({ props, data }) => {
+      const classes = ['absolute flex transform transition-transform duration-150']
+
+      if (!data.collapsed) classes.push('rotate-180')
+      if (props.disabled) classes.push('text-gray-300')
+
+      if (props.iconAlign === 'left') classes.push('left-2')
+      else classes.push('right-2')
+
+      return classes
+    },
+
+    content: 'transition-[height] duration-150 overflow-y-hidden',
+  },
+}
+
+export default theme

package/src/components/accordion/theme/AccordionItem.carbon.theme.ts

@@ -0,0 +1,7 @@
+import type { AccordionItemTheme } from '../AccordionItem.vue'
+
+import BaseTheme from './AccordionItem.base.theme'
+
+const theme: AccordionItemTheme = BaseTheme
+
+export default theme

package/src/components/alert/theme/Alert.carbon.theme.ts

@@ -1,7 +1,59 @@
 import type { AlertTheme } from '../Alert.vue'
 
-import BaseTheme from './Alert.base.theme'
+const theme: AlertTheme = {
+  classes: {
+    wrapper: 'flex items-center space-x-2 px-4 py-3 border border-l-4 text-sm',
+  },
+  styles: ({ props, colors, css }) => {
+    const gray = colors.getPalette('gray')
+    const color = colors.getPalette(props.color)
+    const vars = []
 
-const theme: AlertTheme = BaseTheme
+    if (props.glow) vars.push(css.get('glow', colors.getColorOpacity(color[500], 0.5)))
+
+    if (props.color) {
+      if (props.light) {
+        vars.push(css.variables({
+          bg: color[50],
+          text: gray[900],
+          icon: color[600],
+          border: props.outlined ? color[600] : color[50],
+          dark: {
+            bg: gray[800],
+            text: gray[100],
+            icon: color[600],
+            border: props.outlined ? color[500] : color[200],
+          },
+        }))
+      } else {
+        vars.push(css.variables({
+          bg: props.outlined ? 'transparent' : color[600],
+          text: props.outlined ? color[600] : color[50],
+          icon: props.outlined ? color[600] : color[50],
+          border: color[600],
+          dark: {
+            border: color[400],
+            text: props.outlined ? color[400] : color[50],
+          },
+        }))
+      }
+
+      return vars
+    }
+
+    vars.push(css.variables({
+      bg: 'transparent',
+      text: color[500],
+      border: color[300],
+      dark: {
+        bg: 'transparent',
+        text: color[300],
+        border: color[500],
+      },
+    }))
+
+    return vars
+  },
+}
 
 export default theme

package/src/components/button/theme/Button.carbon.theme.ts

@@ -3,7 +3,7 @@ import type { ButtonTheme } from '../Button.vue'
 const theme: ButtonTheme = {
   classes: {
     wrapper({ props, slots, data }) {
-      const classes = ['relative transition duration-150 focus:outline-none inline-flex whitespace-nowrap overflow-hidden align-top appearance-none text-sm active:shadow-none border !leading-[1.28572] tracking-wide font-light']
+      const classes = ['relative transition duration-150 inline-flex whitespace-nowrap overflow-hidden align-top appearance-none text-sm active:shadow-none border !leading-[1.28572] tracking-wide font-light']
 
       // radius
       if (!data.isButtonGroup) classes.push(props.rounded ? 'rounded-full' : '')

package/src/components/carousel/CarouselSlide.vue

@@ -1,5 +1,10 @@
 <script lang="ts">
-const carouselSlideProps = {}
+const carouselSlideProps = {
+  tag: {
+    type: String,
+    default: 'div',
+  },
+}
 
 export type CarouselSlideProps = ExtractPublicPropTypes<typeof carouselSlideProps>
 
@@ -8,7 +13,6 @@ export interface CarouselSlideTheme extends ThemeComponent<CarouselSlideProps, I
 
 export default {
   name: 'XCarouselSlide',
-  validators: {},
 }
 </script>
 
@@ -22,7 +26,8 @@ const { styles, classes, className } = useTheme('CarouselSlide', {}, props)
 </script>
 
 <template>
-  <div
+  <component
+    :is="tag"
     :style="styles"
     :class="[
       className,
@@ -31,7 +36,7 @@ const { styles, classes, className } = useTheme('CarouselSlide', {}, props)
     ]"
   >
     <slot></slot>
-  </div>
+  </component>
 </template>
 
 <style lang="postcss" scoped module>

package/src/components/checkbox/Checkbox.vue

@@ -4,15 +4,15 @@ const checkboxProps = {
   ...useColors.props('primary'),
   ...useInteractive.props(),
   ...useInputtable.props(),
-  label: String,
-  helper: String,
+  value: [String, Number],
+  indeterminate: Boolean,
   glow: Boolean,
 }
 
 export type CheckboxProps = ExtractPublicPropTypes<typeof checkboxProps>
 
-type InternalClasses = 'wrapper' | 'box' | 'icon' | 'label'
-type InternalExtraData = { checked: Ref<boolean>; }
+type InternalClasses = 'wrapper' | 'content' | 'box' | 'icon' | 'label'
+type InternalExtraData = { checked: Ref<boolean>; isInsideForm: boolean; isInsideFormGroup: boolean;}
 export interface CheckboxTheme extends ThemeComponent<CheckboxProps, InternalClasses, InternalExtraData> {}
 
 export default {
@@ -24,7 +24,7 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { ref, watch, type ExtractPublicPropTypes, type Ref } from 'vue'
+import { ref, watch, type ExtractPublicPropTypes, type Ref, unref, nextTick } from 'vue'
 import { useTheme, type ThemeComponent } from '../../composables/useTheme'
 import { useCommon } from '../../composables/useCommon'
 import { useColors } from '../../composables/useColors'
@@ -41,14 +41,6 @@ const emit = defineEmits(useInputtable.emits(false))
 const elRef = ref<HTMLElement | null>(null)
 const checked = ref(false)
 
-watch(() => props.modelValue, (value) => {
-  checked.value = !!value
-}, { immediate: true })
-
-watch(() => checked.value, (value) => {
-  emit('update:modelValue', value)
-})
-
 function toggle() {
   checked.value = !checked.value
 }
@@ -57,13 +49,69 @@ const { focus, blur } = useInteractive(elRef)
 
 const {
   errorInternal,
+  hideFooterInternal,
   isInsideForm,
+  isInsideFormGroup,
+  isFirstValidation,
+  formGroup,
   reset,
   validate,
   setError,
 } = useInputtable(props, { focus, emit, withListeners: false })
 
-const { styles, classes, className } = useTheme('Checkbox', {}, props, { checked })
+if (isInsideFormGroup) {
+  watch(() => formGroup.value, () => {
+    const formGroupValue = unref(formGroup.value)
+
+    if (formGroupValue && Array.isArray(formGroupValue) && formGroupValue.includes(props.value as never)) checked.value = true
+    else checked.value = false
+  }, { immediate: true, deep: true })
+
+  watch(() => checked.value, (value) => {
+    if (!props.value) return
+
+    const formGroupValue = unref(formGroup.value)
+
+    if (value) {
+      if (formGroupValue && Array.isArray(formGroupValue)) {
+        if (!formGroupValue.includes(props.value as never)) {
+          const newValue = [...formGroupValue, props.value]
+
+          formGroup.setValue(newValue as any)
+        }
+      } else {
+        formGroup.setValue([props.value as any])
+      }
+    } else {
+      if (formGroupValue && Array.isArray(formGroupValue) && formGroupValue.includes(props.value as never)) {
+        const index = formGroupValue.findIndex((v) => v === props.value)
+        const newValue = [...formGroupValue]
+
+        newValue.splice(index, 1)
+        formGroup.setValue(newValue as any)
+      }
+    }
+  })
+} else {
+  watch(() => props.modelValue, (value) => {
+    checked.value = !!value
+  }, { immediate: true })
+
+  watch(() => checked.value, (value) => {
+    emit('update:modelValue', value)
+  })
+}
+
+const listeners = {
+  input: () => {
+    if (isInsideFormGroup) return
+    setTimeout(() => {
+      if (props.validateOnInput && !isFirstValidation.value) validate(props.modelValue)
+    }, 0)
+  },
+}
+
+const { styles, classes, className } = useTheme('Checkbox', {}, props, { checked, isInsideForm, isInsideFormGroup })
 
 defineExpose({ focus, blur, toggle, reset, validate, setError })
 </script>
@@ -74,25 +122,25 @@ defineExpose({ focus, blur, toggle, reset, validate, setError })
     :class="[
       className,
       classes.wrapper,
-      { 'mb-3': isInsideForm }
     ]"
   >
     <div
       ref="elRef"
-      class="flex items-center"
-      :class="{ 'cursor-not-allowed': disabled }"
+      :class="classes.content"
       tabindex="0"
       @keypress.prevent.stop.space="toggle"
     >
       <input
+        :id="id"
         v-model="checked"
-        :aria-checked="checked ? 'true' : 'false'"
+        :name="name"
+        :aria-checked="indeterminate ? 'mixed' : (checked ? 'true' : 'false')"
         :aria-disabled="disabled ? 'true' : undefined"
         type="checkbox"
         class="invisible absolute"
         :disabled="disabled || loading"
-        :name="name"
         :required="required"
+        v-on="listeners"
       />
       <div
         :class="[
@@ -101,6 +149,7 @@ defineExpose({ focus, blur, toggle, reset, validate, setError })
         ]"
       >
         <x-spinner v-if="loading" :size="size" class="absolute" />
+        <span v-else-if="indeterminate" name="check-icon" class="w-2/3 h-[2px] bg-white dark:bg-gray-900"></span>
         <slot v-else name="icon">
           <svg
             viewBox="0 0 20 20"
@@ -116,7 +165,7 @@ defineExpose({ focus, blur, toggle, reset, validate, setError })
       </div>
     </div>
 
-    <x-input-footer v-if="!hideFooter" :error="errorInternal" :helper="helper"/>
+    <x-input-footer v-if="!hideFooterInternal" :error="errorInternal" :helper="helper"/>
   </label>
 </template>
 

package/src/components/checkbox/theme/Checkbox.base.theme.ts

@@ -2,7 +2,13 @@ import type { CheckboxTheme } from '../Checkbox.vue'
 
 const theme: CheckboxTheme = {
   classes: {
-    wrapper: 'inline-block relative cursor-pointer align-middle',
+    wrapper: ({ data }) => {
+      const classes = ['inline-block relative cursor-pointer align-middle']
+
+      if (data.isInsideForm && !data.isInsideFormGroup) classes.push('mb-3')
+
+      return classes
+    },
 
     box: ({ props }) => {
       const classes = ['rounded flex justify-center items-center shrink-0 border-2 border-[color:var(--x-checkbox-border)] bg-[color:var(--x-checkbox-bg)] dark:border-[color:var(--x-checkbox-dark-border)] dark:bg-[color:var(--x-checkbox-dark-bg)]']
@@ -14,6 +20,14 @@ const theme: CheckboxTheme = {
       return classes
     },
 
+    content: ({ props }) => {
+      const classes = ['flex items-center']
+
+      if (props.disabled) classes.push('cursor-not-allowed')
+
+      return classes
+    },
+
     icon: ({ props }) => {
       const classes = ['fill-current text-white dark:text-gray-900']
 

package/src/components/checkbox/theme/Checkbox.carbon.theme.ts

@@ -2,10 +2,16 @@ import type { CheckboxTheme } from '../Checkbox.vue'
 
 const theme: CheckboxTheme = {
   classes: {
-    wrapper: 'inline-block relative cursor-pointer align-middle',
+    wrapper: ({ data }) => {
+      const classes = ['inline-block relative cursor-pointer align-middle']
+
+      if (data.isInsideForm && !data.isInsideFormGroup) classes.push('mb-8')
+
+      return classes
+    },
 
     box: ({ props }) => {
-      const classes = ['rounded-sm flex justify-center items-center shrink-0 border border-[color:var(--x-checkbox-border)] bg-[color:var(--x-checkbox-bg)] dark:border-[color:var(--x-checkbox-dark-border)] dark:bg-[color:var(--x-checkbox-dark-bg)]']
+      const classes = ['rounded-sm flex justify-center items-center shrink-0 border border-[color:var(--x-checkbox-border)] bg-[color:var(--x-checkbox-bg)] dark:border-[color:var(--x-checkbox-dark-border)] dark:bg-[color:var(--x-checkbox-dark-bg)] mt-0.5']
 
       if (props.size === 'xs' || props.size === 'sm') classes.push('h-3 w-3')
       else if (props.size === 'xl') classes.push('h-5 w-5')
@@ -14,6 +20,14 @@ const theme: CheckboxTheme = {
       return classes
     },
 
+    content: ({ props }) => {
+      const classes = ['flex']
+
+      if (props.disabled) classes.push('cursor-not-allowed')
+
+      return classes
+    },
+
     icon: ({ props }) => {
       const classes = ['fill-current text-white dark:text-gray-900']
 
@@ -25,7 +39,7 @@ const theme: CheckboxTheme = {
     },
 
     label: ({ props }) => {
-      const classes = ['inline-block text-gray-800 dark:text-gray-200 pl-2 text-sm']
+      const classes = ['text-gray-800 dark:text-gray-200 pl-2 text-sm']
 
       if (props.size === 'xs') classes.push('text-xs')
       else if (props.size === 'sm') classes.push('text-sm')