primer_view_components 0.0.108 → 0.0.110

data/app/lib/primer/css/utilities.css.json

@@ -0,0 +1 @@
+{"name":"utilities","selectors":[".anim-fade-in",".anim-fade-in.fast","0%","100%",".anim-fade-out",".anim-fade-out.fast",".anim-fade-up",".anim-fade-down",".anim-grow-x","to",".anim-shrink-x",".anim-scale-in",".anim-pulse","10%",".anim-pulse-in","50%",".hover-grow",".anim-hover-grow",".hover-grow:hover",".anim-hover-grow:hover",".anim-rotate",".border-x",".border-y",".border",".border-0",".border-top",".border-right",".border-bottom",".border-left",".border-top-0",".border-right-0",".border-bottom-0",".border-left-0",".rounded",".rounded-0",".rounded-1",".rounded-2",".rounded-3",".rounded-top-0",".rounded-top-1",".rounded-top-2",".rounded-top-3",".rounded-right-0",".rounded-right-1",".rounded-right-2",".rounded-right-3",".rounded-bottom-0",".rounded-bottom-1",".rounded-bottom-2",".rounded-bottom-3",".rounded-left-0",".rounded-left-1",".rounded-left-2",".rounded-left-3",".border-sm",".border-sm-0",".border-sm-top",".border-sm-right",".border-sm-bottom",".border-sm-left",".border-sm-top-0",".border-sm-right-0",".border-sm-bottom-0",".border-sm-left-0",".rounded-sm",".rounded-sm-0",".rounded-sm-1",".rounded-sm-2",".rounded-sm-3",".rounded-sm-top-0",".rounded-sm-top-1",".rounded-sm-top-2",".rounded-sm-top-3",".rounded-sm-right-0",".rounded-sm-right-1",".rounded-sm-right-2",".rounded-sm-right-3",".rounded-sm-bottom-0",".rounded-sm-bottom-1",".rounded-sm-bottom-2",".rounded-sm-bottom-3",".rounded-sm-left-0",".rounded-sm-left-1",".rounded-sm-left-2",".rounded-sm-left-3",".border-md",".border-md-0",".border-md-top",".border-md-right",".border-md-bottom",".border-md-left",".border-md-top-0",".border-md-right-0",".border-md-bottom-0",".border-md-left-0",".rounded-md",".rounded-md-0",".rounded-md-1",".rounded-md-2",".rounded-md-3",".rounded-md-top-0",".rounded-md-top-1",".rounded-md-top-2",".rounded-md-top-3",".rounded-md-right-0",".rounded-md-right-1",".rounded-md-right-2",".rounded-md-right-3",".rounded-md-bottom-0",".rounded-md-bottom-1",".rounded-md-bottom-2",".rounded-md-bottom-3",".rounded-md-left-0",".rounded-md-left-1",".rounded-md-left-2",".rounded-md-left-3",".border-lg",".border-lg-0",".border-lg-top",".border-lg-right",".border-lg-bottom",".border-lg-left",".border-lg-top-0",".border-lg-right-0",".border-lg-bottom-0",".border-lg-left-0",".rounded-lg",".rounded-lg-0",".rounded-lg-1",".rounded-lg-2",".rounded-lg-3",".rounded-lg-top-0",".rounded-lg-top-1",".rounded-lg-top-2",".rounded-lg-top-3",".rounded-lg-right-0",".rounded-lg-right-1",".rounded-lg-right-2",".rounded-lg-right-3",".rounded-lg-bottom-0",".rounded-lg-bottom-1",".rounded-lg-bottom-2",".rounded-lg-bottom-3",".rounded-lg-left-0",".rounded-lg-left-1",".rounded-lg-left-2",".rounded-lg-left-3",".border-xl",".border-xl-0",".border-xl-top",".border-xl-right",".border-xl-bottom",".border-xl-left",".border-xl-top-0",".border-xl-right-0",".border-xl-bottom-0",".border-xl-left-0",".rounded-xl",".rounded-xl-0",".rounded-xl-1",".rounded-xl-2",".rounded-xl-3",".rounded-xl-top-0",".rounded-xl-top-1",".rounded-xl-top-2",".rounded-xl-top-3",".rounded-xl-right-0",".rounded-xl-right-1",".rounded-xl-right-2",".rounded-xl-right-3",".rounded-xl-bottom-0",".rounded-xl-bottom-1",".rounded-xl-bottom-2",".rounded-xl-bottom-3",".rounded-xl-left-0",".rounded-xl-left-1",".rounded-xl-left-2",".rounded-xl-left-3",".circle",".border-dashed",".color-shadow-small",".color-shadow-medium",".color-shadow-large",".color-shadow-extra-large",".box-shadow-none",".color-fg-default",".color-fg-muted",".color-fg-subtle",".color-fg-accent",".color-fg-success",".color-fg-attention",".color-fg-severe",".color-fg-danger",".color-fg-open",".color-fg-closed",".color-fg-done",".color-fg-sponsors",".color-fg-on-emphasis",".color-bg-default",".color-bg-overlay",".color-bg-inset",".color-bg-subtle",".color-bg-emphasis",".color-bg-accent",".color-bg-accent-emphasis",".color-bg-success",".color-bg-success-emphasis",".color-bg-attention",".color-bg-attention-emphasis",".color-bg-severe",".color-bg-severe-emphasis",".color-bg-danger",".color-bg-danger-emphasis",".color-bg-open",".color-bg-open-emphasis",".color-bg-closed",".color-bg-closed-emphasis",".color-bg-done",".color-bg-done-emphasis",".color-bg-sponsors",".color-bg-sponsors-emphasis",".color-bg-transparent",".color-border-default",".color-border-muted",".color-border-subtle",".color-border-accent",".color-border-accent-emphasis",".color-border-success",".color-border-success-emphasis",".color-border-attention",".color-border-attention-emphasis",".color-border-severe",".color-border-severe-emphasis",".color-border-danger",".color-border-danger-emphasis",".color-border-open",".color-border-open-emphasis",".color-border-closed",".color-border-closed-emphasis",".color-border-done",".color-border-done-emphasis",".color-border-sponsors",".color-border-sponsors-emphasis",".color-fg-inherit",".details-overlay[open]>summary::before",".details-overlay-dark[open]>summary::before",".details-reset>summary",".details-reset>summary:focus",".details-reset>summary:focus:not(:focus-visible)",".details-reset>summary:focus-visible",".details-reset>summary.btn-primary:focus",".details-reset>summary.btn-primary:focus:not(:focus-visible)",".details-reset>summary.btn-primary:focus-visible",".details-reset>summary::before",".details-reset>summary::-webkit-details-marker",".details-overlay>summary",".details-overlay>summary:focus",".details-overlay>summary:focus:not(:focus-visible)",".details-overlay>summary:focus-visible",".details-overlay>summary.btn-primary:focus",".details-overlay>summary.btn-primary:focus:not(:focus-visible)",".details-overlay>summary.btn-primary:focus-visible",".flex-row",".flex-row-reverse",".flex-column",".flex-column-reverse",".flex-wrap",".flex-nowrap",".flex-wrap-reverse",".flex-justify-start",".flex-justify-end",".flex-justify-center",".flex-justify-between",".flex-justify-around",".flex-items-start",".flex-items-end",".flex-items-center",".flex-items-baseline",".flex-items-stretch",".flex-content-start",".flex-content-end",".flex-content-center",".flex-content-between",".flex-content-around",".flex-content-stretch",".flex-1",".flex-auto",".flex-grow-0",".flex-shrink-0",".flex-self-auto",".flex-self-start",".flex-self-end",".flex-self-center",".flex-self-baseline",".flex-self-stretch",".flex-order-1",".flex-order-2",".flex-order-none",".flex-sm-row",".flex-sm-row-reverse",".flex-sm-column",".flex-sm-column-reverse",".flex-sm-wrap",".flex-sm-nowrap",".flex-sm-wrap-reverse",".flex-sm-justify-start",".flex-sm-justify-end",".flex-sm-justify-center",".flex-sm-justify-between",".flex-sm-justify-around",".flex-sm-items-start",".flex-sm-items-end",".flex-sm-items-center",".flex-sm-items-baseline",".flex-sm-items-stretch",".flex-sm-content-start",".flex-sm-content-end",".flex-sm-content-center",".flex-sm-content-between",".flex-sm-content-around",".flex-sm-content-stretch",".flex-sm-1",".flex-sm-auto",".flex-sm-grow-0",".flex-sm-shrink-0",".flex-sm-self-auto",".flex-sm-self-start",".flex-sm-self-end",".flex-sm-self-center",".flex-sm-self-baseline",".flex-sm-self-stretch",".flex-sm-order-1",".flex-sm-order-2",".flex-sm-order-none",".flex-md-row",".flex-md-row-reverse",".flex-md-column",".flex-md-column-reverse",".flex-md-wrap",".flex-md-nowrap",".flex-md-wrap-reverse",".flex-md-justify-start",".flex-md-justify-end",".flex-md-justify-center",".flex-md-justify-between",".flex-md-justify-around",".flex-md-items-start",".flex-md-items-end",".flex-md-items-center",".flex-md-items-baseline",".flex-md-items-stretch",".flex-md-content-start",".flex-md-content-end",".flex-md-content-center",".flex-md-content-between",".flex-md-content-around",".flex-md-content-stretch",".flex-md-1",".flex-md-auto",".flex-md-grow-0",".flex-md-shrink-0",".flex-md-self-auto",".flex-md-self-start",".flex-md-self-end",".flex-md-self-center",".flex-md-self-baseline",".flex-md-self-stretch",".flex-md-order-1",".flex-md-order-2",".flex-md-order-none",".flex-lg-row",".flex-lg-row-reverse",".flex-lg-column",".flex-lg-column-reverse",".flex-lg-wrap",".flex-lg-nowrap",".flex-lg-wrap-reverse",".flex-lg-justify-start",".flex-lg-justify-end",".flex-lg-justify-center",".flex-lg-justify-between",".flex-lg-justify-around",".flex-lg-items-start",".flex-lg-items-end",".flex-lg-items-center",".flex-lg-items-baseline",".flex-lg-items-stretch",".flex-lg-content-start",".flex-lg-content-end",".flex-lg-content-center",".flex-lg-content-between",".flex-lg-content-around",".flex-lg-content-stretch",".flex-lg-1",".flex-lg-auto",".flex-lg-grow-0",".flex-lg-shrink-0",".flex-lg-self-auto",".flex-lg-self-start",".flex-lg-self-end",".flex-lg-self-center",".flex-lg-self-baseline",".flex-lg-self-stretch",".flex-lg-order-1",".flex-lg-order-2",".flex-lg-order-none",".flex-xl-row",".flex-xl-row-reverse",".flex-xl-column",".flex-xl-column-reverse",".flex-xl-wrap",".flex-xl-nowrap",".flex-xl-wrap-reverse",".flex-xl-justify-start",".flex-xl-justify-end",".flex-xl-justify-center",".flex-xl-justify-between",".flex-xl-justify-around",".flex-xl-items-start",".flex-xl-items-end",".flex-xl-items-center",".flex-xl-items-baseline",".flex-xl-items-stretch",".flex-xl-content-start",".flex-xl-content-end",".flex-xl-content-center",".flex-xl-content-between",".flex-xl-content-around",".flex-xl-content-stretch",".flex-xl-1",".flex-xl-auto",".flex-xl-grow-0",".flex-xl-shrink-0",".flex-xl-self-auto",".flex-xl-self-start",".flex-xl-self-end",".flex-xl-self-center",".flex-xl-self-baseline",".flex-xl-self-stretch",".flex-xl-order-1",".flex-xl-order-2",".flex-xl-order-none",".position-static",".position-relative",".position-absolute",".position-fixed",".position-sticky",".position-sm-static",".position-sm-relative",".position-sm-absolute",".position-sm-fixed",".position-sm-sticky",".position-md-static",".position-md-relative",".position-md-absolute",".position-md-fixed",".position-md-sticky",".position-lg-static",".position-lg-relative",".position-lg-absolute",".position-lg-fixed",".position-lg-sticky",".position-xl-static",".position-xl-relative",".position-xl-absolute",".position-xl-fixed",".position-xl-sticky",".top-0",".right-0",".bottom-0",".left-0",".top-auto",".right-auto",".bottom-auto",".left-auto",".top-sm-0",".right-sm-0",".bottom-sm-0",".left-sm-0",".top-sm-auto",".right-sm-auto",".bottom-sm-auto",".left-sm-auto",".top-md-0",".right-md-0",".bottom-md-0",".left-md-0",".top-md-auto",".right-md-auto",".bottom-md-auto",".left-md-auto",".top-lg-0",".right-lg-0",".bottom-lg-0",".left-lg-0",".top-lg-auto",".right-lg-auto",".bottom-lg-auto",".left-lg-auto",".top-xl-0",".right-xl-0",".bottom-xl-0",".left-xl-0",".top-xl-auto",".right-xl-auto",".bottom-xl-auto",".left-xl-auto",".v-align-middle",".v-align-top",".v-align-bottom",".v-align-text-top",".v-align-text-bottom",".v-align-baseline",".overflow-visible",".overflow-x-visible",".overflow-y-visible",".overflow-hidden",".overflow-x-hidden",".overflow-y-hidden",".overflow-auto",".overflow-x-auto",".overflow-y-auto",".overflow-scroll",".overflow-x-scroll",".overflow-y-scroll",".overflow-sm-visible",".overflow-sm-x-visible",".overflow-sm-y-visible",".overflow-sm-hidden",".overflow-sm-x-hidden",".overflow-sm-y-hidden",".overflow-sm-auto",".overflow-sm-x-auto",".overflow-sm-y-auto",".overflow-sm-scroll",".overflow-sm-x-scroll",".overflow-sm-y-scroll",".overflow-md-visible",".overflow-md-x-visible",".overflow-md-y-visible",".overflow-md-hidden",".overflow-md-x-hidden",".overflow-md-y-hidden",".overflow-md-auto",".overflow-md-x-auto",".overflow-md-y-auto",".overflow-md-scroll",".overflow-md-x-scroll",".overflow-md-y-scroll",".overflow-lg-visible",".overflow-lg-x-visible",".overflow-lg-y-visible",".overflow-lg-hidden",".overflow-lg-x-hidden",".overflow-lg-y-hidden",".overflow-lg-auto",".overflow-lg-x-auto",".overflow-lg-y-auto",".overflow-lg-scroll",".overflow-lg-x-scroll",".overflow-lg-y-scroll",".overflow-xl-visible",".overflow-xl-x-visible",".overflow-xl-y-visible",".overflow-xl-hidden",".overflow-xl-x-hidden",".overflow-xl-y-hidden",".overflow-xl-auto",".overflow-xl-x-auto",".overflow-xl-y-auto",".overflow-xl-scroll",".overflow-xl-x-scroll",".overflow-xl-y-scroll",".clearfix::before",".clearfix::after",".float-left",".float-right",".float-none",".float-sm-left",".float-sm-right",".float-sm-none",".float-md-left",".float-md-right",".float-md-none",".float-lg-left",".float-lg-right",".float-lg-none",".float-xl-left",".float-xl-right",".float-xl-none",".width-fit",".width-full",".height-fit",".height-full",".min-width-0",".width-auto",".direction-rtl",".direction-ltr",".width-sm-auto",".direction-sm-rtl",".direction-sm-ltr",".width-md-auto",".direction-md-rtl",".direction-md-ltr",".width-lg-auto",".direction-lg-rtl",".direction-lg-ltr",".width-xl-auto",".direction-xl-rtl",".direction-xl-ltr",".m-0",".mt-0",".mb-0",".mr-0",".ml-0",".mx-0",".my-0",".m-1",".mt-1",".mb-1",".mr-1",".ml-1",".mt-n1",".mb-n1",".mr-n1",".ml-n1",".mx-1",".my-1",".m-2",".mt-2",".mb-2",".mr-2",".ml-2",".mt-n2",".mb-n2",".mr-n2",".ml-n2",".mx-2",".my-2",".m-3",".mt-3",".mb-3",".mr-3",".ml-3",".mt-n3",".mb-n3",".mr-n3",".ml-n3",".mx-3",".my-3",".m-4",".mt-4",".mb-4",".mr-4",".ml-4",".mt-n4",".mb-n4",".mr-n4",".ml-n4",".mx-4",".my-4",".m-5",".mt-5",".mb-5",".mr-5",".ml-5",".mt-n5",".mb-n5",".mr-n5",".ml-n5",".mx-5",".my-5",".m-6",".mt-6",".mb-6",".mr-6",".ml-6",".mt-n6",".mb-n6",".mr-n6",".ml-n6",".mx-6",".my-6",".mt-7",".mb-7",".mt-n7",".mb-n7",".my-7",".mt-8",".mb-8",".mt-n8",".mb-n8",".my-8",".mt-9",".mb-9",".mt-n9",".mb-n9",".my-9",".mt-10",".mb-10",".mt-n10",".mb-n10",".my-10",".mt-11",".mb-11",".mt-n11",".mb-n11",".my-11",".mt-12",".mb-12",".mt-n12",".mb-n12",".my-12",".mx-auto",".m-sm-0",".mt-sm-0",".mb-sm-0",".mr-sm-0",".ml-sm-0",".mx-sm-0",".my-sm-0",".m-sm-1",".mt-sm-1",".mb-sm-1",".mr-sm-1",".ml-sm-1",".mt-sm-n1",".mb-sm-n1",".mr-sm-n1",".ml-sm-n1",".mx-sm-1",".my-sm-1",".m-sm-2",".mt-sm-2",".mb-sm-2",".mr-sm-2",".ml-sm-2",".mt-sm-n2",".mb-sm-n2",".mr-sm-n2",".ml-sm-n2",".mx-sm-2",".my-sm-2",".m-sm-3",".mt-sm-3",".mb-sm-3",".mr-sm-3",".ml-sm-3",".mt-sm-n3",".mb-sm-n3",".mr-sm-n3",".ml-sm-n3",".mx-sm-3",".my-sm-3",".m-sm-4",".mt-sm-4",".mb-sm-4",".mr-sm-4",".ml-sm-4",".mt-sm-n4",".mb-sm-n4",".mr-sm-n4",".ml-sm-n4",".mx-sm-4",".my-sm-4",".m-sm-5",".mt-sm-5",".mb-sm-5",".mr-sm-5",".ml-sm-5",".mt-sm-n5",".mb-sm-n5",".mr-sm-n5",".ml-sm-n5",".mx-sm-5",".my-sm-5",".m-sm-6",".mt-sm-6",".mb-sm-6",".mr-sm-6",".ml-sm-6",".mt-sm-n6",".mb-sm-n6",".mr-sm-n6",".ml-sm-n6",".mx-sm-6",".my-sm-6",".mt-sm-7",".mb-sm-7",".mt-sm-n7",".mb-sm-n7",".my-sm-7",".mt-sm-8",".mb-sm-8",".mt-sm-n8",".mb-sm-n8",".my-sm-8",".mt-sm-9",".mb-sm-9",".mt-sm-n9",".mb-sm-n9",".my-sm-9",".mt-sm-10",".mb-sm-10",".mt-sm-n10",".mb-sm-n10",".my-sm-10",".mt-sm-11",".mb-sm-11",".mt-sm-n11",".mb-sm-n11",".my-sm-11",".mt-sm-12",".mb-sm-12",".mt-sm-n12",".mb-sm-n12",".my-sm-12",".mx-sm-auto",".m-md-0",".mt-md-0",".mb-md-0",".mr-md-0",".ml-md-0",".mx-md-0",".my-md-0",".m-md-1",".mt-md-1",".mb-md-1",".mr-md-1",".ml-md-1",".mt-md-n1",".mb-md-n1",".mr-md-n1",".ml-md-n1",".mx-md-1",".my-md-1",".m-md-2",".mt-md-2",".mb-md-2",".mr-md-2",".ml-md-2",".mt-md-n2",".mb-md-n2",".mr-md-n2",".ml-md-n2",".mx-md-2",".my-md-2",".m-md-3",".mt-md-3",".mb-md-3",".mr-md-3",".ml-md-3",".mt-md-n3",".mb-md-n3",".mr-md-n3",".ml-md-n3",".mx-md-3",".my-md-3",".m-md-4",".mt-md-4",".mb-md-4",".mr-md-4",".ml-md-4",".mt-md-n4",".mb-md-n4",".mr-md-n4",".ml-md-n4",".mx-md-4",".my-md-4",".m-md-5",".mt-md-5",".mb-md-5",".mr-md-5",".ml-md-5",".mt-md-n5",".mb-md-n5",".mr-md-n5",".ml-md-n5",".mx-md-5",".my-md-5",".m-md-6",".mt-md-6",".mb-md-6",".mr-md-6",".ml-md-6",".mt-md-n6",".mb-md-n6",".mr-md-n6",".ml-md-n6",".mx-md-6",".my-md-6",".mt-md-7",".mb-md-7",".mt-md-n7",".mb-md-n7",".my-md-7",".mt-md-8",".mb-md-8",".mt-md-n8",".mb-md-n8",".my-md-8",".mt-md-9",".mb-md-9",".mt-md-n9",".mb-md-n9",".my-md-9",".mt-md-10",".mb-md-10",".mt-md-n10",".mb-md-n10",".my-md-10",".mt-md-11",".mb-md-11",".mt-md-n11",".mb-md-n11",".my-md-11",".mt-md-12",".mb-md-12",".mt-md-n12",".mb-md-n12",".my-md-12",".mx-md-auto",".m-lg-0",".mt-lg-0",".mb-lg-0",".mr-lg-0",".ml-lg-0",".mx-lg-0",".my-lg-0",".m-lg-1",".mt-lg-1",".mb-lg-1",".mr-lg-1",".ml-lg-1",".mt-lg-n1",".mb-lg-n1",".mr-lg-n1",".ml-lg-n1",".mx-lg-1",".my-lg-1",".m-lg-2",".mt-lg-2",".mb-lg-2",".mr-lg-2",".ml-lg-2",".mt-lg-n2",".mb-lg-n2",".mr-lg-n2",".ml-lg-n2",".mx-lg-2",".my-lg-2",".m-lg-3",".mt-lg-3",".mb-lg-3",".mr-lg-3",".ml-lg-3",".mt-lg-n3",".mb-lg-n3",".mr-lg-n3",".ml-lg-n3",".mx-lg-3",".my-lg-3",".m-lg-4",".mt-lg-4",".mb-lg-4",".mr-lg-4",".ml-lg-4",".mt-lg-n4",".mb-lg-n4",".mr-lg-n4",".ml-lg-n4",".mx-lg-4",".my-lg-4",".m-lg-5",".mt-lg-5",".mb-lg-5",".mr-lg-5",".ml-lg-5",".mt-lg-n5",".mb-lg-n5",".mr-lg-n5",".ml-lg-n5",".mx-lg-5",".my-lg-5",".m-lg-6",".mt-lg-6",".mb-lg-6",".mr-lg-6",".ml-lg-6",".mt-lg-n6",".mb-lg-n6",".mr-lg-n6",".ml-lg-n6",".mx-lg-6",".my-lg-6",".mt-lg-7",".mb-lg-7",".mt-lg-n7",".mb-lg-n7",".my-lg-7",".mt-lg-8",".mb-lg-8",".mt-lg-n8",".mb-lg-n8",".my-lg-8",".mt-lg-9",".mb-lg-9",".mt-lg-n9",".mb-lg-n9",".my-lg-9",".mt-lg-10",".mb-lg-10",".mt-lg-n10",".mb-lg-n10",".my-lg-10",".mt-lg-11",".mb-lg-11",".mt-lg-n11",".mb-lg-n11",".my-lg-11",".mt-lg-12",".mb-lg-12",".mt-lg-n12",".mb-lg-n12",".my-lg-12",".mx-lg-auto",".m-xl-0",".mt-xl-0",".mb-xl-0",".mr-xl-0",".ml-xl-0",".mx-xl-0",".my-xl-0",".m-xl-1",".mt-xl-1",".mb-xl-1",".mr-xl-1",".ml-xl-1",".mt-xl-n1",".mb-xl-n1",".mr-xl-n1",".ml-xl-n1",".mx-xl-1",".my-xl-1",".m-xl-2",".mt-xl-2",".mb-xl-2",".mr-xl-2",".ml-xl-2",".mt-xl-n2",".mb-xl-n2",".mr-xl-n2",".ml-xl-n2",".mx-xl-2",".my-xl-2",".m-xl-3",".mt-xl-3",".mb-xl-3",".mr-xl-3",".ml-xl-3",".mt-xl-n3",".mb-xl-n3",".mr-xl-n3",".ml-xl-n3",".mx-xl-3",".my-xl-3",".m-xl-4",".mt-xl-4",".mb-xl-4",".mr-xl-4",".ml-xl-4",".mt-xl-n4",".mb-xl-n4",".mr-xl-n4",".ml-xl-n4",".mx-xl-4",".my-xl-4",".m-xl-5",".mt-xl-5",".mb-xl-5",".mr-xl-5",".ml-xl-5",".mt-xl-n5",".mb-xl-n5",".mr-xl-n5",".ml-xl-n5",".mx-xl-5",".my-xl-5",".m-xl-6",".mt-xl-6",".mb-xl-6",".mr-xl-6",".ml-xl-6",".mt-xl-n6",".mb-xl-n6",".mr-xl-n6",".ml-xl-n6",".mx-xl-6",".my-xl-6",".mt-xl-7",".mb-xl-7",".mt-xl-n7",".mb-xl-n7",".my-xl-7",".mt-xl-8",".mb-xl-8",".mt-xl-n8",".mb-xl-n8",".my-xl-8",".mt-xl-9",".mb-xl-9",".mt-xl-n9",".mb-xl-n9",".my-xl-9",".mt-xl-10",".mb-xl-10",".mt-xl-n10",".mb-xl-n10",".my-xl-10",".mt-xl-11",".mb-xl-11",".mt-xl-n11",".mb-xl-n11",".my-xl-11",".mt-xl-12",".mb-xl-12",".mt-xl-n12",".mb-xl-n12",".my-xl-12",".mx-xl-auto",".m-auto",".mt-auto",".mr-auto",".mb-auto",".ml-auto",".p-0",".pt-0",".pr-0",".pb-0",".pl-0",".px-0",".py-0",".p-1",".pt-1",".pr-1",".pb-1",".pl-1",".px-1",".py-1",".p-2",".pt-2",".pr-2",".pb-2",".pl-2",".px-2",".py-2",".p-3",".pt-3",".pr-3",".pb-3",".pl-3",".px-3",".py-3",".p-4",".pt-4",".pr-4",".pb-4",".pl-4",".px-4",".py-4",".p-5",".pt-5",".pr-5",".pb-5",".pl-5",".px-5",".py-5",".p-6",".pt-6",".pr-6",".pb-6",".pl-6",".px-6",".py-6",".pt-7",".pr-7",".pb-7",".pl-7",".py-7",".pt-8",".pr-8",".pb-8",".pl-8",".py-8",".pt-9",".pr-9",".pb-9",".pl-9",".py-9",".pt-10",".pr-10",".pb-10",".pl-10",".py-10",".pt-11",".pr-11",".pb-11",".pl-11",".py-11",".pt-12",".pr-12",".pb-12",".pl-12",".py-12",".p-sm-0",".pt-sm-0",".pr-sm-0",".pb-sm-0",".pl-sm-0",".px-sm-0",".py-sm-0",".p-sm-1",".pt-sm-1",".pr-sm-1",".pb-sm-1",".pl-sm-1",".px-sm-1",".py-sm-1",".p-sm-2",".pt-sm-2",".pr-sm-2",".pb-sm-2",".pl-sm-2",".px-sm-2",".py-sm-2",".p-sm-3",".pt-sm-3",".pr-sm-3",".pb-sm-3",".pl-sm-3",".px-sm-3",".py-sm-3",".p-sm-4",".pt-sm-4",".pr-sm-4",".pb-sm-4",".pl-sm-4",".px-sm-4",".py-sm-4",".p-sm-5",".pt-sm-5",".pr-sm-5",".pb-sm-5",".pl-sm-5",".px-sm-5",".py-sm-5",".p-sm-6",".pt-sm-6",".pr-sm-6",".pb-sm-6",".pl-sm-6",".px-sm-6",".py-sm-6",".pt-sm-7",".pr-sm-7",".pb-sm-7",".pl-sm-7",".py-sm-7",".pt-sm-8",".pr-sm-8",".pb-sm-8",".pl-sm-8",".py-sm-8",".pt-sm-9",".pr-sm-9",".pb-sm-9",".pl-sm-9",".py-sm-9",".pt-sm-10",".pr-sm-10",".pb-sm-10",".pl-sm-10",".py-sm-10",".pt-sm-11",".pr-sm-11",".pb-sm-11",".pl-sm-11",".py-sm-11",".pt-sm-12",".pr-sm-12",".pb-sm-12",".pl-sm-12",".py-sm-12",".p-md-0",".pt-md-0",".pr-md-0",".pb-md-0",".pl-md-0",".px-md-0",".py-md-0",".p-md-1",".pt-md-1",".pr-md-1",".pb-md-1",".pl-md-1",".px-md-1",".py-md-1",".p-md-2",".pt-md-2",".pr-md-2",".pb-md-2",".pl-md-2",".px-md-2",".py-md-2",".p-md-3",".pt-md-3",".pr-md-3",".pb-md-3",".pl-md-3",".px-md-3",".py-md-3",".p-md-4",".pt-md-4",".pr-md-4",".pb-md-4",".pl-md-4",".px-md-4",".py-md-4",".p-md-5",".pt-md-5",".pr-md-5",".pb-md-5",".pl-md-5",".px-md-5",".py-md-5",".p-md-6",".pt-md-6",".pr-md-6",".pb-md-6",".pl-md-6",".px-md-6",".py-md-6",".pt-md-7",".pr-md-7",".pb-md-7",".pl-md-7",".py-md-7",".pt-md-8",".pr-md-8",".pb-md-8",".pl-md-8",".py-md-8",".pt-md-9",".pr-md-9",".pb-md-9",".pl-md-9",".py-md-9",".pt-md-10",".pr-md-10",".pb-md-10",".pl-md-10",".py-md-10",".pt-md-11",".pr-md-11",".pb-md-11",".pl-md-11",".py-md-11",".pt-md-12",".pr-md-12",".pb-md-12",".pl-md-12",".py-md-12",".p-lg-0",".pt-lg-0",".pr-lg-0",".pb-lg-0",".pl-lg-0",".px-lg-0",".py-lg-0",".p-lg-1",".pt-lg-1",".pr-lg-1",".pb-lg-1",".pl-lg-1",".px-lg-1",".py-lg-1",".p-lg-2",".pt-lg-2",".pr-lg-2",".pb-lg-2",".pl-lg-2",".px-lg-2",".py-lg-2",".p-lg-3",".pt-lg-3",".pr-lg-3",".pb-lg-3",".pl-lg-3",".px-lg-3",".py-lg-3",".p-lg-4",".pt-lg-4",".pr-lg-4",".pb-lg-4",".pl-lg-4",".px-lg-4",".py-lg-4",".p-lg-5",".pt-lg-5",".pr-lg-5",".pb-lg-5",".pl-lg-5",".px-lg-5",".py-lg-5",".p-lg-6",".pt-lg-6",".pr-lg-6",".pb-lg-6",".pl-lg-6",".px-lg-6",".py-lg-6",".pt-lg-7",".pr-lg-7",".pb-lg-7",".pl-lg-7",".py-lg-7",".pt-lg-8",".pr-lg-8",".pb-lg-8",".pl-lg-8",".py-lg-8",".pt-lg-9",".pr-lg-9",".pb-lg-9",".pl-lg-9",".py-lg-9",".pt-lg-10",".pr-lg-10",".pb-lg-10",".pl-lg-10",".py-lg-10",".pt-lg-11",".pr-lg-11",".pb-lg-11",".pl-lg-11",".py-lg-11",".pt-lg-12",".pr-lg-12",".pb-lg-12",".pl-lg-12",".py-lg-12",".p-xl-0",".pt-xl-0",".pr-xl-0",".pb-xl-0",".pl-xl-0",".px-xl-0",".py-xl-0",".p-xl-1",".pt-xl-1",".pr-xl-1",".pb-xl-1",".pl-xl-1",".px-xl-1",".py-xl-1",".p-xl-2",".pt-xl-2",".pr-xl-2",".pb-xl-2",".pl-xl-2",".px-xl-2",".py-xl-2",".p-xl-3",".pt-xl-3",".pr-xl-3",".pb-xl-3",".pl-xl-3",".px-xl-3",".py-xl-3",".p-xl-4",".pt-xl-4",".pr-xl-4",".pb-xl-4",".pl-xl-4",".px-xl-4",".py-xl-4",".p-xl-5",".pt-xl-5",".pr-xl-5",".pb-xl-5",".pl-xl-5",".px-xl-5",".py-xl-5",".p-xl-6",".pt-xl-6",".pr-xl-6",".pb-xl-6",".pl-xl-6",".px-xl-6",".py-xl-6",".pt-xl-7",".pr-xl-7",".pb-xl-7",".pl-xl-7",".py-xl-7",".pt-xl-8",".pr-xl-8",".pb-xl-8",".pl-xl-8",".py-xl-8",".pt-xl-9",".pr-xl-9",".pb-xl-9",".pl-xl-9",".py-xl-9",".pt-xl-10",".pr-xl-10",".pb-xl-10",".pl-xl-10",".py-xl-10",".pt-xl-11",".pr-xl-11",".pb-xl-11",".pl-xl-11",".py-xl-11",".pt-xl-12",".pr-xl-12",".pb-xl-12",".pl-xl-12",".py-xl-12",".p-responsive",".h1",".h2",".h3",".h4",".h5",".h6",".f1",".f2",".f3",".f4",".f5",".f6",".f00-light",".f0-light",".f1-light",".f2-light",".f3-light",".text-small",".lead",".lh-condensed-ultra",".lh-condensed",".lh-default",".lh-0",".lh-sm-condensed-ultra",".lh-sm-condensed",".lh-sm-default",".lh-sm-0",".lh-md-condensed-ultra",".lh-md-condensed",".lh-md-default",".lh-md-0",".lh-lg-condensed-ultra",".lh-lg-condensed",".lh-lg-default",".lh-lg-0",".lh-xl-condensed-ultra",".lh-xl-condensed",".lh-xl-default",".lh-xl-0",".text-right",".text-left",".text-center",".text-sm-right",".text-sm-left",".text-sm-center",".text-md-right",".text-md-left",".text-md-center",".text-lg-right",".text-lg-left",".text-lg-center",".text-xl-right",".text-xl-left",".text-xl-center",".text-normal",".text-bold",".text-semibold",".text-light",".text-italic",".text-uppercase",".text-underline",".no-underline",".no-wrap",".ws-normal",".wb-break-word",".wb-break-all",".text-emphasized",".list-style-none",".text-mono",".user-select-none",".text-capitalize",".d-block",".d-flex",".d-inline",".d-inline-block",".d-inline-flex",".d-none",".d-table",".d-table-cell",".d-sm-block",".d-sm-flex",".d-sm-inline",".d-sm-inline-block",".d-sm-inline-flex",".d-sm-none",".d-sm-table",".d-sm-table-cell",".d-md-block",".d-md-flex",".d-md-inline",".d-md-inline-block",".d-md-inline-flex",".d-md-none",".d-md-table",".d-md-table-cell",".d-lg-block",".d-lg-flex",".d-lg-inline",".d-lg-inline-block",".d-lg-inline-flex",".d-lg-none",".d-lg-table",".d-lg-table-cell",".d-xl-block",".d-xl-flex",".d-xl-inline",".d-xl-inline-block",".d-xl-inline-flex",".d-xl-none",".d-xl-table",".d-xl-table-cell",".v-hidden",".v-visible",".hide-sm",".hide-md",".hide-lg",".hide-xl",".show-whenNarrow",".show-whenRegular",".show-whenWide",".show-whenRegular.hide-whenWide",".hide-whenNarrow",".hide-whenRegular",".hide-whenWide",".table-fixed",".sr-only",".show-on-focus",".show-on-focus:focus"]}

