@limetech/lime-elements 34.1.0-next.23 → 34.1.0-next.27

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

@@ -6,7 +6,7 @@
  */
 .color-palette {
   display: grid;
-  grid-gap: 0.25rem;
+  gap: 0.25rem;
   grid-auto-flow: column;
   margin: 0.75rem auto 1.25rem auto;
   padding: 1.25rem 0.75rem;
@@ -1089,6 +1089,10 @@
  * Nothing in this file may output any CSS
  * without being explicitly called by outside code.
  */
+.picker-trigger[style="--background:lime-magenta;"]:after,
+.chosen-color-preview[style="--background:lime-magenta;"]:after {
+  background-color: var(--lime-magenta);
+}
 .picker-trigger[style="--background:lime-blue;"]:after,
 .chosen-color-preview[style="--background:lime-blue;"]:after {
   background-color: var(--lime-blue);

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

@@ -4,6 +4,10 @@
  * Nothing in this file may output any CSS
  * without being explicitly called by outside code.
  */
+.picker-trigger[style="--background:lime-magenta;"]:after,
+.chosen-color-preview[style="--background:lime-magenta;"]:after {
+  background-color: var(--lime-magenta);
+}
 .picker-trigger[style="--background:lime-blue;"]:after,
 .chosen-color-preview[style="--background:lime-blue;"]:after {
   background-color: var(--lime-blue);

package/dist/collection/components/form/templates/array-field-collapsible-item.js

@@ -35,10 +35,10 @@ export class CollapsibleItemTemplate extends React.Component {
     const { item, index } = this.props;
     const actions = [
       {
-        id: 'remove',
-        icon: 'trash',
-        disabled: !item.hasRemove,
-        run: item.onDropIndexClick(index),
+        id: 'down',
+        icon: 'down_arrow',
+        disabled: !item.hasMoveDown,
+        run: item.onReorderClick(index, index + 1),
       },
       {
         id: 'up',
@@ -47,10 +47,10 @@ export class CollapsibleItemTemplate extends React.Component {
         run: item.onReorderClick(index, index - 1),
       },
       {
-        id: 'down',
-        icon: 'down_arrow',
-        disabled: !item.hasMoveDown,
-        run: item.onReorderClick(index, index + 1),
+        id: 'remove',
+        icon: 'trash',
+        disabled: !item.hasRemove,
+        run: item.onDropIndexClick(index),
       },
     ];
     element.actions = actions;

package/dist/collection/components/grid/grid.css

@@ -23,7 +23,7 @@ slot {
   display: grid;
   grid-template-areas: var(--lime-grid-area, "");
   grid-template-columns: repeat(var(--lime-grid-columns, 4), minmax(0, 1fr));
-  grid-gap: var(--lime-grid-gutter, 1rem);
+  gap: var(--lime-grid-gutter, 1rem);
   grid-auto-flow: row dense;
   grid-auto-rows: var(--lime-grid-cell-height, 2.5rem);
   margin: 0;

package/dist/collection/components/list/list-renderer.js

@@ -55,6 +55,7 @@ export class ListRenderer {
         'mdc-deprecated-list-item': true,
         'mdc-deprecated-list-item--disabled': item.disabled,
         'mdc-deprecated-list-item--selected': item.selected,
+        'has-primary-component': this.hasPrimaryComponent(item),
       };
       const attributes = {};
       if (index === this.applyTabIndexToItemAtIndex) {
@@ -62,10 +63,15 @@ export class ListRenderer {
       }
       return (h("li", Object.assign({ class: classNames, "aria-disabled": item.disabled ? 'true' : 'false', "aria-selected": item.selected ? 'true' : 'false', "data-index": index }, attributes),
         item.icon ? this.renderIcon(this.config, item) : null,
+        this.getPrimaryComponent(item),
         this.renderText(item),
         this.twoLines && this.avatarList ? this.renderDivider() : null,
         this.renderActionMenu(item.actions)));
     };
+    this.hasPrimaryComponent = (item) => {
+      var _a;
+      return !!((_a = item === null || item === void 0 ? void 0 : item.primaryComponent) === null || _a === void 0 ? void 0 : _a.name);
+    };
     /**
      * Render the text of the list item
      *
@@ -135,6 +141,7 @@ export class ListRenderer {
         'mdc-deprecated-list-item': true,
         'mdc-deprecated-list-item--disabled': item.disabled,
         'mdc-deprecated-list-item__text': !item.secondaryText,
+        'has-primary-component': this.hasPrimaryComponent(item),
       };
       const attributes = {};
       if (index === this.applyTabIndexToItemAtIndex) {
@@ -146,12 +153,14 @@ export class ListRenderer {
       if (this.hasIcons) {
         return [
           item.icon ? this.renderIcon(config, item) : null,
+          this.getPrimaryComponent(item),
           this.renderText(item),
           h("div", { class: "mdc-deprecated-list-item__meta" }, itemTemplate),
         ];
       }
       return [
         h("div", { class: "mdc-deprecated-list-item__graphic" }, itemTemplate),
+        this.getPrimaryComponent(item),
         this.renderText(item),
       ];
     };
@@ -191,4 +200,12 @@ export class ListRenderer {
     };
     return (h("ul", { class: classNames, role: role, "aria-orientation": "vertical" }, items.map(this.renderListItem)));
   }
+  getPrimaryComponent(item) {
+    if (!this.hasPrimaryComponent(item)) {
+      return;
+    }
+    const PrimaryComponent = item.primaryComponent.name;
+    const props = item.primaryComponent.props;
+    return h(PrimaryComponent, Object.assign({}, props));
+  }
 }

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

@@ -3146,6 +3146,9 @@ a.mdc-list-item {
   align-self: center;
   width: 100%;
 }
+.mdc-deprecated-list .has-primary-component .mdc-deprecated-list-item__text {
+  margin-left: 0.5rem;
+}
 .mdc-deprecated-list .mdc-deprecated-list-item__primary-command-text {
   display: flex;
   flex-direction: row;
@@ -4064,6 +4067,322 @@ a.mdc-list-item {
     opacity: 0;
   }
 }
+.mdc-radio {
+  padding: 10px;
+  display: inline-block;
+  position: relative;
+  flex: 0 0 auto;
+  box-sizing: content-box;
+  width: 20px;
+  height: 20px;
+  cursor: pointer;
+  /* @alternate */
+  will-change: opacity, transform, border-color, color;
+}
+
+.mdc-radio .mdc-radio__native-control:enabled:not(:checked) + .mdc-radio__background .mdc-radio__outer-circle {
+  border-color: rgba(0, 0, 0, 0.54);
+}
+
+.mdc-radio .mdc-radio__native-control:enabled:checked + .mdc-radio__background .mdc-radio__outer-circle {
+  border-color: #575756;
+  /* @alternate */
+  border-color: var(--mdc-theme-secondary, #575756);
+}
+
+.mdc-radio .mdc-radio__native-control:enabled + .mdc-radio__background .mdc-radio__inner-circle {
+  border-color: #575756;
+  /* @alternate */
+  border-color: var(--mdc-theme-secondary, #575756);
+}
+
+.mdc-radio [aria-disabled=true] .mdc-radio__native-control:not(:checked) + .mdc-radio__background .mdc-radio__outer-circle,
+.mdc-radio .mdc-radio__native-control:disabled:not(:checked) + .mdc-radio__background .mdc-radio__outer-circle {
+  border-color: rgba(0, 0, 0, 0.38);
+}
+
+.mdc-radio [aria-disabled=true] .mdc-radio__native-control:checked + .mdc-radio__background .mdc-radio__outer-circle,
+.mdc-radio .mdc-radio__native-control:disabled:checked + .mdc-radio__background .mdc-radio__outer-circle {
+  border-color: rgba(0, 0, 0, 0.38);
+}
+
+.mdc-radio [aria-disabled=true] .mdc-radio__native-control + .mdc-radio__background .mdc-radio__inner-circle,
+.mdc-radio .mdc-radio__native-control:disabled + .mdc-radio__background .mdc-radio__inner-circle {
+  border-color: rgba(0, 0, 0, 0.38);
+}
+
+.mdc-radio .mdc-radio__background::before {
+  background-color: #575756;
+  /* @alternate */
+  background-color: var(--mdc-theme-secondary, #575756);
+}
+
+.mdc-radio .mdc-radio__background::before {
+  top: -10px;
+  left: -10px;
+  width: 40px;
+  height: 40px;
+}
+
+.mdc-radio .mdc-radio__native-control {
+  top: 0px;
+  right: 0px;
+  left: 0px;
+  width: 40px;
+  height: 40px;
+}
+
+@media screen and (-ms-high-contrast: active) {
+  .mdc-radio [aria-disabled=true] .mdc-radio__native-control:not(:checked) + .mdc-radio__background .mdc-radio__outer-circle,
+.mdc-radio .mdc-radio__native-control:disabled:not(:checked) + .mdc-radio__background .mdc-radio__outer-circle {
+    border-color: GrayText;
+  }
+
+  .mdc-radio [aria-disabled=true] .mdc-radio__native-control:checked + .mdc-radio__background .mdc-radio__outer-circle,
+.mdc-radio .mdc-radio__native-control:disabled:checked + .mdc-radio__background .mdc-radio__outer-circle {
+    border-color: GrayText;
+  }
+
+  .mdc-radio [aria-disabled=true] .mdc-radio__native-control + .mdc-radio__background .mdc-radio__inner-circle,
+.mdc-radio .mdc-radio__native-control:disabled + .mdc-radio__background .mdc-radio__inner-circle {
+    border-color: GrayText;
+  }
+}
+.mdc-radio__background {
+  display: inline-block;
+  position: relative;
+  box-sizing: border-box;
+  width: 20px;
+  height: 20px;
+}
+
+.mdc-radio__background::before {
+  position: absolute;
+  transform: scale(0, 0);
+  border-radius: 50%;
+  opacity: 0;
+  pointer-events: none;
+  content: "";
+  transition: opacity 120ms 0ms cubic-bezier(0.4, 0, 0.6, 1), transform 120ms 0ms cubic-bezier(0.4, 0, 0.6, 1);
+}
+
+.mdc-radio__outer-circle {
+  position: absolute;
+  top: 0;
+  left: 0;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  border-width: 2px;
+  border-style: solid;
+  border-radius: 50%;
+  transition: border-color 120ms 0ms cubic-bezier(0.4, 0, 0.6, 1);
+}
+
+.mdc-radio__inner-circle {
+  position: absolute;
+  top: 0;
+  left: 0;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  transform: scale(0, 0);
+  border-width: 10px;
+  border-style: solid;
+  border-radius: 50%;
+  transition: transform 120ms 0ms cubic-bezier(0.4, 0, 0.6, 1), border-color 120ms 0ms cubic-bezier(0.4, 0, 0.6, 1);
+}
+
+.mdc-radio__native-control {
+  position: absolute;
+  margin: 0;
+  padding: 0;
+  opacity: 0;
+  cursor: inherit;
+  z-index: 1;
+}
+
+.mdc-radio--touch {
+  margin-top: 4px;
+  margin-bottom: 4px;
+  margin-right: 4px;
+  margin-left: 4px;
+}
+
+.mdc-radio--touch .mdc-radio__native-control {
+  top: -4px;
+  right: -4px;
+  left: -4px;
+  width: 48px;
+  height: 48px;
+}
+
+.mdc-radio__native-control:checked + .mdc-radio__background,
+.mdc-radio__native-control:disabled + .mdc-radio__background {
+  transition: opacity 120ms 0ms cubic-bezier(0, 0, 0.2, 1), transform 120ms 0ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+.mdc-radio__native-control:checked + .mdc-radio__background .mdc-radio__outer-circle,
+.mdc-radio__native-control:disabled + .mdc-radio__background .mdc-radio__outer-circle {
+  transition: border-color 120ms 0ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+.mdc-radio__native-control:checked + .mdc-radio__background .mdc-radio__inner-circle,
+.mdc-radio__native-control:disabled + .mdc-radio__background .mdc-radio__inner-circle {
+  transition: transform 120ms 0ms cubic-bezier(0, 0, 0.2, 1), border-color 120ms 0ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+.mdc-radio--disabled {
+  cursor: default;
+  pointer-events: none;
+}
+
+.mdc-radio__native-control:checked + .mdc-radio__background .mdc-radio__inner-circle {
+  transform: scale(0.5);
+  transition: transform 120ms 0ms cubic-bezier(0, 0, 0.2, 1), border-color 120ms 0ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+.mdc-radio__native-control:disabled + .mdc-radio__background,
+[aria-disabled=true] .mdc-radio__native-control + .mdc-radio__background {
+  cursor: default;
+}
+
+.mdc-radio__native-control:focus + .mdc-radio__background::before {
+  transform: scale(1);
+  opacity: 0.12;
+  transition: opacity 120ms 0ms cubic-bezier(0, 0, 0.2, 1), transform 120ms 0ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+.mdc-radio {
+  --mdc-ripple-fg-size: 0;
+  --mdc-ripple-left: 0;
+  --mdc-ripple-top: 0;
+  --mdc-ripple-fg-scale: 1;
+  --mdc-ripple-fg-translate-end: 0;
+  --mdc-ripple-fg-translate-start: 0;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  will-change: transform, opacity;
+}
+
+.mdc-radio .mdc-radio__ripple::before,
+.mdc-radio .mdc-radio__ripple::after {
+  position: absolute;
+  border-radius: 50%;
+  opacity: 0;
+  pointer-events: none;
+  content: "";
+}
+
+.mdc-radio .mdc-radio__ripple::before {
+  transition: opacity 15ms linear, background-color 15ms linear;
+  z-index: 1;
+  /* @alternate */
+  z-index: var(--mdc-ripple-z-index, 1);
+}
+
+.mdc-radio .mdc-radio__ripple::after {
+  z-index: 0;
+  /* @alternate */
+  z-index: var(--mdc-ripple-z-index, 0);
+}
+
+.mdc-radio.mdc-ripple-upgraded .mdc-radio__ripple::before {
+  transform: scale(var(--mdc-ripple-fg-scale, 1));
+}
+
+.mdc-radio.mdc-ripple-upgraded .mdc-radio__ripple::after {
+  top: 0;
+  /* @noflip */
+  left: 0;
+  transform: scale(0);
+  transform-origin: center center;
+}
+
+.mdc-radio.mdc-ripple-upgraded--unbounded .mdc-radio__ripple::after {
+  top: var(--mdc-ripple-top, 0);
+  /* @noflip */
+  left: var(--mdc-ripple-left, 0);
+}
+
+.mdc-radio.mdc-ripple-upgraded--foreground-activation .mdc-radio__ripple::after {
+  animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards;
+}
+
+.mdc-radio.mdc-ripple-upgraded--foreground-deactivation .mdc-radio__ripple::after {
+  animation: mdc-ripple-fg-opacity-out 150ms;
+  transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
+}
+
+.mdc-radio .mdc-radio__ripple::before,
+.mdc-radio .mdc-radio__ripple::after {
+  top: calc(50% - 50%);
+  /* @noflip */
+  left: calc(50% - 50%);
+  width: 100%;
+  height: 100%;
+}
+
+.mdc-radio.mdc-ripple-upgraded .mdc-radio__ripple::before,
+.mdc-radio.mdc-ripple-upgraded .mdc-radio__ripple::after {
+  top: var(--mdc-ripple-top, calc(50% - 50%));
+  /* @noflip */
+  left: var(--mdc-ripple-left, calc(50% - 50%));
+  width: var(--mdc-ripple-fg-size, 100%);
+  height: var(--mdc-ripple-fg-size, 100%);
+}
+
+.mdc-radio.mdc-ripple-upgraded .mdc-radio__ripple::after {
+  width: var(--mdc-ripple-fg-size, 100%);
+  height: var(--mdc-ripple-fg-size, 100%);
+}
+
+.mdc-radio .mdc-radio__ripple::before, .mdc-radio .mdc-radio__ripple::after {
+  background-color: #575756;
+  /* @alternate */
+  background-color: var(--mdc-ripple-color, var(--mdc-theme-secondary, #575756));
+}
+
+.mdc-radio:hover .mdc-radio__ripple::before, .mdc-radio.mdc-ripple-surface--hover .mdc-radio__ripple::before {
+  opacity: 0.04;
+  /* @alternate */
+  opacity: var(--mdc-ripple-hover-opacity, 0.04);
+}
+
+.mdc-radio.mdc-ripple-upgraded--background-focused .mdc-radio__ripple::before, .mdc-radio:not(.mdc-ripple-upgraded):focus .mdc-radio__ripple::before {
+  transition-duration: 75ms;
+  opacity: 0.12;
+  /* @alternate */
+  opacity: var(--mdc-ripple-focus-opacity, 0.12);
+}
+
+.mdc-radio:not(.mdc-ripple-upgraded) .mdc-radio__ripple::after {
+  transition: opacity 150ms linear;
+}
+
+.mdc-radio:not(.mdc-ripple-upgraded):active .mdc-radio__ripple::after {
+  transition-duration: 75ms;
+  opacity: 0.12;
+  /* @alternate */
+  opacity: var(--mdc-ripple-press-opacity, 0.12);
+}
+
+.mdc-radio.mdc-ripple-upgraded {
+  --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.12);
+}
+
+.mdc-radio.mdc-ripple-upgraded .mdc-radio__background::before, .mdc-radio.mdc-ripple-upgraded--background-focused .mdc-radio__background::before {
+  content: none;
+}
+
+.mdc-radio__ripple {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+
 .mdc-form-field {
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
@@ -4225,7 +4544,7 @@ a.mdc-list-item {
 }
 :host(.has-grid-layout) .mdc-deprecated-list {
   display: grid;
-  grid-gap: var(--gap);
+  gap: var(--gap);
   grid-template-columns: repeat(auto-fit, minmax(min(100%, max(calc(var(--list-grid-item-max-width, 10rem) - var(--gap)), var(--list-grid-item-min-width, 7.5rem))), 1fr));
   max-width: var(--list-grid-max-width, 100%);
 }

package/dist/collection/components/list/list.js

@@ -18,6 +18,7 @@ const { ACTION_EVENT } = listStrings;
  * @exampleComponent limel-example-list-striped
  * @exampleComponent limel-example-list-badge-icons-with-multiple-lines
  * @exampleComponent limel-example-list-grid
+ * @exampleComponent limel-example-list-primary-component
  */
 export class List {
   constructor() {