@ni/nimble-components 20.0.6 → 20.1.1

package/dist/esm/patterns/button/styles.js

@@ -1,303 +1,298 @@
 import { css } from '@microsoft/fast-element';
 import { display } from '@microsoft/fast-foundation';
 import { focusVisible } from '../../utilities/style/focus';
-import { actionRgbPartialColor, borderHoverColor, borderRgbPartialColor, borderWidth, buttonLabelFont, buttonLabelFontColor, buttonLabelDisabledFontColor, controlHeight, fillSelectedColor, iconColor, smallDelay, standardPadding } from '../../theme-provider/design-tokens';
+import { actionRgbPartialColor, borderHoverColor, borderRgbPartialColor, borderWidth, buttonLabelFont, buttonLabelFontColor, buttonLabelDisabledFontColor, controlHeight, fillSelectedColor, iconColor, smallDelay, standardPadding, buttonPrimaryFontColor, buttonFillPrimaryColor, buttonFillActivePrimaryColor, buttonFillAccentColor, buttonAccentBlockFontColor, buttonFillAccentActiveColor, buttonBorderAccentOutlineColor, buttonAccentOutlineFontColor } from '../../theme-provider/design-tokens';
 import { appearanceBehavior } from '../../utilities/style/appearance';
 import { ButtonAppearance } from './types';
 export const styles = css `
-    ${display('inline-flex')}
-
-    :host {
-        background-color: transparent;
-        height: ${controlHeight};
-        color: ${buttonLabelFontColor};
-        font: ${buttonLabelFont};
-        cursor: pointer;
-        outline: none;
-        border: none;
-        box-sizing: border-box;
-        ${
+    @layer base, hover, focusVisible, active, disabled, top;
+
+    @layer base {
+        ${display('inline-flex')}
+
+        :host {
+            background-color: transparent;
+            height: ${controlHeight};
+            color: ${buttonLabelFontColor};
+            font: ${buttonLabelFont};
+            cursor: pointer;
+            outline: none;
+            border: none;
+            box-sizing: border-box;
+            ${
 /*
     Not sure why but this is needed to get buttons with icons and buttons
     without icons to align on the same line when the button is inline-flex
     See: https://github.com/microsoft/fast/issues/5414
 */ ''}
-        vertical-align: middle;
-    }
-
-    :host([disabled]) {
-        color: ${buttonLabelDisabledFontColor};
-        cursor: default;
-    }
-
-    .control {
-        background-color: transparent;
-        height: 100%;
-        width: 100%;
-        border: ${borderWidth} solid transparent;
-        box-sizing: border-box;
-        color: inherit;
-        border-radius: inherit;
-        fill: inherit;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        gap: 4px;
-        cursor: inherit;
-        font: inherit;
-        outline: none;
-        margin: 0;
-        padding: 0 ${standardPadding};
-        position: relative;
-        transition: box-shadow ${smallDelay} ease-in-out,
-            border-color ${smallDelay} ease-in-out,
-            background-size ${smallDelay} ease-in-out;
-        background-size: 100% 100%;
-        background-repeat: no-repeat;
-        background-position: center;
-    }
-
-    :host([content-hidden]) .control {
-        aspect-ratio: 1 / 1;
-        padding: 0px;
-    }
+            vertical-align: middle;
+        }
 
-    @media (prefers-reduced-motion) {
         .control {
-            transition-duration: 0s;
+            background-color: transparent;
+            height: 100%;
+            width: 100%;
+            border: ${borderWidth} solid transparent;
+            box-sizing: border-box;
+            color: inherit;
+            border-radius: inherit;
+            fill: inherit;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            gap: 4px;
+            cursor: inherit;
+            font: inherit;
+            outline: none;
+            margin: 0;
+            padding: 0 ${standardPadding};
+            position: relative;
+            transition: box-shadow ${smallDelay} ease-in-out,
+                border-color ${smallDelay} ease-in-out,
+                background-size ${smallDelay} ease-in-out;
+            background-size: 100% 100%;
+            background-repeat: no-repeat;
+            background-position: center;
         }
-    }
-
-    .control:hover {
-        border-color: ${borderHoverColor};
-        box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;
-    }
 
-    .control${focusVisible} {
-        border-color: ${borderHoverColor};
-        box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;
-    }
-
-    .control:active {
-        box-shadow: none;
-        background-image: linear-gradient(
-            ${fillSelectedColor},
-            ${fillSelectedColor}
-        );
-        background-size: calc(100% - 2px) calc(100% - 2px);
-    }
-
-    :host([disabled]) .control {
-        box-shadow: none;
-        background-image: none;
-    }
-
-    .control::before {
-        content: '';
-        position: absolute;
-        width: 100%;
-        height: 100%;
-        pointer-events: none;
-        box-sizing: border-box;
-        outline: 0px solid transparent;
-        color: transparent;
-        background-clip: content-box;
-        transition: outline ${smallDelay} ease-in-out;
-    }
-
-    .control${focusVisible}::before {
-        outline: ${borderWidth} solid ${borderHoverColor};
-        outline-offset: -3px;
-    }
-
-    .control:active::before {
-        outline: none;
-    }
+        :host([content-hidden]) .control {
+            aspect-ratio: 1 / 1;
+            padding: 0px;
+        }
 
-    :host([disabled]) .control::before {
-        box-shadow: none;
-    }
+        .control::before {
+            content: '';
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            pointer-events: none;
+            box-sizing: border-box;
+            outline: 0px solid transparent;
+            color: transparent;
+            background-clip: content-box;
+            transition: outline ${smallDelay} ease-in-out;
+        }
 
-    .content {
-        display: contents;
-    }
+        .content {
+            display: contents;
+        }
 
-    :host([content-hidden]) .content {
-        ${
+        :host([content-hidden]) .content {
+            ${
 /**
  * Hide content visually while keeping it screen reader-accessible.
  * Source: https://webaim.org/techniques/css/invisiblecontent/#techniques
  * See discussion here: https://github.com/microsoft/fast/issues/5740#issuecomment-1068195035
  */
 ''}
-        display: inline-block;
-        height: 1px;
-        width: 1px;
-        position: absolute;
-        margin: -1px;
-        clip: rect(1px, 1px, 1px, 1px);
-        clip-path: inset(50%);
-        overflow: hidden;
-        padding: 0;
-    }
+            display: inline-block;
+            height: 1px;
+            width: 1px;
+            position: absolute;
+            margin: -1px;
+            clip: rect(1px, 1px, 1px, 1px);
+            clip-path: inset(50%);
+            overflow: hidden;
+            padding: 0;
+        }
 
-    [part='start'] {
-        display: contents;
-        ${iconColor.cssCustomProperty}: ${buttonLabelFontColor};
-    }
+        [part='start'] {
+            display: contents;
+            ${iconColor.cssCustomProperty}: ${buttonLabelFontColor};
+        }
 
-    :host([disabled]) slot[name='start']::slotted(*) {
-        opacity: 0.3;
+        [part='end'] {
+            display: contents;
+            ${iconColor.cssCustomProperty}: ${buttonLabelFontColor};
+        }
     }
 
-    [part='end'] {
-        display: contents;
-        ${iconColor.cssCustomProperty}: ${buttonLabelFontColor};
+    @layer hover {
+        .control:hover {
+            border-color: ${borderHoverColor};
+            box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;
+        }
     }
 
-    :host([disabled]) slot[name='end']::slotted(*) {
-        opacity: 0.3;
-    }
+    @layer focusVisible {
+        .control${focusVisible} {
+            border-color: ${borderHoverColor};
+            box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;
+        }
 
-    :host([content-hidden]) [part='end'] {
-        display: none;
+        .control${focusVisible}::before {
+            outline: ${borderWidth} solid ${borderHoverColor};
+            outline-offset: -3px;
+        }
     }
-`.withBehaviors(appearanceBehavior(ButtonAppearance.outline, css `
-            .control {
-                border-color: rgba(${actionRgbPartialColor}, 0.3);
-            }
-
-            .control:hover {
-                background-color: transparent;
-            }
 
-            :host([disabled]) .control {
-                border-color: rgba(${borderRgbPartialColor}, 0.3);
-            }
-        `), appearanceBehavior(ButtonAppearance.ghost, css `
-            .control:hover {
-                background-color: transparent;
-            }
+    @layer active {
+        .control:active {
+            box-shadow: none;
+            background-image: linear-gradient(
+                ${fillSelectedColor},
+                ${fillSelectedColor}
+            );
+            background-size: calc(100% - 2px) calc(100% - 2px);
+        }
 
-            .control${focusVisible} {
-                background-color: transparent;
-            }
+        .control:active::before {
+            outline: none;
+        }
+    }
 
-            :host([disabled]) .control {
-                border-color: transparent;
-            }
-        `), appearanceBehavior(ButtonAppearance.block, css `
-            .control {
-                background-color: rgba(${borderRgbPartialColor}, 0.1);
-            }
+    @layer disabled {
+        :host([disabled]) {
+            color: ${buttonLabelDisabledFontColor};
+            cursor: default;
+        }
 
-            .control:hover {
-                background-color: transparent;
-                background-image: linear-gradient(
-                    rgba(${borderRgbPartialColor}, 0.1),
-                    rgba(${borderRgbPartialColor}, 0.1)
-                );
-                background-size: calc(100% - 4px) calc(100% - 4px);
-            }
+        :host([disabled]) .control {
+            box-shadow: none;
+            background-image: none;
+            color: rgba(${actionRgbPartialColor}, 0.3);
+        }
 
-            .control${focusVisible} {
-                background-color: transparent;
-                background-image: linear-gradient(
-                    rgba(${borderRgbPartialColor}, 0.1),
-                    rgba(${borderRgbPartialColor}, 0.1)
-                );
-                background-size: calc(100% - 4px) calc(100% - 4px);
-            }
+        :host([disabled]) .control::before {
+            box-shadow: none;
+        }
 
-            .control:active {
-                background-image: linear-gradient(
-                    ${fillSelectedColor},
-                    ${fillSelectedColor}
-                );
-                background-size: calc(100% - 2px) calc(100% - 2px);
-            }
+        :host([disabled]) slot[name='start']::slotted(*) {
+            opacity: 0.3;
+            ${iconColor.cssCustomProperty}: ${buttonLabelFontColor};
+        }
 
-            :host([disabled]) .control {
-                background-color: rgba(${borderRgbPartialColor}, 0.1);
-                border-color: transparent;
-            }
-        `));
-export const buttonAppearanceVariantStyles = css ``.withBehaviors(appearanceBehavior(ButtonAppearance.outline, css `
-            :host([appearance-variant='primary']) .control {
-                box-shadow: 0px 0px 0px ${borderWidth}
-                    rgba(${actionRgbPartialColor}, 0.3) inset;
-            }
+        :host([disabled]) slot[name='end']::slotted(*) {
+            opacity: 0.3;
+            ${iconColor.cssCustomProperty}: ${buttonLabelFontColor};
+        }
+    }
 
-            :host([appearance-variant='primary']) .control:hover {
-                box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;
+    @layer top {
+        @media (prefers-reduced-motion) {
+            .control {
+                transition-duration: 0s;
             }
+        }
 
-            :host([appearance-variant='primary']) .control${focusVisible} {
-                box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;
+        :host([content-hidden]) [part='end'] {
+            display: none;
+        }
+    }
+`.withBehaviors(appearanceBehavior(ButtonAppearance.outline, css `
+            @layer base {
+                .control {
+                    border-color: rgba(${actionRgbPartialColor}, 0.3);
+                }
             }
 
-            :host([appearance-variant='primary']) .control:active {
-                box-shadow: 0px 0px 0px ${borderWidth} ${fillSelectedColor}
-                    inset;
+            @layer disabled {
+                :host([disabled]) .control {
+                    border-color: rgba(${borderRgbPartialColor}, 0.3);
+                }
             }
-
-            :host([appearance-variant='primary'][disabled]) .control {
-                box-shadow: none;
+        `), appearanceBehavior(ButtonAppearance.ghost, css `
+            @layer disabled {
+                :host([disabled]) .control {
+                    border-color: transparent;
+                }
             }
         `), appearanceBehavior(ButtonAppearance.block, css `
-            :host([appearance-variant='primary']) .control {
-                border-color: rgba(${actionRgbPartialColor}, 0.3);
-                box-shadow: 0px 0px 0px ${borderWidth}
-                    rgba(${actionRgbPartialColor}, 0.3) inset;
-            }
-
-            :host([appearance-variant='primary'][content-hidden]) .control {
-                padding: 0px;
-            }
-
-            :host([appearance-variant='primary']) .control:hover {
-                border-color: ${borderHoverColor};
-                box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;
+            @layer base {
+                .control {
+                    background-image: linear-gradient(
+                        rgba(${borderRgbPartialColor}, 0.1),
+                        rgba(${borderRgbPartialColor}, 0.1)
+                    );
+                    border-color: rgba(${borderRgbPartialColor}, 0.1);
+                }
             }
 
-            :host([appearance-variant='primary']) .control${focusVisible} {
-                background-clip: border-box;
-                border-color: ${borderHoverColor};
-                border-width: ${borderWidth};
-                box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;
-                padding: 0 ${standardPadding};
+            @layer hover {
+                .control:hover {
+                    background-size: calc(100% - 4px) calc(100% - 4px);
+                }
             }
 
-            :host([appearance-variant='primary'][content-hidden])
+            @layer focusVisible {
                 .control${focusVisible} {
-                padding: 0px;
+                    background-size: calc(100% - 4px) calc(100% - 4px);
+                }
             }
 
-            :host([appearance-variant='primary']) .control:active {
-                box-shadow: none;
+            @layer disabled {
+                :host([disabled]) .control {
+                    background-image: linear-gradient(
+                        rgba(${borderRgbPartialColor}, 0.1),
+                        rgba(${borderRgbPartialColor}, 0.1)
+                    );
+                    background-size: 100% 100%;
+                    border-color: rgba(${borderRgbPartialColor}, 0.1);
+                }
             }
-
-            :host([appearance-variant='primary'][content-hidden])
-                .control:active {
-                padding: 0px;
-            }
-
-            :host([appearance-variant='primary'][disabled]) .control {
-                background-clip: border-box;
-                border-color: transparent;
-                border-width: ${borderWidth};
-                box-shadow: none;
-                padding: 0 ${standardPadding};
+        `));
+export const buttonAppearanceVariantStyles = css ``.withBehaviors(appearanceBehavior(ButtonAppearance.outline, css `
+            @layer base {
+                :host([appearance-variant='primary']) .control {
+                    border-color: ${actionRgbPartialColor};
+                }
+
+                :host([appearance-variant='accent']) .control {
+                    border-color: ${buttonBorderAccentOutlineColor};
+                    color: ${buttonAccentOutlineFontColor};
+                }
             }
-
-            :host([appearance-variant='primary'][disabled][content-hidden])
-                .control {
-                padding: 0px;
+        `), appearanceBehavior(ButtonAppearance.block, css `
+            @layer base {
+                :host([appearance-variant='primary']) [part='start'] {
+                    ${iconColor.cssCustomProperty}: white;
+                }
+
+                :host([appearance-variant='primary']) .control {
+                    background-image: linear-gradient(
+                        ${buttonFillPrimaryColor},
+                        ${buttonFillPrimaryColor}
+                    );
+                    color: ${buttonPrimaryFontColor};
+                    border-color: ${buttonFillPrimaryColor};
+                }
+
+                :host([appearance-variant='primary']) [part='end'] {
+                    ${iconColor.cssCustomProperty}: white;
+                }
+
+                :host([appearance-variant='accent']) [part='start'] {
+                    ${iconColor.cssCustomProperty}: white;
+                }
+
+                :host([appearance-variant='accent']) .control {
+                    background-image: linear-gradient(
+                        ${buttonFillAccentColor},
+                        ${buttonFillAccentColor}
+                    );
+                    color: ${buttonAccentBlockFontColor};
+                    border-color: ${buttonFillAccentColor};
+                }
+
+                :host([appearance-variant='accent']) [part='end'] {
+                    ${iconColor.cssCustomProperty}: white;
+                }
             }
 
-            :host([appearance-variant='primary']) .control:active::before {
-                border-color: ${fillSelectedColor};
-                border-width: ${borderWidth};
+            @layer active {
+                :host([appearance-variant='primary']) .control:active {
+                    background-image: linear-gradient(
+                        ${buttonFillActivePrimaryColor},
+                        ${buttonFillActivePrimaryColor}
+                    );
+                }
+
+                :host([appearance-variant='accent']) .control:active {
+                    background-image: linear-gradient(
+                        ${buttonFillAccentActiveColor},
+                        ${buttonFillAccentActiveColor}
+                    );
+                }
             }
         `));
 //# sourceMappingURL=styles.js.map

package/dist/esm/patterns/button/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/patterns/button/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAC3D,OAAO,EACH,qBAAqB,EACrB,gBAAgB,EAChB,qBAAqB,EACrB,WAAW,EACX,eAAe,EACf,oBAAoB,EACpB,4BAA4B,EAC5B,aAAa,EACb,iBAAiB,EACjB,SAAS,EACT,UAAU,EACV,eAAe,EAClB,MAAM,oCAAoC,CAAC;AAC5C,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AACtE,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAE3C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;;kBAIV,aAAa;iBACd,oBAAoB;gBACrB,eAAe;;;;;UAKrB;AACE;;;;EAIE,CAAC,EACP;;;;;iBAKS,4BAA4B;;;;;;;;kBAQ3B,WAAW;;;;;;;;;;;;;qBAaR,eAAe;;iCAEH,UAAU;2BAChB,UAAU;8BACP,UAAU;;;;;;;;;;;;;;;;;;wBAkBhB,gBAAgB;kCACN,WAAW,IAAI,gBAAgB;;;cAGnD,YAAY;wBACF,gBAAgB;kCACN,WAAW,IAAI,gBAAgB;;;;;;cAMnD,iBAAiB;cACjB,iBAAiB;;;;;;;;;;;;;;;;;;;;8BAoBD,UAAU;;;cAG1B,YAAY;mBACP,WAAW,UAAU,gBAAgB;;;;;;;;;;;;;;;;;UAiB9C;AACE;;;;GAIG;AACH,EACJ;;;;;;;;;;;;;;UAcE,SAAS,CAAC,iBAAiB,KAAK,oBAAoB;;;;;;;;;UASpD,SAAS,CAAC,iBAAiB,KAAK,oBAAoB;;;;;;;;;;CAU7D,CAAC,aAAa,CACX,kBAAkB,CACd,gBAAgB,CAAC,OAAO,EACxB,GAAG,CAAA;;qCAE0B,qBAAqB;;;;;;;;qCAQrB,qBAAqB;;SAEjD,CACJ,EACD,kBAAkB,CACd,gBAAgB,CAAC,KAAK,EACtB,GAAG,CAAA;;;;;sBAKW,YAAY;;;;;;;SAOzB,CACJ,EACD,kBAAkB,CACd,gBAAgB,CAAC,KAAK,EACtB,GAAG,CAAA;;yCAE8B,qBAAqB;;;;;;2BAMnC,qBAAqB;2BACrB,qBAAqB;;;;;sBAK1B,YAAY;;;2BAGP,qBAAqB;2BACrB,qBAAqB;;;;;;;sBAO1B,iBAAiB;sBACjB,iBAAiB;;;;;;yCAME,qBAAqB;;;SAGrD,CACJ,CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,6BAA6B,GAAG,GAAG,CAAA,EAAE,CAAC,aAAa,CAC5D,kBAAkB,CACd,gBAAgB,CAAC,OAAO,EACxB,GAAG,CAAA;;0CAE+B,WAAW;2BAC1B,qBAAqB;;;;0CAIN,WAAW,IAAI,gBAAgB;;;4DAGb,YAAY;0CAC9B,WAAW,IAAI,gBAAgB;;;;0CAI/B,WAAW,IAAI,iBAAiB;;;;;;;SAOjE,CACJ,EACD,kBAAkB,CACd,gBAAgB,CAAC,KAAK,EACtB,GAAG,CAAA;;qCAE0B,qBAAqB;0CAChB,WAAW;2BAC1B,qBAAqB;;;;;;;;gCAQhB,gBAAgB;0CACN,WAAW,IAAI,gBAAgB;;;4DAGb,YAAY;;gCAExC,gBAAgB;gCAChB,WAAW;0CACD,WAAW,IAAI,gBAAgB;6BAC5C,eAAe;;;;0BAIlB,YAAY;;;;;;;;;;;;;;;;gCAgBN,WAAW;;6BAEd,eAAe;;;;;;;;;gCASZ,iBAAiB;gCACjB,WAAW;;SAElC,CACJ,CACJ,CAAC"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/patterns/button/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAC3D,OAAO,EACH,qBAAqB,EACrB,gBAAgB,EAChB,qBAAqB,EACrB,WAAW,EACX,eAAe,EACf,oBAAoB,EACpB,4BAA4B,EAC5B,aAAa,EACb,iBAAiB,EACjB,SAAS,EACT,UAAU,EACV,eAAe,EACf,sBAAsB,EACtB,sBAAsB,EACtB,4BAA4B,EAC5B,qBAAqB,EACrB,0BAA0B,EAC1B,2BAA2B,EAC3B,8BAA8B,EAC9B,4BAA4B,EAC/B,MAAM,oCAAoC,CAAC;AAC5C,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AACtE,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAE3C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;UAIf,OAAO,CAAC,aAAa,CAAC;;;;sBAIV,aAAa;qBACd,oBAAoB;oBACrB,eAAe;;;;;cAKrB;AACE;;;;EAIE,CAAC,EACP;;;;;;;;sBAQU,WAAW;;;;;;;;;;;;;yBAaR,eAAe;;qCAEH,UAAU;+BAChB,UAAU;kCACP,UAAU;;;;;;;;;;;;;;;;;;;;;kCAqBV,UAAU;;;;;;;;cAQ9B;AACE;;;;GAIG;AACH,EACJ;;;;;;;;;;;;;;cAcE,SAAS,CAAC,iBAAiB,KAAK,oBAAoB;;;;;cAKpD,SAAS,CAAC,iBAAiB,KAAK,oBAAoB;;;;;;4BAMtC,gBAAgB;sCACN,WAAW,IAAI,gBAAgB;;;;;kBAKnD,YAAY;4BACF,gBAAgB;sCACN,WAAW,IAAI,gBAAgB;;;kBAGnD,YAAY;uBACP,WAAW,UAAU,gBAAgB;;;;;;;;;kBAS1C,iBAAiB;kBACjB,iBAAiB;;;;;;;;;;;;qBAYd,4BAA4B;;;;;;;0BAOvB,qBAAqB;;;;;;;;;cASjC,SAAS,CAAC,iBAAiB,KAAK,oBAAoB;;;;;cAKpD,SAAS,CAAC,iBAAiB,KAAK,oBAAoB;;;;;;;;;;;;;;;CAejE,CAAC,aAAa,CACX,kBAAkB,CACd,gBAAgB,CAAC,OAAO,EACxB,GAAG,CAAA;;;yCAG8B,qBAAqB;;;;;;yCAMrB,qBAAqB;;;SAGrD,CACJ,EACD,kBAAkB,CACd,gBAAgB,CAAC,KAAK,EACtB,GAAG,CAAA;;;;;;SAMF,CACJ,EACD,kBAAkB,CACd,gBAAgB,CAAC,KAAK,EACtB,GAAG,CAAA;;;;+BAIoB,qBAAqB;+BACrB,qBAAqB;;yCAEX,qBAAqB;;;;;;;;;;;0BAWpC,YAAY;;;;;;;;+BAQP,qBAAqB;+BACrB,qBAAqB;;;yCAGX,qBAAqB;;;SAGrD,CACJ,CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,6BAA6B,GAAG,GAAG,CAAA,EAAE,CAAC,aAAa,CAC5D,kBAAkB,CACd,gBAAgB,CAAC,OAAO,EACxB,GAAG,CAAA;;;oCAGyB,qBAAqB;;;;oCAIrB,8BAA8B;6BACrC,4BAA4B;;;SAGhD,CACJ,EACD,kBAAkB,CACd,gBAAgB,CAAC,KAAK,EACtB,GAAG,CAAA;;;sBAGW,SAAS,CAAC,iBAAiB;;;;;0BAKvB,sBAAsB;0BACtB,sBAAsB;;6BAEnB,sBAAsB;oCACf,sBAAsB;;;;sBAIpC,SAAS,CAAC,iBAAiB;;;;sBAI3B,SAAS,CAAC,iBAAiB;;;;;0BAKvB,qBAAqB;0BACrB,qBAAqB;;6BAElB,0BAA0B;oCACnB,qBAAqB;;;;sBAInC,SAAS,CAAC,iBAAiB;;;;;;;0BAOvB,4BAA4B;0BAC5B,4BAA4B;;;;;;0BAM5B,2BAA2B;0BAC3B,2BAA2B;;;;SAI5C,CACJ,CACJ,CAAC"}

package/dist/esm/patterns/button/types.d.ts

@@ -44,5 +44,6 @@ export declare type ButtonAppearance = (typeof ButtonAppearance)[keyof typeof Bu
 export declare const ButtonAppearanceVariant: {
     readonly default: undefined;
     readonly primary: "primary";
+    readonly accent: "accent";
 };
 export declare type ButtonAppearanceVariant = (typeof ButtonAppearanceVariant)[keyof typeof ButtonAppearanceVariant];

package/dist/esm/patterns/button/types.js

@@ -13,6 +13,7 @@ export const ButtonAppearance = {
  */
 export const ButtonAppearanceVariant = {
     default: undefined,
-    primary: 'primary'
+    primary: 'primary',
+    accent: 'accent'
 };
 //# sourceMappingURL=types.js.map

package/dist/esm/patterns/button/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/patterns/button/types.ts"],"names":[],"mappings":"AAiCA;;;GAGG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC5B,OAAO,EAAE,SAAS;IAClB,KAAK,EAAE,OAAO;IACd,KAAK,EAAE,OAAO;CACR,CAAC;AAIX;;;GAGG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG;IACnC,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;CACZ,CAAC"}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/patterns/button/types.ts"],"names":[],"mappings":"AAiCA;;;GAGG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC5B,OAAO,EAAE,SAAS;IAClB,KAAK,EAAE,OAAO;IACd,KAAK,EAAE,OAAO;CACR,CAAC;AAIX;;;GAGG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG;IACnC,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,MAAM,EAAE,QAAQ;CACV,CAAC"}

package/dist/esm/src/patterns/button/types.d.ts

@@ -44,5 +44,6 @@ export declare type ButtonAppearance = (typeof ButtonAppearance)[keyof typeof Bu
 export declare const ButtonAppearanceVariant: {
     readonly default: undefined;
     readonly primary: "primary";
+    readonly accent: "accent";
 };
 export declare type ButtonAppearanceVariant = (typeof ButtonAppearanceVariant)[keyof typeof ButtonAppearanceVariant];

package/dist/esm/src/table/components/cell/index.d.ts

@@ -17,6 +17,7 @@ export declare class TableCell<TCellRecord extends TableCellRecord = TableCellRe
     cellState?: TableCellState<TCellRecord>;
     column?: TableColumn;
     recordId?: string;
+    columnId?: string;
     hasActionMenu: boolean;
     menuOpen: boolean;
     actionMenuLabel?: string;

package/dist/esm/src/table/testing/table.pageobject.d.ts

@@ -30,6 +30,7 @@ export declare class TablePageObject<T extends TableRecord> {
     getRenderedGroupRowCount(): number;
     getAllGroupRowsExpandedState(): boolean[];
     getRenderedCellView(rowIndex: number, columnIndex: number): TableCellView;
+    getRenderedCellViewById(recordId: string, columnId: string): TableCellView;
     getRenderedCellContent(rowIndex: number, columnIndex: number): string;
     getRenderedCellAnchor(rowIndex: number, columnIndex: number): Anchor;
     getRenderedGroupHeaderContent(groupRowIndex: number): string;
@@ -86,7 +87,9 @@ export declare class TablePageObject<T extends TableRecord> {
     getGroupedColumns(): string[];
     getChildRowCountForGroup(groupRowIndex: number): number;
     private getRow;
+    private getRowById;
     private getCell;
+    private getCellById;
     private getCollapseAllButton;
     private getSelectionCheckboxForRow;
     private getSelectionCheckboxForGroupRow;

package/dist/esm/src/theme-provider/design-tokens.d.ts

@@ -22,6 +22,14 @@ export declare const popupBorderColor: CSSDesignToken<string>;
 export declare const graphGridlineColor: CSSDesignToken<string>;
 export declare const tooltipBackgroundColor: CSSDesignToken<string>;
 export declare const tableRowBorderColor: CSSDesignToken<string>;
+export declare const buttonFillPrimaryColor: CSSDesignToken<string>;
+export declare const buttonPrimaryFontColor: CSSDesignToken<string>;
+export declare const buttonFillActivePrimaryColor: CSSDesignToken<string>;
+export declare const buttonFillAccentColor: CSSDesignToken<string>;
+export declare const buttonAccentBlockFontColor: CSSDesignToken<string>;
+export declare const buttonAccentOutlineFontColor: CSSDesignToken<string>;
+export declare const buttonBorderAccentOutlineColor: CSSDesignToken<string>;
+export declare const buttonFillAccentActiveColor: CSSDesignToken<string>;
 export declare const controlHeight: CSSDesignToken<string>;
 export declare const controlSlimHeight: CSSDesignToken<string>;
 export declare const smallPadding: CSSDesignToken<string>;

package/dist/esm/table/components/cell/index.d.ts

@@ -17,6 +17,7 @@ export declare class TableCell<TCellRecord extends TableCellRecord = TableCellRe
     cellState?: TableCellState<TCellRecord>;
     column?: TableColumn;
     recordId?: string;
+    columnId?: string;
     hasActionMenu: boolean;
     menuOpen: boolean;
     actionMenuLabel?: string;

package/dist/esm/table/components/cell/index.js

@@ -31,6 +31,9 @@ __decorate([
 __decorate([
     observable
 ], TableCell.prototype, "recordId", void 0);
+__decorate([
+    attr({ attribute: 'column-id' })
+], TableCell.prototype, "columnId", void 0);
 __decorate([
     attr({ attribute: 'has-action-menu', mode: 'boolean' })
 ], TableCell.prototype, "hasActionMenu", void 0);

package/dist/esm/table/components/cell/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/table/components/cell/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAgB,MAAM,yBAAyB,CAAC;AACzE,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAQ7E,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAQtC;;;GAGG;AACH,MAAM,OAAO,SAEX,SAAQ,iBAAiB;IAF3B;;QAaW,kBAAa,GAAG,KAAK,CAAC;QAGtB,aAAQ,GAAG,KAAK,CAAC;QASjB,iBAAY,GAAG,CAAC,CAAC;IAgB5B,CAAC;IAZU,wBAAwB,CAC3B,KAA+C;QAE/C,IAAI,CAAC,KAAK,CAAC,+BAA+B,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAC9D,CAAC;IAEM,kBAAkB,CACrB,KAA+C;QAE/C,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC;QACtC,IAAI,CAAC,KAAK,CAAC,yBAAyB,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IACxD,CAAC;CACJ;AArCG;IADC,UAAU;4CACoC;AAG/C;IADC,UAAU;yCACiB;AAG5B;IADC,UAAU;2CACc;AAGzB;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,iBAAiB,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;gDAC3B;AAG7B;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;2CAC1B;AAGxB;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,mBAAmB,EAAE,CAAC;kDACT;AAGhC;IADC,UAAU;mDACuC;AAGlD;IADC,UAAU;+CACa;AAkB5B,MAAM,eAAe,GAAG,SAAS,CAAC,OAAO,CAAC;IACtC,QAAQ,EAAE,YAAY;IACtB,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,eAAe,EAAE,CAAC,CAAC;AAC5E,MAAM,CAAC,MAAM,YAAY,GAAG,YAAY,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/table/components/cell/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAgB,MAAM,yBAAyB,CAAC;AACzE,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAQ7E,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAQtC;;;GAGG;AACH,MAAM,OAAO,SAEX,SAAQ,iBAAiB;IAF3B;;QAgBW,kBAAa,GAAG,KAAK,CAAC;QAGtB,aAAQ,GAAG,KAAK,CAAC;QASjB,iBAAY,GAAG,CAAC,CAAC;IAgB5B,CAAC;IAZU,wBAAwB,CAC3B,KAA+C;QAE/C,IAAI,CAAC,KAAK,CAAC,+BAA+B,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAC9D,CAAC;IAEM,kBAAkB,CACrB,KAA+C;QAE/C,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC;QACtC,IAAI,CAAC,KAAK,CAAC,yBAAyB,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IACxD,CAAC;CACJ;AAxCG;IADC,UAAU;4CACoC;AAG/C;IADC,UAAU;yCACiB;AAG5B;IADC,UAAU;2CACc;AAGzB;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;2CACR;AAGzB;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,iBAAiB,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;gDAC3B;AAG7B;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;2CAC1B;AAGxB;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,mBAAmB,EAAE,CAAC;kDACT;AAGhC;IADC,UAAU;mDACuC;AAGlD;IADC,UAAU;+CACa;AAkB5B,MAAM,eAAe,GAAG,SAAS,CAAC,OAAO,CAAC;IACtC,QAAQ,EAAE,YAAY;IACtB,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,eAAe,EAAE,CAAC,CAAC;AAC5E,MAAM,CAAC,MAAM,YAAY,GAAG,YAAY,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC"}