@deque/cauldron-styles 6.7.0-canary.b2cf09f3 → 6.7.0-canary.d64ab15b

package/dist/index.css

@@ -128,6 +128,7 @@
   --z-index-top-bar: 25;
   /* ensure this is 1 higher than the top bar z-index */
   --z-index-skip-container: calc(var(--z-index-top-bar) + 1);
+  --z-index-drawer: calc(var(--z-index-top-bar) + 1);
 
   /* radio card */
   --radio-card-width: 255px;
@@ -267,7 +268,6 @@ button,
 
 a {
   color: var(--link-text-color);
-  font-weight: var(--font-weight-medium);
 }
 
 p {
@@ -1238,6 +1238,7 @@ textarea.Field--has-error:focus:hover,
 button.Link {
   cursor: pointer;
   font-size: inherit;
+  font-weight: var(--font-weight-normal);
 }
 
 .Button--primary:focus,
@@ -2026,8 +2027,6 @@ a.IconButton {
 .Link {
   text-decoration: underline;
   color: var(--link-text-color);
-  font-weight: var(--font-weight-medium);
-  display: inline-block;
   padding: var(--space-quarter);
   background: transparent;
   vertical-align: baseline;
@@ -2043,12 +2042,11 @@ a.IconButton {
   outline-offset: 0;
 }
 
-p .Link {
-  margin: 0 2px;
-  display: inline;
-  text-decoration: underline;
-  color: var(--link-text-color);
-  font-weight: var(--font-weight-normal);
+.Link:has(.Icon) {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-half);
+  flex-wrap: wrap;
 }
 
 :root {
@@ -5640,3 +5638,58 @@ button.Accordion__trigger {
   --badge-background-color: var(--impact-badge-minor-background-color);
   --badge-border-color: var(--impact-badge-minor-border-color);
 }
+
+.Drawer {
+  position: fixed;
+  max-height: var(--drawer-height, 100vh);
+  max-width: var(--drawer-height, 100vw);
+  z-index: var(--z-index-drawer);
+  transition: transform ease-in-out 250ms;
+}
+
+.Drawer--top,
+.Drawer--bottom {
+  max-height: var(--drawer-height, auto);
+  min-width: 100%;
+}
+
+.Drawer--left,
+.Drawer--right {
+  max-width: var(--drawer-width, auto);
+  min-height: var(--drawer-height, 100%);
+}
+
+.Drawer--top {
+  top: var(--drawer-top, 0);
+  transform: translateY(-100%);
+}
+
+.Drawer--bottom {
+  bottom: var(--drawer-bottom, 0);
+  transform: translateY(100%);
+}
+
+.Drawer--left {
+  top: var(--drawer-top, 0);
+  transform: translateX(-100%);
+}
+
+.Drawer--right {
+  top: var(--drawer-top, 0);
+  right: 0;
+  transform: translateX(100%);
+}
+
+.Drawer--open:is(.Drawer--top, .Drawer--bottom) {
+  transform: translateX(0);
+}
+
+.Drawer--open:is(.Drawer--left, .Drawer--right) {
+  transform: translateY(0);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .Drawer {
+    transition: none !important;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deque/cauldron-styles",
-  "version": "6.7.0-canary.b2cf09f3",
+  "version": "6.7.0-canary.d64ab15b",
   "license": "MPL-2.0",
   "description": "deque cauldron pattern library styles",
   "repository": "https://github.com/dequelabs/cauldron",