From 203e1eb619f78ecf2d21945ae46a5ac9ee61862f Mon Sep 17 00:00:00 2001
From: m-nti <117906965+m-nti@users.noreply.github.com>
Date: Thu, 18 Jan 2024 16:40:18 +0100
Subject: [PATCH 1/9] fix: adds comma in $themes (#804)

* adds comma in $themes

* fix: regenerate themes.json

---------

Co-authored-by: larserbach <larserbach@users.noreply.github.com>
---
 .../input/tokens/$themes.json                 | 242 +-----------------
 1 file changed, 4 insertions(+), 238 deletions(-)

diff --git a/packages/figma-design-tokens/input/tokens/$themes.json b/packages/figma-design-tokens/input/tokens/$themes.json
index 0e7dfce83..65a4fa553 100644
--- a/packages/figma-design-tokens/input/tokens/$themes.json
+++ b/packages/figma-design-tokens/input/tokens/$themes.json
@@ -496,8 +496,7 @@
       "Forms.Radio.Control.Container.BorderColor.Inactive.Error": "S:2adcd9e2dc79c4605f8d1a7baafc7bffc945e832,",
       "Forms.CaptionComponent.Text.Typography.SM": "S:ad64671fb624f6be67b8b604eccacb865c1852f9,",
       "Forms.CaptionComponent.Text.Typography.MD": "S:6a8b8b4db396259fe2a4d0c3db8e6ad250c3b235,",
-      "Forms.CaptionComponent.Text.Typography.LG": "S:43158490c89c47463f23e620475dc1e69c04064f,"
-      "Forms.Radio.Control.Container.BorderColor.Inactive.Error": "S:2adcd9e2dc79c4605f8d1a7baafc7bffc945e832,",
+      "Forms.CaptionComponent.Text.Typography.LG": "S:43158490c89c47463f23e620475dc1e69c04064f,",
       "Feedback.Tooltip.Container.BackgroundColor": "S:481aa2a7b4dea8a8cdd6600ac795be1f2ffdd2d0,",
       "Feedback.Tooltip.Text.TextColor": "S:7fe24cf94a01a49ba9b41ebfaaae2eb3cce7b67e,",
       "Feedback.Tooltip.Container.Elevation.Elevated": "S:21b7306f3c5c349d1fb00b2ecd3c9640972b4ee8,",
@@ -613,16 +612,6 @@
       "Actions.IconButton.Container.ItemSpacing.MD": "07ab918d0e2c4086b91c61ae9a9147ce6ce028e8",
       "Actions.IconButton.Container.ItemSpacing.LG": "f9133882745fe1b3883820ea0b005c009c0babd9",
       "Actions.IconButton.Container.ItemSpacing.XL": "be83dc3b6032cf8593aeb4637c7269f317887d11",
-      "Actions.IconButton.Container.Padding.XS": "ad4ddc311cb2b0648ecfb36897e14fb18a6c1a73",
-      "Actions.IconButton.Container.Padding.SM": "ce783bfc2ffdc2a14219085b21e325e1d2de5147",
-      "Actions.IconButton.Container.Padding.MD": "a6041a7579936eab5e00c3256a07791b5768daa6",
-      "Actions.IconButton.Container.Padding.LG": "9f387f2253fef8b6c447c651b83868ed760a8a6b",
-      "Actions.IconButton.Container.Padding.XL": "ce6b3c59cfafb50b6737d63aa8d650fdf6ce6240",
-      "Actions.IconButton.Container.ItemSpacing.XS": "a88c7d701291eb406fdf98cb4fcb9908f0e77a20",
-      "Actions.IconButton.Container.ItemSpacing.SM": "e18c694d4946cc45c3f7374214d9821e6a9a42f7",
-      "Actions.IconButton.Container.ItemSpacing.MD": "07ab918d0e2c4086b91c61ae9a9147ce6ce028e8",
-      "Actions.IconButton.Container.ItemSpacing.LG": "f9133882745fe1b3883820ea0b005c009c0babd9",
-      "Actions.IconButton.Container.ItemSpacing.XL": "be83dc3b6032cf8593aeb4637c7269f317887d11",
       "Actions.IconButton.Container.BorderRadius.XS": "1211dc3b875918cf63a42ef04b6d2ace241f1002",
       "Actions.IconButton.Container.BorderRadius.SM": "4e6c80dbe98f67e28c2ed782123c30af6abada58",
       "Actions.IconButton.Container.BorderRadius.MD": "7e6551e57ecc734a09d0ef388ef756391e1fe07c",
@@ -685,11 +674,6 @@
       "Feedback.Counter.Container.ItemSpacing.SM": "fd24027d76388bf3e00bf4d361ca190907b9ad9b",
       "Feedback.Counter.Container.ItemSpacing.MD": "a3fc7ccc7383cbe4851fe8156d7defc4772325bf",
       "Feedback.Counter.Container.ItemSpacing.LG": "af1cf8305bb7e9cfee629abf943110f497d82117",
-      "Feedback.Tooltip.TextWrapper.BorderRadius": "906869eb73643879480690e884c3d3f11c6e2acd",
-      "Feedback.Tooltip.TextWrapper.MinWidth": "704449dbecff2c5715b20b6674bd5ceb7ab45d5d",
-      "Feedback.Tooltip.TextWrapper.MaxWidth": "6703f42032601a0e8e9de76fade182f7b6098b7f",
-      "Feedback.Tooltip.TextWrapper.PaddingTopBottm": "68ed37f7803ef53f4314c136fb323acf8141f3fd",
-      "Feedback.Tooltip.TextWrapper.PaddingLeftRight": "43440a095bb32779beaaf225bb925077319f2b2f",
       "Feedback.Tooltip.NoseWrapper.PaddingTopBottom": "5ae1aa66dd9cbf9843d6f93ba70bb690a529c112",
       "Feedback.Tooltip.NoseWrapper.PaddingLeftRight": "e1b333c7dbbf6ac752ba85d44cf99a82d81dc607",
       "Feedback.Dialog.XS.MaxWidth": "4d5ba73856baa8166c20049c4a31fa76c4898883",
@@ -705,27 +689,6 @@
       "Feedback.Dialog.Header.Padding": "78b3c687022d1f1a4fade8cd14afe804a3bb6a62",
       "Feedback.Dialog.Footer.Padding": "d3ced3d27ddaf9e0032bfa91a34c939bbf2d72bc",
       "Feedback.Dialog.BorderRadius": "665d4458cb3408e0a165e638a0fa0de5bc07630b",
-      "Forms.CaptionComponent.Container.ItemSpacing.SM": "12a6e7b57a26136306a2829cbad00623b8e27fae",
-      "Forms.CaptionComponent.Container.ItemSpacing.MD": "c316c369b75e52d1b41dca706b2c80723d97d475",
-      "Forms.CaptionComponent.Container.ItemSpacing.LG": "ef5c2ca2ccdbbe520a71c9afdfb2b39856393000",
-      "Forms.CaptionComponent.Container.PaddingLeftRight.SM": "9b3a3311270968aad460284647cfcc7a593a6954",
-      "Forms.CaptionComponent.Container.PaddingLeftRight.MD": "ddeffb4ee7fdb98aafac339f01ff0b4400599368",
-      "Forms.CaptionComponent.Container.PaddingLeftRight.LG": "61444afbd0bc21f5cbbc4b83540af9f5e789777f",
-      "Forms.CaptionComponent.Container.PaddingTopBottom.SM": "554bae0c6bf64a1e186224910f3602bdab69c8dc",
-      "Forms.CaptionComponent.Container.PaddingTopBottom.MD": "1a9d54cabbeb5f32057c746514a77d7ab9501de5",
-      "Forms.CaptionComponent.Container.PaddingTopBottom.LG": "3e9100e9097d85ada265f1229e410f06ee45fb09",
-      "Forms.CaptionComponent.IconWrapper.PaddingTop.SM": "01d766852ea0e2b80da8eccc38e4e7ed770996e5",
-      "Forms.CaptionComponent.IconWrapper.PaddingTop.MD": "0a2bb68de09f8f79400ac71ad4fd5c45533aa556",
-      "Forms.CaptionComponent.IconWrapper.PaddingTop.LG": "775b16d13a004b18d9850eb2fc2bab205f69972d",
-      "Forms.CaptionComponent.Icon.IconSize.SM": "f5cf91673f3a3e330390327210550e1a1705a426",
-      "Forms.CaptionComponent.Icon.IconSize.MD": "4ff426a51a45e94183d5699530e25e162f1db9cb",
-      "Forms.CaptionComponent.Icon.IconSize.LG": "0400899b2c7af67af03ea09e8012635e6f9b6c67",
-      "Forms.CaptionComponent.TextWrapper.PaddingLeftRight.SM": "e2ff99f3c8d8e0ea95a217158fb8ef95da704166",
-      "Forms.CaptionComponent.TextWrapper.PaddingLeftRight.MD": "a48fda23e43a20c6950cacdeb871a155aeb4d71d",
-      "Forms.CaptionComponent.TextWrapper.PaddingLeftRight.LG": "815cbf04443439d1543bd7f1317339d4ccd1f671",
-      "Forms.CaptionComponent.TextWrapper.PaddingTopBottom.SM": "3ee37a781bb70302488c103d37a7fcc30813fffc",
-      "Forms.CaptionComponent.TextWrapper.PaddingTopBottom.MD": "15b66b598c24539bcb0a014fab003419fe2e8def",
-      "Forms.CaptionComponent.TextWrapper.PaddingTopBottom.LG": "2f99e8df9d3f73c3d98d94aa4a2189d96555bcbd",
       "Forms.Checkbox.ContentCol.ItemSpacing.SM": "2734c5bf2171375d9ab6a6be02ff3feebafa4ade",
       "Forms.Checkbox.ContentCol.ItemSpacing.MD": "d94ae968075ae5f8e41d4a17b74dbb90d3c2afaf",
       "Forms.Checkbox.ContentCol.ItemSpacing.LG": "10c83ba8c3dcd447dfebf43b47901d5d66f09a8c",
@@ -1028,122 +991,6 @@
       "Forms.ToggleSwitch.ControlWithStateLabel.Container.ItemSpacing.SM": "2f384ac7859d1ef2082811080b999ad4871f9784",
       "Forms.ToggleSwitch.ControlWithStateLabel.Container.ItemSpacing.MD": "dcbe0eba5dc4f10ff2bba7e2b073f156b730aaba",
       "Forms.ToggleSwitch.ControlWithStateLabel.Container.ItemSpacing.LG": "62d0b78f33b367721ca7dae53af0970461e297cf",
-      "Forms.Select.SM.IconPaddingRight": "32d481f01f53a1a5b9f92455a9f1a1f04667182a",
-      "Forms.Select.MD.IconPaddingRight": "0fd348b61690f1c372400ac426c8098dd594fc05",
-      "Forms.Select.LG.IconPaddingRight": "f9d89c13767041ed3e4422ce0bffac29b661a00c",
-      "Forms.TextArea.InputField.MinHeight.SM": "e126940af6bf2cf49ac2742258230557b0c6a0d7",
-      "Forms.TextArea.InputField.MinHeight.MD": "f2aec5d81be0e4b43e85baf7a56579347f5de832",
-      "Forms.TextArea.InputField.MinHeight.LG": "3036a4f154b9df3caf5322be3a06b5046866f673",
-      "Forms.ToggleSwitch.Container.ItemSpacing.SM": "f7a3a4938816150b7bbb7487f85e011d4615f32f",
-      "Forms.ToggleSwitch.Container.ItemSpacing.MD": "f87066b824c03c767cbc48d9d91dca3109cc8c67",
-      "Forms.ToggleSwitch.Container.ItemSpacing.LG": "e1256788ee6614ae456f586e88e5f82a3bbac951",
-      "Forms.ToggleSwitch.ContentCol.ItemSpacing.SM": "52a5ea16baf36e46f15825826ebba84734095b79",
-      "Forms.ToggleSwitch.ContentCol.ItemSpacing.MD": "24c034d135aeeb5e1e858ab6bdf7bb4b7ac76572",
-      "Forms.ToggleSwitch.ContentCol.ItemSpacing.LG": "26747d4828ead75a96bdb6aa199f5f7bef8656c9",
-      "Forms.ToggleSwitch.Control.Container.BorderRadius": "b6ca38909c84c3945d91f54d777a5ce4f4d27f65",
-      "Forms.ToggleSwitch.Control.Container.BorderWidth.SM.Active.Rest": "8443304ea445b2f06f5158bae550d4184b74bf19",
-      "Forms.ToggleSwitch.Control.Container.BorderWidth.SM.Active.Hover": "89217bf38aae2a18587cb7cae486bf28653b4fc9",
-      "Forms.ToggleSwitch.Control.Container.BorderWidth.SM.Active.Pressed": "1395d8ce01320ce7c864c9cb28ae9241a91bf8ed",
-      "Forms.ToggleSwitch.Control.Container.BorderWidth.SM.Active.Focus": "2f46580299621bc0f4fcd012c2d61a196b3f8f65",
-      "Forms.ToggleSwitch.Control.Container.BorderWidth.SM.Active.Disabled": "02000efd1f447b040f69cb64fa92b479b91867eb",
-      "Forms.ToggleSwitch.Control.Container.BorderWidth.SM.Active.ReadOnly": "96d95eb18ccc7dbc6de37650602a326244687447",
-      "Forms.ToggleSwitch.Control.Container.BorderWidth.SM.Inactive.Rest": "fb43f81ce14c60333e93590ccafb092274c5015c",
-      "Forms.ToggleSwitch.Control.Container.BorderWidth.SM.Inactive.Hover": "3def7a6de75b8052f6025f49c8019ba2309f5c59",
-      "Forms.ToggleSwitch.Control.Container.BorderWidth.SM.Inactive.Pressed": "a5b0e5434836d65304197365d4d061e365458f2b",
-      "Forms.ToggleSwitch.Control.Container.BorderWidth.SM.Inactive.Focus": "ce55013eb760d7d136feb65d14b55e76964016ee",
-      "Forms.ToggleSwitch.Control.Container.BorderWidth.SM.Inactive.Disabled": "ced945f2200027781652e5990a1315e67ca3e5f2",
-      "Forms.ToggleSwitch.Control.Container.BorderWidth.SM.Inactive.ReadOnly": "50f724b531ca386787f64d052e61aeeea9465c22",
-      "Forms.ToggleSwitch.Control.Container.BorderWidth.MD.Active.Rest": "be1afea032d7d677ca56b5c2948b46b51f79e28a",
-      "Forms.ToggleSwitch.Control.Container.BorderWidth.MD.Active.Hover": "6e1d1eb0cabb728ee7c5bc905357f14921f6062a",
-      "Forms.ToggleSwitch.Control.Container.BorderWidth.MD.Active.Pressed": "470e9328d86130083db996bc0af8ab9cfc0252dc",
-      "Forms.ToggleSwitch.Control.Container.BorderWidth.MD.Active.Focus": "e9021be4f38a9251bb6e0585a54694ba2b0aa71e",
-      "Forms.ToggleSwitch.Control.Container.BorderWidth.MD.Active.Disabled": "a010f3e6b10d49b78cb19392b5dcc8a6e9df6f05",
-      "Forms.ToggleSwitch.Control.Container.BorderWidth.MD.Active.ReadOnly": "af60a6558f73f4a21c4868be521805ac619cc626",
-      "Forms.ToggleSwitch.Control.Container.BorderWidth.MD.Inactive.Rest": "9137de8ffc4cf25eabdbaf6c7e7db544e4254b07",
-      "Forms.ToggleSwitch.Control.Container.BorderWidth.MD.Inactive.Hover": "efde4408acdfa361a1ac00907d95044a68216fb8",
-      "Forms.ToggleSwitch.Control.Container.BorderWidth.MD.Inactive.Pressed": "1ba52adda238f559ca9aa76a1a3dbd1810205e12",
-      "Forms.ToggleSwitch.Control.Container.BorderWidth.MD.Inactive.Focus": "5e47064e334d0496e1f2a18db6d1a15612749264",
-      "Forms.ToggleSwitch.Control.Container.BorderWidth.MD.Inactive.Disabled": "52ce8ebe431adf033a8c7ae7ddefcdb64049f2c8",
-      "Forms.ToggleSwitch.Control.Container.BorderWidth.MD.Inactive.ReadOnly": "8e132b5df3639782a7f3bd615c490238e68679be",
-      "Forms.ToggleSwitch.Control.Container.BorderWidth.LG.Active.Rest": "8e185d9c18d5ba07e113a57fc39facd98c9fa6a2",
-      "Forms.ToggleSwitch.Control.Container.BorderWidth.LG.Active.Hover": "6b05e64401247569fff15872036a944306e52f23",
-      "Forms.ToggleSwitch.Control.Container.BorderWidth.LG.Active.Pressed": "561152da5ccbde1837188e9c65b505fdb7256989",
-      "Forms.ToggleSwitch.Control.Container.BorderWidth.LG.Active.Focus": "93ab4d0ceefdf77f85557bcb88e6fd6b0cfb2bc8",
-      "Forms.ToggleSwitch.Control.Container.BorderWidth.LG.Active.Disabled": "bb0edccd51d9a5950d481abefef07d94c4536f5b",
-      "Forms.ToggleSwitch.Control.Container.BorderWidth.LG.Active.ReadOnly": "dff20f512e8285c83a660c89fc59b0ad25c23184",
-      "Forms.ToggleSwitch.Control.Container.BorderWidth.LG.Inactive.Rest": "fbf85b491dbadda3871d68c0a44323b76d69ffb2",
-      "Forms.ToggleSwitch.Control.Container.BorderWidth.LG.Inactive.Hover": "ad78e1e0955ec27d027ed9e7bc8b011c500d556e",
-      "Forms.ToggleSwitch.Control.Container.BorderWidth.LG.Inactive.Pressed": "c9faaa1dd2f7e68f7e8cadcaeab3b66e2d5c2438",
-      "Forms.ToggleSwitch.Control.Container.BorderWidth.LG.Inactive.Focus": "a10d6b45e1cecb51c786941796deedd46172d4b2",
-      "Forms.ToggleSwitch.Control.Container.BorderWidth.LG.Inactive.Disabled": "608f042c02e7158665c241b8606caeebb89543c7",
-      "Forms.ToggleSwitch.Control.Container.BorderWidth.LG.Inactive.ReadOnly": "3fef2b5e588daef68e737f6ba94e7b91c9eb00a8",
-      "Forms.ToggleSwitch.Control.Container.Width.SM": "e6409142b83baf3d7bb68b744aa91ccab5c39d0b",
-      "Forms.ToggleSwitch.Control.Container.Width.MD": "2bcd00695d027c3e77c23d74562baadc455273e2",
-      "Forms.ToggleSwitch.Control.Container.Width.LG": "c8bf100c2313dbddb8010817e2d4a515baf148e8",
-      "Forms.ToggleSwitch.Control.Container.Height.SM": "06772a393615f69fc8d5e45d49595cfcd3c8f5de",
-      "Forms.ToggleSwitch.Control.Container.Height.MD": "10728a78f2ccc16d4d140dbbfd0507c5aa85c151",
-      "Forms.ToggleSwitch.Control.Container.Height.LG": "dfbeb254685ad83eedd2bd3de7656f52714b6e39",
-      "Forms.ToggleSwitch.Control.Container.Padding.SM": "47e748b69fd37ccbe639d2f7b440b07c1943bf73",
-      "Forms.ToggleSwitch.Control.Container.Padding.MD": "12a5ba9ae3658acbfec472ec5981ddbd37a99db1",
-      "Forms.ToggleSwitch.Control.Container.Padding.LG": "faddc4124fa729a3c9510ed740474ff547f65d99",
-      "Forms.ToggleSwitch.Control.AY11Icon.IconSize.SM": "fd656d7566f15ebba6f6741a2bff2945b0100b44",
-      "Forms.ToggleSwitch.Control.AY11Icon.IconSize.MD": "fa04d3cd59c4a2c0c9981c2b15652a8c63f95277",
-      "Forms.ToggleSwitch.Control.AY11Icon.IconSize.LG": "d85521ca0574d1e5039f44e40122d900d5a37c73",
-      "Forms.ToggleSwitch.Control.AY11IconContainer.PaddingLeftRight.SM": "e7c4287ae0f5d1c9362010a1ba260344804442f4",
-      "Forms.ToggleSwitch.Control.AY11IconContainer.PaddingLeftRight.MD": "1f4af8e97a6d5e1b82bf47071cd3814381cba02b",
-      "Forms.ToggleSwitch.Control.AY11IconContainer.PaddingLeftRight.LG": "b7cefe0d33792b10b3f7353e07cbd4c3211f08bc",
-      "Forms.ToggleSwitch.Control.Knob.Size.SM": "28dad85834303cd0e3a5eca328d70e31a5d3ca7d",
-      "Forms.ToggleSwitch.Control.Knob.Size.MD": "ec4541d4eaf2b6b79ae3e1ea8c482c153219d4d3",
-      "Forms.ToggleSwitch.Control.Knob.Size.LG": "669d21364af01102e0efcf77cddfeb07c06f938f",
-      "Forms.ToggleSwitch.Control.Knob.BorderWidth.SM.Active.Rest": "a7d41464a861e047543339d36bc9a1bcc3a6443f",
-      "Forms.ToggleSwitch.Control.Knob.BorderWidth.SM.Active.Hover": "662a967daeff097129da7ada54b1115039e84020",
-      "Forms.ToggleSwitch.Control.Knob.BorderWidth.SM.Active.Pressed": "5420b405969ba23d0370baaf1ee2e852336ac323",
-      "Forms.ToggleSwitch.Control.Knob.BorderWidth.SM.Active.Focus": "22ff4a9d658ea808d0542048e58572cfccaa5f08",
-      "Forms.ToggleSwitch.Control.Knob.BorderWidth.SM.Active.Disabled": "8df55f1d8f891d8d4af6c68b63a2090a46668846",
-      "Forms.ToggleSwitch.Control.Knob.BorderWidth.SM.Active.ReadOnly": "5ec9dba82eac269c598da978f9f3c3eef507c5f2",
-      "Forms.ToggleSwitch.Control.Knob.BorderWidth.SM.Inactive.Rest": "ea8d2c283807c33cb0aa80f1ed304c7caf94fb8d",
-      "Forms.ToggleSwitch.Control.Knob.BorderWidth.SM.Inactive.Hover": "caa9500139856af79a48ed72caa315ba4fb245ab",
-      "Forms.ToggleSwitch.Control.Knob.BorderWidth.SM.Inactive.Pressed": "97675456c6a2bab9d1fae1042187a01613bae1ae",
-      "Forms.ToggleSwitch.Control.Knob.BorderWidth.SM.Inactive.Focus": "c307ca4cb785e50eab3e44a612d4b882717c0995",
-      "Forms.ToggleSwitch.Control.Knob.BorderWidth.SM.Inactive.Disabled": "eaa84f2bf1abd3604f44df8307357b85b148d73e",
-      "Forms.ToggleSwitch.Control.Knob.BorderWidth.SM.Inactive.ReadOnly": "1dcd4661fad24da460c577ea14989b6e3d989571",
-      "Forms.ToggleSwitch.Control.Knob.BorderWidth.MD.Active.Rest": "14c306c7ad94d8c465927678d0377922a249fe9b",
-      "Forms.ToggleSwitch.Control.Knob.BorderWidth.MD.Active.Hover": "da24d52a60279721a7265b674b5ec8a13769779d",
-      "Forms.ToggleSwitch.Control.Knob.BorderWidth.MD.Active.Pressed": "5cdbb2f82d019104de75a9e3367e90cf27d48e39",
-      "Forms.ToggleSwitch.Control.Knob.BorderWidth.MD.Active.Focus": "e7696d0cb790c923c10ea9566ea047613380e833",
-      "Forms.ToggleSwitch.Control.Knob.BorderWidth.MD.Active.Disabled": "39750897a0b50e3e34ebdf933a19a5ad8beeb12a",
-      "Forms.ToggleSwitch.Control.Knob.BorderWidth.MD.Active.ReadOnly": "cce3039022fcd81c71c511c0c51126c365233ed4",
-      "Forms.ToggleSwitch.Control.Knob.BorderWidth.MD.Inactive.Rest": "dbae4abbd361e574c87a0da7699d7b64ca28f3e6",
-      "Forms.ToggleSwitch.Control.Knob.BorderWidth.MD.Inactive.Hover": "79c62a40d901cc41fae79854e04a93d485b3e7b6",
-      "Forms.ToggleSwitch.Control.Knob.BorderWidth.MD.Inactive.Pressed": "2615b2f5bb94e8649599fbd8680780f59b719fee",
-      "Forms.ToggleSwitch.Control.Knob.BorderWidth.MD.Inactive.Focus": "804b33b9d9c788808b175a3bf1476138a1fffff2",
-      "Forms.ToggleSwitch.Control.Knob.BorderWidth.MD.Inactive.Disabled": "dc35493b49dfbbc29612454075e010abe91a014d",
-      "Forms.ToggleSwitch.Control.Knob.BorderWidth.MD.Inactive.ReadOnly": "f9bfd14f9514da71f6a4ed108c17adba7b23b1e3",
-      "Forms.ToggleSwitch.Control.Knob.BorderWidth.LG.Active.Rest": "8146243035bdffc580512ed432031efef8729284",
-      "Forms.ToggleSwitch.Control.Knob.BorderWidth.LG.Active.Hover": "88034beba68036b163d63c86a62533d461bf9377",
-      "Forms.ToggleSwitch.Control.Knob.BorderWidth.LG.Active.Pressed": "60d9a23314abb9face3fc313e491ca6882e7bed4",
-      "Forms.ToggleSwitch.Control.Knob.BorderWidth.LG.Active.Focus": "aa80b4eb0d135b076ec407914cabfb572728a581",
-      "Forms.ToggleSwitch.Control.Knob.BorderWidth.LG.Active.Disabled": "27575228571a08239e2a565a94f4bd1d98833fdf",
-      "Forms.ToggleSwitch.Control.Knob.BorderWidth.LG.Active.ReadOnly": "0d953fd9c4e583d26dc8bf4b9ebdc2f9190751de",
-      "Forms.ToggleSwitch.Control.Knob.BorderWidth.LG.Inactive.Rest": "677a48e89d9b7b2a77a1f8713d04c1e0cf9c35ad",
-      "Forms.ToggleSwitch.Control.Knob.BorderWidth.LG.Inactive.Hover": "1826d41946adde037f721b56915efd5dbfca68aa",
-      "Forms.ToggleSwitch.Control.Knob.BorderWidth.LG.Inactive.Pressed": "f1e8f69e7d2dd02b2e7fa7e4e1d97ba401d5b9a2",
-      "Forms.ToggleSwitch.Control.Knob.BorderWidth.LG.Inactive.Focus": "77de4c8c77672371e5641ddda58b7aa3fe7b9d76",
-      "Forms.ToggleSwitch.Control.Knob.BorderWidth.LG.Inactive.Disabled": "614db5b2590d0131017ceee4b7db57b97e11777c",
-      "Forms.ToggleSwitch.Control.Knob.BorderWidth.LG.Inactive.ReadOnly": "50b5198906a5722ba4521684fc2b454ec355018f",
-      "Forms.ToggleSwitch.ControlWithStateLabel.Container.ItemSpacing.SM": "2f384ac7859d1ef2082811080b999ad4871f9784",
-      "Forms.ToggleSwitch.ControlWithStateLabel.Container.ItemSpacing.MD": "dcbe0eba5dc4f10ff2bba7e2b073f156b730aaba",
-      "Forms.ToggleSwitch.ControlWithStateLabel.Container.ItemSpacing.LG": "62d0b78f33b367721ca7dae53af0970461e297cf",
-      "Forms.Slider.Thumb.Sizing.Rest": "c1a06168fad8ec36449f9f76bd9794f90cc08967",
-      "Forms.Slider.Thumb.Sizing.Hover": "92f7b084a0de72de7f8affbd8eae719d566c02a3",
-      "Forms.Slider.Thumb.Sizing.Pressed": "c4afe6cd30a4f980be07da2ace3bd15d3ff3cb49",
-      "Forms.Slider.Thumb.Sizing.Focus": "12918f547bbaabfdfe241c1e7d8a42eac60237d6",
-      "Forms.Slider.Thumb.Sizing.Disabled": "f392e2ca8457aa3977a92325a66c185fcd028c54",
-      "Forms.Slider.Thumb.Sizing.Readonly": "f14a4e554ad447122477cc697b86041c3f76415c",
-      "Forms.Slider.TickMark.Sizing": "1463ab3e63d2a5936e5823f1a5a099bf5f9baef9",
-      "Forms.NumberInput.Input.TextContainer.ItemSpacing.SM": "fe2a59e1c771ef86b5c64c724782a9a622acca9a",
-      "Forms.NumberInput.Input.TextContainer.ItemSpacing.MD": "6c45d7fc2f7b9f646da23abcdddc068f865dbc26",
-      "Forms.NumberInput.Input.TextContainer.ItemSpacing.LG": "e4fb34d6f9727370ab0fa0f12846390b603ca136",
       "Forms.CaptionGroup.Container.ItemSpacing.SM": "88cb1edf643e0e81bcc084226d7506fabfcea1cd",
       "Forms.CaptionGroup.Container.ItemSpacing.MD": "fd0479ce7fca70558742fd2a0b583c9e7a0e53df",
       "Forms.CaptionGroup.Container.ItemSpacing.LG": "1cbbab9634e0b132b53aa4955dde3d57585259b1",
@@ -1200,8 +1047,6 @@
       "Feedback.Counter.Text.TextColor.Neutral": "09f4a5ecb8498984685870b785ba7abf4dc626bd",
       "Feedback.Counter.Text.TextColor.Warning": "7a37d5281d7d85851d881f0d1856648e8ce0154a",
       "Feedback.Counter.Text.TextColor.Error": "02d3e9a1059005caf1c4cd43f91e9c2cbadc6c7a",
-      "Feedback.Tooltip.Container.BackgroundColor": "b6e780869894888e343c303051813f37724f905d",
-      "Feedback.Tooltip.Text.TextColor": "3ac82f6ccd777b78f4311000b90b52e023df9dc3",
       "Feedback.Dialog.Surface.Color": "0632bde949b58fdbe72a95081dcbb58dddd5edc4",
       "Feedback.Loader.Background.BorderColor.Default": "bf2e41c2d71f6a196f377e551edc13e136714828",
       "Feedback.Loader.Background.BorderColor.Inverted": "07e87c20888a3508b62d5bd346f662b9cee5a6f6",
@@ -1350,34 +1195,6 @@
       "Forms.ToggleSwitch.Control.Knob.BorderColor.Active.Focus": "10752a4255cc5d49abdc77d64867653eb9a42f2e",
       "Forms.ToggleSwitch.Control.Knob.BorderColor.Active.Disabled": "7bf2913c532d6143b4d2a9c80793077b3fcfe751",
       "Forms.ToggleSwitch.Control.Knob.BorderColor.Active.ReadOnly": "af62c13092f2d72179d76ba6934480d64ad98fa2",
-      "Forms.Slider.Thumb.Fill.Rest": "4b56ceea6fa677c0f3eb622ac04b5f7db5a7d4f2",
-      "Forms.Slider.Thumb.Fill.Hover": "c01c69ac66f6f442c8af59578cb4a1e67cb63b98",
-      "Forms.Slider.Thumb.Fill.Pressed": "08ea2cebde352ebe0763facfd9aa82aa3158e2fc",
-      "Forms.Slider.Thumb.Fill.Focus": "d5aaed4f1acef6382a33fe4d10acaf15e1056f62",
-      "Forms.Slider.Thumb.Fill.Disabled": "aebbd780a235ce9b23807ddf1301b9eb234ebae3",
-      "Forms.Slider.Thumb.Fill.ReadOnly": "d05bbda30e504de67aa2b39368e80d7b57da9449",
-      "Forms.Slider.Thumb.Fill.Error": "7453c972027c636bda0b542fdfe834577d753bd3",
-      "Forms.Slider.Thumb.Stroke.Rest": "c95678b685e6b590661c87924dec4de9c4acf7b8",
-      "Forms.Slider.Thumb.Stroke.Hover": "1c923701d911ca57e5aacb6edfb12eae4367c015",
-      "Forms.Slider.Thumb.Stroke.Pressed": "040c591ff8c7bb7beb1022a72430abaef2329ab6",
-      "Forms.Slider.Thumb.Stroke.Focus": "2e06fee0a071d109ab710307223bea8b9aeb289a",
-      "Forms.Slider.Thumb.Stroke.Disabled": "6d182e86faa18651935a295b7917d807817c1f10",
-      "Forms.Slider.Thumb.Stroke.ReadOnly": "4acb93ad890a75466ab8e85a7a8bee256afad4b8",
-      "Forms.Slider.Thumb.Stroke.Error": "83bd759da74e8db15225ce8931c540104a837e63",
-      "Forms.Slider.Track.Stroke.Active.Default": "5b87c810ba995480e1503c5e213ccf92314da3f4",
-      "Forms.Slider.Track.Stroke.Active.Mute": "41e222e65c9e24d932cbeb42f723b0b6d0df3350",
-      "Forms.Slider.Track.Stroke.Inactive.Default": "ed0a8e6eb0c3e93ec2c300aab263858e82e46dad",
-      "Forms.Slider.Track.Stroke.Inactive.Mute": "6f922786c9491166c0a5fe22671499c910d46376",
-      "Forms.Slider.TickMark.Stroke.Active.Default": "4dcf6ace4cddcf8bda724c67aa8fcaf1d639cfa4",
-      "Forms.Slider.TickMark.Stroke.Active.Mute": "d342a0c27201b4f2ce05a0afe151f4125c68b004",
-      "Forms.Slider.TickMark.Stroke.Inactive.Default": "dc996aff3ee7ec182741a0859971368412f6df4e",
-      "Forms.Slider.TickMark.Stroke.Inactive.Mute": "9f98624cc8a7b8995efc5a4c0a29daafb33626b2",
-      "Forms.Slider.TickMark.Fill.Active.Default": "11f6690370c6475a78444af732baf3be22395203",
-      "Forms.Slider.TickMark.Fill.Active.Mute": "37c7ab6c786b1cb4f0484c3666cee5a148fa7701",
-      "Forms.Slider.TickMark.Fill.Inactive.Default": "7883313c7260d07b035033c240273eab175e458a",
-      "Forms.Slider.TickMark.Fill.Inactive.Mute": "b038a2db0f9367b4a3711e09952325567f0c616c",
-      "Forms.Slider.Legend.Color.Default": "a379967d3a56a97aee50f9a7e51c6a712798c546",
-      "Forms.Slider.Legend.Color.Disabled": "022ef2187311e450e3836516cdbdac3d006e6b1d",
       "Forms.FormLabel.Label.TextColor.Rest": "ec9947b9d58b06c1d655964205696ca63b1234b0",
       "Forms.FormLabel.Label.TextColor.Hover": "2c9b8115269c6a26bd09f00fb42593a0dc8a1dd8",
       "Forms.FormLabel.Label.TextColor.Pressed": "27235518c7bdd3e3b527884ad360e520d516d89f",
@@ -1430,10 +1247,6 @@
       "Navigation.TabBar.Tab.Icon.IconColor.Inactive.Disabled": "2255dfc7d338f82fcc3ecd1331b4c7ebf4f4dba3",
       "Action.Menu.Surface.Color": "915b1ddec5d8b8e8a32bf5afbd9186e16af5ec54",
       "Action.Menu.MenuSection.SectionTitle": "9f8a812cd4e37124e365682d18bd0dd37b5ea311",
-      "Forms.CaptionComponent.Text.TextColor.Hint": "1abca4ead92d42ee32edae29e2b89a02bbb51819",
-      "Forms.CaptionComponent.Text.TextColor.Error": "8aad8f6ace200ea1d5a5381eb3cbe9d4ae007f31",
-      "Forms.CaptionComponent.Icon.IconColor.Hint": "744bc9a56e5ec91960063f0be5bf3bdd33d6d907",
-      "Forms.CaptionComponent.Icon.IconColor.Error": "491aab6aebbe70c4bc77d8181f7775a955338dbe",
       "Action.CTA.SurfaceFill.Rest": "e113217d84d5ed192f2c9401e6881a78bd729419",
       "Action.CTA.SurfaceFill.Hover": "558ccf9c09e95bb902075239a9bd050b442c5bad",
       "Action.CTA.SurfaceFill.Pressed": "84fd3776c431823e1eb1fe5ee216df727493dc77",
@@ -1802,42 +1615,7 @@
       "q.content.onunspecified.inverted.beta": "e58e8029fc5f3480be093c8fac50a82614801687",
       "q.shadow.alpha": "83778a8c4ffd7b5d5c4df92bfde29340078a2dd0",
       "_internal.accent.pink.subtle": "a5817511c781de8760bf04d0dc84a07aca5c012d",
-      "_internal.accent.pink.strong": "b6518d18cc6ea229e89868f15c5e80e2efac34ea",
-      "Forms.Slider.TickMark.Size": "1463ab3e63d2a5936e5823f1a5a099bf5f9baef9",
-      "Forms.Slider.TickMark.BorderColor.Default.Active": "4dcf6ace4cddcf8bda724c67aa8fcaf1d639cfa4",
-      "Forms.Slider.TickMark.BorderColor.Mute.Active": "d342a0c27201b4f2ce05a0afe151f4125c68b004",
-      "Forms.Slider.TickMark.BorderColor.Default.Inactive": "dc996aff3ee7ec182741a0859971368412f6df4e",
-      "Forms.Slider.TickMark.BorderColor.Mute.Inactive": "9f98624cc8a7b8995efc5a4c0a29daafb33626b2",
-      "Forms.Slider.Track.BorderColor.Default.Active": "5b87c810ba995480e1503c5e213ccf92314da3f4",
-      "Forms.Slider.Track.BorderColor.Mute.Active": "41e222e65c9e24d932cbeb42f723b0b6d0df3350",
-      "Forms.Slider.Track.BorderColor.Default.Inactive": "ed0a8e6eb0c3e93ec2c300aab263858e82e46dad",
-      "Forms.Slider.Track.BorderColor.Mute.Inactive": "6f922786c9491166c0a5fe22671499c910d46376",
-      "Forms.Slider.TickMark.BackgroundColor.Default.Active": "11f6690370c6475a78444af732baf3be22395203",
-      "Forms.Slider.TickMark.BackgroundColor.Mute.Active": "37c7ab6c786b1cb4f0484c3666cee5a148fa7701",
-      "Forms.Slider.TickMark.BackgroundColor.Default.Inactive": "7883313c7260d07b035033c240273eab175e458a",
-      "Forms.Slider.TickMark.BackgroundColor.Mute.Inactive": "b038a2db0f9367b4a3711e09952325567f0c616c",
-      "Forms.Slider.Legend.TextColor.Default": "a379967d3a56a97aee50f9a7e51c6a712798c546",
-      "Forms.Slider.Legend.TextColor.Disabled": "022ef2187311e450e3836516cdbdac3d006e6b1d",
-      "Forms.Slider.Thumb.Shape.Size.Rest": "c1a06168fad8ec36449f9f76bd9794f90cc08967",
-      "Forms.Slider.Thumb.Shape.Size.Hover": "92f7b084a0de72de7f8affbd8eae719d566c02a3",
-      "Forms.Slider.Thumb.Shape.Size.Pressed": "c4afe6cd30a4f980be07da2ace3bd15d3ff3cb49",
-      "Forms.Slider.Thumb.Shape.Size.Focus": "12918f547bbaabfdfe241c1e7d8a42eac60237d6",
-      "Forms.Slider.Thumb.Shape.Size.Disabled": "f392e2ca8457aa3977a92325a66c185fcd028c54",
-      "Forms.Slider.Thumb.Shape.Size.ReadOnly": "f14a4e554ad447122477cc697b86041c3f76415c",
-      "Forms.Slider.Thumb.Shape.BackgroundColor.Rest": "4b56ceea6fa677c0f3eb622ac04b5f7db5a7d4f2",
-      "Forms.Slider.Thumb.Shape.BackgroundColor.Hover": "c01c69ac66f6f442c8af59578cb4a1e67cb63b98",
-      "Forms.Slider.Thumb.Shape.BackgroundColor.Pressed": "08ea2cebde352ebe0763facfd9aa82aa3158e2fc",
-      "Forms.Slider.Thumb.Shape.BackgroundColor.Focus": "d5aaed4f1acef6382a33fe4d10acaf15e1056f62",
-      "Forms.Slider.Thumb.Shape.BackgroundColor.Disabled": "aebbd780a235ce9b23807ddf1301b9eb234ebae3",
-      "Forms.Slider.Thumb.Shape.BackgroundColor.ReadOnly": "d05bbda30e504de67aa2b39368e80d7b57da9449",
-      "Forms.Slider.Thumb.Shape.BackgroundColor.Error": "7453c972027c636bda0b542fdfe834577d753bd3",
-      "Forms.Slider.Thumb.Shape.BorderColor.Rest": "c95678b685e6b590661c87924dec4de9c4acf7b8",
-      "Forms.Slider.Thumb.Shape.BorderColor.Hover": "1c923701d911ca57e5aacb6edfb12eae4367c015",
-      "Forms.Slider.Thumb.Shape.BorderColor.Pressed": "040c591ff8c7bb7beb1022a72430abaef2329ab6",
-      "Forms.Slider.Thumb.Shape.BorderColor.Focus": "2e06fee0a071d109ab710307223bea8b9aeb289a",
-      "Forms.Slider.Thumb.Shape.BorderColor.Disabled": "6d182e86faa18651935a295b7917d807817c1f10",
-      "Forms.Slider.Thumb.Shape.BorderColor.ReadOnly": "4acb93ad890a75466ab8e85a7a8bee256afad4b8",
-      "Forms.Slider.Thumb.Shape.BorderColor.Error": "83bd759da74e8db15225ce8931c540104a837e63"
+      "_internal.accent.pink.strong": "b6518d18cc6ea229e89868f15c5e80e2efac34ea"
     },
     "group": "Theme"
   },
@@ -2744,7 +2522,7 @@
       "Forms.RadioGroup.LegendWrapper.PaddingBottom.SM": "16507c1bcc6165435b310ac5cd1ae993c960132a",
       "Forms.RadioGroup.LegendWrapper.PaddingBottom.MD": "7181319f4cb344156b2cb89dbceb14ec6cd5c9b3",
       "Forms.RadioGroup.LegendWrapper.PaddingBottom.LG": "4642e5a7a5fc05025ec5e22c44f0680935133ef4",
-      "Forms.RadioGroup.RadioStackHorizontal.ItemSpacing.SM": "28acbd4962c93761087381b091e399d6237148a7",
+      "Forms.RadioGroup.RadioStackHorizontal.ItemSpacing.SM": "7b68d8ca89dd042b65986d4dbc94f048f788fcb8",
       "Forms.RadioGroup.RadioStackHorizontal.ItemSpacing.MD": "04f55ce24ed8b72265048da7f96ba6982091a842",
       "Forms.RadioGroup.RadioStackHorizontal.ItemSpacing.LG": "d861a3dc4c1f0299e85d3bd52671483f7727ab82",
       "Forms.RadioGroup.RadioStackVertical.ItemSpacing.SM": "9747e7387ccf5a39b75b4b87a85e1fa496c8f321",
@@ -3525,18 +3303,6 @@
       "q.shadow.alpha": "83778a8c4ffd7b5d5c4df92bfde29340078a2dd0",
       "_internal.accent.pink.subtle": "a5817511c781de8760bf04d0dc84a07aca5c012d",
       "_internal.accent.pink.strong": "b6518d18cc6ea229e89868f15c5e80e2efac34ea",
-      "Forms.RadioGroup.RadioStackVertical.ItemSpacing.SM": "9747e7387ccf5a39b75b4b87a85e1fa496c8f321",
-      "Forms.RadioGroup.RadioStackVertical.ItemSpacing.MD": "c3b638d0bfdf9bb15c1242f8549b5a77181eee80",
-      "Forms.RadioGroup.RadioStackVertical.ItemSpacing.LG": "9078e58ad8671fe49446d9134c4683d92b12417f",
-      "Forms.RadioGroup.RadioStackHorizontal.ItemSpacing.MD": "04f55ce24ed8b72265048da7f96ba6982091a842",
-      "Forms.RadioGroup.RadioStackHorizontal.ItemSpacing.LG": "d861a3dc4c1f0299e85d3bd52671483f7727ab82",
-      "Forms.RadioGroup.LegendWrapper.PaddingBottom.SM": "16507c1bcc6165435b310ac5cd1ae993c960132a",
-      "Forms.RadioGroup.LegendWrapper.PaddingBottom.MD": "7181319f4cb344156b2cb89dbceb14ec6cd5c9b3",
-      "Forms.RadioGroup.LegendWrapper.PaddingBottom.LG": "4642e5a7a5fc05025ec5e22c44f0680935133ef4",
-      "Forms.RadioGroup.RadioStackHorizontal.ItemSpacing.SM": "7b68d8ca89dd042b65986d4dbc94f048f788fcb8",
-      "Forms.RadioGroup.CaptionSlot.PaddingTop.SM": "e13378c5aaa8afdb616eab681ea573b90234c0f4",
-      "Forms.RadioGroup.CaptionSlot.PaddingTop.MD": "69c830617b0546925db764763e66460d4950fe3a",
-      "Forms.RadioGroup.CaptionSlot.PaddingTop.LG": "c8f1ada63ac592e9d6d96942d34d419648bc3984",
       "Forms.Slider.TickMark.Size": "1463ab3e63d2a5936e5823f1a5a099bf5f9baef9",
       "Forms.Slider.TickMark.BorderColor.Default.Active": "4dcf6ace4cddcf8bda724c67aa8fcaf1d639cfa4",
       "Forms.Slider.TickMark.BorderColor.Mute.Active": "d342a0c27201b4f2ce05a0afe151f4125c68b004",
