@roadtrip/components 3.32.4 → 3.33.0

package/dist/collection/components/collapse/collapse.stories.js

@@ -8,92 +8,102 @@ export default {
   argTypes: {
     'is-open': {
       control: 'boolean',
+      description: 'Defines whether the collapse is open or closed.',
     },
     centered: {
       control: 'boolean',
+      description: 'Centers the expand/collapse button.',
     },
     'show-less': {
       control: 'text',
+      description: 'Label for the button when content is expanded.',
+      table: {
+        defaultValue: { summary: 'show less' },
+      },
     },
     'show-more': {
       control: 'text',
+      description: 'Label for the button when content is collapsed.',
+      table: {
+        defaultValue: { summary: 'show more' },
+      },
     },
     ' ': {
       control: 'text',
+      description: 'Expanded content of the collapse component.',
     },
     'collapsed-content': {
       control: 'text',
+      description: 'Content displayed when the collapse is closed.',
     },
+    // 🔹 Ajout des CSS Variables pour personnalisation
     '--btn-padding-start': {
-      table: {
-        defaultValue: { summary: '1rem' },
-      },
-      control: {
-        type: null,
-      },
+      table: { defaultValue: { summary: '1rem' } },
+      control: 'text',
+      description: 'Padding at the start of the button.',
     },
     '--btn-padding-end': {
-      table: {
-        defaultValue: { summary: '1rem' },
-      },
-      control: {
-        type: null,
-      },
+      table: { defaultValue: { summary: '1rem' } },
+      control: 'text',
+      description: 'Padding at the end of the button.',
     },
     '--btn-margin-bottom': {
-      table: {
-        defaultValue: { summary: '1rem' },
-      },
-      control: {
-        type: null,
-      },
+      table: { defaultValue: { summary: '1rem' } },
+      control: 'text',
+      description: 'Margin below the button.',
     },
     '--btn-font-size': {
-      table: {
-        defaultValue: { summary: '1rem' },
-      },
-      control: {
-        type: null,
-      },
+      table: { defaultValue: { summary: '1rem' } },
+      control: 'text',
+      description: 'Font size of the button text.',
     },
     '--max-height': {
-      table: {
-        defaultValue: { summary: '500px' },
-      },
-      control: {
-        type: null,
-      },
+      table: { defaultValue: { summary: '500px' } },
+      control: 'text',
+      description: 'Maximum height of the collapse content when expanded.',
     },
   },
   args: {
-    'is-open': null,
-    centered: null,
+    'is-open': false,
+    centered: false,
     'show-less': 'show less',
     'show-more': 'show more',
     ' ': `<ul class="m-0">
-    <li>Car tire 205/55 R16 91 V</li>
-    <li>Good traction on dry and wet soils.</li>
-    <li>Reduced risk of aquaplaning.</li>
-    <li>Reduced braking distances.</li>
-  </ul>`,
+      <li>Car tire 205/55 R16 91 V</li>
+      <li>Good traction on dry and wet soils.</li>
+      <li>Reduced risk of aquaplaning.</li>
+      <li>Reduced braking distances.</li>
+    </ul>`,
     'collapsed-content': `<ul class="m-0">
-    <li>Specific Homologation : <b>non</b></li>
-    <li>XL : <b>non</b></li>
-    <li>Runflat : <b>non</b></li>
-    <li>Seal : <b>non</b></li>
-    <li>Various tire characteristics : <b>MFS</b></li>
-    <li>Tire profile : <b>Energy saver</b></li>
-  </ul>`,
+      <li>Specific Homologation: <b>non</b></li>
+      <li>XL: <b>non</b></li>
+      <li>Runflat: <b>non</b></li>
+      <li>Seal: <b>non</b></li>
+      <li>Various tire characteristics: <b>MFS</b></li>
+      <li>Tire profile: <b>Energy saver</b></li>
+    </ul>`,
   },
 };
 
 const Template = (args) => html`
-<road-collapse is-open="${ifDefined(args['is-open'])}" centered="${ifDefined(args.centered)}" show-more="${args['show-more']}" show-less="${args['show-less']}">
-  ${unsafeHTML(args[' '])}
-  <div slot="collapsed-content">
-    ${unsafeHTML(args['collapsed-content'])}
-  </div>
-</road-collapse>
+  <road-collapse 
+    ?is-open="${args['is-open']}" 
+    ?centered="${args.centered}" 
+    show-more="${ifDefined(args['show-more'])}" 
+    show-less="${ifDefined(args['show-less'])}"
+    style="
+      --btn-padding-start: ${ifDefined(args['--btn-padding-start'])};
+      --btn-padding-end: ${ifDefined(args['--btn-padding-end'])};
+      --btn-margin-bottom: ${ifDefined(args['--btn-margin-bottom'])};
+      --btn-font-size: ${ifDefined(args['--btn-font-size'])};
+      --max-height: ${ifDefined(args['--max-height'])};
+    "
+  >
+    ${unsafeHTML(args[' '])}
+    <div slot="collapsed-content">
+      ${unsafeHTML(args['collapsed-content'])}
+    </div>
+  </road-collapse>
 `;
 
 export const Playground = Template.bind({});
