@roadtrip/components 3.12.2 → 3.13.1

package/hydrate/index.js

@@ -6173,7 +6173,7 @@ class Button$1 {
   }; }
 }
 
-const buttonFloatingCss = "/*!@:host*/.sc-road-button-floating-h{position:fixed;right:1rem;bottom:1rem;z-index:2;box-sizing:border-box;display:block;align-items:center;max-width:3.5rem;height:3.5rem;padding:0.6rem 0.75rem 0.75rem;overflow:hidden;font-family:var(--road-font, sans-serif);font-size:var(--road-button-medium);font-weight:700;line-height:1.375;color:var(--road-on-button-secondary);text-decoration:none;white-space:nowrap;background:var(--road-button-secondary);border:1px solid transparent;border-radius:2rem;box-shadow:var(--road-elevation-average);transition:background 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms}/*!@:host(.position-left)*/.position-left.sc-road-button-floating-h{right:auto;left:1rem}/*!@:host(.position-center)*/.position-center.sc-road-button-floating-h{right:0;left:0;margin:0 auto}/*!@:host(.scroll-up)*/.scroll-up.sc-road-button-floating-h{display:block;max-width:3.5rem}/*!@:host(.scroll-down) .button-native*/.scroll-down.sc-road-button-floating-h .button-native.sc-road-button-floating{display:flex}/*!@:host(.scroll-down)*/.scroll-down.sc-road-button-floating-h{display:flex;max-width:max-content}/*!@:host ::slotted(road-icon)*/.sc-road-button-floating-h .sc-road-button-floating-s>road-icon{margin-right:0.5rem}/*!@:host(:hover)*/.sc-road-button-floating-h:hover{background-color:var(--road-button-secondary-variant)}/*!@:host(.focus-visible)*/.focus-visible.sc-road-button-floating-h{outline:0}/*!@.button-native*/.button-native.sc-road-button-floating{position:relative;z-index:1;align-items:center;justify-content:center;width:100%;height:100%;padding:0;margin:0;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;color:inherit;text-align:inherit;text-decoration:none;text-indent:inherit;text-overflow:inherit;text-transform:inherit;letter-spacing:inherit;white-space:inherit;cursor:pointer;background:transparent;border:none;outline:0;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}/*!@:host([aria-disabled])*/[aria-disabled].sc-road-button-floating-h{pointer-events:none;opacity:0.16}/*!@.button-native:disabled*/.button-native.sc-road-button-floating:disabled{cursor:not-allowed}";
+const buttonFloatingCss = "/*!@:host*/.sc-road-button-floating-h{position:fixed;right:1rem;bottom:1rem;z-index:2;box-sizing:border-box;display:block;align-items:center;max-width:3.5rem;height:3.5rem;padding:0.6rem 0.75rem 0.75rem;overflow:hidden;font-family:var(--road-font, sans-serif);font-size:var(--road-button-medium);font-weight:700;line-height:1.375;color:var(--road-on-button-secondary);text-decoration:none;white-space:nowrap;background:var(--road-button-secondary);border:1px solid transparent;border-radius:2rem;box-shadow:var(--road-elevation-average);transition:background 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms}/*!@:host(.position-left)*/.position-left.sc-road-button-floating-h{right:auto;left:1rem}/*!@:host(.position-center)*/.position-center.sc-road-button-floating-h{right:0;left:0;margin:0 auto}/*!@:host(.scroll-up)*/.scroll-up.sc-road-button-floating-h{display:block;max-width:3.5rem}/*!@:host(.position-center.scroll-up)*/.position-center.scroll-up.sc-road-button-floating-h{display:flex;max-width:max-content}/*!@:host(.scroll-down) .button-native*/.scroll-down.sc-road-button-floating-h .button-native.sc-road-button-floating{display:flex}/*!@:host(.position-center.scroll-down) .button-native*/.position-center.scroll-down.sc-road-button-floating-h .button-native.sc-road-button-floating{display:flex}/*!@:host(.position-center) .button-native*/.position-center.sc-road-button-floating-h .button-native.sc-road-button-floating{display:flex}/*!@:host(.scroll-down)*/.scroll-down.sc-road-button-floating-h{display:flex;max-width:max-content}/*!@:host ::slotted(road-icon)*/.sc-road-button-floating-h .sc-road-button-floating-s>road-icon{margin-right:0.5rem}/*!@:host(:hover)*/.sc-road-button-floating-h:hover{background-color:var(--road-button-secondary-variant)}/*!@:host(.focus-visible)*/.focus-visible.sc-road-button-floating-h{outline:0}/*!@.button-native*/.button-native.sc-road-button-floating{position:relative;z-index:1;align-items:center;justify-content:center;width:100%;height:100%;padding:0;margin:0;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;color:inherit;text-align:inherit;text-decoration:none;text-indent:inherit;text-overflow:inherit;text-transform:inherit;letter-spacing:inherit;white-space:inherit;cursor:pointer;background:transparent;border:none;outline:0;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}/*!@:host([aria-disabled])*/[aria-disabled].sc-road-button-floating-h{pointer-events:none;opacity:0.16}/*!@.button-native:disabled*/.button-native.sc-road-button-floating:disabled{cursor:not-allowed}";
 
 /**
  * @slot - Content of the button.
@@ -6295,7 +6295,7 @@ class ButtonBar {
   }; }
 }
 
-const cardCss = "/*!@:host*/.sc-road-card-h{position:relative;box-sizing:border-box;display:block;margin-bottom:var(--margin-bottom, 1rem)}/*!@.card-native*/.card-native.sc-road-card{box-sizing:border-box;display:block;width:100%;height:100%;padding:1.5rem;margin:0;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;color:inherit;text-align:center;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;letter-spacing:inherit;white-space:inherit;background:var(--road-surface);border:0;border-radius:0.25rem;outline:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}/*!@a,\nbutton*/a.sc-road-card,button.sc-road-card{cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}/*!@::slotted(road-icon)*/.sc-road-card-s>road-icon{text-align:center}";
+const cardCss = "/*!@:host*/.sc-road-card-h{position:relative;box-sizing:border-box;display:block;padding:var(--road-spacing-05);margin-bottom:var(--margin-bottom, 1rem);background:var(--road-surface);border:1px solid var(--road-outline-weak);border-radius:var(--road-spacing-02)}/*!@:host(.card-elevation-none)*/.card-elevation-none.sc-road-card-h{box-shadow:none}/*!@:host(.card-elevation-lowest)*/.card-elevation-lowest.sc-road-card-h{box-shadow:var(--road-elevation-lowest)}/*!@:host(.card-elevation-average)*/.card-elevation-average.sc-road-card-h{box-shadow:var(--road-elevation-average)}@media (min-width: 768px){/*!@:host*/.sc-road-card-h{padding:var(--road-spacing-06)}}/*!@.card-native*/.card-native.sc-road-card{box-sizing:border-box;display:block;width:100%;height:100%;padding:1.5rem;margin:0;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;color:inherit;text-align:center;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;letter-spacing:inherit;white-space:inherit;background:var(--road-surface);border:0;border-radius:0.25rem;outline:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}/*!@a,\nbutton*/a.sc-road-card,button.sc-road-card{cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}/*!@::slotted(road-icon)*/.sc-road-card-s>road-icon{text-align:center}";
 
 /**
  * @slot  - Content of the card.
@@ -6320,6 +6320,7 @@ class Card {
         });
       }
     };
+    this.elevation = 'none';
     this.button = false;
     this.value = undefined;
     this.type = 'button';
@@ -6333,12 +6334,13 @@ class Card {
   }
   renderCard() {
     const clickable = this.isClickable();
+    const { elevation, href } = this;
+    const elevationClass = this.elevation ? `card-elevation-${elevation}` : ``;
     if (!clickable) {
       return [
-        hAsync("slot", null)
+        hAsync(Host, { class: `${elevationClass}` }, hAsync("slot", null))
       ];
     }
-    const { href } = this;
     const TagType = clickable ? (href === undefined ? 'button' : 'a') : 'div';
     const attrs = (TagType === 'button')
       ? { type: this.type }
@@ -6348,7 +6350,7 @@ class Card {
         rel: this.rel,
         target: this.target,
       };
-    return (hAsync(TagType, Object.assign({}, attrs, { class: "card-native", part: "native", onClick: this.onClick }), hAsync("slot", null)));
+    return (hAsync(Host, { class: `${elevationClass}` }, hAsync(TagType, Object.assign({}, attrs, { class: "card-native", part: "native", onClick: this.onClick }), hAsync("slot", null))));
   }
   render() {
     return (this.renderCard());
@@ -6359,6 +6361,7 @@ class Card {
     "$flags$": 9,
     "$tagName$": "road-card",
     "$members$": {
+      "elevation": [1],
       "button": [4],
       "value": [1],
       "type": [1],
@@ -13512,6 +13515,7 @@ class Counter {
     this.value = 1;
     this.size = "lg";
     this.dustbin = false;
+    this.readonly = false;
   }
   onValueChange(valueInput) {
     this.setIsDustbinVisible(valueInput);
@@ -13527,7 +13531,7 @@ class Counter {
   }
   render() {
     const dataCi = this.isDustbinVisible ? "road-dustbin" : "";
-    return (hAsync("road-input-group", { class: this.size && `counter-${this.size}` }, hAsync("road-button", { slot: "prepend", size: this.size, onClick: this.decrease, class: this.leftIconClasses, "data-cy": "road-decrease" }, hAsync("road-icon", { name: this.isDustbinVisible ? "delete-forever" : "navigation-add-less", ref: (el) => this.iconCounterLess = el, size: this.size, "data-cy": dataCi })), hAsync("road-input", { ref: (el) => this.inputElement = el, type: "number", min: this.min.toString(), max: (this.max && this.max.toString()), step: this.step, value: this.value, onRoadChange: this.onRoadChange, onKeyUp: this.checkValue, "data-cy": "road-input-counter" }), hAsync("road-button", { slot: "append", size: this.size, onClick: this.increase, class: this.rightIconClasses, "data-cy": "road-increase" }, hAsync("road-icon", { name: "navigation-add-more", size: this.size }))));
+    return (hAsync("road-input-group", { class: this.size && `counter-${this.size}` }, hAsync("road-button", { slot: "prepend", size: this.size, onClick: this.decrease, class: this.leftIconClasses, "data-cy": "road-decrease" }, hAsync("road-icon", { name: this.isDustbinVisible ? "delete-forever" : "navigation-add-less", ref: (el) => this.iconCounterLess = el, size: this.size, "data-cy": dataCi })), hAsync("road-input", { ref: (el) => this.inputElement = el, type: "number", min: this.min.toString(), max: (this.max && this.max.toString()), step: this.step, value: this.value, onRoadChange: this.onRoadChange, onKeyUp: this.checkValue, "data-cy": "road-input-counter", readonly: this.readonly }), hAsync("road-button", { slot: "append", size: this.size, onClick: this.increase, class: this.rightIconClasses, "data-cy": "road-increase" }, hAsync("road-icon", { name: "navigation-add-more", size: this.size }))));
   }
   get el() { return getElement(this); }
   static get watchers() { return {
@@ -13545,6 +13549,7 @@ class Counter {
       "value": [2],
       "size": [1],
       "dustbin": [4],
+      "readonly": [4],
       "leftIconClasses": [32],
       "rightIconClasses": [32],
       "isDustbinVisible": [32]