@pine-ds/core 4.7.0 → 4.7.2

package/dist/collection/components/pds-box/pds-box.js

@@ -20,18 +20,18 @@ export class PdsBox {
     }
     render() {
         const boxClasses = `
-    ${this.alignItems !== undefined && this.alignItems.trim() !== '' ? `pds-align-items-${this.alignItems}` : ''}
-    ${this.alignItemsXs !== undefined && this.alignItemsXs.trim() !== '' ? `pds-align-items-xs-${this.alignItemsXs}` : ''}
-    ${this.alignItemsSm !== undefined && this.alignItemsSm.trim() !== '' ? `pds-align-items-sm-${this.alignItemsSm}` : ''}
-    ${this.alignItemsMd !== undefined && this.alignItemsMd.trim() !== '' ? `pds-align-items-md-${this.alignItemsMd}` : ''}
-    ${this.alignItemsLg !== undefined && this.alignItemsLg.trim() !== '' ? `pds-align-items-lg-${this.alignItemsLg}` : ''}
-    ${this.alignItemsXl !== undefined && this.alignItemsXl.trim() !== '' ? `pds-align-items-xl-${this.alignItemsXl}` : ''}
-    ${this.alignSelf !== undefined && this.alignSelf.trim() !== '' ? `pds-align-self-${this.alignSelf}` : ''}
-    ${this.alignSelfXs !== undefined && this.alignSelfXs.trim() !== '' ? `pds-align-self-xs-${this.alignSelfXs}` : ''}
-    ${this.alignSelfSm !== undefined && this.alignSelfSm.trim() !== '' ? `pds-align-self-sm-${this.alignSelfSm}` : ''}
-    ${this.alignSelfMd !== undefined && this.alignSelfMd.trim() !== '' ? `pds-align-self-md-${this.alignSelfMd}` : ''}
-    ${this.alignSelfLg !== undefined && this.alignSelfLg.trim() !== '' ? `pds-align-self-lg-${this.alignSelfLg}` : ''}
-    ${this.alignSelfXl !== undefined && this.alignSelfXl.trim() !== '' ? `pds-align-self-xl-${this.alignSelfXl}` : ''}
+    ${this.alignItems != null && this.alignItems.trim() !== '' ? `pds-align-items-${this.alignItems}` : ''}
+    ${this.alignItemsXs != null && this.alignItemsXs.trim() !== '' ? `pds-align-items-xs-${this.alignItemsXs}` : ''}
+    ${this.alignItemsSm != null && this.alignItemsSm.trim() !== '' ? `pds-align-items-sm-${this.alignItemsSm}` : ''}
+    ${this.alignItemsMd != null && this.alignItemsMd.trim() !== '' ? `pds-align-items-md-${this.alignItemsMd}` : ''}
+    ${this.alignItemsLg != null && this.alignItemsLg.trim() !== '' ? `pds-align-items-lg-${this.alignItemsLg}` : ''}
+    ${this.alignItemsXl != null && this.alignItemsXl.trim() !== '' ? `pds-align-items-xl-${this.alignItemsXl}` : ''}
+    ${this.alignSelf != null && this.alignSelf.trim() !== '' ? `pds-align-self-${this.alignSelf}` : ''}
+    ${this.alignSelfXs != null && this.alignSelfXs.trim() !== '' ? `pds-align-self-xs-${this.alignSelfXs}` : ''}
+    ${this.alignSelfSm != null && this.alignSelfSm.trim() !== '' ? `pds-align-self-sm-${this.alignSelfSm}` : ''}
+    ${this.alignSelfMd != null && this.alignSelfMd.trim() !== '' ? `pds-align-self-md-${this.alignSelfMd}` : ''}
+    ${this.alignSelfLg != null && this.alignSelfLg.trim() !== '' ? `pds-align-self-lg-${this.alignSelfLg}` : ''}
+    ${this.alignSelfXl != null && this.alignSelfXl.trim() !== '' ? `pds-align-self-xl-${this.alignSelfXl}` : ''}
     ${this.auto ? 'pds-box--auto' : ''}
     ${this.autoXs ? 'pds-box--auto-xs' : ''}
     ${this.autoSm ? 'pds-box--auto-sm' : ''}
@@ -47,101 +47,101 @@ export class PdsBox {
     ${this.borderInlineStart === false ? 'pds-box--border-inline-start-none' : ''}
     ${this.borderInlineEnd === true ? 'pds-box--border-inline-end' : ''}
     ${this.borderInlineEnd === false ? 'pds-box--border-inline-end-none' : ''}
-    ${this.borderRadius !== undefined && this.borderRadius.trim() !== '' ? `pds-border-radius-${this.borderRadius}` : ''}
-    ${this.direction !== undefined && this.direction.trim() !== '' ? `pds-box-direction-${this.direction}` : ''}
-    ${this.display !== undefined && this.display.trim() !== '' ? `pds-box--display-${this.display}` : ''}
+    ${this.borderRadius != null && this.borderRadius.trim() !== '' ? `pds-border-radius-${this.borderRadius}` : ''}
+    ${this.direction != null && this.direction.trim() !== '' ? `pds-box-direction-${this.direction}` : ''}
+    ${this.display != null && this.display.trim() !== '' ? `pds-box--display-${this.display}` : ''}
     ${this.fit ? 'pds-box--fit' : ''}
     ${this.fitXs ? 'pds-box--fit-xs' : ''}
     ${this.fitSm ? 'pds-box--fit-sm' : ''}
     ${this.fitMd ? 'pds-box--fit-md' : ''}
     ${this.fitLg ? 'pds-box--fit-lg' : ''}
     ${this.fitXl ? 'pds-box--fit-xl' : ''}
-    ${this.gap !== undefined && this.gap.trim() !== '' ? `pds-box-gap-${this.gap}` : ''}
-    ${this.gapXs !== undefined && this.gapXs.trim() !== '' ? `pds-box-gap-xs-${this.gapXs}` : ''}
-    ${this.gapSm !== undefined && this.gapSm.trim() !== '' ? `pds-box-gap-sm-${this.gapSm}` : ''}
-    ${this.gapMd !== undefined && this.gapMd.trim() !== '' ? `pds-box-gap-md-${this.gapMd}` : ''}
-    ${this.gapLg !== undefined && this.gapLg.trim() !== '' ? `pds-box-gap-lg-${this.gapLg}` : ''}
-    ${this.gapXl !== undefined && this.gapXl.trim() !== '' ? `pds-box-gap-xl-${this.gapXl}` : ''}
+    ${this.gap != null && this.gap.trim() !== '' ? `pds-box-gap-${this.gap}` : ''}
+    ${this.gapXs != null && this.gapXs.trim() !== '' ? `pds-box-gap-xs-${this.gapXs}` : ''}
+    ${this.gapSm != null && this.gapSm.trim() !== '' ? `pds-box-gap-sm-${this.gapSm}` : ''}
+    ${this.gapMd != null && this.gapMd.trim() !== '' ? `pds-box-gap-md-${this.gapMd}` : ''}
+    ${this.gapLg != null && this.gapLg.trim() !== '' ? `pds-box-gap-lg-${this.gapLg}` : ''}
+    ${this.gapXl != null && this.gapXl.trim() !== '' ? `pds-box-gap-xl-${this.gapXl}` : ''}
     ${this.wrap ? 'pds-box--wrap' : ''}
     ${this.wrapXs ? 'pds-box--wrap-xs' : ''}
     ${this.wrapSm ? 'pds-box--wrap-sm' : ''}
     ${this.wrapMd ? 'pds-box--wrap-md' : ''}
     ${this.wrapLg ? 'pds-box--wrap-lg' : ''}
     ${this.wrapXl ? 'pds-box--wrap-xl' : ''}
-    ${this.flex !== undefined && this.flex.trim() !== '' && ['none', 'grow', 'shrink'].includes(this.flex) ? `pds-box--flex-${this.flex}` : ''}
-    ${this.justifyContent !== undefined && this.justifyContent.trim() !== '' ? `pds-justify-content-${this.justifyContent}` : ''}
-    ${this.justifyContentXs !== undefined && this.justifyContentXs.trim() !== '' ? `pds-justify-content-xs-${this.justifyContentXs}` : ''}
-    ${this.justifyContentSm !== undefined && this.justifyContentSm.trim() !== '' ? `pds-justify-content-sm-${this.justifyContentSm}` : ''}
-    ${this.justifyContentMd !== undefined && this.justifyContentMd.trim() !== '' ? `pds-justify-content-md-${this.justifyContentMd}` : ''}
-    ${this.justifyContentLg !== undefined && this.justifyContentLg.trim() !== '' ? `pds-justify-content-lg-${this.justifyContentLg}` : ''}
-    ${this.justifyContentXl !== undefined && this.justifyContentXl.trim() !== '' ? `pds-justify-content-xl-${this.justifyContentXl}` : ''}
-    ${this.marginBlockStart !== undefined && this.marginBlockStart.trim() !== '' ? `pds-margin-block-start-${this.marginBlockStart}` : ''}
-    ${this.marginBlockStartXs !== undefined && this.marginBlockStartXs.trim() !== '' ? `pds-margin-block-start-xs-${this.marginBlockStartXs}` : ''}
-    ${this.marginBlockStartSm !== undefined && this.marginBlockStartSm.trim() !== '' ? `pds-margin-block-start-sm-${this.marginBlockStartSm}` : ''}
-    ${this.marginBlockStartMd !== undefined && this.marginBlockStartMd.trim() !== '' ? `pds-margin-block-start-md-${this.marginBlockStartMd}` : ''}
-    ${this.marginBlockStartLg !== undefined && this.marginBlockStartLg.trim() !== '' ? `pds-margin-block-start-lg-${this.marginBlockStartLg}` : ''}
-    ${this.marginBlockStartXl !== undefined && this.marginBlockStartXl.trim() !== '' ? `pds-margin-block-start-xl-${this.marginBlockStartXl}` : ''}
-    ${this.marginInlineStart !== undefined && this.marginInlineStart.trim() !== '' ? `pds-margin-inline-start-${this.marginInlineStart}` : ''}
-    ${this.marginInlineStartXs !== undefined && this.marginInlineStartXs.trim() !== '' ? `pds-margin-inline-start-xs-${this.marginInlineStartXs}` : ''}
-    ${this.marginInlineStartSm !== undefined && this.marginInlineStartSm.trim() !== '' ? `pds-margin-inline-start-sm-${this.marginInlineStartSm}` : ''}
-    ${this.marginInlineStartMd !== undefined && this.marginInlineStartMd.trim() !== '' ? `pds-margin-inline-start-md-${this.marginInlineStartMd}` : ''}
-    ${this.marginInlineStartLg !== undefined && this.marginInlineStartLg.trim() !== '' ? `pds-margin-inline-start-lg-${this.marginInlineStartLg}` : ''}
-    ${this.marginInlineStartXl !== undefined && this.marginInlineStartXl.trim() !== '' ? `pds-margin-inline-start-xl-${this.marginInlineStartXl}` : ''}
-    ${this.marginInlineEnd !== undefined && this.marginInlineEnd.trim() !== '' ? `pds-margin-inline-end-${this.marginInlineEnd}` : ''}
-    ${this.marginInlineEndXs !== undefined && this.marginInlineEndXs.trim() !== '' ? `pds-margin-inline-end-xs-${this.marginInlineEndXs}` : ''}
-    ${this.marginInlineEndSm !== undefined && this.marginInlineEndSm.trim() !== '' ? `pds-margin-inline-end-sm-${this.marginInlineEndSm}` : ''}
-    ${this.marginInlineEndMd !== undefined && this.marginInlineEndMd.trim() !== '' ? `pds-margin-inline-end-md-${this.marginInlineEndMd}` : ''}
-    ${this.marginInlineEndLg !== undefined && this.marginInlineEndLg.trim() !== '' ? `pds-margin-inline-end-lg-${this.marginInlineEndLg}` : ''}
-    ${this.marginInlineEndXl !== undefined && this.marginInlineEndXl.trim() !== '' ? `pds-margin-inline-end-xl-${this.marginInlineEndXl}` : ''}
-    ${this.marginBlockEnd !== undefined && this.marginBlockEnd.trim() !== '' ? `pds-margin-block-end-${this.marginBlockEnd}` : ''}
-    ${this.marginBlockEndXs !== undefined && this.marginBlockEndXs.trim() !== '' ? `pds-margin-block-end-xs-${this.marginBlockEndXs}` : ''}
-    ${this.marginBlockEndSm !== undefined && this.marginBlockEndSm.trim() !== '' ? `pds-margin-block-end-sm-${this.marginBlockEndSm}` : ''}
-    ${this.marginBlockEndMd !== undefined && this.marginBlockEndMd.trim() !== '' ? `pds-margin-block-end-md-${this.marginBlockEndMd}` : ''}
-    ${this.marginBlockEndLg !== undefined && this.marginBlockEndLg.trim() !== '' ? `pds-margin-block-end-lg-${this.marginBlockEndLg}` : ''}
-    ${this.marginBlockEndXl !== undefined && this.marginBlockEndXl.trim() !== '' ? `pds-margin-block-end-xl-${this.marginBlockEndXl}` : ''}
-    ${this.offset !== undefined && this.offset.trim() !== '' ? `pds-box-offset-${this.offset}` : ''}
-    ${this.offsetXs !== undefined && this.offsetXs.trim() !== '' ? `pds-box-offset-xs-${this.offsetXs}` : ''}
-    ${this.offsetSm !== undefined && this.offsetSm.trim() !== '' ? `pds-box-offset-sm-${this.offsetSm}` : ''}
-    ${this.offsetMd !== undefined && this.offsetMd.trim() !== '' ? `pds-box-offset-md-${this.offsetMd}` : ''}
-    ${this.offsetLg !== undefined && this.offsetLg.trim() !== '' ? `pds-box-offset-lg-${this.offsetLg}` : ''}
-    ${this.offsetXl !== undefined && this.offsetXl.trim() !== '' ? `pds-box-offset-xl-${this.offsetXl}` : ''}
-    ${this.padding !== undefined && this.padding.trim() !== '' ? `pds-padding-${this.padding}` : ''}
-    ${this.paddingXs !== undefined && this.paddingXs.trim() !== '' ? `pds-padding-xs-${this.paddingXs}` : ''}
-    ${this.paddingSm !== undefined && this.paddingSm.trim() !== '' ? `pds-padding-sm-${this.paddingSm}` : ''}
-    ${this.paddingMd !== undefined && this.paddingMd.trim() !== '' ? `pds-padding-md-${this.paddingMd}` : ''}
-    ${this.paddingLg !== undefined && this.paddingLg.trim() !== '' ? `pds-padding-lg-${this.paddingLg}` : ''}
-    ${this.paddingXl !== undefined && this.paddingXl.trim() !== '' ? `pds-padding-xl-${this.paddingXl}` : ''}
-    ${this.paddingBlockStart !== undefined && this.paddingBlockStart.trim() !== '' ? `pds-padding-block-start-${this.paddingBlockStart}` : ''}
-    ${this.paddingBlockStartXs !== undefined && this.paddingBlockStartXs.trim() !== '' ? `pds-padding-block-start-xs-${this.paddingBlockStartXs}` : ''}
-    ${this.paddingBlockStartSm !== undefined && this.paddingBlockStartSm.trim() !== '' ? `pds-padding-block-start-sm-${this.paddingBlockStartSm}` : ''}
-    ${this.paddingBlockStartMd !== undefined && this.paddingBlockStartMd.trim() !== '' ? `pds-padding-block-start-md-${this.paddingBlockStartMd}` : ''}
-    ${this.paddingBlockStartLg !== undefined && this.paddingBlockStartLg.trim() !== '' ? `pds-padding-block-start-lg-${this.paddingBlockStartLg}` : ''}
-    ${this.paddingBlockStartXl !== undefined && this.paddingBlockStartXl.trim() !== '' ? `pds-padding-block-start-xl-${this.paddingBlockStartXl}` : ''}
-    ${this.paddingBlockEnd !== undefined && this.paddingBlockEnd.trim() !== '' ? `pds-padding-block-end-${this.paddingBlockEnd}` : ''}
-    ${this.paddingBlockEndXs !== undefined && this.paddingBlockEndXs.trim() !== '' ? `pds-padding-block-end-xs-${this.paddingBlockEndXs}` : ''}
-    ${this.paddingBlockEndSm !== undefined && this.paddingBlockEndSm.trim() !== '' ? `pds-padding-block-end-sm-${this.paddingBlockEndSm}` : ''}
-    ${this.paddingBlockEndMd !== undefined && this.paddingBlockEndMd.trim() !== '' ? `pds-padding-block-end-md-${this.paddingBlockEndMd}` : ''}
-    ${this.paddingBlockEndLg !== undefined && this.paddingBlockEndLg.trim() !== '' ? `pds-padding-block-end-lg-${this.paddingBlockEndLg}` : ''}
-    ${this.paddingBlockEndXl !== undefined && this.paddingBlockEndXl.trim() !== '' ? `pds-padding-block-end-xl-${this.paddingBlockEndXl}` : ''}
-    ${this.paddingInlineStart !== undefined && this.paddingInlineStart.trim() !== '' ? `pds-padding-inline-start-${this.paddingInlineStart}` : ''}
-    ${this.paddingInlineStartXs !== undefined && this.paddingInlineStartXs.trim() !== '' ? `pds-padding-inline-start-xs-${this.paddingInlineStartXs}` : ''}
-    ${this.paddingInlineStartSm !== undefined && this.paddingInlineStartSm.trim() !== '' ? `pds-padding-inline-start-sm-${this.paddingInlineStartSm}` : ''}
-    ${this.paddingInlineStartMd !== undefined && this.paddingInlineStartMd.trim() !== '' ? `pds-padding-inline-start-md-${this.paddingInlineStartMd}` : ''}
-    ${this.paddingInlineStartLg !== undefined && this.paddingInlineStartLg.trim() !== '' ? `pds-padding-inline-start-lg-${this.paddingInlineStartLg}` : ''}
-    ${this.paddingInlineStartXl !== undefined && this.paddingInlineStartXl.trim() !== '' ? `pds-padding-inline-start-xl-${this.paddingInlineStartXl}` : ''}
-    ${this.paddingInlineEnd !== undefined && this.paddingInlineEnd.trim() !== '' ? `pds-padding-inline-end-${this.paddingInlineEnd}` : ''}
-    ${this.paddingInlineEndXs !== undefined && this.paddingInlineEndXs.trim() !== '' ? `pds-padding-inline-end-xs-${this.paddingInlineEndXs}` : ''}
-    ${this.paddingInlineEndSm !== undefined && this.paddingInlineEndSm.trim() !== '' ? `pds-padding-inline-end-sm-${this.paddingInlineEndSm}` : ''}
-    ${this.paddingInlineEndMd !== undefined && this.paddingInlineEndMd.trim() !== '' ? `pds-padding-inline-end-md-${this.paddingInlineEndMd}` : ''}
-    ${this.paddingInlineEndLg !== undefined && this.paddingInlineEndLg.trim() !== '' ? `pds-padding-inline-end-lg-${this.paddingInlineEndLg}` : ''}
-    ${this.paddingInlineEndXl !== undefined && this.paddingInlineEndXl.trim() !== '' ? `pds-padding-inline-end-xl-${this.paddingInlineEndXl}` : ''}
-    ${this.shadow !== undefined && this.shadow.trim() !== '' ? `pds-shadow-${this.shadow}` : ''}
-    ${this.size !== undefined && this.size.trim() !== '' ? `pds-box pds-box-${this.size}` : ''}
-    ${this.sizeXs !== undefined && this.sizeXs.trim() !== '' ? `pds-box-xs-${this.sizeXs}` : ''}
-    ${this.sizeSm !== undefined && this.sizeSm.trim() !== '' ? `pds-box-sm-${this.sizeSm}` : ''}
-    ${this.sizeMd !== undefined && this.sizeMd.trim() !== '' ? `pds-box-md-${this.sizeMd}` : ''}
-    ${this.sizeLg !== undefined && this.sizeLg.trim() !== '' ? `pds-box-lg-${this.sizeLg}` : ''}
-    ${this.sizeXl !== undefined && this.sizeXl.trim() !== '' ? `pds-box-xl-${this.sizeXl}` : ''}
+    ${this.flex != null && this.flex.trim() !== '' && ['none', 'grow', 'shrink'].includes(this.flex) ? `pds-box--flex-${this.flex}` : ''}
+    ${this.justifyContent != null && this.justifyContent.trim() !== '' ? `pds-justify-content-${this.justifyContent}` : ''}
+    ${this.justifyContentXs != null && this.justifyContentXs.trim() !== '' ? `pds-justify-content-xs-${this.justifyContentXs}` : ''}
+    ${this.justifyContentSm != null && this.justifyContentSm.trim() !== '' ? `pds-justify-content-sm-${this.justifyContentSm}` : ''}
+    ${this.justifyContentMd != null && this.justifyContentMd.trim() !== '' ? `pds-justify-content-md-${this.justifyContentMd}` : ''}
+    ${this.justifyContentLg != null && this.justifyContentLg.trim() !== '' ? `pds-justify-content-lg-${this.justifyContentLg}` : ''}
+    ${this.justifyContentXl != null && this.justifyContentXl.trim() !== '' ? `pds-justify-content-xl-${this.justifyContentXl}` : ''}
+    ${this.marginBlockStart != null && this.marginBlockStart.trim() !== '' ? `pds-margin-block-start-${this.marginBlockStart}` : ''}
+    ${this.marginBlockStartXs != null && this.marginBlockStartXs.trim() !== '' ? `pds-margin-block-start-xs-${this.marginBlockStartXs}` : ''}
+    ${this.marginBlockStartSm != null && this.marginBlockStartSm.trim() !== '' ? `pds-margin-block-start-sm-${this.marginBlockStartSm}` : ''}
+    ${this.marginBlockStartMd != null && this.marginBlockStartMd.trim() !== '' ? `pds-margin-block-start-md-${this.marginBlockStartMd}` : ''}
+    ${this.marginBlockStartLg != null && this.marginBlockStartLg.trim() !== '' ? `pds-margin-block-start-lg-${this.marginBlockStartLg}` : ''}
+    ${this.marginBlockStartXl != null && this.marginBlockStartXl.trim() !== '' ? `pds-margin-block-start-xl-${this.marginBlockStartXl}` : ''}
+    ${this.marginInlineStart != null && this.marginInlineStart.trim() !== '' ? `pds-margin-inline-start-${this.marginInlineStart}` : ''}
+    ${this.marginInlineStartXs != null && this.marginInlineStartXs.trim() !== '' ? `pds-margin-inline-start-xs-${this.marginInlineStartXs}` : ''}
+    ${this.marginInlineStartSm != null && this.marginInlineStartSm.trim() !== '' ? `pds-margin-inline-start-sm-${this.marginInlineStartSm}` : ''}
+    ${this.marginInlineStartMd != null && this.marginInlineStartMd.trim() !== '' ? `pds-margin-inline-start-md-${this.marginInlineStartMd}` : ''}
+    ${this.marginInlineStartLg != null && this.marginInlineStartLg.trim() !== '' ? `pds-margin-inline-start-lg-${this.marginInlineStartLg}` : ''}
+    ${this.marginInlineStartXl != null && this.marginInlineStartXl.trim() !== '' ? `pds-margin-inline-start-xl-${this.marginInlineStartXl}` : ''}
+    ${this.marginInlineEnd != null && this.marginInlineEnd.trim() !== '' ? `pds-margin-inline-end-${this.marginInlineEnd}` : ''}
+    ${this.marginInlineEndXs != null && this.marginInlineEndXs.trim() !== '' ? `pds-margin-inline-end-xs-${this.marginInlineEndXs}` : ''}
+    ${this.marginInlineEndSm != null && this.marginInlineEndSm.trim() !== '' ? `pds-margin-inline-end-sm-${this.marginInlineEndSm}` : ''}
+    ${this.marginInlineEndMd != null && this.marginInlineEndMd.trim() !== '' ? `pds-margin-inline-end-md-${this.marginInlineEndMd}` : ''}
+    ${this.marginInlineEndLg != null && this.marginInlineEndLg.trim() !== '' ? `pds-margin-inline-end-lg-${this.marginInlineEndLg}` : ''}
+    ${this.marginInlineEndXl != null && this.marginInlineEndXl.trim() !== '' ? `pds-margin-inline-end-xl-${this.marginInlineEndXl}` : ''}
+    ${this.marginBlockEnd != null && this.marginBlockEnd.trim() !== '' ? `pds-margin-block-end-${this.marginBlockEnd}` : ''}
+    ${this.marginBlockEndXs != null && this.marginBlockEndXs.trim() !== '' ? `pds-margin-block-end-xs-${this.marginBlockEndXs}` : ''}
+    ${this.marginBlockEndSm != null && this.marginBlockEndSm.trim() !== '' ? `pds-margin-block-end-sm-${this.marginBlockEndSm}` : ''}
+    ${this.marginBlockEndMd != null && this.marginBlockEndMd.trim() !== '' ? `pds-margin-block-end-md-${this.marginBlockEndMd}` : ''}
+    ${this.marginBlockEndLg != null && this.marginBlockEndLg.trim() !== '' ? `pds-margin-block-end-lg-${this.marginBlockEndLg}` : ''}
+    ${this.marginBlockEndXl != null && this.marginBlockEndXl.trim() !== '' ? `pds-margin-block-end-xl-${this.marginBlockEndXl}` : ''}
+    ${this.offset != null && this.offset.trim() !== '' ? `pds-box-offset-${this.offset}` : ''}
+    ${this.offsetXs != null && this.offsetXs.trim() !== '' ? `pds-box-offset-xs-${this.offsetXs}` : ''}
+    ${this.offsetSm != null && this.offsetSm.trim() !== '' ? `pds-box-offset-sm-${this.offsetSm}` : ''}
+    ${this.offsetMd != null && this.offsetMd.trim() !== '' ? `pds-box-offset-md-${this.offsetMd}` : ''}
+    ${this.offsetLg != null && this.offsetLg.trim() !== '' ? `pds-box-offset-lg-${this.offsetLg}` : ''}
+    ${this.offsetXl != null && this.offsetXl.trim() !== '' ? `pds-box-offset-xl-${this.offsetXl}` : ''}
+    ${this.padding != null && this.padding.trim() !== '' ? `pds-padding-${this.padding}` : ''}
+    ${this.paddingXs != null && this.paddingXs.trim() !== '' ? `pds-padding-xs-${this.paddingXs}` : ''}
+    ${this.paddingSm != null && this.paddingSm.trim() !== '' ? `pds-padding-sm-${this.paddingSm}` : ''}
+    ${this.paddingMd != null && this.paddingMd.trim() !== '' ? `pds-padding-md-${this.paddingMd}` : ''}
+    ${this.paddingLg != null && this.paddingLg.trim() !== '' ? `pds-padding-lg-${this.paddingLg}` : ''}
+    ${this.paddingXl != null && this.paddingXl.trim() !== '' ? `pds-padding-xl-${this.paddingXl}` : ''}
+    ${this.paddingBlockStart != null && this.paddingBlockStart.trim() !== '' ? `pds-padding-block-start-${this.paddingBlockStart}` : ''}
+    ${this.paddingBlockStartXs != null && this.paddingBlockStartXs.trim() !== '' ? `pds-padding-block-start-xs-${this.paddingBlockStartXs}` : ''}
+    ${this.paddingBlockStartSm != null && this.paddingBlockStartSm.trim() !== '' ? `pds-padding-block-start-sm-${this.paddingBlockStartSm}` : ''}
+    ${this.paddingBlockStartMd != null && this.paddingBlockStartMd.trim() !== '' ? `pds-padding-block-start-md-${this.paddingBlockStartMd}` : ''}
+    ${this.paddingBlockStartLg != null && this.paddingBlockStartLg.trim() !== '' ? `pds-padding-block-start-lg-${this.paddingBlockStartLg}` : ''}
+    ${this.paddingBlockStartXl != null && this.paddingBlockStartXl.trim() !== '' ? `pds-padding-block-start-xl-${this.paddingBlockStartXl}` : ''}
+    ${this.paddingBlockEnd != null && this.paddingBlockEnd.trim() !== '' ? `pds-padding-block-end-${this.paddingBlockEnd}` : ''}
+    ${this.paddingBlockEndXs != null && this.paddingBlockEndXs.trim() !== '' ? `pds-padding-block-end-xs-${this.paddingBlockEndXs}` : ''}
+    ${this.paddingBlockEndSm != null && this.paddingBlockEndSm.trim() !== '' ? `pds-padding-block-end-sm-${this.paddingBlockEndSm}` : ''}
+    ${this.paddingBlockEndMd != null && this.paddingBlockEndMd.trim() !== '' ? `pds-padding-block-end-md-${this.paddingBlockEndMd}` : ''}
+    ${this.paddingBlockEndLg != null && this.paddingBlockEndLg.trim() !== '' ? `pds-padding-block-end-lg-${this.paddingBlockEndLg}` : ''}
+    ${this.paddingBlockEndXl != null && this.paddingBlockEndXl.trim() !== '' ? `pds-padding-block-end-xl-${this.paddingBlockEndXl}` : ''}
+    ${this.paddingInlineStart != null && this.paddingInlineStart.trim() !== '' ? `pds-padding-inline-start-${this.paddingInlineStart}` : ''}
+    ${this.paddingInlineStartXs != null && this.paddingInlineStartXs.trim() !== '' ? `pds-padding-inline-start-xs-${this.paddingInlineStartXs}` : ''}
+    ${this.paddingInlineStartSm != null && this.paddingInlineStartSm.trim() !== '' ? `pds-padding-inline-start-sm-${this.paddingInlineStartSm}` : ''}
+    ${this.paddingInlineStartMd != null && this.paddingInlineStartMd.trim() !== '' ? `pds-padding-inline-start-md-${this.paddingInlineStartMd}` : ''}
+    ${this.paddingInlineStartLg != null && this.paddingInlineStartLg.trim() !== '' ? `pds-padding-inline-start-lg-${this.paddingInlineStartLg}` : ''}
+    ${this.paddingInlineStartXl != null && this.paddingInlineStartXl.trim() !== '' ? `pds-padding-inline-start-xl-${this.paddingInlineStartXl}` : ''}
+    ${this.paddingInlineEnd != null && this.paddingInlineEnd.trim() !== '' ? `pds-padding-inline-end-${this.paddingInlineEnd}` : ''}
+    ${this.paddingInlineEndXs != null && this.paddingInlineEndXs.trim() !== '' ? `pds-padding-inline-end-xs-${this.paddingInlineEndXs}` : ''}
+    ${this.paddingInlineEndSm != null && this.paddingInlineEndSm.trim() !== '' ? `pds-padding-inline-end-sm-${this.paddingInlineEndSm}` : ''}
+    ${this.paddingInlineEndMd != null && this.paddingInlineEndMd.trim() !== '' ? `pds-padding-inline-end-md-${this.paddingInlineEndMd}` : ''}
+    ${this.paddingInlineEndLg != null && this.paddingInlineEndLg.trim() !== '' ? `pds-padding-inline-end-lg-${this.paddingInlineEndLg}` : ''}
+    ${this.paddingInlineEndXl != null && this.paddingInlineEndXl.trim() !== '' ? `pds-padding-inline-end-xl-${this.paddingInlineEndXl}` : ''}
+    ${this.shadow != null && this.shadow.trim() !== '' ? `pds-shadow-${this.shadow}` : ''}
+    ${this.size != null && this.size.trim() !== '' ? `pds-box pds-box-${this.size}` : ''}
+    ${this.sizeXs != null && this.sizeXs.trim() !== '' ? `pds-box-xs-${this.sizeXs}` : ''}
+    ${this.sizeSm != null && this.sizeSm.trim() !== '' ? `pds-box-sm-${this.sizeSm}` : ''}
+    ${this.sizeMd != null && this.sizeMd.trim() !== '' ? `pds-box-md-${this.sizeMd}` : ''}
+    ${this.sizeLg != null && this.sizeLg.trim() !== '' ? `pds-box-lg-${this.sizeLg}` : ''}
+    ${this.sizeXl != null && this.sizeXl.trim() !== '' ? `pds-box-xl-${this.sizeXl}` : ''}
     ${this.size == undefined &&
             this.sizeSm == undefined &&
             this.sizeMd == undefined &&
@@ -153,7 +153,7 @@ export class PdsBox {
         const normalizedBorder = normalizeColorValue(this.borderColor);
         const boxInlineStyles = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (normalizedBackground && { '--color-background-box': normalizedBackground })), (normalizedBorder && { '--color-border-box': normalizedBorder })), (this.minHeight && { '--sizing-min-height-box': this.minHeight })), (this.minWidth && { '--sizing-min-width-box': this.minWidth })), (this.flex && !['none', 'grow', 'shrink'].includes(this.flex) && { 'flex': this.flex }));
         this.hostKeeper.record(boxClasses, boxInlineStyles);
-        return (h(Host, { key: 'dc4d939daf38b24ecbfa0eb0a95ab67b97a85665', class: boxClasses, style: boxInlineStyles }));
+        return (h(Host, { key: '8a1348247b5a4c546759232f0f155721798797e5', class: boxClasses, style: boxInlineStyles }));
     }
     static get is() { return "pds-box"; }
     static get originalStyleUrls() {

package/dist/collection/components/pds-checkbox/pds-checkbox.css

@@ -120,6 +120,10 @@ label {
 :host(.has-label-slot) label {
   align-items: center;
 }
+:host(.has-label-slot) label,
+:host(.has-label-slot) label > span {
+  min-width: 0;
+}
 :host(.has-label-slot) input {
   margin-block-start: 0;
 }

package/dist/collection/components/pds-checkbox/pds-checkbox.js

@@ -97,6 +97,18 @@ export class PdsCheckbox {
             this.checked = state === (this.value || 'on');
         }
     }
+    /**
+     * Form Associated Custom Elements API: Called when the form is disabled
+     */
+    formDisabledCallback(disabled) {
+        // Also fires when this element's own `disabled` attribute is merely present, even as the
+        // literal string "false" (a consumer's or React's attribute serialization can write that) —
+        // the platform treats any value as disabled, independent of fieldset state. A real disabled
+        // fieldset ancestor confirms this is genuinely that, not this element's own attribute.
+        if (disabled && !this.el.closest('fieldset[disabled]'))
+            return;
+        this.disabled = disabled;
+    }
     componentWillLoad() {
         this.inheritedAttributes = Object.assign({}, inheritAriaAttributes(this.el));
         this.updateHasLabelSlot();
@@ -104,9 +116,9 @@ export class PdsCheckbox {
     render() {
         const hostClass = this.classNames();
         this.hostKeeper.record(hostClass);
-        return (h(Host, { key: '2d63feb42a7fa2a0121c1b25625ff7c6b6844fa9', class: hostClass }, h("label", { key: '07158e232a025c978c2725bdd938ce8254a244ac', htmlFor: this.componentId }, h("input", Object.assign({ key: 'c1f47d9de63fef8e373f6b76efb1386cb7ab4921', type: "checkbox", "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage, this.errorMessage), "aria-invalid": this.invalid ? "true" : undefined, id: this.componentId, indeterminate: this.indeterminate, name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onChange: this.handleCheckboxChange, onInput: this.handleInput }, this.inheritedAttributes)), h("span", { key: 'e04db0b2a5600e3da74fb9857a276547f602c7eb', class: this.hideLabel ? 'visually-hidden' : '' }, h("slot", { key: '3af6b6bf89e9ab74821f63753843fca575aaea2f', name: "label", onSlotchange: this.updateHasLabelSlot }), !this.hasLabelSlot && this.label)), this.helperMessage &&
-            h("div", { key: '78c2f5f6b0cdc93facee367662ba190906a5421c', class: 'pds-checkbox__message', id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
-            h("div", { key: 'd776e3539d2ff057c5a2471df4069df8fc3af864', class: `pds-checkbox__message pds-checkbox__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: 'f74131e597bc37569062b683b118b676af418a28', icon: danger, size: "small" }), this.errorMessage)));
+        return (h(Host, { key: 'bbe09a5e9eb55f62b2921b09a04ddc9476a871ae', class: hostClass }, h("label", { key: 'fa1856d9306eb8c0c19618ea5e2619ea20c3c51d', htmlFor: this.componentId }, h("input", Object.assign({ key: '8537d97a8e69a17d0d563306dac179e393885dda', type: "checkbox", "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage, this.errorMessage), "aria-invalid": this.invalid ? "true" : undefined, id: this.componentId, indeterminate: this.indeterminate, name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onChange: this.handleCheckboxChange, onInput: this.handleInput }, this.inheritedAttributes)), h("span", { key: 'e523922889c80a2d18243cb560cd855bab95803d', class: this.hideLabel ? 'visually-hidden' : '' }, h("slot", { key: 'b6ff34ecbc346d254a0211bfa610823feedb486b', name: "label", onSlotchange: this.updateHasLabelSlot }), !this.hasLabelSlot && this.label)), this.helperMessage &&
+            h("div", { key: '55dcca850dff0aa93d9ba63d6827d9155ac35dab', class: 'pds-checkbox__message', id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
+            h("div", { key: '5af843679994d29f084d41e90e41e0939c951063', class: `pds-checkbox__message pds-checkbox__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: '10f7efe5d4b252d9dea6f398eff973ba32506898', icon: danger, size: "small" }), this.errorMessage)));
     }
     static get is() { return "pds-checkbox"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pds-chip/pds-chip.js

@@ -13,6 +13,26 @@ const SENTIMENT_DOT_COLORS = {
     success: 'var(--pine-chip-color-success-dot)',
     warning: 'var(--pine-chip-color-warning-dot)',
 };
+// Controls a chip can sit inside that already take focus, so a clipped label adds no tab stop of its own.
+// Not any `[tabindex]`: a focusable scroll region full of chips would show every chip's tooltip at once.
+const FOCUSABLE_WRAPPER = 'a[href], button, summary, pds-button, pds-link, pds-tab, pds-dropdown-menu-item, [role="option"]';
+// Beside the listbox and level with the option, so the tooltip never covers the other options.
+function besideListbox(wrapper) {
+    const option = (wrapper === null || wrapper === void 0 ? void 0 : wrapper.matches('[role="option"]')) ? wrapper : null;
+    const listbox = option === null || option === void 0 ? void 0 : option.closest('[role="listbox"]');
+    if (!option || !listbox)
+        return {};
+    return {
+        placement: 'right',
+        reference: {
+            getBoundingClientRect: () => {
+                const { top, bottom, height } = option.getBoundingClientRect();
+                const { left, right, width } = listbox.getBoundingClientRect();
+                return { x: left, y: top, top, left, bottom, right, width, height };
+            },
+        },
+    };
+}
 /**
  * @slot (default) - The chip's label text.
  * @part button
@@ -51,6 +71,11 @@ export class PdsChip {
     }
     connectedCallback() {
         this.hostKeeper.connect(this.el);
+        // A moved chip reconnects without re-rendering, so componentDidRender won't re-bind what
+        // disconnectedCallback tore down. Before the first render there's no label, and it binds there.
+        if (this.maxWidth && this.labelTextEl) {
+            this.initTruncationTooltip();
+        }
     }
     // Bind (and re-bind) here, not just on load: changing variant/size remounts
     // the label span, so the tooltip has to re-attach to the current node or it
@@ -75,16 +100,15 @@ export class PdsChip {
     initTruncationTooltip() {
         this.destroyTruncationTooltip();
         if (this.labelTextEl) {
-            this.truncationCleanup = setupTruncationTooltip({
-                hostEl: this.el,
-                contentEl: this.labelTextEl,
-                getTooltipText: () => this.el.textContent || '',
+            const wrapper = this.el.closest(FOCUSABLE_WRAPPER);
+            this.truncationCleanup = setupTruncationTooltip(Object.assign({ hostEl: this.el, contentEl: this.labelTextEl, getTooltipText: () => this.el.textContent || '',
                 // The dropdown variant's label span already sits inside
                 // `<button class="pds-chip__button">`, which is already focusable and
                 // bubbles focusin to the host — a tabindex on the span too would nest
                 // a second tab stop inside the button.
-                manageTabIndex: this.effectiveVariant !== 'dropdown',
-            });
+                manageTabIndex: this.effectiveVariant !== 'dropdown' && !wrapper,
+                // A wrapping control sits outside the host, so its focus never reaches the host's listener.
+                focusEl: wrapper !== null && wrapper !== void 0 ? wrapper : this.el }, besideListbox(wrapper)));
             this.tooltipBoundEl = this.labelTextEl;
         }
     }
@@ -141,7 +165,8 @@ export class PdsChip {
         // label span already sits inside `<button class="pds-chip__button">`,
         // which is already focusable and bubbles focusin to the host, so
         // initTruncationTooltip passes `manageTabIndex: false` there to avoid
-        // nesting a second tab stop inside the button.
+        // nesting a second tab stop inside the button. The same goes for a chip
+        // inside a consumer's own focusable control (FOCUSABLE_WRAPPER).
         const chipContent = isDropdown ? (h("button", { class: "pds-chip__button", type: "button", part: "button" }, this.icon && h("pds-icon", { class: "pds-chip__icon", part: "icon", icon: this.icon, size: this.iconSize, "aria-hidden": "true" }), showDot && h("i", { class: "pds-chip__dot", part: "dot", "aria-hidden": "true" }), h("span", { class: "pds-chip__label-text", ref: (el) => (this.labelTextEl = el) }, h("slot", null)), h("pds-icon", { icon: downSmall, size: this.iconSize, "aria-hidden": "true" }))) : (h("span", { class: "pds-chip__label" }, this.icon && h("pds-icon", { class: "pds-chip__icon", part: "icon", icon: this.icon, size: this.iconSize, "aria-hidden": "true" }), showDot && h("i", { class: "pds-chip__dot", part: "dot", "aria-hidden": "true" }), h("span", { class: "pds-chip__label-text", ref: (el) => (this.labelTextEl = el) }, h("slot", null))));
         return chipContent;
     }
@@ -215,7 +240,7 @@ export class PdsChip {
         const hostClass = this.classNames();
         const hostStyles = this.hostStyles;
         this.hostKeeper.record(hostClass, hostStyles);
-        return (h(Host, { key: '63e00360276ca3941fb543b2c35211a709fbfc2b', class: hostClass, id: this.componentId, style: hostStyles }, this.setChipContent(), this.effectiveVariant === 'tag' && this.renderCloseButton()));
+        return (h(Host, { key: 'f82d84a7f0a4f1c980d47bf75cd4ffeef042607d', class: hostClass, id: this.componentId, style: hostStyles }, this.setChipContent(), this.effectiveVariant === 'tag' && this.renderCloseButton()));
     }
     static get is() { return "pds-chip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pds-chip/stories/pds-chip.stories.js

@@ -200,3 +200,20 @@ TruncatedLabel.args = {
   variant: "tag",
   maxWidth: "200px",
 }
+
+const InButtonTemplate = (args) => html`
+<pds-button variant="unstyled">
+  <pds-chip
+    sentiment="${args.sentiment}"
+    variant="${args.variant}"
+    max-width="${args.maxWidth}"
+  >${args.slot}</pds-chip>
+</pds-button>`;
+
+export const TruncatedLabelInButton = InButtonTemplate.bind();
+TruncatedLabelInButton.args = {
+  sentiment: "neutral",
+  slot: "A very long label that would otherwise overflow the chip",
+  variant: "text",
+  maxWidth: "200px",
+}

package/dist/collection/components/pds-combobox/pds-combobox.js

@@ -649,6 +649,18 @@ export class PdsCombobox {
             this.internals = this.el.attachInternals();
         }
     }
+    /**
+     * Form Associated Custom Elements API: Called when the form is disabled
+     */
+    formDisabledCallback(disabled) {
+        // Also fires when this element's own `disabled` attribute is merely present, even as the
+        // literal string "false" (a consumer's or React's attribute serialization can write that) —
+        // the platform treats any value as disabled, independent of fieldset state. A real disabled
+        // fieldset ancestor confirms this is genuinely that, not this element's own attribute.
+        if (disabled && !this.el.closest('fieldset[disabled]'))
+            return;
+        this.disabled = disabled;
+    }
     componentWillLoad() {
         this.originalSearchEmitter = this.pdsComboboxSearch;
         this.updateOptions();
@@ -1937,7 +1949,8 @@ export class PdsCombobox {
         return this.selectedOption ? this.selectedOption.value : null;
     }
     /**
-     * Clears the selected value and resets the component.
+     * Clears the selected value and resets the component. Works while disabled too, as setting a
+     * native control's value from script does.
      */
     async clear() {
         const hadValue = this.value !== '' || this.displayText !== '';
@@ -2514,13 +2527,13 @@ export class PdsCombobox {
         ]
             .filter(Boolean)
             .join(' ');
-        return (h(Host, { key: 'c3bda161c67bab75f306c7f38435d279e5a88756', "aria-disabled": this.disabled ? 'true' : null }, h("div", { key: '92b3f83c14a7296b3b2671eaef538a15743f695f', class: "pds-combobox", tabIndex: -1, onFocusout: this.onComboboxFocusOut, part: "combobox" }, this.hasVisibleLabel && (h("label", { key: '4a2dba09dd6db9893e21346b861b4c6cb891112b', htmlFor: this.trigger === 'input' ? this.componentId : undefined, id: this.labelId, class: "pds-combobox__label", onClick: this.onLabelClick }, this.label)), this.trigger === 'input' ? (h("div", { class: "pds-combobox__input-wrapper", style: { width: this.triggerWidth } }, h("input", { ref: el => {
+        return (h(Host, { key: 'ead770a3b7ba531a1cfdc6b02aef6d7159481ed0', "aria-disabled": this.disabled ? 'true' : null }, h("div", { key: '3ca6fd299acd1db8a0e476eee5f7606bc6153625', class: "pds-combobox", tabIndex: -1, onFocusout: this.onComboboxFocusOut, part: "combobox" }, this.hasVisibleLabel && (h("label", { key: '44c72d099c5ccddce18400b9d3c66158f485de05', htmlFor: this.trigger === 'input' ? this.componentId : undefined, id: this.labelId, class: "pds-combobox__label", onClick: this.onLabelClick }, this.label)), this.trigger === 'input' ? (h("div", { class: "pds-combobox__input-wrapper", style: { width: this.triggerWidth } }, h("input", { ref: el => {
                 this.inputEl = el;
                 this.triggerEl = el;
             }, class: {
                 'pds-combobox__input': true,
                 'pds-combobox__input--invalid': this.isInvalid(),
-            }, type: "text", role: "combobox", "aria-autocomplete": "list", "aria-haspopup": this.inputPopupRole === 'tree' ? 'tree' : undefined, "aria-controls": this.listboxId, "aria-describedby": assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-activedescendant": this.usesPanelSearch ? undefined : this.activeDescendantId, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.hideLabel ? this.label : undefined, id: this.componentId, value: this.displayText, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput, onClick: this.handleInputClick, onKeyDown: this.handleKeyDown, autocomplete: "off", part: "input" }), h("pds-icon", { icon: "enlarge", "aria-hidden": "true", class: "pds-combobox__input-icon" }))) : this.trigger === 'chip' ? (h("div", { class: this.getChipTriggerClass(), style: { width: this.triggerWidth }, role: this.usesPanelSearch ? 'button' : 'combobox', "aria-haspopup": this.triggerPopupRole, "aria-controls": this.listboxId, "aria-describedby": assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-activedescendant": this.usesPanelSearch ? undefined : this.activeDescendantId, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.triggerAriaLabel, "aria-labelledby": this.triggerLabelledBy, id: this.componentId, tabIndex: this.disabled ? -1 : 0, onClick: this.onButtonTriggerClick, "data-layout": this.customTriggerContent, onKeyDown: this.onButtonTriggerKeyDown, onKeyUp: this.onButtonTriggerKeyUp, ref: el => (this.triggerEl = el), part: "chip-trigger" }, this.renderChipTriggerContent())) : (h("div", { class: triggerClass, style: { width: this.triggerWidth }, role: this.usesPanelSearch ? 'button' : 'combobox', "aria-haspopup": this.triggerPopupRole, "aria-controls": this.listboxId, "aria-describedby": assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-activedescendant": this.usesPanelSearch ? undefined : this.activeDescendantId, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.triggerAriaLabel, "aria-labelledby": this.triggerLabelledBy, id: this.componentId, tabIndex: this.disabled ? -1 : 0, onClick: this.onButtonTriggerClick, "data-layout": this.customTriggerContent, onKeyDown: this.onButtonTriggerKeyDown, onKeyUp: this.onButtonTriggerKeyUp, ref: el => (this.triggerEl = el), part: "button-trigger" }, this.renderButtonTriggerContent())), this.renderMessages(), h("div", { key: 'b8d358339bb26037b6c3c464bd4e13fe978f7857', style: { display: 'none' } }, h("slot", { key: '4aa4c2b8f2b57e13d1e958cc745c61e39e800529', onSlotchange: () => this.updateOptions() })), this.renderDropdown(), this.groupDisplay !== 'inline' && [
+            }, type: "text", role: "combobox", "aria-autocomplete": "list", "aria-haspopup": this.inputPopupRole === 'tree' ? 'tree' : undefined, "aria-controls": this.listboxId, "aria-describedby": assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-activedescendant": this.usesPanelSearch ? undefined : this.activeDescendantId, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.hideLabel ? this.label : undefined, id: this.componentId, value: this.displayText, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput, onClick: this.handleInputClick, onKeyDown: this.handleKeyDown, autocomplete: "off", part: "input" }), h("pds-icon", { icon: "enlarge", "aria-hidden": "true", class: "pds-combobox__input-icon" }))) : this.trigger === 'chip' ? (h("div", { class: this.getChipTriggerClass(), style: { width: this.triggerWidth }, role: this.usesPanelSearch ? 'button' : 'combobox', "aria-haspopup": this.triggerPopupRole, "aria-controls": this.listboxId, "aria-describedby": assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-activedescendant": this.usesPanelSearch ? undefined : this.activeDescendantId, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.triggerAriaLabel, "aria-labelledby": this.triggerLabelledBy, id: this.componentId, tabIndex: this.disabled ? -1 : 0, onClick: this.onButtonTriggerClick, "data-layout": this.customTriggerContent, onKeyDown: this.onButtonTriggerKeyDown, onKeyUp: this.onButtonTriggerKeyUp, ref: el => (this.triggerEl = el), part: "chip-trigger" }, this.renderChipTriggerContent())) : (h("div", { class: triggerClass, style: { width: this.triggerWidth }, role: this.usesPanelSearch ? 'button' : 'combobox', "aria-haspopup": this.triggerPopupRole, "aria-controls": this.listboxId, "aria-describedby": assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-activedescendant": this.usesPanelSearch ? undefined : this.activeDescendantId, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.triggerAriaLabel, "aria-labelledby": this.triggerLabelledBy, id: this.componentId, tabIndex: this.disabled ? -1 : 0, onClick: this.onButtonTriggerClick, "data-layout": this.customTriggerContent, onKeyDown: this.onButtonTriggerKeyDown, onKeyUp: this.onButtonTriggerKeyUp, ref: el => (this.triggerEl = el), part: "button-trigger" }, this.renderButtonTriggerContent())), this.renderMessages(), h("div", { key: '349af9dc6fdae018d4443b178e21b1627fcc85ca', style: { display: 'none' } }, h("slot", { key: '9af42db6d08f148b7d7b5e4b3199f7c9af7699a4', onSlotchange: () => this.updateOptions() })), this.renderDropdown(), this.groupDisplay !== 'inline' && [
             h("span", { key: "drill-status", class: "visually-hidden", role: "status", "aria-live": "polite" }, this.isOpen && this.effectiveGroupDisplay === 'drill-in' && this.openGroup !== null ? this.openGroup.label : ''),
             // Its own region: sharing one, revealing a row then opening it would leave the text the
             // same, and opening the group would go unannounced.
@@ -3545,7 +3558,7 @@ export class PdsCombobox {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "Clears the selected value and resets the component.",
+                    "text": "Clears the selected value and resets the component. Works while disabled too, as setting a\nnative control's value from script does.",
                     "tags": []
                 }
             }

package/dist/collection/components/pds-combobox/stories/pds-combobox.stories.js

@@ -40,7 +40,7 @@ const BaseTemplate = (args) => html`
   name=${args.name}
   custom-option-layouts=${args.customOptionLayouts}
   custom-trigger-content=${args.customTriggerContent}
-  disabled=${args.disabled}
+  ?disabled=${args.disabled}
   dropdown-placement=${args.dropdownPlacement}
   dropdown-mount=${args.dropdownMount}
   dropdown-width=${args.dropdownWidth}

package/dist/collection/components/pds-copytext/pds-copytext.js

@@ -40,6 +40,11 @@ export class PdsCopytext {
     }
     connectedCallback() {
         this.hostKeeper.connect(this.el);
+        // componentDidLoad runs once, so a moved element re-binds here what disconnectedCallback tore
+        // down. Before the first render there's no valueSpanEl yet, and componentDidLoad binds it.
+        if (this.truncate && this.valueSpanEl) {
+            this.initTruncationTooltip();
+        }
     }
     restoreBorderDefault(newValue) {
         this.border = restoreReflectedDefault(this.el, 'border', newValue, true);
@@ -102,7 +107,7 @@ export class PdsCopytext {
     render() {
         const hostClass = this.classNames();
         this.hostKeeper.record(hostClass);
-        return (h(Host, { key: 'd9bd40af6e435d606841cb551341eab33c5983b7', class: hostClass, id: this.componentId }, h("pds-button", { key: '7a42b32678fccb2cbe0d7a68a5da6d5fe5276a4a', type: "button", variant: "unstyled", onClick: this.handleClick }, h("span", { key: '732db283b8075ebad8e1daff70692bac2978aade', ref: (el) => this.valueSpanEl = el }, this.value), h("pds-icon", { key: 'ebfd34b9b5a47b78783302ce97d752af09e3f3e3', "aria-hidden": "true", icon: copyIcon, size: "16px" }))));
+        return (h(Host, { key: 'a3517b135fc3e3677e30b6ad5811c1170a819b65', class: hostClass, id: this.componentId }, h("pds-button", { key: '02f56bed02ed3963a3d80a92148d6619a845224a', type: "button", variant: "unstyled", onClick: this.handleClick }, h("span", { key: '95fd1284e3d227b74dab613eb71f5385c3a0be29', ref: (el) => this.valueSpanEl = el }, this.value), h("pds-icon", { key: '21af67a8c9165e56d2d2b0cf19df7c7e3f290c72', "aria-hidden": "true", icon: copyIcon, size: "16px" }))));
     }
     static get is() { return "pds-copytext"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pds-drawer/pds-drawer.css

@@ -12,6 +12,10 @@
   }
 }
 
+.pds-drawer__modal:not(.pds-drawer__modal--modal) > .pds-modal__backdrop > * {
+  pointer-events: auto;
+}
+
 .pds-drawer__modal > .pds-modal__backdrop[aria-modal]::before {
   content: none;
 }

package/dist/collection/components/pds-dropdown-menu/pds-dropdown-menu-item/pds-dropdown-menu-item.js

@@ -60,7 +60,7 @@ export class PdsDropdownMenuItem {
         });
     }
     renderElement() {
-        if (this.href !== undefined) {
+        if (this.href != null) {
             return (h("pds-link", { download: this.download, href: this.disabled ? null : this.href, external: this.external, target: this.target, class: {
                     'pds-dropdown-menu-item__content': true,
                     'has-focus': this.hasFocus
@@ -72,7 +72,7 @@ export class PdsDropdownMenuItem {
             }, tabIndex: this.disabled ? -1 : 0, type: "button", part: "button", onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur, disabled: this.disabled, "aria-disabled": this.disabled ? 'true' : null }, h("slot", null)));
     }
     render() {
-        return (h(Host, { key: '33bd645d7c9547e3fd07429cf795302e6a482296', id: this.componentId, class: { 'is-disabled': this.disabled, 'destructive': !this.disabled && this.destructive }, onClick: () => !this.disabled && this.handleClick(), role: "none", tabIndex: -1, "aria-disabled": this.disabled ? 'true' : null }, this.renderElement()));
+        return (h(Host, { key: '2d499a06768bdc4b9a34774d16c1f1e10804b3d5', id: this.componentId, class: { 'is-disabled': this.disabled, 'destructive': !this.disabled && this.destructive }, onClick: () => !this.disabled && this.handleClick(), role: "none", tabIndex: -1, "aria-disabled": this.disabled ? 'true' : null }, this.renderElement()));
     }
     static get is() { return "pds-dropdown-menu-item"; }
     static get encapsulation() { return "shadow"; }