@sbb-esta/lyne-elements-dev 4.7.0-dev.1773236484 → 4.7.0-dev.1773245052

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/core/styles/core.scss +9 -8
  2. package/core.css +14 -5
  3. package/custom-elements.json +1074 -1074
  4. package/development/link/common/block-link-common.js +14 -25
  5. package/development/message/message.component.d.ts.map +1 -1
  6. package/development/message/message.component.js +8 -23
  7. package/link/common/block-link-common.js +26 -26
  8. package/message/message.component.js +14 -16
  9. package/off-brand-theme.css +14 -5
  10. package/package.json +2 -2
  11. package/safety-theme.css +14 -5
  12. package/standard-theme.css +14 -5
package/development/link/common/block-link-common.js CHANGED
@@ -23,7 +23,6 @@ const blockStyle = css`:host {
23
23
  --sbb-link-color-hover: light-dark(var(--sbb-color-primary125), var(--sbb-color-cloud));
24
24
  --sbb-link-color-active: var(--sbb-color-primary150);
25
25
  --sbb-link-color-active: light-dark(var(--sbb-color-primary150), var(--sbb-color-silver));
26
- --sbb-link-gap: var(--sbb-spacing-fixed-1x);
27
26
  display: block;
28
27
  }
29
28
 
@@ -45,38 +44,28 @@ const blockStyle = css`:host {
45
44
  --sbb-link-text-decoration-line: underline;
46
45
  }
47
46
 
