fds-vue-core 8.3.2 → 8.4.0

package/src/composables/useRouteFilters.ts

@@ -0,0 +1,500 @@
+import { reactive, ref, watch, type Ref } from 'vue'
+import { useRoute, useRouter, type LocationQuery, type LocationQueryRaw } from 'vue-router'
+
+// ---------------------------------------------------------------------------
+// Public schema types
+// ---------------------------------------------------------------------------
+
+export type RouteFilterValue = string | number | boolean | string[]
+
+export type RouteFilterRecord = Record<string, RouteFilterValue>
+
+export interface RouteSortDefault {
+  field?: string
+  dir?: 'asc' | 'desc' | ''
+}
+
+export interface UseRouteFiltersSchema<F extends RouteFilterRecord, D extends RouteFilterRecord> {
+  filter: F
+  draft?: D
+  sort?: RouteSortDefault
+  search?: string
+  page?: number
+}
+
+// ---------------------------------------------------------------------------
+// Return types
+// ---------------------------------------------------------------------------
+
+export type RouteFilterState<F extends RouteFilterRecord> = {
+  [K in keyof F]: F[K] extends string[] ? string[] : F[K]
+}
+
+export interface RouteSort {
+  /** Current sort value, e.g. `'-created'`, `'+name'`, or `''` */
+  readonly value: string
+  /** Current field being sorted (without sign prefix) */
+  readonly field: string
+  /** Current direction */
+  readonly dir: 'asc' | 'desc' | ''
+  /**
+   * Toggle sort for `field`.
+   * - none / other field → desc (`-field`)
+   * - `-field` → asc (`+field`)
+   * - `+field` → none (`''`)
+   */
+  toggle: (field: string) => void
+  set: (field: string, dir: 'asc' | 'desc') => void
+  clear: () => void
+  /** Icon hint for table header */
+  iconFor: (field: string) => 'ascending' | 'descending' | 'sort'
+}
+
+export interface RouteDraftControl<D extends RouteFilterRecord> {
+  /** Reactive draft state — edit directly without .value */
+  readonly state: RouteFilterState<D>
+  /** Copy active filter values into draft (call before opening modal) */
+  open: () => void
+  /** Apply draft values to active filter (call on save) */
+  apply: () => void
+  /** Discard draft changes (call on cancel) */
+  cancel: () => void
+  /** Reset draft to schema defaults */
+  reset: () => void
+}
+
+export interface UseRouteFiltersReturn<F extends RouteFilterRecord, D extends RouteFilterRecord> {
+  /** Reactive filter state — read/write directly without .value */
+  filter: RouteFilterState<F>
+  /** Draft state + controls (only when `draft` was provided in schema) */
+  draft: RouteDraftControl<D>
+  /** Sort controls */
+  sort: RouteSort
+  /** Reactive search ref (for v-model on input) */
+  search: Ref<string>
+  /** Reactive page ref (for v-model / pagination) */
+  page: Ref<number>
+  /** Reset filter, search, page and sort to defaults */
+  reset: () => Promise<void>
+  /** Clear all schema-managed query params */
+  clear: () => Promise<void>
+}
+
+// ---------------------------------------------------------------------------
+// Internal helpers
+// ---------------------------------------------------------------------------
+
+const isArr = (v: RouteFilterValue): v is string[] => Array.isArray(v)
+
+const clone = (v: RouteFilterValue): RouteFilterValue => (isArr(v) ? [...v] : v)
+
+const cloneRecord = <F extends RouteFilterRecord>(defaults: F): RouteFilterState<F> => {
+  const out = {} as RouteFilterState<F>
+  for (const k in defaults) {
+    out[k] = clone(defaults[k]) as RouteFilterState<F>[typeof k]
+  }
+  return out
+}
+
+const isDefault = (v: RouteFilterValue, def: RouteFilterValue): boolean => {
+  if (isArr(def)) return isArr(v) && v.length === 0
+  return v === def
+}
+
+const parseValue = (key: string, query: LocationQuery, def: RouteFilterValue): RouteFilterValue => {
+  const raw = query[key]
+
+  if (isArr(def)) {
+    if (raw === undefined || raw === null) return []
+    if (Array.isArray(raw)) return raw.filter((x): x is string => x != null).map(String)
+    return [String(raw)]
+  }
+
+  if (typeof def === 'boolean') return raw === 'true'
+
+  if (typeof def === 'number') {
+    if (raw === undefined || raw === null || raw === '') return def
+    const n = Number(Array.isArray(raw) ? raw[0] : raw)
+    return Number.isFinite(n) ? n : def
+  }
+
+  if (raw === undefined || raw === null) return def
+  return String(Array.isArray(raw) ? raw[0] : raw)
+}
+
+const serializeValue = (v: RouteFilterValue, def: RouteFilterValue): LocationQueryRaw[string] | undefined => {
+  if (isDefault(v, def)) return undefined
+  if (isArr(def)) return isArr(v) && v.length > 0 ? v : undefined
+  if (typeof def === 'boolean') return v === true ? 'true' : undefined
+  if (typeof def === 'number') return String(v)
+  if (typeof v === 'string' && v !== '') return v
+  return undefined
+}
+
+const normalizeQuery = (q: LocationQuery | LocationQueryRaw): Record<string, string | string[]> => {
+  const out: Record<string, string | string[]> = {}
+  for (const k of Object.keys(q).sort()) {
+    const v = q[k]
+    if (v === undefined || v === null) continue
+    if (Array.isArray(v)) {
+      const items = v.filter((x) => x != null).map(String)
+      if (items.length) out[k] = items
+    } else {
+      out[k] = String(v)
+    }
+  }
+  return out
+}
+
+const queriesEqual = (a: LocationQuery | LocationQueryRaw, b: LocationQuery | LocationQueryRaw) =>
+  JSON.stringify(normalizeQuery(a)) === JSON.stringify(normalizeQuery(b))
+
+const statesEqual = <F extends RouteFilterRecord>(a: RouteFilterState<F>, b: RouteFilterState<F>): boolean => {
+  for (const k in a) {
+    const av = a[k] as RouteFilterValue
+    const bv = b[k] as RouteFilterValue
+    if (isArr(av)) {
+      if (!isArr(bv) || av.length !== bv.length || av.some((x, i) => x !== bv[i])) return false
+    } else if (av !== bv) {
+      return false
+    }
+  }
+  return true
+}
+
+const applyInPlace = <F extends RouteFilterRecord>(
+  target: RouteFilterState<F>,
+  source: RouteFilterState<F>,
+  defaults: F,
+) => {
+  for (const k in defaults) {
+    const next = source[k] as RouteFilterValue
+    const current = target[k] as RouteFilterValue
+    if (isArr(defaults[k])) {
+      const na = next as string[]
+      const ca = current as string[]
+      if (na.length !== ca.length || na.some((x, i) => x !== ca[i])) {
+        ca.splice(0, ca.length, ...na)
+      }
+    } else if (current !== next) {
+      target[k] = next as RouteFilterState<F>[typeof k]
+    }
+  }
+}
+
+/** Works on plain `Record<string, RouteFilterValue>` — used for draft operations */
+const copyPlain = (
+  source: Record<string, RouteFilterValue>,
+  target: Record<string, RouteFilterValue>,
+  keys: string[],
+) => {
+  for (const k of keys) {
+    const v = source[k]
+    if (isArr(v)) {
+      const ca = target[k]
+      if (Array.isArray(ca)) {
+        ca.splice(0, ca.length, ...v)
+      } else {
+        target[k] = [...v]
+      }
+    } else {
+      target[k] = clone(v)
+    }
+  }
+}
+
+// ---------------------------------------------------------------------------
+// URL constants
+// ---------------------------------------------------------------------------
+
+const SEARCH_KEY = '_search'
+const PAGE_KEY = '_page'
+const SORT_KEY = '_sort'
+
+// ---------------------------------------------------------------------------
+// Main composable
+// ---------------------------------------------------------------------------
+
+export function useRouteFilters<F extends RouteFilterRecord, D extends RouteFilterRecord = RouteFilterRecord>(
+  schema: UseRouteFiltersSchema<F, D>,
+): UseRouteFiltersReturn<F, D> {
+  const route = useRoute()
+  const router = useRouter()
+
+  const filterDefaults = schema.filter
+  const draftDefaults = (schema.draft ?? {}) as D
+  const sortDefault = schema.sort ?? {}
+  const searchDefault = schema.search ?? ''
+  const pageDefault = schema.page ?? 0
+
+  const draftKeys = Object.keys(draftDefaults) as (keyof D & keyof F)[]
+  const schemaQueryKeys = new Set([...Object.keys(filterDefaults), ...draftKeys, SEARCH_KEY, PAGE_KEY, SORT_KEY])
+
+  // ── reactive state ────────────────────────────────────────────────────────
+  const filterState = reactive(cloneRecord(filterDefaults)) as RouteFilterState<F>
+  const draftState = reactive(cloneRecord(draftDefaults as RouteFilterRecord)) as RouteFilterState<D>
+  const searchRef = ref(searchDefault)
+  const pageRef = ref(pageDefault)
+
+  // ── sort internal ref ─────────────────────────────────────────────────────
+  const defaultSortValue =
+    sortDefault.field && sortDefault.dir ? `${sortDefault.dir === 'desc' ? '-' : '+'}${sortDefault.field}` : ''
+  const sortValueRef = ref(defaultSortValue)
+
+  // ── convenience plain-object aliases for draft ops ───────────────────────
+  const filterRaw = filterState as unknown as Record<string, RouteFilterValue>
+  const draftRaw = draftState as unknown as Record<string, RouteFilterValue>
+  const draftKeyStrings = draftKeys as string[]
+
+  // ── loop guards ───────────────────────────────────────────────────────────
+  let syncingFromRoute = false
+  let syncingToRoute = false
+
+  // ── init from URL ─────────────────────────────────────────────────────────
+  const readFromRoute = () => {
+    const q = route.query
+
+    // filter
+    const parsed = cloneRecord(filterDefaults)
+    for (const k in filterDefaults) {
+      parsed[k] = parseValue(k, q, filterDefaults[k]) as RouteFilterState<F>[typeof k]
+    }
+    if (!statesEqual(filterState, parsed)) {
+      applyInPlace(filterState, parsed, filterDefaults)
+    }
+
+    // search
+    const rawSearch = q[SEARCH_KEY]
+    const nextSearch =
+      rawSearch !== undefined && rawSearch !== null
+        ? String(Array.isArray(rawSearch) ? rawSearch[0] : rawSearch)
+        : searchDefault
+    if (searchRef.value !== nextSearch) searchRef.value = nextSearch
+
+    // page
+    const rawPage = q[PAGE_KEY]
+    const nextPage =
+      rawPage !== undefined && rawPage !== null
+        ? Number(Array.isArray(rawPage) ? rawPage[0] : rawPage) || pageDefault
+        : pageDefault
+    if (pageRef.value !== nextPage) pageRef.value = nextPage
+
+    // sort
+    const rawSort = q[SORT_KEY]
+    const nextSort = typeof rawSort === 'string' && rawSort !== '' ? rawSort : defaultSortValue
+    if (sortValueRef.value !== nextSort) sortValueRef.value = nextSort
+
+    // draft: initialise from filter
+    if (draftKeys.length > 0) {
+      copyPlain(
+        filterState as unknown as Record<string, RouteFilterValue>,
+        draftState as unknown as Record<string, RouteFilterValue>,
+        draftKeys as string[],
+      )
+    }
+  }
+
+  readFromRoute()
+
+  // ── build query from state ────────────────────────────────────────────────
+  const buildQuery = (): LocationQueryRaw => {
+    const q: LocationQueryRaw = {}
+
+    // preserve non-schema keys
+    for (const k in route.query) {
+      if (!schemaQueryKeys.has(k)) q[k] = route.query[k]
+    }
+
+    // filter
+    for (const k in filterDefaults) {
+      const s = serializeValue(filterState[k] as RouteFilterValue, filterDefaults[k])
+      if (s !== undefined) q[k] = s
+    }
+
+    // search
+    if (searchRef.value !== searchDefault && searchRef.value !== '') {
+      q[SEARCH_KEY] = searchRef.value
+    }
+
+    // page
+    if (pageRef.value !== pageDefault) {
+      q[PAGE_KEY] = String(pageRef.value)
+    }
+
+    // sort
+    if (sortValueRef.value !== '' && sortValueRef.value !== defaultSortValue) {
+      q[SORT_KEY] = sortValueRef.value
+    } else if (defaultSortValue !== '' && sortValueRef.value === defaultSortValue) {
+      // default sort — omit from URL
+    }
+
+    return q
+  }
+
+  const pushRoute = (): Promise<void> | void => {
+    if (syncingFromRoute || syncingToRoute) return
+    const next = buildQuery()
+    if (queriesEqual(route.query, next)) return
+    syncingToRoute = true
+    return router
+      .replace({ query: next })
+      .then(() => undefined)
+      .finally(() => {
+        syncingToRoute = false
+      })
+  }
+
+  // ── watchers ──────────────────────────────────────────────────────────────
+  watch(
+    () => route.query,
+    () => {
+      if (syncingToRoute) return
+      syncingFromRoute = true
+      readFromRoute()
+      syncingFromRoute = false
+    },
+  )
+
+  watch(
+    filterState,
+    () => {
+      pushRoute()
+    },
+    { deep: true },
+  )
+
+  watch(searchRef, () => {
+    pushRoute()
+  })
+
+  watch(pageRef, () => {
+    pushRoute()
+  })
+
+  watch(sortValueRef, () => {
+    pushRoute()
+  })
+
+  // ── sort control ──────────────────────────────────────────────────────────
+  const sort: RouteSort = {
+    get value() {
+      return sortValueRef.value
+    },
+    get field() {
+      return sortValueRef.value.length > 1 ? sortValueRef.value.slice(1) : ''
+    },
+    get dir(): 'asc' | 'desc' | '' {
+      if (!sortValueRef.value) return ''
+      return sortValueRef.value[0] === '-' ? 'desc' : 'asc'
+    },
+    toggle(field: string) {
+      if (sortValueRef.value === `-${field}`) {
+        sortValueRef.value = `+${field}`
+      } else if (sortValueRef.value === `+${field}`) {
+        sortValueRef.value = ''
+      } else {
+        sortValueRef.value = `-${field}`
+      }
+    },
+    set(field: string, dir: 'asc' | 'desc') {
+      sortValueRef.value = `${dir === 'desc' ? '-' : '+'}${field}`
+    },
+    clear() {
+      sortValueRef.value = ''
+    },
+    iconFor(field: string): 'ascending' | 'descending' | 'sort' {
+      if (sortValueRef.value.slice(1) !== field) return 'sort'
+      return sortValueRef.value[0] === '-' ? 'descending' : 'ascending'
+    },
+  }
+
+  // ── draft control ─────────────────────────────────────────────────────────
+  const draft: RouteDraftControl<D> = {
+    state: draftState,
+    open() {
+      copyPlain(filterRaw, draftRaw, draftKeyStrings)
+    },
+    apply() {
+      copyPlain(draftRaw, filterRaw, draftKeyStrings)
+    },
+    cancel() {
+      copyPlain(filterRaw, draftRaw, draftKeyStrings)
+    },
+    reset() {
+      const defClone = cloneRecord(draftDefaults as RouteFilterRecord)
+      copyPlain(defClone as Record<string, RouteFilterValue>, draftRaw, draftKeyStrings)
+    },
+  }
+
+  // ── reset / clear ─────────────────────────────────────────────────────────
+  const reset = async () => {
+    syncingFromRoute = true
+    applyInPlace(filterState, cloneRecord(filterDefaults), filterDefaults)
+    searchRef.value = searchDefault
+    pageRef.value = pageDefault
+    sortValueRef.value = defaultSortValue
+    if (draftKeys.length > 0) {
+      copyPlain(filterRaw, draftRaw, draftKeyStrings)
+    }
+    syncingFromRoute = false
+    await pushRoute()
+  }
+
+  const clear = async () => {
+    syncingToRoute = true
+    applyInPlace(filterState, cloneRecord(filterDefaults), filterDefaults)
+    searchRef.value = searchDefault
+    pageRef.value = pageDefault
+    sortValueRef.value = defaultSortValue
+    if (draftKeys.length > 0) {
+      copyPlain(filterRaw, draftRaw, draftKeyStrings)
+    }
+    await router.replace({ query: {} }).finally(() => {
+      syncingToRoute = false
+    })
+  }
+
+  return {
+    filter: filterState,
+    draft,
+    sort,
+    search: searchRef,
+    page: pageRef,
+    reset,
+    clear,
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Legacy exports kept for backwards compat (re-exported under old names)
+// ---------------------------------------------------------------------------
+
+/** @deprecated Use `useRouteFilters` with the new schema API instead */
+export type RouteFilterSchema = RouteFilterRecord
+
+/** @deprecated */
+export const parseRouteFiltersFromQuery = <T extends RouteFilterRecord>(
+  query: LocationQuery,
+  defaults: T,
+): RouteFilterState<T> => {
+  const out = cloneRecord(defaults)
+  for (const k in defaults) {
+    out[k] = parseValue(k, query, defaults[k]) as RouteFilterState<T>[typeof k]
+  }
+  return out
+}
+
+/** @deprecated */
+export const serializeRouteFiltersToQuery = <T extends RouteFilterRecord>(
+  state: RouteFilterState<T>,
+  defaults: T,
+): LocationQueryRaw => {
+  const q: LocationQueryRaw = {}
+  for (const k in defaults) {
+    const s = serializeValue(state[k] as RouteFilterValue, defaults[k])
+    if (s !== undefined) q[k] = s
+  }
+  return q
+}
+
+export type { RouteFilterRecord as RouteFilterRefs }

package/src/index.ts

@@ -17,6 +17,7 @@ import FdsButtonSecondary from './components/Buttons/FdsButtonSecondary/FdsButto
 import FdsDevMode from './components/FdsDevMode/FdsDevMode.vue'
 import FdsExitModal from './components/FdsExitModal/FdsExitModal.vue'
 import FdsIcon from './components/FdsIcon/FdsIcon.vue'
+import FdsDrawer from './components/FdsDrawer/FdsDrawer.vue'
 import FdsModal from './components/FdsModal/FdsModal.vue'
 import FdsPagination from './components/FdsPagination/FdsPagination.vue'
 import FdsPopover from './components/FdsPopover/FdsPopover.vue'
@@ -78,6 +79,11 @@ import {
   setupRouterLinkInterceptor,
   teardownRouterLinkInterceptor,
 } from './composables/setupRouterLinkInterceptor'
+import {
+  parseRouteFiltersFromQuery,
+  serializeRouteFiltersToQuery,
+  useRouteFilters,
+} from './composables/useRouteFilters'
 import { useRouteScrollPositions } from './composables/useRouteScrollPositions'
 import { useViewportBreakpoint } from './composables/useViewportBreakpoint'
 import { capitalizeFirstLetter } from './helpers/capitalizeFirstLetter'
@@ -100,6 +106,7 @@ export {
   FdsButtonSecondary,
   FdsCheckbox,
   FdsDevMode,
+  FdsDrawer,
   FdsExitModal,
   FdsH1,
   FdsH2,
@@ -161,6 +168,9 @@ export {
   useFileSizeValidation,
   useFileValidation,
   useIsPid,
+  parseRouteFiltersFromQuery,
+  serializeRouteFiltersToQuery,
+  useRouteFilters,
   useRouteScrollPositions,
   useTreeState,
   useViewportBreakpoint,
@@ -211,6 +221,7 @@ const FdsVueCorePlugin: Plugin = {
     app.component('FdsSticker', FdsSticker)
     app.component('FdsTabs', FdsTabs)
     app.component('FdsTabsItem', FdsTabsItem)
+    app.component('FdsDrawer', FdsDrawer)
     app.component('FdsModal', FdsModal)
     app.component('FdsPagination', FdsPagination)
     app.component('FdsPopover', FdsPopover)
@@ -343,6 +354,8 @@ export type { FdsMetaProps } from './components/Typography/FdsMeta/types'
 // Other component types
 export type { FdsIconName, FdsIconProps } from './components/FdsIcon/types'
 
+export type { FdsDrawerProps } from './components/FdsDrawer/types'
+
 export type { FdsModalProps } from './components/FdsModal/types'
 
 export type { FdsPaginationProps } from './components/FdsPagination/types'
@@ -366,6 +379,19 @@ export type { FdsWizardGoPayload, FdsWizardProps, FdsWizardRoute } from './compo
 // Composable types
 export type { BreakpointKey } from './composables/useViewportBreakpoint'
 
+export type {
+  RouteFilterRecord,
+  RouteFilterRefs,
+  RouteFilterSchema,
+  RouteFilterState,
+  RouteFilterValue,
+  RouteDraftControl,
+  RouteSort,
+  RouteSortDefault,
+  UseRouteFiltersSchema,
+  UseRouteFiltersReturn,
+} from './composables/useRouteFilters'
+
 export type { DevModeEnvironmentKey } from './composables/useDevModeEnvironment'
 
 // DevMode types

package/src/lang/en.json

@@ -39,6 +39,7 @@
   "FdsInput.today": "(today)",
   "FdsListHeading.loading": "Loading...",
   "FdsListHeading.separator": "of",
+  "FdsDrawer.closeDrawer": "Close drawer",
   "FdsModal.closeModal": "Close modal window",
   "FdsPagination.currentPage": "Current page",
   "FdsPagination.firstPage": "Go to first page",

package/src/lang/sv.json

@@ -39,6 +39,7 @@
   "FdsInput.today": "(idag)",
   "FdsListHeading.loading": "Laddar...",
   "FdsListHeading.separator": "av",
+  "FdsDrawer.closeDrawer": "Stäng sidopanel",
   "FdsModal.closeModal": "Stäng dialogruta",
   "FdsPagination.currentPage": "Aktuell sida",
   "FdsPagination.firstPage": "Gå till första sidan",

package/src/slot-styles.css

@@ -100,3 +100,43 @@ input[type='search']::-ms-clear {
 .fds-tabs-item--disabled {
   @apply cursor-not-allowed pointer-events-none opacity-35 select-none;
 }
+
+/* FdsDrawer slide transitions (consumers import slot-styles.css, not fds-vue-core.css) */
+.fds-drawer-enter-active,
+.fds-drawer-leave-active {
+  transition: visibility 280ms;
+}
+
+.fds-drawer-enter-active .fds-drawer-inner {
+  transition: transform 280ms cubic-bezier(0.22, 0.61, 0.36, 1);
+}
+
+.fds-drawer-leave-active .fds-drawer-inner {
+  transition: transform 180ms cubic-bezier(0.4, 0, 1, 1);
+}
+
+.fds-drawer-enter-from .fds-drawer-inner,
+.fds-drawer-leave-to .fds-drawer-inner {
+  transform: translateY(100%);
+}
+
+.fds-drawer-enter-active .fds-drawer-backdrop,
+.fds-drawer-leave-active .fds-drawer-backdrop {
+  transition: opacity 280ms ease;
+}
+
+.fds-drawer-leave-active .fds-drawer-backdrop {
+  transition-duration: 180ms;
+}
+
+.fds-drawer-enter-from .fds-drawer-backdrop,
+.fds-drawer-leave-to .fds-drawer-backdrop {
+  opacity: 0;
+}
+
+@media (min-width: 588px) {
+  .fds-drawer-enter-from .fds-drawer-inner,
+  .fds-drawer-leave-to .fds-drawer-inner {
+    transform: translateX(100%);
+  }
+}

package/src/style.css

@@ -49,7 +49,11 @@
   }
   .link,
   .html a {
-    @apply text-blue-600 hover:text-blue-700 active:text-blue-800 underline focus-visible:outline-dashed focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-blue-500 cursor-pointer;
+    @apply text-blue-600 hover:text-blue-700 underline focus-visible:outline-dashed focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-blue-500 cursor-pointer;
+  }
+  .link:active,
+  .html a:active {
+    @apply text-blue-800;
   }
 
   .capitalize-first::first-letter {
@@ -87,3 +91,43 @@
     animation: spin-reverse 1s linear infinite;
   }
 }
+
+/* FdsDrawer slide transitions (global, outside layers so consumers always get them) */
+.fds-drawer-enter-active,
+.fds-drawer-leave-active {
+  transition: visibility 280ms;
+}
+
+.fds-drawer-enter-active .fds-drawer-inner {
+  transition: transform 280ms cubic-bezier(0.22, 0.61, 0.36, 1);
+}
+
+.fds-drawer-leave-active .fds-drawer-inner {
+  transition: transform 180ms cubic-bezier(0.4, 0, 1, 1);
+}
+
+.fds-drawer-enter-from .fds-drawer-inner,
+.fds-drawer-leave-to .fds-drawer-inner {
+  transform: translateY(100%);
+}
+
+.fds-drawer-enter-active .fds-drawer-backdrop,
+.fds-drawer-leave-active .fds-drawer-backdrop {
+  transition: opacity 280ms ease;
+}
+
+.fds-drawer-leave-active .fds-drawer-backdrop {
+  transition-duration: 180ms;
+}
+
+.fds-drawer-enter-from .fds-drawer-backdrop,
+.fds-drawer-leave-to .fds-drawer-backdrop {
+  opacity: 0;
+}
+
+@media (min-width: 588px) {
+  .fds-drawer-enter-from .fds-drawer-inner,
+  .fds-drawer-leave-to .fds-drawer-inner {
+    transform: translateX(100%);
+  }
+}