@deque/cauldron-styles 6.7.0 → 6.8.0

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,
@@ -1567,6 +1568,7 @@ button.Link {
   --icon-button-background-color-error-disabled: var(
     --button-background-color-error-disabled
   );
+  --icon-button-icon-size: var(--icon-size);
 }
 
 .IconButton {
@@ -1593,8 +1595,8 @@ a.IconButton {
 }
 
 .IconButton .Icon {
-  height: var(--space-small);
-  width: var(--space-small);
+  height: calc(var(--icon-button-icon-size) - 8px);
+  width: calc(var(--icon-button-icon-size) - 8px);
   pointer-events: none;
 }
 
@@ -1623,6 +1625,11 @@ a.IconButton {
   width: var(--icon-button-large-height);
 }
 
+.IconButton--large .Icon {
+  height: var(--icon-button-icon-size);
+  width: var(--icon-button-icon-size);
+}
+
 .IconButton--secondary:is([aria-disabled='true'], [disabled]),
 .IconButton--secondary:is([aria-disabled='true'], [disabled]):active {
   color: var(--icon-button-text-color-disabled);
@@ -2020,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;
@@ -2037,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 {
@@ -5634,3 +5638,92 @@ 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;
+  }
+}
+
+:root {
+  --bottom-sheet-width: 40rem;
+  --bottom-sheet-background-color: #fff;
+}
+
+.cauldron--theme-dark {
+  --bottom-sheet-background-color: var(--accent-medium);
+  --bottom-sheet-text-color: #fff;
+}
+
+.BottomSheet {
+  max-width: var(--bottom-sheet-width);
+  color: var(--bottom-sheet-text-color);
+  background-color: var(--bottom-sheet-background-color);
+  margin: 0 auto;
+  border-top-left-radius: var(--space-small);
+  border-top-right-radius: var(--space-small);
+  padding: var(--space-large) var(--space-small);
+}
+
+.BottomSheet__title {
+  font-weight: var(--font-weight-medium);
+}
+
+.BottomSheet__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-small);
+  border-bottom: 1px solid var(--gray-30);
+  padding-bottom: var(--space-small);
+  margin-bottom: var(--space-small);
+}

package/package.json

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