data/lib/primer/classify/utilities.rb

@@ -9,7 +9,7 @@ module Primer
     class Utilities
       UTILITIES = YAML.safe_load(
         File.read(
-          File.join(File.dirname(__FILE__), "./utilities.yml")
+          File.join(File.dirname(__FILE__), "utilities.yml")
         ),
         permitted_classes: [Symbol]
       ).freeze

data/lib/primer/deprecations.rb

@@ -15,7 +15,8 @@ module Primer
       "Primer::CounterComponent" => "Primer::Beta::Counter",
       "Primer::DropdownMenuComponent" => nil,
       "Primer::IconButton" => "Primer::Beta::IconButton",
-      "Primer::Tooltip" => "Primer::Alpha::Tooltip"
+      "Primer::Tooltip" => "Primer::Alpha::Tooltip",
+      "Primer::ProgressBarComponent" => "Primer::Beta::ProgressBar"
     }.freeze
 
     def self.deprecated?(name)

data/lib/primer/forms/base.rb

@@ -44,13 +44,17 @@ module Primer
         end
 
         def caption_template?(field_name)
-          fields_with_caption_templates.include?(field_name)
+          fields_with_caption_templates.include?(sanitize_field_name_for_template_path(field_name))
         end
 
         def fields_with_caption_templates
           @fields_with_caption_templates ||= []
         end
 
