v-calendar-3 1.0.0

package/dist/types/utils/locale.d.ts

@@ -0,0 +1,48 @@
+import { type PageConfig, type CachedPage } from './page';
+import { type DateSource, type DateOptions, type DayOfWeek, type MonthParts, type SimpleDateParts, type TimeNames } from './date/helpers';
+import Cache from './cache';
+import { type DateRangeSource, DateRange } from './date/range';
+export interface LocaleConfig {
+    id: string;
+    firstDayOfWeek: number;
+    masks: any;
+    monthCacheSize: number;
+    pageCacheSize: number;
+}
+export declare function resolveConfig(config: string | Partial<LocaleConfig> | undefined, locales: any): LocaleConfig;
+export default class Locale {
+    id: any;
+    daysInWeek: number;
+    firstDayOfWeek: DayOfWeek;
+    masks: any;
+    timezone: string | undefined;
+    hourLabels: string[];
+    dayNames: string[];
+    dayNamesShort: string[];
+    dayNamesShorter: string[];
+    dayNamesNarrow: string[];
+    monthNames: string[];
+    monthNamesShort: string[];
+    relativeTimeNames: TimeNames;
+    amPm: [string, string];
+    monthCache: Cache<MonthParts>;
+    pageCache: Cache<CachedPage>;
+    constructor(config?: Partial<LocaleConfig> | string | undefined, timezone?: string);
+    formatDate(date: Date, masks: string | string[]): string;
+    parseDate(dateString: string, mask: string | string[]): Date;
+    toDate(d: DateSource | Partial<SimpleDateParts>, opts?: Partial<DateOptions>): Date;
+    toDateOrNull(d: DateSource | Partial<SimpleDateParts>, opts?: Partial<DateOptions>): Date | null;
+    fromDate(date: Date | null, { type, mask }?: Partial<DateOptions>): string | number | Date | import("./date/helpers").DateParts | null;
+    range(source: DateRangeSource): DateRange;
+    ranges(ranges: DateRangeSource | DateRangeSource[]): DateRange[];
+    getDateParts(date: Date): import("./date/helpers").DateParts;
+    getDateFromParts(parts: Partial<SimpleDateParts>): Date;
+    getDateFromParams(year: number, month: number, day: number, hours: number, minutes: number, seconds: number, milliseconds: number): Date;
+    getPage(config: PageConfig): import("./page").Page;
+    getMonthParts(month: number, year: number): MonthParts;
+    getThisMonthParts(): MonthParts;
+    getPrevMonthParts(month: number, year: number): MonthParts;
+    getNextMonthParts(month: number, year: number): MonthParts;
+    getHourLabels(): string[];
+    getDayId(date: Date): string;
+}

package/dist/types/utils/page.d.ts

