@primer/view-components 0.1.0-rc.d6eb7cd7 → 0.1.0

package/app/components/primer/alpha/text_field.css.json

@@ -1 +1,172 @@
-{"name":"alpha/text_field","selectors":[".FormControl",".FormControl--fullWidth",".FormControl-label",".FormControl-caption",".FormControl-inlineValidation",".FormControl-inlineValidation p",".FormControl-input",".FormControl-select",".FormControl-textarea",".FormControl-input[disabled]",".FormControl-select[disabled]",".FormControl-textarea[disabled]",".FormControl-input[invalid]:not(:focus)",".FormControl-select[invalid]:not(:focus)",".FormControl-textarea[invalid]:not(:focus)",".FormControl-input:not([type=checkbox]","[type=radio]):focus",".FormControl-select:not([type=checkbox]",".FormControl-textarea:not([type=checkbox]","[type=radio]):focus:not(:focus-visible)","[type=radio]):focus-visible",".FormControl-input[disabled]::placeholder",".FormControl-select[disabled]::placeholder",".FormControl-textarea[disabled]::placeholder",".FormControl-input[readonly]",".FormControl-select[readonly]",".FormControl-textarea[readonly]",".FormControl-input::placeholder",".FormControl-select::placeholder",".FormControl-textarea::placeholder",".FormControl-input.FormControl-small",".FormControl-select.FormControl-small",".FormControl-textarea.FormControl-small",".FormControl-input.FormControl-medium",".FormControl-select.FormControl-medium",".FormControl-textarea.FormControl-medium",".FormControl-input.FormControl-large",".FormControl-select.FormControl-large",".FormControl-textarea.FormControl-large",".FormControl-input.FormControl-inset",".FormControl-select.FormControl-inset",".FormControl-textarea.FormControl-inset",".FormControl-input.FormControl-inset:focus",".FormControl-input.FormControl-inset:focus-visible",".FormControl-select.FormControl-inset:focus",".FormControl-select.FormControl-inset:focus-visible",".FormControl-textarea.FormControl-inset:focus",".FormControl-textarea.FormControl-inset:focus-visible",".FormControl-input.FormControl-monospace",".FormControl-select.FormControl-monospace",".FormControl-textarea.FormControl-monospace",".FormControl-input.FormControl-error",".FormControl-select.FormControl-error",".FormControl-textarea.FormControl-error",".FormControl-input.FormControl-success",".FormControl-select.FormControl-success",".FormControl-textarea.FormControl-success",".FormControl-input.FormControl-warning",".FormControl-select.FormControl-warning",".FormControl-textarea.FormControl-warning",".FormControl-input-wrap",".FormControl-input-wrap .FormControl-input-leadingVisualWrap",".FormControl-input-wrap .FormControl-input-leadingVisualWrap .FormControl-input-leadingVisual",".FormControl-input-wrap .FormControl-input-trailingAction",".FormControl-input-wrap .FormControl-input-trailingAction svg",".FormControl-input-wrap .FormControl-input-trailingAction[disabled]",".FormControl-input-wrap .FormControl-input-trailingAction:hover",".FormControl-input-wrap .FormControl-input-trailingAction:active",".FormControl-input-wrap .FormControl-input-trailingAction.FormControl-input-trailingAction--divider:before",".FormControl-input-wrap .FormControl-input-trailingAction:after",".FormControl-input-wrap.FormControl-input-wrap--leadingVisual .FormControl-input",".FormControl-input-wrap.FormControl-input-wrap--trailingAction .FormControl-input",".FormControl-input-wrap.FormControl-input-wrap--trailingAction.FormControl-input-wrap-trailingAction--divider .FormControl-input",".FormControl-input-wrap.FormControl-small .FormControl-input-leadingVisualWrap",".FormControl-input-wrap.FormControl-small.FormControl-input-wrap--trailingAction .FormControl-input.FormControl-small",".FormControl-input-wrap.FormControl-small.FormControl-input-wrap--trailingAction.FormControl-input-wrap-trailingAction--divider .FormControl-input.FormControl-small",".FormControl-input-wrap.FormControl-small .FormControl-input-trailingAction",".FormControl-input-wrap.FormControl-small .FormControl-input-trailingAction:before",".FormControl-input-wrap.FormControl-large .FormControl-input-leadingVisualWrap",".FormControl-input-wrap.FormControl-large.FormControl-input-wrap--leadingVisual .FormControl-input.FormControl-large",".FormControl-input-wrap.FormControl-large.FormControl-input-wrap--trailingAction .FormControl-input.FormControl-large",".FormControl-input-wrap.FormControl-large.FormControl-input-wrap--trailingAction.FormControl-input-wrap-trailingAction--divider .FormControl-input.FormControl-large",".FormControl-input-wrap.FormControl-large .FormControl-input-trailingAction",".FormControl-input-wrap.FormControl-large .FormControl-input-trailingAction:before",".FormControl-select-wrap",".FormControl-select-wrap:after",".FormControl-select-wrap .FormControl-select",".FormControl-checkbox-wrap",".FormControl-radio-wrap",".FormControl-checkbox-wrap .FormControl-checkbox-labelWrap",".FormControl-checkbox-wrap .FormControl-radio-labelWrap",".FormControl-radio-wrap .FormControl-checkbox-labelWrap",".FormControl-radio-wrap .FormControl-radio-labelWrap",".FormControl-checkbox-wrap .FormControl-label",".FormControl-radio-wrap .FormControl-label","input[type=checkbox].FormControl-checkbox","input.FormControl-checkbox[type=checkbox][disabled]","input.FormControl-checkbox[type=checkbox][invalid]:not(:focus)","input.FormControl-checkbox[type=checkbox]:not([type=checkbox]","input.FormControl-checkbox[type=checkbox]:before","input.FormControl-checkbox[type=checkbox]:after","input.FormControl-checkbox[type=checkbox][disabled]~.FormControl-checkbox-labelWrap .FormControl-label","input.FormControl-checkbox[type=checkbox][disabled]~.FormControl-radio-labelWrap .FormControl-label","input.FormControl-checkbox[type=checkbox]:checked","input.FormControl-checkbox[type=checkbox]:checked:before","input.FormControl-checkbox[type=checkbox]:checked:disabled","input.FormControl-checkbox[type=checkbox]:checked:disabled:before","input.FormControl-checkbox[type=checkbox]:focus-visible","input.FormControl-checkbox[type=checkbox]:indeterminate:before","input[type=radio].FormControl-radio","input.FormControl-radio[type=radio][disabled]","input.FormControl-radio[type=radio][invalid]:not(:focus)","input.FormControl-radio[type=radio]:not([type=checkbox]","input.FormControl-radio[type=radio]:after","input.FormControl-radio[type=radio]:checked","input.FormControl-radio[type=radio]:checked:disabled","input.FormControl-radio[type=radio]:focus-visible","0%","to"]}
+{
+  "name": "alpha/text_field",
+  "selectors": [
+    ".FormControl",
+    ".FormControl--fullWidth",
+    ".FormControl-label",
+    ".FormControl-caption",
+    ".FormControl-inlineValidation",
+    ".FormControl-inlineValidation p",
+    ".FormControl-spacingWrapper",
+    ".FormControl-horizontalGroup",
+    ".FormControl-input",
+    ".FormControl-select",
+    ".FormControl-textarea",
+    ".FormControl-input[disabled]",
+    ".FormControl-select[disabled]",
+    ".FormControl-textarea[disabled]",
+    ".FormControl-input[invalid]:not(:focus)",
+    ".FormControl-select[invalid]:not(:focus)",
+    ".FormControl-textarea[invalid]:not(:focus)",
+    ".FormControl-input:not([type=checkbox],[type=radio]):focus",
+    ".FormControl-select:not([type=checkbox],[type=radio]):focus",
+    ".FormControl-textarea:not([type=checkbox],[type=radio]):focus",
+    ".FormControl-input:not([type=checkbox],[type=radio]):focus:not(:focus-visible)",
+    ".FormControl-select:not([type=checkbox],[type=radio]):focus:not(:focus-visible)",
+    ".FormControl-textarea:not([type=checkbox],[type=radio]):focus:not(:focus-visible)",
+    ".FormControl-input:not([type=checkbox],[type=radio]):focus-visible",
+    ".FormControl-select:not([type=checkbox],[type=radio]):focus-visible",
+    ".FormControl-textarea:not([type=checkbox],[type=radio]):focus-visible",
+    ".FormControl-input[disabled]::placeholder",
+    ".FormControl-select[disabled]::placeholder",
+    ".FormControl-textarea[disabled]::placeholder",
+    ".FormControl-input[readonly]",
+    ".FormControl-select[readonly]",
+    ".FormControl-textarea[readonly]",
+    ".FormControl-input::placeholder",
+    ".FormControl-select::placeholder",
+    ".FormControl-textarea::placeholder",
+    ".FormControl-input.FormControl-small",
+    ".FormControl-select.FormControl-small",
+    ".FormControl-textarea.FormControl-small",
+    ".FormControl-input.FormControl-medium",
+    ".FormControl-select.FormControl-medium",
+    ".FormControl-textarea.FormControl-medium",
+    ".FormControl-input.FormControl-large",
+    ".FormControl-select.FormControl-large",
+    ".FormControl-textarea.FormControl-large",
+    ".FormControl-input.FormControl-inset",
+    ".FormControl-select.FormControl-inset",
+    ".FormControl-textarea.FormControl-inset",
+    ".FormControl-input.FormControl-inset:focus",
+    ".FormControl-input.FormControl-inset:focus-visible",
+    ".FormControl-select.FormControl-inset:focus",
+    ".FormControl-select.FormControl-inset:focus-visible",
+    ".FormControl-textarea.FormControl-inset:focus",
+    ".FormControl-textarea.FormControl-inset:focus-visible",
+    ".FormControl-input.FormControl-monospace",
+    ".FormControl-select.FormControl-monospace",
+    ".FormControl-textarea.FormControl-monospace",
+    ".FormControl-input.FormControl-error",
+    ".FormControl-select.FormControl-error",
+    ".FormControl-textarea.FormControl-error",
+    ".FormControl-input.FormControl-success",
+    ".FormControl-select.FormControl-success",
+    ".FormControl-textarea.FormControl-success",
+    ".FormControl-input.FormControl-warning",
+    ".FormControl-select.FormControl-warning",
+    ".FormControl-textarea.FormControl-warning",
+    ".FormControl-toggleSwitchInput",
+    ".FormControl-input-wrap",
+    ".FormControl-input-wrap .FormControl-input-leadingVisualWrap",
+    ".FormControl-input-wrap .FormControl-input-leadingVisualWrap .FormControl-input-leadingVisual",
+    ".FormControl-input-wrap .FormControl-input-trailingAction",
+    ".FormControl-input-wrap .FormControl-input-trailingAction svg",
+    ".FormControl-input-wrap .FormControl-input-trailingAction[disabled]",
+    ".FormControl-input-wrap .FormControl-input-trailingAction:hover",
+    ".FormControl-input-wrap .FormControl-input-trailingAction:active",
+    ".FormControl-input-wrap .FormControl-input-trailingAction.FormControl-input-trailingAction--divider:before",
+    ".FormControl-input-wrap .FormControl-input-trailingAction:after",
+    ".FormControl-input-wrap.FormControl-input-wrap--leadingVisual .FormControl-input",
+    ".FormControl-input-wrap.FormControl-input-wrap--trailingAction .FormControl-input",
+    ".FormControl-input-wrap.FormControl-input-wrap--trailingAction.FormControl-input-wrap-trailingAction--divider .FormControl-input",
+    ".FormControl-input-wrap.FormControl-small .FormControl-input-leadingVisualWrap",
+    ".FormControl-input-wrap.FormControl-small.FormControl-input-wrap--trailingAction .FormControl-input.FormControl-small",
+    ".FormControl-input-wrap.FormControl-small.FormControl-input-wrap--trailingAction.FormControl-input-wrap-trailingAction--divider .FormControl-input.FormControl-small",
+    ".FormControl-input-wrap.FormControl-small .FormControl-input-trailingAction",
+    ".FormControl-input-wrap.FormControl-small .FormControl-input-trailingAction:before",
+    ".FormControl-input-wrap.FormControl-large .FormControl-input-leadingVisualWrap",
+    ".FormControl-input-wrap.FormControl-large.FormControl-input-wrap--leadingVisual .FormControl-input.FormControl-large",
+    ".FormControl-input-wrap.FormControl-large.FormControl-input-wrap--trailingAction .FormControl-input.FormControl-large",
+    ".FormControl-input-wrap.FormControl-large.FormControl-input-wrap--trailingAction.FormControl-input-wrap-trailingAction--divider .FormControl-input.FormControl-large",
+    ".FormControl-input-wrap.FormControl-large .FormControl-input-trailingAction",
+    ".FormControl-input-wrap.FormControl-large .FormControl-input-trailingAction:before",
+    ".FormControl-select-wrap",
+    ".FormControl-select-wrap:after",
+    ".FormControl-select-wrap .FormControl-select",
+    ".FormControl-checkbox-wrap",
+    ".FormControl-radio-wrap",
+    ".FormControl-checkbox-wrap .FormControl-checkbox-labelWrap",
+    ".FormControl-checkbox-wrap .FormControl-radio-labelWrap",
+    ".FormControl-radio-wrap .FormControl-checkbox-labelWrap",
+    ".FormControl-radio-wrap .FormControl-radio-labelWrap",
+    ".FormControl-checkbox-wrap .FormControl-label",
+    ".FormControl-radio-wrap .FormControl-label",
+    ".FormControl-check-group-wrap fieldset",
+    ".FormControl-radio-group-wrap fieldset",
+    "input[type=checkbox].FormControl-checkbox",
+    "input.FormControl-checkbox[type=checkbox][disabled]",
+    "input.FormControl-checkbox[type=checkbox][invalid]:not(:focus)",
+    "input.FormControl-checkbox[type=checkbox]:not([type=checkbox],[type=radio]):focus",
+    "input.FormControl-checkbox[type=checkbox]:not([type=checkbox],[type=radio]):focus:not(:focus-visible)",
+    "input.FormControl-checkbox[type=checkbox]:not([type=checkbox],[type=radio]):focus-visible",
+    "input.FormControl-checkbox[type=checkbox]:before",
+    "input.FormControl-checkbox[type=checkbox]:after",
+    "input.FormControl-checkbox[type=checkbox][disabled]~.FormControl-checkbox-labelWrap .FormControl-label",
+    "input.FormControl-checkbox[type=checkbox][disabled]~.FormControl-radio-labelWrap .FormControl-label",
+    "input.FormControl-checkbox[type=checkbox]:checked",
+    "input.FormControl-checkbox[type=checkbox]:checked:before",
+    "input.FormControl-checkbox[type=checkbox]:checked:disabled",
+    "input.FormControl-checkbox[type=checkbox]:checked:disabled:before",
+    "input.FormControl-checkbox[type=checkbox]:focus-visible",
+    "input.FormControl-checkbox[type=checkbox]:indeterminate:before",
+    "input[type=radio].FormControl-radio",
+    "input.FormControl-radio[type=radio][disabled]",
+    "input.FormControl-radio[type=radio][invalid]:not(:focus)",
+    "input.FormControl-radio[type=radio]:not([type=checkbox],[type=radio]):focus",
+    "input.FormControl-radio[type=radio]:not([type=checkbox],[type=radio]):focus:not(:focus-visible)",
+    "input.FormControl-radio[type=radio]:not([type=checkbox],[type=radio]):focus-visible",
+    "input.FormControl-radio[type=radio]:after",
+    "input.FormControl-radio[type=radio]:checked",
+    "input.FormControl-radio[type=radio]:checked:disabled",
+    "input.FormControl-radio[type=radio]:focus-visible"
+  ],
+  "classes": [
+    "FormControl",
+    "FormControl--fullWidth",
+    "FormControl-label",
+    "FormControl-caption",
+    "FormControl-inlineValidation",
+    "FormControl-spacingWrapper",
+    "FormControl-horizontalGroup",
+    "FormControl-input",
+    "FormControl-select",
+    "FormControl-textarea",
+    "FormControl-small",
+    "FormControl-medium",
+    "FormControl-large",
+    "FormControl-inset",
+    "FormControl-monospace",
+    "FormControl-error",
+    "FormControl-success",
+    "FormControl-warning",
+    "FormControl-toggleSwitchInput",
+    "FormControl-input-wrap",
+    "FormControl-input-leadingVisualWrap",
+    "FormControl-input-leadingVisual",
+    "FormControl-input-trailingAction",
+    "FormControl-input-trailingAction--divider",
+    "FormControl-input-wrap--leadingVisual",
+    "FormControl-input-wrap--trailingAction",
+    "FormControl-input-wrap-trailingAction--divider",
+    "FormControl-select-wrap",
+    "FormControl-checkbox-wrap",
+    "FormControl-radio-wrap",
+    "FormControl-checkbox-labelWrap",
+    "FormControl-radio-labelWrap",
+    "FormControl-check-group-wrap",
+    "FormControl-radio-group-wrap",
+    "FormControl-checkbox",
+    "FormControl-radio"
+  ]
+}

