@workday/canvas-kit-preview-css 14.0.0-alpha.1127-next.0 → 14.0.0-alpha.1129-next.0

package/loading-sparkles.css

@@ -1,4 +1,4 @@
-@keyframes animation-ppux3 {
+@keyframes animation-tc0w3 {
   0%, 79%, 100% {
     opacity: 0.2;
     transform: scale(0.55);
@@ -26,7 +26,7 @@
   animation-duration: 1230ms;
   animation-fill-mode: both;
   animation-iteration-count: infinite;
-  animation-name: animation-ppux3;
+  animation-name: animation-tc0w3;
   animation-timing-function: ease-in-out;
   --cnvs-system-icon-color: var(--cnvs-base-extended-palette-dragon-fruit-400);
 }

package/multi-select.css

@@ -1,4 +1,4 @@
-.cnvs-preview-multi-select {
+.cnvs-preview-multi-select-input {
   box-sizing: border-box;
   border: 1px solid var(--cnvs-sys-color-border-input-default);
   display: flex;
@@ -8,18 +8,19 @@
   min-height: var(--cnvs-sys-space-x10);
   transition: 0.2s box-shadow,0.2s border-color;
   margin: 0;
+  --cnvs-text-input-width: 100%;
 }
 
-.cnvs-preview-multi-select:hover, .cnvs-preview-multi-select.hover {
+.cnvs-preview-multi-select-input:hover, .cnvs-preview-multi-select-input.hover {
   border-color: var(--cnvs-sys-color-border-input-strong);
 }
 
-.cnvs-preview-multi-select:focus-within {
+.cnvs-preview-multi-select-input:has(:focus-visible:not([disabled])), .cnvs-preview-multi-select-input.focus {
   border-color: var(--cnvs-sys-color-border-primary-default);
   box-shadow: inset 0 0 0 1px var(--cnvs-sys-color-border-primary-default);
 }
 
-.cnvs-preview-multi-select [data-part="user-input"] {
+.cnvs-preview-multi-select-input [data-part="user-input"] {
   font-family: var(--cnvs-sys-font-family-default);
   font-weight: var(--cnvs-sys-font-weight-normal);
   line-height: var(--cnvs-sys-line-height-subtext-large);
@@ -32,21 +33,25 @@
   outline-width: 0px;
 }
 
-.cnvs-preview-multi-select [data-part="user-input"]:where(:not([aria-autocomplete])) {
+.cnvs-preview-multi-select-input [data-part="user-input"]:where([data-part="user-input"], [data-part="form-input"]) {
+  height: calc(var(--cnvs-sys-space-x10) - 0.125rem);
+}
+
+.cnvs-preview-multi-select-input [data-part="user-input"]:where(:not([aria-autocomplete])) {
   caret-color: transparent;
   cursor: default;
 }
 
-.cnvs-preview-multi-select [data-part="user-input"]:where(:not([aria-autocomplete]))::selection {
+.cnvs-preview-multi-select-input [data-part="user-input"]:where(:not([aria-autocomplete]))::selection {
   background-color: transparent;
 }
 
-.cnvs-preview-multi-select:has(:disabled, .disabled) {
+.cnvs-preview-multi-select-input:has(:disabled, .disabled) {
   border-color: var(--cnvs-sys-color-border-input-disabled);
   color: var(--cnvs-sys-color-text-disabled);
 }
 
-.cnvs-preview-multi-select :where([data-part="form-input"]) {
+.cnvs-preview-multi-select-input :where([data-part="form-input"]) {
   position: absolute;
   top: var(--cnvs-sys-space-zero);
   bottom: var(--cnvs-sys-space-zero);
@@ -57,16 +62,46 @@
   pointer-events: none;
 }
 
-.cnvs-preview-multi-select :where([data-part="separator"]) {
+.cnvs-preview-multi-select-input :where([data-part="separator"]) {
   background-color: var(--cnvs-sys-color-border-divider);
   height: 1px;
   margin: var(--cnvs-sys-space-zero) var(--cnvs-sys-space-x2);
 }
 
-.cnvs-preview-multi-select :where([data-part="list"]) {
+.cnvs-preview-multi-select-input :where([data-part="list"]) {
   display: flex;
   gap: var(--cnvs-sys-space-x2);
   padding: var(--cnvs-sys-space-x2);
   flex-wrap: wrap;
 }
 
+
+.cnvs-preview-multi-select-input.error-error {
+  border-color: var(--cnvs-brand-error-base);
+  box-shadow: inset 0 0 0 0.0625rem var(--cnvs-brand-error-base);
+}
+
+.cnvs-preview-multi-select-input.error-error:has(:hover, :disabled, :focus-visible), .cnvs-preview-multi-select-input.error-error:is(.hover, .disabled, .focus) {
+  border-color: var(--cnvs-brand-error-base);
+}
+
+.cnvs-preview-multi-select-input.error-error:has(:focus-visible:not([disabled])), .cnvs-preview-multi-select-input.error-error.focus {
+  box-shadow: inset 0 0 0 0.0625rem var(--cnvs-brand-error-base),0 0 0 2px var(--cnvs-sys-color-border-inverse),0 0 0 4px var(--cnvs-brand-common-focus-outline);
+  outline-offset: 0.125rem;
+}
+
+
+.cnvs-preview-multi-select-input.error-alert {
+  border-color: var(--cnvs-brand-alert-darkest);
+  box-shadow: inset 0 0 0 0.125rem var(--cnvs-brand-alert-base);
+  outline-offset: 0.125rem;
+}
+
+.cnvs-preview-multi-select-input.error-alert:has(:hover, .hover, :disabled, .disabled, :focus-visible:not([disabled])), .focus:not(:has([disabled])) {
+  border-color: var(--cnvs-brand-alert-darkest);
+}
+
+.cnvs-preview-multi-select-input.error-alert:has(:focus-visible, .focus):not(:has([disabled])) {
+  box-shadow: inset 0 0 0 0.125rem var(--cnvs-brand-alert-base),0 0 0 2px var(--cnvs-sys-color-border-inverse),0 0 0 4px var(--cnvs-brand-common-focus-outline);
+}
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-preview-css",
-  "version": "14.0.0-alpha.1127-next.0",
+  "version": "14.0.0-alpha.1129-next.0",
   "description": "The parent module that contains all Workday Canvas Kit Preview CSS components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -25,5 +25,5 @@
     "components",
     "workday"
   ],
-  "gitHead": "3067be6c028bb5eee066f8dc3ef82a5788b3fa98"
+  "gitHead": "27f7b4b0b968875921295a1640e043018e8a0716"
 }