@warp-ds/elements 2.2.0-next.23 → 2.2.0-next.25
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/attention/index.js +7 -7
- package/dist/packages/attention/index.js.map +3 -3
- package/dist/packages/button/index.js +3 -3
- package/dist/packages/button/index.js.map +3 -3
- 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 +2 -2
- package/dist/packages/modal/index.js.map +1 -1
- package/dist/packages/modal/modal-header.js +2 -2
- package/dist/packages/modal/modal-header.js.map +1 -1
- package/dist/packages/modal/modal.stories.js +1 -0
- 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
|
@@ -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 class="${o}"></w-icon-chevron-up-16>`:w`<w-icon-chevron-down-16 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
|
}
|