package/app/components/primer/alpha/toggle_switch.css

@@ -1 +1 @@
-.ToggleSwitch,.ToggleSwitch.ToggleSwitch{display:inline-flex}.ToggleSwitch{align-items:center;gap:var(--primer-controlStack-medium-gap-condensed,8px)}.ToggleSwitch:hover .ToggleSwitch-knob{background-color:var(--color-btn-hover-bg)}.ToggleSwitch:active .ToggleSwitch-knob{background-color:var(--color-btn-active-bg)}.ToggleSwitch--checked .ToggleSwitch-statusOn{height:auto;visibility:visible}.ToggleSwitch--checked .ToggleSwitch-statusOff{height:0;visibility:hidden}.ToggleSwitch-track{-webkit-appearance:none;appearance:none;background-color:var(--color-switch-track-bg);border:var(--primer-borderWidth-thin,1px) solid var(--color-switch-track-border);border-radius:var(--primer-borderRadius-medium,6px);cursor:pointer;display:block;height:var(--primer-control-medium-size,32px);overflow:hidden;padding:0;position:relative;text-decoration:none;transition-duration:80ms;transition-property:background-color,border-color;transition-timing-function:cubic-bezier(.5,1,.89,1);-webkit-user-select:none;user-select:none;width:var(--base-size-64,64px)}.ToggleSwitch-track:focus,.ToggleSwitch-track:focus-visible{outline-offset:0}@media (pointer:coarse){.ToggleSwitch-track:before{content:"";height:100%;left:50%;min-height:44px;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}}@media (prefers-reduced-motion){.ToggleSwitch-track,.ToggleSwitch-track *{transition:none}}.ToggleSwitch-track[aria-checked=true][aria-disabled=true]{background-color:var(--color-canvas-subtle);border-color:var(--color-border-subtle)}.ToggleSwitch-track[aria-checked=true][aria-disabled=true]:active,.ToggleSwitch-track[aria-checked=true][aria-disabled=true]:hover{background-color:var(--color-canvas-subtle)}.ToggleSwitch-track[aria-checked=true][aria-disabled=true] .ToggleSwitch-knob,.ToggleSwitch-track[aria-checked=true][aria-disabled=true]:active .ToggleSwitch-knob,.ToggleSwitch-track[aria-checked=true][aria-disabled=true]:hover .ToggleSwitch-knob{background-color:var(--color-switch-knob-checked-disabled-bg)}.ToggleSwitch-track[aria-checked=true]{background-color:var(--color-switch-track-checked-bg);border-color:var(--color-switch-track-checked-border)}.ToggleSwitch-track[aria-checked=true]:hover{background-color:var(--color-switch-track-checked-hover-bg)}.ToggleSwitch-track[aria-checked=true]:active{background-color:var(--color-switch-track-checked-active-bg)}.ToggleSwitch-track[aria-checked=true] .ToggleSwitch-knob{background-color:var(--color-switch-knob-checked-bg);border:0;transform:translateX(calc(100% + 1px))}.ToggleSwitch-track[aria-checked=true] .ToggleSwitch-lineIcon{transform:translateX(0)}.ToggleSwitch-track[aria-checked=true] .ToggleSwitch-circleIcon{transform:translateX(100%)}.ToggleSwitch-track[aria-disabled=true]{background-color:var(--color-canvas-subtle);border-color:var(--color-border-subtle);cursor:not-allowed;transition-property:none}.ToggleSwitch-track[aria-disabled=true]:active .ToggleSwitch-knob,.ToggleSwitch-track[aria-disabled=true]:hover .ToggleSwitch-knob{background-color:var(--color-btn-bg)}.ToggleSwitch-track[aria-disabled=true] .ToggleSwitch-knob{border-color:var(--color-border-default);box-shadow:none}.ToggleSwitch-track[aria-disabled=true] .ToggleSwitch-knob:active,.ToggleSwitch-track[aria-disabled=true] .ToggleSwitch-knob:hover{background-color:var(--color-btn-bg)}.ToggleSwitch-track[aria-disabled=true] .ToggleSwitch-circleIcon,.ToggleSwitch-track[aria-disabled=true] .ToggleSwitch-lineIcon{color:var(--color-fg-subtle)}.ToggleSwitch-icons{align-items:center;display:flex;height:100%;overflow:hidden;width:100%}.ToggleSwitch-lineIcon{color:var(--color-accent-fg);transform:translateX(-100%)}.ToggleSwitch-circleIcon,.ToggleSwitch-lineIcon{flex:1 0 50%;line-height:0;transition-duration:80ms;transition-property:transform}.ToggleSwitch-circleIcon{color:var(--color-fg-default);transform:translateX(0)}.ToggleSwitch-knob{background-color:var(--color-btn-bg);border:var(--primer-borderWidth-thin,1px) solid var(--color-switch-track-border);border-radius:var(--primer-borderRadius-medium,6px);bottom:-1px;box-shadow:var(--color-shadow-medium),var(--color-btn-inset-shadow);position:absolute;top:-1px;transform:translateX(-1px);transition-duration:80ms;transition-property:transform;transition-timing-function:cubic-bezier(.5,1,.89,1);width:50%;z-index:1}@media (prefers-reduced-motion){.ToggleSwitch-knob{transition:none}}.ToggleSwitch-status{color:var(--color-fg-default);font-size:var(--primer-text-body-size-medium,14px);line-height:1.5;position:relative;text-align:right}.ToggleSwitch--small .ToggleSwitch-status{font-size:var(--primer-text-body-size-small,12px)}.ToggleSwitch--small .ToggleSwitch-track{height:var(--primer-control-xsmall-size,24px);width:var(--base-size-48,48px)}.ToggleSwitch--disabled .ToggleSwitch-status{color:var(--color-fg-muted)}.ToggleSwitch-statusOn{height:0;visibility:hidden}.ToggleSwitch-statusOff{height:auto;visibility:visible}.ToggleSwitch--statusAtEnd{flex-direction:row-reverse}.ToggleSwitch--statusAtEnd .ToggleSwitch-status{text-align:left}
+.ToggleSwitch,.ToggleSwitch.ToggleSwitch{display:inline-flex}.ToggleSwitch{align-items:center;gap:var(--primer-controlStack-medium-gap-condensed,8px)}.ToggleSwitch--checked .ToggleSwitch-statusOn{height:auto;visibility:visible}.ToggleSwitch--checked .ToggleSwitch-statusOff{height:0;visibility:hidden}.ToggleSwitch-track{-webkit-appearance:none;appearance:none;background-color:var(--color-switch-track-bg);border:var(--primer-borderWidth-thin,1px) solid var(--color-switch-track-border);border-radius:var(--primer-borderRadius-medium,6px);cursor:pointer;display:block;height:var(--primer-control-medium-size,32px);overflow:hidden;padding:0;position:relative;text-decoration:none;transition-duration:80ms;transition-property:background-color,border-color;transition-timing-function:cubic-bezier(.5,1,.89,1);-webkit-user-select:none;user-select:none;width:var(--base-size-64,64px)}.ToggleSwitch-track:focus,.ToggleSwitch-track:focus-visible{outline-offset:1px}.ToggleSwitch-track:hover{background-color:var(--color-switch-track-hover-bg)}.ToggleSwitch-track:active{background-color:var(--color-switch-track-active-bg)}@media (pointer:coarse){.ToggleSwitch-track:before{content:"";height:100%;left:50%;min-height:44px;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}}@media (prefers-reduced-motion){.ToggleSwitch-track,.ToggleSwitch-track *{transition:none}}.ToggleSwitch-track[aria-checked=true][aria-disabled=true]{background-color:var(--color-switch-track-disabled-bg);border-color:#0000;color:var(--color-switch-track-checked-disabled-fg)}.ToggleSwitch-track[aria-checked=true]{background-color:var(--color-switch-track-checked-bg);border-color:var(--color-switch-track-checked-border)}.ToggleSwitch-track[aria-checked=true]:not([aria-disabled=true]):hover{background-color:var(--color-switch-track-checked-hover-bg)}.ToggleSwitch-track[aria-checked=true]:not([aria-disabled=true]):active{background-color:var(--color-switch-track-checked-active-bg)}.ToggleSwitch-track[aria-checked=true] .ToggleSwitch-knob{background-color:var(--color-switch-knob-checked-bg);border-color:var(--color-switch-knob-checked-border);transform:translateX(100%)}.ToggleSwitch-track[aria-checked=true] .ToggleSwitch-lineIcon{transform:translateX(0)}.ToggleSwitch-track[aria-checked=true] .ToggleSwitch-circleIcon{transform:translateX(100%)}.ToggleSwitch-track[aria-disabled=true]{background-color:var(--color-switch-track-disabled-bg);border-color:#0000;cursor:not-allowed;transition-property:none}.ToggleSwitch-track[aria-disabled=true] .ToggleSwitch-knob{border-color:var(--color-border-default);box-shadow:none}.ToggleSwitch-track[aria-disabled=true] .ToggleSwitch-circleIcon,.ToggleSwitch-track[aria-disabled=true] .ToggleSwitch-lineIcon{color:var(--color-switch-track-disabled-fg)}.ToggleSwitch-icons{align-items:center;display:flex;height:100%;overflow:hidden;width:100%}.ToggleSwitch-lineIcon{color:var(--color-switch-track-checked-fg);transform:translateX(-100%)}.ToggleSwitch-circleIcon,.ToggleSwitch-lineIcon{flex:1 0 50%;line-height:0;transition-duration:80ms;transition-property:transform}.ToggleSwitch-circleIcon{color:var(--color-switch-track-fg);transform:translateX(0)}.ToggleSwitch-knob{background-color:var(--color-switch-knob-bg);border:var(--primer-borderWidth-thin,1px) solid var(--color-switch-knob-border);border-radius:var(--primer-borderRadius-medium,6px);bottom:0;box-shadow:var(--color-shadow-medium),var(--color-btn-inset-shadow);position:absolute;top:0;transition-duration:80ms;transition-property:transform;transition-timing-function:cubic-bezier(.5,1,.89,1);width:50%;z-index:1}@media (prefers-reduced-motion){.ToggleSwitch-knob{transition:none}}.ToggleSwitch-status{color:var(--color-fg-default);font-size:var(--primer-text-body-size-medium,14px);line-height:1.5;position:relative;text-align:right}.ToggleSwitch-statusIcon{display:flex;margin-top:.063rem;width:var(--base-size-16,16px)}.ToggleSwitch--small .ToggleSwitch-status{font-size:var(--primer-text-body-size-small,12px)}.ToggleSwitch--small .ToggleSwitch-track{height:var(--primer-control-xsmall-size,24px);width:var(--base-size-48,48px)}.ToggleSwitch--disabled .ToggleSwitch-status{color:var(--color-fg-muted)}.ToggleSwitch-statusOn{height:0;visibility:hidden}.ToggleSwitch-statusOff{height:auto;visibility:visible}.ToggleSwitch--statusAtEnd{flex-direction:row-reverse}.ToggleSwitch--statusAtEnd .ToggleSwitch-status{text-align:left}

package/app/components/primer/alpha/toggle_switch.css.json

@@ -1 +1,56 @@
-{"name":"alpha/toggle_switch","selectors":[".ToggleSwitch",".ToggleSwitch.ToggleSwitch",".ToggleSwitch:hover .ToggleSwitch-knob",".ToggleSwitch:active .ToggleSwitch-knob",".ToggleSwitch--checked .ToggleSwitch-statusOn",".ToggleSwitch--checked .ToggleSwitch-statusOff",".ToggleSwitch-track",".ToggleSwitch-track:focus",".ToggleSwitch-track:focus-visible",".ToggleSwitch-track:before",".ToggleSwitch-track *",".ToggleSwitch-track[aria-checked=true][aria-disabled=true]",".ToggleSwitch-track[aria-checked=true][aria-disabled=true]:active",".ToggleSwitch-track[aria-checked=true][aria-disabled=true]:hover",".ToggleSwitch-track[aria-checked=true][aria-disabled=true] .ToggleSwitch-knob",".ToggleSwitch-track[aria-checked=true][aria-disabled=true]:active .ToggleSwitch-knob",".ToggleSwitch-track[aria-checked=true][aria-disabled=true]:hover .ToggleSwitch-knob",".ToggleSwitch-track[aria-checked=true]",".ToggleSwitch-track[aria-checked=true]:hover",".ToggleSwitch-track[aria-checked=true]:active",".ToggleSwitch-track[aria-checked=true] .ToggleSwitch-knob",".ToggleSwitch-track[aria-checked=true] .ToggleSwitch-lineIcon",".ToggleSwitch-track[aria-checked=true] .ToggleSwitch-circleIcon",".ToggleSwitch-track[aria-disabled=true]",".ToggleSwitch-track[aria-disabled=true]:active .ToggleSwitch-knob",".ToggleSwitch-track[aria-disabled=true]:hover .ToggleSwitch-knob",".ToggleSwitch-track[aria-disabled=true] .ToggleSwitch-knob",".ToggleSwitch-track[aria-disabled=true] .ToggleSwitch-knob:active",".ToggleSwitch-track[aria-disabled=true] .ToggleSwitch-knob:hover",".ToggleSwitch-track[aria-disabled=true] .ToggleSwitch-circleIcon",".ToggleSwitch-track[aria-disabled=true] .ToggleSwitch-lineIcon",".ToggleSwitch-icons",".ToggleSwitch-lineIcon",".ToggleSwitch-circleIcon",".ToggleSwitch-knob",".ToggleSwitch-status",".ToggleSwitch--small .ToggleSwitch-status",".ToggleSwitch--small .ToggleSwitch-track",".ToggleSwitch--disabled .ToggleSwitch-status",".ToggleSwitch-statusOn",".ToggleSwitch-statusOff",".ToggleSwitch--statusAtEnd",".ToggleSwitch--statusAtEnd .ToggleSwitch-status"]}
+{
+  "name": "alpha/toggle_switch",
+  "selectors": [
+    ".ToggleSwitch",
+    ".ToggleSwitch.ToggleSwitch",
+    ".ToggleSwitch--checked .ToggleSwitch-statusOn",
+    ".ToggleSwitch--checked .ToggleSwitch-statusOff",
+    ".ToggleSwitch-track",
+    ".ToggleSwitch-track:focus",
+    ".ToggleSwitch-track:focus-visible",
+    ".ToggleSwitch-track:hover",
+    ".ToggleSwitch-track:active",
+    ".ToggleSwitch-track:before",
+    ".ToggleSwitch-track *",
+    ".ToggleSwitch-track[aria-checked=true][aria-disabled=true]",
+    ".ToggleSwitch-track[aria-checked=true]",
+    ".ToggleSwitch-track[aria-checked=true]:not([aria-disabled=true]):hover",
+    ".ToggleSwitch-track[aria-checked=true]:not([aria-disabled=true]):active",
+    ".ToggleSwitch-track[aria-checked=true] .ToggleSwitch-knob",
+    ".ToggleSwitch-track[aria-checked=true] .ToggleSwitch-lineIcon",
+    ".ToggleSwitch-track[aria-checked=true] .ToggleSwitch-circleIcon",
+    ".ToggleSwitch-track[aria-disabled=true]",
+    ".ToggleSwitch-track[aria-disabled=true] .ToggleSwitch-knob",
+    ".ToggleSwitch-track[aria-disabled=true] .ToggleSwitch-circleIcon",
+    ".ToggleSwitch-track[aria-disabled=true] .ToggleSwitch-lineIcon",
+    ".ToggleSwitch-icons",
+    ".ToggleSwitch-lineIcon",
+    ".ToggleSwitch-circleIcon",
+    ".ToggleSwitch-knob",
+    ".ToggleSwitch-status",
+    ".ToggleSwitch-statusIcon",
+    ".ToggleSwitch--small .ToggleSwitch-status",
+    ".ToggleSwitch--small .ToggleSwitch-track",
+    ".ToggleSwitch--disabled .ToggleSwitch-status",
+    ".ToggleSwitch-statusOn",
+    ".ToggleSwitch-statusOff",
+    ".ToggleSwitch--statusAtEnd",
+    ".ToggleSwitch--statusAtEnd .ToggleSwitch-status"
+  ],
+  "classes": [
+    "ToggleSwitch",
+    "ToggleSwitch--checked",
+    "ToggleSwitch-statusOn",
+    "ToggleSwitch-statusOff",
+    "ToggleSwitch-track",
+    "ToggleSwitch-knob",
+    "ToggleSwitch-lineIcon",
+    "ToggleSwitch-circleIcon",
+    "ToggleSwitch-icons",
+    "ToggleSwitch-status",
+    "ToggleSwitch-statusIcon",
+    "ToggleSwitch--small",
+    "ToggleSwitch--disabled",
+    "ToggleSwitch--statusAtEnd"
+  ]
+}

package/app/components/primer/alpha/toggle_switch.js

@@ -81,9 +81,13 @@ let ToggleSwitchElement = class ToggleSwitchElement extends HTMLElement {
         this.loadingSpinner.removeAttribute('hidden');
     }
     setSuccessState() {
+        const event = new CustomEvent('toggleSwitchSuccess', { bubbles: true });
+        this.dispatchEvent(event);
         this.setFinishedState(false);
     }
-    setErrorState() {
+    setErrorState(message) {
+        const event = new CustomEvent('toggleSwitchError', { bubbles: true, detail: message });
+        this.dispatchEvent(event);
         this.setFinishedState(true);
     }
     setFinishedState(error) {
@@ -102,24 +106,32 @@ let ToggleSwitchElement = class ToggleSwitchElement extends HTMLElement {
         try {
             if (!this.src)
                 throw new Error('invalid src');
-            const response = await fetch(this.src, {
-                credentials: 'same-origin',
-                method: 'POST',
-                headers: {
-                    'Requested-With': 'XMLHttpRequest'
-                },
-                body
-            });
+            let response;
+            try {
+                response = await fetch(this.src, {
+                    credentials: 'same-origin',
+                    method: 'POST',
+                    headers: {
+                        'Requested-With': 'XMLHttpRequest'
+                    },
+                    body
+                });
+            }
+            catch (error) {
+                throw new Error('A network error occurred, please try again.');
+            }
             if (response.ok) {
                 this.setSuccessState();
                 this.performToggle();
             }
             else {
-                this.setErrorState();
+                throw new Error(await response.text());
             }
         }
         catch (error) {
-            this.setErrorState();
+            if (error instanceof Error) {
+                this.setErrorState(error.message || 'An error occurred, please try again.');
+            }
         }
     }
 };

package/app/components/primer/alpha/tool_tip.js

@@ -197,9 +197,6 @@ class ToolTipElement extends HTMLElement {
         }
         this.hiddenFromView = true;
         __classPrivateFieldSet(this, _ToolTipElement_allowUpdatePosition, true, "f");
-        if (!this.id) {
-            this.id = `tooltip-${Date.now()}-${(Math.random() * 10000).toFixed(0)}`;
-        }
         if (!this.control)
             return;
         this.setAttribute('role', 'tooltip');

package/app/components/primer/alpha/underline_nav.css.json

@@ -1 +1,41 @@
-{"name":"alpha/underline_nav","selectors":[".UnderlineNav",".UnderlineNav .Counter",".UnderlineNav .Counter--primary",".UnderlineNav-body",".UnderlineNav-item",".UnderlineNav-item:focus",".UnderlineNav-item:focus-visible",".UnderlineNav-item:hover",".UnderlineNav-item [data-content]:before",".UnderlineNav-item:before",".UnderlineNav-item.selected",".UnderlineNav-item[aria-current]:not([aria-current=false])",".UnderlineNav-item[role=tab][aria-selected=true]",".UnderlineNav-item.selected:after",".UnderlineNav-item[aria-current]:not([aria-current=false]):after",".UnderlineNav-item[role=tab][aria-selected=true]:after",".UnderlineNav--right",".UnderlineNav--right .UnderlineNav-actions",".UnderlineNav-actions",".UnderlineNav--full",".UnderlineNav--full .UnderlineNav-body",".UnderlineNav-octicon",".UnderlineNav-container"]}
+{
+  "name": "alpha/underline_nav",
+  "selectors": [
+    ".UnderlineNav",
+    ".UnderlineNav .Counter",
+    ".UnderlineNav .Counter--primary",
+    ".UnderlineNav-body",
+    ".UnderlineNav-item",
+    ".UnderlineNav-item:focus",
+    ".UnderlineNav-item:focus-visible",
+    ".UnderlineNav-item:hover",
+    ".UnderlineNav-item [data-content]:before",
+    ".UnderlineNav-item:before",
+    ".UnderlineNav-item.selected",
+    ".UnderlineNav-item[aria-current]:not([aria-current=false])",
+    ".UnderlineNav-item[role=tab][aria-selected=true]",
+    ".UnderlineNav-item.selected:after",
+    ".UnderlineNav-item[aria-current]:not([aria-current=false]):after",
+    ".UnderlineNav-item[role=tab][aria-selected=true]:after",
+    ".UnderlineNav--right",
+    ".UnderlineNav--right .UnderlineNav-actions",
+    ".UnderlineNav-actions",
+    ".UnderlineNav--full",
+    ".UnderlineNav--full .UnderlineNav-body",
+    ".UnderlineNav-octicon",
+    ".UnderlineNav-container"
+  ],
+  "classes": [
+    "UnderlineNav",
+    "Counter",
+    "Counter--primary",
+    "UnderlineNav-body",
+    "UnderlineNav-item",
+    "selected",
+    "UnderlineNav--right",
+    "UnderlineNav-actions",
+    "UnderlineNav--full",
+    "UnderlineNav-octicon",
+    "UnderlineNav-container"
+  ]
+}

package/app/components/primer/anchored_position.d.ts

@@ -0,0 +1,27 @@
+import type { AnchorAlignment, AnchorSide, PositionSettings } from '@primer/behaviors';
+export default class AnchoredPositionElement extends HTMLElement implements PositionSettings {
+    #private;
+    get align(): AnchorAlignment;
+    set align(value: AnchorAlignment);
+    get side(): AnchorSide;
+    set side(value: AnchorSide);
+    get anchorOffset(): number;
+    set anchorOffset(value: number | 'normal' | 'spacious');
+    get anchor(): string;
+    set anchor(value: string);
+    get anchorElement(): HTMLElement | null;
+    set anchorElement(value: HTMLElement | null);
+    get alignmentOffset(): number;
+    set alignmentOffset(value: number);
+    get allowOutOfBounds(): boolean;
+    set allowOutOfBounds(value: boolean);
+    connectedCallback(): void;
+    static observedAttributes: string[];
+    attributeChangedCallback(): void;
+    update(): void;
+}
+declare global {
+    interface Window {
+        AnchoredPositionElement: typeof AnchoredPositionElement;
+    }
+}

package/app/components/primer/anchored_position.js

@@ -0,0 +1,149 @@
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var _AnchoredPositionElement_anchorElement, _AnchoredPositionElement_animationFrame;
+import { getAnchoredPosition } from '@primer/behaviors';
+const updateWhenVisible = (() => {
+    const anchors = new Set();
+    let intersectionObserver = null;
+    let resizeObserver = null;
+    function updateVisibleAnchors() {
+        for (const anchor of anchors) {
+            anchor.update();
+        }
+    }
+    return (el) => {
+        // eslint-disable-next-line github/prefer-observers
+        window.addEventListener('resize', updateVisibleAnchors);
+        intersectionObserver || (intersectionObserver = new IntersectionObserver(entries => {
+            for (const entry of entries) {
+                const target = entry.target;
+                if (entry.isIntersecting) {
+                    target.update();
+                    anchors.add(target);
+                }
+                else {
+                    anchors.delete(target);
+                }
+            }
+        }));
+        resizeObserver || (resizeObserver = new ResizeObserver(() => {
+            for (const anchor of anchors) {
+                anchor.update();
+            }
+        }));
+        resizeObserver.observe(el.ownerDocument.documentElement);
+        intersectionObserver.observe(el);
+    };
+})();
+export default class AnchoredPositionElement extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        _AnchoredPositionElement_anchorElement.set(this, null);
+        _AnchoredPositionElement_animationFrame.set(this, void 0);
+    }
+    get align() {
+        const value = this.getAttribute('align');
+        if (value === 'center' || value === 'end')
+            return value;
+        return 'start';
+    }
+    set align(value) {
+        this.setAttribute('align', `${value}`);
+    }
+    get side() {
+        const value = this.getAttribute('side');
+        if (value === 'inside-top' ||
+            value === 'inside-bottom' ||
+            value === 'inside-left' ||
+            value === 'inside-right' ||
+            value === 'inside-center' ||
+            value === 'outside-top' ||
+            value === 'outside-left' ||
+            value === 'outside-right') {
+            return value;
+        }
+        return 'outside-bottom';
+    }
+    set side(value) {
+        this.setAttribute('side', `${value}`);
+    }
+    get anchorOffset() {
+        const alias = this.getAttribute('anchor-offset');
+        if (alias === 'spacious' || alias === '8')
+            return 8;
+        return 4;
+    }
+    set anchorOffset(value) {
+        this.setAttribute('anchor-offset', `${value}`);
+    }
+    get anchor() {
+        return this.getAttribute('anchor') || '';
+    }
+    set anchor(value) {
+        this.setAttribute('anchor', `${value}`);
+    }
+    get anchorElement() {
+        if (__classPrivateFieldGet(this, _AnchoredPositionElement_anchorElement, "f"))
+            return __classPrivateFieldGet(this, _AnchoredPositionElement_anchorElement, "f");
+        const idRef = this.anchor;
+        if (!idRef)
+            return null;
+        return this.ownerDocument.getElementById(idRef);
+    }
+    set anchorElement(value) {
+        __classPrivateFieldSet(this, _AnchoredPositionElement_anchorElement, value, "f");
+        if (!__classPrivateFieldGet(this, _AnchoredPositionElement_anchorElement, "f")) {
+            this.removeAttribute('anchor');
+        }
+    }
+    get alignmentOffset() {
+        return Number(this.getAttribute('alignment-offset'));
+    }
+    set alignmentOffset(value) {
+        this.setAttribute('alignment-offset', `${value}`);
+    }
+    get allowOutOfBounds() {
+        return this.hasAttribute('allow-out-of-bounds');
+    }
+    set allowOutOfBounds(value) {
+        this.toggleAttribute('allow-out-of-bounds', value);
+    }
+    connectedCallback() {
+        this.update();
+        this.addEventListener('beforetoggle', () => this.update());
+        updateWhenVisible(this);
+    }
+    attributeChangedCallback() {
+        this.update();
+    }
+    update() {
+        if (!this.isConnected)
+            return;
+        cancelAnimationFrame(__classPrivateFieldGet(this, _AnchoredPositionElement_animationFrame, "f"));
+        __classPrivateFieldSet(this, _AnchoredPositionElement_animationFrame, requestAnimationFrame(() => {
+            const anchor = this.anchorElement;
+            if (!anchor)
+                return;
+            const { left, top, anchorSide, anchorAlign } = getAnchoredPosition(this, anchor, this);
+            this.style.top = `${top}px`;
+            this.style.left = `${left}px`;
+            this.classList.remove('Overlay--anchorAlign-start', 'Overlay--anchorAlign-center', 'Overlay--anchorAlign-end', 'Overlay--anchorSide-insideTop', 'Overlay--anchorSide-insideBottom', 'Overlay--anchorSide-insideLeft', 'Overlay--anchorSide-insideRight', 'Overlay--anchorSide-insideCenter', 'Overlay--anchorSide-outsideTop', 'Overlay--anchorSide-outsideLeft', 'Overlay--anchorSide-outsideRight');
+            this.classList.add(`Overlay--anchorAlign-${anchorAlign}`, `Overlay--anchorSide-${anchorSide}`);
+        }), "f");
+    }
+}
+_AnchoredPositionElement_anchorElement = new WeakMap(), _AnchoredPositionElement_animationFrame = new WeakMap();
+AnchoredPositionElement.observedAttributes = ['align', 'side', 'anchor', 'alignment-offset', 'allow-out-of-bounds'];
+if (!customElements.get('anchored-position')) {
+    window.AnchoredPositionElement = AnchoredPositionElement;
+    customElements.define('anchored-position', AnchoredPositionElement);
+}