@@ -0,0 +1,95 @@
+import { type DateSource, type DayParts, type MonthParts } from './date/helpers';
+import Locale from './locale';
+export interface CalendarDay extends DayParts {
+    id: string;
+    position: number;
+    label: string;
+    ariaLabel: string;
+    weekdayPosition: number;
+    weekdayPositionFromEnd: number;
+    weekPosition: number;
+    isoWeeknumber: number;
+    startDate: Date;
+    noonDate: Date;
+    endDate: Date;
+    isToday: boolean;
+    isFirstDay: boolean;
+    isLastDay: boolean;
+    isDisabled: boolean;
+    isFocusable: boolean;
+    isFocused: boolean;
+    inMonth: boolean;
+    inPrevMonth: boolean;
+    inNextMonth: boolean;
+    onTop: boolean;
+    onBottom: boolean;
+    onLeft: boolean;
+    onRight: boolean;
+    classes: Array<string | object>;
+    locale: Locale;
+}
+export interface CalendarWeek {
+    id: string;
+    week: number;
+    weekPosition: number;
+    weeknumber: number;
+    isoWeeknumber: number;
+    weeknumberDisplay?: number;
+    days: CalendarDay[];
+    title: string;
+}
+export interface CalendarWeekday {
+    weekday: number;
+    label: string;
+}
+export type PageView = 'daily' | 'weekly' | 'monthly';
+export type TitlePosition = 'center' | 'left' | 'right';
+export interface Page {
+    id: string;
+    day?: number;
+    week?: number;
+    month: number;
+    year: number;
+    view: PageView;
+    trimWeeks: boolean;
+    position: number;
+    row: number;
+    rowFromEnd: number;
+    column: number;
+    columnFromEnd: number;
+    showWeeknumbers: boolean;
+    showIsoWeeknumbers: boolean;
+    weeknumberPosition: string;
+    monthTitle: string;
+    weekTitle?: string;
+    dayTitle?: string;
+    title: string;
+    titlePosition: TitlePosition;
+    shortMonthLabel: string;
+    monthLabel: string;
+    shortYearLabel: string;
+    yearLabel: string;
+    monthComps: MonthParts;
+    prevMonthComps: MonthParts;
+    nextMonthComps: MonthParts;
+    days: CalendarDay[];
+    weeks: CalendarWeek[];
+    weekdays: CalendarWeekday[];
+    viewDays: CalendarDay[];
+    viewWeeks: CalendarWeek[];
+}
+export type PageAddress = Pick<Page, 'day' | 'week' | 'month' | 'year'>;
+export type PageConfig = Pick<Page, 'day' | 'week' | 'month' | 'year' | 'view' | 'titlePosition' | 'trimWeeks' | 'position' | 'row' | 'rowFromEnd' | 'column' | 'columnFromEnd' | 'showWeeknumbers' | 'showIsoWeeknumbers' | 'weeknumberPosition'>;
+export type CachedPage = Pick<Page, 'id' | 'month' | 'year' | 'monthTitle' | 'shortMonthLabel' | 'monthLabel' | 'shortYearLabel' | 'yearLabel' | 'monthComps' | 'prevMonthComps' | 'nextMonthComps' | 'days' | 'weeks' | 'weekdays'>;
+export declare function getPageId(month: number, year: number): string;
+export declare function getPageAddressForDate(date: DateSource, view: PageView, locale: Locale): PageAddress;
+export declare function addPages({ day, week, month, year }: PageAddress, count: number, view: PageView, locale: Locale): PageAddress;
+export declare function pageIsValid(page: PageAddress | null | undefined): boolean;
+export declare function pageIsBeforePage(page: PageAddress | null | undefined, comparePage: PageAddress | null | undefined): boolean;
+export declare function pageIsAfterPage(page: PageAddress | null | undefined, comparePage: PageAddress | null | undefined): boolean;
+export declare function pageIsBetweenPages(page: PageAddress | null | undefined, fromPage: PageAddress | null | undefined, toPage: PageAddress | null | undefined): boolean;
+export declare function pageIsEqualToPage(aPage: PageAddress | null | undefined, bPage: PageAddress | null | undefined): boolean;
+export declare function pageRangeToArray(from: PageAddress, to: PageAddress, view: PageView, locale: Locale): PageAddress[];
+export declare function getPageKey(config: PageConfig): string;
+export declare function getCachedPage(config: PageConfig, locale: Locale): CachedPage;
+export declare function getPage(config: PageConfig, cachedPage: CachedPage): Page;

package/dist/types/utils/plugins/index.d.ts

@@ -0,0 +1,4 @@
+import type { App as Application, Component } from 'vue';
+import type { Defaults } from '../defaults';
+export declare const registerComponent: (instance: Application, component: Component, defaults?: Defaults) => void;
+export declare const registerComponentProgrammatic: (instance: Application, property: string, component: Component) => void;

package/dist/types/utils/popovers.d.ts

