Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@maggioli-design-system/mds-avatar
Advanced tools
@maggioli-design-system/mds-avatar - npm Package Compare versions
Comparing version 3.11.3 to 3.11.4
@@ -44,3 +44,3 @@ 'use strict'; | ||
| const mdsAvatarCss = "@tailwind components;\n\n.svg{\n\n display: -ms-flexbox;\n\n display: flex;\n}\n\n.svg svg{\n\n aspect-ratio: 1/1;\n\n height: 100%;\n\n width: 100%;\n}\n@tailwind utilities;\n\n/**\n * @prop --mds-avatar-background-color-pending: The background-color when an image is loading\n * @prop --mds-avatar-background-color: The background-color of the component\n * @prop --mds-avatar-color: The color of the placeholder icon\n * @prop --mds-avatar-radius: The border-radius of the element\n */\n\n:host {\n\n --mds-avatar-background-color-pending: rgb(var(--tone-neutral-08));\n --mds-avatar-background-color: rgb(var(--brand-maggioli-05));\n --mds-avatar-color: rgb(var(--brand-maggioli-10));\n --mds-avatar-radius: 9999px;\n --mds-avatar-initials-padding: 20%;\n\n aspect-ratio: 1/1;\n border-radius: var(--mds-avatar-radius);\n container-name: mds-avatar;\n container-type: inline-size;\n display: -ms-inline-flexbox;\n display: inline-flex;\n overflow: hidden;\n width: 3rem;\n}\n\n.avatar{\n\n -webkit-transition-duration: 200ms;\n\n transition-duration: 200ms;\n\n aspect-ratio: 1/1;\n border-radius: var(--mds-avatar-radius);\n color: transparent;\n display: -ms-inline-flexbox;\n display: inline-flex;\n overflow: hidden;\n -webkit-transition-property: color, background-color, fill, -webkit-box-shadow;\n transition-property: color, background-color, fill, -webkit-box-shadow;\n transition-property: color, background-color, box-shadow, fill;\n transition-property: color, background-color, box-shadow, fill, -webkit-box-shadow;\n width: 100%;\n}\n\n.avatar--pending {\n background-color: var(--mds-avatar-background-color-pending);\n}\n\n.avatar--loaded {\n -webkit-animation: none;\n animation: none;\n}\n\n.avatar--icon,\n.avatar--fallback,\n.avatar--initials {\n background-color: var(--mds-avatar-background-color);\n -webkit-box-shadow: none;\n box-shadow: none;\n}\n\n.avatar--fallback,\n.avatar--initials {\n -ms-flex-align: stretch;\n align-items: stretch;\n display: -ms-flexbox;\n display: flex;\n justify-items: stretch;\n}\n\n.avatar--icon,\n.avatar--fallback {\n padding: 20%;\n}\n\n.avatar--initials {\n padding: 30% var(--mds-avatar-initials-padding) 25%;\n}\n\n.image {\n aspect-ratio: 1/1;\n border-radius: var(--mds-avatar-radius);\n}\n\n.fallback-icon {\n aspect-ratio: 1/1;\n fill: var(--mds-avatar-color);\n width: 100%;\n}\n\n\n.initials-text{\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-weight: 700;\n\n -ms-flex-align: center;\n\n align-items: center;\n color: var(--mds-avatar-color);\n display: -ms-flexbox;\n display: flex;\n height: 100%;\n -ms-flex-pack: center;\n justify-content: center;\n text-transform: uppercase;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n width: 100%;\n}\n\n:host([initials]) .initials-text {\n\n --mds-avatar-color: rgb(var(--tone-neutral));\n}\n\n.fit {\n display: inline-block;\n white-space: nowrap !important;\n}\n\n.icon{\n\n -webkit-transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;\n\n transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;\n\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;\n\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n -webkit-transition-duration: 150ms;\n\n transition-duration: 150ms;\n\n fill: var(--mds-avatar-color);\n height: 100%;\n width: 100%;\n}\n\n@tailwind utilities;\n\n:host( [variant=\"primary\"] ),\n:host( [variant=\"primary\"][tone=\"strong\"] ) {\n\n --mds-avatar-background-color: rgb(var(--brand-maggioli-05));\n --mds-avatar-color: rgb(var(--brand-maggioli-10));\n}\n\n:host( [variant=\"primary\"][tone=\"weak\"] ) {\n\n --mds-avatar-background-color: rgb(var(--brand-maggioli-09));\n --mds-avatar-color: rgb(var(--brand-maggioli-05));\n}\n\n:host( [variant=\"orange\"] ),\n:host( [variant=\"orange\"][tone=\"strong\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-orange-05));\n --mds-avatar-color: rgb(var(--label-orange-10));\n}\n\n:host( [variant=\"orange\"][tone=\"weak\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-orange-09));\n --mds-avatar-color: rgb(var(--label-orange-05));\n}\n\n:host( [variant=\"amaranth\"] ),\n:host( [variant=\"amaranth\"][tone=\"strong\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-amaranth-05));\n --mds-avatar-color: rgb(var(--label-amaranth-10));\n}\n\n:host( [variant=\"amaranth\"][tone=\"weak\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-amaranth-09));\n --mds-avatar-color: rgb(var(--label-amaranth-05));\n}\n\n:host( [variant=\"orchid\"] ),\n:host( [variant=\"orchid\"][tone=\"strong\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-orchid-05));\n --mds-avatar-color: rgb(var(--label-orchid-10));\n}\n\n:host( [variant=\"orchid\"][tone=\"weak\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-orchid-09));\n --mds-avatar-color: rgb(var(--label-orchid-05));\n}\n\n:host( [variant=\"violet\"] ),\n:host( [variant=\"violet\"][tone=\"strong\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-violet-05));\n --mds-avatar-color: rgb(var(--label-violet-10));\n}\n\n:host( [variant=\"violet\"][tone=\"weak\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-violet-09));\n --mds-avatar-color: rgb(var(--label-violet-05));\n}\n\n:host( [variant=\"blue\"] ),\n:host( [variant=\"blue\"][tone=\"strong\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-blue-05));\n --mds-avatar-color: rgb(var(--label-blue-10));\n}\n\n:host( [variant=\"blue\"][tone=\"weak\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-blue-09));\n --mds-avatar-color: rgb(var(--label-blue-05));\n}\n\n:host( [variant=\"sky\"] ),\n:host( [variant=\"sky\"][tone=\"strong\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-sky-05));\n --mds-avatar-color: rgb(var(--label-sky-10));\n}\n\n:host( [variant=\"sky\"][tone=\"weak\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-sky-09));\n --mds-avatar-color: rgb(var(--label-sky-05));\n}\n\n:host( [variant=\"aqua\"] ),\n:host( [variant=\"aqua\"][tone=\"strong\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-aqua-05));\n --mds-avatar-color: rgb(var(--label-aqua-10));\n}\n\n:host( [variant=\"aqua\"][tone=\"weak\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-aqua-09));\n --mds-avatar-color: rgb(var(--label-aqua-05));\n}\n\n:host( [variant=\"green\"] ),\n:host( [variant=\"green\"][tone=\"strong\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-green-05));\n --mds-avatar-color: rgb(var(--label-green-10));\n}\n\n:host( [variant=\"green\"][tone=\"weak\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-green-09));\n --mds-avatar-color: rgb(var(--label-green-05));\n}\n\n:host( [variant=\"lime\"] ),\n:host( [variant=\"lime\"][tone=\"strong\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-lime-05));\n --mds-avatar-color: rgb(var(--label-lime-10));\n}\n\n:host( [variant=\"lime\"][tone=\"weak\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-lime-09));\n --mds-avatar-color: rgb(var(--label-lime-05));\n}\n\n:host( [variant=\"yellow\"] ),\n:host( [variant=\"yellow\"][tone=\"strong\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-yellow-05));\n --mds-avatar-color: rgb(var(--label-yellow-10));\n}\n\n:host( [variant=\"yellow\"][tone=\"weak\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-yellow-09));\n --mds-avatar-color: rgb(var(--label-yellow-05));\n}\n\n:host( [variant=\"error\"] ),\n:host( [variant=\"error\"][tone=\"strong\"] ) {\n\n --mds-avatar-background-color: rgb(var(--status-error-05));\n --mds-avatar-color: rgb(var(--status-error-10));\n}\n\n:host( [variant=\"error\"][tone=\"weak\"] ) {\n\n --mds-avatar-background-color: rgb(var(--status-error-09));\n --mds-avatar-color: rgb(var(--status-error-05));\n}\n\n:host( [variant=\"warning\"] ),\n:host( [variant=\"warning\"][tone=\"strong\"] ) {\n\n --mds-avatar-background-color: rgb(var(--status-warning-05));\n --mds-avatar-color: rgb(var(--status-warning-10));\n}\n\n:host( [variant=\"warning\"][tone=\"weak\"] ) {\n\n --mds-avatar-background-color: rgb(var(--status-warning-09));\n --mds-avatar-color: rgb(var(--status-warning-05));\n}\n\n:host( [variant=\"info\"] ),\n:host( [variant=\"info\"][tone=\"strong\"] ) {\n\n --mds-avatar-background-color: rgb(var(--status-info-05));\n --mds-avatar-color: rgb(var(--status-info-10));\n}\n\n:host( [variant=\"info\"][tone=\"weak\"] ) {\n\n --mds-avatar-background-color: rgb(var(--status-info-09));\n --mds-avatar-color: rgb(var(--status-info-05));\n}\n\n:host( [variant=\"success\"] ),\n:host( [variant=\"success\"][tone=\"strong\"] ) {\n\n --mds-avatar-background-color: rgb(var(--status-success-05));\n --mds-avatar-color: rgb(var(--status-success-10));\n}\n\n:host( [variant=\"success\"][tone=\"weak\"] ) {\n\n --mds-avatar-background-color: rgb(var(--status-success-09));\n --mds-avatar-color: rgb(var(--status-success-05));\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n .avatar,\n .icon {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n}\n\n@container style(--magma-pref-animation: system) {\n\n @media (prefers-reduced-motion) {\n .avatar,\n .icon {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n }\n}\n\n.static{\n\n position: static;\n}\n\n.fixed{\n\n position: fixed;\n}\n\n.absolute{\n\n position: absolute;\n}\n\n.w-2400{\n\n width: 6rem;\n}\n\n.w-600{\n\n width: 1.5rem;\n}\n\n.border{\n\n border-width: 1px;\n}\n\n.bg-brand-maggioli-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--brand-maggioli-05) / var(--tw-bg-opacity));\n}\n\n.bg-label-amaranth-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-amaranth-05) / var(--tw-bg-opacity));\n}\n\n.bg-label-amaranth-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-amaranth-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-aqua-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-aqua-05) / var(--tw-bg-opacity));\n}\n\n.bg-label-aqua-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-aqua-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-blue-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-blue-05) / var(--tw-bg-opacity));\n}\n\n.bg-label-blue-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-blue-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-green-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-green-05) / var(--tw-bg-opacity));\n}\n\n.bg-label-green-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-green-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-lime-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-lime-05) / var(--tw-bg-opacity));\n}\n\n.bg-label-lime-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-lime-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orange-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-orange-05) / var(--tw-bg-opacity));\n}\n\n.bg-label-orange-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-orange-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orchid-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-orchid-05) / var(--tw-bg-opacity));\n}\n\n.bg-label-orchid-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-orchid-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-sky-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-sky-05) / var(--tw-bg-opacity));\n}\n\n.bg-label-violet-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-violet-05) / var(--tw-bg-opacity));\n}\n\n.bg-label-violet-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-violet-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-yellow-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-yellow-05) / var(--tw-bg-opacity));\n}\n\n.bg-label-yellow-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-yellow-10) / var(--tw-bg-opacity));\n}\n\n.bg-status-error-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--status-error-05) / var(--tw-bg-opacity));\n}\n\n.bg-status-info-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--status-info-05) / var(--tw-bg-opacity));\n}\n\n.bg-status-success-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--status-success-05) / var(--tw-bg-opacity));\n}\n\n.bg-status-warning-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--status-warning-05) / var(--tw-bg-opacity));\n}\n\n.bg-tone-neutral-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--tone-neutral-10) / var(--tw-bg-opacity));\n}\n\n.fill-label-amaranth-04{\n\n fill: rgb(var(--label-amaranth-04));\n}\n\n.fill-label-aqua-04{\n\n fill: rgb(var(--label-aqua-04));\n}\n\n.fill-label-blue-04{\n\n fill: rgb(var(--label-blue-04));\n}\n\n.fill-label-green-04{\n\n fill: rgb(var(--label-green-04));\n}\n\n.fill-label-lime-04{\n\n fill: rgb(var(--label-lime-04));\n}\n\n.fill-label-orange-04{\n\n fill: rgb(var(--label-orange-04));\n}\n\n.fill-label-orchid-04{\n\n fill: rgb(var(--label-orchid-04));\n}\n\n.fill-label-violet-04{\n\n fill: rgb(var(--label-violet-04));\n}\n\n.fill-label-yellow-04{\n\n fill: rgb(var(--label-yellow-04));\n}\n\n.fill-tone-neutral-04{\n\n fill: rgb(var(--tone-neutral-04));\n}\n\n.text-label-amaranth-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-amaranth-04) / var(--tw-text-opacity));\n}\n\n.text-label-aqua-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-aqua-04) / var(--tw-text-opacity));\n}\n\n.text-label-blue-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-blue-04) / var(--tw-text-opacity));\n}\n\n.text-label-green-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-green-04) / var(--tw-text-opacity));\n}\n\n.text-label-lime-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-lime-04) / var(--tw-text-opacity));\n}\n\n.text-label-orange-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-orange-04) / var(--tw-text-opacity));\n}\n\n.text-label-orchid-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-orchid-04) / var(--tw-text-opacity));\n}\n\n.text-label-violet-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-violet-04) / var(--tw-text-opacity));\n}\n\n.text-label-yellow-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-yellow-04) / var(--tw-text-opacity));\n}\n\n.text-tone-neutral-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--tone-neutral-04) / var(--tw-text-opacity));\n}\n\n.shadow{\n\n --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n\n -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n@container style(--magma-pref-contrast: more) {\n .avatar--icon,\n .avatar--fallback,\n .avatar--initials {\n -webkit-box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n @media (prefers-contrast: more) {\n .avatar--icon,\n .avatar--fallback,\n .avatar--initials {\n -webkit-box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n }\n }\n}\n\n\n\n@container (max-width: 24px) {\n .avatar--initials {\n padding: 0 var(--mds-avatar-initials-padding);\n }\n\n .initials-text{\n\n font-weight: 900;\n }\n}\n"; | ||
| const mdsAvatarCss = "@tailwind components;\n\n.svg{\n\n display: -ms-flexbox;\n\n display: flex;\n}\n\n.svg svg{\n\n aspect-ratio: 1/1;\n\n height: 100%;\n\n width: 100%;\n}\n@tailwind utilities;\n\n/**\n * @prop --mds-avatar-background-color-pending: The background-color when an image is loading\n * @prop --mds-avatar-background-color: The background-color of the component\n * @prop --mds-avatar-color: The color of the placeholder icon\n * @prop --mds-avatar-radius: The border-radius of the element\n */\n\n:host {\n\n --mds-avatar-background-color-pending: rgb(var(--tone-neutral-08));\n --mds-avatar-background-color: rgb(var(--brand-maggioli-05));\n --mds-avatar-color: rgb(var(--brand-maggioli-10));\n --mds-avatar-radius: 9999px;\n --mds-avatar-initials-padding: 20%;\n\n aspect-ratio: 1/1;\n border-radius: var(--mds-avatar-radius);\n container-name: mds-avatar;\n container-type: inline-size;\n display: -ms-inline-flexbox;\n display: inline-flex;\n overflow: hidden;\n width: 3rem;\n}\n\n.avatar{\n\n -webkit-transition-duration: 200ms;\n\n transition-duration: 200ms;\n\n aspect-ratio: 1/1;\n border-radius: var(--mds-avatar-radius);\n color: transparent;\n display: -ms-inline-flexbox;\n display: inline-flex;\n overflow: hidden;\n -webkit-transition-property: color, background-color, fill, -webkit-box-shadow;\n transition-property: color, background-color, fill, -webkit-box-shadow;\n transition-property: color, background-color, box-shadow, fill;\n transition-property: color, background-color, box-shadow, fill, -webkit-box-shadow;\n width: 100%;\n}\n\n.avatar--pending {\n background-color: var(--mds-avatar-background-color-pending);\n}\n\n.avatar--loaded {\n -webkit-animation: none;\n animation: none;\n}\n\n.avatar--icon,\n.avatar--fallback,\n.avatar--initials {\n background-color: var(--mds-avatar-background-color);\n -webkit-box-shadow: none;\n box-shadow: none;\n}\n\n.avatar--fallback,\n.avatar--initials {\n -ms-flex-align: stretch;\n align-items: stretch;\n display: -ms-flexbox;\n display: flex;\n justify-items: stretch;\n}\n\n.avatar--icon,\n.avatar--fallback {\n padding: 20%;\n}\n\n.avatar--initials {\n padding: 30% var(--mds-avatar-initials-padding) 25%;\n}\n\n.image {\n aspect-ratio: 1/1;\n border-radius: var(--mds-avatar-radius);\n}\n\n.fallback-icon {\n aspect-ratio: 1/1;\n fill: var(--mds-avatar-color);\n width: 100%;\n}\n\n\n.initials-text{\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-weight: 700;\n\n -ms-flex-align: center;\n\n align-items: center;\n color: var(--mds-avatar-color);\n display: -ms-flexbox;\n display: flex;\n height: 100%;\n -ms-flex-pack: center;\n justify-content: center;\n text-transform: uppercase;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n width: 100%;\n}\n\n:host([initials]) .initials-text {\n\n --mds-avatar-color: rgb(var(--tone-neutral));\n}\n\n.fit {\n display: inline-block;\n white-space: nowrap !important;\n}\n\n.icon{\n\n -webkit-transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;\n\n transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;\n\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;\n\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n -webkit-transition-duration: 150ms;\n\n transition-duration: 150ms;\n\n fill: var(--mds-avatar-color);\n height: 100%;\n width: 100%;\n}\n\n@tailwind utilities;\n\n:host( [variant=\"primary\"] ),\n:host( [variant=\"primary\"][tone=\"strong\"] ) {\n\n --mds-avatar-background-color: rgb(var(--brand-maggioli-05));\n --mds-avatar-color: rgb(var(--brand-maggioli-10));\n}\n\n:host( [variant=\"primary\"][tone=\"weak\"] ) {\n\n --mds-avatar-background-color: rgb(var(--brand-maggioli-09));\n --mds-avatar-color: rgb(var(--brand-maggioli-05));\n}\n\n:host( [variant=\"orange\"] ),\n:host( [variant=\"orange\"][tone=\"strong\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-orange-05));\n --mds-avatar-color: rgb(var(--label-orange-10));\n}\n\n:host( [variant=\"orange\"][tone=\"weak\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-orange-09));\n --mds-avatar-color: rgb(var(--label-orange-05));\n}\n\n:host( [variant=\"amaranth\"] ),\n:host( [variant=\"amaranth\"][tone=\"strong\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-amaranth-05));\n --mds-avatar-color: rgb(var(--label-amaranth-10));\n}\n\n:host( [variant=\"amaranth\"][tone=\"weak\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-amaranth-09));\n --mds-avatar-color: rgb(var(--label-amaranth-05));\n}\n\n:host( [variant=\"orchid\"] ),\n:host( [variant=\"orchid\"][tone=\"strong\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-orchid-05));\n --mds-avatar-color: rgb(var(--label-orchid-10));\n}\n\n:host( [variant=\"orchid\"][tone=\"weak\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-orchid-09));\n --mds-avatar-color: rgb(var(--label-orchid-05));\n}\n\n:host( [variant=\"violet\"] ),\n:host( [variant=\"violet\"][tone=\"strong\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-violet-05));\n --mds-avatar-color: rgb(var(--label-violet-10));\n}\n\n:host( [variant=\"violet\"][tone=\"weak\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-violet-09));\n --mds-avatar-color: rgb(var(--label-violet-05));\n}\n\n:host( [variant=\"blue\"] ),\n:host( [variant=\"blue\"][tone=\"strong\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-blue-05));\n --mds-avatar-color: rgb(var(--label-blue-10));\n}\n\n:host( [variant=\"blue\"][tone=\"weak\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-blue-09));\n --mds-avatar-color: rgb(var(--label-blue-05));\n}\n\n:host( [variant=\"sky\"] ),\n:host( [variant=\"sky\"][tone=\"strong\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-sky-05));\n --mds-avatar-color: rgb(var(--label-sky-10));\n}\n\n:host( [variant=\"sky\"][tone=\"weak\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-sky-09));\n --mds-avatar-color: rgb(var(--label-sky-05));\n}\n\n:host( [variant=\"aqua\"] ),\n:host( [variant=\"aqua\"][tone=\"strong\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-aqua-05));\n --mds-avatar-color: rgb(var(--label-aqua-10));\n}\n\n:host( [variant=\"aqua\"][tone=\"weak\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-aqua-09));\n --mds-avatar-color: rgb(var(--label-aqua-05));\n}\n\n:host( [variant=\"green\"] ),\n:host( [variant=\"green\"][tone=\"strong\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-green-05));\n --mds-avatar-color: rgb(var(--label-green-10));\n}\n\n:host( [variant=\"green\"][tone=\"weak\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-green-09));\n --mds-avatar-color: rgb(var(--label-green-05));\n}\n\n:host( [variant=\"lime\"] ),\n:host( [variant=\"lime\"][tone=\"strong\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-lime-05));\n --mds-avatar-color: rgb(var(--label-lime-10));\n}\n\n:host( [variant=\"lime\"][tone=\"weak\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-lime-09));\n --mds-avatar-color: rgb(var(--label-lime-05));\n}\n\n:host( [variant=\"yellow\"] ),\n:host( [variant=\"yellow\"][tone=\"strong\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-yellow-05));\n --mds-avatar-color: rgb(var(--label-yellow-10));\n}\n\n:host( [variant=\"yellow\"][tone=\"weak\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-yellow-09));\n --mds-avatar-color: rgb(var(--label-yellow-05));\n}\n\n:host( [variant=\"error\"] ),\n:host( [variant=\"error\"][tone=\"strong\"] ) {\n\n --mds-avatar-background-color: rgb(var(--status-error-05));\n --mds-avatar-color: rgb(var(--status-error-10));\n}\n\n:host( [variant=\"error\"][tone=\"weak\"] ) {\n\n --mds-avatar-background-color: rgb(var(--status-error-09));\n --mds-avatar-color: rgb(var(--status-error-05));\n}\n\n:host( [variant=\"warning\"] ),\n:host( [variant=\"warning\"][tone=\"strong\"] ) {\n\n --mds-avatar-background-color: rgb(var(--status-warning-05));\n --mds-avatar-color: rgb(var(--status-warning-10));\n}\n\n:host( [variant=\"warning\"][tone=\"weak\"] ) {\n\n --mds-avatar-background-color: rgb(var(--status-warning-09));\n --mds-avatar-color: rgb(var(--status-warning-05));\n}\n\n:host( [variant=\"info\"] ),\n:host( [variant=\"info\"][tone=\"strong\"] ) {\n\n --mds-avatar-background-color: rgb(var(--status-info-05));\n --mds-avatar-color: rgb(var(--status-info-10));\n}\n\n:host( [variant=\"info\"][tone=\"weak\"] ) {\n\n --mds-avatar-background-color: rgb(var(--status-info-09));\n --mds-avatar-color: rgb(var(--status-info-05));\n}\n\n:host( [variant=\"success\"] ),\n:host( [variant=\"success\"][tone=\"strong\"] ) {\n\n --mds-avatar-background-color: rgb(var(--status-success-05));\n --mds-avatar-color: rgb(var(--status-success-10));\n}\n\n:host( [variant=\"success\"][tone=\"weak\"] ) {\n\n --mds-avatar-background-color: rgb(var(--status-success-09));\n --mds-avatar-color: rgb(var(--status-success-05));\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n .avatar,\n .icon {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n}\n\n@container style(--magma-pref-animation: system) {\n\n @media (prefers-reduced-motion) {\n .avatar,\n .icon {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n }\n}\n\n.static{\n\n position: static;\n}\n\n.fixed{\n\n position: fixed;\n}\n\n.absolute{\n\n position: absolute;\n}\n\n.w-2400{\n\n width: 6rem;\n}\n\n.w-600{\n\n width: 1.5rem;\n}\n\n.border{\n\n border-width: 1px;\n}\n\n.bg-brand-maggioli-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--brand-maggioli-05) / var(--tw-bg-opacity));\n}\n\n.bg-label-amaranth-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-amaranth-05) / var(--tw-bg-opacity));\n}\n\n.bg-label-amaranth-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-amaranth-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-aqua-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-aqua-05) / var(--tw-bg-opacity));\n}\n\n.bg-label-aqua-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-aqua-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-blue-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-blue-05) / var(--tw-bg-opacity));\n}\n\n.bg-label-blue-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-blue-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-green-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-green-05) / var(--tw-bg-opacity));\n}\n\n.bg-label-green-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-green-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-lime-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-lime-05) / var(--tw-bg-opacity));\n}\n\n.bg-label-lime-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-lime-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orange-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-orange-05) / var(--tw-bg-opacity));\n}\n\n.bg-label-orange-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-orange-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orchid-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-orchid-05) / var(--tw-bg-opacity));\n}\n\n.bg-label-orchid-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-orchid-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-sky-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-sky-05) / var(--tw-bg-opacity));\n}\n\n.bg-label-violet-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-violet-05) / var(--tw-bg-opacity));\n}\n\n.bg-label-violet-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-violet-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-yellow-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-yellow-05) / var(--tw-bg-opacity));\n}\n\n.bg-label-yellow-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-yellow-10) / var(--tw-bg-opacity));\n}\n\n.bg-status-error-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--status-error-05) / var(--tw-bg-opacity));\n}\n\n.bg-status-info-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--status-info-05) / var(--tw-bg-opacity));\n}\n\n.bg-status-success-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--status-success-05) / var(--tw-bg-opacity));\n}\n\n.bg-status-warning-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--status-warning-05) / var(--tw-bg-opacity));\n}\n\n.bg-tone-neutral-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--tone-neutral-10) / var(--tw-bg-opacity));\n}\n\n.fill-label-amaranth-04{\n\n fill: rgb(var(--label-amaranth-04));\n}\n\n.fill-label-aqua-04{\n\n fill: rgb(var(--label-aqua-04));\n}\n\n.fill-label-blue-04{\n\n fill: rgb(var(--label-blue-04));\n}\n\n.fill-label-green-04{\n\n fill: rgb(var(--label-green-04));\n}\n\n.fill-label-lime-04{\n\n fill: rgb(var(--label-lime-04));\n}\n\n.fill-label-orange-04{\n\n fill: rgb(var(--label-orange-04));\n}\n\n.fill-label-orchid-04{\n\n fill: rgb(var(--label-orchid-04));\n}\n\n.fill-label-violet-04{\n\n fill: rgb(var(--label-violet-04));\n}\n\n.fill-label-yellow-04{\n\n fill: rgb(var(--label-yellow-04));\n}\n\n.fill-tone-neutral-04{\n\n fill: rgb(var(--tone-neutral-04));\n}\n\n.text-label-amaranth-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-amaranth-04) / var(--tw-text-opacity));\n}\n\n.text-label-aqua-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-aqua-04) / var(--tw-text-opacity));\n}\n\n.text-label-blue-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-blue-04) / var(--tw-text-opacity));\n}\n\n.text-label-green-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-green-04) / var(--tw-text-opacity));\n}\n\n.text-label-lime-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-lime-04) / var(--tw-text-opacity));\n}\n\n.text-label-orange-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-orange-04) / var(--tw-text-opacity));\n}\n\n.text-label-orchid-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-orchid-04) / var(--tw-text-opacity));\n}\n\n.text-label-violet-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-violet-04) / var(--tw-text-opacity));\n}\n\n.text-label-yellow-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-yellow-04) / var(--tw-text-opacity));\n}\n\n.text-tone-neutral-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--tone-neutral-04) / var(--tw-text-opacity));\n}\n\n.shadow{\n\n --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n\n -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n@container style(--magma-pref-contrast: more) {\n .avatar--icon,\n .avatar--fallback,\n .avatar--initials {\n -webkit-box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n @media (prefers-contrast: more) {\n .avatar--icon,\n .avatar--fallback,\n .avatar--initials {\n -webkit-box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n }\n }\n}\n\n\n\n@container (max-width: 24px) {\n .avatar--initials {\n padding: 0 var(--mds-avatar-initials-padding);\n }\n\n .initials-text{\n\n font-weight: 900;\n }\n}\n"; | ||
| const MdsAvatarStyle0 = mdsAvatarCss; | ||
@@ -47,0 +47,0 @@ |
@@ -40,3 +40,3 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client'; | ||
| const mdsAvatarCss = "@tailwind components;\n\n.svg{\n\n display: -ms-flexbox;\n\n display: flex;\n}\n\n.svg svg{\n\n aspect-ratio: 1/1;\n\n height: 100%;\n\n width: 100%;\n}\n@tailwind utilities;\n\n/**\n * @prop --mds-avatar-background-color-pending: The background-color when an image is loading\n * @prop --mds-avatar-background-color: The background-color of the component\n * @prop --mds-avatar-color: The color of the placeholder icon\n * @prop --mds-avatar-radius: The border-radius of the element\n */\n\n:host {\n\n --mds-avatar-background-color-pending: rgb(var(--tone-neutral-08));\n --mds-avatar-background-color: rgb(var(--brand-maggioli-05));\n --mds-avatar-color: rgb(var(--brand-maggioli-10));\n --mds-avatar-radius: 9999px;\n --mds-avatar-initials-padding: 20%;\n\n aspect-ratio: 1/1;\n border-radius: var(--mds-avatar-radius);\n container-name: mds-avatar;\n container-type: inline-size;\n display: -ms-inline-flexbox;\n display: inline-flex;\n overflow: hidden;\n width: 3rem;\n}\n\n.avatar{\n\n -webkit-transition-duration: 200ms;\n\n transition-duration: 200ms;\n\n aspect-ratio: 1/1;\n border-radius: var(--mds-avatar-radius);\n color: transparent;\n display: -ms-inline-flexbox;\n display: inline-flex;\n overflow: hidden;\n -webkit-transition-property: color, background-color, fill, -webkit-box-shadow;\n transition-property: color, background-color, fill, -webkit-box-shadow;\n transition-property: color, background-color, box-shadow, fill;\n transition-property: color, background-color, box-shadow, fill, -webkit-box-shadow;\n width: 100%;\n}\n\n.avatar--pending {\n background-color: var(--mds-avatar-background-color-pending);\n}\n\n.avatar--loaded {\n -webkit-animation: none;\n animation: none;\n}\n\n.avatar--icon,\n.avatar--fallback,\n.avatar--initials {\n background-color: var(--mds-avatar-background-color);\n -webkit-box-shadow: none;\n box-shadow: none;\n}\n\n.avatar--fallback,\n.avatar--initials {\n -ms-flex-align: stretch;\n align-items: stretch;\n display: -ms-flexbox;\n display: flex;\n justify-items: stretch;\n}\n\n.avatar--icon,\n.avatar--fallback {\n padding: 20%;\n}\n\n.avatar--initials {\n padding: 30% var(--mds-avatar-initials-padding) 25%;\n}\n\n.image {\n aspect-ratio: 1/1;\n border-radius: var(--mds-avatar-radius);\n}\n\n.fallback-icon {\n aspect-ratio: 1/1;\n fill: var(--mds-avatar-color);\n width: 100%;\n}\n\n\n.initials-text{\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-weight: 700;\n\n -ms-flex-align: center;\n\n align-items: center;\n color: var(--mds-avatar-color);\n display: -ms-flexbox;\n display: flex;\n height: 100%;\n -ms-flex-pack: center;\n justify-content: center;\n text-transform: uppercase;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n width: 100%;\n}\n\n:host([initials]) .initials-text {\n\n --mds-avatar-color: rgb(var(--tone-neutral));\n}\n\n.fit {\n display: inline-block;\n white-space: nowrap !important;\n}\n\n.icon{\n\n -webkit-transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;\n\n transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;\n\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;\n\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n -webkit-transition-duration: 150ms;\n\n transition-duration: 150ms;\n\n fill: var(--mds-avatar-color);\n height: 100%;\n width: 100%;\n}\n\n@tailwind utilities;\n\n:host( [variant=\"primary\"] ),\n:host( [variant=\"primary\"][tone=\"strong\"] ) {\n\n --mds-avatar-background-color: rgb(var(--brand-maggioli-05));\n --mds-avatar-color: rgb(var(--brand-maggioli-10));\n}\n\n:host( [variant=\"primary\"][tone=\"weak\"] ) {\n\n --mds-avatar-background-color: rgb(var(--brand-maggioli-09));\n --mds-avatar-color: rgb(var(--brand-maggioli-05));\n}\n\n:host( [variant=\"orange\"] ),\n:host( [variant=\"orange\"][tone=\"strong\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-orange-05));\n --mds-avatar-color: rgb(var(--label-orange-10));\n}\n\n:host( [variant=\"orange\"][tone=\"weak\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-orange-09));\n --mds-avatar-color: rgb(var(--label-orange-05));\n}\n\n:host( [variant=\"amaranth\"] ),\n:host( [variant=\"amaranth\"][tone=\"strong\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-amaranth-05));\n --mds-avatar-color: rgb(var(--label-amaranth-10));\n}\n\n:host( [variant=\"amaranth\"][tone=\"weak\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-amaranth-09));\n --mds-avatar-color: rgb(var(--label-amaranth-05));\n}\n\n:host( [variant=\"orchid\"] ),\n:host( [variant=\"orchid\"][tone=\"strong\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-orchid-05));\n --mds-avatar-color: rgb(var(--label-orchid-10));\n}\n\n:host( [variant=\"orchid\"][tone=\"weak\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-orchid-09));\n --mds-avatar-color: rgb(var(--label-orchid-05));\n}\n\n:host( [variant=\"violet\"] ),\n:host( [variant=\"violet\"][tone=\"strong\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-violet-05));\n --mds-avatar-color: rgb(var(--label-violet-10));\n}\n\n:host( [variant=\"violet\"][tone=\"weak\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-violet-09));\n --mds-avatar-color: rgb(var(--label-violet-05));\n}\n\n:host( [variant=\"blue\"] ),\n:host( [variant=\"blue\"][tone=\"strong\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-blue-05));\n --mds-avatar-color: rgb(var(--label-blue-10));\n}\n\n:host( [variant=\"blue\"][tone=\"weak\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-blue-09));\n --mds-avatar-color: rgb(var(--label-blue-05));\n}\n\n:host( [variant=\"sky\"] ),\n:host( [variant=\"sky\"][tone=\"strong\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-sky-05));\n --mds-avatar-color: rgb(var(--label-sky-10));\n}\n\n:host( [variant=\"sky\"][tone=\"weak\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-sky-09));\n --mds-avatar-color: rgb(var(--label-sky-05));\n}\n\n:host( [variant=\"aqua\"] ),\n:host( [variant=\"aqua\"][tone=\"strong\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-aqua-05));\n --mds-avatar-color: rgb(var(--label-aqua-10));\n}\n\n:host( [variant=\"aqua\"][tone=\"weak\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-aqua-09));\n --mds-avatar-color: rgb(var(--label-aqua-05));\n}\n\n:host( [variant=\"green\"] ),\n:host( [variant=\"green\"][tone=\"strong\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-green-05));\n --mds-avatar-color: rgb(var(--label-green-10));\n}\n\n:host( [variant=\"green\"][tone=\"weak\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-green-09));\n --mds-avatar-color: rgb(var(--label-green-05));\n}\n\n:host( [variant=\"lime\"] ),\n:host( [variant=\"lime\"][tone=\"strong\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-lime-05));\n --mds-avatar-color: rgb(var(--label-lime-10));\n}\n\n:host( [variant=\"lime\"][tone=\"weak\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-lime-09));\n --mds-avatar-color: rgb(var(--label-lime-05));\n}\n\n:host( [variant=\"yellow\"] ),\n:host( [variant=\"yellow\"][tone=\"strong\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-yellow-05));\n --mds-avatar-color: rgb(var(--label-yellow-10));\n}\n\n:host( [variant=\"yellow\"][tone=\"weak\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-yellow-09));\n --mds-avatar-color: rgb(var(--label-yellow-05));\n}\n\n:host( [variant=\"error\"] ),\n:host( [variant=\"error\"][tone=\"strong\"] ) {\n\n --mds-avatar-background-color: rgb(var(--status-error-05));\n --mds-avatar-color: rgb(var(--status-error-10));\n}\n\n:host( [variant=\"error\"][tone=\"weak\"] ) {\n\n --mds-avatar-background-color: rgb(var(--status-error-09));\n --mds-avatar-color: rgb(var(--status-error-05));\n}\n\n:host( [variant=\"warning\"] ),\n:host( [variant=\"warning\"][tone=\"strong\"] ) {\n\n --mds-avatar-background-color: rgb(var(--status-warning-05));\n --mds-avatar-color: rgb(var(--status-warning-10));\n}\n\n:host( [variant=\"warning\"][tone=\"weak\"] ) {\n\n --mds-avatar-background-color: rgb(var(--status-warning-09));\n --mds-avatar-color: rgb(var(--status-warning-05));\n}\n\n:host( [variant=\"info\"] ),\n:host( [variant=\"info\"][tone=\"strong\"] ) {\n\n --mds-avatar-background-color: rgb(var(--status-info-05));\n --mds-avatar-color: rgb(var(--status-info-10));\n}\n\n:host( [variant=\"info\"][tone=\"weak\"] ) {\n\n --mds-avatar-background-color: rgb(var(--status-info-09));\n --mds-avatar-color: rgb(var(--status-info-05));\n}\n\n:host( [variant=\"success\"] ),\n:host( [variant=\"success\"][tone=\"strong\"] ) {\n\n --mds-avatar-background-color: rgb(var(--status-success-05));\n --mds-avatar-color: rgb(var(--status-success-10));\n}\n\n:host( [variant=\"success\"][tone=\"weak\"] ) {\n\n --mds-avatar-background-color: rgb(var(--status-success-09));\n --mds-avatar-color: rgb(var(--status-success-05));\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n .avatar,\n .icon {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n}\n\n@container style(--magma-pref-animation: system) {\n\n @media (prefers-reduced-motion) {\n .avatar,\n .icon {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n }\n}\n\n.static{\n\n position: static;\n}\n\n.fixed{\n\n position: fixed;\n}\n\n.absolute{\n\n position: absolute;\n}\n\n.w-2400{\n\n width: 6rem;\n}\n\n.w-600{\n\n width: 1.5rem;\n}\n\n.border{\n\n border-width: 1px;\n}\n\n.bg-brand-maggioli-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--brand-maggioli-05) / var(--tw-bg-opacity));\n}\n\n.bg-label-amaranth-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-amaranth-05) / var(--tw-bg-opacity));\n}\n\n.bg-label-amaranth-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-amaranth-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-aqua-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-aqua-05) / var(--tw-bg-opacity));\n}\n\n.bg-label-aqua-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-aqua-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-blue-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-blue-05) / var(--tw-bg-opacity));\n}\n\n.bg-label-blue-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-blue-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-green-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-green-05) / var(--tw-bg-opacity));\n}\n\n.bg-label-green-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-green-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-lime-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-lime-05) / var(--tw-bg-opacity));\n}\n\n.bg-label-lime-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-lime-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orange-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-orange-05) / var(--tw-bg-opacity));\n}\n\n.bg-label-orange-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-orange-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orchid-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-orchid-05) / var(--tw-bg-opacity));\n}\n\n.bg-label-orchid-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-orchid-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-sky-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-sky-05) / var(--tw-bg-opacity));\n}\n\n.bg-label-violet-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-violet-05) / var(--tw-bg-opacity));\n}\n\n.bg-label-violet-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-violet-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-yellow-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-yellow-05) / var(--tw-bg-opacity));\n}\n\n.bg-label-yellow-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-yellow-10) / var(--tw-bg-opacity));\n}\n\n.bg-status-error-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--status-error-05) / var(--tw-bg-opacity));\n}\n\n.bg-status-info-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--status-info-05) / var(--tw-bg-opacity));\n}\n\n.bg-status-success-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--status-success-05) / var(--tw-bg-opacity));\n}\n\n.bg-status-warning-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--status-warning-05) / var(--tw-bg-opacity));\n}\n\n.bg-tone-neutral-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--tone-neutral-10) / var(--tw-bg-opacity));\n}\n\n.fill-label-amaranth-04{\n\n fill: rgb(var(--label-amaranth-04));\n}\n\n.fill-label-aqua-04{\n\n fill: rgb(var(--label-aqua-04));\n}\n\n.fill-label-blue-04{\n\n fill: rgb(var(--label-blue-04));\n}\n\n.fill-label-green-04{\n\n fill: rgb(var(--label-green-04));\n}\n\n.fill-label-lime-04{\n\n fill: rgb(var(--label-lime-04));\n}\n\n.fill-label-orange-04{\n\n fill: rgb(var(--label-orange-04));\n}\n\n.fill-label-orchid-04{\n\n fill: rgb(var(--label-orchid-04));\n}\n\n.fill-label-violet-04{\n\n fill: rgb(var(--label-violet-04));\n}\n\n.fill-label-yellow-04{\n\n fill: rgb(var(--label-yellow-04));\n}\n\n.fill-tone-neutral-04{\n\n fill: rgb(var(--tone-neutral-04));\n}\n\n.text-label-amaranth-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-amaranth-04) / var(--tw-text-opacity));\n}\n\n.text-label-aqua-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-aqua-04) / var(--tw-text-opacity));\n}\n\n.text-label-blue-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-blue-04) / var(--tw-text-opacity));\n}\n\n.text-label-green-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-green-04) / var(--tw-text-opacity));\n}\n\n.text-label-lime-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-lime-04) / var(--tw-text-opacity));\n}\n\n.text-label-orange-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-orange-04) / var(--tw-text-opacity));\n}\n\n.text-label-orchid-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-orchid-04) / var(--tw-text-opacity));\n}\n\n.text-label-violet-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-violet-04) / var(--tw-text-opacity));\n}\n\n.text-label-yellow-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-yellow-04) / var(--tw-text-opacity));\n}\n\n.text-tone-neutral-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--tone-neutral-04) / var(--tw-text-opacity));\n}\n\n.shadow{\n\n --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n\n -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n@container style(--magma-pref-contrast: more) {\n .avatar--icon,\n .avatar--fallback,\n .avatar--initials {\n -webkit-box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n @media (prefers-contrast: more) {\n .avatar--icon,\n .avatar--fallback,\n .avatar--initials {\n -webkit-box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n }\n }\n}\n\n\n\n@container (max-width: 24px) {\n .avatar--initials {\n padding: 0 var(--mds-avatar-initials-padding);\n }\n\n .initials-text{\n\n font-weight: 900;\n }\n}\n"; | ||
| const mdsAvatarCss = "@tailwind components;\n\n.svg{\n\n display: -ms-flexbox;\n\n display: flex;\n}\n\n.svg svg{\n\n aspect-ratio: 1/1;\n\n height: 100%;\n\n width: 100%;\n}\n@tailwind utilities;\n\n/**\n * @prop --mds-avatar-background-color-pending: The background-color when an image is loading\n * @prop --mds-avatar-background-color: The background-color of the component\n * @prop --mds-avatar-color: The color of the placeholder icon\n * @prop --mds-avatar-radius: The border-radius of the element\n */\n\n:host {\n\n --mds-avatar-background-color-pending: rgb(var(--tone-neutral-08));\n --mds-avatar-background-color: rgb(var(--brand-maggioli-05));\n --mds-avatar-color: rgb(var(--brand-maggioli-10));\n --mds-avatar-radius: 9999px;\n --mds-avatar-initials-padding: 20%;\n\n aspect-ratio: 1/1;\n border-radius: var(--mds-avatar-radius);\n container-name: mds-avatar;\n container-type: inline-size;\n display: -ms-inline-flexbox;\n display: inline-flex;\n overflow: hidden;\n width: 3rem;\n}\n\n.avatar{\n\n -webkit-transition-duration: 200ms;\n\n transition-duration: 200ms;\n\n aspect-ratio: 1/1;\n border-radius: var(--mds-avatar-radius);\n color: transparent;\n display: -ms-inline-flexbox;\n display: inline-flex;\n overflow: hidden;\n -webkit-transition-property: color, background-color, fill, -webkit-box-shadow;\n transition-property: color, background-color, fill, -webkit-box-shadow;\n transition-property: color, background-color, box-shadow, fill;\n transition-property: color, background-color, box-shadow, fill, -webkit-box-shadow;\n width: 100%;\n}\n\n.avatar--pending {\n background-color: var(--mds-avatar-background-color-pending);\n}\n\n.avatar--loaded {\n -webkit-animation: none;\n animation: none;\n}\n\n.avatar--icon,\n.avatar--fallback,\n.avatar--initials {\n background-color: var(--mds-avatar-background-color);\n -webkit-box-shadow: none;\n box-shadow: none;\n}\n\n.avatar--fallback,\n.avatar--initials {\n -ms-flex-align: stretch;\n align-items: stretch;\n display: -ms-flexbox;\n display: flex;\n justify-items: stretch;\n}\n\n.avatar--icon,\n.avatar--fallback {\n padding: 20%;\n}\n\n.avatar--initials {\n padding: 30% var(--mds-avatar-initials-padding) 25%;\n}\n\n.image {\n aspect-ratio: 1/1;\n border-radius: var(--mds-avatar-radius);\n}\n\n.fallback-icon {\n aspect-ratio: 1/1;\n fill: var(--mds-avatar-color);\n width: 100%;\n}\n\n\n.initials-text{\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-weight: 700;\n\n -ms-flex-align: center;\n\n align-items: center;\n color: var(--mds-avatar-color);\n display: -ms-flexbox;\n display: flex;\n height: 100%;\n -ms-flex-pack: center;\n justify-content: center;\n text-transform: uppercase;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n width: 100%;\n}\n\n:host([initials]) .initials-text {\n\n --mds-avatar-color: rgb(var(--tone-neutral));\n}\n\n.fit {\n display: inline-block;\n white-space: nowrap !important;\n}\n\n.icon{\n\n -webkit-transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;\n\n transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;\n\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;\n\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n -webkit-transition-duration: 150ms;\n\n transition-duration: 150ms;\n\n fill: var(--mds-avatar-color);\n height: 100%;\n width: 100%;\n}\n\n@tailwind utilities;\n\n:host( [variant=\"primary\"] ),\n:host( [variant=\"primary\"][tone=\"strong\"] ) {\n\n --mds-avatar-background-color: rgb(var(--brand-maggioli-05));\n --mds-avatar-color: rgb(var(--brand-maggioli-10));\n}\n\n:host( [variant=\"primary\"][tone=\"weak\"] ) {\n\n --mds-avatar-background-color: rgb(var(--brand-maggioli-09));\n --mds-avatar-color: rgb(var(--brand-maggioli-05));\n}\n\n:host( [variant=\"orange\"] ),\n:host( [variant=\"orange\"][tone=\"strong\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-orange-05));\n --mds-avatar-color: rgb(var(--label-orange-10));\n}\n\n:host( [variant=\"orange\"][tone=\"weak\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-orange-09));\n --mds-avatar-color: rgb(var(--label-orange-05));\n}\n\n:host( [variant=\"amaranth\"] ),\n:host( [variant=\"amaranth\"][tone=\"strong\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-amaranth-05));\n --mds-avatar-color: rgb(var(--label-amaranth-10));\n}\n\n:host( [variant=\"amaranth\"][tone=\"weak\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-amaranth-09));\n --mds-avatar-color: rgb(var(--label-amaranth-05));\n}\n\n:host( [variant=\"orchid\"] ),\n:host( [variant=\"orchid\"][tone=\"strong\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-orchid-05));\n --mds-avatar-color: rgb(var(--label-orchid-10));\n}\n\n:host( [variant=\"orchid\"][tone=\"weak\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-orchid-09));\n --mds-avatar-color: rgb(var(--label-orchid-05));\n}\n\n:host( [variant=\"violet\"] ),\n:host( [variant=\"violet\"][tone=\"strong\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-violet-05));\n --mds-avatar-color: rgb(var(--label-violet-10));\n}\n\n:host( [variant=\"violet\"][tone=\"weak\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-violet-09));\n --mds-avatar-color: rgb(var(--label-violet-05));\n}\n\n:host( [variant=\"blue\"] ),\n:host( [variant=\"blue\"][tone=\"strong\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-blue-05));\n --mds-avatar-color: rgb(var(--label-blue-10));\n}\n\n:host( [variant=\"blue\"][tone=\"weak\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-blue-09));\n --mds-avatar-color: rgb(var(--label-blue-05));\n}\n\n:host( [variant=\"sky\"] ),\n:host( [variant=\"sky\"][tone=\"strong\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-sky-05));\n --mds-avatar-color: rgb(var(--label-sky-10));\n}\n\n:host( [variant=\"sky\"][tone=\"weak\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-sky-09));\n --mds-avatar-color: rgb(var(--label-sky-05));\n}\n\n:host( [variant=\"aqua\"] ),\n:host( [variant=\"aqua\"][tone=\"strong\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-aqua-05));\n --mds-avatar-color: rgb(var(--label-aqua-10));\n}\n\n:host( [variant=\"aqua\"][tone=\"weak\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-aqua-09));\n --mds-avatar-color: rgb(var(--label-aqua-05));\n}\n\n:host( [variant=\"green\"] ),\n:host( [variant=\"green\"][tone=\"strong\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-green-05));\n --mds-avatar-color: rgb(var(--label-green-10));\n}\n\n:host( [variant=\"green\"][tone=\"weak\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-green-09));\n --mds-avatar-color: rgb(var(--label-green-05));\n}\n\n:host( [variant=\"lime\"] ),\n:host( [variant=\"lime\"][tone=\"strong\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-lime-05));\n --mds-avatar-color: rgb(var(--label-lime-10));\n}\n\n:host( [variant=\"lime\"][tone=\"weak\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-lime-09));\n --mds-avatar-color: rgb(var(--label-lime-05));\n}\n\n:host( [variant=\"yellow\"] ),\n:host( [variant=\"yellow\"][tone=\"strong\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-yellow-05));\n --mds-avatar-color: rgb(var(--label-yellow-10));\n}\n\n:host( [variant=\"yellow\"][tone=\"weak\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-yellow-09));\n --mds-avatar-color: rgb(var(--label-yellow-05));\n}\n\n:host( [variant=\"error\"] ),\n:host( [variant=\"error\"][tone=\"strong\"] ) {\n\n --mds-avatar-background-color: rgb(var(--status-error-05));\n --mds-avatar-color: rgb(var(--status-error-10));\n}\n\n:host( [variant=\"error\"][tone=\"weak\"] ) {\n\n --mds-avatar-background-color: rgb(var(--status-error-09));\n --mds-avatar-color: rgb(var(--status-error-05));\n}\n\n:host( [variant=\"warning\"] ),\n:host( [variant=\"warning\"][tone=\"strong\"] ) {\n\n --mds-avatar-background-color: rgb(var(--status-warning-05));\n --mds-avatar-color: rgb(var(--status-warning-10));\n}\n\n:host( [variant=\"warning\"][tone=\"weak\"] ) {\n\n --mds-avatar-background-color: rgb(var(--status-warning-09));\n --mds-avatar-color: rgb(var(--status-warning-05));\n}\n\n:host( [variant=\"info\"] ),\n:host( [variant=\"info\"][tone=\"strong\"] ) {\n\n --mds-avatar-background-color: rgb(var(--status-info-05));\n --mds-avatar-color: rgb(var(--status-info-10));\n}\n\n:host( [variant=\"info\"][tone=\"weak\"] ) {\n\n --mds-avatar-background-color: rgb(var(--status-info-09));\n --mds-avatar-color: rgb(var(--status-info-05));\n}\n\n:host( [variant=\"success\"] ),\n:host( [variant=\"success\"][tone=\"strong\"] ) {\n\n --mds-avatar-background-color: rgb(var(--status-success-05));\n --mds-avatar-color: rgb(var(--status-success-10));\n}\n\n:host( [variant=\"success\"][tone=\"weak\"] ) {\n\n --mds-avatar-background-color: rgb(var(--status-success-09));\n --mds-avatar-color: rgb(var(--status-success-05));\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n .avatar,\n .icon {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n}\n\n@container style(--magma-pref-animation: system) {\n\n @media (prefers-reduced-motion) {\n .avatar,\n .icon {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n }\n}\n\n.static{\n\n position: static;\n}\n\n.fixed{\n\n position: fixed;\n}\n\n.absolute{\n\n position: absolute;\n}\n\n.w-2400{\n\n width: 6rem;\n}\n\n.w-600{\n\n width: 1.5rem;\n}\n\n.border{\n\n border-width: 1px;\n}\n\n.bg-brand-maggioli-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--brand-maggioli-05) / var(--tw-bg-opacity));\n}\n\n.bg-label-amaranth-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-amaranth-05) / var(--tw-bg-opacity));\n}\n\n.bg-label-amaranth-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-amaranth-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-aqua-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-aqua-05) / var(--tw-bg-opacity));\n}\n\n.bg-label-aqua-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-aqua-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-blue-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-blue-05) / var(--tw-bg-opacity));\n}\n\n.bg-label-blue-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-blue-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-green-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-green-05) / var(--tw-bg-opacity));\n}\n\n.bg-label-green-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-green-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-lime-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-lime-05) / var(--tw-bg-opacity));\n}\n\n.bg-label-lime-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-lime-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orange-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-orange-05) / var(--tw-bg-opacity));\n}\n\n.bg-label-orange-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-orange-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orchid-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-orchid-05) / var(--tw-bg-opacity));\n}\n\n.bg-label-orchid-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-orchid-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-sky-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-sky-05) / var(--tw-bg-opacity));\n}\n\n.bg-label-violet-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-violet-05) / var(--tw-bg-opacity));\n}\n\n.bg-label-violet-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-violet-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-yellow-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-yellow-05) / var(--tw-bg-opacity));\n}\n\n.bg-label-yellow-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-yellow-10) / var(--tw-bg-opacity));\n}\n\n.bg-status-error-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--status-error-05) / var(--tw-bg-opacity));\n}\n\n.bg-status-info-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--status-info-05) / var(--tw-bg-opacity));\n}\n\n.bg-status-success-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--status-success-05) / var(--tw-bg-opacity));\n}\n\n.bg-status-warning-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--status-warning-05) / var(--tw-bg-opacity));\n}\n\n.bg-tone-neutral-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--tone-neutral-10) / var(--tw-bg-opacity));\n}\n\n.fill-label-amaranth-04{\n\n fill: rgb(var(--label-amaranth-04));\n}\n\n.fill-label-aqua-04{\n\n fill: rgb(var(--label-aqua-04));\n}\n\n.fill-label-blue-04{\n\n fill: rgb(var(--label-blue-04));\n}\n\n.fill-label-green-04{\n\n fill: rgb(var(--label-green-04));\n}\n\n.fill-label-lime-04{\n\n fill: rgb(var(--label-lime-04));\n}\n\n.fill-label-orange-04{\n\n fill: rgb(var(--label-orange-04));\n}\n\n.fill-label-orchid-04{\n\n fill: rgb(var(--label-orchid-04));\n}\n\n.fill-label-violet-04{\n\n fill: rgb(var(--label-violet-04));\n}\n\n.fill-label-yellow-04{\n\n fill: rgb(var(--label-yellow-04));\n}\n\n.fill-tone-neutral-04{\n\n fill: rgb(var(--tone-neutral-04));\n}\n\n.text-label-amaranth-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-amaranth-04) / var(--tw-text-opacity));\n}\n\n.text-label-aqua-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-aqua-04) / var(--tw-text-opacity));\n}\n\n.text-label-blue-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-blue-04) / var(--tw-text-opacity));\n}\n\n.text-label-green-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-green-04) / var(--tw-text-opacity));\n}\n\n.text-label-lime-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-lime-04) / var(--tw-text-opacity));\n}\n\n.text-label-orange-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-orange-04) / var(--tw-text-opacity));\n}\n\n.text-label-orchid-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-orchid-04) / var(--tw-text-opacity));\n}\n\n.text-label-violet-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-violet-04) / var(--tw-text-opacity));\n}\n\n.text-label-yellow-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-yellow-04) / var(--tw-text-opacity));\n}\n\n.text-tone-neutral-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--tone-neutral-04) / var(--tw-text-opacity));\n}\n\n.shadow{\n\n --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n\n -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n@container style(--magma-pref-contrast: more) {\n .avatar--icon,\n .avatar--fallback,\n .avatar--initials {\n -webkit-box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n @media (prefers-contrast: more) {\n .avatar--icon,\n .avatar--fallback,\n .avatar--initials {\n -webkit-box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n }\n }\n}\n\n\n\n@container (max-width: 24px) {\n .avatar--initials {\n padding: 0 var(--mds-avatar-initials-padding);\n }\n\n .initials-text{\n\n font-weight: 900;\n }\n}\n"; | ||
| const MdsAvatarStyle0 = mdsAvatarCss; | ||
@@ -43,0 +43,0 @@ |
| { | ||
| "timestamp": "2024-09-26T10:57:33", | ||
| "timestamp": "2024-10-14T08:23:56", | ||
| "compiler": { | ||
@@ -4,0 +4,0 @@ "name": "@stencil/core", |
@@ -1,1 +0,1 @@ | ||
| import{r as registerInstance,h,H as Host,g as getElement}from"./index-83cf6d5b.js";function r(n){var a,t,o="";if("string"==typeof n||"number"==typeof n)o+=n;else if("object"==typeof n)if(Array.isArray(n)){var e=n.length;for(a=0;a<e;a++)n[a]&&(t=r(n[a]))&&(o&&(o+=" "),o+=t)}else for(t in n)n[t]&&(o&&(o+=" "),o+=t);return o}function clsx(){for(var n,a,t=0,o="",e=arguments.length;t<e;t++)(n=arguments[t])&&(a=r(n))&&(o&&(o+=" "),o+=a);return o}var commonjsGlobal=typeof globalThis!=="undefined"?globalThis:typeof window!=="undefined"?window:typeof global!=="undefined"?global:typeof self!=="undefined"?self:{};var fitty_min={exports:{}};(function(n,a){!function(a,r){n.exports=r()}(commonjsGlobal,(function(){return function(n){if(n){var a=function(n){return[].slice.call(n)},r=0,t=1,o=2,e=3,i=[],l=null,s="requestAnimationFrame"in n?function(){var a=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{sync:!1};n.cancelAnimationFrame(l);var r=function(){return c(i.filter((function(n){return n.dirty&&n.active})))};if(a.sync)return r();l=n.requestAnimationFrame(r)}:function(){},b=function(n){return function(a){i.forEach((function(a){return a.dirty=n})),s(a)}},c=function(n){n.filter((function(n){return!n.styleComputed})).forEach((function(n){n.styleComputed=u(n)})),n.filter(f).forEach(m);var a=n.filter(d);a.forEach(v),a.forEach((function(n){m(n),g(n)})),a.forEach(h)},g=function(n){return n.dirty=r},v=function(n){n.availableWidth=n.element.parentNode.clientWidth,n.currentWidth=n.element.scrollWidth,n.previousFontSize=n.currentFontSize,n.currentFontSize=Math.min(Math.max(n.minSize,n.availableWidth/n.currentWidth*n.previousFontSize),n.maxSize),n.whiteSpace=n.multiLine&&n.currentFontSize===n.minSize?"normal":"nowrap"},d=function(n){return n.dirty!==o||n.dirty===o&&n.element.parentNode.clientWidth!==n.availableWidth},u=function(a){var r=n.getComputedStyle(a.element,null);return a.currentFontSize=parseFloat(r.getPropertyValue("font-size")),a.display=r.getPropertyValue("display"),a.whiteSpace=r.getPropertyValue("white-space"),!0},f=function(n){var a=!1;return!n.preStyleTestCompleted&&(/inline-/.test(n.display)||(a=!0,n.display="inline-block"),"nowrap"!==n.whiteSpace&&(a=!0,n.whiteSpace="nowrap"),n.preStyleTestCompleted=!0,a)},m=function(n){n.element.style.whiteSpace=n.whiteSpace,n.element.style.display=n.display,n.element.style.fontSize=n.currentFontSize+"px"},h=function(n){n.element.dispatchEvent(new CustomEvent("fit",{detail:{oldValue:n.previousFontSize,newValue:n.currentFontSize,scaleFactor:n.currentFontSize/n.previousFontSize}}))},w=function(n,a){return function(r){n.dirty=a,n.active&&s(r)}},p=function(n){return function(){i=i.filter((function(a){return a.element!==n.element})),n.observeMutations&&n.observer.disconnect(),n.element.style.whiteSpace=n.originalStyle.whiteSpace,n.element.style.display=n.originalStyle.display,n.element.style.fontSize=n.originalStyle.fontSize}},y=function(n){return function(){n.active||(n.active=!0,s())}},k=function(n){return function(){return n.active=!1}},x=function(n){n.observeMutations&&(n.observer=new MutationObserver(w(n,t)),n.observer.observe(n.element,n.observeMutations))},q={minSize:16,maxSize:512,multiLine:!0,observeMutations:"MutationObserver"in n&&{subtree:!0,childList:!0,characterData:!0}},z=null,M=function(){n.clearTimeout(z),z=n.setTimeout(b(o),S.observeWindowDelay)},j=["resize","orientationchange"];return Object.defineProperty(S,"observeWindow",{set:function(a){var r="".concat(a?"add":"remove","EventListener");j.forEach((function(a){n[r](a,M)}))}}),S.observeWindow=!0,S.observeWindowDelay=100,S.fitAll=b(e),S}function A(n,a){var r=Object.assign({},q,a),t=n.map((function(n){var a=Object.assign({},r,{element:n,active:!0});return function(n){n.originalStyle={whiteSpace:n.element.style.whiteSpace,display:n.element.style.display,fontSize:n.element.style.fontSize},x(n),n.newbie=!0,n.dirty=!0,i.push(n)}(a),{element:n,fit:w(a,e),unfreeze:y(a),freeze:k(a),unsubscribe:p(a)}}));return s(),t}function S(n){var r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return"string"==typeof n?A(a(document.querySelectorAll(n)),r):A([n],r)[0]}}("undefined"==typeof window?null:window)}))})(fitty_min);var fitty=fitty_min.exports;var avatarVariant=["bg-brand-maggioli-05","bg-label-amaranth-05","bg-label-aqua-05","bg-label-blue-05","bg-label-green-05","bg-label-lime-05","bg-label-orange-05","bg-label-orchid-05","bg-label-sky-05","bg-label-yellow-05","bg-label-violet-05","bg-status-error-05","bg-status-info-05","bg-status-success-05","bg-status-warning-05"];var miBaselinePerson='<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4s-4 1.79-4 4s1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>';var mdsAvatarCss='@tailwind components;\n\n.svg{\n\n display: -ms-flexbox;\n\n display: flex;\n}\n\n.svg svg{\n\n aspect-ratio: 1/1;\n\n height: 100%;\n\n width: 100%;\n}\n@tailwind utilities;\n\n/**\n * @prop --mds-avatar-background-color-pending: The background-color when an image is loading\n * @prop --mds-avatar-background-color: The background-color of the component\n * @prop --mds-avatar-color: The color of the placeholder icon\n * @prop --mds-avatar-radius: The border-radius of the element\n */\n\n:host {\n\n --mds-avatar-background-color-pending: rgb(var(--tone-neutral-08));\n --mds-avatar-background-color: rgb(var(--brand-maggioli-05));\n --mds-avatar-color: rgb(var(--brand-maggioli-10));\n --mds-avatar-radius: 9999px;\n --mds-avatar-initials-padding: 20%;\n\n aspect-ratio: 1/1;\n border-radius: var(--mds-avatar-radius);\n container-name: mds-avatar;\n container-type: inline-size;\n display: -ms-inline-flexbox;\n display: inline-flex;\n overflow: hidden;\n width: 3rem;\n}\n\n.avatar{\n\n -webkit-transition-duration: 200ms;\n\n transition-duration: 200ms;\n\n aspect-ratio: 1/1;\n border-radius: var(--mds-avatar-radius);\n color: transparent;\n display: -ms-inline-flexbox;\n display: inline-flex;\n overflow: hidden;\n -webkit-transition-property: color, background-color, fill, -webkit-box-shadow;\n transition-property: color, background-color, fill, -webkit-box-shadow;\n transition-property: color, background-color, box-shadow, fill;\n transition-property: color, background-color, box-shadow, fill, -webkit-box-shadow;\n width: 100%;\n}\n\n.avatar--pending {\n background-color: var(--mds-avatar-background-color-pending);\n}\n\n.avatar--loaded {\n -webkit-animation: none;\n animation: none;\n}\n\n.avatar--icon,\n.avatar--fallback,\n.avatar--initials {\n background-color: var(--mds-avatar-background-color);\n -webkit-box-shadow: none;\n box-shadow: none;\n}\n\n.avatar--fallback,\n.avatar--initials {\n -ms-flex-align: stretch;\n align-items: stretch;\n display: -ms-flexbox;\n display: flex;\n justify-items: stretch;\n}\n\n.avatar--icon,\n.avatar--fallback {\n padding: 20%;\n}\n\n.avatar--initials {\n padding: 30% var(--mds-avatar-initials-padding) 25%;\n}\n\n.image {\n aspect-ratio: 1/1;\n border-radius: var(--mds-avatar-radius);\n}\n\n.fallback-icon {\n aspect-ratio: 1/1;\n fill: var(--mds-avatar-color);\n width: 100%;\n}\n\n\n.initials-text{\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', sans-serif;\n\n font-weight: 700;\n\n -ms-flex-align: center;\n\n align-items: center;\n color: var(--mds-avatar-color);\n display: -ms-flexbox;\n display: flex;\n height: 100%;\n -ms-flex-pack: center;\n justify-content: center;\n text-transform: uppercase;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n width: 100%;\n}\n\n:host([initials]) .initials-text {\n\n --mds-avatar-color: rgb(var(--tone-neutral));\n}\n\n.fit {\n display: inline-block;\n white-space: nowrap !important;\n}\n\n.icon{\n\n -webkit-transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;\n\n transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;\n\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;\n\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n -webkit-transition-duration: 150ms;\n\n transition-duration: 150ms;\n\n fill: var(--mds-avatar-color);\n height: 100%;\n width: 100%;\n}\n\n@tailwind utilities;\n\n:host( [variant="primary"] ),\n:host( [variant="primary"][tone="strong"] ) {\n\n --mds-avatar-background-color: rgb(var(--brand-maggioli-05));\n --mds-avatar-color: rgb(var(--brand-maggioli-10));\n}\n\n:host( [variant="primary"][tone="weak"] ) {\n\n --mds-avatar-background-color: rgb(var(--brand-maggioli-09));\n --mds-avatar-color: rgb(var(--brand-maggioli-05));\n}\n\n:host( [variant="orange"] ),\n:host( [variant="orange"][tone="strong"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-orange-05));\n --mds-avatar-color: rgb(var(--label-orange-10));\n}\n\n:host( [variant="orange"][tone="weak"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-orange-09));\n --mds-avatar-color: rgb(var(--label-orange-05));\n}\n\n:host( [variant="amaranth"] ),\n:host( [variant="amaranth"][tone="strong"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-amaranth-05));\n --mds-avatar-color: rgb(var(--label-amaranth-10));\n}\n\n:host( [variant="amaranth"][tone="weak"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-amaranth-09));\n --mds-avatar-color: rgb(var(--label-amaranth-05));\n}\n\n:host( [variant="orchid"] ),\n:host( [variant="orchid"][tone="strong"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-orchid-05));\n --mds-avatar-color: rgb(var(--label-orchid-10));\n}\n\n:host( [variant="orchid"][tone="weak"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-orchid-09));\n --mds-avatar-color: rgb(var(--label-orchid-05));\n}\n\n:host( [variant="violet"] ),\n:host( [variant="violet"][tone="strong"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-violet-05));\n --mds-avatar-color: rgb(var(--label-violet-10));\n}\n\n:host( [variant="violet"][tone="weak"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-violet-09));\n --mds-avatar-color: rgb(var(--label-violet-05));\n}\n\n:host( [variant="blue"] ),\n:host( [variant="blue"][tone="strong"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-blue-05));\n --mds-avatar-color: rgb(var(--label-blue-10));\n}\n\n:host( [variant="blue"][tone="weak"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-blue-09));\n --mds-avatar-color: rgb(var(--label-blue-05));\n}\n\n:host( [variant="sky"] ),\n:host( [variant="sky"][tone="strong"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-sky-05));\n --mds-avatar-color: rgb(var(--label-sky-10));\n}\n\n:host( [variant="sky"][tone="weak"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-sky-09));\n --mds-avatar-color: rgb(var(--label-sky-05));\n}\n\n:host( [variant="aqua"] ),\n:host( [variant="aqua"][tone="strong"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-aqua-05));\n --mds-avatar-color: rgb(var(--label-aqua-10));\n}\n\n:host( [variant="aqua"][tone="weak"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-aqua-09));\n --mds-avatar-color: rgb(var(--label-aqua-05));\n}\n\n:host( [variant="green"] ),\n:host( [variant="green"][tone="strong"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-green-05));\n --mds-avatar-color: rgb(var(--label-green-10));\n}\n\n:host( [variant="green"][tone="weak"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-green-09));\n --mds-avatar-color: rgb(var(--label-green-05));\n}\n\n:host( [variant="lime"] ),\n:host( [variant="lime"][tone="strong"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-lime-05));\n --mds-avatar-color: rgb(var(--label-lime-10));\n}\n\n:host( [variant="lime"][tone="weak"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-lime-09));\n --mds-avatar-color: rgb(var(--label-lime-05));\n}\n\n:host( [variant="yellow"] ),\n:host( [variant="yellow"][tone="strong"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-yellow-05));\n --mds-avatar-color: rgb(var(--label-yellow-10));\n}\n\n:host( [variant="yellow"][tone="weak"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-yellow-09));\n --mds-avatar-color: rgb(var(--label-yellow-05));\n}\n\n:host( [variant="error"] ),\n:host( [variant="error"][tone="strong"] ) {\n\n --mds-avatar-background-color: rgb(var(--status-error-05));\n --mds-avatar-color: rgb(var(--status-error-10));\n}\n\n:host( [variant="error"][tone="weak"] ) {\n\n --mds-avatar-background-color: rgb(var(--status-error-09));\n --mds-avatar-color: rgb(var(--status-error-05));\n}\n\n:host( [variant="warning"] ),\n:host( [variant="warning"][tone="strong"] ) {\n\n --mds-avatar-background-color: rgb(var(--status-warning-05));\n --mds-avatar-color: rgb(var(--status-warning-10));\n}\n\n:host( [variant="warning"][tone="weak"] ) {\n\n --mds-avatar-background-color: rgb(var(--status-warning-09));\n --mds-avatar-color: rgb(var(--status-warning-05));\n}\n\n:host( [variant="info"] ),\n:host( [variant="info"][tone="strong"] ) {\n\n --mds-avatar-background-color: rgb(var(--status-info-05));\n --mds-avatar-color: rgb(var(--status-info-10));\n}\n\n:host( [variant="info"][tone="weak"] ) {\n\n --mds-avatar-background-color: rgb(var(--status-info-09));\n --mds-avatar-color: rgb(var(--status-info-05));\n}\n\n:host( [variant="success"] ),\n:host( [variant="success"][tone="strong"] ) {\n\n --mds-avatar-background-color: rgb(var(--status-success-05));\n --mds-avatar-color: rgb(var(--status-success-10));\n}\n\n:host( [variant="success"][tone="weak"] ) {\n\n --mds-avatar-background-color: rgb(var(--status-success-09));\n --mds-avatar-color: rgb(var(--status-success-05));\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n .avatar,\n .icon {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n}\n\n@container style(--magma-pref-animation: system) {\n\n @media (prefers-reduced-motion) {\n .avatar,\n .icon {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n }\n}\n\n.static{\n\n position: static;\n}\n\n.fixed{\n\n position: fixed;\n}\n\n.absolute{\n\n position: absolute;\n}\n\n.w-2400{\n\n width: 6rem;\n}\n\n.w-600{\n\n width: 1.5rem;\n}\n\n.border{\n\n border-width: 1px;\n}\n\n.bg-brand-maggioli-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--brand-maggioli-05) / var(--tw-bg-opacity));\n}\n\n.bg-label-amaranth-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-amaranth-05) / var(--tw-bg-opacity));\n}\n\n.bg-label-amaranth-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-amaranth-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-aqua-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-aqua-05) / var(--tw-bg-opacity));\n}\n\n.bg-label-aqua-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-aqua-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-blue-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-blue-05) / var(--tw-bg-opacity));\n}\n\n.bg-label-blue-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-blue-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-green-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-green-05) / var(--tw-bg-opacity));\n}\n\n.bg-label-green-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-green-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-lime-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-lime-05) / var(--tw-bg-opacity));\n}\n\n.bg-label-lime-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-lime-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orange-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-orange-05) / var(--tw-bg-opacity));\n}\n\n.bg-label-orange-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-orange-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orchid-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-orchid-05) / var(--tw-bg-opacity));\n}\n\n.bg-label-orchid-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-orchid-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-sky-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-sky-05) / var(--tw-bg-opacity));\n}\n\n.bg-label-violet-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-violet-05) / var(--tw-bg-opacity));\n}\n\n.bg-label-violet-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-violet-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-yellow-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-yellow-05) / var(--tw-bg-opacity));\n}\n\n.bg-label-yellow-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-yellow-10) / var(--tw-bg-opacity));\n}\n\n.bg-status-error-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--status-error-05) / var(--tw-bg-opacity));\n}\n\n.bg-status-info-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--status-info-05) / var(--tw-bg-opacity));\n}\n\n.bg-status-success-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--status-success-05) / var(--tw-bg-opacity));\n}\n\n.bg-status-warning-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--status-warning-05) / var(--tw-bg-opacity));\n}\n\n.bg-tone-neutral-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--tone-neutral-10) / var(--tw-bg-opacity));\n}\n\n.fill-label-amaranth-04{\n\n fill: rgb(var(--label-amaranth-04));\n}\n\n.fill-label-aqua-04{\n\n fill: rgb(var(--label-aqua-04));\n}\n\n.fill-label-blue-04{\n\n fill: rgb(var(--label-blue-04));\n}\n\n.fill-label-green-04{\n\n fill: rgb(var(--label-green-04));\n}\n\n.fill-label-lime-04{\n\n fill: rgb(var(--label-lime-04));\n}\n\n.fill-label-orange-04{\n\n fill: rgb(var(--label-orange-04));\n}\n\n.fill-label-orchid-04{\n\n fill: rgb(var(--label-orchid-04));\n}\n\n.fill-label-violet-04{\n\n fill: rgb(var(--label-violet-04));\n}\n\n.fill-label-yellow-04{\n\n fill: rgb(var(--label-yellow-04));\n}\n\n.fill-tone-neutral-04{\n\n fill: rgb(var(--tone-neutral-04));\n}\n\n.text-label-amaranth-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-amaranth-04) / var(--tw-text-opacity));\n}\n\n.text-label-aqua-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-aqua-04) / var(--tw-text-opacity));\n}\n\n.text-label-blue-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-blue-04) / var(--tw-text-opacity));\n}\n\n.text-label-green-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-green-04) / var(--tw-text-opacity));\n}\n\n.text-label-lime-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-lime-04) / var(--tw-text-opacity));\n}\n\n.text-label-orange-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-orange-04) / var(--tw-text-opacity));\n}\n\n.text-label-orchid-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-orchid-04) / var(--tw-text-opacity));\n}\n\n.text-label-violet-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-violet-04) / var(--tw-text-opacity));\n}\n\n.text-label-yellow-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-yellow-04) / var(--tw-text-opacity));\n}\n\n.text-tone-neutral-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--tone-neutral-04) / var(--tw-text-opacity));\n}\n\n.shadow{\n\n --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n\n -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n@container style(--magma-pref-contrast: more) {\n .avatar--icon,\n .avatar--fallback,\n .avatar--initials {\n -webkit-box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n @media (prefers-contrast: more) {\n .avatar--icon,\n .avatar--fallback,\n .avatar--initials {\n -webkit-box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n }\n }\n}\n\n\n\n@container (max-width: 24px) {\n .avatar--initials {\n padding: 0 var(--mds-avatar-initials-padding);\n }\n\n .initials-text{\n\n font-weight: 900;\n }\n}\n';var MdsAvatarStyle0=mdsAvatarCss;var MdsAvatar=function(){function n(n){var a=this;registerInstance(this,n);this.backgroundColor="";this.fittyInitialized=false;this.initialsChanged=false;this.addFontResize=function(){var n;if(a.fittyInitialized){return}var r=(n=a.element.shadowRoot)===null||n===void 0?void 0:n.querySelector(".fit");a.fittyElements=fitty(r,{minSize:10});a.observer=new ResizeObserver((function(n){n.forEach((function(){a.fittyElements.fit()}))}));a.observer.observe(a.element);a.fittyInitialized=true};this.removeFontResize=function(){if(!a.fittyInitialized){return}a.fittyInitialized=false;a.observer.unobserve(a.element)};this.checkInitials=function(n){if(n!==""&&n!==undefined){if(a.fittyInitialized){return}if(!a.fittyInitialized){a.addFontResize()}return}if(a.fittyInitialized){a.removeFontResize()}};this.checkInitialsBackground=function(){if(a.initials){var n=a.initials.toLowerCase().replace(/[^a-zA-Z0-9]+/g,"").substring(0,2);if(n.length===1){n=n+n}a.backgroundColor=avatarVariant[(n.substring(0,1).charCodeAt(0)+n.substring(1,2).charCodeAt(0))%avatarVariant.length]}};this.fallback=false;this.loaded=true;this.icon=undefined;this.initials=undefined;this.src=undefined;this.tone=undefined;this.variant=undefined}n.prototype.componentWillLoad=function(){this.checkInitialsBackground()};n.prototype.componentDidLoad=function(){if(this.src!==undefined){this.loaded=false}this.checkInitials(this.initials)};n.prototype.componentDidRender=function(){if(this.initialsChanged){this.checkInitials(this.initials);this.initialsChanged=false}};n.prototype.initialsHandler=function(){this.initialsChanged=true;this.checkInitialsBackground()};n.prototype.srcHandler=function(n){if(n===undefined){this.loaded=true}};n.prototype.iconHandler=function(n){if(n!==undefined){this.loaded=true}};n.prototype.render=function(){var n=this;return h(Host,{key:"65d54a0cc768f2a9325ab66b6be361b66f62a9bd"},h("div",{key:"990b1e780bab64ec2198849bf16dbe68f04cfe28",class:clsx("avatar",this.initials&&!this.fallback&&!this.src&&"avatar--initials",(this.fallback||!this.icon&&!this.initials&&!this.src)&&"avatar--fallback",this.icon&&"avatar--icon",this.loaded?"avatar--loaded":"avatar--pending",this.initials?this.backgroundColor:""),part:"wrapper"},this.initials&&!this.fallback&&!this.src&&h("div",{key:"d28097e6ecbd4fec43102988ab346e4490fb10f5",class:"initials-text"},h("span",{key:"bdf0d733064bb9b1bab4e921a9d79a78313d82e3",class:"fit"},this.initials.substring(0,2))),this.src&&!this.fallback&&!this.icon&&h("mds-img",{key:"5f701a406664e325359b242d93fef016f539cdca",class:"image",loading:"lazy",onMdsImgLoadError:function(){n.loaded=true;n.fallback=true},onMdsImgLoadSuccess:function(){n.loaded=true},src:this.src}),this.icon&&!this.initials&&h("mds-icon",{key:"fd6a6ee2f9c36e886dd8747a4ec3208499194005",class:"icon",part:"icon",name:this.icon}),(this.fallback||!this.icon&&!this.initials&&!this.src)&&h("i",{key:"fd68c79da7ed5794690668ec5a0eccce7806fe2a",class:"svg fallback-icon",innerHTML:miBaselinePerson})))};Object.defineProperty(n.prototype,"element",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(n,"watchers",{get:function(){return{initials:["initialsHandler"],src:["srcHandler"],icon:["iconHandler"]}},enumerable:false,configurable:true});return n}();MdsAvatar.style=MdsAvatarStyle0;export{MdsAvatar as mds_avatar}; | ||
| import{r as registerInstance,h,H as Host,g as getElement}from"./index-83cf6d5b.js";function r(n){var a,t,o="";if("string"==typeof n||"number"==typeof n)o+=n;else if("object"==typeof n)if(Array.isArray(n)){var e=n.length;for(a=0;a<e;a++)n[a]&&(t=r(n[a]))&&(o&&(o+=" "),o+=t)}else for(t in n)n[t]&&(o&&(o+=" "),o+=t);return o}function clsx(){for(var n,a,t=0,o="",e=arguments.length;t<e;t++)(n=arguments[t])&&(a=r(n))&&(o&&(o+=" "),o+=a);return o}var commonjsGlobal=typeof globalThis!=="undefined"?globalThis:typeof window!=="undefined"?window:typeof global!=="undefined"?global:typeof self!=="undefined"?self:{};var fitty_min={exports:{}};(function(n,a){!function(a,r){n.exports=r()}(commonjsGlobal,(function(){return function(n){if(n){var a=function(n){return[].slice.call(n)},r=0,t=1,o=2,e=3,i=[],l=null,s="requestAnimationFrame"in n?function(){var a=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{sync:!1};n.cancelAnimationFrame(l);var r=function(){return c(i.filter((function(n){return n.dirty&&n.active})))};if(a.sync)return r();l=n.requestAnimationFrame(r)}:function(){},b=function(n){return function(a){i.forEach((function(a){return a.dirty=n})),s(a)}},c=function(n){n.filter((function(n){return!n.styleComputed})).forEach((function(n){n.styleComputed=u(n)})),n.filter(f).forEach(m);var a=n.filter(d);a.forEach(v),a.forEach((function(n){m(n),g(n)})),a.forEach(h)},g=function(n){return n.dirty=r},v=function(n){n.availableWidth=n.element.parentNode.clientWidth,n.currentWidth=n.element.scrollWidth,n.previousFontSize=n.currentFontSize,n.currentFontSize=Math.min(Math.max(n.minSize,n.availableWidth/n.currentWidth*n.previousFontSize),n.maxSize),n.whiteSpace=n.multiLine&&n.currentFontSize===n.minSize?"normal":"nowrap"},d=function(n){return n.dirty!==o||n.dirty===o&&n.element.parentNode.clientWidth!==n.availableWidth},u=function(a){var r=n.getComputedStyle(a.element,null);return a.currentFontSize=parseFloat(r.getPropertyValue("font-size")),a.display=r.getPropertyValue("display"),a.whiteSpace=r.getPropertyValue("white-space"),!0},f=function(n){var a=!1;return!n.preStyleTestCompleted&&(/inline-/.test(n.display)||(a=!0,n.display="inline-block"),"nowrap"!==n.whiteSpace&&(a=!0,n.whiteSpace="nowrap"),n.preStyleTestCompleted=!0,a)},m=function(n){n.element.style.whiteSpace=n.whiteSpace,n.element.style.display=n.display,n.element.style.fontSize=n.currentFontSize+"px"},h=function(n){n.element.dispatchEvent(new CustomEvent("fit",{detail:{oldValue:n.previousFontSize,newValue:n.currentFontSize,scaleFactor:n.currentFontSize/n.previousFontSize}}))},w=function(n,a){return function(r){n.dirty=a,n.active&&s(r)}},p=function(n){return function(){i=i.filter((function(a){return a.element!==n.element})),n.observeMutations&&n.observer.disconnect(),n.element.style.whiteSpace=n.originalStyle.whiteSpace,n.element.style.display=n.originalStyle.display,n.element.style.fontSize=n.originalStyle.fontSize}},y=function(n){return function(){n.active||(n.active=!0,s())}},k=function(n){return function(){return n.active=!1}},x=function(n){n.observeMutations&&(n.observer=new MutationObserver(w(n,t)),n.observer.observe(n.element,n.observeMutations))},q={minSize:16,maxSize:512,multiLine:!0,observeMutations:"MutationObserver"in n&&{subtree:!0,childList:!0,characterData:!0}},z=null,M=function(){n.clearTimeout(z),z=n.setTimeout(b(o),S.observeWindowDelay)},j=["resize","orientationchange"];return Object.defineProperty(S,"observeWindow",{set:function(a){var r="".concat(a?"add":"remove","EventListener");j.forEach((function(a){n[r](a,M)}))}}),S.observeWindow=!0,S.observeWindowDelay=100,S.fitAll=b(e),S}function A(n,a){var r=Object.assign({},q,a),t=n.map((function(n){var a=Object.assign({},r,{element:n,active:!0});return function(n){n.originalStyle={whiteSpace:n.element.style.whiteSpace,display:n.element.style.display,fontSize:n.element.style.fontSize},x(n),n.newbie=!0,n.dirty=!0,i.push(n)}(a),{element:n,fit:w(a,e),unfreeze:y(a),freeze:k(a),unsubscribe:p(a)}}));return s(),t}function S(n){var r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return"string"==typeof n?A(a(document.querySelectorAll(n)),r):A([n],r)[0]}}("undefined"==typeof window?null:window)}))})(fitty_min);var fitty=fitty_min.exports;var avatarVariant=["bg-brand-maggioli-05","bg-label-amaranth-05","bg-label-aqua-05","bg-label-blue-05","bg-label-green-05","bg-label-lime-05","bg-label-orange-05","bg-label-orchid-05","bg-label-sky-05","bg-label-yellow-05","bg-label-violet-05","bg-status-error-05","bg-status-info-05","bg-status-success-05","bg-status-warning-05"];var miBaselinePerson='<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4s-4 1.79-4 4s1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>';var mdsAvatarCss='@tailwind components;\n\n.svg{\n\n display: -ms-flexbox;\n\n display: flex;\n}\n\n.svg svg{\n\n aspect-ratio: 1/1;\n\n height: 100%;\n\n width: 100%;\n}\n@tailwind utilities;\n\n/**\n * @prop --mds-avatar-background-color-pending: The background-color when an image is loading\n * @prop --mds-avatar-background-color: The background-color of the component\n * @prop --mds-avatar-color: The color of the placeholder icon\n * @prop --mds-avatar-radius: The border-radius of the element\n */\n\n:host {\n\n --mds-avatar-background-color-pending: rgb(var(--tone-neutral-08));\n --mds-avatar-background-color: rgb(var(--brand-maggioli-05));\n --mds-avatar-color: rgb(var(--brand-maggioli-10));\n --mds-avatar-radius: 9999px;\n --mds-avatar-initials-padding: 20%;\n\n aspect-ratio: 1/1;\n border-radius: var(--mds-avatar-radius);\n container-name: mds-avatar;\n container-type: inline-size;\n display: -ms-inline-flexbox;\n display: inline-flex;\n overflow: hidden;\n width: 3rem;\n}\n\n.avatar{\n\n -webkit-transition-duration: 200ms;\n\n transition-duration: 200ms;\n\n aspect-ratio: 1/1;\n border-radius: var(--mds-avatar-radius);\n color: transparent;\n display: -ms-inline-flexbox;\n display: inline-flex;\n overflow: hidden;\n -webkit-transition-property: color, background-color, fill, -webkit-box-shadow;\n transition-property: color, background-color, fill, -webkit-box-shadow;\n transition-property: color, background-color, box-shadow, fill;\n transition-property: color, background-color, box-shadow, fill, -webkit-box-shadow;\n width: 100%;\n}\n\n.avatar--pending {\n background-color: var(--mds-avatar-background-color-pending);\n}\n\n.avatar--loaded {\n -webkit-animation: none;\n animation: none;\n}\n\n.avatar--icon,\n.avatar--fallback,\n.avatar--initials {\n background-color: var(--mds-avatar-background-color);\n -webkit-box-shadow: none;\n box-shadow: none;\n}\n\n.avatar--fallback,\n.avatar--initials {\n -ms-flex-align: stretch;\n align-items: stretch;\n display: -ms-flexbox;\n display: flex;\n justify-items: stretch;\n}\n\n.avatar--icon,\n.avatar--fallback {\n padding: 20%;\n}\n\n.avatar--initials {\n padding: 30% var(--mds-avatar-initials-padding) 25%;\n}\n\n.image {\n aspect-ratio: 1/1;\n border-radius: var(--mds-avatar-radius);\n}\n\n.fallback-icon {\n aspect-ratio: 1/1;\n fill: var(--mds-avatar-color);\n width: 100%;\n}\n\n\n.initials-text{\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', sans-serif;\n\n font-weight: 700;\n\n -ms-flex-align: center;\n\n align-items: center;\n color: var(--mds-avatar-color);\n display: -ms-flexbox;\n display: flex;\n height: 100%;\n -ms-flex-pack: center;\n justify-content: center;\n text-transform: uppercase;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n width: 100%;\n}\n\n:host([initials]) .initials-text {\n\n --mds-avatar-color: rgb(var(--tone-neutral));\n}\n\n.fit {\n display: inline-block;\n white-space: nowrap !important;\n}\n\n.icon{\n\n -webkit-transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;\n\n transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;\n\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;\n\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n -webkit-transition-duration: 150ms;\n\n transition-duration: 150ms;\n\n fill: var(--mds-avatar-color);\n height: 100%;\n width: 100%;\n}\n\n@tailwind utilities;\n\n:host( [variant="primary"] ),\n:host( [variant="primary"][tone="strong"] ) {\n\n --mds-avatar-background-color: rgb(var(--brand-maggioli-05));\n --mds-avatar-color: rgb(var(--brand-maggioli-10));\n}\n\n:host( [variant="primary"][tone="weak"] ) {\n\n --mds-avatar-background-color: rgb(var(--brand-maggioli-09));\n --mds-avatar-color: rgb(var(--brand-maggioli-05));\n}\n\n:host( [variant="orange"] ),\n:host( [variant="orange"][tone="strong"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-orange-05));\n --mds-avatar-color: rgb(var(--label-orange-10));\n}\n\n:host( [variant="orange"][tone="weak"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-orange-09));\n --mds-avatar-color: rgb(var(--label-orange-05));\n}\n\n:host( [variant="amaranth"] ),\n:host( [variant="amaranth"][tone="strong"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-amaranth-05));\n --mds-avatar-color: rgb(var(--label-amaranth-10));\n}\n\n:host( [variant="amaranth"][tone="weak"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-amaranth-09));\n --mds-avatar-color: rgb(var(--label-amaranth-05));\n}\n\n:host( [variant="orchid"] ),\n:host( [variant="orchid"][tone="strong"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-orchid-05));\n --mds-avatar-color: rgb(var(--label-orchid-10));\n}\n\n:host( [variant="orchid"][tone="weak"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-orchid-09));\n --mds-avatar-color: rgb(var(--label-orchid-05));\n}\n\n:host( [variant="violet"] ),\n:host( [variant="violet"][tone="strong"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-violet-05));\n --mds-avatar-color: rgb(var(--label-violet-10));\n}\n\n:host( [variant="violet"][tone="weak"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-violet-09));\n --mds-avatar-color: rgb(var(--label-violet-05));\n}\n\n:host( [variant="blue"] ),\n:host( [variant="blue"][tone="strong"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-blue-05));\n --mds-avatar-color: rgb(var(--label-blue-10));\n}\n\n:host( [variant="blue"][tone="weak"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-blue-09));\n --mds-avatar-color: rgb(var(--label-blue-05));\n}\n\n:host( [variant="sky"] ),\n:host( [variant="sky"][tone="strong"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-sky-05));\n --mds-avatar-color: rgb(var(--label-sky-10));\n}\n\n:host( [variant="sky"][tone="weak"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-sky-09));\n --mds-avatar-color: rgb(var(--label-sky-05));\n}\n\n:host( [variant="aqua"] ),\n:host( [variant="aqua"][tone="strong"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-aqua-05));\n --mds-avatar-color: rgb(var(--label-aqua-10));\n}\n\n:host( [variant="aqua"][tone="weak"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-aqua-09));\n --mds-avatar-color: rgb(var(--label-aqua-05));\n}\n\n:host( [variant="green"] ),\n:host( [variant="green"][tone="strong"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-green-05));\n --mds-avatar-color: rgb(var(--label-green-10));\n}\n\n:host( [variant="green"][tone="weak"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-green-09));\n --mds-avatar-color: rgb(var(--label-green-05));\n}\n\n:host( [variant="lime"] ),\n:host( [variant="lime"][tone="strong"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-lime-05));\n --mds-avatar-color: rgb(var(--label-lime-10));\n}\n\n:host( [variant="lime"][tone="weak"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-lime-09));\n --mds-avatar-color: rgb(var(--label-lime-05));\n}\n\n:host( [variant="yellow"] ),\n:host( [variant="yellow"][tone="strong"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-yellow-05));\n --mds-avatar-color: rgb(var(--label-yellow-10));\n}\n\n:host( [variant="yellow"][tone="weak"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-yellow-09));\n --mds-avatar-color: rgb(var(--label-yellow-05));\n}\n\n:host( [variant="error"] ),\n:host( [variant="error"][tone="strong"] ) {\n\n --mds-avatar-background-color: rgb(var(--status-error-05));\n --mds-avatar-color: rgb(var(--status-error-10));\n}\n\n:host( [variant="error"][tone="weak"] ) {\n\n --mds-avatar-background-color: rgb(var(--status-error-09));\n --mds-avatar-color: rgb(var(--status-error-05));\n}\n\n:host( [variant="warning"] ),\n:host( [variant="warning"][tone="strong"] ) {\n\n --mds-avatar-background-color: rgb(var(--status-warning-05));\n --mds-avatar-color: rgb(var(--status-warning-10));\n}\n\n:host( [variant="warning"][tone="weak"] ) {\n\n --mds-avatar-background-color: rgb(var(--status-warning-09));\n --mds-avatar-color: rgb(var(--status-warning-05));\n}\n\n:host( [variant="info"] ),\n:host( [variant="info"][tone="strong"] ) {\n\n --mds-avatar-background-color: rgb(var(--status-info-05));\n --mds-avatar-color: rgb(var(--status-info-10));\n}\n\n:host( [variant="info"][tone="weak"] ) {\n\n --mds-avatar-background-color: rgb(var(--status-info-09));\n --mds-avatar-color: rgb(var(--status-info-05));\n}\n\n:host( [variant="success"] ),\n:host( [variant="success"][tone="strong"] ) {\n\n --mds-avatar-background-color: rgb(var(--status-success-05));\n --mds-avatar-color: rgb(var(--status-success-10));\n}\n\n:host( [variant="success"][tone="weak"] ) {\n\n --mds-avatar-background-color: rgb(var(--status-success-09));\n --mds-avatar-color: rgb(var(--status-success-05));\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n .avatar,\n .icon {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n}\n\n@container style(--magma-pref-animation: system) {\n\n @media (prefers-reduced-motion) {\n .avatar,\n .icon {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n }\n}\n\n.static{\n\n position: static;\n}\n\n.fixed{\n\n position: fixed;\n}\n\n.absolute{\n\n position: absolute;\n}\n\n.w-2400{\n\n width: 6rem;\n}\n\n.w-600{\n\n width: 1.5rem;\n}\n\n.border{\n\n border-width: 1px;\n}\n\n.bg-brand-maggioli-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--brand-maggioli-05) / var(--tw-bg-opacity));\n}\n\n.bg-label-amaranth-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-amaranth-05) / var(--tw-bg-opacity));\n}\n\n.bg-label-amaranth-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-amaranth-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-aqua-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-aqua-05) / var(--tw-bg-opacity));\n}\n\n.bg-label-aqua-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-aqua-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-blue-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-blue-05) / var(--tw-bg-opacity));\n}\n\n.bg-label-blue-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-blue-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-green-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-green-05) / var(--tw-bg-opacity));\n}\n\n.bg-label-green-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-green-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-lime-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-lime-05) / var(--tw-bg-opacity));\n}\n\n.bg-label-lime-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-lime-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orange-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-orange-05) / var(--tw-bg-opacity));\n}\n\n.bg-label-orange-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-orange-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orchid-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-orchid-05) / var(--tw-bg-opacity));\n}\n\n.bg-label-orchid-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-orchid-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-sky-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-sky-05) / var(--tw-bg-opacity));\n}\n\n.bg-label-violet-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-violet-05) / var(--tw-bg-opacity));\n}\n\n.bg-label-violet-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-violet-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-yellow-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-yellow-05) / var(--tw-bg-opacity));\n}\n\n.bg-label-yellow-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-yellow-10) / var(--tw-bg-opacity));\n}\n\n.bg-status-error-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--status-error-05) / var(--tw-bg-opacity));\n}\n\n.bg-status-info-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--status-info-05) / var(--tw-bg-opacity));\n}\n\n.bg-status-success-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--status-success-05) / var(--tw-bg-opacity));\n}\n\n.bg-status-warning-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--status-warning-05) / var(--tw-bg-opacity));\n}\n\n.bg-tone-neutral-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--tone-neutral-10) / var(--tw-bg-opacity));\n}\n\n.fill-label-amaranth-04{\n\n fill: rgb(var(--label-amaranth-04));\n}\n\n.fill-label-aqua-04{\n\n fill: rgb(var(--label-aqua-04));\n}\n\n.fill-label-blue-04{\n\n fill: rgb(var(--label-blue-04));\n}\n\n.fill-label-green-04{\n\n fill: rgb(var(--label-green-04));\n}\n\n.fill-label-lime-04{\n\n fill: rgb(var(--label-lime-04));\n}\n\n.fill-label-orange-04{\n\n fill: rgb(var(--label-orange-04));\n}\n\n.fill-label-orchid-04{\n\n fill: rgb(var(--label-orchid-04));\n}\n\n.fill-label-violet-04{\n\n fill: rgb(var(--label-violet-04));\n}\n\n.fill-label-yellow-04{\n\n fill: rgb(var(--label-yellow-04));\n}\n\n.fill-tone-neutral-04{\n\n fill: rgb(var(--tone-neutral-04));\n}\n\n.text-label-amaranth-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-amaranth-04) / var(--tw-text-opacity));\n}\n\n.text-label-aqua-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-aqua-04) / var(--tw-text-opacity));\n}\n\n.text-label-blue-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-blue-04) / var(--tw-text-opacity));\n}\n\n.text-label-green-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-green-04) / var(--tw-text-opacity));\n}\n\n.text-label-lime-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-lime-04) / var(--tw-text-opacity));\n}\n\n.text-label-orange-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-orange-04) / var(--tw-text-opacity));\n}\n\n.text-label-orchid-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-orchid-04) / var(--tw-text-opacity));\n}\n\n.text-label-violet-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-violet-04) / var(--tw-text-opacity));\n}\n\n.text-label-yellow-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-yellow-04) / var(--tw-text-opacity));\n}\n\n.text-tone-neutral-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--tone-neutral-04) / var(--tw-text-opacity));\n}\n\n.shadow{\n\n --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n\n -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n@container style(--magma-pref-contrast: more) {\n .avatar--icon,\n .avatar--fallback,\n .avatar--initials {\n -webkit-box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n @media (prefers-contrast: more) {\n .avatar--icon,\n .avatar--fallback,\n .avatar--initials {\n -webkit-box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n }\n }\n}\n\n\n\n@container (max-width: 24px) {\n .avatar--initials {\n padding: 0 var(--mds-avatar-initials-padding);\n }\n\n .initials-text{\n\n font-weight: 900;\n }\n}\n';var MdsAvatarStyle0=mdsAvatarCss;var MdsAvatar=function(){function n(n){var a=this;registerInstance(this,n);this.backgroundColor="";this.fittyInitialized=false;this.initialsChanged=false;this.addFontResize=function(){var n;if(a.fittyInitialized){return}var r=(n=a.element.shadowRoot)===null||n===void 0?void 0:n.querySelector(".fit");a.fittyElements=fitty(r,{minSize:10});a.observer=new ResizeObserver((function(n){n.forEach((function(){a.fittyElements.fit()}))}));a.observer.observe(a.element);a.fittyInitialized=true};this.removeFontResize=function(){if(!a.fittyInitialized){return}a.fittyInitialized=false;a.observer.unobserve(a.element)};this.checkInitials=function(n){if(n!==""&&n!==undefined){if(a.fittyInitialized){return}if(!a.fittyInitialized){a.addFontResize()}return}if(a.fittyInitialized){a.removeFontResize()}};this.checkInitialsBackground=function(){if(a.initials){var n=a.initials.toLowerCase().replace(/[^a-zA-Z0-9]+/g,"").substring(0,2);if(n.length===1){n=n+n}a.backgroundColor=avatarVariant[(n.substring(0,1).charCodeAt(0)+n.substring(1,2).charCodeAt(0))%avatarVariant.length]}};this.fallback=false;this.loaded=true;this.icon=undefined;this.initials=undefined;this.src=undefined;this.tone=undefined;this.variant=undefined}n.prototype.componentWillLoad=function(){this.checkInitialsBackground()};n.prototype.componentDidLoad=function(){if(this.src!==undefined){this.loaded=false}this.checkInitials(this.initials)};n.prototype.componentDidRender=function(){if(this.initialsChanged){this.checkInitials(this.initials);this.initialsChanged=false}};n.prototype.initialsHandler=function(){this.initialsChanged=true;this.checkInitialsBackground()};n.prototype.srcHandler=function(n){if(n===undefined){this.loaded=true}};n.prototype.iconHandler=function(n){if(n!==undefined){this.loaded=true}};n.prototype.render=function(){var n=this;return h(Host,{key:"65d54a0cc768f2a9325ab66b6be361b66f62a9bd"},h("div",{key:"990b1e780bab64ec2198849bf16dbe68f04cfe28",class:clsx("avatar",this.initials&&!this.fallback&&!this.src&&"avatar--initials",(this.fallback||!this.icon&&!this.initials&&!this.src)&&"avatar--fallback",this.icon&&"avatar--icon",this.loaded?"avatar--loaded":"avatar--pending",this.initials?this.backgroundColor:""),part:"wrapper"},this.initials&&!this.fallback&&!this.src&&h("div",{key:"d28097e6ecbd4fec43102988ab346e4490fb10f5",class:"initials-text"},h("span",{key:"bdf0d733064bb9b1bab4e921a9d79a78313d82e3",class:"fit"},this.initials.substring(0,2))),this.src&&!this.fallback&&!this.icon&&h("mds-img",{key:"5f701a406664e325359b242d93fef016f539cdca",class:"image",loading:"lazy",onMdsImgLoadError:function(){n.loaded=true;n.fallback=true},onMdsImgLoadSuccess:function(){n.loaded=true},src:this.src}),this.icon&&!this.initials&&h("mds-icon",{key:"fd6a6ee2f9c36e886dd8747a4ec3208499194005",class:"icon",part:"icon",name:this.icon}),(this.fallback||!this.icon&&!this.initials&&!this.src)&&h("i",{key:"fd68c79da7ed5794690668ec5a0eccce7806fe2a",class:"svg fallback-icon",innerHTML:miBaselinePerson})))};Object.defineProperty(n.prototype,"element",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(n,"watchers",{get:function(){return{initials:["initialsHandler"],src:["srcHandler"],icon:["iconHandler"]}},enumerable:false,configurable:true});return n}();MdsAvatar.style=MdsAvatarStyle0;export{MdsAvatar as mds_avatar}; |
@@ -40,3 +40,3 @@ import { r as registerInstance, h, H as Host, g as getElement } from './index-83cf6d5b.js'; | ||
| const mdsAvatarCss = "@tailwind components;\n\n.svg{\n\n display: -ms-flexbox;\n\n display: flex;\n}\n\n.svg svg{\n\n aspect-ratio: 1/1;\n\n height: 100%;\n\n width: 100%;\n}\n@tailwind utilities;\n\n/**\n * @prop --mds-avatar-background-color-pending: The background-color when an image is loading\n * @prop --mds-avatar-background-color: The background-color of the component\n * @prop --mds-avatar-color: The color of the placeholder icon\n * @prop --mds-avatar-radius: The border-radius of the element\n */\n\n:host {\n\n --mds-avatar-background-color-pending: rgb(var(--tone-neutral-08));\n --mds-avatar-background-color: rgb(var(--brand-maggioli-05));\n --mds-avatar-color: rgb(var(--brand-maggioli-10));\n --mds-avatar-radius: 9999px;\n --mds-avatar-initials-padding: 20%;\n\n aspect-ratio: 1/1;\n border-radius: var(--mds-avatar-radius);\n container-name: mds-avatar;\n container-type: inline-size;\n display: -ms-inline-flexbox;\n display: inline-flex;\n overflow: hidden;\n width: 3rem;\n}\n\n.avatar{\n\n -webkit-transition-duration: 200ms;\n\n transition-duration: 200ms;\n\n aspect-ratio: 1/1;\n border-radius: var(--mds-avatar-radius);\n color: transparent;\n display: -ms-inline-flexbox;\n display: inline-flex;\n overflow: hidden;\n -webkit-transition-property: color, background-color, fill, -webkit-box-shadow;\n transition-property: color, background-color, fill, -webkit-box-shadow;\n transition-property: color, background-color, box-shadow, fill;\n transition-property: color, background-color, box-shadow, fill, -webkit-box-shadow;\n width: 100%;\n}\n\n.avatar--pending {\n background-color: var(--mds-avatar-background-color-pending);\n}\n\n.avatar--loaded {\n -webkit-animation: none;\n animation: none;\n}\n\n.avatar--icon,\n.avatar--fallback,\n.avatar--initials {\n background-color: var(--mds-avatar-background-color);\n -webkit-box-shadow: none;\n box-shadow: none;\n}\n\n.avatar--fallback,\n.avatar--initials {\n -ms-flex-align: stretch;\n align-items: stretch;\n display: -ms-flexbox;\n display: flex;\n justify-items: stretch;\n}\n\n.avatar--icon,\n.avatar--fallback {\n padding: 20%;\n}\n\n.avatar--initials {\n padding: 30% var(--mds-avatar-initials-padding) 25%;\n}\n\n.image {\n aspect-ratio: 1/1;\n border-radius: var(--mds-avatar-radius);\n}\n\n.fallback-icon {\n aspect-ratio: 1/1;\n fill: var(--mds-avatar-color);\n width: 100%;\n}\n\n\n.initials-text{\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-weight: 700;\n\n -ms-flex-align: center;\n\n align-items: center;\n color: var(--mds-avatar-color);\n display: -ms-flexbox;\n display: flex;\n height: 100%;\n -ms-flex-pack: center;\n justify-content: center;\n text-transform: uppercase;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n width: 100%;\n}\n\n:host([initials]) .initials-text {\n\n --mds-avatar-color: rgb(var(--tone-neutral));\n}\n\n.fit {\n display: inline-block;\n white-space: nowrap !important;\n}\n\n.icon{\n\n -webkit-transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;\n\n transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;\n\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;\n\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n -webkit-transition-duration: 150ms;\n\n transition-duration: 150ms;\n\n fill: var(--mds-avatar-color);\n height: 100%;\n width: 100%;\n}\n\n@tailwind utilities;\n\n:host( [variant=\"primary\"] ),\n:host( [variant=\"primary\"][tone=\"strong\"] ) {\n\n --mds-avatar-background-color: rgb(var(--brand-maggioli-05));\n --mds-avatar-color: rgb(var(--brand-maggioli-10));\n}\n\n:host( [variant=\"primary\"][tone=\"weak\"] ) {\n\n --mds-avatar-background-color: rgb(var(--brand-maggioli-09));\n --mds-avatar-color: rgb(var(--brand-maggioli-05));\n}\n\n:host( [variant=\"orange\"] ),\n:host( [variant=\"orange\"][tone=\"strong\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-orange-05));\n --mds-avatar-color: rgb(var(--label-orange-10));\n}\n\n:host( [variant=\"orange\"][tone=\"weak\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-orange-09));\n --mds-avatar-color: rgb(var(--label-orange-05));\n}\n\n:host( [variant=\"amaranth\"] ),\n:host( [variant=\"amaranth\"][tone=\"strong\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-amaranth-05));\n --mds-avatar-color: rgb(var(--label-amaranth-10));\n}\n\n:host( [variant=\"amaranth\"][tone=\"weak\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-amaranth-09));\n --mds-avatar-color: rgb(var(--label-amaranth-05));\n}\n\n:host( [variant=\"orchid\"] ),\n:host( [variant=\"orchid\"][tone=\"strong\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-orchid-05));\n --mds-avatar-color: rgb(var(--label-orchid-10));\n}\n\n:host( [variant=\"orchid\"][tone=\"weak\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-orchid-09));\n --mds-avatar-color: rgb(var(--label-orchid-05));\n}\n\n:host( [variant=\"violet\"] ),\n:host( [variant=\"violet\"][tone=\"strong\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-violet-05));\n --mds-avatar-color: rgb(var(--label-violet-10));\n}\n\n:host( [variant=\"violet\"][tone=\"weak\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-violet-09));\n --mds-avatar-color: rgb(var(--label-violet-05));\n}\n\n:host( [variant=\"blue\"] ),\n:host( [variant=\"blue\"][tone=\"strong\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-blue-05));\n --mds-avatar-color: rgb(var(--label-blue-10));\n}\n\n:host( [variant=\"blue\"][tone=\"weak\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-blue-09));\n --mds-avatar-color: rgb(var(--label-blue-05));\n}\n\n:host( [variant=\"sky\"] ),\n:host( [variant=\"sky\"][tone=\"strong\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-sky-05));\n --mds-avatar-color: rgb(var(--label-sky-10));\n}\n\n:host( [variant=\"sky\"][tone=\"weak\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-sky-09));\n --mds-avatar-color: rgb(var(--label-sky-05));\n}\n\n:host( [variant=\"aqua\"] ),\n:host( [variant=\"aqua\"][tone=\"strong\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-aqua-05));\n --mds-avatar-color: rgb(var(--label-aqua-10));\n}\n\n:host( [variant=\"aqua\"][tone=\"weak\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-aqua-09));\n --mds-avatar-color: rgb(var(--label-aqua-05));\n}\n\n:host( [variant=\"green\"] ),\n:host( [variant=\"green\"][tone=\"strong\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-green-05));\n --mds-avatar-color: rgb(var(--label-green-10));\n}\n\n:host( [variant=\"green\"][tone=\"weak\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-green-09));\n --mds-avatar-color: rgb(var(--label-green-05));\n}\n\n:host( [variant=\"lime\"] ),\n:host( [variant=\"lime\"][tone=\"strong\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-lime-05));\n --mds-avatar-color: rgb(var(--label-lime-10));\n}\n\n:host( [variant=\"lime\"][tone=\"weak\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-lime-09));\n --mds-avatar-color: rgb(var(--label-lime-05));\n}\n\n:host( [variant=\"yellow\"] ),\n:host( [variant=\"yellow\"][tone=\"strong\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-yellow-05));\n --mds-avatar-color: rgb(var(--label-yellow-10));\n}\n\n:host( [variant=\"yellow\"][tone=\"weak\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-yellow-09));\n --mds-avatar-color: rgb(var(--label-yellow-05));\n}\n\n:host( [variant=\"error\"] ),\n:host( [variant=\"error\"][tone=\"strong\"] ) {\n\n --mds-avatar-background-color: rgb(var(--status-error-05));\n --mds-avatar-color: rgb(var(--status-error-10));\n}\n\n:host( [variant=\"error\"][tone=\"weak\"] ) {\n\n --mds-avatar-background-color: rgb(var(--status-error-09));\n --mds-avatar-color: rgb(var(--status-error-05));\n}\n\n:host( [variant=\"warning\"] ),\n:host( [variant=\"warning\"][tone=\"strong\"] ) {\n\n --mds-avatar-background-color: rgb(var(--status-warning-05));\n --mds-avatar-color: rgb(var(--status-warning-10));\n}\n\n:host( [variant=\"warning\"][tone=\"weak\"] ) {\n\n --mds-avatar-background-color: rgb(var(--status-warning-09));\n --mds-avatar-color: rgb(var(--status-warning-05));\n}\n\n:host( [variant=\"info\"] ),\n:host( [variant=\"info\"][tone=\"strong\"] ) {\n\n --mds-avatar-background-color: rgb(var(--status-info-05));\n --mds-avatar-color: rgb(var(--status-info-10));\n}\n\n:host( [variant=\"info\"][tone=\"weak\"] ) {\n\n --mds-avatar-background-color: rgb(var(--status-info-09));\n --mds-avatar-color: rgb(var(--status-info-05));\n}\n\n:host( [variant=\"success\"] ),\n:host( [variant=\"success\"][tone=\"strong\"] ) {\n\n --mds-avatar-background-color: rgb(var(--status-success-05));\n --mds-avatar-color: rgb(var(--status-success-10));\n}\n\n:host( [variant=\"success\"][tone=\"weak\"] ) {\n\n --mds-avatar-background-color: rgb(var(--status-success-09));\n --mds-avatar-color: rgb(var(--status-success-05));\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n .avatar,\n .icon {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n}\n\n@container style(--magma-pref-animation: system) {\n\n @media (prefers-reduced-motion) {\n .avatar,\n .icon {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n }\n}\n\n.static{\n\n position: static;\n}\n\n.fixed{\n\n position: fixed;\n}\n\n.absolute{\n\n position: absolute;\n}\n\n.w-2400{\n\n width: 6rem;\n}\n\n.w-600{\n\n width: 1.5rem;\n}\n\n.border{\n\n border-width: 1px;\n}\n\n.bg-brand-maggioli-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--brand-maggioli-05) / var(--tw-bg-opacity));\n}\n\n.bg-label-amaranth-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-amaranth-05) / var(--tw-bg-opacity));\n}\n\n.bg-label-amaranth-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-amaranth-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-aqua-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-aqua-05) / var(--tw-bg-opacity));\n}\n\n.bg-label-aqua-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-aqua-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-blue-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-blue-05) / var(--tw-bg-opacity));\n}\n\n.bg-label-blue-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-blue-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-green-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-green-05) / var(--tw-bg-opacity));\n}\n\n.bg-label-green-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-green-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-lime-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-lime-05) / var(--tw-bg-opacity));\n}\n\n.bg-label-lime-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-lime-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orange-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-orange-05) / var(--tw-bg-opacity));\n}\n\n.bg-label-orange-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-orange-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orchid-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-orchid-05) / var(--tw-bg-opacity));\n}\n\n.bg-label-orchid-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-orchid-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-sky-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-sky-05) / var(--tw-bg-opacity));\n}\n\n.bg-label-violet-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-violet-05) / var(--tw-bg-opacity));\n}\n\n.bg-label-violet-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-violet-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-yellow-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-yellow-05) / var(--tw-bg-opacity));\n}\n\n.bg-label-yellow-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-yellow-10) / var(--tw-bg-opacity));\n}\n\n.bg-status-error-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--status-error-05) / var(--tw-bg-opacity));\n}\n\n.bg-status-info-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--status-info-05) / var(--tw-bg-opacity));\n}\n\n.bg-status-success-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--status-success-05) / var(--tw-bg-opacity));\n}\n\n.bg-status-warning-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--status-warning-05) / var(--tw-bg-opacity));\n}\n\n.bg-tone-neutral-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--tone-neutral-10) / var(--tw-bg-opacity));\n}\n\n.fill-label-amaranth-04{\n\n fill: rgb(var(--label-amaranth-04));\n}\n\n.fill-label-aqua-04{\n\n fill: rgb(var(--label-aqua-04));\n}\n\n.fill-label-blue-04{\n\n fill: rgb(var(--label-blue-04));\n}\n\n.fill-label-green-04{\n\n fill: rgb(var(--label-green-04));\n}\n\n.fill-label-lime-04{\n\n fill: rgb(var(--label-lime-04));\n}\n\n.fill-label-orange-04{\n\n fill: rgb(var(--label-orange-04));\n}\n\n.fill-label-orchid-04{\n\n fill: rgb(var(--label-orchid-04));\n}\n\n.fill-label-violet-04{\n\n fill: rgb(var(--label-violet-04));\n}\n\n.fill-label-yellow-04{\n\n fill: rgb(var(--label-yellow-04));\n}\n\n.fill-tone-neutral-04{\n\n fill: rgb(var(--tone-neutral-04));\n}\n\n.text-label-amaranth-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-amaranth-04) / var(--tw-text-opacity));\n}\n\n.text-label-aqua-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-aqua-04) / var(--tw-text-opacity));\n}\n\n.text-label-blue-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-blue-04) / var(--tw-text-opacity));\n}\n\n.text-label-green-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-green-04) / var(--tw-text-opacity));\n}\n\n.text-label-lime-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-lime-04) / var(--tw-text-opacity));\n}\n\n.text-label-orange-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-orange-04) / var(--tw-text-opacity));\n}\n\n.text-label-orchid-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-orchid-04) / var(--tw-text-opacity));\n}\n\n.text-label-violet-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-violet-04) / var(--tw-text-opacity));\n}\n\n.text-label-yellow-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-yellow-04) / var(--tw-text-opacity));\n}\n\n.text-tone-neutral-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--tone-neutral-04) / var(--tw-text-opacity));\n}\n\n.shadow{\n\n --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n\n -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n@container style(--magma-pref-contrast: more) {\n .avatar--icon,\n .avatar--fallback,\n .avatar--initials {\n -webkit-box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n @media (prefers-contrast: more) {\n .avatar--icon,\n .avatar--fallback,\n .avatar--initials {\n -webkit-box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n }\n }\n}\n\n\n\n@container (max-width: 24px) {\n .avatar--initials {\n padding: 0 var(--mds-avatar-initials-padding);\n }\n\n .initials-text{\n\n font-weight: 900;\n }\n}\n"; | ||
| const mdsAvatarCss = "@tailwind components;\n\n.svg{\n\n display: -ms-flexbox;\n\n display: flex;\n}\n\n.svg svg{\n\n aspect-ratio: 1/1;\n\n height: 100%;\n\n width: 100%;\n}\n@tailwind utilities;\n\n/**\n * @prop --mds-avatar-background-color-pending: The background-color when an image is loading\n * @prop --mds-avatar-background-color: The background-color of the component\n * @prop --mds-avatar-color: The color of the placeholder icon\n * @prop --mds-avatar-radius: The border-radius of the element\n */\n\n:host {\n\n --mds-avatar-background-color-pending: rgb(var(--tone-neutral-08));\n --mds-avatar-background-color: rgb(var(--brand-maggioli-05));\n --mds-avatar-color: rgb(var(--brand-maggioli-10));\n --mds-avatar-radius: 9999px;\n --mds-avatar-initials-padding: 20%;\n\n aspect-ratio: 1/1;\n border-radius: var(--mds-avatar-radius);\n container-name: mds-avatar;\n container-type: inline-size;\n display: -ms-inline-flexbox;\n display: inline-flex;\n overflow: hidden;\n width: 3rem;\n}\n\n.avatar{\n\n -webkit-transition-duration: 200ms;\n\n transition-duration: 200ms;\n\n aspect-ratio: 1/1;\n border-radius: var(--mds-avatar-radius);\n color: transparent;\n display: -ms-inline-flexbox;\n display: inline-flex;\n overflow: hidden;\n -webkit-transition-property: color, background-color, fill, -webkit-box-shadow;\n transition-property: color, background-color, fill, -webkit-box-shadow;\n transition-property: color, background-color, box-shadow, fill;\n transition-property: color, background-color, box-shadow, fill, -webkit-box-shadow;\n width: 100%;\n}\n\n.avatar--pending {\n background-color: var(--mds-avatar-background-color-pending);\n}\n\n.avatar--loaded {\n -webkit-animation: none;\n animation: none;\n}\n\n.avatar--icon,\n.avatar--fallback,\n.avatar--initials {\n background-color: var(--mds-avatar-background-color);\n -webkit-box-shadow: none;\n box-shadow: none;\n}\n\n.avatar--fallback,\n.avatar--initials {\n -ms-flex-align: stretch;\n align-items: stretch;\n display: -ms-flexbox;\n display: flex;\n justify-items: stretch;\n}\n\n.avatar--icon,\n.avatar--fallback {\n padding: 20%;\n}\n\n.avatar--initials {\n padding: 30% var(--mds-avatar-initials-padding) 25%;\n}\n\n.image {\n aspect-ratio: 1/1;\n border-radius: var(--mds-avatar-radius);\n}\n\n.fallback-icon {\n aspect-ratio: 1/1;\n fill: var(--mds-avatar-color);\n width: 100%;\n}\n\n\n.initials-text{\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-weight: 700;\n\n -ms-flex-align: center;\n\n align-items: center;\n color: var(--mds-avatar-color);\n display: -ms-flexbox;\n display: flex;\n height: 100%;\n -ms-flex-pack: center;\n justify-content: center;\n text-transform: uppercase;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n width: 100%;\n}\n\n:host([initials]) .initials-text {\n\n --mds-avatar-color: rgb(var(--tone-neutral));\n}\n\n.fit {\n display: inline-block;\n white-space: nowrap !important;\n}\n\n.icon{\n\n -webkit-transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;\n\n transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;\n\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;\n\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n -webkit-transition-duration: 150ms;\n\n transition-duration: 150ms;\n\n fill: var(--mds-avatar-color);\n height: 100%;\n width: 100%;\n}\n\n@tailwind utilities;\n\n:host( [variant=\"primary\"] ),\n:host( [variant=\"primary\"][tone=\"strong\"] ) {\n\n --mds-avatar-background-color: rgb(var(--brand-maggioli-05));\n --mds-avatar-color: rgb(var(--brand-maggioli-10));\n}\n\n:host( [variant=\"primary\"][tone=\"weak\"] ) {\n\n --mds-avatar-background-color: rgb(var(--brand-maggioli-09));\n --mds-avatar-color: rgb(var(--brand-maggioli-05));\n}\n\n:host( [variant=\"orange\"] ),\n:host( [variant=\"orange\"][tone=\"strong\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-orange-05));\n --mds-avatar-color: rgb(var(--label-orange-10));\n}\n\n:host( [variant=\"orange\"][tone=\"weak\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-orange-09));\n --mds-avatar-color: rgb(var(--label-orange-05));\n}\n\n:host( [variant=\"amaranth\"] ),\n:host( [variant=\"amaranth\"][tone=\"strong\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-amaranth-05));\n --mds-avatar-color: rgb(var(--label-amaranth-10));\n}\n\n:host( [variant=\"amaranth\"][tone=\"weak\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-amaranth-09));\n --mds-avatar-color: rgb(var(--label-amaranth-05));\n}\n\n:host( [variant=\"orchid\"] ),\n:host( [variant=\"orchid\"][tone=\"strong\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-orchid-05));\n --mds-avatar-color: rgb(var(--label-orchid-10));\n}\n\n:host( [variant=\"orchid\"][tone=\"weak\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-orchid-09));\n --mds-avatar-color: rgb(var(--label-orchid-05));\n}\n\n:host( [variant=\"violet\"] ),\n:host( [variant=\"violet\"][tone=\"strong\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-violet-05));\n --mds-avatar-color: rgb(var(--label-violet-10));\n}\n\n:host( [variant=\"violet\"][tone=\"weak\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-violet-09));\n --mds-avatar-color: rgb(var(--label-violet-05));\n}\n\n:host( [variant=\"blue\"] ),\n:host( [variant=\"blue\"][tone=\"strong\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-blue-05));\n --mds-avatar-color: rgb(var(--label-blue-10));\n}\n\n:host( [variant=\"blue\"][tone=\"weak\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-blue-09));\n --mds-avatar-color: rgb(var(--label-blue-05));\n}\n\n:host( [variant=\"sky\"] ),\n:host( [variant=\"sky\"][tone=\"strong\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-sky-05));\n --mds-avatar-color: rgb(var(--label-sky-10));\n}\n\n:host( [variant=\"sky\"][tone=\"weak\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-sky-09));\n --mds-avatar-color: rgb(var(--label-sky-05));\n}\n\n:host( [variant=\"aqua\"] ),\n:host( [variant=\"aqua\"][tone=\"strong\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-aqua-05));\n --mds-avatar-color: rgb(var(--label-aqua-10));\n}\n\n:host( [variant=\"aqua\"][tone=\"weak\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-aqua-09));\n --mds-avatar-color: rgb(var(--label-aqua-05));\n}\n\n:host( [variant=\"green\"] ),\n:host( [variant=\"green\"][tone=\"strong\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-green-05));\n --mds-avatar-color: rgb(var(--label-green-10));\n}\n\n:host( [variant=\"green\"][tone=\"weak\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-green-09));\n --mds-avatar-color: rgb(var(--label-green-05));\n}\n\n:host( [variant=\"lime\"] ),\n:host( [variant=\"lime\"][tone=\"strong\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-lime-05));\n --mds-avatar-color: rgb(var(--label-lime-10));\n}\n\n:host( [variant=\"lime\"][tone=\"weak\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-lime-09));\n --mds-avatar-color: rgb(var(--label-lime-05));\n}\n\n:host( [variant=\"yellow\"] ),\n:host( [variant=\"yellow\"][tone=\"strong\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-yellow-05));\n --mds-avatar-color: rgb(var(--label-yellow-10));\n}\n\n:host( [variant=\"yellow\"][tone=\"weak\"] ) {\n\n --mds-avatar-background-color: rgb(var(--label-yellow-09));\n --mds-avatar-color: rgb(var(--label-yellow-05));\n}\n\n:host( [variant=\"error\"] ),\n:host( [variant=\"error\"][tone=\"strong\"] ) {\n\n --mds-avatar-background-color: rgb(var(--status-error-05));\n --mds-avatar-color: rgb(var(--status-error-10));\n}\n\n:host( [variant=\"error\"][tone=\"weak\"] ) {\n\n --mds-avatar-background-color: rgb(var(--status-error-09));\n --mds-avatar-color: rgb(var(--status-error-05));\n}\n\n:host( [variant=\"warning\"] ),\n:host( [variant=\"warning\"][tone=\"strong\"] ) {\n\n --mds-avatar-background-color: rgb(var(--status-warning-05));\n --mds-avatar-color: rgb(var(--status-warning-10));\n}\n\n:host( [variant=\"warning\"][tone=\"weak\"] ) {\n\n --mds-avatar-background-color: rgb(var(--status-warning-09));\n --mds-avatar-color: rgb(var(--status-warning-05));\n}\n\n:host( [variant=\"info\"] ),\n:host( [variant=\"info\"][tone=\"strong\"] ) {\n\n --mds-avatar-background-color: rgb(var(--status-info-05));\n --mds-avatar-color: rgb(var(--status-info-10));\n}\n\n:host( [variant=\"info\"][tone=\"weak\"] ) {\n\n --mds-avatar-background-color: rgb(var(--status-info-09));\n --mds-avatar-color: rgb(var(--status-info-05));\n}\n\n:host( [variant=\"success\"] ),\n:host( [variant=\"success\"][tone=\"strong\"] ) {\n\n --mds-avatar-background-color: rgb(var(--status-success-05));\n --mds-avatar-color: rgb(var(--status-success-10));\n}\n\n:host( [variant=\"success\"][tone=\"weak\"] ) {\n\n --mds-avatar-background-color: rgb(var(--status-success-09));\n --mds-avatar-color: rgb(var(--status-success-05));\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n .avatar,\n .icon {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n}\n\n@container style(--magma-pref-animation: system) {\n\n @media (prefers-reduced-motion) {\n .avatar,\n .icon {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n }\n}\n\n.static{\n\n position: static;\n}\n\n.fixed{\n\n position: fixed;\n}\n\n.absolute{\n\n position: absolute;\n}\n\n.w-2400{\n\n width: 6rem;\n}\n\n.w-600{\n\n width: 1.5rem;\n}\n\n.border{\n\n border-width: 1px;\n}\n\n.bg-brand-maggioli-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--brand-maggioli-05) / var(--tw-bg-opacity));\n}\n\n.bg-label-amaranth-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-amaranth-05) / var(--tw-bg-opacity));\n}\n\n.bg-label-amaranth-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-amaranth-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-aqua-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-aqua-05) / var(--tw-bg-opacity));\n}\n\n.bg-label-aqua-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-aqua-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-blue-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-blue-05) / var(--tw-bg-opacity));\n}\n\n.bg-label-blue-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-blue-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-green-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-green-05) / var(--tw-bg-opacity));\n}\n\n.bg-label-green-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-green-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-lime-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-lime-05) / var(--tw-bg-opacity));\n}\n\n.bg-label-lime-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-lime-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orange-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-orange-05) / var(--tw-bg-opacity));\n}\n\n.bg-label-orange-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-orange-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orchid-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-orchid-05) / var(--tw-bg-opacity));\n}\n\n.bg-label-orchid-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-orchid-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-sky-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-sky-05) / var(--tw-bg-opacity));\n}\n\n.bg-label-violet-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-violet-05) / var(--tw-bg-opacity));\n}\n\n.bg-label-violet-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-violet-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-yellow-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-yellow-05) / var(--tw-bg-opacity));\n}\n\n.bg-label-yellow-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-yellow-10) / var(--tw-bg-opacity));\n}\n\n.bg-status-error-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--status-error-05) / var(--tw-bg-opacity));\n}\n\n.bg-status-info-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--status-info-05) / var(--tw-bg-opacity));\n}\n\n.bg-status-success-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--status-success-05) / var(--tw-bg-opacity));\n}\n\n.bg-status-warning-05{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--status-warning-05) / var(--tw-bg-opacity));\n}\n\n.bg-tone-neutral-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--tone-neutral-10) / var(--tw-bg-opacity));\n}\n\n.fill-label-amaranth-04{\n\n fill: rgb(var(--label-amaranth-04));\n}\n\n.fill-label-aqua-04{\n\n fill: rgb(var(--label-aqua-04));\n}\n\n.fill-label-blue-04{\n\n fill: rgb(var(--label-blue-04));\n}\n\n.fill-label-green-04{\n\n fill: rgb(var(--label-green-04));\n}\n\n.fill-label-lime-04{\n\n fill: rgb(var(--label-lime-04));\n}\n\n.fill-label-orange-04{\n\n fill: rgb(var(--label-orange-04));\n}\n\n.fill-label-orchid-04{\n\n fill: rgb(var(--label-orchid-04));\n}\n\n.fill-label-violet-04{\n\n fill: rgb(var(--label-violet-04));\n}\n\n.fill-label-yellow-04{\n\n fill: rgb(var(--label-yellow-04));\n}\n\n.fill-tone-neutral-04{\n\n fill: rgb(var(--tone-neutral-04));\n}\n\n.text-label-amaranth-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-amaranth-04) / var(--tw-text-opacity));\n}\n\n.text-label-aqua-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-aqua-04) / var(--tw-text-opacity));\n}\n\n.text-label-blue-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-blue-04) / var(--tw-text-opacity));\n}\n\n.text-label-green-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-green-04) / var(--tw-text-opacity));\n}\n\n.text-label-lime-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-lime-04) / var(--tw-text-opacity));\n}\n\n.text-label-orange-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-orange-04) / var(--tw-text-opacity));\n}\n\n.text-label-orchid-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-orchid-04) / var(--tw-text-opacity));\n}\n\n.text-label-violet-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-violet-04) / var(--tw-text-opacity));\n}\n\n.text-label-yellow-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-yellow-04) / var(--tw-text-opacity));\n}\n\n.text-tone-neutral-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--tone-neutral-04) / var(--tw-text-opacity));\n}\n\n.shadow{\n\n --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n\n -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n@container style(--magma-pref-contrast: more) {\n .avatar--icon,\n .avatar--fallback,\n .avatar--initials {\n -webkit-box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n @media (prefers-contrast: more) {\n .avatar--icon,\n .avatar--fallback,\n .avatar--initials {\n -webkit-box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n }\n }\n}\n\n\n\n@container (max-width: 24px) {\n .avatar--initials {\n padding: 0 var(--mds-avatar-initials-padding);\n }\n\n .initials-text{\n\n font-weight: 900;\n }\n}\n"; | ||
| const MdsAvatarStyle0 = mdsAvatarCss; | ||
@@ -43,0 +43,0 @@ |
@@ -1,1 +0,1 @@ | ||
| import{p as a,b as i}from"./p-cc18f926.js";export{s as setNonce}from"./p-cc18f926.js";import{g as n}from"./p-e1255160.js";(()=>{const s=import.meta.url,i={};return""!==s&&(i.resourcesUrl=new URL(".",s).href),a(i)})().then((async a=>(await n(),i([["p-6747e14a",[[1,"mds-avatar",{icon:[513],initials:[1537],src:[513],tone:[513],variant:[513],fallback:[32],loaded:[32]},null,{initials:["initialsHandler"],src:["srcHandler"],icon:["iconHandler"]}]]]],a)))); | ||
| import{p as a,b as i}from"./p-cc18f926.js";export{s as setNonce}from"./p-cc18f926.js";import{g as n}from"./p-e1255160.js";(()=>{const s=import.meta.url,i={};return""!==s&&(i.resourcesUrl=new URL(".",s).href),a(i)})().then((async a=>(await n(),i([["p-0875d27a",[[1,"mds-avatar",{icon:[513],initials:[1537],src:[513],tone:[513],variant:[513],fallback:[32],loaded:[32]},null,{initials:["initialsHandler"],src:["srcHandler"],icon:["iconHandler"]}]]]],a)))); |
@@ -1,1 +0,1 @@ | ||
| var __awaiter=this&&this.__awaiter||function(n,t,e,r){function i(n){return n instanceof e?n:new e((function(t){t(n)}))}return new(e||(e=Promise))((function(e,c){function a(n){try{u(r.next(n))}catch(n){c(n)}}function o(n){try{u(r["throw"](n))}catch(n){c(n)}}function u(n){n.done?e(n.value):i(n.value).then(a,o)}u((r=r.apply(n,t||[])).next())}))};var __generator=this&&this.__generator||function(n,t){var e={label:0,sent:function(){if(c[0]&1)throw c[1];return c[1]},trys:[],ops:[]},r,i,c,a;return a={next:o(0),throw:o(1),return:o(2)},typeof Symbol==="function"&&(a[Symbol.iterator]=function(){return this}),a;function o(n){return function(t){return u([n,t])}}function u(o){if(r)throw new TypeError("Generator is already executing.");while(a&&(a=0,o[0]&&(e=0)),e)try{if(r=1,i&&(c=o[0]&2?i["return"]:o[0]?i["throw"]||((c=i["return"])&&c.call(i),0):i.next)&&!(c=c.call(i,o[1])).done)return c;if(i=0,c)o=[o[0]&2,c.value];switch(o[0]){case 0:case 1:c=o;break;case 4:e.label++;return{value:o[1],done:false};case 5:e.label++;i=o[1];o=[0];continue;case 7:o=e.ops.pop();e.trys.pop();continue;default:if(!(c=e.trys,c=c.length>0&&c[c.length-1])&&(o[0]===6||o[0]===2)){e=0;continue}if(o[0]===3&&(!c||o[1]>c[0]&&o[1]<c[3])){e.label=o[1];break}if(o[0]===6&&e.label<c[1]){e.label=c[1];c=o;break}if(c&&e.label<c[2]){e.label=c[2];e.ops.push(o);break}if(c[2])e.ops.pop();e.trys.pop();continue}o=t.call(n,e)}catch(n){o=[6,n];i=0}finally{r=c=0}if(o[0]&5)throw o[1];return{value:o[0]?o[1]:void 0,done:true}}};System.register(["./p-ce546452.system.js","./p-56ba5cbf.system.js"],(function(n,t){"use strict";var e,r,i;return{setters:[function(t){e=t.p;r=t.b;n("setNonce",t.s)},function(n){i=n.g}],execute:function(){var n=this;var c=function(){var n=t.meta.url;var r={};if(n!==""){r.resourcesUrl=new URL(".",n).href}return e(r)};c().then((function(t){return __awaiter(n,void 0,void 0,(function(){return __generator(this,(function(n){switch(n.label){case 0:return[4,i()];case 1:n.sent();return[2,r([["p-1b61b40f.system",[[1,"mds-avatar",{icon:[513],initials:[1537],src:[513],tone:[513],variant:[513],fallback:[32],loaded:[32]},null,{initials:["initialsHandler"],src:["srcHandler"],icon:["iconHandler"]}]]]],t)]}}))}))}))}}})); | ||
| var __awaiter=this&&this.__awaiter||function(n,t,e,r){function i(n){return n instanceof e?n:new e((function(t){t(n)}))}return new(e||(e=Promise))((function(e,c){function a(n){try{u(r.next(n))}catch(n){c(n)}}function o(n){try{u(r["throw"](n))}catch(n){c(n)}}function u(n){n.done?e(n.value):i(n.value).then(a,o)}u((r=r.apply(n,t||[])).next())}))};var __generator=this&&this.__generator||function(n,t){var e={label:0,sent:function(){if(c[0]&1)throw c[1];return c[1]},trys:[],ops:[]},r,i,c,a;return a={next:o(0),throw:o(1),return:o(2)},typeof Symbol==="function"&&(a[Symbol.iterator]=function(){return this}),a;function o(n){return function(t){return u([n,t])}}function u(o){if(r)throw new TypeError("Generator is already executing.");while(a&&(a=0,o[0]&&(e=0)),e)try{if(r=1,i&&(c=o[0]&2?i["return"]:o[0]?i["throw"]||((c=i["return"])&&c.call(i),0):i.next)&&!(c=c.call(i,o[1])).done)return c;if(i=0,c)o=[o[0]&2,c.value];switch(o[0]){case 0:case 1:c=o;break;case 4:e.label++;return{value:o[1],done:false};case 5:e.label++;i=o[1];o=[0];continue;case 7:o=e.ops.pop();e.trys.pop();continue;default:if(!(c=e.trys,c=c.length>0&&c[c.length-1])&&(o[0]===6||o[0]===2)){e=0;continue}if(o[0]===3&&(!c||o[1]>c[0]&&o[1]<c[3])){e.label=o[1];break}if(o[0]===6&&e.label<c[1]){e.label=c[1];c=o;break}if(c&&e.label<c[2]){e.label=c[2];e.ops.push(o);break}if(c[2])e.ops.pop();e.trys.pop();continue}o=t.call(n,e)}catch(n){o=[6,n];i=0}finally{r=c=0}if(o[0]&5)throw o[1];return{value:o[0]?o[1]:void 0,done:true}}};System.register(["./p-ce546452.system.js","./p-56ba5cbf.system.js"],(function(n,t){"use strict";var e,r,i;return{setters:[function(t){e=t.p;r=t.b;n("setNonce",t.s)},function(n){i=n.g}],execute:function(){var n=this;var c=function(){var n=t.meta.url;var r={};if(n!==""){r.resourcesUrl=new URL(".",n).href}return e(r)};c().then((function(t){return __awaiter(n,void 0,void 0,(function(){return __generator(this,(function(n){switch(n.label){case 0:return[4,i()];case 1:n.sent();return[2,r([["p-159c60e0.system",[[1,"mds-avatar",{icon:[513],initials:[1537],src:[513],tone:[513],variant:[513],fallback:[32],loaded:[32]},null,{initials:["initialsHandler"],src:["srcHandler"],icon:["iconHandler"]}]]]],t)]}}))}))}))}}})); |
| { | ||
| "timestamp": "2024-09-26T10:57:33", | ||
| "timestamp": "2024-10-14T08:23:56", | ||
| "compiler": { | ||
@@ -102,6 +102,6 @@ "name": "node", | ||
| "./dist/mds-avatar/mds-avatar.js", | ||
| "./dist/mds-avatar/p-1b61b40f.system.entry.js", | ||
| "./dist/mds-avatar/p-0875d27a.entry.js", | ||
| "./dist/mds-avatar/p-159c60e0.system.entry.js", | ||
| "./dist/mds-avatar/p-50ea2036.system.js", | ||
| "./dist/mds-avatar/p-56ba5cbf.system.js", | ||
| "./dist/mds-avatar/p-6747e14a.entry.js", | ||
| "./dist/mds-avatar/p-cc18f926.js", | ||
@@ -114,6 +114,6 @@ "./dist/mds-avatar/p-ce546452.system.js", | ||
| "./www/build/mds-avatar.js", | ||
| "./www/build/p-1b61b40f.system.entry.js", | ||
| "./www/build/p-0875d27a.entry.js", | ||
| "./www/build/p-159c60e0.system.entry.js", | ||
| "./www/build/p-50ea2036.system.js", | ||
| "./www/build/p-56ba5cbf.system.js", | ||
| "./www/build/p-6747e14a.entry.js", | ||
| "./www/build/p-cc18f926.js", | ||
@@ -155,8 +155,8 @@ "./www/build/p-ce546452.system.js", | ||
| ], | ||
| "bundleId": "p-6747e14a", | ||
| "fileName": "p-6747e14a.entry.js", | ||
| "bundleId": "p-0875d27a", | ||
| "fileName": "p-0875d27a.entry.js", | ||
| "imports": [ | ||
| "p-cc18f926.js" | ||
| ], | ||
| "originalByteSize": 26173 | ||
| "originalByteSize": 26168 | ||
| } | ||
@@ -175,3 +175,3 @@ ], | ||
| ], | ||
| "originalByteSize": 26177 | ||
| "originalByteSize": 26172 | ||
| } | ||
@@ -190,3 +190,3 @@ ], | ||
| ], | ||
| "originalByteSize": 26177 | ||
| "originalByteSize": 26172 | ||
| } | ||
@@ -200,8 +200,8 @@ ], | ||
| ], | ||
| "bundleId": "p-1b61b40f.system", | ||
| "fileName": "p-1b61b40f.system.entry.js", | ||
| "bundleId": "p-159c60e0.system", | ||
| "fileName": "p-159c60e0.system.entry.js", | ||
| "imports": [ | ||
| "p-ce546452.system.js" | ||
| ], | ||
| "originalByteSize": 26772 | ||
| "originalByteSize": 26767 | ||
| } | ||
@@ -220,3 +220,3 @@ ], | ||
| ], | ||
| "originalByteSize": 26266 | ||
| "originalByteSize": 26261 | ||
| } | ||
@@ -223,0 +223,0 @@ ] |
@@ -1,1 +0,2 @@ | ||
| export type LanguageType = 'auto' | `${Lowercase<string>}${Lowercase<string>}` | `${Lowercase<string>}${Lowercase<string>}${Lowercase<string>}`; | ||
| export type LanguageType = `${Lowercase<string>}${Lowercase<string>}` | `${Lowercase<string>}${Lowercase<string>}${Lowercase<string>}`; | ||
| export type PrefLanguageType = 'auto' | `${Lowercase<string>}${Lowercase<string>}` | `${Lowercase<string>}${Lowercase<string>}${Lowercase<string>}`; |
| { | ||
| "timestamp": "2024-09-26T07:00:37", | ||
| "timestamp": "2024-10-14T07:29:26", | ||
| "compiler": { | ||
@@ -637,4 +637,4 @@ "name": "@stencil/core", | ||
| }, | ||
| "src/type/language.ts::LanguageType": { | ||
| "declaration": "export type LanguageType =\n | 'auto'\n | `${Lowercase<string>}${Lowercase<string>}`\n | `${Lowercase<string>}${Lowercase<string>}${Lowercase<string>}`", | ||
| "src/type/language.ts::PrefLanguageType": { | ||
| "declaration": "export type PrefLanguageType =\n | 'auto'\n | `${Lowercase<string>}${Lowercase<string>}`\n | `${Lowercase<string>}${Lowercase<string>}${Lowercase<string>}`", | ||
| "docstring": "", | ||
@@ -648,2 +648,7 @@ "path": "src/type/language.ts" | ||
| }, | ||
| "src/type/language.ts::LanguageType": { | ||
| "declaration": "export type LanguageType =\n | `${Lowercase<string>}${Lowercase<string>}`\n | `${Lowercase<string>}${Lowercase<string>}${Lowercase<string>}`", | ||
| "docstring": "", | ||
| "path": "src/type/language.ts" | ||
| }, | ||
| "src/components/mds-pref-theme/meta/types.ts::ThemeModeType": { | ||
@@ -719,2 +724,7 @@ "declaration": "export type ThemeModeType =\n | 'light'\n | 'dark'\n | 'system'", | ||
| }, | ||
| "src/components/mds-table-header-cell/meta/types.ts::SortDirectionType": { | ||
| "declaration": "export type SortDirectionType =\n | 'asc'\n | 'desc'\n | 'none'", | ||
| "docstring": "", | ||
| "path": "src/components/mds-table-header-cell/meta/types.ts" | ||
| }, | ||
| "src/components/mds-text/meta/types.ts::TextAnimationType": { | ||
@@ -721,0 +731,0 @@ "declaration": "export type TextAnimationType =\n | 'none'\n | 'yugop'", |
| { | ||
| "name": "@maggioli-design-system/mds-avatar", | ||
| "version": "3.11.3", | ||
| "version": "3.11.4", | ||
| "description": "mds-avatar is a web-component from Magma Design System, built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScirpt framework you are using.", | ||
@@ -28,3 +28,3 @@ "main": "dist/index.cjs.js", | ||
| "@maggioli-design-system/mds-icon": "2.10.5", | ||
| "@maggioli-design-system/mds-img": "3.0.3", | ||
| "@maggioli-design-system/mds-img": "3.0.4", | ||
| "@maggioli-design-system/styles": "15.3.2", | ||
@@ -31,0 +31,0 @@ "@stencil/core": "4.21.0", |
@@ -99,2 +99,12 @@ # mds-avatar | ||
| ## CSS Custom Properties | ||
| | Name | Description | | ||
| | --------------------------------------- | --------------------------------------------- | | ||
| | `--mds-avatar-background-color` | The background-color of the component | | ||
| | `--mds-avatar-background-color-pending` | The background-color when an image is loading | | ||
| | `--mds-avatar-color` | The color of the placeholder icon | | ||
| | `--mds-avatar-radius` | The border-radius of the element | | ||
| ## Dependencies | ||
@@ -101,0 +111,0 @@ |
@@ -36,3 +36,10 @@ [ | ||
| "mgg/adv-denied", | ||
| "mgg/ai", | ||
| "mgg/ai-brain", | ||
| "mgg/ai-brain-outline", | ||
| "mgg/ai-message", | ||
| "mgg/ai-outline", | ||
| "mgg/ai-status-completed", | ||
| "mgg/ai-status-error", | ||
| "mgg/ai-status-processing", | ||
| "mgg/ai-status-suspended", | ||
| "mgg/alerts-pagopa", | ||
@@ -50,2 +57,3 @@ "mgg/ansc", | ||
| "mgg/auto-awesome-motion", | ||
| "mgg/back-to-document", | ||
| "mgg/balance", | ||
@@ -91,2 +99,3 @@ "mgg/bill", | ||
| "mgg/download-json", | ||
| "mgg/edit-article", | ||
| "mgg/electronic-document", | ||
@@ -238,2 +247,3 @@ "mgg/email-assigned", | ||
| "mgg/square-viewfinder", | ||
| "mgg/stacked-documents", | ||
| "mgg/stamp", | ||
@@ -248,2 +258,4 @@ "mgg/status-progress-a-quarter", | ||
| "mgg/terminal", | ||
| "mgg/to-single-document", | ||
| "mgg/to-stacked-documents", | ||
| "mgg/todo", | ||
@@ -286,2 +298,3 @@ "mgg/todo-action-businessman-view", | ||
| "mgg/user-signed-out", | ||
| "mgg/user-substitution", | ||
| "mgg/view-chart-gantt", | ||
@@ -352,3 +365,6 @@ "mgg/view-side-by-side", | ||
| "mi/baseline/tv", | ||
| "mi/baseline/unfold-more", | ||
| "mi/baseline/videocam", | ||
| "mi/baseline/visibility", | ||
| "mi/baseline/visibility-off", | ||
| "mi/baseline/warning", | ||
@@ -355,0 +371,0 @@ "mi/baseline/warning-amber", |
@@ -24,3 +24,10 @@ [ | ||
| "mgg/adv-denied", | ||
| "mgg/ai", | ||
| "mgg/ai-brain-outline", | ||
| "mgg/ai-brain", | ||
| "mgg/ai-message", | ||
| "mgg/ai-outline", | ||
| "mgg/ai-status-completed", | ||
| "mgg/ai-status-error", | ||
| "mgg/ai-status-processing", | ||
| "mgg/ai-status-suspended", | ||
| "mgg/alerts-pagopa", | ||
@@ -38,2 +45,3 @@ "mgg/ansc", | ||
| "mgg/auto-awesome-motion", | ||
| "mgg/back-to-document", | ||
| "mgg/balance", | ||
@@ -79,2 +87,3 @@ "mgg/bill", | ||
| "mgg/download-json", | ||
| "mgg/edit-article", | ||
| "mgg/electronic-document", | ||
@@ -226,2 +235,3 @@ "mgg/email-assigned", | ||
| "mgg/square-viewfinder", | ||
| "mgg/stacked-documents", | ||
| "mgg/stamp", | ||
@@ -236,2 +246,4 @@ "mgg/status-progress-a-quarter", | ||
| "mgg/terminal", | ||
| "mgg/to-single-document", | ||
| "mgg/to-stacked-documents", | ||
| "mgg/todo-action-businessman-view", | ||
@@ -274,2 +286,3 @@ "mgg/todo-action-certificate", | ||
| "mgg/user-signed-out", | ||
| "mgg/user-substitution", | ||
| "mgg/view-chart-gantt", | ||
@@ -276,0 +289,0 @@ "mgg/view-side-by-side", |
| export type LanguageType = | ||
| | `${Lowercase<string>}${Lowercase<string>}` | ||
| | `${Lowercase<string>}${Lowercase<string>}${Lowercase<string>}` | ||
| export type PrefLanguageType = | ||
| | 'auto' | ||
| | `${Lowercase<string>}${Lowercase<string>}` | ||
| | `${Lowercase<string>}${Lowercase<string>}${Lowercase<string>}` |
@@ -1,1 +0,1 @@ | ||
| import{p as a,b as i}from"./p-cc18f926.js";export{s as setNonce}from"./p-cc18f926.js";import{g as n}from"./p-e1255160.js";(()=>{const s=import.meta.url,i={};return""!==s&&(i.resourcesUrl=new URL(".",s).href),a(i)})().then((async a=>(await n(),i([["p-6747e14a",[[1,"mds-avatar",{icon:[513],initials:[1537],src:[513],tone:[513],variant:[513],fallback:[32],loaded:[32]},null,{initials:["initialsHandler"],src:["srcHandler"],icon:["iconHandler"]}]]]],a)))); | ||
| import{p as a,b as i}from"./p-cc18f926.js";export{s as setNonce}from"./p-cc18f926.js";import{g as n}from"./p-e1255160.js";(()=>{const s=import.meta.url,i={};return""!==s&&(i.resourcesUrl=new URL(".",s).href),a(i)})().then((async a=>(await n(),i([["p-0875d27a",[[1,"mds-avatar",{icon:[513],initials:[1537],src:[513],tone:[513],variant:[513],fallback:[32],loaded:[32]},null,{initials:["initialsHandler"],src:["srcHandler"],icon:["iconHandler"]}]]]],a)))); |
@@ -1,1 +0,1 @@ | ||
| var __awaiter=this&&this.__awaiter||function(n,t,e,r){function i(n){return n instanceof e?n:new e((function(t){t(n)}))}return new(e||(e=Promise))((function(e,c){function a(n){try{u(r.next(n))}catch(n){c(n)}}function o(n){try{u(r["throw"](n))}catch(n){c(n)}}function u(n){n.done?e(n.value):i(n.value).then(a,o)}u((r=r.apply(n,t||[])).next())}))};var __generator=this&&this.__generator||function(n,t){var e={label:0,sent:function(){if(c[0]&1)throw c[1];return c[1]},trys:[],ops:[]},r,i,c,a;return a={next:o(0),throw:o(1),return:o(2)},typeof Symbol==="function"&&(a[Symbol.iterator]=function(){return this}),a;function o(n){return function(t){return u([n,t])}}function u(o){if(r)throw new TypeError("Generator is already executing.");while(a&&(a=0,o[0]&&(e=0)),e)try{if(r=1,i&&(c=o[0]&2?i["return"]:o[0]?i["throw"]||((c=i["return"])&&c.call(i),0):i.next)&&!(c=c.call(i,o[1])).done)return c;if(i=0,c)o=[o[0]&2,c.value];switch(o[0]){case 0:case 1:c=o;break;case 4:e.label++;return{value:o[1],done:false};case 5:e.label++;i=o[1];o=[0];continue;case 7:o=e.ops.pop();e.trys.pop();continue;default:if(!(c=e.trys,c=c.length>0&&c[c.length-1])&&(o[0]===6||o[0]===2)){e=0;continue}if(o[0]===3&&(!c||o[1]>c[0]&&o[1]<c[3])){e.label=o[1];break}if(o[0]===6&&e.label<c[1]){e.label=c[1];c=o;break}if(c&&e.label<c[2]){e.label=c[2];e.ops.push(o);break}if(c[2])e.ops.pop();e.trys.pop();continue}o=t.call(n,e)}catch(n){o=[6,n];i=0}finally{r=c=0}if(o[0]&5)throw o[1];return{value:o[0]?o[1]:void 0,done:true}}};System.register(["./p-ce546452.system.js","./p-56ba5cbf.system.js"],(function(n,t){"use strict";var e,r,i;return{setters:[function(t){e=t.p;r=t.b;n("setNonce",t.s)},function(n){i=n.g}],execute:function(){var n=this;var c=function(){var n=t.meta.url;var r={};if(n!==""){r.resourcesUrl=new URL(".",n).href}return e(r)};c().then((function(t){return __awaiter(n,void 0,void 0,(function(){return __generator(this,(function(n){switch(n.label){case 0:return[4,i()];case 1:n.sent();return[2,r([["p-1b61b40f.system",[[1,"mds-avatar",{icon:[513],initials:[1537],src:[513],tone:[513],variant:[513],fallback:[32],loaded:[32]},null,{initials:["initialsHandler"],src:["srcHandler"],icon:["iconHandler"]}]]]],t)]}}))}))}))}}})); | ||
| var __awaiter=this&&this.__awaiter||function(n,t,e,r){function i(n){return n instanceof e?n:new e((function(t){t(n)}))}return new(e||(e=Promise))((function(e,c){function a(n){try{u(r.next(n))}catch(n){c(n)}}function o(n){try{u(r["throw"](n))}catch(n){c(n)}}function u(n){n.done?e(n.value):i(n.value).then(a,o)}u((r=r.apply(n,t||[])).next())}))};var __generator=this&&this.__generator||function(n,t){var e={label:0,sent:function(){if(c[0]&1)throw c[1];return c[1]},trys:[],ops:[]},r,i,c,a;return a={next:o(0),throw:o(1),return:o(2)},typeof Symbol==="function"&&(a[Symbol.iterator]=function(){return this}),a;function o(n){return function(t){return u([n,t])}}function u(o){if(r)throw new TypeError("Generator is already executing.");while(a&&(a=0,o[0]&&(e=0)),e)try{if(r=1,i&&(c=o[0]&2?i["return"]:o[0]?i["throw"]||((c=i["return"])&&c.call(i),0):i.next)&&!(c=c.call(i,o[1])).done)return c;if(i=0,c)o=[o[0]&2,c.value];switch(o[0]){case 0:case 1:c=o;break;case 4:e.label++;return{value:o[1],done:false};case 5:e.label++;i=o[1];o=[0];continue;case 7:o=e.ops.pop();e.trys.pop();continue;default:if(!(c=e.trys,c=c.length>0&&c[c.length-1])&&(o[0]===6||o[0]===2)){e=0;continue}if(o[0]===3&&(!c||o[1]>c[0]&&o[1]<c[3])){e.label=o[1];break}if(o[0]===6&&e.label<c[1]){e.label=c[1];c=o;break}if(c&&e.label<c[2]){e.label=c[2];e.ops.push(o);break}if(c[2])e.ops.pop();e.trys.pop();continue}o=t.call(n,e)}catch(n){o=[6,n];i=0}finally{r=c=0}if(o[0]&5)throw o[1];return{value:o[0]?o[1]:void 0,done:true}}};System.register(["./p-ce546452.system.js","./p-56ba5cbf.system.js"],(function(n,t){"use strict";var e,r,i;return{setters:[function(t){e=t.p;r=t.b;n("setNonce",t.s)},function(n){i=n.g}],execute:function(){var n=this;var c=function(){var n=t.meta.url;var r={};if(n!==""){r.resourcesUrl=new URL(".",n).href}return e(r)};c().then((function(t){return __awaiter(n,void 0,void 0,(function(){return __generator(this,(function(n){switch(n.label){case 0:return[4,i()];case 1:n.sent();return[2,r([["p-159c60e0.system",[[1,"mds-avatar",{icon:[513],initials:[1537],src:[513],tone:[513],variant:[513],fallback:[32],loaded:[32]},null,{initials:["initialsHandler"],src:["srcHandler"],icon:["iconHandler"]}]]]],t)]}}))}))}))}}})); |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by0.21%
1058201
- Lines of code
- increased by0.31%
13997
- Number of lines in readme file
- increased by7.69%
140
Dependency changes
+ Added@maggioli-design-system/mds-img@3.0.4(transitive)
- Removed@maggioli-design-system/mds-img@3.0.3(transitive)