+        def sanitize_field_name_for_template_path(field_name)
+          field_name.to_s.delete_suffix("?").to_sym
+        end
+
         private
 
         # Unfortunately this bug (https://github.com/ruby/ruby/pull/5646) prevents us from using
@@ -115,8 +119,8 @@ module Primer
         self.class.after_content?(*args)
       end
 
-      def render_caption_template(name)
-        send(:"render_#{name}_caption")
+      def render_caption_template(field_name)
+        send(:"render_#{self.class.sanitize_field_name_for_template_path(field_name)}_caption")
       end
 
       def perform_render(&_block)

data/lib/primer/view_components/version.rb

@@ -6,7 +6,7 @@ module Primer
     module VERSION
       MAJOR = 0
       MINOR = 0
-      PATCH = 108
+      PATCH = 110
 
       STRING = [MAJOR, MINOR, PATCH].join(".")
     end

data/lib/tasks/docs.rake

@@ -44,7 +44,7 @@ namespace :docs do
       Primer::Beta::Avatar,
       Primer::Beta::AvatarStack,
       Primer::Beta::BaseButton,
-      Primer::Beta::Banner,
+      Primer::Alpha::Banner,
       Primer::Beta::Blankslate,
       Primer::Beta::BorderBox,
       Primer::Beta::BorderBox::Header,
