@deque/cauldron-styles 5.8.1 → 5.9.0-canary.2544e36f

package/LICENSE

@@ -0,0 +1,362 @@
+Mozilla Public License, version 2.0
+
+1. Definitions
+
+1.1. "Contributor"
+
+     means each individual or legal entity that creates, contributes to the
+     creation of, or owns Covered Software.
+
+1.2. "Contributor Version"
+
+     means the combination of the Contributions of others (if any) used by a
+     Contributor and that particular Contributor's Contribution.
+
+1.3. "Contribution"
+
+     means Covered Software of a particular Contributor.
+
+1.4. "Covered Software"
+
+     means Source Code Form to which the initial Contributor has attached the
+     notice in Exhibit A, the Executable Form of such Source Code Form, and
+     Modifications of such Source Code Form, in each case including portions
+     thereof.
+
+1.5. "Incompatible With Secondary Licenses"
+     means
+
+     a. that the initial Contributor has attached the notice described in
+        Exhibit B to the Covered Software; or
+
+     b. that the Covered Software was made available under the terms of
+        version 1.1 or earlier of the License, but not also under the terms of
+        a Secondary License.
+
+1.6. "Executable Form"
+
+     means any form of the work other than Source Code Form.
+
+1.7. "Larger Work"
+
+     means a work that combines Covered Software with other material, in a
+     separate file or files, that is not Covered Software.
+
+1.8. "License"
+
+     means this document.
+
+1.9. "Licensable"
+
+     means having the right to grant, to the maximum extent possible, whether
+     at the time of the initial grant or subsequently, any and all of the
+     rights conveyed by this License.
+
+1.10. "Modifications"
+
+     means any of the following:
+
+     a. any file in Source Code Form that results from an addition to,
+        deletion from, or modification of the contents of Covered Software; or
+
+     b. any new file in Source Code Form that contains any Covered Software.
+
+1.11. "Patent Claims" of a Contributor
+
+      means any patent claim(s), including without limitation, method,
+      process, and apparatus claims, in any patent Licensable by such
+      Contributor that would be infringed, but for the grant of the License,
+      by the making, using, selling, offering for sale, having made, import,
+      or transfer of either its Contributions or its Contributor Version.
+
+1.12. "Secondary License"
+
+      means either the GNU General Public License, Version 2.0, the GNU Lesser
+      General Public License, Version 2.1, the GNU Affero General Public
+      License, Version 3.0, or any later versions of those licenses.
+
+1.13. "Source Code Form"
+
+      means the form of the work preferred for making modifications.
+
+1.14. "You" (or "Your")
+
+      means an individual or a legal entity exercising rights under this
+      License. For legal entities, "You" includes any entity that controls, is
+      controlled by, or is under common control with You. For purposes of this
+      definition, "control" means (a) the power, direct or indirect, to cause
+      the direction or management of such entity, whether by contract or
+      otherwise, or (b) ownership of more than fifty percent (50%) of the
+      outstanding shares or beneficial ownership of such entity.
+
+
+2. License Grants and Conditions
+
+2.1. Grants
+
+     Each Contributor hereby grants You a world-wide, royalty-free,
+     non-exclusive license:
+
+     a. under intellectual property rights (other than patent or trademark)
+        Licensable by such Contributor to use, reproduce, make available,
+        modify, display, perform, distribute, and otherwise exploit its
+        Contributions, either on an unmodified basis, with Modifications, or
+        as part of a Larger Work; and
+
+     b. under Patent Claims of such Contributor to make, use, sell, offer for
+        sale, have made, import, and otherwise transfer either its
+        Contributions or its Contributor Version.
+
+2.2. Effective Date
+
+     The licenses granted in Section 2.1 with respect to any Contribution
+     become effective for each Contribution on the date the Contributor first
+     distributes such Contribution.
+
+2.3. Limitations on Grant Scope
+
+     The licenses granted in this Section 2 are the only rights granted under
+     this License. No additional rights or licenses will be implied from the
+     distribution or licensing of Covered Software under this License.
+     Notwithstanding Section 2.1(b) above, no patent license is granted by a
+     Contributor:
+
+     a. for any code that a Contributor has removed from Covered Software; or
+
+     b. for infringements caused by: (i) Your and any other third party's
+        modifications of Covered Software, or (ii) the combination of its
+        Contributions with other software (except as part of its Contributor
+        Version); or
+
+     c. under Patent Claims infringed by Covered Software in the absence of
+        its Contributions.
+
+     This License does not grant any rights in the trademarks, service marks,
+     or logos of any Contributor (except as may be necessary to comply with
+     the notice requirements in Section 3.4).
+
+2.4. Subsequent Licenses
+
+     No Contributor makes additional grants as a result of Your choice to
+     distribute the Covered Software under a subsequent version of this
+     License (see Section 10.2) or under the terms of a Secondary License (if
+     permitted under the terms of Section 3.3).
+
+2.5. Representation
+
+     Each Contributor represents that the Contributor believes its
+     Contributions are its original creation(s) or it has sufficient rights to
+     grant the rights to its Contributions conveyed by this License.
+
+2.6. Fair Use
+
+     This License is not intended to limit any rights You have under
+     applicable copyright doctrines of fair use, fair dealing, or other
+     equivalents.
+
+2.7. Conditions
+
+     Sections 3.1, 3.2, 3.3, and 3.4 are conditions of the licenses granted in
+     Section 2.1.
+
+
+3. Responsibilities
+
+3.1. Distribution of Source Form
+
+     All distribution of Covered Software in Source Code Form, including any
+     Modifications that You create or to which You contribute, must be under
+     the terms of this License. You must inform recipients that the Source
+     Code Form of the Covered Software is governed by the terms of this
+     License, and how they can obtain a copy of this License. You may not
+     attempt to alter or restrict the recipients' rights in the Source Code
+     Form.
+
+3.2. Distribution of Executable Form
+
+     If You distribute Covered Software in Executable Form then:
+
+     a. such Covered Software must also be made available in Source Code Form,
+        as described in Section 3.1, and You must inform recipients of the
+        Executable Form how they can obtain a copy of such Source Code Form by
+        reasonable means in a timely manner, at a charge no more than the cost
+        of distribution to the recipient; and
+
+     b. You may distribute such Executable Form under the terms of this
+        License, or sublicense it under different terms, provided that the
+        license for the Executable Form does not attempt to limit or alter the
+        recipients' rights in the Source Code Form under this License.
+
+3.3. Distribution of a Larger Work
+
+     You may create and distribute a Larger Work under terms of Your choice,
+     provided that You also comply with the requirements of this License for
+     the Covered Software. If the Larger Work is a combination of Covered
+     Software with a work governed by one or more Secondary Licenses, and the
+     Covered Software is not Incompatible With Secondary Licenses, this
+     License permits You to additionally distribute such Covered Software
+     under the terms of such Secondary License(s), so that the recipient of
+     the Larger Work may, at their option, further distribute the Covered
+     Software under the terms of either this License or such Secondary
+     License(s).
+
+3.4. Notices
+
+     You may not remove or alter the substance of any license notices
+     (including copyright notices, patent notices, disclaimers of warranty, or
+     limitations of liability) contained within the Source Code Form of the
+     Covered Software, except that You may alter any license notices to the
+     extent required to remedy known factual inaccuracies.
+
+3.5. Application of Additional Terms
+
+     You may choose to offer, and to charge a fee for, warranty, support,
+     indemnity or liability obligations to one or more recipients of Covered
+     Software. However, You may do so only on Your own behalf, and not on
+     behalf of any Contributor. You must make it absolutely clear that any
+     such warranty, support, indemnity, or liability obligation is offered by
+     You alone, and You hereby agree to indemnify every Contributor for any
+     liability incurred by such Contributor as a result of warranty, support,
+     indemnity or liability terms You offer. You may include additional
+     disclaimers of warranty and limitations of liability specific to any
+     jurisdiction.
+
+4. Inability to Comply Due to Statute or Regulation
+
+   If it is impossible for You to comply with any of the terms of this License
+   with respect to some or all of the Covered Software due to statute,
+   judicial order, or regulation then You must: (a) comply with the terms of
+   this License to the maximum extent possible; and (b) describe the
+   limitations and the code they affect. Such description must be placed in a
+   text file included with all distributions of the Covered Software under
+   this License. Except to the extent prohibited by statute or regulation,
+   such description must be sufficiently detailed for a recipient of ordinary
+   skill to be able to understand it.
+
+5. Termination
+
+5.1. The rights granted under this License will terminate automatically if You
+     fail to comply with any of its terms. However, if You become compliant,
+     then the rights granted under this License from a particular Contributor
+     are reinstated (a) provisionally, unless and until such Contributor
+     explicitly and finally terminates Your grants, and (b) on an ongoing
+     basis, if such Contributor fails to notify You of the non-compliance by
+     some reasonable means prior to 60 days after You have come back into
+     compliance. Moreover, Your grants from a particular Contributor are
+     reinstated on an ongoing basis if such Contributor notifies You of the
+     non-compliance by some reasonable means, this is the first time You have
+     received notice of non-compliance with this License from such
+     Contributor, and You become compliant prior to 30 days after Your receipt
+     of the notice.
+
+5.2. If You initiate litigation against any entity by asserting a patent
+     infringement claim (excluding declaratory judgment actions,
+     counter-claims, and cross-claims) alleging that a Contributor Version
+     directly or indirectly infringes any patent, then the rights granted to
+     You by any and all Contributors for the Covered Software under Section
+     2.1 of this License shall terminate.
+
+5.3. In the event of termination under Sections 5.1 or 5.2 above, all end user
+     license agreements (excluding distributors and resellers) which have been
+     validly granted by You or Your distributors under this License prior to
+     termination shall survive termination.
+
+6. Disclaimer of Warranty
+
+   Covered Software is provided under this License on an "as is" basis,
+   without warranty of any kind, either expressed, implied, or statutory,
+   including, without limitation, warranties that the Covered Software is free
+   of defects, merchantable, fit for a particular purpose or non-infringing.
+   The entire risk as to the quality and performance of the Covered Software
+   is with You. Should any Covered Software prove defective in any respect,
+   You (not any Contributor) assume the cost of any necessary servicing,
+   repair, or correction. This disclaimer of warranty constitutes an essential
+   part of this License. No use of  any Covered Software is authorized under
+   this License except under this disclaimer.
+
+7. Limitation of Liability
+
+   Under no circumstances and under no legal theory, whether tort (including
+   negligence), contract, or otherwise, shall any Contributor, or anyone who
+   distributes Covered Software as permitted above, be liable to You for any
+   direct, indirect, special, incidental, or consequential damages of any
+   character including, without limitation, damages for lost profits, loss of
+   goodwill, work stoppage, computer failure or malfunction, or any and all
+   other commercial damages or losses, even if such party shall have been
+   informed of the possibility of such damages. This limitation of liability
+   shall not apply to liability for death or personal injury resulting from
+   such party's negligence to the extent applicable law prohibits such
+   limitation. Some jurisdictions do not allow the exclusion or limitation of
+   incidental or consequential damages, so this exclusion and limitation may
+   not apply to You.
+
+8. Litigation
+
+   Any litigation relating to this License may be brought only in the courts
+   of a jurisdiction where the defendant maintains its principal place of
+   business and such litigation shall be governed by laws of that
+   jurisdiction, without reference to its conflict-of-law provisions. Nothing
+   in this Section shall prevent a party's ability to bring cross-claims or
+   counter-claims.
+
+9. Miscellaneous
+
+   This License represents the complete agreement concerning the subject
+   matter hereof. If any provision of this License is held to be
+   unenforceable, such provision shall be reformed only to the extent
+   necessary to make it enforceable. Any law or regulation which provides that
+   the language of a contract shall be construed against the drafter shall not
+   be used to construe this License against a Contributor.
+
+
+10. Versions of the License
+
+10.1. New Versions
+
+      Mozilla Foundation is the license steward. Except as provided in Section
+      10.3, no one other than the license steward has the right to modify or
+      publish new versions of this License. Each version will be given a
+      distinguishing version number.
+
+10.2. Effect of New Versions
+
+      You may distribute the Covered Software under the terms of the version
+      of the License under which You originally received the Covered Software,
+      or under the terms of any subsequent version published by the license
+      steward.
+
+10.3. Modified Versions
+
+      If you create software not governed by this License, and you want to
+      create a new license for such software, you may create and use a
+      modified version of this License if you rename the license and remove
+      any references to the name of the license steward (except to note that
+      such modified license differs from this License).
+
+10.4. Distributing Source Code Form that is Incompatible With Secondary
+      Licenses If You choose to distribute Source Code Form that is
+      Incompatible With Secondary Licenses under the terms of this version of
+      the License, the notice described in Exhibit B of this License must be
+      attached.
+
+Exhibit A - Source Code Form License Notice
+
+      This Source Code Form is subject to the
+      terms of the Mozilla Public License, v.
+      2.0. If a copy of the MPL was not
+      distributed with this file, You can
+      obtain one at
+      http://mozilla.org/MPL/2.0/.
+
+If it is not possible or desirable to put the notice in a particular file,
+then You may include the notice in a location (such as a LICENSE file in a
+relevant directory) where a recipient would be likely to look for such a
+notice.
+
+You may add additional accurate notices of copyright ownership.
+
+Exhibit B - "Incompatible With Secondary Licenses" Notice
+
+      This Source Code Form is "Incompatible
+      With Secondary Licenses", as defined by
+      the Mozilla Public License, v. 2.0.

