@warp-ds/elements 2.10.0 → 2.11.0-next.1

package/dist/packages/card/card.react.stories.d.ts

@@ -3,7 +3,7 @@ import React from "react";
 import { Card } from "./react";
 declare const _default: {
     title: string;
-    render(args: Omit<React.HTMLAttributes<import("./card").WarpCard>, "flat" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "render" | "renderOptions" | "keypressed" | "buttonText" | "selected" | "clickable" | "_containerClasses" | "_outlineClasses" | "_interactiveElement"> & {} & Partial<Omit<import("./card").WarpCard, keyof HTMLElement>> & React.RefAttributes<import("./card").WarpCard>): React.JSX.Element;
+    render(args: Omit<React.HTMLAttributes<import("./card").WarpCard>, "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "render" | "renderOptions" | "flat" | "keypressed" | "selected" | "clickable"> & {} & Partial<Omit<import("./card").WarpCard, keyof HTMLElement>> & React.RefAttributes<import("./card").WarpCard>): React.JSX.Element;
     component: import("@lit/react").ReactWebComponent<import("./card").WarpCard, {}>;
 };
 export default _default;

package/dist/packages/card/card.stories.d.ts

@@ -13,3 +13,4 @@ export declare const Flat: Story;
 export declare const FlatSelected: Story;
 export declare const Clickable: Story;
 export declare const PropertyExample: Story;
+export declare const StylingApi: Story;

package/dist/packages/card/card.stories.js

@@ -68,7 +68,7 @@ export const PropertyExample = {
     },
     render(args) {
         return html `
-			<w-card ${spread(prespread(args))} style="max-width: 300px;">
+			<w-card ${spread(prespread(args))}>
 				<img
 					style="width: 100%; height: 200px; object-fit: cover;"
 					src="https://unsplash.it/300/200?random"
@@ -92,3 +92,46 @@ export const PropertyExample = {
 		`;
     },
 };
+export const StylingApi = {
+    args: {
+        clickable: false,
+        selected: false,
+        flat: false,
+    },
+    render(args) {
+        return html `
+			<pre>
+<code>
+&lt;style&gt;
+w-card::part(base) {
+	padding: 48px;
+	background: rebeccapurple;
+	color: cyan;
+}
+w-card::part(border) {
+	border-color: magenta;
+	border-width: 8px;
+}
+&lt;/style&gt;
+</code>
+		</pre>
+			<style>
+				w-card::part(base) {
+					padding: 48px;
+					background: rebeccapurple;
+					color: cyan;
+				}
+				w-card::part(border) {
+					border-color: magenta;
+					border-width: 8px;
+				}
+			</style>
+			<w-card ${spread(prespread(args))}>
+				<div style="padding: 16px;">
+					<h3>Card Title</h3>
+					<p>This is card content with some example text.</p>
+				</div>
+			</w-card>
+		`;
+    },
+};

package/dist/packages/card/react.d.ts

@@ -1,2 +1,7 @@
-import { WarpCard } from "./card.js";
+import type { WarpCard } from "./card.js";
+/**
+ * Card is a layout component used for separating content areas on a page.
+ *
+ * [Warp component reference](https://warp-ds.github.io/docs/components/card/frameworks/elements)
+ */
 export declare const Card: import("@lit/react").ReactWebComponent<WarpCard, {}>;

package/dist/packages/card/react.js

@@ -4,6 +4,11 @@ import React from "react";
 // decouple from CDN by providing a dummy class
 class Component extends LitElement {
 }