@@ -71,7 +71,7 @@ namespace :docs do
       Primer::Navigation::TabComponent,
       Primer::OcticonComponent,
       Primer::PopoverComponent,
-      Primer::ProgressBarComponent,
+      Primer::Beta::ProgressBar,
       Primer::StateComponent,
       Primer::SpinnerComponent,
       Primer::SubheadComponent,
@@ -103,7 +103,7 @@ namespace :docs do
       Primer::LocalTime,
       Primer::Alpha::ImageCrop,
       Primer::Beta::AutoComplete,
-      Primer::Beta::Banner,
+      Primer::Alpha::Banner,
       Primer::ClipboardCopy,
       Primer::TabContainerComponent,
       Primer::TimeAgoComponent,

data/lib/tasks/test.rake

@@ -27,6 +27,14 @@ namespace :test do
     ]
   end
 
+  Rake::TestTask.new(:component_css) do |t|
+    t.warning = false
+    t.libs << "test"
+    t.test_files = FileList[
+      "test/css/**/*_test.rb"
+    ]
+  end
+
   Rake::TestTask.new(:lib) do |t|
     t.warning = false
     t.libs << "test"

data/lib/tasks/utilities.rake

@@ -33,24 +33,8 @@ namespace :utilities do
     BREAKPOINTS = [nil, "sm", "md", "lg", "xl"].freeze
     # rubocop:enable Lint/ConstantDefinitionInBlock
 
