@synergy-design-system/components 1.13.0 → 1.15.0

package/package.json

@@ -4,7 +4,7 @@
     "url": "https://www.sick.com"
   },
   "name": "@synergy-design-system/components",
-  "version": "1.13.0",
+  "version": "1.15.0",
   "description": "",
   "repository": {
     "type": "git",
@@ -48,6 +48,7 @@
     "@semantic-release/exec": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
     "@types/mocha": "^10.0.6",
+    "@types/sinon": "^17.0.3",
     "@typescript-eslint/eslint-plugin": "^6.21.0",
     "@typescript-eslint/parser": "^6.21.0",
     "@web/dev-server-esbuild": "^1.0.2",
@@ -88,9 +89,9 @@
     "user-agent-data-types": "^0.4.2",
     "vendorism": "^3.0.0",
     "vue-tsc": "^1.8.27",
+    "@synergy-design-system/eslint-config-syn": "0.1.0",
     "@synergy-design-system/stylelint-config-syn": "0.1.0",
-    "@synergy-design-system/tokens": "1.9.0",
-    "@synergy-design-system/eslint-config-syn": "0.1.0"
+    "@synergy-design-system/tokens": "1.11.0"
   },
   "release": {
     "branches": [

package/dist/chunks/chunk.SR56N2RY.js

@@ -1,80 +0,0 @@
-import {
-  header_styles_default
-} from "./chunk.JDXKGJ63.js";
-import {
-  icon_default
-} from "./chunk.WBOGDY52.js";
-import {
-  HasSlotController
-} from "./chunk.66WXVGAW.js";
-import {
-  SynergyElement,
-  component_styles_default
-} from "./chunk.LUPEZL5H.js";
-import {
-  __decorateClass
-} from "./chunk.QNDC5KWA.js";
-
-// src/components/header/header.component.ts
-import { classMap } from "lit/directives/class-map.js";
-import { html } from "lit/static-html.js";
-import { property } from "lit/decorators.js";
-var SynHeader = class extends SynergyElement {
-  constructor() {
-    super(...arguments);
-    this.hasSlotController = new HasSlotController(this, "[default]", "logo", "label", "meta-navigation", "navigation");
-    this.label = "";
-  }
-  render() {
-    const hasNavigation = this.hasSlotController.test("navigation");
-    return html`
-      <header
-        class=${classMap({
-      header: true,
-      "header--has-navigation": hasNavigation
-    })}
-        part="base"
-      >
-        <!-- .header__content -->
-        <div part="content" class="header__content">
-
-          <div part="logo" class="header__logo">
-            <slot name="logo">
-              <syn-icon name="logo-color" library="system" label="SICK Sensor Intelligence"></syn-icon>
-            </slot>
-          </div>
-
-          <div part="label" class="header__label">
-            <slot>
-              ${this.label}
-            </slot>
-          </div>
-
-          <div part="meta-navigation" class="header__meta-navigation">
-            <slot name="meta-navigation"></slot>
-          </div>
-        </div>
-        <!-- /.header__content -->
-
-        <div part="navigation" class="header__navigation">
-          <slot name="navigation"></slot>
-        </div>
-      </header>
-    `;
-  }
-};
-SynHeader.styles = [
-  component_styles_default,
-  header_styles_default
-];
-SynHeader.dependencies = {
-  "syn-icon": icon_default
-};
-__decorateClass([
-  property()
-], SynHeader.prototype, "label", 2);
-
-export {
-  SynHeader
-};
-//# sourceMappingURL=chunk.SR56N2RY.js.map

package/dist/chunks/chunk.SR56N2RY.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/components/header/header.component.ts"],
-  "sourcesContent": ["/* eslint-disable @typescript-eslint/unbound-method */\nimport { classMap } from 'lit/directives/class-map.js';\nimport { html } from 'lit/static-html.js';\nimport { property } from 'lit/decorators.js';\nimport type { CSSResultGroup } from 'lit';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport { HasSlotController } from '../../internal/slot.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport styles from './header.styles.js';\nimport SynIcon from '../icon/icon.js';\n\n/**\n * @summary The <syn-header /> element provides a generic application header\n * that can be used to add applications name, toolbar and primary navigation.\n *\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-header--docs\n * @status stable\n * @since 1.10.0\n *\n * @slot - The label for the header.\n * @slot logo - The logo that should be displayed. Will fall back to the SICK logo if not provided.\n * @slot meta-navigation - The meta-navigation is used to add various application toolbar icons.\n *                     Best used with `<syn-icon-button />` and `<syn-drop-down />`\n * @slot navigation - This slot can be used to add an optional horizontal navigation\n *\n * @csspart base - The component's base wrapper.\n * @csspart content - The wrapper most content items reside\n * @csspart logo - The wrapper the application logo resides in\n * @csspart label - The element wrapping the application name\n * @csspart meta-navigation - The Item wrapping the optional application menu\n * @csspart navigation - The wrapper that is holding the optional top navigation section\n */\nexport default class SynHeader extends SynergyElement {\n  static styles: CSSResultGroup = [\n    componentStyles,\n    styles,\n  ];\n\n  static dependencies = {\n    'syn-icon': SynIcon,\n  };\n\n  private readonly hasSlotController = new HasSlotController(this, '[default]', 'logo', 'label', 'meta-navigation', 'navigation');\n\n  /**\n   * The headers label. If you need to display HTML, use the `label` slot instead.\n   */\n  @property() label = '';\n\n  render() {\n    const hasNavigation = this.hasSlotController.test('navigation');\n\n    return html`\n      <header\n        class=${classMap({\n          header: true,\n          'header--has-navigation': hasNavigation,\n        })}\n        part=\"base\"\n      >\n        <!-- .header__content -->\n        <div part=\"content\" class=\"header__content\">\n\n          <div part=\"logo\" class=\"header__logo\">\n            <slot name=\"logo\">\n              <syn-icon name=\"logo-color\" library=\"system\" label=\"SICK Sensor Intelligence\"></syn-icon>\n            </slot>\n          </div>\n\n          <div part=\"label\" class=\"header__label\">\n            <slot>\n              ${this.label}\n            </slot>\n          </div>\n\n          <div part=\"meta-navigation\" class=\"header__meta-navigation\">\n            <slot name=\"meta-navigation\"></slot>\n          </div>\n        </div>\n        <!-- /.header__content -->\n\n        <div part=\"navigation\" class=\"header__navigation\">\n          <slot name=\"navigation\"></slot>\n        </div>\n      </header>\n    `;\n  }\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AACA,SAAS,gBAAgB;AACzB,SAAS,YAAY;AACrB,SAAS,gBAAgB;AA6BzB,IAAqB,YAArB,cAAuC,eAAe;AAAA,EAAtD;AAAA;AAUE,SAAiB,oBAAoB,IAAI,kBAAkB,MAAM,aAAa,QAAQ,SAAS,mBAAmB,YAAY;AAKlH,iBAAQ;AAAA;AAAA,EAEpB,SAAS;AACP,UAAM,gBAAgB,KAAK,kBAAkB,KAAK,YAAY;AAE9D,WAAO;AAAA;AAAA,gBAEK,SAAS;AAAA,MACf,QAAQ;AAAA,MACR,0BAA0B;AAAA,IAC5B,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAcM,KAAK,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAexB;AACF;AAvDqB,UACZ,SAAyB;AAAA,EAC9B;AAAA,EACA;AACF;AAJmB,UAMZ,eAAe;AAAA,EACpB,YAAY;AACd;AAOY;AAAA,EAAX,SAAS;AAAA,GAfS,UAeP;",
-  "names": []
-}

package/dist/chunks/chunk.UYD2OVFV.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/components/drawer/drawer.custom.styles.ts"],
-  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n  :host {\n    /**\n     * Used as the default padding for the drawer title\n     */\n    --header-spacing: var(--syn-spacing-large) var(--syn-spacing-x-small) 0 var(--syn-spacing-large);\n\n    /**\n     * Defines the default body spacing\n     */\n    --body-spacing: var(--syn-spacing-medium) var(--syn-spacing-large);\n\n    /**\n     * Defines the default footer spacing\n     */\n    --footer-spacing: var(--syn-spacing-medium) var(--syn-spacing-large) var(--syn-spacing-large);\n  }\n\n  /**\n   * Synergy uses a border to distinguish the drawer from its background and\n   * removes the default shoelace shadow completely\n   */\n  .drawer__panel {\n    border: 0 solid var(--syn-color-neutral-300);\n    box-shadow: none;\n    color: var(--syn-color-neutral-950);\n  }\n\n  /*\n   * The border of the panel is always placed in direction to the content,\n   * depending on the position of the drawer itself\n   */\n  .drawer--end .drawer__panel {\n    border-left-width: var(--syn-border-width-small);\n  }\n\n  .drawer--start .drawer__panel {\n    border-right-width: var(--syn-border-width-small);\n  }\n\n  .drawer--top .drawer__panel {\n    border-bottom-width: var(--syn-border-width-small);\n  }\n\n  .drawer--bottom .drawer__panel {\n    border-top-width: var(--syn-border-width-small);\n  }\n\n  .drawer__header-actions {\n    align-items: flex-start;\n    gap: var(--syn-spacing-x-small);\n    padding: var(--syn-spacing-large) var(--syn-spacing-x-small) 0 0;\n  }\n\n  .drawer__title {\n    font-family: var(--syn-font-sans);\n    font-size: var(--syn-font-size-x-large);\n    font-weight: var(--syn-font-weight-bold);\n    line-height: var(--syn-line-height-normal);\n  }\n\n  /**\n   * We need this to make sure we are big enough as defined in the layout\n   * When omitting this statement, we will get rounding problems via line-height\n   */\n  .drawer__title,\n  .header-actions {\n    min-height: 64px;\n  }\n\n  .drawer__header-actions syn-icon-button,\n  .drawer__header-actions ::slotted(syn-icon-button) {\n    color: var(--syn-color-neutral-950);\n    font-size: var(--syn-font-size-x-large);\n  }\n`;\n"],
-  "mappings": ";AAAA,SAAS,WAAW;AAEpB,IAAO,+BAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
-  "names": []
-}