barbican-reset 3.18.0 → 3.19.0

package/components/BrFormFieldsetNew.vue

@@ -0,0 +1,15 @@
+<template>
+  <div role="group" :aria-labelledby="id" class="fieldset">
+    <div class="wrap-legend">
+      <div :id="id" class="legend">{{ label }}</div>
+    </div>
+    <slot />
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  label: String,
+  id: String,
+})
+</script>

package/components/BrFormInput.vue

@@ -1,12 +1,20 @@
 <template>
-  <input
-    :autocomplete="generateAutoComplete"
-    :data-test="generateDataTest"
-    :type="generateType"
-    :id="generateID"
-    v-model="model"
-    v-bind="$attrs" />
-  <label v-if="$slots.default" :for="generateID"><slot /></label>
+  <label :for="generateID">
+
+    <input
+      :autocomplete="generateAutoComplete"
+      :data-test="generateDataTest"
+      :type="generateType"
+      :id="generateID"
+      v-model="model"
+      v-bind="$attrs" />
+
+    <span class="label-text">
+      <slot />
+    </span>
+
+  </label>
+
 </template>
 
 <script setup>

package/components/BrFormRadio.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="br-radio">
+  <div :class="['br-radio', slots.default ? 'has-label-text' : 'no-label-text']">
     <BrFormInput v-bind="$attrs" type="radio">
       <slot />
     </BrFormInput>
@@ -8,6 +8,9 @@
 
 <script setup>
 import BrFormInput from '#components/BrFormInput.vue'
