@riverty/web-components 6.3.0 → 6.3.1

package/dist/collection/components/label/label.css

@@ -0,0 +1,38 @@
+@charset "UTF-8";
+:host([field-indicator]) {
+  --r-label--marker--display: inline;
+}
+
+.r-label {
+  display: var(--r-label--display, flex);
+  flex-direction: var(--r-label--flex-direction, row);
+  gap: var(--r-label--gap, var(--r-spacing-100, 1rem));
+  cursor: var(--r-label--cursor, default);
+  color: var(--r-label--color, var(--r-text-regular, #282828));
+  margin-bottom: var(--r-label--margin-bottom, 0);
+}
+.r-label--slot {
+  flex: var(--r-label--slot--flex, 1);
+  line-height: var(--r-label--line-height, var(--r-line-height-m, 1.5));
+  font-family: var(--r-label--font-family, var(--r-font-family-text, system-ui));
+  font-size: var(--r-label--font-size, var(--r-font-size-regular, 1rem));
+  font-weight: var(--r-label--font-weight, var(--r-font-weight-regular, 400));
+}
+.r-label--marker {
+  display: var(--r-label--marker--display, none);
+  color: var(--r-label--marker--color, var(--r-text-soft, #686868));
+  font-size: var(--r-label--marker--font-size, var(--r-font-size-300, 0.875rem));
+  font-style: var(--r-label--marker--font-style, normal);
+  font-weight: var(--r-label--marker--font-weight, var(--r-font-weight-regular, 400));
+  margin-left: var(--r-label--marker--margin-left, var(--r-spacing-075, 0.75rem));
+}
+.r-label--marker::before {
+  content: var(--r-label--marker--before--content, "– ");
+}
+.r-label--tooltip-icon {
+  color: var(--r-label--tooltip-icon--color, var(--r-text-regular, inherit));
+  display: var(--r-label--tooltip-icon--display, inline-flex);
+  line-height: var(--r-label--tooltip-icon--line-height, 1);
+  align-items: var(--r-label--tooltip-icon--align-items, center);
+  justify-content: var(--r-label--tooltip-icon--justify-content, center);
+}

package/dist/collection/components/label/label.js

@@ -0,0 +1,47 @@
+import { Host, h } from "@stencil/core";
+/**
+ * Utility component, mostly used internally in other design system components,
+ * for consistent presentation of text with optional associated tooltip.
+ */
+export class RLabel {
+    render() {
+        const { fieldIndicator } = this;
+        return (h(Host, { key: '41d52212a7098aa6ade47a1c102aff67548d2e63' }, h("div", { key: 'af64253a7cbdc37ea5e96fbc8d360a32944c001c', class: "r-label" }, h("span", { key: 'fa82843b9c0546f2cfd48ef53cd335a48fef4082', class: "r-label--slot" }, h("slot", { key: 'f430fb90c898f4d8695b9e9acba637de74faf49f' }), fieldIndicator &&
+            h("span", { key: '1e68a5cb6bb792553370048b96371a1af8a0a3ad', class: "r-label--marker" }, fieldIndicator)))));
+    }
+    static get is() { return "r-label"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["label.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["label.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "fieldIndicator": {
+                "type": "string",
+                "attribute": "field-indicator",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Text of an additional marker"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            }
+        };
+    }
+}

package/dist/collection/components/list-item/list-item/exports.js

@@ -0,0 +1,2 @@
+export const TrailingTextAlignmentArray = ['top', 'center', 'bottom'];
+export const listItemVariantArray = ['list-item', 'navitem', 'subitem'];

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

@@ -0,0 +1,199 @@
+:host([alignment=top]) {
+  --r-list-item--trailing-text--font-weight: bold;
+  --r-list-item--trailing--align-self: start;
+}
+
+:host([alignment=bottom]) .r-list-item {
+  --r-list-item--trailing--align-self: end;
+}
+
+:host([divider]:not([divider=false])) {
+  --r-list-item--border-color: var(--r-border-soft, #686868);
+  --r-list-item--border-width: 0 0 1px 0;
+}
+
+:host([active]) .r-list-item {
+  --r-list-item--background-color: var(--r-background-interactive-pressed, rgba(40, 40, 40, 0.12));
+}
+
+:host([variant=navitem]:not([active]):hover:not([disabled]:not([disabled=false]))) > .r-list-item,
+:host([href]:not([active]):hover:not([disabled]:not([disabled=false]))) > .r-list-item {
+  --r-list-item--cursor: pointer;
+  --r-list-item--background-color: var(--r-background-interactive-hovered, rgba(40, 40, 40, 0.04));
+}
+
+:host([variant=navitem][has-sub-items]:hover:not([disabled]:not([disabled=false]))) > .r-list-item-wrapper > .r-list-item {
+  --r-list-item--cursor: pointer;
+  --r-list-item--background-color: var(--r-background-interactive-hovered, rgba(40, 40, 40, 0.04));
+}
+
+:host([variant=navitem][has-sub-items]:has([active]):hover:not([disabled]:not([disabled=false]))) > .r-list-item-wrapper > .r-list-item {
+  --r-list-item--cursor: pointer;
+  --r-list-item--background-color: transparent;
+}
+
+:host([variant=navitem][expanded]) > .r-list-item-wrapper > .r-list-item {
+  --r-list-item--headline--font-weight: 600;
+  --r-list-item--trailing-icon--transform: rotate(180deg);
+  --r-list-item--trailing-icon--color: var(--r-icon-regular, #282828);
+}
+
+:host([variant=navitem][active-parent]:not([expanded])),
+:host([variant=navitem][active]:not([expanded])) {
+  --r-list-item--background-color: var(--r-background-interactive-activated, rgba(40, 40, 40, 0.08));
+}
+
+:host([variant=subitem]) .r-list-item {
+  --r-list-item--margin-left: 27px;
+  --r-list-item--border-width: 0 0 0 1px;
+  --r-list-item--border-color: var(--r-border-soft, #686868);
+}
+
+:host([variant=subitem][active]) .r-list-item {
+  --r-list-item--background-color: var(--r-background-interactive-pressed, rgba(40, 40, 40, 0.12));
+}
+
+:host(:focus-within) .r-list-item[href] {
+  --r-list-item--box-shadow: 0 0 0 6px var(--r-border-focused-outlined, #fff);
+  --r-list-item--outline: 2px solid var(--r-border-focused, #0071e3);
+  --r-list-item--outline-offset: 2px;
+}
+
+:host([disabled]:not([disabled=false])) {
+  cursor: not-allowed;
+  --r-list-item--background-color: transparent;
+}
+
+:host([disabled]:not([disabled=false])[divider]:not([divider=false])) {
+  --r-list-item--border-color: rgba(104,104,104, 0.4);
+  --r-list-item--leading-icon--color: rgba(104,104,104, 0.4);
+}
+
+:host([truncate-description]:not([truncate-description=false])) {
+  --r-list-item--description--white-space: nowrap;
+}
+
+:host {
+  display: var(--display, block);
+  pointer-events: var(--pointer-events, auto);
+  outline: var(--outline, none);
+  font-family: var(--font-family, var(--r-font-family-text, system-ui));
+  line-height: var(--line-height, var(--r-line-height-m, 1.5));
+  color: var(--color, var(--r-text-regular, #282828));
+}
+
+.r-list-item {
+  display: var(--r-list-item--display, flex);
+  align-items: var(--r-list-item--align-items, center);
+  justify-content: var(--r-list-item--justify-content, center);
+  gap: var(--r-list-item--gap, var(--r-spacing-100, 1rem));
+  width: var(--r-list-item--width, inherit);
+  padding: var(--r-list-item--padding, var(--r-spacing-100, 1rem));
+  margin-left: var(--r-list-item--margin-left, 0);
+  opacity: var(--r-list-item--opacity, 1);
+  color: var(--r-list-item--color, inherit);
+  box-shadow: var(--r-list-item--box-shadow, none);
+  outline: var(--r-list-item--outline, none);
+  outline-offset: var(--r-list-item--outline-offset, 0);
+  text-decoration: var(--r-list-item--text-decoration, none);
+  text-align: var(--r-list-item--text-align, left);
+  background-color: var(--r-list-item--background-color, transparent);
+  border-style: var(--r-list-item--border-style, solid);
+  border-width: var(--r-list-item--border-width, 0);
+  border-color: var(--r-list-item--border-color, transparent);
+  cursor: var(--r-list-item--cursor, inherit);
+  font-weight: var(--r-list-item--font-weight, var(--r-font-weight-regular, 400));
+  font-family: var(--r-list-item--font-family, var(--r-font-family-text, system-ui));
+}
+.r-list-item:focus-visible {
+  --r-list-item--box-shadow: 0 0 0 6px var(--r-border-focused-outlined, #fff);
+  --r-list-item--outline: 2px solid var(--r-border-focused, #0071e3);
+  --r-list-item--outline-offset: 2px;
+}
+.r-list-item--leading {
+  display: var(--r-list-item--leading--display, flex);
+  align-items: var(--r-list-item--leading--align-items, center);
+  color: var(--r-list-item--leading--color, var(--r-icon-soft, #686868));
+}
+.r-list-item--leading-icon {
+  color: var(--r-list-item--leading-icon--color, var(--r-icon-soft, #686868));
+}
+.r-list-item--trailing {
+  display: var(--r-list-item--trailing--display, flex);
+  align-self: var(--r-list-item--trailing--align-self, center);
+  gap: var(--r-list-item--trailing--gap, var(--r-spacing-050, 0.5rem));
+  color: var(--r-list-item--trailing--color, inherit);
+}
+.r-list-item--trailing-icon {
+  transition: var(--r-list-item--trailing-icon--transition, transform 250ms ease-in-out);
+  transform: var(--r-list-item--trailing-icon--transform, rotate(0deg));
+  color: var(--r-list-item--trailing-icon--color, inherit);
+}
+.r-list-item--trailing-text {
+  font-weight: var(--r-list-item--trailing-text--font-weight, 400);
+  white-space: var(--r-list-item--trailing-text--white-space, nowrap);
+}
+.r-list-item--trailing ::slotted(*) {
+  display: var(--r-list-item--trailing-slotted--display, flex);
+  gap: var(--r-list-item--trailing-slotted--display, var(--r-spacing-050, 0.5rem));
+}
+.r-list-item--text {
+  display: var(--r-list-item--text--display, flex);
+  flex-grow: var(--r-list-item--text--flex-grow, 1);
+  flex-direction: var(--r-list-item--text--flex-direction, column);
+  gap: var(--r-list-item--text--gap, 0.125rem);
+  white-space: var(--r-list-item--text--white-space, normal);
+  overflow: var(--r-list-item--text--overflow, hidden);
+  text-overflow: var(--r-list-item--text--text-overflow, ellipsis);
+  font-weight: var(--r-list-item--trailing-text--font-weight, inherit);
+}
+.r-list-item--sr-text {
+  display: var(--r-list-item--sr-text--display, none);
+}
+.r-list-item--headline {
+  font-size: var(--r-list-item--headline--font-size, 1rem);
+  font-weight: var(--r-list-item--headline--font-weight, 600);
+  line-height: var(--r-list-item--headline--line-height, 1.5);
+  color: var(--r-list-item--headline--color, inherit);
+}
+.r-list-item--description {
+  font-size: var(--r-list-item--description--font-size, 1rem);
+  font-weight: var(--r-list-item--description--font-weight, 400);
+  line-height: var(--r-list-item--description--line-height, 1.5);
+  color: var(--r-list-item--description--color, var(--r-text-regular, #282828));
+  white-space: var(--r-list-item--description--white-space, normal);
+  overflow: var(--r-list-item--description--overflow, hidden);
+  text-overflow: var(--r-list-item--description--text-overflow, ellipsis);
+}
+.r-list-item--description ::slotted(a) {
+  color: var(--r-list-item--description--color, inherit);
+}
+
+.r-list-item-wrapper {
+  width: var(--r-list-item-wrapper--width, 100%);
+}
+
+.sub-items {
+  margin: var(--r-sub-items--margin, 0);
+  padding: var(--r-sub-items--padding, 0);
+  list-style-type: var(--r-sub-items--list-style-type, "");
+}
+.sub-items[aria-hidden=true] {
+  display: none;
+}
+
+.visually-hidden {
+  position: absolute;
+  width: 0.0625rem;
+  height: 0.0625rem;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+@media (prefers-reduced-motion) {
+  .r-list-item--trailing-icon {
+    transition: none;
+  }
+}