@limetech/lime-elements 39.14.0 → 39.15.0

package/dist/collection/components/collapsible-section/collapsible-section.css

@@ -135,6 +135,15 @@ section.open .open-close-toggle:focus-visible + .expand-icon .line:nth-of-type(3
 * for backward compatibility via copy rules in the Stencil config.
 */
 /**
+* Neutralizes the user-agent styles that browsers apply to `<button>` elements
+* (their default background, border, padding, font, etc.), without stripping
+* the useful defaults that `all: unset;` would also remove
+* (such as `display`, `cursor`, and focus behavior).
+*
+* Prefer this mixin over `all: unset;` on `<button>` elements, then layer
+* the styling you want on top — often one of the `is-*-clickable` mixins.
+*/
+/**
 * This can be used on a trigger element that opens a dropdown menu or a popover.
 */
 /**
@@ -235,34 +244,41 @@ section.open .open-close-toggle:focus-visible + .expand-icon .line:nth-of-type(3
   display: none;
 }
 
-.open-close-toggle {
-  all: unset;
+button.open-close-toggle {
+  appearance: none;
+  background: none;
+  border: none;
+  padding: 0;
+  margin: 0;
+  font: inherit;
+  color: inherit;
+  text-align: inherit;
   position: absolute;
   inset: 0;
   width: 100%;
 }
-.open-close-toggle:focus {
+button.open-close-toggle:focus {
   outline: none;
 }
-.open-close-toggle:focus-visible {
+button.open-close-toggle:focus-visible {
   outline: none;
   box-shadow: var(--shadow-depth-8-focused);
 }
-.open-close-toggle {
+button.open-close-toggle {
   transition: background-color 0.4s ease, border-radius 0.1s ease;
   cursor: pointer;
   z-index: -1;
   background-color: var(--closed-header-background-color, rgb(var(--contrast-200)));
   border-radius: var(--border-radius-of-header);
 }
-.open-close-toggle:hover, .open-close-toggle:focus-visible {
+button.open-close-toggle:hover, button.open-close-toggle:focus-visible {
   background-color: var(--open-header-background-color, rgb(var(--contrast-300)));
 }
-section.open .open-close-toggle {
+section.open button.open-close-toggle {
   background-color: var(--open-header-background-color, rgb(var(--contrast-100)));
   border-radius: var(--border-radius-of-header) var(--border-radius-of-header) var(--limel-cs-open-header-bottom-border-radius, 0) var(--limel-cs-open-header-bottom-border-radius, 0);
 }
-section.open .open-close-toggle:hover, section.open .open-close-toggle:focus-visible {
+section.open button.open-close-toggle:hover, section.open button.open-close-toggle:focus-visible {
   background-color: var(--open-header-background-color, rgb(var(--contrast-300)));
 }
 

package/dist/collection/components/color-picker/color-picker-palette.css

@@ -16,6 +16,15 @@
 * for backward compatibility via copy rules in the Stencil config.
 */
 /**
+* Neutralizes the user-agent styles that browsers apply to `<button>` elements
+* (their default background, border, padding, font, etc.), without stripping
+* the useful defaults that `all: unset;` would also remove
+* (such as `display`, `cursor`, and focus behavior).
+*
+* Prefer this mixin over `all: unset;` on `<button>` elements, then layer
+* the styling you want on top — often one of the `is-*-clickable` mixins.
+*/
+/**
 * This can be used on a trigger element that opens a dropdown menu or a popover.
 */
 /**
@@ -194,7 +203,14 @@ limel-input-field {
 }
 
 button.swatch {
-  all: unset;
+  appearance: none;
+  background: none;
+  border: none;
+  padding: 0;
+  margin: 0;
+  font: inherit;
+  color: inherit;
+  text-align: inherit;
   position: relative;
   display: flex;
   justify-content: center;

package/dist/collection/components/color-picker/color-picker.css

@@ -10,6 +10,15 @@
 * for backward compatibility via copy rules in the Stencil config.
 */
 /**
+* Neutralizes the user-agent styles that browsers apply to `<button>` elements
+* (their default background, border, padding, font, etc.), without stripping
+* the useful defaults that `all: unset;` would also remove
+* (such as `display`, `cursor`, and focus behavior).
+*
+* Prefer this mixin over `all: unset;` on `<button>` elements, then layer
+* the styling you want on top — often one of the `is-*-clickable` mixins.
+*/
+/**
 * This can be used on a trigger element that opens a dropdown menu or a popover.
 */
 /**
@@ -138,7 +147,14 @@
 }
 
 button[slot=trigger] {
-  all: unset;
+  appearance: none;
+  background: none;
+  border: none;
+  padding: 0;
+  margin: 0;
+  font: inherit;
+  color: inherit;
+  text-align: inherit;
   box-sizing: border-box;
   position: relative;
   isolation: isolate;

package/dist/collection/components/date-picker/flatpickr-adapter/flatpickr-adapter.css

@@ -16,6 +16,15 @@
 * for backward compatibility via copy rules in the Stencil config.
 */
 /**
+* Neutralizes the user-agent styles that browsers apply to `<button>` elements
+* (their default background, border, padding, font, etc.), without stripping
+* the useful defaults that `all: unset;` would also remove
+* (such as `display`, `cursor`, and focus behavior).
+*
+* Prefer this mixin over `all: unset;` on `<button>` elements, then layer
+* the styling you want on top — often one of the `is-*-clickable` mixins.
+*/
+/**
 * This can be used on a trigger element that opens a dropdown menu or a popover.
 */
 /**

package/dist/collection/components/dialog/dialog.css

@@ -16,6 +16,15 @@
 * for backward compatibility via copy rules in the Stencil config.
 */
 /**
+* Neutralizes the user-agent styles that browsers apply to `<button>` elements
+* (their default background, border, padding, font, etc.), without stripping
+* the useful defaults that `all: unset;` would also remove
+* (such as `display`, `cursor`, and focus behavior).
+*
+* Prefer this mixin over `all: unset;` on `<button>` elements, then layer
+* the styling you want on top — often one of the `is-*-clickable` mixins.
+*/
+/**
 * This can be used on a trigger element that opens a dropdown menu or a popover.
 */
 /**

package/dist/collection/components/dock/dock-button/dock-button.css

@@ -10,6 +10,15 @@
 * for backward compatibility via copy rules in the Stencil config.
 */
 /**
+* Neutralizes the user-agent styles that browsers apply to `<button>` elements
+* (their default background, border, padding, font, etc.), without stripping
+* the useful defaults that `all: unset;` would also remove
+* (such as `display`, `cursor`, and focus behavior).
+*
+* Prefer this mixin over `all: unset;` on `<button>` elements, then layer
+* the styling you want on top — often one of the `is-*-clickable` mixins.
+*/
+/**
 * This can be used on a trigger element that opens a dropdown menu or a popover.
 */
 /**
@@ -94,8 +103,15 @@
 * Nothing in this file may output any CSS
 * without being explicitly called by outside code.
 */
-.button {
-  all: unset;
+button.button {
+  appearance: none;
+  background: none;
+  border: none;
+  padding: 0;
+  margin: 0;
+  font: inherit;
+  color: inherit;
+  text-align: inherit;
   isolation: isolate;
   position: relative;
   transition: color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);
@@ -103,18 +119,18 @@
   color: var(--limel-dock-item-text-color);
   background-color: var(--dock-background-color);
 }
-.button:hover, .button:focus, .button:focus-visible {
+button.button:hover, button.button:focus, button.button:focus-visible {
   will-change: color, background-color, box-shadow, transform;
 }
-.button:hover, .button:focus-visible {
+button.button:hover, button.button:focus-visible {
   transform: translate3d(0, -0.04rem, 0);
   color: var(--limel-theme-on-surface-color);
   background-color: var(--lime-elevated-surface-background-color);
 }
-.button:hover {
+button.button:hover {
   box-shadow: var(--button-shadow-hovered);
 }
-.button:active {
+button.button:active {
   --limel-clickable-transform-timing-function: cubic-bezier(
       0.83,
       -0.15,
@@ -125,18 +141,18 @@
   background-color: var(--limel-theme-surface-background-color);
   box-shadow: var(--button-shadow-inset-pressed);
 }
-.button:hover, .button:active {
+button.button:hover, button.button:active {
   --limel-clickable-transition-speed: 0.2s;
   --limel-clickable-transform-speed: 0.16s;
 }
-.button:focus {
+button.button:focus {
   outline: none;
 }
-.button:focus-visible {
+button.button:focus-visible {
   outline: none;
   box-shadow: var(--shadow-depth-8-focused);
 }
-.button {
+button.button {
   box-sizing: border-box;
   display: flex;
   align-items: center;
@@ -147,18 +163,18 @@
   padding: 0 0.5rem;
   min-width: var(--dock-item-height);
 }
-.button:hover {
+button.button:hover {
   z-index: 1;
 }
-.button.selected {
+button.button.selected {
   color: var(--limel-dock-item-text-color--selected);
   background-color: var(--dock-item-background-color--selected, rgb(var(--contrast-200)));
   box-shadow: var(--button-shadow-inset);
 }
-.button.selected:focus-visible {
+button.button.selected:focus-visible {
   box-shadow: var(--button-shadow-inset), var(--shadow-depth-8-focused);
 }
-.button.selected .icon {
+button.button.selected .icon {
   color: var(--limel-dock-item-text--selected);
 }
 

package/dist/collection/components/dock/dock.css

@@ -10,6 +10,15 @@
 * for backward compatibility via copy rules in the Stencil config.
 */
 /**
+* Neutralizes the user-agent styles that browsers apply to `<button>` elements
+* (their default background, border, padding, font, etc.), without stripping
+* the useful defaults that `all: unset;` would also remove
+* (such as `display`, `cursor`, and focus behavior).
+*
+* Prefer this mixin over `all: unset;` on `<button>` elements, then layer
+* the styling you want on top — often one of the `is-*-clickable` mixins.
+*/
+/**
 * This can be used on a trigger element that opens a dropdown menu or a popover.
 */
 /**
@@ -94,26 +103,33 @@
 * Nothing in this file may output any CSS
 * without being explicitly called by outside code.
 */
-.expand-shrink {
-  all: unset;
+button.expand-shrink {
+  appearance: none;
+  background: none;
+  border: none;
+  padding: 0;
+  margin: 0;
+  font: inherit;
+  color: inherit;
+  text-align: inherit;
   box-sizing: border-box;
   transition: color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);
   cursor: pointer;
   color: var(--limel-theme-on-surface-color);
   background-color: transparent;
 }
-.expand-shrink:hover, .expand-shrink:focus, .expand-shrink:focus-visible {
+button.expand-shrink:hover, button.expand-shrink:focus, button.expand-shrink:focus-visible {
   will-change: color, background-color, box-shadow, transform;
 }
-.expand-shrink:hover, .expand-shrink:focus-visible {
+button.expand-shrink:hover, button.expand-shrink:focus-visible {
   transform: translate3d(0, 0.01rem, 0);
   color: var(--limel-theme-on-surface-color);
   background-color: var(--lime-elevated-surface-background-color);
 }
-.expand-shrink:hover {
+button.expand-shrink:hover {
   box-shadow: var(--button-shadow-hovered);
 }
-.expand-shrink:active {
+button.expand-shrink:active {
   --limel-clickable-transform-timing-function: cubic-bezier(
       0.83,
       -0.15,
@@ -123,18 +139,18 @@
   transform: translate3d(0, 0.05rem, 0);
   box-shadow: var(--button-shadow-pressed);
 }
-.expand-shrink:hover, .expand-shrink:active {
+button.expand-shrink:hover, button.expand-shrink:active {
   --limel-clickable-transition-speed: 0.2s;
   --limel-clickable-transform-speed: 0.16s;
 }
-.expand-shrink:focus {
+button.expand-shrink:focus {
   outline: none;
 }
-.expand-shrink:focus-visible {
+button.expand-shrink:focus-visible {
   outline: none;
   box-shadow: var(--shadow-depth-8-focused);
 }
-.expand-shrink {
+button.expand-shrink {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -143,13 +159,13 @@
   margin: var(--limel-dock-padding);
   border-radius: 0.375rem;
 }
-.expand-shrink.expanded {
+button.expand-shrink.expanded {
   justify-content: flex-end;
 }
-.expand-shrink.expanded limel-icon {
+button.expand-shrink.expanded limel-icon {
   transform: rotateY(180deg);
 }
-.expand-shrink limel-icon {
+button.expand-shrink limel-icon {
   width: calc(var(--dock-expand-shrink-button-height) - 0.25rem);
   color: var(--dock-item-icon-color, var(--limel-dock-item-text-color));
 }

package/dist/collection/components/drag-handle/drag-handle.css

@@ -10,6 +10,15 @@
 * for backward compatibility via copy rules in the Stencil config.
 */
 /**
+* Neutralizes the user-agent styles that browsers apply to `<button>` elements
+* (their default background, border, padding, font, etc.), without stripping
+* the useful defaults that `all: unset;` would also remove
+* (such as `display`, `cursor`, and focus behavior).
+*
+* Prefer this mixin over `all: unset;` on `<button>` elements, then layer
+* the styling you want on top — often one of the `is-*-clickable` mixins.
+*/
+/**
 * This can be used on a trigger element that opens a dropdown menu or a popover.
 */
 /**
@@ -95,7 +104,14 @@ limel-drag-handle {
 }
 
 button.limel-drag-handle {
-  all: unset;
+  appearance: none;
+  background: none;
+  border: none;
+  padding: 0;
+  margin: 0;
+  font: inherit;
+  color: inherit;
+  text-align: inherit;
 }
 button.limel-drag-handle:focus {
   outline: none;

package/dist/collection/components/email-viewer/email-viewer.css

@@ -10,6 +10,15 @@
 * for backward compatibility via copy rules in the Stencil config.
 */
 /**
+* Neutralizes the user-agent styles that browsers apply to `<button>` elements
+* (their default background, border, padding, font, etc.), without stripping
+* the useful defaults that `all: unset;` would also remove
+* (such as `display`, `cursor`, and focus behavior).
+*
+* Prefer this mixin over `all: unset;` on `<button>` elements, then layer
+* the styling you want on top — often one of the `is-*-clickable` mixins.
+*/
+/**
 * This can be used on a trigger element that opens a dropdown menu or a popover.
 */
 /**
@@ -240,7 +249,14 @@ limel-collapsible-section {
   box-shadow: var(--shadow-depth-8);
 }
 limel-collapsible-section button {
-  all: unset;
+  appearance: none;
+  background: none;
+  border: none;
+  padding: 0;
+  margin: 0;
+  font: inherit;
+  color: inherit;
+  text-align: inherit;
   flex-shrink: 0;
   border-radius: 0.375rem;
   padding: 0.25rem 0.5rem;

package/dist/collection/components/file/file.css

@@ -10,6 +10,15 @@
 * for backward compatibility via copy rules in the Stencil config.
 */
 /**
+* Neutralizes the user-agent styles that browsers apply to `<button>` elements
+* (their default background, border, padding, font, etc.), without stripping
+* the useful defaults that `all: unset;` would also remove
+* (such as `display`, `cursor`, and focus behavior).
+*
+* Prefer this mixin over `all: unset;` on `<button>` elements, then layer
+* the styling you want on top — often one of the `is-*-clickable` mixins.
+*/
+/**
 * This can be used on a trigger element that opens a dropdown menu or a popover.
 */
 /**

package/dist/collection/components/file-viewer/file-viewer.css

@@ -16,6 +16,15 @@
 * for backward compatibility via copy rules in the Stencil config.
 */
 /**
+* Neutralizes the user-agent styles that browsers apply to `<button>` elements
+* (their default background, border, padding, font, etc.), without stripping
+* the useful defaults that `all: unset;` would also remove
+* (such as `display`, `cursor`, and focus behavior).
+*
+* Prefer this mixin over `all: unset;` on `<button>` elements, then layer
+* the styling you want on top — often one of the `is-*-clickable` mixins.
+*/
+/**
 * This can be used on a trigger element that opens a dropdown menu or a popover.
 */
 /**

package/dist/collection/components/form/form.css

@@ -10,6 +10,15 @@
 * for backward compatibility via copy rules in the Stencil config.
 */
 /**
+* Neutralizes the user-agent styles that browsers apply to `<button>` elements
+* (their default background, border, padding, font, etc.), without stripping
+* the useful defaults that `all: unset;` would also remove
+* (such as `display`, `cursor`, and focus behavior).
+*
+* Prefer this mixin over `all: unset;` on `<button>` elements, then layer
+* the styling you want on top — often one of the `is-*-clickable` mixins.
+*/
+/**
 * This can be used on a trigger element that opens a dropdown menu or a popover.
 */
 /**

package/dist/collection/components/header/header.css

@@ -10,6 +10,15 @@
 * for backward compatibility via copy rules in the Stencil config.
 */
 /**
+* Neutralizes the user-agent styles that browsers apply to `<button>` elements
+* (their default background, border, padding, font, etc.), without stripping
+* the useful defaults that `all: unset;` would also remove
+* (such as `display`, `cursor`, and focus behavior).
+*
+* Prefer this mixin over `all: unset;` on `<button>` elements, then layer
+* the styling you want on top — often one of the `is-*-clickable` mixins.
+*/
+/**
 * This can be used on a trigger element that opens a dropdown menu or a popover.
 */
 /**

package/dist/collection/components/help/help.css

@@ -10,6 +10,15 @@
 * for backward compatibility via copy rules in the Stencil config.
 */
 /**
+* Neutralizes the user-agent styles that browsers apply to `<button>` elements
+* (their default background, border, padding, font, etc.), without stripping
+* the useful defaults that `all: unset;` would also remove
+* (such as `display`, `cursor`, and focus behavior).
+*
+* Prefer this mixin over `all: unset;` on `<button>` elements, then layer
+* the styling you want on top — often one of the `is-*-clickable` mixins.
+*/
+/**
 * This can be used on a trigger element that opens a dropdown menu or a popover.
 */
 /**
@@ -94,7 +103,14 @@ limel-popover {
 }
 
 button[slot=trigger] {
-  all: unset;
+  appearance: none;
+  background: none;
+  border: none;
+  padding: 0;
+  margin: 0;
+  font: inherit;
+  color: inherit;
+  text-align: inherit;
   transition: color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);
   cursor: pointer;
   color: var(--limel-theme-on-surface-color);

package/dist/collection/components/help/limel-help-content.css

@@ -10,6 +10,15 @@
 * for backward compatibility via copy rules in the Stencil config.
 */
 /**
+* Neutralizes the user-agent styles that browsers apply to `<button>` elements
+* (their default background, border, padding, font, etc.), without stripping
+* the useful defaults that `all: unset;` would also remove
+* (such as `display`, `cursor`, and focus behavior).
+*
+* Prefer this mixin over `all: unset;` on `<button>` elements, then layer
+* the styling you want on top — often one of the `is-*-clickable` mixins.
+*/
+/**
 * This can be used on a trigger element that opens a dropdown menu or a popover.
 */
 /**

package/dist/collection/components/hotkey/hotkey.css

@@ -13,6 +13,15 @@
 * for backward compatibility via copy rules in the Stencil config.
 */
 /**
+* Neutralizes the user-agent styles that browsers apply to `<button>` elements
+* (their default background, border, padding, font, etc.), without stripping
+* the useful defaults that `all: unset;` would also remove
+* (such as `display`, `cursor`, and focus behavior).
+*
+* Prefer this mixin over `all: unset;` on `<button>` elements, then layer
+* the styling you want on top — often one of the `is-*-clickable` mixins.
+*/
+/**
 * This can be used on a trigger element that opens a dropdown menu or a popover.
 */
 /**

package/dist/collection/components/icon-button/icon-button.css

@@ -10,6 +10,15 @@
 * for backward compatibility via copy rules in the Stencil config.
 */
 /**
+* Neutralizes the user-agent styles that browsers apply to `<button>` elements
+* (their default background, border, padding, font, etc.), without stripping
+* the useful defaults that `all: unset;` would also remove
+* (such as `display`, `cursor`, and focus behavior).
+*
+* Prefer this mixin over `all: unset;` on `<button>` elements, then layer
+* the styling you want on top — often one of the `is-*-clickable` mixins.
+*/
+/**
 * This can be used on a trigger element that opens a dropdown menu or a popover.
 */
 /**
@@ -98,7 +107,14 @@
 }
 
 button {
-  all: unset;
+  appearance: none;
+  background: none;
+  border: none;
+  padding: 0;
+  margin: 0;
+  font: inherit;
+  color: inherit;
+  text-align: inherit;
 }
 button:not(:disabled) {
   transition: color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);

package/dist/collection/components/info-tile/info-tile.css

@@ -23,6 +23,15 @@
 * for backward compatibility via copy rules in the Stencil config.
 */
 /**
+* Neutralizes the user-agent styles that browsers apply to `<button>` elements
+* (their default background, border, padding, font, etc.), without stripping
+* the useful defaults that `all: unset;` would also remove
+* (such as `display`, `cursor`, and focus behavior).
+*
+* Prefer this mixin over `all: unset;` on `<button>` elements, then layer
+* the styling you want on top — often one of the `is-*-clickable` mixins.
+*/
+/**
 * This can be used on a trigger element that opens a dropdown menu or a popover.
 */
 /**

package/dist/collection/components/input-field/input-field.css

@@ -10,6 +10,15 @@
 * for backward compatibility via copy rules in the Stencil config.
 */
 /**
+* Neutralizes the user-agent styles that browsers apply to `<button>` elements
+* (their default background, border, padding, font, etc.), without stripping
+* the useful defaults that `all: unset;` would also remove
+* (such as `display`, `cursor`, and focus behavior).
+*
+* Prefer this mixin over `all: unset;` on `<button>` elements, then layer
+* the styling you want on top — often one of the `is-*-clickable` mixins.
+*/
+/**
 * This can be used on a trigger element that opens a dropdown menu or a popover.
 */
 /**

package/dist/collection/components/list/list.css

@@ -10,6 +10,15 @@
 * for backward compatibility via copy rules in the Stencil config.
 */
 /**
+* Neutralizes the user-agent styles that browsers apply to `<button>` elements
+* (their default background, border, padding, font, etc.), without stripping
+* the useful defaults that `all: unset;` would also remove
+* (such as `display`, `cursor`, and focus behavior).
+*
+* Prefer this mixin over `all: unset;` on `<button>` elements, then layer
+* the styling you want on top — often one of the `is-*-clickable` mixins.
+*/
+/**
 * This can be used on a trigger element that opens a dropdown menu or a popover.
 */
 /**

package/dist/collection/components/list-item/list-item.css

@@ -16,6 +16,15 @@
 * for backward compatibility via copy rules in the Stencil config.
 */
 /**
+* Neutralizes the user-agent styles that browsers apply to `<button>` elements
+* (their default background, border, padding, font, etc.), without stripping
+* the useful defaults that `all: unset;` would also remove
+* (such as `display`, `cursor`, and focus behavior).
+*
+* Prefer this mixin over `all: unset;` on `<button>` elements, then layer
+* the styling you want on top — often one of the `is-*-clickable` mixins.
+*/
+/**
 * This can be used on a trigger element that opens a dropdown menu or a popover.
 */
 /**

package/dist/collection/components/list-item/menu-item-meta/menu-item-meta.css

@@ -14,6 +14,15 @@
 * for backward compatibility via copy rules in the Stencil config.
 */
 /**
+* Neutralizes the user-agent styles that browsers apply to `<button>` elements
+* (their default background, border, padding, font, etc.), without stripping
+* the useful defaults that `all: unset;` would also remove
+* (such as `display`, `cursor`, and focus behavior).
+*
+* Prefer this mixin over `all: unset;` on `<button>` elements, then layer
+* the styling you want on top — often one of the `is-*-clickable` mixins.
+*/
+/**
 * This can be used on a trigger element that opens a dropdown menu or a popover.
 */
 /**