-    utility_data =
-      JSON.parse(
-        File.read(
-          File.expand_path(File.join(*%w[.. .. node_modules @primer css dist stats utilities.json]), __dir__)
-        )
-      )["selectors"]["values"]
-
-    custom_utility_data = YAML.load_file(
-      File.join(__dir__, "custom_utilities.yml")
-    )
-
-    layout_data =
-      JSON.parse(
-        File.read(
-          File.expand_path(File.join(*%w[.. .. node_modules @primer css dist stats layout.json]), __dir__)
-        )
-      )["selectors"]["values"]
-
+    utility_data = JSON.parse(File.read("app/lib/primer/css/utilities.css.json"))["selectors"]
+    layout_data = JSON.parse(File.read("app/lib/primer/css/layout.css.json"))["selectors"]
     css_data = utility_data + layout_data
 
     output = {}
@@ -115,6 +99,7 @@ namespace :utilities do
       x.transform_values { |y| y.reverse.drop_while(&:nil?).reverse }
     end
 
+    custom_utility_data = YAML.load_file("lib/tasks/custom_utilities.yml")
     output.merge!(custom_utility_data)
 
     File.open("lib/primer/classify/utilities.yml", "w") do |f|

data/previews/primer/alpha/banner_preview/with_action_button.html.erb