package/dist/index.css

@@ -14,6 +14,7 @@
   --gray-20: #f2f2f2;
   --gray-30: #e0e0e0;
   --gray-40: #cccccc;
+  --gray-50: #757575;
   --gray-60: #666666;
   --gray-80: #4d4d4d;
   --gray-90: #333333;
@@ -40,7 +41,7 @@
   --accent-secondary: var(--gray-20);
   --accent-secondary-active: var(--gray-30);
   --focus-light: #b51ad1;
-  --focus-dark: #eb94ff;
+  --focus-dark: #f5a4ff;
   --issue-critical: var(--accent-danger);
   --issue-serious: var(--accent-warning);
   --issue-moderate: #f0c4f8;
@@ -135,6 +136,12 @@
   /* radio card */
   --radio-card-width: 255px;
   --radio-card-height: 229px;
+
+  /* target size */
+  /* Note: target-size is deprecated, use --target-size-enhanced or --target-size-minimum */
+  --target-size: 44px;
+  --target-size-enhanced: var(--target-size);
+  --target-size-minimum: 24px;
 }
 
 .cauldron--theme-dark {
@@ -358,6 +365,7 @@ p {
   padding-top: 0;
   display: flex;
   justify-content: center;
+  background-color: transparent;
 }
 
 .Alert__warning .Dialog__heading:focus {
@@ -466,7 +474,7 @@ button.Link {
 }
 
 .Button--tag:not([disabled]):not([aria-disabled='true']):hover:before {
-  box-shadow: 0 0 0 1px var(--button-outline-color-primary);
+  box-shadow: 0 0 0 1px var(--button-outline-color-secondary);
 }
 
 .Button--primary:focus:before,
@@ -872,12 +880,18 @@ a.IconButton {
 }
 
 :root {
-  --dialog-background-color: var(--white);
-  --dialog-border-color: #ccc;
-  --dialog-header-background-color: var(--button-background-color-secondary);
+  --dialog-background-color: #fff;
+  --dialog-border-color: var(--gray-40);
+  --dialog-header-background-color: var(--gray-20);
+  --dialog-footer-background-color: var(--gray-20);
+  --dialog-heading-text-color: var(--header-text-color-dark);
   --dialog-padding: var(--space-small);
-  --dialog-header-height: 42px;
-  --target-size: 44px;
+  --dialog-header-height: 2.625rem;
+  --dialog-close-button-size: var(--target-size-minimum);
+}
+
+.cauldron--theme-dark {
+  --dialog-heading-text-color: #fff;
 }
 
 .Dialog {
@@ -906,7 +920,7 @@ a.IconButton {
   border: 1px solid var(--dialog-border-color);
   z-index: var(--z-index-dialog);
   position: relative;
-  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
 }
 
 .Dialog__header {
@@ -915,8 +929,7 @@ a.IconButton {
   border-bottom: 1px solid var(--dialog-border-color);
   align-items: center;
   justify-content: space-between;
-  height: var(--dialog-header-height);
-  text-transform: uppercase;
+  min-height: var(--dialog-header-height);
   font-weight: var(--font-weight-bold);
 }
 
@@ -924,20 +937,6 @@ a.IconButton {
 .Dialog__close {
   margin: 0;
   font-size: var(--text-size-small);
-  height: calc(var(--dialog-header-height) - 8px);
-  border-top: 4px solid transparent;
-  border-bottom: 4px solid transparent;
-}
-
-.Dialog__heading:focus,
-.Dialog__close:focus,
-.Dialog__close:hover {
-  border-bottom-color: var(--text-color-base);
-  outline: none;
-}
-
-.Dialog__close:focus {
-  border-top: 4px solid transparent;
 }
 
 .Dialog__heading {
@@ -947,14 +946,50 @@ a.IconButton {
 }
 
 .Dialog__close {
-  color: var(--text-color-base);
-  width: var(--dialog-header-height);
+  color: var(--dialog-heading-text-color);
   background-color: initial;
+  border: 1px solid var(--dialog-border-color);
+  border-radius: 3px;
+  padding: 0;
+  height: var(--dialog-close-button-size);
+  width: var(--dialog-close-button-size);
+  margin-right: var(--space-smallest);
+  position: relative;
+}
+
+.Dialog__close:active {
+  background-color: var(--dialog-border-color);
+}
+
+.Dialog__close:before {
+  content: '';
+  position: absolute;
+  top: -2px;
+  right: -2px;
+  bottom: -2px;
+  left: -2px;
+  border-radius: 4px;
+  pointer-events: none;
+}
+
+.cauldron--theme-dark .Dialog__close:before {
+  top: -3px;
+  right: -3px;
+  bottom: -3px;
+  left: -3px;
+}
+
+.Dialog__close:is(:hover, :focus):before {
+  box-shadow: 0 0 0 1px var(--dialog-heading-text-color);
 }
 
 .Dialog__close svg {
-  height: var(--icon-size);
-  width: var(--icon-size);
+  height: 100%;
+  width: 100%;
+}
+
+.cauldron--theme-dark .Dialog__close {
+  border-width: 2px;
 }
 
 .Dialog__content {
@@ -970,9 +1005,9 @@ a.IconButton {
 }
 
 .Dialog__footer {
-  background-color: #fff;
+  background-color: var(--dialog-footer-background-color);
   border-top: 1px solid var(--dialog-border-color);
-  padding: calc(var(--space-small) - 4px) var(--dialog-padding);
+  padding: var(--dialog-padding);
 }
 
 /**
@@ -980,24 +1015,7 @@ a.IconButton {
 */
 
 .Modal--info .Dialog__header {
-  border: none;
   background-color: transparent;
-  height: auto;
-  align-items: flex-start;
-}
-
-.Modal--info .Dialog__close {
-  padding: var(--space-three-quarters);
-  height: var(--target-size);
-  width: var(--target-size);
-}
-
-.Modal--info .Dialog__heading {
-  flex: 1;
-  justify-content: center;
-  height: auto;
-  padding-top: var(--space-large);
-  margin-left: var(--target-size);
 }
 
 .Modal--info .Dialog__content {
@@ -1009,6 +1027,7 @@ a.IconButton {
 .Modal--info .Dialog__footer {
   display: flex;
   justify-content: center;
+  background-color: transparent;
   border-top: none;
   padding-top: 0;
 }
@@ -1022,11 +1041,11 @@ a.IconButton {
 }
 
 .cauldron--theme-dark .Dialog__header {
-  border-bottom: 1px solid #5d676f;
+  border-bottom: 1px solid var(--stroke-dark);
 }
 
 .cauldron--theme-dark .Dialog__footer {
-  border-top: 1px solid #5d676f;
+  border-top: 1px solid var(--stroke-dark);
 }
 
 .cauldron--theme-dark .Dialog__header,
@@ -1039,20 +1058,14 @@ a.IconButton {
   color: var(--gray-20);
 }
 
-.cauldron--theme-dark .Dialog__heading:focus,
-.cauldron--theme-dark .Dialog__close:focus,
-.cauldron--theme-dark .Dialog__close:hover {
-  border-bottom-color: var(--white);
+.cauldron--theme-dark .Dialog__close:active {
+  color: var(--accent-medium);
 }
 
 .cauldron--theme-dark .Modal--info .Dialog__header,
 .cauldron--theme-dark .Modal--info .Dialog__content,
 .cauldron--theme-dark .Modal--info .Dialog__footer {
-  background-color: var(--accent-medium);
-}
-
-.cauldron--theme-dark .Modal--info .Dialog__header {
-  border-bottom: none;
+  background-color: transparent;
 }
 
 .cauldron--theme-dark .Modal--info .Dialog__footer {
@@ -1425,6 +1438,21 @@ a.IconButton {
   font-weight: var(--font-weight-ultra-bold);
 }
 
+.text--align-left {
+  text-align: left !important;
+  justify-content: left !important;
+}
+
+.text--align-center {
+  text-align: center !important;
+  justify-content: center !important;
+}
+
+.text--align-right {
+  text-align: right !important;
+  justify-content: right !important;
+}
+
 body .is--hidden {
   display: none;
 }
@@ -1467,7 +1495,12 @@ ul.semantic-only {
   --field-icon-focus-color: var(--focus-light);
   --field-error-text-color: var(--error);
   --field-error-border-color: var(--error);
+  --field-listbox-selected-background-color: var(--gray-50);
+  --field-listbox-selected-text-color: #fff;
+  --field-font-size: var(--text-size-small);
   --input-min-width: 250px;
+  --checkbox-size: var(--icon-size);
+  --radio-size: var(--icon-size);
 }
 
 .cauldron--theme-dark {
@@ -1482,6 +1515,7 @@ ul.semantic-only {
   --field-background-color-disabled: #5d676f;
   --field-required-text-color: var(--white);
   --field-label-text-color: var(--white);
+  --field-label-error-text-color: var(--error);
   --field-label-description-text-color: var(--accent-light);
   --field-icon-inactive-color: var(--white);
   --field-icon-active-color: rgba(212, 221, 224, 0.25);
@@ -1492,6 +1526,8 @@ ul.semantic-only {
   --field-icon-focus-color: var(--focus-dark);
   --field-error-text-color: var(--error);
   --field-error-border-color: var(--error);
+  --field-listbox-selected-background-color: var(--accent-light);
+  --field-listbox-selected-text-color: var(--accent-medium);
 }
 
 input,
@@ -1500,7 +1536,6 @@ textarea,
 [role='menuitemcheckbox'],
 [role='menuitemradio'],
 [role='textbox'],
-[aria-haspopup='listbox'],
 [role='listbox'],
 [role='spinbutton'] {
   width: 100%;
@@ -1517,7 +1552,6 @@ textarea,
 [role='menuitemcheckbox'],
 [role='menuitemradio'],
 [role='textbox'],
-[aria-haspopup='listbox'],
 [role='listbox'],
 [role='spinbutton'] {
   border: 1px solid var(--field-border-color);
@@ -1529,7 +1563,6 @@ textarea:focus,
 [role='menuitemcheckbox']:focus,
 [role='menuitemradio']:focus,
 [role='textbox']:focus,
-[aria-haspopup='listbox']:focus,
 [role='listbox']:focus,
 [role='spinbutton']:focus {
   outline: 0;
@@ -1545,7 +1578,6 @@ textarea:hover,
 [role='menuitemcheckbox']:hover,
 [role='menuitemradio']:hover,
 [role='textbox']:hover,
-[aria-haspopup='listbox']:hover,
 [role='listbox']:hover,
 [role='spinbutton']:hover {
   border: 1px solid var(--field-border-color-hover);
@@ -1557,7 +1589,6 @@ textarea:focus:hover,
 [role='menuitemcheckbox']:focus:hover,
 [role='menuitemradio']:focus:hover,
 [role='textbox']:focus:hover,
-[aria-haspopup='listbox']:focus:hover,
 [role='listbox']:focus:hover,
 [role='spinbutton']:focus:hover {
   border: 1px solid var(--field-border-color-focus-hover);
@@ -1569,7 +1600,6 @@ textarea.Field--has-error,
 [role='menuitemcheckbox'].Field--has-error,
 [role='menuitemradio'].Field--has-error,
 [role='textbox'].Field--has-error,
-[aria-haspopup='listbox'].Field--has-error,
 [role='listbox'].Field--has-error,
 [role='spinbutton'].Field--has-error {
   border: 1px solid var(--field-border-color-error);
@@ -1579,7 +1609,9 @@ textarea.Field--has-error,
   color: var(--field-border-color-error);
 }
 
-.Icon--checkbox-unchecked.Checkbox__overlay:active.Field--has-error:not(.Checkbox__overlay--disabled) {
+.Icon--checkbox-unchecked.Checkbox__overlay:active.Field--has-error:not(
+    .Checkbox__overlay--disabled
+  ) {
   background-color: var(--field-icon-error-active-color);
 }
 
@@ -1589,7 +1621,6 @@ textarea.Field--has-error:hover,
 [role='menuitemcheckbox'].Field--has-error:hover,
 [role='menuitemradio'].Field--has-error:hover,
 [role='textbox'].Field--has-error:hover,
-[aria-haspopup='listbox'].Field--has-error:hover,
 [role='listbox'].Field--has-error:hover,
 [role='spinbutton'].Field--has-error:hover {
   border-color: var(--field-border-color-error-hover);
@@ -1601,7 +1632,6 @@ textarea.Field--has-error:focus,
 [role='menuitemcheckbox'].Field--has-error:focus,
 [role='menuitemradio'].Field--has-error:focus,
 [role='textbox'].Field--has-error:focus,
-[aria-haspopup='listbox'].Field--has-error:focus,
 [role='listbox'].Field--has-error:focus,
 [role='spinbutton'].Field--has-error:focus {
   border: 1px solid var(--field-border-color-error);
@@ -1616,12 +1646,27 @@ textarea.Field--has-error:focus:hover,
 [role='menuitemcheckbox'].Field--has-error:focus:hover,
 [role='menuitemradio'].Field--has-error:focus:hover,
 [role='textbox'].Field--has-error:focus:hover,
-[aria-haspopup='listbox'].Field--has-error:focus:hover,
 [role='listbox'].Field--has-error:focus:hover,
 [role='spinbutton'].Field--has-error:focus:hover {
   border-color: var(--field-border-color-error-hover);
 }
 
+[role='listbox'] > li,
+[role='listbox'] > [role='group'] > li {
+  list-style-type: none;
+}
+
+[role='listbox']:focus-within > li.ListboxOption--active,
+[role='listbox']:focus-within > [role='group'] > li.ListboxOption--active {
+  box-shadow: 0 0 0 2px var(--field-icon-focus-color);
+}
+
+[role='listbox']
+  li[role='option']:is([aria-selected='true'], [aria-checked='true']) {
+  background-color: var(--field-listbox-selected-background-color);
+  color: var(--field-listbox-selected-text-color);
+}
+
 .Error {
   color: var(--field-error-text-color);
   text-align: left;
@@ -1749,7 +1794,7 @@ textarea.Field--has-error:focus:hover,
 .Field__text-input {
   padding: var(--space-smallest);
   box-sizing: border-box;
-  font-size: var(--text-size-small);
+  font-size: var(--field-font-size);
   color: var(--field-content-color);
   min-width: min(var(--input-min-width), 100%);
 }
@@ -1763,7 +1808,7 @@ textarea.Field--has-error:focus:hover,
 .Field__textarea {
   display: block;
   min-height: 56px;
-  font-size: var(--text-size-small);
+  font-size: var(--field-font-size);
   min-width: min(var(--input-min-width), 100%);
   padding: var(--space-half);
   max-width: 500px;
@@ -1783,11 +1828,18 @@ textarea.Field--has-error:focus:hover,
   font-weight: var(--font-weight-normal);
   line-height: 1;
   margin-top: var(--space-half);
-  margin-left: calc(24px + 2px + var(--space-half));
   cursor: default;
   display: flex;
 }
 
+.Checkbox__wrap .Field__labelDescription {
+  margin-left: calc(var(--checkbox-size) + 2px + var(--space-half));
+}
+
+.Radio__wrap .Field__labelDescription {
+  margin-left: calc(var(--radio-size) + 2px + var(--space-half));
+}
+
 .Field__labelDescription + .Error {
   margin-top: var(--space-smallest);
 }
@@ -1815,6 +1867,16 @@ textarea.Field--has-error:focus:hover,
   pointer-events: none;
 }
 
+.Radio__overlay svg {
+  height: var(--radio-size);
+  width: var(--radio-size);
+}
+
+.Checkbox__overlay svg {
+  height: var(--checkbox-size);
+  width: var(--checkbox-size);
+}
+
 .Radio__overlay:active:not(.Radio__overlay--disabled),
 .Checkbox__overlay:active:not(.Checkbox__overlay--disabled) {
   background-color: var(--field-icon-active-color);
@@ -3140,14 +3202,26 @@ button.TooltipTabstop {
   margin-top: -1px;
 }
 
+:root {
+  --code-text-color: var(--accent-primary-active);
+  --code-border-color: var(--stroke-light);
+  --code-background-color: var(--background-light);
+}
+
+.cauldron--theme-dark {
+  --code-text-color: var(--accent-light);
+  --code-background-color: var(--accent-dark);
+  --code-border-color: var(--stroke-dark);
+}
+
 .Code.hljs {
   display: block;
-  padding: 0.5em;
-  background: var(--gray-20);
-  color: var(--gray-90);
-  border: 1px solid var(--gray-40);
-  color: var(--accent-primary-active);
-  word-break: anywhere;
+  padding: var(--space-smaller);
+  background: var(--code-background-color);
+  border: 1px solid var(--code-border-color);
+  border-radius: 3px;
+  color: var(--code-text-color);
+  word-break: break-all;
 }
 
 .Code--scrollable {
@@ -3247,12 +3321,6 @@ button.TooltipTabstop {
 
 /* Dark Theme */
 
-.cauldron--theme-dark .Code.hljs {
-  background: var(--accent-dark);
-  color: var(--accent-light);
-  border: 1px solid transparent;
-}
-
 .cauldron--theme-dark .Code .hljs-string {
   color: #8abeb7;
 }
@@ -3492,12 +3560,30 @@ button.TooltipTabstop {
   font-weight: var(--font-weight-normal);
 }
 
+:root {
+  --tag-button-icon-size: 15px;
+}
+
+.TagButton {
+  vertical-align: middle;
+}
+
+.TagButton__icon {
+  margin-left: var(--space-half);
+}
+
+.TagButton__icon svg {
+  width: var(--tag-button-icon-size);
+  height: var(--tag-button-icon-size);
+}
+
 :root {
   --table-header-text-color: var(--gray-90);
   --table-header-background-color: var(--gray-20);
   --table-header-sorting-background-color: #caddec;
-  --table-header-sorting-text-color: var(--gray-90);
   --table-header-background-color-hover: #dddddd;
+  /* --table-header-sorting-text-color will be deprecated */
+  --table-header-sorting-text-color: var(--gray-90);
   --table-cell-text-color: var(--gray-60);
   --table-cell-background-color: var(--white);
   --table-row-border-color: var(--gray-40);
@@ -3509,8 +3595,9 @@ button.TooltipTabstop {
 .cauldron--theme-dark {
   --table-header-text-color: var(--white);
   --table-header-background-color: var(--accent-dark);
-  --table-header-sorting-background-color: #53636e;
+  /* --table-header-sorting-text-color will be deprecated */
   --table-header-sorting-text-color: var(--white);
+  --table-header-sorting-background-color: #53636e;
   --table-header-background-color-hover: #53636e;
   --table-cell-text-color: var(--accent-light);
   --table-cell-background-color: var(--accent-medium);
@@ -3566,6 +3653,8 @@ button.TooltipTabstop {
   border-bottom: 3px solid var(--table-header-sorting-border-color);
 }
 
+/* These styles are not applying and will be deprecated */
+
 .TableHeader--sort-ascending .TableHeader__sort-button,
 .TableHeader--sort-decscending .TableHeader__sort-button {
   color: var(--table-header-sorting-text-color);
@@ -4001,6 +4090,126 @@ fieldset.Panel {
   --panel-content-color: var(--accent-light);
 }
 
+:root {
+  --popover-background-color: var(--gray-10);
+  --popover-border-color: var(--gray-90);
+  --popover-text-color: var(--gray-90);
+  --popover-box-shadow: rgba(0, 0, 0, 0.35) 0 0 10px 0;
+  --popover-font-size: var(--text-size-smaller);
+  --popover-line-height: var(--text-size-normal);
+  --popover-padding: 0 var(--space-small);
+  --popover-alert-max-width: 12rem;
+  --popover-alert-padding: var(--space-small);
+  --popover-alert-apply-button-margin: var(--space-smallest) 0;
+}
+
+/* Dark theme variables */
+
+.cauldron--theme-dark {
+  --popover-background-color: var(--accent-medium);
+  --popover-border-color: var(--accent-light);
+  --popover-text-color: var(--white);
+}
+
+.Popover {
+  background-color: var(--popover-background-color);
+  border: 2px solid var(--popover-border-color);
+  box-shadow: var(--popover-box-shadow);
+  color: var(--popover-text-color);
+  font-size: var(--popover-font-size);
+  line-height: var(--popover-line-height);
+  padding: var(--popover-padding);
+  word-break: break-word;
+}
+
+.Popover--hidden {
+  visibility: hidden;
+  /* Take the tooltip out of the DOM layout flow so it doesn't reserve space when hidden */
+  position: fixed !important;
+}
+
+/* TooltipArrow needs some dimensions to accurately calculate its positioning */
+
+.Popover__popoverArrow {
+  height: 0.1px;
+  width: 0.1px;
+}
+
+.Popover__borderLeft {
+  position: absolute;
+  left: 4px;
+  top: var(--space-half);
+  height: calc(100% - (var(--space-half) * 2));
+  width: 3px;
+  background-color: var(--popover-border-color);
+}
+
+/* Adjust position to try to center the arrow in the tooltip's border */
+
+[class*='Popover--top'] .Popover__popoverArrow {
+  bottom: -1px;
+}
+
+[class*='Popover--bottom'] .Popover__popoverArrow {
+  top: -1px;
+}
+
+[class*='Popover--left'] .Popover__popoverArrow {
+  right: -1px;
+}
+
+[class*='Popover--right'] .Popover__popoverArrow {
+  left: 0;
+}
+
+/*
+ * Default tooltip arrow styles
+ */
+
+.Popover__popoverArrow:before {
+  content: '';
+  position: absolute;
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+  border-top: 7px solid var(--popover-border-color);
+  border-bottom: none;
+  transform: translateX(-50%);
+  transform-origin: top;
+}
+
+[class*='Popover--bottom'] .Popover__popoverArrow:before {
+  transform: translateX(-50%) rotate(180deg);
+}
+
+[class*='Popover--left'] .Popover__popoverArrow:before {
+  transform: rotate(-90deg) translateY(-6px);
+}
+
+[class*='Popover--right'] .Popover__popoverArrow:before {
+  transform: rotate(90deg) translateY(100%);
+}
+
+/* Alert popover styles */
+
+.Popover--prompt {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: var(--popover-alert-padding);
+  max-width: var(--popover-alert-max-width);
+}
+
+.Popover--prompt > .Button--thin {
+  width: 100%;
+  margin-left: 0;
+}
+
+.Popover__apply {
+  margin: var(--popover-alert-apply-button-margin);
+}
+
 :root {
   --issue-panel-border-color: var(--gray-40);
   --issue-panel-header-background-color: var(--gray-20);
@@ -4644,7 +4853,12 @@ fieldset.Panel {
 
   .TwoColumnPanel--hide .TwoColumnPanel__Left,
   .TwoColumnPanel--show .TwoColumnPanel__Left {
-    margin-left: calc(var(--two-column-panel-left-column-width) * -1);
+    max-width: 100%;
+    /* This will constrain the component to the max-width of its container, as well as adjusting the offset margin to the max negative value to prevent incorrect offset when the max-width is less than the column width. */
+    margin-left: max(
+      calc(var(--two-column-panel-left-column-width) * -1),
+      calc(100% * -1)
+    );
     animation: none;
     opacity: 1;
   }
@@ -4790,7 +5004,7 @@ button.Accordion__trigger {
 .Notice .Notice__title,
 .Notice .Notice__title > :is(h1, h2, h3, h4, h5, h6) {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   font-size: var(--text-size-small);
   font-weight: var(--notice-title-font-weight);
   margin: 0;
@@ -4838,3 +5052,253 @@ button.Accordion__trigger {
   margin-top: 0;
   margin-bottom: var(--space-smallest);
 }
+
+:root {
+  --combobox-input-border-color: var(--field-border-color);
+  --combobox-input-background-color: var(--field-background-color);
+  --combobox-input-border-focus-color: var(--field-border-color-focus);
+  --combobox-input-border-hover-color: var(--field-border-color-focus-hover);
+  --combobox-input-border-focus-glow-color: var(
+    --field-border-color-focus-glow
+  );
+  --combobox-input-error-border-color: var(--field-border-color-error);
+  --combobox-input-error-focus-border-color: var(
+    --field-border-color-error-hover
+  );
+  --combobox-input-error-focus-border-glow-color: var(
+    --field-border-color-focus-glow
+  );
+  --combobox-input-font-size: var(--field-font-size);
+  --combobox-input-font-color: var(--field-content-color);
+  --combobox-listbox-border-color: var(--gray-40);
+  --combobox-listbox-background-color: #fff;
+  --combobox-option-font-color: var(--gray-90);
+  --combobox-option-hover-background-color: var(--gray-20);
+  --combobox-option-description-font-color: var(--gray-60);
+  --combobox-option-description-font-size: var(--text-size-smaller);
+  --combobox-option-min-height: 2.625rem;
+  --combobox-group-label-background-color: var(--gray-20);
+  --combobox-group-label-font-size: var(--text-size-smaller);
+  --combobox-option-selected-icon-color: var(--accent-success-dark);
+}
+
+.cauldron--theme-dark {
+  --combobox-input-border-color: var(--field-border-color);
+  --combobox-input-background-color: var(--field-background-color);
+  --combobox-input-border-focus-color: var(--field-border-color-focus);
+  --combobox-input-border-hover-color: var(--field-border-color-focus-hover);
+  --combobox-input-border-focus-glow-color: var(
+    --field-border-color-focus-glow
+  );
+  --combobox-input-error-border-color: var(--field-border-color-error);
+  --combobox-input-error-focus-border-color: var(
+    --field-border-color-error-hover
+  );
+  --combobox-input-error-focus-border-glow-color: var(
+    --field-border-color-focus-glow
+  );
+  --combobox-input-font-color: var(--field-content-color);
+  --combobox-option-font-color: var(--text-color-light);
+  --combobox-option-hover-background-color: var(--accent-dark);
+  --combobox-option-description-font-color: var(--accent-light);
+  --combobox-listbox-background-color: var(--accent-medium);
+  --combobox-group-label-background-color: var(--accent-dark);
+  --combobox-option-selected-icon-color: var(--accent-success-light);
+}
+
+.Combobox {
+  --field-listbox-selected-background-color: transparent;
+  position: relative;
+}
+
+.Combobox input:is(*, :focus, :hover) {
+  border: none;
+  box-shadow: none;
+  margin: initial;
+  padding: var(--space-smallest);
+}
+
+.Combobox__input {
+  position: relative;
+  display: flex;
+  align-items: center;
+  border: 1px solid var(--combobox-input-border-color);
+  border-bottom: 1px solid var(--field-border-color-underline);
+  margin-bottom: var(--space-half);
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
+  background-color: var(--combobox-input-background-color);
+}
+
+.cauldron--theme-dark .Combobox__input {
+  border: 1px solid var(--combobox-input-border-color);
+}
+
+.Combobox__input:hover,
+.cauldron--theme-dark .Combobox__input:hover {
+  border-color: var(--combobox-input-border-hover-color);
+}
+
+.Combobox__input input[type='text'] {
+  font-size: var(--combobox-input-font-size);
+  color: var(--combobox-input-font-color);
+  margin-right: 1.25rem;
+}
+
+.Combobox__input:focus-within {
+  border: 1px solid var(--combobox-input-border-focus-color);
+  box-shadow: 0 0 0 2px var(--combobox-input-border-focus-color),
+    0 0 5px var(--combobox-input-border-focus-glow-color),
+    inset 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+
+.Combobox__arrow {
+  width: 2rem;
+  display: flex;
+  justify-content: center;
+  position: absolute;
+  right: 0;
+  pointer-events: none;
+}
+
+.Combobox__arrow:before {
+  content: '';
+  display: inline-block;
+  border-top: 7px solid currentColor;
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+  border-radius: 2px;
+}
+
+.Combobox__listbox {
+  display: none;
+  position: absolute;
+  min-width: 100%;
+  border: 1px solid var(--combobox-listbox-border-color);
+  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
+  background-color: var(--combobox-listbox-background-color);
+  z-index: var(--z-index-listbox);
+  max-width: var(--combobox-listbox-max-width, 100%);
+  max-height: var(
+    --combobox-listbox-max-height,
+    calc(var(--combobox-option-min-height) * 10)
+  );
+  overflow-y: auto;
+  animation: combobox-animate-in ease-out 150ms;
+}
+
+@keyframes combobox-animate-in {
+  from {
+    transform: translateY(-8px);
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@media (prefers-reduced-motion) {
+  .Combobox__listbox {
+    animation: none;
+  }
+}
+
+.Combobox__listbox:hover {
+  border-color: var(--combobox-listbox-border-color);
+}
+
+/* 
+ * Note: Firefox doesn't yet have full support for :has, so .Combobox__listbox--open
+ * is provided as a fallback selector to indicate open listboxes
+ * see: https://caniuse.com/css-has
+ */
+
+.Combobox:has([role='combobox'][aria-expanded='true']) .Combobox__listbox,
+.Combobox__listbox--open {
+  display: block;
+}
+
+.Combobox__listbox li {
+  list-style-type: none;
+}
+
+.Combobox__listbox > ul[role='group']:not(:last-child) {
+  border-bottom: 1px solid var(--combobox-listbox-border-color);
+}
+
+.ComboboxGroup__label {
+  background-color: var(--combobox-group-label-background-color);
+  padding: var(--space-smallest);
+  font-size: var(--combobox-group-label-font-size);
+  font-weight: var(--font-weight-medium);
+  border-bottom: 1px solid var(--combobox-listbox-border-color);
+}
+
+.ComboboxGroup--hidden {
+  display: none !important;
+}
+
+.ComboboxOption {
+  --field-listbox-selected-text-color: var(--combobox-option-font-color);
+  color: var(--combobox-option-font-color);
+  padding: var(--space-smallest);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: var(--space-half);
+  justify-content: space-between;
+  min-height: var(--combobox-option-min-height);
+}
+
+.ComboboxOption:not(:last-child) {
+  border-bottom: 1px solid var(--combobox-listbox-border-color);
+}
+
+.ComboboxOption--active {
+  box-shadow: inset 0 0 0 1px var(--combobox-listbox-background-color),
+    inset 0 0 0 3px var(--focus);
+}
+
+.ComboboxOption:is(:hover, [role='option'][aria-selected='true']:hover) {
+  background-color: var(--combobox-option-hover-background-color);
+}
+
+.ComboboxOption .Icon {
+  color: var(--combobox-option-selected-icon-color);
+}
+
+.ComboboxOption .Icon svg {
+  padding: 4px;
+  height: 1.6em;
+  width: 1.6em;
+  border: 2.5px solid currentColor;
+  border-radius: 50%;
+}
+
+.ComboboxOption__match {
+  text-decoration: underline;
+  font-style: normal;
+  font-weight: var(--font-weight-medium);
+}
+
+.ComboboxOption__description {
+  padding-top: var(--space-half);
+  padding-bottom: var(--space-quarter);
+  color: var(--combobox-option-description-font-color);
+  font-size: var(--combobox-option-description-font-size);
+}
+
+.Combobox__input--error {
+  border: 1px solid var(--combobox-input-error-border-color);
+}
+
+.Combobox__input--error:focus-within {
+  border: 1px solid var(--combobox-input-error-border-color);
+  box-shadow: 0 0 0 1px var(--combobox-input-error-focus-border-color),
+    inset 0 2px 3px 0 rgba(0, 0, 0, 0.05),
+    0 0 5px 0 var(--combobox-input-error-focus-border-glow-color);
+}
+
+.ComboboxListbox__empty {
+  padding: var(--space-smaller);
+  text-align: center;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deque/cauldron-styles",
-  "version": "5.8.1",
+  "version": "5.9.0-canary.2544e36f",
   "license": "MPL-2.0",
   "description": "deque cauldron pattern library styles",
   "repository": "https://github.com/dequelabs/cauldron",
@@ -22,4 +22,4 @@
     "postcss-cli": "^7.1.1",
     "postcss-import": "^12.0.1"
   }
-}
+}