Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@vonage/vivid

Package Overview
Dependencies
Maintainers
27
Versions
293
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@vonage/vivid - npm Package Compare versions

Comparing version 3.0.0-next.41 to 3.0.0-next.42

shared/ref.js

2

action-group/index.js

@@ -9,3 +9,3 @@ import { F as FoundationElement, _ as __decorate, a as attr, b as __metadata, h as html, d as designSystem } from '../shared/index.js';

var css_248z = ":host {\n display: inline-block;\n}\n\n.base {\n position: relative;\n display: flex;\n box-sizing: border-box;\n align-items: center;\n background-color: var(--_appearance-color-fill);\n color: var(--_appearance-color-text);\n inline-size: inherit;\n vertical-align: middle;\n}\n.base {\n --_appearance-color-text: var(--vvd-color-on-canvas);\n --_appearance-color-fill: var(--vvd-color-canvas);\n --_appearance-color-outline: var(--vvd-color-neutral-50);\n}\n.base.appearance-ghost {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: transaprent;\n --_appearance-color-outline: transaprent;\n}\n.base::before {\n position: absolute;\n z-index: 1;\n border-radius: inherit;\n box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n content: \"\";\n inset: 0;\n pointer-events: none;\n}\n.base:not(.tight) {\n padding: 4px;\n column-gap: 4px;\n}\n\n/* Shape */\n.base:not(.shape-pill) {\n border-radius: 6px;\n}\n\n.base.shape-pill {\n border-radius: 24px;\n}\n\n::slotted([role=separator]) {\n width: 1px;\n align-self: stretch;\n background-color: var(--vvd-color-neutral-30);\n margin-block: 4px;\n}\n\n::slotted([vwc-divider]) {\n align-self: stretch;\n margin-block: 4px;\n}";
var css_248z = ":host {\n display: inline-block;\n}\n\n.base {\n position: relative;\n display: flex;\n box-sizing: border-box;\n align-items: center;\n background-color: var(--_appearance-color-fill);\n color: var(--_appearance-color-text);\n inline-size: inherit;\n vertical-align: middle;\n}\n.base {\n --_appearance-color-text: var(--vvd-color-on-canvas);\n --_appearance-color-fill: var(--vvd-color-canvas);\n --_appearance-color-outline: var(--vvd-color-neutral-50);\n}\n.base.appearance-ghost {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: transaprent;\n --_appearance-color-outline: transaprent;\n}\n.base::before {\n position: absolute;\n z-index: 1;\n border-radius: inherit;\n box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n content: \"\";\n inset: 0;\n pointer-events: none;\n}\n.base:not(.tight) {\n padding: 4px;\n column-gap: 4px;\n}\n\n/* Shape */\n.base:not(.shape-pill) {\n border-radius: 6px;\n}\n\n.base.shape-pill {\n border-radius: 24px;\n}\n\n/* Separator */\n::slotted(vwc-divider) {\n align-self: stretch;\n margin-block: 4px;\n}";
styleInject(css_248z);

@@ -12,0 +12,0 @@

@@ -21,2 +21,3 @@ import '../button/index.js';

import '../shared/aria-global.js';
import '../shared/ref.js';
import '../shared/focus2.js';

@@ -23,0 +24,0 @@ import '../shared/object-keys.js';

@@ -18,2 +18,3 @@ import '../icon/index.js';

import '../shared/aria-global.js';
import '../shared/ref.js';
import '../shared/affix.js';

@@ -20,0 +21,0 @@ import '../shared/web.dom-collections.iterator.js';

@@ -8,2 +8,3 @@ import { F as FoundationElement, _ as __decorate, o as observable, h as html, d as designSystem } from '../shared/index.js';

import '../shared/aria-global.js';
import '../shared/ref.js';