@@ -0,0 +1,4 @@
+<%= render(Primer::Alpha::Banner.new(full: full, dismissible: dismissible, icon: icon, scheme: scheme, reappear: reappear)) do |component| %>
+  <% component.with_action_button(size: :medium) { "Take action" } %>
+  <%= content %>
+<% end %>

data/previews/primer/{beta → alpha}/banner_preview/with_action_content.html.erb

@@ -1,4 +1,4 @@
-<%= render(Primer::Beta::Banner.new(full: full, dismissible: dismissible, icon: icon, scheme: scheme, reappear: reappear)) do |component| %>
+<%= render(Primer::Alpha::Banner.new(full: full, dismissible: dismissible, icon: icon, scheme: scheme, reappear: reappear)) do |component| %>
   <% component.with_action_content do %>
     <%= render(Primer::Beta::IconButton.new(icon: :pencil, mr: 1, "aria-label": "Edit")) %>
   <% end %>

data/previews/primer/alpha/banner_preview.rb

@@ -0,0 +1,97 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    # @label Banner
+    class BannerPreview < ViewComponent::Preview
+      # @label Playground
+      #
+      # @param full toggle
+      # @param full_when_narrow toggle
+      # @param dismissible toggle
+      # @param icon [Symbol] octicon
+      # @param scheme [Symbol] select [default, warning, danger, success]
+      # @param content text
+      # @param description text
+      # @param reappear [Boolean]
+      def playground(full: false, full_when_narrow: false, dismissible: false, icon: :people, scheme: Primer::Alpha::Banner::DEFAULT_SCHEME, reappear: true, content: "This is a banner!", description: nil)
+        icon = nil if icon == :none
+        render(Primer::Alpha::Banner.new(full: full, full_when_narrow: full_when_narrow, dismissible: dismissible, icon: icon == :none ? nil : icon, scheme: scheme, description: description, reappear: reappear)) { content }
+      end
+
+      # @label Default
+      def default
+        render(Primer::Alpha::Banner.new) { "This is a banner." }
+      end
+
+      # @!group Schemes
+      #
+      # @label Default scheme
+      def scheme_default
+        render(Primer::Alpha::Banner.new) { "This is a default banner." }
+      end
+
+      # @label Danger
+      def scheme_danger
+        render(Primer::Alpha::Banner.new(scheme: :danger)) { "This is a danger banner!" }
+      end
+
+      # @label Success
+      def scheme_success
+        render(Primer::Alpha::Banner.new(scheme: :success)) { "This is a success banner!" }
+      end
+
+      # @label Warning
+      def scheme_warning
+        render(Primer::Alpha::Banner.new(scheme: :warning)) { "This is a warning banner!" }
+      end
+      #
+      # @!endgroup
+
+      # @label Dismissable 
+      def dismissable
+        render(Primer::Alpha::Banner.new(dismissable: true, reappear: true)) { "This is a dismissable banner." }
+      end
+
+      # @!group Full Width
+      #
+      # @label Full width
+      def full_width
+        render(Primer::Alpha::Banner.new(full: true)) { "This is a full width banner." }
+      end
+
+      # @label Full width in Narrow Viewport
+      def full_width_in_narrow_viewport
+        render(Primer::Alpha::Banner.new(full: true, full_when_narrow: true)) { "This is a full width banner in a narrow viewport." }
+      end
+      #
+      # @!endgroup
+
+      # @label With action button
+      #
+      # @param full toggle
+      # @param dismissible toggle
+      # @param icon [Symbol] octicon
+      # @param scheme [Symbol] select [default, warning, danger, success]
+      # @param content text
+      # @param reappear [Boolean]
+      def with_action_button(full: false, dismissible: false, icon: :people, scheme: Primer::Alpha::Banner::DEFAULT_SCHEME, reappear: true, content: "This is a banner with an action!")
+        icon = nil if icon == :none
+        render_with_template(locals: { full: full, dismissible: dismissible, icon: icon == :none ? nil : icon, scheme: scheme, content: content, reappear: reappear })
+      end
+
+      # @label With action content
+      #
+      # @param full toggle
+      # @param dismissible toggle
+      # @param icon [Symbol] octicon
+      # @param scheme [Symbol] select [default, warning, danger, success]
+      # @param content text
+      # @param reappear [Boolean]
+      def with_action_content(full: false, dismissible: false, icon: :people, scheme: Primer::Alpha::Banner::DEFAULT_SCHEME, reappear: true, content: "Did you know? Comments can be edited.")
+        icon = nil if icon == :none
+        render_with_template(locals: { full: full, dismissible: dismissible, icon: icon == :none ? nil : icon, scheme: scheme, content: content, reappear: reappear })
+      end
+    end
+  end
+end

