@warp-ds/elements 2.2.0-next.24 → 2.2.0-next.26
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/custom-elements.json +2 -2
- package/dist/packages/expandable/expandable.stories.js +0 -1
- package/dist/packages/expandable/index.js +2 -2
- package/dist/packages/expandable/index.js.map +2 -2
- package/dist/packages/expandable/styles.js +1 -1
- package/dist/packages/modal/index.js +4 -4
- package/dist/packages/modal/index.js.map +1 -1
- package/dist/packages/modal/modal-header.js +8 -8
- package/dist/packages/modal/modal-header.js.map +1 -1
- package/dist/packages/modal/modal.stories.d.ts +3 -3
- package/dist/packages/modal/modal.stories.js +164 -70
- package/dist/packages/select/index.js +23 -16
- package/dist/packages/select/index.js.map +3 -3
- package/dist/packages/select/select.stories.d.ts +7 -0
- package/dist/packages/select/select.stories.js +71 -2
- package/dist/web-types.json +1 -1
- package/package.json +1 -1
|
@@ -2720,7 +2720,7 @@
|
|
|
2720
2720
|
"type": {
|
|
2721
2721
|
"text": "object"
|
|
2722
2722
|
},
|
|
2723
|
-
"default": "{ base: 'group block relative break-words last-child:mb-0
|
|
2723
|
+
"default": "{ base: 'group block relative break-words last-child:mb-0 px-16 rounded-8', // Relative here enables w-clickable bleed: '-mx-16 sm:mx-0 rounded-l-0 rounded-r-0 sm:rounded-8', // We target L and R to override the default rounded-8 info: 's-bg-info-subtle', neutral: 's-surface-sunken', bordered: 'border-2 s-border s-bg', }"
|
|
2724
2724
|
},
|
|
2725
2725
|
{
|
|
2726
2726
|
"kind": "variable",
|
|
@@ -2728,7 +2728,7 @@
|
|
|
2728
2728
|
"type": {
|
|
2729
2729
|
"text": "object"
|
|
2730
2730
|
},
|
|
2731
|
-
"default": "{ wrapper: 'will-change-height s-text', box: 's-
|
|
2731
|
+
"default": "{ wrapper: 'will-change-height s-text py-16', box: 's-bg-subtle hover:s-bg-subtle-hover active:s-bg-subtle-active py-0 px-0 group block relative break-words last-child:mb-0 rounded-8', bleed: '-mx-16 rounded-l-0 rounded-r-0 sm:mx-0 sm:rounded-8', chevron: 'inline-block align-middle s-icon', chevronNonBox: 'ml-8', chevronTransform: 'transform transition-transform transform-gpu ease-in-out', chevronExpand: '-rotate-180', chevronCollapse: 'rotate-180', // These are web component specific classes, using the ::part-selector: elementsChevronDownTransform: 'part-[w-icon-chevron-down-16-part]:transform part-[w-icon-chevron-down-16-part]:transition-transform part-[w-icon-chevron-down-16-part]:transform-gpu part-[w-icon-chevron-down-16-part]:ease-in-out', elementsChevronUpTransform: 'part-[w-icon-chevron-up-16-part]:transform part-[w-icon-chevron-up-16-part]:transition-transform part-[w-icon-chevron-up-16-part]:transform-gpu part-[w-icon-chevron-up-16-part]:ease-in-out', elementsChevronExpand: 'part-[w-icon-chevron-down-16-part]:-rotate-180', elementsChevronCollapse: 'part-[w-icon-chevron-up-16-part]:rotate-180', expansion: 'overflow-hidden', expansionNotExpanded: 'h-0 invisible', button: 'focus:outline-none appearance-none cursor-pointer bg-transparent border-0 m-0 hover:underline focus-visible:underline', buttonBox: 'w-full text-left relative inline-flex items-center justify-between group relative break-words last-child:mb-0 px-16 rounded-8', contentWithTitle: 'pt-0', title: 'flex w-full justify-between items-center', titleType: 't4', }"
|
|
2732
2732
|
},
|
|
2733
2733
|
{
|
|
2734
2734
|
"kind": "class",
|
|
@@ -98,7 +98,6 @@ export const CustomTitle = {
|
|
|
98
98
|
return html `
|
|
99
99
|
<w-expandable ${spread(prespread(args))}>
|
|
100
100
|
<div slot="title" style="display: flex; align-items: center;">
|
|
101
|
-
<span style="margin-right: 8px;">🎯</span>
|
|
102
101
|
<span>Custom title with icon</span>
|
|
103
102
|
</div>
|
|
104
103
|
<p>This expandable has a custom title slot with an icon.</p>
|
|
@@ -2455,7 +2455,7 @@ Please compile your catalog first.
|
|
|
2455
2455
|
display: none
|
|
2456
2456
|
}
|
|
2457
2457
|
}
|
|
2458
|
-
`;import{css as jr}from"lit";var ye=jr`*,:before,:after{--w-rotate:0;--w-rotate-x:0;--w-rotate-y:0;--w-rotate-z:0;--w-scale-x:1;--w-scale-y:1;--w-scale-z:1;--w-skew-x:0;--w-skew-y:0;--w-translate-x:0;--w-translate-y:0;--w-translate-z:0}.t4{font-weight:700;font-size:var(--w-font-size-m);line-height:var(--w-line-height-m)}.text-left{text-align:left}.align-middle{vertical-align:middle}.bg-transparent{background-color:#0000}.appearance-none{-webkit-appearance:none;appearance:none}.will-change-height{will-change:height}.border-0{border-width:0}.border-2{border-width:2px}.rounded-8{border-radius:8px}.rounded-l-0{border-top-left-radius:0;border-bottom-left-radius:0}.rounded-r-0{border-top-right-radius:0;border-bottom-right-radius:0}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.inline-flex{display:inline-flex}.hover\\:underline:hover{text-decoration-line:underline}.focus-visible\\:underline:focus-visible{text-decoration-line:underline}.overflow-hidden{overflow:hidden}.focus\\:outline-none:focus{outline-offset:2px;outline:2px solid #0000}.items-center{align-items:center}.justify-between{justify-content:space-between}.relative{position:relative}.static{position:static}.s-bg{background-color:var(--w-s-color-background)}.s-bg-info-subtle{background-color:var(--w-s-color-background-info-subtle)}.hover\\:s-bg-hover:hover{background-color:var(--w-s-color-background-hover)}.active\\:s-bg-active:active{background-color:var(--w-s-color-background-active)}.s-text{color:var(--w-s-color-text)}.s-icon{color:var(--w-s-color-icon)}.s-border{border-color:var(--w-s-color-border)}.s-surface-sunken{background-color:var(--w-s-color-surface-sunken)}.h-0{height:0}.w-full{width:100%}.m-0{margin:0}.-mx-16{margin-left:-1.6rem;margin-right:-1.6rem}.last-child\\:mb-0>:last-child{margin-bottom:0}.ml-8{margin-left:.8rem}.
|
|
2458
|
+
`;import{css as jr}from"lit";var ye=jr`*,:before,:after{--w-rotate:0;--w-rotate-x:0;--w-rotate-y:0;--w-rotate-z:0;--w-scale-x:1;--w-scale-y:1;--w-scale-z:1;--w-skew-x:0;--w-skew-y:0;--w-translate-x:0;--w-translate-y:0;--w-translate-z:0}.t4{font-weight:700;font-size:var(--w-font-size-m);line-height:var(--w-line-height-m)}.text-left{text-align:left}.align-middle{vertical-align:middle}.bg-transparent{background-color:#0000}.appearance-none{-webkit-appearance:none;appearance:none}.will-change-height{will-change:height}.border-0{border-width:0}.border-2{border-width:2px}.rounded-8{border-radius:8px}.rounded-l-0{border-top-left-radius:0;border-bottom-left-radius:0}.rounded-r-0{border-top-right-radius:0;border-bottom-right-radius:0}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.inline-flex{display:inline-flex}.hover\\:underline:hover{text-decoration-line:underline}.focus-visible\\:underline:focus-visible{text-decoration-line:underline}.overflow-hidden{overflow:hidden}.focus\\:outline-none:focus{outline-offset:2px;outline:2px solid #0000}.items-center{align-items:center}.justify-between{justify-content:space-between}.relative{position:relative}.static{position:static}.s-bg{background-color:var(--w-s-color-background)}.s-bg-info-subtle{background-color:var(--w-s-color-background-info-subtle)}.s-bg-subtle{background-color:var(--w-s-color-background-subtle)}.hover\\:s-bg-subtle-hover:hover{background-color:var(--w-s-color-background-subtle-hover)}.active\\:s-bg-subtle-active:active{background-color:var(--w-s-color-background-subtle-active)}.s-text{color:var(--w-s-color-text)}.s-icon{color:var(--w-s-color-icon)}.s-border{border-color:var(--w-s-color-border)}.s-surface-sunken{background-color:var(--w-s-color-surface-sunken)}.h-0{height:0}.w-full{width:100%}.m-0{margin:0}.-mx-16{margin-left:-1.6rem;margin-right:-1.6rem}.last-child\\:mb-0>:last-child{margin-bottom:0}.ml-8{margin-left:.8rem}.px-0{padding-left:0;padding-right:0}.px-16{padding-left:1.6rem;padding-right:1.6rem}.py-0{padding-top:0;padding-bottom:0}.py-16{padding-top:1.6rem;padding-bottom:1.6rem}.pt-0{padding-top:0}.pt-16{padding-top:1.6rem}.pt-8{padding-top:.8rem}.invisible{visibility:hidden}.break-words{overflow-wrap:break-word}.cursor-pointer{cursor:pointer}.-rotate-180{--w-rotate-x:0;--w-rotate-y:0;--w-rotate-z:0;--w-rotate:-180deg;transform:translateX(var(--w-translate-x))translateY(var(--w-translate-y))translateZ(var(--w-translate-z))rotate(var(--w-rotate))rotateX(var(--w-rotate-x))rotateY(var(--w-rotate-y))rotateZ(var(--w-rotate-z))skewX(var(--w-skew-x))skewY(var(--w-skew-y))scaleX(var(--w-scale-x))scaleY(var(--w-scale-y))scaleZ(var(--w-scale-z))}.part-\\[w-icon-chevron-down-16-part\\]\\:-rotate-180::part(w-icon-chevron-down-16-part){--w-rotate-x:0;--w-rotate-y:0;--w-rotate-z:0;--w-rotate:-180deg;transform:translateX(var(--w-translate-x))translateY(var(--w-translate-y))translateZ(var(--w-translate-z))rotate(var(--w-rotate))rotateX(var(--w-rotate-x))rotateY(var(--w-rotate-y))rotateZ(var(--w-rotate-z))skewX(var(--w-skew-x))skewY(var(--w-skew-y))scaleX(var(--w-scale-x))scaleY(var(--w-scale-y))scaleZ(var(--w-scale-z))}.rotate-180{--w-rotate-x:0;--w-rotate-y:0;--w-rotate-z:0;--w-rotate:180deg;transform:translateX(var(--w-translate-x))translateY(var(--w-translate-y))translateZ(var(--w-translate-z))rotate(var(--w-rotate))rotateX(var(--w-rotate-x))rotateY(var(--w-rotate-y))rotateZ(var(--w-rotate-z))skewX(var(--w-skew-x))skewY(var(--w-skew-y))scaleX(var(--w-scale-x))scaleY(var(--w-scale-y))scaleZ(var(--w-scale-z))}.part-\\[w-icon-chevron-up-16-part\\]\\:rotate-180::part(w-icon-chevron-up-16-part){--w-rotate-x:0;--w-rotate-y:0;--w-rotate-z:0;--w-rotate:180deg;transform:translateX(var(--w-translate-x))translateY(var(--w-translate-y))translateZ(var(--w-translate-z))rotate(var(--w-rotate))rotateX(var(--w-rotate-x))rotateY(var(--w-rotate-y))rotateZ(var(--w-rotate-z))skewX(var(--w-skew-x))skewY(var(--w-skew-y))scaleX(var(--w-scale-x))scaleY(var(--w-scale-y))scaleZ(var(--w-scale-z))}.transform{transform:translateX(var(--w-translate-x))translateY(var(--w-translate-y))translateZ(var(--w-translate-z))rotate(var(--w-rotate))rotateX(var(--w-rotate-x))rotateY(var(--w-rotate-y))rotateZ(var(--w-rotate-z))skewX(var(--w-skew-x))skewY(var(--w-skew-y))scaleX(var(--w-scale-x))scaleY(var(--w-scale-y))scaleZ(var(--w-scale-z))}.part-\\[w-icon-chevron-down-16-part\\]\\:transform::part(w-icon-chevron-down-16-part){transform:translateX(var(--w-translate-x))translateY(var(--w-translate-y))translateZ(var(--w-translate-z))rotate(var(--w-rotate))rotateX(var(--w-rotate-x))rotateY(var(--w-rotate-y))rotateZ(var(--w-rotate-z))skewX(var(--w-skew-x))skewY(var(--w-skew-y))scaleX(var(--w-scale-x))scaleY(var(--w-scale-y))scaleZ(var(--w-scale-z))}.part-\\[w-icon-chevron-up-16-part\\]\\:transform::part(w-icon-chevron-up-16-part){transform:translateX(var(--w-translate-x))translateY(var(--w-translate-y))translateZ(var(--w-translate-z))rotate(var(--w-rotate))rotateX(var(--w-rotate-x))rotateY(var(--w-rotate-y))rotateZ(var(--w-rotate-z))skewX(var(--w-skew-x))skewY(var(--w-skew-y))scaleX(var(--w-scale-x))scaleY(var(--w-scale-y))scaleZ(var(--w-scale-z))}.transform-gpu{transform:translate3d(var(--w-translate-x),var(--w-translate-y),var(--w-translate-z))rotate(var(--w-rotate))rotateX(var(--w-rotate-x))rotateY(var(--w-rotate-y))rotateZ(var(--w-rotate-z))skewX(var(--w-skew-x))skewY(var(--w-skew-y))scaleX(var(--w-scale-x))scaleY(var(--w-scale-y))scaleZ(var(--w-scale-z))}.part-\\[w-icon-chevron-down-16-part\\]\\:transform-gpu::part(w-icon-chevron-down-16-part){transform:translate3d(var(--w-translate-x),var(--w-translate-y),var(--w-translate-z))rotate(var(--w-rotate))rotateX(var(--w-rotate-x))rotateY(var(--w-rotate-y))rotateZ(var(--w-rotate-z))skewX(var(--w-skew-x))skewY(var(--w-skew-y))scaleX(var(--w-scale-x))scaleY(var(--w-scale-y))scaleZ(var(--w-scale-z))}.part-\\[w-icon-chevron-up-16-part\\]\\:transform-gpu::part(w-icon-chevron-up-16-part){transform:translate3d(var(--w-translate-x),var(--w-translate-y),var(--w-translate-z))rotate(var(--w-rotate))rotateX(var(--w-rotate-x))rotateY(var(--w-rotate-y))rotateZ(var(--w-rotate-z))skewX(var(--w-skew-x))skewY(var(--w-skew-y))scaleX(var(--w-scale-x))scaleY(var(--w-scale-y))scaleZ(var(--w-scale-z))}.transition-transform{transition-property:transform;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.part-\\[w-icon-chevron-down-16-part\\]\\:transition-transform::part(w-icon-chevron-down-16-part){transition-property:transform;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.part-\\[w-icon-chevron-up-16-part\\]\\:transition-transform::part(w-icon-chevron-up-16-part){transition-property:transform;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.part-\\[w-icon-chevron-down-16-part\\]\\:ease-in-out::part(w-icon-chevron-down-16-part){transition-timing-function:cubic-bezier(.4,0,.2,1)}.part-\\[w-icon-chevron-up-16-part\\]\\:ease-in-out::part(w-icon-chevron-up-16-part){transition-timing-function:cubic-bezier(.4,0,.2,1)}@media (min-width:480px){.sm\\:rounded-8{border-radius:8px}.sm\\:mx-0{margin-left:0;margin-right:0}}`;var Ar={base:"group block relative break-words last-child:mb-0 px-16 rounded-8",bleed:"-mx-16 sm:mx-0 rounded-l-0 rounded-r-0 sm:rounded-8",info:"s-bg-info-subtle",neutral:"s-surface-sunken",bordered:"border-2 s-border s-bg"},c={wrapper:"will-change-height s-text py-16",box:"s-bg-subtle hover:s-bg-subtle-hover active:s-bg-subtle-active py-0 px-0 group block relative break-words last-child:mb-0 rounded-8",bleed:"-mx-16 rounded-l-0 rounded-r-0 sm:mx-0 sm:rounded-8",chevron:"inline-block align-middle s-icon",chevronNonBox:"ml-8",chevronTransform:"transform transition-transform transform-gpu ease-in-out",chevronExpand:"-rotate-180",chevronCollapse:"rotate-180",elementsChevronDownTransform:"part-[w-icon-chevron-down-16-part]:transform part-[w-icon-chevron-down-16-part]:transition-transform part-[w-icon-chevron-down-16-part]:transform-gpu part-[w-icon-chevron-down-16-part]:ease-in-out",elementsChevronUpTransform:"part-[w-icon-chevron-up-16-part]:transform part-[w-icon-chevron-up-16-part]:transition-transform part-[w-icon-chevron-up-16-part]:transform-gpu part-[w-icon-chevron-up-16-part]:ease-in-out",elementsChevronExpand:"part-[w-icon-chevron-down-16-part]:-rotate-180",elementsChevronCollapse:"part-[w-icon-chevron-up-16-part]:rotate-180",expansion:"overflow-hidden",expansionNotExpanded:"h-0 invisible",button:"focus:outline-none appearance-none cursor-pointer bg-transparent border-0 m-0 hover:underline focus-visible:underline",buttonBox:"w-full text-left relative inline-flex items-center justify-between group relative break-words last-child:mb-0 px-16 rounded-8",contentWithTitle:"pt-0",title:"flex w-full justify-between items-center",titleType:"t4"},u,_e,ze,Ce,Ee,Ye,Le,p=class extends Pr{constructor(){super(...arguments);Q(this,u);this.expanded=!1;this.box=!1;this.bleed=!1;this.noChevron=!1;this.animated=!1;this._hasTitle=!0;this._showChevronUp=!1}updated(o){o.has("expanded")&&setTimeout(()=>{this._showChevronUp=this.expanded},200)}firstUpdated(){var a;let o=!!this.title,t=((a=this.renderRoot.querySelector("slot[name='title']"))==null?void 0:a.assignedNodes().length)>0;this._hasTitle=o||t}get _expandableSlot(){return w`<div class="${_(this,u,Ye)}">
|
|
2459
2459
|
<slot></slot>
|
|
2460
2460
|
</div>`}render(){return w` <div class="${_(this,u,_e)}">
|
|
2461
2461
|
${this._hasTitle?w`<w-unstyled-heading level=${this.headingLevel}>
|
|
@@ -2473,7 +2473,7 @@ Please compile your catalog first.
|
|
|
2473
2473
|
${this.animated?w`<w-expand-transition ?show=${this.expanded}> ${this._expandableSlot} </w-expand-transition>`:w`<div class="${_(this,u,Le)}" aria-hidden=${Br(this.expanded?void 0:!0)}>
|
|
2474
2474
|
${this._expandableSlot}
|
|
2475
2475
|
</div>`}
|
|
2476
|
-
</div>`}};u=new WeakSet,_e=function(){return m([c.wrapper,this.box&&c.box,this.bleed&&c.bleed])},ze=function(){return m(this.buttonClass,[c.button,this.box&&c.buttonBox])},Ce=function(){return m([c.chevron,!this.box&&c.chevronNonBox])},Ee=function(){let o=m([c.elementsChevronUpTransform,!this.expanded&&this._showChevronUp&&c.elementsChevronCollapse]),t=m([c.elementsChevronDownTransform,this.expanded&&!this._showChevronUp&&c.elementsChevronExpand]);return this._showChevronUp?w`<w-icon-chevron-up-16 style="display: flex;" class="${o}"></w-icon-chevron-up-16>`:w`<w-icon-chevron-down-16 style="display: flex;" class="${t}"></w-icon-chevron-down-16>`},Ye=function(){return m(this.contentClass,[this.box&&Ar.base,this._hasTitle&&this.box&&c.contentWithTitle])},Le=function(){return m([c.expansion,!this.expanded&&c.expansionNotExpanded])},p.styles=[ke,ye,Dr`
|
|
2476
|
+
</div>`}};u=new WeakSet,_e=function(){return m([c.wrapper,this.box&&c.box,this.bleed&&c.bleed])},ze=function(){return m(this.buttonClass,[c.button,this.box&&c.buttonBox])},Ce=function(){return m([c.chevron,!this.box&&c.chevronNonBox])},Ee=function(){let o=m([c.elementsChevronUpTransform,!this.expanded&&this._showChevronUp&&c.elementsChevronCollapse]),t=m([c.elementsChevronDownTransform,this.expanded&&!this._showChevronUp&&c.elementsChevronExpand]);return this._showChevronUp?w`<w-icon-chevron-up-16 style="display: flex;" class="${o}"></w-icon-chevron-up-16>`:w`<w-icon-chevron-down-16 style="display: flex;" class="${t}"></w-icon-chevron-down-16>`},Ye=function(){return m(this.contentClass,[this.box?"pt-16":"pt-8",this.box&&Ar.base,this._hasTitle&&this.box&&c.contentWithTitle])},Le=function(){return m([c.expansion,!this.expanded&&c.expansionNotExpanded])},p.styles=[ke,ye,Dr`
|
|
2477
2477
|
:host {
|
|
2478
2478
|
display: block;
|
|
2479
2479
|
}
|