@@ -10,0 +11,0 @@ /**

@@ -10,3 +10,3 @@ import '../icon/index.js';

import { f as focusTemplateFactory } from '../shared/focus2.js';
import { r as ref } from '../shared/aria-global.js';
import { r as ref } from '../shared/ref.js';
import { c as classNames } from '../shared/class-names.js';

@@ -22,2 +22,3 @@ import '../shared/icon.js';

import '../shared/form-associated.js';
import '../shared/aria-global.js';

@@ -24,0 +25,0 @@ class Button extends Button$1 {

@@ -21,2 +21,3 @@ import { s as styleInject } from '../shared/style-inject.es.js';

import '../shared/aria-global.js';
import '../shared/ref.js';
import '../shared/focus2.js';

@@ -23,0 +24,0 @@ import '../shared/object-keys.js';

@@ -9,3 +9,3 @@ import '../icon/index.js';

import { f as focusTemplateFactory } from '../shared/focus2.js';
import { r as ref } from '../shared/aria-global.js';
import { r as ref } from '../shared/ref.js';
import { c as classNames } from '../shared/class-names.js';

@@ -22,2 +22,3 @@ import '../shared/icon.js';

import '../shared/form-associated.js';
import '../shared/aria-global.js';

@@ -24,0 +25,0 @@ var css_248z = "/*\n Do not edit directly\n Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\n.control {\n font: 600 ultra-condensed 14px / 20px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n position: relative;\n display: inline-flex;\n box-sizing: border-box;\n align-items: center;\n border: 0 none;\n background-color: var(--_appearance-color-fill, var(--_elevation-fill));\n block-size: var(--_fab-block-size);\n border-radius: var(--_fab-border-radius);\n color: var(--_appearance-color-text, var(--vvd-color-on-canvas));\n column-gap: var(--fab-icon-gap);\n filter: var(--_elevation-shadow);\n transition: background-color 0.15s linear, filter 0.15s linear;\n vertical-align: middle;\n /* Size */\n}\n.control.connotation-accent {\n --_connotation-color-primary: var(--vvd-color-on-canvas);\n --_connotation-color-on-primary: var(--vvd-color-canvas);\n --_connotation-color-primary-increment: var(--vvd-color-neutral-90);\n --_connotation-color-contrast: var(--vvd-color-neutral-90);\n --_connotation-color-fierce: var(--vvd-color-neutral-80);\n --_connotation-color-firm: var(--vvd-color-on-canvas);\n}\n.control.connotation-cta {\n --_connotation-color-primary: var(--vvd-color-cta);\n --_connotation-color-on-primary: var(--vvd-color-on-cta);\n --_connotation-color-primary-increment: var(--vvd-color-cta-70);\n --_connotation-color-contrast: var(--vvd-color-cta-90);\n --_connotation-color-fierce: var(--vvd-color-cta-80);\n --_connotation-color-firm: var(--vvd-color-cta-70);\n}\n.control {\n --_appearance-color-text: var(--_connotation-color-on-primary);\n --_appearance-color-fill: var(--_connotation-color-primary);\n --_appearance-color-outline: transaprent;\n}\n.control:where(:hover, .hover):where(:not(:disabled, .disabled)) {\n --_appearance-color-text: var(--_connotation-color-on-primary);\n --_appearance-color-fill: var(--_connotation-color-primary-increment);\n --_appearance-color-outline: transaprent;\n}\n.control:where(:disabled, .disabled) {\n --_appearance-color-text: var(--vvd-color-neutral-50);\n --_appearance-color-fill: var(--vvd-color-neutral-30);\n --_appearance-color-outline: transaprent;\n}\n.control:where(:active, .active):where(:not(:disabled, .disabled)) {\n --_appearance-color-text: var(--_connotation-color-on-primary);\n --_appearance-color-fill: var(--_connotation-color-fierce);\n --_appearance-color-outline: transaprent;\n}\n@supports selector(:focus-visible) {\n .control:focus {\n outline: none;\n }\n}\n@supports ((-webkit-user-select: none) or (user-select: none)) {\n .control {\n -webkit-user-select: none;\n user-select: none;\n }\n}\n.control.density-extended {\n --_fab-border-radius: 30px;\n --_fab-block-size: 56px;\n}\n.control:not(.density-extended) {\n --_fab-border-radius: 24px;\n --_fab-block-size: 40px;\n}\n.control.icon-only {\n border-radius: 50%;\n padding-inline: 0;\n place-content: center;\n}\n@supports (aspect-ratio: 1) {\n .control.icon-only {\n aspect-ratio: 1;\n }\n}\n@supports not (aspect-ratio: 1) {\n .control.icon-only {\n inline-size: var(--_fab-block-size);\n }\n}\n.control:not(.icon-only) {\n --fab-icon-gap: 10px;\n padding-inline: 20px;\n}\n.control:disabled {\n --_elevation-fill: var(--vvd-color-surface-0dp);\n --_elevation-shadow: var(--vvd-shadow-surface-0dp);\n cursor: not-allowed;\n}\n.control:not(:disabled) {\n --_elevation-fill: var(--vvd-color-surface-4dp);\n --_elevation-shadow: var(--vvd-shadow-surface-4dp);\n cursor: pointer;\n}\n.control:not(:disabled):hover {\n --_elevation-fill: var(--vvd-color-surface-12dp);\n --_elevation-shadow: var(--vvd-shadow-surface-12dp);\n}\n.control:not(:disabled):active {\n --_elevation-fill: var(--vvd-color-surface-24dp);\n --_elevation-shadow: var(--vvd-shadow-surface-24dp);\n}\n\n/* Icon */\n.icon {\n font-size: 20px;\n}\n.icon-trailing .icon {\n order: 1;\n}\n\n:not(:focus-visible) .focus-indicator {\n display: none;\n}";

