\n \n \n \n \n \n md\n \n \n);","file","avatar-stack.stories.tsx",{"_10":220,"_215":221,"_217":218},"Playground","const Playground = () => {\n const [expandable, setExpandable] = useState(undefined);\n const [square, setSquare] = useState(false);\n const [size, setSize] = useState(64);\n const [overlap, setOverlap] = useState(50);\n const [gap, setGap] = useState(2);\n const labelStyle = {\n display: 'flex',\n flexDirection: 'column',\n gap: 'var(--ds-size-2)',\n accentColor: 'var(--ds-color-base-default)',\n } as const;\n\n return (\n \n \n \n setExpandable((prev) => (prev ? undefined : true))}\n />\n setSquare((prev) => !prev)}\n />\n \n \n avatarSize {`${size}px`}\n \n setSize(Number((e.target as HTMLInputElement).value))\n }\n />\n \n \n Overlap {`${overlap}`}\n \n setOverlap(Number((e.target as HTMLInputElement).value))\n }\n />\n \n \n Gap {`${gap}px`}\n \n setGap(Number((e.target as HTMLInputElement).value))\n }\n />\n \n \n\n \n \n

\n \n \n

\n \n \n md\n \n \n

\n \n \n

\n \n \n \n );\n};",{"_10":223,"_215":224,"_217":218},"Expandable","const Expandable = () => (\n \n

\n expandable\n \n \n

\n \n \n

\n expandable=\"fixed\"\n \n \n

\n \n \n

\n \n);",{"_10":226,"_215":227,"_217":218},"ShapeVariants","const ShapeVariants = () => (\n \n \n \n

\n \n \n

\n \n \n);",{"_10":229,"_215":230,"_217":218},"DataSize","const DataSize = () => (\n

\n avatarSize='var(--ds-size-8)'\n \n \n

\n \n \n

\n avatarSize='3em'\n \n \n

\n \n \n

\n avatarSize='clamp(2rem, 1.5rem + 2vw, 4rem)'\n \n \n

\n \n \n

\n);",{"_10":232,"_215":233,"_217":218},"Gap","const Gap = () => (\n

\n gap='2px'\n \n \n \n \n \n \n

\n gap='4px'\n \n \n \n \n \n \n

\n gap='6px'\n \n \n \n \n \n \n

\n);",{"_10":235,"_215":236,"_217":218},"AdditionalAvatars","const AdditionalAvatars = () => (\n <>\n \n \n

\n \n \n \n \n \n \n +14\n \n \n \n \n

\n \n \n \n \n \n \n \n \n);",{"_10":238,"_215":239,"_217":218},"WithTooltipAndLink","const WithTooltipAndLink = () => (\n

\n Link + Tooltip\n \n \n \n \n

\n \n \n \n \n \n \n

\n \n \n \n \n \n BR\n \n \n \n

\n Link + Tooltip expandable\n \n \n \n \n

\n \n \n \n \n \n \n

\n \n \n \n \n \n BR\n \n \n \n

\n);","dodont",[],"mdxCode","var Component=(()=>{var p=Object.create;var s=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var l=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var g=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),y=(t,e)=>{for(var o in e)s(t,o,{get:e[o],enumerable:!0})},c=(t,e,o,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of l(e))!x.call(t,r)&&r!==o&&s(t,r,{get:()=>e[r],enumerable:!(i=h(e,r))||i.enumerable});return t};var _=(t,e,o)=>(o=t!=null?p(f(t)):{},c(e||!t||!t.__esModule?s(o,\"default\",{value:t,enumerable:!0}):o,t)),b=t=>c(s({},\"__esModule\",{value:!0}),t);var d=g((v,a)=>{a.exports=_jsx_runtime});var k={};y(k,{default:()=>m,frontmatter:()=>j});var n=_(d()),j=void 0;function u(t){let e={a:\"a\",p:\"p\",...t.components},{Alert:o}=e;return o||w(\"Alert\",!0),(0,n.jsx)(o,{\"data-color\":\"info\",children:(0,n.jsxs)(e.p,{children:[\"We are working to improve the accessibility documentation for this component. If you have questions or see something that should be prioritised, please contact us on \",(0,n.jsx)(e.a,{href:\"https://github.com/digdir/designsystemet/issues/new?template=1bug_report.yml\",children:\"Github\"}),\" or \",(0,n.jsx)(e.a,{href:\"https://designsystemet.no/slack\",children:\"Slack\"}),\".\"]})})}function m(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(u,{...t})}):u(t)}function w(t,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+t+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return b(k);})();\n;return Component;","metadata",{"_53":67,"_246":247,"_248":249},"subtitle","var Component=(()=>{var m=Object.create;var r=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,_=Object.prototype.hasOwnProperty;var j=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),h=(t,e)=>{for(var n in e)r(t,n,{get:e[n],enumerable:!0})},a=(t,e,n,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of f(e))!_.call(t,c)&&c!==n&&r(t,c,{get:()=>e[c],enumerable:!(s=u(e,c))||s.enumerable});return t};var M=(t,e,n)=>(n=t!=null?m(p(t)):{},a(e||!t||!t.__esModule?r(n,\"default\",{value:t,enumerable:!0}):n,t)),k=t=>a(r({},\"__esModule\",{value:!0}),t);var i=j((D,d)=>{d.exports=_jsx_runtime});var A={};h(A,{default:()=>l,frontmatter:()=>v});var o=M(i()),v=void 0;function x(t){let e={code:\"code\",p:\"p\",...t.components};return(0,o.jsxs)(e.p,{children:[(0,o.jsx)(e.code,{children:\"AvatarStack\"}),\" stacks a collection of \",(0,o.jsx)(e.code,{children:\"Avatar\"}),\" elements\"]})}function l(t={}){let{wrapper:e}=t.components||{};return e?(0,o.jsx)(e,{...t,children:(0,o.jsx)(x,{...t})}):x(t)}return k(A);})();\n;return Component;","image","AvatarStack.svg","linkMetadata",[252,254,258,262,264,266,269,271,273,276],{"_53":253},"AvatarStack - Designsystemet",{"_10":255,"_256":257},"description","content","`AvatarStack` stacks a collection of `Avatar` elements",{"_259":260,"_256":261},"property","og:image","/img/designsystemet-meta.png",{"_259":263,"_256":67},"og:title",{"_259":265,"_256":257},"og:description",{"_259":267,"_256":268},"og:url","https://designsystemet.no",{"_259":270,"_256":67},"twitter:title",{"_259":272,"_256":257},"twitter:description",{"_259":274,"_256":275},"twitter:card","summary_large_image",{"_259":277,"_256":261},"twitter:image","cssSource","@property --captured-length{syntax:\"\";inherits:true;initial-value:0}.ds-avatar-stack{--dsc-avatar-stack-size:var(--ds-size-12);--dsc-avatar-stack-gap:2px;--dsc-avatar-stack-overlap:50;--dsc-avatar-count:initial;--_gap:var(--dsc-avatar-stack-gap);--_overlap:-webkit-calc(((var(--dsc-avatar-stack-size)/100)*var(--dsc-avatar-stack-overlap))*-1);--_overlap:-moz-calc(((var(--dsc-avatar-stack-size)/100)*var(--dsc-avatar-stack-overlap))*-1);--_overlap:calc(((var(--dsc-avatar-stack-size)/100)*var(--dsc-avatar-stack-overlap))*-1);--captured-length:var(--_overlap);-webkit-box-align:center;-webkit-align-items:center;-moz-box-align:center;align-items:center;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:flex;isolation:isolate;padding-block:1px;transition:--captured-length .2s ease;width:-webkit-max-content;width:-moz-max-content;width:max-content}.ds-avatar-stack:focus-visible{-webkit-box-shadow:var(--_ds--focus,var(--dsc-focus-boxShadow));-moz-box-shadow:var(--_ds--focus,var(--dsc-focus-boxShadow));box-shadow:var(--_ds--focus,var(--dsc-focus-boxShadow));outline:var(--_ds--focus,var(--dsc-focus-outline));outline-offset:var(--_ds--focus,var(--ds-border-width-focus))}.ds-avatar-stack:focus-visible *{--_ds--focus: }.ds-avatar-stack[data-expandable]:focus-visible,.ds-avatar-stack[data-expandable]:hover{--captured-length:var(--_gap)}.ds-avatar-stack[data-expandable=fixed]{width:-webkit-calc(var(--dsc-avatar-stack-size)*var(--dsc-avatar-count) + var(--_overlap)*(var(--dsc-avatar-count) - 1));width:-moz-calc(var(--dsc-avatar-stack-size)*var(--dsc-avatar-count) + var(--_overlap)*(var(--dsc-avatar-count) - 1));width:calc(var(--dsc-avatar-stack-size)*var(--dsc-avatar-count) + var(--_overlap)*(var(--dsc-avatar-count) - 1))}.ds-avatar-stack:empty{display:none}.ds-avatar-stack[data-suffix]:after{content:attr(data-suffix);font-size:max(1rem,-webkit-calc(var(--dsc-avatar-stack-size)*.4));font-size:max(1rem,-moz-calc(var(--dsc-avatar-stack-size)*.4));font-size:max(1rem,calc(var(--dsc-avatar-stack-size)*.4));margin-left:1ch;place-self:center}.ds-avatar-stack .ds-avatar{--dsc-avatar-size:var(--dsc-avatar-stack-size);--_font-size:max(0.75rem,-webkit-calc(var(--dsc-avatar-stack-size)*0.5));--_font-size:max(0.75rem,-moz-calc(var(--dsc-avatar-stack-size)*0.5));--_font-size:max(0.75rem,calc(var(--dsc-avatar-stack-size)*0.5));-webkit-mask:-webkit-radial-gradient(-webkit-calc(150% + var(--captured-length)),50% 50%,transparent -webkit-calc(100% - 1px + var(--_gap)),#000 -webkit-calc(100% + var(--_gap)));mask:radial-gradient(50% 50% at -moz-calc(150% + var(--captured-length)),transparent -moz-calc(100% - 1px + var(--_gap)),#000 -moz-calc(100% + var(--_gap)));mask:radial-gradient(50% 50% at calc(150% + var(--captured-length)),transparent calc(100% - 1px + var(--_gap)),#000 calc(100% + var(--_gap)))}[data-variant=square]:is(.ds-avatar-stack .ds-avatar){-webkit-mask:-webkit-gradient(linear,left top, right top,from(#000),to(transparent));-webkit-mask:-webkit-linear-gradient(left,#000 -webkit-calc(100% + var(--captured-length) - var(--_gap)),transparent -webkit-calc(100% + var(--captured-length) - var(--_gap)));mask:linear-gradient(to right,#000 -moz-calc(100% + var(--captured-length) - var(--_gap)),transparent -moz-calc(100% + var(--captured-length) - var(--_gap)));mask:-webkit-gradient(linear,left top, right top,from(#000),to(transparent));mask:linear-gradient(to right,#000 calc(100% + var(--captured-length) - var(--_gap)),transparent calc(100% + var(--captured-length) - var(--_gap)))}:is(.ds-avatar-stack .ds-avatar):not(:first-child){margin-left:var(--captured-length)}:is(.ds-avatar-stack .ds-avatar):nth-last-child(1 of .ds-avatar){-webkit-mask:none;mask:none}@supports not selector(:nth-last-child(1 of .ds-avatar)){:is(.ds-avatar-stack .ds-avatar):not(:has(+.ds-avatar)){-webkit-mask:none;mask:none}}:is(.ds-avatar-stack .ds-avatar):not([data-size]){--dsc-avatar-font-size:var(--_font-size)}:is(.ds-avatar-stack .ds-avatar):focus-visible,:is(.ds-avatar-stack .ds-avatar):has(:focus-visible){-webkit-mask:none;mask:none}:is(:is(.ds-avatar-stack .ds-avatar):has(:focus-visible),:is(.ds-avatar-stack .ds-avatar):focus-visible){-webkit-box-shadow:var(--_ds--focus,var(--dsc-focus-boxShadow));-moz-box-shadow:var(--_ds--focus,var(--dsc-focus-boxShadow));box-shadow:var(--_ds--focus,var(--dsc-focus-boxShadow));outline:var(--_ds--focus,var(--dsc-focus-outline));outline-offset:var(--_ds--focus,var(--ds-border-width-focus))}:is(:is(.ds-avatar-stack .ds-avatar):has(:focus-visible),:is(.ds-avatar-stack .ds-avatar):focus-visible) *{--_ds--focus: }:is(.ds-avatar-stack .ds-avatar):focus-visible,:is(.ds-avatar-stack .ds-avatar):has(:focus-visible){z-index:1}","cssVars",{"_282":283,"_284":285,"_286":287,"_288":289,"_290":291,"_292":293},"--dsc-avatar-stack-size","var(--ds-size-12)","--dsc-avatar-stack-gap","2px","--dsc-avatar-stack-overlap","50","--dsc-avatar-count","initial","--dsc-avatar-size","var(--dsc-avatar-stack-size)","--dsc-avatar-font-size","var(--_font-size)","cssAttrs",{"_296":297,"_298":299,"_300":301},"expandable","fixed","suffix","","variant","square","toc",[],"componentDocs",[306],{"_307":308,"_311":312,"_255":313,"_314":315,"_316":317,"_318":319},"tags",{"_309":310},"example","\n \n

\n \n \n \n \n \n","filePath","/usr/src/app/packages/react/src/components/avatar-stack/avatar-stack.tsx","Use `AvatarStack` to constrain Avatars into a stack.","displayName","EXPERIMENTAL_AvatarStack","methods",[],"props",{"_320":321,"_342":343,"_352":353,"_298":362,"_296":369},"gap",{"_322":323,"_255":325,"_10":320,"_326":-7,"_327":328,"_333":334,"_335":336},"defaultValue",{"_324":285},"value","Adjusts gap-mask between avatars in the stack. Must be a valid css length value (px, em, rem, var(--ds-size-1) etc.)","parent","declarations",[329],{"_330":331,"_10":332},"fileName","app/packages/react/src/components/avatar-stack/avatar-stack.tsx","TypeLiteral","required",false,"type",{"_10":337,"_338":339,"_324":340},"enum","raw","string",[341],{"_324":339},"avatarSize",{"_322":344,"_255":346,"_10":342,"_326":-7,"_327":347,"_333":334,"_335":349},{"_324":345},"'var(--ds-size-12)'","Control the size of the avatars. Must be a valid css length value (px, em, rem, var(--ds-size-12) etc.)",[348],{"_330":331,"_10":332},{"_10":337,"_338":339,"_324":350},[351],{"_324":339},"overlap",{"_322":354,"_255":355,"_10":352,"_326":-7,"_327":356,"_333":334,"_335":358},{"_324":287},"A number which represents the percentage value of how much avatars should overlap.",[357],{"_330":331,"_10":332},{"_10":337,"_338":359,"_324":360},"number",[361],{"_324":359},{"_322":-5,"_255":363,"_10":298,"_326":-7,"_327":364,"_333":334,"_335":366},"Text to the right of the avatars to show a number representing additional avatars not shown such as '+5'\".",[365],{"_330":331,"_10":332},{"_10":337,"_338":339,"_324":367},[368],{"_324":339},{"_322":370,"_255":372,"_10":296,"_326":-7,"_327":373,"_333":334,"_335":375},{"_324":371},"undefined","Expand on hover to show full avatars.\n'fixed': AvatarStack physical width does not change when avatars are expanded.",[374],{"_330":331,"_10":332},{"_10":337,"_338":376,"_324":377},"true | \"fixed\"",[378,380],{"_324":379},"true",{"_324":381},"\"fixed\"","navigation",{"_384":385,"_386":387,"_388":389},"overviewLink","/en/components/docs/avatar-stack/overview","codeLink","/en/components/docs/avatar-stack/code","accessibilityLink","/en/components/docs/avatar-stack/accessibility","githubLink","https://github.com/digdir/designsystemet/tree/main/apps/www/app/content/components/avatar-stack/en/accessibility.mdx","actionData","errors"]