@warp-ds/elements 2.9.0 → 2.9.1-next.2

package/dist/index.d.ts

@@ -616,28 +616,38 @@ Use this with a parent element that has `position: relative`. Accepted values ar
 };
 
 export type WarpBoxProps = {
-  /**  */
+  /** Makes the box bleed to the container edge.
+Extends the box into the horizontal gutter on narrow screens. Adds negative horizontal margins and square side corners below the small breakpoint, then restores the normal margins and rounded corners from the small breakpoint and up. */
   bleed?: WarpBox["bleed"];
-  /**  */
+  /** Shows the box as a bordered surface.
+Use this when the content needs a clear visual boundary from the surrounding page. */
   bordered?: WarpBox["bordered"];
-  /**  */
+  /** Shows the box with information styling.
+Use this for supporting informational content that should be visually separated from the surrounding page. */
   info?: WarpBox["info"];
-  /**  */
+  /** Shows the box with neutral styling.
+Use this for quiet grouped content that needs a background without strong emphasis. */
   neutral?: WarpBox["neutral"];
-  /**  */
+  /** ARIA role for the box wrapper.
+Defaults to a role of `region`. Set `role="none"` to override this behaviour for purely visual grouping, or set a specific role when the box has a clearer semantic purpose. */
   role?: WarpBox["role"];
 };
 
 export type WarpBoxSolidJsProps = {
-  /**  */
+  /** Makes the box bleed to the container edge.
+Extends the box into the horizontal gutter on narrow screens. Adds negative horizontal margins and square side corners below the small breakpoint, then restores the normal margins and rounded corners from the small breakpoint and up. */
   "prop:bleed"?: WarpBox["bleed"];
-  /**  */
+  /** Shows the box as a bordered surface.
+Use this when the content needs a clear visual boundary from the surrounding page. */
   "prop:bordered"?: WarpBox["bordered"];
-  /**  */
+  /** Shows the box with information styling.
+Use this for supporting informational content that should be visually separated from the surrounding page. */
   "prop:info"?: WarpBox["info"];
-  /**  */
+  /** Shows the box with neutral styling.
+Use this for quiet grouped content that needs a background without strong emphasis. */
   "prop:neutral"?: WarpBox["neutral"];
-  /**  */
+  /** ARIA role for the box wrapper.
+Defaults to a role of `region`. Set `role="none"` to override this behaviour for purely visual grouping, or set a specific role when the box has a clearer semantic purpose. */
   "prop:role"?: WarpBox["role"];
 
   /** Set the innerHTML of the element */
@@ -2156,11 +2166,16 @@ export type CustomElements = {
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
-   * - `bleed`: undefined
-   * - `bordered`: undefined
-   * - `info`: undefined
-   * - `neutral`: undefined
-   * - `role`: undefined
+   * - `bleed`: Makes the box bleed to the container edge.
+   * Extends the box into the horizontal gutter on narrow screens. Adds negative horizontal margins and square side corners below the small breakpoint, then restores the normal margins and rounded corners from the small breakpoint and up.
+   * - `bordered`: Shows the box as a bordered surface.
+   * Use this when the content needs a clear visual boundary from the surrounding page.
+   * - `info`: Shows the box with information styling.
+   * Use this for supporting informational content that should be visually separated from the surrounding page.
+   * - `neutral`: Shows the box with neutral styling.
+   * Use this for quiet grouped content that needs a background without strong emphasis.
+   * - `role`: ARIA role for the box wrapper.
+   * Defaults to a role of `region`. Set `role="none"` to override this behaviour for purely visual grouping, or set a specific role when the box has a clearer semantic purpose.
    */
   "w-box": Partial<WarpBoxProps & BaseProps<WarpBox> & BaseEvents>;
 
@@ -3194,11 +3209,16 @@ export type CustomElementsSolidJs = {
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
-   * - `bleed`: undefined
-   * - `bordered`: undefined
-   * - `info`: undefined
-   * - `neutral`: undefined
-   * - `role`: undefined
+   * - `bleed`: Makes the box bleed to the container edge.
+   * Extends the box into the horizontal gutter on narrow screens. Adds negative horizontal margins and square side corners below the small breakpoint, then restores the normal margins and rounded corners from the small breakpoint and up.
+   * - `bordered`: Shows the box as a bordered surface.
+   * Use this when the content needs a clear visual boundary from the surrounding page.
+   * - `info`: Shows the box with information styling.
+   * Use this for supporting informational content that should be visually separated from the surrounding page.
+   * - `neutral`: Shows the box with neutral styling.
+   * Use this for quiet grouped content that needs a background without strong emphasis.
+   * - `role`: ARIA role for the box wrapper.
+   * Defaults to a role of `region`. Set `role="none"` to override this behaviour for purely visual grouping, or set a specific role when the box has a clearer semantic purpose.
    */
   "w-box": Partial<
     WarpBoxProps & WarpBoxSolidJsProps & BaseProps<WarpBox> & BaseEvents

package/dist/packages/box/box.d.ts

@@ -1,40 +1,41 @@
-import { LitElement, nothing } from 'lit';
+import { LitElement, PropertyValues } from 'lit';
+declare const WarpBox_base: import("@open-wc/form-control").Constructor<import("@open-wc/form-control").FormControlInterface> & typeof LitElement;
 /**
  * Box is a layout component used for separating content areas on a page.
  *
  * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/layout-box--docs)
  */
-declare class WarpBox extends LitElement {
+declare class WarpBox extends WarpBox_base {
     /**
-     * @summary
-     * @description
+     * Makes the box bleed to the container edge.
+     * Extends the box into the horizontal gutter on narrow screens. Adds negative horizontal margins and square side corners below the small breakpoint, then restores the normal margins and rounded corners from the small breakpoint and up.
      */
     bleed: boolean;
     /**
-     * @summary
-     * @description
+     * Shows the box as a bordered surface.
+     * Use this when the content needs a clear visual boundary from the surrounding page.
      */
     bordered: boolean;
     /**
-     * @summary
-     * @description
+     * Shows the box with information styling.
+     * Use this for supporting informational content that should be visually separated from the surrounding page.
      */
     info: boolean;
     /**
-     * @summary
-     * @description
+     * Shows the box with neutral styling.
+     * Use this for quiet grouped content that needs a background without strong emphasis.
      */
     neutral: boolean;
     /**
-     * @summary
-     * @description
+     * ARIA role for the box wrapper.
+     * Defaults to a role of `region`. Set `role="none"` to override this behaviour for purely visual grouping, or set a specific role when the box has a clearer semantic purpose.
      */
     role: string;
     static styles: import("lit").CSSResult[];
+    connectedCallback(): void;
+    protected updated(_changedProperties: PropertyValues): void;
     /** @internal */
     get _class(): string;
-    /** @internal */
-    get _optOutRoleWithDefault(): string | typeof nothing;
     render(): import("lit").TemplateResult<1>;
 }
 export { WarpBox };

package/dist/packages/box/box.js

@@ -1,4 +1,4 @@
-var v=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var n=(i,o,a,r)=>{for(var e=r>1?void 0:r?h(o,a):o,l=i.length-1,c;l>=0;l--)(c=i[l])&&(e=(r?c(o,a,e):c(e))||e);return r&&e&&v(o,a,e),e};var s=function(){for(var i=[],o=arguments.length;o--;)i[o]=arguments[o];return i.reduce(function(a,r){return a.concat(typeof r=="string"?r:Array.isArray(r)?s.apply(void 0,r):typeof r=="object"&&r?Object.keys(r).map(function(e){return r[e]?e:""}):"")},[]).join(" ")};import{css as m,html as w,LitElement as f,nothing as x}from"lit";import{property as d}from"lit/decorators.js";import{css as b}from"lit";var p=b`
+var O=Object.defineProperty;var $=Object.getOwnPropertyDescriptor;var f=(d,e,n,o)=>{for(var i=o>1?void 0:o?$(e,n):e,h=d.length-1,u;h>=0;h--)(u=d[h])&&(i=(o?u(e,n,i):u(i))||i);return o&&i&&O(e,n,i),i};var Z=function(){for(var d=[],e=arguments.length;e--;)d[e]=arguments[e];return d.reduce(function(n,o){return n.concat(typeof o=="string"?o:Array.isArray(o)?Z.apply(void 0,o):typeof o=="object"&&o?Object.keys(o).map(function(i){return o[i]?i:""}):"")},[]).join(" ")};import{css as D,html as H,LitElement as J}from"lit";import{property as F}from"lit/decorators.js";var a=function(d,e,n,o){if(n==="a"&&!o)throw new TypeError("Private accessor was defined without a getter");if(typeof e=="function"?d!==e||!o:!e.has(d))throw new TypeError("Cannot read private member from an object whose class did not declare it");return n==="m"?o:n==="a"?o.call(d):o?o.value:e.get(d)},l=function(d,e,n,o,i){if(o==="m")throw new TypeError("Private method is not writable");if(o==="a"&&!i)throw new TypeError("Private accessor was defined without a setter");if(typeof e=="function"?d!==e||!i:!e.has(d))throw new TypeError("Cannot write private member to an object whose class did not declare it");return o==="a"?i.call(d,n):i?i.value=n:e.set(d,n),n};function N(d){var e,n,o,i,h,u,m,R,x,Y,j,E,V,k,M,v,A,P,S;class q extends d{constructor(...r){var t,s,c;super(...r),e.add(this),this.internals=this.attachInternals(),n.set(this,!1),o.set(this,!1),i.set(this,!1),h.set(this,void 0),u.set(this,void 0),m.set(this,!0),x.set(this,""),Y.set(this,()=>{l(this,i,!0,"f"),l(this,n,!0,"f"),a(this,e,"m",v).call(this)}),j.set(this,()=>{l(this,n,!1,"f"),a(this,e,"m",A).call(this,this.shouldFormValueUpdate()?a(this,x,"f"):""),!this.validity.valid&&a(this,i,"f")&&l(this,o,!0,"f");let p=a(this,e,"m",v).call(this);this.validationMessageCallback&&this.validationMessageCallback(p?this.internals.validationMessage:"")}),E.set(this,()=>{var p;a(this,m,"f")&&this.validationTarget&&(this.internals.setValidity(this.validity,this.validationMessage,this.validationTarget),l(this,m,!1,"f")),l(this,i,!0,"f"),l(this,o,!0,"f"),a(this,e,"m",v).call(this),(p=this===null||this===void 0?void 0:this.validationMessageCallback)===null||p===void 0||p.call(this,this.showError?this.internals.validationMessage:"")}),V.set(this,void 0),k.set(this,!1),M.set(this,Promise.resolve()),(t=this.addEventListener)===null||t===void 0||t.call(this,"focus",a(this,Y,"f")),(s=this.addEventListener)===null||s===void 0||s.call(this,"blur",a(this,j,"f")),(c=this.addEventListener)===null||c===void 0||c.call(this,"invalid",a(this,E,"f")),this.setValue(null)}static get formAssociated(){return!0}static get validators(){return this.formControlValidators||[]}static get observedAttributes(){let r=this.validators.map(c=>c.attribute).flat(),t=super.observedAttributes||[];return[...new Set([...t,...r])]}static getValidator(r){return this.validators.find(t=>t.attribute===r)||null}static getValidators(r){return this.validators.filter(t=>{var s;if(t.attribute===r||!((s=t.attribute)===null||s===void 0)&&s.includes(r))return!0})}get form(){return this.internals.form}get showError(){return a(this,e,"m",v).call(this)}checkValidity(){return this.internals.checkValidity()}get validity(){return this.internals.validity}get validationMessage(){return this.internals.validationMessage}attributeChangedCallback(r,t,s){var c;(c=super.attributeChangedCallback)===null||c===void 0||c.call(this,r,t,s);let z=this.constructor.getValidators(r);z!=null&&z.length&&this.validationTarget&&this.setValue(a(this,x,"f"))}setValue(r){var t;l(this,o,!1,"f"),(t=this.validationMessageCallback)===null||t===void 0||t.call(this,""),l(this,x,r,"f");let c=this.shouldFormValueUpdate()?r:null;this.internals.setFormValue(c),a(this,e,"m",A).call(this,c),this.valueChangedCallback&&this.valueChangedCallback(c),a(this,e,"m",v).call(this)}shouldFormValueUpdate(){return!0}get validationComplete(){return new Promise(r=>r(a(this,M,"f")))}formResetCallback(){var r,t;l(this,i,!1,"f"),l(this,o,!1,"f"),a(this,e,"m",v).call(this),(r=this.resetFormControl)===null||r===void 0||r.call(this),(t=this.validationMessageCallback)===null||t===void 0||t.call(this,a(this,e,"m",v).call(this)?this.validationMessage:"")}}return n=new WeakMap,o=new WeakMap,i=new WeakMap,h=new WeakMap,u=new WeakMap,m=new WeakMap,x=new WeakMap,Y=new WeakMap,j=new WeakMap,E=new WeakMap,V=new WeakMap,k=new WeakMap,M=new WeakMap,e=new WeakSet,R=function(){let r=this.getRootNode(),t=`${this.localName}[name="${this.getAttribute("name")}"]`;return r.querySelectorAll(t)},v=function(){if(this.hasAttribute("disabled"))return!1;let r=a(this,o,"f")||a(this,i,"f")&&!this.validity.valid&&!a(this,n,"f");return r&&this.internals.states?this.internals.states.add("--show-error"):this.internals.states&&this.internals.states.delete("--show-error"),r},A=function(r){let t=this.constructor,s={},c=t.validators,p=[],z=c.some(b=>b.isValid instanceof Promise);a(this,k,"f")||(l(this,M,new Promise(b=>{l(this,V,b,"f")}),"f"),l(this,k,!0,"f")),a(this,h,"f")&&(a(this,h,"f").abort(),l(this,u,a(this,h,"f"),"f"));let _=new AbortController;l(this,h,_,"f");let C,W=!1;c.length&&(c.forEach(b=>{let T=b.key||"customError",w=b.isValid(this,r,_.signal);w instanceof Promise?(p.push(w),w.then(X=>{X!=null&&(s[T]=!X,C=a(this,e,"m",S).call(this,b,r),a(this,e,"m",P).call(this,s,C))})):(s[T]=!w,this.validity[T]!==!w&&(W=!0),!w&&!C&&(C=a(this,e,"m",S).call(this,b,r)))}),Promise.allSettled(p).then(()=>{var b;_!=null&&_.signal.aborted||(l(this,k,!1,"f"),(b=a(this,V,"f"))===null||b===void 0||b.call(this))}),(W||!z)&&a(this,e,"m",P).call(this,s,C))},P=function(r,t){if(this.validationTarget)this.internals.setValidity(r,t,this.validationTarget),l(this,m,!1,"f");else{if(this.internals.setValidity(r,t),this.internals.validity.valid)return;l(this,m,!0,"f")}},S=function(r,t){if(this.validityCallback){let s=this.validityCallback(r.key||"customError");if(s)return s}return r.message instanceof Function?r.message(this,t):r.message},q}import{css as U}from"lit";var L=U`
   *,
   :before,
   :after {
@@ -271,7 +271,7 @@ var v=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var n=(i,o,a,r
   svg {
     pointer-events: none;
   }
-`,Y=b`*, :before, :after {
+`,or=U`*, :before, :after {
             --w-rotate: 0;
             --w-rotate-x: 0;
             --w-rotate-y: 0;
@@ -2437,16 +2437,16 @@ var v=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var n=(i,o,a,r
                     display: none
                 }
             }
-        `;import{css as u}from"lit";var g=u`*,: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}.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}.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-border{border-color:var(--w-s-color-border)}.s-surface-sunken{background-color:var(--w-s-color-surface-sunken)}.-mx-16{margin-left:-1.6rem;margin-right:-1.6rem}.last-child\\:mb-0>:last-child{margin-bottom:0}.p-16{padding:1.6rem}.break-words{overflow-wrap:break-word}@media (min-width:480px){.sm\\:rounded-8{border-radius:8px}.sm\\:mx-0{margin-left:0;margin-right:0}}`;var t=class extends f{constructor(){super(...arguments);this.bleed=!1;this.bordered=!1;this.info=!1;this.neutral=!1}get _class(){return s(["group block relative break-words last-child:mb-0 p-16 rounded-8",this.bleed&&"-mx-16 sm:mx-0 rounded-l-0 rounded-r-0 sm:rounded-8",this.info&&"s-bg-info-subtle",this.neutral&&"s-surface-sunken",this.bordered&&"border-2 s-border s-bg"])}get _optOutRoleWithDefault(){var a;return this.role===""?x:(a=this.role)!=null?a:"region"}render(){return w`
-      <div role="${this._optOutRoleWithDefault}" class="${this._class}">
+        `;import{css as I}from"lit";var G=I`*,: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}.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}.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-border{border-color:var(--w-s-color-border)}.s-surface-sunken{background-color:var(--w-s-color-surface-sunken)}.-mx-16{margin-left:-1.6rem;margin-right:-1.6rem}.last-child\\:mb-0>:last-child{margin-bottom:0}.p-16{padding:1.6rem}.break-words{overflow-wrap:break-word}@media (min-width:480px){.sm\\:rounded-8{border-radius:8px}.sm\\:mx-0{margin-left:0;margin-right:0}}`;var g=class extends N(J){constructor(){super(...arguments);this.bleed=!1;this.bordered=!1;this.info=!1;this.neutral=!1;this.role="region"}connectedCallback(){super.connectedCallback(),this.internals.role=this.role}updated(n){super.updated(n),n.has("role")&&(this.internals.role=this.role)}get _class(){return Z(["group block relative break-words last-child:mb-0 p-16 rounded-8",this.bleed&&"-mx-16 sm:mx-0 rounded-l-0 rounded-r-0 sm:rounded-8",this.info&&"s-bg-info-subtle",this.neutral&&"s-surface-sunken",this.bordered&&"border-2 s-border s-bg"])}render(){return H`
+      <div class="${this._class}">
         <slot></slot>
       </div>
-    `}};t.styles=[p,g,m`
+    `}};g.styles=[L,G,D`
       :host {
         display: block;
       }
       ::slotted(:last-child) {
         margin-bottom: 0px !important;
       }
-    `],n([d({type:Boolean,reflect:!0})],t.prototype,"bleed",2),n([d({type:Boolean,reflect:!0})],t.prototype,"bordered",2),n([d({type:Boolean,reflect:!0})],t.prototype,"info",2),n([d({type:Boolean,reflect:!0})],t.prototype,"neutral",2),n([d({type:String,reflect:!0})],t.prototype,"role",2);customElements.get("w-box")||customElements.define("w-box",t);export{t as WarpBox};
+    `],f([F({type:Boolean,reflect:!0})],g.prototype,"bleed",2),f([F({type:Boolean,reflect:!0})],g.prototype,"bordered",2),f([F({type:Boolean,reflect:!0})],g.prototype,"info",2),f([F({type:Boolean,reflect:!0})],g.prototype,"neutral",2),f([F({type:String,reflect:!0,useDefault:!0})],g.prototype,"role",2);customElements.get("w-box")||customElements.define("w-box",g);export{g as WarpBox};
 //# sourceMappingURL=box.js.map