48
- .sbb-action-base {
49
- gap: var(--sbb-link-gap);
47
+ :host([size=xs]) {
48
+ --sbb-block-link-font-size: var(--sbb-text-font-size-xs);
50
49
  }
51
- :host([size=xs]) .sbb-action-base {
52
- --sbb-text-font-size: var(--sbb-text-font-size-xs);
53
- font-family: var(--sbb-typo-font-family);
54
- font-weight: normal;
55
- line-height: var(--sbb-typo-line-height-text);
56
- letter-spacing: var(--sbb-typo-letter-spacing-text);
57
- font-size: var(--sbb-text-font-size);
50
+
51
+ :host([size=s]) {
52
+ --sbb-block-link-font-size: var(--sbb-text-font-size-s);
58
53
  }
59
- :host([size=s]) .sbb-action-base {
60
- --sbb-text-font-size: var(--sbb-text-font-size-s);
61
- font-family: var(--sbb-typo-font-family);
62
- font-weight: normal;
63
- line-height: var(--sbb-typo-line-height-text);
64
- letter-spacing: var(--sbb-typo-letter-spacing-text);
65
- font-size: var(--sbb-text-font-size);
54
+
55
+ :host([size=m]) {
56
+ --sbb-block-link-font-size: var(--sbb-text-font-size-m);
66
57
  }
67
- :host([size=m]) .sbb-action-base {
68
- --sbb-text-font-size: var(--sbb-text-font-size-m);
69
- font-family: var(--sbb-typo-font-family);
70
- font-weight: normal;
71
- line-height: var(--sbb-typo-line-height-text);
58
+
59
+ .sbb-action-base {
60
+ gap: var(--sbb-block-link-gap);
72
61
  letter-spacing: var(--sbb-typo-letter-spacing-text);
73
- font-size: var(--sbb-text-font-size);
62
+ font-size: var(--sbb-block-link-font-size);
74
63
  }
75
64
 
76
65
  .sbb-link__icon {
77
66
  position: relative;
78
67
  height: calc(var(--sbb-typo-line-height-text) * 1em);
79
- width: var(--sbb-size-icon-ui-small);
68
+ width: var(--sbb-block-link-icon-size);
80
69
  flex: 0 0 auto;
81
70
  align-self: start;
82
71
  }
@@ -132,4 +121,4 @@ const SbbBlockLinkCommonElementMixin = (superClass) => {
132
121
  export {
133
122
  SbbBlockLinkCommonElementMixin
134
123
  };
135
- //# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYmxvY2stbGluay1jb21tb24uanMiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3NyYy9lbGVtZW50cy9saW5rL2NvbW1vbi9ibG9jay1saW5rLWNvbW1vbi50cyJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgdHlwZSB7IENTU1Jlc3VsdEdyb3VwLCBUZW1wbGF0ZVJlc3VsdCB9IGZyb20gJ2xpdCc7XG5pbXBvcnQgeyBwcm9wZXJ0eSB9IGZyb20gJ2xpdC9kZWNvcmF0b3JzLmpzJztcbmltcG9ydCB7IGh0bWwgfSBmcm9tICdsaXQvc3RhdGljLWh0bWwuanMnO1xuXG5pbXBvcnQgdHlwZSB7IFNiYkFjdGlvbkJhc2VFbGVtZW50IH0gZnJvbSAnLi4vLi4vY29yZS9iYXNlLWVsZW1lbnRzLnRzJztcbmltcG9ydCB0eXBlIHsgU2JiSWNvblBsYWNlbWVudCB9IGZyb20gJy4uLy4uL2NvcmUvaW50ZXJmYWNlcy50cyc7XG5pbXBvcnQgdHlwZSB7IEFic3RyYWN0Q29uc3RydWN0b3IgfSBmcm9tICcuLi8uLi9jb3JlL21peGlucy50cyc7XG5pbXBvcnQgeyBib3hTaXppbmdTdHlsZXMgfSBmcm9tICcuLi8uLi9jb3JlL3N0eWxlcy50cyc7XG5pbXBvcnQgeyBTYmJJY29uTmFtZU1peGluIH0gZnJvbSAnLi4vLi4vaWNvbi50cyc7XG5cbmltcG9ydCB7IFNiYkxpbmtDb21tb25FbGVtZW50TWl4aW4gfSBmcm9tICcuL2xpbmstY29tbW9uLnRzJztcbi8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBpbXBvcnQteC9vcmRlclxuaW1wb3J0IGJsb2NrU3R5bGUgZnJvbSAnLi9ibG9jay1saW5rLnNjc3M/bGl0JmlubGluZSc7XG5pbXBvcnQgc3R5bGUgZnJvbSAnLi9saW5rLnNjc3M/bGl0JmlubGluZSc7XG5cbmV4cG9ydCBkZWNsYXJlIGNsYXNzIFNiYkJsb2NrTGlua0NvbW1vbkVsZW1lbnRNaXhpblR5cGUgZXh0ZW5kcyBTYmJMaW5rQ29tbW9uRWxlbWVudE1peGluKFxuICBTYmJJY29uTmFtZU1peGluKFNiYkFjdGlvbkJhc2VFbGVtZW50KSxcbikge1xuICBwdWJsaWMgYWNjZXNzb3IgaWNvblBsYWNlbWVudDogU2JiSWNvblBsYWNlbWVudDtcbn1cblxuLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIEB0eXBlc2NyaXB0LWVzbGludC9uYW1pbmctY29udmVudGlvblxuZXhwb3J0IGNvbnN0IFNiYkJsb2NrTGlua0NvbW1vbkVsZW1lbnRNaXhpbiA9IDxUIGV4dGVuZHMgQWJzdHJhY3RDb25zdHJ1Y3RvcjxTYmJBY3Rpb25CYXNlRWxlbWVudD4+KFxuICBzdXBlckNsYXNzOiBULFxuKTogQWJzdHJhY3RDb25zdHJ1Y3RvcjxTYmJCbG9ja0xpbmtDb21tb25FbGVtZW50TWl4aW5UeXBlPiAmIFQgPT4ge1xuICBhYnN0cmFjdCBjbGFzcyBTYmJCbG9ja0xpbmtDb21tb25FbGVtZW50XG4gICAgZXh0ZW5kcyBTYmJMaW5rQ29tbW9uRWxlbWVudE1peGluKFNiYkljb25OYW1lTWl4aW4oc3VwZXJDbGFzcykpXG4gICAgaW1wbGVtZW50cyBQYXJ0aWFsPFNiYkJsb2NrTGlua0NvbW1vbkVsZW1lbnRNaXhpblR5cGU+XG4gIHtcbiAgICBwdWJsaWMgc3RhdGljIHN0eWxlczogQ1NTUmVzdWx0R3JvdXAgPSBbYm94U2l6aW5nU3R5bGVzLCBzdHlsZSwgYmxvY2tTdHlsZV07XG5cbiAgICAvKiogTW92ZXMgdGhlIGljb24gdG8gdGhlIGVuZCBvZiB0aGUgY29tcG9uZW50IGlmIHNldCB0byB0cnVlLiAqL1xuICAgIEBwcm9wZXJ0eSh7IGF0dHJpYnV0ZTogJ2ljb24tcGxhY2VtZW50JywgcmVmbGVjdDogdHJ1ZSB9KVxuICAgIHB1YmxpYyBhY2Nlc3NvciBpY29uUGxhY2VtZW50OiBTYmJJY29uUGxhY2VtZW50ID0gJ3N0YXJ0JztcblxuICAgIHByb3RlY3RlZCBvdmVycmlkZSByZW5kZXJUZW1wbGF0ZSgpOiBUZW1wbGF0ZVJlc3VsdCB7XG4gICAgICByZXR1cm4gaHRtbGBcbiAgICAgICAgPHNwYW4gY2xhc3M9XCJzYmItbGlua19faWNvblwiPiAke3N1cGVyLnJlbmRlckljb25TbG90KCl9IDwvc3Bhbj5cbiAgICAgICAgPHNsb3Q+PC9zbG90PlxuICAgICAgYDtcbiAgICB9XG4gIH1cbiAgcmV0dXJuIFNiYkJsb2NrTGlua0NvbW1vbkVsZW1lbnQgYXMgdW5rbm93biBhcyBBYnN0cmFjdENvbnN0cnVjdG9yPFNiYkJsb2NrTGlua0NvbW1vbkVsZW1lbnRNaXhpblR5cGU+ICZcbiAgICBUO1xufTtcbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0FBc0JPLE1BQU0saUNBQWlDLENBQzVDLGVBQytEO01BQ2hELDZCQUF5QixNQUFBOztBQUM5QixRQUFBLGNBQUEsMEJBQTBCLGlCQUFpQixVQUFVLENBQUM7Ozs7QUFEakQsV0FBQSxtQkFDTCxZQUF1RDtBQUFBOztBQU8vRCw0REFBQSxrQkFBQSxNQUFBLDZCQUFrRCxPQUFPOzs7O01BQXpELElBQWdCLGdCQUFhO0FBQUEsZUFBQSxtQkFBQTtBQUFBLE1BQUE7QUFBQSxNQUE3QixJQUFnQixjQUFhLE9BQUE7QUFBQSwyQkFBQSxpQ0FBQTtBQUFBLE1BQUE7QUFBQSxNQUVWLGlCQUFjO0FBQy9CLGVBQU87QUFBQSx3Q0FDMkIsTUFBTSxnQkFBZ0I7QUFBQTtBQUFBO0FBQUEsTUFHMUQ7QUFBQSxPQVBBOzttQ0FEQyxTQUFTLEVBQUUsV0FBVyxrQkFBa0IsU0FBUyxLQUFBLENBQU0sQ0FBQztBQUN6RCxtQkFBQSxJQUFBLE1BQUEsMkJBQUEsRUFBQSxNQUFBLFlBQUEsTUFBQSxpQkFBQSxRQUFBLE9BQUEsU0FBQSxPQUFBLFFBQUEsRUFBQSxLQUFBLENBQUEsUUFBQSxtQkFBQSxLQUFBLEtBQUEsQ0FBQSxRQUFBLElBQWdCLGVBQWEsS0FBQSxDQUFBLEtBQUEsVUFBQTtBQUFBLFlBQWIsZ0JBQWE7QUFBQSxNQUFBLEtBQUEsVUFBQSxVQUFBLEdBQUEsNkJBQUEsZ0NBQUE7O1VBSmYsR0FBQSxTQUF5QixDQUFDLGlCQUFpQixPQUFPLFVBQVUsR0FKN0Q7QUFBQTtBQWlCZixTQUFPO0FBRVQ7In0=
124
+ //# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYmxvY2stbGluay1jb21tb24uanMiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3NyYy9lbGVtZW50cy9saW5rL2NvbW1vbi9ibG9jay1saW5rLWNvbW1vbi50cyJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgdHlwZSB7IENTU1Jlc3VsdEdyb3VwLCBUZW1wbGF0ZVJlc3VsdCB9IGZyb20gJ2xpdCc7XG5pbXBvcnQgeyBwcm9wZXJ0eSB9IGZyb20gJ2xpdC9kZWNvcmF0b3JzLmpzJztcbmltcG9ydCB7IGh0bWwgfSBmcm9tICdsaXQvc3RhdGljLWh0bWwuanMnO1xuXG5pbXBvcnQgdHlwZSB7IFNiYkFjdGlvbkJhc2VFbGVtZW50IH0gZnJvbSAnLi4vLi4vY29yZS9iYXNlLWVsZW1lbnRzLnRzJztcbmltcG9ydCB0eXBlIHsgU2JiSWNvblBsYWNlbWVudCB9IGZyb20gJy4uLy4uL2NvcmUvaW50ZXJmYWNlcy50cyc7XG5pbXBvcnQgdHlwZSB7IEFic3RyYWN0Q29uc3RydWN0b3IgfSBmcm9tICcuLi8uLi9jb3JlL21peGlucy50cyc7XG5pbXBvcnQgeyBib3hTaXppbmdTdHlsZXMgfSBmcm9tICcuLi8uLi9jb3JlL3N0eWxlcy50cyc7XG5pbXBvcnQgeyBTYmJJY29uTmFtZU1peGluIH0gZnJvbSAnLi4vLi4vaWNvbi50cyc7XG5cbmltcG9ydCB7IFNiYkxpbmtDb21tb25FbGVtZW50TWl4aW4gfSBmcm9tICcuL2xpbmstY29tbW9uLnRzJztcbi8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBpbXBvcnQteC9vcmRlclxuaW1wb3J0IGJsb2NrU3R5bGUgZnJvbSAnLi9ibG9jay1saW5rLnNjc3M/bGl0JmlubGluZSc7XG5pbXBvcnQgc3R5bGUgZnJvbSAnLi9saW5rLnNjc3M/bGl0JmlubGluZSc7XG5cbmV4cG9ydCBkZWNsYXJlIGNsYXNzIFNiYkJsb2NrTGlua0NvbW1vbkVsZW1lbnRNaXhpblR5cGUgZXh0ZW5kcyBTYmJMaW5rQ29tbW9uRWxlbWVudE1peGluKFxuICBTYmJJY29uTmFtZU1peGluKFNiYkFjdGlvbkJhc2VFbGVtZW50KSxcbikge1xuICBwdWJsaWMgYWNjZXNzb3IgaWNvblBsYWNlbWVudDogU2JiSWNvblBsYWNlbWVudDtcbn1cblxuLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIEB0eXBlc2NyaXB0LWVzbGludC9uYW1pbmctY29udmVudGlvblxuZXhwb3J0IGNvbnN0IFNiYkJsb2NrTGlua0NvbW1vbkVsZW1lbnRNaXhpbiA9IDxUIGV4dGVuZHMgQWJzdHJhY3RDb25zdHJ1Y3RvcjxTYmJBY3Rpb25CYXNlRWxlbWVudD4+KFxuICBzdXBlckNsYXNzOiBULFxuKTogQWJzdHJhY3RDb25zdHJ1Y3RvcjxTYmJCbG9ja0xpbmtDb21tb25FbGVtZW50TWl4aW5UeXBlPiAmIFQgPT4ge1xuICBhYnN0cmFjdCBjbGFzcyBTYmJCbG9ja0xpbmtDb21tb25FbGVtZW50XG4gICAgZXh0ZW5kcyBTYmJMaW5rQ29tbW9uRWxlbWVudE1peGluKFNiYkljb25OYW1lTWl4aW4oc3VwZXJDbGFzcykpXG4gICAgaW1wbGVtZW50cyBQYXJ0aWFsPFNiYkJsb2NrTGlua0NvbW1vbkVsZW1lbnRNaXhpblR5cGU+XG4gIHtcbiAgICBwdWJsaWMgc3RhdGljIHN0eWxlczogQ1NTUmVzdWx0R3JvdXAgPSBbYm94U2l6aW5nU3R5bGVzLCBzdHlsZSwgYmxvY2tTdHlsZV07XG5cbiAgICAvKiogTW92ZXMgdGhlIGljb24gdG8gdGhlIGVuZCBvZiB0aGUgY29tcG9uZW50IGlmIHNldCB0byB0cnVlLiAqL1xuICAgIEBwcm9wZXJ0eSh7IGF0dHJpYnV0ZTogJ2ljb24tcGxhY2VtZW50JywgcmVmbGVjdDogdHJ1ZSB9KVxuICAgIHB1YmxpYyBhY2Nlc3NvciBpY29uUGxhY2VtZW50OiBTYmJJY29uUGxhY2VtZW50ID0gJ3N0YXJ0JztcblxuICAgIHByb3RlY3RlZCBvdmVycmlkZSByZW5kZXJUZW1wbGF0ZSgpOiBUZW1wbGF0ZVJlc3VsdCB7XG4gICAgICByZXR1cm4gaHRtbGBcbiAgICAgICAgPHNwYW4gY2xhc3M9XCJzYmItbGlua19faWNvblwiPiAke3N1cGVyLnJlbmRlckljb25TbG90KCl9IDwvc3Bhbj5cbiAgICAgICAgPHNsb3Q+PC9zbG90PlxuICAgICAgYDtcbiAgICB9XG4gIH1cbiAgcmV0dXJuIFNiYkJsb2NrTGlua0NvbW1vbkVsZW1lbnQgYXMgdW5rbm93biBhcyBBYnN0cmFjdENvbnN0cnVjdG9yPFNiYkJsb2NrTGlua0NvbW1vbkVsZW1lbnRNaXhpblR5cGU+ICZcbiAgICBUO1xufTtcbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztBQXNCTyxNQUFNLGlDQUFpQyxDQUM1QyxlQUMrRDtNQUNoRCw2QkFBeUIsTUFBQTs7QUFDOUIsUUFBQSxjQUFBLDBCQUEwQixpQkFBaUIsVUFBVSxDQUFDOzs7O0FBRGpELFdBQUEsbUJBQ0wsWUFBdUQ7QUFBQTs7QUFPL0QsNERBQUEsa0JBQUEsTUFBQSw2QkFBa0QsT0FBTzs7OztNQUF6RCxJQUFnQixnQkFBYTtBQUFBLGVBQUEsbUJBQUE7QUFBQSxNQUFBO0FBQUEsTUFBN0IsSUFBZ0IsY0FBYSxPQUFBO0FBQUEsMkJBQUEsaUNBQUE7QUFBQSxNQUFBO0FBQUEsTUFFVixpQkFBYztBQUMvQixlQUFPO0FBQUEsd0NBQzJCLE1BQU0sZ0JBQWdCO0FBQUE7QUFBQTtBQUFBLE1BRzFEO0FBQUEsT0FQQTs7bUNBREMsU0FBUyxFQUFFLFdBQVcsa0JBQWtCLFNBQVMsS0FBQSxDQUFNLENBQUM7QUFDekQsbUJBQUEsSUFBQSxNQUFBLDJCQUFBLEVBQUEsTUFBQSxZQUFBLE1BQUEsaUJBQUEsUUFBQSxPQUFBLFNBQUEsT0FBQSxRQUFBLEVBQUEsS0FBQSxDQUFBLFFBQUEsbUJBQUEsS0FBQSxLQUFBLENBQUEsUUFBQSxJQUFnQixlQUFhLEtBQUEsQ0FBQSxLQUFBLFVBQUE7QUFBQSxZQUFiLGdCQUFhO0FBQUEsTUFBQSxLQUFBLFVBQUEsVUFBQSxHQUFBLDZCQUFBLGdDQUFBOztVQUpmLEdBQUEsU0FBeUIsQ0FBQyxpQkFBaUIsT0FBTyxVQUFVLEdBSjdEO0FBQUE7QUFpQmYsU0FBTztBQUVUOyJ9
package/development/message/message.component.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"message.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/message/message.component.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAG1D,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAMtD;;;;;;;;GAQG;AACH,qBAAa,iBAAkB,SAAQ,UAAU;IAC/C,gBAAgC,WAAW,EAAE,MAAM,CAAiB;IACpE,OAAuB,MAAM,EAAE,cAAc,CAA4B;IAEzE,OAAO,CAAC,eAAe;cAUJ,MAAM,IAAI,cAAc;CAW5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,aAAa,EAAE,iBAAiB,CAAC;KAClC;CACF"}
1
+ {"version":3,"file":"message.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/message/message.component.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAG1D,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAMtD;;;;;;;;GAQG;AACH,qBAAa,iBAAkB,SAAQ,UAAU;IAC/C,gBAAgC,WAAW,EAAE,MAAM,CAAiB;IACpE,OAAuB,MAAM,EAAE,cAAc,CAA4B;IAEzE,OAAO,CAAC,eAAe;cAUJ,MAAM,IAAI,cAAc;CAS5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,aAAa,EAAE,iBAAiB,CAAC;KAClC;CACF"}
package/development/message/message.component.js CHANGED
@@ -2,16 +2,7 @@ import { css, html } from "lit";
2
2
  import { SbbElement } from "../core/base-elements.js";
3
3
  import { boxSizingStyles } from "../core/styles.js";
4
4
  const style = css`:host {
5
- --sbb-message-subtitle-color: var(--sbb-color-granite);
6
- --sbb-message-subtitle-color: light-dark(var(--sbb-color-granite), var(--sbb-color-platinum));
7
- --sbb-message-image-margin-block: 0 var(--sbb-spacing-responsive-s);
8
- --sbb-message-image-border-radius: var(--sbb-border-radius-4x);
9
- --sbb-message-legend-margin-block: var(--sbb-spacing-responsive-xxxs) 0;
10
- --sbb-message-action-margin-block: var(--sbb-spacing-responsive-xxxs) 0;
11
5
  display: block;
12
- }
13
-
14
- .sbb-message__container {
15
6
  text-align: center;
16
7
  }
17
8
 
@@ -27,13 +18,9 @@ const style = css`:host {
27
18
  }
28
19
 
29
20
  ::slotted([slot=subtitle]) {
30
- --sbb-text-font-size: var(--sbb-text-font-size-s);
31
- font-family: var(--sbb-typo-font-family);
32
- font-weight: normal;
33
- line-height: var(--sbb-typo-line-height-text);
34
- letter-spacing: var(--sbb-typo-letter-spacing-text);
35
- font-size: var(--sbb-text-font-size);
36
21
  color: var(--sbb-message-subtitle-color);
22
+ font-size: var(--sbb-text-font-size-s);
23
+ letter-spacing: var(--sbb-typo-letter-spacing-text);
37
24
  margin: 0;
38
25
  }
39
26
 
@@ -63,13 +50,11 @@ const _SbbMessageElement = class _SbbMessageElement extends SbbElement {
63
50
  }
64
51
  render() {
65
52
  return html`
66
- <div class="sbb-message__container">
67
- <slot name="image"></slot>
68
- <slot name="title" @slotchange=${this._configureTitle}></slot>
69
- <slot name="subtitle"></slot>
70
- <slot name="legend"></slot>
71
- <slot name="action"></slot>
72
- </div>
53
+ <slot name="image"></slot>
54
+ <slot name="title" @slotchange=${this._configureTitle}></slot>
55
+ <slot name="subtitle"></slot>
56
+ <slot name="legend"></slot>
57
+ <slot name="action"></slot>
73
58
  `;
74
59
  }
75
60
  };
@@ -79,4 +64,4 @@ let SbbMessageElement = _SbbMessageElement;
79
64
  export {
80
65
  SbbMessageElement
81
66
  };
82
- //# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWVzc2FnZS5jb21wb25lbnQuanMiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9lbGVtZW50cy9tZXNzYWdlL21lc3NhZ2UuY29tcG9uZW50LnRzIl0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB0eXBlIHsgQ1NTUmVzdWx0R3JvdXAsIFRlbXBsYXRlUmVzdWx0IH0gZnJvbSAnbGl0JztcbmltcG9ydCB7IGh0bWwgfSBmcm9tICdsaXQnO1xuXG5pbXBvcnQgeyBTYmJFbGVtZW50IH0gZnJvbSAnLi4vY29yZS9iYXNlLWVsZW1lbnRzLnRzJztcbmltcG9ydCB7IGJveFNpemluZ1N0eWxlcyB9IGZyb20gJy4uL2NvcmUvc3R5bGVzLnRzJztcbmltcG9ydCB0eXBlIHsgU2JiVGl0bGVFbGVtZW50IH0gZnJvbSAnLi4vdGl0bGUudHMnO1xuXG5pbXBvcnQgc3R5bGUgZnJvbSAnLi9tZXNzYWdlLnNjc3M/bGl0JmlubGluZSc7XG5cbi8qKlxuICogSXQgZGlzcGxheXMgYSBjb21wbGV4IG1lc3NhZ2UgY29tYmluaW5nIGEgdGl0bGUsIGFuIGltYWdlLCBhbiBhY3Rpb24gYW5kIHNvbWUgY29udGVudC5cbiAqXG4gKiBAc2xvdCBpbWFnZSAtIFVzZSB0aGlzIHNsb3QgdG8gcHJvdmlkZSBhbiBgc2JiLWltYWdlYCBjb21wb25lbnQuXG4gKiBAc2xvdCB0aXRsZSAtIFVzZSB0aGlzIHNsb3QgdG8gcHJvdmlkZSBhbiBgc2JiLXRpdGxlYC5cbiAqIEBzbG90IHN1YnRpdGxlIC0gVXNlIHRoaXMgc2xvdCB0byBwcm92aWRlIGEgc3VidGl0bGUsIG11c3QgYmUgYSBwYXJhZ3JhcGguXG4gKiBAc2xvdCBsZWdlbmQgLSBVc2UgdGhpcyBzbG90IHRvIHByb3ZpZGUgYSBsZWdlbmQsIG11c3QgYmUgYSBwYXJhZ3JhcGguXG4gKiBAc2xvdCBhY3Rpb24gLSBVc2UgdGhpcyBzbG90IHRvIHByb3ZpZGUgYW4gYHNiYi1zZWNvbmRhcnktYnV0dG9uYC5cbiAqL1xuZXhwb3J0IGNsYXNzIFNiYk1lc3NhZ2VFbGVtZW50IGV4dGVuZHMgU2JiRWxlbWVudCB7XG4gIHB1YmxpYyBzdGF0aWMgb3ZlcnJpZGUgcmVhZG9ubHkgZWxlbWVudE5hbWU6IHN0cmluZyA9ICdzYmItbWVzc2FnZSc7XG4gIHB1YmxpYyBzdGF0aWMgb3ZlcnJpZGUgc3R5bGVzOiBDU1NSZXN1bHRHcm91cCA9IFtib3hTaXppbmdTdHlsZXMsIHN0eWxlXTtcblxuICBwcml2YXRlIF9jb25maWd1cmVUaXRsZShldmVudDogRXZlbnQpOiB2b2lkIHtcbiAgICBjb25zdCB0aXRsZSA9IChldmVudC50YXJnZXQgYXMgSFRNTFNsb3RFbGVtZW50KVxuICAgICAgLmFzc2lnbmVkRWxlbWVudHMoKVxuICAgICAgLmZpbmQoKGUpOiBlIGlzIFNiYlRpdGxlRWxlbWVudCA9PiBlLmxvY2FsTmFtZSA9PT0gJ3NiYi10aXRsZScpO1xuICAgIGlmICh0aXRsZSkge1xuICAgICAgY3VzdG9tRWxlbWVudHMudXBncmFkZSh0aXRsZSk7XG4gICAgICB0aXRsZS52aXN1YWxMZXZlbCA9ICc1JztcbiAgICB9XG4gIH1cblxuICBwcm90ZWN0ZWQgb3ZlcnJpZGUgcmVuZGVyKCk6IFRlbXBsYXRlUmVzdWx0IHtcbiAgICByZXR1cm4gaHRtbGBcbiAgICAgIDxkaXYgY2xhc3M9XCJzYmItbWVzc2FnZV9fY29udGFpbmVyXCI+XG4gICAgICAgIDxzbG90IG5hbWU9XCJpbWFnZVwiPjwvc2xvdD5cbiAgICAgICAgPHNsb3QgbmFtZT1cInRpdGxlXCIgQHNsb3RjaGFuZ2U9JHt0aGlzLl9jb25maWd1cmVUaXRsZX0+PC9zbG90PlxuICAgICAgICA8c2xvdCBuYW1lPVwic3VidGl0bGVcIj48L3Nsb3Q+XG4gICAgICAgIDxzbG90IG5hbWU9XCJsZWdlbmRcIj48L3Nsb3Q+XG4gICAgICAgIDxzbG90IG5hbWU9XCJhY3Rpb25cIj48L3Nsb3Q+XG4gICAgICA8L2Rpdj5cbiAgICBgO1xuICB9XG59XG5cbmRlY2xhcmUgZ2xvYmFsIHtcbiAgaW50ZXJmYWNlIEhUTUxFbGVtZW50VGFnTmFtZU1hcCB7XG4gICAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIEB0eXBlc2NyaXB0LWVzbGludC9uYW1pbmctY29udmVudGlvblxuICAgICdzYmItbWVzc2FnZSc6IFNiYk1lc3NhZ2VFbGVtZW50O1xuICB9XG59XG4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztBQWtCTSxNQUFPLHFCQUFQLE1BQU8sMkJBQTBCLFdBQVU7QUFBQSxFQUl2QyxnQkFBZ0IsT0FBWTtBQUNsQyxVQUFNLFFBQVMsTUFBTSxPQUNsQixpQkFBQSxFQUNBLEtBQUssQ0FBQyxNQUE0QixFQUFFLGNBQWMsV0FBVztBQUNoRSxRQUFJLE9BQU87QUFDVCxxQkFBZSxRQUFRLEtBQUs7QUFDNUIsWUFBTSxjQUFjO0FBQUEsSUFDdEI7QUFBQSxFQUNGO0FBQUEsRUFFbUIsU0FBTTtBQUN2QixXQUFPO0FBQUE7QUFBQTtBQUFBLHlDQUc4QixLQUFLLGVBQWU7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUEsRUFNM0Q7O0FBdkJnQyxtQkFBQSxjQUFzQjtBQUMvQixtQkFBQSxTQUF5QixDQUFDLGlCQUFpQixLQUFLO0FBRm5FLElBQU8sb0JBQVA7In0=
67
+ //# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWVzc2FnZS5jb21wb25lbnQuanMiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9lbGVtZW50cy9tZXNzYWdlL21lc3NhZ2UuY29tcG9uZW50LnRzIl0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB0eXBlIHsgQ1NTUmVzdWx0R3JvdXAsIFRlbXBsYXRlUmVzdWx0IH0gZnJvbSAnbGl0JztcbmltcG9ydCB7IGh0bWwgfSBmcm9tICdsaXQnO1xuXG5pbXBvcnQgeyBTYmJFbGVtZW50IH0gZnJvbSAnLi4vY29yZS9iYXNlLWVsZW1lbnRzLnRzJztcbmltcG9ydCB7IGJveFNpemluZ1N0eWxlcyB9IGZyb20gJy4uL2NvcmUvc3R5bGVzLnRzJztcbmltcG9ydCB0eXBlIHsgU2JiVGl0bGVFbGVtZW50IH0gZnJvbSAnLi4vdGl0bGUudHMnO1xuXG5pbXBvcnQgc3R5bGUgZnJvbSAnLi9tZXNzYWdlLnNjc3M/bGl0JmlubGluZSc7XG5cbi8qKlxuICogSXQgZGlzcGxheXMgYSBjb21wbGV4IG1lc3NhZ2UgY29tYmluaW5nIGEgdGl0bGUsIGFuIGltYWdlLCBhbiBhY3Rpb24gYW5kIHNvbWUgY29udGVudC5cbiAqXG4gKiBAc2xvdCBpbWFnZSAtIFVzZSB0aGlzIHNsb3QgdG8gcHJvdmlkZSBhbiBgc2JiLWltYWdlYCBjb21wb25lbnQuXG4gKiBAc2xvdCB0aXRsZSAtIFVzZSB0aGlzIHNsb3QgdG8gcHJvdmlkZSBhbiBgc2JiLXRpdGxlYC5cbiAqIEBzbG90IHN1YnRpdGxlIC0gVXNlIHRoaXMgc2xvdCB0byBwcm92aWRlIGEgc3VidGl0bGUsIG11c3QgYmUgYSBwYXJhZ3JhcGguXG4gKiBAc2xvdCBsZWdlbmQgLSBVc2UgdGhpcyBzbG90IHRvIHByb3ZpZGUgYSBsZWdlbmQsIG11c3QgYmUgYSBwYXJhZ3JhcGguXG4gKiBAc2xvdCBhY3Rpb24gLSBVc2UgdGhpcyBzbG90IHRvIHByb3ZpZGUgYW4gYHNiYi1zZWNvbmRhcnktYnV0dG9uYC5cbiAqL1xuZXhwb3J0IGNsYXNzIFNiYk1lc3NhZ2VFbGVtZW50IGV4dGVuZHMgU2JiRWxlbWVudCB7XG4gIHB1YmxpYyBzdGF0aWMgb3ZlcnJpZGUgcmVhZG9ubHkgZWxlbWVudE5hbWU6IHN0cmluZyA9ICdzYmItbWVzc2FnZSc7XG4gIHB1YmxpYyBzdGF0aWMgb3ZlcnJpZGUgc3R5bGVzOiBDU1NSZXN1bHRHcm91cCA9IFtib3hTaXppbmdTdHlsZXMsIHN0eWxlXTtcblxuICBwcml2YXRlIF9jb25maWd1cmVUaXRsZShldmVudDogRXZlbnQpOiB2b2lkIHtcbiAgICBjb25zdCB0aXRsZSA9IChldmVudC50YXJnZXQgYXMgSFRNTFNsb3RFbGVtZW50KVxuICAgICAgLmFzc2lnbmVkRWxlbWVudHMoKVxuICAgICAgLmZpbmQoKGUpOiBlIGlzIFNiYlRpdGxlRWxlbWVudCA9PiBlLmxvY2FsTmFtZSA9PT0gJ3NiYi10aXRsZScpO1xuICAgIGlmICh0aXRsZSkge1xuICAgICAgY3VzdG9tRWxlbWVudHMudXBncmFkZSh0aXRsZSk7XG4gICAgICB0aXRsZS52aXN1YWxMZXZlbCA9ICc1JztcbiAgICB9XG4gIH1cblxuICBwcm90ZWN0ZWQgb3ZlcnJpZGUgcmVuZGVyKCk6IFRlbXBsYXRlUmVzdWx0IHtcbiAgICByZXR1cm4gaHRtbGBcbiAgICAgIDxzbG90IG5hbWU9XCJpbWFnZVwiPjwvc2xvdD5cbiAgICAgIDxzbG90IG5hbWU9XCJ0aXRsZVwiIEBzbG90Y2hhbmdlPSR7dGhpcy5fY29uZmlndXJlVGl0bGV9Pjwvc2xvdD5cbiAgICAgIDxzbG90IG5hbWU9XCJzdWJ0aXRsZVwiPjwvc2xvdD5cbiAgICAgIDxzbG90IG5hbWU9XCJsZWdlbmRcIj48L3Nsb3Q+XG4gICAgICA8c2xvdCBuYW1lPVwiYWN0aW9uXCI+PC9zbG90PlxuICAgIGA7XG4gIH1cbn1cblxuZGVjbGFyZSBnbG9iYWwge1xuICBpbnRlcmZhY2UgSFRNTEVsZW1lbnRUYWdOYW1lTWFwIHtcbiAgICAvLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgQHR5cGVzY3JpcHQtZXNsaW50L25hbWluZy1jb252ZW50aW9uXG4gICAgJ3NiYi1tZXNzYWdlJzogU2JiTWVzc2FnZUVsZW1lbnQ7XG4gIH1cbn1cbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUFrQk0sTUFBTyxxQkFBUCxNQUFPLDJCQUEwQixXQUFVO0FBQUEsRUFJdkMsZ0JBQWdCLE9BQVk7QUFDbEMsVUFBTSxRQUFTLE1BQU0sT0FDbEIsaUJBQUEsRUFDQSxLQUFLLENBQUMsTUFBNEIsRUFBRSxjQUFjLFdBQVc7QUFDaEUsUUFBSSxPQUFPO0FBQ1QscUJBQWUsUUFBUSxLQUFLO0FBQzVCLFlBQU0sY0FBYztBQUFBLElBQ3RCO0FBQUEsRUFDRjtBQUFBLEVBRW1CLFNBQU07QUFDdkIsV0FBTztBQUFBO0FBQUEsdUNBRTRCLEtBQUssZUFBZTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUEsRUFLekQ7O0FBckJnQyxtQkFBQSxjQUFzQjtBQUMvQixtQkFBQSxTQUF5QixDQUFDLGlCQUFpQixLQUFLO0FBRm5FLElBQU8sb0JBQVA7In0=
package/link/common/block-link-common.js CHANGED
@@ -1,43 +1,43 @@
1
- var c = (t) => {
2
- throw TypeError(t);
1
+ var c = (o) => {
2
+ throw TypeError(o);
3
3
  };
4
- var m = (t, e, o) => e.has(t) || c("Cannot " + o);
5
- var v = (t, e, o) => (m(t, e, "read from private field"), o ? o.call(t) : e.get(t)), p = (t, e, o) => e.has(t) ? c("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, o), h = (t, e, o, s) => (m(t, e, "write to private field"), s ? s.call(t, o) : e.set(t, o), o);
6
- import { __esDecorate as k, __runInitializers as f } from "tslib";
7
- import { property as y } from "lit/decorators.js";
8
- import { html as d } from "lit/static-html.js";
9
- import { boxSizingStyles as u } from "../../core/styles.js";
10
- import { SbbIconNameMixin as x } from "../../icon.js";
11
- import { S as _, s as z } from "../../link-common-7IiqjmPD.js";
4
+ var m = (o, t, e) => t.has(o) || c("Cannot " + e);
5
+ var k = (o, t, e) => (m(o, t, "read from private field"), e ? e.call(o) : t.get(o)), v = (o, t, e) => t.has(o) ? c("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(o) : t.set(o, e), p = (o, t, e, s) => (m(o, t, "write to private field"), s ? s.call(o, e) : t.set(o, e), e);
6
+ import { __esDecorate as u, __runInitializers as h } from "tslib";
7
+ import { property as f } from "lit/decorators.js";
8
+ import { html as g } from "lit/static-html.js";
9
+ import { boxSizingStyles as _ } from "../../core/styles.js";
10
+ import { SbbIconNameMixin as y } from "../../icon.js";
11
+ import { S as x, s as z } from "../../link-common-7IiqjmPD.js";
12
12
  import { css as S } from "lit";
13
- const P = S`:host{--sbb-link-color-hover: light-dark(var(--sbb-color-primary125), var(--sbb-color-graphite));--sbb-link-color-active: light-dark(var(--sbb-color-primary150), var(--sbb-color-metal));--sbb-link-color-normal: var(--sbb-color-granite);--sbb-link-color-normal: light-dark(var(--sbb-color-granite), var(--sbb-color-white));--sbb-link-color-hover: var(--sbb-color-primary125);--sbb-link-color-hover: light-dark(var(--sbb-color-primary125), var(--sbb-color-cloud));--sbb-link-color-active: var(--sbb-color-primary150);--sbb-link-color-active: light-dark(var(--sbb-color-primary150), var(--sbb-color-silver));--sbb-link-gap: var(--sbb-spacing-fixed-1x);display:block}:host([negative]){--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);--sbb-link-color-normal: var(--sbb-color-1-negative);--sbb-link-color-hover: var(--sbb-color-4-negative);--sbb-link-color-active: var(--sbb-color-silver)}:host(.sbb-active){--sbb-link-color-normal: var(--sbb-color-black);--sbb-link-color-normal: light-dark(var(--sbb-color-black), var(--sbb-color-cement));--sbb-link-text-decoration-line: underline}:host(.sbb-active[negative]){--sbb-link-color-normal: var(--sbb-color-cement);--sbb-link-text-decoration-line: underline}.sbb-action-base{gap:var(--sbb-link-gap)}:host([size=xs]) .sbb-action-base{--sbb-text-font-size: var(--sbb-text-font-size-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size)}:host([size=s]) .sbb-action-base{--sbb-text-font-size: var(--sbb-text-font-size-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size)}:host([size=m]) .sbb-action-base{--sbb-text-font-size: var(--sbb-text-font-size-m);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size)}.sbb-link__icon{position:relative;height:calc(var(--sbb-typo-line-height-text) * 1em);width:var(--sbb-size-icon-ui-small);flex:0 0 auto;align-self:start}:host(:not(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name]))) .sbb-link__icon{display:none}:host([icon-placement=end]) .sbb-link__icon{order:2}.sbb-link__icon ::slotted([slot=icon]),.sbb-link__icon sbb-icon{position:absolute;top:50%;transform:translateY(-50%)}`, D = (t) => (() => {
14
- var r, i;
15
- let o = _(x(t)), s, b = [], l = [];
16
- return i = class extends o {
13
+ const P = S`:host{--sbb-link-color-hover: light-dark(var(--sbb-color-primary125), var(--sbb-color-graphite));--sbb-link-color-active: light-dark(var(--sbb-color-primary150), var(--sbb-color-metal));--sbb-link-color-normal: var(--sbb-color-granite);--sbb-link-color-normal: light-dark(var(--sbb-color-granite), var(--sbb-color-white));--sbb-link-color-hover: var(--sbb-color-primary125);--sbb-link-color-hover: light-dark(var(--sbb-color-primary125), var(--sbb-color-cloud));--sbb-link-color-active: var(--sbb-color-primary150);--sbb-link-color-active: light-dark(var(--sbb-color-primary150), var(--sbb-color-silver));display:block}:host([negative]){--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);--sbb-link-color-normal: var(--sbb-color-1-negative);--sbb-link-color-hover: var(--sbb-color-4-negative);--sbb-link-color-active: var(--sbb-color-silver)}:host(.sbb-active){--sbb-link-color-normal: var(--sbb-color-black);--sbb-link-color-normal: light-dark(var(--sbb-color-black), var(--sbb-color-cement));--sbb-link-text-decoration-line: underline}:host(.sbb-active[negative]){--sbb-link-color-normal: var(--sbb-color-cement);--sbb-link-text-decoration-line: underline}:host([size=xs]){--sbb-block-link-font-size: var(--sbb-text-font-size-xs)}:host([size=s]){--sbb-block-link-font-size: var(--sbb-text-font-size-s)}:host([size=m]){--sbb-block-link-font-size: var(--sbb-text-font-size-m)}.sbb-action-base{gap:var(--sbb-block-link-gap);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-block-link-font-size)}.sbb-link__icon{position:relative;height:calc(var(--sbb-typo-line-height-text) * 1em);width:var(--sbb-block-link-icon-size);flex:0 0 auto;align-self:start}:host(:not(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name]))) .sbb-link__icon{display:none}:host([icon-placement=end]) .sbb-link__icon{order:2}.sbb-link__icon ::slotted([slot=icon]),.sbb-link__icon sbb-icon{position:absolute;top:50%;transform:translateY(-50%)}`, D = (o) => (() => {
14
+ var i, r;
15
+ let e = x(y(o)), s, n = [], b = [];
16
+ return r = class extends e {
17
17
  constructor() {
18
18
  super(...arguments);
19
- p(this, r, f(this, b, "start"));
20
- f(this, l);
19
+ v(this, i, h(this, n, "start"));
20
+ h(this, b);
21
21
  }
22
22
  /** Moves the icon to the end of the component if set to true. */
23
23
  get iconPlacement() {
24
- return v(this, r);
24
+ return k(this, i);
25
25
  }
26
- set iconPlacement(a) {
27
- h(this, r, a);
26
+ set iconPlacement(l) {
27
+ p(this, i, l);
28
28
  }
29
29
  renderTemplate() {
30
- return d`
30
+ return g`
31
31
  <span class="sbb-link__icon"> ${super.renderIconSlot()} </span>
32
32
  <slot></slot>
33
33
  `;
34
34
  }
35
- }, r = new WeakMap(), (() => {
36
- const a = typeof Symbol == "function" && Symbol.metadata ? Object.create(o[Symbol.metadata] ?? null) : void 0;
37
- s = [y({ attribute: "icon-placement", reflect: !0 })], k(i, null, s, { kind: "accessor", name: "iconPlacement", static: !1, private: !1, access: { has: (n) => "iconPlacement" in n, get: (n) => n.iconPlacement, set: (n, g) => {
38
- n.iconPlacement = g;
39
- } }, metadata: a }, b, l), a && Object.defineProperty(i, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: a });
40
- })(), i.styles = [u, z, P], i;
35
+ }, i = new WeakMap(), (() => {
36
+ const l = typeof Symbol == "function" && Symbol.metadata ? Object.create(e[Symbol.metadata] ?? null) : void 0;
37
+ s = [f({ attribute: "icon-placement", reflect: !0 })], u(r, null, s, { kind: "accessor", name: "iconPlacement", static: !1, private: !1, access: { has: (a) => "iconPlacement" in a, get: (a) => a.iconPlacement, set: (a, d) => {
38
+ a.iconPlacement = d;
39
+ } }, metadata: l }, n, b), l && Object.defineProperty(r, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: l });
40
+ })(), r.styles = [_, z, P], r;
41
41
  })();
42
42
  export {
43
43
  D as SbbBlockLinkCommonElementMixin
package/message/message.component.js CHANGED
@@ -1,25 +1,23 @@
1
- import { css as a, html as l } from "lit";
2
- import { SbbElement as b } from "../core/base-elements.js";
1
+ import { css as i, html as a } from "lit";
2
+ import { SbbElement as n } from "../core/base-elements.js";
3
3
  import { boxSizingStyles as r } from "../core/styles.js";
4
- const n = a`:host{--sbb-message-subtitle-color: var(--sbb-color-granite);--sbb-message-subtitle-color: light-dark(var(--sbb-color-granite), var(--sbb-color-platinum));--sbb-message-image-margin-block: 0 var(--sbb-spacing-responsive-s);--sbb-message-image-border-radius: var(--sbb-border-radius-4x);--sbb-message-legend-margin-block: var(--sbb-spacing-responsive-xxxs) 0;--sbb-message-action-margin-block: var(--sbb-spacing-responsive-xxxs) 0;display:block}.sbb-message__container{text-align:center}::slotted(sbb-title[slot=title]){margin:0}::slotted([slot=image]){display:block;margin-inline:auto!important;margin-block:var(--sbb-message-image-margin-block)!important;width:100%}::slotted([slot=subtitle]){--sbb-text-font-size: var(--sbb-text-font-size-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);color:var(--sbb-message-subtitle-color);margin:0}::slotted([slot=legend]){--sbb-text-font-size: var(--sbb-text-font-size-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);padding:0;color:var(--sbb-color-granite);color:light-dark(var(--sbb-color-granite),var(--sbb-color-cement));margin-block:var(--sbb-message-legend-margin-block)}::slotted([slot=action]){margin-block:var(--sbb-message-action-margin-block)}`, t = class t extends b {
4
+ const b = i`:host{display:block;text-align:center}::slotted(sbb-title[slot=title]){margin:0}::slotted([slot=image]){display:block;margin-inline:auto!important;margin-block:var(--sbb-message-image-margin-block)!important;width:100%}::slotted([slot=subtitle]){color:var(--sbb-message-subtitle-color);font-size:var(--sbb-text-font-size-s);letter-spacing:var(--sbb-typo-letter-spacing-text);margin:0}::slotted([slot=legend]){--sbb-text-font-size: var(--sbb-text-font-size-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);padding:0;color:var(--sbb-color-granite);color:light-dark(var(--sbb-color-granite),var(--sbb-color-cement));margin-block:var(--sbb-message-legend-margin-block)}::slotted([slot=action]){margin-block:var(--sbb-message-action-margin-block)}`, t = class t extends n {
5
5
  _configureTitle(o) {
6
- const s = o.target.assignedElements().find((i) => i.localName === "sbb-title");
7
- s && (customElements.upgrade(s), s.visualLevel = "5");
6
+ const e = o.target.assignedElements().find((l) => l.localName === "sbb-title");
7
+ e && (customElements.upgrade(e), e.visualLevel = "5");
8
8
  }
9
9
  render() {
10
- return l`
11
- <div class="sbb-message__container">
12
- <slot name="image"></slot>
13
- <slot name="title" @slotchange=${this._configureTitle}></slot>
14
- <slot name="subtitle"></slot>
15
- <slot name="legend"></slot>
16
- <slot name="action"></slot>
17
- </div>
10
+ return a`
11
+ <slot name="image"></slot>
12
+ <slot name="title" @slotchange=${this._configureTitle}></slot>
13
+ <slot name="subtitle"></slot>
14
+ <slot name="legend"></slot>
15
+ <slot name="action"></slot>
18
16
  `;
19
17
  }
20
18
  };
21
- t.elementName = "sbb-message", t.styles = [r, n];
22
- let e = t;
19
+ t.elementName = "sbb-message", t.styles = [r, b];
20
+ let s = t;
23
21
  export {
24
- e as SbbMessageElement
22
+ s as SbbMessageElement
25
23
  };
package/off-brand-theme.css CHANGED
@@ -1626,6 +1626,9 @@ summary {
1626
1626
  --sbb-header-environment-rotate: 45deg;
1627
1627
  --sbb-icon-sidebar-background-color: var(--sbb-background-color-1);
1628
1628
  --sbb-icon-sidebar-border-radius: var(--sbb-border-radius-8x);
1629
+ --sbb-block-link-gap: var(--sbb-spacing-fixed-1x);
1630
+ --sbb-block-link-icon-size: var(--sbb-size-icon-ui-small);
1631
+ --sbb-block-link-font-size: var(--sbb-text-font-size-s);
1629
1632
  --sbb-lead-container-background-color: var(--sbb-background-color-1);
1630
1633
  --sbb-lead-container-image-ratio: 2 / 1;
1631
1634
  --sbb-lead-container-image-overlap: var(--sbb-spacing-fixed-24x);
@@ -1634,6 +1637,12 @@ summary {
1634
1637
  --sbb-lead-container-padding-inline: var(--sbb-layout-base-offset-responsive);
1635
1638
  --sbb-lead-container-border-radius: var(--sbb-border-radius-6x);
1636
1639
  --sbb-lead-container-image-border-radius: 0;
1640
+ --sbb-message-action-margin-block: var(--sbb-spacing-responsive-xxxs) 0;
1641
+ --sbb-message-image-margin-block: 0 var(--sbb-spacing-responsive-s);
1642
+ --sbb-message-image-border-radius: var(--sbb-border-radius-4x);
1643
+ --sbb-message-subtitle-color: var(--sbb-color-granite);
1644
+ --sbb-message-subtitle-color: light-dark(var(--sbb-color-granite), var(--sbb-color-platinum));
1645
+ --sbb-message-legend-margin-block: var(--sbb-spacing-responsive-xxxs) 0;
1637
1646
  --sbb-option-color: var(--sbb-color-3);
1638
1647
  --sbb-option-background-color: inherit;
1639
1648
  --sbb-option-background-color-hover: var(--sbb-background-color-3);
@@ -2163,6 +2172,11 @@ sbb-lead-container > [slot=image] :is(sbb-image, img, picture):not(.sbb-figure-o
2163
2172
  border-radius: var(--sbb-lead-container-image-border-radius);
2164
2173
  }
2165
2174
 
2175
+ sbb-message > [slot=image]:is(sbb-image, img),
2176
+ sbb-message > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap-image) {
2177
+ border-radius: var(--sbb-message-image-border-radius);
2178
+ }
2179
+
2166
2180
  :where(sbb-select, sbb-autocomplete, sbb-autocomplete-grid)[size=s] :where(sbb-option, sbb-autocomplete-grid-option) {
2167
2181
  --sbb-option-min-height: var(--sbb-size-element-xxs);
2168
2182
  --sbb-focus-outline-offset: calc(-1 * var(--sbb-spacing-fixed-1x));
@@ -2279,11 +2293,6 @@ img {
2279
2293
  object-position: var(--sbb-image-object-position);
2280
2294
  }
2281
2295
 
2282
- sbb-message > [slot=image]:is(sbb-image, img),
2283
- sbb-message > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap-image) {
2284
- border-radius: var(--sbb-message-image-border-radius);
2285
- }
2286
-
2287
2296
  :is(sbb-teaser, sbb-teaser-hero, sbb-teaser-product) {
2288
2297
  --sbb-teaser-image-brightness-hover: var(--sbb-hover-image-brightness);
2289
2298
  --sbb-teaser-image-animation-duration: var(
package/package.json CHANGED
@@ -1,13 +1,13 @@
1
1
  {
2
2
  "name": "@sbb-esta/lyne-elements-dev",
3
- "version": "4.7.0-dev.1773236484",
3
+ "version": "4.7.0-dev.1773245052",
4
4
  "description": "Lyne Design System",
5
5
  "keywords": [
6
6
  "design system",
7
7
  "web components",
8
8
  "lit",
9
9
  "storybook",
10
- "https://github.com/sbb-design-systems/lyne-components/commit/29dfc89d0c2cc2a836bbb86e6c064d14a7573e72"
10
+ "https://github.com/sbb-design-systems/lyne-components/commit/e5bbc6e33b55de0c391a2e04681edba3b31ba81b"
11
11
  ],
12
12
  "type": "module",
13
13
  "exports": {
package/safety-theme.css CHANGED
@@ -1626,6 +1626,9 @@ summary {
1626
1626
  --sbb-header-environment-rotate: 45deg;
1627
1627
  --sbb-icon-sidebar-background-color: var(--sbb-background-color-1);
1628
1628
  --sbb-icon-sidebar-border-radius: var(--sbb-border-radius-8x);
1629
+ --sbb-block-link-gap: var(--sbb-spacing-fixed-1x);
1630
+ --sbb-block-link-icon-size: var(--sbb-size-icon-ui-small);
1631
+ --sbb-block-link-font-size: var(--sbb-text-font-size-s);
1629
1632
  --sbb-lead-container-background-color: var(--sbb-background-color-1);
1630
1633
  --sbb-lead-container-image-ratio: 2 / 1;
1631
1634
  --sbb-lead-container-image-overlap: var(--sbb-spacing-fixed-24x);
@@ -1634,6 +1637,12 @@ summary {
1634
1637
  --sbb-lead-container-padding-inline: var(--sbb-layout-base-offset-responsive);
1635
1638
  --sbb-lead-container-border-radius: var(--sbb-border-radius-6x);
1636
1639
  --sbb-lead-container-image-border-radius: 0;
1640
+ --sbb-message-action-margin-block: var(--sbb-spacing-responsive-xxxs) 0;
1641
+ --sbb-message-image-margin-block: 0 var(--sbb-spacing-responsive-s);
1642
+ --sbb-message-image-border-radius: var(--sbb-border-radius-4x);
1643
+ --sbb-message-subtitle-color: var(--sbb-color-granite);
1644
+ --sbb-message-subtitle-color: light-dark(var(--sbb-color-granite), var(--sbb-color-platinum));
1645
+ --sbb-message-legend-margin-block: var(--sbb-spacing-responsive-xxxs) 0;
1637
1646
  --sbb-option-color: var(--sbb-color-3);
1638
1647
  --sbb-option-background-color: inherit;
1639
1648
  --sbb-option-background-color-hover: var(--sbb-background-color-3);
@@ -2163,6 +2172,11 @@ sbb-lead-container > [slot=image] :is(sbb-image, img, picture):not(.sbb-figure-o
2163
2172
  border-radius: var(--sbb-lead-container-image-border-radius);
2164
2173
  }
2165
2174
 
2175
+ sbb-message > [slot=image]:is(sbb-image, img),
2176
+ sbb-message > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap-image) {
2177
+ border-radius: var(--sbb-message-image-border-radius);
2178
+ }
2179
+
2166
2180
  :where(sbb-select, sbb-autocomplete, sbb-autocomplete-grid)[size=s] :where(sbb-option, sbb-autocomplete-grid-option) {
2167
2181
  --sbb-option-min-height: var(--sbb-size-element-xxs);
2168
2182
  --sbb-focus-outline-offset: calc(-1 * var(--sbb-spacing-fixed-1x));
@@ -2279,11 +2293,6 @@ img {
2279
2293
  object-position: var(--sbb-image-object-position);
2280
2294
  }
2281
2295
 
2282
- sbb-message > [slot=image]:is(sbb-image, img),
2283
- sbb-message > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap-image) {
2284
- border-radius: var(--sbb-message-image-border-radius);
2285
- }
2286
-
2287
2296
  :is(sbb-teaser, sbb-teaser-hero, sbb-teaser-product) {
2288
2297
  --sbb-teaser-image-brightness-hover: var(--sbb-hover-image-brightness);
2289
2298
  --sbb-teaser-image-animation-duration: var(
package/standard-theme.css CHANGED
@@ -1626,6 +1626,9 @@ summary {
1626
1626
  --sbb-header-environment-rotate: 45deg;
1627
1627
  --sbb-icon-sidebar-background-color: var(--sbb-background-color-1);
1628
1628
  --sbb-icon-sidebar-border-radius: var(--sbb-border-radius-8x);
1629
+ --sbb-block-link-gap: var(--sbb-spacing-fixed-1x);
1630
+ --sbb-block-link-icon-size: var(--sbb-size-icon-ui-small);
1631
+ --sbb-block-link-font-size: var(--sbb-text-font-size-s);
1629
1632
  --sbb-lead-container-background-color: var(--sbb-background-color-1);
1630
1633
  --sbb-lead-container-image-ratio: 2 / 1;
1631
1634
  --sbb-lead-container-image-overlap: var(--sbb-spacing-fixed-24x);
@@ -1634,6 +1637,12 @@ summary {
1634
1637
  --sbb-lead-container-padding-inline: var(--sbb-layout-base-offset-responsive);
1635
1638
  --sbb-lead-container-border-radius: var(--sbb-border-radius-6x);
1636
1639
  --sbb-lead-container-image-border-radius: 0;
1640
+ --sbb-message-action-margin-block: var(--sbb-spacing-responsive-xxxs) 0;
1641
+ --sbb-message-image-margin-block: 0 var(--sbb-spacing-responsive-s);
1642
+ --sbb-message-image-border-radius: var(--sbb-border-radius-4x);
1643
+ --sbb-message-subtitle-color: var(--sbb-color-granite);
1644
+ --sbb-message-subtitle-color: light-dark(var(--sbb-color-granite), var(--sbb-color-platinum));
1645
+ --sbb-message-legend-margin-block: var(--sbb-spacing-responsive-xxxs) 0;
1637
1646
  --sbb-option-color: var(--sbb-color-3);
1638
1647
  --sbb-option-background-color: inherit;
1639
1648
  --sbb-option-background-color-hover: var(--sbb-background-color-3);
@@ -2163,6 +2172,11 @@ sbb-lead-container > [slot=image] :is(sbb-image, img, picture):not(.sbb-figure-o
2163
2172
  border-radius: var(--sbb-lead-container-image-border-radius);
2164
2173
  }
2165
2174
 
2175
+ sbb-message > [slot=image]:is(sbb-image, img),
2176
+ sbb-message > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap-image) {
2177
+ border-radius: var(--sbb-message-image-border-radius);
2178
+ }
2179
+
2166
2180
  :where(sbb-select, sbb-autocomplete, sbb-autocomplete-grid)[size=s] :where(sbb-option, sbb-autocomplete-grid-option) {
2167
2181
  --sbb-option-min-height: var(--sbb-size-element-xxs);
2168
2182
  --sbb-focus-outline-offset: calc(-1 * var(--sbb-spacing-fixed-1x));
@@ -2279,11 +2293,6 @@ img {
2279
2293
  object-position: var(--sbb-image-object-position);
2280
2294
  }
2281
2295
 
2282
- sbb-message > [slot=image]:is(sbb-image, img),
2283
- sbb-message > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap-image) {
2284
- border-radius: var(--sbb-message-image-border-radius);
2285
- }
2286
-
2287
2296
  :is(sbb-teaser, sbb-teaser-hero, sbb-teaser-product) {
2288
2297
  --sbb-teaser-image-brightness-hover: var(--sbb-hover-image-brightness);
2289
2298
  --sbb-teaser-image-animation-duration: var(