data/previews/primer/alpha/segmented_control_preview.rb

@@ -23,53 +23,139 @@ module Primer
         end
       end
 
-      # @param full_width [Boolean] toggle
-      # @param size select [small, medium, large]
-      def default(full_width: false, size: :medium)
-        render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", full_width: full_width, size: size)) do |c|
+      # @label Default
+      def default
+        render(Primer::Alpha::SegmentedControl.new("aria-label": "File view")) do |c|
           c.with_item(label: "Preview", selected: true)
           c.with_item(label: "Raw")
           c.with_item(label: "Blame")
         end
       end
 
-      # @param hide_labels [Boolean] toggle
-      # @param size select [small, medium, large]
-      def full_width(hide_labels: false, size: :medium)
-        render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", full_width: true, hide_labels: hide_labels, size: size)) do |c|
-          c.with_item(label: "Preview", icon: (hide_labels ? :zap : nil), selected: true)
-          c.with_item(label: "Raw", icon: (hide_labels ? :zap : nil))
-          c.with_item(label: "Blame", icon: (hide_labels ? :zap : nil))
+      # @!group Full width
+      # @label Size small
+      def full_width_small(hide_labels: false, size: :small)
+        render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", full_width: true, size: :small)) do |c|
+          c.with_item(label: "Preview", selected: true)
+          c.with_item(label: "Raw")
+          c.with_item(label: "Blame")
         end
       end
 
-      # @param full_width [Boolean] toggle
-      # @param size select [small, medium, large]
-      def icons_and_text(full_width: false, size: :medium)
-        render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", full_width: full_width, size: size)) do |c|
+      # @label Size medium
+      def full_width_medium(hide_labels: false, size: :medium)
+        render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", full_width: true, size: :medium)) do |c|
+          c.with_item(label: "Preview", selected: true)
+          c.with_item(label: "Raw")
+          c.with_item(label: "Blame")
+        end
+      end
+
+      # @label Size large
+      def full_width_large(hide_labels: false, size: :large)
+        render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", full_width: true, size: :large)) do |c|
+          c.with_item(label: "Preview", selected: true)
+          c.with_item(label: "Raw")
+          c.with_item(label: "Blame")
+        end
+      end
+      # @!endgroup
+
+      # @!group Icons and text
+      # @label Size small
+      def icons_and_text_small
+        render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", size: :small)) do |c|
           c.with_item(label: "Preview", icon: :eye, selected: true)
           c.with_item(label: "Raw", icon: :"file-code")
           c.with_item(label: "Blame", icon: :people)
         end
       end
 