@@ -0,0 +1,47 @@
+import type { Placement } from '@popperjs/core';
+import type { Directive } from 'vue';
+export type PopoverVisibility = 'click' | 'hover' | 'hover-focus' | 'focus';
+export interface PopoverOptions {
+    id: PropertyKey;
+    visibility: PopoverVisibility;
+    isInteractive: boolean;
+    autoHide: boolean;
+    force: boolean;
+    target: unknown;
+    placement: Placement;
+    modifiers: any;
+    data: any;
+    showDelay: number;
+    hideDelay: number;
+}
+export interface PopoverState {
+    isVisible: boolean;
+    target: unknown;
+    data: any;
+    transition: string;
+    placement: Placement;
+    direction: string;
+    positionFixed: false;
+    modifiers: any[];
+    isInteractive: boolean;
+    visibility: PopoverVisibility;
+    isHovered: boolean;
+    isFocused: boolean;
+    autoHide: boolean;
+    force: boolean;
+}
+export interface PopoverEvent {
+    detail: Partial<PopoverOptions>;
+}
+export interface PopoverEventHandlers {
+    click: (e: MouseEvent) => void;
+    mousemove: (e: MouseEvent) => void;
+    mouseleave: (e: MouseEvent) => void;
+    focusin: (e: MouseEvent) => void;
+    focusout: (e: MouseEvent) => void;
+}
+export declare function showPopover(opts: Partial<PopoverOptions>): void;
+export declare function hidePopover(opts: Partial<PopoverOptions>): void;
+export declare function togglePopover(opts: Partial<PopoverOptions>): void;
+export declare function getPopoverEventHandlers(opts: Partial<PopoverOptions>): Partial<PopoverEventHandlers>;
+export declare const popoverDirective: Directive;

package/dist/types/utils/theme.d.ts

@@ -0,0 +1,17 @@
+import type { DateRangeCell } from './date/range';
+import { Attribute } from './attribute';
+import { type Bar, type Content, type Dot, type Glyph, type GlyphRenderer, type Highlight } from './glyph';
+export interface Glyphs {
+    highlights: Highlight[];
+    dots: Dot[];
+    bars: Bar[];
+    content: Content[];
+}
+export declare class Theme {
+    color: string;
+    renderers: GlyphRenderer<Glyph>[];
+    constructor(color: string);
+    normalizeGlyphs(attr: Attribute): void;
+    prepareRender(glyphs?: Partial<Glyphs>): Partial<Glyphs>;
+    render(cell: DateRangeCell<Attribute>, glyphs: Partial<Glyphs>): void;
+}

package/dist/types/utils/touch.d.ts

@@ -0,0 +1,8 @@
+import type { CustomElement } from './helpers';
+interface SwipeHandlerOptions {
+    maxSwipeTime: number;
+    minHorizontalSwipeDistance: number;
+    maxVerticalSwipeDistance: number;
+}
+export declare const addHorizontalSwipeHandler: (element: CustomElement, handler: Function, { maxSwipeTime, minHorizontalSwipeDistance, maxVerticalSwipeDistance, }: SwipeHandlerOptions) => (() => void) | null;
+export {};

package/dist/types/utils/useDisplayMode.d.ts

@@ -0,0 +1,12 @@
+import { type ComputedRef, type Ref } from 'vue';
+export interface DarkModeClassConfig {
+    selector?: string;
+    darkClass?: string;
+}
+export type DarkModeConfig = boolean | 'system' | DarkModeClassConfig;
+interface DisplayModeState {
+    isDark: Ref<boolean>;
+    displayMode: ComputedRef<'dark' | 'light'>;
+}
+export declare function useDisplayMode(config: Ref<DarkModeConfig>): DisplayModeState;
+export {};

package/dist/types/utils/watchers.d.ts

@@ -0,0 +1,6 @@
+export declare const createWatcherController: () => {
+    skipWatcher: (watcher: string, durationMs?: number) => void;
+    unskipWatcher: (watcher: string) => void;
+    handleWatcher: (watcher: string, handler: Function) => void;
+};
+export declare const skipWatcher: (watcher: string, durationMs?: number) => void, unskipWatcher: (watcher: string) => void, handleWatcher: (watcher: string, handler: Function) => void;

package/package.json

@@ -0,0 +1,115 @@
+{
+  "name": "v-calendar-3",
+  "type": "module",
+  "version": "1.0.0",
+  "description": "A calendar and date picker plugin for Vue 3.",
+  "author": "ujidesu",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/BEJIbXEOP/v-calendar.git"
+  },
+  "homepage": "https://vcalendar.io",
+  "main": "dist/cjs/index.js",
+  "module": "dist/es/index.js",
+  "jsdelivr": "dist/iife/index.js",
+  "unpkg": "dist/iife/index.js",
+  "types": "dist/types/index.d.ts",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "keywords": [
+    "vue",
+    "vue3",
+    "vuejs",
+    "plugin",
+    "calendar",
+    "v-calendar",
+    "datepicker",
+    "date picker"
+  ],
+  "license": "MIT",
+  "files": [
+    "src",
+    "dist",
+    "package.json",
+    "README.md"
+  ],
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/types/index.d.mts",
+        "node": "./dist/mjs/index.mjs",
+        "default": "./dist/es/index.js"
+      },
+      "require": {
+        "types": "./dist/types/index.d.cts",
+        "default": "./dist/cjs/index.js"
+      }
+    },
+    "./style.css": "./dist/style.css",
+    "./dist/*": "./dist/*"
+  },
+  "scripts": {
+    "build": "tsx build/build.ts",
+    "build:docs": "cd docs && yarn build",
+    "build:all": "yarn build && yarn build:docs",
+    "dev": "vite --host 127.0.0.1",
+    "format": "prettier --write .",
+    "lint": "eslint .",
+    "typecheck": "vue-tsc --noEmit -p tsconfig.json",
+    "test": "npm run test:unit",
+    "test:unit": "vitest run",
+    "test:browser": "playwright test",
+    "check:package": "publint && attw --pack . --ignore-rules no-resolution",
+    "validate": "npm run lint && npm run typecheck && npm run test:unit && npm run test:browser && npm run build && npm run check:package"
+  },
+  "dependencies": {
+    "date-fns": "^4.4.0",
+    "date-fns-tz": "^3.2.0",
+    "lodash": "^4.18.1"
+  },
+  "peerDependencies": {
+    "@popperjs/core": "^2.11.8",
+    "vue": "^3.5.16"
+  },
+  "devDependencies": {
+    "@arethetypeswrong/cli": "^0.18.5",
+    "@eslint/js": "^10.0.1",
+    "@playwright/test": "^1.61.1",
+    "@popperjs/core": "^2.11.8",
+    "@types/lodash": "^4.17.24",
+    "@types/jsdom": "^28.0.3",
+    "@types/node": "^24.13.3",
+    "@vitejs/plugin-vue": "^6.0.7",
+    "@vue/compiler-sfc": "^3.5.39",
+    "@vue/test-utils": "^2.4.11",
+    "autoprefixer": "^10.5.2",
+    "eslint": "^10.7.0",
+    "eslint-plugin-vue": "^10.9.2",
+    "globals": "^17.7.0",
+    "jsdom": "^29.1.1",
+    "postcss": "^8.5.19",
+    "postcss-import": "^16.1.1",
+    "postcss-nested": "^7.0.2",
+    "prettier": "^3.9.5",
+    "publint": "^0.3.21",
+    "rollup-plugin-visualizer": "^7.0.1",
+    "rollup-plugin-dts": "^6.4.1",
+    "terser": "^5.49.0",
+    "tsx": "^4.23.1",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.63.0",
+    "vite": "^8.1.4",
+    "vitest": "^4.1.10",
+    "vue": "^3.5.39",
+    "vue-tsc": "^3.3.7"
+  },
+  "engines": {
+    "node": "^20.19.0 || >=22.12.0"
+  },
+  "browserslist": [
+    "> 0.5%",
+    "not dead",
+    "not op_mini all"
+  ]
+}

package/src/components/BaseIcon/BaseIcon.vue

@@ -0,0 +1,29 @@
+<template>
+  <component :is="icon" :width="width" :height="height" class="vc-base-icon" />
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import * as icons from './icons';
+
+const props = defineProps({
+  name: { type: String, required: true },
+  width: { type: String },
+  height: { type: String },
+  size: { type: String, default: '26' },
+  viewBox: { type: String },
+});
+
+const width = computed(() => props.width || props.size);
+const height = computed(() => props.height || props.size);
+const icon = computed(() => (icons as any)[`Icon${props.name}`]);
+</script>
+
+<style lang="css">
+.vc-base-icon {
+  display: inline-block;
+  stroke: currentColor;
+  stroke-width: 2;
+  fill: none;
+}
+</style>

package/src/components/BaseIcon/icons/IconChevronDown.vue

@@ -0,0 +1,5 @@
+<template>
+  <svg stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
+    <polyline points="6 9 12 15 18 9"></polyline>
+  </svg>
+</template>

package/src/components/BaseIcon/icons/IconChevronLeft.vue

@@ -0,0 +1,5 @@
+<template>
+  <svg stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
+    <polyline points="15 18 9 12 15 6"></polyline>
+  </svg>
+</template>

package/src/components/BaseIcon/icons/IconChevronRight.vue

@@ -0,0 +1,5 @@
+<template>
+  <svg stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
+    <polyline points="9 18 15 12 9 6"></polyline>
+  </svg>
+</template>

package/src/components/BaseIcon/icons/IconClock.vue

@@ -0,0 +1,11 @@
+<template>
+  <svg
+    fill="none"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="2"
+    viewBox="0 0 24 24"
+  >
+    <path d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+  </svg>
+</template>

package/src/components/BaseIcon/icons/index.ts

@@ -0,0 +1,4 @@
+export { default as IconChevronRight } from './IconChevronRight.vue';
+export { default as IconChevronLeft } from './IconChevronLeft.vue';
+export { default as IconChevronDown } from './IconChevronDown.vue';
+export { default as IconClock } from './IconClock.vue';

package/src/components/BaseSelect/BaseSelect.vue

@@ -0,0 +1,136 @@
+<template>
+  <div
+    class="vc-base-select"
+    :class="{
+      'vc-fit-content': fitContent,
+      'vc-has-icon': showIcon,
+    }"
+  >
+    <select
+      v-bind="$attrs"
+      :value="modelValue"
+      class="vc-focus"
+      :class="{
+        'vc-align-right': alignRight,
+        'vc-align-left': alignLeft,
+      }"
+      @change="
+        $emit('update:modelValue', ($event.target as HTMLSelectElement).value)
+      "
+    >
+      <option
+        v-for="option in options"
+        :key="option.value"
+        :value="option.value"
+        :disabled="option.disabled"
+      >
+        {{ option.label }}
+      </option>
+    </select>
+    <BaseIcon v-if="showIcon" name="ChevronDown" size="18" />
+    <div v-if="fitContent" class="vc-base-sizer" aria-hidden="true">
+      {{ selectedLabel }}
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+interface BaseOption {
+  value: any;
+  label: string;
+  disabled?: boolean;
+}
+
+export default {
+  inheritAttrs: false,
+};
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import BaseIcon from '../BaseIcon/BaseIcon.vue';
+
+const props = defineProps<{
+  options: BaseOption[];
+  modelValue: any;
+  alignRight?: boolean;
+  alignLeft?: boolean;
+  showIcon?: boolean;
+  fitContent?: boolean;
+}>();
+defineEmits(['update:modelValue']);
+
+const selectedLabel = computed(() => {
+  const option = props.options.find(opt => opt.value === props.modelValue);
+  return option?.label;
+});
+</script>
+
+<style lang="css">
+.vc-base-select {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 30px;
+  font-size: var(--vc-text-base);
+  font-weight: var(--vc-font-medium);
+  &.vc-has-icon {
+    & select {
+      padding: 0 27px 0 9px;
+    }
+    & .vc-base-sizer {
+      padding: 0 28px 0 10px;
+    }
+  }
+  &.vc-fit-content {
+    & select {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+    }
+  }
+  & .vc-base-icon {
+    position: absolute;
+    top: 6px;
+    right: 4px;
+    opacity: 0.6;
+    pointer-events: none;
+  }
+  & .vc-base-sizer {
+    font-size: var(--vc-text-base);
+    font-weight: var(--vc-font-medium);
+    color: transparent;
+    padding: 0px 8px;
+    margin: 0;
+  }
+  & select {
+    display: inline-flex;
+    justify-content: center;
+    color: var(--vc-select-color);
+    display: block;
+    appearance: none;
+    background-color: var(--vc-select-bg);
+    border-radius: var(--vc-rounded);
+    height: 30px;
+    width: max-content;
+    padding: 0px 7px;
+    margin: 0;
+    line-height: var(--leading-none);
+    text-indent: 0px;
+    background-image: none;
+    cursor: pointer;
+    text-align: center;
+    &:hover {
+      background-color: var(--vc-select-hover-bg);
+    }
+    &.vc-align-left {
+      text-align: left;
+    }
+    &.vc-align-right {
+      text-align: right;
+    }
+  }
+}
+</style>

package/src/components/Calendar/Calendar.vue

@@ -0,0 +1,116 @@
+<template>
+  <div
+    data-helptext="Press the arrow keys to navigate by day, Home and End to navigate to week ends, PageUp and PageDown to navigate by month, Alt+PageUp and Alt+PageDown to navigate by year"
+    v-bind="$attrs"
+    :class="[
+      'vc-container',
+      `vc-${view}`,
+      `vc-${color}`,
+      `vc-${displayMode}`,
+      {
+        'vc-expanded': expanded,
+        'vc-bordered': !borderless,
+        'vc-transparent': transparent,
+      },
+    ]"
+    @mouseup.prevent
+    ref="containerRef"
+  >
+    <!--Calendar Container-->
+    <div :class="['vc-pane-container', { 'in-transition': inTransition }]">
+      <div class="vc-pane-header-wrapper">
+        <CalendarHeader v-if="firstPage" :page="firstPage!" is-lg hide-title />
+      </div>
+      <Transition
+        :name="`vc-${transitionName}`"
+        @before-enter="onTransitionBeforeEnter"
+        @after-enter="onTransitionAfterEnter"
+      >
+        <!--Calendar Layout-->
+        <div
+          :key="pages[0].id"
+          class="vc-pane-layout"
+          :style="{
+            gridTemplateColumns: `repeat(${columns}, 1fr)`,
+          }"
+        >
+          <!--Calendar pages-->
+          <CalendarPageProvider
+            v-for="page in pages"
+            :key="page.id"
+            :page="page"
+          >
+            <CalendarSlot name="page" :page="page">
+              <CalendarPage />
+            </CalendarSlot>
+          </CalendarPageProvider>
+        </div>
+      </Transition>
+      <CalendarSlot name="footer" />
+    </div>
+  </div>
+  <!--Day popover-->
+  <CalendarDayPopover />
+  <!--Nav popover-->
+  <CalendarNavPopover />
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { createCalendar, emitsDef, propsDef } from '../../use/calendar';
+import CalendarDayPopover from './CalendarDayPopover.vue';
+import CalendarHeader from './CalendarHeader.vue';
+import CalendarNavPopover from './CalendarNavPopover.vue';
+import CalendarPage from './CalendarPage.vue';
+import CalendarPageProvider from './CalendarPageProvider.vue';
+import CalendarSlot from './CalendarSlot.vue';
+
+export default defineComponent({
+  components: {
+    CalendarHeader,
+    CalendarPage,
+    CalendarNavPopover,
+    CalendarDayPopover,
+    CalendarPageProvider,
+    CalendarSlot,
+  },
+  props: propsDef,
+  emits: emitsDef,
+  setup(props, { emit, slots }) {
+    return createCalendar(props, { emit, slots });
+  },
+});
+</script>
+
+<style>
+.vc-pane-container {
+  width: 100%;
+  position: relative;
+  &.in-transition {
+    overflow: hidden;
+  }
+}
+
+.vc-pane-layout {
+  display: grid;
+}
+
+.vc-pane-header-wrapper {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  pointer-events: none;
+}
+
+.vc-day-popover-container {
+  font-size: var(--vc-text-xs);
+  font-weight: var(--vc-font-medium);
+}
+
+.vc-day-popover-header {
+  font-size: var(--vc-text-xs);
+  color: var(--vc-day-popover-header-color);
+  font-weight: var(--vc-font-semibold);
+  text-align: center;
+}
+</style>