package/app/components/primer/beta/avatar.css.json

@@ -1 +1,31 @@
-{"name":"beta/avatar","selectors":[".avatar",".avatar-link",".avatar-group-item",".avatar-1",".avatar-2",".avatar-small",".avatar-3",".avatar-4",".avatar-5",".avatar-6",".avatar-7",".avatar-8"]}
+{
+  "name": "beta/avatar",
+  "selectors": [
+    ".avatar",
+    ".avatar-link",
+    ".avatar-group-item",
+    ".avatar-1",
+    ".avatar-2",
+    ".avatar-small",
+    ".avatar-3",
+    ".avatar-4",
+    ".avatar-5",
+    ".avatar-6",
+    ".avatar-7",
+    ".avatar-8"
+  ],
+  "classes": [
+    "avatar",
+    "avatar-link",
+    "avatar-group-item",
+    "avatar-1",
+    "avatar-2",
+    "avatar-small",
+    "avatar-3",
+    "avatar-4",
+    "avatar-5",
+    "avatar-6",
+    "avatar-7",
+    "avatar-8"
+  ]
+}

package/app/components/primer/beta/avatar_stack.css.json

@@ -1 +1,37 @@
-{"name":"beta/avatar_stack","selectors":[".AvatarStack",".AvatarStack .AvatarStack-body",".AvatarStack.AvatarStack--two",".AvatarStack.AvatarStack--three-plus",".AvatarStack-body",".AvatarStack-body .avatar",".AvatarStack-body .avatar:first-child",".AvatarStack-body .avatar:last-child",".AvatarStack-body .avatar img",".AvatarStack-body .avatar:nth-child(n+4)",".AvatarStack-body:hover .avatar",".AvatarStack-body:hover .avatar:nth-child(n+4)",".AvatarStack-body:hover .avatar-more",".avatar.avatar-more",".avatar.avatar-more:after",".avatar.avatar-more:before",".AvatarStack--right .AvatarStack-body",".AvatarStack--right .AvatarStack-body:hover .avatar",".AvatarStack--right .AvatarStack-body .avatar:not(:last-child)",".AvatarStack--right .avatar.avatar-more",".AvatarStack--right .avatar.avatar-more:before",".AvatarStack--right .avatar.avatar-more:after",".AvatarStack--right .avatar"]}
+{
+  "name": "beta/avatar_stack",
+  "selectors": [
+    ".AvatarStack",
+    ".AvatarStack .AvatarStack-body",
+    ".AvatarStack.AvatarStack--two",
+    ".AvatarStack.AvatarStack--three-plus",
+    ".AvatarStack-body",
+    ".AvatarStack-body .avatar",
+    ".AvatarStack-body .avatar:first-child",
+    ".AvatarStack-body .avatar:last-child",
+    ".AvatarStack-body .avatar img",
+    ".AvatarStack-body .avatar:nth-child(n+4)",
+    ".AvatarStack-body:hover .avatar",
+    ".AvatarStack-body:hover .avatar:nth-child(n+4)",
+    ".AvatarStack-body:hover .avatar-more",
+    ".avatar.avatar-more",
+    ".avatar.avatar-more:after",
+    ".avatar.avatar-more:before",
+    ".AvatarStack--right .AvatarStack-body",
+    ".AvatarStack--right .AvatarStack-body:hover .avatar",
+    ".AvatarStack--right .AvatarStack-body .avatar:not(:last-child)",
+    ".AvatarStack--right .avatar.avatar-more",
+    ".AvatarStack--right .avatar.avatar-more:before",
+    ".AvatarStack--right .avatar.avatar-more:after",
+    ".AvatarStack--right .avatar"
+  ],
+  "classes": [
+    "AvatarStack",
+    "AvatarStack-body",
+    "AvatarStack--two",
+    "AvatarStack--three-plus",
+    "avatar",
+    "avatar-more",
+    "AvatarStack--right"
+  ]
+}