@pine-ds/core 5.0.0-mercury.0 → 5.0.0

package/components/pds-radio.js

@@ -1,78 +1 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { a as assignDescription, P as PdsLabel, m as messageId } from './pds-label.js';
-
-const pdsRadioCss = ".sc-pds-radio-h{--border-interactive-default:var(--pine-border-width-thin) solid var( --pine-color-grey-400);--border-radius:50%;--box-shadow-focus:0 0 0 2px var(--color-focus);--box-shadow-focus-error:0 0 0 2px var(--color-invalid-focus);--color:var(--pine-color-charcoal-200);--color-background:var(--pine-color-white);--color-background-hover:var(--pine-color-grey-100);--color-background-disabled:var(--pine-color-grey-200);--color-border-hover:var(--pine-color-grey-500);--color-border-disabled:var(--pine-color-grey-300);--color-checked:var(--pine-color-charcoal-500);--color-disabled:var(---pine-color-grey-500);--color-focus:var(--pine-color-blue-200);--color-invalid:var(--pine-color-red-300);--color-invalid-focus:var(--pine-color-red-200);--font-size:var(--pine-font-size-087);--sizing-check-size:6px;--sizing-input-size:16px;--sizing-margin-block-start:6px;-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap}.is-invalid.sc-pds-radio-h input.sc-pds-radio{border-color:var(--color-invalid)}.is-invalid.sc-pds-radio-h input.sc-pds-radio:checked{background:var(--color-invalid)}.is-invalid.sc-pds-radio-h input.sc-pds-radio:focus-visible{-webkit-box-shadow:var(--box-shadow-focus-error);box-shadow:var(--box-shadow-focus-error);outline:none}.is-invalid.sc-pds-radio-h label.sc-pds-radio,.is-invalid.sc-pds-radio-h .pds-radio__message--error.sc-pds-radio{color:var(--color-invalid)}input.sc-pds-radio{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:var(--border-interactive-default);border-radius:var(--border-radius);height:var(--sizing-input-size);margin:0;position:relative;width:var(--sizing-input-size)}input.sc-pds-radio:hover{background:var(--color-background-hover);border-color:var(--color-border-hover)}input.sc-pds-radio:checked{background:var(--color-checked);border-color:var(--color-checked)}input.sc-pds-radio:checked::after{background:var(--color-background);border-radius:50%;content:\"\";display:block;height:var(--sizing-check-size);left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);width:var(--sizing-check-size)}input.sc-pds-radio:disabled{background:var(--color-background-disabled);border-color:var(--color-border-disabled);cursor:not-allowed}input.sc-pds-radio:disabled:checked{background:var(--color-disabled);border-color:var(--color-border-disabled)}input.sc-pds-radio:disabled:checked::after{border-color:var(--color-border-disabled)}input.sc-pds-radio:disabled+label.sc-pds-radio{color:var(--color-border-hover);cursor:not-allowed}input.sc-pds-radio:disabled~.pds-radio__message.sc-pds-radio{color:var(--color-disabled)}input.sc-pds-radio:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}label.sc-pds-radio{-webkit-margin-start:10px;margin-inline-start:10px}.pds-radio__message.sc-pds-radio{color:var(--color);font-size:var(--font-size);-webkit-margin-before:var(--sizing-margin-block-start);margin-block-start:var(--sizing-margin-block-start);-webkit-margin-start:26px;margin-inline-start:26px;width:100%}";
-const PdsRadioStyle0 = pdsRadioCss;
-
-const PdsRadio$1 = /*@__PURE__*/ proxyCustomElement(class PdsRadio extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.pdsRadioChange = createEvent(this, "pdsRadioChange", 7);
-        this.handleRadioChange = (e) => {
-            if (this.disabled) {
-                return;
-            }
-            const target = e.target;
-            const isChecked = target.checked;
-            this.pdsRadioChange.emit(isChecked);
-        };
-        this.checked = false;
-        this.disabled = false;
-        this.errorMessage = undefined;
-        this.invalid = false;
-        this.componentId = undefined;
-        this.label = undefined;
-        this.helperMessage = undefined;
-        this.name = undefined;
-        this.required = false;
-        this.value = undefined;
-    }
-    classNames() {
-        const classNames = [];
-        if (this.invalid) {
-            classNames.push('is-invalid');
-        }
-        if (this.disabled) {
-            classNames.push('is-disabled');
-        }
-        return classNames.join('  ');
-    }
-    render() {
-        return (h(Host, { key: 'e23a00c8941dfce9d9d6a99a554654b7bd2259c4', class: this.classNames() }, h("input", { key: '571d2e6656cd94573253f54028b1926a3c5e1499', "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, type: "radio", id: this.componentId, name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onChange: this.handleRadioChange }), h(PdsLabel, { key: '42c2c95ed36e194f43367f2c28ed81660d82b096', htmlFor: this.componentId, text: this.label }), this.helperMessage &&
-            h("div", { key: '32be02934f23b2832c6c1d0e56c3dceda8c9ccc9', class: 'pds-radio__message', id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
-            h("div", { key: 'c670effc6a381f872800c8dd58095c2dce49016e', class: `pds-radio__message pds-radio__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, this.errorMessage)));
-    }
-    static get style() { return PdsRadioStyle0; }
-}, [2, "pds-radio", {
-        "checked": [4],
-        "disabled": [4],
-        "errorMessage": [1, "error-message"],
-        "invalid": [4],
-        "componentId": [1, "component-id"],
-        "label": [1],
-        "helperMessage": [1, "helper-message"],
-        "name": [1],
-        "required": [4],
-        "value": [1]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["pds-radio"];
-    components.forEach(tagName => { switch (tagName) {
-        case "pds-radio":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, PdsRadio$1);
-            }
-            break;
-    } });
-}
-
-const PdsRadio = PdsRadio$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { PdsRadio, defineCustomElement };
-
-//# sourceMappingURL=pds-radio.js.map
+import{proxyCustomElement as i,HTMLElement as e,createEvent as r,h as a,Host as o,transformTag as s}from"@stencil/core/internal/client";import{H as d}from"./attributes.js";import{e as n,a as t,m as l}from"./form.js";import{h as p}from"./index2.js";import{d as c}from"./pds-icon2.js";const h=i(class extends e{constructor(i){super(),!1!==i&&this.__registerHost(),this.pdsRadioChange=r(this,"pdsRadioChange",7),this._type="radio",this.hostKeeper=new d,this._hasImage=!1,this.checked=!1,this.disabled=!1,this.hasBorder=!1,this.invalid=!1,this.required=!1,this.variant="default",this.handleRadioChange=i=>{if(this.disabled)return;const e=i.target.checked;this.el.closest("pds-radio-group")||this.pdsRadioChange.emit(e)}}hasImageSlot(){return!!this.el.querySelector('[slot="image"]')}hasImage(){return this._hasImage}isPill(){return"pill"===this.variant}classNames(){const i=[];return this.invalid&&i.push("is-invalid"),this.disabled&&i.push("is-disabled"),this.hasBorder&&!this.isPill()&&i.push("has-border"),this.isPill()&&i.push("pds-radio--pill"),this.hasImage()&&!this.isPill()&&i.push("has-image"),i.join(" ")}componentWillLoad(){this._hasImage=this.hasImageSlot()}connectedCallback(){this.hostKeeper.connect(this.el),n(this.el,(()=>this._type))}disconnectedCallback(){this.hostKeeper.disconnect()}componentDidRender(){const i=this.el.querySelector(".pds-radio__image-container:not([hidden])");Array.from(this.el.querySelectorAll(".pds-radio__image-container[hidden], .pds-radio__content-wrapper[hidden], label[hidden], .pds-radio__message[hidden]")).forEach((e=>{const r=e.querySelector('[slot="image"]');null!==r&&null!==i&&i.appendChild(r),e.remove()}))}render(){const i=()=>[a("label",{htmlFor:this.componentId,key:this.componentId+"-label"},a("input",{key:"245464683e5944a26a94509f487deb10ed4e8f05","aria-describedby":t(this.componentId,this.invalid,this.helperMessage,this.errorMessage),"aria-invalid":this.invalid?"true":void 0,type:"radio",id:this.componentId,name:this.name,value:this.value,checked:this.checked,required:this.required,disabled:this.disabled,onChange:this.handleRadioChange,class:this.hasImage()||this.isPill()?"visually-hidden":""}),a("span",{key:"4d21fa0984501adc8ffc5fd7328b5dbd9cdfb98a",class:this.hideLabel&&!this.isPill()?"visually-hidden":""},this.label)),this.helperMessage&&a("div",{key:this.componentId+"-helper",class:"pds-radio__message",id:l(this.componentId,"helper")},this.helperMessage),this.errorMessage&&a("div",{key:this.componentId+"-error",class:"pds-radio__message pds-radio__message--error",id:l(this.componentId,"error"),"aria-live":"assertive"},a("pds-icon",{key:"ed7bc193c25165d38a227887acda90675fe318f2","aria-hidden":"true",icon:p,size:"small"}),this.errorMessage)],e=this.classNames();this.hostKeeper.record(e);const r=this.hasImage()&&!this.isPill();return a(o,{key:"b8d059bab47b36b7e7b89172e54c57b8df4ce9c7",class:e},r&&a("div",{key:"bea622fc1afdaacd91f2e89aa7529e54c22c88da",class:"pds-radio__image-container",part:"image-container"},a("slot",{key:"3eca85a2457b25fa51509b28543ba897e3d99ab6",name:"image",onSlotchange:()=>this._hasImage=this.hasImageSlot()})),r?a("div",{class:"pds-radio__content-wrapper"},i()):i())}get el(){return this}static get style(){return'.sc-pds-radio-h{display:inline-block}[aria-disabled=true].sc-pds-radio-h label.sc-pds-radio{color:var(--pine-color-text-label-disabled)}[aria-readonly=true].sc-pds-radio-h label.sc-pds-radio{color:var(--pine-color-text-label-readonly)}label.sc-pds-radio{color:var(--pine-color-text-label);font:var(--pine-typography-body-medium);letter-spacing:var(--pine-letter-spacing)}.sc-pds-radio-h{--sizing-check-size:6px;--sizing-input-size:var(--pine-dimension-sm);--sizing-margin-block-start:6px;-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap;position:relative}.is-invalid.sc-pds-radio-h .pds-radio__message--error.sc-pds-radio{color:var(--pine-color-text-message-danger)}.has-border.sc-pds-radio-h{-ms-flex-align:start;align-items:flex-start;border:var(--pine-border);border-radius:var(--pine-dimension-125);-webkit-column-gap:var(--pine-dimension-xs);-moz-column-gap:var(--pine-dimension-xs);column-gap:var(--pine-dimension-xs);display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column;padding:var(--pine-dimension-md)}@media (max-width: 767px){.has-border.sc-pds-radio-h{-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex:1 1 100%;flex:1 1 100%;max-width:100%;min-width:0}}.has-border.sc-pds-radio-h:hover{border:var(--pine-border-hover)}.has-border.sc-pds-radio-h:has(input:checked){-webkit-box-shadow:0 0 0 2px var(--pine-color-primary-hover);box-shadow:0 0 0 2px var(--pine-color-primary-hover)}.has-border.sc-pds-radio-h label.sc-pds-radio{color:var(--pine-color-text);font-weight:var(--pine-font-weight-semi-bold)}.has-border.sc-pds-radio-h label.sc-pds-radio::after{content:"";cursor:pointer;height:100%;left:0;position:absolute;top:0;width:100%;z-index:1}.has-border.sc-pds-radio-h:has(input:disabled){background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);cursor:not-allowed}.has-border.sc-pds-radio-h:has(input:disabled) label.sc-pds-radio{color:var(--pine-color-text-label-disabled);cursor:not-allowed}.has-border.sc-pds-radio-h:has(input:disabled) label.sc-pds-radio::after{cursor:not-allowed}.has-border.is-invalid.sc-pds-radio-h .pds-radio__message--error.sc-pds-radio{color:var(--pine-color-text-message-danger)}input.sc-pds-radio{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-border-radius-full);-ms-flex:none;flex:none;height:var(--sizing-input-size);margin:0;-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025);position:relative;width:var(--sizing-input-size)}input.visually-hidden.sc-pds-radio{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}input.sc-pds-radio:hover{background:var(--pine-color-background-container-hover);border:var(--pine-border-hover)}input.sc-pds-radio:checked{background:var(--pine-color-accent);border-color:var(--pine-color-accent)}input.sc-pds-radio:checked:hover{background:var(--pine-color-accent-hover);border-color:var(--pine-color-accent-hover)}input.sc-pds-radio:checked::after{background:var(--pine-color-text-primary);border-radius:var(--pine-border-radius-full);content:"";display:block;height:var(--sizing-check-size);left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);width:var(--sizing-check-size)}input.sc-pds-radio:disabled{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);cursor:not-allowed}input.sc-pds-radio:disabled:checked{background-color:var(--pine-color-accent-disabled);border-color:var(--pine-color-border-disabled)}input.sc-pds-radio:disabled:checked::after{border-color:var(--pine-color-border-disabled)}input.sc-pds-radio:focus-visible{outline:var(--pine-outline-focus)}label.sc-pds-radio{display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs)}label.sc-pds-radio:has(input:disabled){color:var(--pine-color-text-label-disabled);cursor:not-allowed}.sc-pds-radio-h:has(input:disabled) .pds-radio__message.sc-pds-radio{color:var(--pine-color-text-label-disabled)}.visually-hidden.sc-pds-radio{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.pds-radio__message.sc-pds-radio{color:var(--pine-color-text-message);-ms-flex-preferred-size:100%;flex-basis:100%;font:var(--pine-typography-body);-webkit-margin-start:var(--pine-dimension-md);margin-inline-start:var(--pine-dimension-md);width:100%}.pds-radio__message--error.sc-pds-radio{display:-ms-flexbox;display:flex;gap:var(--pine-dimension-2xs)}.pds-radio__message--error.sc-pds-radio pds-icon.sc-pds-radio{-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025)}.has-image.sc-pds-radio-h{-ms-flex-align:center;align-items:center;border:var(--pine-border);border-radius:var(--pine-dimension-125);-webkit-column-gap:var(--pine-dimension-xs);-moz-column-gap:var(--pine-dimension-xs);column-gap:var(--pine-dimension-xs);display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:row;flex-direction:row;padding:var(--pine-dimension-md)}@media (max-width: 767px){.has-image.sc-pds-radio-h{-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex:1 1 100%;flex:1 1 100%;max-width:100%;min-width:0}}.has-image.sc-pds-radio-h:hover{border:var(--pine-border-hover)}.has-image.sc-pds-radio-h:has(input:checked){-webkit-box-shadow:0 0 0 var(--pine-border-width-thick) var(--pine-color-primary-hover);box-shadow:0 0 0 var(--pine-border-width-thick) var(--pine-color-primary-hover)}.has-image.sc-pds-radio-h:has(input:focus-visible){outline:var(--pine-outline-focus);outline-offset:calc(var(--pine-border-width-thick) + var(--pine-border-width))}.has-image.sc-pds-radio-h label.sc-pds-radio{color:var(--pine-color-text);display:-ms-flexbox;display:flex;font-weight:var(--pine-font-weight-semi-bold);gap:var(--pine-dimension-xs)}.has-image.sc-pds-radio-h label.sc-pds-radio::after{content:"";cursor:pointer;height:100%;left:0;position:absolute;top:0;width:100%;z-index:1}.has-image.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio{-ms-flex-align:center;align-items:center;align-self:center;border:var(--pine-border);border-radius:var(--pine-border-radius-full);cursor:pointer;display:-ms-flexbox;display:flex;-ms-flex:none;flex:none;grid-area:image;-ms-flex-pack:center;justify-content:center;overflow:hidden;position:relative;-webkit-transition:all var(--pine-motion-duration-base) ease;transition:all var(--pine-motion-duration-base) ease}.has-image.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio:hover{border-color:var(--pine-color-border-hover)}.has-image.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio .pds-radio__image.sc-pds-radio{height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.has-image.sc-pds-radio-h .pds-radio__content-wrapper.sc-pds-radio{-ms-flex:1;flex:1;min-width:0;overflow-wrap:anywhere}.has-image.sc-pds-radio-h .pds-radio__message.sc-pds-radio{grid-area:message;-webkit-margin-before:0;margin-block-start:0;-webkit-margin-start:0;margin-inline-start:0}.has-image.is-disabled.sc-pds-radio-h{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);cursor:not-allowed}.has-image.is-disabled.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio{border-color:var(--pine-color-border-disabled);cursor:not-allowed;opacity:0.5}.has-image.is-disabled.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio:hover{border-color:var(--pine-color-border-disabled)}.has-image.is-disabled.sc-pds-radio-h label.sc-pds-radio{color:var(--pine-color-text-label-disabled);cursor:not-allowed}.has-image.is-disabled.sc-pds-radio-h label.sc-pds-radio::after{cursor:not-allowed}.has-image.is-disabled.sc-pds-radio-h .pds-radio__message.sc-pds-radio{color:var(--pine-color-text-label-disabled)}.has-image.is-invalid.sc-pds-radio-h .pds-radio__message--error.sc-pds-radio{color:var(--pine-color-text-message-danger)}.pds-radio--pill.sc-pds-radio-h label.sc-pds-radio{-ms-flex-align:center;align-items:center;background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-border-radius-full);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--pine-color-text-active);cursor:pointer;font:var(--pine-typography-body);min-block-size:var(--pine-dimension-xl);padding:0 var(--pine-dimension-sm);-webkit-transition:border-color var(--pine-motion-duration-fast) ease;transition:border-color var(--pine-motion-duration-fast) ease}.pds-radio--pill.sc-pds-radio-h label.sc-pds-radio span.sc-pds-radio{min-width:0;overflow-wrap:anywhere}.pds-radio--pill.sc-pds-radio-h label.sc-pds-radio:hover{border-color:var(--pine-color-text)}.pds-radio--pill.sc-pds-radio-h label.sc-pds-radio:has(input:checked){border-color:var(--pine-color-text-active);-webkit-box-shadow:inset 0 0 0 var(--pine-border-width) var(--pine-color-text-active);box-shadow:inset 0 0 0 var(--pine-border-width) var(--pine-color-text-active)}.pds-radio--pill.sc-pds-radio-h label.sc-pds-radio:has(input:focus-visible){outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width-thick)}.pds-radio--pill.sc-pds-radio-h label.sc-pds-radio:has(input:disabled){background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);color:var(--pine-color-text-label-disabled);cursor:not-allowed}.pds-radio--pill.sc-pds-radio-h label.sc-pds-radio:has(input:disabled:checked){border-color:var(--pine-color-text-label-disabled);-webkit-box-shadow:inset 0 0 0 var(--pine-border-width) var(--pine-color-text-label-disabled);box-shadow:inset 0 0 0 var(--pine-border-width) var(--pine-color-text-label-disabled)}@media (forced-colors: active){.pds-radio--pill.sc-pds-radio-h label.sc-pds-radio:has(input:disabled){border-color:GrayText}.pds-radio--pill.sc-pds-radio-h label.sc-pds-radio:has(input:checked){border-color:Highlight;border-width:var(--pine-border-width-thick);padding-inline:calc(var(--pine-dimension-sm) - (var(--pine-border-width-thick) - var(--pine-border-width)))}.pds-radio--pill.sc-pds-radio-h label.sc-pds-radio:has(input:disabled:checked){border-color:GrayText;border-width:var(--pine-border-width-thick);padding-inline:calc(var(--pine-dimension-sm) - (var(--pine-border-width-thick) - var(--pine-border-width)))}}.pds-radio--pill.sc-pds-radio-h .pds-radio__message.sc-pds-radio{-webkit-margin-start:0;margin-inline-start:0}'}},[262,"pds-radio",{checked:[4],componentId:[1,"component-id"],disabled:[4],errorMessage:[1,"error-message"],helperMessage:[1,"helper-message"],hasBorder:[4,"has-border"],invalid:[4],label:[1],hideLabel:[4,"hide-label"],name:[1],required:[4],value:[1],variant:[1],_hasImage:[32]}]),b=h,m=function(){"undefined"!=typeof customElements&&["pds-radio","pds-icon"].forEach((i=>{switch(i){case"pds-radio":customElements.get(s(i))||customElements.define(s(i),h);break;case"pds-icon":customElements.get(s(i))||c()}}))};export{b as PdsRadio,m as defineCustomElement}

package/components/pds-row.js

@@ -1,72 +1 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-
-const pdsRowCss = ":host{--border-default:var(--pine-border-width-thin) solid var(--pine-color-grey-300);--row-gap-y:calc(var(--pine-spacing-250) / 2);--row-gap-x:10px;display:block;-webkit-margin-after:calc(var(--row-gap-y) * -1);margin-block-end:calc(var(--row-gap-y) * -1);-webkit-margin-before:calc(var(--row-gap-y) * -1);margin-block-start:calc(var(--row-gap-y) * -1);-webkit-margin-end:calc(var(--row-gap-x) * -0.5);margin-inline-end:calc(var(--row-gap-x) * -0.5);-webkit-margin-start:calc(var(--row-gap-x) * -0.5);margin-inline-start:calc(var(--row-gap-x) * -0.5)}.pds-row{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-margin-after:calc(var(--row-gap-y) * -1);margin-block-end:calc(var(--row-gap-y) * -1);-webkit-margin-before:calc(var(--row-gap-y) * -1);margin-block-start:calc(var(--row-gap-y) * -1);-webkit-margin-end:calc(var(--row-gap-x) * -1);margin-inline-end:calc(var(--row-gap-x) * -1);-webkit-margin-start:calc(var(--row-gap-x) * -1);margin-inline-start:calc(var(--row-gap-x) * -1)}.pds-row>*{-webkit-padding-after:calc(var(--row-gap-y));padding-block-end:calc(var(--row-gap-y));-webkit-padding-before:calc(var(--row-gap-y));padding-block-start:calc(var(--row-gap-y));-webkit-padding-end:calc(var(--row-gap-x));padding-inline-end:calc(var(--row-gap-x));-webkit-padding-start:calc(var(--row-gap-x));padding-inline-start:calc(var(--row-gap-x))}.pds-row--no-wrap{-ms-flex-wrap:nowrap;flex-wrap:nowrap}.pds-row--border{border:var(--border-default)}.pds-justify-content-start{-ms-flex-pack:start;justify-content:start}.pds-justify-content-center{-ms-flex-pack:center;justify-content:center}.pds-justify-content-end{-ms-flex-pack:end;justify-content:end}.pds-justify-content-space-between{-ms-flex-pack:justify;justify-content:space-between}.pds-justify-content-space-around{-ms-flex-pack:distribute;justify-content:space-around}.pds-justify-content-space-evenly{-ms-flex-pack:space-evenly;justify-content:space-evenly}.pds-align-items-start{-ms-flex-align:start;align-items:start}.pds-align-items-center{-ms-flex-align:center;align-items:center}.pds-align-items-end{-ms-flex-align:end;align-items:end}.pds-align-items-stretch{-ms-flex-align:stretch;align-items:stretch}.pds-align-items-baseline{-ms-flex-align:baseline;align-items:baseline}";
-const PdsRowStyle0 = pdsRowCss;
-
-const PdsRow$1 = /*@__PURE__*/ proxyCustomElement(class PdsRow extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.colGapMap = {
-            none: '0',
-            xxs: '.25rem',
-            xs: '.5rem',
-            sm: '1rem',
-            md: '1.5rem',
-            lg: '2.25rem',
-            xl: '3rem',
-            xxl: '4rem',
-        };
-        this.alignItems = undefined;
-        this.border = false;
-        this.colGap = undefined;
-        this.componentId = undefined;
-        this.justifyContent = undefined;
-        this.minHeight = undefined;
-        this.noWrap = false;
-    }
-    render() {
-        const rowClasses = `
-    ${this.alignItems !== undefined && this.alignItems.trim() !== '' ? `pds-align-items-${this.alignItems}` : ''}
-    ${this.border ? 'pds-row--border' : ''}
-    ${this.justifyContent !== undefined && this.justifyContent.trim() !== '' ? `pds-justify-content-${this.justifyContent}` : ''}
-    ${this.noWrap ? 'pds-row--no-wrap' : ''}
-  `;
-        const rowInlineStyles = Object.assign(Object.assign({}, (this.colGap && {
-            '--row-gap-x': this.colGap !== undefined && this.colGap.trim() !== '' ? this.colGapMap[this.colGap] : '',
-            '--row-gap-y': this.colGap !== undefined && this.colGap.trim() !== '' ? this.colGapMap[this.colGap] : '',
-        })), (this.minHeight && {
-            'min-height': this.minHeight,
-        }));
-        return h(Host, { key: 'b764491968a34ae8f1e3e329111cb4ba0887bdef', class: `pds-row ${rowClasses}`, style: rowInlineStyles });
-    }
-    static get style() { return PdsRowStyle0; }
-}, [0, "pds-row", {
-        "alignItems": [1, "align-items"],
-        "border": [4],
-        "colGap": [1, "col-gap"],
-        "componentId": [1, "component-id"],
-        "justifyContent": [1, "justify-content"],
-        "minHeight": [1, "min-height"],
-        "noWrap": [4, "no-wrap"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["pds-row"];
-    components.forEach(tagName => { switch (tagName) {
-        case "pds-row":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, PdsRow$1);
-            }
-            break;
-    } });
-}
-
-const PdsRow = PdsRow$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { PdsRow, defineCustomElement };
-
-//# sourceMappingURL=pds-row.js.map
+import{proxyCustomElement as e,HTMLElement as n,h as i,Host as a,transformTag as t}from"@stencil/core/internal/client";import{H as s}from"./attributes.js";const r=e(class extends n{constructor(e){super(),!1!==e&&this.__registerHost(),this.hostKeeper=new s,this.border=!1,this.noWrap=!1,this.colGapMap={none:"0",xxs:".25rem",xs:".5rem",sm:"1rem",md:"1.5rem",lg:"2.25rem",xl:"3rem",xxl:"4rem","025":"var(--pine-dimension-025)","050":"var(--pine-dimension-050)",100:"var(--pine-dimension-100)",125:"var(--pine-dimension-125)",150:"var(--pine-dimension-150)",200:"var(--pine-dimension-200)",250:"var(--pine-dimension-250)",300:"var(--pine-dimension-300)",350:"var(--pine-dimension-350)",400:"var(--pine-dimension-400)",450:"var(--pine-dimension-450)",500:"var(--pine-dimension-500)",550:"var(--pine-dimension-550)",600:"var(--pine-dimension-600)",650:"var(--pine-dimension-650)",700:"var(--pine-dimension-700)",750:"var(--pine-dimension-750)",800:"var(--pine-dimension-800)"}}connectedCallback(){this.hostKeeper.connect(this.el)}disconnectedCallback(){this.hostKeeper.disconnect()}render(){const e=`\n    ${null!=this.alignItems&&""!==this.alignItems.trim()?"pds-align-items-"+this.alignItems:""}\n    ${this.border?"pds-row--border":""}\n    ${null!=this.justifyContent&&""!==this.justifyContent.trim()?"pds-justify-content-"+this.justifyContent:""}\n    ${this.noWrap?"pds-row--no-wrap":""}\n  `,n=Object.assign(Object.assign(Object.assign(Object.assign({},this.colGap&&{"--row-gap-x":null!=this.colGap&&""!==this.colGap.trim()?this.colGapMap[this.colGap]:"","--row-gap-y":null!=this.colGap&&""!==this.colGap.trim()?this.colGapMap[this.colGap]:""}),this.colGapBlock&&{"--row-gap-y":null!=this.colGapBlock&&""!==this.colGapBlock.trim()?this.colGapMap[this.colGapBlock]:""}),this.colGapInline&&{"--row-gap-x":null!=this.colGapInline&&""!==this.colGapInline.trim()?this.colGapMap[this.colGapInline]:""}),this.minHeight&&{"min-height":this.minHeight});return this.hostKeeper.record("pds-row "+e,n),i(a,{key:"589ee3251a4ee1d7824c8e2fa3e214de5466c3db",class:"pds-row "+e,style:n})}get el(){return this}static get style(){return":host{--row-gap-y:var(--pine-dimension-125);--row-gap-x:var(--pine-dimension-125);display:block;-webkit-margin-after:calc(var(--row-gap-y) * -1);margin-block-end:calc(var(--row-gap-y) * -1);-webkit-margin-before:calc(var(--row-gap-y) * -1);margin-block-start:calc(var(--row-gap-y) * -1);-webkit-margin-end:calc(var(--row-gap-x) * -0.5);margin-inline-end:calc(var(--row-gap-x) * -0.5);-webkit-margin-start:calc(var(--row-gap-x) * -0.5);margin-inline-start:calc(var(--row-gap-x) * -0.5)}.pds-row{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-margin-after:calc(var(--row-gap-y) * -1);margin-block-end:calc(var(--row-gap-y) * -1);-webkit-margin-before:calc(var(--row-gap-y) * -1);margin-block-start:calc(var(--row-gap-y) * -1);-webkit-margin-end:calc(var(--row-gap-x) * -1);margin-inline-end:calc(var(--row-gap-x) * -1);-webkit-margin-start:calc(var(--row-gap-x) * -1);margin-inline-start:calc(var(--row-gap-x) * -1)}@layer layout{.pds-row>*{-webkit-padding-after:calc(var(--row-gap-y));padding-block-end:calc(var(--row-gap-y));-webkit-padding-before:calc(var(--row-gap-y));padding-block-start:calc(var(--row-gap-y));-webkit-padding-end:calc(var(--row-gap-x));padding-inline-end:calc(var(--row-gap-x));-webkit-padding-start:calc(var(--row-gap-x));padding-inline-start:calc(var(--row-gap-x))}}.pds-row--no-wrap{-ms-flex-wrap:nowrap;flex-wrap:nowrap}.pds-row--border{border:var(--pine-border)}.pds-justify-content-start{-ms-flex-pack:start;justify-content:start}.pds-justify-content-center{-ms-flex-pack:center;justify-content:center}.pds-justify-content-end{-ms-flex-pack:end;justify-content:end}.pds-justify-content-space-between{-ms-flex-pack:justify;justify-content:space-between}.pds-justify-content-space-around{-ms-flex-pack:distribute;justify-content:space-around}.pds-justify-content-space-evenly{-ms-flex-pack:space-evenly;justify-content:space-evenly}.pds-align-items-start{-ms-flex-align:start;align-items:start}.pds-align-items-center{-ms-flex-align:center;align-items:center}.pds-align-items-end{-ms-flex-align:end;align-items:end}.pds-align-items-stretch{-ms-flex-align:stretch;align-items:stretch}.pds-align-items-baseline{-ms-flex-align:baseline;align-items:baseline}"}},[0,"pds-row",{alignItems:[1,"align-items"],border:[4],colGap:[1,"col-gap"],colGapBlock:[1,"col-gap-block"],colGapInline:[1,"col-gap-inline"],componentId:[1,"component-id"],justifyContent:[1,"justify-content"],minHeight:[1,"min-height"],noWrap:[4,"no-wrap"]}]),o=r,c=function(){"undefined"!=typeof customElements&&["pds-row"].forEach((e=>{"pds-row"===e&&(customElements.get(t(e))||customElements.define(t(e),r))}))};export{o as PdsRow,c as defineCustomElement}

package/components/pds-select.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface PdsSelect extends Components.PdsSelect, HTMLElement {}
+export const PdsSelect: {
+    prototype: PdsSelect;
+    new (): PdsSelect;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/pds-select.js

@@ -0,0 +1 @@
+import{proxyCustomElement as e,HTMLElement as s,createEvent as i,h as t,Host as r,transformTag as a}from"@stencil/core/internal/client";import{H as o}from"./attributes.js";import{e as n,m as l,i as d,a as c}from"./form.js";import{h,g as p}from"./index2.js";import{d as b}from"./pds-icon2.js";const m=e=>e.map((e=>e.tagName+("OPTGROUP"===e.tagName?`(${m(Array.from(e.children))})`:""))).join(),u=(e,s)=>{Array.from(e.attributes).forEach((({name:i})=>{s.hasAttribute(i)||e.removeAttribute(i)})),Array.from(s.attributes).forEach((({name:s,value:i})=>{e.getAttribute(s)!==i&&e.setAttribute(s,i)})),"OPTGROUP"===s.tagName?Array.from(s.children).forEach(((s,i)=>u(e.children[i],s))):e.textContent!==s.textContent&&(e.textContent=s.textContent)},g=e(class extends s{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.pdsSelectChange=i(this,"pdsSelectChange",7),this.pdsBlur=i(this,"pdsBlur",7),this.pdsFocus=i(this,"pdsFocus",7),this.pdsKeyDown=i(this,"pdsKeyDown",7),this._type="select-one",this.optionObserver=null,this.optionSyncFrame=null,this.hasHadOptions=!1,this.hostKeeper=new o,this.disabled=!1,this.multiple=!1,this.required=!1,this.touchesOption=({target:e})=>{const s=e.nodeType===Node.ELEMENT_NODE?e:e.parentElement;return e!==this.el&&null!=(null==s?void 0:s.closest("option, optgroup"))},this.onSelectUpdate=e=>{const s=Array.from(e.target.options).filter((e=>e.selected)).map((e=>e.value));this.value=1!==s.length||this.multiple?s:s[0],this.pdsSelectChange.emit(e)},this.onBlur=e=>{this.pdsBlur.emit(e)},this.onFocus=e=>{this.pdsFocus.emit(e)},this.onKeyDown=e=>{this.pdsKeyDown.emit(e)},this.handleSlotChange=()=>{var e;const s=null===(e=this.slotContainer)||void 0===e?void 0:e.querySelector("slot");if(null==s||void 0===this.selectEl)return;const i=s.assignedElements({flatten:!0}).filter((e=>["OPTION","OPTGROUP"].includes(e.tagName))).map((e=>e.cloneNode(!0))),t=Array.from(this.selectEl.children),r=this.hasHadOptions;i.length>0&&(this.hasHadOptions=!0);const a=e=>e.map((e=>e.outerHTML)).join("");a(i)!==a(t)&&(m(i)===m(t)?i.forEach(((e,s)=>u(t[s],e))):(this.selectEl.innerHTML="",i.forEach((e=>this.selectEl.appendChild(e)))),this.updateSelectedOption(),r&&this.showNoSelectionWithoutMatch(),this.updateFormValue())}}valueChanged(){this.updateSelectedOption(),this.updateFormValue()}multipleChanged(){this.updateType()}updateType(){this._type=this.multiple?"select-multiple":"select-one"}connectedCallback(){this.hostKeeper.connect(this.el),this.el.attachInternals&&!this.internals&&(this.internals=this.el.attachInternals()),n(this.el,(()=>this._type)),void 0!==this.selectEl&&(this.startOptionSync(),this.scheduleOptionSync())}disconnectedCallback(){this.hostKeeper.disconnect(),this.stopOptionSync()}componentWillLoad(){this.updateType(),this.updateSelectedOption()}componentDidLoad(){this.updateFormValue(),this.startOptionSync(),this.scheduleOptionSync()}startOptionSync(){null===this.optionObserver&&"undefined"!=typeof MutationObserver&&this.el.isConnected&&(this.optionObserver=new MutationObserver((e=>{e.some(this.touchesOption)&&this.scheduleOptionSync()})),this.optionObserver.observe(this.el,{childList:!0,subtree:!0,attributes:!0,characterData:!0}))}scheduleOptionSync(){null===this.optionSyncFrame&&(this.optionSyncFrame=requestAnimationFrame((()=>{this.optionSyncFrame=null,this.handleSlotChange()})))}stopOptionSync(){var e;null===(e=this.optionObserver)||void 0===e||e.disconnect(),this.optionObserver=null,null!==this.optionSyncFrame&&(cancelAnimationFrame(this.optionSyncFrame),this.optionSyncFrame=null)}updateSelectedOption(){this.selectEl&&Array.from(this.selectEl.options).map((e=>{e.selected=Array.isArray(this.value)?this.value.includes(e.value):this.value===e.value}))}showNoSelectionWithoutMatch(){var e;const s=[].concat(null!==(e=this.value)&&void 0!==e?e:[]).filter((e=>""!==e)),i=Array.from(this.selectEl.options);s.length>0&&!i.some((e=>s.includes(e.value)))&&(this.selectEl.selectedIndex=-1)}getHelperMessage(){return this.helperMessage&&t("p",{class:"pds-select__helper-message",id:l(this.componentId,"helper")},this.helperMessage)}getErrorMessage(){return this.errorMessage&&t("p",{class:"pds-select__error-message",id:l(this.componentId,"error"),"aria-live":"assertive"},t("pds-icon",{"aria-hidden":"true",icon:h,size:"small"}),this.errorMessage)}renderMessages(){return this.helperMessage||this.errorMessage?t("div",{class:"pds-select__message"},this.getHelperMessage(),this.getErrorMessage()):null}isInvalid(){return!!this.invalid||!!this.errorMessage}classNames(){const e=[];return this.invalid&&e.push("is-invalid"),this.disabled&&e.push("is-disabled"),e.join("  ")}renderAction(){return null!==this.el.querySelector('[slot="action"]')?t("div",{class:"pds-select__action",part:"action"},t("slot",{name:"action"})):null}updateFormValue(){if(!d()&&this.internals&&this.internals.setFormValue){const e=this.value;if(Array.isArray(e))if(e.length>1){const s=new FormData;e.forEach((e=>s.append(this.name||"",e))),this.internals.setFormValue(s)}else this.internals.setFormValue(e[0]||null);else this.internals.setFormValue(e||null);this.selectEl&&this.internals&&this.internals.setValidity&&this.internals.setValidity(this.selectEl.validity,this.selectEl.validationMessage,this.selectEl)}}formResetCallback(){this.value="",this.updateFormValue()}formDisabledCallback(e){this.disabled=e}formStateRestoreCallback(e){if("string"==typeof e)this.value=e;else if(e instanceof FormData&&this.name){const s=e.getAll(this.name);s.length>1?this.value=s.filter((e=>"string"==typeof e)):1===s.length&&"string"==typeof s[0]&&(this.value=s[0])}}render(){const e=null!==this.el.querySelector('[slot="action"]'),s=this.classNames(),i={"aria-disabled":this.disabled?"true":null,"has-action":e&&!this.hideLabel?"true":null};return this.hostKeeper.record(s,{},i),t(r,Object.assign({key:"6ffb35c5166a0759fbe7b3daa0b674c5f10458fa",class:s},i),t("div",{key:"1e2d73b3a65189c29a34c1ce4473cce190f052c0",class:"pds-select"},!this.hideLabel&&t("div",{key:"467c75d7232e4667975419a0dcad28231ca240a1",class:"pds-select__label-wrapper"},t("label",{key:"9dd08c5c71a23c762f9d38fcec525a05ced7d48b",htmlFor:this.componentId},t("span",{key:"94e5f054aa6e75e458f24c02ba9a6cda81f112d7",class:this.hideLabel?"visually-hidden":""},this.label)),e&&this.renderAction()),t("select",{key:"18c626e10851041042ab4d6dfe700d49a9b3312b","aria-describedby":c(this.componentId,this.isInvalid(),this.helperMessage,this.errorMessage),"aria-invalid":this.isInvalid()?"true":void 0,"aria-label":this.hideLabel?this.label:void 0,autocomplete:this.autocomplete||void 0,class:"pds-select__field",disabled:this.disabled,id:this.componentId,multiple:this.multiple,name:this.name,onBlur:this.onBlur,onChange:this.onSelectUpdate,onFocus:this.onFocus,onKeyDown:this.onKeyDown,part:"select",required:this.required,ref:e=>this.selectEl=e}),t("div",{key:"08c6cee6b009d22b0ed70cc8231d3c2c8637099d","aria-hidden":"true",class:"hidden",ref:e=>this.slotContainer=e},t("slot",{key:"2ebcb906f8816e3bf26d5e4f82f8ea2d9ca2256a",onSlotchange:this.handleSlotChange})),this.renderMessages(),!this.multiple&&t("pds-icon",{key:"191f489efb78fc7066fc0b5a1f5da1f7cda446e8","aria-hidden":"true",class:"pds-select__select-icon",icon:p})))}static get formAssociated(){return!0}get el(){return this}static get watchers(){return{value:[{valueChanged:0}],multiple:[{multipleChanged:0}]}}static get style(){return':host{--pine-select-color-background-danger:var(--pine-color-red-050)}:host{display:inline-block}:host([aria-disabled=true]) label{color:var(--pine-color-text-label-disabled)}:host([aria-readonly=true]) label{color:var(--pine-color-text-label-readonly)}label{color:var(--pine-color-text-label);font:var(--pine-typography-body-medium);letter-spacing:var(--pine-letter-spacing)}:host{--pds-select-background:var(--pine-color-background-container);--pds-select-border:var(--pine-border);--pds-select-border-radius:var(--pine-dimension-125);--pds-select-border-radius-start-end:var(--pine-dimension-125);--pds-select-border-radius-start-start:var(--pine-dimension-125);--pds-select-border-radius-end-end:var(--pine-dimension-125);--pds-select-border-radius-end-start:var(--pine-dimension-125);--pds-select-min-height:36px;--box-shadow-focus:0 0 0 1px var(--pine-color-background-container), 0 0 0 3px var(--pine-color-focus-ring);--box-shadow-focus-error:0 0 0 1px var(--pine-color-background-container), 0 0 0 3px var(--pine-color-focus-ring-danger)}:host .hidden,:host :host([hidden]){display:none}.pds-select{color:var(--pine-color-text);display:grid;-ms-flex-direction:column;flex-direction:column;grid-template-areas:"label label" "field field" "message message";grid-template-columns:1fr minmax(2rem, -webkit-min-content);grid-template-columns:1fr minmax(2rem, min-content);grid-template-rows:-webkit-min-content -webkit-min-content -webkit-min-content;grid-template-rows:min-content min-content min-content;position:relative;width:100%}.pds-select__label-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;grid-area:label;-ms-flex-pack:justify;justify-content:space-between;-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs)}.pds-select__action{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs);-webkit-margin-start:var(--pine-dimension-xs);margin-inline-start:var(--pine-dimension-xs)}label{-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs)}.pds-select__label-wrapper label{-webkit-margin-after:0;margin-block-end:0}select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--pds-select-background);border:var(--pds-select-border);border-end-end-radius:var(--pds-select-border-radius-end-end, var(--pds-select-border-radius));border-end-start-radius:var(--pds-select-border-radius-end-start, var(--pds-select-border-radius));border-start-end-radius:var(--pds-select-border-radius-start-end, var(--pds-select-border-radius));border-start-start-radius:var(--pds-select-border-radius-start-start, var(--pds-select-border-radius));color:var(--pine-color-text);font:var(--pine-typography-body);grid-area:field;letter-spacing:var(--pine-letter-spacing);min-height:var(--pds-select-min-height);padding:calc(var(--pine-dimension-xs) - var(--pine-border-width)) var(--pine-dimension-150);-webkit-padding-end:var(--pine-dimension-450);padding-inline-end:var(--pine-dimension-450);position:relative}select:hover{border-color:var(--pine-color-border-hover);cursor:pointer}select:focus-visible{border-color:var(--pine-color-border-active);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}select:disabled{background-color:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);color:var(--pine-color-text-disabled);cursor:not-allowed}select:has(~.pds-select__message .pds-select__error-message){background-color:var(--pine-select-color-background-danger);border-color:var(--pine-color-border-danger)}:host-context([data-theme=dark]) select:has(~.pds-select__message .pds-select__error-message){background-color:var(--pine-color-red-950)}select:has(~.pds-select__message .pds-select__error-message):focus-visible{outline-color:var(--pine-color-focus-ring-danger)}:host(.is-disabled) .pds-select__select-icon{color:var(--pine-color-text-disabled)}:host(.is-invalid) select{background-color:var(--pine-select-color-background-danger);border-color:var(--pine-color-border-danger)}:host-context([data-theme=dark]) :host(.is-invalid) select{background-color:var(--pine-color-red-950)}:host(.is-invalid) select:focus-visible{outline-color:var(--pine-color-focus-ring-danger)}:host([highlight]:not(.is-disabled):not(.is-invalid)) select{background-color:var(--pine-color-accent-disabled);border-color:var(--pine-color-accent);color:var(--pine-color-text-accent)}:host([highlight]:not(.is-disabled):not(.is-invalid)) select:hover:not(:disabled){border-color:var(--pine-color-accent-hover)}:host([highlight]:not(.is-disabled):not(.is-invalid)) select:focus-visible{outline-color:var(--pine-color-focus-ring)}:host([highlight]:not(.is-disabled):not(.is-invalid)) .pds-select__select-icon{color:var(--pine-color-text-accent)}.pds-select__error-message,.pds-select__helper-message{color:var(--pine-color-text-message);font:var(--pine-typography-body-sm-medium);-webkit-margin-after:0;margin-block-end:0;-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-select__error-message{color:var(--pine-color-text-message-danger);display:-ms-flexbox;display:flex;gap:var(--pine-dimension-2xs)}.pds-select__error-message pds-icon{-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025)}.pds-select__message{grid-area:message}.pds-select__select-icon{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;grid-column:-1/-2;grid-row:2/3;height:var(--pds-select-min-height);pointer-events:none;position:relative;z-index:calc(var(--pine-z-index-raised) - 1)}.visually-hidden{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}'}},[321,"pds-select",{autocomplete:[1],componentId:[1,"component-id"],disabled:[4],errorMessage:[1,"error-message"],hideLabel:[4,"hide-label"],helperMessage:[1,"helper-message"],invalid:[4],label:[1],multiple:[4],name:[1],required:[4],highlight:[516],value:[1025]},void 0,{value:[{valueChanged:0}],multiple:[{multipleChanged:0}]}]),v=g,f=function(){"undefined"!=typeof customElements&&["pds-select","pds-icon"].forEach((e=>{switch(e){case"pds-select":customElements.get(a(e))||customElements.define(a(e),g);break;case"pds-icon":customElements.get(a(e))||b()}}))};export{v as PdsSelect,f as defineCustomElement}

package/components/pds-sortable-item.js

@@ -1,58 +1 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { h as handle } from './index2.js';
-import { d as defineCustomElement$2 } from './pds-icon2.js';
-
-const pdsSortableItemCss = ".pds-sortable-item.sc-pds-sortable-item-h{--border-radius:var(--pine-border-radius-125);--border-default:var(--pine-border-width-thin) solid var(--pine-color-grey-300);--box-shadow:var(--pine-box-shadow-lg);--color-background-default:var(--pine-color-white);--color-background-interactive:var(--pine-color-grey-200);--color-interactive-handle:var(--pine-color-blue-300);--spacing-margin-inline-end:var(--pine-spacing-300);--spacing-padding-block-xs:var(--pine-spacing-100);--spacing-padding-inline:var(--pine-spacing-300);--spacing-padding-inline-start:var(--pine-spacing-300);-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;padding-block:var(--spacing-padding-block-xs);padding-inline:var(--spacing-padding-inline)}.pds-sortable-item.sc-pds-sortable-item-h .pds-sortable-item__actions.sc-pds-sortable-item{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-padding-start:var(--spacing-padding-inline-start);padding-inline-start:var(--spacing-padding-inline-start)}.pds-sortable-item.sc-pds-sortable-item-h .pds-sortable-item__handle.sc-pds-sortable-item{line-height:1;-webkit-margin-end:var(--spacing-margin-inline-end);margin-inline-end:var(--spacing-margin-inline-end)}.pds-sortable--bordered .pds-sortable-item.sc-pds-sortable-item-h:first-child{border-start-end-radius:var(--border-radius);border-start-start-radius:var(--border-radius)}.pds-sortable--bordered .pds-sortable-item.sc-pds-sortable-item-h:last-child{border-end-end-radius:var(--border-radius);border-end-start-radius:var(--border-radius)}.pds-sortable--divided .pds-sortable-item.sc-pds-sortable-item-h{-webkit-border-after:var(--border-default);border-block-end:var(--border-default)}.pds-sortable--divided .pds-sortable-item.sc-pds-sortable-item-h:last-child{-webkit-border-after:0;border-block-end:0}.pds-sortable--handle-type-row .pds-sortable-item.sc-pds-sortable-item-h{cursor:-webkit-grab;cursor:grab}.pds-sortable--handle-type-handle .pds-sortable-item.sc-pds-sortable-item-h .pds-sortable-item__handle.sc-pds-sortable-item{cursor:-webkit-grab;cursor:grab}.pds-sortable-item.sc-pds-sortable-item-h:hover{background-color:var(--color-background-interactive)}.pds-sortable-item.sc-pds-sortable-item-h:hover pds-icon.sc-pds-sortable-item{color:var(--color-interactive-handle)}.pds-sortable-item--drag.sc-pds-sortable-item-h{background-color:var(--color-background-default);border-radius:0;-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);opacity:1}.pds-sortable-item--ghost.sc-pds-sortable-item-h{background-color:var(--color-background-interactive);border-radius:0}";
-const PdsSortableItemStyle0 = pdsSortableItemCss;
-
-const PdsSortableItem$1 = /*@__PURE__*/ proxyCustomElement(class PdsSortableItem extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.enableActions = false;
-        this.componentId = undefined;
-        this.showHandle = false;
-    }
-    componentWillRender() {
-        // When the parent sortable has a type of 'handle', the sortable items
-        // will automatically set showHandle to 'true'.
-        this.sortableRef = this.el.closest('pds-sortable');
-        if (this.sortableRef && this.sortableRef.handleType === 'handle') {
-            this.showHandle = true;
-        }
-    }
-    render() {
-        return (h(Host, { key: '60214e183314736338f9b38cb93a9c5989e16cdf', class: "pds-sortable-item", id: this.componentId }, this.showHandle && (h("div", { key: '7cc252c99598f384a87518c101d0772a4ce344e4', class: "pds-sortable-item__handle" }, h("pds-icon", { key: 'e2b219927cf717fa53112066ba3fe0ac12688edd', icon: handle }))), h("slot", { key: 'e259bfbf7e8c848567d07639e62adfe5781f29b8' }), this.enableActions && (h("div", { key: 'e83d28d55b6fee971575433a3e3f8b1d5b7e52fe', class: "pds-sortable-item__actions" }, h("slot", { key: '7ac52a8109e49cfff96cead45a3b318646c7f064', name: "sortable-item-actions" })))));
-    }
-    get el() { return this; }
-    static get style() { return PdsSortableItemStyle0; }
-}, [6, "pds-sortable-item", {
-        "enableActions": [4, "enable-actions"],
-        "componentId": [1, "component-id"],
-        "showHandle": [1028, "show-handle"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["pds-sortable-item", "pds-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "pds-sortable-item":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, PdsSortableItem$1);
-            }
-            break;
-        case "pds-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const PdsSortableItem = PdsSortableItem$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { PdsSortableItem, defineCustomElement };
-
-//# sourceMappingURL=pds-sortable-item.js.map
+import{proxyCustomElement as e,HTMLElement as s,h as t,Host as i,transformTag as o}from"@stencil/core/internal/client";import{H as r}from"./attributes.js";import{f as a}from"./i18n-format.js";import{s as d}from"./sortable-label.js";import{i as n}from"./index2.js";import{d as l}from"./pds-icon2.js";const b="pds-sortable-item--grabbed",p=e(class extends s{constructor(e){super(),!1!==e&&this.__registerHost(),this.hostKeeper=new r,this.enableActions=!1,this.showHandle=!1}connectedCallback(){this.hostKeeper.connect(this.el)}disconnectedCallback(){this.hostKeeper.disconnect()}componentDidRender(){Array.from(this.el.children).filter((e=>e.matches(".pds-sortable-item__handle"))).slice(1).forEach((e=>e.remove()));const e=Array.from(this.el.children).filter((e=>e.matches(".pds-sortable-item__actions"))),s=e[e.length-1];e.slice(0,-1).forEach((e=>{void 0!==s&&Array.from(e.children).forEach((e=>s.appendChild(e))),e.remove()}))}componentWillRender(){this.sortableRef=this.el.closest("pds-sortable"),this.sortableRef&&"handle"===this.sortableRef.handleType&&(this.showHandle=!0)}render(){const e=this.sortableRef,s="string"==typeof(null==e?void 0:e.handleLabel)&&!e.disabled,o=this.el.classList.contains(b),r={"pds-sortable-item":!0,[b]:o};this.hostKeeper.record(r);const l=this.el.querySelector(".pds-sortable-item__handle"),p="true"===(null==l?void 0:l.getAttribute("aria-pressed"));return t(i,{key:"93566ff82e0603508392df14f6ecec11872e822c",class:r},(this.showHandle||s)&&t("div",{key:"c3c6bd592ab827a0fc513c101b5afec8acc62cf4",class:{"pds-sortable-item__handle":!0,"pds-sortable-item__handle--hidden":!this.showHandle},role:s?"button":void 0,tabindex:s?"0":void 0,"aria-label":s?a(e.handleLabel,{item:d(this.el)}):void 0,"aria-pressed":s?p+"":void 0},t("pds-icon",{key:"a71dd5c7c7d368ec0ef326d7f86f33bcaeecf238","aria-hidden":"true",icon:n})),t("slot",{key:"cf372e7f7a234829b77ae28604bfdbdced27b1e8"}),this.enableActions&&t("div",{key:"abf8848c6c5ed09ddcf1b09be21f0ba851385f10",class:"pds-sortable-item__actions"},t("slot",{key:"e6b3b897c17529f5d803d72e6fcbeed66880f083",name:"sortable-item-actions"})))}get el(){return this}static get style(){return".pds-sortable-item.sc-pds-sortable-item-h{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;padding-block:var(--pine-dimension-xs);padding-inline:var(--pine-dimension-md);position:relative;-webkit-transition:-webkit-box-shadow var(--pine-motion-duration-fast) var(--pine-motion-easing-out);transition:-webkit-box-shadow var(--pine-motion-duration-fast) var(--pine-motion-easing-out);transition:box-shadow var(--pine-motion-duration-fast) var(--pine-motion-easing-out);transition:box-shadow var(--pine-motion-duration-fast) var(--pine-motion-easing-out), -webkit-box-shadow var(--pine-motion-duration-fast) var(--pine-motion-easing-out)}.pds-sortable-item.sc-pds-sortable-item-h .pds-sortable-item__actions.sc-pds-sortable-item{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-padding-start:var(--pine-dimension-md);padding-inline-start:var(--pine-dimension-md)}.pds-sortable-item.sc-pds-sortable-item-h .pds-sortable-item__handle.sc-pds-sortable-item{border-radius:var(--pine-border-radius-sm);line-height:1;-webkit-margin-end:var(--pine-dimension-md);margin-inline-end:var(--pine-dimension-md)}.pds-sortable-item.sc-pds-sortable-item-h .pds-sortable-item__handle.sc-pds-sortable-item:focus-visible{outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-sortable-item.sc-pds-sortable-item-h .pds-sortable-item__handle--hidden.sc-pds-sortable-item{-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:0;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.pds-sortable-item.sc-pds-sortable-item-h .pds-sortable-item__handle--hidden.sc-pds-sortable-item:focus-visible{outline:0}.pds-sortable--bordered .pds-sortable-item.sc-pds-sortable-item-h:first-child{border-start-end-radius:calc(var(--pine-dimension-xs) * 1.25);border-start-start-radius:calc(var(--pine-dimension-xs) * 1.25)}.pds-sortable--bordered .pds-sortable-item.sc-pds-sortable-item-h:last-child{border-end-end-radius:calc(var(--pine-dimension-xs) * 1.25);border-end-start-radius:calc(var(--pine-dimension-xs) * 1.25)}.pds-sortable--divided .pds-sortable-item.sc-pds-sortable-item-h{-webkit-border-after:var(--pine-border);border-block-end:var(--pine-border)}.pds-sortable--divided .pds-sortable-item.sc-pds-sortable-item-h:last-child{-webkit-border-after:0;border-block-end:0}.pds-sortable--handle-type-row .pds-sortable-item.sc-pds-sortable-item-h{cursor:-webkit-grab;cursor:grab}.pds-sortable--handle-type-handle .pds-sortable-item.sc-pds-sortable-item-h .pds-sortable-item__handle.sc-pds-sortable-item{cursor:-webkit-grab;cursor:grab}.pds-sortable--disabled .pds-sortable-item.sc-pds-sortable-item-h{cursor:not-allowed;opacity:0.5}.pds-sortable--disabled .pds-sortable-item.sc-pds-sortable-item-h .pds-sortable-item__handle.sc-pds-sortable-item{cursor:not-allowed}.pds-sortable--disabled .pds-sortable-item.sc-pds-sortable-item-h:hover{background-color:transparent}.pds-sortable:not(.pds-sortable--disabled) .pds-sortable-item.sc-pds-sortable-item-h:hover{background-color:var(--pine-color-background-container-hover)}.pds-sortable:not(.pds-sortable--disabled) .pds-sortable-item.sc-pds-sortable-item-h:hover pds-icon.sc-pds-sortable-item{color:var(--pine-color-info)}.pds-sortable-item.sc-pds-sortable-item-h:has(>.pds-sortable-item__handle--hidden:focus-visible){outline:var(--pine-outline-focus);outline-offset:calc(var(--pine-border-width-thick) * -1)}.pds-sortable-item--grabbed.sc-pds-sortable-item-h{background-color:var(--pine-color-background-container-hover);-webkit-box-shadow:var(--pine-box-shadow-400), inset 0 0 0 var(--pine-border-width-thick) var(--pine-color-border-active);box-shadow:var(--pine-box-shadow-400), inset 0 0 0 var(--pine-border-width-thick) var(--pine-color-border-active);position:relative;z-index:1}@media (forced-colors: active){.pds-sortable-item--grabbed.sc-pds-sortable-item-h{border:var(--pine-border-width-thick) solid Highlight;padding-block:calc(var(--pine-dimension-xs) - var(--pine-border-width-thick));padding-inline:calc(var(--pine-dimension-md) - var(--pine-border-width-thick))}}.pds-sortable-item--drag.sc-pds-sortable-item-h{background-color:var(--pine-color-background-container);border-radius:0;-webkit-box-shadow:var(--pine-box-shadow-400);box-shadow:var(--pine-box-shadow-400);opacity:1}.pds-sortable-item--ghost.sc-pds-sortable-item-h{background-color:var(--pine-color-background-container-hover);border-radius:0}"}},[262,"pds-sortable-item",{enableActions:[4,"enable-actions"],componentId:[1,"component-id"],showHandle:[1028,"show-handle"],itemLabel:[1,"item-label"]}]),c=p,m=function(){"undefined"!=typeof customElements&&["pds-sortable-item","pds-icon"].forEach((e=>{switch(e){case"pds-sortable-item":customElements.get(o(e))||customElements.define(o(e),p);break;case"pds-icon":customElements.get(o(e))||l()}}))};export{c as PdsSortableItem,m as defineCustomElement}