@@ -137,34 +147,34 @@ VehicleTypes.args = {
     </road-row>
   </road-grid>`,
   'collapsed-content': `<road-grid>
-      <road-row>
-        <road-col class="col-6 col-md-4 col-lg-3">
-          <road-card button value="scooter">
-            <road-icon name="vehicle-scooter" size="3x" aria-hidden="true"></road-icon>
-            <road-label>Scooter</road-label>
-          </road-card>
-        </road-col>
-        <road-col class="col-6 col-md-4 col-lg-3">
-          <road-card button value="competition">
-            <road-icon name="vehicle-rally" size="3x" aria-hidden="true"></road-icon>
-            <road-label>Compétition</road-label>
-          </road-card>
-        </road-col>
-        <road-col class="col-6 col-md-4 col-lg-3">
-          <road-card button value="colletion">
-            <road-icon name="vehicle-collector" size="3x" aria-hidden="true"></road-icon>
-            <road-label>Colletion</road-label>
-          </road-card>
-        </road-col>
-        <road-col class="col-6 col-md-4 col-lg-3">
-          <road-card button value="quad">
-            <road-icon name="vehicle-quad" size="3x" aria-hidden="true"></road-icon>
-            <road-label>Quad</road-label>
-          </road-card>
-        </road-col>
-      </road-row>
-    </road-grid>`,
-},
+    <road-row>
+      <road-col class="col-6 col-md-4 col-lg-3">
+        <road-card button value="scooter">
+          <road-icon name="vehicle-scooter" size="3x" aria-hidden="true"></road-icon>
+          <road-label>Scooter</road-label>
+        </road-card>
+      </road-col>
+      <road-col class="col-6 col-md-4 col-lg-3">
+        <road-card button value="competition">
+          <road-icon name="vehicle-rally" size="3x" aria-hidden="true"></road-icon>
+          <road-label>Compétition</road-label>
+        </road-card>
+      </road-col>
+      <road-col class="col-6 col-md-4 col-lg-3">
+        <road-card button value="collection">
+          <road-icon name="vehicle-collector" size="3x" aria-hidden="true"></road-icon>
+          <road-label>Collection</road-label>
+        </road-card>
+      </road-col>
+      <road-col class="col-6 col-md-4 col-lg-3">
+        <road-card button value="quad">
+          <road-icon name="vehicle-quad" size="3x" aria-hidden="true"></road-icon>
+          <road-label>Quad</road-label>
+        </road-card>
+      </road-col>
+    </road-row>
+  </road-grid>`,
+};
 VehicleTypes.parameters = {
   backgrounds: {
     default: 'grey',

package/dist/collection/components/content-card/content-card.stories.js

@@ -5,37 +5,42 @@ import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
 export default {
   title: 'Listing/ContentCard',
   component: 'road-content-card',
-  backgrounds: {
-    default: 'grey',
+  parameters: {
+    backgrounds: {
+      default: 'grey',
+    },
   },
   argTypes: {
     label: {
       control: 'text',
+      description: 'Title text displayed in the card.',
     },
     description: {
       control: 'text',
+      description: 'Main description inside the card.',
     },
     ' ': {
       control: 'text',
+      description: 'Slot for additional content, such as buttons or links.',
     },
     'inset-image': {
       control: 'boolean',
+      description: 'If true, the image is inset within the card.',
     },
   },
   args: {
     label: `Lorem ipsum`,
-    description: `Elevate your car's performance with Norauto's all-in-one maintenance kit. `,
-    ' ': `<road-button color="primary" class="mt-8 mb-0" expand="true" outline="true">Label</road-button> <road-button color="primary" class="mt-8 mb-0 mr-0" expand="true">
-    Add to cart
-  </road-button>`,
+    description: `Elevate your car's performance with Norauto's all-in-one maintenance kit.`,
+    ' ': `
+      <road-button color="primary" class="mt-8 mb-0" expand="true" outline="true">Label</road-button>
+      <road-button color="primary" class="mt-8 mb-0 mr-0" expand="true">Add to cart</road-button>
+    `,
     'inset-image': false,
   },
 };
 
-
-
-export const Template = (args) => html`
-<road-content-card inset-image="${ifDefined(args['inset-image'])}">
+const Template = (args) => html`
+<road-content-card ?inset-image="${args['inset-image']}">
   <div slot="label">
     ${unsafeHTML(args.label)}
   </div>
@@ -44,4 +49,18 @@ export const Template = (args) => html`
   </div>
   ${unsafeHTML(args[' '])}
 </road-content-card>
-`;
+`;
+
+export const Playground = Template.bind({});
+
+export const WithInsetImage = Template.bind({});
+WithInsetImage.args = {
+  'inset-image': true,
+};
+
+export const CustomContent = Template.bind({});
+CustomContent.args = {
+  label: 'Premium Car Wax',
+  description: 'Protect your car’s paint with our long-lasting premium wax formula.',
+  ' ': `<road-button color="secondary" class="mt-8 mb-0" expand="true">Learn more</road-button>`,
+};

package/dist/collection/components/counter/counter.stories.js

@@ -12,38 +12,56 @@ export default {
   argTypes: {
     'input-id': {
       control: 'text',
+      description: 'Unique identifier for the input field.',
     },
     size: {
       options: ['sm', 'md', 'lg'],
-      control: {
-        type: 'select',
+      control: { type: 'select' },
+      description: 'Defines the size of the counter.',
+      table: {
+        defaultValue: { summary: 'md' },
       },
     },
     min: {
       control: 'number',
+      description: 'Minimum value allowed for the counter.',
+      table: {
+        defaultValue: { summary: 1 },
+      },
     },
     max: {
       control: 'number',
+      description: 'Maximum value allowed for the counter.',
+      table: {
+        defaultValue: { summary: 20 },
+      },
     },
     step: {
       control: 'number',
+      description: 'Step interval for increasing or decreasing the counter value.',
+      table: {
+        defaultValue: { summary: 1 },
+      },
     },
     value: {
       control: 'number',
+      description: 'Current value of the counter.',
+      table: {
+        defaultValue: { summary: 1 },
+      },
     },
     dustbin: {
       control: 'boolean',
+      description: 'Displays a delete (dustbin) icon when set to `true`.',
     },
     readonly: {
       control: 'boolean',
+      description: 'Prevents editing the value when set to `true`.',
     },
     '--counter-margin-bottom': {
-      table: {
-        defaultValue: { summary: '1rem' },
-      },
-      control: {
-        type: null,
-      },
+      table: { defaultValue: { summary: '1rem' } },
+      control: 'text',
+      description: 'Defines the margin-bottom of the counter.',
     },
   },
   args: {
@@ -63,10 +81,11 @@ const Template = (args) => html`
     max="${ifDefined(args.max)}" 
     step="${ifDefined(args.step)}" 
     value="${ifDefined(args.value)}"
-    dustbin="${ifDefined(args.dustbin)}"
+    ?dustbin="${args.dustbin}"
+    ?readonly="${args.readonly}"
     input-id="${ifDefined(args['input-id'])}"
-    readonly="${ifDefined(args.readonly)}"
-    ></road-counter>
+    style="--counter-margin-bottom: ${ifDefined(args['--counter-margin-bottom'])};"
+  ></road-counter>
 `;
 
 export const Playground = Template.bind({});
@@ -80,3 +99,13 @@ export const Small = Template.bind({});
 Small.args = {
   size: 'sm',
 };
+
+export const ReadOnly = Template.bind({});
+ReadOnly.args = {
+  readonly: true,
+};
+
+export const WithDustbin = Template.bind({});
+WithDustbin.args = {
+  dustbin: true,
+};

package/dist/collection/components/dialog/dialog.stories.js

@@ -18,110 +18,96 @@ export default {
   argTypes: {
     'is-open': {
       control: 'boolean',
+      description: 'Defines whether the dialog is open or closed.',
     },
     'has-close-icon': {
       control: 'boolean',
+      description: 'Displays a close icon in the dialog header.',
     },
     color: {
       options: ['info', 'success', 'warning', 'danger'],
-      control: {
-        type: 'radio',
-      },
+      control: { type: 'radio' },
+      description: 'Sets the color theme of the dialog.',
     },
     icon: {
       options: list,
-      control: {
-        type: 'select',
-      },
+      control: { type: 'select' },
+      description: 'Defines the icon displayed in the dialog.',
     },
     label: {
       control: 'text',
+      description: 'Sets the dialog title.',
     },
     description: {
       control: 'text',
-    },
-    close: {
-      control: {
-        type: null,
-      },
+      description: 'Defines the main text content of the dialog.',
     },
     ' ': {
       control: 'text',
+      description: 'Slot for additional content (buttons, links, etc.).',
     },
     '--z-index': {
-      table: {
-        defaultValue: { summary: '3' },
-      },
-      control: {
-        type: null,
-      },
-    },
-    'dialog-icon': {
-      control: {
-        type: null,
-      },
+      table: { defaultValue: { summary: '3' } },
+      control: 'text',
+      description: 'Defines the z-index of the dialog.',
     },
   },
+  args: {
+    'is-open': true,
+    'has-close-icon': true,
+    color: 'info',
+    label: 'Dialog title',
+    description: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.',
+    ' ': `<div class="road-button-group">
+      <road-button class="mb-0" color="primary" expand>Done</road-button>
+    </div>`,
+  },
 };
 
 const Template = (args) => html`
-<road-dialog 
-  is-open="${ifDefined(args['is-open'])}" 
-  color="${ifDefined(args.color)}" 
-  .icon="${ifDefined(args.icon)}" 
-  label="${ifDefined(args.label)}" 
-  description="${ifDefined(args.description)}" 
-  has-close-icon="${ifDefined(args['has-close-icon'])}"
->
-  ${unsafeHTML(args[' '])}
-</road-dialog>
+  <road-dialog 
+    ?is-open="${args['is-open']}" 
+    ?has-close-icon="${args['has-close-icon']}" 
+    color="${ifDefined(args.color)}" 
+    .icon="${ifDefined(args.icon)}" 
+    label="${ifDefined(args.label)}" 
+    description="${ifDefined(args.description)}"
+    style="--z-index: ${ifDefined(args['--z-index'])};"
+  >
+    ${unsafeHTML(args[' '])}
+  </road-dialog>
 `;
 
 export const Playground = Template.bind({});
-Playground.args = {
-  'is-open': true,
-  label: 'Dialog title',
-  description: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.',
-  ' ': `<road-button class="mb-0" color="primary" expand>Done</road-button>`,
-};
 
 export const SideActions = Template.bind({});
 SideActions.args = {
-  'is-open': true,
-  label: 'Dialog title',
-  description: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.',
-  ' ': `<road-button class="mb-0" outline expand data-dismiss="modal">Cancel</road-button>
-  <road-button class="mb-0" color="primary" expand style="margin-left: 1rem;">Done</road-button>`,
+  ' ': `<div class="road-button-group">
+    <road-button class="mb-0" outline expand data-dismiss="modal">Cancel</road-button>
+    <road-button class="mb-0" color="primary" expand style="margin-left: 1rem;">Done</road-button>
+  </div>`,
 };
 
 export const Info = Template.bind({});
 Info.args = {
-  'is-open': true,
   color: 'info',
   label: 'Information',
-  description: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.',
 };
 
 export const Success = Template.bind({});
 Success.args = {
-  'is-open': true,
   color: 'success',
   label: 'Success',
-  description: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.',
 };
 
 export const Warning = Template.bind({});
 Warning.args = {
-  'is-open': true,
   color: 'warning',
   label: 'Warning',
-  description: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.',
 };
 
 export const Danger = Template.bind({});
 Danger.args = {
-  'is-open': true,
   color: 'danger',
   label: 'Danger',
-  description: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.',
 };

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

@@ -217,6 +217,11 @@
 
 .drawer-body {
   overflow-y: auto;
+  padding: 0 var(--road-spacing-05) var(--road-spacing-05);
+}
+
+.drawer-body.remove-padding {
+  padding: 0;
 }
 
 :host(.drawer-right) .drawer-body,
@@ -238,6 +243,10 @@
     padding: 0 var(--road-spacing-08) var(--road-spacing-05);
   }
 
+  .drawer-body.remove-padding {
+    padding: 0;
+  }
+
   .drawer-footer {
     padding: var(--road-spacing-05) var(--road-spacing-08);
   }

package/dist/collection/components/drawer/drawer.js

@@ -15,6 +15,10 @@ export class Drawer {
          * Set isOpen property to true to open the drawer
          */
         this.isOpen = false;
+        /**
+       * Set removePadding property to true to remove padding for drawer body
+       */
+        this.removePadding = false;
         /**
          * position of the drawer. e.g. left, right, bottom
          */
@@ -120,21 +124,19 @@ export class Drawer {
             item.addEventListener('click', () => this.close());
         });
     }
-    hasFooterContent() {
-        const footerSlot = this.el.querySelector('[slot="footer"]');
-        return footerSlot !== null && footerSlot.childElementCount > 0;
-    }
     render() {
+        var _a, _b, _c;
         const drawerIsOpenClass = this.isOpen ? 'drawer-open' : '';
+        const removePaddingClass = this.removePadding ? 'remove-padding' : '';
         const inverseHeaderClass = this.hasInverseHeader ? 'drawer-header-inverse' : '';
-        const ariaLabel = this.ariaLabel !== undefined ? this.ariaLabel : 'drawer';
-        const ariaLabelBack = this.ariaLabelBack !== undefined ? this.ariaLabelBack : 'Back';
-        const ariaLabelClose = this.ariaLabelClose !== undefined ? this.ariaLabelClose : 'Close';
-        const drawerDelimiterClass = this.drawerTitle !== undefined && !this.hasInverseHeader ? 'drawer-delimiter' : '';
-        const backIconElement = this.hasBackIcon ? h("button", { type: "button", class: "drawer-action", "aria-label": `${ariaLabelBack}`, onClick: this.onClickBack }, h("road-icon", { icon: navigationChevron, rotate: "180" }), this.backText) : '';
-        const closeIconElement = this.hasCloseIcon ? h("button", { type: "button", class: "drawer-close", onClick: this.onClick, "aria-label": `${ariaLabelClose}` }, h("road-icon", { icon: navigationClose, "aria-hidden": "true" })) : '';
-        const drawerWidthValue = this.position === 'bottom' ? '100%' : this.drawerWidth + 'px';
-        return (h(Host, { key: '61d6f770f9f56ddb21b19f1f8577f5e518325790', class: `${drawerIsOpenClass} drawer-${this.position}`, tabindex: "0", role: "dialog", "aria-label": `${ariaLabel}` }, h("div", { key: 'e04193694e300e84f773d731619db83e1513a4db', class: "drawer-overlay", onClick: this.onClick, tabindex: "-1" }), h("div", { key: '5b19f360e5db980562ccd3991823a31161f5349b', class: "drawer-dialog", style: { maxWidth: `${drawerWidthValue}` }, role: "document", tabindex: "0" }, h("div", { key: '09320757e8c8fdda7770160241f3d185ac933d14', class: "drawer-content" }, h("header", { key: '1b37b3c4e8ec75391f5c068585ecbe22c4c39ddd', class: `drawer-header ${inverseHeaderClass} ${drawerDelimiterClass}` }, backIconElement, this.drawerTitle !== undefined ? h("h2", { class: "drawer-title" }, this.drawerTitle) : h("div", { class: "drawer-title" }, h("slot", { name: "title" })), closeIconElement), h("div", { key: '84ee063113d185a40f869ecee89db960d530a59f', class: "drawer-body" }, h("slot", { key: 'dd1b3ed184198ffe6ccd83f4c5698577933a55e7' })), this.hasFooterContent() && (h("footer", { key: '7e0c367c1a8309464e2ffaefaf759cd5162172c7', class: "drawer-footer" }, h("slot", { key: '1fb2d6fc4e20b8853b0a1d95a9a7169defc4a5ae', name: "footer" })))))));
+        const ariaLabel = (_a = this.ariaLabel) !== null && _a !== void 0 ? _a : 'drawer';
+        const ariaLabelBack = (_b = this.ariaLabelBack) !== null && _b !== void 0 ? _b : 'Back';
+        const ariaLabelClose = (_c = this.ariaLabelClose) !== null && _c !== void 0 ? _c : 'Close';
+        const drawerDelimiterClass = this.drawerTitle && !this.hasInverseHeader ? 'drawer-delimiter' : '';
+        const backIconElement = this.hasBackIcon ? (h("button", { type: "button", class: "drawer-action", "aria-label": ariaLabelBack, onClick: this.onClickBack }, h("road-icon", { icon: navigationChevron, rotate: "180" }), this.backText)) : null;
+        const closeIconElement = this.hasCloseIcon ? (h("button", { type: "button", class: "drawer-close", onClick: this.onClick, "aria-label": ariaLabelClose }, h("road-icon", { icon: navigationClose, "aria-hidden": "true" }))) : null;
+        const drawerWidthValue = this.position === 'bottom' ? '100%' : `${this.drawerWidth}px`;
+        return (h(Host, { key: '803e9ce30d1511c6714bcf3eae6cf482ab910483', class: `${drawerIsOpenClass}  drawer-${this.position}`, tabindex: "0", role: "dialog", "aria-label": ariaLabel }, h("div", { key: 'e57c395fee5c6f507623221567aa8944225e077f', class: "drawer-overlay", onClick: this.onClick, tabindex: "-1" }), h("div", { key: '13d65e0346da78e8d305e8ec367e1a425a64df42', class: "drawer-dialog", style: { maxWidth: drawerWidthValue }, role: "document", tabindex: "0" }, h("div", { key: '3a9b0175243b9a330155a26155e19f288822a2ea', class: "drawer-content" }, h("header", { key: '22f1f8fece85ce1e1d998b876fd83c7854c59ac1', class: `drawer-header ${inverseHeaderClass} ${drawerDelimiterClass}` }, backIconElement, this.drawerTitle ? (h("h2", { class: "drawer-title" }, this.drawerTitle)) : (h("div", { class: "drawer-title" }, h("slot", { name: "title" }))), closeIconElement), h("div", { key: '8d4c6ce1183733fbb7b22e96e2c8cd81c687cf3a', class: `drawer-body ${removePaddingClass}` }, h("slot", { key: 'd8185e9a322bd64833b6ce2ce57807ce27a75dbd' })), h("footer", { key: 'b80c9ab63888eefb0e2ad9fe5599fd0cd8da4bd4', class: "drawer-footer" }, h("slot", { key: 'cef04a3c63555e24194f542c0a59d7484b97118e', name: "footer" }))))));
     }
     static get is() { return "road-drawer"; }
     static get encapsulation() { return "shadow"; }
@@ -170,6 +172,26 @@ export class Drawer {
                 "reflect": false,
                 "defaultValue": "false"
             },
+            "removePadding": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set removePadding property to true to remove padding for drawer body"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "remove-padding",
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "position": {
                 "type": "string",
                 "mutable": false,