@@ -48,2 +48,3 @@ export { vividAccordion } from './accordion/index.js';

import './shared/aria-global.js';
import './shared/ref.js';
import './shared/slotted.js';

@@ -50,0 +51,0 @@ import './shared/breadcrumb-item.js';

@@ -11,3 +11,3 @@ import { FoundationElement } from '@microsoft/fast-foundation';

alternate: boolean;
corner?: Placement;
placement?: Placement;
anchor: string;

@@ -14,0 +14,0 @@ constructor();

import { FoundationElement } from '@microsoft/fast-foundation';
import { AffixIcon } from '../../shared/patterns/affix';
export declare class SidenavDisclosure extends FoundationElement {
#private;
details: HTMLDetailsElement;
label?: string;

@@ -5,0 +7,0 @@ open: boolean;

@@ -6,4 +6,4 @@ import { FoundationElement } from '@microsoft/fast-foundation';

open: boolean;
corner?: Placement;
placement?: Placement;
anchor?: string;
}
{
"name": "@vonage/vivid",
"version": "3.0.0-next.41",
"version": "3.0.0-next.42",
"type": "module",

@@ -5,0 +5,0 @@ "module": "./index.esm.js",

@@ -1,42 +0,5 @@

import { A as AttachedBehaviorHTMLDirective, h as html, _ as __decorate, a as attr } from './index.js';
import { h as html, _ as __decorate, a as attr } from './index.js';
import { r as ref } from './ref.js';
/**
* The runtime behavior for template references.
* @public
*/
class RefBehavior {
/**
* Creates an instance of RefBehavior.
* @param target - The element to reference.
* @param propertyName - The name of the property to assign the reference to.
*/
constructor(target, propertyName) {
this.target = target;
this.propertyName = propertyName;
}
/**
* Bind this behavior to the source.
* @param source - The source to bind to.
* @param context - The execution context that the binding is operating within.
*/
bind(source) {
source[this.propertyName] = this.target;
}
/**
* Unbinds this behavior from the source.
* @param source - The source to unbind from.
*/
/* eslint-disable-next-line @typescript-eslint/no-empty-function */
unbind() { }
}
/**
* A directive that observes the updates a property with a reference to the element.
* @param propertyName - The name of the property to assign the reference to.
* @public
*/
function ref(propertyName) {
return new AttachedBehaviorHTMLDirective("fast-ref", RefBehavior, propertyName);
}
/**
* A mixin class implementing start and end elements.

@@ -156,2 +119,2 @@ * These are generally used to decorate text elements with icons or other visual indicators.

export { ARIAGlobalStatesAndProperties as A, StartEnd as S, ref as r };
export { ARIAGlobalStatesAndProperties as A, StartEnd as S };
import { a as affixIconTemplateFactory } from './affix.js';
import { f as focusTemplateFactory } from './focus2.js';
import { h as html } from './index.js';
import { r as ref } from './aria-global.js';
import { r as ref } from './ref.js';
import { c as classNames } from './class-names.js';

@@ -6,0 +6,0 @@

import '../icon/index.js';
import '../focus/index.js';
import { F as FoundationElement, _ as __decorate, a as attr, b as __metadata, h as html, d as designSystem } from '../shared/index.js';
import { F as FoundationElement, c as __classPrivateFieldGet, _ as __decorate, a as attr, b as __metadata, h as html, d as designSystem } from '../shared/index.js';
import { s as styleInject } from '../shared/style-inject.es.js';

@@ -10,2 +10,3 @@ import '../shared/web.dom-collections.iterator.js';

import { w as when } from '../shared/when.js';
import { r as ref } from '../shared/ref.js';
import '../shared/icon.js';

@@ -20,5 +21,6 @@ import '../shared/export.js';

var css_248z = "/*\n Do not edit directly\n Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\n.control {\n font: 400 ultra-condensed 14px / 20px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n position: relative;\n display: flex;\n box-sizing: border-box;\n align-items: center;\n background-color: var(--_appearance-color-fill);\n border-radius: 6px;\n box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n color: var(--_appearance-color-text);\n cursor: pointer;\n gap: 8px;\n -webkit-hyphens: auto;\n hyphens: auto;\n inline-size: 100%;\n min-block-size: 40px;\n padding-inline: 8px;\n text-decoration: none;\n vertical-align: middle;\n word-break: break-word;\n}\n.control {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: transaprent;\n --_appearance-color-outline: transaprent;\n}\n.control:where(:hover, .hover):where(:not(:disabled, .disabled)) {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: var(--_connotation-color-faint);\n --_appearance-color-outline: transaprent;\n}\n.control:where(:active, .active):where(:not(:disabled, .disabled)) {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: var(--_connotation-color-soft);\n --_appearance-color-outline: transaprent;\n}\n.control:where(.selected, [aria-current]):where(:not(:disabled, .disabled)) {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: var(--_connotation-color-soft);\n --_appearance-color-outline: transaprent;\n}\n.control {\n --_connotation-color-primary: var(--vvd-color-on-canvas);\n --_connotation-color-faint: var(--vvd-color-neutral-10);\n --_connotation-color-soft: var(--vvd-color-neutral-20);\n}\n@supports selector(:focus-visible) {\n .control:focus {\n outline: none;\n }\n}\n@supports ((-webkit-user-select: none) or (user-select: none)) {\n .control {\n -webkit-user-select: none;\n user-select: none;\n }\n}\n.control .toggleIcon {\n margin-inline-start: auto;\n}\n\n.control:not(:focus-visible) .focus-indicator {\n display: none;\n}\n\n.icon {\n font-size: 20px;\n}\n\n.content {\n border-inline-start: 1px solid var(--vvd-color-neutral-30);\n margin-inline-start: 32px;\n}\n\ndetails > summary {\n list-style: none;\n}\n\ndetails > summary::-webkit-details-marker {\n display: none;\n}";
var css_248z = "/*\n Do not edit directly\n Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\n.control {\n font: 400 ultra-condensed 14px / 20px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n position: relative;\n display: flex;\n box-sizing: border-box;\n align-items: center;\n background-color: var(--_appearance-color-fill);\n border-radius: 6px;\n box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n color: var(--_appearance-color-text);\n cursor: pointer;\n gap: 8px;\n -webkit-hyphens: auto;\n hyphens: auto;\n inline-size: 100%;\n min-block-size: 40px;\n padding-inline: 8px;\n text-decoration: none;\n vertical-align: middle;\n word-break: break-word;\n}\n.control {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: transaprent;\n --_appearance-color-outline: transaprent;\n}\n.control:where(:hover, .hover):where(:not(:disabled, .disabled)) {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: var(--_connotation-color-faint);\n --_appearance-color-outline: transaprent;\n}\n.control:where(:active, .active):where(:not(:disabled, .disabled)) {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: var(--_connotation-color-soft);\n --_appearance-color-outline: transaprent;\n}\n.control:where(.selected, [aria-current]):where(:not(:disabled, .disabled)) {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: var(--_connotation-color-soft);\n --_appearance-color-outline: transaprent;\n}\n.control {\n --_connotation-color-primary: var(--vvd-color-on-canvas);\n --_connotation-color-faint: var(--vvd-color-neutral-10);\n --_connotation-color-soft: var(--vvd-color-neutral-20);\n}\n@supports selector(:focus-visible) {\n .control:focus {\n outline: none;\n }\n}\n@supports ((-webkit-user-select: none) or (user-select: none)) {\n .control {\n -webkit-user-select: none;\n user-select: none;\n }\n}\n.control .toggleIcon {\n margin-inline-start: auto;\n}\n\n.control:not(:focus-visible) .focus-indicator {\n display: none;\n}\n\n.icon {\n font-size: 20px;\n}\n\n.content {\n border-inline-start: 1px solid var(--vvd-color-neutral-30);\n margin-inline-start: 20px;\n padding-inline-start: 12px;\n}\n\ndetails > summary {\n list-style: none;\n}\n\ndetails > summary::-webkit-details-marker {\n display: none;\n}";
styleInject(css_248z);
var _SidenavDisclosure_onToggle;
class SidenavDisclosure extends FoundationElement {

@@ -28,5 +30,22 @@ constructor() {

this.open = false;
_SidenavDisclosure_onToggle.set(this, () => {
this.open = this.details.open;
this.$emit('toggle');
});
}
connectedCallback() {
super.connectedCallback();
this.details.addEventListener('toggle', __classPrivateFieldGet(this, _SidenavDisclosure_onToggle, "f"));
this.details.open = this.open;
}
disconnectedCallback() {
super.disconnectedCallback();
this.details.removeEventListener('toggle', __classPrivateFieldGet(this, _SidenavDisclosure_onToggle, "f"));
}
}
_SidenavDisclosure_onToggle = new WeakMap();

@@ -48,3 +67,3 @@ __decorate([attr, __metadata("design:type", String)], SidenavDisclosure.prototype, "label", void 0);

const focusTemplate = focusTemplateFactory(context);
return html(_t || (_t = _`<details class="base" ?open="${0}">
return html(_t || (_t = _`<details class="base" ${0} ?open=${0}>
<summary class="control"

@@ -61,5 +80,7 @@ role="button"

</summary>
<div class="content" id="disclosure-content"><slot></slot></div>
<div class="content" id="disclosure-content">
<slot></slot>
</div>
</details>
`), x => x.open, x => x.open, x => affixIconTemplate(x.icon), x => x.label, when(x => x.open, html(_t2 || (_t2 = _`<vwc-icon class="toggleIcon" type='chevron-up-solid'></vwc-icon>`))), when(x => !x.open, html(_t3 || (_t3 = _`<vwc-icon class="toggleIcon" type='chevron-down-solid'></vwc-icon>`))), () => focusTemplate);
`), ref('details'), x => x.open, x => x.open, x => affixIconTemplate(x.icon), x => x.label, when(x => x.open, html(_t2 || (_t2 = _`<vwc-icon class="toggleIcon" type='chevron-up-solid'></vwc-icon>`))), when(x => !x.open, html(_t3 || (_t3 = _`<vwc-icon class="toggleIcon" type='chevron-down-solid'></vwc-icon>`))), () => focusTemplate);
};

@@ -66,0 +87,0 @@

@@ -21,2 +21,3 @@ import '../icon/index.js';

import '../shared/aria-global.js';
import '../shared/ref.js';
import '../shared/focus2.js';

@@ -23,0 +24,0 @@

@@ -15,2 +15,3 @@ import { d as designSystem } from '../shared/index.js';

import '../shared/aria-global.js';
import '../shared/ref.js';
import '../shared/focus2.js';

@@ -17,0 +18,0 @@ import '../shared/focus.js';

@@ -9,6 +9,7 @@ import '../icon/index.js';

import { F as FormAssociated } from '../shared/form-associated.js';
import { A as ARIAGlobalStatesAndProperties, S as StartEnd, r as ref } from '../shared/aria-global.js';
import { A as ARIAGlobalStatesAndProperties, S as StartEnd } from '../shared/aria-global.js';
import { s as styleInject } from '../shared/style-inject.es.js';
import { f as focusTemplateFactory } from '../shared/focus2.js';
import { w as when } from '../shared/when.js';
import { r as ref } from '../shared/ref.js';
import { c as classNames } from '../shared/class-names.js';

@@ -15,0 +16,0 @@ import '../shared/icon.js';

@@ -22,2 +22,3 @@ import '../popup/index.js';

import '../shared/aria-global.js';
import '../shared/ref.js';
import '../shared/focus2.js';

@@ -44,3 +45,3 @@ import '../shared/object-keys.js';

__decorate([attr, __metadata("design:type", String)], Tooltip.prototype, "corner", void 0);
__decorate([attr, __metadata("design:type", String)], Tooltip.prototype, "placement", void 0);

@@ -56,3 +57,3 @@ __decorate([attr, __metadata("design:type", String)], Tooltip.prototype, "anchor", void 0);

<vwc-popup class="${0}" arrow alternate
corner=${0} open=${0} anchor=${0}
placement=${0} open=${0} anchor=${0}
exportparts="vvd-theme-alternate" role="tooltip">

@@ -64,3 +65,3 @@ <div class="tooltip">

</div>
</vwc-popup>`), getClasses, x => x.corner, x => x.open, x => x.anchor, x => x.text);
</vwc-popup>`), getClasses, x => x.placement, x => x.open, x => x.anchor, x => x.text);

@@ -67,0 +68,0 @@ const vividTooltip = Tooltip.compose({

Sorry, the diff of this file is too big to display

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc