@solid-design-system/mcp 6.29.0 → 7.0.0-next.2

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.
package/CHANGELOG.md CHANGED
@@ -1,13 +1,19 @@
1
1
  # Changelog
2
2
 
3
- ## 6.29.0
4
-
5
- ## 6.28.2
3
+ ## 7.0.0-next.2
6
4
 
7
5
  ### Patch Changes
8
6
 
9
7
  - Updated dependencies. See details in the Pull Request _[`#3163`](https://github.com/solid-design-system/solid/pull/3163) [`91ff1c8`](https://github.com/solid-design-system/solid/commit/91ff1c81831fb3522c534306a61b8a5be3562f64) [@rahulsuvarna18](https://github.com/rahulsuvarna18)_
10
8
 
9
+ ## 7.0.0-next.1
10
+
11
+ ### Patch Changes
12
+
13
+ - Fix versioned icons to work with next versions. _[`#3186`](https://github.com/solid-design-system/solid/pull/3186) [`30af3ad`](https://github.com/solid-design-system/solid/commit/30af3ad6d2e8daebeaa9d6a863fdd5794a015da9) [@auroraVasconcelos](https://github.com/auroraVasconcelos)_
14
+
15
+ ## 7.0.0-next.0
16
+
11
17
  ## 6.28.1
12
18
 
13
19
  ## 6.28.0
@@ -15,7 +15,7 @@ Use the components tool by passing the args `component` and `example` for any of
15
15
 
16
16
  ### Key Properties
17
17
 
18
- - prop.variant: 'neutral-100'|'primary'|'white'|'border-primary'|'border-white'|'primary|80'|'white|80'|'image', default='primary' — The brandshape's theme variant.
18
+ - prop.variant: |'neutral-100'|'primary'|'white'|'border-primary'|'border-white'|'primary|80'|'white|80'|'image', default='primary' — The brandshape's theme variant.
19
19
  - prop.shapes: ('top'|'middle'|'bottom')[], default=['top', 'middle', 'bottom'] — Defines which shapes of the brandshape should be displayed.
20
20
  - prop.dir: 'ltr'|'rtl'|'auto' — The element's directionality.
21
21
  - prop.lang: string — The element's language.
@@ -33,10 +33,10 @@ Use the components tool by passing the args `component` and `example` for any of
33
33
 
34
34
  ### Key Properties
35
35
 
36
- - prop.type: 'date'|'datetime-local'|'email'|'number'|'password'|'search'|'tel'|'text'|'time'|'url', default='text' — The type of input. Works the same as a native `<input>` element, but only a subset of types are supported. Defaults
36
+ - prop.type: |'date'|'datetime-local'|'email'|'number'|'password'|'search'|'tel'|'text'|'time'|'url', default='text' — The type of input. Works the same as a native `<input>` element, but only a subset of types are supported. Defaults
37
37
  to `text`.
38
38
  - prop.size: 'lg'|'md'|'sm', default='lg' — The input's size.
39
- - prop.inputmode: 'none'|'text'|'decimal'|'numeric'|'tel'|'search'|'email'|'url' — Tells the browser what type of data will be entered by the user, allowing it to display the appropriate virtual
39
+ - prop.inputmode: |'none'|'text'|'decimal'|'numeric'|'tel'|'search'|'email'|'url' — Tells the browser what type of data will be entered by the user, allowing it to display the appropriate virtual
40
40
  keyboard on supportive devices.
41
41
  - prop.value: string, default='' — The current value of the input, submitted as a name/value pair with form data.
42
42
  - prop.defaultValue: string, default='' — The default value of the form control. Primarily used for resetting the form control.
@@ -64,11 +64,11 @@ Use the components tool by passing the args `component` and `example` for any of
64
64
  - prop.pattern: string — A regular expression pattern to validate input against.
65
65
  - prop.step: number|'any' — Specifies the granularity that the value must adhere to, or the special value `any` which means no stepping is
66
66
  implied, allowing any numeric value. Only applies to date and number input types.
67
- - prop.autocapitalize: 'off'|'none'|'on'|'sentences'|'words'|'characters' — Controls whether and how text input is automatically capitalized as it is entered by the user.
67
+ - prop.autocapitalize: |'off'|'none'|'on'|'sentences'|'words'|'characters' — Controls whether and how text input is automatically capitalized as it is entered by the user.
68
68
  - prop.autocomplete: string — Specifies what permission the browser has to provide assistance in filling out form field values. Refer to
69
69
  [this page on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for available values.
70
70
  - prop.autofocus: boolean — Indicates that the input should receive focus on page load.
71
- - prop.enterkeyhint: 'enter'|'done'|'go'|'next'|'previous'|'search'|'send' — Used to customize the label or icon of the Enter key on virtual keyboards.
71
+ - prop.enterkeyhint: |'enter'|'done'|'go'|'next'|'previous'|'search'|'send' — Used to customize the label or icon of the Enter key on virtual keyboards.
72
72
  - prop.styleOnValid [attr: style-on-valid]: boolean, default=false — Shows success styles if the validity of the input is valid.
73
73
  - prop.spellcheck: boolean, default=true — Enables spell checking on the input.
74
74
  - prop.valueAsDate: — Gets or sets the current value as a `Date` object. Returns `null` if the value can't be converted.
@@ -19,7 +19,7 @@
19
19
  - prop.arrow: boolean, default=false — Attaches an arrow to the popup. The arrow's size and color can be customized using the `--arrow-size` and
20
20
  `--arrow-color` custom properties. For additional customizations, you can also target the arrow using
21
21
  `::part(arrow)` in your stylesheet.
22
- - prop.arrowPlacement [attr: arrow-placement]: 'start'|'end'|'center'|'anchor', default='anchor' — The placement of the arrow. The default is `anchor`, which will align the arrow as close to the center of the
22
+ - prop.arrowPlacement [attr: arrow-placement]: |'start'|'end'|'center'|'anchor', default='anchor' — The placement of the arrow. The default is `anchor`, which will align the arrow as close to the center of the
23
23
  anchor as possible, considering available space and `arrow-padding`. A value of `start`, `end`, or `center` will
24
24
  align the arrow to the start, end, or center of the popover instead.
25
25
  - prop.arrowPadding [attr: arrow-padding]: number, default=10 — The amount of padding between the arrow and the edges of the popup. If the popup has a border-radius, for example,
@@ -24,7 +24,7 @@ Use the components tool by passing the args `component` and `example` for any of
24
24
  - prop.disabled: boolean, default=false — Disables the range.
25
25
  - prop.visuallyDisabled [attr: visually-disabled]: boolean, default=false — Disables the range visually.
26
26
  - prop.noTrackBar [attr: no-track-bar]: boolean, default=false — Disables the active track bar.
27
- - prop.tooltip: 'on-interaction'|'hidden'|'always-visible', default='on-interaction' — Defines the thumbs tooltip behaviour.
27
+ - prop.tooltip: |'on-interaction'|'hidden'|'always-visible', default='on-interaction' — Defines the thumbs tooltip behaviour.
28
28
  - prop.defaultValue: string, default='' — The default value of the form control. Primarily used for resetting the form control.
29
29
  - prop.value: — The current values of the input (in ascending order) as a string of space separated values
30
30
  - prop.valueAsArray: — Gets or sets the current values of the range as an array of numbers
@@ -19,7 +19,7 @@ Use the components tool by passing the args `component` and `example` for any of
19
19
 
20
20
  ### Key Properties
21
21
 
22
- - prop.variant: 'white'|'white border-neutral-400'|'neutral-100'|'primary'|'primary-100', default='white' — Variant of the teaser
22
+ - prop.variant: |'white'|'white border-neutral-400'|'neutral-100'|'primary'|'primary-100', default='white' — Variant of the teaser
23
23
  - prop.breakpoint: number, default=448 — Breakpoint where the teaser switches from `vertical` to `horizontal`. `0` is always `horizontal`, `9999` is always `vertical`.
24
24
  - prop.inset: boolean, default=false — The teaser's inner padding. This is always set in `white border-neutral-400`.
25
25
  - prop.reversedLayout [attr: reversed-layout]: boolean, default=false — Reverses the layout in horizontal variant
@@ -6,7 +6,7 @@ Use the `breakpoint` attribute to change the teaser's layout at a specific break
6
6
  ```html
7
7
  <div class="flex gap-8 flex-col">
8
8
  <sd-teaser breakpoint="0">
9
- <h3 slot="headline">Horizontal</h3>
9
+ <h3 slot="headline" class="sd-headline sd-headline--size-lg">Horizontal</h3>
10
10
  <img slot="media" src="./placeholders/images/architecture.jpg" alt="" style="width:100%; height: auto;" />
11
11
  <p>
12
12
  Quis ut ex cupidatat proident cillum ullamco ea aute ad laborum aliqua incididunt sint ipsum. Elit enim
@@ -16,7 +16,7 @@ Use the `breakpoint` attribute to change the teaser's layout at a specific break
16
16
  </sd-teaser>
17
17
 
18
18
  <sd-teaser breakpoint="9999" class="w-[256px]">
19
- <h3 slot="headline">Vertical</h3>
19
+ <h3 slot="headline" class="sd-headline sd-headline--size-lg">Vertical</h3>
20
20
  <img slot="media" src="./placeholders/images/architecture.jpg" alt="" style="width:100%; height: auto;" />
21
21
  <p>
22
22
  Quis ut ex cupidatat proident cillum ullamco ea aute ad laborum aliqua incididunt sint ipsum. Elit enim
@@ -4,7 +4,7 @@
4
4
 
5
5
  ```html
6
6
  <sd-teaser>
7
- <h3 slot="headline">Lorem ipsum sic semper</h3>
7
+ <h3 slot="headline" class="sd-headline sd-headline--size-lg">Lorem ipsum sic semper</h3>
8
8
  <p>
9
9
  Quis ut ex cupidatat proident cillum ullamco ea aute ad laborum aliqua incididunt sint ipsum. Elit enim
10
10
  reprehenderit aliquip officia in minim. Eu ipsum pariatur dolor. Do ex in cupidatat anim aliqua sint voluptate sunt
@@ -2,7 +2,7 @@ Use the `--distribution-media` and `--distribution-content` CSS properties to ad
2
2
 
3
3
  ```html
4
4
  <sd-teaser style="--distribution-media: 20%; --distribution-content: 80%;">
5
- <h3 slot="headline">Lorem ipsum sic semper</h3>
5
+ <h3 slot="headline" class="sd-headline sd-headline--size-lg">Lorem ipsum sic semper</h3>
6
6
  <img slot="media" src="./placeholders/images/architecture.jpg" alt="" style="width:100%; height: auto;" />
7
7
  <p>
8
8
  Quis ut ex cupidatat proident cillum ullamco ea aute ad laborum aliqua incididunt sint ipsum. Elit enim
@@ -2,7 +2,7 @@ Use the `inset` attribute to create a teaser with an inset padding if the contex
2
2
 
3
3
  ```html
4
4
  <sd-teaser inset variant="primary-100">
5
- <h3 slot="headline">Teaser with inset Padding</h3>
5
+ <h3 slot="headline" class="sd-headline sd-headline--size-lg">Teaser with inset Padding</h3>
6
6
  <p>
7
7
  Quis ut ex cupidatat proident cillum ullamco ea aute ad laborum aliqua incididunt sint ipsum. Elit enim
8
8
  reprehenderit aliquip officia in minim. Eu ipsum pariatur dolor. Do ex in cupidatat anim aliqua sint voluptate sunt
@@ -3,7 +3,7 @@ Teasers accept a `media` slot to display images or videos.
3
3
 
4
4
  ```html
5
5
  <sd-teaser>
6
- <h3 slot="headline">Lorem ipsum sic semper</h3>
6
+ <h3 slot="headline" class="sd-headline sd-headline--size-lg">Lorem ipsum sic semper</h3>
7
7
  <img slot="media" src="./placeholders/images/architecture.jpg" alt="" style="width:100%; height: auto;" />
8
8
  <p>
9
9
  Quis ut ex cupidatat proident cillum ullamco ea aute ad laborum aliqua incididunt sint ipsum. Elit enim
@@ -2,7 +2,7 @@ Use the `meta` slot to add additional content to the teaser.
2
2
 
3
3
  ```html
4
4
  <sd-teaser>
5
- <h3 slot="headline">Lorem ipsum sic semper</h3>
5
+ <h3 slot="headline" class="sd-headline sd-headline--size-lg">Lorem ipsum sic semper</h3>
6
6
  <div slot="meta">
7
7
  <time class="sd-meta sd-meta--pipe" datetime="2023-01-01">01.01.2023</time>
8
8
  <span class="sd-meta">Author name</span>
@@ -3,7 +3,7 @@ Use the `reversed-layout` attribute to invert the horizontal layout.
3
3
 
4
4
  ```html
5
5
  <sd-teaser reversed-layout>
6
- <h3 slot="headline">Horizontal</h3>
6
+ <h3 slot="headline" class="sd-headline sd-headline--size-lg">Horizontal</h3>
7
7
  <img slot="media" src="./placeholders/images/architecture.jpg" alt="" class="w-full h-auto" />
8
8
  <p>
9
9
  Quis ut ex cupidatat proident cillum ullamco ea aute ad laborum aliqua incididunt sint ipsum. Elit enim
@@ -9,23 +9,27 @@ Use the `variant` attribute to use the appropriate teaser for your context:
9
9
  ```html
10
10
  <div class="grid grid-cols-2 gap-12">
11
11
  <sd-teaser variant="white" inset>
12
- <h3 slot="headline">Teaser with white background</h3>
12
+ <h3 slot="headline" class="sd-headline sd-headline--size-lg">Teaser with white background</h3>
13
13
  <p class="sd-paragraph">Lorem ipsum dolor sit amet, consetetur sadi pscing elitr, sed diam nonumy eirmod tempor.</p>
14
14
  </sd-teaser>
15
15
  <sd-teaser variant="white border-neutral-400">
16
- <h3 slot="headline">Teaser with white background and border neutral-400</h3>
16
+ <h3 slot="headline" class="sd-headline sd-headline--size-lg">
17
+ Teaser with white background and border neutral-400
18
+ </h3>
17
19
  <p class="sd-paragraph">Lorem ipsum dolor sit amet, consetetur sadi pscing elitr, sed diam nonumy eirmod tempor.</p>
18
20
  </sd-teaser>
19
21
  <sd-teaser variant="neutral-100" inset>
20
- <h3 slot="headline">Teaser with neutral-100 background</h3>
22
+ <h3 slot="headline" class="sd-headline sd-headline--size-lg">Teaser with neutral-100 background</h3>
21
23
  <p class="sd-paragraph">Lorem ipsum dolor sit amet, consetetur sadi pscing elitr, sed diam nonumy eirmod tempor.</p>
22
24
  </sd-teaser>
23
25
  <sd-teaser variant="primary-100" inset>
24
- <h3 slot="headline">Teaser with primary-100 background</h3>
26
+ <h3 slot="headline" class="sd-headline sd-headline--size-lg">Teaser with primary-100 background</h3>
25
27
  <p class="sd-paragraph">Lorem ipsum dolor sit amet, consetetur sadi pscing elitr, sed diam nonumy eirmod tempor.</p>
26
28
  </sd-teaser>
27
29
  <sd-teaser variant="primary" inset>
28
- <h3 slot="headline">Teaser with primary background</h3>
30
+ <h3 slot="headline" class="sd-headline sd-headline--size-lg sd-headline--inverted">
31
+ Teaser with primary background
32
+ </h3>
29
33
  <p class="sd-paragraph sd-paragraph--inverted">
30
34
  Lorem ipsum dolor sit amet, consetetur sadi pscing elitr, sed diam nonumy eirmod tempor.
31
35
  </p>
@@ -15,7 +15,7 @@ Use the components tool by passing the args `component` and `example` for any of
15
15
 
16
16
  ### Key Properties
17
17
 
18
- - prop.variant: 'white'|'neutral-100'|'primary'|'primary-100'|'gradient-light'|'gradient-dark', default='white' — Variant of the teaser
18
+ - prop.variant: |'white'|'neutral-100'|'primary'|'primary-100'|'gradient-light'|'gradient-dark', default='white' — Variant of the teaser
19
19
  - prop.open: boolean, default=false — Controls whether the expandable content is visible
20
20
  - prop.dir: 'ltr'|'rtl'|'auto' — The element's directionality.
21
21
  - prop.lang: string — The element's language.
@@ -43,12 +43,12 @@ Use the components tool by passing the args `component` and `example` for any of
43
43
  - prop.floatingLabel [attr: floating-label]: boolean, default=false — Enables the floating label behavior for the input.
44
44
  - prop.minlength: number — The minimum length of input that will be considered valid.
45
45
  - prop.maxlength: number — The maximum length of input that will be considered valid.
46
- - prop.autocapitalize: 'off'|'none'|'on'|'sentences'|'words'|'characters' — Controls whether and how text input is automatically capitalized as it is entered by the user.
46
+ - prop.autocapitalize: |'off'|'none'|'on'|'sentences'|'words'|'characters' — Controls whether and how text input is automatically capitalized as it is entered by the user.
47
47
  - prop.autocorrect: 'off'|'on' — Indicates whether the browser's autocorrect feature is on or off.
48
48
  - prop.autocomplete: string — Specifies what permission the browser has to provide assistance in filling out form field values. Refer to
49
49
  [this page on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for available values.
50
50
  - prop.autofocus: boolean — Indicates that the input should receive focus on page load.
51
- - prop.enterkeyhint: 'enter'|'done'|'go'|'next'|'previous'|'search'|'send' — Used to customize the label or icon of the Enter key on virtual keyboards.
51
+ - prop.enterkeyhint: |'enter'|'done'|'go'|'next'|'previous'|'search'|'send' — Used to customize the label or icon of the Enter key on virtual keyboards.
52
52
  - prop.styleOnValid [attr: style-on-valid]: boolean, default=false — Shows success styles if the validity of the input is valid.
53
53
  - prop.spellcheck: boolean, default=true — Enables spell checking on the textarea.
54
54
  - prop.inputmode: 'none'|'text' — Tells the browser what type of data will be entered by the user, allowing it to display the appropriate virtual
@@ -20,7 +20,7 @@ Use the components tool by passing the args `component` and `example` for any of
20
20
 
21
21
  - prop.size: 'lg'|'sm', default='lg' — Sets the size of the default trigger icon.
22
22
  - prop.content: string, default='' — The tooltip's content. If you need to display HTML, use the `content` slot instead.
23
- - prop.placement: 'top'|'top-start'|'top-end'|'bottom'|'bottom-start'|'bottom-end', default='top' — The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip
23
+ - prop.placement: |'top'|'top-start'|'top-end'|'bottom'|'bottom-start'|'bottom-end', default='top' — The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip
24
24
  inside of the viewport.
25
25
  - prop.disabled: boolean, default=false — Disables the tooltip so it won't show when triggered.
26
26
  - prop.open: boolean, default=false — Indicates whether or not the tooltip is open. You can use this in lieu of the show/hide methods.
@@ -124,10 +124,8 @@ version: 1.0.0
124
124
  alt="A parent and child reading a book together on the couch."
125
125
  />
126
126
  </div>
127
- <h3 slot="headline">
128
- <span class="sd-headline sd-headline--size-base">
129
- Steuerliche und rechtliche Basics beim Sparen fürs Kind</span
130
- >
127
+ <h3 slot="headline" class="sd-headline sd-headline--size-base">
128
+ Steuerliche und rechtliche Basics beim Sparen fürs Kind
131
129
  </h3>
132
130
  <p class="sd-paragraph">
133
131
  Beim Sparen fürs Kind gibt es neben der Finanzplanung auch wichtige steuerliche und rechtliche Punkte zu
@@ -835,20 +835,18 @@ version: 1.0.0
835
835
  sortData[columnIndex] === 'none' || !header.sortable ? undefined : 'ascending'
836
836
  )}
837
837
  >
838
- ${
839
- header.sortable
840
- ? html` <button
841
- class="sd-interactive flex items-center gap-1"
842
- @click="${() => sortTable(columnIndex)}"
843
- >
844
- ${header.label}<sd-icon
845
- id="sortIcon-${columnIndex}"
846
- name=${sortData[columnIndex] === 'none' ? 'system/sort-down' : 'system/sort-down-filled'}
847
- class="text-[12px]"
848
- ></sd-icon>
849
- </button>`
850
- : header.label
851
- }
838
+ ${header.sortable
839
+ ? html` <button
840
+ class="sd-interactive flex items-center gap-1"
841
+ @click="${() => sortTable(columnIndex)}"
842
+ >
843
+ ${header.label}<sd-icon
844
+ id="sortIcon-${columnIndex}"
845
+ name=${sortData[columnIndex] === 'none' ? 'system/sort-down' : 'system/sort-down-filled'}
846
+ class="text-[12px]"
847
+ ></sd-icon>
848
+ </button>`
849
+ : header.label}
852
850
  </th>`;
853
851
  })}
854
852
  </tr>`;
@@ -73,7 +73,7 @@ version: 1.0.0
73
73
  </style>
74
74
  <div class="max-w-[426.67px]">
75
75
  <sd-teaser variant="primary-100" inset class="clickable relative m-2 translate-x-0 translate-y-0">
76
- <h2 slot="headline">Union Investment's climate strategy</h2>
76
+ <h2 slot="headline" class="sd-headline sd-headline--size-lg">Union Investment's climate strategy</h2>
77
77
  <div slot="media" class="relative">
78
78
  <img
79
79
  class="aspect-video object-cover"
package/package.json CHANGED
@@ -20,9 +20,9 @@
20
20
  "prettier": "^3.9.5",
21
21
  "tsx": "^4.23.1",
22
22
  "typescript": "^5.9.3",
23
- "@solid-design-system/components": "6.29.0",
24
- "@solid-design-system/styles": "6.29.0",
25
- "@solid-design-system/tokens": "6.29.0"
23
+ "@solid-design-system/components": "7.0.0-next.2",
24
+ "@solid-design-system/styles": "7.0.0-next.2",
25
+ "@solid-design-system/tokens": "7.0.0-next.2"
26
26
  },
27
27
  "exports": {
28
28
  ".": {
@@ -59,7 +59,7 @@
59
59
  "directory": "packages/mcp"
60
60
  },
61
61
  "type": "module",
62
- "version": "6.29.0",
62
+ "version": "7.0.0-next.2",
63
63
  "scripts": {
64
64
  "build": "pnpm run build:components && pnpm run build:tokens && pnpm run build:ts && pnpm run build:metadata && cd ../.. && pnpm exec prettier --write --log-level warn packages/mcp/metadata",
65
65
  "build:components": "cd ../components && pnpm exec node scripts/make-metadata.js --outdir dist",