@duetds/components 8.0.5 → 8.1.0

package/lib/dist-custom-elements/{p-670570b2.js → p-6f7dcc4d.js}

@@ -2,8 +2,8 @@
  * Built with Duet Design System
  */
 const NAMESPACE = 'duet';
-const BUILD = /* duet */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: true, cmpDidUnload: false, cmpDidUpdate: true, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: true, cmpWillUpdate: false, connectedCallback: true, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: true, element: false, event: true, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: true, hostListenerTarget: true, hostListenerTargetBody: true, hostListenerTargetDocument: true, hostListenerTargetParent: false, hostListenerTargetWindow: true, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, invisiblePrehydration: false, isDebug: false, isDev: false, isTesting: false, lazyLoad: false, lifecycle: true, lifecycleDOMEvents: false, member: true, method: true, mode: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: true, propNumber: true, propString: true, reflect: true, scoped: true, scopedSlotTextContentFix: false, scriptDataOpts: true, shadowDelegatesFocus: true, shadowDom: true, slot: true, slotChildNodesFix: true, slotRelocation: true, state: true, style: true, svg: true, taskQueue: true, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: true, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: true, watchCallback: true };
-const Env = /* duet */ {"cdnURILocal":"http://0.0.0.0:3334","cdnURIProd":"https://cdn.duetds.com/api","duetIconVersion":"4.0.23"};
+const BUILD = /* duet */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: true, cmpDidUnload: false, cmpDidUpdate: true, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: true, cmpWillUpdate: false, connectedCallback: true, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: true, element: false, event: true, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: true, hostListenerTarget: true, hostListenerTargetBody: true, hostListenerTargetDocument: true, hostListenerTargetParent: false, hostListenerTargetWindow: true, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, invisiblePrehydration: false, isDebug: false, isDev: false, isTesting: false, lazyLoad: false, lifecycle: true, lifecycleDOMEvents: false, member: true, method: true, mode: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: true, propNumber: true, propString: true, reflect: true, scoped: true, scopedSlotTextContentFix: false, scriptDataOpts: true, shadowDelegatesFocus: true, shadowDom: true, slot: true, slotChildNodesFix: true, slotRelocation: true, state: true, style: true, svg: true, taskQueue: true, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: true, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: true, watchCallback: true };
+const Env = /* duet */ {"cdnURILocal":"http://0.0.0.0:3334","cdnURIProd":"https://cdn.duetds.com/api","duetIconVersion":"4.0.25"};
 
 /**
  * Virtual DOM patching algorithm based on Snabbdom by
@@ -537,7 +537,11 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
                         elm[memberName] = newValue;
                     }
                 }
-                catch (e) { }
+                catch (e) {
+                    /**
+                     * in case someone tries to set a read-only property, e.g. "namespaceURI", we just ignore it
+                     */
+                }
             }
             /**
              * Need to manually update attribute if:
@@ -576,6 +580,11 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
     }
 };
 const parseClassListRegex = /\s/;
+/**
+ * Parsed a string of classnames into an array
+ * @param value className string, e.g. "foo bar baz"
+ * @returns list of classes, e.g. ["foo", "bar", "baz"]
+ */
 const parseClassList = (value) => (!value ? [] : value.split(parseClassListRegex));
 const CAPTURE_EVENT_SUFFIX = 'Capture';
 const CAPTURE_EVENT_REGEX = new RegExp(CAPTURE_EVENT_SUFFIX + '$');
@@ -612,7 +621,6 @@ const updateElement = (oldVnode, newVnode, isSvgMode, memberName) => {
  * @returns the newly created node
  */
 const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
-    var _a;
     // tslint:disable-next-line: prefer-const
     const newVNode = newParentVNode.$children$[childIndex];
     let i = 0;
@@ -686,13 +694,13 @@ const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
             }
         }
     }
