rizzo-css 0.0.62 → 0.0.64

package/scaffold/vanilla/components/theme-switcher.html

@@ -404,6 +404,24 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -661,6 +679,24 @@
 
 
 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/toast.html

@@ -404,6 +404,24 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -661,6 +679,24 @@
 
 
 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/toggle-group.html

@@ -404,6 +404,24 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -661,6 +679,24 @@
 
 
 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/toggle.html

@@ -404,6 +404,24 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -661,6 +679,24 @@
 
 
 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/tooltip.html

@@ -404,6 +404,24 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -661,6 +679,24 @@
 
 
 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/index.html

@@ -404,6 +404,24 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -751,6 +769,24 @@
 
 
 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
 
 

package/scaffold/vue/Accordion.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+withDefaults(defineProps<{ class?: string }>(), { class: "" });
+</script>
+
+<template>
+  <div :class="["accordion", $props.class].filter(Boolean).join(" ")">
+    <slot />
+  </div>
+</template>

package/scaffold/vue/Alert.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+withDefaults(defineProps<{ class?: string }>(), { class: "" });
+</script>
+
+<template>
+  <div :class="["alert", $props.class].filter(Boolean).join(" ")">
+    <slot />
+  </div>
+</template>

package/scaffold/vue/AlertDialog.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+withDefaults(defineProps<{ class?: string }>(), { class: "" });
+</script>
+
+<template>
+  <div :class="["alert-dialog", $props.class].filter(Boolean).join(" ")">
+    <slot />
+  </div>
+</template>

package/scaffold/vue/AspectRatio.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+withDefaults(defineProps<{ class?: string }>(), { class: "" });
+</script>
+
+<template>
+  <div :class="["aspect-ratio", $props.class].filter(Boolean).join(" ")">
+    <slot />
+  </div>
+</template>

package/scaffold/vue/Avatar.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+withDefaults(defineProps<{ class?: string }>(), { class: "" });
+</script>
+
+<template>
+  <div :class="["avatar", $props.class].filter(Boolean).join(" ")">
+    <slot />
+  </div>
+</template>

package/scaffold/vue/BackToTop.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+withDefaults(defineProps<{ class?: string }>(), { class: "" });
+</script>
+
+<template>
+  <div :class="["back-to-top", $props.class].filter(Boolean).join(" ")">
+    <slot />
+  </div>
+</template>

package/scaffold/vue/Badge.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+type Variant = 'primary' | 'success' | 'warning' | 'error' | 'info';
+type Size = 'sm' | 'md' | 'lg';
+
+withDefaults(
+  defineProps<{
+    variant?: Variant;
+    size?: Size;
+    pill?: boolean;
+    class?: string;
+  }>(),
+  { variant: 'primary', size: 'md', pill: false, class: '' }
+);
+</script>
+
+<template>
+  <span
+    :class="[
+      'badge',
+      `badge--${variant}`,
+      `badge--${size}`,
+      pill ? 'badge--pill' : '',
+      $props.class,
+    ].filter(Boolean).join(' ')"
+  >
+    <slot />
+  </span>
+</template>

package/scaffold/vue/Breadcrumb.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+withDefaults(defineProps<{ class?: string }>(), { class: "" });
+</script>
+
+<template>
+  <div :class="["breadcrumb", $props.class].filter(Boolean).join(" ")">
+    <slot />
+  </div>
+</template>

package/scaffold/vue/Button.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+type Variant = 'default' | 'primary' | 'success' | 'warning' | 'error' | 'info' | 'outline';
+
+withDefaults(
+  defineProps<{
+    variant?: Variant;
+    disabled?: boolean;
+    type?: 'button' | 'submit' | 'reset';
+    class?: string;
+  }>(),
+  { variant: 'default', disabled: false, type: 'button', class: '' }
+);
+</script>
+
+<template>
+  <button
+    :type="type"
+    :disabled="disabled"
+    :class="['btn', variant !== 'default' ? `btn-${variant}` : '', $props.class].filter(Boolean).join(' ')"
+  >
+    <slot />
+  </button>
+</template>

package/scaffold/vue/ButtonGroup.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+withDefaults(defineProps<{ class?: string }>(), { class: "" });
+</script>
+
+<template>
+  <div :class="["button-group", $props.class].filter(Boolean).join(" ")">
+    <slot />
+  </div>
+</template>

package/scaffold/vue/Card.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    variant?: 'default' | 'outlined' | 'elevated';
+    class?: string;
+  }>(),
+  { variant: 'default', class: '' }
+);
+</script>
+
+<template>
+  <div
+    :class="[
+      'card',
+      variant !== 'default' ? `card--${variant}` : '',
+      $props.class,
+    ].filter(Boolean).join(' ')"
+  >
+    <slot />
+  </div>
+</template>

package/scaffold/vue/Checkbox.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+defineProps<{
+  id?: string;
+  name?: string;
+  value?: string;
+  modelValue?: boolean;
+  required?: boolean;
+  disabled?: boolean;
+  class?: string;
+  ariaDescribedby?: string;
+  ariaLabel?: string;
+}>();
+
+const emit = defineEmits<{ (e: 'update:modelValue', value: boolean): void }>();
+</script>
+
+<template>
+  <input
+    type="checkbox"
+    :id="id"
+    :name="name"
+    :value="value"
+    :checked="modelValue"
+    :required="required"
+    :disabled="disabled"
+    :class="$props.class"
+    :aria-describedby="ariaDescribedby"
+    :aria-label="ariaLabel"
+    @change="emit('update:modelValue', ($event.target as HTMLInputElement).checked)"
+  />
+</template>

