\n \n \n \n \n \n md\n \n \n);","file","avatar-stack.stories.tsx",{"_10":224,"_219":225,"_221":222},"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":227,"_219":228,"_221":222},"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":230,"_219":231,"_221":222},"ShapeVariants","const ShapeVariants = () => (\n \n \n \n

\n \n \n

\n \n \n);",{"_10":233,"_219":234,"_221":222},"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":236,"_219":237,"_221":222},"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":239,"_219":240,"_221":222},"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":242,"_219":243,"_221":222},"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,"_250":251,"_252":253},"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",[256,258,262,266,268,270,273,275,277,280],{"_53":257},"AvatarStack - Designsystemet",{"_10":259,"_260":261},"description","content","`AvatarStack` stacks a collection of `Avatar` elements",{"_263":264,"_260":265},"property","og:image","/img/designsystemet-meta.png",{"_263":267,"_260":67},"og:title",{"_263":269,"_260":261},"og:description",{"_263":271,"_260":272},"og:url","https://designsystemet.no",{"_263":274,"_260":67},"twitter:title",{"_263":276,"_260":261},"twitter:description",{"_263":278,"_260":279},"twitter:card","summary_large_image",{"_263":281,"_260":265},"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:calc(((var(--dsc-avatar-stack-size)/100)*var(--dsc-avatar-stack-overlap))*-1);--captured-length:var(--_overlap);align-items:center;display:flex;isolation:isolate;margin:0;padding-block:1px;transition:--captured-length .2s ease;width:-moz-max-content;width:max-content}.ds-avatar-stack:focus-visible{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: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,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,calc(var(--dsc-avatar-stack-size)*0.5));-webkit-mask:radial-gradient(50% 50% at calc(150% + var(--captured-length)),transparent calc(100% - 1px + var(--_gap)),#000 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:linear-gradient(to right,#000 calc(100% + var(--captured-length) - var(--_gap)),transparent calc(100% + var(--captured-length) - var(--_gap)));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){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",{"_286":287,"_288":289,"_290":291,"_292":293,"_294":295,"_296":297},"--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",{"_300":301,"_302":303,"_304":305},"expandable","fixed","suffix","","variant","square","toc",[],"componentDocs",[310],{"_311":312,"_315":316,"_259":317,"_318":319,"_320":321,"_322":323},"tags",{"_313":314},"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",{"_324":325,"_346":347,"_356":357,"_302":366,"_300":373},"gap",{"_326":327,"_259":329,"_10":324,"_330":-7,"_331":332,"_337":338,"_339":340},"defaultValue",{"_328":289},"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",[333],{"_334":335,"_10":336},"fileName","app/packages/react/src/components/avatar-stack/avatar-stack.tsx","TypeLiteral","required",false,"type",{"_10":341,"_342":343,"_328":344},"enum","raw","string",[345],{"_328":343},"avatarSize",{"_326":348,"_259":350,"_10":346,"_330":-7,"_331":351,"_337":338,"_339":353},{"_328":349},"'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.)",[352],{"_334":335,"_10":336},{"_10":341,"_342":343,"_328":354},[355],{"_328":343},"overlap",{"_326":358,"_259":359,"_10":356,"_330":-7,"_331":360,"_337":338,"_339":362},{"_328":291},"A number which represents the percentage value of how much avatars should overlap.",[361],{"_334":335,"_10":336},{"_10":341,"_342":363,"_328":364},"number",[365],{"_328":363},{"_326":-5,"_259":367,"_10":302,"_330":-7,"_331":368,"_337":338,"_339":370},"Text to the right of the avatars to show a number representing additional avatars not shown such as '+5'\".",[369],{"_334":335,"_10":336},{"_10":341,"_342":343,"_328":371},[372],{"_328":343},{"_326":374,"_259":376,"_10":300,"_330":-7,"_331":377,"_337":338,"_339":379},{"_328":375},"undefined","Expand on hover to show full avatars.\n'fixed': AvatarStack physical width does not change when avatars are expanded.",[378],{"_334":335,"_10":336},{"_10":341,"_342":380,"_328":381},"true | \"fixed\"",[382,384],{"_328":383},"true",{"_328":385},"\"fixed\"","navigation",{"_388":389,"_390":391,"_392":393},"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"]