testio-tailwind 3.19.0 → 3.20.0

package/src/assets/stylesheets/components/modals.css

@@ -18,10 +18,7 @@
 }
 
 .modal-wrapper[open] .modal {
-  @apply w-modal-md mt-spacing rounded bg-white dark:bg-gray-800;
-  position: relative;
-  display: flex;
-  flex-direction: column;
+  @apply relative flex flex-col w-modal-md mt-spacing rounded bg-white dark:bg-gray-800 dark:shadow-xl dark:border-1 dark:border-bordercolor;
   height: auto;
   max-width: 100vw;
   pointer-events: all;
@@ -37,40 +34,35 @@
 }
 
 .modal-wrapper[open] .modal-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: start;
-  padding: 0;
+  @apply flex justify-between items-start p-0;
 }
 
 .modal-wrapper[open] .modal-title {
-  @apply p-spacing text-heading-3;
+  @apply p-spacing text-heading-3 dark:grow dark:text-center dark:pl-lg dark:pr-0;
 }
 
 .modal-wrapper[open] .modal-header .close-btn {
-  @apply rounded-none rounded-tr cursor-pointer;
+  @apply rounded-none rounded-tr cursor-pointer dark:text-label-color dark:rounded dark:mt-xs dark:mr-xs;
 }
 
 .modal-wrapper[open] .modal-content {
-  @apply p-spacing pt-0;
+  @apply p-spacing pt-0 dark:text-center;
 }
 
 .modal-wrapper[open] .modal-footer {
-  @apply py-sm px-spacing bg-actionbar rounded-b;
-  display: flex;
-  justify-content: start;
+  @apply flex justify-start py-sm px-spacing bg-actionbar rounded-b dark:justify-center;
 }
 
 .modal-footer .btn {
-  @apply mr-xs;
+  @apply mr-xs last:mr-0;
 }
 
 .modal-footer .btn-primary {
-  @apply bg-white text-primary border-0 hover:bg-link-hover hover:border-link-hover hover:text-white dark:bg-primary dark:text-white;
+  @apply bg-white text-primary border-0 hover:bg-link-hover hover:border-link-hover hover:text-white dark:bg-primary dark:text-black;
 }
 
 .modal-footer .btn-secondary {
-  @apply bg-transparent text-white border-white hover:bg-link-hover hover:border-link-hover hover:text-white;
+  @apply bg-transparent text-white border-white hover:bg-link-hover hover:border-link-hover hover:text-white dark:border-primary dark:text-primary;
 }
 
 .modal-footer .btn.disabled,

package/src/assets/stylesheets/components/search.css

@@ -13,7 +13,7 @@
 }
 
 .form-search.inverted input {
-  @apply text-white border-primary bg-transparent;
+  @apply text-white border-primary bg-transparent dark:border-bordercolor dark:bg-card focus:border-link-hover focus:outline-1 focus:outline-link-hover;
 }
 
 .form-search .btn-clear,
@@ -64,7 +64,7 @@
 
 .form-search.direct-input {
   &::before {
-    @apply absolute inline-block w-icon h-icon top-xs left-xs bg-gray;
+    @apply absolute inline-block w-icon h-icon top-xs left-sm bg-gray;
     content: "";
     mask-image: url("/assets/images/icons/search.svg");
     mask-repeat: no-repeat;

package/src/assets/stylesheets/components/tables.css

@@ -169,6 +169,8 @@
   word-break: break-word;
 }
 
+/*///// Cellstyle table /////*/
+
 td.action-cell,
 .table-cellstyle td.action-cell {
   @apply text-right min-w-auto space-x-1.5 whitespace-nowrap;
@@ -179,7 +181,8 @@ td.action-cell,
   border-collapse: separate;
 }
 
-.table-cellstyle th {
+.table-cellstyle th
+.table-cellstyle .th {
   @apply relative align-middle pl-2.5 pr-0.5 py-1 text-sm font-normal dark:text-base dark:uppercase;
 }
 
@@ -220,7 +223,8 @@ td.action-cell,
   mask-image: url("/assets/images/icons/check-thick.svg");
 }
 
-.table-cellstyle td {
+.table-cellstyle td,
+.table-cellstyle .td {
   @apply relative px-2.5 py-1.5 last:pr-3 min-w-cell min-h-11 align-top text-sm bg-card;
 }
 
@@ -320,16 +324,22 @@ td.action-cell,
 
 .table-grid thead,
 .table-grid tbody,
-.table-grid tr {
+.table-grid tr,
+.table-grid .thead,
+.table-grid .tbody,
+.table-grid .tr {
   display: contents;
 }
 
 .table-grid th, 
-.table-grid td {
+.table-grid td,
+.table-grid .th, 
+.table-grid .td {
   @apply w-full h-full whitespace-normal;
 }
 
-.table-grid th {
+.table-grid th,
+.table-grid .th {
   @apply flex justify-start items-center min-h-8;
 }
 
@@ -337,6 +347,50 @@ td.action-cell,
   @apply flex-1;
 }
 
+
+/*////// Table with Rowgroups, cells are visually merged, but rows are separated //////*/
+
+.table-rowgroups {
+  @apply gap-0;
+}
+
+.table-rowgroups th,
+.table-rowgroups .th {
+  @apply h-auto p-xs mb-xxs text-label-color dark:uppercase;
+}
+
+.table-rowgroups td,
+.table-rowgroups .td {
+  @apply h-auto p-md mb-xxs bg-card text-label-color text-base;
+}
+
+.table-rowgroups td.checkbox-column,
+.table-rowgroups .td.checkbox-column {
+  @apply pr-0;
+}
+
+.table-rowgroups td.action-column,
+.table-rowgroups .td.action-column {
+  @apply flex flex-row justify-end pl-xs pt-xs;
+}
+
+.table-rowgroups .formrow .td {
+  @apply mb-0 lg:mb-xxs pb-0 last:pb-md;
+}
+
+.table-rowgroups .formrow .checkbox-column {
+  @apply mb-xxs;
+}
+
+.table-rowgroups .formrow .formrow-actions {
+  @apply flex flex-row lg:flex-col mb-xxs;
+}
+
+.formrow .formrow-actions .btn {
+  @apply mr-xs last:mr-0 lg:mb-xxs lg:last:mb-0;
+}
+
+
 /*////// Selectable cells //////*/
 
 .table-cellstyle .cell-selectable {

package/src/assets/stylesheets/components/typography.css

@@ -48,6 +48,14 @@ a {
   @apply text-link font-semibold leading-5 hover:text-link-hover hover:underline cursor-pointer;
 }
 
+a.white {
+  @apply text-white hover:text-link-hover;
+}
+
+a.black {
+  @apply text-black hover:text-link-hover;
+}
+
 code {
   @apply font-mono not-italic text-sm;
 }

package/src/assets/stylesheets/components/url_collapsable.css

@@ -0,0 +1,32 @@
+/*/// URL collapsable ///*/
+
+.url-collapsable {
+  @apply relative;
+}
+
+.url-collapsable .trigger {
+  @apply text-white hover:text-link-hover cursor-pointer;
+}
+
+.url-collapsable .trigger .text-open {
+  @apply hidden;
+}
+
+.url-collapsable[open] .trigger {
+  @apply absolute bottom-0;
+  .text-open {
+    @apply block;
+  }
+  .text-closed {
+    @apply hidden;
+  }
+}
+
+.url-collapsable[open] {
+  @apply pb-md;
+}
+
+.url-collapsable p {
+  @apply mb-xs text-label-color;
+  word-break: break-all;
+}

package/src/assets/stylesheets/plugin_themes/tom_select.css

@@ -2,8 +2,9 @@
 /*///// Tom-Select theme https://tom-select.js.org /////*/
 
 .ts-control {
-  @apply relative overflow-hidden flex w-full justify-start items-stretch min-h-btn py-xs pl-sm text-base rounded text-white dark:text-white;
+  @apply relative overflow-hidden flex w-full justify-start items-stretch min-h-btn py-xs pl-sm text-base rounded text-white border-0 dark:text-white;
   padding-right: 40px !important;
+  line-height: 1.4;
 }
 
 .ts-control input {
@@ -95,6 +96,10 @@
 
 /* Multi select item */
 
+.ts-wrapper.multi.has-items .ts-control input {
+  @apply pt-xxs! pb-xxs!;
+}
+
 .ts-wrapper.multi .ts-control div.item {
   @apply relative flex-row flex-grow-0 items-stretch mr-xs pl-xs pr-0 text-sm text-black bg-white dark:text-white dark:bg-gray-600 rounded;
   margin-top: 2px;

package/src/assets/stylesheets/plugin_themes/trix_editor.css

@@ -46,7 +46,7 @@ trix-toolbar .trix-button-row {
 }
 
 trix-toolbar .trix-button {
-  @apply inline-flex justify-center items-center flex-shrink-0 w-btn-sm h-btn-sm min-w-btn-sm border-0 rounded-xs bg-transparent;
+  @apply inline-flex justify-center items-center flex-shrink-0 w-btn-sm h-btn-sm min-w-btn-sm border-0 rounded-xs bg-transparent dark:rounded-sm;
   font-size: 0; /* Fix for safari bug, we don't need to show any text in those buttons */
   &:hover,
   &:focus {

package/src/assets/stylesheets/tailwind_theme_dark.css

@@ -5,7 +5,7 @@
     --color-appbody: #181818;
     --color-appbody-textcolor: #f2f2f2;
     --color-header: #1d1d1d;
-    --color-actionbar: #343A40;
+    --color-actionbar: #222222;
     --color-metasidebar: #262626;
     --color-primary: #78eac1;
     --color-link: #8988eb;
@@ -34,6 +34,7 @@
     --card-padding: 30px;
     --spacing-grid-gutter: 40px;
     --spacing-formgrid: 1.25rem;
+    --spacing-actionbar: 5rem;
     
     /*//// Fontsize ////*/
     --fontsize-card-header: 1.125rem;

package/src/pages/agenticqa/email.njk

@@ -10,7 +10,7 @@ title: Email Template
   <details class="mt-3">
     <summary class="btn btn-sm btn-gray">
       <span class="icon icon-format-code mr-icon-spacing"></span>
-      <span>Show source</span>
+      <span>Show email source</span>
     </summary>
     <div class="ds-code-preview">
       <pre><code class="code html-preview">{{ section.templateContent | trim }}</code></pre>

package/src/pages/agenticqa/tables-formrow.haml

@@ -0,0 +1,68 @@
+---
+tags: ['agenticqa']
+title: Tables - form row
+---
+
+.table-grid.table-rowgroups{style:"grid-template-columns: repeat(3, auto) repeat(1, minmax(12rem, 1fr)) auto;"}
+  .thead
+    .tr
+      .th
+        .form-check.sm
+          %input{type:'checkbox'}
+      .th check title
+      .th page type
+      .th check description
+      .th
+  .tbody
+    .tr
+      .btn.btn-sm.btn-block.btn-subtile.mb-xxs.col-span-5
+        .icon.icon-plus.mr-icon-spacing
+        Add new check
+    %form.formrow.tr
+      .td.checkbox-column.row-span-4{class:"lg:row-span-1"}
+        .form-check.sm
+          %input{type:'checkbox', disabled:"true"}
+      .td.col-span-4{class:"lg:col-span-1"}
+        .label.mb-xxs{class:"lg:hidden"} Check title
+        %input.form-control{type:'text', placeholder:"An input field"}
+      .td.col-span-4{class:"lg:col-span-1"}
+        .label.mb-xxs{class:"lg:hidden"} Page type
+        %select.tom-select.min-w-spacing-4xl{placeholder: "Please select"}
+          %option{value: ""}
+          %option{value:"Option 1"} Option 1
+          %option{value:"Option 2"} Option 2
+          %option{value:"Option 3"} Option 3
+          %option{value:"Option 4"} ABC
+          %option{value:"Option 5"} DEF
+          %option{value:"Option 6"} WHY
+          %option{value:"Option 7"} XYZ
+      .td.col-span-4{class:"lg:col-span-1"}
+        .label.mb-xxs{class:"lg:hidden"} Check description
+        %textarea.form-control{rows:'1', placeholder:"Textarea"}
+      .td.formrow-actions.col-span-4{class:"lg:col-span-1"}
+        %button.btn.btn-sm.btn-block.btn-primary Save changes  
+        %button.btn.btn-sm.btn-block.btn-danger Discard  
+    %form.formrow.tr
+      .td.checkbox-column.row-span-4{class:"lg:col-span-1"}
+        .form-check.sm
+          %input{type:'checkbox', disabled:"true"}
+      .td.col-span-4{class:"lg:col-span-1"}
+        .label.mb-xxs{class:"lg:hidden"} Check title
+        %input.form-control{type:'text', placeholder:"An input field"}
+      .td.col-span-4{class:"lg:col-span-1"}
+        .label.mb-xxs{class:"lg:hidden"} Page type
+        %select.tom-select.min-w-spacing-4xl{placeholder: "Please select"}
+          %option{value: ""}
+          %option{value:"Option 1"} Option 1
+          %option{value:"Option 2"} Option 2
+          %option{value:"Option 3"} Option 3
+          %option{value:"Option 4"} ABC
+          %option{value:"Option 5"} DEF
+          %option{value:"Option 6"} WHY
+          %option{value:"Option 7"} XYZ
+      .td.col-span-4{class:"lg:col-span-1"}
+        .label.mb-xxs{class:"lg:hidden"} Check description
+        %textarea.form-control{rows:'1', placeholder:"Textarea"}
+      .td.formrow-actions.col-span-4{class:"lg:col-span-1"}
+        %button.btn.btn-sm.btn-block.btn-primary Save changes  
+        %button.btn.btn-sm.btn-block.btn-danger Discard  

package/src/pages/agenticqa/tables-grid.haml

@@ -0,0 +1,125 @@
+---
+tags: ['agenticqa']
+title: Tables - Grid
+---
+
+.table-grid.table-rowgroups{style:"grid-template-columns: repeat(2, auto) repeat(2, minmax(12rem, 1fr)) repeat(5, auto);"}
+  .thead
+    .tr
+      .th
+        .form-check.sm
+          %input#check1sm{type:'checkbox'}
+      .th status
+      .th title
+      .th urls
+      .th check suite
+      .th results
+      .th executions
+      .th executed
+      .th
+  .tbody
+    .tr
+      .btn.btn-sm.btn-block.btn-subtile.mb-xxs.col-span-9{style:""}
+        .icon.icon-plus.mr-icon-spacing
+        Add new check
+    .tr
+      .td.checkbox-column
+        .form-check.sm
+          %input#check1sm{type:'checkbox'}
+      .td status
+      .td
+        %a.white.font-normal{href:"#"} Short Title with a bit of Lorem ipsum
+      .td
+        %details.url-collapsable
+          %summary
+            %p https://url.com
+            .trigger
+              .text-closed Show 3 more
+              .text-open Show less
+          %p https://url.com/1
+          %p https://url.com/2
+          %p https://url.com/3
+      .td
+        %a.white.font-normal{href:"#"} Check suite title
+      .td
+        .flex.flex-row
+          .text-with-icon.mr-sm
+            .icon.icon-check-circle-filled.text-success
+            999
+          .text-with-icon.mr-sm
+            .icon.icon-cross-circle-filled.text-danger
+            999
+          .text-with-icon
+            .icon.icon-blocked.text-blocked
+            999
+      .td 6
+      .td 13h ago
+      .td.action-column
+        %a.btn.btn-square{href:'#'}
+          .icon.icon-pencil
+        %details.dropdown-actions.dropright
+          %summary
+            .btn.btn-square
+              .icon.icon-more
+          .popover-menu
+            %a.popover-action{href:'#'}
+              %span.icon.text-icon-default.icon-pencil
+              Edit
+            %a.popover-action{href:'#'}
+              %span.icon.text-icon-default.icon-duplicate
+              Duplicate
+            %a.popover-action{href:'#'}
+              %span.icon.text-icon-default.icon-remove
+              Delete
+    .tr
+      .td.checkbox-column
+        .form-check.sm
+          %input#check1sm{type:'checkbox'}
+      .td status
+      .td
+        %a.white.font-normal{href:"#"} Title with a lot of Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+      .td
+        %details.url-collapsable
+          %summary
+            %p https://example.url/with-long/text/sets/long-format/experimental/phase-2/results/compiled/overview/report-final
+            .trigger
+              .text-closed Show 6 more
+              .text-open Show less
+          %p https://example.url/with-long/text/data/sets/long-format/experimental/1
+          %p https://example.url/with-long/text/data/sets/long-format/experimental/2wordforbreaking
+          %p https://example.url/with-long/text/data/sets/long-format/experimental/3
+          %p https://example.url/with-long/text/data/sets/long-format/experimental/4
+          %p https://example.url/with-long/text/data/sets/long-format/experimental/5
+          %p https://example.url/with-long/text/data/sets/long-format/experimental/6
+      .td
+        %a.white.font-normal{href:"#"} Check suite title
+      .td
+        .flex.flex-row
+          .text-with-icon.mr-sm
+            .icon.icon-check-circle-filled.text-success
+            999
+          .text-with-icon.mr-sm
+            .icon.icon-cross-circle-filled.text-danger
+            999
+          .text-with-icon
+            .icon.icon-blocked.text-blocked
+            999
+      .td 6
+      .td 13h ago
+      .td.action-column
+        %a.btn.btn-square{href:'#'}
+          .icon.icon-pencil
+        %details.dropdown-actions.dropright
+          %summary
+            .btn.btn-square
+              .icon.icon-more
+          .popover-menu
+            %a.popover-action{href:'#'}
+              %span.icon.text-icon-default.icon-pencil
+              Edit
+            %a.popover-action{href:'#'}
+              %span.icon.text-icon-default.icon-duplicate
+              Duplicate
+            %a.popover-action{href:'#'}
+              %span.icon.text-icon-default.icon-remove
+              Delete

package/src/pages/agenticqa/url_collapsable.haml

@@ -0,0 +1,17 @@
+---
+tags: ['agenticqa']
+title: URL collapsable
+---
+
+%details.url-collapsable
+  %summary
+    %p https://example.invalid/nebula-saffron/research/data/sets/long-format/experimental/phase-2/results/compiled/overview/report-final
+    .trigger
+      .text-closed Show 6 more
+      .text-open Show less
+  %p https://example.invalid/nebula-saffron/research/data/sets/long-format/experimental/1
+  %p https://example.invalid/nebula-saffron/research/data/sets/long-format/experimental/2wordforbreaking
+  %p https://example.invalid/nebula-saffron/research/data/sets/long-format/experimental/3
+  %p https://example.invalid/nebula-saffron/research/data/sets/long-format/experimental/4
+  %p https://example.invalid/nebula-saffron/research/data/sets/long-format/experimental/5
+  %p https://example.invalid/nebula-saffron/research/data/sets/long-format/experimental/6

package/src/pages/components/drawer_filter.haml

@@ -34,7 +34,7 @@ title: Drawer for filtering
             %input#check_drawer4{type:'checkbox'}
             %label{for:'check_drawer4'}
               %span.icon.icon-low.mr-icon-spacing
-              Checkbox label
+              Checkbox label with a lot of lorem ipsum to break into several lines and check if the layout still looks good
           .form-check.sm.inverted
             %input#check_drawer5{type:'checkbox'}
             %label{for:'check_drawer5'}

package/src/pages/components/modal_details.haml

@@ -26,8 +26,8 @@ title: Modal - based on details tag
       .modal-footer
         %a.btn.btn-primary{href:''} Primary
         %a.btn.btn-secondary{href:''} Secondary
-        %a.btn.btn-success{href:''} Success
-        %a.btn.btn-danger{href:''} Danger
+        %a.btn.btn-success{href:''} Yes
+        %a.btn.btn-danger{href:''} No
         %a.btn.btn-primary.disabled{href:''} Disabled
         %a.btn.btn-secondary.close-btn{href:''} Close
 %details.modal-wrapper.mb-md
@@ -48,8 +48,8 @@ title: Modal - based on details tag
       .modal-footer
         %a.btn.btn-primary{href:''} Primary
         %a.btn.btn-secondary{href:''} Secondary
-        %a.btn.btn-success{href:''} Success
-        %a.btn.btn-danger{href:''} Danger
+        %a.btn.btn-success{href:''} Yes
+        %a.btn.btn-danger{href:''} No
         %a.btn.btn-primary.disabled{href:''} Disabled
         %a.btn.btn-secondary.close-btn{href:''} Close
 %details.modal-wrapper
@@ -64,8 +64,8 @@ title: Modal - based on details tag
       .modal-content
         %p.mb-xs Some cool modal content going on here: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
       .modal-footer
-        %a.btn.btn-success{href:''} Success
-        %a.btn.btn-danger{href:''} Danger
+        %a.btn.btn-success{href:''} Yes
+        %a.btn.btn-danger{href:''} No
         %a.btn.btn-secondary.close-btn{href:''} Close
 %p.mb-heading.mt-md
   If you want a modal that doesn't close automatically when clicking on the fade background, then add the class  
@@ -89,6 +89,6 @@ title: Modal - based on details tag
             %label.form-label Input
             %input.form-control{type:'text', placeholder:''}
       .modal-footer
-        %a.btn.btn-primary{href:''} Primary
-        %a.btn.btn-secondary{href:''} Secondary
+        %a.btn.btn-primary{href:''} Yes
+        %a.btn.btn-secondary{href:''} No
         %a.btn.btn-secondary.close-btn{href:''} Close

package/src/pages/forms/radiobuttons.haml

@@ -20,19 +20,32 @@ title: Radiobuttons
 .form-grid.single.narrow.mb-3
   .form-radio
     .field_with_errors
-      %input#radio1{type:'radio', name:'radio-group', value:'1'}
-    %label{for:'radio1'} Option 1
+      %input#radio11{type:'radio', name:'radio-group', value:'1'}
+    %label{for:'radio11'} Option in error state
   .form-radio
     .field_with_errors
-      %input#radio2{type:'radio', name:'radio-group', value:'2'}
-    %label{for:'radio2'} Option 2
+      %input#radio12{type:'radio', name:'radio-group', value:'2'}
+    %label{for:'radio12'} Option 2
   .form-radio.disabled
     .field_with_errors
-      %input#radio4{type:'radio', name:'radio-group', value:'4', disabled:'true'}
-    %label{for:'radio4'} Disabled
+      %input#radio14{type:'radio', name:'radio-group', value:'4', disabled:'true'}
+    %label{for:'radio14'} Disabled
   .form-hint.error
     You made a mistake, which is why you see this form validation error message with some helpful Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
 
+.form-grid.single.narrow.mb-3
+  .form-radio.sm
+    %input#radio1sm{type:'radio', checked:'true', name:'radio-groupsm', value:'1'}
+    %label{for:'radio1sm'} SM Option 1
+  .form-radio.sm
+    %input#radio2sm{type:'radio', name:'radio-groupsm', value:'2'}
+    %label{for:'radio2sm'} SM Option 2
+  .form-radio.sm
+    %input#radio3sm{type:'radio', name:'radio-groupsm', value:'3'}
+    %label{for:'radio3sm'} SM Option 3
+  .form-radio.disabled.sm
+    %input#radio4sm{type:'radio', name:'radio-groupsm', value:'4', disabled:'true'}
+    %label{for:'radio4sm'} Disabled
 
 
 .form-grid.single.narrow.bg-black.p-3
@@ -48,3 +61,16 @@ title: Radiobuttons
   .form-radio.inverted.disabled
     %input#radio9{type:'radio', name:'radio-group2', value:'4', disabled:'true'}
     %label{for:'radio9'} Disabled
+  .p-xs
+  .form-radio.inverted.sm
+    %input#radio6sm{type:'radio', checked:'true', name:'radio-group2sm', value:'1'}
+    %label{for:'radio6sm'} SM Option 1
+  .form-radio.inverted.sm
+    %input#radio7sm{type:'radio', name:'radio-group2sm', value:'2'}
+    %label{for:'radio7sm'} SM Option 2
+  .form-radio.inverted.sm
+    %input#radio8sm{type:'radio', name:'radio-group2sm', value:'3'}
+    %label{for:'radio8sm'} SM Option 3
+  .form-radio.inverted.disabled.sm
+    %input#radio9sm{type:'radio', name:'radio-group2sm', value:'4', disabled:'true'}
+    %label{for:'radio9sm'} SM Disabled