package/scaffold/vue/Collapsible.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+withDefaults(defineProps<{ class?: string }>(), { class: "" });
+</script>
+
+<template>
+  <div :class="["collapsible", $props.class].filter(Boolean).join(" ")">
+    <slot />
+  </div>
+</template>

package/scaffold/vue/ContextMenu.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+withDefaults(defineProps<{ class?: string }>(), { class: "" });
+</script>
+
+<template>
+  <div :class="["context-menu", $props.class].filter(Boolean).join(" ")">
+    <slot />
+  </div>
+</template>

package/scaffold/vue/CopyToClipboard.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+withDefaults(defineProps<{ class?: string }>(), { class: "" });
+</script>
+
+<template>
+  <div :class="["copy-to-clipboard", $props.class].filter(Boolean).join(" ")">
+    <slot />
+  </div>
+</template>

package/scaffold/vue/Dashboard.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+withDefaults(defineProps<{ class?: string }>(), { class: "" });
+</script>
+
+<template>
+  <div :class="["dashboard", $props.class].filter(Boolean).join(" ")">
+    <slot />
+  </div>
+</template>

package/scaffold/vue/Divider.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    orientation?: 'horizontal' | 'vertical';
+    label?: string;
+    class?: string;
+  }>(),
+  { orientation: 'horizontal', class: '' }
+);
+</script>
+
+<template>
+  <div
+    :class="['divider', `divider--${orientation}`, label ? 'divider--labeled' : '', $props.class].filter(Boolean).join(' ')"
+    role="separator"
+    :aria-orientation="orientation"
+    :aria-label="label?.trim() || undefined"
+  >
+    <span v-if="label && orientation === 'horizontal'" class="divider__line" aria-hidden="true" />
+    <span v-if="label && orientation === 'horizontal'" class="divider__label">{{ label }}</span>
+    <span class="divider__line" aria-hidden="true" />
+  </div>
+</template>

package/scaffold/vue/DocsSidebar.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+withDefaults(defineProps<{ class?: string }>(), { class: "" });
+</script>
+
+<template>
+  <div :class="["docs-sidebar", $props.class].filter(Boolean).join(" ")">
+    <slot />
+  </div>
+</template>

package/scaffold/vue/Dropdown.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+withDefaults(defineProps<{ class?: string }>(), { class: "" });
+</script>
+
+<template>
+  <div :class="["dropdown", $props.class].filter(Boolean).join(" ")">
+    <slot />
+  </div>
+</template>

package/scaffold/vue/Empty.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+withDefaults(defineProps<{ class?: string }>(), { class: "" });
+</script>
+
+<template>
+  <div :class="["empty", $props.class].filter(Boolean).join(" ")">
+    <slot />
+  </div>
+</template>

package/scaffold/vue/FontSwitcher.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+withDefaults(defineProps<{ class?: string }>(), { class: "" });
+</script>
+
+<template>
+  <div :class="["font-switcher", $props.class].filter(Boolean).join(" ")">
+    <slot />
+  </div>
+</template>

package/scaffold/vue/Footer.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+withDefaults(defineProps<{ class?: string }>(), { class: "" });
+</script>
+
+<template>
+  <div :class="["footer", $props.class].filter(Boolean).join(" ")">
+    <slot />
+  </div>
+</template>

package/scaffold/vue/FormGroup.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    label?: string;
+    labelFor?: string;
+    required?: boolean;
+    help?: string;
+    error?: string;
+    success?: string;
+    class?: string;
+  }>(),
+  { required: false, class: '' }
+);
+</script>
+
+<template>
+  <div :class="['form-group', $props.class].filter(Boolean).join(' ')">
+    <label
+      v-if="label && labelFor"
+      :for="labelFor"
+      :class="['form-group__label', required ? 'required' : ''].filter(Boolean).join(' ')"
+    >
+      {{ label }}
+    </label>
+    <span
+      v-else-if="label"
+      :class="['form-group__label', required ? 'required' : ''].filter(Boolean).join(' ')"
+    >
+      {{ label }}
+    </span>
+    <slot />
+    <span v-if="help" :id="labelFor && help ? `${labelFor}-help` : undefined" class="form-group__help">
+      {{ help }}
+    </span>
+    <span
+      v-if="error"
+      :id="labelFor && error ? `${labelFor}-error` : undefined"
+      class="form-error"
+      role="alert"
+    >
+      {{ error }}
+    </span>
+    <span v-if="success" class="form-success" role="status">{{ success }}</span>
+  </div>
+</template>

package/scaffold/vue/HoverCard.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+withDefaults(defineProps<{ class?: string }>(), { class: "" });
+</script>
+
+<template>
+  <div :class="["hover-card", $props.class].filter(Boolean).join(" ")">
+    <slot />
+  </div>
+</template>

package/scaffold/vue/Icons.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+withDefaults(defineProps<{ class?: string }>(), { class: "" });
+</script>
+
+<template>
+  <div :class="["icons", $props.class].filter(Boolean).join(" ")">
+    <slot />
+  </div>
+</template>