-      # @param full_width [Boolean] toggle
-      # @param size select [small, medium, large]
-      def icons_only(full_width: false, size: :medium)
-        render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", full_width: full_width, hide_labels: true, size: size)) do |c|
+      # @label Size medium
+      def icons_and_text_medium
+        render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", size: :medium)) do |c|
+          c.with_item(label: "Preview", icon: :eye, selected: true)
+          c.with_item(label: "Raw", icon: :"file-code")
+          c.with_item(label: "Blame", icon: :people)
+        end
+      end
+
+      # @label Size large
+      def icons_and_text_large
+        render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", size: :large)) do |c|
+          c.with_item(label: "Preview", icon: :eye, selected: true)
+          c.with_item(label: "Raw", icon: :"file-code")
+          c.with_item(label: "Blame", icon: :people)
+        end
+      end
+      # @!endgroup
+
+      # @!group Icons only
+      # @label Size small
+      def icon_only_small
+        render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: true, size: :small)) do |c|
+          c.with_item(label: "Preview", icon: :eye, selected: true)
+          c.with_item(label: "Raw", icon: :"file-code")
+          c.with_item(label: "Blame", icon: :people)
+        end
+      end
+
+      # @label Size medium
+      def icon_only_medium
+        render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: true, size: :medium)) do |c|
+          c.with_item(label: "Preview", icon: :eye, selected: true)
+          c.with_item(label: "Raw", icon: :"file-code")
+          c.with_item(label: "Blame", icon: :people)
+        end
+      end
+
+      # @label Size large
+      def icon_only_large
+        render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: true, size: :large)) do |c|
+          c.with_item(label: "Preview", icon: :eye, selected: true)
+          c.with_item(label: "Raw", icon: :"file-code")
+          c.with_item(label: "Blame", icon: :people)
+        end
+      end
+
+      # @label Full width, size small
+      def icon_only_full_width_small
+        render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: true, full_width: true, size: :small)) do |c|
+          c.with_item(label: "Preview", icon: :eye, selected: true)
+          c.with_item(label: "Raw", icon: :"file-code")
+          c.with_item(label: "Blame", icon: :people)
+        end
+      end
+
+      # @label Full width, size medium
+      def icon_only_full_width_medium
+        render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: true, full_width: true, size: :medium)) do |c|
+          c.with_item(label: "Preview", icon: :eye, selected: true)
+          c.with_item(label: "Raw", icon: :"file-code")
+          c.with_item(label: "Blame", icon: :people)
+        end
+      end
+
+      # @label Full width, size large
+      def icon_only_full_width_large
+        render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: true, full_width: true, size: :large)) do |c|
           c.with_item(label: "Preview", icon: :eye, selected: true)
           c.with_item(label: "Raw", icon: :"file-code")
           c.with_item(label: "Blame", icon: :people)
         end
       end
+      # @!endgroup
 
-      def with_links_as_tags
+      # NOTE: this preview uses a group to force it's display below the other groups
+      # @!group With link as tag
+      def with_link_as_tag
         render(Primer::Alpha::SegmentedControl.new) do |c|
           c.with_item(tag: :a, href: "#", label: "Preview", icon: :eye, selected: true)
           c.with_item(tag: :a, href: "#", label: "Raw", icon: :"file-code")
           c.with_item(tag: :a, href: "#", label: "Blame", icon: :people)
         end
       end
+      # @!endgroup
     end
   end
 end

data/previews/primer/beta/counter_preview.rb

@@ -16,20 +16,67 @@ module Primer
       end
 
       # @label Default Options
-      #
-      # @param count number
-      # @param limit number
-      # @param hide_if_zero toggle
-      # @param round toggle
-      # @param scheme [Symbol] select [[Default, default], [Primary, primary], [Secondary, secondary]]]
-      def default(count: 1_000, limit: nil, round: false, hide_if_zero: false, scheme: :default)
-        render(Primer::Beta::Counter.new(count: count, round: round, limit: limit, hide_if_zero: hide_if_zero, scheme: scheme))
+      def default
+        render(Primer::Beta::Counter.new(count: 1_000))
       end
 
       # @label With Text
       def with_text
         render(Primer::Beta::Counter.new(text: "∞"))
       end
+
+      # @!group Color Schemes
+      #
+      # @label Default
+      def color_scheme_default
+        render(Primer::Beta::Counter.new(count: 1_000))
+      end
+
+      # @label Primary
+      def color_scheme_primary
+        render(Primer::Beta::Counter.new(count: 1_000, scheme: :primary))
+      end
+
+      # @label Secondary
+      def color_scheme_secondary
+        render(Primer::Beta::Counter.new(count: 1_000, scheme: :secondary))
+      end
+      #
+      # @!endgroup
+
+      # @!group Rounded Number
+      #
+      # @label Default (No Rounding)
+      def rounding_default
+        render(Primer::Beta::Counter.new(count: 1_234))
+      end
+
+      # @label Rounded Above 1,000
+      def rounding_above_1000
+        render(Primer::Beta::Counter.new(count: 1_234, round: true))
+      end
+
+      # @label Rounded Below 1,000
+      def rounding_below_1000
+        render(Primer::Beta::Counter.new(count: 999, round: true))
+      end
+
+      # @label Rounded Large Numbers w/ Default Limit
+      def rounding_large_number
+        render(Primer::Beta::Counter.new(count: 4_567_890, round: true))
+      end
+
+      # @label Rounded Large Numbers, Less Than Custom Limit
+      def rounding_large_number_less_than_custom_limit
+        render(Primer::Beta::Counter.new(count: 4_567_890, limit: 1_000_000_000, round: true))
+      end
+
+      # @label Rounded Large Numbers, Greater Than Custom Limit
+      def rounding_large_number_greater_than_custom_limit
+        render(Primer::Beta::Counter.new(count: 4_567_890, limit: 1_000_000, round: true))
+      end
+      #
+      # @!endgroup
     end
   end
 end

data/previews/primer/beta/progress_bar_preview.rb

@@ -0,0 +1,60 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # @label ProgressBar
+    class ProgressBarPreview < ViewComponent::Preview
+      # @label Playground
+      #
+      # @param size [Symbol] select [default, small, large]
+      def playground(size: :default)
+        render(Primer::Beta::ProgressBar.new(size: size)) do |component|
+          component.with_item(percentage: 10)
+          component.with_item(bg: :accent_emphasis, percentage: 20)
+          component.with_item(bg: :danger_emphasis, percentage: 30)
+        end
+      end
+
+      # @label Default
+      #
+      # @param size [Symbol] select [default, small, large]
+      def default(size: :default)
+        render(Primer::Beta::ProgressBar.new(size: size)) do |component|
+          component.with_item(percentage: 10)
+          component.with_item(bg: :accent_emphasis, percentage: 20)
+          component.with_item(bg: :danger_emphasis, percentage: 30)
+        end
+      end
+
+      # @!group Sizes
+      #
+      # @label Size small
+      def size_small
+        render(Primer::Beta::ProgressBar.new(size: :small)) do |component|
+          component.with_item(percentage: 10)
+          component.with_item(bg: :accent_emphasis, percentage: 20)
+          component.with_item(bg: :danger_emphasis, percentage: 30)
+        end
+      end
+
+      # @label Size default
+      def size_default
+        render(Primer::Beta::ProgressBar.new(size: :default)) do |component|
+          component.with_item(percentage: 10)
+          component.with_item(bg: :accent_emphasis, percentage: 20)
+          component.with_item(bg: :danger_emphasis, percentage: 30)
+        end
+      end
+
+      # @label Size large
+      def size_large
+        render(Primer::Beta::ProgressBar.new(size: :large)) do |component|
+          component.with_item(percentage: 10)
+          component.with_item(bg: :accent_emphasis, percentage: 20)
+          component.with_item(bg: :danger_emphasis, percentage: 30)
+        end
+      end
+      # @!endgroup
+    end
+  end
+end

data/previews/primer/forms/forms_preview/name_with_question_mark_form.html.erb

@@ -0,0 +1,3 @@
+<%= primer_form_with(url: "/foo") do |f| %>
+  <%= render(NameWithQuestionMarkForm.new(f)) %>
+<% end %>

data/previews/primer/forms/forms_preview.rb

@@ -34,6 +34,8 @@ module Primer
       def invalid_form; end
 
       def multi_input_form; end
+
+      def name_with_question_mark_form; end
     end
   end
 end