+/**
+ * Card is a layout component used for separating content areas on a page.
+ *
+ * [Warp component reference](https://warp-ds.github.io/docs/components/card/frameworks/elements)
+ */
 export const Card = createComponent({
     tagName: "w-card",
     elementClass: Component,

package/dist/packages/card/styles.js

@@ -1,2 +1,132 @@
-import { unsafeCSS } from "lit";
-export const styles = unsafeCSS("*,: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}.border-2{border-width:2px}.border-transparent{border-color:#0000}.rounded-4{border-radius:4px}.rounded-8{border-radius:8px}.block{display:block}.focusable:focus{outline:2px solid var(--w-s-color-border-focus);outline-offset:var(--w-outline-offset,1px)}.focusable:focus-visible{outline:2px solid var(--w-s-color-border-focus);outline-offset:var(--w-outline-offset,1px)}.focusable:not(:focus-visible){outline:none}.overflow-hidden{overflow:hidden}.outline{outline-style:solid}.inset-0{top:0;bottom:0;left:0;right:0}.absolute{position:absolute}.relative{position:relative}.static{position:static}.\\!s-bg-selected{background-color:var(--w-s-color-background-selected)!important}.s-bg{background-color:var(--w-s-color-background)}.s-bg-selected{background-color:var(--w-s-color-background-selected)}.\\!hover\\:s-bg-selected-hover:hover{background-color:var(--w-s-color-background-selected-hover)!important}.hover\\:s-bg-hover:hover{background-color:var(--w-s-color-background-hover)}.hover\\:s-bg-selected-hover:hover{background-color:var(--w-s-color-background-selected-hover)}.\\!active\\:s-bg-selected-active:active{background-color:var(--w-s-color-background-selected-active)!important}.active\\:s-bg-active:active{background-color:var(--w-s-color-background-active)}.active\\:s-bg-selected-active:active{background-color:var(--w-s-color-background-selected-active)}.s-border{border-color:var(--w-s-color-border)}.s-border-selected{border-color:var(--w-s-color-border-selected)}.group:hover .group-hover\\:s-border-selected-hover{border-color:var(--w-s-color-border-selected-hover)}.hover\\:s-border-hover:hover{border-color:var(--w-s-color-border-hover)}.hover\\:s-border-selected-hover:hover{border-color:var(--w-s-color-border-selected-hover)}.active\\:s-border-active:active{border-color:var(--w-s-color-border-active)}.active\\:s-border-selected-active:active{border-color:var(--w-s-color-border-selected-active)}.group:active .group-active\\:s-border-active{border-color:var(--w-s-color-border-active)}.group:active .group-active\\:s-border-selected-active{border-color:var(--w-s-color-border-selected-active)}.s-surface-elevated-200{background-color:var(--w-s-color-surface-elevated-200);box-shadow:var(--w-s-shadow-surface-elevated-200)}.hover\\:s-surface-elevated-200-hover:hover{background-color:var(--w-s-color-surface-elevated-200-hover);box-shadow:var(--w-s-shadow-surface-elevated-200-hover)}.active\\:s-surface-elevated-200-active:active{background-color:var(--w-s-color-surface-elevated-200-active);box-shadow:var(--w-s-shadow-surface-elevated-200-active)}.cursor-pointer{cursor:pointer}.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.transition-all{transition-property:all;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}");
+import { css } from "lit";
+export const styles = css `
+	:host {
+		--_background-color: var(
+			--w-c-card-bg,
+			var(--w-s-color-surface-elevated-200)
+		);
+		--_background-color-active: var(
+			--w-c-card-bg-active,
+			var(--w-s-color-background-active)
+		);
+		--_background-color-hover: var(
+			--w-c-card-bg-hover,
+			var(--w-s-color-background-hover)
+		);
+		--_border-color: var(--w-c-card-border-color, transparent);
+		--_border-color-active: var(
+			--w-c-card-border-color-active,
+			var(--w-s-color-border-active)
+		);
+		--_border-color-hover: var(
+			--w-c-card-border-color-hover,
+			var(--w-s-color-border-hover)
+		);
+		--_border-radius: var(--w-c-card-border-radius, 8px);
+		--_border-width: var(--w-c-card-border-width, 2px);
+		--_box-shadow: var(
+			--w-c-card-box-shadow,
+			var(--w-s-shadow-surface-elevated-200)
+		);
+		--_box-shadow-active: var(
+			--w-c-card-box-shadow-active,
+			var(--w-s-shadow-surface-elevated-200-active)
+		);
+		--_box-shadow-hover: var(
+			--w-c-card-box-shadow-hover,
+			var(--w-s-shadow-surface-elevated-200-hover)
+		);
+	}
+
+	:host([flat]) {
+		--_border-color: var(--w-c-card-border-color, var(--w-s-color-border));
+		--_border-width: var(--w-c-card-border-width, 2px);
+		--_border-radius: var(--w-c-card-border-radius, 4px);
+		--_box-shadow: none;
+		--_box-shadow-active: none;
+		--_box-shadow-hover: none;
+	}
+
+	:host([selected]) {
+		--_background-color: var(
+			--w-c-card-bg,
+			var(--w-s-color-background-selected)
+		);
+		--_background-color-active: var(
+			--w-c-card-bg-active,
+			var(--w-s-color-background-selected-active)
+		);
+		--_background-color-hover: var(
+			--w-c-card-bg-hover,
+			var(--w-s-color-background-selected-hover)
+		);
+		--_border-color: var(
+			--w-c-card-border-color,
+			var(--w-s-color-border-selected)
+		);
+		--_border-color-active: var(
+			--w-c-card-border-color-active,
+			var(--w-s-color-border-selected-active)
+		);
+		--_border-color-hover: var(
+			--w-c-card-border-color-hover,
+			var(--w-s-color-border-selected-hover)
+		);
+		--_border-width: var(--w-c-card-border-width, 2px);
+	}
+
+	[part="base"] {
+		background-color: var(--_background-color);
+		border-radius: var(--_border-radius);
+		box-shadow: var(--_box-shadow);
+		cursor: pointer;
+		display: block;
+		overflow: hidden;
+		position: relative;
+		transition-property: all;
+		transition-duration: 0.15s;
+		transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+	}
+
+	[part="base"]:hover {
+		background-color: var(--_background-color-hover);
+		box-shadow: var(--_box-shadow-hover);
+	}
+
+	[part="base"]:active {
+		background-color: var(--_background-color-active);
+		box-shadow: var(--_box-shadow-active);
+	}
+
+	[part="border"] {
+		border-radius: var(--_border-radius);
+		border-color: var(--_border-color);
+		border-width: var(--_border-width);
+		position: absolute;
+		inset: 0px;
+		transition-property: all;
+		transition-duration: 0.15s;
+		transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+	}
+
+	:host([flat]) [part="base"]:hover [part="border"],
+	:host([selected]) [part="base"]:hover [part="border"] {
+		border-color: var(--_border-color-hover);
+	}
+
+	[part="base"]:active [part="border"] {
+		border-color: var(--_border-color-active);
+	}
+
+	.sr-only {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		padding: 0;
+		margin: -1px;
+		overflow: hidden;
+		clip: rect(0, 0, 0, 0);
+		white-space: nowrap;
+		border-width: 0;
+	}
+`;

package/dist/packages/checkbox/checkbox.d.ts

@@ -1,6 +1,12 @@
 import { LitElement, PropertyValues } from "lit";
 declare const WarpCheckbox_base: import("@open-wc/form-control").Constructor<import("@open-wc/form-control").FormControlInterface> & typeof LitElement;
 /**
+ * Checkboxes allow users to select one or more options from a number of choices.
+ *
+ * Wrap individual checkboxes in a checkbox group.
+ *
+ * [Warp component reference](https://warp-ds.github.io/docs/components/checkbox/frameworks/elements)
+ *
  * @parent w-checkbox-group
  */
 export declare class WarpCheckbox extends WarpCheckbox_base {

package/dist/packages/checkbox/checkbox.js

@@ -2621,7 +2621,7 @@ var he=Object.defineProperty;var pe=Object.getOwnPropertyDescriptor;var ee=t=>{t
 			--w-c-checkbox-transition: none;
 		}
 	}
-`;var F,_,A,$,L,s,q,ne,se,J,V,P,le,de,p=class extends re(ae){constructor(){super(...arguments);y(this,s);this.value=null;this.indeterminate=!1;this.checked=!1;this.disabled=!1;this.required=!1;this.invalid=!1;y(this,F,!1);y(this,_,!1);y(this,A,!1);y(this,$,()=>{b(this,s,q).call(this),b(this,s,V).call(this)});y(this,L,e=>{if(!this.disabled&&!e.defaultPrevented&&!(e.key!==" "&&e.key!=="Spacebar"&&e.key!=="Enter")){if(e.key==="Enter"&&this.internals.form){this.internals.form.requestSubmit();return}e.composedPath()[0]!==this.input&&(e.preventDefault(),this.click())}})}set name(e){this._ownName=e}get name(){return this._ownName||this._groupName}get _computedInvalid(){return this.invalid||this._groupInvalid===!0}connectedCallback(){super.connectedCallback();let e=this.getAttribute("value");this.value=e??"on",I(this,F,this.hasAttribute("checked")),this.checked=k(this,F),this.addEventListener("invalid",k(this,$)),this.addEventListener("keydown",k(this,L)),b(this,s,P).call(this)}handleClick(){this.disabled||(b(this,s,q).call(this),this.checked=!this.checked,this.indeterminate=!1,this.updateComplete.then(()=>{this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}))}updated(e){super.updated(e),(e.has("checked")||e.has("indeterminate"))&&b(this,s,le).call(this),b(this,s,de).call(this,e)&&(b(this,s,P).call(this),b(this,s,V).call(this))}resetFormControl(){this.checked=k(this,F),b(this,s,P).call(this),b(this,s,V).call(this)}click(){this.disabled||this.input?.click()}focus(e){this.input?.focus(e)}blur(){this.input?.blur()}get validationMessage(){return this.internals.validationMessage}get validity(){return this.internals.validity}checkValidity(){return b(this,s,V).call(this),this.internals.checkValidity()}reportValidity(){return b(this,s,q).call(this),b(this,s,V).call(this),this.internals.checkValidity()}render(){let e=!this.checked&&this.indeterminate,a=e?"mixed":this.checked?"true":"false";return me`
+`;var F,_,A,$,L,s,q,ne,se,J,V,P,le,de,p=class extends re(ae){constructor(){super(...arguments);y(this,s);this.value=null;this.indeterminate=!1;this.checked=!1;this.disabled=!1;this.required=!1;this.invalid=!1;y(this,F,!1);y(this,_,!1);y(this,A,!1);y(this,$,()=>{b(this,s,q).call(this),b(this,s,V).call(this)});y(this,L,e=>{if(!this.disabled&&!e.defaultPrevented&&!(e.key!==" "&&e.key!=="Spacebar"&&e.key!=="Enter")){if(e.key==="Enter"&&this.internals.form){this.internals.form.requestSubmit();return}e.composedPath()[0]!==this.input&&(e.preventDefault(),this.click())}})}set name(e){this._ownName=e}get name(){return this._ownName||this._groupName}get _computedInvalid(){return this.invalid||this._groupInvalid===!0}connectedCallback(){super.connectedCallback();let e=this.getAttribute("value");this.value=e??"on",I(this,F,this.hasAttribute("checked")),this.checked=k(this,F),this.addEventListener("invalid",k(this,$)),this.addEventListener("keydown",k(this,L)),b(this,s,P).call(this)}handleClick(){this.disabled||(b(this,s,q).call(this),this.checked=!this.checked,this.indeterminate=!1,this.updateComplete.then(()=>{this.input.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}))}updated(e){super.updated(e),(e.has("checked")||e.has("indeterminate"))&&b(this,s,le).call(this),b(this,s,de).call(this,e)&&(b(this,s,P).call(this),b(this,s,V).call(this))}resetFormControl(){this.checked=k(this,F),b(this,s,P).call(this),b(this,s,V).call(this)}click(){this.disabled||this.input?.click()}focus(e){this.input?.focus(e)}blur(){this.input?.blur()}get validationMessage(){return this.internals.validationMessage}get validity(){return this.internals.validity}checkValidity(){return b(this,s,V).call(this),this.internals.checkValidity()}reportValidity(){return b(this,s,q).call(this),b(this,s,V).call(this),this.internals.checkValidity()}render(){let e=!this.checked&&this.indeterminate,a=e?"mixed":this.checked?"true":"false";return me`
 			<label part="base">
 				<span part="control">
 					<input