@primer/view-components 0.45.1-rc.015a120e → 0.45.2

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

@@ -1 +1,161 @@
-.SegmentedControl{--segmentedControl-item-padding:var(--control-small-paddingBlock);--overlay-offset:0.5rem;background-color:var(--controlTrack-bgColor-rest,var(--color-segmented-control-bg));border-color:var(--controlTrack-borderColor-rest,#0000);border-radius:var(--borderRadius-medium);display:inline-flex;list-style:none}.SegmentedControl--iconOnly .Button--iconOnly.Button--medium,.SegmentedControl--iconOnly .Button--iconOnly.Button--small{padding-inline:0!important;width:100%}.SegmentedControl--small{--segmentedControl-item-padding:var(--control-xsmall-paddingBlock)}.SegmentedControl--small .SegmentedControl-item{height:var(--control-small-size)}:is(.SegmentedControl--small .SegmentedControl-item) .Button{padding-inline:calc(var(--control-xsmall-paddingInline-normal) - var(--segmentedControl-item-padding))}.SegmentedControl--small.SegmentedControl--iconOnly .SegmentedControl-item{width:var(--control-small-size)}.SegmentedControl--medium .SegmentedControl-item{height:var(--control-medium-size)}.SegmentedControl--medium.SegmentedControl--iconOnly .SegmentedControl-item{width:var(--control-medium-size)}.SegmentedControl-item{border:var(--borderWidth-thin) solid #0000;border-radius:var(--borderRadius-medium);display:inline-flex;height:var(--control-medium-size);justify-content:center;padding:var(--segmentedControl-item-padding);position:relative}:is(.SegmentedControl-item .Button--invisible):hover:not(:disabled){background-color:var(--controlTrack-bgColor-hover,var(--color-action-list-item-default-hover-bg))}:is(.SegmentedControl-item .Button--invisible):active:not(:disabled){background-color:var(--controlTrack-bgColor-active,var(--color-action-list-item-default-active-bg))}.SegmentedControl-item.SegmentedControl-item--selected{background-color:var(--controlKnob-bgColor-rest,var(--color-segmented-control-button-bg));border-color:var(--controlKnob-borderColor-rest,var(--color-segmented-control-button-selected-border))}.SegmentedControl-item.SegmentedControl-item--selected .Button{font-weight:var(--base-text-weight-semibold)}:is(.SegmentedControl-item.SegmentedControl-item--selected .Button):hover{background-color:initial}.SegmentedControl-item.SegmentedControl-item--selected:before{border-color:#0000!important}.SegmentedControl-item.SegmentedControl-item--selected+.SegmentedControl-item:before{border-color:#0000}.SegmentedControl-item .Button-label[data-content]:before{content:attr(data-content);display:block;font-weight:var(--base-text-weight-semibold);height:0;visibility:hidden}.SegmentedControl-item:not(:first-child):before{border-left:var(--borderWidth-thin) solid var(--borderColor-default);content:"";inset:0 0 0 -1px;margin-bottom:var(--control-medium-paddingBlock);margin-top:var(--control-medium-paddingBlock);position:absolute}.SegmentedControl-item .Button{border:0;border-radius:calc(var(--borderRadius-medium) - var(--segmentedControl-item-padding)/2);font-weight:var(--base-text-weight-normal);height:100%;min-width:fit-content;padding-inline:calc(var(--control-medium-paddingInline-normal) - var(--segmentedControl-item-padding));width:100%}:is(.SegmentedControl-item .Button):focus-visible{border-radius:calc(var(--borderRadius-medium) - var(--segmentedControl-item-padding)/1);outline-offset:calc(var(--segmentedControl-item-padding) - var(--borderWidth-thin))}.SegmentedControl-item .Button--invisible.Button--invisible-noVisuals .Button-label{color:var(--button-default-fgColor-rest)}.SegmentedControl-item .Button-content{align-self:stretch;flex:1 1 auto}.SegmentedControl-item .Button-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.SegmentedControl--fullWidth{display:flex}.SegmentedControl--fullWidth .SegmentedControl-item{flex:1;justify-content:center}
+/* SegmentedControl */
+
+.SegmentedControl {
+  --segmentedControl-item-padding: var(--control-small-paddingBlock);
+  --overlay-offset: 0.5rem;
+
+  display: inline-flex;
+  list-style: none;
+  background-color: var(--controlTrack-bgColor-rest, var(--color-segmented-control-bg));
+  border-color: var(--controlTrack-borderColor-rest, transparent);
+  border-radius: var(--borderRadius-medium);
+}
+
+.SegmentedControl--iconOnly .Button--iconOnly.Button--small,.SegmentedControl--iconOnly .Button--iconOnly.Button--medium {
+    width: 100%;
+    padding-inline: 0 !important;
+  }
+
+/* sizes */
+
+.SegmentedControl--small {
+  --segmentedControl-item-padding: var(--control-xsmall-paddingBlock);
+}
+
+.SegmentedControl--small .SegmentedControl-item {
+    height: var(--control-small-size);
+  }
+
+:is(.SegmentedControl--small .SegmentedControl-item) .Button {
+      /* stylelint-disable-next-line primer/spacing */
+      padding-inline: calc(var(--control-xsmall-paddingInline-normal) - var(--segmentedControl-item-padding));
+    }
+
+.SegmentedControl--small.SegmentedControl--iconOnly .SegmentedControl-item {
+      width: var(--control-small-size);
+    }
+
+.SegmentedControl--medium .SegmentedControl-item {
+    height: var(--control-medium-size);
+  }
+
+.SegmentedControl--medium.SegmentedControl--iconOnly .SegmentedControl-item {
+      width: var(--control-medium-size);
+    }
+
+/* item */
+
+.SegmentedControl-item {
+  position: relative;
+  display: inline-flex;
+  height: var(--control-medium-size);
+  /* stylelint-disable-next-line primer/spacing */
+  padding: var(--segmentedControl-item-padding);
+  border: var(--borderWidth-thin) solid transparent;
+  border-radius: var(--borderRadius-medium);
+  justify-content: center;
+
+  /* button color overrides */
+}
+
+:is(.SegmentedControl-item .Button--invisible):hover:not(:disabled) {
+      background-color: var(--controlTrack-bgColor-hover, var(--color-action-list-item-default-hover-bg));
+    }
+
+:is(.SegmentedControl-item .Button--invisible):active:not(:disabled) {
+      background-color: var(--controlTrack-bgColor-active, var(--color-action-list-item-default-active-bg));
+    }
+
+/* Selected ---------------------------------------- */
+
+.SegmentedControl-item.SegmentedControl-item--selected {
+    background-color: var(--controlKnob-bgColor-rest, var(--color-segmented-control-button-bg));
+    border-color: var(--controlKnob-borderColor-rest, var(--color-segmented-control-button-selected-border));
+  }
+
+.SegmentedControl-item.SegmentedControl-item--selected .Button {
+      font-weight: var(--base-text-weight-semibold);
+    }
+
+:is(.SegmentedControl-item.SegmentedControl-item--selected .Button):hover {
+        background-color: transparent;
+      }
+
+.SegmentedControl-item.SegmentedControl-item--selected::before {
+      border-color: transparent !important;
+    }
+
+.SegmentedControl-item.SegmentedControl-item--selected + .SegmentedControl-item::before {
+      border-color: transparent;
+    }
+
+/* renders a visibly hidden "copy" of the text in bold, reserving box space for when text becomes bold on selected */
+
+.SegmentedControl-item .Button-label[data-content]::before {
+    display: block;
+    height: 0;
+    font-weight: var(--base-text-weight-semibold);
+    visibility: hidden;
+    content: attr(data-content);
+  }
+
+/* Separator lines */
+
+.SegmentedControl-item:not(:first-child)::before {
+      position: absolute;
+      inset: 0 0 0 -1px;
+      /* stylelint-disable-next-line primer/spacing */
+      margin-top: var(--control-medium-paddingBlock);
+      /* stylelint-disable-next-line primer/spacing */
+      margin-bottom: var(--control-medium-paddingBlock);
+      content: '';
+      border-left: var(--borderWidth-thin) solid var(--borderColor-default);
+    }
+
+/* Button ----------------------------------------- */
+
+.SegmentedControl-item .Button {
+    width: 100%;
+    min-width: fit-content;
+    height: 100%;
+    font-weight: var(--base-text-weight-normal);
+    border: 0;
+    /* stylelint-disable-next-line primer/borders */
+    border-radius: calc(var(--borderRadius-medium) - var(--segmentedControl-item-padding) / 2);
+    /* stylelint-disable-next-line primer/spacing */
+    padding-inline: calc(var(--control-medium-paddingInline-normal) - var(--segmentedControl-item-padding));
+  }
+
+:is(.SegmentedControl-item .Button):focus-visible {
+      /* stylelint-disable-next-line primer/borders */
+      border-radius: calc(var(--borderRadius-medium) - var(--segmentedControl-item-padding) / 1);
+      outline-offset: calc(var(--segmentedControl-item-padding) - var(--borderWidth-thin));
+    }
+
+.SegmentedControl-item .Button--invisible.Button--invisible-noVisuals .Button-label {
+    color: var(--button-default-fgColor-rest);
+  }
+
+.SegmentedControl-item .Button-content {
+    flex: 1 1 auto;
+    align-self: stretch;
+  }
+
+/* use ellipsis with the assumption that icon only variant will be used when not enough space is available */
+
+.SegmentedControl-item .Button-label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+/* fullWidth */
+
+.SegmentedControl--fullWidth {
+  display: flex;
+}
+
+.SegmentedControl--fullWidth .SegmentedControl-item {
+    flex: 1;
+    justify-content: center;
+  }

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

@@ -2,8 +2,8 @@
   "name": "alpha/segmented_control",
   "selectors": [
     ".SegmentedControl",
-    ".SegmentedControl--iconOnly .Button--iconOnly.Button--medium",
     ".SegmentedControl--iconOnly .Button--iconOnly.Button--small",
+    ".SegmentedControl--iconOnly .Button--iconOnly.Button--medium",
     ".SegmentedControl--small",
     ".SegmentedControl--small .SegmentedControl-item",
     ":is(.SegmentedControl--small .SegmentedControl-item) .Button",
@@ -16,10 +16,10 @@
     ".SegmentedControl-item.SegmentedControl-item--selected",
     ".SegmentedControl-item.SegmentedControl-item--selected .Button",
     ":is(.SegmentedControl-item.SegmentedControl-item--selected .Button):hover",
-    ".SegmentedControl-item.SegmentedControl-item--selected:before",
-    ".SegmentedControl-item.SegmentedControl-item--selected+.SegmentedControl-item:before",
-    ".SegmentedControl-item .Button-label[data-content]:before",
-    ".SegmentedControl-item:not(:first-child):before",
+    ".SegmentedControl-item.SegmentedControl-item--selected::before",
+    ".SegmentedControl-item.SegmentedControl-item--selected + .SegmentedControl-item::before",
+    ".SegmentedControl-item .Button-label[data-content]::before",
+    ".SegmentedControl-item:not(:first-child)::before",
     ".SegmentedControl-item .Button",
     ":is(.SegmentedControl-item .Button):focus-visible",
     ".SegmentedControl-item .Button--invisible.Button--invisible-noVisuals .Button-label",

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

@@ -1 +1,10 @@
-.SelectPanel-loadingPanel{min-height:min(calc(var(--overlay-height) - 10rem),calc(100vh - 2rem))}.SelectPanel-emptyPanel{align-items:center;display:flex;justify-content:center;min-height:min(calc(var(--overlay-height) - 23rem),calc(100vh - 2rem))}
+.SelectPanel-loadingPanel {
+  min-height: min(calc(var(--overlay-height) - 10rem), calc(100vh - 2rem));
+}
+
+.SelectPanel-emptyPanel {
+  min-height: min(calc(var(--overlay-height) - 23rem), calc(100vh - 2rem));
+  align-items: center;
+  display: flex;
+  justify-content: center;
+}

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

@@ -1 +1,36 @@
-@keyframes shimmer{0%{mask-position:200%}to{mask-position:0}}.SkeletonBox{animation:shimmer;background-color:var(--bgColor-muted);border-radius:var(--borderRadius-small);display:block;height:1rem}@media (prefers-reduced-motion:no-preference){.SkeletonBox{animation:shimmer;animation-duration:1s;animation-iteration-count:infinite;mask-image:linear-gradient(75deg,#000 30%,#000000a6 80%);mask-size:200%}}@media (forced-colors:active){.SkeletonBox{outline:1px solid #0000;outline-offset:-1px}}
+@keyframes shimmer {
+  from {
+    mask-position: 200%;
+  }
+
+  to {
+    mask-position: 0%;
+  }
+}
+
+.SkeletonBox {
+  display: block;
+  height: 1rem;
+  background-color: var(--bgColor-muted);
+  border-radius: var(--borderRadius-small);
+  animation: shimmer;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+
+.SkeletonBox {
+    mask-image: linear-gradient(75deg, #000 30%, rgb(0, 0, 0, 0.65) 80%);
+    mask-size: 200%;
+    animation: shimmer;
+    animation-duration: 1s;
+    animation-iteration-count: infinite;
+}
+  }
+
+@media (forced-colors: active) {
+
+.SkeletonBox {
+    outline: 1px solid transparent;
+    outline-offset: -1px;
+}
+  }

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

@@ -1 +1,255 @@
-.Stack{align-content:flex-start;align-items:stretch;display:flex;flex-flow:column;gap:var(--stack-gap,var(--stack-gap-normal,1rem))}.Stack[data-padding-narrow=none],.Stack[data-padding=none]{padding:0}.Stack[data-padding-narrow=condensed],.Stack[data-padding=condensed]{padding:var(--stack-padding-condensed,8px)}.Stack[data-padding-narrow=normal],.Stack[data-padding=normal]{padding:var(--stack-padding-normal,16px)}.Stack[data-padding-narrow=spacious],.Stack[data-padding=spacious]{padding:var(--stack-padding-spacious,24px)}.Stack[data-direction-narrow=horizontal],.Stack[data-direction=horizontal]{flex-flow:row}.Stack[data-direction-narrow=vertical],.Stack[data-direction=vertical]{flex-flow:column}.Stack[data-gap-narrow=none],.Stack[data-gap=none]{--stack-gap:var(--stack-gap-none,0)}.Stack[data-gap-narrow=condensed],.Stack[data-gap=condensed]{--stack-gap:var(--stack-gap-condensed,0.5rem)}.Stack[data-gap-narrow=normal],.Stack[data-gap=normal]{--stack-gap:var(--stack-gap-normal,1rem)}.Stack[data-gap-narrow=spacious],.Stack[data-gap=spacious]{--stack-gap:var(--stack-gap-spacious,1.5rem)}.Stack[data-align-narrow=start],.Stack[data-align=start]{align-items:flex-start}.Stack[data-align-narrow=center],.Stack[data-align=center]{align-items:center}.Stack[data-align-narrow=end],.Stack[data-align=end]{align-items:flex-end}.Stack[data-align-narrow=baseline],.Stack[data-align=baseline]{align-items:baseline}.Stack[data-justify-narrow=start],.Stack[data-justify=start]{justify-content:flex-start}.Stack[data-justify-narrow=center],.Stack[data-justify=center]{justify-content:center}.Stack[data-justify-narrow=end],.Stack[data-justify=end]{justify-content:flex-end}.Stack[data-justify-narrow=space-between],.Stack[data-justify=space-between]{justify-content:space-between}.Stack[data-justify-narrow=space-evenly],.Stack[data-justify=space-evenly]{justify-content:space-evenly}.Stack[data-wrap-narrow=wrap],.Stack[data-wrap=wrap]{flex-wrap:wrap}.Stack[data-wrap-narrow=nowrap],.Stack[data-wrap=nowrap]{flex-wrap:nowrap}@media (min-width:48rem){.Stack[data-padding-regular=none]{padding:0}.Stack[data-padding-regular=condensed]{padding:var(--stack-padding-condensed,8px)}.Stack[data-padding-regular=normal]{padding:var(--stack-padding-normal,16px)}.Stack[data-padding-regular=spacious]{padding:var(--stack-padding-spacious,24px)}.Stack[data-direction-regular=horizontal]{flex-flow:row}.Stack[data-direction-regular=vertical]{flex-flow:column}.Stack[data-gap-regular=none]{--stack-gap:var(--stack-gap-none,0)}.Stack[data-gap-regular=condensed]{--stack-gap:var(--stack-gap-condensed,0.5rem)}.Stack[data-gap-regular=normal]{--stack-gap:var(--stack-gap-normal,1rem)}.Stack[data-gap-regular=spacious]{--stack-gap:var(--stack-gap-spacious,1.5rem)}.Stack[data-align-regular=start]{align-items:flex-start}.Stack[data-align-regular=center]{align-items:center}.Stack[data-align-regular=end]{align-items:flex-end}.Stack[data-align-regular=baseline]{align-items:baseline}.Stack[data-justify-regular=start]{justify-content:flex-start}.Stack[data-justify-regular=center]{justify-content:center}.Stack[data-justify-regular=end]{justify-content:flex-end}.Stack[data-justify-regular=space-between]{justify-content:space-between}.Stack[data-justify-regular=space-evenly]{justify-content:space-evenly}.Stack[data-wrap-regular=wrap]{flex-wrap:wrap}.Stack[data-wrap-regular=nowrap]{flex-wrap:nowrap}}@media (min-width:87.5rem){.Stack[data-padding-wide=none]{padding:0}.Stack[data-padding-wide=condensed]{padding:var(--stack-padding-condensed,8px)}.Stack[data-padding-wide=normal]{padding:var(--stack-padding-normal,16px)}.Stack[data-padding-wide=spacious]{padding:var(--stack-padding-spacious,24px)}.Stack[data-direction-wide=horizontal]{flex-flow:row}.Stack[data-direction-wide=vertical]{flex-flow:column}.Stack[data-gap-wide=none]{--stack-gap:var(--stack-gap-none,0)}.Stack[data-gap-wide=condensed]{--stack-gap:var(--stack-gap-condensed,0.5rem)}.Stack[data-gap-wide=normal]{--stack-gap:var(--stack-gap-normal,1rem)}.Stack[data-gap-wide=spacious]{--stack-gap:var(--stack-gap-spacious,1.5rem)}.Stack[data-align-wide=start]{align-items:flex-start}.Stack[data-align-wide=center]{align-items:center}.Stack[data-align-wide=end]{align-items:flex-end}.Stack[data-align-wide=baseline]{align-items:baseline}.Stack[data-justify-wide=start]{justify-content:flex-start}.Stack[data-justify-wide=center]{justify-content:center}.Stack[data-justify-wide=end]{justify-content:flex-end}.Stack[data-justify-wide=space-between]{justify-content:space-between}.Stack[data-justify-wide=space-evenly]{justify-content:space-evenly}.Stack[data-wrap-wide=wrap]{flex-wrap:wrap}.Stack[data-wrap-wide=nowrap]{flex-wrap:nowrap}}
+.Stack {
+  display: flex;
+  flex-flow: column;
+  align-items: stretch;
+  align-content: flex-start;
+  gap: var(--stack-gap, var(--stack-gap-normal, 1rem));
+
+  /* non-responsive values */
+}
+.Stack[data-padding='none'],.Stack[data-padding-narrow='none'] {
+    padding: 0;
+  }
+.Stack[data-padding='condensed'],.Stack[data-padding-narrow='condensed'] {
+    /* stylelint-disable-next-line primer/spacing */
+    padding: var(--stack-padding-condensed, 8px);
+  }
+.Stack[data-padding='normal'],.Stack[data-padding-narrow='normal'] {
+    /* stylelint-disable-next-line primer/spacing */
+    padding: var(--stack-padding-normal, 16px);
+  }
+.Stack[data-padding='spacious'],.Stack[data-padding-narrow='spacious'] {
+    /* stylelint-disable-next-line primer/spacing */
+    padding: var(--stack-padding-spacious, 24px);
+  }
+.Stack[data-direction='horizontal'],.Stack[data-direction-narrow='horizontal'] {
+    flex-flow: row;
+  }
+.Stack[data-direction='vertical'],.Stack[data-direction-narrow='vertical'] {
+    flex-flow: column;
+  }
+.Stack[data-gap='none'],.Stack[data-gap-narrow='none'] {
+    --stack-gap: var(--stack-gap-none, 0);
+  }
+.Stack[data-gap='condensed'],.Stack[data-gap-narrow='condensed'] {
+    --stack-gap: var(--stack-gap-condensed, 0.5rem);
+  }
+.Stack[data-gap='normal'],.Stack[data-gap-narrow='normal'] {
+    --stack-gap: var(--stack-gap-normal, 1rem);
+  }
+.Stack[data-gap='spacious'],.Stack[data-gap-narrow='spacious'] {
+    --stack-gap: var(--stack-gap-spacious, 1.5rem);
+  }
+.Stack[data-align='start'],.Stack[data-align-narrow='start'] {
+    align-items: flex-start;
+  }
+.Stack[data-align='center'],.Stack[data-align-narrow='center'] {
+    align-items: center;
+  }
+.Stack[data-align='end'],.Stack[data-align-narrow='end'] {
+    align-items: flex-end;
+  }
+.Stack[data-align='baseline'],.Stack[data-align-narrow='baseline'] {
+    align-items: baseline;
+  }
+.Stack[data-justify='start'],.Stack[data-justify-narrow='start'] {
+    justify-content: flex-start;
+  }
+.Stack[data-justify='center'],.Stack[data-justify-narrow='center'] {
+    justify-content: center;
+  }
+.Stack[data-justify='end'],.Stack[data-justify-narrow='end'] {
+    justify-content: flex-end;
+  }
+.Stack[data-justify='space-between'],.Stack[data-justify-narrow='space-between'] {
+    justify-content: space-between;
+  }
+.Stack[data-justify='space-evenly'],.Stack[data-justify-narrow='space-evenly'] {
+    justify-content: space-evenly;
+  }
+.Stack[data-wrap='wrap'],.Stack[data-wrap-narrow='wrap'] {
+    flex-wrap: wrap;
+  }
+.Stack[data-wrap='nowrap'],.Stack[data-wrap-narrow='nowrap'] {
+    flex-wrap: nowrap;
+  }
+
+/* @custom-media --veiwportRange-regular */
+@media (min-width: 48rem) {
+    .Stack[data-padding-regular='none'] {
+      padding: 0;
+    }
+
+    .Stack[data-padding-regular='condensed'] {
+      /* stylelint-disable-next-line primer/spacing */
+      padding: var(--stack-padding-condensed, 8px);
+    }
+
+    .Stack[data-padding-regular='normal'] {
+      /* stylelint-disable-next-line primer/spacing */
+      padding: var(--stack-padding-normal, 16px);
+    }
+
+    .Stack[data-padding-regular='spacious'] {
+      /* stylelint-disable-next-line primer/spacing */
+      padding: var(--stack-padding-spacious, 24px);
+    }
+
+    .Stack[data-direction-regular='horizontal'] {
+      flex-flow: row;
+    }
+
+    .Stack[data-direction-regular='vertical'] {
+      flex-flow: column;
+    }
+
+    .Stack[data-gap-regular='none'] {
+      --stack-gap: var(--stack-gap-none, 0);
+    }
+
+    .Stack[data-gap-regular='condensed'] {
+      --stack-gap: var(--stack-gap-condensed, 0.5rem);
+    }
+
+    .Stack[data-gap-regular='normal'] {
+      --stack-gap: var(--stack-gap-normal, 1rem);
+    }
+
+    .Stack[data-gap-regular='spacious'] {
+      --stack-gap: var(--stack-gap-spacious, 1.5rem);
+    }
+
+    .Stack[data-align-regular='start'] {
+      align-items: flex-start;
+    }
+
+    .Stack[data-align-regular='center'] {
+      align-items: center;
+    }
+
+    .Stack[data-align-regular='end'] {
+      align-items: flex-end;
+    }
+
+    .Stack[data-align-regular='baseline'] {
+      align-items: baseline;
+    }
+
+    .Stack[data-justify-regular='start'] {
+      justify-content: flex-start;
+    }
+
+    .Stack[data-justify-regular='center'] {
+      justify-content: center;
+    }
+
+    .Stack[data-justify-regular='end'] {
+      justify-content: flex-end;
+    }
+
+    .Stack[data-justify-regular='space-between'] {
+      justify-content: space-between;
+    }
+
+    .Stack[data-justify-regular='space-evenly'] {
+      justify-content: space-evenly;
+    }
+
+    .Stack[data-wrap-regular='wrap'] {
+      flex-wrap: wrap;
+    }
+
+    .Stack[data-wrap-regular='nowrap'] {
+      flex-wrap: nowrap;
+    }
+  }
+
+/* @custom-media --viewportRange-wide */
+@media (min-width: 87.5rem) {
+    .Stack[data-padding-wide='none'] {
+      padding: 0;
+    }
+
+    .Stack[data-padding-wide='condensed'] {
+      /* stylelint-disable-next-line primer/spacing */
+      padding: var(--stack-padding-condensed, 8px);
+    }
+
+    .Stack[data-padding-wide='normal'] {
+      /* stylelint-disable-next-line primer/spacing */
+      padding: var(--stack-padding-normal, 16px);
+    }
+
+    .Stack[data-padding-wide='spacious'] {
+      /* stylelint-disable-next-line primer/spacing */
+      padding: var(--stack-padding-spacious, 24px);
+    }
+
+    .Stack[data-direction-wide='horizontal'] {
+      flex-flow: row;
+    }
+
+    .Stack[data-direction-wide='vertical'] {
+      flex-flow: column;
+    }
+
+    .Stack[data-gap-wide='none'] {
+      --stack-gap: var(--stack-gap-none, 0);
+    }
+
+    .Stack[data-gap-wide='condensed'] {
+      --stack-gap: var(--stack-gap-condensed, 0.5rem);
+    }
+
+    .Stack[data-gap-wide='normal'] {
+      --stack-gap: var(--stack-gap-normal, 1rem);
+    }
+
+    .Stack[data-gap-wide='spacious'] {
+      --stack-gap: var(--stack-gap-spacious, 1.5rem);
+    }
+
+    .Stack[data-align-wide='start'] {
+      align-items: flex-start;
+    }
+
+    .Stack[data-align-wide='center'] {
+      align-items: center;
+    }
+
+    .Stack[data-align-wide='end'] {
+      align-items: flex-end;
+    }
+
+    .Stack[data-align-wide='baseline'] {
+      align-items: baseline;
+    }
+
+    .Stack[data-justify-wide='start'] {
+      justify-content: flex-start;
+    }
+
+    .Stack[data-justify-wide='center'] {
+      justify-content: center;
+    }
+
+    .Stack[data-justify-wide='end'] {
+      justify-content: flex-end;
+    }
+
+    .Stack[data-justify-wide='space-between'] {
+      justify-content: space-between;
+    }
+
+    .Stack[data-justify-wide='space-evenly'] {
+      justify-content: space-evenly;
+    }
+
+    .Stack[data-wrap-wide='wrap'] {
+      flex-wrap: wrap;
+    }
+
+    .Stack[data-wrap-wide='nowrap'] {
+      flex-wrap: nowrap;
+    }
+  }