@oiz/stzh-components 2.0.0-beta → 2.1.0-alpha

package/dist/collection/components/stzh-table/stzh-table.js

@@ -14,15 +14,6 @@ const CLASS_IS_STICKY_RIGHT = "is-sticky-right";
  */
 export class StzhTable {
   constructor() {
-    /** Columns that should be sticky on the left side (column indexes separated by comma) */
-    this.fixedLeft = null;
-    /** Columns that should be sticky on the right side (column indexes separated by comma) */
-    this.fixedRight = null;
-    this.hasScrollLeft = false;
-    this.hasScrollRight = false;
-    this.isScrollable = false;
-    this.cellsStickyLeft = [];
-    this.cellsStickyRight = [];
     this.updateCellClasses = () => {
       if (!this.tableWrapper) {
         return;
@@ -103,6 +94,13 @@ export class StzhTable {
       }
       this.debounceScroll = requestAnimationFrame(this.updateScrollStates);
     };
+    this.fixedLeft = null;
+    this.fixedRight = null;
+    this.hasScrollLeft = false;
+    this.hasScrollRight = false;
+    this.isScrollable = false;
+    this.cellsStickyLeft = [];
+    this.cellsStickyRight = [];
   }
   fixedCellWatcher() {
     this.updateCellClasses();

package/dist/collection/components/stzh-text/stzh-text.js

@@ -4,21 +4,13 @@ import { Host, h, } from "@stencil/core";
  */
 export class StzhText {
   constructor() {
-    /** Font used */
     this.font = "default";
-    /** Type of curve */
     this.curve = "default";
-    /** Whether if text is lead text */
     this.lead = false;
-    /** Manually overwrite font size applied by curve attribute */
     this.size = "inherit";
-    /** Manually overwrite font size applied by curve attribute above small breakpoint  */
     this.sizeSmall = "inherit";
-    /** Manually overwrite font size applied by curve attribute above medium breakpoint  */
     this.sizeMedium = "inherit";
-    /** Manually overwrite font size applied by curve attribute above large breakpoint  */
     this.sizeLarge = "inherit";
-    /** Manually overwrite font size applied by curve attribute above ultra breakpoint  */
     this.sizeUltra = "inherit";
   }
   render() {

package/dist/collection/components/stzh-toggle/stzh-toggle.js

@@ -11,26 +11,6 @@ let toggleCounter = 0;
  */
 export class StzhToggle {
   constructor() {
-    /** Whether the toggle is disabled */
-    this.disabled = false;
-    /** Name of the input element */
-    this.name = "";
-    /** Value of the input element */
-    this.value = "";
-    /** Invalid status */
-    this.invalid = false;
-    /** Required status */
-    this.required = false;
-    /** Append text to label depending if field is optional/required. true -> show "(optional)", false -> show noting */
-    this.showMarker = false;
-    /** Checked status */
-    this.checked = false;
-    /** Label */
-    this.label = "";
-    /** Position of label */
-    this.labelPosition = "right";
-    /** Id for element which describes the input (this will be overwritten if description prop or slot is used) */
-    this.a11yDescribedby = "";
     this.onInput = (event) => {
       this.checked = this.input.checked;
       this.stzhChange.emit({
@@ -64,6 +44,20 @@ export class StzhToggle {
         originalEvent: event
       });
     };
+    this.localization = undefined;
+    this.disabled = false;
+    this.name = "";
+    this.value = "";
+    this.invalid = false;
+    this.required = false;
+    this.showMarker = false;
+    this.checked = false;
+    this.label = "";
+    this.labelPosition = "right";
+    this.description = undefined;
+    this.descriptionLong = undefined;
+    this.error = undefined;
+    this.a11yDescribedby = "";
   }
   /** Focus input field */
   async setFocus() {

package/dist/collection/components/stzh-tooltip/stzh-tooltip.js

@@ -29,28 +29,6 @@ let tooltipCounter = 0;
  */
 export class StzhTooltip {
   constructor() {
-    /** Whether tooltip should be open */
-    this.open = false;
-    /** Label of tooltip (used for screenreaders) */
-    this.label = "";
-    /** Content of tooltip (use instead of content slot) */
-    this.content = "";
-    /** Default placement of tooltip relative to trigger element */
-    this.placement = "bottom";
-    /** Position strategy */
-    this.strategy = "absolute";
-    /** Shifting of tooltip content */
-    this.skidding = 0;
-    /** Distance from tooltip content to trigger (default: arrow height + 8px = 16) */
-    this.distance = 16;
-    /** Whether tooltip is interactive */
-    this.interactive = false;
-    /**
-     * Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple
-     * options can be passed by separating them with a space. When manual is used, the tooltip must be activated
-     * programmatically.
-     */
-    this.trigger = "hover focus";
     this.toggledByMethod = false;
     this.isHovering = false;
     this.onEscKey = (event) => {
@@ -147,6 +125,17 @@ export class StzhTooltip {
         }
       }
     };
+    this.open = false;
+    this.label = "";
+    this.content = "";
+    this.placement = "bottom";
+    this.strategy = "absolute";
+    this.skidding = 0;
+    this.distance = 16;
+    this.interactive = false;
+    this.trigger = "hover focus";
+    this.localization = undefined;
+    this.computedPlacement = undefined;
   }
   /** Show tooltip content */
   async show() {

package/dist/collection/components/stzh-upload/stzh-upload.css

@@ -218,7 +218,7 @@ stzh-upload *::after {
   font-size: var(--stzh-font-milli-font-size);
   line-height: var(--stzh-font-milli-text-line-height);
   letter-spacing: var(--stzh-font-curve---text-letter-spacing);
-  padding: var(--stzh-space-large);
+  padding: var(--stzh-space-xxlarge);
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -230,14 +230,9 @@ stzh-upload *::after {
   border-image-repeat: round;
   transition: background-color var(--stzh-base-transition-animation-speed);
 }
-@media screen and (min-width: 600px) {
-  .stzh-upload__clickarea {
-    padding: var(--stzh-space-xlarge);
-  }
-}
 @media screen and (min-width: 1024px) {
   .stzh-upload__clickarea {
-    padding: var(--stzh-space-xxlarge);
+    padding: var(--stzh-space-xxxlarge);
   }
 }
 @media screen and (min-width: 1260px) {
@@ -259,6 +254,11 @@ stzh-upload *::after {
     margin-top: var(--stzh-space-medium);
   }
 }
+@media screen and (min-width: 1260px) {
+  .stzh-upload__button {
+    margin-top: var(--stzh-space-large);
+  }
+}
 .stzh-upload stzh-icon.stzh-upload__delete-icon-error {
   display: none;
 }
@@ -283,6 +283,12 @@ stzh-upload *::after {
 .stzh-upload__preview.dz-complete .stzh-upload__info-wrapper-complete {
   display: flex;
 }
+.stzh-upload__preview.dz-empty .stzh-upload__extension::after {
+  content: "";
+}
+.stzh-upload__preview.dz-empty .stzh-upload__size {
+  display: none;
+}
 .stzh-upload__inner {
   height: 3.875rem;
   display: flex;
@@ -364,6 +370,9 @@ stzh-upload *::after {
 .stzh-upload__extension {
   text-transform: uppercase;
 }
+.stzh-upload__extension::after {
+  content: " | ";
+}
 .stzh-upload__delete {
   cursor: pointer;
   -webkit-appearance: none;

package/dist/collection/components/stzh-upload/stzh-upload.js

@@ -18,162 +18,40 @@ let uploadCounter = 0;
  */
 export class StzhUpload {
   constructor() {
-    /**
-     * Initially pre existing files (e.g. already uploaded by the user).
-     * Array of objects that must at least include `name` and `size` attribute:
-     * `[{"name":"file1.txt", "size": 12345}, {"name":"file2.txt", "size": 12345}]`
-     */
-    this.existingFiles = [];
     this._existingFiles = [];
-    /** Label */
+    this.existingFiles = [];
     this.label = "";
-    /** Description */
     this.description = "";
-    /** Button text */
     this.button = "";
-    /**
-     * URL the files are processed to.
-     *
-     * You can also provide a function that will be called with `files` and
-     * `dataBlocks`  and must return the url as string.
-     */
     this.url = "";
-    /**
-     * Can be changed to `"put"` if necessary. You can also provide a function
-     * that will be called with `files` and must return the method.
-     */
     this.method = "post";
-    /**
-     * Will be set on the XHRequest.
-     */
     this.withCredentials = false;
-    /**
-     * Whether the upload is disabled or not.
-     */
     this.disabled = false;
-    /**
-     * Whether the upload is marked as invalid.
-     */
     this.invalid = false;
-    /**
-     * The default implementation of `accept` checks the file's mime type or
-     * extension against this list. This is a comma separated list of mime
-     * types or file extensions.
-     *
-     * Eg.: `image/*,application/pdf,.psd`
-     *
-     * This option will also be used as
-     * [`accept`](https://developer.mozilla.org/en-US/docs/HTML/Element/input#attr-accept)
-     * parameter on the hidden file input as well.
-     */
+    this.error = undefined;
     this.acceptedFiles = null;
-    /**
-     * If false, files will be added to the queue but the queue will not be
-     * processed automatically.
-     * This can be useful if you need some additional user input before sending
-     * files (or if you want want all files sent at once).
-     * If you're ready to send the file simply call `element.processQueue()`.
-     */
     this.autoProcessQueue = true;
-    /**
-     * If not `null` defines how many files this dropzone handles. If it exceeds,
-     * the event `stzhMaxfilesexceeded` will be called.
-     */
     this.maxFiles = null;
-    /**
-     * The maximum filesize (in MiB) that is allowed to be uploaded.
-     */
     this.maxFilesize = 25;
-    /**
-     * How many file uploads to process in parallel.
-     */
     this.parallelUploads = 2;
-    /**
-     * Whether to send multiple files in one request. If
-     * this it set to true, then the fallback file input element will
-     * have the `multiple` attribute as well. This option will
-     * also trigger additional events (like `stzhSuccessMultiple`). See the events
-     * documentation section for more information.
-     */
     this.uploadMultiple = false;
-    /**
-     * Whether you want files to be uploaded in chunks to your server. This can't be
-     * used in combination with `uploadMultiple`.
-     *
-     * See `chunksUploaded` prop for the callback to finalise an upload.
-     */
     this.chunking = false;
-    /**
-     * If `chunking` is enabled, this defines whether **every** file should be chunked,
-     * even if the file size is below chunkSize. This means, that the additional chunk
-     * form data will be submitted and the `chunksUploaded` callback will be invoked.
-     */
     this.forceChunking = false;
-    /**
-     * If `chunking` is `true`, then this defines the chunk size in bytes.
-     */
     this.chunkSize = 2 * 1024 * 1024;
-    /**
-     * If `true`, the individual chunks of a file are being uploaded simultaneously.
-     */
     this.parallelChunkUploads = false;
-    /**
-     * Whether a chunk should be retried if it fails.
-     */
     this.retryChunks = false;
-    /**
-     * If `retryChunks` is true, how many times should it be retried.
-     */
     this.retryChunksLimit = 3;
-    /**
-     * The base that is used to calculate the **displayed** filesize. You can
-     * change this to 1024 if you would rather display kibibytes, mebibytes,
-     * etc... 1024 is technically incorrect, because `1024 bytes` are `1 kibibyte`
-     * not `1 kilobyte`. You can change this to `1024` if you don't care about
-     * validity.
-     */
     this.filesizeBase = 1000;
-    /**
-     * An optional object to send additional headers to the server. Eg:
-     * `{ "My-Awesome-Header": "header value" }`
-     */
     this.headers = null;
-    /**
-     * Should the default headers be set or not?
-     * Accept: application/json <- for requesting json response
-     * Cache-Control: no-cache <- Request shouldnt be cached
-     * X-Requested-With: XMLHttpRequest <- We sent the request via XMLHttpRequest
-     */
     this.defaultHeaders = true;
-    /**
-     * A function that gets a [file](https://developer.mozilla.org/en-US/docs/DOM/File)
-     * and a `done` function as parameters.
-     *
-     * If the done function is invoked without arguments, the file is "accepted" and will
-     * be processed. If you pass an error message, the file is rejected, and the error
-     * message will be displayed.
-     * This function will not be called if the file is too big or doesn't match the mime types.
-     */
     this.accept = function (_file, done) {
       return done();
     };
-    /**
-     * The callback that will be invoked when all chunks have been uploaded for a file.
-     * It gets the file for which the chunks have been uploaded as the first parameter,
-     * and the `done` function as second. `done()` needs to be invoked when everything
-     * needed to finish the upload process is done.
-     */
     this.chunksUploaded = function (_file, done) {
       done();
     };
-    /**
-     * This is the element the hidden input field (which is used when clicking on the
-     * dropzone to trigger file selection) will be appended to. This might
-     * be important in case you use frameworks to switch the content of your page.
-     *
-     * Can be a selector string, or an element directly.
-     */
     this.hiddenInputContainer = "body";
+    this.localization = undefined;
   }
   existingFilesWatcher(newValue) {
     if (typeof newValue === "string") {
@@ -263,12 +141,56 @@ export class StzhUpload {
       dictResponseError: this.localization.responseError,
       dictInvalidFileType: this.localization.invalidFileType,
       dictFileTooBig: this.localization.fileTooBig,
+      // Called when a file is added to the queue
+      // Receives `file`
+      // Taken from https://github.com/dropzone/dropzone/blob/v5.9.3/src/options.js#L594
+      addedfile(file) {
+        if (this.element === this.previewsContainer) {
+          this.element.classList.add("dz-started");
+        }
+        if (this.previewsContainer && !this.options.disablePreviews) {
+          file.previewElement = Dropzone.createElement(this.options.previewTemplate.trim());
+          file.previewTemplate = file.previewElement; // Backwards compatibility
+          this.previewsContainer.appendChild(file.previewElement);
+          if (file.size == 0) {
+            file.previewElement.classList.add('dz-empty');
+          }
+          for (var node of file.previewElement.querySelectorAll("[data-dz-name]")) {
+            node.textContent = file.name;
+          }
+          for (node of file.previewElement.querySelectorAll("[data-dz-size]")) {
+            node.innerHTML = this.filesize(file.size);
+          }
+          if (this.options.addRemoveLinks) {
+            file._removeLink = Dropzone.createElement(`<a class="dz-remove" href="javascript:undefined;" data-dz-remove>${this.options.dictRemoveFile}</a>`);
+            file.previewElement.appendChild(file._removeLink);
+          }
+          let removeFileEvent = (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            if (file.status === Dropzone.UPLOADING) {
+              return Dropzone.confirm(this.options.dictCancelUploadConfirmation, () => this.removeFile(file));
+            }
+            else {
+              if (this.options.dictRemoveFileConfirmation) {
+                return Dropzone.confirm(this.options.dictRemoveFileConfirmation, () => this.removeFile(file));
+              }
+              else {
+                return this.removeFile(file);
+              }
+            }
+          };
+          for (let removeLink of file.previewElement.querySelectorAll("[data-dz-remove]")) {
+            removeLink.addEventListener("click", removeFileEvent);
+          }
+        }
+      },
       // When the upload is finished, either with success or an error.
       // Taken from https://github.com/dropzone/dropzone/blob/v5.9.3/src/options.js#L752
       complete(file) {
         for (let node of file.previewElement.querySelectorAll("[data-dz-remove]")) {
-          node.setAttribute('title', this.options.dictRemoveFile);
-          node.setAttribute('aria-label', this.options.dictRemoveFile);
+          node.setAttribute("title", this.options.dictRemoveFile);
+          node.setAttribute("aria-label", this.options.dictRemoveFile);
         }
         // move file uploads with errors to another element, so they are grouped together
         if (file.status === "error") {
@@ -348,7 +270,6 @@ export class StzhUpload {
               </div>
               <div class="stzh-upload__meta">
                 <span class="stzh-upload__extension" data-dz-extension></span>
-                |
                 <span class="stzh-upload__size" data-dz-size></span>
               </div>
               <div class="stzh-upload__error-message">

package/dist/collection/components/stzh-upload/stzh-upload.stories.js

@@ -66,6 +66,6 @@ ExistingFiles.args = {
   'existing-files': `[
     { "name": "Filename.pdf", "size": 12345, "id": "upload-1" },
     { "name": "Filename2.pdf", "size": 22345, "id": "upload-2" },
-    { "name": "Filename3.pdf", "size": 32345, "id": "upload-3" }
+    { "name": "Filename3.pdf", "size": 0, "id": "upload-3" }
   ]`
 };

package/dist/collection/components/stzh-vbz-linechip/stzh-vbz-linechip.js

@@ -6,12 +6,6 @@ import LineColors from "./line-colors.json";
  */
 export class StzhVbzLinechip {
   constructor() {
-    /** Active */
-    this.active = false;
-    /** Show alert icon */
-    this.alert = false;
-    /** Whether it is a global disturbance */
-    this.global = false;
     this.onFocus = (event) => {
       const focusEvent = new FocusEvent("focus", {
         view: window,
@@ -36,6 +30,10 @@ export class StzhVbzLinechip {
         originalEvent: event
       });
     };
+    this.line = undefined;
+    this.active = false;
+    this.alert = false;
+    this.global = false;
   }
   /** Focus menu item */
   async setFocus() {

package/dist/collection/components/stzh-vbz-majorticker/stzh-vbz-majorticker.js

@@ -12,20 +12,19 @@ const CHANNEL_INFO_URL_FILTER = 'stadt-zuerich.ch/vbz';
  */
 export class StzhVbzMajorticker {
   constructor() {
-    /** API URL(`{lang}` are replaced in the URL)  */
-    this.api = "https://fpbe.zvv.ch/restproxy/himsearch?format=json&accessId=unic&channels=ticker&additionalfields=tickers:VBZ&orderBy=LMOD_DESC&lang={lang}";
-    /** Data to pass in directly (alternative for API call) */
-    this.data = "";
-    /** More info link (`{lang}` and `{id}` are replaced in the URL) */
-    this.moreInfoLink = "https://zvv.ch/zvv/{lang}/fahrplan/vl.html?himIds={id}";
-    /** Whether ghettobox is shown (not closed before) */
-    this.ghettoboxShown = true;
     this.onGhettoboxOpen = () => {
       this.ghettoboxShown = true;
     };
     this.onGhettoboxClose = () => {
       this.ghettoboxShown = false;
     };
+    this.api = "https://fpbe.zvv.ch/restproxy/himsearch?format=json&accessId=unic&channels=ticker&additionalfields=tickers:VBZ&orderBy=LMOD_DESC&lang={lang}";
+    this.data = "";
+    this.moreInfoLink = "https://zvv.ch/zvv/{lang}/fahrplan/vl.html?himIds={id}";
+    this.dateAdapter = undefined;
+    this.localization = undefined;
+    this.ghettoboxCloseTimeKey = undefined;
+    this.ghettoboxShown = true;
   }
   async apiWatcher(newValue) {
     if (!newValue) {

package/dist/collection/components/stzh-vbz-ticker/stzh-vbz-ticker.css

@@ -154,19 +154,14 @@
   line-height: var(--stzh-font-micro-text-line-height);
   margin-top: var(--stzh-space-xsmall);
 }
-@media screen and (min-width: 600px) {
-  .stzh-vbz-ticker__description {
-    margin-top: var(--stzh-space-small);
-  }
-}
 @media screen and (min-width: 1024px) {
   .stzh-vbz-ticker__description {
-    margin-top: var(--stzh-space-medium);
+    margin-top: var(--stzh-space-small);
   }
 }
 @media screen and (min-width: 1260px) {
   .stzh-vbz-ticker__description {
-    margin-top: var(--stzh-space-large);
+    margin-top: var(--stzh-space-medium);
   }
 }
 .stzh-vbz-ticker__link {

package/dist/collection/components/stzh-vbz-ticker/stzh-vbz-ticker.js

@@ -16,12 +16,6 @@ const DISTURBANCE_BUS = "5";
  */
 export class StzhVbzTicker {
   constructor() {
-    /** API URL(`{lang}` are replaced in the URL)  */
-    this.api = "https://fpbe.zvv.ch/restproxy/himsearch?format=json&accessId=unic&channels=ticker&additionalfields=tickers:VBZ&orderBy=LMOD_DESC&lang={lang}";
-    /** Data to pass in directly (alternative for API call) */
-    this.data = "";
-    /** More info link (`{lang}` and `{id}` are replaced in the URL) */
-    this.moreInfoLink = "https://zvv.ch/zvv/{lang}/fahrplan/vl.html?himIds={id}";
     this.globalDisturbances = [];
     this.lines = [];
     this.counter = {
@@ -32,6 +26,11 @@ export class StzhVbzTicker {
       [`${DISTURBANCE_EVENT}`]: 0,
       [`${DISTURBANCE_BUS}`]: 0
     };
+    this.api = "https://fpbe.zvv.ch/restproxy/himsearch?format=json&accessId=unic&channels=ticker&additionalfields=tickers:VBZ&orderBy=LMOD_DESC&lang={lang}";
+    this.data = "";
+    this.moreInfoLink = "https://zvv.ch/zvv/{lang}/fahrplan/vl.html?himIds={id}";
+    this.dateAdapter = undefined;
+    this.localization = undefined;
   }
   localizationWatcher() {
     this.collator = new Intl.Collator(this.localization.$locale, {

package/dist/collection/components/stzh-vspace/stzh-vspace.css

@@ -123,19 +123,14 @@
 :host([curve=tiny]) {
   --space: var(--stzh-space-xsmall);
 }
-@media screen and (min-width: 600px) {
-  :host([curve=tiny]) {
-    --space: var(--stzh-space-small);
-  }
-}
 @media screen and (min-width: 1024px) {
   :host([curve=tiny]) {
-    --space: var(--stzh-space-medium);
+    --space: var(--stzh-space-small);
   }
 }
 @media screen and (min-width: 1260px) {
   :host([curve=tiny]) {
-    --space: var(--stzh-space-large);
+    --space: var(--stzh-space-medium);
   }
 }
 
@@ -147,6 +142,11 @@
     --space: var(--stzh-space-medium);
   }
 }
+@media screen and (min-width: 1260px) {
+  :host([curve=small]) {
+    --space: var(--stzh-space-large);
+  }
+}
 
 :host([curve=regular]) {
   --space: var(--stzh-space-medium);
@@ -163,35 +163,25 @@
 }
 
 :host([curve=medium]) {
-  --space: var(--stzh-space-medium);
-}
-@media screen and (min-width: 600px) {
-  :host([curve=medium]) {
-    --space: var(--stzh-space-large);
-  }
+  --space: var(--stzh-space-xlarge);
 }
 @media screen and (min-width: 1024px) {
   :host([curve=medium]) {
-    --space: var(--stzh-space-xlarge);
+    --space: var(--stzh-space-xxlarge);
   }
 }
 @media screen and (min-width: 1260px) {
   :host([curve=medium]) {
-    --space: var(--stzh-space-xxlarge);
+    --space: var(--stzh-space-xxxlarge);
   }
 }
 
 :host([curve=large]) {
-  --space: var(--stzh-space-large);
-}
-@media screen and (min-width: 600px) {
-  :host([curve=large]) {
-    --space: var(--stzh-space-xlarge);
-  }
+  --space: var(--stzh-space-xxlarge);
 }
 @media screen and (min-width: 1024px) {
   :host([curve=large]) {
-    --space: var(--stzh-space-xxlarge);
+    --space: var(--stzh-space-xxxlarge);
   }
 }
 @media screen and (min-width: 1260px) {
@@ -201,13 +191,18 @@
 }
 
 :host([curve=big]) {
-  --space: var(--stzh-space-xxlarge);
+  --space: var(--stzh-space-xxxlarge);
 }
 @media screen and (min-width: 600px) {
   :host([curve=big]) {
     --space: var(--stzh-space-xxxxlarge);
   }
 }
+@media screen and (min-width: 1024px) {
+  :host([curve=big]) {
+    --space: var(--stzh-space-big);
+  }
+}
 @media screen and (min-width: 1260px) {
   :host([curve=big]) {
     --space: var(--stzh-space-xbig);
@@ -215,7 +210,7 @@
 }
 
 :host([curve=huge]) {
-  --space: var(--stzh-space-xxxlarge);
+  --space: var(--stzh-space-xxxxlarge);
 }
 @media screen and (min-width: 600px) {
   :host([curve=huge]) {

package/dist/collection/components/stzh-vspace/stzh-vspace.js

@@ -4,23 +4,14 @@ import { Host, h, } from "@stencil/core";
  */
 export class StzhVspace {
   constructor() {
-    /** Type of curve */
     this.curve = "none";
-    /** Type of size */
     this.size = "inherit";
-    /** Type of size above small breakpoint  */
     this.sizeSmall = "inherit";
-    /** Type of size above medium breakpoint  */
     this.sizeMedium = "inherit";
-    /** Type of size above large breakpoint  */
     this.sizeLarge = "inherit";
-    /** Type of size above ultra breakpoint  */
     this.sizeUltra = "inherit";
-    /** Alignment */
     this.justify = "start";
-    /** Apply spacing to slotted elements */
     this.around = false;
-    /** Add border */
     this.border = "none";
   }
   render() {