@oiz/stzh-components 2.0.0 → 2.1.0-beta

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

@@ -30,69 +30,43 @@ let dropdownCounter = 0;
  */
 export class StzhDropdown {
   constructor() {
-    /**
-     * An array of property names to analyze when filtering options.
-     * Weights can be given to each field to improve search result:
-     * `[{"field":"text","weight":2},{"field":"text2","weight":0.5}]`
-     */
+    this.options = undefined;
+    this.optgroups = undefined;
+    this.items = undefined;
     this.searchField = ["text"];
-    /** Whether multiple items option can be selected */
     this.multiple = false;
-    /** Show inline (auto width) */
     this.inline = false;
-    /** The max number of options to display in the dropdown. Set to `null` for an unlimited number of options. */
     this.maxOptions = 50;
-    /** When searching for multiple terms (separated by space), this is the operator used. Can be 'and' or 'or' */
     this.searchConjunction = "and";
-    /**  If true, any options with a "" value will be treated like a normal option. This defaults to false to accommodate the common <select> practice of having the first empty option to act as a placeholder. */
     this.allowEmptyOption = false;
-    /** Show the dropdown immediately when the control receives focus. */
     this.openOnFocus = true;
-    /** After a selection is made, the dropdown will remain open if in a multi-selection control or will close in a single-selection control. Setting closeAfterSelect to true will force the dropdown to close after selections are made. Setting closeAfterSelect to false will keep the dropdown open after selections are made. */
     this.closeAfterSelect = null;
-    /** Invoked when new options should be loaded from the server. Called with the current query string and a callback function to call with the results when they are loaded (or nothing when an error arises). */
     this.load = null;
-    /** Minimum of characters required to execute the `load` function */
     this.minCharacters = 3;
-    /** The number of milliseconds to wait before requesting options from the server or null. If null, throttling is disabled. Useful when loading options dynamically while the user types a search / filter expression. */
     this.loadThrottle = 300;
-    /** If true, the load function will be called upon control initialization (with an empty search). Alternatively it can be set to 'focus' to call the load function when control receives focus. */
     this.preload = false;
-    /** The name of the property to render as an option / item label (not needed when custom rendering functions are defined). */
     this.labelField = "text";
-    /** The name of the property to use as the value when an item is selected. */
     this.valueField = "value";
-    /** The name of the property to group items by. */
     this.optgroupField = "optgroup";
-    /** The name of the property to render as an option group label (not needed when custom rendering functions are defined). */
     this.optgroupLabelField = "label";
-    /** The name of the option group property that serves as its unique identifier. */
     this.optgroupValueField = "value";
-    /** Name of hidden select element */
+    this.lockOptgroupOrder = undefined;
     this.name = "";
-    /** Variant */
     this.variant = "default";
-    /** Size variant */
     this.size = "default";
-    /** Whether the dropdown is disabled */
     this.disabled = false;
-    /** Popover placement */
     this.popoverPlacement = "bottom";
-    /** Label */
     this.label = "";
-    /** Icon (use instead of icon slot) */
     this.icon = "";
-    /** Prevent option search */
     this.noSearch = false;
-    /** Prevent backspace delete */
     this.noBackspaceDelete = false;
-    /** Invalid status */
     this.invalid = false;
-    /** Required status */
     this.required = false;
-    /** Show text in label depending if field is optional/required */
     this.showMarker = false;
-    /** Id for element which describes the input (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) */
+    this.description = undefined;
+    this.descriptionLong = undefined;
+    this.error = undefined;
+    this.localization = undefined;
     this.a11yDescribedby = "";
   }
   optionsWatcher(newValue) {
@@ -193,7 +167,7 @@ export class StzhDropdown {
     this.searchFieldWatcher(this.searchField);
     this.errorWatcher(this.error);
     if (!this.localization) {
-      this.localization = await fetchTranslations(this.element, 'dropdown');
+      this.localization = await fetchTranslations(this.element, "dropdown");
     }
   }
   async componentWillUpdate() {
@@ -425,6 +399,12 @@ export class StzhDropdown {
       tomSelectOptions.items = this._items;
     }
     this.tomSelect = new TomSelect(this.select, tomSelectOptions);
+    if (!this.openOnFocus) {
+      // we still want to enable opening the dropdown by click
+      this.tomSelect.control.addEventListener("click", () => {
+        this.tomSelect.open();
+      });
+    }
   }
   disconnectedCallback() {
     if (this.tomSelect) {

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

@@ -4,13 +4,9 @@ import { Host, h, } from "@stencil/core";
  */
 export class StzhFieldset {
   constructor() {
-    /** Legend describing the field group inside the fieldset */
     this.legend = "";
-    /** Hide legend to show only for screenreaders */
     this.hideLegend = false;
-    /** Heading level inside legend */
     this.legendLevel = "";
-    /** Type of curve to overwrite the curve inherited from `level` attribute */
     this.legendCurve = "auto";
   }
   render() {

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

@@ -7,9 +7,7 @@ import { hasSlot } from "../../utils/utils";
  */
 export class StzhFigure {
   constructor() {
-    /** Caption */
     this.caption = "";
-    /** Copyright */
     this.copyright = "";
   }
   render() {

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

@@ -12,12 +12,6 @@ const CLASS_CONTAINER_ENABLED = "stzh-flyingfocus-enabled";
  */
 export class StzhFlyingfocus {
   constructor() {
-    this.style = {};
-    this.position = {};
-    this.enabled = false;
-    this.visible = false;
-    this.helper = false;
-    this.moving = false;
     this.container = document.body;
     this.previousTargetRect = null;
     this.repositionElement = () => {
@@ -43,6 +37,12 @@ export class StzhFlyingfocus {
       }
       this.repositionElement();
     };
+    this.style = {};
+    this.position = {};
+    this.enabled = false;
+    this.visible = false;
+    this.helper = false;
+    this.moving = false;
   }
   handleKeydown(e) {
     // Show animation only upon Tab or Arrow keys press.

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

@@ -6,10 +6,6 @@ import { hasSlot, setPropsIfNull } from "../../utils/utils";
  */
 export class StzhFooter {
   constructor() {
-    /** Footer variant */
-    this.variant = "default";
-    /** Main URL for shortlinks */
-    this.mainUrl = "https://stadt-zuerich.ch";
     this.init = () => {
       const socialLink = this.element.querySelector('stzh-link[slot="social-link"]');
       const links = this.element.querySelectorAll('stzh-link[slot="link"]');
@@ -22,6 +18,10 @@ export class StzhFooter {
         link.setAttribute("role", "listitem");
       });
     };
+    this.copyright = undefined;
+    this.variant = "default";
+    this.mainUrl = "https://www.stadt-zuerich.ch";
+    this.localization = undefined;
   }
   async componentWillLoad() {
     if (typeof this.copyright === "undefined") {
@@ -119,7 +119,7 @@ export class StzhFooter {
         },
         "attribute": "main-url",
         "reflect": false,
-        "defaultValue": "\"https://stadt-zuerich.ch\""
+        "defaultValue": "\"https://www.stadt-zuerich.ch\""
       },
       "localization": {
         "type": "unknown",

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

@@ -9,22 +9,6 @@ const KEY_PREFIX_CLOSE_TIME = "stzh-components-ghettobox-close-time";
  */
 export class StzhGhettobox {
   constructor() {
-    /** Overwrite hidden h1 title */
-    this.hiddenTitle = "";
-    /** Main title */
-    this.mainTitle = "";
-    /** Description */
-    this.description = "";
-    /**
-     * Name of cookie to compare its value with set `publishDate`
-     * to determine if ghettobox was already closed before by the user.
-     * If empty (""), no check is done and ghettobox
-     * will always be shown again after a refresh.
-     * Cookie name will be prefixed with `stzh-components-ghettobox-close-time`.
-     */
-    this.closeTimeKey = "global-alert";
-    /** Open state */
-    this.open = true;
     this.onCloseButtonClick = () => {
       this.hide();
     };
@@ -40,6 +24,13 @@ export class StzhGhettobox {
         });
       }
     };
+    this.hiddenTitle = "";
+    this.mainTitle = "";
+    this.description = "";
+    this.publishDate = undefined;
+    this.closeTimeKey = "global-alert";
+    this.localization = undefined;
+    this.open = true;
   }
   publishDateWatcher(newValue) {
     if (typeof newValue === "string") {

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

@@ -1,7 +1,7 @@
 import { h } from '../../utils/h';
 import readme from './readme.md';
 import { withDesign } from 'storybook-addon-designs';
-// import { getFigmaLink } from '../../../figma';
+import { getFigmaLink } from '../../../figma';
 
 export default {
   title: 'Components/Ghettobox',
@@ -16,11 +16,11 @@ export default {
         component: readme
       }
     },
-    // design: {
-    //   type: 'figma',
-    //   url: getFigmaLink('ghettobox'),
-    //   allowFullscreen: true
-    // }
+    design: {
+      type: 'figma',
+      url: getFigmaLink('ghettobox'),
+      allowFullscreen: true
+    }
   },
   decorators: [
     withDesign

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

@@ -9,17 +9,11 @@ import { media } from '../../utils/media-utils';
  */
 export class StzhHeader {
   constructor() {
-    /** Portal link (for logo) */
-    this.href = "https://stadt-zuerich.ch";
-    /**
-     * Prevent creating a appnav placeholder element
-     * with the size of appnav inside header parent element.
-     * This prevents the fixed appnav to overlap
-     * content at the end on mikro breakpoint,
-     * but could lead to problems with certain layouts.
-     */
+    this.href = "https://www.stadt-zuerich.ch";
     this.preventAppnavPlaceholder = false;
     this.hideLogo = false;
+    this.paddingTop = undefined;
+    this.metabarTransform = undefined;
     this.sticky = false;
     this.stickyClosing = false;
     this.stickyMetabar = false;
@@ -183,7 +177,7 @@ export class StzhHeader {
         },
         "attribute": "href",
         "reflect": false,
-        "defaultValue": "\"https://stadt-zuerich.ch\""
+        "defaultValue": "\"https://www.stadt-zuerich.ch\""
       },
       "preventAppnavPlaceholder": {
         "type": "boolean",

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

@@ -4,11 +4,8 @@ import { Host, h, } from "@stencil/core";
  */
 export class StzhHeading {
   constructor() {
-    /** Heading level */
     this.level = "1";
-    /** Type of curve to overwrite the curve inherited from `level` attribute */
     this.curve = "auto";
-    /** With border bottom separator */
     this.withBorder = false;
   }
   render() {

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

@@ -1,5 +1,7 @@
 import { h } from '../../utils/h';
 import readme from './readme.md';
+import { withDesign } from 'storybook-addon-designs';
+import { getFigmaLink } from '../../../figma';
 
 export default {
   title: 'Components/HorizontalRule',
@@ -10,8 +12,16 @@ export default {
       description: {
         component: readme
       }
+    },
+    design: {
+      type: 'figma',
+      url: getFigmaLink('hr'),
+      allowFullscreen: true
     }
-  }
+  },
+  decorators: [
+    withDesign
+  ]
 };
 
 const Template = (args) => (

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

@@ -4,23 +4,14 @@ import { Host, h, } from "@stencil/core";
  */
 export class StzhHspace {
   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() {

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

@@ -2,15 +2,7 @@ import { Host, h } from "@stencil/core";
 let iconCounter = 0;
 export class StzhIcon {
   constructor() {
-    /**
-     * Icon which should be displayed
-     * See the [icon overview](stzh-components/assets/svgsprites/symbol/sprite.symbol.html) for a list of all available icons.
-     */
     this.name = "";
-    /**
-     * Hidden icon title for screenreader
-     * (usually not needed when e.g. inside links or buttons that have text)
-    */
     this.a11yTitle = "";
   }
   componentWillLoad() {

package/dist/collection/components/stzh-icon-sprite/assets/svgsprites/symbol/sprite.symbol.html

@@ -119,6 +119,7 @@ They might well be outsourced to an external stylesheet of course.
 	.svg-stzh-icon-star-filled-dims { width: 24px; height: 24px; }
 	.svg-stzh-icon-subtitle-dims { width: 24px; height: 24px; }
 	.svg-stzh-icon-target-dims { width: 24px; height: 24px; }
+	.svg-stzh-icon-target-bullet-dims { width: 24px; height: 24px; }
 	.svg-stzh-icon-team-dims { width: 24px; height: 24px; }
 	.svg-stzh-icon-text-message-dims { width: 24px; height: 24px; }
 	.svg-stzh-icon-thermometer-dims { width: 24px; height: 24px; }
@@ -244,14 +245,15 @@ for further details on how to create this embeddable sprite variant.
 		<symbol fill="none" viewBox="0 0 24 24" id="stzh-icon-star-filled" xmlns="http://www.w3.org/2000/svg"><path d="M12 18l-6.375 3.75 1.5-7.125-5.25-4.875L9 9l3-6.75L15 9l7.125.75-5.25 4.875 1.5 7.125L12 18z" fill="currentColor" stroke="currentColor" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/></symbol>
 		<symbol fill="none" viewBox="0 0 24 24" id="stzh-icon-subtitle" xmlns="http://www.w3.org/2000/svg"><path d="M3 7h18M6 12h12M3 17h18" stroke="currentColor" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/></symbol>
 		<symbol fill="none" viewBox="0 0 24 24" id="stzh-icon-target" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#dgclip0_9415_65741)" stroke="currentColor" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"><path d="M12 .75v6m0 10.5v6M6.75 12h-6m22.5 0h-6M12 20.25a8.25 8.25 0 100-16.5 8.25 8.25 0 000 16.5z"/></g><defs><clipPath id="dgclip0_9415_65741"><path fill="currentColor" d="M0 0h24v24H0z"/></clipPath></defs></symbol>
-		<symbol fill="none" viewBox="0 0 24 24" id="stzh-icon-team" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#dhclip0_5243_53905)"><path d="M17 15.375a.5.5 0 10-1 0h1zm4 0v-.5a.5.5 0 00-.5.5h.5zM23.25 9h.5-.5zm-1.125-1.125v-.5.5zm-6.75 0v-.5.5zm-1.625 1.5a.5.5 0 001 0h-1zM9.25 9a.5.5 0 001 0h-1zm-.625-1.125v-.5.5zm-6.75 0v-.5.5zM.75 9h-.5.5zm0 5.25h-.5.5zM3 15.375h.5a.5.5 0 00-.5-.5v.5zm4.5 4.875H8h-.5zm.5-4.875a.5.5 0 10-1 0h1zM7.5 10.5H7h.5zm0 5.25H7h.5zm2.25 1.125h.5a.5.5 0 00-.5-.5v.5zm0 4.875h-.5.5zm4.5-4.875v-.5a.5.5 0 00-.5.5h.5zm6.25-13.5a1.75 1.75 0 01-1.75 1.75v1a2.75 2.75 0 002.75-2.75h-1zm-1.75 1.75A1.75 1.75 0 0117 3.375h-1a2.75 2.75 0 002.75 2.75v-1zM17 3.375c0-.966.784-1.75 1.75-1.75v-1A2.75 2.75 0 0016 3.375h1zm1.75-1.75c.966 0 1.75.784 1.75 1.75h1a2.75 2.75 0 00-2.75-2.75v1zM16 15.375v4.875h1v-4.875h-1zm0 4.875c0 .431.171.844.476 1.15l.707-.708A.625.625 0 0117 20.25h-1zm.476 1.15c.305.304.718.475 1.149.475v-1a.625.625 0 01-.442-.183l-.707.707zm1.149.475h2.25v-1h-2.25v1zm2.25 0c.431 0 .844-.171 1.149-.476l-.707-.707a.625.625 0 01-.442.183v1zm1.149-.476c.305-.305.476-.718.476-1.149h-1a.625.625 0 01-.183.442l.707.707zm.476-1.149v-4.875h-1v4.875h1zm-.5-4.375h1.125v-1H21v1zm1.125 0c.431 0 .844-.171 1.149-.476l-.707-.707a.625.625 0 01-.442.183v1zm1.149-.476c.305-.305.476-.718.476-1.149h-1a.625.625 0 01-.183.442l.707.707zm.476-1.149V9h-1v5.25h1zm0-5.25c0-.43-.171-.844-.476-1.149l-.707.707A.625.625 0 0122.75 9h1zm-.476-1.149a1.625 1.625 0 00-1.149-.476v1c.166 0 .325.066.442.183l.707-.707zm-1.149-.476h-6.75v1h6.75v-1zm-6.75 0c-.431 0-.844.171-1.149.476l.707.707a.625.625 0 01.442-.183v-1zm-1.149.476a1.625 1.625 0 00-.476 1.15h1c0-.167.066-.326.183-.443l-.707-.707zm-.476 1.15v.374h1V9h-1zM7 3.374a1.75 1.75 0 01-1.75 1.75v1A2.75 2.75 0 008 3.375H7zm-1.75 1.75a1.75 1.75 0 01-1.75-1.75h-1a2.75 2.75 0 002.75 2.75v-1zM3.5 3.375c0-.966.784-1.75 1.75-1.75v-1a2.75 2.75 0 00-2.75 2.75h1zm1.75-1.75c.966 0 1.75.784 1.75 1.75h1A2.75 2.75 0 005.25.625v1zm5 7.375c0-.43-.171-.844-.476-1.149l-.707.707A.625.625 0 019.25 9h1zm-.476-1.149a1.625 1.625 0 00-1.149-.476v1c.166 0 .325.066.442.183l.707-.707zm-1.149-.476h-6.75v1h6.75v-1zm-6.75 0c-.431 0-.844.171-1.149.476l.707.707a.625.625 0 01.442-.183v-1zm-1.149.476a1.625 1.625 0 00-.476 1.15h1c0-.167.066-.326.183-.443l-.707-.707zM.25 9.001v5.25h1V9h-1zm0 5.25c0 .43.171.843.476 1.148l.707-.707a.625.625 0 01-.183-.442h-1zm.476 1.148c.305.305.718.476 1.149.476v-1a.625.625 0 01-.442-.183l-.707.707zm1.149.476H3v-1H1.875v1zm.625-.5v4.875h1v-4.875h-1zm0 4.875c0 .431.171.844.476 1.15l.707-.708a.625.625 0 01-.183-.442h-1zm.476 1.15c.305.304.718.475 1.149.475v-1a.625.625 0 01-.442-.183l-.707.707zm1.149.475h2.25v-1h-2.25v1zm2.25 0c.431 0 .844-.171 1.149-.476l-.707-.707a.625.625 0 01-.442.183v1zm1.149-.476c.305-.305.476-.718.476-1.149H7a.625.625 0 01-.183.442l.707.707zM8 20.25v-4.875H7v4.875h1zm5.75-15.375A1.75 1.75 0 0112 6.625v1a2.75 2.75 0 002.75-2.75h-1zM12 6.625a1.75 1.75 0 01-1.75-1.75h-1A2.75 2.75 0 0012 7.625v-1zm-1.75-1.75c0-.966.784-1.75 1.75-1.75v-1a2.75 2.75 0 00-2.75 2.75h1zM12 3.125c.966 0 1.75.784 1.75 1.75h1A2.75 2.75 0 0012 2.125v1zm3.375 5.75h-6.75v1h6.75v-1zm-6.75 0c-.431 0-.844.171-1.149.476l.707.707a.625.625 0 01.442-.183v-1zm-1.149.476A1.625 1.625 0 007 10.501h1c0-.167.066-.326.183-.443l-.707-.707zM7 10.501v5.25h1V10.5H7zm0 5.25c0 .43.171.843.476 1.148l.707-.707A.625.625 0 018 15.75H7zm.476 1.148c.305.305.718.476 1.149.476v-1a.625.625 0 01-.442-.183l-.707.707zm1.149.476H9.75v-1H8.625v1zm.625-.5v4.875h1v-4.875h-1zm0 4.875c0 .431.171.844.476 1.15l.707-.708a.625.625 0 01-.183-.442h-1zm.476 1.15c.305.304.718.475 1.149.475v-1a.625.625 0 01-.442-.183l-.707.707zm1.149.475h2.25v-1h-2.25v1zm2.25 0c.431 0 .844-.171 1.149-.476l-.707-.707a.625.625 0 01-.442.183v1zm1.149-.476c.305-.305.476-.718.476-1.149h-1a.625.625 0 01-.183.442l.707.707zm.476-1.149v-4.875h-1v4.875h1zm-.5-4.375h1.125v-1H14.25v1zm1.125 0c.431 0 .844-.171 1.149-.476l-.707-.707a.625.625 0 01-.442.183v1zm1.149-.476c.305-.305.476-.718.476-1.149h-1a.625.625 0 01-.183.442l.707.707zM17 15.75V10.5h-1v5.25h1zm0-5.25c0-.43-.171-.844-.476-1.149l-.707.707A.625.625 0 0116 10.5h1zm-.476-1.149a1.625 1.625 0 00-1.149-.476v1c.166 0 .325.066.442.183l.707-.707z" fill="currentColor"/></g><defs><clipPath id="dhclip0_5243_53905"><path fill="currentColor" d="M0 0h24v24H0z"/></clipPath></defs></symbol>
+		<symbol fill="none" viewBox="0 0 24 24" id="stzh-icon-target-bullet" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#dhclip0_2038_15052)"><path d="M12 .75v3m0 16.5v3M3.75 12h-3m22.5 0h-3M12 20.25a8.25 8.25 0 100-16.5 8.25 8.25 0 000 16.5z" stroke="currentColor" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><circle cx="12" cy="12" r="4" fill="currentColor"/></g><defs><clipPath id="dhclip0_2038_15052"><path fill="currentColor" d="M0 0h24v24H0z"/></clipPath></defs></symbol>
+		<symbol fill="none" viewBox="0 0 24 24" id="stzh-icon-team" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#diclip0_5243_53905)"><path d="M17 15.375a.5.5 0 10-1 0h1zm4 0v-.5a.5.5 0 00-.5.5h.5zM23.25 9h.5-.5zm-1.125-1.125v-.5.5zm-6.75 0v-.5.5zm-1.625 1.5a.5.5 0 001 0h-1zM9.25 9a.5.5 0 001 0h-1zm-.625-1.125v-.5.5zm-6.75 0v-.5.5zM.75 9h-.5.5zm0 5.25h-.5.5zM3 15.375h.5a.5.5 0 00-.5-.5v.5zm4.5 4.875H8h-.5zm.5-4.875a.5.5 0 10-1 0h1zM7.5 10.5H7h.5zm0 5.25H7h.5zm2.25 1.125h.5a.5.5 0 00-.5-.5v.5zm0 4.875h-.5.5zm4.5-4.875v-.5a.5.5 0 00-.5.5h.5zm6.25-13.5a1.75 1.75 0 01-1.75 1.75v1a2.75 2.75 0 002.75-2.75h-1zm-1.75 1.75A1.75 1.75 0 0117 3.375h-1a2.75 2.75 0 002.75 2.75v-1zM17 3.375c0-.966.784-1.75 1.75-1.75v-1A2.75 2.75 0 0016 3.375h1zm1.75-1.75c.966 0 1.75.784 1.75 1.75h1a2.75 2.75 0 00-2.75-2.75v1zM16 15.375v4.875h1v-4.875h-1zm0 4.875c0 .431.171.844.476 1.15l.707-.708A.625.625 0 0117 20.25h-1zm.476 1.15c.305.304.718.475 1.149.475v-1a.625.625 0 01-.442-.183l-.707.707zm1.149.475h2.25v-1h-2.25v1zm2.25 0c.431 0 .844-.171 1.149-.476l-.707-.707a.625.625 0 01-.442.183v1zm1.149-.476c.305-.305.476-.718.476-1.149h-1a.625.625 0 01-.183.442l.707.707zm.476-1.149v-4.875h-1v4.875h1zm-.5-4.375h1.125v-1H21v1zm1.125 0c.431 0 .844-.171 1.149-.476l-.707-.707a.625.625 0 01-.442.183v1zm1.149-.476c.305-.305.476-.718.476-1.149h-1a.625.625 0 01-.183.442l.707.707zm.476-1.149V9h-1v5.25h1zm0-5.25c0-.43-.171-.844-.476-1.149l-.707.707A.625.625 0 0122.75 9h1zm-.476-1.149a1.625 1.625 0 00-1.149-.476v1c.166 0 .325.066.442.183l.707-.707zm-1.149-.476h-6.75v1h6.75v-1zm-6.75 0c-.431 0-.844.171-1.149.476l.707.707a.625.625 0 01.442-.183v-1zm-1.149.476a1.625 1.625 0 00-.476 1.15h1c0-.167.066-.326.183-.443l-.707-.707zm-.476 1.15v.374h1V9h-1zM7 3.374a1.75 1.75 0 01-1.75 1.75v1A2.75 2.75 0 008 3.375H7zm-1.75 1.75a1.75 1.75 0 01-1.75-1.75h-1a2.75 2.75 0 002.75 2.75v-1zM3.5 3.375c0-.966.784-1.75 1.75-1.75v-1a2.75 2.75 0 00-2.75 2.75h1zm1.75-1.75c.966 0 1.75.784 1.75 1.75h1A2.75 2.75 0 005.25.625v1zm5 7.375c0-.43-.171-.844-.476-1.149l-.707.707A.625.625 0 019.25 9h1zm-.476-1.149a1.625 1.625 0 00-1.149-.476v1c.166 0 .325.066.442.183l.707-.707zm-1.149-.476h-6.75v1h6.75v-1zm-6.75 0c-.431 0-.844.171-1.149.476l.707.707a.625.625 0 01.442-.183v-1zm-1.149.476a1.625 1.625 0 00-.476 1.15h1c0-.167.066-.326.183-.443l-.707-.707zM.25 9.001v5.25h1V9h-1zm0 5.25c0 .43.171.843.476 1.148l.707-.707a.625.625 0 01-.183-.442h-1zm.476 1.148c.305.305.718.476 1.149.476v-1a.625.625 0 01-.442-.183l-.707.707zm1.149.476H3v-1H1.875v1zm.625-.5v4.875h1v-4.875h-1zm0 4.875c0 .431.171.844.476 1.15l.707-.708a.625.625 0 01-.183-.442h-1zm.476 1.15c.305.304.718.475 1.149.475v-1a.625.625 0 01-.442-.183l-.707.707zm1.149.475h2.25v-1h-2.25v1zm2.25 0c.431 0 .844-.171 1.149-.476l-.707-.707a.625.625 0 01-.442.183v1zm1.149-.476c.305-.305.476-.718.476-1.149H7a.625.625 0 01-.183.442l.707.707zM8 20.25v-4.875H7v4.875h1zm5.75-15.375A1.75 1.75 0 0112 6.625v1a2.75 2.75 0 002.75-2.75h-1zM12 6.625a1.75 1.75 0 01-1.75-1.75h-1A2.75 2.75 0 0012 7.625v-1zm-1.75-1.75c0-.966.784-1.75 1.75-1.75v-1a2.75 2.75 0 00-2.75 2.75h1zM12 3.125c.966 0 1.75.784 1.75 1.75h1A2.75 2.75 0 0012 2.125v1zm3.375 5.75h-6.75v1h6.75v-1zm-6.75 0c-.431 0-.844.171-1.149.476l.707.707a.625.625 0 01.442-.183v-1zm-1.149.476A1.625 1.625 0 007 10.501h1c0-.167.066-.326.183-.443l-.707-.707zM7 10.501v5.25h1V10.5H7zm0 5.25c0 .43.171.843.476 1.148l.707-.707A.625.625 0 018 15.75H7zm.476 1.148c.305.305.718.476 1.149.476v-1a.625.625 0 01-.442-.183l-.707.707zm1.149.476H9.75v-1H8.625v1zm.625-.5v4.875h1v-4.875h-1zm0 4.875c0 .431.171.844.476 1.15l.707-.708a.625.625 0 01-.183-.442h-1zm.476 1.15c.305.304.718.475 1.149.475v-1a.625.625 0 01-.442-.183l-.707.707zm1.149.475h2.25v-1h-2.25v1zm2.25 0c.431 0 .844-.171 1.149-.476l-.707-.707a.625.625 0 01-.442.183v1zm1.149-.476c.305-.305.476-.718.476-1.149h-1a.625.625 0 01-.183.442l.707.707zm.476-1.149v-4.875h-1v4.875h1zm-.5-4.375h1.125v-1H14.25v1zm1.125 0c.431 0 .844-.171 1.149-.476l-.707-.707a.625.625 0 01-.442.183v1zm1.149-.476c.305-.305.476-.718.476-1.149h-1a.625.625 0 01-.183.442l.707.707zM17 15.75V10.5h-1v5.25h1zm0-5.25c0-.43-.171-.844-.476-1.149l-.707.707A.625.625 0 0116 10.5h1zm-.476-1.149a1.625 1.625 0 00-1.149-.476v1c.166 0 .325.066.442.183l.707-.707z" fill="currentColor"/></g><defs><clipPath id="diclip0_5243_53905"><path fill="currentColor" d="M0 0h24v24H0z"/></clipPath></defs></symbol>
 		<symbol fill="none" viewBox="0 0 24 24" id="stzh-icon-text-message" xmlns="http://www.w3.org/2000/svg"><path d="M2.75 3a2 2 0 00-2 2v11a2 2 0 002 2H7.5v4.125L12 18h9.25a2 2 0 002-2V5a2 2 0 00-2-2H2.75z" stroke="currentColor" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M7.5 11.25a.75.75 0 100-1.5.75.75 0 000 1.5zM12 11.25a.75.75 0 100-1.5.75.75 0 000 1.5zM16.5 11.25a.75.75 0 100-1.5.75.75 0 000 1.5z" stroke="currentColor" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/></symbol>
-		<symbol fill="none" viewBox="0 0 24 24" id="stzh-icon-thermometer" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#djclip0_1639_22469)"><path d="M12 6.75v9m0 0a2.25 2.25 0 100 4.5 2.25 2.25 0 000-4.5zm3-2.063V3.75a3 3 0 00-6 0v9.938a5.25 5.25 0 106 0z" stroke="currentColor" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="djclip0_1639_22469"><path fill="currentColor" d="M0 0h24v24H0z"/></clipPath></defs></symbol>
+		<symbol fill="none" viewBox="0 0 24 24" id="stzh-icon-thermometer" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#dkclip0_1639_22469)"><path d="M12 6.75v9m0 0a2.25 2.25 0 100 4.5 2.25 2.25 0 000-4.5zm3-2.063V3.75a3 3 0 00-6 0v9.938a5.25 5.25 0 106 0z" stroke="currentColor" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="dkclip0_1639_22469"><path fill="currentColor" d="M0 0h24v24H0z"/></clipPath></defs></symbol>
 		<symbol fill="none" viewBox="0 0 24 24" id="stzh-icon-transcript" xmlns="http://www.w3.org/2000/svg"><path d="M6 9.5h8m-8 6h8m-4-3h8m-2-3h2m-2 6h2m-12-3h2M2 7a2 2 0 012-2h16a2 2 0 012 2v11a2 2 0 01-2 2H4a2 2 0 01-2-2V7z" stroke="currentColor" stroke-linecap="round"/></symbol>
-		<symbol fill="none" viewBox="0 0 24 24" id="stzh-icon-twitter" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#dlclip0_1638_23131)"><path d="M23.643 4.937c-.835.37-1.732.62-2.675.733a4.67 4.67 0 002.048-2.578 9.3 9.3 0 01-2.958 1.13 4.66 4.66 0 00-7.938 4.25 13.229 13.229 0 01-9.602-4.868c-.4.69-.63 1.49-.63 2.342A4.66 4.66 0 003.96 9.824a4.647 4.647 0 01-2.11-.583v.06a4.66 4.66 0 003.737 4.568 4.692 4.692 0 01-2.104.08 4.661 4.661 0 004.352 3.234 9.348 9.348 0 01-5.786 1.995 9.5 9.5 0 01-1.112-.065 13.175 13.175 0 007.14 2.093c8.57 0 13.255-7.098 13.255-13.254 0-.2-.005-.402-.014-.602a9.47 9.47 0 002.323-2.41l.002-.003z" stroke="currentColor" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="dlclip0_1638_23131"><path fill="currentColor" d="M0 0h24v24H0z"/></clipPath></defs></symbol>
+		<symbol fill="none" viewBox="0 0 24 24" id="stzh-icon-twitter" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#dmclip0_1638_23131)"><path d="M23.643 4.937c-.835.37-1.732.62-2.675.733a4.67 4.67 0 002.048-2.578 9.3 9.3 0 01-2.958 1.13 4.66 4.66 0 00-7.938 4.25 13.229 13.229 0 01-9.602-4.868c-.4.69-.63 1.49-.63 2.342A4.66 4.66 0 003.96 9.824a4.647 4.647 0 01-2.11-.583v.06a4.66 4.66 0 003.737 4.568 4.692 4.692 0 01-2.104.08 4.661 4.661 0 004.352 3.234 9.348 9.348 0 01-5.786 1.995 9.5 9.5 0 01-1.112-.065 13.175 13.175 0 007.14 2.093c8.57 0 13.255-7.098 13.255-13.254 0-.2-.005-.402-.014-.602a9.47 9.47 0 002.323-2.41l.002-.003z" stroke="currentColor" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="dmclip0_1638_23131"><path fill="currentColor" d="M0 0h24v24H0z"/></clipPath></defs></symbol>
 		<symbol fill="none" viewBox="0 0 24 24" id="stzh-icon-twitter-reply" xmlns="http://www.w3.org/2000/svg"><path d="M10.5 17v4l7.002-4.334A7.386 7.386 0 0013.614 3H10a7 7 0 100 14h.5z" stroke="currentColor" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/></symbol>
 		<symbol fill="none" viewBox="0 0 24 24" id="stzh-icon-twitter-retweet" xmlns="http://www.w3.org/2000/svg"><path d="M4.5 4.5V17a3 3 0 003 3H13M4.5 4.5L1 8m3.5-3.5L8 8m11.5 12V7.5a3 3 0 00-3-3H11M19.5 20l3.5-3.5M19.5 20L16 16.5" stroke="currentColor" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/></symbol>
-		<symbol fill="none" viewBox="0 0 24 24" id="stzh-icon-unlock" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#doclip0_7292_54409)"><path d="M7.125 11.25V5.625a4.875 4.875 0 119.75 0V6.3M12 15.375v3.75M3.75 11.25h16.5v12H3.75v-12z" stroke="currentColor" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="doclip0_7292_54409"><path fill="currentColor" d="M0 0h24v24H0z"/></clipPath></defs></symbol>
+		<symbol fill="none" viewBox="0 0 24 24" id="stzh-icon-unlock" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#dpclip0_7292_54409)"><path d="M7.125 11.25V5.625a4.875 4.875 0 119.75 0V6.3M12 15.375v3.75M3.75 11.25h16.5v12H3.75v-12z" stroke="currentColor" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="dpclip0_7292_54409"><path fill="currentColor" d="M0 0h24v24H0z"/></clipPath></defs></symbol>
 		<symbol fill="none" viewBox="0 0 24 24" id="stzh-icon-user" xmlns="http://www.w3.org/2000/svg"><path d="M12 12a4 4 0 100-8 4 4 0 000 8zm0 0a8 8 0 00-8 8h16a8 8 0 00-8-8z" stroke="currentColor" stroke-linejoin="round"/></symbol>
 		<symbol fill="none" viewBox="0 0 24 24" id="stzh-icon-view" xmlns="http://www.w3.org/2000/svg"><path d="M12 5.438C5.55 5.438.937 12 .937 12S5.55 18.563 12 18.563 23.063 12 23.063 12 18.45 5.437 12 5.437z" stroke="currentColor" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 16.313a4.5 4.5 0 100-9 4.5 4.5 0 000 9z" stroke="currentColor" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/></symbol>
 		<symbol fill="none" viewBox="0 0 24 24" id="stzh-icon-view-hidden" xmlns="http://www.w3.org/2000/svg"><path d="M9.713 18.488c.75.176 1.517.264 2.287.262 6.45 0 11.063-6.563 11.063-6.563A19.43 19.43 0 0019.5 8.55M12 16.5a4.5 4.5 0 004.5-4.5m-1.313-3.188a4.508 4.508 0 00-6.374 6.376M23.25.75L.75 23.25M17.063 6.937A10.913 10.913 0 0012 5.625C5.55 5.625.937 12.188.937 12.188a19.087 19.087 0 005.776 5.1l10.35-10.35z" stroke="currentColor" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/></symbol>
@@ -260,8 +262,8 @@ for further details on how to create this embeddable sprite variant.
 		<symbol fill="none" viewBox="0 0 16 16" id="stzh-icon-warning-big" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="7.5" stroke="currentColor"/><path d="M7.5 8.627a.5.5 0 001 0h-1zM8.5 4a.5.5 0 00-1 0h1zm0 4.627V4h-1v4.627h1zm-.421 2.795A.078.078 0 018 11.5v1c.596 0 1.079-.483 1.079-1.078h-1zM8 11.5a.078.078 0 01-.078-.078h-1c0 .595.483 1.078 1.078 1.078v-1zm-.078-.078c0-.044.035-.079.078-.079v-1c-.595 0-1.078.483-1.078 1.079h1zM8 11.343c.043 0 .079.035.079.079h1c0-.596-.483-1.079-1.079-1.079v1z" fill="currentColor"/></symbol>
 		<symbol fill="none" viewBox="0 0 24 24" id="stzh-icon-web-Link" xmlns="http://www.w3.org/2000/svg"><path d="M15.75 7.75a.5.5 0 000 1v-1zm3.75.5v-.5.5zM9.75 12h.5-.5zm.565-.65a.5.5 0 00-.98-.2l.98.2zm-2.065 4.9a.5.5 0 000-1v1zM.75 12h-.5.5zm9.75-3.75v-.5.5zM14.25 12h-.5.5zm-.565.65a.5.5 0 00.98.2l-.98-.2zm2.065-3.9h3.75v-1h-3.75v1zm3.75 0a3.25 3.25 0 012.298.952l.707-.707A4.25 4.25 0 0019.5 7.75v1zm2.298.952c.61.61.952 1.436.952 2.298h1a4.25 4.25 0 00-1.245-3.005l-.707.707zM22.75 12a3.25 3.25 0 01-.952 2.298l.707.707A4.25 4.25 0 0023.75 12h-1zm-.952 2.298a3.25 3.25 0 01-2.298.952v1a4.25 4.25 0 003.005-1.245l-.707-.707zm-2.298.952h-6v1h6v-1zm-6 0a3.25 3.25 0 01-2.298-.952l-.707.707A4.25 4.25 0 0013.5 16.25v-1zm-2.298-.952A3.25 3.25 0 0110.25 12h-1a4.25 4.25 0 001.245 3.005l.707-.707zM10.25 12c0-.218.022-.436.065-.65l-.98-.199a4.25 4.25 0 00-.085.85h1zm-2 3.251H4.5v1h3.75v-1zm-3.75 0a3.25 3.25 0 01-1.244-.247l-.382.924a4.25 4.25 0 001.626.323v-1zm-1.244-.247a3.25 3.25 0 01-1.054-.705l-.707.707a4.25 4.25 0 001.379.921l.382-.923zm-1.054-.705A3.25 3.25 0 011.25 12h-1a4.25 4.25 0 001.245 3.005l.707-.707zM1.25 12c0-.862.342-1.689.952-2.298l-.707-.707A4.25 4.25 0 00.25 12h1zm.952-2.298A3.25 3.25 0 014.5 8.75v-1a4.25 4.25 0 00-3.005 1.245l.707.707zM4.5 8.75h6v-1h-6v1zm6 0a3.25 3.25 0 012.298.952l.707-.707A4.25 4.25 0 0010.5 7.75v1zm2.298.952c.61.61.952 1.436.952 2.298h1a4.25 4.25 0 00-1.245-3.005l-.707.707zM13.75 12c0 .218-.022.436-.065.65l.98.199a4.25 4.25 0 00.085-.85h-1z" fill="currentColor"/></symbol>
 		<symbol fill="none" viewBox="0 0 24 24" id="stzh-icon-wifi-signal" xmlns="http://www.w3.org/2000/svg"><path d="M4 2a18 18 0 0118 18M4 7.333A12.667 12.667 0 0116.667 20M4 12.667A7.334 7.334 0 0111.333 20M6 20a2 2 0 11-4 0 2 2 0 014 0z" stroke="currentColor" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/></symbol>
-		<symbol fill="none" viewBox="0 0 24 24" id="stzh-icon-world-globe" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#dxclip0_1848_35505)"><path d="M12 23.25c3.334 0 6.038-5.037 6.038-11.25S15.334.75 12 .75m0 22.5c-3.334 0-6.037-5.037-6.037-11.25S8.665.75 12 .75m0 22.5V.75m0 22.5c6.213 0 11.25-5.037 11.25-11.25S18.213.75 12 .75m0 22.5C5.787 23.25.75 18.213.75 12S5.787.75 12 .75M1.687 16.5h20.625m-20.625-9h20.625" stroke="currentColor" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="dxclip0_1848_35505"><path fill="currentColor" d="M0 0h24v24H0z"/></clipPath></defs></symbol>
-		<symbol fill="none" viewBox="0 0 24 24" id="stzh-icon-xing" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#dyclip0_1639_22489)" stroke="currentColor" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"><path d="M9.35 5.802a1.045 1.045 0 00-.915-.596H5.201a.523.523 0 00-.457.21.498.498 0 00.035.492l2.18 3.79v.036l-3.41 6.037a.49.49 0 000 .492.425.425 0 00.422.21h3.234a.966.966 0 00.879-.631s3.375-5.968 3.516-6.178c-.035 0-2.25-3.862-2.25-3.862zM22.533 1.45a.42.42 0 000-.491.426.426 0 00-.422-.21h-3.27a.966.966 0 00-.879.63s-6.995 12.391-7.206 12.778c0 .035 4.605 8.46 4.605 8.46a1.074 1.074 0 00.914.63h3.234a.424.424 0 00.422-.21.598.598 0 000-.491l-4.57-8.354v-.035L22.534 1.45z"/></g><defs><clipPath id="dyclip0_1639_22489"><path fill="currentColor" d="M0 0h24v24H0z"/></clipPath></defs></symbol>
+		<symbol fill="none" viewBox="0 0 24 24" id="stzh-icon-world-globe" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#dyclip0_1848_35505)"><path d="M12 23.25c3.334 0 6.038-5.037 6.038-11.25S15.334.75 12 .75m0 22.5c-3.334 0-6.037-5.037-6.037-11.25S8.665.75 12 .75m0 22.5V.75m0 22.5c6.213 0 11.25-5.037 11.25-11.25S18.213.75 12 .75m0 22.5C5.787 23.25.75 18.213.75 12S5.787.75 12 .75M1.687 16.5h20.625m-20.625-9h20.625" stroke="currentColor" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="dyclip0_1848_35505"><path fill="currentColor" d="M0 0h24v24H0z"/></clipPath></defs></symbol>
+		<symbol fill="none" viewBox="0 0 24 24" id="stzh-icon-xing" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#dzclip0_1639_22489)" stroke="currentColor" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"><path d="M9.35 5.802a1.045 1.045 0 00-.915-.596H5.201a.523.523 0 00-.457.21.498.498 0 00.035.492l2.18 3.79v.036l-3.41 6.037a.49.49 0 000 .492.425.425 0 00.422.21h3.234a.966.966 0 00.879-.631s3.375-5.968 3.516-6.178c-.035 0-2.25-3.862-2.25-3.862zM22.533 1.45a.42.42 0 000-.491.426.426 0 00-.422-.21h-3.27a.966.966 0 00-.879.63s-6.995 12.391-7.206 12.778c0 .035 4.605 8.46 4.605 8.46a1.074 1.074 0 00.914.63h3.234a.424.424 0 00.422-.21.598.598 0 000-.491l-4.57-8.354v-.035L22.534 1.45z"/></g><defs><clipPath id="dzclip0_1639_22489"><path fill="currentColor" d="M0 0h24v24H0z"/></clipPath></defs></symbol>
 </svg>
 
 <!--
@@ -1207,6 +1209,17 @@ for further details on how to create this embeddable sprite variant.
 					</div>
 					<h2>stzh-icon-target</h2>
 				</li>
+				<li title="stzh-icon-target-bullet">
+					<div class="icon-box">
+
+						<!-- stzh-icon-target-bullet -->
+						<svg class="svg-stzh-icon-target-bullet-dims">
+							<use xlink:href="#stzh-icon-target-bullet"></use>
+						</svg>
+
+					</div>
+					<h2>stzh-icon-target-bullet</h2>
+				</li>
 				<li title="stzh-icon-team">
 					<div class="icon-box">