+    // This needs to always happen so we can hide nodes that are projected
+    // to another component but don't end up in a slot
+    elm['s-hn'] = hostTagName;
     {
-        elm['s-hn'] = hostTagName;
         if (newVNode.$flags$ & (2 /* VNODE_FLAGS.isSlotFallback */ | 1 /* VNODE_FLAGS.isSlotReference */)) {
             // remember the content reference comment
             elm['s-sr'] = true;
-            // Persist the name of the slot that this slot was going to be projected into.
-            elm['s-fs'] = (_a = newVNode.$attrs$) === null || _a === void 0 ? void 0 : _a.slot;
             // remember the content reference comment
             elm['s-cr'] = contentRef;
             // remember the slot name, or empty string for default slot
@@ -700,24 +708,22 @@ const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
             // check if we've got an old vnode for this slot
             oldVNode = oldParentVNode && oldParentVNode.$children$ && oldParentVNode.$children$[childIndex];
             if (oldVNode && oldVNode.$tag$ === newVNode.$tag$ && oldParentVNode.$elm$) {
-                // we've got an old slot vnode and the wrapper is being replaced
-                // so let's move the old slot content back to it's original location
-                putBackInOriginalLocation(oldParentVNode.$elm$, false);
+                {
+                    // we've got an old slot vnode and the wrapper is being replaced
+                    // so let's move the old slot content back to its original location
+                    putBackInOriginalLocation(oldParentVNode.$elm$, false);
+                }
             }
         }
     }
     return elm;
 };
 const putBackInOriginalLocation = (parentElm, recursive) => {
-    var _a;
     plt.$flags$ |= 1 /* PLATFORM_FLAGS.isTmpDisconnected */;
     const oldSlotChildNodes = parentElm.childNodes;
     for (let i = oldSlotChildNodes.length - 1; i >= 0; i--) {
         const childNode = oldSlotChildNodes[i];
         if (childNode['s-hn'] !== hostTagName && childNode['s-ol']) {
-            // // this child node in the old element is from another component
-            // // remove this node from the old slot's parent
-            // childNode.remove();
             // and relocate it back to it's original location
             parentReferenceNode(childNode).insertBefore(childNode, referenceNode(childNode));
             // remove the old original location comment entirely
@@ -727,12 +733,6 @@ const putBackInOriginalLocation = (parentElm, recursive) => {
             childNode['s-ol'] = undefined;
             // Reset so we can correctly move the node around again.
             childNode['s-sh'] = undefined;
-            // When putting an element node back in its original location,
-            // we need to reset the `slot` attribute back to the value it originally had
-            // so we can correctly relocate it again in the future
-            if (childNode.nodeType === 1 /* NODE_TYPE.ElementNode */) {
-                childNode.setAttribute('slot', (_a = childNode['s-sn']) !== null && _a !== void 0 ? _a : '');
-            }
             checkSlotRelocate = true;
         }
         if (recursive) {
@@ -877,8 +877,9 @@ const removeVnodes = (vnodes, startIdx, endIdx) => {
  * @param oldCh the old children of the parent node
  * @param newVNode the new VNode which will replace the parent
  * @param newCh the new children of the parent node
+ * @param isInitialRender whether or not this is the first render of the vdom
  */
-const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
+const updateChildren = (parentElm, oldCh, newVNode, newCh, isInitialRender = false) => {
     let oldStartIdx = 0;
     let newStartIdx = 0;
     let idxInOld = 0;
@@ -905,24 +906,24 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
         else if (newEndVnode == null) {
             newEndVnode = newCh[--newEndIdx];
         }
-        else if (isSameVnode(oldStartVnode, newStartVnode)) {
+        else if (isSameVnode(oldStartVnode, newStartVnode, isInitialRender)) {
             // if the start nodes are the same then we should patch the new VNode
             // onto the old one, and increment our `newStartIdx` and `oldStartIdx`
             // indices to reflect that. We don't need to move any DOM Nodes around
             // since things are matched up in order.
-            patch(oldStartVnode, newStartVnode);
+            patch(oldStartVnode, newStartVnode, isInitialRender);
             oldStartVnode = oldCh[++oldStartIdx];
             newStartVnode = newCh[++newStartIdx];
         }
-        else if (isSameVnode(oldEndVnode, newEndVnode)) {
+        else if (isSameVnode(oldEndVnode, newEndVnode, isInitialRender)) {
             // likewise, if the end nodes are the same we patch new onto old and
             // decrement our end indices, and also likewise in this case we don't
             // need to move any DOM Nodes.
-            patch(oldEndVnode, newEndVnode);
+            patch(oldEndVnode, newEndVnode, isInitialRender);
             oldEndVnode = oldCh[--oldEndIdx];
             newEndVnode = newCh[--newEndIdx];
         }
-        else if (isSameVnode(oldStartVnode, newEndVnode)) {
+        else if (isSameVnode(oldStartVnode, newEndVnode, isInitialRender)) {
             // case: "Vnode moved right"
             //
             // We've found that the last node in our window on the new children is
@@ -940,7 +941,7 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
             if ((oldStartVnode.$tag$ === 'slot' || newEndVnode.$tag$ === 'slot')) {
                 putBackInOriginalLocation(oldStartVnode.$elm$.parentNode, false);
             }
-            patch(oldStartVnode, newEndVnode);
+            patch(oldStartVnode, newEndVnode, isInitialRender);
             // We need to move the element for `oldStartVnode` into a position which
             // will be appropriate for `newEndVnode`. For this we can use
             // `.insertBefore` and `oldEndVnode.$elm$.nextSibling`. If there is a
@@ -962,7 +963,7 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
             oldStartVnode = oldCh[++oldStartIdx];
             newEndVnode = newCh[--newEndIdx];
         }
-        else if (isSameVnode(oldEndVnode, newStartVnode)) {
+        else if (isSameVnode(oldEndVnode, newStartVnode, isInitialRender)) {
             // case: "Vnode moved left"
             //
             // We've found that the first node in our window on the new children is
@@ -981,7 +982,7 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
             if ((oldStartVnode.$tag$ === 'slot' || newEndVnode.$tag$ === 'slot')) {
                 putBackInOriginalLocation(oldEndVnode.$elm$.parentNode, false);
             }
-            patch(oldEndVnode, newStartVnode);
+            patch(oldEndVnode, newStartVnode, isInitialRender);
             // We've already checked above if `oldStartVnode` and `newStartVnode` are
             // the same node, so since we're here we know that they are not. Thus we
             // can move the element for `oldEndVnode` _before_ the element for
@@ -1018,7 +1019,7 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
                     node = createElm(oldCh && oldCh[newStartIdx], newVNode, idxInOld, parentElm);
                 }
                 else {
-                    patch(elmToMove, newStartVnode);
+                    patch(elmToMove, newStartVnode, isInitialRender);
                     // invalidate the matching old node so that we won't try to update it
                     // again later on
                     oldCh[idxInOld] = undefined;
@@ -1069,19 +1070,25 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
  *
  * @param leftVNode the first VNode to check
  * @param rightVNode the second VNode to check
+ * @param isInitialRender whether or not this is the first render of the vdom
  * @returns whether they're equal or not
  */
-const isSameVnode = (leftVNode, rightVNode) => {
+const isSameVnode = (leftVNode, rightVNode, isInitialRender = false) => {
     // compare if two vnode to see if they're "technically" the same
     // need to have the same element tag, and same key to be the same
     if (leftVNode.$tag$ === rightVNode.$tag$) {
         if (leftVNode.$tag$ === 'slot') {
             return leftVNode.$name$ === rightVNode.$name$;
         }
-        // this will be set if components in the build have `key` attrs set on them
-        {
+        // this will be set if JSX tags in the build have `key` attrs set on them
+        // we only want to check this if we're not on the first render since on
+        // first render `leftVNode.$key$` will always be `null`, so we can be led
+        // astray and, for instance, accidentally delete a DOM node that we want to
+        // keep around.
+        if (!isInitialRender) {
             return leftVNode.$key$ === rightVNode.$key$;
         }
+        return true;
     }
     return false;
 };
@@ -1100,8 +1107,9 @@ const parentReferenceNode = (node) => (node['s-ol'] ? node['s-ol'] : node).paren
  *
  * @param oldVNode an old VNode whose DOM element and children we want to update
  * @param newVNode a new VNode representing an updated version of the old one
+ * @param isInitialRender whether or not this is the first render of the vdom
  */
-const patch = (oldVNode, newVNode) => {
+const patch = (oldVNode, newVNode, isInitialRender = false) => {
     const elm = (newVNode.$elm$ = oldVNode.$elm$);
     const oldChildren = oldVNode.$children$;
     const newChildren = newVNode.$children$;
@@ -1127,7 +1135,7 @@ const patch = (oldVNode, newVNode) => {
         if (oldChildren !== null && newChildren !== null) {
             // looks like there's child vnodes for both the old and new vnodes
             // so we need to call `updateChildren` to reconcile them
-            updateChildren(elm, oldChildren, newVNode, newChildren);
+            updateChildren(elm, oldChildren, newVNode, newChildren, isInitialRender);
         }
         else if (newChildren !== null) {
             // no old child vnodes, but there are new child vnodes to add
@@ -1360,7 +1368,7 @@ const nullifyVNodeRefs = (vNode) => {
  * @param isInitialLoad whether or not this is the first call after page load
  */
 const renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
-    var _a, _b;
+    var _a, _b, _c, _d;
     const hostElm = hostRef.$hostElement$;
     const cmpMeta = hostRef.$cmpMeta$;
     const oldVNode = hostRef.$vnode$ || newVNode(null, null);
@@ -1410,7 +1418,7 @@ const renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
         checkSlotFallbackVisibility = false;
     }
     // synchronous patch
-    patch(oldVNode, rootVnode);
+    patch(oldVNode, rootVnode, isInitialLoad);
     {
         // while we're moving nodes around existing nodes, temporarily disable
         // the disconnectCallback from working
@@ -1475,12 +1483,24 @@ const renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
                             // we're just going to append the node as the last child of the parent. Passing
                             // `null` as the second arg here will trigger that behavior.
                             parentNodeRef.insertBefore(nodeToRelocate, insertBeforeNode);
+                            // Reset the `hidden` value back to what it was defined as originally
+                            // This solves a problem where a `slot` is dynamically rendered and `hidden` may have
+                            // been set on content originally, but now it has a slot to go to so it should have
+                            // the value it was defined as having in the DOM, not what we overrode it to.
+                            if (nodeToRelocate.nodeType === 1 /* NODE_TYPE.ElementNode */) {
+                                nodeToRelocate.hidden = (_c = nodeToRelocate['s-ih']) !== null && _c !== void 0 ? _c : false;
+                            }
                         }
                     }
                 }
                 else {
                     // this node doesn't have a slot home to go to, so let's hide it
                     if (nodeToRelocate.nodeType === 1 /* NODE_TYPE.ElementNode */) {
+                        // Store the initial value of `hidden` so we can reset it later when
+                        // moving nodes around.
+                        if (isInitialLoad) {
+                            nodeToRelocate['s-ih'] = (_d = nodeToRelocate.hidden) !== null && _d !== void 0 ? _d : false;
+                        }
                         nodeToRelocate.hidden = true;
                     }
                 }
@@ -1808,13 +1828,13 @@ const setValue = (ref, propName, newVal, cmpMeta) => {
  */
 const proxyComponent = (Cstr, cmpMeta, flags) => {
     var _a;
+    const prototype = Cstr.prototype;
     if (cmpMeta.$members$) {
         if (Cstr.watchers) {
             cmpMeta.$watchers$ = Cstr.watchers;
         }
         // It's better to have a const than two Object.entries()
         const members = Object.entries(cmpMeta.$members$);
-        const prototype = Cstr.prototype;
         members.map(([memberName, [memberFlags]]) => {
             if ((memberFlags & 31 /* MEMBER_FLAGS.Prop */ ||
                     (memberFlags & 32 /* MEMBER_FLAGS.State */))) {
@@ -1837,6 +1857,7 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
             const attrNameToPropName = new Map();
             prototype.attributeChangedCallback = function (attrName, oldValue, newValue) {
                 plt.jmp(() => {
+                    var _a;
                     const propName = attrNameToPropName.get(attrName);
                     //  In a web component lifecycle the attributeChangedCallback runs prior to connectedCallback
                     //  in the case where an attribute was set inline.
@@ -1892,12 +1913,13 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
                         // 1. The instance is ready
                         // 2. The watchers are ready
                         // 3. The value has changed
-                        if (!(flags & 8 /* HOST_FLAGS.isConstructingInstance */) &&
+                        if (flags &&
+                            !(flags & 8 /* HOST_FLAGS.isConstructingInstance */) &&
                             flags & 128 /* HOST_FLAGS.isWatchReady */ &&
                             newValue !== oldValue) {
                             const elm = this;
                             const instance = elm;
-                            const entry = cmpMeta.$watchers$[attrName];
+                            const entry = (_a = cmpMeta.$watchers$) === null || _a === void 0 ? void 0 : _a[attrName];
                             entry === null || entry === void 0 ? void 0 : entry.forEach((callbackName) => {
                                 if (instance[callbackName] != null) {
                                     instance[callbackName].call(instance, newValue, oldValue, attrName);
@@ -1919,10 +1941,11 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
                 ...members
                     .filter(([_, m]) => m[0] & 15 /* MEMBER_FLAGS.HasAttribute */)
                     .map(([propName, m]) => {
+                    var _a;
                     const attrName = m[1] || propName;
                     attrNameToPropName.set(attrName, propName);
                     if (m[0] & 512 /* MEMBER_FLAGS.ReflectAttr */) {
-                        cmpMeta.$attrsToReflect$.push([propName, attrName]);
+                        (_a = cmpMeta.$attrsToReflect$) === null || _a === void 0 ? void 0 : _a.push([propName, attrName]);
                     }
                     return attrName;
                 }),
@@ -2123,8 +2146,7 @@ const proxyCustomElement = (Cstr, compactMeta) => {
     {
         cmpMeta.$attrsToReflect$ = [];
     }
-    // TODO(STENCIL-914): this check and `else` block can go away and be replaced by just `BUILD.scoped` once we
-    // default our pseudo-slot behavior
+    // TODO(STENCIL-914): this check and `else` block can go away and be replaced by just the `scoped` check
     {
         {
             patchChildSlotNodes(Cstr.prototype, cmpMeta);

package/lib/dist-custom-elements/{p-b996e85b.js → p-6fbb1970.js}

@@ -1,147 +1,147 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, d as Host } from './p-670570b2.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-6f7dcc4d.js';
 import { s as sizeNavigation, i as sizeHeader } from './p-c057158b.js';
-import { i as inheritGlobalTheme } from './p-d48735b6.js';
-import { d as debounce } from './p-3d8d557b.js';
-import { a as getLanguage, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver } from './p-4883df66.js';
-import { a as breakpointTokensUpTo, b as breakpointToToken } from './p-e19d1e27.js';
+import { i as inheritGlobalTheme } from './p-a58bd561.js';
+import { d as debounce } from './p-9e371678.js';
+import { a as getLanguage, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver } from './p-2e36d5bf.js';
+import { a as breakpointTokensUpTo, b as breakpointToToken } from './p-57a1cba9.js';
 
 const duetTableCss = "duet-table{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-bottom:20px !important;display:block;font-variant-numeric:tabular-nums}duet-table table,duet-table thead,duet-table tbody,duet-table tfoot,duet-table th,duet-table td,duet-table tr{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}duet-table.duet-m-0{margin:0 !important}duet-table table{width:100%;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1rem;text-align:left;border-spacing:0;border-collapse:separate}duet-table.duet-table-hide-head-visually.duet-table-hide-head-visually thead,duet-table.duet-table-hide-head-visually.duet-table-hide-head-visually thead *{position:absolute !important;top:0;width:1px !important;height:1px !important;padding:0 !important;overflow:hidden !important;clip:rect(1px, 1px, 1px, 1px) !important;border:0 !important}duet-table.duet-theme-turva table{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"}duet-table td{-webkit-hyphens:auto;hyphens:auto;color:rgb(0, 41, 77)}duet-table.duet-theme-turva td{color:rgb(23, 28, 58)}duet-table th{font-weight:600;line-height:1.25;color:rgb(101, 119, 135);text-align:left}duet-table.duet-theme-turva th{color:rgb(116, 116, 117)}duet-table tbody th{font-weight:600;color:rgb(0, 41, 77)}duet-table.duet-theme-turva tbody th{color:rgb(23, 28, 58)}duet-table .duet-table-action-row td:last-child{justify-self:end;padding-right:20px !important;white-space:nowrap}duet-table span.duet-table-cell-heading{display:none}.duet-table-flattened table,.duet-table-flattened thead,.duet-table-flattened tbody,.duet-table-flattened tfoot,.duet-table-flattened th,.duet-table-flattened td,.duet-table-flattened tr{display:block}.duet-table-flattened thead tr{position:absolute !important;top:0;width:1px !important;height:1px !important;padding:0 !important;overflow:hidden !important;clip:rect(1px, 1px, 1px, 1px) !important;border:0 !important}.duet-table-flattened td{line-height:1.25}.duet-table-flattened td:not(:last-child){margin-bottom:16px !important}.duet-table-flattened td span.duet-table-cell-heading{margin-bottom:4px !important;display:block;font-size:1rem;font-weight:600;color:rgb(0, 41, 77)}.duet-table-flattened.duet-theme-turva td span.duet-table-cell-heading{color:rgb(23, 28, 58)}.duet-table-flattened tbody td,.duet-table-flattened tbody th,.duet-table-flattened tfoot td{padding:0 !important;text-align:left !important}.duet-table-flattened tbody th{font-weight:600;line-height:1.25;color:rgb(101, 119, 135);text-align:left}.duet-table-sticky thead th{position:sticky;top:0;background:rgb(255, 255, 255)}.duet-table-striped td,.duet-table-striped th{padding:20px !important}@media (max-width: 35.9375em){.duet-table-striped td,.duet-table-striped th{padding:20px 12px !important}}.duet-table-striped tbody th{background:rgb(255, 255, 255)}.duet-table-striped.duet-table-sticky thead th{border-bottom:1px solid rgb(225, 227, 230)}.duet-table-striped.duet-table-sticky.duet-theme-turva thead th{border-bottom-color:rgb(228, 228, 230)}.duet-table-striped tbody:not(:first-of-type) th{padding-top:40px !important}.duet-table-striped tbody:only-of-type tr:nth-of-type(odd){background:rgba(0, 80, 128, 0.04)}.duet-table-striped.duet-theme-turva tbody:only-of-type tr:nth-of-type(odd){background:rgba(23, 28, 58, 0.04)}.duet-table-striped tbody:not(:only-of-type) tr:nth-of-type(even){background:rgba(0, 80, 128, 0.04)}.duet-table-striped.duet-theme-turva tbody:not(:only-of-type) tr:nth-of-type(even){background:rgba(23, 28, 58, 0.04)}.duet-table-striped tfoot td{border-top:1px solid rgb(225, 227, 230)}.duet-table-striped.duet-theme-turva tfoot td{border-top-color:rgb(228, 228, 230)}.duet-table-striped.duet-table-flattened tbody:not(:first-of-type) th{padding-top:20px !important}.duet-table-striped.duet-table-flattened tr{padding:20px !important}.duet-table-striped.duet-table-flattened tfoot td{border-top:0}.duet-table-striped.duet-table-flattened tfoot tr{border-top:1px solid rgb(225, 227, 230)}.duet-table-striped.duet-table-flattened.duet-theme-turva tfoot tr{border-top-color:rgb(228, 228, 230)}.duet-table-fixed th,.duet-table-minimal th,.duet-table-plain th{padding:16px !important;border-bottom:1px solid rgb(101, 119, 135)}.duet-table-fixed th:first-child,.duet-table-minimal th:first-child,.duet-table-plain th:first-child{padding-left:0 !important}.duet-table-fixed th:last-child,.duet-table-minimal th:last-child,.duet-table-plain th:last-child{padding-right:0 !important}.duet-theme-turva.duet-table-fixed th,.duet-theme-turva.duet-table-minimal th,.duet-theme-turva.duet-table-plain th{border-bottom-color:rgb(68, 68, 69)}.duet-table-fixed tbody th,.duet-table-minimal tbody th,.duet-table-plain tbody th{padding-top:40px !important;border-bottom-color:rgb(225, 227, 230)}.duet-theme-turva.duet-table-fixed tbody th,.duet-theme-turva.duet-table-minimal tbody th,.duet-theme-turva.duet-table-plain tbody th{border-bottom-color:rgb(228, 228, 230)}.duet-table-fixed td,.duet-table-minimal td,.duet-table-plain td{padding:16px !important}.duet-table-fixed td:first-child,.duet-table-minimal td:first-child,.duet-table-plain td:first-child{padding-left:0 !important}.duet-table-fixed td:last-child,.duet-table-minimal td:last-child,.duet-table-plain td:last-child{padding-right:0 !important}.duet-table-fixed tbody td,.duet-table-minimal tbody td,.duet-table-plain tbody td{border-bottom:1px solid rgb(225, 227, 230)}.duet-theme-turva.duet-table-fixed tbody td,.duet-theme-turva.duet-table-minimal tbody td,.duet-theme-turva.duet-table-plain tbody td{border-bottom-color:rgb(228, 228, 230)}.duet-table-flattened.duet-table-fixed tbody:first-of-type th,.duet-table-flattened.duet-table-minimal tbody:first-of-type th,.duet-table-flattened.duet-table-plain tbody:first-of-type th{padding-top:0 !important}.duet-table-flattened.duet-table-fixed td,.duet-table-flattened.duet-table-minimal td,.duet-table-flattened.duet-table-plain td,.duet-table-flattened.duet-table-fixed tbody th,.duet-table-flattened.duet-table-minimal tbody th,.duet-table-flattened.duet-table-plain tbody th{border-bottom:0}.duet-table-flattened.duet-table-fixed tr,.duet-table-flattened.duet-table-minimal tr,.duet-table-flattened.duet-table-plain tr{padding:20px 0 !important}.duet-table-flattened.duet-table-fixed tbody th,.duet-table-flattened.duet-table-minimal tbody th,.duet-table-flattened.duet-table-plain tbody th{padding-top:20px !important}.duet-table-flattened.duet-table-fixed tfoot td,.duet-table-flattened.duet-table-minimal tfoot td,.duet-table-flattened.duet-table-plain tfoot td{margin-bottom:4px !important}.duet-table-flattened.duet-table-fixed tbody:not(:only-of-type) tr:first-child,.duet-table-flattened.duet-table-minimal tbody:not(:only-of-type) tr:first-child,.duet-table-flattened.duet-table-plain tbody:not(:only-of-type) tr:first-child{border-bottom:0}.duet-table-plain.duet-table-flattened tbody tr{border-bottom:1px solid rgb(225, 227, 230)}.duet-table-plain.duet-table-flattened.duet-theme-turva tbody tr{border-bottom-color:rgb(228, 228, 230)}.duet-table-minimal tbody tr,.duet-table-minimal tbody tr td{vertical-align:top;border-bottom:0 none}.duet-table-minimal tbody tr:last-of-type,.duet-table-minimal tbody tr:last-of-type td{border-bottom:1px solid rgb(225, 227, 230)}.duet-table-minimal.duet-table-flattened tbody tr,.duet-table-minimal.duet-table-flattened tbody tr td{border-bottom:0 none}.duet-table-minimal.duet-table-flattened tbody tr td[data-heading]::before{display:none}.duet-table-minimal.duet-table-flattened tfoot{border-top:1px solid rgb(225, 227, 230)}.duet-table-minimal.duet-table-flattened.duet-theme-turva tfoot{border-top-color:rgb(228, 228, 230)}.duet-table-fixed table{table-layout:fixed}.duet-table-fixed tbody tr,.duet-table-fixed tbody tr td,.duet-table-fixed tbody tr td:first-child{padding:4px !important;vertical-align:text-bottom;border-bottom:0 none}.duet-table-fixed thead{display:none}.duet-table-fixed tbody tr,.duet-table-fixed tbody tr td{border-bottom:0 none}.duet-table-fixed:not(.duet-table-flattened) tfoot{border-top:1px solid rgb(225, 227, 230)}.duet-table-fixed:not(.duet-table-flattened).duet-theme-turva tfoot{border-top-color:rgb(228, 228, 230)}.duet-table-scrollable{position:relative;width:100%;overflow-x:auto;background:linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0)), linear-gradient(-90deg, #fff 0%, rgba(255, 255, 255, 0)) 100% 0, radial-gradient(farthest-side at 0% 50%, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0)), radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0)) 100% 0%;background-repeat:no-repeat;background-attachment:local, local, scroll, scroll;background-size:100px 100%, 100px 100%, 12px 100%, 12px 100%}.duet-table-selected-column{background:rgba(0, 119, 179, 0.08)}.duet-theme-turva .duet-table-selected-column{background:rgba(68, 68, 69, 0.08)}.duet-table-sortable tbody tr td:first-child,.duet-table-sortable thead tr th:first-child{padding:20px}.duet-table-sortable:not(.duet-table-flattened) tfoot{border-top:1px solid rgb(225, 227, 230)}.duet-table-sortable:not(.duet-table-flattened).duet-theme-turva tfoot{border-top-color:rgb(228, 228, 230)}.duet-table-actions table{table-layout:auto}.duet-table-actions thead th:last-child{width:1px;white-space:nowrap}.duet-editable-table-table.duet-table-flattened tr{display:grid;grid-template-columns:repeat(2, 1fr);grid-auto-rows:auto;gap:10px}.duet-editable-table-table.duet-table-flattened tr.duet-table-action-row td:last-child::before{padding:0;content:\"\"}.duet-editable-table-table.duet-table-flattened td{grid-column:1/2}.duet-editable-table-table.duet-table-flattened td:first-child{grid-row:1;grid-column:1}.duet-editable-table-table.duet-table-flattened td:last-child{grid-row:1;grid-column:2}";
 
 const stickyTopValues = {
-  none: 0,
-  "with-links": parseFloat(sizeNavigation) * 16,
-  "without-links": parseFloat(sizeHeader) * 16,
+    none: 0,
+    "with-links": parseFloat(sizeNavigation) * 16, // convert rem -> px
+    "without-links": parseFloat(sizeHeader) * 16,
 };
 const DuetTable = /*@__PURE__*/ proxyCustomElement(class DuetTable extends H {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.headingSelector = "thead tr > :not(*.duet-editable-table-actions-menu)";
-    this.handleMediaQueryChange = (mq) => {
-      this.matchesBreakpoint = breakpointTokensUpTo.includes(this.breakpoint) ? !mq.matches : mq.matches;
-    };
-    this.matchesBreakpoint = true;
-    this.language = getLanguage();
-    this.theme = undefined;
-    this.margin = "auto";
-    this.variation = "striped";
-    this.sticky = false;
-    this.stickyDistance = "with-links";
-    this.breakpoint = "small";
-    this.hideHeadVisually = false;
-  }
-  watchLanguageStateHandler(newValue, oldValue) {
-    if (newValue !== oldValue) {
-      setTimeout(() => this.copyHeadingsToCells(), 50);
+    constructor() {
+        super();
+        this.__registerHost();
+        this.headingSelector = "thead tr > :not(*.duet-editable-table-actions-menu)";
+        this.handleMediaQueryChange = (mq) => {
+            this.matchesBreakpoint = breakpointTokensUpTo.includes(this.breakpoint) ? !mq.matches : mq.matches;
+        };
+        this.matchesBreakpoint = true;
+        this.language = getLanguage();
+        this.theme = undefined;
+        this.margin = "auto";
+        this.variation = "striped";
+        this.sticky = false;
+        this.stickyDistance = "with-links";
+        this.breakpoint = "small";
+        this.hideHeadVisually = false;
     }
-  }
-  connectedCallback() {
-    const token = this.breakpoint === "none" || this.breakpoint === "none-scrollable" ? "all" : breakpointToToken[this.breakpoint];
-    this.mq = matchMedia(token);
-    this.mq.addEventListener("change", debounce(this.handleMediaQueryChange, 50));
-    this.handleMediaQueryChange(this.mq);
-    this.observer = new MutationObserver(() => debounce(this.copyHeadingsToCells(), 50));
-    this.observer.observe(this.element, {
-      childList: true,
-      subtree: true,
-    });
-  }
-  componentWillLoad() {
-    inheritGlobalTheme(this);
-    this.copyHeadingsToCells();
-    if (this.sticky && this.breakpoint === "none-scrollable") {
-      console.warn(`[DUET WARNING]: sticky and breakpoint="none-scrollable" are incompatible. Scrollable takes precedence`);
+    watchLanguageStateHandler(newValue, oldValue) {
+        if (newValue !== oldValue) {
+            setTimeout(() => this.copyHeadingsToCells(), 50);
+        }
     }
-    if (this.sticky) {
-      const stickyTop = stickyTopValues[this.stickyDistance];
-      const headingElements = this.element.querySelectorAll(this.headingSelector);
-      headingElements.forEach(th => (th.style.top = `${stickyTop}px`));
+    connectedCallback() {
+        const token = this.breakpoint === "none" || this.breakpoint === "none-scrollable" ? "all" : breakpointToToken[this.breakpoint];
+        this.mq = matchMedia(token);
+        this.mq.addEventListener("change", debounce(this.handleMediaQueryChange, 50));
+        this.handleMediaQueryChange(this.mq);
+        this.observer = new MutationObserver(() => debounce(this.copyHeadingsToCells(), 50));
+        this.observer.observe(this.element, {
+            childList: true,
+            subtree: true,
+        });
     }
-  }
-  componentDidLoad() {
-    // this clears all pending mutations,
-    // that way we avoid dealing with any initial changes
-    // and only get genuine mutations as rows are added/removed
-    this.observer ? this.observer.takeRecords() : null;
-    connectLanguageChangeObserver(this);
-  }
-  disconnectedCallback() {
-    this.observer.disconnect();
-    this.observer = null;
-    this.mq.removeListener(this.handleMediaQueryChange);
-    this.mq = null;
-    this.matchesBreakpoint = true;
-    disconnectLanguageChangeObserver(this);
-  }
-  /**
-   * Local methods.
-   */
-  copyHeadingsToCells() {
-    const headingElements = this.element.querySelectorAll(this.headingSelector);
-    const rowElements = this.element.querySelectorAll("tbody tr");
-    const headings = Array.from(headingElements).map(th => th.textContent.trim());
-    rowElements.forEach(tr => {
-      tr.querySelectorAll("td").forEach((td, i) => {
-        if (headings[i]) {
-          const previousSpan = td.querySelector(".duet-table-cell-heading");
-          if (!previousSpan || previousSpan.textContent !== headings[i]) {
-            previousSpan === null || previousSpan === void 0 ? void 0 : previousSpan.remove();
-            const span = document.createElement("span");
-            span.textContent = headings[i];
-            span.classList.add("duet-table-cell-heading");
-            span.setAttribute("aria-hidden", "true");
-            span.inert = true;
-            td.prepend(span);
-          }
+    componentWillLoad() {
+        inheritGlobalTheme(this);
+        this.copyHeadingsToCells();
+        if (this.sticky && this.breakpoint === "none-scrollable") {
+            console.warn(`[DUET WARNING]: sticky and breakpoint="none-scrollable" are incompatible. Scrollable takes precedence`);
+        }
+        if (this.sticky) {
+            const stickyTop = stickyTopValues[this.stickyDistance];
+            const headingElements = this.element.querySelectorAll(this.headingSelector);
+            headingElements.forEach(th => (th.style.top = `${stickyTop}px`));
         }
-      });
-    });
-  }
-  render() {
-    return (h(Host, { class: {
-        [`duet-table-${this.variation}`]: true,
-        "duet-table-flattened": !this.matchesBreakpoint,
-        // sticky only valid when in regular table layout
-        "duet-table-sticky": this.matchesBreakpoint && this.sticky,
-        "duet-table-scrollable": this.breakpoint === "none-scrollable",
-        "duet-m-0": this.margin === "none",
-        "duet-theme-turva": this.theme === "turva",
-        "duet-table-hide-head-visually": this.hideHeadVisually,
-      } }, h("slot", null)));
-  }
-  get element() { return this; }
-  static get watchers() { return {
-    "language": ["watchLanguageStateHandler"]
-  }; }
-  static get style() { return duetTableCss; }
+    }
+    componentDidLoad() {
+        // this clears all pending mutations,
+        // that way we avoid dealing with any initial changes
+        // and only get genuine mutations as rows are added/removed
+        this.observer ? this.observer.takeRecords() : null;
+        connectLanguageChangeObserver(this);
+    }
+    disconnectedCallback() {
+        this.observer.disconnect();
+        this.observer = null;
+        this.mq.removeListener(this.handleMediaQueryChange);
+        this.mq = null;
+        this.matchesBreakpoint = true;
+        disconnectLanguageChangeObserver(this);
+    }
+    /**
+     * Local methods.
+     */
+    copyHeadingsToCells() {
+        const headingElements = this.element.querySelectorAll(this.headingSelector);
+        const rowElements = this.element.querySelectorAll("tbody tr");
+        const headings = Array.from(headingElements).map(th => th.textContent.trim());
+        rowElements.forEach(tr => {
+            tr.querySelectorAll("td").forEach((td, i) => {
+                if (headings[i]) {
+                    const previousSpan = td.querySelector(".duet-table-cell-heading");
+                    if (!previousSpan || previousSpan.textContent !== headings[i]) {
+                        previousSpan === null || previousSpan === void 0 ? void 0 : previousSpan.remove();
+                        const span = document.createElement("span");
+                        span.textContent = headings[i];
+                        span.classList.add("duet-table-cell-heading");
+                        span.setAttribute("aria-hidden", "true");
+                        span.inert = true;
+                        td.prepend(span);
+                    }
+                }
+            });
+        });
+    }
+    render() {
+        return (h(Host, { class: {
+                [`duet-table-${this.variation}`]: true,
+                "duet-table-flattened": !this.matchesBreakpoint,
+                // sticky only valid when in regular table layout
+                "duet-table-sticky": this.matchesBreakpoint && this.sticky,
+                "duet-table-scrollable": this.breakpoint === "none-scrollable",
+                "duet-m-0": this.margin === "none",
+                "duet-theme-turva": this.theme === "turva",
+                "duet-table-hide-head-visually": this.hideHeadVisually,
+            } }, h("slot", null)));
+    }
+    get element() { return this; }
+    static get watchers() { return {
+        "language": ["watchLanguageStateHandler"]
+    }; }
+    static get style() { return duetTableCss; }
 }, [4, "duet-table", {
-    "theme": [1025],
-    "margin": [1],
-    "variation": [1],
-    "sticky": [4],
-    "stickyDistance": [1, "sticky-distance"],
-    "breakpoint": [1],
-    "hideHeadVisually": [4, "hide-head-visually"],
-    "matchesBreakpoint": [32],
-    "language": [32]
-  }, undefined, {
-    "language": ["watchLanguageStateHandler"]
-  }]);
+        "theme": [1025],
+        "margin": [1],
+        "variation": [1],
+        "sticky": [4],
+        "stickyDistance": [1, "sticky-distance"],
+        "breakpoint": [1],
+        "hideHeadVisually": [4, "hide-head-visually"],
+        "matchesBreakpoint": [32],
+        "language": [32]
+    }, undefined, {
+        "language": ["watchLanguageStateHandler"]
+    }]);
 function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["duet-table"];
-  components.forEach(tagName => { switch (tagName) {
-    case "duet-table":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, DuetTable);
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["duet-table"];
+    components.forEach(tagName => { switch (tagName) {
+        case "duet-table":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, DuetTable);
+            }
+            break;
+    } });
 }
 
 export { DuetTable as D, defineCustomElement as d };