+import { useSlots } from 'vue';
+
+const slots = useSlots()
 
 defineOptions({
   inheritAttrs: false,

package/index.js

@@ -25,6 +25,7 @@ import BrFormDate from '#components/BrFormDate.vue'
 import BrFormEdit from '#components/BrFormEdit.vue'
 import BrFormEmail from '#components/BrFormEmail.vue'
 import BrFormFieldset from '#components/BrFormFieldset.vue'
+import BrFormFieldsetNew from '#components/BrFormFieldsetNew.vue'
 import BrFormInput from '#components/BrFormInput.vue'
 import BrFormPassword from '#components/BrFormPassword.vue'
 import BrFormRadio from '#components/BrFormRadio.vue'
@@ -75,6 +76,7 @@ export {
   BrFormEdit,
   BrFormEmail,
   BrFormFieldset,
+  BrFormFieldsetNew,
   BrFormInput,
   BrFormPassword,
   BrFormRadio,

package/package.json

@@ -137,5 +137,5 @@
     "style:patterns": "cd patterns && gulp build:css",
     "build:patterns": "cd patterns && rm -rf html && pug views --out html"
   },
-  "version": "3.18.0"
+  "version": "3.19.0"
 }

package/scss/_br-form-fieldset.scss

@@ -0,0 +1,71 @@
+@use "./mixins/breakpoints" as *;
+
+fieldset, .fieldset {
+  padding: var(--padding-lg) var(--padding-lg) var(--padding-md);
+  border-color: var(--color-black-25-lighten);
+  border-radius: var(--border-radius-sm);
+  border-width: var(--border-width-sm);
+  margin: var(--margin-lg) 0 0;
+  border-style: solid;
+}
+
+.fieldset .legend {
+  background-color: white;
+  display: inline-block;
+  padding: 4px;
+}
+
+.fieldset .wrap-legend {
+  margin-top: calc(var(--margin-xxl) * -1);
+}
+
+@include small-up {
+  .fieldset.table {
+    grid-template-columns: auto repeat(2, 5rem);
+    border-radius: 0;
+    display: grid;
+    padding: 0;
+  }
+
+  .fieldset .wrap-legend {
+    margin-top: 0;
+  }
+
+  .fieldset.table .legend {
+    padding: var(--padding-md);
+  }
+
+  .fieldset.table .br-radio {
+    border-left-color: var(--color-black-25-lighten);
+    border-left-width: var(--border-width-sm);
+    border-left-style: solid;
+    justify-content: center;
+    align-items: center;
+    display: flex;
+    margin: 0;
+  }
+
+  .fieldset.table .br-radio label {
+    padding: var(--padding-sm);
+    border-radius: 50%;
+    border-width: 0;
+
+    &:has(input:focus) {
+      outline-width: var(--border-width-sm);
+      outline-style: dashed;
+    }
+
+    &:has(input:checked):has(input:focus) {
+      outline-width: var(--border-width-sm);
+      outline-style: dashed;
+    }
+  }
+
+  .fieldset.table .br-radio input[type=radio] {
+    margin-top: 0;
+  }
+
+  .fieldset.table .br-radio label .label-text {
+    display: none;
+  }
+}

package/scss/_input.scss

@@ -5,19 +5,18 @@ input::placeholder {
   color: var(--color-black-25-lighten);
 }
 
-input[type='checkbox'],
-input[type='radio'] {
-  margin-bottom: var(--margin-sm);
-  margin-right: var(--margin-sm);
+input[type=checkbox],
+input[type=radio] {
+  margin: 0;
 }
 
-input[type='button'],
-input[type='submit'] {
+input[type=button],
+input[type=submit] {
   border-radius: var(--border-radius-lg);
   appearance: none;
 }
 
-input[type='number'] {
+input[type=number] {
   @include focus {
     @include input-focus-defaults;
   }

package/scss/index.scss

@@ -15,6 +15,7 @@
 
 @use "br-form-checkbox";
 @use "br-form-edit";
+@use "br-form-fieldset";
 @use "br-form-row";
 @use "br-form-textarea";
 @use "br-form-toggle";

package/scss/lists.scss

@@ -8,20 +8,4 @@ ul {
 nav>ul {
   list-style: none;
   padding: 0;
-}
-
-fieldset {
-  border-color: var(--color-black-10-lighten);
-  border-radius: var(--border-radius-sm);
-  border-width: var(--border-width-sm);
-  padding-bottom: var(--padding-lg);
-  padding-right: var(--padding-lg);
-  padding-left: var(--padding-lg);
-  padding-top: var(--padding-md);
-  border-style: solid;
-  margin: 0;
-}
-
-fieldset+fieldset {
-  margin-top: var(--margin-lg);
 }

package/scss/mixins/input/_radio.scss

@@ -1,11 +1,95 @@
 @use "generic" as *;
 
-// formerly radio-input
+@mixin br-radio-label-checked {
+  &:not(.error):not(.success) {
+    background-color: var(--color-status-neutral-10-lighten);
+    color: var(--color-status-neutral);
+    outline-color: currentColor;
+    border-color: currentColor;
+  }
+
+  &.error {
+    background-color: var(--color-status-error-10-lighten);
+    color: var(--color-status-error);
+    outline-color: currentColor;
+    border-color: currentColor;
+  }
+
+  &.success {
+    background-color: var(--color-status-success-10-lighten);
+    color: var(--color-status-success);
+    outline-color: currentColor;
+    border-color: currentColor;
+  }
+}
+
+@mixin br-radio-label--hover {
+  background-color: var(--color-black-5-lighten);
+  outline-color: var(--color-black-50-lighten);
+}
 
 @mixin br-radio($state: neutral) {
-  @include generic-input($state, radio);
-  display: inline-block;
   margin: var(--margin-xs);
+  vertical-align: middle;
+  display: inline-block;
+
+  label {
+    border-color: var(--color-black-25-lighten);
+    border-radius: var(--border-radius-lg);
+    border-width: var(--border-width-sm);
+    color: var(--color-black-60-lighten);
+    padding: var(--padding-md);
+    background-color: white;
+    display: inline-flex;
+    border-style: solid;
+    font-weight: normal;
+    cursor: pointer;
+
+    &:hover {
+      @include br-radio-label--hover;
+      outline-width: var(--border-width-sm);
+      outline-offset: -0.0625rem;
+      outline-style: solid;
+    }
+
+    &:has(input:focus) {
+      @include br-radio-label--hover;
+      outline-width: var(--border-width-md);
+      outline-style: solid;    
+    }
+
+    &:has(input:checked) {
+      @include br-radio-label-checked;
+      outline-width: var(--border-width-sm);
+      outline-offset: -0.0625rem;
+      outline-style: solid;
+    }
+
+    &:has(input:checked):has(input:focus) {
+      @include br-radio-label-checked;
+      outline-width: var(--border-width-md);
+      outline-style: solid;
+    }
+  }
+
+  &.has-label-text label {
+    gap: var(--gap-sm);
+  }
+
+  input[type=radio] {
+    height: 0.875rem;
+    cursor: pointer;
+    width: 0.875rem;
+    z-index: 3;
+
+    &:focus {
+      outline-style: none;
+    }
+  }
+
+  &.has-label-text input[type=radio] {
+    margin-top: var(--margin-xs);
+  }
 }
 
 @mixin br-spx-radio($state: neutral) {