refs: dialog: eventListeners: close: handler: handleDialogClose confirmButton: eventListeners: click: handler: handleConfirm cancelButton: eventListeners: click: handler: handleCancel componentDialogBodyHost: {} componentDialogAction*: eventListeners: click: handler: handleComponentDialogAction formDialog: eventListeners: form-action: handler: handleFormAction form-field-event: handler: handleFormFieldEvent dropdownMenu: eventListeners: close: handler: handleDropdownClose item-click: handler: handleDropdownItemClick styles: # Segment links: rettangoli-fe resets every in a component shadow root to # `display: contents` with no color/decoration, which hides inline links and # drops them out of the tab order. Restore normal inline-link behaviour (same # tokens as the base theme's `a` rules) for anchors rendered from text segments. 'a.text-link, a.text-link:link, a.text-link:visited, a.text-link:active': display: inline color: var(--anchor-color, inherit) text-decoration: var(--anchor-text-decoration, underline) 'a.text-link:hover': color: var(--anchor-color-hover, var(--anchor-color, inherit)) text-decoration: var(--anchor-text-decoration-hover, underline) 'a.text-link:focus-visible': outline: var(--focus-ring-outline, none) box-shadow: inset 0 0 0 2px var(--ring) .dialog-message: white-space: pre-wrap overflow-wrap: anywhere .toast-layer: pointer-events: none .toast-card: pointer-events: auto box-sizing: border-box width: 33vw max-width: calc(100vw - 2 * var(--spacing-lg)) opacity: 1 transform: translateY(0) scale(1) transition: opacity 180ms cubic-bezier(0.16, 1, 0.3, 1), transform 180ms cubic-bezier(0.16, 1, 0.3, 1) will-change: opacity, transform .toast-card-top: animation: toast-in-top 220ms cubic-bezier(0.16, 1, 0.3, 1) .toast-card-bottom: animation: toast-in-bottom 220ms cubic-bezier(0.16, 1, 0.3, 1) .toast-card-md: width: 50vw .toast-card-lg: width: 80vw .toast-card-top.toast-card-exiting: opacity: 0 transform: translateY(calc(var(--spacing-sm) * -0.5)) scale(0.98) .toast-card-bottom.toast-card-exiting: opacity: 0 transform: translateY(calc(var(--spacing-sm) * 0.5)) scale(0.98) .toast-message: overflow-wrap: anywhere '@keyframes toast-in-top': from: opacity: 0 transform: translateY(calc(var(--spacing-sm) * -1)) scale(0.96) to: opacity: 1 transform: translateY(0) scale(1) '@keyframes toast-in-bottom': from: opacity: 0 transform: translateY(var(--spacing-sm)) scale(0.96) to: opacity: 1 transform: translateY(0) scale(1) '@media (prefers-reduced-motion: reduce)': .toast-card: animation: none transition: none '@media only screen and (max-width: 768px)': .toast-card: width: calc(100vw - 2 * var(--spacing-lg)) template: - $if topToasts.length > 0: - rtgl-view class="toast-layer toast-layer-top" pos=fix edge=t z=2100 w=f ah=c g=sm ph=md pt=xl: - $for toast, i in topToasts: - 'rtgl-view class="toast-card toast-card-top toast-card-${toast.size} toast-card-${toast.phase}" key=toast-${toast.id} bgc=su bc=bo bw=xs br=md shadow=md ph=xl pv=lg': - rtgl-text class=toast-message ta=c w=f: ${toast.message} - $if bottomToasts.length > 0: - rtgl-view class="toast-layer toast-layer-bottom" pos=fix edge=b z=2100 w=f ah=c g=sm ph=md pb=xl: - $for toast, i in bottomToasts: - 'rtgl-view class="toast-card toast-card-bottom toast-card-${toast.size} toast-card-${toast.phase}" key=toast-${toast.id} bgc=su bc=bo bw=xs br=md shadow=md ph=xl pv=lg': - rtgl-text class=toast-message ta=c w=f: ${toast.message} - rtgl-dialog#dialog ?open=${isDialogContainerOpen} s=${dialogSize}: - $if isFormDialogOpen: - rtgl-form#formDialog slot=content :form=${formDialogConfig.form} :defaultValues=${formDialogConfig.defaultValues} :context=${formDialogConfig.context} ?disabled=${formDialogConfig.disabled} key=form-dialog-${formDialogConfig.key}: null - $if isComponentDialogOpen: - rtgl-view slot=content g=lg p=lg: - $if componentDialogConfig.title || componentDialogConfig.description || componentDialogConfig._descriptionSegments: - rtgl-view g=sm w=f: - $if componentDialogConfig.title: - rtgl-text s=lg: ${componentDialogConfig.title} - $if componentDialogConfig._descriptionSegments: - rtgl-text c=mu-fg: - $for seg, i in componentDialogConfig._descriptionSegments: - $if seg.href: - a class=text-link href=${seg.href} target=${seg.target} rel=${seg.rel}: ${seg.text} $else: - ${seg.text} $elif componentDialogConfig.description: - rtgl-text c=mu-fg: ${componentDialogConfig.description} - rtgl-view#componentDialogBodyHost w=f key=component-dialog-body-${componentDialogConfig.key}: null - $if componentDialogConfig.actions.buttons.length > 0: - rtgl-view d=h w=f g=sm: - rtgl-view d=h g=sm: - $for button, i in componentDialogConfig.actions._leftButtons: - rtgl-button#componentDialogAction${button._globalIdx} data-action-id=${button.id} data-action-index=${button._globalIdx} v=${button.variant} ?disabled=${button._disabled} pre=${button.pre} suf=${button.suf}: ${button.label} - rtgl-view d=h g=sm ah=e w=1fg: - $for button, i in componentDialogConfig.actions._rightButtons: - rtgl-button#componentDialogAction${button._globalIdx} data-action-id=${button.id} data-action-index=${button._globalIdx} v=${button.variant} ?disabled=${button._disabled} pre=${button.pre} suf=${button.suf}: ${button.label} - $if !isFormDialogOpen && !isComponentDialogOpen: - rtgl-view slot=content g=lg: - rtgl-view g=sm w=f: - $if config.title: - $if config._titleSegments: - rtgl-text s=lg: - $for seg, i in config._titleSegments: - $if seg.href: - a class=text-link href=${seg.href} target=${seg.target} rel=${seg.rel}: ${seg.text} $else: - ${seg.text} $else: - rtgl-text s=lg: ${config.title} - $if config._messageSegments: - rtgl-text class=dialog-message w=f c=mu-fg: - $for seg, i in config._messageSegments: - $if seg.href: - a class=text-link href=${seg.href} target=${seg.target} rel=${seg.rel}: ${seg.text} $else: - ${seg.text} $else: - rtgl-text class=dialog-message w=f c=mu-fg: ${config.message} $else: - $if config._messageSegments: - rtgl-text class=dialog-message w=f: - $for seg, i in config._messageSegments: - $if seg.href: - a class=text-link href=${seg.href} target=${seg.target} rel=${seg.rel}: ${seg.text} $else: - ${seg.text} $else: - rtgl-text class=dialog-message w=f: ${config.message} - rtgl-view d=h g=md w=f ah=e: - $if config.mode == 'confirm': - rtgl-button#cancelButton v=se: ${config.cancelText} - rtgl-button#confirmButton v=pr: ${config.confirmText} - 'rtgl-dropdown-menu#dropdownMenu ?open=${isDropdownOpen} x=${dropdownConfig.x} y=${dropdownConfig.y} place=${dropdownConfig.place} ${dropdownConfig.popoverAttrString} :aria-label=${dropdownConfig.ariaLabel} :items=${dropdownConfig.items} key=dropdown-${isDropdownOpen}': null