@@ -3575,4 +3341,4 @@
     },
     "group": "Theme"
   }
-]
+]
\ No newline at end of file

From 6d6e97a569a055a0c8c4e53be686254b3ce5133c Mon Sep 17 00:00:00 2001
From: JpunktWpunkt <92968754+JpunktWpunkt@users.noreply.github.com>
Date: Fri, 19 Jan 2024 08:57:43 +0100
Subject: [PATCH 2/9] Fix/712 fix scrolling (#791)

* Implemented requestAnimationFrame to restore scroll position and focus
---
 .../src/components/forms/textarea/index.ts     | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/packages/ui-library/src/components/forms/textarea/index.ts b/packages/ui-library/src/components/forms/textarea/index.ts
index e2bb7392b..3b773a2c6 100644
--- a/packages/ui-library/src/components/forms/textarea/index.ts
+++ b/packages/ui-library/src/components/forms/textarea/index.ts
@@ -63,10 +63,28 @@ export class BlrTextarea extends LitElement {
   }
 
   protected updateCounter() {
+    const scrollTop = this.textareaElement?.scrollTop;
+    const isFocused = this.textareaElement === document.activeElement;
+
     const length = this.textareaElement?.value?.length;
     if (length !== undefined) {
       this.count = length;
     }
+
+    const shouldUpdateTextarea = this.textareaElement && scrollTop !== undefined;
+
+    if (shouldUpdateTextarea) {
+      requestAnimationFrame(() => {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-expect-error
+        this.textareaElement.scrollTop = scrollTop;
+        if (isFocused) {
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-expect-error
+          this.textareaElement.focus();
+        }
+      });
+    }
   }
 
   protected determinateCounterVariant(): CounterVariantType {

From 3a4cacad2434d02059c4f07233e324a636af6722 Mon Sep 17 00:00:00 2001
From: JpunktWpunkt <92968754+JpunktWpunkt@users.noreply.github.com>
Date: Fri, 19 Jan 2024 10:06:04 +0100
Subject: [PATCH 3/9] fix(ui-library): fixed contrast violation in disabled
 state (#802)

* fix(ui-library): fixed contrast violation in disabled state for icon-button and text-button and fixed that the text can not be selected in disabled mode for different browsers
---------

Co-authored-by: christian.b.hoffmann <christian.b.hoffmann@accenture.com>
Co-authored-by: Christian Hoffmann <112889877+ChristianHoffmannS2@users.noreply.github.com>
---
 .../src/components/actions/buttons/icon-button/index.ts        | 1 +
 .../src/components/actions/buttons/text-button/index.ts        | 3 ++-
 .../ui-library/src/foundation/semantic-tokens/action.css.ts    | 2 ++
 3 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/ui-library/src/components/actions/buttons/icon-button/index.ts b/packages/ui-library/src/components/actions/buttons/icon-button/index.ts
index bf28c6f76..53331a01e 100644
--- a/packages/ui-library/src/components/actions/buttons/icon-button/index.ts
+++ b/packages/ui-library/src/components/actions/buttons/icon-button/index.ts
@@ -102,6 +102,7 @@ export class BlrIconButton extends LitElement {
         <span
           aria-label=${this.arialabel || nothing}
           class="blr-semantic-action blr-icon-button ${classes}"
+          aria-disabled=${this.disabled ? 'true' : nothing}
           @click=${this.handleClick}
           id=${this.buttonId || nothing}
           tabindex=${this.disabled ? nothing : '0'}
diff --git a/packages/ui-library/src/components/actions/buttons/text-button/index.ts b/packages/ui-library/src/components/actions/buttons/text-button/index.ts
index 190dec431..4607c2a76 100644
--- a/packages/ui-library/src/components/actions/buttons/text-button/index.ts
+++ b/packages/ui-library/src/components/actions/buttons/text-button/index.ts
@@ -148,11 +148,12 @@ export class BlrTextButton extends LitElement {
         </style>
         <span
           class="${classes}"
+          aria-disabled=${this.disabled ? 'true' : nothing}
           @click="${this.handleClick}"
           tabindex=${this.disabled ? nothing : '0'}
           @focus=${this.handleFocus}
           @blur=${this.handleBlur}
-          role=${this.disabled ? nothing : 'button'}
+          role="button"
           @keydown=${(event: KeyboardEvent) => {
             if (event.code === 'Space') {
               this.handleClick(event);
diff --git a/packages/ui-library/src/foundation/semantic-tokens/action.css.ts b/packages/ui-library/src/foundation/semantic-tokens/action.css.ts
index d2221eb97..3337eaa5a 100644
--- a/packages/ui-library/src/foundation/semantic-tokens/action.css.ts
+++ b/packages/ui-library/src/foundation/semantic-tokens/action.css.ts
@@ -10,6 +10,8 @@ export const { tokenizedLight: actionLight, tokenizedDark: actionDark } = render
       &.disabled {
         pointer-events: none;
         cursor: not-allowed;
+        user-select: none;
+        -webkit-user-select: none;
       }
       
       &.xs {

From b03ba247175cd6ce8856cfca01d85244d13a7835 Mon Sep 17 00:00:00 2001
From: Barkley <78202031+bar-tay@users.noreply.github.com>
Date: Fri, 19 Jan 2024 11:09:38 +0100
Subject: [PATCH 4/9] feat(storybook): add button group docs (#806)

* feat(storybook): add button group docs

* fix(storybook): add feedback

* fix(storybook): delete labels and fix alignment

---------

Co-authored-by: Christian Hoffmann <112889877+ChristianHoffmannS2@users.noreply.github.com>
---
 .../forms/radio/radio-group/index.stories.ts  |   3 +-
 .../ui/button-group/index.stories.ts          | 157 ++++++++++++------
 2 files changed, 106 insertions(+), 54 deletions(-)

diff --git a/packages/ui-library/src/components/forms/radio/radio-group/index.stories.ts b/packages/ui-library/src/components/forms/radio/radio-group/index.stories.ts
index b1cef4866..8e09bc22b 100644
--- a/packages/ui-library/src/components/forms/radio/radio-group/index.stories.ts
+++ b/packages/ui-library/src/components/forms/radio/radio-group/index.stories.ts
@@ -6,6 +6,7 @@ import { Themes } from '../../../../foundation/_tokens-generated/index.themes';
 import { html } from 'lit';
 // this loads the all components instances and registers their html tags
 import '../../../../index';
+
 const sharedStyles = html`
   <style>
     .wrapper {
@@ -19,7 +20,7 @@ export default {
   argTypes: {
     size: {
       name: 'sizeVariant',
-      description: ' Choose size of the component. ',
+      description: ' Choose size of the component.',
       options: InputSizes,
       control: { type: 'radio' },
       table: {
diff --git a/packages/ui-library/src/components/ui/button-group/index.stories.ts b/packages/ui-library/src/components/ui/button-group/index.stories.ts
index 757160819..b9720dc53 100644
--- a/packages/ui-library/src/components/ui/button-group/index.stories.ts
+++ b/packages/ui-library/src/components/ui/button-group/index.stories.ts
@@ -5,23 +5,65 @@ import { BlrTextButtonRenderFunction } from '../../actions/buttons/text-button/r
 import { BlrIconButtonRenderFunction } from '../../actions/buttons/icon-button/renderFunction';
 import { html } from 'lit';
 import { ButtonGroupAlignmentVariants, ButtonGroupSizes } from '../../../globals/constants';
-
 // this loads the all components instances and registers their html tags
 import '../../../index';
 
+const sharedStyles = html`
+  <style>
+    .wrapper {
+      padding: 20px;
+      width: 500px;
+    }
+
+    h4 {
+      font-family: Source Sans Pro, sans-serif;
+      font-weight: 400;
+      line-height: 1rem;
+      font-size: 1rem;
+      text-align: center;
+    }
+    .label {
+      font-family: Source Sans Pro, sans-serif;
+      font-weight: 400;
+      line-height: 1rem;
+      font-size: 1.5rem;
+      text-align: center;
+    }
+  </style>
+`;
+
 export default {
   title: 'Design System/Web Components/UI/Button Group',
   argTypes: {
     size: {
       options: ButtonGroupSizes,
+      description: 'Select size of the component.',
       control: { type: 'select' },
+      table: {
+        category: 'Appearance',
+      },
     },
     alignment: {
       options: ButtonGroupAlignmentVariants,
-      control: { type: 'select' },
+      description: '   Choose alignment of the component.',
+      control: { type: 'radio' },
+      table: {
+        category: 'Appearance',
+      },
     },
   },
   parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: `<markdown>
+        Button Group allows users to select one option from the group. They are visually cohesive, meaning they share a similar appearance in terms of size, style, and often color. This consistency helps users quickly identify that these buttons are related. The Button Group component utilizes the slot element, rendering multiple Text Button or Icon Button components, or the combination of both. For more information have a look at the [Text Button](?path=/docs/design-system-web-components-actions-buttons-text-button--docs) and the Icon Button [Icon Button](?path=/docs/design-system-web-components-actions-buttons-icon-button--docs) components.
+        - [**Appearance**](#appearance)
+          - [**Alignment**](#alignment)
+      </markdown>
+      `,
+      },
+    },
     design: {
       type: 'figma',
       url: 'https://www.figma.com/file/C4vgEKz8mKyulJ4gm3Qdql/%F0%9F%AB%A7-%5BBLR%5D-The-B01LER?node-id=3777%3A114816&mode=dev',
@@ -30,60 +72,69 @@ export default {
   },
 };
 
-const contentIconButtons = html`
-  ${BlrIconButtonRenderFunction({
-    size: 'md',
-    theme: 'Light',
-    loading: false,
-    variant: 'primary',
-    loadingStatus: 'Loading',
-    disabled: false,
-    arialabel: 'button_1',
-  })}
-  ${BlrIconButtonRenderFunction({
-    size: 'md',
-    theme: 'Light',
-    loading: false,
-    variant: 'secondary',
-    loadingStatus: 'Loading',
-    disabled: false,
-    arialabel: 'button_2',
-  })}
-`;
+export const ButtonGroup = (
+  params: BlrButtonGroupType,
+  primaryLabel: string = 'Text Button',
+  secondaryLabel: string = 'Text Button'
+) => {
+  const contentButtons = html`
+    ${BlrTextButtonRenderFunction({
+      label: typeof primaryLabel === 'string' ? primaryLabel : 'Text Button',
+      size: 'md',
+      theme: 'Light',
+      loading: false,
+      variant: 'primary',
+      loadingStatus: 'Loading',
+      disabled: false,
+      buttonDisplay: 'inline-block',
+    })}
+    ${BlrTextButtonRenderFunction({
+      label: secondaryLabel,
+      size: 'md',
+      theme: 'Light',
+      loading: false,
+      variant: 'secondary',
+      loadingStatus: 'Loading',
+      disabled: false,
+      buttonDisplay: 'inline-block',
+    })}
+    ${BlrIconButtonRenderFunction({
+      size: 'md',
+      theme: 'Light',
+      loading: false,
+      variant: 'silent',
+      loadingStatus: 'Loading',
+      disabled: false,
+      arialabel: 'button_1',
+      icon: 'blr360',
+    })}
+  `;
 
-const contentTextButtons = html`
-  ${BlrTextButtonRenderFunction({
-    label: 'Jaok',
-    size: 'md',
-    theme: 'Light',
-    loading: false,
-    variant: 'primary',
-    loadingStatus: 'Loading',
-    disabled: false,
-    buttonDisplay: 'inline-block',
-  })}
-  ${BlrTextButtonRenderFunction({
-    label: 'Nein',
-    size: 'md',
-    theme: 'Light',
-    loading: false,
-    variant: 'secondary',
-    loadingStatus: 'Loading',
-    disabled: false,
-    buttonDisplay: 'inline-block',
-  })}
-`;
-
-export const BlrButtonGroup = (params: BlrButtonGroupType) => html`
-  Text-Buttons ${BlrButtonGroupRenderFunction(params, contentTextButtons)} Icon-Buttons
-  ${BlrButtonGroupRenderFunction(params, contentIconButtons)}
-`;
-
-BlrButtonGroup.storyName = 'BlrButtonGroup';
+  return html`<div class="wrapper">
+    ${BlrButtonGroupRenderFunction(params, contentButtons)}
+    <div class="wrapper"></div>
+  </div>`;
+};
 
-const args: BlrButtonGroupType = {
+const defaultParams: BlrButtonGroupType = {
   size: 'md',
   alignment: 'left',
 };
 
-BlrButtonGroup.args = args;
+ButtonGroup.args = defaultParams;
+
+/**
+ *  ## Appearance
+ *  ### Alignment
+ * The Button Group component can be left, right and center aligned.
+ */
+export const Alignment = () => {
+  return html`
+    ${sharedStyles}
+    <div class="wrapper">${ButtonGroup({ ...defaultParams, alignment: 'left' }, 'Alignment', 'Left')}</div>
+    <div class="wrapper">${ButtonGroup({ ...defaultParams, alignment: 'center' }, 'Alignment', 'Center')}</div>
+    <div class="wrapper">${ButtonGroup({ ...defaultParams, alignment: 'right' }, 'Alignment', 'Right')}</div>
+  `;
+};
+
+Alignment.story = { name: ' ' };

From 57a31d8ab3eca1fb5076ba65e26bd7d96caaed5e Mon Sep 17 00:00:00 2001
From: Barkley <78202031+bar-tay@users.noreply.github.com>
Date: Fri, 19 Jan 2024 11:19:23 +0100
Subject: [PATCH 5/9] feat(storybook): add icon docs (#756)

* feat(ui): add icon docs

* feat(storybook): add icon docs file

* feat(storybook): add feedback

* fix(storybook): fix prop order

* fix(storybook): fix prop size

* fix(storybook): fix props

---------

Co-authored-by: Thorben Hartmann <122102805+thrbnhrtmnn@users.noreply.github.com>
---
 .../ui/icon/icon-link/index.stories.ts        |   2 +-
 .../components/ui/icon/icon/index.stories.ts  | 152 ++++++++++++++++++
 .../src/components/ui/icon/index.stories.ts   |  63 --------
 .../src/components/ui/icon/index.ts           |   4 +-
 .../src/foundation/icons/index.stories.ts     |  83 ++++++++++
 5 files changed, 239 insertions(+), 65 deletions(-)
 create mode 100644 packages/ui-library/src/components/ui/icon/icon/index.stories.ts
 delete mode 100644 packages/ui-library/src/components/ui/icon/index.stories.ts
 create mode 100644 packages/ui-library/src/foundation/icons/index.stories.ts

diff --git a/packages/ui-library/src/components/ui/icon/icon-link/index.stories.ts b/packages/ui-library/src/components/ui/icon/icon-link/index.stories.ts
index f250c87f1..9bfa0d9f6 100644
--- a/packages/ui-library/src/components/ui/icon/icon-link/index.stories.ts
+++ b/packages/ui-library/src/components/ui/icon/icon-link/index.stories.ts
@@ -9,7 +9,7 @@ import { Themes } from '../../../../foundation/_tokens-generated/index.themes';
 import '../../../../index';
 
 export default {
-  title: 'Design System/Web Components/UI/Icon',
+  title: 'Design System/Web Components/UI/Icon/Iconlink',
   argTypes: {
     icon: {
       options: [undefined, ...PureIconKeys],
diff --git a/packages/ui-library/src/components/ui/icon/icon/index.stories.ts b/packages/ui-library/src/components/ui/icon/icon/index.stories.ts
new file mode 100644
index 000000000..b16da88a1
--- /dev/null
+++ b/packages/ui-library/src/components/ui/icon/icon/index.stories.ts
@@ -0,0 +1,152 @@
+import { html } from 'lit-html';
+import { Sizes } from '../../../../globals/constants';
+import { Themes } from '../../../../foundation/_tokens-generated/index.themes';
+import '../../../../index';
+import { BlrIconRenderFunction } from '../renderFunction';
+import { SizesType } from '../../../../globals/types';
+import { calculateIconName } from '../../../../utils/calculate-icon-name';
+import { PureIconKeys, SizelessIconType } from '@boiler/icons/icons-optimized';
+
+const sharedStyles = html`
+  <style>
+    .wrapper {
+      padding: 1.25em;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+    .label {
+      font-family: Source Sans Pro, sans-serif;
+      font-weight: 400;
+      line-height: 1rem;
+      font-size: 1.2rem;
+      text-align: center;
+      padding-top: 1rem;
+    }
+  </style>
+`;
+
+export default {
+  title: 'Design System/Web Components/UI/Icon/Icon',
+  argTypes: {
+    size: {
+      options: Sizes,
+      description: 'Select size of the component.',
+      control: { type: 'select' },
+      table: {
+        category: 'Appearance',
+      },
+    },
+    theme: {
+      options: Themes,
+      control: { type: 'select' },
+      table: {
+        category: 'Appearance',
+      },
+    },
+    icon: {
+      description: 'Select the icon of the component.',
+      options: [undefined, ...PureIconKeys],
+      defaultValue: 'blr360Lg',
+      control: { type: 'select' },
+      table: {
+        category: 'Content / Settings',
+      },
+    },
+    ignoreSize: {
+      description: 'Choose if size of the component should be defined by the parent container.',
+      table: {
+        category: 'Appearance',
+      },
+    },
+  },
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: `<markdown>
+        An icon component typically displays a small, visually recognizable graphic or symbol that represents a particular function, object, or concept.
+- [**Appearance**](#appearance)
+ - [**Size Variant**](#size-variant) 
+</markdown>
+        `,
+      },
+    },
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/C4vgEKz8mKyulJ4gm3Qdql/%F0%9F%AB%A7-%5BBLR%5D-The-B01LER?node-id=947%3A31105&mode=dev',
+    },
+    viewMode: 'docs',
+  },
+};
+
+export const Icon = (params: IconType) => {
+  return html`${BlrIconRenderFunction({
+    icon: calculateIconName(params.icon, params.size as SizesType),
+    size: params.size,
+    ignoreSize: params.ignoreSize,
+  })}`;
+};
+
+type IconType = {
+  theme: string;
+  size: SizesType;
+  icon: SizelessIconType; // Update the type definition for icon
+  ignoreSize: boolean;
+};
+const defaultParams: IconType = {
+  theme: 'Light',
+  size: 'md',
+  icon: 'blr360',
+  ignoreSize: false,
+};
+
+Icon.args = defaultParams;
+
+/**
+ * ## Appearance
+ * ### Size Variant
+ * The Icon component comes in 6 sizes: XXS, XS, SM, MD, LG and XL.
+ */
+export const SizeVariant = () => {
+  return html`
+    ${sharedStyles}
+    <div class="wrapper">
+      <h3 class="label">Icon XXS</h3>
+      ${Icon({
+        ...defaultParams,
+        size: 'xxs',
+      })}
+      <h3 class="label">Icon XS</h3>
+      ${Icon({
+        ...defaultParams,
+        size: 'xs',
+      })}
+
+      <h3 class="label">Icon SM</h3>
+      ${Icon({
+        ...defaultParams,
+        size: 'sm',
+      })}
+      <h3 class="label">Icon MD</h3>
+      ${Icon({
+        ...defaultParams,
+        size: 'md',
+      })}
+      <h3 class="label">Icon LG</h3>
+      ${Icon({
+        ...defaultParams,
+        size: 'lg',
+      })}
+      <h3 class="label">Icon XL</h3>
+      ${Icon({
+        ...defaultParams,
+        size: 'xl',
+      })}
+    </div>
+  `;
+};
+
+SizeVariant.story = {
+  name: ' ',
+};
diff --git a/packages/ui-library/src/components/ui/icon/index.stories.ts b/packages/ui-library/src/components/ui/icon/index.stories.ts
deleted file mode 100644
index 0c32ecc61..000000000
--- a/packages/ui-library/src/components/ui/icon/index.stories.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-import { html } from 'lit-html';
-import { IconKeys } from '@boiler/icons';
-
-import { BlrIconType } from './index';
-import { BlrIconRenderFunction } from './renderFunction';
-
-import { Sizes } from '../../../globals/constants';
-import { getIconName } from '../../../utils/get-icon-name';
-import { calculateIconName } from '../../../utils/calculate-icon-name';
-import { classMap } from 'lit/directives/class-map.js';
-import { SizesType } from '../../../globals/types';
-
-// this loads the all components instances and registers their html tags
-import '../../../index';
-
-export default {
-  title: 'Design System/Web Components/UI/Icon',
-  argTypes: {
-    size: {
-      options: Sizes,
-      control: { type: 'select' },
-    },
-  },
-  parameters: {
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/file/C4vgEKz8mKyulJ4gm3Qdql/%F0%9F%AB%A7-%5BBLR%5D-The-B01LER?node-id=947%3A31105&mode=dev',
-    },
-    viewMode: 'docs',
-  },
-};
-
-const allIcons = getIconName(IconKeys);
-
-export const BlrIcon = (params: BlrIconType) => {
-  const classes = classMap({
-    'icon-gallery-layout': true,
-  });
-
-  return html`<div class="icon-gallery row-fluid">
-    <ul class="icon-gallery icon-thumbnails">
-      ${allIcons.map((icon) => {
-        return html`<li>
-          ${BlrIconRenderFunction({
-            icon: calculateIconName(icon as string, params.size as SizesType),
-            size: params.size,
-            classMap: classes,
-          })}
-          <span class="icon-label">${icon}</span>
-        </li>`;
-      })}
-    </ul>
-  </div>`;
-};
-
-BlrIcon.storyName = 'Icon';
-
-const args: BlrIconType = {
-  size: 'lg',
-  ignoreSize: false,
-};
-
-BlrIcon.args = args;
diff --git a/packages/ui-library/src/components/ui/icon/index.ts b/packages/ui-library/src/components/ui/icon/index.ts
index c44ca57a4..7310b1628 100644
--- a/packages/ui-library/src/components/ui/icon/index.ts
+++ b/packages/ui-library/src/components/ui/icon/index.ts
@@ -8,6 +8,7 @@ import { ClassMapDirective } from 'lit-html/directives/class-map';
 import { until } from 'lit-html/directives/until.js';
 import { unsafeSVG } from 'lit-html/directives/unsafe-svg.js';
 import { TAG_NAME } from './renderFunction';
+import { ThemeType } from '../../../foundation/_tokens-generated/index.themes';
 
 @customElement(TAG_NAME)
 export class BlrIcon extends LitElement {
@@ -15,8 +16,9 @@ export class BlrIcon extends LitElement {
 
   @property() icon: IconType = 'blr360Xs';
   @property() size: SizesType = 'md';
-
   @property() ignoreSize?: boolean = false;
+
+  @property() theme: ThemeType = 'Light';
   @property() classMap?: DirectiveResult<typeof ClassMapDirective>;
 
   // these are not triggered directly but allows us to map it internally and bve typesafe
diff --git a/packages/ui-library/src/foundation/icons/index.stories.ts b/packages/ui-library/src/foundation/icons/index.stories.ts
new file mode 100644
index 000000000..71531166d
--- /dev/null
+++ b/packages/ui-library/src/foundation/icons/index.stories.ts
@@ -0,0 +1,83 @@
+import { html } from 'lit-html';
+import { IconKeys } from '@boiler/icons';
+import { BlrIconType } from '../../components/ui/icon/index';
+import { BlrIconRenderFunction } from '../../components/ui/icon/renderFunction';
+
+import { Sizes } from '../../globals/constants';
+import { getIconName } from '../../utils/get-icon-name';
+import { calculateIconName } from '../../utils/calculate-icon-name';
+import { classMap } from 'lit/directives/class-map.js';
+import { SizesType } from '../../globals/types';
+import { Themes } from '../_tokens-generated/index.themes';
+
+// this loads the all components instances and registers their html tags
+import '../../index';
+
+export default {
+  title: 'Foundation/Icons',
+  argTypes: {
+    size: {
+      options: Sizes,
+      description: 'Select size of the component.',
+      control: { type: 'select' },
+      table: {
+        category: 'Appearance',
+      },
+    },
+    theme: {
+      options: Themes,
+      control: { type: 'select' },
+      table: {
+        category: 'Appearance',
+      },
+    },
+    arialabel: {
+      name: 'ariaLabel',
+      control: { type: 'text' },
+      description:
+        'Provides additional information about the elements purpose and functionality to assistive technologies, such as screen readers.',
+      table: {
+        category: 'Accessibility',
+      },
+    },
+  },
+  parameters: {
+    layout: 'centered',
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/C4vgEKz8mKyulJ4gm3Qdql/%F0%9F%AB%A7-%5BBLR%5D-The-B01LER?node-id=947%3A31105&mode=dev',
+    },
+    viewMode: 'docs',
+  },
+};
+
+const allIcons = getIconName(IconKeys);
+
+export const Icon = (params: BlrIconType) => {
+  const classes = classMap({
+    'icon-gallery-layout': true,
+  });
+
+  return html`<div class="icon-gallery row-fluid">
+    <ul class="icon-gallery icon-thumbnails">
+      ${allIcons.map((icon) => {
+        return html`<li>
+          ${BlrIconRenderFunction({
+            icon: calculateIconName(icon as string, params.size as SizesType),
+            size: params.size,
+            classMap: classes,
+          })}
+          <span class="icon-label">${icon}</span>
+        </li>`;
+      })}
+    </ul>
+  </div>`;
+};
+
+const defaultParams: BlrIconType = {
+  theme: 'Light',
+  size: 'lg',
+  arialabel: 'Icons',
+};
+
+Icon.args = defaultParams;

From 75006119c17f3f49f38e3f3cdbd7654960c02bf3 Mon Sep 17 00:00:00 2001
From: Christian Hoffmann
 <112889877+ChristianHoffmannS2@users.noreply.github.com>
Date: Fri, 19 Jan 2024 16:20:55 +0100
Subject: [PATCH 6/9] Code snipped fix (#814)

* render functions doesnt use dots and handles boolean

* solved!

* arrays/objects should work again but wont show in code snipped

* in case of boolean false, we have to give an excplicit false as property
---
 .../typesafe-generic-component-renderer.ts    | 33 +++++++++++++++----
 1 file changed, 27 insertions(+), 6 deletions(-)

diff --git a/packages/ui-library/src/utils/typesafe-generic-component-renderer.ts b/packages/ui-library/src/utils/typesafe-generic-component-renderer.ts
index 50f53249a..4e6105e34 100644
--- a/packages/ui-library/src/utils/typesafe-generic-component-renderer.ts
+++ b/packages/ui-library/src/utils/typesafe-generic-component-renderer.ts
@@ -12,27 +12,48 @@ export const genericBlrComponentRenderer = <ComponentType extends { [s: string]:
   const attrEntries = Object.entries(htmlAttributes || {});
 
   // we will get rid of the dots later on by defining bindings within the component property decorator
-  propEntries.forEach(([key, value], index) => {
+  propEntries.forEach(([key, value]) => {
+    const needsOpenTag = templateFragments.length === 0;
+
     if (typeof value === 'function') {
-      if (index === 0) {
+      if (needsOpenTag) {
         templateFragments.push(`<${tagName} @${key}=`);
       } else {
         templateFragments.push(` @${key}=`);
       }
     } else if (key === 'classMap') {
-      if (index === 0) {
+      if (needsOpenTag) {
         templateFragments.push(`<${tagName} class=`);
       } else {
         templateFragments.push(` class=`);
       }
-    } else {
-      if (index === 0) {
+    } else if (typeof value === 'boolean') {
+      if (value === true) {
+        if (needsOpenTag) {
+          templateFragments.push(`<${tagName} ${key}=`);
+        } else {
+          templateFragments.push(` ${key}=`);
+        }
+      } else {
+        if (needsOpenTag) {
+          templateFragments.push(`<${tagName} .${key}=`);
+        } else {
+          templateFragments.push(` .${key}=`);
+        }
+      }
+    } else if (typeof value === 'object') {
+      if (needsOpenTag) {
         templateFragments.push(`<${tagName} .${key}=`);
       } else {
         templateFragments.push(` .${key}=`);
       }
+    } else {
+      if (needsOpenTag) {
+        templateFragments.push(`<${tagName} ${key}=`);
+      } else {
+        templateFragments.push(` ${key}=`);
+      }
     }
-
     values.push(value);
   });
 

From 4201c1fe8353e7d293e8e775933bb24c57b2736c Mon Sep 17 00:00:00 2001
From: Christian Hoffmann
 <112889877+ChristianHoffmannS2@users.noreply.github.com>
Date: Fri, 19 Jan 2024 16:29:34 +0100
Subject: [PATCH 7/9] Select: html options instead of array (#780)

* feat(ui-library): replaced options array with slots in blrSelect component

---------

Co-authored-by: David Kennedy <david.a.kennedy@accenture.com>
Co-authored-by: David Kennedy <127498135+davidken91@users.noreply.github.com>
---
 packages/js-example-app/src/assets/index.html |  13 +
 packages/js-example-app/src/index.js          |   5 +
 .../src/components/forms/select/index.css.ts  |   4 +
 .../components/forms/select/index.stories.ts  | 230 ++++++++++--------
 .../src/components/forms/select/index.test.ts |  23 +-
 .../src/components/forms/select/index.ts      |  54 ++--
 .../components/forms/select/renderFunction.ts |   5 +-
 7 files changed, 198 insertions(+), 136 deletions(-)

diff --git a/packages/js-example-app/src/assets/index.html b/packages/js-example-app/src/assets/index.html
index f057c13f3..53e2868fa 100644
--- a/packages/js-example-app/src/assets/index.html
+++ b/packages/js-example-app/src/assets/index.html
@@ -30,6 +30,19 @@ <h2>Vanilla JS Example Application</h2>
           <button id="toggleDisabledState">Toggle Disabled State</button>
         </div>
 
+        <div class="component">
+          <p>Select</p>
+          <blr-select label="Boiler Select Component">
+            <option value="" label="--Please choose an option--"></option>
+            <option value="option1" label="Option 1"></option>
+            <option value="option2" label="Option 2"></option>
+            <option value="option3" label="Option 3"></option>
+            <option value="option4" label="Option 4"></option>
+            <option value="option5" label="Option 5"></option>
+            <option value="option6" label="Option 6"></option>
+          </blr-select>
+        </div>
+
         <div class="component">
           <p>Checkbox</p>
           <blr-checkbox hasLabel="true" label="Please check" checkInputId="Test123"></blr-checkbox>
diff --git a/packages/js-example-app/src/index.js b/packages/js-example-app/src/index.js
index 7a758bd0b..99ab1e38d 100644
--- a/packages/js-example-app/src/index.js
+++ b/packages/js-example-app/src/index.js
@@ -7,6 +7,7 @@ const logsContainer = document.querySelector('#logs');
 
 const blrButton = document.getElementsByTagName('blr-text-button')[0];
 const blrCheckbox = document.getElementsByTagName('blr-checkbox')[0];
+const blrSelect = document.getElementsByTagName('blr-select')[0];
 
 const addLog = (log) => {
   logsContainer.innerHTML = logsContainer.innerHTML + log + '<br>';
@@ -61,3 +62,7 @@ blrCheckbox.addEventListener('blrFocus', () => {
 blrCheckbox.addEventListener('blrBlur', () => {
   addLog('blr-checkbox blurred');
 });
+
+blrSelect.addEventListener('blrChange', (e) => {
+  addLog('blr-select changed');
+});
diff --git a/packages/ui-library/src/components/forms/select/index.css.ts b/packages/ui-library/src/components/forms/select/index.css.ts
index e9e87b6bf..b863948db 100644
--- a/packages/ui-library/src/components/forms/select/index.css.ts
+++ b/packages/ui-library/src/components/forms/select/index.css.ts
@@ -15,6 +15,10 @@ export const { tokenizedLight: selectInputLight, tokenizedDark: selectInputDark
     const { UserInput, SurfaceFill, SM, MD, LG, Input, InputBorderRadius, Placeholder, InputIcon } = semanticTokens.Forms;
 
     return typeSafeNestedCss`
+      slot {
+        display: none;
+      }
+
       .blr-input-icon {
         pointer-events: none;
       }
diff --git a/packages/ui-library/src/components/forms/select/index.stories.ts b/packages/ui-library/src/components/forms/select/index.stories.ts
index c9ee7c9c4..3fe5c04ec 100644
--- a/packages/ui-library/src/components/forms/select/index.stories.ts
+++ b/packages/ui-library/src/components/forms/select/index.stories.ts
@@ -33,23 +33,10 @@ const defaultParams: BlrSelectType = {
   required: false,
   hasError: false,
   errorMessage: ' ',
-  errorIcon: undefined,
+  errorMessageIcon: undefined,
   arialabel: 'Select',
   selectId: 'selectId',
   name: 'select',
-  options: [
-    { value: '0', label: 'Option 1', selected: false, disabled: true },
-    {
-      value: '1',
-      label:
-        'To big option Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilite de un nov lingua franca: On refusa continuar payar custosi traductores. At solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles. Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues. It va esser tam simplic quam Occidental in fact, it va esser Occidental. A un Angleso it va semblar un simplificat Angles, quam un skeptic Cambridge amico dit me que Occidental es.Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilite de un nov lingua franca: On refusa continuar payar custosi traductores. At solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles.',
-      selected: false,
-      disabled: false,
-    },
-    { value: '2', label: 'Option 3', selected: true, disabled: false },
-    { value: '4', label: 'Option 4', selected: false, disabled: false },
-  ],
-  onChange: (event: Event) => console.log(event.type),
 };
 
 export default {
@@ -120,14 +107,8 @@ export default {
     options: {
       name: 'children (options)',
       description:
-        'Enter an array containing information about the label, value and disabled prop for all options that are part of the select.',
+        'Enter a list of html option elements containing information about the label, value and disabled prop for all options that are part of the select.',
       control: 'array',
-      options: [
-        { value: '0', label: 'Option 1', selected: false, disabled: true },
-        { value: '1', label: 'Option 2', selected: false, disabled: false },
-        { value: '2', label: 'Option 3', selected: true, disabled: false },
-        { value: '4', label: 'Option 4', selected: false, disabled: false },
-      ],
       table: {
         category: 'Content / Settings',
       },
@@ -170,7 +151,7 @@ export default {
       },
       if: { arg: 'hasError', eq: true },
     },
-    errorIcon: {
+    errorMessageIcon: {
       name: 'errorMessageIcon',
       description: 'Select an icon which is displayed in front of the error message.',
       table: {
@@ -255,7 +236,17 @@ Select presents users with a list of options from which they can make a single s
   },
 };
 
-export const BlrSelect = (params: BlrSelectType) => BlrSelectRenderFunction(params);
+const optionsAsChildren = html`
+  <option value="" label="--Please choose an option--"></option>
+  <option value="option1" label="Option 1"></option>
+  <option value="option2" label="Option 2"></option>
+  <option value="option3" label="Option 3"></option>
+  <option value="option4" label="Option 4"></option>
+  <option value="option5" label="Option 5"></option>
+  <option value="option6" label="Option 6"></option>
+`;
+
+export const BlrSelect = (params: BlrSelectType) => BlrSelectRenderFunction(params, optionsAsChildren);
 
 BlrSelect.storyName = 'Select';
 BlrSelect.args = defaultParams;
@@ -288,7 +279,6 @@ const argTypesToDisable = [
 const generateDisabledArgTypes = (argTypes: string[]) => {
   const disabledArgTypes = {};
   argTypes.forEach((argType: string) => {
-    // @ts-expect-error todo
     disabledArgTypes[argType] = {
       table: {
         disable: true,
@@ -307,24 +297,33 @@ export const SizeVariant = () => {
   return html`
     ${sharedStyles}
     <div class="stories-select">
-      ${BlrSelectRenderFunction({
-        ...defaultParams,
-        size: 'sm',
-        label: 'Select SM',
-        labelAppendix: '',
-      })}
-      ${BlrSelectRenderFunction({
-        ...defaultParams,
-        size: 'md',
-        label: 'Select MD',
-        labelAppendix: '',
-      })}
-      ${BlrSelectRenderFunction({
-        ...defaultParams,
-        size: 'lg',
-        label: 'Select LG',
-        labelAppendix: '',
-      })}
+      ${BlrSelectRenderFunction(
+        {
+          ...defaultParams,
+          size: 'sm',
+          label: 'Select SM',
+          labelAppendix: '',
+        },
+        optionsAsChildren
+      )}
+      ${BlrSelectRenderFunction(
+        {
+          ...defaultParams,
+          size: 'md',
+          label: 'Select MD',
+          labelAppendix: '',
+        },
+        optionsAsChildren
+      )}
+      ${BlrSelectRenderFunction(
+        {
+          ...defaultParams,
+          size: 'lg',
+          label: 'Select LG',
+          labelAppendix: '',
+        },
+        optionsAsChildren
+      )}
     </div>
   `;
 };
@@ -343,12 +342,15 @@ export const Disabled = () => {
   return html`
     ${sharedStyles}
     <div class="stories-select">
-      ${BlrSelectRenderFunction({
-        ...defaultParams,
-        disabled: true,
-        label: 'Disabled',
-        labelAppendix: '',
-      })}
+      ${BlrSelectRenderFunction(
+        {
+          ...defaultParams,
+          disabled: true,
+          label: 'Disabled',
+          labelAppendix: '',
+        },
+        optionsAsChildren
+      )}
     </div>
   `;
 };
@@ -367,12 +369,15 @@ export const Required = () => {
   return html`
     ${sharedStyles}
     <div class="stories-select">
-      ${BlrSelectRenderFunction({
-        ...defaultParams,
-        required: true,
-        label: 'Required',
-        labelAppendix: '',
-      })}
+      ${BlrSelectRenderFunction(
+        {
+          ...defaultParams,
+          required: true,
+          label: 'Required',
+          labelAppendix: '',
+        },
+        optionsAsChildren
+      )}
     </div>
   `;
 };
@@ -388,13 +393,16 @@ export const HasError = () => {
   return html`
     ${sharedStyles}
     <div class="stories-select">
-      ${BlrSelectRenderFunction({
-        ...defaultParams,
-        hasError: true,
-        errorIcon: undefined,
-        label: 'Error',
-        labelAppendix: '',
-      })}
+      ${BlrSelectRenderFunction(
+        {
+          ...defaultParams,
+          hasError: true,
+          errorMessageIcon: undefined,
+          label: 'Error',
+          labelAppendix: '',
+        },
+        optionsAsChildren
+      )}
     </div>
   `;
 };
@@ -411,22 +419,22 @@ export const FormLabel = () => {
   return html`
     ${sharedStyles}
     <div class="stories-select">
-      ${BlrSelectRenderFunction({
-        ...defaultParams,
-        label: 'With Label',
-        labelAppendix: '(with Appendix)',
-      })}
-      ${BlrSelectRenderFunction({
-        ...defaultParams,
-        label: ' ',
-        labelAppendix: ' ',
-        options: [
-          { value: '0', label: 'Option 1', selected: false, disabled: true },
-          { value: '1', label: 'Option 2', selected: false, disabled: false },
-          { value: '2', label: 'Without Label', selected: true, disabled: false },
-          { value: '4', label: 'Option 4', selected: false, disabled: false },
-        ],
-      })}
+      ${BlrSelectRenderFunction(
+        {
+          ...defaultParams,
+          label: 'With Label',
+          labelAppendix: '(with Appendix)',
+        },
+        optionsAsChildren
+      )}
+      ${BlrSelectRenderFunction(
+        {
+          ...defaultParams,
+          label: ' ',
+          labelAppendix: ' ',
+        },
+        optionsAsChildren
+      )}
     </div>
   `;
 };
@@ -442,18 +450,24 @@ export const Icon = () => {
   return html`
     ${sharedStyles}
     <div class="stories-select">
-      ${BlrSelectRenderFunction({
-        ...defaultParams,
-        icon: 'blrArrowUp',
-        label: 'With Icon',
-        labelAppendix: ' ',
-      })}
-      ${BlrSelectRenderFunction({
-        ...defaultParams,
-        icon: undefined,
-        label: 'Default Icon',
-        labelAppendix: ' ',
-      })}
+      ${BlrSelectRenderFunction(
+        {
+          ...defaultParams,
+          icon: 'blrArrowUp',
+          label: 'With Icon',
+          labelAppendix: ' ',
+        },
+        optionsAsChildren
+      )}
+      ${BlrSelectRenderFunction(
+        {
+          ...defaultParams,
+          icon: undefined,
+          label: 'Default Icon',
+          labelAppendix: ' ',
+        },
+        optionsAsChildren
+      )}
     </div>
   `;
 };
@@ -467,22 +481,28 @@ export const FormCaptionGroup = () => {
   return html`
     ${sharedStyles}
     <div class="stories-select">
-      ${BlrSelectRenderFunction({
-        ...defaultParams,
-        hasHint: true,
-        label: 'Hint message',
-        labelAppendix: ' ',
-      })}
-      ${BlrSelectRenderFunction({
-        ...defaultParams,
-        icon: undefined,
-        label: 'Hint and error message',
-        labelAppendix: '',
-        hasHint: true,
-        hasError: true,
-        errorMessage: "OMG it's an error",
-        errorIcon: 'blrErrorFilled',
-      })}
+      ${BlrSelectRenderFunction(
+        {
+          ...defaultParams,
+          hasHint: true,
+          label: 'Hint message',
+          labelAppendix: ' ',
+        },
+        optionsAsChildren
+      )}
+      ${BlrSelectRenderFunction(
+        {
+          ...defaultParams,
+          icon: undefined,
+          label: 'Hint and error message',
+          labelAppendix: '',
+          hasHint: true,
+          hasError: true,
+          errorMessage: "OMG it's an error",
+          errorMessageIcon: 'blrError',
+        },
+        optionsAsChildren
+      )}
     </div>
   `;
 };
diff --git a/packages/ui-library/src/components/forms/select/index.test.ts b/packages/ui-library/src/components/forms/select/index.test.ts
index 1ad7dc169..6fe7df7f0 100644
--- a/packages/ui-library/src/components/forms/select/index.test.ts
+++ b/packages/ui-library/src/components/forms/select/index.test.ts
@@ -5,6 +5,7 @@ import type { BlrSelectType } from '@boiler/ui-library/dist/';
 
 import { fixture, expect } from '@open-wc/testing';
 import { querySelectorAllDeep, querySelectorDeep } from 'query-selector-shadow-dom';
+import { html } from 'lit-html';
 
 const sampleParams: BlrSelectType = {
   name: 'Text Input',
@@ -16,19 +17,23 @@ const sampleParams: BlrSelectType = {
   hintMessage: 'Field is used for hint',
   hintIcon: 'blrInfo',
   selectId: 'Peter',
-  errorIcon: 'blrErrorFilled',
-  options: [
-    { value: 'uschi', label: 'Uschi', disabled: true },
-    { value: '1', label: 'Option 1' },
-    { value: '2', label: 'Option 2', selected: true },
-    { value: 'dieter', label: 'Dieter' },
-  ],
+  errorMessageIcon: 'blrErrorFilled',
   theme: 'Light',
 };
 
+const optionsAsChildren = html`
+  <option value="" label="--Please choose an option--"></option>
+  <option value="option1" label="Option 1"></option>
+  <option value="option2" label="Option 2"></option>
+  <option value="option3" label="Option 3"></option>
+  <option value="option4" label="Option 4"></option>
+  <option value="option5" label="Option 5"></option>
+  <option value="option6" label="Option 6"></option>
+`;
+
 describe('blr-select', () => {
   it('is having a select containing the right className', async () => {
-    const element = await fixture(BlrSelectRenderFunction(sampleParams));
+    const element = await fixture(BlrSelectRenderFunction(sampleParams, optionsAsChildren));
 
     const select = querySelectorDeep('select', element.getRootNode() as HTMLElement);
     const className = select?.className;
@@ -43,7 +48,7 @@ describe('blr-select', () => {
         hasHint: true,
         hintIcon: 'blrInfo',
         hasError: true,
-        errorIcon: 'blrErrorFilled',
+        errorMessageIcon: 'blrErrorFilled',
       })
     );
 
diff --git a/packages/ui-library/src/components/forms/select/index.ts b/packages/ui-library/src/components/forms/select/index.ts
index a9b2b9f2f..ea18ce81d 100644
--- a/packages/ui-library/src/components/forms/select/index.ts
+++ b/packages/ui-library/src/components/forms/select/index.ts
@@ -17,14 +17,6 @@ import { BlrFormCaptionGroupRenderFunction } from '../../internal-components/for
 import { BlrFormCaptionRenderFunction } from '../../internal-components/form-caption-group/form-caption/renderFunction';
 import { BlrFormLabelRenderFunction } from '../../internal-components/form-label/renderFunction';
 import { BlrIconRenderFunction } from '../../ui/icon/renderFunction';
-
-type Option = {
-  value: string;
-  label: string;
-  selected?: boolean;
-  disabled?: boolean;
-};
-
 import { TAG_NAME } from './renderFunction';
 
 @customElement(TAG_NAME)
@@ -39,22 +31,25 @@ export class BlrSelect extends LitElement {
   @property() disabled?: boolean;
   @property() size?: FormSizesType = 'md';
   @property() required?: boolean;
-  @property() onChange?: (event: Event) => void;
   @property() onBlur?: HTMLElement['blur'];
   @property() onFocus?: HTMLElement['focus'];
-  @property({ type: Array }) options: Option[] = [];
+
   @property() hasError?: boolean;
   @property() errorMessage?: string;
   @property() hintMessage?: string;
   @property() hintIcon?: SizelessIconType;
-  @property() errorIcon?: SizelessIconType;
+  @property() errorMessageIcon?: SizelessIconType;
   @property() hasHint?: boolean;
   @property() icon?: SizelessIconType = 'blrChevronDown';
 
   @property() theme: ThemeType = 'Light';
 
+  @property() blrChange?: () => void;
+
   @state() protected isFocused = false;
 
+  protected _optionElements: Element[] | undefined;
+
   protected handleFocus = () => {
     this.isFocused = true;
   };
@@ -63,6 +58,23 @@ export class BlrSelect extends LitElement {
     this.isFocused = false;
   };
 
+  protected handleSlotChange() {
+    const slot = this.renderRoot?.querySelector('slot');
+
+    this._optionElements = slot?.assignedElements({ flatten: false });
+    this.requestUpdate();
+  }
+
+  protected handleChange(event: Event) {
+    this.dispatchEvent(
+      new CustomEvent('blrChange', {
+        bubbles: true,
+        composed: true,
+        detail: { originalEvent: event },
+      })
+    );
+  }
+
   protected renderIcon(classes: DirectiveResult<typeof ClassMapDirective>) {
     if (this.size) {
       const iconSizeVariant = getComponentConfigToken([
@@ -126,13 +138,13 @@ export class BlrSelect extends LitElement {
               icon: this.hintIcon,
             })
           : nothing}
-        ${this.hasError && (this.errorMessage || this.errorIcon)
+        ${this.hasError && (this.errorMessage || this.errorMessageIcon)
           ? BlrFormCaptionRenderFunction({
               variant: 'error',
               theme: this.theme,
               size: this.size,
               message: this.errorMessage,
-              icon: this.errorIcon,
+              icon: this.errorMessageIcon,
             })
           : nothing}
       `;
@@ -141,6 +153,9 @@ export class BlrSelect extends LitElement {
         <style>
           ${dynamicStyles}
         </style>
+
+        <slot @slotchange=${this.handleSlotChange}></slot>
+
         <div class="blr-select">
           ${this.label
             ? BlrFormLabelRenderFunction({
@@ -161,20 +176,19 @@ export class BlrSelect extends LitElement {
                 name=${this.name || nothing}
                 ?disabled=${this.disabled}
                 ?required=${this.required}
-                @change=${this.onChange}
+                @change=${this.handleChange}
                 @focus=${this.handleFocus}
                 @blur=${this.handleBlur}
               >
-                ${this.options?.map((opt: Option) => {
+                ${this._optionElements?.map((opt: Element) => {
                   return html`
                     <option
                       class="blr-select-option"
-                      id=${opt.value}
-                      value=${opt.value}
-                      ?selected=${opt.selected}
-                      ?disabled=${opt.disabled}
+                      value=${opt.getAttribute('value') || ''}
+                      ?selected=${opt.getAttribute('selected') === 'true'}
+                      ?disabled=${opt.getAttribute('disabled') === 'true'}
                     >
-                      ${opt.label}
+                      ${opt.getAttribute('label')}
                     </option>
                   `;
                 })}
diff --git a/packages/ui-library/src/components/forms/select/renderFunction.ts b/packages/ui-library/src/components/forms/select/renderFunction.ts
index 57469601e..2aeaf8d7e 100644
--- a/packages/ui-library/src/components/forms/select/renderFunction.ts
+++ b/packages/ui-library/src/components/forms/select/renderFunction.ts
@@ -1,7 +1,8 @@
+import { TemplateResult } from 'lit-html';
 import { BlrSelectType } from '.';
 import { genericBlrComponentRenderer } from '../../../utils/typesafe-generic-component-renderer';
 
 export const TAG_NAME = 'blr-select';
 
-export const BlrSelectRenderFunction = (params: BlrSelectType) =>
-  genericBlrComponentRenderer<BlrSelectType>(TAG_NAME, { ...params });
+export const BlrSelectRenderFunction = (params: BlrSelectType, children?: TemplateResult<1>) =>
+  genericBlrComponentRenderer<BlrSelectType>(TAG_NAME, { ...params }, children);

From b94f1fa16349161dc2de49f27be99dc7dd74df75 Mon Sep 17 00:00:00 2001
From: David Kennedy <127498135+davidken91@users.noreply.github.com>
Date: Mon, 22 Jan 2024 14:05:57 +0100
Subject: [PATCH 8/9] feat(ui-library): fixing caption component styles (#818)

---
 .../form-caption-group/form-caption/index.css.ts              | 2 +-
 .../form-caption-group/form-caption/index.ts                  | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/ui-library/src/components/internal-components/form-caption-group/form-caption/index.css.ts b/packages/ui-library/src/components/internal-components/form-caption-group/form-caption/index.css.ts
index 500577541..3765c15af 100644
--- a/packages/ui-library/src/components/internal-components/form-caption-group/form-caption/index.css.ts
+++ b/packages/ui-library/src/components/internal-components/form-caption-group/form-caption/index.css.ts
@@ -1,7 +1,7 @@
 import { typeSafeNestedCss as css } from "../../../../utils/nested-typesafe-css-literals";
 import { renderThemedCssStrings } from "../../../../foundation/_tokens-generated/index.pseudo.generated";
 
-export const { tokenizedLight: checkboxLight, tokenizedDark: checkboxDark } = renderThemedCssStrings((componentTokens) => {
+export const { tokenizedLight: captionLight, tokenizedDark: captionDark } = renderThemedCssStrings((componentTokens) => {
   const { CaptionComponent } = componentTokens.Forms;
 
   return css`
diff --git a/packages/ui-library/src/components/internal-components/form-caption-group/form-caption/index.ts b/packages/ui-library/src/components/internal-components/form-caption-group/form-caption/index.ts
index 32ae82858..437ce5532 100644
--- a/packages/ui-library/src/components/internal-components/form-caption-group/form-caption/index.ts
+++ b/packages/ui-library/src/components/internal-components/form-caption-group/form-caption/index.ts
@@ -4,7 +4,7 @@ import { classMap } from 'lit/directives/class-map.js';
 import { FormSizesType, CaptionVariantType, SizesType } from '../../../../globals/types';
 import { BlrIconRenderFunction } from '../../../ui/icon/renderFunction';
 import { SizelessIconType } from '@boiler/icons';
-import { formDark, formLight } from '../../../../foundation/semantic-tokens/form.css';
+import { captionLight, captionDark } from './index.css';
 import { calculateIconName } from '../../../../utils/calculate-icon-name';
 import { ThemeType } from '../../../../foundation/_tokens-generated/index.themes';
 import { getComponentConfigToken } from '../../../../utils/get-component-config-token';
@@ -25,7 +25,7 @@ export class BlrFormCaption extends LitElement {
 
   protected render() {
     if (this.size) {
-      const dynamicStyles = this.theme === 'Light' ? [formLight] : [formDark];
+      const dynamicStyles = this.theme === 'Light' ? [captionLight] : [captionDark];
 
       const classes = classMap({
         'blr-form-caption': true,

From f7ad885b372e43c27a29ef4cb539717ce6e03a80 Mon Sep 17 00:00:00 2001
From: David Kennedy <127498135+davidken91@users.noreply.github.com>
Date: Mon, 22 Jan 2024 16:07:48 +0100
Subject: [PATCH 9/9] Feature/513 tabbar use slots instead of arrays in the
 tabbar (#799)

* replacing array with slots in tabbar component
---
 packages/js-example-app/src/assets/index.html | 71 +++-----------
 .../navigation/tab-bar/index.css.ts           | 11 ++-
 .../navigation/tab-bar/index.stories.ts       | 76 +++------------
 .../navigation/tab-bar/index.test.ts          | 38 ++++----
 .../components/navigation/tab-bar/index.ts    | 97 ++++++++-----------
 .../navigation/tab-bar/indexReact.ts          |  2 +-
 .../navigation/tab-bar/renderFunction.ts      |  5 +-
 packages/ui-library/src/globals/types.ts      |  6 --
 8 files changed, 103 insertions(+), 203 deletions(-)

diff --git a/packages/js-example-app/src/assets/index.html b/packages/js-example-app/src/assets/index.html
index 53e2868fa..9f20ca5d4 100644
--- a/packages/js-example-app/src/assets/index.html
+++ b/packages/js-example-app/src/assets/index.html
@@ -76,64 +76,6 @@ <h2>Vanilla JS Example Application</h2>
         <div class="component">
           <p>Tab Bar</p>
           <blr-tab-bar
-            tabs="[
-          {
-            label: 'Tab 1',
-            icon: 'blr360',
-            href: './',
-            disabled: true,
-          },
-          {
-            label: 'Tab 2',
-            icon: 'blrInfo',
-            href: './',
-          },
-          {
-            label: 'Tab 3',
-            icon: 'blrCrop',
-            href: './',
-          },
-          {
-            label: 'Tab 4',
-            icon: 'blrDocumentNew',
-            href: './',
-          },
-          {
-            label: 'Tab 5',
-            icon: 'blrDocumentTwo',
-            href: './',
-          },
-          {
-            label: 'Tab 6',
-            icon: 'blrDownload',
-            href: './',
-          },
-          {
-            label: 'Tab 7',
-            icon: 'blrHeart',
-            href: './',
-          },
-          {
-            label: 'Tab 8',
-            icon: 'blrHome',
-            href: './',
-          },
-          {
-            label: 'Tab 9',
-            icon: 'blrLockClosed',
-            href: './',
-          },
-          {
-            label: 'Tab 10',
-            icon: 'blrMusic',
-            href: './',
-          },
-          {
-            label: 'Tab 11',
-            icon: 'blrPen',
-            href: './',
-          },
-        ]"
             variant="standard"
             overflowVariantStandard="buttons"
             overflowVariantFullWidth="browserOverflow"
@@ -142,7 +84,18 @@ <h2>Vanilla JS Example Application</h2>
             tabContent="labelAndIcon"
             iconPosition="leading"
             alignment="left"
-          ></blr-tab-bar>
+          ><p disabled label="Tab 1" icon="blr360">Tab 1</p>
+          <p label="Tab 2" icon="blrInfo">Tab 2</p>
+          <p label="Tab 3" icon="blrCrop">Tab 3</p>
+          <p label="Tab 4" icon="blrDocumentNew">Tab 4</p>
+          <p label="Tab 5" icon="blrDocumentTwo">Tab 5</p>
+          <p label="Tab 6" icon="blrDownload">Tab 6</p>
+          <p label="Tab 7" icon="blrHeart">Tab 7</p>
+          <p label="Tab 8" icon="blrHome">Tab 8</p>
+          <p label="Tab 9" icon="blrLockClosed">Tab 9</p>
+          <p label="Tab 10" icon="blrMusic">Tab 10</p>
+          <p label="Tab 11" icon="blrPen">Tab 11</p>
+        </blr-tab-bar>
         </div>
       </div>
 
diff --git a/packages/ui-library/src/components/navigation/tab-bar/index.css.ts b/packages/ui-library/src/components/navigation/tab-bar/index.css.ts
index 019c22899..22e3ecfa8 100644
--- a/packages/ui-library/src/components/navigation/tab-bar/index.css.ts
+++ b/packages/ui-library/src/components/navigation/tab-bar/index.css.ts
@@ -32,6 +32,10 @@ export const { tokenizedLight: tabBarLight, tokenizedDark: tabBarDark } = render
   - [ ] Add layoutvariant where I see the buttons, but no scrollbar
   */
   return typeSafeNestedCss/* css */ `
+      slot {
+        display: none;
+      }
+
       .wrapper-horizontal {
         position: relative;
         display: block;
@@ -152,7 +156,6 @@ export const { tokenizedLight: tabBarLight, tokenizedDark: tabBarDark } = render
               flex-direction: column;
               _flex: 0 1 0px;
               justify-content: center;
-              overflow: clip;
 
 
               &:focus-within:not(.disabled) {
@@ -165,6 +168,12 @@ export const { tokenizedLight: tabBarLight, tokenizedDark: tabBarDark } = render
                 _flex: 1 1 0px;
               }
 
+              .nav-item-underline {
+                &.selected {
+                background-color: ${TabBar.Tab.HighlightLine.BackgroundColor.Active.Pressed}
+                }
+              }
+
               .nav-item-content-wrapper {
                 display: flex;
                 justify-content: center;
diff --git a/packages/ui-library/src/components/navigation/tab-bar/index.stories.ts b/packages/ui-library/src/components/navigation/tab-bar/index.stories.ts
index ceab4e709..974615e43 100644
--- a/packages/ui-library/src/components/navigation/tab-bar/index.stories.ts
+++ b/packages/ui-library/src/components/navigation/tab-bar/index.stories.ts
@@ -1,3 +1,4 @@
+import { html } from 'lit-html';
 import { BlrTabBarType } from './index';
 import { BlrTabBarRenderFunction } from './renderFunction';
 import {
@@ -25,7 +26,6 @@ export default {
       options: FormSizes,
       control: { type: 'select' },
     },
-    tabs: { control: 'array' },
     tabContent: {
       options: TabContentVariants,
       control: { type: 'select' },
@@ -63,70 +63,26 @@ export default {
   },
 };
 
-export const BlrTabBar = (params: BlrTabBarType) => BlrTabBarRenderFunction(params);
+const tabsAsChildren = html`
+  <p disabled label="Tab 1" icon="blr360">Tab 1</p>
+  <p label="Tab 2" icon="blrInfo">Tab 2</p>
+  <p label="Tab 3" icon="blrCrop">Tab 3</p>
+  <p label="Tab 4" icon="blrDocumentNew">Tab 4</p>
+  <p label="Tab 5" icon="blrDocumentTwo">Tab 5</p>
+  <p label="Tab 6" icon="blrDownload">Tab 6</p>
+  <p label="Tab 7" icon="blrHeart">Tab 7</p>
+  <p label="Tab 8" icon="blrHome">Tab 8</p>
+  <p label="Tab 9" icon="blrLockClosed">Tab 9</p>
+  <p label="Tab 10" icon="blrMusic">Tab 10</p>
+  <p label="Tab 11" icon="blrPen">Tab 11</p>
+`;
+
+export const BlrTabBar = (params: BlrTabBarType) => BlrTabBarRenderFunction(params, tabsAsChildren);
 
 BlrTabBar.storyName = 'TabBar';
 
 const args: BlrTabBarType = {
   theme: 'Light',
-  tabs: [
-    {
-      label: 'Tab 1',
-      icon: 'blr360',
-      href: './',
-      disabled: true,
-    },
-    {
-      label: 'Tab 2',
-      icon: 'blrInfo',
-      href: './',
-    },
-    {
-      label: 'Tab 3',
-      icon: 'blrCrop',
-      href: './',
-    },
-    {
-      label: 'Tab 4',
-      icon: 'blrDocumentNew',
-      href: './',
-    },
-    {
-      label: 'Tab 5',
-      icon: 'blrDocumentTwo',
-      href: './',
-    },
-    {
-      label: 'Tab 6',
-      icon: 'blrDownload',
-      href: './',
-    },
-    {
-      label: 'Tab 7',
-      icon: 'blrHeart',
-      href: './',
-    },
-    {
-      label: 'Tab 8',
-      icon: 'blrHome',
-      href: './',
-    },
-    {
-      label: 'Tab 9',
-      icon: 'blrLockClosed',
-      href: './',
-    },
-    {
-      label: 'Tab 10',
-      icon: 'blrMusic',
-      href: './',
-    },
-    {
-      label: 'Tab 11',
-      icon: 'blrPen',
-      href: './',
-    },
-  ],
   variant: 'standard',
   overflowVariantStandard: 'buttons',
   overflowVariantFullWidth: 'browserOverflow',
diff --git a/packages/ui-library/src/components/navigation/tab-bar/index.test.ts b/packages/ui-library/src/components/navigation/tab-bar/index.test.ts
index 4dc0f801e..6bc1c595a 100644
--- a/packages/ui-library/src/components/navigation/tab-bar/index.test.ts
+++ b/packages/ui-library/src/components/navigation/tab-bar/index.test.ts
@@ -5,26 +5,10 @@ import type { BlrTabBarType } from '@boiler/ui-library/dist/';
 
 import { fixture, expect } from '@open-wc/testing';
 import { querySelectorDeep } from 'query-selector-shadow-dom';
+import { html } from 'lit-html';
 
 const sampleParams: BlrTabBarType = {
   theme: 'Light',
-  tabs: [
-    {
-      label: 'Tab 1',
-      icon: 'blr360',
-      href: './',
-    },
-    {
-      label: 'Tab 2',
-      icon: 'blrInfo',
-      href: './',
-    },
-    {
-      label: 'Tab 3',
-      icon: 'blrCalendar',
-      href: './',
-    },
-  ],
   overflowVariantStandard: 'wrap',
   overflowVariantFullWidth: 'wrap',
   showDivider: true,
@@ -34,9 +18,23 @@ const sampleParams: BlrTabBarType = {
   alignment: 'left',
 };
 
+const tabsAsChildren = html`
+  <p disabled label="Tab 1" icon="blr360">Tab 1</p>
+  <p label="Tab 2" icon="blrInfo">Tab 2</p>
+  <p label="Tab 3" icon="blrCrop">Tab 3</p>
+  <p label="Tab 4" icon="blrDocumentNew">Tab 4</p>
+  <p label="Tab 5" icon="blrDocumentTwo">Tab 5</p>
+  <p label="Tab 6" icon="blrDownload">Tab 6</p>
+  <p label="Tab 7" icon="blrHeart">Tab 7</p>
+  <p label="Tab 8" icon="blrHome">Tab 8</p>
+  <p label="Tab 9" icon="blrLockClosed">Tab 9</p>
+  <p label="Tab 10" icon="blrMusic">Tab 10</p>
+  <p label="Tab 11" icon="blrPen">Tab 11</p>
+`;
+
 describe('blr-tab-bar', () => {
   it('is having a tab bar containing the right className', async () => {
-    const element = await fixture(BlrTabBarRenderFunction(sampleParams));
+    const element = await fixture(BlrTabBarRenderFunction(sampleParams, tabsAsChildren));
 
     const tabBar = querySelectorDeep('.blr-tab-bar-group', element.getRootNode() as HTMLElement);
     const className = tabBar?.className;
@@ -45,7 +43,7 @@ describe('blr-tab-bar', () => {
   });
 
   it('has a size md by default', async () => {
-    const element = await fixture(BlrTabBarRenderFunction(sampleParams));
+    const element = await fixture(BlrTabBarRenderFunction(sampleParams, tabsAsChildren));
 
     const input = querySelectorDeep('.blr-tab-bar-group', element.getRootNode() as HTMLElement);
     const className = input?.className;
@@ -54,7 +52,7 @@ describe('blr-tab-bar', () => {
   });
 
   it('has a size sm when "size" is set to "sm" ', async () => {
-    const element = await fixture(BlrTabBarRenderFunction({ ...sampleParams, size: 'sm' }));
+    const element = await fixture(BlrTabBarRenderFunction({ ...sampleParams, size: 'sm' }, tabsAsChildren));
 
     const input = querySelectorDeep('.blr-tab-bar-group', element.getRootNode() as HTMLElement);
     const className = input?.className;
diff --git a/packages/ui-library/src/components/navigation/tab-bar/index.ts b/packages/ui-library/src/components/navigation/tab-bar/index.ts
index f5ae25334..5be1ec8fb 100644
--- a/packages/ui-library/src/components/navigation/tab-bar/index.ts
+++ b/packages/ui-library/src/components/navigation/tab-bar/index.ts
@@ -1,3 +1,4 @@
+/* eslint-disable lit/binding-positions */
 import { LitElement, html, nothing } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { customElement, property, query, queryAll, state } from 'lit/decorators.js';
@@ -6,7 +7,6 @@ import { formDark, formLight } from '../../../foundation/semantic-tokens/form.cs
 
 import {
   FormSizesType,
-  TabType,
   TabVariantType,
   OverflowVariantTypeStandard,
   OverflowVariantTypeFullWidth,
@@ -40,7 +40,6 @@ export class BlrTabBar extends LitElement {
   @queryAll('[role=tabpanel]')
   protected _panels!: HTMLElement[];
 
-  @property() tabs!: TabType[];
   @property() overflowVariantStandard!: OverflowVariantTypeStandard;
   @property() overflowVariantFullWidth!: OverflowVariantTypeFullWidth;
   @property() iconPosition: IconPositionVariant = 'leading';
@@ -58,6 +57,8 @@ export class BlrTabBar extends LitElement {
 
   @state() protected selectedTabIndex: number | undefined;
 
+  protected _tabBarElements: Element[] | undefined;
+
   protected scrollTab = (direction: string, speed: number, distance: number) => {
     let scrollAmount = 0;
     const slideTimer = setInterval(() => {
@@ -77,37 +78,18 @@ export class BlrTabBar extends LitElement {
     this.selectedTabIndex = index;
   }
 
+  protected handleSlotChange() {
+    const slot = this.renderRoot?.querySelector('slot');
+
+    this._tabBarElements = slot?.assignedElements({ flatten: false });
+    this.requestUpdate();
+  }
+
   protected render() {
     if (this.size) {
       const dynamicStyles =
         this.theme === 'Light' ? [formLight, actionLight, tabBarLight] : [formDark, actionDark, tabBarDark];
 
-      /*
-      const setActive = (tabIndex: number) => {
-        const selectedTab = this._navItems[tabIndex];
-        selectedTab.setAttribute('aria-selected', 'true');
-        if (selectedTab.parentElement) {
-          [...selectedTab.parentElement.children].forEach((sib) => sib.classList.remove('active'));
-          selectedTab.classList.add('active');
-        }
-        if (!selectedTab.classList.contains('disabled')) {
-          this._panels.forEach((panel) => {
-            panel.classList.remove('active');
-            panel.setAttribute('hidden', '');
-          });
-          this._panels[tabIndex].classList.add('active');
-          this._panels[tabIndex].removeAttribute('hidden');
-        }
-      };
-
-      const handleSelect = (event: Event, label: string) => {
-        event.preventDefault();
-        const navLabels = Object.values(this._navItemsSlots).map((nav) => nav.innerText);
-        const index = navLabels.indexOf(label);
-        this._navItems.forEach((listItem: Element) => listItem.addEventListener('click', () => setActive(index)));
-      };
-      */
-
       const classes = classMap({
         [`${this.variant}`]: this.variant,
         [`${this.size}`]: this.size,
@@ -139,6 +121,7 @@ export class BlrTabBar extends LitElement {
       return html`<style>
           ${dynamicStyles.map((style) => style)}
         </style>
+
         <div class="blr-tab-bar-group ${classes}">
           ${this.overflowVariantStandard === 'buttons'
             ? html`
@@ -157,9 +140,12 @@ export class BlrTabBar extends LitElement {
             : nothing}
           <div class="blr-tab-bar ${this.alignment}">
             <ul class="nav-list ${navListClasses}" role="tablist">
-              ${this.tabs.map((tab, index) => {
+              <slot @slotchange=${this.handleSlotChange}></slot>
+              ${this._tabBarElements?.map((tab: Element, index) => {
+                const isDisabled = tab.hasAttribute('disabled') || tab.getAttribute('disabled') === 'true';
+
                 const navListItemClasses = classMap({
-                  'disabled': tab?.disabled || false,
+                  'disabled': isDisabled,
                   'nav-item': true,
                   [`${this.size}`]: this.size || 'md',
                   [`${this.iconPosition}`]: this.iconPosition,
@@ -167,7 +153,7 @@ export class BlrTabBar extends LitElement {
                 });
 
                 const navListItemContainer = classMap({
-                  'disabled': tab?.disabled || false,
+                  'disabled': tab.getAttribute('disabled') === 'true',
                   'nav-item-container': true,
                   [`${this.size}`]: this.size || 'md',
                   [`${this.iconPosition}`]: this.iconPosition,
@@ -178,27 +164,30 @@ export class BlrTabBar extends LitElement {
                   'selected': index === this.selectedTabIndex,
                 });
 
-                // spaces are not allowed as id, so best is not even to use a label als id
                 return html`
                   <li class="${navListItemContainer}" role="presentation">
                     <div class="nav-item-content-wrapper">
-                      <a
-                        id=${`${tab.label.toLowerCase()} tab`}
+                      <p
+                        id=${`#tab-${index}`}
                         role="tab"
-                        href=${`#${tab.href}`}
-                        aria-controls=${tab.label.toLowerCase()}
+                        aria-controls=${`panel-${index}`}
                         class="${navListItemClasses}"
                         @click=${() => {
-                          if (!tab.disabled) {
+                          if (!isDisabled) {
+                            this.handleSelect(index);
+                          }
+                        }}
+                        @keydown=${(event: KeyboardEvent) => {
+                          if (!isDisabled && event.code === 'Space') {
                             this.handleSelect(index);
                           }
                         }}
-                        tabindex=${tab.disabled ? '-1' : nothing}
+                        tabindex=${isDisabled ? '-1' : index}
                       >
-                        ${this.tabContent !== 'labelOnly'
+                        ${this.tabContent !== 'labelOnly' && tab.hasAttribute('icon')
                           ? BlrIconRenderFunction(
                               {
-                                icon: calculateIconName(tab.icon, iconSizeVariant),
+                                icon: calculateIconName(tab.getAttribute('icon')!, iconSizeVariant),
                                 size: iconSizeVariant,
                               },
                               {
@@ -207,11 +196,11 @@ export class BlrTabBar extends LitElement {
                             )
                           : nothing}
                         ${this.tabContent !== 'iconOnly'
-                          ? html` <label class="blr-semantic-action ${this.size}" name="${tab.label}"
-                              >${tab.label}</label
+                          ? html` <label class="blr-semantic-action ${this.size}" name="${tab.getAttribute('label')}"
+                              >${tab.getAttribute('label')}</label
                             >`
                           : nothing}
-                      </a>
+                      </p>
                     </div>
                     <div class="${navListItemUnderline}"></div>
                   </li>
@@ -243,17 +232,17 @@ export class BlrTabBar extends LitElement {
               })
             : nothing}
         </div>
-        ${this.tabs.map((tab) => {
-          // id can not be a href. it contains many illegal characters for sure
-          return html` <section
-            id=${tab.href}
-            class="panel-wrapper"
-            role="tabpanel"
-            aria-labelledby="${`${tab.label.toLowerCase()} tab`}"
-            hidden
-          >
-            <p>${tab.label}</p>
-          </section>`;
+        ${this._tabBarElements?.map((tab, index) => {
+          return index === this.selectedTabIndex
+            ? html`<section
+                id=${`#panel-${index}`}
+                class="panel-wrapper"
+                role="tabpanel"
+                aria-labelledby="${`${tab.getAttribute('label')?.toLowerCase()}-tab`}"
+              >
+                <p>${tab.getAttribute('label')}</p>
+              </section>`
+            : nothing;
         })}`;
     }
   }
diff --git a/packages/ui-library/src/components/navigation/tab-bar/indexReact.ts b/packages/ui-library/src/components/navigation/tab-bar/indexReact.ts
index 766d9576b..c7be19f2e 100644
--- a/packages/ui-library/src/components/navigation/tab-bar/indexReact.ts
+++ b/packages/ui-library/src/components/navigation/tab-bar/indexReact.ts
@@ -4,7 +4,7 @@ import { createComponent, EventName } from '@lit-labs/react';
 import { BlrTabBar } from '.';
 
 export const BlrTextInputReact = createComponent({
-  tagName: 'blr-text-input',
+  tagName: 'blr-tab-bar',
   elementClass: BlrTabBar,
   react: React,
   events: {
diff --git a/packages/ui-library/src/components/navigation/tab-bar/renderFunction.ts b/packages/ui-library/src/components/navigation/tab-bar/renderFunction.ts
index 7c1a79192..444c4c3cc 100644
--- a/packages/ui-library/src/components/navigation/tab-bar/renderFunction.ts
+++ b/packages/ui-library/src/components/navigation/tab-bar/renderFunction.ts
@@ -1,7 +1,8 @@
+import { TemplateResult } from 'lit-html';
 import { BlrTabBarType } from '.';
 import { genericBlrComponentRenderer } from '../../../utils/typesafe-generic-component-renderer';
 
 export const TAG_NAME = 'blr-tab-bar';
 
-export const BlrTabBarRenderFunction = (params: BlrTabBarType) =>
-  genericBlrComponentRenderer<BlrTabBarType>(TAG_NAME, { ...params });
+export const BlrTabBarRenderFunction = (params: BlrTabBarType, children?: TemplateResult<1>) =>
+  genericBlrComponentRenderer<BlrTabBarType>(TAG_NAME, { ...params }, children);
diff --git a/packages/ui-library/src/globals/types.ts b/packages/ui-library/src/globals/types.ts
index b74e74476..637d03ef7 100644
--- a/packages/ui-library/src/globals/types.ts
+++ b/packages/ui-library/src/globals/types.ts
@@ -50,12 +50,6 @@ export type WarningLimits = 'warningLimitInt' | 'warningLimitPer';
 export type DividerVariationTypes = (typeof DividerVariations)[number];
 export type ButtonGroupAlignmentType = (typeof ButtonGroupAlignmentVariants)[number];
 
-export type TabType = {
-  label: string;
-  icon: SizelessIconType;
-  href: string;
-  disabled?: boolean;
-};
 export type TabVariantType = (typeof TabVariants)[number];
 export type TabContentVariantType = (typeof TabContentVariants)[number];
 export type TabAlignmentVariantType = (typeof TabAlignmentVariants)[number];