@deque/cauldron-styles 7.0.0 → 7.1.0-canary.038917f6

package/dist/index.css

@@ -1,6 +1,6 @@
 /*
  * variable naming convention:
- * --{component name (if applicable)}-{style property}-{...modifiers (if applicable, hypen separated)}
+ * --{component name (if applicable)}-{style property}-{...modifiers (if applicable, hyphen separated)}
  * example: --foo-background-color-light
  */
 
@@ -501,7 +501,7 @@ ul.semantic-only {
   --field-icon-active-color: rgba(60, 122, 174, 0.25);
   --field-icon-error-active-color: rgba(217, 50, 81, 0.25);
   --field-icon-checked-color: var(--accent-primary);
-  --field-icon-checked-disabled-color: var(--accent-primary-dsiabled, #78a6d8);
+  --field-icon-checked-disabled-color: var(--accent-primary-disabled, #78a6d8);
   --field-icon-unchecked-disabled-color: var(--gray-40);
   --field-icon-focus-color: var(--focus-light);
   --field-error-text-color: var(--error);
@@ -2438,8 +2438,7 @@ a.IconButton {
   font-style: normal;
   font-size: var(--text-size-small);
   color: var(--field-content-color);
-  -webkit-text-decoration: rgb(102, 102, 102);
-          text-decoration: rgb(102, 102, 102);
+  text-decoration: rgb(102, 102, 102);
   box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
   -webkit-appearance: none;
      -moz-appearance: none;
@@ -5265,8 +5264,7 @@ button.Accordion__trigger {
   font-size: var(--text-size-small);
   margin-top: var(--space-small);
   color: var(--accordion-trigger-text-color);
-  -webkit-text-decoration: var(--accordion-trigger-text-decoration);
-          text-decoration: var(--accordion-trigger-text-decoration);
+  text-decoration: var(--accordion-trigger-text-decoration);
 }
 
 .Accordion__trigger[aria-expanded='true'] {
@@ -5279,8 +5277,7 @@ button.Accordion__trigger {
   box-shadow: inset 8px 0 0 -4px var(--accordion-trigger-box-shadow-hover);
   color: var(--accordion-trigger-text-color-hover);
   transition: all 0.2s ease-in-out;
-  -webkit-text-decoration: underline solid var(--accordion-trigger-text-color-hover);
-          text-decoration: underline solid var(--accordion-trigger-text-color-hover);
+  text-decoration: underline solid var(--accordion-trigger-text-color-hover);
 }
 
 .Accordion__trigger:hover .Icon {
@@ -6430,6 +6427,76 @@ button.Accordion__trigger {
   color: var(--action-list-item-disabled-text-color);
 }
 
+:root {
+  --tree-view-padding: 1rem;
+  --tree-view-focus-ring-color: var(--focus-light);
+  --tree-view-highlight-background: var(--accent-light);
+}
+
+.cauldron--theme-dark {
+  --tree-view-focus-ring-color: var(--focus-dark);
+  --tree-view-highlight-background: var(--accent-dark);
+}
+
+.TreeView {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-quarter);
+  overflow: auto;
+  padding: var(--space-half);
+  outline: none;
+  box-sizing: border-box;
+}
+
+.TreeView[data-focus-visible] {
+  outline: 2px solid var(--tree-view-focus-ring-color);
+  outline-offset: -1px;
+}
+
+.TreeView .TreeView__item {
+  display: flex;
+  align-items: center;
+  gap: 0.571rem;
+  min-height: 28px;
+  padding: 0.286rem 0.286rem 0.286rem 0.571rem;
+  outline: none;
+  position: relative;
+  transform: translateZ(0);
+}
+
+.TreeView .TreeView__item .TreeView__chevron {
+  all: unset;
+  display: flex;
+  visibility: hidden;
+  align-items: center;
+  justify-content: center;
+  width: 1.3rem;
+  height: 100%;
+  padding-left: calc((var(--tree-item-level) - 1) * var(--tree-view-padding));
+}
+
+.TreeView .TreeView__item .TreeView__chevron svg {
+  transform: rotate(0deg);
+  transition: transform 200ms;
+}
+
+.TreeView .TreeView__item[data-has-child-items] .TreeView__chevron {
+  visibility: visible;
+}
+
+.TreeView .TreeView__item[data-expanded] .TreeView__chevron svg {
+  transform: rotate(90deg);
+}
+
+.TreeView .TreeView__item[data-focus-visible] {
+  outline: 2px solid var(--tree-view-focus-ring-color);
+  outline-offset: -2px;
+}
+
+.TreeView .TreeView__item[aria-selected='true'] {
+  background: var(--tree-view-highlight-background);
+}
+
 /**
  * Compact density preset for constrained viewports.
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deque/cauldron-styles",
-  "version": "7.0.0",
+  "version": "7.1.0-canary.038917f6",
   "license": "MPL-2.0",
   "description": "deque cauldron pattern library styles",
   "repository": "https://github.com/dequelabs/cauldron",
@@ -9,17 +9,17 @@
   "files": [
     "dist/"
   ],
-  "scripts": {
-    "build": "postcss index.css --dir ./dist",
-    "dev": "npm run build -- --watch",
-    "prepublishOnly": "NODE_ENV=production yarn build"
-  },
   "publishConfig": {
     "access": "public"
   },
   "devDependencies": {
-    "autoprefixer": "^9.7.6",
-    "postcss-cli": "^7.1.1",
-    "postcss-import": "^12.0.1"
+    "autoprefixer": "^10.5.0",
+    "postcss": "^8.5.15",
+    "postcss-cli": "^11.0.1",
+    "postcss-import": "^16.1.1"
+  },
+  "scripts": {
+    "build": "postcss index.css --dir ./dist",
+    "dev": "pnpm run build --watch"
   }
-}
+}